xinyouhe/yunke
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 微信客户列表列布局对齐云客(头像+昵称+微信号复合单元格)

Browse Source 
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
浅念
2026-08-15 10:59:27 +08:00
parent 1f89eeddb0
commit d28936cf94
1 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
yunkes/src/views/CustomerList.vue
+22 -11
View File
@@ -96,6 +96,13 @@ function imageCell(row: Customer, camelKey: string): string | undefined {
const v = cell(row, camelKey) const v = cell(row, camelKey)
return typeof v === 'string' && v !== '' ? v : undefined 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 行序号（含分页偏移）。 */ /** WhatsApp tab 行序号（含分页偏移）。 */
function waSerial(index: number): number { function waSerial(index: number): number {
const st = tabState.whatsapp const st = tabState.whatsapp
@@ -355,15 +362,20 @@ onMounted(() => {
empty-text="暂无微信客户数据" empty-text="暂无微信客户数据"
@row-click="openDrawer" @row-click="openDrawer"
> >
<el-table-column label="客户微信" min-width="200"> <el-table-column label="客户微信" min-width="220">
<template #default="{ row }"> <template #default="{ row }">
<div class="yk-pair"> <div class="yk-wxuser">
<span class="yk-pair__k">昵称</span> <el-avatar :size="36" :src="imageCell(row, 'friendHeadImageUrl')" shape="square">
<span class="yk-pair__v" :title="cellText(row, 'friendWxNickname')">{{ cellText(row, 'friendWxNickname') }}</span> {{ 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>
<div class="yk-pair">
<span class="yk-pair__k">微信号</span>
<span class="yk-pair__v">{{ cellText(row, 'friendWxId') }}</span>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@@ -565,10 +577,9 @@ onMounted(() => {
.yk-customers__pager { margin-top: 12px; display: flex; justify-content: flex-end; } .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__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-wxuser { display: flex; align-items: center; gap: 8px; }
.yk-pair__k { color: #909399; flex-shrink: 0; } .yk-wxuser__meta { min-width: 0; }
.yk-pair__v { color: #303133; overflow: hidden; text-overflow: ellipsis; }
/* WhatsApp 文字行（员工信息 / 员工WA / 客户WA 复合单元格）— 与 StaffList 一致 */ /* 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__nick { font-weight: 600; font-size: 13px; color: #303133; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }