diff --git a/astrbot/core/config/default.py b/astrbot/core/config/default.py
index 64243a82f5..4ae6ff0bd8 100644
--- a/astrbot/core/config/default.py
+++ b/astrbot/core/config/default.py
@@ -3669,11 +3669,6 @@ class ChatProviderTemplate(TypedDict):
                         "type": "string",
                         "hint": "如果唤醒前缀为 /, 额外聊天唤醒前缀为 chat，则需要 /chat 才会触发 LLM 请求",
                     },
-                    "provider_settings.prompt_prefix": {
-                        "description": "用户提示词",
-                        "type": "string",
-                        "hint": "可使用 {{prompt}} 作为用户输入的占位符。如果不输入占位符则代表添加在用户输入的前面。",
-                    },
                     "provider_settings.image_compress_enabled": {
                         "description": "启用图片压缩",
                         "type": "bool",
@@ -3697,6 +3692,12 @@ class ChatProviderTemplate(TypedDict):
                         },
                         "slider": {"min": 1, "max": 100, "step": 1},
                     },
+                    "provider_settings.prompt_prefix": {
+                        "description": "用户提示词",
+                        "type": "string",
+                        "hint": "可使用 {{prompt}} 作为用户输入的占位符。如果不输入占位符则代表添加在用户输入的前面。",
+                        "collapsed": True,
+                    },
                     "provider_tts_settings.dual_output": {
                         "description": "开启 TTS 时同时输出语音和文字内容",
                         "type": "bool",
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
index 3e1ffbc326..1871b5b648 100644
--- a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
+++ b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
@@ -1,4 +1,4 @@
-/* Auto-generated MDI subset – 261 icons */
+/* Auto-generated MDI subset – 256 icons */
 /* Do not edit manually. Run: pnpm run subset-icons */
 
 @font-face {
@@ -112,6 +112,10 @@
   content: "\F09D1";
 }
 
+.mdi-broadcast::before {
+  content: "\F1720";
+}
+
 .mdi-broom::before {
   content: "\F00E2";
 }
@@ -464,10 +468,6 @@
   content: "\F0234";
 }
 
-.mdi-filter-variant::before {
-  content: "\F0236";
-}
-
 .mdi-folder::before {
   content: "\F024B";
 }
@@ -552,6 +552,10 @@
   content: "\F02DC";
 }
 
+.mdi-hook::before {
+  content: "\F06E2";
+}
+
 .mdi-identifier::before {
   content: "\F0EFE";
 }
@@ -760,10 +764,6 @@
   content: "\F03E4";
 }
 
-.mdi-pause-circle-outline::before {
-  content: "\F03E6";
-}
-
 .mdi-pencil::before {
   content: "\F03EB";
 }
@@ -784,22 +784,10 @@
   content: "\F03F6";
 }
 
-.mdi-pin::before {
-  content: "\F0403";
-}
-
-.mdi-pin-outline::before {
-  content: "\F0931";
-}
-
 .mdi-play::before {
   content: "\F040A";
 }
 
-.mdi-play-circle-outline::before {
-  content: "\F040D";
-}
-
 .mdi-plus::before {
   content: "\F0415";
 }
@@ -1024,14 +1012,6 @@
   content: "\F056E";
 }
 
-.mdi-view-grid::before {
-  content: "\F0570";
-}
-
-.mdi-view-list::before {
-  content: "\F0572";
-}
-
 .mdi-volume-high::before {
   content: "\F057E";
 }
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff
index 02f37fd732..0739236499 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff differ
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2
index a26ce1678c..1582327459 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 differ
diff --git a/dashboard/src/components/extension/PinnedPluginItem.vue b/dashboard/src/components/extension/PinnedPluginItem.vue
deleted file mode 100644
index 5104d3f69b..0000000000
--- a/dashboard/src/components/extension/PinnedPluginItem.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import defaultPluginIcon from "@/assets/images/plugin_icon.png";
-
-const props = defineProps({
-  plugin: {
-    type: Object,
-    required: true
-  },
-  isPinned: {
-    type: Boolean,
-    default: false
-  },
-  tm: {
-    type: Function,
-    required: true
-  },
-  dragged: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const emit = defineEmits([
-  'toggle-pin',
-  'view-readme',
-  'open-config',
-  'reload',
-  'update',
-  'show-info',
-  'uninstall',
-  'dragstart',
-  'dragover',
-  'dragenter',
-  'dragend',
-  'drop'
-]);
-
-const handlePinnedImgError = (e) => {
-  e.target.src = defaultPluginIcon;
-};
-
-const authorDisplay = computed(() => {
-  const p = props.plugin || {};
-  if (typeof p.author === 'string' && p.author.trim()) return p.author;
-  if (Array.isArray(p.authors) && p.authors.length) return p.authors.join(', ');
-  if (typeof p.author_name === 'string' && p.author_name.trim()) return p.author_name;
-  if (typeof p.owner === 'string' && p.owner.trim()) return p.owner;
-  if (p.author && typeof p.author === 'object' && p.author.name) return p.author.name;
-  return '';
-});
-</script>
-
-<template>
-  <div
-    class="pinned-item pinned-card-wrapper"
-    :class="{ 'is-dragging': dragged }"
-    style="position:relative;"
-    draggable="true"
-    @dragstart="$emit('dragstart')"
-    @dragover.prevent="$emit('dragover', $event)"
-    @dragenter.prevent="$emit('dragenter', $event)"
-    @dragend="$emit('dragend', $event)"
-    @drop="$emit('drop', $event)"
-  >
-    <v-menu offset-y>
-      <template #activator="{ props: menuProps }">
-        <div class="d-flex flex-column align-center" style="cursor: pointer; width: 80px;">
-          <v-avatar
-            v-bind="menuProps"
-            size="72"
-            class="pinned-avatar activator-avatar mb-1"
-            :title="plugin.display_name || plugin.name"
-          >
-            <img
-              :src="(typeof plugin.logo === 'string' && plugin.logo.trim()) ? plugin.logo : defaultPluginIcon"
-              :alt="plugin.name"
-              @error="handlePinnedImgError"
-            />
-          </v-avatar>
-          <span 
-            class="text-caption text-center text-truncate" 
-            style="width: 100%; font-size: 0.75rem; opacity: 0.9; line-height: 1.2;"
-          >
-            {{ plugin.display_name || plugin.name }}
-          </span>
-        </div>
-      </template>
-
-      <v-card>
-        <v-card-title class="d-flex" style="gap:8px; padding:12px; align-items:center;">
-          <div style="display:flex; align-items:center; gap:8px; min-width:0;">
-            <v-avatar size="40" class="pinned-avatar" style="width:40px; height:40px;">
-              <img
-                :src="(typeof plugin.logo === 'string' && plugin.logo.trim()) ? plugin.logo : defaultPluginIcon"
-                :alt="plugin.name"
-                @error="handlePinnedImgError"
-              />
-            </v-avatar>
-            <div style="min-width:0; overflow:hidden;">
-              <div style="font-weight:600; font-size:0.95rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;">{{ plugin.display_name || plugin.name }}</div>
-              <div style="font-size:0.8rem; color:var(--v-theme-on-surface); opacity:0.8; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;">{{ authorDisplay || (plugin.author || '') }}</div>
-            </div>
-          </div>
-        </v-card-title>
-        <v-divider></v-divider>
-        <v-card-text class="d-flex" style="gap:8px; padding:12px;">
-          <v-tooltip location="top" :text="tm('buttons.viewDocs')">
-            <template #activator="{ props: a }">
-              <v-btn v-bind="a" icon size="small" variant="tonal" color="info" @click.stop="$emit('view-readme', plugin)">
-                <v-icon>mdi-book-open-page-variant</v-icon>
-              </v-btn>
-            </template>
-          </v-tooltip>
-
-          <v-tooltip location="top" :text="tm('card.actions.pluginConfig')">
-            <template #activator="{ props: a }">
-              <v-btn v-bind="a" icon size="small" variant="tonal" color="primary" @click.stop="$emit('open-config', plugin.name)">
-                <v-icon>mdi-cog</v-icon>
-              </v-btn>
-            </template>
-          </v-tooltip>
-
-          <v-tooltip location="top" :text="tm('card.actions.reloadPlugin')">
-            <template #activator="{ props: a }">
-              <v-btn v-bind="a" icon size="small" variant="tonal" color="primary" @click.stop="$emit('reload', plugin.name)">
-                <v-icon>mdi-refresh</v-icon>
-              </v-btn>
-            </template>
-          </v-tooltip>
-
-          <v-tooltip location="top" :text="tm('buttons.update')">
-            <template #activator="{ props: a }">
-              <v-btn v-bind="a" icon size="small" variant="tonal" color="warning" @click.stop="$emit('update', plugin.name)">
-                <v-icon>mdi-update</v-icon>
-              </v-btn>
-            </template>
-          </v-tooltip>
-
-          <v-tooltip location="top" :text="tm('buttons.viewInfo')">
-            <template #activator="{ props: a }">
-              <v-btn v-bind="a" icon size="small" variant="tonal" color="secondary" @click.stop="$emit('show-info', plugin)">
-                <v-icon>mdi-information</v-icon>
-              </v-btn>
-            </template>
-          </v-tooltip>
-
-          <v-tooltip location="top" :text="tm('buttons.uninstall')">
-            <template #activator="{ props: a }">
-              <v-btn v-bind="a" icon size="small" variant="tonal" color="error" @click.stop="$emit('uninstall', plugin.name)" v-if="!plugin.reserved">
-                <v-icon>mdi-delete</v-icon>
-              </v-btn>
-            </template>
-          </v-tooltip>
-        </v-card-text>
-      </v-card>
-    </v-menu>
-
-    <v-btn
-      icon
-      size="small"
-      class="pinned-pin-btn"
-      :color="isPinned ? 'primary' : 'secondary'"
-      @click.stop="$emit('toggle-pin', plugin)"
-      :title="isPinned ? tm('buttons.unpin') : tm('buttons.pin')"
-      style="position:absolute; top:6px; right:6px; min-width:22px; width:22px; height:22px;"
-    >
-      <v-icon size="14">{{ isPinned ? 'mdi-pin' : 'mdi-pin-outline' }}</v-icon>
-    </v-btn>
-  </div>
-</template>
-
-<style scoped>
-.pinned-avatar {
-  display: inline-flex;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  cursor: pointer;
-  border-radius: 12px;
-}
-
-.pinned-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.pinned-card-wrapper {
-  position: relative;
-  display: inline-block;
-  width: 80px;
-}
-
-.pinned-item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.2s ease, opacity 0.2s ease;
-}
-
-.is-dragging {
-  opacity: 0.5;
-  transform: scale(0.95);
-  cursor: grabbing;
-}
-
-[draggable="true"] {
-  cursor: grab;
-}
-
-[draggable="true"]:active {
-  cursor: grabbing;
-}
-</style>
diff --git a/dashboard/src/components/shared/ExtensionCard.vue b/dashboard/src/components/shared/ExtensionCard.vue
index f7c05c5c59..9953422a6c 100644
--- a/dashboard/src/components/shared/ExtensionCard.vue
+++ b/dashboard/src/components/shared/ExtensionCard.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, inject, watch, useAttrs } from "vue";
+import { ref, computed, watch, useAttrs } 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";
@@ -13,10 +12,6 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-  pinned: {
-    type: Boolean,
-    default: false,
-  },
   marketMode: {
     type: Boolean,
     default: false,
@@ -32,16 +27,13 @@ const emit = defineEmits([
   "configure",
   "update",
   "reload",
-  "install",
   "uninstall",
   "toggle-activation",
-  "toggle-pin",
   "view-handlers",
   "view-readme",
   "view-changelog",
 ]);
 
-const reveal = ref(false);
 const showUninstallDialog = ref(false);
 
 const attrs = useAttrs();
@@ -57,10 +49,6 @@ const supportPlatforms = computed(() => {
   return platforms.filter((item) => typeof item === "string");
 });
 
-const supportPlatformDisplayNames = computed(() =>
-  supportPlatforms.value.map((platformId) => getPlatformDisplayName(platformId)),
-);
-
 const astrbotVersionRequirement = computed(() => {
   const versionSpec = props.extension?.astrbot_version;
   return typeof versionSpec === "string" && versionSpec.trim().length
@@ -68,17 +56,6 @@ const astrbotVersionRequirement = computed(() => {
     : "";
 });
 
-// 作者显示（兼容多种字段名）
-const authorDisplay = computed(() => {
-  const ext = props.extension || {};
-  if (typeof ext.author === 'string' && ext.author.trim()) return ext.author;
-  if (Array.isArray(ext.authors) && ext.authors.length) return ext.authors.join(', ');
-  if (typeof ext.author_name === 'string' && ext.author_name.trim()) return ext.author_name;
-  if (typeof ext.owner === 'string' && ext.owner.trim()) return ext.owner;
-  if (ext.author && typeof ext.author === 'object' && ext.author.name) return ext.author.name;
-  return '';
-});
-
 const logoLoadFailed = ref(false);
 
 const logoSrc = computed(() => {
@@ -111,12 +88,6 @@ const reloadExtension = () => {
   emit("reload", props.extension);
 };
 
-const $confirm = inject("$confirm");
-
-const installExtension = async () => {
-  emit("install", props.extension);
-};
-
 const uninstallExtension = async () => {
   showUninstallDialog.value = true;
 };
@@ -132,11 +103,6 @@ const toggleActivation = () => {
   emit("toggle-activation", props.extension);
 };
 
-const togglePin = (e?: Event) => {
-  if (e) e.stopPropagation();
-  emit("toggle-pin", props.extension);
-};
-
 const viewHandlers = () => {
   emit("view-handlers", props.extension);
 };
@@ -154,9 +120,10 @@ const viewChangelog = () => {
 <template>
   <v-card
     v-bind="attrs"
-    class="mx-auto d-flex flex-column h-100"
+    class="extension-card mx-auto d-flex flex-column h-100"
     elevation="0"
     height="100%"
+    :ripple="false"
     :style="{
       position: 'relative',
       backgroundColor:
@@ -173,15 +140,18 @@ const viewChangelog = () => {
           : '#ffffffdd',
     }"
   >
-    <v-card-text
-      style="
-        padding: 16px;
-        padding-bottom: 0px;
-        width: 100%;
-      "
-    >
-      <div style="overflow-x: auto; width: 100%">
-        <div style="width: 100%; margin-bottom: 24px">
+    <v-card-text class="extension-card-text">
+      <div class="extension-content-row">
+        <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-title-row">
             <p
               class="text-h3 font-weight-black extension-title"
@@ -204,6 +174,17 @@ const viewChangelog = () => {
                   }}</span>
                 </template>
               </v-tooltip>
+              <span v-if="extension.version" class="extension-version">
+                {{ extension.version }}
+              </span>
+              <v-chip
+                v-if="extension.reserved"
+                color="primary"
+                size="x-small"
+                class="extension-system-chip"
+              >
+                {{ tm("status.system") }}
+              </v-chip>
               <v-tooltip
                 location="top"
                 v-if="extension?.has_update && !marketMode"
@@ -229,157 +210,67 @@ const viewChangelog = () => {
             <template v-if="!marketMode">
               <v-tooltip location="left">
                 <template v-slot:activator="{ props: tooltipProps }">
-                          <div class="extension-switch-wrap" @click.stop>
-                            <div v-bind="tooltipProps" style="display:inline-flex; align-items:center;">
-                              <v-switch
-                                :model-value="extension.activated"
-                                color="success"
-                                density="compact"
-                                hide-details
-                                inset
-                                @update:model-value="toggleActivation"
-                              ></v-switch>
-                            </div>
-
-                            <v-tooltip location="top" :text="pinned ? tm('buttons.unpin') : tm('buttons.pin')">
-                              <template #activator="{ props: pinProps }">
-                                <v-btn
-                                  v-bind="pinProps"
-                                  icon
-                                  size="small"
-                                  variant="tonal"
-                                  :color="pinned ? 'primary' : 'secondary'"
-                                  class="ml-2"
-                                  @click.stop="togglePin"
-                                >
-                                  <v-icon size="18">{{ pinned ? 'mdi-pin' : 'mdi-pin-outline' }}</v-icon>
-                                </v-btn>
-                              </template>
-                            </v-tooltip>
-                          </div>
+                  <div class="extension-switch-wrap" @click.stop>
+                    <div
+                      v-bind="tooltipProps"
+                      style="display: inline-flex; align-items: center"
+                    >
+                      <v-switch
+                        :model-value="extension.activated"
+                        color="success"
+                        density="compact"
+                        hide-details
+                        inset
+                        @update:model-value="toggleActivation"
+                      ></v-switch>
+                    </div>
+                  </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="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"
-                  style="cursor: pointer"
-                  @click="updateExtension"
-                >
-                  <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="authorDisplay" color="info" label size="small">
-                  <v-icon icon="mdi-account" start></v-icon>
-                  {{ authorDisplay }}
-                </v-chip>
-                <v-chip
-                  v-if="astrbotVersionRequirement"
-                  color="secondary"
-                  variant="outlined"
-                  label
-                  size="small"
-                >
-                  AstrBot: {{ astrbotVersionRequirement }}
-                </v-chip>
-              </div>
+          <div class="extension-chip-group d-flex flex-wrap">
+            <v-chip
+              v-if="extension?.has_update"
+              color="warning"
+              label
+              size="small"
+              style="cursor: pointer"
+              @click.stop="updateExtension"
+            >
+              <v-icon icon="mdi-arrow-up-bold" start></v-icon>
+              {{ extension.online_version }}
+            </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
+            class="extension-desc"
+            :class="{ 'text-caption': $vuetify.display.xs }"
+          >
+            {{ extension.desc }}
           </div>
         </div>
       </div>
@@ -485,6 +376,15 @@ const viewChangelog = () => {
 </template>
 
 <style scoped>
+.extension-card-text {
+  padding: 12px 14px 8px;
+  width: 100%;
+}
+
+.extension-card {
+  cursor: pointer;
+}
+
 .extension-image-container {
   display: flex;
   align-items: flex-start;
@@ -492,15 +392,15 @@ const viewChangelog = () => {
 }
 
 .extension-logo {
-  width: 72px;
-  height: 72px;
-  border-radius: 12px;
+  width: 64px;
+  height: 64px;
+  border-radius: 10px;
   object-fit: cover;
 }
 
 .extension-content-row {
   display: flex;
-  gap: 12px;
+  gap: 14px;
   align-items: flex-start;
 }
 
@@ -510,14 +410,17 @@ const viewChangelog = () => {
 }
 
 .extension-chip-group {
-  gap: 8px;
+  gap: 6px;
 }
 
 .extension-desc {
-  margin-top: 8px;
+  margin-top: 6px;
   font-size: 90%;
-  overflow-y: auto;
-  height: 70px;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .extension-title {
@@ -542,36 +445,46 @@ const viewChangelog = () => {
   white-space: nowrap;
 }
 
-.extension-switch-wrap {
-  display: flex;
-  align-items: center;
+.extension-version {
+  color: rgba(var(--v-theme-on-surface), 0.48);
   flex-shrink: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-left: 10px;
+  white-space: nowrap;
 }
 
-.extension-switch-wrap :deep(.v-switch) {
-  margin: 0;
+.extension-system-chip {
+  flex-shrink: 0;
+  margin-left: 8px;
 }
 
-.extension-market-menu-wrap {
+.extension-switch-wrap {
   display: flex;
   align-items: center;
   flex-shrink: 0;
 }
 
+.extension-switch-wrap :deep(.v-switch) {
+  margin: 0;
+}
+
 @media (max-width: 600px) {
   .extension-content-row {
-    flex-direction: column;
+    gap: 10px;
   }
 
   .extension-logo {
-    width: 64px;
-    height: 64px;
+    width: 52px;
+    height: 52px;
   }
 }
 
 .extension-actions {
   margin-top: auto;
-  gap: 8px;
+  gap: 6px;
   justify-content: flex-end;
+  min-height: 42px;
+  padding: 0 12px 10px;
 }
 </style>
diff --git a/dashboard/src/i18n/locales/en-US/features/extension.json b/dashboard/src/i18n/locales/en-US/features/extension.json
index 0a4a7fe48b..344026f583 100644
--- a/dashboard/src/i18n/locales/en-US/features/extension.json
+++ b/dashboard/src/i18n/locales/en-US/features/extension.json
@@ -91,7 +91,27 @@
   },
   "empty": {
     "noPlugins": "No Extensions",
-    "noPluginsDesc": "Try installing extensions or showing system extensions"
+    "noPluginsDesc": "Try installing extensions or adjusting the search"
+  },
+  "detail": {
+    "contents": "Plugin Handlers",
+    "noContents": "No handlers",
+    "notFound": "Plugin not found",
+    "docsTitle": "Documentation",
+    "docsEmpty": "No documentation",
+    "handlerGroups": {
+      "commands": "Commands / Command Groups",
+      "hooks": "Hooks",
+      "functionTools": "Function Tools",
+      "eventListeners": "Event Listeners"
+    },
+    "info": {
+      "title": "Info",
+      "author": "Author",
+      "category": "Category",
+      "authorWebsite": "Author Website",
+      "repository": "Repository"
+    }
   },
   "market": {
     "recommended": "🥳 Recommended",
@@ -144,8 +164,7 @@
     "updated": "Last Updated",
     "updateStatus": "Update Status",
     "ascending": "Ascending",
-    "descending": "Descending",
-    "pinUpdatesOnTop": "Pin Updates on Top"
+    "descending": "Descending"
   },
   "tags": {
     "danger": "Danger"
@@ -223,6 +242,7 @@
     "supportedFormats": "Supports .zip extension files",
     "updateAllSuccess": "All upgradable extensions have been updated!",
     "updateAllFailed": "{failed} of {total} extensions failed to update:",
+    "noUpdatesAvailable": "No extensions have updates available",
     "fillSourceNameAndUrl": "Please fill in the complete source name and URL",
     "invalidUrl": "Please enter a valid URL",
     "enterJsonUrl": "Please enter a URL that returns plugin list JSON data"
diff --git a/dashboard/src/i18n/locales/ru-RU/features/extension.json b/dashboard/src/i18n/locales/ru-RU/features/extension.json
index c085885dbf..63e7c9ed2b 100644
--- a/dashboard/src/i18n/locales/ru-RU/features/extension.json
+++ b/dashboard/src/i18n/locales/ru-RU/features/extension.json
@@ -91,7 +91,27 @@
     },
     "empty": {
         "noPlugins": "Плагины не найдены",
-        "noPluginsDesc": "Попробуйте установить новые плагины или включите отображение системных."
+        "noPluginsDesc": "Попробуйте установить новые плагины или изменить поиск."
+    },
+    "detail": {
+        "contents": "Обработчики плагина",
+        "noContents": "Нет обработчиков",
+        "notFound": "Плагин не найден",
+        "docsTitle": "Документация",
+        "docsEmpty": "Документация отсутствует",
+        "handlerGroups": {
+            "commands": "Команды / группы команд",
+            "hooks": "Хуки",
+            "functionTools": "Функциональные инструменты",
+            "eventListeners": "Слушатели событий"
+        },
+        "info": {
+            "title": "Информация",
+            "author": "Автор",
+            "category": "Категория",
+            "authorWebsite": "Сайт автора",
+            "repository": "Репозиторий"
+        }
     },
     "market": {
         "recommended": "🥳 Рекомендуем",
@@ -143,8 +163,7 @@
         "updated": "Дате обновления",
         "updateStatus": "Статусу обновления",
         "ascending": "По возрастанию",
-        "descending": "По убыванию",
-        "pinUpdatesOnTop": "Обновления сверху"
+        "descending": "По убыванию"
     },
     "tags": {
         "danger": "Опасно"
@@ -222,6 +241,7 @@
         "supportedFormats": "Поддерживаются файлы плагинов в формате .zip",
         "updateAllSuccess": "Все плагины успешно обновлены",
         "updateAllFailed": "Ошибок при обновлении: {failed} из {total}:",
+        "noUpdatesAvailable": "Нет плагинов с доступными обновлениями",
         "fillSourceNameAndUrl": "Пожалуйста, введите имя и адрес источника",
         "invalidUrl": "Введите корректный URL",
         "enterJsonUrl": "Введите URL, возвращающий список плагинов в формате JSON"
diff --git a/dashboard/src/i18n/locales/zh-CN/features/extension.json b/dashboard/src/i18n/locales/zh-CN/features/extension.json
index c06f381422..906c6d7c87 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/extension.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/extension.json
@@ -9,8 +9,7 @@
     "handlersOperation": "管理行为"
   },
   "titles": {
-    "installedAstrBotPlugins": "已安装的 AstrBot 插件",
-    "pinnedPlugins": "置顶插件"
+    "installedAstrBotPlugins": "已安装的 AstrBot 插件"
   },
   "failedPlugins": {
     "title": "加载失败插件（{count}）",
@@ -54,8 +53,6 @@
     "refresh": "刷新",
     "updateAll": "更新全部插件",
     "deleteSource": "删除源",
-    "pin": "置顶",
-    "unpin": "取消置顶",
     "reshuffle": "随机一发"
   },
   "status": {
@@ -94,7 +91,27 @@
   },
   "empty": {
     "noPlugins": "暂无插件",
-    "noPluginsDesc": "尝试安装插件或者显示系统插件"
+    "noPluginsDesc": "尝试安装插件或调整搜索条件"
+  },
+  "detail": {
+    "contents": "插件行为",
+    "noContents": "暂无行为",
+    "notFound": "未找到该插件",
+    "docsTitle": "文档",
+    "docsEmpty": "暂无文档",
+    "handlerGroups": {
+      "commands": "指令/指令组",
+      "hooks": "钩子",
+      "functionTools": "函数工具",
+      "eventListeners": "事件监听器"
+    },
+    "info": {
+      "title": "信息",
+      "author": "作者",
+      "category": "类别",
+      "authorWebsite": "作者网站",
+      "repository": "仓库"
+    }
   },
   "market": {
     "recommended": "🥳 推荐",
@@ -147,8 +164,7 @@
     "updated": "更新时间",
     "updateStatus": "更新状态",
     "ascending": "升序",
-    "descending": "降序",
-    "pinUpdatesOnTop": "有更新置顶"
+    "descending": "降序"
   },
   "tags": {
     "danger": "危险"
@@ -226,6 +242,7 @@
     "supportedFormats": "支持 .zip 格式的插件文件",
     "updateAllSuccess": "所有可更新的插件都已更新！",
     "updateAllFailed": "有 {failed}/{total} 个插件更新失败:",
+    "noUpdatesAvailable": "当前没有可更新的插件",
     "fillSourceNameAndUrl": "请填写完整的插件源名称和地址",
     "invalidUrl": "请输入有效的URL地址",
     "enterJsonUrl": "请输入返回插件列表JSON数据的URL地址"
diff --git a/dashboard/src/router/MainRoutes.ts b/dashboard/src/router/MainRoutes.ts
index 526e316351..88e1c35deb 100644
--- a/dashboard/src/router/MainRoutes.ts
+++ b/dashboard/src/router/MainRoutes.ts
@@ -1,4 +1,7 @@
-import { EXTENSION_ROUTE_NAME } from './routeConstants.mjs';
+import {
+  EXTENSION_DETAILS_ROUTE_NAME,
+  EXTENSION_ROUTE_NAME
+} from './routeConstants.mjs';
 
 const MainRoutes = {
   path: '/main',
@@ -23,6 +26,11 @@ const MainRoutes = {
       path: '/extension',
       component: () => import('@/views/ExtensionPage.vue')
     },
+    {
+      name: EXTENSION_DETAILS_ROUTE_NAME,
+      path: '/extension/:pluginId',
+      component: () => import('@/views/ExtensionPage.vue')
+    },
     {
       name: 'ExtensionMarketplace',
       path: '/extension-marketplace',
diff --git a/dashboard/src/router/routeConstants.mjs b/dashboard/src/router/routeConstants.mjs
index c5f4f628a3..cabf9026ec 100644
--- a/dashboard/src/router/routeConstants.mjs
+++ b/dashboard/src/router/routeConstants.mjs
@@ -1 +1,2 @@
 export const EXTENSION_ROUTE_NAME = 'Extensions';
+export const EXTENSION_DETAILS_ROUTE_NAME = 'ExtensionDetails';
diff --git a/dashboard/src/views/ExtensionPage.vue b/dashboard/src/views/ExtensionPage.vue
index e379be890f..cffa42e3dd 100644
--- a/dashboard/src/views/ExtensionPage.vue
+++ b/dashboard/src/views/ExtensionPage.vue
@@ -9,7 +9,9 @@ import SkillsSection from "@/components/extension/SkillsSection.vue";
 import ComponentPanel from "@/components/extension/componentPanel/index.vue";
 import InstalledPluginsTab from "./extension/InstalledPluginsTab.vue";
 import MarketPluginsTab from "./extension/MarketPluginsTab.vue";
+import PluginDetailPage from "./extension/PluginDetailPage.vue";
 import { useExtensionPage } from "./extension/useExtensionPage";
+import { computed } from "vue";
 
 const pageState = useExtensionPage();
 
@@ -150,10 +152,63 @@ const {
   handleLocaleChange,
   searchDebounceTimer,
 } = pageState;
+
+const selectedPluginId = computed(() => {
+  const pluginId = route.params.pluginId;
+  return Array.isArray(pluginId) ? pluginId[0] : pluginId || "";
+});
+
+const selectedInstalledPlugin = computed(() => {
+  if (!selectedPluginId.value) return null;
+  const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
+  return data.find((plugin) => plugin.name === selectedPluginId.value) || null;
+});
+
+const selectedMarketPlugin = computed(() => {
+  const plugin = selectedInstalledPlugin.value;
+  if (!plugin) return null;
+  const market = Array.isArray(pluginMarketData.value) ? pluginMarketData.value : [];
+  const repo = plugin.repo?.toLowerCase();
+  return (
+    market.find((item) => repo && item.repo?.toLowerCase() === repo) ||
+    market.find((item) => item.name === plugin.name) ||
+    null
+  );
+});
 </script>
 
 <template>
-  <v-row class="extension-page">
+  <PluginDetailPage
+    v-if="selectedPluginId && selectedInstalledPlugin"
+    :plugin="selectedInstalledPlugin"
+    :market-plugin="selectedMarketPlugin"
+    :state="pageState"
+  />
+
+  <div v-else-if="selectedPluginId && loading_" class="pa-4">
+    <v-progress-linear indeterminate color="primary" />
+  </div>
+
+  <div v-else-if="selectedPluginId" class="pa-4">
+    <div class="d-flex align-center mb-6">
+      <v-btn
+        icon="mdi-arrow-left"
+        variant="text"
+        density="comfortable"
+        @click="router.push({ name: 'Extensions', hash: '#installed' })"
+      />
+      <h2 class="text-h3 mb-0 ml-2">
+        {{ tm("titles.installedAstrBotPlugins") }}
+        <v-icon icon="mdi-chevron-right" size="24" class="mx-1" />
+        {{ selectedPluginId }}
+      </h2>
+    </div>
+    <v-alert type="warning" variant="tonal">
+      {{ tm("detail.notFound") }}
+    </v-alert>
+  </div>
+
+  <v-row v-else class="extension-page">
     <v-col cols="12" md="12">
       <v-card variant="flat" style="background-color: transparent">
         <!-- 标签页 -->
diff --git a/dashboard/src/views/extension/InstalledPluginsTab.vue b/dashboard/src/views/extension/InstalledPluginsTab.vue
index 97b3a56a92..41fe79382e 100644
--- a/dashboard/src/views/extension/InstalledPluginsTab.vue
+++ b/dashboard/src/views/extension/InstalledPluginsTab.vue
@@ -1,11 +1,6 @@
 <script setup>
-import PluginSortControl from "@/components/extension/PluginSortControl.vue";
-import PinnedPluginItem from "@/components/extension/PinnedPluginItem.vue";
 import ExtensionCard from "@/components/shared/ExtensionCard.vue";
-import StyledMenu from "@/components/shared/StyledMenu.vue";
-import defaultPluginIcon from "@/assets/images/plugin_icon.png";
 import { normalizeTextInput } from "@/utils/inputValue";
-import { ref, computed, watch } from "vue";
 
 const props = defineProps({
   state: {
@@ -31,9 +26,6 @@ const {
   getLocationHash,
   extractTabFromHash,
   syncTabFromHash,
-  extension_data,
-  getInitialShowReserved,
-  showReserved,
   snack_message,
   snack_show,
   snack_success,
@@ -49,14 +41,7 @@ const {
   forceUpdateDialog,
   updateAllConfirmDialog,
   changelogDialog,
-  getInitialListViewMode,
-  isListView,
   pluginSearch,
-  installedStatusFilter,
-  installedSortBy,
-  installedSortOrder,
-  pinUpdatesOnTop,
-  loading_,
   currentPage,
   dangerConfirmDialog,
   selectedDangerPlugin,
@@ -90,9 +75,6 @@ const {
   toPinyinText,
   toInitials,
   plugin_handler_info_headers,
-  installedSortItems,
-  installedSortUsesOrder,
-  pluginHeaders,
   filteredExtensions,
   filteredPlugins,
   filteredMarketPlugins,
@@ -105,7 +87,6 @@ const {
   totalPages,
   paginatedPlugins,
   updatableExtensions,
-  toggleShowReserved,
   toast,
   resetLoadingDialog,
   onLoadingDialogResult,
@@ -159,107 +140,14 @@ const {
   searchDebounceTimer,
 } = props.state;
 
-// 置顶插件（保存在 localStorage）
-const PINNED_KEY = "astrbot.pinnedExtensions";
-const pinnedNames = ref([]);
-
-const loadPinned = () => {
-  try {
-    const raw = localStorage.getItem(PINNED_KEY);
-    pinnedNames.value = raw ? JSON.parse(raw) : [];
-  } catch (e) {
-    pinnedNames.value = [];
-  }
-};
-
-const savePinned = () => {
-  try {
-    localStorage.setItem(PINNED_KEY, JSON.stringify(pinnedNames.value || []));
-  } catch (e) {
-    // ignore
-  }
-};
-
-loadPinned();
-
-watch(pinnedNames, () => savePinned(), { deep: true });
-
-const isPinned = (name) => {
-  return pinnedNames.value.includes(name);
-};
-
-const togglePin = (extension) => {
-  const name = extension?.name;
-  if (!name) return;
-  const idx = pinnedNames.value.indexOf(name);
-  if (idx === -1) pinnedNames.value.push(name);
-  else pinnedNames.value.splice(idx, 1);
-};
-
-const handlePinnedImgError = (e) => {
-  e.target.src = defaultPluginIcon;
-};
-
-// --- 拖拽功能实现 ---
-const draggedIndex = ref(-1);
-let lastSwapTime = 0;
-
-const onDragStart = (index) => {
-  draggedIndex.value = index;
-};
-
-const onDragOver = (e) => {
-  e.preventDefault(); // 必须调用，否则不会触发 drop
-};
-
-const onDragEnter = (e, index) => {
-  e.preventDefault();
-  
-  const now = Date.now();
-  if (now - lastSwapTime < 100) return; // 100ms 冷却，防止快速抖动
-
-  if (draggedIndex.value === -1 || draggedIndex.value === index) {
-    return;
-  }
-
-  const newList = [...pinnedNames.value];
-  const item = newList.splice(draggedIndex.value, 1)[0];
-  newList.splice(index, 0, item);
-  
-  pinnedNames.value = newList;
-  draggedIndex.value = index; 
-  lastSwapTime = now;
-};
-
-const onDrop = () => {
-  draggedIndex.value = -1;
+const openPluginDetail = (extension) => {
+  if (!extension?.name) return;
+  router.push({
+    name: "ExtensionDetails",
+    params: { pluginId: extension.name },
+    hash: "#installed",
+  });
 };
-
-const onDragEnd = () => {
-  draggedIndex.value = -1;
-};
-// ----------------
-
-// 映射 name -> plugin 对象（优先从 sortedPlugins 找）
-const pinnedPlugins = computed(() => {
-  if (!Array.isArray(pinnedNames.value)) return [];
-
-  const installedAll = Array.isArray(extension_data?.data) ? extension_data.data : [];
-  const all = Array.isArray(sortedPlugins?.value) ? sortedPlugins.value : [];
-  const filtered = Array.isArray(filteredPlugins?.value) ? filteredPlugins.value : [];
-  const market = Array.isArray(pluginMarketData?.value) ? pluginMarketData.value : [];
-
-  const findByName = (name) => {
-    return (
-      installedAll.find((p) => p.name === name) ||
-      all.find((p) => p.name === name) ||
-      filtered.find((p) => p.name === name) ||
-      market.find((p) => p.name === name)
-    );
-  };
-
-  return pinnedNames.value.map((name) => findByName(name)).filter(Boolean);
-});
 </script>
 
 <template>
@@ -284,134 +172,10 @@ const pinnedPlugins = computed(() => {
                   >
                   </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">
-                <div class="installed-toolbar">
-                  <div class="installed-toolbar__actions">
-                    <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
-                      color="warning"
-                      variant="tonal"
-                      :disabled="updatableExtensions.length === 0"
-                      :loading="updatingAll"
-                      @click="showUpdateAllConfirm"
-                    >
-                      <v-icon>mdi-update</v-icon>
-                      {{ tm("buttons.updateAll") }}
-                    </v-btn>
-                  </div>
-
-                  <div class="installed-toolbar__controls">
-                    <v-btn-toggle
-                      v-model="installedStatusFilter"
-                      mandatory
-                      divided
-                      density="compact"
-                      color="primary"
-                      class="installed-status-toggle"
-                    >
-                      <v-btn value="all" prepend-icon="mdi-filter-variant">
-                        {{ tm("filters.all") }}
-                      </v-btn>
-                      <v-btn value="enabled" prepend-icon="mdi-play-circle-outline">
-                        {{ tm("status.enabled") }}
-                      </v-btn>
-                      <v-btn value="disabled" prepend-icon="mdi-pause-circle-outline">
-                        {{ tm("status.disabled") }}
-                      </v-btn>
-                    </v-btn-toggle>
-
-                    <PluginSortControl
-                      v-model="installedSortBy"
-                      :items="installedSortItems"
-                      :label="tm('sort.by')"
-                      :order="installedSortOrder"
-                      :ascending-label="tm('sort.ascending')"
-                      :descending-label="tm('sort.descending')"
-                      :show-order="installedSortUsesOrder"
-                      @update:order="installedSortOrder = $event"
-                    />
-                    <v-switch
-                      v-model="pinUpdatesOnTop"
-                      :label="tm('sort.pinUpdatesOnTop')"
-                      color="primary"
-                      density="compact"
-                      hide-details
-                      class="ml-4"
-                      style="max-width: 200px"
-                    />
-                  </div>
-                </div>
-              </v-col>
-            </v-row>
-
-            <!-- 置顶插件列表 -->
-            <v-row v-if="pinnedPlugins.length > 0" class="mb-4">
-              <v-col cols="12">
-                <v-card class="rounded-lg overflow-hidden elevation-0" variant="flat">
-                  <v-card-text class="pa-4">
-                    <div class="d-flex align-center justify-space-between">
-                      <h3 class="text-h6 mb-0">{{ tm('titles.pinnedPlugins') }}</h3>
-                    </div>
-
-                    <v-row class="mt-3 relative" dense align="center" style="gap:12px">
-                      <transition-group name="list" class="v-row v-row--dense">
-                        <v-col
-                          cols="auto"
-                          v-for="(p, index) in pinnedPlugins"
-                          :key="p.name"
-                        >
-                          <PinnedPluginItem
-                            :plugin="p"
-                            :is-pinned="isPinned(p.name)"
-                            :tm="tm"
-                            :dragged="draggedIndex === index"
-                            @toggle-pin="togglePin"
-                            @view-readme="viewReadme"
-                            @open-config="openExtensionConfig"
-                            @reload="reloadPlugin"
-                            @update="updateExtension"
-                            @show-info="showPluginInfo"
-                            @uninstall="uninstallExtension"
-                            @dragstart="onDragStart(index)"
-                            @dragover="onDragOver($event)"
-                            @dragenter="onDragEnter($event, index)"
-                            @dragend="onDragEnd($event)"
-                            @drop="onDrop($event)"
-                          />
-                        </v-col>
-                      </transition-group>
-                    </v-row>
-                  </v-card-text>
-                </v-card>
-              </v-col>
-            </v-row>
-
-            
             <v-card
               v-if="failedPluginItems.length > 0"
               class="mb-4 rounded-lg"
@@ -487,265 +251,7 @@ const pinnedPlugins = computed(() => {
             </v-card>
 
             <v-fade-transition hide-on-leave>
-              <!-- 表格视图 -->
-              <div v-if="isListView">
-                <v-card class="rounded-lg overflow-hidden elevation-0">
-                  <v-data-table
-                    class="plugin-list-table"
-                    :headers="pluginHeaders"
-                    :items="filteredPlugins"
-                    :loading="loading_"
-                    item-key="name"
-                    hover
-                  >
-                    <template v-slot:item.name="{ item }">
-                      <div class="d-flex">
-                        <div class="mr-3" style="flex-shrink: 0">
-                          <img
-                            :src="(typeof item.logo === 'string' && item.logo.trim()) ? item.logo : 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-tooltip v-if="item.has_update" location="top">
-                          <template v-slot:activator="{ props: tooltipProps }">
-                            <v-icon
-                              v-bind="tooltipProps"
-                              color="warning"
-                              size="small"
-                              class="ml-1"
-                              style="cursor: pointer"
-                              @click.stop="updateExtension(item.name)"
-                              >mdi-alert</v-icon
-                            >
-                          </template>
-                          <span
-                            >{{ tm("messages.hasUpdate") }}
-                            {{ item.online_version }}</span
-                          >
-                        </v-tooltip>
-                        <v-tooltip v-if="item.has_update" location="top">
-                          <template v-slot:activator="{ props: tooltipProps }">
-                            <span
-                              v-bind="tooltipProps"
-                              class="ml-1 text-caption text-warning"
-                              style="cursor: pointer"
-                              @click.stop="updateExtension(item.name)"
-                            >
-                              {{ item.online_version }}
-                            </span>
-                          </template>
-                          <span>{{ tm("buttons.update") }}</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 justify-start ga-2 py-1">
-                        <v-btn
-                          icon
-                          size="small"
-                          variant="tonal"
-                          color="secondary"
-                          class="table-action-btn pin-action"
-                          @click.stop="togglePin(item)"
-                          :title="isPinned(item.name) ? tm('buttons.unpin') : tm('buttons.pin')"
-                        >
-                          <v-icon size="18">{{ isPinned(item.name) ? 'mdi-pin' : 'mdi-pin-outline' }}</v-icon>
-                        </v-btn>
-
-                        <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>
+              <div>
                 <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"
@@ -761,18 +267,15 @@ const pinnedPlugins = computed(() => {
                 <v-row>
                     <v-col
                       cols="12"
-                      md="6"
-                      lg="4"
                       v-for="extension in filteredPlugins"
                       :key="extension.name"
                       class="pb-2"
                     >
                       <ExtensionCard
                         :extension="extension"
-                        :pinned="isPinned(extension.name)"
-                        @toggle-pin="() => togglePin(extension)"
                         class="rounded-lg"
                         style="background-color: rgb(var(--v-theme-mcpCardBg))"
+                        @click="openPluginDetail(extension)"
                         @configure="openExtensionConfig(extension.name)"
                       @uninstall="
                         (ext, options) => uninstallExtension(ext.name, options)
@@ -821,74 +324,25 @@ const pinnedPlugins = computed(() => {
                 </button>
               </template>
             </v-tooltip>
+
+            <v-tooltip :text="tm('buttons.updateAll')" location="left">
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  v-bind="props"
+                  color="darkprimary"
+                  icon="mdi-update"
+                  size="x-large"
+                  variant="elevated"
+                  class="update-all-fab"
+                  :loading="updatingAll"
+                  @click="showUpdateAllConfirm"
+                />
+              </template>
+            </v-tooltip>
           </v-tab-item>
 </template>
 
 <style scoped>
-.installed-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.installed-toolbar__actions,
-.installed-toolbar__controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.installed-toolbar__controls {
-  margin-left: auto;
-  justify-content: flex-end;
-}
-
-.installed-status-toggle :deep(.v-btn) {
-  min-height: 34px;
-  text-transform: none;
-}
-
-.view-mode-toggle :deep(.v-btn) {
-  min-width: 30px;
-  height: 28px;
-  padding: 0 8px;
-}
-
-.table-action-btn {
-  min-height: 32px;
-  font-size: 0.86rem;
-  font-weight: 600;
-}
-
-.table-action-row {
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-}
-
-.plugin-list-table :deep(td) {
-  vertical-align: top;
-}
-
-@media (max-width: 1400px) {
-  .table-action-btn {
-    min-width: 0;
-    padding: 0 8px;
-  }
-}
-
-@media (max-width: 960px) {
-  .installed-toolbar__controls {
-    margin-left: 0;
-    width: 100%;
-    justify-content: flex-start;
-  }
-}
-
 .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);
@@ -899,93 +353,18 @@ const pinnedPlugins = computed(() => {
   box-shadow: 0 12px 20px rgba(var(--v-theme-primary), 0.4);
 }
 
-.pinned-plugins h3 {
-  font-weight: 600;
-}
-
-.pinned-list {
-  gap: 12px;
-}
-
-.pinned-item {
-  flex: 1 1 180px;
-  max-width: 320px;
-  height: 76px;
-  border-radius: 10px;
-  background: rgba(0, 0, 0, 0.04);
-  box-shadow: 0 1px 4px rgba(16,24,40,0.04);
-}
-
-.pinned-avatar {
-  display: inline-flex;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  cursor: pointer;
-  border-radius: 12px;
-}
-
-.pinned-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.pinned-card-wrapper {
-  position: relative;
-  display: inline-block;
-  width: 72px;
-  height: 72px;
-}
-
-.pin-btn {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  z-index: 5;
-}
-
-.pinned-item-skeleton {
-  width: 72px;
-  height: 72px;
-  border-radius: 10px;
-}
-
-.pinned-item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.2s ease, opacity 0.2s ease;
-}
-
-.is-dragging {
-  opacity: 0.5;
-  transform: scale(0.95);
-  cursor: grabbing;
-}
-
-[draggable="true"] {
-  cursor: grab;
-}
-
-[draggable="true"]:active {
-  cursor: grabbing;
-}
-
-.list-move,
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.3s ease;
-}
-
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: scale(0.6);
+.update-all-fab {
+  position: fixed;
+  right: 52px;
+  bottom: 124px;
+  z-index: 10000;
+  border-radius: 16px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.list-leave-active {
-  position: absolute;
+.update-all-fab: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/PluginDetailPage.vue b/dashboard/src/views/extension/PluginDetailPage.vue
new file mode 100644
index 0000000000..d6104015e0
--- /dev/null
+++ b/dashboard/src/views/extension/PluginDetailPage.vue
@@ -0,0 +1,954 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import axios from "axios";
+import DOMPurify from "dompurify";
+import MarkdownIt from "markdown-it";
+import defaultPluginIcon from "@/assets/images/plugin_icon.png";
+
+const props = defineProps({
+  plugin: {
+    type: Object,
+    required: true,
+  },
+  marketPlugin: {
+    type: Object,
+    default: null,
+  },
+  state: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { tm, router } = props.state;
+
+const markdown = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+  breaks: false,
+});
+
+markdown.enable(["table", "strikethrough"]);
+
+const MARKDOWN_SANITIZE_OPTIONS = {
+  ALLOWED_TAGS: [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "p",
+    "br",
+    "hr",
+    "ul",
+    "ol",
+    "li",
+    "blockquote",
+    "pre",
+    "code",
+    "a",
+    "img",
+    "table",
+    "thead",
+    "tbody",
+    "tr",
+    "th",
+    "td",
+    "strong",
+    "em",
+    "del",
+    "s",
+    "div",
+    "span",
+  ],
+  ALLOWED_ATTR: ["href", "src", "alt", "title", "target", "rel", "align"],
+};
+
+const readmeLoading = ref(false);
+const readmeError = ref("");
+const readmeEmpty = ref(false);
+const renderedReadme = ref("");
+const expandedCommandGroups = ref(new Set());
+const logoLoadFailed = ref(false);
+const detailPageRef = ref(null);
+const isHeaderStuck = ref(false);
+
+const displayName = computed(() =>
+  props.plugin.display_name?.length ? props.plugin.display_name : props.plugin.name,
+);
+
+const pluginDesc = computed(() => {
+  const desc =
+    props.plugin.desc ||
+    props.plugin.description ||
+    props.marketPlugin?.desc ||
+    props.marketPlugin?.description ||
+    "";
+  return String(desc || "").trim();
+});
+
+const logoSrc = computed(() => {
+  const logo = props.plugin?.logo || props.marketPlugin?.logo || "";
+  if (logoLoadFailed.value) {
+    return defaultPluginIcon;
+  }
+  return typeof logo === "string" && logo.trim().length ? logo : defaultPluginIcon;
+});
+
+const authorDisplay = computed(() => {
+  const plugin = props.plugin || {};
+  const marketPlugin = props.marketPlugin || {};
+  const author =
+    plugin.author ||
+    marketPlugin.author ||
+    plugin.author_name ||
+    marketPlugin.author_name ||
+    plugin.owner ||
+    marketPlugin.owner;
+
+  if (Array.isArray(author)) {
+    return author.join(", ");
+  }
+  if (author && typeof author === "object") {
+    return author.name || "";
+  }
+  return typeof author === "string" ? author.trim() : "";
+});
+
+const categoryDisplay = computed(() => {
+  const rawCategory = props.plugin.category || props.marketPlugin?.category || "";
+  const category = String(rawCategory || "").trim();
+  if (!category) return "";
+
+  const normalized = category.toLowerCase().replace(/\s+/g, "_");
+  const label = tm(`market.categories.${normalized}`);
+  return label === `market.categories.${normalized}` ? category : label;
+});
+
+const authorWebsite = computed(() => {
+  const plugin = props.plugin || {};
+  const marketPlugin = props.marketPlugin || {};
+  return (
+    plugin.social_link ||
+    marketPlugin.social_link ||
+    plugin.author_url ||
+    marketPlugin.author_url ||
+    plugin.homepage ||
+    marketPlugin.homepage ||
+    ""
+  );
+});
+
+const repoUrl = computed(() => props.plugin.repo || props.marketPlugin?.repo || "");
+
+const infoRows = computed(() => {
+  const rows = [
+    { label: tm("detail.info.author"), value: authorDisplay.value },
+    { label: tm("detail.info.category"), value: categoryDisplay.value, optional: true },
+    {
+      label: tm("detail.info.authorWebsite"),
+      value: authorWebsite.value,
+      href: authorWebsite.value,
+      optional: true,
+    },
+    {
+      label: tm("detail.info.repository"),
+      value: repoUrl.value,
+      href: repoUrl.value,
+      optional: true,
+    },
+  ];
+
+  return rows.filter((row) => !row.optional || row.value);
+});
+
+const handlers = computed(() =>
+  Array.isArray(props.plugin.handlers) ? props.plugin.handlers : [],
+);
+
+const handlerGroupOrder = [
+  "commands",
+  "hooks",
+  "functionTools",
+  "eventListeners",
+];
+
+const handlerGroupIcons = {
+  commands: "mdi-console-line",
+  hooks: "mdi-hook",
+  functionTools: "mdi-tools",
+  eventListeners: "mdi-broadcast",
+};
+
+const getHandlerGroupKey = (handler) => {
+  const type = String(handler?.type || "").trim();
+  const eventType = String(handler?.event_type || "").trim();
+  const eventTypeH = String(handler?.event_type_h || "").trim();
+
+  if (["指令", "指令组", "正则匹配"].includes(type)) {
+    return "commands";
+  }
+  if (eventType === "OnCallingFuncToolEvent" || eventTypeH === "函数工具") {
+    return "functionTools";
+  }
+  if (type === "事件监听器") {
+    return "eventListeners";
+  }
+  return "hooks";
+};
+
+const groupedHandlerSections = computed(() => {
+  const groups = new Map(handlerGroupOrder.map((key) => [key, []]));
+
+  handlers.value.forEach((handler) => {
+    groups.get(getHandlerGroupKey(handler))?.push(handler);
+  });
+
+  return handlerGroupOrder
+    .map((key) => ({
+      key,
+      title: tm(`detail.handlerGroups.${key}`),
+      icon: handlerGroupIcons[key],
+      handlers: groups.get(key) || [],
+    }))
+    .filter((group) => group.handlers.length > 0);
+});
+
+const getHandlerCommand = (handler) =>
+  String(handler?.cmd || handler?.handler_name || tm("status.unknown")).trim();
+
+const getHandlerDisplayName = (handler, groupKey) => {
+  if (["functionTools", "eventListeners"].includes(groupKey)) {
+    return handler?.handler_name || handler?.cmd || tm("status.unknown");
+  }
+  return handler?.cmd || handler?.handler_name || tm("status.unknown");
+};
+
+const getHandlerTiming = (handler) =>
+  String(handler?.event_type_h || handler?.event_type || "").trim();
+
+const splitCommandPrefix = (handler) => {
+  const command = getHandlerCommand(handler);
+  const parts = command.split(/\s+/).filter(Boolean);
+  if (parts.length <= 1) {
+    return { prefix: command, childCommand: command };
+  }
+  return {
+    prefix: parts[0],
+    childCommand: parts.slice(1).join(" "),
+  };
+};
+
+const isCommandGroupExpanded = (key) => expandedCommandGroups.value.has(key);
+
+const toggleCommandGroup = (key) => {
+  const next = new Set(expandedCommandGroups.value);
+  if (next.has(key)) {
+    next.delete(key);
+  } else {
+    next.add(key);
+  }
+  expandedCommandGroups.value = next;
+};
+
+const buildCommandHandlerRows = (commandHandlers) => {
+  const buckets = new Map();
+
+  commandHandlers.forEach((handler, index) => {
+    const { prefix, childCommand } = splitCommandPrefix(handler);
+    const key = prefix || getHandlerCommand(handler);
+    if (!buckets.has(key)) {
+      buckets.set(key, {
+        key,
+        prefix,
+        firstIndex: index,
+        handlers: [],
+      });
+    }
+    buckets.get(key).handlers.push({
+      handler,
+      childCommand,
+      originalIndex: index,
+    });
+  });
+
+  return Array.from(buckets.values())
+    .sort((left, right) => left.firstIndex - right.firstIndex)
+    .flatMap((bucket) => {
+      if (bucket.handlers.length <= 1) {
+        const only = bucket.handlers[0];
+        return [
+          {
+            kind: "handler",
+            key: only.handler.handler_full_name || only.handler.handler_name || only.handler.cmd,
+            handler: only.handler,
+            displayCommand: getHandlerCommand(only.handler),
+          },
+        ];
+      }
+
+      const groupRow = {
+        kind: "group",
+        key: bucket.key,
+        displayCommand: bucket.prefix,
+        children: bucket.handlers,
+      };
+
+      if (!isCommandGroupExpanded(bucket.key)) {
+        return [groupRow];
+      }
+
+      return [
+        groupRow,
+        ...bucket.handlers.map(({ handler, childCommand }) => ({
+          kind: "subCommand",
+          key: handler.handler_full_name || handler.handler_name || handler.cmd,
+          handler,
+          displayCommand: childCommand,
+        })),
+      ];
+    });
+};
+
+const openExternal = (url) => {
+  if (!url) return;
+  window.open(url, "_blank", "noopener,noreferrer");
+};
+
+const goBack = () => {
+  router.push({ name: "Extensions", hash: "#installed" });
+};
+
+const renderMarkdown = (source) => {
+  const normalizedSource = String(source || "")
+    .replace(/[“”]/g, '"')
+    .replace(/[‘’]/g, "'");
+  const rawHtml = markdown.render(normalizedSource);
+  const cleanHtml = DOMPurify.sanitize(rawHtml, MARKDOWN_SANITIZE_OPTIONS);
+  const container = document.createElement("div");
+  container.innerHTML = cleanHtml;
+
+  container.querySelectorAll("a").forEach((link) => {
+    const href = link.getAttribute("href") || "";
+    if (href.startsWith("http") || href.startsWith("//")) {
+      link.setAttribute("target", "_blank");
+      link.setAttribute("rel", "noopener noreferrer");
+    }
+  });
+
+  return container.innerHTML;
+};
+
+const updateHeaderStuckState = () => {
+  const scrollTop =
+    document.scrollingElement?.scrollTop ||
+    document.documentElement.scrollTop ||
+    window.scrollY ||
+    0;
+  isHeaderStuck.value = scrollTop > 0;
+};
+
+const fetchReadme = async () => {
+  if (!props.plugin?.name) return;
+
+  readmeLoading.value = true;
+  readmeError.value = "";
+  readmeEmpty.value = false;
+  renderedReadme.value = "";
+
+  try {
+    const res = await axios.get("/api/plugin/readme", {
+      params: { name: props.plugin.name },
+    });
+
+    if (res.data.status !== "ok") {
+      readmeError.value = res.data.message || tm("messages.operationFailed");
+      return;
+    }
+
+    const content = res.data.data?.content || "";
+    if (!content) {
+      readmeEmpty.value = true;
+      return;
+    }
+
+    renderedReadme.value = renderMarkdown(content);
+  } catch (err) {
+    readmeError.value = err?.message || String(err);
+  } finally {
+    readmeLoading.value = false;
+  }
+};
+
+watch(
+  () => props.plugin?.name,
+  () => {
+    logoLoadFailed.value = false;
+    fetchReadme();
+  },
+  { immediate: true },
+);
+
+onMounted(() => {
+  updateHeaderStuckState();
+  window.addEventListener("scroll", updateHeaderStuckState, { passive: true });
+  document.addEventListener("scroll", updateHeaderStuckState, {
+    capture: true,
+    passive: true,
+  });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", updateHeaderStuckState);
+  document.removeEventListener("scroll", updateHeaderStuckState, {
+    capture: true,
+  });
+});
+</script>
+
+<template>
+  <div ref="detailPageRef" class="plugin-detail-page">
+    <div
+      class="detail-header"
+      :class="{ 'detail-header--stuck': isHeaderStuck }"
+    >
+      <h2 class="detail-title">
+        <button class="detail-title__parent" type="button" @click="goBack">
+          {{ tm("titles.installedAstrBotPlugins") }}
+        </button>
+        <v-icon icon="mdi-chevron-right" size="24" class="mx-1" />
+        <span class="detail-title__current">{{ displayName }}</span>
+      </h2>
+    </div>
+
+    <v-card class="plugin-summary-card rounded-lg" variant="outlined">
+      <v-card-text class="plugin-summary-card__body">
+        <img
+          :src="logoSrc"
+          :alt="displayName"
+          class="plugin-summary-card__icon"
+          @error="logoLoadFailed = true"
+        />
+        <h1 class="plugin-summary-card__title">{{ displayName }}</h1>
+        <p v-if="pluginDesc" class="plugin-summary-card__desc">
+          {{ pluginDesc }}
+        </p>
+      </v-card-text>
+    </v-card>
+
+    <section class="detail-section">
+      <h3 class="detail-section__title">{{ tm("detail.contents") }}</h3>
+      <div v-if="groupedHandlerSections.length" class="handler-groups">
+        <div
+          v-for="group in groupedHandlerSections"
+          :key="group.key"
+          class="handler-group"
+        >
+          <div class="handler-group__title">
+            <v-icon :icon="group.icon" size="20" />
+            {{ group.title }}
+            <span class="handler-group__count">{{ group.handlers.length }}</span>
+          </div>
+          <v-card class="rounded-lg handler-card" variant="outlined">
+            <v-table
+              v-if="group.key === 'commands'"
+              class="detail-info-table detail-handler-table"
+            >
+              <tbody>
+                <tr
+                  v-for="item in buildCommandHandlerRows(group.handlers)"
+                  :key="item.key"
+                  :class="{
+                    'command-row--group': item.kind === 'group',
+                    'command-row--sub': item.kind === 'subCommand',
+                  }"
+                >
+                  <td class="detail-info-table__label detail-handler-table__name">
+                    <div class="command-cell">
+                      <v-btn
+                        v-if="item.kind === 'group'"
+                        icon
+                        variant="text"
+                        size="x-small"
+                        class="command-cell__toggle"
+                        @click="toggleCommandGroup(item.key)"
+                      >
+                        <v-icon size="18">
+                          {{
+                            isCommandGroupExpanded(item.key)
+                              ? "mdi-chevron-down"
+                              : "mdi-chevron-right"
+                          }}
+                        </v-icon>
+                      </v-btn>
+                      <span
+                        v-else-if="item.kind === 'subCommand'"
+                        class="command-cell__indent"
+                      ></span>
+                      <code
+                        :class="{
+                          'command-code--group': item.kind === 'group',
+                          'command-code--sub': item.kind === 'subCommand',
+                        }"
+                      >
+                        {{ item.displayCommand }}
+                      </code>
+                    </div>
+                  </td>
+                  <td>
+                    <div class="handler-row__desc">
+                      <template v-if="item.kind === 'group'">
+                        {{ tm("detail.subCommandsCount", { count: item.children.length }) }}
+                      </template>
+                      <template v-else>
+                        {{ item.handler.desc || tm("status.unknown") }}
+                      </template>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </v-table>
+
+            <v-table v-else class="detail-info-table detail-handler-table">
+              <tbody>
+                <tr
+                  v-for="handler in group.handlers"
+                  :key="handler.handler_full_name || handler.handler_name || handler.cmd"
+                >
+                  <td class="detail-info-table__label detail-handler-table__name">
+                    <div>
+                      {{ getHandlerDisplayName(handler, group.key) }}
+                    </div>
+                  </td>
+                  <td>
+                    <div class="handler-row__desc">
+                      <span
+                        v-if="group.key === 'hooks' && getHandlerTiming(handler)"
+                        class="handler-row__timing"
+                      >
+                        {{ getHandlerTiming(handler) }}
+                      </span>
+                      <span>{{ handler.desc || tm("status.unknown") }}</span>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </v-table>
+          </v-card>
+        </div>
+      </div>
+      <v-card v-else class="rounded-lg handler-card" variant="outlined">
+        <v-card-text class="pa-4 text-medium-emphasis">
+          {{ tm("detail.noContents") }}
+        </v-card-text>
+      </v-card>
+    </section>
+
+    <section class="detail-section">
+      <h3 class="detail-section__title">{{ tm("detail.info.title") }}</h3>
+      <v-card class="rounded-lg" variant="outlined">
+        <v-table class="detail-info-table">
+          <tbody>
+            <tr v-for="row in infoRows" :key="row.label">
+              <td class="detail-info-table__label">{{ row.label }}</td>
+              <td>
+                <v-btn
+                  v-if="row.action"
+                  color="primary"
+                  variant="text"
+                  density="comfortable"
+                  prepend-icon="mdi-book-open-page-variant"
+                  @click="row.action"
+                >
+                  {{ row.actionText }}
+                </v-btn>
+                <button
+                  v-else-if="row.href"
+                  class="detail-link"
+                  type="button"
+                  @click="openExternal(row.href)"
+                >
+                  <span>{{ row.value }}</span>
+                  <v-icon icon="mdi-open-in-new" size="16" />
+                </button>
+                <span v-else>{{ row.value || tm("status.unknown") }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </v-table>
+      </v-card>
+    </section>
+
+    <section class="detail-section">
+      <h3 class="detail-section__title">{{ tm("detail.docsTitle") }}</h3>
+      <v-card class="rounded-lg docs-card" variant="outlined">
+        <v-card-text>
+          <div v-if="readmeLoading" class="docs-state">
+            <v-progress-circular indeterminate color="primary" />
+          </div>
+          <v-alert v-else-if="readmeError" type="error" variant="tonal">
+            {{ readmeError }}
+          </v-alert>
+          <div v-else-if="readmeEmpty" class="text-medium-emphasis">
+            {{ tm("detail.docsEmpty") }}
+          </div>
+          <div
+            v-else
+            class="docs-markdown"
+            v-html="renderedReadme"
+          ></div>
+        </v-card-text>
+      </v-card>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.plugin-detail-page {
+  margin: 0 auto;
+  max-width: 1040px;
+  padding: 16px 24px 32px;
+  width: 100%;
+}
+
+.detail-header {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  isolation: isolate;
+  margin-bottom: 28px;
+  padding: 10px 0;
+  position: sticky;
+  top: calc(var(--v-layout-top, 64px));
+  z-index: 20;
+}
+
+.detail-header--stuck::before {
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
+  content: "";
+  inset: 0 calc(50% - 50vw);
+  position: absolute;
+  z-index: -1;
+}
+
+.detail-title {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 1.5rem;
+  font-weight: 700;
+  gap: 2px;
+  letter-spacing: 0;
+  margin: 0;
+  min-width: 0;
+}
+
+.detail-title__parent {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+
+.detail-title__parent:hover {
+  color: rgb(var(--v-theme-primary));
+}
+
+.detail-title__current {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.plugin-summary-card {
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), 0.9);
+}
+
+.plugin-summary-card__body {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 24px;
+}
+
+.plugin-summary-card__icon {
+  border-radius: 16px;
+  height: 72px;
+  object-fit: cover;
+  width: 72px;
+}
+
+.plugin-summary-card__title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.25;
+  margin: 0;
+}
+
+.plugin-summary-card__desc {
+  color: rgba(var(--v-theme-on-surface), 0.62);
+  font-size: 0.9rem;
+  line-height: 1.6;
+  margin: 0;
+  max-width: 760px;
+}
+
+.detail-section {
+  margin-top: 28px;
+}
+
+.detail-section__title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 0 0 12px;
+}
+
+.handler-row__desc {
+  align-items: baseline;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.handler-row__timing {
+  color: rgba(var(--v-theme-on-surface), 0.54);
+  flex-shrink: 0;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.handler-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.handler-group__title {
+  align-items: center;
+  display: flex;
+  font-size: 0.95rem;
+  font-weight: 700;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.handler-group__count {
+  color: rgba(var(--v-theme-on-surface), 0.48);
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.handler-card,
+.handler-card :deep(.v-table),
+.handler-card :deep(tbody),
+.handler-card :deep(tr),
+.handler-card :deep(td) {
+  background: rgb(var(--v-theme-surface));
+}
+
+.detail-info-table__label {
+  color: rgba(var(--v-theme-on-surface), 0.62);
+  font-weight: 600;
+  width: 200px;
+}
+
+.detail-handler-table :deep(table) {
+  table-layout: fixed;
+}
+
+.detail-handler-table__name {
+  width: 220px;
+}
+
+.detail-handler-table__name div {
+  color: rgba(var(--v-theme-on-surface), 0.72);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.command-cell {
+  align-items: center;
+  display: flex;
+  min-width: 0;
+}
+
+.command-cell__toggle {
+  flex-shrink: 0;
+  margin-right: 4px;
+}
+
+.command-cell__indent {
+  flex-shrink: 0;
+  margin-left: 28px;
+}
+
+.command-cell code {
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  border-radius: 4px;
+  font-size: 0.9em;
+  overflow: hidden;
+  padding: 2px 6px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.command-cell code.command-code--group {
+  background-color: rgba(var(--v-theme-info), 0.12);
+}
+
+.command-cell code.command-code--sub {
+  background-color: rgba(var(--v-theme-secondary), 0.1);
+  color: rgb(var(--v-theme-secondary));
+}
+
+.detail-link {
+  align-items: center;
+  color: rgb(var(--v-theme-primary));
+  display: inline-flex;
+  gap: 6px;
+  max-width: 100%;
+}
+
+.detail-link span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.docs-card {
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), 0.9);
+}
+
+.docs-state {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 160px;
+}
+
+.docs-markdown {
+  color: rgba(var(--v-theme-on-surface), 0.9);
+  font-size: 0.95rem;
+  line-height: 1.65;
+}
+
+.docs-markdown :deep(h1),
+.docs-markdown :deep(h2),
+.docs-markdown :deep(h3),
+.docs-markdown :deep(h4),
+.docs-markdown :deep(h5),
+.docs-markdown :deep(h6) {
+  color: rgba(var(--v-theme-on-surface), 0.9);
+  font-weight: 700;
+  line-height: 1.3;
+  margin: 1.4em 0 0.6em;
+}
+
+.docs-markdown :deep(h1:first-child),
+.docs-markdown :deep(h2:first-child),
+.docs-markdown :deep(h3:first-child) {
+  margin-top: 0;
+}
+
+.docs-markdown :deep(p),
+.docs-markdown :deep(ul),
+.docs-markdown :deep(ol),
+.docs-markdown :deep(blockquote),
+.docs-markdown :deep(pre),
+.docs-markdown :deep(table) {
+  margin-bottom: 1em;
+}
+
+.docs-markdown :deep(ul),
+.docs-markdown :deep(ol) {
+  list-style-position: inside;
+  padding-left: 0;
+}
+
+.docs-markdown :deep(li) {
+  margin: 0.25em 0;
+}
+
+.docs-markdown :deep(a) {
+  color: rgb(var(--v-theme-primary));
+  text-decoration: none;
+}
+
+.docs-markdown :deep(a:hover) {
+  text-decoration: underline;
+}
+
+.docs-markdown :deep(pre) {
+  background: rgba(var(--v-theme-on-surface), 0.06);
+  border-radius: 8px;
+  overflow-x: auto;
+  padding: 12px;
+}
+
+.docs-markdown :deep(code) {
+  background: rgba(var(--v-theme-on-surface), 0.06);
+  border-radius: 4px;
+  font-size: 0.9em;
+  padding: 0.15em 0.35em;
+}
+
+.docs-markdown :deep(pre code) {
+  background: transparent;
+  padding: 0;
+}
+
+.docs-markdown :deep(blockquote) {
+  border-left: 4px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  color: rgba(var(--v-theme-on-surface), 0.62);
+  padding-left: 12px;
+}
+
+.docs-markdown :deep(img) {
+  max-width: 100%;
+}
+
+.docs-markdown :deep(table) {
+  border-collapse: collapse;
+  display: block;
+  overflow-x: auto;
+  width: 100%;
+}
+
+.docs-markdown :deep(th),
+.docs-markdown :deep(td) {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  padding: 6px 10px;
+}
+
+.docs-markdown :deep(th) {
+  background: rgba(var(--v-theme-on-surface), 0.06);
+}
+
+@media (max-width: 700px) {
+  .plugin-detail-page {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .detail-info-table__label {
+    width: 120px;
+  }
+
+  .detail-handler-table__name {
+    width: 140px;
+  }
+}
+</style>
diff --git a/dashboard/src/views/extension/extensionPreferenceStorage.mjs b/dashboard/src/views/extension/extensionPreferenceStorage.mjs
deleted file mode 100644
index 31cd90bbef..0000000000
--- a/dashboard/src/views/extension/extensionPreferenceStorage.mjs
+++ /dev/null
@@ -1,84 +0,0 @@
-export const SHOW_RESERVED_PLUGINS_STORAGE_KEY = "showReservedPlugins";
-export const PLUGIN_LIST_VIEW_MODE_STORAGE_KEY = "pluginListViewMode";
-export const PIN_UPDATES_ON_TOP_STORAGE_KEY = "pinUpdatesOnTop";
-
-/**
- * Resolve the storage backend for reading preferences.
- * Pass `null` to explicitly disable storage access in callers/tests.
- */
-const getStorageForRead = (storageOverride) => {
-  if (storageOverride === null) {
-    return null;
-  }
-  if (storageOverride !== undefined) {
-    return typeof storageOverride?.getItem === "function"
-      ? storageOverride
-      : null;
-  }
-  if (typeof window === "undefined") {
-    return null;
-  }
-  try {
-    const localStorage = window.localStorage ?? null;
-    return typeof localStorage?.getItem === "function" ? localStorage : null;
-  } catch {
-    return null;
-  }
-};
-
-/**
- * Resolve the storage backend for writing preferences.
- * Pass `null` to explicitly disable storage access in callers/tests.
- */
-const getStorageForWrite = (storageOverride) => {
-  if (storageOverride === null) {
-    return null;
-  }
-  if (storageOverride !== undefined) {
-    return typeof storageOverride?.setItem === "function"
-      ? storageOverride
-      : null;
-  }
-  if (typeof window === "undefined") {
-    return null;
-  }
-  try {
-    const localStorage = window.localStorage ?? null;
-    return typeof localStorage?.setItem === "function" ? localStorage : null;
-  } catch {
-    return null;
-  }
-};
-
-export const readBooleanPreference = (key, fallback, storage) => {
-  const targetStorage = getStorageForRead(storage);
-  if (!targetStorage) {
-    return fallback;
-  }
-
-  try {
-    const saved = targetStorage.getItem(key);
-    if (saved === "true") {
-      return true;
-    }
-    if (saved === "false") {
-      return false;
-    }
-    return fallback;
-  } catch {
-    return fallback;
-  }
-};
-
-export const writeBooleanPreference = (key, value, storage) => {
-  const targetStorage = getStorageForWrite(storage);
-  if (!targetStorage) {
-    return;
-  }
-
-  try {
-    targetStorage.setItem(key, String(value));
-  } catch {
-    // Ignore restricted storage environments.
-  }
-};
diff --git a/dashboard/src/views/extension/useExtensionPage.js b/dashboard/src/views/extension/useExtensionPage.js
index 3ceecc85bc..f7bcc026e8 100644
--- a/dashboard/src/views/extension/useExtensionPage.js
+++ b/dashboard/src/views/extension/useExtensionPage.js
@@ -14,16 +14,8 @@ import {
   getValidHashTab,
   replaceTabRoute,
 } from "@/utils/hashRouteTabs.mjs";
-import {
-  PIN_UPDATES_ON_TOP_STORAGE_KEY,
-  PLUGIN_LIST_VIEW_MODE_STORAGE_KEY,
-  SHOW_RESERVED_PLUGINS_STORAGE_KEY,
-  readBooleanPreference,
-  writeBooleanPreference,
-} from "./extensionPreferenceStorage.mjs";
 import { ref, computed, onMounted, onUnmounted, reactive, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { useDisplay } from "vuetify";
 
 const useRandomPluginsDisplay = ({ activeTab, marketSearch, currentPage }) => {
   const showRandomPlugins = ref(true);
@@ -78,7 +70,6 @@ export const useExtensionPage = () => {
   const { tm } = useModuleI18n("features/extension");
   const router = useRouter();
   const route = useRoute();
-  const { width } = useDisplay();
   
   const getSelectedGitHubProxy = () => {
     if (typeof window === "undefined" || !window.localStorage) return "";
@@ -129,11 +120,6 @@ export const useExtensionPage = () => {
     message: "",
   });
   
-  // 从 localStorage 恢复显示系统插件的状态，默认为 false（隐藏）
-  const getInitialShowReserved = () => {
-    return readBooleanPreference(SHOW_RESERVED_PLUGINS_STORAGE_KEY, false);
-  };
-  const showReserved = ref(getInitialShowReserved());
   const snack_message = ref("");
   const snack_show = ref(false);
   const snack_success = ref("success");
@@ -178,23 +164,7 @@ export const useExtensionPage = () => {
     repoUrl: null,
   });
   
-  // 新增变量支持列表视图
-  // 从 localStorage 恢复显示模式，默认为 false（卡片视图）
-  const getInitialListViewMode = () => {
-    return readBooleanPreference(PLUGIN_LIST_VIEW_MODE_STORAGE_KEY, false);
-  };
-  const isListView = ref(getInitialListViewMode());
   const pluginSearch = ref("");
-  const installedStatusFilter = ref("all");
-  const installedSortBy = ref("default");
-  const installedSortOrder = ref("desc");
-  const getInitialPinUpdatesOnTop = () => {
-    return readBooleanPreference(PIN_UPDATES_ON_TOP_STORAGE_KEY, true);
-  };
-  const pinUpdatesOnTop = ref(getInitialPinUpdatesOnTop());
-  watch(pinUpdatesOnTop, (val) => {
-    writeBooleanPreference(PIN_UPDATES_ON_TOP_STORAGE_KEY, val);
-  });
   const loading_ = ref(false);
   
   // 分页相关
@@ -348,67 +318,9 @@ export const useExtensionPage = () => {
     return items;
   });
 
-  const installedSortItems = computed(() => [
-    { title: tm("sort.default"), value: "default" },
-    { title: tm("sort.installTime"), value: "install_time" },
-    { title: tm("sort.name"), value: "name" },
-    { title: tm("sort.author"), value: "author" },
-    { title: tm("sort.updateStatus"), value: "update_status" },
-  ]);
-
-  const installedSortUsesOrder = computed(
-    () => installedSortBy.value !== "default",
-  );
-  
-  // 插件表格的表头定义
-  const showAuthorColumn = computed(() => width.value >= 1280);
-  const pluginHeaders = computed(() => {
-    const headers = [
-      {
-        title: tm("table.headers.name"),
-        key: "name",
-        sortable: false,
-        width: showAuthorColumn.value ? "24%" : "26%",
-      },
-      {
-        title: tm("table.headers.description"),
-        key: "desc",
-        sortable: false,
-        width: showAuthorColumn.value ? "32%" : "36%",
-      },
-      {
-        title: tm("table.headers.version"),
-        key: "version",
-        sortable: false,
-        width: showAuthorColumn.value ? "12%" : "14%",
-      },
-    ];
-
-    if (showAuthorColumn.value) {
-      headers.push({
-        title: tm("table.headers.author"),
-        key: "author",
-        sortable: false,
-        width: "10%",
-      });
-    }
-
-    headers.push({
-      title: tm("table.headers.actions"),
-      key: "actions",
-      sortable: false,
-      width: showAuthorColumn.value ? "22%" : "24%",
-    });
-
-    return headers;
-  });
-  
   // 过滤要显示的插件
   const filteredExtensions = computed(() => {
     const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
-    if (!showReserved.value) {
-      return data.filter((ext) => !ext.reserved);
-    }
     return data;
   });
 
@@ -421,126 +333,35 @@ export const useExtensionPage = () => {
       },
     );
 
-  const compareInstalledPluginAuthors = (left, right) =>
-    normalizeStr(left?.author ?? "").localeCompare(
-      normalizeStr(right?.author ?? ""),
-      undefined,
-      { sensitivity: "base" },
-    );
-
-  const getInstalledAtTimestamp = (plugin) => {
-    const parsed = Date.parse(plugin?.installed_at ?? "");
-    return Number.isFinite(parsed) ? parsed : null;
-  };
-
   const compareInstalledFallback = (left, right) => {
+    const reservedDiff =
+      Number(!!left.plugin?.reserved) - Number(!!right.plugin?.reserved);
+    if (reservedDiff !== 0) {
+      return reservedDiff;
+    }
+
     const nameCompare = compareInstalledPluginNames(left.plugin, right.plugin);
     return nameCompare !== 0 ? nameCompare : left.index - right.index;
   };
 
-  const compareInstalledUpdatePinning = (left, right) => {
-    const leftHasUpdate = left.plugin?.has_update ? 1 : 0;
-    const rightHasUpdate = right.plugin?.has_update ? 1 : 0;
-    return rightHasUpdate - leftHasUpdate;
-  };
-
   const sortInstalledPlugins = (plugins) => {
     return plugins
       .map((plugin, index) => ({
         plugin,
         index,
-        installedAtTimestamp: getInstalledAtTimestamp(plugin),
       }))
-      .sort((left, right) => {
-        if (
-          pinUpdatesOnTop.value &&
-          installedSortBy.value !== "update_status"
-        ) {
-          // Pinning updates is a primary grouping; the selected sort order still
-          // applies within the "has update" and "no update" groups below.
-          const pinCompare = compareInstalledUpdatePinning(left, right);
-          if (pinCompare !== 0) {
-            return pinCompare;
-          }
-        }
-
-        if (installedSortBy.value === "install_time") {
-          const leftTimestamp = left.installedAtTimestamp;
-          const rightTimestamp = right.installedAtTimestamp;
-
-          if (leftTimestamp == null && rightTimestamp == null) {
-            return compareInstalledFallback(left, right);
-          }
-          if (leftTimestamp == null) {
-            return 1;
-          }
-          if (rightTimestamp == null) {
-            return -1;
-          }
-
-          const timeDiff =
-            installedSortOrder.value === "desc"
-              ? rightTimestamp - leftTimestamp
-              : leftTimestamp - rightTimestamp;
-          return timeDiff !== 0
-            ? timeDiff
-            : compareInstalledFallback(left, right);
-        }
-
-        if (installedSortBy.value === "name") {
-          const nameCompare = compareInstalledPluginNames(left.plugin, right.plugin);
-          if (nameCompare !== 0) {
-            return installedSortOrder.value === "desc"
-              ? -nameCompare
-              : nameCompare;
-          }
-          return compareInstalledFallback(left, right);
-        }
-
-        if (installedSortBy.value === "author") {
-          const authorCompare = compareInstalledPluginAuthors(
-            left.plugin,
-            right.plugin,
-          );
-          if (authorCompare !== 0) {
-            return installedSortOrder.value === "desc"
-              ? -authorCompare
-              : authorCompare;
-          }
-          return compareInstalledFallback(left, right);
-        }
-
-        if (installedSortBy.value === "update_status") {
-          const updateDiff =
-            installedSortOrder.value === "desc"
-              ? compareInstalledUpdatePinning(left, right)
-              : compareInstalledUpdatePinning(right, left);
-          return updateDiff !== 0
-            ? updateDiff
-            : compareInstalledFallback(left, right);
-        }
-
-        return compareInstalledFallback(left, right);
-      })
+      .sort(compareInstalledFallback)
       .map((item) => item.plugin);
   };
 
   // 通过搜索过滤插件
   const filteredPlugins = computed(() => {
-    const plugins = filteredExtensions.value.filter((plugin) => {
-      if (installedStatusFilter.value === "enabled") {
-        return !!plugin.activated;
-      }
-      if (installedStatusFilter.value === "disabled") {
-        return !plugin.activated;
-      }
-      return true;
-    });
-
     const query = buildSearchQuery(pluginSearch.value);
     const filtered = query
-      ? plugins.filter((plugin) => matchesPluginSearch(plugin, query))
-      : plugins;
+      ? filteredExtensions.value.filter((plugin) =>
+          matchesPluginSearch(plugin, query),
+        )
+      : filteredExtensions.value;
 
     return sortInstalledPlugins(filtered);
   });
@@ -658,12 +479,6 @@ export const useExtensionPage = () => {
   });
   
   // 方法
-  const toggleShowReserved = () => {
-    showReserved.value = !showReserved.value;
-    // 保存到 localStorage
-    writeBooleanPreference(SHOW_RESERVED_PLUGINS_STORAGE_KEY, showReserved.value);
-  };
-  
   const toast = (message, success) => {
     snack_message.value = message;
     snack_show.value = true;
@@ -922,7 +737,10 @@ export const useExtensionPage = () => {
   // 确认强制更新
   // 显示更新全部插件确认对话框
   const showUpdateAllConfirm = () => {
-    if (updatableExtensions.value.length === 0) return;
+    if (updatableExtensions.value.length === 0) {
+      toast(tm("messages.noUpdatesAvailable"), "info");
+      return;
+    }
     updateAllConfirmDialog.show = true;
   };
   
@@ -945,7 +763,11 @@ export const useExtensionPage = () => {
   };
   
   const updateAllExtensions = async () => {
-    if (updatingAll.value || updatableExtensions.value.length === 0) return;
+    if (updatingAll.value) return;
+    if (updatableExtensions.value.length === 0) {
+      toast(tm("messages.noUpdatesAvailable"), "info");
+      return;
+    }
     updatingAll.value = true;
     loadingDialog.title = tm("status.loading");
     loadingDialog.statusCode = 0;
@@ -1624,11 +1446,6 @@ export const useExtensionPage = () => {
     }, 300); // 300ms 防抖延迟
   });
   
-  // 监听显示模式变化并保存到 localStorage
-  watch(isListView, (newVal) => {
-    writeBooleanPreference(PLUGIN_LIST_VIEW_MODE_STORAGE_KEY, newVal);
-  });
-  
   watch(
     [() => dialog.value, () => extension_url.value, () => uploadTab.value],
     async ([dialogOpen, _, currentUploadTab]) => {
@@ -1693,8 +1510,6 @@ export const useExtensionPage = () => {
     extractTabFromHash,
     syncTabFromHash,
     extension_data,
-    getInitialShowReserved,
-    showReserved,
     snack_message,
     snack_show,
     snack_success,
@@ -1710,13 +1525,7 @@ export const useExtensionPage = () => {
     forceUpdateDialog,
     updateAllConfirmDialog,
     changelogDialog,
-    getInitialListViewMode,
-    isListView,
     pluginSearch,
-    installedStatusFilter,
-    installedSortBy,
-    installedSortOrder,
-    pinUpdatesOnTop,
     loading_,
     currentPage,
     marketCategoryFilter,
@@ -1755,9 +1564,6 @@ export const useExtensionPage = () => {
     toPinyinText,
     toInitials,
     plugin_handler_info_headers,
-    installedSortItems,
-    installedSortUsesOrder,
-    pluginHeaders,
     filteredExtensions,
     filteredPlugins,
     filteredMarketPlugins,
@@ -1772,7 +1578,6 @@ export const useExtensionPage = () => {
     totalPages,
     paginatedPlugins,
     updatableExtensions,
-    toggleShowReserved,
     toast,
     resetLoadingDialog,
     onLoadingDialogResult,
diff --git a/dashboard/tests/extensionPreferenceStorage.test.mjs b/dashboard/tests/extensionPreferenceStorage.test.mjs
deleted file mode 100644
index e864f5fae5..0000000000
--- a/dashboard/tests/extensionPreferenceStorage.test.mjs
+++ /dev/null
@@ -1,75 +0,0 @@
-import test from 'node:test';
-import assert from 'node:assert/strict';
-
-import {
-  PIN_UPDATES_ON_TOP_STORAGE_KEY,
-  readBooleanPreference,
-  writeBooleanPreference,
-} from '../src/views/extension/extensionPreferenceStorage.mjs';
-
-test("readBooleanPreference returns fallback when storage access throws", () => {
-  const storage = {
-    getItem() {
-      throw new Error("SecurityError");
-    },
-  };
-
-  assert.equal(
-    readBooleanPreference(PIN_UPDATES_ON_TOP_STORAGE_KEY, true, storage),
-    true,
-  );
-});
-
-test("readBooleanPreference parses stored boolean strings", () => {
-  const storage = {
-    getItem(key) {
-      return key === PIN_UPDATES_ON_TOP_STORAGE_KEY ? "false" : null;
-    },
-  };
-
-  assert.equal(
-    readBooleanPreference(PIN_UPDATES_ON_TOP_STORAGE_KEY, true, storage),
-    false,
-  );
-});
-
-test("readBooleanPreference treats explicit null storage as unavailable", () => {
-  assert.equal(
-    readBooleanPreference(PIN_UPDATES_ON_TOP_STORAGE_KEY, true, null),
-    true,
-  );
-});
-
-test("readBooleanPreference treats invalid storage overrides as unavailable", () => {
-  assert.equal(
-    readBooleanPreference(PIN_UPDATES_ON_TOP_STORAGE_KEY, true, {}),
-    true,
-  );
-});
-
-test("writeBooleanPreference stores boolean strings and swallows storage errors", () => {
-  const writes = [];
-  const storage = {
-    setItem(key, value) {
-      writes.push([key, value]);
-      throw new Error("QuotaExceededError");
-    },
-  };
-
-  assert.doesNotThrow(() =>
-    writeBooleanPreference(PIN_UPDATES_ON_TOP_STORAGE_KEY, true, storage),
-  );
-  assert.deepEqual(writes, [[PIN_UPDATES_ON_TOP_STORAGE_KEY, "true"]]);
-});
-
-test("writeBooleanPreference ignores explicit null storage", () => {
-  assert.doesNotThrow(() =>
-    writeBooleanPreference(PIN_UPDATES_ON_TOP_STORAGE_KEY, true, null),
-  );
-});
-
-test("writeBooleanPreference ignores invalid storage overrides", () => {
-  assert.doesNotThrow(() =>
-    writeBooleanPreference(PIN_UPDATES_ON_TOP_STORAGE_KEY, true, {}),
-  );
-});