Use DynamicIcon and IconPicker for consistent icon handling

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: ": "路由未找到："
 }

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,18 +115,11 @@
           />
           <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>
         </n-form-item>
-        <n-form-item :label="t('Status')" path="status">
-          <n-select
-            v-model:value="toolForm.status"
-            :options="statusOptions"
-            :placeholder="t('Select status')"
-          />
-        </n-form-item>
       </n-form>
       <template #action>
         <n-space>
@@ -143,6 +136,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
@@ -154,7 +149,6 @@ interface Tool {
   type?: 'route' | 'url'  // 工具类型：内部路由或外部URL
   routeName?: string      // 路由名（当type为route时使用）
   url?: string            // URL路径（当type为url时使用）
-  status?: 'active' | 'inactive'
   order?: number
 }
 
@@ -211,12 +205,11 @@ const toolForm = ref<Partial<Tool>>({
   name: '',
   description: '',
   category: '',
-  icon: 'fa fa-cog',
+  icon: 'tool',
-  color: '#6366f1',
+  color: '#1fc76f',
   type: 'route',
   routeName: '',
-  url: '',
+  url: ''
-  status: 'active'
 })
 
 const toolFormRules: FormRules = {
@@ -256,15 +249,10 @@ const dynamicFormRules = computed(() => {
 })
 
 const toolTypeOptions = [
-  { label: t('Internal Route'), value: 'route' },
+  { label: t('Route'), value: 'route' },
   { label: t('URL'), value: 'url' }
 ]
 
-const statusOptions = [
-  { label: t('Active'), value: 'active' },
-  { label: t('Inactive'), value: 'inactive' }
-]
-
 // 获取所有可用的路由名（从路由配置中提取）
 const routeNameOptions = computed(() => {
   const routes = router.getRoutes()
@@ -332,7 +320,6 @@ function handleDrop(event: DragEvent, dropIndexValue: number) {
 
   tools.value = newTools
   saveTools(tools.value)
-  message.success(t('Tool order updated'))
   
   resetDragState()
 }
@@ -354,12 +341,11 @@ function handleAddTool() {
     name: '',
     description: '',
     category: '',
-    icon: 'fa fa-cog',
+    icon: 'tool',
-    color: '#6366f1',
+    color: '#1fc76f',
     type: 'route',
     routeName: '',
-    url: '',
+    url: ''
-    status: 'active'
   }
   showToolModal.value = true
 }
@@ -421,12 +407,11 @@ 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,
         url: toolForm.value.type === 'url' ? toolForm.value.url : undefined,
-        status: toolForm.value.status || 'active',
         order: tools.value.length + 1
       }
       tools.value.push(newTool)
@@ -724,8 +709,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;
 }