cardbuddy 0.6.0

package/dist/vendored/components/StructureTree.vue

@@ -0,0 +1,949 @@
+<!--
+  组件结构树：以编辑器「结构」面板为参考，展示当前卡片的组件层级。
+  每个节点显示：组件类型中文名 + 实例ID（【xxx】）+ 事件标记。
+  支持展开/折叠，默认全部展开。
+  单击选中节点（即时，无延迟）；双击节点打开节点属性面板（inspect 事件）；
+  行最右侧「齿轮」图标按钮亦可打开同一面板。单击与双击为独立原生事件，互不干扰。
+-->
+<template>
+  <div class="st">
+    <!--
+      顶部工具条：与数据绑定 tab JsonTree 的 .jt__toolbar 同款
+      （sticky 顶部 + .jt__tool 按钮风格），保持两个 tab 操作入口一致。
+    -->
+    <div class="st__toolbar st__toolbar--top">
+      <button class="jt__tool" type="button" @click="expandAll">全部展开</button>
+      <button class="jt__tool" type="button" @click="collapseAll">全部折叠</button>
+      <!--
+        定位开关：图标按钮（无文字），点击切换激活态。激活时节点 hover 才上抛
+        hover-node 触发画布参考线；未激活则过滤所有 hover 事件，不触发参考线。
+      -->
+      <button
+        class="jt__tool st__locate"
+        :class="{ 'st__locate--active': locateEnabled }"
+        type="button"
+        :title="locateEnabled ? '定位：开（hover 节点显示画布参考线）' : '定位：关（hover 节点不显示参考线）'"
+        :aria-pressed="locateEnabled"
+        @click="toggleLocate"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-locate" /></svg>
+      </button>
+      <!--
+        搜索框置于「展开/折叠」与「+ 添加」之间：flex:1 在中间撑开，
+        把展开/折叠推到左侧、+ 添加推到右侧，整体单行排列。
+      -->
+      <input
+        class="st__search"
+        type="text"
+        v-model="query"
+        placeholder="搜索组件…"
+        title="按组件名 / 类型 / 实例ID 过滤结构树"
+      />
+      <!--
+        顶部「+ 添加」按钮：与数据绑定 tab（JsonTree）工具栏右侧的「+ 添加」同款，
+        位于面板右上角。插入锚点由「当前选中节点」决定（未选中→根；容器→末尾子节点；
+        非容器→其后兄弟），与线上编辑器「卡片-组件」面板行为一致。
+      -->
+      <button
+        class="jt__tool jt__tool--add"
+        type="button"
+        title="添加组件：未选中节点→根下；容器→末尾子节点；非容器→其后兄弟"
+        @click="onAddFromToolbar"
+      >+ 添加组件</button>
+    </div>
+    <p class="st__tip">右键节点可 复制 / 粘贴 / 副本 / 复制节点ID / 删除，右键卡片根还可 复制卡片code（英文名 / 文件夹名）；容器节点（含卡片根）还可 添加子节点、非根节点还可 前面/后面插入节点，也可在此 设置属性 / 事件；按住 Ctrl / ⌘ 点击画布元素，可在本树中定位并展开该节点</p>
+
+    <ul class="st__list" @contextmenu.prevent="closeContextMenu">
+      <!-- 根节点 -->
+      <li class="st__node st__node--root">
+        <div
+         class="st__row"
+         :class="[{ 'st__row--selected': selectedNodeId === '_root' }, dropClass('__root__')]"
+         title="单击选中节点；双击打开节点设置；可作为放置目标把节点放入顶层"
+         data-comp-id="__root__"
+         data-is-container="true"
+          @click="onRootClick($event)"
+          @dblclick="onRootDblclick"
+          @dragover="onRootDragOver"
+          @dragleave="onRootDragLeave"
+          @drop="onRootDrop"
+          @mouseenter="onRowHover(viewNode)"
+          @mouseleave="onRowLeave(viewNode)"
+          @contextmenu.prevent.stop="openContextMenu(viewNode, $event)"
+        >
+          <span class="st__caret" :class="{ 'st__caret--open': openState['_root'] !== false }" @click.stop="toggle('_root')">▸</span>
+          <span class="st__label">{{ rootLabel }}</span>
+          <span
+            class="st__badge"
+            :class="viewEventCount ? 'st__badge--clickable' : 'st__badge--muted'"
+            @click.stop="onEditEvent(viewNode)"
+          >事件</span>
+          <button class="st__gear" type="button" title="编辑节点属性" @click.stop="onInspect(viewNode)">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-gear" /></svg>
+          </button>
+        </div>
+        <ul v-show="rootOpen" class="st__children">
+          <tree-node
+            v-for="comp in viewComponents"
+            :key="comp.id"
+            :comp="comp"
+            :open-state="openState"
+            :comp-names="compNames"
+            :selected-node-id="selectedNodeId"
+            :dragging-id="draggingId"
+            :drop-target="dropTarget"
+            :query="query"
+            @toggle="toggle"
+            @select-node="onSelect"
+            @edit-event="onEditEvent"
+            @inspect="onInspect"
+            @drag-start="draggingId = $event"
+            @drag-end="clearDrag"
+          @drag-over="dropTarget = $event"
+          @move-node="$emit('move-node', $event)"
+          @context-menu="onNodeContextMenu"
+          @hover-node="onChildHover"
+        />
+        </ul>
+      </li>
+    </ul>
+
+    <!--
+      右键上下文菜单：复制 / 粘贴 / 副本 / 添加节点 / 删除。
+      「添加节点」仅对容器节点（含卡片根）显示：点击后即打开组件选择面板，
+      选定类型即在容器默认插槽末尾追加一个子节点（与顶部「+ 添加」同款插入逻辑）。
+      粘贴需先选中节点；副本/删除对根节点禁用。
+    -->
+    <div
+      v-if="contextMenu.visible"
+      ref="ctxMenu"
+      class="st__ctx"
+      :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
+      @click.stop
+      @contextmenu.prevent
+    >
+      <button class="st__ctx-item" type="button" :disabled="!selectedNodeId || selectedNodeId === '_root'" @click="onCtxCopy">复制</button>
+      <button class="st__ctx-item" type="button" :disabled="!canPaste || !selectedNodeId" @click="onCtxPaste">粘贴</button>
+      <button class="st__ctx-item" type="button" :disabled="!selectedNodeId || selectedNodeId === '_root'" @click="onCtxDuplicate">副本</button>
+      <div class="st__ctx-sep"></div>
+      <!--
+        添加节点拆分为三类（与用户诉求一致）：
+        - 添加子节点：仅容器节点（含卡片根）显示，在容器内默认插槽末尾追加子节点；
+        - 上面插入节点 / 下面插入节点：仅非根节点显示，在节点的相邻兄弟位置插入。
+        根节点只显示「添加子节点」。
+        锚点（右键节点）与模式（child/before/after）随 add-node 事件上抛，由 App 决定插入位置。
+      -->
+      <template v-if="ctxTargetIsContainer">
+        <button class="st__ctx-item" type="button" @click="onCtxAdd('child')">添加子节点</button>
+      </template>
+      <template v-if="!ctxTargetIsRoot">
+        <button class="st__ctx-item" type="button" @click="onCtxAdd('before')">前面插入节点</button>
+        <button class="st__ctx-item" type="button" @click="onCtxAdd('after')">后面插入节点</button>
+      </template>
+      <div class="st__ctx-sep" v-if="ctxTargetIsContainer || !ctxTargetIsRoot"></div>
+      <!-- 属性设置 / 事件设置：复用齿轮按钮 / 事件徽标的 inspect / edit-event 链路，
+           弹出 NodeInspector / EventEditor（含根节点卡片级设置） -->
+      <button class="st__ctx-item" type="button" @click="onCtxInspect">属性设置</button>
+      <button class="st__ctx-item" type="button" @click="onCtxEditEvent">事件设置</button>
+      <!-- 卡片根节点：复制卡片 code（= 当前卡片英文名 / src/cards 文件夹名），替代「复制节点ID」避免重复 -->
+      <button class="st__ctx-item" type="button" v-if="ctxTargetIsRoot" @click="onCtxCopyCardId">复制卡片code</button>
+      <!-- 普通组件节点：复制实例ID（componentId，即行内【xxx】） -->
+      <button class="st__ctx-item" type="button" v-if="!ctxTargetIsRoot" @click="onCtxCopyId">复制节点ID</button>
+      <div class="st__ctx-sep"></div>
+      <button class="st__ctx-item st__ctx-item--danger" type="button" :disabled="!selectedNodeId || selectedNodeId === '_root'" @click="onCtxDelete">删除</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { h } from 'vue'
+import { COMPONENT_META } from '@/runtime/toPreview.js'
+import { copyText } from '@/runtime/clipboard.js'
+import { showAppToast } from '@/runtime/app-toast.js'
+
+/** 齿轮（设置）图标 vnode，供节点行右侧「编辑属性」按钮复用 */
+function gearSvg() {
+  return h(
+    'svg',
+    {
+      width: '13',
+      height: '13',
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      stroke: 'currentColor',
+      'stroke-width': '2',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+    },
+    [
+      h('circle', { cx: '12', cy: '12', r: '3' }),
+      h('path', {
+        d: 'M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z',
+      }),
+    ],
+  )
+}
+
+/** 拖拽手柄（六点）图标 vnode，供节点行最左侧「拖拽」把手复用 */
+function gripSvg() {
+  const dot = (cx, cy) => h('circle', { cx, cy, r: '1.4' })
+  return h('svg', {
+    width: '12',
+    height: '12',
+    viewBox: '0 0 12 12',
+    fill: 'currentColor',
+  }, [
+    dot(3, 2.5), dot(9, 2.5),
+    dot(3, 6), dot(9, 6),
+    dot(3, 9.5), dot(9, 9.5),
+  ])
+}
+
+/** 递归渲染组件节点（render 函数写法，Vue 3：h 从 vue 导入） */
+const TreeNode = {
+  name: 'TreeNode',
+  props: {
+    comp: { type: Object, required: true },
+    openState: { type: Object, required: true },
+    compNames: { type: Object, required: true },
+    selectedNodeId: { type: String, default: '' },
+    draggingId: { type: String, default: '' },
+    dropTarget: { type: Object, default: () => ({ compId: null, type: null }) },
+    query: { type: String, default: '' },
+  },
+   methods: {
+   hasChildren(comp) {
+     return (comp.slots || []).some((s) => (s.components || []).length > 0)
+   },
+    /** 节点文本是否命中搜索词（组件名 / 类型 / 实例ID，忽略大小写） */
+    nodeMatches(comp, q) {
+      if (!q) return false
+      const label = (this.compNames[comp.className] || comp.className).toLowerCase()
+      const cid = String(comp.componentId != null ? comp.componentId : '').toLowerCase()
+      const cls = String(comp.className || '').toLowerCase()
+      return label.indexOf(q) !== -1 || cid.indexOf(q) !== -1 || cls.indexOf(q) !== -1
+    },
+    /** 节点自身或其任意后代是否命中搜索词（用于剪枝：不命中则整枝不渲染） */
+    subtreeMatches(comp, q) {
+      if (!q) return true
+      if (this.nodeMatches(comp, q)) return true
+      if (!comp.slots) return false
+      for (const s of comp.slots) {
+        if (!s.components) continue
+        for (const child of s.components) {
+          if (this.subtreeMatches(child, q)) return true
+        }
+      }
+      return false
+    },
+    /** 该组件类型是否为容器（可承载子节点）：meta 声明了 slots */
+    isContainer(className) {
+      const m = COMPONENT_META[className]
+      return !!(m && m.slots && m.slots.length)
+    },
+    /** 单击：选中节点（即时，无延迟）；与双击为独立原生事件，互不干扰 */
+    onRowClick(e, comp) {
+      e.stopPropagation()
+      this.$emit('select-node', comp.id)
+    },
+    /** 双击：打开节点属性面板（与齿轮按钮同一行为）；preventDefault 避免选中行内文字 */
+    onRowDblclick(e, comp) {
+      e.stopPropagation()
+      e.preventDefault()
+      this.$emit('inspect', comp)
+    },
+    /** 行 hover 进入：把对应节点（componentId / id）上抛，由父级驱动画布参考线框 */
+    onRowHover(comp) {
+      this.$emit('hover-node', { componentId: comp && comp.componentId, id: comp && comp.id })
+    },
+    /** 行 hover 离开：上抛 null，父级清除参考线 */
+    onRowLeave(comp) {
+      this.$emit('hover-node', { componentId: comp && comp.componentId, id: comp && comp.id, leave: true })
+    },
+    /** 拖拽开始：把稳定标识 componentId 写入 dataTransfer，并上报给父级用于放置判定 */
+    onDragStart(e, comp) {
+      e.stopPropagation()
+      if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = 'move'
+        e.dataTransfer.setData('text/plain', comp.componentId)
+      }
+      this.$emit('drag-start', comp.componentId)
+    },
+    /** 拖拽结束：上报父级清理（视觉态由 draggingId 响应式绑定，无需手改 class） */
+    onDragEnd() {
+      this.$emit('drag-end')
+    },
+    /** 拖拽悬停：按鼠标纵向位置判定 before/after/inside，并做防环/合法性校验 */
+    onDragOver(e, comp) {
+      if (!this.draggingId || this.draggingId === comp.componentId) { this.clearDrop(); return }
+      e.preventDefault()
+      const rect = e.currentTarget.getBoundingClientRect()
+      const y = e.clientY - rect.top
+      const h = rect.height
+      const container = this.isContainer(comp.className)
+      let type
+      if (container) {
+        if (y < h * 0.25) type = 'before'
+        else if (y > h * 0.75) type = 'after'
+        else type = 'inside'
+      } else {
+        type = y < h / 2 ? 'before' : 'after'
+      }
+      // 防环：目标是被拖节点的后代 → 禁止放置
+      if (this.isDescendantOf(this.draggingId, comp)) type = 'blocked'
+      e.dataTransfer.dropEffect = type === 'blocked' ? 'none' : 'move'
+      // 悬停折叠容器约 450ms 自动展开，便于放入子节点
+      if (type === 'inside' && this.openState[comp.id] === false && !this._expandTimer) {
+        this._expandTimer = setTimeout(() => { this.$emit('toggle', comp.id); this._expandTimer = null }, 450)
+      }
+      this.$emit('drag-over', { compId: comp.componentId, type })
+    },
+    /** 拖拽离行：真正离开（非进入子元素）时清除指示 */
+    onDragLeave(e) {
+      if (e.relatedTarget && e.currentTarget.contains(e.relatedTarget)) return
+      this.clearDrop()
+    },
+    /** 放置：读取源 componentId，计算最终位置并上报移动 */
+    onDrop(e, comp) {
+      e.preventDefault()
+      if (this._expandTimer) { clearTimeout(this._expandTimer); this._expandTimer = null }
+      const sourceCompId = e.dataTransfer && e.dataTransfer.getData('text/plain')
+      this.clearDrop()
+      if (!sourceCompId || sourceCompId === comp.componentId) return
+      const rect = e.currentTarget.getBoundingClientRect()
+      const y = e.clientY - rect.top
+      const h = rect.height
+      const container = this.isContainer(comp.className)
+      let position
+      if (container) {
+        if (y < h * 0.25) position = 'before'
+        else if (y > h * 0.75) position = 'after'
+        else position = 'inside'
+      } else {
+        position = y < h / 2 ? 'before' : 'after'
+      }
+      if (this.isDescendantOf(sourceCompId, comp)) return // 防环：直接忽略非法放置
+      this.$emit('move-node', { sourceCompId, targetCompId: comp.componentId, position })
+    },
+    /** compId 是否位于 node 子树内（用于防环判断） */
+    isDescendantOf(compId, node) {
+      if (!node) return false
+      const kids = []
+      if (node.components) kids.push(...node.components)
+      if (node.slots) for (const s of node.slots) if (s.components) kids.push(...s.components)
+      for (const k of kids) {
+        if (k.componentId === compId) return true
+        if (this.isDescendantOf(compId, k)) return true
+      }
+      return false
+    },
+    /** 当前行对应的放置指示 class（由父级 dropTarget 驱动） */
+    dropClass(compId) {
+      const dt = this.dropTarget
+      if (!dt || dt.compId !== compId) return ''
+      if (dt.type === 'blocked') return 'st__row--drop-blocked'
+      if (dt.type === 'before') return 'st__row--drop-before'
+      if (dt.type === 'after') return 'st__row--drop-after'
+      if (dt.type === 'inside') return 'st__row--drop-inside'
+      return ''
+    },
+    /** 清除放置指示（并取消自动展开计时器） */
+    clearDrop() {
+      if (this._expandTimer) { clearTimeout(this._expandTimer); this._expandTimer = null }
+      this.$emit('drag-over', { compId: null, type: null })
+    },
+  },
+  render() {
+    const comp = this.comp
+    // 搜索过滤：本枝（自身 + 后代）均不命中搜索词时，整枝不渲染（剪枝）
+    if (this.query && !this.subtreeMatches(comp, this.query)) return null
+    const hasKids = this.hasChildren(comp)
+    // 搜索激活时强制展开，保证命中节点可见
+    const forceOpen = !!this.query
+    const isOpen = forceOpen || this.openState[comp.id] !== false
+    const label = this.compNames[comp.className] || comp.className
+    const selfMatch = !!(this.query && this.nodeMatches(comp, this.query))
+    const children = []
+
+    // 行内容：折叠箭头 + 中文名 + 实例ID + 事件徽章
+    const rowChildren = []
+    if (hasKids) {
+      rowChildren.push(
+        h('span', {
+          class: ['st__caret', { 'st__caret--open': isOpen }],
+          onClick: (e) => { e.stopPropagation(); this.$emit('toggle', comp.id) },
+        }, '▸'),
+      )
+    } else {
+      rowChildren.push(h('span', { class: 'st__caret st__caret--leaf' }))
+    }
+    rowChildren.push(h('span', { class: ['st__label', { 'st__label--hl': selfMatch }] }, label))
+    rowChildren.push(h('span', { class: 'st__id' }, '【' + comp.componentId + '】'))
+    {
+      const on = !!(comp.eventactions && comp.eventactions.length)
+      rowChildren.push(
+        h('span', {
+          class: ['st__badge', on ? 'st__badge--clickable' : 'st__badge--muted'],
+          onClick: (e) => {
+            e.stopPropagation()
+            this.$emit('edit-event', comp)
+          },
+        }, '事件'),
+      )
+    }
+
+    // 行最右侧「齿轮」按钮：打开节点属性面板（替代原双击行为）
+    rowChildren.push(
+      h('button', {
+        class: 'st__gear',
+        type: 'button',
+        title: '编辑节点属性',
+        onClick: (e) => {
+          e.stopPropagation()
+          this.$emit('inspect', comp)
+        },
+      }, [gearSvg()]),
+    )
+
+    // 拖拽手柄（最左侧，六点）：拖拽起始点，hover 时显现
+    rowChildren.unshift(
+      h('span', { class: 'st__handle', title: '拖拽以调整位置或嵌套关系' }, [gripSvg()]),
+    )
+
+    children.push(
+      h('div', {
+       class: [
+         'st__row',
+         {
+           'st__row--selected': this.selectedNodeId === comp.id,
+           'st__row--dragging': this.draggingId === comp.componentId,
+         },
+         this.dropClass(comp.componentId),
+       ],
+       title: '单击选中节点；双击打开节点设置；拖拽调整位置/嵌套',
+        draggable: 'true',
+        'data-comp-id': comp.componentId,
+        'data-is-container': this.isContainer(comp.className) ? 'true' : 'false',
+        onClick: (e) => this.onRowClick(e, comp),
+        onDblclick: (e) => this.onRowDblclick(e, comp),
+        onDragstart: (e) => this.onDragStart(e, comp),
+        onDragend: (e) => this.onDragEnd(e),
+        onDragover: (e) => this.onDragOver(e, comp),
+        onDragleave: (e) => this.onDragLeave(e),
+        onDrop: (e) => this.onDrop(e, comp),
+        onMouseenter: () => this.onRowHover(comp),
+        onMouseleave: () => this.onRowLeave(comp),
+        // 右键：阻止浏览器原生菜单，上抛 (comp, 事件) 由父级驱动自定义上下文菜单
+        onContextmenu: (e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          this.$emit('context-menu', comp, e)
+        },
+      }, rowChildren),
+    )
+
+    // 子节点列表（Vue 3 无 vnode directives，v-show 语义用 display 样式实现）
+    if (hasKids) {
+      const childNodes = []
+      for (const slot of comp.slots || []) {
+        for (const child of slot.components || []) {
+          // 搜索激活时跳过不命中的子树（与上方整枝剪枝一致）
+          if (this.query && !this.subtreeMatches(child, this.query)) continue
+          childNodes.push(
+            h(TreeNode, {
+              key: child.id,
+              comp: child,
+              openState: this.openState,
+              compNames: this.compNames,
+              selectedNodeId: this.selectedNodeId,
+              draggingId: this.draggingId,
+              dropTarget: this.dropTarget,
+              query: this.query,
+              onToggle: (id) => this.$emit('toggle', id),
+              onSelectNode: (id) => this.$emit('select-node', id),
+              onEditEvent: (c) => this.$emit('edit-event', c),
+              onInspect: (c) => this.$emit('inspect', c),
+              onDragStart: (id) => this.$emit('drag-start', id),
+              onDragEnd: () => this.$emit('drag-end'),
+              onDragOver: (p) => this.$emit('drag-over', p),
+              onMoveNode: (p) => this.$emit('move-node', p),
+              onHoverNode: (p) => this.$emit('hover-node', p),
+              onContextMenu: (comp, e) => this.$emit('context-menu', comp, e),
+            }),
+          )
+        }
+      }
+      if (childNodes.length) {
+        children.push(
+          h(
+            'ul',
+            {
+            class: 'st__children',
+            style: isOpen ? '' : 'display: none;',
+          },
+          childNodes,
+        ),
+      )
+      }
+    }
+
+    return h('li', { class: 'st__node' }, children)
+  },
+}
+
+export default {
+  name: 'StructureTree',
+  components: { TreeNode },
+  props: {
+    preview: { type: Object, default: null },
+    schema: { type: Object, default: null },
+    /** 当前卡片 code：英文名 / src/cards 文件夹名（由 DebugPanel 透传 selectedId） */
+    cardCode: { type: String, default: '' },
+    selectedNodeId: { type: String, default: '' },
+    /**
+     * 拖拽移动成功令牌：App 在节点拖拽移动成功后自增。
+     * 结构树监听其变化，触发「选中被拖节点 + 仅展开其祖先链、其余全部折叠」。
+     */
+    moveCollapseToken: { type: Number, default: 0 },
+    // 剪贴板是否有可粘贴节点（来自 App 的 canPaste），驱动「粘贴」按钮 disabled 态
+    canPaste: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      openState: {},
+      draggingId: '', // 当前正在拖拽的节点 componentId（用于放置合法性判定）
+      dropTarget: { compId: null, type: null }, // 当前放置指示 {compId, type: before|after|inside|blocked}
+      query: '', // 结构树搜索词（按组件名/类型/实例ID 过滤）
+      // 定位开关：未激活时过滤所有节点 hover 事件，不触发画布参考线；激活后才触发
+      locateEnabled: false,
+      // 右键上下文菜单状态：visible 显隐、x/y 为光标视口坐标（position:fixed）、nodeId 记录触发节点、node 记录触发节点对象（供「添加节点」定位容器）
+      contextMenu: { visible: false, x: 0, y: 0, nodeId: '', node: null },
+    }
+  },
+  computed: {
+    // 搜索激活时强制展开根节点子列表，保证命中节点可见
+    rootOpen() {
+      return !!this.query || this.openState['_root'] !== false
+    },
+    view() {
+      return this.preview && this.preview.view
+    },
+    rootLabel() {
+      if (!this.view) return '卡片'
+      return this.preview.name || this.view.className || '卡片'
+    },
+    viewComponents() {
+      return (this.view && this.view.components) || []
+    },
+    viewNode() {
+      return this.view
+    },
+    viewEventCount() {
+      return this.view && this.view.eventactions && this.view.eventactions.length
+    },
+    /** 当前右键菜单触发节点是否为容器（决定「添加节点」项是否显示；根节点恒为容器） */
+    ctxTargetIsContainer() {
+      return this.isContainerNode(this.contextMenu.node)
+    },
+    /** 当前右键菜单触发节点是否为卡片根（决定「复制卡片id」项显示，并替代「复制节点ID」） */
+    ctxTargetIsRoot() {
+      return this.contextMenu.node === this.viewNode
+    },
+    compNames() {
+      const map = {}
+      for (const key in COMPONENT_META) {
+        map[key] = COMPONENT_META[key].name || key
+      }
+      map.Root = '根'
+      return map
+    },
+  },
+  watch: {
+    // 选中节点变化（结构树内点选 / 画布 Ctrl+点击定位）→ 展开其所有祖先节点并滚动到可见，
+    // 保证目标节点一定能被看到（对树内点选也安全：已可见则无副作用）。
+    // immediate: 从「非结构树 tab」经画布 Ctrl/⌘ 点击自动切回时，结构树为首次挂载即带选中态，
+    // 需挂载即展开祖先并滚动定位，否则节点树不会自动聚焦。
+    selectedNodeId: {
+      immediate: true,
+      handler(id) {
+        this.ensureVisible(id)
+      },
+    },
+    preview: {
+      handler(preview) {
+        // 保留已展开/折叠状态，仅在节点被增删（含切换卡片）时清理失效项，
+        // 避免每次属性/结构编辑重建预览后整棵树被折叠。
+        if (!preview || !preview.view) { this.openState = {}; return }
+        const ids = new Set()
+        const collect = (node) => {
+          if (!node) return
+          ids.add(node.id)
+          const kids = []
+          if (node.components) kids.push(...node.components)
+          if (node.slots) for (const s of node.slots) if (s.components) kids.push(...s.components)
+          for (const k of kids) collect(k)
+        }
+        collect(preview.view)
+        const next = {}
+        for (const k of Object.keys(this.openState)) {
+          if (k === '_root' || ids.has(k)) next[k] = this.openState[k]
+        }
+        this.openState = next
+      },
+      immediate: true,
+    },
+    /**
+     * 拖拽移动成功令牌变化 → 节点拖拽完成后：
+     * 选中被拖节点（selectedNodeId 已同步为被拖节点的新 id），
+     * 仅展开其祖先链（父节点 → 父节点的父节点 ……递归到顶层 '_root'），
+     * 其余节点全部折叠。区别于普通点选（ensureVisible 只展开祖先、不动其他节点的展开态）。
+     */
+    moveCollapseToken: {
+      handler() {
+        this.collapseOthersAndReveal(this.selectedNodeId)
+      },
+    },
+  },
+  methods: {
+   toggle(id) {
+     const cur = this.openState[id]
+     this.openState[id] = cur === false ? true : false
+   },
+    onRootClick(e) {
+      e.stopPropagation()
+      this.onSelect('_root')
+    },
+    /** 行 hover 进入：定位开关激活时才上抛（App 驱动画布参考线框），否则忽略 */
+    onRowHover(comp) {
+      if (!this.locateEnabled) return
+      this.$emit('hover-node', { componentId: comp && comp.componentId, id: comp && comp.id })
+    },
+    /** 行 hover 离开：定位开关激活时才上抛离开（App 清除参考线），否则忽略 */
+    onRowLeave(comp) {
+      if (!this.locateEnabled) return
+      this.$emit('hover-node', { componentId: comp && comp.componentId, id: comp && comp.id, leave: true })
+    },
+    /**
+     * 定位开关：点击切换激活态。
+     * 关闭时补发一次 null，确保画布参考线被清除（防止关闭时残留最后 hover 的节点框）。
+     */
+    toggleLocate() {
+      this.locateEnabled = !this.locateEnabled
+      if (!this.locateEnabled) this.$emit('hover-node', null)
+    },
+    /** 子节点（TreeNode）上抛的 hover 事件：定位开关激活才透传，否则忽略 */
+    onChildHover(payload) {
+      if (!this.locateEnabled) return
+      this.$emit('hover-node', payload)
+    },
+    /** 根行双击：打开根节点（卡片）属性面板（与根行齿轮按钮同一行为） */
+    onRootDblclick(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      this.onInspect(this.viewNode)
+    },
+    onSelect(id) {
+      // 点击已选中节点则取消选中，否则选中该节点
+      this.$emit('select-node', this.selectedNodeId === id ? '' : id)
+    },
+    /** 子节点（TreeNode 渲染组件）上抛的 context-menu 事件：转发到统一打开入口 */
+    onNodeContextMenu(comp, e) {
+      this.openContextMenu(comp, e)
+    },
+    /**
+     * 右键节点打开上下文菜单：先强制选中该节点（菜单动作均以「当前选中节点」为目标，
+     * 与用户「粘贴需要选中节点才生效」的诉求一致），再按光标视口坐标定位菜单。
+     * @param {Object} comp 预览树节点（根节点为 viewNode）
+     * @param {MouseEvent} e contextmenu 事件
+     */
+    openContextMenu(comp, e) {
+      const id = comp === this.viewNode ? '_root' : comp.id
+      this.$emit('select-node', id)
+      this.contextMenu = { visible: true, x: e.clientX, y: e.clientY, nodeId: id, node: comp }
+      this.$nextTick(() => this.clampContextMenu())
+    },
+    /** 菜单贴近视口边缘时回弹，避免溢出被裁切 */
+    clampContextMenu() {
+      const m = this.$refs.ctxMenu
+      if (!m) return
+      const r = m.getBoundingClientRect()
+      let x = this.contextMenu.x
+      let y = this.contextMenu.y
+      if (x + r.width > window.innerWidth) x = Math.max(4, window.innerWidth - r.width - 4)
+      if (y + r.height > window.innerHeight) y = Math.max(4, window.innerHeight - r.height - 4)
+      this.contextMenu.x = x
+      this.contextMenu.y = y
+    },
+    /** 关闭右键菜单（点击菜单外 / 滚动 / Esc 时调用） */
+    closeContextMenu() {
+      if (this.contextMenu.visible) this.contextMenu = { visible: false, x: 0, y: 0, nodeId: '', node: null }
+    },
+    /** 菜单项：复制选中节点（含子树）到剪贴板 */
+    onCtxCopy() {
+      this.$emit('copy-selected')
+      this.closeContextMenu()
+    },
+    /** 菜单项：粘贴剪贴板节点到选中节点的子节点末尾（容器→默认插槽末位；非容器→其后兄弟） */
+    onCtxPaste() {
+      this.$emit('paste')
+      this.closeContextMenu()
+    },
+    /** 菜单项：副本（就地复制为相邻兄弟节点） */
+    onCtxDuplicate() {
+      this.$emit('duplicate')
+      this.closeContextMenu()
+    },
+    /** 菜单项：删除选中节点 */
+    onCtxDelete() {
+      this.$emit('delete-selected')
+      this.closeContextMenu()
+    },
+    /**
+     * 菜单项：添加节点（拆分为三种模式）。
+     * @param {'child'|'before'|'after'} mode
+     *   - 'child'  添加子节点：在右键容器节点默认插槽末尾追加（根节点 = view.components 末尾）；
+     *   - 'before' 上面插入节点：在右键节点的相邻兄弟之前插入；
+     *   - 'after'  下面插入节点：在右键节点的相邻兄弟之后插入。
+     * 锚点（右键节点）与模式一并随 add-node 事件上抛，由 App.onPickComponent 决定落位。
+     */
+    onCtxAdd(mode) {
+      const node = this.contextMenu.node
+      this.closeContextMenu()
+      this.$emit('add-node', { node: node || null, mode })
+    },
+    /** 菜单项：打开节点属性设置面板（与齿轮按钮 / 双击节点同一行为；根节点=卡片级设置） */
+    onCtxInspect() {
+      this.$emit('inspect', this.contextMenu.node)
+      this.closeContextMenu()
+    },
+    /** 菜单项：打开节点事件设置面板（与「事件」徽标同一行为） */
+    onCtxEditEvent() {
+      this.$emit('edit-event', this.contextMenu.node)
+      this.closeContextMenu()
+    },
+    /**
+     * 菜单项：复制当前节点 ID 到剪贴板。
+     * 优先取 componentId（即结构树行内显示的【xxx】实例ID，是 DSL 中引用该节点的标识）；
+     * 根节点（卡片）无 componentId 时回退到节点 id（卡片 id）。
+     */
+    async onCtxCopyId() {
+      const node = this.contextMenu.node
+      const id = node && (node.componentId != null ? node.componentId : node.id)
+      if (id == null || id === '') {
+        showAppToast('该节点没有可复制的 ID', 'err')
+        this.closeContextMenu()
+        return
+      }
+      const ok = await copyText(String(id))
+      if (ok) showAppToast(`已复制节点ID：${id}`, 'ok')
+      else showAppToast('复制失败，请手动复制', 'err')
+      this.closeContextMenu()
+    },
+    /**
+     * 菜单项（仅卡片根节点）：复制卡片 code 到剪贴板。
+     * 卡片 code = 当前卡片英文名 / src/cards 文件夹名（由 DebugPanel 透传 selectedId）。
+     * 注意：schema.id 多为空、实时预览根节点 id 是 buildPreview 生成的 'view_xxx'，
+     * 两者都不是卡片的英文名，故复制 cardCode 而非 schema.id / 根节点 id。
+     */
+    async onCtxCopyCardId() {
+      const code = this.cardCode
+      if (code == null || code === '') {
+        showAppToast('该卡片没有可复制的 code', 'err')
+        this.closeContextMenu()
+        return
+      }
+      const ok = await copyText(String(code))
+      if (ok) showAppToast(`已复制卡片code：${code}`, 'ok')
+      else showAppToast('复制失败，请手动复制', 'err')
+      this.closeContextMenu()
+    },
+    /** 节点是否为容器（可承载子节点）：根节点恒为容器；其余类型看 meta 是否声明 slots */
+    isContainerNode(comp) {
+      if (!comp) return false
+      if (comp.className === 'Root') return true
+      const m = COMPONENT_META[comp.className]
+      return !!(m && m.slots && m.slots.length)
+    },
+    /** 文档级点击：点击菜单外区域关闭菜单（菜单内点击因 @click.stop 不会触发） */
+    onDocClick(e) {
+      if (this.contextMenu.visible && this.$refs.ctxMenu && !this.$refs.ctxMenu.contains(e.target)) {
+        this.closeContextMenu()
+      }
+    },
+    /** 文档级 Esc：关闭菜单 */
+    onDocKeydown(e) {
+      if (e.key === 'Escape') this.closeContextMenu()
+    },
+    expandAll() {
+      this.openState = {}
+    },
+    collapseAll() {
+      const state = { _root: false }
+      const mark = (comps) => {
+        for (const c of comps) {
+          const hasKids = (c.slots || []).some((s) => (s.components || []).length > 0)
+          if (hasKids) state[c.id] = false
+          for (const s of c.slots || []) mark(s.components || [])
+        }
+      }
+      mark(this.viewComponents)
+      this.openState = state
+    },
+    onEditEvent(comp) {
+      this.$emit('edit-event', comp)
+    },
+    /** 根行作为顶层容器的放置目标：始终为「放入顶层」(inside) */
+    onRootDragOver(e) {
+      if (!this.draggingId) { this.dropTarget = { compId: null, type: null }; return }
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'move'
+      if (this.dropTarget.compId !== '__root__' || this.dropTarget.type !== 'inside') {
+        this.dropTarget = { compId: '__root__', type: 'inside' }
+      }
+    },
+    onRootDragLeave(e) {
+      if (e.relatedTarget && e.currentTarget.contains(e.relatedTarget)) return
+      this.dropTarget = { compId: null, type: null }
+    },
+    onRootDrop(e) {
+      e.preventDefault()
+      const sourceCompId = e.dataTransfer && e.dataTransfer.getData('text/plain')
+      this.dropTarget = { compId: null, type: null }
+      if (!sourceCompId) return
+      this.$emit('move-node', { sourceCompId, targetCompId: '__root__', position: 'inside' })
+    },
+    /** 当前行对应的放置指示 class（由 dropTarget 驱动，根行用 '__root__'） */
+    dropClass(compId) {
+      const dt = this.dropTarget
+      if (!dt || dt.compId !== compId) return ''
+      if (dt.type === 'blocked') return 'st__row--drop-blocked'
+      if (dt.type === 'before') return 'st__row--drop-before'
+      if (dt.type === 'after') return 'st__row--drop-after'
+      if (dt.type === 'inside') return 'st__row--drop-inside'
+      return ''
+    },
+    /** 拖拽结束（dragend / 取消）：清理拖拽态与放置指示 */
+    clearDrag() {
+      this.draggingId = ''
+      this.dropTarget = { compId: null, type: null }
+    },
+    /**
+     * 顶部「+ 添加」按钮：以「当前选中节点」为插入锚点打开添加面板。
+     * 选中节点（selectedNodeId）为空或为根（'_root'）时视为根；否则按 id 反查 viewNode。
+     */
+    onAddFromToolbar() {
+      const sel = this.selectedNodeId
+      let target = null
+      if (sel && sel !== '_root') {
+        target = this.findViewNodeById(this.view, sel)
+      }
+      // target 为 null → 根；为 viewNode → 容器/非容器（由 App 判定）
+      // 顶部「+ 添加」沿用原 auto 行为：容器→末尾子节点；非容器→其后兄弟；根→根末尾。
+      this.$emit('add-node', { node: target, mode: 'auto' })
+    },
+    /** 在预览树中按 id 递归查找对应的 viewNode（含根节点的 components 与 slots） */
+    findViewNodeById(node, id) {
+      if (!node) return null
+      if (node.id === id) return node
+      const kids = []
+      if (node.components) kids.push(...node.components)
+      if (node.slots) for (const s of node.slots) if (s.components) kids.push(...s.components)
+      for (const k of kids) {
+        const r = this.findViewNodeById(k, id)
+        if (r) return r
+      }
+      return null
+    },
+    /** 打开节点属性面板（齿轮按钮触发）：emit inspect 给 DebugPanel 弹出 NodeInspector */
+    onInspect(comp) {
+      this.$emit('inspect', comp)
+    },
+    /**
+     * 确保目标节点可见：展开其全部祖先（含顶层容器 '_root'），并把选中行滚动进可视区。
+     * @param {string} id 目标节点 id（可能为空或 '_root'）
+     */
+    ensureVisible(id) {
+      if (!id) return
+      const ancestorIds = this.collectAncestorIds(id)
+      if (ancestorIds.length) {
+        const next = Object.assign({}, this.openState)
+        for (const aid of ancestorIds) next[aid] = true
+        this.openState = next
+      }
+      this.$nextTick(() => {
+        const row = this.$el && this.$el.querySelector ? this.$el.querySelector('.st__row--selected') : null
+        if (row && row.scrollIntoView) row.scrollIntoView({ block: 'nearest' })
+      })
+    },
+    /**
+     * 收集目标节点在结构树中的所有祖先 id（自上而下，含顶层容器 '_root'）。
+     * 结构树里顶层组件的直接父是渲染用的 '_root' 容器 li，而非 view.id，故顶层父键记为 '_root'。
+     * @param {string} targetId
+     * @returns {string[]} 命中返回祖先 id 数组；未命中返回 []
+     */
+    collectAncestorIds(targetId) {
+      const result = []
+      let found = false
+      const walk = (comps, parentKey) => {
+        for (const c of comps) {
+          if (c.id === targetId) {
+            found = true
+            // 顶层节点（直接挂在卡片根下）的父键为 '_root'；命中即记录其直接父节点，
+            // 否则顶层节点会漏掉 '_root'，导致后续「仅展开祖先链」拿到空数组、根节点不展开。
+            if (parentKey !== undefined) result.unshift(parentKey)
+            return true
+          }
+          const kids = []
+          if (c.components) kids.push(...c.components)
+          if (c.slots) for (const s of c.slots) if (s.components) kids.push(...s.components)
+          if (walk(kids, c.id)) { result.unshift(parentKey); return true }
+        }
+        return false
+      }
+      walk(this.viewComponents, '_root')
+      return found ? result : []
+    },
+    /**
+     * 拖拽移动完成后的聚焦行为：先折叠全部节点，再仅展开选中节点（被拖节点）的祖先链，
+     * 最后把选中行滚动进可视区。
+     * - 折叠：对每个含子节点的容器设 openState[id]=false（含顶层 '_root'）。
+     * - 展开祖先链：被拖节点的父节点 → 父节点的父节点 → ……递归到 '_root'（collectAncestorIds 已含 '_root'）。
+     * - 被拖节点自身即使为容器也不展开（它不在自己的祖先链上），但其父链已展开，故必然可见。
+     * @param {string} id 选中（被拖）节点 id（可能为空或 '_root'）
+     */
+    collapseOthersAndReveal(id) {
+      // 1) 折叠全部
+      this.collapseAll()
+      // 2) 仅展开选中节点的祖先链
+      if (id && id !== '_root') {
+        const ancestorIds = this.collectAncestorIds(id)
+        if (ancestorIds.length) {
+          const next = Object.assign({}, this.openState)
+          for (const aid of ancestorIds) next[aid] = true
+          this.openState = next
+        }
+      } else if (id === '_root') {
+        this.openState = Object.assign({}, this.openState, { _root: true })
+      }
+      // 3) 滚动选中行进可视区
+      this.$nextTick(() => {
+        const row = this.$el && this.$el.querySelector ? this.$el.querySelector('.st__row--selected') : null
+        if (row && row.scrollIntoView) row.scrollIntoView({ block: 'nearest' })
+      })
+    },
+  },
+  mounted() {
+    // 文档级监听：点击菜单外 / Esc 关闭右键菜单。
+    // 注意：不监听 scroll 关闭菜单——选中节点会触发 ensureVisible 的 scrollIntoView，
+    // 若在此关菜单会与自身滚动冲突（菜单刚打开就被自己的滚动事件关掉）。
+    this._onDocClick = (e) => this.onDocClick(e)
+    this._onDocKeydown = (e) => this.onDocKeydown(e)
+    document.addEventListener('click', this._onDocClick, true)
+    document.addEventListener('keydown', this._onDocKeydown, true)
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this._onDocClick, true)
+    document.removeEventListener('keydown', this._onDocKeydown, true)
+  },
+}
+</script>