feat(temple): add Temple modal with Tools browser and Skills management

2026-04-08 16:46:02 +08:00
parent 51e38e039b
commit aa12c92a5a
12 changed files with 2571 additions and 41 deletions
--- a/development-doc/plan/temple-update/phase-2-tools-frontend.md
+++ b/development-doc/plan/temple-update/phase-2-tools-frontend.md
@@ -0,0 +1,167 @@
+# 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 整体风格一致