xto-fronted 0.4.102 → 0.4.103

package/src/views/system/menu/index.vue

@@ -1,690 +1,690 @@
-<script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
-import { Form, FormItem, Input, Select, Switch, InputNumber } from '@xto/form'
-import { Tag } from '@xto/data'
-import { Modal, Message } from '@xto/feedback'
-import { Space, Button } from '@xto/base'
-import { MenuType, MenuTypeOptions, Status } from '@/enums'
-
-// 菜单数据类型
-interface Menu {
-  id: number
-  parentId: number | null
-  name: string
-  path: string
-  component: string
-  redirect: string
-  icon: string
-  title: string
-  type: MenuType
-  sort: number
-  status: Status
-  hidden: boolean
-  keepAlive: boolean
-  children?: Menu[]
-}
-
-// Mock 数据
-const mockMenus: Menu[] = [
-  {
-    id: 1,
-    parentId: null,
-    name: 'Dashboard',
-    path: '/dashboard',
-    component: 'dashboard/index',
-    redirect: '',
-    icon: 'dashboard',
-    title: '仪表盘',
-    type: MenuType.MENU,
-    sort: 1,
-    status: Status.ENABLED,
-    hidden: false,
-    keepAlive: true
-  },
-  {
-    id: 2,
-    parentId: null,
-    name: 'System',
-    path: '/system',
-    component: '',
-    redirect: '/system/user',
-    icon: 'setting',
-    title: '系统管理',
-    type: MenuType.DIRECTORY,
-    sort: 2,
-    status: Status.ENABLED,
-    hidden: false,
-    keepAlive: false,
-    children: [
-      {
-        id: 21,
-        parentId: 2,
-        name: 'SystemUser',
-        path: '/system/user',
-        component: 'system/user/index',
-        redirect: '',
-        icon: 'user',
-        title: '用户管理',
-        type: MenuType.MENU,
-        sort: 1,
-        status: Status.ENABLED,
-        hidden: false,
-        keepAlive: true
-      },
-      {
-        id: 22,
-        parentId: 2,
-        name: 'SystemRole',
-        path: '/system/role',
-        component: 'system/role/index',
-        redirect: '',
-        icon: 'role',
-        title: '角色管理',
-        type: MenuType.MENU,
-        sort: 2,
-        status: Status.ENABLED,
-        hidden: false,
-        keepAlive: true
-      },
-      {
-        id: 23,
-        parentId: 2,
-        name: 'SystemMenu',
-        path: '/system/menu',
-        component: 'system/menu/index',
-        redirect: '',
-        icon: 'menu',
-        title: '菜单管理',
-        type: MenuType.MENU,
-        sort: 3,
-        status: Status.ENABLED,
-        hidden: false,
-        keepAlive: true
-      }
-    ]
-  }
-]
-
-const loading = ref(false)
-const menuList = ref<Menu[]>([])
-
-// 弹窗
-const modalVisible = ref(false)
-const modalTitle = computed(() => formData.id ? '编辑菜单' : '新增菜单')
-const formData = reactive({
-  id: 0,
-  parentId: null as number | null,
-  name: '',
-  path: '',
-  component: '',
-  redirect: '',
-  icon: '',
-  title: '',
-  type: MenuType.MENU,
-  sort: 0,
-  status: Status.ENABLED,
-  hidden: false,
-  keepAlive: true
-})
-
-const rules: Record<string, any[]> = {
-  name: [
-    { required: true, message: '请输入菜单名称', trigger: 'blur' }
-  ],
-  path: [
-    { required: true, message: '请输入路由路径', trigger: 'blur' }
-  ],
-  title: [
-    { required: true, message: '请输入菜单标题', trigger: 'blur' }
-  ]
-}
-
-const formRef = ref()
-
-// 获取菜单列表
-const getMenuList = () => {
-  loading.value = true
-  setTimeout(() => {
-    menuList.value = mockMenus
-    loading.value = false
-  }, 300)
-}
-
-// 新增
-const handleAdd = (parentId: number | null = null) => {
-  Object.assign(formData, {
-    id: 0,
-    parentId,
-    name: '',
-    path: '',
-    component: '',
-    redirect: '',
-    icon: '',
-    title: '',
-    type: MenuType.MENU,
-    sort: 0,
-    status: Status.ENABLED,
-    hidden: false,
-    keepAlive: true
-  })
-  modalVisible.value = true
-}
-
-// 编辑
-const handleEdit = (node: Menu) => {
-  Object.assign(formData, node)
-  modalVisible.value = true
-}
-
-// 提交
-const handleSubmit = async () => {
-  try {
-    await formRef.value?.validate()
-    Message.success(formData.id ? '编辑成功' : '新增成功')
-    modalVisible.value = false
-    getMenuList()
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-// 菜单图标
-const getMenuIcon = (icon?: string) => {
-  const iconMap: Record<string, string> = {
-    dashboard: '📊',
-    system: '⚙️',
-    user: '👤',
-    role: '👥',
-    menu: '📋',
-    setting: '🔧'
-  }
-  return iconMap[icon || ''] || '📄'
-}
-
-// 获取类型标签类型
-const getTypeTagType = (type: MenuType) => {
-  switch (type) {
-    case MenuType.DIRECTORY: return 'primary'
-    case MenuType.MENU: return 'success'
-    default: return 'warning'
-  }
-}
-
-// 获取类型标签文本
-const getTypeTagText = (type: MenuType) => {
-  switch (type) {
-    case MenuType.DIRECTORY: return '目录'
-    case MenuType.MENU: return '菜单'
-    default: return '按钮'
-  }
-}
-
-onMounted(() => {
-  getMenuList()
-})
-</script>
-
-<template>
-  <div class="menu-page">
-    <!-- 表格 -->
-    <div class="table-section">
-      <!-- 工具栏 -->
-      <div class="table-toolbar">
-        <div class="toolbar-left">
-          <Button type="primary" @click="handleAdd()">
-            <template #icon>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="12" y1="5" x2="12" y2="19"/>
-                <line x1="5" y1="12" x2="19" y2="12"/>
-              </svg>
-            </template>
-            新增菜单
-          </Button>
-        </div>
-        <div class="toolbar-right">
-          <span class="table-count">共 {{ menuList.length }} 个菜单</span>
-        </div>
-      </div>
-
-      <!-- 菜单树表格 -->
-      <div class="table-wrapper">
-        <table class="data-table">
-          <thead>
-            <tr>
-              <th class="col-name">菜单名称</th>
-              <th class="col-icon">图标</th>
-              <th class="col-path">路由路径</th>
-              <th class="col-type">类型</th>
-              <th class="col-sort">排序</th>
-              <th class="col-status">状态</th>
-              <th class="col-actions">操作</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-if="loading">
-              <td colspan="7" class="loading-cell">
-                <div class="loading-content">
-                  <div class="loading-spinner"></div>
-                  <span>加载中...</span>
-                </div>
-              </td>
-            </tr>
-            <tr v-else-if="menuList.length === 0">
-              <td colspan="7" class="empty-cell">
-                <div class="empty-content">
-                  <svg viewBox="0 0 64 41" fill="none">
-                    <g transform="translate(0 1)">
-                      <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"/>
-                      <g stroke="var(--color-text-placeholder)" stroke-width="2">
-                        <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"/>
-                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--color-fill)"/>
-                      </g>
-                    </g>
-                  </svg>
-                  <span>暂无数据</span>
-                </div>
-              </td>
-            </tr>
-            <template v-else v-for="menu in menuList" :key="menu.id">
-              <tr class="data-row tree-row--level-0">
-                <td class="col-name">
-                  <div class="menu-info">
-                    <span class="menu-icon-wrapper">{{ getMenuIcon(menu.icon) }}</span>
-                    <span class="menu-title" @click="handleEdit(menu)">{{ menu.title }}</span>
-                  </div>
-                </td>
-                <td class="col-icon">
-                  <span class="icon-text">{{ getMenuIcon(menu.icon) }}</span>
-                </td>
-                <td class="col-path">
-                  <code class="path-code">{{ menu.path }}</code>
-                </td>
-                <td class="col-type">
-                  <Tag :type="getTypeTagType(menu.type)" size="small">
-                    {{ getTypeTagText(menu.type) }}
-                  </Tag>
-                </td>
-                <td class="col-sort">
-                  <span class="sort-badge">{{ menu.sort }}</span>
-                </td>
-                <td class="col-status">
-                  <Tag :type="menu.status === Status.ENABLED ? 'success' : 'danger'" size="small">
-                    {{ menu.status === Status.ENABLED ? '启用' : '禁用' }}
-                  </Tag>
-                </td>
-                <td class="col-actions">
-                  <Space class="action-buttons">
-                    <Button type="primary" link size="small" @click="handleAdd(menu.id)">
-                      <template #icon>
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                          <line x1="12" y1="5" x2="12" y2="19"/>
-                          <line x1="5" y1="12" x2="19" y2="12"/>
-                        </svg>
-                      </template>
-                      新增
-                    </Button>
-                    <Button type="primary" link size="small" @click="handleEdit(menu)">
-                      <template #icon>
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                          <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
-                          <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
-                        </svg>
-                      </template>
-                      编辑
-                    </Button>
-                  </Space>
-                </td>
-              </tr>
-              <template v-if="menu.children" v-for="child in menu.children" :key="child.id">
-                <tr class="data-row tree-row--level-1">
-                  <td class="col-name">
-                    <div class="menu-info">
-                      <span class="tree-indent"></span>
-                      <span class="tree-line"></span>
-                      <span class="menu-icon-wrapper">{{ getMenuIcon(child.icon) }}</span>
-                      <span class="menu-title" @click="handleEdit(child)">{{ child.title }}</span>
-                    </div>
-                  </td>
-                  <td class="col-icon">
-                    <span class="icon-text">{{ getMenuIcon(child.icon) }}</span>
-                  </td>
-                  <td class="col-path">
-                    <code class="path-code">{{ child.path }}</code>
-                  </td>
-                  <td class="col-type">
-                    <Tag :type="getTypeTagType(child.type)" size="small">
-                      {{ getTypeTagText(child.type) }}
-                    </Tag>
-                  </td>
-                  <td class="col-sort">
-                    <span class="sort-badge">{{ child.sort }}</span>
-                  </td>
-                  <td class="col-status">
-                    <Tag :type="child.status === Status.ENABLED ? 'success' : 'danger'" size="small">
-                      {{ child.status === Status.ENABLED ? '启用' : '禁用' }}
-                    </Tag>
-                  </td>
-                  <td class="col-actions">
-                    <Space class="action-buttons">
-                      <Button type="primary" link size="small" @click="handleEdit(child)">
-                        <template #icon>
-                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
-                            <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
-                          </svg>
-                        </template>
-                        编辑
-                      </Button>
-                    </Space>
-                  </td>
-                </tr>
-              </template>
-            </template>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <!-- 编辑弹窗 -->
-    <Modal v-model="modalVisible" :title="modalTitle" width="600px" class="menu-modal">
-      <Form ref="formRef" :model="formData" :rules="rules" label-width="80px" class="menu-form">
-        <div class="form-grid">
-          <FormItem label="上级菜单" class="form-item-full">
-            <Input v-model="formData.parentId" placeholder="上级菜单ID" disabled />
-          </FormItem>
-          <FormItem label="菜单类型">
-            <Select v-model="formData.type" :options="MenuTypeOptions" />
-          </FormItem>
-          <FormItem label="排序">
-            <InputNumber v-model="formData.sort" :min="0" />
-          </FormItem>
-          <FormItem label="菜单名称" prop="name">
-            <Input v-model="formData.name" placeholder="请输入菜单名称（路由name）" />
-          </FormItem>
-          <FormItem label="菜单标题" prop="title">
-            <Input v-model="formData.title" placeholder="请输入菜单标题" />
-          </FormItem>
-          <FormItem label="路由路径" prop="path" class="form-item-full">
-            <Input v-model="formData.path" placeholder="请输入路由路径" />
-          </FormItem>
-          <FormItem label="组件路径" class="form-item-full">
-            <Input v-model="formData.component" placeholder="请输入组件路径" />
-          </FormItem>
-          <FormItem label="图标">
-            <Input v-model="formData.icon" placeholder="请输入图标名称" />
-          </FormItem>
-          <FormItem label="状态">
-            <div class="status-field">
-              <Switch v-model="formData.status" :active-value="Status.ENABLED" :inactive-value="Status.DISABLED" />
-              <span class="status-label">{{ formData.status === Status.ENABLED ? '启用' : '禁用' }}</span>
-            </div>
-          </FormItem>
-          <FormItem label="隐藏">
-            <div class="status-field">
-              <Switch v-model="formData.hidden" />
-              <span class="status-label">{{ formData.hidden ? '隐藏' : '显示' }}</span>
-            </div>
-          </FormItem>
-          <FormItem label="缓存">
-            <div class="status-field">
-              <Switch v-model="formData.keepAlive" />
-              <span class="status-label">{{ formData.keepAlive ? '开启' : '关闭' }}</span>
-            </div>
-          </FormItem>
-        </div>
-      </Form>
-      <template #footer>
-        <Space>
-          <Button @click="modalVisible = false">取消</Button>
-          <Button type="primary" @click="handleSubmit">确定</Button>
-        </Space>
-      </template>
-    </Modal>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.menu-page {
-  padding: 24px;
-  background: var(--bg-color-page);
-  min-height: 100%;
-}
-
-// 表格区域
-.table-section {
-  background: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  box-shadow: var(--box-shadow-card);
-  overflow: hidden;
-}
-
-.table-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 24px;
-  border-bottom: 1px solid var(--color-border-lighter);
-
-  .toolbar-left {
-    display: flex;
-    gap: 12px;
-  }
-
-  .table-count {
-    font-size: 14px;
-    color: var(--color-text-secondary);
-  }
-}
-
-.table-wrapper {
-  overflow-x: auto;
-}
-
-// 表格样式
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  th, td {
-    padding: 14px 16px;
-    text-align: left;
-    border-bottom: 1px solid var(--color-border-lighter);
-  }
-
-  th {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text-secondary);
-    background: var(--color-fill-light);
-    white-space: nowrap;
-  }
-
-  .data-row {
-    transition: background-color 0.2s;
-
-    &:hover {
-      background: var(--color-primary-light-6);
-    }
-  }
-
-  td {
-    vertical-align: middle;
-  }
-
-  .loading-cell,
-  .empty-cell {
-    padding: 60px 20px;
-  }
-
-  .loading-content,
-  .empty-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-    color: var(--color-text-placeholder);
-
-    svg {
-      width: 64px;
-      height: 41px;
-    }
-  }
-
-  .loading-spinner {
-    width: 32px;
-    height: 32px;
-    border: 3px solid var(--color-border-lighter);
-    border-top-color: var(--color-primary);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-  }
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-// 树形结构
-.tree-row--level-1 {
-  .col-name {
-    padding-left: 40px;
-  }
-}
-
-.tree-indent {
-  display: inline-block;
-  width: 24px;
-}
-
-.tree-line {
-  position: relative;
-  display: inline-block;
-  width: 16px;
-  height: 1px;
-  background: var(--color-border-light);
-  margin-right: 8px;
-  vertical-align: middle;
-}
-
-// 列样式
-.col-name {
-  min-width: 200px;
-}
-
-.menu-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.menu-icon-wrapper {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-fill-light);
-  border-radius: 6px;
-  font-size: 14px;
-}
-
-.menu-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  cursor: pointer;
-  transition: color 0.2s;
-
-  &:hover {
-    color: var(--color-primary);
-  }
-}
-
-.col-icon {
-  width: 80px;
-}
-
-.icon-text {
-  font-size: 16px;
-}
-
-.col-path {
-  min-width: 140px;
-}
-
-.path-code {
-  font-family: 'SF Mono', Monaco, Consolas, monospace;
-  font-size: 12px;
-  padding: 4px 8px;
-  background: var(--color-fill-light);
-  border-radius: 4px;
-  color: var(--color-text-secondary);
-}
-
-.col-type {
-  width: 80px;
-}
-
-.col-sort {
-  width: 60px;
-}
-
-.sort-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 24px;
-  height: 24px;
-  padding: 0 8px;
-  background: var(--color-fill);
-  border-radius: 12px;
-  font-size: 12px;
-  color: var(--color-text-secondary);
-}
-
-.col-status {
-  width: 80px;
-}
-
-.col-actions {
-  min-width: 140px;
-}
-
-.action-buttons {
-  :deep(.x-button) {
-    padding: 4px 8px;
-
-    svg {
-      width: 14px;
-      height: 14px;
-      margin-right: 4px;
-    }
-  }
-}
-
-// 弹窗表单
-.menu-form {
-  padding: 16px 0;
-
-  .form-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 0 24px;
-  }
-
-  .form-item-full {
-    grid-column: span 2;
-  }
-
-  .status-field {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .status-label {
-    font-size: 14px;
-    color: var(--color-text-secondary);
-  }
-}
-</style>
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import { Form, FormItem, Input, Select, Switch, InputNumber } from '@xto/form'
+import { Tag } from '@xto/data'
+import { Modal, Message } from '@xto/feedback'
+import { Space, Button } from '@xto/base'
+import { MenuType, MenuTypeOptions, Status } from '@/enums'
+
+// 菜单数据类型
+interface Menu {
+  id: number
+  parentId: number | null
+  name: string
+  path: string
+  component: string
+  redirect: string
+  icon: string
+  title: string
+  type: MenuType
+  sort: number
+  status: Status
+  hidden: boolean
+  keepAlive: boolean
+  children?: Menu[]
+}
+
+// Mock 数据
+const mockMenus: Menu[] = [
+  {
+    id: 1,
+    parentId: null,
+    name: 'Dashboard',
+    path: '/dashboard',
+    component: 'dashboard/index',
+    redirect: '',
+    icon: 'dashboard',
+    title: '仪表盘',
+    type: MenuType.MENU,
+    sort: 1,
+    status: Status.ENABLED,
+    hidden: false,
+    keepAlive: true
+  },
+  {
+    id: 2,
+    parentId: null,
+    name: 'System',
+    path: '/system',
+    component: '',
+    redirect: '/system/user',
+    icon: 'setting',
+    title: '系统管理',
+    type: MenuType.DIRECTORY,
+    sort: 2,
+    status: Status.ENABLED,
+    hidden: false,
+    keepAlive: false,
+    children: [
+      {
+        id: 21,
+        parentId: 2,
+        name: 'SystemUser',
+        path: '/system/user',
+        component: 'system/user/index',
+        redirect: '',
+        icon: 'user',
+        title: '用户管理',
+        type: MenuType.MENU,
+        sort: 1,
+        status: Status.ENABLED,
+        hidden: false,
+        keepAlive: true
+      },
+      {
+        id: 22,
+        parentId: 2,
+        name: 'SystemRole',
+        path: '/system/role',
+        component: 'system/role/index',
+        redirect: '',
+        icon: 'role',
+        title: '角色管理',
+        type: MenuType.MENU,
+        sort: 2,
+        status: Status.ENABLED,
+        hidden: false,
+        keepAlive: true
+      },
+      {
+        id: 23,
+        parentId: 2,
+        name: 'SystemMenu',
+        path: '/system/menu',
+        component: 'system/menu/index',
+        redirect: '',
+        icon: 'menu',
+        title: '菜单管理',
+        type: MenuType.MENU,
+        sort: 3,
+        status: Status.ENABLED,
+        hidden: false,
+        keepAlive: true
+      }
+    ]
+  }
+]
+
+const loading = ref(false)
+const menuList = ref<Menu[]>([])
+
+// 弹窗
+const modalVisible = ref(false)
+const modalTitle = computed(() => formData.id ? '编辑菜单' : '新增菜单')
+const formData = reactive({
+  id: 0,
+  parentId: null as number | null,
+  name: '',
+  path: '',
+  component: '',
+  redirect: '',
+  icon: '',
+  title: '',
+  type: MenuType.MENU,
+  sort: 0,
+  status: Status.ENABLED,
+  hidden: false,
+  keepAlive: true
+})
+
+const rules: Record<string, any[]> = {
+  name: [
+    { required: true, message: '请输入菜单名称', trigger: 'blur' }
+  ],
+  path: [
+    { required: true, message: '请输入路由路径', trigger: 'blur' }
+  ],
+  title: [
+    { required: true, message: '请输入菜单标题', trigger: 'blur' }
+  ]
+}
+
+const formRef = ref()
+
+// 获取菜单列表
+const getMenuList = () => {
+  loading.value = true
+  setTimeout(() => {
+    menuList.value = mockMenus
+    loading.value = false
+  }, 300)
+}
+
+// 新增
+const handleAdd = (parentId: number | null = null) => {
+  Object.assign(formData, {
+    id: 0,
+    parentId,
+    name: '',
+    path: '',
+    component: '',
+    redirect: '',
+    icon: '',
+    title: '',
+    type: MenuType.MENU,
+    sort: 0,
+    status: Status.ENABLED,
+    hidden: false,
+    keepAlive: true
+  })
+  modalVisible.value = true
+}
+
+// 编辑
+const handleEdit = (node: Menu) => {
+  Object.assign(formData, node)
+  modalVisible.value = true
+}
+
+// 提交
+const handleSubmit = async () => {
+  try {
+    await formRef.value?.validate()
+    Message.success(formData.id ? '编辑成功' : '新增成功')
+    modalVisible.value = false
+    getMenuList()
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 菜单图标
+const getMenuIcon = (icon?: string) => {
+  const iconMap: Record<string, string> = {
+    dashboard: '📊',
+    system: '⚙️',
+    user: '👤',
+    role: '👥',
+    menu: '📋',
+    setting: '🔧'
+  }
+  return iconMap[icon || ''] || '📄'
+}
+
+// 获取类型标签类型
+const getTypeTagType = (type: MenuType) => {
+  switch (type) {
+    case MenuType.DIRECTORY: return 'primary'
+    case MenuType.MENU: return 'success'
+    default: return 'warning'
+  }
+}
+
+// 获取类型标签文本
+const getTypeTagText = (type: MenuType) => {
+  switch (type) {
+    case MenuType.DIRECTORY: return '目录'
+    case MenuType.MENU: return '菜单'
+    default: return '按钮'
+  }
+}
+
+onMounted(() => {
+  getMenuList()
+})
+</script>
+
+<template>
+  <div class="menu-page">
+    <!-- 表格 -->
+    <div class="table-section">
+      <!-- 工具栏 -->
+      <div class="table-toolbar">
+        <div class="toolbar-left">
+          <Button type="primary" @click="handleAdd()">
+            <template #icon>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="12" y1="5" x2="12" y2="19"/>
+                <line x1="5" y1="12" x2="19" y2="12"/>
+              </svg>
+            </template>
+            新增菜单
+          </Button>
+        </div>
+        <div class="toolbar-right">
+          <span class="table-count">共 {{ menuList.length }} 个菜单</span>
+        </div>
+      </div>
+
+      <!-- 菜单树表格 -->
+      <div class="table-wrapper">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th class="col-name">菜单名称</th>
+              <th class="col-icon">图标</th>
+              <th class="col-path">路由路径</th>
+              <th class="col-type">类型</th>
+              <th class="col-sort">排序</th>
+              <th class="col-status">状态</th>
+              <th class="col-actions">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="loading">
+              <td colspan="7" class="loading-cell">
+                <div class="loading-content">
+                  <div class="loading-spinner"></div>
+                  <span>加载中...</span>
+                </div>
+              </td>
+            </tr>
+            <tr v-else-if="menuList.length === 0">
+              <td colspan="7" class="empty-cell">
+                <div class="empty-content">
+                  <svg viewBox="0 0 64 41" fill="none">
+                    <g transform="translate(0 1)">
+                      <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"/>
+                      <g stroke="var(--color-text-placeholder)" stroke-width="2">
+                        <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"/>
+                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--color-fill)"/>
+                      </g>
+                    </g>
+                  </svg>
+                  <span>暂无数据</span>
+                </div>
+              </td>
+            </tr>
+            <template v-else v-for="menu in menuList" :key="menu.id">
+              <tr class="data-row tree-row--level-0">
+                <td class="col-name">
+                  <div class="menu-info">
+                    <span class="menu-icon-wrapper">{{ getMenuIcon(menu.icon) }}</span>
+                    <span class="menu-title" @click="handleEdit(menu)">{{ menu.title }}</span>
+                  </div>
+                </td>
+                <td class="col-icon">
+                  <span class="icon-text">{{ getMenuIcon(menu.icon) }}</span>
+                </td>
+                <td class="col-path">
+                  <code class="path-code">{{ menu.path }}</code>
+                </td>
+                <td class="col-type">
+                  <Tag :type="getTypeTagType(menu.type)" size="small">
+                    {{ getTypeTagText(menu.type) }}
+                  </Tag>
+                </td>
+                <td class="col-sort">
+                  <span class="sort-badge">{{ menu.sort }}</span>
+                </td>
+                <td class="col-status">
+                  <Tag :type="menu.status === Status.ENABLED ? 'success' : 'danger'" size="small">
+                    {{ menu.status === Status.ENABLED ? '启用' : '禁用' }}
+                  </Tag>
+                </td>
+                <td class="col-actions">
+                  <Space class="action-buttons">
+                    <Button type="primary" link size="small" @click="handleAdd(menu.id)">
+                      <template #icon>
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                          <line x1="12" y1="5" x2="12" y2="19"/>
+                          <line x1="5" y1="12" x2="19" y2="12"/>
+                        </svg>
+                      </template>
+                      新增
+                    </Button>
+                    <Button type="primary" link size="small" @click="handleEdit(menu)">
+                      <template #icon>
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                          <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
+                          <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
+                        </svg>
+                      </template>
+                      编辑
+                    </Button>
+                  </Space>
+                </td>
+              </tr>
+              <template v-if="menu.children" v-for="child in menu.children" :key="child.id">
+                <tr class="data-row tree-row--level-1">
+                  <td class="col-name">
+                    <div class="menu-info">
+                      <span class="tree-indent"></span>
+                      <span class="tree-line"></span>
+                      <span class="menu-icon-wrapper">{{ getMenuIcon(child.icon) }}</span>
+                      <span class="menu-title" @click="handleEdit(child)">{{ child.title }}</span>
+                    </div>
+                  </td>
+                  <td class="col-icon">
+                    <span class="icon-text">{{ getMenuIcon(child.icon) }}</span>
+                  </td>
+                  <td class="col-path">
+                    <code class="path-code">{{ child.path }}</code>
+                  </td>
+                  <td class="col-type">
+                    <Tag :type="getTypeTagType(child.type)" size="small">
+                      {{ getTypeTagText(child.type) }}
+                    </Tag>
+                  </td>
+                  <td class="col-sort">
+                    <span class="sort-badge">{{ child.sort }}</span>
+                  </td>
+                  <td class="col-status">
+                    <Tag :type="child.status === Status.ENABLED ? 'success' : 'danger'" size="small">
+                      {{ child.status === Status.ENABLED ? '启用' : '禁用' }}
+                    </Tag>
+                  </td>
+                  <td class="col-actions">
+                    <Space class="action-buttons">
+                      <Button type="primary" link size="small" @click="handleEdit(child)">
+                        <template #icon>
+                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
+                            <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
+                          </svg>
+                        </template>
+                        编辑
+                      </Button>
+                    </Space>
+                  </td>
+                </tr>
+              </template>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- 编辑弹窗 -->
+    <Modal v-model="modalVisible" :title="modalTitle" width="600px" class="menu-modal">
+      <Form ref="formRef" :model="formData" :rules="rules" label-width="80px" class="menu-form">
+        <div class="form-grid">
+          <FormItem label="上级菜单" class="form-item-full">
+            <Input v-model="formData.parentId" placeholder="上级菜单ID" disabled />
+          </FormItem>
+          <FormItem label="菜单类型">
+            <Select v-model="formData.type" :options="MenuTypeOptions" />
+          </FormItem>
+          <FormItem label="排序">
+            <InputNumber v-model="formData.sort" :min="0" />
+          </FormItem>
+          <FormItem label="菜单名称" prop="name">
+            <Input v-model="formData.name" placeholder="请输入菜单名称（路由name）" />
+          </FormItem>
+          <FormItem label="菜单标题" prop="title">
+            <Input v-model="formData.title" placeholder="请输入菜单标题" />
+          </FormItem>
+          <FormItem label="路由路径" prop="path" class="form-item-full">
+            <Input v-model="formData.path" placeholder="请输入路由路径" />
+          </FormItem>
+          <FormItem label="组件路径" class="form-item-full">
+            <Input v-model="formData.component" placeholder="请输入组件路径" />
+          </FormItem>
+          <FormItem label="图标">
+            <Input v-model="formData.icon" placeholder="请输入图标名称" />
+          </FormItem>
+          <FormItem label="状态">
+            <div class="status-field">
+              <Switch v-model="formData.status" :active-value="Status.ENABLED" :inactive-value="Status.DISABLED" />
+              <span class="status-label">{{ formData.status === Status.ENABLED ? '启用' : '禁用' }}</span>
+            </div>
+          </FormItem>
+          <FormItem label="隐藏">
+            <div class="status-field">
+              <Switch v-model="formData.hidden" />
+              <span class="status-label">{{ formData.hidden ? '隐藏' : '显示' }}</span>
+            </div>
+          </FormItem>
+          <FormItem label="缓存">
+            <div class="status-field">
+              <Switch v-model="formData.keepAlive" />
+              <span class="status-label">{{ formData.keepAlive ? '开启' : '关闭' }}</span>
+            </div>
+          </FormItem>
+        </div>
+      </Form>
+      <template #footer>
+        <Space>
+          <Button @click="modalVisible = false">取消</Button>
+          <Button type="primary" @click="handleSubmit">确定</Button>
+        </Space>
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.menu-page {
+  padding: 24px;
+  background: var(--bg-color-page);
+  min-height: 100%;
+}
+
+// 表格区域
+.table-section {
+  background: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  box-shadow: var(--box-shadow-card);
+  overflow: hidden;
+}
+
+.table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--color-border-lighter);
+
+  .toolbar-left {
+    display: flex;
+    gap: 12px;
+  }
+
+  .table-count {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+  }
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+// 表格样式
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th, td {
+    padding: 14px 16px;
+    text-align: left;
+    border-bottom: 1px solid var(--color-border-lighter);
+  }
+
+  th {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    background: var(--color-fill-light);
+    white-space: nowrap;
+  }
+
+  .data-row {
+    transition: background-color 0.2s;
+
+    &:hover {
+      background: var(--color-primary-light-6);
+    }
+  }
+
+  td {
+    vertical-align: middle;
+  }
+
+  .loading-cell,
+  .empty-cell {
+    padding: 60px 20px;
+  }
+
+  .loading-content,
+  .empty-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    color: var(--color-text-placeholder);
+
+    svg {
+      width: 64px;
+      height: 41px;
+    }
+  }
+
+  .loading-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--color-border-lighter);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+// 树形结构
+.tree-row--level-1 {
+  .col-name {
+    padding-left: 40px;
+  }
+}
+
+.tree-indent {
+  display: inline-block;
+  width: 24px;
+}
+
+.tree-line {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 1px;
+  background: var(--color-border-light);
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+// 列样式
+.col-name {
+  min-width: 200px;
+}
+
+.menu-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.menu-icon-wrapper {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-fill-light);
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.menu-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: color 0.2s;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+
+.col-icon {
+  width: 80px;
+}
+
+.icon-text {
+  font-size: 16px;
+}
+
+.col-path {
+  min-width: 140px;
+}
+
+.path-code {
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  font-size: 12px;
+  padding: 4px 8px;
+  background: var(--color-fill-light);
+  border-radius: 4px;
+  color: var(--color-text-secondary);
+}
+
+.col-type {
+  width: 80px;
+}
+
+.col-sort {
+  width: 60px;
+}
+
+.sort-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 8px;
+  background: var(--color-fill);
+  border-radius: 12px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.col-status {
+  width: 80px;
+}
+
+.col-actions {
+  min-width: 140px;
+}
+
+.action-buttons {
+  :deep(.x-button) {
+    padding: 4px 8px;
+
+    svg {
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+    }
+  }
+}
+
+// 弹窗表单
+.menu-form {
+  padding: 16px 0;
+
+  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0 24px;
+  }
+
+  .form-item-full {
+    grid-column: span 2;
+  }
+
+  .status-field {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .status-label {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+  }
+}
+</style>