跳至主要内容

Scenario 1: 完整 Layout 結構與用戶資訊顯示

User Story: US-003: 基礎 Layout 與導航

Given: 系統初始狀態​

已登入店員​

{
  "userId": "user-001",
  "email": "staff@florist.com",
  "name": "王小明",
  "roles": ["ROLE_STAFF"],
  "tenantId": "tenant-abc",
  "tenantName": "花店 ABC"
}

When: 執行操作​

  1. 用戶成功登入
  2. 系統重定向至首頁 (/)

Then: 預期結果​

完整 Layout 結構顯示​

Header (64px 高度)​

左側:

  • 花店 Logo（40x40px）
  • 租戶名稱「花店 ABC」（文字顏色: text-base-content）

右側:

  • 通知鈴鐺圖示 🔔（24x24px）
    • 未讀數量 Badge（紅色圓點，顯示數字「3」）
  • 用戶頭像（40x40px 圓形 Avatar，顯示「王」字）
  • 用戶姓名「王小明」
  • 角色標籤「店員」（Badge 樣式，背景 bg-primary，文字 text-primary-content）
  • 下拉箭頭 ▼

樣式:

background: bg-base-100
border-bottom: 1px solid border-base-300
position: fixed
top: 0
left: 0
right: 0
z-index: 1000

選單項目（根據 ROLE_STAFF 角色顯示）:

✅ 首頁         [🏠]
✅ 訂單管理     [📦] ← 當前活動（高亮顯示）
✅ 客戶管理     [👥]
✅ 支付管理     [💰]
✅ 個人設定     [⚙️]

樣式:

  • 背景: bg-base-100
  • 邊框: 右側 1px 邊框 border-base-300
  • 活動項目: bg-primary text-primary-content
  • Hover 狀態: hover:bg-base-200

Main Content​

內容區域:

  • Padding: 24px
  • 最小高度: calc(100vh - 64px - 48px)（全屏高度 - Header - Footer）
  • 背景: bg-base-200

當前頁面:

  • 顯示訂單管理頁面
  • 麵包屑: 首頁 > 訂單管理（Phase 2）

內容:

  • 版權資訊: © 2025 AppFuse
  • 版本號: v1.0.0

樣式:

  • 背景: bg-base-200
  • 文字: text-base-content/60（60% 透明度）
  • 文字大小: text-sm

UI 驗證檢查清單​

Header 驗證​

  • Logo 顯示正確
  • 租戶名稱「花店 ABC」顯示正確
  • 通知鈴鐺有紅色 Badge「3」
  • 用戶頭像顯示「王」字
  • 用戶姓名「王小明」顯示正確
  • 角色標籤「店員」顯示正確（藍色 Badge）
  • 顯示 5 個選單項目（首頁、訂單、客戶、支付、個人設定）
  • 不顯示「系統設定」、「審計日誌」（需要更高權限）
  • 「訂單管理」項目高亮顯示（bg-primary）
  • 選單項目有正確的圖示

Main Content 驗證​

  • 內容區域有 24px padding
  • 背景顏色為 bg-base-200
  • 顯示訂單管理頁面內容
  • 顯示版權資訊與版本號
  • 固定在頁面底部

自動化測試範例​

Cypress E2E 測試​

describe('US-003 Scenario 1: Layout structure', () => {
  beforeEach(() => {
    cy.login('staff@florist.com', 'Password123!');
    cy.visit('/orders');
  });

  it('should display complete layout structure', () => {
    // Header 驗證
    cy.get('[data-testid="header"]').should('be.visible');
    cy.get('[data-testid="tenant-name"]').should('contain', '花店 ABC');
    cy.get('[data-testid="user-name"]').should('contain', '王小明');
    cy.get('[data-testid="user-role-badge"]').should('contain', '店員');
    cy.get('[data-testid="notification-badge"]').should('contain', '3');

    // Sidebar 驗證
    cy.get('[data-testid="sidebar"]').should('be.visible');
    cy.get('[data-testid="sidebar-menu-home"]').should('exist');
    cy.get('[data-testid="sidebar-menu-orders"]').should('have.class', 'active');
    cy.get('[data-testid="sidebar-menu-customers"]').should('exist');
    cy.get('[data-testid="sidebar-menu-settings"]').should('not.exist'); // 無權限

    // Main Content 驗證
    cy.get('[data-testid="main-content"]').should('be.visible');

    // Footer 驗證
    cy.get('[data-testid="footer"]').should('contain', '© 2025 AppFuse');
    cy.get('[data-testid="footer"]').should('contain', 'v1.0.0');
  });
});

最後更新: 2025-10-31