fix: Upgrade the UI version and fix style bugs.

ui/package.json

@@ -29,7 +29,7 @@
     "dingtalk-jsapi": "^3.1.0",
     "echarts": "^5.6.0",
     "el-table-infinite-scroll": "^3.0.8",
-    "element-plus": "^2.11.7",
+    "element-plus": "^2.12.0",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.11.1",
     "html-to-image": "^1.11.13",

ui/src/components/app-icon/icons/document.ts

@@ -96,29 +96,4 @@ export default {
       ])
     },
   },
-  'app-import-doc': {
-    iconReader: () => {
-      return h('i', [
-        h(
-          'svg',
-          {
-            style: { height: '100%', width: '100%' },
-            viewBox: '0 0 1024 1024',
-            version: '1.1',
-            xmlns: 'http://www.w3.org/2000/svg',
-          },
-          [
-            h('path', {
-              d: 'M128 935.594667A45.653333 45.653333 0 0 0 173.482667 981.333333h338.346666v-85.76H213.248V128H810.24v426.666667h85.333333V87.978667A45.653333 45.653333 0 0 0 850.005333 42.24H173.482667A45.653333 45.653333 0 0 0 128 87.978667v847.616z',
-              fill: 'currentColor',
-            }),
-            h('path', {
-              d: 'M298.922667 480.768c0-6.314667 5.12-11.434667 11.392-11.434667h403.626666c6.314667 0 11.392 5.12 11.392 11.434667v62.890667c0 6.314667-5.12 11.434667-11.392 11.434666h-403.626666a11.392 11.392 0 0 1-11.392-11.434666v-62.890667zM310.4 298.666667a11.392 11.392 0 0 0-11.392 11.434666v62.890667c0 6.314667 5.12 11.434667 11.392 11.434667h190.208c6.314667 0 11.392-5.12 11.392-11.434667V310.101333A11.392 11.392 0 0 0 500.608 298.666667H310.4zM725.333333 661.333333a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333333V768h106.666666a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333H810.666667v106.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333V853.333333h-106.666666a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333H725.333333v-106.666667z',
-              fill: 'currentColor',
-            }),
-          ],
-        ),
-      ])
-    },
-  },
 }

ui/src/components/app-icon/icons/knowledge.ts

@@ -156,4 +156,56 @@ export default {
       ])
     },
   },
+
+  'app-execution-record': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M682.666667 42.666667H341.333333c-26.197333 0-42.666667 16.512-42.666666 42.666666v42.666667H170.666667c-29.269333 0-42.666667 16.512-42.666667 42.666667v768c0 26.197333 13.397333 42.666667 42.666667 42.666666h682.666666c29.269333 0 42.666667-16.512 42.666667-42.666666V170.666667c0-26.197333-13.397333-42.666667-42.666667-42.666667h-128v85.333333h85.333334v682.666667H213.333333V213.333333h85.333334v42.666667c0 26.154667 16.469333 42.666667 42.666666 42.666667h341.333334c26.154667 0 42.666667-16.512 42.666666-42.666667V85.333333c0-26.197333-16.512-42.666667-42.666666-42.666666zM384 213.333333V128h256v85.333333H384z',
+              fill: 'currentColor',
+            }),
+            h('path', {
+              d: 'M321.024 469.333333h381.952c12.373333 0 22.357333 9.557333 22.357333 21.333334v42.666666c0 11.776-10.026667 21.333333-22.357333 21.333334H321.024A21.845333 21.845333 0 0 1 298.666667 533.333333v-42.666666c0-11.776 10.026667-21.333333 22.357333-21.333334zM702.976 640H321.024a21.845333 21.845333 0 0 0-22.357333 21.333333v42.666667c0 11.776 10.026667 21.333333 22.357333 21.333333h381.952c12.373333 0 22.357333-9.557333 22.357333-21.333333v-42.666667c0-11.776-10.026667-21.333333-22.357333-21.333333z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
+
+  'app-to-import-doc': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M682.666667 128H213.333333v768h597.333334V256.853333h-106.666667a21.333333 21.333333 0 0 1-21.333333-21.333333V128zM170.666667 42.666667h558.293333a42.666667 42.666667 0 0 1 30.208 12.501333l124.373333 124.373333a42.666667 42.666667 0 0 1 12.458667 30.165334V938.666667a42.666667 42.666667 0 0 1-42.666667 42.666666H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666666V85.333333a42.666667 42.666667 0 0 1 42.666667-42.666666z',
+              fill: 'currentColor',
+            }),
+            h('path', {
+              d: 'M469.333333 362.666667a21.333333 21.333333 0 0 1 21.333334-21.333334h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333334V469.333333h106.666666a21.333333 21.333333 0 0 1 21.333334 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333334 21.333334H554.666667v106.666666a21.333333 21.333333 0 0 1-21.333334 21.333334h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333334V554.666667H362.666667a21.333333 21.333333 0 0 1-21.333334-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333334-21.333334H469.333333V362.666667z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
 }

ui/src/styles/component.scss

@@ -101,6 +101,7 @@
     padding: 5px 8px;
     font-weight: 400;
     color: var(--el-text-color-primary) !important;
+    outline: none !important;
   }
   .el-radio-button__original-radio:checked + .el-radio-button__inner {
     color: var(--el-color-primary) !important;

ui/src/styles/element-plus.scss

@@ -27,6 +27,9 @@
     border: 1px solid var(--el-card-border-color);
     box-shadow: none !important;
   }
+  .el-card__body {
+    overflow: inherit;
+  }
 }
 
 // tree
@@ -386,5 +389,5 @@
 
 // el-upload
 .el-upload {
-    --el-upload-dragger-padding-horizontal: 32px;
+  --el-upload-dragger-padding-horizontal: 32px;
 }

ui/src/views/application/index.vue

@@ -155,33 +155,6 @@
         >
           <el-row v-if="applicationList.length > 0" :gutter="15" class="w-full">
             <template v-for="(item, index) in applicationList" :key="index">
-              <!-- <el-col
-                v-if="item.resource_type === 'folder'"
-                :xs="24"
-                :sm="12"
-                :md="12"
-                :lg="8"
-                :xl="6"
-                class="mb-16"
-              >
-                <CardBox
-                  :title="item.name"
-                  :description="item.desc || $t('components.noDesc')"
-                  class="cursor"
-                  @click="clickFolder(item)"
-                >
-                  <template #icon>
-                    <el-avatar shape="square" :size="32" style="background: none">
-                      <AppIcon iconName="app-folder" style="font-size: 32px"></AppIcon>
-                    </el-avatar>
-                  </template>
-                  <template #subTitle>
-                    <el-text class="color-secondary lighter" size="small">
-                      {{ $t('common.creator') }}: {{ i18n_name(item.nick_name) }}
-                    </el-text>
-                  </template>
-                </CardBox>
-              </el-col> -->
               <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
                 <CardBox
                   :title="item.name"

ui/src/views/knowledge-workflow/index.vue

@@ -49,11 +49,11 @@
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item @click="toImportDoc">
-                <AppIcon iconName="app-import-doc" class="color-secondary"></AppIcon>
+                <AppIcon iconName="app-to-import-doc" class="color-secondary"></AppIcon>
                 {{ $t('workflow.operation.toImportDoc') }}
               </el-dropdown-item>
-              <el-dropdown-item @click="openListAction">
-                <AppIcon iconName="app-history-outlined" class="color-secondary"></AppIcon>
+              <el-dropdown-item @click="openListAction" divided>
+                <AppIcon iconName="app-execution-record" class="color-secondary"></AppIcon>
                 {{ $t('workflow.ExecutionRecord') }}
               </el-dropdown-item>
               <el-dropdown-item @click="openHistory">

ui/src/views/tool/component/ToolListContainer.vue

@@ -135,7 +135,7 @@
       >
         <el-row v-if="tool.toolList.length > 0" :gutter="15" class="w-full">
           <template v-for="(item, index) in tool.toolList" :key="index">
-            <el-col
+            <!-- <el-col
               v-if="item.resource_type === 'folder'"
               :xs="24"
               :sm="12"
@@ -161,8 +161,8 @@
                   </el-text>
                 </template>
               </CardBox>
-            </el-col>
-            <el-col v-else :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
+            </el-col> -->
+            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
               <CardBox
                 :title="item.name"
                 :description="item.desc"
@@ -176,15 +176,16 @@
                     shape="square"
                     :size="32"
                     style="background: none"
-                    class="mr-8"
                   >
                     <img :src="resetUrl(item?.icon)" alt="" />
                   </el-avatar>
                   <ToolIcon v-else :size="32" :type="item?.tool_type" />
                 </template>
                 <template #title>
-                  <div>
-                    {{ item.name }}
+                  <div class="flex align-center">
+                    <span class="ellipsis-1 mb-4" :title="item.name">
+                      {{ item.name }}
+                    </span>
                     <el-tag v-if="item.version" class="ml-4" type="info" effect="plain">
                       {{ item.version }}
                     </el-tag>
@@ -270,10 +271,7 @@
                             {{ $t('common.edit') }}
                           </el-dropdown-item>
                           <el-dropdown-item
-                            v-if="
-                              !item.template_id &&
-                              permissionPrecise.copy(item.id)
-                            "
+                            v-if="!item.template_id && permissionPrecise.copy(item.id)"
                             @click.stop="copyTool(item)"
                           >
                             <AppIcon iconName="app-copy" class="color-secondary"></AppIcon>
@@ -313,10 +311,7 @@
                             {{ $t('views.shared.authorized_workspace') }}
                           </el-dropdown-item>
                           <el-dropdown-item
-                            v-if="
-                              !item.template_id &&
-                              permissionPrecise.export(item.id)
-                            "
+                            v-if="!item.template_id && permissionPrecise.export(item.id)"
                             @click.stop="exportTool(item)"
                           >
                             <AppIcon iconName="app-export" class="color-secondary"></AppIcon>

ui/src/workflow/common/shortcut.ts

@@ -98,12 +98,16 @@ export function initDefaultShortcut(lf: LogicFlow, graph: GraphModel) {
       return
     }
     const nodes = elements.nodes.filter((node) =>
-      ['start-node', 'base-node', 'loop-body-node', 'loop-start-node'].includes(node.type),
+      [
+        'start-node',
+        'base-node',
+        'loop-body-node',
+        'loop-start-node',
+        'knowledge-base-node',
+      ].includes(node.type),
     )
     if (nodes.length > 0) {
-      MsgError(
-        `${nodes[0].properties?.stepName}${t('workflow.delete.deleteMessage')}`,
-      )
+      MsgError(`${nodes[0].properties?.stepName}${t('workflow.delete.deleteMessage')}`)
       return
     }
     MsgConfirm(t('common.tip'), t('workflow.delete.confirmTitle'), {

ui/src/workflow/nodes/document-split-node/index.vue

@@ -38,6 +38,7 @@
           <el-select
             v-model="form_data.split_strategy"
             :placeholder="$t('workflow.nodes.documentSplitNode.splitStrategy.placeholder')"
+            :teleported="false"
           >
             <el-option :label="$t('views.document.setRules.intelligent.label')" value="auto" />
             <el-option :label="$t('views.document.setRules.advanced.label')" value="custom" />
@@ -58,7 +59,12 @@
                   <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
                 </el-tooltip>
               </span>
-              <el-select v-model="form_data.chunk_size_type" size="small" style="width: 85px">
+              <el-select
+                v-model="form_data.chunk_size_type"
+                size="small"
+                style="width: 85px"
+                :teleported="false"
+              >
                 <el-option :label="$t('workflow.variable.Referencing')" value="referencing" />
                 <el-option :label="$t('common.custom')" value="custom" />
               </el-select>
@@ -112,6 +118,7 @@
             </div>
           </template>
           <el-select
+            :teleported="false"
             v-if="form_data.patterns_type === 'custom'"
             v-model="form_data.patterns"
             multiple
@@ -144,7 +151,12 @@
               <span>
                 {{ $t('views.document.setRules.limit.label') }}
               </span>
-              <el-select v-model="form_data.limit_type" size="small" style="width: 85px">
+              <el-select
+                v-model="form_data.limit_type"
+                size="small"
+                style="width: 85px"
+                :teleported="false"
+              >
                 <el-option :label="$t('workflow.variable.Referencing')" value="referencing" />
                 <el-option :label="$t('common.custom')" value="custom" />
               </el-select>
@@ -185,7 +197,12 @@
                   <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
                 </el-tooltip>
               </div>
-              <el-select v-model="form_data.with_filter_type" size="small" style="width: 85px">
+              <el-select
+                v-model="form_data.with_filter_type"
+                size="small"
+                style="width: 85px"
+                :teleported="false"
+              >
                 <el-option :label="$t('workflow.variable.Referencing')" value="referencing" />
                 <el-option :label="$t('common.custom')" value="custom" />
               </el-select>
@@ -213,6 +230,7 @@
                 v-model="form_data.paragraph_title_relate_problem_type"
                 size="small"
                 style="width: 85px"
+                :teleported="false"
               >
                 <el-option :label="$t('workflow.variable.Referencing')" value="referencing" />
                 <el-option :label="$t('common.custom')" value="custom" />
@@ -241,6 +259,7 @@
                 v-model="form_data.document_name_relate_problem_type"
                 size="small"
                 style="width: 85px"
+                :teleported="false"
               >
                 <el-option :label="$t('workflow.variable.Referencing')" value="referencing" />
                 <el-option :label="$t('common.custom')" value="custom" />

ui/src/workflow/nodes/image-understand/index.vue

@@ -118,7 +118,12 @@
           <template #label>
             <div class="flex-between">
               <div>{{ $t('views.application.form.historyRecord.label') }}</div>
-              <el-select v-model="form_data.dialogue_type" type="small" style="width: 100px">
+              <el-select
+                v-model="form_data.dialogue_type"
+                type="small"
+                style="width: 100px"
+                :teleported="false"
+              >
                 <el-option :label="$t('workflow.node')" value="NODE" />
                 <el-option :label="$t('workflow.workflow')" value="WORKFLOW" />
               </el-select>

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

@@ -19,19 +19,10 @@
             required: true,
           }"
         >
-          <el-select v-model="form_data.loop_type" type="small">
-            <el-option
-              :label="$t('workflow.nodes.loopNode.loopType.arrayLoop')"
-              value="ARRAY"
-            />
-            <el-option
-              :label="$t('workflow.nodes.loopNode.loopType.numberLoop')"
-              value="NUMBER"
-            />
-            <el-option
-              :label="$t('workflow.nodes.loopNode.loopType.infiniteLoop')"
-              value="LOOP"
-            />
+          <el-select v-model="form_data.loop_type" type="small" :teleported="false">
+            <el-option :label="$t('workflow.nodes.loopNode.loopType.arrayLoop')" value="ARRAY" />
+            <el-option :label="$t('workflow.nodes.loopNode.loopType.numberLoop')" value="NUMBER" />
+            <el-option :label="$t('workflow.nodes.loopNode.loopType.infiniteLoop')" value="LOOP" />
           </el-select>
         </el-form-item>
         <el-form-item

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

@@ -24,10 +24,7 @@
                 size="small"
                 style="width: 85px"
               >
-                <el-option
-                  :label="$t('workflow.nodes.mcpNode.reference')"
-                  value="referencing"
-                />
+                <el-option :label="$t('workflow.nodes.mcpNode.reference')" value="referencing" />
                 <el-option :label="$t('common.custom')" value="custom" />
               </el-select>
             </div>
@@ -42,6 +39,7 @@
             :placeholder="mcpServerJson"
           />
           <el-select
+            :teleported="false"
             v-else
             v-model="form_data.mcp_tool_id"
             filterable
@@ -82,7 +80,12 @@
               </el-button>
             </div>
           </template>
-          <el-select v-model="form_data.mcp_tool" @change="changeTool" filterable>
+          <el-select
+            v-model="form_data.mcp_tool"
+            @change="changeTool"
+            filterable
+            :teleported="false"
+          >
             <el-option
               v-for="item in form_data.mcp_tools"
               :key="item.value"
@@ -145,10 +148,7 @@
                   style="width: 85px"
                   @change="form_data.tool_params[form_data.params_nested][item.label.label] = ''"
                 >
-                  <el-option
-                    :label="$t('workflow.variable.Referencing')"
-                    value="referencing"
-                  />
+                  <el-option :label="$t('workflow.variable.Referencing')" value="referencing" />
                   <el-option :label="$t('common.custom')" value="custom" />
                 </el-select>
               </div>
@@ -219,10 +219,7 @@
                   style="width: 85px"
                   @change="form_data.tool_params[item.label.label] = ''"
                 >
-                  <el-option
-                    :label="$t('workflow.variable.Referencing')"
-                    value="referencing"
-                  />
+                  <el-option :label="$t('workflow.variable.Referencing')" value="referencing" />
                   <el-option :label="$t('common.custom')" value="custom" />
                 </el-select>
               </div>
@@ -281,7 +278,7 @@ const {
   params: { id },
 } = route as any
 const getResourceDetail = inject('getResourceDetail') as any
-const workflow_mode:WorkflowMode = inject('workflowMode') || WorkflowMode.Application
+const workflow_mode: WorkflowMode = inject('workflowMode') || WorkflowMode.Application
 const resource = getResourceDetail()
 
 const apiType = computed(() => {
@@ -368,7 +365,12 @@ function getTools() {
 }
 
 function _getTools(mcp_servers: any) {
-  loadSharedApi({ type: [WorkflowMode.Application,WorkflowMode.ApplicationLoop].includes(workflow_mode)?'application':'knowledge', systemType: apiType.value })
+  loadSharedApi({
+    type: [WorkflowMode.Application, WorkflowMode.ApplicationLoop].includes(workflow_mode)
+      ? 'application'
+      : 'knowledge',
+    systemType: apiType.value,
+  })
     .getMcpTools(id, mcp_servers, loading)
     .then((res: any) => {
       form_data.value.mcp_tools = res.data

ui/src/workflow/nodes/parameter-extraction-node/component/ParametersFieldDialog.vue

@@ -42,22 +42,17 @@
         />
       </el-form-item>
       <el-form-item
-        :label="
-          $t(
-            'workflow.nodes.parameterExtractionNode.extractParameters.parameterType',
-          )
-        "
+        :label="$t('workflow.nodes.parameterExtractionNode.extractParameters.parameterType')"
         :required="true"
         prop="parameter_type"
         :rules="rules.label"
       >
         <el-select
+          :teleported="false"
           v-model="form.parameter_type"
           :placeholder="
             $t('common.selectPlaceholder') +
-            $t(
-              'workflow.nodes.parameterExtractionNode.extractParameters.parameterType',
-            )
+            $t('workflow.nodes.parameterExtractionNode.extractParameters.parameterType')
           "
           style="width: 100%"
         >

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

@@ -27,7 +27,7 @@
             </div>
           </div>
         </template>
-        <el-select v-model="form_data.strategy">
+        <el-select v-model="form_data.strategy" :teleported="false">
           <el-option
             :label="t('workflow.nodes.variableAggregationNode.placeholder')"
             value="first_non_null"

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

@@ -11,7 +11,7 @@
     >
       <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">
-          <el-form-item >
+          <el-form-item>
             <template #label>
               <div class="flex-between">
                 <div>
@@ -43,10 +43,7 @@
               }}<span class="color-danger">*</span></span
             >
             <el-select :teleported="false" v-model="item.source" size="small" style="width: 85px">
-              <el-option
-                :label="$t('workflow.variable.Referencing')"
-                value="referencing"
-              />
+              <el-option :label="$t('workflow.variable.Referencing')" value="referencing" />
               <el-option :label="$t('common.custom')" value="custom" />
             </el-select>
           </div>
@@ -139,7 +136,7 @@
                 required: true,
               }"
             >
-              <el-select v-model="item.value" style="width: 155px">
+              <el-select v-model="item.value" style="width: 155px" :teleported="false">
                 <el-option label="true" :value="true" />
                 <el-option label="false" :value="false" />
               </el-select>

ui/src/workflow/nodes/video-understand/index.vue

@@ -118,7 +118,12 @@
           <template #label>
             <div class="flex-between">
               <div>{{ $t('views.application.form.historyRecord.label') }}</div>
-              <el-select v-model="form_data.dialogue_type" type="small" style="width: 100px">
+              <el-select
+                v-model="form_data.dialogue_type"
+                type="small"
+                style="width: 100px"
+                :teleported="false"
+              >
                 <el-option :label="$t('workflow.node')" value="NODE" />
                 <el-option :label="$t('workflow.workflow')" value="WORKFLOW" />
               </el-select>