5.7 KiB
5.7 KiB
项目架构文档
系统架构概述
yudao-ui-admin-vben 采用现代化的前端架构设计，基于 Vue3 + TypeScript + Monorepo 技术栈，提供可扩展、高性能的企业级管理系统解决方案。
整体架构
架构图
graph TB
A[用户界面] --> B[应用层]
B --> C[业务逻辑层]
C --> D[数据访问层]
D --> E[后端API]
F[构建工具] --> G[打包优化]
G --> H[部署发布]
I[开发工具] --> J[代码检查]
J --> K[测试验证]
技术栈分层
| 层级 | 技术栈 | 说明 |
|---|---|---|
| 表现层 | Vue3 + TypeScript | 用户界面渲染 |
| 应用层 | Vue Router + Pinia | 路由和状态管理 |
| 工具层 | Vite + ESLint | 构建和代码检查 |
| 基础设施 | Node.js + pnpm | 运行环境和包管理 |
Monorepo 架构设计
项目结构
yudao-ui-admin-vben/
├── apps/ # 应用目录
│ ├── web-antd/ # Ant Design 版本应用
│ ├── web-ele/ # Element Plus 版本应用
│ ├── web-naive/ # Naive UI 版本应用
│ └── backend-mock/ # 后端模拟服务
├── packages/ # 共享包目录
│ ├── @core/ # 核心功能包
│ ├── constants/ # 常量定义包
│ ├── effects/ # 副作用管理包
│ ├── icons/ # 图标库包
│ ├── locales/ # 国际化资源包
│ ├── stores/ # 状态管理包
│ ├── styles/ # 样式文件包
│ ├── types/ # 类型定义包
│ └── utils/ # 工具函数包
├── internal/ # 内部配置目录
│ ├── lint-configs/ # 代码规范配置
│ ├── tailwind-config/ # Tailwind 配置
│ ├── tsconfig/ # TypeScript 配置
│ └── vite-config/ # Vite 配置
└── scripts/ # 脚本工具目录
包依赖关系
graph LR
A[apps/web-antd] --> B[packages/@core]
A --> C[packages/stores]
A --> D[packages/utils]
B --> E[packages/types]
C --> E
D --> E
F[apps/web-ele] --> B
F --> C
F --> D
G[apps/web-naive] --> B
G --> C
G --> D
核心模块设计
1. 应用模块 (apps/)
功能特性
- 多主题支持: 同一套业务逻辑，不同 UI 表现
- 独立部署: 每个应用可独立构建部署
- 共享代码: 通过 packages 共享公共逻辑
技术实现
- Vue3 Composition API
- TypeScript 类型安全
- Vite 快速构建
- 热重载开发体验
2. 核心包模块 (packages/@core)
基础功能
- 基础组件封装
- 工具函数集合
- 类型定义扩展
- 配置管理
设计原则
- 单一职责原则
- 依赖倒置原则
- 接口隔离原则
- 开闭原则
3. 状态管理模块 (packages/stores)
状态分类
- 用户状态 (用户信息、权限)
- 应用状态 (主题、语言、布局)
- 业务状态 (页面数据、表单状态)
技术实现
- Pinia 状态管理
- 持久化存储
- 类型安全的状态访问
4. 工具模块 (packages/utils)
工具分类
- 数据处理工具
- 日期时间工具
- 表单验证工具
- 网络请求工具
数据流设计
单向数据流
用户操作 → 组件事件 → Action → Mutation → State → 组件更新
异步数据流
组件挂载 → 发起请求 → 加载状态 → 数据处理 → 更新状态 → 界面渲染
路由设计
路由结构
/ # 首页
/login # 登录页
/dashboard # 仪表板
/system # 系统管理
/system/user # 用户管理
/system/role # 角色管理
/system/menu # 菜单管理
路由守卫
- 登录状态验证
- 权限验证
- 路由拦截
- 页面标题设置
权限设计
RBAC 权限模型
- 用户 (User)
- 角色 (Role)
- 权限 (Permission)
- 菜单 (Menu)
权限控制级别
- 页面级权限
- 按钮级权限
- 数据级权限
- 功能级权限
构建部署架构
开发环境
- Vite 开发服务器
- 热重载支持
- Source Map 调试
生产环境
- Vite 生产构建
- 代码分割优化
- 资源压缩处理
- CDN 部署支持
部署策略
- 静态资源部署
- 多环境配置
- 版本控制
- 回滚机制
性能优化策略
构建优化
- 代码分割
- 树摇优化
- 懒加载
- 预加载
运行时优化
- 虚拟滚动
- 防抖节流
- 缓存策略
- 图片优化
安全架构
前端安全
- XSS 防护
- CSRF 防护
- 数据加密
- 输入验证
权限安全
- JWT 令牌
- 路由守卫
- API 权限验证
- 数据权限控制
扩展性设计
插件系统
- 组件插件化
- 功能模块化
- 配置可扩展
- 主题可定制
微前端支持
- 模块联邦
- 独立部署
- 技术栈无关
- 团队协作
监控运维
性能监控
- 页面加载时间
- 接口响应时间
- 错误监控
- 用户行为分析
日志系统
- 操作日志
- 错误日志
- 性能日志
- 安全日志
技术选型理由
Vue3 优势
- 更好的性能
- 更好的 TypeScript 支持
- 更小的包体积
- 更好的开发体验
Monorepo 优势
- 代码共享方便
- 版本管理统一
- 构建优化明显
- 团队协作高效
Vite 优势
- 极速的冷启动
- 快速的热更新
- 丰富的插件生态
- 优化的生产构建
架构演进规划
短期目标
- 完善现有功能
- 优化性能体验
- 丰富文档体系
长期目标
- 微前端架构支持
- 低代码平台集成
- AI 辅助开发
- 云原生部署