cardbuddy 0.6.0

package/dist/vendored/components/DebugPanel.vue

@@ -0,0 +1,806 @@
+<!--
+  调试面板：四个标签页。
+  - 接口调用：ynet.callJSAPI / postMessage 的调用流水
+  - 数据绑定：当前 rootScope 的实时 JSON（初始数据 / 落盘 / 保存高亮比对源）。
+    本地调试的所有交互只写「运行态」，不会改这里，故调试中此 tab 保持不变、保存不亮。
+  - 组件结构：当前卡片的组件层级树（参考编辑器「结构」面板）
+  - 卡片来源：导入来源元数据
+
+  运行态（rt.state）已从标签页移出：底部状态栏新增「运行态」指示器，点击在面板内
+  弹出可拖拽高度的只读面板，默认收起。rt.state 是运行期交互态（Input 输入 /
+  RadioButton·CheckGroup 选择 / globalSet 等只写这里），不污染 rootScope、不触发保存
+  高亮，事件代码里 `this.data.xxx` 也读这里，调试变更永不落盘。
+
+  注：「绑定错误」已移至底部状态栏（类 VSCode 面板），点击状态栏问题指示器在
+  底部弹出错误面板查看，不再作为此处的标签页。
+-->
+<template>
+  <aside class="debug">
+    <div class="debug__tabs">
+      <button
+        v-for="t in tabs"
+        :key="t.key"
+        :class="['debug__tab', { 'debug__tab--active': activeTab === t.key }]"
+        @click="$emit('update:activeTab', t.key)"
+      >
+        {{ t.label }}
+        <span v-if="t.key === 'api' && apiCalls.length" class="debug__count">{{ apiCalls.length }}</span>
+      </button>
+    </div>
+
+    <div class="debug__body">
+      <template v-if="activeTab === 'api'">
+        <button
+          class="debug__clear"
+          type="button"
+          :disabled="!apiCalls.length"
+          title="清空日志"
+          @click="clearApiLog"
+        >
+          <!-- 垃圾桶图标：清空日志 -->
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
+               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-trash" /></svg>
+        </button>
+        <div class="debug__placeholder"></div>
+        <p v-if="!apiCalls.length" class="debug__empty">暂无接口调用</p>
+        <ul class="debug__list debug__list--api">
+          <li v-for="(c, i) in apiCalls" :key="i" class="debug__item debug__item--api">
+            <div class="debug__api-row">
+              <span class="debug__kind">{{ c.api }}</span>
+              <button
+                class="debug__copy-ic"
+                type="button"
+                :title="copiedIndex === i ? '已复制 ✓' : '复制数据（不含方法名）'"
+                @click="copyApiPayload(c, i)"
+              >
+                <svg v-if="copiedIndex !== i" width="15" height="15" viewBox="0 0 24 24" fill="none"
+                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-copy-sm" /></svg>
+                <span v-else class="debug__copy-ok">✓</span>
+              </button>
+            </div>
+            <!-- 返回数据：结构化折叠树（Chrome 控制台风格） -->
+            <ApiPayloadTree :value="c.payload" />
+          </li>
+        </ul>
+      </template>
+
+      <template v-else-if="activeTab === 'scope'">
+        <div class="debug__scope-wrap" :class="{ 'debug__scope-wrap--raw': rawMode }">
+          <!-- Raw 模式：直接编辑原始 JSON（CodeJar + Prism 语法高亮） -->
+          <template v-if="rawMode">
+            <div class="debug__scope-raw">
+              <div
+                ref="rawEditor"
+                class="debug__raw-editor"
+                spellcheck="false"
+              ></div>
+              <p v-if="rawError" class="debug__raw-err">{{ rawError }}</p>
+            </div>
+            <div class="debug__scope-foot">
+              <button class="debug__copy" type="button" @click="saveRaw">应用</button>
+              <button class="debug__copy" type="button" @click="exitRaw">取消</button>
+            </div>
+          </template>
+          <!-- 默认模式：JSON 树 -->
+          <template v-else>
+            <div class="debug__scope-tree">
+              <JsonTree :data="rt.rootScope" :rt="rt" :editable="true" :schema="schema" />
+            </div>
+            <div class="debug__scope-foot">
+              <span v-if="copied" class="debug__copied">已复制 ✓</span>
+              <button class="debug__copy" type="button" @click="enterRaw">Raw</button>
+              <button class="debug__copy" type="button" @click="copyScope">复制</button>
+              <span class="debug__sep"></span>
+              <button class="debug__copy debug__copy--primary" type="button" @click="onCommit">应用</button>
+              <button class="debug__copy" type="button" @click="$emit('reset-import')" title="丢弃内存编辑，从磁盘重新载入（导入优先于编辑）">重置</button>
+            </div>
+          </template>
+        </div>
+      </template>
+
+      <template v-else-if="activeTab === 'structure'">
+        <StructureTree :preview="preview" :schema="schema" :card-code="cardId" :selected-node-id="selectedNodeId" :move-collapse-token="moveCollapseToken" :can-paste="canPaste" @edit-event="onEditEvent" @inspect="onInspect" @select-node="onSelectNode" @add-node="onAddNode" @move-node="onMoveNode" @hover-node="onHoverNode" @copy-selected="$emit('copy-selected')" @paste="$emit('paste')" @duplicate="$emit('duplicate')" @delete-selected="$emit('delete-selected')" />
+      </template>
+
+      <template v-else-if="activeTab === 'meta'">
+        <div class="debug__meta">
+          <p v-if="!importMeta" class="debug__empty">该卡尚未经「同步远程」导入，无导入来源元数据。<br />本地新建卡 / 未同步卡均如此。</p>
+          <dl v-else class="debug__meta-list">
+            <div class="debug__meta-row">
+              <dt>导入接口</dt>
+              <dd><code>{{ importMeta.interface }}</code> <span class="debug__meta-muted">({{ importMeta.source }})</span></dd>
+            </div>
+            <div class="debug__meta-row">
+              <dt>远端基址</dt>
+              <dd><code>{{ importMeta.baseUrl }}</code></dd>
+            </div>
+            <div class="debug__meta-row">
+              <dt>cardId</dt>
+              <dd><code>{{ importMeta.cardId }}</code></dd>
+            </div>
+            <div class="debug__meta-row">
+              <dt>cardCode</dt>
+              <dd><code>{{ importMeta.cardCode }}</code></dd>
+            </div>
+            <div class="debug__meta-row" v-if="importMeta.cardName">
+              <dt>卡片标题</dt>
+              <dd>{{ importMeta.cardName }}</dd>
+            </div>
+            <div class="debug__meta-row">
+              <dt>应用 / 空间</dt>
+              <dd><code>{{ importMeta.appId }}</code> / <code>{{ importMeta.workspaceId }}</code></dd>
+            </div>
+            <div class="debug__meta-row">
+              <dt>同步时间</dt>
+              <dd>{{ formatTime(importMeta.syncedAt) }}</dd>
+            </div>
+            <div class="debug__meta-row">
+              <dt>落库位置</dt>
+              <dd><code>src/cards/{{ importMeta.cardCode }}/</code></dd>
+            </div>
+            <div class="debug__meta-row">
+              <dt>本地状态</dt>
+              <dd>
+                <span v-if="importMeta.dirty" class="debug__tag debug__tag--warn" title="本地已编辑，偏离导入镜像">已编辑（偏离导入镜像）</span>
+                <span v-else class="debug__tag debug__tag--ok">与导入镜像一致</span>
+              </dd>
+            </div>
+            <div class="debug__meta-row" v-if="importMeta.lastExport">
+              <dt>最近导出</dt>
+              <dd>
+                <span v-if="importMeta.lastExport.ok" class="debug__tag debug__tag--ok">读回校验通过 ✓</span>
+                <span v-else class="debug__tag debug__tag--err">读回校验未通过 ✗</span>
+                <span class="debug__meta-muted">（{{ formatTime(importMeta.lastExport.at) }}）</span>
+                <span v-if="importMeta.lastExport.readBackError" class="debug__meta-err"> · {{ importMeta.lastExport.readBackError }}</span>
+              </dd>
+            </div>
+          </dl>
+          <p class="debug__meta-hint">导入优先于编辑：点「数据绑定」tab 的「重置为导入镜像」可丢弃内存编辑、从磁盘重新载入最新导入。</p>
+        </div>
+      </template>
+    </div>
+
+    <!--
+      节点属性面板：组件结构 tab 双击节点弹出（可编辑写回）。
+      事件编辑已并入本面板的「事件」页签（meta 驱动），不再有独立弹层。
+    -->
+    <NodeInspector
+      v-if="inspectingComp"
+      :key="inspectKey"
+      :comp="inspectingComp"
+      :comp-names="compNames"
+      :rt="rt"
+      @apply="onApply"
+      @commit="onCommit"
+      @close="inspectingComp = null"
+    />
+
+   <!--
+     事件编辑弹框：点击结构树「事件」徽标时单独弹出，与属性面板解耦。
+     只编辑 eventactions，不涉及属性/样式。
+   -->
+   <Transition name="ee-drawer">
+      <EventEditor
+        v-if="editingEventComp"
+        :key="'evt-' + eventEditorKey"
+        :comp="editingEventComp"
+        :comp-names="compNames"
+        :rt="rt"
+        @apply="onApply"
+        @commit="onCommit"
+        @close="editingEventComp = null"
+      />
+    </Transition>
+
+    <!--
+      运行态面板：默认收起；点击底部状态栏「运行态」指示器弹出。面板高度由头部
+      拖拽调整（startResize，无专门拖拽节点，与预览区宽度调节同一套 mousedown 机制），
+      并持久化到 localStorage。展示 rt.state 实时 JSON（运行期交互态，只读），不污染绑定数据、
+      不触发保存高亮、调试变更永不落盘。
+    -->
+    <section
+      class="statepanel"
+      ref="statePanel"
+      v-show="statePanelOpen"
+    >
+      <div class="statepanel__head" @mousedown.prevent="startResize">
+        <span class="statepanel__title">运行态 <code>rt.state</code></span>
+        <button class="statepanel__close" type="button" title="收起" @click="statePanelOpen = false">✕</button>
+      </div>
+      <div class="statepanel__tree">
+        <JsonTree :data="rt.state" :rt="rt" :editable="false" />
+      </div>
+    </section>
+
+    <!--
+      底部状态栏（仅右侧调试面板内、贴近 VSCode 布局）：左侧「问题」指示器展示
+      绑定错误数，点击在面板底部弹出/收起错误面板；右侧展示当前卡片与卡片总数。
+    -->
+    <section class="statusbar">
+      <button
+        class="statusbar__item statusbar__item--prob"
+        :class="{ 'is-open': statePanelOpen }"
+        type="button"
+        @click="toggleStatePanel"
+        :title="statePanelOpen ? '收起运行态面板' : '展开运行态面板（可拖拽调整高度）'"
+      >
+        <span class="statusbar__icon" :class="{ 'is-dirty': stateDirty }">◉</span>
+        <span>运行态</span>
+      </button>
+      <button
+        class="statusbar__item statusbar__item--prob"
+        :class="{ 'is-error': bindingErrors.length, 'is-ok': !bindingErrors.length }"
+        type="button"
+        @click="bindingErrors.length && toggleErrorPanel('binding')"
+        :title="bindingErrors.length ? '查看绑定错误' : '无绑定错误'"
+      >
+        <span class="statusbar__icon">{{ bindingErrors.length ? '⚠' : '✓' }}</span>
+        <span>{{ bindingErrors.length ? bindingErrors.length + ' 个绑定错误' : '无绑定错误' }}</span>
+      </button>
+      <button
+        class="statusbar__item statusbar__item--prob"
+        :class="eventStatusClass"
+        type="button"
+        :disabled="!eventCount"
+        @click="eventCount && toggleErrorPanel('event')"
+        :title="eventStatusTitle"
+      >
+        <span class="statusbar__icon">{{ eventCount ? (eventErrors.length ? '⚠' : '☰') : '✓' }}</span>
+        <span>{{ eventCount ? eventCount + ' 条事件' : '无事件' }}</span>
+      </button>
+      <!-- 本地开发服务连接状态：连接图标 + 状态文案，颜色与右上角「连接」按钮实时同步（复用 devSvcClass / devSvcTitle / devSvcLabel） -->
+      <span
+        class="statusbar__item statusbar__conn"
+        :class="devSvcClass"
+        :title="devSvcTitle"
+      >
+        <svg class="statusbar__conn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-link" /></svg>
+        <span>{{ devSvcLabel }}</span>
+      </span>
+      <span class="statusbar__spacer"></span>
+      <span class="statusbar__item statusbar__item--right">{{ cardId }}</span>
+      <span class="statusbar__item statusbar__item--right">{{ cardCount }} 张卡片</span>
+    </section>
+
+    <section class="errpanel" ref="errPanel" v-show="errorPanel">
+      <div class="errpanel__head" @mousedown.prevent="startResize">
+        <span class="errpanel__title">{{ errorPanel === 'event' ? '事件面板' : '绑定错误' }}</span>
+        <span class="errpanel__actions">
+          <button
+            v-if="errorPanel === 'event'"
+            class="errpanel__iconbtn errpanel__clear"
+            type="button"
+            :disabled="!logs.length"
+            title="清空日志（不影响错误）"
+            @click="clearEventLogs"
+          >
+            <!-- 垃圾桶图标：清空日志 -->
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
+                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-trash" /></svg>
+          </button>
+          <button class="errpanel__iconbtn errpanel__close" type="button" title="关闭" @click="errorPanel = ''">✕</button>
+        </span>
+      </div>
+      <div class="errpanel__body">
+        <!-- 事件面板：日志 + 错误 两区块，用于捕获主动日志与执行错误 -->
+        <template v-if="errorPanel === 'event'">
+          <div class="ep__sec-title">日志 ({{ logs.length }})</div>
+          <p v-if="!logs.length" class="debug__empty">无日志 ✓</p>
+          <ul v-else class="debug__list debug__list--log">
+            <li v-for="(l, i) in logs" :key="'l' + i" class="log__item" :class="'log--' + l.level">
+              <span class="log__tag" :class="'log__tag--' + l.level">{{ l.level }}</span>
+              <div class="log__content">
+                <template v-if="l.args && l.args.length">
+                  <LogValue v-for="(a, ai) in l.args" :key="ai" :value="a" />
+                </template>
+                <span v-else class="log__empty">—</span>
+              </div>
+            </li>
+          </ul>
+          <div class="ep__sec-title">错误 ({{ eventErrors.length }})</div>
+          <p v-if="!eventErrors.length" class="debug__empty">无错误 ✓</p>
+          <ul v-else class="debug__list">
+            <li v-for="(e, i) in eventErrors" :key="'e' + i" class="debug__item debug__item--err">
+              <span class="debug__kind">[{{ e.kind }}]</span> {{ e.msg }}
+            </li>
+          </ul>
+        </template>
+        <!-- 绑定错误面板：仅错误列表 -->
+        <template v-else>
+          <p v-if="!panelErrors.length" class="debug__empty">无错误 ✓</p>
+          <ul v-else class="debug__list">
+            <li v-for="(e, i) in panelErrors" :key="i" class="debug__item debug__item--err">
+              <span class="debug__kind">[{{ e.kind }}]</span> {{ e.msg }}
+            </li>
+          </ul>
+        </template>
+      </div>
+    </section>
+  </aside>
+</template>
+
+<script>
+import JsonTree from './JsonTree.vue'
+import ApiPayloadTree from './ApiPayloadTree.vue'
+import StructureTree from './StructureTree.vue'
+import NodeInspector from './NodeInspector.vue'
+import EventEditor from './EventEditor.vue'
+import LogValue from './LogValue.vue'
+import { COMPONENT_META } from '@/runtime/toPreview.js'
+import { copyText } from '@/runtime/clipboard.js'
+// 结构树「粘贴」按钮的 disabled 态：剪贴板是否有可粘贴节点
+import { nodeClipboard } from '@/runtime/clipboard-node.js'
+// Raw 编辑器的代码高亮：复用项目既有的 CodeJar + Prism 方案（与 SetCode/SetExpr 一致），
+// 仅切换语法为 json（Prism 自带 json grammar，无需额外安装）。
+import { CodeJar } from 'codejar'
+import Prism from 'prismjs'
+import 'prismjs/components/prism-json'
+import { apiFetch } from '@/api.js'
+
+// copyText 已抽到 @/runtime/clipboard.js，供 DebugPanel 与 NodeInspector 共用
+
+// 判断运行态是否与绑定数据基线发生偏离（用于状态栏「运行态」小点变黄）
+function deepEqual(a, b) {
+  if (a === b) return true
+  if (typeof a !== 'object' || a === null || typeof b !== 'object' || b === null) return false
+  const ka = Object.keys(a)
+  const kb = Object.keys(b)
+  if (ka.length !== kb.length) return false
+  for (const k of ka) {
+    if (!Object.prototype.hasOwnProperty.call(b, k)) return false
+    if (!deepEqual(a[k], b[k])) return false
+  }
+  return true
+}
+
+export default {
+  name: 'DebugPanel',
+  components: { JsonTree, ApiPayloadTree, StructureTree, NodeInspector, EventEditor, LogValue },
+  props: {
+    rt: { type: Object, required: true },
+    preview: { type: Object, default: null },
+    schema: { type: Object, default: null },
+    cardId: { type: String, default: '' },
+    // 预览重载令牌：loadCard（含刷新/同步后自动重载/撤销重做）每次自增，
+    // 用于让「卡片来源」tab 在卡片被重新载入磁盘内容时也重拉导入来源元数据，
+    // 修复「同步后点刷新，来源信息不更新」的问题。
+    reloadToken: { type: Number, default: 0 },
+    cardCount: { type: Number, default: 0 },
+    selectedNodeId: { type: String, default: '' },
+    // 拖拽移动成功令牌：App 在节点拖拽移动成功后自增，透传给结构树，
+    // 触发「选中被拖节点 + 仅展开其祖先链、其余全部折叠」。
+    moveCollapseToken: { type: Number, default: 0 },
+    // 当前激活的调试面板 tab（接口调用/绑定数据/组件结构/卡片来源），由 App 统一管理，
+    // 便于画布 Ctrl/⌘ 点击定位在「组件结构」tab 激活时才生效。
+    activeTab: { type: String, default: 'api' },
+    // 本地开发服务连接状态：复用 App 中顶栏「连接」按钮同款状态/配色（devSvcClass/devSvcTitle/devSvcLabel），
+    // 供底部状态栏展示「连接图标 + 状态文案」，与右上角按钮实时同步（颜色一致、状态一致）。
+    devSvcClass: { type: String, default: 'app__btn--warn' },
+    devSvcTitle: { type: String, default: '' },
+    devSvcLabel: { type: String, default: '' },
+  },
+  data() {
+    return {
+      copied: false,
+      copyTimer: null,
+      // 接口调用 tab：刚复制过数据的条目下标（用于图标变 ✓ 反馈），null=无
+      copiedIndex: null,
+      apiCopyTimer: null,
+      // 底部错误面板模式：''（收起） | 'binding'（绑定错误） | 'event'（事件执行错误）
+      errorPanel: '',
+      // 运行态面板：默认收起；点击状态栏「运行态」指示器切换
+      statePanelOpen: false,
+      // 运行态 / 绑定错误 / 事件 三个底部面板互斥，共用同一高度变量（px）；
+      // 可被顶部抓手拖拽调整，并持久化到 localStorage（cardbuddy:debug-panel-height）
+      panelH: this.loadPanelH(),
+      // 双击结构树节点后弹出的属性面板目标节点
+      inspectingComp: null,
+      // 换节点时强制重建面板（内部含 CodeJar 这类托管 DOM 的控件）
+      inspectKey: 0,
+      // 事件编辑弹框目标节点（点击「事件」徽标时单独弹出，与属性面板解耦）
+      editingEventComp: null,
+      eventEditorKey: 0,
+      // Raw 编辑模式状态
+      rawMode: false,
+      rawText: '',
+      rawError: '',
+      // 导入来源元数据（Phase E）：GET /__import-meta/:id，无侧车时为 null
+      importMeta: null,
+      tabs: [
+        { key: 'scope', label: '绑定数据' },
+        { key: 'structure', label: '组件结构' },
+        { key: 'api', label: '接口调用' },
+        { key: 'meta', label: '卡片来源' },
+      ],
+    }
+  },
+  computed: {
+    // 依赖 apiRev，使接口调用流水在 pushApiCall / clearApiCalls 后实时刷新
+    // （apiCalls 本身是非响应式数组，模板直接读它不会触发重渲染）
+    //
+    // ⚠️ 必须 slice() 返回**新数组**，不能直接 return 原数组引用：
+    // Vue 3.4+ 引入了「computed 值稳定性」——重算后若新值与旧值 Object.is 相等，
+    // 就不再通知下游 effect。原数组是同一个引用，即使 apiRev 自增触发了重算，
+    // 渲染 effect 也收不到通知，界面纹丝不动；直到别的原因（如点 tab 改了 this.tab）
+    // 引起重渲染，才把积压的日志一次性刷出来——这正是「切 tab 才看得到」的成因。
+    apiCalls() {
+      void this.rt.apiRev
+      return this.rt.apiCalls.slice()
+    },
+    // 依赖 revision，使 setData 后数据绑定实时刷新
+    scopeText() {
+      void this.rt.revision
+      try {
+        return JSON.stringify(this.rt.rootScope, null, 2)
+      } catch (e) {
+        return '(无法序列化)'
+      }
+    },
+    // 绑定类错误（bind / vshow / render / refresh），依赖 errorRev 保证实时刷新
+    // 同 apiCalls：必须 slice() 出新引用，否则 Vue 3.4+ 的 computed 值稳定性
+    // 会判定「值没变」而不通知渲染 effect，状态栏计数将停留在旧值。
+    bindingErrors() {
+      void this.rt.errorRev
+      return this.rt.errors.slice()
+    },
+    // 事件执行错误（customAction / listener），由运行时单独存放，跨渲染保留
+    eventErrors() {
+      void this.rt.errorRev
+      return this.rt.eventErrors.slice()
+    },
+    // 事件主动日志（console.*），依赖 logRev 保证实时刷新
+    logs() {
+      void this.rt.logRev
+      return this.rt.eventLogs.slice()
+    },
+    /** 事件面板合并计数器：事件执行错误 + 主动日志（状态栏单一「事件」指示器使用） */
+    eventCount() {
+      return this.eventErrors.length + this.logs.length
+    },
+    /** 合并指示器配色：有错误→红；仅日志→蓝；皆无→灰 */
+    eventStatusClass() {
+      if (this.eventErrors.length) return 'is-error'
+      if (this.logs.length) return 'is-log'
+      return 'is-ok'
+    },
+    eventStatusTitle() {
+      if (this.eventErrors.length) return '查看事件面板（含错误）'
+      if (this.logs.length) return '查看事件面板（含日志）'
+      return '无事件记录'
+    },
+    panelErrors() {
+      return this.errorPanel === 'event' ? this.eventErrors : this.bindingErrors
+    },
+    compNames() {
+      const map = {}
+      for (const key in COMPONENT_META) {
+        map[key] = COMPONENT_META[key].name || key
+      }
+      map.Root = '根'
+      return map
+    },
+    /** 剪贴板是否有可粘贴节点（实时反映 nodeClipboard.node 是否为空） */
+    canPaste() {
+      return !!nodeClipboard.node
+    },
+    /**
+     * 运行态是否与「绑定数据」基线（rt.rootScope）发生偏离。
+     * 一旦用户在调试中改动运行态（输入 / 选择 / globalSet 等），state 即与 rootScope
+     * 不一致 → 状态栏「运行态」小点变黄，提示当前有未落库的临时调试值。
+     * 读取 state/rootScope 的响应式键建立细粒度依赖；revision 覆盖换卡 / reseed。
+     */
+    stateDirty() {
+      void this.rt.revision
+      return !deepEqual(this.rt.state, this.rt.rootScope)
+    },
+  },
+  watch: {
+    // 切换卡片时退出 Raw 模式，避免编辑内容与新卡片数据不一致；
+    // 同时关闭属性面板，避免展示旧卡片节点；并拉取导入来源元数据。
+    cardId: {
+      immediate: true,
+      handler() {
+        this.rawMode = false
+        this.rawError = ''
+        this.destroyJar()
+        this.inspectingComp = null
+        this.editingEventComp = null
+        this.importMeta = null
+        // 懒加载：仅当用户停留在「来源」tab 时才拉取（见 maybeFetchMeta），
+        // 避免每次切换/加载卡片都向无侧车的本地卡打 404（问题 #7）。
+        this.maybeFetchMeta()
+      },
+    },
+    // 预览被重新载入（刷新按钮 / 同步后自动重载 / 撤销重做）时：cardId 未变，
+    // 但磁盘上的 .import-meta.json 可能已被「同步远程」更新，须同步重拉来源元数据。
+    reloadToken() {
+      this.maybeFetchMeta()
+    },
+    // 切到「来源」tab 时按需拉取导入来源元数据（懒加载，消除自动 404）。
+    activeTab(n) {
+      if (n === 'meta') this.fetchImportMeta()
+    },
+    // schema 引用变化（撤销/重做、刷新重载会整体替换对象；就地编辑只 mutate 不换引用）
+    // 时关闭已打开的节点属性/事件面板，避免面板持有已被替换的旧预览节点引用。
+    schema() {
+      this.inspectingComp = null
+      this.editingEventComp = null
+    },
+  },
+  mounted() {
+    // 初始化两个底部面板高度为持久化值（默认 240px）。拖拽由面板头部（已有节点，
+    // 非专门拖拽节点）经 startResize 处理，与预览区宽度调节同一套 mousedown 机制。
+    const h = this.panelH
+    if (this.$refs.statePanel) this.$refs.statePanel.style.height = h + 'px'
+    if (this.$refs.errPanel) this.$refs.errPanel.style.height = h + 'px'
+  },
+  beforeUnmount() {
+    // DebugPanel 一般常驻，但保险起见卸载时销毁 CodeJar、清理可能残留的拖拽监听
+    this.destroyJar()
+    this.cancelResize()
+  },
+  methods: {
+    // 三个底部面板互斥：运行态 / 绑定错误 / 事件 不会同时出现。
+    // 点开运行态即关闭错误/事件面板。
+    toggleStatePanel() {
+      this.statePanelOpen = !this.statePanelOpen
+      if (this.statePanelOpen) this.errorPanel = ''
+    },
+    toggleErrorPanel(kind) {
+      // 再次点击同一指示器则收起；点击另一指示器则切换列表
+      this.errorPanel = this.errorPanel === kind ? '' : kind
+      // 与运行态面板互斥：点开错误/事件面板即关闭运行态
+      if (this.errorPanel) this.statePanelOpen = false
+    },
+    /**
+     * 拖拽调整底部面板（运行态 / 绑定错误 / 事件）高度：挂在面板头部（已有 .statepanel__head /
+     * .errpanel__head，无专门拖拽节点），与预览区宽度调节同一套 mousedown 机制。
+     * 在头部按下后监听 document 的 mousemove / mouseup；向上拖（clientY 减小）增大面板高度，
+     * 向下拖减小，符合底部停靠面板的直觉。高度夹在 [120px, 视窗 60%]，并实时同步到两个面板
+     * （三者互斥共用 panelH），鼠标松开才持久化到 localStorage（避免拖拽过程频繁写盘）。
+     * 头部上的关闭/清空等按钮不触发拖拽，避免与点击冲突。
+     */
+    startResize(e) {
+      if (e.target.closest('button')) return
+      const startY = e.clientY
+      const startH = this.panelH
+      const minH = 120
+      const maxH = Math.max(minH, Math.round(window.innerHeight * 0.6))
+      const apply = (h) => {
+        this.panelH = h
+        if (this.$refs.statePanel) this.$refs.statePanel.style.height = h + 'px'
+        if (this.$refs.errPanel) this.$refs.errPanel.style.height = h + 'px'
+      }
+      const onMove = (ev) => {
+        const delta = startY - ev.clientY // 向上拖 = 正值 = 面板变高
+        apply(Math.min(maxH, Math.max(minH, startH + delta)))
+      }
+      const onUp = () => {
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+        document.removeEventListener('mousemove', onMove)
+        document.removeEventListener('mouseup', onUp)
+        this._resizeMove = this._resizeUp = null
+        this.savePanelH()
+      }
+      this._resizeMove = onMove
+      this._resizeUp = onUp
+      document.body.style.cursor = 'row-resize'
+      document.body.style.userSelect = 'none'
+      document.addEventListener('mousemove', onMove)
+      document.addEventListener('mouseup', onUp)
+    },
+    /** 清理可能残留的拖拽监听（组件卸载或异常中断时调用） */
+    cancelResize() {
+      if (this._resizeMove) document.removeEventListener('mousemove', this._resizeMove)
+      if (this._resizeUp) document.removeEventListener('mouseup', this._resizeUp)
+      this._resizeMove = this._resizeUp = null
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    },
+    /** 读取持久化的底部面板高度（localStorage）。无记录 / 损坏 / 越界时回退 240px。 */
+    loadPanelH() {
+      try {
+        const v = localStorage.getItem('cardbuddy:debug-panel-height')
+        if (v != null) {
+          const h = parseInt(v, 10)
+          if (!Number.isNaN(h)) {
+            const minH = 120
+            const maxH = Math.max(minH, Math.round(window.innerHeight * 0.6))
+            return Math.min(maxH, Math.max(minH, h))
+          }
+        }
+      } catch (e) {
+        /* localStorage 不可用时忽略 */
+      }
+      return 240
+    },
+    /** 持久化底部面板高度到 localStorage（px）。 */
+    savePanelH() {
+      try {
+        localStorage.setItem('cardbuddy:debug-panel-height', String(Math.round(this.panelH)))
+      } catch (e) {
+        /* localStorage 不可用时忽略 */
+      }
+    },
+    /** 进入 Raw 模式：把当前 rootScope 序列化为可编辑文本，并用 CodeJar 托管高亮 */
+    enterRaw() {
+      this.rawError = ''
+      try {
+        this.rawText = JSON.stringify(this.rt.rootScope, (k, v) => (k === '_schemaNode' ? undefined : v), 2)
+      } catch (e) {
+        this.rawText = ''
+        this.rawError = '无法序列化当前数据：' + (e && e.message)
+      }
+      this.rawMode = true
+      this.$nextTick(() => this.initJar())
+    },
+    /** 用 CodeJar 初始化原始 JSON 编辑器：contenteditable + Prism(json) 高亮 */
+    initJar() {
+      const el = this.$refs.rawEditor
+      if (!el) return
+      // 复用 CodeJar 时先销毁旧实例，避免重复绑定到同一 DOM
+      this.destroyJar()
+      const highlight = (editor) => {
+        editor.innerHTML = Prism.highlight(editor.textContent, Prism.languages.json, 'json')
+      }
+      this._jar = CodeJar(el, highlight, {
+        tab: '  ',
+        indentOn: /[({[]$/,
+        addClosing: true,
+        history: true,
+      })
+      this._jar.updateCode(this.rawText || '')
+      this._jar.onUpdate((code) => {
+        this.rawText = code
+        if (this.rawError) this.rawError = '' // 用户再次输入即清除旧错误
+      })
+      this.$nextTick(() => el.focus())
+    },
+    /** 销毁 CodeJar 实例（退出/保存/卸载/切卡时调用） */
+    destroyJar() {
+      if (this._jar && this._jar.destroy) {
+        this._jar.destroy()
+      }
+      this._jar = null
+    },
+    /** 取消 Raw 编辑：放弃改动，切回默认树形模式 */
+    exitRaw() {
+      this.rawMode = false
+      this.rawError = ''
+      this.destroyJar()
+    },
+    /** 保存 Raw 编辑：先校验 JSON 合法性与类型，通过后替换 rootScope */
+    saveRaw() {
+      const text = (this.rawText || '').trim()
+      if (!text) {
+        this.rawError = '内容不能为空'
+        return
+      }
+      let parsed
+      try {
+        parsed = JSON.parse(text)
+      } catch (e) {
+        this.rawError = 'JSON 格式错误：' + e.message
+        return
+      }
+      if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
+        this.rawError = '数据绑定必须是对象（{ ... }）'
+        return
+      }
+      this.rt.setRootScope(parsed)
+      // 等待 watcher 把 rootScope 同步进 currentSchema.dictionary 后再落定历史，
+      // 使本次 Raw 编辑作为一笔撤销记录（与「应用」按钮同路径）。
+      this.$nextTick(() => this.onCommit())
+      this.destroyJar()
+      this.rawMode = false
+      this.rawError = ''
+    },
+    async copyScope() {
+      let text = ''
+      try {
+        text = JSON.stringify(this.rt.rootScope, null, 2)
+      } catch (e) {
+        text = String(this.rt.rootScope)
+      }
+      const ok = await copyText(text)
+      if (ok) {
+        this.copied = true
+        if (this.copyTimer) clearTimeout(this.copyTimer)
+        this.copyTimer = setTimeout(() => {
+          this.copied = false
+        }, 1500)
+      }
+    },
+    /** 结构树「事件」徽标：打开属性面板并直接落到事件页签 */
+    onEditEvent(comp) {
+      this.editingEventComp = comp
+      this.eventEditorKey++
+    },
+    /** 节点属性 / 事件面板「应用」（实时编辑）：仅内存重建预览，不落盘、不记历史 */
+    onApply() {
+      this.$emit('schema-changed')
+    },
+    /** 节点属性 / 事件面板「应用」按钮：重建预览 + 提交一次历史（写入 undo/redo 栈） */
+    onCommit() {
+      this.$emit('schema-commit')
+    },
+    /** 双击结构树节点：弹出属性面板 */
+    onInspect(comp) {
+      this.inspectingComp = comp
+      this.inspectKey++
+    },
+    onSelectNode(id) {
+      this.$emit('select-node', id)
+    },
+    /** 结构树某行「＋」：透传到 App 打开组件选择面板 */
+    onAddNode(comp) {
+      this.$emit('add-node', comp)
+    },
+    onMoveNode(payload) {
+      this.$emit('move-node', payload)
+    },
+    /** 结构树节点 hover：透传到 App，驱动画布参考线框 */
+    onHoverNode(payload) {
+      this.$emit('hover-node', payload)
+    },
+    /** 清空接口调用流水：调用运行时 clearApiCalls（清空数组 + 自增 apiRev），
+     *  因 apiCalls computed 返回 slice() 新引用，触发实时重渲染 */
+    clearApiLog() {
+      this.rt.clearApiCalls()
+    },
+    /** 清空事件主动日志（事件面板「清空日志」按钮）；错误不清除 */
+    clearEventLogs() {
+      this.rt.clearEventLogs()
+    },
+    /** 拉取当前卡片的导入来源元数据（Phase E 来源 tab） */
+    maybeFetchMeta() {
+      if (this.activeTab === 'meta') this.fetchImportMeta()
+    },
+    async fetchImportMeta() {
+      const id = this.cardId
+      if (!id) {
+        this.importMeta = null
+        return
+      }
+      try {
+        const res = await apiFetch(`/__import-meta/${encodeURIComponent(id)}`)
+        if (res.ok) {
+          const r = await res.json()
+          this.importMeta = r.meta || null
+        } else {
+          this.importMeta = null
+        }
+      } catch {
+        this.importMeta = null
+      }
+    },
+    /** ISO 时间转人读字符串（本地时区） */
+    formatTime(iso) {
+      if (!iso) return '-'
+      try {
+        return new Date(iso).toLocaleString('zh-CN', { hour12: false })
+      } catch {
+        return iso
+      }
+    },
+    /** 复制某条接口调用的「返回数据」（即 payload 全文），不含方法名(api) */
+    async copyApiPayload(c, i) {
+      let text = ''
+      try {
+        text = JSON.stringify(c.payload, null, 2)
+      } catch {
+        text = String(c.payload)
+      }
+      const ok = await copyText(text)
+      if (ok) {
+        this.copiedIndex = i
+        if (this.apiCopyTimer) clearTimeout(this.apiCopyTimer)
+        this.apiCopyTimer = setTimeout(() => {
+          if (this.copiedIndex === i) this.copiedIndex = null
+        }, 1500)
+      }
+    },
+  },
+}
+</script>