# 机房管控系统菜单配置指南

## 📋 菜单结构

### 管理员菜单 (R_SUPER, R_ADMIN)

1. **首页** 🏠
   - 系统概览和统计信息

2. **设备管理** 💻
   - 设备列表 - 所有设备的增删改查
   - 在线状态 - 实时监控设备在线情况
   - 电源管理 - 远程控制设备电源
   - 远程监控 - 查看设备屏幕
   - 设备分组 - 按维度分组管理（未来扩展）

3. **屏幕监控** 🖥
   - 监控墙 - 多屏幕同时监控
   - 单屏控制 - 单个设备控制
   - 控制记录 - 操作审计

4. **用户管理** 👤
   - 用户列表 - 用户增删改查
   - 角色管理 - 角色配置
   - 权限管理 - 权限分配（仅超级管理员）

5. **使用申请** 📄
   - 申请审批 - 审批用户申请
   - 使用记录 - 查看使用历史

6. **系统设置** ⚙ (仅超级管理员)
   - AMT设置 - Intel AMT配置
   - Agent设置 - 客户端程序管理
   - 日志中心 - 系统日志查询

### 普通用户菜单 (R_USER)

1. **首页** 🏠
   - 个人使用概览

2. **我的设备** 💻
   - 设备状态 - 查看我的设备
   - 电源控制 - 控制设备电源
   - 远程控制 - 远程操作设备

3. **设备申请** 📄
   - 申请使用 - 提交使用申请
   - 我的申请 - 查看申请状态

## 🚀 部署步骤

### 1. 执行数据库脚本

```bash
# 登录 MySQL
mysql -u root -p

# 执行路由初始化脚本
source backend/src/main/resources/sql/add_all_routes.sql
```

或者在 MySQL 客户端中直接执行 `backend/src/main/resources/sql/add_all_routes.sql` 文件。

### 2. 生成前端路由

```bash
# 在项目根目录执行
pnpm gen-route
```

这会自动扫描 `src/views` 目录并生成路由配置。

### 3. 重启服务

**后端：**
```bash
cd backend
mvn spring-boot:run
```

**前端：**
```bash
pnpm dev
```

### 4. 测试菜单

**管理员账号：**
- 用户名：`admin`
- 密码：`admin123`
- 可见菜单：所有管理员菜单

**普通用户账号：**
- 用户名：`user`
- 密码：`user123`
- 可见菜单：仅普通用户菜单

## 📁 文件结构

```
src/views/
├── home/                    # 首页
├── device/                  # 设备管理
│   ├── index.vue
│   ├── _meta.ts
│   ├── list/               # 设备列表
│   ├── online/             # 在线状态
│   ├── power/              # 电源管理
│   ├── monitor/            # 远程监控
│   └── group/              # 设备分组
├── screen/                  # 屏幕监控
│   ├── index.vue
│   ├── _meta.ts
│   ├── wall/               # 监控墙
│   ├── control/            # 单屏控制
│   └── record/             # 控制记录
├── user-manage/             # 用户管理
│   ├── index.vue
│   ├── _meta.ts
│   ├── list/               # 用户列表
│   ├── role/               # 角色管理
│   └── permission/         # 权限管理
├── application/             # 申请管理
│   ├── index.vue
│   ├── _meta.ts
│   ├── approval/           # 申请审批
│   └── history/            # 使用记录
├── system/                  # 系统设置
│   ├── index.vue
│   ├── _meta.ts
│   ├── amt/                # AMT设置
│   ├── agent/              # Agent设置
│   └── log/                # 日志中心
├── my-device/               # 我的设备（普通用户）
│   ├── index.vue
│   ├── _meta.ts
│   ├── status/             # 设备状态
│   ├── power-control/      # 电源控制
│   └── remote-control/     # 远程控制
└── my-application/          # 设备申请（普通用户）
    ├── index.vue
    ├── _meta.ts
    ├── apply/              # 申请使用
    └── my-list/            # 我的申请
```

## 🎨 路由元信息配置

每个页面的 `_meta.ts` 文件配置示例：

```typescript
export default {
  title: '设备管理',           // 菜单标题
  i18nKey: 'route.device',     // 国际化key
  icon: 'mdi:desktop-classic', // 图标
  order: 2,                    // 排序
  roles: ['R_SUPER', 'R_ADMIN'] // 可访问角色（可选）
};
```

## 🔐 权限说明

- **R_SUPER**: 超级管理员 - 所有权限
- **R_ADMIN**: 管理员 - 除系统设置外的所有权限
- **R_USER**: 普通用户 - 仅个人相关功能

## 📝 注意事项

1. 当前使用的是**静态路由模式** (`VITE_AUTH_ROUTE_MODE=static`)
2. 路由根据角色自动过滤，不同角色看到不同菜单
3. 所有页面都是示例页面，需要根据实际需求开发具体功能
4. 图标使用 Material Design Icons (mdi)

## 🔄 如何添加新菜单

1. 在 `src/views` 下创建新的页面文件夹
2. 创建 `index.vue` 页面组件
3. 创建 `_meta.ts` 配置文件
4. 运行 `pnpm gen-route` 生成路由
5. 在 `src/locales/langs/zh-cn.ts` 添加国际化配置

## 📞 技术支持

如有问题，请查看：
- 前端路由配置：`src/router/elegant/routes.ts`
- 后端路由数据：数据库 `sys_route` 表
- 国际化配置：`src/locales/langs/zh-cn.ts`