Kia_F/admin

Fork 0

lvfengfree 67f6fdf610 提交项目所有代码

2026-02-28 21:34:04 +08:00

5.1 KiB

Raw Blame History

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

📋 菜单结构

管理员菜单 (R_SUPER, R_ADMIN)

首页 🏠
- 系统概览和统计信息
设备管理 💻
- 设备列表 - 所有设备的增删改查
- 在线状态 - 实时监控设备在线情况
- 电源管理 - 远程控制设备电源
- 远程监控 - 查看设备屏幕
- 设备分组 - 按维度分组管理（未来扩展）
屏幕监控 🖥
- 监控墙 - 多屏幕同时监控
- 单屏控制 - 单个设备控制
- 控制记录 - 操作审计
用户管理 👤
- 用户列表 - 用户增删改查
- 角色管理 - 角色配置
- 权限管理 - 权限分配（仅超级管理员）
使用申请 📄
- 申请审批 - 审批用户申请
- 使用记录 - 查看使用历史
系统设置 ⚙ (仅超级管理员)
- AMT设置 - Intel AMT配置
- Agent设置 - 客户端程序管理
- 日志中心 - 系统日志查询

普通用户菜单 (R_USER)

首页 🏠
- 个人使用概览
我的设备 💻
- 设备状态 - 查看我的设备
- 电源控制 - 控制设备电源
- 远程控制 - 远程操作设备
设备申请 📄
- 申请使用 - 提交使用申请
- 我的申请 - 查看申请状态

🚀 部署步骤

1. 执行数据库脚本

# 登录 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. 生成前端路由

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

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

3. 重启服务

后端：

cd backend
mvn spring-boot:run

前端：

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 文件配置示例：

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

🔐 权限说明

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

📝 注意事项

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

🔄 如何添加新菜单

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

📞 技术支持

如有问题，请查看：

前端路由配置：src/router/elegant/routes.ts
后端路由数据：数据库 sys_route 表
国际化配置：src/locales/langs/zh-cn.ts

5.1 KiB Raw Blame History