# 实现侧边栏权限管理功能

## 功能需求
在侧边栏新增权限管理功能，包含以下二级目录：
- 角色管理
- 路由管理（每个路由可配置对应按钮权限）
- 用户列表（展示后台管理系统所有账号）

## 实现步骤

### 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`中添加权限管理相关的翻译
- 包括菜单名称和页面标题

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

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