# MiragenFlow 本轮长期目标与目标提示词

> 目标状态：进行中（active）
>
> 当前目标线程：`01a033b1-abd1-7ed0-b6a3-c347551b2f78`
>
> 本文是本轮需求的综合落库版本。管理台业务细节仍以 `goal.md` 为准，前后台组件迁移细节仍以 `docs/miragenflow-tdesign-unification-goal.md` 为准；本文负责把两条线合并为一个可执行、可验收的长期目标。

> **规则优先级**：本文是本轮长期目标的唯一执行入口；其他旧计划中的示例若与本文冲突，以本文为准。特别是渠道当前只支持 OpenAI 图片端点，新增/编辑只能使用一个统一风格弹窗和三个可自由切换 Tab，不得恢复分步向导或“通用供应商”模板。

## 1. 一句话目标

把 MiragenFlow 做成一个真实可用的 AI 创作平台：用户端 `web/` 和管理端 `admin/` 使用同一锁定版本 `tdesign-react@1.15.1` 的基础组件与本地 Lineicons，但保留各自的视觉和业务边界；后台所有列表、图表、表单、弹窗和操作都能真实工作并持久化，页面只展示结构化 GUI 和中文业务语义，不出现非必要英文、原始 JSON、假按钮、白屏或无法关闭的弹窗。

## 2. 用户可见要求

### 2.1 组件、文字和图标

- 两端的 Button、Input、Select、Switch、Tabs、Modal、Drawer、Dropdown、Form、Table、Pagination、Message、Loading 等基础控件均来自同一锁定版本的 TDesign 或无业务依赖的共享包装层。
- 用户端保留现有自定义主题、品牌字体、首页、登录、创作、画布、资产、任务和移动端布局；不得把管理台模板直接复制到用户端。
- 管理端保留现有 TDesign 主题、工作台密度、权限、认证、菜单和 ECharts 视觉；不得因共享组件而合并路由、Redux/Zustand、权限、认证、API 或业务状态。
- 所有通用 UI 图标使用本地化 Lineicons 实际子集；图标按语义区分，默认 22-24px，点击区域至少 36-40px。禁止 CDN、WebFont、Lucide、全量图标目录和远程图标字体。
- 可见文案、表头、状态、动作、错误提示和字段名使用中文。只保留必要专有名词或缩写，如 TDesign、Lineicons、ECharts、OpenAI、MFA、API、ID；不得展示英文内部字段名、`action` 原值或类似 “along modern product IDs” 的占位文案。
- 下拉、选择、级联和搜索选择必须是项目主题化 GUI 组件，禁止原生 `<select>`；需要支持键盘选择、选中态、禁用/空态、外部点击关闭和 ESC 关闭。

### 2.2 管理台业务闭环

- 管理台 22 个可见页面保持 `/admin/...` 路由、分组菜单和权限边界。二级菜单只有一项时直接显示为一级入口，多项时才展开；折叠侧栏时完全隐藏，不保留窄图标栏。
- 所有新增、编辑、启停、调价、审批、调账和探活按钮必须有真实反馈、请求、错误处理和持久化结果。禁止按钮点击无反应，也禁止用展示用 mock 渠道冒充真实数据。
- 新增用户只填写用户名、邮箱、手机号和初始密码；套餐、可用模型、欢迎消息、状态和额度在创建后通过独立配置完成。
- 用户列表的表头为 `ID` 时，当前列表行只显示 `1、2、3...`，不加 `ID1`、`ID2`；模型、套餐、渠道等其他资源保留其真实业务标识。余额、可用金币、预留金币等结构化数据用字段、统计卡和图标展示，禁止输出对象或数组原始 JSON。
- 用户邮箱继续脱敏；操作人按可读身份展示，普通用户使用用户名，管理员直接使用邮箱，不写 `admin:admin@example.com` 之类的复杂前缀。
- 金币调整提供独立的增加/扣减图标入口。弹窗只要求正整数数量和原因，显示当前可用余额与预计余额；本地超级管理员可按现有规则自动审批，失败时保留申请并可在审批中心继续处理。

### 2.3 OpenAI 渠道配置

- 当前供应商方式只实现 OpenAI 图片端点，不新增没有真实逻辑的“通用”供应商模板。
- 新增和编辑使用同一风格的一个弹窗，包含可自由切换的三个 Tab：`基础信息`、`模型列表`、`模型映射`。不使用上一步/下一步，底部始终是 `保存` 和 `取消`。
- 基础信息至少包含图标/名称、请求地址和 API Key。地址给出 `https://example.com`、`https://example.com/v1` 等完整示例；API Key 去除首尾空白后只校验非空，不限制固定长度。
- 切换 Tab 不得丢失草稿；编辑必须回填已保存数据；取消、右上角、遮罩和 ESC 都能关闭；异步保存成功自动关闭，失败保留表单。
- `模型列表` 是独立列表。只有用户点击“拉取模型”按钮时才向 `{基础地址}/v1/models` 发起 GET；显示独立加载、实际路径、请求是否已发起、HTTP/网络/DNS/返回内容失败原因和模型数量。拉取结果只能作为候选项，由用户勾选后批量加入渠道模型列表，不能自动创建映射。
- `模型映射` 是可选配置。每行明确区分平台显示模型 ID 与供应商请求模型 ID；显示 ID 用于公开产品匹配，请求 ID 只用于上游请求。动态行必须使用稳定 React key，允许连续输入而不丢焦点。
- 开发环境允许用户明确测试的本机/私网地址，生产环境继续执行 SSRF、DNS 固定、协议和重定向保护；错误提示必须说明真正失败阶段，不能只写“探测未通过”。

### 2.4 图表、日志和响应式

- 系统概览、渠道健康、任务中心、实时指标和审计日志大板全部使用 ECharts；图表要有真实数据、加载、空态、错误态和深浅主题适配。
- 审计拆成“日志大板”和“详细日志”两个页面。大板展示正常 HTTP 200、4xx/5xx、业务错误等分类的数量、占比和趋势；详细日志按时间倒序显示时间、分类、中文行为、操作人、对象、标识、请求和来源。没有实际可执行动作时删除“操作”列，不保留空列。
- `action`、状态码、来源和对象要通过中文映射展示；日志不能原样暴露内部字段、密钥、哈希、Cookie、完整提示词或 JSON。
- 用户端画布、资产和 AI 创作页面不能出现黑色硬编码容器、下半屏塌陷、更新深度错误或白屏；画布根节点使用动态视口高度，图片尊重原始比例，标题、品牌和副标题左对齐。
- 手机端保持列表语义，使用紧凑表格和横向滚动，不把所有内容改成大卡片；页面和容器左右间距适当缩小。浅色/深色、桌面/390px 都不得溢出、遮挡或失去可操作性。游客不显示个人主页和退出登录入口。

## 3. 服务端和边界要求

- `web/`、`admin/`、`server/`、`packages/contracts/` 保持边界隔离；共享层只能放纯 UI、语义主题令牌、无状态图标和可访问性行为，不能依赖管理台 Redux、路由、权限、请求服务或业务字段。
- 管理台写操作必须经过真实 API、权限、版本校验、事务和幂等边界；余额、账本、充值、审批、任务结算/释放、支付和审计保持一致。
- 前台、公开 API、日志和导出不得暴露供应商名称、基础地址（Base URL）、API Key、供应商内部模型 ID、渠道顺序、Cookie、WebDAV 密文或完整敏感内容。
- 前端业务数据持久化按现有约束使用服务端或 `localforage`；不要用静态 JSON、假成功或刷新页面掩盖状态问题。
- 所有按路由、筛选或分页发起的异步读取必须绑定当前页面标识和请求代次；切换页面时取消或忽略旧响应，`rows`、加载态和错误态只能由当前请求更新，禁止旧页面数据串入新页面。

## 4. 长任务阶段

1. **P0 基线与方案确认**：读取 `AGENTS.md`、本文件、`goal.md`、`docs/miragenflow-tdesign-unification-goal.md`、架构图 JSON、两端入口/Provider/主题/路由/依赖，记录当前页面和视觉基线；先输出迁移盘点、共享边界、删除/保留清单和风险，再按本目标继续执行，不以方案文档代替代码验收。
2. **P1 组件统一**：固定 TDesign 版本，完善共享 Provider、主题桥接、Lineicons 和主题化下拉，迁移普通控件、反馈、弹层和表单。
3. **P2 管理业务**：逐页完成用户、渠道、模型、价格、计费、套餐、支付、审批、任务、存储、设置和审计的真实读写闭环；优先修复空白、原始 JSON、英文和无效按钮。
4. **P3 用户业务**：回归首页、认证、AI 图片/音频创作、画布、资产、任务、账户和移动端；修复动态视口、黑色容器、标题对齐和游客菜单。
5. **P4 清理与验收**：仅在 `web/` 引用清零、构建通过和浏览器回归通过后删除用户端 Ant Design、ProComponents、Radix 普通控件、reset 样式及遗留 `.ant-*` 依赖；管理端继续保持既有 TDesign 基线；同步文档并列出未验证项。

## 5. 不得做的事

- 不把管理端页面模板、权限或业务状态复制进用户端。
- 不一次性删除依赖后再靠错误信息猜迁移结果；不回滚用户已有改动。
- 不创建展示用 mock 渠道、静态假数据、无动作按钮或未接入供应商的假成功状态。
- 不用“兼容”分支掩盖字段丢失、弹窗无法关闭、编辑空白或 Tab 切换丢数据。
- 不在没有人工证据时宣称“全部完成”；文档完成、自动化测试通过和浏览器人工验收必须分别记录。

## 6. 验收门槛

至少执行并记录：

```bash
npm --prefix server run typecheck
npm --prefix server test
npm --prefix web run typecheck
npm --prefix web run build
npm --prefix admin run typecheck
npm --prefix admin run build
npm --prefix admin run lint
npm run build:all
git diff --check
```

启动 `npm run dev:all` 后，在不关闭用户已有浏览器标签的前提下验证同源 `/`、`/login`、`/tools/image`、`/canvas`、`/assets`、`/tasks`、`/account`、`/admin/` 及 22 个管理台页面；至少覆盖桌面、390px、浅色、深色和刷新场景。逐项检查：

- 无 Ant Design、ProComponents、Radix 普通控件、原生 `<select>`、CDN、WebFont、Lucide、`.ant-*` 和原始 JSON 展示。
- 所有弹窗/抽屉的保存、取消、右上角、遮罩、ESC、异步成功关闭、失败保留和编辑回填。
- 用户新增、金币增加/扣减、渠道三 Tab、手动拉取模型、勾选模型、可选映射、探活加载/失败/重试和真实持久化。
- 日志分类、中文行为、可读操作人、无空操作列、ECharts 图表、空态/错误态和深浅主题。
- 画布全高、资产和创作页面主题表面、标题左对齐、游客菜单、窄屏列表横向滚动和键盘操作。
- 快速切换管理台页面时旧列表请求不会覆盖当前列表，加载/错误状态不会被过期请求清除或改写。

## 7. 交付和进度记录

每完成一个可独立验收项，记录文件、符号、命令、API 或截图证据；百分比只按“已通过验收的交付项 / 全部交付项”计算。同步维护：

- `CHANGELOG.md`：只写用户可感知的版本级归纳。
- `docs/content/docs/progress/todo.mdx`：仍未实现的工作。
- `docs/content/docs/progress/pending-test.mdx`：已实现但尚未人工验证的工作。
- `goal.md`、`docs/miragenflow-tdesign-unification-goal.md`：范围或验收发生变化时同步更新。

## 7.1 目标设立信息

- **目标名称**：MiragenFlow 前后台真实可用与统一 TDesign
- **目标对象**：`/Users/qiu/Desktop/MiragenFlow`
- **平台目标状态**：`active`
- **平台目标线程**：`01a033b1-abd1-7ed0-b6a3-c347551b2f78`
- **设立方式**：将本文第 8 节完整提示词粘贴到长期目标入口；目标执行器必须沿阶段、验收门槛和证据规则持续推进，不能只回复分析结论。

## 8. 可直接复制的目标提示词

```text
你现在负责持续完成 /Users/qiu/Desktop/MiragenFlow 的“前后台真实可用与统一 TDesign”长期目标。请把任务当作一个必须跑到可验收状态的长任务，不要只做方案或静态展示。

先完整读取：
- /Users/qiu/Desktop/MiragenFlow/AGENTS.md
- /Users/qiu/Desktop/MiragenFlow/docs/miragenflow-long-task-goal-prompt.md
- /Users/qiu/Desktop/MiragenFlow/goal.md
- /Users/qiu/Desktop/MiragenFlow/docs/miragenflow-tdesign-unification-goal.md
- /Users/qiu/Desktop/MiragenFlow/develop.md
- /Users/qiu/Desktop/MiragenFlow/system-diagrams.md
- /Users/qiu/Desktop/MiragenFlow/admin-plan.md
- /Users/qiu/Desktop/MiragenFlow/summary.md
- web、admin、server、packages/contracts 的 package.json、入口、Provider、主题、路由、服务和关键业务页面

总体目标：web 与 admin 使用同一锁定版本 `tdesign-react@1.15.1` 和本地 Lineicons，但 web 保留自定义用户工作台视觉/画布/资产/任务体验，admin 保留现有主题/权限/认证/菜单/ECharts；两端继续独立构建、路由、状态、认证、API 和业务边界。

必须实现并逐项验收：
1. 所有基础控件、弹层、表单、下拉、提示和表格使用 TDesign 或无业务依赖的共享包装；禁止原生 select、CDN、WebFont、Lucide、全量图标目录和 .ant-* 遗留。
2. 页面文案、表头、状态、行为、错误和字段使用中文，仅保留必要专有名词/缩写（TDesign、Lineicons、ECharts、OpenAI、MFA、API、ID）。禁止原始 JSON、内部动作字段、敏感凭证和管理专属字段出现在用户可见页面。
3. 管理台所有按钮都必须有真实交互、加载、成功、空态、错误、403、409、422、503 和重试反馈。所有弹窗/抽屉支持保存、取消、右上角、遮罩、ESC，成功自动关闭，失败保留表单，编辑回填且 Tab 切换不丢数据。
4. 新增用户弹窗只填用户名、邮箱、手机号、初始密码；用户 ID 列只显示当前列表顺序的 1、2、3，不加 ID 前缀；其他资源 ID 保留真实值；余额和结构化字段用 GUI/图标展示。
5. 渠道当前只支持 OpenAI 图片端点。新增/编辑使用同一弹窗的“基础信息/模型列表/模型映射”三个可自由切换 Tab，不要上一步/下一步，也不要通用供应商模板。地址示例必须是 https://example.com 或 https://example.com/v1，API Key 只校验非空。切换 Tab 保留统一草稿，编辑回填。
6. 模型列表只能由按钮主动 GET {基础地址}/v1/models，显示独立加载、实际路径、是否发起、模型数量和中文 DNS/网络/HTTP/内容错误；结果必须由用户勾选加入渠道模型列表，不能自动创建映射。模型映射可选，严格区分平台显示模型 ID 与供应商请求模型 ID，动态行使用稳定 key。
7. 系统概览、渠道健康、任务中心、实时指标和审计日志大板全部使用 ECharts。审计拆成大板/详细日志，展示 200 与 4xx/5xx/业务错误分类、数量、占比、趋势；详细日志按时间倒序展示中文行为和可读操作人。没有真实动作就删除操作列。
8. Lineicons 必须本地化且按语义使用不同图标；管理台折叠侧栏完全隐藏，单项二级菜单直接提升为一级入口；手机端使用紧凑列表和横向滚动，不强制变成大卡片。
9. 用户端画布/资产/AI 创作页面必须无黑色硬编码容器、下半屏塌陷、白屏和更新深度错误；标题左对齐，动态视口全高，浅色/深色/390px 可用；游客不显示个人主页和退出登录。
10. 服务端保持真实 API、权限、事务、幂等和敏感数据隔离，不用 mock 或静态 JSON 冒充完成；不要回滚已有改动。
11. 所有管理台列表读取都要有请求代次或 `AbortController` 保护；响应、错误和 `finally` 回写前必须确认仍属于当前路由/筛选/分页，必须用延迟请求的浏览器场景验证不会串页。

按 P0 基线、P1 TDesign/图标/下拉、P2 管理台业务、P3 用户端回归、P4 清理验收推进。每个阶段先读代码和记录基线，再小步修改；不要在 `web/` 引用清零前删除用户端旧依赖。遇到未验证项写入 pending-test.mdx，未实现项写入 todo.mdx，不能用文档替代功能。

执行并记录：
npm --prefix server run typecheck
npm --prefix server test
npm --prefix web run typecheck
npm --prefix web run build
npm --prefix admin run typecheck
npm --prefix admin run build
npm --prefix admin run lint
npm run build:all
git diff --check

然后运行 npm run dev:all，在不关闭用户现有标签的前提下，用桌面/390px、浅色/深色和刷新场景逐页验收用户端与 admin 22 页。最终报告必须列出已完成项、文件/命令/浏览器证据、未完成项、阻塞原因和下一步；没有证据的项目只能写“待验证”，不能宣布目标完成。
```