From c3231b039de99018bd8cf632849173f22ac12d72 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 3 Sep 2026 13:34:38 +0800
Subject: [PATCH] feat: workflow menu

---
 ui/src/components/COMPONENT_README.md         |  4 +-
 .../business/workspace-dropdown/index.vue     |  9 ++-
 ui/src/components/mk-drag-upload/index.vue    |  2 +-
 ui/src/styles/STYLE_README.md                 |  4 +-
 ui/src/styles/app.scss                        | 24 ++++--
 ui/src/styles/element-plus.scss               |  2 +
 .../authentication/AuthenticationView.vue     | 33 +++++---
 .../authentication/components/SCANLogin.vue   |  2 +-
 .../authentication/AuthenticationView.vue     | 33 +++++---
 .../icons/ai-chat-node-icon.vue               |  2 +-
 .../node-menu/BasicNodeMenu.vue               | 30 ++++----
 .../node-menu/ResourceNodeMenu.vue            | 75 +++++++++----------
 ui/src/workflow-canvas/node-menu/index.vue    | 30 +++++---
 13 files changed, 146 insertions(+), 104 deletions(-)

diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index 541c34d6e44..1a0750c01c3 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -308,7 +308,7 @@ Element Plus Dropdown 属性和事件通过 `$attrs` 传入，并暴露 `handleO
 
 ```vue
 <MkDropdown trigger="click" placement="bottom-end">
-  <button type="button">打开菜单</button>
+  <el-button text>打开菜单</el-button>
   <template #dropdown>
     <MkDropdownMenu>
       <MkDropdownItem :icon="Setting">设置</MkDropdownItem>
@@ -338,7 +338,7 @@ Element Plus Dropdown 属性和事件通过 `$attrs` 传入，并暴露 `handleO
 ```vue
 <MkFilterableDropdown v-model="selectedWorkspaceId" :options="workspaces" :props="{ label: 'name', value: 'id' }" @select="handleWorkspaceSelect">
   <template #default="{ text }">
-    <button type="button">{{ text }}</button>
+    <el-button text>{{ text }}</el-button>
   </template>
   <template #option="{ option }">
     <span class="truncate" :title="option.name">{{ option.name }}</span>
diff --git a/ui/src/components/business/workspace-dropdown/index.vue b/ui/src/components/business/workspace-dropdown/index.vue
index 83d6ae5cb97..6d73e7bccba 100644
--- a/ui/src/components/business/workspace-dropdown/index.vue
+++ b/ui/src/components/business/workspace-dropdown/index.vue
@@ -10,12 +10,17 @@ const emit = defineEmits<{ select: [option: WorkspaceItem] }>()
 </script>
 
 <template>
-  <MkFilterableDropdown v-model="selectedWorkspaceId" :options="props.options" :props="{ label: 'name', value: 'id' }" @select="emit('select', $event)">
+  <MkFilterableDropdown
+    v-model="selectedWorkspaceId"
+    :options="props.options"
+    :props="{ label: 'name', value: 'id' }"
+    @select="emit('select', $event)"
+  >
     <template #default="{ text }">
       <el-button text class="flex max-w-50 items-center gap-1 rounded-md px-2! py-[7px]! text-N900!">
         <MkIcon name="icon_moments-categories_outlined" class="mr-1" />
         <span class="min-w-0 flex-1 truncate" :title="text">{{ text }}</span>
-        <MkIcon :icon="CaretBottom" :size="14" class="ml-1 shrink-0 text-N600!" />
+        <MkIcon :icon="CaretBottom" :size="14" class="ml-1 text-N600!" />
       </el-button>
     </template>
 
diff --git a/ui/src/components/mk-drag-upload/index.vue b/ui/src/components/mk-drag-upload/index.vue
index 7be9c80407c..a0a397c34a7 100644
--- a/ui/src/components/mk-drag-upload/index.vue
+++ b/ui/src/components/mk-drag-upload/index.vue
@@ -55,7 +55,7 @@ defineExpose({ clearFiles })
             <span class="text-sm text-N500">{{ formatFileSize(selectedFile.size) }}</span>
           </div>
           <div class="flex shrink-0 items-center gap-1">
-            <slot name="download" :file="selectedFile" />
+            <slot name="download" :file="selectedFile"/>
             <el-button aria-label="删除文件" :disabled="disabled" text @click="handleRemove">
               <MkIcon name="icon_delete-trash_outlined" :size="16" class="text-N600" />
             </el-button>
diff --git a/ui/src/styles/STYLE_README.md b/ui/src/styles/STYLE_README.md
index 1b5832d8e18..3bc552fb218 100644
--- a/ui/src/styles/STYLE_README.md
+++ b/ui/src/styles/STYLE_README.md
@@ -302,7 +302,7 @@ Tailwind 类。
 `--color-*` 注册后可以组合生成文字、背景、边框、轮廓等颜色工具类：
 
 ```html
-<button class="bg-primary text-white">确认</button>
+<div class="bg-primary text-white">确认</div>
 <a class="text-primary">链接文字</a>
 <div class="border border-primary">主题色边框</div>
 <input class="outline-primary" />
@@ -311,7 +311,7 @@ Tailwind 类。
 交互状态直接添加 Tailwind 状态前缀：
 
 ```html
-<button class="bg-primary hover:bg-primary/90 focus:ring-2 focus:ring-primary">确认</button>
+<div class="bg-primary hover:bg-primary/90 focus:ring-2 focus:ring-primary">确认</div>
 ```
 
 在颜色类后添加 `/透明度`，可以使用主题色叠加透明效果：
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 02162f07322..662f2b7941e 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -160,6 +160,16 @@ h6 {
   }
 }
 
+
+// 资源菜单的导入按钮
+.mk-import-button {
+  width: 100%;
+  .el-upload {
+    width: 100%;
+  }
+}
+
+
 /*
   标题前带竖线样式
 */
@@ -209,11 +219,15 @@ h6 {
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
 }
 
-// 资源菜单的导入按钮
-.mk-import-button {
-  width: 100%;
-  .el-upload {
-    width: 100%;
+
+
+.mk-scrollbar-right  {
+  &.el-scrollbar {
+    margin-right: calc(var(--spacing) * -4);
+
+    > .el-scrollbar__wrap > .el-scrollbar__view {
+      padding-right: calc(var(--spacing) * 4);
+    }
   }
 }
 
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 622ae465176..1446ce200a5 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -622,6 +622,7 @@
   --el-popover-border-radius: var(--el-border-radius-base);
   &.el-popper {
     padding: 0;
+    color: var(--el-text-color-primary) !important;
   }
 }
 
@@ -895,6 +896,7 @@
   &__content {
     min-height: 0;
     flex: 1;
+    overflow: visible;
   }
   &__item {
     padding: 0 14px;
diff --git a/ui/src/views/system/chat/authentication/AuthenticationView.vue b/ui/src/views/system/chat/authentication/AuthenticationView.vue
index b07fcfbc26b..d52b2b49031 100644
--- a/ui/src/views/system/chat/authentication/AuthenticationView.vue
+++ b/ui/src/views/system/chat/authentication/AuthenticationView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, type Component } from 'vue'
+import { computed, ref, type Component } from 'vue'
 import { LOGIN_METHOD } from '@/api/enums'
 import LDAP from './components/LDAP.vue'
 import CAS from './components/CAS.vue'
@@ -21,21 +21,30 @@ const authenticationTabs: AuthenticationTab[] = [
   { label: 'OAuth2', name: LOGIN_METHOD.OAUTH2, component: OAuth2 },
   { label: '扫码登录', name: 'SCAN', component: SCAN },
 ]
+const activeAuthenticationComponent = computed(() => authenticationTabs.find((tab) => tab.name === activeName.value)?.component)
 </script>
 
 <template>
   <MkViewLayout class="system-settings-authentication">
-    <el-tabs v-model="activeName" class="authentication-tabs min-h-0 flex-1 flex-col">
-      <template v-for="authenticationTab in authenticationTabs" :key="authenticationTab.name">
-        <el-tab-pane class="h-full" :label="authenticationTab.label" :name="authenticationTab.name" lazy>
-          <el-scrollbar>
-            <div class="py-4">
-              <component :is="authenticationTab.component" />
-            </div>
-          </el-scrollbar>
-        </el-tab-pane>
-      </template>
-    </el-tabs>
+    <template #default="{ title, Header }">
+      <component :is="Header">
+        <div class="w-full">
+          <h4 class="mb-4">{{ title }}</h4>
+          <el-tabs v-model="activeName">
+            <el-tab-pane
+              v-for="authenticationTab in authenticationTabs"
+              :key="authenticationTab.name"
+              :label="authenticationTab.label"
+              :name="authenticationTab.name"
+            />
+          </el-tabs>
+        </div>
+      </component>
+
+      <KeepAlive>
+        <component :is="activeAuthenticationComponent" :key="activeName" />
+      </KeepAlive>
+    </template>
   </MkViewLayout>
 </template>
 
diff --git a/ui/src/views/system/chat/authentication/components/SCANLogin.vue b/ui/src/views/system/chat/authentication/components/SCANLogin.vue
index 23ecbd38193..2a6de23a8f6 100644
--- a/ui/src/views/system/chat/authentication/components/SCANLogin.vue
+++ b/ui/src/views/system/chat/authentication/components/SCANLogin.vue
@@ -92,7 +92,7 @@ onMounted(loadQrPlatforms)
 </script>
 
 <template>
-  <div class="space-y-4 pr-2">
+  <div class="space-y-4">
     <template v-for="platform in qrLoginPlatforms" :key="platform.key">
       <el-card shadow="hover">
         <div class="flex-between mb-4">
diff --git a/ui/src/views/system/settings/authentication/AuthenticationView.vue b/ui/src/views/system/settings/authentication/AuthenticationView.vue
index 931cc816021..faa8fa13c64 100644
--- a/ui/src/views/system/settings/authentication/AuthenticationView.vue
+++ b/ui/src/views/system/settings/authentication/AuthenticationView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, type Component } from 'vue'
+import { computed, ref, type Component } from 'vue'
 import { LOGIN_METHOD } from '@/api/enums'
 import LDAP from './components/LDAP.vue'
 import CAS from './components/CAS.vue'
@@ -25,21 +25,30 @@ const authenticationTabs: AuthenticationTab[] = [
   { label: 'SAML2', name: LOGIN_METHOD.SAML2, component: Saml2 },
   { label: '扫码登录', name: 'SCAN', component: SCAN },
 ]
+const activeAuthenticationComponent = computed(() => authenticationTabs.find((tab) => tab.name === activeName.value)?.component)
 </script>
 
 <template>
   <MkViewLayout class="system-settings-authentication">
-    <el-tabs v-model="activeName" class="authentication-tabs min-h-0 flex-1 flex-col">
-      <template v-for="authenticationTab in authenticationTabs" :key="authenticationTab.name">
-        <el-tab-pane class="h-full" :label="authenticationTab.label" :name="authenticationTab.name" lazy>
-          <el-scrollbar>
-            <div class="py-4">
-              <component :is="authenticationTab.component" />
-            </div>
-          </el-scrollbar>
-        </el-tab-pane>
-      </template>
-    </el-tabs>
+    <template #default="{ title, Header }">
+      <component :is="Header">
+        <div class="w-full">
+          <h4 class="mb-4">{{ title }}</h4>
+          <el-tabs v-model="activeName">
+            <el-tab-pane
+              v-for="authenticationTab in authenticationTabs"
+              :key="authenticationTab.name"
+              :label="authenticationTab.label"
+              :name="authenticationTab.name"
+            />
+          </el-tabs>
+        </div>
+      </component>
+
+      <KeepAlive>
+        <component :is="activeAuthenticationComponent" :key="activeName" />
+      </KeepAlive>
+    </template>
   </MkViewLayout>
 </template>
 
diff --git a/ui/src/workflow-canvas/icons/ai-chat-node-icon.vue b/ui/src/workflow-canvas/icons/ai-chat-node-icon.vue
index 7ea4a139f8c..b73cf6b4daa 100644
--- a/ui/src/workflow-canvas/icons/ai-chat-node-icon.vue
+++ b/ui/src/workflow-canvas/icons/ai-chat-node-icon.vue
@@ -1,6 +1,6 @@
 <template>
   <el-avatar class="ai-avatar-gradient" shape="square">
-    <img src="@/assets/workflow/icon_ai_chat.svg" style="width: 75%" alt="" />
+    <img src="@/assets/workflow/icon_ai_chat.svg" style="width: 74%" alt="" />
   </el-avatar>
 </template>
 <script setup lang="ts"></script>
diff --git a/ui/src/workflow-canvas/node-menu/BasicNodeMenu.vue b/ui/src/workflow-canvas/node-menu/BasicNodeMenu.vue
index a12851b436a..af586975810 100644
--- a/ui/src/workflow-canvas/node-menu/BasicNodeMenu.vue
+++ b/ui/src/workflow-canvas/node-menu/BasicNodeMenu.vue
@@ -30,25 +30,27 @@ function handleNodeDragStart(event: PointerEvent, workflowNode: WorkflowMenuNode
 </script>
 
 <template>
-  <div>
+  <div class="p-4">
     <MkSearchInput v-model="searchKeyword" placeholder="按名称搜索" />
 
-    <el-scrollbar height="500">
+    <el-scrollbar height="450" class="mk-scrollbar-right">
       <template v-if="filteredComponentGroups.length">
         <template v-for="group in filteredComponentGroups" :key="group.label">
-          <p class="mb-3 mt-3 text-N600">{{ group.label }}</p>
+          <p class="mb-3 mt-3 font-semibold text-sm text-N600">{{ group.label }}</p>
           <div class="grid grid-cols-2 gap-3">
-            <button
-              v-for="workflowNode in group.list"
-              :key="workflowNode.type"
-              type="button"
-              class="flex h-10 cursor-grab items-center gap-3 rounded-md border border-N300 px-3 text-left text-N900 hover:border-primary hover:text-primary active:cursor-grabbing"
-              @click="emit('select', workflowNode)"
-              @pointerdown="handleNodeDragStart($event, workflowNode)"
-            >
-              <component :is="iconComponent(`${workflowNode.type}-icon`)" class="shrink-0" :size="24" />
-              <span>{{ workflowNode.label }}</span>
-            </button>
+            <template v-for="workflowNode in group.list" :key="workflowNode.type">
+              <el-card
+                class="small cursor-pointer"
+                shadow="never"
+                @click="emit('select', workflowNode)"
+                @pointerdown="handleNodeDragStart($event, workflowNode)"
+              >
+                <div class="flex items-center gap-2">
+                  <component :is="iconComponent(`${workflowNode.type}-icon`)" :size="20" />
+                  <span>{{ workflowNode.label }}</span>
+                </div>
+              </el-card>
+            </template>
           </div>
         </template>
       </template>
diff --git a/ui/src/workflow-canvas/node-menu/ResourceNodeMenu.vue b/ui/src/workflow-canvas/node-menu/ResourceNodeMenu.vue
index f52616bd4fa..7e0f164b9e5 100644
--- a/ui/src/workflow-canvas/node-menu/ResourceNodeMenu.vue
+++ b/ui/src/workflow-canvas/node-menu/ResourceNodeMenu.vue
@@ -5,12 +5,13 @@ import { cloneDeep } from 'lodash'
 import ApplicationApi from '@/api/admin/workspace/application/application'
 import SharedApi from '@/api/admin/workspace/shared'
 import ToolApi from '@/api/admin/workspace/tool/tool'
-import { APPLICATION_TYPE, RESOURCE_TYPE, TOOL_TYPE } from '@/api/enums'
+import { RESOURCE_TYPE, TOOL_TYPE } from '@/api/enums'
 import type { ApplicationDetail, ApplicationType, FolderItem, ToolItem, ToolType } from '@/api/types'
-import FolderTree from '@/components/business/folder-tree/index.vue'
+import type { NodeMenuItem, NodeMenuResourceSource } from './types'
 import { FOLDER_ENTRY_ID } from '@/constants'
+import { isWorkFlow } from '@/utils/application'
+import FolderTree from '@/components/business/folder-tree/index.vue'
 import { applicationNode, toolLibNode, toolWorkflowLibNode } from '@/workflow-canvas/config/node-data'
-import type { NodeMenuItem, NodeMenuResourceSource } from './types'
 
 defineOptions({ name: 'ResourceNodeMenu' })
 
@@ -127,8 +128,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex h-[450px] min-h-0">
-    <aside class="flex w-60 shrink-0 border-r pt-3">
+  <div class="flex h-140 min-h-0">
+    <aside class="w-sidebar-expanded border-r pt-3">
       <FolderTree v-model="currentFolderId" :can-edit="false" :show-shared="isToolMenu" :source="source" @select="loadResources" />
     </aside>
 
@@ -139,41 +140,35 @@ onMounted(() => {
 
       <el-scrollbar class="min-h-0 flex-1">
         <div v-if="filteredResourceItems.length" class="grid grid-cols-2 gap-3 px-3 pb-3">
-          <el-popover
-            v-for="resource in filteredResourceItems"
-            :key="resource.id"
-            placement="right"
-            :width="280"
-            :show-after="500"
-            :persistent="false"
-          >
-            <template #reference>
-              <button
-                type="button"
-                class="flex h-10 min-w-0 cursor-grab items-center gap-2 rounded-md border border-N300 px-3 text-left text-N900 hover:border-primary hover:text-primary active:cursor-grabbing"
-                @click="emit('select', resource.node)"
-                @pointerdown="handleNodeDragStart($event, resource.node)"
-              >
-                <ToolIcon v-if="isToolMenu" :icon="resource.icon" :size="20" :type="resource.toolType" />
-                <ApplicationIcon v-else :icon="resource.icon" :size="20" />
-                <span class="min-w-0 flex-1 truncate" :title="resource.name">{{ resource.name }}</span>
-              </button>
-            </template>
-
-            <div class="flex min-w-0 items-center gap-2">
-              <ToolIcon v-if="isToolMenu" :icon="resource.icon" :size="24" :type="resource.toolType" />
-              <ApplicationIcon v-else :icon="resource.icon" :size="24" />
-              <h6 class="min-w-0 flex-1 break-all">{{ resource.name }}</h6>
-              <el-tag
-                v-if="resource.applicationType"
-                size="small"
-                :type="resource.applicationType === APPLICATION_TYPE.WORK_FLOW ? 'warning' : 'primary'"
-              >
-                {{ resource.applicationType === APPLICATION_TYPE.WORK_FLOW ? '高级智能体' : '简易智能体' }}
-              </el-tag>
-            </div>
-            <p v-if="resource.desc" class="mt-2 text-sm text-N600">{{ resource.desc }}</p>
-          </el-popover>
+          <template v-for="resource in filteredResourceItems" :key="resource.id">
+            <el-popover placement="right" :width="280" :show-after="500" :persistent="false">
+              <template #reference>
+                <el-card
+                  class="small cursor-pointer"
+                  shadow="never"
+                  @click="emit('select', resource.node)"
+                  @pointerdown="handleNodeDragStart($event, resource.node)"
+                >
+                  <div class="flex items-center gap-2">
+                    <ToolIcon v-if="isToolMenu" :icon="resource.icon" :size="20" :type="resource.toolType" />
+                    <ApplicationIcon v-else :icon="resource.icon" :size="20" />
+                    <span class="min-w-0 flex-1 truncate" :title="resource.name">{{ resource.name }}</span>
+                  </div>
+                </el-card>
+              </template>
+              <div class="p-3">
+                <div class="flex min-w-0 items-center gap-2">
+                  <ToolIcon v-if="isToolMenu" :icon="resource.icon" :size="24" :type="resource.toolType" />
+                  <ApplicationIcon v-else :icon="resource.icon" :size="24" />
+                  <p class="min-w-0 flex-1 break-all truncate">{{ resource.name }}</p>
+                  <el-tag v-if="resource.applicationType" size="small" :type="isWorkFlow(resource.applicationType) ? 'warning' : 'primary'">
+                    {{ isWorkFlow(resource.applicationType) ? '高级' : '简易' }}
+                  </el-tag>
+                </div>
+                <p v-if="resource.desc" class="mt-2 text-sm text-N600">{{ resource.desc }}</p>
+              </div>
+            </el-popover>
+          </template>
         </div>
         <MkEmpty v-else :type="searchKeyword ? 'search' : 'default'" :image-size="72" />
       </el-scrollbar>
diff --git a/ui/src/workflow-canvas/node-menu/index.vue b/ui/src/workflow-canvas/node-menu/index.vue
index 0440a40926a..c9a620f5f79 100644
--- a/ui/src/workflow-canvas/node-menu/index.vue
+++ b/ui/src/workflow-canvas/node-menu/index.vue
@@ -21,23 +21,29 @@ function handleDragStart(node: NodeMenuItem, event: PointerEvent) {
 
 <template>
   <div
-    class="overflow-hidden rounded-xl border bg-white shadow-md p-4 pb-0!"
-    :class="activeTab === 'basic' ? 'w-[402px]' : 'w-[640px]'"
+    class="overflow-hidden rounded-xl border bg-white shadow-md"
+    :class="activeTab === 'basic' ? 'w-[414px]' : 'w-[670px]'"
     @click.stop
     @mousedown.stop
     @mousemove.stop
   >
-    <el-tabs v-model="activeTab" class="small">
-      <el-tab-pane label="基础组件" name="basic">
-        <BasicNodeMenu @dragstart="handleDragStart" @select="emit('select', $event)" />
-      </el-tab-pane>
-      <el-tab-pane label="工具" name="tool" lazy>
-        <ResourceNodeMenu :source="RESOURCE_TYPE.TOOL" @dragstart="handleDragStart" @select="emit('select', $event)" />
-      </el-tab-pane>
-      <el-tab-pane label="智能体" name="application" lazy>
-        <ResourceNodeMenu :source="RESOURCE_TYPE.APPLICATION" @dragstart="handleDragStart" @select="emit('select', $event)" />
-      </el-tab-pane>
+    <el-tabs v-model="activeTab" class="small p-4 pb-0">
+      <el-tab-pane label="基础组件" name="basic" />
+      <el-tab-pane label="工具" name="tool" />
+      <el-tab-pane label="智能体" name="application" />
     </el-tabs>
+
+    <KeepAlive>
+      <BasicNodeMenu v-if="activeTab === 'basic'" key="basic" @dragstart="handleDragStart" @select="emit('select', $event)" />
+
+      <ResourceNodeMenu
+        v-else
+        :key="activeTab"
+        :source="activeTab === 'tool' ? RESOURCE_TYPE.TOOL : RESOURCE_TYPE.APPLICATION"
+        @dragstart="handleDragStart"
+        @select="emit('select', $event)"
+      />
+    </KeepAlive>
   </div>
 </template>