2.8 KiB
2.8 KiB
Context
此變更旨在修改「我的任務」(My Tasks) 頁面的佈局，使其更接近 Shot Task 頁面的設計。目前 My Tasks 頁面使用專案任務頁面的佈局，但用戶希望它能更像 Shot Task 頁面，以提供更好的視覺一致性和使用體驗。
現有系統已經具備：
- 完整的 My Tasks 功能（使用 project task page layout）
- Shot Task 頁面的佈局設計
- DataTable 元件
- Tailwind CSS 和 shadcn-vue 元件庫
Goals / Non-Goals
Goals:
- 將 My Tasks 頁面的 header 區域改為 Shot Task 風格
- 調整資料表格的列配置與 Shot Task 頁面一致
- 保持現有的篩選、排序、分頁功能
- 確保視覺層級與 Shot Task 頁面一致
Non-Goals:
- 不會修改 Shot Task 頁面本身
- 不會新增或移除功能（僅改變佈局）
- 不會修改 API 端點
Decisions
1. 佈局策略：完整採用 Shot Task 風格 vs 混合風格
Decision: 主要採用 Shot Task 風格，保留 My Tasks 特有的跨專案篩選功能
Rationale:
- 用戶明確要求接近 Shot Task 佈局
- Shot Task 佈局已驗證且用戶熟悉
- My Tasks 的跨專案特性需要在頂部保留專案篩選器
Alternative considered: 完全複製 Shot Task 佈局
- 這個方法會失去 My Tasks 的特色（跨專案視圖）
2. Header 設計
Decision: 使用 Shot Task 的 header 結構，但加上專案篩選下拉選單
Rationale:
- Shot Task header 包含標題、篩選器、操作按鈕
- My Tasks 需要顯示所有專案的任務，專案篩選是關鍵功能
3. 資料表格欄位
Decision: 參考 Shot Task 的欄位配置，但加入「專案」欄位
Rationale:
- Shot Task 欄位適合任務管理
- My Tasks 是跨專案視圖，需要顯示任務所屬專案
Risks:
- [Risk] 新舊佈局差異造成用戶困惑 → Mitigation: 保持整體結構相似，只調整細節
- [Risk] 共用元件修改影響 Shot Task → Mitigation: 使用條件式 props 或建立變體元件
Migration Plan
此變更為前端佈局修改，不需要資料遷移。部署步驟：
-
修改 MyTasksView 元件：
- 更新 header 區域樣式
- 調整 DataTable 欄位配置
- 確保與 Shot Task 風格一致
-
測試：
- 驗證 My Tasks 頁面顯示正確
- 確認篩選、排序功能正常
- 檢查與 Shot Task 頁面的視覺一致性
-
部署：
- 前端部署後自動生效
- 可隨時回滾到舊版佈局
Open Questions
-
Q1: 是否需要建立可重用的佈局元件供 Shot Task 和 My Tasks 共用？
- 建議: 先直接修改，後續重構時再提取共用元件
-
Q2: My Tasks 是否需要顯示與 Shot Task 相同的其他資訊（如進度條）？
- 建議: 先保持基本一致，後續根據需求擴展