当前仓库中存在两个前端:
rsf-admin:现网旧前端,技术栈为 React + react-admin + MUIrsf-design:新前端,技术栈为 Vue 3 + Art Design Pro + Element Plus后端为 rsf-server,本次设计明确约束如下:
rsf-design 需要直接适配当前后端真实接口与数据结构rsf-admin 在第一阶段继续保留为旧入口并行运行第一阶段不要求 rsf-design 一次性覆盖 rsf-admin 的全部业务页面,而是先真实接管运行骨架,使其成为一个可以独立登录和动态装配的可用新入口。
第一阶段目标能力如下:
第一阶段不包含以下内容:
rsf-admin 嵌回 rsf-designrsf-design 模板默认登录接口、用户接口、菜单接口rsf-server 接口、权限模型、菜单返回格式rsf-admin 当前直接依赖以下后端接口和约定:
/login/auth/menu/auth/user/{resource}/page/{resource}/save/{resource}/update/{resource}/remove/*其关键特征不是“后端返回前端路由路径”,而是“后端菜单叶子节点返回资源标识”。旧前端通过 node.component 这样的标识,例如 userLogin、outBound、stockTransfer,再在 rsf-admin/src/page/ResourceContent.js 中映射到具体 React 页面实现。
rsf-design 作为 Art Design Pro 模板,当前默认假设:
/api/auth/login/api/user/info/api/v3/system/menus/simplecomponent 字段可直接映射到 src/views/** 下的 Vue 页面路径这套默认模型与当前后端真实协议并不一致,因此不能通过简单改 baseURL 或改环境变量完成替代。
第一阶段采用“新前端直接适配旧后端真实协议”的方式推进:
rsf-design 的第一阶段运行链路收敛为一条正式主链:
rsf-design 登录/login/auth/user/auth/menursf-design 第一阶段只发布已经真实接入的新能力:
未迁移业务页不出现在 rsf-design 的可见菜单和可注册路由中。
rsf-admin 保留为旧入口rsf-design 提供新入口rsf-design 的发布范围rsf-design 登录页必须改为提交当前后端真实字段,不再沿用模板示例字段和演示账号逻辑。
要求:
/loginrsf-server 当前真实需要的字段token、refreshToken 的假设命名,按真实返回为准用户信息接口统一使用 /auth/user。
该接口承担以下职责:
rolesbuttons 或当前真实权限字段v-roles 和 useAuth 必须直接消费真实用户信息,不再依赖模板示例数据。
菜单接口统一使用 /auth/menu。
后端返回的原始菜单树保持原样,不要求后端调整为 Vue 路由路径。
前端在唯一的菜单转换模块中完成:
meta 字段补齐第一阶段建议集中修改以下模块。
文件:
rsf-design/src/api/auth.js职责:
文件:
rsf-design/src/views/auth/login/index.vue职责:
文件:
rsf-design/src/store/modules/user.js职责:
建议新增文件:
rsf-design/src/router/adapters/backendMenuAdapter.js职责:
/auth/menu 原始返回不单独拆页面注册模块,避免额外抽象层。
文件:
rsf-design/src/router/core/MenuProcessor.jsrsf-design/src/router/core/ComponentLoader.jsrsf-design/src/router/guards/beforeEach.js职责:
文件:
rsf-design/src/hooks/core/useAuth.jsrsf-design/src/directives/core/auth.jsrsf-design/src/directives/core/roles.js职责:
第一阶段采用“严格发布”策略。
规则如下:
这样做的目的不是兼容,而是保证 rsf-design 发布出来的入口是闭合可用的真实子集。
第一阶段首页由 rsf-design 独立承担,不沿用 rsf-admin 的 react-admin Dashboard 实现。
要求:
这是本次替代的核心差异。
应对:
component 是 src/views/** 路径应对:
rsf-design 默认认证相关接口应对:
应对:
第一阶段完成后,至少满足以下条件:
rsf-design 成功登录rsf-design 可基于 /auth/menu 完成动态路由注册v-auth、useAuth、v-roles 可正确控制页面按钮显示rsf-admin 旧入口仍保持可用第一阶段完成后,后续迁移以“模块批次”推进。
每个业务模块迁移时都遵循相同流程:
rsf-design 中实现对应 Vue 页面这可以保证替代过程始终是增量可验证的,而不是一次性大爆炸切换。
rsf-design 完全替代 rsf-admin 的正确第一步,不是“先把所有页面复制过去”,而是先让新前端完整接住旧后端的登录、用户、菜单、权限与动态装配模型。
只要第一阶段把运行骨架接稳,后续业务页面迁移就会从“大重构”变成“按资源标识逐个迁入”的稳定增量工作。