AIGW Admin 新后台 · Mockup v1

绿地新建管理后台 — 多租户 / 4 层 IA / 埃森哲品牌色 / 表单化配置 / 完整 Observability
为 wagela 项目准备 · 2026-06-04 · jerry.du · 仅 mockup，未实现后端

这次的 2 个 Variant 在试什么？

不是配色和功能不同 — 功能完全一致（同样的 4 层 IA、同样的 token 配额矩阵、同样的成员管理）。差别只在 密度感和品牌姿态：A 是工具型（Linear/Vercel 路线，紧凑高密度），B 是商务型（Stripe/SAP 路线，留白卡片化）。先选这个再扩展全套。

✓ CHOSEN · 主架构

Variant A · 紧凑工具感

Linear / Vercel 风格 · 一屏塞下更多数据 · 适合天天用的运维 / 平台管理员

设计立场

  • Sidebar 白底，主区浅灰，对比明确
  • 字号小（13px），单屏可看 6 个 metric + 矩阵 + 热门 5 模型
  • 紫色仅作主色 / active / 强调（不喧宾夺主）
  • 表格密度高，hover 高亮

优势

  • 信息密度高 — 一屏看完所有关键指标
  • 操作快 — 表格行内 ⋯ 菜单，drawer 编辑不切页
  • 开发实现简单 — 标准 Tailwind/shadcn 直接套

弱点

  • 对非技术干系人（如领导汇报）观感偏冷
  • 首次使用上手稍陡（密度大）
Analytics Team Mgmt Config Builder
REFERENCE ONLY

Variant B · 通透商务感

深紫渐变 hero 留给 Login / Welcome / Onboarding 三件套 · 日常页面不用

设计立场

  • Sidebar 深紫渐变，强品牌存在感
  • 字号大（14px），核心 metric 用紫色渐变 hero 卡片
  • 留白多，每张 card padding 22~28px
  • 所有文案中文化（包括按钮、表头）

优势

  • 品牌冲击力强 — 深紫 sidebar 一眼可辨
  • 对外可演示 — 给 Wagela 外部客户看不掉价
  • 核心指标突出 — Hero 卡片自带视觉锚点

弱点

  • 信息密度低 — 同样的页面要滚动更多
  • 深色 sidebar 在白天高强光环境下不如浅色 sidebar 清爽
  • 团队管理、Configs 这种密集表单页可能撑不住该风格
Analytics (ref) Team Mgmt Config Builder

关键维度对比

维度 Variant A · 工具型 Variant B · 商务型
密度高（一屏 6 metric + 矩阵）低（一屏 4 metric + hero）
Sidebar浅色 240px · 紫色 accent深紫渐变 280px · 强品牌
主色用法主按钮 / Active / 强调Sidebar 满铺 + Hero 渐变
核心指标6 个 metric 平铺1 个 Hero ($) + 3 辅助
表格密度8px 行高 · 11px 字体14px 行高 · 13px 字体
适用场景日常运维 / 内部客户演示 / 跨部门
可扩展性（密集表单页）✓ 直接套需要密度变体或子布局

✅ 决策已锁 — Mockup v1 Review（2026-06-04 二次确认）

2026-06-04 · jerry.du 二次确认 · 写入 12_aigw_mapping_plan.md v2.1
  1. Variant A（工具型）为主架构 · Variant B 保留作 hero / onboarding reference 日常 admin 后台是高频运维场景，A 的浅 sidebar + 紧凑密度更耐看耐用。Sidebar 顶部 Logo 区做小块紫色 banner 保留品牌感，sidebar 主体保持浅色。B 的深紫渐变 hero 不丢，专门留给 Login / Welcome Dashboard / Tenant Onboarding 三件套撑场面。不做日常页面 hybrid。
  2. 配额单位 = Token（不是 request count） 对外（用户、计费、配额提醒）一律说 token，跟 Anthropic/Azure metrics 对齐（InputTokens / OutputTokens / cacheReadInputTokens 等）。Portkey 的 request 计数留作内部 ops 监控，UI 不露。
  3. Add Member = 搜索为主 + Invite by email fallback 主路径搜 Entra ID 已同步用户，命中即 assign Team + 模型白名单 + 5 段配额。搜不到时露出 "Didn't find them? Invite by email →" 切到 invite drawer，邮件链接首登触发 Entra SSO 落到对应 Workspace/Team（不创建本地密码账号）。
  4. Logs 列表页并入下一轮 Phase 1 列：time / workspace / team / user / model / status / latency / in_tok / out_tok / cost。行点开抽屉看 request+response body。Body 默认 180 天 TTL（筛选器露出来）。

下一轮（Mockup v2）

按 Variant A 风格扩展剩余 16-18 个页面（Tenants / Workspaces / Users / Models / Configs / Logs / Audit / Pricing / MCP / Platform Admin），Variant B 的深紫 hero 渐变专门给 Login / Welcome / Onboarding 三件套，12_aigw_mapping_plan.md v2.1 锁死决策。

  1. Phase 1 必做（下一轮）：Logs 列表页 · API Keys · Model Catalog · Workspace Settings · Tenants（Platform Admin）
  2. Phase 1.5：MCP Registry · Agent Integrations 详情页 · Audit · Pricing
  3. Phase 2：Playground / Prompt Partials / Guardrails 列表 / Workspace Onboarding 流
  4. 转 React + Vite：高频页（Analytics / Team / Logs / Configs）跑通后接 mock API