From 3b20437f37ee620d54884fa08e72735b354b477c Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Tue, 1 Sep 2026 16:51:20 +0800
Subject: [PATCH] fix PackageConfigList.vue style

---
 src/pages/event/EventRecordList.vue     |  52 ++++-----
 src/pages/package/PackageConfigList.vue | 136 +++++++++++++++---------
 2 files changed, 111 insertions(+), 77 deletions(-)

diff --git a/src/pages/event/EventRecordList.vue b/src/pages/event/EventRecordList.vue
index b7cc764..3e4c0ce 100644
--- a/src/pages/event/EventRecordList.vue
+++ b/src/pages/event/EventRecordList.vue
@@ -46,32 +46,32 @@
 			@scrolltolower="loadRecords"
 		>
 			<div class="list-wrapper">
-					<t-cell-group v-entrance-transition class="summary" theme="card">
-						<t-cell
-							title="开始时间"
-							:note="dateRange[0] || '-'"
-							arrow
-							@click="openStartTime"
-						/>
-						<t-cell
-							title="结束时间"
-							:note="dateRange[1] || '-'"
-							arrow
-							@click="openEndTime"
-						/>
-						<t-cell title="事件" :note="eventFilterLabel" />
-						<t-cell v-if="optionFilterLabel !== '全部选项'" title="选项" :note="optionFilterLabel" />
-						<t-cell title="数据量" :note="`共 ${pageResult.total} 条记录`" />
-						<t-cell v-if="summaryNumberValueText" title="数值合计" :note="summaryNumberValueText" />
-					</t-cell-group>
-					<t-cell-group v-if="hasSelectedOption && optionStatList.length" title="选项统计" class="option-stat" theme="card">
-						<t-cell
-							v-for="item in optionStatList"
-							:key="`${item.groupId}-${item.optionId}`"
-							:title="`${item.groupName || '选项组'}：${item.optionLabel || '未命名选项'}`"
-							:note="`${item.recordCount || 0} 条`"
-						/>
-					</t-cell-group>
+				<t-cell-group v-entrance-transition class="summary" theme="card">
+					<t-cell
+						title="开始时间"
+						:note="dateRange[0] || '-'"
+						arrow
+						@click="openStartTime"
+					/>
+					<t-cell
+						title="结束时间"
+						:note="dateRange[1] || '-'"
+						arrow
+						@click="openEndTime"
+					/>
+					<t-cell title="事件" :note="eventFilterLabel" />
+					<t-cell v-if="optionFilterLabel !== '全部选项'" title="选项" :note="optionFilterLabel" />
+					<t-cell title="数据量" :note="`共 ${pageResult.total} 条记录`" />
+					<t-cell v-if="summaryNumberValueText" title="数值合计" :note="summaryNumberValueText" />
+				</t-cell-group>
+				<t-cell-group v-if="hasSelectedOption && optionStatList.length" title="选项统计" class="option-stat" theme="card">
+					<t-cell
+						v-for="item in optionStatList"
+						:key="`${item.groupId}-${item.optionId}`"
+						:title="`${item.groupName || '选项组'}：${item.optionLabel || '未命名选项'}`"
+						:note="`${item.recordCount || 0} 条`"
+					/>
+				</t-cell-group>
 				<t-cell-group
 					v-if="pageResult.list.length"
 					class="record-list"
diff --git a/src/pages/package/PackageConfigList.vue b/src/pages/package/PackageConfigList.vue
index 03f14d8..3f10fcc 100644
--- a/src/pages/package/PackageConfigList.vue
+++ b/src/pages/package/PackageConfigList.vue
@@ -7,37 +7,53 @@
 				borderless
 				clearable
 				placeholder="搜索套餐名称或说明"
-				@enter="reload"
 			/>
-			<t-button theme="primary" size="small" @click="reload">搜索</t-button>
+			<t-dropdown-menu class="status">
+				<t-dropdown-item
+					v-model="status"
+					label="状态"
+					:options="statusOptions"
+					@change="selectStatus"
+				/>
+			</t-dropdown-menu>
 		</div>
-		<t-dropdown-menu>
-			<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
-		</t-dropdown-menu>
-		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore">
-			<t-cell-group v-if="configList.length" theme="card" class="list">
-				<t-swipe-cell v-for="(item, index) in configList" :key="item.id" v-entrance-transition="index * 30">
-					<t-cell class="item" :arrow="!!item.id" :hover="!!item.id" @click="toDetail(item)">
+		<t-pull-down-refresh
+			v-model="isRefreshing"
+			:refresh-timeout="30000"
+			@refresh="reload"
+			@scrolltolower="loadMore"
+		>
+			<t-cell-group
+				v-if="configList.length"
+				class="list fix-last-cell-line"
+				theme="card"
+			>
+				<t-swipe-cell
+					class="item"
+					v-for="(item, index) in configList"
+					:key="item.id"
+					v-entrance-transition="index * 30"
+				>
+					<t-cell :arrow="!!item.id" :hover="!!item.id" @click="toDetail(item)">
 						<template #title>
-							<div class="title-row">
+							<div class="title">
 								<strong v-text="item.name || '未命名套餐'" />
 								<t-tag :content="getPackageConfigStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
 							</div>
 						</template>
+						<template #note>
+							<span class="price orange" v-text="formatPackageAmount(item.standardAmount)" />
+						</template>
 						<template #description>
-							<div class="description">
-								<span v-text="formatPackageAmount(item.standardAmount)" />
-								<span v-text="`${item.itemList?.length || 0} 项权益`" />
-								<span v-text="formatValidity(item)" />
-							</div>
+							<span v-text="`${item.itemList?.length || 0} 项权益`" />
 						</template>
 					</t-cell>
 					<template v-if="canDelete && item.id" #right>
-						<t-button class="delete" theme="danger" @click.stop="confirmRemove(item)">删除</t-button>
+						<t-button class="swipe-cell-button" theme="danger" @click.stop="confirmRemove(item)">删除</t-button>
 					</template>
 				</t-swipe-cell>
 			</t-cell-group>
-			<div v-else class="empty" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" />
+			<div v-else class="center-tips" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" />
 			<div class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
@@ -46,7 +62,7 @@
 
 <script setup lang="ts">
 import { DialogPlugin, type DropdownValue } from "tdesign-mobile-vue";
-import { Time } from "timi-web";
+import { Time, Toolkit } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import PackageAPI from "@/api/PackageAPI";
 import type { GaoPackageConfig, PackageConfigStatus } from "@/types/Package";
@@ -130,6 +146,18 @@ async function selectStatus(value: DropdownValue): Promise<void> {
 	await reload();
 }
 
+const reloadByKeyword = Toolkit.debounce(async () => {
+	try {
+		await reload();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "套餐配置加载失败"));
+	}
+}, false);
+
+watch(keyword, () => {
+	reloadByKeyword();
+});
+
 async function toCreate(): Promise<void> {
 	await router.push("/management/package-configs/create");
 }
@@ -144,12 +172,6 @@ function getStatusTheme(statusValue?: PackageConfigStatus): "success" | "warning
 	return statusValue === "ACTIVE" ? "success" : statusValue === "INACTIVE" ? "warning" : "default";
 }
 
-function formatValidity(item: GaoPackageConfig): string {
-	const begin = item.beginAt ? Time.toDateTime(item.beginAt) : "不限起始";
-	const end = item.endAt ? Time.toDateTime(item.endAt) : "不限结束";
-	return `${begin} 至 ${end}`;
-}
-
 function confirmRemove(item: GaoPackageConfig): void {
 	if (!item.id || !canDelete.value) {
 		return;
@@ -183,51 +205,63 @@ onMounted(async () => {
 	}
 });
 
-onUnmounted(() => navBarStore.clearRight());
+onUnmounted(() => {
+	navBarStore.clearRight();
+	reloadByKeyword.cancel();
+});
 </script>
 
 <style scoped lang="less">
 .package-config-list {
-	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+	padding: var(--app-nav-height) 0 1rem;
 
 	.filters {
+		top: var(--app-nav-height);
+		left: 0;
+		right: 0;
+		z-index: 10;
 		gap: .5rem;
-		margin: 0 1rem .75rem;
 		display: flex;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: #F5F5F8;
+		box-shadow: var(--td-shadow-1);
 
 		.keyword {
 			flex: 1;
 			border: 1px solid var(--td-component-border);
-			border-radius: .75rem;
+			z-index: 1;
+			padding: .5rem 1rem;
+			background: #f8fbff;
+			border-radius: 1rem;
+		}
+
+		.status {
+			margin-left: -2rem;
+			padding-left: 1.5rem;
+			border-radius: 1rem;
+
+			&:after {
+				display: none;
+			}
 		}
 	}
 
-	.item {
-		.title-row,
-		.description {
-			gap: .5rem;
-			display: flex;
-			align-items: center;
-		}
+	.list {
+		padding-top: 1rem;
 
-		.description {
-			color: var(--td-text-color-secondary);
-			margin-top: .35rem;
-			font-size: .8125rem;
-			flex-wrap: wrap;
-		}
+		.item {
 
-		.delete {
-			height: 100%;
-			padding: 0 1rem;
-			border-radius: 0;
-		}
-	}
+			.title {
+				gap: .5rem;
+				display: flex;
+				align-items: center;
+			}
 
-	.empty {
-		color: var(--td-text-color-secondary);
-		padding: 2rem 1rem;
-		text-align: center;
+			.price {
+				font-size: 1.25rem;
+			}
+		}
 	}
 }
 </style>