perf: optimization codemirror component

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

@@ -1,16 +1,50 @@
 <template>
+  <div class="codemirror-editor w-full">
     <Codemirror
-    v-bind="$attrs"
+      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">
+      <div class="mb-8" v-if="showEditor">
-        <CodemirrorEditor v-model="form.code" />
+        <CodemirrorEditor v-model="form.code" @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>
       <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() {
+function submitCodemirrorEditor(val: string) {
-  cloneContent.value = form.value.code
+  form.value.code = val
-  dialogVisible.value = true
-}
-
-function submitDialog() {
-  form.value.code = cloneContent.value
-  dialogVisible.value = false
 }
 
 function close() {
@@ -353,13 +318,4 @@ defineExpose({
   open
 })
 </script>
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.function-CodemirrorEditor__footer {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-}
-.function-CodemirrorEditor {
-  position: relative;
-}
-</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)
+function submitCodemirrorEditor(val: string) {
-const cloneContent = ref('')
+  set(props.nodeModel.properties.node_data, 'code', val)
-
-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 openAddDialog(data?: any, index?: any) {
@@ -244,13 +211,4 @@ onMounted(() => {
   }, 100)
 })
 </script>
-<style lang="scss">
+<style lang="scss"></style>
-.function-CodemirrorEditor__footer {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-}
-.function-CodemirrorEditor {
-  position: relative;
-}
-</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,21 +39,12 @@
               @change="variableChange(item)"
             />
           </el-form-item>
-          <el-form-item>
+          <div class="flex-between mb-8">
-            <template #label>
+            <span class="lighter"
-              <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-select
-                  :teleported="false"
-                  v-model="item.source"
-                  size="small"
-                  style="width: 85px"
-                >
               <el-option
                 :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
                 value="referencing"
@@ -59,31 +55,27 @@
               />
             </el-select>
           </div>
-            </template>
+
-            <div v-if="item.source === 'custom'" class="flex">
+          <div v-if="item.source === 'custom'" class="flex w-full">
-              <el-row :gutter="8">
+            <el-select
-                <el-col :span="8">
+              v-model="item.type"
-                  <el-select v-model="item.type" style="width: 85px">
+              style="max-width: 85px"
-                    <el-option
+              class="mr-8"
-                      v-for="item in typeOptions"
+              @change="form_data.variable_list[index].value = null"
-                      :key="item"
+            >
-                      :label="item"
+              <el-option v-for="item in typeOptions" :key="item" :label="item" :value="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'),
+                message: t('common.inputPlaceholder'),
                 trigger: 'blur',
                 required: true
               }"
             >
               <el-input
-                      class="ml-4"
                 v-model="item.value"
                 :placeholder="$t('common.inputPlaceholder')"
                 show-word-limit
@@ -100,9 +92,10 @@
                 required: true
               }"
             >
-                    <el-input-number class="ml-4" v-model="item.value"></el-input-number>
+              <el-input-number v-model="item.value"></el-input-number>
             </el-form-item>
             <el-form-item
+              class="w-full"
               v-else-if="item.type === 'json'"
               :prop="'variable_list.' + index + '.value'"
               :rules="[
@@ -124,17 +117,16 @@
                 }
               ]"
             >
-                    <el-input
+              <CodemirrorEditor
-                      class="ml-4"
                 v-model="item.value"
-                      :placeholder="$t('common.inputPlaceholder')"
+                :style="{
-                      type="textarea"
+                  height: '100px'
-                      autosize
+                }"
-                    ></el-input>
+                @submitDialog="(val: string) => (form_data.variable_list[index].value = val)"
+              />
             </el-form-item>
-                </el-col>
-              </el-row>
           </div>
+
           <NodeCascader
             v-else
             ref="nodeCascaderRef2"
@@ -143,7 +135,6 @@
             :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
             v-model="item.reference"
           />
-          </el-form-item>
         </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 = [