andyesfly
3d7eb12103
完成项目整体结构搭建，包含： 1. 前端Vue3+TS+Vite+Antd项目基础配置与核心依赖 2. 后端MidwayJS+TypeORM+JWT权限认证框架 3. 完整的用户、角色、权限、日志数据库表结构 4. 核心业务模块API与基础服务实现 5. 全局样式、路由、状态管理配置
107 lines
5.2 KiB
Markdown
107 lines
5.2 KiB
Markdown
# 智能物联网设备后台管理系统 PRD
|
||
|
||
## 1. 产品概述
|
||
智能物联网设备后台管理系统是面向企业级用户的设备管理平台，用于统一管理IoT设备、用户权限和系统配置。
|
||
- 主要用途：集中管理物联网设备、控制后台访问权限、维护系统运行参数
|
||
- 目标用户：系统管理员、运维人员、企业管理者
|
||
- 产品价值：提升设备管理效率、保障系统安全性、降低运营成本
|
||
|
||
## 2. 核心功能
|
||
|
||
### 2.1 用户角色
|
||
| 角色 | 创建方式 | 核心权限 |
|
||
|------|----------|----------|
|
||
| 超级管理员 | 系统初始化 | 全部功能权限、用户管理、角色分配 |
|
||
| 管理员 | 超级管理员创建 | 设备管理、用户查看、部分系统设置 |
|
||
| 运维人员 | 管理员创建 | 设备监控、日志查看、基础操作 |
|
||
|
||
### 2.2 功能模块
|
||
1. **登录认证**：用户登录、密码修改、会话管理
|
||
2. **仪表盘**：设备统计概览、系统状态监控、告警信息
|
||
3. **用户管理**：用户列表、新增/编辑/删除用户、状态管理
|
||
4. **角色权限**：角色定义、权限矩阵、角色-权限绑定
|
||
5. **系统设置**：基本参数配置、安全设置、通知配置
|
||
6. **操作日志**：用户行为记录、系统事件追踪
|
||
|
||
### 2.3 页面详情
|
||
| 页面名称 | 模块名称 | 功能描述 |
|
||
|-----------|----------|----------|
|
||
| 登录页 | 认证模块 | 账号密码登录、验证码、记住密码、忘记密码 |
|
||
| 仪表盘 | 数据展示 | 设备在线率图表、告警统计卡片、最近活动列表 |
|
||
| 用户列表 | 用户管理 | 表格展示用户数据、搜索筛选、批量操作、分页 |
|
||
| 用户表单 | 用户管理 | 新增/编辑用户表单（账号、姓名、手机、邮箱、角色选择） |
|
||
| 角色列表 | 权限管理 | 角色表格展示、权限树形结构、角色关联用户数 |
|
||
| 权限配置 | 权限管理 | 权限分类树（菜单权限、按钮权限、API权限）、勾选授权 |
|
||
| 系统参数 | 系统设置 | 站点名称、Logo上传、会话超时时间、密码策略配置 |
|
||
| 安全设置 | 系统设置 | IP白名单、登录失败锁定策略、操作审计开关 |
|
||
| 操作日志 | 日志管理 | 日志表格（操作人、操作类型、时间、IP）、导出功能 |
|
||
|
||
## 3. 核心流程
|
||
|
||
### 3.1 用户登录与权限验证流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[用户访问系统] --> B{是否已登录?}
|
||
B -->|否| C[跳转登录页]
|
||
C --> D[输入账号密码]
|
||
D --> E[提交登录请求]
|
||
E --> F{验证结果}
|
||
F -->|成功| G[获取Token和权限]
|
||
G --> H[跳转仪表盘]
|
||
F -->|失败| I[显示错误提示]
|
||
I --> D
|
||
B -->|是| J{Token是否有效?}
|
||
J -->|是| K[正常访问页面]
|
||
J -->|否| C
|
||
```
|
||
|
||
### 3.2 用户管理与权限分配流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[管理员进入用户管理] --> B[查看用户列表]
|
||
B --> C{操作类型}
|
||
C -->|新增| D[填写用户信息表单]
|
||
C -->|编辑| E[加载用户现有数据]
|
||
C -->|删除| F[二次确认删除]
|
||
D --> G[选择用户角色]
|
||
E --> G
|
||
G --> H[保存用户信息]
|
||
H --> I[更新用户权限缓存]
|
||
I --> J[刷新用户列表]
|
||
F --> J
|
||
```
|
||
|
||
## 4. 用户界面设计
|
||
|
||
### 4.1 设计风格
|
||
- **主色调**：深蓝色系（#1890ff）+ 科技灰背景（#f0f2f5）
|
||
- **辅助色**：成功绿（#52c41a）、警告橙（#faad14）、错误红（#ff4d4f）
|
||
- **按钮风格**：圆角设计（border-radius: 6px）、微渐变效果
|
||
- **字体**：中文使用思源黑体/PingFang SC，英文/数字使用 Inter
|
||
- **布局风格**：左侧固定菜单 + 顶部导航 + 右侧内容区（经典后台布局）
|
||
- **图标风格**：线性图标（Ant Design Icons），简洁专业
|
||
- **整体风格**：现代科技感、扁平化设计、清晰的信息层级
|
||
|
||
### 4.2 页面设计概览
|
||
| 页面名称 | 模块名称 | UI元素说明 |
|
||
|-----------|----------|------------|
|
||
| 登录页 | 认证区域 | 居中卡片式布局、品牌Logo、输入框带图标、渐变背景 |
|
||
| 仪表盘 | 统计卡片 | 4个关键指标卡片（设备总数、在线数、告警数、活跃用户）|
|
||
| 仪表盘 | 图表区域 | 设备趋势折线图、设备类型分布饼图、实时告警滚动列表 |
|
||
| 用户列表 | 数据表格 | Ant Design Table组件、行内操作按钮、状态标签、搜索栏 |
|
||
| 用户表单 | 表单区域 | 分步表单或单页表单、字段校验、角色多选下拉框 |
|
||
| 角色列表 | 权限表格 | 可展开的权限树、角色颜色标识、关联用户数量显示 |
|
||
| 系统设置 | 配置面板 | Tab分组（基本设置/安全设置/通知设置）、表单 + 开关控件 |
|
||
|
||
### 4.3 响应式设计
|
||
- **桌面优先**：主要针对1920x1080及以上分辨率优化
|
||
- **适配支持**：最低支持1366x768分辨率
|
||
- **移动端**：暂不考虑移动端访问（后台管理系统）
|
||
- **交互优化**：表格横向滚动、侧边栏可折叠、弹窗自适应
|
||
|
||
### 4.4 关键交互细节
|
||
- **表格操作**：悬停高亮行、批量选择、右键快捷菜单
|
||
- **表单体验**：实时校验、自动保存草稿、字段联动
|
||
- **反馈机制**：Loading状态、成功/失败Toast提示、确认对话框
|
||
- **导航体验**：面包屑导航、当前菜单高亮、快捷键支持
|