# 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
无。