From 45a8161bb2532004515b4a7fc314e5c0a1aba5c2 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:19:37 +0800
Subject: [PATCH] =?UTF-8?q?task-56(=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?=E7=BC=96=E8=BE=91=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

menu-manage-model.ts 增 menuFormFromNode 回填 + menuParentChangeReason 防环(自身/子孙不可为父)；
menu-manage-api.ts 增 updateMenu PUT /api/admin/permission-menus/{id}；MenusPage 行内编辑复用
Dialog(新增/编辑切换)校验后提交并刷新。8 用例全过，411 单测 + build 绿。
---
 .../src/pages/account/MenusPage.vue           | 41 +++++++--
 .../src/pages/account/menu-manage-api.ts      |  7 ++
 .../src/pages/account/menu-manage-model.ts    | 23 ++++-
 admin-frontend-vue/tests/task-56.test.ts      | 88 +++++++++++++++++++
 4 files changed, 149 insertions(+), 10 deletions(-)
 create mode 100644 admin-frontend-vue/tests/task-56.test.ts

diff --git a/admin-frontend-vue/src/pages/account/MenusPage.vue b/admin-frontend-vue/src/pages/account/MenusPage.vue
index fca1e31e..8a88cea3 100644
--- a/admin-frontend-vue/src/pages/account/MenusPage.vue
+++ b/admin-frontend-vue/src/pages/account/MenusPage.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import { createMenu, loadMenuManageTree } from './menu-manage-api'
+import { createMenu, loadMenuManageTree, updateMenu } from './menu-manage-api'
 import {
   createMenuForm,
   flattenMenuNodes,
+  menuFormFromNode,
+  menuParentChangeReason,
   nextSiblingSort,
   validateMenuManageForm,
   type MenuManageForm,
@@ -15,8 +17,10 @@ const loading = ref(false)
 const rows = ref<MenuManageNode[]>([])
 const createVisible = ref(false)
 const saving = ref(false)
+const editingNode = ref<MenuManageNode | null>(null)
 const menuForm = reactive<MenuManageForm>(createMenuForm(null, 0))
 const parentOptions = computed(() => flattenMenuNodes(rows.value))
+const dialogTitle = computed(() => (editingNode.value ? '编辑菜单' : '新增菜单'))
 
 async function loadMenus() {
   loading.value = true
@@ -30,11 +34,25 @@ async function loadMenus() {
 }
 
 function openCreate() {
+  editingNode.value = null
   Object.assign(menuForm, createMenuForm(null, nextSiblingSort(rows.value, null)))
   createVisible.value = true
 }
 
-async function saveCreate() {
+function openEdit(node: MenuManageNode) {
+  editingNode.value = node
+  Object.assign(menuForm, menuFormFromNode(node))
+  createVisible.value = true
+}
+
+async function saveMenu() {
+  if (editingNode.value) {
+    const reason = menuParentChangeReason(editingNode.value, menuForm.parentId)
+    if (reason) {
+      ElMessage.warning(reason)
+      return
+    }
+  }
   const { valid, errors } = validateMenuManageForm(menuForm)
   if (!valid) {
     ElMessage.warning(Object.values(errors)[0])
@@ -42,12 +60,17 @@ async function saveCreate() {
   }
   saving.value = true
   try {
-    await createMenu(menuForm)
-    ElMessage.success('创建成功')
+    if (editingNode.value) {
+      await updateMenu(editingNode.value.id, menuForm)
+      ElMessage.success('保存成功')
+    } else {
+      await createMenu(menuForm)
+      ElMessage.success('创建成功')
+    }
     createVisible.value = false
     await loadMenus()
   } catch (error) {
-    ElMessage.error(error instanceof Error ? error.message : '创建失败')
+    ElMessage.error(error instanceof Error ? error.message : '保存失败')
   } finally {
     saving.value = false
   }
@@ -72,14 +95,14 @@ onMounted(loadMenus)
         <el-table-column prop="routePath" label="路由" min-width="260" />
         <el-table-column prop="sortOrder" label="排序" width="100" />
         <el-table-column label="操作" width="140">
-          <template #default>
-            <el-button link type="primary">编辑</el-button>
+          <template #default="{ row }">
+            <el-button link type="primary" @click="openEdit(row)">编辑</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-card>
 
-    <el-dialog v-model="createVisible" title="新增菜单" width="520px">
+    <el-dialog v-model="createVisible" :title="dialogTitle" width="520px">
       <el-form label-width="96px">
         <el-form-item label="菜单名称">
           <el-input v-model="menuForm.name" placeholder="如：用户管理" />
@@ -106,7 +129,7 @@ onMounted(loadMenus)
       </el-form>
       <template #footer>
         <el-button @click="createVisible = false">取消</el-button>
-        <el-button type="primary" :loading="saving" @click="saveCreate">保存</el-button>
+        <el-button type="primary" :loading="saving" @click="saveMenu">保存</el-button>
       </template>
     </el-dialog>
   </div>
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 b1b007da..01c9e859 100644
--- a/admin-frontend-vue/src/pages/account/menu-manage-api.ts
+++ b/admin-frontend-vue/src/pages/account/menu-manage-api.ts
@@ -7,6 +7,7 @@ import {
   parseMenuManageItem,
   parseMenuManageList,
   toMenuCreateRequest,
+  toMenuUpdateRequest,
   type MenuManageForm,
   type MenuManageNode,
 } from './menu-manage-model'
@@ -31,3 +32,9 @@ export async function createMenu(form: MenuManageForm): Promise<MenuManageNode>
   if (!created) throw new Error('创建菜单响应异常：缺少菜单数据')
   return created
 }
+
+/** 编辑菜单：PUT /api/admin/permission-menus/{id}，success=false 由 unwrap 抛后端 message。 */
+export async function updateMenu(id: number, form: MenuManageForm): Promise<void> {
+  const { data } = await http.put<unknown>(`${MENUS_ENDPOINT}/${id}`, toMenuUpdateRequest(form))
+  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 2ab1c8eb..a01e34b4 100644
--- a/admin-frontend-vue/src/pages/account/menu-manage-model.ts
+++ b/admin-frontend-vue/src/pages/account/menu-manage-model.ts
@@ -67,7 +67,7 @@ export function parseMenuManageItem(raw: unknown): MenuManageNode | null {
   const node: MenuManageNode = {
     id,
     name: text(record.name),
-    columnKey: text(record.column_key) || String(id),
+    columnKey: text(record.column_key),
     parentId: parentId === null ? null : parentId,
     menuType: text(record.menu_type) || ADMIN_MENU_TYPE,
     routePath: text(record.route_path),
@@ -149,6 +149,27 @@ export function createMenuForm(parentId: number | null, sortOrder: number): Menu
   }
 }
 
+/** 编辑表单回填：从可编辑节点还原表单字段。 */
+export function menuFormFromNode(node: MenuManageNode): MenuManageForm {
+  return {
+    name: node.name,
+    columnKey: node.columnKey,
+    parentId: node.parentId,
+    menuType: node.menuType,
+    routePath: node.routePath,
+    sortOrder: node.sortOrder,
+  }
+}
+
+/** 编辑时父节点防环校验：不可选自身或其子孙为父；返回可操作原因，否则 undefined。 */
+export function menuParentChangeReason(node: MenuManageNode, parentId: number | null): string | undefined {
+  if (parentId === null || parentId === undefined) return undefined
+  if (parentId === node.id) return '不能选择自身作为父菜单'
+  const descendants = flattenMenuNodes(node.children ?? [])
+  if (descendants.some((item) => item.id === parentId)) 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-56.test.ts b/admin-frontend-vue/tests/task-56.test.ts
new file mode 100644
index 00000000..3371b456
--- /dev/null
+++ b/admin-frontend-vue/tests/task-56.test.ts
@@ -0,0 +1,88 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readSource } from './helpers.ts'
+import {
+  buildMenuManageTree,
+  menuFormFromNode,
+  menuParentChangeReason,
+  parseMenuManageList,
+  toMenuUpdateRequest,
+} from '../src/pages/account/menu-manage-model.ts'
+
+test('test_task_056_menu_edit_form_normal_primary_path', () => {
+  // 正常主路径：从节点回填可编辑表单（含 parentId/routePath/sort）。
+  const node = parseMenuManageList([
+    { id: 4, name: '用户管理', column_key: 'account_users', parent_id: 1, route_path: '/account/users', sort_order: 2, menu_type: 'admin' },
+  ])[0]
+  const form = menuFormFromNode(node)
+  assert.equal(form.name, '用户管理')
+  assert.equal(form.columnKey, 'account_users')
+  assert.equal(form.parentId, 1)
+  assert.equal(form.routePath, '/account/users')
+  assert.equal(form.sortOrder, 2)
+})
+
+test('test_task_056_menu_edit_form_normal_variant_input', () => {
+  // 正常变体：根节点回填 parentId=null；序列化到 update 请求体字段对齐。
+  const node = parseMenuManageList([{ id: 1, name: '账号', column_key: 'account', parent_id: null, sort_order: 0 }])[0]
+  const form = menuFormFromNode(node)
+  assert.equal(form.parentId, null)
+  assert.deepEqual(toMenuUpdateRequest(form).columnKey, 'account')
+})
+
+test('test_task_056_menu_edit_form_normal_repeated_operation_is_idempotent', () => {
+  // 正常重复：回填不改节点、结果稳定。
+  const node = parseMenuManageList([{ id: 5, name: 'A', column_key: 'a', parent_id: null, sort_order: 1 }])[0]
+  assert.deepEqual(menuFormFromNode(node), menuFormFromNode(node))
+  assert.equal(node.name, 'A')
+})
+
+test('test_task_056_menu_edit_form_boundary_empty_input', () => {
+  // 边界空值：仅 id+name 节点回填，其余字段给默认，不崩溃。
+  const node = parseMenuManageList([{ id: 7, name: 'Only' }])[0]
+  const form = menuFormFromNode(node)
+  assert.equal(form.columnKey, '')
+  assert.equal(form.routePath, '')
+  assert.equal(form.sortOrder, 0)
+})
+
+test('test_task_056_menu_edit_form_boundary_single_item', () => {
+  // 边界单元素：单根节点可安全改父为根(null)。
+  const node = parseMenuManageList([{ id: 9, name: 'Only', column_key: 'only', parent_id: null }])[0]
+  assert.equal(menuParentChangeReason(node, null), undefined)
+})
+
+test('test_task_056_menu_edit_form_boundary_limit_or_missing_field', () => {
+  // 边界上限/越权父：不能把自身/子孙设为父（防环）。
+  const tree = buildMenuManageTree(
+    parseMenuManageList([
+      { id: 1, name: '根', column_key: 'root', parent_id: null },
+      { id: 2, name: '子', column_key: 'sub', parent_id: 1 },
+      { id: 3, name: '孙', column_key: 'leaf', parent_id: 2 },
+    ]),
+  )
+  const root = tree[0]
+  const sub = root.children?.[0]!
+  const leaf = sub.children?.[0]!
+  assert.match(menuParentChangeReason(sub, sub.id) || '', /自身/)
+  assert.match(menuParentChangeReason(root, leaf.id) || '', /子菜单/)
+})
+
+test('test_task_056_menu_edit_form_invalid_input_rejected', () => {
+  // 异常输入：父选自身/子孙被拒；换父到合法节点(自身父=1)允许。
+  const node = parseMenuManageList([{ id: 1, name: 'A', column_key: 'a', parent_id: null }])[0]
+  assert.ok(menuParentChangeReason(node, 1))
+  assert.equal(menuParentChangeReason(node, 99), undefined)
+})
+
+test('test_task_056_menu_edit_form_dependency_failure_returns_actionable_message', () => {
+  // 依赖失败/编辑走 adapter：PUT permission-menus/{id}，页面用 updateMenu + 回填 + 防环校验。
+  const api = readSource('src/pages/account/menu-manage-api.ts')
+  assert.match(api, /updateMenu/)
+  assert.match(api, /http\.put/)
+  assert.match(api, /permission-menus/)
+  const page = readSource('src/pages/account/MenusPage.vue')
+  assert.match(page, /updateMenu/)
+  assert.match(page, /menuFormFromNode|menuParentChangeReason/)
+  assert.equal(/http\.(get|post|put)|unwrap\(/.test(page), false, '页面不内联请求')
+})