# 指标与装饰组件（KPI 卡 / 翻牌器 / 图标 / 科技边框 / 装饰 / 管道）

> `basic-card`（KPI 发光数值主力）/ `basic-flipper` / `basic-icon` 与 `deco-border/decoration/pipeline`。
> 返回目录：[index.md](index.md)；全量选项字典（最权威）：[widget-schema.generated.json](../widget-schema.generated.json)。

## 11. 指标与装饰（KPI 卡 / 翻牌器 / 图标 / 科技边框 / 装饰 / 管道）

### 11.1 basic-card —— 数字卡片（KPI 数值）

- **type**: `basic-card`　**默认尺寸**: `[220,120]`　**默认名**: "数字卡片"
- 用途：大号 KPI 数值 + 单位（千分位/小数/百分比/数字滚动动画）。**科技风发光数值主力**（`text-font` 渐变 + `font-shadow-color`/`font-shadow-blur`）。自定义触发器：`itemClicked`。
- 格式化：`decimal-places`(小数位)+`complete-zero`(补零)、`comma-display`(千分位)、`percentage-format`、`integer-digits`(整数位补零)、`placeholder`(无数据占位)；示例值 `static-value`(1024)。
- 单位：`unit-text`+`unit-font`+`unit-position`(`after`/`before`)+`unit-gap`。
- 动画：`animation-display`(数字滚动)+`animation-duration`。三态：`show-click`/`show-hover`/`show-select` 各带文字/背景/边框覆盖。
- **绑定字段**：`value-field`(number,0~1)——⚠️ 实际是**全行求和**（`rows.reduce((s,r)=>s+Number(r[field]),0)`），不是"取首行值"：两行 `[1234,200]` 显示 `1,434`。要首行值请把数据预处理成单行。选中判定 `relationship-field`/`relationship-value`。

### 11.2 basic-flipper —— 翻牌器

- **type**: `basic-flipper`　**默认尺寸**: `[300,100]`　**默认名**: "翻牌器"
- 用途：机械翻页数字动画（累计量/计数器）。
- 关键项：`digit-length`(位数,不足左补 0)、`flip-type`(`down`/`up`)、`flip-speed`(ms)、`digit-width`/`digit-height`/`digit-gap`/`digit-radius`、`text-color`/`bg-color`；静态 `static-value`。
- **绑定字段**：`value`(number,0~1)——注意字段名是 `value` 而非 `value-field`（与 basic-card/basic-progress 不同）。绑定后 `textContent` 可能为空——翻牌数字是图形化渲染（sprite/绝对定位节点），验证渲染用 `querySelector` 找内部节点而非读文本。

### 11.3 basic-icon —— 图标

- **type**: `basic-icon`　**默认尺寸**: `[80,80]`　**默认名**: "图标"
- 用途：内置图标库图标（iconify 名如 `uim:rocket`）。自定义触发器：`itemClicked`。
- 关键项：`icon`(图标名)、`icon-color`、`icon-rotate`(0/1/2/3 档 = 0°/90°/180°/270°)；三态换图标/换色 `show-click`/`show-hover`/`show-select`+`icon-*`/`icon-color-*`；选中判定 `relationship-field`/`relationship-value`。

### 11.4 deco-border —— 装饰边框

- **type**: `deco-border`　**默认尺寸**: `[400,280]`　**默认名**: "装饰边框"
- 用途：科技感流动描边边框（套在区块外做视觉分区；**本身不是容器**，无 `widgets`，内容组件叠放其上）。
- 关键项：`main-color`/`accent-color`、`panel-background`(内衬底)、`anim-duration`+`flow-reverse`；标题 `border-title`+`border-title-size`/`border-title-color`/`border-title-width`。

### 11.5 deco-decoration —— 装饰

- **type**: `deco-decoration`　**默认尺寸**: `[500,40]`　**默认名**: "装饰"
- 用途：装饰线条/角标/图案，7 种预设 `decoration-style`(`d01`~`d06`、`d07` 圆点光环)。
- 关键项：`main-color`/`accent-color`、`anim-duration`、`deco-reverse`(镜像)；文字 `deco-text`+`deco-text-size`/`deco-text-color`（如页面主标题衬底）。

### 11.6 deco-pipeline —— 流程管道

- **type**: `deco-pipeline`　**默认尺寸**: `[400,40]`　**默认名**: "流程管道"
- 用途：带流动效果的管道装饰（轻量工艺连线；复杂工艺图用 `scada-2d`）。
- 关键项：`pipe-mode`(`pipe`直管/`branch`分支，分支再配 `branch-down`/`branch-up` 两个布尔)、`pipe-direction`、`pipe-color`/`flow-color`、`flow-state`(`forward`/`stop`/`backward`)、`flow-speed`、`line-width`。