From 9400cf9c27b80a10b25697bdf975d33fb85b5a85 Mon Sep 17 00:00:00 2001
From: renjianbo <18691577328@163.com>
Date: Fri, 1 May 2026 22:51:21 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E5=B8=82=E5=9C=BA=20UI=20=E2=80=94=20=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E8=A7=86=E5=9B=BE=E3=80=81=E7=BB=9F=E8=AE=A1=E6=A6=82?=
 =?UTF-8?q?=E8=A7=88=E3=80=81=E5=88=86=E6=AD=A5=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增卡片/表格视图切换
- 顶部统计概览（全部/内置/代码/HTTP 工具数量）
- 创建/编辑表单改为三步引导（基本信息 → 实现配置 → 参数定义）
- 改进测试结果面板（深色 JSON 展示、状态码、耗时显示）
- 统一的视觉风格，更好的交互反馈

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/views/Tools.vue | 964 +++++++++++++++++++++++++----------
 1 file changed, 708 insertions(+), 256 deletions(-)

diff --git a/frontend/src/views/Tools.vue b/frontend/src/views/Tools.vue
index 4b1fc6b..4a3c2c3 100644
--- a/frontend/src/views/Tools.vue
+++ b/frontend/src/views/Tools.vue
@@ -1,214 +1,373 @@
 <template>
   <MainLayout>
     <div class="tools-page">
-      <!-- 工具栏 -->
-      <div class="toolbar">
-        <div class="toolbar-left">
-          <el-input
-            v-model="searchQuery"
-            placeholder="搜索工具名称或描述..."
-            clearable
-            style="width: 280px"
-            @input="handleSearch"
-          >
-            <template #prefix>
-              <el-icon><Search /></el-icon>
-            </template>
-          </el-input>
-          <el-select v-model="categoryFilter" placeholder="全部分类" clearable style="width: 160px" @change="fetchTools">
-            <el-option
-              v-for="cat in categories"
-              :key="cat"
-              :label="cat"
-              :value="cat"
-            />
-          </el-select>
-          <el-radio-group v-model="scopeFilter" @change="fetchTools">
-            <el-radio-button value="public">公开工具</el-radio-button>
-            <el-radio-button value="mine">我的工具</el-radio-button>
-            <el-radio-button value="all">全部</el-radio-button>
-          </el-radio-group>
-        </div>
-        <div class="toolbar-right">
-          <el-button type="primary" @click="showCreateDialog">
-            <el-icon><Plus /></el-icon>
-            新建工具
-          </el-button>
-        </div>
+      <!-- 页面标题 -->
+      <div class="page-title">
+        <h2>🔧 工具市场</h2>
+        <p class="title-desc">浏览、创建和测试工具，供 Agent 在工作流和对话中调用</p>
       </div>
 
-      <!-- 工具列表 -->
-      <el-table :data="tools" v-loading="loading" stripe style="width: 100%">
-        <el-table-column prop="name" label="名称" min-width="140">
-          <template #default="{ row }">
-            <div class="tool-name">
-              <span class="name-text">{{ row.name }}</span>
-              <el-tag v-if="row.implementation_type === 'builtin'" size="small" type="info">内置</el-tag>
-              <el-tag v-else-if="row.implementation_type === 'code'" size="small" type="warning">代码</el-tag>
-              <el-tag v-else-if="row.implementation_type === 'http'" size="small" type="success">HTTP</el-tag>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
-        <el-table-column prop="category" label="分类" width="120">
-          <template #default="{ row }">
-            <el-tag v-if="row.category" size="small" effect="plain">{{ row.category }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="use_count" label="使用次数" width="100" align="center" />
-        <el-table-column label="操作" width="240" fixed="right">
-          <template #default="{ row }">
-            <el-button size="small" @click="showTestDialog(row)">测试</el-button>
-            <el-button
-              v-if="row.implementation_type !== 'builtin'"
-              size="small"
-              @click="showEditDialog(row)"
-            >编辑</el-button>
-            <el-popconfirm
-              v-if="row.implementation_type !== 'builtin'"
-              title="确定删除此工具？"
-              @confirm="handleDelete(row)"
+      <!-- 统计概览 -->
+      <el-row :gutter="16" class="stats-row">
+        <el-col :span="6">
+          <el-card shadow="never" class="stat-card">
+            <div class="stat-value">{{ tools.length }}</div>
+            <div class="stat-label">全部工具</div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never" class="stat-card">
+            <div class="stat-value">{{ builtinCount }}</div>
+            <div class="stat-label">内置工具</div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never" class="stat-card">
+            <div class="stat-value">{{ codeCount }}</div>
+            <div class="stat-label">代码工具</div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never" class="stat-card">
+            <div class="stat-value">{{ httpCount }}</div>
+            <div class="stat-label">HTTP 工具</div>
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <!-- 工具栏 -->
+      <el-card shadow="never" class="toolbar-card">
+        <div class="toolbar">
+          <div class="toolbar-left">
+            <el-input
+              v-model="searchQuery"
+              placeholder="搜索工具名称或描述..."
+              clearable
+              style="width: 260px"
+              @input="handleSearch"
             >
-              <template #reference>
-                <el-button size="small" type="danger">删除</el-button>
+              <template #prefix>
+                <el-icon><Search /></el-icon>
               </template>
-            </el-popconfirm>
-          </template>
-        </el-table-column>
-      </el-table>
+            </el-input>
+            <el-select v-model="categoryFilter" placeholder="全部分类" clearable style="width: 150px" @change="fetchTools">
+              <el-option v-for="cat in categories" :key="cat" :label="cat" :value="cat" />
+            </el-select>
+            <el-radio-group v-model="scopeFilter" @change="fetchTools" size="small">
+              <el-radio-button value="public">公开</el-radio-button>
+              <el-radio-button value="mine">我的</el-radio-button>
+              <el-radio-button value="all">全部</el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="toolbar-right">
+            <el-button-group>
+              <el-button :type="viewMode === 'card' ? 'primary' : 'default'" size="small" @click="viewMode = 'card'">
+                <el-icon><Grid /></el-icon>
+              </el-button>
+              <el-button :type="viewMode === 'table' ? 'primary' : 'default'" size="small" @click="viewMode = 'table'">
+                <el-icon><List /></el-icon>
+              </el-button>
+            </el-button-group>
+            <el-button type="primary" @click="showCreateDialog">
+              <el-icon><Plus /></el-icon>
+              新建工具
+            </el-button>
+          </div>
+        </div>
+      </el-card>
 
-      <!-- 空状态 -->
-      <el-empty v-if="!loading && tools.length === 0" description="暂无工具">
-        <el-button type="primary" @click="showCreateDialog">创建第一个工具</el-button>
-      </el-empty>
+      <!-- 卡片视图 -->
+      <template v-if="viewMode === 'card'">
+        <div v-loading="loading" class="tool-grid">
+          <el-card
+            v-for="tool in tools"
+            :key="tool.id"
+            shadow="hover"
+            class="tool-card"
+            @click="showTestDialog(tool)"
+          >
+            <div class="card-top">
+              <el-tag
+                :type="tagType(tool.implementation_type)"
+                size="small"
+                effect="dark"
+                class="type-badge"
+              >
+                {{ typeLabel(tool.implementation_type) }}
+              </el-tag>
+              <el-tag v-if="tool.is_public" size="small" type="success" effect="plain" class="public-badge">公开</el-tag>
+            </div>
+            <div class="card-body">
+              <h3 class="card-title">{{ tool.name }}</h3>
+              <p class="card-desc">{{ tool.description || '暂无描述' }}</p>
+              <div class="card-meta">
+                <span v-if="tool.category" class="meta-item">
+                  <el-icon><Folder /></el-icon> {{ tool.category }}
+                </span>
+                <span class="meta-item">
+                  <el-icon><TopRight /></el-icon> 使用 {{ tool.use_count || 0 }} 次
+                </span>
+              </div>
+            </div>
+            <div class="card-actions" @click.stop>
+              <el-button size="small" @click="showTestDialog(tool)">测试</el-button>
+              <el-button
+                v-if="tool.implementation_type !== 'builtin'"
+                size="small"
+                @click="showEditDialog(tool)"
+              >编辑</el-button>
+              <el-popconfirm
+                v-if="tool.implementation_type !== 'builtin'"
+                title="确定删除此工具？"
+                @confirm="handleDelete(tool)"
+              >
+                <template #reference>
+                  <el-button size="small" type="danger" plain>删除</el-button>
+                </template>
+              </el-popconfirm>
+            </div>
+          </el-card>
+          <el-empty v-if="!loading && tools.length === 0" :description="'暂无' + scopeLabel + '工具'" class="empty-state">
+            <el-button type="primary" @click="showCreateDialog">创建第一个工具</el-button>
+          </el-empty>
+        </div>
+      </template>
 
-      <!-- 创建/编辑对话框 -->
+      <!-- 表格视图 -->
+      <template v-else>
+        <el-table :data="tools" v-loading="loading" stripe style="width: 100%" @row-click="showTestDialog">
+          <el-table-column prop="name" label="名称" min-width="140">
+            <template #default="{ row }">
+              <div class="tool-name-cell">
+                <el-tag
+                  :type="tagType(row.implementation_type)"
+                  size="small"
+                  effect="dark"
+                  class="type-badge"
+                >
+                  {{ typeLabel(row.implementation_type) }}
+                </el-tag>
+                <span class="name-text">{{ row.name }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+          <el-table-column prop="category" label="分类" width="120">
+            <template #default="{ row }">
+              <el-tag v-if="row.category" size="small" effect="plain">{{ row.category }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="use_count" label="使用次数" width="90" align="center" />
+          <el-table-column label="操作" width="230" fixed="right">
+            <template #default="{ row }">
+              <el-button size="small" @click.stop="showTestDialog(row)">测试</el-button>
+              <el-button
+                v-if="row.implementation_type !== 'builtin'"
+                size="small"
+                @click.stop="showEditDialog(row)"
+              >编辑</el-button>
+              <el-popconfirm
+                v-if="row.implementation_type !== 'builtin'"
+                title="确定删除此工具？"
+                @confirm="handleDelete(row)"
+              >
+                <template #reference>
+                  <el-button size="small" type="danger" plain @click.stop="">删除</el-button>
+                </template>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-empty v-if="!loading && tools.length === 0" :description="'暂无' + scopeLabel + '工具'" style="margin-top: 40px">
+          <el-button type="primary" @click="showCreateDialog">创建第一个工具</el-button>
+        </el-empty>
+      </template>
+
+      <!-- ── 创建/编辑对话框 ── -->
       <el-dialog
         v-model="formDialogVisible"
         :title="isEditing ? '编辑工具' : '新建工具'"
-        width="700px"
+        width="720px"
         :close-on-click-modal="false"
+        destroy-on-close
       >
+        <el-steps :active="formStep" align-center simple style="margin-bottom: 24px">
+          <el-step title="基本信息" />
+          <el-step :title="'实现配置 (' + (form.implementation_type === 'code' ? 'Python' : 'HTTP') + ')'" />
+          <el-step title="参数定义" />
+        </el-steps>
+
         <el-form :model="form" label-position="top" :rules="formRules" ref="formRef">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="工具名称" prop="name">
-                <el-input v-model="form.name" placeholder="唯一名称，如 translate_text" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="分类" prop="category">
-                <el-select v-model="form.category" placeholder="选择分类" clearable filterable allow-create style="width:100%">
-                  <el-option v-for="cat in categories" :key="cat" :label="cat" :value="cat" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-form-item label="描述" prop="description">
-            <el-input v-model="form.description" type="textarea" :rows="2" placeholder="工具功能描述" />
-          </el-form-item>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="实现类型" prop="implementation_type">
-                <el-select v-model="form.implementation_type" placeholder="选择类型" @change="onTypeChange">
-                  <el-option label="代码 (Python)" value="code" />
-                  <el-option label="HTTP 请求" value="http" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="是否公开">
-                <el-switch v-model="form.is_public" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <!-- 代码类型配置 -->
-          <template v-if="form.implementation_type === 'code'">
-            <el-form-item label="Python 代码" prop="implementation_config.source">
-              <el-input
-                v-model="form.implementation_config.source"
-                type="textarea"
-                :rows="10"
-                placeholder="def run(args):&#10;    '''&#10;    args: dict, 包含 function_schema.parameters 中定义的参数&#10;    returns: Any (将被 JSON 序列化)&#10;    '''&#10;    x = args.get('x', 0)&#10;    y = args.get('y', 0)&#10;    return x + y"
-                font-family="monospace"
-              />
-            </el-form-item>
-          </template>
-
-          <!-- HTTP 类型配置 -->
-          <template v-if="form.implementation_type === 'http'">
-            <el-form-item label="请求 URL" prop="implementation_config.url">
-              <el-input v-model="form.implementation_config.url" placeholder="https://api.example.com/endpoint" />
-            </el-form-item>
+          <!-- Step 1: 基本信息 -->
+          <template v-if="formStep === 0">
             <el-row :gutter="20">
-              <el-col :span="8">
-                <el-form-item label="请求方法" prop="implementation_config.method">
-                  <el-select v-model="form.implementation_config.method" style="width:100%">
-                    <el-option label="GET" value="GET" />
-                    <el-option label="POST" value="POST" />
-                    <el-option label="PUT" value="PUT" />
-                    <el-option label="DELETE" value="DELETE" />
+              <el-col :span="12">
+                <el-form-item label="工具名称" prop="name">
+                  <el-input v-model="form.name" placeholder="唯一名称，如 translate_text">
+                    <template #prefix><el-icon><Edit /></el-icon></template>
+                  </el-input>
+                  <div class="form-tip">Agent 通过此名称调用工具，仅支持英文、数字和下划线</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="分类" prop="category">
+                  <el-select v-model="form.category" placeholder="选择分类" clearable filterable allow-create style="width:100%">
+                    <el-option v-for="cat in categories" :key="cat" :label="cat" :value="cat" />
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="8">
-                <el-form-item label="超时(秒)">
-                  <el-input-number v-model="form.implementation_config.timeout" :min="1" :max="120" style="width:100%" />
+            </el-row>
+            <el-form-item label="描述" prop="description">
+              <el-input v-model="form.description" type="textarea" :rows="3" placeholder="清晰描述工具的功能，Agent 会根据描述决定是否调用此工具" />
+            </el-form-item>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="实现类型" prop="implementation_type">
+                  <el-radio-group v-model="form.implementation_type" @change="onTypeChange">
+                    <el-radio value="code" class="type-radio">
+                      <div>
+                        <div class="radio-label">代码 (Python)</div>
+                        <div class="radio-desc">自定义 Python 函数</div>
+                      </div>
+                    </el-radio>
+                    <el-radio value="http" class="type-radio">
+                      <div>
+                        <div class="radio-label">HTTP 请求</div>
+                        <div class="radio-desc">调用外部 API</div>
+                      </div>
+                    </el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="可见性">
+                  <div class="visibility-setting">
+                    <el-switch v-model="form.is_public" />
+                    <span class="vis-label">{{ form.is_public ? '公开工具（所有人可见）' : '私有工具（仅自己可见）' }}</span>
+                  </div>
                 </el-form-item>
               </el-col>
             </el-row>
-            <el-form-item label="请求头 (JSON)">
-              <el-input
-                v-model="formHeadersStr"
-                type="textarea"
-                :rows="3"
-                placeholder='{"Authorization": "Bearer xxx", "Content-Type": "application/json"}'
-              />
-            </el-form-item>
           </template>
 
-          <!-- Parameters Schema -->
-          <el-divider>参数定义 (function_schema.parameters)</el-divider>
-          <el-form-item label="参数 JSON Schema">
-            <el-input
-              v-model="formSchemaStr"
-              type="textarea"
-              :rows="6"
-              placeholder='{"type": "object", "properties": {"x": {"type": "integer", "description": "第一个数"}, "y": {"type": "integer", "description": "第二个数"}}, "required": ["x", "y"]}'
-            />
-          </el-form-item>
+          <!-- Step 2: 实现配置 -->
+          <template v-if="formStep === 1">
+            <!-- 代码类型 -->
+            <template v-if="form.implementation_type === 'code'">
+              <div class="config-section">
+                <div class="section-hint">
+                  <el-icon><InfoFilled /></el-icon>
+                  编写 Python 函数 <code>run(args) -> Any</code>，<code>args</code> 为参数 JSON 对象
+                </div>
+                <el-input
+                  v-model="form.implementation_config.source"
+                  type="textarea"
+                  :rows="14"
+                  class="code-input"
+                  placeholder="def run(args):&#10;    x = args.get('x', 0)&#10;    y = args.get('y', 0)&#10;    return x + y"
+                />
+              </div>
+            </template>
+            <!-- HTTP 类型 -->
+            <template v-else-if="form.implementation_type === 'http'">
+              <div class="config-section">
+                <div class="section-hint">
+                  <el-icon><InfoFilled /></el-icon>
+                  配置 HTTP 请求，用 <code>{param}</code> 语法引用参数
+                </div>
+                <el-form-item label="请求 URL" prop="implementation_config.url">
+                  <el-input v-model="form.implementation_config.url" placeholder="https://api.example.com/endpoint?q={query}" />
+                </el-form-item>
+                <el-row :gutter="20">
+                  <el-col :span="8">
+                    <el-form-item label="请求方法">
+                      <el-select v-model="form.implementation_config.method" style="width:100%">
+                        <el-option label="GET" value="GET" />
+                        <el-option label="POST" value="POST" />
+                        <el-option label="PUT" value="PUT" />
+                        <el-option label="DELETE" value="DELETE" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-form-item label="超时(秒)">
+                      <el-input-number v-model="form.implementation_config.timeout" :min="1" :max="120" style="width:100%" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-form-item label="请求头 (JSON)">
+                  <el-input
+                    v-model="formHeadersStr"
+                    type="textarea"
+                    :rows="3"
+                    placeholder='{"Authorization": "Bearer xxx", "Content-Type": "application/json"}'
+                    class="code-input"
+                  />
+                </el-form-item>
+              </div>
+            </template>
+          </template>
+
+          <!-- Step 3: 参数定义 -->
+          <template v-if="formStep === 2">
+            <div class="config-section">
+              <div class="section-hint">
+                <el-icon><InfoFilled /></el-icon>
+                使用 JSON Schema 定义工具参数，Agent 会据此生成正确的参数
+              </div>
+              <el-input
+                v-model="formSchemaStr"
+                type="textarea"
+                :rows="10"
+                class="code-input"
+                placeholder='{"type": "object", "properties": {"x": {"type": "integer", "description": "第一个数"}, "y": {"type": "integer", "description": "第二个数"}}, "required": ["x", "y"]}'
+              />
+              <div class="schema-example" @click="insertExample">
+                <el-icon><Document /></el-icon> 插入示例
+              </div>
+            </div>
+          </template>
         </el-form>
+
         <template #footer>
-          <el-button @click="formDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleSaveForm" :loading="saving">保存</el-button>
+          <div class="dialog-footer">
+            <el-button v-if="formStep > 0" @click="formStep--">上一步</el-button>
+            <el-button v-if="formStep < 2" type="primary" @click="formStep++">下一步</el-button>
+            <el-button v-else type="primary" @click="handleSaveForm" :loading="saving">保存</el-button>
+            <el-button @click="formDialogVisible = false">取消</el-button>
+          </div>
         </template>
       </el-dialog>
 
-      <!-- 测试对话框 -->
+      <!-- ── 测试对话框 ── -->
       <el-dialog
         v-model="testDialogVisible"
-        :title="'测试工具: ' + (testingTool?.name || '')"
-        width="650px"
+        :title="'🧪 测试工具: ' + (testingTool?.name || '')"
+        width="680px"
+        :close-on-click-modal="false"
+        destroy-on-close
       >
         <template v-if="testingTool">
+          <div class="test-info">
+            <el-tag :type="tagType(testingTool.implementation_type)" size="small" effect="dark">
+              {{ typeLabel(testingTool.implementation_type) }}
+            </el-tag>
+            <span class="test-desc">{{ testingTool.description }}</span>
+          </div>
+
           <!-- 代码工具测试 -->
           <template v-if="testingTool.implementation_type === 'code'">
             <el-form label-position="top">
-              <el-form-item label="测试参数 (JSON)">
-                <el-input
-                  v-model="testArgsStr"
-                  type="textarea"
-                  :rows="6"
-                  placeholder='{"x": 1, "y": 2}'
-                />
+              <el-form-item label="输入参数 (JSON)">
+                <el-input v-model="testArgsStr" type="textarea" :rows="6" class="code-input" placeholder='{"x": 1, "y": 2}' />
               </el-form-item>
             </el-form>
           </template>
+
           <!-- HTTP 工具测试 -->
           <template v-else-if="testingTool.implementation_type === 'http'">
             <el-form label-position="top">
-              <el-row :gutter="20">
+              <el-row :gutter="16">
                 <el-col :span="16">
                   <el-form-item label="URL">
                     <el-input v-model="testHttpUrl" :placeholder="testingTool.implementation_config?.url || ''" />
@@ -226,46 +385,63 @@
                 </el-col>
               </el-row>
               <el-form-item label="请求头 (JSON)">
-                <el-input v-model="testHttpHeadersStr" type="textarea" :rows="3" placeholder='{"Content-Type": "application/json"}' />
+                <el-input v-model="testHttpHeadersStr" type="textarea" :rows="2" class="code-input" placeholder='{"Content-Type": "application/json"}' />
               </el-form-item>
-              <el-form-item label="请求体 (JSON)">
-                <el-input v-model="testHttpBodyStr" type="textarea" :rows="4" placeholder='{"key": "value"}' />
-              </el-form-item>
-              <el-form-item label="参数 (将被替换到 URL) (JSON)">
-                <el-input v-model="testArgsStr" type="textarea" :rows="3" placeholder='{"query": "hello"}' />
+              <el-row :gutter="16">
+                <el-col :span="12">
+                  <el-form-item label="请求体 (JSON)">
+                    <el-input v-model="testHttpBodyStr" type="textarea" :rows="4" class="code-input" placeholder='{"key": "value"}' />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="URL 参数 (JSON)">
+                    <el-input v-model="testArgsStr" type="textarea" :rows="4" class="code-input" placeholder='{"query": "hello"}' />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </template>
+
+          <!-- 通用参数 -->
+          <template v-else>
+            <el-form label-position="top">
+              <el-form-item label="参数 (JSON)">
+                <el-input v-model="testArgsStr" type="textarea" :rows="6" class="code-input" placeholder='{"arg1": "value1"}' />
               </el-form-item>
             </el-form>
           </template>
-          <!-- 通用参数 -->
-          <el-form label-position="top">
-            <el-form-item label="参数 (function_schema args)">
-              <el-input
-                v-model="testArgsStr"
-                type="textarea"
-                :rows="4"
-                placeholder='{"arg1": "value1"}'
-              />
-            </el-form-item>
-          </el-form>
 
           <!-- 测试结果 -->
-          <div v-if="testResult" class="test-result">
-            <el-divider>测试结果</el-divider>
-            <el-tag :type="testResult.success ? 'success' : 'danger'" effect="dark" style="margin-bottom: 10px">
-              {{ testResult.success ? '成功' : '失败' }}
-              <span v-if="testResult.elapsed_ms !== undefined"> ({{ testResult.elapsed_ms }}ms)</span>
-            </el-tag>
-            <el-input
-              v-model="testResultOutput"
-              type="textarea"
-              :rows="6"
-              readonly
-            />
+          <div v-if="testResult" class="test-result-panel" :class="testResult.success ? 'result-success' : 'result-fail'">
+            <div class="result-header">
+              <el-tag :type="testResult.success ? 'success' : 'danger'" effect="dark" size="small">
+                {{ testResult.success ? '✓ 成功' : '✗ 失败' }}
+              </el-tag>
+              <span v-if="testResult.elapsed_ms !== undefined" class="elapsed">耗时 {{ testResult.elapsed_ms }}ms</span>
+            </div>
+            <div class="result-body">
+              <template v-if="testResult.error">
+                <div class="error-section">{{ testResult.error }}</div>
+              </template>
+              <template v-if="testResult.status_code">
+                <div class="meta-line">状态码: {{ testResult.status_code }}</div>
+              </template>
+              <template v-if="testResult.result !== undefined && testResult.result !== null">
+                <div class="section-label">执行结果</div>
+                <pre class="result-json">{{ JSON.stringify(testResult.result, null, 2) }}</pre>
+              </template>
+              <template v-if="testResult.body">
+                <div class="section-label">响应体</div>
+                <pre class="result-json">{{ testResult.body }}</pre>
+              </template>
+            </div>
           </div>
         </template>
         <template #footer>
           <el-button @click="testDialogVisible = false">关闭</el-button>
-          <el-button type="primary" @click="handleTest" :loading="testing">测试运行</el-button>
+          <el-button type="primary" @click="handleTest" :loading="testing">
+            <el-icon><CaretRight /></el-icon> 运行测试
+          </el-button>
         </template>
       </el-dialog>
     </div>
@@ -275,7 +451,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, watch } from 'vue'
 import { ElMessage } from 'element-plus'
-import { Search, Plus } from '@element-plus/icons-vue'
+import { Search, Plus, Edit, Grid, List, Folder, TopRight, InfoFilled, CaretRight, Document } from '@element-plus/icons-vue'
 import api from '@/api'
 
 interface Tool {
@@ -301,8 +477,10 @@ const categories = ref<string[]>([])
 const searchQuery = ref('')
 const categoryFilter = ref('')
 const scopeFilter = ref('public')
+const viewMode = ref<'card' | 'table'>('card')
 
-// 表单
+// 表单 — 分步
+const formStep = ref(0)
 const formDialogVisible = ref(false)
 const isEditing = ref(false)
 const editingId = ref('')
@@ -311,8 +489,8 @@ const form = ref({
   name: '',
   description: '',
   category: '',
-  implementation_type: 'code',
-  implementation_config: { source: '', url: '', method: 'GET', timeout: 30, headers: {} },
+  implementation_type: 'code' as 'code' | 'http',
+  implementation_config: { source: '', url: '', method: 'GET', timeout: 30, headers: {} } as Record<string, any>,
   is_public: false,
 })
 const formHeadersStr = ref('{}')
@@ -328,35 +506,45 @@ const testHttpHeadersStr = ref('{}')
 const testHttpBodyStr = ref('')
 const testResult = ref<any>(null)
 
+// ── 计算属性 ──
+
+const builtinCount = computed(() => tools.value.filter(t => t.implementation_type === 'builtin').length)
+const codeCount = computed(() => tools.value.filter(t => t.implementation_type === 'code').length)
+const httpCount = computed(() => tools.value.filter(t => t.implementation_type === 'http').length)
+
+const scopeLabel = computed(() => {
+  const map: Record<string, string> = { public: '公开', mine: '我的', all: '' }
+  return map[scopeFilter.value] || ''
+})
+
 const formRules = {
-  name: [{ required: true, message: '请输入工具名称', trigger: 'blur' }],
+  name: [
+    { required: true, message: '请输入工具名称', trigger: 'blur' },
+    { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: '仅支持英文、数字和下划线', trigger: 'blur' },
+  ],
   description: [{ required: true, message: '请输入工具描述', trigger: 'blur' }],
   implementation_type: [{ required: true, message: '请选择实现类型', trigger: 'change' }],
 }
 
-const testResultOutput = computed(() => {
-  if (!testResult.value) return ''
-  const parts: string[] = []
-  if (testResult.value.error) parts.push(`错误: ${testResult.value.error}`)
-  if (testResult.value.status_code) parts.push(`状态码: ${testResult.value.status_code}`)
-  if (testResult.value.result !== undefined && testResult.value.result !== null) {
-    parts.push(`结果: ${JSON.stringify(testResult.value.result, null, 2)}`)
-  }
-  if (testResult.value.body) parts.push(`响应体: ${testResult.value.body}`)
-  return parts.join('\n')
-})
+// ── 辅助函数 ──
 
-// 切换类型时重置配置
-function onTypeChange() {
-  if (form.value.implementation_type === 'code') {
-    form.value.implementation_config = { source: '' }
-  } else if (form.value.implementation_type === 'http') {
-    form.value.implementation_config = { url: '', method: 'GET', timeout: 30 }
-    formHeadersStr.value = '{}'
-  }
+function tagType(type: string) {
+  const map: Record<string, string> = { builtin: 'info', code: 'warning', http: 'success' }
+  return map[type] || 'info'
 }
 
-// 获取工具列表
+function typeLabel(type: string) {
+  const map: Record<string, string> = { builtin: '内置', code: '代码', http: 'HTTP' }
+  return map[type] || type
+}
+
+function scopeLabelFunc(scope: string) {
+  const map: Record<string, string> = { public: '公开', mine: '我的', all: '' }
+  return map[scope] || ''
+}
+
+// ── API 调用 ──
+
 async function fetchTools() {
   loading.value = true
   try {
@@ -372,7 +560,6 @@ async function fetchTools() {
   }
 }
 
-// 获取分类列表
 async function fetchCategories() {
   try {
     const res = await api.get('/api/v1/tools/categories')
@@ -382,17 +569,29 @@ async function fetchCategories() {
   }
 }
 
-// 搜索防抖
+// ── 搜索 ──
+
 let searchTimer: ReturnType<typeof setTimeout> | null = null
 function handleSearch() {
   if (searchTimer) clearTimeout(searchTimer)
   searchTimer = setTimeout(fetchTools, 300)
 }
 
-// 显示创建对话框
+// ── 新建/编辑 ──
+
+function onTypeChange() {
+  if (form.value.implementation_type === 'code') {
+    form.value.implementation_config = { source: '' }
+  } else {
+    form.value.implementation_config = { url: '', method: 'GET', timeout: 30 }
+    formHeadersStr.value = '{}'
+  }
+}
+
 function showCreateDialog() {
   isEditing.value = false
   editingId.value = ''
+  formStep.value = 0
   form.value = {
     name: '',
     description: '',
@@ -406,15 +605,15 @@ function showCreateDialog() {
   formDialogVisible.value = true
 }
 
-// 显示编辑对话框
 function showEditDialog(row: Tool) {
   isEditing.value = true
   editingId.value = row.id
+  formStep.value = 0
   form.value = {
     name: row.name,
     description: row.description,
     category: row.category || '',
-    implementation_type: row.implementation_type,
+    implementation_type: row.implementation_type as 'code' | 'http',
     implementation_config: row.implementation_config ? { ...row.implementation_config } : {},
     is_public: row.is_public,
   }
@@ -423,17 +622,29 @@ function showEditDialog(row: Tool) {
   formDialogVisible.value = true
 }
 
-// 保存表单
+function insertExample() {
+  formSchemaStr.value = JSON.stringify({
+    type: 'object',
+    properties: {
+      text: { type: 'string', description: '要处理的文本' },
+      max_length: { type: 'integer', description: '最大长度', default: 100 },
+    },
+    required: ['text'],
+  }, null, 2)
+}
+
 async function handleSaveForm() {
   const valid = await formRef.value?.validate().catch(() => false)
   if (!valid) return
 
   let headers: Record<string, any> = {}
-  try {
-    headers = JSON.parse(formHeadersStr.value || '{}')
-  } catch {
-    ElMessage.warning('请求头 JSON 格式不正确')
-    return
+  if (form.value.implementation_type === 'http') {
+    try {
+      headers = JSON.parse(formHeadersStr.value || '{}')
+    } catch {
+      ElMessage.warning('请求头 JSON 格式不正确')
+      return
+    }
   }
 
   let params: Record<string, any> = { type: 'object', properties: {} }
@@ -482,7 +693,6 @@ async function handleSaveForm() {
   }
 }
 
-// 删除工具
 async function handleDelete(row: Tool) {
   try {
     await api.delete(`/api/v1/tools/${row.id}`)
@@ -493,7 +703,8 @@ async function handleDelete(row: Tool) {
   }
 }
 
-// 显示测试对话框
+// ── 测试 ──
+
 function showTestDialog(row: Tool) {
   testingTool.value = row
   testArgsStr.value = '{}'
@@ -505,7 +716,6 @@ function showTestDialog(row: Tool) {
   testDialogVisible.value = true
 }
 
-// 执行测试
 async function handleTest() {
   if (!testingTool.value) return
 
@@ -521,21 +731,16 @@ async function handleTest() {
   testResult.value = null
   try {
     if (testingTool.value.implementation_type === 'code') {
-      const config = testingTool.value.implementation_config
-      const source = config?.source || ''
+      const source = testingTool.value.implementation_config?.source || ''
       const res = await api.post('/api/v1/tools/test/code', { source, args })
       testResult.value = res.data
     } else if (testingTool.value.implementation_type === 'http') {
       let headers: Record<string, any> = {}
-      try {
-        headers = JSON.parse(testHttpHeadersStr.value || '{}')
-      } catch { /* ignore */ }
+      try { headers = JSON.parse(testHttpHeadersStr.value || '{}') } catch { /* ignore */ }
       let body: Record<string, any> | undefined
-      try {
-        body = testHttpBodyStr.value ? JSON.parse(testHttpBodyStr.value) : undefined
-      } catch { /* ignore */ }
+      try { body = testHttpBodyStr.value ? JSON.parse(testHttpBodyStr.value) : undefined } catch { /* ignore */ }
       const res = await api.post('/api/v1/tools/test/http', {
-        url: testHttpUrl.value,
+        url: testHttpUrl.value || testingTool.value.implementation_config?.url || '',
         method: testHttpMethod.value,
         headers,
         body,
@@ -565,40 +770,287 @@ onMounted(() => {
   height: 100%;
   display: flex;
   flex-direction: column;
+  gap: 16px;
 }
 
+/* ── 标题 ── */
+.page-title h2 {
+  margin: 0 0 4px;
+  font-size: 22px;
+}
+.title-desc {
+  margin: 0;
+  color: #909399;
+  font-size: 14px;
+}
+
+/* ── 统计 ── */
+.stats-row {
+  margin-bottom: 0 !important;
+}
+.stat-card {
+  text-align: center;
+  border-radius: 8px;
+}
+.stat-value {
+  font-size: 28px;
+  font-weight: 700;
+  color: #409eff;
+  line-height: 1.2;
+}
+.stat-label {
+  font-size: 13px;
+  color: #909399;
+  margin-top: 4px;
+}
+
+/* ── 工具栏 ── */
+.toolbar-card {
+  border-radius: 8px;
+}
 .toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
   flex-wrap: wrap;
   gap: 12px;
 }
-
 .toolbar-left {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
 }
-
 .toolbar-right {
-  display: flex;
-  gap: 8px;
-}
-
-.tool-name {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
+/* ── 卡片视图 ── */
+.tool-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+  flex: 1;
+}
+.tool-card {
+  cursor: pointer;
+  border-radius: 8px;
+  transition: transform 0.15s, box-shadow 0.15s;
+  display: flex;
+  flex-direction: column;
+}
+.tool-card:hover {
+  transform: translateY(-2px);
+}
+.card-top {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+.card-body {
+  flex: 1;
+}
+.card-title {
+  margin: 0 0 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+.card-desc {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: #606266;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.card-meta {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: #909399;
+}
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.card-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+}
+.empty-state {
+  grid-column: 1 / -1;
+}
+
+/* ── 表格视图 ── */
+.tool-name-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 .name-text {
   font-weight: 500;
 }
+:deep(.el-table__row) {
+  cursor: pointer;
+}
 
-.test-result {
+/* ── 表单 ── */
+.form-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+.type-radio {
+  height: auto !important;
+  padding: 8px 12px !important;
+  margin-bottom: 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 6px;
+  width: 100%;
+}
+.type-radio.is-checked {
+  border-color: #409eff;
+  background: #f0f7ff;
+}
+.radio-label {
+  font-size: 14px;
+  font-weight: 500;
+}
+.radio-desc {
+  font-size: 12px;
+  color: #909399;
+}
+.visibility-setting {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.vis-label {
+  font-size: 13px;
+  color: #606266;
+}
+.config-section {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 16px;
+}
+.section-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #606266;
+  margin-bottom: 12px;
+}
+.section-hint code {
+  background: #e6e8eb;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+.code-input :deep(.el-textarea__inner) {
+  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+}
+.schema-example {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 8px;
+  font-size: 13px;
+  color: #409eff;
+  cursor: pointer;
+}
+.schema-example:hover {
+  color: #66b1ff;
+}
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* ── 测试 ── */
+.test-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+  padding: 12px;
+  background: #f8f9fa;
+  border-radius: 6px;
+}
+.test-desc {
+  font-size: 13px;
+  color: #606266;
+}
+.test-result-panel {
+  margin-top: 20px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid;
+}
+.result-success {
+  border-color: #e1f3d8;
+}
+.result-fail {
+  border-color: #fde2e2;
+}
+.result-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #eee;
+}
+.elapsed {
+  font-size: 12px;
+  color: #909399;
+}
+.result-body {
+  padding: 14px;
+}
+.error-section {
+  color: #f56c6c;
+  font-size: 13px;
+  white-space: pre-wrap;
+}
+.meta-line {
+  font-size: 13px;
+  color: #606266;
+  margin-bottom: 8px;
+}
+.section-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #909399;
+  text-transform: uppercase;
+  margin-bottom: 6px;
   margin-top: 10px;
 }
+.section-label:first-child {
+  margin-top: 0;
+}
+.result-json {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+  margin: 0;
+  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
+}
 </style>