task-55(账号/权限页面): 实现菜单新增表单

menu-manage-model.ts 增 createMenuForm/flattenMenuNodes/nextSiblingSort；menu-manage-api.ts 增 createMenu POST /api/admin/permission-menus(unwrap+解析落库节点)；MenusPage 新增菜单 Dialog(名称/标识/父菜单/路由/排序)校验后提交并刷新。8 用例全过，403 单测 + build 绿。
2026-09-05 15:17:55 +08:00
parent ffb16bea9a
commit aaa943a86d
4 changed files with 192 additions and 4 deletions
@@ -1,11 +1,22 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import { loadMenuManageTree } from './menu-manage-api'
-import type { MenuManageNode } from './menu-manage-model'
+import { createMenu, loadMenuManageTree } from './menu-manage-api'
+import {
+  createMenuForm,
+  flattenMenuNodes,
+  nextSiblingSort,
+  validateMenuManageForm,
+  type MenuManageForm,
+  type MenuManageNode,
+} from './menu-manage-model'

 const loading = ref(false)
 const rows = ref<MenuManageNode[]>([])
+const createVisible = ref(false)
+const saving = ref(false)
+const menuForm = reactive<MenuManageForm>(createMenuForm(null, 0))
+const parentOptions = computed(() => flattenMenuNodes(rows.value))

 async function loadMenus() {
  loading.value = true
@@ -18,6 +29,30 @@ async function loadMenus() {
  }
 }

+function openCreate() {
+  Object.assign(menuForm, createMenuForm(null, nextSiblingSort(rows.value, null)))
+  createVisible.value = true
+}
+
+async function saveCreate() {
+  const { valid, errors } = validateMenuManageForm(menuForm)
+  if (!valid) {
+    ElMessage.warning(Object.values(errors)[0])
+    return
+  }
+  saving.value = true
+  try {
+    await createMenu(menuForm)
+    ElMessage.success('创建成功')
+    createVisible.value = false
+    await loadMenus()
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '创建失败')
+  } finally {
+    saving.value = false
+  }
+}
+
 onMounted(loadMenus)
 </script>

@@ -28,7 +63,7 @@ onMounted(loadMenus)
        <h2>菜单管理</h2>
        <p>维护后台菜单树和页面路由。权限粒度仅到菜单/页面。</p>
      </div>
-      <el-button type="primary">新增菜单</el-button>
+      <el-button type="primary" @click="openCreate">新增菜单</el-button>
    </div>
    <el-card shadow="never">
      <el-table v-loading="loading" :data="rows" row-key="id" default-expand-all stripe>
@@ -43,5 +78,36 @@ onMounted(loadMenus)
        </el-table-column>
      </el-table>
    </el-card>
+
+    <el-dialog v-model="createVisible" title="新增菜单" width="520px">
+      <el-form label-width="96px">
+        <el-form-item label="菜单名称">
+          <el-input v-model="menuForm.name" placeholder="如：用户管理" />
+        </el-form-item>
+        <el-form-item label="权限标识">
+          <el-input v-model="menuForm.columnKey" placeholder="如：admin_users（唯一，稳定授权标识）" />
+        </el-form-item>
+        <el-form-item label="父菜单">
+          <el-select v-model="menuForm.parentId" clearable placeholder="作为根菜单" style="width: 100%">
+            <el-option
+              v-for="node in parentOptions"
+              :key="node.id"
+              :label="node.name"
+              :value="node.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="路由">
+          <el-input v-model="menuForm.routePath" placeholder="如：/account/users 或 group-xxx" />
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="menuForm.sortOrder" :min="0" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="createVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="saveCreate">保存</el-button>
+      </template>
+    </el-dialog>
  </div>
 </template>
@@ -1,9 +1,13 @@
 /** 菜单管理列表加载适配（任务 54）：GET /api/admin/permission-menus(admin) → 展示树。 */
 import { http } from '@/api/http'
+import { unwrap } from '@/api/envelope'
 import {
  ADMIN_MENU_TYPE,
  buildMenuManageTree,
+  parseMenuManageItem,
  parseMenuManageList,
+  toMenuCreateRequest,
+  type MenuManageForm,
  type MenuManageNode,
 } from './menu-manage-model'

@@ -19,3 +23,11 @@ export async function fetchMenuManageNodes(): Promise<MenuManageNode[]> {
 export async function loadMenuManageTree(): Promise<MenuManageNode[]> {
  return buildMenuManageTree(await fetchMenuManageNodes())
 }
+
+/** 新建菜单：POST /api/admin/permission-menus，返回后端落库节点。 */
+export async function createMenu(form: MenuManageForm): Promise<MenuManageNode> {
+  const { data } = await http.post<unknown>(MENUS_ENDPOINT, toMenuCreateRequest(form))
+  const created = parseMenuManageItem(unwrap<unknown>(data))
+  if (!created) throw new Error('创建菜单响应异常：缺少菜单数据')
+  return created
+}
@@ -118,6 +118,37 @@ export function buildMenuManageTree(items: MenuManageNode[]): MenuManageNode[] {
  return roots
 }

+/** 展平树为列表（前序），供父级下拉/统计复用。 */
+export function flattenMenuNodes(nodes: MenuManageNode[]): MenuManageNode[] {
+  const out: MenuManageNode[] = []
+  const walk = (list: MenuManageNode[]) => {
+    for (const node of list) {
+      out.push(node)
+      if (node.children?.length) walk(node.children)
+    }
+  }
+  walk(nodes)
+  return out
+}
+
+/** 同级建议排序：该父下最大 sortOrder + 1；无同级返回 0。 */
+export function nextSiblingSort(items: MenuManageNode[], parentId: number | null): number {
+  let max = -1
+  for (const item of items) {
+    if (item.parentId === parentId && item.sortOrder > max) max = item.sortOrder
+  }
+  return max + 1
+}
+
+/** 新建菜单表单工厂：指定父节点与建议排序，其余默认(menuType=admin)。 */
+export function createMenuForm(parentId: number | null, sortOrder: number): MenuManageForm {
+  return {
+    ...emptyMenuManageForm(),
+    parentId: typeof parentId === 'number' ? parentId : null,
+    sortOrder: normalizeMenuSort(sortOrder),
+  }
+}
+
 /** 新建/编辑表单空值工厂：默认菜单类型为 admin、排序 0、根父节点。 */
 export function emptyMenuManageForm(): MenuManageForm {
  return { name: '', columnKey: '', parentId: null, menuType: ADMIN_MENU_TYPE, routePath: '', sortOrder: 0 }
@@ -0,0 +1,79 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readSource } from './helpers.ts'
+import {
+  ADMIN_MENU_TYPE,
+  buildMenuManageTree,
+  createMenuForm,
+  flattenMenuNodes,
+  nextSiblingSort,
+  parseMenuManageList,
+} from '../src/pages/account/menu-manage-model.ts'
+
+test('test_task_055_menu_create_form_normal_primary_path', () => {
+  // 正常主路径：根菜单表单默认 menuType=admin、排序可给。
+  const form = createMenuForm(null, 0)
+  assert.equal(form.parentId, null)
+  assert.equal(form.menuType, ADMIN_MENU_TYPE)
+  assert.equal(form.sortOrder, 0)
+  assert.equal(form.name, '')
+})
+
+test('test_task_055_menu_create_form_normal_variant_input', () => {
+  // 正常变体：子菜单挂到指定父节点；排序按同级建议。
+  const form = createMenuForm(3, 4)
+  assert.equal(form.parentId, 3)
+  assert.equal(form.sortOrder, 4)
+})
+
+test('test_task_055_menu_create_form_normal_repeated_operation_is_idempotent', () => {
+  // 正常重复：表单工厂稳定、不改输入。
+  assert.deepEqual(createMenuForm(1, 2), createMenuForm(1, 2))
+})
+
+test('test_task_055_menu_create_form_boundary_empty_input', () => {
+  // 边界空值：空树无同级 → 建议排序 0；flatten 空树为空。
+  assert.equal(nextSiblingSort([], null), 0)
+  assert.deepEqual(flattenMenuNodes([]), [])
+})
+
+test('test_task_055_menu_create_form_boundary_single_item', () => {
+  // 边界单元素：单个同级 sort=2 → 建议 3。
+  const items = parseMenuManageList([{ id: 1, name: 'A', column_key: 'a', parent_id: null, sort_order: 2 }])
+  assert.equal(nextSiblingSort(items, null), 3)
+})
+
+test('test_task_055_menu_create_form_boundary_limit_or_missing_field', () => {
+  // 边界上限：同级含多节点取最大+1；不同父互不影响。
+  const items = parseMenuManageList([
+    { id: 1, name: 'A', column_key: 'a', parent_id: null, sort_order: 5 },
+    { id: 2, name: 'B', column_key: 'b', parent_id: 1, sort_order: 1 },
+  ])
+  assert.equal(nextSiblingSort(items, null), 6)
+  assert.equal(nextSiblingSort(items, 1), 2)
+})
+
+test('test_task_055_menu_create_form_invalid_input_rejected', () => {
+  // 异常输入：flatten 递归含全部后代；排序缺省按 0 参与建议。
+  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 flat = flattenMenuNodes(tree)
+  assert.deepEqual(flat.map((n) => n.id).sort((a, b) => a - b), [1, 2, 3])
+})
+
+test('test_task_055_menu_create_form_dependency_failure_returns_actionable_message', () => {
+  // 依赖失败/创建走 adapter：POST /permission-menus，页面用模型校验 + createMenu，不内联 http。
+  const api = readSource('src/pages/account/menu-manage-api.ts')
+  assert.match(api, /createMenu/)
+  assert.match(api, /http\.post/)
+  assert.match(api, /permission-menus/)
+  const page = readSource('src/pages/account/MenusPage.vue')
+  assert.match(page, /createMenu/)
+  assert.match(page, /menu-manage-model/)
+  assert.equal(/http\.(get|post)|unwrap\(/.test(page), false, '页面不内联请求')
+})