# MiragenFlow-front 用户控制台迁移说明

## 结论

`/Users/qiu/Desktop/Task/MiragenFlow-front/` 是一个独立的 Vite 视觉原型，不是完整用户端：路由使用 hash，作品数据是本地静态数组，登录、通知、搜索和生成确认没有接入 API。迁移采用“视觉组件直接复用、业务状态沿用 MiragenFlow、未实现能力保留占位”的方式，避免把演示数据当作真实业务。

## 已迁移并接入

| 原型模块                                          | 迁移位置                                                         | 接入方式                                                                                                     |
| ------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| 深色工作台壳层、侧栏、移动导航                    | `web/src/user-console/components/layout/`                        | `UserLayout` 使用 React Router 路径，登录/注册和画布项目保留沉浸式页面；搜索框和模型广场入口已按产品边界移除 |
| 设计 token、Alimama 字体、按钮/输入/筛选/反馈组件 | `web/src/user-console/styles/`、`components/primitives/`         | token 作用域限定在 `.mf-console`，不覆盖现有 Tailwind/Ant Design 全局主题                                    |
| Hero 轮播、侧栏活动卡、画布/创作入口              | `web/src/user-console/components/content/HeroCarousel.tsx`       | 入口连接 `/canvas` 和 `/tools/image`，宣传图只承担视觉，不伪造服务状态                                       |
| 作品灵感瀑布流、作品卡片、同款弹窗                | `web/src/user-console/components/content/`、`pages/HomePage.tsx` | 数据改为读取真实本地资产库图片；空库展示真实空状态                                                           |
| 组件中心                                          | `web/src/user-console/pages/ComponentsPage.tsx`                  | 作为内部视觉参考 `/components`，不进入用户侧导航、不参与真实业务流程                                     |
| 登录、注册、验证、重置密码                        | `web/src/pages/auth/`                                            | 改用组件中心的 Field、Tabs、Button、Badge、Alert 视觉语言，认证策略仍读取真实 API                            |
| AI 图片/音频创作                                  | `web/src/pages/tools/`                                           | 改用组件中心的 Field、Select、Button、反馈和结果卡，任务提交/下载/资产保存仍走真实 API                       |
| 原型静态资源                                      | `web/src/assets/reference/`                                      | 复制到项目内并由迁移组件静态引用；不作为用户生成结果或 provider 数据                                         |

## 保留现有真实能力

- 图片/音频创作、任务队列、WebSocket、取消/重试和结果保存继续使用 `web/src/services/api/` 与现有 Zustand stores。
- 无限画布、画布项目、资产库、账户、套餐、设置和认证流程继续使用现有实现；新壳层只负责视觉和导航，不替换这些业务状态。
- `/api`、运行时配置、同源代理、主题持久化、国际化和 AuthGuard 不从原型项目复制。

## 延后或不直接迁移

| 原型内容                                                  | 处理                                                            |
| --------------------------------------------------------- | --------------------------------------------------------------- |
| hash 路由 `#/...`、独立 `App.tsx`、Vite/TS 配置           | 不迁移，避免破坏当前 BrowserRouter、`/api` 代理和 `/admin` base |
| 原型静态 `artworks.ts`                                    | 不作为真实列表使用；首页改读用户资产库                          |
| 模型广场、模型详情画廊、AI 学院、模型定制、社群、通知中心 | 不进入当前用户侧导航；待产品确认和真实能力接入后再配置          |
| 视频、动画、真实 3D、远程 provider 配置                   | 不新增业务入口，符合当前产品边界                                |
| 原型中的游客登录奖励和无动作按钮                          | 改为真实登录、账户、任务和退出动作；未支持的操作不显示成功状态  |

## 验收路径

```text
/                 新迁移首页：Hero + 作品灵感 + 资产空态
/tools/image      真实图片创作
/canvas           真实画布项目库
/assets           真实资产库
/login            组件中心风格的登录
/register         组件中心风格的注册与验证
/components       内部视觉组件验收页（不进入用户导航）
```

验收重点：壳层在窄窗口不横向溢出且不显示搜索框/模型广场；首页空资产不出现演示卡；AI 创作页可提交真实任务、下载并保存资产；登录/注册不被用户控制台壳层遮挡且关闭策略时不渲染 CAPTCHA/MFA/恢复码；画布项目仍使用现有全屏编辑器。