220 lines
4.9 KiB
Markdown
220 lines
4.9 KiB
Markdown
# 授權 強茂 使用
|
||
# 執行管理績效儀表板
|
||
|
||
一個現代化的執行管理績效儀表板系統，使用 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 或聯繫開發團隊。
|
||
|
||
---
|
||
|
||
**開發團隊** - 執行管理績效儀表板專案組 |