diff --git a/dashboard/src/components/extension/mod-manager/BatchOperationBar.vue b/dashboard/src/components/extension/mod-manager/BatchOperationBar.vue
new file mode 100644
index 0000000000..e0daf2d91d
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/BatchOperationBar.vue
@@ -0,0 +1,234 @@
+<template>
+  <v-slide-y-transition>
+    <div v-if="visible" class="batch-operation-bar">
+      <v-toolbar
+        class="batch-operation-bar__toolbar"
+        color="surface"
+        density="comfortable"
+        elevation="8"
+      >
+        <div class="d-flex align-center flex-grow-1 ga-3 flex-wrap">
+          <div class="d-flex align-center">
+            <v-icon size="18" class="mr-2">mdi-checkbox-multiple-marked</v-icon>
+            <span class="text-body-2">已选择 {{ totalSelected }} 个插件</span>
+          </div>
+
+          <v-divider vertical class="mx-1" />
+
+          <div class="d-flex align-center ga-2 flex-wrap">
+            <v-btn
+              color="success"
+              size="small"
+              variant="flat"
+              :disabled="isBusy || selectedInactive.length === 0"
+              :loading="isBusy"
+              @click="handleBatchEnable"
+            >
+              <v-icon start size="18">mdi-play</v-icon>
+              批量启用
+              <span v-if="selectedInactive.length" class="ml-1">({{ selectedInactive.length }})</span>
+            </v-btn>
+
+            <v-btn
+              color="warning"
+              size="small"
+              variant="flat"
+              :disabled="isBusy || selectedActive.length === 0"
+              :loading="isBusy"
+              @click="handleBatchDisable"
+            >
+              <v-icon start size="18">mdi-pause</v-icon>
+              批量停用
+              <span v-if="selectedActive.length" class="ml-1">({{ selectedActive.length }})</span>
+            </v-btn>
+
+            <v-btn
+              color="primary"
+              size="small"
+              variant="flat"
+              :disabled="isBusy || updatablePlugins.length === 0"
+              :loading="isBusy"
+              @click="handleBatchUpdate"
+            >
+              <v-icon start size="18">mdi-update</v-icon>
+              批量更新
+              <span class="ml-1">({{ updatablePlugins.length }})</span>
+            </v-btn>
+
+            <v-btn
+              color="error"
+              size="small"
+              variant="flat"
+              :disabled="isBusy || uninstallablePlugins.length === 0"
+              :loading="isBusy"
+              @click="openUninstallConfirm"
+            >
+              <v-icon start size="18">mdi-delete</v-icon>
+              批量卸载
+              <span class="ml-1">({{ uninstallablePlugins.length }})</span>
+            </v-btn>
+          </div>
+        </div>
+
+        <v-spacer />
+
+        <v-btn
+          color="grey"
+          size="small"
+          variant="text"
+          :disabled="isBusy"
+          :loading="isBusy"
+          @click="emit('clear-selection')"
+        >
+          取消选择
+        </v-btn>
+      </v-toolbar>
+
+      <v-dialog v-model="showUninstallDialog" max-width="520">
+        <v-card>
+          <v-card-title class="text-h6 d-flex align-center">
+            <v-icon color="error" class="mr-2">mdi-delete-alert</v-icon>
+            确认卸载
+          </v-card-title>
+
+          <v-card-text>
+            <div>
+              确定要卸载选中的
+              <strong>{{ pendingUninstallNames.length }}</strong>
+              个插件吗？此操作不可撤销。
+            </div>
+            <div class="text-caption text-medium-emphasis mt-2">
+              系统插件（reserved）不会出现在可卸载列表中。
+            </div>
+
+            <v-alert
+              v-if="pendingUninstallNames.length === 0"
+              type="info"
+              variant="tonal"
+              density="compact"
+              class="mt-3"
+            >
+              当前选择中没有可卸载插件。
+            </v-alert>
+
+            <v-alert
+              v-else
+              type="warning"
+              variant="tonal"
+              density="compact"
+              class="mt-3"
+            >
+              将卸载 {{ pendingUninstallNames.length }} 个插件。
+            </v-alert>
+          </v-card-text>
+
+          <v-card-actions>
+            <v-spacer />
+            <v-btn
+              color="grey"
+              variant="text"
+              :disabled="isBusy"
+              @click="showUninstallDialog = false"
+            >
+              取消
+            </v-btn>
+            <v-btn
+              color="error"
+              variant="elevated"
+              :disabled="isBusy || pendingUninstallNames.length === 0"
+              :loading="isBusy"
+              @click="confirmBatchUninstall"
+            >
+              卸载
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </div>
+  </v-slide-y-transition>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { PluginSummary } from './types'
+
+const props = defineProps<{
+  selectedInactive: PluginSummary[]
+  selectedActive: PluginSummary[]
+  busy?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'batch-enable', plugins: PluginSummary[]): void
+  (e: 'batch-disable', plugins: PluginSummary[]): void
+  (e: 'batch-update', names: string[]): void
+  (e: 'batch-uninstall', names: string[]): void
+  (e: 'clear-selection'): void
+}>()
+
+const isBusy = computed(() => props.busy ?? false)
+
+// 总选中数量
+const totalSelected = computed(
+  () => (props.selectedInactive?.length ?? 0) + (props.selectedActive?.length ?? 0)
+)
+
+// 是否显示（有选中项时显示）
+const visible = computed(() => totalSelected.value > 0)
+
+const allSelected = computed<PluginSummary[]>(() => [
+  ...(props.selectedInactive ?? []),
+  ...(props.selectedActive ?? []),
+])
+
+// 可更新的插件（选中的且has_update为true）
+const updatablePlugins = computed(() => {
+  const all = allSelected.value
+  return all.filter((p) => Boolean(p.has_update))
+})
+
+// 可卸载的插件（选中的且非系统插件）
+const uninstallablePlugins = computed(() => {
+  const all = allSelected.value
+  return all.filter((p) => !p.reserved)
+})
+
+const handleBatchEnable = () => emit('batch-enable', props.selectedInactive ?? [])
+const handleBatchDisable = () => emit('batch-disable', props.selectedActive ?? [])
+const handleBatchUpdate = () => emit('batch-update', updatablePlugins.value.map((p) => p.name))
+
+const showUninstallDialog = ref(false)
+const pendingUninstallNames = ref<string[]>([])
+
+const openUninstallConfirm = () => {
+  pendingUninstallNames.value = uninstallablePlugins.value.map((p) => p.name)
+  showUninstallDialog.value = true
+}
+
+const confirmBatchUninstall = () => {
+  const names = pendingUninstallNames.value
+  showUninstallDialog.value = false
+  if (names.length === 0) return
+  emit('batch-uninstall', names)
+}
+</script>
+
+<style scoped>
+.batch-operation-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  padding: 12px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom));
+  pointer-events: none;
+}
+
+.batch-operation-bar__toolbar {
+  pointer-events: auto;
+  border-radius: 14px;
+  box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.12);
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/DetachedTabPane.vue b/dashboard/src/components/extension/mod-manager/DetachedTabPane.vue
new file mode 100644
index 0000000000..2ed9db5162
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/DetachedTabPane.vue
@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useModuleI18n } from '@/i18n/composables'
+import type { PluginPanelTab, PluginSummary } from './types'
+
+import PluginInfoPanel from './PluginInfoPanel.vue'
+import PluginConfigPanel from './PluginConfigPanel.vue'
+import PluginOverviewPanel from './PluginOverviewPanel.vue'
+import PluginChangelogPanel from './PluginChangelogPanel.vue'
+import GlobalPanel from './GlobalPanel.vue'
+
+const props = defineProps<{
+  tab: PluginPanelTab
+  plugin: PluginSummary | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'dock'): void
+  (e: 'action-update', name: string): void
+  (e: 'config-saved', pluginName: string): void
+}>()
+
+const { tm } = useModuleI18n('features/extension')
+
+const tabLabel = computed(() => {
+  const key = `modManager.panelTabs.${props.tab}`
+  return tm(key) || props.tab
+})
+
+const pluginName = computed(() => props.plugin?.name || '')
+const repoUrl = computed(() => props.plugin?.repo || null)
+
+const openRepoInNewTab = (url: string) => {
+  if (!url) return
+  window.open(url, '_blank')
+}
+
+// --- Drag-to-dock with floating ghost (Chrome-like) ---
+const DRAG_START_THRESHOLD = 5
+
+function onHeaderPointerDown(e: PointerEvent) {
+  if (e.pointerType === 'mouse' && e.button !== 0) return
+  const startX = e.clientX
+  const startY = e.clientY
+  const header = e.currentTarget as HTMLElement
+  let dragging = false
+  let ghost: HTMLElement | null = null
+  let targetTabBar: HTMLElement | null = null
+
+  const createGhost = () => {
+    ghost = header.cloneNode(true) as HTMLElement
+    ghost.style.cssText = `
+      position: fixed;
+      z-index: 9999;
+      pointer-events: none;
+      opacity: 0.85;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+      border-radius: 8px;
+      background: rgb(var(--v-theme-surface));
+      padding: 6px 16px;
+      white-space: nowrap;
+      transition: transform 0.08s ease;
+      transform: scale(1.02);
+      max-width: 200px;
+      overflow: hidden;
+    `
+    document.body.appendChild(ghost)
+    // Find the tab bar for hit detection
+    targetTabBar = document.querySelector('.plugin-panel__tab-bar')
+  }
+
+  const moveGhost = (cx: number, cy: number) => {
+    if (!ghost) return
+    ghost.style.left = `${cx - ghost.offsetWidth / 2}px`
+    ghost.style.top = `${cy - ghost.offsetHeight / 2}px`
+
+    // Highlight tab bar when hovering over it (visual drop zone cue)
+    if (targetTabBar) {
+      const rect = targetTabBar.getBoundingClientRect()
+      const isOver = cx >= rect.left && cx <= rect.right && cy >= rect.top && cy <= rect.bottom + 20
+      targetTabBar.classList.toggle('plugin-panel__tab-bar--drop-target', isOver)
+    }
+  }
+
+  const removeGhost = () => {
+    if (ghost) {
+      ghost.remove()
+      ghost = null
+    }
+    if (targetTabBar) {
+      targetTabBar.classList.remove('plugin-panel__tab-bar--drop-target')
+      targetTabBar = null
+    }
+  }
+
+  const onMove = (ev: PointerEvent) => {
+    const dx = ev.clientX - startX
+    const dy = ev.clientY - startY
+    if (!dragging && Math.sqrt(dx * dx + dy * dy) > DRAG_START_THRESHOLD) {
+      dragging = true
+      createGhost()
+    }
+    if (dragging) {
+      moveGhost(ev.clientX, ev.clientY)
+    }
+  }
+
+  const onUp = (ev: PointerEvent) => {
+    cleanup()
+    if (!dragging) return
+
+    // Determine if released over the tab bar area
+    if (targetTabBar) {
+      const rect = targetTabBar.getBoundingClientRect()
+      // Generous hit zone: tab bar rect + 20px below
+      const isOver =
+        ev.clientX >= rect.left &&
+        ev.clientX <= rect.right &&
+        ev.clientY >= rect.top &&
+        ev.clientY <= rect.bottom + 20
+      if (isOver) {
+        emit('dock')
+      }
+    }
+    removeGhost()
+  }
+
+  const onCancel = () => {
+    cleanup()
+    removeGhost()
+  }
+
+  const cleanup = () => {
+    document.removeEventListener('pointermove', onMove)
+    document.removeEventListener('pointerup', onUp)
+    document.removeEventListener('pointercancel', onCancel)
+  }
+
+  document.addEventListener('pointermove', onMove)
+  document.addEventListener('pointerup', onUp)
+  document.addEventListener('pointercancel', onCancel)
+}
+</script>
+
+<template>
+  <v-card class="h-100 d-flex flex-column detached-pane" rounded="lg" variant="outlined">
+    <div
+      class="detached-pane__header d-flex align-center px-4 py-2"
+      @pointerdown.prevent="onHeaderPointerDown"
+    >
+      <v-icon size="18" class="mr-2 text-medium-emphasis">mdi-drag-horizontal</v-icon>
+      <span class="text-subtitle-2 font-weight-medium">{{ tabLabel }}</span>
+      <v-spacer />
+      <v-tooltip location="top">
+        <template #activator="{ props: tipProps }">
+          <v-btn
+            v-bind="tipProps"
+            icon
+            size="x-small"
+            variant="text"
+            @click.stop="emit('dock')"
+          >
+            <v-icon size="18">mdi-arrow-collapse-up</v-icon>
+          </v-btn>
+        </template>
+        <span>收回到标签栏</span>
+      </v-tooltip>
+    </div>
+
+    <v-divider />
+
+    <div class="detached-pane__body flex-grow-1" style="min-height: 0">
+      <!-- Info tab -->
+      <div v-if="tab === 'info'" class="detached-pane__content pa-3">
+        <PluginInfoPanel
+          v-if="plugin"
+          :plugin="plugin"
+          @action-update="emit('action-update', plugin.name)"
+          @open-repo="openRepoInNewTab"
+        />
+      </div>
+
+      <!-- Config tab -->
+      <div v-else-if="tab === 'config'" class="detached-pane__content pa-3">
+        <PluginConfigPanel
+          :pluginName="pluginName"
+          :active="true"
+          @saved="(name) => emit('config-saved', name)"
+          @error="() => {}"
+        />
+      </div>
+
+      <!-- Overview / docs tab -->
+      <div v-else-if="tab === 'overview'" class="detached-pane__content pa-3">
+        <PluginOverviewPanel
+          :pluginName="pluginName"
+          :repoUrl="repoUrl"
+          :active="true"
+        />
+      </div>
+
+      <!-- Changelog tab -->
+      <div v-else-if="tab === 'changelog'" class="detached-pane__content pa-3">
+        <PluginChangelogPanel :pluginName="pluginName" :active="true" />
+      </div>
+
+      <!-- Reserved / extension area tab -->
+      <div v-else-if="tab === 'reserved'" class="detached-pane__content">
+        <GlobalPanel />
+      </div>
+    </div>
+  </v-card>
+</template>
+
+<style scoped>
+.detached-pane__header {
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+  min-height: 40px;
+}
+
+.detached-pane__header:active {
+  cursor: grabbing;
+}
+
+.detached-pane__body {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.detached-pane__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+</style>
diff --git a/dashboard/src/components/extension/mod-manager/GlobalPanel.vue b/dashboard/src/components/extension/mod-manager/GlobalPanel.vue
new file mode 100644
index 0000000000..d7999ee149
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/GlobalPanel.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// Reserved area panel — placeholder for future plugin workspace features.
+</script>
+
+<template>
+  <div class="h-100 d-flex flex-column global-panel">
+    <div class="global-panel__body d-flex flex-column align-center justify-center pa-6">
+      <div class="reserved-icon mb-4">
+        <v-icon size="48" color="grey-lighten-1">mdi-puzzle-plus-outline</v-icon>
+      </div>
+
+      <div class="text-subtitle-1 font-weight-medium text-medium-emphasis mb-2">
+        预留功能区
+      </div>
+
+      <div class="text-body-2 text-center text-disabled reserved-desc">
+        待后续开发，考虑用于：
+      </div>
+
+      <div class="reserved-features mt-4">
+        <div class="reserved-feature d-flex align-center ga-3 pa-3">
+          <v-icon size="20" color="primary">mdi-application-outline</v-icon>
+          <span class="text-body-2">插件自带 UI 的 iframe 嵌入展示</span>
+        </div>
+        <div class="reserved-feature d-flex align-center ga-3 pa-3">
+          <v-icon size="20" color="info">mdi-text-box-search-outline</v-icon>
+          <span class="text-body-2">仅跟踪当前插件的相关日志信息</span>
+        </div>
+        <div class="reserved-feature d-flex align-center ga-3 pa-3">
+          <v-icon size="20" color="success">mdi-chart-timeline-variant</v-icon>
+          <span class="text-body-2">插件运行状态与调用统计</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.global-panel {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.global-panel__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.reserved-icon {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(
+    135deg,
+    rgba(var(--v-theme-primary), 0.06),
+    rgba(var(--v-theme-info), 0.06)
+  );
+  border: 2px dashed rgba(var(--v-theme-on-surface), 0.1);
+}
+
+.reserved-desc {
+  max-width: 280px;
+}
+
+.reserved-features {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  max-width: 340px;
+}
+
+.reserved-feature {
+  border-radius: 8px;
+  background: rgba(var(--v-theme-on-surface), 0.02);
+  transition: background 0.2s ease;
+}
+
+.reserved-feature:hover {
+  background: rgba(var(--v-theme-on-surface), 0.05);
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/LegacyInstalledView.vue b/dashboard/src/components/extension/mod-manager/LegacyInstalledView.vue
new file mode 100644
index 0000000000..a1be9839dc
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/LegacyInstalledView.vue
@@ -0,0 +1,331 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useModuleI18n } from '@/i18n/composables'
+import ExtensionCard from '@/components/shared/ExtensionCard.vue'
+import type { PluginSummary } from './types'
+
+const props = defineProps<{
+  plugins: PluginSummary[]
+  loading?: boolean
+  showReserved: boolean
+  isListView: boolean
+}>()
+
+type UninstallOptions = { deleteConfig?: boolean; deleteData?: boolean }
+
+const emit = defineEmits<{
+  (e: 'update:isListView', value: boolean): void
+  (e: 'action-enable', plugin: PluginSummary): void
+  (e: 'action-disable', plugin: PluginSummary): void
+  (e: 'action-reload', name: string): void
+  (e: 'action-update', name: string): void
+  (e: 'action-uninstall', name: string, options?: UninstallOptions): void
+  (e: 'action-configure', plugin: PluginSummary): void
+  (e: 'action-view-handlers', plugin: PluginSummary): void
+  (e: 'action-view-readme', plugin: PluginSummary): void
+  (e: 'view-changelog', plugin: PluginSummary): void
+  (e: 'action-open-repo', url: string): void
+}>()
+
+const { tm } = useModuleI18n('features/extension')
+
+const viewMode = computed<boolean>({
+  get: () => props.isListView,
+  set: (val) => emit('update:isListView', Boolean(val))
+})
+
+const safePlugins = computed<PluginSummary[]>(() => (Array.isArray(props.plugins) ? props.plugins : []))
+
+const pluginHeaders = computed(() => [
+  { title: tm('table.headers.name'), key: 'name', width: '200px' },
+  { title: tm('table.headers.description'), key: 'desc', maxWidth: '250px' },
+  { title: tm('table.headers.version'), key: 'version', width: '100px' },
+  { title: tm('table.headers.author'), key: 'author', width: '100px' },
+  { title: tm('table.headers.status'), key: 'activated', width: '100px' },
+  { title: '', key: 'repo', sortable: false, width: '56px' },
+  { title: tm('table.headers.actions'), key: 'actions', sortable: false, width: '260px' }
+])
+
+const handleToggleView = (isList: boolean) => {
+  if (viewMode.value === isList) return
+  viewMode.value = isList
+}
+
+const handleToggleActivation = (plugin: PluginSummary) => {
+  if (plugin.activated) {
+    emit('action-disable', plugin)
+  } else {
+    emit('action-enable', plugin)
+  }
+}
+
+const handleUninstallFromCard = (plugin: PluginSummary, options?: UninstallOptions) => {
+  emit('action-uninstall', plugin.name, options)
+}
+
+const handleOpenRepo = (url: string | null | undefined) => {
+  if (!url) return
+  emit('action-open-repo', url)
+}
+
+function toPlugin(item: unknown): PluginSummary {
+  const maybeWrapped = item as any
+  const raw = maybeWrapped?.raw
+  return (raw ?? item) as PluginSummary
+}
+</script>
+
+<template>
+  <div class="legacy-installed-view">
+    <v-row class="mb-4">
+      <v-col cols="12" class="d-flex align-center flex-wrap ga-2">
+        <v-btn-group variant="outlined" density="comfortable" color="primary">
+          <v-btn
+            @click="handleToggleView(false)"
+            :color="!viewMode ? 'primary' : undefined"
+            :variant="!viewMode ? 'flat' : 'outlined'"
+            aria-label="card-view"
+          >
+            <v-icon>mdi-view-grid</v-icon>
+          </v-btn>
+          <v-btn
+            @click="handleToggleView(true)"
+            :color="viewMode ? 'primary' : undefined"
+            :variant="viewMode ? 'flat' : 'outlined'"
+            aria-label="list-view"
+          >
+            <v-icon>mdi-view-list</v-icon>
+          </v-btn>
+        </v-btn-group>
+
+        <v-spacer />
+
+        <v-chip size="small" variant="tonal" color="primary">
+          {{ showReserved ? tm('buttons.showSystemPlugins') : tm('buttons.hideSystemPlugins') }}
+        </v-chip>
+      </v-col>
+    </v-row>
+
+    <v-fade-transition hide-on-leave>
+      <div v-if="viewMode">
+        <v-card class="rounded-lg overflow-hidden elevation-1">
+          <v-data-table
+            :headers="pluginHeaders"
+            :items="safePlugins"
+            :loading="loading"
+            item-key="name"
+            hover
+          >
+            <template #loader>
+              <v-row class="py-8 d-flex align-center justify-center">
+                <v-progress-circular indeterminate color="primary" />
+                <span class="ml-2">{{ tm('status.loading') }}</span>
+              </v-row>
+            </template>
+
+            <template #item.name="{ item }">
+              <div class="d-flex align-center py-2">
+                <div>
+                  <div class="text-subtitle-1 font-weight-medium">{{ toPlugin(item).name }}</div>
+                  <div v-if="toPlugin(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 #item.desc="{ item }">
+              <div class="text-body-2 text-medium-emphasis">{{ toPlugin(item).desc }}</div>
+            </template>
+
+            <template #item.version="{ item }">
+              <div class="d-flex align-center">
+                <span class="text-body-2">{{ toPlugin(item).version }}</span>
+                <v-icon v-if="toPlugin(item).has_update" color="warning" size="small" class="ml-1">mdi-alert</v-icon>
+                <v-tooltip v-if="toPlugin(item).has_update" activator="parent">
+                  <span>{{ tm('messages.hasUpdate') }} {{ toPlugin(item).online_version }}</span>
+                </v-tooltip>
+              </div>
+            </template>
+
+            <template #item.author="{ item }">
+              <div class="text-body-2">{{ toPlugin(item).author }}</div>
+            </template>
+
+            <template #item.activated="{ item }">
+              <v-chip
+                :color="toPlugin(item).activated ? 'success' : 'error'"
+                size="small"
+                class="font-weight-medium"
+                :variant="toPlugin(item).activated ? 'flat' : 'outlined'"
+              >
+                {{ toPlugin(item).activated ? tm('status.enabled') : tm('status.disabled') }}
+              </v-chip>
+            </template>
+
+            <template #item.repo="{ item }">
+              <v-btn
+                v-if="toPlugin(item).repo"
+                icon
+                size="small"
+                variant="text"
+                @click.stop="handleOpenRepo(toPlugin(item).repo)"
+              >
+                <v-icon size="20">mdi-github</v-icon>
+                <v-tooltip activator="parent" location="top">打开仓库</v-tooltip>
+              </v-btn>
+            </template>
+
+            <template #item.actions="{ item }">
+              <div class="d-flex align-center">
+                <v-btn-group density="comfortable" variant="text" color="primary">
+                  <v-btn
+                    v-if="!toPlugin(item).activated"
+                    icon
+                    size="small"
+                    color="success"
+                    @click.stop="emit('action-enable', toPlugin(item))"
+                  >
+                    <v-icon>mdi-play</v-icon>
+                    <v-tooltip activator="parent" location="top">{{ tm('tooltips.enable') }}</v-tooltip>
+                  </v-btn>
+                  <v-btn
+                    v-else
+                    icon
+                    size="small"
+                    color="error"
+                    @click.stop="emit('action-disable', toPlugin(item))"
+                  >
+                    <v-icon>mdi-pause</v-icon>
+                    <v-tooltip activator="parent" location="top">{{ tm('tooltips.disable') }}</v-tooltip>
+                  </v-btn>
+
+                  <v-btn icon size="small" color="info" @click.stop="emit('action-reload', toPlugin(item).name)">
+                    <v-icon>mdi-refresh</v-icon>
+                    <v-tooltip activator="parent" location="top">{{ tm('tooltips.reload') }}</v-tooltip>
+                  </v-btn>
+
+                  <v-btn icon size="small" @click.stop="emit('action-configure', toPlugin(item))">
+                    <v-icon>mdi-cog</v-icon>
+                    <v-tooltip activator="parent" location="top">{{ tm('tooltips.configure') }}</v-tooltip>
+                  </v-btn>
+
+                  <v-btn icon size="small" @click.stop="emit('action-view-handlers', toPlugin(item))">
+                    <v-icon>mdi-information</v-icon>
+                    <v-tooltip activator="parent" location="top">{{ tm('tooltips.viewInfo') }}</v-tooltip>
+                  </v-btn>
+
+                  <v-btn v-if="toPlugin(item).repo" icon size="small" @click.stop="emit('action-view-readme', toPlugin(item))">
+                    <v-icon>mdi-book-open-page-variant</v-icon>
+                    <v-tooltip activator="parent" location="top">{{ tm('tooltips.viewDocs') }}</v-tooltip>
+                  </v-btn>
+
+                  <v-btn
+                    v-if="toPlugin(item).has_update"
+                    icon
+                    size="small"
+                    color="warning"
+                    @click.stop="emit('action-update', toPlugin(item).name)"
+                  >
+                    <v-icon>mdi-update</v-icon>
+                    <v-tooltip activator="parent" location="top">{{ tm('tooltips.update') }}</v-tooltip>
+                  </v-btn>
+
+                  <v-btn
+                    icon
+                    size="small"
+                    color="error"
+                    :disabled="toPlugin(item).reserved"
+                    @click.stop="emit('action-uninstall', toPlugin(item).name)"
+                  >
+                    <v-icon>mdi-delete</v-icon>
+                    <v-tooltip activator="parent" location="top">{{ tm('tooltips.uninstall') }}</v-tooltip>
+                  </v-btn>
+                </v-btn-group>
+              </div>
+            </template>
+
+            <template #no-data>
+              <div class="text-center pa-8">
+                <v-icon size="64" color="info" class="mb-4">mdi-puzzle-outline</v-icon>
+                <div class="text-h5 mb-2">{{ tm('empty.noPlugins') }}</div>
+                <div class="text-body-1 mb-4">{{ tm('empty.noPluginsDesc') }}</div>
+              </div>
+            </template>
+          </v-data-table>
+        </v-card>
+      </div>
+
+      <div v-else>
+        <v-row v-if="loading" class="text-center">
+          <v-col cols="12" class="pa-8 d-flex align-center justify-center ga-3">
+            <v-progress-circular indeterminate color="primary" />
+            <span class="text-body-2 text-medium-emphasis">{{ tm('status.loading') }}</span>
+          </v-col>
+        </v-row>
+
+        <v-row v-else-if="safePlugins.length === 0" class="text-center">
+          <v-col cols="12" class="pa-2">
+            <v-icon size="64" color="info" class="mb-4">mdi-puzzle-outline</v-icon>
+            <div class="text-h5 mb-2">{{ tm('empty.noPlugins') }}</div>
+            <div class="text-body-1 mb-4">{{ tm('empty.noPluginsDesc') }}</div>
+          </v-col>
+        </v-row>
+
+        <v-row v-else>
+          <v-col
+            cols="12"
+            md="6"
+            lg="4"
+            v-for="extension in safePlugins"
+            :key="extension.name"
+            class="pb-2"
+          >
+            <div class="legacy-installed-view__card-wrapper">
+              <v-btn
+                v-if="extension.repo"
+                class="legacy-installed-view__repo"
+                icon
+                size="small"
+                variant="text"
+                @click.stop="handleOpenRepo(extension.repo)"
+              >
+                <v-icon size="20">mdi-github</v-icon>
+                <v-tooltip activator="parent" location="top">打开仓库</v-tooltip>
+              </v-btn>
+
+              <ExtensionCard
+                :extension="extension"
+                class="rounded-lg"
+                style="background-color: rgb(var(--v-theme-mcpCardBg));"
+                @configure="emit('action-configure', extension)"
+                @uninstall="(ext, options) => handleUninstallFromCard(ext, options)"
+                @update="emit('action-update', extension.name)"
+                @reload="emit('action-reload', extension.name)"
+                @toggle-activation="handleToggleActivation(extension)"
+                @view-handlers="emit('action-view-handlers', extension)"
+                @view-readme="emit('action-view-readme', extension)"
+                @view-changelog="emit('view-changelog', extension)"
+              />
+            </div>
+          </v-col>
+        </v-row>
+      </div>
+    </v-fade-transition>
+  </div>
+</template>
+
+<style scoped>
+.legacy-installed-view__card-wrapper {
+  position: relative;
+}
+
+.legacy-installed-view__repo {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  z-index: 6;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/ModManagerLayout.vue b/dashboard/src/components/extension/mod-manager/ModManagerLayout.vue
new file mode 100644
index 0000000000..963c426f0f
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/ModManagerLayout.vue
@@ -0,0 +1,500 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+
+import { usePluginConfigCache } from '@/composables/usePluginConfigCache'
+import type { InstalledViewMode, PluginSummary } from './types'
+
+import ModTopToolbar from './ModTopToolbar.vue'
+import ResizableSplitPane from './ResizableSplitPane.vue'
+import PluginDualList from './PluginDualList.vue'
+import PluginWorkspace from './PluginWorkspace.vue'
+
+const MAIN_SPLIT_RATIO_KEY = 'pluginManager.mainSplitRatio'
+const RIGHT_PANE_RATIO_KEY = 'pluginManager.rightPaneRatio'
+
+const props = defineProps<{
+  plugins: PluginSummary[]
+  loading?: boolean
+  showReserved: boolean
+  installedViewMode: InstalledViewMode
+  updatableCount: number
+  search: string
+  updatingAll?: boolean
+  failedMessage?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:search', value: string): void
+  (e: 'update:showReserved', value: boolean): void
+  (e: 'update:installedViewMode', mode: InstalledViewMode): void
+  (e: 'install'): void
+  (e: 'update-all'): void
+
+  (e: 'action-enable', plugin: PluginSummary): void
+  (e: 'action-disable', plugin: PluginSummary): void
+  (e: 'action-reload', name: string): void
+  (e: 'action-update', name: string): void
+  (e: 'action-uninstall', name: string): void
+  (e: 'action-configure', plugin: PluginSummary): void
+  (e: 'action-open-readme', plugin: PluginSummary): void
+  (e: 'action-open-repo', url: string): void
+
+  (e: 'batch-enable', plugins: PluginSummary[]): void
+  (e: 'batch-disable', plugins: PluginSummary[]): void
+  (e: 'batch-update', names: string[]): void
+  (e: 'batch-uninstall', names: string[]): void
+
+  (e: 'config-saved', pluginName: string): void
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const mainRef = ref<HTMLElement | null>(null)
+const leftRef = ref<HTMLElement | null>(null)
+const rightRef = ref<HTMLElement | null>(null)
+
+const debugLog = (...args: any[]) => {
+  if (!import.meta.env.DEV) return
+  // eslint-disable-next-line no-console
+  console.log('[ModManagerLayout]', ...args)
+}
+
+const selectedPluginName = ref<string | null>(null)
+const selectedInactiveNames = ref<string[]>([])
+const selectedActiveNames = ref<string[]>([])
+
+const mainSplitRatio = ref(0.5)
+const rightPaneRatio = ref(0.5)
+
+const shouldAutoFitMainSplit = ref(false)
+const hasAutoFitMainSplit = ref(false)
+
+const cache = usePluginConfigCache()
+
+const selectedPlugin = computed<PluginSummary | null>(() => {
+  const name = selectedPluginName.value
+  if (!name) return null
+  return (props.plugins ?? []).find((p) => p.name === name) ?? null
+})
+
+const selectedInactivePlugins = computed<PluginSummary[]>(() => {
+  const names = new Set(selectedInactiveNames.value ?? [])
+  return (props.plugins ?? []).filter((p) => names.has(p.name))
+})
+
+const selectedActivePlugins = computed<PluginSummary[]>(() => {
+  const names = new Set(selectedActiveNames.value ?? [])
+  return (props.plugins ?? []).filter((p) => names.has(p.name))
+})
+
+function parseStoredRatio(raw: string | null): number | null {
+  if (!raw) return null
+  const num = Number(raw)
+  if (!Number.isFinite(num)) return null
+  if (num <= 0 || num >= 1) return null
+  return num
+}
+
+async function logLayoutSizes(reason: string) {
+  if (!import.meta.env.DEV) return
+  await nextTick()
+
+  const info = {
+    reason,
+    pluginCount: props.plugins?.length ?? 0,
+    firstPlugin: props.plugins?.[0]?.name ?? null,
+    root: rootRef.value
+      ? { w: rootRef.value.clientWidth, h: rootRef.value.clientHeight }
+      : null,
+    main: mainRef.value
+      ? { w: mainRef.value.clientWidth, h: mainRef.value.clientHeight }
+      : null,
+    left: leftRef.value
+      ? { w: leftRef.value.clientWidth, h: leftRef.value.clientHeight }
+      : null,
+    right: rightRef.value
+      ? { w: rightRef.value.clientWidth, h: rightRef.value.clientHeight }
+      : null
+  }
+
+  debugLog('layout', info)
+}
+
+function clampRatio(ratio: number, min: number, max: number): number {
+  const lo = Math.min(min, max)
+  const hi = Math.max(min, max)
+  if (!Number.isFinite(ratio)) return lo
+  return Math.min(hi, Math.max(lo, ratio))
+}
+
+type MeasuredPaneInfo = {
+  splitContainerWidth: number
+  dividerHalfWidth: number
+  desiredLeftWidth: number
+}
+
+function measureDesiredLeftPaneWidth(): MeasuredPaneInfo | null {
+  const splitContainer =
+    (mainRef.value?.querySelector('.resizable-split-pane') as HTMLElement | null) ?? null
+  const leftRoot = leftRef.value
+
+  if (!splitContainer || !leftRoot) return null
+
+  const splitContainerWidth = splitContainer.clientWidth
+  if (!Number.isFinite(splitContainerWidth) || splitContainerWidth <= 0) return null
+
+  const anyRowRoot =
+    (leftRoot.querySelector(
+      'tbody tr td .plugin-mini-avatar'
+    ) as HTMLElement | null)?.closest('td')?.querySelector('div.d-flex.align-center') ??
+    null
+
+  if (!anyRowRoot) return null
+
+  const anyNameCell = (leftRoot.querySelector('tbody tr td .plugin-mini-avatar') as HTMLElement | null)
+    ?.closest('td') as HTMLElement | null
+  if (!anyNameCell) return null
+
+  const nameCellStyle = window.getComputedStyle(anyNameCell)
+  const nameCellPadding =
+    (Number.parseFloat(nameCellStyle.paddingLeft) || 0) +
+    (Number.parseFloat(nameCellStyle.paddingRight) || 0)
+
+  const firstRow = leftRoot.querySelector('tbody tr') as HTMLElement | null
+  const firstRowCells = firstRow?.querySelectorAll('td') ?? null
+  const indexCellWidth =
+    firstRowCells && firstRowCells.length >= 1
+      ? firstRowCells[0].getBoundingClientRect().width
+      : 0
+  const selectCellWidth =
+    firstRowCells && firstRowCells.length >= 2
+      ? firstRowCells[1].getBoundingClientRect().width
+      : 0
+
+  const rowRoots = Array.from(
+    leftRoot.querySelectorAll('tbody tr td .plugin-mini-avatar')
+  )
+    .map(
+      (el) =>
+        (el as HTMLElement).closest('td')?.querySelector('div.d-flex.align-center') as HTMLElement | null
+    )
+    .filter((el): el is HTMLElement => Boolean(el))
+
+  if (rowRoots.length === 0) return null
+
+  const measureNaturalTextWidth = (el: HTMLElement): number => {
+    const text = el.textContent ?? ''
+    if (!text) return 0
+
+    const body = document.body
+    if (!body) {
+      return el.scrollWidth
+    }
+
+    const style = window.getComputedStyle(el)
+    const span = document.createElement('span')
+    span.textContent = text
+    span.style.position = 'absolute'
+    span.style.left = '-99999px'
+    span.style.top = '0'
+    span.style.visibility = 'hidden'
+    span.style.whiteSpace = 'nowrap'
+    span.style.font = style.font
+    span.style.letterSpacing = style.letterSpacing
+    span.style.textTransform = style.textTransform
+    span.style.padding = '0'
+    span.style.margin = '0'
+    span.style.border = '0'
+
+    body.appendChild(span)
+    const width = span.getBoundingClientRect().width
+    span.remove()
+
+    if (!Number.isFinite(width) || width <= 0) return 0
+    return width
+  }
+
+  let maxRequiredNameCellContentWidth = 0
+  for (const root of rowRoots) {
+    const textEl = root.querySelector('.text-truncate') as HTMLElement | null
+    if (!textEl) continue
+
+    const rootWidth = root.getBoundingClientRect().width
+    const textWidth = textEl.getBoundingClientRect().width
+    const otherWidth = Math.max(0, rootWidth - textWidth)
+
+    const naturalTextWidth = measureNaturalTextWidth(textEl)
+    if (!Number.isFinite(naturalTextWidth) || naturalTextWidth <= 0) continue
+
+    const required = otherWidth + naturalTextWidth
+    if (required > maxRequiredNameCellContentWidth) {
+      maxRequiredNameCellContentWidth = required
+    }
+  }
+
+  if (!Number.isFinite(maxRequiredNameCellContentWidth) || maxRequiredNameCellContentWidth <= 0) return null
+
+  const wrapper = leftRoot.querySelector('.v-data-table__wrapper') as HTMLElement | null
+  const scrollBarWidth = wrapper ? Math.max(0, wrapper.offsetWidth - wrapper.clientWidth) : 0
+
+  const desiredTableWidth =
+    Math.ceil(indexCellWidth + selectCellWidth + nameCellPadding + maxRequiredNameCellContentWidth) +
+    scrollBarWidth
+
+  const dividerHalfWidth = 6
+
+  return {
+    splitContainerWidth,
+    dividerHalfWidth,
+    desiredLeftWidth: desiredTableWidth
+  }
+}
+
+async function tryAutoFitMainSplitRatio(reason: string) {
+  if (!shouldAutoFitMainSplit.value || hasAutoFitMainSplit.value) return
+  if ((props.plugins?.length ?? 0) === 0) return
+
+  await nextTick()
+
+  const measured = measureDesiredLeftPaneWidth()
+  if (!measured) return
+
+  const minRatio = 0.125
+  const maxRatio = 0.875
+
+  const ratio =
+    (measured.desiredLeftWidth + measured.dividerHalfWidth) / measured.splitContainerWidth
+
+  mainSplitRatio.value = clampRatio(ratio, minRatio, maxRatio)
+  hasAutoFitMainSplit.value = true
+
+  debugLog('autoFitMainSplit', { reason, measured, ratio: mainSplitRatio.value })
+  logLayoutSizes('autoFitMainSplit')
+}
+
+onMounted(() => {
+  const mainStoredRaw = localStorage.getItem(MAIN_SPLIT_RATIO_KEY)
+  const mainStored = parseStoredRatio(mainStoredRaw)
+  if (mainStored != null) {
+    mainSplitRatio.value = mainStored
+  } else {
+    shouldAutoFitMainSplit.value = true
+  }
+
+  const rightStored = parseStoredRatio(localStorage.getItem(RIGHT_PANE_RATIO_KEY))
+  if (rightStored != null) {
+    rightPaneRatio.value = rightStored
+  }
+
+  logLayoutSizes('mounted')
+  window.setTimeout(() => logLayoutSizes('mounted+500ms'), 500)
+
+  void tryAutoFitMainSplitRatio('mounted')
+})
+
+watch(
+  mainSplitRatio,
+  (val) => {
+    if (!Number.isFinite(val)) return
+    localStorage.setItem(MAIN_SPLIT_RATIO_KEY, String(val))
+  },
+  { flush: 'post' }
+)
+
+watch(
+  rightPaneRatio,
+  (val) => {
+    if (!Number.isFinite(val)) return
+    localStorage.setItem(RIGHT_PANE_RATIO_KEY, String(val))
+  },
+  { flush: 'post' }
+)
+
+watch(
+  () => ({
+    loading: props.loading ?? false,
+    pluginCount: props.plugins?.length ?? 0,
+    firstPlugin: props.plugins?.[0]?.name ?? null
+  }),
+  (val) => {
+    debugLog('props', val)
+    logLayoutSizes('props-changed')
+    void tryAutoFitMainSplitRatio('props-changed')
+  },
+  { immediate: true, flush: 'post' }
+)
+
+watch(
+  () => selectedPluginName.value,
+  (name) => {
+    if (!name) return
+    cache.prefetch(name)
+  }
+)
+
+const cssEscape = (value: string) => {
+  const escapeFn = (globalThis as any).CSS?.escape
+  if (typeof escapeFn === 'function') return escapeFn(value)
+  return value.replace(/["\\]/g, '\\$&')
+}
+
+async function scrollToPluginRow(name: string) {
+  await nextTick()
+  const selector = `[data-plugin-name="${cssEscape(name)}"]`
+  const el = document.querySelector(selector) as HTMLElement | null
+  if (!el) return
+
+  el.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'nearest'
+  })
+}
+
+const handleSelectPlugin = async (name: string) => {
+  if (!name) return
+  selectedPluginName.value = name
+  await scrollToPluginRow(name)
+}
+
+const handleActionConfigure = (plugin: PluginSummary) => {
+  if (!plugin?.name) return
+  selectedPluginName.value = plugin.name
+  emit('action-configure', plugin)
+}
+
+const handleActionOpenReadme = (plugin: PluginSummary) => {
+  if (!plugin?.name) return
+  selectedPluginName.value = plugin.name
+  emit('action-open-readme', plugin)
+}
+
+const handleToggleShowReserved = () => {
+  emit('update:showReserved', !props.showReserved)
+}
+
+
+</script>
+
+<template>
+  <div ref="rootRef" class="mod-manager-layout d-flex flex-column">
+    <div class="mod-manager-layout__top">
+      <ModTopToolbar
+        :search="search"
+        :show-reserved="showReserved"
+        :updatable-count="updatableCount"
+        :updating-all="updatingAll"
+        :failed-message="failedMessage"
+        @update:search="emit('update:search', $event)"
+        @toggle-show-reserved="handleToggleShowReserved"
+        @install="emit('install')"
+        @update-all="emit('update-all')"
+      />
+    </div>
+
+    <div ref="mainRef" class="mod-manager-layout__main d-flex flex-grow-1" style="min-height: 0">
+      <ResizableSplitPane
+        v-model="mainSplitRatio"
+        direction="horizontal"
+        :min-ratio="0.125"
+        :max-ratio="0.875"
+        class="mod-manager-layout__split"
+      >
+        <template #first>
+          <div ref="leftRef" class="mod-manager-layout__left">
+            <PluginDualList
+              :plugins="plugins"
+              :selected-plugin-name="selectedPluginName"
+
+              :loading="loading"
+              @select-plugin="handleSelectPlugin"
+              @update:selectedInactive="selectedInactiveNames = $event"
+              @update:selectedActive="selectedActiveNames = $event"
+              @action-enable="emit('action-enable', $event)"
+              @action-disable="emit('action-disable', $event)"
+              @batch-enable="emit('batch-enable', $event)"
+              @batch-disable="emit('batch-disable', $event)"
+              @batch-update="emit('batch-update', $event)"
+              @batch-uninstall="emit('batch-uninstall', $event)"
+              @action-configure="handleActionConfigure"
+              @action-open-readme="handleActionOpenReadme"
+              @action-reload="emit('action-reload', $event)"
+              @action-update="emit('action-update', $event)"
+              @action-uninstall="emit('action-uninstall', $event)"
+              @action-open-repo="emit('action-open-repo', $event)"
+            />
+          </div>
+        </template>
+
+        <template #second>
+          <div ref="rightRef" class="mod-manager-layout__right">
+            <PluginWorkspace
+              :plugins="plugins"
+              :selected-plugin-name="selectedPluginName"
+              :split-ratio="rightPaneRatio"
+              :show-reserved="showReserved"
+              @update:splitRatio="rightPaneRatio = $event"
+              @select-plugin="handleSelectPlugin"
+              @action-update="emit('action-update', $event)"
+              @config-saved="emit('config-saved', $event)"
+            />
+          </div>
+        </template>
+      </ResizableSplitPane>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+.mod-manager-layout {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.mod-manager-layout__top {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  padding: 0 8px 12px;
+}
+
+.mod-manager-layout__main {
+  padding: 0 8px;
+  align-items: stretch;
+}
+
+.mod-manager-layout__split {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.mod-manager-layout__left {
+  min-width: 190px;
+  min-height: 0;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+}
+
+.mod-manager-layout__right {
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+}
+
+.mod-manager-layout__left :deep(.plugin-dual-list) {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.mod-manager-layout__right :deep(.plugin-workspace) {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/ModTopToolbar.vue b/dashboard/src/components/extension/mod-manager/ModTopToolbar.vue
new file mode 100644
index 0000000000..f967297577
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/ModTopToolbar.vue
@@ -0,0 +1,149 @@
+<template>
+  <v-toolbar
+    class="mod-top-toolbar"
+    color="surface"
+    density="compact"
+    height="60"
+    elevation="1"
+  >
+    <v-spacer />
+
+    <!-- Right: Reserved toggle + Actions -->
+    <div class="mod-top-toolbar__right d-flex align-center ga-2">
+      <v-switch
+        class="mod-top-toolbar__toggle"
+        :model-value="props.showReserved"
+        density="compact"
+        hide-details
+        inset
+        :label="props.showReserved ? tm('buttons.hideSystemPlugins') : tm('buttons.showSystemPlugins')"
+        @update:model-value="emit('toggle-show-reserved')"
+      />
+
+      <v-btn
+        size="small"
+        variant="tonal"
+        color="primary"
+        prepend-icon="mdi-plus"
+        @click="emit('install')"
+      >
+        {{ tm('buttons.install') }}
+      </v-btn>
+
+      <v-badge
+        :content="props.updatableCount"
+        :model-value="props.updatableCount > 0"
+        color="warning"
+        location="top end"
+        offset-x="2"
+        offset-y="2"
+      >
+        <v-btn
+          size="small"
+          variant="tonal"
+          color="warning"
+          prepend-icon="mdi-download-multiple"
+          :loading="isUpdatingAll"
+          :disabled="isUpdatingAll || props.updatableCount <= 0"
+          @click="emit('update-all')"
+        >
+          {{ tm('buttons.updateAll') }}
+        </v-btn>
+      </v-badge>
+
+      <!-- Failed plugin load info (extension_data.message) -->
+      <v-dialog v-if="hasFailedMessage" max-width="500px">
+        <template #activator="{ props: activatorProps }">
+          <v-btn
+            v-bind="activatorProps"
+            data-testid="failed-message-alert"
+            aria-label="插件加载失败"
+            icon
+            size="small"
+            color="error"
+            variant="tonal"
+            class="mod-top-toolbar__alert"
+          >
+            <v-icon size="20" color="error">mdi-alert-circle</v-icon>
+            <v-tooltip activator="parent" location="top">{{ tm('dialogs.error.title') }}</v-tooltip>
+          </v-btn>
+        </template>
+
+        <template #default="{ isActive }">
+          <v-card class="rounded-lg">
+            <v-card-title class="headline d-flex align-center">
+              <v-icon color="error" class="mr-2">mdi-alert-circle</v-icon>
+              {{ tm('dialogs.error.title') }}
+            </v-card-title>
+            <v-card-text>
+              <p class="text-body-1">{{ failedMessageText }}</p>
+              <p class="text-caption mt-2">{{ tm('dialogs.error.checkConsole') }}</p>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="primary" @click="isActive.value = false">{{ tm('buttons.close') }}</v-btn>
+            </v-card-actions>
+          </v-card>
+        </template>
+      </v-dialog>
+
+    </div>
+  </v-toolbar>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useModuleI18n } from '@/i18n/composables'
+
+const { tm } = useModuleI18n('features/extension')
+
+const props = defineProps<{
+  search: string
+  showReserved: boolean
+  updatableCount: number
+  updatingAll?: boolean
+  failedMessage?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:search', value: string): void
+  (e: 'toggle-show-reserved'): void
+  (e: 'install'): void
+  (e: 'update-all'): void
+}>()
+
+const searchModel = computed<string>({
+  get: () => props.search ?? '',
+  set: (val) => emit('update:search', val ?? '')
+})
+
+const isUpdatingAll = computed(() => props.updatingAll ?? false)
+
+const failedMessageText = computed(() => (props.failedMessage ?? '').trim())
+const hasFailedMessage = computed(() => failedMessageText.value.length > 0)
+
+</script>
+
+<style scoped>
+.mod-top-toolbar {
+  border-radius: 14px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  overflow: visible;
+}
+
+.mod-top-toolbar :deep(.v-toolbar__content) {
+  overflow: visible;
+}
+
+.mod-top-toolbar__toggle {
+  flex: 0 0 auto;
+}
+
+.mod-top-toolbar__toggle :deep(.v-label) {
+  white-space: nowrap;
+}
+
+.mod-top-toolbar__alert {
+  flex: 0 0 auto;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/PluginBehaviorPanel.vue b/dashboard/src/components/extension/mod-manager/PluginBehaviorPanel.vue
new file mode 100644
index 0000000000..75464f9fcd
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/PluginBehaviorPanel.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PluginHandlerInfo } from './types'
+
+const props = defineProps<{
+  handlers: PluginHandlerInfo[]
+  /**
+   * 嵌入模式：用于在其他面板中作为一个分区展示。
+   * - 不强制撑满高度
+   * - 不使用 fixed-header / height=100%（避免在可滚动容器内布局异常）
+   */
+  embedded?: boolean
+}>()
+
+const headers = computed(() => [
+  { title: '事件类型', key: 'event_type_h', width: '160px' },
+  { title: '处理器名称', key: 'handler_name', width: '200px' },
+  { title: '描述', key: 'desc', minWidth: '240px' },
+  { title: '类型', key: 'type', width: '140px' },
+  { title: '命令', key: 'cmd', width: '160px' }
+])
+
+const items = computed(() => props.handlers ?? [])
+
+const title = computed(() => (props.embedded ? '行为' : '行为面板'))
+const emptyPaddingClass = computed(() => (props.embedded ? 'pa-6' : 'pa-10'))
+</script>
+
+<template>
+  <v-card
+    :class="['d-flex flex-column', props.embedded ? 'plugin-behavior-panel--embedded' : 'h-100']"
+    rounded="lg"
+    :variant="props.embedded ? 'outlined' : 'flat'"
+  >
+    <v-card-title class="d-flex align-center">
+      <div class="text-subtitle-1 font-weight-medium">{{ title }}</div>
+      <v-spacer />
+      <v-chip size="small" variant="tonal">{{ items.length }}</v-chip>
+    </v-card-title>
+
+    <v-divider />
+
+    <v-card-text class="pa-0 flex-grow-1">
+      <div v-if="items.length === 0" class="text-center" :class="emptyPaddingClass">
+        <v-icon size="64" color="info" class="mb-4">mdi-vector-link</v-icon>
+        <div class="text-h6 mb-2">该插件未注册任何处理器</div>
+      </div>
+
+      <v-data-table
+        v-else
+        :headers="headers"
+        :items="items"
+        item-value="handler_full_name"
+        hover
+        density="compact"
+        :fixed-header="!props.embedded"
+        :height="props.embedded ? undefined : '100%'"
+        hide-default-footer
+        :items-per-page="-1"
+      >
+        <template #item.desc="{ item }">
+          <div class="text-body-2 text-medium-emphasis text-truncate" style="max-width: 520px">
+            {{ item.desc }}
+          </div>
+        </template>
+
+        <template #item.type="{ item }">
+          <v-chip v-if="item.type" color="success" size="x-small" variant="tonal">
+            {{ item.type }}
+          </v-chip>
+          <span v-else class="text-medium-emphasis">—</span>
+        </template>
+
+        <template #item.cmd="{ item }">
+          <span v-if="item.cmd" class="font-weight-medium" style="font-family: monospace">
+            {{ item.cmd }}
+          </span>
+          <span v-else class="text-medium-emphasis">—</span>
+        </template>
+      </v-data-table>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/PluginChangelogPanel.vue b/dashboard/src/components/extension/mod-manager/PluginChangelogPanel.vue
new file mode 100644
index 0000000000..79fabc4cbb
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/PluginChangelogPanel.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import axios from 'axios'
+import { MarkdownRender, enableKatex, enableMermaid } from 'markstream-vue'
+import 'markstream-vue/index.css'
+import { useModuleI18n } from '@/i18n/composables'
+
+enableKatex()
+enableMermaid()
+
+const props = defineProps<{
+  pluginName: string
+  active?: boolean
+}>()
+
+const { tm } = useModuleI18n('features/extension')
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const content = ref('')
+
+const canFetch = computed(() => Boolean(props.active) && Boolean(props.pluginName))
+
+function resetState() {
+  loading.value = false
+  error.value = null
+  content.value = ''
+}
+
+async function fetchChangelog() {
+  if (!props.pluginName) return
+
+  loading.value = true
+  error.value = null
+  content.value = ''
+
+  try {
+    const res = await axios.get(`/api/plugin/changelog?name=${encodeURIComponent(props.pluginName)}`)
+    if (res.data?.status === 'ok') {
+      content.value = res.data.data?.content || ''
+    } else {
+      error.value = res.data?.message || tm('modManager.changelogPanel.errors.fetchFailed')
+    }
+  } catch (err: any) {
+    error.value = err?.message || tm('modManager.changelogPanel.errors.fetchError')
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => props.active,
+  (isActive) => {
+    if (isActive && props.pluginName) {
+      fetchChangelog()
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.pluginName,
+  (name) => {
+    if (props.active && name) {
+      fetchChangelog()
+    } else {
+      resetState()
+    }
+  }
+)
+</script>
+
+<template>
+  <v-card class="h-100 d-flex flex-column" rounded="lg" variant="flat">
+    <v-card-title class="d-flex align-center ga-2">
+      <div class="text-subtitle-1 font-weight-medium">{{ tm('modManager.panelTabs.changelog') }}</div>
+    </v-card-title>
+
+    <v-divider />
+
+    <v-card-text class="pa-0 flex-grow-1">
+      <div class="changelog-scroll">
+        <div v-if="loading" class="d-flex flex-column align-center justify-center" style="height: 100%">
+          <v-progress-circular indeterminate color="primary" size="56" class="mb-3" />
+          <div class="text-body-2 text-medium-emphasis">{{ tm('modManager.changelogPanel.loading') }}</div>
+        </div>
+
+        <div v-else-if="error" class="d-flex flex-column align-center justify-center pa-6" style="height: 100%">
+          <v-icon size="64" color="error" class="mb-4">mdi-alert-circle-outline</v-icon>
+          <div class="text-body-1 text-center mb-4">{{ error }}</div>
+          <v-btn color="primary" variant="tonal" @click="fetchChangelog">
+            {{ tm('modManager.changelogPanel.actions.retry') }}
+          </v-btn>
+        </div>
+
+        <div v-else-if="content" class="changelog-scroll__content">
+          <div class="changelog-scroll__container markdown-body">
+            <MarkdownRender :content="content" />
+          </div>
+        </div>
+
+        <div v-else class="d-flex flex-column align-center justify-center pa-6" style="height: 100%">
+          <v-icon size="64" color="warning" class="mb-4">mdi-file-question-outline</v-icon>
+          <p class="text-body-1 text-center mb-0">
+            {{ tm('modManager.changelogPanel.empty.title') }}<br />
+            {{ tm('modManager.changelogPanel.empty.subtitle') }}
+          </p>
+        </div>
+
+        <div v-if="!canFetch" class="d-none" />
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.changelog-scroll {
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.changelog-scroll__container {
+  margin: 0 auto;
+  padding: 32px;
+}
+
+.changelog-scroll__content {
+  min-height: 100%;
+}
+
+@media (max-width: 767px) {
+  .changelog-scroll__container {
+    padding: 16px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/PluginConfigPanel.vue b/dashboard/src/components/extension/mod-manager/PluginConfigPanel.vue
new file mode 100644
index 0000000000..6517d770f2
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/PluginConfigPanel.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import AstrBotConfig from '@/components/shared/AstrBotConfig.vue'
+import { usePluginConfigCache } from '@/composables/usePluginConfigCache'
+
+const props = defineProps<{
+  pluginName: string
+  active?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'saved', pluginName: string): void
+  (e: 'error', message: string): void
+}>()
+
+const cache = usePluginConfigCache()
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+const draftMetadata = ref<Record<string, any> | null>(null)
+const draftConfig = ref<Record<string, any> | null>(null)
+const originalConfig = ref<Record<string, any> | null>(null)
+
+const isDirty = computed(() => {
+  if (!draftConfig.value || !originalConfig.value) return false
+  return JSON.stringify(draftConfig.value) !== JSON.stringify(originalConfig.value)
+})
+
+function deepClone<T>(value: T): T {
+  if (typeof structuredClone === 'function') {
+    return structuredClone(value)
+  }
+  return JSON.parse(JSON.stringify(value)) as T
+}
+
+const canLoad = computed(() => Boolean(props.pluginName) && Boolean(props.active))
+
+async function loadFromCache() {
+  if (!props.pluginName) return
+  loading.value = true
+  error.value = null
+  try {
+    const entry = await cache.getOrFetch(props.pluginName)
+    const configClone = deepClone(entry.config || {})
+    const metadataClone = deepClone(entry.metadata || {})
+    draftConfig.value = configClone
+    originalConfig.value = deepClone(configClone)
+    draftMetadata.value = metadataClone
+  } catch (err: any) {
+    const message = err?.message || String(err)
+    error.value = message
+    emit('error', message)
+  } finally {
+    loading.value = false
+  }
+}
+
+function resetDraft() {
+  if (!originalConfig.value) return
+  draftConfig.value = deepClone(originalConfig.value)
+}
+
+async function saveDraft() {
+  if (!props.pluginName || !draftConfig.value) return
+  loading.value = true
+  error.value = null
+  try {
+    await cache.updateConfig(props.pluginName, draftConfig.value)
+    originalConfig.value = deepClone(draftConfig.value)
+    emit('saved', props.pluginName)
+  } catch (err: any) {
+    const message = err?.message || String(err)
+    error.value = message
+    emit('error', message)
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => props.active,
+  (isActive) => {
+    if (isActive && props.pluginName) {
+      loadFromCache()
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.pluginName,
+  (name) => {
+    if (props.active && name) {
+      loadFromCache()
+    } else {
+      draftMetadata.value = null
+      draftConfig.value = null
+      originalConfig.value = null
+      error.value = null
+      loading.value = false
+    }
+  }
+)
+</script>
+
+<template>
+  <v-card class="h-100 d-flex flex-column" rounded="lg" variant="flat">
+    <v-card-title class="d-flex align-center ga-3">
+      <div class="text-subtitle-1 font-weight-medium">插件配置</div>
+      <v-spacer />
+
+      <v-btn
+        color="primary"
+        variant="flat"
+        :disabled="!draftConfig || !draftMetadata || !isDirty"
+        :loading="loading"
+        @click="saveDraft"
+      >
+        保存
+      </v-btn>
+
+      <v-btn
+        variant="text"
+        :disabled="!draftConfig || !isDirty || loading"
+        @click="resetDraft"
+      >
+        取消
+      </v-btn>
+    </v-card-title>
+
+    <v-divider />
+
+    <v-progress-linear v-if="loading" indeterminate color="primary" />
+
+    <v-card-text class="pa-0 flex-grow-1 d-flex flex-column" style="min-height: 0">
+      <div v-if="error" class="pa-6">
+        <v-alert type="error" variant="tonal" class="mb-4">
+          {{ error }}
+        </v-alert>
+        <v-btn color="primary" variant="tonal" @click="loadFromCache">
+          重试
+        </v-btn>
+      </div>
+
+      <div v-else class="config-scroll">
+        <div v-if="draftMetadata && draftConfig" class="pa-4">
+          <AstrBotConfig
+            :metadata="draftMetadata"
+            :iterable="draftConfig"
+            :metadataKey="pluginName"
+            :is-editing="true"
+          />
+        </div>
+
+        <div v-else class="pa-6 text-center text-medium-emphasis">
+          <v-icon size="56" class="mb-2">mdi-cog-outline</v-icon>
+          <div class="text-body-1">暂无可用配置</div>
+        </div>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.config-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/PluginDualList.vue b/dashboard/src/components/extension/mod-manager/PluginDualList.vue
new file mode 100644
index 0000000000..11c67b5054
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/PluginDualList.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { PluginSummary } from './types'
+import ResizableSplitPane from './ResizableSplitPane.vue'
+import PluginListTable from './PluginListTable.vue'
+
+const LIST_SPLIT_RATIO_KEY = 'pluginManager.dualListRatio'
+
+function parseStoredRatio(raw: string | null): number | null {
+  if (!raw) return null
+  const num = Number(raw)
+  if (!Number.isFinite(num)) return null
+  if (num <= 0 || num >= 1) return null
+  return num
+}
+
+const props = defineProps<{
+  plugins: PluginSummary[]
+  selectedPluginName: string | null
+
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'select-plugin', name: string): void
+  (e: 'update:selectedInactive', names: string[]): void
+  (e: 'update:selectedActive', names: string[]): void
+  (e: 'action-enable', plugin: PluginSummary): void
+  (e: 'action-disable', plugin: PluginSummary): void
+  (e: 'action-configure', plugin: PluginSummary): void
+  (e: 'action-open-readme', plugin: PluginSummary): void
+  (e: 'action-reload', name: string): void
+  (e: 'action-update', name: string): void
+  (e: 'action-uninstall', name: string): void
+  (e: 'action-open-repo', url: string): void
+  (e: 'batch-enable', plugins: PluginSummary[]): void
+  (e: 'batch-disable', plugins: PluginSummary[]): void
+  (e: 'batch-update', names: string[]): void
+  (e: 'batch-uninstall', names: string[]): void
+}>()
+
+const selectedInactiveNames = ref<string[]>([])
+const selectedActiveNames = ref<string[]>([])
+
+const splitRatio = ref(parseStoredRatio(localStorage.getItem(LIST_SPLIT_RATIO_KEY)) ?? 0.5)
+
+watch(
+  splitRatio,
+  (val) => {
+    if (!Number.isFinite(val)) return
+    localStorage.setItem(LIST_SPLIT_RATIO_KEY, String(val))
+  },
+  { flush: 'post' }
+)
+
+watch(
+  selectedInactiveNames,
+  (val) => emit('update:selectedInactive', val ?? []),
+  { deep: true }
+)
+watch(
+  selectedActiveNames,
+  (val) => emit('update:selectedActive', val ?? []),
+  { deep: true }
+)
+
+const inactivePlugins = computed(() => (props.plugins ?? []).filter((p) => !p.activated))
+const activePlugins = computed(() => (props.plugins ?? []).filter((p) => p.activated))
+
+const handleRowClick = (name: string) => emit('select-plugin', name)
+
+const handlePrimaryInactive = (plugin: PluginSummary) => emit('action-enable', plugin)
+const handlePrimaryActive = (plugin: PluginSummary) => emit('action-disable', plugin)
+</script>
+
+<template>
+  <div class="plugin-dual-list">
+    <ResizableSplitPane
+      v-model="splitRatio"
+      direction="vertical"
+      :min-ratio="0.15"
+      :max-ratio="0.85"
+    >
+      <template #first>
+        <div class="plugin-dual-list__pane">
+          <PluginListTable
+            title="已激活插件"
+            mode="active"
+            :items="activePlugins"
+            :selected-names="selectedActiveNames"
+            :selected-plugin-name="selectedPluginName"
+
+            :loading="loading"
+            @update:selected-names="selectedActiveNames = $event"
+            @row-click="handleRowClick"
+            @action-primary="handlePrimaryActive"
+            @batch-primary="emit('batch-disable', $event)"
+            @batch-update="emit('batch-update', $event)"
+            @batch-uninstall="emit('batch-uninstall', $event)"
+            @clear-selection="selectedActiveNames = []"
+            @action-configure="emit('action-configure', $event)"
+            @action-open-readme="emit('action-open-readme', $event)"
+            @action-reload="emit('action-reload', $event)"
+            @action-update="emit('action-update', $event)"
+            @action-uninstall="emit('action-uninstall', $event)"
+            @action-open-repo="emit('action-open-repo', $event)"
+          />
+        </div>
+      </template>
+
+      <template #second>
+        <div class="plugin-dual-list__pane">
+          <PluginListTable
+            title="未激活插件"
+            mode="inactive"
+            :items="inactivePlugins"
+            :selected-names="selectedInactiveNames"
+            :selected-plugin-name="selectedPluginName"
+
+            :loading="loading"
+            @update:selected-names="selectedInactiveNames = $event"
+            @row-click="handleRowClick"
+            @action-primary="handlePrimaryInactive"
+            @batch-primary="emit('batch-enable', $event)"
+            @batch-update="emit('batch-update', $event)"
+            @batch-uninstall="emit('batch-uninstall', $event)"
+            @clear-selection="selectedInactiveNames = []"
+            @action-configure="emit('action-configure', $event)"
+            @action-open-readme="emit('action-open-readme', $event)"
+            @action-reload="emit('action-reload', $event)"
+            @action-update="emit('action-update', $event)"
+            @action-uninstall="emit('action-uninstall', $event)"
+            @action-open-repo="emit('action-open-repo', $event)"
+          />
+        </div>
+      </template>
+    </ResizableSplitPane>
+  </div>
+</template>
+
+<style scoped>
+.plugin-dual-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.plugin-dual-list__pane {
+  height: 100%;
+  min-height: 0;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/PluginInfoPanel.vue b/dashboard/src/components/extension/mod-manager/PluginInfoPanel.vue
new file mode 100644
index 0000000000..27abc5e6c6
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/PluginInfoPanel.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PluginSummary } from './types'
+
+import PluginBehaviorPanel from './PluginBehaviorPanel.vue'
+
+const props = defineProps<{
+  plugin: PluginSummary
+}>()
+
+const emit = defineEmits<{
+  (e: 'action-update'): void
+  (e: 'open-repo', url: string): void
+}>()
+
+const displayTitle = computed(() => props.plugin.display_name || props.plugin.name)
+
+const hasLogo = computed(() => Boolean(props.plugin.logo))
+
+const statusChips = computed(() => {
+  const chips: Array<{ text: string; color: string }> = []
+  chips.push({
+    text: props.plugin.activated ? '已启用' : '已停用',
+    color: props.plugin.activated ? 'success' : 'warning'
+  })
+
+  if (props.plugin.reserved) {
+    chips.push({ text: '系统插件', color: 'primary' })
+  }
+
+  if (props.plugin.has_update) {
+    chips.push({ text: '有更新', color: 'warning' })
+  }
+
+  return chips
+})
+
+const handlers = computed(() => props.plugin.handlers ?? [])
+
+const handleOpenRepo = () => {
+  if (!props.plugin.repo) return
+  emit('open-repo', props.plugin.repo)
+}
+</script>
+
+<template>
+  <v-card class="h-100 d-flex flex-column" rounded="lg" variant="flat">
+    <v-card-title class="d-flex align-start justify-space-between ga-4">
+      <div class="d-flex ga-4" style="min-width: 0">
+        <v-avatar size="56" rounded="lg" class="plugin-avatar">
+          <v-img v-if="hasLogo" :src="plugin.logo || ''" cover />
+          <v-icon v-else size="30">mdi-puzzle-outline</v-icon>
+        </v-avatar>
+
+        <div class="flex-grow-1" style="min-width: 0">
+          <div class="d-flex align-center flex-wrap ga-2" style="min-width: 0">
+            <div class="text-h6 text-truncate" style="max-width: 520px">
+              {{ displayTitle }}
+            </div>
+
+            <v-chip
+              v-for="chip in statusChips"
+              :key="chip.text"
+              :color="chip.color"
+              size="small"
+              variant="tonal"
+              class="font-weight-medium"
+            >
+              {{ chip.text }}
+            </v-chip>
+          </div>
+
+          <div class="text-caption text-medium-emphasis text-truncate" style="max-width: 720px">
+            {{ plugin.name }}
+          </div>
+        </div>
+      </div>
+
+      <div class="d-flex align-center ga-2">
+        <v-btn
+          v-if="plugin.repo"
+          icon
+          size="small"
+          variant="text"
+          @click="handleOpenRepo"
+        >
+          <v-icon size="20">mdi-github</v-icon>
+          <v-tooltip activator="parent" location="top">打开仓库</v-tooltip>
+        </v-btn>
+      </div>
+    </v-card-title>
+
+    <v-card-text class="pt-0 flex-grow-1 d-flex flex-column" style="min-height: 0">
+      <div>
+        <v-row dense>
+          <v-col cols="12" md="6">
+            <div class="text-caption text-medium-emphasis mb-1">版本</div>
+            <div class="text-body-2">{{ plugin.version }}</div>
+          </v-col>
+
+          <v-col cols="12" md="6">
+            <div class="text-caption text-medium-emphasis mb-1">作者</div>
+            <div class="text-body-2">{{ plugin.author }}</div>
+          </v-col>
+
+          <v-col cols="12">
+            <div class="text-caption text-medium-emphasis mb-1">描述</div>
+            <div class="text-body-2 description">{{ plugin.desc || '—' }}</div>
+          </v-col>
+        </v-row>
+
+        <v-divider class="my-4" />
+
+        <div class="d-flex align-center flex-wrap ga-2">
+          <v-btn
+            v-if="plugin.has_update"
+            color="warning"
+            prepend-icon="mdi-download"
+            variant="tonal"
+            @click="emit('action-update')"
+          >
+            更新
+          </v-btn>
+        </div>
+
+        <v-divider class="my-4" />
+      </div>
+
+      <div class="plugin-info-panel__behavior flex-grow-1" style="min-height: 0">
+        <PluginBehaviorPanel :handlers="handlers" embedded />
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.plugin-avatar {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.plugin-info-panel__behavior {
+  overflow-y: auto;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/PluginListTable.vue b/dashboard/src/components/extension/mod-manager/PluginListTable.vue
new file mode 100644
index 0000000000..a8a4fea20e
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/PluginListTable.vue
@@ -0,0 +1,750 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { PluginSummary } from './types'
+import { useModuleI18n } from '@/i18n/composables'
+
+const { tm } = useModuleI18n('features/extension')
+
+type Mode = 'inactive' | 'active'
+
+const props = defineProps<{
+  title: string
+  items: PluginSummary[]
+  selectedNames: string[]
+  selectedPluginName: string | null
+  mode: Mode
+
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:selectedNames', names: string[]): void
+  (e: 'row-click', name: string): void
+  (e: 'action-primary', plugin: PluginSummary): void
+
+  (e: 'batch-primary', plugins: PluginSummary[]): void
+  (e: 'batch-update', names: string[]): void
+  (e: 'batch-uninstall', names: string[]): void
+  (e: 'clear-selection'): void
+
+  (e: 'action-configure', plugin: PluginSummary): void
+  (e: 'action-open-readme', plugin: PluginSummary): void
+  (e: 'action-reload', name: string): void
+  (e: 'action-update', name: string): void
+  (e: 'action-uninstall', name: string): void
+  (e: 'action-open-repo', url: string): void
+}>()
+
+const selectionModel = computed<string[]>({
+  get: () => props.selectedNames ?? [],
+  set: (val) => emit('update:selectedNames', val ?? [])
+})
+
+const primaryAction = computed(() => {
+  if (props.mode === 'inactive') {
+    return {
+      color: 'success',
+      icon: 'mdi-play-circle-outline',
+      tooltip: '启用'
+    }
+  }
+  return {
+    color: 'error',
+    icon: 'mdi-stop-circle-outline',
+    tooltip: '停用'
+  }
+})
+
+const headers = computed(() => [
+  { title: tm('table.headers.index'), key: 'index', sortable: false, width: '48px' },
+  { title: '', key: 'data-table-select', sortable: false, width: '32px' },
+  { title: '插件', key: 'name', minWidth: '160px' }
+])
+
+const pluginCount = computed(() => props.items?.length ?? 0)
+
+const indexByName = computed(() => {
+  const map = new Map<string, number>()
+  for (const [idx, plugin] of (props.items ?? []).entries()) {
+    map.set(plugin.name, idx)
+  }
+  return map
+})
+
+const selectedPlugins = computed<PluginSummary[]>(() => {
+  const names = new Set(props.selectedNames ?? [])
+  return (props.items ?? []).filter((p) => names.has(p.name))
+})
+
+const updatableSelectedNames = computed(() =>
+  selectedPlugins.value.filter((p) => Boolean(p.has_update)).map((p) => p.name)
+)
+
+const uninstallableSelectedNames = computed(() =>
+  selectedPlugins.value.filter((p) => !p.reserved).map((p) => p.name)
+)
+
+const batchLabel = computed(() => (props.mode === 'inactive' ? '批量激活' : '批量停用'))
+const batchIcon = computed(() => (props.mode === 'inactive' ? 'mdi-play' : 'mdi-pause'))
+const batchColor = computed(() => (props.mode === 'inactive' ? 'success' : 'warning'))
+
+const handleBatchPrimary = () => {
+  emit('batch-primary', selectedPlugins.value)
+}
+
+const handleBatchUpdate = () => {
+  const names = updatableSelectedNames.value
+  if (names.length === 0) return
+  emit('batch-update', names)
+}
+
+const showUninstallDialog = ref(false)
+const pendingUninstallNames = ref<string[]>([])
+
+const openBatchUninstallConfirm = () => {
+  pendingUninstallNames.value = uninstallableSelectedNames.value
+  showUninstallDialog.value = true
+}
+
+const confirmBatchUninstall = () => {
+  const names = pendingUninstallNames.value
+  showUninstallDialog.value = false
+  if (names.length === 0) return
+  emit('batch-uninstall', names)
+}
+
+const handleClearSelection = () => emit('clear-selection')
+
+const titleBarRef = ref<HTMLElement | null>(null)
+const titleMetaRef = ref<HTMLElement | null>(null)
+const secondaryMeasureRef = ref<HTMLElement | null>(null)
+
+const resolveElement = (value: unknown): HTMLElement | null => {
+  const candidate = value as any
+  if (candidate instanceof HTMLElement) return candidate
+  if (candidate?.$el instanceof HTMLElement) return candidate.$el
+  return null
+}
+
+const showInlinePrimary = ref(true)
+const showInlineBatchUpdate = ref(true)
+const showInlineBatchUninstall = ref(true)
+const showInlineClearSelection = ref(true)
+
+const showSecondaryMenu = computed(
+  () =>
+    !showInlinePrimary.value ||
+    !showInlineBatchUpdate.value ||
+    !showInlineBatchUninstall.value ||
+    !showInlineClearSelection.value
+)
+
+const getMeasuredWidth = (key: string): number => {
+  const root = resolveElement(secondaryMeasureRef.value)
+  if (!root) return 0
+  const el = root.querySelector(`[data-measure="${key}"]`) as HTMLElement | null
+  if (!el) return 0
+  return el.getBoundingClientRect().width
+}
+
+const recomputeSecondaryActions = () => {
+  const titleBar = resolveElement(titleBarRef.value)
+  const titleMeta = resolveElement(titleMetaRef.value)
+  const secondaryMeasure = resolveElement(secondaryMeasureRef.value)
+
+  if (!titleBar || !titleMeta || !secondaryMeasure) {
+    showInlinePrimary.value = false
+    showInlineBatchUpdate.value = false
+    showInlineBatchUninstall.value = false
+    showInlineClearSelection.value = false
+    return
+  }
+
+  const available = titleBar.clientWidth
+  const left = Math.max(titleMeta.getBoundingClientRect().width, titleMeta.scrollWidth)
+
+  const wPrimary = getMeasuredWidth('batch-primary')
+  const wUpdate = getMeasuredWidth('batch-update')
+  const wUninstall = getMeasuredWidth('batch-uninstall')
+  const wClear = getMeasuredWidth('clear-selection')
+  const wMenu = getMeasuredWidth('more-menu')
+
+  const basePadding = 24
+
+  const calcRequired = (opts: {
+    primary: boolean
+    update: boolean
+    uninstall: boolean
+    clear: boolean
+  }): number => {
+    const inlineWidth =
+      (opts.primary ? wPrimary : 0) +
+      (opts.update ? wUpdate : 0) +
+      (opts.uninstall ? wUninstall : 0) +
+      (opts.clear ? wClear : 0)
+
+    const needsMenu = !opts.primary || !opts.update || !opts.uninstall || !opts.clear
+    return left + inlineWidth + (needsMenu ? wMenu : 0) + basePadding
+  }
+
+  // 标题永远不截断；空间不够时继续折叠按钮（先清理、再卸载、再更新、最后才折叠主按钮）
+  let opts = { primary: true, update: true, uninstall: true, clear: true }
+  if (calcRequired(opts) <= available) {
+    showInlinePrimary.value = opts.primary
+    showInlineBatchUpdate.value = opts.update
+    showInlineBatchUninstall.value = opts.uninstall
+    showInlineClearSelection.value = opts.clear
+    return
+  }
+
+  opts = { primary: true, update: true, uninstall: true, clear: false }
+  if (calcRequired(opts) <= available) {
+    showInlinePrimary.value = opts.primary
+    showInlineBatchUpdate.value = opts.update
+    showInlineBatchUninstall.value = opts.uninstall
+    showInlineClearSelection.value = opts.clear
+    return
+  }
+
+  opts = { primary: true, update: true, uninstall: false, clear: false }
+  if (calcRequired(opts) <= available) {
+    showInlinePrimary.value = opts.primary
+    showInlineBatchUpdate.value = opts.update
+    showInlineBatchUninstall.value = opts.uninstall
+    showInlineClearSelection.value = opts.clear
+    return
+  }
+
+  opts = { primary: true, update: false, uninstall: false, clear: false }
+  if (calcRequired(opts) <= available) {
+    showInlinePrimary.value = opts.primary
+    showInlineBatchUpdate.value = opts.update
+    showInlineBatchUninstall.value = opts.uninstall
+    showInlineClearSelection.value = opts.clear
+    return
+  }
+
+  opts = { primary: false, update: false, uninstall: false, clear: false }
+  showInlinePrimary.value = opts.primary
+  showInlineBatchUpdate.value = opts.update
+  showInlineBatchUninstall.value = opts.uninstall
+  showInlineClearSelection.value = opts.clear
+}
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  resizeObserver = new ResizeObserver(() => {
+    recomputeSecondaryActions()
+  })
+  const el = resolveElement(titleBarRef.value)
+  if (el) {
+    resizeObserver.observe(el)
+  }
+  void nextTick(() => recomputeSecondaryActions())
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+})
+
+watch(
+  () => [selectedPlugins.value.length, updatableSelectedNames.value.length, uninstallableSelectedNames.value.length],
+  () => nextTick(() => recomputeSecondaryActions()),
+  { flush: 'post' }
+)
+
+const getOnlineVersion = (plugin: PluginSummary): string | null => {
+  return (plugin.online_version || plugin.online_vesion || null) as string | null
+}
+
+
+
+const isUpgradable = (plugin: PluginSummary) => Boolean(plugin.has_update && getOnlineVersion(plugin))
+
+const shouldIgnoreRowClick = (target: EventTarget | null): boolean => {
+  const el = target as HTMLElement | null
+  if (!el) return false
+
+  return Boolean(
+    el.closest(
+      [
+        'button',
+        'a',
+        '[role="button"]',
+        '.v-btn',
+        '.v-btn-group',
+        '.v-selection-control',
+        '.v-checkbox',
+        '.v-input',
+        '.v-field',
+        '.v-icon'
+      ].join(',')
+    )
+  )
+}
+
+const handleRowClick = (pluginName: string, event: MouseEvent) => {
+  if (shouldIgnoreRowClick(event.target)) return
+  emit('row-click', pluginName)
+}
+
+const getRowProps = ({ item }: { item: PluginSummary }) => {
+  const classes: string[] = ['plugin-row']
+  if (props.selectedPluginName && item.name === props.selectedPluginName) {
+    classes.push('plugin-selected-row')
+  }
+
+
+  return {
+    class: classes.join(' '),
+    'data-plugin-name': item.name,
+    onClick: (e: MouseEvent) => handleRowClick(item.name, e)
+  }
+}
+</script>
+
+<template>
+  <v-card class="rounded-lg overflow-hidden elevation-0 plugin-list-table d-flex flex-column">
+    <v-card-title ref="titleBarRef" class="d-flex align-center py-3 px-4 plugin-list-table__title">
+      <div ref="titleMetaRef" class="d-flex align-center flex-shrink-0">
+        <span class="text-subtitle-1 font-weight-medium">{{ title }}</span>
+        <v-chip size="small" class="ml-2">{{ pluginCount }}</v-chip>
+      </div>
+
+      <v-spacer />
+
+      <span v-if="showInlinePrimary" class="d-flex">
+        <v-btn
+          :color="batchColor"
+          size="small"
+          variant="tonal"
+          :disabled="selectedPlugins.length === 0"
+          @click.stop="handleBatchPrimary"
+        >
+          <v-icon start size="18">{{ batchIcon }}</v-icon>
+          {{ batchLabel }}
+          <span v-if="selectedPlugins.length" class="ml-1">({{ selectedPlugins.length }})</span>
+        </v-btn>
+      </span>
+
+      <!-- 仅用于测量宽度：不参与布局（与实际展示按钮一致） -->
+      <div ref="secondaryMeasureRef" class="plugin-list-table__secondary-measure d-flex align-center ga-1 ml-1">
+        <span data-measure="batch-primary" class="d-flex">
+          <v-btn
+            :color="batchColor"
+            size="small"
+            variant="tonal"
+            :disabled="selectedPlugins.length === 0"
+          >
+            <v-icon start size="18">{{ batchIcon }}</v-icon>
+            {{ batchLabel }}
+            <span v-if="selectedPlugins.length" class="ml-1">({{ selectedPlugins.length }})</span>
+          </v-btn>
+        </span>
+
+        <span data-measure="batch-update" class="d-flex">
+          <v-btn
+            size="small"
+            variant="tonal"
+            color="warning"
+            prepend-icon="mdi-update"
+          >
+            批量更新
+            <span v-if="updatableSelectedNames.length" class="ml-1">({{ updatableSelectedNames.length }})</span>
+          </v-btn>
+        </span>
+
+        <span data-measure="batch-uninstall" class="d-flex">
+          <v-btn
+            size="small"
+            variant="tonal"
+            color="error"
+            prepend-icon="mdi-delete"
+          >
+            批量卸载
+            <span v-if="uninstallableSelectedNames.length" class="ml-1">({{ uninstallableSelectedNames.length }})</span>
+          </v-btn>
+        </span>
+
+        <span data-measure="clear-selection" class="d-flex">
+          <v-btn
+            size="small"
+            variant="tonal"
+            color="grey"
+            prepend-icon="mdi-close"
+          >
+            取消选择
+          </v-btn>
+        </span>
+
+        <span data-measure="more-menu" class="d-flex">
+          <v-btn icon size="small" variant="text">
+            <v-icon size="20">mdi-dots-vertical</v-icon>
+          </v-btn>
+        </span>
+      </div>
+
+      <div
+        v-if="showInlineBatchUpdate || showInlineBatchUninstall || showInlineClearSelection"
+        class="d-flex align-center ga-1 ml-1"
+      >
+        <v-btn
+          v-if="showInlineBatchUpdate"
+          size="small"
+          variant="tonal"
+          color="warning"
+          prepend-icon="mdi-update"
+          :disabled="updatableSelectedNames.length === 0"
+          @click.stop="handleBatchUpdate"
+        >
+          批量更新
+          <span v-if="updatableSelectedNames.length" class="ml-1">({{ updatableSelectedNames.length }})</span>
+        </v-btn>
+
+        <v-btn
+          v-if="showInlineBatchUninstall"
+          size="small"
+          variant="tonal"
+          color="error"
+          prepend-icon="mdi-delete"
+          :disabled="uninstallableSelectedNames.length === 0"
+          @click.stop="openBatchUninstallConfirm"
+        >
+          批量卸载
+          <span v-if="uninstallableSelectedNames.length" class="ml-1">({{ uninstallableSelectedNames.length }})</span>
+        </v-btn>
+
+        <v-btn
+          v-if="showInlineClearSelection"
+          size="small"
+          variant="tonal"
+          color="grey"
+          prepend-icon="mdi-close"
+          :disabled="selectedPlugins.length === 0"
+          @click.stop="handleClearSelection"
+        >
+          取消选择
+        </v-btn>
+      </div>
+
+      <v-menu v-if="showSecondaryMenu" location="bottom end" offset="6">
+        <template #activator="{ props: menuProps }">
+          <v-btn v-bind="menuProps" icon size="small" variant="text" class="ml-1" aria-label="more-batch">
+            <v-icon size="20">mdi-dots-vertical</v-icon>
+          </v-btn>
+        </template>
+
+        <v-list density="compact" nav class="pa-1">
+          <v-list-item
+            v-if="!showInlinePrimary"
+            :disabled="selectedPlugins.length === 0"
+            @click="handleBatchPrimary"
+          >
+            <template #prepend>
+              <v-icon size="18">{{ batchIcon }}</v-icon>
+            </template>
+            <v-list-item-title>
+              {{ batchLabel }}
+              <span v-if="selectedPlugins.length" class="text-medium-emphasis">
+                ({{ selectedPlugins.length }})
+              </span>
+            </v-list-item-title>
+          </v-list-item>
+
+          <v-divider v-if="!showInlinePrimary && (!showInlineBatchUpdate || !showInlineBatchUninstall || !showInlineClearSelection)" class="my-1" />
+
+          <v-list-item
+            v-if="!showInlineBatchUpdate"
+            :disabled="updatableSelectedNames.length === 0"
+            @click="handleBatchUpdate"
+          >
+            <template #prepend>
+              <v-icon size="18">mdi-update</v-icon>
+            </template>
+            <v-list-item-title>
+              批量更新
+              <span v-if="updatableSelectedNames.length" class="text-medium-emphasis">
+                ({{ updatableSelectedNames.length }})
+              </span>
+            </v-list-item-title>
+          </v-list-item>
+
+          <v-list-item
+            v-if="!showInlineBatchUninstall"
+            :disabled="uninstallableSelectedNames.length === 0"
+            @click="openBatchUninstallConfirm"
+          >
+            <template #prepend>
+              <v-icon size="18" color="error">mdi-delete</v-icon>
+            </template>
+            <v-list-item-title>
+              批量卸载
+              <span v-if="uninstallableSelectedNames.length" class="text-medium-emphasis">
+                ({{ uninstallableSelectedNames.length }})
+              </span>
+            </v-list-item-title>
+          </v-list-item>
+
+          <v-divider v-if="!showInlineBatchUpdate || !showInlineBatchUninstall" class="my-1" />
+
+          <v-list-item v-if="!showInlineClearSelection" :disabled="selectedPlugins.length === 0" @click="handleClearSelection">
+            <template #prepend>
+              <v-icon size="18">mdi-close</v-icon>
+            </template>
+            <v-list-item-title>取消选择</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-card-title>
+
+    <v-divider />
+
+    <v-card-text class="pa-0 flex-grow-1" style="min-height: 0">
+      <v-data-table
+        v-model="selectionModel"
+        class="flex-grow-1"
+        style="min-height: 0"
+        :headers="headers"
+        :items="items"
+        :loading="loading"
+        show-select
+        item-value="name"
+        hover
+        density="compact"
+        hide-default-footer
+        fixed-header
+        height="100%"
+        :items-per-page="-1"
+        :row-props="getRowProps"
+      >
+        <template #loader>
+          <v-row class="py-8 d-flex align-center justify-center">
+            <v-progress-circular indeterminate color="primary" />
+            <span class="ml-2">加载中...</span>
+          </v-row>
+        </template>
+
+        <template #item.index="{ item }">
+          <div class="text-caption text-medium-emphasis">
+            {{ (indexByName.get(item.name) ?? 0) + 1 }}
+          </div>
+        </template>
+
+        <template #item.name="{ item }">
+          <div class="d-flex align-center ga-1 py-1" style="min-width: 0">
+            <v-avatar size="20" rounded="sm" class="plugin-mini-avatar">
+              <v-img v-if="item.logo" :src="item.logo" cover />
+              <v-icon v-else size="16">mdi-puzzle-outline</v-icon>
+            </v-avatar>
+
+            <div class="text-body-2 font-weight-medium text-truncate flex-grow-1" style="min-width: 0">
+              {{ item.display_name || item.name }}
+            </div>
+
+            <v-tooltip v-if="item.reserved" location="top">
+              <template #activator="{ props: tipProps }">
+                <v-icon v-bind="tipProps" size="16" color="primary">mdi-shield</v-icon>
+              </template>
+              <span>系统插件</span>
+            </v-tooltip>
+
+            <v-tooltip v-if="isUpgradable(item)" location="top">
+              <template #activator="{ props: tipProps }">
+                <v-btn
+                  v-bind="tipProps"
+                  icon
+                  size="x-small"
+                  color="warning"
+                  variant="text"
+                  aria-label="update-plugin"
+                  @click.stop="emit('action-update', item.name)"
+                >
+                  <v-icon size="20">mdi-alert</v-icon>
+                </v-btn>
+              </template>
+              <span>新版本：{{ getOnlineVersion(item) }}（点击更新）</span>
+            </v-tooltip>
+
+
+
+            <div class="d-flex align-center ga-1 flex-shrink-0">
+              <v-btn
+                icon
+                size="x-small"
+                :color="primaryAction.color"
+                variant="text"
+                aria-label="toggle-plugin"
+                @click.stop="emit('action-primary', item)"
+              >
+                <v-icon size="20">{{ primaryAction.icon }}</v-icon>
+                <v-tooltip activator="parent" location="top">{{ primaryAction.tooltip }}</v-tooltip>
+              </v-btn>
+
+              <v-btn
+                icon
+                size="x-small"
+                color="info"
+                variant="text"
+                aria-label="reload-plugin"
+                @click.stop="emit('action-reload', item.name)"
+              >
+                <v-icon size="20">mdi-refresh</v-icon>
+                <v-tooltip activator="parent" location="top">重载</v-tooltip>
+              </v-btn>
+
+              <v-btn
+                icon
+                size="x-small"
+                color="error"
+                variant="text"
+                :disabled="item.reserved"
+                aria-label="uninstall-plugin"
+                @click.stop="emit('action-uninstall', item.name)"
+              >
+                <v-icon size="20">mdi-delete</v-icon>
+                <v-tooltip activator="parent" location="top">卸载</v-tooltip>
+              </v-btn>
+            </div>
+          </div>
+        </template>
+
+        <template #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-h6 mb-2">暂无插件</div>
+          </div>
+        </template>
+      </v-data-table>
+    </v-card-text>
+
+    <v-dialog v-model="showUninstallDialog" max-width="520">
+      <v-card>
+        <v-card-title class="text-h6 d-flex align-center">
+          <v-icon color="error" class="mr-2">mdi-delete-alert</v-icon>
+          确认卸载
+        </v-card-title>
+
+        <v-card-text>
+          <div>
+            确定要卸载选中的
+            <strong>{{ pendingUninstallNames.length }}</strong>
+            个插件吗？此操作不可撤销。
+          </div>
+          <div class="text-caption text-medium-emphasis mt-2">
+            系统插件（reserved）不会出现在可卸载列表中。
+          </div>
+
+          <v-alert
+            v-if="pendingUninstallNames.length === 0"
+            type="info"
+            variant="tonal"
+            density="compact"
+            class="mt-3"
+          >
+            当前选择中没有可卸载插件。
+          </v-alert>
+
+          <v-alert
+            v-else
+            type="warning"
+            variant="tonal"
+            density="compact"
+            class="mt-3"
+          >
+            将卸载 {{ pendingUninstallNames.length }} 个插件。
+          </v-alert>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer />
+          <v-btn color="grey" variant="text" @click="showUninstallDialog = false">取消</v-btn>
+          <v-btn
+            color="error"
+            variant="elevated"
+            :disabled="pendingUninstallNames.length === 0"
+            @click="confirmBatchUninstall"
+          >
+            卸载
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-card>
+</template>
+
+<style scoped>
+.plugin-list-table {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.plugin-list-table__title {
+  position: relative;
+  min-width: 0;
+}
+
+.plugin-list-table__secondary-measure {
+  position: absolute;
+  left: -99999px;
+  top: -99999px;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.plugin-list-table {
+  border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.plugin-list-table :deep(.v-data-table__table) {
+  table-layout: fixed;
+}
+
+.plugin-list-table :deep(.v-data-table__th),
+.plugin-list-table :deep(.v-data-table__td) {
+  padding-left: 6px !important;
+  padding-right: 6px !important;
+}
+
+/* index column: wider left padding to avoid clipping */
+.plugin-list-table :deep(.v-data-table__th:first-child),
+.plugin-list-table :deep(.v-data-table__td:first-child) {
+  padding-left: 12px !important;
+}
+
+.plugin-list-table :deep(.v-data-table__td--select),
+.plugin-list-table :deep(.v-data-table__th--select) {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+
+.plugin-mini-avatar {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
+
+<style>
+.v-data-table .plugin-selected-row {
+  background: linear-gradient(90deg, rgba(var(--v-theme-primary), 0.12) 0%, rgba(var(--v-theme-primary), 0.04) 100%) !important;
+  border-left: 3px solid rgb(var(--v-theme-primary)) !important;
+}
+
+.v-data-table .plugin-selected-row:hover {
+  background: linear-gradient(90deg, rgba(var(--v-theme-primary), 0.18) 0%, rgba(var(--v-theme-primary), 0.06) 100%) !important;
+}
+
+
+
+.plugin-list-table .v-data-table__td {
+  vertical-align: middle;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/PluginOverviewPanel.vue b/dashboard/src/components/extension/mod-manager/PluginOverviewPanel.vue
new file mode 100644
index 0000000000..5237d8d738
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/PluginOverviewPanel.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import axios from 'axios'
+import { useI18n } from '@/i18n/composables'
+import { renderMarkdown } from '@/composables/useMarkdownIt'
+
+const props = defineProps<{
+  pluginName: string
+  repoUrl?: string | null
+  active?: boolean
+}>()
+
+const { t } = useI18n()
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const content = ref('')
+
+const canFetch = computed(() => Boolean(props.active) && Boolean(props.pluginName))
+const hasRepo = computed(() => Boolean(props.repoUrl))
+
+async function fetchReadme() {
+  if (!props.pluginName) return
+
+  loading.value = true
+  content.value = ''
+  error.value = null
+
+  try {
+    const res = await axios.get(`/api/plugin/readme?name=${props.pluginName}`)
+    if (res.data?.status === 'ok') {
+      content.value = res.data.data?.content || ''
+    } else {
+      error.value = res.data?.message || t('core.common.readme.errors.fetchFailed')
+    }
+  } catch (err: any) {
+    error.value = err?.message || t('core.common.readme.errors.fetchError')
+  } finally {
+    loading.value = false
+  }
+}
+
+function openRepoInNewTab() {
+  if (props.repoUrl) {
+    window.open(props.repoUrl, '_blank')
+  }
+}
+
+function refreshReadme() {
+  fetchReadme()
+}
+
+watch(
+  () => props.active,
+  (isActive) => {
+    if (isActive && props.pluginName) {
+      fetchReadme()
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.pluginName,
+  (name) => {
+    if (props.active && name) {
+      fetchReadme()
+    } else {
+      loading.value = false
+      error.value = null
+      content.value = ''
+    }
+  }
+)
+
+const renderedHtml = computed(() => renderMarkdown(content.value))
+</script>
+
+<template>
+  <v-card class="h-100 d-flex flex-column" rounded="lg" variant="flat">
+    <v-card-title class="d-flex align-center ga-2">
+      <div class="text-subtitle-1 font-weight-medium">文档</div>
+      <v-spacer />
+
+      <v-btn
+        v-if="hasRepo"
+        color="primary"
+        prepend-icon="mdi-github"
+        variant="tonal"
+        @click="openRepoInNewTab"
+      >
+        {{ t('core.common.readme.buttons.viewOnGithub') }}
+      </v-btn>
+
+      <v-btn
+        color="secondary"
+        prepend-icon="mdi-refresh"
+        variant="tonal"
+        :disabled="!pluginName"
+        @click="refreshReadme"
+      >
+        {{ t('core.common.readme.buttons.refresh') }}
+      </v-btn>
+    </v-card-title>
+
+    <v-divider />
+
+    <v-card-text class="pa-0 flex-grow-1">
+      <div class="readme-scroll">
+        <div v-if="loading" class="d-flex flex-column align-center justify-center" style="height: 100%">
+          <v-progress-circular indeterminate color="primary" size="56" class="mb-3" />
+          <div class="text-body-2 text-medium-emphasis">{{ t('core.common.readme.loading') }}</div>
+        </div>
+
+        <div v-else-if="error" class="d-flex flex-column align-center justify-center pa-6" style="height: 100%">
+          <v-icon size="64" color="error" class="mb-4">mdi-alert-circle-outline</v-icon>
+          <div class="text-body-1 text-center mb-4">{{ error }}</div>
+          <v-btn color="primary" variant="tonal" @click="fetchReadme">重试</v-btn>
+        </div>
+
+        <div v-else-if="content" class="readme-scroll__content">
+          <div class="readme-scroll__container markdown-body" v-html="renderedHtml"></div>
+        </div>
+
+        <div v-else class="d-flex flex-column align-center justify-center pa-6" style="height: 100%">
+          <v-icon size="64" color="warning" class="mb-4">mdi-file-question-outline</v-icon>
+          <p class="text-body-1 text-center mb-0">
+            {{ t('core.common.readme.empty.title') }}<br />
+            {{ t('core.common.readme.empty.subtitle') }}
+          </p>
+        </div>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.readme-scroll {
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.readme-scroll__container {
+  max-width: 1012px;
+  margin: 0 auto;
+  padding: 32px;
+}
+
+.readme-scroll__content {
+  min-height: 100%;
+}
+
+@media (max-width: 767px) {
+  .readme-scroll__container {
+    padding: 16px;
+  }
+}
+</style>
diff --git a/dashboard/src/components/extension/mod-manager/PluginPanel.vue b/dashboard/src/components/extension/mod-manager/PluginPanel.vue
new file mode 100644
index 0000000000..0d2a923ccc
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/PluginPanel.vue
@@ -0,0 +1,342 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { usePluginConfigCache } from '@/composables/usePluginConfigCache'
+import { useModuleI18n } from '@/i18n/composables'
+import type { PluginPanelTab, PluginSummary } from './types'
+
+import PluginInfoPanel from './PluginInfoPanel.vue'
+import PluginConfigPanel from './PluginConfigPanel.vue'
+import PluginOverviewPanel from './PluginOverviewPanel.vue'
+import PluginChangelogPanel from './PluginChangelogPanel.vue'
+import PluginWelcomePanel from './PluginWelcomePanel.vue'
+import GlobalPanel from './GlobalPanel.vue'
+
+const props = defineProps<{
+  plugin: PluginSummary | null
+  activeTab?: PluginPanelTab
+  excludedTab?: PluginPanelTab | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:activeTab', tab: PluginPanelTab): void
+  (e: 'action-update', name: string): void
+  (e: 'config-saved', pluginName: string): void
+  (e: 'detach-tab', tab: PluginPanelTab): void
+}>()
+
+const cache = usePluginConfigCache()
+const { tm } = useModuleI18n('features/extension')
+
+// All tab definitions in display order
+const allTabs: { value: PluginPanelTab; labelKey: string }[] = [
+  { value: 'info', labelKey: 'modManager.panelTabs.info' },
+  { value: 'config', labelKey: 'modManager.panelTabs.config' },
+  { value: 'overview', labelKey: 'modManager.panelTabs.overview' },
+  { value: 'changelog', labelKey: 'modManager.panelTabs.changelog' },
+  { value: 'reserved', labelKey: 'modManager.panelTabs.reserved' },
+]
+
+// Visible tabs (excluding currently detached tab)
+const visibleTabs = computed(() =>
+  allTabs.filter((t) => t.value !== props.excludedTab)
+)
+
+const normalizeTab = (tab: PluginPanelTab | undefined): PluginPanelTab => {
+  // Forward-compat: legacy behavior tab merged into info
+  if (tab === 'behavior') return 'info'
+  const resolved = tab ?? 'info'
+  // If the resolved tab is excluded, fall back to first visible
+  if (resolved === props.excludedTab && visibleTabs.value.length > 0) {
+    return visibleTabs.value[0].value
+  }
+  return resolved
+}
+
+const localActiveTab = ref<PluginPanelTab>(normalizeTab(props.activeTab))
+
+const hasPlugin = computed(() => Boolean(props.plugin))
+const pluginName = computed(() => props.plugin?.name || '')
+const repoUrl = computed(() => props.plugin?.repo || null)
+
+const isTabActive = (tab: PluginPanelTab) => localActiveTab.value === tab
+
+const setActiveTab = (tab: PluginPanelTab) => {
+  const next = normalizeTab(tab)
+  if (localActiveTab.value === next) return
+  localActiveTab.value = next
+  emit('update:activeTab', next)
+}
+
+const openRepoInNewTab = (url: string) => {
+  if (!url) return
+  window.open(url, '_blank')
+}
+
+// --- Drag-to-detach with floating ghost (Chrome-like) ---
+const tabBarRef = ref<HTMLElement | null>(null)
+const isDraggingTab = ref(false)
+
+const DRAG_START_THRESHOLD = 5 // px to enter drag mode
+
+function onTabPointerDown(tab: PluginPanelTab, e: PointerEvent) {
+  if (e.pointerType === 'mouse' && e.button !== 0) return
+  const startX = e.clientX
+  const startY = e.clientY
+  const target = (e.currentTarget as HTMLElement)
+  let dragging = false
+  let ghost: HTMLElement | null = null
+
+  const createGhost = () => {
+    ghost = target.cloneNode(true) as HTMLElement
+    ghost.style.cssText = `
+      position: fixed;
+      z-index: 9999;
+      pointer-events: none;
+      opacity: 0.85;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+      border-radius: 8px;
+      background: rgb(var(--v-theme-surface));
+      padding: 6px 16px;
+      font-size: 14px;
+      white-space: nowrap;
+      transition: transform 0.08s ease;
+      transform: scale(1.05);
+    `
+    document.body.appendChild(ghost)
+    target.style.opacity = '0.35'
+    isDraggingTab.value = true
+  }
+
+  const moveGhost = (cx: number, cy: number) => {
+    if (!ghost) return
+    ghost.style.left = `${cx - ghost.offsetWidth / 2}px`
+    ghost.style.top = `${cy - ghost.offsetHeight / 2}px`
+  }
+
+  const removeGhost = () => {
+    if (ghost) {
+      ghost.remove()
+      ghost = null
+    }
+    target.style.opacity = ''
+    isDraggingTab.value = false
+  }
+
+  const onMove = (ev: PointerEvent) => {
+    const dx = ev.clientX - startX
+    const dy = ev.clientY - startY
+    if (!dragging && Math.sqrt(dx * dx + dy * dy) > DRAG_START_THRESHOLD) {
+      dragging = true
+      createGhost()
+    }
+    if (dragging) {
+      moveGhost(ev.clientX, ev.clientY)
+    }
+  }
+
+  const onUp = (ev: PointerEvent) => {
+    cleanup()
+    if (!dragging) return // Was a normal click, let v-tabs handle it
+
+    // Determine if released below the tab bar
+    const tabBar = tabBarRef.value
+    if (tabBar) {
+      const rect = tabBar.getBoundingClientRect()
+      if (ev.clientY > rect.bottom) {
+        // Released below tab bar → detach
+        emit('detach-tab', tab)
+      }
+    }
+    removeGhost()
+  }
+
+  const onCancel = () => {
+    cleanup()
+    removeGhost()
+  }
+
+  const cleanup = () => {
+    document.removeEventListener('pointermove', onMove)
+    document.removeEventListener('pointerup', onUp)
+    document.removeEventListener('pointercancel', onCancel)
+  }
+
+  document.addEventListener('pointermove', onMove)
+  document.addEventListener('pointerup', onUp)
+  document.addEventListener('pointercancel', onCancel)
+}
+
+function handleDetachClick(tab: PluginPanelTab) {
+  emit('detach-tab', tab)
+}
+
+watch(
+  () => props.activeTab,
+  (val) => {
+    if (!val) return
+    const next = normalizeTab(val)
+    if (next !== localActiveTab.value) {
+      localActiveTab.value = next
+    }
+  }
+)
+
+// When excluded tab changes, ensure current tab is still valid
+watch(
+  () => props.excludedTab,
+  () => {
+    if (localActiveTab.value === props.excludedTab) {
+      const fallback = visibleTabs.value[0]?.value ?? 'info'
+      setActiveTab(fallback)
+    }
+  }
+)
+
+watch(
+  () => props.plugin?.name,
+  (name, prev) => {
+    if (!name) return
+    if (name !== prev) {
+      // Switch to info tab when selecting a new plugin
+      setActiveTab('info')
+      // Prefetch config (non-blocking)
+      cache.prefetch(name)
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <v-card class="h-100 d-flex flex-column plugin-panel" rounded="lg" variant="outlined">
+    <PluginWelcomePanel v-if="!hasPlugin" />
+
+    <template v-else>
+      <div ref="tabBarRef" class="plugin-panel__tab-bar d-flex align-center">
+        <v-tabs v-model="localActiveTab" color="primary" density="comfortable" class="flex-grow-1">
+          <v-tab
+            v-for="tab in visibleTabs"
+            :key="tab.value"
+            :value="tab.value"
+            @pointerdown="onTabPointerDown(tab.value, $event)"
+          >
+            {{ tm(tab.labelKey) }}
+          </v-tab>
+        </v-tabs>
+
+        <!-- Detach button for current active tab -->
+        <v-tooltip location="bottom">
+          <template #activator="{ props: tipProps }">
+            <v-btn
+              v-bind="tipProps"
+              icon
+              size="x-small"
+              variant="text"
+              class="mr-2"
+              @click="handleDetachClick(localActiveTab)"
+            >
+              <v-icon size="18">mdi-arrow-expand-down</v-icon>
+            </v-btn>
+          </template>
+          <span>弹出到底部面板</span>
+        </v-tooltip>
+      </div>
+
+      <v-divider />
+
+      <v-window v-model="localActiveTab" class="flex-grow-1 plugin-panel__window" style="min-height: 0">
+        <v-window-item v-if="excludedTab !== 'info'" value="info" class="h-100">
+          <div class="plugin-panel__tab plugin-panel__tab--no-scroll pa-3">
+            <PluginInfoPanel
+              v-if="plugin"
+              :plugin="plugin"
+              @action-update="emit('action-update', plugin.name)"
+              @open-repo="openRepoInNewTab"
+            />
+          </div>
+        </v-window-item>
+
+        <v-window-item v-if="excludedTab !== 'config'" value="config" class="h-100">
+          <div class="plugin-panel__tab pa-3">
+            <PluginConfigPanel
+              :pluginName="pluginName"
+              :active="isTabActive('config')"
+              @saved="(name) => emit('config-saved', name)"
+              @error="() => {}"
+            />
+          </div>
+        </v-window-item>
+
+        <v-window-item v-if="excludedTab !== 'overview'" value="overview" class="h-100">
+          <div class="plugin-panel__tab pa-3">
+            <PluginOverviewPanel
+              :pluginName="pluginName"
+              :repoUrl="repoUrl"
+              :active="isTabActive('overview')"
+            />
+          </div>
+        </v-window-item>
+
+        <v-window-item v-if="excludedTab !== 'changelog'" value="changelog" class="h-100">
+          <div class="plugin-panel__tab pa-3">
+            <PluginChangelogPanel :pluginName="pluginName" :active="isTabActive('changelog')" />
+          </div>
+        </v-window-item>
+
+        <v-window-item v-if="excludedTab !== 'reserved'" value="reserved" class="h-100">
+          <div class="plugin-panel__tab">
+            <GlobalPanel />
+          </div>
+        </v-window-item>
+      </v-window>
+    </template>
+  </v-card>
+</template>
+
+<style scoped>
+.plugin-panel__tab-bar {
+  flex: 0 0 auto;
+}
+
+.plugin-panel__window {
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.plugin-panel__window :deep(.v-window__container) {
+  min-height: 0;
+  height: 100%;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.plugin-panel__window :deep(.v-window-item) {
+  min-height: 0;
+  height: 100%;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.plugin-panel__tab {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.plugin-panel__tab--no-scroll {
+  overflow: hidden;
+}
+</style>
+
+<!-- Global styles for drag-drop visual feedback (manipulated by external JS) -->
+<style>
+.plugin-panel__tab-bar--drop-target {
+  background: rgba(var(--v-theme-primary), 0.10);
+  box-shadow: inset 0 -3px 0 0 rgb(var(--v-theme-primary));
+  transition: background 0.15s ease, box-shadow 0.15s ease;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/PluginWelcomePanel.vue b/dashboard/src/components/extension/mod-manager/PluginWelcomePanel.vue
new file mode 100644
index 0000000000..ccbc59452b
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/PluginWelcomePanel.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useModuleI18n } from '@/i18n/composables'
+import { renderMarkdown } from '@/composables/useMarkdownIt'
+
+const UPSTREAM_REPO_URL = 'https://github.com/AstrBotDevs/AstrBot'
+const UPSTREAM_README_API_URL = 'https://api.github.com/repos/AstrBotDevs/AstrBot/readme'
+const UPSTREAM_README_CDN_URL = 'https://cdn.jsdelivr.net/gh/AstrBotDevs/AstrBot@main/README.md'
+
+const { tm } = useModuleI18n('features/extension')
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const content = ref('')
+
+const docsLink = computed(() => ({
+  key: 'docs',
+  label: String(tm('modManager.welcome.links.docs')),
+  icon: 'mdi-book-open-page-variant',
+  url: 'https://astrbot.app/'
+}))
+
+function openInNewTab(url: string) {
+  if (!url) return
+  window.open(url, '_blank')
+}
+
+function openUpstreamRepo() {
+  openInNewTab(UPSTREAM_REPO_URL)
+}
+
+function fetchWithoutAuth(url: string, headers: Record<string, string> = {}): Promise<string | null> {
+  return new Promise((resolve) => {
+    const xhr = new XMLHttpRequest()
+    xhr.open('GET', url, true)
+    
+    // Set custom headers
+    for (const [key, value] of Object.entries(headers)) {
+      xhr.setRequestHeader(key, value)
+    }
+    
+    // Explicitly prevent sending standard credentials/authorization if any ambient config tries to
+    xhr.withCredentials = false
+    
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve(xhr.responseText || null)
+      } else {
+        resolve(null)
+      }
+    }
+    
+    xhr.onerror = () => {
+      resolve(null)
+    }
+    
+    xhr.send(null)
+  })
+}
+
+async function tryFetchGitHubApi(): Promise<string | null> {
+  return await fetchWithoutAuth(UPSTREAM_README_API_URL, {
+    Accept: 'application/vnd.github.raw+json'
+  })
+}
+
+async function tryFetchJsdelivrCdn(): Promise<string | null> {
+  return await fetchWithoutAuth(UPSTREAM_README_CDN_URL)
+}
+
+async function fetchUpstreamReadme() {
+  loading.value = true
+  error.value = null
+  content.value = ''
+
+  try {
+    // Primary: GitHub API
+    let rawText = await tryFetchGitHubApi()
+    // Fallback: jsdelivr CDN
+    if (!rawText) {
+      rawText = await tryFetchJsdelivrCdn()
+    }
+    if (!rawText) {
+      error.value = String(tm('modManager.welcome.readme.errors.fetchFailed'))
+      return
+    }
+    content.value = rawText
+  } catch {
+    error.value = String(tm('modManager.welcome.readme.errors.fetchFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+
+const renderedHtml = computed(() => renderMarkdown(content.value))
+
+onMounted(() => {
+  fetchUpstreamReadme()
+})
+</script>
+
+<template>
+  <div class="h-100 d-flex flex-column">
+    <div class="d-flex align-center ga-3 pa-6">
+      <v-icon size="40" color="info">mdi-puzzle-outline</v-icon>
+      <div style="min-width: 0">
+        <div class="text-h6">{{ tm('modManager.welcome.title') }}</div>
+        <div class="text-body-2 text-medium-emphasis">{{ tm('modManager.welcome.subtitle') }}</div>
+      </div>
+
+      <v-spacer />
+
+      <v-btn
+        color="primary"
+        variant="tonal"
+        prepend-icon="mdi-github"
+        class="ml-2"
+        @click="openUpstreamRepo"
+      >
+        {{ tm('modManager.welcome.actions.viewOnGithub') }}
+      </v-btn>
+
+      <v-btn
+        variant="tonal"
+        color="secondary"
+        :prepend-icon="docsLink.icon"
+        class="ml-2"
+        @click="openInNewTab(docsLink.url)"
+      >
+        {{ docsLink.label }}
+      </v-btn>
+    </div>
+
+    <v-divider />
+
+    <div class="pa-0 flex-grow-1 welcome-scroll">
+      <div v-if="loading" class="d-flex flex-column align-center justify-center pa-6 welcome-state">
+        <v-progress-circular indeterminate color="primary" size="56" class="mb-3" />
+        <div class="text-body-2 text-medium-emphasis">{{ tm('modManager.welcome.readme.loading') }}</div>
+      </div>
+
+      <div v-else-if="error" class="d-flex flex-column align-center justify-center pa-6 welcome-state">
+        <v-icon size="64" color="error" class="mb-4">mdi-alert-circle-outline</v-icon>
+        <div class="text-body-1 text-center mb-4">{{ error }}</div>
+        <v-btn color="primary" variant="tonal" @click="fetchUpstreamReadme">
+          {{ tm('modManager.welcome.actions.retry') }}
+        </v-btn>
+      </div>
+
+      <div v-else-if="content" class="welcome-readme">
+        <div class="welcome-readme__container markdown-body" v-html="renderedHtml"></div>
+
+        <div class="welcome-readme__container">
+          <v-alert type="info" variant="tonal" density="comfortable" class="mt-8">
+            <div class="text-body-2">
+              {{ tm('modManager.welcome.tip.market') }}
+            </div>
+          </v-alert>
+        </div>
+      </div>
+
+      <div v-else class="d-flex flex-column align-center justify-center pa-6 welcome-state">
+        <v-icon size="64" color="warning" class="mb-4">mdi-file-question-outline</v-icon>
+        <p class="text-body-1 text-center mb-0">
+          {{ tm('modManager.welcome.readme.empty.title') }}<br />
+          {{ tm('modManager.welcome.readme.empty.subtitle') }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.welcome-scroll {
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.welcome-state {
+  height: 100%;
+}
+
+.welcome-readme__container {
+  max-width: 1012px;
+  margin: 0 auto;
+  padding: 32px;
+}
+
+@media (max-width: 767px) {
+  .welcome-readme__container {
+    padding: 16px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/PluginWorkspace.vue b/dashboard/src/components/extension/mod-manager/PluginWorkspace.vue
new file mode 100644
index 0000000000..9ca380bb0d
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/PluginWorkspace.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { PluginPanelTab, PluginSummary } from './types'
+
+import ResizableSplitPane from './ResizableSplitPane.vue'
+import PluginPanel from './PluginPanel.vue'
+import DetachedTabPane from './DetachedTabPane.vue'
+
+const DETACHED_TAB_KEY = 'pluginManager.detachedTab'
+
+const props = defineProps<{
+  plugins: PluginSummary[]
+  selectedPluginName: string | null
+  splitRatio: number
+  showReserved: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:splitRatio', ratio: number): void
+  (e: 'select-plugin', name: string): void
+  (e: 'action-update', name: string): void
+  (e: 'config-saved', pluginName: string): void
+}>()
+
+const selectedPlugin = computed<PluginSummary | null>(() => {
+  const name = props.selectedPluginName
+  if (!name) return null
+  return (props.plugins ?? []).find((p) => p.name === name) ?? null
+})
+
+const splitRatioModel = computed<number>({
+  get: () => props.splitRatio,
+  set: (ratio) => emit('update:splitRatio', ratio)
+})
+
+// Detached tab state with localStorage persistence
+const validTabs: PluginPanelTab[] = ['info', 'config', 'overview', 'changelog', 'reserved']
+
+function loadDetachedTab(): PluginPanelTab | null {
+  try {
+    const stored = localStorage.getItem(DETACHED_TAB_KEY)
+    if (stored && validTabs.includes(stored as PluginPanelTab)) {
+      return stored as PluginPanelTab
+    }
+  } catch {
+    // localStorage unavailable
+  }
+  return null
+}
+
+const detachedTab = ref<PluginPanelTab | null>(loadDetachedTab())
+
+watch(detachedTab, (val) => {
+  try {
+    if (val) {
+      localStorage.setItem(DETACHED_TAB_KEY, val)
+    } else {
+      localStorage.removeItem(DETACHED_TAB_KEY)
+    }
+  } catch {
+    // localStorage unavailable
+  }
+})
+
+// Whether to show the split (four-pane) layout
+const isSplit = computed(() => detachedTab.value !== null && selectedPlugin.value !== null)
+
+function handleDetach(tab: PluginPanelTab) {
+  detachedTab.value = tab
+}
+
+function handleDock() {
+  detachedTab.value = null
+}
+</script>
+
+<template>
+  <div class="plugin-workspace">
+    <!-- Three-pane mode: PluginPanel fills the entire right side -->
+    <PluginPanel
+      v-if="!isSplit"
+      :plugin="selectedPlugin"
+      :excluded-tab="null"
+      @action-update="emit('action-update', $event)"
+      @config-saved="emit('config-saved', $event)"
+      @detach-tab="handleDetach"
+    />
+
+    <!-- Four-pane mode: PluginPanel top + DetachedTabPane bottom -->
+    <ResizableSplitPane
+      v-else
+      v-model="splitRatioModel"
+      direction="vertical"
+    >
+      <template #first>
+        <PluginPanel
+          :plugin="selectedPlugin"
+          :excluded-tab="detachedTab"
+          @action-update="emit('action-update', $event)"
+          @config-saved="emit('config-saved', $event)"
+          @detach-tab="handleDetach"
+        />
+      </template>
+
+      <template #second>
+        <DetachedTabPane
+          :tab="detachedTab!"
+          :plugin="selectedPlugin"
+          @dock="handleDock"
+          @action-update="emit('action-update', $event)"
+          @config-saved="emit('config-saved', $event)"
+        />
+      </template>
+    </ResizableSplitPane>
+  </div>
+</template>
+
+<style scoped>
+.plugin-workspace {
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+  min-width: 0;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/ResizableSplitPane.vue b/dashboard/src/components/extension/mod-manager/ResizableSplitPane.vue
new file mode 100644
index 0000000000..4c087974e7
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/ResizableSplitPane.vue
@@ -0,0 +1,301 @@
+<template>
+  <div
+    ref="containerRef"
+    class="resizable-split-pane"
+    :class="{
+      'is-horizontal': isHorizontal,
+      'is-dragging': isDragging,
+    }"
+  >
+    <div class="pane-first" :style="firstPaneStyle">
+      <slot name="first">
+        <slot name="top" />
+      </slot>
+    </div>
+
+    <div
+      class="pane-divider"
+      :style="dividerStyle"
+      @pointerdown.prevent="onDragStart"
+    >
+      <div class="divider-handle" />
+    </div>
+
+    <div class="pane-second" :style="secondPaneStyle">
+      <slot name="second">
+        <slot name="bottom" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue';
+
+type Direction = 'vertical' | 'horizontal';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: number;
+    minRatio?: number;
+    maxRatio?: number;
+    direction?: Direction;
+  }>(),
+  {
+    minRatio: 0.2,
+    maxRatio: 0.8,
+    direction: 'vertical',
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [ratio: number];
+}>();
+
+const containerRef = ref<HTMLElement | null>(null);
+const isDragging = ref(false);
+
+const isHorizontal = computed(() => props.direction === 'horizontal');
+
+function clampRatio(ratio: number): number {
+  const min = Math.min(props.minRatio, props.maxRatio);
+  const max = Math.max(props.minRatio, props.maxRatio);
+  if (ratio !== ratio) return min;
+  return Math.min(max, Math.max(min, ratio));
+}
+
+const clampedRatio = computed(() => clampRatio(props.modelValue));
+
+const DIVIDER_SIZE_PX = 12;
+const HALF_DIVIDER_PX = DIVIDER_SIZE_PX / 2;
+
+const firstPaneStyle = computed<Record<string, string>>(() => {
+  const ratio = clampedRatio.value;
+  if (isHorizontal.value) {
+    return { width: `calc(${ratio * 100}% - ${HALF_DIVIDER_PX}px)`, height: '100%' };
+  }
+  return { height: `calc(${ratio * 100}% - ${HALF_DIVIDER_PX}px)`, width: '100%' };
+});
+
+const secondPaneStyle = computed<Record<string, string>>(() => {
+  const ratio = clampedRatio.value;
+  if (isHorizontal.value) {
+    return { width: `calc(${(1 - ratio) * 100}% - ${HALF_DIVIDER_PX}px)`, height: '100%' };
+  }
+  return { height: `calc(${(1 - ratio) * 100}% - ${HALF_DIVIDER_PX}px)`, width: '100%' };
+});
+
+const dividerStyle = computed<Record<string, string>>(() => {
+  if (isHorizontal.value) {
+    return {
+      cursor: 'col-resize',
+      width: `${DIVIDER_SIZE_PX}px`,
+      height: '100%'
+    };
+  }
+
+  return {
+    cursor: 'row-resize',
+    width: '100%',
+    height: `${DIVIDER_SIZE_PX}px`
+  };
+});
+
+let cleanupDocumentListeners: (() => void) | null = null;
+let restoreBodyStyles: (() => void) | null = null;
+
+let dragPointerId: number | null = null;
+
+let rafId: number | null = null;
+let pendingClientX = 0;
+let pendingClientY = 0;
+
+function scheduleRatioUpdate(): void {
+  if (rafId != null) return;
+  rafId = window.requestAnimationFrame(() => {
+    rafId = null;
+    const container = containerRef.value;
+    if (!container) return;
+
+    const rect = container.getBoundingClientRect();
+    const ratio = isHorizontal.value
+      ? (pendingClientX - rect.left) / rect.width
+      : (pendingClientY - rect.top) / rect.height;
+
+    emit('update:modelValue', clampRatio(ratio));
+  });
+}
+
+function addDocumentListeners(): void {
+  const onPointerMove = (event: PointerEvent) => {
+    if (dragPointerId != null && event.pointerId !== dragPointerId) return;
+    pendingClientX = event.clientX;
+    pendingClientY = event.clientY;
+    scheduleRatioUpdate();
+  };
+
+  const onPointerUpOrCancel = (event: PointerEvent) => {
+    if (dragPointerId != null && event.pointerId !== dragPointerId) return;
+    onDragEnd();
+  };
+
+  document.addEventListener('pointermove', onPointerMove);
+  document.addEventListener('pointerup', onPointerUpOrCancel);
+  document.addEventListener('pointercancel', onPointerUpOrCancel);
+
+  cleanupDocumentListeners = () => {
+    document.removeEventListener('pointermove', onPointerMove);
+    document.removeEventListener('pointerup', onPointerUpOrCancel);
+    document.removeEventListener('pointercancel', onPointerUpOrCancel);
+    cleanupDocumentListeners = null;
+  };
+}
+
+function applyDraggingBodyStyle(): void {
+  const body = document.body;
+
+  const prevUserSelect = body.style.userSelect;
+  const prevCursor = body.style.cursor;
+
+  body.style.userSelect = 'none';
+  body.style.cursor = isHorizontal.value ? 'col-resize' : 'row-resize';
+
+  restoreBodyStyles = () => {
+    body.style.userSelect = prevUserSelect;
+    body.style.cursor = prevCursor;
+    restoreBodyStyles = null;
+  };
+}
+
+function onDragStart(event: PointerEvent): void {
+  // 仅在鼠标左键时开始；触摸/触控笔不检查 button
+  if (event.pointerType === 'mouse' && event.button !== 0) return;
+  if (!containerRef.value) return;
+
+  dragPointerId = event.pointerId;
+
+  const target = event.currentTarget as HTMLElement | null;
+  target?.setPointerCapture?.(event.pointerId);
+
+  isDragging.value = true;
+  applyDraggingBodyStyle();
+  addDocumentListeners();
+
+  pendingClientX = event.clientX;
+  pendingClientY = event.clientY;
+  scheduleRatioUpdate();
+}
+
+function onDragEnd(): void {
+  if (!isDragging.value) return;
+
+  isDragging.value = false;
+  dragPointerId = null;
+
+  if (rafId != null) {
+    window.cancelAnimationFrame(rafId);
+    rafId = null;
+  }
+
+  cleanupDocumentListeners?.();
+  restoreBodyStyles?.();
+}
+
+onBeforeUnmount(() => {
+  onDragEnd();
+});
+</script>
+
+<style scoped>
+.resizable-split-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+  min-width: 0;
+  position: relative;
+  isolation: isolate;
+  align-items: stretch;
+}
+
+.resizable-split-pane.is-horizontal {
+  flex-direction: row;
+}
+
+.pane-first,
+.pane-second {
+  overflow: hidden;
+  min-height: 0;
+  min-width: 0;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 0;
+}
+
+/* 让 slot 的根节点跟随 pane 伸缩，否则会出现大量空白（pane 高度变化但内容不填充） */
+:deep(.pane-first > *),
+:deep(.pane-second > *) {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+}
+
+.pane-divider {
+  flex: 0 0 auto;
+  background: transparent;
+  position: relative;
+  user-select: none;
+  align-self: stretch;
+  z-index: 20;
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.resizable-split-pane.is-horizontal .pane-divider {
+  height: 100%;
+}
+
+.resizable-split-pane.is-horizontal .pane-first,
+.resizable-split-pane.is-horizontal .pane-second {
+  height: 100%;
+}
+
+.divider-handle {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  background: rgba(var(--v-theme-on-surface), 0.38);
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+.resizable-split-pane.is-horizontal .divider-handle {
+  top: 12px;
+  bottom: 12px;
+  left: 50%;
+  right: auto;
+  width: 2px;
+  height: auto;
+  transform: translateX(-50%);
+}
+
+.pane-divider:hover {
+  background: rgba(var(--v-theme-on-surface), 0.04);
+}
+
+.pane-divider:hover .divider-handle,
+.resizable-split-pane.is-dragging .divider-handle {
+  background: rgba(var(--v-theme-on-surface), 0.62);
+  box-shadow: 0 0 0 2px rgba(var(--v-theme-on-surface), 0.14);
+}
+
+.resizable-split-pane.is-dragging {
+  user-select: none;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/extension/mod-manager/types.ts b/dashboard/src/components/extension/mod-manager/types.ts
new file mode 100644
index 0000000000..f37eb690cb
--- /dev/null
+++ b/dashboard/src/components/extension/mod-manager/types.ts
@@ -0,0 +1,66 @@
+export interface ApiResponse<T> {
+  status: 'ok' | 'error' | string
+  message?: string | null
+  data: T
+}
+
+// 插件 Handler 信息（来自 /api/plugin/get 的 handlers 数组）
+// 参考 astrbot/dashboard/routes/plugin.py:get_plugin_handlers_info()
+export interface PluginHandlerInfo {
+  event_type: string
+  event_type_h: string
+  handler_full_name: string
+  handler_name: string
+  desc: string
+  cmd?: string
+  type?: string
+  sub_command?: string
+  has_admin?: boolean
+}
+
+// 插件摘要信息（来自 /api/plugin/get）
+// 参考 astrbot/dashboard/routes/plugin.py:get_plugins()
+export interface PluginSummary {
+  name: string
+  display_name?: string | null
+  repo: string
+  author: string
+  desc: string
+  version: string
+  reserved: boolean
+  activated: boolean
+
+  // 后端字段（注意拼写错误）
+  online_vesion?: string
+
+  // 前端计算写入
+  online_version?: string
+  has_update?: boolean
+
+  handlers: PluginHandlerInfo[]
+  logo?: string | null
+}
+
+// 配置缓存条目
+export interface PluginConfigCacheEntry {
+  metadata: Record<string, any>
+  config: Record<string, any>
+  fetchedAt: number
+  inFlight?: Promise<void>
+}
+
+// 配置缓存 API
+export interface PluginConfigCacheApi {
+  get(pluginName: string): PluginConfigCacheEntry | undefined
+  prefetch(pluginName: string): Promise<void>
+  getOrFetch(pluginName: string): Promise<PluginConfigCacheEntry>
+  updateConfig(pluginName: string, config: Record<string, any>): Promise<void>
+  invalidate(pluginName: string): void
+  isStale(pluginName: string): boolean
+}
+
+// 视图模式
+export type InstalledViewMode = 'mod' | 'legacy'
+
+// 插件面板 Tab
+export type PluginPanelTab = 'info' | 'config' | 'behavior' | 'overview' | 'changelog' | 'reserved'
\ No newline at end of file
diff --git a/dashboard/src/components/shared/ReadmeDialog.vue b/dashboard/src/components/shared/ReadmeDialog.vue
index f7c2d2faf6..f2ae3cc28b 100644
--- a/dashboard/src/components/shared/ReadmeDialog.vue
+++ b/dashboard/src/components/shared/ReadmeDialog.vue
@@ -455,237 +455,3 @@ const showActionArea = computed(() => {
     </v-card>
   </v-dialog>
 </template>
-
-<style scoped>
-:deep(.markdown-body) {
-  --markdown-border: rgba(128, 128, 128, 0.3);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
-    sans-serif;
-  line-height: 1.6;
-  padding: 8px 0;
-  color: var(--v-theme-secondaryText);
-}
-
-:deep(.markdown-body [align="center"]) {
-  text-align: center;
-}
-:deep(.markdown-body [align="right"]) {
-  text-align: right;
-}
-
-:deep(.markdown-body h1),
-:deep(.markdown-body h2),
-:deep(.markdown-body h3),
-:deep(.markdown-body h4),
-:deep(.markdown-body h5),
-:deep(.markdown-body h6) {
-  margin-top: 24px;
-  margin-bottom: 16px;
-  font-weight: 600;
-  line-height: 1.25;
-  scroll-margin-top: 12px;
-}
-
-:deep(.markdown-body h1) {
-  font-size: 2em;
-  border-bottom: 1px solid var(--v-theme-border);
-  padding-bottom: 0.3em;
-}
-:deep(.markdown-body h2) {
-  font-size: 1.5em;
-  border-bottom: 1px solid var(--v-theme-border);
-  padding-bottom: 0.3em;
-}
-:deep(.markdown-body p) {
-  margin-top: 0;
-  margin-bottom: 16px;
-}
-
-:deep(.markdown-body .code-block-wrapper) {
-  position: relative;
-  margin-bottom: 16px;
-}
-:deep(.markdown-body .code-lang-label) {
-  position: absolute;
-  top: 8px;
-  left: 12px;
-  font-size: 12px;
-  color: #8b949e;
-  text-transform: uppercase;
-  font-weight: 500;
-  z-index: 1;
-}
-
-:deep(.markdown-body .copy-code-btn) {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  background: rgba(110, 118, 129, 0.4);
-  border: none;
-  border-radius: 6px;
-  padding: 6px;
-  cursor: pointer;
-  color: #c9d1d9;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-  z-index: 1;
-}
-
-:deep(.markdown-body .copy-code-btn:hover) {
-  background: rgba(110, 118, 129, 0.6);
-  color: #fff;
-}
-
-:deep(.markdown-body code) {
-  padding: 0.2em 0.4em;
-  margin: 0;
-  background-color: rgba(110, 118, 129, 0.2);
-  border-radius: 6px;
-  font-size: 85%;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-}
-
-:deep(.markdown-body pre.hljs) {
-  padding: 16px;
-  padding-top: 32px;
-  overflow: auto;
-  font-size: 85%;
-  line-height: 1.45;
-  background-color: #0d1117;
-  border-radius: 6px;
-  margin: 0;
-}
-
-:deep(.markdown-body pre.hljs code) {
-  background-color: transparent;
-  padding: 0;
-  border-radius: 0;
-  color: #c9d1d9;
-}
-:deep(.markdown-body ul),
-:deep(.markdown-body ol) {
-  padding-left: 2em;
-  margin-bottom: 16px;
-}
-
-:deep(.markdown-body img) {
-  max-width: 100%;
-  margin: 8px 0;
-  box-sizing: border-box;
-  background-color: var(--v-theme-background);
-  border-radius: 3px;
-}
-
-:deep(.markdown-body img[src*="shields.io"]),
-:deep(.markdown-body img[src*="badge"]) {
-  display: inline-block;
-  vertical-align: middle;
-  height: auto;
-  margin: 2px 4px;
-  background-color: transparent;
-}
-
-:deep(.markdown-body blockquote) {
-  padding: 0 1em;
-  color: var(--v-theme-secondaryText);
-  border-left: 0.25em solid var(--v-theme-border);
-  margin-bottom: 16px;
-}
-
-:deep(.markdown-body a) {
-  color: var(--v-theme-primary);
-  text-decoration: none;
-}
-:deep(.markdown-body a:hover) {
-  text-decoration: underline;
-}
-
-:deep(.markdown-body table) {
-  border-spacing: 0;
-  border-collapse: collapse;
-  width: 100%;
-  margin-bottom: 0;
-  border: 1px solid var(--markdown-border);
-}
-:deep(.markdown-body .table-container) {
-  width: 100%;
-  overflow-x: auto;
-  margin-bottom: 16px;
-  border: 1px solid var(--markdown-border);
-  border-radius: 6px;
-}
-
-:deep(.markdown-body table th),
-:deep(.markdown-body table td) {
-  padding: 6px 13px;
-  border: 1px solid var(--markdown-border);
-}
-:deep(.markdown-body table th) {
-  font-weight: 600;
-  background-color: rgba(128, 128, 128, 0.1);
-}
-:deep(.markdown-body table tr) {
-  background-color: transparent;
-}
-:deep(.markdown-body table tr:nth-child(2n)) {
-  background-color: rgba(128, 128, 128, 0.05);
-}
-
-:deep(.markdown-body hr) {
-  height: 0.25em;
-  padding: 0;
-  margin: 24px 0;
-  background-color: var(--v-theme-containerBg);
-  border: 0;
-}
-
-:deep(.markdown-body details) {
-  margin-bottom: 16px;
-  border: 1px solid var(--v-theme-border);
-  border-radius: 6px;
-  padding: 8px 12px;
-  background-color: var(--v-theme-surface);
-}
-
-:deep(.markdown-body details[open]) {
-  padding-bottom: 12px;
-}
-:deep(.markdown-body summary) {
-  cursor: pointer;
-  font-weight: 600;
-  padding: 4px 0;
-  list-style: none;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-:deep(.markdown-body summary::before) {
-  content: "▶";
-  font-size: 0.75em;
-  transition: transform 0.2s ease;
-}
-:deep(.markdown-body details[open] summary::before) {
-  transform: rotate(90deg);
-}
-:deep(.markdown-body summary::-webkit-details-marker) {
-  display: none;
-}
-:deep(.markdown-body details > *:not(summary)) {
-  margin-top: 12px;
-}
-
-:deep(.markdown-body .hljs-keyword),
-:deep(.markdown-body .hljs-selector-tag),
-:deep(.markdown-body .hljs-title),
-:deep(.markdown-body .hljs-section),
-:deep(.markdown-body .hljs-doctag),
-:deep(.markdown-body .hljs-name),
-:deep(.markdown-body .hljs-strong) {
-  font-weight: bold;
-}
-</style>
diff --git a/dashboard/src/composables/useMarkdownIt.ts b/dashboard/src/composables/useMarkdownIt.ts
new file mode 100644
index 0000000000..c5ed7053b0
--- /dev/null
+++ b/dashboard/src/composables/useMarkdownIt.ts
@@ -0,0 +1,59 @@
+import MarkdownIt from 'markdown-it'
+import hljs from 'highlight.js'
+import 'highlight.js/styles/github-dark.css'
+
+// Shared markdown-it instance with highlight.js code highlighting.
+// Used by PluginWelcomePanel and PluginOverviewPanel.
+// We use markdown-it directly (instead of markstream-vue's MarkdownRender)
+// to preserve raw HTML inline layout — markstream-vue wraps each node
+// in width:100% Vue containers, which breaks inline flow of <a> tags
+// inside <div align="center">.
+
+const md = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+  breaks: false,
+})
+
+md.enable(['table', 'strikethrough'])
+md.renderer.rules.table_open = () => '<div class="table-container"><table>'
+md.renderer.rules.table_close = () => '</table></div>'
+
+md.renderer.rules.fence = (tokens, idx) => {
+  const token = tokens[idx]
+  const lang = token.info.trim() || ''
+  const code = token.content
+
+  const highlighted =
+    lang && hljs.getLanguage(lang)
+      ? hljs.highlight(code, { language: lang }).value
+      : md.utils.escapeHtml(code)
+
+  return `<div class="code-block-wrapper">
+    ${lang ? `<span class="code-lang-label">${lang}</span>` : ''}
+    <pre class="hljs"><code class="language-${lang}">${highlighted}</code></pre>
+  </div>`
+}
+
+/**
+ * Render markdown to HTML, post-processing all links to open in new tabs.
+ */
+export function renderMarkdown(source: string): string {
+  if (!source) return ''
+
+  const rawHtml = md.render(source)
+
+  // Post-process: make all links open in new tab
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = rawHtml
+  tempDiv.querySelectorAll('a').forEach((a) => {
+    const href = a.getAttribute('href') || ''
+    if (href && !href.startsWith('#')) {
+      a.setAttribute('target', '_blank')
+      a.setAttribute('rel', 'noopener noreferrer')
+    }
+  })
+
+  return tempDiv.innerHTML
+}
diff --git a/dashboard/src/composables/usePluginConfigCache.ts b/dashboard/src/composables/usePluginConfigCache.ts
new file mode 100644
index 0000000000..9996fed29c
--- /dev/null
+++ b/dashboard/src/composables/usePluginConfigCache.ts
@@ -0,0 +1,180 @@
+import axios from 'axios'
+import type { ApiResponse, PluginConfigCacheApi, PluginConfigCacheEntry } from '@/components/extension/mod-manager/types'
+
+const DEFAULT_TTL_MS = 10 * 60 * 1000
+
+function deepClone<T>(value: T): T {
+  if (typeof structuredClone === 'function') {
+    return structuredClone(value)
+  }
+  return JSON.parse(JSON.stringify(value)) as T
+}
+
+function now() {
+  return Date.now()
+}
+
+type PluginConfigGetPayload = {
+  metadata: Record<string, any>
+  config: Record<string, any>
+}
+
+type PluginConfigGetResponse = ApiResponse<PluginConfigGetPayload>
+
+type PluginConfigUpdateResponse = ApiResponse<unknown>
+
+const cache = new Map<string, PluginConfigCacheEntry>()
+
+async function fetchPluginConfig(pluginName: string): Promise<PluginConfigGetPayload> {
+  const response = await axios.get<PluginConfigGetResponse>('/api/config/get', {
+    params: { plugin_name: pluginName }
+  })
+
+  if (response.data?.status !== 'ok') {
+    const message = response.data?.message || 'Failed to fetch plugin config'
+    throw new Error(message)
+  }
+
+  const payload = response.data.data
+  return {
+    metadata: deepClone(payload?.metadata || {}),
+    config: deepClone(payload?.config || {})
+  }
+}
+
+async function updatePluginConfig(pluginName: string, config: Record<string, any>): Promise<void> {
+  const response = await axios.post<PluginConfigUpdateResponse>(
+    '/api/config/plugin/update',
+    config,
+    { params: { plugin_name: pluginName } }
+  )
+
+  if (response.data?.status !== 'ok') {
+    const message = response.data?.message || `Failed to save plugin config: ${pluginName}`
+    throw new Error(message)
+  }
+}
+
+function ensureEntry(pluginName: string): PluginConfigCacheEntry {
+  const existing = cache.get(pluginName)
+  if (existing) return existing
+
+  const entry: PluginConfigCacheEntry = {
+    metadata: {},
+    config: {},
+    fetchedAt: 0
+  }
+  cache.set(pluginName, entry)
+  return entry
+}
+
+function isStaleInternal(entry: PluginConfigCacheEntry, ttlMs: number) {
+  if (!entry.fetchedAt) return true
+  return now() - entry.fetchedAt > ttlMs
+}
+
+function startRefresh(pluginName: string, entry: PluginConfigCacheEntry) {
+  if (entry.inFlight) return entry.inFlight
+
+  const inFlight = (async () => {
+    const payload = await fetchPluginConfig(pluginName)
+    entry.metadata = payload.metadata
+    entry.config = payload.config
+    entry.fetchedAt = now()
+  })()
+
+  const cleanup = () => {
+    if (entry.inFlight === wrapped) {
+      entry.inFlight = undefined
+    }
+  }
+
+  const wrapped = inFlight.then(
+    () => {
+      cleanup()
+    },
+    (err) => {
+      cleanup()
+      throw err
+    }
+  )
+
+  entry.inFlight = wrapped
+  return wrapped
+}
+
+export function usePluginConfigCache(options?: { ttlMs?: number }): PluginConfigCacheApi & {
+  save: (pluginName: string, config: Record<string, any>) => Promise<void>
+} {
+  const ttlMs = options?.ttlMs ?? DEFAULT_TTL_MS
+
+  function get(pluginName: string) {
+    return cache.get(pluginName)
+  }
+
+  function invalidate(pluginName: string) {
+    cache.delete(pluginName)
+  }
+
+  function isStale(pluginName: string) {
+    const entry = cache.get(pluginName)
+    if (!entry) return true
+    return isStaleInternal(entry, ttlMs)
+  }
+
+  async function getOrFetch(pluginName: string): Promise<PluginConfigCacheEntry> {
+    const entry = ensureEntry(pluginName)
+
+    const stale = isStaleInternal(entry, ttlMs)
+    const hasValue = Boolean(entry.fetchedAt)
+
+    if (!stale && hasValue) {
+      return entry
+    }
+
+    if (entry.inFlight) {
+      await entry.inFlight
+      return entry
+    }
+
+    if (hasValue && stale) {
+      // 过期：立即返回旧值，并后台刷新
+      startRefresh(pluginName, entry).catch(() => {})
+      return entry
+    }
+
+    // 首次加载：需要阻塞等待结果
+    await startRefresh(pluginName, entry)
+    return entry
+  }
+
+  async function prefetch(pluginName: string): Promise<void> {
+    try {
+      await getOrFetch(pluginName)
+    } catch {
+      // 预加载不阻塞 UI，不向外抛错
+    }
+  }
+
+  async function save(pluginName: string, config: Record<string, any>): Promise<void> {
+    await updatePluginConfig(pluginName, config)
+    const entry = ensureEntry(pluginName)
+    entry.config = deepClone(config)
+    entry.fetchedAt = now()
+    // metadata 不变；如需同步元数据，调用 invalidate + getOrFetch
+  }
+
+  async function updateConfig(pluginName: string, config: Record<string, any>): Promise<void> {
+    await save(pluginName, config)
+  }
+
+  return {
+    get,
+    prefetch,
+    getOrFetch,
+    updateConfig,
+    invalidate,
+    isStale,
+    save
+  }
+}
\ No newline at end of file
diff --git a/dashboard/src/i18n/locales/en-US/features/extension.json b/dashboard/src/i18n/locales/en-US/features/extension.json
index 07affcd62a..7662827479 100644
--- a/dashboard/src/i18n/locales/en-US/features/extension.json
+++ b/dashboard/src/i18n/locales/en-US/features/extension.json
@@ -27,8 +27,9 @@
     "all": "All"
   },
   "views": {
-    "card": "Card View",
-    "list": "List View"
+    "card": "Card Layout",
+    "list": "List Layout",
+    "modManager": "Manager Layout"
   },
   "buttons": {
     "showSystemPlugins": "Show System Extensions",
@@ -86,7 +87,8 @@
       "tags": "Tags",
       "eventType": "Event Type",
       "specificType": "Specific Type",
-      "trigger": "Trigger"
+      "trigger": "Trigger",
+      "index": "Index"
     }
   },
   "empty": {
@@ -354,5 +356,57 @@
   },
   "pluginChangelog": {
     "menuTitle": "View Changelog"
+  },
+  "modManager": {
+    "viewToggle": {
+      "switchToLegacy": "Switch to Classic View",
+      "switchToModManager": "Switch to Manager Layout"
+    },
+    "panelTabs": {
+      "info": "Profile",
+      "config": "Config",
+      "overview": "Docs",
+      "changelog": "Changelog",
+      "reserved": "Extension"
+    },
+    "welcome": {
+      "title": "Welcome to AstrBot Plugin Manager",
+      "subtitle": "Manage, configure and monitor your plugins",
+      "links": {
+        "docs": "Documentation"
+      },
+      "actions": {
+        "viewOnGithub": "View on GitHub",
+        "retry": "Retry"
+      },
+      "readme": {
+        "loading": "Loading README...",
+        "errors": {
+          "rateLimited": "GitHub API rate limit exceeded, please try again later",
+          "fetchFailed": "Failed to fetch README"
+        },
+        "empty": {
+          "title": "No README available",
+          "subtitle": "This project has not provided a README file"
+        }
+      },
+      "tip": {
+        "market": "Tip: You can discover and install more plugins in the Plugin Market tab."
+      }
+    },
+    "changelogPanel": {
+      "loading": "Loading changelog...",
+      "errors": {
+        "fetchFailed": "Failed to fetch changelog",
+        "fetchError": "An error occurred while fetching the changelog"
+      },
+      "actions": {
+        "retry": "Retry"
+      },
+      "empty": {
+        "title": "No changelog available",
+        "subtitle": "This plugin has not provided a changelog"
+      }
+    }
   }
 }
diff --git a/dashboard/src/i18n/locales/ru-RU/features/extension.json b/dashboard/src/i18n/locales/ru-RU/features/extension.json
index 2ff06f5737..af7b95506f 100644
--- a/dashboard/src/i18n/locales/ru-RU/features/extension.json
+++ b/dashboard/src/i18n/locales/ru-RU/features/extension.json
@@ -1,4 +1,4 @@
-{
+{
     "title": "Плагины",
     "subtitle": "Управление и настройка расширений системы",
     "tabs": {
@@ -27,8 +27,9 @@
         "all": "Все"
     },
     "views": {
-        "card": "Плитка",
-        "list": "Список"
+        "card": "Плитка (Макет)",
+        "list": "Список (Макет)",
+        "modManager": "Менеджер"
     },
     "buttons": {
         "showSystemPlugins": "Показать системные",
@@ -86,7 +87,8 @@
             "tags": "Теги",
             "eventType": "Тип события",
             "specificType": "Тип",
-            "trigger": "Триггер"
+            "trigger": "Триггер",
+            "index": "№"
         }
     },
     "empty": {
@@ -354,5 +356,57 @@
     },
     "pluginChangelog": {
         "menuTitle": "Журнал изменений"
+    },
+    "modManager": {
+        "viewToggle": {
+            "switchToLegacy": "Переключить на классический вид",
+            "switchToModManager": "Переключить на менеджер"
+        },
+        "panelTabs": {
+            "info": "Обзор",
+            "config": "Настройки",
+            "overview": "Документы",
+            "changelog": "Изменения",
+            "reserved": "Расширение"
+        },
+        "welcome": {
+            "title": "Добро пожаловать в менеджер плагинов AstrBot",
+            "subtitle": "Управляйте, настраивайте и отслеживайте свои плагины",
+            "links": {
+                "docs": "Документация"
+            },
+            "actions": {
+                "viewOnGithub": "Открыть на GitHub",
+                "retry": "Повторить"
+            },
+            "readme": {
+                "loading": "Загрузка README...",
+                "errors": {
+                    "rateLimited": "Превышен лимит запросов GitHub API, попробуйте позже",
+                    "fetchFailed": "Не удалось загрузить README"
+                },
+                "empty": {
+                    "title": "README отсутствует",
+                    "subtitle": "Этот проект ещё не предоставил файл README"
+                }
+            },
+            "tip": {
+                "market": "Совет: Вы можете найти и установить новые плагины на вкладке «Магазин плагинов»."
+            }
+        },
+        "changelogPanel": {
+            "loading": "Загрузка журнала изменений...",
+            "errors": {
+                "fetchFailed": "Не удалось загрузить журнал изменений",
+                "fetchError": "Произошла ошибка при загрузке журнала"
+            },
+            "actions": {
+                "retry": "Повторить"
+            },
+            "empty": {
+                "title": "Журнал изменений отсутствует",
+                "subtitle": "Этот плагин ещё не предоставил журнал изменений"
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/dashboard/src/i18n/locales/zh-CN/features/extension.json b/dashboard/src/i18n/locales/zh-CN/features/extension.json
index f42173ffa0..63d1159432 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/extension.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/extension.json
@@ -27,8 +27,9 @@
     "all": "全部"
   },
   "views": {
-    "card": "卡片视图",
-    "list": "列表视图"
+    "card": "卡片布局",
+    "list": "列表布局",
+    "modManager": "管理器布局"
   },
   "buttons": {
     "showSystemPlugins": "显示系统插件",
@@ -86,7 +87,8 @@
       "tags": "标签",
       "eventType": "行为类型",
       "specificType": "具体类型",
-      "trigger": "触发方式"
+      "trigger": "触发方式",
+      "index": "序号"
     }
   },
   "empty": {
@@ -354,5 +356,57 @@
   },
   "pluginChangelog": {
     "menuTitle": "查看更新日志"
+  },
+  "modManager": {
+    "viewToggle": {
+      "switchToLegacy": "切换到经典视图",
+      "switchToModManager": "切换到管理器布局"
+    },
+    "panelTabs": {
+      "info": "概况",
+      "config": "配置",
+      "overview": "文档",
+      "changelog": "更新日志",
+      "reserved": "扩展区"
+    },
+    "welcome": {
+      "title": "欢迎使用 AstrBot 插件管理器",
+      "subtitle": "管理、配置和监控你的插件",
+      "links": {
+        "docs": "文档"
+      },
+      "actions": {
+        "viewOnGithub": "在 GitHub 上查看",
+        "retry": "重试"
+      },
+      "readme": {
+        "loading": "正在加载 README...",
+        "errors": {
+          "rateLimited": "GitHub API 请求频率受限，请稍后再试",
+          "fetchFailed": "获取 README 失败"
+        },
+        "empty": {
+          "title": "暂无 README",
+          "subtitle": "该项目尚未提供 README 文件"
+        }
+      },
+      "tip": {
+        "market": "提示：你可以在「插件市场」标签页中发现和安装更多插件。"
+      }
+    },
+    "changelogPanel": {
+      "loading": "正在加载更新日志...",
+      "errors": {
+        "fetchFailed": "获取更新日志失败",
+        "fetchError": "获取更新日志时发生错误"
+      },
+      "actions": {
+        "retry": "重试"
+      },
+      "empty": {
+        "title": "暂无更新日志",
+        "subtitle": "该插件尚未提供更新日志"
+      }
+    }
   }
 }
diff --git a/dashboard/src/scss/components/_MarkdownBody.scss b/dashboard/src/scss/components/_MarkdownBody.scss
new file mode 100644
index 0000000000..8e26d660a8
--- /dev/null
+++ b/dashboard/src/scss/components/_MarkdownBody.scss
@@ -0,0 +1,247 @@
+.markdown-body {
+  --markdown-border: rgba(128, 128, 128, 0.3);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
+    sans-serif;
+  line-height: 1.6;
+  padding: 8px 0;
+  color: var(--v-theme-secondaryText);
+}
+
+.markdown-body [align="center"] {
+  text-align: center;
+}
+.markdown-body [align="center"] > div {
+  text-align: center;
+}
+.markdown-body [align="right"] {
+  text-align: right;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+  scroll-margin-top: 12px;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+  border-bottom: 1px solid var(--v-theme-border);
+  padding-bottom: 0.3em;
+}
+.markdown-body h2 {
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--v-theme-border);
+  padding-bottom: 0.3em;
+}
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body .code-block-wrapper {
+  position: relative;
+  margin-bottom: 16px;
+}
+.markdown-body .code-lang-label {
+  position: absolute;
+  top: 8px;
+  left: 12px;
+  font-size: 12px;
+  color: #8b949e;
+  text-transform: uppercase;
+  font-weight: 500;
+  z-index: 1;
+}
+
+.markdown-body .copy-code-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: rgba(110, 118, 129, 0.4);
+  border: none;
+  border-radius: 6px;
+  padding: 6px;
+  cursor: pointer;
+  color: #c9d1d9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+  z-index: 1;
+}
+
+.markdown-body .copy-code-btn:hover {
+  background: rgba(110, 118, 129, 0.6);
+  color: #fff;
+}
+
+.markdown-body code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  background-color: rgba(110, 118, 129, 0.2);
+  border-radius: 6px;
+  font-size: 85%;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+}
+
+.markdown-body pre.hljs {
+  padding: 16px;
+  padding-top: 32px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #0d1117;
+  border-radius: 6px;
+  margin: 0;
+}
+
+.markdown-body pre.hljs code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+  color: #c9d1d9;
+}
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 2em;
+  margin-bottom: 16px;
+}
+
+.markdown-body img {
+  display: inline-block;
+  max-width: 100% !important;
+  width: auto !important;
+  height: auto !important;
+  margin: 4px 0;
+  box-sizing: border-box;
+  background-color: var(--v-theme-background);
+  border-radius: 3px;
+  vertical-align: middle;
+}
+
+// Constrain images inside table cells to prevent row height explosion
+.markdown-body table td img,
+.markdown-body table th img {
+  max-height: 200px;
+  object-fit: contain;
+}
+
+.markdown-body img[src*="shields.io"],
+.markdown-body img[src*="badge"],
+.markdown-body img[src*="hellogithub"],
+.markdown-body img[src*="trendshift"] {
+  display: inline-block;
+  vertical-align: middle;
+  height: auto;
+  margin: 2px 4px;
+  background-color: transparent;
+}
+
+.markdown-body blockquote {
+  padding: 0 1em;
+  color: var(--v-theme-secondaryText);
+  border-left: 0.25em solid var(--v-theme-border);
+  margin-bottom: 16px;
+}
+
+.markdown-body a {
+  color: var(--v-theme-primary);
+  text-decoration: none;
+}
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  width: 100%;
+  margin-bottom: 0;
+  border: 1px solid var(--markdown-border);
+}
+.markdown-body .table-container {
+  width: 100%;
+  overflow-x: auto;
+  margin-bottom: 16px;
+  border: 1px solid var(--markdown-border);
+  border-radius: 6px;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+  padding: 6px 13px;
+  border: 1px solid var(--markdown-border);
+}
+.markdown-body table th {
+  font-weight: 600;
+  background-color: rgba(128, 128, 128, 0.1);
+}
+.markdown-body table tr {
+  background-color: transparent;
+}
+.markdown-body table tr:nth-child(2n) {
+  background-color: rgba(128, 128, 128, 0.05);
+}
+
+.markdown-body hr {
+  height: 0.25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: var(--v-theme-containerBg);
+  border: 0;
+}
+
+.markdown-body details {
+  margin-bottom: 16px;
+  border: 1px solid var(--v-theme-border);
+  border-radius: 6px;
+  padding: 8px 12px;
+  background-color: var(--v-theme-surface);
+}
+
+.markdown-body details[open] {
+  padding-bottom: 12px;
+}
+.markdown-body summary {
+  cursor: pointer;
+  font-weight: 600;
+  padding: 4px 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.markdown-body summary::before {
+  content: "▶";
+  font-size: 0.75em;
+  transition: transform 0.2s ease;
+}
+.markdown-body details[open] summary::before {
+  transform: rotate(90deg);
+}
+.markdown-body summary::-webkit-details-marker {
+  display: none;
+}
+.markdown-body details > *:not(summary) {
+  margin-top: 12px;
+}
+
+.markdown-body .hljs-keyword,
+.markdown-body .hljs-selector-tag,
+.markdown-body .hljs-title,
+.markdown-body .hljs-section,
+.markdown-body .hljs-doctag,
+.markdown-body .hljs-name,
+.markdown-body .hljs-strong {
+  font-weight: bold;
+}
diff --git a/dashboard/src/scss/style.scss b/dashboard/src/scss/style.scss
index d473cbb68e..f6dcc18e18 100644
--- a/dashboard/src/scss/style.scss
+++ b/dashboard/src/scss/style.scss
@@ -13,6 +13,7 @@
 @import './components/VTextField';
 @import './components/VTabs';
 @import './components/VScrollbar';
+@import './components/MarkdownBody';
 
 @import './pages/dashboards';
 
diff --git a/dashboard/src/views/extension/InstalledPluginsTab.vue b/dashboard/src/views/extension/InstalledPluginsTab.vue
index 82d0d75e5c..2545631f30 100644
--- a/dashboard/src/views/extension/InstalledPluginsTab.vue
+++ b/dashboard/src/views/extension/InstalledPluginsTab.vue
@@ -2,8 +2,10 @@
 import PluginSortControl from "@/components/extension/PluginSortControl.vue";
 import ExtensionCard from "@/components/shared/ExtensionCard.vue";
 import StyledMenu from "@/components/shared/StyledMenu.vue";
+import ModManagerLayout from "@/components/extension/mod-manager/ModManagerLayout.vue";
 import defaultPluginIcon from "@/assets/images/plugin_icon.png";
 import { normalizeTextInput } from "@/utils/inputValue";
+import { computed, ref, watch } from "vue";
 
 const props = defineProps({
   state: {
@@ -155,6 +157,28 @@ const {
   handleLocaleChange,
   searchDebounceTimer,
 } = props.state;
+
+// MOD manager view mode persistence
+const VIEW_MODE_KEY = 'pluginManager.installedViewMode'
+const installedViewMode = ref(localStorage.getItem(VIEW_MODE_KEY) || 'legacy')
+watch(installedViewMode, (val) => {
+  localStorage.setItem(VIEW_MODE_KEY, val)
+})
+
+// Unified three-state view mode: 'card' | 'list' | 'mod'
+const combinedViewMode = computed(() => {
+  if (installedViewMode.value === 'mod') return 'mod'
+  return isListView.value ? 'list' : 'card'
+})
+
+const setCombinedViewMode = (val) => {
+  if (val === 'mod') {
+    installedViewMode.value = 'mod'
+  } else {
+    installedViewMode.value = 'legacy'
+    isListView.value = val === 'list'
+  }
+}
 </script>
 
 <template>
@@ -180,19 +204,60 @@ const {
                   </v-text-field>
 
                   <v-btn-toggle
-                    v-model="isListView"
+                    :model-value="combinedViewMode"
+                    @update:model-value="setCombinedViewMode"
                     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 value="card">
+                      <v-icon size="18">mdi-view-grid</v-icon>
+                      <v-tooltip activator="parent" location="bottom">{{ tm('views.card') }}</v-tooltip>
+                    </v-btn>
+                    <v-btn value="list">
+                      <v-icon size="18">mdi-view-list</v-icon>
+                      <v-tooltip activator="parent" location="bottom">{{ tm('views.list') }}</v-tooltip>
+                    </v-btn>
+                    <v-btn value="mod">
+                      <v-icon size="18">mdi-view-dashboard-outline</v-icon>
+                      <v-tooltip activator="parent" location="bottom">{{ tm('views.modManager') }}</v-tooltip>
+                    </v-btn>
                   </v-btn-toggle>
                 </div>
               </div>
             </div>
 
+            <!-- MOD Manager view -->
+            <div v-if="installedViewMode === 'mod'" style="height: calc(100vh - 200px)">
+              <ModManagerLayout
+                :plugins="filteredPlugins"
+                :loading="loading_"
+                :show-reserved="showReserved"
+                installed-view-mode="mod"
+                :updatable-count="updatableExtensions.length"
+                :search="pluginSearch"
+                :updating-all="updatingAll"
+                @update:search="pluginSearch = $event"
+                @update:show-reserved="toggleShowReserved"
+                @update:installed-view-mode="installedViewMode = $event"
+                @install="dialog = true"
+                @update-all="showUpdateAllConfirm"
+                @action-enable="pluginOn($event)"
+                @action-disable="pluginOff($event)"
+                @action-reload="reloadPlugin($event)"
+                @action-update="updateExtension($event)"
+                @action-uninstall="uninstallExtension($event)"
+                @action-configure="openExtensionConfig($event.name)"
+                @action-open-readme="viewReadme($event)"
+                @action-open-repo="(url) => window.open(url, '_blank')"
+                @config-saved="getExtensions"
+              />
+            </div>
+
+            <!-- Legacy views -->
+            <template v-else>
+
             <v-row class="mb-4">
               <v-col cols="12">
                 <div class="installed-toolbar">
@@ -666,6 +731,8 @@ const {
               </div>
             </v-fade-transition>
 
+            </template>
+
             <v-tooltip :text="tm('market.installPlugin')" location="left">
               <template v-slot:activator="{ props }">
                 <button