Files
smart_grid_iot/.trae/documents/prd.md
T
andyesfly 3d7eb12103 feat: 初始化智能物联网设备管理系统前后端基础项目
完成项目整体结构搭建,包含:
1. 前端Vue3+TS+Vite+Antd项目基础配置与核心依赖
2. 后端MidwayJS+TypeORM+JWT权限认证框架
3. 完整的用户、角色、权限、日志数据库表结构
4. 核心业务模块API与基础服务实现
5. 全局样式、路由、状态管理配置
2026-05-28 16:23:15 +08:00

5.2 KiB
Raw Blame History

智能物联网设备后台管理系统 PRD

1. 产品概述

智能物联网设备后台管理系统是面向企业级用户的设备管理平台,用于统一管理IoT设备、用户权限和系统配置。

  • 主要用途:集中管理物联网设备、控制后台访问权限、维护系统运行参数
  • 目标用户:系统管理员、运维人员、企业管理者
  • 产品价值:提升设备管理效率、保障系统安全性、降低运营成本

2. 核心功能

2.1 用户角色

角色 创建方式 核心权限
超级管理员 系统初始化 全部功能权限、用户管理、角色分配
管理员 超级管理员创建 设备管理、用户查看、部分系统设置
运维人员 管理员创建 设备监控、日志查看、基础操作

2.2 功能模块

  1. 登录认证:用户登录、密码修改、会话管理
  2. 仪表盘:设备统计概览、系统状态监控、告警信息
  3. 用户管理:用户列表、新增/编辑/删除用户、状态管理
  4. 角色权限:角色定义、权限矩阵、角色-权限绑定
  5. 系统设置:基本参数配置、安全设置、通知配置
  6. 操作日志:用户行为记录、系统事件追踪

2.3 页面详情

页面名称 模块名称 功能描述
登录页 认证模块 账号密码登录、验证码、记住密码、忘记密码
仪表盘 数据展示 设备在线率图表、告警统计卡片、最近活动列表
用户列表 用户管理 表格展示用户数据、搜索筛选、批量操作、分页
用户表单 用户管理 新增/编辑用户表单(账号、姓名、手机、邮箱、角色选择)
角色列表 权限管理 角色表格展示、权限树形结构、角色关联用户数
权限配置 权限管理 权限分类树(菜单权限、按钮权限、API权限)、勾选授权
系统参数 系统设置 站点名称、Logo上传、会话超时时间、密码策略配置
安全设置 系统设置 IP白名单、登录失败锁定策略、操作审计开关
操作日志 日志管理 日志表格(操作人、操作类型、时间、IP)、导出功能

3. 核心流程

3.1 用户登录与权限验证流程

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 用户管理与权限分配流程

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提示、确认对话框
  • 导航体验:面包屑导航、当前菜单高亮、快捷键支持