From eba0e960da637a02f1a83ffa63c90acc3cd5b06c Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 21 Aug 2026 18:46:39 +0800
Subject: [PATCH] perf: format

---
 .../api/admin/workspace/model/model-shared.ts |  4 +-
 ui/src/api/admin/workspace/model/model.ts     | 12 ++--
 ui/src/api/admin/workspace/tool/store.ts      | 36 ++++++------
 ui/src/api/admin/workspace/tool/tool.ts       | 10 ++--
 ui/src/api/types/index.ts                     |  4 +-
 .../types/{workspace-model.ts => model.ts}    |  2 +-
 .../api/types/{workspace-tool.ts => tool.ts}  |  2 +-
 .../components/business/folder-tree/index.vue |  2 +-
 .../business/model-select/index.vue           |  6 +-
 ui/src/components/global/mk-icon/ToolIcon.vue | 55 ++++++++++++-------
 ui/src/constants/index.ts                     |  1 +
 ui/src/views/model/ModelView.vue              | 12 ++--
 ui/src/views/model/components/ModelCard.vue   |  4 +-
 ui/src/views/tool/ToolView.vue                | 16 +++---
 ui/src/views/tool/components/ToolCard.vue     | 25 ++-------
 15 files changed, 95 insertions(+), 96 deletions(-)
 rename ui/src/api/types/{workspace-model.ts => model.ts} (96%)
 rename ui/src/api/types/{workspace-tool.ts => tool.ts} (97%)

diff --git a/ui/src/api/admin/workspace/model/model-shared.ts b/ui/src/api/admin/workspace/model/model-shared.ts
index bda5c4bd82e..1515985617f 100644
--- a/ui/src/api/admin/workspace/model/model-shared.ts
+++ b/ui/src/api/admin/workspace/model/model-shared.ts
@@ -1,5 +1,5 @@
 import { get } from '../../core/request'
-import type { RequestParams, WorkspaceModel } from '@/api/types'
+import type { RequestParams, ModelItem } from '@/api/types'
 import { getWorkspaceId } from '@/utils/workspace-context'
 
 const getPrefix = () => {
@@ -9,7 +9,7 @@ const getPrefix = () => {
 
 /** 获取工作空间共享的模型列表。 */
 const getModelList = (query?: RequestParams) => {
-  return get<WorkspaceModel[]>(`${getPrefix()}/model`, query)
+  return get<ModelItem[]>(`${getPrefix()}/model`, query)
 }
 
 export default {
diff --git a/ui/src/api/admin/workspace/model/model.ts b/ui/src/api/admin/workspace/model/model.ts
index f294c078435..6953223f958 100644
--- a/ui/src/api/admin/workspace/model/model.ts
+++ b/ui/src/api/admin/workspace/model/model.ts
@@ -1,5 +1,5 @@
 import { del, get, post, put } from '../../core/request'
-import type { RequestParams, ModelPayload, WorkspaceModel } from '@/api/types'
+import type { RequestParams, ModelPayload, ModelItem } from '@/api/types'
 import { getWorkspaceId } from '@/utils/workspace-context'
 
 const getPrefix = () => {
@@ -9,27 +9,27 @@ const getPrefix = () => {
 
 /** 获取工作空间模型列表。 */
 const getModelList = (query?: RequestParams) => {
-  return get<WorkspaceModel[]>(getPrefix(), query)
+  return get<ModelItem[]>(getPrefix(), query)
 }
 
 /** 创建工作空间模型。 */
 const postModel = (payload: ModelPayload) => {
-  return post<ModelPayload, WorkspaceModel>(getPrefix(), payload)
+  return post<ModelPayload, ModelItem>(getPrefix(), payload)
 }
 
 /** 更新工作空间模型。 */
 const putModel = (modelId: string, payload: Partial<ModelPayload>) => {
-  return put<Partial<ModelPayload>, WorkspaceModel>(`${getPrefix()}/${modelId}`, payload)
+  return put<Partial<ModelPayload>, ModelItem>(`${getPrefix()}/${modelId}`, payload)
 }
 
 /** 获取包含认证信息的模型详情。 */
 const getModelDetail = (modelId: string) => {
-  return get<WorkspaceModel>(`${getPrefix()}/${modelId}`)
+  return get<ModelItem>(`${getPrefix()}/${modelId}`)
 }
 
 /** 获取不包含认证信息的模型元数据。 */
 const getModelMeta = (modelId: string) => {
-  return get<WorkspaceModel>(`${getPrefix()}/${modelId}/meta`)
+  return get<ModelItem>(`${getPrefix()}/${modelId}/meta`)
 }
 
 /** 删除工作空间模型。 */
diff --git a/ui/src/api/admin/workspace/tool/store.ts b/ui/src/api/admin/workspace/tool/store.ts
index 5d1befd77b5..cee8959fd2d 100644
--- a/ui/src/api/admin/workspace/tool/store.ts
+++ b/ui/src/api/admin/workspace/tool/store.ts
@@ -1,10 +1,10 @@
 import { get, post } from '../../core/request'
-import type { AddStoreToolPayload, WorkspaceTool } from '@/api/types'
+import type { ToolItem } from '@/api/types'
 import type { RequestParams } from '@/api/types'
 
 /** 获取系统内置工具。 */
 const getInternalToolList = (query?: RequestParams) => {
-  return get<WorkspaceTool[]>('/workspace/internal/tool', query)
+  return get<ToolItem[]>('/workspace/internal/tool', query)
 }
 
 /** 获取工具商店列表。 */
@@ -27,21 +27,21 @@ const getStoreApplicationList = (query?: RequestParams) => {
   return get<unknown>('/workspace/store/application_template', query)
 }
 
-/** 将系统内置工具添加到工作空间。 */
-const postInternalTool = (workspaceId: string, toolId: string, payload: AddStoreToolPayload) => {
-  return post<AddStoreToolPayload, WorkspaceTool>(
-    `/workspace/${workspaceId}/tool/${toolId}/add_internal_tool`,
-    payload,
-  )
-}
+// /** 将系统内置工具添加到工作空间。 */
+// const postInternalTool = (workspaceId: string, toolId: string, payload: AddStoreToolPayload) => {
+//   return post<AddStoreToolPayload, ToolItem>(
+//     `/workspace/${workspaceId}/tool/${toolId}/add_internal_tool`,
+//     payload,
+//   )
+// }
 
-/** 将商店工具添加到工作空间。 */
-const postStoreTool = (workspaceId: string, toolId: string, payload: AddStoreToolPayload) => {
-  return post<AddStoreToolPayload, WorkspaceTool>(
-    `/workspace/${workspaceId}/tool/${toolId}/add_store_tool`,
-    payload,
-  )
-}
+// /** 将商店工具添加到工作空间。 */
+// const postStoreTool = (workspaceId: string, toolId: string, payload: AddStoreToolPayload) => {
+//   return post<AddStoreToolPayload, ToolItem>(
+//     `/workspace/${workspaceId}/tool/${toolId}/add_store_tool`,
+//     payload,
+//   )
+// }
 
 export default {
   getInternalToolList,
@@ -49,6 +49,6 @@ export default {
   getStoreKnowledgeList,
   getStoreToolList,
   getStoreToolWorkflowList,
-  postInternalTool,
-  postStoreTool,
+  // postInternalTool,
+  // postStoreTool,
 }
diff --git a/ui/src/api/admin/workspace/tool/tool.ts b/ui/src/api/admin/workspace/tool/tool.ts
index 6af9df560ab..d2bda12e5e1 100644
--- a/ui/src/api/admin/workspace/tool/tool.ts
+++ b/ui/src/api/admin/workspace/tool/tool.ts
@@ -1,6 +1,6 @@
 import { del, get, post, put } from '../../core/request'
 import type { ParamsPage, ResponsePage } from '../../core/types'
-import type { RequestParams, ToolPayload, WorkspaceTool } from '@/api/types'
+import type { RequestParams, ToolPayload, ToolItem } from '@/api/types'
 import { getWorkspaceId } from '@/utils/workspace-context'
 
 const getPrefix = () => {
@@ -10,7 +10,7 @@ const getPrefix = () => {
 
 /** 获取工具分页列表。 */
 const getToolPage = (page: ParamsPage, query?: RequestParams) => {
-  return get<ResponsePage<WorkspaceTool>>(
+  return get<ResponsePage<ToolItem>>(
     `${getPrefix()}/${page.currentPage}/${page.pageSize}`,
     query,
   )
@@ -18,17 +18,17 @@ const getToolPage = (page: ParamsPage, query?: RequestParams) => {
 
 /** 更新工作空间工具。 */
 const putTool = (toolId: string, payload: ToolPayload) => {
-  return put<ToolPayload, WorkspaceTool>(`${getPrefix()}/${toolId}`, payload)
+  return put<ToolPayload, ToolItem>(`${getPrefix()}/${toolId}`, payload)
 }
 
 /** 创建工作空间工具。 */
 const postTool = (payload: ToolPayload) => {
-  return post<ToolPayload, WorkspaceTool>(getPrefix(), payload)
+  return post<ToolPayload, ToolItem>(getPrefix(), payload)
 }
 
 /** 获取工具详情。 */
 const getToolDetail = (toolId: string) => {
-  return get<WorkspaceTool>(`${getPrefix()}/${toolId}`)
+  return get<ToolItem>(`${getPrefix()}/${toolId}`)
 }
 
 /** 删除工作空间工具。 */
diff --git a/ui/src/api/types/index.ts b/ui/src/api/types/index.ts
index 3c56ef60270..aaf8b385ccb 100644
--- a/ui/src/api/types/index.ts
+++ b/ui/src/api/types/index.ts
@@ -10,6 +10,6 @@ export type * from './system-authentication'
 export type * from './system-operate-log'
 export type * from './system-role'
 export type * from './system-email'
-export type * from './workspace-model'
+export type * from './model'
 export type * from './folder'
-export type * from './workspace-tool'
+export type * from './tool'
diff --git a/ui/src/api/types/workspace-model.ts b/ui/src/api/types/model.ts
similarity index 96%
rename from ui/src/api/types/workspace-model.ts
rename to ui/src/api/types/model.ts
index cc439b89c93..d90beed6211 100644
--- a/ui/src/api/types/workspace-model.ts
+++ b/ui/src/api/types/model.ts
@@ -10,7 +10,7 @@ export interface ModelProviderItem {
   provider: string
 }
 
-export interface WorkspaceModel {
+export interface ModelItem {
   create_time?: string
   id: string
   meta?: Record<string, unknown>
diff --git a/ui/src/api/types/workspace-tool.ts b/ui/src/api/types/tool.ts
similarity index 97%
rename from ui/src/api/types/workspace-tool.ts
rename to ui/src/api/types/tool.ts
index 4894cf11c53..3e47a62e5a2 100644
--- a/ui/src/api/types/workspace-tool.ts
+++ b/ui/src/api/types/tool.ts
@@ -5,7 +5,7 @@ import { TOOL_SCOPE, TOOL_TYPE } from '@/api/enums'
 export type ToolScope = (typeof TOOL_SCOPE)[keyof typeof TOOL_SCOPE]
 export type ToolType = (typeof TOOL_TYPE)[keyof typeof TOOL_TYPE]
 
-export interface WorkspaceTool {
+export interface ToolItem {
   code?: string
   create_time?: string
   desc?: string | null
diff --git a/ui/src/components/business/folder-tree/index.vue b/ui/src/components/business/folder-tree/index.vue
index 2cb1c36605e..8476d86237f 100644
--- a/ui/src/components/business/folder-tree/index.vue
+++ b/ui/src/components/business/folder-tree/index.vue
@@ -6,7 +6,7 @@ import { MsgSuccess } from '@/utils/message'
 import MkListItem from '@/components/mk-search-list/mk-list-item.vue'
 import VirtualizedTree from './VirtualizedTree.vue'
 import { FOLDER_SORT, type FolderSort } from './types'
-import { FOLDER_ENTRIES, FOLDER_ENTRY_ID } from '@/constants/folder'
+import { FOLDER_ENTRIES, FOLDER_ENTRY_ID } from '@/constants'
 import { useStore } from '@/stores'
 import { getWorkspaceId } from '@/utils/workspace-context'
 
diff --git a/ui/src/components/business/model-select/index.vue b/ui/src/components/business/model-select/index.vue
index 3d528ae664b..2982767ef09 100644
--- a/ui/src/components/business/model-select/index.vue
+++ b/ui/src/components/business/model-select/index.vue
@@ -3,18 +3,18 @@ import { computed, ref } from 'vue'
 import { Check } from '@element-plus/icons-vue'
 import ProviderApi from '@/api/admin/workspace/model/provider'
 import { MODEL_STATUS } from '@/api/enums'
-import type { ModelProviderItem, WorkspaceModel } from '@/api/types'
+import type { ModelProviderItem, ModelItem } from '@/api/types'
 
 defineOptions({
   name: 'ModelSelect',
   inheritAttrs: false,
 })
 
-type ModelOptions = Record<string, WorkspaceModel[]>
+type ModelOptions = Record<string, ModelItem[]>
 
 interface ModelOptionGroup {
   icon: string
-  models: WorkspaceModel[]
+  models: ModelItem[]
   name: string
   provider: string
 }
diff --git a/ui/src/components/global/mk-icon/ToolIcon.vue b/ui/src/components/global/mk-icon/ToolIcon.vue
index 92a9dbff4ad..224ccd69f0e 100644
--- a/ui/src/components/global/mk-icon/ToolIcon.vue
+++ b/ui/src/components/global/mk-icon/ToolIcon.vue
@@ -1,36 +1,49 @@
 <script setup lang="ts">
-import { resetUrl } from '@/utils/common'
 import { TOOL_TYPE } from '@/api/enums'
+import type { ToolType } from '@/api/types'
+import { resetUrl } from '@/utils/common'
+
 defineOptions({ name: 'ToolIcon' })
-const props = defineProps({
-  type: {
-    type: [String, Number],
-    default: '',
-  },
-  size: {
-    type: [String, Number],
-    default: 24,
+
+withDefaults(
+  defineProps<{
+    icon?: string
+    size?: number | string
+    type?: ToolType
+  }>(),
+  {
+    size: 24,
   },
-  icon: String,
-})
+)
 </script>
+
 <template>
-  <el-avatar v-if="icon" shape="square" :size="size" style="background: none">
+  <el-avatar v-if="icon" class="bg-transparent!" shape="square" :size="size">
     <img :src="resetUrl(icon)" alt="" />
   </el-avatar>
-  <el-avatar v-else-if="type == TOOL_TYPE.MCP" shape="square" :size="size">
-    <img src="@/assets/tool/icon_mcp.svg" style="width: 73%" alt="" />
+  <el-avatar v-else-if="type === TOOL_TYPE.MCP" shape="square" :size="size">
+    <img class="w-[73%]" src="@/assets/tool/icon_mcp.svg" alt="" />
   </el-avatar>
-  <el-avatar v-else-if="type == TOOL_TYPE.SKILL" shape="square" :size="size">
-    <img src="@/assets/tool/icon_skill.svg" style="width: 63%" alt="" />
+  <el-avatar v-else-if="type === TOOL_TYPE.SKILL" shape="square" :size="size">
+    <img class="w-[63%]" src="@/assets/tool/icon_skill.svg" alt="" />
   </el-avatar>
-  <el-avatar v-else-if="type == TOOL_TYPE.DATA_SOURCE" class="bg-purple!" shape="square" :size="size">
-    <img src="@/assets/tool/icon_datasource.svg" style="width: 58%" alt="" />
+  <el-avatar
+    v-else-if="type === TOOL_TYPE.DATA_SOURCE"
+    class="bg-purple!"
+    shape="square"
+    :size="size"
+  >
+    <img class="w-[58%]" src="@/assets/tool/icon_datasource.svg" alt="" />
   </el-avatar>
-  <el-avatar v-else-if="type == TOOL_TYPE.WORKFLOW" class="bg-success!" shape="square" :size="size">
-    <img src="@/assets/workflow/logo_workflow.svg" style="width: 62%" alt="" />
+  <el-avatar
+    v-else-if="type === TOOL_TYPE.WORKFLOW"
+    class="bg-success!"
+    shape="square"
+    :size="size"
+  >
+    <img class="w-[62%]" src="@/assets/workflow/logo_workflow.svg" alt="" />
   </el-avatar>
   <el-avatar v-else class="bg-success!" shape="square" :size="size">
-    <img src="@/assets/tool/icon_tool.svg" style="width: 63%" alt="" />
+    <img class="w-[63%]" src="@/assets/tool/icon_tool.svg" alt="" />
   </el-avatar>
 </template>
diff --git a/ui/src/constants/index.ts b/ui/src/constants/index.ts
index 1bde2e340e0..72d5e5e6af2 100644
--- a/ui/src/constants/index.ts
+++ b/ui/src/constants/index.ts
@@ -2,3 +2,4 @@
 export * from './auth'
 export * from './model'
 export * from './tool'
+export * from './folder'
diff --git a/ui/src/views/model/ModelView.vue b/ui/src/views/model/ModelView.vue
index a19b5174f16..857b0bb618c 100644
--- a/ui/src/views/model/ModelView.vue
+++ b/ui/src/views/model/ModelView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import type { ModelProviderItem, OptionItem, RequestParams, WorkspaceModel } from '@/api/types'
+import type { ModelProviderItem, OptionItem, RequestParams, ModelItem } from '@/api/types'
 import { MODEL_TYPE_LABELS } from '@/constants'
 import CommonApi from '@/api/admin/workspace/common'
 import ModelApi from '@/api/admin/workspace/model/model'
@@ -19,14 +19,14 @@ const DEFAULT_MODEL_PROVIDER: ModelProviderItem = {
 const loading = ref(false)
 const currentProvider = ref<ModelProviderItem>(DEFAULT_MODEL_PROVIDER)
 const modelProviders = ref<ModelProviderItem[]>([])
-const workspaceModels = ref<WorkspaceModel[]>([])
+const ModelItems = ref<ModelItem[]>([])
 const modelQuery = ref<RequestParams>()
 const creatorOptions = ref<OptionItem<string>[]>([])
 
 const isShared = computed(() => currentProvider.value.provider === 'shared')
 
 const getModelIcon = computed(
-  () => (model: WorkspaceModel) =>
+  () => (model: ModelItem) =>
     modelProviders.value.find(({ provider }) => provider === model.provider)?.icon ?? '',
 )
 
@@ -77,7 +77,7 @@ function loadModels() {
 
   return request
     .then((models) => {
-      workspaceModels.value = models
+      ModelItems.value = models
     })
     .finally(() => {
       loading.value = false
@@ -124,11 +124,11 @@ onMounted(() => {
       </component>
       <div v-loading="loading">
         <div
-          v-if="workspaceModels.length"
+          v-if="ModelItems.length"
           class="mk-resource-card-grid"
         >
           <ModelCard
-            v-for="model in workspaceModels"
+            v-for="model in ModelItems"
             :key="model.id"
             :model="model"
             :icon="getModelIcon(model)"
diff --git a/ui/src/views/model/components/ModelCard.vue b/ui/src/views/model/components/ModelCard.vue
index a288f65f380..22fa5f03f60 100644
--- a/ui/src/views/model/components/ModelCard.vue
+++ b/ui/src/views/model/components/ModelCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { WorkspaceModel } from '@/api/types'
+import type { ModelItem } from '@/api/types'
 import { MODEL_STATUS } from '@/api/enums'
 import { MODEL_TYPE_LABELS } from '@/constants'
 import MkSourceCard from '@/components/mk-source-card/index.vue'
@@ -8,7 +8,7 @@ defineOptions({ name: 'ModelCard' })
 
 const props = defineProps<{
   icon: string
-  model: WorkspaceModel
+  model: ModelItem
   shared: boolean
 }>()
 
diff --git a/ui/src/views/tool/ToolView.vue b/ui/src/views/tool/ToolView.vue
index 6fb0a4220ec..2452367a7b9 100644
--- a/ui/src/views/tool/ToolView.vue
+++ b/ui/src/views/tool/ToolView.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed, ref, useTemplateRef } from 'vue'
-import { FOLDER_SOURCE, TOOL_SCOPE } from '@/api/enums'
-import type { OptionItem, RequestParams, ToolType, WorkspaceTool, FolderItem } from '@/api/types'
+
 import CommonApi from '@/api/admin/workspace/common'
 import ToolApi from '@/api/admin/workspace/tool/tool'
-import { TOOL_TYPE_OPTIONS } from '@/constants'
-import { FOLDER_ENTRIES, FOLDER_ENTRY_ID } from '@/constants/folder'
+import type { OptionItem, RequestParams, ToolType, ToolItem, FolderItem } from '@/api/types'
+import { FOLDER_SOURCE, TOOL_SCOPE } from '@/api/enums'
+import { TOOL_TYPE_OPTIONS, FOLDER_ENTRIES, FOLDER_ENTRY_ID } from '@/constants'
 import FolderTree from '@/components/business/folder-tree/index.vue'
 import { MsgConfirm, MsgSuccess } from '@/utils/message'
 import ToolCard from './components/ToolCard.vue'
@@ -21,7 +21,7 @@ function handleFolderSelect(folder: FolderItem) {
 }
 
 /* 工具查询搜索列表 */
-const toolsData = ref<WorkspaceTool[]>([])
+const toolsData = ref<ToolItem[]>([])
 const infiniteScrollRef = useTemplateRef<{ reset: () => Promise<void> }>('infiniteScrollRef')
 const creatorOptions = ref<OptionItem<string>[]>([])
 const searchFields = computed(() => [
@@ -65,7 +65,7 @@ function loadToolsPage(pagination: { currentPage: number; pageSize: number }) {
 const folderTreeRef = useTemplateRef<InstanceType<typeof FolderTree>>('folderTreeRef')
 const selectedToolId = ref('')
 
-function handleToolSelect(tool: WorkspaceTool) {
+function handleToolSelect(tool: ToolItem) {
   selectedToolId.value = tool.id
 }
 
@@ -75,7 +75,7 @@ function handleCreateFolder() {
 
 /* 工具维护 */
 const loading = ref(false)
-function handleToolStatusChange(tool: WorkspaceTool, active: boolean) {
+function handleToolStatusChange(tool: ToolItem, active: boolean) {
   loading.value = true
   return ToolApi.putTool(tool.id, { is_active: active })
     .then(() => {
@@ -87,7 +87,7 @@ function handleToolStatusChange(tool: WorkspaceTool, active: boolean) {
     })
 }
 
-function handleDeleteTool(tool: WorkspaceTool) {
+function handleDeleteTool(tool: ToolItem) {
   MsgConfirm(`确认删除工具“${tool.name}”？`, '删除后无法恢复，请谨慎操作。')
     .then(() => {
       loading.value = true
diff --git a/ui/src/views/tool/components/ToolCard.vue b/ui/src/views/tool/components/ToolCard.vue
index 3e372359acd..94703f979f2 100644
--- a/ui/src/views/tool/components/ToolCard.vue
+++ b/ui/src/views/tool/components/ToolCard.vue
@@ -1,35 +1,20 @@
 <script setup lang="ts">
-import { computed, type Component } from 'vue'
-import { Box, Coin, Connection, MagicStick } from '@element-plus/icons-vue'
-import { TOOL_TYPE } from '@/api/enums'
-import type { ToolType, WorkspaceTool } from '@/api/types'
+import type { ToolItem } from '@/api/types'
 import MkSourceCard from '@/components/mk-source-card/index.vue'
 
 defineOptions({ name: 'ToolCard' })
 
 const props = defineProps<{
-  selected: boolean
   shared: boolean
-  tool: WorkspaceTool
+  tool: ToolItem
 }>()
 
 const emit = defineEmits<{
-  delete: [tool: WorkspaceTool]
-  select: [tool: WorkspaceTool]
-  statusChange: [tool: WorkspaceTool, active: boolean]
+  delete: [tool: ToolItem]
+  select: [tool: ToolItem]
+  statusChange: [tool: ToolItem, active: boolean]
 }>()
 
-const TOOL_TYPE_ICONS: Record<ToolType, Component> = {
-  [TOOL_TYPE.CUSTOM]: Box,
-  [TOOL_TYPE.DATA_SOURCE]: Coin,
-  [TOOL_TYPE.INTERNAL]: Box,
-  [TOOL_TYPE.MCP]: Connection,
-  [TOOL_TYPE.SKILL]: MagicStick,
-  [TOOL_TYPE.WORKFLOW]: Connection,
-}
-
-const isInlineSvg = computed(() => props.tool.icon?.trim().startsWith('<svg'))
-
 function handleStatusChange(active: string | number | boolean) {
   emit('statusChange', props.tool, Boolean(active))
 }