AIGW Admin 新后台 · Mockup v1

绿地新建管理后台 — 多租户 / 4 层 IA / 埃森哲品牌色 / 表单化配置 / 完整 Observability
为 wagela 项目准备 · 2026-06-04 启动 · 2026-06-05 累计 15 页 + models 在做 · 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 Logs Audit Quota Policy ↓ 完整 16 页清单
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 · 已落地页面清单

2026-06-05 R6 · 16 页落地 · sidebar 框架化 · RBAC 角色切换
R6 · 2026-06-05 · 框架改造

Sidebar 已抽成共用框架 · 加入 RBAC role switcher

① 共用 sidebar 框架
所有 16 页统一加载 partials/shell.js 注入 sidebar。改一处全站生效，不再每页一份。
② 顶栏 Role Switcher
topbar 右侧黄底 View as 下拉，三选一：
⌘ Platform Admin · ◇ Workspace Admin · ◯ Regular User
③ 三角色 sidebar 不同
Platform 看 TNT+WS 选择器 + 完整 Platform Admin 分组；Workspace 只看 WS；Regular User 大部分项灰锁定，只能用 Dashboard/Analytics/API Keys/Service Logs。
④ Workspace 申请流程
Regular User sidebar 出现 + Request new workspace。点开进 workspace-request.html，表单实时缓存到 localStorage，刷新可恢复草稿。
⑤ Menu IA 调整
Access 顺序：Users → Teams → API Keys；新增 LOGS 分组（Service Logs + Audit）；Platform Admin 整组用细横线+⌘ 前缀显隔。
⑥ 怎么试
随便打开一个页面（如 workspace-detail），右上 View as 切换角色，sidebar 自动重渲染。

按 4 层 IA（Observability / Access / Routing / Multi-tenant）对齐组织，点卡片进入对应 mockup 页。NEW= 当前轮次新增。

Dashboard & Analytics

2 页
index.html→
Workspace Dashboard · Analytics 主页 · 6 tab（Overview / Models / Users / Cost / Latency / Errors）
analytics.html→
Analytics 深度分析 · 时段切换 + 趋势图 + 排行

Observability

2 页
logs.htmlNEW→
Per-request logs · 行点开抽屉看 req/resp body · Body logging TTL 180 天策略
audit.htmlNEW→
Platform audit log · who did what · 10 列（actor / action / target / scope / ip / ...）

Access

5 页
users.html→
用户列表 · workspace × team × role 过滤 · 行内 ⋯ 菜单
user-detail.html→
单用户详情 · Hero（本月 token / cost）+ Right-now（活跃 session / 7d 趋势）逻辑
team.html→
Team 列表 · 成员数 / 配额 / 模型白名单计数
team-detail.html→
Team 详情 · Hero + Right-now + 成员表 + 配额矩阵
user-permissions.html→
用户权限矩阵 · per-user 角色 × 资源

Routing

3 页（+ 1 在做）
models.htmlNEW→
模型目录 + per-workspace 启用 + per-user 白名单（3 tab：Providers / Models / Access Control）
configs.htmlv1→
Configs 列表 · Portkey config JSON 表单化 · v1 暂只读视图
quota-policy.htmlNEW→
Quota & Retention Policy · 3 tab（Token 矩阵 / Body 留存 / 节流策略）

Multi-tenant

5 页
tenants.html→
租户列表 · Platform Admin 视角 · workspace 数 / 用户数 / 月用量
tenant-detail.html→
租户详情 · Hero + Right-now + workspace 列表
workspaces.html→
Workspace 列表 · tenant 内切换 · 配额 / 团队数
workspace-detail.html→
Workspace 详情 · 含 Quota tab 的 Hero + Right-now 逻辑

共 14 页落地（Settings 已合入各 detail 页·workspace-settings 独立页已废） · 新增标记 NEW: logs / audit / quota-policy / models · SSO 已搬到 tenant-detail · workspace/team detail 的 Settings tab 已精简

关键维度对比

维度 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（筛选器露出来）。

下一步 · 仍待补

  1. configs.html 表单化 Config Builder + 实时 JSON 预览
  2. api-keys / mcp / agents / pricing / platform / login 等 Phase 1.5/2 页面按需补
  3. 转 React + Vite · 高频页（Analytics / Team / Logs / Configs）跑通后接 mock API