feat: 菜单管理左树右详情布局与左侧树区域滚动

Made-with: Cursor

frontend/src/views/system/menus/Index.vue

@@ -6,51 +6,144 @@
         <a-button v-permission="'menu:create'" type="primary" @click="handleAdd">新增菜单</a-button>
       </template>
     </a-card>
-    <a-table :columns="columns" :data-source="dataSource" :loading="loading" row-key="id" :pagination="false"
-      :default-expand-all-rows="true">
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'icon'">
-          <component v-if="record.icon && getIconComponent(record.icon)" :is="getIconComponent(record.icon)!" />
-          <span v-else class="text-gray-400">-</span>
-        </template>
-        <template v-if="column.key === 'action'">
-          <a-space>
-            <a-button v-permission="'menu:update'" type="link" size="small" @click="handleEdit(record)">
-              编辑
-            </a-button>
-            <a-button v-permission.hide="'menu:delete'" type="link" size="small" danger @click="handleDelete(record)">
-              删除
-            </a-button>
-          </a-space>
-        </template>
-      </template>
-    </a-table>
 
-    <!-- 新增/编辑菜单弹窗 -->
+    <div class="page-content">
-    <a-modal v-model:open="modalVisible" :title="modalTitle" :confirm-loading="submitLoading" @ok="handleSubmit"
+      <div class="left-panel">
-      @cancel="handleCancel" width="600px" :loading="detailLoading">
+        <a-card title="菜单目录" size="small">
-      <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+          <div class="left-tree-scroll">
+            <a-spin :spinning="loading">
+              <a-tree
+                v-if="dataSource.length > 0"
+                :tree-data="dataSource"
+                :field-names="{ title: 'name', key: 'id', children: 'children' }"
+                :selected-keys="selectedKeys"
+                default-expand-all
+                show-line
+                block-node
+                @select="onTreeSelect"
+              >
+                <template #title="{ dataRef }">
+                  <span class="tree-node-title">
+                    <component
+                      v-if="dataRef.icon && getIconComponent(dataRef.icon)"
+                      :is="getIconComponent(dataRef.icon)!"
+                      class="tree-node-icon"
+                    />
+                    <span>{{ dataRef.name }}</span>
+                  </span>
+                </template>
+              </a-tree>
+              <a-empty v-else description="暂无菜单数据" />
+            </a-spin>
+          </div>
+        </a-card>
+      </div>
+
+      <div class="right-panel">
+        <a-card title="菜单详情" size="small">
+          <a-spin :spinning="detailLoading">
+            <template v-if="selectedId != null">
+              <a-descriptions bordered size="small" :column="2" class="mb-4">
+                <a-descriptions-item label="ID">{{ detailForm.id }}</a-descriptions-item>
+                <a-descriptions-item label="修改人">{{ detailForm.modifier ?? '-' }}</a-descriptions-item>
+                <a-descriptions-item label="创建时间" :span="2">{{ formatTime(detailForm.createTime) }}</a-descriptions-item>
+                <a-descriptions-item label="编辑时间" :span="2">{{ formatTime(detailForm.modifyTime) }}</a-descriptions-item>
+              </a-descriptions>
+
+              <a-form
+                ref="detailFormRef"
+                :model="detailForm"
+                :rules="rules"
+                :label-col="{ span: 6 }"
+                :wrapper-col="{ span: 18 }"
+              >
                 <a-form-item label="菜单名称" name="name">
-          <a-input v-model:value="form.name" placeholder="请输入菜单名称" :maxlength="50" />
+                  <a-input v-model:value="detailForm.name" placeholder="请输入菜单名称" :maxlength="50" />
                 </a-form-item>
                 <a-form-item label="路由路径" name="path">
-          <a-input v-model:value="form.path" placeholder="请输入路由路径（如：/system/users）" :maxlength="200" />
+                  <a-input v-model:value="detailForm.path" placeholder="请输入路由路径（如：/system/users）" :maxlength="200" />
                 </a-form-item>
                 <a-form-item label="图标" name="icon">
-          <a-input v-model:value="form.icon" placeholder="请输入图标名称（Ant Design Icons）" :maxlength="50" />
+                  <a-input v-model:value="detailForm.icon" placeholder="请输入图标名称（Ant Design Icons）" :maxlength="50" />
                 </a-form-item>
                 <a-form-item label="组件路径" name="component">
-          <a-input v-model:value="form.component" placeholder="请输入组件路径（如：system/users/Index）" :maxlength="200" />
+                  <a-input v-model:value="detailForm.component" placeholder="请输入组件路径（如：system/users/Index）" :maxlength="200" />
                 </a-form-item>
                 <a-form-item label="权限编码" name="permission">
-          <a-input v-model:value="form.permission" placeholder="请输入权限编码（如：menu:read，留空则所有用户可见）" :maxlength="100" />
+                  <a-input v-model:value="detailForm.permission" placeholder="请输入权限编码（如：menu:read，留空则所有用户可见）" :maxlength="100" />
                 </a-form-item>
                 <a-form-item label="父菜单" name="parentId">
-          <a-tree-select v-model:value="form.parentId" :tree-data="menuTreeOptions" placeholder="请选择父菜单（不选则为顶级菜单）"
+                  <a-tree-select
-            :allow-clear="true" tree-default-expand-all />
+                    v-model:value="detailForm.parentId"
+                    :tree-data="menuTreeOptions"
+                    placeholder="请选择父菜单（不选则为顶级菜单）"
+                    :allow-clear="true"
+                    tree-default-expand-all
+                    style="width: 100%"
+                  />
                 </a-form-item>
                 <a-form-item label="排序" name="sort">
-          <a-input-number v-model:value="form.sort" :min="0" :max="9999" placeholder="请输入排序值" style="width: 100%" />
+                  <a-input-number v-model:value="detailForm.sort" :min="0" :max="9999" placeholder="请输入排序值" style="width: 100%" />
+                </a-form-item>
+                <a-form-item :wrapper-col="{ span: 18, offset: 6 }">
+                  <a-space>
+                    <a-button v-permission="'menu:update'" type="primary" :loading="saveDetailLoading" @click="handleSaveDetail">
+                      保存
+                    </a-button>
+                    <a-button v-permission.hide="'menu:delete'" danger @click="handleDeleteDetail">删除</a-button>
+                  </a-space>
+                </a-form-item>
+              </a-form>
+            </template>
+            <a-empty v-else description="请从左侧选择菜单" />
+          </a-spin>
+        </a-card>
+      </div>
+    </div>
+
+    <!-- 新增菜单弹窗 -->
+    <a-modal
+      v-model:open="modalVisible"
+      title="新增菜单"
+      :confirm-loading="submitLoading"
+      @ok="handleSubmitCreate"
+      @cancel="handleCancelCreate"
+      width="600px"
+    >
+      <a-form
+        ref="createFormRef"
+        :model="createForm"
+        :rules="rules"
+        :label-col="{ span: 6 }"
+        :wrapper-col="{ span: 18 }"
+      >
+        <a-form-item label="菜单名称" name="name">
+          <a-input v-model:value="createForm.name" placeholder="请输入菜单名称" :maxlength="50" />
+        </a-form-item>
+        <a-form-item label="路由路径" name="path">
+          <a-input v-model:value="createForm.path" placeholder="请输入路由路径（如：/system/users）" :maxlength="200" />
+        </a-form-item>
+        <a-form-item label="图标" name="icon">
+          <a-input v-model:value="createForm.icon" placeholder="请输入图标名称（Ant Design Icons）" :maxlength="50" />
+        </a-form-item>
+        <a-form-item label="组件路径" name="component">
+          <a-input v-model:value="createForm.component" placeholder="请输入组件路径（如：system/users/Index）" :maxlength="200" />
+        </a-form-item>
+        <a-form-item label="权限编码" name="permission">
+          <a-input v-model:value="createForm.permission" placeholder="请输入权限编码（如：menu:read，留空则所有用户可见）" :maxlength="100" />
+        </a-form-item>
+        <a-form-item label="父菜单" name="parentId">
+          <a-tree-select
+            v-model:value="createForm.parentId"
+            :tree-data="menuTreeOptionsForCreate"
+            placeholder="请选择父菜单（不选则为顶级菜单）"
+            :allow-clear="true"
+            tree-default-expand-all
+            style="width: 100%"
+          />
+        </a-form-item>
+        <a-form-item label="排序" name="sort">
+          <a-input-number v-model:value="createForm.sort" :min="0" :max="9999" placeholder="请输入排序值" style="width: 100%" />
         </a-form-item>
       </a-form>
     </a-modal>
@@ -60,34 +153,36 @@
 <script setup lang="ts">
 import { ref, reactive, nextTick, computed, h } from 'vue'
 import { message, Modal } from 'ant-design-vue'
-import type { TableColumnsType, FormInstance } from 'ant-design-vue'
+import type { FormInstance } from 'ant-design-vue'
 import * as Icons from '@ant-design/icons-vue'
 import { menusApi, type Menu, type CreateMenuForm, type UpdateMenuForm } from '@/api/menus'
 import { useSimpleListRequest } from '@/composables/useSimpleListRequest'
 import { useAuthStore } from '@/stores/auth'
 
-// 图标映射函数：将字符串名称转换为图标组件
 const getIconComponent = (iconName: string | null | undefined) => {
   if (!iconName) return null
-
+  const IconComponent = (Icons as Record<string, unknown>)[iconName]
-  // 从 @ant-design/icons-vue 中获取对应的图标组件
-  const IconComponent = (Icons as any)[iconName]
   if (IconComponent) {
-    return () => h(IconComponent)
+    return () => h(IconComponent as Parameters<typeof h>[0])
   }
   return null
 }
 
+const formatTime = (text: string | undefined) =>
+  text ? new Date(text).toISOString().replace('T', ' ').substring(0, 19) : '-'
+
 const authStore = useAuthStore()
 
 const submitLoading = ref(false)
+const saveDetailLoading = ref(false)
 const detailLoading = ref(false)
 const modalVisible = ref(false)
-const modalTitle = ref('新增菜单')
+const createFormRef = ref<FormInstance>()
-const formRef = ref<FormInstance>()
+const detailFormRef = ref<FormInstance>()
-const editingId = ref<number | null>(null)
+
+const selectedKeys = ref<(string | number)[]>([])
+const selectedId = ref<number | null>(null)
 
-// 使用简单列表请求组合函数（非分页列表）
 const {
   loading,
   dataSource,
@@ -97,7 +192,7 @@ const {
   errorMessage: '获取菜单列表失败',
 })
 
-const form = reactive<CreateMenuForm>({
+const createForm = reactive<CreateMenuForm>({
   name: '',
   path: '',
   icon: '',
@@ -107,192 +202,240 @@ const form = reactive<CreateMenuForm>({
   sort: 0,
 })
 
+const detailForm = reactive({
+  id: 0,
+  name: '',
+  path: '',
+  icon: '',
+  component: '',
+  parentId: undefined as number | undefined,
+  permission: '',
+  sort: 0,
+  createTime: '' as string | undefined,
+  modifyTime: '' as string | undefined,
+  modifier: undefined as number | undefined,
+})
+
 const rules = {
   name: [
     { required: true, message: '请输入菜单名称', trigger: 'blur' },
     { max: 50, message: '菜单名称不能超过50个字符', trigger: 'blur' },
   ],
-  path: [
+  path: [{ max: 200, message: '路由路径不能超过200个字符', trigger: 'blur' }],
-    { max: 200, message: '路由路径不能超过200个字符', trigger: 'blur' },
+  icon: [{ max: 50, message: '图标名称不能超过50个字符', trigger: 'blur' }],
-  ],
+  component: [{ max: 200, message: '组件路径不能超过200个字符', trigger: 'blur' }],
-  icon: [
+  permission: [{ max: 100, message: '权限编码不能超过100个字符', trigger: 'blur' }],
-    { max: 50, message: '图标名称不能超过50个字符', trigger: 'blur' },
-  ],
-  component: [
-    { max: 200, message: '组件路径不能超过200个字符', trigger: 'blur' },
-  ],
-  permission: [
-    { max: 100, message: '权限编码不能超过100个字符', trigger: 'blur' },
-  ],
   sort: [
     { type: 'number', min: 0, max: 9999, message: '排序值必须在0-9999之间', trigger: 'blur' },
   ],
 }
 
-const columns: TableColumnsType = [
+// 右侧编辑：父菜单树（排除当前节点）
-  { title: 'ID', dataIndex: 'id', key: 'id', width: 110 },
-  { title: '菜单名称', dataIndex: 'name', key: 'name' },
-  { title: '路径', dataIndex: 'path', key: 'path' },
-  { title: '图标', dataIndex: 'icon', key: 'icon', width: 100, align: 'center' },
-  { title: '排序', dataIndex: 'sort', key: 'sort', width: 80 },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    key: 'createTime',
-    align: 'center',
-    width: 120,
-    customRender: ({ text }) =>
-      text ? new Date(text).toISOString().replace('T', ' ').substring(0, 19) : ''
-  },
-  {
-    title: '编辑时间',
-    dataIndex: 'modifyTime',
-    key: 'modifyTime',
-    align: 'center',
-    width: 120,
-    customRender: ({ text }) =>
-      text ? new Date(text).toISOString().replace('T', ' ').substring(0, 19) : ''
-  },
-  { title: '修改人', dataIndex: 'modifier', key: 'modifier', width: 100 },
-  { title: '操作', key: 'action', width: 150 },
-]
-
-// 构建菜单树选项（用于父菜单选择）
 const menuTreeOptions = computed(() => {
-  const buildOptions = (menus: Menu[], excludeId?: number): any[] => {
+  const buildOptions = (menus: Menu[], excludeId?: number): { title: string; value: number; key: number; children?: ReturnType<typeof buildOptions> }[] => {
     return menus
       .filter((menu) => menu.id !== excludeId)
       .map((menu) => ({
         title: menu.name,
         value: menu.id,
         key: menu.id,
-        children: menu.children ? buildOptions(menu.children, excludeId) : undefined,
+        children: menu.children?.length ? buildOptions(menu.children, excludeId) : undefined,
       }))
   }
-  return buildOptions(dataSource.value, editingId.value || undefined)
+  return buildOptions(dataSource.value, selectedId.value ?? undefined)
 })
 
-// 新增菜单
+// 新增弹窗：不排除节点（无编辑中的 id）
-const handleAdd = () => {
+const menuTreeOptionsForCreate = computed(() => {
-  // 权限检查
+  const buildOptions = (menus: Menu[]): { title: string; value: number; key: number; children?: ReturnType<typeof buildOptions> }[] => {
-  if (!authStore.hasPermission('menu:create')) {
+    return menus.map((menu) => ({
-    message.error('您没有创建菜单的权限')
+      title: menu.name,
-    return
+      value: menu.id,
+      key: menu.id,
+      children: menu.children?.length ? buildOptions(menu.children) : undefined,
+    }))
   }
+  return buildOptions(dataSource.value)
+})
 
-  modalTitle.value = '新增菜单'
+const resetCreateForm = () => {
-  editingId.value = null
+  createForm.name = ''
-  modalVisible.value = true
+  createForm.path = ''
-  nextTick(() => {
+  createForm.icon = ''
-    formRef.value?.resetFields()
+  createForm.component = ''
-    form.name = ''
+  createForm.parentId = undefined
-    form.path = ''
+  createForm.permission = ''
-    form.icon = ''
+  createForm.sort = 0
-    form.component = ''
-    form.parentId = undefined
-    form.permission = ''
-    form.sort = 0
-  })
 }
 
-// 编辑菜单
+const loadDetail = async (id: number) => {
-const handleEdit = async (record: Menu) => {
+  selectedId.value = id
-  modalTitle.value = '编辑菜单'
+  selectedKeys.value = [id]
-  editingId.value = record.id
-  modalVisible.value = true
   detailLoading.value = true
-
   try {
-    const detail = await menusApi.getDetail(record.id)
+    const detail = await menusApi.getDetail(id)
-    form.name = detail.name
+    detailForm.id = detail.id
-    form.path = detail.path || ''
+    detailForm.name = detail.name
-    form.icon = detail.icon || ''
+    detailForm.path = detail.path || ''
-    form.component = detail.component || ''
+    detailForm.icon = detail.icon || ''
-    form.parentId = detail.parentId || undefined
+    detailForm.component = detail.component || ''
-    form.permission = detail.permission || ''
+    detailForm.parentId = detail.parentId || undefined
-    form.sort = detail.sort || 0
+    detailForm.permission = detail.permission || ''
-  } catch (error) {
+    detailForm.sort = detail.sort ?? 0
+    detailForm.createTime = detail.createTime
+    detailForm.modifyTime = detail.modifyTime
+    detailForm.modifier = detail.modifier
+  } catch {
     message.error('获取菜单详情失败')
-    modalVisible.value = false
+    selectedKeys.value = []
+    selectedId.value = null
   } finally {
     detailLoading.value = false
   }
 }
 
-// 删除菜单
+const onTreeSelect = (keys: (string | number)[]) => {
-const handleDelete = (record: Menu) => {
+  if (!keys.length) {
-  Modal.confirm({
+    selectedKeys.value = []
-    title: '确认删除',
+    selectedId.value = null
-    content: `确定要删除菜单 "${record.name}" 吗？删除后其子菜单也会被删除，且无法恢复。`,
+    return
-    okText: '确定',
+  }
-    okType: 'danger',
+  const id = Number(keys[0])
-    cancelText: '取消',
+  loadDetail(id)
-    onOk: async () => {
+}
-      try {
+
-        await menusApi.delete(record.id)
+const handleAdd = () => {
-        message.success('删除成功')
+  if (!authStore.hasPermission('menu:create')) {
-        refreshList()
+    message.error('您没有创建菜单的权限')
-      } catch (error: any) {
+    return
-        const errorMessage = error?.response?.data?.message || '删除失败'
+  }
-        message.error(errorMessage)
+  modalVisible.value = true
+  nextTick(() => {
+    createFormRef.value?.resetFields()
+    resetCreateForm()
+    if (selectedId.value != null) {
+      createForm.parentId = selectedId.value
     }
-    },
   })
 }
 
-// 提交表单
+const handleSubmitCreate = async () => {
-const handleSubmit = async () => {
   try {
-    await formRef.value?.validate()
+    await createFormRef.value?.validate()
     submitLoading.value = true
-
-    if (editingId.value) {
-      // 编辑
-      const updateData: UpdateMenuForm = {
-        name: form.name,
-        path: form.path || undefined,
-        icon: form.icon || undefined,
-        component: form.component || undefined,
-        parentId: form.parentId || undefined,
-        permission: form.permission || undefined,
-        sort: form.sort || 0,
-      }
-      await menusApi.update(editingId.value, updateData)
-      message.success('编辑成功')
-    } else {
-      // 新增
     const createData: CreateMenuForm = {
-        name: form.name,
+      name: createForm.name,
-        path: form.path || undefined,
+      path: createForm.path || undefined,
-        icon: form.icon || undefined,
+      icon: createForm.icon || undefined,
-        component: form.component || undefined,
+      component: createForm.component || undefined,
-        parentId: form.parentId || undefined,
+      parentId: createForm.parentId || undefined,
-        permission: form.permission || undefined,
+      permission: createForm.permission || undefined,
-        sort: form.sort || 0,
+      sort: createForm.sort ?? 0,
     }
-      await menusApi.create(createData)
+    const created = await menusApi.create(createData)
     message.success('新增成功')
-    }
-
     modalVisible.value = false
-    refreshList()
+    await refreshList()
-  } catch (error: any) {
+    if (created?.id) {
-    if (error?.errorFields) {
+      await loadDetail(created.id)
-      // 表单验证错误
-      return
     }
-    const errorMessage =
+  } catch (error: unknown) {
-      error?.response?.data?.message ||
+    const err = error as { errorFields?: unknown; response?: { data?: { message?: string } } }
-      (editingId.value ? '编辑失败' : '新增失败')
+    if (err?.errorFields) return
-    message.error(errorMessage)
+    message.error(err?.response?.data?.message || '新增失败')
   } finally {
     submitLoading.value = false
   }
 }
 
-// 取消表单
+const handleCancelCreate = () => {
-const handleCancel = () => {
   modalVisible.value = false
-  formRef.value?.resetFields()
+  createFormRef.value?.resetFields()
+}
+
+const handleSaveDetail = async () => {
+  if (selectedId.value == null) return
+  try {
+    await detailFormRef.value?.validate()
+    saveDetailLoading.value = true
+    const updateData: UpdateMenuForm = {
+      name: detailForm.name,
+      path: detailForm.path || undefined,
+      icon: detailForm.icon || undefined,
+      component: detailForm.component || undefined,
+      parentId: detailForm.parentId || undefined,
+      permission: detailForm.permission || undefined,
+      sort: detailForm.sort ?? 0,
+    }
+    await menusApi.update(selectedId.value, updateData)
+    message.success('保存成功')
+    await refreshList()
+    await loadDetail(selectedId.value)
+  } catch (error: unknown) {
+    const err = error as { errorFields?: unknown; response?: { data?: { message?: string } } }
+    if (err?.errorFields) return
+    message.error(err?.response?.data?.message || '保存失败')
+  } finally {
+    saveDetailLoading.value = false
+  }
+}
+
+const handleDeleteDetail = () => {
+  if (selectedId.value == null) return
+  Modal.confirm({
+    title: '确认删除',
+    content: `确定要删除菜单 "${detailForm.name}" 吗？删除后其子菜单也会被删除，且无法恢复。`,
+    okText: '确定',
+    okType: 'danger',
+    cancelText: '取消',
+    onOk: async () => {
+      try {
+        const id = selectedId.value!
+        await menusApi.delete(id)
+        message.success('删除成功')
+        selectedKeys.value = []
+        selectedId.value = null
+        await refreshList()
+      } catch (error: unknown) {
+        const err = error as { response?: { data?: { message?: string } } }
+        message.error(err?.response?.data?.message || '删除失败')
+      }
+    },
+  })
 }
 </script>
+
+<style scoped>
+.page-content {
+  display: flex;
+  gap: 16px;
+}
+
+.left-panel {
+  width: 280px;
+  flex-shrink: 0;
+  min-height: 0;
+}
+
+/* 左侧菜单树独立纵向滚动，避免整页被撑高 */
+.left-tree-scroll {
+  max-height: calc(100vh - 240px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.right-panel {
+  flex: 1;
+  min-width: 0;
+}
+
+.tree-node-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.tree-node-icon {
+  font-size: 14px;
+}
+</style>