# 可导入示例目录（按意图检索）

按「你要做什么」找对应示例，抄结构改数据最快。路径约定：`examples/…` 为本目录内文件（最小可读）；`data/…` 为**工作区根**下的完整成品工程（可直接导入编辑器对照）。**先按标签命中一两个示例精读，不要通读。**

> **全部示例均有 `.vp.tsx` 配对**（同目录同名）：手写 TSX 源（`data/三维/场景`、`data/三维/元素`，含循环/工厂/注释惯例）或从 JSON 机器导出并经**回编译等值验证**的配对。**默认产出路径是 TSX**（见 [reference/vptsx.md](../references/vptsx.md)）——学写法抄 `.vp.tsx`，查持久化形态看 `.vpproj.json`，两者语义等价。

> **可移植性**：`data/…` 是完整示例库，不随本技能分发，工作区里默认不存在。技能核心**自包含**（规范文档 + widget-schema + 校验器 + 本目录最小示例），缺 `data/` 不影响生成，只是少了成品对照。要取示例，二选一：
> ① 目标环境接了平台后端 MCP：用 `list_examples` / `get_example` 工具远程取精选示例；
> ② 手动把需要的 `data/<子目录>` 拷到目标工作区根，保持相对位置。
> 另注：VP-TSX 离线编译链（模式 A）在外部工作区需要 `npm i -D tsx typescript`。

## 最小上手（本目录，结构最小、便于逐字段学习）

| 文件 | 标签 | 说明 |
|---|---|---|
| [minimal-bar.json](minimal-bar.json) | 入门 / 柱状图 / json 连接 | 最小完整工程：一屏一图一连接 |
| [map-2d.json](map-2d.json) | 地图 / pieces | map-body + 标记图层的最小地图工程 |
| [postmessage-linkage.json](postmessage-linkage.json) | 外部数据 / postMessage | iframe 场景外部推数联动 |
| [filter.json](filter.json) | 数据筛选 | `filter` + `row-filter-mode` 组件级筛选 |
| [linkage.json](linkage.json) | 联动 | `cross-filter-emit/receive` 点击联动 |
| [selection-passing.json](selection-passing.json) | 选中传递 | `select-sync-*` + 表格 `select-sync-fields` |
| [dynamic-data-item.json](dynamic-data-item.json) | 动态数据项 | `dynamic-prop-fields` JSON 串键写法 |
| [conditional-style.json](conditional-style.json) | 条件样式 | 节点顶层 `conditionalStyles` + dataRules |
| [secondary-dev-selection.json](secondary-dev-selection.json) | 二开选中 | 用中间组件等价复现 applySelection |
| [property-data-source.json](property-data-source.json) | 属性数据源 | 组件属性反向产出连接（三处缀合） |
| [scada-pump-tank.json](scada-pump-tank.json) | 组态 / 测点长表 | scada-2d 最小工程：泵→罐→连线 + `point-key/value-field` 长表驱动（液位+状态色） |

## 科技风成品大屏（视觉基准，生成前优先对照）

| 路径 | 标签 | 说明 |
|---|---|---|
| `data/综合大屏/科技风/01-能源监控指挥中心-固定1920-科技蓝.vpproj.json` | 固定大屏 / canvas-scale+fill-uniform | 顶栏光带/发光 KPI/装饰语言全套 |
| `data/综合大屏/科技风/02-设备运行监控中心-固定1920-荧光青.vpproj.json` | 固定大屏 / data-repeater / mock 实时 | 设备卡片墙 + 条件变色 |
| `data/综合大屏/科技风/03-城市运行态势-百分比自适应-深空紫.vpproj.json` | 百分比自适应 / canvas-percent | 任意窗口比例 |
| `data/综合大屏/科技风/04-实时运营仪表盘-流式自适应-极光绿.vpproj.json` | 流式自适应 / flow-fluid | 内容回流布局 |

## 布局与铺满

| 路径 | 标签 | 说明 |
|---|---|---|
| `data/布局/适配/`（20 个） | 铺满 / 安全区 / 流式 / 等比铺满 | 01 全屏适配安全区、02 三段式骨架、03 纵向自适应仪表盘、04 横向卡片墙、05 响应式等分列、06 静态画布内嵌套流式、07/08/12 地图为底悬浮面板、09 cover 裁切、10/11 单轴铺满滚动、**13 自动填充地图指挥、14 锚点侧栏、15 行布局回流、16 stretch 对照(会变形)、17 地图+表格双候选、18 组态画板(canvas-grow=scale 侧栏)、19 三维场景(锚点+自动填充共存)、20 左右双面板+底部按钮排** |
| `data/布局/容器/`（11 个） | 布局控件 / layout-* | 行/列/网格/流式行/固定面板/侧边栏/手风琴/选项卡/嵌套/综合，每个一整屏成品 |
| `data/数据交互/全屏适配-等比不变形铺满-fill-uniform.vpproj.json` | fill-uniform + fill-auto-expand | 不变形铺满；主视觉吃掉撑开的画布 |
| `data/数据交互/网格子格-装饰边框背景叠按钮与列表.vpproj.json` | grid 布局 / deco-border | 网格子格装饰组合 |

## 组件级示例（单组件用法）

| 路径 | 标签 | 说明 |
|---|---|---|
| `data/组件/入门/`（29 个） | 逐组件最小示例 | 文件名即组件（`01-文本-basic-text` … `29-交互反馈-hover与状态`）；重点：25/26 data-repeater（基础派生/项级事件）、27 视图容器+导航、28 设备差异化 |
| `data/组件/详细/`（50 个） | 逐组件全选项演示 | 文件名=`中文名-type-详细示例`，覆盖全部常用 widget |
| `data/组件/专题/`（6 个） | 新图表 / 榜单媒体 / 小组件 | 分布/关系/占比排行/榜单/图标/事件联动，百分比自适应成屏 |

## 数据与交互特性

| 路径 | 标签 | 说明 |
|---|---|---|
| `data/数据交互/事件交互.vpproj.json` | 触发器→动作全集 | 点击/移入移出/入场/数据项点击/行点击/行为事件/页面入场/数据规则满足/切页面/传递触发 |
| `data/数据交互/数据筛选.vpproj.json`、`data/数据交互/选中传递.vpproj.json`、`data/数据交互/条件样式.vpproj.json`、`data/数据交互/动态数据项.vpproj.json`、`data/数据交互/属性数据源.vpproj.json`、`data/数据交互/二次开发触发选中传递.vpproj.json` | 数据交互完整版 | examples/ 最小版的成屏版本 |
| `data/数据交互/数据联动示例.vpproj.json` | 联动综合 | 多组件 cross-filter 组合 |
| `data/数据交互/多状态切换.vpproj.json` | 多状态 | switchState / useCurrentRuleField / followScreenStates 三种切法 |
| `data/数据交互/定时器与接口.vpproj.json` | 轮询 | 页面 timer 触发器 + requestApi 动作（⚠️ 页面 timer 只在编辑器内预览跑，/view、SDK 不触发） |
| `data/数据交互/悬浮弹层-tooltip与hover卡片与点击popover.vpproj.json` | hover-popup | 悬浮弹层三形态 |
| `data/数据交互/二次开发脚本-5个复杂示例.vpproj.json` | Extension 脚本 | 生命周期与元素/工程 API |

## 容器复用 / 窗口 / 组合组件

| 路径 | 标签 | 说明 |
|---|---|---|
| `data/组件/组合/`（4 个） | component-instance / 母版-实例 | 01 组内事件联动、02 组内数据 KPI(连接随组件打包)、03 组内互调搜索筛选、04 母版与实例(props/overrides) |
| `data/数据交互/窗口交互-设备详情弹窗.vpproj.json` | switchWindow | 模态窗开关 |
| `data/数据交互/窗口体系-锚定标题栏地图信息窗.vpproj.json` | 锚定窗口 | 标题栏+地图信息窗 |
| `data/数据交互/画面组件-*.vpproj.json`（5 个） | window-instance | 复用/数据事件与嵌套/跨作用域交互与容器内嵌/深层嵌套与循环守护/运行监控大屏 |

## 2D 地图

| 路径 | 标签 | 说明 |
|---|---|---|
| `data/地图/图层与源/`（70+ 个） | 数据源 / 图层全集 / 服务 / 控件 / 右键菜单 | 11/15 数据源总览、13 标绘全集、19~58 每图层一例、59 特效预设墙、60~64 控件、65/66 数据驱动样式、67/68 右键菜单、信息窗美化系列 |
| `data/地图/叠加/`（15 个） | WMS/WMTS / CAD↔互联网互叠 | 含四参数旋转叠加、多图叠加、叠加图上点选 CAD 实体 |
| `data/地图/控件/`（7 个） | map-control-* 成屏 | 操作控制台/图层中心/CAD 总控/指挥中心/鹰眼/测绘工作台 |

SDK playground `09-map` 已覆盖 sys_zp / 互联网底图 / 叠加 01–15（需联网）；01/02 仍是离线空白教学。

## 组态（scada-2d）

| 路径 | 标签 | 说明 |
|---|---|---|
| `data/组态/`（18 个，编号 01–16 + 20/21） | 工艺流程 / 测点驱动 / 主题 / 开源符号 / 序列帧 / 行业图像 | 01 智慧水厂全功能(mock 实时)、02/03 工业组件与 SVG 符号、04 能源(电力/新能源/油气)、05 水务暖通、06 天气粒子特效、07 动画连接(值驱动旋转移动缩放显隐/按值流速)、08 2.5D 等轴测泵站、09 换热站远程监控 2.0、10 ISA-101 HP-HMI 开源符号工艺+按值换图、11 ThingsBoard HP 高画质厂区+按值换图（素材目录组态素材，Apache-2.0）、**12 精灵图动画(序列帧图片图元：横排/网格/竖排 + 起停/帧率/倒放 + 按值起停/按值选帧 + 按钮 scadaSetOption 指定第几张 + 旋转缩放与其它图元同权)**、**13 行业图像集画廊**、**14 水务工艺序列帧/按值换图**、**15 2.5D 场站等轴测+序列帧**、**16 煤矿采运提皮带/瓦斯序列帧**、**20 生成图复原-化工储运罐区(抠图组件复原生成场景 + 2.5D 摆位三条硬约束的参考实现)**、**21 生成图复原-煤矿井口洗选(井架/储煤仓/洗选楼/装车站 + 皮带走带与主扇通风机序列帧)**（13/14/15/16/20/21 素材见 images 目录，20/21 用 `/scada-images/` URL + mock 测点/开关交互） |

## 三维场景（scene-3d）

| 路径 | 标签 | 说明 |
|---|---|---|
| `data/三维/元素/`（40 对 tsx+json） | 逐元素示例 | 每个 piece type 一对（01 scene … 40 persons 人员点位），学单元素选项首选，README 有全表 |
| `data/三维/场景/`（45 对 tsx+json） | 逐功能→综合大屏 | 01~18 逐功能、19~30 综合大屏、31~39 GIS 与新能力、40~42 组态实战(冷站群控/化工罐区/110kV 变电站)、43 人员定位系统(CAD 巷道+人员点位)、44 智慧家居全屋智控、45 收费站管理云平台(车流+子对象分流)，README 有全表 |
| `data/综合大屏/样板/综合工程-智慧供热能源站-三维组态二维联动.vpproj.json` | 三维+二维联动 | scene-3d 与 2D 组件跨页联动 |

## 复杂综合 / 真实案例

| 路径 | 标签 | 说明 |
|---|---|---|
| `data/综合大屏/复杂/`（9 个） | 综合能力压测 | 深层嵌套/多页事件/多状态监控/数据交互/定时器实时/地图指挥/CAD 指挥/设备差异化/窗口体系 |
| `data/综合大屏/样板/样板工程-城市智慧水务调度平台.vpproj.json` | 样板工程 | 完整业务大屏 |
| `data/综合大屏/真实案例/城市燃气集团智慧调度平台.vpproj.json` | 真实案例 | 生产级工程参考 |
| `data/平台/`（2 个） | pocketbase / requestApi | 平台数据表与脚本口（依赖部署环境，生成工程时不要用 pocketbase 连接器） |