同一份内容,分别放进「网页轨」与「应用轨」,看页面三层结构(header / toolbar / content)如何随轨道收口或铺满。颜色与间距全部走 token,无裸值。
内容用 .container--content 居中收口(约 1080),适合阅读型 / 营销型页面。下面整块就是一张完整的 page-shell。
2026-06-19 · 时长 00:42:18 · 4 人参与
| 议题 | 负责人 | 用时 | 结论 |
|---|---|---|---|
| 转写引擎离线化 | 李航 | 12:30 | 已定 |
| 导出格式收敛 | 周敏 | 08:05 | 推进中 |
| 下周排期 | 王野 | 06:40 | 待确认 |
| 合计 | 27:15 |
同样三层、同样内容,改用 .track-app 左对齐铺满(其下的 .container 自动取消居中与最大宽)。适合工具型 / 工作台页面,信息密度优先。
2026-06-19 · 时长 00:42:18 · 4 人参与
| 议题 | 负责人 | 用时 | 结论 |
|---|---|---|---|
| 转写引擎离线化 | 李航 | 12:30 | 已定 |
| 导出格式收敛 | 周敏 | 08:05 | 推进中 |
| 下周排期 | 王野 | 06:40 | 待确认 |
| 合计 | 27:15 |
两轨区别:网页轨把内容收进有限宽度并居中,留白对称、利于阅读;应用轨贴左铺满整片可用区,横向空间全部交给信息密度。结构完全一致,只换最外层 .track-web / .track-app,无需改动 header / toolbar / content。
在任意祖先元素加 data-density,行高随之收放;同一张表,左→右依次为 comfortable / standard / compact。
| 议题 | 用时 |
|---|---|
| 离线化 | 12:30 |
| 导出收敛 | 08:05 |
| 排期 | 06:40 |
| 议题 | 用时 |
|---|---|
| 离线化 | 12:30 |
| 导出收敛 | 08:05 |
| 排期 | 06:40 |
| 议题 | 用时 |
|---|---|
| 离线化 | 12:30 |
| 导出收敛 | 08:05 |
| 排期 | 06:40 |