From 49ae444f7abcd14e0288ca122483e4ec5fc1af5d Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Wed, 19 Nov 2025 01:26:51 +0800
Subject: [PATCH] Use DynamicIcon and IconPicker for consistent icon handling

---
 apps/jingrow/frontend/src/locales/zh-CN.json  | 30 +++++++++++++++++--
 .../frontend/src/views/tools/Tools.vue        | 23 +++++++-------
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/apps/jingrow/frontend/src/locales/zh-CN.json b/apps/jingrow/frontend/src/locales/zh-CN.json
index 039b6ad..a3acb00 100644
--- a/apps/jingrow/frontend/src/locales/zh-CN.json
+++ b/apps/jingrow/frontend/src/locales/zh-CN.json
@@ -1055,6 +1055,32 @@
   "Are you sure you want to delete agent \"{0}\"? This action cannot be undone.": "确定要删除智能体 \"{0}\" 吗？此操作不可恢复。",
   "Node deleted successfully": "节点删除成功",
   "Agent deleted successfully": "智能体删除成功",
-  "Confirm Delete": "确认删除",
-  "Delete failed": "删除失败"
+  
+  "Tools": "工具",
+  "Add Tool": "添加工具",
+  "No Tools Yet": "暂无工具",
+  "Get started by adding your first tool service": "开始添加您的第一个工具服务",
+  "Add Your First Tool": "添加第一个工具",
+  "Loading tools...": "加载工具中...",
+  "Edit Tool": "编辑工具",
+  "Tool Name": "工具名称",
+  "Enter tool name": "请输入工具名称",
+  "Enter tool description": "请输入工具描述",
+  "Enter category": "请输入分类",
+  "Tool Type": "工具类型",
+  "Select tool type": "请选择工具类型",
+  "Enter or select route name, e.g.: Dashboard, Tools": "请输入或选择路由名，例如：Dashboard, Tools",
+  "Use route name for internal navigation (recommended)": "使用路由名进行内部导航（推荐）",
+  "Enter URL path": "请输入URL路径",
+  "Internal path: /example": "内部路径：/example",
+  "External link: starts with http:// or https://": "外部链接：以 http:// 或 https:// 开头",
+  "Please enter tool name": "请输入工具名称",
+  "Please select tool type": "请选择工具类型",
+  "Please enter route name": "请输入路由名",
+  "Please enter URL": "请输入URL",
+  "Tool updated successfully": "工具更新成功",
+  "Tool added successfully": "工具添加成功",
+  "Are you sure you want to delete tool": "确定要删除工具",
+  "Tool deleted successfully": "工具删除成功",
+  "Route not found: ": "路由未找到："
 }
diff --git a/apps/jingrow/frontend/src/views/tools/Tools.vue b/apps/jingrow/frontend/src/views/tools/Tools.vue
index e49e62e..91d4c64 100644
--- a/apps/jingrow/frontend/src/views/tools/Tools.vue
+++ b/apps/jingrow/frontend/src/views/tools/Tools.vue
@@ -38,7 +38,7 @@
         >
           <div class="tool-card-content" @click="handleOpenTool(tool)">
             <div class="tool-icon" :style="{ backgroundColor: tool.color || '#1fc76f' }">
-              <i :class="tool.icon || 'fa fa-cog'"></i>
+              <DynamicIcon :name="tool.icon || 'tool'" :size="32" color="white" />
             </div>
             <div class="tool-name">{{ tool.name }}</div>
           </div>
@@ -79,7 +79,7 @@
           <n-input v-model:value="toolForm.category" :placeholder="t('Enter category')" />
         </n-form-item>
         <n-form-item :label="t('Icon')" path="icon">
-          <n-input v-model:value="toolForm.icon" :placeholder="t('e.g., fa fa-cog')" />
+          <IconPicker v-model="toolForm.icon" />
         </n-form-item>
         <n-form-item :label="t('Color')" path="color">
           <n-color-picker v-model:value="toolForm.color" />
@@ -115,7 +115,7 @@
           />
           <template #feedback>
             <n-text depth="3" style="font-size: 12px;">
-              {{ t('Internal path: /app/knowledge-base') }} <br>
+              {{ t('Internal path: /example') }} <br>
               {{ t('External link: starts with http:// or https://') }}
             </n-text>
           </template>
@@ -143,6 +143,8 @@ import { ref, computed, onMounted, h } from 'vue'
 import { useRouter } from 'vue-router'
 import { NModal, NForm, NFormItem, NInput, NSelect, NAutoComplete, NColorPicker, NButton, NSpace, NText, NDropdown, useDialog, useMessage, type FormInst, type FormRules, type DropdownOption } from 'naive-ui'
 import { t } from '../../shared/i18n'
+import DynamicIcon from '../../core/components/DynamicIcon.vue'
+import IconPicker from '../../core/components/IconPicker.vue'
 
 interface Tool {
   id: string
@@ -211,8 +213,8 @@ const toolForm = ref<Partial<Tool>>({
   name: '',
   description: '',
   category: '',
-  icon: 'fa fa-cog',
-  color: '#6366f1',
+  icon: 'tool',
+  color: '#1fc76f',
   type: 'route',
   routeName: '',
   url: '',
@@ -256,7 +258,7 @@ const dynamicFormRules = computed(() => {
 })
 
 const toolTypeOptions = [
-  { label: t('Internal Route'), value: 'route' },
+  { label: t('Route'), value: 'route' },
   { label: t('URL'), value: 'url' }
 ]
 
@@ -332,7 +334,6 @@ function handleDrop(event: DragEvent, dropIndexValue: number) {
 
   tools.value = newTools
   saveTools(tools.value)
-  message.success(t('Tool order updated'))
   
   resetDragState()
 }
@@ -354,8 +355,8 @@ function handleAddTool() {
     name: '',
     description: '',
     category: '',
-    icon: 'fa fa-cog',
-    color: '#6366f1',
+    icon: 'tool',
+    color: '#1fc76f',
     type: 'route',
     routeName: '',
     url: '',
@@ -421,7 +422,7 @@ function handleSaveTool() {
         name: toolForm.value.name!,
         description: toolForm.value.description,
         category: toolForm.value.category,
-        icon: toolForm.value.icon || 'fa fa-cog',
+        icon: toolForm.value.icon || 'tool',
         color: toolForm.value.color || '#1fc76f',
         type: toolForm.value.type || 'route',
         routeName: toolForm.value.type === 'route' ? toolForm.value.routeName : undefined,
@@ -724,8 +725,6 @@ function handleMenuSelect(key: string, tool: Tool) {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
-  font-size: 32px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   transition: transform 0.2s;
 }