3470428411
- Backend (FastAPI): - Task comments with nested replies and soft delete - @mention parsing with 10-mention limit per comment - Notification system with read/unread tracking - Blocker management with project owner notification - WebSocket endpoint with JWT auth and keepalive - User search API for @mention autocomplete - Alembic migration for 4 new tables - Frontend (React + Vite): - Comments component with @mention autocomplete - NotificationBell with real-time WebSocket updates - BlockerDialog for task blocking workflow - NotificationContext for state management - OpenSpec: - 4 requirements with scenarios defined - add-collaboration change archived 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2.7 KiB
2.7 KiB
1. Database Schema
- 1.1 建立 Comment model (
pjctrl_comments) - 1.2 建立 Mention model (
pjctrl_mentions) - 1.3 建立 Notification model (
pjctrl_notifications) - 1.4 建立 Blocker model (
pjctrl_blockers) - 1.5 建立 Alembic migration
- 1.6 更新 Task model 加入 comments relationship
- 1.7 更新 User model 加入 notifications relationship
2. Backend API - Comments
- 2.1 建立 Comment schemas (request/response)
- 2.2 實作 POST
/api/tasks/{task_id}/comments- 新增留言 - 2.3 實作 GET
/api/tasks/{task_id}/comments- 取得留言列表 - 2.4 實作 PUT
/api/comments/{comment_id}- 編輯留言 - 2.5 實作 DELETE
/api/comments/{comment_id}- 刪除留言 - 2.6 實作 @mention 解析邏輯（從留言內容提取 @username）
3. Backend API - Notifications
- 3.1 建立 Notification schemas
- 3.2 實作 NotificationService（建立、發送通知）
- 3.3 實作 GET
/api/notifications- 取得通知列表 - 3.4 實作 PUT
/api/notifications/{id}/read- 標記已讀 - 3.5 實作 PUT
/api/notifications/read-all- 全部已讀 - 3.6 實作 GET
/api/notifications/unread-count- 未讀數量
4. Backend API - Blockers
- 4.1 建立 Blocker schemas
- 4.2 實作 POST
/api/tasks/{task_id}/blockers- 標記阻礙 - 4.3 實作 PUT
/api/blockers/{blocker_id}/resolve- 解除阻礙 - 4.4 實作 GET
/api/tasks/{task_id}/blockers- 取得阻礙歷史 - 4.5 整合阻礙通知（通知專案 Owner）
5. WebSocket Integration
- 5.1 建立 WebSocket connection manager
- 5.2 實作
/ws/notificationsendpoint - 5.3 整合 Redis Pub/Sub 發布通知
- 5.4 實作 WebSocket 認證（JWT token）
- 5.5 實作心跳機制（keepalive）
6. Backend API - User Search
- 6.1 實作 GET
/api/users/search?q={query}- 使用者搜尋（支援 @mention 自動完成）
7. Frontend - Comments
- 7.1 建立 CommentList 元件
- 7.2 建立 CommentItem 元件（支援巢狀回覆）
- 7.3 建立 CommentForm 元件（含 @mention 自動完成）
- 7.4 整合至 Task 詳情頁
8. Frontend - Notifications
- 8.1 建立 NotificationContext（狀態管理）
- 8.2 建立 NotificationBell 元件（未讀數量 badge）
- 8.3 建立 NotificationList 元件
- 8.4 建立 NotificationItem 元件
- 8.5 整合 WebSocket 連線
9. Frontend - Blockers
- 9.1 建立 BlockerDialog 元件（標記阻礙表單）
- 9.2 建立 BlockerHistory 元件
- 9.3 整合至 Task 詳情頁
10. Testing
- 10.1 Comment API 單元測試
- 10.2 Notification API 單元測試
- 10.3 Blocker API 單元測試
- 10.4 WebSocket 連線測試
- 10.5 @mention 解析測試