perf: optimization codemirror component

ui/src/components/codemirror-editor/index.vue

@@ -1,16 +1,50 @@
 <template>
-  <Codemirror
-    v-bind="$attrs"
-    ref="cmRef"
-    :extensions="extensions"
-    :style="codemirrorStyle"
-    :tab-size="4"
-    :autofocus="true"
-  />
+  <div class="codemirror-editor w-full">
+    <Codemirror
+      v-model="data"
+      ref="cmRef"
+      :extensions="extensions"
+      :style="codemirrorStyle"
+      :tab-size="4"
+      :autofocus="true"
+      v-bind="$attrs"
+    />
+
+    <div class="codemirror-editor__footer">
+      <el-button text type="info" @click="openCodemirrorDialog" class="magnify">
+        <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
+      </el-button>
+    </div>
+    <!-- Codemirror 弹出层 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="$t('views.functionLib.functionForm.form.param.code')"
+      append-to-body
+      fullscreen
+    >
+      <Codemirror
+        v-model="cloneContent"
+        :extensions="extensions"
+        :style="codemirrorStyle"
+        :tab-size="4"
+        :autofocus="true"
+        style="
+          height: calc(100vh - 160px) !important;
+          border: 1px solid #bbbfc4;
+          border-radius: 4px;
+        "
+      />
+      <template #footer>
+        <div class="dialog-footer mt-24">
+          <el-button type="primary" @click="submitDialog"> {{ $t('common.confirm') }}</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 import { python } from '@codemirror/lang-python'
 import { oneDark } from '@codemirror/theme-one-dark'
@@ -19,6 +53,19 @@ import FunctionApi from '@/api/function-lib'
 
 defineOptions({ name: 'CodemirrorEditor' })
 
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue', 'submitDialog'])
+const data = computed({
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+
 function getRangeFromLineAndColumn(state: any, line: number, column: number, end_column?: number) {
   const l = state.doc.line(line)
   const form = l.from + column
@@ -52,9 +99,39 @@ const regexpLinter = linter(async (view) => {
 })
 const extensions = [python(), regexpLinter, oneDark]
 const codemirrorStyle = {
-  height: '210px!important'
+  height: '210px!important',
+  width: '100%'
 }
 const cmRef = ref<InstanceType<typeof Codemirror>>()
+// 弹出框相关代码
+const dialogVisible = ref<boolean>(false)
+
+const cloneContent = ref<string>('')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    emit('submitDialog', cloneContent.value)
+  }
+})
+
+const openCodemirrorDialog = () => {
+  cloneContent.value = props.modelValue
+  dialogVisible.value = true
+}
+
+function submitDialog() {
+  emit('submitDialog', cloneContent.value)
+  dialogVisible.value = false
+}
 </script>
 
-<style lang="scss"></style>
+<style lang="scss" scoped>
+.codemirror-editor {
+  position: relative;
+  &__footer {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+  }
+}
+</style>

ui/src/views/function-lib/component/FunctionFormDrawer.vue

@@ -133,13 +133,8 @@
         </el-text>
       </h4>
 
-      <div class="function-CodemirrorEditor mb-8" v-if="showEditor">
-        <CodemirrorEditor v-model="form.code" />
-        <div class="function-CodemirrorEditor__footer">
-          <el-button text type="info" @click="openCodemirrorDialog" class="magnify">
-            <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
-          </el-button>
-        </div>
+      <div class="mb-8" v-if="showEditor">
+        <CodemirrorEditor v-model="form.code" @submitDialog="submitCodemirrorEditor" />
       </div>
       <h4 class="title-decoration-1 mb-16 mt-16">
         {{ $t('common.param.outputParam') }}
@@ -162,27 +157,6 @@
       </div>
     </template>
 
-    <!-- Codemirror 弹出层 -->
-    <el-dialog
-      v-model="dialogVisible"
-      :title="$t('views.functionLib.functionForm.form.param.code')"
-      append-to-body
-      fullscreen
-    >
-      <CodemirrorEditor
-        v-model="cloneContent"
-        style="
-          height: calc(100vh - 160px) !important;
-          border: 1px solid #bbbfc4;
-          border-radius: 4px;
-        "
-      />
-      <template #footer>
-        <div class="dialog-footer mt-24">
-          <el-button type="primary" @click="submitDialog"> {{ $t('common.confirm') }}</el-button>
-        </div>
-      </template>
-    </el-dialog>
     <FunctionDebugDrawer ref="FunctionDebugDrawerRef" />
     <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
   </el-drawer>
@@ -223,9 +197,6 @@ const form = ref<functionLibData>({
   permission_type: 'PRIVATE'
 })
 
-const dialogVisible = ref(false)
-const cloneContent = ref<any>('')
-
 watch(visible, (bool) => {
   if (!bool) {
     isEdit.value = false
@@ -259,14 +230,8 @@ const rules = reactive({
   ]
 })
 
-function openCodemirrorDialog() {
-  cloneContent.value = form.value.code
-  dialogVisible.value = true
-}
-
-function submitDialog() {
-  form.value.code = cloneContent.value
-  dialogVisible.value = false
+function submitCodemirrorEditor(val: string) {
+  form.value.code = val
 }
 
 function close() {
@@ -353,13 +318,4 @@ defineExpose({
   open
 })
 </script>
-<style lang="scss" scoped>
-.function-CodemirrorEditor__footer {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-}
-.function-CodemirrorEditor {
-  position: relative;
-}
-</style>
+<style lang="scss" scoped></style>

ui/src/workflow/icons/variable-assign-node-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppAvatar shape="square">
+  <AppAvatar shape="square" class="avatar-blue">
     <img src="@/assets/icon_assigner.svg" style="width: 65%" alt="" />
   </AppAvatar>
 </template>

ui/src/workflow/nodes/function-node/index.vue

@@ -23,7 +23,8 @@
               :prop="'input_field_list.' + index + '.value'"
               :rules="{
                 required: item.is_required,
-                message: item.source === 'reference'
+                message:
+                  item.source === 'reference'
                     ? $t('views.functionLib.functionForm.form.param.selectPlaceholder')
                     : $t('views.functionLib.functionForm.form.param.inputPlaceholder'),
                 trigger: 'blur'
@@ -76,17 +77,13 @@
       <h5 class="lighter mb-8">
         {{ $t('views.functionLib.functionForm.form.param.code') }}
       </h5>
-      <div class="function-CodemirrorEditor mb-8" v-if="showEditor">
+      <div class="mb-8" v-if="showEditor">
         <CodemirrorEditor
           v-model="chat_data.code"
           @wheel="wheel"
           style="height: 130px !important"
+          @submitDialog="submitCodemirrorEditor"
         />
-        <div class="function-CodemirrorEditor__footer">
-          <el-button text type="info" @click="openCodemirrorDialog" class="magnify">
-            <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
-          </el-button>
-        </div>
       </div>
 
       <el-form-item
@@ -113,27 +110,6 @@
       </el-form-item>
     </el-form>
     <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
-    <!-- Codemirror 弹出层 -->
-    <el-dialog
-      v-model="dialogVisible"
-      :title="$t('views.functionLib.functionForm.form.param.code')"
-      append-to-body
-      fullscreen
-    >
-      <CodemirrorEditor
-        v-model="cloneContent"
-        style="
-          height: calc(100vh - 160px) !important;
-          border: 1px solid #bbbfc4;
-          border-radius: 4px;
-        "
-      />
-      <template #footer>
-        <div class="dialog-footer mt-24">
-          <el-button type="primary" @click="submitDialog"> {{ $t('common.confirm') }}</el-button>
-        </div>
-      </template>
-    </el-dialog>
   </NodeContainer>
 </template>
 <script setup lang="ts">
@@ -190,17 +166,8 @@ const validate = () => {
   })
 }
 
-const dialogVisible = ref(false)
-const cloneContent = ref('')
-
-function openCodemirrorDialog() {
-  cloneContent.value = chat_data.value.code
-  dialogVisible.value = true
-}
-
-function submitDialog() {
-  set(props.nodeModel.properties.node_data, 'code', cloneContent.value)
-  dialogVisible.value = false
+function submitCodemirrorEditor(val: string) {
+  set(props.nodeModel.properties.node_data, 'code', val)
 }
 
 function openAddDialog(data?: any, index?: any) {
@@ -244,13 +211,4 @@ onMounted(() => {
   }, 100)
 })
 </script>
-<style lang="scss">
-.function-CodemirrorEditor__footer {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-}
-.function-CodemirrorEditor {
-  position: relative;
-}
-</style>
+<style lang="scss"></style>

ui/src/workflow/nodes/variable-assign-node/index.vue

@@ -7,6 +7,7 @@
       require-asterisk-position="right"
       label-width="auto"
       ref="replyNodeFormRef"
+      hide-required-asterisk
     >
       <template v-for="(item, index) in form_data.variable_list" :key="item.id">
         <el-card shadow="never" class="card-never mb-8" style="--el-card-padding: 12px">
@@ -17,7 +18,11 @@
                   {{ $t('views.applicationWorkflow.variable.label') }}
                   <span class="danger">*</span>
                 </div>
-                <el-button text @click="deleteVariable(index)" v-if="index !== 0">
+                <el-button
+                  text
+                  @click="deleteVariable(index)"
+                  v-if="form_data.variable_list.length > 1"
+                >
                   <el-icon>
                     <Delete />
                   </el-icon>
@@ -34,116 +39,102 @@
               @change="variableChange(item)"
             />
           </el-form-item>
-          <el-form-item>
-            <template #label>
-              <div class="flex-between">
-                <div>
-                  <span
-                    >{{ $t('views.applicationWorkflow.nodes.variableAssignNode.assign')
-                    }}<span class="danger">*</span></span
-                  >
-                </div>
-                <el-select
-                  :teleported="false"
-                  v-model="item.source"
-                  size="small"
-                  style="width: 85px"
-                >
-                  <el-option
-                    :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
-                    value="referencing"
-                  />
-                  <el-option
-                    :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
-                    value="custom"
-                  />
-                </el-select>
-              </div>
-            </template>
-            <div v-if="item.source === 'custom'" class="flex">
-              <el-row :gutter="8">
-                <el-col :span="8">
-                  <el-select v-model="item.type" style="width: 85px">
-                    <el-option
-                      v-for="item in typeOptions"
-                      :key="item"
-                      :label="item"
-                      :value="item"
-                    />
-                  </el-select>
-                </el-col>
-                <el-col :span="16">
-                  <el-form-item
-                    v-if="item.type === 'string'"
-                    :prop="'variable_list.' + index + '.value'"
-                    :rules="{
-                      message: t('dynamicsForm.tip.requiredMessage'),
-                      trigger: 'blur',
-                      required: true
-                    }"
-                  >
-                    <el-input
-                      class="ml-4"
-                      v-model="item.value"
-                      :placeholder="$t('common.inputPlaceholder')"
-                      show-word-limit
-                      clearable
-                      @wheel="wheel"
-                    ></el-input>
-                  </el-form-item>
-                  <el-form-item
-                    v-else-if="item.type === 'num'"
-                    :prop="'variable_list.' + index + '.value'"
-                    :rules="{
-                      message: $t('common.inputPlaceholder'),
-                      trigger: 'blur',
-                      required: true
-                    }"
-                  >
-                    <el-input-number class="ml-4" v-model="item.value"></el-input-number>
-                  </el-form-item>
-                  <el-form-item
-                    v-else-if="item.type === 'json'"
-                    :prop="'variable_list.' + index + '.value'"
-                    :rules="[
-                      {
-                        message: $t('common.inputPlaceholder'),
-                        trigger: 'blur',
-                        required: true
-                      },
-                      {
-                        validator: (rule: any, value: any, callback: any) => {
-                          try {
-                            JSON.parse(value)
-                            callback() // Valid JSON
-                          } catch (e) {
-                            callback(new Error('Invalid JSON format'))
-                          }
-                        },
-                        trigger: 'blur'
-                      }
-                    ]"
-                  >
-                    <el-input
-                      class="ml-4"
-                      v-model="item.value"
-                      :placeholder="$t('common.inputPlaceholder')"
-                      type="textarea"
-                      autosize
-                    ></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </div>
-            <NodeCascader
-              v-else
-              ref="nodeCascaderRef2"
-              :nodeModel="nodeModel"
+          <div class="flex-between mb-8">
+            <span class="lighter"
+              >{{ $t('views.applicationWorkflow.nodes.variableAssignNode.assign')
+              }}<span class="danger">*</span></span
+            >
+            <el-select :teleported="false" v-model="item.source" size="small" style="width: 85px">
+              <el-option
+                :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
+                value="referencing"
+              />
+              <el-option
+                :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
+                value="custom"
+              />
+            </el-select>
+          </div>
+
+          <div v-if="item.source === 'custom'" class="flex w-full">
+            <el-select
+              v-model="item.type"
+              style="max-width: 85px"
+              class="mr-8"
+              @change="form_data.variable_list[index].value = null"
+            >
+              <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
+            </el-select>
+
+            <el-form-item
+              v-if="item.type === 'string'"
+              :prop="'variable_list.' + index + '.value'"
+              :rules="{
+                message: t('common.inputPlaceholder'),
+                trigger: 'blur',
+                required: true
+              }"
+            >
+              <el-input
+                v-model="item.value"
+                :placeholder="$t('common.inputPlaceholder')"
+                show-word-limit
+                clearable
+                @wheel="wheel"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+              v-else-if="item.type === 'num'"
+              :prop="'variable_list.' + index + '.value'"
+              :rules="{
+                message: $t('common.inputPlaceholder'),
+                trigger: 'blur',
+                required: true
+              }"
+            >
+              <el-input-number v-model="item.value"></el-input-number>
+            </el-form-item>
+            <el-form-item
               class="w-full"
-              :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
-              v-model="item.reference"
-            />
-          </el-form-item>
+              v-else-if="item.type === 'json'"
+              :prop="'variable_list.' + index + '.value'"
+              :rules="[
+                {
+                  message: $t('common.inputPlaceholder'),
+                  trigger: 'blur',
+                  required: true
+                },
+                {
+                  validator: (rule: any, value: any, callback: any) => {
+                    try {
+                      JSON.parse(value)
+                      callback() // Valid JSON
+                    } catch (e) {
+                      callback(new Error('Invalid JSON format'))
+                    }
+                  },
+                  trigger: 'blur'
+                }
+              ]"
+            >
+              <CodemirrorEditor
+                v-model="item.value"
+                :style="{
+                  height: '100px'
+                }"
+                @submitDialog="(val: string) => (form_data.variable_list[index].value = val)"
+              />
+            </el-form-item>
+          </div>
+
+          <NodeCascader
+            v-else
+            ref="nodeCascaderRef2"
+            :nodeModel="nodeModel"
+            class="w-full"
+            :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+            v-model="item.reference"
+          />
         </el-card>
       </template>
       <el-button link type="primary" @click="addVariable">
@@ -212,6 +203,7 @@ function submitDialog(val: string) {
 const replyNodeFormRef = ref()
 const nodeCascaderRef = ref()
 const nodeCascaderRef2 = ref()
+
 const validate = async () => {
   // console.log(replyNodeFormRef.value.validate())
   let ps = [