From d28936cf943d8722d4fc31271c2715e5692e8497 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Sat, 15 Aug 2026 10:59:27 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E5=BE=AE=E4=BF=A1=E5=AE=A2=E6=88=B7?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=88=97=E5=B8=83=E5=B1=80=E5=AF=B9=E9=BD=90?=
 =?UTF-8?q?=E4=BA=91=E5=AE=A2(=E5=A4=B4=E5=83=8F+=E6=98=B5=E7=A7=B0+?=
 =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E5=8F=B7=E5=A4=8D=E5=90=88=E5=8D=95=E5=85=83?=
 =?UTF-8?q?=E6=A0=BC)?=
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 | 35 ++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/yunkes/src/views/CustomerList.vue b/yunkes/src/views/CustomerList.vue
index a8f211e..f0884da 100644
--- a/yunkes/src/views/CustomerList.vue
+++ b/yunkes/src/views/CustomerList.vue
@@ -96,6 +96,13 @@ function imageCell(row: Customer, camelKey: string): string | undefined {
   const v = cell(row, camelKey)
   return typeof v === 'string' && v !== '' ? v : undefined
 }
+/** 客户微信 复合单元格：头像 fallback 首字（昵称→friend_id）。 */
+function initials(row: Customer): string {
+  const nick = cell(row, 'friendWxNickname')
+  const source =
+    typeof nick === 'string' && nick ? nick : row.friend_nickname ?? row.friend_id ?? '?'
+  return String(source).slice(0, 1) || '?'
+}
 /** WhatsApp tab 行序号（含分页偏移）。 */
 function waSerial(index: number): number {
   const st = tabState.whatsapp
@@ -355,15 +362,20 @@ onMounted(() => {
           empty-text="暂无微信客户数据"
           @row-click="openDrawer"
         >
-          <el-table-column label="客户微信" min-width="200">
+          <el-table-column label="客户微信" min-width="220">
             <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 class="yk-wxuser">
+                <el-avatar :size="36" :src="imageCell(row, 'friendHeadImageUrl')" shape="square">
+                  {{ initials(row) }}
+                </el-avatar>
+                <div class="yk-wxuser__meta">
+                  <div class="yk-staffinfo__nick" :title="cellText(row, 'friendWxNickname')">
+                    {{ cellText(row, 'friendWxNickname') }}
+                  </div>
+                  <div class="yk-staffinfo__muted" :title="cellText(row, 'friendWxId')">
+                    {{ cellText(row, 'friendWxId') }}
+                  </div>
+                </div>
               </div>
             </template>
           </el-table-column>
@@ -565,10 +577,9 @@ onMounted(() => {
 .yk-customers__pager { margin-top: 12px; display: flex; justify-content: flex-end; }
 .yk-customers__hint { margin: 8px 2px 0; font-size: 12px; color: #c0c4cc; }
 
-/* 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-wxuser { display: flex; align-items: center; gap: 8px; }
+.yk-wxuser__meta { min-width: 0; }
 
 /* WhatsApp 文字行（员工信息 / 员工WA / 客户WA 复合单元格）— 与 StaffList 一致 */
 .yk-staffinfo__nick { font-weight: 600; font-size: 13px; color: #303133; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }