Croprix

UI components · 全部状态预览 v1.1.0

按钮 .cx-btn .cx-btn--{primary|secondary|ghost|danger} .cx-btn--{sm|lg}

行：变体；列：default / hover / active / focus-visible / disabled / loading（hover、active、focus 为预览强制态，真实状态由伪类触发）。主按钮小字用 accent-fg（navy.950）。

primary · md
secondary · md
ghost · md
danger · md
尺寸 sm 32 / md 40 / lg 48

表单 .cx-field .cx-input .cx-select .cx-textarea .cx-check .cx-radio .cx-switch

输入框底 bg-sunken、描边 border-strong 1.5px；聚焦描边转 accent 并加焦点环；error / success 只改描边与提示文字颜色，并带图标（不只靠颜色）。

default
hover
focus-visible
disabled
°C
超出安全范围 12–35 °C
°C
已保存
select · default
必选
disabled
textarea · default
不能为空
已同步
复选框
单选
开关

标签 chip · 状态点 · 徽章 .cx-chip .cx-status .cx-badge

状态点只用语义色：running = success，idle = fg-subtle，warning = warning，error = danger；始终带文字，不单靠颜色。

chip 番茄 · 3 号棚 当前作物 Navy 采摘 R-07
状态点 运行中 running 待命 idle 警告 warning 故障 error 同步中 info
徽章 3 128 2 告警 新 草稿 Beta Live

卡片 · 表格 · 列表 .cx-card .cx-table .cx-list

卡片圆角 lg 12px、内边距 24px、阴影 sm；表格表头小型大写、斑马纹 bg-sunken、行 hover accent-soft、数值列 .num 右对齐 tabular。

default

3 号玻璃温室

番茄 · 2.4 ha · 12 台机器人

flat

无阴影

用于列表内嵌套。

interactive

可点击

hover 升为 shadow-md。

selected

已选中

accent 描边 1px + 1px 环。

带页眉页脚

新

正文区。

示意数据 · 单位见表头
机器人作业状态作业时长 h覆盖行数开始时间
R-01采摘运行中6.41,24006:30
R-02授粉待命3.186007:15
R-03巡检警告5.02,01005:50
R-04运输运行中4.2—08:00
R-05打叶故障0.812009:40

第 3 行为强制 hover 态，第 4 行为 is-selected。

提示条 · toast · 模态 · 工具提示 .cx-alert .cx-toast .cx-modal .cx-tooltip

提示条四级各带图标；toast 用 bg-inverse 深底、右下堆叠、进入 400ms ease.enter；模态 560px、圆角 lg、阴影 lg，遮罩 navy.950 60%。

模型已更新

今晚 02:00 后的调度使用新版本。

任务已下发

R-07 将于 06:30 开始第 12–18 行采摘。

toast（静态摆放，实际固定在右下）
已保存环境设定已同步到 3 号温室。
电量低R-02 剩余 12%，
正在同步 3 台设备…
模态（静态摆放）
工具提示（hover / focus 显示；下面两个为强制显示） 上次巡检 2 小时前 最大 240px，居中，箭头 8px bottom 变体

进度条 · 骨架屏 · 空状态 .cx-progress .cx-skeleton .cx-empty

进度轨道用同色阶浅色（leaf.100 / harvest.100 / crimson.100），填充用语义色；骨架屏 shimmer 1.6s，reduced-motion 下静止。

采摘 · 第 12–18 行62%
电量18%
存储96%
同步中—

还没有任务

为这个温室创建第一条作业任务，模型会按作物状态安排机器人。

机器人任务卡 .cx-task .cx-task--{running|idle|warning|error}

示例业务组件：类别图标（sprite）+ 名称 + 类别 + 状态点 + 进度 + 时间。左侧 2px 状态色描边与状态点同源，不新增颜色。

R-07 · 第 12–18 行采摘 harvesting
运行中
62%
06:30 → 预计 11:101.6 m 行距
R-02 · 东区授粉 pollination
待命
0%
计划 13:00电量 88%
R-03 · 全棚巡检 inspection
电量低
81%
05:50 → 预计 10:05剩余 12%
R-05 · 第 3–6 行打叶 deleafing
通讯中断
14%
最后心跳 09:41:12