05 图形语言与图标 · Graphics & Icons

5.1两种辅助图形Two graphic devices

只用这 2 种。源文件在 assets/patterns/：rows-h.svg / rows-v.svg、topo.svg。标志本身（叶标）可作小尺寸点缀，但不再从中派生线条。

rows-h.svg · 24px

行间线 Rows

等距平行细线：描边 1px，间距 24px（或 1.6 单位），来自温室作物行与 1.6 m 标准路线间距。

水平或 90° 竖直，不做斜线。
颜色 sand-300（亮）或 navy-800（暗），极低对比。
本手册只在页眉下用了一条。

topo.svg · ≤ 8%

等高线 Topo

收编自官网 public/assets/patterns/topo.svg。

只做 ≤ 8% 不透明度的底纹。
不放在文字密集区域之上；不做主视觉。

5.2图标网格规范Icon grid

24 × 24 网格 · 内留白 2px（绿虚线内为可绘制区 20 × 20）· 描边 1.75px

规则

画布 24 × 24，内留白 2px：图形落在中间 20 × 20 里。
描边 1.75px，圆头（stroke-linecap: round）、圆角（stroke-linejoin: round）。
单色 currentColor；只画线不填色。例外：状态圆点可填色。
文件：assets/icons/svg/<name>.svg；合集 assets/icons/sprite.svg，符号 id 为 cx-icon-<name>。

用法

<svg width="24" height="24" aria-hidden="true">
  <use href="../assets/icons/sprite.svg#cx-icon-robot"/>
</svg>

5.3图标集Icon set

下列图标通过 sprite.svg 引用，颜色跟随 currentColor（这里是 brand 色）。用 file:// 直接打开时浏览器会拦截跨文件的 <use>，请用本地 HTTP 服务查看（见 README）。

七类机器人

pollination
授粉

inspection
巡检

harvesting
采摘

transport
运输

protection
植保

deleafing
打叶

lowering
落蔓

环境六项

light
光照

temperature
温度

humidity
湿度

water
水

co2
CO₂

nutrient
营养

系统

schedule

map

route

greenhouse

robot

model-ai

sensor

alert

check

warning

error

info

settings

upload

download

cloud

local

play

pause

stop

arrow-right

arrow-left

chevron-down

close

menu

search

language

calendar

clock

user

team

phone

mail

location

external-link

5.4插画Illustration

不用卡通插画。需要示意时用线框图：navy-700 线，Leaf 点缀，与图标同一笔触（圆头、1.75px 比例描边）。

正确：线框、透视作物行、Leaf 只做点缀

不这样做

卡通角色、拟人机器人、表情。
渐变填充、3D 渲染风、等距投影的“科技感”。
大面积绿色填充（绿只做点缀）。
与图标不同的笔触粗细或尖角。

图形语言与图标Graphics & Icons