From c951b14aa2e9a59b07a24c24fe8c93def6fb73bb Mon Sep 17 00:00:00 2001
From: Soulter <905617992@qq.com>
Date: Wed, 25 Feb 2026 19:42:51 +0800
Subject: [PATCH] feat: add useExtensionPage composable for managing plugin
 extensions

- Implemented a new composable `useExtensionPage` to handle various functionalities related to plugin management, including fetching extensions, handling updates, and managing UI states.
- Added support for conflict checking, plugin installation, and custom source management.
- Integrated search and filtering capabilities for plugins in the market.
- Enhanced user experience with dialogs for confirmations and notifications.
- Included pagination and sorting features for better plugin visibility.
---
 .../components/extension/MarketPluginCard.vue |   24 +-
 .../src/components/shared/ExtensionCard.vue   |  595 ++--
 .../locales/en-US/features/extension.json     |    3 +
 .../locales/zh-CN/features/extension.json     |    3 +
 dashboard/src/views/ExtensionPage.vue         | 2433 ++---------------
 .../views/extension/InstalledPluginsTab.vue   |  639 +++++
 .../src/views/extension/MarketPluginsTab.vue  |  373 +++
 .../src/views/extension/useExtensionPage.js   | 1466 ++++++++++
 8 files changed, 3112 insertions(+), 2424 deletions(-)
 create mode 100644 dashboard/src/views/extension/InstalledPluginsTab.vue
 create mode 100644 dashboard/src/views/extension/MarketPluginsTab.vue
 create mode 100644 dashboard/src/views/extension/useExtensionPage.js

diff --git a/dashboard/src/components/extension/MarketPluginCard.vue b/dashboard/src/components/extension/MarketPluginCard.vue
index 2fbb1917e..edae9227d 100644
--- a/dashboard/src/components/extension/MarketPluginCard.vue
+++ b/dashboard/src/components/extension/MarketPluginCard.vue
@@ -34,6 +34,7 @@ const platformDisplayList = computed(() =>
 const handleInstall = (plugin) => {
   emit("install", plugin);
 };
+
 </script>
 
 <template>
@@ -123,6 +124,7 @@ const handleInstall = (plugin) => {
             v-if="plugin?.social_link"
             :href="plugin.social_link"
             target="_blank"
+            @click.stop
             class="text-subtitle-2 font-weight-medium"
             style="
               text-decoration: none;
@@ -213,7 +215,10 @@ const handleInstall = (plugin) => {
       </div>
     </v-card-text>
 
-    <v-card-actions style="gap: 6px; padding: 8px 12px; padding-top: 0">
+    <v-card-actions
+      style="gap: 6px; padding: 8px 12px; padding-top: 0"
+      @click.stop
+    >
       <v-chip
         v-for="tag in plugin.tags?.slice(0, 2)"
         :key="tag"
@@ -248,22 +253,24 @@ const handleInstall = (plugin) => {
       <v-btn
         v-if="plugin?.repo"
         color="secondary"
-        size="x-small"
+        size="small"
         variant="tonal"
+        class="market-action-btn"
         :href="plugin.repo"
         target="_blank"
-        style="height: 24px"
+        style="height: 32px"
       >
-        <v-icon icon="mdi-github" start size="x-small"></v-icon>
+        <v-icon icon="mdi-github" start size="small"></v-icon>
         {{ tm("buttons.viewRepo") }}
       </v-btn>
       <v-btn
         v-if="!plugin?.installed"
         color="primary"
-        size="x-small"
+        size="small"
         @click="handleInstall(plugin)"
         variant="flat"
-        style="height: 24px"
+        class="market-action-btn"
+        style="height: 32px"
       >
         {{ tm("buttons.install") }}
       </v-btn>
@@ -306,4 +313,9 @@ const handleInstall = (plugin) => {
 .plugin-description::-webkit-scrollbar-thumb:hover {
   background-color: rgba(var(--v-theme-primary-rgb), 0.6);
 }
+
+.market-action-btn {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
 </style>
diff --git a/dashboard/src/components/shared/ExtensionCard.vue b/dashboard/src/components/shared/ExtensionCard.vue
index fce4fa716..765d8a77b 100644
--- a/dashboard/src/components/shared/ExtensionCard.vue
+++ b/dashboard/src/components/shared/ExtensionCard.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, inject } from "vue";
+import { ref, computed, inject, watch } from "vue";
 import { useCustomizerStore } from "@/stores/customizer";
 import { useModuleI18n } from "@/i18n/composables";
 import { getPlatformDisplayName, getPlatformIcon } from "@/utils/platformUtils";
 import UninstallConfirmDialog from "./UninstallConfirmDialog.vue";
 import PluginPlatformChip from "./PluginPlatformChip.vue";
+import StyledMenu from "./StyledMenu.vue";
+import defaultPluginIcon from "@/assets/images/plugin_icon.png";
 
 const props = defineProps({
   extension: {
@@ -59,6 +61,25 @@ const astrbotVersionRequirement = computed(() => {
     : "";
 });
 
+const logoLoadFailed = ref(false);
+
+const logoSrc = computed(() => {
+  const logo = props.extension?.logo;
+  if (logoLoadFailed.value) {
+    return defaultPluginIcon;
+  }
+  return typeof logo === "string" && logo.trim().length
+    ? logo
+    : defaultPluginIcon;
+});
+
+watch(
+  () => props.extension?.logo,
+  () => {
+    logoLoadFailed.value = false;
+  },
+);
+
 // 操作函数
 const configure = () => {
   emit("configure", props.extension);
@@ -104,6 +125,7 @@ const viewReadme = () => {
 const viewChangelog = () => {
   emit("view-changelog", props.extension);
 };
+
 </script>
 
 <template>
@@ -129,249 +151,292 @@ const viewChangelog = () => {
       style="
         padding: 16px;
         padding-bottom: 0px;
-        display: flex;
-        gap: 16px;
         width: 100%;
       "
     >
-      <div v-if="extension?.logo">
-        <img :src="extension.logo" :alt="extension.name" cover width="100" />
-      </div>
-
-      <div style="overflow-x: auto">
-        <!-- Top-right three-dot menu -->
-        <div style="position: absolute; right: 8px; top: 8px; z-index: 5">
-          <v-menu offset-y>
-            <template v-slot:activator="{ props: menuProps }">
-              <v-btn
-                icon
-                variant="text"
-                aria-label="more"
-                v-if="extension?.repo"
-                :href="extension?.repo"
-                target="_blank"
-              >
-                <v-icon icon="mdi-github"></v-icon>
-              </v-btn>
-              <v-btn v-bind="menuProps" icon variant="text" aria-label="more">
-                <v-icon icon="mdi-dots-vertical"></v-icon>
-              </v-btn>
-            </template>
-
-            <v-list>
-              <v-list-item @click="viewReadme">
-                <v-list-item-title
-                  >📄 {{ tm("buttons.viewDocs") }}</v-list-item-title
-                >
-              </v-list-item>
-
-              <v-list-item v-if="!marketMode" @click="viewChangelog">
-                <v-list-item-title
-                  >📝 {{ tm("pluginChangelog.menuTitle") }}</v-list-item-title
-                >
-              </v-list-item>
-
-              <v-list-item
-                v-if="marketMode && !extension?.installed"
-                @click="installExtension"
-              >
-                <v-list-item-title>
-                  {{ tm("buttons.install") }}</v-list-item-title
-                >
-              </v-list-item>
-
-              <v-list-item v-if="marketMode && extension?.installed">
-                <v-list-item-title class="text--disabled">{{
-                  tm("status.installed")
-                }}</v-list-item-title>
-              </v-list-item>
-
-              <!-- Divider between market actions and plugin actions -->
-              <v-divider v-if="!marketMode" />
-
-              <template v-if="!marketMode">
-                <v-list-item @click="configure">
-                  <v-list-item-title>
-                    {{ tm("card.actions.pluginConfig") }}</v-list-item-title
-                  >
-                </v-list-item>
-
-                <v-list-item @click="uninstallExtension">
-                  <v-list-item-title class="text-error">{{
-                    tm("card.actions.uninstallPlugin")
-                  }}</v-list-item-title>
-                </v-list-item>
-
-                <v-list-item @click="reloadExtension">
-                  <v-list-item-title>{{
-                    tm("card.actions.reloadPlugin")
-                  }}</v-list-item-title>
-                </v-list-item>
-
-                <v-list-item @click="toggleActivation">
-                  <v-list-item-title>
-                    {{
-                      extension.activated
-                        ? tm("buttons.disable")
-                        : tm("buttons.enable")
-                    }}{{ tm("card.actions.togglePlugin") }}
-                  </v-list-item-title>
-                </v-list-item>
-
-                <v-list-item @click="viewHandlers">
-                  <v-list-item-title
-                    >{{ tm("card.actions.viewHandlers") }} ({{
-                      extension.handlers.length
-                    }})</v-list-item-title
-                  >
-                </v-list-item>
-
-                <v-list-item @click="updateExtension">
-                  <v-list-item-title>
-                    {{
-                      extension.has_update
-                        ? tm("card.actions.updateTo") +
-                          " " +
-                          extension.online_version
-                        : tm("card.actions.reinstall")
-                    }}
-                  </v-list-item-title>
-                </v-list-item>
-              </template>
-            </v-list>
-          </v-menu>
-        </div>
-
+      <div style="overflow-x: auto; width: 100%">
         <div style="width: 100%; margin-bottom: 24px">
-          <!-- 最多一行 -->
-          <div
-            class="text-caption"
-            style="
-              color: gray;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              margin-right: 84px;
-            "
-          >
-            {{ extension.author }} / {{ extension.name }}
-          </div>
-          <p
-            class="text-h3 font-weight-black extension-title"
-            :class="{ 'text-h4': $vuetify.display.xs }"
-          >
-            <span class="extension-title__text">{{
-              extension.display_name?.length
-                ? extension.display_name
-                : extension.name
-            }}</span>
-            <v-tooltip
-              location="top"
-              v-if="extension?.has_update && !marketMode"
+          <div class="extension-title-row">
+            <p
+              class="text-h3 font-weight-black extension-title"
+              :class="{ 'text-h4': $vuetify.display.xs }"
             >
-              <template v-slot:activator="{ props: tooltipProps }">
-                <v-icon
-                  v-bind="tooltipProps"
-                  color="warning"
-                  class="ml-2"
-                  icon="mdi-update"
-                  size="small"
-                ></v-icon>
-              </template>
-              <span
-                >{{ tm("card.status.hasUpdate") }}:
-                {{ extension.online_version }}</span
+              <v-tooltip
+                location="top"
+                :text="
+                  extension.display_name?.length &&
+                  extension.display_name !== extension.name
+                    ? `${extension.display_name} (${extension.name})`
+                    : extension.name
+                "
               >
-            </v-tooltip>
-            <v-tooltip
-              location="top"
-              v-if="!extension.activated && !marketMode"
-            >
-              <template v-slot:activator="{ props: tooltipProps }">
-                <v-icon
-                  v-bind="tooltipProps"
-                  color="error"
-                  class="ml-2"
-                  icon="mdi-cancel"
-                  size="small"
-                ></v-icon>
-              </template>
-              <span>{{ tm("card.status.disabled") }}</span>
-            </v-tooltip>
-          </p>
+                <template v-slot:activator="{ props: titleTooltipProps }">
+                  <span v-bind="titleTooltipProps" class="extension-title__text">{{
+                    extension.display_name?.length
+                      ? extension.display_name
+                      : extension.name
+                  }}</span>
+                </template>
+              </v-tooltip>
+              <v-tooltip
+                location="top"
+                v-if="extension?.has_update && !marketMode"
+              >
+                <template v-slot:activator="{ props: tooltipProps }">
+                  <v-icon
+                    v-bind="tooltipProps"
+                    color="warning"
+                    class="ml-2"
+                    icon="mdi-update"
+                    size="small"
+                  ></v-icon>
+                </template>
+                <span
+                  >{{ tm("card.status.hasUpdate") }}:
+                  {{ extension.online_version }}</span
+                >
+              </v-tooltip>
+              <v-tooltip
+                location="top"
+                v-if="!extension.activated && !marketMode"
+              >
+                <template v-slot:activator="{ props: tooltipProps }">
+                  <v-icon
+                    v-bind="tooltipProps"
+                    color="error"
+                    class="ml-2"
+                    icon="mdi-cancel"
+                    size="small"
+                  ></v-icon>
+                </template>
+                <span>{{ tm("card.status.disabled") }}</span>
+              </v-tooltip>
+            </p>
 
-          <div class="mt-1 d-flex flex-wrap">
-            <v-chip color="primary" label size="small">
-              <v-icon icon="mdi-source-branch" start></v-icon>
-              {{ extension.version }}
-            </v-chip>
-            <v-chip
-              v-if="extension?.has_update"
-              color="warning"
-              label
-              size="small"
-              class="ml-2"
-            >
-              <v-icon icon="mdi-arrow-up-bold" start></v-icon>
-              {{ extension.online_version }}
-            </v-chip>
-            <v-chip
-              color="primary"
-              label
-              size="small"
-              class="ml-2"
-              v-if="extension.handlers?.length"
-              @click="viewHandlers"
-              style="cursor: pointer"
-            >
-              <v-icon icon="mdi-cogs" start></v-icon>
-              {{ extension.handlers?.length
-              }}{{ tm("card.status.handlersCount") }}
-            </v-chip>
-            <v-chip
-              v-for="tag in extension.tags"
-              :key="tag"
-              :color="tag === 'danger' ? 'error' : 'primary'"
-              label
-              size="small"
-              class="ml-2"
-            >
-              {{ tag === "danger" ? tm("tags.danger") : tag }}
-            </v-chip>
-            <PluginPlatformChip
-              :platforms="supportPlatforms"
-              class="ml-2"
-            />
-            <v-chip
-              v-if="astrbotVersionRequirement"
-              color="secondary"
-              variant="outlined"
-              label
-              size="small"
-              class="ml-2"
-            >
-              AstrBot: {{ astrbotVersionRequirement }}
-            </v-chip>
+            <template v-if="!marketMode">
+              <v-tooltip location="left">
+                <template v-slot:activator="{ props: tooltipProps }">
+                  <div v-bind="tooltipProps" class="extension-switch-wrap" @click.stop>
+                    <v-switch
+                      :model-value="extension.activated"
+                      color="success"
+                      density="compact"
+                      hide-details
+                      inset
+                      @update:model-value="toggleActivation"
+                    ></v-switch>
+                  </div>
+                </template>
+                <span>{{
+                  extension.activated ? tm("buttons.disable") : tm("buttons.enable")
+                }}</span>
+              </v-tooltip>
+            </template>
+            <template v-else>
+              <div class="extension-market-menu-wrap">
+                <v-menu offset-y>
+                  <template v-slot:activator="{ props: menuProps }">
+                    <v-btn
+                      icon
+                      variant="text"
+                      aria-label="more"
+                      v-if="extension?.repo"
+                      :href="extension?.repo"
+                      target="_blank"
+                    >
+                      <v-icon icon="mdi-github"></v-icon>
+                    </v-btn>
+                    <v-btn v-bind="menuProps" icon variant="text" aria-label="more">
+                      <v-icon icon="mdi-dots-vertical"></v-icon>
+                    </v-btn>
+                  </template>
+
+                  <v-list>
+                    <v-list-item @click="viewReadme">
+                      <v-list-item-title
+                        >📄 {{ tm("buttons.viewDocs") }}</v-list-item-title
+                      >
+                    </v-list-item>
+
+                    <v-list-item
+                      v-if="marketMode && !extension?.installed"
+                      @click="installExtension"
+                    >
+                      <v-list-item-title>
+                        {{ tm("buttons.install") }}</v-list-item-title
+                      >
+                    </v-list-item>
+
+                    <v-list-item v-if="marketMode && extension?.installed">
+                      <v-list-item-title class="text--disabled">{{
+                        tm("status.installed")
+                      }}</v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </div>
+            </template>
           </div>
 
-          <div
-            class="mt-2"
-            :class="{ 'text-caption': $vuetify.display.xs }"
-            style="overflow-y: auto; height: 70px; font-size: 90%"
-          >
-            {{ extension.desc }}
+          <div class="extension-content-row mt-2">
+            <div class="extension-image-container">
+              <img
+                :src="logoSrc"
+                :alt="extension.name"
+                class="extension-logo"
+                @error="logoLoadFailed = true"
+              />
+            </div>
+
+            <div class="extension-meta-group">
+              <div class="extension-chip-group d-flex flex-wrap">
+                <v-chip color="primary" label size="small">
+                  <v-icon icon="mdi-source-branch" start></v-icon>
+                  {{ extension.version }}
+                </v-chip>
+                <v-chip
+                  v-if="extension?.has_update"
+                  color="warning"
+                  label
+                  size="small"
+                >
+                  <v-icon icon="mdi-arrow-up-bold" start></v-icon>
+                  {{ extension.online_version }}
+                </v-chip>
+                <v-chip
+                  v-if="extension.handlers?.length"
+                  color="primary"
+                  label
+                  size="small"
+                  @click="viewHandlers"
+                  style="cursor: pointer"
+                >
+                  <v-icon icon="mdi-cogs" start></v-icon>
+                  {{ extension.handlers?.length
+                  }}{{ tm("card.status.handlersCount") }}
+                </v-chip>
+                <v-chip
+                  v-for="tag in extension.tags"
+                  :key="tag"
+                  :color="tag === 'danger' ? 'error' : 'primary'"
+                  label
+                  size="small"
+                >
+                  {{ tag === "danger" ? tm("tags.danger") : tag }}
+                </v-chip>
+                <PluginPlatformChip :platforms="supportPlatforms" />
+                <v-chip
+                  v-if="astrbotVersionRequirement"
+                  color="secondary"
+                  variant="outlined"
+                  label
+                  size="small"
+                >
+                  AstrBot: {{ astrbotVersionRequirement }}
+                </v-chip>
+              </div>
+
+              <div
+                class="extension-desc"
+                :class="{ 'text-caption': $vuetify.display.xs }"
+              >
+                {{ extension.desc }}
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </v-card-text>
 
-    <v-card-actions class="extension-actions">
-      <v-btn color="primary" size="small" @click="viewReadme">
-        {{ tm("buttons.viewDocs") }}
-      </v-btn>
-      <v-btn v-if="!marketMode" color="primary" size="small" @click="configure">
-        {{ tm("card.actions.pluginConfig") }}
-      </v-btn>
+    <v-card-actions class="extension-actions" @click.stop>
+      <template v-if="!marketMode">
+        <v-spacer></v-spacer>
+        <v-tooltip location="top" :text="tm('buttons.viewDocs')">
+          <template v-slot:activator="{ props: actionProps }">
+            <v-btn
+              v-bind="actionProps"
+              icon="mdi-book-open-page-variant"
+              size="small"
+              variant="tonal"
+              color="info"
+              @click="viewReadme"
+            ></v-btn>
+          </template>
+        </v-tooltip>
+
+        <v-tooltip location="top" :text="tm('card.actions.pluginConfig')">
+          <template v-slot:activator="{ props: actionProps }">
+            <v-btn
+              v-bind="actionProps"
+              icon="mdi-cog"
+              size="small"
+              variant="tonal"
+              color="primary"
+              @click="configure"
+            ></v-btn>
+          </template>
+        </v-tooltip>
+
+        <v-tooltip v-if="extension?.repo" location="top" :text="tm('buttons.viewRepo')">
+          <template v-slot:activator="{ props: actionProps }">
+            <v-btn
+              v-bind="actionProps"
+              icon="mdi-github"
+              size="small"
+              variant="tonal"
+              color="secondary"
+              :href="extension.repo"
+              target="_blank"
+            ></v-btn>
+          </template>
+        </v-tooltip>
+
+        <v-tooltip location="top" :text="tm('card.actions.reloadPlugin')">
+          <template v-slot:activator="{ props: actionProps }">
+            <v-btn
+              v-bind="actionProps"
+              icon="mdi-refresh"
+              size="small"
+              variant="tonal"
+              color="primary"
+              @click="reloadExtension"
+            ></v-btn>
+          </template>
+        </v-tooltip>
+
+        <StyledMenu location="top end" offset="8">
+          <template #activator="{ props: menuProps }">
+            <v-btn
+              v-bind="menuProps"
+              icon="mdi-dots-horizontal"
+              size="small"
+              variant="tonal"
+              color="secondary"
+            ></v-btn>
+          </template>
+
+          <v-list-item class="styled-menu-item" prepend-icon="mdi-information" @click="viewHandlers">
+            <v-list-item-title>{{ tm("buttons.viewInfo") }}</v-list-item-title>
+          </v-list-item>
+
+          <v-list-item class="styled-menu-item" prepend-icon="mdi-update" @click="updateExtension">
+            <v-list-item-title>{{
+              extension.has_update
+                ? tm("card.actions.updateTo") + " " + extension.online_version
+                : tm("card.actions.reinstall")
+            }}</v-list-item-title>
+          </v-list-item>
+
+          <v-list-item class="styled-menu-item" prepend-icon="mdi-delete" @click="uninstallExtension">
+            <v-list-item-title class="text-error">{{ tm("card.actions.uninstallPlugin") }}</v-list-item-title>
+          </v-list-item>
+        </StyledMenu>
+      </template>
+      <template v-else>
+        <v-btn color="primary" size="small" @click="viewReadme">
+          {{ tm("buttons.viewDocs") }}
+        </v-btn>
+      </template>
     </v-card-actions>
   </v-card>
 
@@ -385,13 +450,52 @@ const viewChangelog = () => {
 <style scoped>
 .extension-image-container {
   display: flex;
-  align-items: center;
-  margin-left: 12px;
+  align-items: flex-start;
+  flex-shrink: 0;
+}
+
+.extension-logo {
+  width: 72px;
+  height: 72px;
+  border-radius: 12px;
+  object-fit: cover;
+}
+
+.extension-content-row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.extension-meta-group {
+  flex: 1;
+  min-width: 0;
+}
+
+.extension-chip-group {
+  gap: 8px;
+}
+
+.extension-desc {
+  margin-top: 8px;
+  font-size: 90%;
+  overflow-y: auto;
+  height: 70px;
 }
 
 .extension-title {
   display: flex;
   align-items: center;
+  min-width: 0;
+  flex: 1;
+  margin: 0;
+}
+
+.extension-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .extension-title__text {
@@ -399,17 +503,38 @@ const viewChangelog = () => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding-top: 6px;
+}
+
+.extension-switch-wrap {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.extension-switch-wrap :deep(.v-switch) {
+  margin: 0;
+}
+
+.extension-market-menu-wrap {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
 @media (max-width: 600px) {
-  .extension-image-container {
-    margin-left: 8px;
+  .extension-content-row {
+    flex-direction: column;
+  }
+
+  .extension-logo {
+    width: 64px;
+    height: 64px;
   }
 }
 
 .extension-actions {
   margin-top: auto;
   gap: 8px;
+  justify-content: flex-end;
 }
 </style>
diff --git a/dashboard/src/i18n/locales/en-US/features/extension.json b/dashboard/src/i18n/locales/en-US/features/extension.json
index 3a0a3aaca..8542df208 100644
--- a/dashboard/src/i18n/locales/en-US/features/extension.json
+++ b/dashboard/src/i18n/locales/en-US/features/extension.json
@@ -8,6 +8,9 @@
     "handlersOperation": "Manage Handlers",
     "market": "AstrBot Plugin Market"
   },
+  "titles": {
+    "installedAstrBotPlugins": "Installed AstrBot Plugins"
+  },
   "search": {
     "placeholder": "Search extensions...",
     "marketPlaceholder": "Search market extensions..."
diff --git a/dashboard/src/i18n/locales/zh-CN/features/extension.json b/dashboard/src/i18n/locales/zh-CN/features/extension.json
index b52fadfc7..2208d42ff 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/extension.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/extension.json
@@ -8,6 +8,9 @@
     "skills": "Skills",
     "handlersOperation": "管理行为"
   },
+  "titles": {
+    "installedAstrBotPlugins": "已安装的 AstrBot 插件"
+  },
   "search": {
     "placeholder": "搜索插件...",
     "marketPlaceholder": "搜索市场插件..."
diff --git a/dashboard/src/views/ExtensionPage.vue b/dashboard/src/views/ExtensionPage.vue
index 74a5558fb..026a08f39 100644
--- a/dashboard/src/views/ExtensionPage.vue
+++ b/dashboard/src/views/ExtensionPage.vue
@@ -1,5 +1,4 @@
 <script setup>
-import ExtensionCard from "@/components/shared/ExtensionCard.vue";
 import AstrBotConfig from "@/components/shared/AstrBotConfig.vue";
 import ConsoleDisplayer from "@/components/shared/ConsoleDisplayer.vue";
 import ReadmeDialog from "@/components/shared/ReadmeDialog.vue";
@@ -7,1324 +6,151 @@ import ProxySelector from "@/components/shared/ProxySelector.vue";
 import UninstallConfirmDialog from "@/components/shared/UninstallConfirmDialog.vue";
 import McpServersSection from "@/components/extension/McpServersSection.vue";
 import SkillsSection from "@/components/extension/SkillsSection.vue";
-import MarketPluginCard from "@/components/extension/MarketPluginCard.vue";
 import ComponentPanel from "@/components/extension/componentPanel/index.vue";
-import axios from "axios";
-import { pinyin } from "pinyin-pro";
-import { useCommonStore } from "@/stores/common";
-import { useI18n, useModuleI18n } from "@/i18n/composables";
-import defaultPluginIcon from "@/assets/images/plugin_icon.png";
-import { getPlatformDisplayName } from "@/utils/platformUtils";
-
-import { ref, computed, onMounted, onUnmounted, reactive, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-
-const commonStore = useCommonStore();
-const { t } = useI18n();
-const { tm } = useModuleI18n("features/extension");
-const router = useRouter();
-const route = useRoute();
-
-const getSelectedGitHubProxy = () => {
-  if (typeof window === "undefined" || !window.localStorage) return "";
-  return localStorage.getItem("githubProxyRadioValue") === "1"
-    ? localStorage.getItem("selectedGitHubProxy") || ""
-    : "";
-};
-
-// 检查指令冲突并提示
-const conflictDialog = reactive({
-  show: false,
-  count: 0,
-});
-const checkAndPromptConflicts = async () => {
-  try {
-    const res = await axios.get("/api/commands");
-    if (res.data.status === "ok") {
-      const conflicts = res.data.data.summary?.conflicts || 0;
-      if (conflicts > 0) {
-        conflictDialog.count = conflicts;
-        conflictDialog.show = true;
-      }
-    }
-  } catch (err) {
-    console.debug("Failed to check command conflicts:", err);
-  }
-};
-const handleConflictConfirm = () => {
-  activeTab.value = "commands";
-};
-
-const fileInput = ref(null);
-const activeTab = ref("installed");
-const validTabs = ["installed", "market", "mcp", "skills", "components"];
-const isValidTab = (tab) => validTabs.includes(tab);
-const getLocationHash = () =>
-  typeof window !== "undefined" ? window.location.hash : "";
-const extractTabFromHash = (hash) => {
-  const lastHashIndex = (hash || "").lastIndexOf("#");
-  if (lastHashIndex === -1) return "";
-  return hash.slice(lastHashIndex + 1);
-};
-const syncTabFromHash = (hash) => {
-  const tab = extractTabFromHash(hash);
-  if (isValidTab(tab)) {
-    activeTab.value = tab;
-    return true;
-  }
-  return false;
-};
-const extension_data = reactive({
-  data: [],
-  message: "",
-});
-
-// 从 localStorage 恢复显示系统插件的状态，默认为 false（隐藏）
-const getInitialShowReserved = () => {
-  if (typeof window !== "undefined" && window.localStorage) {
-    const saved = localStorage.getItem("showReservedPlugins");
-    return saved === "true";
-  }
-  return false;
-};
-const showReserved = ref(getInitialShowReserved());
-const snack_message = ref("");
-const snack_show = ref(false);
-const snack_success = ref("success");
-const configDialog = ref(false);
-const extension_config = reactive({
-  metadata: {},
-  config: {},
-});
-const pluginMarketData = ref([]);
-const loadingDialog = reactive({
-  show: false,
-  title: "",
-  statusCode: 0, // 0: loading, 1: success, 2: error,
-  result: "",
-});
-const showPluginInfoDialog = ref(false);
-const selectedPlugin = ref({});
-const curr_namespace = ref("");
-const updatingAll = ref(false);
-
-const readmeDialog = reactive({
-  show: false,
-  pluginName: "",
-  repoUrl: null,
-});
-
-// 强制更新确认对话框
-const forceUpdateDialog = reactive({
-  show: false,
-  extensionName: "",
-});
-
-// 更新全部插件确认对话框
-const updateAllConfirmDialog = reactive({
-  show: false,
-});
-
-// 插件更新日志对话框（复用 ReadmeDialog）
-const changelogDialog = reactive({
-  show: false,
-  pluginName: "",
-  repoUrl: null,
-});
-
-// 新增变量支持列表视图
-// 从 localStorage 恢复显示模式，默认为 false（卡片视图）
-const getInitialListViewMode = () => {
-  if (typeof window !== "undefined" && window.localStorage) {
-    return localStorage.getItem("pluginListViewMode") === "true";
-  }
-  return false;
-};
-const isListView = ref(getInitialListViewMode());
-const pluginSearch = ref("");
-const loading_ = ref(false);
-
-// 分页相关
-const currentPage = ref(1);
-
-// 危险插件确认对话框
-const dangerConfirmDialog = ref(false);
-const selectedDangerPlugin = ref(null);
-const selectedMarketInstallPlugin = ref(null);
-const installCompat = reactive({
-  checked: false,
-  compatible: true,
-  message: "",
-});
-
-// AstrBot 版本范围不兼容警告对话框
-const versionCompatibilityDialog = reactive({
-  show: false,
-  message: "",
-});
-
-// 卸载插件确认对话框（列表模式用）
-const showUninstallDialog = ref(false);
-const pluginToUninstall = ref(null);
-
-// 自定义插件源相关
-const showSourceDialog = ref(false);
-const sourceName = ref("");
-const sourceUrl = ref("");
-const customSources = ref([]);
-const selectedSource = ref(null);
-const showRemoveSourceDialog = ref(false);
-const sourceToRemove = ref(null);
-const editingSource = ref(false);
-const originalSourceUrl = ref("");
-
-// 插件市场相关
-const extension_url = ref("");
-const dialog = ref(false);
-const upload_file = ref(null);
-const uploadTab = ref("file");
-const showPluginFullName = ref(false);
-const marketSearch = ref("");
-const debouncedMarketSearch = ref("");
-const refreshingMarket = ref(false);
-const sortBy = ref("default"); // default, stars, author, updated
-const sortOrder = ref("desc"); // desc (降序) or asc (升序)
-const randomPluginNames = ref([]);
-
-// 插件市场拼音搜索
-const normalizeStr = (s) => (s ?? "").toString().toLowerCase().trim();
-const toPinyinText = (s) =>
-  pinyin(s ?? "", { toneType: "none" })
-    .toLowerCase()
-    .replace(/\s+/g, "");
-const toInitials = (s) =>
-  pinyin(s ?? "", { pattern: "first", toneType: "none" })
-    .toLowerCase()
-    .replace(/\s+/g, "");
-const marketCustomFilter = (value, query, item) => {
-  const q = normalizeStr(query);
-  if (!q) return true;
-
-  const candidates = new Set();
-  if (value != null) candidates.add(String(value));
-  if (item?.name) candidates.add(String(item.name));
-  if (item?.trimmedName) candidates.add(String(item.trimmedName));
-  if (item?.display_name) candidates.add(String(item.display_name));
-  if (item?.desc) candidates.add(String(item.desc));
-  if (item?.author) candidates.add(String(item.author));
-
-  for (const v of candidates) {
-    const nv = normalizeStr(v);
-    if (nv.includes(q)) return true;
-    const pv = toPinyinText(v);
-    if (pv.includes(q)) return true;
-    const iv = toInitials(v);
-    if (iv.includes(q)) return true;
-  }
-  return false;
-};
-
-const plugin_handler_info_headers = computed(() => [
-  { title: tm("table.headers.eventType"), key: "event_type_h" },
-  { title: tm("table.headers.description"), key: "desc", maxWidth: "250px" },
-  { title: tm("table.headers.specificType"), key: "type" },
-  { title: tm("table.headers.trigger"), key: "cmd" },
-]);
-
-// 插件表格的表头定义
-const pluginHeaders = computed(() => [
-  { title: tm("table.headers.name"), key: "name", width: "200px" },
-  { title: tm("table.headers.description"), key: "desc", maxWidth: "250px" },
-  { title: tm("table.headers.version"), key: "version", width: "100px" },
-  { title: tm("table.headers.author"), key: "author", width: "100px" },
-  { title: tm("table.headers.status"), key: "activated", width: "100px" },
-  {
-    title: tm("table.headers.actions"),
-    key: "actions",
-    sortable: false,
-    width: "220px",
-  },
-]);
-
-// 过滤要显示的插件
-const filteredExtensions = computed(() => {
-  const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
-  if (!showReserved.value) {
-    return data.filter((ext) => !ext.reserved);
-  }
-  return data;
-});
-
-// 通过搜索过滤插件
-const filteredPlugins = computed(() => {
-  if (!pluginSearch.value) {
-    return filteredExtensions.value;
-  }
-
-  const search = pluginSearch.value.toLowerCase();
-  return filteredExtensions.value.filter((plugin) => {
-    const supportPlatforms = Array.isArray(plugin.support_platforms)
-      ? plugin.support_platforms.join(" ").toLowerCase()
-      : "";
-    const astrbotVersion = (plugin.astrbot_version ?? "").toLowerCase();
-    return (
-      plugin.name?.toLowerCase().includes(search) ||
-      plugin.desc?.toLowerCase().includes(search) ||
-      plugin.author?.toLowerCase().includes(search) ||
-      supportPlatforms.includes(search) ||
-      astrbotVersion.includes(search)
-    );
-  });
-});
-
-// 过滤后的插件市场数据（带搜索）
-const filteredMarketPlugins = computed(() => {
-  if (!debouncedMarketSearch.value) {
-    return pluginMarketData.value;
-  }
-
-  const search = debouncedMarketSearch.value.toLowerCase();
-  return pluginMarketData.value.filter((plugin) => {
-    // 使用自定义过滤器
-    return (
-      marketCustomFilter(plugin.name, search, plugin) ||
-      marketCustomFilter(plugin.desc, search, plugin) ||
-      marketCustomFilter(plugin.author, search, plugin)
-    );
-  });
-});
-
-// 所有插件列表，推荐插件排在前面
-const sortedPlugins = computed(() => {
-  let plugins = [...filteredMarketPlugins.value];
-
-  // 根据排序选项排序
-  if (sortBy.value === "stars") {
-    // 按 star 数排序
-    plugins.sort((a, b) => {
-      const starsA = a.stars ?? 0;
-      const starsB = b.stars ?? 0;
-      return sortOrder.value === "desc" ? starsB - starsA : starsA - starsB;
-    });
-  } else if (sortBy.value === "author") {
-    // 按作者名字典序排序
-    plugins.sort((a, b) => {
-      const authorA = (a.author ?? "").toLowerCase();
-      const authorB = (b.author ?? "").toLowerCase();
-      const result = authorA.localeCompare(authorB);
-      return sortOrder.value === "desc" ? -result : result;
-    });
-  } else if (sortBy.value === "updated") {
-    // 按更新时间排序
-    plugins.sort((a, b) => {
-      const dateA = a.updated_at ? new Date(a.updated_at).getTime() : 0;
-      const dateB = b.updated_at ? new Date(b.updated_at).getTime() : 0;
-      return sortOrder.value === "desc" ? dateB - dateA : dateA - dateB;
-    });
-  } else {
-    // default: 推荐插件排在前面
-    const pinned = plugins.filter((plugin) => plugin?.pinned);
-    const notPinned = plugins.filter((plugin) => !plugin?.pinned);
-    return [...pinned, ...notPinned];
-  }
-
-  return plugins;
-});
-
-const RANDOM_PLUGINS_COUNT = 6;
-
-const randomPlugins = computed(() => {
-  const allPlugins = pluginMarketData.value;
-  if (allPlugins.length === 0) return [];
-
-  const pluginsByName = new Map(allPlugins.map((plugin) => [plugin.name, plugin]));
-  const selected = randomPluginNames.value
-    .map((name) => pluginsByName.get(name))
-    .filter(Boolean);
-
-  if (selected.length > 0) {
-    return selected;
-  }
-
-  return allPlugins.slice(0, Math.min(RANDOM_PLUGINS_COUNT, allPlugins.length));
-});
-
-const shufflePlugins = (plugins) => {
-  const shuffled = [...plugins];
-  for (let i = shuffled.length - 1; i > 0; i -= 1) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
-  }
-  return shuffled;
-};
-
-const refreshRandomPlugins = () => {
-  const shuffled = shufflePlugins(pluginMarketData.value);
-  randomPluginNames.value = shuffled
-    .slice(0, Math.min(RANDOM_PLUGINS_COUNT, shuffled.length))
-    .map((plugin) => plugin.name);
-};
-
-// 分页计算属性
-const displayItemsPerPage = 9; // 固定每页显示9个卡片（3行）
-
-const totalPages = computed(() => {
-  return Math.ceil(sortedPlugins.value.length / displayItemsPerPage);
-});
-
-const paginatedPlugins = computed(() => {
-  const start = (currentPage.value - 1) * displayItemsPerPage;
-  const end = start + displayItemsPerPage;
-  return sortedPlugins.value.slice(start, end);
-});
-
-const updatableExtensions = computed(() => {
-  const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
-  return data.filter((ext) => ext.has_update);
-});
-
-// 方法
-const toggleShowReserved = () => {
-  showReserved.value = !showReserved.value;
-  // 保存到 localStorage
-  if (typeof window !== "undefined" && window.localStorage) {
-    localStorage.setItem("showReservedPlugins", showReserved.value.toString());
-  }
-};
-
-const toast = (message, success) => {
-  snack_message.value = message;
-  snack_show.value = true;
-  snack_success.value = success;
-};
-
-const resetLoadingDialog = () => {
-  loadingDialog.show = false;
-  loadingDialog.title = tm("dialogs.loading.title");
-  loadingDialog.statusCode = 0;
-  loadingDialog.result = "";
-};
-
-const onLoadingDialogResult = (statusCode, result, timeToClose = 2000) => {
-  loadingDialog.statusCode = statusCode;
-  loadingDialog.result = result;
-  if (timeToClose === -1) return;
-  setTimeout(resetLoadingDialog, timeToClose);
-};
-
-const failedPluginsDict = ref({});
-
-const getExtensions = async () => {
-  loading_.value = true;
-  try {
-    const res = await axios.get("/api/plugin/get");   
-    Object.assign(extension_data, res.data);
-    
-    const failRes = await axios.get("/api/plugin/source/get-failed-plugins");    
-    failedPluginsDict.value = failRes.data.data || {};
-    
-    checkUpdate();
-  } catch (err) {
-    toast(err, "error");
-  } finally {
-    loading_.value = false;
-  }
-};
-
-const handleReloadAllFailed = async () => {
-    const dirNames = Object.keys(failedPluginsDict.value);
-    if (dirNames.length === 0) {
-        toast("没有需要重载的失败插件", "info");
-        return;
-    }
-
-    loading_.value = true;
-    try {
-        const promises = dirNames.map(dir => 
-            axios.post("/api/plugin/reload-failed", { dir_name: dir })
-        );
-        await Promise.all(promises);
-        
-        toast("已尝试重载所有失败插件", "success");
-        
-        // 清空 message 关闭对话框
-        extension_data.message = "";
-        
-        // 刷新列表
-        await getExtensions();
-        
-    } catch (e) {
-        console.error("重载失败:", e);
-        toast("批量重载过程中出现错误", "error");
-    } finally {
-        loading_.value = false;
-    }
-};
-
-const checkUpdate = () => {
-  const onlinePluginsMap = new Map();
-  const onlinePluginsNameMap = new Map();
-
-  pluginMarketData.value.forEach((plugin) => {
-    if (plugin.repo) {
-      onlinePluginsMap.set(plugin.repo.toLowerCase(), plugin);
-    }
-    onlinePluginsNameMap.set(plugin.name, plugin);
-  });
-
-  const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
-  data.forEach((extension) => {
-    const repoKey = extension.repo?.toLowerCase();
-    const onlinePlugin = repoKey ? onlinePluginsMap.get(repoKey) : null;
-    const onlinePluginByName = onlinePluginsNameMap.get(extension.name);
-    const matchedPlugin = onlinePlugin || onlinePluginByName;
-
-    if (matchedPlugin) {
-      extension.online_version = matchedPlugin.version;
-      extension.has_update =
-        extension.version !== matchedPlugin.version &&
-        matchedPlugin.version !== tm("status.unknown");
-    } else {
-      extension.has_update = false;
-    }
-  });
-};
-
-const uninstallExtension = async (
-  extension_name,
-  optionsOrSkipConfirm = false,
-) => {
-  let deleteConfig = false;
-  let deleteData = false;
-  let skipConfirm = false;
-
-  // 处理参数：可能是布尔值（旧的 skipConfirm）或对象（新的选项）
-  if (typeof optionsOrSkipConfirm === "boolean") {
-    skipConfirm = optionsOrSkipConfirm;
-  } else if (
-    typeof optionsOrSkipConfirm === "object" &&
-    optionsOrSkipConfirm !== null
-  ) {
-    deleteConfig = optionsOrSkipConfirm.deleteConfig || false;
-    deleteData = optionsOrSkipConfirm.deleteData || false;
-    skipConfirm = true; // 如果传递了选项对象，说明已经确认过了
-  }
-
-  // 如果没有跳过确认且没有传递选项对象，显示自定义卸载对话框
-  if (!skipConfirm) {
-    pluginToUninstall.value = extension_name;
-    showUninstallDialog.value = true;
-    return; // 等待对话框回调
-  }
-
-  // 执行卸载
-  toast(tm("messages.uninstalling") + " " + extension_name, "primary");
-  try {
-    const res = await axios.post("/api/plugin/uninstall", {
-      name: extension_name,
-      delete_config: deleteConfig,
-      delete_data: deleteData,
-    });
-    if (res.data.status === "error") {
-      toast(res.data.message, "error");
-      return;
-    }
-    Object.assign(extension_data, res.data);
-    toast(res.data.message, "success");
-    getExtensions();
-  } catch (err) {
-    toast(err, "error");
-  }
-};
-
-// 处理卸载确认对话框的确认事件
-const handleUninstallConfirm = (options) => {
-  if (pluginToUninstall.value) {
-    uninstallExtension(pluginToUninstall.value, options);
-    pluginToUninstall.value = null;
-  }
-};
-
-const updateExtension = async (extension_name, forceUpdate = false) => {
-  // 查找插件信息
-  const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
-  const ext = data.find((e) => e.name === extension_name);
-
-  // 如果没有检测到更新且不是强制更新，则弹窗确认
-  if (!ext?.has_update && !forceUpdate) {
-    forceUpdateDialog.extensionName = extension_name;
-    forceUpdateDialog.show = true;
-    return;
-  }
-
-  loadingDialog.title = tm("status.loading");
-  loadingDialog.show = true;
-  try {
-    const res = await axios.post("/api/plugin/update", {
-      name: extension_name,
-      proxy: getSelectedGitHubProxy(),
-    });
-
-    if (res.data.status === "error") {
-      onLoadingDialogResult(2, res.data.message, -1);
-      return;
-    }
-
-    Object.assign(extension_data, res.data);
-    onLoadingDialogResult(1, res.data.message);
-    setTimeout(async () => {
-      toast(tm("messages.refreshing"), "info", 2000);
-      try {
-        await getExtensions();
-        toast(tm("messages.refreshSuccess"), "success");
-
-        // 更新完成后弹出更新日志
-        viewChangelog({
-          name: extension_name,
-          repo: ext?.repo || null,
-        });
-      } catch (error) {
-        const errorMsg =
-          error.response?.data?.message || error.message || String(error);
-        toast(`${tm("messages.refreshFailed")}: ${errorMsg}`, "error");
-      }
-    }, 1000);
-  } catch (err) {
-    toast(err, "error");
-  }
-};
-
-// 确认强制更新
-// 显示更新全部插件确认对话框
-const showUpdateAllConfirm = () => {
-  if (updatableExtensions.value.length === 0) return;
-  updateAllConfirmDialog.show = true;
-};
-
-// 确认更新全部插件
-const confirmUpdateAll = () => {
-  updateAllConfirmDialog.show = false;
-  updateAllExtensions();
-};
-
-// 取消更新全部插件
-const cancelUpdateAll = () => {
-  updateAllConfirmDialog.show = false;
-};
-
-const confirmForceUpdate = () => {
-  const name = forceUpdateDialog.extensionName;
-  forceUpdateDialog.show = false;
-  forceUpdateDialog.extensionName = "";
-  updateExtension(name, true);
-};
-
-const updateAllExtensions = async () => {
-  if (updatingAll.value || updatableExtensions.value.length === 0) return;
-  updatingAll.value = true;
-  loadingDialog.title = tm("status.loading");
-  loadingDialog.statusCode = 0;
-  loadingDialog.result = "";
-  loadingDialog.show = true;
-
-  const targets = updatableExtensions.value.map((ext) => ext.name);
-  try {
-    const res = await axios.post("/api/plugin/update-all", {
-      names: targets,
-      proxy: getSelectedGitHubProxy(),
-    });
-
-    if (res.data.status === "error") {
-      onLoadingDialogResult(
-        2,
-        res.data.message ||
-          tm("messages.updateAllFailed", {
-            failed: targets.length,
-            total: targets.length,
-          }),
-        -1,
-      );
-      return;
-    }
-
-    const results = res.data.data?.results || [];
-    const failures = results.filter((r) => r.status !== "ok");
-    try {
-      await getExtensions();
-    } catch (err) {
-      const errorMsg =
-        err.response?.data?.message || err.message || String(err);
-      failures.push({ name: "refresh", status: "error", message: errorMsg });
-    }
-
-    if (failures.length === 0) {
-      onLoadingDialogResult(1, tm("messages.updateAllSuccess"));
-    } else {
-      const failureText = tm("messages.updateAllFailed", {
-        failed: failures.length,
-        total: targets.length,
-      });
-      const detail = failures.map((f) => `${f.name}: ${f.message}`).join("\n");
-      onLoadingDialogResult(2, `${failureText}\n${detail}`, -1);
-    }
-  } catch (err) {
-    const errorMsg = err.response?.data?.message || err.message || String(err);
-    onLoadingDialogResult(2, errorMsg, -1);
-  } finally {
-    updatingAll.value = false;
-  }
-};
-
-const pluginOn = async (extension) => {
-  try {
-    const res = await axios.post("/api/plugin/on", { name: extension.name });
-    if (res.data.status === "error") {
-      toast(res.data.message, "error");
-      return;
-    }
-    toast(res.data.message, "success");
-    await getExtensions();
-
-    await checkAndPromptConflicts();
-  } catch (err) {
-    toast(err, "error");
-  }
-};
-
-const pluginOff = async (extension) => {
-  try {
-    const res = await axios.post("/api/plugin/off", { name: extension.name });
-    if (res.data.status === "error") {
-      toast(res.data.message, "error");
-      return;
-    }
-    toast(res.data.message, "success");
-    getExtensions();
-  } catch (err) {
-    toast(err, "error");
-  }
-};
-
-const openExtensionConfig = async (extension_name) => {
-  curr_namespace.value = extension_name;
-  configDialog.value = true;
-  try {
-    const res = await axios.get(
-      "/api/config/get?plugin_name=" + extension_name,
-    );
-    extension_config.metadata = res.data.data.metadata;
-    extension_config.config = res.data.data.config;
-  } catch (err) {
-    toast(err, "error");
-  }
-};
-
-const updateConfig = async () => {
-  try {
-    const res = await axios.post(
-      "/api/config/plugin/update?plugin_name=" + curr_namespace.value,
-      extension_config.config,
-    );
-    if (res.data.status === "ok") {
-      toast(res.data.message, "success");
-    } else {
-      toast(res.data.message, "error");
-    }
-    configDialog.value = false;
-    extension_config.metadata = {};
-    extension_config.config = {};
-    getExtensions();
-  } catch (err) {
-    toast(err, "error");
-  }
-};
-
-const showPluginInfo = (plugin) => {
-  selectedPlugin.value = plugin;
-  showPluginInfoDialog.value = true;
-};
-
-const reloadPlugin = async (plugin_name) => {
-  try {
-    const res = await axios.post("/api/plugin/reload", { name: plugin_name });
-    await getExtensions();
-    if (res.data.status === "error") {
-      toast(res.data.message, "error");
-      return;
-    }
-    toast(tm("messages.reloadSuccess"), "success");
-    //getExtensions();
-  } catch (err) {
-    toast(err, "error");
-  }
-};
-
-const viewReadme = (plugin) => {
-  readmeDialog.pluginName = plugin.name;
-  readmeDialog.repoUrl = plugin.repo;
-  readmeDialog.show = true;
-};
-
-// 查看更新日志
-const viewChangelog = (plugin) => {
-  changelogDialog.pluginName = plugin.name;
-  changelogDialog.repoUrl = plugin.repo;
-  changelogDialog.show = true;
-};
-
-// 为表格视图创建一个处理安装插件的函数
-const handleInstallPlugin = async (plugin) => {
-  if (plugin.tags && plugin.tags.includes("danger")) {
-    selectedDangerPlugin.value = plugin;
-    dangerConfirmDialog.value = true;
-  } else {
-    selectedMarketInstallPlugin.value = plugin;
-    extension_url.value = plugin.repo;
-    dialog.value = true;
-    uploadTab.value = "url";
-  }
-};
-
-// 确认安装危险插件
-const confirmDangerInstall = () => {
-  if (selectedDangerPlugin.value) {
-    selectedMarketInstallPlugin.value = selectedDangerPlugin.value;
-    extension_url.value = selectedDangerPlugin.value.repo;
-    dialog.value = true;
-    uploadTab.value = "url";
-  }
-  dangerConfirmDialog.value = false;
-  selectedDangerPlugin.value = null;
-};
-
-// 取消安装危险插件
-const cancelDangerInstall = () => {
-  dangerConfirmDialog.value = false;
-  selectedDangerPlugin.value = null;
-};
-
-// 自定义插件源管理方法
-const loadCustomSources = async () => {
-  try {
-    const res = await axios.get("/api/plugin/source/get");
-    if (res.data.status === "ok") {
-      customSources.value = res.data.data;
-    } else {
-      toast(res.data.message, "error");
-    }
-  } catch (e) {
-    console.warn("Failed to load custom sources:", e);
-    customSources.value = [];
-  }
-
-  // 加载当前选中的插件源
-  const currentSource = localStorage.getItem("selectedPluginSource");
-  if (currentSource) {
-    selectedSource.value = currentSource;
-  }
-};
-
-const saveCustomSources = async () => {
-  try {
-    const res = await axios.post("/api/plugin/source/save", {
-      sources: customSources.value,
-    });
-    if (res.data.status !== "ok") {
-      toast(res.data.message, "error");
-    }
-  } catch (e) {
-    toast(e, "error");
-  }
-};
-
-const addCustomSource = () => {
-  editingSource.value = false;
-  originalSourceUrl.value = "";
-  sourceName.value = "";
-  sourceUrl.value = "";
-  showSourceDialog.value = true;
-};
-
-const selectPluginSource = (sourceUrl) => {
-  selectedSource.value = sourceUrl;
-  if (sourceUrl) {
-    localStorage.setItem("selectedPluginSource", sourceUrl);
-  } else {
-    localStorage.removeItem("selectedPluginSource");
-  }
-  // 重新加载插件市场数据
-  refreshPluginMarket();
-};
-
-// 获取当前选中的源对象
-const selectedSourceObj = computed(() => {
-  if (!selectedSource.value) return null;
-  return (
-    customSources.value.find((s) => s.url === selectedSource.value) || null
-  );
-});
-
-const editCustomSource = (source) => {
-  if (!source) return;
-  editingSource.value = true;
-  originalSourceUrl.value = source.url;
-  sourceName.value = source.name;
-  sourceUrl.value = source.url;
-  showSourceDialog.value = true;
-};
-
-const removeCustomSource = (source) => {
-  if (!source) return;
-  sourceToRemove.value = source;
-  showRemoveSourceDialog.value = true;
-};
-
-const confirmRemoveSource = () => {
-  if (sourceToRemove.value) {
-    customSources.value = customSources.value.filter(
-      (s) => s.url !== sourceToRemove.value.url,
-    );
-    saveCustomSources();
-
-    // 如果删除的是当前选中的源，切换到默认源
-    if (selectedSource.value === sourceToRemove.value.url) {
-      selectedSource.value = null;
-      localStorage.removeItem("selectedPluginSource");
-      // 重新加载插件市场数据
-      refreshPluginMarket();
-    }
-
-    toast(tm("market.sourceRemoved"), "success");
-    showRemoveSourceDialog.value = false;
-    sourceToRemove.value = null;
-  }
-};
-
-const saveCustomSource = () => {
-  const normalizedUrl = sourceUrl.value.trim();
-
-  if (!sourceName.value.trim() || !normalizedUrl) {
-    toast(tm("messages.fillSourceNameAndUrl"), "error");
-    return;
-  }
-
-  // 检查URL格式
-  try {
-    new URL(normalizedUrl);
-  } catch (e) {
-    toast(tm("messages.invalidUrl"), "error");
-    return;
-  }
-
-  if (editingSource.value) {
-    // 编辑模式：更新现有源
-    const index = customSources.value.findIndex(
-      (s) => s.url === originalSourceUrl.value,
-    );
-    if (index !== -1) {
-      customSources.value[index] = {
-        name: sourceName.value.trim(),
-        url: normalizedUrl,
-      };
-
-      // 如果编辑的是当前选中的源，更新选中源
-      if (selectedSource.value === originalSourceUrl.value) {
-        selectedSource.value = normalizedUrl;
-        localStorage.setItem("selectedPluginSource", selectedSource.value);
-        // 重新加载插件市场数据
-        refreshPluginMarket();
-      }
-    }
-  } else {
-    // 添加模式：检查是否已存在
-    if (customSources.value.some((source) => source.url === normalizedUrl)) {
-      toast(tm("market.sourceExists"), "error");
-      return;
-    }
-
-    customSources.value.push({
-      name: sourceName.value.trim(),
-      url: normalizedUrl,
-    });
-  }
-
-  saveCustomSources();
-  toast(
-    editingSource.value ? tm("market.sourceUpdated") : tm("market.sourceAdded"),
-    "success",
-  );
-
-  // 重置表单
-  sourceName.value = "";
-  sourceUrl.value = "";
-  editingSource.value = false;
-  originalSourceUrl.value = "";
-  showSourceDialog.value = false;
-};
-
-// 插件市场显示完整插件名称
-const trimExtensionName = () => {
-  pluginMarketData.value.forEach((plugin) => {
-    if (plugin.name) {
-      let name = plugin.name.trim().toLowerCase();
-      if (name.startsWith("astrbot_plugin_")) {
-        plugin.trimmedName = name.substring(15);
-      } else if (name.startsWith("astrbot_") || name.startsWith("astrbot-")) {
-        plugin.trimmedName = name.substring(8);
-      } else plugin.trimmedName = plugin.name;
-    }
-  });
-};
-
-const checkAlreadyInstalled = () => {
-  const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
-  const installedRepos = new Set(data.map((ext) => ext.repo?.toLowerCase()));
-  const installedNames = new Set(data.map((ext) => ext.name));
-  const installedByRepo = new Map(
-    data
-      .filter((ext) => ext.repo)
-      .map((ext) => [ext.repo.toLowerCase(), ext]),
-  );
-  const installedByName = new Map(data.map((ext) => [ext.name, ext]));
-
-  for (let i = 0; i < pluginMarketData.value.length; i++) {
-    const plugin = pluginMarketData.value[i];
-    const matchedInstalled =
-      (plugin.repo && installedByRepo.get(plugin.repo.toLowerCase())) ||
-      installedByName.get(plugin.name);
-
-    // 兜底：市场源未提供字段时，回填本地已安装插件中的元数据，便于在市场页直接展示
-    if (matchedInstalled) {
-      if (
-        (!Array.isArray(plugin.support_platforms) ||
-          plugin.support_platforms.length === 0) &&
-        Array.isArray(matchedInstalled.support_platforms)
-      ) {
-        plugin.support_platforms = matchedInstalled.support_platforms;
-      }
-      if (!plugin.astrbot_version && matchedInstalled.astrbot_version) {
-        plugin.astrbot_version = matchedInstalled.astrbot_version;
-      }
-    }
-
-    plugin.installed =
-      installedRepos.has(plugin.repo?.toLowerCase()) ||
-      installedNames.has(plugin.name);
-  }
-
-  let installed = [];
-  let notInstalled = [];
-  for (let i = 0; i < pluginMarketData.value.length; i++) {
-    if (pluginMarketData.value[i].installed) {
-      installed.push(pluginMarketData.value[i]);
-    } else {
-      notInstalled.push(pluginMarketData.value[i]);
-    }
-  }
-  pluginMarketData.value = notInstalled.concat(installed);
-};
-
-const showVersionCompatibilityWarning = (message) => {
-  versionCompatibilityDialog.message = message;
-  versionCompatibilityDialog.show = true;
-};
-
-const continueInstallIgnoringVersionWarning = async () => {
-  versionCompatibilityDialog.show = false;
-  await newExtension(true);
-};
-
-const cancelInstallOnVersionWarning = () => {
-  versionCompatibilityDialog.show = false;
-};
-
-const newExtension = async (ignoreVersionCheck = false) => {
-  if (extension_url.value === "" && upload_file.value === null) {
-    toast(tm("messages.fillUrlOrFile"), "error");
-    return;
-  }
-
-  if (extension_url.value !== "" && upload_file.value !== null) {
-    toast(tm("messages.dontFillBoth"), "error");
-    return;
-  }
-  loading_.value = true;
-  loadingDialog.title = tm("status.loading");
-  loadingDialog.show = true;
-  if (upload_file.value !== null) {
-    toast(tm("messages.installing"), "primary");
-    const formData = new FormData();
-    formData.append("file", upload_file.value);
-    formData.append("ignore_version_check", String(ignoreVersionCheck));
-    axios
-      .post("/api/plugin/install-upload", formData, {
-        headers: {
-          "Content-Type": "multipart/form-data",
-        },
-      })
-      .then(async (res) => {
-        loading_.value = false;
-        if (
-          res.data.status === "warning" &&
-          res.data.data?.warning_type === "astrbot_version_incompatible"
-        ) {
-          onLoadingDialogResult(2, res.data.message, -1);
-          showVersionCompatibilityWarning(res.data.message);
-          return;
-        }
-        if (res.data.status === "error") {
-          onLoadingDialogResult(2, res.data.message, -1);
-          return;
-        }
-        upload_file.value = null;
-        onLoadingDialogResult(1, res.data.message);
-        dialog.value = false;
-        await getExtensions();
-
-        viewReadme({
-          name: res.data.data.name,
-          repo: res.data.data.repo || null,
-        });
-
-        await checkAndPromptConflicts();
-      })
-      .catch((err) => {
-        loading_.value = false;
-        onLoadingDialogResult(2, err, -1);
-      });
-  } else {
-    toast(
-      tm("messages.installingFromUrl") + " " + extension_url.value,
-      "primary",
-    );
-    axios
-      .post("/api/plugin/install", {
-        url: extension_url.value,
-        proxy: getSelectedGitHubProxy(),
-        ignore_version_check: ignoreVersionCheck,
-      })
-      .then(async (res) => {
-        loading_.value = false;
-        if (
-          res.data.status === "warning" &&
-          res.data.data?.warning_type === "astrbot_version_incompatible"
-        ) {
-          onLoadingDialogResult(2, res.data.message, -1);
-          showVersionCompatibilityWarning(res.data.message);
-          return;
-        }
-        toast(res.data.message, res.data.status === "ok" ? "success" : "error");
-        if (res.data.status === "error") {
-          onLoadingDialogResult(2, res.data.message, -1);
-          return;
-        }
-        extension_url.value = "";
-        onLoadingDialogResult(1, res.data.message);
-        dialog.value = false;
-        await getExtensions();
-
-        viewReadme({
-          name: res.data.data.name,
-          repo: res.data.data.repo || null,
-        });
-
-        await checkAndPromptConflicts();
-      })
-      .catch((err) => {
-        loading_.value = false;
-        toast(tm("messages.installFailed") + " " + err, "error");
-        onLoadingDialogResult(2, err, -1);
-      });
-  }
-};
-
-const normalizePlatformList = (platforms) => {
-  if (!Array.isArray(platforms)) return [];
-  return platforms.filter((item) => typeof item === "string");
-};
-
-const getPlatformDisplayList = (platforms) => {
-  return normalizePlatformList(platforms).map((platformId) =>
-    getPlatformDisplayName(platformId),
-  );
-};
-
-const resolveSelectedInstallPlugin = () => {
-  if (
-    selectedMarketInstallPlugin.value &&
-    selectedMarketInstallPlugin.value.repo === extension_url.value
-  ) {
-    return selectedMarketInstallPlugin.value;
-  }
-  return pluginMarketData.value.find((plugin) => plugin.repo === extension_url.value) || null;
-};
-
-const selectedInstallPlugin = computed(() => resolveSelectedInstallPlugin());
-
-const checkInstallCompatibility = async () => {
-  installCompat.checked = false;
-  installCompat.compatible = true;
-  installCompat.message = "";
-
-  const plugin = selectedInstallPlugin.value;
-  if (!plugin?.astrbot_version || uploadTab.value !== "url") {
-    return;
-  }
-
-  try {
-    const res = await axios.post("/api/plugin/check-compat", {
-      astrbot_version: plugin.astrbot_version,
-    });
-    if (res.data.status === "ok") {
-      installCompat.checked = true;
-      installCompat.compatible = !!res.data.data?.compatible;
-      installCompat.message = res.data.data?.message || "";
-    }
-  } catch (err) {
-    console.debug("Failed to check plugin compatibility:", err);
-  }
-};
-
-// 刷新插件市场数据
-const refreshPluginMarket = async () => {
-  refreshingMarket.value = true;
-  try {
-    // 强制刷新插件市场数据
-    const data = await commonStore.getPluginCollections(
-      true,
-      selectedSource.value,
-    );
-    pluginMarketData.value = data;
-    trimExtensionName();
-    checkAlreadyInstalled();
-    checkUpdate();
-    refreshRandomPlugins();
-    currentPage.value = 1; // 重置到第一页
-
-    toast(tm("messages.refreshSuccess"), "success");
-  } catch (err) {
-    toast(tm("messages.refreshFailed") + " " + err, "error");
-  } finally {
-    refreshingMarket.value = false;
-  }
-};
-
-// 生命周期
-onMounted(async () => {
-  if (!syncTabFromHash(getLocationHash())) {
-    if (typeof window !== "undefined") {
-      window.location.hash = `#${activeTab.value}`;
-    }
-  }
-  await getExtensions();
-
-  // 加载自定义插件源
-  loadCustomSources();
-
-  // 检查是否有 open_config 参数
-  let urlParams;
-  if (window.location.hash) {
-    // For hash mode (#/path?param=value)
-    const hashQuery = window.location.hash.split("?")[1] || "";
-    urlParams = new URLSearchParams(hashQuery);
-  } else {
-    // For history mode (/path?param=value)
-    urlParams = new URLSearchParams(window.location.search);
-  }
-  console.log("URL Parameters:", urlParams.toString());
-  const plugin_name = urlParams.get("open_config");
-  if (plugin_name) {
-    console.log(`Opening config for plugin: ${plugin_name}`);
-    openExtensionConfig(plugin_name);
-  }
-
-  try {
-    const data = await commonStore.getPluginCollections(
-      false,
-      selectedSource.value,
-    );
-    pluginMarketData.value = data;
-    trimExtensionName();
-    checkAlreadyInstalled();
-    checkUpdate();
-    refreshRandomPlugins();
-  } catch (err) {
-    toast(tm("messages.getMarketDataFailed") + " " + err, "error");
-  }
-});
-
-// 处理语言切换事件，重新加载插件配置以获取插件的 i18n 数据
-const handleLocaleChange = () => {
-  // 如果配置对话框是打开的，重新加载当前插件的配置
-  if (configDialog.value && currentConfigPlugin.value) {
-    openExtensionConfig(currentConfigPlugin.value);
-  }
-};
-
-// 监听语言切换事件
-window.addEventListener("astrbot-locale-changed", handleLocaleChange);
-
-// 清理事件监听器
-onUnmounted(() => {
-  window.removeEventListener("astrbot-locale-changed", handleLocaleChange);
-});
-
-// 搜索防抖处理
-let searchDebounceTimer = null;
-watch(marketSearch, (newVal) => {
-  if (searchDebounceTimer) {
-    clearTimeout(searchDebounceTimer);
-  }
-
-  searchDebounceTimer = setTimeout(() => {
-    debouncedMarketSearch.value = newVal;
-    // 搜索时重置到第一页
-    currentPage.value = 1;
-  }, 300); // 300ms 防抖延迟
-});
-
-// 监听显示模式变化并保存到 localStorage
-watch(isListView, (newVal) => {
-  if (typeof window !== "undefined" && window.localStorage) {
-    localStorage.setItem("pluginListViewMode", String(newVal));
-  }
-});
-
-watch(
-  [() => dialog.value, () => extension_url.value, () => uploadTab.value],
-  async ([dialogOpen, _, currentUploadTab]) => {
-    if (!dialogOpen || currentUploadTab !== "url") {
-      installCompat.checked = false;
-      installCompat.compatible = true;
-      installCompat.message = "";
-      return;
-    }
-    await checkInstallCompatibility();
-  },
-);
-
-watch(
-  () => route.fullPath,
-  () => {
-    const tab = extractTabFromHash(getLocationHash());
-    if (isValidTab(tab) && tab !== activeTab.value) {
-      activeTab.value = tab;
-    }
-  },
-);
-
-watch(activeTab, (newTab) => {
-  if (!isValidTab(newTab)) return;
-  const currentTab = extractTabFromHash(getLocationHash());
-  if (currentTab === newTab) return;
-  const hash = getLocationHash();
-  const lastHashIndex = hash.lastIndexOf("#");
-  const nextHash =
-    lastHashIndex > 0 ? `${hash.slice(0, lastHashIndex)}#${newTab}` : `#${newTab}`;
-  if (typeof window !== "undefined") {
-    window.location.hash = nextHash;
-  }
-});
+import InstalledPluginsTab from "./extension/InstalledPluginsTab.vue";
+import MarketPluginsTab from "./extension/MarketPluginsTab.vue";
+import { useExtensionPage } from "./extension/useExtensionPage";
+
+const pageState = useExtensionPage();
+
+const {
+  commonStore,
+  t,
+  tm,
+  router,
+  route,
+  getSelectedGitHubProxy,
+  conflictDialog,
+  checkAndPromptConflicts,
+  handleConflictConfirm,
+  fileInput,
+  activeTab,
+  validTabs,
+  isValidTab,
+  getLocationHash,
+  extractTabFromHash,
+  syncTabFromHash,
+  extension_data,
+  getInitialShowReserved,
+  showReserved,
+  snack_message,
+  snack_show,
+  snack_success,
+  configDialog,
+  extension_config,
+  pluginMarketData,
+  loadingDialog,
+  showPluginInfoDialog,
+  selectedPlugin,
+  curr_namespace,
+  updatingAll,
+  readmeDialog,
+  forceUpdateDialog,
+  updateAllConfirmDialog,
+  changelogDialog,
+  getInitialListViewMode,
+  isListView,
+  pluginSearch,
+  loading_,
+  currentPage,
+  dangerConfirmDialog,
+  selectedDangerPlugin,
+  selectedMarketInstallPlugin,
+  installCompat,
+  versionCompatibilityDialog,
+  showUninstallDialog,
+  pluginToUninstall,
+  showSourceDialog,
+  showSourceManagerDialog,
+  sourceName,
+  sourceUrl,
+  customSources,
+  selectedSource,
+  showRemoveSourceDialog,
+  sourceToRemove,
+  editingSource,
+  originalSourceUrl,
+  extension_url,
+  dialog,
+  upload_file,
+  uploadTab,
+  showPluginFullName,
+  marketSearch,
+  debouncedMarketSearch,
+  refreshingMarket,
+  sortBy,
+  sortOrder,
+  randomPluginNames,
+  normalizeStr,
+  toPinyinText,
+  toInitials,
+  marketCustomFilter,
+  plugin_handler_info_headers,
+  pluginHeaders,
+  filteredExtensions,
+  filteredPlugins,
+  filteredMarketPlugins,
+  sortedPlugins,
+  RANDOM_PLUGINS_COUNT,
+  randomPlugins,
+  shufflePlugins,
+  refreshRandomPlugins,
+  displayItemsPerPage,
+  totalPages,
+  paginatedPlugins,
+  updatableExtensions,
+  toggleShowReserved,
+  toast,
+  resetLoadingDialog,
+  onLoadingDialogResult,
+  failedPluginsDict,
+  getExtensions,
+  handleReloadAllFailed,
+  checkUpdate,
+  uninstallExtension,
+  handleUninstallConfirm,
+  updateExtension,
+  showUpdateAllConfirm,
+  confirmUpdateAll,
+  cancelUpdateAll,
+  confirmForceUpdate,
+  updateAllExtensions,
+  pluginOn,
+  pluginOff,
+  openExtensionConfig,
+  updateConfig,
+  showPluginInfo,
+  reloadPlugin,
+  viewReadme,
+  viewChangelog,
+  handleInstallPlugin,
+  confirmDangerInstall,
+  cancelDangerInstall,
+  loadCustomSources,
+  saveCustomSources,
+  addCustomSource,
+  openSourceManagerDialog,
+  selectPluginSource,
+  sourceSelectItems,
+  editCustomSource,
+  removeCustomSource,
+  confirmRemoveSource,
+  saveCustomSource,
+  trimExtensionName,
+  checkAlreadyInstalled,
+  showVersionCompatibilityWarning,
+  continueInstallIgnoringVersionWarning,
+  cancelInstallOnVersionWarning,
+  newExtension,
+  normalizePlatformList,
+  getPlatformDisplayList,
+  resolveSelectedInstallPlugin,
+  selectedInstallPlugin,
+  checkInstallCompatibility,
+  refreshPluginMarket,
+  handleLocaleChange,
+  searchDebounceTimer,
+} = pageState;
 </script>
 
 <template>
@@ -1333,523 +159,16 @@ watch(activeTab, (newTab) => {
       <v-card variant="flat" style="background-color: transparent">
         <!-- 标签页 -->
         <v-card-text style="padding: 0px 12px">
-          <!-- 标签栏和搜索栏 - 响应式布局 -->
-          <div class="mb-4 d-flex flex-wrap">
-            <!-- 标签栏 -->
-            <v-tabs v-model="activeTab" color="primary">
-              <v-tab value="installed">
-                <v-icon class="mr-2">mdi-puzzle</v-icon>
-                {{ tm("tabs.installedPlugins") }}
-              </v-tab>
-              <v-tab value="market">
-                <v-icon class="mr-2">mdi-store</v-icon>
-                {{ tm("tabs.market") }}
-              </v-tab>
-              <v-tab value="mcp">
-                <v-icon class="mr-2">mdi-server-network</v-icon>
-                {{ tm("tabs.installedMcpServers") }}
-              </v-tab>
-              <v-tab value="skills">
-                <v-icon class="mr-2">mdi-lightning-bolt</v-icon>
-                {{ tm("tabs.skills") }}
-              </v-tab>
-              <v-tab value="components">
-                <v-icon class="mr-2">mdi-wrench</v-icon>
-                {{ tm("tabs.handlersOperation") }}
-              </v-tab>
-            </v-tabs>
-
-            <!-- 搜索栏 - 在移动端时独占一行 -->
-            <div
-              style="
-                flex-grow: 1;
-                min-width: 250px;
-                max-width: 400px;
-                margin-left: auto;
-                margin-top: 8px;
-              "
-            >
-              <v-text-field
-                v-if="activeTab === 'market'"
-                v-model="marketSearch"
-                density="compact"
-                :label="tm('search.marketPlaceholder')"
-                prepend-inner-icon="mdi-magnify"
-                variant="solo-filled"
-                flat
-                hide-details
-                single-line
-              >
-              </v-text-field>
-              <v-text-field
-                v-else-if="activeTab === 'installed'"
-                v-model="pluginSearch"
-                density="compact"
-                :label="tm('search.placeholder')"
-                prepend-inner-icon="mdi-magnify"
-                variant="solo-filled"
-                flat
-                hide-details
-                single-line
-              >
-              </v-text-field>
-            </div>
-          </div>
-
           <!-- 已安装插件标签页内容 -->
-          <v-tab-item v-show="activeTab === 'installed'">
-            <v-row class="mb-4">
-              <v-col cols="12" class="d-flex align-center flex-wrap ga-2">
-                <v-btn-group
-                  variant="outlined"
-                  density="comfortable"
-                  color="primary"
-                >
-                  <v-btn
-                    @click="isListView = false"
-                    :color="!isListView ? 'primary' : undefined"
-                    :variant="!isListView ? 'flat' : 'outlined'"
-                  >
-                    <v-icon>mdi-view-grid</v-icon>
-                  </v-btn>
-                  <v-btn
-                    @click="isListView = true"
-                    :color="isListView ? 'primary' : undefined"
-                    :variant="isListView ? 'flat' : 'outlined'"
-                  >
-                    <v-icon>mdi-view-list</v-icon>
-                  </v-btn>
-                </v-btn-group>
-
-                <v-btn class="ml-2" variant="tonal" @click="toggleShowReserved">
-                  <v-icon>{{
-                    showReserved ? "mdi-eye-off" : "mdi-eye"
-                  }}</v-icon>
-                  {{
-                    showReserved
-                      ? tm("buttons.hideSystemPlugins")
-                      : tm("buttons.showSystemPlugins")
-                  }}
-                </v-btn>
-
-                <v-btn
-                  class="ml-2"
-                  color="warning"
-                  variant="tonal"
-                  :disabled="updatableExtensions.length === 0"
-                  :loading="updatingAll"
-                  @click="showUpdateAllConfirm"
-                >
-                  <v-icon>mdi-update</v-icon>
-                  {{ tm("buttons.updateAll") }}
-                </v-btn>
-
-                <v-btn
-                  class="ml-2"
-                  color="primary"
-                  variant="tonal"
-                  @click="dialog = true"
-                >
-                  <v-icon>mdi-plus</v-icon>
-                  {{ tm("buttons.install") }}
-                </v-btn>
-
-                <v-col cols="12" sm="auto" class="ml-auto">
-                  <v-dialog max-width="500px" v-if="extension_data.message">
-                    <template v-slot:activator="{ props }">
-                      <v-btn
-                        v-bind="props"
-                        icon
-                        size="small"
-                        color="error"
-                        class="ml-2"
-                        variant="tonal"
-                      >
-                        <v-icon>mdi-alert-circle</v-icon>
-                      </v-btn>
-                    </template>
-                    <template v-slot:default="{ isActive }">
-                      <v-card class="rounded-lg">
-                        <v-card-title class="headline d-flex align-center">
-                          <v-icon color="error" class="mr-2"
-                            >mdi-alert-circle</v-icon
-                          >
-                          {{ tm("dialogs.error.title") }}
-                        </v-card-title>
-                        <v-card-text>
-                          <p class="text-body-1">
-                            {{ extension_data.message }}
-                          </p>
-                          <p class="text-caption mt-2">
-                            {{ tm("dialogs.error.checkConsole") }}
-                          </p>
-                        </v-card-text>
-                        <v-card-actions>
-                          <v-btn
-                              
-                              color="error"
-                              variant="tonal"
-                              prepend-icon="mdi-refresh"
-                              @click="handleReloadAllFailed"
-                          >
-                              尝试一键重载修复
-                          </v-btn>
-                          <v-spacer></v-spacer>
-                          <v-btn
-                            color="primary"
-                            @click="isActive.value = false"
-                            >{{ tm("buttons.close") }}</v-btn
-                          >
-                        </v-card-actions>
-                      </v-card>
-                    </template>
-                  </v-dialog>
-                </v-col>
-              </v-col>
-            </v-row>
-
-            <v-fade-transition hide-on-leave>
-              <!-- 表格视图 -->
-              <div v-if="isListView">
-                <v-card class="rounded-lg overflow-hidden elevation-1">
-                  <v-data-table
-                    :headers="pluginHeaders"
-                    :items="filteredPlugins"
-                    :loading="loading_"
-                    item-key="name"
-                    hover
-                  >
-                    <template v-slot:loader>
-                      <v-row class="py-8 d-flex align-center justify-center">
-                        <v-progress-circular
-                          indeterminate
-                          color="primary"
-                        ></v-progress-circular>
-                        <span class="ml-2">{{ tm("status.loading") }}</span>
-                      </v-row>
-                    </template>
-
-                    <template v-slot:item.name="{ item }">
-                      <div class="d-flex align-center py-2">
-                        <div
-                          v-if="item.logo"
-                          class="mr-3"
-                          style="flex-shrink: 0"
-                        >
-                          <img
-                            :src="item.logo"
-                            :alt="item.name"
-                            style="
-                              height: 40px;
-                              width: 40px;
-                              border-radius: 8px;
-                              object-fit: cover;
-                            "
-                          />
-                        </div>
-                        <div v-else class="mr-3" style="flex-shrink: 0">
-                          <img
-                            :src="defaultPluginIcon"
-                            :alt="item.name"
-                            style="
-                              height: 40px;
-                              width: 40px;
-                              border-radius: 8px;
-                              object-fit: cover;
-                            "
-                          />
-                        </div>
-                        <div>
-                          <div class="text-subtitle-1 font-weight-medium">
-                            {{
-                              item.display_name && item.display_name.length
-                                ? item.display_name
-                                : item.name
-                            }}
-                          </div>
-                          <div
-                            v-if="item.display_name && item.display_name.length"
-                            class="text-caption text-medium-emphasis mt-1"
-                          >
-                            {{ item.name }}
-                          </div>
-                          <div
-                            v-if="item.reserved"
-                            class="d-flex align-center mt-1"
-                          >
-                            <v-chip
-                              color="primary"
-                              size="x-small"
-                              class="font-weight-medium"
-                              >{{ tm("status.system") }}</v-chip
-                            >
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-
-                    <template v-slot:item.desc="{ item }">
-                      <div class="py-2">
-                        <div
-                          class="text-body-2 text-medium-emphasis"
-                          style="
-                            display: -webkit-box;
-                            -webkit-line-clamp: 3;
-                            line-clamp: 3;
-                            -webkit-box-orient: vertical;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                          "
-                        >
-                          {{ item.desc }}
-                        </div>
-                        <div
-                          v-if="item.support_platforms?.length"
-                          class="d-flex align-center flex-wrap mt-2"
-                        >
-                          <span class="text-caption text-medium-emphasis mr-2">
-                            {{ tm("card.status.supportPlatform") }}:
-                          </span>
-                          <v-chip
-                            v-for="platformId in item.support_platforms"
-                            :key="platformId"
-                            size="x-small"
-                            color="info"
-                            variant="outlined"
-                            class="mr-1 mb-1"
-                          >
-                            {{ platformId }}
-                          </v-chip>
-                        </div>
-                        <div
-                          v-if="item.astrbot_version"
-                          class="d-flex align-center flex-wrap mt-1"
-                        >
-                          <span class="text-caption text-medium-emphasis mr-2">
-                            {{ tm("card.status.astrbotVersion") }}:
-                          </span>
-                          <v-chip
-                            size="x-small"
-                            color="secondary"
-                            variant="outlined"
-                            class="mr-1 mb-1"
-                          >
-                            {{ item.astrbot_version }}
-                          </v-chip>
-                        </div>
-                      </div>
-                    </template>
-
-                    <template v-slot:item.version="{ item }">
-                      <div class="d-flex align-center">
-                        <span class="text-body-2">{{ item.version }}</span>
-                        <v-icon
-                          v-if="item.has_update"
-                          color="warning"
-                          size="small"
-                          class="ml-1"
-                          >mdi-alert</v-icon
-                        >
-                        <v-tooltip v-if="item.has_update" activator="parent">
-                          <span
-                            >{{ tm("messages.hasUpdate") }}
-                            {{ item.online_version }}</span
-                          >
-                        </v-tooltip>
-                      </div>
-                    </template>
-
-                    <template v-slot:item.author="{ item }">
-                      <div class="text-body-2">{{ item.author }}</div>
-                    </template>
-
-                    <template v-slot:item.activated="{ item }">
-                      <v-chip
-                        :color="item.activated ? 'success' : 'error'"
-                        size="small"
-                        class="font-weight-medium"
-                        :variant="item.activated ? 'flat' : 'outlined'"
-                      >
-                        {{
-                          item.activated
-                            ? tm("status.enabled")
-                            : tm("status.disabled")
-                        }}
-                      </v-chip>
-                    </template>
-
-                    <template v-slot:item.actions="{ item }">
-                      <div class="d-flex align-center">
-                        <v-btn-group
-                          density="comfortable"
-                          variant="text"
-                          color="primary"
-                        >
-                          <v-btn
-                            v-if="!item.activated"
-                            icon
-                            size="small"
-                            color="success"
-                            @click="pluginOn(item)"
-                          >
-                            <v-icon>mdi-play</v-icon>
-                            <v-tooltip activator="parent" location="top">{{
-                              tm("tooltips.enable")
-                            }}</v-tooltip>
-                          </v-btn>
-                          <v-btn
-                            v-else
-                            icon
-                            size="small"
-                            color="error"
-                            @click="pluginOff(item)"
-                          >
-                            <v-icon>mdi-pause</v-icon>
-                            <v-tooltip activator="parent" location="top">{{
-                              tm("tooltips.disable")
-                            }}</v-tooltip>
-                          </v-btn>
-
-                          <v-btn
-                            icon
-                            size="small"
-                            @click="reloadPlugin(item.name)"
-                          >
-                            <v-icon>mdi-refresh</v-icon>
-                            <v-tooltip activator="parent" location="top">{{
-                              tm("tooltips.reload")
-                            }}</v-tooltip>
-                          </v-btn>
-
-                          <v-btn
-                            icon
-                            size="small"
-                            @click="openExtensionConfig(item.name)"
-                          >
-                            <v-icon>mdi-cog</v-icon>
-                            <v-tooltip activator="parent" location="top">{{
-                              tm("tooltips.configure")
-                            }}</v-tooltip>
-                          </v-btn>
-
-                          <v-btn
-                            icon
-                            size="small"
-                            @click="showPluginInfo(item)"
-                          >
-                            <v-icon>mdi-information</v-icon>
-                            <v-tooltip activator="parent" location="top">{{
-                              tm("tooltips.viewInfo")
-                            }}</v-tooltip>
-                          </v-btn>
-
-                          <v-btn
-                            v-if="item.repo"
-                            icon
-                            size="small"
-                            @click="viewReadme(item)"
-                          >
-                            <v-icon>mdi-book-open-page-variant</v-icon>
-                            <v-tooltip activator="parent" location="top">{{
-                              tm("tooltips.viewDocs")
-                            }}</v-tooltip>
-                          </v-btn>
-
-                          <v-btn
-                            icon
-                            size="small"
-                            @click="updateExtension(item.name)"
-                          >
-                            <v-icon>mdi-update</v-icon>
-                            <v-tooltip activator="parent" location="top">{{
-                              tm("tooltips.update")
-                            }}</v-tooltip>
-                          </v-btn>
-
-                          <v-btn
-                            icon
-                            size="small"
-                            color="error"
-                            @click="uninstallExtension(item.name)"
-                            :disabled="item.reserved"
-                          >
-                            <v-icon>mdi-delete</v-icon>
-                            <v-tooltip activator="parent" location="top">{{
-                              tm("tooltips.uninstall")
-                            }}</v-tooltip>
-                          </v-btn>
-                        </v-btn-group>
-                      </div>
-                    </template>
-
-                    <template v-slot:no-data>
-                      <div class="text-center pa-8">
-                        <v-icon size="64" color="info" class="mb-4"
-                          >mdi-puzzle-outline</v-icon
-                        >
-                        <div class="text-h5 mb-2">
-                          {{ tm("empty.noPlugins") }}
-                        </div>
-                        <div class="text-body-1 mb-4">
-                          {{ tm("empty.noPluginsDesc") }}
-                        </div>
-                      </div>
-                    </template>
-                  </v-data-table>
-                </v-card>
-              </div>
-
-              <!-- 卡片视图 -->
-              <div v-else>
-                <v-row v-if="filteredPlugins.length === 0" class="text-center">
-                  <v-col cols="12" class="pa-2">
-                    <v-icon size="64" color="info" class="mb-4"
-                      >mdi-puzzle-outline</v-icon
-                    >
-                    <div class="text-h5 mb-2">{{ tm("empty.noPlugins") }}</div>
-                    <div class="text-body-1 mb-4">
-                      {{ tm("empty.noPluginsDesc") }}
-                    </div>
-                  </v-col>
-                </v-row>
-
-                <v-row>
-                  <v-col
-                    cols="12"
-                    md="6"
-                    lg="4"
-                    v-for="extension in filteredPlugins"
-                    :key="extension.name"
-                    class="pb-2"
-                  >
-                    <ExtensionCard
-                      :extension="extension"
-                      class="rounded-lg"
-                      style="background-color: rgb(var(--v-theme-mcpCardBg))"
-                      @configure="openExtensionConfig(extension.name)"
-                      @uninstall="
-                        (ext, options) => uninstallExtension(ext.name, options)
-                      "
-                      @update="updateExtension(extension.name)"
-                      @reload="reloadPlugin(extension.name)"
-                      @toggle-activation="
-                        extension.activated
-                          ? pluginOff(extension)
-                          : pluginOn(extension)
-                      "
-                      @view-handlers="showPluginInfo(extension)"
-                      @view-readme="viewReadme(extension)"
-                      @view-changelog="viewChangelog(extension)"
-                    >
-                    </ExtensionCard>
-                  </v-col>
-                </v-row>
-              </div>
-            </v-fade-transition>
-          </v-tab-item>
+          <InstalledPluginsTab :state="pageState" />
 
           <!-- 指令面板标签页内容 -->
           <v-tab-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>
+              </div>
+            </div>
             <v-card
               class="rounded-lg"
               variant="flat"
@@ -1863,6 +182,11 @@ watch(activeTab, (newTab) => {
 
           <!-- 已安装的 MCP 服务器标签页内容 -->
           <v-tab-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>
+              </div>
+            </div>
             <v-card
               class="rounded-lg"
               variant="flat"
@@ -1876,6 +200,11 @@ watch(activeTab, (newTab) => {
 
           <!-- Skills 标签页内容 -->
           <v-tab-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>
+              </div>
+            </div>
             <v-card
               class="rounded-lg"
               variant="flat"
@@ -1888,358 +217,7 @@ watch(activeTab, (newTab) => {
           </v-tab-item>
 
           <!-- 插件市场标签页内容 -->
-          <v-tab-item v-show="activeTab === 'market'">
-            <!-- 插件源管理区域 -->
-            <div class="mb-6">
-              <div
-                class="d-flex align-center pa-1 pl-2 pr-2"
-                style="
-                  background: rgb(var(--v-theme-surface-variant), 0.1);
-                  border-radius: 12px;
-                  border: 1px solid
-                    rgba(var(--v-border-color), var(--v-border-opacity));
-                "
-              >
-                <!-- 左侧：源选择 -->
-                <div
-                  class="d-flex align-center flex-grow-1"
-                  style="min-width: 0"
-                >
-                  <v-icon color="primary" class="ml-2 mr-2" size="small"
-                    >mdi-source-branch</v-icon
-                  >
-                  <span
-                    class="text-caption text-medium-emphasis text-uppercase font-weight-bold mr-2"
-                    style="letter-spacing: 0.05em; white-space: nowrap"
-                  >
-                    {{ tm("market.source") }}
-                  </span>
-
-                  <v-menu offset-y>
-                    <template v-slot:activator="{ props }">
-                      <v-btn
-                        v-bind="props"
-                        variant="text"
-                        class="text-capitalize px-1"
-                        :ripple="false"
-                        height="32"
-                      >
-                        <span
-                          class="text-body-2 font-weight-medium text-high-emphasis text-truncate"
-                          style="max-width: 200px"
-                        >
-                          {{
-                            selectedSource
-                              ? customSources.find(
-                                  (s) => s.url === selectedSource,
-                                )?.name
-                              : tm("market.defaultSource")
-                          }}
-                        </span>
-                        <v-icon
-                          right
-                          size="small"
-                          class="ml-1 text-medium-emphasis"
-                          >mdi-chevron-down</v-icon
-                        >
-                        <v-tooltip activator="parent" location="top">{{
-                          selectedSource || tm("market.defaultOfficialSource")
-                        }}</v-tooltip>
-                      </v-btn>
-                    </template>
-                    <v-list density="compact" nav class="pa-2">
-                      <v-list-subheader
-                        class="font-weight-bold text-caption text-uppercase mb-1"
-                      >
-                        {{ tm("market.availableSources") }}
-                      </v-list-subheader>
-                      <v-list-item
-                        :value="null"
-                        @click="selectPluginSource(null)"
-                        rounded="md"
-                        color="primary"
-                        :active="selectedSource === null"
-                      >
-                        <template v-slot:prepend>
-                          <v-icon
-                            icon="mdi-shield-check"
-                            size="small"
-                            class="mr-2"
-                          ></v-icon>
-                        </template>
-                        <v-list-item-title>{{
-                          tm("market.defaultSource")
-                        }}</v-list-item-title>
-                      </v-list-item>
-
-                      <v-divider
-                        class="my-1"
-                        v-if="customSources.length > 0"
-                      ></v-divider>
-
-                      <v-list-item
-                        v-for="source in customSources"
-                        :key="source.url"
-                        :value="source.url"
-                        @click="selectPluginSource(source.url)"
-                        rounded="md"
-                        color="primary"
-                        :active="selectedSource === source.url"
-                      >
-                        <template v-slot:prepend>
-                          <v-icon
-                            icon="mdi-link-variant"
-                            size="small"
-                            class="mr-2"
-                          ></v-icon>
-                        </template>
-                        <v-list-item-title>{{ source.name }}</v-list-item-title>
-                        <v-list-item-subtitle class="text-caption">{{
-                          source.url
-                        }}</v-list-item-subtitle>
-                      </v-list-item>
-                    </v-list>
-                  </v-menu>
-
-                  <div
-                    class="d-flex align-center ml-2"
-                    style="
-                      color: grey;
-                      font-size: 12px;
-                      line-height: 1.3;
-                      white-space: normal;
-                      text-align: left;
-                    "
-                  >
-                    <v-icon size="16" class="mr-1">mdi-alert-outline</v-icon>
-                    <span>{{ tm("market.sourceSafetyWarning") }}</span>
-                  </div>
-                </div>
-
-                <!--右侧：操作按钮组-->
-                <div class="d-flex align-center">
-                  <v-tooltip location="top" :text="tm('market.addSource')">
-                    <template v-slot:activator="{ props }">
-                      <v-btn
-                        v-bind="props"
-                        icon="mdi-plus"
-                        size="small"
-                        variant="text"
-                        density="comfortable"
-                        color="primary"
-                        @click="addCustomSource"
-                      ></v-btn>
-                    </template>
-                  </v-tooltip>
-
-                  <template v-if="selectedSourceObj">
-                    <v-tooltip location="top" :text="tm('market.editSource')">
-                      <template v-slot:activator="{ props }">
-                        <v-btn
-                          v-bind="props"
-                          icon="mdi-pencil-outline"
-                          size="small"
-                          variant="text"
-                          density="comfortable"
-                          color="medium-emphasis"
-                          class="ml-1"
-                          @click="editCustomSource(selectedSourceObj)"
-                        ></v-btn>
-                      </template>
-                    </v-tooltip>
-
-                    <v-tooltip location="top" :text="tm('market.removeSource')">
-                      <template v-slot:activator="{ props }">
-                        <v-btn
-                          v-bind="props"
-                          icon="mdi-trash-can-outline"
-                          size="small"
-                          variant="text"
-                          density="comfortable"
-                          color="error"
-                          class="ml-1"
-                          @click="removeCustomSource(selectedSourceObj)"
-                        ></v-btn>
-                      </template>
-                    </v-tooltip>
-                  </template>
-                </div>
-              </div>
-            </div>
-
-            <!-- <small style="color: var(--v-theme-secondaryText);">每个插件都是作者无偿提供的的劳动成果。如果您喜欢某个插件，请 Star！</small> -->
-
-            <!-- FAB Button -->
-            <v-tooltip :text="tm('market.installPlugin')" location="left">
-              <template v-slot:activator="{ props }">
-                <button
-                  v-bind="props"
-                  type="button"
-                  class="v-btn v-btn--elevated v-btn--icon v-theme--PurpleThemeDark bg-darkprimary v-btn--density-default v-btn--size-x-large v-btn--variant-elevated fab-button"
-                  style="
-                    position: fixed;
-                    right: 52px;
-                    bottom: 52px;
-                    z-index: 10000;
-                    border-radius: 16px;
-                  "
-                  @click="dialog = true"
-                >
-                  <span class="v-btn__overlay"></span>
-                  <span class="v-btn__underlay"></span>
-                  <span class="v-btn__content" data-no-activator="">
-                    <i
-                      class="mdi-plus mdi v-icon notranslate v-theme--PurpleThemeDark v-icon--size-default"
-                      aria-hidden="true"
-                      style="font-size: 32px"
-                    ></i>
-                  </span>
-                </button>
-              </template>
-            </v-tooltip>
-
-            <div class="mt-4">
-              <div
-                class="d-flex align-center mb-2"
-                style="justify-content: space-between; flex-wrap: wrap; gap: 8px"
-              >
-                <h2>
-                  {{ tm("market.randomPlugins") }}
-                </h2>
-                <v-btn
-                  color="primary"
-                  variant="tonal"
-                  prepend-icon="mdi-shuffle-variant"
-                  :disabled="pluginMarketData.length === 0"
-                  @click="refreshRandomPlugins"
-                >
-                  {{ tm("buttons.reshuffle") }}
-                </v-btn>
-              </div>
-
-              <v-row class="mb-6" dense>
-                <v-col
-                  v-for="plugin in randomPlugins"
-                  :key="`random-${plugin.name}`"
-                  cols="12"
-                  md="6"
-                  lg="4"
-                  class="pb-2"
-                >
-                  <MarketPluginCard
-                    :plugin="plugin"
-                    :default-plugin-icon="defaultPluginIcon"
-                    :show-plugin-full-name="showPluginFullName"
-                    @install="handleInstallPlugin"
-                  />
-                </v-col>
-              </v-row>
-
-              <div
-                class="d-flex align-center mb-2"
-                style="
-                  justify-content: space-between;
-                  flex-wrap: wrap;
-                  gap: 8px;
-                "
-              >
-                <div class="d-flex align-center" style="gap: 6px">
-                  <h2>
-                    {{ tm("market.allPlugins") }}({{
-                      filteredMarketPlugins.length
-                    }})
-                  </h2>
-                  <v-btn
-                    icon
-                    variant="text"
-                    @click="refreshPluginMarket"
-                    :loading="refreshingMarket"
-                  >
-                    <v-icon>mdi-refresh</v-icon>
-                  </v-btn>
-                </div>
-
-                <div
-                  class="d-flex align-center"
-                  style="gap: 8px; flex-wrap: wrap"
-                >
-                  <v-pagination
-                    v-model="currentPage"
-                    :length="totalPages"
-                    :total-visible="5"
-                    size="small"
-                    density="comfortable"
-                  ></v-pagination>
-
-                  <v-select
-                    v-model="sortBy"
-                    :items="[
-                      { title: tm('sort.default'), value: 'default' },
-                      { title: tm('sort.stars'), value: 'stars' },
-                      { title: tm('sort.author'), value: 'author' },
-                      { title: tm('sort.updated'), value: 'updated' },
-                    ]"
-                    density="compact"
-                    variant="outlined"
-                    hide-details
-                    style="max-width: 150px"
-                  >
-                    <template v-slot:prepend-inner>
-                      <v-icon size="small">mdi-sort</v-icon>
-                    </template>
-                  </v-select>
-
-                  <v-btn
-                    icon
-                    v-if="sortBy !== 'default'"
-                    @click="sortOrder = sortOrder === 'desc' ? 'asc' : 'desc'"
-                    variant="text"
-                    density="compact"
-                  >
-                    <v-icon>{{
-                      sortOrder === "desc"
-                        ? "mdi-sort-descending"
-                        : "mdi-sort-ascending"
-                    }}</v-icon>
-                    <v-tooltip activator="parent" location="top">
-                      {{
-                        sortOrder === "desc"
-                          ? tm("sort.descending")
-                          : tm("sort.ascending")
-                      }}
-                    </v-tooltip>
-                  </v-btn>
-                </div>
-              </div>
-
-              <v-row style="min-height: 26rem" dense>
-                <v-col
-                  v-for="plugin in paginatedPlugins"
-                  :key="plugin.name"
-                  cols="12"
-                  md="6"
-                  lg="4"
-                  class="pb-2"
-                >
-                  <MarketPluginCard
-                    :plugin="plugin"
-                    :default-plugin-icon="defaultPluginIcon"
-                    :show-plugin-full-name="showPluginFullName"
-                    @install="handleInstallPlugin"
-                  />
-                </v-col>
-              </v-row>
-
-              <div class="d-flex justify-center mt-4" v-if="totalPages > 1">
-                <v-pagination
-                  v-model="currentPage"
-                  :length="totalPages"
-                  :total-visible="7"
-                  size="small"
-                ></v-pagination>
-              </div>
-            </div>
-          </v-tab-item>
+          <MarketPluginsTab :state="pageState" />
 
           <v-row v-if="loading_">
             <v-col cols="12" class="d-flex justify-center">
@@ -2695,6 +673,95 @@ watch(activeTab, (newTab) => {
     </div>
   </v-dialog>
 
+  <!-- 插件源管理对话框 -->
+  <v-dialog v-model="showSourceManagerDialog" width="640">
+    <v-card>
+      <v-card-title class="text-h3 pa-4 pl-6">{{
+        tm("market.sourceManagement")
+      }}</v-card-title>
+      <v-card-text>
+        <v-select
+          :model-value="selectedSource || '__default__'"
+          @update:model-value="
+            selectPluginSource($event === '__default__' ? null : $event)
+          "
+          :items="sourceSelectItems"
+          :label="tm('market.currentSource')"
+          variant="outlined"
+          prepend-inner-icon="mdi-source-branch"
+          hide-details
+          class="mb-4"
+        ></v-select>
+
+        <div class="d-flex align-center justify-space-between mb-2">
+          <div class="text-subtitle-2">{{ tm("market.availableSources") }}</div>
+          <v-btn
+            size="small"
+            color="primary"
+            variant="tonal"
+            prepend-icon="mdi-plus"
+            @click="addCustomSource"
+          >
+            {{ tm("market.addSource") }}
+          </v-btn>
+        </div>
+
+        <v-list density="compact" nav class="pa-0">
+          <v-list-item
+            rounded="md"
+            color="primary"
+            :active="selectedSource === null"
+            @click="selectPluginSource(null)"
+          >
+            <template v-slot:prepend>
+              <v-icon icon="mdi-shield-check" size="small" class="mr-2"></v-icon>
+            </template>
+            <v-list-item-title>{{ tm("market.defaultSource") }}</v-list-item-title>
+          </v-list-item>
+
+          <v-list-item
+            v-for="source in customSources"
+            :key="source.url"
+            rounded="md"
+            color="primary"
+            :active="selectedSource === source.url"
+            @click="selectPluginSource(source.url)"
+          >
+            <template v-slot:prepend>
+              <v-icon icon="mdi-link-variant" size="small" class="mr-2"></v-icon>
+            </template>
+            <v-list-item-title>{{ source.name }}</v-list-item-title>
+            <v-list-item-subtitle class="text-caption">{{
+              source.url
+            }}</v-list-item-subtitle>
+            <template v-slot:append>
+              <v-btn
+                icon="mdi-pencil-outline"
+                size="small"
+                variant="text"
+                color="medium-emphasis"
+                @click.stop="editCustomSource(source)"
+              ></v-btn>
+              <v-btn
+                icon="mdi-trash-can-outline"
+                size="small"
+                variant="text"
+                color="error"
+                @click.stop="removeCustomSource(source)"
+              ></v-btn>
+            </template>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="primary" variant="text" @click="showSourceManagerDialog = false">{{
+          tm("buttons.close")
+        }}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
   <!-- 添加/编辑自定义插件源对话框 -->
   <v-dialog v-model="showSourceDialog" width="500">
     <v-card>
diff --git a/dashboard/src/views/extension/InstalledPluginsTab.vue b/dashboard/src/views/extension/InstalledPluginsTab.vue
new file mode 100644
index 000000000..9bb6797f4
--- /dev/null
+++ b/dashboard/src/views/extension/InstalledPluginsTab.vue
@@ -0,0 +1,639 @@
+<script setup>
+import ExtensionCard from "@/components/shared/ExtensionCard.vue";
+import StyledMenu from "@/components/shared/StyledMenu.vue";
+import defaultPluginIcon from "@/assets/images/plugin_icon.png";
+
+const props = defineProps({
+  state: {
+    type: Object,
+    required: true,
+  },
+});
+
+const {
+  commonStore,
+  t,
+  tm,
+  router,
+  route,
+  getSelectedGitHubProxy,
+  conflictDialog,
+  checkAndPromptConflicts,
+  handleConflictConfirm,
+  fileInput,
+  activeTab,
+  validTabs,
+  isValidTab,
+  getLocationHash,
+  extractTabFromHash,
+  syncTabFromHash,
+  extension_data,
+  getInitialShowReserved,
+  showReserved,
+  snack_message,
+  snack_show,
+  snack_success,
+  configDialog,
+  extension_config,
+  pluginMarketData,
+  loadingDialog,
+  showPluginInfoDialog,
+  selectedPlugin,
+  curr_namespace,
+  updatingAll,
+  readmeDialog,
+  forceUpdateDialog,
+  updateAllConfirmDialog,
+  changelogDialog,
+  getInitialListViewMode,
+  isListView,
+  pluginSearch,
+  loading_,
+  currentPage,
+  dangerConfirmDialog,
+  selectedDangerPlugin,
+  selectedMarketInstallPlugin,
+  installCompat,
+  versionCompatibilityDialog,
+  showUninstallDialog,
+  pluginToUninstall,
+  showSourceDialog,
+  showSourceManagerDialog,
+  sourceName,
+  sourceUrl,
+  customSources,
+  selectedSource,
+  showRemoveSourceDialog,
+  sourceToRemove,
+  editingSource,
+  originalSourceUrl,
+  extension_url,
+  dialog,
+  upload_file,
+  uploadTab,
+  showPluginFullName,
+  marketSearch,
+  debouncedMarketSearch,
+  refreshingMarket,
+  sortBy,
+  sortOrder,
+  randomPluginNames,
+  normalizeStr,
+  toPinyinText,
+  toInitials,
+  marketCustomFilter,
+  plugin_handler_info_headers,
+  pluginHeaders,
+  filteredExtensions,
+  filteredPlugins,
+  filteredMarketPlugins,
+  sortedPlugins,
+  RANDOM_PLUGINS_COUNT,
+  randomPlugins,
+  shufflePlugins,
+  refreshRandomPlugins,
+  displayItemsPerPage,
+  totalPages,
+  paginatedPlugins,
+  updatableExtensions,
+  toggleShowReserved,
+  toast,
+  resetLoadingDialog,
+  onLoadingDialogResult,
+  failedPluginsDict,
+  getExtensions,
+  handleReloadAllFailed,
+  checkUpdate,
+  uninstallExtension,
+  handleUninstallConfirm,
+  updateExtension,
+  showUpdateAllConfirm,
+  confirmUpdateAll,
+  cancelUpdateAll,
+  confirmForceUpdate,
+  updateAllExtensions,
+  pluginOn,
+  pluginOff,
+  openExtensionConfig,
+  updateConfig,
+  showPluginInfo,
+  reloadPlugin,
+  viewReadme,
+  viewChangelog,
+  handleInstallPlugin,
+  confirmDangerInstall,
+  cancelDangerInstall,
+  loadCustomSources,
+  saveCustomSources,
+  addCustomSource,
+  openSourceManagerDialog,
+  selectPluginSource,
+  sourceSelectItems,
+  editCustomSource,
+  removeCustomSource,
+  confirmRemoveSource,
+  saveCustomSource,
+  trimExtensionName,
+  checkAlreadyInstalled,
+  showVersionCompatibilityWarning,
+  continueInstallIgnoringVersionWarning,
+  cancelInstallOnVersionWarning,
+  newExtension,
+  normalizePlatformList,
+  getPlatformDisplayList,
+  resolveSelectedInstallPlugin,
+  selectedInstallPlugin,
+  checkInstallCompatibility,
+  refreshPluginMarket,
+  handleLocaleChange,
+  searchDebounceTimer,
+} = props.state;
+</script>
+
+<template>
+          <v-tab-item v-show="activeTab === 'installed'">
+            <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>
+
+                <div class="d-flex align-center flex-wrap ml-auto" style="gap: 8px">
+                  <v-text-field
+                    v-model="pluginSearch"
+                    density="compact"
+                    :label="tm('search.placeholder')"
+                    prepend-inner-icon="mdi-magnify"
+                    variant="solo-filled"
+                    flat
+                    hide-details
+                    single-line
+                    style="min-width: 220px; max-width: 340px"
+                  >
+                  </v-text-field>
+
+                  <v-btn-toggle
+                    v-model="isListView"
+                    mandatory
+                    density="compact"
+                    color="primary"
+                    class="view-mode-toggle"
+                  >
+                    <v-btn :value="false" icon="mdi-view-grid"></v-btn>
+                    <v-btn :value="true" icon="mdi-view-list"></v-btn>
+                  </v-btn-toggle>
+                </div>
+              </div>
+            </div>
+
+            <v-row class="mb-4">
+              <v-col cols="12" class="d-flex align-center flex-wrap ga-2">
+                <v-btn variant="tonal" @click="toggleShowReserved">
+                  <v-icon>{{
+                    showReserved ? "mdi-eye-off" : "mdi-eye"
+                  }}</v-icon>
+                  {{
+                    showReserved
+                      ? tm("buttons.hideSystemPlugins")
+                      : tm("buttons.showSystemPlugins")
+                  }}
+                </v-btn>
+
+                <v-btn
+                  class="ml-2"
+                  color="warning"
+                  variant="tonal"
+                  :disabled="updatableExtensions.length === 0"
+                  :loading="updatingAll"
+                  @click="showUpdateAllConfirm"
+                >
+                  <v-icon>mdi-update</v-icon>
+                  {{ tm("buttons.updateAll") }}
+                </v-btn>
+
+                <v-dialog max-width="500px" v-if="extension_data.message">
+                  <template v-slot:activator="{ props }">
+                    <v-btn
+                      v-bind="props"
+                      icon
+                      size="small"
+                      color="error"
+                      class="ml-auto"
+                      variant="tonal"
+                    >
+                      <v-icon>mdi-alert-circle</v-icon>
+                    </v-btn>
+                  </template>
+                  <template v-slot:default="{ isActive }">
+                    <v-card class="rounded-lg">
+                      <v-card-title class="headline d-flex align-center">
+                        <v-icon color="error" class="mr-2"
+                          >mdi-alert-circle</v-icon
+                        >
+                        {{ tm("dialogs.error.title") }}
+                      </v-card-title>
+                      <v-card-text>
+                        <p class="text-body-1">
+                          {{ extension_data.message }}
+                        </p>
+                        <p class="text-caption mt-2">
+                          {{ tm("dialogs.error.checkConsole") }}
+                        </p>
+                      </v-card-text>
+                      <v-card-actions>
+                        <v-btn
+                            color="error"
+                            variant="tonal"
+                            prepend-icon="mdi-refresh"
+                            @click="handleReloadAllFailed"
+                        >
+                            尝试一键重载修复
+                        </v-btn>
+                        <v-spacer></v-spacer>
+                        <v-btn
+                          color="primary"
+                          @click="isActive.value = false"
+                          >{{ tm("buttons.close") }}</v-btn
+                        >
+                      </v-card-actions>
+                    </v-card>
+                  </template>
+                </v-dialog>
+              </v-col>
+            </v-row>
+
+            <v-fade-transition hide-on-leave>
+              <!-- 表格视图 -->
+              <div v-if="isListView">
+                <v-card class="rounded-lg overflow-hidden elevation-0">
+                  <v-data-table
+                    :headers="pluginHeaders"
+                    :items="filteredPlugins"
+                    :loading="loading_"
+                    item-key="name"
+                    hover
+                  >
+                    <template v-slot:loader>
+                      <v-row class="py-8 d-flex align-center justify-center">
+                        <v-progress-circular
+                          indeterminate
+                          color="primary"
+                        ></v-progress-circular>
+                        <span class="ml-2">{{ tm("status.loading") }}</span>
+                      </v-row>
+                    </template>
+
+                    <template v-slot:item.name="{ item }">
+                      <div class="d-flex align-center py-2">
+                        <div
+                          v-if="item.logo"
+                          class="mr-3"
+                          style="flex-shrink: 0"
+                        >
+                          <img
+                            :src="item.logo"
+                            :alt="item.name"
+                            style="
+                              height: 40px;
+                              width: 40px;
+                              border-radius: 8px;
+                              object-fit: cover;
+                            "
+                          />
+                        </div>
+                        <div v-else class="mr-3" style="flex-shrink: 0">
+                          <img
+                            :src="defaultPluginIcon"
+                            :alt="item.name"
+                            style="
+                              height: 40px;
+                              width: 40px;
+                              border-radius: 8px;
+                              object-fit: cover;
+                            "
+                          />
+                        </div>
+                        <div>
+                          <div class="text-h5" style="font-family: inherit;">
+                            {{
+                              item.display_name && item.display_name.length
+                                ? item.display_name
+                                : item.name
+                            }}
+                          </div>
+                          <div
+                            v-if="item.display_name && item.display_name.length"
+                            class="text-caption text-medium-emphasis mt-1"
+                          >
+                            {{ item.name }}
+                          </div>
+                          <div
+                            v-if="item.reserved"
+                            class="d-flex align-center mt-1"
+                          >
+                            <v-chip
+                              color="primary"
+                              size="x-small"
+                              class="font-weight-medium"
+                              >{{ tm("status.system") }}</v-chip
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+
+                    <template v-slot:item.desc="{ item }">
+                      <div class="py-2">
+                        <div
+                          class="text-body-2 text-medium-emphasis"
+                          style="
+                            display: -webkit-box;
+                            -webkit-line-clamp: 3;
+                            line-clamp: 3;
+                            -webkit-box-orient: vertical;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                          "
+                        >
+                          {{ item.desc }}
+                        </div>
+                        <div
+                          v-if="item.support_platforms?.length"
+                          class="d-flex align-center flex-wrap mt-2"
+                        >
+                          <span class="text-caption text-medium-emphasis mr-2">
+                            {{ tm("card.status.supportPlatform") }}:
+                          </span>
+                          <v-chip
+                            v-for="platformId in item.support_platforms"
+                            :key="platformId"
+                            size="x-small"
+                            color="info"
+                            variant="outlined"
+                            class="mr-1 mb-1"
+                          >
+                            {{ platformId }}
+                          </v-chip>
+                        </div>
+                        <div
+                          v-if="item.astrbot_version"
+                          class="d-flex align-center flex-wrap mt-1"
+                        >
+                          <span class="text-caption text-medium-emphasis mr-2">
+                            {{ tm("card.status.astrbotVersion") }}:
+                          </span>
+                          <v-chip
+                            size="x-small"
+                            color="secondary"
+                            variant="outlined"
+                            class="mr-1 mb-1"
+                          >
+                            {{ item.astrbot_version }}
+                          </v-chip>
+                        </div>
+                      </div>
+                    </template>
+
+                    <template v-slot:item.version="{ item }">
+                      <div class="d-flex align-center">
+                        <span class="text-body-2">{{ item.version }}</span>
+                        <v-icon
+                          v-if="item.has_update"
+                          color="warning"
+                          size="small"
+                          class="ml-1"
+                          >mdi-alert</v-icon
+                        >
+                        <v-tooltip v-if="item.has_update" activator="parent">
+                          <span
+                            >{{ tm("messages.hasUpdate") }}
+                            {{ item.online_version }}</span
+                          >
+                        </v-tooltip>
+                      </div>
+                    </template>
+
+                    <template v-slot:item.author="{ item }">
+                      <div class="text-body-2">{{ item.author }}</div>
+                    </template>
+
+                    <template v-slot:item.actions="{ item }">
+                      <div class="table-action-row d-flex align-center flex-nowrap ga-2 py-1">
+                        <v-btn
+                          v-if="!item.activated"
+                          size="small"
+                          variant="tonal"
+                          color="success"
+                          class="table-action-btn"
+                          prepend-icon="mdi-play"
+                          @click="pluginOn(item)"
+                        >
+                          {{ tm("buttons.enable") }}
+                        </v-btn>
+                        <v-btn
+                          v-else
+                          size="small"
+                          variant="tonal"
+                          color="error"
+                          class="table-action-btn"
+                          prepend-icon="mdi-pause"
+                          @click="pluginOff(item)"
+                        >
+                          {{ tm("buttons.disable") }}
+                        </v-btn>
+
+                        <v-btn
+                          size="small"
+                          variant="tonal"
+                          color="primary"
+                          class="table-action-btn"
+                          prepend-icon="mdi-refresh"
+                          @click="reloadPlugin(item.name)"
+                        >
+                          {{ tm("buttons.reload") }}
+                        </v-btn>
+
+                        <v-btn
+                          size="small"
+                          variant="tonal"
+                          color="primary"
+                          class="table-action-btn"
+                          prepend-icon="mdi-cog"
+                          @click="openExtensionConfig(item.name)"
+                        >
+                          {{ tm("buttons.configure") }}
+                        </v-btn>
+
+                        <v-btn
+                          size="small"
+                          variant="tonal"
+                          color="info"
+                          class="table-action-btn"
+                          prepend-icon="mdi-book-open-page-variant"
+                          :disabled="!item.repo"
+                          @click="item.repo && viewReadme(item)"
+                        >
+                          {{ tm("buttons.viewDocs") }}
+                        </v-btn>
+
+                        <StyledMenu location="bottom end" offset="8">
+                          <template #activator="{ props: menuProps }">
+                            <v-btn
+                              v-bind="menuProps"
+                              icon="mdi-dots-horizontal"
+                              size="small"
+                              variant="tonal"
+                              color="secondary"
+                              class="table-action-btn"
+                            ></v-btn>
+                          </template>
+
+                          <v-list-item
+                            class="styled-menu-item"
+                            prepend-icon="mdi-information"
+                            @click="showPluginInfo(item)"
+                        >
+                          <v-list-item-title>{{ tm("buttons.viewInfo") }}</v-list-item-title>
+                        </v-list-item>
+
+                          <v-list-item
+                            class="styled-menu-item"
+                            prepend-icon="mdi-update"
+                            @click="updateExtension(item.name)"
+                          >
+                            <v-list-item-title>{{ tm("buttons.update") }}</v-list-item-title>
+                          </v-list-item>
+
+                          <v-list-item
+                            class="styled-menu-item"
+                            prepend-icon="mdi-delete"
+                            :disabled="item.reserved"
+                            @click="uninstallExtension(item.name)"
+                          >
+                            <v-list-item-title>{{ tm("buttons.uninstall") }}</v-list-item-title>
+                          </v-list-item>
+                        </StyledMenu>
+                      </div>
+                    </template>
+
+                    <template v-slot:no-data>
+                      <div class="text-center pa-8">
+                        <v-icon size="64" color="info" class="mb-4"
+                          >mdi-puzzle-outline</v-icon
+                        >
+                        <div class="text-h5 mb-2">
+                          {{ tm("empty.noPlugins") }}
+                        </div>
+                        <div class="text-body-1 mb-4">
+                          {{ tm("empty.noPluginsDesc") }}
+                        </div>
+                      </div>
+                    </template>
+                  </v-data-table>
+                </v-card>
+              </div>
+
+              <!-- 卡片视图 -->
+              <div v-else>
+                <v-row v-if="filteredPlugins.length === 0" class="text-center">
+                  <v-col cols="12" class="pa-2">
+                    <v-icon size="64" color="info" class="mb-4"
+                      >mdi-puzzle-outline</v-icon
+                    >
+                    <div class="text-h5 mb-2">{{ tm("empty.noPlugins") }}</div>
+                    <div class="text-body-1 mb-4">
+                      {{ tm("empty.noPluginsDesc") }}
+                    </div>
+                  </v-col>
+                </v-row>
+
+                <v-row>
+                  <v-col
+                    cols="12"
+                    md="6"
+                    lg="4"
+                    v-for="extension in filteredPlugins"
+                    :key="extension.name"
+                    class="pb-2"
+                  >
+                    <ExtensionCard
+                      :extension="extension"
+                      class="rounded-lg"
+                      style="background-color: rgb(var(--v-theme-mcpCardBg))"
+                      @configure="openExtensionConfig(extension.name)"
+                      @uninstall="
+                        (ext, options) => uninstallExtension(ext.name, options)
+                      "
+                      @update="updateExtension(extension.name)"
+                      @reload="reloadPlugin(extension.name)"
+                      @toggle-activation="
+                        extension.activated
+                          ? pluginOff(extension)
+                          : pluginOn(extension)
+                      "
+                      @view-handlers="showPluginInfo(extension)"
+                      @view-readme="viewReadme(extension)"
+                      @view-changelog="viewChangelog(extension)"
+                    >
+                    </ExtensionCard>
+                  </v-col>
+                </v-row>
+              </div>
+            </v-fade-transition>
+
+            <v-tooltip :text="tm('market.installPlugin')" location="left">
+              <template v-slot:activator="{ props }">
+                <button
+                  v-bind="props"
+                  type="button"
+                  class="v-btn v-btn--elevated v-btn--icon v-theme--PurpleThemeDark bg-darkprimary v-btn--density-default v-btn--size-x-large v-btn--variant-elevated fab-button"
+                  style="
+                    position: fixed;
+                    right: 52px;
+                    bottom: 52px;
+                    z-index: 10000;
+                    border-radius: 16px;
+                  "
+                  @click="dialog = true"
+                >
+                  <span class="v-btn__overlay"></span>
+                  <span class="v-btn__underlay"></span>
+                  <span class="v-btn__content" data-no-activator="">
+                    <i
+                      class="mdi-plus mdi v-icon notranslate v-theme--PurpleThemeDark v-icon--size-default"
+                      aria-hidden="true"
+                      style="font-size: 32px"
+                    ></i>
+                  </span>
+                </button>
+              </template>
+            </v-tooltip>
+          </v-tab-item>
+</template>
+
+<style scoped>
+.view-mode-toggle :deep(.v-btn) {
+  min-width: 30px;
+  height: 28px;
+  padding: 0 8px;
+}
+
+.table-action-btn {
+  min-height: 34px;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.table-action-row {
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.fab-button {
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.fab-button:hover {
+  transform: translateY(-4px) scale(1.05);
+  box-shadow: 0 12px 20px rgba(var(--v-theme-primary), 0.4);
+}
+</style>
diff --git a/dashboard/src/views/extension/MarketPluginsTab.vue b/dashboard/src/views/extension/MarketPluginsTab.vue
new file mode 100644
index 000000000..63cc6b957
--- /dev/null
+++ b/dashboard/src/views/extension/MarketPluginsTab.vue
@@ -0,0 +1,373 @@
+<script setup>
+import MarketPluginCard from "@/components/extension/MarketPluginCard.vue";
+import defaultPluginIcon from "@/assets/images/plugin_icon.png";
+import { computed } from "vue";
+
+const props = defineProps({
+  state: {
+    type: Object,
+    required: true,
+  },
+});
+
+const {
+  commonStore,
+  t,
+  tm,
+  router,
+  route,
+  getSelectedGitHubProxy,
+  conflictDialog,
+  checkAndPromptConflicts,
+  handleConflictConfirm,
+  fileInput,
+  activeTab,
+  validTabs,
+  isValidTab,
+  getLocationHash,
+  extractTabFromHash,
+  syncTabFromHash,
+  extension_data,
+  getInitialShowReserved,
+  showReserved,
+  snack_message,
+  snack_show,
+  snack_success,
+  configDialog,
+  extension_config,
+  pluginMarketData,
+  loadingDialog,
+  showPluginInfoDialog,
+  selectedPlugin,
+  curr_namespace,
+  updatingAll,
+  readmeDialog,
+  forceUpdateDialog,
+  updateAllConfirmDialog,
+  changelogDialog,
+  getInitialListViewMode,
+  isListView,
+  pluginSearch,
+  loading_,
+  currentPage,
+  dangerConfirmDialog,
+  selectedDangerPlugin,
+  selectedMarketInstallPlugin,
+  installCompat,
+  versionCompatibilityDialog,
+  showUninstallDialog,
+  pluginToUninstall,
+  showSourceDialog,
+  showSourceManagerDialog,
+  sourceName,
+  sourceUrl,
+  customSources,
+  selectedSource,
+  showRemoveSourceDialog,
+  sourceToRemove,
+  editingSource,
+  originalSourceUrl,
+  extension_url,
+  dialog,
+  upload_file,
+  uploadTab,
+  showPluginFullName,
+  marketSearch,
+  debouncedMarketSearch,
+  refreshingMarket,
+  sortBy,
+  sortOrder,
+  randomPluginNames,
+  normalizeStr,
+  toPinyinText,
+  toInitials,
+  marketCustomFilter,
+  plugin_handler_info_headers,
+  pluginHeaders,
+  filteredExtensions,
+  filteredPlugins,
+  filteredMarketPlugins,
+  sortedPlugins,
+  RANDOM_PLUGINS_COUNT,
+  randomPlugins,
+  shufflePlugins,
+  refreshRandomPlugins,
+  displayItemsPerPage,
+  totalPages,
+  paginatedPlugins,
+  updatableExtensions,
+  toggleShowReserved,
+  toast,
+  resetLoadingDialog,
+  onLoadingDialogResult,
+  failedPluginsDict,
+  getExtensions,
+  handleReloadAllFailed,
+  checkUpdate,
+  uninstallExtension,
+  handleUninstallConfirm,
+  updateExtension,
+  showUpdateAllConfirm,
+  confirmUpdateAll,
+  cancelUpdateAll,
+  confirmForceUpdate,
+  updateAllExtensions,
+  pluginOn,
+  pluginOff,
+  openExtensionConfig,
+  updateConfig,
+  showPluginInfo,
+  reloadPlugin,
+  viewReadme,
+  viewChangelog,
+  handleInstallPlugin,
+  confirmDangerInstall,
+  cancelDangerInstall,
+  loadCustomSources,
+  saveCustomSources,
+  addCustomSource,
+  openSourceManagerDialog,
+  selectPluginSource,
+  sourceSelectItems,
+  editCustomSource,
+  removeCustomSource,
+  confirmRemoveSource,
+  saveCustomSource,
+  trimExtensionName,
+  checkAlreadyInstalled,
+  showVersionCompatibilityWarning,
+  continueInstallIgnoringVersionWarning,
+  cancelInstallOnVersionWarning,
+  newExtension,
+  normalizePlatformList,
+  getPlatformDisplayList,
+  resolveSelectedInstallPlugin,
+  selectedInstallPlugin,
+  checkInstallCompatibility,
+  refreshPluginMarket,
+  handleLocaleChange,
+  searchDebounceTimer,
+} = props.state;
+
+const currentSourceName = computed(() => {
+  if (!selectedSource.value) {
+    return tm("market.defaultSource");
+  }
+  const matched = customSources.value.find((s) => s.url === selectedSource.value);
+  return matched?.name || tm("market.defaultSource");
+});
+</script>
+
+<template>
+          <v-tab-item v-show="activeTab === 'market'">
+            <div class="mb-6 pt-4 pb-4">
+              <div class="d-flex align-center flex-wrap" style="gap: 12px">
+                <h2 class="text-h2 mb-0">{{ tm("tabs.market") }}</h2>
+
+                <v-tooltip location="top" :text="tm('market.sourceManagement')">
+                  <template v-slot:activator="{ props }">
+                    <v-btn
+                      v-bind="props"
+                      variant="tonal"
+                      rounded="md"
+                      color="primary"
+                      class="text-none px-2"
+                      @click="openSourceManagerDialog"
+                    >
+                      <v-icon size="18" class="mr-1">mdi-source-branch</v-icon>
+                      <span class="text-truncate" style="max-width: 180px">
+                        {{ currentSourceName }}
+                      </span>
+                    </v-btn>
+                  </template>
+                </v-tooltip>
+
+                <v-text-field
+                  v-model="marketSearch"
+                  density="compact"
+                  :label="tm('search.marketPlaceholder')"
+                  prepend-inner-icon="mdi-magnify"
+                  variant="solo-filled"
+                  flat
+                  hide-details
+                  single-line
+                  style="min-width: 220px; max-width: 340px"
+                >
+                </v-text-field>
+              </div>
+
+              <div
+                class="d-flex align-center text-caption text-medium-emphasis mt-2"
+                style="color: grey; line-height: 1.4"
+              >
+                <v-icon size="16" class="mr-1">mdi-alert-outline</v-icon>
+                <span>{{ tm("market.sourceSafetyWarning") }}</span>
+              </div>
+            </div>
+
+            <!-- <small style="color: var(--v-theme-secondaryText);">每个插件都是作者无偿提供的的劳动成果。如果您喜欢某个插件，请 Star！</small> -->
+
+            <!-- FAB Button -->
+            <v-tooltip :text="tm('market.installPlugin')" location="left">
+              <template v-slot:activator="{ props }">
+                <button
+                  v-bind="props"
+                  type="button"
+                  class="v-btn v-btn--elevated v-btn--icon v-theme--PurpleThemeDark bg-darkprimary v-btn--density-default v-btn--size-x-large v-btn--variant-elevated fab-button"
+                  style="
+                    position: fixed;
+                    right: 52px;
+                    bottom: 52px;
+                    z-index: 10000;
+                    border-radius: 16px;
+                  "
+                  @click="dialog = true"
+                >
+                  <span class="v-btn__overlay"></span>
+                  <span class="v-btn__underlay"></span>
+                  <span class="v-btn__content" data-no-activator="">
+                    <i
+                      class="mdi-plus mdi v-icon notranslate v-theme--PurpleThemeDark v-icon--size-default"
+                      aria-hidden="true"
+                      style="font-size: 32px"
+                    ></i>
+                  </span>
+                </button>
+              </template>
+            </v-tooltip>
+
+            <div class="mt-4">
+              <div
+                class="d-flex align-center mb-2"
+                style="justify-content: space-between; flex-wrap: wrap; gap: 8px"
+              >
+                <h2>
+                  {{ tm("market.randomPlugins") }}
+                </h2>
+                <v-btn
+                  color="primary"
+                  variant="tonal"
+                  prepend-icon="mdi-shuffle-variant"
+                  :disabled="pluginMarketData.length === 0"
+                  @click="refreshRandomPlugins"
+                >
+                  {{ tm("buttons.reshuffle") }}
+                </v-btn>
+              </div>
+
+              <v-row class="mb-6" dense>
+                <v-col
+                  v-for="plugin in randomPlugins"
+                  :key="`random-${plugin.name}`"
+                  cols="12"
+                  md="6"
+                  lg="4"
+                  class="pb-2"
+                >
+                  <MarketPluginCard
+                    :plugin="plugin"
+                    :default-plugin-icon="defaultPluginIcon"
+                    :show-plugin-full-name="showPluginFullName"
+                    @install="handleInstallPlugin"
+                  />
+                </v-col>
+              </v-row>
+
+              <div
+                class="d-flex align-center mb-2"
+                style="
+                  justify-content: space-between;
+                  flex-wrap: wrap;
+                  gap: 8px;
+                "
+              >
+                <div class="d-flex align-center" style="gap: 6px">
+                  <h2>
+                    {{ tm("market.allPlugins") }}({{
+                      filteredMarketPlugins.length
+                    }})
+                  </h2>
+                  <v-btn
+                    icon
+                    variant="text"
+                    @click="refreshPluginMarket"
+                    :loading="refreshingMarket"
+                  >
+                    <v-icon>mdi-refresh</v-icon>
+                  </v-btn>
+                </div>
+
+                <div
+                  class="d-flex align-center"
+                  style="gap: 8px; flex-wrap: wrap"
+                >
+                  <v-select
+                    v-model="sortBy"
+                    :items="[
+                      { title: tm('sort.default'), value: 'default' },
+                      { title: tm('sort.stars'), value: 'stars' },
+                      { title: tm('sort.author'), value: 'author' },
+                      { title: tm('sort.updated'), value: 'updated' },
+                    ]"
+                    density="compact"
+                    variant="outlined"
+                    hide-details
+                    style="max-width: 150px"
+                  >
+                    <template v-slot:prepend-inner>
+                      <v-icon size="small">mdi-sort</v-icon>
+                    </template>
+                  </v-select>
+
+                  <v-btn
+                    icon
+                    v-if="sortBy !== 'default'"
+                    @click="sortOrder = sortOrder === 'desc' ? 'asc' : 'desc'"
+                    variant="text"
+                    density="compact"
+                  >
+                    <v-icon>{{
+                      sortOrder === "desc"
+                        ? "mdi-sort-descending"
+                        : "mdi-sort-ascending"
+                    }}</v-icon>
+                    <v-tooltip activator="parent" location="top">
+                      {{
+                        sortOrder === "desc"
+                          ? tm("sort.descending")
+                          : tm("sort.ascending")
+                      }}
+                    </v-tooltip>
+                  </v-btn>
+                </div>
+              </div>
+
+              <v-row style="min-height: 26rem" dense>
+                <v-col
+                  v-for="plugin in paginatedPlugins"
+                  :key="plugin.name"
+                  cols="12"
+                  md="6"
+                  lg="4"
+                  class="pb-2"
+                >
+                  <MarketPluginCard
+                    :plugin="plugin"
+                    :default-plugin-icon="defaultPluginIcon"
+                    :show-plugin-full-name="showPluginFullName"
+                    @install="handleInstallPlugin"
+                  />
+                </v-col>
+              </v-row>
+
+              <div class="d-flex justify-center mt-4" v-if="totalPages > 1">
+                <v-pagination
+                  v-model="currentPage"
+                  :length="totalPages"
+                  :total-visible="7"
+                  size="small"
+                ></v-pagination>
+              </div>
+            </div>
+          </v-tab-item>
+</template>
diff --git a/dashboard/src/views/extension/useExtensionPage.js b/dashboard/src/views/extension/useExtensionPage.js
new file mode 100644
index 000000000..93b716e2a
--- /dev/null
+++ b/dashboard/src/views/extension/useExtensionPage.js
@@ -0,0 +1,1466 @@
+import axios from "axios";
+import { pinyin } from "pinyin-pro";
+import { useCommonStore } from "@/stores/common";
+import { useI18n, useModuleI18n } from "@/i18n/composables";
+import defaultPluginIcon from "@/assets/images/plugin_icon.png";
+import { getPlatformDisplayName } from "@/utils/platformUtils";
+import { ref, computed, onMounted, onUnmounted, reactive, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+export const useExtensionPage = () => {
+  
+  
+  const commonStore = useCommonStore();
+  const { t } = useI18n();
+  const { tm } = useModuleI18n("features/extension");
+  const router = useRouter();
+  const route = useRoute();
+  
+  const getSelectedGitHubProxy = () => {
+    if (typeof window === "undefined" || !window.localStorage) return "";
+    return localStorage.getItem("githubProxyRadioValue") === "1"
+      ? localStorage.getItem("selectedGitHubProxy") || ""
+      : "";
+  };
+  
+  // 检查指令冲突并提示
+  const conflictDialog = reactive({
+    show: false,
+    count: 0,
+  });
+  const checkAndPromptConflicts = async () => {
+    try {
+      const res = await axios.get("/api/commands");
+      if (res.data.status === "ok") {
+        const conflicts = res.data.data.summary?.conflicts || 0;
+        if (conflicts > 0) {
+          conflictDialog.count = conflicts;
+          conflictDialog.show = true;
+        }
+      }
+    } catch (err) {
+      console.debug("Failed to check command conflicts:", err);
+    }
+  };
+  const handleConflictConfirm = () => {
+    activeTab.value = "commands";
+  };
+  
+  const fileInput = ref(null);
+  const activeTab = ref("installed");
+  const validTabs = ["installed", "market", "mcp", "skills", "components"];
+  const isValidTab = (tab) => validTabs.includes(tab);
+  const getLocationHash = () =>
+    typeof window !== "undefined" ? window.location.hash : "";
+  const extractTabFromHash = (hash) => {
+    const lastHashIndex = (hash || "").lastIndexOf("#");
+    if (lastHashIndex === -1) return "";
+    return hash.slice(lastHashIndex + 1);
+  };
+  const syncTabFromHash = (hash) => {
+    const tab = extractTabFromHash(hash);
+    if (isValidTab(tab)) {
+      activeTab.value = tab;
+      return true;
+    }
+    return false;
+  };
+  const extension_data = reactive({
+    data: [],
+    message: "",
+  });
+  
+  // 从 localStorage 恢复显示系统插件的状态，默认为 false（隐藏）
+  const getInitialShowReserved = () => {
+    if (typeof window !== "undefined" && window.localStorage) {
+      const saved = localStorage.getItem("showReservedPlugins");
+      return saved === "true";
+    }
+    return false;
+  };
+  const showReserved = ref(getInitialShowReserved());
+  const snack_message = ref("");
+  const snack_show = ref(false);
+  const snack_success = ref("success");
+  const configDialog = ref(false);
+  const extension_config = reactive({
+    metadata: {},
+    config: {},
+  });
+  const pluginMarketData = ref([]);
+  const loadingDialog = reactive({
+    show: false,
+    title: "",
+    statusCode: 0, // 0: loading, 1: success, 2: error,
+    result: "",
+  });
+  const showPluginInfoDialog = ref(false);
+  const selectedPlugin = ref({});
+  const curr_namespace = ref("");
+  const updatingAll = ref(false);
+  
+  const readmeDialog = reactive({
+    show: false,
+    pluginName: "",
+    repoUrl: null,
+  });
+  
+  // 强制更新确认对话框
+  const forceUpdateDialog = reactive({
+    show: false,
+    extensionName: "",
+  });
+  
+  // 更新全部插件确认对话框
+  const updateAllConfirmDialog = reactive({
+    show: false,
+  });
+  
+  // 插件更新日志对话框（复用 ReadmeDialog）
+  const changelogDialog = reactive({
+    show: false,
+    pluginName: "",
+    repoUrl: null,
+  });
+  
+  // 新增变量支持列表视图
+  // 从 localStorage 恢复显示模式，默认为 false（卡片视图）
+  const getInitialListViewMode = () => {
+    if (typeof window !== "undefined" && window.localStorage) {
+      return localStorage.getItem("pluginListViewMode") === "true";
+    }
+    return false;
+  };
+  const isListView = ref(getInitialListViewMode());
+  const pluginSearch = ref("");
+  const loading_ = ref(false);
+  
+  // 分页相关
+  const currentPage = ref(1);
+  
+  // 危险插件确认对话框
+  const dangerConfirmDialog = ref(false);
+  const selectedDangerPlugin = ref(null);
+  const selectedMarketInstallPlugin = ref(null);
+  const installCompat = reactive({
+    checked: false,
+    compatible: true,
+    message: "",
+  });
+  
+  // AstrBot 版本范围不兼容警告对话框
+  const versionCompatibilityDialog = reactive({
+    show: false,
+    message: "",
+  });
+  
+  // 卸载插件确认对话框（列表模式用）
+  const showUninstallDialog = ref(false);
+  const pluginToUninstall = ref(null);
+  
+  // 自定义插件源相关
+  const showSourceDialog = ref(false);
+  const showSourceManagerDialog = ref(false);
+  const sourceName = ref("");
+  const sourceUrl = ref("");
+  const customSources = ref([]);
+  const selectedSource = ref(null);
+  const showRemoveSourceDialog = ref(false);
+  const sourceToRemove = ref(null);
+  const editingSource = ref(false);
+  const originalSourceUrl = ref("");
+  
+  // 插件市场相关
+  const extension_url = ref("");
+  const dialog = ref(false);
+  const upload_file = ref(null);
+  const uploadTab = ref("file");
+  const showPluginFullName = ref(false);
+  const marketSearch = ref("");
+  const debouncedMarketSearch = ref("");
+  const refreshingMarket = ref(false);
+  const sortBy = ref("default"); // default, stars, author, updated
+  const sortOrder = ref("desc"); // desc (降序) or asc (升序)
+  const randomPluginNames = ref([]);
+  
+  // 插件市场拼音搜索
+  const normalizeStr = (s) => (s ?? "").toString().toLowerCase().trim();
+  const toPinyinText = (s) =>
+    pinyin(s ?? "", { toneType: "none" })
+      .toLowerCase()
+      .replace(/\s+/g, "");
+  const toInitials = (s) =>
+    pinyin(s ?? "", { pattern: "first", toneType: "none" })
+      .toLowerCase()
+      .replace(/\s+/g, "");
+  const marketCustomFilter = (value, query, item) => {
+    const q = normalizeStr(query);
+    if (!q) return true;
+  
+    const candidates = new Set();
+    if (value != null) candidates.add(String(value));
+    if (item?.name) candidates.add(String(item.name));
+    if (item?.trimmedName) candidates.add(String(item.trimmedName));
+    if (item?.display_name) candidates.add(String(item.display_name));
+    if (item?.desc) candidates.add(String(item.desc));
+    if (item?.author) candidates.add(String(item.author));
+  
+    for (const v of candidates) {
+      const nv = normalizeStr(v);
+      if (nv.includes(q)) return true;
+      const pv = toPinyinText(v);
+      if (pv.includes(q)) return true;
+      const iv = toInitials(v);
+      if (iv.includes(q)) return true;
+    }
+    return false;
+  };
+  
+  const plugin_handler_info_headers = computed(() => [
+    { title: tm("table.headers.eventType"), key: "event_type_h" },
+    { title: tm("table.headers.description"), key: "desc", maxWidth: "250px" },
+    { title: tm("table.headers.specificType"), key: "type" },
+    { title: tm("table.headers.trigger"), key: "cmd" },
+  ]);
+  
+  // 插件表格的表头定义
+  const pluginHeaders = computed(() => [
+    { title: tm("table.headers.name"), key: "name", width: "200px" },
+    { title: tm("table.headers.description"), key: "desc", width: "180px" },
+    { title: tm("table.headers.version"), key: "version", width: "100px" },
+    { title: tm("table.headers.author"), key: "author", width: "100px" },
+    {
+      title: tm("table.headers.actions"),
+      key: "actions",
+      sortable: false,
+      width: "520px",
+    },
+  ]);
+  
+  // 过滤要显示的插件
+  const filteredExtensions = computed(() => {
+    const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
+    if (!showReserved.value) {
+      return data.filter((ext) => !ext.reserved);
+    }
+    return data;
+  });
+  
+  // 通过搜索过滤插件
+  const filteredPlugins = computed(() => {
+    if (!pluginSearch.value) {
+      return filteredExtensions.value;
+    }
+  
+    const search = pluginSearch.value.toLowerCase();
+    return filteredExtensions.value.filter((plugin) => {
+      const supportPlatforms = Array.isArray(plugin.support_platforms)
+        ? plugin.support_platforms.join(" ").toLowerCase()
+        : "";
+      const astrbotVersion = (plugin.astrbot_version ?? "").toLowerCase();
+      return (
+        plugin.name?.toLowerCase().includes(search) ||
+        plugin.desc?.toLowerCase().includes(search) ||
+        plugin.author?.toLowerCase().includes(search) ||
+        supportPlatforms.includes(search) ||
+        astrbotVersion.includes(search)
+      );
+    });
+  });
+  
+  // 过滤后的插件市场数据（带搜索）
+  const filteredMarketPlugins = computed(() => {
+    if (!debouncedMarketSearch.value) {
+      return pluginMarketData.value;
+    }
+  
+    const search = debouncedMarketSearch.value.toLowerCase();
+    return pluginMarketData.value.filter((plugin) => {
+      // 使用自定义过滤器
+      return (
+        marketCustomFilter(plugin.name, search, plugin) ||
+        marketCustomFilter(plugin.desc, search, plugin) ||
+        marketCustomFilter(plugin.author, search, plugin)
+      );
+    });
+  });
+  
+  // 所有插件列表，推荐插件排在前面
+  const sortedPlugins = computed(() => {
+    let plugins = [...filteredMarketPlugins.value];
+  
+    // 根据排序选项排序
+    if (sortBy.value === "stars") {
+      // 按 star 数排序
+      plugins.sort((a, b) => {
+        const starsA = a.stars ?? 0;
+        const starsB = b.stars ?? 0;
+        return sortOrder.value === "desc" ? starsB - starsA : starsA - starsB;
+      });
+    } else if (sortBy.value === "author") {
+      // 按作者名字典序排序
+      plugins.sort((a, b) => {
+        const authorA = (a.author ?? "").toLowerCase();
+        const authorB = (b.author ?? "").toLowerCase();
+        const result = authorA.localeCompare(authorB);
+        return sortOrder.value === "desc" ? -result : result;
+      });
+    } else if (sortBy.value === "updated") {
+      // 按更新时间排序
+      plugins.sort((a, b) => {
+        const dateA = a.updated_at ? new Date(a.updated_at).getTime() : 0;
+        const dateB = b.updated_at ? new Date(b.updated_at).getTime() : 0;
+        return sortOrder.value === "desc" ? dateB - dateA : dateA - dateB;
+      });
+    } else {
+      // default: 推荐插件排在前面
+      const pinned = plugins.filter((plugin) => plugin?.pinned);
+      const notPinned = plugins.filter((plugin) => !plugin?.pinned);
+      return [...pinned, ...notPinned];
+    }
+  
+    return plugins;
+  });
+  
+  const RANDOM_PLUGINS_COUNT = 3;
+  
+  const randomPlugins = computed(() => {
+    const allPlugins = pluginMarketData.value;
+    if (allPlugins.length === 0) return [];
+  
+    const pluginsByName = new Map(allPlugins.map((plugin) => [plugin.name, plugin]));
+    const selected = randomPluginNames.value
+      .map((name) => pluginsByName.get(name))
+      .filter(Boolean);
+  
+    if (selected.length > 0) {
+      return selected;
+    }
+  
+    return allPlugins.slice(0, Math.min(RANDOM_PLUGINS_COUNT, allPlugins.length));
+  });
+  
+  const shufflePlugins = (plugins) => {
+    const shuffled = [...plugins];
+    for (let i = shuffled.length - 1; i > 0; i -= 1) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    }
+    return shuffled;
+  };
+  
+  const refreshRandomPlugins = () => {
+    const shuffled = shufflePlugins(pluginMarketData.value);
+    randomPluginNames.value = shuffled
+      .slice(0, Math.min(RANDOM_PLUGINS_COUNT, shuffled.length))
+      .map((plugin) => plugin.name);
+  };
+  
+  // 分页计算属性
+  const displayItemsPerPage = 9; // 固定每页显示9个卡片（3行）
+  
+  const totalPages = computed(() => {
+    return Math.ceil(sortedPlugins.value.length / displayItemsPerPage);
+  });
+  
+  const paginatedPlugins = computed(() => {
+    const start = (currentPage.value - 1) * displayItemsPerPage;
+    const end = start + displayItemsPerPage;
+    return sortedPlugins.value.slice(start, end);
+  });
+  
+  const updatableExtensions = computed(() => {
+    const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
+    return data.filter((ext) => ext.has_update);
+  });
+  
+  // 方法
+  const toggleShowReserved = () => {
+    showReserved.value = !showReserved.value;
+    // 保存到 localStorage
+    if (typeof window !== "undefined" && window.localStorage) {
+      localStorage.setItem("showReservedPlugins", showReserved.value.toString());
+    }
+  };
+  
+  const toast = (message, success) => {
+    snack_message.value = message;
+    snack_show.value = true;
+    snack_success.value = success;
+  };
+  
+  const resetLoadingDialog = () => {
+    loadingDialog.show = false;
+    loadingDialog.title = tm("dialogs.loading.title");
+    loadingDialog.statusCode = 0;
+    loadingDialog.result = "";
+  };
+  
+  const onLoadingDialogResult = (statusCode, result, timeToClose = 2000) => {
+    loadingDialog.statusCode = statusCode;
+    loadingDialog.result = result;
+    if (timeToClose === -1) return;
+    setTimeout(resetLoadingDialog, timeToClose);
+  };
+  
+  const failedPluginsDict = ref({});
+  
+  const getExtensions = async () => {
+    loading_.value = true;
+    try {
+      const res = await axios.get("/api/plugin/get");   
+      Object.assign(extension_data, res.data);
+      
+      const failRes = await axios.get("/api/plugin/source/get-failed-plugins");    
+      failedPluginsDict.value = failRes.data.data || {};
+      
+      checkUpdate();
+    } catch (err) {
+      toast(err, "error");
+    } finally {
+      loading_.value = false;
+    }
+  };
+  
+  const handleReloadAllFailed = async () => {
+      const dirNames = Object.keys(failedPluginsDict.value);
+      if (dirNames.length === 0) {
+          toast("没有需要重载的失败插件", "info");
+          return;
+      }
+  
+      loading_.value = true;
+      try {
+          const promises = dirNames.map(dir => 
+              axios.post("/api/plugin/reload-failed", { dir_name: dir })
+          );
+          await Promise.all(promises);
+          
+          toast("已尝试重载所有失败插件", "success");
+          
+          // 清空 message 关闭对话框
+          extension_data.message = "";
+          
+          // 刷新列表
+          await getExtensions();
+          
+      } catch (e) {
+          console.error("重载失败:", e);
+          toast("批量重载过程中出现错误", "error");
+      } finally {
+          loading_.value = false;
+      }
+  };
+  
+  const checkUpdate = () => {
+    const onlinePluginsMap = new Map();
+    const onlinePluginsNameMap = new Map();
+  
+    pluginMarketData.value.forEach((plugin) => {
+      if (plugin.repo) {
+        onlinePluginsMap.set(plugin.repo.toLowerCase(), plugin);
+      }
+      onlinePluginsNameMap.set(plugin.name, plugin);
+    });
+  
+    const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
+    data.forEach((extension) => {
+      const repoKey = extension.repo?.toLowerCase();
+      const onlinePlugin = repoKey ? onlinePluginsMap.get(repoKey) : null;
+      const onlinePluginByName = onlinePluginsNameMap.get(extension.name);
+      const matchedPlugin = onlinePlugin || onlinePluginByName;
+  
+      if (matchedPlugin) {
+        extension.online_version = matchedPlugin.version;
+        extension.has_update =
+          extension.version !== matchedPlugin.version &&
+          matchedPlugin.version !== tm("status.unknown");
+      } else {
+        extension.has_update = false;
+      }
+    });
+  };
+  
+  const uninstallExtension = async (
+    extension_name,
+    optionsOrSkipConfirm = false,
+  ) => {
+    let deleteConfig = false;
+    let deleteData = false;
+    let skipConfirm = false;
+  
+    // 处理参数：可能是布尔值（旧的 skipConfirm）或对象（新的选项）
+    if (typeof optionsOrSkipConfirm === "boolean") {
+      skipConfirm = optionsOrSkipConfirm;
+    } else if (
+      typeof optionsOrSkipConfirm === "object" &&
+      optionsOrSkipConfirm !== null
+    ) {
+      deleteConfig = optionsOrSkipConfirm.deleteConfig || false;
+      deleteData = optionsOrSkipConfirm.deleteData || false;
+      skipConfirm = true; // 如果传递了选项对象，说明已经确认过了
+    }
+  
+    // 如果没有跳过确认且没有传递选项对象，显示自定义卸载对话框
+    if (!skipConfirm) {
+      pluginToUninstall.value = extension_name;
+      showUninstallDialog.value = true;
+      return; // 等待对话框回调
+    }
+  
+    // 执行卸载
+    toast(tm("messages.uninstalling") + " " + extension_name, "primary");
+    try {
+      const res = await axios.post("/api/plugin/uninstall", {
+        name: extension_name,
+        delete_config: deleteConfig,
+        delete_data: deleteData,
+      });
+      if (res.data.status === "error") {
+        toast(res.data.message, "error");
+        return;
+      }
+      Object.assign(extension_data, res.data);
+      toast(res.data.message, "success");
+      getExtensions();
+    } catch (err) {
+      toast(err, "error");
+    }
+  };
+  
+  // 处理卸载确认对话框的确认事件
+  const handleUninstallConfirm = (options) => {
+    if (pluginToUninstall.value) {
+      uninstallExtension(pluginToUninstall.value, options);
+      pluginToUninstall.value = null;
+    }
+  };
+  
+  const updateExtension = async (extension_name, forceUpdate = false) => {
+    // 查找插件信息
+    const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
+    const ext = data.find((e) => e.name === extension_name);
+  
+    // 如果没有检测到更新且不是强制更新，则弹窗确认
+    if (!ext?.has_update && !forceUpdate) {
+      forceUpdateDialog.extensionName = extension_name;
+      forceUpdateDialog.show = true;
+      return;
+    }
+  
+    loadingDialog.title = tm("status.loading");
+    loadingDialog.show = true;
+    try {
+      const res = await axios.post("/api/plugin/update", {
+        name: extension_name,
+        proxy: getSelectedGitHubProxy(),
+      });
+  
+      if (res.data.status === "error") {
+        onLoadingDialogResult(2, res.data.message, -1);
+        return;
+      }
+  
+      Object.assign(extension_data, res.data);
+      onLoadingDialogResult(1, res.data.message);
+      setTimeout(async () => {
+        toast(tm("messages.refreshing"), "info", 2000);
+        try {
+          await getExtensions();
+          toast(tm("messages.refreshSuccess"), "success");
+  
+          // 更新完成后弹出更新日志
+          viewChangelog({
+            name: extension_name,
+            repo: ext?.repo || null,
+          });
+        } catch (error) {
+          const errorMsg =
+            error.response?.data?.message || error.message || String(error);
+          toast(`${tm("messages.refreshFailed")}: ${errorMsg}`, "error");
+        }
+      }, 1000);
+    } catch (err) {
+      toast(err, "error");
+    }
+  };
+  
+  // 确认强制更新
+  // 显示更新全部插件确认对话框
+  const showUpdateAllConfirm = () => {
+    if (updatableExtensions.value.length === 0) return;
+    updateAllConfirmDialog.show = true;
+  };
+  
+  // 确认更新全部插件
+  const confirmUpdateAll = () => {
+    updateAllConfirmDialog.show = false;
+    updateAllExtensions();
+  };
+  
+  // 取消更新全部插件
+  const cancelUpdateAll = () => {
+    updateAllConfirmDialog.show = false;
+  };
+  
+  const confirmForceUpdate = () => {
+    const name = forceUpdateDialog.extensionName;
+    forceUpdateDialog.show = false;
+    forceUpdateDialog.extensionName = "";
+    updateExtension(name, true);
+  };
+  
+  const updateAllExtensions = async () => {
+    if (updatingAll.value || updatableExtensions.value.length === 0) return;
+    updatingAll.value = true;
+    loadingDialog.title = tm("status.loading");
+    loadingDialog.statusCode = 0;
+    loadingDialog.result = "";
+    loadingDialog.show = true;
+  
+    const targets = updatableExtensions.value.map((ext) => ext.name);
+    try {
+      const res = await axios.post("/api/plugin/update-all", {
+        names: targets,
+        proxy: getSelectedGitHubProxy(),
+      });
+  
+      if (res.data.status === "error") {
+        onLoadingDialogResult(
+          2,
+          res.data.message ||
+            tm("messages.updateAllFailed", {
+              failed: targets.length,
+              total: targets.length,
+            }),
+          -1,
+        );
+        return;
+      }
+  
+      const results = res.data.data?.results || [];
+      const failures = results.filter((r) => r.status !== "ok");
+      try {
+        await getExtensions();
+      } catch (err) {
+        const errorMsg =
+          err.response?.data?.message || err.message || String(err);
+        failures.push({ name: "refresh", status: "error", message: errorMsg });
+      }
+  
+      if (failures.length === 0) {
+        onLoadingDialogResult(1, tm("messages.updateAllSuccess"));
+      } else {
+        const failureText = tm("messages.updateAllFailed", {
+          failed: failures.length,
+          total: targets.length,
+        });
+        const detail = failures.map((f) => `${f.name}: ${f.message}`).join("\n");
+        onLoadingDialogResult(2, `${failureText}\n${detail}`, -1);
+      }
+    } catch (err) {
+      const errorMsg = err.response?.data?.message || err.message || String(err);
+      onLoadingDialogResult(2, errorMsg, -1);
+    } finally {
+      updatingAll.value = false;
+    }
+  };
+  
+  const pluginOn = async (extension) => {
+    try {
+      const res = await axios.post("/api/plugin/on", { name: extension.name });
+      if (res.data.status === "error") {
+        toast(res.data.message, "error");
+        return;
+      }
+      toast(res.data.message, "success");
+      await getExtensions();
+  
+      await checkAndPromptConflicts();
+    } catch (err) {
+      toast(err, "error");
+    }
+  };
+  
+  const pluginOff = async (extension) => {
+    try {
+      const res = await axios.post("/api/plugin/off", { name: extension.name });
+      if (res.data.status === "error") {
+        toast(res.data.message, "error");
+        return;
+      }
+      toast(res.data.message, "success");
+      getExtensions();
+    } catch (err) {
+      toast(err, "error");
+    }
+  };
+  
+  const openExtensionConfig = async (extension_name) => {
+    curr_namespace.value = extension_name;
+    configDialog.value = true;
+    try {
+      const res = await axios.get(
+        "/api/config/get?plugin_name=" + extension_name,
+      );
+      extension_config.metadata = res.data.data.metadata;
+      extension_config.config = res.data.data.config;
+    } catch (err) {
+      toast(err, "error");
+    }
+  };
+  
+  const updateConfig = async () => {
+    try {
+      const res = await axios.post(
+        "/api/config/plugin/update?plugin_name=" + curr_namespace.value,
+        extension_config.config,
+      );
+      if (res.data.status === "ok") {
+        toast(res.data.message, "success");
+      } else {
+        toast(res.data.message, "error");
+      }
+      configDialog.value = false;
+      extension_config.metadata = {};
+      extension_config.config = {};
+      getExtensions();
+    } catch (err) {
+      toast(err, "error");
+    }
+  };
+  
+  const showPluginInfo = (plugin) => {
+    selectedPlugin.value = plugin;
+    showPluginInfoDialog.value = true;
+  };
+  
+  const reloadPlugin = async (plugin_name) => {
+    try {
+      const res = await axios.post("/api/plugin/reload", { name: plugin_name });
+      await getExtensions();
+      if (res.data.status === "error") {
+        toast(res.data.message, "error");
+        return;
+      }
+      toast(tm("messages.reloadSuccess"), "success");
+      //getExtensions();
+    } catch (err) {
+      toast(err, "error");
+    }
+  };
+  
+  const viewReadme = (plugin) => {
+    readmeDialog.pluginName = plugin.name;
+    readmeDialog.repoUrl = plugin.repo;
+    readmeDialog.show = true;
+  };
+  
+  // 查看更新日志
+  const viewChangelog = (plugin) => {
+    changelogDialog.pluginName = plugin.name;
+    changelogDialog.repoUrl = plugin.repo;
+    changelogDialog.show = true;
+  };
+  
+  // 为表格视图创建一个处理安装插件的函数
+  const handleInstallPlugin = async (plugin) => {
+    if (plugin.tags && plugin.tags.includes("danger")) {
+      selectedDangerPlugin.value = plugin;
+      dangerConfirmDialog.value = true;
+    } else {
+      selectedMarketInstallPlugin.value = plugin;
+      extension_url.value = plugin.repo;
+      dialog.value = true;
+      uploadTab.value = "url";
+    }
+  };
+  
+  // 确认安装危险插件
+  const confirmDangerInstall = () => {
+    if (selectedDangerPlugin.value) {
+      selectedMarketInstallPlugin.value = selectedDangerPlugin.value;
+      extension_url.value = selectedDangerPlugin.value.repo;
+      dialog.value = true;
+      uploadTab.value = "url";
+    }
+    dangerConfirmDialog.value = false;
+    selectedDangerPlugin.value = null;
+  };
+  
+  // 取消安装危险插件
+  const cancelDangerInstall = () => {
+    dangerConfirmDialog.value = false;
+    selectedDangerPlugin.value = null;
+  };
+  
+  // 自定义插件源管理方法
+  const loadCustomSources = async () => {
+    try {
+      const res = await axios.get("/api/plugin/source/get");
+      if (res.data.status === "ok") {
+        customSources.value = res.data.data;
+      } else {
+        toast(res.data.message, "error");
+      }
+    } catch (e) {
+      console.warn("Failed to load custom sources:", e);
+      customSources.value = [];
+    }
+  
+    // 加载当前选中的插件源
+    const currentSource = localStorage.getItem("selectedPluginSource");
+    if (currentSource) {
+      selectedSource.value = currentSource;
+    }
+  };
+  
+  const saveCustomSources = async () => {
+    try {
+      const res = await axios.post("/api/plugin/source/save", {
+        sources: customSources.value,
+      });
+      if (res.data.status !== "ok") {
+        toast(res.data.message, "error");
+      }
+    } catch (e) {
+      toast(e, "error");
+    }
+  };
+  
+  const addCustomSource = () => {
+    showSourceManagerDialog.value = false;
+    editingSource.value = false;
+    originalSourceUrl.value = "";
+    sourceName.value = "";
+    sourceUrl.value = "";
+    showSourceDialog.value = true;
+  };
+  
+  const openSourceManagerDialog = async () => {
+    await loadCustomSources();
+    showSourceManagerDialog.value = true;
+  };
+  
+  const selectPluginSource = (sourceUrl) => {
+    selectedSource.value = sourceUrl;
+    if (sourceUrl) {
+      localStorage.setItem("selectedPluginSource", sourceUrl);
+    } else {
+      localStorage.removeItem("selectedPluginSource");
+    }
+    // 重新加载插件市场数据
+    refreshPluginMarket();
+  };
+  
+  const sourceSelectItems = computed(() => [
+    { title: tm("market.defaultSource"), value: "__default__" },
+    ...customSources.value.map((source) => ({
+      title: source.name,
+      value: source.url,
+    })),
+  ]);
+  
+  const editCustomSource = (source) => {
+    if (!source) return;
+    showSourceManagerDialog.value = false;
+    editingSource.value = true;
+    originalSourceUrl.value = source.url;
+    sourceName.value = source.name;
+    sourceUrl.value = source.url;
+    showSourceDialog.value = true;
+  };
+  
+  const removeCustomSource = (source) => {
+    if (!source) return;
+    showSourceManagerDialog.value = false;
+    sourceToRemove.value = source;
+    showRemoveSourceDialog.value = true;
+  };
+  
+  const confirmRemoveSource = () => {
+    if (sourceToRemove.value) {
+      customSources.value = customSources.value.filter(
+        (s) => s.url !== sourceToRemove.value.url,
+      );
+      saveCustomSources();
+  
+      // 如果删除的是当前选中的源，切换到默认源
+      if (selectedSource.value === sourceToRemove.value.url) {
+        selectedSource.value = null;
+        localStorage.removeItem("selectedPluginSource");
+        // 重新加载插件市场数据
+        refreshPluginMarket();
+      }
+  
+      toast(tm("market.sourceRemoved"), "success");
+      showRemoveSourceDialog.value = false;
+      sourceToRemove.value = null;
+    }
+  };
+  
+  const saveCustomSource = () => {
+    const normalizedUrl = sourceUrl.value.trim();
+  
+    if (!sourceName.value.trim() || !normalizedUrl) {
+      toast(tm("messages.fillSourceNameAndUrl"), "error");
+      return;
+    }
+  
+    // 检查URL格式
+    try {
+      new URL(normalizedUrl);
+    } catch (e) {
+      toast(tm("messages.invalidUrl"), "error");
+      return;
+    }
+  
+    if (editingSource.value) {
+      // 编辑模式：更新现有源
+      const index = customSources.value.findIndex(
+        (s) => s.url === originalSourceUrl.value,
+      );
+      if (index !== -1) {
+        customSources.value[index] = {
+          name: sourceName.value.trim(),
+          url: normalizedUrl,
+        };
+  
+        // 如果编辑的是当前选中的源，更新选中源
+        if (selectedSource.value === originalSourceUrl.value) {
+          selectedSource.value = normalizedUrl;
+          localStorage.setItem("selectedPluginSource", selectedSource.value);
+          // 重新加载插件市场数据
+          refreshPluginMarket();
+        }
+      }
+    } else {
+      // 添加模式：检查是否已存在
+      if (customSources.value.some((source) => source.url === normalizedUrl)) {
+        toast(tm("market.sourceExists"), "error");
+        return;
+      }
+  
+      customSources.value.push({
+        name: sourceName.value.trim(),
+        url: normalizedUrl,
+      });
+    }
+  
+    saveCustomSources();
+    toast(
+      editingSource.value ? tm("market.sourceUpdated") : tm("market.sourceAdded"),
+      "success",
+    );
+  
+    // 重置表单
+    sourceName.value = "";
+    sourceUrl.value = "";
+    editingSource.value = false;
+    originalSourceUrl.value = "";
+    showSourceDialog.value = false;
+  };
+  
+  // 插件市场显示完整插件名称
+  const trimExtensionName = () => {
+    pluginMarketData.value.forEach((plugin) => {
+      if (plugin.name) {
+        let name = plugin.name.trim().toLowerCase();
+        if (name.startsWith("astrbot_plugin_")) {
+          plugin.trimmedName = name.substring(15);
+        } else if (name.startsWith("astrbot_") || name.startsWith("astrbot-")) {
+          plugin.trimmedName = name.substring(8);
+        } else plugin.trimmedName = plugin.name;
+      }
+    });
+  };
+  
+  const checkAlreadyInstalled = () => {
+    const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
+    const installedRepos = new Set(data.map((ext) => ext.repo?.toLowerCase()));
+    const installedNames = new Set(data.map((ext) => ext.name));
+    const installedByRepo = new Map(
+      data
+        .filter((ext) => ext.repo)
+        .map((ext) => [ext.repo.toLowerCase(), ext]),
+    );
+    const installedByName = new Map(data.map((ext) => [ext.name, ext]));
+  
+    for (let i = 0; i < pluginMarketData.value.length; i++) {
+      const plugin = pluginMarketData.value[i];
+      const matchedInstalled =
+        (plugin.repo && installedByRepo.get(plugin.repo.toLowerCase())) ||
+        installedByName.get(plugin.name);
+  
+      // 兜底：市场源未提供字段时，回填本地已安装插件中的元数据，便于在市场页直接展示
+      if (matchedInstalled) {
+        if (
+          (!Array.isArray(plugin.support_platforms) ||
+            plugin.support_platforms.length === 0) &&
+          Array.isArray(matchedInstalled.support_platforms)
+        ) {
+          plugin.support_platforms = matchedInstalled.support_platforms;
+        }
+        if (!plugin.astrbot_version && matchedInstalled.astrbot_version) {
+          plugin.astrbot_version = matchedInstalled.astrbot_version;
+        }
+      }
+  
+      plugin.installed =
+        installedRepos.has(plugin.repo?.toLowerCase()) ||
+        installedNames.has(plugin.name);
+    }
+  
+    let installed = [];
+    let notInstalled = [];
+    for (let i = 0; i < pluginMarketData.value.length; i++) {
+      if (pluginMarketData.value[i].installed) {
+        installed.push(pluginMarketData.value[i]);
+      } else {
+        notInstalled.push(pluginMarketData.value[i]);
+      }
+    }
+    pluginMarketData.value = notInstalled.concat(installed);
+  };
+  
+  const showVersionCompatibilityWarning = (message) => {
+    versionCompatibilityDialog.message = message;
+    versionCompatibilityDialog.show = true;
+  };
+  
+  const continueInstallIgnoringVersionWarning = async () => {
+    versionCompatibilityDialog.show = false;
+    await newExtension(true);
+  };
+  
+  const cancelInstallOnVersionWarning = () => {
+    versionCompatibilityDialog.show = false;
+  };
+  
+  const newExtension = async (ignoreVersionCheck = false) => {
+    if (extension_url.value === "" && upload_file.value === null) {
+      toast(tm("messages.fillUrlOrFile"), "error");
+      return;
+    }
+  
+    if (extension_url.value !== "" && upload_file.value !== null) {
+      toast(tm("messages.dontFillBoth"), "error");
+      return;
+    }
+    loading_.value = true;
+    loadingDialog.title = tm("status.loading");
+    loadingDialog.show = true;
+    if (upload_file.value !== null) {
+      toast(tm("messages.installing"), "primary");
+      const formData = new FormData();
+      formData.append("file", upload_file.value);
+      formData.append("ignore_version_check", String(ignoreVersionCheck));
+      axios
+        .post("/api/plugin/install-upload", formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        })
+        .then(async (res) => {
+          loading_.value = false;
+          if (
+            res.data.status === "warning" &&
+            res.data.data?.warning_type === "astrbot_version_incompatible"
+          ) {
+            onLoadingDialogResult(2, res.data.message, -1);
+            showVersionCompatibilityWarning(res.data.message);
+            return;
+          }
+          if (res.data.status === "error") {
+            onLoadingDialogResult(2, res.data.message, -1);
+            return;
+          }
+          upload_file.value = null;
+          onLoadingDialogResult(1, res.data.message);
+          dialog.value = false;
+          await getExtensions();
+  
+          viewReadme({
+            name: res.data.data.name,
+            repo: res.data.data.repo || null,
+          });
+  
+          await checkAndPromptConflicts();
+        })
+        .catch((err) => {
+          loading_.value = false;
+          onLoadingDialogResult(2, err, -1);
+        });
+    } else {
+      toast(
+        tm("messages.installingFromUrl") + " " + extension_url.value,
+        "primary",
+      );
+      axios
+        .post("/api/plugin/install", {
+          url: extension_url.value,
+          proxy: getSelectedGitHubProxy(),
+          ignore_version_check: ignoreVersionCheck,
+        })
+        .then(async (res) => {
+          loading_.value = false;
+          if (
+            res.data.status === "warning" &&
+            res.data.data?.warning_type === "astrbot_version_incompatible"
+          ) {
+            onLoadingDialogResult(2, res.data.message, -1);
+            showVersionCompatibilityWarning(res.data.message);
+            return;
+          }
+          toast(res.data.message, res.data.status === "ok" ? "success" : "error");
+          if (res.data.status === "error") {
+            onLoadingDialogResult(2, res.data.message, -1);
+            return;
+          }
+          extension_url.value = "";
+          onLoadingDialogResult(1, res.data.message);
+          dialog.value = false;
+          await getExtensions();
+  
+          viewReadme({
+            name: res.data.data.name,
+            repo: res.data.data.repo || null,
+          });
+  
+          await checkAndPromptConflicts();
+        })
+        .catch((err) => {
+          loading_.value = false;
+          toast(tm("messages.installFailed") + " " + err, "error");
+          onLoadingDialogResult(2, err, -1);
+        });
+    }
+  };
+  
+  const normalizePlatformList = (platforms) => {
+    if (!Array.isArray(platforms)) return [];
+    return platforms.filter((item) => typeof item === "string");
+  };
+  
+  const getPlatformDisplayList = (platforms) => {
+    return normalizePlatformList(platforms).map((platformId) =>
+      getPlatformDisplayName(platformId),
+    );
+  };
+  
+  const resolveSelectedInstallPlugin = () => {
+    if (
+      selectedMarketInstallPlugin.value &&
+      selectedMarketInstallPlugin.value.repo === extension_url.value
+    ) {
+      return selectedMarketInstallPlugin.value;
+    }
+    return pluginMarketData.value.find((plugin) => plugin.repo === extension_url.value) || null;
+  };
+  
+  const selectedInstallPlugin = computed(() => resolveSelectedInstallPlugin());
+  
+  const checkInstallCompatibility = async () => {
+    installCompat.checked = false;
+    installCompat.compatible = true;
+    installCompat.message = "";
+  
+    const plugin = selectedInstallPlugin.value;
+    if (!plugin?.astrbot_version || uploadTab.value !== "url") {
+      return;
+    }
+  
+    try {
+      const res = await axios.post("/api/plugin/check-compat", {
+        astrbot_version: plugin.astrbot_version,
+      });
+      if (res.data.status === "ok") {
+        installCompat.checked = true;
+        installCompat.compatible = !!res.data.data?.compatible;
+        installCompat.message = res.data.data?.message || "";
+      }
+    } catch (err) {
+      console.debug("Failed to check plugin compatibility:", err);
+    }
+  };
+  
+  // 刷新插件市场数据
+  const refreshPluginMarket = async () => {
+    refreshingMarket.value = true;
+    try {
+      // 强制刷新插件市场数据
+      const data = await commonStore.getPluginCollections(
+        true,
+        selectedSource.value,
+      );
+      pluginMarketData.value = data;
+      trimExtensionName();
+      checkAlreadyInstalled();
+      checkUpdate();
+      refreshRandomPlugins();
+      currentPage.value = 1; // 重置到第一页
+  
+      toast(tm("messages.refreshSuccess"), "success");
+    } catch (err) {
+      toast(tm("messages.refreshFailed") + " " + err, "error");
+    } finally {
+      refreshingMarket.value = false;
+    }
+  };
+  
+  // 生命周期
+  onMounted(async () => {
+    if (!syncTabFromHash(getLocationHash())) {
+      if (typeof window !== "undefined") {
+        window.location.hash = `#${activeTab.value}`;
+      }
+    }
+    await getExtensions();
+  
+    // 加载自定义插件源
+    loadCustomSources();
+  
+    // 检查是否有 open_config 参数
+    let urlParams;
+    if (window.location.hash) {
+      // For hash mode (#/path?param=value)
+      const hashQuery = window.location.hash.split("?")[1] || "";
+      urlParams = new URLSearchParams(hashQuery);
+    } else {
+      // For history mode (/path?param=value)
+      urlParams = new URLSearchParams(window.location.search);
+    }
+    console.log("URL Parameters:", urlParams.toString());
+    const plugin_name = urlParams.get("open_config");
+    if (plugin_name) {
+      console.log(`Opening config for plugin: ${plugin_name}`);
+      openExtensionConfig(plugin_name);
+    }
+  
+    try {
+      const data = await commonStore.getPluginCollections(
+        false,
+        selectedSource.value,
+      );
+      pluginMarketData.value = data;
+      trimExtensionName();
+      checkAlreadyInstalled();
+      checkUpdate();
+      refreshRandomPlugins();
+    } catch (err) {
+      toast(tm("messages.getMarketDataFailed") + " " + err, "error");
+    }
+  });
+  
+  // 处理语言切换事件，重新加载插件配置以获取插件的 i18n 数据
+  const handleLocaleChange = () => {
+    // 如果配置对话框是打开的，重新加载当前插件的配置
+    if (configDialog.value && currentConfigPlugin.value) {
+      openExtensionConfig(currentConfigPlugin.value);
+    }
+  };
+  
+  // 监听语言切换事件
+  window.addEventListener("astrbot-locale-changed", handleLocaleChange);
+  
+  // 清理事件监听器
+  onUnmounted(() => {
+    window.removeEventListener("astrbot-locale-changed", handleLocaleChange);
+  });
+  
+  // 搜索防抖处理
+  let searchDebounceTimer = null;
+  watch(marketSearch, (newVal) => {
+    if (searchDebounceTimer) {
+      clearTimeout(searchDebounceTimer);
+    }
+  
+    searchDebounceTimer = setTimeout(() => {
+      debouncedMarketSearch.value = newVal;
+      // 搜索时重置到第一页
+      currentPage.value = 1;
+    }, 300); // 300ms 防抖延迟
+  });
+  
+  // 监听显示模式变化并保存到 localStorage
+  watch(isListView, (newVal) => {
+    if (typeof window !== "undefined" && window.localStorage) {
+      localStorage.setItem("pluginListViewMode", String(newVal));
+    }
+  });
+  
+  watch(
+    [() => dialog.value, () => extension_url.value, () => uploadTab.value],
+    async ([dialogOpen, _, currentUploadTab]) => {
+      if (!dialogOpen || currentUploadTab !== "url") {
+        installCompat.checked = false;
+        installCompat.compatible = true;
+        installCompat.message = "";
+        return;
+      }
+      await checkInstallCompatibility();
+    },
+  );
+  
+  watch(
+    () => route.fullPath,
+    () => {
+      const tab = extractTabFromHash(getLocationHash());
+      if (isValidTab(tab) && tab !== activeTab.value) {
+        activeTab.value = tab;
+      }
+    },
+  );
+  
+  watch(activeTab, (newTab) => {
+    if (!isValidTab(newTab)) return;
+    const currentTab = extractTabFromHash(getLocationHash());
+    if (currentTab === newTab) return;
+    const hash = getLocationHash();
+    const lastHashIndex = hash.lastIndexOf("#");
+    const nextHash =
+      lastHashIndex > 0 ? `${hash.slice(0, lastHashIndex)}#${newTab}` : `#${newTab}`;
+    if (typeof window !== "undefined") {
+      window.location.hash = nextHash;
+    }
+  });
+
+  return {
+    commonStore,
+    t,
+    tm,
+    router,
+    route,
+    getSelectedGitHubProxy,
+    conflictDialog,
+    checkAndPromptConflicts,
+    handleConflictConfirm,
+    fileInput,
+    activeTab,
+    validTabs,
+    isValidTab,
+    getLocationHash,
+    extractTabFromHash,
+    syncTabFromHash,
+    extension_data,
+    getInitialShowReserved,
+    showReserved,
+    snack_message,
+    snack_show,
+    snack_success,
+    configDialog,
+    extension_config,
+    pluginMarketData,
+    loadingDialog,
+    showPluginInfoDialog,
+    selectedPlugin,
+    curr_namespace,
+    updatingAll,
+    readmeDialog,
+    forceUpdateDialog,
+    updateAllConfirmDialog,
+    changelogDialog,
+    getInitialListViewMode,
+    isListView,
+    pluginSearch,
+    loading_,
+    currentPage,
+    dangerConfirmDialog,
+    selectedDangerPlugin,
+    selectedMarketInstallPlugin,
+    installCompat,
+    versionCompatibilityDialog,
+    showUninstallDialog,
+    pluginToUninstall,
+    showSourceDialog,
+    showSourceManagerDialog,
+    sourceName,
+    sourceUrl,
+    customSources,
+    selectedSource,
+    showRemoveSourceDialog,
+    sourceToRemove,
+    editingSource,
+    originalSourceUrl,
+    extension_url,
+    dialog,
+    upload_file,
+    uploadTab,
+    showPluginFullName,
+    marketSearch,
+    debouncedMarketSearch,
+    refreshingMarket,
+    sortBy,
+    sortOrder,
+    randomPluginNames,
+    normalizeStr,
+    toPinyinText,
+    toInitials,
+    marketCustomFilter,
+    plugin_handler_info_headers,
+    pluginHeaders,
+    filteredExtensions,
+    filteredPlugins,
+    filteredMarketPlugins,
+    sortedPlugins,
+    RANDOM_PLUGINS_COUNT,
+    randomPlugins,
+    shufflePlugins,
+    refreshRandomPlugins,
+    displayItemsPerPage,
+    totalPages,
+    paginatedPlugins,
+    updatableExtensions,
+    toggleShowReserved,
+    toast,
+    resetLoadingDialog,
+    onLoadingDialogResult,
+    failedPluginsDict,
+    getExtensions,
+    handleReloadAllFailed,
+    checkUpdate,
+    uninstallExtension,
+    handleUninstallConfirm,
+    updateExtension,
+    showUpdateAllConfirm,
+    confirmUpdateAll,
+    cancelUpdateAll,
+    confirmForceUpdate,
+    updateAllExtensions,
+    pluginOn,
+    pluginOff,
+    openExtensionConfig,
+    updateConfig,
+    showPluginInfo,
+    reloadPlugin,
+    viewReadme,
+    viewChangelog,
+    handleInstallPlugin,
+    confirmDangerInstall,
+    cancelDangerInstall,
+    loadCustomSources,
+    saveCustomSources,
+    addCustomSource,
+    openSourceManagerDialog,
+    selectPluginSource,
+    sourceSelectItems,
+    editCustomSource,
+    removeCustomSource,
+    confirmRemoveSource,
+    saveCustomSource,
+    trimExtensionName,
+    checkAlreadyInstalled,
+    showVersionCompatibilityWarning,
+    continueInstallIgnoringVersionWarning,
+    cancelInstallOnVersionWarning,
+    newExtension,
+    normalizePlatformList,
+    getPlatformDisplayList,
+    resolveSelectedInstallPlugin,
+    selectedInstallPlugin,
+    checkInstallCompatibility,
+    refreshPluginMarket,
+    handleLocaleChange,
+    searchDebounceTimer,
+  };
+};