跳至主要内容

US-003: 基礎 Layout 與導航 - 手動測試指南

測試日期: ____________ 測試人員: ____________ 測試環境: npm run dev (localhost:3000)

架構說明​

本系統採用 Application Launcher + AppletShell 架構：

  1. Application Launcher：類似 macOS Launchpad，用於啟動不同的 Applet
  2. AppletShell：每個 Applet 的外殼，包含左側工具列和右側內容區
  3. Header：固定頂部導航欄，包含 Logo、Application Launcher 入口、功能按鈕
┌─────────────────────────────────────────────────────────────────┐
│ Header: [Logo] [租戶名]              [🔲] [⛶] [🌐] [🌓] [🔔] [👤] │
├─────────────────────────────────────────────────────────────────┤
│ ┌──┐                                                            │
│ │🏠│  Main Content (Applet 內容區)                              │
│ ├──┤                                                            │
│ │📦│                                                            │
│ ├──┤                                                            │
│ │➕│                                                            │
│ └──┘                                                            │
│ AppletShell 工具列                                               │
└─────────────────────────────────────────────────────────────────┘

測試前準備​

1. 啟動開發伺服器​

npm run dev

2. 登入測試帳號​

訪問 http://localhost:3000/login

測試帳號（店員角色）:

  • 用戶名: staff@florist.com
  • 密碼: Password123!

登入成功後應看到首頁和完整的 Layout 結構。

測試場景​

✅ Scenario 1: 登入後看到完整的 Layout 結構（正常流程）​

目標: 驗證 Layout 所有組件都正確顯示

操作步驟​

  1. 登入系統

    • 使用 staff@florist.com 登入

  2. 驗證 Header 結構

    • ✅ 左側區域:
      • Logo（圓角方形紫色背景 + 白色「F」字母）
      • 租戶名稱「花店 ABC」
    • ✅ 右側區域（從左到右）:
      • Application Launcher 按鈕（九宮格 Grid3x3 圖示）
      • 全螢幕切換按鈕（Maximize 圖示）
      • 語言切換按鈕（地球 Globe 圖示）
      • 主題切換按鈕（深色/淺色模式圖示）
      • 通知鈴鐺按鈕（Bell 圖示，目前禁用）
      • 用戶選單（頭像 + 姓名）

  3. 驗證 AppletShell 結構（進入任一 Applet 後）

    • 點擊 Application Launcher → 選擇「訂單管理」
    • ✅ 驗證: 左側顯示工具列（圖示按鈕）
    • ✅ 驗證: 右側顯示 Applet 內容區
    • ✅ 驗證: 工具列按鈕包含列表、新增等功能

  4. 驗證 Main Content

    • ✅ 驗證: 顯示對應 Applet 的內容

  5. 驗證響應式佈局

    • ✅ 驗證: 所有組件排列整齊
    • ✅ 驗證: 沒有內容溢出或重疊
    • ✅ 驗證: 使用 DaisyUI 語義色彩（bg-base-100, border-base-300 等）

預期結果​

  • ✅ Header、AppletShell、Main Content 都正確顯示
  • ✅ Layout 佈局整齊
  • ✅ 使用 DaisyUI 語義色彩

✅ Scenario 2: Header 中顯示用戶資訊與角色​

目標: 驗證用戶資訊顯示正確

操作步驟​

  1. 登入後，查看 Header 右上角
  2. ✅ 驗證: 顯示用戶姓名（例如：「王小明」或 email）
  3. ✅ 驗證: 顯示角色標籤「店員」或「SALES_STAFF」（Badge 樣式）
  4. ✅ 驗證: 顯示用戶頭像或姓名首字母圓形 Avatar

預期結果​

  • ✅ 用戶姓名正確顯示
  • ✅ 角色標籤正確顯示
  • ✅ Avatar 顯示正確

✅ Scenario 3: 點擊用戶選單顯示下拉選項​

目標: 驗證用戶選單功能

操作步驟​

  1. 點擊 Header 右上角的用戶頭像或姓名
  2. ✅ 驗證: 顯示下拉選單
  3. ✅ 驗證: 選單包含以下項目:
    • 「個人設定」
    • 「登出」
  4. 測試登出功能
    • 點擊「登出」
    • ✅ 驗證: 重定向至登入頁面 /login
    • ✅ 驗證: localStorage 中的 access_token 已清除

預期結果​

  • ✅ 用戶選單正常顯示
  • ✅ 登出功能正常運作

✅ Scenario 4: Application Launcher 根據角色動態顯示 Applet​

目標: 驗證角色權限過濾

操作步驟​

  1. 測試店員角色（ROLE_SALES）

    • 使用 staff@florist.com 登入
    • 點擊九宮格圖示開啟 Application Launcher
    • ✅ 驗證: 看到以下 Applet:
      • 首頁
      • 訂單管理
      • 客戶管理
    • ✅ 驗證: 不看到以下 Applet（需要更高權限）:
      • 系統設定
      • 報表分析

  2. 測試店主角色（ROLE_OWNER）（可選）

    • 登出
    • 使用 owner@florist.com 登入
    • 點擊九宮格圖示開啟 Application Launcher
    • ✅ 驗證: 看到更多 Applet（包含報表分析）

預期結果​

  • ✅ 店員只看到對應權限的 Applet
  • ✅ 店主看到更多 Applet

✅ Scenario 5: 使用 Application Launcher 導航至對應 Applet​

目標: 驗證路由導航功能

操作步驟​

  1. 確認當前在首頁 /
  2. 點擊九宮格圖示開啟 Application Launcher
  3. 點擊「訂單管理」Applet
  4. ✅ 驗證: Application Launcher 自動關閉
  5. ✅ 驗證: 導航至訂單列表頁面（URL 變為 /orders）
  6. ✅ 驗證: Main Content 顯示訂單 Applet（含左側工具列）
  7. 再次開啟 Application Launcher，點擊「首頁」
  8. ✅ 驗證: 導航回首頁（URL 變為 /）

預期結果​

  • ✅ 路由導航正常
  • ✅ Application Launcher 選擇後自動關閉
  • ✅ URL 同步更新

✅ Scenario 6: AppletShell 工具列導航功能​

目標: 驗證 AppletShell 內部工具列導航

操作步驟​

  1. 進入訂單管理 Applet

    • 使用 Application Launcher 開啟「訂單管理」
    • ✅ 驗證: 左側顯示工具列（寬度約 64px）

  2. 驗證工具列按鈕

    • ✅ 驗證: 列表按鈕（List 圖示）
    • ✅ 驗證: 新增按鈕（Plus 圖示）
    • ✅ 驗證: 當前頁面對應的按鈕為 solid 樣式（高亮）

  3. 測試內部導航

    • 點擊「新增」按鈕
    • ✅ 驗證: URL 變為 /orders/new
    • ✅ 驗證: 「新增」按鈕變為高亮狀態
    • ✅ 驗證: Main Content 顯示新增訂單表單

  4. 返回列表頁

    • 點擊「列表」按鈕
    • ✅ 驗證: URL 變為 /orders
    • ✅ 驗證: 「列表」按鈕變為高亮狀態

預期結果​

  • ✅ AppletShell 工具列導航正常
  • ✅ 當前頁面按鈕正確高亮
  • ✅ URL 同步更新

✅ Scenario 7: 手機版 Application Launcher 與響應式佈局​

目標: 驗證響應式設計（手機版）

操作步驟​

  1. 切換至手機視圖

    • 打開開發者工具 (F12)
    • 點擊裝置模擬工具列（Toggle Device Toolbar）
    • 選擇「iPhone SE」或「iPhone 14 Pro」

  2. 驗證手機版 Header

    • ✅ 驗證: Header 維持顯示
    • ✅ 驗證: 九宮格圖示（Application Launcher）仍可見
    • ✅ 驗證: 部分功能按鈕可能隱藏或縮減

  3. 打開 Application Launcher

    • 點擊九宮格圖示
    • ✅ 驗證: Application Launcher 全螢幕顯示
    • ✅ 驗證: Applet 圖示適應手機版佈局（較少欄數）
    • ✅ 驗證: 搜尋框仍可使用

  4. 選擇 Applet

    • 點擊「訂單管理」Applet
    • ✅ 驗證: Application Launcher 關閉
    • ✅ 驗證: 導航至 /orders

  5. 驗證 AppletShell 手機版

    • ✅ 驗證: 工具列可能在底部或以其他方式呈現
    • ✅ 驗證: Main Content 可正常操作
    • ✅ 驗證: 觸控操作順暢

預期結果​

  • ✅ 手機版 Application Launcher 正常運作
  • ✅ 響應式佈局正確
  • ✅ 觸控操作正常

✅ Scenario 8: 響應式測試（平板）​

目標: 驗證平板視圖（768px - 1024px）

操作步驟​

  1. 切換裝置模擬至「iPad」或「iPad Pro」
  2. ✅ 驗證: Layout 正常顯示（不破版）
  3. ✅ 驗證: Header 完整顯示所有功能按鈕
  4. ✅ 驗證: Application Launcher 顯示適當的欄數
  5. ✅ 驗證: AppletShell 工具列正常顯示
  6. ✅ 驗證: 所有文字清晰可讀
  7. ✅ 驗證: 按鈕大小適合觸控（至少 44x44px）

預期結果​

  • ✅ 平板視圖正常顯示
  • ✅ 無橫向捲軸
  • ✅ 可用性良好

✅ Scenario 9: 無障礙性測試（鍵盤導航）​

目標: 驗證鍵盤操作支援

操作步驟​

  1. 登入後在首頁

  2. 使用 Tab 鍵導航

    • 按 Tab → 焦點移至 Header 功能按鈕
    • ✅ 驗證: 焦點指示清晰（藍色邊框或背景色）
    • 按 Tab → 焦點依序移至下一個按鈕
    • ✅ 驗證: 焦點順序符合邏輯（從左到右）

  3. 開啟 Application Launcher

    • Tab 至九宮格按鈕
    • 按 Enter 鍵
    • ✅ 驗證: Application Launcher 開啟

  4. 在 Application Launcher 中導航

    • 使用 Tab 鍵在 Applet 之間移動
    • 按 Enter 選擇 Applet
    • ✅ 驗證: 導航至對應 Applet
    • 按 Escape 鍵
    • ✅ 驗證: Application Launcher 關閉

  5. AppletShell 工具列導航

    • 進入任一 Applet
    • Tab 至工具列按鈕
    • 按 Enter 鍵
    • ✅ 驗證: 內部導航正常

預期結果​

  • ✅ Tab 鍵導航順序正確
  • ✅ 焦點指示清晰
  • ✅ Enter 鍵可觸發操作
  • ✅ Escape 鍵可關閉 Application Launcher

✅ Scenario 10: 通知鈴鐺 UI（預留功能）​

目標: 驗證通知鈴鐺顯示

操作步驟​

  1. 查看 Header 右側
  2. ✅ 驗證: 看到通知鈴鐺圖示（Bell）
  3. ✅ 驗證: 按鈕處於禁用狀態（cursor-not-allowed）
  4. 嘗試點擊通知鈴鐺
  5. ✅ 驗證: 無任何反應（Phase 2 功能預留）

預期結果​

  • ✅ 通知鈴鐺 UI 已預留
  • ✅ 按鈕正確禁用

✅ Scenario 11: Application Launcher 完整功能測試​

目標: 驗證 Application Launcher 完整功能

操作步驟​

  1. 開啟 Application Launcher

    • 點擊 Header 右側的九宮格圖示（Grid3x3）
    • ✅ 驗證: 開啟 Application Launcher Modal
    • ✅ 驗證: 背景模糊效果（backdrop-blur）
    • ✅ 驗證: 顯示搜尋框和分類標籤

  2. 測試分類過濾

    • 點擊分類標籤（如「營運」、「管理」）
    • ✅ 驗證: Applet 列表根據分類過濾
    • 點擊「全部」標籤
    • ✅ 驗證: 顯示所有可用 Applet

  3. 測試搜尋功能

    • 在搜尋框輸入「訂單」
    • ✅ 驗證: 僅顯示名稱包含「訂單」的 Applet
    • 清空搜尋框
    • ✅ 驗證: 恢復顯示所有 Applet

  4. 關閉 Application Launcher

    • 點擊 Modal 背景
    • ✅ 驗證: Modal 正確關閉
    • 再次開啟，點擊右上角 X 按鈕
    • ✅ 驗證: Modal 正確關閉
    • 再次開啟，按 Escape 鍵
    • ✅ 驗證: Modal 正確關閉

預期結果​

  • ✅ Application Launcher 開啟與關閉正常
  • ✅ 分類過濾功能正常
  • ✅ 搜尋功能正常
  • ✅ 多種關閉方式都可用

✅ Scenario 12: 全螢幕切換功能​

目標: 驗證全螢幕切換

操作步驟​

  1. 點擊 Header 右側的全螢幕按鈕（Maximize 圖示）
  2. ✅ 驗證: 進入全螢幕模式
  3. ✅ 驗證: 按鈕圖示變為 Minimize
  4. 再次點擊全螢幕按鈕
  5. ✅ 驗證: 退出全螢幕模式
  6. ✅ 驗證: 按鈕圖示變回 Maximize

預期結果​

  • ✅ 全螢幕切換正常運作
  • ✅ 圖示正確顯示當前狀態

✅ Scenario 13: 主題切換功能（深色/淺色模式）​

目標: 驗證主題切換

操作步驟​

  1. 查看當前主題（淺色或深色）
  2. 點擊 Header 右側的主題切換按鈕
  3. ✅ 驗證: 主題立即切換（淺色 ↔ 深色）
  4. ✅ 驗證: 所有組件顏色正確套用新主題
  5. 刷新頁面（F5）
  6. ✅ 驗證: 主題狀態保持（localStorage 持久化）

預期結果​

  • ✅ 主題切換正常運作
  • ✅ 所有 DaisyUI 語義色彩正確套用
  • ✅ 主題狀態持久化

✅ Scenario 14: 語言切換功能（i18n）​

目標: 驗證語言切換

操作步驟​

  1. 查看當前語言（中文或英文）
  2. 點擊 Header 右側的語言切換按鈕（Globe 圖示）
  3. ✅ 驗證: 語言立即切換（中文 ↔ 英文）
  4. ✅ 驗證: Application Launcher 內的 Applet 名稱隨語言切換
  5. ✅ 驗證: 表單標籤、按鈕文字隨語言切換
  6. 刷新頁面（F5）
  7. ✅ 驗證: 語言狀態保持（localStorage 持久化）

預期結果​

  • ✅ 語言切換正常運作
  • ✅ 所有 UI 文字正確翻譯
  • ✅ 語言狀態持久化

測試檢查清單​

完成所有測試場景後，請勾選以下項目：

基本功能​

  • Scenario 1: 完整 Layout 結構顯示
  • Scenario 2: 用戶資訊與角色顯示
  • Scenario 3: 用戶選單下拉功能
  • Scenario 4: Application Launcher 根據角色過濾
  • Scenario 5: Application Launcher 導航功能
  • Scenario 6: AppletShell 工具列導航
  • Scenario 7: 手機版響應式佈局
  • Scenario 8: 響應式測試（平板）
  • Scenario 9: 鍵盤導航
  • Scenario 10: 通知鈴鐺 UI（禁用狀態）
  • Scenario 11: Application Launcher 完整功能
  • Scenario 12: 全螢幕切換功能
  • Scenario 13: 主題切換功能
  • Scenario 14: 語言切換功能

UI/UX​

  • Layout 佈局整齊無破版
  • DaisyUI 語義色彩正確應用
  • AppletShell 工具列按鈕高亮正確
  • Application Launcher 動畫流暢
  • 手機版 Application Launcher 適應顯示
  • 焦點指示清晰（鍵盤導航）

響應式設計​

  • 桌面（≥1024px）正常顯示
  • 平板（768px-1024px）正常顯示
  • 手機（<768px）正常顯示
  • 無橫向捲軸
  • 按鈕大小適合觸控

狀態持久化​

  • 主題狀態儲存至 localStorage
  • 語言狀態儲存至 localStorage
  • 刷新頁面後狀態保持

已知問題​

記錄測試過程中發現的問題：

測試結論​

  • 測試通過: ☐ 是 / ☐ 否
  • 備註: ___________________________________________________________
  • 測試人員簽名: ________________ 日期: ________________

最後更新: 2025-12-10