JARVIS/development-doc/plan/temple-update/phase-2-tools-frontend.md

Phase 2：前端 Tools Tab 实现

日期：2026-04-08 状态：待开始

---

1. 本阶段目的

实现 Temple 页面的 Tools Tab，包括分类树 + 详情面板 + Metrics Strip。

---

2. 核心文件

文件	作用
frontend/src/api/tools.ts	新建，Tools API 客户端
frontend/src/pages/temple/composables/useTemple.ts	新建，Tab/Skills 逻辑
frontend/src/pages/temple/index.vue	重写主页面（替换占位符）
frontend/src/pages/temple/templePage.css	新建，样式

---

3. 页面布局

┌─────────────────────────────────────────────────────────────┐
│  [◈ 智慧神殿]           [Tools] [Skills]      ← Tab 切换器  │
├─────────────────────────────────────────────────────────────┤
│  TOTAL: 30  │  ACTIVE: 28  │  AGENTS: 5   ← Metrics Strip  │
├──────────────────────────┬──────────────────────────────────┤
│                          │                                  │
│  [分类树]                 │  [工具详情]                      │
│                          │                                  │
│  ▼ 注册层                 │  file_operator                   │
│    文件操作               │  ────────────                    │
│    任务管理               │  描述: 强大的文件系统操作工具     │
│    网页抓取               │  命令: 4 个                     │
│    联网搜索               │  标签: file, system, essential  │
│  ▼ Agent层               │  状态: 启用                      │
│    文件工具               │  调用: 1,234 次                  │
│    系统命令               │  错误率: 0.2%                    │
│    开发工具               │  平均耗时: 150ms                 │
│    协作工具               │                                  │
│    知识检索               │  [Commands]                      │
│    日程管理               │  ───────────────────────────    │
│    任务管理               │  read_file                       │
│    论坛功能               │  ───────────────────────────    │
│    时间推理               │  write_file                      │
│                          │  ───────────────────────────    │
│                          │  list_directory                  │
│                          │  ───────────────────────────    │
│                          │  search_files                    │
└──────────────────────────┴──────────────────────────────────┘

---

4. 组件说明

4.1 Tab 切换器

两个 Tab：Tools | Skills

• Tools → 本 phase 实现
• Skills → Phase 3（复用现有页面）

4.2 Metrics Strip

三个统计指标卡片：

指标	说明
TOTAL	系统工具总数（所有工具的 commands 总数）
ACTIVE	启用中的工具数
AGENTS	工具绑定的 Agent 类型数（固定 5）

4.3 分类树

• 两级结构：大类（注册层 / Agent 层）→ 具体分类
• 点击分类 → 右侧显示该分类下的工具列表
• 点击工具 → 右侧显示工具详情

4.4 工具详情面板

当无工具选中时：显示分类下的工具列表（卡片形式） 当有工具选中时：显示工具详情

详情内容：

• Name / Display Name
• Description
• Category / Tags
• Enabled status
• Stats: call_count, error_rate, avg_duration_ms
• Commands: 每个 command 的 name + description（只读）

---

5. useTemple.ts 接口设计

// useTemple.ts
export function useTemple() {
  // State
  const activeTab = ref<'tools' | 'skills'>('tools')
  const categories = ref<ToolCategory[]>([])
  const selectedCategory = ref<string | null>(null)
  const selectedTool = ref<ToolInfo | null>(null)
  const loading = ref(false)

  // Computed
  const summary = computed(() => { ... })
  const currentCategoryTools = computed(() => { ... })

  // Actions
  async function fetchTools() { ... }
  function selectCategory(name: string) { ... }
  function selectTool(tool: ToolInfo) { ... }

  return {
    activeTab,
    categories,
    selectedCategory,
    selectedTool,
    loading,
    summary,
    currentCategoryTools,
    fetchTools,
    selectCategory,
    selectTool,
  }
}

---

6. 样式规范

沿用 Jarvis 现有风格：

/* templePage.css */
.temple-page {
  /* 复用 jarvis-* CSS 变量 */
  background: var(--bg-primary);
  color: var(--text-primary);
}

.metric-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.category-tree {
  /* 深色终端风格 */
}

---

7. 产出要求

• Tab 切换器正常切换 Tools / Skills
• Metrics Strip 正确显示统计数据
• 分类树正确渲染，展开/收起正常
• 点击工具有详情面板，Commands 列表完整
• 样式与 Jarvis 整体风格一致