US-205: 設計師工作台

User Story

作為設計師 (florist) 我想要 在專用工作台中處理已確認的訂單並記錄設計成果以便有效管理我的設計任務並確保作品品質可追溯

驗收標準 (Acceptance Criteria)

Scenario 1: 查看待處理訂單列表

Given 我是已登入的設計師
And 系統中有多筆待設計的訂單
When 我進入設計師工作台（/design）
Then 系統應顯示兩組訂單：
- 「等待開始設計」：CONFIRMED 狀態
- 「設計中」：IN_PRODUCTION 狀態
And 訂單應按配送日期升序排列
And 頁面標題應顯示待處理訂單總數

Scenario 2: 開始設計

Given 我在設計師工作台中
And 看到一筆「等待開始設計」的訂單
When 我點擊「開始設計」按鈕
Then 系統應顯示確認對話框
When 我點擊「是」
Then 訂單狀態應變更為 IN_PRODUCTION
And 訂單應移動到「設計中」分組
And 系統應顯示成功通知

Scenario 3: 完成設計（需上傳照片）

Given 我在設計師工作台中
And 看到一筆「設計中」的訂單
When 我點擊「完成設計」按鈕
Then 系統應顯示照片上傳對話框（PhotoUploadDialog）
And 對話框標題為「上傳作品照片」
And 說明文字為「請上傳至少一張作品照片後標記為完成」

Scenario 4: 上傳作品照片並完成

Given 照片上傳對話框已開啟
And 我已選擇至少一張照片
When 我點擊「完成設計」按鈕
Then 系統應上傳照片並更新訂單狀態為 READY_FOR_DELIVERY
And 訂單應從列表中消失
And 系統應顯示成功通知

Scenario 5: 照片驗證

Given 照片上傳對話框已開啟
And 我尚未選擇任何照片
Then 「完成設計」按鈕應為禁用狀態
And 必須上傳至少一張照片才能繼續

Scenario 6: 查看訂單詳情

Given 我在設計師工作台中
When 我點擊任一訂單卡片
Then 系統應開啟訂單詳情抽屜
And 顯示完整訂單資訊包含客戶特殊要求

Scenario 7: 取消照片上傳

Given 照片上傳對話框已開啟
When 我點擊關閉按鈕或對話框外區域
Then 對話框應關閉
And 訂單狀態保持不變

業務規則 (Business Rules)

權限控制
- 僅 florist 或更高角色可訪問設計師工作台
- 路由受 RoleGuard 保護
狀態過濾
- 顯示 CONFIRMED 和 IN_PRODUCTION 兩種狀態的訂單
照片要求
- 完成設計（IN_PRODUCTION → READY_FOR_DELIVERY）必須上傳至少一張作品照片
- 照片類型標記為 production
狀態流轉
- 開始設計：CONFIRMED → IN_PRODUCTION（無需照片）
- 完成設計：IN_PRODUCTION → READY_FOR_DELIVERY（需要照片）
多租戶隔離
- 僅顯示當前租戶的訂單

UI/UX 需求 (UI/UX Requirements)

頁面結構

實作位置: src/applets/design-applet/design-applet.tsx

┌─────────────────────────────────────────────────────┐
│ [Palette] 設計師工作台  [Badge: N]          [刷新]  │
├─────────────────────────────────────────────────────┤
│                                                     │
│ ┌─ 等待開始設計 (Waiting to Start Design) ────────┐ │
│ │  ┌─────────────────────────────────────────────┐ │ │
│ │  │ 訂單 #ABC-20251201-0001                     │ │ │
│ │  │ 客戶: 王小明                                │ │ │
│ │  │ 配送日: 2025/12/02        [開始設計 ▶]      │ │ │
│ │  └─────────────────────────────────────────────┘ │ │
│ └───────────────────────────────────────────────────┘ │
│                                                     │
│ ┌─ 設計中 (Design in Progress) ───────────────────┐ │
│ │  ┌─────────────────────────────────────────────┐ │ │
│ │  │ 訂單 #ABC-20251201-0002                     │ │ │
│ │  │ 客戶: 李小華                                │ │ │
│ │  │ 配送日: 2025/12/03        [完成設計 📦]     │ │ │
│ │  └─────────────────────────────────────────────┘ │ │
│ └───────────────────────────────────────────────────┘ │
│                                                     │
└─────────────────────────────────────────────────────┘

照片上傳對話框

┌─────────────────────────────────────────────────────┐
│                   上傳作品照片                     X │
├─────────────────────────────────────────────────────┤
│                                                     │
│  請上傳至少一張作品照片後標記為完成                 │
│                                                     │
│  ┌─────────────────────────────────────────────────┐ │
│  │                                                 │ │
│  │     [拖放照片或點擊上傳]                        │ │
│  │                                                 │ │
│  └─────────────────────────────────────────────────┘ │
│                                                     │
│  [照片1] [照片2] [照片3]                           │
│                                                     │
│                              [取消]  [完成設計]    │
│                                                     │
└─────────────────────────────────────────────────────┘

使用的組件

組件	來源	用途
`TaskGroup`	`@/applets/shared`	按狀態分組顯示訂單
`OrderDetailDrawer`	`@/applets/shared`	訂單詳情側邊抽屜
`PhotoUploadDialog`	`@/applets/order-applet/components`	照片上傳對話框
`Button`	`@appfuse/appfuse-web/components`	操作按鈕

頁面圖示

工作台圖示: Palette (Lucide)
開始設計: Play
完成設計: Package
刷新: RefreshCw

任務配置

const DESIGN_TASK_CONFIGS: TaskConfig[] = [
  {
    status: OrderStatus.CONFIRMED,
    label: 'Waiting to Start Design',
    action: 'Start Design',
    targetStatus: OrderStatus.IN_PRODUCTION,
    icon: Play,
    color: 'primary',
  },
  {
    status: OrderStatus.IN_PRODUCTION,
    label: 'Design in Progress',
    action: 'Complete Design',
    targetStatus: OrderStatus.READY_FOR_DELIVERY,
    icon: Package,
    color: 'success',
    requiresPhoto: true,
    photoType: 'production',
  },
]

技術規格 (Technical Specifications)

路由配置

路徑: /design
權限守衛: RoleGuard requiredRole="florist"
Lazy Loading: 是
Applet Registry ID: design

API 調用

獲取訂單列表

useOrderList(
  { status: [OrderStatus.CONFIRMED, OrderStatus.IN_PRODUCTION] },
  [{ id: 'deliveryDate', desc: false }]
)

更新訂單狀態（含照片）

orderService.updateStatus(orderId, {
  newStatus: OrderStatus.READY_FOR_DELIVERY,
  photoUrls: ['https://cdn.example.com/photo1.jpg', ...]
})

狀態管理

isUpdating: 狀態更新中標記
photoDialogOpen: 照片對話框開關
pendingAction: 待執行的操作（含訂單和配置）
selectedOrderId, isDrawerOpen: 詳情抽屜狀態

照片上傳流程

點擊「完成設計」按鈕
設置 pendingAction 並開啟對話框
用戶選擇照片
點擊確認，調用 handlePhotoConfirm
執行狀態更新 API（含 photoUrls）
關閉對話框並清除 pendingAction

SBE 場景 (Specification by Example)

詳細的測試場景與範例數據：

估算 (Estimation)

Story Points: 5 點
預估工時: 2-3 天
複雜度: 中等

工作拆分

組件實作 (1 天)
- DesignApplet 主組件
- 整合 TaskGroup、OrderDetailDrawer
- PhotoUploadDialog 整合
照片上傳邏輯 (0.5 天)
- pendingAction 狀態管理
- 照片驗證邏輯
API 整合 (0.5 天)
- 狀態更新含照片
- 錯誤處理
測試與調整 (0.5-1 天)
- 功能測試
- UI 調整

依賴 (Dependencies)

前置條件

US-202: 訂單狀態流轉 API
共用組件: TaskGroup, OrderDetailDrawer
PhotoUploadDialog: 照片上傳對話框組件

並行開發

可與 US-204、US-206 並行開發

外部依賴

圖片上傳服務（模擬或實際）
CDN 服務（照片存儲）

測試策略 (Testing Strategy)

單元測試

測試 DESIGN_TASK_CONFIGS 配置
測試 requiresPhoto 邏輯判斷

整合測試

測試開始設計流程
測試完成設計 + 照片上傳流程
測試照片驗證（無照片時按鈕禁用）

E2E 測試

測試完整設計流程：開始 → 上傳照片 → 完成
測試權限控制

手動測試

US-205 手動測試指南

完成定義 (Definition of Done)

備註 (Notes)

設計決策

為何完成設計需要強制上傳照片？

作品照片是客戶滿意度的重要依據
提供可追溯的設計成果記錄
簽收時客戶可查看實際成品

照片存儲策略

照片上傳至 CDN 並獲取 URL
URL 存儲在訂單的 photoUrls 欄位
照片分類標記為 production 類型

未來優化

支援照片預覽和縮放
添加照片編輯功能（裁剪、濾鏡）
支援從相機直接拍攝
添加設計備註功能

最後更新: 2025-12-19

User Story​

驗收標準 (Acceptance Criteria)​

Scenario 1: 查看待處理訂單列表​

Scenario 2: 開始設計​

Scenario 3: 完成設計（需上傳照片）​

Scenario 4: 上傳作品照片並完成​

Scenario 5: 照片驗證​

Scenario 6: 查看訂單詳情​

Scenario 7: 取消照片上傳​

業務規則 (Business Rules)​

UI/UX 需求 (UI/UX Requirements)​

頁面結構​

照片上傳對話框​

使用的組件​

頁面圖示​

任務配置​

技術規格 (Technical Specifications)​

路由配置​

API 調用​

獲取訂單列表​

更新訂單狀態（含照片）​

狀態管理​

照片上傳流程​

SBE 場景 (Specification by Example)​

估算 (Estimation)​

工作拆分​

依賴 (Dependencies)​

前置條件​

並行開發​

外部依賴​

測試策略 (Testing Strategy)​

單元測試​

整合測試​

E2E 測試​

手動測試​

完成定義 (Definition of Done)​

備註 (Notes)​

設計決策​

未來優化​

User Story

驗收標準 (Acceptance Criteria)

Scenario 1: 查看待處理訂單列表

Scenario 2: 開始設計

Scenario 3: 完成設計（需上傳照片）

Scenario 4: 上傳作品照片並完成

Scenario 5: 照片驗證

Scenario 6: 查看訂單詳情

Scenario 7: 取消照片上傳

業務規則 (Business Rules)

UI/UX 需求 (UI/UX Requirements)

頁面結構

照片上傳對話框

使用的組件

頁面圖示

任務配置

技術規格 (Technical Specifications)

路由配置

API 調用

獲取訂單列表

更新訂單狀態（含照片）

狀態管理

照片上傳流程

SBE 場景 (Specification by Example)

估算 (Estimation)

工作拆分

依賴 (Dependencies)

前置條件

並行開發

外部依賴

測試策略 (Testing Strategy)

單元測試

整合測試

E2E 測試

手動測試

完成定義 (Definition of Done)

備註 (Notes)

設計決策

未來優化