From c18e1fcb94fb23959a53d6c61973586a539eaf49 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Sun, 6 Jul 2025 19:03:15 +0800
Subject: [PATCH] =?UTF-8?q?refactor(role):=20=E6=B8=85=E7=90=86=E8=B0=83?=
 =?UTF-8?q?=E8=AF=95=E4=BB=A3=E7=A0=81=E5=92=8C=E6=9C=AA=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除所有console.log和console.error调试语句
- 删除未使用的菜单渲染和统计函数
- 移除未使用的catch参数避免ESLint警告
- 简化代码结构，提升可维护性
- 保持核心功能不变
---
 src/views/system/role/index.vue | 1672 ++++++++++++++-----------------
 1 file changed, 773 insertions(+), 899 deletions(-)

diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 67e3903..98ac323 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,3 +1,776 @@
+<script setup lang="ts">
+import { h, nextTick, onMounted, ref, watch } from 'vue'
+import type { DataTableColumns, FormInst } from 'naive-ui'
+import { NButton, NIcon, NPopconfirm, NSpace, NSwitch, NTag, NTree } from 'naive-ui'
+import NovaDialog from '@/components/common/NovaDialog.vue'
+import {
+  addRole,
+  batchDeleteRoles,
+  deleteRole,
+  getRolePage,
+  getRoleSorted,
+  updateRole,
+  updateRoleStatus,
+} from '@/service/api/system/role'
+import type { RoleForm, RoleSearchForm, RoleVo } from '@/service/api/system/role'
+
+import {
+  fetchMenuIdsByRoleId,
+  fetchMenuPermissionData,
+  saveRoleMenuPermission,
+} from '@/service/api/system/menu'
+import type { MenuPermissionData, MenuVo } from '@/service/api/system/menu'
+import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
+
+// 响应式数据
+const loading = ref(false)
+const tableData = ref<RoleVo[]>([])
+const modalTitle = ref('新增角色')
+const formRef = ref<FormInst | null>(null)
+const searchFormRef = ref<FormInst | null>(null)
+const isEdit = ref(false)
+const currentRole = ref<RoleVo | null>(null)
+const selectedRows = ref<RoleVo[]>([])
+
+// 弹框引用
+const roleDialogRef = ref()
+const menuDialogRef = ref()
+
+// 菜单权限分配相关
+const menuModalTitle = ref('分配菜单权限')
+const currentAssignRole = ref<RoleVo | null>(null)
+const menuData = ref<any[]>([])
+const expandedKeys = ref<string[]>([])
+const checkedKeys = ref<string[]>([])
+const menuLoading = ref(false)
+
+// 功能按钮状态
+const allExpanded = ref(false)
+const allSelected = ref(false)
+const cascadeEnabled = ref(true)
+const showPermissionCode = ref(false)
+
+// 分页数据
+const pagination = ref({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+  showSizePicker: true,
+  pageSizes: [10, 20, 50, 100],
+})
+
+// 搜索表单数据
+const searchForm = ref<RoleSearchForm>({})
+
+// 表单数据
+const formData = ref<RoleForm>({
+  roleName: '',
+  roleCode: '',
+  roleStatus: '0',
+  remark: '',
+  sorted: 1,
+})
+
+// 表单验证规则
+const rules = {
+  roleName: [
+    { required: true, message: '请输入角色名称', trigger: 'blur' },
+    { min: 2, max: 20, message: '角色名称长度为 2-20 位', trigger: 'blur' },
+  ],
+  roleCode: [
+    { required: true, message: '请输入角色编码', trigger: 'blur' },
+    { min: 2, max: 20, message: '角色编码长度为 2-20 位', trigger: 'blur' },
+    { pattern: /^\w+$/, message: '角色编码只能包含字母、数字和下划线', trigger: 'blur' },
+  ],
+  roleStatus: [
+    { required: true, message: '请选择角色状态', trigger: 'change' },
+  ],
+}
+
+// 表格列定义
+const columns: DataTableColumns<RoleVo> = [
+  {
+    type: 'selection',
+    width: 50,
+    disabled: (row: RoleVo) => row.roleId === 1, // 超级管理员不可选择
+  },
+  {
+    title: '序号',
+    key: 'index',
+    width: 70,
+    align: 'center',
+    render: (_, index) => {
+      return (pagination.value.page - 1) * pagination.value.pageSize + index + 1
+    },
+  },
+  {
+    title: '角色名称',
+    key: 'roleName',
+    width: 150,
+    align: 'center',
+    render: (row) => {
+      return h('span', { class: 'text-gray-600' }, row.roleName)
+    },
+  },
+  {
+    title: '角色编码',
+    key: 'roleCode',
+    width: 150,
+    align: 'center',
+    render: (row) => {
+      return h('code', { class: 'bg-gray-100 px-2 py-1 rounded text-sm text-blue-600' }, row.roleCode)
+    },
+  },
+  {
+    title: '角色状态',
+    key: 'roleStatus',
+    width: 100,
+    align: 'center',
+    render: (row) => {
+      return h('div', { class: 'flex items-center justify-center' }, [
+        h(NPopconfirm, {
+          onPositiveClick: () => handleToggleStatus(row),
+          negativeText: '取消',
+          positiveText: '确定',
+        }, {
+          default: () => `确定要${row.roleStatus === '0' ? '停用' : '启用'}角色「${row.roleName}」吗？`,
+          trigger: () => h(NSwitch, {
+            value: row.roleStatus === '0',
+            size: 'small',
+            checkedChildren: '启用',
+            uncheckedChildren: '停用',
+            loading: false,
+          }),
+        }),
+      ])
+    },
+  },
+  {
+    title: '角色描述',
+    key: 'remark',
+    width: 200,
+    align: 'center',
+    ellipsis: { tooltip: true },
+    render: (row) => {
+      return h('span', { class: 'text-gray-600' }, row.remark || '-')
+    },
+  },
+  {
+    title: '排序',
+    key: 'sorted',
+    width: 80,
+    align: 'center',
+    render: (row) => {
+      return h(NTag, { type: 'info', size: 'small' }, { default: () => row.sorted || '-' })
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 160,
+    align: 'center',
+    render: (row) => {
+      return h('span', { class: 'text-gray-500 text-sm' }, row.createTime || '-')
+    },
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 280,
+    align: 'center',
+    fixed: 'right',
+    render: (row) => {
+      return h('div', { class: 'flex items-center justify-center gap-2' }, [
+        h(NButton, {
+          type: 'primary',
+          size: 'small',
+          onClick: () => handleEdit(row),
+        }, {
+          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:edit') }),
+          default: () => '编辑',
+        }),
+        h(NPopconfirm, {
+          onPositiveClick: () => handleDelete(row.roleId),
+          negativeText: '取消',
+          positiveText: '确定',
+        }, {
+          default: () => row.roleId === 1 ? '超级管理员角色不可删除' : '确定删除此角色吗？',
+          trigger: () => h(NButton, {
+            type: 'error',
+            size: 'small',
+            disabled: row.roleId === 1,
+          }, {
+            icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:delete') }),
+            default: () => '删除',
+          }),
+        }),
+        // 超级管理员不显示分配权限按钮
+        ...(row.roleId === 1
+          ? []
+          : [
+              h(NButton, {
+                type: 'warning',
+                size: 'small',
+                onClick: () => handleAssignMenu(row),
+              }, {
+                icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:setting') }),
+                default: () => '分配权限',
+              }),
+            ]),
+      ])
+    },
+  },
+]
+
+// 构建树形菜单数据
+function buildMenuTree(menuList: MenuVo[]): any[] {
+  const map = new Map()
+  const result: any[] = []
+
+  // 先将所有菜单存入map，确保key的唯一性和类型一致性
+  menuList.forEach((menu) => {
+    const permissionCode = menu.auth || menu.perms || menu.permission || ''
+    map.set(menu.menuId, {
+      key: String(menu.menuId), // 确保key为字符串类型
+      label: menu.menuName,
+      menuId: menu.menuId,
+      parentId: menu.parentId,
+      menuType: menu.menuType,
+      auth: menu.auth || '', // 权限标识
+      perms: permissionCode, // 权限标识
+      permissionCode, // 权限标识的别名
+    })
+  })
+
+  // 构建树形结构
+  menuList.forEach((menu) => {
+    const node = map.get(menu.menuId)
+    if (menu.parentId === 0) {
+      result.push(node)
+    }
+    else {
+      const parent = map.get(menu.parentId)
+      if (parent) {
+        if (!parent.children) {
+          parent.children = []
+        }
+        parent.children.push(node)
+      }
+    }
+  })
+
+  // 清理空的children数组，让叶子节点真正成为叶子节点
+  function cleanEmptyChildren(nodes: any[]) {
+    nodes.forEach((node) => {
+      if (node.children && node.children.length === 0) {
+        delete node.children
+      }
+      else if (node.children && node.children.length > 0) {
+        cleanEmptyChildren(node.children)
+      }
+    })
+  }
+
+  cleanEmptyChildren(result)
+  return result
+}
+
+// 获取角色列表
+async function getRoleList() {
+  loading.value = true
+  try {
+    // 构建请求参数，处理时间范围
+    const { timeRange, ...otherParams } = searchForm.value
+
+    // 过滤掉空值和null值，只保留有效的搜索条件
+    const filteredParams = Object.entries(otherParams).reduce((acc, [key, value]) => {
+      if (value !== null && value !== undefined && value !== '') {
+        acc[key] = value
+      }
+      return acc
+    }, {} as Record<string, any>)
+
+    const params: any = {
+      pageNo: pagination.value.page,
+      pageSize: pagination.value.pageSize,
+      ...filteredParams,
+    }
+
+    // 处理时间范围，转换为beginTime和endTime（需要后端支持）
+    if (timeRange && timeRange.length === 2) {
+      // 使用本地时间格式，避免时区问题
+      const startDate = new Date(timeRange[0])
+      const endDate = new Date(timeRange[1])
+
+      // 格式化为 yyyy-MM-dd HH:mm:ss 格式
+      params.beginTime = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')} ${String(startDate.getHours()).padStart(2, '0')}:${String(startDate.getMinutes()).padStart(2, '0')}:${String(startDate.getSeconds()).padStart(2, '0')}`
+      params.endTime = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')} ${String(endDate.getHours()).padStart(2, '0')}:${String(endDate.getMinutes()).padStart(2, '0')}:${String(endDate.getSeconds()).padStart(2, '0')}`
+    }
+
+    const { isSuccess, data } = await getRolePage(params)
+
+    if (isSuccess && data) {
+      tableData.value = data.records || []
+      pagination.value.itemCount = data.total || 0
+    }
+    else {
+      coiMsgError('获取角色列表失败，请检查网络连接或联系管理员')
+      tableData.value = []
+      pagination.value.itemCount = 0
+    }
+  }
+  catch {
+    coiMsgError('获取角色列表失败，请检查网络连接')
+    tableData.value = []
+    pagination.value.itemCount = 0
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 分页变化处理
+function handlePageChange(page: number) {
+  pagination.value.page = page
+  getRoleList()
+}
+
+function handlePageSizeChange(pageSize: number) {
+  pagination.value.pageSize = pageSize
+  pagination.value.page = 1
+  getRoleList()
+}
+
+// 搜索
+function handleSearch() {
+  pagination.value.page = 1
+  getRoleList()
+}
+
+// 重置搜索
+async function handleReset() {
+  // 重置搜索表单的所有字段
+  searchForm.value = {
+    roleName: '',
+    roleCode: '',
+    roleStatus: null,
+    timeRange: null,
+  }
+
+  // 使用 nextTick 确保 DOM 更新后再重置表单状态
+  await nextTick()
+
+  // 重置表单验证状态
+  if (searchFormRef.value) {
+    searchFormRef.value.restoreValidation()
+  }
+
+  // 重置分页到第一页
+  pagination.value.page = 1
+  // 重新获取数据
+  getRoleList()
+}
+
+// 行选择变化
+function handleRowSelectionChange(rowKeys: (string | number)[]) {
+  const numericKeys = rowKeys.map(key => typeof key === 'string' ? Number.parseInt(key) : key)
+  selectedRows.value = tableData.value.filter(row => numericKeys.includes(row.roleId))
+}
+
+// 新增角色
+async function handleAdd() {
+  modalTitle.value = '新增角色'
+  isEdit.value = false
+  currentRole.value = null
+
+  try {
+    // 获取最新排序号
+    const { isSuccess, data } = await getRoleSorted()
+    const sorted = isSuccess && data ? data : 1
+
+    formData.value = {
+      roleName: '',
+      roleCode: '',
+      roleStatus: '0',
+      remark: '',
+      sorted,
+    }
+  }
+  catch {
+    formData.value = {
+      roleName: '',
+      roleCode: '',
+      roleStatus: '0',
+      remark: '',
+      sorted: 1,
+    }
+  }
+
+  roleDialogRef.value?.novaOpen()
+}
+
+// 编辑角色
+function handleEdit(role: RoleVo) {
+  modalTitle.value = '编辑角色'
+  isEdit.value = true
+  currentRole.value = role
+  formData.value = {
+    roleId: role.roleId,
+    roleName: role.roleName,
+    roleCode: role.roleCode,
+    roleStatus: role.roleStatus,
+    remark: role.remark || '',
+    sorted: role.sorted || 1,
+  }
+  roleDialogRef.value?.novaOpen()
+}
+
+// 删除角色
+async function handleDelete(roleId: number) {
+  if (roleId === 1) {
+    coiMsgError('超级管理员角色不可删除')
+    return
+  }
+
+  try {
+    const { isSuccess } = await deleteRole(roleId)
+    if (isSuccess) {
+      coiMsgSuccess('删除成功')
+      await getRoleList()
+    }
+    else {
+      coiMsgError('删除失败')
+    }
+  }
+  catch {
+    coiMsgError('删除失败')
+  }
+}
+
+// 批量删除角色
+async function handleBatchDelete() {
+  if (selectedRows.value.length === 0) {
+    coiMsgWarning('请先选择要删除的角色')
+    return
+  }
+
+  // 检查是否包含超级管理员角色
+  const hasSuperAdmin = selectedRows.value.some(role => role.roleId === 1)
+  if (hasSuperAdmin) {
+    coiMsgError('所选角色中包含超级管理员，无法批量删除')
+    return
+  }
+
+  try {
+    // 确认删除操作
+    await coiMsgBox(`确定要删除选中的 ${selectedRows.value.length} 个角色吗？`, '批量删除确认')
+  }
+  catch {
+    // 用户取消删除操作，直接返回，不显示任何提示
+    return
+  }
+
+  // 用户确认删除，执行删除操作
+  try {
+    const roleIds = selectedRows.value.map(role => role.roleId)
+    const { isSuccess } = await batchDeleteRoles(roleIds)
+    if (isSuccess) {
+      coiMsgSuccess('批量删除成功')
+      selectedRows.value = []
+      await getRoleList()
+    }
+    else {
+      coiMsgError('批量删除失败')
+    }
+  }
+  catch {
+    coiMsgError('批量删除失败')
+  }
+}
+
+// 切换角色状态
+async function handleToggleStatus(role: RoleVo) {
+  try {
+    const newStatus = role.roleStatus === '0' ? '1' : '0'
+    const statusText = newStatus === '0' ? '启用' : '停用'
+
+    const { isSuccess } = await updateRoleStatus(role.roleId, newStatus)
+    if (isSuccess) {
+      role.roleStatus = newStatus
+      coiMsgSuccess(`角色「${role.roleName}」${statusText}成功`)
+      // 刷新角色列表以确保数据同步
+      await getRoleList()
+    }
+    else {
+      coiMsgError(`角色${statusText}失败`)
+    }
+  }
+  catch {
+    coiMsgError('状态修改失败，请检查网络连接')
+  }
+}
+
+// 分配菜单权限
+async function handleAssignMenu(role: RoleVo) {
+  if (!role?.roleId) {
+    coiMsgError('角色信息无效')
+    return
+  }
+
+  try {
+    menuLoading.value = true
+    currentAssignRole.value = role
+    menuModalTitle.value = `分配菜单权限 - ${role.roleName}`
+
+    // 重置状态
+    menuData.value = []
+    expandedKeys.value = []
+    checkedKeys.value = []
+
+    // 获取菜单权限数据
+    const menuResponse = await fetchMenuPermissionData()
+
+    if (menuResponse.isSuccess && menuResponse.data) {
+      const permissionData = menuResponse.data as MenuPermissionData
+      menuData.value = buildMenuTree(permissionData.menuList)
+
+      // 将展开的节点ID转换为字符串格式，保持与key格式一致
+      expandedKeys.value = (permissionData.spreadList || []).map(id => String(id))
+
+      // 获取当前角色的菜单权限
+      const roleMenuResponse = await fetchMenuIdsByRoleId(role.roleId)
+      if (roleMenuResponse.isSuccess && roleMenuResponse.data) {
+        // 将权限ID转换为字符串格式，保持与key格式一致
+        checkedKeys.value = roleMenuResponse.data.map(id => String(id))
+      }
+
+      menuDialogRef.value?.novaOpen()
+    }
+    else {
+      coiMsgError('获取菜单数据失败')
+    }
+  }
+  catch {
+    coiMsgError('获取菜单数据失败，请检查网络连接')
+  }
+  finally {
+    menuLoading.value = false
+  }
+}
+
+// 确保选中子菜单时父菜单也被包含
+function ensureParentMenusIncluded(selectedIds: string[], menuTree: any[]): string[] {
+  const allMenuMap = new Map<number, any>()
+  const result = new Set(selectedIds)
+
+  // 递归收集所有菜单项到map中
+  function collectMenus(menus: any[]) {
+    menus.forEach((menu) => {
+      allMenuMap.set(menu.menuId, menu)
+      if (menu.children && menu.children.length > 0) {
+        collectMenus(menu.children)
+      }
+    })
+  }
+
+  collectMenus(menuTree)
+
+  // 为每个选中的菜单添加其所有父菜单
+  selectedIds.forEach((menuIdStr) => {
+    const menuId = Number.parseInt(menuIdStr)
+    const menu = allMenuMap.get(menuId)
+    if (menu && menu.parentId !== 0) {
+      let parentId = menu.parentId
+      while (parentId && parentId !== 0) {
+        result.add(String(parentId))
+        const parentMenu = allMenuMap.get(parentId)
+        if (parentMenu && parentMenu.parentId !== 0) {
+          parentId = parentMenu.parentId
+        }
+        else {
+          break
+        }
+      }
+    }
+  })
+
+  return Array.from(result)
+}
+
+// 确认分配菜单权限
+async function handleConfirmAssignMenu() {
+  if (!currentAssignRole.value) {
+    coiMsgError('角色信息缺失')
+    return
+  }
+
+  try {
+    menuLoading.value = true
+
+    // 确保选中子菜单时父菜单也被包含
+    const completeMenuIds = ensureParentMenusIncluded(checkedKeys.value, menuData.value)
+
+    // 将字符串格式的key转换为数字格式发送给后端
+    const menuIds = completeMenuIds.map(key => Number.parseInt(String(key)))
+    const response = await saveRoleMenuPermission(currentAssignRole.value.roleId, menuIds)
+
+    if (response.isSuccess) {
+      coiMsgSuccess('菜单权限分配成功')
+      menuDialogRef.value?.novaClose()
+    }
+    else {
+      coiMsgError(response.message || '菜单权限分配失败')
+    }
+  }
+  catch {
+    coiMsgError('菜单权限分配失败，请检查网络连接')
+  }
+  finally {
+    menuLoading.value = false
+  }
+}
+
+// 取消分配菜单权限
+function handleCancelAssignMenu() {
+  menuDialogRef.value?.novaClose()
+  currentAssignRole.value = null
+  menuData.value = []
+  expandedKeys.value = []
+  checkedKeys.value = []
+  menuModalTitle.value = '分配菜单权限'
+  menuLoading.value = false
+  // 重置功能按钮状态
+  allExpanded.value = false
+  allSelected.value = false
+  cascadeEnabled.value = true
+  showPermissionCode.value = false
+}
+
+// 获取所有菜单节点的key
+function getAllMenuKeys(menus: any[]): string[] {
+  const keys: string[] = []
+  function traverse(nodes: any[]) {
+    nodes.forEach((node) => {
+      keys.push(node.key)
+      if (node.children && node.children.length > 0) {
+        traverse(node.children)
+      }
+    })
+  }
+  traverse(menus)
+  return keys
+}
+
+// 展开/折叠所有节点
+function toggleExpandAll() {
+  if (allExpanded.value) {
+    // 折叠所有
+    expandedKeys.value = []
+    allExpanded.value = false
+  }
+  else {
+    // 展开所有
+    expandedKeys.value = getAllMenuKeys(menuData.value)
+    allExpanded.value = true
+  }
+}
+
+// 全选/全不选
+function toggleSelectAll() {
+  if (allSelected.value) {
+    // 全不选
+    checkedKeys.value = []
+    allSelected.value = false
+  }
+  else {
+    // 全选
+    checkedKeys.value = getAllMenuKeys(menuData.value)
+    allSelected.value = true
+  }
+}
+
+// 切换父子联动
+function toggleCascade() {
+  cascadeEnabled.value = !cascadeEnabled.value
+}
+
+// 切换权限标识显示
+function togglePermissionCode() {
+  showPermissionCode.value = !showPermissionCode.value
+}
+
+// 渲染权限标识
+function renderPermissionCode({ option }: { option: any }) {
+  const code = option.auth || option.perms || option.permissionCode || ''
+
+  // 如果没有权限标识，返回null
+  if (!code || code.trim() === '') {
+    return null
+  }
+
+  return h('span', {
+    class: 'ml-2 px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded font-mono border border-blue-200',
+    style: 'font-size: 11px; line-height: 1.2; transform: translateY(-5px); display: inline-flex; align-items: center;',
+  }, code)
+}
+
+// 提交表单
+async function handleSubmit() {
+  if (!formRef.value)
+    return
+
+  try {
+    // 先进行表单验证
+    await formRef.value.validate()
+  }
+  catch {
+    // 表单验证失败，提示用户检查填写内容
+    coiMsgWarning('验证失败，请检查填写内容')
+    return
+  }
+
+  // 表单验证通过，执行API调用
+  try {
+    const submitData = { ...formData.value }
+
+    const { isSuccess } = isEdit.value ? await updateRole(submitData) : await addRole(submitData)
+
+    if (isSuccess) {
+      coiMsgSuccess(isEdit.value ? '角色信息更新成功' : '角色创建成功')
+      roleDialogRef.value?.novaClose()
+      await getRoleList()
+    }
+    else {
+      coiMsgError(isEdit.value ? '更新失败，请稍后重试' : '创建失败，请稍后重试')
+    }
+  }
+  catch {
+    coiMsgError(isEdit.value ? '更新失败，请检查网络连接' : '创建失败，请检查网络连接')
+  }
+}
+
+// 取消操作
+function handleCancel() {
+  roleDialogRef.value?.novaClose()
+}
+// 监听选中状态变化，自动更新全选按钮状态
+watch(checkedKeys, (newKeys) => {
+  const allKeys = getAllMenuKeys(menuData.value)
+  allSelected.value = allKeys.length > 0 && newKeys.length === allKeys.length
+}, { deep: true })
+
+// 监听展开状态变化，自动更新展开按钮状态
+watch(expandedKeys, (newKeys) => {
+  const allKeys = getAllMenuKeys(menuData.value)
+  allExpanded.value = allKeys.length > 0 && newKeys.length === allKeys.length
+}, { deep: true })
+
+// 组件挂载时获取数据
+onMounted(() => {
+  getRoleList()
+})
+</script>
+
 <template>
   <div class="role-management p-1 bg-gray-50 h-screen flex flex-col">
     <!-- 搜索表单和角色表格 -->
@@ -255,7 +1028,6 @@
       @nova-confirm="handleConfirmAssignMenu"
       @nova-cancel="handleCancelAssignMenu"
     >
-
       <template #content>
         <div class="p-3">
           <div v-if="menuLoading" class="flex items-center justify-center py-8">
@@ -334,904 +1106,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { h, nextTick, onMounted, ref, watch } from 'vue'
-import type { DataTableColumns, FormInst } from 'naive-ui'
-import { NButton, NIcon, NPopconfirm, NSpace, NSwitch, NTag, NTree } from 'naive-ui'
-import { Icon } from '@iconify/vue'
-import NovaDialog from '@/components/common/NovaDialog.vue'
-import {
-  addRole,
-  batchDeleteRoles,
-  deleteRole,
-  getRolePage,
-  getRoleSorted,
-  updateRole,
-  updateRoleStatus,
-} from '@/service/api/system/role'
-import type { RoleForm, RoleSearchForm, RoleVo } from '@/service/api/system/role'
-
-import {
-  fetchMenuIdsByRoleId,
-  fetchMenuPermissionData,
-  saveRoleMenuPermission,
-} from '@/service/api/system/menu'
-import type { MenuPermissionData, MenuVo } from '@/service/api/system/menu'
-import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
-
-// 响应式数据
-const loading = ref(false)
-const tableData = ref<RoleVo[]>([])
-const modalTitle = ref('新增角色')
-const formRef = ref<FormInst | null>(null)
-const searchFormRef = ref<FormInst | null>(null)
-const isEdit = ref(false)
-const currentRole = ref<RoleVo | null>(null)
-const selectedRows = ref<RoleVo[]>([])
-
-// 弹框引用
-const roleDialogRef = ref()
-const menuDialogRef = ref()
-
-// 菜单权限分配相关
-const menuModalTitle = ref('分配菜单权限')
-const currentAssignRole = ref<RoleVo | null>(null)
-const menuData = ref<any[]>([])
-const expandedKeys = ref<string[]>([])
-const checkedKeys = ref<string[]>([])
-const menuLoading = ref(false)
-
-// 功能按钮状态
-const allExpanded = ref(false)
-const allSelected = ref(false)
-const cascadeEnabled = ref(true)
-const showPermissionCode = ref(false)
-
-// 分页数据
-const pagination = ref({
-  page: 1,
-  pageSize: 10,
-  itemCount: 0,
-  showSizePicker: true,
-  pageSizes: [10, 20, 50, 100],
-})
-
-// 搜索表单数据
-const searchForm = ref<RoleSearchForm>({})
-
-// 表单数据
-const formData = ref<RoleForm>({
-  roleName: '',
-  roleCode: '',
-  roleStatus: '0',
-  remark: '',
-  sorted: 1,
-})
-
-// 表单验证规则
-const rules = {
-  roleName: [
-    { required: true, message: '请输入角色名称', trigger: 'blur' },
-    { min: 2, max: 20, message: '角色名称长度为 2-20 位', trigger: 'blur' },
-  ],
-  roleCode: [
-    { required: true, message: '请输入角色编码', trigger: 'blur' },
-    { min: 2, max: 20, message: '角色编码长度为 2-20 位', trigger: 'blur' },
-    { pattern: /^\w+$/, message: '角色编码只能包含字母、数字和下划线', trigger: 'blur' },
-  ],
-  roleStatus: [
-    { required: true, message: '请选择角色状态', trigger: 'change' },
-  ],
-}
-
-// 表格列定义
-const columns: DataTableColumns<RoleVo> = [
-  {
-    type: 'selection',
-    width: 50,
-    disabled: (row: RoleVo) => row.roleId === 1, // 超级管理员不可选择
-  },
-  {
-    title: '序号',
-    key: 'index',
-    width: 70,
-    align: 'center',
-    render: (_, index) => {
-      return (pagination.value.page - 1) * pagination.value.pageSize + index + 1
-    },
-  },
-  {
-    title: '角色名称',
-    key: 'roleName',
-    width: 150,
-    align: 'center',
-    render: (row) => {
-      return h('span', { class: 'text-gray-600' }, row.roleName)
-    },
-  },
-  {
-    title: '角色编码',
-    key: 'roleCode',
-    width: 150,
-    align: 'center',
-    render: (row) => {
-      return h('code', { class: 'bg-gray-100 px-2 py-1 rounded text-sm text-blue-600' }, row.roleCode)
-    },
-  },
-  {
-    title: '角色状态',
-    key: 'roleStatus',
-    width: 100,
-    align: 'center',
-    render: (row) => {
-      return h('div', { class: 'flex items-center justify-center' }, [
-        h(NPopconfirm, {
-          onPositiveClick: () => handleToggleStatus(row),
-          negativeText: '取消',
-          positiveText: '确定',
-        }, {
-          default: () => `确定要${row.roleStatus === '0' ? '停用' : '启用'}角色「${row.roleName}」吗？`,
-          trigger: () => h(NSwitch, {
-            value: row.roleStatus === '0',
-            size: 'small',
-            checkedChildren: '启用',
-            uncheckedChildren: '停用',
-            loading: false,
-          }),
-        }),
-      ])
-    },
-  },
-  {
-    title: '角色描述',
-    key: 'remark',
-    width: 200,
-    align: 'center',
-    ellipsis: { tooltip: true },
-    render: (row) => {
-      return h('span', { class: 'text-gray-600' }, row.remark || '-')
-    },
-  },
-  {
-    title: '排序',
-    key: 'sorted',
-    width: 80,
-    align: 'center',
-    render: (row) => {
-      return h(NTag, { type: 'info', size: 'small' }, { default: () => row.sorted || '-' })
-    },
-  },
-  {
-    title: '创建时间',
-    key: 'createTime',
-    width: 160,
-    align: 'center',
-    render: (row) => {
-      return h('span', { class: 'text-gray-500 text-sm' }, row.createTime || '-')
-    },
-  },
-  {
-    title: '操作',
-    key: 'actions',
-    width: 280,
-    align: 'center',
-    fixed: 'right',
-    render: (row) => {
-      return h('div', { class: 'flex items-center justify-center gap-2' }, [
-        h(NButton, {
-          type: 'primary',
-          size: 'small',
-          onClick: () => handleEdit(row),
-        }, {
-          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:edit') }),
-          default: () => '编辑',
-        }),
-        h(NPopconfirm, {
-          onPositiveClick: () => handleDelete(row.roleId),
-          negativeText: '取消',
-          positiveText: '确定',
-        }, {
-          default: () => row.roleId === 1 ? '超级管理员角色不可删除' : '确定删除此角色吗？',
-          trigger: () => h(NButton, {
-            type: 'error',
-            size: 'small',
-            disabled: row.roleId === 1,
-          }, {
-            icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:delete') }),
-            default: () => '删除',
-          }),
-        }),
-        // 超级管理员不显示分配权限按钮
-        ...(row.roleId === 1 ? [] : [
-          h(NButton, {
-            type: 'warning',
-            size: 'small',
-            onClick: () => handleAssignMenu(row),
-          }, {
-            icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:setting') }),
-            default: () => '分配权限',
-          }),
-        ]),
-      ])
-    },
-  },
-]
-
-// 构建树形菜单数据
-function buildMenuTree(menuList: MenuVo[]): any[] {
-  const map = new Map()
-  const result: any[] = []
-
-  // 先将所有菜单存入map，确保key的唯一性和类型一致性
-  menuList.forEach((menu) => {
-    const permissionCode = menu.auth || menu.perms || menu.permission || ''
-    map.set(menu.menuId, {
-      key: String(menu.menuId), // 确保key为字符串类型
-      label: menu.menuName,
-      menuId: menu.menuId,
-      parentId: menu.parentId,
-      menuType: menu.menuType,
-      auth: menu.auth || '', // 权限标识
-      perms: permissionCode, // 权限标识
-      permissionCode: permissionCode, // 权限标识的别名
-    })
-  })
-
-  // 构建树形结构
-  menuList.forEach((menu) => {
-    const node = map.get(menu.menuId)
-    if (menu.parentId === 0) {
-      result.push(node)
-    }
-    else {
-      const parent = map.get(menu.parentId)
-      if (parent) {
-        if (!parent.children) {
-          parent.children = []
-        }
-        parent.children.push(node)
-      }
-    }
-  })
-
-  // 清理空的children数组，让叶子节点真正成为叶子节点
-  function cleanEmptyChildren(nodes: any[]) {
-    nodes.forEach(node => {
-      if (node.children && node.children.length === 0) {
-        delete node.children
-      } else if (node.children && node.children.length > 0) {
-        cleanEmptyChildren(node.children)
-      }
-    })
-  }
-
-  cleanEmptyChildren(result)
-  return result
-}
-
-// 获取角色列表
-async function getRoleList() {
-  loading.value = true
-  try {
-    // 构建请求参数，处理时间范围
-    const { timeRange, ...otherParams } = searchForm.value
-
-    // 过滤掉空值和null值，只保留有效的搜索条件
-    const filteredParams = Object.entries(otherParams).reduce((acc, [key, value]) => {
-      if (value !== null && value !== undefined && value !== '') {
-        acc[key] = value
-      }
-      return acc
-    }, {} as Record<string, any>)
-
-    const params: any = {
-      pageNo: pagination.value.page,
-      pageSize: pagination.value.pageSize,
-      ...filteredParams,
-    }
-
-    // 处理时间范围，转换为beginTime和endTime（需要后端支持）
-    if (timeRange && timeRange.length === 2) {
-      // 使用本地时间格式，避免时区问题
-      const startDate = new Date(timeRange[0])
-      const endDate = new Date(timeRange[1])
-      
-      // 格式化为 yyyy-MM-dd HH:mm:ss 格式
-      params.beginTime = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')} ${String(startDate.getHours()).padStart(2, '0')}:${String(startDate.getMinutes()).padStart(2, '0')}:${String(startDate.getSeconds()).padStart(2, '0')}`
-      params.endTime = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')} ${String(endDate.getHours()).padStart(2, '0')}:${String(endDate.getMinutes()).padStart(2, '0')}:${String(endDate.getSeconds()).padStart(2, '0')}`
-    }
-
-    const { isSuccess, data } = await getRolePage(params)
-
-    if (isSuccess && data) {
-      tableData.value = data.records || []
-      pagination.value.itemCount = data.total || 0
-    }
-    else {
-      console.warn('获取角色列表失败，可能是权限或网络问题')
-      coiMsgError('获取角色列表失败，请检查网络连接或联系管理员')
-      tableData.value = []
-      pagination.value.itemCount = 0
-    }
-  }
-  catch (error) {
-    console.error('获取角色列表失败:', error)
-    coiMsgError('获取角色列表失败，请检查网络连接')
-    tableData.value = []
-    pagination.value.itemCount = 0
-  }
-  finally {
-    loading.value = false
-  }
-}
-
-// 分页变化处理
-function handlePageChange(page: number) {
-  pagination.value.page = page
-  getRoleList()
-}
-
-function handlePageSizeChange(pageSize: number) {
-  pagination.value.pageSize = pageSize
-  pagination.value.page = 1
-  getRoleList()
-}
-
-// 搜索
-function handleSearch() {
-  pagination.value.page = 1
-  getRoleList()
-}
-
-// 重置搜索
-async function handleReset() {
-  // 重置搜索表单的所有字段
-  searchForm.value = {
-    roleName: '',
-    roleCode: '',
-    roleStatus: null,
-    timeRange: null,
-  }
-
-  // 使用 nextTick 确保 DOM 更新后再重置表单状态
-  await nextTick()
-
-  // 重置表单验证状态
-  if (searchFormRef.value) {
-    searchFormRef.value.restoreValidation()
-  }
-
-  // 重置分页到第一页
-  pagination.value.page = 1
-  // 重新获取数据
-  getRoleList()
-}
-
-// 行选择变化
-function handleRowSelectionChange(rowKeys: (string | number)[]) {
-  const numericKeys = rowKeys.map(key => typeof key === 'string' ? Number.parseInt(key) : key)
-  selectedRows.value = tableData.value.filter(row => numericKeys.includes(row.roleId))
-}
-
-// 新增角色
-async function handleAdd() {
-  modalTitle.value = '新增角色'
-  isEdit.value = false
-  currentRole.value = null
-
-  try {
-    // 获取最新排序号
-    const { isSuccess, data } = await getRoleSorted()
-    const sorted = isSuccess && data ? data : 1
-
-    formData.value = {
-      roleName: '',
-      roleCode: '',
-      roleStatus: '0',
-      remark: '',
-      sorted,
-    }
-  }
-  catch {
-    formData.value = {
-      roleName: '',
-      roleCode: '',
-      roleStatus: '0',
-      remark: '',
-      sorted: 1,
-    }
-  }
-
-  roleDialogRef.value?.novaOpen()
-}
-
-// 编辑角色
-function handleEdit(role: RoleVo) {
-  modalTitle.value = '编辑角色'
-  isEdit.value = true
-  currentRole.value = role
-  formData.value = {
-    roleId: role.roleId,
-    roleName: role.roleName,
-    roleCode: role.roleCode,
-    roleStatus: role.roleStatus,
-    remark: role.remark || '',
-    sorted: role.sorted || 1,
-  }
-  roleDialogRef.value?.novaOpen()
-}
-
-// 删除角色
-async function handleDelete(roleId: number) {
-  if (roleId === 1) {
-    coiMsgError('超级管理员角色不可删除')
-    return
-  }
-
-  try {
-    const { isSuccess } = await deleteRole(roleId)
-    if (isSuccess) {
-      coiMsgSuccess('删除成功')
-      await getRoleList()
-    }
-    else {
-      coiMsgError('删除失败')
-    }
-  }
-  catch (error) {
-    console.error('删除失败:', error)
-    coiMsgError('删除失败')
-  }
-}
-
-// 批量删除角色
-async function handleBatchDelete() {
-  if (selectedRows.value.length === 0) {
-    coiMsgWarning('请先选择要删除的角色')
-    return
-  }
-
-  // 检查是否包含超级管理员角色
-  const hasSuperAdmin = selectedRows.value.some(role => role.roleId === 1)
-  if (hasSuperAdmin) {
-    coiMsgError('所选角色中包含超级管理员，无法批量删除')
-    return
-  }
-
-  try {
-    // 确认删除操作
-    await coiMsgBox(`确定要删除选中的 ${selectedRows.value.length} 个角色吗？`, '批量删除确认')
-  }
-  catch {
-    // 用户取消删除操作，直接返回，不显示任何提示
-    return
-  }
-
-  // 用户确认删除，执行删除操作
-  try {
-    const roleIds = selectedRows.value.map(role => role.roleId)
-    const { isSuccess } = await batchDeleteRoles(roleIds)
-    if (isSuccess) {
-      coiMsgSuccess('批量删除成功')
-      selectedRows.value = []
-      await getRoleList()
-    }
-    else {
-      coiMsgError('批量删除失败')
-    }
-  }
-  catch (error) {
-    console.error('批量删除失败:', error)
-    coiMsgError('批量删除失败')
-  }
-}
-
-// 切换角色状态
-async function handleToggleStatus(role: RoleVo) {
-  try {
-    const newStatus = role.roleStatus === '0' ? '1' : '0'
-    const statusText = newStatus === '0' ? '启用' : '停用'
-
-    const { isSuccess } = await updateRoleStatus(role.roleId, newStatus)
-    if (isSuccess) {
-      role.roleStatus = newStatus
-      coiMsgSuccess(`角色「${role.roleName}」${statusText}成功`)
-      // 刷新角色列表以确保数据同步
-      await getRoleList()
-    }
-    else {
-      coiMsgError(`角色${statusText}失败`)
-    }
-  }
-  catch (error) {
-    console.error('状态修改失败:', error)
-    coiMsgError('状态修改失败，请检查网络连接')
-  }
-}
-
-// 分配菜单权限
-async function handleAssignMenu(role: RoleVo) {
-  if (!role?.roleId) {
-    coiMsgError('角色信息无效')
-    return
-  }
-
-  try {
-    menuLoading.value = true
-    currentAssignRole.value = role
-    menuModalTitle.value = `分配菜单权限 - ${role.roleName}`
-
-    // 重置状态
-    menuData.value = []
-    expandedKeys.value = []
-    checkedKeys.value = []
-
-    // 获取菜单权限数据
-    const menuResponse = await fetchMenuPermissionData()
-
-    if (menuResponse.isSuccess && menuResponse.data) {
-      const permissionData = menuResponse.data as MenuPermissionData
-      console.log('原始菜单数据:', permissionData.menuList)
-      menuData.value = buildMenuTree(permissionData.menuList)
-      console.log('构建后的菜单树:', menuData.value)
-
-      // 将展开的节点ID转换为字符串格式，保持与key格式一致
-      expandedKeys.value = (permissionData.spreadList || []).map(id => String(id))
-
-      // 获取当前角色的菜单权限
-      const roleMenuResponse = await fetchMenuIdsByRoleId(role.roleId)
-      if (roleMenuResponse.isSuccess && roleMenuResponse.data) {
-        // 将权限ID转换为字符串格式，保持与key格式一致
-        checkedKeys.value = roleMenuResponse.data.map(id => String(id))
-      }
-
-      menuDialogRef.value?.novaOpen()
-    }
-    else {
-      coiMsgError('获取菜单数据失败')
-    }
-  }
-  catch {
-    coiMsgError('获取菜单数据失败，请检查网络连接')
-  }
-  finally {
-    menuLoading.value = false
-  }
-}
-
-// 确保选中子菜单时父菜单也被包含
-function ensureParentMenusIncluded(selectedIds: string[], menuTree: any[]): string[] {
-  const allMenuMap = new Map<number, any>()
-  const result = new Set(selectedIds)
-
-  // 递归收集所有菜单项到map中
-  function collectMenus(menus: any[]) {
-    menus.forEach((menu) => {
-      allMenuMap.set(menu.menuId, menu)
-      if (menu.children && menu.children.length > 0) {
-        collectMenus(menu.children)
-      }
-    })
-  }
-
-  collectMenus(menuTree)
-
-  // 为每个选中的菜单添加其所有父菜单
-  selectedIds.forEach((menuIdStr) => {
-    const menuId = Number.parseInt(menuIdStr)
-    const menu = allMenuMap.get(menuId)
-    if (menu && menu.parentId !== 0) {
-      let parentId = menu.parentId
-      while (parentId && parentId !== 0) {
-        result.add(String(parentId))
-        const parentMenu = allMenuMap.get(parentId)
-        if (parentMenu && parentMenu.parentId !== 0) {
-          parentId = parentMenu.parentId
-        }
-        else {
-          break
-        }
-      }
-    }
-  })
-
-  return Array.from(result)
-}
-
-// 确认分配菜单权限
-async function handleConfirmAssignMenu() {
-  if (!currentAssignRole.value) {
-    coiMsgError('角色信息缺失')
-    return
-  }
-
-  try {
-    menuLoading.value = true
-
-    // 确保选中子菜单时父菜单也被包含
-    const completeMenuIds = ensureParentMenusIncluded(checkedKeys.value, menuData.value)
-
-    // 将字符串格式的key转换为数字格式发送给后端
-    const menuIds = completeMenuIds.map(key => Number.parseInt(String(key)))
-    const response = await saveRoleMenuPermission(currentAssignRole.value.roleId, menuIds)
-
-    if (response.isSuccess) {
-      coiMsgSuccess('菜单权限分配成功')
-      menuDialogRef.value?.novaClose()
-    }
-    else {
-      coiMsgError(response.message || '菜单权限分配失败')
-    }
-  }
-  catch {
-    coiMsgError('菜单权限分配失败，请检查网络连接')
-  }
-  finally {
-    menuLoading.value = false
-  }
-}
-
-// 取消分配菜单权限
-function handleCancelAssignMenu() {
-  menuDialogRef.value?.novaClose()
-  currentAssignRole.value = null
-  menuData.value = []
-  expandedKeys.value = []
-  checkedKeys.value = []
-  menuModalTitle.value = '分配菜单权限'
-  menuLoading.value = false
-  // 重置功能按钮状态
-  allExpanded.value = false
-  allSelected.value = false
-  cascadeEnabled.value = true
-  showPermissionCode.value = false
-}
-
-// 获取所有菜单节点的key
-function getAllMenuKeys(menus: any[]): string[] {
-  const keys: string[] = []
-  function traverse(nodes: any[]) {
-    nodes.forEach(node => {
-      keys.push(node.key)
-      if (node.children && node.children.length > 0) {
-        traverse(node.children)
-      }
-    })
-  }
-  traverse(menus)
-  return keys
-}
-
-// 展开/折叠所有节点
-function toggleExpandAll() {
-  if (allExpanded.value) {
-    // 折叠所有
-    expandedKeys.value = []
-    allExpanded.value = false
-  } else {
-    // 展开所有
-    expandedKeys.value = getAllMenuKeys(menuData.value)
-    allExpanded.value = true
-  }
-}
-
-// 全选/全不选
-function toggleSelectAll() {
-  if (allSelected.value) {
-    // 全不选
-    checkedKeys.value = []
-    allSelected.value = false
-  } else {
-    // 全选
-    checkedKeys.value = getAllMenuKeys(menuData.value)
-    allSelected.value = true
-  }
-}
-
-// 切换父子联动
-function toggleCascade() {
-  cascadeEnabled.value = !cascadeEnabled.value
-}
-
-// 切换权限标识显示
-function togglePermissionCode() {
-  showPermissionCode.value = !showPermissionCode.value
-  console.log('权限标识显示状态:', showPermissionCode.value)
-}
-
-// 渲染权限标识
-function renderPermissionCode({ option }: { option: any }) {
-  console.log('渲染权限标识 - option:', option)
-  const code = option.auth || option.perms || option.permissionCode || ''
-  console.log('权限标识码:', code)
-
-  // 如果没有权限标识，返回null
-  if (!code || code.trim() === '') {
-    return null
-  }
-
-  return h('span', {
-    class: 'ml-2 px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded font-mono border border-blue-200',
-    style: 'font-size: 11px; line-height: 1.2; transform: translateY(-5px); display: inline-flex; align-items: center;'
-  }, code)
-}
-
-// 提交表单
-async function handleSubmit() {
-  if (!formRef.value)
-    return
-
-  try {
-    // 先进行表单验证
-    await formRef.value.validate()
-  }
-  catch {
-    // 表单验证失败，提示用户检查填写内容
-    coiMsgWarning('验证失败，请检查填写内容')
-    return
-  }
-
-  // 表单验证通过，执行API调用
-  try {
-    const submitData = { ...formData.value }
-
-    const { isSuccess } = isEdit.value ? await updateRole(submitData) : await addRole(submitData)
-
-    if (isSuccess) {
-      coiMsgSuccess(isEdit.value ? '角色信息更新成功' : '角色创建成功')
-      roleDialogRef.value?.novaClose()
-      await getRoleList()
-    }
-    else {
-      coiMsgError(isEdit.value ? '更新失败，请稍后重试' : '创建失败，请稍后重试')
-    }
-  }
-  catch (error) {
-    console.error('API调用失败:', error)
-    coiMsgError(isEdit.value ? '更新失败，请检查网络连接' : '创建失败，请检查网络连接')
-  }
-}
-
-// 取消操作
-function handleCancel() {
-  roleDialogRef.value?.novaClose()
-}
-
-// 计算总菜单数量
-function getTotalMenuCount(): number {
-  function countMenus(menus: any[]): number {
-    let count = 0
-    menus.forEach((menu) => {
-      count++
-      if (menu.children && menu.children.length > 0) {
-        count += countMenus(menu.children)
-      }
-    })
-    return count
-  }
-  return countMenus(menuData.value)
-}
-
-// 新的简洁菜单前缀渲染
-function renderCleanMenuPrefix({ option, expanded }: { option: any, expanded: boolean }) {
-  const hasChildren = option.children && option.children.length > 0
-
-  if (!hasChildren) {
-    // 没有子节点时，渲染占位空间以保持对齐
-    return h('div', {
-      class: 'w-4 h-4 flex-shrink-0 mr-1',
-    })
-  }
-
-  // 有子节点时，渲染简洁的折叠图标
-  return h('div', {
-    class: 'w-4 h-4 flex items-center justify-center cursor-pointer flex-shrink-0 mr-1',
-  }, [
-    h(NIcon, {
-      size: 14,
-      class: `transform transition-transform duration-200 ${expanded ? 'rotate-90' : ''} text-gray-500 hover:text-blue-500`,
-    }, {
-      default: () => h(Icon, { icon: 'mdi:chevron-right' }),
-    }),
-  ])
-}
-
-// 自定义菜单前缀渲染（控制折叠图标显示）
-function renderMenuPrefix({ option, expanded }: { option: any, expanded: boolean }) {
-  const hasChildren = option.children && option.children.length > 0
-
-  if (!hasChildren) {
-    // 没有子节点时，不渲染任何内容
-    return null
-  }
-
-  // 有子节点时，渲染简洁的折叠图标
-  return h('div', {
-    class: 'w-4 h-4 flex items-center justify-center cursor-pointer flex-shrink-0 mr-1',
-  }, [
-    h(NIcon, {
-      size: 12,
-      class: `transform transition-transform duration-200 ${expanded ? 'rotate-90' : ''} text-gray-500`,
-    }, {
-      default: () => h(Icon, { icon: 'icon-park-outline:right' }),
-    }),
-  ])
-}
-
-// 自定义菜单标签渲染
-function renderMenuLabel({ option }: { option: any }) {
-  const menuType = option.menuType || '2'
-
-  // 图标映射
-  const iconMap = {
-    1: 'icon-park-outline:folder',
-    2: 'icon-park-outline:file-text',
-    3: 'icon-park-outline:click',
-  }
-
-  // 颜色映射
-  const colorMap = {
-    1: '#1890ff',
-    2: '#52c41a',
-    3: '#fa8c16',
-  }
-
-  const iconName = iconMap[menuType] || 'icon-park-outline:dot'
-  const iconColor = colorMap[menuType] || '#666'
-
-  return h('div', { class: 'flex items-center gap-2' }, [
-    h(NIcon, {
-      size: 16,
-      style: { color: iconColor },
-      class: 'flex-shrink-0',
-    }, {
-      default: () => h(Icon, { icon: iconName }),
-    }),
-    h('span', {
-      class: 'text-sm text-gray-700 select-none',
-    }, option.label),
-  ])
-}
-
-// 自定义菜单后缀渲染
-function renderMenuSuffix({ option }: { option: any }) {
-  const menuType = option.menuType || '2'
-  const typeLabels = {
-    1: '目录',
-    2: '菜单',
-    3: '按钮',
-  }
-  const typeColors = {
-    1: 'bg-blue-50 text-blue-600 border-blue-200',
-    2: 'bg-green-50 text-green-600 border-green-200',
-    3: 'bg-orange-50 text-orange-600 border-orange-200',
-  }
-
-  return h('span', {
-    class: `px-2 py-0.5 rounded text-xs border ${typeColors[menuType]} select-none`,
-  }, typeLabels[menuType] || '未知')
-}
-
-// 监听选中状态变化，自动更新全选按钮状态
-watch(checkedKeys, (newKeys) => {
-  const allKeys = getAllMenuKeys(menuData.value)
-  allSelected.value = allKeys.length > 0 && newKeys.length === allKeys.length
-}, { deep: true })
-
-// 监听展开状态变化，自动更新展开按钮状态
-watch(expandedKeys, (newKeys) => {
-  const allKeys = getAllMenuKeys(menuData.value)
-  allExpanded.value = allKeys.length > 0 && newKeys.length === allKeys.length
-}, { deep: true })
-
-// 组件挂载时获取数据
-onMounted(() => {
-  getRoleList()
-})
-</script>
-
-
-
 <style scoped>
 .role-management {
   height: 100vh;