fix PointRuleDetail.vue style

src/pages/point/PointRuleDetail.vue

@@ -31,12 +31,24 @@
 			</t-cell>
 			<t-cell title="规则备注" :note="Text.display(rule.remark)" />
 		</t-cell-group>
-		<t-cell-group v-if="rule" title="积分配置" theme="card" v-entrance-transition="140">
+		<t-cell-group
+			v-if="rule"
+			class="script"
+			title="积分配置"
+			theme="card"
+			v-entrance-transition="140"
+		>
 			<t-cell title="规则模式" :note="rule.ruleMode === 'GROOVY' ? '脚本规则' : '简单规则'" />
 			<t-cell v-if="rule.ruleMode !== 'GROOVY'" title="固定积分" :note="formatPointValue(rule.pointValue)" />
 			<template v-if="rule?.ruleMode === 'GROOVY'">
 				<t-cell title="执行脚本" :note="scriptName" />
-				<t-cell class="empty-cell-title-margin" title="脚本说明">
+				<t-cell class="description empty-cell-title-margin">
+					<template #title>
+						<div class="title">
+							<span>脚本说明</span>
+							<span class="tips orange">如需调整规则请联系技术支持</span>
+						</div>
+					</template>
 					<template #description>
 						<markdown-view :content="rule.groovyScript?.description || '暂无脚本说明'" />
 					</template>
@@ -49,9 +61,9 @@
 							language="groovy"
 							readonly
 							line-numbers
-							class="script-editor"
+							class="code"
 						/>
-						<div v-else class="empty-script" v-text="'暂无脚本代码'" />
+						<div v-else class="center-tips" v-text="'暂无脚本代码'" />
 					</template>
 				</t-cell>
 			</template>
@@ -66,10 +78,9 @@
 		</t-cell-group>
 		<t-button
 			v-if="rule && canDelete"
-			class="delete red bg-white cell-button"
+			class="cell-button"
 			:loading="isDeleting"
-			variant="text"
+			theme="danger"
-			block
 			@click="confirmRemove"
 		>
 			删除
@@ -134,20 +145,6 @@ const rulePointText = computed(() => {
 	return formatPointValue(rule.value?.pointValue);
 });
 const scriptName = computed(() => rule.value?.groovyScript?.name || rule.value?.groovyScriptId || "未绑定脚本");
-const scriptStatusText = computed(() => {
-	const script = rule.value?.groovyScript;
-	if (!script) {
-		return "脚本不存在";
-	}
-	if (script.enabled && script.publishedVersionId) {
-		return "已启用并已发布";
-	}
-	return script.enabled ? "已启用，未发布" : "已停用";
-});
-const scriptVersionText = computed(() => {
-	const version = rule.value?.groovyScript?.latest?.version;
-	return version === undefined || version === null ? "未创建版本" : String(version);
-});
 const scriptContent = computed(() => rule.value?.groovyScript?.latest?.content || "");
 
 async function loadStoreScope(): Promise<void> {
@@ -335,10 +332,6 @@ onUnmounted(() => {
 	display: flex;
 	flex-direction: column;
 
-	.delete {
-		margin: 0 1rem;
-	}
-
 	.rule-header {
 		gap: .75rem;
 		margin: 0 1rem;
@@ -387,20 +380,23 @@ onUnmounted(() => {
 		}
 	}
 
-	.script-section {
+	.script {
 
-		.script-editor {
+		.description {
-			height: 24rem;
+
-			min-height: 16rem;
+			.title {
-			background: var(--td-bg-color-page);
+				flex: 1;
-			border-radius: .5rem;
+				display: flex;
+				justify-content: space-between;
+
+				.tips {
+					font-size: .75rem;
+				}
+			}
 		}
 
-		.empty-script {
+		.code {
-			padding: 1rem;
+			min-height: 10rem;
-			color: var(--td-text-color-placeholder);
-			background: var(--td-bg-color-page);
-			border-radius: .5rem;
 		}
 	}
 }

src/pages/point/PointRuleEdit.vue

@@ -109,42 +109,11 @@
 			@confirm="confirmRuleModePicker"
 		/>
 	</t-popup>
-	<bottom-popup
+	<point-rule-script-picker
-		v-model="scriptPickerVisible"
+		v-model="formModel.groovyScriptId"
-		title="选择执行脚本"
+		v-model:visible="scriptPickerVisible"
-		height="min(80vh, 48rem)"
+		:scripts="availableScriptList"
-		@left-button-click="cancelScriptPicker"
-		@right-button-click="confirmScriptPicker"
-	>
-		<t-collapse
-			v-if="availableScriptList.length"
-			v-model="expandedScriptIdList"
-			class="script-collapse"
-			:expand-mutex="true"
-		>
-			<t-collapse-panel
-				v-for="script in availableScriptList"
-				:key="getScriptId(script)"
-				:value="getScriptId(script)"
-				class="script-panel"
-				placement="bottom"
-			>
-				<template #header>
-					<t-checkbox
-						:model-value="scriptPickerDraftId === getScriptId(script)"
-						:label="getScriptName(script)"
-						borderless
-						@click.stop
-						@change="selectScript(getScriptId(script))"
 	/>
-				</template>
-				<div class="script-description">
-					<markdown-view :content="script.description || '暂无脚本说明'" />
-				</div>
-			</t-collapse-panel>
-		</t-collapse>
-		<t-empty v-else description="暂无可选积分脚本" />
-	</bottom-popup>
 	<t-popup v-model="beginAtPickerVisible" placement="bottom">
 		<t-date-time-picker
 			v-model="beginAtDraftText"
@@ -170,10 +139,10 @@
 </template>
 
 <script setup lang="ts">
-import { BottomPopup } from "timi-tdesign-mobile";
+import { Time } from "timi-web";
-import { MarkdownView, Time } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import EventAPI from "@/api/EventAPI";
+import PointRuleScriptPicker from "@/pages/point/component/PointRuleScriptPicker.vue";
 import PointAPI from "@/api/PointAPI";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
@@ -324,16 +293,6 @@ const ruleModePickerVisible = ref(false);
 const ruleModePickerDraft = ref<PickerValue[]>([]);
 const ruleModePickerColumns = [ruleModeOptions];
 const scriptPickerVisible = ref(false);
-const scriptPickerDraftId = ref("");
-const expandedScriptIdList = ref<Array<string | number>>([]);
-
-function getScriptId(script: GroovyScript): string {
-	return script.id || "";
-}
-
-function getScriptName(script: GroovyScript): string {
-	return script.name || script.code || "未命名脚本";
-}
 
 function openStatusPicker(): void {
 	statusPickerDraft.value = [formModel.status];
@@ -401,28 +360,9 @@ function openScriptPicker(): void {
 		Message.warning("暂无可选积分脚本");
 		return;
 	}
-	scriptPickerDraftId.value = formModel.groovyScriptId;
-	expandedScriptIdList.value = formModel.groovyScriptId ? [formModel.groovyScriptId] : [];
 	scriptPickerVisible.value = true;
 }
 
-function selectScript(scriptId: string): void {
-	if (scriptId && availableScriptList.value.some(item => item.id === scriptId)) {
-		scriptPickerDraftId.value = scriptId;
-	}
-}
-
-function cancelScriptPicker(): void {
-	scriptPickerVisible.value = false;
-}
-
-function confirmScriptPicker(): void {
-	if (scriptPickerDraftId.value && availableScriptList.value.some(item => item.id === scriptPickerDraftId.value)) {
-		formModel.groovyScriptId = scriptPickerDraftId.value;
-	}
-	scriptPickerVisible.value = false;
-}
-
 function getStatusText(status: PointRuleStatus): string {
 	return statusOptions.find(item => item.value === status)?.label || "草稿";
 }
@@ -649,13 +589,6 @@ onUnmounted(() => navBarStore.clearRight());
 	}
 }
 
-.script-collapse {
-
-	:deep(.t-cell) {
-		padding: 0 10px;
-	}
-}
-
 :global(html.theme-dark) {
 	.point-rule-edit {
 		.form {
@@ -667,10 +600,6 @@ onUnmounted(() => navBarStore.clearRight());
 				color: #94a3b8;
 			}
 		}
-
-		.script-description {
-			color: #94a3b8;
-		}
 	}
 }
 </style>

src/pages/point/component/PointRuleScriptPicker.vue

@@ -0,0 +1,133 @@
+<template>
+	<bottom-popup
+		v-model="popupVisible"
+		title="选择执行脚本"
+		height="min(80vh, 48rem)"
+		@left-button-click="close"
+		@right-button-click="confirm"
+	>
+		<div class="tips orange">如需增加、调整规则请联系技术支持</div>
+		<t-collapse
+			v-if="availableScriptList.length"
+			v-model="expandedScriptIdList"
+			class="collapses"
+			:expand-mutex="true"
+		>
+			<t-collapse-panel
+				v-for="script in availableScriptList"
+				:key="getScriptId(script)"
+				:value="getScriptId(script)"
+				class="collapse"
+				placement="bottom"
+			>
+				<template #header>
+					<t-checkbox
+						:model-value="draftScriptId === getScriptId(script)"
+						:label="getScriptName(script)"
+						borderless
+						@click.stop
+						@change="selectScript(getScriptId(script))"
+					/>
+				</template>
+				<div class="content">
+					<markdown-view :content="script.description || '暂无脚本说明'" />
+				</div>
+			</t-collapse-panel>
+		</t-collapse>
+		<t-empty v-else description="暂无可选积分脚本" />
+	</bottom-popup>
+</template>
+
+<script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
+import { MarkdownView } from "timi-web";
+import type { GroovyScript } from "@/types/Point";
+
+defineOptions({
+	name: "PointRuleScriptPicker"
+});
+
+const props = defineProps<{
+	modelValue: string;
+	visible: boolean;
+	scripts: GroovyScript[];
+}>();
+
+const emit = defineEmits<{
+	"update:modelValue": [value: string];
+	"update:visible": [value: boolean];
+}>();
+
+const popupVisible = computed({
+	get: () => props.visible,
+	set: value => emit("update:visible", value)
+});
+const availableScriptList = computed(() => props.scripts.filter(script => script.id));
+const draftScriptId = ref("");
+const expandedScriptIdList = ref<Array<string | number>>([]);
+
+watch(() => props.visible, visible => {
+	if (!visible) {
+		return;
+	}
+	draftScriptId.value = props.modelValue;
+	expandedScriptIdList.value = props.modelValue ? [props.modelValue] : [];
+});
+
+function getScriptId(script: GroovyScript): string {
+	return script.id || "";
+}
+
+function getScriptName(script: GroovyScript): string {
+	return script.name || script.code || "未命名脚本";
+}
+
+function selectScript(scriptId: string): void {
+	if (scriptId && availableScriptList.value.some(script => script.id === scriptId)) {
+		draftScriptId.value = scriptId;
+	}
+}
+
+function close(): void {
+	popupVisible.value = false;
+}
+
+function confirm(): void {
+	if (draftScriptId.value && availableScriptList.value.some(script => script.id === draftScriptId.value)) {
+		emit("update:modelValue", draftScriptId.value);
+	}
+	close();
+}
+</script>
+
+<style scoped lang="less">
+.tips {
+	padding: .5rem;
+	font-size: .75rem;
+	text-align: center;
+}
+.collapses {
+	border-top: 1px solid var(--td-component-border);
+
+	:deep(.t-cell) {
+		padding: 0 10px;
+	}
+
+	.collapse {
+
+		:deep(.t-collapse-panel__content) {
+			padding: 0;
+		}
+
+		.content {
+			padding: 0 1rem 0 3.5rem;
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.script-description {
+		color: #94a3b8;
+	}
+}
+</style>