update style

src/pages/event/EventRecordList.vue

@@ -26,30 +26,30 @@
 				</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"
 		>
+			<div class="list-wrapper">
+				<t-cell-group class="summary" theme="card">
+					<t-cell
+						title="开始时间"
+						:note="dateRange[0] || '-'"
+						arrow
+						@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"
@@ -94,6 +94,7 @@
 				</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,10 +668,26 @@ onUnmounted(() => {
 		}
 	}
 
+	.list-wrapper {
+		gap: 1rem;
+		display: flex;
+		flex-direction: column;
+
 		.summary {
-		color: #52607a;
+			overflow: hidden;
-		font-size: .8125rem;
+
-		text-align: center;
+			:deep(.t-cell__title) {
+				flex: 0 0 4.5rem;
+			}
+
+			:deep(.t-cell__note) {
+				flex: 1 1 0;
+				min-width: 0;
+				overflow: hidden;
+				text-align: right;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
 		}
 
 		.record-list {
@@ -707,6 +734,7 @@ onUnmounted(() => {
 			}
 		}
 	}
+}
 
 .export {
 	left: 1rem;