slash admin

斜線管理員

Slash Admin 是一個使用 React 18、Vite、Ant Design 和 TypeScript 建置的現代管理儀表板範本。它旨在幫助開發人員快速創建強大的管理系統。

預覽 · Discord · 文檔

英語| 中文

贊助

預覽

• https://admin.slashspaces.com/

特徵

• 使用 React 18 hooks 建置。
• 由Vite提供支持，可實現快速開發和熱模組更換。
• 整合Ant Design，提供豐富的UI元件和設計模式。
• 用 TypeScript 編寫，提供類型安全性和改進的開發體驗。
• 響應式設計，適應各種螢幕尺寸和設備。
• 靈活的路由配置，支援嵌套路由。
• 基於使用者角色的整合存取控制。
• 支援國際化，方便語言切換。
• 包括常見的管理功能，例如使用者管理、角色管理和權限管理。
• 可自訂的主題和样式，以滿足您的品牌需求。
• 基於 MSW 和 Faker.js 的模擬解決方案。
• 使用 Zustand 進行狀態管理。
• 使用 React-Query 取得數據。

快速入門

取得專案代碼

git clone https://github.com/d3george/slash-admin.git

安裝依賴項

在專案根目錄下，執行以下命令安裝專案依賴：

pnpm install

啟動開發伺服器

執行以下命令啟動開發伺服器：

pnpm dev

請造訪 http://localhost:3001 查看您的應用程式。

為生產而構建

執行以下命令來建立生產版本：

pnpm build

Docker部署

建造鏡像並運行容器

建立形象

在終端機中進入專案根目錄，執行以下命令建置Docker映像：

 docker build -t your-image-name .

確保將your-image-name替換為您自己的圖片名稱

運行容器

使用以下命令在 Docker 容器中執行應用程式：

 docker run -p 3001:80 your-image-name

這將在容器的連接埠80 （在Dockerfile中公開）上運行您的應用程序，並將其映射到主機上的連接埠3001 。

現在您可以造訪http://localhost:3001來查看已部署的應用程式。

使用 docker-compose.yaml

在終端機中進入專案根目錄，執行以下命令啟動Docker Compose：

 docker-compose up -d

Docker Compose 將根據「docker-compose.yml」定義的配置來建構映像。 yaml' 並在背景運行容器。

容器運行成功後，也可以透過 http://localhost:3001 來查看已部署的應用程式。

Git 貢獻提交規範

參考.commitlint.config.js

• feat新功能
• fix修復
• docs文檔或註釋
• style程式碼格式（不影響程式碼執行的變更）
• refactor
• perf性能優化
• revert恢復提交
• test測試相關
• 施工過程或輔助工具的chore變更
• ci修改 CI 配置和腳本
• types類型定義檔更改
• 開發中的在wip