add point account list

src/pages/event/EventRecordRank.vue

@@ -47,40 +47,25 @@
 				class="list"
 				theme="card"
 			>
-				<t-cell
+				<customer-cell
 					class="item"
 					:class="{ 'in-top3': index < 3}"
 					v-for="(item, index) in pageResult.list"
 					:key="item.customerId"
 					arrow
 					@click="toCustomerDetail(item.customerId || '')"
+					:customer="item.customer"
 				>
-					<template #left-icon>
-						<t-image
-							v-if="getCustomerPhotoURL(item.customer, 64)"
-							:src="getCustomerPhotoURL(item.customer, 64)"
-							:alt="getCustomerName(item)"
-							fit="cover"
-							class="avatar"
-						/>
-						<div v-else class="avatar fallback" v-text="getCustomerInitial(item)" />
-					</template>
-					<template #title>
-						<div class="title">
-							<div class="left">
-								<div
-									class="rank"
-									:class="{
+					<template #note>
+						<div
+							class="rank"
+							:class="{
 									top1: index === 0,
 									top2: index === 1,
 									top3: index === 2,
 								}"
-									v-text="index + 1"
-								/>
-								<div class="name" v-text="getCustomerName(item)" />
-							</div>
-							<t-tag size="small" variant="light-outline" :content="item.customer?.code" />
-						</div>
+							v-text="index + 1"
+						/>
 					</template>
 					<template #description>
 						<div class="description">
@@ -110,7 +95,7 @@
 							/>
 						</div>
 					</template>
-				</t-cell>
+				</customer-cell>
 			</t-cell-group>
 			<div v-else class="load-state" v-text="emptyStateText" />
 			<div v-if="pageResult.list.length" class="load-state" v-text="loadStateText" />
@@ -145,7 +130,6 @@ import EventAPI from "@/api/EventAPI";
 import EventRecordAPI from "@/api/EventRecordAPI";
 import type { CustomerEventRankView, EventRecordRankPage, EventRecordRankType } from "@/types/EventRecord";
 import type { EventItem } from "@/types/EventItem";
-import { getCustomerPhotoURL } from "@/utils/customer";
 import { getErrorMessage } from "@/utils/error";
 import { formatEventNumberValue } from "@/utils/eventValue";
 import { permissionCodes } from "@/utils/permission";
@@ -376,14 +360,6 @@ async function toCustomerDetail(customerId: string): Promise<void> {
 
 // ---------- 格式化 ----------
 
-function getCustomerName(item: CustomerEventRankView): string {
-	return item.customer?.name || "未知客户";
-}
-
-function getCustomerInitial(item: CustomerEventRankView): string {
-	return getCustomerName(item).slice(0, 1);
-}
-
 function getTotalNumberValueText(item: CustomerEventRankView): string {
 	return formatEventNumberValue(selectedNumberEvent.value, item.totalNumberValue);
 }
@@ -543,73 +519,33 @@ onMounted(async () => {
 		.list {
 
 			.item {
-				--td-spacer-1: 8px;
-				--td-spacer-2: 4px;
-				padding: 10px;
 
-				&.in-top3 {
-
-					.title {
-
-						.name {
-							font-size: 1rem;
-							font-weight: 600;
-						}
-					}
-				}
-
-				.avatar {
-					width: 3.5rem;
-					height: 3.5rem;
-					border-radius: .5rem;
-				}
-
-				.title {
-					flex: 1 1 auto;
+				.rank {
+					flex: 0 0 1.5rem;
+					width: 1.5rem;
+					color: #52607a;
+					height: 1.5rem;
 					display: flex;
-					min-width: 0;
-					justify-content: space-between;
+					font-size: .76rem;
+					background: #F0F0F0;
+					font-weight: 700;
+					align-items: center;
+					border-radius: .5rem;
+					justify-content: center;
 
-					.left {
-						gap: .5rem;
-						display: flex;
+					&.top1 {
+						color: #5C3A00;
+						background: #FFD700;
+					}
 
-						.rank {
-							flex: 0 0 1.5rem;
-							width: 1.5rem;
-							color: #52607a;
-							height: 1.5rem;
-							display: flex;
-							font-size: .76rem;
-							background: #F0F0F0;
-							font-weight: 700;
-							align-items: center;
-							border-radius: .5rem;
-							justify-content: center;
+					&.top2 {
+						color: #374151;
+						background: #C0C0C0;
+					}
 
-							&.top1 {
-								color: #5C3A00;
-								background: #FFD700;
-							}
-
-							&.top2 {
-								color: #374151;
-								background: #C0C0C0;
-							}
-
-							&.top3 {
-								color: #FFF8F0;
-								background: #CD7F32;
-							}
-						}
-
-						.name {
-							color: #0F172A;
-							overflow: hidden;
-							font-size: .875rem;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-						}
+					&.top3 {
+						color: #FFF8F0;
+						background: #CD7F32;
 					}
 				}