fix: 调整节点设置器

apps/web/components.d.ts

@@ -12,7 +12,6 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
@@ -80,7 +79,6 @@ declare module 'vue' {
 
 // For TSX support
 declare global {
-  const ElAlert: typeof import('element-plus/es')['ElAlert']
   const ElAside: typeof import('element-plus/es')['ElAside']
   const ElAvatar: typeof import('element-plus/es')['ElAvatar']
   const ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']

apps/web/src/nodes/_base/NodeRuntimeConfig.vue

@@ -1,5 +1,5 @@
 <template>
-	<section class="runtime-config">
+	<section class="runtime-config" v-bind="$attrs">
 		<RetryConfig v-model="formData.retry_config" />
 		<ErrorHandling
 			v-model:error_strategy="formData.error_strategy"
@@ -24,6 +24,5 @@ const formData = defineModel({
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
-	padding: 0 12px 12px;
 }
 </style>

apps/web/src/nodes/_base/OutputVariables.vue

@@ -30,7 +30,7 @@
 				<VarSelect
 					v-if="setValue"
 					v-model="output.value"
-					class="w-1/3"
+					class="flex-1"
 					:placeholder="t('common.nodeBase.outputVariables.setValuePlaceholder')"
 					@change="(val) => val && (output.type = val.type as NodeVariableType)"
 				/>

apps/web/src/nodes/_base/RetryConfig.vue

@@ -10,12 +10,12 @@
 			</div>
 			<div class="space-y-2" v-if="config.retry_enabled">
 				<div class="pl-[10px] flex item-center justify-between">
-					<p class="m-0 text-sm text-gray-600 w-1/2">
+					<p class="m-0 text-sm text-gray-600 w-110px">
 						{{ t('common.nodeBase.retryConfig.maxRetries') }}
 					</p>
 					<el-slider
 						v-model="config.max_retries"
-						class="w-1/2"
+						class="flex-1"
 						show-input
 						:min="0"
 						:max="10"
@@ -23,12 +23,12 @@
 					/>
 				</div>
 				<div class="pl-[10px] flex item-center justify-between">
-					<p class="m-0 text-sm text-gray-600 w-1/2">
+					<p class="m-0 text-sm text-gray-600 w-110px">
 						{{ t('common.nodeBase.retryConfig.retryInterval') }}
 					</p>
 					<el-slider
 						v-model="config.retry_interval"
-						class="w-1/2"
+						class="flex-1"
 						:min="100"
 						:max="5000"
 						show-input

apps/web/src/nodes/custom/CustomNodeSetter.vue

@@ -189,6 +189,6 @@ const setParameterValue = (parameter: CustomNodeParameter, value: unknown) => {
 			</el-form-item>
 		</el-form>
 
-		<NodeRuntimeConfig v-model="formData" />
+		<NodeRuntimeConfig v-model="formData" class="px-12px" />
 	</el-scrollbar>
 </template>

apps/web/src/nodes/src/http/setter.vue

@@ -64,11 +64,12 @@ const syncEditorRowsFromFormData = () => {
 		params.value = nextParams
 	}
 
-	const nextBody = formData.value.body.type === 'none'
-		? []
-		: formData.value.body.data.length
-			? cloneDeep(formData.value.body.data)
-			: [createEmptyBody()]
+	const nextBody =
+		formData.value.body.type === 'none'
+			? []
+			: formData.value.body.data.length
+				? cloneDeep(formData.value.body.data)
+				: [createEmptyBody()]
 
 	if (!isEqual(nextBody, body.value)) {
 		body.value = nextBody
@@ -76,7 +77,12 @@ const syncEditorRowsFromFormData = () => {
 }
 
 watch(
-	() => [formData.value.heads, formData.value.params, formData.value.body.type, formData.value.body.data],
+	() => [
+		formData.value.heads,
+		formData.value.params,
+		formData.value.body.type,
+		formData.value.body.data
+	],
 	() => {
 		syncEditorRowsFromFormData()
 	},
@@ -295,7 +301,7 @@ const handleSaveAuthorization = () => {
 				<el-table :data="body" border>
 					<el-table-column align="center" prop="key" label="键">
 						<template #default="{ row }">
-							<VarInput v-model="row.key" variant="borderless" placeholder="请输入" />
+							<VarInput v-model="row.key" variant="borderless" placeholder="输入/时选择变量" />
 						</template>
 					</el-table-column>
 					<el-table-column
@@ -337,16 +343,9 @@ const handleSaveAuthorization = () => {
 			</div>
 
 			<div v-if="['json', 'raw', 'binary'].includes(formData.body.type)" class="mb-12px">
-				<el-input
-					v-if="formData.body.type != 'binary'"
-					v-model="formData.body.data[0]!.value"
-					type="textarea"
-					placeholder="请输入"
-					:autosize="{ minRows: 5, maxRows: 10 }"
-				/>
 				<VarInput
-					v-if="formData.body.type === 'binary'"
 					v-model="formData.body.data[0]!.value"
+					:rows="3"
 					variant="borderless"
 					placeholder="输入/时选择变量"
 				/>

apps/web/src/nodes/src/list/index.ts

@@ -46,6 +46,7 @@ export type ListData = INodeDataBaseSchema & {
 		size: number
 	}
 	order_by: {
+		enabled: boolean
 		key: string
 		value: 'asc' | 'desc' | ''
 	}

apps/web/src/nodes/src/list/setter.vue

@@ -291,8 +291,9 @@ const handleLeftChange = (val: string) => {
 			<el-form-item label="" label-position="top">
 				<div class="w-full flex items-center justify-between">
 					<label class="text-14px font-bold text-gray-700">排序</label>
+					<el-switch v-model="formData.order_by.enabled" />
 				</div>
-				<div class="w-full flex gap-12px">
+				<div class="w-full flex gap-12px" v-if="formData.order_by.enabled">
 					<el-select
 						v-if="isFileInputType"
 						v-model="formData.order_by.key"
@@ -305,7 +306,27 @@ const handleLeftChange = (val: string) => {
 					</el-radio-group>
 				</div>
 			</el-form-item>
-			<NodeRuntimeConfig v-model="formData" />
+
+			<el-collapse class="w-full">
+				<el-collapse-item title="" name="2">
+					<template #title>
+						<div class="flex items-center justify-between beautify">
+							<label class="text-14px font-bold text-gray-700">输出变量</label>
+						</div>
+					</template>
+					<ul>
+						<li v-for="output in formData.outputs" :key="output.name">
+							<div>
+								<span class="text-#333">{{ output.name }}</span>
+								<span class="text-#999 ml-8px">{{ output.type }}</span>
+							</div>
+							<div class="text-#666">{{ output.describe }}</div>
+						</li>
+					</ul>
+				</el-collapse-item>
+			</el-collapse>
+
+			<NodeRuntimeConfig v-model="formData" class="px-0!" />
 		</el-form>
 	</el-scrollbar>
 </template>
@@ -341,7 +362,15 @@ const handleLeftChange = (val: string) => {
 	flex: 1;
 }
 
+:deep(.el-collapse-item__header) {
+	padding: 0 !important;
+}
+
 :deep(.list-boolean-group .el-radio-button__inner) {
 	width: 100%;
 }
+
+:deep(.el-collapse) {
+	border-top: none;
+}
 </style>

apps/web/src/nodes/src/loop/setter.vue

@@ -27,6 +27,19 @@ const texts = computed(() => ({
 }))
 
 const formData = useSetterModel<LoopData>(props, emit)
+const variableKeyMap = new WeakMap<object, number>()
+let variableKeySeed = 0
+
+const getVariableKey = (variable: LoopData['variables'][number]) => {
+	const cachedKey = variableKeyMap.get(variable)
+
+	if (cachedKey) return cachedKey
+
+	const nextKey = ++variableKeySeed
+	variableKeyMap.set(variable, nextKey)
+
+	return nextKey
+}
 
 const handleAddLoopVar = () => {
 	formData.value.variables.push({
@@ -60,7 +73,7 @@ const onUpdateOperator = (operator: 'and' | 'or') => {
 				</div>
 				<div
 					v-for="(variable, index) in formData.variables"
-					:key="variable.name"
+					:key="getVariableKey(variable)"
 					class="w-full mt-12px"
 				>
 					<div class="w-full flex items-start gap-12px">

apps/web/src/nodes/src/mail-sender/setter.vue

@@ -75,10 +75,10 @@
 			</section>
 
 			<section v-if="formData.in_queue" class="section-block flex items-center justify-between">
-				<div class="section-title">延迟时间</div>
+				<div class="section-title shrink-0">入队列延迟时间(s)</div>
 				<el-input-number
 					v-model="formData.delaySeconds"
-					class="w-full"
+					class="w-180px"
 					placeholder="入队列后延时几秒"
 				/>
 			</section>