電商儀表板文檔

主題

CSS 變數統一化檢測報告 ​

專案概述 ​

目標 ​

將專案中所有硬編碼的顏色值統一轉換為使用 CSS 變數（CSS Custom Properties），實現主題系統的完整控制和一致性。

背景 ​

當前專案已建立完整的主題系統架構（useTheme.ts），但許多頁面和組件仍使用硬編碼顏色，導致主題切換時無法完全生效。

檢測策略和準則 ​

檢測目標 ​

  1. 硬編碼顏色值: #ffffff, rgb(), hsl(), oklch() 等直接顏色值
  2. Tailwind 固定顏色類別: bg-blue-500, text-red-600 等應該動態化的顏色
  3. 內嵌樣式: style="background-color: #xxx"
  4. JavaScript 中的顏色定義: 圖表配置、動態樣式等

轉換準則 ​

  1. 優先使用現有 CSS 變數: 檢查 useTheme.ts 中已定義的變數
  2. 擴展變數系統: 必要時新增適當的 CSS 變數定義
  3. 保持語義化: 使用語義化的變數名稱（如 --status-success 而非 --green）
  4. 向後相容: 確保轉換不破壞現有功能

優先級分級 ​

🔴 高優先級（立即處理） ​

  • 圖表組件：影響數據視覺化的一致性
  • 主要頁面：使用頻率高的核心頁面
  • 狀態指示器：影響用戶交互體驗的元素

🟡 中優先級（短期處理） ​

  • 表格組件：數據展示相關
  • 表單組件：用戶輸入界面
  • 導航組件：系統導航相關

🟢 低優先級（中期處理） ​

  • 輔助組件：載入、錯誤提示等
  • 特效組件：視覺增強元素
  • 測試/開發組件：非生產核心功能

🔍 詳細檢查清單 ​

圖表組件 (高優先級) ​

商業洞察類圖表 ​

  • [ ] components/charts/pure/BusinessHealthRadarChart.vue

    • 檢測項目: 雷達圖顏色配置, 圖例顏色
    • 預期發現: 硬編碼的 7 種顏色值 (#10b981, #3b82f6 等)
    • 轉換策略: 使用 chart-1 到 chart-7 變數

  • [ ] components/insights/health/HealthTrendChart.vue

    • 檢測項目: 趨勢線顏色, 背景顏色
    • 預期發現: 圖表背景和線條顏色
    • 轉換策略: 使用 chart-* 和 background 變數

  • [ ] components/insights/health/RiskDistributionChart.vue

    • 檢測項目: 風險等級顏色配置
    • 預期發現: 紅、橙、黃、綠風險等級色彩
    • 轉換策略: 新增 risk-* 變數系列

營運分析類圖表 ​

  • [ ] components/insights/operational/EfficiencyTrendChart.vue

    • 檢測項目: 效率曲線顏色, 閾值線顏色
    • 預期發現: 硬編碼的效率指標顏色
    • 轉換策略: 使用 success, warning, chart-* 變數

  • [ ] components/insights/operational/BottleneckChart.vue

    • 檢測項目: 瓶頸識別顏色, 流程節點顏色
    • 預期發現: 流程圖的節點和連線顏色
    • 轉換策略: 新增 process-* 變數系列

  • [ ] components/insights/operational/HourlyEfficiencyChart.vue

    • 檢測項目: 小時效率熱力圖顏色
    • 預期發現: 熱力圖漸變色配置
    • 轉換策略: 使用漸變相關 CSS 變數

風險管理類圖表 ​

  • [ ] components/insights/risk/RiskLevelChart.vue

    • 檢測項目: 風險等級指示顏色
    • 預期發現: 4-5 級風險顏色系統
    • 轉換策略: 統一 risk-* 變數系列

  • [ ] components/insights/risk/RiskComparisonChart.vue

    • 檢測項目: 比較圖顏色對比
    • 預期發現: 對比色彩配置
    • 轉換策略: 使用 primary/secondary 對比色

  • [ ] components/insights/risk/RiskTrendChart.vue

    • 檢測項目: 風險趋勢線顏色
    • 預期發現: 多條趨勢線的區分顏色
    • 轉換策略: 使用 chart-* 變數序列

客戶分析類圖表 ​

  • [ ] components/insights/customer/RFMDistributionChart.vue

    • 檢測項目: RFM 分群顏色
    • 預期發現: 客戶分群的 8-10 種顏色
    • 轉換策略: 擴展 chart-* 變數到 chart-10

  • [ ] components/insights/customer/LTVTrendChart.vue

    • 檢測項目: 客戶價值曲線顏色
    • 預期發現: 價值等級的顏色梯度
    • 轉換策略: 使用 success-warning-destructive 梯度

  • [ ] components/insights/customer/ActionPriorityChart.vue

    • 檢測項目: 行動優先級矩陣顏色
    • 預期發現: 優先級矩陣的象限顏色
    • 轉換策略: 新增 priority-* 變數系列

訂單分析類圖表 ​

  • [ ] components/order/charts/RevenueWeekScatter.vue
    • 檢測項目: 散點圖顏色配置
    • 預期發現: 營收散點和趨勢線顏色
    • 轉換策略: 使用 chart-1, chart-2 變數

客戶細節圖表 ​

  • [ ] components/customer/charts/LTVPurchaseTrendSparkle.vue
    • 檢測項目: 迷你圖表顏色
    • 預期發現: Sparkline 圖形顏色
    • 轉換策略: 使用 accent 或 chart-1 變數

主要頁面 (高優先級) ​

儀表板頁面 ​

  • [ ] views/DashboardOverview.vue

    • 檢測項目: 概覽卡片背景色, KPI 指標顏色
    • 預期發現: 儀表板卡片和統計指標顏色
    • 轉換策略: 使用 card, success, warning 等變數

  • [ ] views/DashboardCustomer.vue

    • 檢測項目: 客戶統計圖表顏色
    • 預期發現: 客戶相關圖表和指標顏色
    • 轉換策略: 統一使用客戶主題色彩

  • [ ] views/DashboardOrder.vue

    • 檢測項目: 訂單狀態顏色, 統計圖顏色
    • 預期發現: 訂單狀態徽章和圖表顏色
    • 轉換策略: 使用 status-* 變數系列

  • [ ] views/DashboardRevenue.vue

    • 檢測項目: 營收圖表顏色配置
    • 預期發現: 營收相關的圖表和指標顏色
    • 轉換策略: 使用 success, chart-* 變數

  • [ ] views/DashboardSupport.vue

    • 檢測項目: 支援統計顏色
    • 預期發現: 支援相關指標和狀態顏色
    • 轉換策略: 使用支援主題相關變數

深度洞察頁面 ​

  • [ ] views/DashboardExecutiveHealth.vue

    • 檢測項目: 經營健康度指標顏色
    • 預期發現: 健康度等級和警示顏色
    • 轉換策略: 使用健康度相關變數系統

  • [ ] views/DashboardCustomerValue.vue

    • 檢測項目: 客戶價值分析圖表顏色
    • 預期發現: 價值分析相關的複雜圖表顏色
    • 轉換策略: 統一客戶價值主題色彩

  • [ ] views/DashboardOperationalExcellence.vue

    • 檢測項目: 營運效率圖表顏色
    • 預期發現: 效率分析相關顏色配置
    • 轉換策略: 使用營運主題變數

  • [ ] views/DashboardRiskCenter.vue

    • 檢測項目: 風險中心警示顏色
    • 預期發現: 風險等級和警報顏色
    • 轉換策略: 統一風險管理色彩系統

分析專頁 ​

  • [ ] views/OrderAnalyticsView.vue

    • 檢測項目: 訂單分析圖表和統計顏色
    • 預期發現: 複合式分析圖表顏色
    • 轉換策略: 使用訂單主題變數

  • [ ] views/CampaignAnalyticsView.vue

    • 檢測項目: 活動分析圖表顏色
    • 預期發現: 活動效果分析相關顏色
    • 轉換策略: 使用活動主題變數

  • [ ] views/CustomerAnalyticsView.vue

    • 檢測項目: 客戶分析圖表顏色
    • 預期發現: 客戶行為分析顏色配置
    • 轉換策略: 統一客戶分析色彩

  • [ ] views/ProductAnalyticsView.vue

    • 檢測項目: 產品分析圖表顏色
    • 預期發現: 產品相關分析顏色
    • 轉換策略: 使用產品主題變數

  • [ ] views/SupportAnalyticsView.vue

    • 檢測項目: 支援分析圖表顏色
    • 預期發現: 支援績效分析顏色
    • 轉換策略: 使用支援主題變數

數據表格組件 (中優先級) ​

數據表格操作組件 ​

  • [ ] components/data-table-common/DataTablePagination.vue

    • 檢測項目: 分頁控制器顏色
    • 預期發現: 分頁按鈕和狀態顏色
    • 轉換策略: 使用 muted, accent 變數

  • [ ] components/data-table-common/DataTableViewOptions.vue

    • 檢測項目: 視圖選項顏色
    • 預期發現: 選項按鈕和下拉選單顏色
    • 轉換策略: 使用基礎 UI 變數

業務表格行動組件 ​

  • [ ] components/order/order-list/DataTableRowActions.vue

    • 檢測項目: 訂單操作按鈕顏色
    • 預期發現: 操作按鈕的狀態顏色
    • 轉換策略: 使用 primary, secondary 變數

  • [ ] components/product/category-list/DataTableHeaderActions.vue

    • 檢測項目: 產品分類操作顏色
    • 預期發現: 批次操作按鈕顏色
    • 轉換策略: 使用操作相關變數

  • [ ] components/product/category-list/DataTableRowActions.vue

    • 檢測項目: 分類行操作顏色
    • 預期發現: 編輯、刪除等操作顏色
    • 轉換策略: 使用 destructive, muted 變數

表單和輸入組件 (中優先級) ​

基礎表單組件 ​

  • [ ] components/ui/form/FormControl.vue

    • 檢測項目: 表單控制器樣式
    • 預期發現: 輸入框邊框和狀態顏色
    • 轉換策略: 使用 input, ring 變數

  • [ ] components/auth/LoginForm.vue

    • 檢測項目: 登入表單樣式
    • 預期發現: 表單元素和驗證狀態顏色
    • 轉換策略: 使用表單相關變數

  • [ ] components/auth/RegisterForm.vue

    • 檢測項目: 註冊表單樣式
    • 預期發現: 表單驗證和提示顏色
    • 轉換策略: 統一表單主題色彩

專業輸入組件 ​

  • [ ] components/notify/NotificationTypeSelect.vue

    • 檢測項目: 通知類型選擇器顏色
    • 預期發現: 選項和狀態顏色
    • 轉換策略: 使用選擇器主題變數

  • [ ] components/role/RoleSelector.vue

    • 檢測項目: 角色選擇器顏色
    • 預期發現: 角色徽章和選項顏色
    • 轉換策略: 使用角色相關變數

  • [ ] components/FileUploadInput.vue

    • 檢測項目: 文件上傳組件顏色
    • 預期發現: 上傳區域和狀態顏色
    • 轉換策略: 使用 accent, muted 變數

UI 基礎組件 (低優先級) ​

導航組件 ​

  • [ ] components/NavMain.vue

    • 檢測項目: 主導航顏色
    • 預期發現: 導航項目和狀態顏色
    • 轉換策略: 使用 sidebar-* 變數系列

  • [ ] components/ui/sidebar/SidebarMenuButton.vue

    • 檢測項目: 側邊欄按鈕顏色
    • 預期發現: 按鈕狀態和懸停顏色
    • 轉換策略: 使用 sidebar-accent 變數

彈出層組件 ​

  • [ ] components/ui/tooltip/Tooltip.vue

    • 檢測項目: 提示框樣式
    • 預期發現: 提示框背景和文字顏色
    • 轉換策略: 使用 popover 相關變數

  • [ ] components/ui/dialog/Dialog.vue

    • 檢測項目: 對話框樣式
    • 預期發現: 對話框背景和邊框顏色
    • 轉換策略: 使用 card, border 變數

選擇器組件 ​

  • [ ] components/ui/select/Select.vue

    • 檢測項目: 選擇器樣式
    • 預期發現: 選項和下拉樣式
    • 轉換策略: 使用基礎 UI 變數

  • [ ] components/ui/combobox/Combobox.vue

    • 檢測項目: 組合框樣式
    • 預期發現: 搜尋框和選項顏色
    • 轉換策略: 使用輸入相關變數

特殊視覺組件 (低優先級) ​

資訊展示組件 ​

  • [ ] components/InfoCard.vue

    • 檢測項目: 資訊卡片顏色
    • 預期發現: 卡片背景和邊框顏色
    • 轉換策略: 使用 card 變數系列

  • [ ] components/UserInfoCard.vue

    • 檢測項目: 用戶資訊卡顏色
    • 預期發現: 用戶相關顏色配置
    • 轉換策略: 使用用戶主題變數

  • [ ] components/ProductInfoCard.vue

    • 檢測項目: 產品資訊卡顏色
    • 預期發現: 產品相關顏色
    • 轉換策略: 使用產品主題變數

狀態指示組件 ​

  • [ ] components/common/Copyable.vue

    • 檢測項目: 複製提示顏色
    • 預期發現: 複製狀態指示顏色
    • 轉換策略: 使用 success, muted 變數

  • [ ] components/common/ReloadButton.vue

    • 檢測項目: 重新載入按鈕顏色
    • 預期發現: 按鈕狀態顏色
    • 轉換策略: 使用 accent 變數

📱 布局組件 (低優先級) ​

主要布局 ​

  • [ ] layouts/AuthLayout.vue

    • 檢測項目: 認證頁面布局顏色
    • 預期發現: 背景和容器顏色
    • 轉換策略: 使用 background, card 變數

  • [ ] layouts/MainLayout.vue (如存在)

    • 檢測項目: 主要布局顏色
    • 預期發現: 整體布局配色
    • 轉換策略: 使用布局相關變數

🧪 測試和開發組件 (低優先級) ​

開發輔助組件 ​

  • [ ] components/DevFloatingWidget.vue

    • 檢測項目: 開發工具顏色
    • 預期發現: 開發面板和控制項顏色
    • 轉換策略: 使用開發主題變數

  • [ ] components/ThemeTester.vue

    • 檢測項目: 主題測試器顏色
    • 預期發現: 測試組件展示顏色
    • 轉換策略: 確保使用變數展示效果

🔄 轉換指引和範例 ​

常見轉換模式 ​

1. 硬編碼顏色值轉換 ​

javascript
// ❌ 轉換前
backgroundColor: '#10b981'

// ✅ 轉換後  
backgroundColor: 'hsl(var(--chart-1))'

2. Tailwind 類別轉換 ​

vue
<!-- ❌ 轉換前 -->
<div class="bg-blue-500 text-white">

<!-- ✅ 轉換後 -->
<div class="bg-primary text-primary-foreground">

3. 內嵌樣式轉換 ​

vue
<!-- ❌ 轉換前 -->
<div style="background-color: #ffffff;">

<!-- ✅ 轉換後 -->
<div class="bg-background">
<!-- 或 -->
<div :style="{ backgroundColor: 'hsl(var(--background))' }">

4. 圖表配置轉換 ​

javascript
// ❌ 轉換前
const chartColors = ['#10b981', '#3b82f6', '#8b5cf6']

// ✅ 轉換後
const chartColors = [
  'hsl(var(--chart-1))',
  'hsl(var(--chart-2))', 
  'hsl(var(--chart-3))'
]

需要新增的 CSS 變數 ​

狀態相關變數 ​

css
:root {
  --status-success: 142 249 193;
  --status-success-foreground: 21 128 61;
  --status-warning: 253 224 71;
  --status-warning-foreground: 133 77 14;
  --status-danger: 248 113 113;
  --status-danger-foreground: 185 28 28;
  --status-info: 147 197 253;
  --status-info-foreground: 30 64 175;
}

擴展圖表變數 ​

css
:root {
  --chart-6: 236 72 153;
  --chart-7: 168 85 247;
  --chart-8: 34 197 94;
  --chart-9: 251 146 60;
  --chart-10: 239 68 68;
}

📈 進度追蹤表 ​

整體進度統計 ​

  • 總檢查項目: 80+ 個組件/頁面
  • 高優先級: 35 項 (43%)
  • 中優先級: 25 項 (31%)
  • 低優先級: 20+ 項 (26%)

分類完成統計 ​

  • [ ] 圖表組件: 0/13 (0%)
  • [ ] 主要頁面: 0/12 (0%)
  • [ ] 數據表格: 0/7 (0%)
  • [ ] 表單輸入: 0/6 (0%)
  • [ ] UI 基礎: 0/8 (0%)
  • [ ] 布局組件: 0/2 (0%)
  • [ ] 其他組件: 0/10+ (0%)

每週目標 ​

  • 第1週: 完成所有高優先級圖表組件 (13項)
  • 第2週: 完成主要頁面和數據表格 (19項)
  • 第3週: 完成表單和UI基礎組件 (14項)
  • 第4週: 完成剩餘組件並優化整體效果

檢查記錄範本 ​

單個組件檢查記錄 ​

markdown
## [組件名稱] 檢查記錄

**檢查日期**: YYYY-MM-DD
**檢查人員**: [姓名]
**優先級**: 高/中/低

### 發現的問題
1. 硬編碼顏色: `#10b981` (第XX行)
2. 固定 Tailwind 類別: `bg-blue-500` (第XX行)
3. 內嵌樣式: `style="color: red"` (第XX行)

### 修改方案
1. 將 `#10b981` 改為 `hsl(var(--chart-1))`
2. 將 `bg-blue-500` 改為 `bg-primary`
3. 將內嵌樣式改為 CSS 類別

### 修改結果
- [x] 所有硬編碼顏色已轉換為 CSS 變數
- [x] 主題切換功能正常
- [x] 視覺效果保持一致

**完成狀態**: ✅ 已完成 / 🔄 進行中 / ❌ 未開始

工具和腳本 ​

檢測輔助腳本 (建議) ​

bash
# 搜尋硬編碼顏色值
grep -r "#[0-9a-fA-F]\{6\}" src/
grep -r "rgb(" src/
grep -r "hsl(" src/

# 搜尋 Tailwind 顏色類別
grep -r "bg-\(red\|blue\|green\|yellow\|purple\|pink\|indigo\)-[0-9]" src/
grep -r "text-\(red\|blue\|green\|yellow\|purple\|pink\|indigo\)-[0-9]" src/

驗證腳本 (建議) ​

檢查轉換後是否正確使用 CSS 變數：

bash
# 確認 CSS 變數使用
grep -r "var(--" src/ | wc -l

# 檢查剩餘的硬編碼顏色
grep -r "#[0-9a-fA-F]\{6\}" src/ | grep -v "\.scss" | wc -l

注意事項 ​

轉換時需特別注意 ​

  1. 圖表庫兼容性: 確保圖表庫支援 CSS 變數格式
  2. 動畫效果: 轉換後確認 CSS 動畫仍正常運作
  3. 第三方組件: 某些第三方組件可能無法使用 CSS 變數
  4. 瀏覽器兼容性: 確保目標瀏覽器支援 CSS 變數

測試檢查清單 ​

  • [ ] 主題切換功能正常
  • [ ] 所有顏色在不同主題下正確顯示
  • [ ] 動畫和過渡效果正常
  • [ ] 響應式設計不受影響
  • [ ] 列印樣式（如需要）正常

完成標準 ​

單個組件完成標準 ​

  1. 無任何硬編碼顏色值 (#ffffff, rgb(), hsl())
  2. 無固定的 Tailwind 顏色類別 (bg-blue-500 等)
  3. 所有顏色均使用 CSS 變數或語義化 Tailwind 類別
  4. 主題切換時視覺效果正確
  5. 功能完全正常，無破壞性變更

整體專案完成標準 ​

  1. 所有組件通過單個完成標準
  2. 主題系統覆蓋率 95%+
  3. 無硬編碼顏色殘留
  4. 所有主題切換流暢自然
  5. 完整的測試覆蓋

建立日期: 2025-08-29
版本: 1.0.0
負責人: [開發團隊]