From 9afdb50cc4fda8befad8a706e05e5f8dae130b41 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 19 Aug 2024 17:00:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=AB=98=E7=BA=A7=E7=BC=96=E6=8E=92Pyt?=
 =?UTF-8?q?hon=E4=BB=A3=E7=A0=81=E7=BC=96=E8=BE=91=E6=A1=86=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E4=B8=80=E4=B8=AA=E6=94=BE=E5=A4=A7=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/package.json                               |  3 +-
 ui/src/components/ai-chat/index.vue           |  2 +-
 ui/src/components/codemirror-editor/index.vue | 32 ++++----
 ui/src/styles/app.scss                        |  1 +
 ui/src/views/application-workflow/index.vue   | 46 ++++++------
 .../component/CopyApplicationDialog.vue       |  7 +-
 .../component/FunctionFormDrawer.vue          | 18 +++--
 ui/src/workflow/nodes/function-node/index.vue | 73 ++++++++++++++++---
 8 files changed, 122 insertions(+), 60 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 89a31f101..0a3635c20 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -18,7 +18,7 @@
     "@logicflow/extension": "^1.2.27",
     "@vueuse/core": "^10.9.0",
     "axios": "^0.28.0",
-    "codemirror-editor-vue3": "^2.7.0",
+    "codemirror": "^6.0.1",
     "cropperjs": "^1.6.2",
     "echarts": "^5.5.0",
     "element-plus": "^2.5.6",
@@ -41,6 +41,7 @@
     "use-element-plus-theme": "^0.0.5",
     "vue": "^3.3.4",
     "vue-clipboard3": "^2.0.0",
+    "vue-codemirror": "^6.1.1",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.2.4"
   },
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index 6a7e45a52..d72d13e79 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -125,7 +125,7 @@
         <el-input
           ref="quickInputRef"
           v-model="inputValue"
-          placeholder="请输入"
+          placeholder="请输入问题，Ctrl+Enter 换行，Enter发送"
           :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 10 }"
           type="textarea"
           :maxlength="100000"
diff --git a/ui/src/components/codemirror-editor/index.vue b/ui/src/components/codemirror-editor/index.vue
index 78fae6da6..857fef4ce 100644
--- a/ui/src/components/codemirror-editor/index.vue
+++ b/ui/src/components/codemirror-editor/index.vue
@@ -1,23 +1,27 @@
 <template>
-  <Codemirror v-bind="$attrs" border :height="200" :option="cmOptions" />
+  <Codemirror v-bind="$attrs" border :options="cmOption" ref="cmRef" :style="codemirrorStyle" />
 </template>
 
 <script setup lang="ts">
-import Codemirror from 'codemirror-editor-vue3'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { Codemirror } from 'vue-codemirror'
 
 defineOptions({ name: 'CodemirrorEditor' })
-const cmOptions = {
-  mode: 'text/x-python',
-  autoRefresh: true
+const cmOption = {
+  tabSize: 4,
+  lineWrapping: true,
+  lineNumbers: true,
+  line: true
 }
+const codemirrorStyle = {
+  height: '210px!important'
+}
+const cmRef = ref()
+onMounted(() => {})
+
+onUnmounted(() => {
+  cmRef.value?.destroy()
+})
 </script>
 
-<style lang="scss" scoped>
-.codemirror-container.bordered {
-  border: 1px solid #bbbfc4;
-  border-radius: 4px;
-}
-.CodeMirror-gutters {
-  left: 0 !important;
-}
-</style>
+<style lang="scss"></style>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 92dd6ce8b..f751a73b3 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -710,3 +710,4 @@ h5 {
 .custom-header {
   background: var(--el-color-primary-light-9) !important;
 }
+
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index d4a4fd617..c09fae83d 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -47,27 +47,11 @@
             </template>
           </el-tab-pane>
           <el-tab-pane label="函数库" name="function">
-            <div
-              class="workflow-dropdown-item cursor flex p-8-12"
-              @click="clickNodes(functionNode)"
-              @mousedown="onmousedown(functionNode)"
-            >
-              <component
-                :is="iconComponent(`function-lib-node-icon`)"
-                class="mr-8 mt-4"
-                :size="32"
-              />
-              <div class="pre-wrap">
-                <div class="lighter">{{ functionNode.label }}</div>
-                <el-text type="info" size="small">{{ functionNode.text }}</el-text>
-              </div>
-            </div>
-
-            <template v-for="(item, index) in functionLibList" :key="index">
+            <el-scrollbar max-height="300">
               <div
                 class="workflow-dropdown-item cursor flex p-8-12"
-                @click="clickNodes(functionLibNode, item)"
-                @mousedown="onmousedown(functionLibNode, item)"
+                @click="clickNodes(functionNode)"
+                @mousedown="onmousedown(functionNode)"
               >
                 <component
                   :is="iconComponent(`function-lib-node-icon`)"
@@ -75,11 +59,29 @@
                   :size="32"
                 />
                 <div class="pre-wrap">
-                  <div class="lighter">{{ item.name }}</div>
-                  <el-text type="info" size="small">{{ item.desc }}</el-text>
+                  <div class="lighter">{{ functionNode.label }}</div>
+                  <el-text type="info" size="small">{{ functionNode.text }}</el-text>
                 </div>
               </div>
-            </template>
+
+              <template v-for="(item, index) in functionLibList" :key="index">
+                <div
+                  class="workflow-dropdown-item cursor flex p-8-12"
+                  @click="clickNodes(functionLibNode, item)"
+                  @mousedown="onmousedown(functionLibNode, item)"
+                >
+                  <component
+                    :is="iconComponent(`function-lib-node-icon`)"
+                    class="mr-8 mt-4"
+                    :size="32"
+                  />
+                  <div class="pre-wrap">
+                    <div class="lighter">{{ item.name }}</div>
+                    <el-text type="info" size="small">{{ item.desc }}</el-text>
+                  </div>
+                </div>
+              </template>
+            </el-scrollbar>
           </el-tab-pane>
         </el-tabs>
       </div>
diff --git a/ui/src/views/application/component/CopyApplicationDialog.vue b/ui/src/views/application/component/CopyApplicationDialog.vue
index fc9dc58d2..93216f55f 100644
--- a/ui/src/views/application/component/CopyApplicationDialog.vue
+++ b/ui/src/views/application/component/CopyApplicationDialog.vue
@@ -45,19 +45,18 @@
 </template>
 <script setup lang="ts">
 import { ref, watch, reactive } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+
 import { cloneDeep } from 'lodash'
 import type { ApplicationFormType } from '@/api/type/application'
 import type { FormInstance, FormRules } from 'element-plus'
 import applicationApi from '@/api/application'
 import { MsgSuccess, MsgAlert } from '@/utils/message'
-import { isWorkFlow } from '@/utils/application'
+
 import { t } from '@/locales'
 import useStore from '@/stores'
 import { ValidType, ValidCount } from '@/enums/common'
 
 const { common, user } = useStore()
-const router = useRouter()
 const emit = defineEmits(['refresh'])
 
 // @ts-ignore
@@ -69,7 +68,7 @@ const applicationFormRef = ref()
 
 const loading = ref(false)
 const dialogVisible = ref<boolean>(false)
-
+// @ts-ignore
 const applicationForm = ref<ApplicationFormType>({
   name: '',
   desc: '',
diff --git a/ui/src/views/function-lib/component/FunctionFormDrawer.vue b/ui/src/views/function-lib/component/FunctionFormDrawer.vue
index aa98b1f8b..215034e4c 100644
--- a/ui/src/views/function-lib/component/FunctionFormDrawer.vue
+++ b/ui/src/views/function-lib/component/FunctionFormDrawer.vue
@@ -85,8 +85,9 @@
         Python 代码 <el-text type="info" class="color-secondary"> 使用函数时不显示 </el-text>
       </h4>
 
-      <CodemirrorEditor v-model:value="form.code" v-if="showEditor" @change="changeCode" />
-
+      <div class="function-CodemirrorEditor" v-if="showEditor">
+        <CodemirrorEditor v-model="form.code" />
+      </div>
       <h4 class="title-decoration-1 mb-16 mt-16">
         输出变量 <el-text type="info" class="color-secondary"> 使用函数时显示 </el-text>
       </h4>
@@ -181,9 +182,9 @@ function refreshFieldList(data: any) {
   currentIndex.value = null
 }
 
-function changeCode(value: string) {
-  form.value.code = value
-}
+// function changeCode(value: string) {
+//   form.value.code = value
+// }
 
 const submit = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
@@ -221,4 +222,9 @@ defineExpose({
   open
 })
 </script>
-<style lang="scss"></style>
+<style lang="scss" scoped>
+.function-CodemirrorEditor {
+  border: 1px solid #bbbfc4;
+  border-radius: 4px;
+}
+</style>
diff --git a/ui/src/workflow/nodes/function-node/index.vue b/ui/src/workflow/nodes/function-node/index.vue
index 51ed65be6..865c8970b 100644
--- a/ui/src/workflow/nodes/function-node/index.vue
+++ b/ui/src/workflow/nodes/function-node/index.vue
@@ -58,6 +58,7 @@
                 class="w-full"
                 placeholder="请选择变量"
                 v-model="item.value"
+                :width="100"
               />
               <el-input v-else v-model="item.value" placeholder="请输入变量值" />
             </el-form-item>
@@ -68,15 +69,21 @@
       </el-card>
 
       <h5 class="lighter mb-8">Python 代码</h5>
-      <CodemirrorEditor
-        v-model:value="chat_data.code"
-        @change="changeCode"
-        @wheel="wheel"
-        @keydown="isKeyDown = true"
-        @keyup="isKeyDown = false"
-        class="mb-8"
-        v-if="showEditor"
-      />
+      <div class="workflow-CodemirrorEditor mb-8" v-if="showEditor">
+        <CodemirrorEditor
+          v-model="chat_data.code"
+          @wheel="wheel"
+          @keydown="isKeyDown = true"
+          @keyup="isKeyDown = false"
+          style="height: 130px !important"
+        />
+        <div class="workflow-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 label="返回内容" @click.prevent>
         <template #label>
           <div class="flex align-center">
@@ -95,6 +102,18 @@
       </el-form-item>
     </el-form>
     <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
+    <!-- Codemirror 弹出层 -->
+    <el-dialog v-model="dialogVisible" title="Python 代码" append-to-body>
+      <CodemirrorEditor
+        v-model="cloneContent"
+        style="height: 300px !important; border: 1px solid #bbbfc4; border-radius: 4px"
+      />
+      <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">
@@ -152,8 +171,21 @@ const validate = () => {
   })
 }
 
-function changeCode(value: string) {
-  set(props.nodeModel.properties.node_data, 'code', value)
+// function changeCode(value: string) {
+//   set(props.nodeModel.properties.node_data, 'code', value)
+// }
+
+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 openAddDialog(data?: any, index?: any) {
@@ -197,4 +229,21 @@ onMounted(() => {
   }, 100)
 })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss">
+.workflow-CodemirrorEditor {
+  border: 1px solid #bbbfc4;
+  border-radius: 4px;
+  position: relative;
+  padding-bottom: 20px;
+  &__footer {
+    .magnify {
+      position: absolute;
+      bottom: 5px;
+      right: 5px;
+    }
+  }
+  .cm-gutters {
+    display: none !important;
+  }
+}
+</style>