Phase 3：Skills Tab 复用集成

日期：2026-04-08 状态：待开始

1. 本阶段目的

将现有的 /skills 页面完整嵌入 Temple 页面的 Skills Tab，实现统一入口。

文件	作用
`frontend/src/pages/skills/index.vue`	已有，Skills 完整页面
`frontend/src/pages/skills/composables/useSkillsPage.ts`	已有，Skills 逻辑
`frontend/src/api/skill.ts`	已有，Skills API 客户端

方案 A（推荐）：Tab 内条件渲染

在 Temple/index.vue 中使用 v-if 切换：

<div v-if="activeTab === 'skills'">
  <!-- Skills 页面内容内联，或引用子组件 -->
</div>

优点：单一页面，状态共享简单缺点：Skills 页面较大，代码集中

方案 B：路由嵌套

// Temple/index.vue
<router-view />

在 skills/ 路由加 parent: temple

优点：页面分离，代码清晰缺点：需要改路由配置

推荐方案 A，改动最小，Skills 页面代码以内联形式放入 Temple。

function switchTab(tab: 'tools' | 'skills') {
  activeTab.value = tab
  if (tab === 'skills') {
    // Skills 页面初始化（如果需要）
  }
}

Skills 页面样式独立在 skillsPage.css，切换 Tab 时保留其样式上下文。