update point rule edit style

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>

src/pages/point/PointRuleEdit.vue

@@ -1,6 +1,7 @@
 <template>
 	<div v-can="pageAccess" class="point-rule-edit">
 		<t-form class="form" label-align="left" label-width="6rem">
+			<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>
@@ -8,11 +9,16 @@
 					<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-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>
@@ -44,8 +50,10 @@
 						<span>至</span>
 						<t-input v-model.trim="formModel.maxText" type="number" align="right" borderless placeholder="最大值" />
 					</div>
-				<p>登记时只有输入在此范围内的正整数，后端才会按本规则发放积分。</p>
+					<span class="tips">登记时只有输入在此范围内的正整数，系统才会按本规则发放积分</span>
 				</div>
+			</card-container>
+			<card-container>
 				<t-form-item label="生效开始" arrow @click="openBeginAtPicker">
 					<div class="time-value">
 						<span class="picker-text" v-text="formModel.beginAtText || '不限'" />
@@ -58,21 +66,21 @@
 						<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 v-model="formModel.exclusive" />
+					<t-switch size="small" 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>
 		</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 {
+		gap: 1rem;
+		margin: 0;
+		display: flex;
+		background: transparent;
+		flex-direction: column;
+
+		.card {
 			margin: 0 1rem;
-		padding: .5rem 0;
 			background: rgba(255, 255, 255, .92);
 			box-shadow: var(--td-shadow-1);
-		border-radius: 1.4rem;
+			border-radius: 1rem;
+		}
 
 		.picker-text {
 			color: #52607a;
@@ -643,18 +658,18 @@ onMounted(async () => {
 				.t-input {
 					flex: 1;
 					border: 1px solid var(--td-component-border);
-					border-radius: .75rem;
+					padding: .25rem .5rem;
+					border-radius: .5rem;
+				}
 			}
 		}
 
-			p {
+		.tips {
 			color: #52607a;
-				margin: .5rem 0 0;
 			font-size: .75rem;
 			line-height: 1.5;
 		}
 	}
-	}
 
 	.bottom-actions {
 		gap: .75rem;

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%);