61 lines
3.0 KiB
Markdown
61 lines
3.0 KiB
Markdown
|
# Wujie 微前端双栈并存接入 Spec
|
|||
|
|
|
|||
|
|
## Why
|
|||
|
|
现有系统前端（Element Plus）已稳定具备登录、菜单与权限管理能力，但后续业务模块计划采用 Ant Design Vue。需要通过微前端方式实现双栈并存，避免一次性迁移带来的回归风险，并支持业务模块按菜单集成展示。
|
|||
|
|
|
|||
|
|
## What Changes
|
|||
|
|
- 明确采用 Wujie 作为微前端方案（Host=Element Plus，SubApp=Ant Design Vue）。
|
|||
|
|
- 新增 `frontend-process` 子应用：提供 `AntD Demo` 页面与 `manifest.json`（路由、权限码、入口信息）。
|
|||
|
|
- 在 `front-system`（当前仓库 `frontend`）集成 Wujie：新增一个 Host 页面（`/process/antd-demo`）用于挂载子应用。
|
|||
|
|
- Host 开发代理：本地将 `/process/**` 代理到子应用 dev server，实现“同域路径”联调。
|
|||
|
|
- **BREAKING**：无（仅新增能力与页面）。
|
|||
|
|
|
|||
|
|
## Impact
|
|||
|
|
- Affected specs:
|
|||
|
|
- 微前端集成（Host + SubApp）
|
|||
|
|
- 路由与菜单展示
|
|||
|
|
- 本地联调与部署路径约定（同域 `/process/`）
|
|||
|
|
- Affected code:
|
|||
|
|
- Host：`frontend/src/main.ts`、`frontend/src/router/index.ts`、`frontend/vite.config.ts`、新增 `frontend/src/views/process/antd-demo.vue`
|
|||
|
|
- SubApp：新增 `frontend-process/**`
|
|||
|
|
- 文档基线：`系统前端框架及集成方案.md`（不在本变更中修改其内容，仅作为实现依据）
|
|||
|
|
|
|||
|
|
## ADDED Requirements
|
|||
|
|
|
|||
|
|
### Requirement: Wujie Host 集成
|
|||
|
|
系统 SHALL 在 Host（front-system）中集成 Wujie，并提供可通过路由访问的挂载页面，用于展示 `front-process` 子应用内容。
|
|||
|
|
|
|||
|
|
#### Scenario: 打开 AntD Demo（开发态）
|
|||
|
|
- **GIVEN** Host 与 SubApp 均在本地启动
|
|||
|
|
- **WHEN** 用户在 Host 中访问 `/process/antd-demo`
|
|||
|
|
- **THEN** Host 页面中出现 Wujie 容器并成功加载子应用入口 `/process/`
|
|||
|
|
- **AND** 子应用展示 Ant Design Vue 组件示例（按钮、表格等）
|
|||
|
|
|
|||
|
|
### Requirement: 子应用 Demo 页面
|
|||
|
|
系统 SHALL 提供 `frontend-process` 子应用，并包含一个可访问的 Demo 页面（`/process/antd-demo`）用于验证 Ant Design Vue 在微前端容器中正常渲染。
|
|||
|
|
|
|||
|
|
#### Scenario: 子应用独立运行（开发态）
|
|||
|
|
- **WHEN** 直接访问 `http://localhost:5174/process/antd-demo`（或等价本地地址）
|
|||
|
|
- **THEN** 能看到 “Ant Design Vue Demo（front-process）” 标题与示例组件
|
|||
|
|
|
|||
|
|
### Requirement: 本地同域联调代理
|
|||
|
|
系统 SHALL 在 Host Vite dev server 中提供 `/process/**` 的代理转发到子应用 dev server，以实现同域路径加载。
|
|||
|
|
|
|||
|
|
#### Scenario: Host 以同域路径加载子应用
|
|||
|
|
- **WHEN** Host 页面请求 `/process/` 及其静态资源
|
|||
|
|
- **THEN** 请求被代理到子应用 dev server（端口 5174）
|
|||
|
|
|
|||
|
|
### Requirement: 菜单可集成展示（Demo 级别）
|
|||
|
|
系统 SHALL 使 Demo 页面可在 Host 菜单体系中被访问（可先以静态路由方式呈现，后续再与后端动态菜单配置联动）。
|
|||
|
|
|
|||
|
|
#### Scenario: 菜单访问
|
|||
|
|
- **WHEN** 用户在 Host 菜单点击“AntD Demo”
|
|||
|
|
- **THEN** 跳转到 `/process/antd-demo` 并展示子应用内容
|
|||
|
|
|
|||
|
|
## MODIFIED Requirements
|
|||
|
|
无。
|
|||
|
|
|
|||
|
|
## REMOVED Requirements
|
|||
|
|
无。
|
|||
|
|
|