# 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 接口设计

```typescript
// 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 现有风格：

```css
/* 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. 产出要求

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