audio/dashboard
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新 wiki

Browse Source
This commit is contained in:
eafonyang
2026-07-17 17:17:22 +08:00
parent 1da6d72544
commit d292c23dc0
159 changed files with 2918 additions and 2735 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.qoder/repowiki/zh/content/系统架构/前端架构.md
+81 -81
View File
@@ -2,29 +2,29 @@
<cite>
**本文引用的文件**
- [frontend_v2/package.json](file://frontend_v2/package.json)
- [frontend_v2/vite.config.ts](file://frontend_v2/vite.config.ts)
- [frontend_v2/src/main.ts](file://frontend_v2/src/main.ts)
- [frontend_v2/src/App.vue](file://frontend_v2/src/App.vue)
- [frontend_v2/src/router/index.ts](file://frontend_v2/src/router/index.ts)
- [frontend_v2/src/layouts/base-layout/index.vue](file://frontend_v2/src/layouts/base-layout/index.vue)
- [frontend_v2/src/service/api/index.ts](file://frontend_v2/src/service/api/index.ts)
- [frontend_v2/src/service/request/index.ts](file://frontend_v2/src/service/request/index.ts)
- [frontend_v2/src/store/index.ts](file://frontend_v2/src/store/index.ts)
- [frontend_v2/src/hooks/common/router.ts](file://frontend_v2/src/hooks/common/router.ts)
- [frontend_v2/packages/alova/package.json](file://frontend_v2/packages/alova/package.json)
- [frontend_v2/packages/axios/package.json](file://frontend_v2/packages/axios/package.json)
- [frontend_v2/packages/color/package.json](file://frontend_v2/packages/color/package.json)
- [frontend_v2/packages/hooks/package.json](file://frontend_v2/packages/hooks/package.json)
- [frontend_v2/packages/materials/package.json](file://frontend_v2/packages/materials/package.json)
- [frontend_v2/packages/scripts/package.json](file://frontend_v2/packages/scripts/package.json)
- [frontend_v2/packages/uno-preset/package.json](file://frontend_v2/packages/uno-preset/package.json)
- [frontend_v2/packages/utils/package.json](file://frontend_v2/packages/utils/package.json)
- [frontend/package.json](file://frontend/package.json)
- [frontend/vite.config.ts](file://frontend/vite.config.ts)
- [frontend/src/main.ts](file://frontend/src/main.ts)
- [frontend/src/App.vue](file://frontend/src/App.vue)
- [frontend/src/router/index.ts](file://frontend/src/router/index.ts)
- [frontend/src/layouts/base-layout/index.vue](file://frontend/src/layouts/base-layout/index.vue)
- [frontend/src/service/api/index.ts](file://frontend/src/service/api/index.ts)
- [frontend/src/service/request/index.ts](file://frontend/src/service/request/index.ts)
- [frontend/src/store/index.ts](file://frontend/src/store/index.ts)
- [frontend/src/hooks/common/router.ts](file://frontend/src/hooks/common/router.ts)
- [frontend/packages/alova/package.json](file://frontend/packages/alova/package.json)
- [frontend/packages/axios/package.json](file://frontend/packages/axios/package.json)
- [frontend/packages/color/package.json](file://frontend/packages/color/package.json)
- [frontend/packages/hooks/package.json](file://frontend/packages/hooks/package.json)
- [frontend/packages/materials/package.json](file://frontend/packages/materials/package.json)
- [frontend/packages/scripts/package.json](file://frontend/packages/scripts/package.json)
- [frontend/packages/uno-preset/package.json](file://frontend/packages/uno-preset/package.json)
- [frontend/packages/utils/package.json](file://frontend/packages/utils/package.json)
</cite>
## 更新摘要
**所做更改**
- 完全重写前端架构，从旧的Vue 2实现迁移到新的Vue 3 + TypeScript架构
- 完全重写前端架构，从旧的Vue 2实现迁移到新的Soybean Admin框架
- 引入monorepo结构，包含8个核心包：alova、axios、color、hooks、materials、scripts、uno-preset、utils
- 采用现代化的组件组织方式和开发工作流
- 更新状态管理策略，使用Pinia替代Vuex
@@ -48,14 +48,14 @@
14. [结论](#结论)
## 引言
本文件详细阐述全新重构的Vue 3 + TypeScript单页应用的前端架构设计与实现。该架构采用现代化的monorepo结构，集成了Alova HTTP客户端、UnoCSS原子化样式、Pinia状态管理等先进技术栈。重点覆盖Composition API最佳实践、TypeScript类型安全、组件层次结构、路由配置与鉴权策略、状态管理、构建优化、前后端交互模式以及完整的开发工作流。
本文件详细阐述全新重构的基于Soybean Admin的前端架构设计与实现。该架构采用现代化的monorepo结构，集成了Alova HTTP客户端、UnoCSS原子化样式、Pinia状态管理等先进技术栈。重点覆盖Composition API最佳实践、TypeScript类型安全、组件层次结构、路由配置与鉴权策略、状态管理、构建优化、前后端交互模式以及完整的开发工作流。
## 项目结构
新架构采用清晰的monorepo组织结构，主应用位于frontend_v2目录，核心功能模块以packages形式独立管理：
新架构采用清晰的monorepo组织结构，主应用位于frontend目录，核心功能模块以packages形式独立管理：
```mermaid
graph TB
subgraph "主应用 frontend_v2"
subgraph "主应用 frontend"
A["src/<br/>源代码"] --> B["components/<br/>业务组件"]
A --> C["layouts/<br/>布局组件"]
A --> D["service/<br/>API服务层"]
@@ -86,13 +86,13 @@ A -.-> Q
```
**图表来源**
- [frontend_v2/src/main.ts:1-50](file://frontend_v2/src/main.ts#L1-L50)
- [frontend_v2/packages/alova/package.json:1-30](file://frontend_v2/packages/alova/package.json#L1-L30)
- [frontend_v2/packages/axios/package.json:1-30](file://frontend_v2/packages/axios/package.json#L1-L30)
- [frontend/src/main.ts:1-50](file://frontend/src/main.ts#L1-L50)
- [frontend/packages/alova/package.json:1-30](file://frontend/packages/alova/package.json#L1-L30)
- [frontend/packages/axios/package.json:1-30](file://frontend/packages/axios/package.json#L1-L30)
**章节来源**
- [frontend_v2/package.json:1-100](file://frontend_v2/package.json#L1-L100)
- [frontend_v2/pnpm-workspace.yaml:1-20](file://frontend_v2/pnpm-workspace.yaml#L1-L20)
- [frontend/package.json:1-100](file://frontend/package.json#L1-L100)
- [frontend/pnpm-workspace.yaml:1-20](file://frontend/pnpm-workspace.yaml#L1-L20)
## Monorepo架构
新架构采用pnpm workspace管理的monorepo结构，将可复用的功能模块拆分为独立的package：
@@ -123,19 +123,19 @@ scripts["scripts包"] --> main
```
**图表来源**
- [frontend_v2/packages/alova/package.json:1-30](file://frontend_v2/packages/alova/package.json#L1-L30)
- [frontend_v2/packages/hooks/package.json:1-30](file://frontend_v2/packages/hooks/package.json#L1-L30)
- [frontend_v2/packages/materials/package.json:1-30](file://frontend_v2/packages/materials/package.json#L1-L30)
- [frontend/packages/alova/package.json:1-30](file://frontend/packages/alova/package.json#L1-L30)
- [frontend/packages/hooks/package.json:1-30](file://frontend/packages/hooks/package.json#L1-L30)
- [frontend/packages/materials/package.json:1-30](file://frontend/packages/materials/package.json#L1-L30)
**章节来源**
- [frontend_v2/packages/alova/package.json:1-30](file://frontend_v2/packages/alova/package.json#L1-L30)
- [frontend_v2/packages/axios/package.json:1-30](file://frontend_v2/packages/axios/package.json#L1-L30)
- [frontend_v2/packages/color/package.json:1-30](file://frontend_v2/packages/color/package.json#L1-L30)
- [frontend_v2/packages/hooks/package.json:1-30](file://frontend_v2/packages/hooks/package.json#L1-L30)
- [frontend_v2/packages/materials/package.json:1-30](file://frontend_v2/packages/materials/package.json#L1-L30)
- [frontend_v2/packages/scripts/package.json:1-30](file://frontend_v2/packages/scripts/package.json#L1-L30)
- [frontend_v2/packages/uno-preset/package.json:1-30](file://frontend_v2/packages/uno-preset/package.json#L1-L30)
- [frontend_v2/packages/utils/package.json:1-30](file://frontend_v2/packages/utils/package.json#L1-L30)
- [frontend/packages/alova/package.json:1-30](file://frontend/packages/alova/package.json#L1-L30)
- [frontend/packages/axios/package.json:1-30](file://frontend/packages/axios/package.json#L1-L30)
- [frontend/packages/color/package.json:1-30](file://frontend/packages/color/package.json#L1-L30)
- [frontend/packages/hooks/package.json:1-30](file://frontend/packages/hooks/package.json#L1-L30)
- [frontend/packages/materials/package.json:1-30](file://frontend/packages/materials/package.json#L1-L30)
- [frontend/packages/scripts/package.json:1-30](file://frontend/packages/scripts/package.json#L1-L30)
- [frontend/packages/uno-preset/package.json:1-30](file://frontend/packages/uno-preset/package.json#L1-L30)
- [frontend/packages/utils/package.json:1-30](file://frontend/packages/utils/package.json#L1-L30)
## 核心架构设计
新架构采用分层设计原则，清晰分离关注点，提升代码可维护性和可测试性：
@@ -157,9 +157,9 @@ scripts["scripts包"] --> main
- **代码质量**: ESLint + Prettier + TypeScript严格模式
**章节来源**
- [frontend_v2/src/main.ts:1-50](file://frontend_v2/src/main.ts#L1-L50)
- [frontend_v2/vite.config.ts:1-100](file://frontend_v2/vite.config.ts#L1-L100)
- [frontend_v2/tsconfig.json:1-50](file://frontend_v2/tsconfig.json#L1-L50)
- [frontend/src/main.ts:1-50](file://frontend/src/main.ts#L1-L50)
- [frontend/vite.config.ts:1-100](file://frontend/vite.config.ts#L1-L100)
- [frontend/tsconfig.json:1-50](file://frontend/tsconfig.json#L1-L50)
## 组件体系
新架构采用三层组件分类体系，确保组件的可复用性和可维护性：
@@ -185,13 +185,13 @@ E --> F["UI组件<br/>UI Components"]
```
**图表来源**
- [frontend_v2/src/components/common/app-provider.vue:1-50](file://frontend_v2/src/components/common/app-provider.vue#L1-L50)
- [frontend_v2/src/components/custom/button-icon.vue:1-50](file://frontend_v2/src/components/custom/button-icon.vue#L1-L50)
- [frontend/src/components/common/app-provider.vue:1-50](file://frontend/src/components/common/app-provider.vue#L1-L50)
- [frontend/src/components/custom/button-icon.vue:1-50](file://frontend/src/components/custom/button-icon.vue#L1-L50)
**章节来源**
- [frontend_v2/src/components/common/app-provider.vue:1-50](file://frontend_v2/src/components/common/app-provider.vue#L1-L50)
- [frontend_v2/src/components/custom/button-icon.vue:1-50](file://frontend_v2/src/components/custom/button-icon.vue#L1-L50)
- [frontend_v2/src/components/advanced/table-column-setting.vue:1-50](file://frontend_v2/src/components/advanced/table-column-setting.vue#L1-L50)
- [frontend/src/components/common/app-provider.vue:1-50](file://frontend/src/components/common/app-provider.vue#L1-L50)
- [frontend/src/components/custom/button-icon.vue:1-50](file://frontend/src/components/custom/button-icon.vue#L1-L50)
- [frontend/src/components/advanced/table-column-setting.vue:1-50](file://frontend/src/components/advanced/table-column-setting.vue#L1-L50)
## 状态管理
新架构采用Pinia进行状态管理，结合TypeScript提供完整的类型支持：
@@ -224,14 +224,14 @@ C->>C : 重新渲染
```
**图表来源**
- [frontend_v2/src/store/modules/auth/index.ts:1-100](file://frontend_v2/src/store/modules/auth/index.ts#L1-L100)
- [frontend_v2/src/store/plugins/index.ts:1-50](file://frontend_v2/src/store/plugins/index.ts#L1-L50)
- [frontend/src/store/modules/auth/index.ts:1-100](file://frontend/src/store/modules/auth/index.ts#L1-L100)
- [frontend/src/store/plugins/index.ts:1-50](file://frontend/src/store/plugins/index.ts#L1-L50)
**章节来源**
- [frontend_v2/src/store/index.ts:1-50](file://frontend_v2/src/store/index.ts#L1-L50)
- [frontend_v2/src/store/modules/app/index.ts:1-100](file://frontend_v2/src/store/modules/app/index.ts#L1-L100)
- [frontend_v2/src/store/modules/auth/index.ts:1-100](file://frontend_v2/src/store/modules/auth/index.ts#L1-L100)
- [frontend_v2/src/store/plugins/index.ts:1-50](file://frontend_v2/src/store/plugins/index.ts#L1-L50)
- [frontend/src/store/index.ts:1-50](file://frontend/src/store/index.ts#L1-L50)
- [frontend/src/store/modules/app/index.ts:1-100](file://frontend/src/store/modules/app/index.ts#L1-L100)
- [frontend/src/store/modules/auth/index.ts:1-100](file://frontend/src/store/modules/auth/index.ts#L1-L100)
- [frontend/src/store/plugins/index.ts:1-50](file://frontend/src/store/plugins/index.ts#L1-L50)
## API请求层
新架构提供双HTTP客户端方案，支持Alova和Axios两种选择：
@@ -261,14 +261,14 @@ H --> I["返回结果"]
```
**图表来源**
- [frontend_v2/src/service/request/index.ts:1-100](file://frontend_v2/src/service/request/index.ts#L1-L100)
- [frontend_v2/src/service/request/shared.ts:1-50](file://frontend_v2/src/service/request/shared.ts#L1-L50)
- [frontend/src/service/request/index.ts:1-100](file://frontend/src/service/request/index.ts#L1-L100)
- [frontend/src/service/request/shared.ts:1-50](file://frontend/src/service/request/shared.ts#L1-L50)
**章节来源**
- [frontend_v2/src/service/api/index.ts:1-50](file://frontend_v2/src/service/api/index.ts#L1-L50)
- [frontend_v2/src/service/request/index.ts:1-100](file://frontend_v2/src/service/request/index.ts#L1-L100)
- [frontend_v2/src/service/request/shared.ts:1-50](file://frontend_v2/src/service/request/shared.ts#L1-L50)
- [frontend_v2/src/service/request/type.ts:1-50](file://frontend_v2/src/service/request/type.ts#L1-L50)
- [frontend/src/service/api/index.ts:1-50](file://frontend/src/service/api/index.ts#L1-L50)
- [frontend/src/service/request/index.ts:1-100](file://frontend/src/service/request/index.ts#L1-L100)
- [frontend/src/service/request/shared.ts:1-50](file://frontend/src/service/request/shared.ts#L1-L50)
- [frontend/src/service/request/type.ts:1-50](file://frontend/src/service/request/type.ts#L1-L50)
## 路由与导航
新架构采用Vue Router 4，支持动态路由、路由守卫和懒加载：
@@ -309,14 +309,14 @@ end
```
**图表来源**
- [frontend_v2/src/router/guard/index.ts:1-100](file://frontend_v2/src/router/guard/index.ts#L1-L100)
- [frontend_v2/src/router/guard/route.ts:1-50](file://frontend_v2/src/router/guard/route.ts#L1-L50)
- [frontend/src/router/guard/index.ts:1-100](file://frontend/src/router/guard/index.ts#L1-L100)
- [frontend/src/router/guard/route.ts:1-50](file://frontend/src/router/guard/route.ts#L1-L50)
**章节来源**
- [frontend_v2/src/router/index.ts:1-100](file://frontend_v2/src/router/index.ts#L1-L100)
- [frontend_v2/src/router/guard/index.ts:1-100](file://frontend_v2/src/router/guard/index.ts#L1-L100)
- [frontend_v2/src/router/guard/route.ts:1-50](file://frontend_v2/src/router/guard/route.ts#L1-L50)
- [frontend_v2/src/router/guard/title.ts:1-30](file://frontend_v2/src/router/guard/title.ts#L1-L30)
- [frontend/src/router/index.ts:1-100](file://frontend/src/router/index.ts#L1-L100)
- [frontend/src/router/guard/index.ts:1-100](file://frontend/src/router/guard/index.ts#L1-L100)
- [frontend/src/router/guard/route.ts:1-50](file://frontend/src/router/guard/route.ts#L1-L50)
- [frontend/src/router/guard/title.ts:1-30](file://frontend/src/router/guard/title.ts#L1-L30)
## 主题与样式系统
新架构采用现代化的主题系统，支持深色模式、主题色定制和响应式设计：
@@ -347,15 +347,15 @@ F --> G["浏览器本地存储"]
```
**图表来源**
- [frontend_v2/src/theme/settings.ts:1-50](file://frontend_v2/src/theme/settings.ts#L1-L50)
- [frontend_v2/src/theme/vars.ts:1-50](file://frontend_v2/src/theme/vars.ts#L1-L50)
- [frontend_v2/uno.config.ts:1-100](file://frontend_v2/uno.config.ts#L1-L100)
- [frontend/src/theme/settings.ts:1-50](file://frontend/src/theme/settings.ts#L1-L50)
- [frontend/src/theme/vars.ts:1-50](file://frontend/src/theme/vars.ts#L1-L50)
- [frontend/uno.config.ts:1-100](file://frontend/uno.config.ts#L1-L100)
**章节来源**
- [frontend_v2/src/theme/settings.ts:1-50](file://frontend_v2/src/theme/settings.ts#L1-L50)
- [frontend_v2/src/theme/vars.ts:1-50](file://frontend_v2/src/theme/vars.ts#L1-L50)
- [frontend_v2/uno.config.ts:1-100](file://frontend_v2/uno.config.ts#L1-L100)
- [frontend_v2/src/styles/css/global.css:1-50](file://frontend_v2/src/styles/css/global.css#L1-L50)
- [frontend/src/theme/settings.ts:1-50](file://frontend/src/theme/settings.ts#L1-L50)
- [frontend/src/theme/vars.ts:1-50](file://frontend/src/theme/vars.ts#L1-L50)
- [frontend/uno.config.ts:1-100](file://frontend/uno.config.ts#L1-L100)
- [frontend/src/styles/css/global.css:1-50](file://frontend/src/styles/css/global.css#L1-L50)
## 构建与部署
新架构采用Vite 5作为构建工具，配合pnpm workspace实现高效的开发和构建流程：
@@ -372,9 +372,9 @@ F --> G["浏览器本地存储"]
- 环境变量管理
**章节来源**
- [frontend_v2/vite.config.ts:1-150](file://frontend_v2/vite.config.ts#L1-L150)
- [frontend_v2/Dockerfile:1-50](file://frontend_v2/Dockerfile#L1-L50)
- [frontend_v2/nginx.conf:1-50](file://frontend_v2/nginx.conf#L1-L50)
- [frontend/vite.config.ts:1-150](file://frontend/vite.config.ts#L1-L150)
- [frontend/Dockerfile:1-50](file://frontend/Dockerfile#L1-L50)
- [frontend/nginx.conf:1-50](file://frontend/nginx.conf#L1-L50)
## 性能优化
新架构在多个层面实施性能优化策略：
@@ -392,8 +392,8 @@ F --> G["浏览器本地存储"]
- **首屏优化**: 关键路径代码内联、预加载重要资源
**章节来源**
- [frontend_v2/vite.config.ts:80-150](file://frontend_v2/vite.config.ts#L80-L150)
- [frontend_v2/src/router/elegant/transform.ts:1-50](file://frontend_v2/src/router/elegant/transform.ts#L1-L50)
- [frontend/vite.config.ts:80-150](file://frontend/vite.config.ts#L80-L150)
- [frontend/src/router/elegant/transform.ts:1-50](file://frontend/src/router/elegant/transform.ts#L1-L50)
## 开发工作流
新架构提供完整的现代化开发工作流：
@@ -412,8 +412,8 @@ F --> G["浏览器本地存储"]
- **类型检查**: `pnpm typecheck`
**章节来源**
- [frontend_v2/package.json:1-100](file://frontend_v2/package.json#L1-L100)
- [frontend_v2/eslint.config.js:1-50](file://frontend_v2/eslint.config.js#L1-L50)
- [frontend/package.json:1-100](file://frontend/package.json#L1-L100)
- [frontend/eslint.config.js:1-50](file://frontend/eslint.config.js#L1-L50)
## 故障排查指南
新架构提供了完善的调试和故障排查机制：
@@ -431,8 +431,8 @@ F --> G["浏览器本地存储"]
- **错误监控**: 前端错误收集和上报
**章节来源**
- [frontend_v2/src/plugins/loading.ts:1-50](file://frontend_v2/src/plugins/loading.ts#L1-L50)
- [frontend_v2/src/plugins/nprogress.ts:1-30](file://frontend_v2/src/plugins/nprogress.ts#L1-L30)
- [frontend/src/plugins/loading.ts:1-50](file://frontend/src/plugins/loading.ts#L1-L50)
- [frontend/src/plugins/nprogress.ts:1-30](file://frontend/src/plugins/nprogress.ts#L1-L30)
## 结论
全新的Vue 3 + TypeScript前端架构通过monorepo结构、现代化技术栈和完善的开发工作流，显著提升了项目的可维护性、可扩展性和开发效率。新架构不仅解决了旧版本的痛点，还为未来的功能扩展和技术演进奠定了坚实基础。建议团队逐步迁移现有功能到新架构，充分利用TypeScript的类型安全和现代JavaScript生态的优势。
全新的基于Soybean Admin的前端架构通过monorepo结构、现代化技术栈和完善的开发工作流，显著提升了项目的可维护性、可扩展性和开发效率。新架构不仅解决了旧版本的痛点，还为未来的功能扩展和技术演进奠定了坚实基础。建议团队逐步迁移现有功能到新架构，充分利用TypeScript的类型安全和现代JavaScript生态的优势。