112 lines
3.2 KiB
Markdown
112 lines
3.2 KiB
Markdown
# 实现侧边栏权限管理功能
|
||
|
||
## 功能需求
|
||
在侧边栏新增权限管理功能，包含以下二级目录：
|
||
- 角色管理
|
||
- 路由管理（每个路由可配置对应按钮权限）
|
||
- 用户列表（展示后台管理系统所有账号）
|
||
|
||
## 实现步骤
|
||
|
||
### 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`中添加权限管理子菜单的映射关系
|
||
- 确保路由切换时正确展开对应的父菜单
|
||
|
||
## 技术实现要点
|
||
|
||
### 菜单结构
|
||
```vue
|
||
<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>
|
||
```
|
||
|
||
### 路由配置
|
||
```javascript
|
||
// 权限管理相关组件
|
||
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`中添加权限管理相关的翻译
|
||
- 包括菜单名称和页面标题
|
||
|
||
## 预期效果
|
||
- 侧边栏新增权限管理菜单，点击展开二级目录
|
||
- 点击二级菜单项跳转到对应页面
|
||
- 页面包含基本的布局结构
|
||
- 支持中英文切换
|
||
- 支持主题切换
|
||
|
||
## 后续优化方向
|
||
- 实现角色管理功能（增删改查）
|
||
- 实现路由权限配置功能
|
||
- 实现用户列表展示和管理功能
|
||
- 添加表单验证和错误处理
|
||
- 优化页面样式和交互体验 |