可导入示例目录（按意图检索）
按「你要做什么」找对应示例，抄结构改数据最快。路径约定：examples/… 为本目录内文件（最小可读）；data/… 为工作区根下的完整成品工程（可直接导入编辑器对照）。先按标签命中一两个示例精读，不要通读。
全部示例均有 .vp.tsx 配对（同目录同名）：手写 TSX 源（data/三维/场景、data/三维/元素，含循环/工厂/注释惯例）或从 JSON 机器导出并经回编译等值验证的配对。默认产出路径是 TSX（见 reference/vptsx.md）——学写法抄 .vp.tsx，查持久化形态看 .vpproj.json，两者语义等价。
可移植性：data/… 是完整示例库，不随本技能分发，工作区里默认不存在。技能核心自包含（规范文档 + widget-schema + 校验器 + 本目录最小示例），缺 data/ 不影响生成，只是少了成品对照。要取示例，二选一：
① 目标环境接了平台后端 MCP：用 list_examples / get_example 工具远程取精选示例；
② 手动把需要的 data/<子目录> 拷到目标工作区根，保持相对位置。
另注：VP-TSX 离线编译链（模式 A）在外部工作区需要 npm i -D tsx typescript。
最小上手（本目录，结构最小、便于逐字段学习）
科技风成品大屏（视觉基准，生成前优先对照）
| 路径 |
标签 |
说明 |
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 标绘全集、1958 每图层一例、59 特效预设墙、6064 控件、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） |
逐功能→综合大屏 |
0118 逐功能、1930 综合大屏、3139 GIS 与新能力、4042 组态实战(冷站群控/化工罐区/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 连接器） |
