cardbuddy 0.6.0

package/dist/vendored/runtime/node-model.js

@@ -0,0 +1,217 @@
+/**
+ * 节点编辑模型：复刻编辑器属性面板（ModelComponent + ModelStyle + EditorStyleForm）。
+ * ①组件属性：表单树 == 实例树，meta 造默认树再被 schema item 覆盖，导出整树写回；
+ * ②样式：表单树（styleForm，完整 meta 裁剪）≠ 实例树（style，仅 styleState + schema 出现过的），
+ * 定点写入避免整棵默认树进 schema；③可见性：itemCondition 统一由 updatePropertyVisible 计算。
+ */
+
+import Property, { PropertyList } from './property.js';
+import { COMPONENT_META, STYLE_META_LIST, DIRECTIVE_META, Style } from './toPreview.js';
+
+const clone = (v) => (v === undefined ? v : JSON.parse(JSON.stringify(v)));
+
+/** 根节点 className "Root" 不在组件 meta 里，这里合成一份：无属性、无插槽、样式全开 */
+const ROOT_META = {
+  className: 'Root',
+  name: '根节点',
+  styleState: {},
+  styleVisible: {
+    rect: true,
+    flex: true,
+    background: true,
+    padding: true,
+    margin: true,
+    borderRadius: true,
+    border: true,
+    shadow: true,
+    transform: true,
+    other: true,
+  },
+  styleMeta: {},
+  properties: [],
+  slots: [],
+  events: [{ eventName: '初始化完成', eventKey: 'onReady' }],
+};
+
+export function getComponentMeta(className) {
+  if (className === 'Root') return ROOT_META;
+  return COMPONENT_META[className] || null;
+}
+
+/**
+ * 按 styleVisible 裁剪 + styleMeta 覆盖，产出面板用的样式表单树。
+ * styleVisible 形如 `{font: true, flex: {flexShrink: true}}`：
+ *   true → 该分组全部子字段可见；对象 → 只保留列出的子字段。
+ */
+function buildStyleForm(styleVisible = {}, styleMeta = {}, styleState = {}) {
+  const out = [];
+
+  STYLE_META_LIST.forEach((groupMeta) => {
+    const vis = styleVisible[groupMeta.itemKey];
+    if (!vis) return;
+
+    const prop = new Property(groupMeta);
+    const children = (prop.itemChildren && prop.itemChildren.properties) || [];
+
+    // 对象形态的 visible：裁掉未列出的子字段
+    if (vis && typeof vis === 'object') {
+      for (let i = 0; i < children.length; i++) {
+        if (!vis[children[i].itemKey]) children.splice(i--, 1);
+      }
+    }
+    if (!children.length) return;
+
+    // styleMeta 覆盖（改名 / 改选项），如 Row 把 justifyContent 显示成「水平对齐」
+    const overrides = styleMeta[groupMeta.itemKey] || {};
+    children.forEach((c) => {
+      const ov = overrides[c.itemKey];
+      if (!ov) return;
+      if (ov.itemName) c.itemName = ov.itemName;
+      if (ov.itemOption) c.itemOption = Object.assign({}, c.itemOption, ov.itemOption);
+    });
+
+    // styleState 默认值打底（组件自带的初始样式，schema 里往往并未显式写出）
+    if (styleState[groupMeta.itemKey]) {
+      PropertyList.setPropertyValue(children, styleState[groupMeta.itemKey]);
+    }
+
+    prop.itemValueFrom = '0';
+    out.push(prop);
+  });
+
+  return out;
+}
+
+export class NodeEditModel {
+  /**
+   * @param {Object} schemaNode 原始 schema 节点（与 currentSchema 同引用）
+   */
+  constructor(schemaNode = {}) {
+    this.schemaNode = schemaNode;
+    this.className = schemaNode.className || 'Root';
+    this.isRoot = this.className === 'Root';
+
+    const meta = getComponentMeta(this.className);
+    this.metaMissing = !meta;
+    this.meta = meta || { properties: [], events: [], styleVisible: {}, styleState: {}, styleMeta: {} };
+
+    this.name = this.meta.name || this.className;
+    this.events = this.meta.events || [];
+
+    /* -------- 组件属性：表单树 == 实例树 -------- */
+    this.properties = (this.meta.properties || []).map((m) => new Property(m));
+    Property.restoreProperty(schemaNode.properties || [], this.properties);
+    Property.updatePropertyVisible(this.properties);
+    // meta 未知、但 schema 里存在的属性：原样保留，避免写回时丢失（回填保真）
+    this.extraProperties = this._orphans(schemaNode.properties, this.properties);
+
+    /* -------- 指令：根节点没有指令 -------- */
+    this.hasDirectives = !this.isRoot;
+    this.directives = this.hasDirectives ? DIRECTIVE_META.map((m) => new Property(m)) : [];
+    if (this.hasDirectives) {
+      Property.restoreProperty(schemaNode.directives || [], this.directives);
+      Property.updatePropertyVisible(this.directives);
+      this.extraDirectives = this._orphans(schemaNode.directives, this.directives);
+    } else {
+      this.extraDirectives = [];
+    }
+
+    /* -------- 样式：实例树（精简，用于导出） -------- */
+    this.style = new Style({
+      state: this.meta.styleState,
+      visible: this.meta.styleVisible,
+      meta: this.meta.styleMeta,
+    });
+    this.style.onRestore(schemaNode.style || {});
+
+    /* -------- 样式：表单树（完整 meta，用于展示与编辑） -------- */
+    this.styleForm = buildStyleForm(
+      this.meta.styleVisible || {},
+      this.meta.styleMeta || {},
+      this.meta.styleState || {},
+    );
+    // 用节点当前实际样式覆盖表单树（不传 mode：只填充命中的字段，其余保留默认）
+    Property.restoreProperty(this.style.onExport().properties, this.styleForm);
+    Property.updatePropertyVisible(this.styleForm);
+  }
+
+  /** 重算 itemCondition 可见性（任一控件变更后调用） */
+  refreshVisible() {
+    Property.updatePropertyVisible(this.properties);
+    if (this.hasDirectives) Property.updatePropertyVisible(this.directives);
+    Property.updatePropertyVisible(this.styleForm);
+  }
+
+  /**
+   * 样式表单某字段变更 → 定点并入实例树。
+   * @param {Property} group 顶层分组属性
+   * @param {Property[]} chain 从分组下一层到被改字段的属性链
+   */
+  applyStyleChange(group, chain = []) {
+    let head = null;
+    for (let i = chain.length - 1; i >= 0; i--) {
+      head = { itemId: chain[i].itemId, child: head };
+    }
+    // 先按新值重算可见性，避免把刚被条件隐藏的字段一起导出
+    Property.updatePropertyVisible(this.styleForm);
+    this.style.applyChange(group, head);
+  }
+
+  exportProperties() {
+    const base = this.properties.reduce((ret, p) => {
+      const e = p.onExport();
+      if (e) ret.push(e);
+      return ret;
+    }, []);
+    return base.concat(this.extraProperties.map((p) => clone(p)));
+  }
+
+  exportDirectives() {
+    const base = this.directives.reduce((ret, p) => {
+      const e = p.onExport();
+      if (e) ret.push(e);
+      return ret;
+    }, []);
+    return base.concat(this.extraDirectives.map((p) => clone(p)));
+  }
+
+  /** 收集 schema 中存在、但 meta 模型里没有对应项的属性（按 itemId / itemKey 判定） */
+  _orphans(schemaItems, modelProps) {
+    const known = new Set();
+    (modelProps || []).forEach((p) => {
+      if (p.itemId) known.add(p.itemId);
+      if (p.itemKey) known.add(p.itemKey);
+    });
+    return (schemaItems || [])
+      .filter((s) => s && s.itemId && !known.has(s.itemId) && !(s.itemKey && known.has(s.itemKey)))
+      .map((s) => clone(s));
+  }
+
+  exportStyle() {
+    return this.style.onExport();
+  }
+
+  /**
+   * 写回原始 schema 节点（就地 mutate，保持与 currentSchema 的引用关系）。
+   * 只覆盖 properties / directives / style 三块；slots、eventactions、componentId 等不动。
+   */
+  applyToSchema() {
+    const node = this.schemaNode;
+    node.properties = this.exportProperties();
+    node.style = this.exportStyle();
+    // 根节点原本就没有 directives 字段，不要凭空加上
+    if (this.hasDirectives) node.directives = this.exportDirectives();
+  }
+
+  /** 导出成 schema 片段（用于往返一致性自检，不落盘） */
+  toSchemaFragment() {
+    const out = {
+      properties: this.exportProperties(),
+      style: this.exportStyle(),
+    };
+    if (this.hasDirectives) out.directives = this.exportDirectives();
+    return clone(out);
+  }
+}
+
+export default NodeEditModel;

package/dist/vendored/runtime/property.js

@@ -0,0 +1,364 @@
+/**
+ * Property / PropertyList 模型
+ *
+ * 忠实移植自编辑器 chunk c9 中的 `Property`(mod 196) 与 `PropertyList`(mod 215 宿主) 两个类。
+ * 这是 schema(item 数组序列化格式) → 预览数据(普通 JS 对象) 的核心。
+ *
+ * 关键语义（逐条对应原实现，勿随意"优化"）：
+ *  - 属性树先由 **meta 定义**构造出一棵带默认值的完整树；
+ *  - 再用 schema 里导出的 item 覆盖（restoreProperty）；
+ *  - 最后 onPreview 把树摊平成普通对象，变量表达式收集到 __vars__。
+ */
+
+let __seq = 0;
+const nextVal = (p) => `${p}_${(++__seq).toString(36)}`;
+
+export const ValueFrom = { const: '0', var: '1', image: '2' };
+export const RestoreMode = { Delete: '1', Append: '2' };
+
+const clone = (v) => (v === undefined ? v : JSON.parse(JSON.stringify(v)));
+
+/** 一组属性（对应 meta 的 itemChildren 数组，或 itemList 的一个元素） */
+export class PropertyList {
+  /**
+   * @param {Array} metaList meta 定义数组
+   * @param {Object} defaults 父级 itemDefaultValue（对象形态），用于给子项填初值
+   */
+  constructor(metaList = [], defaults = {}) {
+    this.id = nextVal('propgroup');
+    this.properties = (metaList || []).map((m) => new Property(m));
+    PropertyList.setPropertyValue(this.properties, defaults);
+  }
+
+  /** 用一个普通对象给同级属性批量填值（仅 itemValueFrom==="0" 的常量项） */
+  static setPropertyValue(props = [], data = {}) {
+    if (!data) return;
+    props.forEach((p) => {
+      if (p.itemVisible && p.itemKey && data[p.itemKey] !== undefined && p.itemValueFrom === '0') {
+        p.itemValue = data[p.itemKey];
+      }
+    });
+  }
+
+  onRestore(schemaGroup = {}, mode, hooks, paths) {
+    Property.restoreProperty(schemaGroup.properties || [], this.properties, mode, hooks, paths);
+  }
+
+  onPreview(ctx) {
+    return this.properties.reduce((acc, p) => {
+      const r = p.onPreview(ctx);
+      if (r) Object.assign(acc, r);
+      return acc;
+    }, {});
+  }
+
+  /**
+   * 序列化回 schema item 数组（onRestore 的逆运算）。
+   * @param {{itemId:string, child?:Object}} [child] 只导出指定 itemId 的那一支（用于样式的定点回写）
+   */
+  onExport(child) {
+    const properties = this.properties.reduce((ret, p) => {
+      if (!child || child.itemId === p.itemId) {
+        const e = p.onExport(child && child.child);
+        if (e) ret.push(e);
+      }
+      return ret;
+    }, []);
+    return { properties };
+  }
+}
+
+export class Property {
+  constructor(meta = {}) {
+    this.id = nextVal('prop');
+    const m = clone(meta) || {};
+
+    this.itemId = m.itemId;
+    this.itemName = m.itemName;
+    this.itemType = m.itemType;
+    this.itemKey = m.itemKey;
+    this.itemOption = m.itemOption || {};
+    this.itemParam = m.itemParam || {};
+    this.itemDefaultValue = m.itemDefaultValue === undefined ? null : m.itemDefaultValue;
+    this.itemDesc = m.itemDesc;
+    this.itemCondition = m.itemCondition;
+    this.itemWatch = m.itemWatch || {};
+    this.itemTypeRange = m.itemTypeRange || 'const,var';
+    this.itemDirection = m.itemDirection;
+    this.itemVisible = true;
+    this.itemUpdated = false;
+
+    // itemTypeRange 的第一段决定初始取值来源：const→"0" var→"1" image→"2"
+    this.itemValueFrom = ValueFrom[String(this.itemTypeRange).split(/,/)[0]];
+    this._itemValueFrom = this.itemValueFrom;
+
+    const dv = clone(this.itemDefaultValue);
+    this.itemChildren = new PropertyList(m.itemChildren || [], dv);
+    this.itemTemplate = m.itemTemplate || m.itemList || [];
+    this.itemList = [];
+
+    if (!this.itemChildren.properties.length && Object.keys(this.itemTemplate).length) {
+      this.initItemList(dv);
+    }
+    this.initItemValue(dv);
+
+    // 各来源（常量/变量/图片）独立值缓存：切换来源 Tab 时按 itemValueFrom 归档/回填，
+    // 互不覆盖，修复「切到常量再切回变量，变量内容被清空」的问题。
+    // 仅作内存态编辑缓冲，不参与序列化（schema 仍只保留当前激活来源的值）。
+    this._valuesByFrom = { '0': undefined, '1': undefined, '2': undefined };
+    this._valuesByFrom[this.itemValueFrom] = this.itemValue;
+  }
+
+  initItemValue(v, force = false) {
+    if (this.itemValueFrom === '1' || this.itemValueFrom === '2') {
+      this.itemValue = force ? v : '';
+    } else if (this.itemChildren.properties.length) {
+      this.itemValue = {};
+    } else if (Object.keys(this.itemTemplate).length) {
+      this.itemValue = [];
+    } else {
+      this.itemValue = v;
+    }
+  }
+
+  initItemList(v) {
+    const arr = v || [];
+    if (Array.isArray(arr)) arr.forEach((it) => this.addItems(it));
+  }
+
+  /** 往 itemList 追加一个元素（按 templateField 选择模板） */
+  addItems(data, cb) {
+    const templateField = this.itemOption?.templateField || '';
+    if (this.itemChildren.properties.length) return undefined;
+    const key = data ? data[templateField] : '';
+    const tpl = templateField ? this.itemTemplate[key] || [] : this.itemTemplate || [];
+    const list = new PropertyList(tpl, data || {});
+    if (cb) cb(list);
+    this.itemList.push(list);
+    return list;
+  }
+
+  /** 移除 itemList 第 idx 项（List 类型编辑用） */
+  removeAt(idx) {
+    if (this.itemChildren.properties.length) return;
+    if (idx >= 0 && idx < this.itemList.length) this.itemList.splice(idx, 1);
+  }
+
+  /** 调整 itemList 顺序（List 类型编辑用） */
+  moveItem(from, to) {
+    if (this.itemChildren.properties.length) return;
+    if (from < 0 || from >= this.itemList.length) return;
+    to = Math.max(0, Math.min(this.itemList.length - 1, to));
+    if (from === to) return;
+    const [it] = this.itemList.splice(from, 1);
+    this.itemList.splice(to, 0, it);
+  }
+
+  /** 用 schema 导出的 item 覆盖本属性 */
+  onRestore(item = {}, mode, hooks = {}, paths = []) {
+    if (!Object.keys(item).length) return;
+    const nextPaths = [].concat(paths);
+    nextPaths.push(this.itemId);
+
+    // schema 缺省 itemValueFrom 时保留 meta 推导的默认值（itemTypeRange 首段），
+    // 不要覆盖成 undefined —— 否则单一来源属性（如 Code 类型脚本）会被 PropControl
+    // 当成「越界来源」而误渲染来源切换条（见 EventEditor 脚本参数误显来源按钮）。
+    if (item.itemValueFrom !== undefined) this.itemValueFrom = item.itemValueFrom;
+    this.initItemValue(item.itemValue, true);
+    this._valuesByFrom = { '0': undefined, '1': undefined, '2': undefined };
+    this._valuesByFrom[this.itemValueFrom] = this.itemValue;
+    this.itemChildren.onRestore(item.itemChildren || {}, mode, hooks, nextPaths);
+
+    this.itemList = [];
+    // List 类型的真实数据行在 item.itemValue（数组，元素是 {字段:值} 的纯数据对象）；
+    // item.itemList 只是「每一行字段」的模板（如 dataList 的 key/desc 字段定义），
+    // 不可误当成数据行。必须用「数据行 + 字段模板」重建 itemList，否则会把字段模板
+    // 当成数据行，导致所有行共用同一模板默认值（如 key 全部为 "1"），复选框因此只能
+    // 全选/全不选。对齐构造函数里的 initItemList（同样以默认数据行 + 模板重建）。
+    const rows = Array.isArray(item.itemValue) ? item.itemValue : [];
+    if (rows.length || !item.itemList) {
+      rows.forEach((row) => this.addItems(row || {}));
+    } else if (Array.isArray(item.itemList)) {
+      // 兼容极个别卡片：数据行直接放在 itemList（每行带 properties）的场景，
+      // 仍按模板逐行重建并 onRestore 其嵌套结构。
+      item.itemList.forEach((li) => {
+        const created = this.addItems({});
+        if (created) created.onRestore(li, mode, hooks, nextPaths);
+      });
+    }
+  }
+
+  /**
+   * 摊平成预览数据。
+   * @param {{paths:string[], vars:Object}} ctx 顶层调用不传；嵌套调用透传 paths/vars
+   */
+  onPreview(ctx) {
+    const out = {};
+    const paths = ctx ? ctx.paths : [];
+    const isNested = !!(paths && paths.length);
+    const vars = isNested ? ctx.vars : {};
+    const cur = [].concat(paths || []);
+
+    if (this.itemVisible && this.itemKey) {
+      if (this.itemValueFrom === '0') {
+        if (this.itemChildren.properties.length > 0) {
+          cur.push(this.itemKey);
+          out[this.itemKey] = this.itemChildren.onPreview({ paths: cur, vars });
+        } else if (this.itemList.length > 0) {
+          cur.push(this.itemKey);
+          out[this.itemKey] = this.itemList.map((el, idx) => {
+            const p = [].concat(cur);
+            p.push(idx);
+            return el.onPreview({ paths: p, vars });
+          });
+        } else {
+          out[this.itemKey] = this.itemValue;
+        }
+      } else if (this.itemValueFrom === '1') {
+        // 变量绑定：值先取 meta 默认值，表达式登记到 vars["点号路径"]
+        out[this.itemKey] = this.itemDefaultValue;
+        if (this.itemValue) {
+          cur.push(this.itemKey);
+          vars[cur.join('.')] = this.itemValue;
+        }
+      } else if (this.itemValueFrom === '2') {
+        out[this.itemKey] = this.itemValue;
+      }
+    }
+
+    if (!isNested) out.__vars__ = vars;
+    return out;
+  }
+
+  /**
+   * 序列化回 schema item（onRestore 的逆运算）。
+   * 忠实移植自编辑器 ModelProperty.onExport：
+   *  - itemVisible 为假的属性**不导出**（itemCondition 隐藏的字段不会污染 schema）；
+   *  - itemChildren 与 itemList 互斥，且都只在非空时才出现；
+   *  - 变量场景（itemValueFrom==='1'）额外带上 itemDefaultValue。
+   * @param {{itemId:string, child?:Object}} [child] 定点导出用的子链
+   */
+  onExport(child) {
+    if (!this.itemVisible) return undefined;
+    // 动作型设置器（如 CustomSelect「常用样式」）无 itemKey，不承载可序列化的值，
+    // 跳过导出可避免把 {itemKey:undefined} 脏项写回 schema.properties（见问题 #1/#5）。
+    if (this.itemKey === undefined || this.itemKey === null) return undefined;
+
+    const itemChildren = this.itemChildren.onExport(child);
+    const itemList = this.itemList.map((g) => g.onExport(child));
+    const extra = {};
+
+    if (this.itemValueFrom === '1') extra.itemDefaultValue = this.itemDefaultValue;
+
+    if (itemChildren && itemChildren.properties.length) extra.itemChildren = itemChildren;
+    else if (itemList.length) extra.itemList = itemList;
+
+    return {
+      itemId: this.itemId,
+      itemKey: this.itemKey,
+      itemValueFrom: this.itemValueFrom,
+      itemValue: this.itemValue,
+      ...extra,
+    };
+  }
+
+  /* ------------------------------ 静态工具 ------------------------------ */
+
+  /** 合并两个 preview 结果，__vars__ 单独浅合并 */
+  static mergePreview(a = {}, b = {}) {
+    const av = a.__vars__;
+    const bv = b.__vars__;
+    return bv ? Object.assign(a, b, { __vars__: Object.assign({}, av, bv) }) : Object.assign(a, bv);
+  }
+
+  /**
+   * 用 schema items 覆盖 meta 属性树。
+   * 注意：schemaItems 为空时**整棵默认树原样保留**（原实现的 `if (e.length && i.length)`）。
+   * mode 缺省时既不删除未匹配项、也不追加多余项 —— 组件 properties/directives 走的就是这条路径。
+   */
+  static restoreProperty(schemaItems = [], metaProps = [], mode, hooks = {}, paths) {
+    hooks = hooks || {};
+    if (!schemaItems.length || !metaProps.length) return;
+
+    const rest = {};
+    const index = (schemaItems || []).reduce((acc, it) => {
+      const k = it.itemId || it.itemKey;
+      if (k) {
+        acc[k] = it;
+        rest[k] = it;
+      }
+      return acc;
+    }, {});
+
+    for (let i = 0; i < metaProps.length; i++) {
+      const p = metaProps[i];
+      const matched = index[p.itemId] || index[p.itemKey];
+      if (matched) {
+        delete rest[p.itemId];
+        delete rest[p.itemKey];
+        p.onRestore(matched, mode, {}, paths);
+        p.itemUpdated = true;
+        if (hooks.restore) hooks.restore(p);
+      } else if (mode === RestoreMode.Delete) {
+        metaProps.splice(i--, 1);
+        if (hooks.delete) hooks.delete(p);
+      }
+    }
+
+    if (mode === RestoreMode.Append) {
+      for (const k in rest) {
+        if (hooks.append) hooks.append(rest[k], metaProps, [].concat(paths || []));
+      }
+    }
+  }
+
+  /**
+   * 依据 itemCondition 重算同级属性可见性（不可见的属性不会出现在 preview 产物里）。
+   * 语法：`a.b` → 同级中 itemCondition==="a" 的属性其值须等于 "b"；
+   *      支持 `a.!b`（取反）与 `a.b|c`（多选其一）；段数为奇数的项自身是"条件源"。
+   */
+  static updatePropertyVisible(props = []) {
+    const list = props || [];
+    const data = Property._conditionData(list);
+    list.forEach((p) => {
+      p.itemVisible = !/\./.test(p.itemCondition) || Property._conditionResult(p.itemCondition, data);
+      Property.updatePropertyVisible(p.itemChildren.properties);
+      p.itemList.forEach((l) => Property.updatePropertyVisible(l.properties));
+    });
+  }
+
+  static _conditionData(props) {
+    return props.reduce((acc, p) => {
+      const c = `${p.itemCondition || ''}`;
+      if (c && c.split('.').length % 2 === 1) acc[c] = p.itemValue;
+      return acc;
+    }, {});
+  }
+
+  static _conditionResult(cond = '', data = {}) {
+    let ok = true;
+    const seg = cond.split('.');
+    for (let i = 0; i < seg.length - 1; i += 2) {
+      const path = seg.slice(0, i + 1).join('.');
+      let expect = seg[i + 1];
+      let negate = false;
+      if (/^!/.test(expect)) {
+        negate = true;
+        expect = expect.substring(1);
+      }
+      const options = expect.split('|');
+      ok = false;
+      for (let j = 0; j < options.length; j++) {
+        if (data[path] == options[j]) {
+          ok = true;
+          break;
+        }
+      }
+      if (negate) ok = !ok;
+      if (!ok) break;
+    }
+    return ok;
+  }
+}
+
+export default Property;

package/dist/vendored/runtime/selectionOverlay.js

@@ -0,0 +1,53 @@
+// 节点选中遮罩：DevTools 风格的「覆盖层」方案。
+//
+// 旧实现把高亮做成 `.ce-highlight::after` 伪元素，直接挂在组件根 DOM（this.$el）上。
+// 问题：CSS 规范下 `::before/::after` 不会为「可替换元素」(replaced elements：canvas、
+// input、img、video、select、textarea、audio) 生成盒子。一旦某组件的根就是可替换元素
+// （本工程里的 Canvas→<canvas>、Input→<input>），this.$el 落在它身上，遮罩整块消失。
+//
+// 新方案：不再依赖伪元素，而是在手机屏幕滚动容器内放一个绝对定位的覆盖层 div，选中时
+// 把它的位置/尺寸算成与选中节点根元素完全重合（content 坐标，随滚动自然移动）。对任意
+// 元素类型（含 canvas/input/button）100% 生效，且零布局影响、零额外逐节点 DOM。
+import { reactive } from 'vue'
+
+export const selectionOverlay = reactive({
+  // 当前选中节点的根 DOM 元素（RenderTree 在选中时写入 this.$el）
+  el: null,
+  // 当前选中节点的 id：用于列表（ListLayout/GridLayout）重复项的「先到先得」判定——
+  // 同一模板节点会被渲染成多个共享 id 的 DOM 实例，全部满足选中条件，
+  // 必须靠 id 区分「同一选区」与「新选区」，避免互相覆盖导致高亮落在末项。
+  id: null,
+  visible: false,
+  // 覆盖层位置/尺寸（content 坐标，由 SelectionOverlay 组件计算后写入）
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+})
+
+/**
+ * 标记某节点为选中：写入根元素并置可见。
+ * 列表重复项共享同一 id，所有实例都会调用本函数；同一选区（id 相同）只认第一个调用者
+ * （先到先得），使高亮落在第一个（与 Ctrl/⌘ 点击定位一致）；不同 id 的新选区则正常覆盖。
+ * @param {HTMLElement} el 目标根元素（建议传 DOM 中第一个匹配元素，见 RenderTree.updateHighlight）
+ * @param {string} id 选中节点的 id（与 selectedNodeId 同源）
+ */
+export function setSelectionEl(el, id) {
+  if (selectionOverlay.id === id) return
+  selectionOverlay.el = el
+  selectionOverlay.id = id
+  selectionOverlay.visible = true
+}
+
+/**
+ * 取消选中：仅当传入 id 正是当前高亮选区时才清除，避免误清其它节点的高亮。
+ * 列表场景下所有重复实例共享同一 id，首个实例清除后即置空，其余实例因 id 已不符而不再重复清除。
+ * @param {string} id 取消选中节点的 id
+ */
+export function clearSelectionEl(id) {
+  if (selectionOverlay.id === id) {
+    selectionOverlay.el = null
+    selectionOverlay.id = null
+    selectionOverlay.visible = false
+  }
+}