89 lines
1.9 KiB
Markdown
89 lines
1.9 KiB
Markdown
|
# Phase 3：Skills Tab 复用集成
|
|||
|
|
|
|||
|
|
日期：2026-04-08
|
|||
|
|
状态：待开始
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 1. 本阶段目的
|
|||
|
|
|
|||
|
|
将现有的 `/skills` 页面完整嵌入 Temple 页面的 Skills Tab，实现统一入口。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 2. 核心文件
|
|||
|
|
|
|||
|
|
| 文件 | 作用 |
|
|||
|
|
|------|------|
|
|||
|
|
| `frontend/src/pages/skills/index.vue` | 已有，Skills 完整页面 |
|
|||
|
|
| `frontend/src/pages/skills/composables/useSkillsPage.ts` | 已有，Skills 逻辑 |
|
|||
|
|
| `frontend/src/api/skill.ts` | 已有，Skills API 客户端 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 3. 集成方式
|
|||
|
|
|
|||
|
|
### 3.1 方案选择
|
|||
|
|
|
|||
|
|
**方案 A（推荐）：Tab 内条件渲染**
|
|||
|
|
|
|||
|
|
在 `Temple/index.vue` 中使用 `v-if` 切换：
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<div v-if="activeTab === 'skills'">
|
|||
|
|
<!-- Skills 页面内容内联，或引用子组件 -->
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
优点：单一页面，状态共享简单
|
|||
|
|
缺点：Skills 页面较大，代码集中
|
|||
|
|
|
|||
|
|
**方案 B：路由嵌套**
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
// Temple/index.vue
|
|||
|
|
<router-view />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
在 `skills/` 路由加 `parent: temple`
|
|||
|
|
|
|||
|
|
优点：页面分离，代码清晰
|
|||
|
|
缺点：需要改路由配置
|
|||
|
|
|
|||
|
|
**推荐方案 A**，改动最小，Skills 页面代码以内联形式放入 Temple。
|
|||
|
|
|
|||
|
|
### 3.2 Tab 切换逻辑
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
function switchTab(tab: 'tools' | 'skills') {
|
|||
|
|
activeTab.value = tab
|
|||
|
|
if (tab === 'skills') {
|
|||
|
|
// Skills 页面初始化（如果需要）
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 4. 样式调整
|
|||
|
|
|
|||
|
|
Skills 页面样式独立在 `skillsPage.css`，切换 Tab 时保留其样式上下文。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 5. 注意事项
|
|||
|
|
|
|||
|
|
- Skills 页面的 Modal（创建/编辑）需要在 Tab 切换后仍可正常弹出
|
|||
|
|
- Skills 页面的 API 调用（`skillApi.list()`, `skillApi.create()` 等）保持不变
|
|||
|
|
- Metrics Strip 在 Skills Tab 下显示不同的指标（TOTAL / ACTIVE / UPTIME）
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 6. 产出要求
|
|||
|
|
|
|||
|
|
- [x] Skills Tab 点击后正确切换到 Skills 页面
|
|||
|
|
- [x] Skills 的 CRUD（创建/编辑/删除/启用/禁用）功能正常
|
|||
|
|
- [x] Skills 的 MCP Panel 仍可正常打开
|
|||
|
|
- [x] Skills 页面的 Modal、Drawer 等交互正常
|
|||
|
|
- [x] Tab 切换不丢失状态
|