80 lines
2.8 KiB
Markdown
80 lines
2.8 KiB
Markdown
## 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 相同的其他資訊（如進度條）？
|
||
- **建議**: 先保持基本一致，後續根據需求擴展
|