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