From 3b6b39a42774d28d9e7fefec5c056d0a3cb7ce08 Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Tue, 4 Aug 2026 00:34:38 +0800
Subject: [PATCH] fix customer rank style

---
 src/pages/management/CustomerDataCharts.vue | 322 +++++++++-----------
 1 file changed, 143 insertions(+), 179 deletions(-)

diff --git a/src/pages/management/CustomerDataCharts.vue b/src/pages/management/CustomerDataCharts.vue
index ebef209..2171e2f 100644
--- a/src/pages/management/CustomerDataCharts.vue
+++ b/src/pages/management/CustomerDataCharts.vue
@@ -1,45 +1,53 @@
 <template>
 	<div v-can="gaoPermissionCodes.stat.read" class="customer-data-charts-page">
-		<div class="selector">
-			<div class="header">
-				<t-button class="list-select" block theme="primary" variant="outline" @click="selectorVisible = true">
-					<template #icon>
-						<t-icon name="user-search" />
-					</template>
-					<span v-text="selectedCustomer ? selectedCustomer.name : '选择客户'" />
-				</t-button>
-				<t-button class="scan-select" theme="primary" @click="toggleScanner">
-					<template #icon>
-						<t-icon name="scan" />
-					</template>
-				</t-button>
-			</div>
-			<div v-if="scannerVisible" class="scanner-wrapper">
-				<code-scanner
-					visible
-					:status-text="scanStatus"
-					active-text="正在识别客户编码，请将二维码移入取景框"
-					@decode="handleDecodedText"
-					@status-change="handleScanStatusChange"
-				/>
-			</div>
-			<div v-if="!selectedCustomer" class="filter-line">
-				<t-dropdown-menu class="filter-menu">
-					<t-dropdown-item
-						v-model="rankDateFilterType"
-						:label="rankDateFilterLabel"
-						:options="rankDateOptions"
-						@change="selectRankDateFilter"
+		<div class="header">
+			<div class="selector bg-white" :class="{ 'selected' : selectedCustomer }">
+				<div class="line buttons">
+					<t-button
+						v-if="selectedCustomer"
+						theme="primary"
+						@click="clearCustomerSelection"
+					>排行</t-button>
+					<t-button class="customer" block theme="primary" variant="outline" @click="selectorVisible = true">
+						<template #icon>
+							<t-icon name="user-search" />
+						</template>
+						<span v-text="selectedCustomer ? selectedCustomer.name : '选择客户'" />
+					</t-button>
+					<t-button theme="primary" @click="toggleScanner">
+						<template #icon>
+							<t-icon name="scan" />
+						</template>
+						<span>扫码</span>
+					</t-button>
+				</div>
+				<div v-if="scannerVisible" class="line scanner-wrapper">
+					<code-scanner
+						visible
+						:status-text="scanStatus"
+						active-text="正在识别客户编码，请将二维码移入取景框"
+						@decode="handleDecodedText"
+						@status-change="handleScanStatusChange"
 					/>
-					<t-dropdown-item
-						v-model="rankRegistrationEventIdList"
-						:label="rankRegistrationEventFilterLabel"
-						:options="rankRegistrationEventOptions"
-						options-columns="2"
-						multiple
-						@change="reloadCustomerRegistrationRank"
-					/>
-				</t-dropdown-menu>
+				</div>
+				<div v-if="!selectedCustomer" class="line filter">
+					<t-dropdown-menu class="menu">
+						<t-dropdown-item
+							v-model="rankDateFilterType"
+							:label="rankDateFilterLabel"
+							:options="rankDateOptions"
+							@change="selectRankDateFilter"
+						/>
+						<t-dropdown-item
+							v-model="rankRegistrationEventIdList"
+							:label="rankRegistrationEventFilterLabel"
+							:options="rankRegistrationEventOptions"
+							options-columns="2"
+							multiple
+							@change="reloadCustomerRegistrationRank"
+						/>
+					</t-dropdown-menu>
+				</div>
 			</div>
 		</div>
 		<section v-if="selectedCustomer" class="summary">
@@ -66,7 +74,7 @@
 			<h2 v-text="item.title" />
 			<div :ref="element => setChartRef(item.id, element)" class="chart" />
 		</section>
-		<div v-if="!selectedCustomer" v-text="rankSummaryText"></div>
+		<div v-if="!selectedCustomer" class="rank-summary" v-text="rankSummaryText"></div>
 		<t-cell-group
 			v-if="!selectedCustomer && customerRegistrationRankList.length"
 			class="rank-list"
@@ -75,30 +83,34 @@
 			<t-cell
 				v-for="item in customerRegistrationRankList"
 				:key="item.customerId"
-				class="rank-item"
-				:title="item.customerName || '未知客户'"
+				class="item"
 				arrow
 				hover
 				@click="selectRankCustomer(item.customerId || '')"
 			>
 				<template #leftIcon>
-					<span class="rank-left">
-						<span class="rank-no" v-text="item.rank" />
+					<span class="left">
 						<t-image
 							v-if="getRankCustomerPhotoURL(item)"
 							:src="getRankCustomerPhotoURL(item)"
 							:alt="item.customerName || '客户头像'"
 							fit="cover"
-							class="rank-photo"
+							class="photo"
 						/>
-						<span v-else class="rank-photo fallback" v-text="getRankCustomerInitial(item)" />
+						<span v-else class="photo fallback" v-text="getRankCustomerInitial(item)" />
 					</span>
 				</template>
+				<template #title>
+					<t-tag theme="primary" v-text="`No.${item.rank}`" />
+					<span class="word-space" v-text="item.customerName || '未知客户'" />
+				</template>
 				<template #description>
-					<div v-text="getRankCustomerMeta(item)"></div>
-					<div class="rank-stat">
-						<strong v-text="`${item.totalRegistrationDays || 0} 天`" />
-						<small v-text="`${item.recentContinuousRegistrationDays || 0} 天连续`" />
+					<div>
+						<span v-text="`累计登记 ${item.totalRegistrationCount || 0} 次，`" />
+						<span v-text="`累计登记 ${item.totalRegistrationDays || 0} 天`" />
+					</div>
+					<div>
+						<span v-text="`最近 ${item.recentContinuousRegistrationDays || 0} 天连续登记`" />
 					</div>
 				</template>
 			</t-cell>
@@ -179,6 +191,7 @@ use([
 ]);
 
 const settingStore = useSettingStore();
+const router = useRouter();
 const route = useRoute();
 const chartRefs = new Map<string, HTMLElement>();
 const chartInstances = new Map<string, ECharts>();
@@ -423,6 +436,17 @@ async function handleCustomerSelected(id: string): Promise<void> {
 	await loadCustomerById(id);
 }
 
+async function clearCustomerSelection(): Promise<void> {
+	selectedCustomer.value = undefined;
+	selectedCustomerId.value = "";
+	customerCode.value = "";
+	monthRecords.value = [];
+
+	if (route.name !== "CustomerDataCharts" || Object.keys(route.query).length) {
+		await router.replace({name: "CustomerDataCharts"});
+	}
+}
+
 async function selectRankCustomer(id: string): Promise<void> {
 	await loadCustomerById(id);
 }
@@ -536,13 +560,6 @@ function getRecordRegistrationEventName(record?: RegistrationEventRecord): strin
 	return record.registrationEvent?.name || (record.registrationEventId ? registrationEventNameMap.value.get(record.registrationEventId) : "") || "未知事件";
 }
 
-function getRankCustomerMeta(item: CustomerRegistrationRankView): string {
-	const codeText = item.customerCode ? `编码 ${item.customerCode}` : "暂无编码";
-	const countText = `${item.totalRegistrationCount || 0} 次登记`;
-	const latestText = item.latestRegisteredAt ? `最近 ${formatDateTime(item.latestRegisteredAt)}` : "暂无最近登记";
-	return `${codeText}｜${countText}｜${latestText}`;
-}
-
 function getRankCustomerPhotoURL(item: CustomerRegistrationRankView): string {
 	if (!item.customerPhotoAttachmentId) {
 		return "";
@@ -761,52 +778,69 @@ function formatDateTime(value: number): string {
 	display: flex;
 	flex-direction: column;
 
-	.selector {
-		gap: .75rem;
+	.header {
 		top: var(--app-nav-height);
 		z-index: 10;
 		padding: 1rem 1rem .875rem 1rem;
-		display: flex;
 		position: sticky;
 		box-shadow: var(--td-shadow-1);
-		background: #f5f5f8;
-		flex-direction: column;
+		background: #F5F5F8;
 
-		.header {
-			gap: .75rem;
+		.selector {
+			border: 1px solid rgba(148, 163, 184, .18);
 			display: flex;
+			overflow: hidden;
+			border-radius: .35rem .35rem 1rem 1rem;
+			flex-direction: column;
 
-			.list-select {
-				flex: 1;
-				min-width: 0;
+			&.selected {
+				border: 1px solid transparent;
+				background: transparent;
+				border-radius: 0;
 			}
 
-			.scan-select {
-				flex: 0 0 3rem;
-				width: 3rem;
-			}
-		}
+			.line {
+				gap: .75rem;
+				display: flex;
 
-		.filter-line {
-			.filter-menu {
-				width: 100%;
-				overflow: hidden;
-				background: #fff;
-				border: 1px solid rgba(148, 163, 184, .18);
-				border-radius: .625rem;
+				&.buttons {
+					z-index: 1;
 
-				&:after {
-					display: none;
+					.customer {
+						flex: 1;
+						min-width: 0;
+					}
 				}
 
-				:deep(.t-dropdown-menu__item) {
-					min-width: 0;
+				&.scanner-wrapper {
+					margin: 1rem .5rem;
 				}
 
-				:deep(.t-dropdown-menu__title) {
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
+				&.filter {
+
+					.menu {
+						--td-spacer-1: 6px;
+
+						width: 100%;
+						overflow: hidden;
+						margin-top: -1rem;
+						padding-top: .8rem;
+						background: #fff;
+
+						&:after {
+							display: none;
+						}
+
+						:deep(.t-dropdown-menu__item) {
+							min-width: 0;
+						}
+
+						:deep(.t-dropdown-menu__title) {
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+						}
+					}
 				}
 			}
 		}
@@ -861,41 +895,14 @@ function formatDateTime(value: number): string {
 		margin: 0 1rem;
 	}
 
-	.rank-section {
-		gap: .75rem;
-		margin: 0 1rem;
-		display: flex;
-		padding: 1rem;
-		background: rgba(255, 255, 255, .92);
-		box-shadow: var(--td-shadow-1);
-		border-radius: .75rem;
-		flex-direction: column;
+	.rank-summary {
+		text-align: center;
+	}
 
-		.rank-header {
-			gap: .75rem;
-			display: flex;
-			align-items: flex-start;
-			justify-content: space-between;
+	.rank-list {
+		margin: 0;
 
-			h2 {
-				margin: 0;
-				color: #0f172a;
-				font-size: 1rem;
-				font-weight: 700;
-			}
-
-			p {
-				margin: .25rem 0 0 0;
-				color: #52607a;
-				font-size: .75rem;
-			}
-		}
-
-		.rank-list {
-			margin: 0;
-		}
-
-		.rank-item {
+		.item {
 			:deep(.t-cell__title) {
 				flex: 1 1 0;
 				min-width: 0;
@@ -908,69 +915,26 @@ function formatDateTime(value: number): string {
 				text-overflow: ellipsis;
 			}
 
-			:deep(.t-cell__right) {
-				min-width: 4rem;
-			}
-		}
-
-		.rank-left {
-			gap: .5rem;
-			display: flex;
-			align-items: center;
-		}
-
-		.rank-no {
-			width: 2rem;
-			color: #2563eb;
-			height: 2rem;
-			display: flex;
-			background: #dbeafe;
-			font-size: .875rem;
-			align-items: center;
-			font-weight: 700;
-			border-radius: 999px;
-			justify-content: center;
-		}
-
-		.rank-photo {
-			width: 2.75rem;
-			height: 2.75rem;
-			border-radius: .5rem;
-
-			&.fallback {
-				color: #2563eb;
+			.left {
+				gap: .5rem;
 				display: flex;
-				font-size: 1rem;
-				background: #dbeafe;
 				align-items: center;
-				font-weight: 700;
-				justify-content: center;
-			}
-		}
 
-		.rank-stat {
-			min-width: 0;
-			display: flex;
-			text-align: right;
-			flex-direction: column;
+				.photo {
+					width: 4.3rem;
+					height: 4.3rem;
+					border-radius: .5rem;
 
-			strong,
-			small {
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-
-			strong {
-				color: #0f172a;
-				font-size: .9375rem;
-				font-weight: 700;
-			}
-
-			small {
-				margin-top: .25rem;
-				color: #52607a;
-				font-size: .75rem;
+					&.fallback {
+						color: #2563eb;
+						display: flex;
+						font-size: 1rem;
+						background: #dbeafe;
+						align-items: center;
+						font-weight: 700;
+						justify-content: center;
+					}
+				}
 			}
 		}
 	}