From bf7d5c2e61a5ca3158785a1574f7984450d06cfd Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 25 Jul 2025 18:08:38 +0800
Subject: [PATCH] feat: Tool reaource

---
 ui/src/api/system-resource-management/tool.ts |  26 +-
 ui/src/layout/components/breadcrumb/index.vue |   2 +-
 ui/src/utils/dynamics-api/shared-api.ts       |   4 +-
 ui/src/views/application-overview/index.vue   |   2 +-
 ui/src/views/application/index.vue            |   2 +-
 .../ToolResourceIndex.vue                     | 266 +++++++++++++++++-
 .../tool/component/ToolListContainer.vue      |  18 +-
 7 files changed, 289 insertions(+), 31 deletions(-)

diff --git a/ui/src/api/system-resource-management/tool.ts b/ui/src/api/system-resource-management/tool.ts
index ae3e2f62e..00ae4f853 100644
--- a/ui/src/api/system-resource-management/tool.ts
+++ b/ui/src/api/system-resource-management/tool.ts
@@ -37,6 +37,20 @@ const getToolListPage: (
   return get(`${prefix}/${page.current_page}/${page.page_size}`, param, loading)
 }
 
+/**
+ * 获取工具详情
+ * @param tool_id 工具id
+ * @param loading 加载器
+ * @returns 工具详情
+ */
+const getToolById: (tool_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  tool_id,
+  loading,
+) => {
+  return get(`${prefix}/${tool_id}`, undefined, loading)
+}
+
+
 /**
  * 修改工具
  * @param 参数
@@ -50,18 +64,6 @@ const putTool: (tool_id: string, data: toolData, loading?: Ref<boolean>) => Prom
   return put(`${prefix}/${tool_id}`, data, undefined, loading)
 }
 
-/**
- * 获取工具详情
- * @param tool_id 工具id
- * @param loading 加载器
- * @returns 工具详情
- */
-const getToolById: (tool_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
-  tool_id,
-  loading,
-) => {
-  return get(`${prefix}/${tool_id}`, undefined, loading)
-}
 
 /**
  * 删除工具
diff --git a/ui/src/layout/components/breadcrumb/index.vue b/ui/src/layout/components/breadcrumb/index.vue
index db438a064..b45c73992 100644
--- a/ui/src/layout/components/breadcrumb/index.vue
+++ b/ui/src/layout/components/breadcrumb/index.vue
@@ -27,7 +27,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router'
-import { isAppIcon, resetUrl } from '@/utils/common'
+import { resetUrl } from '@/utils/common'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
 import useStore from '@/stores'
 const { common, application } = useStore()
diff --git a/ui/src/utils/dynamics-api/shared-api.ts b/ui/src/utils/dynamics-api/shared-api.ts
index 6978e4a64..bdf548b08 100644
--- a/ui/src/utils/dynamics-api/shared-api.ts
+++ b/ui/src/utils/dynamics-api/shared-api.ts
@@ -15,7 +15,7 @@ import problemSystemShareApi from '@/api/system-shared/problem'
 import chatUserSystemShareApi from '@/api/system-shared/chat-user'
 import workspaceApi from '@/api/workspace/workspace'
 import systemUserApi from '@/api/user/user'
-import workspaceShare from '@/permission/knowledge/workspace-share'
+import ToolResourceApi from '@/api/system-resource-management/tool'
 
 // 普通 API
 const workspaceApiMap = {
@@ -45,7 +45,7 @@ const systemShareApiMap = {
 const systemManageApiMap = {
   // knowledge: knowledgeWorkspaceApi,
   // model: modelWorkspaceApi,
-  // tool: toolSystemShareApi,
+  tool: ToolResourceApi,
 } as any
 
 const data = {
diff --git a/ui/src/views/application-overview/index.vue b/ui/src/views/application-overview/index.vue
index e00551bb7..270c0cac2 100644
--- a/ui/src/views/application-overview/index.vue
+++ b/ui/src/views/application-overview/index.vue
@@ -210,7 +210,7 @@ import applicationApi from '@/api/application/application'
 import { nowDate, beforeDay } from '@/utils/time'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { copyClick } from '@/utils/clipboard'
-import { isAppIcon, resetUrl } from '@/utils/common'
+import { resetUrl } from '@/utils/common'
 import { mapToUrlParams } from '@/utils/application'
 import useStore from '@/stores'
 import { t } from '@/locales'
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index 2a2a12a42..7fce40175 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -307,7 +307,7 @@ import useStore from '@/stores'
 import { t } from '@/locales'
 import { useRouter, useRoute } from 'vue-router'
 import { isWorkFlow } from '@/utils/application'
-import { isAppIcon, resetUrl } from '@/utils/common'
+import { resetUrl } from '@/utils/common'
 import { dateFormat } from '@/utils/time'
 import { SourceTypeEnum, ValidType, ValidCount } from '@/enums/common'
 import permissionMap from '@/permission'
diff --git a/ui/src/views/system-resource-management/ToolResourceIndex.vue b/ui/src/views/system-resource-management/ToolResourceIndex.vue
index 8c64dd819..029720085 100644
--- a/ui/src/views/system-resource-management/ToolResourceIndex.vue
+++ b/ui/src/views/system-resource-management/ToolResourceIndex.vue
@@ -49,23 +49,23 @@
       >
         <!-- <el-table-column type="selection" width="55" /> -->
         <el-table-column width="220" :label="$t('common.name')" show-overflow-tooltip>
-          <template #default="scope">
+          <template #default="{ row }">
             <div class="table-name flex align-center">
               <el-icon size="24" class="mr-8">
                 <el-avatar
-                  v-if="isAppIcon(scope.row?.icon)"
+                  v-if="row?.icon"
                   shape="square"
                   :size="24"
                   style="background: none"
                   class="mr-8"
                 >
-                  <img :src="resetUrl(scope.row?.icon)" alt="" />
+                  <img :src="resetUrl(row?.icon)" alt="" />
                 </el-avatar>
                 <el-avatar v-else class="avatar-green" shape="square" :size="24">
                   <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
                 </el-avatar>
               </el-icon>
-              {{ scope.row.name }}
+              {{ row.name }}
             </div>
           </template>
         </el-table-column>
@@ -158,21 +158,136 @@
             {{ datetimeFormat(row.create_time) }}
           </template>
         </el-table-column>
+        <el-table-column :label="$t('common.operation')" align="left" width="160" fixed="right">
+          <template #default="{ row }">
+            <span @click.stop>
+              <el-switch
+                v-model="row.is_active"
+                :before-change="() => changeState(row)"
+                size="small"
+                class="mr-4"
+                v-if="permissionPrecise.switch(row.id)"
+              />
+            </span>
+            <el-divider direction="vertical" />
+
+            <el-tooltip
+              effect="dark"
+              :content="$t('common.edit')"
+              placement="top"
+              v-if="row.template_id && permissionPrecise.edit(row.id)"
+            >
+              <span class="mr-8">
+                <el-button
+                  type="primary"
+                  text
+                  @click.stop="addInternalTool(row, true)"
+                  :title="$t('common.edit')"
+                >
+                  <el-icon>
+                    <EditPen />
+                  </el-icon>
+                </el-button>
+              </span>
+            </el-tooltip>
+            <el-tooltip
+              effect="dark"
+              :content="$t('common.edit')"
+              placement="top"
+              v-if="!row.template_id && permissionPrecise.edit(row.id)"
+            >
+              <span class="mr-8">
+                <el-button
+                  type="primary"
+                  text
+                  @click.stop="openCreateDialog(row)"
+                  :title="$t('common.edit')"
+                >
+                  <el-icon>
+                    <EditPen />
+                  </el-icon>
+                </el-button>
+              </span>
+            </el-tooltip>
+
+            <el-tooltip
+              effect="dark"
+              :content="$t('common.copy')"
+              placement="top"
+              v-if="!row.template_id && permissionPrecise.copy(row.id)"
+            >
+              <span class="mr-8">
+                <el-button
+                  type="primary"
+                  text
+                  @click.stop="copyTool(row)"
+                  :title="$t('common.copy')"
+                >
+                  <AppIcon iconName="app-copy"></AppIcon>
+                </el-button>
+              </span>
+            </el-tooltip>
+            <el-dropdown trigger="click">
+              <el-button text @click.stop>
+                <el-icon>
+                  <MoreFilled />
+                </el-icon>
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item
+                    v-if="row.init_field_list?.length > 0 && permissionPrecise.edit(row.id)"
+                    @click.stop="configInitParams(row)"
+                  >
+                    <AppIcon iconName="app-operation" class="mr-4"></AppIcon>
+                    {{ $t('common.param.initParam') }}
+                  </el-dropdown-item>
+
+                  <el-dropdown-item
+                    v-if="!row.template_id && permissionPrecise.export(row.id)"
+                    @click.stop="exportTool(row)"
+                  >
+                    <AppIcon iconName="app-export"></AppIcon>
+                    {{ $t('common.export') }}
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    v-if="permissionPrecise.delete(row.id)"
+                    divided
+                    @click.stop="deleteTool(row)"
+                  >
+                    <el-icon><Delete /></el-icon>
+                    {{ $t('common.delete') }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+        </el-table-column>
       </app-table>
     </el-card>
+
+    <InitParamDrawer ref="InitParamDrawerRef" @refresh="refresh" />
+    <ToolFormDrawer ref="ToolFormDrawerRef" @refresh="refresh" :title="ToolDrawertitle" />
+    <AddInternalToolDialog ref="AddInternalToolDialogRef" @refresh="confirmAddInternalTool" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref, reactive, computed } from 'vue'
+import { cloneDeep } from 'lodash'
+import InitParamDrawer from '@/views/tool/component/InitParamDrawer.vue'
 import ToolResourceApi from '@/api/system-resource-management/tool'
+import AddInternalToolDialog from '@/views/tool/toolStore/AddInternalToolDialog.vue'
+import ToolFormDrawer from '@/views/tool/ToolFormDrawer.vue'
 import { t } from '@/locales'
-import { isAppIcon, resetUrl } from '@/utils/common'
+import { resetUrl } from '@/utils/common'
 import { ToolType } from '@/enums/tool'
 import useStore from '@/stores'
 import { datetimeFormat } from '@/utils/time'
 import { loadPermissionApi } from '@/utils/dynamics-api/permission-api.ts'
 import UserApi from '@/api/user/user.ts'
+import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
+import permissionMap from '@/permission'
 
 const { user } = useStore()
 
@@ -194,6 +309,137 @@ const paginationConfig = reactive({
 const workspaceOptions = ref<any[]>([])
 const workspaceVisible = ref(false)
 const workspaceArr = ref<any[]>([])
+
+const permissionPrecise = computed(() => {
+  return permissionMap['tool']['systemManage']
+})
+
+function exportTool(row: any) {
+  ToolResourceApi.exportTool(row.id, row.name, loading).catch((e: any) => {
+    if (e.response.status !== 403) {
+      e.response.data.text().then((res: string) => {
+        MsgError(`${t('views.application.tip.ExportError')}:${JSON.parse(res).message}`)
+      })
+    }
+  })
+}
+
+function deleteTool(row: any) {
+  MsgConfirm(
+    `${t('views.tool.delete.confirmTitle')}：${row.name} ?`,
+    t('views.tool.delete.confirmMessage'),
+    {
+      confirmButtonText: t('common.confirm'),
+      cancelButtonText: t('common.cancel'),
+      confirmButtonClass: 'danger',
+    },
+  )
+    .then(() => {
+      ToolResourceApi.delTool(row.id, loading).then(() => {
+        getList()
+        MsgSuccess(t('common.deleteSuccess'))
+      })
+    })
+    .catch(() => {})
+}
+
+function configInitParams(item: any) {
+  ToolResourceApi.getToolById(item?.id, changeStateloading).then((res: any) => {
+    InitParamDrawerRef.value.open(res.data)
+  })
+}
+
+async function copyTool(row: any) {
+  ToolDrawertitle.value = t('views.tool.copyTool')
+  const res = await ToolResourceApi.getToolById(row.id, changeStateloading)
+  const obj = cloneDeep(res.data)
+  delete obj['id']
+  obj['name'] = obj['name'] + `  ${t('common.copyTitle')}`
+  ToolFormDrawerRef.value.open(obj)
+}
+
+const ToolFormDrawerRef = ref()
+const ToolDrawertitle = ref('')
+
+function openCreateDialog(data?: any) {
+  // 有template_id的不允许编辑，是模板转换来的
+  if (data?.template_id) {
+    return
+  }
+
+  ToolDrawertitle.value = t('views.tool.editTool')
+  if (data) {
+    ToolResourceApi.getToolById(data?.id, loading).then((res: any) => {
+      ToolFormDrawerRef.value.open(res.data)
+    })
+  } else {
+    ToolFormDrawerRef.value.open(data)
+  }
+}
+
+const AddInternalToolDialogRef = ref<InstanceType<typeof AddInternalToolDialog>>()
+function addInternalTool(data?: any, isEdit?: boolean) {
+  AddInternalToolDialogRef.value?.open(data, isEdit)
+}
+
+function confirmAddInternalTool(data?: any, isEdit?: boolean) {
+  if (isEdit) {
+    ToolResourceApi.putTool(data?.id as string, { name: data.name }, loading).then((res: any) => {
+      MsgSuccess(t('common.saveSuccess'))
+      refresh()
+    })
+  }
+}
+
+const InitParamDrawerRef = ref()
+async function changeState(row: any) {
+  if (row.is_active) {
+    MsgConfirm(
+      `${t('views.tool.disabled.confirmTitle')}${row.name} ?`,
+      t('views.tool.disabled.confirmMessage'),
+      {
+        confirmButtonText: t('common.status.disable'),
+        confirmButtonClass: 'danger',
+      },
+    ).then(() => {
+      const obj = {
+        is_active: !row.is_active,
+      }
+      ToolResourceApi.putTool(row.id, obj, changeStateloading)
+        .then(() => {
+          getList()
+          return true
+        })
+        .catch(() => {
+          return false
+        })
+    })
+  } else {
+    const res = await ToolResourceApi.getToolById(row.id, changeStateloading)
+    if (
+      (!res.data.init_params || Object.keys(res.data.init_params).length === 0) &&
+      res.data.init_field_list &&
+      res.data.init_field_list.length > 0 &&
+      res.data.init_field_list.filter((item: any) => item.default_value && item.show_default_value)
+        .length !== res.data.init_field_list.length
+    ) {
+      InitParamDrawerRef.value.open(res.data, !row.is_active)
+      return false
+    }
+    const obj = {
+      is_active: !row.is_active,
+    }
+    ToolResourceApi.putTool(row.id, obj, changeStateloading)
+      .then(() => {
+        getList()
+        return true
+      })
+      .catch(() => {
+        return false
+      })
+  }
+}
+
 function filterWorkspaceChange(val: string) {
   if (val === 'clear') {
     workspaceArr.value = []
@@ -228,6 +474,16 @@ function getList() {
   })
 }
 
+function refresh(data?: any) {
+  if (data) {
+    getList()
+  } else {
+    paginationConfig.total = 0
+    paginationConfig.current_page = 1
+    getList()
+  }
+}
+
 onMounted(() => {
   getWorkspaceList()
   getList()
diff --git a/ui/src/views/tool/component/ToolListContainer.vue b/ui/src/views/tool/component/ToolListContainer.vue
index bb488439e..86a734dd3 100644
--- a/ui/src/views/tool/component/ToolListContainer.vue
+++ b/ui/src/views/tool/component/ToolListContainer.vue
@@ -65,7 +65,7 @@
                 :on-change="(file: any, fileList: any) => importTool(file)"
                 class="import-button"
               >
-                <el-dropdown-item 
+                <el-dropdown-item
                   v-if="permissionPrecise.import()"
                 >
                   <div class="flex align-center w-full">
@@ -197,7 +197,7 @@
                   </div>
                 </template>
                 <template #mouseEnter>
-                  <div @click.stop v-if="!isShared && 
+                  <div @click.stop v-if="!isShared &&
                     MoreFieldPermission(item.id)">
                     <el-switch
                       v-model="item.is_active"
@@ -309,18 +309,18 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, reactive, computed, watch } from 'vue'
-import { cloneDeep, get } from 'lodash'
+import { cloneDeep } from 'lodash'
 import { useRoute, onBeforeRouteLeave } from 'vue-router'
 import InitParamDrawer from '@/views/tool/component/InitParamDrawer.vue'
 import ToolFormDrawer from '@/views/tool/ToolFormDrawer.vue'
 import CreateFolderDialog from '@/components/folder-tree/CreateFolderDialog.vue'
 import AuthorizedWorkspace from '@/views/system-shared/AuthorizedWorkspaceDialog.vue'
-import MoveToDialog from '@/components/folder-tree/MoveToDialog.vue'
-import { isAppIcon, resetUrl } from '@/utils/common'
-import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
-import { SourceTypeEnum } from '@/enums/common'
 import ToolStoreDialog from '@/views/tool/toolStore/ToolStoreDialog.vue'
 import AddInternalToolDialog from '@/views/tool/toolStore/AddInternalToolDialog.vue'
+import MoveToDialog from '@/components/folder-tree/MoveToDialog.vue'
+import { resetUrl } from '@/utils/common'
+import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
+import { SourceTypeEnum } from '@/enums/common'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
 import permissionMap from '@/permission'
 import useStore from '@/stores'
@@ -354,8 +354,8 @@ const permissionPrecise = computed(() => {
 })
 
 const MoreFieldPermission = (id: any) => {
-  return (permissionPrecise.value.edit(id) || 
-   permissionPrecise.value.export(id) || 
+  return (permissionPrecise.value.edit(id) ||
+   permissionPrecise.value.export(id) ||
   permissionPrecise.value.delete(id) || isSystemShare.value)
 }