update point list style

src/pages/point/PointRuleList.vue

@@ -18,36 +18,45 @@
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh
+			class="list-wrapper"
 			v-model="isRefreshing"
 			:refresh-timeout="30000"
 			@refresh="reload"
 			@scrolltolower="load"
 		>
-			<t-cell-group v-if="pageResult.list.length" class="rule-list" theme="card">
+			<t-cell-group v-if="pageResult.list.length" class="list" theme="card">
 				<t-cell
 					v-for="item in pageResult.list"
 					:key="item.id"
-					class="rule-item"
-					:title="item.name || '未命名规则'"
-					:description="getRuleDescription(item)"
-					:note="getRuleNote(item)"
+					class="item"
 					:arrow="canUpdate"
 					:hover="canUpdate"
 					@click="toEdit(item)"
 				>
-					<template #leftIcon>
-						<div class="priority" v-text="item.priority ?? 0" />
+					<template #left-icon>
+						<div class="point">
+							<t-icon name="money" />
+							<span v-text="`${item.pointValue ? item.pointValue : '?'}`" />
+						</div>
 					</template>
-					<template #extra>
+					<template #title>
+						<div class="title">
+							<h4 class="text" v-text="item.name || '未命名规则'" />
 							<t-tag
 								:theme="getStatusTheme(item.status)"
 								variant="light-outline"
 								:content="getStatusText(item.status)"
 							/>
+						</div>
+					</template>
+					<template #description>
+						<div class="description">
+							<div v-text="`登记事件：${item.eventId ? eventNameMap.get(item.eventId) : '未绑定事件'}`"></div>
+							<div v-text="`触发类型：${getTriggerText(item)}`"></div>
+						</div>
 					</template>
 				</t-cell>
 			</t-cell-group>
-			<div v-else class="empty" v-text="isLoading ? '正在加载积分规则' : '暂无积分规则'" />
 			<div class="load-state" v-text="loadStateText" />
 		</t-pull-down-refresh>
 		<t-button v-can="permissionCodes.pointRule.create" class="create" theme="primary" @click="toCreate">
@@ -60,14 +69,14 @@
 </template>
 
 <script setup lang="ts">
-import { Toast, type DropdownValue } from "tdesign-mobile-vue";
+import { type DropdownValue, Toast } from "tdesign-mobile-vue";
 import EventAPI from "@/api/EventAPI";
 import PointAPI from "@/api/PointAPI";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import type { EventItem } from "@/types/EventItem";
 import type { PointRule, PointRuleStatus } from "@/types/Point";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
-import { useUserStore, type Page, type PageResult } from "timi-web";
+import { type Page, type PageResult, useUserStore } from "timi-web";
 
 const allStoresValue = "__ALL_STORES__";
 
@@ -218,18 +227,6 @@ async function loadEventList(): Promise<void> {
 
 // ---------- 展示与导航 ----------
 
-function getRuleDescription(rule: PointRule): string {
-	const eventName = rule.eventId ? eventNameMap.value.get(rule.eventId) || `事件 ${rule.eventId}` : "未绑定事件";
-	const triggerText = getTriggerText(rule);
-	const pointText = rule.pointMode === "SOURCE_VALUE" ? "使用登记时填写的积分" : `${rule.pointValue ?? 0} 分`;
-	return `${eventName}｜${triggerText}｜${pointText}`;
-}
-
-function getRuleNote(rule: PointRule): string {
-	const priority = `优先级 ${rule.priority ?? 0}`;
-	return rule.exclusive ? `${priority}｜命中后停止匹配` : priority;
-}
-
 function getTriggerText(rule: PointRule): string {
 	const map: Record<string, string> = {
 		EVERY_TIME: "每次登记",
@@ -310,28 +307,37 @@ onMounted(async () => {
 		background: var(--td-bg-color-container);
 	}
 
-	.rule-list {
-		margin: 0 1rem;
+	.list-wrapper {
+		min-height: 70vh;
 
-		.rule-item {
-			.priority {
-				width: 2rem;
-				height: 2rem;
+		.list {
+
+			.item {
+
+				.point {
+					width: 3rem;
 					display: flex;
-				color: #2563eb;
-				background: #dbeafe;
-				border-radius: .75rem;
 					align-items: center;
-				font-size: .875rem;
-				justify-content: center;
+					flex-direction: column;
+					justify-content: space-between;
 				}
+
+				.title {
+					width: 100%;
+					display: flex;
+					justify-content: space-between;
+
+					.text {
+						margin: 0;
 					}
 				}
 
-	.empty {
-		color: #52607a;
-		padding: 2rem 1rem;
-		text-align: center;
+				.description {
+					font-size: .75rem;
+					line-height: 1.25;
+				}
+			}
+		}
 	}
 
 	.create {
@@ -348,7 +354,7 @@ onMounted(async () => {
 			color: #94a3b8;
 		}
 
-		.rule-list .priority {
+		.list .priority {
 			color: #bfdbfe;
 			background: rgba(30, 64, 175, .45);
 		}