From f09b68d301f19a8b4f76a98718a79185feba60d7 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 17 Nov 2025 17:54:27 +0800
Subject: [PATCH] perf: Optimize tool store style

---
 .../tool/component/ToolListContainer.vue      | 247 +++++++++++++-----
 .../views/tool/toolStore/ToolStoreDialog.vue  |   4 +-
 2 files changed, 181 insertions(+), 70 deletions(-)

diff --git a/ui/src/views/tool/component/ToolListContainer.vue b/ui/src/views/tool/component/ToolListContainer.vue
index 09b14b0e9..f96ba358c 100644
--- a/ui/src/views/tool/component/ToolListContainer.vue
+++ b/ui/src/views/tool/component/ToolListContainer.vue
@@ -6,21 +6,44 @@
     <template #search>
       <div class="flex">
         <div class="flex-between complex-search">
-          <el-select class="complex-search__left" v-model="search_type" style="width: 120px"
-            @change="search_type_change">
+          <el-select
+            class="complex-search__left"
+            v-model="search_type"
+            style="width: 120px"
+            @change="search_type_change"
+          >
             <el-option :label="$t('common.creator')" value="create_user" />
 
             <el-option :label="$t('views.tool.form.toolName.label')" value="name" />
           </el-select>
-          <el-input v-if="search_type === 'name'" v-model="search_form.name" @change="searchHandle"
-            :placeholder="$t('common.searchBar.placeholder')" style="width: 220px" clearable />
-          <el-select v-else-if="search_type === 'create_user'" v-model="search_form.create_user" @change="searchHandle"
-            filterable clearable style="width: 220px">
+          <el-input
+            v-if="search_type === 'name'"
+            v-model="search_form.name"
+            @change="searchHandle"
+            :placeholder="$t('common.searchBar.placeholder')"
+            style="width: 220px"
+            clearable
+          />
+          <el-select
+            v-else-if="search_type === 'create_user'"
+            v-model="search_form.create_user"
+            @change="searchHandle"
+            filterable
+            clearable
+            style="width: 220px"
+          >
             <el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.nick_name" />
           </el-select>
         </div>
-        <el-dropdown trigger="click" v-if="!isShared && permissionPrecise.create()">
-          <el-button type="primary" class="ml-8">
+        <el-button
+          class="ml-8"
+          v-if="!isShared && permissionPrecise.create()"
+          @click="openToolStoreDialog()"
+        >
+          {{ $t('views.tool.toolStore.title') }}
+        </el-button>
+        <el-dropdown trigger="click">
+          <el-button type="primary" class="ml-8" v-if="!isShared && permissionPrecise.create()">
             {{ $t('common.create') }}
             <el-icon class="el-icon--right">
               <arrow-down />
@@ -48,9 +71,17 @@
                   </div>
                 </div>
               </el-dropdown-item>
-              <el-upload ref="elUploadRef" :file-list="[]" action="#" multiple :auto-upload="false"
-                :show-file-list="false" :limit="1" :on-change="(file: any, fileList: any) => importTool(file)"
-                class="import-button">
+              <el-upload
+                ref="elUploadRef"
+                :file-list="[]"
+                action="#"
+                multiple
+                :auto-upload="false"
+                :show-file-list="false"
+                :limit="1"
+                :on-change="(file: any, fileList: any) => importTool(file)"
+                class="import-button"
+              >
                 <el-dropdown-item v-if="permissionPrecise.import()">
                   <div class="flex align-center w-full">
                     <el-avatar shape="square" :size="32" style="background: none">
@@ -62,7 +93,7 @@
                   </div>
                 </el-dropdown-item>
               </el-upload>
-              <el-dropdown-item @click="openToolStoreDialog()">
+              <!-- <el-dropdown-item @click="openToolStoreDialog()">
                 <div class="flex align-center">
                   <el-avatar shape="square" :size="32" style="background: none">
                     <img src="@/assets/icon_tool_shop.svg" alt="" />
@@ -73,7 +104,7 @@
                     </div>
                   </div>
                 </div>
-              </el-dropdown-item>
+              </el-dropdown-item> -->
               <el-dropdown-item @click="openCreateFolder" divided v-if="apiType === 'workspace'">
                 <div class="flex align-center">
                   <AppIcon iconName="app-folder" style="font-size: 32px"></AppIcon>
@@ -91,16 +122,35 @@
       </div>
     </template>
 
-    <div v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading"
-      style="max-height: calc(100vh - 120px)">
-      <InfiniteScroll :size="tool.toolList.length" :total="paginationConfig.total"
-        :page_size="paginationConfig.page_size" v-model:current_page="paginationConfig.current_page" @load="getList"
-        :loading="loading">
+    <div
+      v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading"
+      style="max-height: calc(100vh - 120px)"
+    >
+      <InfiniteScroll
+        :size="tool.toolList.length"
+        :total="paginationConfig.total"
+        :page_size="paginationConfig.page_size"
+        v-model:current_page="paginationConfig.current_page"
+        @load="getList"
+        :loading="loading"
+      >
         <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 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)">
+            <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>
@@ -114,10 +164,21 @@
               </CardBox>
             </el-col>
             <el-col v-else :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
-              <CardBox :title="item.name" :description="item.desc" class="cursor" @click.stop="openCreateDialog(item)"
-                :disabled="permissionPrecise.edit(item.id)">
+              <CardBox
+                :title="item.name"
+                :description="item.desc"
+                class="cursor"
+                @click.stop="openCreateDialog(item)"
+                :disabled="permissionPrecise.edit(item.id)"
+              >
                 <template #icon>
-                  <el-avatar v-if="item?.icon" shape="square" :size="32" style="background: none" class="mr-8">
+                  <el-avatar
+                    v-if="item?.icon"
+                    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" />
@@ -140,9 +201,14 @@
                     {{ t('views.shared.title') }}
                   </el-tag>
                   <el-tooltip effect="dark" content="更新版本">
-                    <el-button text @click.stop v-if="
-                      showUpdateStoreTool(item) && !isShared && permissionPrecise.edit(item.id)
-                    " @click="updateStoreTool(item)">
+                    <el-button
+                      text
+                      @click.stop
+                      v-if="
+                        showUpdateStoreTool(item) && !isShared && permissionPrecise.edit(item.id)
+                      "
+                      @click="updateStoreTool(item)"
+                    >
                       <el-icon v-if="hoverShow">
                         <Refresh />
                       </el-icon>
@@ -169,8 +235,13 @@
                 </template>
                 <template #mouseEnter>
                   <div @click.stop v-if="!isShared && MoreFieldPermission(item.id)">
-                    <el-switch v-model="item.is_active" :before-change="() => changeState(item)" size="small"
-                      class="mr-4" v-if="permissionPrecise.switch(item.id)" />
+                    <el-switch
+                      v-model="item.is_active"
+                      :before-change="() => changeState(item)"
+                      size="small"
+                      class="mr-4"
+                      v-if="permissionPrecise.switch(item.id)"
+                    />
                     <el-divider direction="vertical" />
                     <el-dropdown trigger="click">
                       <el-button text @click.stop>
@@ -178,58 +249,87 @@
                       </el-button>
                       <template #dropdown>
                         <el-dropdown-menu>
-                          <el-dropdown-item v-if="item.tool_type === 'MCP'" @click.stop="showMcpConfig(item)">
+                          <el-dropdown-item
+                            v-if="item.tool_type === 'MCP'"
+                            @click.stop="showMcpConfig(item)"
+                          >
                             <AppIcon iconName="app-operate-log" class="color-secondary"></AppIcon>
                             {{ $t('views.tool.mcpConfig') }}
                           </el-dropdown-item>
-                          <el-dropdown-item v-if="item.template_id && permissionPrecise.edit(item.id)"
-                            @click.stop="addInternalTool(item, true)">
+                          <el-dropdown-item
+                            v-if="item.template_id && permissionPrecise.edit(item.id)"
+                            @click.stop="addInternalTool(item, true)"
+                          >
                             <AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
                             {{ $t('common.edit') }}
                           </el-dropdown-item>
-                          <el-dropdown-item v-if="!item.template_id && permissionPrecise.edit(item.id)"
-                            @click.stop="openCreateDialog(item)">
+                          <el-dropdown-item
+                            v-if="!item.template_id && permissionPrecise.edit(item.id)"
+                            @click.stop="openCreateDialog(item)"
+                          >
                             <AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
                             {{ $t('common.edit') }}
                           </el-dropdown-item>
-                          <el-dropdown-item v-if="
-                            !item.template_id &&
-                            permissionPrecise.copy(item.id) &&
-                            item.tool_type !== 'MCP'
-                          " @click.stop="copyTool(item)">
+                          <el-dropdown-item
+                            v-if="
+                              !item.template_id &&
+                              permissionPrecise.copy(item.id) &&
+                              item.tool_type !== 'MCP'
+                            "
+                            @click.stop="copyTool(item)"
+                          >
                             <AppIcon iconName="app-copy" class="color-secondary"></AppIcon>
                             {{ $t('common.copy') }}
                           </el-dropdown-item>
-                          <el-dropdown-item v-if="
-                            item.init_field_list?.length > 0 && permissionPrecise.edit(item.id)
-                          " @click.stop="configInitParams(item)">
+                          <el-dropdown-item
+                            v-if="
+                              item.init_field_list?.length > 0 && permissionPrecise.edit(item.id)
+                            "
+                            @click.stop="configInitParams(item)"
+                          >
                             <AppIcon iconName="app-operation" class="color-secondary"></AppIcon>
                             {{ $t('common.param.initParam') }}
                           </el-dropdown-item>
-                          <el-dropdown-item @click.stop="openAuthorization(item)"
-                            v-if="apiType === 'workspace' && permissionPrecise.auth(item.id)">
-                            <AppIcon iconName="app-resource-authorization" class="color-secondary"></AppIcon>
+                          <el-dropdown-item
+                            @click.stop="openAuthorization(item)"
+                            v-if="apiType === 'workspace' && permissionPrecise.auth(item.id)"
+                          >
+                            <AppIcon
+                              iconName="app-resource-authorization"
+                              class="color-secondary"
+                            ></AppIcon>
                             {{ $t('views.system.resourceAuthorization.title') }}
                           </el-dropdown-item>
-                          <el-dropdown-item @click.stop="openMoveToDialog(item)"
-                            v-if="permissionPrecise.copy(item.id) && apiType === 'workspace'">
+                          <el-dropdown-item
+                            @click.stop="openMoveToDialog(item)"
+                            v-if="permissionPrecise.copy(item.id) && apiType === 'workspace'"
+                          >
                             <AppIcon iconName="app-migrate" class="color-secondary"></AppIcon>
                             {{ $t('common.moveTo') }}
                           </el-dropdown-item>
-                          <el-dropdown-item v-if="isSystemShare" @click.stop="openAuthorizedWorkspaceDialog(item)">
+                          <el-dropdown-item
+                            v-if="isSystemShare"
+                            @click.stop="openAuthorizedWorkspaceDialog(item)"
+                          >
                             <AppIcon iconName="app-lock" class="color-secondary"></AppIcon>
                             {{ $t('views.shared.authorized_workspace') }}
                           </el-dropdown-item>
-                          <el-dropdown-item v-if="
-                            !item.template_id &&
-                            permissionPrecise.export(item.id) &&
-                            item.tool_type !== 'MCP'
-                          " @click.stop="exportTool(item)">
+                          <el-dropdown-item
+                            v-if="
+                              !item.template_id &&
+                              permissionPrecise.export(item.id) &&
+                              item.tool_type !== 'MCP'
+                            "
+                            @click.stop="exportTool(item)"
+                          >
                             <AppIcon iconName="app-export" class="color-secondary"></AppIcon>
                             {{ $t('common.export') }}
                           </el-dropdown-item>
-                          <el-dropdown-item v-if="permissionPrecise.delete(item.id)" divided
-                            @click.stop="deleteTool(item)">
+                          <el-dropdown-item
+                            v-if="permissionPrecise.delete(item.id)"
+                            divided
+                            @click.stop="deleteTool(item)"
+                          >
                             <AppIcon iconName="app-delete" class="color-secondary"></AppIcon>
                             {{ $t('common.delete') }}
                           </el-dropdown-item>
@@ -253,11 +353,21 @@
   <ToolStoreDialog ref="toolStoreDialogRef" :api-type="apiType" @refresh="refresh" />
   <AddInternalToolDialog ref="AddInternalToolDialogRef" @refresh="confirmAddInternalTool" />
   <McpToolConfigDialog ref="McpToolConfigDialogRef" @refresh="refresh" />
-  <AuthorizedWorkspace ref="AuthorizedWorkspaceDialogRef" v-if="isSystemShare"></AuthorizedWorkspace>
-  <MoveToDialog ref="MoveToDialogRef" :source="SourceTypeEnum.TOOL" @refresh="refreshToolList"
-    v-if="apiType === 'workspace'" />
-  <ResourceAuthorizationDrawer :type="SourceTypeEnum.TOOL" ref="ResourceAuthorizationDrawerRef"
-    v-if="apiType === 'workspace'" />
+  <AuthorizedWorkspace
+    ref="AuthorizedWorkspaceDialogRef"
+    v-if="isSystemShare"
+  ></AuthorizedWorkspace>
+  <MoveToDialog
+    ref="MoveToDialogRef"
+    :source="SourceTypeEnum.TOOL"
+    @refresh="refreshToolList"
+    v-if="apiType === 'workspace'"
+  />
+  <ResourceAuthorizationDrawer
+    :type="SourceTypeEnum.TOOL"
+    ref="ResourceAuthorizationDrawerRef"
+    v-if="apiType === 'workspace'"
+  />
   <ToolStoreDescDrawer ref="toolStoreDescDrawerRef" />
 </template>
 
@@ -284,8 +394,8 @@ import useStore from '@/stores'
 import { t } from '@/locales'
 import { i18n_name } from '@/utils/common'
 import ToolStoreApi from '@/api/tool/store.ts'
-import ToolStoreDescDrawer from "@/views/tool/component/ToolStoreDescDrawer.vue";
-import bus from "@/bus"
+import ToolStoreDescDrawer from '@/views/tool/component/ToolStoreDescDrawer.vue'
+import bus from '@/bus'
 const route = useRoute()
 const { folder, user, tool } = useStore()
 onBeforeRouteLeave((to, from) => {
@@ -387,9 +497,11 @@ function openCreateDialog(data?: any) {
   // 有版本号的展示readme，是商店更新过来的
   if (data?.version) {
     let readMe = ''
-    storeTools.value.filter((item) => item.id === data.template_id).forEach((item) => {
-      readMe = item.readMe
-    })
+    storeTools.value
+      .filter((item) => item.id === data.template_id)
+      .forEach((item) => {
+        readMe = item.readMe
+      })
     bus.emit('select_node', data.folder_id)
     toolStoreDescDrawerRef.value?.open(readMe, data)
     return
@@ -416,7 +528,6 @@ function openCreateDialog(data?: any) {
   if (data) {
     bus.emit('select_node', data.folder_id)
   }
-
 }
 
 function openCreateMcpDialog(data?: any) {
@@ -544,7 +655,7 @@ function deleteTool(row: any) {
           MsgSuccess(t('common.deleteSuccess'))
         })
     })
-    .catch(() => { })
+    .catch(() => {})
 }
 
 function configInitParams(item: any) {
@@ -625,7 +736,7 @@ function updateStoreTool(item: any) {
           getList()
         })
     })
-    .catch(() => { })
+    .catch(() => {})
 }
 
 const elUploadRef = ref()
diff --git a/ui/src/views/tool/toolStore/ToolStoreDialog.vue b/ui/src/views/tool/toolStore/ToolStoreDialog.vue
index e4d190525..6398f9d5e 100644
--- a/ui/src/views/tool/toolStore/ToolStoreDialog.vue
+++ b/ui/src/views/tool/toolStore/ToolStoreDialog.vue
@@ -34,7 +34,7 @@
       </div>
     </template>
 
-    <LayoutContainer v-loading="loading">
+    <LayoutContainer v-loading="loading"  :minLeftWidth="204">
       <template #left>
         <el-anchor
           direction="vertical"
@@ -62,7 +62,7 @@
               {{ category.title }}
             </h4>
             <el-row :gutter="16">
-              <el-col v-for="tool in category.tools" :key="tool.id" :span="12" class="mb-16">
+              <el-col v-for="tool in category.tools" :key="tool.id" :span="8" class="mb-16">
                 <ToolCard
                   :tool="tool"
                   :addLoading="addLoading"