From f9efbd109fc84543746af81c7ee6bab784b6e3cf Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Wed, 12 Aug 2026 22:27:16 +0800
Subject: [PATCH] add event record rank

---
 src/api/EventRecordAPI.ts               |   2 +-
 src/components/CustomerList.vue         |  16 -
 src/components/CustomerProfileCard.vue  |  12 -
 src/components/CustomerSelector.vue     |   7 -
 src/pages/customer/CustomerDetail.vue   |  19 -
 src/pages/customer/CustomerList.vue     |   8 -
 src/pages/event/EventRecordList.vue     |  17 +-
 src/pages/event/EventRecordRank.vue     | 653 ++++++++++++++++++++++++
 src/pages/store/StoreDataCharts.vue     |   2 +-
 src/pages/tabs/SettingTab.vue           |  17 +-
 src/router/routes/registrationRoutes.ts |  15 +
 src/styles/global.less                  |   6 +-
 src/types/EventRecord.ts                |   3 +
 13 files changed, 694 insertions(+), 83 deletions(-)
 create mode 100644 src/pages/event/EventRecordRank.vue

diff --git a/src/api/EventRecordAPI.ts b/src/api/EventRecordAPI.ts
index 8888e0d..17b1b6b 100644
--- a/src/api/EventRecordAPI.ts
+++ b/src/api/EventRecordAPI.ts
@@ -37,7 +37,7 @@ async function remove(id: string): Promise<void> {
 	});
 }
 
-async function eventRank(page: EventRecordRankPage): Promise<CustomerEventRankView> {
+async function eventRank(page: EventRecordRankPage): Promise<PageResult<CustomerEventRankView>> {
 	return await axios.post(`${BASE_URI}/rank`, withCurrentStoreId(page));
 }
 
diff --git a/src/components/CustomerList.vue b/src/components/CustomerList.vue
index d35b250..d18dfc1 100644
--- a/src/components/CustomerList.vue
+++ b/src/components/CustomerList.vue
@@ -112,17 +112,6 @@ function handleRemove(customer: Customer): void {
 	.avatar {
 		width: 3.5rem;
 		height: 3.5rem;
-		border-radius: .5rem;
-
-		&.fallback {
-			color: #2563eb;
-			display: flex;
-			font-size: 1.25rem;
-			background: #dbeafe;
-			align-items: center;
-			font-weight: 600;
-			justify-content: center;
-		}
 	}
 
 	.empty-block {
@@ -152,11 +141,6 @@ function handleRemove(customer: Customer): void {
 			color: #e2e8f0;
 			background: rgba(30, 41, 59, .9);
 		}
-
-		.avatar.fallback {
-			color: #93c5fd;
-			background: rgba(30, 64, 175, .32);
-		}
 	}
 }
 </style>
diff --git a/src/components/CustomerProfileCard.vue b/src/components/CustomerProfileCard.vue
index be347b9..8bdaf85 100644
--- a/src/components/CustomerProfileCard.vue
+++ b/src/components/CustomerProfileCard.vue
@@ -82,18 +82,6 @@ function openPhotoViewer(): void {
 	.avatar {
 		width: 4rem;
 		height: 4rem;
-		display: block;
-		border-radius: .875rem;
-
-		&.fallback {
-			color: #2563eb;
-			display: flex;
-			font-size: 1.5rem;
-			background: #dbeafe;
-			align-items: center;
-			font-weight: 600;
-			justify-content: center;
-		}
 	}
 
 	.content {
diff --git a/src/components/CustomerSelector.vue b/src/components/CustomerSelector.vue
index 8d71a50..a33bf40 100644
--- a/src/components/CustomerSelector.vue
+++ b/src/components/CustomerSelector.vue
@@ -273,13 +273,6 @@ onUnmounted(() => {
 		min-height: 0;
 		padding-bottom: env(safe-area-inset-bottom, 0);
 	}
-
-	.load-state {
-		padding: .75rem;
-		color: #52607a;
-		text-align: center;
-		font-size: .875rem;
-	}
 }
 
 :global(html.theme-dark) {
diff --git a/src/pages/customer/CustomerDetail.vue b/src/pages/customer/CustomerDetail.vue
index 1dce28d..67abb99 100644
--- a/src/pages/customer/CustomerDetail.vue
+++ b/src/pages/customer/CustomerDetail.vue
@@ -520,17 +520,6 @@ watch(() => route.params.id, loadCustomer);
 				.avatar {
 					width: 3.25rem;
 					height: 3.25rem;
-					border-radius: .875rem;
-
-					&.fallback {
-						color: #2563eb;
-						display: flex;
-						font-size: 1.125rem;
-						background: #dbeafe;
-						align-items: center;
-						font-weight: 600;
-						justify-content: center;
-					}
 				}
 			}
 		}
@@ -611,14 +600,6 @@ watch(() => route.params.id, loadCustomer);
 			color: #e2e8f0;
 			background: rgba(15, 23, 42, .96);
 		}
-
-		.avatar {
-
-			&.fallback {
-				color: #93c5fd;
-				background: rgba(30, 64, 175, .32);
-			}
-		}
 	}
 }
 </style>
diff --git a/src/pages/customer/CustomerList.vue b/src/pages/customer/CustomerList.vue
index 7c8d21d..da7dc88 100644
--- a/src/pages/customer/CustomerList.vue
+++ b/src/pages/customer/CustomerList.vue
@@ -315,14 +315,6 @@ async function doExport(): Promise<void> {
 				background: rgba(30, 41, 59, .9);
 				border-color: rgba(148, 163, 184, .16);
 			}
-
-			.avatar {
-
-				&.fallback {
-					color: #93c5fd;
-					background: rgba(30, 64, 175, .32);
-				}
-			}
 		}
 
 		.stats {
diff --git a/src/pages/event/EventRecordList.vue b/src/pages/event/EventRecordList.vue
index 6dd1d7c..861d4d3 100644
--- a/src/pages/event/EventRecordList.vue
+++ b/src/pages/event/EventRecordList.vue
@@ -74,9 +74,9 @@
 								:src="getRecordPhotoURL(item)"
 								:alt="getRecordEventName(item)"
 								fit="cover"
-								class="photo"
+								class="avatar"
 							/>
-							<div v-else class="photo fallback" v-text="getRecordCustomerInitial(item)" />
+							<div v-else class="avatar fallback" v-text="getRecordCustomerInitial(item)" />
 						</template>
 					</t-cell>
 					<template v-if="canDeleteRecord" #right>
@@ -666,20 +666,9 @@ onUnmounted(() => {
 					white-space: nowrap;
 				}
 
-				.photo {
+				.avatar {
 					width: 3.5rem;
 					height: 3.5rem;
-					border-radius: .5rem;
-
-					&.fallback {
-						color: #2563eb;
-						display: flex;
-						font-size: 1.25rem;
-						background: #dbeafe;
-						align-items: center;
-						font-weight: 600;
-						justify-content: center;
-					}
 				}
 			}
 
diff --git a/src/pages/event/EventRecordRank.vue b/src/pages/event/EventRecordRank.vue
new file mode 100644
index 0000000..67ec128
--- /dev/null
+++ b/src/pages/event/EventRecordRank.vue
@@ -0,0 +1,653 @@
+<template>
+	<div v-can="permissionCodes.stat.read" class="event-record-rank">
+		<div class="filters">
+			<t-dropdown-menu class="filter-menu">
+				<t-dropdown-item
+					v-model="rankType"
+					:label="rankTypeLabel"
+					:options="rankTypeOptions"
+					@change="selectRankType"
+				/>
+				<t-dropdown-item
+					v-model="dateFilterType"
+					:label="dateFilterLabel"
+					:options="dateOptions"
+					@change="selectDateFilter"
+				/>
+				<t-dropdown-item
+					v-model="eventFilter"
+					:label="eventFilterLabel"
+					options-columns="2"
+					:options="eventOptions"
+					multiple
+				/>
+			</t-dropdown-menu>
+		</div>
+		<t-cell-group v-if="isCustomRange" class="time-range" theme="card">
+			<t-cell
+				title="开始时间"
+				:note="dateRange[0] || '-'"
+				@click="startVisible = true"
+			/>
+			<t-cell
+				title="结束时间"
+				:note="dateRange[1] || '-'"
+				@click="endVisible = true"
+			/>
+		</t-cell-group>
+		<t-pull-down-refresh
+			class="list-wrapper"
+			v-model="isRefreshing"
+			:refresh-timeout="30000"
+			@refresh="reloadRanks"
+			@scrolltolower="loadRanks"
+		>
+			<t-cell-group
+				v-if="pageResult.list.length"
+				class="list"
+				theme="card"
+			>
+				<t-cell
+					class="item"
+					:class="{ 'in-top3': index < 3}"
+					v-for="(item, index) in pageResult.list"
+					:key="item.customerId"
+					arrow
+					@click="toCustomerDetail(item.customerId || '')"
+				>
+					<template #left-icon>
+						<t-image
+							v-if="getCustomerPhotoURL(item.customer)"
+							:src="getCustomerPhotoURL(item.customer)"
+							: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="{
+									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" :content="item.customer?.code" />
+						</div>
+					</template>
+					<template #description>
+						<div class="description">
+							<t-tag
+								size="small"
+								variant="outline"
+								:content="`累计天数 ${item.totalEventDays || 0}`"
+							/>
+							<t-tag
+								size="small"
+								variant="outline"
+								:content="`累计次数 ${item.totalEventCount || 0}`"
+							/>
+							<t-tag
+								size="small"
+								variant="outline"
+								:content="`连续天数 ${item.recentContinuousEventDays || 0}`"
+							/>
+						</div>
+					</template>
+				</t-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" />
+		</t-pull-down-refresh>
+	</div>
+	<t-popup v-model="startVisible" placement="bottom">
+		<t-date-time-picker
+			v-model="dateRange[0]"
+			:default-value="dateRange[0]"
+			format="YYYY-MM-DD HH:mm"
+			:mode="['date', 'minute']"
+			title="开始时间"
+			@confirm="startVisible = false"
+		/>
+	</t-popup>
+	<t-popup v-model="endVisible" placement="bottom">
+		<t-date-time-picker
+			v-model="dateRange[1]"
+			:default-value="dateRange[1]"
+			:mode="['date', 'minute']"
+			format="YYYY-MM-DD HH:mm"
+			title="结束时间"
+			@confirm="endVisible = false"
+		/>
+	</t-popup>
+</template>
+
+<script setup lang="ts">
+import { Toast, type DropdownValue } from "tdesign-mobile-vue";
+import { Time, type PageResult } from "timi-web";
+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 { permissionCodes } from "@/utils/permission";
+
+type DateFilterType = "all" | "today" | "yesterday" | "lastWeek" | "thisMonth" | "custom";
+
+defineOptions({
+	name: "EventRecordRank"
+});
+
+const pageSize = 20;
+const route = useRoute();
+const router = useRouter();
+const rankTypeOptions: Array<{ label: string; value: EventRecordRankType }> = [
+	{ label: "按登记天数", value: "TOTAL_DAYS" },
+	{ label: "按登记次数", value: "TOTAL_COUNT" },
+	{ label: "按连续天数", value: "CONTINUOUS_DAYS" }
+];
+const dateOptions: Array<{ label: string; value: DateFilterType }> = [
+	{ label: "全部时间", value: "all" },
+	{ label: "今天", value: "today" },
+	{ label: "昨天", value: "yesterday" },
+	{ label: "上周", value: "lastWeek" },
+	{ label: "本月", value: "thisMonth" },
+	{ label: "自定义范围", value: "custom" }
+];
+
+// ---------- 筛选 ----------
+
+const rankType = ref<EventRecordRankType>(parseRankType(route.query.rankType));
+const dateFilterType = ref<DateFilterType>(parseDateFilterType(route.query.dateType));
+const dateRange = ref(parseDateRange(dateFilterType.value));
+const eventFilter = ref<string[]>([]);
+const eventList = ref<EventItem[]>([]);
+const startVisible = ref(false);
+const endVisible = ref(false);
+let initialized = false;
+
+const isCustomRange = computed(() => dateFilterType.value === "custom");
+const rankTypeLabel = computed(() => rankTypeOptions.find(item => item.value === rankType.value)?.label || "按登记天数");
+const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "全部时间");
+const eventOptions = computed(() => eventList.value.map(item => ({
+	label: item.name || "未命名事件",
+	value: item.id || ""
+})).filter(item => item.value));
+const eventFilterLabel = computed(() => {
+	if (!eventFilter.value.length || eventFilter.value.length === eventList.value.length) {
+		return "全部事件";
+	}
+
+	return eventList.value
+		.filter(item => item.id && eventFilter.value.includes(item.id))
+		.map(item => item.name || "未命名事件")
+		.join("、");
+});
+const canLoadRank = computed(() => rankType.value !== "CONTINUOUS_DAYS" || eventFilter.value.length === 1);
+const emptyStateText = computed(() => {
+	if (isLoading.value) {
+		return "正在加载登记记录排行";
+	}
+	return canLoadRank.value ? "暂无登记记录排行" : "连续排行需要选择单个登记事件";
+});
+
+watch(eventFilter, async () => {
+	if (!initialized) {
+		return;
+	}
+	await replaceFilterQuery();
+	await reloadRanks();
+});
+
+watch(dateRange, async (value) => {
+	if (!initialized || dateFilterType.value !== "custom") {
+		return;
+	}
+
+	if (value[0] && value[1] && value[1] < value[0]) {
+		dateRange.value = [value[1], value[0]];
+		return;
+	}
+
+	await replaceFilterQuery();
+	await reloadRanks();
+}, { deep: true });
+
+// ---------- 列表分页 ----------
+
+const isRefreshing = ref(false);
+const isLoading = ref(false);
+const isNoMore = ref(false);
+const page = reactive<EventRecordRankPage>({
+	index: 0,
+	size: pageSize
+});
+const pageResult = reactive<PageResult<CustomerEventRankView>>({
+	total: 0,
+	list: []
+});
+let loadToken = 0;
+
+const loadStateText = computed(() => {
+	if (isLoading.value) {
+		return "正在加载更多";
+	}
+	return isNoMore.value ? "没有更多排行" : "上拉加载更多";
+});
+
+async function reloadRanks(): Promise<void> {
+	isRefreshing.value = true;
+	try {
+		page.index = 0;
+		pageResult.total = 0;
+		pageResult.list = [];
+		isNoMore.value = false;
+		await loadRanks();
+	} finally {
+		isRefreshing.value = false;
+	}
+}
+
+async function loadRanks(): Promise<void> {
+	if (isLoading.value || isNoMore.value) {
+		return;
+	}
+	if (!canLoadRank.value) {
+		pageResult.total = 0;
+		pageResult.list = [];
+		isNoMore.value = true;
+		return;
+	}
+	const token = loadToken + 1;
+	loadToken = token;
+	isLoading.value = true;
+	try {
+		const result = await EventRecordAPI.eventRank({
+			index: page.index,
+			size: page.size,
+			...buildRankReq()
+		});
+		if (token !== loadToken) {
+			return;
+		}
+		pageResult.list = pageResult.list.concat(result.list || []);
+		pageResult.total = result.total || 0;
+		page.index += 1;
+		isNoMore.value = pageResult.total <= pageResult.list.length || (result.list || []).length < page.size;
+	} catch (error) {
+		Toast.error(getErrorMessage(error, "登记记录排行加载失败"));
+	} finally {
+		if (token === loadToken) {
+			isLoading.value = false;
+		}
+	}
+}
+
+// ---------- 操作 ----------
+
+async function loadEvents(): Promise<void> {
+	eventList.value = await EventAPI.listValid();
+	const eventIdList = parseEventIdList(route.query.eventIds);
+	eventFilter.value = eventIdList.length
+		? eventIdList
+		: eventList.value.map(item => item.id).filter((item): item is string => Boolean(item));
+}
+
+async function selectRankType(value: DropdownValue): Promise<void> {
+	if (Array.isArray(value)) {
+		return;
+	}
+
+	rankType.value = parseRankType(value);
+	await replaceFilterQuery();
+	if (!canLoadRank.value) {
+		Toast.warning("连续排行需要选择单个登记事件");
+	}
+	await reloadRanks();
+}
+
+async function selectDateFilter(value: DropdownValue): Promise<void> {
+	if (Array.isArray(value)) {
+		return;
+	}
+
+	dateFilterType.value = parseDateFilterType(value);
+	if (dateFilterType.value !== "custom") {
+		dateRange.value = buildPresetRange(dateFilterType.value);
+		await replaceFilterQuery();
+		await reloadRanks();
+		return;
+	}
+
+	await replaceFilterQuery();
+}
+
+async function toCustomerDetail(customerId: string): Promise<void> {
+	if (!customerId) {
+		return;
+	}
+
+	await router.push(`/management/customers/${customerId}`);
+}
+
+// ---------- 格式化 ----------
+
+function getCustomerName(item: CustomerEventRankView): string {
+	return item.customer?.name || "未知客户";
+}
+
+function getCustomerInitial(item: CustomerEventRankView): string {
+	return getCustomerName(item).slice(0, 1);
+}
+
+function buildRankReq(): Omit<EventRecordRankPage, "index" | "size"> {
+	const [beginAt, endAt] = buildUnixRange();
+	const selectedAllEvent = rankType.value !== "CONTINUOUS_DAYS" && (!eventFilter.value.length || eventFilter.value.length === eventList.value.length);
+	return {
+		beginAt,
+		endAt,
+		rankType: rankType.value,
+		eventIdList: selectedAllEvent ? undefined : eventFilter.value
+	};
+}
+
+function getQueryText(key: string): string {
+	const value = route.query[key];
+	return Array.isArray(value) ? String(value[0] || "") : String(value || "");
+}
+
+function parseRankType(value: unknown): EventRecordRankType {
+	const text = Array.isArray(value) ? String(value[0] || "") : String(value || "");
+	return rankTypeOptions.some(item => item.value === text) ? text as EventRecordRankType : "TOTAL_DAYS";
+}
+
+function parseDateFilterType(value: unknown): DateFilterType {
+	const text = Array.isArray(value) ? String(value[0] || "") : String(value || "");
+	return dateOptions.some(item => item.value === text) ? text as DateFilterType : "all";
+}
+
+function parseDateRange(type: DateFilterType): [string, string] {
+	if (type !== "custom") {
+		return buildPresetRange(type);
+	}
+
+	return [getQueryText("beginAt"), getQueryText("endAt")];
+}
+
+function parseEventIdList(value: unknown): string[] {
+	const text = Array.isArray(value) ? String(value[0] || "") : String(value || "");
+	return text.split(",").map(item => item.trim()).filter(Boolean);
+}
+
+function buildFilterQuery(): Record<string, string> {
+	return {
+		rankType: rankType.value,
+		dateType: dateFilterType.value,
+		beginAt: dateRange.value[0] || "",
+		endAt: dateRange.value[1] || "",
+		eventIds: eventFilter.value.join(",")
+	};
+}
+
+async function replaceFilterQuery(): Promise<void> {
+	await router.replace({
+		name: "EventRecordRank",
+		query: buildFilterQuery()
+	});
+}
+
+function buildPresetRange(type: Exclude<DateFilterType, "custom">): [string, string] {
+	if (type === "all") {
+		return ["", ""];
+	}
+	if (type === "lastWeek") {
+		const current = new Date();
+		current.setHours(0, 0, 0, 0);
+		const day = current.getDay() || 7;
+		const thisWeekMonday = new Date(current);
+		thisWeekMonday.setDate(current.getDate() - day + 1);
+		const lastWeekMonday = new Date(thisWeekMonday);
+		lastWeekMonday.setDate(thisWeekMonday.getDate() - 7);
+		const lastWeekSunday = new Date(thisWeekMonday);
+		lastWeekSunday.setDate(thisWeekMonday.getDate() - 1);
+		return [`${Time.formatDate(lastWeekMonday)} 00:00`, `${Time.formatDate(lastWeekSunday)} 23:59`];
+	}
+	if (type === "thisMonth") {
+		const current = new Date();
+		const begin = new Date(current.getFullYear(), current.getMonth(), 1);
+		return [`${Time.formatDate(begin)} 00:00`, `${Time.formatDate(current)} 23:59`];
+	}
+
+	const offsetMap: Record<Exclude<DateFilterType, "all" | "custom" | "lastWeek" | "thisMonth">, number> = {
+		today: 0,
+		yesterday: 1
+	};
+	const date = new Date();
+	date.setHours(0, 0, 0, 0);
+	date.setDate(date.getDate() - offsetMap[type]);
+	return [`${Time.formatDate(date)} 00:00`, `${Time.formatDate(date)} 23:59`];
+}
+
+function buildUnixRange(): [number | undefined, number | undefined] {
+	if (dateFilterType.value === "all") {
+		return [undefined, undefined];
+	}
+	return [
+		Time.toTimestamp(parseDateTime(dateRange.value[0], false)),
+		Time.toTimestamp(parseDateTime(dateRange.value[1], true))
+	];
+}
+
+function parseDateTime(value: string, isEnd: boolean): Date {
+	if (!value) {
+		return isEnd ? new Date() : new Date(0);
+	}
+	const [dateText, timeText = isEnd ? "23:59" : "00:00"] = value.split(" ");
+	const [year, month, day] = dateText.split("-").map(Number);
+	const [hour, minute] = timeText.split(":").map(Number);
+	return new Date(year, month - 1, day, hour || 0, minute || 0, isEnd ? 59 : 0, 0);
+}
+
+onMounted(async () => {
+	await loadEvents();
+	initialized = true;
+	await reloadRanks();
+});
+</script>
+
+<style scoped lang="less">
+.event-record-rank {
+	gap: .75rem;
+	display: flex;
+	padding: calc(var(--app-nav-height)) 0 6rem 0;
+	flex-direction: column;
+
+	.filters {
+		top: var(--app-nav-height);
+		z-index: 5;
+		position: sticky;
+
+		.filter-menu {
+			box-shadow: 0 .25rem .75rem rgb(15 23 42 / 6%);
+		}
+	}
+
+	.time-range {
+		margin: 0 .75rem;
+	}
+
+	.list-wrapper {
+		min-height: 70vh;
+
+		.list {
+
+			.item {
+
+				&.in-top3 {
+
+					.title {
+
+						.name {
+							font-size: 1rem;
+							font-weight: 600;
+						}
+					}
+				}
+
+				.avatar {
+					width: 3.25rem;
+					height: 3.25rem;
+				}
+
+				.title {
+					flex: 1 1 auto;
+					display: flex;
+					min-width: 0;
+					justify-content: space-between;
+
+					.left {
+						gap: .5rem;
+						display: flex;
+
+						.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;
+
+							&.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;
+						}
+					}
+				}
+
+				.description {
+					gap: .5rem;
+					display: flex;
+					font-size: .6875rem;
+				}
+
+				.stats {
+					min-width: 5.25rem;
+					text-align: right;
+
+					.primary {
+						color: #0F766E;
+						font-size: 1.5rem;
+						font-weight: 700;
+						line-height: 1.1;
+					}
+
+					.primary-label {
+						color: #475569;
+						font-size: .75rem;
+						margin-top: .25rem;
+					}
+
+					.sub {
+						color: #94A3B8;
+						font-size: .6875rem;
+						margin-top: .375rem;
+						white-space: nowrap;
+					}
+				}
+			}
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.event-record-rank {
+		.summary {
+			color: #94A3B8;
+		}
+
+		.list {
+			.item {
+				background: #182231;
+				box-shadow: none;
+
+				.rank {
+					color: #CBD5E1;
+					background: #243244;
+
+					&.top1 {
+						color: #FACC15;
+						background: #3F3415;
+					}
+
+					&.top2 {
+						color: #E2E8F0;
+						background: #334155;
+					}
+
+					&.top3 {
+						color: #FDBA74;
+						background: #3F2A1B;
+					}
+				}
+
+				.main {
+					.name {
+						color: #E2E8F0;
+					}
+
+					.code,
+					.latest {
+						color: #94A3B8;
+					}
+				}
+
+				.stats {
+					.primary {
+						color: #2DD4BF;
+					}
+
+					.primary-label {
+						color: #CBD5E1;
+					}
+
+					.sub {
+						color: #94A3B8;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/pages/store/StoreDataCharts.vue b/src/pages/store/StoreDataCharts.vue
index 55d9daa..09efab8 100644
--- a/src/pages/store/StoreDataCharts.vue
+++ b/src/pages/store/StoreDataCharts.vue
@@ -6,7 +6,7 @@
 		<store-customer-growth-chart :date-text-list="dateTextList" />
 		<store-event-record-trend-chart :date-text-list="dateTextList" />
 		<store-event-structure-chart :date-text-list="dateTextList" />
-		<store-customer-gender-chart :date-text-list="dateTextList" />
+		<store-customer-gender-chart />
 	</div>
 </template>
 
diff --git a/src/pages/tabs/SettingTab.vue b/src/pages/tabs/SettingTab.vue
index 5a17add..1d8c44e 100644
--- a/src/pages/tabs/SettingTab.vue
+++ b/src/pages/tabs/SettingTab.vue
@@ -99,6 +99,17 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 				title: "客户管理",
 				visible: userStore.hasPermissions(permissionCodes.customer.read)
 			},
+			{
+				icon: "usergroup",
+				path: "/management/customer-data-charts",
+				title: "客户统计数据",
+				visible: userStore.hasPermissions(permissionCodes.stat.read)
+			}
+		]
+	},
+	{
+		title: "登记",
+		items: [
 			{
 				icon: "task",
 				path: "/management/registration-events",
@@ -112,9 +123,9 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 				visible: userStore.hasPermissions(permissionCodes.eventRecord.read)
 			},
 			{
-				icon: "usergroup",
-				path: "/management/customer-data-charts",
-				title: "客户统计数据",
+				icon: "chart",
+				path: "/management/registration-event-record-rank",
+				title: "登记记录排行",
 				visible: userStore.hasPermissions(permissionCodes.stat.read)
 			}
 		]
diff --git a/src/router/routes/registrationRoutes.ts b/src/router/routes/registrationRoutes.ts
index 7920136..763daae 100644
--- a/src/router/routes/registrationRoutes.ts
+++ b/src/router/routes/registrationRoutes.ts
@@ -5,6 +5,7 @@ import EventSort from "@/pages/event/EventSort.vue";
 import EventRecordDetail from "@/pages/event/EventRecordDetail.vue";
 import EventRecordEdit from "@/pages/event/EventRecordEdit.vue";
 import EventRecordList from "@/pages/event/EventRecordList.vue";
+import EventRecordRank from "@/pages/event/EventRecordRank.vue";
 
 const registrationRoutes: RouteRecordRaw[] = [
 	{
@@ -77,6 +78,20 @@ const registrationRoutes: RouteRecordRaw[] = [
 			darkBodyBackground: "#10161f"
 		}
 	},
+	{
+		path: "/management/registration-event-record-rank",
+		name: "EventRecordRank",
+		component: EventRecordRank,
+		meta: {
+			depth: 3,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "登记记录排行",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
+	},
 	{
 		path: "/management/registration-event-records/create",
 		name: "EventRecordCreate",
diff --git a/src/styles/global.less b/src/styles/global.less
index c93db1a..2d97f3a 100644
--- a/src/styles/global.less
+++ b/src/styles/global.less
@@ -47,12 +47,14 @@ html.theme-dark body {
 
 .avatar {
 	flex: none;
+	display: block;
+	border-radius: .875rem;
 
 	&.fallback {
-		color: #2563eb;
+		color: #2563EB;
 		display: flex;
 		font-size: 1.25rem;
-		background: #dbeafe;
+		background: #DBEAFE;
 		align-items: center;
 		font-weight: 600;
 		justify-content: center;
diff --git a/src/types/EventRecord.ts b/src/types/EventRecord.ts
index ad5fce5..b9240fd 100644
--- a/src/types/EventRecord.ts
+++ b/src/types/EventRecord.ts
@@ -42,10 +42,13 @@ export type EventRecordRankPage = {
 	storeId?: string;
 	customerId?: string;
 	eventIdList?: string[];
+	rankType?: EventRecordRankType;
 	beginAt?: number;
 	endAt?: number;
 } & BasePage;
 
+export type EventRecordRankType = "TOTAL_DAYS" | "TOTAL_COUNT" | "CONTINUOUS_DAYS";
+
 export type CustomerEventRankView = {
 	rank?: number;
 	customerId?: string;