電商儀表板文檔

主題

Campaign 系統架構設計 ​

系統概述 ​

Campaign 管理系統是專為電商平台設計的完整行銷活動管理解決方案，支援活動創建、管理、效果追蹤與歸因分析。

架構設計 ​

核心組件結構 ​

src/components/campaign/
├── CampaignList.vue                    # 活動列表主組件
└── campaign-list/                      # 活動列表專用組件
    ├── DataTableHeaderActions.vue     # 表格頂部操作
    ├── DataTableRowActions.vue        # 行操作選單
    ├── columns.ts                      # 表格欄位定義
    ├── data.ts                        # 資料處理邏輯
    └── field-config.ts                # 表單欄位配置

API 服務層 ​

src/api/services/
├── CampaignApiService.ts              # Campaign API 服務
└── base/BaseApiService.ts             # 基礎 API 服務類

狀態管理 ​

src/composables/
├── useCampaign.ts                     # Campaign 狀態管理
└── data-table-actions/
    └── useCampaignActions.ts          # Campaign 表格操作

頁面組件 ​

src/views/
└── CampaignView.vue                   # Campaign 管理主頁面

功能特性 ​

核心功能 ​

  • 活動管理: 創建、編輯、啟用/停用行銷活動
  • 活動列表: 支援篩選、排序、搜尋的活動管理介面
  • 批量操作: 支援批量啟用、停用、刪除操作
  • 狀態管理: 活動狀態的完整生命週期管理

資料表格功能 ​

  • 動態篩選: 按狀態、日期、類型等條件篩選
  • 排序功能: 支援多欄位排序
  • 分頁處理: 大數據量的高效分頁顯示
  • 行級操作: 編輯、查看、刪除等單行操作

資料結構 ​

Campaign 實體 ​

typescript
interface Campaign {
  id: string
  name: string                    # 活動名稱
  description?: string            # 活動描述
  status: CampaignStatus         # 活動狀態
  start_date: Date               # 開始日期
  end_date: Date                 # 結束日期
  budget?: number                # 預算金額
  target_audience?: string       # 目標受眾
  created_at: Date               # 創建時間
  updated_at: Date               # 更新時間
}

enum CampaignStatus {
  DRAFT = 'draft',               # 草稿
  ACTIVE = 'active',             # 進行中
  PAUSED = 'paused',             # 暫停
  COMPLETED = 'completed',       # 已完成
  CANCELLED = 'cancelled'        # 已取消
}

API 端點 ​

RESTful API ​

typescript
// 基礎 CRUD 操作
GET    /api/campaigns              # 獲取活動列表
POST   /api/campaigns              # 創建新活動
GET    /api/campaigns/:id          # 獲取單個活動
PUT    /api/campaigns/:id          # 更新活動
DELETE /api/campaigns/:id          # 刪除活動

// 批量操作
POST   /api/campaigns/batch        # 批量操作
PUT    /api/campaigns/bulk-status  # 批量狀態更新

// 統計與分析
GET    /api/campaigns/stats        # 活動統計
GET    /api/campaigns/:id/metrics  # 活動效果指標

用戶介面 ​

列表視圖 ​

  • 活動基本信息展示（名稱、狀態、時間、預算）
  • 實時狀態指示器
  • 批量選擇與操作工具欄
  • 搜索與篩選組件

表單視圖 ​

  • 活動基本信息編輯
  • 日期範圍選擇器
  • 狀態切換控制
  • 表單驗證與錯誤提示

效能與優化 ​

數據加載策略 ​

  • 分頁加載減少初始載入時間
  • 虛擬滾動處理大量數據
  • 智能預載下一頁數據

緩存策略 ​

  • 列表數據本地緩存
  • 狀態更新即時同步
  • 失效策略與數據一致性

🧪 測試策略 ​

單元測試 ​

  • 組件行為測試
  • API 服務測試
  • 狀態管理測試

整合測試 ​

  • 用戶操作流程測試
  • API 整合測試
  • 端到端場景測試

🔮 未來規劃 ​

Phase 2 增強功能 ​

  • 活動模板系統
  • A/B 測試支援
  • 自動化規則引擎

Phase 3 進階分析 ​

  • 機器學習預測
  • 客製化報表
  • 即時推薦系統