cardbuddy 0.11.0 → 0.12.1

package/dist/vendored/components/DeviceOverlay.vue

@@ -1,70 +0,0 @@
-<!--
-  设备级模拟 UI 图层：alertDialog 确认对话框 + showToast 弱提示。
-  相对固定视口 phone-viewport 定位（absolute inset:0），不随卡片内容滚动。
-  层级高于 alertCard 图层（z-index 1100 > 1000），模拟原生对话框盖住弹窗卡片。
--->
-<template>
-  <div class="device-ui">
-    <!-- alertDialog：原生风格居中确认对话框 -->
-    <transition name="dlg-fade">
-      <div v-if="dialog" class="dlg-mask" @click.self="onMaskClick">
-        <div class="dlg">
-          <div v-if="dialog.title" class="dlg__title">{{ dialog.title }}</div>
-          <div v-if="dialog.message" class="dlg__msg">{{ dialog.message }}</div>
-          <div class="dlg__btns">
-            <button
-              v-if="dialog.cancelButton"
-              type="button"
-              class="dlg__btn dlg__btn--cancel"
-              :class="{ 'dlg__btn--gray': dialog.cancelGrayStyle }"
-              @click="onCancel"
-            >{{ dialog.cancelButton }}</button>
-            <button type="button" class="dlg__btn dlg__btn--ok" @click="onOk">{{ dialog.okButton }}</button>
-          </div>
-        </div>
-      </div>
-    </transition>
-    <!-- showToast：居中弱提示（对齐 Vant Toast 视觉语言） -->
-    <transition name="toast-fade">
-      <div v-if="toast" class="dtoast" :class="{ 'dtoast--icon': toast.icon }">
-        <span v-if="toast.icon" class="dtoast__icon" :class="'dtoast__icon--' + toast.icon">
-          <svg class="dtoast__icon-svg" viewBox="0 0 24 24" aria-hidden="true">
-            <path v-if="toast.icon === 'ok'" d="M5 13l4 4L19 7" />
-            <path v-else d="M6 6l12 12M18 6L6 18" />
-          </svg>
-        </span>
-        <span class="dtoast__msg">{{ toast.message }}</span>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-import { deviceUI, dismissDialog } from '@/runtime/jsapi-mock.js'
-
-export default {
-  name: 'DeviceOverlay',
-  computed: {
-    dialog() {
-      return deviceUI.dialog
-    },
-    toast() {
-      return deviceUI.toast
-    },
-  },
-  methods: {
-    onOk() {
-      dismissDialog({ ok: true, dismissByClickBg: false })
-    },
-    onCancel() {
-      dismissDialog({ ok: false, dismissByClickBg: false })
-    },
-    onMaskClick() {
-      // 仅当 clickBgToHide 为 true 时点击背景才关闭（dismissByClickBg 标记此关闭方式）
-      if (this.dialog && this.dialog.clickBgToHide) {
-        dismissDialog({ ok: false, dismissByClickBg: true })
-      }
-    },
-  },
-}
-</script>

package/dist/vendored/components/Dropdown.vue

@@ -1,193 +0,0 @@
-<template>
-  <div ref="root" class="dd" :class="['dd--' + size, { 'dd--open': open, 'dd--block': block, 'dd--disabled': disabled, 'dd--borderless': borderless, 'dd--dropup': dropUp }]" :style="rootStyle">
-    <button
-      v-if="!hasTriggerSlot"
-      type="button"
-      class="dd__trigger"
-      :class="{ 'dd__trigger--active': open }"
-      :disabled="disabled"
-      @click="toggle"
-    >
-      <!-- current 插槽：自定义触发器内的已选值呈现（如「彩色类型标签 + 中文名」），缺省仍为纯文本 -->
-      <span class="dd__label" :title="displayText"><slot name="current" :opt="current" :text="displayText">{{ displayText }}</slot></span>
-      <span
-        v-if="clearable && hasValue"
-        class="dd__clear"
-        role="button"
-        tabindex="-1"
-        title="清空"
-        @click.stop="clear"
-        >✕</span
-      >
-      <svg class="dd__chev" viewBox="0 0 16 16" :width="chevSize" :height="chevSize" aria-hidden="true"><use href="#icon-chevron" /></svg>
-    </button>
-    <div v-else class="dd__trigger dd__trigger--slot" @click="toggle">
-      <slot name="trigger" :open="open" :toggle="toggle" />
-    </div>
-
-    <transition name="dd-fade">
-      <div v-if="open" ref="pop" class="dd__pop" :class="['dd__pop--' + placement]">
-        <slot :close="close" :choose="choose">
-          <ul class="dd__list">
-            <li
-              v-for="opt in options"
-              :key="opt.key"
-              class="dd__item"
-              :class="{ 'dd__item--selected': opt.key === value, 'dd__item--disabled': opt.disabled }"
-              @mousemove="onHover(opt)"
-              @click="onItemClick(opt)"
-            >
-              <!-- option 插槽：自定义单个选项的内容，缺省为 opt.value 纯文本 -->
-              <span class="dd__item-text"><slot name="option" :opt="opt">{{ opt.value }}</slot></span>
-              <svg v-if="opt.key === value" class="dd__check" viewBox="0 0 16 16" :width="checkSize" :height="checkSize" aria-hidden="true"><use href="#icon-check" /></svg>
-            </li>
-            <li v-if="!options.length" class="dd__empty">{{ placeholder || '无选项' }}</li>
-          </ul>
-        </slot>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Dropdown',
-  emits: ['input', 'change'],
-  props: {
-    value: { type: [String, Number, null], default: '' },
-    options: { type: Array, default: () => [] },
-    placeholder: { type: String, default: '请选择' },
-    // 尺寸：xs（表单紧凑 24px）/ sm（28px）/ md（顶栏 32px）/ lg（36px）
-    size: { type: String, default: 'sm' },
-    // block：撑满父容器宽度（表单内 select 用）
-    block: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    // 弹层对齐：bottom-start（左对齐）/ bottom-end（右对齐）
-    placement: { type: String, default: 'bottom-start' },
-    // 外部宽度覆盖（px），优先级高于 size
-    width: { type: [String, Number], default: null },
-    // 无边框模式：默认 false（有边框）；true 时不显示边框与选中高亮效果
-    borderless: { type: Boolean, default: false },
-    // 触发器显示文案自定义（默认取选中项 value 或 placeholder）
-    label: { type: String, default: null },
-    // 可清空：选中值后触发器右侧显示 ✕ 清除按钮（默认 false，避免影响其它下拉）
-    clearable: { type: Boolean, default: false },
-  },
-  data() {
-    return { open: false, dropUp: false }
-  },
-  computed: {
-    hasTriggerSlot() {
-      return !!this.$slots.trigger
-    },
-    current() {
-      return this.options.find((o) => o.key === this.value) || null
-    },
-    hasValue() {
-      return this.value !== '' && this.value !== null && this.value !== undefined
-    },
-    displayText() {
-      if (this.label != null) return this.label
-      if (this.current) return this.current.value || String(this.current.key)
-      return this.placeholder || '请选择'
-    },
-    chevSize() {
-      return this.size === 'xs' ? 11 : this.size === 'md' || this.size === 'lg' ? 13 : 12
-    },
-    checkSize() {
-      return this.size === 'xs' ? 11 : 12
-    },
-    rootStyle() {
-      if (this.width != null) return { width: typeof this.width === 'number' ? this.width + 'px' : this.width }
-      return null
-    },
-  },
-  watch: {
-    open(v) {
-      if (v) {
-        document.addEventListener('click', this.onDocClick, true)
-      } else {
-        document.removeEventListener('click', this.onDocClick, true)
-      }
-    },
-  },
-  beforeUnmount() {
-    document.removeEventListener('click', this.onDocClick, true)
-  },
-  methods: {
-    toggle() {
-      if (this.disabled) return
-      if (!this.open) this.openMenu()
-      else this.open = false
-    },
-    openMenu() {
-      // 打开前先估算弹层高度，判断下方空间是否足够；不足且上方够则翻转到上方，
-      // 避免触发器位于滚动/裁剪容器底部时弹层被裁掉、需手动滚动才可见。
-      const root = this.$refs.root
-      if (root) {
-        const estH = Math.min(this.options.length * 31 + 12, 290)
-        this.dropUp = this.shouldDropUp(root, estH)
-      }
-      this.open = true
-      // 渲染后按弹层真实高度再校正一次（估算与实际有出入时兜底，避免闪烁）
-      this.$nextTick(() => {
-        const pop = this.$refs.pop
-        const root = this.$refs.root
-        if (!pop || !root) return
-        const want = this.shouldDropUp(root, pop.offsetHeight)
-        if (want !== this.dropUp) this.dropUp = want
-      })
-    },
-    /** 触发器位于容器底部、下方空间不足以容纳弹层且上方空间足够时返回 true（向上弹出） */
-    shouldDropUp(root, popH) {
-      const tr = root.getBoundingClientRect()
-      const clip = this.getClipRect(root)
-      const spaceBelow = clip.bottom - tr.bottom
-      const spaceAbove = tr.top - clip.top
-      return spaceBelow < popH && spaceAbove >= popH
-    },
-    /** 向上回溯找到最近的会裁剪/滚动内容的祖先，作为可见区域边界；
-       找不到则回退到视口。弹层必须落在该矩形内才不会被裁掉。 */
-    getClipRect(el) {
-      let node = el.parentElement
-      while (node && node !== document.body) {
-        const ov = getComputedStyle(node).overflowY
-        if (ov === 'auto' || ov === 'scroll' || ov === 'hidden') {
-          return node.getBoundingClientRect()
-        }
-        node = node.parentElement
-      }
-      return document.documentElement.getBoundingClientRect()
-    },
-    close() {
-      this.open = false
-      this.dropUp = false
-    },
-    clear() {
-      if (this.disabled) return
-      this.close()
-      // 即使值未变也照常回传空串，确保父级能把字段重置为空
-      this.$emit('input', '')
-      this.$emit('change', '')
-    },
-    onDocClick(e) {
-      if (this.$refs.root && !this.$refs.root.contains(e.target)) this.close()
-    },
-    onHover() {},
-    onItemClick(opt) {
-      if (opt.disabled) return
-      this.choose(opt.key)
-    },
-    choose(key) {
-      this.close()
-      if (key !== this.value) {
-        this.$emit('input', key)
-        this.$emit('change', key)
-      } else {
-        // 即使值未变也允许父级响应（如菜单按钮只关心点击）
-        this.$emit('change', key)
-      }
-    },
-  },
-}
-</script>

package/dist/vendored/components/EventEditor.vue

@@ -1,273 +0,0 @@
-<!--
-  节点事件编辑抽屉（右侧滑出）。
-
-  与属性编辑（NodeInspector）解耦：结构树的「事件」徽标 / 事件计数按钮
-  点击时单独打开本抽屉，只编辑 eventactions，不涉及属性/样式。
-
-  上下排布：上方事件开关列表，下方动作 / 脚本编辑区（复用 PropTree）。
-  数据模型与 NodeInspector 事件页签一致（EventEditModel）：
-   - 列出该节点所有可用事件（组件 events + 全局生命周期），每事件一个开关；
-   - 开关开 -> 选中后在下方展示动作类型选择 + 参数表单；
-   - 编辑即时（防抖）重建预览（emit apply），「应用」把改动暂存进内存工作副本（currentSchema），落盘由顶栏「保存到本地」负责；不再 emit write-back。
--->
-<template>
-  <div class="ee-overlay">
-    <div class="ee-panel">
-      <div class="ee-head">
-        <span class="ee-title">
-          事件配置 · {{ compName }}
-          <em class="ee-cls">{{ schemaNode && schemaNode.className }}</em>
-        </span>
-        <button class="ee-close" type="button" @click="onClose"></button>
-      </div>
-
-      <div class="ee-body">
-        <aside class="ee-side">
-          <p v-if="!eventModel || !eventModel.eventOptions.length" class="ee-empty">该节点无可用事件</p>
-          <div v-else class="ee-evt-list">
-            <div
-              v-for="evt in eventModel.eventOptions"
-              :key="evt.eventKey"
-              class="ee-evt"
-              :class="{ 'is-on': isOn(evt), 'is-sel': activeKey === evt.eventKey }"
-              @click="onSelectEvent(evt)"
-            >
-              <span class="ee-evt-name" :title="evt.eventDesc || evt.eventName || evt.eventKey">{{ evt.eventName || evt.eventKey }}</span>
-              <button
-                class="ee-switch"
-                type="button"
-                role="switch"
-                :aria-checked="isOn(evt)"
-                :class="{ 'is-on': isOn(evt) }"
-                @click.stop="onToggleEvent(evt)"
-              ><span class="ee-switch__dot"></span></button>
-            </div>
-          </div>
-          <!-- 帮助图标：与事件项左右靠边、垂直居中；点击弹出当前动作的使用说明 -->
-          <button
-            class="ee-help"
-            type="button"
-            :title="helpOpen ? '关闭使用说明' : '使用说明'"
-            @click.stop="helpOpen = !helpOpen"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <circle cx="12" cy="12" r="10"></circle>
-              <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
-              <line x1="12" y1="17" x2="12.01" y2="17"></line>
-            </svg>
-          </button>
-          <div v-if="helpOpen" class="ee-help__mask" @click="helpOpen = false"></div>
-          <Transition name="pop">
-          <div v-if="helpOpen" class="ee-help__pop" @click.stop>
-            <p class="ee-help__text">{{ helpText }}</p>
-          </div>
-          </Transition>
-        </aside>
-
-        <section class="ee-detail">
-          <template v-if="activeRow">
-            <div class="ee-detail-head">
-              <div class="ee-field-row">
-                <label class="ee-field-label">动作类型</label>
-                <Dropdown
-                  :value="activeRow.actionType"
-                  :options="actionOptions(activeRow)"
-                  size="sm"
-                  block
-                  @change="onActionType(activeRow, $event)"
-                />
-              </div>
-            </div>
-
-            <div class="ee-detail-body">
-              <prop-tree
-                v-if="activeRow.properties.length"
-                :key="activeRow.formKey"
-                :properties="activeRow.properties"
-                mode="event"
-                :plain="true"
-                @leaf-change="onEventLeaf"
-              />
-              <p v-else class="ee-empty">该动作无可配置参数</p>
-              <p v-if="activeRow.extraProperties.length" class="ee-evt-orphan">
-                另有 {{ activeRow.extraProperties.length }} 项 meta 未定义的参数，已原样保留
-              </p>
-            </div>
-          </template>
-
-          <p v-else class="ee-empty ee-detail-empty">请在左侧开启并选择一个事件</p>
-        </section>
-      </div>
-
-     <div class="ee-foot">
-       <span class="ee-tip">编辑即时预览（不记历史）；「应用」写入历史并关闭，落盘由顶栏「保存到本地」负责</span>
-       <div class="ee-foot-btns">
-          <button class="ee-btn ee-btn--ghost" type="button" @click="onCancel">取消</button>
-          <button class="ee-btn" type="button" @click="onApplyWrite">应用</button>
-       </div>
-     </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { reactive } from 'vue'
-import { EventEditModel, ACTION_MAP } from '@/runtime/event-model.js'
-
-export default {
-  name: 'EventEditor',
-  props: {
-    comp: { type: Object, required: true },
-    compNames: { type: Object, default: () => ({}) },
-    rt: { type: Object, required: true },
-  },
-  emits: ['apply', 'commit', 'close'],
-  data() {
-    return {
-      eventModel: null,
-      activeKey: '',
-      helpOpen: false,
-      _t: null,
-      _snapshot: null,
-      _dirty: false,
-      _written: false,
-    }
-  },
-  computed: {
-    schemaNode() {
-      return (this.comp && this.comp._schemaNode) || null
-    },
-    compName() {
-      const cn = this.schemaNode && this.schemaNode.className
-      if (!cn) return '节点'
-      return (this.compNames && this.compNames[cn]) || cn
-    },
-    activeRow() {
-      if (!this.eventModel || !this.activeKey) return null
-      return this.eventModel.rowForEvent(this.activeKey) || null
-    },
-    /** 帮助弹层文案：当前动作类型的使用说明；无选中动作时给通用引导 */
-    helpText() {
-      const d = this.activeRow ? this.actionDesc(this.activeRow.actionType) : ''
-      return d || '先在上方开启事件，再选择动作类型并填写参数；编辑即时预览，「应用」写入历史。'
-    },
-  },
-  watch: {
-    comp: {
-      immediate: true,
-      handler() {
-        this.buildModel()
-      },
-    },
-  },
-  methods: {
-    buildModel() {
-      const sn = this.schemaNode
-      this.eventModel = sn ? reactive(new EventEditModel(sn)) : null
-      this.activeKey = ''
-      this.helpOpen = false
-      this._snapshot = sn ? this.snapshotEventActions(sn) : null
-      this._dirty = false
-      this._written = false
-      this.autoSelect()
-    },
-    snapshotEventActions(node) {
-      const hadKey = Object.prototype.hasOwnProperty.call(node, 'eventactions')
-      return {
-        hadKey,
-        eventactions: hadKey ? JSON.parse(JSON.stringify(node.eventactions || [])) : [],
-      }
-    },
-    restoreSnapshot() {
-      const sn = this.schemaNode
-      if (!sn || !this._snapshot) return
-      if (this._snapshot.hadKey) {
-        sn.eventactions = JSON.parse(JSON.stringify(this._snapshot.eventactions || []))
-      } else {
-        delete sn.eventactions
-      }
-    },
-    autoSelect() {
-      // 默认展开「第一个已开启事件」的设置区（驱动下方输入框区域），但不整行高亮；
-      // 没有已开启事件时保持空态。注意：仅选已开启项，不默认选中未开启的首项。
-      if (!this.eventModel) { this.activeKey = ''; return }
-      const firstOn = this.eventModel.eventOptions.find((e) => this.eventModel.rowForEvent(e.eventKey))
-      this.activeKey = firstOn ? firstOn.eventKey : ''
-    },
-    isOn(evt) {
-      return !!(this.eventModel && this.eventModel.rowForEvent(evt.eventKey))
-    },
-    onSelectEvent(evt) {
-      this.activeKey = evt.eventKey
-    },
-    onToggleEvent(evt) {
-      const wasOn = this.isOn(evt)
-      this.eventModel.toggleEvent(evt)
-      this._dirty = true
-      // 开启后展开该事件的下方设置区（驱动右侧详情区），但不整行高亮；
-      // 关闭当前正编辑的事件时收起详情区
-      if (!wasOn) {
-        this.activeKey = evt.eventKey
-      } else if (this.activeKey === evt.eventKey) {
-        this.activeKey = ''
-      }
-      this.scheduleApply()
-    },
-    actionOptions(row) {
-      return (this.eventModel.actionOptionsForEvent(row.eventKey, row.actionType) || []).map((a) => ({
-        key: a.actionType,
-        value: a.actionName + (a._unknown ? ' · meta 未定义' : ''),
-      }))
-    },
-    actionDesc(t) {
-      return (ACTION_MAP[t] && ACTION_MAP[t].actionDesc) || ''
-    },
-    onActionType(row, type) {
-      this.eventModel.setActionType(row, type)
-      this._dirty = true
-      this.scheduleApply()
-    },
-    onEventLeaf() {
-      this.eventModel.refreshVisible()
-      this._dirty = true
-      this.scheduleApply()
-    },
-    scheduleApply() {
-      if (this._t) clearTimeout(this._t)
-      this._t = setTimeout(() => {
-        this.applyAll()
-        this.$emit('apply')
-      }, 250)
-    },
-    applyAll() {
-      if (this.eventModel) this.eventModel.applyToSchema()
-    },
-    /** 将改动暂存到内存工作副本（currentSchema，与预览同引用），并重建预览；
-     *  不写盘——落盘由顶栏「保存到本地」统一负责。_written=true 表示已提交到内存，
-     *  「取消」不再还原；随后关闭抽屉。 */
-    onApplyWrite() {
-      if (this._t) {
-        clearTimeout(this._t)
-        this._t = null
-      }
-      this.applyAll()
-      this._written = true
-      this.$emit('apply')
-      this.$emit('commit')
-      this.$emit('close')
-    },
-    onCancel() {
-      this.onClose()
-    },
-    onClose() {
-      if (this._t) { clearTimeout(this._t); this._t = null }
-      if (this._dirty && !this._written) {
-        this.restoreSnapshot()
-        this.$emit('apply')
-      }
-      this.$emit('close')
-    },
-  },
-}
-</script>

package/dist/vendored/components/HoverGuides.vue

@@ -1,122 +0,0 @@
-<!--
-  「组件结构」tab 的 hover 参考线（Photoshop 风格辅助线）：
-
-  鼠标 hover 到结构树某节点时，于画布上绘制两对「贯穿」参考线，用于选中/定位前的快速预览——
-    - 一对竖线：位于元素左、右边缘，纵向贯穿整个画布（高度 = 画布内容全高）；
-    - 一对横线：位于元素上、下边缘，横向贯穿整个画布（宽度 = 画布内容全宽）。
-
-  覆盖层作为 .phone__screen（滚动容器）的直接子节点，绝对定位于屏幕的 content 坐标系，
-  随卡片内容纵向滚动时自动贴合目标元素，无需手动跟随滚动；pointer-events:none 不挡交互。
-
-  与选中态遮罩 (SelectionOverlay) 相互独立：选中框（蓝虚线）与 hover 参考线（荧光绿贯穿线）
-  可同时显示、互不干扰。定位依据：hoverGuide.el 即目标节点画布根 DOM，由 App.onHoverNode
-  通过 data-cid 反查写入。
--->
-<template>
-  <div v-show="hoverGuide.visible" class="ce-guides" :style="containerStyle">
-    <!-- 左 / 右竖线：贯穿画布全高 -->
-    <div class="ce-guide ce-guide--v" :style="{ left: box.left + 'px' }"></div>
-    <div class="ce-guide ce-guide--v" :style="{ left: box.right + 'px' }"></div>
-    <!-- 上 / 下横线：贯穿画布全宽 -->
-    <div class="ce-guide ce-guide--h" :style="{ top: box.top + 'px' }"></div>
-    <div class="ce-guide ce-guide--h" :style="{ top: box.bottom + 'px' }"></div>
-  </div>
-</template>
-
-<script>
-import { watch } from 'vue'
-import { hoverGuide } from '@/runtime/hoverGuide.js'
-
-export default {
-  name: 'HoverGuides',
-  // 模板需要访问模块级 reactive 对象 hoverGuide（v-show 控制显隐），
-  // 但 Vue SFC 的 <template> 作用域只能访问组件实例属性，
-  // 故通过 setup() 把它暴露出去（不能裸用 import 变量）。
-  setup() {
-    return { hoverGuide }
-  },
-  data() {
-    return {
-      // 元素边缘（content 坐标）：左/上/右/下
-      box: { left: 0, top: 0, right: 0, bottom: 0 },
-      // 覆盖层尺寸 = 画布内容全宽 / 全高，使参考线贯穿整块画布
-      containerStyle: { width: '0px', height: '0px' },
-      _ro: null,
-      _onScroll: null,
-      _onResize: null,
-      _raf: 0,
-      _stopWatch: null,
-    }
-  },
-  created() {
-    // 注意：hoverGuide 是模块级 reactive 导入，不属于组件实例，
-    // Options API 的字符串监听路径 'hoverGuide.el' 会相对 this 解析而失效，
-    // 必须改用命令式 watch(getter) 才能正确监听目标元素变化。
-    this._stopWatch = watch(
-      () => hoverGuide.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._stopWatch) { this._stopWatch(); this._stopWatch = null }
-    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 = hoverGuide.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 = hoverGuide.el
-      if (!el || !hoverGuide.visible) return
-      const container = el.closest('.phone__screen')
-      // 目标元素已脱离文档（如切换卡片后旧的 RenderTree 被卸载）：自动隐藏，避免残留
-      if (!container) {
-        hoverGuide.visible = false
-        return
-      }
-      const cRect = container.getBoundingClientRect()
-      const eRect = el.getBoundingClientRect()
-      // content 坐标：减屏幕视口偏移 + 加屏幕滚动量（抵消滚动，使参考线粘在元素上）
-      const left = eRect.left - cRect.left + container.scrollLeft
-      const top = eRect.top - cRect.top + container.scrollTop
-      const width = eRect.width
-      const height = eRect.height
-      this.box = { left, top, right: left + width, bottom: top + height }
-      // 贯穿尺寸：竖线高 = 画布内容全高（scrollHeight），横线宽 = 画布内容全宽（clientWidth）
-      this.containerStyle = {
-        width: container.clientWidth + 'px',
-        height: container.scrollHeight + 'px',
-      }
-    },
-  },
-}
-</script>