From 090183a2877f30b92979c1bd981be65597955063 Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Mon, 13 Apr 2026 15:17:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20code=E4=BB=A3=E7=A0=81=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/flow/components/ParamsDrawer.vue | 901 +++++++++++++--------
 src/views/flow/config.js                   |   5 +-
 src/views/flow/nodes/function/codeNode.js  |  10 -
 src/views/flow/nodes/function/codeNode.vue | 626 +-------------
 4 files changed, 566 insertions(+), 976 deletions(-)

diff --git a/src/views/flow/components/ParamsDrawer.vue b/src/views/flow/components/ParamsDrawer.vue
index b69047f..f482552 100644
--- a/src/views/flow/components/ParamsDrawer.vue
+++ b/src/views/flow/components/ParamsDrawer.vue
@@ -1,65 +1,25 @@
 <template>
   <el-drawer
       v-model="props.drawer"
+      custom-class="custom-drawer-header"
+      class="no-header-margin"
       :title="props.data.properties?.name || '参数配置'"
       :before-close="handleClose"
   >
     <div class="input__container" v-if="props.data.type === 'start'">
-      <div class="title">
-        <div class="left">
-          <div class="tag"></div>
-          <div class="text">输入</div>
-        </div>
-        
-        <div class="right">
-          <el-button
-            @click="addFormItem('inputParams')"
-            :circle="true"
-            class="addFormItem"
-          >
-            <el-icon :size="20"><Plus /></el-icon>
-          </el-button>
-        </div>
-      </div>
-      <el-form
-        :inline="true"
-        :model="formData"
-        :rules="rules"
-        ref="dynamicForm"
-        label-position="top"
-        label-width="auto"
-      >
-        <FormItemRecursive
-          formType="input"
-          :current-list="formData.inputParams"
-          prop-path="inputParams"
-          :depth="0"
-          :is-first-level="true"
-          :endDepth="2"
-          :parent-path="[]"
-          @delete-item="(path) => deleteTopLevelItem(path, 'inputParams')"
-        />
-      </el-form>
-    </div>
-
-    <div v-if="['currentLoop', 'serviceNode'].includes(props.data.type)">
-      <div class="input__container">
-        <div class="title">
-          <div class="left">
-            <div class="tag"></div>
-            <div class="text">输入</div>
-          </div>
-          <div class="right">
+      <el-collapse v-model="activeNames">
+        <el-collapse-item name="1" icon-position="left">
+          <template #title>
+            输入参数
             <el-button
               :circle="true"
-              @click="addFormItem('nodeParams')"
+              size="small"
+              @click="(e) => addFormItem(e, 'nodeParams')"
               class="addFormItem"
             >
-              <el-icon :size="20"><Plus /></el-icon>
+              <el-icon :size="14"><Plus /></el-icon>
             </el-button>
-          </div>
-        </div>
-        <div class="form__container">
+          </template>
           <el-form
             :inline="true"
             :model="formData"
@@ -67,152 +27,373 @@
             ref="dynamicForm"
             label-position="top"
             label-width="auto"
-          >
-            <div v-for="(property, index) in formData.nodeParams" :key="index">
-              <el-row>
-                <el-form-item
-                  :label="index === 0 ? '参数名' : ''"
-                  :prop="`nodeParams.${index}.name`"
-                  :rules="[
-                    { required: true, message: '请输入参数名', trigger: 'blur' },
-                  ]"
-                >
-                  <el-input
-                    :disabled="property?.disabled || false"
-                    class="param-name"
-                    v-model="property.name"
-                    placeholder="请输入"
-                    clearable
-                  />
-                </el-form-item>
-                <el-form-item
-                  :label="index === 0 ? '参数值' : ''"
-                  :prop="`nodeParams.${index}.type`"
-                >
-                  <el-select
-                    v-model="property.type"
-                    class="param-type"
-                    @change="handleTypeChange(index)"
-                  >
-                    <el-option label="引用" value="quote" />
-                    <el-option label="输入" value="input" />
-                  </el-select>
-                  <el-form-item
-                    v-if="property.type === 'input'"
-                    :rules="[
-                      {
-                        required: property?.required ?? true,
-                        message: '请输入参数值',
-                        trigger: 'blur',
-                      },
-                    ]"
-                    :prop="`nodeParams.${index}.input`"
-                  >
-                    <el-input-number
-                      class="param-value"
-                      v-if="property.componentType === 'number'"
-                      v-model="property.input"
-                      :min="0"
-                      :max="property.max || Infinity"
-                      :controls="false"
-                      :step-strictly="true"
-                      placeholder="请输入"
-                      clearable
-                    />
-                    <el-select
-                      v-model="property.input"
-                      class="param-value"
-                      v-else-if="property.componentType === 'select'"
-                    >
-                      <el-option
-                        v-for="item in property.selectOptions"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
-                    </el-select>
-                    <el-input
-                      class="param-value"
-                      v-else
-                      v-model="property.input"
-                      placeholder="请输入"
-                      clearable
-                    />
-                  </el-form-item>
-                  <el-form-item
-                    v-if="property.type === 'quote'"
-                    :rules="[
-                      {
-                        required: true,
-                        message: '请选择参数值',
-                        trigger: 'blur',
-                      },
-                    ]"
-                    :prop="`nodeParams.${index}.quote`"
-                  >
-                    <el-cascader
-                      :ref="
-                        (el) => {
-                          if (el) cascaderRefs[index] = el;
-                        }
-                      "
-                      v-model="property.quote"
-                      :checkStrictly="true"
-                      :options="quoteOptions"
-                      placeholder="请选择"
-                      @visible-change="
-                        (visible) => visibleChange(visible, index, property.quote)
-                      "
-                      @change="(value) => cascaderChange(value, index)"
-                    />
-                  </el-form-item>
-                </el-form-item>
-              </el-row>
-            </div>
-          </el-form>
-        </div>
-      </div>
-
-      <div class="output__container">
-        <div class="title">
-          <div class="left">
-            <div class="tag"></div>
-            <div class="text">输出</div>
-          </div>
-          <div class="right">
-            <el-button
-              @click="addFormItem('outputParams')"
-              class="addFormItem"
-            >
-              <el-icon :size="20"><Plus /></el-icon>
-            </el-button>
-          </div>
-        </div>
-
-        <div class="form__container">
-          <el-form
-            :inline="true"
-            :model="formData"
-            label-position="top"
-            label-width="auto"
-            :rules="outputRules"
-            ref="outputFormRef"
           >
             <FormItemRecursive
-              formType="output"
-              :current-list="formData.outputParams"
-              prop-path="outputParams"
+              formType="input"
+              :current-list="formData.inputParams"
+              prop-path="inputParams"
               :depth="0"
               :is-first-level="true"
               :endDepth="2"
               :parent-path="[]"
-              @delete-item="(path) => deleteTopLevelItem(path, 'outputParams')"
+              @delete-item="(path) => deleteTopLevelItem(path, 'inputParams')"
             />
           </el-form>
-        </div>
-      </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+
+    <div v-if="['currentLoop', 'serviceNode'].includes(props.data.type)">
+      <el-collapse v-model="activeNames">
+        <el-collapse-item name="1" icon-position="left">
+          <template #title>
+            输入参数
+            <el-button
+              :circle="true"
+              size="small"
+              @click="(e) => addFormItem(e, 'nodeParams')"
+              class="addFormItem"
+            >
+              <el-icon :size="14"><Plus /></el-icon>
+            </el-button>
+          </template>
+          <div class="form__container">
+            <el-form
+              :inline="true"
+              :model="formData"
+              :rules="rules"
+              ref="dynamicForm"
+              label-position="top"
+              label-width="auto"
+            >
+              <div v-for="(property, index) in formData.nodeParams" :key="index">
+                <el-row>
+                  <el-form-item
+                    :label="index === 0 ? '参数名' : ''"
+                    :prop="`nodeParams.${index}.name`"
+                    :rules="[
+                      { required: true, message: '请输入参数名', trigger: 'blur' },
+                    ]"
+                  >
+                    <el-input
+                      :disabled="property?.disabled || false"
+                      class="param-name"
+                      v-model="property.name"
+                      placeholder="请输入"
+                      clearable
+                    />
+                  </el-form-item>
+                  <el-form-item
+                    :label="index === 0 ? '参数值' : ''"
+                    :prop="`nodeParams.${index}.type`"
+                  >
+                    <el-select
+                      v-model="property.type"
+                      class="param-type"
+                      @change="handleTypeChange(index)"
+                    >
+                      <el-option label="引用" value="quote" />
+                      <el-option label="输入" value="input" />
+                    </el-select>
+                    <el-form-item
+                      v-if="property.type === 'input'"
+                      :rules="[
+                        {
+                          required: property?.required ?? true,
+                          message: '请输入参数值',
+                          trigger: 'blur',
+                        },
+                      ]"
+                      :prop="`nodeParams.${index}.input`"
+                    >
+                      <el-input-number
+                        class="param-value"
+                        v-if="property.componentType === 'number'"
+                        v-model="property.input"
+                        :min="0"
+                        :max="property.max || Infinity"
+                        :controls="false"
+                        :step-strictly="true"
+                        placeholder="请输入"
+                        clearable
+                      />
+                      <el-select
+                        v-model="property.input"
+                        class="param-value"
+                        v-else-if="property.componentType === 'select'"
+                      >
+                        <el-option
+                          v-for="item in property.selectOptions"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                      <el-input
+                        class="param-value"
+                        v-else
+                        v-model="property.input"
+                        placeholder="请输入"
+                        clearable
+                      />
+                    </el-form-item>
+                    <el-form-item
+                      v-if="property.type === 'quote'"
+                      :rules="[
+                        {
+                          required: true,
+                          message: '请选择参数值',
+                          trigger: 'blur',
+                        },
+                      ]"
+                      :prop="`nodeParams.${index}.quote`"
+                    >
+                      <el-cascader
+                        :ref="
+                          (el) => {
+                            if (el) cascaderRefs[index] = el;
+                          }
+                        "
+                        v-model="property.quote"
+                        :checkStrictly="true"
+                        :options="quoteOptions"
+                        placeholder="请选择"
+                        @visible-change="
+                          (visible) => visibleChange(visible, index, property.quote)
+                        "
+                        @change="(value) => cascaderChange(value, index)"
+                      />
+                    </el-form-item>
+                  </el-form-item>
+                  <el-button
+                    :icon="Minus"
+                    circle
+                    size="small"
+                    @click="handleDelete(index)"
+                    class="deleteBtn"
+                  />
+                </el-row>
+              </div>
+            </el-form>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item name="2" icon-position="left">
+          <template #title>
+            输出参数
+            <el-button
+              :circle="true"
+              size="small"
+              @click="(e) => addFormItem(e, 'outputParams')"
+              class="addFormItem"
+            >
+              <el-icon :size="14"><Plus /></el-icon>
+            </el-button>
+          </template>
+          <div class="form__container">
+            <el-form
+              :inline="true"
+              :model="formData"
+              label-position="top"
+              label-width="auto"
+              :rules="outputRules"
+              ref="outputFormRef"
+            >
+              <FormItemRecursive
+                formType="output"
+                :current-list="formData.outputParams"
+                prop-path="outputParams"
+                :depth="0"
+                :is-first-level="true"
+                :endDepth="2"
+                :parent-path="[]"
+                @delete-item="(path) => deleteTopLevelItem(path, 'outputParams')"
+              />
+            </el-form>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
     </div>
     
+    <div v-if="props.data.type === 'code'">
+      <el-collapse v-model="activeNames">
+        <el-collapse-item name="1" icon-position="left">
+          <template #title>
+            输入参数
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="这里输入的变量可以被下方的代码引用。"
+              placement="top"
+            >
+              <el-icon class="header-icon" style="margin-left: 6px">
+                <info-filled />
+              </el-icon>
+            </el-tooltip>
+          </template>
+          <div class="form__container">
+            <el-form
+              :inline="true"
+              :model="formData"
+              :rules="rules"
+              ref="dynamicForm"
+              label-position="top"
+              label-width="auto"
+            >
+              <div v-for="(property, index) in formData.nodeParams" :key="index">
+                <el-row v-if="property.name !== 'code'">
+                  <el-form-item
+                    :label="index === 0 ? '参数名' : ''"
+                    :prop="`nodeParams.${index}.name`"
+                    :rules="[
+                      { required: true, message: '请输入参数名', trigger: 'blur' },
+                    ]"
+                  >
+                    <el-input
+                      :disabled="property?.disabled || false"
+                      class="param-name"
+                      v-model="property.name"
+                      placeholder="请输入"
+                      clearable
+                    />
+                  </el-form-item>
+                  <el-form-item
+                    :label="index === 0 ? '参数值' : ''"
+                    :prop="`nodeParams.${index}.type`"
+                  >
+                    <el-select
+                      v-model="property.type"
+                      class="param-type"
+                      @change="handleTypeChange(index)"
+                    >
+                      <el-option label="引用" value="quote" />
+                      <el-option label="输入" value="input" />
+                    </el-select>
+                    <el-form-item
+                      v-if="property.type === 'input'"
+                      :rules="[
+                        {
+                          required: property?.required ?? true,
+                          message: '请输入参数值',
+                          trigger: 'blur',
+                        },
+                      ]"
+                      :prop="`nodeParams.${index}.input`"
+                    >
+                      <el-input-number
+                        class="param-value"
+                        v-if="property.componentType === 'number'"
+                        v-model="property.input"
+                        :min="0"
+                        :max="property.max || Infinity"
+                        :controls="false"
+                        :step-strictly="true"
+                        placeholder="请输入"
+                        clearable
+                      />
+                      <el-select
+                        v-model="property.input"
+                        class="param-value"
+                        v-else-if="property.componentType === 'select'"
+                      >
+                        <el-option
+                          v-for="item in property.selectOptions"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                      <el-input
+                        class="param-value"
+                        v-else
+                        v-model="property.input"
+                        placeholder="请输入"
+                        clearable
+                      />
+                    </el-form-item>
+                    <el-form-item
+                      v-if="property.type === 'quote'"
+                      :rules="[
+                        {
+                          required: true,
+                          message: '请选择参数值',
+                          trigger: 'blur',
+                        },
+                      ]"
+                      :prop="`nodeParams.${index}.quote`"
+                    >
+                      <el-cascader
+                        :ref="
+                          (el) => {
+                            if (el) cascaderRefs[index] = el;
+                          }
+                        "
+                        v-model="property.quote"
+                        :checkStrictly="true"
+                        :options="quoteOptions"
+                        placeholder="请选择"
+                        @visible-change="
+                          (visible) => visibleChange(visible, index, property.quote)
+                        "
+                        @change="(value) => cascaderChange(value, index)"
+                      />
+                    </el-form-item>
+                  </el-form-item>
+                  <el-button
+                    :icon="Minus"
+                    circle
+                    size="small"
+                    @click="handleDelete(index)"
+                    class="deleteBtn"
+                  />
+                </el-row>
+              </div>
+            </el-form>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item title="代码" name="2" icon-position="left">
+          <div class="code__container">
+            <div ref="codeRef" style="width: 100%; height: 100%"></div>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item name="3" icon-position="left">
+          <template #title>
+            输出参数
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="这里定义的输出变量可以被后续节点引用。"
+              placement="top"
+            >
+              <el-icon class="header-icon" style="margin-left: 6px">
+                <info-filled />
+              </el-icon>
+            </el-tooltip>
+          </template>
+          <div class="form__container">
+            <el-form
+              :inline="true"
+              :model="formData"
+              label-position="top"
+              label-width="auto"
+              :rules="outputRules"
+              ref="outputFormRef"
+            >
+              <FormItemRecursive
+                formType="output"
+                :current-list="formData.outputParams"
+                prop-path="outputParams"
+                :depth="0"
+                :is-first-level="true"
+                :endDepth="2"
+                :parent-path="[]"
+                @delete-item="(path) => deleteTopLevelItem(path, 'outputParams')"
+              />
+            </el-form>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+
+    </div>
 
     <template #footer>
       <el-button @click="handleClose">关闭</el-button>
@@ -223,9 +404,12 @@
 
 <script setup>
 import FormItemRecursive from "./FormItemRecursive.vue";
-import { Plus } from "@element-plus/icons-vue";
+import { Plus, Minus } from "@element-plus/icons-vue";
 import { getInput, filterEmptyName } from "@/utils/flow";
 import { emitter } from "@/utils/eventBus";
+import "vue3-json-viewer/dist/index.css";
+import * as monaco from 'monaco-editor';
+import { nextTick, onUnmounted, watch } from "vue";
 
 const props = defineProps({
     drawer: Boolean,
@@ -242,6 +426,9 @@ const formData = reactive({
 
 const rules = reactive({});
 
+const codeRef = ref()
+let editorInstance
+
 const handleClose = (done) => {
   const filteredObj = {
     inputParams: filterEmptyName(formData.inputParams),
@@ -276,7 +463,8 @@ const deleteTopLevelItem = (fullPath, propPath) => {
   currentLevel.splice(lastIndex, 1);
 }
 
-const addFormItem = (type) => {
+const addFormItem = (e, type) => {
+  e.stopPropagation();
   const obj ={
     name: "",
     type: type === 'nodeParams' ? 'input' : 'string',
@@ -337,6 +525,95 @@ const visibleChange = (value, index, quote) => {
   }
 };
 
+const activeNames = ref(['1', '2'])
+
+function hasErrors() {
+  const model = editorInstance.getModel();
+  if (!model) return false;
+  
+  // 获取当前模型的所有标记
+  const markers = monaco.editor.getModelMarkers({ resource: model.uri });
+  // 检查是否存在错误级别标记
+  return markers.some(marker => marker.severity === monaco.MarkerSeverity.Error);
+}
+
+const initEditor = () => {
+  monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.ES2020,
+    allowNonTsExtensions: true,          // 允许非 ts 扩展名（.js）
+    checkJs: true,                       // 对 .js 文件进行类型检查
+    strict: true,                        // 启用所有严格检查
+    noImplicitAny: false,                  // 禁止隐式 any
+    noUnusedLocals: true,                 // 未使用的局部变量报错（可选）
+    noUnusedParameters: true,              // 未使用的参数报错（可选）
+  });
+
+  // 确保语义验证开启（默认就是开启的，但可以显式设置）
+  monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,          // 开启语义检查
+      noSyntaxValidation: false,             // 开启语法检查
+  });
+
+
+  editorInstance = monaco.editor.create(codeRef.value, {
+    value: [`
+    // 方法定义不能修改
+    function handler(params) {
+      // 返回值是一个可序列化成 json 的 dict 或 object
+      const result ={
+        type: 2,
+        message: params.input
+      }
+      return result
+    }`].join('\n'),
+    language: 'javascript',
+    fontSize: 14,
+    lineNumbers: 'on',
+    roundedSelection: true,
+    scrollBeyondLastLine: false,
+    formatOnPaste: true,
+    formatOnType: true,
+    quickSuggestions: true,
+        suggestOnTriggerCharacters: true,
+        // 自动完成
+        suggest: {
+            showWords: true,
+            showFunctions: true,
+            showVariables: true,
+            showClasses: true,
+            showModules: true,
+        },
+  });
+}
+
+// 设置代码值
+const setValue = (value) => {
+  if (editorInstance) {
+    editorInstance.setValue(value)
+  }
+}
+
+// 销毁编辑器
+const disposeEditor = () => {
+  if (editorInstance) {
+    editorInstance.dispose()
+    editorInstance = null
+  }
+}
+
+watch(
+  () => props.drawer,
+  (newVal) => {
+    if (newVal && props.data.type === 'code') {
+      nextTick(() => {
+        initEditor();
+      });
+    } else {
+      disposeEditor();
+    }
+  }
+);
+
 watch(
   () => props.data,
   () => {
@@ -345,7 +622,17 @@ watch(
     } else if (['currentLoop', 'serviceNode'].includes(props.data.type)) {
       formData.nodeParams = props.data.properties.nodeParams;
       formData.outputParams = props.data.properties.outputParams;
-        console.log('formData', formData)
+    } else if (props.data.type === "code") {
+      formData.nodeParams = props.data.properties.nodeParams;
+      formData.outputParams = props.data.properties.outputParams;
+      const codeParams = props.data.properties.nodeParams.find(item => item.name === 'code')
+      if (codeParams) {
+        nextTick(() => {
+          if (editorInstance) {
+            setValue(codeParams.input)
+          }
+        })
+      }
     }
   },
   {
@@ -354,177 +641,99 @@ watch(
   }
 );
 
+
+onUnmounted(() => {
+  disposeEditor()
+})
 </script>
 <style lang="scss" scoped>
-.input__container {
-  width: 100%;
-  background-color: #fafbfc;
-  padding: 0 16px;
-  border-radius: 8px;
-  box-sizing: border-box;
-
-  .title {
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .left {
-      display: flex;
-      align-items: center;
-
-      .tag {
-        width: 3px;
-        height: 16px;
-        background: #1664ff;
-        border-radius: 0 4px 4px 0;
-        margin-right: 12px;
-      }
-
-      .text {
-        font-size: 16px;
-        font-weight: 700;
-        color: #0c0d0e;
-      }
-    }
-
-    .right {
-      .addFormItem {
-        border: none;
-        background: transparent;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .form__container {
-      margin: 12px 0;
-
-      :deep(.el-row) {
-        align-items: end;
-
-        .el-form-item {
-          margin-right: 12px;
-        }
-        
-        .param-name {
-          width: 160px;
-        }
-
-        .param-type {
-          width: 80px;
-        }
-
-        .param-value {
-          width: 160px;
-        }
-
-      }
-
-      .sub-properties {
-        margin-left: 10px;
-        .zw {
-          margin-left: 15px;
-          &::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: -4px;
-            width: 10px;
-            border-left: 1px solid gray;
-            border-bottom: 1px solid gray;
-            border-bottom-left-radius: 4px;
-            background-color: transparent;
-            height: 24px;
-          }
-        }
-      }
-
-      .gSon-properties {
-        margin-left: 10px;
-        .zw {
-          margin-left: 15px;
-          &::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: -4px;
-            width: 10px;
-            border-left: 1px solid gray;
-            border-bottom: 1px solid gray;
-            border-bottom-left-radius: 4px;
-            background-color: transparent;
-            height: 24px;
-          }
-        }
-      }
-    }
+.addFormItem {
+  margin-left: 12px;
 }
 
-.output__container {
-    width: 100%;
-    background-color: #fafbfc;
-    padding: 0 16px;
-    border-radius: 8px;
-    box-sizing: border-box;
+.form__container {
+  margin: 12px 0;
 
-    .title {
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+  :deep(.el-row) {
+    align-items: end;
 
-      .left {
-        display: flex;
-        align-items: center;
-
-        .tag {
-          width: 3px;
-          height: 16px;
-          background: #1664ff;
-          border-radius: 0 4px 4px 0;
-          margin-right: 12px;
-        }
-
-        .text {
-          font-size: 16px;
-          font-weight: 700;
-          color: #0c0d0e;
-        }
-      }
-
-      .right {
-        .addFormItem {
-          border: none;
-          background: transparent;
-          cursor: pointer;
-        }
-      }
+    .el-form-item {
+      margin-right: 12px;
+    }
+    
+    .param-name {
+      width: 160px;
     }
 
-    .form__container {
-      margin: 12px 0;
+    .param-type {
+      width: 80px;
+    }
 
-      :deep(.el-row) {
-        align-items: end;
+    .param-value {
+      width: 160px;
+    }
 
-        .el-form-item {
-          margin-right: 12px;
-        }
-        
-        .param-name {
-          width: 160px;
-        }
+  }
 
-        .param-type {
-          width: 80px;
-        }
 
-        .param-desc {
-          width: 160px;
-        }
 
+  .sub-properties {
+    margin-left: 10px;
+    .zw {
+      margin-left: 15px;
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: -4px;
+        width: 10px;
+        border-left: 1px solid gray;
+        border-bottom: 1px solid gray;
+        border-bottom-left-radius: 4px;
+        background-color: transparent;
+        height: 24px;
       }
     }
   }
+
+  .gSon-properties {
+    margin-left: 10px;
+    .zw {
+      margin-left: 15px;
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: -4px;
+        width: 10px;
+        border-left: 1px solid gray;
+        border-bottom: 1px solid gray;
+        border-bottom-left-radius: 4px;
+        background-color: transparent;
+        height: 24px;
+      }
+    }
+  }
+
+  .deleteBtn {
+    margin-bottom: 22px;
+    cursor: pointer;
+  }
+}
+
+.code__container {
+  display: flex;
+  position: relative;
+  text-align: initial;
+  width: 100%;
+  height: 300px;
+  margin: 12px 0;
+}
+</style>
+
+<style lang="scss">
+/* 不加 scoped，全局生效 */
+.no-header-margin .el-drawer__header {
+  margin-bottom: 0 !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/flow/config.js b/src/views/flow/config.js
index e52acdd..80d1593 100644
--- a/src/views/flow/config.js
+++ b/src/views/flow/config.js
@@ -306,7 +306,10 @@ export const collapseList = [
           { name: "input", type: "input", input: "", required: true }
         ],
         outputType: 'json',
-        outputParams: [{ name: 'result', type: 'object', children: [], desc: 'js节点返回'}]
+        outputParams: [{ name: 'result', type: 'object', children: [
+          {name: 'type', type: 'number', desc: '占位属性'},
+          {name: 'message', type: 'string', desc: '占位属性'}
+        ], desc: 'js节点返回'}]
       },
       {
         icon: microphoneSvg,
diff --git a/src/views/flow/nodes/function/codeNode.js b/src/views/flow/nodes/function/codeNode.js
index 703ce9f..fd83fd1 100644
--- a/src/views/flow/nodes/function/codeNode.js
+++ b/src/views/flow/nodes/function/codeNode.js
@@ -144,16 +144,6 @@ class CodeNodeHtmlModel extends HtmlNodeModel {
     this.componentInstance = instance;
   }
 
-  // 验证表单
-  async validateForm() {
-    const result = this.componentInstance.validateForm()
-    return result
-  }
-
-  setCustomProperties() {
-    this.componentInstance.setNodeProperties()
-  }
-
   /**
    * 设置节点属性
    * 包括宽度、高度、文本编辑属性等
diff --git a/src/views/flow/nodes/function/codeNode.vue b/src/views/flow/nodes/function/codeNode.vue
index 01a154a..e1eef4c 100644
--- a/src/views/flow/nodes/function/codeNode.vue
+++ b/src/views/flow/nodes/function/codeNode.vue
@@ -40,196 +40,17 @@
       :nodeType="props.properties.nodeType || 'NONE'"
       :nodeName="props.properties.name"
       :nodeDesc="props.properties.desc"
-      :zoom-state="nodeZoom"
-      @zoom="zoom"
       @setNodeName="setNodeName"
     />
-    <div class="input__container" v-show="nodeZoom" @mousedown="(e) => e.stopPropagation()" @keydown="handleInputKeydown">
-      <div class="title">
-        <div class="left">
-          <div class="tag"></div>
-          <div class="text">输入</div>
-        </div>
-        <div class="right" v-if="properties?.canAddFormItem">
-          <el-button
-            :disabled="flowStore.disableForm"
-            @click="addFormItem"
-            class="addFormItem"
-          >
-            <el-icon :size="20"><Plus /></el-icon>
-          </el-button>
-        </div>
-      </div>
-      <div class="form__container">
-        <el-form
-          :inline="true"
-          :model="formData"
-          :rules="rules"
-          ref="dynamicForm"
-          label-position="top"
-          label-width="auto"
-          :disabled="flowStore.disableForm"
-        >
-          <div v-for="(property, index) in formData.nodeParams" :key="index">
-            <el-row v-if="property.name !== 'code'">
-              <el-form-item
-                :label="index === 0 ? '参数名' : ''"
-                :prop="`nodeParams.${index}.name`"
-                :rules="[
-                  { required: true, message: '请输入参数名', trigger: 'blur' },
-                ]"
-              >
-                <el-input
-                  :disabled="property?.disabled || false"
-                  v-model="property.name"
-                  @keydown="handleInputKeydown"
-                  placeholder="请输入"
-                  clearable
-                />
-              </el-form-item>
-              <el-form-item
-                :label="index === 0 ? '参数值' : ''"
-                :prop="`nodeParams.${index}.type`"
-              >
-                <el-select
-                  v-model="property.type"
-                  @change="handleTypeChange(index)"
-                >
-                  <el-option label="引用" value="quote" />
-                  <el-option label="输入" value="input" />
-                </el-select>
-                <el-form-item
-                  v-if="property.type === 'input'"
-                  :rules="[
-                    {
-                      required: property?.required ?? true,
-                      message: '请输入参数值',
-                      trigger: 'blur',
-                    },
-                  ]"
-                  :prop="`nodeParams.${index}.input`"
-                >
-                  <el-input-number
-                    v-if="property.componentType === 'number'"
-                    v-model="property.input"
-                    :min="0"
-                    :controls="false"
-                    :step-strictly="true"
-                    placeholder="请输入"
-                    clearable
-                    @keydown="handleInputKeydown"
-                  />
-                  <el-select
-                    v-model="property.input"
-                    v-else-if="property.componentType === 'select'"
-                  >
-                    <el-option
-                      v-for="item in property.selectOptions"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                    />
-                  </el-select>
-                  <el-input
-                    @keydown="handleInputKeydown"
-                    v-else
-                    v-model="property.input"
-                    placeholder="请输入"
-                    clearable
-                  />
-                </el-form-item>
-                <el-form-item
-                  v-if="property.type === 'quote'"
-                  :rules="[
-                    {
-                      required: true,
-                      message: '请选择参数值',
-                      trigger: 'blur',
-                    },
-                  ]"
-                  :prop="`nodeParams.${index}.quote`"
-                >
-                  <el-cascader
-                    :ref="
-                      (el) => {
-                        if (el) cascaderRefs[index] = el;
-                      }
-                    "
-                    v-model="property.quote"
-                    :checkStrictly="true"
-                    :options="quoteOptions"
-                    placeholder="请选择"
-                    @visible-change="
-                      (visible) => visibleChange(visible, index, property.quote)
-                    "
-                    @change="(value) => cascaderChange(value, index)"
-                  />
-                </el-form-item>
-              </el-form-item>
-            </el-row>
-          </div>
-        </el-form>
-      </div>
-      <div class="code__container">
-        <div ref="codeRef" style="width: 100%; height: 100%"></div>
-      </div>
-    </div>
-    <div class="output__container" v-show="nodeZoom">
-      <div v-if="props.properties?.outputParams?.length > 0">
-        <div class="title">
-          <div class="left">
-            <div class="tag"></div>
-            <div class="text">输出</div>
-          </div>
-          <div class="right">
-            <el-button
-              :disabled="flowStore.disableForm"
-              @click="addOutputFormItem"
-              class="addFormItem"
-            >
-              <el-icon :size="20"><Plus /></el-icon>
-            </el-button>
-          </div>
-        </div>
-
-        <div class="form__container">
-          <el-form
-            :inline="true"
-            :model="formData"
-            label-position="top"
-            label-width="auto"
-            :rules="outputRules"
-            ref="outputFormRef"
-          >
-            <FormItemRecursive
-              formType="output"
-              :current-list="formData.outputParams"
-              prop-path="outputParams"
-              :depth="0"
-              :is-first-level="true"
-              :endDepth="2"
-              :parent-path="[]"
-              @delete-item="deleteTopLevelItem"
-            />
-          </el-form>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
-import { getInput, initNodeZoom } from "@/utils/flow";
-import { useFlowStore } from "@/store/modules/flow";
-import { Plus } from "@element-plus/icons-vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import NodeTitle from "../../components/NodeTitle.vue";
 import NodeState from "../../components/NodeState.vue";
-import "vue3-json-viewer/dist/index.css";
 import { emitter } from "@/utils/eventBus";
 import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
-import FormItemRecursive from "../common/FormItemRecursive.vue";
-import * as monaco from 'monaco-editor';
 
 const props = defineProps({
   model: Object,
@@ -238,87 +59,6 @@ const props = defineProps({
 
 const emits = defineEmits(["contentChange"]);
 
-const codeRef = ref()
-let editorInstance
-
-const flowStore = useFlowStore();
-
-const formData = reactive({
-  nodeParams: [],
-  outputParams: [],
-});
-
-const rules = reactive({});
-
-const quoteOptions = ref([]);
-const handleTypeChange = (index) => {
-  if (formData.nodeParams[index].type === "input") {
-    formData.nodeParams[index].quote = "";
-  } else {
-    formData.nodeParams[index].input = "";
-    const option = getInput(props.model.id);
-    if (option) {
-      quoteOptions.value = option;
-    }
-  }
-};
-
-const cascaderRefs = ref([]);
-const outputRules = reactive({});
-const cascaderChange = (value, index) => {
-  const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
-  formData.nodeParams[index].quote = value;
-  formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
-};
-
-const addOutputFormItem = () => {
-  formData.outputParams.push({
-    name: "",
-    type: "",
-    desc: "",
-    children: [],
-  });
-};
-
-const dynamicForm = ref();
-const outputFormRef = ref();
-const setNodeProperties = async () => {
-  try {
-    const result = await dynamicForm.value.validate();
-    let flag = true;
-    if (outputFormRef.value) {
-      flag = await outputFormRef.value.validate();
-    }
-    if (hasErrors()) {
-      console.log('编辑器中有错误')
-      return 
-    }
-    if (result && flag) {
-      const data = toRaw(formData);
-      const targetObj = data.nodeParams.find(item => item.name === 'code');
-      if (targetObj) {
-        // 存在：修改该对象的 input 属性
-        targetObj.input = editorInstance.getValue();
-      } else {
-        data.nodeParams.push(
-          { name: "code", type: "input", input: editorInstance.getValue() }
-        )
-      }
-      
-      const properties = lf.getProperties(props.model.id);
-      lf.setProperties(props.model.id, {
-        ...properties,
-        ...data,
-        zoom: nodeZoom.value
-      });
-      emits("contentChange");
-    }
-  } catch {
-    console.log(12323)
-    // dynamicForm.value.clearValidate();
-  }
-};
-
 const setNodeName = (name) => {
   const properties = lf.getProperties(props.model.id);
   lf.setProperties(props.model.id, {
@@ -333,203 +73,6 @@ const inputJsonData = ref({});
 const outputJsonData = ref({});
 const errorInfoData = ref('');
 
-const visibleChange = (value, index, quote) => {
-  if (value) {
-    const option = getInput(props.model.id);
-    if (option) {
-      quoteOptions.value = option;
-      const currentValue = [...quote];
-      // 强制级联选择器重新处理选中值与选项的匹配
-      if (cascaderRefs.value[index]) {
-        // 等待DOM更新后再设置值，确保新options已生效
-        setTimeout(() => {
-          // 如果当前有选中值，重新设置一次以触发重新匹配
-          if (currentValue.length) {
-            formData.nodeParams[index].quote = [];
-            // 确保响应式更新
-            setTimeout(() => {
-              formData.nodeParams[index].quote = currentValue;
-            }, 0);
-          }
-          // 手动触发级联选择器的重新渲染
-          // cascaderRefs.value[index].updatePopper();
-        }, 0);
-      }
-    }
-  }
-};
-
-const validateForm = async () => {
-  try {
-    const result = await dynamicForm.value.validate();
-    if (result) {
-      return { valid: true, message: "验证通过" };
-    } else {
-      return { valid: false, message: "验证失败" };
-    }
-  } catch {
-    return { valid: false, message: "验证失败" };
-  }
-};
-
-const addFormItem = () => {
-  formData.nodeParams.push({
-    name: "",
-    type: "input",
-    desc: "",
-    required: false,
-    children: [],
-  });
-  emits("contentChange");
-};
-
-// 删除顶层表单项
-const deleteTopLevelItem = (fullPath) => {
-  // 从顶层数据开始查找
-  let currentLevel = formData.outputParams;
-
-  // 遍历路径（除最后一个索引，因为最后一个是要删除的项）
-  for (let i = 0; i < fullPath.length - 1; i++) {
-    const index = fullPath[i];
-    // 进入下一层级
-    currentLevel = currentLevel[index].children;
-  }
-
-  // 最后一个索引是当前层级要删除的项
-  const lastIndex = fullPath[fullPath.length - 1];
-  currentLevel.splice(lastIndex, 1);
-  emits("contentChange");
-};
-
-const nodeZoom = ref(props?.properties?.zoom ?? true)
-const zoom = (flag) => {
-  nodeZoom.value = flag
-  initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
-}
-
-watch(
-  () => props.properties,
-  () => {
-    if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
-
-      // .filter(item => item.name !== 'code')
-      formData.nodeParams = props.properties.nodeParams;
-      const codeParams = props.properties.nodeParams.find(item => item.name === 'code')
-      if (codeParams) {
-        nextTick(() => {
-          if (editorInstance) {
-            setValue(codeParams.input)
-          }
-        })
-      }
-      const option = getInput(props.model.id);
-      if (option) {
-        quoteOptions.value = option;
-      }
-
-      nextTick(() => {
-        initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
-      })
-    }
-    if (
-      props.properties.outputParams &&
-      props.properties.outputParams.length > 0
-    ) {
-      formData.outputParams = props.properties.outputParams;
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
-
-const handleInputKeydown = (e) => {
-  // 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
-  e.stopPropagation();
-  // 可选：明确放行 Ctrl+V（增强兼容性）
-  if ((e.ctrlKey || e.metaKey) && e.key === "v") {
-    e.returnValue = true; // 允许默认粘贴行为
-  }
-};
-
-function hasErrors() {
-  const model = editorInstance.getModel();
-  if (!model) return false;
-  
-  // 获取当前模型的所有标记
-  const markers = monaco.editor.getModelMarkers({ resource: model.uri });
-  // 检查是否存在错误级别标记
-  return markers.some(marker => marker.severity === monaco.MarkerSeverity.Error);
-}
-
-const initEditor = () => {
-  monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-    target: monaco.languages.typescript.ScriptTarget.ES2020,
-    allowNonTsExtensions: true,          // 允许非 ts 扩展名（.js）
-    checkJs: true,                       // 对 .js 文件进行类型检查
-    strict: true,                        // 启用所有严格检查
-    noImplicitAny: false,                  // 禁止隐式 any
-    noUnusedLocals: true,                 // 未使用的局部变量报错（可选）
-    noUnusedParameters: true,              // 未使用的参数报错（可选）
-  });
-
-  // 确保语义验证开启（默认就是开启的，但可以显式设置）
-  monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-      noSemanticValidation: false,          // 开启语义检查
-      noSyntaxValidation: false,             // 开启语法检查
-  });
-
-
-  editorInstance = monaco.editor.create(codeRef.value, {
-    value: [`
-    // 方法定义不能修改
-    function handler(params) {
-        // 返回值是一个可序列化成 json 的 dict 或 object
-        const ret={
-            result: {
-                type: 2,
-                message: params.input
-            }
-            
-        }
-        return ret
-    }`].join('\n'),
-    language: 'javascript',
-    fontSize: 14,
-    lineNumbers: 'on',
-    roundedSelection: true,
-    scrollBeyondLastLine: false,
-    formatOnPaste: true,
-    formatOnType: true,
-    quickSuggestions: true,
-        suggestOnTriggerCharacters: true,
-        // 自动完成
-        suggest: {
-            showWords: true,
-            showFunctions: true,
-            showVariables: true,
-            showClasses: true,
-            showModules: true,
-        },
-  });
-}
-
-// 设置代码值
-const setValue = (value) => {
-  if (editorInstance) {
-    editorInstance.setValue(value)
-  }
-}
-
-// 销毁编辑器
-const disposeEditor = () => {
-  if (editorInstance) {
-    editorInstance.dispose()
-    editorInstance = null
-  }
-}
-
 onMounted(() => {
   emitter.on("changeNodeState", (data) => {
     if (data.nodeId === props.model.id) {
@@ -559,179 +102,24 @@ onMounted(() => {
     }
   });
 
-  initEditor()
+  emitter.on("setProperties", (data) => {
+    if (data.id === props.model.id) {
+      emits("contentChange");
+    }
+  });
 })
 
 onUnmounted(() => {
   emitter.off("changeNodeState");
   emitter.off("contentChange");
-  disposeEditor()
+  emitter.off("setProperties");
 });
 
-defineExpose({
-  validateForm,
-  setNodeProperties,
-});
 </script>
 
 <style lang="scss" scoped>
 .node__container {
   width: 100%;
   height: auto;
-
-  .input__container {
-    width: 100%;
-    background-color: #fafbfc;
-    padding: 0 16px;
-    border-radius: 8px;
-    box-sizing: border-box;
-
-    .title {
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .left {
-        display: flex;
-        align-items: center;
-
-        .tag {
-          width: 3px;
-          height: 16px;
-          background: #1664ff;
-          border-radius: 0 4px 4px 0;
-          margin-right: 12px;
-        }
-
-        .text {
-          font-size: 16px;
-          font-weight: 700;
-          color: #0c0d0e;
-        }
-      }
-
-      .right {
-        .addFormItem {
-          border: none;
-          background: transparent;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .code__container {
-      display: flex;
-      position: relative;
-      text-align: initial;
-      width: 100%;
-      height: 300px;
-      margin: 12px 0;
-    }
-
-    .form__container {
-      margin: 12px 0;
-
-      .sub-properties {
-        margin-left: 10px;
-        .zw {
-          margin-left: 15px;
-          &::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: -4px;
-            width: 10px;
-            border-left: 1px solid gray;
-            border-bottom: 1px solid gray;
-            border-bottom-left-radius: 4px;
-            background-color: transparent;
-            height: 24px;
-          }
-        }
-      }
-
-      .gSon-properties {
-        margin-left: 10px;
-        .zw {
-          margin-left: 15px;
-          &::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: -4px;
-            width: 10px;
-            border-left: 1px solid gray;
-            border-bottom: 1px solid gray;
-            border-bottom-left-radius: 4px;
-            background-color: transparent;
-            height: 24px;
-          }
-        }
-      }
-    }
-  }
-
-  .output__container {
-    width: 100%;
-    background-color: #fafbfc;
-    padding: 0 16px;
-    border-radius: 8px;
-    box-sizing: border-box;
-
-    .title {
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .left {
-        display: flex;
-        align-items: center;
-
-        .tag {
-          width: 3px;
-          height: 16px;
-          background: #1664ff;
-          border-radius: 0 4px 4px 0;
-          margin-right: 12px;
-        }
-
-        .text {
-          font-size: 16px;
-          font-weight: 700;
-          color: #0c0d0e;
-        }
-      }
-
-      .right {
-        .addFormItem {
-          border: none;
-          background: transparent;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .form__container {
-      margin: 12px 0;
-    }
-  }
-
-  :deep(.el-row) {
-    align-items: end;
-
-    .el-input {
-      --el-input-width: 148px;
-    }
-
-    .el-select {
-      --el-select-width: 148px;
-    }
-
-    .el-cascader {
-      --el-form-inline-content-width: 148px;
-    }
-  }
 }
 </style>