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

frontend/src/features/plugins/PluginsView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Connection } from '@element-plus/icons-vue'
 import AppIcon from '@/components/common/AppIcon.vue'
+import ExtensionInstallDialog from '@/components/common/ExtensionInstallDialog.vue'
 import PluginMcpPanel from './PluginMcpPanel.vue'
 import PluginCommandPanel from './PluginCommandPanel.vue'
 import PluginSettingsPanel from './PluginSettingsPanel.vue'
@@ -12,6 +13,7 @@ import { t } from '@/i18n'
 
 const pluginStore = usePluginStore()
 const actionError = ref('')
+const showInstall = ref(false)
 const activeTab = ref<'info' | 'settings' | 'commands'>('info')
 const pluginCommands = ref<PluginCommand[]>([])
 
@@ -29,12 +31,6 @@ watch(() => pluginStore.selectedPluginId, async (pluginId) => {
   }
 })
 
-async function install() {
-  const path = prompt(t('请输入 Plugin Package 路径', 'Enter the Plugin Package path'))?.trim()
-  if (!path) return
-  try { await pluginStore.installPlugin(path) }
-  catch (error) { actionError.value = error instanceof Error ? error.message : t('安装失败', 'Installation failed') }
-}
 
 async function toggle(id: string, enabled: boolean) {
   try {
@@ -65,9 +61,10 @@ const hasCommandContribution = computed(() =>
 
 <template>
   <section class="feature-page">
+    <ExtensionInstallDialog v-if="showInstall" kind="Plugin" :install="pluginStore.installPlugin" @close="showInstall = false" @installed="showInstall = false; actionError = ''" />
     <header class="feature-header">
       <div><h1>{{ t('Plugin 与 MCP', 'Plugins and MCP') }}</h1><p>{{ t('管理插件生命周期、MCP Host、权限和受控 Contribution。', 'Manage plugin lifecycles, MCP hosts, permissions, and controlled contributions.') }}</p></div>
-      <button class="button-primary" @click="install">{{ t('安装 Plugin', 'Install Plugin') }}</button>
+      <button class="button-primary" @click="showInstall = true">{{ t('安装 Plugin', 'Install Plugin') }}</button>
     </header>
 
     <div v-if="pluginStore.error || actionError" class="error-banner">

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>

frontend/src/features/themes/CommunityThemePreview.spec.ts

@@ -19,5 +19,13 @@ it.each(themes)('previews shared component states safely for $theme_id', theme =
     for (const selector of ['input.input','input:disabled','textarea.textarea','select.select','.ui-disclosure[open]','.ui-disclosure:not([open])','.button-primary:disabled','.badge.success','.error-banner','.specimen-markdown code','.specimen-markdown table','.specimen-chart','.specimen-long']) expect(doc.querySelector(selector), selector).not.toBeNull()
     expect(doc.querySelector('style')!.textContent).toContain('.button-primary:hover')
     expect(doc.querySelector('style')!.textContent).not.toContain('color:white')
+    const rules = Array.from(doc.styleSheets[0]!.cssRules) as CSSStyleRule[]
+    const rootRule = rules.filter(rule => rule.selectorText === 'html').pop()!
+    const bodyRule = rules.filter(rule => rule.selectorText === 'body').pop()!
+    // The embedded document must override the app-shell overflow lock.
+    expect(rootRule.style.getPropertyValue('overflow-y')).toBe('auto')
+    expect(rootRule.style.getPropertyPriority('overflow-y')).toBe('important')
+    expect(bodyRule.style.getPropertyValue('height')).toBe('auto')
+    expect(bodyRule.style.getPropertyValue('overflow')).toBe('visible')
   } finally { w.unmount() }
 })

frontend/src/features/themes/CommunityThemePreview.vue

@@ -20,7 +20,7 @@ const previewDocument = computed(() => {
   policy.content = "default-src 'none'; style-src 'unsafe-inline'; img-src data:; font-src data:; base-uri 'none'; form-action 'none'"
   doc.head.append(policy)
   const style = doc.createElement('style')
-  style.textContent = `${tokensCss}\n${featuresCss}\n${props.css ?? getCommunityThemePreviewCss(props.themeId)}\nbody { margin:0; padding:24px; background:var(--color-background-primary); color:var(--color-text-primary); font:16px/1.6 system-ui; } article { min-width:0; } .theme-specimen { display:grid; gap:16px; margin-top:20px; } .surface-nested { padding:12px; border:1px solid var(--color-border-default); border-radius:var(--radius-md); } .specimen-markdown { overflow:auto; } .specimen-markdown code { background:var(--color-code-background, var(--color-background-secondary)); color:var(--color-code-text, var(--color-text-primary)); padding:3px 6px; border-radius:4px; } .specimen-markdown pre { padding:12px; background:var(--color-background-secondary); } .specimen-markdown blockquote { border-left:3px solid var(--color-accent-primary); padding-left:12px; } .specimen-markdown table { width:100%; border-collapse:collapse; } .specimen-markdown td,.specimen-markdown th { padding:8px; border:1px solid var(--color-border-default); } .specimen-markdown th { background:var(--color-markdown-table-header); } .specimen-chart > div { display:flex; align-items:flex-end; gap:12px; height:100px; border-bottom:1px solid var(--color-border-default); } .specimen-chart span { width:36px; } .specimen-long { overflow-wrap:anywhere; } @media(max-width:480px) { body { padding:12px; } .form-grid { grid-template-columns:minmax(0,1fr); } }`
+  style.textContent = `${tokensCss}\n${featuresCss}\n${props.css ?? getCommunityThemePreviewCss(props.themeId)}\nhtml { height:100% !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; } body { height:auto !important; min-height:100%; overflow:visible !important; margin:0; padding:24px; background:var(--color-background-primary); color:var(--color-text-primary); font:16px/1.6 system-ui; } article { min-width:0; } .theme-specimen { display:grid; gap:16px; margin-top:20px; } .surface-nested { padding:12px; border:1px solid var(--color-border-default); border-radius:var(--radius-md); } .specimen-markdown { overflow:auto; } .specimen-markdown code { background:var(--color-code-background, var(--color-background-secondary)); color:var(--color-code-text, var(--color-text-primary)); padding:3px 6px; border-radius:4px; } .specimen-markdown pre { padding:12px; background:var(--color-background-secondary); } .specimen-markdown blockquote { border-left:3px solid var(--color-accent-primary); padding-left:12px; } .specimen-markdown table { width:100%; border-collapse:collapse; } .specimen-markdown td,.specimen-markdown th { padding:8px; border:1px solid var(--color-border-default); } .specimen-markdown th { background:var(--color-markdown-table-header); } .specimen-chart > div { display:flex; align-items:flex-end; gap:12px; height:100px; border-bottom:1px solid var(--color-border-default); } .specimen-chart span { width:36px; } .specimen-long { overflow-wrap:anywhere; } @media(max-width:480px) { body { padding:12px; } .form-grid { grid-template-columns:minmax(0,1fr); } }`
 
   doc.head.append(style)
   const article = doc.createElement('article')

frontend/src/features/themes/ThemesView.vue

@@ -322,7 +322,7 @@ onMounted(() => {
 .preview-paper span:nth-child(2) { background: #d8e7e8; }
 .preview-paper span:nth-child(3) { background: #f6e9b8; }
 .preview-paper div { border: 1px solid #b5a693; background: repeating-linear-gradient(#fffef8 0 14px, #dce4db 14px 15px); }
-.theme-actions a { text-decoration: none; }
+.theme-actions a { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
 
 .theme-info { display: flex; justify-content: space-between; gap: var(--space-md); align-items: flex-start; }
 .theme-info strong { display: block; margin-bottom: 2px; }