生成时间：2026-09-23

参与：gpt-6-astra（设计方案主笔）+ 波波（事实校验与本地判定的过滤）

输入材料：docs/A端-后端全量接口清单-2026-09-23.md（源自后端 OpenAPI 全量契约，377 路径 / 433 操作）

〇、人工校验批注（必读 · 先于方案本身）

gpt6 的输出不能直接采信，本次已逐条核对。这一步是强制流程，不是形式主义。

校验方法与结果

把方案中引用的全部 56 条接口路径拿去与后端 OpenAPI 真实契约比对，再对存疑项逐一线上实测（带管理员凭证）：

已修正的虚构项

教训固化：模型在写表格省空间时会自行省略路径层级。凡 gpt6 产出的接口路径，一律要回归真实契约核验后才可进入代码，否则开发期全是 404。

对其余路径的实测判定（非 404 均视为存在）

对方案的态度

采纳 gpt6 的：信息架构分组逻辑、设计 token、组件规范、涉钱防护范式、三期路线。

保留判断 的：技术选型（引入 Ant Design）。这是个涉及全站重构的重大决策，需负责人拍板，见文末「待定夺」。

1. 信息架构（IA）

1.1 推荐导航结构

分组依据：

• 业务对象：订单、商户、商品、内容等对象归类，降低认知成本。
• 使用频率：高频处理入口前置，低频配置与权限后置。
• 风险等级：涉钱、发布、删除、权限变更集中管理并强化提示。

站点地图

默认落地页：运营总览。

依据：老板需要先看经营结果，运营需要先看待办和异常；该页应同时提供数据卡片、待处理队列和高风险提醒。核心接口为 /api/admin/stats/overview、/api/miniapp/workbench/overview、/api/miniapp/messages/alerts。

1.2 现有菜单调整

• 合并：订单、核销、支付、兑换合并为“交易履约”；内容、故事、路线、知识合并为“内容运营”。
• 降级：天气、道路、AI、站点文本、场景等放入“运营配置”二级菜单。
• 隐藏/限制：测试数据清理、链路绑定、令牌交换、健康检查等不进入主导航，仅超级管理员通过“系统工具”或命令面板访问。
• 合并权限入口：admin/identities、员工、角色、邀请统一为“员工与权限”。

2. 页面清单与规格

关键字段依据接口语义推断；接口未提供字段定义的，统一标注“待跟字段确认”。

统一状态：加载使用骨架屏；接口错误展示可重试错误面板并保留筛选条件；无数据展示“暂无数据+清除筛选”而非空白页。

3. 设计系统

3.1 明确技术推荐

推荐引入 Ant Design 5 + CSS Variables，不建议继续纯手写组件。

依据：后台需要表格、筛选、抽屉、表单、日期、权限、反馈等高覆盖组件；Ant Design 5 对 React 18、TypeScript、Vite 兼容成熟，组件数量和文档完整，适合 433 个接口能力快速落地。

迁移成本：中等，预计先建立主题 token、布局、表格封装，再逐页替换；原手写 CSS 需要清理，但接口层基本不受影响。组件二次封装只保留 AppTable、FilterBar、DetailDrawer、RiskConfirm 等业务组件。

3.2 视觉 Token

• 主色：#2563EB；辅色 #0F766E。
• 语义色：成功 #16A34A、警告 #D97706、危险 #DC2626、信息 #2563EB。
• 背景：页面 #F5F7FA，卡片 #FFFFFF，悬浮 #FFFFFF。
• 边框：#E5E7EB；主文字 #111827，次文字 #4B5563，弱文字 #9CA3AF。
• 字号：12 辅助信息，13 表格辅助，14 默认正文/按钮，16 小标题，20 页面区块标题，24 页面主标题。行高分别为 18/20/22/24/28/32px。
• 字重：400 正文，500 标签/按钮，600 标题；字体优先 Inter, "PingFang SC", "Microsoft YaHei", sans-serif。
• 间距：4、8、12、16、24、32；页面内边距 24px，卡片间距 16px。
• 圆角：卡片 8px，输入框/按钮 6px，弹窗 12px，状态标签 10px。
• 高度：小按钮 28px、默认按钮 32px、大按钮 40px；输入框默认 36px，紧凑表格 32px。

3.3 组件规范

• 表格：默认行高 48px，紧凑 40px；不使用强斑马纹，仅 hover #F3F6FA；表头固定，首列和操作列可固定；默认显示 8–12 列，支持列设置、密度切换、服务端分页。
• 筛选区：单行优先，超过 5 项折叠；“查询/重置”固定右侧；筛选条件显示数量。
• 表单：桌面端标签置于上方，标签与输入间 6px；必填项使用红色星号；错误信息显示在控件下方，不仅依赖红框。
• 状态徽标：成功绿色、处理中蓝色、待处理橙色、失败/拒绝红色、禁用灰色；状态文案必须与颜色同时出现。
• 按钮：主操作蓝色，次操作白底边框，弱操作文本按钮，危险操作红色；同一区域只保留一个主按钮。
• 抽屉/弹窗：详情抽屉宽 480–640px；复杂编辑使用全页；危险确认弹窗必须展示对象、金额、影响范围和不可逆提示。
• Toast：只反馈结果，不承载重要决策；成功 3 秒自动消失，错误保留并支持复制错误编号。
• 空态插图：使用单色线性插图，主色低饱和蓝灰；列表空态配“暂无数据/清除筛选”，不可使用大面积营销插画。

3.4 暗色模式

一期不做完整暗色模式。依据：使用者是内部高频办公用户，当前首要问题是信息架构、密度和风险控制；暗色会增加表格、金额、状态色适配成本。先预留 CSS Variables，后续按使用反馈实施。

4. 关键交互模式

全局搜索与命令面板

建议做。顶部搜索支持订单号、商户、商品、用户等对象；材料未提供统一搜索接口，因此一期仅支持前端路由/菜单搜索与各业务页快捷跳转，不虚构后端搜索接口。Ctrl/Cmd+K 打开命令面板，展示最近访问、常用操作、帮助。

列表页统一范式

页面标题 → 数据摘要 → 筛选区 → 批量工具栏 → 表格 → 分页。

分页、排序、筛选均走真实列表接口；列设置保存在本地；批量操作只有接口明确支持时启用，否则不展示。

涉钱操作防护

适用于提现审核、账单生成、保护性支付等接口：

1. 列表标记金额、风险、状态；
2. 详情抽屉展示收款方、金额、关联订单、风险信息；
3. 操作前二次确认，输入“确认”或金额末四位；
4. 高危操作要求管理员身份验证，接口为 /api/miniapp/admin-settings/verify；
5. 成功后局部刷新并写入审计日志；失败保留现场，不自动重试。

数据刷新策略

• 总览、告警、待审核：进入页面请求，30–60 秒轮询；页面不可见时暂停。
• 普通列表：手动刷新，不默认高频轮询。
• 写操作：成功后局部刷新当前行/统计卡，必要时重新请求列表。
• 涉钱结果：必须重新拉取详情和列表，不使用乐观更新。

5. 实施路线

第一期：视觉与高频效率升级

依赖：引入 Ant Design、建立主题 Token、统一请求与错误处理。

范围：全局布局、运营总览、订单管理、商户管理、入驻审核、消息中心、提现与结算。

结果：先解决陈旧视觉、扁平导航、待办不可见和涉钱无防护问题。

第二期：业务能力补全

依赖：第一期表格、抽屉、表单、风险确认组件稳定。

范围：商品套餐、任务需求、资源日历、核销冲突、内容管理、分销总览。

结果：扩大后端能力使用率，形成按业务对象组织的运营工作流。

第三期：配置、分析与治理

依赖：权限模型、审计日志、版本机制和数据口径确认。

范围：站点配置、天气道路、AI配置、数据分析、员工权限、目的地管理、命令面板。

结果：补齐低频管理能力，实现权限、版本、审计和数据治理闭环。

当前后台最致命的 3 个设计问题

1. 433 个接口仅使用约 7%，核心问题不是接口少，而是没有按任务组织入口。

改法：以“工作台—交易履约—业务对象—配置治理”重构导航；每个域落到列表、详情、编辑、审核四类标准页面。

1. 14 项单侧边栏平铺，导致高频任务与低频配置争夺注意力。

改法：一级导航控制在 8 组以内；默认进入运营总览；低频配置、系统工具、测试能力全部降级或隐藏。

1. 涉钱与不可逆操作没有统一防错机制，存在误操作和责任不可追溯风险。

改法：对提现、结算、退款/支付类操作统一采用风险标签、详情确认、身份验证、二次确认、操作后复核；具体退款接口材料未涉及，不得在前端虚构退款入口。

附：待定夺的重大技术决策（需负责人拍板）

gpt6 推荐 引入 Ant Design 5，理由充分：后台所需的表格、筛选、抽屉、表单、反馈组件覆盖面广，自研品质上限低且迭代慢。

但这是全站重构级决策，需要你定：

我个人的判断：走 A。/admin 侧是内部后台，不需要极致包体优化（不像小程序受 3072KB 包体约束），而"专业感"主要来自组件一致性与细节完整度——这两点 Antd 直接给到位，自研要花数倍时间还不一定做得更好。