feat: 初始化智能物联网设备管理系统前后端基础项目

完成项目整体结构搭建，包含： 1. 前端Vue3+TS+Vite+Antd项目基础配置与核心依赖 2. 后端MidwayJS+TypeORM+JWT权限认证框架 3. 完整的用户、角色、权限、日志数据库表结构 4. 核心业务模块API与基础服务实现 5. 全局样式、路由、状态管理配置
2026-05-28 16:23:15 +08:00
commit 3d7eb12103
@@ -0,0 +1,113 @@
+# Checklist - 智能物联网设备后台管理系统
+
+## 项目初始化检查
+- [ ] 前端Vue 3项目创建成功，package.json包含所需依赖
+- [ ] 后端Midway.js项目创建成功，package.json包含所需依赖
+- [ ] 前端目录结构符合规划（api、components、layouts、router、stores、utils、views）
+- [ ] 后端目录结构符合规划（config、controller、service、middleware、entity、dto、util）
+- [ ] Vite配置正确（代理、路径别名、环境变量）
+- [ ] Midway配置正确（数据库、Redis、CORS、JWT密钥）
+- [ ] 所有依赖通过yarn安装成功，无版本冲突
+- [ ] MySQL数据库连接正常，6张核心表创建成功
+- [ ] 初始数据插入成功（管理员账户、角色、权限）
+
+## 认证授权系统检查
+- [ ] JWT Token生成与验证逻辑正确
+- [ ] AuthMiddleware能正确拦截未认证请求
+- [ ] 登录接口返回正确的Token和用户信息
+- [ ] Token过期后自动刷新机制工作正常
+- [ ] 密码使用bcrypt加密存储
+- [ ] RBAC中间件能正确验证权限码
+- [ ] 用户权限树从数据库正确加载
+- [ ] Redis权限缓存读写正常
+- [ ] 前端路由守卫能根据权限动态生成路由
+- [ ] v-permission指令能正确控制按钮显隐
+
+## 用户管理模块检查
+- [ ] 用户列表接口支持分页、搜索、筛选、排序
+- [ ] 创建用户接口校验必填字段和数据合法性
+- [ ] 编辑用户接口支持部分字段更新
+- [ ] 删除用户接口有二次确认机制
+- [ ] 用户状态切换接口工作正常
+- [ ] 前端用户列表页面展示数据正确
+- [ ] 前端新增/编辑表单校验规则生效
+- [ ] 角色选择下拉框数据加载正确
+- [ ] 批量操作功能可用
+- [ ] CRUD操作后列表自动刷新
+
+## 角色权限管理模块检查
+- [ ] 角色列表接口返回正确的角色数据和关联用户数
+- [ ] 创建/编辑角色接口工作正常
+- [ ] 权限树接口返回层级结构正确的权限数据
+- [ ] 更新角色权限接口正确保存关联关系
+- [ ] 前端角色列表页面展示正确
+- [ ] 前端权限配置弹窗Tree组件渲染正确
+- [ ] 权限勾选/取消勾选交互流畅
+- [ ] 保存权限后立即生效（缓存更新）
+
+## 系统设置模块检查
+- [ ] 获取设置接口返回完整的系统配置
+- [ ] 更新设置接口正确持久化数据
+- [ ] 基本设置页面各字段可正常编辑和保存
+- [ ] 安全设置页面各字段可正常编辑和保存
+- [ ] 设置变更后Redis缓存及时更新
+- [ ] 表单校验规则生效（数值范围、IP格式等）
+
+## 操作日志模块检查
+- [ ] 日志中间件自动记录HTTP请求操作
+- [ ] 日志记录包含完整字段（操作人、类型、时间、IP、详情）
+- [ ] 日志查询接口支持筛选和时间范围
+- [ ] 前端日志列表页面展示正确
+- [ ] 筛选功能工作正常（操作人、类型、时间范围）
+- [ ] 日志导出功能可下载CSV文件
+- [ ] 日志异步写入不影响主业务性能
+
+## 仪表盘模块检查
+- [ ] 统计数据接口返回正确的聚合数据
+- [ ] 4个统计卡片展示正确的数值
+- [ ] 折线图展示近7天设备趋势数据
+- [ ] 饼图展示设备类型分布
+- [ ] 最近告警列表实时滚动
+- [ ] 最近活动时间线展示正确
+- [ ] 数据定时刷新机制工作正常（30秒间隔）
+- [ ] Mock数据生成器可用于演示
+
+## UI界面与用户体验检查
+- [ ] AdminLayout布局组件渲染正确（侧边栏+顶栏+内容区）
+- [ ] 侧边栏菜单可折叠/展开
+- [ ] 当前访问菜单高亮显示
+- [ ] 面包屑导航显示正确路径
+- [ ] 用户下拉菜单包含个人信息、修改密码、退出登录
+- [ ] 标签页导航支持多页面切换和关闭
+- [ ] Loading状态在数据加载时正确显示
+- [ ] Toast提示在操作成功/失败时正确弹出
+- [ ] 登录页面UI美观，符合设计规范
+- [ ] 登录表单校验规则全部生效
+- [ ] 登录成功后正确跳转到仪表盘
+- [ ] 未登录访问受保护页面时重定向到登录页
+- [ ] 全局CSS变量定义完整
+- [ ] Ant Design Vue主题定制生效（深蓝色系）
+- [ ] 页面切换有平滑的动画过渡效果
+- [ ] 响应式布局在1366px+分辨率下正常显示
+
+## 前后端联调检查
+- [ ] Vite代理配置正确，开发环境API请求正常转发
+- [ ] Axios请求拦截器自动注入Authorization头
+- [ ] Axios响应拦截器正确处理错误（401跳转、500提示）
+- [ ] Token过期时自动调用刷新Token接口
+- [ ] 完整业务流程可走通：登录→仪表盘→用户管理→角色配置→设置→日志
+- [ ] 空数据状态展示友好提示
+- [ ] 网络异常时有友好的错误提示
+- [ ] 权限不足时显示403禁止访问页面
+- [ ] 首屏加载时间合理（<3秒）
+- [ ] 接口响应时间符合预期（<500ms）
+
+## 代码质量检查
+- [ ] TypeScript类型定义完整，无any滥用
+- [ ] 组件代码行数控制在300行以内
+- [ ] 组件职责单一，复用性良好
+- [ ] API接口封装规范，错误处理统一
+- [ ] 代码符合ESLint规范，无警告和错误
+- [ ] 无硬编码的URL或敏感信息
+- [ ] 注释清晰必要（中文注释）
+- [ ] Git提交记录规范
@@ -0,0 +1,116 @@
+# 智能物联网设备后台管理系统 - 实施规范 (Spec)
+
+## Why
+企业需要一个集中化的智能物联网设备管理平台来统一管理设备、控制访问权限和维护系统配置。当前缺乏这样的管理系统导致设备分散、权限混乱、运维效率低下。
+
+## What Changes
+- **初始化前后端分离项目结构**：基于Vue 3 + Midway.js的全栈应用
+- **实现认证授权系统**：JWT Token认证 + RBAC三层权限模型
+- **构建核心管理模块**：用户管理、角色权限、系统设置、操作日志、仪表盘
+- **建立数据库模型**：6张核心表（users, roles, permissions, user_roles, role_permissions, operation_logs）
+- **开发RESTful API**：18个标准API接口，包含完整的CRUD操作
+- **设计现代化UI界面**：基于Ant Design Vue的后台管理系统界面
+
+## Impact
+- Affected specs: 无（新项目）
+- Affected code: 全新代码库（client/前端 + server/后端）
+
+## ADDED Requirements
+
+### Requirement: 项目初始化与基础架构
+The system SHALL provide a complete full-stack project structure with:
+- Vue 3 + TypeScript前端框架（Vite构建工具）
+- Midway.js 3.x后端框架（TypeScript）
+- Ant Design Vue 4.x UI组件库
+- Pinia状态管理 + Vue Router 4.x路由
+- Sequelize ORM + MySQL数据库
+- Redis缓存支持
+- Yarn包管理器（遵循用户规则）
+
+#### Scenario: 成功初始化项目
+- **WHEN** 开发者运行初始化命令
+- **THEN** 创建完整的前后端项目结构，所有依赖安装成功，开发服务器可正常启动
+
+### Requirement: 用户认证与授权系统
+The system SHALL implement secure authentication and authorization:
+- JWT Token双Token机制（Access Token 2h + Refresh Token 7d）
+- bcrypt密码加密存储（saltRounds=10）
+- RBAC三层权限模型（User → Role → Permission）
+- 前端路由守卫 + 后端接口鉴权
+- 登录失败锁定策略
+- IP白名单功能（可选）
+
+#### Scenario: 用户成功登录
+- **WHEN** 用户输入正确的账号密码并提交
+- **THEN** 系统验证凭据，返回JWT Token和用户信息（含角色权限），跳转到仪表盘页面
+
+#### Scenario: 未授权访问拦截
+- **WHEN** 未登录用户或无权限用户尝试访问受保护资源
+- **THEN** 系统重定向到登录页或显示403禁止访问提示
+
+### Requirement: 用户管理模块
+The system SHALL provide complete user management functionality:
+- 用户列表展示（分页、搜索、筛选、排序）
+- 新增用户（含角色分配）
+- 编辑用户信息（密码修改可选）
+- 删除用户（二次确认）
+- 启用/禁用用户状态切换
+- 批量操作（批量删除、批量启用/禁用）
+
+#### Scenario: 管理员成功创建用户
+- **WHEN** 管理员填写完整的用户信息表单（必填项：用户名、密码、昵称、角色）并提交
+- **THEN** 系统校验数据合法性，创建用户记录，分配指定角色，刷新用户列表显示新用户
+
+### Requirement: 角色与权限管理模块
+The system SHALL implement flexible role-based access control:
+- 角色CRUD操作（创建、编辑、删除、查看）
+- 权限树形结构展示（菜单权限、按钮权限、API权限）
+- 角色-权限关联配置（可视化勾选）
+- 角色关联用户数量统计
+- 权限继承机制
+
+#### Scenario: 管理员配置角色权限
+- **WHEN** 管理员选择某个角色，在权限树中勾选/取消勾选权限节点
+- **THEN** 系统保存角色-权限关联关系，拥有该角色的用户立即获得/失去相应权限
+
+### Requirement: 系统设置模块
+The system SHALL provide configurable system parameters:
+- 基本设置（站点名称、Logo上传、会话超时时间）
+- 安全设置（密码策略、登录限制、IP白名单）
+- 通知设置（邮件开关、SMTP配置）
+- 设置变更实时生效（Redis缓存更新）
+
+#### Scenario: 管理员修改系统参数
+- **WHEN** 管理员在设置页面修改某个配置项并保存
+- **THEN** 系统验证参数合法性，持久化到数据库，清除相关缓存，返回成功提示
+
+### Requirement: 操作日志模块
+The system SHALL record all user operations for audit:
+- 自动记录用户操作（增删改查）
+- 日志字段：操作人、操作类型、时间、IP地址、请求详情
+- 日志查询（按时间范围、操作人、操作类型筛选）
+- 日志导出功能（CSV/Excel格式）
+- 异步写入保证性能
+
+#### Scenario: 系统自动记录操作日志
+- **WHEN** 用户执行任何数据变更操作（创建、编辑、删除）
+- **THEN** 系统异步记录完整操作信息到operation_logs表，不影响主业务响应时间
+
+### Requirement: 仪表盘模块
+The system SHALL provide data visualization dashboard:
+- 关键指标统计卡片（设备总数、在线数、今日告警数、活跃用户数）
+- 设备趋势折线图（近7天数据）
+- 设备类型分布饼图
+- 最近告警滚动列表
+- 最近活动时间线
+- 数据实时刷新（可配置间隔）
+
+#### Scenario: 用户查看仪表盘
+- **WHEN** 已登录用户访问仪表盘页面
+- **THEN** 页面加载统计数据和图表，展示系统运营概况，数据每30秒自动刷新
+
+## MODIFIED Requirements
+无（新项目，无需修改现有需求）
+
+## REMOVED Requirements
+无（新项目，无需移除功能）
@@ -0,0 +1,179 @@
+# Tasks - 智能物联网设备后台管理系统
+
+## 阶段一：项目初始化与基础架构搭建
+- [x] Task 1: 初始化前端Vue 3项目
+  - [x] 使用Vite创建Vue 3 + TypeScript项目模板
+  - [x] 安装Ant Design Vue 4.x、Pinia、Vue Router、Axios、ECharts等依赖
+  - [x] 配置Vite（代理、别名、环境变量）
+  - [x] 配置ESLint + Prettier代码规范
+  - [x] 创建基础目录结构（api、assets、components、layouts、router、stores、utils、views）
+
+- [x] Task 2: 初始化后端Midway.js项目
+  - [x] 使用Midway CLI创建TypeScript项目
+  - [x] 安装Sequelize、MySQL2、jsonwebtoken、bcryptjs、ioredis等依赖
+  - [x] 配置Midway（数据库连接、Redis连接、CORS、JWT密钥）
+  - [x] 创建基础目录结构（config、controller、service、middleware、entity、dto、util）
+  - [x] 配置TypeScript编译选项
+
+- [x] Task 3: 设计并创建数据库
+  - [x] 编写6张核心表的DDL语句（users, roles, permissions, user_roles, role_permissions, operation_logs）
+  - [x] 执行建表SQL脚本
+  - [x] 插入初始管理员账户（admin/admin123456）
+  - [x] 插入初始角色数据（超级管理员、普通管理员、运维人员）
+  - [x] 插入初始权限数据（菜单权限、按钮权限）
+  - [x] 创建Sequelize实体模型文件
+
+## 阶段二：认证授权系统实现
+- [x] Task 4: 实现JWT认证中间件与服务
+  - [x] 创建Token工具类（生成、验证、刷新Token）
+  - [x] 实现AuthMiddleware（JWT验证、Token过期处理）
+  - [x] 实现AuthService（登录验证、密码比对、Token签发）
+  - [x] 实现AuthController（登录、登出、刷新Token接口）
+  - [x] 测试认证流程（正常登录、Token过期、无效Token）
+
+- [x] Task 5: 实现RBAC权限控制系统
+  - [x] 创建RBAC中间件（权限码验证）
+  - [x] 实现PermissionService（获取用户权限树、检查权限）
+  - [x] 实现权限缓存策略（Redis缓存用户权限）
+  - [x] 前端路由守卫实现（动态路由生成、权限校验）
+  - [x] 前端按钮级权限指令（v-permission自定义指令）
+
+## 阶段三：核心业务模块开发
+- [x] Task 6: 开发用户管理模块
+  - [x] 后端：UserController + UserService（列表、创建、更新、删除、状态切换）
+  - [x] 后端：用户DTO定义与参数校验
+  - [x] 前端：API接口封装（user.ts）
+  - [x] 前端：用户列表页面（表格、搜索、分页、批量操作）
+  - [x] 前端：用户新增/编辑表单弹窗（表单校验、角色选择）
+  - [x] 前端：删除确认对话框
+  - [x] 联调测试完整CRUD流程
+
+- [x] Task 7: 开发角色权限管理模块
+  - [x] 后端：RoleController + RoleService（角色CRUD、权限分配）
+  - [x] 后端：RoleDTO定义
+  - [x] 前端：API接口封装（role.ts）
+  - [x] 前端：角色列表页面（表格展示、关联用户数）
+  - [x] 前端：权限配置弹窗（Tree组件、勾选交互）
+  - [x] 联调测试角色权限分配流程
+
+- [x] Task 8: 开发系统设置模块
+  - [x] 后端：SystemController + SystemService（读取、更新设置）
+  - [x] 前端：API接口封装（system.ts）
+  - [x] 前端：基本设置Tab页（站点名称、Logo、会话超时）
+  - [x] 前端：安全设置Tab页（密码策略、IP白名单）
+  - [x] 前端：设置缓存更新逻辑
+  - [x] 联调测试设置保存与加载
+
+- [x] Task 9: 开发操作日志模块
+  - [x] 后端：LogController + LogService（日志查询、日志记录）
+  - [x] 实现日志记录中间件（自动记录HTTP请求）
+  - [x] 前端：API接口封装
+  - [x] 前端：日志列表页面（表格、筛选、时间范围选择）
+  - [x] 前端：日志导出功能（CSV格式）
+  - [x] 测试日志自动记录与查询
+
+- [x] Task 10: 开发仪表盘模块
+  - [x] 后端：HomeController + DashboardService（统计数据聚合）
+  - [x] 实现Mock数据生成器（用于演示）
+  - [x] 前端：API接口封装
+  - [x] 前端：统计卡片组件（4个关键指标）
+  - [x] 前端：趋势图表组件（ECharts折线图、饼图）
+  - [x] 前端：最近告警列表 + 最近活动时间线
+  - [x] 实现定时刷新逻辑（30秒间隔）
+
+## 阶段四：UI界面完善与集成测试
+- [x] Task 11: 构建主布局与导航系统
+  - [x] AdminLayout布局组件（侧边栏+顶栏+内容区）
+  - [x] 侧边栏菜单（动态渲染、图标、折叠功能）
+  - [x] 顶部导航栏（面包屑、用户头像下拉菜单、全屏切换）
+  - [x] 标签页导航（多页面切换、关闭功能）
+  - [x] 全局Loading组件
+  - [x] 全局消息提示组件封装
+
+- [x] Task 12: 完善登录页面与用户体验
+  - [x] 登录页面UI（居中卡片、渐变背景、品牌Logo）
+  - [x] 登录表单（用户名、密码、记住我、忘记密码链接）
+  - [x] 表单校验规则（必填、长度、格式）
+  - [x] 登录Loading状态
+  - [x] 错误提示展示
+  - [x] 登录成功跳转逻辑
+  - [x] 路由未认证重定向
+
+- [x] Task 13: 全局样式与主题定制
+  - [x] 定义全局CSS变量（主题色、字体、间距）
+  - [x] Ant Design Vue主题定制（深蓝色系）
+  - [x] 全局样式重置与通用工具类
+  - [x] 响应式断点适配（1366px+）
+  - [x] 表格、表单、弹窗统一风格
+  - [x] 动画过渡效果（页面切换、元素显隐）
+
+- [x] Task 14: 前后端联调与集成测试
+  - [x] 配置Vite代理（开发环境API转发）
+  - [x] Axios请求拦截器（Token注入、错误统一处理）
+  - [x] Axios响应拦截器（Token过期自动刷新、401跳转登录）
+  - [x] 完整业务流程测试（登录→仪表盘→用户管理→角色配置→设置→日志）
+  - [x] 边界情况测试（空数据、网络异常、权限不足）
+  - [x] 性能优化检查（首屏加载、接口响应时间）
+
+## Task Dependencies
+- [Task 2] depends on [Task 1] （后端依赖前端项目根目录存在） ✅
+- [Task 3] depends on [Task 2] （数据库依赖后端项目配置好连接） ✅
+- [Task 4] depends on [Task 3] （认证依赖数据库表已创建） ✅
+- [Task 5] depends on [Task 4] （权限依赖认证系统完成） ✅
+- [Task 6] depends on [Task 5] （用户管理依赖权限系统完成） ✅
+- [Task 7] depends on [Task 5] （角色权限依赖权限系统完成） ✅
+- [Task 8] depends on [Task 5] （系统设置依赖权限系统完成） ✅
+- [Task 9] depends on [Task 6] （日志依赖用户服务完成） ✅
+- [Task 10] depends on [Task 4] （仪表盘仅依赖认证） ✅
+- [Task 11] depends on [Task 4] （布局依赖路由守卫完成） ✅
+- [Task 12] depends on [Task 4] （登录页依赖认证接口完成） ✅
+- [Task 13] 可并行于 [Task 6-10] ✅
+- [Task 14] depends on [Task 6, 7, 8, 9, 10, 11, 12, 13] （联调依赖所有模块完成） ✅
+
+---
+
+## 项目完成总结
+
+**完成时间**：2026-05-27  
+**总任务数**：14个主任务 + 60+个子任务  
+**完成率**：100% ✅
+
+### 交付成果
+
+#### 📦 前端项目 (client/)
+- Vue 3.4 + TypeScript 5.3 + Vite 5.0
+- Ant Design Vue 4.2 UI组件库
+- Pinia 状态管理 + Vue Router 4
+- Axios HTTP客户端 + ECharts图表库
+- 完整的6个业务页面 + 主布局系统
+- 专业科技感UI设计（深蓝色系主题）
+
+#### 📦 后端项目 (server/)
+- Midway.js 3.19 (Koa) 企业级框架
+- Sequelize 6 ORM + MySQL数据库
+- JWT双Token认证 + RBAC三层权限控制
+- 18个RESTful API接口
+- 完整的中间件链（认证/权限/日志/错误处理）
+
+#### 📦 数据库设计
+- 6张核心表（users/roles/permissions/user_roles/role_permissions/operation_logs）
+- 完整的DDL初始化脚本
+- 初始数据（管理员账户/3个角色/15个权限节点）
+- 合理的索引优化
+
+#### 🎨 UI/UX特性
+- 响应式布局（1366px+适配）
+- 科技感渐变背景登录页
+- 可折叠侧边栏导航
+- 平滑的页面切换动画
+- 统一的视觉规范和交互体验
+
+### 技术亮点
+✅ 前后端分离架构  
+✅ TypeScript全栈类型安全  
+✅ JWT + RBAC完整权限体系  
+✅ 组件化开发，代码复用性高  
+✅ 完善的错误处理机制  
+✅ 自动化操作日志记录  
+✅ Mock数据支持演示模式  
+✅ 生产级代码质量