feat(frontend): Ant Design Pro SPA migration (P0–P5 + review fixes) - #109
Conversation
引入 ant-design-pro 作为与 outlook_web 平级的前端工程,完成 Flask session/CSRF 鉴权适配与业务路由骨架,作为按功能迁移的基础设施。 - 后端新增 /api/auth/current-user、/api/auth/logout,兼容旧 /logout - 前端 proxy 到 Flask,统一 credentials + CSRF 请求封装 - 登录页改为单密码;菜单对齐旧侧栏功能模块 - 补充 SPA 鉴权适配单测(含对抗用例)
将旧 dashboard 的五个概览 Tab 迁到 /overview: - services/outlook/overview 对接 /api/overview/* - 按 Tab 懒加载(react-query useQuery) - KPI / 进度 / 表格展示账号、验证码、对外 API、邮箱池、活动 - 补充 overview API 契约测试与 utils 单测
将账号/分组管理迁入 Ant Design Pro: - services/outlook/accounts|groups 对接列表、创建、更新、删除 - /groups:ProTable + ModalForm CRUD,过滤临时邮箱系统组 - /accounts:分页搜索、分组筛选、删除与跳转邮箱 - 补充 accounts/groups API 契约测试(含重名对抗)
对接 /api/emails 与 /api/email 详情链路:账号选择、文件夹切换、列表/详情双栏、502 错误 details 展示、批量删除。补充邮件 API 契约测试(登录鉴权、404、全链路失败结构、成功字段形状)。
临时邮箱三栏工作区(生成/列表/消息/详情)对接 /api/temp-emails/*;插件管理对接安装/卸载/配置/连接测试/应用变更。补充 P4 API 契约测试。
完成设置 Tabs、审计日志、邮箱池管理、OAuth Token 工具与刷新日志页面迁移;补充对应 service 层与 P5 API 契约测试。
Align SPA pool filters/actions with backend true|false|all and ACTION_RULES, narrow /token-tool proxy to OAuth callback only, normalize HTTP error bodies in outlookRequest, and harden P5 contract tests.
Support masked secret fields on settings page (skip unchanged masks on save), document production build/proxy cutover, and list residual SPA gaps.
Bring remote pool/gunicorn/docs updates into the Ant Design Pro migration branch before opening the PR.
Login succeeds but post-auth layout crashes with ReferenceError: Link is not defined because menuItemRender uses <Link> without importing it from @umijs/max.
UAT 部署结果(并行环境)机器: 访问地址
部署形态
冒烟结果
部署中修的问题登录后布局崩溃: UAT 登录密码部署时生成的随机密码见 VPS: |
对抗式功能审查:旧前端 vs PR #109 SPA(只审查,不改代码)对比对象
总结论(功能视角)
建议:在补齐下方 P0 缺陷 + P0 能力缺口 前,不要切默认流量到 SPA。 模块完成度(主观)
P0 — 必须先修的缺陷(实现有问题)
P0 — 旧有、新缺的核心能力(功能缺口)
P1 — 重要运维降级
逻辑不一致(抽样)
API 面缺口(旧前端有调用、SPA 未接入,节选)
README.outlook.md「残余差距」核对已写到的:多 Key、布局拖拽/compact poll、旧 templates 保留 — 准确但不够。 验收建议优先级(仍不改代码,仅建议)
审查人:Cursor Cloud Agent(对抗式功能审查,未提交代码变更) |
PR #109 合并前修复清单与优先级排序(对抗式 1:1 审查结论)
总体判断迁移未达合并标准。UAT 冒烟(登录/概览/列表渲染)能过,但冒烟覆盖不到下列功能缺口——其中 P0 项会导致审计页 3/7 列空白、核心「收验证码」用例失效、账号无法增改。建议阻塞合并,先修 P0。 🔴 P0 — 合并阻塞(不修不能合)1. 审计页字段契约错配,7 列中 3 列永久空白
2. 验证码提取功能完全缺失(核心用例)
3. 账号管理只剩「列表+删除」,无增/改
4. 轮询引擎丢失,但设置页保留死配置
🟡 P1 — 合并后立即跟进(建议本 PR 内修)5. 邮箱 iframe 全锁死,无信任切换
6. i18n 国际化回归
7. 内联图片(CID)重写丢失
8. 账号管理其余功能缺口
9. 邮箱 URL 状态不完整
10. 邮箱排序/筛选缺失
⚪ P2 — 后续优化(可独立 PR)
📊 迁移完整度(已核验领域)
✅ 建议合并路径
审查方法说明:12 领域对抗式 workflow(54 子代理)+ 直接源码 1:1 比对。workflow 因 schema 设计与 pipeline 聚合问题仅 audit 领域完成端到端对抗验证,其余领域结论来自直接阅读双方源码,每条附 |
|
本轮已处理 Slack / 审查中点出的 P0 implementation defects,并追加修复了 GitHub Code Quality 的 Black 格式失败。 修复内容:
提交:
验证结果:
已知未在本轮扩大的范围:
|
Align Ant Design Pro admin with Flask contracts and old UI capabilities: account batch/export, pool claimed rules, multi-key settings, mailbox 3-column workbench with resizable layout and compact poll controls.
第二轮对抗式审查报告(含第一轮结论复核)
总体结论(第二轮)合并阻塞已全部解除。 本轮也纠正了第一轮两处误判(已在下方标注)。 ✅ 第一轮 P0 复核 — 全部已修
✅ 第一轮 P1 复核 — 大部分已修
✅ 第一轮 P2 复核
|
| 维度 | 第一轮 | 第二轮(d2711ce 后) |
|---|---|---|
| P0(合并阻塞) | 4 | 0(全部已修) |
| P1 | 6 | 1 部分(i18n 列标题) |
| P2 | 8 | 3 残留(groups 视图/i18n/overview 动态列)+ 1 误判撤回 |
| 已确认安全/鉴权 | — | CSRF(request.ts:39-44+重试)、鉴权(app.tsx:114-116) 均正常 |
✅ 第二轮建议
- 可合并:P0 全清,P1 实质已修。冒烟用例应补「审计列有数据/能加号/能复制验证码/轮询配置生效/邮箱三栏可拖拽」。
- 合并后跟进:R1 groups 主从视图(评估是否接受新范式)、R2 i18n 列标题、R3 overview 动态列、R4 审计详情递归翻译。
- 撤回第一轮误判:P2-18(pool-admin 批量)、token-tool 明文、groups 无新建。
本轮方法:逐条对照 d2711ce 后源码复核第一轮 18 项结论,并对第一轮做对抗式自查(纠错 3 项)。如对某条仍有异议,欢迎指出。
UAT v2 部署结果(第二版)机器: 访问
本轮动作
冒烟
请直接打开 HTTPS 测第二版效果。 |
第二版体验走查(有数据后):AI 味 / 不像正常产品环境:UAT 总印象功能骨架比第一版完整很多,但产品感仍偏「Ant Design Pro 脚手架 + API 联调页」,不像已上线的运维后台。最刺眼的是:侧栏英文、副标题塞 API 路径、状态枚举原文、错误直接甩 JSON、页脚还写着 Ant Design Pro / Umi / Utoo。 P0 — 一眼就不像正常项目
P1 — 用起来别扭、像 AI 拼装
P2 — 品牌与脚手架清理
有数据后的真实路径感受(简评)
建议优先改(不改代码,仅排序)
审查人:Cursor Cloud Agent · 对照提交 |
Replace API-style PageContainer subTitles with product copy, localize status enums, improve mailbox errors, fix audit trace_id rendering, default locale to zh-CN, and align brand/footer/logo for Outlook 邮件管理. Co-authored-by: ZeroPointSix <ZeroPointSix@users.noreply.github.com>
UX 打磨已合入本 PR 分支(待 UAT 重建)已将体验修复推送到本分支 head:
本轮改了什么(对应上一轮体验走查)
请在 UAT 机 |
UAT v3 覆盖部署(UX 打磨)机器: 动作
验证
|
ZeroPointSix
left a comment
There was a problem hiding this comment.
CodeXWeb 深度审查 @ 17c5417
结论:这版 UX 打磨有效,插件、设置、账号导入等上一轮 P0 大多已修;但我不建议直接合并到默认流量。至少需要先处理下面两个功能契约问题。
Findings
-
P1 阻塞:批量“刷新 Token”仍把 SSE 流当普通 JSON 请求处理。
ant-design-pro/src/services/outlook/accounts.ts:235-244/ant-design-pro/src/pages/accounts/index.tsx:506-518直接await refreshSelectedAccounts()并读取res.success/message;但后端outlook_web/controllers/accounts.py:2757-2805明确返回text/event-stream。现有测试tests/test_refresh_selected_issue45.py:165-180也按data:事件解析并校验start/complete。
结果:选中多个账号刷新时前端不会展示逐账号进度、跳过、失败信息,长任务会像卡住,最终也可能把流式结果误当普通响应。建议前端改成 fetch stream 解析 SSE,或新增非流式提交端点,并把 start/progress/complete/error 映射到 UI。 -
P1:分组选中导出按 fetch
Response写法处理,但当前请求栈是 axios-style,成功下载和文件名解析都有风险。
ant-design-pro/src/services/outlook/accounts.ts:265-291在getResponse: true + responseType: 'blob'后把res.response强转成 fetchResponse,用response.ok判断成功、用response.headers.get('Content-Disposition')取文件名。项目请求层和配置是 axios 形态(ant-design-pro/config/config.ts:160、ant-design-pro/src/app.tsx:170、ant-design-pro/src/requestErrorConfig.ts:80-81、ant-design-pro/src/services/outlook/request.ts:56-57);axios response 没有ok,headers 也不是Headers.get()。后端outlook_web/controllers/accounts.py:2257-2261返回的文件名 header 因此读不到;如果运行时确实返回 axios response,200 成功也会被!response.ok误判成失败。
建议兼容 axios/fetch 两种 response:用status >= 200 && status < 300或ok判断;header 同时支持headers.get()、headers['content-disposition'];并补一个 blob 下载单测覆盖 200 与错误 blob。 -
P2:仍有少量“技术字段裸露”的体验残留。
比如ant-design-pro/src/pages/temp-emails/index.tsx:307-310的Provider,ant-design-pro/src/pages/settings/index.tsx:819-827的API Base/API Key,ant-design-pro/src/pages/accounts/index.tsx:730-745的Fallback IMAP Host/IMAP Port。这不阻塞功能,但和本轮“去脚手架/AI 味”的目标还差一点,可以统一成面向运维用户的中文文案与说明。
已核对通过
- 插件配置 schema 路径已对齐:
plugins.ts:71-83↔routes/plugins.py:43-50。 - Cron 校验字段已对齐:
settings.ts:51-59发cron_expression,后端settings.py:1182读取同名字段。 - 账号导入/编辑主链路已补齐;IMAP 编辑的
password会在仓储层转写到imap_password,不是问题。 - 当前 active routes 只挂业务页面;旧 Ant Pro 示例页残留主要是仓库/包体清理,不是当前可见路由问题。
验证
- GitHub Actions:
Code Quality通过,Python Tests通过。 SonarCloud Scan失败点在SonarQube Scan步骤;同 job 的Run tests with coverage已通过。日志显示它在 PR key110上取 Sonar PR 信息失败,属于扫描/ALM 配置问题,不能当作 Python 测试失败。- MCP 远端全量验证尝试:本沙箱缺 Python 依赖(Flask/requests)且
npm ci被 OOM kill(exit 137),所以 sandbox 内 backend/frontend 全量测试没有有效跑完;以 CI 结果为准。
Address PR #109 deep-review P1/P2: parse refresh/selected as SSE with progress UI and timeouts, make export-selected axios/fetch compatible, and localize remaining technical field labels. Co-authored-by: ZeroPointSix <ZeroPointSix@users.noreply.github.com>
审查意见修复 + 对抗式复查 @
|
| 审查项 | 状态 | 说明 |
|---|---|---|
| P1 批量刷新 Token 把 SSE 当 JSON | ✅ 已修 | accounts.ts 改用 fetch + ReadableStream 解析 data:;处理 start/progress/delay/complete/error;UI 进度 toast;2min 总超时 + 30s 心跳(对齐旧 main.js) |
| P1 导出 blob 按 fetch Response 写、实际 axios | ✅ 已修 | isHttpOk / getResponseHeader / parseContentDispositionFilename 兼容 axios+fetch;错误 blob 解析 JSON |
| P2 Provider / API Base / IMAP Host 等裸露 | ✅ 已修 | 临时邮箱「服务商」、设置「接口地址/密钥/Cloudflare Worker…」、账号「IMAP 主机/端口/备用主机」 |
单测
ant-design-pro/src/services/outlook/accounts.test.ts:SSE 分片解析 + 导出 header/ok 兼容 → 5/5 通过
对抗式复查结论
- 无 P0 阻塞残留;原两条 P1 已实质修复。
- 非阻塞残留(不挡本轮):settings 外部 API 区仍有少量英文技术词(如表格列「API Key」);
invalid_token_failed_list未单独 surfaced。 - 建议:本轮审查阻塞项可关闭;合并默认流量前仍建议在 UAT 点测「刷新 Token」进度与「分组导出」文件名。
提交:2b70f1c(已在 feat/ant-design-pro-frontend-migration)
同步 PR:#111
新加坡 UAT 部署完成 @
|
| 检查 | 结果 |
|---|---|
/healthz |
✅ 2.7.0 |
| 登录 / 概览 / 侧栏中文 | ✅ |
| 批量刷新 Token SSE 进度 | ✅ start → progress → complete(不再卡住) |
| 分组导出带文件名 txt | ✅ Content-Disposition: filename*=UTF-8''accounts_export_selected_…txt |
本轮审查修复(SSE / 导出兼容)已在新加坡 UAT 验证通过。
Keep login, accounts, mailbox, groups and SSE/export flows; drop scaffold demos and non-core pages/services/deps for a smaller PR.
…isplay-20260810 fix(zer-582): 在纯白主题下恢复服务展示优化
- app.tsx: SettingDrawer 增加 isDev 条件,生产构建不再暴露开发态设置抽屉 - 新增 ThemeToggle 组件:右上角浅色/深色切换,仅暴露产品允许的选项 - 主题偏好持久化到 localStorage,启动时恢复 - 补充 ThemeToggle 持久化单测
- 新增 services/outlook/tags.ts:接入 /api/tags 与 /api/accounts/tags - 账号列表新增标签列(彩色 chip 展示) - 搜索表单支持按标签多选筛选(后端 tag_ids 逗号分隔参数) - 行内「打标」下拉:已有标签显示 ✓ 可移除,未有显示 + 可添加 - 批量工具栏新增添加/移除标签 - 工具栏新增「标签管理」入口:新建(名称+颜色)、删除标签 - 补充 tags service 单测
生产环境 SettingDrawer 不再渲染后,原菜单项会变成死按钮。 现在开发环境保留打开抽屉;生产环境直接切换浅色/深色并持久化, 与右上角 ThemeToggle 行为一致。
fix(zer-658): 生产环境隐藏开发态主题抽屉并新增正式主题入口
feat(zer-653): 新前端账号标签能力——展示/筛选/打标/标签管理
- 行内新增「验证码」:调用 /api/emails/{email}/extract-verification,
结果弹窗展示验证码/验证链接并支持一键复制,可跳转邮箱页
- 行内新增「移组」下拉:快速移动单个账号分组
- 操作列宽度调整,提取中状态防重复点击
…actions fix(zer-660): 账号行内补齐旧站简洁模式高频操作
chore(docker): .dockerignore 排除嵌套 node_modules/dist
fix(zer-657): 补齐新前端临时邮箱设置入口与配置表单
Summary
ant-design-pro/(Ant Design Pro + React 19 + Umi Max),与 Flask 后端通过 session cookie + CSRF 对接items/total、in_pool=true|false|all、动作名)、/token-tool代理收敛、HTTP 错误体规范化、设置敏感字段脱敏 UXorigin/main合并(含邮箱池临时邮箱 claim、gunicorn 并发修复等)部署联调建议
python start.py(或现有 Docker/Gunicorn)cd ant-design-pro && npm install && npm start(代理到:5000)npm run build,网关反代/api/login/logout/img/healthz,SPA fallback 到index.htmlTest plan
origin/main后复跑)/token-tool不被代理抢走;业务 API 走/api/token-tool/*npm run build+ 网关反代 cookie/CSRF 正常