task-252(admin.html观感对齐): 菜单管理列表列对齐（ID/菜单类型/上级菜单/创建时间）+ 类型中文映射

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

@@ -8,6 +8,7 @@ import {
   menuDeleteReason,
   menuFormFromNode,
   menuParentChangeReason,
+  menuTypeLabel,
   nextSiblingSort,
   siblingOrderAfterMove,
   validateMenuManageForm,
@@ -23,6 +24,17 @@ const editingNode = ref<MenuManageNode | null>(null)
 const menuForm = reactive<MenuManageForm>(createMenuForm(null, 0))
 const parentOptions = computed(() => flattenMenuNodes(rows.value))
 const dialogTitle = computed(() => (editingNode.value ? '编辑菜单' : '新增菜单'))
+/** 节点 id -> 名称，供「上级菜单」列展示。 */
+const nameById = computed(() => {
+  const map = new Map<number, string>()
+  for (const node of flattenMenuNodes(rows.value)) map.set(node.id, node.name)
+  return map
+})
+
+function parentNameOf(node: MenuManageNode): string {
+  if (node.parentId == null) return '—'
+  return nameById.value.get(node.parentId) ?? `#${node.parentId}`
+}
 
 async function loadMenus() {
   loading.value = true
@@ -124,17 +136,29 @@ onMounted(loadMenus)
     </div>
     <el-card shadow="never">
       <el-table v-loading="loading" :data="rows" row-key="id" default-expand-all stripe>
-        <el-table-column prop="name" label="菜单名称" min-width="220" />
-        <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 prop="id" label="ID" width="70" />
+        <el-table-column prop="name" label="菜单名称" min-width="200" />
+        <el-table-column label="菜单类型" width="110">
+          <template #default="{ row }">
+            <el-tag size="small" :type="row.menuType === 'app' ? 'info' : 'primary'">{{ menuTypeLabel(row.menuType) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="上级菜单" width="150">
+          <template #default="{ row }">
+            {{ parentNameOf(row) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="columnKey" label="权限标识" min-width="220" />
+        <el-table-column prop="routePath" label="路由" min-width="240" />
+        <el-table-column prop="createdAt" label="创建时间" min-width="170" />
+        <el-table-column prop="sortOrder" label="排序" width="90" />
         <el-table-column label="移动" width="120">
           <template #default="{ row }">
             <el-button link type="primary" @click="moveMenuRow(row, -1)">上移</el-button>
             <el-button link type="primary" @click="moveMenuRow(row, 1)">下移</el-button>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="200">
+        <el-table-column label="操作" width="180" fixed="right">
           <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>