modify my task

2026-03-01 11:30:40 +08:00
parent de59b57ee7
commit c8c4c99a6e
14 changed files with 696 additions and 91 deletions
@@ -0,0 +1,79 @@
+## 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
+
+此變更為前端佈局修改，不需要資料遷移。部署步驟：
+
+1. **修改 MyTasksView 元件**：
+   - 更新 header 區域樣式
+   - 調整 DataTable 欄位配置
+   - 確保與 Shot Task 風格一致
+
+2. **測試**：
+   - 驗證 My Tasks 頁面顯示正確
+   - 確認篩選、排序功能正常
+   - 檢查與 Shot Task 頁面的視覺一致性
+
+3. **部署**：
+   - 前端部署後自動生效
+   - 可隨時回滾到舊版佈局
+
+## Open Questions
+
+- **Q1**: 是否需要建立可重用的佈局元件供 Shot Task 和 My Tasks 共用？
+  - **建議**: 先直接修改，後續重構時再提取共用元件
+
+- **Q2**: My Tasks 是否需要顯示與 Shot Task 相同的其他資訊（如進度條）？
+  - **建議**: 先保持基本一致，後續根據需求擴展