--- comet_change: refactor-architecture-analysis role: technical-design canonical_spec: openspec --- # RuoYi-Vue 架构梳理技术设计 ## 概述 本设计文档描述了 RuoYi-Vue 系统架构梳理的完整技术方案，采用**分层递进式分析**方法，从前端到后端、从交互到数据库，逐层深入分析现有系统架构，输出 6 份完整的架构文档和优化建议。 ## 分析方法论 ### 分层递进式分析框架 ``` ┌─────────────────────────────────────────────────────────┐ │ 架构梳理分析流程 │ ├─────────────────────────────────────────────────────────┤ │ │ │ 第 1 层：前端架构分析 │ │ ┌───────────────────────────────────────────────────┐ │ │ │ • 组件结构分析（60+ 组件分类） │ │ │ │ • 路由与权限控制流 │ │ │ │ • Vuex 状态管理分析 │ │ │ │ • Axios API 调用层分析 │ │ │ └───────────────────────────────────────────────────┘ │ │ ↓ │ │ 第 2 层：后端架构分析 │ │ ┌───────────────────────────────────────────────────┐ │ │ │ • Controller 层（25+ 控制器） │ │ │ │ • Service 层（接口与实现） │ │ │ │ • Mapper 层（MyBatis XML） │ │ │ │ • Spring Security + JWT 安全配置 │ │ │ │ • AOP 切面（日志、数据权限、限流） │ │ │ └───────────────────────────────────────────────────┘ │ │ ↓ │ │ 第 3 层：前后端交互分析 │ │ ┌───────────────────────────────────────────────────┐ │ │ │ • API 接口清单（60+ 接口） │ │ │ │ • 请求/响应数据格式 │ │ │ │ • 错误处理机制 │ │ │ │ • 分页、排序、过滤规范 │ │ │ └───────────────────────────────────────────────────┘ │ │ ↓ │ │ 第 4 层：数据库结构分析 │ │ ┌───────────────────────────────────────────────────┐ │ │ │ • 表结构分析（sys_*、book_*、stock_*） │ │ │ │ • 索引与约束 │ │ │ │ • 查询模式与性能 │ │ │ └───────────────────────────────────────────────────┘ │ │ ↓ │ │ 整合输出：6 份文档 + 优化建议清单 │ │ │ └─────────────────────────────────────────────────────────┘ ``` ## 前端架构分析设计 ### 1. 组件结构分析 ``` ruoyi-ui/src/ ├── components/ # 通用组件（30+） │ ├── 基础组件 │ │ ├── Breadcrumb/ # 面包屑导航 │ │ ├── Pagination/ # 分页组件 │ │ ├── DictTag/ # 字典标签 │ │ ├── Editor/ # 富文本编辑器 │ │ └── ... │ ├── 布局组件 │ │ ├── Hamburger/ # 汉堡菜单 │ │ ├── Sidebar/ # 侧边栏 │ │ └── Navbar/ # 顶部导航 │ └── 业务组件 │ ├── FileUpload/ # 文件上传 │ ├── ImageUpload/ # 图片上传 │ └── ... │ ├── views/ # 页面视图（50+） │ ├── dashboard/ # 首页 │ ├── system/ # 系统管理（10+ 页面） │ ├── booksystem/ # 账本系统（6 页面） │ ├── stocksystem/ # 股票系统（8 页面） │ ├── monitor/ # 监控模块（5 页面） │ └── tool/ # 工具模块（5 页面） │ └── layout/ # 布局框架 ├── index.vue # 主布局 ├── components/ # 布局组件 └── mixin/ # 布局混入 ``` **分析重点**： - 组件复用程度 - 组件职责是否单一 - 是否存在过度耦合 - 组件命名规范性 ### 2. 路由与权限控制流 ``` 路由加载流程： ┌──────────┐ ┌───────────┐ ┌──────────┐ │ 用户登录 │─────►│ 获取 Token │─────►│ 获取权限 │ └──────────┘ └───────────┘ └────┬─────┘ │ ▼ ┌──────────────┐ │ 动态路由加载 │ │ (permission) │ └──────┬───────┘ │ ▼ ┌──────────────┐ │ 路由守卫验证 │ │ (permission) │ └──────────────┘ ``` **分析重点**： - 静态路由 vs 动态路由划分 - 权限加载机制（roles、permissions） - 路由守卫实现 - 路由懒加载策略 ### 3. Vuex 状态管理分析 ``` Vuex Modules: ┌────────────────────────────────────────┐ │ Vuex Store │ ├────────┬──────┬──────────┬─────────────┤ │ app │ user │ permission│ tagsView │ ├────────┼──────┼──────────┼─────────────┤ │ 侧边栏 │ 用户 │ 动态路由 │ 标签页 │ │ 设备类型│ 信息 │ 权限菜单 │ 标签状态 │ │ 主题 │ Token│ 路由列表 │ 标签操作 │ └────────┴──────┴──────────┴─────────────┘ ↓ settings (系统设置) ``` **分析重点**： - 状态模块划分合理性 - 数据流向清晰度 - 状态持久化策略 - Getter 使用情况 ### 4. Axios API 调用层分析 ``` 请求流程： ┌─────────┐ ┌──────────┐ ┌──────────┐ ┌────────┐ │ View │────►│ API 层 │────►│ Interceptor│────►│Backend │ │ (Vue) │ │ (Axios) │ │ (Token) │ │ (API) │ └─────────┘ └──────────┘ └──────────┘ └───┬────┘ ▲ │ │ ▼ │ ┌──────────┐ │ │ Response │ │ └────┬─────┘ │ │ │ ┌───────────────────────────────┘ │ ▼ │ ┌──────────┐ └────────│ Interceptor│ │ (Error) │ └────────────┘ ``` **分析重点**： - 拦截器实现（Token、错误处理） - 统一响应格式处理 - 超时配置 - 下载功能实现 ## 后端架构分析设计 ### 1. 分层架构分析 ``` ┌────────────────────────────────────────────────────┐ │ 后端分层架构 │ ├────────────────────────────────────────────────────┤ │ │ │ Controller 层（25+ 控制器） │ │ ┌──────────────────────────────────────────────┐ │ │ │ • 系统管理：SysUserController 等 12 个 │ │ │ │ • 监控模块：CacheController 等 5 个 │ │ │ │ • 业务模块：AccountController 等 14 个 │ │ │ │ • 工具模块：GenController 等 2 个 │ │ │ └──────────────────────────────────────────────┘ │ │ ↓ │ │ Service 层（接口 + 实现） │ │ ┌──────────────────────────────────────────────┐ │ │ │ • I*Service 接口定义 │ │ │ │ • *ServiceImpl 实现类 │ │ │ │ • 事务管理（@Transactional） │ │ │ └──────────────────────────────────────────────┘ │ │ ↓ │ │ Mapper 层（MyBatis XML） │ │ ┌──────────────────────────────────────────────┐ │ │ │ • *Mapper 接口 │ │ │ │ • *Mapper.xml SQL 映射 │ │ │ │ • 动态 SQL │ │ │ └──────────────────────────────────────────────┘ │ │ ↓ │ │ Domain 层（实体类） │ │ ┌──────────────────────────────────────────────┐ │ │ │ • 实体类（Domain） │ │ │ │ • VO/DTO（视图对象） │ │ │ │ • 基类（BaseEntity） │ │ │ └──────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────┘ ``` ### 2. 安全配置分析 ``` 安全架构： ┌────────────────────────────────────────┐ │ Spring Security 配置 │ ├────────────────────────────────────────┤ │ │ │ JWT Token 认证 │ │ ┌──────────────────────────────────┐ │ │ │ • Token 生成与验证 │ │ │ │ • Token 刷新机制 │ │ │ │ • Token 存储（Redis） │ │ │ └──────────────────────────────────┘ │ │ ↓ │ │ 权限控制 │ │ ┌──────────────────────────────────┐ │ │ │ • @PreAuthorize 注解 │ │ │ │ • 角色权限（ROLE_*） │ │ │ │ • 菜单权限（system:user:list） │ │ │ │ • 数据权限（@DataScope） │ │ │ └──────────────────────────────────┘ │ │ ↓ │ │ AOP 切面 │ │ ┌──────────────────────────────────┐ │ │ │ • 日志切面（@Log） │ │ │ │ • 数据源切面（@DataSource） │ │ │ │ • 限流切面（@RateLimiter） │ │ │ │ • 重复提交拦截 │ │ │ └──────────────────────────────────┘ │ └────────────────────────────────────────┘ ``` ### 3. 模块依赖关系 ``` 模块依赖图： ┌─────────────┐ │ ruoyi-admin │ (启动模块) └──────┬──────┘ │ ├─────────────┬─────────────┬──────────────┐ ▼ ▼ ▼ ▼ ┌───────────┐ ┌────────────┐ ┌──────────┐ ┌──────────┐ │ruoyi- │ │ruoyi- │ │book- │ │ruoyi- │ │framework │ │system │ │system │ │generator │ └─────┬─────┘ └─────┬──────┘ └────┬─────┘ └──────────┘ │ │ │ └─────────────┴──────────────┘ │ ▼ ┌────────────┐ │ruoyi-common│ └────────────┘ ``` ## 前后端交互分析设计 ### 1. API 接口清单 **系统管理 API**（20+ 接口）： - `/system/user/*` - 用户管理 - `/system/role/*` - 角色管理 - `/system/menu/*` - 菜单管理 - `/system/dept/*` - 部门管理 - `/system/dict/*` - 字典管理 - ... **业务 API**（30+ 接口）： - `/booksystem/account/*` - 账户管理 - `/booksystem/book/*` - 账本管理 - `/booksystem/statistics/*` - 统计分析 - `/stocksystem/stocks/*` - 股票管理 - ... ### 2. 统一响应格式 ```json // 成功响应 { "code": 200, "msg": "操作成功", "data": { ... } } // 分页响应 { "code": 200, "msg": "查询成功", "total": 100, "rows": [ ... ] } // 错误响应 { "code": 500, "msg": "错误信息" } ``` ### 3. 错误处理机制 ``` 错误处理链路： ┌─────────────────────────────────────────┐ │ 前端错误处理 │ ├─────────────────────────────────────────┤ │ • 401 → 登录过期，弹出重新登录提示 │ │ • 500 → 弹出错误消息 │ │ • 其他 → Notification.error │ │ • 网络错误 → 提示连接异常 │ │ • 超时 → 提示请求超时 │ └─────────────────────────────────────────┘ ↑ │ ┌─────────────────────────────────────────┐ │ 后端错误处理 │ ├─────────────────────────────────────────┤ │ • GlobalExceptionHandler │ │ • ServiceException │ │ • @Log 记录操作日志 │ │ • 业务异常 vs 系统异常 │ └─────────────────────────────────────────┘ ``` ## 数据库分析设计 ### 1. 表结构分类 **系统管理表**（sys_*）： - `sys_user` - 用户表 - `sys_role` - 角色表 - `sys_menu` - 菜单表 - `sys_dept` - 部门表 - `sys_dict_*` - 字典表 - ... **业务表**（book_*、account_*）： - `account` - 交易账户 - `book` - 账本 - `statistics` - 统计数据 - ... **股票表**（stock_*）： - `stocks` - 股票信息 - `trends` - 趋势数据 - `stockindex` - 指数信息 - ... ### 2. 分析维度 - 表关系和外键约束 - 索引使用情况 - 冗余字段识别 - 查询性能瓶颈 - 审计字段（create_time、update_time） ## 输出文档结构 ### 文档 1：architecture-overview.md - 系统总体架构图 - 技术栈总结 - 模块划分 - 关键设计模式 ### 文档 2：frontend-architecture.md - 组件树分析 - 路由与权限流 - 状态管理分析 - API 调用层 - 存在的问题 ### 文档 3：backend-architecture.md - 分层架构分析 - 安全配置 - AOP 切面 - 模块依赖 - 存在的问题 ### 文档 4：api-interaction-spec.md - API 接口清单 - 请求/响应规范 - 错误处理机制 - 分页/排序/过滤 - 优化建议 ### 文档 5：database-structure.md - 表结构清单 - 索引分析 - 查询模式 - 性能问题 - 优化建议 ### 文档 6：optimization-suggestions.md - 10+ 条优化建议 - 每条包含： - 问题描述 - 影响范围 - 推荐方案 - 实施优先级 ## 质量保证 ### 文档完整性检查 - [ ] 6 份文档全部输出 - [ ] 每份文档包含架构图 - [ ] 问题清单不少于 10 条 ### 准确性验证 - [ ] 架构图与实际代码对照 - [ ] API 接口清单完整 - [ ] 表结构与实际数据库一致 ### 可执行性 - [ ] 每条建议包含实施步骤 - [ ] 优先级明确 - [ ] 风险可控 ## 风险与缓解 | 风险 | 影响 | 缓解措施 | |------|------|---------| | 分析遗漏 | 后续重构缺少依据 | 建立检查清单，逐模块验证 | | 文档冗长 | 可读性差 | 控制篇幅，结构化组织 | | 建议不可操作 | 无法指导重构 | 包含具体实施步骤 | ## 后续步骤 完成架构梳理后，将依次执行： 1. refactor-frontend-modernization（前端重构） 2. refactor-backend-api（后端 API 规范化） 3. refactor-database-optimization（数据库优化） 4. refactor-coding-standards（编码规范） 本架构梳理文档将为后续所有重构提供技术指引。