From 47517a1e557e05b2526fd3a869be3c94ad993618 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Fri, 21 Nov 2025 21:12:01 +0800
Subject: [PATCH] Improve tool UI consistency and default styling

---
 apps/jingrow/frontend/src/locales/zh-CN.json  |  2 ++
 apps/jingrow/frontend/src/views/Tools.vue     | 26 +++++++++----------
 .../frontend/src/views/dev/ToolDetail.vue     |  2 +-
 .../src/views/dev/ToolMarketplace.vue         |  2 +-
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/apps/jingrow/frontend/src/locales/zh-CN.json b/apps/jingrow/frontend/src/locales/zh-CN.json
index 17a2655..7503b84 100644
--- a/apps/jingrow/frontend/src/locales/zh-CN.json
+++ b/apps/jingrow/frontend/src/locales/zh-CN.json
@@ -1077,6 +1077,8 @@
   "Internal path: /example": "内部路径：/example",
   "External link: starts with http:// or https://": "外部链接：以 http:// 或 https:// 开头",
   "Please enter tool name": "请输入工具名称",
+  "Please enter tool title": "请输入工具标题",
+  "Enter tool title": "请输入工具标题",
   "Please select tool type": "请选择工具类型",
   "Please enter route name": "请输入路由名",
   "Please enter URL": "请输入URL",
diff --git a/apps/jingrow/frontend/src/views/Tools.vue b/apps/jingrow/frontend/src/views/Tools.vue
index d072ba5..02ed030 100644
--- a/apps/jingrow/frontend/src/views/Tools.vue
+++ b/apps/jingrow/frontend/src/views/Tools.vue
@@ -45,14 +45,14 @@
           <div class="tool-card-content" @click="handleOpenTool(tool)">
             <div 
               class="tool-icon" 
-              :class="{ 'default-tool-icon': tool.isDefault }"
-              :style="tool.isDefault 
+              :class="{ 'default-tool-icon': tool.isDefault || !tool.color || tool.color === '' }"
+              :style="(tool.isDefault || !tool.color || tool.color === '')
                 ? { borderColor: tool.color || '#e5e7eb' } 
-                : { backgroundColor: tool.color || '#1fc76f' }"
+                : { backgroundColor: tool.color }"
             >
-              <DynamicIcon :name="tool.icon || 'tool'" :size="32" :color="tool.isDefault ? '#64748b' : 'white'" />
+              <DynamicIcon :name="tool.icon || 'tool'" :size="32" :color="(tool.isDefault || !tool.color || tool.color === '') ? '#64748b' : 'white'" />
             </div>
-            <div class="tool-name" :class="{ 'default-tool-name': tool.isDefault }">{{ tool.name }}</div>
+            <div class="tool-name" :class="{ 'default-tool-name': tool.isDefault || !tool.color || tool.color === '' }">{{ tool.name }}</div>
           </div>
           <n-dropdown
             trigger="click"
@@ -87,12 +87,12 @@
           >
             <div 
               class="hidden-tool-icon" 
-              :class="{ 'default-tool-icon': tool.isDefault }"
-              :style="tool.isDefault 
+              :class="{ 'default-tool-icon': tool.isDefault || !tool.color || tool.color === '' }"
+              :style="(tool.isDefault || !tool.color || tool.color === '')
                 ? { borderColor: tool.color || '#e5e7eb' } 
-                : { backgroundColor: tool.color || '#1fc76f' }"
+                : { backgroundColor: tool.color }"
             >
-              <DynamicIcon :name="tool.icon || 'tool'" :size="24" :color="tool.isDefault ? '#64748b' : 'white'" />
+              <DynamicIcon :name="tool.icon || 'tool'" :size="24" :color="(tool.isDefault || !tool.color || tool.color === '') ? '#64748b' : 'white'" />
             </div>
             <div class="hidden-tool-name">{{ tool.name }}</div>
             <button class="show-tool-btn" @click.stop="handleShowDefaultTool(tool.id)">
@@ -107,8 +107,8 @@
     <!-- 添加/编辑工具对话框 -->
     <n-modal v-model:show="showToolModal" preset="dialog" :title="editingTool ? t('Edit Tool') : t('Add Tool')">
       <n-form :model="toolForm" :rules="toolFormRules" label-width="100" ref="toolFormRef">
-        <n-form-item :label="t('Tool Name')" path="name">
-          <n-input v-model:value="toolForm.name" :placeholder="t('Enter tool name')" />
+        <n-form-item :label="t('Title')" path="name">
+          <n-input v-model:value="toolForm.name" :placeholder="t('Enter tool title')" />
         </n-form-item>
         <n-form-item :label="t('Description')" path="description">
           <n-input
@@ -202,7 +202,7 @@ const toolForm = ref<Partial<Tool>>({
 })
 
 const toolFormRules: FormRules = {
-  name: [{ required: true, message: t('Please enter tool name') }],
+  name: [{ required: true, message: t('Please enter tool title') }],
   routeName: [
     { 
       required: true, 
@@ -332,7 +332,7 @@ function handleEditTool(tool: Tool) {
 function handleSaveTool() {
   // 先手动验证必填字段
   if (!toolForm.value.name || !toolForm.value.name.trim()) {
-    message.error(t('Please enter tool name'))
+    message.error(t('Please enter tool title'))
     return
   }
   
diff --git a/apps/jingrow/frontend/src/views/dev/ToolDetail.vue b/apps/jingrow/frontend/src/views/dev/ToolDetail.vue
index b76d33e..6903a38 100644
--- a/apps/jingrow/frontend/src/views/dev/ToolDetail.vue
+++ b/apps/jingrow/frontend/src/views/dev/ToolDetail.vue
@@ -333,7 +333,7 @@ async function performInstall() {
           description: tool.value.description,
           category: tool.value.category,
           icon: tool.value.icon,
-          color: tool.value.color || '#e5e7eb',
+          color: tool.value.color || undefined, // 如果为空，不设置默认值，使用 undefined
           type: 'route' as const,
           routeName: tool.value.route_name, // 可能不存在，会在 addUserTool 中自动生成
           isDefault: false,
diff --git a/apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue b/apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue
index 9894d4f..b494507 100644
--- a/apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue
+++ b/apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue
@@ -346,7 +346,7 @@ async function performInstall(tool: any) {
           description: tool.description,
           category: tool.category,
           icon: tool.icon,
-          color: tool.color || '#e5e7eb',
+          color: tool.color || undefined, // 如果为空，不设置默认值，使用 undefined
           type: 'route' as const,
           routeName: tool.route_name, // 可能不存在，会在 addUserTool 中自动生成
           isDefault: false,