20 KiB

Raw Blame History Unescape Escape

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

comet_change	role	canonical_spec
refactor-architecture-analysis	technical-design	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. 统一响应格式

// 成功响应
{
  "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 接口清单完整
表结构与实际数据库一致

可执行性

每条建议包含实施步骤
优先级明确
风险可控

风险与缓解

风险	影响	缓解措施
分析遗漏	后续重构缺少依据	建立检查清单，逐模块验证
文档冗长	可读性差	控制篇幅，结构化组织
建议不可操作	无法指导重构	包含具体实施步骤

后续步骤

完成架构梳理后，将依次执行：

refactor-frontend-modernization（前端重构）
refactor-backend-api（后端 API 规范化）
refactor-database-optimization（数据库优化）
refactor-coding-standards（编码规范）

本架构梳理文档将为后续所有重构提供技术指引。

20 KiB Raw Blame History Unescape Escape

RuoYi-Vue 架构梳理技术设计

概述

分析方法论

分层递进式分析框架

前端架构分析设计

1. 组件结构分析

2. 路由与权限控制流

3. Vuex 状态管理分析

4. Axios API 调用层分析

后端架构分析设计

1. 分层架构分析

2. 安全配置分析

3. 模块依赖关系

前后端交互分析设计

1. API 接口清单

2. 统一响应格式

3. 错误处理机制

数据库分析设计

1. 表结构分类

2. 分析维度

输出文档结构

文档 1：architecture-overview.md

文档 2：frontend-architecture.md

文档 3：backend-architecture.md

文档 4：api-interaction-spec.md

文档 5：database-structure.md

文档 6：optimization-suggestions.md

质量保证

文档完整性检查

准确性验证

可执行性

风险与缓解

后续步骤

20 KiB

Raw Blame History Unescape Escape