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

development-doc/plan/temple-update/phase-3-skills-integration.md

@@ -0,0 +1,88 @@
+# 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 切换不丢失状态