From e4d02a714f033fe7486dc69cdc973fc24d1f2f48 Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Fri, 14 Aug 2026 21:52:08 +0800
Subject: [PATCH] update style

---
 src/pages/event/EventRecordList.vue | 250 ++++++++++++++++------------
 1 file changed, 139 insertions(+), 111 deletions(-)

diff --git a/src/pages/event/EventRecordList.vue b/src/pages/event/EventRecordList.vue
index 873a6cf..ed9501f 100644
--- a/src/pages/event/EventRecordList.vue
+++ b/src/pages/event/EventRecordList.vue
@@ -26,74 +26,75 @@
 				</t-dropdown-menu>
 			</div>
 		</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>
-		<div class="summary">
-			<div v-text="summaryText" />
-			<div v-text="summaryBehaviorText" />
-			<div v-text="summaryTotalText" />
-			<div v-if="summaryNumberValueText" v-text="summaryNumberValueText" />
-		</div>
 		<t-pull-down-refresh
 			v-model="isRefreshing"
 			:refresh-timeout="30000"
 			@refresh="reloadRecords"
 			@scrolltolower="loadRecords"
 		>
-			<t-cell-group
-				v-if="pageResult.list.length"
-				class="record-list"
-				theme="card"
-			>
-				<t-swipe-cell
-					v-for="item in pageResult.list"
-					:key="item.id"
-					class="item"
-				>
+			<div class="list-wrapper">
+				<t-cell-group class="summary" theme="card">
 					<t-cell
-						class="cell"
-						:title="getRecordEventName(item)"
-						:description="getRecordCustomerName(item)"
-						:note="getRecordRegisteredAt(item)"
+						title="开始时间"
+						:note="dateRange[0] || '-'"
 						arrow
-						hover
-						@click="toDetail(item.id || '')"
+						@click="startVisible = true"
+					/>
+					<t-cell
+						title="结束时间"
+						:note="dateRange[1] || '-'"
+						arrow
+						@click="endVisible = true"
+					/>
+					<t-cell title="事件" :note="eventFilterLabel" />
+					<t-cell title="数据量" :note="summaryTotalText" />
+					<t-cell v-if="summaryNumberValueText" title="数值合计" :note="summaryNumberValueText" />
+				</t-cell-group>
+				<t-cell-group
+					v-if="pageResult.list.length"
+					class="record-list"
+					theme="card"
+				>
+					<t-swipe-cell
+						v-for="item in pageResult.list"
+						:key="item.id"
+						class="item"
 					>
-						<template #leftIcon>
-							<t-image
-								v-if="getRecordPhotoURL(item)"
-								:src="getRecordPhotoURL(item)"
-								:alt="getRecordEventName(item)"
-								fit="cover"
-								class="avatar"
-							/>
-							<div v-else class="avatar fallback" v-text="getRecordCustomerInitial(item)" />
-						</template>
-					</t-cell>
-					<template v-if="canDeleteRecord" #right>
-						<t-button
-							class="delete"
-							theme="danger"
-							:loading="isDeleting && deletingId === item.id"
-							@click.stop="confirmRemoveRecord(item)"
+						<t-cell
+							class="cell"
+							:title="getRecordEventName(item)"
+							:description="getRecordCustomerName(item)"
+							:note="getRecordRegisteredAt(item)"
+							arrow
+							hover
+							@click="toDetail(item.id || '')"
 						>
-							删除
-						</t-button>
-					</template>
-				</t-swipe-cell>
-			</t-cell-group>
-			<div v-else class="load-state" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" />
-			<div v-if="pageResult.list.length" class="load-state" v-text="loadStateText" />
+							<template #leftIcon>
+								<t-image
+									v-if="getRecordPhotoURL(item)"
+									:src="getRecordPhotoURL(item)"
+									:alt="getRecordEventName(item)"
+									fit="cover"
+									class="avatar"
+								/>
+								<div v-else class="avatar fallback" v-text="getRecordCustomerInitial(item)" />
+							</template>
+						</t-cell>
+						<template v-if="canDeleteRecord" #right>
+							<t-button
+								class="delete"
+								theme="danger"
+								:loading="isDeleting && deletingId === item.id"
+								@click.stop="confirmRemoveRecord(item)"
+							>
+								删除
+							</t-button>
+						</template>
+					</t-swipe-cell>
+				</t-cell-group>
+				<div v-else class="load-state" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" />
+				<div v-if="pageResult.list.length" class="load-state" v-text="loadStateText" />
+			</div>
 		</t-pull-down-refresh>
 	</div>
 	<t-button
@@ -115,7 +116,7 @@
 			:mode="['date', 'minute']"
 			title="开始时间"
 			v-model="dateRange[0]"
-			@confirm="startVisible = false"
+			@confirm="confirmStartTime"
 		/>
 	</t-popup>
 	<t-popup v-model="endVisible" placement="bottom">
@@ -125,7 +126,7 @@
 			format="YYYY-MM-DD HH:mm"
 			title="结束时间"
 			v-model="dateRange[1]"
-			@confirm="endVisible = false"
+			@confirm="confirmEndTime"
 		/>
 	</t-popup>
 </template>
@@ -177,7 +178,6 @@ let keywordTimer: number | undefined;
 let initialized = false;
 
 const canCreateRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.create));
-const isCustomRange = computed(() => dateFilterType.value === "custom");
 const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "今天");
 const actionOptions = computed(() => eventList.value.map(item => ({
 	label: item.name || "未命名事件",
@@ -193,7 +193,6 @@ const eventFilterLabel = computed(() => {
 		.map(item => item.name || "未命名事件")
 		.join("、");
 });
-const summaryBehaviorText = computed(() => `事件：${eventFilterLabel.value}`);
 const selectedNumberEvent = computed(() => {
 	if (actionFilter.value.length !== 1) {
 		return undefined;
@@ -202,14 +201,6 @@ const selectedNumberEvent = computed(() => {
 	return event?.valueType === "NUMBER" ? event : undefined;
 });
 const canDeleteRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.delete));
-const summaryText = computed(() => {
-	if (!isCustomRange.value) {
-		const current = dateOptions.find(item => item.value === dateFilterType.value);
-		return `范围：${current?.label || "今天"}｜${dateRange.value[0] || "不限"}`;
-	}
-
-	return `范围：${dateRange.value[0] || "-"} ~ ${dateRange.value[1] || "-"}`;
-});
 
 watch(keyword, () => {
 	if (!initialized) {
@@ -265,7 +256,7 @@ const summaryNumberValueText = computed(() => {
 	if (!selectedNumberEvent.value || pageResult.numberValueTotal === undefined || pageResult.numberValueTotal === null) {
 		return "";
 	}
-	return `数值合计：${formatEventNumberValue(selectedNumberEvent.value, pageResult.numberValueTotal)}`;
+	return `${formatEventNumberValue(selectedNumberEvent.value, pageResult.numberValueTotal)}`;
 });
 const loadStateText = computed(() => {
 	if (isLoading.value) {
@@ -345,6 +336,26 @@ async function selectDateFilter(type: DropdownValue): Promise<void> {
 	}
 }
 
+async function confirmStartTime(): Promise<void> {
+	startVisible.value = false;
+	await confirmCustomRange();
+}
+
+async function confirmEndTime(): Promise<void> {
+	endVisible.value = false;
+	await confirmCustomRange();
+}
+
+async function confirmCustomRange(): Promise<void> {
+	if (dateFilterType.value === "custom") {
+		return;
+	}
+
+	dateFilterType.value = "custom";
+	await replaceFilterQuery();
+	await reloadRecords();
+}
+
 async function exportExcel(): Promise<void> {
 	if (isExporting.value) {
 		return;
@@ -657,52 +668,69 @@ onUnmounted(() => {
 		}
 	}
 
-	.summary {
-		color: #52607a;
-		font-size: .8125rem;
-		text-align: center;
-	}
+	.list-wrapper {
+		gap: 1rem;
+		display: flex;
+		flex-direction: column;
 
-	.record-list {
+		.summary {
+			overflow: hidden;
 
-		.item {
-
-			&:last-child {
-
-				:deep(.t-cell:after) {
-					display: none;
-				}
+			:deep(.t-cell__title) {
+				flex: 0 0 4.5rem;
 			}
 
-			.cell {
-				padding: .5rem;
-
-				:deep(.t-cell__title) {
-					flex: 1 1 0;
-					min-width: 0;
-				}
-
-				:deep(.t-cell__title-text) {
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-
-				:deep(.t-cell__note) {
-					flex: 0 0 auto;
-					white-space: nowrap;
-				}
-
-				.avatar {
-					width: 3.5rem;
-					height: 3.5rem;
-				}
+			:deep(.t-cell__note) {
+				flex: 1 1 0;
+				min-width: 0;
+				overflow: hidden;
+				text-align: right;
+				text-overflow: ellipsis;
+				white-space: nowrap;
 			}
+		}
 
-			.delete {
-				height: 100%;
-				padding: 0 1rem;
-				border-radius: 0;
+		.record-list {
+
+			.item {
+
+				&:last-child {
+
+					:deep(.t-cell:after) {
+						display: none;
+					}
+				}
+
+				.cell {
+					padding: .5rem;
+
+					:deep(.t-cell__title) {
+						flex: 1 1 0;
+						min-width: 0;
+					}
+
+					:deep(.t-cell__title-text) {
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+					}
+
+					:deep(.t-cell__note) {
+						flex: 0 0 auto;
+						white-space: nowrap;
+					}
+
+					.avatar {
+						width: 3.5rem;
+						height: 3.5rem;
+					}
+				}
+
+				.delete {
+					height: 100%;
+					padding: 0 1rem;
+					border-radius: 0;
+				}
 			}
 		}
 	}