3.2 KiB

Raw Blame History

实现侧边栏权限管理功能

功能需求

在侧边栏新增权限管理功能，包含以下二级目录：

角色管理
路由管理（每个路由可配置对应按钮权限）
用户列表（展示后台管理系统所有账号）

实现步骤

1. 修改侧边栏菜单配置

文件：apps/FrontendDesigner/src/components/admin/AdminLayout.vue

在侧边栏添加权限管理子菜单
包含三个二级菜单项：角色管理、路由管理、用户列表
使用Element Plus的el-sub-menu和el-menu-item组件
添加对应的图标

2. 配置路由

文件：apps/FrontendDesigner/src/router/index.js

添加权限管理相关路由
角色管理：/admin/role-management
路由管理：/admin/route-management
用户列表：/admin/user-list
所有路由都需要认证

3. 创建页面组件

目录：apps/FrontendDesigner/src/views/admin/

创建AdminRoleManagement组件
创建AdminRouteManagement组件
创建AdminUserList组件
每个组件包含基本的模板结构和国际化支持

4. 更新子菜单映射

文件：apps/FrontendDesigner/src/components/admin/AdminLayout.vue

在submenuMap中添加权限管理子菜单的映射关系
确保路由切换时正确展开对应的父菜单

技术实现要点

菜单结构

<el-sub-menu index="/admin/permission">
  <template #title>
    <el-icon><Lock /></el-icon>
    <span>{{ t('admin.layout.permission') }}</span>
  </template>
  <el-menu-item index="/admin/role-management">
    <el-icon><User /></el-icon>
    <template #title>{{ t('admin.layout.roleManagement') }}</template>
  </el-menu-item>
  <el-menu-item index="/admin/route-management">
    <el-icon><Document /></el-icon>
    <template #title>{{ t('admin.layout.routeManagement') }}</template>
  </el-menu-item>
  <el-menu-item index="/admin/user-list">
    <el-icon><List /></el-icon>
    <template #title>{{ t('admin.layout.userList') }}</template>
  </el-menu-item>
</el-sub-menu>

路由配置

// 权限管理相关组件
const AdminRoleManagement = () => import('@/views/admin/AdminRoleManagement.vue')
const AdminRouteManagement = () => import('@/views/admin/AdminRouteManagement.vue')
const AdminUserList = () => import('@/views/admin/AdminUserList.vue')

// 添加到children数组中
{
  path: 'role-management',
  name: 'AdminRoleManagement',
  component: AdminRoleManagement,
  meta: {
    title: '角色管理'
  }
},
{
  path: 'route-management',
  name: 'AdminRouteManagement',
  component: AdminRouteManagement,
  meta: {
    title: '路由管理'
  }
},
{
  path: 'user-list',
  name: 'AdminUserList',
  component: AdminUserList,
  meta: {
    title: '用户列表'
  }
}

国际化支持

在locales/lang/zh-CN.js和en-US.js中添加权限管理相关的翻译
包括菜单名称和页面标题

预期效果

侧边栏新增权限管理菜单，点击展开二级目录
点击二级菜单项跳转到对应页面
页面包含基本的布局结构
支持中英文切换
支持主题切换

后续优化方向

实现角色管理功能（增删改查）
实现路由权限配置功能
实现用户列表展示和管理功能
添加表单验证和错误处理
优化页面样式和交互体验

3.2 KiB Raw Blame History Unescape Escape