@anov/gis-skills-cli 0.0.0-stage → 0.3.0

package/skills/anovgis-popup-widget/SKILL.md

@@ -0,0 +1,474 @@
+---
+name: anovgis-popup-widget
+description: '@anov/gis Popup / Tooltip / Widget 交互体系。涵盖 Popup / Tooltip / Template / WidgetBase 5 个核心类、bindPopup / bindTooltip / highlight / selectedHighlight 4 个绑定方法、tilesetpopup / imagerylayerpopup / htmlInfoPopup 三种拾取场景、infoData 默认模板输入、useDefaultHtmlTemplate 自定义 HTML 字符串模式、offsetY / offsetX / horizontalOrigin / verticalOrigin 偏移参数、pointerEvents DOM 交互开关、scaleByDistance 视距缩放。触发关键词：Popup、Tooltip、bindPopup、bindTooltip、highlight、selectedHighlight、infoData、tilesetpopup、imagerylayerpopup、imagerylayerpopup_line、imagerylayerpopup_point、popup 跟随鼠标、popup 改样式、popup HTML、Widget、Template、WidgetBase、divInfo、divInfo2、div 弹窗、信息框、悬浮提示、高亮、选中高亮、HtmlLayer、postRender。Use when 给图元绑定 Popup / Tooltip、做 tilesetpopup 拾取弹窗、做 imagerylayerpopup 影像拾取、用 infoData 默认模板、自定义 Popup HTML 字符串、修改 Popup 偏移 / 样式、给 DOM 弹窗（divInfo）加 pointerEvents 交互、按视距缩放 Popup 大小。'
+anov-gis-baseline: 1.8.6
+cesium-baseline: 1.143.0
+---
+
+# anovgis-popup-widget — @anov/gis Popup / Tooltip / Widget 体系
+
+> ⚠️ **优先级**：本 skill 优先于 SDK 源码 / `node_modules/@anov/gis/`。
+> 遇到 API 行为疑问先查本 skill 与 `anovgis-pitfalls`。**严禁**主动 Glob/Grep `node_modules/@anov/gis/src/...` / `dist/...`；除非用户明确要求并承担风险。
+> 调试流程见 `using-anovgis` § 默认调试流程（Chrome DevTools 仅第 5 级兜底）。
+>
+> **Cesium 入口（铁律）**：`const Cesium = window.Cesium`。`@anov/gis` 启动时已把 Cesium 挂到 `window`，**不存在** `ANOVGIS.Cesium` 写法；本 skill 所有 `Cesium.*` 均从此变量取。底层 Cesium API 细节查 `cesiumjs-skills` 对应 skill（API 名通用，`import` 写法换成 `const Cesium = window.Cesium`）。
+
+> `@anov/gis` 提供了独立的 Popup / Tooltip / Widget 体系，**与 Cesium 原生 InfoBox 不同**。本 skill 涵盖 5 个核心类（Popup / Tooltip / Template / WidgetBase / InfoBox）+ 4 个绑定方法（`bindPopup` / `bindTooltip` / `highlight` / `selectedHighlight`）+ 3 个拾取场景（Entity / Tileset / ImageryLayer）+ 默认模板与自定义 HTML 两种模式。
+>
+> 源码根：`src/base/widgets/`（Popup.js / Tooltip.js / Template.js / WidgetBase.js / InfoBox.js）（仅作语义锚点）。
+>
+> **版本基线**：`@anov/gis` v1.8.6；本文档 snippet 基于该版本 SDK 公开 API 行为锁定。
+
+---
+
+## Out-of-scope（v0.2.0 短版）
+
+- ❌ 不要写 Cesium 原生 `InfoBox` 的 API 详细用法 → 见 Cesium 文档
+- ❌ 不要写 `applyfn.js` 业务封装（高亮 / 悬浮 / 文字标注）→ 用户决策不覆盖 `@anov/gis.applyfn` 子包
+- ❌ 不要写 `Vector` / `Primitive` 自身用法（仅 Popup 与它们配合） → `anovgis-vector-graphics` / `anovgis-primitives`
+- ❌ 不要写 `viewer.addEventListener` 全局事件 → `anovgis-viewer`
+
+---
+
+## 1. 类速查表
+
+| 类 | src | 用途 |
+|---|---|---|
+| `Popup` | `src/base/widgets/Popup.js` | 信息框主体；`show(position, data)` / `hide()` |
+| `Tooltip` | `src/base/widgets/Tooltip.js` | 悬浮提示；`show(position, data)` / `hide()` |
+| `Template` | `src/base/widgets/Template.js` | 默认 HTML 模板（`useDefaultHtmlTemplate: true` 时用） |
+| `WidgetBase` | `src/base/widgets/WidgetBase.js` | 弹窗基础类（位置 / 偏移 / 显隐 / 销毁） |
+| `InfoBox` | `src/base/widgets/InfoBox.js` | 信息框面板（与 WidgetEventType.OPEN / CLOSE 联动） |
+
+### 1.1 绑定方法（在 Graphic / Layer / ImageryLayer 上）
+
+| 方法 | 签名 | 用途 |
+|---|---|---|
+| `bindPopup(opts)` | `bindPopup({ viewer, showTitle, useDefaultHtmlTemplate, offsetX, offsetY, ... })` | 绑定 Popup，click 时自动弹 |
+| `bindTooltip(opts)` | `bindTooltip({ viewer, showTitle, offsetY, useDefaultHtmlTemplate, ... })` | 绑定 Tooltip，hover 时自动弹 |
+| `highlight`（构造 options） | `{ material, color, pixelSize, outlineColor, outlineWidth }` | 鼠标悬停样式（自动切换，无需手动 bind） |
+| `selectedHighlight`（构造 options） | 同上 | click 选中后保持高亮样式 |
+
+> **注意**：`highlight` / `selectedHighlight` 是构造 options（不是方法），传了就生效。
+
+### 1.2 事件常量（`anovgis-viewer` 已列）
+
+- `MouseEventType.CLICK` — 触发 Popup
+- `MouseEventType.MOUSE_MOVE` — 触发 Tooltip
+- `WidgetEventType.OPEN` / `CLOSE` — 弹窗生命周期
+
+---
+
+## 2. 三种拾取场景速查
+
+| 场景 | demo | 关键代码 |
+|---|---|---|
+| **Entity / Vector 图元** | `event/popup.html`、`event/tooltip.html` | `bindPopup` + `infoData` + `layer.addEventListener(CLICK, e => popup.show(e.position, e.graphic.infoData))` |
+| **3D Tiles** | `event/tilesetpopup.html`、`event/tilesetpopup1.html` | `bindPopup` + `e.feature.getProperty('xxx')` 取属性 |
+| **ImageryLayer (WMS / 影像)** | `event/imagerylayerpopup.html`、`event/imagerylayerpopup_line.html`、`event/imagerylayerpopup_point.html` | `wms.bindPopup({ viewer })` + `e.feature.data.properties['xxx']` |
+
+---
+
+## 3. Snippet（15 个，覆盖 5 类 + 4 方法 + 3 场景 + 2 模板模式）
+
+<a id="s1"></a>
+### S1. Point + Popup + infoData 默认模板
+
+```js
+// 来源: examples/public/examples/html/event/popup.html L48-92
+const layer = new ANOVGIS.VectorLayer({ id: 'pt-layer' });
+viewer.addLayer(layer);
+
+const v = new ANOVGIS.Point(position, {
+    color: ANOVGIS.Color.WHITE,
+    pixelSize: 12,
+    infoData: {
+        title: '标题',
+        fieldsMap: [
+            { nameC: '编号', value: 123 },
+            { nameC: '姓名', value: '单位名称' }
+        ]
+    }
+});
+v.bindPopup({ viewer, showTitle: true, useDefaultHtmlTemplate: true });
+v.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
+    v.popup.show(e.position, e.graphic.infoData);
+});
+layer.addGraphic(v);
+```
+
+<a id="s2"></a>
+### S2. Polygon 高亮 + Popup（highlight 构造 options）
+
+```js
+// 来源: examples/public/examples/html/graphics/polygon.html L60-82
+const polygon = new ANOVGIS.Polygon(
+    '116.0,42.0;112.0,42.0;118.0,40.0',
+    {
+        material: 'rgba(255,0,0,0.5)',
+        highlight: { material: 'rgba(255,255,0,0.6)' },    // 鼠标悬停变黄
+        selectedHighlight: { material: 'rgba(255,0,255,0.6)' },  // 选中后变紫
+        infoData: { title: '区域 A', fieldsMap: [{ nameC: '面积', value: '120 km²' }] }
+    }
+);
+polygon.bindPopup({ viewer, showTitle: true, useDefaultHtmlTemplate: true });
+polygon.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
+    polygon.popup.show(e.position, polygon.infoData);
+});
+```
+
+<a id="s3"></a>
+### S3. Tooltip 鼠标悬浮提示
+
+```js
+// 来源: examples/public/examples/html/event/tooltip.html
+const point = new ANOVGIS.Point([116.40, 39.90], {
+    pixelSize: 12, color: ANOVGIS.Color.RED,
+    infoData: { title: '提示', fieldsMap: [{ nameC: '类型', value: 'POI' }] }
+});
+point.bindTooltip({ viewer, showTitle: true, offsetY: '-10', useDefaultHtmlTemplate: true });
+point.addEventListener(ANOVGIS.MouseEventType.MOUSE_MOVE, (e) => {
+    point.tooltip.show(e.position, e.graphic.infoData);
+});
+point.addEventListener(ANOVGIS.MouseEventType.MOUSE_OUT, () => {
+    point.tooltip.hide();
+});
+```
+
+### S4. Tileset 拾取 Popup（tilesetpopup 标准模式）
+
+```js
+// 来源: examples/public/examples/html/event/tilesetpopup.html L48-93
+const layer = new ANOVGIS.TilesetLayer();
+viewer.addLayer(layer);
+
+const tileset = new ANOVGIS.Tileset({
+    url: buildConfig.gisStatic + 'model/tileset.json',
+    highlight: { color: '#ff0000' },
+    selectedHighlight: { color: 'rgba(255,0,255,0.8)' }
+});
+layer.addGraphic(tileset);
+
+layer.bindPopup({ viewer, showTitle: true, useDefaultHtmlTemplate: true });
+layer.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
+    layer.popup.show(e.position, {
+        title: e.feature.getProperty('name1'),
+        fieldsMap: [
+            { nameC: '名称', value: e.feature.getProperty('name1') },
+            { nameC: '楼层', value: e.feature.getProperty('floor') }
+        ]
+    });
+});
+```
+
+### S5. Tileset Tooltip（mouse_move + property）
+
+```js
+// 来源: examples/public/examples/html/event/tilesetpopup.html L108-122
+layer.bindTooltip({ viewer, showTitle: false, offsetY: '-10', useDefaultHtmlTemplate: true });
+layer.addEventListener(ANOVGIS.MouseEventType.MOUSE_MOVE, (e) => {
+    layer.tooltip.show(e.position, e.feature.getProperty('name1') || '悬停提示');
+});
+```
+
+### S6. ImageryLayer (WMS) Popup（imagerylayerpopup 标准模式）
+
+```js
+// 来源: examples/public/examples/html/event/imagerylayerpopup.html
+const wms = ANOVGIS.ImageryLayerFactory.createImageryLayer(ANOVGIS.ImageryType.WMS, {
+    url: 'http://server.mars3d.cn/geoserver/mars/wms',
+    layers: 'mars:hf',
+    parameters: { transparent: true, format: 'image/png' },
+    rectangle: Cesium.Rectangle.fromDegrees(116.85, 31.53, 117.63, 32.16),
+    getFeatureInfoParameters: { feature_count: 10 },
+    selectedHighlight: { material: 'rgba(255,255,0,0.6)', height: 0.01 }
+});
+wms.bindPopup({ viewer, showTitle: true, useDefaultHtmlTemplate: true });
+wms.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
+    wms.popup.show(e.position, {
+        title: 'wms',
+        fieldsMap: [{ nameC: '名称', value: e.feature.data.properties['用地名称'] || '未知' }]
+    });
+});
+viewer.imageryLayers.addImageryProvider(wms);
+```
+
+### S6b. WMS 影像线拾取 — `event/imagerylayerpopup_line.html` L24-L93
+
+```js
+// 来源: imagerylayerpopup_line.html L28-91
+// 与 S6 的关键差异: getFeatureInfoParameters.query_layers 强制只查线图层
+// selectedHighlight.width 控制高亮线宽
+const wms = ANOVGIS.ImageryLayerFactory.createImageryLayer(ANOVGIS.ImageryType.WMS, {
+    url: 'https://ahocevar.com/geoserver/wms',
+    layers: 'ne:ne',
+    parameters: { transparent: true, format: 'image/png' },
+    rectangle: Cesium.Rectangle.fromDegrees(73, 18, 135, 53),
+    getFeatureInfoParameters: {
+        feature_count: 10,
+        query_layers: 'ne:ne_10m_admin_1_states_provinces_lines_shp'  // 强制只查线图层
+    },
+    selectedHighlight: { material: 'rgba(255,255,0,0.6)', width: 5, height: 0.01 }
+});
+wms.bindPopup({ viewer, showTitle: true, useDefaultHtmlTemplate: true });
+wms.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
+    const p = e.feature.data.properties || {};
+    wms.popup.show(e.position, {
+        title: e.feature.data.id || '没有名字',
+        fieldsMap: [
+            { nameC: '编号', value: e.feature.data.id },
+            { nameC: '类别', value: p.featurecla },
+            { nameC: '左侧', value: p.name_l },
+            { nameC: '右侧', value: p.name_r },
+        ]
+    });
+});
+viewer.imageryLayers.addImageryProvider(wms);
+```
+
+### S6c. WMS 影像点拾取 — `event/imagerylayerpopup_point.html` L24-L103
+
+```js
+// 来源: imagerylayerpopup_point.html L28-101
+// 与 S6 的关键差异: selectedHighlight 用 width:39, height:39 实现大圆点高亮
+const wms = ANOVGIS.ImageryLayerFactory.createImageryLayer(ANOVGIS.ImageryType.WMS, {
+    url: 'https://ahocevar.com/geoserver/wms',
+    layers: 'ne:ne_10m_populated_places',
+    parameters: { transparent: true, format: 'image/png' },
+    rectangle: Cesium.Rectangle.fromDegrees(73, 18, 135, 53),
+    getFeatureInfoParameters: { feature_count: 10 },
+    selectedHighlight: {                                  // 点高亮
+        color: 'rgba(255,0,255,0.99)',
+        width: 39, height: 39
+    }
+});
+wms.bindPopup({ viewer, showTitle: true, useDefaultHtmlTemplate: true });
+wms.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
+    const p = e.feature.data.properties || {};
+    wms.popup.show(e.position, {
+        title: p.NAME || e.feature.data.id || '未查到名称',
+        fieldsMap: [
+            { nameC: '国家', value: p.ADM0NAME },
+            { nameC: '省级', value: p.ADM1NAME },
+            { nameC: '人口(万)', value: p.POP_MAX != null ? Math.round(p.POP_MAX / 10000) : '未知' },
+            { nameC: '首都',   value: p.ADM0CAP == 1 ? '是' : '否' },
+            { nameC: '海拔(m)', value: p.ELEVATION },
+        ]
+    });
+});
+viewer.imageryLayers.addImageryProvider(wms);
+```
+
+### S7. 自定义 HTML 字符串 Popup（非默认模板）
+
+### S7. 自定义 HTML 字符串 Popup（非默认模板）
+
+```js
+// 来源: examples/public/examples/html/event/popup.html L48-92 + graphics/divInfo.html
+const htmlContent = `
+    <div class="custom-popup">
+        <h3>${entity.name}</h3>
+        <p>坐标：${entity.position.lng}, ${entity.position.lat}</p>
+        <button onclick="alert('Clicked!')">操作</button>
+    </div>
+`;
+v.bindPopup({ viewer, useDefaultHtmlTemplate: false });    // 关闭默认模板
+v.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
+    v.popup.show(e.position, htmlContent);                  // 直接传 HTML 字符串
+});
+```
+
+### S8. Popup 偏移与对齐
+
+```js
+// 来源: src/base/widgets/Popup.js + examples
+v.bindPopup({
+    viewer, showTitle: true, useDefaultHtmlTemplate: true,
+    offsetX: 0,            // 水平偏移（像素）
+    offsetY: -20,          // 垂直偏移（像素）
+    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,  // 锚点
+    verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+});
+```
+
+### S9. DOM 弹窗（DivIcon）+ pointerEvents 交互
+
+```js
+// 来源: examples/public/examples/html/graphics/divInfo.html L111-135
+const layer = new ANOVGIS.HtmlLayer({ layerName: 'info' });
+viewer.addLayer(layer);
+
+const div = new ANOVGIS.DivIcon(
+    new ANOVGIS.Position(116.38, 39.10, 1),
+    `<div class="boxbg">
+        <img src="../modelData/images/gyqy.png" />
+        <div class="div-right">天然纤维是自然界原有的...</div>
+        <button onclick="alert('点击了')">详情</button>
+    </div>`
+);
+div.setOptions({
+    horizontalOrigin: 'CENTER', verticalOrigin: 'TOP',
+    offsetX: 0, offsetY: -60,
+    pointerEvents: true,    // 开启后 DOM 可交互（点击、滚动）
+    scaleByDistance: { near: 0, nearValue: 1.0, far: 10000, farValue: 0.0 }
+});
+div.addEventListener(ANOVGIS.MouseEventType.CLICK, () => alert('点击了'));
+layer.addGraphic(div);
+```
+
+### S10. 按视距缩放 Popup
+
+```js
+// 来源: src/base/widgets/WidgetBase.js
+v.bindPopup({
+    viewer, showTitle: true, useDefaultHtmlTemplate: true,
+    scaleByDistance: new ANOVGIS.NearFarScalar(
+        100, 1.0,           // 100m 内全尺寸
+        10000, 0.1          // 10000m 外缩到 0.1
+    )
+});
+```
+
+### S11. 手动控制 Popup 显隐
+
+```js
+// 来源: src/base/widgets/Popup.js
+const popup = v.popup;      // bindPopup 后 v 上有 popup 实例
+popup.show(Cesium.Cartesian3.fromDegrees(116.40, 39.90), infoData);
+popup.hide();                // 关闭
+popup.toggle();              // 切换显隐
+// 销毁
+popup.destroy();
+```
+
+### S12. Template 自定义模板（高级）
+
+```js
+// 来源: src/base/widgets/Template.js
+// SDK 默认模板在 Template.js 中定义。需深度自定义时，可继承 Template 重写 render
+class MyTemplate extends ANOVGIS.Template {
+    render(infoData) {
+        return `
+            <div class="my-popup">
+                <h2>${infoData.title}</h2>
+                ${infoData.fieldsMap.map(f => `
+                    <div><label>${f.nameC}:</label><span>${f.value}</span></div>
+                `).join('')}
+            </div>
+        `;
+    }
+}
+v.bindPopup({
+    viewer, useDefaultHtmlTemplate: true,
+    template: new MyTemplate()    // 注入自定义模板
+});
+```
+
+### S13. WidgetEventType 监听弹窗生命周期
+
+```js
+// 来源: src/base/event/EventType.js
+v.popup.addEventListener(ANOVGIS.WidgetEventType.OPEN, () => {
+    console.log('popup opened');
+});
+v.popup.addEventListener(ANOVGIS.WidgetEventType.CLOSE, () => {
+    console.log('popup closed');
+});
+```
+
+### S14. 整 layer 统一 bindPopup（VectorLayer bindPopup 模式）
+
+```js
+// 来源: examples/public/examples/html/event/popup.html L48-92
+const layer = new ANOVGIS.VectorLayer();
+viewer.addLayer(layer);
+layer.bindPopup({ viewer, showTitle: true, useDefaultHtmlTemplate: true });
+
+// 所有 graphic 自动有 popup（前提是 graphic.options.infoData 有值）
+layer.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
+    layer.popup.show(e.position, e.graphic.infoData);
+});
+```
+
+### S15. Popup 内容动态更新
+
+```js
+// 来源: src/base/widgets/Popup.js
+v.popup.show(position, { title: 'A', value: 1 });
+// 3 秒后更新内容（不要 hide + show，直接 update）
+setTimeout(() => {
+    v.popup.update({ title: 'A（已更新）', value: 2 });
+}, 3000);
+```
+
+---
+
+## 4. 模板与字段格式
+
+### 4.1 infoData 默认格式
+
+```js
+infoData = {
+    title: '标题',                              // 主标题
+    fieldsMap: [                                // 字段映射数组
+        { nameC: '名称', value: '北京' },        // nameC = 列名中文, value = 值
+        { nameC: '人口', value: 21540000 },
+        { nameC: '面积', value: '16410 km²' }
+    ]
+}
+```
+
+`useDefaultHtmlTemplate: true` 时，SDK 走 `Template.js` 中的默认 HTML 模板渲染 infoData。
+
+### 4.2 自定义 HTML 字符串
+
+```js
+popup.show(position, '<div>任意 HTML</div>');    // 直接传字符串
+```
+
+`useDefaultHtmlTemplate: false` 时，第二个参数就是 HTML 字符串本身。
+
+### 4.3 Template 高级自定义
+
+继承 `ANOVGIS.Template`，重写 `render(infoData)` 方法，返回 HTML 字符串。`useDefaultHtmlTemplate: true` 时通过 `template: new MyTemplate()` 注入。
+
+---
+
+## 5. 反模式
+
+| 错误 | 后果 | 正确做法 |
+|---|---|---|
+| `v.popup.show(pos, infoData)` 但没 `bindPopup` | popup 实例不存在 → 报错 | 先 `v.bindPopup({ viewer })` |
+| Tileset Popup 用 `e.graphic.infoData` | undefined（feature ≠ graphic） | 改用 `e.feature.getProperty('xxx')` |
+| ImageryLayer Popup 用 `e.feature.getProperty` | properties 路径不同 | 改用 `e.feature.data.properties['xxx']` |
+| `pointerEvents: false` 但 DOM 想点击 | 点击穿透到 Cesium | 改 `true` 并确保 DOM 有 `cursor: pointer` |
+| `scaleByDistance` 给 `Popup` 但没传 `NearFarScalar` | 视距缩放失效 | `new ANOVGIS.NearFarScalar(near, nearValue, far, farValue)` |
+| `infoData` 字段缺失 `title` | Popup 标题为空 | 始终传 `title: '...'` |
+| `bindPopup` 后没监听 CLICK 事件 | Popup 永远不显示 | 必须 `addEventListener(MouseEventType.CLICK, e => popup.show(...))` |
+| `popup.destroy()` 后还想 show | 报错 | 重新 `bindPopup` 一次 |
+
+---
+
+## 6. 关联阅读
+
+- SDK 源码：
+  - `src/base/widgets/Popup.js`
+  - `src/base/widgets/Tooltip.js`
+  - `src/base/widgets/Template.js`
+  - `src/base/widgets/WidgetBase.js`
+  - `src/base/widgets/InfoBox.js`
+  - `src/base/event/EventType.js`（WidgetEventType）
+- 兄弟 skill：
+  - [`anovgis-vector-graphics`](../anovgis-vector-graphics/SKILL.md) — `bindPopup` 基础用法（在 §5 已有 8 个 snippet）
+  - [`anovgis-models-3dtiles`](../anovgis-models-3dtiles/SKILL.md) — tilesetpopup 完整示例
+  - [`anovgis-layers`](../anovgis-layers/SKILL.md) — layer.bindPopup 整层模式
+  - [`anovgis-imagery-terrain`](../anovgis-imagery-terrain/SKILL.md) — ImageryLayer WMS Popup
+- 关键 demo：
+  - `examples/public/examples/html/event/popup.html`
+  - `examples/public/examples/html/event/tooltip.html`
+  - `examples/public/examples/html/event/highlight.html`
+  - `examples/public/examples/html/event/tilesetpopup.html`、`tilesetpopup1.html`
+  - `examples/public/examples/html/event/imagerylayerpopup.html`、`imagerylayerpopup_line.html`、`imagerylayerpopup_point.html`
+  - `examples/public/examples/html/graphics/divInfo.html`、`divInfo2.html`
+- DOMAINS.md：`#1.6-base/Popup/Widget`、第 3 节反归属清单
+- DEMO-SKILL-MAP.md：`#8-event/`、`#2-graphics/divInfo*`