cardbuddy 0.11.0 → 0.12.1

package/dist/vendored/components/PropControl.vue

@@ -1,245 +0,0 @@
-<!--
-  类型化属性控件（meta 驱动的分派注册表）。
-
-  参照 ubomp-h5-sub 的「控件注册 + itemValueFrom 切换」范式：
-   - 按 meta.itemType 渲染对应类型化设置器（颜色/数字/枚举/开关/文本/图标/表达式…）；
-   - 按 meta.itemTypeRange 决定是否显示「值来源」切换：const('0') / var('1') / image('2')；
-   - 写回：直接 mutate 传入的 Property 实例的 itemValue / itemValueFrom，
-     再由父级（PropTree / NodeInspector）统一刷新预览或定点并入样式实例树。
-
-  本组件只渲染「单个属性」，不负责字段发现（那是 PropTree / NodeInspector 的事）。
-
-  所有设置器统一 props：value / options / watches / itemInfo / disabled，
-  统一 emit：input(新值) / change(触发预览) / sync(批量样式，仅 CustomSelect)。
--->
-<template>
-  <div class="pc" :class="{ 'pc--readonly': disabled }">
-    <!-- 值来源切换（仅当 meta 声明了多于一种来源 且 允许切换时显示） -->
-    <div class="pc-srcs" v-if="sources.length > 1 && bExchange">
-      <button
-        v-for="s in sources"
-        :key="s.key"
-        type="button"
-        class="pc-src"
-        :class="{ 'is-active': property.itemValueFrom === s.key }"
-        :disabled="disabled"
-        @click="setSource(s.key)"
-      >{{ s.label }}</button>
-    </div>
-
-    <div class="pc-body">
-      <!-- 图片素材来源 -->
-      <SetImage
-        v-if="property.itemValueFrom === '2'"
-        :value="property.itemValue"
-        :options="property.itemOption"
-        :item-info="property"
-        :disabled="disabled"
-        @input="onInput"
-        @change="onChange"
-      />
-
-      <!-- 变量 / 表达式来源：带语法高亮、可拖拽调高度 -->
-      <SetExpr
-        v-else-if="property.itemValueFrom === '1'"
-        :value="property.itemValue"
-        :disabled="disabled"
-        :item-info="property"
-        @input="onInput"
-        @change="onChange"
-      />
-
-      <!-- 常量来源：按 itemType 分派 -->
-      <component
-        v-else
-        :is="setterComp.comp"
-        :value="property.itemValue"
-        :options="property.itemOption"
-        :watches="watches"
-        :item-info="property"
-        :disabled="disabled"
-        :kind="setterComp.kind"
-        :multiline="setterComp.multiline"
-        :boolean="setterComp.boolean"
-        @input="onInput"
-        @change="onChange"
-        @sync="onSync"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import SetText from './setters/SetText.vue'
-import SetNumber from './setters/SetNumber.vue'
-import SetSelect from './setters/SetSelect.vue'
-import SetSegment from './setters/SetSegment.vue'
-import SetSwitch from './setters/SetSwitch.vue'
-import SetColor from './setters/SetColor.vue'
-import SetIconSelect from './setters/SetIconSelect.vue'
-import SetIfForm from './setters/SetIfForm.vue'
-import SetNumberStyle from './setters/SetNumberStyle.vue'
-import SetPadding from './setters/SetPadding.vue'
-import SetGrid9 from './setters/SetGrid9.vue'
-import SetBgPosition from './setters/SetBgPosition.vue'
-import SetBgSize from './setters/SetBgSize.vue'
-import SetGradient from './setters/SetGradient.vue'
-import SetCustomSelect from './setters/SetCustomSelect.vue'
-import SetList from './setters/SetList.vue'
-import SetImage from './setters/SetImage.vue'
-import SetCode from './setters/SetCode.vue'
-import SetExpr from './setters/SetExpr.vue'
-
-const FROM_LABEL = { '0': '常量', '1': '变量', '2': '图片' }
-// meta.itemTypeRange 字符串 -> 允许的来源 key
-const RANGE_KEYS = { const: '0', var: '1', image: '2' }
-
-/** itemType -> 设置器组件 + 附加 props（kind / multiline / boolean） */
-function resolveSetter(itemType) {
-  switch (itemType) {
-    case 'InputNumber': return { comp: SetNumber }
-    case 'Color': return { comp: SetColor }
-    case 'Select': return { comp: SetSelect }
-    case 'TabSelect': return { comp: SetSegment, kind: 'TabSelect' }
-    case 'Input': return { comp: SetText }
-    case 'Textarea': return { comp: SetText, multiline: true }
-    case 'Switcher': return { comp: SetSwitch }
-    case 'BooleanForm': return { comp: SetSwitch, boolean: true }
-    case 'PaddingStyle': return { comp: SetPadding }
-    case 'NumberStyle': return { comp: SetNumberStyle }
-    case 'PositionStyle': return { comp: SetGrid9, kind: 'PositionStyle' }
-    case 'BackgroundPositionStyle': return { comp: SetBgPosition }
-    case 'BackgroundSizeStyle': return { comp: SetBgSize }
-    case 'GradientStyle': return { comp: SetGradient }
-    case 'FontStyle': return { comp: SetSegment, kind: 'FontStyle' }
-    case 'TextDecorationStyle': return { comp: SetSegment, kind: 'TextDecorationStyle' }
-    case 'JustifyContentStyle': return { comp: SetSegment, kind: 'JustifyContentStyle' }
-    case 'AlignItemsStyle': return { comp: SetSegment, kind: 'AlignItemsStyle' }
-    case 'IconSelect': return { comp: SetIconSelect }
-    case 'CustomSelect': return { comp: SetCustomSelect }
-    case 'List': return { comp: SetList }
-    case 'IfForm': return { comp: SetIfForm }
-    case 'Code': return { comp: SetCode }
-    // 未识别 / (none) / 缺省：普通文本框，保证可回填、可编辑
-    default: return { comp: SetText }
-  }
-}
-
-export default {
-  name: 'PropControl',
-  components: {
-    SetText, SetNumber, SetSelect, SetSegment, SetSwitch, SetColor,
-    SetIconSelect, SetIfForm, SetNumberStyle, SetPadding, SetGrid9,
-    SetBgPosition, SetBgSize, SetGradient, SetCustomSelect, SetList,     SetImage, SetCode, SetExpr,
-  },
-  props: {
-    property: { type: Object, required: true },
-    watches: { type: Object, default: () => ({}) },
-    disabled: { type: Boolean, default: false },
-    /**
-     * 是否允许显示「常量 / 变量 / 图片」来源切换。
-     * 对齐线上编辑器 editorOptions.bExchange：指令(directives)区块固定为 false，
-     * 故显隐设置 / 具体条件这类指令子项不渲染切换 tab，直接以常量形态呈现。
-     */
-    bExchange: { type: Boolean, default: true },
-  },
-  emits: ['change', 'sync'],
-  computed: {
-    itemType() {
-      return (this.property && this.property.itemType) || ''
-    },
-    sources() {
-      const raw = (this.property && this.property.itemTypeRange) || 'const'
-      const keys = String(raw).split(',').map((s) => s.trim()).filter(Boolean)
-      let list = keys
-        .map((k) => ({ key: RANGE_KEYS[k], label: FROM_LABEL[RANGE_KEYS[k]] }))
-        .filter((x) => x.key)
-      // 当前 itemValueFrom 若不在声明来源内（schema 越界或缺失），也纳入以免丢值；
-      // 但仅当它是合法来源键（'0'/'1'/'2'）时才塞入，忽略 undefined/非法值，
-      // 避免单一来源属性（如 Code 脚本）被误渲染出脏来源按钮。
-      const cur = String(this.property.itemValueFrom)
-      if (/^[012]$/.test(cur) && !list.some((s) => s.key === cur)) {
-        list = list.concat([{ key: cur, label: FROM_LABEL[cur] || '来源' + cur }])
-      }
-      return list
-    },
-    setterComp() {
-      return resolveSetter(this.itemType)
-    },
-  },
-  methods: {
-    onInput(v) {
-      this.property.itemValue = v
-      // 输入即触发预览刷新：NodeInspector 的 scheduleApply 自带 250ms 防抖，
-      // 故高频输入只会触发一次（约 250ms 后）重建预览，满足「即时预览」预期（问题 #6）。
-      this.$emit('change')
-    },
-    onChange() {
-      this.$emit('change')
-    },
-    onSync(map) {
-      this.$emit('sync', map)
-    },
-    setSource(k) {
-      if (this.disabled) return
-      const prop = this.property
-      const to = String(k)
-      if (prop.itemValueFrom === to) return
-      // 切换来源：先把「当前来源」的实时值归档进缓存，再切到目标来源；
-      // 目标来源有缓存值则原样回填，没有（从未编辑过）才给默认值。
-      // 这样每种来源（常量/变量/图片）各存各的，互不复写 —— 修复「切走再切回内容被清空」。
-      if (!prop._valuesByFrom) {
-        prop._valuesByFrom = { '0': undefined, '1': undefined, '2': undefined }
-      }
-      prop._valuesByFrom[prop.itemValueFrom] = prop.itemValue
-      prop.itemValueFrom = to
-      if (prop._valuesByFrom[to] !== undefined) {
-        prop.itemValue = prop._valuesByFrom[to]
-      } else if (to === '0') {
-        const d = prop.itemDefaultValue
-        prop.itemValue = d === undefined || d === null ? this.defaultFor() : d
-        prop._valuesByFrom[to] = prop.itemValue
-      } else {
-        // 变量('1') / 图片('2') 首次进入时给空串作为起点（非清空，后续切回会回填）
-        prop.itemValue = ''
-        prop._valuesByFrom[to] = ''
-      }
-      this.$emit('change')
-    },
-    defaultFor() {
-      switch (this.itemType) {
-        case 'Color': return '#000000'
-        case 'InputNumber': return 0
-        case 'Switcher': return '0'
-        case 'BooleanForm': return false
-        case 'TabSelect':
-        case 'Select': {
-          const opt = this.property.itemOption || {}
-          const list = opt.iParamList || opt.iTypeList || []
-          return list.length ? list[0].key : ''
-        }
-        default: return ''
-      }
-    },
-  },
-}
-</script>
-
-<style scoped>
-.pc { display: flex; flex-direction: column; gap: 6px; }
-/* .pc-body 是块级容器，唯一子节点 .st-switch 是 inline-flex（内联级原子盒子）。
-   行盒高度由继承的 line-height（body 默认 16px / normal ≈ 21.5px）决定，而非 18px 的开关本身，
-   导致 .pc-body 被撑到 21.5px 且开关按 baseline 对齐而非垂直居中。置 0 让行盒坍缩为 18px。 */
-.pc-body { line-height: 0; }
-.pc-srcs { display: flex; gap: 4px; line-height: 1.5; }
-.pc-src {
-  flex: 1; height: 24px; font-size: 12px; padding: 0 10px; border: 1px solid var(--border);
-  background: transparent; color: var(--text-dim); border-radius: 6px; cursor: pointer;
-  transition: background 0.12s, color 0.12s, border-color 0.12s;
-}
-.pc-src:hover { background: var(--bg-hover); color: var(--text); }
-/* 选中态与分段控件 .st-seg 同语言：浅底 + 同色文字 + 发丝描边，不做实心填充 */
-.pc-src.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
-.pc-src.is-active:hover { background: var(--accent-soft); color: var(--accent); }
-.pc--readonly .pc-src { opacity: .6; cursor: not-allowed; }
-</style>

package/dist/vendored/components/PropTree.vue

@@ -1,128 +0,0 @@
-<!--
-  属性树递归渲染器。
-
-  职责（与编辑器右侧面板的字段组织一致）：
-   - group 类型 / 含 itemChildren 的属性 → 渲染可折叠分组头，递归渲染其子属性；
-   - 叶子属性 → 「标签 + 控件」一行，控件交给全局 <prop-control>；
-   - 把「从根到当前叶子的链」(Property[]) 透传给父级，父级据此决定：
-       * style 模式：调用 NodeEditModel.applyStyleChange(链首分组, 链身)；
-       * property / directive 模式：整树导出（applyToSchema）。
-
-  本组件通过全局注册 self-reference（prop-tree）+ 全局 prop-control 实现递归，
-  避免与 PropControl 互相 import 造成的循环依赖。
--->
-<template>
-  <div class="ptree" :class="{ 'ptree--plain': plain }">
-    <template v-for="p in properties" :key="p.itemId">
-      <!-- 分组（自身可见 且 存在可见后代才渲染，避免空分组） -->
-      <div v-if="isGroup(p) && groupVisible(p)" class="ptree__group">
-        <div class="ptree__group-head" type="button" @click="toggle(p)">
-          <span class="ptree__caret" :class="{ 'is-open': isOpen(p) }">▸</span>
-          <span class="ptree__group-name">{{ p.itemName || p.itemKey }}</span>
-        </div>
-        <div v-show="isOpen(p)" class="ptree__group-body">
-          <prop-tree
-            v-if="p.itemChildren && p.itemChildren.properties.length"
-            :properties="p.itemChildren.properties"
-            :mode="mode"
-            :depth="depth + 1"
-            :chain="chain.concat(p)"
-            :watches="watches"
-            :disabled="disabled"
-            :b-exchange="bExchange"
-            :plain="plain"
-            @leaf-change="$emit('leaf-change', $event)"
-            @leaf-sync="$emit('leaf-sync', $event)"
-          />
-        </div>
-      </div>
-
-      <!-- 叶子（itemCondition 判定为不可见时不渲染，与线上编辑器一致） -->
-      <div
-        v-else-if="p.itemVisible !== false"
-        class="ptree__row"
-        :class="{ 'ptree__row--disabled': disabled, 'ptree__row--block': isBlock(p) }"
-      >
-        <label class="ptree__label" :title="p.itemDesc || p.itemName || p.itemKey">{{ p.itemName || p.itemKey || p.itemType || '字段' }}</label>
-        <div class="ptree__control">
-          <prop-control
-            :property="p"
-            :watches="watches"
-            :disabled="disabled"
-            :b-exchange="bExchange"
-            @change="onLeaf(p)"
-            @sync="onSync"
-          />
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PropTree',
-  props: {
-    properties: { type: Array, default: () => [] },
-    mode: { type: String, default: 'property' },
-    /** 嵌套深度：顶层 ptree 为 1，每深入一层 +1（用于决定是否显示分组计数） */
-    depth: { type: Number, default: 1 },
-    /** 从根到当前层父分组的链（Property[]），叶子变更时拼接上自身 */
-    chain: { type: Array, default: () => [] },
-    /** 同级联动快照，供 itemWatch 使用（如 flexDirection 决定对齐图标方向） */
-    watches: { type: Object, default: () => ({}) },
-    disabled: { type: Boolean, default: false },
-    /** 是否允许显示来源切换 tab（指令区块由父级传 false） */
-    bExchange: { type: Boolean, default: true },
-    /** 无 hover 高亮模式（事件抽屉脚本/参数区用，深/浅主题一致） */
-    plain: { type: Boolean, default: false },
-  },
-  emits: ['leaf-change', 'leaf-sync'],
-  data() {
-    // 分组默认展开
-    return { openMap: {} }
-  },
-  methods: {
-    isGroup(p) {
-      if (!p) return false
-      if (p.itemType === 'group') return true
-      const kids = p.itemChildren && p.itemChildren.properties
-      return !!(kids && kids.length)
-    },
-    childCount(p) {
-      const kids = p.itemChildren && p.itemChildren.properties
-      return kids ? kids.length : 0
-    },
-    /** 需要整行铺开的控件（代码编辑器这类高控件，横排会被挤扁） */
-    isBlock(p) {
-      return p && p.itemType === 'Code'
-    },
-    /** 分组是否应当渲染：自身可见 且 至少存在一个可见后代（叶子或子分组） */
-    groupVisible(p) {
-      if (p.itemVisible === false) return false
-      const kids = p.itemChildren && p.itemChildren.properties
-      if (!kids || !kids.length) return true
-      return kids.some((c) => {
-        if (c.itemVisible === false) return false
-        if (this.isGroup(c)) return this.groupVisible(c)
-        return true
-      })
-    },
-    isOpen(p) {
-      // 默认展开；仅当显式置为 false 时收起
-      return this.openMap[p.itemId] !== false
-    },
-    toggle(p) {
-      this.openMap[p.itemId] = this.openMap[p.itemId] === false
-      // 触发响应式
-      this.openMap = Object.assign({}, this.openMap)
-    },
-    onLeaf(p) {
-      this.$emit('leaf-change', this.chain.concat(p))
-    },
-    onSync(map) {
-      this.$emit('leaf-sync', map)
-    },
-  },
-}
-</script>

package/dist/vendored/components/RemotePreview.vue

@@ -1,173 +0,0 @@
-<template>
-  <transition name="modal">
-  <div v-if="visible" class="rp-mask" @click.self="$emit('close')">
-    <div class="rp-card modal-card" role="dialog" aria-label="远端预览二维码">
-      <div class="rp-head">
-        <span class="rp-title">远端预览（真机扫码）</span>
-        <button class="rp-x" type="button" @click="$emit('close')" aria-label="关闭">×</button>
-      </div>
-      <div class="rp-body">
-        <div class="rp-qr-wrap">
-          <img v-if="qrDataUrl" :src="qrDataUrl" class="rp-qr" :class="{ 'rp-qr--blurred': publishing }" alt="preview qr" />
-          <div v-else class="rp-qr rp-qr--loading">{{ loading ? '准备中…' : '—' }}</div>
-          <div v-if="publishing" class="rp-qr-loading">
-            <span class="rp-spinner" />
-            <span class="rp-loading-text">正在发布预览…</span>
-          </div>
-        </div>
-        <p class="rp-tip">手机（FinMall App）扫一扫，真机查看当前卡片预览</p>
-
-        <div class="rp-url">
-          <code class="rp-url-text">{{ url || '—' }}</code>
-          <button class="rp-copy" type="button" :disabled="!url" @click="copyUrl">
-            {{ copied ? '已复制 ✓' : '复制链接' }}
-          </button>
-        </div>
-        <p v-if="warn" class="rp-warn">{{ warn }}</p>
-      </div>
-    </div>
-  </div>
-  </transition>
-</template>
-
-<script>
-import QRCode from 'qrcode'
-import { apiFetch } from '@/api.js'
-
-/**
- * 复刻 ubomp-h5-sub 的 PreviewPopover.vue（onPopoverShow）远端预览逻辑：
- *   1) 先显示「简版」二维码：app://previewCard?cardId=<id>（对齐 PreviewPopover 第80行）
- *   2) 调后端 /__preview 走全链路：
- *        prepreview 保存（IDC10010）→ 取 code（IDC10015）→ 发布测试版（IDC10020）→ 通知真机（IDC10021）
- *   3) 再显示「完整版」二维码：app://previewCard?cardId=<id>&cardCode=<code>&cardVersion=00000000&socket=<wss>
- *      （对齐 PreviewPopover 第92行，socket = CARD_WEBSOCKET + /websocket/card/<id>）
- * 二维码编码的是原生 App scheme（非 http 地址），由 FinMall App 扫码后自行渲染卡片。
- * 参考 ubomp-h5-sub/src/modules/inner_card/views/editor/components/PreviewPopover.vue
- */
-export default {
-  name: 'RemotePreview',
-  props: {
-    visible: { type: Boolean, default: false },
-    // 远端卡片 id（schema.pageId，数值型），对应 ubomp 的 cardId / $route.query.id
-    pageId: { type: [String, Number], default: '' },
-    // 当前卡片完整 schema（含 pageId），用于「预览前先保存」当前编辑内容
-    schema: { type: Object, default: null },
-    // 远端卡片 code（可选；留空时由 /__preview 经 IDC10015 取回）
-    cardCode: { type: String, default: '' },
-  },
-  data() {
-    return {
-      qrDataUrl: '',
-      url: '',
-      loading: false,
-      publishing: false,
-      copied: false,
-      copyTimer: null,
-      warn: '',
-      code: '',
-    }
-  },
-  watch: {
-    visible(v) {
-      if (v) this.open()
-    },
-    pageId() {
-      if (this.visible) this.open()
-    },
-  },
-  beforeUnmount() {
-    if (this.copyTimer) clearTimeout(this.copyTimer)
-  },
-  methods: {
-    buildSocket(cardId) {
-      // 对应 ubomp config/uat.env.js：CARD_WEBSOCKET = wss://<host>/pmb-web
-      // 域名不硬编码：从 .env.cb 的 FINMALL_BASE_URL 经 vite 暴露到
-      // import.meta.env 读取（默认 UAT 域名），部署到其他环境时改配置即可。
-      const base = import.meta.env.FINMALL_BASE_URL || 'https://uat-pkg.finmall.com'
-      const wsHost = base.replace(/^https?:/, 'wss:')
-      return `${wsHost}/pmb-web/websocket/card/${cardId}`
-    },
-    fullUrl(cardId, cardCode) {
-      const socket = this.buildSocket(cardId)
-      return (
-        `app://previewCard?cardId=${encodeURIComponent(cardId)}` +
-        `&cardCode=${encodeURIComponent(cardCode || '')}` +
-        `&cardVersion=00000000` +
-        `&socket=${encodeURIComponent(socket)}`
-      )
-    },
-    async makeQr(text) {
-      return QRCode.toDataURL(text, {
-        width: 220,
-        margin: 1,
-        errorCorrectionLevel: 'H',
-        color: { dark: '#10131a', light: '#ffffff' },
-      })
-    },
-    async open() {
-      this.qrDataUrl = ''
-      this.url = ''
-      this.loading = true
-      this.publishing = false
-      this.copied = false
-      this.warn = ''
-      this.code = this.cardCode || ''
-      const cardId = String(this.pageId || '').trim()
-      if (!cardId) {
-        this.warn = '当前卡片缺少 pageId（远端卡片 id），无法生成预览二维码'
-        this.loading = false
-        return
-      }
-      // 1) 简版二维码（仅 cardId）
-      this.url = `app://previewCard?cardId=${encodeURIComponent(cardId)}`
-      try {
-        this.qrDataUrl = await this.makeQr(this.url)
-      } catch (e) {
-        this.warn = '二维码生成失败：' + (e && e.message)
-      }
-      // 2) 走远端全链路：保存 → 取 code → 发布 → 通知
-      this.publishing = true
-      try {
-        const resp = await apiFetch('/__preview', {
-          method: 'POST',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ schema: this.schema || { pageId: cardId } }),
-        })
-        const data = await resp.json().catch(() => ({}))
-        if (!resp.ok) throw new Error(data.message || 'preview failed')
-        if (data.cardCode !== undefined) this.code = data.cardCode
-        // 3) 完整版二维码（带 cardCode / socket）
-        this.url = this.fullUrl(cardId, this.code)
-        this.qrDataUrl = await this.makeQr(this.url)
-      } catch (e) {
-        this.warn = '远端发布失败：' + (e && e.message)
-      } finally {
-        this.publishing = false
-        this.loading = false
-      }
-    },
-    async copyUrl() {
-      if (!this.url) return
-      try {
-        if (navigator.clipboard && navigator.clipboard.writeText) {
-          await navigator.clipboard.writeText(this.url)
-        } else {
-          const ta = document.createElement('textarea')
-          ta.value = this.url
-          ta.style.position = 'fixed'
-          ta.style.opacity = '0'
-          document.body.appendChild(ta)
-          ta.select()
-          document.execCommand('copy')
-          document.body.removeChild(ta)
-        }
-        this.copied = true
-        if (this.copyTimer) clearTimeout(this.copyTimer)
-        this.copyTimer = setTimeout(() => { this.copied = false }, 1500)
-      } catch (e) {
-        this.warn = '复制失败：' + (e && e.message)
-      }
-    },
-  },
-}
-</script>

package/dist/vendored/components/SelectionOverlay.vue

@@ -1,105 +0,0 @@
-<!--
-  节点覆盖层（DevTools 风格）：作为 .phone__screen（滚动容器）的直接子节点，绝对定位于
-  屏幕的 content 坐标系：这样它随卡片内容纵向滚动时自动贴合目标元素，无需手动跟随滚动。
-
-  位置/尺寸由 store.el 的 getBoundingClientRect() 相对屏幕计算而来，对任意元素类型
-  （canvas / input / button / div / span …）均生效。
-
-  本组件通过 props 复用：
-    - store：驱动覆盖层的响应式 store（默认选中态 store）；
-    - boxClass：覆盖层样式 class（默认选中态 ce-sel-overlay）。
-  （hover 参考线为独立组件 HoverGuides.vue，不再复用本组件。）
--->
-<template>
-  <div
-    v-show="store.visible"
-    :class="boxClass"
-    :style="boxStyle"
-  ><svg width="100%" height="100%" style="display: block;" xmlns="http://www.w3.org/2000/svg"><rect id="controls_bounding_rect" x="0" y="0" width="100%" height="100%" fill="transparent" style="stroke: var(--accent);" stroke-width="1" stroke-dasharray="4"></rect></svg>
-  </div>
-</template>
-
-<script>
-import { selectionOverlay } from '@/runtime/selectionOverlay.js'
-
-export default {
-  name: 'SelectionOverlay',
-  props: {
-    // 驱动覆盖层的响应式 store（默认选中态；hover 参考线复用本组件时传 hoverGuide）
-    store: { type: Object, default: () => selectionOverlay },
-    // 覆盖层样式 class（选中态 = ce-sel-overlay；hover 参考线 = ce-guide-overlay）
-    boxClass: { type: String, default: 'ce-sel-overlay' },
-  },
-  data() {
-    return {
-      boxStyle: { top: '0px', left: '0px', width: '0px', height: '0px' },
-      _ro: null,
-      _onScroll: null,
-      _onResize: null,
-      _raf: 0,
-    }
-  },
-  watch: {
-    // 目标元素变化或显隐变化：重新定位（并接管对该元素的尺寸监听）
-    'store.el'() {
-      this.bindTarget()
-      this.schedule()
-    },
-  },
-  mounted() {
-    this._onScroll = () => this.schedule()
-    this._onResize = () => this.schedule()
-    // 滚动（含嵌套滚动）与窗口缩放都可能改变元素视口位置，重算即可，
-    // 因坐标基于 content 且覆盖层随滚动容器移动，重算值本身稳定，开销很小。
-    document.addEventListener('scroll', this._onScroll, { passive: true, capture: true })
-    window.addEventListener('resize', this._onResize)
-    this.bindTarget()
-    this.schedule()
-  },
-  beforeUnmount() {
-    document.removeEventListener('scroll', this._onScroll, { capture: true })
-    window.removeEventListener('resize', this._onResize)
-    if (this._ro) { this._ro.disconnect(); this._ro = null }
-    if (this._raf) cancelAnimationFrame(this._raf)
-  },
-  methods: {
-    /** 把 ResizeObserver 绑定到当前目标元素，元素自身尺寸变化（编辑文本/改样式）时自动重算 */
-    bindTarget() {
-      if (this._ro) { this._ro.disconnect(); this._ro = null }
-      const el = this.store.el
-      if (!el || typeof ResizeObserver === 'undefined') return
-      this._ro = new ResizeObserver(() => this.schedule())
-      this._ro.observe(el)
-    },
-    /** rAF 批处理，避免一帧内多次重算 */
-    schedule() {
-      if (this._raf) return
-      this._raf = requestAnimationFrame(() => {
-        this._raf = 0
-        this.recompute()
-      })
-    },
-    recompute() {
-      const el = this.store.el
-      if (!el || !this.store.visible) return
-      const container = el.closest('.phone__screen')
-      // 目标元素已脱离文档（如切换卡片后旧的 RenderTree 被卸载）：自动隐藏，避免残留
-      if (!container) {
-        this.store.visible = false
-        return
-      }
-      const cRect = container.getBoundingClientRect()
-      const eRect = el.getBoundingClientRect()
-      // content 坐标：减屏幕视口偏移 + 加屏幕滚动量（抵消滚动，使覆盖层粘在元素上）
-      const top = eRect.top - cRect.top + container.scrollTop
-      const left = eRect.left - cRect.left + container.scrollLeft
-      this.boxStyle = {
-        top: top + 'px',
-        left: left + 'px',
-        width: eRect.width + 'px',
-        height: eRect.height + 'px',
-      }
-    },
-  },
-}
-</script>