fix: Page style optimization

2025-12-25 17:22:55 +00:00 · 2025-11-26 17:48:28 +08:00 · 2025-11-26 17:48:28 +08:00 · 82274feb21
parent 826858d1b2
commit 82274feb21
26 changed files with 202 additions and 302 deletions
--- a/ui/src/assets/workflow/icon_data-source-local.svg
+++ b/ui/src/assets/workflow/icon_data-source-local.svg
@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.83325 7.08329C5.83325 6.85317 6.0198 6.66663 6.24992 6.66663H13.7499C13.98 6.66663 14.1666 6.85317 14.1666 7.08329V7.91663C14.1666 8.14674 13.98 8.33329 13.7499 8.33329H6.24992C6.0198 8.33329 5.83325 8.14674 5.83325 7.91663V7.08329Z" fill="white"/>
+<path d="M9.16659 10.4166C9.16659 10.1865 9.35313 9.99996 9.58325 9.99996H13.7499C13.98 9.99996 14.1666 10.1865 14.1666 10.4166V14.5833C14.1666 14.8134 13.98 15 13.7499 15H9.58325C9.35313 15 9.16659 14.8134 9.16659 14.5833V10.4166Z" fill="white"/>
+<path d="M6.24992 9.99996C6.0198 9.99996 5.83325 10.1865 5.83325 10.4166V14.5833C5.83325 14.8134 6.0198 15 6.24992 15H7.08325C7.31337 15 7.49992 14.8134 7.49992 14.5833V10.4166C7.49992 10.1865 7.31337 9.99996 7.08325 9.99996H6.24992Z" fill="white"/>
+<path d="M2.5 1.66671C2.5 1.20647 2.8731 0.833374 3.33333 0.833374H13.2173C13.3291 0.833374 13.4362 0.878265 13.5145 0.957964L17.3805 4.89122C17.4571 4.96914 17.5 5.07403 17.5 5.18329V18.3334C17.5 18.7936 17.1269 19.1667 16.6667 19.1667H3.33333C2.8731 19.1667 2.5 18.7936 2.5 18.3334V1.66671Z" fill="#FFC60A"/>
+<path d="M10.3252 7.90699C10.1584 7.69848 9.84126 7.69848 9.67446 7.90699L7.20805 10.99C6.9898 11.2628 7.18404 11.667 7.53342 11.667H9.16649V13.3336H10.8332V11.667H12.4662C12.8156 11.667 13.0098 11.2628 12.7916 10.99L10.3252 7.90699Z" fill="white"/>
+<path d="M9.16649 15.0003V14.167H10.8332V15.0003H9.16649Z" fill="white"/>
+<path d="M13.3333 0.833374C13.4013 0.8531 13.4638 0.890044 13.5144 0.941494L17.3804 4.87474C17.4121 4.90695 17.438 4.94375 17.4575 4.98357H14.2792C13.7568 4.98357 13.3333 4.56006 13.3333 4.03762V0.833374Z" fill="#D9A808"/>
+</svg>
--- a/ui/src/assets/workflow/icon_document-split.svg
+++ b/ui/src/assets/workflow/icon_document-split.svg
@ -0,0 +1,5 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.04175 1.82292C1.04175 1.67909 1.15834 1.5625 1.30216 1.5625H11.198C11.3418 1.5625 11.4584 1.67909 11.4584 1.82292V2.34375C11.4584 2.48757 11.3418 2.60417 11.198 2.60417H1.30216C1.15834 2.60417 1.04175 2.48757 1.04175 2.34375V1.82292Z" fill="white"/>
+<path d="M3.64591 5.98958C3.64591 5.84576 3.76251 5.72917 3.90633 5.72917H8.59383C8.73765 5.72917 8.85424 5.84576 8.85424 5.98958V6.51042C8.85424 6.65424 8.73765 6.77083 8.59383 6.77083H3.90633C3.76251 6.77083 3.64591 6.65424 3.64591 6.51042V5.98958Z" fill="white"/>
+<path d="M1.04175 10.1562C1.04175 10.0124 1.15834 9.89583 1.30216 9.89583H11.198C11.3418 9.89583 11.4584 10.0124 11.4584 10.1562V10.6771C11.4584 10.8209 11.3418 10.9375 11.198 10.9375H1.30216C1.15834 10.9375 1.04175 10.8209 1.04175 10.6771V10.1562Z" fill="white"/>
+</svg>
--- a/ui/src/assets/workflow/icon_knowledge-write.svg
+++ b/ui/src/assets/workflow/icon_knowledge-write.svg
@ -0,0 +1,5 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.16961 11.9792H1.56258C1.42445 11.9792 1.29197 11.9243 1.1943 11.8267C1.09662 11.729 1.04175 11.5965 1.04175 11.4584V1.04171C1.04175 0.903574 1.09662 0.771098 1.1943 0.673423C1.29197 0.575748 1.42445 0.520874 1.56258 0.520874H9.89591C10.034 0.520874 10.1665 0.575748 10.2642 0.673423C10.3619 0.771098 10.4167 0.903574 10.4167 1.04171V4.73155C10.4168 4.86964 10.362 5.00208 10.2644 5.09978L3.5381 11.8266C3.48972 11.875 3.43227 11.9134 3.36904 11.9396C3.30581 11.9658 3.23805 11.9792 3.16961 11.9792ZM3.46177 6.17377C3.51061 6.2226 3.57685 6.25004 3.64591 6.25004H6.25008C6.31915 6.25004 6.38538 6.2226 6.43422 6.17377C6.48306 6.12493 6.5105 6.05869 6.5105 5.98962V5.46879C6.5105 5.39972 6.48306 5.33348 6.43422 5.28465C6.38538 5.23581 6.31915 5.20837 6.25008 5.20837H3.64591C3.57685 5.20837 3.51061 5.23581 3.46177 5.28465C3.41293 5.33348 3.3855 5.39972 3.3855 5.46879V5.98962C3.3855 6.05869 3.41293 6.12493 3.46177 6.17377ZM3.46177 3.5696C3.51061 3.61844 3.57685 3.64587 3.64591 3.64587H8.07299C8.10719 3.64587 8.14106 3.63914 8.17265 3.62605C8.20425 3.61296 8.23295 3.59378 8.25714 3.5696C8.28132 3.54542 8.3005 3.51671 8.31359 3.48511C8.32668 3.45352 8.33341 3.41966 8.33341 3.38546V2.86462C8.33341 2.83043 8.32668 2.79656 8.31359 2.76497C8.3005 2.73337 8.28132 2.70466 8.25714 2.68048C8.23295 2.6563 8.20425 2.63712 8.17265 2.62403C8.14106 2.61094 8.10719 2.60421 8.07299 2.60421H3.64591C3.57685 2.60421 3.51061 2.63164 3.46177 2.68048C3.41293 2.72932 3.3855 2.79556 3.3855 2.86462V3.38546C3.3855 3.45452 3.41293 3.52076 3.46177 3.5696Z" fill="white"/>
+<path d="M10.5977 8.9985L9.12873 7.52981L5.90087 10.7782L5.72925 12.1701C5.72925 12.2392 5.75668 12.3054 5.80552 12.3542C5.85436 12.4031 5.9206 12.4305 5.98966 12.4305L7.38336 12.2087L10.5977 8.9985Z" fill="white"/>
+<path d="M10.9755 6.41346C10.7724 6.21007 10.4586 6.19445 10.2742 6.3783L9.4956 7.15955L10.9664 8.63033L11.7458 7.8522L11.7705 7.82564C11.9289 7.63918 11.906 7.34387 11.7119 7.1496L10.9755 6.41346Z" fill="white"/>
+</svg>
--- a/ui/src/components/dropdown_menu/application/NodeContent.vue
+++ b/ui/src/components/dropdown_menu/application/NodeContent.vue
@ -100,23 +100,5 @@ watch([() => filterText.value, () => props.list], () => {
 </script>

 <style lang="scss" scoped>
-.list {
-  cursor: default;
-  padding: 12px;
-  gap: 12px;
-  box-sizing: border-box;

-  .list-item {
-    background-color: #ffffff;
-    box-sizing: border-box;
-
-    &:hover {
-      border-color: var(--el-color-primary);
-    }
-  }
-
-  .el-empty {
-    margin: 0 auto;
-  }
-}
 </style>
--- a/ui/src/components/dropdown_menu/application/index.vue
+++ b/ui/src/components/dropdown_menu/application/index.vue
@ -310,39 +310,5 @@ async function handleClick(val: string) {
 onMounted(() => {})
 </script>
 <style lang="scss" scoped>
-.workflow-dropdown-menu {
-  -moz-user-select: none; /* Firefox */
-  -webkit-user-select: none; /* WebKit内核 */
-  -ms-user-select: none; /* IE10及以后 */
-  -khtml-user-select: none; /* 早期浏览器 */
-  -o-user-select: none; /* Opera */
-  user-select: none; /* CSS3属性 */
-  position: absolute;
-  top: 49px;
-  right: 16px;
-  z-index: 99;
-  width: 600px;
-  box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
-  padding-bottom: 8px;

-  .title {
-    padding: 12px 12px 4px;
-  }
-  .workflow-dropdown-item {
-    &:hover {
-      background: var(--app-text-color-light-1);
-    }
-  }
-
-  .list-item {
-    box-sizing: border-box;
-    &:hover {
-      border-color: var(--el-color-primary);
-    }
-  }
-
-  :deep(.el-tabs__header) {
-    margin-bottom: 0;
-  }
-}
 </style>
--- a/ui/src/components/dropdown_menu/index.scss
+++ b/ui/src/components/dropdown_menu/index.scss
@ -0,0 +1,45 @@
+.workflow-dropdown-menu {
+  -moz-user-select: none; /* Firefox */
+  -webkit-user-select: none; /* WebKit内核 */
+  -ms-user-select: none; /* IE10及以后 */
+  -khtml-user-select: none; /* 早期浏览器 */
+  -o-user-select: none; /* Opera */
+  user-select: none; /* CSS3属性 */
+  position: absolute;
+  top: 49px;
+  right: 16px;
+  z-index: 99;
+  width: 600px;
+  box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
+  padding-bottom: 8px;
+
+  .title {
+    padding: 12px 12px 4px;
+  }
+  .workflow-dropdown-item {
+    &:hover {
+      background: var(--app-text-color-light-1);
+    }
+  }
+
+  .list-item {
+    box-sizing: border-box;
+    &:hover {
+      border-color: var(--el-color-primary);
+    }
+  }
+
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+  .list {
+    cursor: default;
+    padding: 12px;
+    gap: 12px;
+    box-sizing: border-box;
+
+    .el-empty {
+      margin: 0 auto;
+    }
+  }
+}
--- a/ui/src/components/dropdown_menu/index.vue
+++ b/ui/src/components/dropdown_menu/index.vue
@ -23,4 +23,6 @@ const kw: any = {
  [WorkflowMode.Knowledge]: KnowledgeDropdownMenu,
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss">
+@use './index.scss';
+</style>
--- a/ui/src/components/dropdown_menu/knowledge/NodeContent.vue
+++ b/ui/src/components/dropdown_menu/knowledge/NodeContent.vue
@ -30,9 +30,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/tool/icon_tool.svg" style="width: 58%" alt="" />
-            </el-avatar>
+            <ToolIcon v-else :size="20" :type="item?.tool_type" />
            <span class="ml-8 ellipsis" :title="item.name">{{ item.name }}</span>
          </div>
        </template>
@ -48,19 +46,9 @@
              >
                <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/tool/icon_tool.svg" style="width: 58%" alt="" />
-              </el-avatar>
+              <ToolIcon v-else :size="20" :type="item?.tool_type" />
              <span class="font-medium ml-8 break-all" :title="item.name">{{ item.name }}</span>
            </div>
-            <div v-if="item.type" class="status-tag" style="margin-left: auto">
-              <el-tag class="warning-tag" v-if="isWorkFlow(item.type)">
-                {{ $t('views.application.workflow') }}
-              </el-tag>
-              <el-tag class="blue-tag" v-else>
-                {{ $t('views.application.simple') }}
-              </el-tag>
-            </div>
          </div>
          <el-text type="info" size="small" class="mt-4">{{ item.desc }}</el-text>
        </template>
@ -73,7 +61,6 @@
 <script setup lang="ts">
 import { watch, ref } from 'vue'
 import { isAppIcon, resetUrl } from '@/utils/common'
-import { isWorkFlow } from '@/utils/application'

 const props = defineProps<{
  list: any[]
@ -99,24 +86,4 @@ watch([() => filterText.value, () => props.list], () => {
 })
 </script>

-<style lang="scss" scoped>
-.list {
-  cursor: default;
-  padding: 12px;
-  gap: 12px;
-  box-sizing: border-box;
-
-  .list-item {
-    background-color: #ffffff;
-    box-sizing: border-box;
-
-    &:hover {
-      border-color: var(--el-color-primary);
-    }
-  }
-
-  .el-empty {
-    margin: 0 auto;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
--- a/ui/src/components/dropdown_menu/knowledge/index.vue
+++ b/ui/src/components/dropdown_menu/knowledge/index.vue
@ -71,27 +71,26 @@
          </div>
        </el-scrollbar>
      </el-tab-pane>
-      <!-- 工具 -->
-      <el-tab-pane :label="$t('views.tool.datasource.title', '数据源')" name="DATA_SOURCE_TOOL">
+      <!-- 数据源 -->
+      <el-tab-pane :label="$t('views.tool.dataSource.title')" name="DATA_SOURCE_TOOL">
        <LayoutContainer>
          <template #left>
-            <div class="p-8">
-              <folder-tree
-                :source="SourceTypeEnum.TOOL"
-                :data="toolTreeData"
-                :currentNodeKey="folder.currentFolder?.id"
-                @handleNodeClick="folderClickHandle"
-                :shareTitle="$t('views.shared.shared_tool')"
-                :showShared="permissionPrecise['is_share']()"
-                :canOperation="false"
-              />
-            </div>
+            <folder-tree
+              :source="SourceTypeEnum.TOOL"
+              :data="toolTreeData"
+              :currentNodeKey="folder.currentFolder?.id"
+              @handleNodeClick="folderClickHandle"
+              :shareTitle="$t('views.shared.shared_tool')"
+              :showShared="permissionPrecise['is_share']()"
+              :canOperation="false"
+              :treeStyle="{ height: '400px' }"
+            />
          </template>
          <el-scrollbar height="450">
            <NodeContent
              :list="toolList"
-              @clickNodes="(val: any) => clickNodes(toolLibNode, val, 'tool')"
-              @onmousedown="(val: any) => onmousedown(toolLibNode, val, 'tool')"
+              @clickNodes="(val: any) => clickNodes(toolLibNode, val)"
+              @onmousedown="(val: any) => onmousedown(toolLibNode, val)"
            />
          </el-scrollbar>
        </LayoutContainer>
@ -100,23 +99,22 @@
      <el-tab-pane :label="$t('views.tool.title')" name="CUSTOM_TOOL">
        <LayoutContainer>
          <template #left>
-            <div class="p-8">
-              <folder-tree
-                :source="SourceTypeEnum.TOOL"
-                :data="toolTreeData"
-                :currentNodeKey="folder.currentFolder?.id"
-                @handleNodeClick="folderClickHandle"
-                :shareTitle="$t('views.shared.shared_tool')"
-                :showShared="permissionPrecise['is_share']()"
-                :canOperation="false"
-              />
-            </div>
+            <folder-tree
+              :source="SourceTypeEnum.TOOL"
+              :data="toolTreeData"
+              :currentNodeKey="folder.currentFolder?.id"
+              @handleNodeClick="folderClickHandle"
+              :shareTitle="$t('views.shared.shared_tool')"
+              :showShared="permissionPrecise['is_share']()"
+              :canOperation="false"
+              :treeStyle="{ height: '400px' }"
+            />
          </template>
          <el-scrollbar height="450">
            <NodeContent
              :list="toolList"
-              @clickNodes="(val: any) => clickNodes(toolLibNode, val, 'tool')"
-              @onmousedown="(val: any) => onmousedown(toolLibNode, val, 'tool')"
+              @clickNodes="(val: any) => clickNodes(toolLibNode, val)"
+              @onmousedown="(val: any) => onmousedown(toolLibNode, val)"
            />
          </el-scrollbar>
        </LayoutContainer>
@ -129,7 +127,6 @@ import { ref, onMounted, computed, inject } from 'vue'
 import { getMenuNodes, toolLibNode, applicationNode } from '@/workflow/common/data'
 import { iconComponent } from '@/workflow/icons/utils'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
-import { isWorkFlow } from '@/utils/application'
 import useStore from '@/stores'
 import NodeContent from './NodeContent.vue'
 import { SourceTypeEnum } from '@/enums/common'
@ -186,28 +183,20 @@ const filter_menu_nodes = computed(() => {
    return result
  }, [])
 })
-function clickNodes(item: any, data?: any, type?: string) {
+function clickNodes(item: any, data?: any) {
  if (data) {
    item['properties']['stepName'] = data.name
-    if (type == 'tool') {
-      if (data.tool_type == 'DATA_SOURCE') {
-        item['properties'].kind = WorkflowKind.DataSource
-      }
-      item['properties']['node_data'] = {
-        ...data,
-        tool_lib_id: data.id,
-        input_field_list: data.input_field_list.map((field: any) => ({
-          ...field,
-          value: field.source == 'reference' ? [] : '',
-        })),
-      }
+
+    if (data.tool_type == 'DATA_SOURCE') {
+      item['properties'].kind = WorkflowKind.DataSource
    }
-    if (type == 'application') {
-      item['properties']['node_data'] = {
-        name: data.name,
-        icon: data.icon,
-        application_id: data.id,
-      }
+    item['properties']['node_data'] = {
+      ...data,
+      tool_lib_id: data.id,
+      input_field_list: data.input_field_list.map((field: any) => ({
+        ...field,
+        value: field.source == 'reference' ? [] : '',
+      })),
    }
  }
  props.workflowRef?.addNode(item)
@ -215,38 +204,19 @@ function clickNodes(item: any, data?: any, type?: string) {
  emit('clickNodes', item)
 }

-function onmousedown(item: any, data?: any, type?: string) {
+function onmousedown(item: any, data?: any) {
  if (data) {
    item['properties']['stepName'] = data.name
-    if (type == 'tool') {
-      if (data.tool_type == 'DATA_SOURCE') {
-        item['properties'].kind = WorkflowKind.DataSource
-      }
-      item['properties']['node_data'] = {
-        ...data,
-        tool_lib_id: data.id,
-        input_field_list: data.input_field_list.map((field: any) => ({
-          ...field,
-          value: field.source == 'reference' ? [] : '',
-        })),
-      }
+    if (data.tool_type == 'DATA_SOURCE') {
+      item['properties'].kind = WorkflowKind.DataSource
    }
-    if (type == 'application') {
-      if (isWorkFlow(data.type)) {
-        const nodeData = data.work_flow.nodes[0].properties.node_data
-        const fileUploadSetting = nodeData.file_upload_setting
-        item['properties']['node_data'] = {
-          name: data.name,
-          icon: data.icon,
-          application_id: data.id,
-        }
-      } else {
-        item['properties']['node_data'] = {
-          name: data.name,
-          icon: data.icon,
-          application_id: data.id,
-        }
-      }
+    item['properties']['node_data'] = {
+      ...data,
+      tool_lib_id: data.id,
+      input_field_list: data.input_field_list.map((field: any) => ({
+        ...field,
+        value: field.source == 'reference' ? [] : '',
+      })),
    }
  }
  props.workflowRef?.onmousedown(item)
@ -275,88 +245,20 @@ async function getToolList() {
  toolList.value = toolList.value?.filter((item: any) => item.is_active)
 }

-const applicationTreeData = ref<any[]>([])
-const applicationList = ref<any[]>([])
-
-function getApplicationFolder() {
-  folder.asyncGetFolder(SourceTypeEnum.APPLICATION, {}, loading).then((res: any) => {
-    applicationTreeData.value = res.data
-    folder.setCurrentFolder(res.data?.[0] || {})
-  })
-}
-
-async function getApplicationList() {
-  const res = await loadSharedApi({
-    type: 'application',
-    systemType: 'workspace',
-  }).getAllApplication({
-    folder_id: folder.currentFolder?.id || user.getWorkspaceId(),
-  })
-  applicationList.value = res.data.filter(
-    (item: any) => item.resource_type === 'application' && item.id !== props.id && item.is_publish,
-  )
-}
-
 function folderClickHandle(row: any) {
  folder.setCurrentFolder(row)
-  if (activeName.value === 'tool') {
+  if (['DATA_SOURCE_TOOL', 'CUSTOM_TOOL'].includes(activeName.value)) {
    getToolList()
-  } else {
-    getApplicationList()
  }
 }

 async function handleClick(val: string) {
-  console.log(val)
  if (['DATA_SOURCE_TOOL', 'CUSTOM_TOOL'].includes(val)) {
    await getToolFolder()
    getToolList()
-  } else if (val === 'application') {
-    getApplicationFolder()
-    getApplicationList()
  }
 }

 onMounted(() => {})
 </script>
-<style lang="scss" scoped>
-.workflow-dropdown-menu {
-  -moz-user-select: none; /* Firefox */
-  -webkit-user-select: none; /* WebKit内核 */
-  -ms-user-select: none; /* IE10及以后 */
-  -khtml-user-select: none; /* 早期浏览器 */
-  -o-user-select: none; /* Opera */
-  user-select: none; /* CSS3属性 */
-  position: absolute;
-  top: 49px;
-  right: 16px;
-  z-index: 99;
-  width: 600px;
-  box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
-  padding-bottom: 8px;
-
-  .title {
-    padding: 12px 12px 4px;
-  }
-  .workflow-dropdown-item {
-    &:hover {
-      background: var(--app-text-color-light-1);
-    }
-  }
-
-  .list-item {
-    box-sizing: border-box;
-    &:hover {
-      border-color: var(--el-color-primary);
-    }
-  }
-
-  :deep(.el-tabs__header) {
-    margin-bottom: 0;
-  }
-
-  :deep(.tree-height) {
-    height: 400px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
--- a/ui/src/locales/lang/en-US/views/tool.ts
+++ b/ui/src/locales/lang/en-US/views/tool.ts
@ -4,17 +4,20 @@ export default {
  createTool: 'Create Tool',
  editTool: 'Edit Tool',
  createMcpTool: 'Create MCP',
-  createDataSourceTool: 'Create Data Source',
-  dataSource: 'Data Source',
-  editDataSourceTool: 'Edit Data Source',
  editMcpTool: 'Edit MCP',
  copyTool: 'Copy Tool',
  copyMcpTool: 'Copy MCP',
-  copyDataSource: 'Copy Data Source',
  importTool: 'Import Tool',
  settingTool: 'Set Tool',
  mcpConfig: 'MCP Service Config',
  updatedVersion: 'Updated Version',
+  dataSource: {
+    title: 'Data Source',
+    createDataSource: 'Create Data Source',
+    editDataSource: 'Edit Data Source',
+    copyDataSource: 'Copy Data Source',
+    selectDataSource: 'Select Data Source',
+  },
  toolStore: {
    title: 'Tool Store',
    createFromToolStore: 'Create from Tool Store',
--- a/ui/src/locales/lang/en-US/views/workflow.ts
+++ b/ui/src/locales/lang/en-US/views/workflow.ts
@ -87,9 +87,13 @@ export default {
    dataSourceWebNode: {
      label: 'Web Site',
      text: 'Web Site',
-      display: 'No data available',
      field_label: 'Document list',
    },
+    dataSourceLocalNode: {
+      label: 'Local File',
+      text: 'Local File',
+      fileList: 'File List',
+    },
    classify: {
      aiCapability: 'AI capability',
      businessLogic: 'Business logic',
@ -162,8 +166,8 @@ export default {
      customTooltip: 'Manually set tag filtering conditions',
      auto: 'Automatic',
      autoTooltip: 'Automatically filter setting tag conditions based on the search question',
-      document_list: 'Document List',
-      knowledge_list: 'Knowledge Base List',
+      documentList: 'Document List',
+      knowledgeList: 'Knowledge Base List',
      result: 'Search Results',
      searchParam: 'Search Parameters',
      select_variable: 'Select Variable',
@ -253,7 +257,7 @@ You are a master of problem optimization, adept at accurately inferring user int
    documentSplitNode: {
      label: 'Document Splitting',
      text: 'Split document content into smaller segments',
-      paragraph_list: 'List of split segments',
+      paragraphList: 'List of split segments',
      splitStrategy: {
        label: 'Splitting Strategy',
        placeholder: 'Please select a splitting strategy',
--- a/ui/src/locales/lang/zh-CN/views/tool.ts
+++ b/ui/src/locales/lang/zh-CN/views/tool.ts
@ -4,17 +4,20 @@ export default {
  createTool: '创建工具',
  editTool: '编辑工具',
  createMcpTool: '创建MCP',
-  createDataSourceTool: '创建数据源',
-  dataSource: '数据源',
-  editDataSourceTool: '编辑数据源',
  editMcpTool: '编辑MCP',
  copyTool: '复制工具',
  copyMcpTool: '复制MCP',
-  copyDataSource: '复制数据源',
  importTool: '导入工具',
  settingTool: '设置工具',
  mcpConfig: 'MCP服务配置',
  updatedVersion: '更新版本',
+  dataSource: {
+    title: '数据源',
+    createDataSource: '创建数据源',
+    editDataSource: '编辑数据源',
+    copyDataSource: '复制数据源',
+    selectDataSource: '选择数据源',
+  },
  toolStore: {
    title: '工具商店',
    createFromToolStore: '从工具商店创建',
--- a/ui/src/locales/lang/zh-CN/views/workflow.ts
+++ b/ui/src/locales/lang/zh-CN/views/workflow.ts
@ -88,9 +88,13 @@ export default {
    dataSourceWebNode: {
      label: 'Web站点',
      text: 'Web站点',
-      display: '暂无数据',
      field_label: '文档列表',
    },
+    dataSourceLocalNode: {
+      label: '本地文件',
+      text: '本地文件',
+      fileList: '文件列表',
+    },
    classify: {
      aiCapability: 'AI能力',
      businessLogic: '业务逻辑',
@ -168,8 +172,8 @@ export default {
      customTooltip: '手动设置标签过滤条件',
      auto: '自动',
      autoTooltip: '根据检索问题自动匹配文档标签',
-      document_list: '文档列表',
-      knowledge_list: '知识库列表',
+      documentList: '文档列表',
+      knowledgeList: '知识库列表',
      result: '检索结果',
      searchParam: '检索参数',
      select_variable: '选择变量',
@ -258,7 +262,7 @@ export default {
    documentSplitNode: {
      label: '文档分段',
      text: '将文档内容拆分为多个分段',
-      paragraph_list: '分段列表',
+      paragraphList: '分段列表',
      splitStrategy: {
        label: '分段策略',
        placeholder: '请选择分段策略',
--- a/ui/src/locales/lang/zh-Hant/views/tool.ts
+++ b/ui/src/locales/lang/zh-Hant/views/tool.ts
@ -4,17 +4,20 @@ export default {
  createTool: '创建工具',
  editTool: '編輯工具',
  createMcpTool: '建立MCP',
-  createDataSourceTool: '创建數據源',
-  dataSource: '數據源',
-  editDataSourceTool: '編輯數據源',
  editMcpTool: '編輯MCP',
  copyTool: '複製工具',
  copyMcpTool: '複製MCP',
-  copyDataSource: '複製數據源',
  importTool: '匯入工具',
  settingTool: '設定工具',
  mcpConfig: 'MCP服務配置',
  updatedVersion: '更新版本',
+  dataSource: {
+    title: '數據源',
+    createDataSource: '创建数据源',
+    editDataSource: '编辑数据源',
+    copyDataSource: '複製數據源',
+    selectDataSource: '选择数据源',
+  },
  toolStore: {
    title: '工具商店',
    createFromToolStore: '從工具商店創建',
--- a/ui/src/locales/lang/zh-Hant/views/workflow.ts
+++ b/ui/src/locales/lang/zh-Hant/views/workflow.ts
@ -87,9 +87,13 @@ export default {
    dataSourceWebNode: {
      label: 'Web網站',
      text: 'Web網站',
-      display: '暫無資料',
      field_label: '文件列表',
    },
+    dataSourceLocalNode: {
+      label: '本地文件',
+      text: '本地文件',
+      fileList: '文件列表',
+    },
    classify: {
      aiCapability: 'AI能力',
      businessLogic: '業務邏輯',
@ -162,8 +166,8 @@ export default {
      customTooltip: '手動設置標籤過濾條件',
      auto: '自動',
      autoTooltip: '根據檢索問題自動匹配文檔標簽',
-      document_list: '文件清單',
-      knowledge_list: '知識庫列表',
+      documentList: '文檔列表',
+      knowledgeList: '知識庫列表',
      result: '檢索結果',
      searchParam: '檢索參數',
      select_variable: '選擇變數',
@ -252,7 +256,7 @@ export default {
    documentSplitNode: {
      label: '文檔拆分',
      text: '將文檔內容拆分為多個分段',
-      paragraph_list: '分段列表',
+      paragraphList: '分段列表',
      splitStrategy: {
        label: '分段策略',
        placeholder: '請選擇分段策略',
--- a/ui/src/views/system-resource-management/ToolResourceIndex.vue
+++ b/ui/src/views/system-resource-management/ToolResourceIndex.vue
@ -82,7 +82,7 @@
        <el-table-column prop="tool_type" :label="$t('views.system.resource_management.type')">
          <template #default="scope">
            <span v-if="scope.row.tool_type === 'MCP'"> MCP </span>
-            <span v-else-if="scope.row.tool_type === 'DATA_SOURCE'"> {{ $t('views.tool.dataSource') }} </span>
+            <span v-else-if="scope.row.tool_type === 'DATA_SOURCE'"> {{ $t('views.tool.dataSource.title') }} </span>
            <span v-else-if="scope.row.version">{{ $t('views.tool.toolStore.title') }}</span>
            <span v-else>
              {{
@ -523,7 +523,7 @@ function openCreateDataSourceDialog(data?: any) {
    return
  }

-  DataSourceToolDrawertitle.value = data ? t('views.tool.editDataSourceTool') : t('views.tool.createDataSourceTool')
+  DataSourceToolDrawertitle.value = data ? t('views.tool.dataSource.editDataSource') : t('views.tool.dataSource.createDataSource')
  if (data) {
    ToolResourceApi.getToolById(data?.id, loading).then((res: any) => {
      DataSourceToolFormDrawerRef.value.open(res.data)
--- a/ui/src/views/system-shared/ToolSharedIndex.vue
+++ b/ui/src/views/system-shared/ToolSharedIndex.vue
@ -14,7 +14,7 @@
            <el-radio-button value="">{{ $t('views.tool.all') }}</el-radio-button>
            <el-radio-button value="CUSTOM">{{ $t('views.tool.title') }}</el-radio-button>
            <el-radio-button value="MCP">MCP</el-radio-button>
-            <el-radio-button value="DATA_SOURCE">{{ $t('views.tool.dataSource') }}</el-radio-button>
+            <el-radio-button value="DATA_SOURCE">{{ $t('views.tool.dataSource.title') }}</el-radio-button>
          </el-radio-group>
        </el-space>
      </template>
--- a/ui/src/views/tool/component/ToolListContainer.vue
+++ b/ui/src/views/tool/component/ToolListContainer.vue
@ -78,7 +78,7 @@
                    <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>
+                    <div class="lighter">{{ $t('views.tool.dataSource.createDataSource') }}</div>
                  </div>
                </div>
              </el-dropdown-item>
@ -574,8 +574,8 @@ function openCreateDataSourceDialog(data?: any) {
    return
  }
  DataSourceToolDrawertitle.value = data
-    ? t('views.tool.editDataSourceTool')
-    : t('views.tool.createDataSourceTool')
+    ? t('views.tool.dataSource.editDataSource')
+    : t('views.tool.dataSource.createDataSource')
  if (data) {
    loadSharedApi({ type: 'tool', systemType: apiType.value })
      .getToolById(data?.id, loading)
@ -683,7 +683,7 @@ async function copyMcpTool(row: any) {
 }

 async function copyDataSource(row: any) {
-  DataSourceToolDrawertitle.value = t('views.tool.copyDataSource')
+  DataSourceToolDrawertitle.value = t('views.tool.dataSource.copyDataSource')
  const res = await loadSharedApi({ type: 'tool', systemType: apiType.value }).getToolById(
    row.id,
    changeStateloading,
--- a/ui/src/views/tool/index.vue
+++ b/ui/src/views/tool/index.vue
@ -26,7 +26,7 @@
            <el-radio-button value="">{{ $t('views.tool.all') }}</el-radio-button>
            <el-radio-button value="CUSTOM">{{ $t('views.tool.title') }}</el-radio-button>
            <el-radio-button value="MCP">MCP</el-radio-button>
-            <el-radio-button value="DATA_SOURCE">{{ $t('views.tool.dataSource') }}</el-radio-button>
+            <el-radio-button value="DATA_SOURCE">{{ $t('views.tool.dataSource.title') }}</el-radio-button>
          </el-radio-group>
        </el-space>
      </template>
--- a/ui/src/workflow/common/data.ts
+++ b/ui/src/workflow/common/data.ts
@ -30,9 +30,7 @@ export const startNode = {
      ],
    },
    fields: [{ label: t('views.workflow.nodes.startNode.question'), value: 'question' }],
-    globalFields: [
-      { label: t('views.workflow.nodes.startNode.currentTime'), value: 'time' },
-    ],
+    globalFields: [{ label: t('views.workflow.nodes.startNode.currentTime'), value: 'time' }],
    showNode: true,
  },
 }
@ -84,18 +82,18 @@ export const dataSourceLocalNode = {
  type: WorkflowType.DataSourceLocalNode,
  x: 360,
  y: 2761.3875,
-  text: t('views.workflow.nodes.dataSourceLocalNode.text', '本地文件'),
-  label: t('views.workflow.nodes.dataSourceLocalNode.label', '本地文件'),
+  text: t('views.workflow.nodes.dataSourceLocalNode.text'),
+  label: t('views.workflow.nodes.dataSourceLocalNode.label'),
  properties: {
    kind: WorkflowKind.DataSource,
    height: 728.375,
-    stepName: t('views.workflow.nodes.dataSourceLocalNode.label', '本地文件'),
+    stepName: t('views.workflow.nodes.dataSourceLocalNode.label'),
    input_field_list: [],
    node_data: {},
    config: {
      fields: [
        {
-          label: t('views.workflow.nodes.dataSourceLocalNode.field_label', '文件列表'),
+          label: t('views.workflow.nodes.dataSourceLocalNode.fileList'),
          value: 'file_list',
        },
      ],
@ -111,12 +109,12 @@ export const dataSourceWebNode = {
  type: WorkflowType.DataSourceWebNode,
  x: 360,
  y: 2761.3875,
-  text: t('views.workflow.nodes.dataSourceWebNode.text', 'Web站点'),
-  label: t('views.workflow.nodes.dataSourceWebNode.label', 'Web站点'),
+  text: t('views.workflow.nodes.dataSourceWebNode.text'),
+  label: t('views.workflow.nodes.dataSourceWebNode.label'),
  properties: {
    kind: WorkflowKind.DataSource,
    height: 180,
-    stepName: t('views.workflow.nodes.dataSourceWebNode.label', 'Web站点'),
+    stepName: t('views.workflow.nodes.dataSourceWebNode.label'),
    config: {
      fields: [
        {
@ -191,9 +189,7 @@ export const searchKnowledgeNode = {
          value: 'paragraph_list',
        },
        {
-          label: t(
-            'views.workflow.nodes.searchKnowledgeNode.is_hit_handling_method_list',
-          ),
+          label: t('views.workflow.nodes.searchKnowledgeNode.is_hit_handling_method_list'),
          value: 'is_hit_handling_method_list',
        },
        {
@ -223,11 +219,11 @@ export const searchDocumentNode = {
    config: {
      fields: [
        {
-          label: t('views.workflow.nodes.searchDocumentNode.knowledge_list'),
+          label: t('views.workflow.nodes.searchDocumentNode.knowledgeList'),
          value: 'knowledge_list',
        },
        {
-          label: t('views.workflow.nodes.searchDocumentNode.document_list'),
+          label: t('views.workflow.nodes.searchDocumentNode.documentList'),
          value: 'document_list',
        },
      ],
@ -402,7 +398,7 @@ export const documentSplitNode = {
    config: {
      fields: [
        {
-          label: t('views.workflow.nodes.documentSplitNode.paragraph_list'),
+          label: t('views.workflow.nodes.documentSplitNode.paragraphList'),
          value: 'paragraph_list',
        },
      ],
@ -726,9 +722,13 @@ export const loopBreakNode = {

 export const knowledgeMenuNodes = [
  {
-    label: t('views.workflow.nodes.classify.dataSource', '数据源'),
+    label: t('views.tool.dataSource.title'),
    list: [dataSourceLocalNode, dataSourceWebNode],
  },
+  {
+    label: t('views.knowledge.title'),
+    list: [documentSplitNode, knowledgeWriteNode, documentExtractNode],
+  },
  {
    label: t('views.workflow.nodes.classify.aiCapability'),
    list: [
@ -744,10 +744,7 @@ export const knowledgeMenuNodes = [
      questionNode,
    ],
  },
-  {
-    label: t('views.knowledge.title'),
-    list: [documentExtractNode, documentSplitNode, knowledgeWriteNode],
-  },
+
  {
    label: t('views.workflow.nodes.classify.businessLogic'),
    list: [conditionNode, replyNode, loopNode],
@ -837,7 +834,7 @@ export const applicationLoopMenuNodes = [
    list: [conditionNode, formNode, replyNode, loopContinueNode, loopBreakNode],
  },
  {
-    label: t('views.workflow.nodes.classify.dataProcessing', '数据处理'),
+    label: t('views.workflow.nodes.classify.dataProcessing'),
    list: [
      variableAssignNode,
      variableSplittingNode,
@ -875,7 +872,7 @@ export const knowledgeLoopMenuNodes = [
    list: [conditionNode, replyNode, loopContinueNode, loopBreakNode],
  },
  {
-    label: t('views.workflow.nodes.classify.dataProcessing', '数据处理'),
+    label: t('views.workflow.nodes.classify.dataProcessing'),
    list: [
      variableAssignNode,
      variableSplittingNode,
--- a/ui/src/workflow/icons/data-source-local-node-icon.vue
+++ b/ui/src/workflow/icons/data-source-local-node-icon.vue
@ -1,6 +1,6 @@
 <template>
-  <el-avatar shape="square" style="background: #14c0ff">
-    <img src="@/assets/workflow/icon_condition.svg" style="width: 75%" alt="" />
+  <el-avatar shape="square" style="background: none">
+    <img src="@/assets/workflow/icon_data-source-local.svg" style="width: 100%" alt="" />
  </el-avatar>
 </template>
 <script setup lang="ts"></script>
--- a/ui/src/workflow/icons/document-split-node-icon.vue
+++ b/ui/src/workflow/icons/document-split-node-icon.vue
@ -1,6 +1,6 @@
 <template>
  <el-avatar shape="square" class="avatar-blue">
-    <img src="@/assets/workflow/icon_docs.svg" style="width: 65%" alt="" />
+    <img src="@/assets/workflow/icon_document-split.svg" style="width: 65%" alt="" />
  </el-avatar>
 </template>
 <script setup lang="ts"></script>
--- a/ui/src/workflow/icons/knowledge-write-node-icon.vue
+++ b/ui/src/workflow/icons/knowledge-write-node-icon.vue
@ -1,6 +1,6 @@
 <template>
  <el-avatar shape="square">
-    <img src="@/assets/workflow/icon_knowledge_write.svg" style="width: 75%" alt="" />
+    <img src="@/assets/workflow/icon_knowledge-write.svg" style="width: 65%" alt="" />
  </el-avatar>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts"></script>
--- a/ui/src/workflow/nodes/data-source-web-node/index.vue
+++ b/ui/src/workflow/nodes/data-source-web-node/index.vue
@ -2,7 +2,7 @@
  <NodeContainer :nodeModel="nodeModel">
    <h5 class="title-decoration-1 mb-8">{{ $t('views.workflow.nodeSetting') }}</h5>
    <el-card shadow="never" class="card-never">
-      <h4>{{ $t('views.workflow.nodes.dataSourceWebNode.display') }}</h4>
+      <h4>{{ $t('common.noData') }}</h4>
    </el-card>
  </NodeContainer>
 </template>
@ -11,7 +11,6 @@
 import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import { computed } from 'vue'
 import { set } from 'lodash'
-import NodeCascader from '@/workflow/common/NodeCascader.vue'

 const props = defineProps<{ nodeModel: any }>()

--- a/ui/src/workflow/nodes/search-document-node/index.vue
+++ b/ui/src/workflow/nodes/search-document-node/index.vue
@ -93,13 +93,13 @@
                    >
                      <el-option
                        :label="
-                          $t('views.workflow.nodes.searchDocumentNode.knowledge_list')
+                          $t('views.workflow.nodes.searchDocumentNode.knowledgeList')
                        "
                        value="knowledge"
                      />
                      <el-option
                        :label="
-                          $t('views.workflow.nodes.searchDocumentNode.document_list')
+                          $t('views.workflow.nodes.searchDocumentNode.documentList')
                        "
                        value="document"
                      />
--- a/ui/src/workflow/nodes/search-knowledge-node/index.vue
+++ b/ui/src/workflow/nodes/search-knowledge-node/index.vue
@ -92,13 +92,13 @@
                    >
                      <el-option
                        :label="
-                          $t('views.workflow.nodes.searchDocumentNode.knowledge_list')
+                          $t('views.workflow.nodes.searchDocumentNode.knowledgeList')
                        "
                        value="knowledge"
                      />
                      <el-option
                        :label="
-                          $t('views.workflow.nodes.searchDocumentNode.document_list')
+                          $t('views.workflow.nodes.searchDocumentNode.documentList')
                        "
                        value="document"
                      />