fix(frontend): unify extension installation and restore theme preview scrolling

frontend/src/features/skills/SkillsView.vue

@@ -1,19 +1,17 @@
 <script setup lang="ts">
 import { Lightning } from '@element-plus/icons-vue'
 import AppIcon from '@/components/common/AppIcon.vue'
+import ExtensionInstallDialog from '@/components/common/ExtensionInstallDialog.vue'
 import { onMounted, ref } from 'vue'
 import { useSkillStore } from '@/stores/skill'
 import { t } from '@/i18n'
 
 const skillStore = useSkillStore()
 const actionError = ref('')
+const showInstall = ref(false)
 onMounted(() => { void skillStore.loadSkills() })
 
-async function install() {
-  const path = prompt(t('请输入 Skill Package 路径', 'Enter the Skill package path'))?.trim()
-  if (!path) return
-  try { await skillStore.installSkill(path) } catch (error) { actionError.value = error instanceof Error ? error.message : t('安装失败', 'Installation failed') }
-}
+
 async function toggle(skillId: string, enabled: boolean) {
   try { enabled ? await skillStore.disableSkill(skillId) : await skillStore.enableSkill(skillId) } catch (error) { actionError.value = error instanceof Error ? error.message : t('状态更新失败', 'Status update failed') }
 }
@@ -25,7 +23,8 @@ async function uninstall(skillId: string, name: string) {
 
 <template>
   <section class="feature-page">
-    <header class="feature-header"><div><h1>{{ t('Skill 管理', 'Skill Management') }}</h1><p>{{ t('查看工作流使用的 Tool、权限、检索配置和模型要求。', 'Review the tools, permissions, retrieval settings, and model requirements used by workflows.') }}</p></div><button class="button-primary" @click="install">{{ t('安装 Skill', 'Install Skill') }}</button></header>
+    <ExtensionInstallDialog v-if="showInstall" kind="Skill" :install="skillStore.installSkill" @close="showInstall = false" @installed="showInstall = false; actionError = ''" />
+    <header class="feature-header"><div><h1>{{ t('Skill 管理', 'Skill Management') }}</h1><p>{{ t('查看工作流使用的 Tool、权限、检索配置和模型要求。', 'Review the tools, permissions, retrieval settings, and model requirements used by workflows.') }}</p></div><button class="button-primary" @click="showInstall = true">{{ t('安装 Skill', 'Install Skill') }}</button></header>
     <div v-if="skillStore.error || actionError" class="error-banner">{{ skillStore.error || actionError }}</div>
     <div v-if="skillStore.selectedSkill" class="panel detail-panel">
       <div class="detail-head"><div><span class="badge" :class="{ success: skillStore.selectedSkill.status === 'ready', error: skillStore.selectedSkill.status === 'error', warning: skillStore.selectedSkill.status.includes('missing') }">{{ skillStore.selectedSkill.status }}</span><h2>{{ skillStore.selectedSkill.icon }} {{ skillStore.selectedSkill.name }}</h2><p class="muted">v{{ skillStore.selectedSkill.version }} · {{ skillStore.selectedSkill.author || t('未知作者', 'Unknown author') }}</p></div><div class="inline-actions"><button class="button-secondary" @click="toggle(skillStore.selectedSkill.skill_id, skillStore.selectedSkill.enabled)">{{ skillStore.selectedSkill.enabled ? t('停用', 'Disable') : t('启用', 'Enable') }}</button><button class="button-danger" @click="uninstall(skillStore.selectedSkill.skill_id, skillStore.selectedSkill.name)">{{ t('卸载', 'Uninstall') }}</button></div></div>