photonics-dhl Frontend Design — 前端视觉与交互规范
三套视觉系统 + 响应式 + 可访问性 + i18n，逐条可核对。
何时使用 / 何时不使用
- 使用：新建或修改页面、组件、布局、样式 token；做移动端适配；处理表单、diff、review 等协作交互。
- 不使用：纯后端 API、脚本、与 UI 无关的工具代码。
检查清单
三套视觉系统（Spec §18.2、§2.5-6）
- 工作台：现代产品式 UI——现代、克制、信息密度适中。
- 公开 RO 页面：严肃学术出版风格排版。
- 协作区域（Issue/PR/Review/diff）：GitHub 式交互与状态呈现。
- 中英混排：中文与英文内容混排良好；颜色 token 从首版预留（深色模式可后续）。
响应式（Spec §2.5-5、§18.2）
- 桌面移动功能一致：所有主要流程在移动端可完成；不得"移动端隐藏功能"。
- 三栏改分步/抽屉：复杂三栏界面（如 SDF 编辑器：左大纲、中编辑、右 SDF/AI 面板，§2.5-2）在移动端改为分步/抽屉，而非删除功能。
可访问性与性能（Spec §18.3）
- WCAG AA：对比度达 AA 级目标；键盘导航可用；焦点状态明确。
- 语义化 HTML：语义化标签；图片必须有 alt。
- 性能：公开页面优先 SSR/缓存；大文件列表虚拟化；AI/上传任务显示可恢复进度。
- 错误提示：包含重试、保存草稿和问题定位入口。
国际化（Spec §2.5-5）
- i18n 从首版：中文优先，但首日起采用中英文国际化架构；界面文案不得硬编码在组件里，必须走 i18n 资源。
Hermes 审批交互（Spec §2.5-7、§9.4）
- 审批不打断：写入/删除/Merge/发布/权限变更需审批，但必须支持批量预览、作用域授权和撤销；UI 组件按 R0–R4 分级呈现确认强度（§9.4）。