From 5d4a0c59010136a3c7e9d42f987ff408cb6cf397 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Thu, 6 Aug 2026 10:19:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(customers):=20align=20CustomerList=20to=20?=
 =?UTF-8?q?=E4=BA=91=E5=AE=A2=20=E2=80=94=20per-channel=20tabs,=207=20cols?=
 =?UTF-8?q?=20each,=20view-chat=20action?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude <noreply@anthropic.com>
---
 yunkes/src/views/CustomerList.vue | 698 ++++++++++++++----------------
 1 file changed, 327 insertions(+), 371 deletions(-)

diff --git a/yunkes/src/views/CustomerList.vue b/yunkes/src/views/CustomerList.vue
index 63de9a8..a46b184 100644
--- a/yunkes/src/views/CustomerList.vue
+++ b/yunkes/src/views/CustomerList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { getCustomers } from '@/api'
@@ -7,160 +7,144 @@ import type { Channel, Customer } from '@/api/types'
 import { useChannelStore } from '@/stores/channel'
 import { useOrgStore } from '@/stores/org'
 import { channelLabel, formatTime } from '@/utils/format'
-import {
-  buildCustomerSections,
-  genderLabel,
-  readField,
-} from '@/utils/customerFields'
+import { buildCustomerSections, fromTypeLabel, readField } from '@/utils/customerFields'
+
+/**
+ * 客户列表 — channel-tabbed view mirroring 云客「沟通」板块的客户列表.
+ *
+ * 微信客户 tab 对齐 云客 /cms/wechat/wechatlist/wechatdetail/1/{wxId}
+ * (7 列: 客户微信/数据来源/客户备注名/最近沟通时间/发送条数/接收条数/操作).
+ * WhatsApp客户 tab 对齐 云客 /cms/wechat/waBusiness/friendlist
+ * (7 列: 序号/员工信息/员工WhatsApp/客户WhatsApp/添加时间/最新消息时间/操作).
+ * 两 channel 列不同 → 各自独立列定义（同 StaffList 模式）。
+ * 操作列「查看聊天记录」→ ChatTimeline；row-click 开全字段 drawer。
+ * 读字段用 readField（structured-first + raw_json fallback）；时间用 cellTimeText
+ * （number→formatTime，字符串直显）。
+ */
+type TabKey = Channel
+interface TabState {
+  items: Customer[]
+  total: number
+  page: number
+  pageSize: number
+  loading: boolean
+  errorMsg: string | null
+  loaded: boolean
+}
+function freshTabState(): TabState {
+  return { items: [], total: 0, page: 1, pageSize: 20, loading: false, errorMsg: null, loaded: false }
+}
 
 const route = useRoute()
 const router = useRouter()
 const channelStore = useChannelStore()
 const org = useOrgStore()
 
-const customers = ref<Customer[]>([])
-const total = ref(0)
-const page = ref(1)
-const pageSize = ref(20)
-const loading = ref(false)
-const errorMsg = ref<string | null>(null)
+// activeTab 跟随全局 channelStore（StaffList viewCustomers 先 setChannel 再 push /customers）。
+// channel 总是具体值（'wechat' | 'whatsapp'），不会是 'all' —— CustomerList 强制按 tab 选 channel，
+// loadTab 永不传 'all'（getCustomers 的 'all'→undefined 分支不会被触发）。
+const activeTab = ref<TabKey>(channelStore.channel === 'whatsapp' ? 'whatsapp' : 'wechat')
+const tabState = reactive<Record<TabKey, TabState>>({
+  wechat: freshTabState(),
+  whatsapp: freshTabState(),
+})
 
-// All-fields drawer state.
+// 全字段抽屉（两 tab 共享）
 const drawerOpen = ref(false)
 const drawerCustomer = ref<Customer | null>(null)
 
+// query 过滤（两 tab 共享）
 const departmentId = computed<string | null>(() =>
   route.query.department_id ? String(route.query.department_id) : null,
 )
-
 const ownerId = computed<string | null>(() =>
   route.query.owner_account_id ? String(route.query.owner_account_id) : null,
 )
-
 const departmentName = computed(() => {
   if (!departmentId.value) return null
   return org.findNode(departmentId.value)?.label ?? departmentId.value
 })
 
-const channelOptions = [
-  { value: 'all' as const, label: '全部渠道' },
-  { value: 'wechat' as const, label: '微信' },
-  { value: 'whatsapp' as const, label: 'WhatsApp' },
-]
-
-const channelLabelCurrent = computed(() =>
-  channelLabel(channelStore.channel === 'all' ? null : channelStore.channel),
-)
-
-function channelTagType(c: Customer['channel']) {
-  return c === 'wechat' ? 'success' : 'warning'
-}
-
-function onChannelChange(value: string | number | boolean | undefined): void {
-  channelStore.setChannel(value as Channel | 'all')
-}
-
-/**
- * Read a raw_json camelCase key off a customer, preferring the structured
- * snake_case column when it is populated. The first argument is the row so the
- * table can use the same helper as the drawer.
- */
+// ---- cell helpers (structured-first via customerFields.readField) ----
 function cell(row: Customer, camelKey: string): unknown {
   return readField(row, camelKey)
 }
-
 function cellText(row: Customer, camelKey: string): string {
   const v = cell(row, camelKey)
   return v === null || v === undefined || v === '' ? '--' : String(v)
 }
-
-/** Image URL for an avatar/head column: a string value, else undefined. */
+/** 时间列：number→formatTime；字符串("YYYY-MM-DD HH:mm[:ss]")直显；空→--。 */
+function cellTimeText(row: Customer, camelKey: string): string {
+  const v = cell(row, camelKey)
+  if (typeof v === 'number' && Number.isFinite(v)) return formatTime(v)
+  if (typeof v === 'string' && v.trim()) return v.trim()
+  return '--'
+}
+/** 数字列（发送/接收条数），缺失回 0。 */
+function cellNum(row: Customer, camelKey: string, fallback = 0): number {
+  const v = cell(row, camelKey)
+  return typeof v === 'number' && Number.isFinite(v) ? v : fallback
+}
+/** 数据来源列：fromType 代码→文案。 */
+function fromTypeText(row: Customer): string {
+  return fromTypeLabel(cell(row, 'fromType'))
+}
 function imageCell(row: Customer, camelKey: string): string | undefined {
   const v = cell(row, camelKey)
   return typeof v === 'string' && v !== '' ? v : undefined
 }
-
-/** Numeric ms-epoch for a time column (so formatTime stays type-safe). */
-function timeCell(row: Customer, camelKey: string): number | undefined {
-  const v = cell(row, camelKey)
-  return typeof v === 'number' ? v : undefined
+/** WhatsApp tab 行序号（含分页偏移）。 */
+function waSerial(index: number): number {
+  const st = tabState.whatsapp
+  return (st.page - 1) * st.pageSize + index + 1
 }
 
-function genderText(row: Customer): string {
-  const v = cell(row, 'gender')
-  return v === null || v === undefined || v === '' ? '--' : genderLabel(v)
-}
-
-async function load(): Promise<void> {
-  loading.value = true
-  errorMsg.value = null
+// ---- per-tab loading ----
+async function loadTab(ch: TabKey): Promise<void> {
+  const st = tabState[ch]
+  st.loading = true
+  st.errorMsg = null
   try {
     const res = await getCustomers({
-      channel: channelStore.channel,
-      page: page.value,
-      page_size: pageSize.value,
+      channel: ch,
+      page: st.page,
+      page_size: st.pageSize,
       department_id: departmentId.value ?? undefined,
       owner_account_id: ownerId.value ?? undefined,
     })
-    customers.value = res.items
-    total.value = res.total
+    st.items = res.items
+    st.total = res.total
+    st.loaded = true
   } catch (e) {
-    errorMsg.value = (e as Error).message
+    st.errorMsg = (e as Error).message
     ElMessage.error(`客户列表加载失败：${(e as Error).message}`)
   } finally {
-    loading.value = false
+    st.loading = false
   }
 }
+function handlePageChange(ch: TabKey, p: number): void {
+  tabState[ch].page = p
+  loadTab(ch)
+}
+function handlePageSizeChange(ch: TabKey, s: number): void {
+  tabState[ch].pageSize = s
+  tabState[ch].page = 1
+  loadTab(ch)
+}
+// per-tab 包装，让 template 事件带正确类型（vue-tsc strict 不推 inline-arrow 参数）
+function onWechatPageChange(p: number): void { handlePageChange('wechat', p) }
+function onWechatPageSizeChange(s: number): void { handlePageSizeChange('wechat', s) }
+function onWhatsappPageChange(p: number): void { handlePageChange('whatsapp', p) }
+function onWhatsappPageSizeChange(s: number): void { handlePageSizeChange('whatsapp', s) }
 
-function handlePageChange(p: number): void {
-  page.value = p
-  load()
+function onTabChange(name: string | number): void {
+  const ch = String(name) as TabKey
+  channelStore.setChannel(ch)
+  if (!tabState[ch].loaded) loadTab(ch)
 }
 
-function handlePageSizeChange(s: number): void {
-  pageSize.value = s
-  page.value = 1
-  load()
-}
-
-/** Drop the ``owner_account_id`` query param while preserving any others. */
-function clearOwnerFilter(): void {
-  const { owner_account_id: _drop, ...rest } = route.query
-  void _drop
-  router.replace({ query: rest })
-}
-
-// React to top-bar channel + dept tree selection + owner_account_id query.
-watch(
-  () => [channelStore.channel, departmentId.value, ownerId.value] as const,
-  () => {
-    page.value = 1
-    load()
-  },
-)
-
-function openDrawer(row: Customer): void {
-  // Row click opens the all-fields drawer; chat is reached from the drawer's
-  // 查看聊天记录 action (preserves the owner/friend/channel keying).
-  drawerCustomer.value = row
-  drawerOpen.value = true
-}
-
-const drawerSections = computed(() =>
-  drawerCustomer.value ? buildCustomerSections(drawerCustomer.value) : [],
-)
-
-const drawerAvatarSrc = computed<string | undefined>(() => {
-  const c = drawerCustomer.value
-  if (!c) return undefined
-  return imageCell(c, 'friendHeadImageUrl') ?? c.head_image_url ?? undefined
-})
-
-const drawerCanChat = computed(() => !!drawerCustomer.value?.owner_account_id)
-
-function goChatFromDrawer(): void {
-  const row = drawerCustomer.value
-  if (!row) return
+// ---- 操作列：查看聊天记录 → ChatTimeline ----
+function viewChat(row: Customer): void {
   if (!row.owner_account_id) {
     ElMessage.warning('该客户缺少归属账号，无法查看聊天记录')
     return
@@ -174,8 +158,66 @@ function goChatFromDrawer(): void {
     },
   })
 }
+/** drawer 内「查看聊天记录」入口：drawerCustomer 是 ref<Customer|null>，模板里跨多层嵌套不保证 TS 窄化，故用 wrapper 守卫（同现状 goChatFromDrawer 模式）。 */
+function viewChatFromDrawer(): void {
+  const row = drawerCustomer.value
+  if (!row) return
+  viewChat(row)
+}
 
-onMounted(load)
+/** 清除 owner_account_id query（保留其余 query）。 */
+function clearOwnerFilter(): void {
+  const { owner_account_id: _drop, ...rest } = route.query
+  void _drop
+  router.replace({ query: rest })
+}
+
+// ---- drawer ----
+function openDrawer(row: Customer): void {
+  drawerCustomer.value = row
+  drawerOpen.value = true
+}
+const drawerSections = computed(() =>
+  drawerCustomer.value ? buildCustomerSections(drawerCustomer.value) : [],
+)
+const drawerAvatarSrc = computed<string | undefined>(() => {
+  const c = drawerCustomer.value
+  if (!c) return undefined
+  // imageCell 内部 readField 因 STRUCTURED_ALIAS.friendHeadImageUrl→head_image_url 已优先取结构化列，
+  // 再 fallback raw_json.friendHeadImageUrl，故无需再 ?? c.head_image_url（避免冗余）。
+  return imageCell(c, 'friendHeadImageUrl')
+})
+const drawerCanChat = computed(() => !!drawerCustomer.value?.owner_account_id)
+
+// 全局 channel 变化（别处 setChannel）→ activeTab 跟随 + lazy-load。
+// 当前所有外部 setChannel 入口（StaffList.viewCustomers/viewGroups）都同时带 owner_account_id query，
+// watch(dept/owner) 会 fire 兜底加载；但若未来出现「只 setChannel 不带 query」的入口，这里补的
+// lazy-load 能保证 tab 切了数据也加载（与 StaffList.onTabChange 契约一致）。
+watch(
+  () => channelStore.channel,
+  (ch) => {
+    const next = ch === 'whatsapp' ? 'whatsapp' : 'wechat'
+    if (next !== activeTab.value) {
+      activeTab.value = next
+      if (!tabState[next].loaded) loadTab(next)
+    }
+  },
+)
+// query（部门/员工）变化 → 重载当前 tab（filter 共享）
+watch(
+  () => [departmentId.value, ownerId.value] as const,
+  () => {
+    tabState.wechat.loaded = false
+    tabState.whatsapp.loaded = false
+    tabState.wechat.page = 1
+    tabState.whatsapp.page = 1
+    loadTab(activeTab.value)
+  },
+)
+
+onMounted(() => {
+  loadTab(activeTab.value)
+})
 </script>
 
 <template>
@@ -184,26 +226,12 @@ onMounted(load)
       <div>
         <h2 style="margin: 0 0 4px; font-size: 16px">客户列表</h2>
         <span class="yk-customers__sub">
-          共 {{ total }} 条
+          共 {{ tabState[activeTab].total }} 条
           <template v-if="departmentName"> · 部门：{{ departmentName }}</template>
           <template v-if="ownerId"> · 员工账号：{{ ownerId }}</template>
-          · 渠道：{{ channelLabelCurrent }}
         </span>
       </div>
       <div class="yk-customers__filters">
-        <el-radio-group
-          :model-value="channelStore.channel"
-          size="small"
-          @change="onChannelChange"
-        >
-          <el-radio-button
-            v-for="opt in channelOptions"
-            :key="opt.value"
-            :value="opt.value"
-          >
-            {{ opt.label }}
-          </el-radio-button>
-        </el-radio-group>
         <el-button
           v-if="departmentId"
           size="small"
@@ -213,143 +241,161 @@ onMounted(load)
         >
           清除部门筛选
         </el-button>
-        <el-button
-          v-if="ownerId"
-          size="small"
-          type="info"
-          plain
-          @click="clearOwnerFilter"
-        >
+        <el-button v-if="ownerId" size="small" type="info" plain @click="clearOwnerFilter">
           清除员工筛选
         </el-button>
       </div>
     </div>
 
-    <el-alert
-      v-if="errorMsg"
-      :title="errorMsg"
-      type="error"
-      show-icon
-      :closable="false"
-      style="margin-bottom: 12px"
-    />
+    <el-tabs v-model="activeTab" class="yk-customers__tabs" @tab-change="onTabChange">
+      <!-- ============================================================
+           微信客户 — 7 列，对齐云客 wechatdetail/1/{wxId}.
+           ============================================================ -->
+      <el-tab-pane label="微信客户" name="wechat">
+        <el-alert
+          v-if="tabState.wechat.errorMsg"
+          :title="tabState.wechat.errorMsg"
+          type="error"
+          show-icon
+          :closable="false"
+          style="margin-bottom: 12px"
+        />
+        <el-table
+          v-loading="tabState.wechat.loading"
+          :data="tabState.wechat.items"
+          stripe
+          border
+          row-key="friend_id"
+          style="width: 100%"
+          :row-class-name="() => 'yk-clickable-row'"
+          empty-text="暂无微信客户数据"
+          @row-click="openDrawer"
+        >
+          <el-table-column label="客户微信" min-width="200">
+            <template #default="{ row }">
+              <div class="yk-pair">
+                <span class="yk-pair__k">昵称</span>
+                <span class="yk-pair__v" :title="cellText(row, 'friendWxNickname')">{{ cellText(row, 'friendWxNickname') }}</span>
+              </div>
+              <div class="yk-pair">
+                <span class="yk-pair__k">微信号</span>
+                <span class="yk-pair__v">{{ cellText(row, 'friendWxId') }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="数据来源" min-width="110">
+            <template #default="{ row }">{{ fromTypeText(row) }}</template>
+          </el-table-column>
+          <el-table-column label="客户备注名" min-width="120">
+            <template #default="{ row }">{{ cellText(row, 'friendWxRemark') }}</template>
+          </el-table-column>
+          <el-table-column label="最近沟通时间" width="170">
+            <template #default="{ row }">{{ cellTimeText(row, 'lastChatTime') }}</template>
+          </el-table-column>
+          <el-table-column label="发送条数" width="100" align="right">
+            <template #default="{ row }">{{ cellNum(row, 'sendNum') }}</template>
+          </el-table-column>
+          <el-table-column label="接收条数" width="100" align="right">
+            <template #default="{ row }">{{ cellNum(row, 'receiveNum') }}</template>
+          </el-table-column>
+          <el-table-column label="操作" width="130" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button link type="primary" size="small" @click.stop="viewChat(row)">
+                查看聊天记录
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="yk-customers__pager">
+          <el-pagination
+            :current-page="tabState.wechat.page"
+            :page-size="tabState.wechat.pageSize"
+            :page-sizes="[20, 50, 100]"
+            :total="tabState.wechat.total"
+            layout="total, sizes, prev, pager, next, jumper"
+            background
+            @current-change="onWechatPageChange"
+            @size-change="onWechatPageSizeChange"
+          />
+        </div>
+      </el-tab-pane>
 
-    <el-table
-      v-loading="loading"
-      :data="customers"
-      stripe
-      border
-      row-key="friend_id"
-      style="width: 100%"
-      :row-class-name="() => 'yk-clickable-row'"
-      empty-text="暂无客户数据"
-      @row-click="openDrawer"
-    >
-      <el-table-column label="头像" width="64" align="center">
-        <template #default="{ row }">
-          <el-avatar
-            :size="36"
-            :src="imageCell(row, 'friendHeadImageUrl') ?? row.head_image_url ?? undefined"
-            shape="square"
-          >
-            {{ (row.friend_nickname || row.friend_id || '?').slice(0, 1) }}
-          </el-avatar>
-        </template>
-      </el-table-column>
-      <el-table-column label="微信昵称" min-width="120">
-        <template #default="{ row }">
-          {{ cellText(row, 'friendWxNickname') }}
-        </template>
-      </el-table-column>
-      <el-table-column label="微信号" min-width="110">
-        <template #default="{ row }">
-          {{ cellText(row, 'friendWxAlias') }}
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" min-width="110">
-        <template #default="{ row }">{{ cellText(row, 'friendWxRemark') }}</template>
-      </el-table-column>
-      <el-table-column label="真实姓名" min-width="100">
-        <template #default="{ row }">{{ cellText(row, 'realName') }}</template>
-      </el-table-column>
-      <el-table-column label="手机" min-width="120">
-        <template #default="{ row }">{{ cellText(row, 'phone') }}</template>
-      </el-table-column>
-      <el-table-column label="性别" width="80">
-        <template #default="{ row }">{{ genderText(row) }}</template>
-      </el-table-column>
-      <el-table-column label="地区" min-width="110">
-        <template #default="{ row }">{{ cellText(row, 'region') }}</template>
-      </el-table-column>
-      <el-table-column label="描述" min-width="180" show-overflow-tooltip>
-        <template #default="{ row }">{{ cellText(row, 'description') }}</template>
-      </el-table-column>
-      <el-table-column label="销售/员工" min-width="120">
-        <template #default="{ row }">
-          <span v-if="cell(row, 'saleName') || cell(row, 'userName')">
-            {{ cellText(row, 'saleName') }}
-            <span
-              v-if="cell(row, 'saleName') && cell(row, 'userName')"
-              style="color: #c0c4cc"
-            >
-              /
-            </span>
-            {{ cellText(row, 'userName') }}
-          </span>
-          <span v-else style="color: #c0c4cc">--</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="部门" min-width="110">
-        <template #default="{ row }">
-          <span v-if="cell(row, 'deptName')">{{ cellText(row, 'deptName') }}</span>
-          <span v-else style="color: #c0c4cc">--</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="来源" min-width="100">
-        <template #default="{ row }">{{ cellText(row, 'fromType') }}</template>
-      </el-table-column>
-      <el-table-column label="添加方式" min-width="100">
-        <template #default="{ row }">{{ cellText(row, 'addType') }}</template>
-      </el-table-column>
-      <el-table-column label="添加时间" width="160">
-        <template #default="{ row }">
-          {{ formatTime(timeCell(row, 'addTime')) }}
-        </template>
-      </el-table-column>
-      <el-table-column label="最近聊天" width="160">
-        <template #default="{ row }">
-          {{ formatTime(row.last_chat_time) }}
-        </template>
-      </el-table-column>
-      <el-table-column label="消息数" prop="message_count" width="90" align="right">
-        <template #default="{ row }">
-          {{ row.message_count ?? 0 }}
-        </template>
-      </el-table-column>
-      <el-table-column label="渠道" width="100">
-        <template #default="{ row }">
-          <el-tag :type="channelTagType(row.channel)" size="small" effect="plain">
-            {{ channelLabel(row.channel) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-    </el-table>
+      <!-- ============================================================
+           WhatsApp客户 — 7 列，对齐云客 waBusiness/friendlist.
+           ============================================================ -->
+      <el-tab-pane label="WhatsApp客户" name="whatsapp">
+        <el-alert
+          v-if="tabState.whatsapp.errorMsg"
+          :title="tabState.whatsapp.errorMsg"
+          type="error"
+          show-icon
+          :closable="false"
+          style="margin-bottom: 12px"
+        />
+        <el-table
+          v-loading="tabState.whatsapp.loading"
+          :data="tabState.whatsapp.items"
+          stripe
+          border
+          row-key="friend_id"
+          style="width: 100%"
+          :row-class-name="() => 'yk-clickable-row'"
+          empty-text="暂无 WhatsApp 客户数据"
+          @row-click="openDrawer"
+        >
+          <el-table-column label="序号" width="70" align="center">
+            <template #default="{ $index }">{{ waSerial($index) }}</template>
+          </el-table-column>
+          <el-table-column label="员工信息" min-width="150">
+            <template #default="{ row }">
+              <div class="yk-staffinfo__nick" :title="cellText(row, 'salesNickName')">{{ cellText(row, 'salesNickName') }}</div>
+              <div class="yk-staffinfo__muted">{{ cellText(row, 'salePhone') }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="员工WhatsApp" min-width="200">
+            <template #default="{ row }">
+              <div class="yk-staffinfo__nick" :title="cellText(row, 'userName')">{{ cellText(row, 'userName') }}</div>
+              <div class="yk-staffinfo__muted">{{ cellText(row, 'uid') }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="客户WhatsApp" min-width="200">
+            <template #default="{ row }">
+              <div class="yk-staffinfo__nick" :title="cellText(row, 'nickName')">{{ cellText(row, 'nickName') }}</div>
+              <div class="yk-staffinfo__muted">{{ cellText(row, 'phone') }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="添加时间" width="160">
+            <template #default="{ row }">{{ cellTimeText(row, 'createTime') }}</template>
+          </el-table-column>
+          <el-table-column label="最新消息时间" width="160">
+            <template #default="{ row }">{{ cellTimeText(row, 'lastUpdate') }}</template>
+          </el-table-column>
+          <el-table-column label="操作" width="130" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button link type="primary" size="small" @click.stop="viewChat(row)">
+                查看聊天记录
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="yk-customers__pager">
+          <el-pagination
+            :current-page="tabState.whatsapp.page"
+            :page-size="tabState.whatsapp.pageSize"
+            :page-sizes="[20, 50, 100]"
+            :total="tabState.whatsapp.total"
+            layout="total, sizes, prev, pager, next, jumper"
+            background
+            @current-change="onWhatsappPageChange"
+            @size-change="onWhatsappPageSizeChange"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
 
-    <div class="yk-customers__pager">
-      <el-pagination
-        :current-page="page"
-        :page-size="pageSize"
-        :page-sizes="[20, 50, 100]"
-        :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
-        background
-        @current-change="handlePageChange"
-        @size-change="handlePageSizeChange"
-      />
-    </div>
     <p class="yk-customers__hint">点击任意一行查看客户全部字段。</p>
 
-    <!-- All-fields drawer -->
+    <!-- 全字段抽屉（保留现状：avatar + buildCustomerSections + 查看聊天记录） -->
     <el-drawer
       v-model="drawerOpen"
       :title="drawerCustomer ? `客户详情 · ${drawerCustomer.friend_nickname ?? drawerCustomer.friend_id}` : '客户详情'"
@@ -358,25 +404,13 @@ onMounted(load)
     >
       <template v-if="drawerCustomer">
         <div class="yk-drawer__topbar">
-          <el-button
-            type="primary"
-            size="small"
-            :disabled="!drawerCanChat"
-            @click="goChatFromDrawer"
-          >
+          <el-button type="primary" size="small" :disabled="!drawerCanChat" @click="viewChatFromDrawer">
             查看聊天记录
           </el-button>
-          <span v-if="!drawerCanChat" class="yk-drawer__topbar-hint">
-            该客户缺少归属账号，无法查看聊天
-          </span>
+          <span v-if="!drawerCanChat" class="yk-drawer__topbar-hint">该客户缺少归属账号，无法查看聊天</span>
         </div>
-
         <div class="yk-drawer__avatar">
-          <el-avatar
-            :size="56"
-            :src="drawerAvatarSrc"
-            shape="square"
-          >
+          <el-avatar :size="56" :src="drawerAvatarSrc" shape="square">
             {{ (drawerCustomer.friend_nickname || drawerCustomer.friend_id || '?').slice(0, 1) }}
           </el-avatar>
           <div class="yk-drawer__avatar-meta">
@@ -385,25 +419,17 @@ onMounted(load)
             </div>
             <div class="yk-drawer__avatar-sub">
               {{ channelLabel(drawerCustomer.channel) }}
-              <template v-if="cell(drawerCustomer, 'friendWxAlias')">
-                · {{ cell(drawerCustomer, 'friendWxAlias') }}
-              </template>
+              <template v-if="cell(drawerCustomer, 'friendWxAlias')"> · {{ cellText(drawerCustomer, 'friendWxAlias') }}</template>
             </div>
           </div>
         </div>
-
         <div v-for="section in drawerSections" :key="section.title" class="yk-drawer__section">
           <el-divider content-position="left">{{ section.title }}</el-divider>
           <dl class="yk-drawer__kv">
             <div v-for="f in section.fields" :key="f.key" class="yk-drawer__kv-item">
               <dt>{{ f.label }}</dt>
               <dd v-if="f.render === 'image'" class="yk-drawer__img">
-                <el-image
-                  :src="String(f.value)"
-                  :preview-src-list="[String(f.value)]"
-                  fit="cover"
-                  hide-on-click-modal
-                />
+                <el-image :src="String(f.value)" :preview-src-list="[String(f.value)]" fit="cover" hide-on-click-modal />
               </dd>
               <dd v-else-if="f.render === 'empty'" class="yk-drawer__empty">—</dd>
               <dd v-else>{{ f.text }}</dd>
@@ -424,101 +450,31 @@ onMounted(load)
   flex-wrap: wrap;
   margin-bottom: 12px;
 }
+.yk-customers__sub { color: #909399; font-size: 13px; }
+.yk-customers__filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.yk-customers__tabs { margin-top: 4px; }
+.yk-customers__pager { margin-top: 12px; display: flex; justify-content: flex-end; }
+.yk-customers__hint { margin: 8px 2px 0; font-size: 12px; color: #c0c4cc; }
 
-.yk-customers__sub {
-  color: #909399;
-  font-size: 13px;
-}
+/* label/value pair stack（客户微信 复合单元格）— 与 StaffList 一致 */
+.yk-pair { display: flex; gap: 6px; line-height: 1.8; font-size: 13px; white-space: nowrap; }
+.yk-pair__k { color: #909399; flex-shrink: 0; }
+.yk-pair__v { color: #303133; overflow: hidden; text-overflow: ellipsis; }
 
-.yk-customers__filters {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  flex-wrap: wrap;
-}
+/* WhatsApp 文字行（员工信息 / 员工WA / 客户WA 复合单元格）— 与 StaffList 一致 */
+.yk-staffinfo__nick { font-weight: 600; font-size: 13px; color: #303133; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.yk-staffinfo__muted { font-size: 12px; color: #909399; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
-.yk-customers__pager {
-  margin-top: 12px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.yk-customers__hint {
-  margin: 8px 2px 0;
-  font-size: 12px;
-  color: #c0c4cc;
-}
-
-.yk-drawer__topbar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-.yk-drawer__topbar-hint {
-  color: #c0c4cc;
-  font-size: 12px;
-}
-
-.yk-drawer__avatar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 4px;
-}
-
-.yk-drawer__avatar-meta {
-  min-width: 0;
-}
-
-.yk-drawer__avatar-name {
-  font-size: 16px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.yk-drawer__avatar-sub {
-  font-size: 12px;
-  color: #909399;
-  margin-top: 2px;
-}
-
-.yk-drawer__kv {
-  margin: 0 0 8px;
-}
-
-.yk-drawer__kv-item {
-  display: grid;
-  grid-template-columns: 110px 1fr;
-  gap: 8px 12px;
-  padding: 3px 0;
-}
-
-.yk-drawer__kv dt {
-  color: #909399;
-  font-size: 13px;
-  word-break: break-all;
-}
-
-.yk-drawer__kv dd {
-  margin: 0;
-  font-size: 13px;
-  color: #303133;
-  word-break: break-all;
-  min-width: 0;
-}
-
-.yk-drawer__img :deep(.el-image) {
-  width: 64px;
-  height: 64px;
-  border-radius: 4px;
-  border: 1px solid var(--el-border-color-light, #e4e7ed);
-}
-
-.yk-drawer__empty {
-  color: #c0c4cc;
-}
+.yk-drawer__topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+.yk-drawer__topbar-hint { color: #c0c4cc; font-size: 12px; }
+.yk-drawer__avatar { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
+.yk-drawer__avatar-meta { min-width: 0; }
+.yk-drawer__avatar-name { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.yk-drawer__avatar-sub { font-size: 12px; color: #909399; margin-top: 2px; }
+.yk-drawer__kv { margin: 0 0 8px; }
+.yk-drawer__kv-item { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; padding: 3px 0; }
+.yk-drawer__kv dt { color: #909399; font-size: 13px; word-break: break-all; }
+.yk-drawer__kv dd { margin: 0; font-size: 13px; color: #303133; word-break: break-all; min-width: 0; }
+.yk-drawer__img :deep(.el-image) { width: 64px; height: 64px; border-radius: 4px; border: 1px solid var(--el-border-color-light, #e4e7ed); }
+.yk-drawer__empty { color: #c0c4cc; }
 </style>