R-07 · 第 12–18 行采摘 harvesting
运行中
62%
第 13 章 · Chapter 13
界面与数据Interface & Data
产品界面组件、数据可视化规则与标志动效交付物。三者共用同一套 tokens：状态不只靠颜色，图表序列色有固定语义，动效只有一种节奏。
13.1界面组件UI components
规范文件 assets/ui/components.css（只引用 --cx-* 变量）与尺寸/可访问性说明 assets/ui/README.md。
通用规则：焦点环 2px leaf.600 外扩 2px；触控目标 ≥ 44px；文字对比 ≥ 4.5:1；错误、成功、状态都带图标或文字；prefers-reduced-motion 下过渡归零。
.cx-btn — primary / secondary / ghost / danger · sm / md / lg · disabled · loading
.cx-status · .cx-chip · .cx-badge — 状态点只用语义色，始终带文字
运行中
待命
警告
故障
当前作物
番茄 · 3 号棚
2 告警
标签
.cx-field — input · error / success
°C
超出安全范围 12–35 °C.cx-alert · .cx-task — 提示条与机器人任务卡
湿度偏高
东区 92% RH，超过设定上限 85%。
全部组件与状态
下面嵌入 assets/ui/components.html（新窗口打开可切换亮/暗）：按钮、表单、标签/状态点/徽章、卡片/表格/列表、导航/标签页/面包屑/分页、提示条/toast/模态/工具提示、进度/骨架/空状态、机器人任务卡。
| 组件 | 尺寸 | 圆角 | 关键规则 |
|---|---|---|---|
| 按钮 | sm 32 / md 40 / lg 48，左右 12 / 16 / 24 | sm 4 | primary 小字用 accent-fg（navy.950）；白字只在 ≥ 18.66px 且字重 700（按钮默认 600 不满足，需显式 700）；每页一个 primary |
| 输入框 / 选择 / 文本域 | 高 40（sm 32 / lg 48），内边距 8 × 12 | sm 4 | 底 bg-sunken，描边 1.5px border-strong；聚焦描边 accent + 焦点环；error / success 改描边并带图标 |
| 复选 / 单选 / 开关 | 20 / 20 / 40 × 24 | xs / full / full | 命中区扩到 44px；选中底 accent |
| 卡片 | 内边距 24（sm 16） | lg 12 | shadow.sm；可点击 hover 升 shadow.md；选中 accent 描边 |
| 表格 | 单元格 8 × 12 | md 8 | 表头 bg-sunken 小型大写；斑马纹 bg-sunken；行 hover accent-soft；数值列右对齐 tabular |
| 导航 / 标签页 | 高 56 / 项高 44 | — | 当前项 accent 2px 下划线，不用填充块 |
| 提示条 / toast / 模态 | 12 × 16 / ≤ 360 宽 / ≤ 560 宽 | md / md / lg | 四级各带图标；toast 用 bg-inverse；模态遮罩 navy.950 60% |
| 进度 / 骨架 / 空状态 | 高 8（sm 4）/ — / 内边距 40 × 24 | full / sm / lg | 轨道用同色阶浅色；骨架 1.6s shimmer，reduced-motion 静止；空状态一个 primary 作下一步 |
13.2数据可视化Data visualisation
完整规则在 assets/dataviz/README.md，配色 assets/dataviz/palette.json，参考实现 assets/dataviz/examples.html。顺序：先选形式，再按用途配色，校验，再画标记；颜色最后决定。
序列色语义（固定，不轮换）
1 · navy设备 / 机器人；单序列默认
2 · leaf作物 / 产量 / 作业进展
3 · harvest告警（警告级）/ 成熟 / 能耗
4 · sky环境：温、湿、光、CO₂
5 · soil基质 / 硬件 / 其他
6 · crimson告警（错误级），只做告警
相邻规则。色弱校验：leaf ↔ harvest 在红绿色弱下几乎不可分（ΔE 2.6），soil 与 harvest / crimson 同样不可分。堆叠段、并列条、贴近折线里这些组合不得相邻；相邻顺序 navy → leaf → sky → harvest；≥ 2 序列必有图例 + 直接标注。
| 读者要做的事 | 形式 | 配色 |
|---|---|---|
| 趋势 | 折线；单序列可用面积（10%） | 单序列 navy |
| 对比 | 条形（≥ 6 类横向）；网格用热力图 | 同序列同色；量级用顺序色 |
| 构成 | 堆叠柱；饼 ≤ 5 片且只看大概 | 分类色，语义固定 |
| 分布 | 直方图、箱线、点带 | 单序列 navy |
| 关系 | 散点 ≤ 3 分类 + 形状 | ≤ 3 分类色 |
| 偏离目标 | 发散条 / 相对基线折线 | sky ↔ harvest 经 sand |
| ≥ 7 类 / 精确值 | 表格 | — |
| 元素 | 规则 |
|---|---|
| 条 / 柱 | ≤ 24px 粗；数据端 4px 圆角；段间 2px 底色间隙，不描边 |
| 线 / 点 | 2px；点 ≥ 8px 带 2px 底色环 |
| 网格 / 轴 | border 1px 实线 3–5 条；轴线 border-strong；刻度 fg-muted 11px |
| 标签 | 只标末点、极值、要讲的序列；文字用文字色不用序列色 |
| 数字 | 千分位；单位在轴头/列头；tabular-nums |
| 顺序 / 发散 | leaf 50→900（有值最浅 200）；sky ↔ harvest 经 sand.100 |
| 禁止 | 3D、渐变、双 y 轴、饼 > 5 片、按数值给类别上色、只靠 tooltip 读值 |
示例
13.3动效交付物Motion deliverables
decisions §5 定义节奏：叶脉线沿路径描画 600ms（logo-draw）→ 叶标填充 400ms（logo-fill）→ 字标淡入 200ms（logo-fade），总长 1.2s；片头片尾的定格与网址尺寸由 decisions §6 定义。交付文件在 assets/motion/，由 build.mjs + render.sh 从主标路径数据生成；用法与片头片尾规范见 assets/motion/README.md。
| 文件 | 格式 | 时长 / 尺寸 | 用途 |
|---|---|---|---|
| croprix-logo-animated.svg | SVG + CSS 动画 | 1.2s | 网站首屏、H5；内置 prefers-reduced-motion 降级 |
| croprix-logo-intro-1920x1080.mp4 | H.264 60fps | 1.2s · 1920 × 1080 · Sand-50 底 | 视频片头、PPT 封面（浅色） |
| croprix-logo-intro-navy-1920x1080.mp4 | H.264 60fps | 1.2s · 1920 × 1080 · Navy 底反白 | 视频片头 / 片尾（深色） |
| croprix-logo-intro-alpha.webm | VP9 alpha 60fps | 1.2s · 1920 × 1080 · 透明 | 叠加在实拍画面上 |
| croprix-logo-intro.gif | GIF 30fps | 2.7s · 480 × 270 | 聊天 / 邮件 / 文档预览 |
| lottie/croprix-logo.json | Lottie 5.7 | 72 帧 @ 60fps | App 启动页、lottie-web；AE 复现规格见 lottie/SPEC.md |
片头（decisions §6）
标志动效 1.2s + 定格 0.8s = 2.0s，然后硬切或 200ms 淡入正片。定格期间可在字标下方淡入标语（Montserrat 500，高 ≤ 字标 x 高 0.45，sand.700）。不加音效冲击、光效、粒子。
片尾（decisions §6）
Navy 底反白版定格 3s：标志居中，下方 1 L 处放网址（Montserrat 500，白，字高 = 字标 x 高 0.6），无其他元素。每个视频只播放一次标志动效；加载态用组件库的进度条或骨架屏，不用标志循环。