跳至主要内容

US-106: 作品集管理

User Story​

作為 花店管理者 我想要 能夠管理過去完成的作品照片 以便 作為客製化專案的提案素材，並展示店鋪的設計能力

驗收標準 (Acceptance Criteria)​

Scenario 1: 從訂單創建作品​

  • Given 我是已登入的管理者
  • And 訂單「ABC-001」狀態為「已簽收」
  • And 該訂單已上傳作品完成照片
  • When 我點擊「加入作品集」按鈕
  • And 我填寫作品標題「夢幻婚禮會場佈置」
  • And 我選擇標籤「婚禮」、「會場佈置」
  • And 我勾選「公開展示」
  • And 我點擊「儲存」按鈕
  • Then 系統應創建作品集項目
  • And 作品應關聯至原訂單
  • And 照片應複製到作品集儲存區

Scenario 2: 手動創建作品（無關聯訂單）​

  • Given 我是已登入的管理者
  • And 我在「作品集管理」頁面
  • When 我點擊「新增作品」按鈕
  • And 我填寫作品標題「經典玫瑰花束」
  • And 我上傳 3 張作品照片
  • And 我填寫作品描述「12朵紅玫瑰搭配滿天星」
  • And 我選擇標籤「花束」、「經典款」
  • And 我點擊「儲存」按鈕
  • Then 系統應創建作品集項目
  • And 作品應標記為「無關聯訂單」

Scenario 3: 查看作品集列表​

  • Given 我是已登入的員工
  • And 我在「作品集管理」頁面
  • When 頁面載入完成
  • Then 我應看到作品集列表（網格視圖）
  • And 每個作品應顯示：封面照片、標題、標籤、公開狀態
  • And 可按標籤過濾作品

Scenario 4: 編輯作品資訊​

  • Given 我是已登入的管理者
  • And 我在作品「夢幻婚禮會場佈置」的詳情頁
  • When 我點擊「編輯」按鈕
  • And 我修改標題為「浪漫婚禮會場設計」
  • And 我添加新標籤「大型專案」
  • And 我點擊「儲存」按鈕
  • Then 作品資訊應更新

Scenario 5: 管理作品照片​

  • Given 我是已登入的管理者
  • And 作品「浪漫婚禮會場設計」有 5 張照片
  • When 我上傳 2 張新照片
  • And 我刪除 1 張舊照片
  • And 我拖曳調整照片順序
  • And 我設定第 2 張照片為封面
  • Then 照片變更應儲存成功
  • And 封面照片應更新為指定的照片

Scenario 6: 設定作品公開/私密​

  • Given 我是已登入的管理者
  • And 作品「浪漫婚禮會場設計」目前為「私密」
  • When 我切換為「公開」
  • Then 作品狀態應變為「公開」
  • And 公開作品應自動添加水印

Scenario 7: 作品標籤管理​

  • Given 我是已登入的管理者
  • And 我在「作品集設定 > 標籤管理」頁面
  • When 我新增標籤「母親節」
  • And 我設定標籤顏色為粉紅色
  • And 我點擊「儲存」
  • Then 新標籤應可在作品中使用

Scenario 8: 依標籤過濾作品​

  • Given 我是已登入的員工
  • And 我在作品集列表頁面
  • When 我選擇標籤過濾「婚禮」
  • Then 列表應只顯示帶有「婚禮」標籤的作品

Scenario 9: 搜尋作品​

  • Given 我是已登入的員工
  • And 我在作品集列表頁面
  • When 我在搜尋框輸入「會場」
  • Then 列表應顯示標題或描述包含「會場」的作品

Scenario 10: 刪除作品​

  • Given 我是已登入的管理者
  • And 我在作品「測試作品」的詳情頁
  • When 我點擊「刪除」按鈕
  • And 系統要求我確認
  • And 我點擊「確認刪除」
  • Then 作品應被刪除
  • And 作品照片也應從儲存空間刪除
  • And 若有關聯訂單，訂單不受影響

Scenario 11: 在提案時使用作品集​

  • Given 我是已登入的員工
  • And 我正在為客戶創建客製化專案訂單
  • When 我點擊「選擇參考作品」按鈕
  • Then 應開啟作品集選擇器
  • And 我可以搜尋和過濾作品
  • And 選擇的作品應附加到訂單備註中

Scenario 12: 作品照片數量限制（錯誤場景）​

  • Given 我是已登入的管理者
  • And 作品已有 10 張照片（已達上限）
  • When 我嘗試上傳新照片
  • Then 系統應顯示錯誤訊息「每個作品最多 10 張照片」

業務規則 (Business Rules)​

  1. 作品來源

    • 可從已完成訂單創建（關聯訂單）
    • 可手動創建（無關聯訂單）
    • 關聯訂單的作品可追溯原始訂單

  2. 照片規範

    • 每個作品最多 10 張照片
    • 照片格式/大小規範同商品照片（US-103）
    • 必須設定一張封面照片

  3. 公開/私密設定

    • 私密: 僅內部員工可見，用於內部提案
    • 公開: 可用於官網展示、行銷素材
    • 公開照片自動添加店家 Logo 水印

  4. 水印設定

    • 位置: 右下角（可配置）
    • 透明度: 30%（可配置）
    • 原圖保留，水印版本另存

  5. 標籤系統

    • 支援自訂標籤
    • 標籤可設定顏色
    • 每個作品可有多個標籤
    • 預設標籤: 花束、盆花、婚禮、開幕、喪禮、會場佈置

  6. 權限規則

    • ROLE_STAFF: 可查看作品、使用於提案
    • ROLE_MANAGER: 可創建、編輯、刪除作品
    • ROLE_OWNER: 可管理標籤設定

  7. 多租戶隔離

    • 作品集資料與 tenantId 綁定
    • 不同租戶的作品完全隔離

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

作品集列表（網格視圖）​

作品集管理                     [新增作品]

標籤: [全部 ▼]  搜尋: [________________]

┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐
│ [封面]  │  │ [封面]  │  │ [封面]  │  │ [封面]  │
│         │  │         │  │         │  │         │
│ 婚禮會場│  │ 玫瑰花束│  │ 開幕花籃│  │ 母親節  │
│ 🏷婚禮  │  │ 🏷花束  │  │ 🏷開幕  │  │ 🏷節日  │
│ 🌐 公開 │  │ 🔒 私密 │  │ 🌐 公開 │  │ 🌐 公開 │
└─────────┘  └─────────┘  └─────────┘  └─────────┘

新增/編輯作品表單​

┌─────────────────────────────────────────────────┐
│  新增作品                                   [×] │
├─────────────────────────────────────────────────┤
│                                                 │
│  照片（最多 10 張）                             │
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐                   │
│  │ +  │ │    │ │    │ │    │                   │
│  │新增│ │    │ │    │ │    │                   │
│  └────┘ └────┘ └────┘ └────┘                   │
│                                                 │
│  作品標題 *                                     │
│  ┌─────────────────────────────────────────┐   │
│  │                                         │   │
│  └─────────────────────────────────────────┘   │
│                                                 │
│  作品描述                                       │
│  ┌─────────────────────────────────────────┐   │
│  │                                         │   │
│  │                                         │   │
│  └─────────────────────────────────────────┘   │
│                                                 │
│  標籤                                           │
│  [婚禮 ×] [會場佈置 ×] [+ 添加標籤]            │
│                                                 │
│  關聯訂單: ABC-001（2025-12-01）               │
│                                                 │
│  ☑ 公開展示                                    │
│                                                 │
│               [取消]    [儲存]                  │
└─────────────────────────────────────────────────┘

作品選擇器（用於提案）​

┌─────────────────────────────────────────────────┐
│  選擇參考作品                               [×] │
├─────────────────────────────────────────────────┤
│  標籤: [婚禮 ▼]  搜尋: [____________]           │
│                                                 │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐         │
│  │ ☑      │  │ ☐      │  │ ☐      │         │
│  │ [封面]  │  │ [封面]  │  │ [封面]  │         │
│  │ 婚禮A   │  │ 婚禮B   │  │ 婚禮C   │         │
│  └─────────┘  └─────────┘  └─────────┘         │
│                                                 │
│  已選擇: 1 個作品                               │
│                                                 │
│               [取消]    [確認選擇]              │
└─────────────────────────────────────────────────┘

技術規格 (Technical Specifications)​

API 端點​

1. 作品 CRUD​

  • GET /api/v1/portfolios - 列表（支援搜尋、標籤過濾）
  • GET /api/v1/portfolios/{id} - 詳情
  • POST /api/v1/portfolios - 創建
  • PUT /api/v1/portfolios/{id} - 更新
  • DELETE /api/v1/portfolios/{id} - 刪除

2. 從訂單創建作品​

  • POST /api/v1/orders/{orderId}/to-portfolio

3. 標籤管理​

  • GET /api/v1/portfolio-tags - 標籤列表
  • POST /api/v1/portfolio-tags - 創建標籤
  • PUT /api/v1/portfolio-tags/{id} - 更新標籤
  • DELETE /api/v1/portfolio-tags/{id} - 刪除標籤

資料模型​

interface Portfolio {
  id: string;
  tenantId: string;
  title: string;
  description?: string;
  orderId?: string;           // 關聯訂單（選填）
  coverImageUrl: string;      // 封面照片
  imageUrls: string[];        // 所有照片
  tags: PortfolioTag[];       // 標籤列表
  isPublic: boolean;          // 是否公開
  createdAt: Date;
  updatedAt: Date;
  createdBy: string;
}

interface PortfolioTag {
  id: string;
  tenantId: string;
  name: string;
  color: string;              // HEX 顏色碼
  sortOrder: number;
}

Story Points​

估算: 5 points

理由:

  • 需要處理照片上傳與管理
  • 標籤系統增加複雜度
  • 水印功能需要後端圖片處理
  • 與訂單的關聯邏輯

相關文檔​

最後更新: 2025-12-03 撰寫者: AI Assistant