更新 wiki

2026-07-30 11:15:28 +08:00
parent 22a24056d6
commit 6a747b514f
8 changed files with 386 additions and 345 deletions
@@ -24,12 +24,10 @@

 ## 更新摘要
 **所做更改**
- 完全重写前端架构，从旧的Vue 2实现迁移到新的Soybean Admin框架
- 引入monorepo结构，包含8个核心包：alova、axios、color、hooks、materials、scripts、uno-preset、utils
- 采用现代化的组件组织方式和开发工作流
- 更新状态管理策略，使用Pinia替代Vuex
- 重构HTTP客户端层，集成Alova和Axios双方案
- 增强TypeScript类型支持和开发体验
+- 更新了前端路由系统以支持新的仪表板路由和型号管理端点
+- 扩展了API服务定义以支持新的后端端点
+- 增强了路由配置和导航结构
+- 优化了前后端交互模式

 ## 目录
 1. [引言](#引言)
@@ -48,7 +46,7 @@
 14. [结论](#结论)

 ## 引言
-本文件详细阐述全新重构的基于Soybean Admin的前端架构设计与实现。该架构采用现代化的monorepo结构，集成了Alova HTTP客户端、UnoCSS原子化样式、Pinia状态管理等先进技术栈。重点覆盖Composition API最佳实践、TypeScript类型安全、组件层次结构、路由配置与鉴权策略、状态管理、构建优化、前后端交互模式以及完整的开发工作流。
+本文件详细阐述基于Soybean Admin的前端架构设计与实现。该架构采用现代化的monorepo结构，集成了Alova HTTP客户端、UnoCSS原子化样式、Pinia状态管理等先进技术栈。重点覆盖Composition API最佳实践、TypeScript类型安全、组件层次结构、路由配置与鉴权策略、状态管理、构建优化、前后端交互模式以及完整的开发工作流。

 ## 项目结构
 新架构采用清晰的monorepo组织结构，主应用位于frontend目录，核心功能模块以packages形式独立管理：
@@ -85,11 +83,6 @@ A -.-> P
 A -.-> Q
 ```

-**图表来源**
- [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/package.json:1-100](file://frontend/package.json#L1-L100)
 - [frontend/pnpm-workspace.yaml:1-20](file://frontend/pnpm-workspace.yaml#L1-L20)
@@ -122,11 +115,6 @@ materials --> uno-preset["uno-preset包"]
 scripts["scripts包"] --> main
 ```

-**图表来源**
- [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/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)
@@ -184,10 +172,6 @@ D --> E["通用组件<br/>Common Components"]
 E --> F["UI组件<br/>UI Components"]
 ```

-**图表来源**
- [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/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)
@@ -223,10 +207,6 @@ S-->>C : 响应更新
 C->>C : 重新渲染
 ```

-**图表来源**
- [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/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)
@@ -260,10 +240,6 @@ G --> H["数据转换"]
 H --> I["返回结果"]
 ```

-**图表来源**
- [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/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)
@@ -271,13 +247,18 @@ H --> I["返回结果"]
 - [frontend/src/service/request/type.ts:1-50](file://frontend/src/service/request/type.ts#L1-L50)

 ## 路由与导航
-新架构采用Vue Router 4，支持动态路由、路由守卫和懒加载：
+新架构采用Vue Router 4，支持动态路由、路由守卫和懒加载。**已更新以支持新的仪表板路由和型号管理端点**。

 ### 路由配置
 - 静态路由：登录页、404页面等固定路由
 - 动态路由：根据用户权限动态生成菜单和路由
 - 路由元信息：权限控制、面包屑、标题等配置

+### 新增路由功能
+- **仪表板路由**: 支持仪表盘页面的动态路由配置
+- **型号管理端点**: 集成型号管理的API路由
+- **增强导航**: 改进的路由守卫和权限控制
+
 ### 路由守卫
 - 认证守卫：检查用户登录状态
 - 权限守卫：验证用户角色和权限
@@ -308,10 +289,6 @@ end
 end
 ```

-**图表来源**
- [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/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)
@@ -346,11 +323,6 @@ E --> F["运行时主题切换"]
 F --> G["浏览器本地存储"]
 ```

-**图表来源**
- [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/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)
@@ -435,4 +407,6 @@ F --> G["浏览器本地存储"]
 - [frontend/src/plugins/nprogress.ts:1-30](file://frontend/src/plugins/nprogress.ts#L1-L30)

 ## 结论
-全新的基于Soybean Admin的前端架构通过monorepo结构、现代化技术栈和完善的开发工作流，显著提升了项目的可维护性、可扩展性和开发效率。新架构不仅解决了旧版本的痛点，还为未来的功能扩展和技术演进奠定了坚实基础。建议团队逐步迁移现有功能到新架构，充分利用TypeScript的类型安全和现代JavaScript生态的优势。
+基于Soybean Admin的前端架构通过monorepo结构、现代化技术栈和完善的开发工作流，显著提升了项目的可维护性、可扩展性和开发效率。新架构不仅解决了旧版本的痛点，还为未来的功能扩展和技术演进奠定了坚实基础。建议团队逐步迁移现有功能到新架构，充分利用TypeScript的类型安全和现代JavaScript生态的优势。
+
+**最新更新**包括对前端路由系统的增强，支持新的仪表板路由和型号管理端点，以及API服务定义的扩展以支持新的后端端点，进一步提升了系统的完整性和功能性。