# 科技感视觉规范（默认风格）

**用户拿到的大屏应当“一眼高科技”**：深色渐变底、霓虹渐变标题、发光数值、半透明渐变面板、统一的装饰语言。生成时**默认按本文执行**，除非用户明确要浅色/简约风。成品参考 `../../../../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-graphical` rect 高 2px，`linear-gradient(90deg, rgba(主色,0) 0%, rgba(主色,0.85) 50%, rgba(主色,0) 100%)`），配英文小字副标题（11px 次级色 `font-spacing:5`）、右上 `basic-timer` 实时时间、左上 `hexagon` 渐变六边形角标。
- **页面顶部辉光**：全宽 `basic-graphical` rect（高 ~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-graphical` circle + `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](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 便于编辑态预览。