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 绿。

admin-frontend-vue/src/pages/account/MenusPage.vue

@@ -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>

admin-frontend-vue/src/pages/account/menu-manage-api.ts

@@ -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
+}

admin-frontend-vue/src/pages/account/menu-manage-model.ts

@@ -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 }