fix(dashboard): wrap VWindowItem in VWindow to fix Vuetify 4 injection error

VWindowItem requires a VWindow parent for group context injection.
Without it, Vuetify 4 throws:
  "Could not find useGroup injection with symbol vuetify:v-window"

Changes:
- ExtensionPage.vue: wrap all tab content in v-window v-model="activeTab"
- InstalledPluginsTab.vue: remove v-window-item root wrapper
- MarketPluginsTab.vue: remove v-window-item root wrapper
This commit is contained in:
LIghtJUNction
2026-03-28 16:34:07 +08:00
parent f000a21c01
commit 64bc582879
3 changed files with 64 additions and 60 deletions

View File

@@ -158,67 +158,73 @@ const {
<v-card variant="flat" style="background-color: transparent">
<!-- 标签页 -->
<v-card-text style="padding: 0px 12px">
<!-- 已安装插件标签页内容 -->
<InstalledPluginsTab :state="pageState" />
<v-window v-model="activeTab">
<!-- 已安装插件标签页内容 -->
<v-window-item value="installed">
<InstalledPluginsTab :state="pageState" />
</v-window-item>
<!-- 指令面板标签页内容 -->
<v-window-item v-show="activeTab === 'components'">
<div class="mb-4 pt-4 pb-4">
<div class="d-flex align-center flex-wrap" style="gap: 12px">
<h2 class="text-h2 mb-0">{{ tm("tabs.handlersOperation") }}</h2>
<!-- 指令面板标签页内容 -->
<v-window-item value="components">
<div class="mb-4 pt-4 pb-4">
<div class="d-flex align-center flex-wrap" style="gap: 12px">
<h2 class="text-h2 mb-0">{{ tm("tabs.handlersOperation") }}</h2>
</div>
</div>
</div>
<v-card
class="rounded-lg"
variant="flat"
style="background-color: transparent"
>
<v-card-text class="pa-0">
<ComponentPanel :active="activeTab === 'components'" />
</v-card-text>
</v-card>
</v-window-item>
<v-card
class="rounded-lg"
variant="flat"
style="background-color: transparent"
>
<v-card-text class="pa-0">
<ComponentPanel :active="activeTab === 'components'" />
</v-card-text>
</v-card>
</v-window-item>
<!-- 已安装的 MCP 服务器标签页内容 -->
<v-window-item v-show="activeTab === 'mcp'">
<div class="mb-4 pt-4 pb-4">
<div class="d-flex align-center flex-wrap" style="gap: 12px">
<h2 class="text-h2 mb-0">
{{ tm("tabs.installedMcpServers") }}
</h2>
<!-- 已安装的 MCP 服务器标签页内容 -->
<v-window-item value="mcp">
<div class="mb-4 pt-4 pb-4">
<div class="d-flex align-center flex-wrap" style="gap: 12px">
<h2 class="text-h2 mb-0">
{{ tm("tabs.installedMcpServers") }}
</h2>
</div>
</div>
</div>
<v-card
class="rounded-lg"
variant="flat"
style="background-color: transparent"
>
<v-card-text class="pa-0">
<McpServersSection />
</v-card-text>
</v-card>
</v-window-item>
<v-card
class="rounded-lg"
variant="flat"
style="background-color: transparent"
>
<v-card-text class="pa-0">
<McpServersSection />
</v-card-text>
</v-card>
</v-window-item>
<!-- Skills 标签页内容 -->
<v-window-item v-show="activeTab === 'skills'">
<div class="mb-4 pt-4 pb-4">
<div class="d-flex align-center flex-wrap" style="gap: 12px">
<h2 class="text-h2 mb-0">{{ tm("tabs.skills") }}</h2>
<!-- Skills 标签页内容 -->
<v-window-item value="skills">
<div class="mb-4 pt-4 pb-4">
<div class="d-flex align-center flex-wrap" style="gap: 12px">
<h2 class="text-h2 mb-0">{{ tm("tabs.skills") }}</h2>
</div>
</div>
</div>
<v-card
class="rounded-lg"
variant="flat"
style="background-color: transparent"
>
<v-card-text class="pa-0">
<SkillsSection />
</v-card-text>
</v-card>
</v-window-item>
<v-card
class="rounded-lg"
variant="flat"
style="background-color: transparent"
>
<v-card-text class="pa-0">
<SkillsSection />
</v-card-text>
</v-card>
</v-window-item>
<!-- 插件市场标签页内容 -->
<MarketPluginsTab :state="pageState" />
<!-- 插件市场标签页内容 -->
<v-window-item value="market">
<MarketPluginsTab :state="pageState" />
</v-window-item>
</v-window>
</v-card-text>
</v-card>
</v-col>

View File

@@ -268,8 +268,7 @@ const pinnedPlugins = computed(() => {
</script>
<template>
<v-window-item v-show="activeTab === 'installed'">
<div class="mb-4 pt-4 pb-4">
<div class="mb-4 pt-4 pb-4">
<div class="d-flex align-center flex-wrap" style="gap: 12px">
<h2 class="text-h2 mb-0">{{ tm("titles.installedAstrBotPlugins") }}</h2>
@@ -849,7 +848,7 @@ const pinnedPlugins = computed(() => {
</button>
</template>
</v-tooltip>
</v-window-item>
</div>
</template>
<style scoped>

View File

@@ -180,8 +180,7 @@ const marketCategorySelectItems = computed(() =>
</script>
<template>
<v-window-item v-show="activeTab === 'market'">
<div class="mb-6 pt-4 pb-4">
<div class="mb-6 pt-4 pb-4">
<div class="d-flex align-center" style="gap: 12px">
<div class="d-flex align-center" style="gap: 12px; min-width: 0">
<h2 class="text-h2 mb-0">
@@ -393,7 +392,7 @@ const marketCategorySelectItems = computed(() =>
</div>
</v-expand-transition>
</div>
</v-window-item>
</div>
</template>
<style scoped>