fix: icon issue

ui/src/components/folder-tree/index.vue

@@ -19,7 +19,7 @@
             style="font-size: 18px"
             class="color-primary"
           ></AppIcon>
-          <span class="ml-8 lighter">{{ shareTitle }}</span>
+          <span class="ml-8">{{ shareTitle }}</span>
         </div>
       </div>
 

ui/src/views/application/component/McpServersDialog.vue

@@ -29,9 +29,7 @@
         :rules="[
           {
             required: true,
-            message:
+            message: $t('common.selectPlaceholder') + ` MCP ${$t('views.tool.title')}`,
-              $t('common.selectPlaceholder') +
-              ` MCP ${$t('views.tool.title')}`,
           },
         ]"
         prop="mcp_tool_id"
@@ -48,8 +46,17 @@
             :value="mcpTool.id"
           >
             <div class="flex align-center">
-              <el-avatar shape="square" :size="20" class="mr-8">
+              <el-avatar
-                <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt=""/>
+                v-if="mcpTool?.icon"
+                shape="square"
+                :size="20"
+                style="background: none"
+                class="mr-8"
+              >
+                <img :src="resetUrl(mcpTool?.icon)" alt="" />
+              </el-avatar>
+              <el-avatar v-else shape="square" :size="20" class="mr-8">
+                <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
               </el-avatar>
               <span>{{ mcpTool.name }}</span>
               <el-tag v-if="mcpTool.scope === 'SHARED'" type="info" class="info-tag ml-8 mt-4">
@@ -96,9 +103,10 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import {ref, watch} from 'vue'
+import { ref, watch } from 'vue'
-import {MsgError} from "@/utils/message.ts";
+import { MsgError } from '@/utils/message.ts'
-import {t} from "@/locales";
+import { t } from '@/locales'
+import { resetUrl } from '@/utils/common'
 
 const emit = defineEmits(['refresh'])
 
@@ -142,9 +150,8 @@ function mcpSourceChange() {
   }
 }
 
-
 const open = (data: any, selectOptions: any) => {
-  form.value = {...form.value, ...data}
+  form.value = { ...form.value, ...data }
   if (data.mcp_servers) {
     form.value.mcp_source = 'custom'
   } else if (data.mcp_tool_id) {
@@ -173,6 +180,6 @@ const submit = () => {
   })
 }
 
-defineExpose({open})
+defineExpose({ open })
 </script>
 <style lang="scss" scoped></style>

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

@@ -13,7 +13,7 @@
               style="font-size: 18px"
               class="color-primary"
             ></AppIcon>
-            <span class="ml-8 lighter">{{ $t('views.shared.shared_model') }}</span>
+            <span class="ml-8">{{ $t('views.shared.shared_model') }}</span>
           </div>
         </div>
         <div

ui/src/views/tool/McpToolFormDrawer.vue

@@ -109,7 +109,7 @@
         </el-button>
       </div>
     </template>
-    <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshTool" />
+    <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshTool" iconType="MCP" />
   </el-drawer>
 </template>
 

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

@@ -9,9 +9,7 @@
     <el-radio-group v-model="radioType" class="radio-block mb-16">
       <el-radio value="default">
         <p>{{ $t('common.EditAvatarDialog.default') }}</p>
-        <el-avatar class="avatar-green" shape="square" :size="32">
+        <ToolIcon :size="32" :type="iconType" />
-          <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
-        </el-avatar>
       </el-radio>
 
       <el-radio value="custom">
@@ -55,15 +53,17 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import {computed, ref, watch} from 'vue'
+import { computed, 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/common'
+import { isAppIcon } from '@/utils/common'
 import { t } from '@/locales'
-import {loadSharedApi} from "@/utils/dynamics-api/shared-api.ts";
+import { loadSharedApi } from '@/utils/dynamics-api/shared-api.ts'
-import {useRoute} from "vue-router";
+import { useRoute } from 'vue-router'
 
+const props = defineProps<{
+  iconType?: string
+}>()
 const emit = defineEmits(['refresh'])
 const route = useRoute()
 
@@ -122,7 +122,8 @@ function submit() {
     const fd = new FormData()
     fd.append('file', iconFile.value.raw)
     loadSharedApi({ type: 'tool', systemType: apiType.value })
-      .putToolIcon(detail.value.id, fd, loading).then((res: any) => {
+      .putToolIcon(detail.value.id, fd, loading)
+      .then((res: any) => {
         emit('refresh', res.data)
         dialogVisible.value = false
       })

ui/src/workflow/nodes/ai-chat-node/index.vue

@@ -177,7 +177,16 @@
           <template v-for="(item, index) in chat_data.tool_ids" :key="index">
             <div class="flex-between border border-r-6 white-bg mb-4" style="padding: 5px 8px">
               <div class="flex align-center" style="line-height: 20px">
-                <ToolIcon type="CUSTOM" class="mr-8" :size="20" />
+                <el-avatar
+                  v-if="relatedObject(toolSelectOptions, item, 'id')?.icon"
+                  shape="square"
+                  :size="20"
+                  style="background: none"
+                  class="mr-8"
+                >
+                  <img :src="resetUrl(relatedObject(toolSelectOptions, item, 'id')?.icon)" alt="" />
+                </el-avatar>
+                <ToolIcon v-else class="mr-8" :size="20" />
 
                 <div class="ellipsis" :title="relatedObject(toolSelectOptions, item, 'id')?.name">
                   {{ relatedObject(toolSelectOptions, item, 'id')?.name }}
@@ -254,10 +263,12 @@ import { isLastNode } from '@/workflow/common/data'
 import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
 import { t } from '@/locales'
 import ReasoningParamSettingDialog from '@/views/application/component/ReasoningParamSettingDialog.vue'
+import ToolDialog from '@/views/application/component/ToolDialog.vue'
 import McpServersDialog from '@/views/application/component/McpServersDialog.vue'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
 import { useRoute } from 'vue-router'
-import ToolDialog from '@/views/application/component/ToolDialog.vue'
+
+import { resetUrl } from '@/utils/common'
 import { relatedObject } from '@/utils/array.ts'
 const getApplicationDetail = inject('getApplicationDetail') as any
 const route = useRoute()

ui/src/workflow/nodes/mcp-node/index.vue

@@ -53,10 +53,22 @@
               :label="mcpTool.name"
               :value="mcpTool.id"
             >
-              <span>{{ mcpTool.name }}</span>
+              <div class="flex align-center">
-              <el-tag v-if="mcpTool.scope === 'SHARED'" type="info" class="info-tag ml-8 mt-4">
+                <el-avatar
-                {{ t('views.shared.title') }}
+                  v-if="mcpTool?.icon"
-              </el-tag>
+                  shape="square"
+                  :size="20"
+                  style="background: none"
+                  class="mr-8"
+                >
+                  <img :src="resetUrl(mcpTool?.icon)" alt="" />
+                </el-avatar>
+                <ToolIcon v-else :size="20" :type="mcpTool?.tool_type" class="mr-8" />
+                <span>{{ mcpTool.name }}</span>
+                <el-tag v-if="mcpTool.scope === 'SHARED'" type="info" class="info-tag ml-8">
+                  {{ t('views.shared.title') }}
+                </el-tag>
+              </div>
             </el-option>
           </el-select>
         </el-form-item>
@@ -246,10 +258,9 @@ import TooltipLabel from '@/components/dynamics-form/items/label/TooltipLabel.vu
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
 import { useRoute } from 'vue-router'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
-import useStore from '@/stores'
+import { resetUrl } from '@/utils/common'
 
 const props = defineProps<{ nodeModel: any }>()
-const { user } = useStore()
 
 const route = useRoute()
 const {