From b4ba0062a9a6e8139ef10d5085a50133e431c23c Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Wed, 12 Aug 2026 23:29:54 +0800
Subject: [PATCH] update point rule edit style

---
 src/components/CardContainer.vue  |  72 +++++++++++++
 src/pages/point/PointRuleEdit.vue | 171 ++++++++++++++++--------------
 src/styles/tdesign-custom.css     |   2 +-
 3 files changed, 166 insertions(+), 79 deletions(-)
 create mode 100644 src/components/CardContainer.vue

diff --git a/src/components/CardContainer.vue b/src/components/CardContainer.vue
new file mode 100644
index 0000000..41ef858
--- /dev/null
+++ b/src/components/CardContainer.vue
@@ -0,0 +1,72 @@
+<template>
+	<div class="card-container">
+		<card-title :title="title" :description="description">
+			<template v-if="$slots.title" #title>
+				<slot name="title" />
+			</template>
+			<template v-if="$slots.description" #description>
+				<slot name="description" />
+			</template>
+		</card-title>
+		<div v-if="$slots.default" class="content bg-white">
+			<slot />
+		</div>
+		<div v-if="tips || $slots.tips" class="tips">
+			<slot name="tips">
+				<span v-text="tips" />
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	title?: string;
+	description?: string;
+	tips?: string;
+}
+
+defineProps<Props>();
+
+defineSlots<{
+	default?: () => unknown;
+	title?: () => unknown;
+	description?: () => unknown;
+	tips?: () => unknown;
+}>();
+
+defineOptions({
+	name: "CardContainer"
+});
+</script>
+
+<style scoped lang="less">
+.card-container {
+	margin: 0 1rem;
+
+	.content {
+		overflow: hidden;
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1rem;
+	}
+
+	.tips {
+		color: #52607a;
+		font-size: .8125rem;
+		line-height: 1.5;
+		padding: .25rem 1rem;
+	}
+}
+
+:global(html.theme-dark) {
+	.card-container {
+		background: rgba(15, 23, 42, .88);
+		box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+		.tips {
+			color: #94a3b8;
+			background: rgba(148, 163, 184, .14);
+		}
+	}
+}
+</style>
diff --git a/src/pages/point/PointRuleEdit.vue b/src/pages/point/PointRuleEdit.vue
index e8f7633..cbeab2e 100644
--- a/src/pages/point/PointRuleEdit.vue
+++ b/src/pages/point/PointRuleEdit.vue
@@ -1,78 +1,86 @@
 <template>
 	<div v-can="pageAccess" class="point-rule-edit">
 		<t-form class="form" label-align="left" label-width="6rem">
-			<t-form-item v-if="isGlobalManager" label="门店" required-mark :arrow="isCreateMode" @click="openStorePicker">
-				<span class="picker-text" v-text="selectedStoreName" />
-			</t-form-item>
-			<t-form-item label="登记事件" required-mark arrow @click="openEventPicker">
-				<span class="picker-text" v-text="selectedEventName" />
-			</t-form-item>
-			<t-form-item label="规则名称" required-mark>
-				<t-input v-model.trim="formModel.name" borderless placeholder="例如：每次登记加 10 分" />
-			</t-form-item>
-			<t-form-item label="规则状态" arrow @click="openStatusPicker">
-				<span class="picker-text" v-text="getStatusText(formModel.status)" />
-			</t-form-item>
-			<t-form-item label="触发类型" arrow @click="openTriggerPicker">
-				<span class="picker-text" v-text="getTriggerText(formModel.triggerType)" />
-			</t-form-item>
-			<t-form-item label="积分值模式" arrow @click="openModePicker">
-				<span class="picker-text" v-text="getModeText(formModel.pointMode)" />
-			</t-form-item>
-			<t-form-item v-if="formModel.pointMode === 'FIXED'" label="固定积分" required-mark>
-				<t-input
-					v-model.trim="formModel.pointValueText"
-					type="number"
-					align="right"
-					borderless
-					placeholder="请输入正整数"
-				/>
-			</t-form-item>
-			<t-form-item v-if="formModel.triggerType === 'AFTER_COUNT_EVERY_TIME'" label="触发阈值" required-mark>
-				<t-input
-					v-model.trim="formModel.thresholdText"
-					type="number"
-					align="right"
-					borderless
-					placeholder="累计登记达到几次"
-				/>
-			</t-form-item>
-			<div v-if="formModel.pointMode === 'SOURCE_VALUE'" class="source-condition">
-				<div class="source-title">自定义积分范围</div>
-				<div class="source-inputs">
-					<t-input v-model.trim="formModel.minText" type="number" align="right" borderless placeholder="最小值" />
-					<span>至</span>
-					<t-input v-model.trim="formModel.maxText" type="number" align="right" borderless placeholder="最大值" />
+			<card-container>
+				<t-form-item v-if="isGlobalManager" label="门店" required-mark :arrow="isCreateMode" @click="openStorePicker">
+					<span class="picker-text" v-text="selectedStoreName" />
+				</t-form-item>
+				<t-form-item label="登记事件" required-mark arrow @click="openEventPicker">
+					<span class="picker-text" v-text="selectedEventName" />
+				</t-form-item>
+				<t-form-item label="规则名称" required-mark>
+					<t-input v-model.trim="formModel.name" align="right" borderless placeholder="例如：每次登记加 10 分" />
+				</t-form-item>
+				<t-form-item label="规则状态" arrow @click="openStatusPicker">
+					<span class="picker-text" v-text="getStatusText(formModel.status)" />
+				</t-form-item>
+				<t-form-item label="规则备注">
+					<t-textarea v-model.trim="formModel.remark" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="规则说明" />
+				</t-form-item>
+			</card-container>
+			<card-container>
+				<t-form-item label="触发类型" arrow @click="openTriggerPicker">
+					<span class="picker-text" v-text="getTriggerText(formModel.triggerType)" />
+				</t-form-item>
+				<t-form-item label="积分值模式" arrow @click="openModePicker">
+					<span class="picker-text" v-text="getModeText(formModel.pointMode)" />
+				</t-form-item>
+				<t-form-item v-if="formModel.pointMode === 'FIXED'" label="固定积分" required-mark>
+					<t-input
+						v-model.trim="formModel.pointValueText"
+						type="number"
+						align="right"
+						borderless
+						placeholder="请输入正整数"
+					/>
+				</t-form-item>
+				<t-form-item v-if="formModel.triggerType === 'AFTER_COUNT_EVERY_TIME'" label="触发阈值" required-mark>
+					<t-input
+						v-model.trim="formModel.thresholdText"
+						type="number"
+						align="right"
+						borderless
+						placeholder="累计登记达到几次"
+					/>
+				</t-form-item>
+				<div v-if="formModel.pointMode === 'SOURCE_VALUE'" class="source-condition">
+					<div class="source-title">自定义积分范围</div>
+					<div class="source-inputs">
+						<t-input v-model.trim="formModel.minText" type="number" align="right" borderless placeholder="最小值" />
+						<span>至</span>
+						<t-input v-model.trim="formModel.maxText" type="number" align="right" borderless placeholder="最大值" />
+					</div>
+					<span class="tips">登记时只有输入在此范围内的正整数，系统才会按本规则发放积分</span>
 				</div>
-				<p>登记时只有输入在此范围内的正整数，后端才会按本规则发放积分。</p>
-			</div>
-			<t-form-item label="生效开始" arrow @click="openBeginAtPicker">
-				<div class="time-value">
-					<span class="picker-text" v-text="formModel.beginAtText || '不限'" />
-					<t-button v-if="formModel.beginAtText" size="extra-small" content="不限" @click.stop="clearBeginAt" />
-				</div>
-			</t-form-item>
-			<t-form-item label="生效结束" arrow @click="openEndAtPicker">
-				<div class="time-value">
-					<span class="picker-text" v-text="formModel.endAtText || '不限'" />
-					<t-button v-if="formModel.endAtText" size="extra-small" content="不限" @click.stop="clearEndAt" />
-				</div>
-			</t-form-item>
-			<t-form-item label="优先级" required-mark>
-				<t-input v-model.trim="formModel.priorityText" type="number" align="right" borderless placeholder="数值越小越优先" />
-			</t-form-item>
-			<t-form-item label="独占匹配" content-align="right">
-				<t-switch v-model="formModel.exclusive" />
-			</t-form-item>
-			<t-form-item label="规则备注">
-				<t-textarea v-model.trim="formModel.remark" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="规则说明" />
-			</t-form-item>
+			</card-container>
+			<card-container>
+				<t-form-item label="生效开始" arrow @click="openBeginAtPicker">
+					<div class="time-value">
+						<span class="picker-text" v-text="formModel.beginAtText || '不限'" />
+						<t-button v-if="formModel.beginAtText" size="extra-small" content="不限" @click.stop="clearBeginAt" />
+					</div>
+				</t-form-item>
+				<t-form-item label="生效结束" arrow @click="openEndAtPicker">
+					<div class="time-value">
+						<span class="picker-text" v-text="formModel.endAtText || '不限'" />
+						<t-button v-if="formModel.endAtText" size="extra-small" content="不限" @click.stop="clearEndAt" />
+					</div>
+				</t-form-item>
+			</card-container>
+			<card-container tips="命中规则并发放积分后不再匹配其他规则">
+				<t-form-item label="优先级" required-mark>
+					<t-input v-model.trim="formModel.priorityText" type="number" align="right" borderless placeholder="数值越小越优先" />
+				</t-form-item>
+				<t-form-item label="独占匹配" content-align="right">
+					<t-switch size="small" v-model="formModel.exclusive" />
+				</t-form-item>
+			</card-container>
 		</t-form>
 		<div class="bottom-actions">
 			<t-button
 				v-if="!isCreateMode"
 				v-can="permissionCodes.pointRule.delete"
-				class="delete"
+				class="delete bg-white"
 				theme="danger"
 				variant="outline"
 				:loading="isRemoving"
@@ -607,11 +615,18 @@ onMounted(async () => {
 	padding: calc(var(--app-nav-height) + 1rem) 0 5rem;
 
 	.form {
-		margin: 0 1rem;
-		padding: .5rem 0;
-		background: rgba(255, 255, 255, .92);
-		box-shadow: var(--td-shadow-1);
-		border-radius: 1.4rem;
+		gap: 1rem;
+		margin: 0;
+		display: flex;
+		background: transparent;
+		flex-direction: column;
+
+		.card {
+			margin: 0 1rem;
+			background: rgba(255, 255, 255, .92);
+			box-shadow: var(--td-shadow-1);
+			border-radius: 1rem;
+		}
 
 		.picker-text {
 			color: #52607a;
@@ -643,16 +658,16 @@ onMounted(async () => {
 				.t-input {
 					flex: 1;
 					border: 1px solid var(--td-component-border);
-					border-radius: .75rem;
+					padding: .25rem .5rem;
+					border-radius: .5rem;
 				}
 			}
+		}
 
-			p {
-				color: #52607a;
-				margin: .5rem 0 0;
-				font-size: .75rem;
-				line-height: 1.5;
-			}
+		.tips {
+			color: #52607a;
+			font-size: .75rem;
+			line-height: 1.5;
 		}
 	}
 
diff --git a/src/styles/tdesign-custom.css b/src/styles/tdesign-custom.css
index fa57999..c97e448 100644
--- a/src/styles/tdesign-custom.css
+++ b/src/styles/tdesign-custom.css
@@ -109,7 +109,7 @@
 	--td-component-stroke: var(--td-gray-color-3);
 	--td-border-level-2-color: var(--td-gray-color-4);
 	--td-component-border: var(--td-gray-color-4);
-	--td-shadow-1: 0 1px 6px rgba(0, 0, 0, 0.05),0 3px 4px rgba(0, 0, 0, 0.04),0 1px 2px -1px rgba(0, 0, 0, 0.08);
+	--td-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.03);
 	--td-shadow-2: 0 3px 10px 2px rgba(0, 0, 0, 0.04),0 6px 8px rgba(0, 0, 0, 0.05),0 4px 4px -2px rgba(0, 0, 0, 0.08);
 	--td-shadow-3: 0 4px 18px 5px rgba(0, 0, 0, 0.05),0 10px 9px 2px rgba(0, 0, 0, 0.04),0 3px 5px -3px rgba(0, 0, 0, 0.08);
 	--td-shadow-4: 0 2px 8px 0 rgba(0, 0, 0, 6%);