From 45b3dd3b5f530c96647c0797298e8dddaac1ad58 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 25 Nov 2025 17:43:01 +0800
Subject: [PATCH] perf: Optimize the style

---
 .../assets/knowledge/icon_basic_template.svg  |   7 +
 ui/src/assets/knowledge/logo_workflow.svg     |  20 +--
 ui/src/assets/tool/icon_datasource.svg        |   5 +
 ui/src/assets/{workflow => tool}/icon_mcp.svg |   0
 .../assets/{workflow => tool}/icon_tool.svg   |   0
 .../{workflow => tool}/icon_tool_custom.svg   |   0
 ui/src/assets/{ => tool}/icon_tool_shop.svg   |   0
 ui/src/components/app-icon/ToolIcon.vue       |   7 +-
 ui/src/components/card-checkbox/index.vue     |  39 +----
 .../dropdown_menu/application/NodeContent.vue |   4 +-
 .../dropdown_menu/knowledge/NodeContent.vue   |   4 +-
 .../items/upload/LocalFileUpload.vue          |   4 +-
 .../lang/en-US/views/knowledge-workflow.ts    |   4 +
 ui/src/locales/lang/en-US/views/knowledge.ts  |   9 ++
 ui/src/locales/lang/en-US/views/tool.ts       |   1 +
 .../lang/zh-CN/views/application-workflow.ts  |   1 -
 .../lang/zh-CN/views/knowledge-workflow.ts    |   5 +-
 ui/src/locales/lang/zh-CN/views/knowledge.ts  |  13 +-
 ui/src/locales/lang/zh-CN/views/tool.ts       |   1 +
 .../zh-Hant/views/application-workflow.ts     |   1 -
 .../lang/zh-Hant/views/knowledge-workflow.ts  |   5 +-
 .../locales/lang/zh-Hant/views/knowledge.ts   |   9 ++
 ui/src/locales/lang/zh-Hant/views/tool.ts     |  11 +-
 ui/src/styles/component.scss                  | 149 ++++++++++++------
 ui/src/views/application-workflow/index.vue   |   2 +-
 .../component/CreateApplicationDialog.vue     |  18 +--
 .../component/McpServersDialog.vue            |   2 +-
 .../knowledge-workflow/component/Debug.vue    |  31 ----
 .../{action/index.vue => DebugDrawer.vue}     |  44 ++++--
 .../component/action/DataSource.vue           |   5 +-
 ui/src/views/knowledge-workflow/index.vue     |   8 +-
 .../component/KnowledgeListContainer.vue      |   9 +-
 .../CreateWorkflowKnowledgeDialog.vue         |  42 +++++
 .../views/tool/DataSourceToolFormDrawer.vue   |   8 +-
 ui/src/views/tool/McpToolFormDrawer.vue       |   4 +-
 ui/src/views/tool/ToolFormDrawer.vue          |   4 +-
 .../tool/component/ToolListContainer.vue      |  22 +--
 ui/src/workflow/icons/mcp-node-icon.vue       |   2 +-
 ui/src/workflow/icons/tool-lib-node-icon.vue  |   2 +-
 ui/src/workflow/icons/tool-node-icon.vue      |   2 +-
 40 files changed, 280 insertions(+), 224 deletions(-)
 create mode 100644 ui/src/assets/knowledge/icon_basic_template.svg
 create mode 100644 ui/src/assets/tool/icon_datasource.svg
 rename ui/src/assets/{workflow => tool}/icon_mcp.svg (100%)
 rename ui/src/assets/{workflow => tool}/icon_tool.svg (100%)
 rename ui/src/assets/{workflow => tool}/icon_tool_custom.svg (100%)
 rename ui/src/assets/{ => tool}/icon_tool_shop.svg (100%)
 delete mode 100644 ui/src/views/knowledge-workflow/component/Debug.vue
 rename ui/src/views/knowledge-workflow/component/{action/index.vue => DebugDrawer.vue} (69%)

diff --git a/ui/src/assets/knowledge/icon_basic_template.svg b/ui/src/assets/knowledge/icon_basic_template.svg
new file mode 100644
index 000000000..9ed91c3d8
--- /dev/null
+++ b/ui/src/assets/knowledge/icon_basic_template.svg
@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2.66671C4 1.93033 4.59695 1.33337 5.33333 1.33337H21.1477C21.3265 1.33337 21.4979 1.4052 21.6232 1.53272L27.8088 7.82592C27.9313 7.9506 28 8.11842 28 8.29324V29.3334C28 30.0698 27.403 30.6667 26.6667 30.6667H5.33333C4.59695 30.6667 4 30.0698 4 29.3334V2.66671Z" fill="#FF8800"/>
+<path d="M9.33325 11.3333C9.33325 10.9651 9.63173 10.6666 9.99992 10.6666H21.9999C22.3681 10.6666 22.6666 10.9651 22.6666 11.3333V12.6666C22.6666 13.0348 22.3681 13.3333 21.9999 13.3333H9.99992C9.63173 13.3333 9.33325 13.0348 9.33325 12.6666V11.3333Z" fill="white"/>
+<path d="M14.6666 16.6666C14.6666 16.2984 14.9651 16 15.3333 16H21.9999C22.3681 16 22.6666 16.2984 22.6666 16.6666V23.3333C22.6666 23.7015 22.3681 24 21.9999 24H15.3333C14.9651 24 14.6666 23.7015 14.6666 23.3333V16.6666Z" fill="white"/>
+<path d="M9.99992 16C9.63173 16 9.33325 16.2984 9.33325 16.6666V23.3333C9.33325 23.7015 9.63173 24 9.99992 24H11.3333C11.7014 24 11.9999 23.7015 11.9999 23.3333V16.6666C11.9999 16.2984 11.7014 16 11.3333 16H9.99992Z" fill="white"/>
+<path d="M21.3333 1.33337C21.4421 1.36494 21.5422 1.42405 21.6231 1.50637L27.8087 7.79957C27.8593 7.85109 27.9008 7.90998 27.932 7.97369H22.8468C22.0109 7.97369 21.3333 7.29607 21.3333 6.46017V1.33337Z" fill="#D97400"/>
+</svg>
diff --git a/ui/src/assets/knowledge/logo_workflow.svg b/ui/src/assets/knowledge/logo_workflow.svg
index 28f4b0fda..7de1fb422 100644
--- a/ui/src/assets/knowledge/logo_workflow.svg
+++ b/ui/src/assets/knowledge/logo_workflow.svg
@@ -1,15 +1,7 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_5975_11761)">
-<path d="M0 16C0 8.45753 0 4.68629 2.34315 2.34315C4.68629 0 8.45753 0 16 0C23.5425 0 27.3137 0 29.6569 2.34315C32 4.68629 32 8.45753 32 16C32 23.5425 32 27.3137 29.6569 29.6569C27.3137 32 23.5425 32 16 32C8.45753 32 4.68629 32 2.34315 29.6569C0 27.3137 0 23.5425 0 16Z" fill="#7F3BF5"/>
-<path d="M9.18415 10.0468C9.99587 9.49862 10.9382 9.33337 11.5681 9.33337H18.5C18.0397 9.33337 17.6666 9.70647 17.6666 10.1667C17.6666 10.6269 18.0397 11 18.5 11H11.5681C11.1754 11 10.5836 11.1128 10.1169 11.428C9.69621 11.7121 9.33329 12.1832 9.33329 13.0639C9.33329 13.9461 9.69781 14.4281 10.1231 14.7208C10.5922 15.0438 11.1835 15.1613 11.5681 15.1613H20.4977C21.1331 15.1613 22.0633 15.3331 22.86 15.8905C23.7011 16.4789 24.3333 17.4598 24.3333 18.9079C24.3333 20.3555 23.7016 21.3385 22.8623 21.9298C22.0665 22.4905 21.1361 22.6667 20.4977 22.6667H13.5C13.9602 22.6667 14.3333 22.2936 14.3333 21.8334C14.3333 21.3731 13.9602 21 13.5 21H20.4977C20.8819 21 21.4527 20.8841 21.9024 20.5673C22.3085 20.2812 22.6666 19.8014 22.6666 18.9079C22.6666 18.0149 22.3091 17.5391 21.9046 17.2562C21.4559 16.9423 20.8849 16.828 20.4977 16.828H11.5681C10.9301 16.828 9.98723 16.6507 9.17799 16.0936C8.32484 15.5063 7.66663 14.5229 7.66663 13.0639C7.66663 11.6035 8.32643 10.626 9.18415 10.0468Z" fill="white"/>
-<path d="M13.5 21C13.0397 21 12.6666 21.3731 12.6666 21.8334C12.6666 22.2936 13.0397 22.6667 13.5 22.6667H8.49996C8.03972 22.6667 7.66663 22.2936 7.66663 21.8334C7.66663 21.3731 8.03972 21 8.49996 21H13.5Z" fill="white"/>
-<path d="M18.5 11C18.9602 11 19.3333 10.6269 19.3333 10.1667C19.3333 9.70647 18.9602 9.33337 18.5 9.33337H23.4545C23.9147 9.33337 24.2878 9.70647 24.2878 10.1667C24.2878 10.6269 23.9147 11 23.4545 11H18.5Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 9.33329C18.0398 9.33329 17.6667 9.70639 17.6667 10.1666C17.6667 10.6269 18.0398 11 18.5 11C18.9602 11 19.3333 10.6269 19.3333 10.1666C19.3333 9.70639 18.9602 9.33329 18.5 9.33329ZM16 10.1666C16 8.78591 17.1193 7.66663 18.5 7.66663C19.8807 7.66663 21 8.78591 21 10.1666C21 11.5473 19.8807 12.6666 18.5 12.6666C17.1193 12.6666 16 11.5473 16 10.1666Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 21C13.0398 21 12.6667 21.3731 12.6667 21.8334C12.6667 22.2936 13.0398 22.6667 13.5 22.6667C13.9602 22.6667 14.3333 22.2936 14.3333 21.8334C14.3333 21.3731 13.9602 21 13.5 21ZM11 21.8334C11 20.4527 12.1193 19.3334 13.5 19.3334C14.8807 19.3334 16 20.4527 16 21.8334C16 23.2141 14.8807 24.3334 13.5 24.3334C12.1193 24.3334 11 23.2141 11 21.8334Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_5975_11761">
-<rect width="32" height="32" fill="white"/>
-</clipPath>
-</defs>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.18415 4.04678C3.99587 3.49862 4.93815 3.33337 5.56813 3.33337H12.5C12.0397 3.33337 11.6666 3.70647 11.6666 4.16671C11.6666 4.62694 12.0397 5.00004 12.5 5.00004H5.56813C5.1754 5.00004 4.58359 5.11283 4.1169 5.428C3.69621 5.71209 3.33329 6.18316 3.33329 7.06392C3.33329 7.94608 3.69781 8.42805 4.12306 8.72081C4.59223 9.04379 5.18345 9.16132 5.56813 9.16132H14.4977C15.1331 9.16132 16.0633 9.3331 16.86 9.89052C17.7011 10.4789 18.3333 11.4598 18.3333 12.9079C18.3333 14.3555 17.7016 15.3385 16.8623 15.9298C16.0665 16.4905 15.1361 16.6667 14.4977 16.6667H7.49996C7.9602 16.6667 8.33329 16.2936 8.33329 15.8334C8.33329 15.3731 7.9602 15 7.49996 15H14.4977C14.8819 15 15.4527 14.8841 15.9024 14.5673C16.3085 14.2812 16.6666 13.8014 16.6666 12.9079C16.6666 12.0149 16.3091 11.5391 15.9046 11.2562C15.4559 10.9423 14.8849 10.828 14.4977 10.828H5.56813C4.9301 10.828 3.98723 10.6507 3.17799 10.0936C2.32484 9.50629 1.66663 8.52289 1.66663 7.06392C1.66663 5.60354 2.32643 4.62601 3.18415 4.04678Z" fill="white"/>
+<path d="M7.49996 15C7.03972 15 6.66663 15.3731 6.66663 15.8334C6.66663 16.2936 7.03972 16.6667 7.49996 16.6667H2.49996C2.03972 16.6667 1.66663 16.2936 1.66663 15.8334C1.66663 15.3731 2.03972 15 2.49996 15H7.49996Z" fill="white"/>
+<path d="M12.5 5.00004C12.9602 5.00004 13.3333 4.62694 13.3333 4.16671C13.3333 3.70647 12.9602 3.33337 12.5 3.33337H17.4545C17.9147 3.33337 18.2878 3.70647 18.2878 4.16671C18.2878 4.62694 17.9147 5.00004 17.4545 5.00004H12.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 3.33329C12.0398 3.33329 11.6667 3.70639 11.6667 4.16663C11.6667 4.62686 12.0398 4.99996 12.5 4.99996C12.9602 4.99996 13.3333 4.62686 13.3333 4.16663C13.3333 3.70639 12.9602 3.33329 12.5 3.33329ZM10 4.16663C10 2.78591 11.1193 1.66663 12.5 1.66663C13.8807 1.66663 15 2.78591 15 4.16663C15 5.54734 13.8807 6.66663 12.5 6.66663C11.1193 6.66663 10 5.54734 10 4.16663Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 15C7.03976 15 6.66667 15.3731 6.66667 15.8334C6.66667 16.2936 7.03976 16.6667 7.5 16.6667C7.96024 16.6667 8.33333 16.2936 8.33333 15.8334C8.33333 15.3731 7.96024 15 7.5 15ZM5 15.8334C5 14.4527 6.11929 13.3334 7.5 13.3334C8.88071 13.3334 10 14.4527 10 15.8334C10 17.2141 8.88071 18.3334 7.5 18.3334C6.11929 18.3334 5 17.2141 5 15.8334Z" fill="white"/>
 </svg>
diff --git a/ui/src/assets/tool/icon_datasource.svg b/ui/src/assets/tool/icon_datasource.svg
new file mode 100644
index 000000000..88862f01d
--- /dev/null
+++ b/ui/src/assets/tool/icon_datasource.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.08337 4.58331C2.08337 4.91162 2.28814 5.23671 2.68599 5.54002C3.08384 5.84334 3.66698 6.11893 4.40211 6.35108C5.13724 6.58323 6.00997 6.76738 6.97046 6.89301C7.93096 7.01865 8.96041 7.08331 10 7.08331C11.0397 7.08331 12.0691 7.01865 13.0296 6.89301C13.9901 6.76738 14.8628 6.58323 15.598 6.35108C16.3331 6.11893 16.9162 5.84334 17.3141 5.54002C17.7119 5.23671 17.9167 4.91162 17.9167 4.58331C17.9167 3.92027 17.0826 3.28439 15.598 2.81555C14.1133 2.34671 12.0997 2.08331 10 2.08331C7.90041 2.08331 5.88678 2.34671 4.40211 2.81555C2.91745 3.28439 2.08337 3.92027 2.08337 4.58331Z" fill="white"/>
+<path d="M10 13.75C6.52088 13.75 3.56671 13.0417 2.50421 12.0583C2.46911 12.0244 2.42481 12.0016 2.37683 11.9928C2.32885 11.9839 2.27932 11.9894 2.23443 12.0085C2.18954 12.0276 2.15127 12.0595 2.12441 12.1002C2.09754 12.141 2.08327 12.1887 2.08337 12.2375V15.4167C2.08337 16.7958 5.62921 17.9167 10 17.9167C14.3709 17.9167 17.9167 16.7958 17.9167 15.4167V12.2375C17.9167 12.0167 17.6584 11.9083 17.4959 12.0583C16.4334 13.0417 13.4792 13.75 10 13.75Z" fill="white"/>
+<path d="M10 8.33332C6.52088 8.33332 3.56671 7.62499 2.50421 6.64165C2.46911 6.60776 2.42481 6.58496 2.37683 6.57609C2.32885 6.56723 2.27932 6.57269 2.23443 6.59181C2.18954 6.61092 2.15127 6.64283 2.12441 6.68356C2.09754 6.72429 2.08327 6.77203 2.08337 6.82082V9.99998C2.08337 11.3792 5.62921 12.5 10 12.5C14.3709 12.5 17.9167 11.3792 17.9167 9.99998V6.82082C17.9167 6.59998 17.6584 6.49165 17.4959 6.64165C16.4334 7.62499 13.4792 8.33332 10 8.33332Z" fill="white"/>
+</svg>
diff --git a/ui/src/assets/workflow/icon_mcp.svg b/ui/src/assets/tool/icon_mcp.svg
similarity index 100%
rename from ui/src/assets/workflow/icon_mcp.svg
rename to ui/src/assets/tool/icon_mcp.svg
diff --git a/ui/src/assets/workflow/icon_tool.svg b/ui/src/assets/tool/icon_tool.svg
similarity index 100%
rename from ui/src/assets/workflow/icon_tool.svg
rename to ui/src/assets/tool/icon_tool.svg
diff --git a/ui/src/assets/workflow/icon_tool_custom.svg b/ui/src/assets/tool/icon_tool_custom.svg
similarity index 100%
rename from ui/src/assets/workflow/icon_tool_custom.svg
rename to ui/src/assets/tool/icon_tool_custom.svg
diff --git a/ui/src/assets/icon_tool_shop.svg b/ui/src/assets/tool/icon_tool_shop.svg
similarity index 100%
rename from ui/src/assets/icon_tool_shop.svg
rename to ui/src/assets/tool/icon_tool_shop.svg
diff --git a/ui/src/components/app-icon/ToolIcon.vue b/ui/src/components/app-icon/ToolIcon.vue
index 0047d9907..16fd58054 100644
--- a/ui/src/components/app-icon/ToolIcon.vue
+++ b/ui/src/components/app-icon/ToolIcon.vue
@@ -1,9 +1,12 @@
 <template>
   <el-avatar v-if="type == 'MCP'" shape="square" :size="size">
-    <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
+    <img src="@/assets/tool/icon_mcp.svg" style="width: 75%" alt="" />
+  </el-avatar>
+  <el-avatar v-else-if="type == 'DATA_SOURCE'" class="avatar-purple" shape="square" :size="size">
+    <img src="@/assets/tool/icon_datasource.svg" style="width: 58%" alt="" />
   </el-avatar>
   <el-avatar v-else class="avatar-green" shape="square" :size="size">
-    <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+    <img src="@/assets/tool/icon_tool.svg" style="width: 58%" alt="" />
   </el-avatar>
 </template>
 <script setup lang="ts">
diff --git a/ui/src/components/card-checkbox/index.vue b/ui/src/components/card-checkbox/index.vue
index c1a1629f5..f1cd803a4 100644
--- a/ui/src/components/card-checkbox/index.vue
+++ b/ui/src/components/card-checkbox/index.vue
@@ -49,41 +49,4 @@ function checkboxChange() {
   emit('change')
 }
 </script>
-<style lang="scss">
-.card-checkbox {
-  &.active {
-    border: 1px solid var(--el-color-primary);
-  }
-  input.checkbox[type='checkbox'] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    height: 14px;
-    width: 14px;
-    position: relative;
-
-    &::after {
-      position: absolute;
-      top: 0;
-      background-color: white;
-      color: #000;
-      height: 13px;
-      width: 13px;
-      visibility: visible;
-      text-align: center;
-      box-sizing: border-box;
-      border: var(--el-border);
-      border-radius: var(--el-border-radius-small);
-      box-sizing: content-box;
-      content: '';
-    }
-
-    &:checked::after {
-      content: '✓';
-      color: #ffffff;
-      border-color: var(--el-color-primary);
-      background: var(--el-color-primary);
-    }
-  }
-}
-</style>
+<style lang="scss"></style>
diff --git a/ui/src/components/dropdown_menu/application/NodeContent.vue b/ui/src/components/dropdown_menu/application/NodeContent.vue
index 1476242ac..40205164e 100644
--- a/ui/src/components/dropdown_menu/application/NodeContent.vue
+++ b/ui/src/components/dropdown_menu/application/NodeContent.vue
@@ -31,7 +31,7 @@
               <img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
             </el-avatar>
             <el-avatar v-else class="avatar-green" shape="square" :size="20">
-              <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+              <img src="@/assets/tool/icon_tool.svg" style="width: 58%" alt="" />
             </el-avatar>
             <span class="ml-8 ellipsis" :title="item.name">{{ item.name }}</span>
           </div>
@@ -49,7 +49,7 @@
                 <img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
               </el-avatar>
               <el-avatar v-else class="avatar-green" shape="square" :size="20">
-                <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+                <img src="@/assets/tool/icon_tool.svg" style="width: 58%" alt="" />
               </el-avatar>
               <span class="font-medium ml-8 break-all" :title="item.name">{{ item.name }}</span>
             </div>
diff --git a/ui/src/components/dropdown_menu/knowledge/NodeContent.vue b/ui/src/components/dropdown_menu/knowledge/NodeContent.vue
index 1476242ac..40205164e 100644
--- a/ui/src/components/dropdown_menu/knowledge/NodeContent.vue
+++ b/ui/src/components/dropdown_menu/knowledge/NodeContent.vue
@@ -31,7 +31,7 @@
               <img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
             </el-avatar>
             <el-avatar v-else class="avatar-green" shape="square" :size="20">
-              <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+              <img src="@/assets/tool/icon_tool.svg" style="width: 58%" alt="" />
             </el-avatar>
             <span class="ml-8 ellipsis" :title="item.name">{{ item.name }}</span>
           </div>
@@ -49,7 +49,7 @@
                 <img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
               </el-avatar>
               <el-avatar v-else class="avatar-green" shape="square" :size="20">
-                <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+                <img src="@/assets/tool/icon_tool.svg" style="width: 58%" alt="" />
               </el-avatar>
               <span class="font-medium ml-8 break-all" :title="item.name">{{ item.name }}</span>
             </div>
diff --git a/ui/src/components/dynamics-form/items/upload/LocalFileUpload.vue b/ui/src/components/dynamics-form/items/upload/LocalFileUpload.vue
index 124a03efb..eb0af3b50 100644
--- a/ui/src/components/dynamics-form/items/upload/LocalFileUpload.vue
+++ b/ui/src/components/dynamics-form/items/upload/LocalFileUpload.vue
@@ -1,6 +1,6 @@
 <template>
-  <div v-loading="loading">
-    <div class="update-info flex p-8-12 border-r-6 mb-16 w-full">
+  <div v-loading="loading" class="w-full">
+    <div class="update-info flex p-8-12 border-r-6 mb-16">
       <div class="mt-4">
         <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
       </div>
diff --git a/ui/src/locales/lang/en-US/views/knowledge-workflow.ts b/ui/src/locales/lang/en-US/views/knowledge-workflow.ts
index dc20ddd6a..cb40252e3 100644
--- a/ui/src/locales/lang/en-US/views/knowledge-workflow.ts
+++ b/ui/src/locales/lang/en-US/views/knowledge-workflow.ts
@@ -11,6 +11,10 @@ export default {
     previewVersion: 'Preview Version:',
     saveTime: 'Last Saved:',
   },
+  operation: {
+    publish: 'Publish',
+    toImportDoc: 'Go to Import Documents',
+  },
   setting: {
     restoreVersion: 'Restore Previous Version"',
     restoreCurrentVersion: 'Restore to This Version',
diff --git a/ui/src/locales/lang/en-US/views/knowledge.ts b/ui/src/locales/lang/en-US/views/knowledge.ts
index 616855ad3..b53151159 100644
--- a/ui/src/locales/lang/en-US/views/knowledge.ts
+++ b/ui/src/locales/lang/en-US/views/knowledge.ts
@@ -77,6 +77,15 @@ export default {
       label: 'Maximum size of each document(MB)',
       placeholder: 'Suggest based on server configuration, otherwise may cause service shutdown',
     },
+    appTemplate: {
+      blank: {
+        title: 'Blank Creation',
+      },
+      basic: {
+        title: 'Basic Template',
+        description: 'Supports basic workflow templates for local files, Lark documents, and web site data sources',
+      },
+    },
   },
 
   ResultSuccess: {
diff --git a/ui/src/locales/lang/en-US/views/tool.ts b/ui/src/locales/lang/en-US/views/tool.ts
index a5c30bcae..8a9fbd4b7 100644
--- a/ui/src/locales/lang/en-US/views/tool.ts
+++ b/ui/src/locales/lang/en-US/views/tool.ts
@@ -14,6 +14,7 @@ export default {
   importTool: 'Import Tool',
   settingTool: 'Set Tool',
   mcpConfig: 'MCP Service Config',
+  updatedVersion: 'Updated Version',
   toolStore: {
     title: 'Tool Store',
     createFromToolStore: 'Create from Tool Store',
diff --git a/ui/src/locales/lang/zh-CN/views/application-workflow.ts b/ui/src/locales/lang/zh-CN/views/application-workflow.ts
index ea39b54fb..29a976942 100644
--- a/ui/src/locales/lang/zh-CN/views/application-workflow.ts
+++ b/ui/src/locales/lang/zh-CN/views/application-workflow.ts
@@ -19,7 +19,6 @@ export default {
     autoSave: '自动保存',
     latestRelease: '最近发布',
     copyParam: '复制参数',
-    debug: '调试',
     exit: '直接退出',
     exitSave: '保存并退出',
   },
diff --git a/ui/src/locales/lang/zh-CN/views/knowledge-workflow.ts b/ui/src/locales/lang/zh-CN/views/knowledge-workflow.ts
index a712ba81e..852b994a1 100644
--- a/ui/src/locales/lang/zh-CN/views/knowledge-workflow.ts
+++ b/ui/src/locales/lang/zh-CN/views/knowledge-workflow.ts
@@ -11,6 +11,10 @@ export default {
     previewVersion: '预览版本：',
     saveTime: '保存时间：',
   },
+  operation: {
+    publish: '发布',
+    toImportDoc: '去导入文档',
+  },
   setting: {
     restoreVersion: '恢复版本',
     restoreCurrentVersion: '恢复此版本',
@@ -19,7 +23,6 @@ export default {
     autoSave: '自动保存',
     latestRelease: '最近发布',
     copyParam: '复制参数',
-    debug: '调试',
     exit: '直接退出',
     exitSave: '保存并退出',
   },
diff --git a/ui/src/locales/lang/zh-CN/views/knowledge.ts b/ui/src/locales/lang/zh-CN/views/knowledge.ts
index 022b8b2ce..7a6e53016 100644
--- a/ui/src/locales/lang/zh-CN/views/knowledge.ts
+++ b/ui/src/locales/lang/zh-CN/views/knowledge.ts
@@ -6,9 +6,7 @@ export default {
     vectorization: '向量化',
     sync: '同步',
   },
-  operation: {
-    publish: '发布',
-  },
+
   tip: {
     professionalMessage: '社区版最多支持 50 个知识库，如需拥有更多知识库，请升级为专业版。',
     syncSuccess: '同步任务发送成功',
@@ -77,6 +75,15 @@ export default {
       label: '上传的每个文档最大(MB)',
       placeholder: '建议根据服务器配置调整，否则可能会造成服务宕机',
     },
+    appTemplate: {
+      blank: {
+        title: '空白创建',
+      },
+      basic: {
+        title: '基础模板',
+        description: '支持本地文件、飞书文档、Web站点数据源的基础工作流模板',
+      },
+    },
   },
 
   ResultSuccess: {
diff --git a/ui/src/locales/lang/zh-CN/views/tool.ts b/ui/src/locales/lang/zh-CN/views/tool.ts
index ee1f3606e..a3e6d41c0 100644
--- a/ui/src/locales/lang/zh-CN/views/tool.ts
+++ b/ui/src/locales/lang/zh-CN/views/tool.ts
@@ -14,6 +14,7 @@ export default {
   importTool: '导入工具',
   settingTool: '设置工具',
   mcpConfig: 'MCP服务配置',
+  updatedVersion: '更新版本',
   toolStore: {
     title: '工具商店',
     createFromToolStore: '从工具商店创建',
diff --git a/ui/src/locales/lang/zh-Hant/views/application-workflow.ts b/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
index cf34de3f3..c8db04f21 100644
--- a/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
+++ b/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
@@ -19,7 +19,6 @@ export default {
     autoSave: '自動保存',
     latestRelease: '最近發布',
     copyParam: '複製參數',
-    debug: '調試',
     exit: '直接退出',
     exitSave: '保存並退出',
   },
diff --git a/ui/src/locales/lang/zh-Hant/views/knowledge-workflow.ts b/ui/src/locales/lang/zh-Hant/views/knowledge-workflow.ts
index 5f77aa346..e6fe79763 100644
--- a/ui/src/locales/lang/zh-Hant/views/knowledge-workflow.ts
+++ b/ui/src/locales/lang/zh-Hant/views/knowledge-workflow.ts
@@ -11,6 +11,10 @@ export default {
     previewVersion: '預覽版本：',
     saveTime: '保存時間：',
   },
+  operation: {
+    publish: '發布',
+    toImportDoc: '去導入文檔',
+  },
   setting: {
     restoreVersion: '恢復版本',
     restoreCurrentVersion: '恢復此版本',
@@ -19,7 +23,6 @@ export default {
     autoSave: '自動保存',
     latestRelease: '最近發布',
     copyParam: '複製參數',
-    debug: '調試',
     exit: '直接退出',
     exitSave: '保存並退出',
   },
diff --git a/ui/src/locales/lang/zh-Hant/views/knowledge.ts b/ui/src/locales/lang/zh-Hant/views/knowledge.ts
index 2e657da88..24f0d2b6d 100644
--- a/ui/src/locales/lang/zh-Hant/views/knowledge.ts
+++ b/ui/src/locales/lang/zh-Hant/views/knowledge.ts
@@ -71,6 +71,15 @@ export default {
       label: '上傳的每個文件最大(MB)',
       placeholder: '建议根据服务器配置调整，否則會造成服務宕机',
     },
+    appTemplate: {
+      blank: {
+        title: '空白創建',
+      },
+      basic: {
+        title: '基礎模板',
+        description: '支持本地文件、飛書文檔、Web站點數據源的基礎工作流模板',
+      },
+    },
   },
 
   ResultSuccess: {
diff --git a/ui/src/locales/lang/zh-Hant/views/tool.ts b/ui/src/locales/lang/zh-Hant/views/tool.ts
index be29d4bbb..142510d9c 100644
--- a/ui/src/locales/lang/zh-Hant/views/tool.ts
+++ b/ui/src/locales/lang/zh-Hant/views/tool.ts
@@ -1,19 +1,20 @@
 export default {
   title: '工具',
   all: '全部',
-  createTool: '建立工具',
+  createTool: '创建工具',
   editTool: '編輯工具',
   createMcpTool: '建立MCP',
-  createDataSourceTool: '建立資料來源',
-  dataSource: '資料來源',
-  editDataSourceTool: '編輯資料來源',
+  createDataSourceTool: '创建數據源',
+  dataSource: '數據源',
+  editDataSourceTool: '編輯數據源',
   editMcpTool: '編輯MCP',
   copyTool: '複製工具',
   copyMcpTool: '複製MCP',
-  copyDataSource: '複製資料來源',
+  copyDataSource: '複製數據源',
   importTool: '匯入工具',
   settingTool: '設定工具',
   mcpConfig: 'MCP服務配置',
+  updatedVersion: '更新版本',
   toolStore: {
     title: '工具商店',
     createFromToolStore: '從工具商店創建',
diff --git a/ui/src/styles/component.scss b/ui/src/styles/component.scss
index b57e9def1..6d90e1661 100644
--- a/ui/src/styles/component.scss
+++ b/ui/src/styles/component.scss
@@ -59,6 +59,58 @@
   }
 }
 
+.card__radio {
+  width: 100%;
+  display: block;
+  line-height: 22px;
+  .el-radio {
+    white-space: break-spaces;
+    width: 100%;
+    height: 100%;
+    line-height: 22px;
+    color: var(--app-text-color);
+  }
+
+  .el-radio__label {
+    padding-left: 24px;
+    width: 100%;
+  }
+  .el-radio__input {
+    position: absolute;
+    top: 5px;
+  }
+  .active {
+    border: 1px solid var(--el-color-primary);
+  }
+  .el-card__body {
+    padding: calc(var(--app-base-px) + 4px) calc(var(--app-base-px) * 2);
+  }
+}
+
+// radio-button-group
+.app-radio-button-group {
+  background: #ffffff;
+  border: 1px solid var(--el-border-color);
+  border-radius: var(--el-border-radius-base);
+  .el-radio-button {
+    padding: 3px;
+  }
+  .el-radio-button__inner {
+    border: none !important;
+    border-radius: var(--el-border-radius-base) !important;
+    padding: 5px 8px;
+    font-weight: 400;
+    color: var(--el-text-color-primary) !important;
+  }
+  .el-radio-button__original-radio:checked + .el-radio-button__inner {
+    color: var(--el-color-primary) !important;
+    background: var(--el-color-primary-light-9) !important;
+    border: none !important;
+    box-shadow: none !important;
+    font-weight: 500;
+  }
+}
+
 /*
   表格第一行插入自定义行
 */
@@ -128,57 +180,6 @@
   }
 }
 
-.card__radio {
-  width: 100%;
-  display: block;
-  line-height: 22px;
-  .el-radio {
-    white-space: break-spaces;
-    width: 100%;
-    height: 100%;
-    line-height: 22px;
-    color: var(--app-text-color);
-  }
-
-  .el-radio__label {
-    padding-left: 24px;
-    width: 100%;
-  }
-  .el-radio__input {
-    position: absolute;
-    top: 5px;
-  }
-  .active {
-    border: 1px solid var(--el-color-primary);
-  }
-  .el-card__body {
-    padding: calc(var(--app-base-px) + 4px) calc(var(--app-base-px) * 2);
-  }
-}
-
-// radio-button-group
-.app-radio-button-group {
-  background: #ffffff;
-  border: 1px solid var(--el-border-color);
-  border-radius: var(--el-border-radius-base);
-  .el-radio-button {
-    padding: 3px;
-  }
-  .el-radio-button__inner {
-    border: none !important;
-    border-radius: var(--el-border-radius-base) !important;
-    padding: 5px 8px;
-    font-weight: 400;
-    color: var(--el-text-color-primary) !important;
-  }
-  .el-radio-button__original-radio:checked + .el-radio-button__inner {
-    color: var(--el-color-primary) !important;
-    background: var(--el-color-primary-light-9) !important;
-    border: none !important;
-    box-shadow: none !important;
-    font-weight: 500;
-  }
-}
 
 .import-button {
   .el-upload {
@@ -250,6 +251,43 @@
   }
 }
 
+.card-checkbox {
+  &.active {
+    border: 1px solid var(--el-color-primary);
+  }
+  input.checkbox[type='checkbox'] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    height: 14px;
+    width: 14px;
+    position: relative;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      background-color: white;
+      color: #000;
+      height: 13px;
+      width: 13px;
+      visibility: visible;
+      text-align: center;
+      box-sizing: border-box;
+      border: var(--el-border);
+      border-radius: var(--el-border-radius-small);
+      box-sizing: content-box;
+      content: '';
+    }
+
+    &:checked::after {
+      content: '✓';
+      color: #ffffff;
+      border-color: var(--el-color-primary);
+      background: var(--el-color-primary);
+    }
+  }
+}
+
 // tooltip
 .auto-tooltip-popper {
   max-width: 500px;
@@ -282,3 +320,12 @@
     }
   }
 }
+
+.template-radio-card {
+  height: 120px !important;
+  min-height: 120px !important;
+
+  &.active {
+    border-color: var(--el-color-primary);
+  }
+}
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 6adc42522..549c44022 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -33,7 +33,7 @@
         </el-button>
         <el-button @click="clickShowDebug" :disabled="showDebug" v-if="permissionPrecise.debug(id)">
           <AppIcon iconName="app-debug-outlined" class="mr-4"></AppIcon>
-          {{ $t('views.applicationWorkflow.setting.debug') }}
+          {{ $t('common.debug') }}
         </el-button>
         <el-button @click="saveApplication(true)" v-if="permissionPrecise.edit(id)">
           <AppIcon iconName="app-save-outlined" class="mr-4"></AppIcon>
diff --git a/ui/src/views/application/component/CreateApplicationDialog.vue b/ui/src/views/application/component/CreateApplicationDialog.vue
index afab5380e..e0a339cbf 100644
--- a/ui/src/views/application/component/CreateApplicationDialog.vue
+++ b/ui/src/views/application/component/CreateApplicationDialog.vue
@@ -232,7 +232,7 @@ const submitHandle = async (formEl: FormInstance | undefined) => {
         workflowDefault.value.nodes[0].properties.node_data.name = applicationForm.value.name
         applicationForm.value['work_flow'] = workflowDefault.value
       }
-      loading.value=true
+      loading.value = true
       applicationApi
         .postApplication({ ...applicationForm.value, folder_id: currentFolder.value })
         .then((res) => {
@@ -249,8 +249,9 @@ const submitHandle = async (formEl: FormInstance | undefined) => {
             router.push({ path: `/application/workspace/${res.data.id}/${res.data.type}/setting` })
           }
           dialogVisible.value = false
-        }).finally(() => {
-          loading.value=false
+        })
+        .finally(() => {
+          loading.value = false
         })
     }
   })
@@ -263,13 +264,4 @@ function selectedType(type: string) {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scoped>
-.template-radio-card {
-  height: 130px !important;
-  min-height: 130px !important;
-
-  &.active {
-    border-color: var(--el-color-primary);
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application/component/McpServersDialog.vue b/ui/src/views/application/component/McpServersDialog.vue
index 43747c35b..556394907 100644
--- a/ui/src/views/application/component/McpServersDialog.vue
+++ b/ui/src/views/application/component/McpServersDialog.vue
@@ -56,7 +56,7 @@
                 <img :src="resetUrl(mcpTool?.icon)" alt="" />
               </el-avatar>
               <el-avatar v-else shape="square" :size="20" class="mr-8">
-                <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
+                <img src="@/assets/tool/icon_mcp.svg" style="width: 75%" alt="" />
               </el-avatar>
               <span>{{ mcpTool.name }}</span>
               <el-tag v-if="mcpTool.scope === 'SHARED'" type="info" class="info-tag ml-8 mt-4">
diff --git a/ui/src/views/knowledge-workflow/component/Debug.vue b/ui/src/views/knowledge-workflow/component/Debug.vue
deleted file mode 100644
index b1c110304..000000000
--- a/ui/src/views/knowledge-workflow/component/Debug.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <el-drawer
-    v-model="drawer"
-    title="调试"
-    size="500"
-    direction="rtl"
-    destroy-on-close
-    :before-close="close"
-  >
-    <div style="width: 100%; height: 100%">
-      <ActionVue :workflow="_workflow" :knowledge_id="_knowledge_id"></ActionVue>
-    </div>
-  </el-drawer>
-</template>
-<script setup lang="ts">
-import ActionVue from '@/views/knowledge-workflow/component/action/index.vue'
-import { ref } from 'vue'
-const drawer = ref<boolean>(false)
-const _workflow = ref<any>(null)
-const _knowledge_id = ref<string>('')
-const close = () => {
-  drawer.value = false
-}
-const open = (workflow: any, knowledge_id: string) => {
-  drawer.value = true
-  _workflow.value = workflow
-  _knowledge_id.value = knowledge_id
-}
-defineExpose({ close, open })
-</script>
-<style lang="scss" scoped></style>
diff --git a/ui/src/views/knowledge-workflow/component/action/index.vue b/ui/src/views/knowledge-workflow/component/DebugDrawer.vue
similarity index 69%
rename from ui/src/views/knowledge-workflow/component/action/index.vue
rename to ui/src/views/knowledge-workflow/component/DebugDrawer.vue
index e88ec7961..ab1166bfb 100644
--- a/ui/src/views/knowledge-workflow/component/action/index.vue
+++ b/ui/src/views/knowledge-workflow/component/DebugDrawer.vue
@@ -1,18 +1,25 @@
 <template>
-  <div style="height: 100%; width: 100%" v-loading="loading">
-    <div style="height: calc(100% - 57px); overflow-y: auto; width: 100%">
+  <el-drawer
+    v-model="drawerVisible"
+    :title="$t('common.debug')"
+    size="60%"
+    direction="rtl"
+    destroy-on-close
+    :before-close="close"
+  >
+    <div style="height: calc(100% - 57px)" v-loading="loading">
       <keep-alive>
         <component
           ref="ActionRef"
           :is="ak[active]"
           v-model:loading="loading"
-          :workflow="workflow"
-          :knowledge_id="knowledge_id"
+          :workflow="_workflow"
+          :knowledge_id="_knowledge_id"
           :id="action_id"
         ></component>
       </keep-alive>
     </div>
-    <div class="el-drawer__footer">
+    <template #footer>
       <el-button
         v-if="base_form_list.length > 0 && active == 'knowledge_base'"
         :loading="loading"
@@ -32,8 +39,8 @@
         :loading="loading"
         >Upload
       </el-button>
-    </div>
-  </div>
+    </template>
+  </el-drawer>
 </template>
 <script setup lang="ts">
 import { computed, ref, provide, type Ref } from 'vue'
@@ -44,7 +51,7 @@ import KnowledgeBase from '@/views/knowledge-workflow/component/action/Knowledge
 import { WorkflowType } from '@/enums/application'
 import KnowledgeApi from '@/api/knowledge/knowledge'
 provide('upload', (file: any, loading?: Ref<boolean>) => {
-  return applicationApi.postUploadFile(file, props.knowledge_id, 'KNOWLEDGE', loading)
+  return applicationApi.postUploadFile(file, _knowledge_id.value, 'KNOWLEDGE', loading)
 })
 const ak = {
   data_source: DataSource,
@@ -56,12 +63,20 @@ const action_id = ref<string>()
 const ActionRef = ref()
 const form_data = ref<any>({})
 const active = ref<'data_source' | 'knowledge_base' | 'result'>('data_source')
-const props = defineProps<{
-  workflow: any
-  knowledge_id: string
-}>()
+const drawerVisible = ref<boolean>(false)
+const _workflow = ref<any>(null)
+const _knowledge_id = ref<string>('')
+const close = () => {
+  drawerVisible.value = false
+}
+const open = (workflow: any, knowledge_id: string) => {
+  drawerVisible.value = true
+  _workflow.value = workflow
+  _knowledge_id.value = knowledge_id
+}
+
 const base_form_list = computed(() => {
-  const kBase = props.workflow?.nodes?.find((n: any) => n.type === WorkflowType.KnowledgeBase)
+  const kBase = _workflow.value?.nodes?.find((n: any) => n.type === WorkflowType.KnowledgeBase)
   if (kBase) {
     return kBase.properties.user_input_field_list
   }
@@ -81,11 +96,12 @@ const up = () => {
 const upload = () => {
   ActionRef.value.validate().then(() => {
     form_data.value[active.value] = ActionRef.value.get_data()
-    KnowledgeApi.workflowAction(props.knowledge_id, form_data.value, loading).then((ok) => {
+    KnowledgeApi.workflowAction(_knowledge_id.value, form_data.value, loading).then((ok) => {
       action_id.value = ok.data.id
       active.value = 'result'
     })
   })
 }
+defineExpose({ close, open })
 </script>
 <style lang="scss" scoped></style>
diff --git a/ui/src/views/knowledge-workflow/component/action/DataSource.vue b/ui/src/views/knowledge-workflow/component/action/DataSource.vue
index d7e4d1800..ac2be8949 100644
--- a/ui/src/views/knowledge-workflow/component/action/DataSource.vue
+++ b/ui/src/views/knowledge-workflow/component/action/DataSource.vue
@@ -7,12 +7,13 @@
     label-position="top"
     require-asterisk-position="right"
     :other-params="{ current_workspace_id: workspace_id, current_knowledge_id: knowledge_id }"
+
   >
     <template #default>
       <el-form-item prop="node_id" :rules="base_form_data_rule.node_id">
         <el-radio-group @change="sourceChange" v-model="base_form_data.node_id">
-          <el-radio :value="node.id" border size="large" v-for="node in source_node_list">
-            <div style="display: flex; align-items: center">
+          <el-radio :value="node.id" border size="large" v-for="node in source_node_list" :key="node.id">
+            <div class="flex align-center">
               <component
                 :is="iconComponent(`${node.type}-icon`)"
                 class="mr-8"
diff --git a/ui/src/views/knowledge-workflow/index.vue b/ui/src/views/knowledge-workflow/index.vue
index cd802d10b..94836483b 100644
--- a/ui/src/views/knowledge-workflow/index.vue
+++ b/ui/src/views/knowledge-workflow/index.vue
@@ -32,14 +32,14 @@
         </el-button>
         <el-button @click="clickShowDebug" :disabled="showDebug" v-if="permissionPrecise.debug(id)">
           <AppIcon iconName="app-debug-outlined" class="mr-4"></AppIcon>
-          {{ $t('views.knowledgeWorkflow.setting.debug') }}
+          {{ $t('common.debug') }}
         </el-button>
         <el-button @click="saveknowledge(true)">
           <AppIcon iconName="app-save-outlined" class="mr-4"></AppIcon>
           {{ $t('common.save') }}
         </el-button>
         <el-button type="primary" @click="publish">
-          {{ $t('views.knowledge.operation.publish') }}
+          {{ $t('views.knowledgeWorkflow.operation.publish') }}
         </el-button>
 
         <el-dropdown trigger="click">
@@ -51,7 +51,7 @@
               <a :href="shareUrl" target="_blank">
                 <el-dropdown-item>
                   <AppIcon iconName="app-create-chat" class="color-secondary"></AppIcon>
-                  {{ $t('views.knowledge.operation.toChat') }}
+                  {{ $t('views.knowledgeWorkflow.operation.toImportDoc') }}
                 </el-dropdown-item>
               </a>
 
@@ -151,7 +151,7 @@ import { mapToUrlParams } from '@/utils/application'
 import useStore from '@/stores'
 import { KnowledgeWorkFlowInstance } from '@/workflow/common/validate'
 import { hasPermission } from '@/utils/permission'
-import DebugVue from './component/Debug.vue'
+import DebugVue from './component/DebugDrawer.vue'
 import { t } from '@/locales'
 import { ComplexPermission } from '@/utils/permission/type'
 import { EditionConst, PermissionConst, RoleConst } from '@/utils/permission/data'
diff --git a/ui/src/views/knowledge/component/KnowledgeListContainer.vue b/ui/src/views/knowledge/component/KnowledgeListContainer.vue
index 03a8761a9..4a6dadc6f 100644
--- a/ui/src/views/knowledge/component/KnowledgeListContainer.vue
+++ b/ui/src/views/knowledge/component/KnowledgeListContainer.vue
@@ -99,13 +99,8 @@
               </el-dropdown-item>
               <el-dropdown-item @click="openCreateDialog(CreateWorkflowKnowledgeDialog)">
                 <div class="flex">
-                  <el-avatar
-                    class="avatar-purple mt-4"
-                    shape="square"
-                    :size="32"
-                    style="background: none"
-                  >
-                    <img src="@/assets/knowledge/logo_workflow.svg" alt="" />
+                  <el-avatar class="avatar-purple mt-4" shape="square" :size="32">
+                    <img src="@/assets/knowledge/logo_workflow.svg" style="width: 60%" alt="" />
                   </el-avatar>
                   <div class="pre-wrap ml-8">
                     <div class="lighter">
diff --git a/ui/src/views/knowledge/create-component/CreateWorkflowKnowledgeDialog.vue b/ui/src/views/knowledge/create-component/CreateWorkflowKnowledgeDialog.vue
index 2d57381b3..87330a9fc 100644
--- a/ui/src/views/knowledge/create-component/CreateWorkflowKnowledgeDialog.vue
+++ b/ui/src/views/knowledge/create-component/CreateWorkflowKnowledgeDialog.vue
@@ -10,6 +10,38 @@
     <!-- 基本信息 -->
     <BaseForm ref="BaseFormRef" v-if="dialogVisible" :apiType="apiType" />
 
+    <div class="w-full" v-if="dialogVisible">
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <el-card
+            class="template-radio-card cursor text-center flex-center"
+            shadow="never"
+            @click="selectedType('blank')"
+            :class="appTemplate === 'blank' ? 'active' : ''"
+          >
+            <div class="flex-center p-24">
+              <AppIcon iconName="app-add-outlined" class="mr-12"></AppIcon>
+              {{ $t('views.knowledge.form.appTemplate.blank.title') }}
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <CardBox
+            :title="$t('views.knowledge.form.appTemplate.basic.title')"
+            :description="$t('views.knowledge.form.appTemplate.basic.description')"
+            shadow="never"
+            class="template-radio-card cursor"
+            :class="appTemplate === 'basic' ? 'active' : ''"
+            @click="selectedType('basic')"
+          >
+            <template #icon>
+              <img src="@/assets/knowledge/icon_basic_template.svg" alt="" />
+            </template>
+          </CardBox>
+        </el-col>
+      </el-row>
+    </div>
+
     <template #footer>
       <span class="dialog-footer">
         <el-button @click.prevent="dialogVisible = false" :loading="loading">
@@ -85,6 +117,16 @@ const submitHandle = async () => {
   }
 }
 
+const appTemplate = ref('blank')
+const workflowDefault = ref<any>({
+  // edges: [],
+  // nodes: baseNodes,
+})
+function selectedType(type: string) {
+  appTemplate.value = type
+  // workflowDefault.value = applicationTemplate[type]
+}
+
 defineExpose({ open })
 </script>
 <style lang="scss" scoped></style>
diff --git a/ui/src/views/tool/DataSourceToolFormDrawer.vue b/ui/src/views/tool/DataSourceToolFormDrawer.vue
index 9da1575db..563651e29 100644
--- a/ui/src/views/tool/DataSourceToolFormDrawer.vue
+++ b/ui/src/views/tool/DataSourceToolFormDrawer.vue
@@ -33,8 +33,8 @@
               >
                 <img :src="String(form.icon)" alt="" />
               </el-Avatar>
-              <el-avatar v-else class="avatar-green" shape="square" :size="32">
-                <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+              <el-avatar v-else class="avatar-purple" shape="square" :size="32">
+                <img src="@/assets/tool/icon_datasource.svg" style="width: 58%" alt="" />
               </el-avatar>
               <el-Avatar
                 v-if="showEditIcon"
@@ -47,8 +47,8 @@
                 <AppIcon iconName="app-edit"></AppIcon>
               </el-Avatar>
             </div>
-            <el-avatar v-else class="avatar-green mr-12" shape="square" :size="32">
-              <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+            <el-avatar v-else class="avatar-purple mr-12" shape="square" :size="32">
+                <img src="@/assets/tool/icon_datasource.svg" style="width: 58%" alt="" />
             </el-avatar>
             <el-input
               v-model="form.name"
diff --git a/ui/src/views/tool/McpToolFormDrawer.vue b/ui/src/views/tool/McpToolFormDrawer.vue
index c05d33422..28678942a 100644
--- a/ui/src/views/tool/McpToolFormDrawer.vue
+++ b/ui/src/views/tool/McpToolFormDrawer.vue
@@ -36,7 +36,7 @@
               </el-Avatar>
 
               <el-avatar v-else shape="square" :size="32">
-                <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
+                <img src="@/assets/tool/icon_mcp.svg" style="width: 75%" alt="" />
               </el-avatar>
               <el-Avatar
                 v-if="showEditIcon"
@@ -51,7 +51,7 @@
             </div>
 
             <el-avatar v-else shape="square" :size="32" class="mr-12">
-              <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
+              <img src="@/assets/tool/icon_mcp.svg" style="width: 75%" alt="" />
             </el-avatar>
             <el-input
               v-model="form.name"
diff --git a/ui/src/views/tool/ToolFormDrawer.vue b/ui/src/views/tool/ToolFormDrawer.vue
index 43c3db06a..1ef90dbe4 100644
--- a/ui/src/views/tool/ToolFormDrawer.vue
+++ b/ui/src/views/tool/ToolFormDrawer.vue
@@ -34,7 +34,7 @@
                 <img :src="String(form.icon)" alt="" />
               </el-Avatar>
               <el-avatar v-else class="avatar-green" shape="square" :size="32">
-                <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+                <img src="@/assets/tool/icon_tool.svg" style="width: 58%" alt="" />
               </el-avatar>
               <el-Avatar
                 v-if="showEditIcon"
@@ -48,7 +48,7 @@
               </el-Avatar>
             </div>
             <el-avatar v-else class="avatar-green mr-12" shape="square" :size="32">
-              <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+              <img src="@/assets/tool/icon_tool.svg" style="width: 58%" alt="" />
             </el-avatar>
             <el-input
               v-model="form.name"
diff --git a/ui/src/views/tool/component/ToolListContainer.vue b/ui/src/views/tool/component/ToolListContainer.vue
index 7b277eb9b..434b5a159 100644
--- a/ui/src/views/tool/component/ToolListContainer.vue
+++ b/ui/src/views/tool/component/ToolListContainer.vue
@@ -54,7 +54,7 @@
               <el-dropdown-item @click="openCreateDialog()">
                 <div class="flex align-center">
                   <el-avatar class="avatar-green" shape="square" :size="32">
-                    <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+                    <img src="@/assets/tool/icon_tool.svg" style="width: 58%" alt="" />
                   </el-avatar>
                   <div class="pre-wrap ml-8">
                     <div class="lighter">{{ $t('views.tool.createTool') }}</div>
@@ -64,7 +64,7 @@
               <el-dropdown-item @click="openCreateMcpDialog()">
                 <div class="flex align-center">
                   <el-avatar shape="square" :size="32">
-                    <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
+                    <img src="@/assets/tool/icon_mcp.svg" style="width: 75%" alt="" />
                   </el-avatar>
                   <div class="pre-wrap ml-8">
                     <div class="lighter">{{ $t('views.tool.createMcpTool') }}</div>
@@ -74,8 +74,8 @@
 
               <el-dropdown-item @click="openCreateDataSourceDialog()">
                 <div class="flex align-center">
-                  <el-avatar shape="square" :size="32">
-                    <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
+                  <el-avatar class="avatar-purple" shape="square" :size="32">
+                    <img src="@/assets/tool/icon_datasource.svg" style="width: 58%" alt="" />
                   </el-avatar>
                   <div class="pre-wrap ml-8">
                     <div class="lighter">{{ $t('views.tool.createDataSourceTool') }}</div>
@@ -104,18 +104,6 @@
                   </div>
                 </el-dropdown-item>
               </el-upload>
-              <!-- <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="" />
-                  </el-avatar>
-                  <div class="pre-wrap ml-8">
-                    <div class="lighter">
-                      {{ $t('views.tool.toolStore.createFromToolStore') }}
-                    </div>
-                  </div>
-                </div>
-              </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>
@@ -211,7 +199,7 @@
                   <el-tag v-if="isShared" type="info" class="info-tag">
                     {{ t('views.shared.title') }}
                   </el-tag>
-                  <el-tooltip effect="dark" content="更新版本">
+                  <el-tooltip effect="dark" :content="$t('views.tool.updatedVersion')">
                     <el-button
                       text
                       @click.stop
diff --git a/ui/src/workflow/icons/mcp-node-icon.vue b/ui/src/workflow/icons/mcp-node-icon.vue
index 625de8f67..1385569c5 100644
--- a/ui/src/workflow/icons/mcp-node-icon.vue
+++ b/ui/src/workflow/icons/mcp-node-icon.vue
@@ -1,6 +1,6 @@
 <template>
   <el-avatar shape="square">
-    <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
+    <img src="@/assets/tool/icon_mcp.svg" style="width: 75%" alt="" />
   </el-avatar>
 </template>
 <script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/tool-lib-node-icon.vue b/ui/src/workflow/icons/tool-lib-node-icon.vue
index fc88799ba..c52d8ec8f 100644
--- a/ui/src/workflow/icons/tool-lib-node-icon.vue
+++ b/ui/src/workflow/icons/tool-lib-node-icon.vue
@@ -9,7 +9,7 @@
     <img :src="item?.icon" alt="" />
   </el-avatar>
   <el-avatar v-else shape="square" style="background: #34c724">
-    <img src="@/assets/workflow/icon_tool.svg" style="width: 75%" alt="" />
+    <img src="@/assets/tool/icon_tool.svg" style="width: 75%" alt="" />
   </el-avatar>
 </template>
 <script setup lang="ts">
diff --git a/ui/src/workflow/icons/tool-node-icon.vue b/ui/src/workflow/icons/tool-node-icon.vue
index 934aff92e..645739687 100644
--- a/ui/src/workflow/icons/tool-node-icon.vue
+++ b/ui/src/workflow/icons/tool-node-icon.vue
@@ -1,6 +1,6 @@
 <template>
   <el-avatar shape="square" style="background: #34c724">
-    <img src="@/assets/workflow/icon_tool_custom.svg" style="width: 65%" alt="" />
+    <img src="@/assets/tool/icon_tool_custom.svg" style="width: 65%" alt="" />
   </el-avatar>
 </template>
 <script setup lang="ts"></script>