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 切换不丢失状态
|