fix: tool

ui/src/api/tool/tool.ts

@@ -39,12 +39,24 @@ const getToolList: (
   )
 }
 
+/**
+ * 创建工具
+ * @param 参数
+ */
+const postTool: (
+  wordspace_id: string,
+  data: toolData,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (wordspace_id, data, loading) => {
+  return post(`${prefix}/${wordspace_id}/tool`, data, undefined, loading)
+}
+
 /**
  * 修改工具
  * @param 参数
 
  */
-const putToolLib: (
+const putTool: (
   wordspace_id: string,
   tool_id: string,
   data: toolData,
@@ -67,9 +79,22 @@ const getToolById: (
   return get(`${prefix}/${wordspace_id}/tool/${function_lib_id}`, undefined, loading)
 }
 
+/**
+ * 调试工具
+ * @param 参数
+
+ */
+// const postToolDebug: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+//   data: any,
+//   loading
+// ) => {
+//   return post(`${prefix}/debug`, data, undefined, loading)
+// }
+
 export default {
   getToolByFolder,
   getToolList,
-  putToolLib,
+  putTool,
-  getToolById
+  getToolById,
+  postTool
 }

ui/src/layout/components/breadcrumb/index.vue

@@ -138,14 +138,16 @@ import { ref, onMounted, computed } from 'vue'
 import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router'
 // import CreateApplicationDialog from '@/views/application/component/CreateApplicationDialog.vue'
 // import CreateDatasetDialog from '@/views/dataset/component/CreateDatasetDialog.vue'
-import { isAppIcon, isWorkFlow } from '@/utils/application'
+import { isWorkFlow } from '@/utils/application'
+import { isAppIcon } from '@/utils/common'
+
 import useStore from '@/stores'
 const { common, dataset, application } = useStore()
 const route = useRoute()
 const router = useRouter()
 const {
   meta: { activeMenu },
-  params: { id }
+  params: { id },
 } = route as any
 
 onBeforeRouteLeave((to, from) => {
@@ -193,7 +195,7 @@ function changeMenu(id: string) {
       } else {
         router.push({
           name: lastMatched.name,
-          params: { id: id, type: type }
+          params: { id: id, type: type },
         })
       }
     }

ui/src/locales/lang/en-US/common.ts

@@ -58,10 +58,21 @@ export default {
     outputParam: 'Output Parameters',
     inputParam: 'Input Parameters',
     initParam: 'Startup Parameters',
+    editParam: 'Edit Parameter',
+    addParam: 'Add Parameter',
   },
-
   inputPlaceholder: 'Please input',
   title: 'Title',
   content: 'Content',
   rename: 'Rename',
+  EditAvatarDialog: {
+    title: 'App Logo',
+    customizeUpload: 'Custom Upload',
+    upload: 'Upload',
+    default: 'Default Logo',
+    custom: 'Custom',
+    sizeTip: 'Recommended size: 32×32 pixels. Supports JPG, PNG, and GIF formats. Max size: 10 MB',
+    fileSizeExceeded: 'File size exceeds 10 MB',
+    uploadImagePrompt: 'Please upload an image',
+  },
 }

ui/src/locales/lang/en-US/views/application-overview.ts

@@ -27,17 +27,6 @@ export default {
       enabledSuccess: 'Enabled',
       disabledSuccess: 'Disabled'
     },
-    EditAvatarDialog: {
-      title: 'App Logo',
-      customizeUpload: 'Custom Upload',
-      upload: 'Upload',
-      default: 'Default Logo',
-      custom: 'Custom',
-      sizeTip:
-        'Recommended size: 32×32 pixels. Supports JPG, PNG, and GIF formats. Max size: 10 MB',
-      fileSizeExceeded: 'File size exceeds 10 MB',
-      uploadImagePrompt: 'Please upload an image'
-    },
     EmbedDialog: {
       fullscreenModeTitle: 'Fullscreen Mode',
       copyInstructions: 'Copy the code below to embed',

ui/src/locales/lang/en-US/views/model.ts

@@ -38,8 +38,6 @@ export default {
       baseInfo: 'Basic Information',
       advancedInfo: 'Advanced Settings',
       modelParams: 'Model Parameters',
-      editParam: 'Edit Parameter',
-      addParam: 'Add Parameter',
       paramSetting: 'Model Parameter Settings',
       apiParamPassing: 'Interface Parameters',
     },

ui/src/locales/lang/zh-CN/common.ts

@@ -58,13 +58,25 @@ export default {
     enableSuccess: '启用成功',
     disableSuccess: '禁用成功',
   },
-  inputPlaceholder: '请输入',
-  title: '标题',
-  content: '内容',
   param: {
     outputParam: '输出参数',
     inputParam: '输入参数',
     initParam: '启动参数',
+    editParam: '编辑参数',
+    addParam: '添加参数',
   },
+  inputPlaceholder: '请输入',
+  title: '标题',
+  content: '内容',
   rename: '重命名',
+  EditAvatarDialog: {
+    title: 'App Logo',
+    customizeUpload: 'Custom Upload',
+    upload: 'Upload',
+    default: 'Default Logo',
+    custom: 'Custom',
+    sizeTip: 'Recommended size: 32×32 pixels. Supports JPG, PNG, and GIF formats. Max size: 10 MB',
+    fileSizeExceeded: 'File size exceeds 10 MB',
+    uploadImagePrompt: 'Please upload an image',
+  },
 }

ui/src/locales/lang/zh-CN/views/model.ts

@@ -38,8 +38,6 @@ export default {
       baseInfo: '基础信息',
       advancedInfo: '高级设置',
       modelParams: '模型参数',
-      editParam: '编辑参数',
-      addParam: '添加参数',
       paramSetting: '模型参数设置',
       apiParamPassing: '接口传参',
     },

ui/src/locales/lang/zh-CN/views/tool.ts

@@ -7,6 +7,10 @@ export default {
     confirmMessage: '禁用后，引用了该工具的应用提问时会报错 ，请谨慎操作。',
   },
   form: {
+    title: {
+      copy: '副本',
+      baseInfo: '基础信息'
+    },
     toolName: {
       label: '名称',
       name: '工具名称',

ui/src/locales/lang/zh-Hant/common.ts

@@ -54,13 +54,25 @@ export default {
     enableSuccess: '啟用成功',
     disableSuccess: '停用成功',
   },
-  inputPlaceholder: '請輸入',
-  title: '標題',
-  content: '内容',
   param: {
     outputParam: '輸出參數',
     inputParam: '輸入參數',
     initParam: '啟動參數',
+    editParam: '編輯參數',
+    addParam: '新增參數',
   },
+  inputPlaceholder: '請輸入',
+  title: '標題',
+  content: '内容',
   rename: '重命名',
+  EditAvatarDialog: {
+    title: '應用頭像',
+    customizeUpload: '自訂上傳',
+    upload: '上傳',
+    default: '預設logo',
+    custom: '自訂',
+    sizeTip: '建議尺寸 32*32，支援 JPG、PNG、GIF，大小不超過 10 MB',
+    fileSizeExceeded: '檔案大小超過 10 MB',
+    uploadImagePrompt: '請上傳一張圖片'
+  },
 }

ui/src/locales/lang/zh-Hant/views/application-overview.ts

@@ -26,16 +26,6 @@ export default {
       enabledSuccess: '已啟用',
       disabledSuccess: '已停用'
     },
-    EditAvatarDialog: {
-      title: '應用頭像',
-      customizeUpload: '自訂上傳',
-      upload: '上傳',
-      default: '預設logo',
-      custom: '自訂',
-      sizeTip: '建議尺寸 32*32，支援 JPG、PNG、GIF，大小不超過 10 MB',
-      fileSizeExceeded: '檔案大小超過 10 MB',
-      uploadImagePrompt: '請上傳一張圖片'
-    },
     EmbedDialog: {
       fullscreenModeTitle: '全螢幕模式',
       copyInstructions: '複製以下程式碼進行嵌入',

ui/src/locales/lang/zh-Hant/views/model.ts

@@ -38,8 +38,6 @@ export default {
       baseInfo: '基礎資訊',
       advancedInfo: '進階設定',
       modelParams: '模型參數',
-      editParam: '編輯參數',
-      addParam: '新增參數',
       paramSetting: '模型參數設定',
       apiParamPassing: '接口傳參',
     },

ui/src/styles/app.scss

@@ -395,3 +395,21 @@ h5 {
 .avatar-green {
   background: var(--el-color-success);
 }
+
+/*
+  标题前带竖线样式
+*/
+.title-decoration-1 {
+  position: relative;
+  padding-left: 12px;
+  &:before {
+    position: absolute;
+    left: 2px;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 2px;
+    height: 80%;
+    content: '';
+    background: var(--el-color-primary);
+  }
+}

ui/src/styles/component.scss

@@ -12,3 +12,46 @@
     border-right: 1px solid var(--el-border-color);
   }
 }
+
+// 编辑头像
+.edit-avatar {
+  position: relative;
+  line-height: 0;
+  .edit-mask {
+    position: absolute;
+    left: 0;
+    background: rgba(0, 0, 0, 0.4);
+  }
+}
+
+// radio 一行一个样式
+.radio-block {
+  width: 100%;
+  display: inline-flex;
+  .el-radio {
+    align-items: flex-start;
+    height: 100%;
+    width: 100%;
+    margin-top: 8px;
+  }
+  .el-radio__label {
+    width: 100%;
+    margin-top: -8px;
+    line-height: 30px;
+  }
+}
+// radio 一行一个样式 有输入框 上传头像的内容
+.radio-block-avatar {
+  width: 100%;
+  display: block;
+  .el-radio {
+    align-items: flex-start;
+    height: 100%;
+    width: 100%;
+  }
+  .el-radio__label {
+    width: 100%;
+    margin-top: -8px;
+    line-height: 30px;
+  }
+}

ui/src/styles/element-plus.scss

@@ -165,3 +165,29 @@ $primary-color: #3370ff;
 .el-popper {
   --el-popper-border-radius: 6px;
 }
+
+// table
+.el-table {
+  --el-table-header-bg-color: var(--app-layout-bg-color);
+  --el-table-text-color: var(--app-text-color);
+  font-weight: 400;
+  thead {
+    color: var(--app-text-color-secondary);
+    th {
+      font-weight: 500;
+    }
+  }
+
+  th.el-table__cell {
+    border-top: var(--el-table-border);
+  }
+  .el-table__cell {
+    padding: 12px 0;
+  }
+  .el-checkbox {
+    height: 23px;
+  }
+  tr.highlight {
+    background: var(--el-table-current-row-bg-color);
+  }
+}

ui/src/utils/application.ts

@@ -1,10 +1,3 @@
-export const defaultIcon = '/ui/favicon.ico'
-
-// 是否显示字母 / icon
-export function isAppIcon(url: String | undefined) {
-  return url === defaultIcon ? '' : url
-}
-
 export function isWorkFlow(type: string | undefined) {
   return type === 'WORK_FLOW'
 }

ui/src/utils/common.ts

@@ -46,3 +46,9 @@ export function filesize(size: number) {
   if (size < Math.pow(num, 4)) return (size / Math.pow(num, 3)).toFixed(2) + 'G' //G
   return (size / Math.pow(num, 4)).toFixed(2) + 'T' //T
 }
+
+// 头像
+export const defaultIcon = '/ui/favicon.ico'
+export function isAppIcon(url: String | undefined) {
+  return url === defaultIcon ? '' : url
+}

ui/src/views/model/component/AddParamDrawer.vue

@@ -10,8 +10,8 @@
       <h4>
         {{
           isEdit
-            ? $t('views.model.modelForm.title.editParam')
+            ? $t('common.param.editParam')
-            : $t('views.model.modelForm.title.addParam')
+            : $t('common.param.addParam')
         }}
       </h4>
     </template>

ui/src/views/tool/ToolDebugDrawer.vue

@@ -11,7 +11,7 @@
       </div>
     </template>
     <div>
-      <div v-if="form.init_field_list.length > 0">
+      <div v-if="form.init_field_list.length > 0" class="mb-16">
         <h4 class="title-decoration-1 mb-16">
           {{ $t('common.param.initParam') }}
         </h4>
@@ -48,13 +48,13 @@
                 :rules="{
                   required: item.is_required,
                   message: $t('views.tool.form.param.inputPlaceholder'),
-                  trigger: 'blur'
+                  trigger: 'blur',
                 }"
               >
                 <template #label>
                   <div class="flex">
                     <span
-                    >{{ item.name }} <span class="danger" v-if="item.is_required">*</span></span
+                      >{{ item.name }} <span class="danger" v-if="item.is_required">*</span></span
                     >
                     <el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
                   </div>
@@ -127,7 +127,7 @@ const form = ref<any>({
   code: '',
   input_field_list: [],
   init_field_list: [],
-  init_params: {}
+  init_params: {},
 })
 
 watch(debugVisible, (bool) => {
@@ -140,7 +140,7 @@ watch(debugVisible, (bool) => {
       code: '',
       input_field_list: [],
       init_field_list: [],
-      init_params: {}
+      init_params: {},
     }
   }
 })
@@ -148,7 +148,7 @@ watch(debugVisible, (bool) => {
 const submit = async (formEl: FormInstance | undefined) => {
   const validate = formEl ? formEl.validate() : Promise.resolve()
   Promise.all([dynamicsFormRef.value?.validate(), validate]).then(() => {
-    toolApi.posttoolDebug(form.value, loading).then((res) => {
+    toolApi.postToolDebug(form.value, loading).then((res) => {
       if (res.code === 500) {
         showResult.value = true
         isSuccess.value = false
@@ -167,7 +167,7 @@ const open = (data: any) => {
     data.input_field_list.forEach((item: any) => {
       form.value.debug_field_list.push({
         value: '',
-        ...item
+        ...item,
       })
     })
   }
@@ -178,7 +178,7 @@ const open = (data: any) => {
 }
 
 defineExpose({
-  open
+  open,
 })
 </script>
 <style lang="scss"></style>

ui/src/views/tool/ToolFormDrawer.vue

@@ -5,7 +5,7 @@
     </template>
     <div>
       <h4 class="title-decoration-1 mb-16">
-        {{ $t('views.tool.functionForm.title.baseInfo') }}
+        {{ $t('views.tool.form.title.baseInfo') }}
       </h4>
       <el-form
         ref="FormRef"
@@ -16,10 +16,7 @@
         v-loading="loading"
         @submit.prevent
       >
-        <el-form-item
+        <el-form-item :label="$t('views.tool.form.toolName.label')" prop="name">
-          :label="$t('views.tool.form.toolName.label')"
-          prop="name"
-        >
           <div class="flex w-full">
             <div
               v-if="form.id"
@@ -27,7 +24,8 @@
               @mouseenter="showEditIcon = true"
               @mouseleave="showEditIcon = false"
             >
-              <AppAvatar
+
+              <el-Avatar
                 v-if="isAppIcon(form.icon)"
                 :id="form.id"
                 shape="square"
@@ -35,16 +33,11 @@
                 style="background: none"
               >
                 <img :src="String(form.icon)" alt="" />
-              </AppAvatar>
+              </el-Avatar>
-              <AppAvatar
+              <el-avatar v-else class="avatar-green" shape="square" :size="32">
-                v-else-if="form.name"
+                <img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
-                :id="form.id"
+              </el-avatar>
-                :name="form.name"
+              <el-Avatar
-                pinyinColor
-                shape="square"
-                :size="32"
-              />
-              <AppAvatar
                 v-if="showEditIcon"
                 :id="form.id"
                 shape="square"
@@ -53,11 +46,11 @@
                 @click="openEditAvatar"
               >
                 <el-icon><EditPen /></el-icon>
-              </AppAvatar>
+              </el-Avatar>
             </div>
-            <AppAvatar shape="square" class="avatar-green" v-else>
+            <el-avatar v-else class="avatar-green" shape="square" :size="32">
-              <img src="@/assets/node/icon_tool.svg" style="width: 75%" alt="" />
+              <img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
-            </AppAvatar>
+            </el-avatar>
             <el-input
               v-model="form.name"
               :placeholder="$t('views.tool.form.toolName.placeholder')"
@@ -161,10 +154,7 @@
       </div>
 
       <el-table ref="inputFieldTableRef" :data="form.input_field_list" class="mb-16">
-        <el-table-column
+        <el-table-column prop="name" :label="$t('views.tool.form.paramName.label')" />
-          prop="name"
-          :label="$t('views.tool.form.paramName.label')"
-        />
         <el-table-column :label="$t('views.tool.form.dataType.label')">
           <template #default="{ row }">
             <el-tag type="info" class="info-tag">{{ row.type }}</el-tag>
@@ -177,10 +167,7 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column prop="source" :label="$t('views.tool.form.source.label')">
-          prop="source"
-          :label="$t('views.tool.form.source.label')"
-        >
           <template #default="{ row }">
             {{
               row.source === 'custom'
@@ -244,17 +231,19 @@
       </div>
     </template>
 
-    <FunctionDebugDrawer ref="FunctionDebugDrawerRef" />
+    <ToolDebugDrawer ref="ToolDebugDrawerRef" />
     <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
-    <!-- <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshInitFieldList" /> -->
+    <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshInitFieldList" />
-    <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshtool" />
+    <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshTool" />
   </el-drawer>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, watch, nextTick } from 'vue'
-import FieldFormDialog from './FieldFormDialog.vue'
+import FieldFormDialog from '@/views/tool/component/FieldFormDialog.vue'
-import FunctionDebugDrawer from './FunctionDebugDrawer.vue'
+import ToolDebugDrawer from './ToolDebugDrawer.vue'
+import UserFieldFormDialog from '@/views/tool/component/UserFieldFormDialog.vue'
+import EditAvatarDialog from '@/views/tool/component/EditAvatarDialog.vue'
 import type { toolData } from '@/api/type/tool'
 import ToolApi from '@/api/tool/tool'
 import type { FormInstance } from 'element-plus'
@@ -262,9 +251,7 @@ import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { cloneDeep } from 'lodash'
 import { PermissionType, PermissionDesc } from '@/enums/model'
 import { t } from '@/locales'
-// import UserFieldFormDialog from '@/workflow/nodes/base-node/component/UserFieldFormDialog.vue'
+import { isAppIcon } from '@/utils/common'
-import { isAppIcon } from '@/utils/application'
-import EditAvatarDialog from './EditAvatarDialog.vue'
 
 const props = defineProps({
   title: String,
@@ -272,7 +259,7 @@ const props = defineProps({
 
 const emit = defineEmits(['refresh'])
 const FieldFormDialogRef = ref()
-const FunctionDebugDrawerRef = ref()
+const ToolDebugDrawerRef = ref()
 const UserFieldFormDialogRef = ref()
 const EditAvatarDialogRef = ref()
 const initFieldTableRef = ref()
@@ -351,7 +338,7 @@ function areAllValuesNonEmpty(obj: any) {
 }
 
 function openDebug() {
-  FunctionDebugDrawerRef.value.open(form.value)
+  ToolDebugDrawerRef.value.open(form.value)
 }
 
 function deleteField(index: any) {
@@ -395,7 +382,6 @@ function refreshInitFieldList(data: any) {
 
 function refreshtool(data: any) {
   form.value.icon = data
-  // console.log(data)
 }
 
 function deleteInitField(index: any) {
@@ -410,15 +396,14 @@ const submit = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid: any) => {
     if (valid) {
-      // console.log(form.value)
       if (isEdit.value) {
-        toolApi.puttool(form.value?.id as string, form.value, loading).then((res) => {
+        ToolApi.putTool('default', form.value?.id as string, form.value, loading).then((res) => {
           MsgSuccess(t('common.editSuccess'))
           emit('refresh', res.data)
           visible.value = false
         })
       } else {
-        toolApi.posttool(form.value, loading).then((res) => {
+        ToolApi.postTool('default', form.value, loading).then((res) => {
           MsgSuccess(t('common.createSuccess'))
           emit('refresh')
           visible.value = false

ui/src/views/tool/component/EditAvatarDialog.vue

@@ -8,7 +8,7 @@
   >
     <el-radio-group v-model="radioType" class="radio-block mb-16">
       <el-radio value="default">
-        <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.default') }}</p>
+        <p>{{ $t('common.EditAvatarDialog.default') }}</p>
         <AppAvatar
           v-if="detail?.name"
           :name="detail?.name"
@@ -20,7 +20,7 @@
       </el-radio>
 
       <el-radio value="custom">
-        <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.customizeUpload') }}</p>
+        <p>{{ $t('common.EditAvatarDialog.customizeUpload') }}</p>
         <div class="flex mt-8">
           <AppAvatar
             v-if="fileURL"
@@ -40,12 +40,12 @@
             :on-change="onChange"
           >
             <el-button icon="Upload" :disabled="radioType !== 'custom'"
-              >{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.upload') }}
+              >{{ $t('common.EditAvatarDialog.upload') }}
             </el-button>
           </el-upload>
         </div>
         <div class="el-upload__tip info mt-8">
-          {{ $t('views.applicationOverview.appInfo.EditAvatarDialog.sizeTip') }}
+          {{ $t('common.EditAvatarDialog.sizeTip') }}
         </div>
       </el-radio>
     </el-radio-group>
@@ -64,7 +64,7 @@ import { ref, watch } from 'vue'
 import ToolApi from '@/api/tool/tool'
 import { cloneDeep } from 'lodash'
 import { MsgError, MsgSuccess } from '@/utils/message'
-import { defaultIcon, isAppIcon } from '@/utils/application'
+import { defaultIcon, isAppIcon } from '@/utils/common'
 import { t } from '@/locales'
 
 const emit = defineEmits(['refresh'])
@@ -96,7 +96,7 @@ const onChange = (file: any) => {
   const isLimit = file?.size / 1024 / 1024 < 10
   if (!isLimit) {
     // @ts-ignore
-    MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.fileSizeExceeded'))
+    MsgError(t('common.EditAvatarDialog.fileSizeExceeded'))
     return false
   } else {
     iconFile.value = file
@@ -111,12 +111,12 @@ function submit() {
   } else if (radioType.value === 'custom' && iconFile.value) {
     let fd = new FormData()
     fd.append('file', iconFile.value.raw)
-    toolApi.puttoolIcon(detail.value.id, fd, loading).then((res: any) => {
+    toolApi.putToolIcon(detail.value.id, fd, loading).then((res: any) => {
       emit('refresh', res.data)
       dialogVisible.value = false
     })
   } else {
-    MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.uploadImagePrompt'))
+    MsgError(t('common.EditAvatarDialog.uploadImagePrompt'))
   }
 }
 

ui/src/views/tool/component/FieldFormDialog.vue

@@ -1,10 +1,6 @@
 <template>
   <el-dialog
-    :title="
+    :title="isEdit ? $t('common.param.editParam') : $t('common.param.addParam')"
-      isEdit
-        ? $t('views.template.templateForm.title.editParam')
-        : $t('views.template.templateForm.title.addParam')
-    "
     v-model="dialogVisible"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
@@ -34,20 +30,11 @@
       </el-form-item>
       <el-form-item :label="$t('views.tool.form.source.label')">
         <el-select v-model="form.source">
-          <el-option
+          <el-option :label="$t('views.tool.form.source.reference')" value="reference" />
-            :label="$t('views.tool.form.source.reference')"
+          <el-option :label="$t('views.tool.form.source.custom')" value="custom" />
-            value="reference"
-          />
-          <el-option
-            :label="$t('views.tool.form.source.custom')"
-            value="custom"
-          />
         </el-select>
       </el-form-item>
-      <el-form-item
+      <el-form-item :label="$t('views.tool.form.required.label')" @click.prevent>
-        :label="$t('views.tool.form.required.label')"
-        @click.prevent
-      >
         <el-switch size="small" v-model="form.is_required"></el-switch>
       </el-form-item>
     </el-form>
@@ -78,7 +65,7 @@ const form = ref<any>({
   name: '',
   type: typeOptions[0],
   source: 'reference',
-  is_required: true
+  is_required: true,
 })
 
 const rules = reactive({
@@ -86,9 +73,9 @@ const rules = reactive({
     {
       required: true,
       message: t('views.tool.form.paramName.placeholder'),
-      trigger: 'blur'
+      trigger: 'blur',
-    }
+    },
-  ]
+  ],
 })
 
 const dialogVisible = ref<boolean>(false)
@@ -99,7 +86,7 @@ watch(dialogVisible, (bool) => {
       name: '',
       type: typeOptions[0],
       source: 'reference',
-      is_required: true
+      is_required: true,
     }
     isEdit.value = false
   }

ui/src/views/tool/component/InternalDescDrawer.vue

@@ -65,9 +65,8 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-
 import { cloneDeep } from 'lodash'
-import { isAppIcon } from '@/utils/application'
+import { isAppIcon } from '@/utils/common'
 const emit = defineEmits(['refresh', 'addFunction'])
 
 const visibleInternalDesc = ref(false)

ui/src/views/tool/component/UserFieldFormDialog.vue

@@ -0,0 +1,169 @@
+<template>
+  <el-dialog
+    :title="isEdit ? $t('common.param.editParam') : $t('common.param.addParam')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <DynamicsFormConstructor
+      v-model="currentRow"
+      label-position="top"
+      require-asterisk-position="right"
+      :input_type_list="inputTypeList"
+      ref="DynamicsFormConstructorRef"
+    ></DynamicsFormConstructor>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="close"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ isEdit ? $t('common.save') : $t('common.add') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { cloneDeep } from 'lodash'
+import DynamicsFormConstructor from '@/components/dynamics-form/constructor/index.vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import _ from 'lodash'
+import { t } from '@/locales'
+const emit = defineEmits(['refresh'])
+
+const DynamicsFormConstructorRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+const currentItem = ref<FormField | any>()
+const check_field = (field_list: Array<string>, obj: any) => {
+  return field_list.every((field) => _.get(obj, field, undefined) !== undefined)
+}
+const currentRow = computed(() => {
+  if (currentItem.value) {
+    const row = currentItem.value
+    switch (row.type) {
+      case 'input':
+        if (check_field(['field', 'input_type', 'label', 'required', 'attrs'], currentItem.value)) {
+          return currentItem.value
+        }
+        return {
+          attrs: row.attrs || { maxlength: 200, minlength: 0 },
+          field: row.field || row.variable,
+          input_type: 'TextInput',
+          label: row.label || row.name,
+          default_value: row.default_value,
+          required: row.required != undefined ? row.required : row.is_required,
+        }
+      case 'select':
+        if (
+          check_field(
+            ['field', 'input_type', 'label', 'required', 'option_list'],
+            currentItem.value,
+          )
+        ) {
+          return currentItem.value
+        }
+        return {
+          attrs: row.attrs || {},
+          field: row.field || row.variable,
+          input_type: 'SingleSelect',
+          label: row.label || row.name,
+          default_value: row.default_value,
+          required: row.required != undefined ? row.required : row.is_required,
+          option_list: row.option_list
+            ? row.option_list
+            : row.optionList.map((o: any) => {
+                return { key: o, value: o }
+              }),
+        }
+
+      case 'date':
+        if (
+          check_field(
+            [
+              'field',
+              'input_type',
+              'label',
+              'required',
+              'attrs.format',
+              'attrs.value-format',
+              'attrs.type',
+            ],
+            currentItem.value,
+          )
+        ) {
+          return currentItem.value
+        }
+        return {
+          field: row.field || row.variable,
+          input_type: 'DatePicker',
+          label: row.label || row.name,
+          default_value: row.default_value,
+          required: row.required != undefined ? row.required : row.is_required,
+          attrs: {
+            format: 'YYYY-MM-DD HH:mm:ss',
+            'value-format': 'YYYY-MM-DD HH:mm:ss',
+            type: 'datetime',
+          },
+        }
+      default:
+        return currentItem.value
+    }
+  } else {
+    return {
+      input_type: 'TextInput',
+      required: false,
+      attrs: { maxlength: 200, minlength: 0 },
+      show_default_value: true,
+    }
+  }
+})
+const currentIndex = ref(null)
+const inputTypeList = ref([
+  { label: t('dynamicsForm.input_type_list.TextInput'), value: 'TextInputConstructor' },
+  { label: t('dynamicsForm.input_type_list.PasswordInput'), value: 'PasswordInputConstructor' },
+  { label: t('dynamicsForm.input_type_list.SingleSelect'), value: 'SingleSelectConstructor' },
+  { label: t('dynamicsForm.input_type_list.MultiSelect'), value: 'MultiSelectConstructor' },
+  { label: t('dynamicsForm.input_type_list.RadioCard'), value: 'RadioCardConstructor' },
+  { label: t('dynamicsForm.input_type_list.DatePicker'), value: 'DatePickerConstructor' },
+  { label: t('dynamicsForm.input_type_list.SwitchInput'), value: 'SwitchInputConstructor' },
+])
+
+const dialogVisible = ref<boolean>(false)
+
+const open = (row: any, index: any) => {
+  dialogVisible.value = true
+
+  if (row) {
+    isEdit.value = true
+    currentItem.value = cloneDeep(row)
+    currentIndex.value = index
+  } else {
+    currentItem.value = null
+  }
+}
+
+const close = () => {
+  dialogVisible.value = false
+  isEdit.value = false
+  currentIndex.value = null
+  currentItem.value = null as any
+}
+
+const submit = async () => {
+  const formEl = DynamicsFormConstructorRef.value
+  if (!formEl) return
+  await formEl.validate().then(() => {
+    emit('refresh', formEl?.getData(), currentIndex.value)
+    isEdit.value = false
+    currentItem.value = null as any
+    currentIndex.value = null
+  })
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/tool/index.vue

@@ -74,7 +74,16 @@
             <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
               <CardBox :title="item.name" :description="item.desc" class="cursor">
                 <template #icon>
-                  <el-avatar class="avatar-green" shape="square" :size="32">
+                  <el-avatar
+                    v-if="isAppIcon(item?.icon)"
+                    shape="square"
+                    :size="32"
+                    style="background: none"
+                    class="mr-8"
+                  >
+                    <img :src="item?.icon" alt="" />
+                  </el-avatar>
+                  <el-avatar v-else class="avatar-green" shape="square" :size="32">
                     <img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
                   </el-avatar>
                 </template>
@@ -178,8 +187,9 @@ import ToolApi from '@/api/tool/tool'
 import useStore from '@/stores'
 import { MsgConfirm } from '@/utils/message'
 import InitParamDrawer from '@/views/tool/component/InitParamDrawer.vue'
-import ToolFormDrawer from './component/ToolFormDrawer.vue'
+import ToolFormDrawer from './ToolFormDrawer.vue'
 import { t } from '@/locales'
+import { isAppIcon } from '@/utils/common'
 
 const { folder, user } = useStore()
 
@@ -267,7 +277,7 @@ async function changeState(row: any) {
       const obj = {
         is_active: !row.is_active,
       }
-      ToolApi.putToolLib('default', row.id, obj, changeStateloading)
+      ToolApi.putTool('default', row.id, obj, changeStateloading)
         .then(() => {
           return true
         })
@@ -290,7 +300,7 @@ async function changeState(row: any) {
     const obj = {
       is_active: !row.is_active,
     }
-    ToolApi.putToolLib('default', row.id, obj, changeStateloading)
+    ToolApi.putTool('default', row.id, obj, changeStateloading)
       .then(() => {
         return true
       })