视觉基准

这里列出文档的排版、代码和控件样式，并提供可直接操作的示例。

字体与阅读层级

正文使用衬线字体，标题、导航和控件使用无衬线字体，命令、路径和标识符使用等宽字体。正文英文为本地打包的 Source Serif 4，中文为系统宋体（Noto Serif CJK / 思源宋体）；无衬线为 Inter 与系统黑体；代码为本地打包的 JetBrains Mono。

页面标题与正文示例const frame = 'ENU' · 00110010 · 20 Hz

正文 17 px、行高 1.85，阅读列约 37 个汉字宽。页面不用横线切分章节，层级只靠字号、字重与留白。

文字职责

内容	字体	处理方式
正文与引言	Serif	常规字重，充足行距
页面标题	Serif	加大字号，收紧字距
章节标题、导航与控件	Sans	适中字重，清楚分组
路径、命令、标识符	Mono	保持完整，不随意断行
辅助说明与时间	Sans / Mono	使用次要文字颜色

链接、引用与提示

链接使用正文墨色和细下划线，颜色与地面站 v016 单色主题一致。引用与提示块只用左侧一道细线和语气色区分，不加卡片底色与边框。

命令应说明执行目录和预期结果，引用只保留真正需要强调的内容。

写作建议

先说明读者要完成什么，再给出命令与预期结果。背景知识放在需要使用的位置。

验证边界

静态截图不能证明交互可用。键盘焦点、复制结果与窄屏命中区域都需要实际操作。

代码块

代码块保留语言、行号与复制动作。长行在代码区内部滚动，不影响正文宽度。

interface DocumentPage {
  title: string
  description: string
  verified: boolean
}

const page: DocumentPage = {
  title: 'XGC2',
  description: 'Usage and development',
  verified: true,
}

代码组用于同等重要的多种路径。当前页签通过文字颜色和下方细线区分。语言标签与复制按钮只在悬停或聚焦时交替出现。

npm

npm run build

Python

python3 -m unittest discover -s tests -v

变更示例使用新增和删除符号，不只依赖颜色：

- description: '文档内容建设中。'
+ description: 'XGC2 使用与开发文档。'

数学公式

行内公式可以放在句子中，例如差速机器人的状态写作 $\mathbf{x}=[x,y,\theta {]}^{\mathsf{T}}$。独立公式用于完整模型：

$$\left[\begin{array}{c}\dot{x}\\ \dot{y}\\ \dot{\theta }\end{array}\right]=\left[\begin{array}{c}v\cos \theta \\ v\sin \theta \\ \omega \end{array}\right].$$

公式在构建时渲染，不需要加载第三方脚本或远端字体。

基础控件

以下控件都能实际操作。键盘焦点、按下、选中和禁用状态均有明确样式。

按钮

输入

检索术语输入只影响这份交互预览。文档语言简体中文English当前选择：简体中文

分段

开关

页签

控件只保留一层边界，状态由文字与位置共同表达。

动效与可访问性

动效用于展示章节进入、当前位置和控件状态。页面不劫持滚动，也不需要等待动画结束后才能操作。

• 章节显现只发生一次。
• 阅读进度和页内活动标题同步，不遮挡内容。
• prefers-reduced-motion 下关闭非必要过渡与平滑滚动。
• 所有动作都有键盘焦点，颜色不是唯一状态线索。