fix PackageConfigList.vue style

src/pages/package/PackageConfigList.vue

@@ -7,37 +7,53 @@
 				borderless
 				clearable
 				placeholder="搜索套餐名称或说明"
-				@enter="reload"
 			/>
-			<t-button theme="primary" size="small" @click="reload">搜索</t-button>
-		</div>
-		<t-dropdown-menu>
-			<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
+			<t-dropdown-menu class="status">
+				<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)">
+		</div>
+		<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>
 						</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;
+			}
 		}
 	}
 
+	.list {
+		padding-top: 1rem;
+
 		.item {
-		.title-row,
-		.description {
+
+			.title {
 				gap: .5rem;
 				display: flex;
 				align-items: center;
 			}
 
-		.description {
-			color: var(--td-text-color-secondary);
-			margin-top: .35rem;
-			font-size: .8125rem;
-			flex-wrap: wrap;
-		}
-
-		.delete {
-			height: 100%;
-			padding: 0 1rem;
-			border-radius: 0;
+			.price {
+				font-size: 1.25rem;
 			}
 		}
-
-	.empty {
-		color: var(--td-text-color-secondary);
-		padding: 2rem 1rem;
-		text-align: center;
 	}
 }
 </style>