From 50a6cf12e76308c398a2553f869bb82545f1ed80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E8=87=AA=E8=BE=BE?= <980324341@qq.com>
Date: Sat, 5 Sep 2026 15:20:39 +0800
Subject: [PATCH] =?UTF-8?q?task-57(=E8=B4=A6=E5=8F=B7/=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2):=20=E5=AE=9E=E7=8E=B0=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=89=8D=E7=BD=AE=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

menu-manage-model.ts 增 menuDeleteReason 镜像后端仅删叶子约束(有子先删)；menu-manage-api.ts
增 deleteMenu DELETE /api/admin/permission-menus/{id}；MenusPage 行删除二次确认、
带子节点禁用/拦截并刷新。8 用例全过，419 单测 + build 绿。
---
 .../src/pages/account/MenusPage.vue           | 26 +++++-
 .../src/pages/account/menu-manage-api.ts      |  6 ++
 .../src/pages/account/menu-manage-model.ts    |  7 ++
 admin-frontend-vue/tests/task-57.test.ts      | 87 +++++++++++++++++++
 4 files changed, 123 insertions(+), 3 deletions(-)
 create mode 100644 admin-frontend-vue/tests/task-57.test.ts

diff --git a/admin-frontend-vue/src/pages/account/MenusPage.vue b/admin-frontend-vue/src/pages/account/MenusPage.vue
index 8a88cea3..b20ef077 100644
--- a/admin-frontend-vue/src/pages/account/MenusPage.vue
+++ b/admin-frontend-vue/src/pages/account/MenusPage.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
-import { ElMessage } from 'element-plus'
-import { createMenu, loadMenuManageTree, updateMenu } from './menu-manage-api'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { createMenu, deleteMenu, loadMenuManageTree, updateMenu } from './menu-manage-api'
 import {
   createMenuForm,
   flattenMenuNodes,
+  menuDeleteReason,
   menuFormFromNode,
   menuParentChangeReason,
   nextSiblingSort,
@@ -76,6 +77,24 @@ async function saveMenu() {
   }
 }
 
+async function removeMenu(node: MenuManageNode) {
+  const reason = menuDeleteReason(node)
+  if (reason) {
+    ElMessage.warning(reason)
+    return
+  }
+  try {
+    await ElMessageBox.confirm(`确定删除菜单“${node.name}”吗？`, '删除确认', { type: 'warning' })
+    await deleteMenu(node.id)
+    ElMessage.success('删除成功')
+    await loadMenus()
+  } catch (error) {
+    if (error !== 'cancel' && error !== 'close') {
+      ElMessage.error(error instanceof Error ? error.message : '删除失败')
+    }
+  }
+}
+
 onMounted(loadMenus)
 </script>
 
@@ -94,9 +113,10 @@ onMounted(loadMenus)
         <el-table-column prop="columnKey" label="权限标识" min-width="240" />
         <el-table-column prop="routePath" label="路由" min-width="260" />
         <el-table-column prop="sortOrder" label="排序" width="100" />
-        <el-table-column label="操作" width="140">
+        <el-table-column label="操作" width="200">
           <template #default="{ row }">
             <el-button link type="primary" @click="openEdit(row)">编辑</el-button>
+            <el-button link type="danger" :disabled="menuDeleteReason(row) !== undefined" @click="removeMenu(row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
diff --git a/admin-frontend-vue/src/pages/account/menu-manage-api.ts b/admin-frontend-vue/src/pages/account/menu-manage-api.ts
index 01c9e859..a9be7add 100644
--- a/admin-frontend-vue/src/pages/account/menu-manage-api.ts
+++ b/admin-frontend-vue/src/pages/account/menu-manage-api.ts
@@ -38,3 +38,9 @@ export async function updateMenu(id: number, form: MenuManageForm): Promise<void
   const { data } = await http.put<unknown>(`${MENUS_ENDPOINT}/${id}`, toMenuUpdateRequest(form))
   unwrap<unknown>(data)
 }
+
+/** 删除菜单：DELETE /api/admin/permission-menus/{id}，success=false 由 unwrap 抛后端 message。 */
+export async function deleteMenu(id: number): Promise<void> {
+  const { data } = await http.delete<unknown>(`${MENUS_ENDPOINT}/${id}`)
+  unwrap<unknown>(data)
+}
diff --git a/admin-frontend-vue/src/pages/account/menu-manage-model.ts b/admin-frontend-vue/src/pages/account/menu-manage-model.ts
index a01e34b4..6324c90e 100644
--- a/admin-frontend-vue/src/pages/account/menu-manage-model.ts
+++ b/admin-frontend-vue/src/pages/account/menu-manage-model.ts
@@ -170,6 +170,13 @@ export function menuParentChangeReason(node: MenuManageNode, parentId: number |
   return undefined
 }
 
+/** 删除前置校验（镜像后端：仅叶子可删，避免孤儿层级）；可删返回 undefined。 */
+export function menuDeleteReason(node: MenuManageNode | null | undefined): string | undefined {
+  const children = node?.children
+  if (Array.isArray(children) && children.length > 0) return '请先删除该菜单下的子菜单'
+  return undefined
+}
+
 /** 新建/编辑表单空值工厂：默认菜单类型为 admin、排序 0、根父节点。 */
 export function emptyMenuManageForm(): MenuManageForm {
   return { name: '', columnKey: '', parentId: null, menuType: ADMIN_MENU_TYPE, routePath: '', sortOrder: 0 }
diff --git a/admin-frontend-vue/tests/task-57.test.ts b/admin-frontend-vue/tests/task-57.test.ts
new file mode 100644
index 00000000..40c7f8ea
--- /dev/null
+++ b/admin-frontend-vue/tests/task-57.test.ts
@@ -0,0 +1,87 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readSource } from './helpers.ts'
+import {
+  buildMenuManageTree,
+  menuDeleteReason,
+  parseMenuManageList,
+} from '../src/pages/account/menu-manage-model.ts'
+
+test('test_task_057_menu_delete_guard_normal_primary_path', () => {
+  // 正常主路径：叶子菜单可删除（无原因）。
+  const items = parseMenuManageList([{ id: 9, name: '叶子', column_key: 'leaf', parent_id: null }])
+  assert.equal(menuDeleteReason(items[0]), undefined)
+})
+
+test('test_task_057_menu_delete_guard_normal_variant_input', () => {
+  // 正常变体：空 children(未挂子树)也可删；有子树不可删。
+  const items = parseMenuManageList([{ id: 1, name: '组', column_key: 'g', parent_id: null }])
+  assert.equal(menuDeleteReason(items[0]), undefined)
+  const tree = buildMenuManageTree(
+    parseMenuManageList([
+      { id: 1, name: '组', column_key: 'g', parent_id: null },
+      { id: 2, name: '子', column_key: 'c', parent_id: 1 },
+    ]),
+  )
+  assert.match(menuDeleteReason(tree[0]) || '', /子菜单/)
+})
+
+test('test_task_057_menu_delete_guard_normal_repeated_operation_is_idempotent', () => {
+  // 正常重复：守卫纯函数不改输入、结果稳定。
+  const tree = buildMenuManageTree(
+    parseMenuManageList([
+      { id: 1, name: '根', column_key: 'r', parent_id: null },
+      { id: 2, name: '子', column_key: 'c', parent_id: 1 },
+    ]),
+  )
+  assert.equal(menuDeleteReason(tree[0]), menuDeleteReason(tree[0]))
+  assert.equal(tree[0].children?.length, 1)
+})
+
+test('test_task_057_menu_delete_guard_boundary_empty_input', () => {
+  // 边界空值：空树可删；undefined 行视为无子树可删。
+  assert.equal(menuDeleteReason(undefined as never), undefined)
+})
+
+test('test_task_057_menu_delete_guard_boundary_single_item', () => {
+  // 边界单元素：单叶子可删。
+  const items = parseMenuManageList([{ id: 5, name: 'only', column_key: 'only' }])
+  assert.equal(menuDeleteReason(items[0]), undefined)
+})
+
+test('test_task_057_menu_delete_guard_boundary_limit_or_missing_field', () => {
+  // 边界上限：多层子树同样不可删（按是否有 children 判定）。
+  const tree = buildMenuManageTree(
+    parseMenuManageList([
+      { id: 1, name: '根', column_key: 'r', parent_id: null },
+      { id: 2, name: '子', column_key: 'c', parent_id: 1 },
+      { id: 3, name: '孙', column_key: 'l', parent_id: 2 },
+    ]),
+  )
+  assert.ok(menuDeleteReason(tree[0]))
+  const sub = tree[0].children?.[0]!
+  assert.ok(menuDeleteReason(sub))
+})
+
+test('test_task_057_menu_delete_guard_invalid_input_rejected', () => {
+  // 异常输入：父级带子给出与后端一致的可操作文案。
+  const tree = buildMenuManageTree(
+    parseMenuManageList([
+      { id: 1, name: 'A', column_key: 'a', parent_id: null },
+      { id: 2, name: 'B', column_key: 'b', parent_id: 1 },
+    ]),
+  )
+  assert.match(menuDeleteReason(tree[0]) || '', /请先删除该菜单下的子菜单/)
+})
+
+test('test_task_057_menu_delete_guard_dependency_failure_returns_actionable_message', () => {
+  // 依赖失败/删除走 adapter：DELETE permission-menus/{id}，页面二次确认后调用并刷新。
+  const api = readSource('src/pages/account/menu-manage-api.ts')
+  assert.match(api, /deleteMenu/)
+  assert.match(api, /http\.delete/)
+  assert.match(api, /permission-menus/)
+  const page = readSource('src/pages/account/MenusPage.vue')
+  assert.match(page, /deleteMenu/)
+  assert.match(page, /menuDeleteReason|ElMessageBox/)
+  assert.equal(/http\.delete|unwrap\(/.test(page), false, '页面不内联删除请求')
+})