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