今天聚焦「客戶管理」的頁面設計與基礎實作，主角是 CustomerManagement.vue。我們會完成搜尋卡（CustomerSearchCard）、結果清單（ResultsList）的雙視圖設計（卡片/表格）、以及統一按鈕與 Provider 圖示等體驗細節。

介面總覽

• 左側：CustomerSearchCard

  • 關鍵字搜尋 + 三個操作鍵：搜尋客戶／清除條件／新增客戶（BaseButton）
  • 支援輸入即時觸發搜尋，也可透過按鈕明確操作

• 右側：ResultsHeader + ResultsList

  • ResultsHeader：卡片/表格兩種顯示模式切換
  • ResultsList：承接 filteredCustomers，卡片模式顯示重點、表格模式清楚列出欄位

資料結構與模擬資料

• 客戶欄位：id、code、name、phone、email、provider、createdAt
• 在 CustomerManagement.vue 以 reactive([...]) 放入 mock，讓頁面載入就有資料可看，便於調整視覺與互動

搜尋條件與事件流

• 狀態來源：searchCriteria（ref）
• 子組件事件：CustomerSearchCard 以 @search、@clear、@add 對外發送
• 頁面處理：
  • handleSearch(criteria)：更新 searchCriteria
  • handleClear()：重置為預設結構（無條件即顯示全部）
  • handleAddCustomer()：預留新增客戶切入點

篩選邏輯

filteredCustomers 依 searchCriteria 動態計算：

• 關鍵字同時比對姓名、電話、Email

視覺與互動細節

• 卡片模式：姓名/代碼/電話/Email，右下角顯示 Provider 圖示（LINE/Facebook/Google/Email）。
• 表格模式：欄位包含客戶編號、姓名、電話、Email、Provider；

BaseButton 一致化

• 搜尋卡下方三個按鈕改用 BaseButton：
  • 搜尋客戶：primary
  • 清除條件：secondary
  • 新增客戶：success

元件程式碼

<!-- CustomerManagement.vue -->
<CustomerSearchCard @search="handleSearch" @clear="handleClear" @add="handleAddCustomer" />

<ResultsList
  :items="filteredCustomers"
  :viewMode="viewMode"
  :columns="tableColumns"
  keyField="id"
  :itemClass="customerCardClass"
  @rowClick="openCustomer"
/>

<!-- CustomerSearchCard.vue：使用 BaseButton -->
<div class="button-group">
  <BaseButton variant="primary" @click="handleSearch">搜尋客戶</BaseButton>
  <BaseButton variant="secondary" @click="handleClear">清除條件</BaseButton>
  <BaseButton variant="success" @click="handleAdd">新增客戶</BaseButton>
</div>

CustomerSearchCard

• 只有一個表單欄位：keyword（字串）。
• 事件：
  • @search：帶出 { keyword }。
  • @clear：通知父層重置條件。
  • @add：點擊「新增客戶」。
• 行為：
  • 以 watch(searchForm, { deep: true }) 即時觸發 handleSearch()，輸入同時更新清單。

<template>
  <input v-model="searchForm.keyword" placeholder="輸入姓名、電話、ID或Email..." />
  <div class="button-group">
    <BaseButton @click="handleSearch" variant="primary">搜尋客戶</BaseButton>
    <BaseButton @click="handleClear" variant="secondary">清除條件</BaseButton>
    <BaseButton @click="handleAdd" variant="success">新增客戶</BaseButton>
  </div>
  <!-- watch(searchForm) 深度監聽，輸入即觸發搜尋 -->
</template>

ResultsList

• 主要 props：
  • items：要顯示的資料陣列（本頁為 filteredCustomers）。
  • viewMode：'card' | 'table'，由 ResultsHeader 控制。
  • columns：表格欄位定義（key/label/width）。
  • keyField：每筆資料的唯一鍵（此處為 id）。
  • itemClass：回傳卡片外層 class 的函式。
• 事件：
  • @rowClick：點擊列或卡片觸發。
• 插槽：
  • #card：自訂卡片呈現；可自由排版顯示 name/code/phone/email 與 Provider 標示。
  • #cell-<key>：自訂表格欄位內容（如金額格式化）。

表格欄位定義：

const tableColumns = [
  { key: 'id', label: '客戶編號' },
  { key: 'name', label: '姓名' },
  { key: 'phone', label: '電話'},
  { key: 'email', label: 'Email'},
  { key: 'provider', label: 'Provider'},
];

介面呈現

小結

到這裡，我們完成了可用的客戶管理頁面：搜尋即時、雙視圖切換、按鈕與圖示。

明日，Systemの呼吸・參之型｜CustomerManagement（下）：前端 CRUD 實作與 Store/API。心を燃やせ 🔥！