perf: 优化markdown编辑器

ui/package.json

@@ -63,7 +63,7 @@
     "jsdom": "^22.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.0",
-    "sass": "^1.66.1",
+    "sass": "1.66.1",
     "typescript": "~5.1.6",
     "unplugin-vue-define-options": "^1.3.18",
     "vite": "^4.4.9",

ui/src/components/index.ts

@@ -19,6 +19,7 @@ import InfiniteScroll from './infinite-scroll/index.vue'
 import AutoTooltip from './auto-tooltip/index.vue'
 import MdEditor from './markdown/MdEditor.vue'
 import MdPreview from './markdown/MdPreview.vue'
+import MdEditorMagnify from './markdown/MdEditorMagnify.vue'
 import LogoFull from './logo/LogoFull.vue'
 import LogoIcon from './logo/LogoIcon.vue'
 import SendIcon from './logo/SendIcon.vue'
@@ -50,5 +51,6 @@ export default {
     app.component(LogoIcon.name, LogoIcon)
     app.component(SendIcon.name, SendIcon)
     app.component(CodemirrorEditor.name, CodemirrorEditor)
+    app.component(MdEditorMagnify.name, MdEditorMagnify)
   }
 }

ui/src/components/markdown/MdEditorMagnify.vue

@@ -0,0 +1,63 @@
+<template>
+  <MdEditor
+    v-bind="$attrs"
+    v-model="data"
+    :preview="false"
+    :toolbars="[]"
+    class="magnify-md-editor"
+    :footers="footers"
+  >
+    <template #defFooters>
+      <el-button text type="info" @click="openDialog">
+        <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
+      </el-button>
+    </template>
+  </MdEditor>
+  <!-- 回复内容弹出层 -->
+  <el-dialog v-model="dialogVisible" :title="title" append-to-body>
+    <MdEditor v-model="cloneContent" :preview="false" :toolbars="[]" :footers="[]"></MdEditor>
+    <template #footer>
+      <div class="dialog-footer mt-24">
+        <el-button type="primary" @click="submitDialog"> 确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+defineOptions({ name: 'MdEditorMagnify' })
+const props = defineProps<{
+  title: String
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue', 'submitDialog'])
+const data = computed({
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+
+const dialogVisible = ref(false)
+const cloneContent = ref('')
+const footers: any = [null, '=', 0]
+function openDialog() {
+  cloneContent.value = props.modelValue
+  dialogVisible.value = true
+}
+function submitDialog() {
+  emit('submitDialog', cloneContent.value)
+  dialogVisible.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.magnify-md-editor {
+  :deep(.md-editor-footer) {
+    border: none !important;
+  }
+}
+</style>

ui/src/views/application/ApplicationSetting.vue

@@ -149,11 +149,11 @@
                 </el-select>
               </el-form-item>
               <el-form-item label="角色设定">
-                <el-input
+                <MdEditorMagnify
+                  title="角色设定"
                   v-model="applicationForm.model_setting.system"
-                  :rows="6"
-                  type="textarea"
-                  maxlength="2048"
+                  style="height: 120px"
+                  @submitDialog="submitSystemDialog"
                   placeholder="你是 xxx 小助手"
                 />
               </el-form-item>
@@ -177,11 +177,12 @@
                     </div>
                   </div>
                 </template>
-                <el-input
+
+                <MdEditorMagnify
+                  title="提示词(无引用知识库)"
                   v-model="applicationForm.model_setting.no_references_prompt"
-                  :rows="6"
-                  type="textarea"
-                  maxlength="2048"
+                  style="height: 120px"
+                  @submitDialog="submitNoReferencesPromptDialog"
                   placeholder="{question}"
                 />
               </el-form-item>
@@ -281,21 +282,22 @@
                     </div>
                   </div>
                 </template>
-                <el-input
+
+                <MdEditorMagnify
+                  title="提示词(引用知识库)"
                   v-model="applicationForm.model_setting.prompt"
-                  :rows="6"
-                  type="textarea"
-                  maxlength="2048"
+                  style="height: 150px"
+                  @submitDialog="submitPromptDialog"
                   :placeholder="defaultPrompt"
                 />
               </el-form-item>
               <el-form-item :label="$t('views.application.applicationForm.form.prologue')">
-                <MdEditor
-                  class="prologue-md-editor"
+                <MdEditorMagnify
+                  title="开场白"
                   v-model="applicationForm.prologue"
-                  :preview="false"
-                  :toolbars="[]"
-                  :footers="[]"
+                  style="height: 150px"
+                  @submitDialog="submitPrologueDialog"
+                  :placeholder="defaultPrompt"
                 />
               </el-form-item>
 
@@ -618,6 +620,19 @@ const sttModelOptions = ref<any>(null)
 const ttsModelOptions = ref<any>(null)
 const showEditIcon = ref(false)
 
+function submitPrologueDialog(val: string) {
+  applicationForm.value.prologue = val
+}
+function submitPromptDialog(val: string) {
+  applicationForm.value.model_setting.prompt = val
+}
+function submitNoReferencesPromptDialog(val: string) {
+  applicationForm.value.model_setting.no_references_prompt = val
+}
+function submitSystemDialog(val: string) {
+  applicationForm.value.model_setting.system = val
+}
+
 const submit = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid, fields) => {

ui/src/workflow/nodes/ai-chat-node/index.vue

@@ -130,21 +130,13 @@
               </el-tooltip>
             </div>
           </template>
-          <MdEditor
+          <MdEditorMagnify
             @wheel="wheel"
-            class="reply-node-editor"
-            style="height: 150px"
+            title="提示词"
             v-model="chat_data.prompt"
-            :preview="false"
-            :toolbars="[]"
-            :footers="footers"
-          >
-            <template #defFooters>
-              <el-button text type="info" @click="openDialog">
-                <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
-              </el-button>
-            </template>
-          </MdEditor>
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
         </el-form-item>
         <el-form-item label="历史聊天记录">
           <el-input-number
@@ -174,15 +166,7 @@
         </el-form-item>
       </el-form>
     </el-card>
-    <!-- 回复内容弹出层 -->
-    <el-dialog v-model="dialogVisible" title="提示词" append-to-body>
-      <MdEditor v-model="cloneContent" :preview="false" :toolbars="[]" :footers="[]"></MdEditor>
-      <template #footer>
-        <div class="dialog-footer mt-24">
-          <el-button type="primary" @click="submitDialog"> 确认</el-button>
-        </div>
-      </template>
-    </el-dialog>
+
     <!-- 添加模版 -->
     <CreateModelDialog
       ref="createModelRef"
@@ -219,19 +203,11 @@ const wheel = (e: any) => {
     return true
   }
 }
-const dialogVisible = ref(false)
-const cloneContent = ref('')
-const footers: any = [null, '=', 0]
 
-function openDialog() {
-  cloneContent.value = chat_data.value.prompt
-  dialogVisible.value = true
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'prompt', val)
 }
 
-function submitDialog() {
-  set(props.nodeModel.properties.node_data, 'prompt', cloneContent.value)
-  dialogVisible.value = false
-}
 const model_change = (model_id?: string) => {
   if (model_id) {
     AIModeParamSettingDialogRef.value?.reset_default(model_id, id)
@@ -334,10 +310,4 @@ onMounted(() => {
   set(props.nodeModel, 'validate', validate)
 })
 </script>
-<style lang="scss" scoped>
-.reply-node-editor {
-  :deep(.md-editor-footer) {
-    border: none !important;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

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

@@ -37,21 +37,13 @@
         />
       </el-form-item>
       <el-form-item label="开场白">
-        <MdEditor
+        <MdEditorMagnify
           @wheel="wheel"
-          style="height: 150px"
+          title="开场白"
           v-model="form_data.prologue"
-          :preview="false"
-          :toolbars="[]"
-          class="reply-node-editor"
-          :footers="footers"
-        >
-          <template #defFooters>
-            <el-button text type="info" @click="openDialog">
-              <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
-            </el-button>
-          </template>
-        </MdEditor>
+          style="height: 150px"
+          @submitDialog="submitDialog"
+        />
       </el-form-item>
       <div class="flex-between mb-8">
         <h5 class="lighter">全局变量</h5>
@@ -248,68 +240,11 @@
       </el-form-item>
     </el-form>
 
-    <div class="flex-between">
-      全局变量
-      <el-button link type="primary" @click="openAddDialog()">
-        <el-icon class="mr-4"><Plus /></el-icon> 添加
-      </el-button>
-    </div>
-    <el-table :data="props.nodeModel.properties.input_field_list" class="mb-16">
-      <el-table-column prop="name" label="变量名" />
-      <el-table-column prop="variable" label="变量" />
-      <el-table-column label="输入类型">
-        <template #default="{ row }">
-          <el-tag type="info" class="info-tag" v-if="row.type === 'input'">文本框</el-tag>
-          <el-tag type="info" class="info-tag" v-if="row.type === 'date'">日期</el-tag>
-          <el-tag type="info" class="info-tag" v-if="row.type === 'select'">下拉选项</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="必填">
-        <template #default="{ row }">
-          <div @click.stop>
-            <el-switch size="small" v-model="row.is_required" />
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="source" label="赋值方式">
-        <template #default="{ row }">
-          {{ row.source === 'user_input' ? '用户输入' : '接口传参' }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="left" width="80">
-        <template #default="{ row, $index }">
-          <span class="mr-4">
-            <el-tooltip effect="dark" content="修改" placement="top">
-              <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
-                <el-icon><EditPen /></el-icon>
-              </el-button>
-            </el-tooltip>
-          </span>
-          <el-tooltip effect="dark" content="删除" placement="top">
-            <el-button type="primary" text @click="deleteField($index)">
-              <el-icon>
-                <Delete />
-              </el-icon>
-            </el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 回复内容弹出层 -->
-    <el-dialog v-model="dialogVisible" title="开场白" append-to-body>
-      <MdEditor v-model="cloneContent" :preview="false" :toolbars="[]" :footers="[]"></MdEditor>
-      <template #footer>
-        <div class="dialog-footer mt-24">
-          <el-button type="primary" @click="submitDialog"> 确认</el-button>
-        </div>
-      </template>
-    </el-dialog>
     <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
   </NodeContainer>
 </template>
 <script setup lang="ts">
 import { app } from '@/main'
-
 import { groupBy, set } from 'lodash'
 import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import type { FormInstance } from 'element-plus'
@@ -348,16 +283,9 @@ const wheel = (e: any) => {
     return true
   }
 }
-const dialogVisible = ref(false)
-const cloneContent = ref('')
-const footers: any = [null, '=', 0]
-function openDialog() {
-  cloneContent.value = form_data.value.prologue
-  dialogVisible.value = true
-}
-function submitDialog() {
-  set(props.nodeModel.properties.node_data, 'prologue', cloneContent.value)
-  dialogVisible.value = false
+
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'prologue', val)
 }
 const form_data = computed({
   get: () => {
@@ -446,10 +374,4 @@ onMounted(() => {
   getSTTModel()
 })
 </script>
-<style lang="scss" scoped>
-.reply-node-editor {
-  :deep(.md-editor-footer) {
-    border: none !important;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

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

@@ -128,21 +128,13 @@
               </el-tooltip>
             </div>
           </template>
-          <MdEditor
+          <MdEditorMagnify
             @wheel="wheel"
-            class="reply-node-editor"
-            style="height: 150px"
+            title="提示词"
             v-model="form_data.prompt"
-            :preview="false"
-            :toolbars="[]"
-            :footers="footers"
-          >
-            <template #defFooters>
-              <el-button text type="info" @click="openDialog">
-                <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
-              </el-button>
-            </template>
-          </MdEditor>
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
         </el-form-item>
         <el-form-item label="历史聊天记录">
           <el-input-number
@@ -172,15 +164,7 @@
         </el-form-item>
       </el-form>
     </el-card>
-    <!-- 回复内容弹出层 -->
-    <el-dialog v-model="dialogVisible" title="提示词" append-to-body>
-      <MdEditor v-model="cloneContent" :preview="false" :toolbars="[]" :footers="[]"> </MdEditor>
-      <template #footer>
-        <div class="dialog-footer mt-24">
-          <el-button type="primary" @click="submitDialog"> 确认 </el-button>
-        </div>
-      </template>
-    </el-dialog>
+
     <!-- 添加模版 -->
     <CreateModelDialog
       ref="createModelRef"
@@ -218,13 +202,7 @@ const wheel = (e: any) => {
     return true
   }
 }
-const dialogVisible = ref(false)
-const cloneContent = ref('')
-const footers: any = [null, '=', 0]
-function openDialog() {
-  cloneContent.value = form_data.value.prompt
-  dialogVisible.value = true
-}
+
 const model_change = (model_id?: string) => {
   if (model_id) {
     AIModeParamSettingDialogRef.value?.reset_default(model_id, id)
@@ -232,9 +210,8 @@ const model_change = (model_id?: string) => {
     refreshParam({})
   }
 }
-function submitDialog() {
-  set(props.nodeModel.properties.node_data, 'prompt', cloneContent.value)
-  dialogVisible.value = false
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'prompt', val)
 }
 const {
   params: { id }
@@ -324,10 +301,4 @@ onMounted(() => {
   set(props.nodeModel, 'validate', validate)
 })
 </script>
-<style lang="scss" scoped>
-.reply-node-editor {
-  :deep(.md-editor-footer) {
-    border: none !important;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

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

@@ -24,22 +24,15 @@
               </el-select>
             </div>
           </template>
-          <MdEditor
+
+          <MdEditorMagnify
             v-if="form_data.reply_type === 'content'"
             @wheel="wheel"
-            class="reply-node-editor"
-            style="height: 150px"
+            title="回复内容"
             v-model="form_data.content"
-            :preview="false"
-            :toolbars="[]"
-            :footers="footers"
-          >
-            <template #defFooters>
-              <el-button text type="info" @click="openDialog">
-                <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
-              </el-button>
-            </template>
-          </MdEditor>
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
           <NodeCascader
             v-else
             ref="nodeCascaderRef"
@@ -68,15 +61,6 @@
         </el-form-item>
       </el-form>
     </el-card>
-    <!-- 回复内容弹出层 -->
-    <el-dialog v-model="dialogVisible" title="回复内容" append-to-body>
-      <MdEditor v-model="cloneContent" :preview="false" :toolbars="[]" :footers="[]"> </MdEditor>
-      <template #footer>
-        <div class="dialog-footer mt-24">
-          <el-button type="primary" @click="submitDialog"> 确认 </el-button>
-        </div>
-      </template>
-    </el-dialog>
   </NodeContainer>
 </template>
 <script setup lang="ts">
@@ -103,7 +87,6 @@ const form = {
   fields: [],
   is_result: false
 }
-const footers: any = [null, '=', 0]
 
 const form_data = computed({
   get: () => {
@@ -119,18 +102,10 @@ const form_data = computed({
   }
 })
 
-const dialogVisible = ref(false)
-const cloneContent = ref('')
-
-function openDialog() {
-  cloneContent.value = form_data.value.content
-  dialogVisible.value = true
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'content', val)
 }
 
-function submitDialog() {
-  set(props.nodeModel.properties.node_data, 'content', cloneContent.value)
-  dialogVisible.value = false
-}
 const replyNodeFormRef = ref()
 const nodeCascaderRef = ref()
 const validate = () => {
@@ -152,10 +127,4 @@ onMounted(() => {
   set(props.nodeModel, 'validate', validate)
 })
 </script>
-<style lang="scss" scoped>
-.reply-node-editor {
-  :deep(.md-editor-footer) {
-    border: none !important;
-  }
-}
-</style>
+<style lang="scss" scoped></style>