電商儀表板文檔

主題

電商管理平台 - 資訊架構檢視與優化建議 ​

文檔目的: 系統性檢視四大核心模組的資訊架構，識別不一致、不合理的設計，提供具體優化建議

檢視範圍: Product、Inventory、Order、Customer 模組的列表頁面、詳情頁面

檢視日期: 2025-09-05

執行摘要 ​

整體評估 ​

  • 資訊完整度: 85% - 基礎資訊完整，部分商業邏輯需釐清
  • 展示一致性: 78% - 格式化函數統一，但處理邏輯有差異
  • 模組平衡性: 72% - 產品模組資訊密度高，客戶模組相對簡化
  • 商業價值: 80% - 核心功能完整，但資訊利用效率可提升

🚨 關鍵問題 ​

  1. 資訊密度不均: 產品模組過詳細，客戶模組過簡化
  2. 商業邏輯斷層: 付款資訊、RFM 分析未充分整合
  3. 功能重複: ProductsList vs ProductStockList 定位不清
  4. 一致性問題: 空值處理、ID 顯示長度不統一

🔍 各模組現有資訊架構檢視 ​

1️⃣ 產品模組 (Product Module) ​

ProductsView - ProductsList 表格分析 ​

現有欄位配置:

typescript
columns: [select, id, sku, name, price, categoryId, createdAt, totalStock, actions]

✅ 設計優秀的部分:

  • 庫存狀態視覺化: 使用 getStockLevel() 提供圖示+文字的直觀顯示
  • 價格格式化: 統一使用 formatCurrency() 保持一致性
  • 分類顯示: 圖示+標籤+實際名稱的三層資訊展示

⚠️ 需要優化的問題:

  1. ID 欄位顯示過長

    typescript
    // 現況: 顯示完整 UUID
cell: ({ row }) => textCopyable(row.getValue('id'), 'font-mono', 6)

// 問題: 完整 UUID 對使用者價值低，但佔用大量空間
// 建議: 統一顯示前8碼，hover 或點擊顯示完整 ID

  2. 分類資訊冗餘

    typescript
    // 現況: 同時顯示分類 ID 圖示和分類名稱
return h('div', { class: 'flex items-center gap-2' }, [
  category.icon,  // 圖示
  h('span', {}, category.label),  // 標籤名稱  
  h('span', { class: 'text-muted-foreground' }, categoryName), // 實際名稱
])

// 問題: 三種資訊可能造成視覺混亂
// 建議: 簡化為 圖示+實際名稱，hover 顯示標籤

  3. 建立時間價值疑問

    typescript
    // 現況: createdAt 佔用一整欄
// 問題: 日常產品管理中，建立時間的查看頻率相對較低
// 建議: 考慮移至 hover tooltip 或詳情頁面

ProductDetailView 分析 ​

現有資訊區塊:

typescript
區塊配置: [ProductInfoCard(col-6), PriceInfo(col-3), StockInfo(col-3), InventoryList(full-width)]

⚠️ 商業邏輯問題:

  1. 價格計算邏輯

    typescript
    // 現況: 
value: product.value?.price ? product.value?.price * 1.2 : 0 // 原價
value: product.value?.price ?? 0 // 售價

// 問題: 1.2 倍數的商業邏輯不清楚，硬編碼不佳
// 建議: 從資料庫讀取原價，或設定為可配置參數

  2. 庫存預設值問題

    typescript
    // 現況:
value: product.value?.stockWarningThreshold || 10 // 預設值 10

// 問題: 所有產品統一預設值不合理，應該根據產品類型設定
// 建議: 資料庫層面設定合理預設值，或根據產品分類動態計算

2️⃣ 訂單模組 (Order Module) ​

OrdersView - OrderList 表格分析 ​

現有欄位配置:

typescript
columns: [select, id, orderNumber, status, totalAmount, createdAt, actions]

✅ 設計優秀的部分:

  • 訂單狀態視覺化: 圖示+文字的清晰狀態展示
  • 時間顯示: 絕對時間+相對時間的雙重展示
  • 金額格式: 右對齊+等寬字體的專業展示

⚠️ 資訊缺漏問題:

  1. 客戶資訊缺失

    typescript
    // 現況: 訂單列表看不到客戶資訊
// 問題: 無法快速識別訂單所屬客戶，影響客服效率
// 建議: 新增客戶名稱欄位，或在 hover 時顯示客戶基本資訊

  2. 付款資訊不足

    typescript
    // 現況: 只顯示訂單狀態，未顯示付款狀態
// 問題: 訂單狀態和付款狀態是兩個維度，應該分別展示
// 建議: 新增付款方式和付款狀態的視覺化展示

OrderDetailView 分析 ​

現有資訊區塊:

typescript
區塊配置: [UserInfoCard, ShippingInfo, PaymentInfo, ItemList]

⚠️ 資料一致性問題:

  1. 付款資訊空值
    typescript
    // 現況: PaymentInfo 中多數欄位顯示 'N/A'
{
  label: 'Payment Method', value: order.value.paymentMethod || 'N/A',
  label: 'Paid At', value: order.value.paidAt || 'N/A',
  label: 'Payment Status', value: order.value.paymentStatus || 'N/A',
}

// 問題: 系統設計上應該有這些資料，但實際顯示為空
// 建議: 檢查資料流，確保付款資訊正確同步和顯示

3️⃣ 客戶模組 (Customer Module) ​

CustomersView - CustomersList 表格分析 ​

現有欄位配置:

typescript
columns: [select, id, fullName, email, createdAt, actions]

⚠️ 資訊價值不足:

  1. 商業指標缺失

    typescript
    // 現況: 僅顯示基礎身份資訊
// 問題: CustomersView 有豐富的 RFM Overview，但列表中看不到對應資訊

// Overview 顯示:
- 活躍客戶數、平均終身價值、流失風險客戶

// 但列表只有:
- ID, 姓名, Email, 註冊時間

// 建議: 在列表中展示關鍵商業指標，如客戶分群、最後消費時間等

  2. Overview 與列表脫節

    typescript
    // 問題: Overview 統計資訊與具體客戶資料無法對應
// 無法從列表中識別哪些是"活躍客戶"或"流失風險客戶"
// 建議: 列表增加視覺化標籤來對應 Overview 的統計分類

CustomerDetailView 分析 ​

現有資訊區塊:

typescript
區塊配置: [UserInfoCard(col-span-2), UserOrderList]

⚠️ 空間利用不佳:

  1. 資訊密度低

    typescript
    // 現況: UserInfoCard 佔 2 欄但資訊量少
// 問題: 大量空間只顯示基礎用戶資訊
// 建議: 增加 RFM 分析卡片、消費統計卡片等

  2. 註釋區塊問題

    vue
    <!-- 現況: 大段程式碼被註釋
<InfoCard :infos="shipping" :loading="loading" :gridClass="'grid-cols-1'">
<InfoCard :infos="payment" :loading="loading">

// 問題: 原設計可能包含更多資訊展示，但未完成實作
// 建議: 釐清設計意圖，完善客戶詳情資訊展示

4️⃣ 庫存模組 (Inventory - ProductStockList) ​

ProductStockList 表格分析 ​

現有欄位配置:

typescript
// 基於 ProductWithStock 類型
columns: [productId, name, sku, stockThreshold, reservedQuantity, 
          freeStock, totalStock, stockStatus, actions]

⚠️ 功能重複問題:

  1. 與 ProductsList 重疊

    typescript
    // ProductsList 欄位: [id, sku, name, price, categoryId, createdAt, totalStock]
// ProductStockList 欄位: [productId, name, sku, stockThreshold, reservedQuantity, freeStock, totalStock, stockStatus]

// 重疊欄位: id/productId, name, sku, totalStock
// 問題: 兩個列表功能重疊度高，使用情境不清楚
// 建議: 釐清兩者定位，或考慮合併為一個功能更完整的列表

  2. 欄位詳細度差異

    typescript
    // ProductStockList 提供詳細庫存資訊:
- stockThreshold, reservedQuantity, freeStock, totalStock

// 但 ProductsList 只有:
- totalStock (簡化顯示)

// 問題: 使用者需要在兩個頁面間切換才能獲得完整資訊
// 建議: 統一資訊詳細度，或提供可切換的檢視模式

跨模組一致性檢視 ​

✅ 統一性良好的設計 ​

  1. 格式化函數統一

    typescript
    // 所有模組統一使用:
- formatCurrency() // 金額格式化
- formatDate() // 時間格式化  
- textCopyable() // ID 可複製顯示
- formatDataTableEmptyValue() // 空值處理

  2. 表格操作一致

    typescript
    // 所有列表統一提供:
- 勾選功能 (DataTableRowCheckbox)
- 批量操作 (DataTableHeaderActions)  
- 單行操作 (DataTableRowActions)
- 分頁和搜尋功能

  3. 載入狀態處理

    typescript
    // 統一的載入狀態管理:
- loading ref 變數
- :loading="loading" 屬性傳遞
- 骨架屏或載入指示器

不一致的問題 ​

  1. ID 顯示長度不統一

    typescript
    // 產品模組:
textCopyable(row.getValue('id'), 'font-mono', 6) // 顯示前 6 碼

// 訂單模組:  
textCopyable(id, 'font-mono', 8) // 顯示前 8 碼

// 客戶模組:
textCopyable(id, 'font-mono', 6) // 顯示前 6 碼

// 問題: 不同模組的 ID 顯示長度不一致
// 建議: 統一為 8 碼，或根據 UUID 的實際可讀性需求設定標準

  2. 空值處理方式不統一

    typescript
    // 方式一: 使用統一函數
formatDataTableEmptyValue(row.getValue('name'))

// 方式二: 直接使用預設值
order.value.paymentMethod || 'N/A'

// 方式三: 三元運算子
orderNumber ? textCopyable(orderNumber, 'font-mono') : 
  h('span', { class: 'font-mono' }, formatDataTableEmptyValue(orderNumber))

// 問題: 同樣的空值處理有三種不同寫法
// 建議: 統一使用 formatDataTableEmptyValue() 函數

  3. 時間顯示詳細度差異

    typescript
    // 訂單模組: 顯示絕對時間+相對時間
h('div', { class: 'flex flex-col' }, [
  h('span', { class: 'text-sm' }, fullDate),
  h('span', { class: 'text-xs text-muted-foreground' }, relativeTime),
])

// 產品/客戶模組: 只顯示絕對時間
h('span', {}, formatDate(row.getValue('createdAt')))

// 問題: 時間資訊的詳細程度不一致
// 建議: 根據業務場景統一時間顯示格式

優化建議與具體方法 ​

【高優先級】統一性修復 ​

1. 統一 ID 顯示標準 ​

問題: ID 顯示長度不一致 (6碼 vs 8碼)

解決方案:

typescript
// 建立統一的 ID 顯示標準
// utils/formatters.ts
export const formatTableId = (id: string, displayLength: number = 8) => {
  return textCopyable(id, 'font-mono', displayLength)
}

// 所有 columns.ts 統一使用:
cell: ({ row }) => formatTableId(row.getValue('id'))

2. 統一空值處理 ​

問題: 空值處理方式不一致

解決方案:

typescript
// utils/formatters.ts - 擴展統一空值處理
export const formatTableValue = (value: any, type: 'text' | 'currency' | 'date' = 'text') => {
  if (value == null || value === '') {
    return formatDataTableEmptyValue(value)
  }
  
  switch (type) {
    case 'currency': return formatCurrency(value)
    case 'date': return formatDate(value)
    default: return value
  }
}

// 在所有 columns.ts 中統一使用:
cell: ({ row }) => formatTableValue(row.getValue('field'))

3. 統一時間顯示格式 ​

問題: 時間顯示詳細度不一致

解決方案:

typescript
// components/common/TableDateTime.vue - 建立統一時間組件
<template>
  <div class="flex flex-col">
    <span class="text-sm">{{ formatDate(datetime) }}</span>
    <span v-if="showRelative" class="text-xs text-muted-foreground">
      {{ formatRelativeTime(datetime) }}
    </span>
  </div>
</template>

// 根據業務場景決定是否顯示相對時間:
// 訂單: showRelative=true (時效性重要)
// 產品/客戶: showRelative=false (建立時間相對不重要)

【中優先級】資訊密度平衡 ​

4. 客戶模組資訊增強 ​

問題: 客戶列表資訊過於簡化，與 Overview 脫節

解決方案:

typescript
// components/customer/customer-list/columns.ts
// 新增商業價值欄位
{
  accessorKey: 'rfmSegment',
  header: '客戶分群',
  cell: ({ row }) => {
    const segment = row.getValue('rfmSegment')
    return h(Badge, { variant: getSegmentVariant(segment) }, segment)
  }
},
{
  accessorKey: 'lastOrderDate', 
  header: '最後消費',
  cell: ({ row }) => formatRelativeTime(row.getValue('lastOrderDate'))
},
{
  accessorKey: 'totalSpent',
  header: '累計消費', 
  cell: ({ row }) => formatCurrency(row.getValue('totalSpent'))
}

5. 產品模組資訊精簡 ​

問題: 產品列表資訊過於詳細，影響掃描效率

解決方案:

typescript
// 將 createdAt 移至 tooltip 或詳情頁
// 簡化分類顯示邏輯
{
  accessorKey: 'categoryId',
  header: '分類',
  cell: ({ row }) => {
    const categoryName = row.original.categoryName
    const category = categories.find(c => c.value === row.getValue('categoryId'))
    
    return h('div', { class: 'flex items-center gap-2' }, [
      category?.icon,
      h('span', categoryName || '-')
    ])
  }
}

【中優先級】商業邏輯修復 ​

6. 訂單付款資訊完整性 ​

問題: OrderDetailView 付款資訊顯示為 'N/A'

解決方案:

typescript
// 檢查資料流問題:
// 1. 確認 getOrderWithItems API 是否包含付款資訊
// 2. 檢查 payment 相關欄位的 mapping 邏輯
// 3. 確保前端正確處理付款狀態

// composables/useOrder.ts
export const getOrderWithItems = async (orderId: string) => {
  // 確保查詢包含付款資訊
  const { data, error } = await supabase
    .from('orders')
    .select(`
      *,
      payments (*), // 確保包含付款記錄
      order_items (*)
    `)
    .eq('id', orderId)
    .single()
}

7. 產品價格邏輯修復 ​

問題: 硬編碼的價格計算邏輯 (price * 1.2)

解決方案:

typescript
// 方案一: 資料庫層面新增原價欄位
// ALTER TABLE products ADD COLUMN original_price DECIMAL(10,2);

// 方案二: 設定可配置的價格係數
// types/product.ts
export interface ProductPricing {
  salePrice: number
  originalPrice?: number  
  discountRate?: number
}

// ProductDetailView.vue
const pricing = computed(() => {
  const salePrice = product.value?.price ?? 0
  const originalPrice = product.value?.originalPrice ?? salePrice * 1.2
  return { salePrice, originalPrice }
})

【低優先級】功能定位釐清 ​

8. ProductsList vs ProductStockList 定位 ​

問題: 兩個產品列表功能重疊

解決方案:

typescript
// 方案一: 明確功能定位
// ProductsList: 一般產品管理 (價格、分類、基本庫存)
// ProductStockList: 庫存專門管理 (詳細庫存資訊、補貨操作)

// 方案二: 合併為可切換檢視模式
// ProductsView.vue
<template>
  <div>
    <ViewModeToggle v-model="viewMode" :modes="['basic', 'inventory']" />
    <ProductsList v-if="viewMode === 'basic'" />
    <ProductStockList v-if="viewMode === 'inventory'" />
  </div>
</template>

✅ 檢查清單與驗收標準 ​

統一性檢查清單 ​

  • [ ] ID 顯示: 所有模組統一顯示 8 碼，hover 顯示完整 UUID
  • [ ] 空值處理: 統一使用 formatTableValue() 函數處理
  • [ ] 時間格式: 根據業務場景統一時間顯示詳細度
  • [ ] 貨幣格式: 統一使用 formatCurrency() 右對齊顯示
  • [ ] 載入狀態: 統一載入指示器和骨架屏樣式

資訊完整性檢查清單 ​

  • [ ] 訂單付款: OrderDetailView 付款資訊正常顯示
  • [ ] 客戶價值: CustomersList 包含 RFM 分群和消費統計
  • [ ] 產品定價: ProductDetailView 價格邏輯來源明確
  • [ ] 庫存警告: 庫存閾值根據產品類型設定合理預設值

模組平衡檢查清單 ​

  • [ ] 資訊密度: 各模組資訊密度相當，無過密或過疏問題
  • [ ] 功能對等: 類似功能在不同模組中處理方式一致
  • [ ] 導航邏輯: 模組間跳轉和資訊關聯邏輯清晰

效果評估指標 ​

統一性提升:

  • 程式碼重用率: 目標 +30%
  • 樣式一致性: 目標達到 95%

資訊價值提升:

  • 客戶模組資訊密度: 目標 +50%
  • 訂單處理效率: 目標 +25%

維護成本降低:

  • 新功能開發時間: 目標 -20%
  • 樣式修改工作量: 目標 -40%

🔄 持續優化流程 ​

1. 定期檢視機制 ​

  • 每季度檢視各模組資訊架構一致性
  • 新增功能時對照此文檔確保標準一致

2. 標準更新流程 ​

  • 發現新的不一致問題時更新此文檔
  • 優化方案實施後更新最佳實踐範例

3. 團隊協作規範 ​

  • 新團隊成員必須閱讀此文檔
  • Code Review 時檢查是否符合統一標準

最後更新: 2025-09-05 | 下次檢視: 2025-12-05