科技感视觉规范（默认风格）
用户拿到的大屏应当“一眼高科技”：深色渐变底、霓虹渐变标题、发光数值、半透明渐变面板、统一的装饰语言。生成时默认按本文执行，除非用户明确要浅色/简约风。成品参考 ../../../../data/综合大屏/科技风/（01 科技蓝、02 荧光青、03 深空紫、04 极光绿，均可直接导入对照）。
1. 配色 token（四套预设，按行业选一套；同屏只用一套主色 + 1~2 个点缀色）
| 套系 | 页面背景(渐变) | 面板底(渐变) | 面板边框 | 主色/光色 | 次级文字 |
|---|---|---|---|---|---|
| 科技蓝(能源/政务) | linear-gradient(180deg,#020A18 0%,#081A38 55%,#04101F 100%) |
linear-gradient(160deg,rgba(10,28,56,0.72),rgba(5,16,36,0.78)) |
#14335F |
#00E5FF / #38BDF8 / #2E8BFF |
#7FA8D9 |
| 荧光青(工业/设备) | linear-gradient(180deg,#021512 0%,#06231D 55%,#021008 100%) |
linear-gradient(165deg,rgba(7,42,36,0.88),rgba(3,20,16,0.94)) |
#0F4D42 |
#00FFC6 / #00FFA8 |
#4FA08F |
| 深空紫(城市/交通) | linear-gradient(180deg,#07041A 0%,#150B38 55%,#0A0524 100%) |
linear-gradient(160deg,rgba(32,20,68,0.74),rgba(14,8,34,0.82)) |
#322562 |
#8B5CF6 / #A78BFA / #E879F9 |
#9C8CD0 |
| 极光绿(运维/互联网) | linear-gradient(180deg,#02120E 0%,#04281E 55%,#02140C 100%) |
linear-gradient(160deg,rgba(8,52,38,0.72),rgba(3,22,14,0.82)) |
#125842 |
#2EE6A8 / #22D3EE |
#4FA083 |
状态色全套系通用：正常 #00FFA8、警示 #FFC940/#FBBF24、告警 #FF5C7A、信息 #22D3EE。
渐变随处可用：页面/组件 background-color、graphical-color、text-font.color 都直接接受 CSS linear-gradient(...) 串——这是科技感的核心手段。
2. 装饰语言（每屏标配，全部用现有组件拼）
- 顶栏：标题用渐变文字 + 发光（
text-font.color渐变 +font-shadow-color主色 +font-shadow-blur:16~18+font-spacing:4~6），下衬一条横向光带（basic-graphicalrect 高 2px，linear-gradient(90deg, rgba(主色,0) 0%, rgba(主色,0.85) 50%, rgba(主色,0) 100%)），配英文小字副标题（11px 次级色font-spacing:5）、右上basic-timer实时时间、左上hexagon渐变六边形角标。 - 页面顶部辉光：全宽
basic-graphicalrect（高 ~200），linear-gradient(180deg, rgba(主色,0.13~0.16), transparent)，no-events:true。 - 面板：渐变底 + 1px 边框 + 圆角 12~14；面板标题=「左侧 4×20 渐变光条(
basic-graphical) + 17px 粗体标题 + 1px 半透明分隔线」三件套。 - KPI 数值：
basic-card，数值用渐变字 + 同色font-shadow（blur 12~14），上叠 13px 次级色 label 文本；不同指标可用不同光色（蓝/绿/青/琥珀）。 - 实时感：
LIVE圆点用basic-graphicalcircle +animation-display:true, animation-type:"blink", animation-loop:true；卡片底部可加「渐变光条」(linear-gradient(90deg,主色,transparent)高 3px)。 - 图表：轴线/分割线用面板边框同族暗色（如
chart-axis-color:"#1B3A66"），标签用次级文字色；折线smooth:true + show-symbol:false + show-area:true + area-opacity:24~32；柱图bar-radius:4~6 + show-label:true（柱体已内置主色→透明渐变）；横向排行用direction:"horizontal"。bar-color/line-color取套系主色，第二图换点缀色。 - 所有纯装饰元素一律
no-events:true，避免挡交互。
3. 铺满守则（必须，否则播放有黑边/留白）
每个 type:"screen" 节点 options 必写 layout-profile + fullscreen-mode，按需求三选一：
| 需求 | 配方 | 参考示例 |
|---|---|---|
| 固定大屏(演示/16:9 LED) | "layout-profile":"canvas-scale" + "fullscreen-mode":"fill-uniform" + "fill-auto-expand":true + static 布局 + 1920×1080 绝对坐标；内容排满整个画布（左右栏贴边 24px、底部留白 ≤24px） |
科技风 01/02、布局 13 |
| 百分比自适应(任意窗口比例) | "layout-profile":"canvas-percent" + "fullscreen-mode":"responsive" + static + 顶层组件全部 "geometry-unit":"percent"，面板再开 "panel-content-fit":"contain"（盒子百分比响应、内部 px 内容跟随缩放不被裁） |
科技风 03、布局 12 |
| 流式自适应(内容回流) | "layout-profile":"flow-fluid" + "fullscreen-mode":"responsive" + 根页面 fluid+column+"fluid-wrap":"nowrap" ；行高 px 的横条 + adaptive 主区吃满剩余；行内再嵌 fluid row 等分面板 |
科技风 04、布局 03 |
⚠️ 任何 fluid 容器（页面或面板），只要主轴上有 adaptive 子项，就必须显式 "fluid-wrap":"nowrap"：容器默认 wrap，而 adaptive 子项的 flex-basis 是 100%，于是每个子项各占一行/一列——横向等分列会竖着堆叠、后面的列被顶出画布（看起来"没有内容"）。只有卡片墙（子项 px 宽、刻意换行）才留 wrap，见 data/布局/适配/04。各行高度 px+adaptive 之和也不要超过视口。
⚠️ 流式页面的 fullscreen-mode 只能是 responsive（画像 flow-fluid 的族就一个值）。写成 fill-uniform/stretch 会把长页锁死在 1920×1080 设计画布里再整体缩放，失去回流与滚动。
既要不变形又要铺满用 "fill-uniform"（等比铺满·锚左上，空白由页面背景延展填充，背景为纯色/渐变时无缝）；严格保比可裁边用 "adaptive"。全部 8 值（含 fit-width/fit-height 单轴铺满滚动）见 envelope.md §4.1。
不变形 + 不留空（推荐替代 stretch 的第四种配方）："fullscreen-mode":"fill-uniform" + 主视觉配锚点 "responsive-x":"left-right","responsive-y":"top-bottom"（侧栏用 "right"+"top-bottom"）；懒得逐个配就在页面写 "fill-auto-expand":true 自动拉伸无锚点的地图/三维/组态/表格/布局容器，以及够大的卡片/图表。容器要保持卡片数不变写 "canvas-grow":"scale"。见 envelope.md §4.1。
自动填充内置四条构图规则（生成布局可以依赖）：① 叠在主视觉之上的浮层（图例/工具条）不挡主视觉扩展；② 左右边距对称（两侧 ≥96px 且基本相等）的居中盒扩展时保持居中；③ 并排的多列/多行填充候选按设计尺寸比例分配增量（后续列平移、间距不变、叠在其上的浮层跟着走；增量 <48px 或列带间隙里有非成员时回退为带尾吃满）；④ 被撑大的分组面板/固定面板（static、panel-content-fit 缺省/none）内部子项按同一套锚点+填充跟到新盒，贴原点且尺寸≈面板的铺满子项直接跟满（递归三层）。说明顶栏比主视觉宽但右侧还有贴边控件时，主视觉吃到控件左缘而不是钉在顶栏；右缘栏不拆横排 KPI 末卡（不依赖是否有装饰边框）；装饰边框撑开后框内横排/说明块再分一次增量；与贴边栏水平重叠的同侧小控件作为侧栏簇一起走。
⚠️ 仍需注意：组件平移只发生在「右缘窄栏 / 侧栏簇」与「并排带后续列」两处，要「贴着某条边走」必须写锚点；容器内要精确控制仍优先 "geometry-unit":"percent" 或锚点。
子布局在铺满下怎么选（容器都会被撑大，区别是子项怎么跟）：
layout-row（栅格 12 列×1 行）/layout-grid（分割树）：两轴按轨道比例自动回流，最省心，「三列等宽」首选这个而不是三个并排候选。layout-column（流式纵向"fluid-wrap":"nowrap"）：想让子项一起长高，子项写"fluid-width-type":"adaptive"+"fluid-height-type":"adaptive"（固定大屏页拖入时已是这个默认）；写成"fluid-height-type":"px"则增量堆在末尾留空。layout-flow-row（流式横向wrap）：子项保持 px、按宽度自然换行。换行容器里主轴不能用 adaptive（每项 flex-basis:100% 会各占一行而塌掉，见 gotchas #3）；要均分宽度就把容器改nowrap并给子项 adaptive。layout-fixed-panel/group-panel（static）：内部子项由嵌套回流跟到新盒（铺满子项直接跟满），或自己写锚点 / percent。
4. 数据循环容器卡片（设备墙等）
- 根页面/外层主区用
static（坐标固定），流式只放进data-repeater内部（卡片墙）。卡片区固定unit-size+overflow:"scroll-y"；详情面板固定position+size，互不挤压。 - 卡片状态变色：
dataRules(如 状态=告警) + 单元模板内文本的conditionalStyles切text-font——行作用域下按本行求值，每张卡独立变色（见科技风 02）。 - 需要实时变化用
mock连接器 +refreshInterval(3~5s)，字段wave(波动)/walk(游走)/sequence(序号)，并在connectionData放一帧初始 rows 便于编辑态预览。