From 64bc582879eb6855fae84b90fac6fbc3fef65fbe Mon Sep 17 00:00:00 2001
From: LIghtJUNction <lightjunction.me@gmail.com>
Date: Sat, 28 Mar 2026 16:34:07 +0800
Subject: [PATCH] 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
---
 dashboard/src/views/ExtensionPage.vue         | 114 +++++++++---------
 .../views/extension/InstalledPluginsTab.vue   |   5 +-
 .../src/views/extension/MarketPluginsTab.vue  |   5 +-
 3 files changed, 64 insertions(+), 60 deletions(-)

diff --git a/dashboard/src/views/ExtensionPage.vue b/dashboard/src/views/ExtensionPage.vue
index 17eb7369a..756a748d8 100644
--- a/dashboard/src/views/ExtensionPage.vue
+++ b/dashboard/src/views/ExtensionPage.vue
@@ -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>
diff --git a/dashboard/src/views/extension/InstalledPluginsTab.vue b/dashboard/src/views/extension/InstalledPluginsTab.vue
index 777c39a22..2cf913686 100644
--- a/dashboard/src/views/extension/InstalledPluginsTab.vue
+++ b/dashboard/src/views/extension/InstalledPluginsTab.vue
@@ -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>
diff --git a/dashboard/src/views/extension/MarketPluginsTab.vue b/dashboard/src/views/extension/MarketPluginsTab.vue
index 65583da28..7f6f55e05 100644
--- a/dashboard/src/views/extension/MarketPluginsTab.vue
+++ b/dashboard/src/views/extension/MarketPluginsTab.vue
@@ -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>