/* ============================================================================ * 1010.WANG · 组件层 —— 页面骨架 + 组件类 + 图表容器 * 规格书: ../../../DESIGN.md §4 §5 §7 * * 两条纪律: * · 本文件不许出现任何字面色值。见到 # 或 rgb( 就是漏了一个令牌。 * · 移动端全 App 零 StyleSheet.create() —— 样式即令牌的组合。此处同理。 * * 依赖 tokens.css → base.css 先于本文件引入。 * ========================================================================== */ /* ============================================================================ * 1 · 页面骨架 —— 四档容器,两道断点 * * 移动端是「单列 + 24px 边距」的叙事,直译到 Web 就是一根居中列 —— 这对 * 「一次只读一件事」的页面永远是对的,故它仍是默认档。 * * 但**移动端是叙事,桌面端是版面**:前者的层次靠顺序表达,后者可以靠位置与 * 面积表达。只留一根窄列等于把第二个维度扔了。故 720 之上再立一道 1120, * 且第二道断点做的是**版面重组**而非加宽 —— 规格见 DESIGN.md §4.4,落地在本 * 文件末尾的 §19(整层收在一处,桌面语法一屏读完)。 * * 档位由「文本列要多宽才读得下去」决定,不由屏幕决定(法则二): * --page-form(480) 表单列 --page-narrow(720) 连续正文 · 叙事单列 * --page-wide(1120) 卡片墙 · 版面 420(--center) 无顶栏的登录屏 * ========================================================================== */ .page { max-inline-size: var(--page-narrow); margin-inline: auto; padding-inline: var(--gutter); padding-block-start: calc(var(--header-clearance) + var(--gutter)); padding-block-end: 64px; } .page--wide { max-inline-size: var(--page-wide); } /* 表单档。不是断点的产物 —— 一个 672px 宽的密码框在 800 的窗口里同样荒谬, 故它在每一个宽度上都成立,只是窄屏根本够不到这个上限。 */ .page--form { max-inline-size: var(--page-form); } /* 无顶栏的整屏居中(登录页)。不复用 .page 的顶部让位 —— 那让位是为固定顶栏留的, 这一屏没有顶栏,留出来就成了一段莫名其妙的空白。 */ .page--center { max-inline-size: 420px; min-block-size: 100dvh; display: grid; align-content: center; padding-block: var(--gutter); } /* 登录页零散件 */ .login-corner { position: fixed; inset-block-start: var(--gutter); inset-inline-end: var(--gutter); z-index: 10; } /* 品牌标记 —— 彭罗斯三角,与移动端 app-icon 同一份几何(img/logo.svg)。 **它取 currentColor**:移动端浅深两套图标各画一份,Web 只留一份 SVG, 由这里的 color 承担主题差异,恰好就是 --accent 的两个值。外部引用的滚了。minmax 的 0 下限把这条路堵死: 子元素最宽等于容器,超出的部分由它自己那层 overflow 负责。 */ /* 表单列 —— 法则二(约束宽度的是文本列,不是页面)的容器化身。 `.page--form` 说的是「整页就是一个表单列」,这个说的是「宽页里的一列表单」。管理面板是 `.page--wide`,而它有五个面板其实是表单 —— 一个 880px 宽的 `