168 lines
5.6 KiB
Markdown
168 lines
5.6 KiB
Markdown
# 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 整体风格一致
|