# 媒体类组件（图片 / 图形 / 轮播 / 视频）

> `basic-image` / `basic-graphical`（科技风光带主力）/ `basic-carousel` / `basic-video`。
> 返回目录：[index.md](index.md)；全量选项字典（最权威）：[widget-schema.generated.json](../widget-schema.generated.json)。

## 9. 媒体类（图片 / 图形 / 轮播 / 视频）

### 9.1 basic-image —— 图片

- **type**: `basic-image`　**默认尺寸**: `[320,200]`　**默认名**: "图片"
- 关键项：`image`(file 引用或 URL)、`fill-style`(`fill`拉伸/`cover`/`contain`/`none`)；滤镜 `brightness`/`contrast`/`saturate`/`hue`；三态换图 `show-click`/`show-hover`/`show-selected` + `image-click`/`image-hover`/`image-selected`；动画 `animation-display`+`animation-type`(`scroll`/`blink`)。
- **绑定字段**：`image-field`(string,0~1，动态图片 URL)；选中判定 `relationship-field`/`relationship-value`。

### 9.2 basic-graphical —— 图形（矢量装饰主力）

- **type**: `basic-graphical`　**默认尺寸**: `[200,120]`　**默认名**: "图形"
- 用途：矩形/圆/多边形/箭头/线等矢量图形；**科技风大屏的光带/光条/角标全靠它**（`graphical-color` 支持 `linear-gradient(...)`）。自定义触发器：`itemClicked`。
- 关键项：`shape`(`rect`/`round-rect`+`shape-radius`/`circle`/`ellipse`/`triangle`/`right-triangle`/`diamond`/`pentagon`/`hexagon`/`star`/`parallelogram`/`trapezoid`/`arrow`/`line`)、`graphical-color`(填充,渐变)、`stroke-color`/`stroke-width`(描边)；三态 `show-click`/`show-hover`/`show-select` 各带填充/描边覆盖；动画 `animation-display`+`animation-type`(`scroll`/`blink` 闪烁=LIVE 圆点配方)+`animation-loop`。
- 装饰用法务必加 `no-events: true` 防挡交互。选中判定 `relationship-field`/`relationship-value`。

### 9.3 basic-carousel —— 轮播图

- **type**: `basic-carousel`　**默认尺寸**: `[400,260]`　**默认名**: "轮播图"
- 自定义触发器：`viewChanged`(切页)、`itemClicked`。
- 关键项：`autoplay`+`interval`(5s)、`effect`(`slide`/`fade`)、`fit`(`cover`/`contain`/`fill`)、`show-dots`/`show-arrow`、`radius`；静态图 `static-images`(每行一个 URL)。
- **绑定字段**：`image-field`(string,0~1) —— 每行一张图。

### 9.4 basic-video —— 视频

- **type**: `basic-video`　**默认尺寸**: `[400,260]`　**默认名**: "视频"
- 自定义触发器：`mediaEnded`(播放结束，配「播完切页/下一个」)。
- 关键项：`static-src`(视频地址)、`autoplay`/`loop`/`muted`(默认 true，自动播放需静音)/`controls`、`fit`、`radius`。
- **绑定字段**：`video-field`(string,0~1，动态视频地址)。