fix: 修改节点设置

apps/web/src/features/setter/index.vue

@@ -28,17 +28,15 @@ const props = withDefaults(defineProps<Props>(), {
 })
 const emit = defineEmits<{
 	'update:visible': [value: boolean]
-	'update:node:data': [id: string, data: Record<string, unknown>]
+	// 更新节点数据
+	'update:node:data': [data: Record<string, unknown>]
+	// 运行节点
+	'run-node': [id: string]
 }>()
 
-const node = computed<IWorkflowNode>({
-	get() {
-		return props.workflow.nodes.find((node) => node.id === props.id)!
-	},
-	set(value: IWorkflowNode) {
-		emit('update:node:data', props.id, value.data)
-	}
-})
+const node = computed<IWorkflowNode>(
+	() => props.workflow.nodes.find((node) => node.id === props.id)!
+)
 
 const setter = computed(() => {
 	return (
@@ -56,35 +54,38 @@ const closeDrawer = () => {
 	emit('update:visible', false)
 }
 
-const onUpdate = useDebounceFn((data: Record<string, unknown>) => {
-	emit('update:node:data', props.id, data)
+/**
+ * 更新节点配置数据 node.data
+ */
+const onUpdateData = useDebounceFn((data: Record<string, unknown>) => {
+	emit('update:node:data', {
+		...node.value,
+		data: {
+			...node.value?.data,
+			...data
+		}
+	})
 }, 1000)
 
-const name = computed({
-	get() {
-		return node.value?.name
-	},
-	set(value: string) {
-		node.value.name = value
-	}
-})
+const name = ref(node.value?.name || '')
+const remark = ref(node.value?.remark || '')
+const nodeVars = ref<NodeVar[]>([])
 
-const remark = computed({
-	get() {
-		return node.value?.remark
-	},
-	set(value: string) {
-		if (value?.trim()) {
-			node.value.remark = value
-		}
+const onUpdateName = () => {
+	if (name.value !== node.value?.name && name.value.trim() !== '') {
+		emit('update:node:data', { ...node.value, name: name.value })
 	}
-})
-
-const nodeVars = ref<NodeVar[]>([])
+}
+const onUpdateRemark = () => {
+	emit('update:node:data', { ...node.value, remark: remark.value })
+}
 
 watch(
 	() => [props.id, props.visible],
 	async () => {
+		name.value = node.value?.name || ''
+		remark.value = node.value?.remark || ''
+
 		if (props.id && props.visible) {
 			const response = await agent.postAgentGetPrevNodeOutVariableList({
 				node_id: props.id,
@@ -111,17 +112,40 @@ provide('nodeVars', nodeVars)
 						>
 							<Icon :icon="nodeInfo?.icon" color="#fff" :size="14" />
 						</span>
-						<Input v-model="name" placeholder="添加标题..." variant="borderless" />
+						<Input
+							v-model="name"
+							placeholder="添加标题..."
+							variant="borderless"
+							@blur="onUpdateName"
+						/>
 					</h4>
-					<Icon
-						icon="lucide:x"
-						height="24"
-						width="24"
-						@click="closeDrawer"
-						class="cursor-pointer"
-					></Icon>
+					<div class="flex items-center">
+						<el-tooltip content="运行节点" placement="top">
+							<Icon
+								icon="lucide:play"
+								width="20"
+								height="20"
+								class="text-gray-400 p-2 hover:cursor-pointer hover:bg-gray-200"
+								@click="emit('run-node', id)"
+							/>
+						</el-tooltip>
+
+						<el-divider direction="vertical" />
+						<Icon
+							icon="lucide:x"
+							height="24"
+							width="24"
+							@click="closeDrawer"
+							class="cursor-pointer"
+						></Icon>
+					</div>
 				</div>
-				<Input v-model="remark" placeholder="添加描述..." variant="borderless" />
+				<Input
+					v-model="remark"
+					placeholder="添加描述..."
+					variant="borderless"
+					@blur="onUpdateRemark"
+				/>
 			</header>
 
 			<div class="content">
@@ -133,7 +157,7 @@ provide('nodeVars', nodeVars)
 								:key="node?.id"
 								:id="node?.id"
 								:data="node?.data"
-								@update="onUpdate"
+								@update="onUpdateData"
 							></component>
 						</div>
 					</el-tab-pane>

apps/web/src/nodes/_base/PromptEditor/index.vue

@@ -120,7 +120,6 @@ function onChange(editorState: any) {
 			</RichTextPlugin>
 		</div>
 		<HistoryPlugin />
-		<AutoFocusPlugin v-if="autoFocus" />
 		<OnChangePlugin :onChange="onChange" />
 		<VarLaberPickerPlugin :trigger-strings="triggerStrings" :options="pickerOptions" />
 		<VarLabelNodePlugin />

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

@@ -56,12 +56,6 @@ const emit = defineEmits<Emits>()
 
 const formData = ref<CodeData>(props.data)
 
-watch(props.data, (newVal) => {
-	if (newVal) {
-		formData.value = newVal
-	}
-})
-
 watch(
 	() => formData.value,
 	(val) => {

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

@@ -20,19 +20,6 @@ watch(
 		emit('update', newVal)
 	}
 )
-
-watch(
-	props.data,
-	(newVal) => {
-		if (newVal) {
-			formData.value = newVal
-		}
-	},
-	{
-		immediate: true,
-		deep: true
-	}
-)
 </script>
 
 <template>

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

@@ -44,6 +44,7 @@ watch(
 	() => formData.value,
 	(val) => {
 		if (val) {
+			console.log('formData changed:', val)
 			emit('update', val)
 		}
 	},
@@ -56,7 +57,6 @@ watch(
 	props.data,
 	(newVal) => {
 		if (newVal) {
-			formData.value = newVal
 			headers.value = newVal.heads.length ? newVal.heads : [{ name: '', value: '' }]
 			params.value = newVal.params.length ? newVal.params : [{ name: '', value: '' }]
 			body.value = newVal.body.data.length
@@ -66,25 +66,39 @@ watch(
 	},
 	{
 		immediate: true,
-		deep: true
+		once: true
 	}
 )
 
-watch(headers.value, (newVal) => {
-	if (newVal) {
-		formData.value.heads = newVal.filter((item) => item.name || item.value)
-	}
-})
-watch(params.value, (newVal) => {
-	if (newVal) {
-		formData.value.params = newVal.filter((item) => item.name || item.value)
-	}
-})
-watch(body.value, (newVal) => {
-	if (newVal) {
-		formData.value.body.data = newVal.filter((item) => item.key || item.value)
-	}
-})
+watch(
+	headers.value,
+	(newVal) => {
+		if (newVal) {
+			formData.value.heads = newVal.filter((item) => item.name || item.value)
+		}
+	},
+	{ deep: true }
+)
+
+watch(
+	params.value,
+	(newVal) => {
+		if (newVal) {
+			formData.value.params = newVal.filter((item) => item.name || item.value)
+		}
+	},
+	{ deep: true }
+)
+
+watch(
+	body.value,
+	(newVal) => {
+		if (newVal) {
+			formData.value.body.data = newVal.filter((item) => item.key || item.value)
+		}
+	},
+	{ deep: true }
+)
 
 const handleAddHeader = (index: number) => {
 	if (index === headers.value.length - 1) {
@@ -340,7 +354,7 @@ const handleSaveAuthorization = () => {
 						<el-input-number
 							v-model="formData.timeout_config.max_read_timeout"
 							:min="1"
-							:max="10"
+							:max="600"
 							controls-position="right"
 							style="width: 100%"
 							suffix="s"
@@ -351,7 +365,7 @@ const handleSaveAuthorization = () => {
 						<el-input-number
 							v-model="formData.timeout_config.max_write_timeout"
 							:min="1"
-							:max="10"
+							:max="600"
 							controls-position="right"
 							style="width: 100%"
 							suffix="s"

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

@@ -46,19 +46,6 @@ watch(
 	}
 )
 
-watch(
-	props.data,
-	(newVal) => {
-		if (newVal) {
-			formData.value = newVal
-		}
-	},
-	{
-		immediate: true,
-		deep: true
-	}
-)
-
 const handleInputVarChange = (val: { value: string; type: string }) => {
 	if (inputVar.value) {
 		inputVar.value.value = val.value

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

@@ -55,19 +55,6 @@ watch(
 	}
 )
 
-watch(
-	props.data,
-	(newVal) => {
-		if (newVal) {
-			formData.value = newVal
-		}
-	},
-	{
-		immediate: true,
-		deep: true
-	}
-)
-
 const handleInputVarChange = (val: { value: string; type: string }) => {
 	if (inputVar.value) {
 		inputVar.value.value = val.value

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

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-import { watch, ref, computed } from 'vue'
-import VarSelect from '@/nodes/_base/VarSelect.vue'
-import VarInput from '@/nodes/_base/VarInput.vue'
+import { watch, ref } from 'vue'
 import Condition from '@/nodes/_base/condition/index.vue'
 import LoopVar from './components/LoopVar.vue'
 import { IconButton } from '@repo/ui'
 
 import type { LoopData } from './index'
-import type { NodeVariableType, ConditionType } from '@/nodes/Interface'
+import type { ConditionType } from '@/nodes/Interface'
 
 const props = defineProps<{
 	data: LoopData
@@ -31,19 +29,6 @@ watch(
 	}
 )
 
-watch(
-	props.data,
-	(newVal) => {
-		if (newVal) {
-			formData.value = newVal
-		}
-	},
-	{
-		immediate: true,
-		deep: true
-	}
-)
-
 const handleAddLoopVar = () => {
 	formData.value.variables.push({
 		name: '',

apps/web/src/views/Editor.vue

@@ -82,6 +82,7 @@
 					:id="nodeID"
 					:workflow="workflow!"
 					@update:node:data="hangleUpdateNodeData"
+					@run-node="handleRunNode"
 					v-model:visible="setterVisible"
 				/>
 				<el-popover
@@ -121,7 +122,13 @@ import { Workflow, useDragAndDrop } from '@repo/workflow'
 import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
 import { useRunnerStore } from '@/store/modules/runner.store'
 
-import type { IWorkflow, XYPosition, Connection, ConnectStartEvent } from '@repo/workflow'
+import type {
+	IWorkflow,
+	XYPosition,
+	Connection,
+	ConnectStartEvent,
+	IWorkflowNode
+} from '@repo/workflow'
 
 const layout = inject<{ setMainStyle: (style: CSSProperties) => void }>('layout')
 
@@ -691,23 +698,15 @@ const handleSelectNode = (id: string) => {
 /**
  * 修改节点数据
  */
-const hangleUpdateNodeData = (id: string, data: any) => {
-	const node = workflow.value?.nodes.find((node) => node.id === id)
-
+const hangleUpdateNodeData = (node: IWorkflowNode) => {
 	if (node && !isPendingCreate(node)) {
 		if (pendingSetterInit.has(id)) {
 			pendingSetterInit.delete(id)
 			return
 		}
-		const nextData = {
-			...node.data,
-			...data
-		}
-
-		node.data = nextData
 
 		if (node.nodeType === 'if-else') {
-			const cases = nextData.cases || []
+			const cases = node.data?.cases || []
 			const offsetHeight = (cases.length > 1 ? cases.length - 1 : 0) * 32
 			node.height = 96 + offsetHeight
 		}