專案進度回報系統 — 讓團隊協作更透明
ProgressHub 是內網專案進度管理系統，員工透過 Slack 回報每日工作進度，PM 則能透過甘特圖即時掌握所有專案的執行狀況。
- 任務池管理（認領、指派、自建）
- 甘特圖進度追蹤（篩選、分組、里程碑）
- Slack OAuth 登入 + JWT 認證
- 權限分層管理（Employee / PM / Admin）
- 每日自動提醒回報
| 層級 | 技術 |
|---|---|
| 前端 | Vue 3, TypeScript, Pinia, Tailwind CSS, Vite |
| 後端 | Express.js, TypeScript, Prisma, PostgreSQL |
| 認證 | Slack OAuth + JWT |
| 部署 | Docker, Zeabur |
.
├── packages/
│ ├── frontend/ # Vue 3 前端應用
│ │ └── src/
│ │ ├── pages/ # 頁面元件
│ │ ├── components/ # 共用元件 (common/, layout/, task/, gantt/)
│ │ ├── stores/ # Pinia stores
│ │ ├── services/ # API service layer
│ │ ├── composables/ # Vue composables
│ │ └── mocks/ # Mock 資料
│ └── shared/
│ └── types/ # 前後端共用 TypeScript 類型
│
├── backend/ # Express.js 後端 API
│ ├── prisma/
│ │ └── schema.prisma
│ └── src/
│ ├── config/ # 環境設定
│ ├── controllers/ # 控制器
│ ├── middleware/ # 中間件 (auth, rate-limit, CORS)
│ ├── routes/ # 路由
│ └── services/ # 業務邏輯
│
├── .github/workflows/ # CI/CD
├── docker-compose.yml
└── pnpm-workspace.yaml
- Node.js 20+
- pnpm 8+
- Docker & Docker Compose（後端開發需要）
不需要後端和資料庫，適合前端開發：
# 安裝依賴
pnpm install
# 啟動前端（預設使用 mock 資料）
pnpm --filter frontend dev前端會啟動在 http://localhost:5173，可使用 Demo 登入。
需要後端 API 和 PostgreSQL：
# 1. 啟動 PostgreSQL
docker compose up -d postgres
# 2. 設定後端環境變數
cp .env.example backend/.env
# 編輯 backend/.env 填入必要設定
# 3. 初始化資料庫
pnpm --filter backend exec prisma migrate dev
pnpm --filter backend exec prisma db seed
# 4. 啟動後端
pnpm --filter backend dev
# 5. 啟動前端（API 模式）
# 在 packages/frontend/.env 設定 VITE_USE_MOCK=false
pnpm --filter frontend devdocker compose up -d複製 .env.example 並填入必要設定。
必要變數（生產環境）：
| 變數 | 說明 |
|---|---|
DATABASE_URL |
PostgreSQL 連線字串 |
JWT_SECRET |
JWT 簽章金鑰 |
JWT_REFRESH_SECRET |
JWT Refresh Token 金鑰 |
SLACK_CLIENT_ID |
Slack App Client ID |
SLACK_CLIENT_SECRET |
Slack App Client Secret |
SLACK_SIGNING_SECRET |
Slack Signing Secret |
SLACK_BOT_TOKEN |
Slack Bot Token (xoxb-) |
可選變數：
| 變數 | 預設值 | 說明 |
|---|---|---|
NODE_ENV |
development |
執行環境 |
BACKEND_PORT |
3000 |
後端埠號 |
JWT_EXPIRES_IN |
2h |
Token 有效期 |
VITE_USE_MOCK |
true |
前端是否使用 Mock 資料 |
VITE_API_URL |
http://localhost:3000/api |
後端 API URL |
POST /api/auth/slack— Slack OAuth 登入POST /api/auth/refresh— 重新整理 TokenGET /api/auth/me— 取得當前使用者
GET /api/projects/:projectId/tasks— 取得專案任務POST /api/projects/:projectId/tasks— 建立任務 (PM/Admin)PUT /api/tasks/:id— 更新任務DELETE /api/tasks/:id— 刪除任務GET /api/tasks/my— 取得我的任務POST /api/tasks/:id/claim— 認領任務POST /api/tasks/:id/unclaim— 取消認領
POST /api/progress— 提交進度回報GET /api/progress— 查詢進度記錄
GET /api/gantt— 取得甘特圖資料
| 角色 | 權限 |
|---|---|
| Employee | 回報進度、查看參與的專案 |
| PM | 管理專案/任務/里程碑、查看所有專案甘特圖 |
| Admin | 所有 PM 權限 + 員工管理 + 系統設定 |
- Helmet.js 安全標頭
- CORS 白名單
- API Rate Limiting
- JWT Token 認證（Access + Refresh）
- AES-256-GCM 加密敏感資料
- 生產環境強制設定 JWT_SECRET / JWT_REFRESH_SECRET
- Fork 此 repo
- 建立功能分支 (
git checkout -b feature/amazing-feature) - 提交變更 (
git commit -m 'feat: add amazing feature') - 推送到分支 (
git push origin feature/amazing-feature) - 開啟 Pull Request
請確保 CI 通過後再提交 PR。
MIT