From 03df05633cbafa254f4deff32805e72418f4f671 Mon Sep 17 00:00:00 2001
From: H0nGzA1 <2505811377@qq.com>
Date: Thu, 9 Apr 2026 20:21:22 +0800
Subject: [PATCH] refactor(menu): align batch ops with MenuFieldCom pattern -
 pagination slots
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rewrite index.vue: use pagination-left (circular delete btn) + pagination-right (selected count popover) like MenuFieldCom
- Remove selectAll/selectNone from actionbar (table header checkbox handles selection)
- Simplify handleBatchDelete: pluck ids → selectedRows.value = [] → doRefresh() (no clearSelection)
- Simplify crud.tsx: remove batchDelete/selectAll/selectNone from actionbar, remove ElMessageBox import
- Add buttons.selectedCount i18n key for zh-CN/en/zh-TW
- Use height: 72vh wrapper like MenuFieldCom for consistent table height

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/i18n/pages/menu/en.ts                 |  1 +
 web/src/i18n/pages/menu/zh-cn.ts              |  1 +
 web/src/i18n/pages/menu/zh-tw.ts              |  1 +
 .../menu/components/MenuButtonCom/crud.tsx    | 48 +------------
 .../menu/components/MenuButtonCom/index.vue   | 68 +++++++++++++------
 5 files changed, 53 insertions(+), 66 deletions(-)

diff --git a/web/src/i18n/pages/menu/en.ts b/web/src/i18n/pages/menu/en.ts
index 4ff389b..1b2da3d 100644
--- a/web/src/i18n/pages/menu/en.ts
+++ b/web/src/i18n/pages/menu/en.ts
@@ -163,6 +163,7 @@ export default {
                     clearSelection: 'Clear Selection',
                     selectedTip: '{count} selected',
                     totalCount: '{count} items total',
+                    selectedCount: '{count} selected',
                 },
                 scan: {
                     title: 'Auto Scan API Permissions',
diff --git a/web/src/i18n/pages/menu/zh-cn.ts b/web/src/i18n/pages/menu/zh-cn.ts
index f531454..36e09df 100644
--- a/web/src/i18n/pages/menu/zh-cn.ts
+++ b/web/src/i18n/pages/menu/zh-cn.ts
@@ -163,6 +163,7 @@ export default {
                     clearSelection: '取消选择',
                     selectedTip: '已选择 {count} 项',
                     totalCount: '共 {count} 条',
+                    selectedCount: '已选择 {count} 项',
                 },
                 scan: {
                     title: '自动扫描接口权限',
diff --git a/web/src/i18n/pages/menu/zh-tw.ts b/web/src/i18n/pages/menu/zh-tw.ts
index 84ad504..9e77388 100644
--- a/web/src/i18n/pages/menu/zh-tw.ts
+++ b/web/src/i18n/pages/menu/zh-tw.ts
@@ -163,6 +163,7 @@ export default {
                     clearSelection: '取消選擇',
                     selectedTip: '已選擇 {count} 項',
                     totalCount: '共 {count} 條',
+                    selectedCount: '已選擇 {count} 項',
                 },
                 scan: {
                     title: '自動掃描接口權限',
diff --git a/web/src/views/system/menu/components/MenuButtonCom/crud.tsx b/web/src/views/system/menu/components/MenuButtonCom/crud.tsx
index c34a6d7..4809c64 100644
--- a/web/src/views/system/menu/components/MenuButtonCom/crud.tsx
+++ b/web/src/views/system/menu/components/MenuButtonCom/crud.tsx
@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n';
 import * as api from './api';
 import {auth} from '/@/utils/authFunction'
 import {request} from '/@/utils/service';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessage } from 'element-plus';
 import { nextTick, ref } from 'vue';
 import XEUtils from 'xe-utils';
 //此处为crudOptions配置
@@ -98,52 +98,6 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
 							}
 						},
 					},
-                    batchDelete: {
-						show: auth('menu:DeleteButton'),
-						type: 'danger',
-						text: t('message.pages.menu.buttons.batchDelete'),
-						disabled: () => selectedRows.value.length === 0,
-						click: async () => {
-							if (selectedRows.value.length === 0) {
-								ElMessage.warning(t('message.pages.menu.messages.selectMenu'));
-								return;
-							}
-							await ElMessageBox.confirm(
-								t('message.pages.menu.messages.batchDeleteConfirm', { count: selectedRows.value.length }),
-								t('message.pages.menu.buttons.confirm'),
-								{ type: 'warning', confirmButtonText: t('message.pages.menu.buttons.confirm'), cancelButtonText: t('message.pages.menu.buttons.cancel') }
-							);
-							const ids = XEUtils.pluck(selectedRows.value, 'id');
-							// 清空表格勾选状态
-							crudExpose.getBaseTableRef().clearSelection();
-							// 手动清空 selectedRows（clearSelection 不保证触发 onSelectionChange）
-							selectedRows.value = [];
-							// 再调接口 + 刷新
-							await api.BatchDelete(ids);
-							ElMessage.success(t('message.pages.menu.messages.deleteSuccess'));
-							crudExpose.doRefresh();
-						},
-					},
-                    selectAll: {
-						show: true,
-						text: t('message.pages.menu.buttons.selectAll'),
-						disabled: () => !context!.selectOptions.value.id,
-						click: () => {
-							const tableRef = crudExpose.getBaseTableRef();
-							const tableData = crudExpose.getTableData();
-							tableRef.toggleAllSelection();
-							selectedRows.value = [...tableData];
-						},
-					},
-                    selectNone: {
-						show: true,
-						text: t('message.pages.menu.buttons.selectNone'),
-						disabled: () => selectedRows.value.length === 0,
-						click: () => {
-							crudExpose.getBaseTableRef().clearSelection();
-							selectedRows.value = [];
-						},
-					},
                 },
             },
             rowHandle: {
diff --git a/web/src/views/system/menu/components/MenuButtonCom/index.vue b/web/src/views/system/menu/components/MenuButtonCom/index.vue
index f41ce35..b5960d2 100644
--- a/web/src/views/system/menu/components/MenuButtonCom/index.vue
+++ b/web/src/views/system/menu/components/MenuButtonCom/index.vue
@@ -1,15 +1,35 @@
 <template>
-	<div class="menu-btn-com" :style="{ height: 'calc(72vh - 44px)' }">
-		<fs-crud ref="crudRef" v-bind="crudBinding" style="height: 100%">
+	<div style="height: 72vh">
+		<fs-crud ref="crudRef" v-bind="crudBinding">
+			<template #pagination-left>
+				<el-tooltip :content="t('message.pages.menu.buttons.batchDelete')">
+					<el-button text type="danger" :disabled="selectedRowsCount === 0" :icon="Delete" circle @click="handleBatchDelete" />
+				</el-tooltip>
+			</template>
 			<template #pagination-right>
-				<el-text type="info" size="small">{{ t('message.pages.menu.buttons.totalCount', { count: totalCount }) }}</el-text>
+				<el-popover placement="top" :width="400" trigger="click">
+					<template #reference>
+						<el-button text :type="selectedRowsCount > 0 ? 'primary' : ''">
+							{{ t('message.pages.menu.buttons.selectedCount', { count: selectedRowsCount }) }}
+						</el-button>
+					</template>
+					<el-table :data="selectedRows" size="small" max-height="300">
+						<el-table-column width="150" property="id" label="ID" />
+						<el-table-column width="200" property="name" label="name" />
+						<el-table-column fixed="right" :label="t('message.pages.menu.table.columns.actions')" width="60">
+							<template #default="scope">
+								<el-button text type="info" :icon="Close" @click="removeSelectedRows(scope.row)" circle />
+							</template>
+						</el-table-column>
+					</el-table>
+				</el-popover>
 			</template>
 		</fs-crud>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
+import { ref, onMounted, reactive, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
@@ -17,7 +37,7 @@ import { MenuTreeItemType } from '../../types';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import XEUtils from 'xe-utils';
 import { BatchDelete } from './api';
-import { Delete } from '@element-plus/icons-vue';
+import { Close, Delete } from '@element-plus/icons-vue';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { storeToRefs } from 'pinia';
 
@@ -27,7 +47,7 @@ const { t } = useI18n();
 
 let selectOptions: any = ref({ name: null });
 
-const { crudRef, crudBinding, crudExpose, context,selectedRows } = useFs({ createCrudOptions, context: { selectOptions } });
+const { crudRef, crudBinding, crudExpose, selectedRows, resetCrudOptions } = useFs({ createCrudOptions, context: { selectOptions } });
 const { doRefresh, setTableData } = crudExpose;
 
 // 选中行的条数
@@ -35,10 +55,29 @@ const selectedRowsCount = computed(() => {
 	return selectedRows.value.length;
 });
 
-// 总条数
-const totalCount = computed(() => {
-	return crudBinding.value?.pagination?.total || 0;
-});
+// 批量删除
+const handleBatchDelete = async () => {
+	await ElMessageBox.confirm(
+		t('message.pages.menu.messages.batchDeleteConfirm', { count: selectedRows.value.length }),
+		t('message.pages.menu.buttons.confirm'),
+		{ distinguishCancelAndClose: true, confirmButtonText: t('message.pages.menu.buttons.confirm'), cancelButtonText: t('message.pages.menu.buttons.cancel'), closeOnClickModal: false, type: 'warning' }
+	);
+	await BatchDelete(XEUtils.pluck(selectedRows.value, 'id'));
+	selectedRows.value = [];
+	await crudExpose.doRefresh();
+	ElMessage.success(t('message.pages.menu.messages.deleteSuccess'));
+};
+
+// 移除已选中的行
+const removeSelectedRows = (row: any) => {
+	const tableRef = crudExpose.getBaseTableRef();
+	const tableData = crudExpose.getTableData();
+	if (XEUtils.pluck(tableData, 'id').includes(row.id)) {
+		tableRef.toggleRowSelection(row, false);
+	} else {
+		selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== row.id);
+	}
+};
 
 const handleRefreshTable = (record: MenuTreeItemType) => {
 	if (!record.is_catalog && record.id) {
@@ -51,12 +90,3 @@ const handleRefreshTable = (record: MenuTreeItemType) => {
 
 defineExpose({ selectOptions, handleRefreshTable });
 </script>
-
-<style lang="scss" scoped>
-.menu-btn-com {
-	height: 100%;
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-}
-</style>