WholeProcessPlatform/.trae/specs/implement-wujie-microfrontend-demo/spec.md

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

无。