From ac42fce39ba0eab7cf2268d7e8d0cbd78decd8ab Mon Sep 17 00:00:00 2001
From: AnxForever <130662349+AnxForever@users.noreply.github.com>
Date: Thu, 18 Jun 2026 16:21:24 +0800
Subject: [PATCH 1/3] feat: add sort and batch operations to installed plugins
 page

- Add sorting controls (name, author, updated time, update status) to installed plugins tab
- Add multi-select mode with checkbox overlay on plugin cards
- Add batch operations toolbar (enable, disable, uninstall) with confirmation dialog
- System/reserved plugins are excluded from selection
- Reuse existing PluginSortControl component for consistency with market tab
- Add i18n keys for zh-CN and en-US
---
 .../src/components/shared/ExtensionCard.vue   |  39 ++++
 .../locales/en-US/features/extension.json     |  21 +++
 .../locales/zh-CN/features/extension.json     |  21 +++
 .../views/extension/InstalledPluginsTab.vue   | 158 +++++++++++++++-
 .../src/views/extension/useExtensionPage.js   | 174 ++++++++++++++++++
 5 files changed, 411 insertions(+), 2 deletions(-)

diff --git a/dashboard/src/components/shared/ExtensionCard.vue b/dashboard/src/components/shared/ExtensionCard.vue
index 8335c47a53..d67279c05f 100644
--- a/dashboard/src/components/shared/ExtensionCard.vue
+++ b/dashboard/src/components/shared/ExtensionCard.vue
@@ -25,6 +25,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 // 定义要发送到父组件的事件
@@ -39,6 +47,7 @@ const emit = defineEmits([
   "view-changelog",
   "toggle-pin",
   "open-webui",
+  "toggle-select",
 ]);
 
 const hasPages = computed(() => {
@@ -165,6 +174,22 @@ const openWebui = () => {
           : '#ffffffdd',
     }"
   >
+    <!-- 选择模式下的复选框覆盖层 -->
+    <div
+      v-if="selectable && !extension.reserved"
+      class="extension-select-overlay"
+      @click.stop="$emit('toggle-select')"
+    >
+      <v-checkbox
+        :model-value="selected"
+        density="compact"
+        color="primary"
+        hide-details
+        class="extension-select-checkbox"
+        @click.stop="$emit('toggle-select')"
+      />
+    </div>
+
     <v-card-text class="extension-card-text">
       <div class="extension-content-row">
         <div class="extension-image-container">
@@ -416,6 +441,20 @@ const openWebui = () => {
 </template>
 
 <style scoped>
+.extension-select-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  padding: 4px;
+}
+
+.extension-select-checkbox {
+  background: rgba(var(--v-theme-surface), 0.92);
+  border-radius: 6px;
+  padding: 2px;
+}
+
 .extension-card-text {
   padding: 12px 14px 8px;
   width: 100%;
diff --git a/dashboard/src/i18n/locales/en-US/features/extension.json b/dashboard/src/i18n/locales/en-US/features/extension.json
index 1a10c9938c..f1cdec95fc 100644
--- a/dashboard/src/i18n/locales/en-US/features/extension.json
+++ b/dashboard/src/i18n/locales/en-US/features/extension.json
@@ -426,6 +426,27 @@
     "goToManage": "Go to Manage",
     "later": "Later"
   },
+  "batch": {
+    "selected": "{count} plugin(s) selected",
+    "selectAll": "Select All",
+    "deselectAll": "Deselect All",
+    "clearSelection": "Clear Selection",
+    "enable": "Batch Enable",
+    "disable": "Batch Disable",
+    "uninstall": "Batch Uninstall",
+    "noEnabledPlugins": "No enabled plugins to disable",
+    "noDisabledPlugins": "No disabled plugins to enable",
+    "enableSuccess": "Successfully enabled {count} plugin(s)",
+    "enablePartial": "{success} enabled, {failed} failed",
+    "disableSuccess": "Successfully disabled {count} plugin(s)",
+    "disablePartial": "{success} disabled, {failed} failed",
+    "uninstallSuccess": "Successfully uninstalled {count} plugin(s)",
+    "uninstallPartial": "{success} uninstalled, {failed} failed",
+    "noPluginsToUninstall": "No plugins selected to uninstall",
+    "uninstallConfirmTitle": "Confirm Batch Uninstall",
+    "uninstallConfirmMessage": "Are you sure you want to uninstall {count} selected plugin(s)? This action cannot be undone.",
+    "uninstallConfirm": "Confirm Uninstall"
+  },
   "pluginChangelog": {
     "menuTitle": "View Changelog"
   }
diff --git a/dashboard/src/i18n/locales/zh-CN/features/extension.json b/dashboard/src/i18n/locales/zh-CN/features/extension.json
index 05ee070287..ab2f7b9082 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/extension.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/extension.json
@@ -426,6 +426,27 @@
     "goToManage": "前往处理",
     "later": "稍后处理"
   },
+  "batch": {
+    "selected": "已选中 {count} 个插件",
+    "selectAll": "全选",
+    "deselectAll": "取消全选",
+    "clearSelection": "取消选择",
+    "enable": "批量启用",
+    "disable": "批量禁用",
+    "uninstall": "批量卸载",
+    "noEnabledPlugins": "没有已启用的插件需要禁用",
+    "noDisabledPlugins": "没有已禁用的插件需要启用",
+    "enableSuccess": "成功启用 {count} 个插件",
+    "enablePartial": "{success} 个启用成功，{failed} 个失败",
+    "disableSuccess": "成功禁用 {count} 个插件",
+    "disablePartial": "{success} 个禁用成功，{failed} 个失败",
+    "uninstallSuccess": "成功卸载 {count} 个插件",
+    "uninstallPartial": "{success} 个卸载成功，{failed} 个失败",
+    "noPluginsToUninstall": "没有选中的插件可以卸载",
+    "uninstallConfirmTitle": "批量卸载确认",
+    "uninstallConfirmMessage": "确定要卸载选中的 {count} 个插件吗？此操作不可撤销。",
+    "uninstallConfirm": "确认卸载"
+  },
   "pluginChangelog": {
     "menuTitle": "查看更新日志"
   }
diff --git a/dashboard/src/views/extension/InstalledPluginsTab.vue b/dashboard/src/views/extension/InstalledPluginsTab.vue
index 5e41bc68b1..97460015f3 100644
--- a/dashboard/src/views/extension/InstalledPluginsTab.vue
+++ b/dashboard/src/views/extension/InstalledPluginsTab.vue
@@ -1,4 +1,5 @@
 <script setup>
+import PluginSortControl from "@/components/extension/PluginSortControl.vue";
 import ExtensionCard from "@/components/shared/ExtensionCard.vue";
 import { normalizeTextInput } from "@/utils/inputValue";
 import {
@@ -73,6 +74,8 @@ const {
   refreshingMarket,
   sortBy,
   sortOrder,
+  sortInstalledBy,
+  sortInstalledOrder,
   randomPluginNames,
   normalizeStr,
   toPinyinText,
@@ -141,6 +144,20 @@ const {
   refreshPluginMarket,
   handleLocaleChange,
   searchDebounceTimer,
+  selectedPluginNames,
+  selectModeActive,
+  selectedCount,
+  selectableInstalledPlugins,
+  isAllSelected,
+  toggleSelectPlugin,
+  toggleSelectAll,
+  clearSelection,
+  batchEnable,
+  batchDisable,
+  requestBatchUninstall,
+  executeBatchUninstall,
+  cancelBatchUninstall,
+  batchUninstallConfirmDialog,
 } = props.state;
 
 const openPluginDetail = (extension) => {
@@ -166,6 +183,14 @@ const openPluginWebui = (extension) => {
 
 const pinnedExtensionNames = ref(readPinnedExtensions());
 
+const installedSortItems = computed(() => [
+  { title: tm("sort.default"), value: "default" },
+  { title: tm("sort.name"), value: "name" },
+  { title: tm("sort.author"), value: "author" },
+  { title: tm("sort.updated"), value: "updated" },
+  { title: tm("sort.updateStatus"), value: "updateStatus" },
+]);
+
 const pinnedExtensionOrder = computed(() => {
   const order = new Map();
   pinnedExtensionNames.value.forEach((name, index) => {
@@ -176,7 +201,37 @@ const pinnedExtensionOrder = computed(() => {
 
 const sortedInstalledPlugins = computed(() => {
   const order = pinnedExtensionOrder.value;
-  return [...filteredPlugins.value].sort((a, b) => {
+  let plugins = [...filteredPlugins.value];
+
+  // Apply user-selected sort (pinned items stay on top regardless)
+  if (sortInstalledBy.value === "name") {
+    plugins.sort((a, b) => {
+      const r = (a?.name || "").localeCompare(b?.name || "");
+      return sortInstalledOrder.value === "desc" ? -r : r;
+    });
+  } else if (sortInstalledBy.value === "author") {
+    plugins.sort((a, b) => {
+      const r = ((a?.author || "").toLowerCase()).localeCompare(
+        (b?.author || "").toLowerCase(),
+      );
+      return sortInstalledOrder.value === "desc" ? -r : r;
+    });
+  } else if (sortInstalledBy.value === "updated") {
+    plugins.sort((a, b) => {
+      const da = a?.updated_at ? new Date(a.updated_at).getTime() : 0;
+      const db = b?.updated_at ? new Date(b.updated_at).getTime() : 0;
+      return sortInstalledOrder.value === "desc" ? db - da : da - db;
+    });
+  } else if (sortInstalledBy.value === "updateStatus") {
+    plugins.sort((a, b) => {
+      const ua = a?.has_update ? 1 : 0;
+      const ub = b?.has_update ? 1 : 0;
+      return sortInstalledOrder.value === "desc" ? ub - ua : ua - ub;
+    });
+  }
+
+  // Pinned items always stay on top, respecting their pinned order
+  return plugins.sort((a, b) => {
     const aIndex = order.has(a?.name)
       ? order.get(a.name)
       : Number.POSITIVE_INFINITY;
@@ -237,6 +292,16 @@ const togglePinnedExtension = (extension) => {
             style="min-width: 220px; max-width: 340px"
           >
           </v-text-field>
+          <PluginSortControl
+            v-model="sortInstalledBy"
+            :items="installedSortItems"
+            :label="tm('sort.by')"
+            :order="sortInstalledOrder"
+            :ascending-label="tm('sort.ascending')"
+            :descending-label="tm('sort.descending')"
+            :show-order="sortInstalledBy !== 'default'"
+            @update:order="sortInstalledOrder = $event"
+          />
         </div>
       </div>
     </div>
@@ -315,6 +380,88 @@ const togglePinnedExtension = (extension) => {
       </v-card-text>
     </v-card>
 
+    <!-- 批量操作工具栏 -->
+    <v-slide-y-transition>
+      <v-card
+        v-if="selectedCount > 0"
+        class="mb-4 rounded-lg"
+        color="primary"
+        variant="tonal"
+      >
+        <v-card-text class="d-flex align-center flex-wrap py-3" style="gap: 8px">
+          <span class="text-body-1 font-weight-medium mr-2">
+            {{ tm("batch.selected", { count: selectedCount }) }}
+          </span>
+          <v-btn
+            size="small"
+            variant="text"
+            @click="toggleSelectAll"
+          >
+            {{ isAllSelected ? tm("batch.deselectAll") : tm("batch.selectAll") }}
+          </v-btn>
+          <v-divider vertical class="mx-1" />
+          <v-btn
+            size="small"
+            color="success"
+            variant="tonal"
+            prepend-icon="mdi-check-circle"
+            @click="batchEnable"
+          >
+            {{ tm("batch.enable") }}
+          </v-btn>
+          <v-btn
+            size="small"
+            color="warning"
+            variant="tonal"
+            prepend-icon="mdi-cancel"
+            @click="batchDisable"
+          >
+            {{ tm("batch.disable") }}
+          </v-btn>
+          <v-btn
+            size="small"
+            color="error"
+            variant="tonal"
+            prepend-icon="mdi-delete"
+            @click="requestBatchUninstall"
+          >
+            {{ tm("batch.uninstall") }}
+          </v-btn>
+          <v-spacer />
+          <v-btn
+            size="small"
+            variant="text"
+            @click="clearSelection"
+          >
+            {{ tm("batch.clearSelection") }}
+          </v-btn>
+        </v-card-text>
+      </v-card>
+    </v-slide-y-transition>
+
+    <!-- 批量卸载确认对话框 -->
+    <v-dialog v-model="batchUninstallConfirmDialog" max-width="500px">
+      <v-card>
+        <v-card-title class="bg-error text-white py-3">
+          <v-icon color="white" class="me-2">mdi-alert</v-icon>
+          <span>{{ tm("batch.uninstallConfirmTitle") }}</span>
+        </v-card-title>
+        <v-card-text class="py-4">
+          <p>{{ tm("batch.uninstallConfirmMessage", { count: selectedCount }) }}</p>
+        </v-card-text>
+        <v-divider />
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn variant="text" @click="cancelBatchUninstall">
+            {{ tm("buttons.cancel") }}
+          </v-btn>
+          <v-btn color="error" @click="executeBatchUninstall">
+            {{ tm("batch.uninstallConfirm") }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
     <v-fade-transition hide-on-leave>
       <div>
         <v-row v-if="sortedInstalledPlugins.length === 0" class="text-center">
@@ -340,10 +487,17 @@ const togglePinnedExtension = (extension) => {
             <ExtensionCard
               :extension="extension"
               :is-pinned="isPinnedExtension(extension)"
+              :selectable="selectModeActive"
+              :selected="selectedPluginNames.has(extension.name)"
               class="rounded-lg"
               style="background-color: rgb(var(--v-theme-mcpCardBg))"
-              @click="openPluginDetail(extension)"
+              @click="
+                selectModeActive
+                  ? toggleSelectPlugin(extension.name)
+                  : openPluginDetail(extension)
+              "
               @toggle-pin="togglePinnedExtension(extension)"
+              @toggle-select="toggleSelectPlugin(extension.name)"
               @configure="openExtensionConfig(extension.name)"
               @uninstall="
                 (ext, options) => uninstallExtension(ext.name, options)
diff --git a/dashboard/src/views/extension/useExtensionPage.js b/dashboard/src/views/extension/useExtensionPage.js
index 3d48c4e43c..c6fa032f30 100644
--- a/dashboard/src/views/extension/useExtensionPage.js
+++ b/dashboard/src/views/extension/useExtensionPage.js
@@ -185,9 +185,167 @@ export const useExtensionPage = () => {
   const refreshingMarket = ref(false);
   const sortBy = ref("default"); // default, stars, author, updated
   const sortOrder = ref("desc"); // desc (降序) or asc (升序)
+  const sortInstalledBy = ref("default"); // default, name, author, updated, updateStatus
+  const sortInstalledOrder = ref("desc");
   const randomPluginNames = ref([]);
   const marketCategoryFilter = ref("all");
 
+  // 批量选择相关
+  const selectedPluginNames = ref(new Set());
+  const selectModeActive = ref(false);
+  const batchUninstallConfirmDialog = ref(false);
+
+  const selectedCount = computed(() => selectedPluginNames.value.size);
+
+  const selectableInstalledPlugins = computed(() =>
+    filteredPlugins.value.filter((plugin) => !plugin?.reserved),
+  );
+
+  const isAllSelected = computed(() => {
+    const selectable = selectableInstalledPlugins.value;
+    return selectable.length > 0 && selectedPluginNames.value.size === selectable.length;
+  });
+
+  const toggleSelectPlugin = (pluginName) => {
+    if (!pluginName) return;
+    // Never allow selecting reserved (system) plugins
+    const plugin = filteredPlugins.value.find((p) => p.name === pluginName);
+    if (!plugin || plugin.reserved) return;
+
+    const next = new Set(selectedPluginNames.value);
+    if (next.has(pluginName)) {
+      next.delete(pluginName);
+      if (next.size === 0) {
+        selectModeActive.value = false;
+      }
+    } else {
+      next.add(pluginName);
+      selectModeActive.value = true;
+    }
+    selectedPluginNames.value = next;
+  };
+
+  const toggleSelectAll = () => {
+    if (isAllSelected.value) {
+      selectedPluginNames.value = new Set();
+      selectModeActive.value = false;
+    } else {
+      selectedPluginNames.value = new Set(
+        selectableInstalledPlugins.value.map((p) => p.name),
+      );
+      selectModeActive.value = true;
+    }
+  };
+
+  const clearSelection = () => {
+    selectedPluginNames.value = new Set();
+    selectModeActive.value = false;
+  };
+
+  const batchEnable = async () => {
+    const targets = filteredPlugins.value.filter(
+      (p) => selectedPluginNames.value.has(p.name) && !p.activated,
+    );
+    if (targets.length === 0) {
+      toast(tm("batch.noDisabledPlugins"), "info");
+      return;
+    }
+    let successCount = 0;
+    let failCount = 0;
+    for (const ext of targets) {
+      try {
+        await pluginOn(ext);
+        successCount += 1;
+      } catch {
+        failCount += 1;
+      }
+    }
+    clearSelection();
+    if (failCount > 0) {
+      toast(
+        tm("batch.enablePartial", { success: successCount, failed: failCount }),
+        "warning",
+      );
+    } else {
+      toast(tm("batch.enableSuccess", { count: successCount }), "success");
+    }
+  };
+
+  const batchDisable = async () => {
+    const targets = filteredPlugins.value.filter(
+      (p) => selectedPluginNames.value.has(p.name) && p.activated,
+    );
+    if (targets.length === 0) {
+      toast(tm("batch.noEnabledPlugins"), "info");
+      return;
+    }
+    let successCount = 0;
+    let failCount = 0;
+    for (const ext of targets) {
+      try {
+        await pluginOff(ext);
+        successCount += 1;
+      } catch {
+        failCount += 1;
+      }
+    }
+    clearSelection();
+    if (failCount > 0) {
+      toast(
+        tm("batch.disablePartial", { success: successCount, failed: failCount }),
+        "warning",
+      );
+    } else {
+      toast(tm("batch.disableSuccess", { count: successCount }), "success");
+    }
+  };
+
+  const requestBatchUninstall = () => {
+    const targets = filteredPlugins.value.filter(
+      (p) => selectedPluginNames.value.has(p.name),
+    );
+    if (targets.length === 0) {
+      toast(tm("batch.noPluginsToUninstall"), "info");
+      return;
+    }
+    batchUninstallConfirmDialog.value = true;
+  };
+
+  const executeBatchUninstall = async () => {
+    batchUninstallConfirmDialog.value = false;
+    const targets = filteredPlugins.value.filter(
+      (p) => selectedPluginNames.value.has(p.name),
+    );
+    if (targets.length === 0) return;
+    let successCount = 0;
+    let failCount = 0;
+    for (const ext of targets) {
+      try {
+        await uninstallExtension(ext.name, {
+          deleteConfig: false,
+          deleteData: false,
+        });
+        successCount += 1;
+      } catch (e) {
+        console.error(`Batch uninstall failed for ${ext.name}:`, e);
+        failCount += 1;
+      }
+    }
+    clearSelection();
+    if (failCount > 0) {
+      toast(
+        tm("batch.uninstallPartial", { success: successCount, failed: failCount }),
+        "warning",
+      );
+    } else {
+      toast(tm("batch.uninstallSuccess", { count: successCount }), "success");
+    }
+  };
+
+  const cancelBatchUninstall = () => {
+    batchUninstallConfirmDialog.value = false;
+  };
+
   // 插件市场拼音搜索
 
   const normalizeMarketCategory = (rawCategory) => {
@@ -1804,6 +1962,22 @@ export const useExtensionPage = () => {
     refreshingMarket,
     sortBy,
     sortOrder,
+    sortInstalledBy,
+    sortInstalledOrder,
+    selectedPluginNames,
+    selectModeActive,
+    selectedCount,
+    selectableInstalledPlugins,
+    isAllSelected,
+    toggleSelectPlugin,
+    toggleSelectAll,
+    clearSelection,
+    batchEnable,
+    batchDisable,
+    requestBatchUninstall,
+    executeBatchUninstall,
+    cancelBatchUninstall,
+    batchUninstallConfirmDialog,
     randomPluginNames,
     normalizeStr,
     toPinyinText,

From fd2acd3347d073080bed211d6df1d57f00759c41 Mon Sep 17 00:00:00 2001
From: AnxForever <130662349+AnxForever@users.noreply.github.com>
Date: Thu, 18 Jun 2026 16:26:34 +0800
Subject: [PATCH 2/3] refactor: simplify batch selection logic per code-review
 feedback

- Derive selectModeActive from selectedPluginNames computed (prevents sync bugs)
- Extract runBatchAction helper to eliminate ~50 lines of duplicated code
- Add clarifying comment explaining pin-sort vs user-sort interaction
---
 .../views/extension/InstalledPluginsTab.vue   |   5 +-
 .../src/views/extension/useExtensionPage.js   | 125 +++++++-----------
 2 files changed, 53 insertions(+), 77 deletions(-)

diff --git a/dashboard/src/views/extension/InstalledPluginsTab.vue b/dashboard/src/views/extension/InstalledPluginsTab.vue
index 97460015f3..ff7907e316 100644
--- a/dashboard/src/views/extension/InstalledPluginsTab.vue
+++ b/dashboard/src/views/extension/InstalledPluginsTab.vue
@@ -203,7 +203,10 @@ const sortedInstalledPlugins = computed(() => {
   const order = pinnedExtensionOrder.value;
   let plugins = [...filteredPlugins.value];
 
-  // Apply user-selected sort (pinned items stay on top regardless)
+  // Apply user-selected sort first, then pin-sort as a stable override.
+  // Pinned items always stay on top; the user sort determines order within
+  // non-pinned items (all of which have pin-order Infinity, so sort() treats
+  // them as equal and preserves the previous user-sort ordering).
   if (sortInstalledBy.value === "name") {
     plugins.sort((a, b) => {
       const r = (a?.name || "").localeCompare(b?.name || "");
diff --git a/dashboard/src/views/extension/useExtensionPage.js b/dashboard/src/views/extension/useExtensionPage.js
index c6fa032f30..c6124468c7 100644
--- a/dashboard/src/views/extension/useExtensionPage.js
+++ b/dashboard/src/views/extension/useExtensionPage.js
@@ -192,10 +192,11 @@ export const useExtensionPage = () => {
 
   // 批量选择相关
   const selectedPluginNames = ref(new Set());
-  const selectModeActive = ref(false);
   const batchUninstallConfirmDialog = ref(false);
 
+  // Derive selection state from selectedPluginNames to avoid manual sync bugs
   const selectedCount = computed(() => selectedPluginNames.value.size);
+  const selectModeActive = computed(() => selectedCount.value > 0);
 
   const selectableInstalledPlugins = computed(() =>
     filteredPlugins.value.filter((plugin) => !plugin?.reserved),
@@ -206,6 +207,14 @@ export const useExtensionPage = () => {
     return selectable.length > 0 && selectedPluginNames.value.size === selectable.length;
   });
 
+  const setSelectedPlugins = (names) => {
+    selectedPluginNames.value = new Set(names);
+  };
+
+  const clearSelection = () => {
+    setSelectedPlugins([]);
+  };
+
   const toggleSelectPlugin = (pluginName) => {
     if (!pluginName) return;
     // Never allow selecting reserved (system) plugins
@@ -215,91 +224,71 @@ export const useExtensionPage = () => {
     const next = new Set(selectedPluginNames.value);
     if (next.has(pluginName)) {
       next.delete(pluginName);
-      if (next.size === 0) {
-        selectModeActive.value = false;
-      }
     } else {
       next.add(pluginName);
-      selectModeActive.value = true;
     }
     selectedPluginNames.value = next;
   };
 
   const toggleSelectAll = () => {
     if (isAllSelected.value) {
-      selectedPluginNames.value = new Set();
-      selectModeActive.value = false;
+      clearSelection();
     } else {
-      selectedPluginNames.value = new Set(
-        selectableInstalledPlugins.value.map((p) => p.name),
-      );
-      selectModeActive.value = true;
+      setSelectedPlugins(selectableInstalledPlugins.value.map((p) => p.name));
     }
   };
 
-  const clearSelection = () => {
-    selectedPluginNames.value = new Set();
-    selectModeActive.value = false;
-  };
-
-  const batchEnable = async () => {
+  // Shared helper for batch operations (enable, disable, uninstall)
+  const runBatchAction = async ({ filterFn, action, emptyMessageKey, partialMessageKey, successMessageKey }) => {
     const targets = filteredPlugins.value.filter(
-      (p) => selectedPluginNames.value.has(p.name) && !p.activated,
+      (p) => selectedPluginNames.value.has(p.name) && filterFn(p),
     );
     if (targets.length === 0) {
-      toast(tm("batch.noDisabledPlugins"), "info");
-      return;
-    }
-    let successCount = 0;
-    let failCount = 0;
-    for (const ext of targets) {
-      try {
-        await pluginOn(ext);
-        successCount += 1;
-      } catch {
-        failCount += 1;
+      if (emptyMessageKey) {
+        toast(tm(emptyMessageKey), "info");
       }
-    }
-    clearSelection();
-    if (failCount > 0) {
-      toast(
-        tm("batch.enablePartial", { success: successCount, failed: failCount }),
-        "warning",
-      );
-    } else {
-      toast(tm("batch.enableSuccess", { count: successCount }), "success");
-    }
-  };
-
-  const batchDisable = async () => {
-    const targets = filteredPlugins.value.filter(
-      (p) => selectedPluginNames.value.has(p.name) && p.activated,
-    );
-    if (targets.length === 0) {
-      toast(tm("batch.noEnabledPlugins"), "info");
       return;
     }
     let successCount = 0;
     let failCount = 0;
     for (const ext of targets) {
       try {
-        await pluginOff(ext);
+        await action(ext);
         successCount += 1;
-      } catch {
+      } catch (e) {
+        console.error(`Batch action failed for ${ext.name}:`, e);
         failCount += 1;
       }
     }
     clearSelection();
     if (failCount > 0) {
       toast(
-        tm("batch.disablePartial", { success: successCount, failed: failCount }),
+        tm(partialMessageKey, { success: successCount, failed: failCount }),
         "warning",
       );
     } else {
-      toast(tm("batch.disableSuccess", { count: successCount }), "success");
+      toast(tm(successMessageKey, { count: successCount }), "success");
     }
   };
 
+  const batchEnable = async () =>
+    runBatchAction({
+      filterFn: (p) => !p.activated,
+      action: (p) => pluginOn(p),
+      emptyMessageKey: "batch.noDisabledPlugins",
+      partialMessageKey: "batch.enablePartial",
+      successMessageKey: "batch.enableSuccess",
+    });
+
+  const batchDisable = async () =>
+    runBatchAction({
+      filterFn: (p) => p.activated,
+      action: (p) => pluginOff(p),
+      emptyMessageKey: "batch.noEnabledPlugins",
+      partialMessageKey: "batch.disablePartial",
+      successMessageKey: "batch.disableSuccess",
+    });
+
   const requestBatchUninstall = () => {
     const targets = filteredPlugins.value.filter(
       (p) => selectedPluginNames.value.has(p.name),
@@ -313,33 +302,17 @@ export const useExtensionPage = () => {
 
   const executeBatchUninstall = async () => {
     batchUninstallConfirmDialog.value = false;
-    const targets = filteredPlugins.value.filter(
-      (p) => selectedPluginNames.value.has(p.name),
-    );
-    if (targets.length === 0) return;
-    let successCount = 0;
-    let failCount = 0;
-    for (const ext of targets) {
-      try {
-        await uninstallExtension(ext.name, {
+    await runBatchAction({
+      filterFn: () => true,
+      action: (p) =>
+        uninstallExtension(p.name, {
           deleteConfig: false,
           deleteData: false,
-        });
-        successCount += 1;
-      } catch (e) {
-        console.error(`Batch uninstall failed for ${ext.name}:`, e);
-        failCount += 1;
-      }
-    }
-    clearSelection();
-    if (failCount > 0) {
-      toast(
-        tm("batch.uninstallPartial", { success: successCount, failed: failCount }),
-        "warning",
-      );
-    } else {
-      toast(tm("batch.uninstallSuccess", { count: successCount }), "success");
-    }
+        }),
+      emptyMessageKey: "",
+      partialMessageKey: "batch.uninstallPartial",
+      successMessageKey: "batch.uninstallSuccess",
+    });
   };
 
   const cancelBatchUninstall = () => {

From 39d70cd6047e63c46591a81aff463b030ee54f8f Mon Sep 17 00:00:00 2001
From: AnxForever <130662349+AnxForever@users.noreply.github.com>
Date: Thu, 18 Jun 2026 16:28:06 +0800
Subject: [PATCH 3/3] fix: resolve chicken-and-egg selection UX and batch API
 flooding

- Fix checkbox overlay: always render but hidden by default, reveal on hover.
  Separate selectable (always true) from selectionMode to avoid the deadlock
  where the checkbox overlay can never appear because selection mode is never
  entered.
- Apply pointer-events: none to v-checkbox to prevent Vuetify internal handler
  conflicts with the overlay @click handler.
- Refactor batch operations to call raw pluginApi methods directly instead of
  wrapper functions (pluginOn/pluginOff/uninstallExtension) that have internal
  toast notifications and getExtensions() calls. This eliminates redundant API
  requests, incorrect success/fail counts, and toast flooding.
- Perform a single getExtensions() refresh after all batch operations complete.
---
 .../src/components/shared/ExtensionCard.vue   | 16 +++++++++--
 .../views/extension/InstalledPluginsTab.vue   |  3 ++-
 .../src/views/extension/useExtensionPage.js   | 27 +++++++++++--------
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/dashboard/src/components/shared/ExtensionCard.vue b/dashboard/src/components/shared/ExtensionCard.vue
index d67279c05f..fa9a123fa5 100644
--- a/dashboard/src/components/shared/ExtensionCard.vue
+++ b/dashboard/src/components/shared/ExtensionCard.vue
@@ -33,6 +33,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  selectionMode: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 // 定义要发送到父组件的事件
@@ -174,10 +178,11 @@ const openWebui = () => {
           : '#ffffffdd',
     }"
   >
-    <!-- 选择模式下的复选框覆盖层 -->
+    <!-- 选择模式下的复选框覆盖层：悬停时或选中/选择模式下可见 -->
     <div
       v-if="selectable && !extension.reserved"
       class="extension-select-overlay"
+      :class="{ 'show-overlay': selected || selectionMode }"
       @click.stop="$emit('toggle-select')"
     >
       <v-checkbox
@@ -186,7 +191,7 @@ const openWebui = () => {
         color="primary"
         hide-details
         class="extension-select-checkbox"
-        @click.stop="$emit('toggle-select')"
+        style="pointer-events: none"
       />
     </div>
 
@@ -447,6 +452,13 @@ const openWebui = () => {
   left: 0;
   z-index: 10;
   padding: 4px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.extension-card:hover .extension-select-overlay,
+.extension-select-overlay.show-overlay {
+  opacity: 1;
 }
 
 .extension-select-checkbox {
diff --git a/dashboard/src/views/extension/InstalledPluginsTab.vue b/dashboard/src/views/extension/InstalledPluginsTab.vue
index ff7907e316..fd1dbf9134 100644
--- a/dashboard/src/views/extension/InstalledPluginsTab.vue
+++ b/dashboard/src/views/extension/InstalledPluginsTab.vue
@@ -490,7 +490,8 @@ const togglePinnedExtension = (extension) => {
             <ExtensionCard
               :extension="extension"
               :is-pinned="isPinnedExtension(extension)"
-              :selectable="selectModeActive"
+              selectable
+              :selection-mode="selectModeActive"
               :selected="selectedPluginNames.has(extension.name)"
               class="rounded-lg"
               style="background-color: rgb(var(--v-theme-mcpCardBg))"
diff --git a/dashboard/src/views/extension/useExtensionPage.js b/dashboard/src/views/extension/useExtensionPage.js
index c6124468c7..f88cc76f59 100644
--- a/dashboard/src/views/extension/useExtensionPage.js
+++ b/dashboard/src/views/extension/useExtensionPage.js
@@ -238,8 +238,10 @@ export const useExtensionPage = () => {
     }
   };
 
-  // Shared helper for batch operations (enable, disable, uninstall)
-  const runBatchAction = async ({ filterFn, action, emptyMessageKey, partialMessageKey, successMessageKey }) => {
+  // Shared helper for batch operations.
+  // Calls raw API methods directly to avoid the side-effects of wrapper functions
+  // (toast flooding, redundant getExtensions/checkAndPromptConflicts calls per item).
+  const runBatchAction = async ({ filterFn, apiCall, emptyMessageKey, partialMessageKey, successMessageKey }) => {
     const targets = filteredPlugins.value.filter(
       (p) => selectedPluginNames.value.has(p.name) && filterFn(p),
     );
@@ -253,13 +255,20 @@ export const useExtensionPage = () => {
     let failCount = 0;
     for (const ext of targets) {
       try {
-        await action(ext);
-        successCount += 1;
+        const res = await apiCall(ext);
+        if (res.data?.status === "ok") {
+          successCount += 1;
+        } else {
+          console.error(`Batch action failed for ${ext.name}:`, res.data?.message);
+          failCount += 1;
+        }
       } catch (e) {
         console.error(`Batch action failed for ${ext.name}:`, e);
         failCount += 1;
       }
     }
+    // Single refresh after all operations complete
+    await getExtensions({ withLoading: false });
     clearSelection();
     if (failCount > 0) {
       toast(
@@ -274,7 +283,7 @@ export const useExtensionPage = () => {
   const batchEnable = async () =>
     runBatchAction({
       filterFn: (p) => !p.activated,
-      action: (p) => pluginOn(p),
+      apiCall: (p) => pluginApi.setEnabled(p.name, true),
       emptyMessageKey: "batch.noDisabledPlugins",
       partialMessageKey: "batch.enablePartial",
       successMessageKey: "batch.enableSuccess",
@@ -283,7 +292,7 @@ export const useExtensionPage = () => {
   const batchDisable = async () =>
     runBatchAction({
       filterFn: (p) => p.activated,
-      action: (p) => pluginOff(p),
+      apiCall: (p) => pluginApi.setEnabled(p.name, false),
       emptyMessageKey: "batch.noEnabledPlugins",
       partialMessageKey: "batch.disablePartial",
       successMessageKey: "batch.disableSuccess",
@@ -304,11 +313,7 @@ export const useExtensionPage = () => {
     batchUninstallConfirmDialog.value = false;
     await runBatchAction({
       filterFn: () => true,
-      action: (p) =>
-        uninstallExtension(p.name, {
-          deleteConfig: false,
-          deleteData: false,
-        }),
+      apiCall: (p) => pluginApi.uninstall(p.name, { delete_config: false, delete_data: false }),
       emptyMessageKey: "",
       partialMessageKey: "batch.uninstallPartial",
       successMessageKey: "batch.uninstallSuccess",