fix customer rank style

src/pages/management/CustomerDataCharts.vue

@@ -1,20 +1,27 @@
 <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">
+			<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 class="scan-select" theme="primary" @click="toggleScanner">
+					<t-button theme="primary" @click="toggleScanner">
 						<template #icon>
 							<t-icon name="scan" />
 						</template>
+						<span>扫码</span>
 					</t-button>
 				</div>
-			<div v-if="scannerVisible" class="scanner-wrapper">
+				<div v-if="scannerVisible" class="line scanner-wrapper">
 					<code-scanner
 						visible
 						:status-text="scanStatus"
@@ -23,8 +30,8 @@
 						@status-change="handleScanStatusChange"
 					/>
 				</div>
-			<div v-if="!selectedCustomer" class="filter-line">
+				<div v-if="!selectedCustomer" class="line filter">
-				<t-dropdown-menu class="filter-menu">
+					<t-dropdown-menu class="menu">
 						<t-dropdown-item
 							v-model="rankDateFilterType"
 							:label="rankDateFilterLabel"
@@ -42,6 +49,7 @@
 					</t-dropdown-menu>
 				</div>
 			</div>
+		</div>
 		<section v-if="selectedCustomer" class="summary">
 			<div v-for="item in summaryList" :key="item.label" class="summary-item">
 				<span v-text="item.label" />
@@ -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"
+				class="item"
-				:title="item.customerName || '未知客户'"
 				arrow
 				hover
 				@click="selectRankCustomer(item.customerId || '')"
 			>
 				<template #leftIcon>
-					<span class="rank-left">
+					<span class="left">
-						<span class="rank-no" v-text="item.rank" />
 						<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>
-					<div class="rank-stat">
+						<span v-text="`累计登记 ${item.totalRegistrationCount || 0} 次，`" />
-						<strong v-text="`${item.totalRegistrationDays || 0} 天`" />
+						<span v-text="`累计登记 ${item.totalRegistrationDays || 0} 天`" />
-						<small v-text="`${item.recentContinuousRegistrationDays || 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,39 +778,54 @@ function formatDateTime(value: number): string {
 	display: flex;
 	flex-direction: column;
 
-	.selector {
+	.header {
-		gap: .75rem;
 		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;
+		background: #F5F5F8;
+
+		.selector {
+			border: 1px solid rgba(148, 163, 184, .18);
+			display: flex;
+			overflow: hidden;
+			border-radius: .35rem .35rem 1rem 1rem;
 			flex-direction: column;
 
-		.header {
+			&.selected {
+				border: 1px solid transparent;
+				background: transparent;
+				border-radius: 0;
+			}
+
+			.line {
 				gap: .75rem;
 				display: flex;
 
-			.list-select {
+				&.buttons {
+					z-index: 1;
+
+					.customer {
 						flex: 1;
 						min-width: 0;
 					}
-
-			.scan-select {
-				flex: 0 0 3rem;
-				width: 3rem;
-			}
 				}
 
-		.filter-line {
+				&.scanner-wrapper {
-			.filter-menu {
+					margin: 1rem .5rem;
+				}
+
+				&.filter {
+
+					.menu {
+						--td-spacer-1: 6px;
+
 						width: 100%;
 						overflow: hidden;
+						margin-top: -1rem;
+						padding-top: .8rem;
 						background: #fff;
-				border: 1px solid rgba(148, 163, 184, .18);
-				border-radius: .625rem;
 
 						&:after {
 							display: none;
@@ -811,6 +843,8 @@ function formatDateTime(value: number): string {
 					}
 				}
 			}
+		}
+	}
 
 	.summary {
 		gap: .75rem;
@@ -861,41 +895,14 @@ function formatDateTime(value: number): string {
 		margin: 0 1rem;
 	}
 
-	.rank-section {
+	.rank-summary {
-		gap: .75rem;
+		text-align: center;
-		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-header {
-			gap: .75rem;
-			display: flex;
-			align-items: flex-start;
-			justify-content: space-between;
-
-			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,33 +915,14 @@ function formatDateTime(value: number): string {
 				text-overflow: ellipsis;
 			}
 
-			:deep(.t-cell__right) {
+			.left {
-				min-width: 4rem;
-			}
-		}
-
-		.rank-left {
 				gap: .5rem;
 				display: flex;
 				align-items: center;
-		}
 
-		.rank-no {
+				.photo {
-			width: 2rem;
+					width: 4.3rem;
-			color: #2563eb;
+					height: 4.3rem;
-			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 {
@@ -947,30 +935,6 @@ function formatDateTime(value: number): string {
 						justify-content: center;
 					}
 				}
-
-		.rank-stat {
-			min-width: 0;
-			display: flex;
-			text-align: right;
-			flex-direction: column;
-
-			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;
 			}
 		}
 	}