init
This commit is contained in:
219
README.md
Normal file
219
README.md
Normal file
@@ -0,0 +1,219 @@
|
||||
# 執行管理績效儀表板
|
||||
|
||||
一個現代化的執行管理績效儀表板系統，使用 Next.js 和 MySQL 資料庫構建。
|
||||
|
||||
## 🚀 功能特色
|
||||
|
||||
- **📊 KPI 管理**: 完整的關鍵績效指標設定、追蹤和管理
|
||||
- **👥 用戶管理**: 多角色用戶系統（執行長、經理、HR）
|
||||
- **📈 進度追蹤**: 即時進度更新和視覺化圖表
|
||||
- **📋 評審系統**: 績效評審安排和管理
|
||||
- **📊 報告生成**: 自動化報告和數據分析
|
||||
- **🎨 現代化 UI**: 響應式設計，支援深色/淺色主題
|
||||
|
||||
## 🛠 技術架構
|
||||
|
||||
- **前端**: Next.js 15, React 19, TypeScript
|
||||
- **UI 框架**: Tailwind CSS, Radix UI
|
||||
- **資料庫**: MySQL 8.0+
|
||||
- **圖表**: Recharts
|
||||
- **表單**: React Hook Form + Zod
|
||||
- **狀態管理**: React Hooks
|
||||
|
||||
## 📋 系統需求
|
||||
|
||||
- Node.js 18+
|
||||
- MySQL 8.0+
|
||||
- pnpm (推薦) 或 npm
|
||||
|
||||
## 🚀 快速開始
|
||||
|
||||
### 1. 克隆專案
|
||||
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd executive-performance-dashboard
|
||||
```
|
||||
|
||||
### 2. 安裝依賴
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### 3. 環境設定
|
||||
|
||||
創建 `.env.local` 檔案：
|
||||
|
||||
```env
|
||||
# MySQL 資料庫設定
|
||||
DB_HOST=mysql.theaken.com
|
||||
DB_PORT=33306
|
||||
DB_DATABASE=db_A022
|
||||
DB_USERNAME=A022
|
||||
DB_PASSWORD=NNyTXRWWtP4b
|
||||
|
||||
# Next.js 設定
|
||||
NEXT_PUBLIC_APP_URL=http://localhost:3006
|
||||
```
|
||||
|
||||
### 4. 初始化資料庫
|
||||
|
||||
```bash
|
||||
# 測試資料庫連接
|
||||
pnpm db:test
|
||||
|
||||
# 初始化資料庫結構和測試數據
|
||||
pnpm db:init
|
||||
```
|
||||
|
||||
### 5. 啟動開發伺服器
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
訪問 [http://localhost:3006](http://localhost:3006) 查看應用程式。
|
||||
|
||||
## 📊 資料庫結構
|
||||
|
||||
### 主要資料表
|
||||
|
||||
- **users**: 用戶資訊和角色管理
|
||||
- **kpi**: 關鍵績效指標定義
|
||||
- **kpi_progress**: KPI 進度追蹤記錄
|
||||
- **reviews**: 績效評審安排
|
||||
- **reports**: 報告生成記錄
|
||||
|
||||
### 資料關係
|
||||
|
||||
```
|
||||
users (1) ←→ (N) kpi
|
||||
kpi (1) ←→ (N) kpi_progress
|
||||
users (1) ←→ (N) reviews (作為 reviewer)
|
||||
users (1) ←→ (N) reviews (作為 reviewee)
|
||||
```
|
||||
|
||||
## 🔧 API 端點
|
||||
|
||||
### KPI 管理
|
||||
- `GET /api/kpi` - 獲取 KPI 列表
|
||||
- `POST /api/kpi` - 創建新 KPI
|
||||
- `PUT /api/kpi/[id]` - 更新 KPI
|
||||
- `DELETE /api/kpi/[id]` - 刪除 KPI
|
||||
- `POST /api/kpi/[id]/progress` - 更新 KPI 進度
|
||||
|
||||
### 用戶管理
|
||||
- `GET /api/users` - 獲取用戶列表
|
||||
- `POST /api/users` - 創建新用戶
|
||||
|
||||
### 評審管理
|
||||
- `GET /api/reviews` - 獲取評審列表
|
||||
- `POST /api/reviews` - 創建新評審
|
||||
|
||||
### 系統管理
|
||||
- `GET /api/database/test` - 測試資料庫連接
|
||||
|
||||
## 📁 專案結構
|
||||
|
||||
```
|
||||
executive-performance-dashboard/
|
||||
├── app/ # Next.js App Router
|
||||
│ ├── api/ # API 路由
|
||||
│ ├── kpi/ # KPI 管理頁面
|
||||
│ ├── progress/ # 進度追蹤頁面
|
||||
│ ├── reports/ # 報告頁面
|
||||
│ ├── reviews/ # 評審頁面
|
||||
│ └── admin/ # 管理員頁面
|
||||
├── components/ # React 組件
|
||||
│ ├── ui/ # 基礎 UI 組件
|
||||
│ └── navigation.tsx # 導航組件
|
||||
├── lib/ # 工具函數
|
||||
│ ├── database.ts # 資料庫連接和服務
|
||||
│ └── utils.ts # 通用工具函數
|
||||
├── scripts/ # 腳本檔案
|
||||
│ ├── create-database-schema.sql # 資料庫結構
|
||||
│ ├── init-database.js # 初始化腳本
|
||||
│ └── test-db-connection.js # 連接測試
|
||||
└── public/ # 靜態資源
|
||||
```
|
||||
|
||||
## 🎯 使用指南
|
||||
|
||||
### 管理員功能
|
||||
|
||||
1. **用戶管理**: 在管理員頁面新增、編輯、刪除用戶
|
||||
2. **KPI 審核**: 審核和批准 KPI 設定
|
||||
3. **系統監控**: 查看系統使用統計和報告
|
||||
|
||||
### 經理功能
|
||||
|
||||
1. **KPI 設定**: 為團隊成員設定 KPI
|
||||
2. **進度追蹤**: 定期更新 KPI 進度
|
||||
3. **評審安排**: 安排績效評審會議
|
||||
|
||||
### 員工功能
|
||||
|
||||
1. **進度更新**: 更新個人 KPI 進度
|
||||
2. **評審參與**: 參與績效評審
|
||||
3. **報告查看**: 查看個人績效報告
|
||||
|
||||
## 🔒 安全性
|
||||
|
||||
- 所有資料庫查詢使用參數化查詢防止 SQL 注入
|
||||
- 環境變數管理敏感資訊
|
||||
- API 端點包含錯誤處理和驗證
|
||||
|
||||
## 🧪 測試
|
||||
|
||||
```bash
|
||||
# 測試資料庫連接
|
||||
pnpm db:test
|
||||
|
||||
# 運行 lint 檢查
|
||||
pnpm lint
|
||||
|
||||
# 建置專案
|
||||
pnpm build
|
||||
```
|
||||
|
||||
## 📈 部署
|
||||
|
||||
### 生產環境部署
|
||||
|
||||
1. 設定生產環境變數
|
||||
2. 建置專案: `pnpm build`
|
||||
3. 啟動生產伺服器: `pnpm start`
|
||||
|
||||
### Docker 部署
|
||||
|
||||
```dockerfile
|
||||
FROM node:18-alpine
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
EXPOSE 3006
|
||||
CMD ["npm", "start"]
|
||||
```
|
||||
|
||||
## 🤝 貢獻
|
||||
|
||||
1. Fork 專案
|
||||
2. 創建功能分支 (`git checkout -b feature/AmazingFeature`)
|
||||
3. 提交變更 (`git commit -m 'Add some AmazingFeature'`)
|
||||
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
||||
5. 開啟 Pull Request
|
||||
|
||||
## 📄 授權
|
||||
|
||||
本專案採用 MIT 授權 - 查看 [LICENSE](LICENSE) 檔案了解詳情。
|
||||
|
||||
## 📞 支援
|
||||
|
||||
如有問題或建議，請開啟 Issue 或聯繫開發團隊。
|
||||
|
||||
---
|
||||
|
||||
**開發團隊** - 執行管理績效儀表板專案組
|
||||
Reference in New Issue
Block a user