From b4569fc88d00e37e8670e67e1107500ac420ee9a Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 15 Jul 2025 18:40:53 +0800
Subject: [PATCH] fix: tree style

---
 .../dynamics-form/constructor/index.vue       | 49 ++++++++++++++-----
 .../constructor/items/SliderConstructor.vue   | 33 +++++++------
 .../items/SwitchInputConstructor.vue          | 12 +++--
 .../components/folder-tree/MoveToDialog.vue   |  3 +-
 ui/src/styles/element-plus.scss               |  3 ++
 .../xpack-component/XPackLimitDrawer.vue      | 40 +++++++++------
 .../component/DropdownMenu.vue                | 38 +++++++-------
 .../component/AddKnowledgeDialog.vue          | 25 +++++-----
 .../component/McpServersDialog.vue            |  6 +--
 .../component/ParamSettingDialog.vue          |  7 +--
 ui/src/views/application/index.vue            | 19 +++----
 ui/src/views/knowledge/index.vue              | 21 ++++----
 ui/src/views/tool/index.vue                   | 21 ++++----
 13 files changed, 168 insertions(+), 109 deletions(-)

diff --git a/ui/src/components/dynamics-form/constructor/index.vue b/ui/src/components/dynamics-form/constructor/index.vue
index 09127ee6d..aabcf0109 100644
--- a/ui/src/components/dynamics-form/constructor/index.vue
+++ b/ui/src/components/dynamics-form/constructor/index.vue
@@ -7,7 +7,12 @@
     :model="form_data"
     v-bind="$attrs"
   >
-    <el-form-item :label="$t('dynamicsForm.paramForm.field.label')" :required="true" prop="field" :rules="rules.field">
+    <el-form-item
+      :label="$t('dynamicsForm.paramForm.field.label')"
+      :required="true"
+      prop="field"
+      :rules="rules.field"
+    >
       <el-input
         v-model="form_data.field"
         :maxlength="64"
@@ -15,7 +20,12 @@
         show-word-limit
       />
     </el-form-item>
-    <el-form-item :label="$t('dynamicsForm.paramForm.name.label')" :required="true" prop="label" :rules="rules.label">
+    <el-form-item
+      :label="$t('dynamicsForm.paramForm.name.label')"
+      :required="true"
+      prop="label"
+      :rules="rules.label"
+    >
       <el-input
         v-model="form_data.label"
         :maxlength="64"
@@ -31,11 +41,25 @@
         :placeholder="$t('dynamicsForm.paramForm.tooltip.placeholder')"
       />
     </el-form-item>
-    <el-form-item :label="$t('dynamicsForm.paramForm.required.label')" :required="true" prop="required" :rules="rules.required">
+    <el-form-item
+      :label="$t('dynamicsForm.paramForm.required.label')"
+      :required="true"
+      prop="required"
+      :rules="rules.required"
+      @click.prevent
+    >
       <el-switch v-model="form_data.required" :active-value="true" :inactive-value="false" />
     </el-form-item>
-    <el-form-item :label="$t('dynamicsForm.paramForm.input_type.label')" :required="true" prop="input_type" :rules="rules.input_type">
-      <el-select v-model="form_data.input_type" :placeholder="$t('dynamicsForm.paramForm.input_type.placeholder')">
+    <el-form-item
+      :label="$t('dynamicsForm.paramForm.input_type.label')"
+      :required="true"
+      prop="input_type"
+      :rules="rules.input_type"
+    >
+      <el-select
+        v-model="form_data.input_type"
+        :placeholder="$t('dynamicsForm.paramForm.input_type.placeholder')"
+      >
         <el-option
           v-for="input_type in input_type_list"
           :key="input_type.value"
@@ -65,8 +89,11 @@ const props = withDefaults(
   }>(),
   {
     input_type_list: () =>
-      input_type_list_data.map((item) => ({ label: item.label, value: item.value + 'Constructor' }))
-  }
+      input_type_list_data.map((item) => ({
+        label: item.label,
+        value: item.value + 'Constructor',
+      })),
+  },
 )
 const emit = defineEmits(['update:modelValue'])
 
@@ -78,13 +105,13 @@ const form_data = ref<any>({
   field: '',
   tooltip: '',
   required: false,
-  input_type: ''
+  input_type: '',
 })
 const rules = {
   label: [{ required: true, message: t('dynamicsForm.paramForm.name.requiredMessage') }],
   field: [{ required: true, message: t('dynamicsForm.paramForm.field.requiredMessage') }],
   required: [{ required: true, message: t('dynamicsForm.paramForm.required.requiredMessage') }],
-  input_type: [{ required: true, message: t('dynamicsForm.paramForm.input_type.requiredMessage') }]
+  input_type: [{ required: true, message: t('dynamicsForm.paramForm.input_type.requiredMessage') }],
 }
 const getData = () => {
   let label: string | any = form_data.value.label
@@ -93,7 +120,7 @@ const getData = () => {
       input_type: 'TooltipLabel',
       label: form_data.value.label,
       attrs: { tooltip: form_data.value.tooltip },
-      props_info: {}
+      props_info: {},
     }
   }
   return {
@@ -102,7 +129,7 @@ const getData = () => {
     field: form_data.value.field,
     default_value: form_data.value.default_value,
     show_default_value: form_data.value.show_default_value,
-    ...componentFormRef.value.getData()
+    ...componentFormRef.value.getData(),
   }
 }
 
diff --git a/ui/src/components/dynamics-form/constructor/items/SliderConstructor.vue b/ui/src/components/dynamics-form/constructor/items/SliderConstructor.vue
index 942e11445..a4256c468 100644
--- a/ui/src/components/dynamics-form/constructor/items/SliderConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/SliderConstructor.vue
@@ -1,5 +1,10 @@
 <template>
-  <el-form-item :label="$t('dynamicsForm.Slider.showInput.label')" required prop="showInput">
+  <el-form-item
+    :label="$t('dynamicsForm.Slider.showInput.label')"
+    required
+    prop="showInput"
+    @click.prevent
+  >
     <el-switch v-model="formValue.showInput" />
   </el-form-item>
   <el-form-item :label="$t('dynamicsForm.Slider.valueRange.label')" required>
@@ -9,8 +14,8 @@
           {
             required: true,
             message: $t('dynamicsForm.Slider.valueRange.minRequired'),
-            trigger: 'change'
-          }
+            trigger: 'change',
+          },
         ]"
         prop="min"
       >
@@ -26,8 +31,8 @@
           {
             required: true,
             message: $t('dynamicsForm.Slider.valueRange.maxRequired'),
-            trigger: 'change'
-          }
+            trigger: 'change',
+          },
         ]"
         prop="max"
         ><el-input-number
@@ -89,7 +94,7 @@ const formValue = computed({
   },
   get: () => {
     return props.modelValue
-  }
+  },
 })
 
 const getData = () => {
@@ -101,19 +106,19 @@ const getData = () => {
       step: formValue.value.step,
       precision: formValue.value.precision,
       'show-input-controls': false,
-      'show-input': formValue.value.showInput
+      'show-input': formValue.value.showInput,
     },
     props_info: {
       rules: [
         {
           message: formValue.value.label + ' ' + t('dynamicsForm.tip.requiredMessage'),
           trigger: 'blur',
-          required: formValue.value.required
-        }
-      ]
+          required: formValue.value.required,
+        },
+      ],
     },
     show_default_value: true,
-    default_value: formValue.value.default_value
+    default_value: formValue.value.default_value,
   }
 }
 watch(
@@ -122,7 +127,7 @@ watch(
     if (formValue.value.min > formValue.value.max) {
       formValue.value.max = formValue.value.min
     }
-  }
+  },
 )
 const rander = (form_data: any) => {
   const attrs = form_data.attrs
@@ -147,8 +152,8 @@ const step_rules = [
       }
       return true
     },
-    trigger: 'blur'
-  }
+    trigger: 'blur',
+  },
 ]
 defineExpose({ getData, rander })
 onBeforeMount(() => {
diff --git a/ui/src/components/dynamics-form/constructor/items/SwitchInputConstructor.vue b/ui/src/components/dynamics-form/constructor/items/SwitchInputConstructor.vue
index 96cdea6ab..de3a22f99 100644
--- a/ui/src/components/dynamics-form/constructor/items/SwitchInputConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/SwitchInputConstructor.vue
@@ -5,9 +5,15 @@
     prop="default_value"
     :rules="
       formValue.required
-        ? [{ required: true, message: `${$t('dynamicsForm.default.label')}${$t('dynamicsForm.default.requiredMessage')}` }]
+        ? [
+            {
+              required: true,
+              message: `${$t('dynamicsForm.default.label')}${$t('dynamicsForm.default.requiredMessage')}`,
+            },
+          ]
         : []
     "
+    @click.prevent
   >
     <el-switch v-model="formValue.default_value" />
   </el-form-item>
@@ -25,7 +31,7 @@ const formValue = computed({
   },
   get: () => {
     return props.modelValue
-  }
+  },
 })
 
 const getData = () => {
@@ -33,7 +39,7 @@ const getData = () => {
     input_type: 'SwitchInput',
     show_default_value: true,
     attrs: {},
-    default_value: formValue.value.default_value
+    default_value: formValue.value.default_value,
   }
 }
 
diff --git a/ui/src/components/folder-tree/MoveToDialog.vue b/ui/src/components/folder-tree/MoveToDialog.vue
index 532cbfae5..e056bc71f 100644
--- a/ui/src/components/folder-tree/MoveToDialog.vue
+++ b/ui/src/components/folder-tree/MoveToDialog.vue
@@ -5,13 +5,14 @@
     append-to-body
     :close-on-click-modal="false"
     :close-on-press-escape="false"
+    align-center
   >
     <folder-tree
       ref="treeRef"
       :source="source"
       :data="folderList"
       :treeStyle="{
-        height: 'auto',
+        height: 'calc(100vh - 320px)',
         border: '1px solid #ebeef5',
         borderRadius: '6px',
         padding: '8px',
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 6f0e8f2d0..421b0ef47 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -111,6 +111,9 @@
 .el-message {
   --el-message-close-icon-color: var(--app-text-color-secondary);
 }
+.el-message__content {
+  word-break: break-all;
+}
 .el-message-box {
   --el-messagebox-font-size: 16px;
   --el-messagebox-width: 475px;
diff --git a/ui/src/views/application-overview/xpack-component/XPackLimitDrawer.vue b/ui/src/views/application-overview/xpack-component/XPackLimitDrawer.vue
index 976668120..4209e35ae 100644
--- a/ui/src/views/application-overview/xpack-component/XPackLimitDrawer.vue
+++ b/ui/src/views/application-overview/xpack-component/XPackLimitDrawer.vue
@@ -23,11 +23,14 @@
           step-strictly
         />
         <span class="ml-4">{{
-            $t('views.applicationOverview.appInfo.LimitDialog.timesDays')
-          }}</span>
+          $t('views.applicationOverview.appInfo.LimitDialog.timesDays')
+        }}</span>
       </el-form-item>
       <!--     身份验证 -->
-      <el-form-item :label="$t('views.applicationOverview.appInfo.LimitDialog.authentication')">
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.authentication')"
+        @click.prevent
+      >
         <el-switch size="small" v-model="form.authentication"></el-switch>
       </el-form-item>
       <el-radio-group
@@ -72,7 +75,7 @@
                     style="margin: 0 4px 0 0 !important"
                   >
                     <el-icon>
-                      <RefreshRight/>
+                      <RefreshRight />
                     </el-icon>
                   </el-button>
                 </el-tooltip>
@@ -109,7 +112,7 @@
           >
             <el-checkbox-group v-model="form.authentication_value.login_value">
               <template v-for="t in auth_list" :key="t.value">
-                <el-checkbox :label="t.label" :value="t.value"/>
+                <el-checkbox :label="t.label" :value="t.value" />
               </template>
             </el-checkbox-group>
           </el-form-item>
@@ -142,18 +145,18 @@
   </el-drawer>
 </template>
 <script setup lang="ts">
-import {ref, watch} from 'vue'
-import {useRoute, useRouter} from 'vue-router'
-import type {FormInstance, FormRules} from 'element-plus'
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
 import applicationApi from '@/api/application/application'
-import {MsgSuccess} from '@/utils/message'
-import {t} from '@/locales'
-import {copyClick} from '@/utils/clipboard'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+import { copyClick } from '@/utils/clipboard'
 
 const router = useRouter()
 const route = useRoute()
 const {
-  params: {id},
+  params: { id },
 } = route
 
 const emit = defineEmits(['refresh'])
@@ -198,7 +201,10 @@ const open = (data: any) => {
   form.value.authentication_value = data.authentication_value || {
     type: 'password',
   }
-  if (form.value.authentication_value.type === 'password' && !form.value.authentication_value.password_value) {
+  if (
+    form.value.authentication_value.type === 'password' &&
+    !form.value.authentication_value.password_value
+  ) {
     refreshAuthentication()
   }
   form.value.authentication = data.authentication
@@ -243,12 +249,16 @@ function refreshAuthentication() {
 }
 
 function firstGeneration() {
-  if (form.value.authentication && form.value.authentication_value.type === 'password' && !form.value.authentication_value.password_value) {
+  if (
+    form.value.authentication &&
+    form.value.authentication_value.type === 'password' &&
+    !form.value.authentication_value.password_value
+  ) {
     form.value.authentication_value.password_value = generateAuthenticationValue()
   }
 }
 
-defineExpose({open})
+defineExpose({ open })
 </script>
 <style lang="scss" scoped>
 .authentication-append-input {
diff --git a/ui/src/views/application-workflow/component/DropdownMenu.vue b/ui/src/views/application-workflow/component/DropdownMenu.vue
index 63e5d9237..54b9fa7bc 100644
--- a/ui/src/views/application-workflow/component/DropdownMenu.vue
+++ b/ui/src/views/application-workflow/component/DropdownMenu.vue
@@ -71,16 +71,17 @@
       <el-tab-pane :label="$t('views.tool.title')" name="tool">
         <LayoutContainer>
           <template #left>
-            <folder-tree
-              :source="SourceTypeEnum.TOOL"
-              :data="toolTreeData"
-              :currentNodeKey="folder.currentFolder?.id"
-              @handleNodeClick="folderClickHandle"
-              :shareTitle="$t('views.shared.shared_tool')"
-              :showShared="permissionPrecise['is_share']()"
-              class="p-8"
-              :canOperation="false"
-            />
+            <div class="p-8">
+              <folder-tree
+                :source="SourceTypeEnum.TOOL"
+                :data="toolTreeData"
+                :currentNodeKey="folder.currentFolder?.id"
+                @handleNodeClick="folderClickHandle"
+                :shareTitle="$t('views.shared.shared_tool')"
+                :showShared="permissionPrecise['is_share']()"
+                :canOperation="false"
+              />
+            </div>
           </template>
           <el-scrollbar height="450">
             <NodeContent
@@ -95,14 +96,15 @@
       <el-tab-pane :label="$t('views.application.title')" name="application">
         <LayoutContainer>
           <template #left>
-            <folder-tree
-              :source="SourceTypeEnum.APPLICATION"
-              :data="applicationTreeData"
-              :currentNodeKey="folder.currentFolder?.id"
-              @handleNodeClick="folderClickHandle"
-              class="p-8"
-              :canOperation="false"
-            />
+            <div class="p-8">
+              <folder-tree
+                :source="SourceTypeEnum.APPLICATION"
+                :data="applicationTreeData"
+                :currentNodeKey="folder.currentFolder?.id"
+                @handleNodeClick="folderClickHandle"
+                :canOperation="false"
+              />
+            </div>
           </template>
           <el-scrollbar height="450">
             <NodeContent
diff --git a/ui/src/views/application/component/AddKnowledgeDialog.vue b/ui/src/views/application/component/AddKnowledgeDialog.vue
index 90971a383..3b567ee33 100644
--- a/ui/src/views/application/component/AddKnowledgeDialog.vue
+++ b/ui/src/views/application/component/AddKnowledgeDialog.vue
@@ -29,17 +29,18 @@
     </template>
     <LayoutContainer class="application-manage">
       <template #left>
-        <folder-tree
-          :data="folderList"
-          :currentNodeKey="currentFolder?.id"
-          @handleNodeClick="folderClickHandle"
-          class="p-8"
-          v-loading="folderLoading"
-          :canOperation="false"
-          showShared
-          :shareTitle="$t('views.shared.shared_knowledge')"
-          :treeStyle="{ height: 'calc(100vh - 320px)' }"
-        />
+        <div class="p-8">
+          <folder-tree
+            :data="folderList"
+            :currentNodeKey="currentFolder?.id"
+            @handleNodeClick="folderClickHandle"
+            v-loading="folderLoading"
+            :canOperation="false"
+            showShared
+            :shareTitle="$t('views.shared.shared_knowledge')"
+            :treeStyle="{ height: 'calc(100vh - 320px)' }"
+          />
+        </div>
       </template>
       <div class="layout-bg">
         <div class="flex-between p-16 ml-8">
@@ -197,7 +198,7 @@ const submitHandle = () => {
 
 const refresh = () => {
   searchValue.value = ''
-  knowledgeList.value= []
+  knowledgeList.value = []
   getList()
 }
 
diff --git a/ui/src/views/application/component/McpServersDialog.vue b/ui/src/views/application/component/McpServersDialog.vue
index 597cdc95c..a4b53ee6d 100644
--- a/ui/src/views/application/component/McpServersDialog.vue
+++ b/ui/src/views/application/component/McpServersDialog.vue
@@ -14,7 +14,7 @@
       :model="form"
       require-asterisk-position="right"
     >
-      <el-form-item label="MCP" prop="mcp_enable">
+      <el-form-item label="MCP" prop="mcp_enable" @click.prevent>
         <el-switch v-model="form.mcp_enable" />
       </el-form-item>
       <el-form-item
@@ -58,7 +58,7 @@ const mcpServerJson = `{
 
 const form = ref<any>({
   mcp_servers: '',
-  mcp_enable: false
+  mcp_enable: false,
 })
 
 const dialogVisible = ref<boolean>(false)
@@ -67,7 +67,7 @@ watch(dialogVisible, (bool) => {
   if (!bool) {
     form.value = {
       mcp_servers: '',
-      mcp_enable: false
+      mcp_enable: false,
     }
   }
 })
diff --git a/ui/src/views/application/component/ParamSettingDialog.vue b/ui/src/views/application/component/ParamSettingDialog.vue
index 6409c90dd..80124a9b2 100644
--- a/ui/src/views/application/component/ParamSettingDialog.vue
+++ b/ui/src/views/application/component/ParamSettingDialog.vue
@@ -156,7 +156,7 @@
               </el-radio-group>
             </el-form>
           </el-form-item>
-   <el-form-item @click.prevent v-if="!isWorkflowType">
+          <el-form-item @click.prevent v-if="!isWorkflowType">
             <template #label>
               <div class="flex align-center">
                 <span class="mr-4">{{
@@ -178,7 +178,6 @@
               :placeholder="defaultPrompt"
             />
           </el-form-item>
-
         </el-form>
       </div>
     </el-scrollbar>
@@ -198,6 +197,7 @@ import { ref, watch, reactive } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import { isWorkFlow } from '@/utils/application'
 import { t } from '@/locales'
+import { cloneDeep } from 'lodash'
 const emit = defineEmits(['refresh'])
 
 const paramFormRef = ref()
@@ -285,10 +285,11 @@ watch(dialogVisible, (bool) => {
 const open = (data: any, type?: string) => {
   isWorkflowType.value = isWorkFlow(type)
   form.value = {
-    knowledge_setting: { ...data.knowledge_setting },
+    knowledge_setting: cloneDeep(data.knowledge_setting),
     problem_optimization: data.problem_optimization,
     problem_optimization_prompt: data.problem_optimization_prompt,
   }
+  console.log(form.value.knowledge_setting.no_references_setting.status)
   if (!isWorkflowType.value) {
     noReferencesform.value[form.value.knowledge_setting.no_references_setting.status] =
       form.value.knowledge_setting.no_references_setting.value
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index 368627f92..f62efb0b7 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -2,14 +2,15 @@
   <LayoutContainer showCollapse class="application-manage">
     <template #left>
       <h4 class="p-12-16 pb-0 mt-12">{{ $t('views.application.title') }}</h4>
-      <folder-tree
-        :source="SourceTypeEnum.APPLICATION"
-        :data="folderList"
-        :currentNodeKey="folder.currentFolder?.id"
-        @handleNodeClick="folderClickHandle"
-        @refreshTree="refreshFolder"
-        class="p-8"
-      />
+      <div class="p-8">
+        <folder-tree
+          :source="SourceTypeEnum.APPLICATION"
+          :data="folderList"
+          :currentNodeKey="folder.currentFolder?.id"
+          @handleNodeClick="folderClickHandle"
+          @refreshTree="refreshFolder"
+        />
+      </div>
     </template>
     <ContentContainer>
       <template #header>
@@ -605,7 +606,7 @@ const importApplication = (file: any) => {
     })
     .then(() => {
       getList()
-    }) 
+    })
     .catch((e) => {
       if (e.code === 400) {
         MsgConfirm(t('common.tip'), t('views.application.tip.professionalMessage'), {
diff --git a/ui/src/views/knowledge/index.vue b/ui/src/views/knowledge/index.vue
index b92a3eb25..21ab39ce0 100644
--- a/ui/src/views/knowledge/index.vue
+++ b/ui/src/views/knowledge/index.vue
@@ -2,16 +2,17 @@
   <LayoutContainer showCollapse class="knowledge-manage">
     <template #left>
       <h4 class="p-12-16 pb-0 mt-12">{{ $t('views.knowledge.title') }}</h4>
-      <folder-tree
-        :source="SourceTypeEnum.KNOWLEDGE"
-        :data="folderList"
-        :currentNodeKey="folder.currentFolder?.id"
-        @handleNodeClick="folderClickHandle"
-        class="p-8"
-        :shareTitle="$t('views.shared.shared_knowledge')"
-        :showShared="permissionPrecise['is_share']()"
-        @refreshTree="refreshFolder"
-      />
+      <div class="p-8">
+        <folder-tree
+          :source="SourceTypeEnum.KNOWLEDGE"
+          :data="folderList"
+          :currentNodeKey="folder.currentFolder?.id"
+          @handleNodeClick="folderClickHandle"
+          :shareTitle="$t('views.shared.shared_knowledge')"
+          :showShared="permissionPrecise['is_share']()"
+          @refreshTree="refreshFolder"
+        />
+      </div>
     </template>
     <KnowledgeListContainer @refreshFolder="refreshFolder">
       <template #header>
diff --git a/ui/src/views/tool/index.vue b/ui/src/views/tool/index.vue
index 59388d21c..38221f6e3 100644
--- a/ui/src/views/tool/index.vue
+++ b/ui/src/views/tool/index.vue
@@ -2,16 +2,17 @@
   <LayoutContainer showCollapse class="tool-manage">
     <template #left>
       <h4 class="p-12-16 pb-0 mt-12">{{ $t('views.tool.title') }}</h4>
-      <folder-tree
-        :source="SourceTypeEnum.TOOL"
-        :data="folderList"
-        :currentNodeKey="folder.currentFolder?.id"
-        @handleNodeClick="folderClickHandle"
-        @refreshTree="refreshFolder"
-        :shareTitle="$t('views.shared.shared_tool')"
-        :showShared="permissionPrecise['is_share']()"
-        class="p-8"
-      />
+      <div class="p-8">
+        <folder-tree
+          :source="SourceTypeEnum.TOOL"
+          :data="folderList"
+          :currentNodeKey="folder.currentFolder?.id"
+          @handleNodeClick="folderClickHandle"
+          @refreshTree="refreshFolder"
+          :shareTitle="$t('views.shared.shared_tool')"
+          :showShared="permissionPrecise['is_share']()"
+        />
+      </div>
     </template>
     <ToolListContainer @refreshFolder="refreshFolder">
       <template #header>