cardbuddy 0.11.0 → 0.12.1

package/dist/vendored/components/DebugPanel.vue

@@ -1,1734 +0,0 @@
-<!--
-  调试面板：三个标签页。
-  - 变量：schema.dictionary.inputParams 的增 / 删 / 改（变量名 · 中文名 · 类型 · 默认值 · 描述），
-    即卡片对外声明的入参；默认值同时是设计期 mock 基线，落到 rt.rootScope 供画布预览。
-    底部「配置变量 mock」进入二级视图，以 Raw JSON 直接编辑整份设计期数据。
-  - 组件结构：当前卡片的组件层级树（参考编辑器「结构」面板）
-  - 卡片来源：导入来源元数据
-
-  注：「接口调用」tab 已拆出为右侧常驻独立面板（ApiCallPanel.vue），
-  由 App 顶栏按钮控制展开/收起。
-
-  运行态（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 }}
-      </button>
-    </div>
-
-    <div class="debug__body">
-      <template v-if="activeTab === 'vars'">
-        <!-- 变量列表视图：管理 schema.dictionary.inputParams（变量属性的增 / 删 / 改） -->
-        <div v-if="varsMode === 'list'" class="vars">
-          <!-- 空态占位：与卡片来源 / API 调用面板同款语言 -->
-          <div v-if="!inputParams.length" class="empty-state">
-            <span class="empty-state__badge" aria-hidden="true">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-settings" /></svg>
-            </span>
-            <p class="debug__empty">暂无变量</p>
-            <p class="empty-state__hint">变量与 schema.dictionary.inputParams 一一对应：绑定表达式以 $key 引用，mock 值供设计期预览</p>
-          </div>
-          <ul v-else class="vars__list">
-            <li v-for="(p, i) in inputParams" :key="p.key || i" class="vars__row" @dblclick="openVarDlg(i)">
-              <span class="vars__key">{{ p.key }}</span>
-              <span class="vars__type" :class="'vars__type--' + (p.type || 'string')">{{ p.type || 'string' }}</span>
-              <span v-if="hasMock(p)" class="vars__mock" title="已配置 mock（dictionary.mocks，设计期覆盖默认值）">m</span>
-              <span class="vars__name" :title="[p.name, p.desc].filter(Boolean).join(' · ')">{{ p.name || p.desc || '' }}</span>
-              <!-- 操作区双击不冒泡到行：连点复制/删除/编辑钮时不误开编辑弹窗 -->
-              <span class="vars__ops" @dblclick.stop>
-                <!-- 复制变量名：复制当前变量 key（绑定以 $key 引用），无变量名时禁用 -->
-                <button
-                  class="vars__op"
-                  type="button"
-                  :disabled="!p.key"
-                  :title="copiedVar === i ? '已复制 ✓' : p.key ? '复制变量名' : '暂无变量名'"
-                  @click="copyVarName(p, i)"
-                >
-                  <span v-if="copiedVar === i" class="debug__copy-ok">✓</span>
-                  <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-copy-sm" /></svg>
-                </button>
-                <button class="vars__op" type="button" title="编辑变量" @click="openVarDlg(i)">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-gear" /></svg>
-                </button>
-                <button class="vars__op vars__op--del" type="button" title="删除变量" @click="askDeleteVar(i)">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-trash" /></svg>
-                </button>
-              </span>
-            </li>
-          </ul>
-          <!-- 右下角悬浮操作组：与 mock 视图悬浮条同语言，不占固定行高 -->
-          <div class="vars__fabs">
-            <button class="debug__copy" type="button" title="新增变量（写入 dictionary.inputParams）" @click="openVarDlg(null)">+ 添加变量</button>
-            <button v-if="inputParams.length" class="debug__copy" type="button" title="以 Raw JSON 编辑全部变量的设计期 mock 数据" @click="varsMode = 'mock'">配置变量 mock</button>
-          </div>
-        </div>
-        <!-- mock 二级视图：仅 Raw JSON（CodeJar + Prism 高亮）；右下角操作按钮只在此出现 -->
-        <div v-else class="debug__scope-wrap debug__scope-wrap--raw">
-          <div class="vars__mockhead">
-            <button class="vars__back" type="button" title="返回变量列表" @click="leaveMock">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6" /></svg>
-              变量
-            </button>
-            <span class="vars__mocktitle">变量 mock · 设计期覆盖（dictionary.mocks · Raw JSON）</span>
-            <span class="vars__mockhint">仅设计期生效 · 未列出的键回退默认值</span>
-          </div>
-          <div class="debug__scope-raw">
-            <!-- 报错提示条：与顶部提示条同语言（语义色软底 + 图标 + 关闭），钉在编辑器顶部不挤占编辑区 -->
-            <div v-if="rawError" class="raw-err-bar" role="alert">
-              <svg class="raw-err-bar__icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-alert-triangle" /></svg>
-              <span class="raw-err-bar__msg">{{ rawError }}</span>
-              <button class="raw-err-bar__close" type="button" title="关闭" @click="rawError = ''">✕</button>
-            </div>
-            <div
-              ref="rawEditor"
-              class="debug__raw-editor"
-              spellcheck="false"
-            ></div>
-          </div>
-          <div class="debug__scope-foot">
-            <!-- 右下角悬浮组内的返回：与头部 chip 同一 leaveMock 语义，手不离编辑区即可退出二级视图 -->
-            <button class="debug__copy" type="button" title="返回变量列表" @click="leaveMock">
-              <svg class="debug__copy-icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6" /></svg>返回
-            </button>
-            <span class="debug__sep"></span>
-            <span v-if="copied" class="debug__copied">已复制 ✓</span>
-            <button class="debug__copy" type="button" @click="copyScope">
-              <svg class="debug__copy-icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-copy-sm" /></svg>复制
-            </button>
-            <span class="debug__sep"></span>
-            <button class="debug__copy debug__copy--primary" type="button" @click="saveRaw">
-              <svg class="debug__copy-icn" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-check" /></svg>应用
-            </button>
-            <button class="debug__copy debug__copy--warn" type="button" @click="$emit('reset-import')" title="丢弃内存编辑，从磁盘重新载入（导入优先于编辑）">
-              <svg class="debug__copy-icn" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-reset" /></svg>重置
-            </button>
-          </div>
-        </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">
-          <!-- 空状态占位：与 API 调用面板同款（虚线徽章 + 线性图标 + 文案 + 弱提示） -->
-          <div v-if="!importMeta" class="empty-state">
-            <span class="empty-state__badge" aria-hidden="true">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-cloud" /></svg>
-            </span>
-            <p class="debug__empty">暂无卡片来源</p>
-            <p class="empty-state__hint">该卡尚未经「同步远程」导入，无导入来源元数据；本地新建卡 / 未同步卡均如此</p>
-          </div>
-          <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 →「配置变量 mock」里点「重置」，可丢弃内存编辑、从磁盘重新载入最新导入。</p>
-        </div>
-      </template>
-    </div>
-
-    <!--
-      节点属性面板：组件结构 tab 双击节点弹出（可编辑写回）。
-      事件编辑已并入本面板的「事件」页签（meta 驱动），不再有独立弹层。
-    -->
-    <Transition name="modal">
-      <NodeInspector
-        v-if="inspectingComp"
-        :key="inspectKey"
-        :comp="inspectingComp"
-        :comp-names="compNames"
-        :rt="rt"
-        @apply="onApply"
-        @commit="onCommit"
-        @close="inspectingComp = null"
-      />
-    </Transition>
-
-   <!--
-     事件编辑弹框：点击结构树「事件」徽标时单独弹出，与属性面板解耦。
-     只编辑 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（运行期交互态，只读），不污染绑定数据、
-      不触发保存高亮、调试变更永不落盘。
-    -->
-    <!--
-      底部弹出面板（运行态 / 事件 / 变量绑定）：Teleport 到 App 的 #app-workside-panels，
-      宽度贯穿中右两栏、紧贴右缘（与共同底栏同一容器机制，贴近 VSCode 底部面板）。
-      defer：目标与 Teleport 同属本应用组件树，挂载时目标尚未插入 document，须等整个
-      应用挂载完成后再解析（Vue 3.5+）。chrome-off 截图模式下禁用 Teleport，回落本面板内。
-    -->
-    <Teleport defer to="#app-workside-panels" :disabled="chromeOff">
-    <section
-      class="statepanel"
-      ref="statePanel"
-      v-show="statePanelOpen"
-    >
-      <!-- 顶缘拖拽条：与竖向分隔条同规格（命中 6px / 高亮 3px），仅分割边缘触发 -->
-      <div class="panelhead__edge" :class="{ 'is-dragging': panelDragging }" title="拖拽调整面板高度" @mousedown.prevent="startResize"></div>
-      <div class="statepanel__head">
-        <span class="statepanel__title">运行态 <code>rt.state</code></span>
-        <button class="statepanel__close" type="button" title="收起" @click="statePanelOpen = false">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="5" x2="19" y2="19" /><line x1="19" y1="5" x2="5" y2="19" /></svg>
-          </button>
-      </div>
-      <div class="statepanel__tree">
-        <JsonTree :data="rt.state" :rt="rt" :editable="false" />
-      </div>
-    </section>
-    </Teleport>
-
-    <!--
-      底部状态栏：Teleport 到 App 的 #app-workside-bar，作为「调试面板 + 接口调用面板」
-      中右两栏共同的底栏（贴近 VSCode 布局）。defer：目标与 Teleport 同属本应用组件树，
-      挂载时目标尚未插入 document，须等整个应用挂载完成后再解析（Vue 3.5+）。
-      chrome-off 截图模式下禁用 Teleport，回落到本面板内渲染（随面板一起隐藏）。
-      左侧三枚指示器（运行态 / 变量绑定 / 事件）点击弹出或收起对应底部面板；右侧展示当前卡片与卡片总数。
-    -->
-    <Teleport defer to="#app-workside-bar" :disabled="chromeOff">
-      <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="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"
-        @click="toggleErrorPanel('event')"
-        :title="eventStatusTitle"
-      >
-        <span class="statusbar__icon">{{ eventCount ? (eventErrors.length ? '⚠' : '☰') : '✓' }}</span>
-        <span>{{ eventCount ? eventCount + ' 条事件记录' : '无事件记录' }}</span>
-      </button>
-      <!-- 本地开发服务连接状态：连接图标 + 状态文案，颜色与右上角「连接」按钮实时同步（复用 devSvcClass / devSvcTitle / devSvcLabel）。
-           可点击：弹出 / 收起底部「服务日志」面板（实时镜像所连 cardbuddy 终端输出）。
-           仅重连 / 断开 / 未配置等_warn、danger 态着语义色，连接成功用状态栏默认色；不设选中态，仅 hover 提示可点。 -->
-      <button
-        class="statusbar__item statusbar__conn"
-        :class="devSvcClass"
-        type="button"
-        :title="devSvcTitle + '（点击查看服务日志）'"
-        @click="toggleErrorPanel('svclog')"
-      >
-        <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>
-      </button>
-        <span class="statusbar__spacer"></span>
-        <span class="statusbar__item statusbar__item--right">{{ cardId }}</span>
-        <span class="statusbar__item statusbar__item--right">{{ cardCount }} 张卡片</span>
-      </section>
-    </Teleport>
-
-    <Teleport defer to="#app-workside-panels" :disabled="chromeOff">
-    <section class="errpanel" ref="errPanel" v-show="errorPanel">
-      <!-- 顶缘拖拽条：与竖向分隔条同规格（命中 6px / 高亮 3px），仅分割边缘触发 -->
-      <div class="panelhead__edge" :class="{ 'is-dragging': panelDragging }" title="拖拽调整面板高度" @mousedown.prevent="startResize"></div>
-      <div class="errpanel__head">
-        <span class="errpanel__title">{{ errorPanel === 'svclog' ? '服务日志' : errorPanel === 'event' ? '事件记录' : '绑定错误记录' }}</span>
-        <!-- 服务日志：标题后给一枚读数（行数 + 实时态），与事件面板 tab 同一位置语言 -->
-        <span v-if="errorPanel === 'svclog'" class="svclog__meta">
-          {{ svcLogs.length }} 行<span v-if="svcLogDropped"> · 已滚动淘汰 {{ svcLogDropped }}</span>
-          <i class="svclog__dot" :class="svcLogLive ? 'is-live' : 'is-off'"></i>{{ svcLogLive ? '实时' : '未连接' }}
-        </span>
-        <!-- 事件面板：日志 / 错误 tab 并入头部单行（一次只看一类）；变量绑定面板无 tab -->
-        <div v-if="errorPanel === 'event'" class="errpanel__tabs">
-          <button
-            type="button"
-            class="errpanel__tab"
-            :class="{ 'errpanel__tab--active': eventTab === 'log' }"
-            @click="eventTab = 'log'"
-          >
-            日志<span class="errpanel__tab-count">{{ logs.length }}</span>
-          </button>
-          <button
-            type="button"
-            class="errpanel__tab"
-            :class="{ 'errpanel__tab--active': eventTab === 'err' }"
-            @click="eventTab = 'err'"
-          >
-            错误<span class="errpanel__tab-count" :class="{ 'is-hit': eventErrors.length }">{{ eventErrors.length }}</span>
-          </button>
-        </div>
-        <span class="errpanel__actions">
-          <button
-            v-if="errorPanel === 'event' && eventTab === 'log'"
-            class="errpanel__iconbtn errpanel__clear"
-            type="button"
-            :disabled="!logs.length"
-            title="清空日志（不影响错误）"
-            @click="clearEventLogs"
-          >
-            <!-- 垃圾桶图标：清空日志 -->
-            <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-trash" /></svg>
-          </button>
-          <button
-            v-if="errorPanel === 'svclog'"
-            class="errpanel__iconbtn"
-            :class="{ 'is-done': svcCopied }"
-            type="button"
-            :disabled="!svcLogs.length"
-            :title="svcCopied ? '已复制' : '复制全部日志（纯文本，去 ANSI）'"
-            @click="copySvcLogs"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
-          </button>
-          <button
-            v-if="errorPanel === 'svclog'"
-            class="errpanel__iconbtn svclog__follow"
-            :class="{ 'is-on': svcLogFollow }"
-            type="button"
-            :title="svcLogFollow ? '跟随最新输出（点击暂停）' : '已暂停跟随（点击回到最新）'"
-            @click="toggleSvcFollow"
-          >
-            <!-- 下箭头图标：跟随最新输出 -->
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19" /><polyline points="19 12 12 19 5 12" /></svg>
-          </button>
-          <button
-            v-if="errorPanel === 'svclog'"
-            class="errpanel__iconbtn errpanel__clear"
-            type="button"
-            :disabled="!svcLogs.length"
-            title="清空面板（不影响服务端缓冲）"
-            @click="clearSvcLogs"
-          >
-            <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-trash" /></svg>
-          </button>
-          <button class="errpanel__iconbtn errpanel__close" type="button" title="关闭" @click="errorPanel = ''">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="5" x2="19" y2="19" /><line x1="19" y1="5" x2="5" y2="19" /></svg>
-          </button>
-        </span>
-      </div>
-      <div
-        class="errpanel__body"
-        :class="{ 'errpanel__body--term': errorPanel === 'svclog' && svcLogs.length }"
-        ref="errBody"
-        @scroll.passive="onErrBodyScroll"
-      >
-        <!-- 服务日志面板：本地服务（cardbuddy）终端输出的实时镜像。
-             服务端按行镜像 stdout/stderr 并保留原始 ANSI，这里经 preview/ansi.js 还原配色，
-             因此面板固定深色终端底（chalk 调色板取自深色令牌，浅底不可读）。 -->
-        <template v-if="errorPanel === 'svclog'">
-          <div v-if="!svcLogs.length" class="empty-state">
-            <span class="empty-state__badge" aria-hidden="true">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="4 17 10 11 4 5" />
-                <line x1="12" y1="19" x2="20" y2="19" />
-              </svg>
-            </span>
-            <p class="debug__empty">{{ svcEmptyText }}</p>
-            <p class="empty-state__hint">{{ svcEmptyHint }}</p>
-          </div>
-          <div v-else class="svclog">
-            <div
-              v-for="row in svcLogs"
-              :key="row.seq || row.t"
-              class="svclog__line"
-              :class="'svclog__line--' + row.level"
-            ><span class="svclog__text" v-html="row.html"></span></div>
-          </div>
-        </template>
-        <!-- 事件面板：按当前 tab 只渲染日志或错误一类 -->
-        <template v-else-if="errorPanel === 'event'">
-          <template v-if="eventTab === 'log'">
-            <!-- 空状态占位：与 API 调用面板同款（虚线徽章 + 线性图标 + 文案 + 弱提示） -->
-            <div v-if="!logs.length" class="empty-state">
-              <span class="empty-state__badge" aria-hidden="true">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <line x1="21" y1="6" x2="3" y2="6" />
-                  <line x1="21" y1="12" x2="3" y2="12" />
-                  <line x1="21" y1="18" x2="3" y2="18" />
-                </svg>
-              </span>
-              <p class="debug__empty">暂无日志</p>
-              <p class="empty-state__hint">卡片事件内 console.* 主动打印的日志会实时显示在这里</p>
-            </div>
-            <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__time">{{ fmtTime(l.t) }}</span>
-                <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>
-          </template>
-          <template v-else>
-            <div v-if="!eventErrors.length" class="empty-state">
-              <span class="empty-state__badge" aria-hidden="true">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
-                  <polyline points="22 4 12 14.01 9 11.01" />
-                </svg>
-              </span>
-              <p class="debug__empty">无事件错误</p>
-              <p class="empty-state__hint">事件动作（customAction / 监听器）执行报错时会记录在这里</p>
-            </div>
-            <ul v-else class="debug__list">
-              <li v-for="(e, i) in eventErrors" :key="'e' + i" class="debug__item debug__item--err">
-                <span class="err__time">{{ fmtTime(e.t) }}</span>
-                <span class="debug__kind">{{ e.kind }}</span>
-                <span class="err__msg">{{ e.msg }}</span>
-              </li>
-            </ul>
-          </template>
-        </template>
-        <!-- 变量绑定面板：仅错误列表 -->
-        <template v-else>
-          <div v-if="!panelErrors.length" class="empty-state">
-            <span class="empty-state__badge" aria-hidden="true">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
-                <polyline points="22 4 12 14.01 9 11.01" />
-              </svg>
-            </span>
-            <p class="debug__empty">无绑定错误</p>
-            <p class="empty-state__hint">绑定 / 表达式（bind、vshow、render、refresh）求值失败时会记录在这里</p>
-          </div>
-          <ul v-else class="debug__list">
-            <li v-for="(e, i) in panelErrors" :key="i" class="debug__item debug__item--err">
-              <span class="err__time">{{ fmtTime(e.t) }}</span>
-              <span class="debug__kind">{{ e.kind }}</span>
-              <span class="err__msg">{{ e.msg }}</span>
-            </li>
-          </ul>
-        </template>
-      </div>
-    </section>
-    </Teleport>
-
-    <!-- 变量添加 / 编辑弹窗：与节点属性面板同构（ni-overlay / ni-panel / ni-head / ni-foot），
-         宽度 · 字号 · 控件高度 · 发丝线分隔全部沿用 node-inspector 的视觉语言；
-         默认值按类型分控件：数组 / 对象走 CodeJar 代码编辑区（高亮 + 缩进 + 大段粘贴，确定时自动格式化）、
-         字符串走多行文本域、数字走带 −/+ 的 NumberStepper、布尔走 SetSegment 分段单选。 -->
-    <transition name="modal">
-      <div v-if="varDlg" class="ni-overlay" @click.self="varDlg = null">
-        <div class="ni-panel modal-card vars-dlg" role="alertdialog" aria-modal="true" :aria-label="varDlg.index == null ? '添加变量' : '编辑变量'">
-          <div class="ni-head">
-            <span class="ni-title">{{ varDlg.index == null ? '添加变量' : '编辑变量' }}<em class="ni-cls">{{ varDlg.form.key || '未命名' }}</em></span>
-            <button class="ni-close" type="button" title="关闭" @click="varDlg = null"></button>
-          </div>
-          <div class="ni-body">
-            <div class="ni-scroll">
-              <div class="ni-field-row">
-                <label class="ni-field-label"><i>*</i>变量名</label>
-                <input class="ni-input" type="text" v-model="varDlg.form.key" placeholder="英文标识，绑定以 $key 引用" />
-              </div>
-              <div class="ni-field-row">
-                <label class="ni-field-label"><i>*</i>中文名</label>
-                <input class="ni-input" type="text" v-model="varDlg.form.name" placeholder="中文名" />
-              </div>
-              <div class="ni-field-row">
-                <label class="ni-field-label"><i>*</i>类型</label>
-                <!-- 类型下拉：触发器与选项都走「中文名 + 彩色类型标签」，标签直接复用变量列表的
-                     .vars__type / .vars__type--<type>（同一套 --type-* 语义色），两处视觉完全一致 -->
-                <Dropdown class="vars-dlg__ctrl" block size="sm" :value="varDlg.form.type" :options="varTypeOptions" @change="onVarTypeChange">
-                  <template #current="{ opt, text }">
-                    <span v-if="opt" class="vars-type-pick">
-                      <span class="vars-type-pick__name">{{ opt.value }}</span>
-                      <span class="vars__type" :class="'vars__type--' + opt.key">{{ opt.key }}</span>
-                    </span>
-                    <template v-else>{{ text }}</template>
-                  </template>
-                  <template #option="{ opt }">
-                    <span class="vars-type-pick">
-                      <span class="vars-type-pick__name">{{ opt.value }}</span>
-                      <span class="vars__type" :class="'vars__type--' + opt.key">{{ opt.key }}</span>
-                    </span>
-                  </template>
-                </Dropdown>
-              </div>
-              <!-- 默认值按类型分四种控件：数组 / 对象 = CodeJar 代码编辑区、字符串 = 多行文本域、
-                   数字 = 带 −/+ 的 NumberStepper、布尔 = 复用 SetSegment 的 true / false 分段单选。四者统一以文本承载
-                   （varDlg.form.defaultValue），确定时仍由 parseDefault 按类型解析。 -->
-              <div class="ni-field-row ni-field-row--top">
-                <label class="ni-field-label">默认值</label>
-                <div v-if="isComplexType(varDlg.form.type)" ref="dlgCode" class="vars-dlg__code" spellcheck="false"></div>
-                <textarea
-                  v-else-if="varDlg.form.type === 'string'"
-                  class="ni-input vars-dlg__str"
-                  v-model="varDlg.form.defaultValue"
-                  :placeholder="scalarPlaceholder('string')"
-                ></textarea>
-                <NumberStepper
-                  v-else-if="varDlg.form.type === 'number'"
-                  class="vars-dlg__ctrl"
-                  :value="varDlg.form.defaultValue"
-                  :placeholder="scalarPlaceholder('number')"
-                  @input="varDlg.form.defaultValue = $event"
-                />
-                <SetSegment
-                  v-else
-                  class="vars-dlg__ctrl"
-                  :value="varDlg.form.defaultValue"
-                  :options="{ iParamList: varBoolOptions }"
-                  @input="varDlg.form.defaultValue = $event"
-                />
-              </div>
-              <div class="ni-field-row ni-field-row--top">
-                <label class="ni-field-label">描述</label>
-                <textarea class="ni-input vars-dlg__desc" v-model="varDlg.form.desc" placeholder="可选"></textarea>
-              </div>
-              <p v-if="varDlgError" class="vars-dlg__err">{{ varDlgError }}</p>
-            </div>
-          </div>
-          <div class="ni-foot">
-            <span class="ni-tip">默认值入 defaultValue；设计期覆盖见「配置变量 mock」</span>
-            <div class="ni-foot-btns">
-              <button class="ni-btn ni-btn--ghost" type="button" @click="varDlg = null">取消</button>
-              <button class="ni-btn" type="button" @click="confirmVarDlg">确定</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
-    <ConfirmDialog
-      :visible="delVarTarget != null"
-      title="删除变量"
-      :message="delVarMessage"
-      :severity="delVarSeverity"
-      :confirm-text="delVarConfirmText"
-      @confirm="confirmDeleteVar"
-      @cancel="delVarTarget = null"
-    />
-  </aside>
-</template>
-
-<script>
-import JsonTree from './JsonTree.vue'
-import StructureTree from './StructureTree.vue'
-import NodeInspector from './NodeInspector.vue'
-import EventEditor from './EventEditor.vue'
-import LogValue from './LogValue.vue'
-import Dropdown from './Dropdown.vue'
-import ConfirmDialog from './ConfirmDialog.vue'
-import NumberStepper from './NumberStepper.vue'
-import SetSegment from './setters/SetSegment.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, subscribeServiceLog, fetchServiceLogs } from '@/api.js'
-// mock 覆盖仓与派生真相：与 App / 服务端共用同一实现，避免判据漂移
-import { buildDataFromSchema, readMocks, hasMockValue } from '../../server/core/buildDataFromSchema.js'
-// 服务日志面板：终端 ANSI（SGR）→ HTML，1:1 还原 cardbuddy 的 chalk 配色
-import { ansiToHtml, stripAnsi } from '@/ansi.js'
-
-/** 服务日志在前端保留的最大行数（与服务端环形缓冲同量级，超出裁剪最旧的）。 */
-const SVC_MAX_LINES = 800
-
-/**
- * 容错 JSON 解析（对象字面量友好）：先做一遍「格式化容忍」清理，再交严格 JSON.parse ——
- * 报错只针对对象结构本身非法（括号不配对 / 悬空冒号 / 未闭合字符串等），
- * 手写习惯一律容忍并规范化：无引号键 / 单引号字符串 / 注释 / 尾逗号 /
- * 分号当逗号 / 重复逗号 / undefined·NaN·Infinity 归 null。
- * 字符串字面量原样搬运（含转义），不会误伤内容里的 // 、,} 等字符；
- * 清理后的标准 JSON 由调用方（应用 / 确定）回灌编辑器完成「保存即格式化」。
- * @param {string} text
- * @returns {{ value: any } | { error: string }}
- */
-function parseJsonLenient(text) {
-  const src = String(text == null ? '' : text).replace(/^\uFEFF/, '')
-  let out = ''
-  let i = 0
-  const n = src.length
-  const lastNonWs = () => {
-    let k = out.length - 1
-    while (k >= 0 && /\s/.test(out[k])) k -= 1
-    return k
-  }
-  // 逗号去重入栈： leading 逗号（紧跟 [ { ）与连续逗号都不输出
-  const pushComma = () => {
-    const k = lastNonWs()
-    if (k >= 0 && out[k] !== ',' && out[k] !== '[' && out[k] !== '{') out += ','
-  }
-  const skipWs = (from) => {
-    let k = from
-    while (k < n && /\s/.test(src[k])) k += 1
-    return k
-  }
-  while (i < n) {
-    const ch = src[i]
-    // 双引号字符串：原样搬运（含转义）
-    if (ch === '"') {
-      let j = i + 1
-      while (j < n) {
-        if (src[j] === '\\') { j += 2; continue }
-        if (src[j] === '"') { j += 1; break }
-        j += 1
-      }
-      out += src.slice(i, j)
-      i = j
-      continue
-    }
-    // 单引号字符串：转双引号（内部双引号转义、\' 还原为裸引号）
-    if (ch === '\'') {
-      let j = i + 1
-      let body = ''
-      while (j < n) {
-        const c = src[j]
-        if (c === '\\' && j + 1 < n) {
-          const nx = src[j + 1]
-          if (nx === '\'') { body += '\''; j += 2; continue }
-          if (nx === '"') { body += '\\\"'; j += 2; continue }
-          body += c + nx
-          j += 2
-          continue
-        }
-        if (c === '\'') { j += 1; break }
-        if (c === '"') { body += '\\\"'; j += 1; continue }
-        body += c
-        j += 1
-      }
-      out += '"' + body + '"'
-      i = j
-      continue
-    }
-    // 注释：// 与 /* */
-    if (ch === '/' && src[i + 1] === '/') {
-      while (i < n && src[i] !== '\n') i += 1
-      continue
-    }
-    if (ch === '/' && src[i + 1] === '*') {
-      const close = src.indexOf('*/', i + 2)
-      i = close === -1 ? n : close + 2
-      continue
-    }
-    // 分号视同逗号；逗号去重
-    if (ch === ';' || ch === ',') {
-      pushComma()
-      i += 1
-      continue
-    }
-    // 标识符：后跟冒号 → 键，补双引号；否则原样（true/false/null 等关键字）
-    if (/[A-Za-z_$]/.test(ch)) {
-      let j = i
-      while (j < n && /[A-Za-z0-9_$]/.test(src[j])) j += 1
-      const token = src.slice(i, j)
-      if (src[skipWs(j)] === ':') out += '"' + token + '"'
-      else if (token === 'undefined' || token === 'NaN' || token === 'Infinity') out += 'null'
-      else out += token
-      i = j
-      continue
-    }
-    // 数字（含负号 / 指数）：后跟冒号 → 键，补双引号；-Infinity 归 null
-    if (ch === '-' && src.startsWith('Infinity', i + 1)) {
-      out += 'null'
-      i += 9
-      continue
-    }
-    if (/[0-9]/.test(ch) || (ch === '-' && /[0-9]/.test(src[i + 1] || ''))) {
-      let j = i
-      while (j < n && /[0-9eE+\-.]/.test(src[j])) j += 1
-      const token = src.slice(i, j)
-      if (src[skipWs(j)] === ':') out += '"' + token + '"'
-      else out += token
-      i = j
-      continue
-    }
-    // 收括号：抹掉所有尾逗号
-    if (ch === '}' || ch === ']') {
-      let k = lastNonWs()
-      while (k >= 0 && out[k] === ',') {
-        out = out.slice(0, k) + out.slice(k + 1)
-        k = lastNonWs()
-      }
-    }
-    out += ch
-    i += 1
-  }
-  try {
-    return { value: JSON.parse(out.trim() || '{}') }
-  } catch (e) {
-    return { error: e.message }
-  }
-}
-
-/**
- * 行级别判定：只认 logger.js 的行首标签（HH:MM:SS.mmm INFO/OK/WARN/ERR），
- * 其余输出（console.* / 第三方 / vite）统一 info，避免把卡片内容里的「错误」字样误判。
- */
-function svcLevelOf(plain) {
-  const m = /^\d{2}:\d{2}:\d{2}\.\d{3}\s+(INFO|OK\s|WARN|ERR)\b/.exec(plain)
-  if (m) {
-    const tag = m[1].trim()
-    return tag === 'ERR' ? 'error' : tag === 'WARN' ? 'warn' : tag === 'OK' ? 'ok' : 'info'
-  }
-  return 'info'
-}
-
-/** 服务端日志行 { seq, t, text } → 面板行（ANSI 转 HTML 只做一次，避免每次重渲染重复解析）。 */
-function toSvcRow(line) {
-  const text = String(line && line.text != null ? line.text : '')
-  const plain = stripAnsi(text)
-  return {
-    seq: Number(line && line.seq) || 0,
-    t: Number(line && line.t) || 0,
-    level: svcLevelOf(plain),
-    plain,
-    html: ansiToHtml(text),
-  }
-}
-
-// 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
-}
-
-/** 深拷贝 JSON 安全值；变量默认值写入 schema / rootScope 前隔断引用 */
-function cloneJson(v) {
-  return v === undefined ? undefined : JSON.parse(JSON.stringify(v))
-}
-
-export default {
-  name: 'DebugPanel',
-  components: { JsonTree, StructureTree, NodeInspector, EventEditor, LogValue, Dropdown, ConfirmDialog, NumberStepper, SetSegment },
-  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: 'vars' },
-    // 本地开发服务连接状态：复用 App 中顶栏「连接」按钮同款状态/配色（devSvcClass/devSvcTitle/devSvcLabel），
-    // 供底部状态栏展示「连接图标 + 状态文案」，与右上角按钮实时同步（颜色一致、状态一致）。
-    devSvcClass: { type: String, default: 'app__btn--warn' },
-    devSvcTitle: { type: String, default: '' },
-    devSvcLabel: { type: String, default: '' },
-    // 本地服务连接态（'' | unconfigured | connecting | open | closed）：
-    // 服务日志面板据此给出空态文案（未配置 / 连接中 / 已断开）。
-    devSvcConn: { type: String, default: '' },
-    // 纯净截图模式（?chrome=off）：禁用状态栏 Teleport，使其留在本面板内随面板隐藏
-    chromeOff: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      copied: false,
-      copyTimer: null,
-      // 刚复制过默认值的变量行下标（图标变 ✓ 反馈），null=无
-      copiedVar: null,
-      varCopyTimer: null,
-      // 底部面板模式：''（收起） | 'binding'（变量绑定错误） | 'event'（事件日志 / 执行错误）
-      errorPanel: '',
-      // 事件面板内部 tab：'log'（主动日志） | 'err'（执行错误），打开面板时按是否有错误自动定位
-      eventTab: 'log',
-      // 服务日志面板（errorPanel === 'svclog'）：本地服务终端输出的实时镜像
-      svcLogs: [],
-      // 已收到的最大 seq：断线重连后用 GET /__logs?since= 精确补齐缺口
-      svcLogSeq: 0,
-      // 清空面板时记录的水位线：此后取历史不会把已清掉的行再拉回来
-      svcLogFloor: 0,
-      svcLogLive: false,
-      // 自动跟随最新输出；用户向上翻阅即暂停，回到底部自动恢复
-      svcLogFollow: true,
-      svcLogDropped: 0,
-      svcLogLoading: false,
-      svcLogErr: '',
-      svcCopied: false,
-      // 运行态面板：默认收起；点击状态栏「运行态」指示器切换
-      statePanelOpen: false,
-      // 运行态 / 变量绑定 / 事件 三个底部面板互斥，共用同一高度变量（px）；
-      // 可被顶部抓手拖拽调整，并持久化到 localStorage（cardbuddy:debug-panel-height）
-      panelH: this.loadPanelH(),
-      // 底部面板头部拖拽进行中：头部高亮与竖向分隔条 .is-dragging 同一语言
-      panelDragging: false,
-      // 双击结构树节点后弹出的属性面板目标节点
-      inspectingComp: null,
-      // 换节点时强制重建面板（内部含 CodeJar 这类托管 DOM 的控件）
-      inspectKey: 0,
-      // 事件编辑弹框目标节点（点击「事件」徽标时单独弹出，与属性面板解耦）
-      editingEventComp: null,
-      eventEditorKey: 0,
-      // Raw JSON 编辑状态（mock 二级视图的编辑器内容与解析错误）
-      rawText: '',
-      rawError: '',
-      // 变量 tab 二级视图：'list'（变量列表，管理 inputParams）| 'mock'（Raw JSON 编辑 mock 数据）
-      varsMode: 'list',
-      // 变量添加 / 编辑弹窗：null | { index: null|number, form: { key, name, type, defaultValue, desc } }
-      varDlg: null,
-      varDlgError: '',
-      // 待删除变量下标（ConfirmDialog 确认中）
-      delVarTarget: null,
-      // 类型选项：value 只留中文名，英文类型名由 Dropdown 的 current / option 插槽渲染成彩色标签
-      varTypeOptions: [
-        { key: 'string', value: '字符串' },
-        { key: 'number', value: '数字' },
-        { key: 'boolean', value: '布尔' },
-        { key: 'array', value: '数组' },
-        { key: 'object', value: '对象' },
-      ],
-      // 布尔默认值的分段单选项（交 SetSegment 渲染，即属性面板同款 .st-seg）：
-      // 值仍以文本承载（'true' / 'false'），与 parseDefault 的解析口径一致
-      varBoolOptions: [
-        { key: 'true', value: 'true' },
-        { key: 'false', value: 'false' },
-      ],
-      // 导入来源元数据（Phase E）：GET /__import-meta/:id，无侧车时为 null
-      importMeta: null,
-      tabs: [
-        { key: 'vars', label: '变量' },
-        { key: 'structure', label: '组件结构' },
-        { key: 'meta', label: '卡片来源' },
-      ],
-    }
-  },
-  computed: {
-    /** 设计期 mock 覆盖表：schema.dictionary.mocks（key → 值）；m 徽标与 mock 编辑器的唯一数据源 */
-    mocks() {
-      return readMocks(this.schema) || {}
-    },
-    /** 变量定义列表：schema.dictionary.inputParams（变量 tab 的唯一数据源） */
-    inputParams() {
-      const dict = this.schema && this.schema.dictionary
-      return dict && Array.isArray(dict.inputParams) ? dict.inputParams : []
-    },
-    /** 删除确认文案：点名变量与影响面 */
-    /** 待删变量的引用统计（绑定表达式 / 事件脚本 / 其它文本），供删除确认分级 */
-    delVarRefs() {
-      const p = this.delVarTarget == null ? null : this.inputParams[this.delVarTarget]
-      return this.scanVarRefs(p && p.key)
-    },
-    /** 被引用 = danger（红·禁止图标，明确破坏面）；未被引用 = warn（橙黄·三角，普通不可逆操作） */
-    delVarSeverity() {
-      const r = this.delVarRefs
-      return r.binding + r.event + r.other > 0 ? 'danger' : 'warn'
-    },
-    delVarConfirmText() {
-      return this.delVarSeverity === 'danger' ? '仍要删除' : '删除'
-    },
-    delVarMessage() {
-      const p = this.delVarTarget == null ? null : this.inputParams[this.delVarTarget]
-      if (!p) return ''
-      // 中文名与 key 相同时不重复展示括号
-      const nm = p.name && p.name !== p.key ? '（' + p.name + '）' : ''
-      const r = this.delVarRefs
-      const total = r.binding + r.event + r.other
-      if (total > 0) {
-        const parts = []
-        if (r.binding) parts.push(`绑定表达式 ${r.binding} 处`)
-        if (r.event) parts.push(`事件脚本 ${r.event} 处`)
-        if (r.other) parts.push(`其它文本 ${r.other} 处`)
-        return `变量「${p.key}」${nm}仍被${parts.join('、')}引用（共 ${total} 处）。删除后这些引用将取不到值，画布可能出现空白或执行报错，请先迁移再删除。`
-      }
-      return `变量「${p.key}」${nm}当前未被任何绑定表达式或事件脚本引用。删除后变量定义与 mock 值一并移除，不可恢复。`
-    },
-    /** 服务日志空态标题：按连接态区分「没配 / 没连上 / 连上了但还没输出」 */
-    svcEmptyText() {
-      if (this.devSvcConn === 'unconfigured') return '未配置本地开发服务'
-      if (this.devSvcConn === 'open') return '暂无服务日志'
-      return '本地服务未连接'
-    },
-    svcEmptyHint() {
-      if (this.svcLogErr) {
-        return '取历史失败：' + this.svcLogErr + '（本地服务需升级到支持 /__logs 的 cardbuddy 版本）'
-      }
-      if (this.devSvcConn === 'unconfigured') {
-        return '在顶栏「连接」中配置本地开发服务地址后，这里会实时镜像该服务终端的彩色输出'
-      }
-      if (this.devSvcConn === 'open') {
-        return 'cardbuddy 终端的输出（含配色）会实时镜像到这里；试试同步、保存、校验或截图'
-      }
-      return '连接恢复后自动继续；服务端保留最近 ' + SVC_MAX_LINES + ' 行历史，重连不丢'
-    },
-    // 依赖 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: {
-    // 服务日志采用懒订阅：面板打开才建 SSE（浏览器对同源并发连接有限，不与
-    // cards-changed / code-bridge 常驻连接抢位），关闭即退订，历史由服务端缓冲补。
-    errorPanel(mode) {
-      if (mode === 'svclog') this.startSvcLog()
-      else this.stopSvcLog()
-    },
-    // 切换卡片时退出 Raw 模式，避免编辑内容与新卡片数据不一致；
-    // 同时关闭属性面板，避免展示旧卡片节点；并拉取导入来源元数据。
-    cardId: {
-      immediate: true,
-      handler() {
-        this.rawError = ''
-        this.destroyJar()
-        // 换卡回到变量列表视图，并关掉可能开着的变量弹窗 / 删除确认
-        this.varsMode = 'list'
-        this.varDlg = null
-        this.varDlgError = ''
-        this.delVarTarget = null
-        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()
-      // 离开变量 tab：mock 编辑器随视图卸载，销毁 CodeJar 防泄漏；回到列表视图
-      if (n !== 'vars') {
-        this.varsMode = 'list'
-        this.rawError = ''
-        this.destroyJar()
-        this.varDlg = null
-      }
-    },
-    // 变量弹窗开合：打开且为数组 / 对象类型时挂载 CodeJar 代码编辑区；关闭即销毁
-    varDlg(n) {
-      if (!n) {
-        this.destroyDlgJar()
-        return
-      }
-      this.varDlgError = ''
-      if (this.isComplexType(n.form.type)) this.$nextTick(() => this.initDlgJar())
-    },
-    // 类型切换：四种默认值控件互换，旧文本按新类型规整（能沿用则沿用，不能则给该类型的空态）；
-    // 容器类型还要等 DOM 换出后重新挂 CodeJar
-    'varDlg.form.type'(n, o) {
-      if (!this.varDlg || n === o) return
-      this.varDlg.form.defaultValue = this.normalizeDefaultText(n, this.varDlg.form.defaultValue)
-      if (this.isComplexType(n)) this.$nextTick(() => this.initDlgJar())
-      else this.destroyDlgJar()
-    },
-    // 进入 mock 二级视图：序列化 rootScope 交 CodeJar 托管；退出即销毁实例
-    varsMode(n) {
-      if (n === 'mock') {
-        this.seedRawFromMocks()
-        this.$nextTick(() => this.initJar())
-      } else {
-        this.rawError = ''
-        this.destroyJar()
-      }
-    },
-    // schema 引用变化（撤销/重做、刷新重载会整体替换对象；就地编辑只 mutate 不换引用）
-    // 时关闭已打开的节点属性/事件面板，避免面板持有已被替换的旧预览节点引用。
-    schema() {
-      this.inspectingComp = null
-      this.editingEventComp = null
-      // schema 整体被替换（重置 / 撤销重做 / 外部重载）：mock 视图开着时同步重播种，
-      // 否则 CodeJar 会停留在「应用」前的旧文本，重置按钮看起来像没生效
-      if (this.varsMode === 'mock') this.seedRawFromMocks()
-    },
-  },
-  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.destroyDlgJar()
-    this.cancelResize()
-    this.stopSvcLog()
-  },
-  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
-        // 事件面板展开时自动落到更值得关注的一侧：有执行错误看错误，否则看日志
-        if (kind === 'event') this.eventTab = this.eventErrors.length ? 'err' : 'log'
-      }
-    },
-    /**
-     * 拖拽调整底部面板（运行态 / 变量绑定 / 事件）高度：挂在面板头部（已有 .statepanel__head /
-     * .errpanel__head，无专门拖拽节点），与预览区宽度调节同一套 mousedown 机制。
-     * 在头部按下后监听 document 的 mousemove / mouseup；向上拖（clientY 减小）增大面板高度，
-     * 向下拖减小，符合底部停靠面板的直觉。高度夹在 [120px, 视窗 60%]，并实时同步到两个面板
-     * （三者互斥共用 panelH），鼠标松开才持久化到 localStorage（避免拖拽过程频繁写盘）。
-     * 头部上的关闭/清空等按钮不触发拖拽，避免与点击冲突。
-     */
-    startResize(e) {
-      if (e.target.closest('button')) return
-      this.panelDragging = true
-      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.panelDragging = false
-        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
-      this.panelDragging = false
-      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 不可用时忽略 */
-      }
-    },
-    /** 用 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 = '' // 用户再次输入即清除旧错误
-      })
-      // 开发期暴露 Raw 编辑器句柄供 E2E 程序化写入（与 window.__rt 同源约定）；生产构建不暴露。
-      // 合成 input 事件驱动不了 CodeJar，E2E 经 updateCode 走真实 onUpdate → 「应用」路径。
-      if (import.meta.env.DEV) window.__rawEditor = this._jar
-      this.$nextTick(() => el.focus())
-    },
-    /** 销毁 CodeJar 实例（退出/保存/卸载/切卡时调用） */
-    destroyJar() {
-      if (this._jar && this._jar.destroy) {
-        this._jar.destroy()
-      }
-      this._jar = null
-      if (typeof window !== 'undefined' && window.__rawEditor) window.__rawEditor = null
-    },
-    /** 变量弹窗「默认值」代码编辑区（数组 / 对象）：CodeJar + Prism(json)，与 mock Raw 编辑器同方案 */
-    initDlgJar() {
-      const el = this.$refs.dlgCode
-      if (!el) return
-      this.destroyDlgJar()
-      const highlight = (editor) => {
-        editor.innerHTML = Prism.highlight(editor.textContent, Prism.languages.json, 'json')
-      }
-      this._dlgJar = CodeJar(el, highlight, {
-        tab: '  ',
-        indentOn: /[({[]$/,
-        addClosing: true,
-        history: true,
-      })
-      this._dlgJar.updateCode(this.varDlg ? this.varDlg.form.defaultValue : '')
-      this._dlgJar.onUpdate((code) => {
-        if (this.varDlg) this.varDlg.form.defaultValue = code
-        if (this.varDlgError) this.varDlgError = ''
-      })
-      // 开发期暴露弹窗代码区句柄供 E2E 程序化写入（合成 input 事件驱动不了 CodeJar）；生产不暴露
-      if (import.meta.env.DEV) window.__dlgEditor = this._dlgJar
-    },
-    destroyDlgJar() {
-      if (this._dlgJar && this._dlgJar.destroy) this._dlgJar.destroy()
-      this._dlgJar = null
-      if (typeof window !== 'undefined' && window.__dlgEditor) window.__dlgEditor = null
-    },
-    /** 标量 → 容器切换时的种子文本：旧文本形状匹配则格式化沿用，否则给空容器骨架 */
-    complexSeed(type, text) {
-      const empty = type === 'array' ? '[]' : '{}'
-      const t = String(text == null ? '' : text).trim()
-      if (!t) return empty
-      try {
-        const v = JSON.parse(t)
-        const shapeOk = type === 'array' ? Array.isArray(v) : !!v && typeof v === 'object'
-        return shapeOk ? JSON.stringify(v, null, 2) : empty
-      } catch (e) {
-        return empty
-      }
-    },
-    /**
-     * 默认值统一以文本承载，但四种类型「合法文本」的形态不同：切类型 / 打开弹窗时按目标类型规整，
-     * 免得把上一类型的字面量塞进新控件（如布尔的 'true' 落进数字步进框）。
-     * 字符串原样保留（含首尾空白与换行）——占位提示已明示「字符串原样保存」。
-     */
-    normalizeDefaultText(type, text) {
-      if (this.isComplexType(type)) return this.complexSeed(type, text)
-      const t = String(text == null ? '' : text).trim()
-      if (type === 'number') return t !== '' && Number.isFinite(Number(t)) ? String(Number(t)) : ''
-      if (type === 'boolean') return /^(true|1)$/i.test(t) ? 'true' : 'false'
-      return String(text == null ? '' : text)
-    },
-    /** 应用 Raw 编辑：校验 JSON 合法性与形状 → 写入 dictionary.mocks → 重算预览数据（默认值之上叠 mock）；
-     *  写入即按 2 空格标准格式回灌编辑器；留在 mock 视图继续编辑 */
-    saveRaw() {
-      // 先容错清理（注释 / 尾逗号）再严格校验：报错判定基于清理后的文本
-      const parsed = parseJsonLenient(this.rawText)
-      if (parsed.error) {
-        this.rawError = 'JSON 格式错误：' + parsed.error
-        return
-      }
-      if (parsed.value === null || typeof parsed.value !== 'object' || Array.isArray(parsed.value)) {
-        this.rawError = '变量 mock 必须是 JSON 对象（{ ... }）'
-        return
-      }
-      const schema = this.schema
-      if (!schema) {
-        this.rawError = '当前未载入卡片'
-        return
-      }
-      if (!schema.dictionary || typeof schema.dictionary !== 'object') {
-        schema.dictionary = { dictionaryList: [], inputParams: [] }
-      }
-      schema.dictionary.mocks = parsed.value
-      // 画布数据 = defaultValue 之上按 key 叠加非空 mock；watcher 会把 rootScope 回写两仓
-      this.rt.setRootScope(buildDataFromSchema(schema, { includeMocks: true }))
-      const formatted = JSON.stringify(parsed.value, null, 2)
-      this.rawText = formatted
-      if (this._jar) this._jar.updateCode(formatted)
-      // 落定一笔撤销记录（与节点属性「应用」同路径）
-      this.$nextTick(() => this.onCommit())
-      this.rawError = ''
-    },
-    async copyScope() {
-      // 复制当前 mock 文档（编辑器所见即所得）
-      const text = this.rawText || ''
-      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')
-    },
-    // —— 变量管理（schema.dictionary.inputParams）——
-    /** 是否已配置 mock（dictionary.mocks 有数据；与 buildDataFromSchema 同判据）→ 列表行 m 徽标 */
-    hasMock(param) {
-      return hasMockValue(this.mocks, param.key)
-    },
-    /** 复制变量名（当前 key，绑定以 $key 引用）；成功后图标短暂变 ✓（与接口调用面板同款反馈节奏） */
-    async copyVarName(param, i) {
-      const text = param && param.key ? String(param.key) : ''
-      if (!text) return
-      const ok = await copyText(text)
-      if (ok) {
-        this.copiedVar = i
-        if (this.varCopyTimer) clearTimeout(this.varCopyTimer)
-        this.varCopyTimer = setTimeout(() => {
-          if (this.copiedVar === i) this.copiedVar = null
-        }, 1500)
-      }
-    },
-    isComplexType(type) {
-      return type === 'array' || type === 'object'
-    },
-    // 布尔改用单选（无占位提示），故这里只剩数字与字符串两支
-    scalarPlaceholder(type) {
-      if (type === 'number') return '数字，如 0 / 99.5'
-      return '字符串原样保存'
-    },
-    onVarTypeChange(type) {
-      if (this.varDlg) this.varDlg.form.type = type
-    },
-    /** 打开添加（index=null）/ 编辑（index=下标）弹窗；默认值统一以文本承载，确定时按类型解析 */
-    openVarDlg(index) {
-      const param = index == null ? null : this.inputParams[index]
-      const type = param ? param.type || 'string' : 'string'
-      const raw = param ? param.defaultValue : undefined
-      let text = ''
-      if (raw !== undefined && raw !== null) {
-        text = typeof raw === 'object' ? JSON.stringify(raw, null, 2) : String(raw)
-      }
-      // 按类型规整：布尔补出 'false' 让单选有落点，数字剔除非法字面量，容器格式化
-      text = this.normalizeDefaultText(type, text)
-      this.varDlgError = ''
-      this.varDlg = {
-        index,
-        form: {
-          key: param ? param.key || '' : '',
-          name: param ? param.name || '' : '',
-          type,
-          defaultValue: text,
-          desc: param ? param.desc || '' : '',
-        },
-      }
-    },
-    /** 默认值文本 → 类型化值；返回 { value } 或 { error } */
-    parseDefault(type, text) {
-      const t = String(text == null ? '' : text).trim()
-      if (this.isComplexType(type)) {
-        if (!t) return { value: type === 'array' ? [] : {} }
-        // 与 mock 编辑器同套容错：先清理注释 / 尾逗号再严格校验
-        const parsed = parseJsonLenient(t)
-        if (parsed.error) return { error: '默认值不是合法 JSON：' + parsed.error }
-        const v = parsed.value
-        if (type === 'array' && !Array.isArray(v)) return { error: '默认值需为 JSON 数组' }
-        if (type === 'object' && (typeof v !== 'object' || v === null || Array.isArray(v))) return { error: '默认值需为 JSON 对象' }
-        return { value: v }
-      }
-      if (type === 'number') {
-        if (!t) return { value: 0 }
-        const n = Number(t)
-        if (!Number.isFinite(n)) return { error: '默认值不是合法数字' }
-        return { value: n }
-      }
-      if (type === 'boolean') {
-        if (!t) return { value: false }
-        if (t === 'true' || t === '1') return { value: true }
-        if (t === 'false' || t === '0') return { value: false }
-        return { error: '布尔默认值仅接受 true / false' }
-      }
-      return { value: String(text == null ? '' : text) }
-    },
-    /** 确定：写入 inputParams 并同步 rootScope（mock 基线），再记一笔历史 */
-    confirmVarDlg() {
-      const dlg = this.varDlg
-      if (!dlg) return
-      const form = dlg.form
-      const key = String(form.key || '').trim()
-      const name = String(form.name || '').trim()
-      if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) {
-        this.varDlgError = '变量名需为字母 / 下划线开头的英文标识（绑定以 $key 引用）'
-        return
-      }
-      if (this.inputParams.some((p, i) => p.key === key && i !== dlg.index)) {
-        this.varDlgError = '已存在同名变量 ' + key
-        return
-      }
-      if (!name) {
-        this.varDlgError = '中文名不能为空'
-        return
-      }
-      const parsed = this.parseDefault(form.type, form.defaultValue)
-      if (parsed.error) {
-        this.varDlgError = parsed.error
-        return
-      }
-      // 容器类型：保存即按 2 空格标准 JSON 格式化回灌（编辑器与存档同形）
-      if (this.isComplexType(form.type)) {
-        const formatted = JSON.stringify(parsed.value, null, 2)
-        form.defaultValue = formatted
-        if (this._dlgJar) this._dlgJar.updateCode(formatted)
-      }
-      const schema = this.schema
-      if (!schema) {
-        this.varDlgError = '当前未载入卡片'
-        return
-      }
-      if (!schema.dictionary || typeof schema.dictionary !== 'object') {
-        schema.dictionary = { dictionaryList: [], inputParams: [] }
-      }
-      if (!Array.isArray(schema.dictionary.inputParams)) schema.dictionary.inputParams = []
-      const params = schema.dictionary.inputParams
-      const root = this.rt.rootScope
-      const mocks = readMocks(schema) || {}
-      const value = cloneJson(parsed.value)
-      if (dlg.index == null) {
-        params.push({ key, name, type: form.type, defaultValue: cloneJson(value), desc: String(form.desc || ''), rule: { type: '', options: {} }, children: [] })
-        // 已有 mock 覆盖时画布继续用 mock，默认值只入 defaultValue 仓
-        if (!hasMockValue(mocks, key)) root[key] = value
-      } else {
-        const param = params[dlg.index]
-        if (!param) return
-        const oldKey = param.key
-        param.key = key
-        param.name = name
-        param.type = form.type
-        param.desc = String(form.desc || '')
-        param.defaultValue = cloneJson(value)
-        if (oldKey !== key) {
-          // 改名时 mock 覆盖跟随迁移，避免旧 key 的 mock 变成孤儿 / 新 key 丢覆盖
-          if (Object.prototype.hasOwnProperty.call(mocks, oldKey)) {
-            mocks[key] = mocks[oldKey]
-            delete mocks[oldKey]
-          }
-          if (root && Object.prototype.hasOwnProperty.call(root, oldKey)) delete root[oldKey]
-        }
-        if (!hasMockValue(mocks, key)) root[key] = value
-      }
-      this.varDlg = null
-      this.onCommit()
-    },
-    askDeleteVar(index) {
-      this.delVarTarget = index
-    },
-    /** 删除：inputParams 移除 + rootScope 清键，再记一笔历史 */
-    /**
-     * 扫描变量引用面：遍历 schema（跳过 dictionary 两仓与 compiled 回声产物），
-     * 按两种引用形态匹配——表达式里的 `$key`、事件脚本里的 `state.key` / `state['key']`；
-     * 分类计数：绑定表达式（itemValue 为字符串）/ 事件脚本（code 键）/ 其它文本。
-     * 仅供删除确认分级（被引用=danger / 未被引用=warn），不做写操作。
-     */
-    scanVarRefs(key) {
-      const refs = { binding: 0, event: 0, other: 0 }
-      const schema = this.schema
-      if (!key || !schema || typeof schema !== 'object') return refs
-      const esc = String(key).replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-      const boundary = '(?![A-Za-z0-9_$])'
-      const dollarRe = new RegExp('\\$' + esc + boundary)
-      const stateRe = new RegExp('state\\s*(?:\\.\\s*' + esc + boundary + '|\\[\\s*[\'"]' + esc + '[\'"]\\s*\\])')
-      const hit = (s) => dollarRe.test(s) || stateRe.test(s)
-      const walk = (v) => {
-        if (v == null) return
-        if (Array.isArray(v)) {
-          for (const item of v) walk(item)
-          return
-        }
-        if (typeof v !== 'object') return
-        for (const [k, val] of Object.entries(v)) {
-          if (k === 'dictionary' || k === 'compiled') continue
-          if (typeof val === 'string') {
-            if (!hit(val)) continue
-            if (k === 'itemValue') refs.binding += 1
-            else if (k === 'code') refs.event += 1
-            else refs.other += 1
-          } else {
-            walk(val)
-          }
-        }
-      }
-      walk(schema)
-      return refs
-    },
-    confirmDeleteVar() {
-      const param = this.delVarTarget == null ? null : this.inputParams[this.delVarTarget]
-      this.delVarTarget = null
-      if (!param || !this.schema || !this.schema.dictionary) return
-      const params = this.schema.dictionary.inputParams || []
-      const idx = params.indexOf(param)
-      if (idx >= 0) params.splice(idx, 1)
-      // mock 覆盖一并清除，避免留下孤儿 key 与误报的 m 徽标
-      const mocks = readMocks(this.schema) || {}
-      if (Object.prototype.hasOwnProperty.call(mocks, param.key)) delete mocks[param.key]
-      const root = this.rt.rootScope
-      if (root && Object.prototype.hasOwnProperty.call(root, param.key)) delete root[param.key]
-      this.onCommit()
-    },
-    /** 从 mock 二级视图回到变量列表（编辑器随视图卸载，watcher 负责销毁 CodeJar） */
-    leaveMock() {
-      this.varsMode = 'list'
-    },
-    /** 以当前 dictionary.mocks 播种 mock 编辑器文本（进入视图 / schema 被替换时共用） */
-    seedRawFromMocks() {
-      this.rawError = ''
-      try {
-        // mock 编辑器只编辑覆盖仓 dictionary.mocks（默认值在变量弹窗里改）；空表即 {}
-        this.rawText = JSON.stringify(this.mocks, null, 2)
-      } catch (e) {
-        this.rawText = ''
-        this.rawError = '无法序列化当前数据：' + (e && e.message)
-        return
-      }
-      if (this._jar) this._jar.updateCode(this.rawText)
-    },
-    /** 双击结构树节点：弹出属性面板 */
-    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)
-    },
-    /** 清空事件主动日志（事件面板「清空日志」按钮）；错误不清除 */
-    clearEventLogs() {
-      this.rt.clearEventLogs()
-    },
-    /** 打开服务日志：先补历史（含上次清空后的水位线），再建立 SSE 实时订阅。 */
-    async startSvcLog() {
-      this.svcLogFollow = true
-      await this.pullSvcLogHistory(0)
-      if (this._svcUnsub) return
-      this._svcUnsub = subscribeServiceLog(
-        (payload) => this.appendSvcLogs(payload && payload.lines),
-        (state) => {
-          this.svcLogLive = state === 'open'
-          // 断线重连成功后按 seq 补漏：缓冲仍在服务端，不会丢行也不会重复
-          if (state === 'open' && this.svcLogSeq) this.pullSvcLogHistory(this.svcLogSeq)
-        }
-      )
-    },
-    /** 关闭服务日志：退订 SSE（面板数据保留，下次打开按水位线增量补齐）。 */
-    stopSvcLog() {
-      if (this._svcUnsub) {
-        this._svcUnsub()
-        this._svcUnsub = null
-      }
-      this.svcLogLive = false
-    },
-    /**
-     * 拉取服务日志历史。
-     * @param {number} since 0 = 全量（取最新 SVC_MAX_LINES 行）；>0 = 只取 seq 大于它的行
-     */
-    async pullSvcLogHistory(since) {
-      if (this.svcLogLoading) return
-      this.svcLogLoading = true
-      const from = Math.max(Number(since) || 0, this.svcLogFloor)
-      try {
-        const snap = await fetchServiceLogs({ limit: SVC_MAX_LINES, since: from })
-        this.svcLogErr = ''
-        if (snap && snap.enabled === false) {
-          this.svcLogErr = '服务端已关闭日志流（CARDBUDDY_STREAM_LOGS=0）'
-        } else {
-          this.svcLogDropped = (snap && snap.dropped) || 0
-          if (snap && snap.seq) this.svcLogSeq = Math.max(this.svcLogSeq, snap.seq)
-          const rows = ((snap && snap.lines) || []).map(toSvcRow)
-          // from > 0 是断线补漏：走同一条去重/裁剪/跟随逻辑，避免与实时流重叠
-          if (from) this.appendSvcLogs(rows)
-          else this.svcLogs = rows
-          this.scrollSvcToBottom(true)
-        }
-      } catch (e) {
-        this.svcLogErr = (e && e.message) || String(e)
-      } finally {
-        this.svcLogLoading = false
-      }
-    },
-    /** 追加实时行：按 seq 去重（历史与实时流可能重叠）、裁剪上限、按需跟随滚动。 */
-    appendSvcLogs(lines) {
-      const list = Array.isArray(lines) ? lines : []
-      if (!list.length) return
-      const rows = []
-      for (const l of list) {
-        // 既接受服务端原始行 { seq, t, text }，也接受已转换好的面板行（含 html）
-        const row = l && l.html != null ? l : toSvcRow(l)
-        const seq = Number(row.seq) || 0
-        if (seq && seq <= this.svcLogSeq) continue
-        if (seq) this.svcLogSeq = seq
-        rows.push(row)
-      }
-      if (!rows.length) return
-      const next = this.svcLogs.concat(rows)
-      this.svcLogs = next.length > SVC_MAX_LINES ? next.slice(next.length - SVC_MAX_LINES) : next
-      if (this.svcLogFollow) this.scrollSvcToBottom()
-    },
-    clearSvcLogs() {
-      this.svcLogFloor = this.svcLogSeq
-      this.svcLogs = []
-      this.svcLogDropped = 0
-    },
-    /** 复制全部日志为纯文本（去掉 ANSI），便于贴到工单 / IM 里排障。 */
-    async copySvcLogs() {
-      const ok = await copyText(this.svcLogs.map((r) => r.plain).join('\n'))
-      if (!ok) return
-      this.svcCopied = true
-      if (this._svcCopiedTimer) clearTimeout(this._svcCopiedTimer)
-      this._svcCopiedTimer = setTimeout(() => {
-        this.svcCopied = false
-      }, 1200)
-    },
-    toggleSvcFollow() {
-      this.svcLogFollow = !this.svcLogFollow
-      if (this.svcLogFollow) this.scrollSvcToBottom(true)
-    },
-    scrollSvcToBottom(force) {
-      if (!force && !this.svcLogFollow) return
-      this.$nextTick(() => {
-        const el = this.$refs.errBody
-        if (el) el.scrollTop = el.scrollHeight
-      })
-    },
-    /** 面板体滚动：距底 24px 内视为「在底部」并恢复跟随，否则暂停（用户正在往上翻）。 */
-    onErrBodyScroll() {
-      if (this.errorPanel !== 'svclog') return
-      const el = this.$refs.errBody
-      if (!el) return
-      this.svcLogFollow = el.scrollHeight - el.scrollTop - el.clientHeight < 24
-    },
-    /** 日志 / 错误行首时间戳：HH:MM:SS 等宽对齐，单行多带一份定位信息 */
-    fmtTime(t) {
-      if (!t) return '--:--:--'
-      const d = new Date(t)
-      const p = (n) => String(n).padStart(2, '0')
-      return p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds())
-    },
-    /** 拉取当前卡片的导入来源元数据（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
-      }
-    },
-  },
-}
-</script>