Dashboard 頁面優化計劃

概述

本文件記錄對電商管理平台 14 個儀表板頁面的全面分析結果與優化計劃，確保後續修改能遵循既定方向，不因時間久遠而偏離原始目標。

🔍 現況分析結果

頁面結構概覽 (共 14 頁)

Dashboard 系列 (5 頁) - 日常營運監控

DashboardOverview.vue (/dashboard) - 營運總覽
DashboardCustomer.vue (/dashboard/customer) - 客戶總覽
DashboardOrder.vue (/dashboard/order) - 訂單總覽
DashboardRevenue.vue (/dashboard/revenue) - 營收總覽
DashboardSupport.vue (/dashboard/support) - 客服總覽

Insights 系列 (4 頁) - 高階戰略分析

DashboardExecutiveHealth.vue (/insights/executive-health) - 經營健康度
DashboardCustomerValue.vue (/insights/customer-value) - 客戶價值最大化
DashboardOperationalExcellence.vue (/insights/operational-excellence) - 營運效率提升
DashboardRiskCenter.vue (/insights/risk-center) - 風險預警中心

Analytics 系列 (5 頁) - 專業深度分析

CampaignAnalyticsView.vue (/campaigns/analytics) - 活動分析 ✅ 已完成
OrderAnalyticsView.vue (/orders/analytics) - 訂單分析 ✅ 已完成
CustomerAnalyticsView.vue (/customers/analytics) - 客戶分析 ⚠️ 混合狀態
ProductAnalyticsView.vue (/products/analytics) - 產品分析 ✅ 基本完成
SupportAnalyticsView.vue (/support/analytics) - 客服分析 ✅ 已完成

主要技術債務問題

1. Mock 數據氾濫 (DashboardOverview.vue)

typescript

// 發現的假數據項目
const totalRevenue = ref('¥2,456,789')          // 硬編碼總營收
const totalOrders = ref('1,234')                // 硬編碼訂單量
const activeCustomers = ref('5,678')            // 硬編碼活躍客戶
const customerSatisfaction = ref('4.8')         // 硬編碼滿意度
const revenueGrowth = ref('+12.5%')             // 硬編碼成長率
const healthMetrics = ref({                     // 硬編碼健康度評分
  revenue: 8.5,
  satisfaction: 9.2,
  fulfillment: 7.8,
  // ... 更多假數據
})
const topProducts = ref([                       // 硬編碼產品排行
  { name: 'iPhone 15 Pro', sales: '¥489,000' },
  // ... 更多假數據
])

2. 架構不一致問題

已現代化: CampaignAnalyticsView, OrderAnalyticsView, SupportAnalyticsView (使用 Vue Query + TypeScript)
需升級: DashboardOverview.vue (使用傳統 ref + mock 數據)
混合狀態: CustomerAnalyticsView.vue (部分真實 API，部分假數據)

3. 重疊功能識別

重疊類型	涉及頁面	重疊內容	建議處理
高度重疊	DashboardCustomer + DashboardCustomerValue + CustomerAnalyticsView	客戶 RFM 分析、價值分析、行為分析	整合為客戶洞察中心
中度重疊	DashboardOrder + OrderAnalyticsView	訂單概覽 vs 深度分析	頁籤式導航整合
功能分散	DashboardOverview + DashboardRevenue	總營收 vs 營收細節	鑽取式導航連結

用戶角色與使用情境分析

目標用戶群體定義

營運人員 (Dashboard 系列主要用戶)
- 需求：即時監控、快速決策
- 使用頻率：每日多次
- 關注指標：KPI 達成狀況、異常警報
中高層管理者 (Insights 系列主要用戶)
- 需求：趨勢分析、策略規劃
- 使用頻率：週/月報會議
- 關注指標：成長趨勢、風險預警
數據分析師 (Analytics 系列主要用戶)
- 需求：深度分析、專案調查
- 使用頻率：專案導向
- 關注指標：細顆粒度數據、關聯分析

使用情境對應

晨間例會: Dashboard 系列快速概覽
週報準備: Insights 系列趨勢分析
問題調查: Analytics 系列深度挖掘
策略會議: 跨系列綜合分析

三階段執行計劃

第一階段：技術債務清理 (Week 1-2)

1.1 DashboardOverview.vue 數據真實化

優先級: 🔥 最高

執行步驟:

檢查 Supabase migrations 確認對應資料表結構
建立真實 API 端點 (參考已完成的 analytics 頁面模式)
替換假數據為 Vue Query 調用
實現真實的業務健康度計算邏輯
建立錯誤處理與載入狀態

API 端點需求:

typescript

// 需要建立的 API 服務
- useRevenueOverview() // 總營收與成長率
- useOrderOverview()   // 訂單量與轉換率  
- useCustomerOverview() // 活躍客戶與留存率
- useSupportOverview() // 客服滿意度與回應時間
- useBusinessHealth()  // 業務健康度計算
- useTopProducts()     // 熱銷產品排行
- useSystemAlerts()    // 系統警報與通知
- useConversionFunnel() // 轉換漏斗數據

1.2 CustomerAnalyticsView.vue 混合狀態修復

優先級: 🔥 高

問題: 部分使用真實 API，部分仍為假數據解決: 統一為 Vue Query + TypeScript 架構

1.3 統一數據獲取模式

目標: 所有頁面採用一致的 Vue Query + TypeScript 模式 參考標準: CampaignAnalyticsView.vue 的實現方式

第二階段：架構重組 (Week 3-4)

選項A：三層架構優化 (推薦)

Executive Layer (Insights)    → 戰略決策導向
├── DashboardExecutiveHealth.vue
├── DashboardCustomerValue.vue  
├── DashboardOperationalExcellence.vue
└── DashboardRiskCenter.vue

Management Layer (Dashboard)  → 營運監控導向
├── DashboardOverview.vue (整合入口)
├── DashboardCustomer.vue → 可整合至 CustomerHub
├── DashboardOrder.vue → 可整合至 OrderAnalyticsView
├── DashboardRevenue.vue → 可整合至 DashboardOverview
└── DashboardSupport.vue

Analyst Layer (Analytics)    → 深度分析導向
├── CampaignAnalyticsView.vue ✅
├── OrderAnalyticsView.vue ✅  
├── CustomerAnalyticsView.vue (需整合客戶相關頁面)
├── ProductAnalyticsView.vue ✅
└── SupportAnalyticsView.vue ✅

選項B：主題導向整合

Customer Hub (客戶洞察中心)
├── 整合 DashboardCustomer + DashboardCustomerValue + CustomerAnalyticsView
├── 統一篩選器與時間範圍選擇
└── 多層次分析：概覽 → 價值 → 行為 → 預測

Revenue Center (營收管控中心)  
├── 整合 DashboardOverview.revenue + DashboardRevenue
├── 鑽取式導航：總覽 → 細節 → 趨勢
└── 異常檢測與預警功能

Operations Control (營運監控中心)
├── 整合日常營運監控需求
├── 即時監控 + 系統警報 + 健康度評估
└── 行動化友善的快速決策介面

2.1 重組執行優先順序

Customer Hub 整合 (影響最大，技術複雜度中等)
Revenue Center 整合 (商業價值高，技術複雜度低)
Operations Control 優化 (用戶體驗改善，技術複雜度中等)

第三階段：用戶體驗提升 (Week 5-6)

3.1 智能導航系統

功能特色:

角色基礎的頁面推薦
上下文感知的快速跳轉
麵包屑導航與返回路徑記憶

技術實現:

typescript

// 智能導航組合式函數
const useSmartNavigation = () => {
  const userRole = computed(() => auth.user?.role)
  const currentContext = computed(() => route.meta.context)
  
  const getRecommendedPages = () => {
    // 基於角色和使用歷史推薦相關頁面
  }
  
  const getQuickActions = () => {
    // 基於當前頁面提供快速操作
  }
}

3.2 統一篩選器系統

目標: 跨頁面的篩選狀態保持與同步實現: Pinia store + URL 狀態同步

3.3 個人化儀表板

功能:

用戶可自定義的 widget 佈局
基於使用習慣的內容推薦
跨裝置的個人化設定同步

量化改進目標

改進領域	現況基線	目標狀態	量化指標
數據真實性	~50% 假數據	100% 真實數據	假數據項目清零
頁面數量	14 個分散頁面	8-10 個優化頁面	30%+ 數量精簡
載入效能	多重 API 調用	統一快取策略	30%+ 載入速度提升
用戶滿意度	分散式體驗	統一導航流程	用戶路徑減少 40%
開發維護	不一致架構	標準化模式	代碼重複減少 50%

技術實現指引

API 開發標準

參考模式: 已完成的 CampaignAnalyticsView.vue

typescript

// 標準 composable 結構
export const useDashboardOverview = (filters: MaybeRefOrGetter<FilterOptions>) => {
  return useQuery({
    queryKey: computed(() => ['dashboard-overview', toValue(filters)]),
    queryFn: () => dashboardService.getOverview(toValue(filters)),
    staleTime: 5 * 60 * 1000, // 5分鐘快取
  })
}

數據庫查詢優化

基於 Supabase migrations 的資料表結構:

確保查詢使用適當的 view 和 function
利用現有的分析 view (如 order_analysis_view)
避免重複的複雜 JOIN 操作

組件架構標準

typescript

// 統一的圖表組件結構
interface ChartComponentProps {
  data: ComputedRef<ChartData>
  loading: ComputedRef<boolean>
  error: ComputedRef<Error | null>
  filters: MaybeRefOrGetter<FilterOptions>
}

執行檢查清單

第一階段檢查項目

[ ] 檢查 Supabase 資料表結構與 migrations 一致性
[ ] 建立 DashboardOverview API 端點
[ ] 移除所有硬編碼假數據
[ ] 實現統一的錯誤處理機制
[ ] 測試數據載入效能

第二階段檢查項目

[ ] 完成客戶相關頁面整合分析
[ ] 實現統一篩選器 store
[ ] 建立頁面間導航邏輯
[ ] 測試跨頁面狀態同步

第三階段檢查項目

[ ] 實現角色基礎導航推薦
[ ] 建立個人化設定機制
[ ] 優化行動端體驗
[ ] 完成用戶接受測試

🚨 風險評估與緩解

高風險項目

DashboardOverview.vue 大幅重構
- 風險：影響核心功能穩定性
- 緩解：分階段替換，保留回滾機制
客戶頁面整合複雜度
- 風險：整合過程中功能丟失
- 緩解：建立功能對照表，逐一驗證

中風險項目

API 效能影響
- 風險：真實數據查詢可能較慢
- 緩解：實現快取策略，分頁載入
用戶習慣改變
- 風險：重組後用戶需適應新介面
- 緩解：提供導覽教學，保留關鍵入口

時程規劃

Week 1: DashboardOverview.vue 數據真實化
Week 2: CustomerAnalyticsView.vue 混合狀態修復  
Week 3: 客戶頁面整合設計與實現
Week 4: 營收中心整合與導航優化
Week 5: 智能導航系統實現
Week 6: 個人化功能與用戶測試

成功衡量標準

技術指標

假數據清理完成率：100%
API 響應時間：< 500ms (95th percentile)
頁面載入速度提升：> 30%
代碼覆蓋率：> 85%

業務指標

用戶操作路徑減少：> 40%
頁面跳出率降低：> 25%
用戶滿意度評分：> 4.5/5.0
系統使用頻率提升：> 20%

文件建立日期: 2025-07-28 最後更新: 2025-07-28 負責人: 開發團隊 審核狀態: 待審核

本文件將隨執行進度持續更新，確保優化方向與實際執行保持一致

Agent 管理

類別

假日管理

類別

客戶分析

類別

客戶分群

Interfaces

類別

客服分析

類別

活動評分

Interfaces

類別

產品分析

類別

群組通知

類別

訂單分析

類別

通知 API

類別

系統架構

Dashboard 頁面優化計劃 ​

概述 ​

🔍 現況分析結果 ​

頁面結構概覽 (共 14 頁) ​

Dashboard 系列 (5 頁) - 日常營運監控 ​

Insights 系列 (4 頁) - 高階戰略分析 ​

Analytics 系列 (5 頁) - 專業深度分析 ​

主要技術債務問題 ​

1. Mock 數據氾濫 (DashboardOverview.vue) ​

2. 架構不一致問題 ​

3. 重疊功能識別 ​

用戶角色與使用情境分析 ​

目標用戶群體定義 ​

使用情境對應 ​

三階段執行計劃 ​

第一階段：技術債務清理 (Week 1-2) ​

1.1 DashboardOverview.vue 數據真實化 ​

1.2 CustomerAnalyticsView.vue 混合狀態修復 ​

1.3 統一數據獲取模式 ​

第二階段：架構重組 (Week 3-4) ​

選項A：三層架構優化 (推薦) ​

選項B：主題導向整合 ​

2.1 重組執行優先順序 ​

第三階段：用戶體驗提升 (Week 5-6) ​

3.1 智能導航系統 ​

3.2 統一篩選器系統 ​

3.3 個人化儀表板 ​

量化改進目標 ​

技術實現指引 ​

API 開發標準 ​

數據庫查詢優化 ​

組件架構標準 ​

執行檢查清單 ​

第一階段檢查項目 ​

第二階段檢查項目 ​

第三階段檢查項目 ​

🚨 風險評估與緩解 ​

高風險項目 ​

中風險項目 ​

時程規劃 ​

成功衡量標準 ​

技術指標 ​

業務指標 ​

Dashboard 頁面優化計劃

概述

🔍 現況分析結果

頁面結構概覽 (共 14 頁)

Dashboard 系列 (5 頁) - 日常營運監控

Insights 系列 (4 頁) - 高階戰略分析

Analytics 系列 (5 頁) - 專業深度分析

主要技術債務問題

1. Mock 數據氾濫 (DashboardOverview.vue)

2. 架構不一致問題

3. 重疊功能識別

用戶角色與使用情境分析

目標用戶群體定義

使用情境對應

三階段執行計劃

第一階段：技術債務清理 (Week 1-2)

1.1 DashboardOverview.vue 數據真實化

1.2 CustomerAnalyticsView.vue 混合狀態修復

1.3 統一數據獲取模式

第二階段：架構重組 (Week 3-4)

選項A：三層架構優化 (推薦)

選項B：主題導向整合

2.1 重組執行優先順序

第三階段：用戶體驗提升 (Week 5-6)

3.1 智能導航系統

3.2 統一篩選器系統

3.3 個人化儀表板

量化改進目標

技術實現指引

API 開發標準

數據庫查詢優化

組件架構標準

執行檢查清單

第一階段檢查項目

第二階段檢查項目

第三階段檢查項目

🚨 風險評估與緩解

高風險項目

中風險項目

時程規劃

成功衡量標準

技術指標

業務指標