Meta Gateway 视觉与工作区重设计
日期：2026-09-14。目标是统一整个控制台的结构和视觉语言，包括登录入口、导航、列表、配置面板、浮层及切换过程。
当前交付采用两套完整界面包：设置 → 外观可以选择经典控制台或现代工作空间，布局与过场随包切换，明暗仍独立设置。包结构、原版来源与扩展边界见主题包。下述工作区整理主要描述现代包。
调研与设计依据
| 官方参考 | 观察 | MG 的取舍 |
|---|---|---|
| Linear：界面重设计 与 新一轮界面整理 | 将侧栏、页面标题、视图操作与内容区分层；降低导航的视觉重量；以中性底色、对齐和密度组织信息。 | 分组侧栏、统一页头、模型目录与配置区；把次要说明和历史记录收进明确入口。 |
| Vercel Geist：材质 | 页面表面和悬浮表面采用不同的圆角、边线与阴影等级。 | 页面卡片、菜单和编辑弹层分配独立层级，减少卡片内反复套边框。 |
| Apple：Materials | 玻璃建立导航和控制层与内容层的区别，正文内容仍需稳定、清晰的表面。 | 毛玻璃集中于侧栏、顶栏、菜单和登录卡片；数据表与表单使用稳定底色。 |
| Microsoft：Mica | 云母是应用的长期背景层，依靠轻微色调变化建立层次，并考虑性能和无障碍降级。 | 网页采用静态的云母感底色与局部模糊，没有读取桌面壁纸或宣称实现原生 Mica。 |
| Raycast | 清晰的主次按钮、可见的键盘入口、克制的控制区，以及在重点位置使用的光影与材质。 | 搜索命令入口固定在侧栏，主要操作位置稳定，登录入口使用轻量 CSS 几何构图。 |
第一轮通过 Exa 检索官方说明，并在浏览器中查看 Linear 的产品截图、Geist 材质示例和 Raycast 页面。第二轮补充游戏界面、平面设计与动态图形案例，见下节。MG 使用自己的品牌、字排、SVG 与 CSS 几何构图。
平面设计与动态品牌参考
| 官方作品 | 实际观察 | MG 中的应用 |
|---|---|---|
| 明日方舟 | 黑白工业网格、细线标注、巨型标题与留白，青色作为局部强调。 | 入场的黑白场、定位线、细字标注；首页的大字轮廓与路由光轨。 |
| Persona 5 Royal | 倾斜的字块和面板、剪纸式叠层、黑红金的鲜明对比。 | 双行 META / GATEWAY 字块、错位进入与分向退出、斜切揭幕；保留 MG 的墨绿基调，以少量朱红与黄绿标记切换。 |
| Studio Dumbar · Google Sans Flex | 实际查看了动态字形/几何示例；作品说明以 Action and Reaction 组织动态语言。 | 动作与反馈成对：悬停光泽、导航标记、标签落线；入场有明确的建立、停顿、释放阶段。 |
| Ordinary Folk · Webflow | 查看作品首页和 Styleframes & Process：几何形体在有留白的场中组织，界面、平面与空间层次相互呼应。 | 登录的悬浮几何与背景光场；用不同景深组织场景，正文与表单保持清晰。 |
| DIA · Nike Statement House | 读取了排版体验和篮球动作驱动动画的项目说明；旧项目素材未成功加载，未据此声称看过完整动片。 | 将运动集中在字排和转场的方向、节奏上，不添加无关装饰素材。 |
| The Designers Republic / Wipeout | 首页的酸黄底与粗体字排可见；Wipeout 项目页的素材停留在占位块，未完整验看项目图像。 | 首页所见的字号对比与少量高明度强调，作为品牌构图参考。 |
本轮 Exa 返回连接失败，改为直接查看上述官方网页。没有复制游戏角色、商标、音效或工作室素材，也没有引入动效库或额外字体请求。
原界面的主要问题
- 顶部导航、统计卡片、筛选、详情与操作的视觉重量接近，视线缺少明确的落点。
- 宽表格与详情并排，实际数据被挤窄；模型配置的主要操作被历史、统计和说明推到首屏之外。
- 大量边框、全大写标签、等宽字体与持续装饰，让页面显得忙碌，内容之间的关系不够清楚。
- 颜色、圆角和动画定义散落在多轮 CSS 覆盖中，组件之间缺少稳定的规则。
新的视觉规则
- 纸白与石墨底层，蓝色主操作：现代包采用中性表面、清楚的黑白对比与蓝色强调，少量珊瑚红区分辅助图形；经典包保持原版蓝金配色。
- 导航、内容、浮层三层结构：侧栏与顶栏帮助定位，内容获得主要对比度，菜单和编辑器通过适量阴影表达覆盖关系。
- 字体有明确用途：Inter 与中文系统字体负责正文、标题、数据；JetBrains Mono 只用于模型标识、路径和技术内容。移除两套未继续采用的字体请求。
- 空间按关系分配：页头操作固定；统计降为轻量读数；表格减少重复边线；表单使用一致的字段间距和操作页脚。
- 动效服务操作：按钮和菜单保持约 120–180ms 反馈；页面使用轻微淡入，不再叠加斜向光扫；主题切换约 180ms 淡入。日常登录立即建立会话，再以 180ms 展示内容；完整品牌演出保留在总览的手动重播入口。
工作区重组
| 区域 | 新结构 |
|---|---|
| 导航 | 工作空间、探索与观测、管理三个分组；桌面可收起，较窄桌面使用图标栏，手机使用左侧抽屉。 |
| 连接 | 完整宽度的目录；搜索和筛选回到列表工具栏；选择行打开详情抽屉；右键与更多菜单保留同一动作集合。 |
| 模型 | 窄目录 + 宽配置区；页头放探测、工具和新增；主要区域展示路由成员；有效策略与历史按需展开。 |
| 日志 | 轻量概况、全文搜索、精确筛选、结果列表；慢请求和失败开关靠近结果；延迟分析退到辅助位置。 |
| 令牌与设置 | 使用统一页头、表格、字段、菜单和弹层；维持已有权限、配额、确认流程和配置保存逻辑。 |
| 登录 | 品牌、说明、输入和主按钮保持清楚；几何构图配合受限粒子、指针光场和轻微视差，保留管理令牌、TOTP、自定义背景与记住登录的行为。 |
动效行为与性能
- 日常登录：认证通过立即发布一次会话，不以动画计时器阻挡访问。退出立即撤销会话。
- 重播：完整品牌动画由总览「重播入场」独立管理，可用跳过或 Escape 关闭，不重新登录、不改变会话。
- 引导：首登使用设置向导；功能导览改为主动打开，避免登录后多个模态层连续阻断操作。
- 减少动态效果：遵守系统
prefers-reduced-motion，停止装饰粒子与大幅运动。日常登录不等待淡入，手动重播走约 160ms 短路径。手机跳过入口至少 44px。 - 粒子：约 30fps，桌面最多 88 / 手机最多 36，DPR 不超过 1.5，画布最多约 300 万像素；隐藏页面停止 RAF，卸载时释放观察器与事件监听。按钮火花有兜底清理。
- 首页：SVG 属于品牌装饰，隐藏于无障碍树，不表达实时请求流量。装饰循环与隐藏页面分离处理；统计数字立即呈现真实值，不从零计数伪造短暂空状态。
维护入口
web/src/themes/registry.ts：完整主题包注册；每个包拥有导航、详情展示、入场组件和样式。web/src/styles/tokens.css：现代包浅深模式的文字、颜色、间距、阴影与动效变量。web/src/styles/system.css：共享控件、表格、表单、菜单、抽屉与对话框。web/src/styles/shell.css：导航、页头、响应式框架和页面进入动效。web/src/styles/workspaces.css：各工作区的信息组织和布局。web/src/styles/login.css：登录布局、表单与材质。web/src/styles/motion.css：登录粒子配套样式、品牌入场、首页光轨、导航/标签/菜单反馈与主题揭幕；动效降级也集中在此。web/src/lib/entranceMotion.ts：日常淡入与主动重播时长；认证不依赖品牌动画计时器。web/src/styles.css：保留业务专用布局；移除 307 条旧共享/壳层规则和 233 条旧登录/过场规则，避免继续叠加同一职责的定义。
PageActions 允许业务组件将当前操作放进页头，同时保留其本地状态和事件处理。新的壳层由 ConsoleShell 统一维护。图片协议、透传、路由选择、计费与视频 API 的既定范围不变。
验收要点
改布局或动效时，下面几条是必须逐项过的，因为它们都不会在单元测试里报错：
- 两套主题包都要看。 改动共享组件或壳层后，经典与现代两套都要验收，不能只看一套。
- 桌面与手机都要看。 桌面工作台的请求与结果面板顶部对齐；390px 手机不能有页面级横向溢出，导航抽屉选中目的地后要关闭。
- 嵌套弹层的 Escape 顺序。 内层选择器先响应，父编辑器保持打开。
- 入场与动效。 必须支持跳过、减少动态效果与隐藏页面暂停；重播不能触碰认证状态；登录后只发布一次会话。
- 前端产物必须重建。 改动后要重新构建
internal/webui/dist再编译 Go，否则运行的是旧界面。
本地验收用隔离的数据库与模拟上游，不要对着生产实例调样式。