MiragenFlow/docs/miragenflow-front-migration.md

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 配置	不新增业务入口，符合当前产品边界
原型中的游客登录奖励和无动作按钮	改为真实登录、账户、任务和退出动作；未支持的操作不显示成功状态

验收路径

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

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