cardbuddy 0.6.0

package/dist/vendored/App.vue

@@ -0,0 +1,2330 @@
+<!--
+  预览外壳：左侧卡片选择 + 顶部工具条 + 手机框内的实时渲染 +
+  右侧调试面板。
+-->
+<template>
+  <div class="app" :class="{ 'app--chrome-off': chromeOff }" :style="{ '--preview-width': previewWidth + 'px' }">
+    <header class="app__bar" v-show="!chromeOff">
+      <strong class="app__logo">
+        <img class="app__logo-icon" :src="logoUrl" alt="" />
+        CardBuddy
+        <span class="app__logo-version">v{{ appVersion }}</span>
+      </strong>
+      <div class="csel-combo">
+        <CardSelect class="csel--combo" :value="selectedId" :options="cardList" @change="onSelect" />
+        <button
+          class="csel-combo__btn"
+          type="button"
+          :disabled="!selectedId"
+          @click="openCardFolder"
+          title="在文件管理器中打开当前卡片所在文件夹"
+        >
+          <svg class="app__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" />
+            <path d="M3 9h18" />
+          </svg>
+        </button>
+      </div>
+      <!-- 卡片网格预览：图标按钮，打开本地全部卡片的缩略图墙，点击任一张载入工作台 -->
+      <button
+        class="app__btn app__btn--icon"
+        type="button"
+        :disabled="!cardList.length"
+        @click="openGallery"
+        title="卡片网格预览"
+      >
+        <svg class="app__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-grid" /></svg>
+      </button>
+      <div
+        class="app__badge"
+        :class="'app__badge--' + validateBadge.state"
+        :title="badgeTitle"
+        v-show="!chromeOff"
+      >
+        <span class="app__badge-dot"></span>
+        <span class="app__badge-text">{{ badgeText }}</span>
+      </div>
+      <div class="app__bar-actions">
+        <div class="app__op-group" role="group" aria-label="编辑历史与本地操作">
+          <!-- 撤销 / 重做：图标 + 文案；无可回退/重做版本时置灰 -->
+          <button class="app__btn app__btn--hist" type="button" :disabled="!preview || !canUndo" @click="undo" title="后退一步（撤销）">
+            <svg class="app__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-undo" /></svg>
+            <span>撤销</span>
+          </button>
+          <button class="app__btn app__btn--hist" type="button" :disabled="!preview || !canRedo" @click="redo" title="前进一步（重做）">
+            <svg class="app__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-redo" /></svg>
+            <span>重做</span>
+          </button>
+          <!-- 保存到本地：当前显示版本（撤销/重做导航到的历史版本，或编辑后未本地保存的版本）
+               与本地磁盘版本不一致时高亮可用；一致时置灰。点击把当前版本真正写回磁盘，
+               使下一次重新打开加载的是这个「真实版本」，而非任意历史记录。 -->
+          <button
+            class="app__btn app__btn--history-save"
+            type="button"
+            :disabled="!preview || !historyDirty || savingCard || loadingCard"
+            :class="{ 'is-dirty': historyDirty }"
+            @click="applyHistoryToLocal"
+            :title="historyDirty ? '当前版本与本地不一致，点击将该版本保存到本地' : '当前版本已与本地一致'"
+          >
+            <svg class="app__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-save" /></svg>
+            <span>保存</span>
+          </button>
+          <button class="app__btn app__btn--op" :disabled="!preview" @click="copySchema" title="复制 schema（含数据绑定编辑后的数据）">
+            <svg class="app__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-copy" /></svg>
+            <span>{{ copiedSchema ? '已复制 ✓' : '复制' }}</span>
+          </button>
+        </div>
+        <!-- 远端：合并「远端保存 / 远端预览 / 全量同步 / 选中卡片同步」为一个分组，组名「远端」，云图标 -->
+        <Dropdown
+          class="app__remote-menu"
+          size="md"
+          placement="bottom-end"
+          :disabled="savingRemote || syncingRemote"
+          :title="savingRemote ? '正在保存至远端…' : (syncingRemote ? '同步中…' : '远端操作：保存到 FinMall / 真机预览 / 全量或选中卡片同步')"
+          data-testid="remote-group"
+        >
+          <template #trigger="{ open }">
+            <button
+              type="button"
+              class="app__btn app__btn--remote"
+              :class="{ 'app__btn--warn': savedRemote && verifiedRemote === false, 'app__remote-trigger--active': open, 'is-processing': savingRemote || syncingRemote }"
+              :disabled="savingRemote || syncingRemote"
+            >
+              <svg v-if="savingRemote || syncingRemote" class="app__icon app__icon--spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-loading" /></svg>
+              <svg v-else-if="savedRemote && verifiedRemote !== false" class="app__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-cloud-check" /></svg>
+              <svg v-else-if="savedRemote && verifiedRemote === false" class="app__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-cloud-alert" /></svg>
+              <svg v-else class="app__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-cloud" /></svg>
+              <span>远端</span>
+              <svg class="app__icon app__icon--chev" :class="{ 'app__icon--chev--open': open }" viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><use href="#icon-chevron" /></svg>
+            </button>
+          </template>
+          <template #default="{ close }"><ul class="app__remote-pop dd__menu" role="menu">
+            <li class="app__remote-item app__remote-item--save" :class="{ 'is-disabled': !preview || !selectedId || savingRemote || !hasCardSource }" :title="!hasCardSource ? '该卡未经「同步远程」导入，无远端来源信息，无法推送版本' : '版本推送：把本地卡片版本覆盖到远端 FinMall'" data-testid="save-remote" role="menuitem" @click="chooseRsave('save'); close()">
+              <svg class="app__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-upload-cloud" /></svg>
+              <span>版本推送</span>
+            </li>
+            <li class="app__remote-item" :class="{ 'is-disabled': !preview || !selectedId || !hasCardSource }" :title="!hasCardSource ? '该卡未经「同步远程」导入，无远端来源信息，无法生成真机预览二维码' : '在线预览：生成真机预览二维码（FinMall App 扫码）'" data-testid="remote-preview" role="menuitem" @click="chooseRsave('preview'); close()">
+              <svg class="app__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-grid" /></svg>
+              <span>在线预览</span>
+            </li>
+             <li class="app__remote-item app__remote-item--sync" :class="{ 'is-disabled': !preview || !selectedId || syncingRemote }" data-testid="sync-selected" role="menuitem" @click="chooseSync('selected'); close()">
+              <svg class="app__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-sync-box" /></svg>
+              <span>当前同步</span>
+            </li>
+            <li class="app__remote-item app__remote-item--sync" :class="{ 'is-disabled': syncingRemote }" data-testid="sync-full" role="menuitem" @click="chooseSync('full'); close()">
+              <svg class="app__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-refresh" /></svg>
+              <span>全量同步</span>
+            </li>
+          </ul></template>
+        </Dropdown>
+        <!-- 主题切换：深色（当前）/ 浅色，复用同名 CSS 变量整体换肤，状态持久化 -->
+        <button
+          class="theme-toggle"
+          type="button"
+          role="switch"
+          :aria-checked="theme === 'light'"
+          :title="theme === 'light' ? '切换到深色主题' : '切换到浅色主题'"
+          @click="toggleTheme"
+        >
+          <span class="theme-toggle__track">
+            <span class="theme-toggle__thumb">
+              <svg
+                v-if="theme === 'light'"
+                class="theme-toggle__icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <circle cx="12" cy="12" r="4.2" />
+                <line x1="12" y1="2.5" x2="12" y2="5" />
+                <line x1="12" y1="19" x2="12" y2="21.5" />
+                <line x1="2.5" y1="12" x2="5" y2="12" />
+                <line x1="19" y1="12" x2="21.5" y2="12" />
+                <line x1="4.9" y1="4.9" x2="6.8" y2="6.8" />
+                <line x1="17.2" y1="17.2" x2="19.1" y2="19.1" />
+                <line x1="4.9" y1="19.1" x2="6.8" y2="17.2" />
+                <line x1="17.2" y1="6.8" x2="19.1" y2="4.9" />
+              </svg>
+              <svg
+                v-else
+                class="theme-toggle__icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+              </svg>
+            </span>
+          </span>
+        </button>
+        <!-- 本地开发服务设置入口 -->
+        <div class="app__dev-svc">
+          <button
+            class="app__btn app__btn--icon"
+            type="button"
+            :title="devSvcTitle"
+            :class="devSvcClass"
+            @click="devServiceOpen = !devServiceOpen"
+          >
+            <svg class="app__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>
+          </button>
+          <div v-if="devServiceOpen" class="app__dev-svc-panel" @click.stop>
+            <div class="app__dev-svc-title">本地开发服务</div>
+            <label class="app__dev-svc-row">
+              <span>启用</span>
+              <Switch v-model="devServiceForm.enabled" />
+            </label>
+            <label class="app__dev-svc-row app__dev-svc-row--col">
+              <span>服务地址</span>
+              <input type="text" v-model="devServiceForm.baseUrl" placeholder="http://127.0.0.1:8787" />
+            </label>
+            <label class="app__dev-svc-row app__dev-svc-row--col">
+              <span>访问令牌（可选）</span>
+              <input type="text" v-model="devServiceForm.token" placeholder="留空则不校验" />
+            </label>
+            <div class="app__dev-svc-actions">
+              <button class="ni-btn ni-btn--ghost" type="button" @click="devServiceOpen = false">关闭</button>
+              <button class="ni-btn" type="button" @click="saveDevService">保存</button>
+            </div>
+            <p class="app__dev-svc-hint" v-if="apiBaseResolved === null">
+              <template v-if="devSvcBlockReason === 'disabled'">已填写服务地址，但「启用」开关未打开。请开启「启用」开关并点击保存，本地开发服务才会生效。</template>
+              <template v-else>请填写本机 cardbuddy 服务地址（默认 http://127.0.0.1:8787），打开「启用」开关并保存后，编辑功能才会生效。</template>
+            </p>
+          </div>
+        </div>
+      </div>
+      <!-- revision 依赖锚点：setData 自增后驱动本组件重渲染 -->
+      <span style="display: none">{{ rt.revision }}</span>
+    </header>
+
+    <!-- 部署态但未配置本地开发服务：顶部提示条（chrome=off 截图模式不显示） -->
+    <div v-if="apiBaseResolved === null && !chromeOff" class="app__nosvc-banner">
+      <template v-if="devSvcBlockReason === 'disabled'">
+        ⚠ 本地开发服务未生效：已填写地址，但未打开「启用」开关。请点击右上角 「连接」图标打开「本地开发服务」设置，开启「启用」开关并保存后，编辑功能才会生效。
+      </template>
+      <template v-else>
+        ⚠ 未配置本地开发服务：当前为部署态，编辑功能不可用。请点击右上角 「连接」图标打开「本地开发服务」设置，填写本机 cardbuddy 地址、打开「启用」开关并保存后，才能编辑卡片。
+      </template>
+    </div>
+
+    <!-- 已配置本地服务但实时连接已断开：顶部提示条（chrome=off 截图模式不显示） -->
+    <div v-if="apiBaseResolved !== null && devSvcDown && !chromeOff" class="app__nosvc-banner app__nosvc-banner--disconnected">
+      ⚠ 本地开发服务已断开：连接失败或服务已停止，编辑 / 同步功能暂不可用。请确认本地 cardbuddy 是否运行，或点击右上角「连接」图标重新保存配置。
+    </div>
+
+    <!-- 外部改了当前卡、无未保存改动 → 自动重载后的非阻塞轻提示（chrome=off 截图模式不显示） -->
+    <div v-if="externalReloadNote && !chromeOff" class="app__nosvc-banner app__extreload-banner">
+      ↻ {{ externalReloadNote }}
+    </div>
+
+    <main class="app__stage" ref="stageEl">
+      <div class="phone" :class="{ 'phone--dragging': dragging }" :style="{ width: previewWidth + 'px' }">
+        <!-- 缩放外框：占满整列（宽高由 CSS flex 填满）；画布不做 transform 缩放，直接按实际尺寸布局 -->
+        <div class="phone__frame" :style="frameStyle">
+        <!-- 画布层：直接按实际列宽/列高布局（width/height 100%），不再使用 transform 缩放 -->
+        <div class="phone__scaler">
+        <!-- 设备工具条（类 Chrome DevTools 设备模式）：下拉选择画布背景 -->
+        <div class="device-bar" v-show="!chromeOff">
+          <!-- 背景选择下拉框：无边框模式（工具栏文字式控件） -->
+          <Dropdown
+            borderless
+            size="xs"
+            placement="bottom-start"
+            :value="canvasBg"
+            :options="bgOptions.map((b) => ({ key: b.key, value: b.label + '背景' }))"
+            @change="chooseBg"
+          />
+          <span class="device-bar__spacer"></span>
+          <span class="device-bar__label">宽度</span>
+          <!-- 预设尺寸下拉：与背景下拉同款；触发器实时显示当前画布宽度，展开为 375 / 188 两个预设，切换即动态改宽度（高度随列高自动一致） -->
+          <Dropdown
+            borderless
+            size="xs"
+            placement="bottom-end"
+            :value="canvasW"
+            :label="canvasW + ' px'"
+            :options="presetSizes"
+            @change="setPresetWidth"
+          />
+        </div>
+        <!--
+          固定视口：弹层（alertCard / alertDialog / toast）相对此容器 absolute inset:0 定位，
+          不随内层 phone__screen 的卡片内容滚动，保证遮罩始终精确覆盖可视区域。
+        -->
+        <div ref="phoneViewport" class="phone-viewport" @click="onCanvasClick">
+          <div
+            class="phone__screen"
+            :class="'phone__screen--bg-' + (chromeOff ? 'white' : canvasBg)"
+            :style="chromeOff && preview ? { width: (preview.view.width || 375) + 'px' } : null"
+            :data-card-ready="cardReady ? '1' : null"
+          >
+            <!--
+              :key 绑定 selectedId + reloadToken —— 切换卡片、远端同步后重载、重置导入
+              等场景时强制 RenderTree 重新挂载，从而保证新卡片/新数据的「初始化动作」
+              （onReady 等生命周期事件，如 assetOverview 计算 ratio）一定在 created 阶段
+              执行，不会出现重载后 init 不跑、依赖字段为 undefined 而渲染成 NaN% 的问题。
+            -->
+            <RenderTree v-if="preview" :key="selectedId + ':' + reloadToken" :node="preview.view" :scope="rt.state" :selected-node-id="selectedNodeId" />
+            <!-- 节点选中遮罩覆盖层：作为滚动容器子节点，随内容滚动并精确贴合选中元素 -->
+            <SelectionOverlay />
+            <!-- 结构树 hover 参考线：贯穿画布的荧光绿辅助线（左/右竖线、上/下横线），仅 hover 时显示 -->
+            <HoverGuides />
+          </div>
+          <!-- 弹窗卡片图层：alertCard / closeAlertCard 的展现层（在预览区域内弹出） -->
+          <AlertCardLayer :main-rt="rt" />
+          <!-- 设备级模拟 UI：alertDialog 对话框 / showToast 弱提示 / showPicker 选择器 / showDatePicker 日期选择器 -->
+          <DeviceOverlay />
+          <PickerOverlay />
+          <DatePickerOverlay />
+        </div>
+        <!-- 预览区底部状态条：显示画布宽高（左）+ 刷新按钮（右），chromeOff 时隐藏 -->
+        <div class="preview-statusbar" v-show="!chromeOff">
+          <span class="device-bar__info">{{ canvasW }} × {{ viewportHeight }}</span>
+          <span class="device-bar__spacer"></span>
+          <button
+            class="statusbar__refresh"
+            type="button"
+            :disabled="!selectedId"
+            @click="refreshCard"
+            title="刷新卡片，重新加载"
+          >
+            <svg class="app__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M21 12a9 9 0 1 1-2.64-6.36" />
+              <path d="M21 3v6h-6" />
+            </svg>
+          </button>
+        </div>
+        </div>
+        </div>
+      </div>
+
+      <!-- 拖拽分隔条：位于预览列与操作面板之间，拖动调整预览宽度（手机自动缩放填充） -->
+      <div
+        v-show="!chromeOff"
+        class="splitter"
+        :class="{ 'is-dragging': dragging }"
+        @mousedown.prevent="startDrag"
+        title="拖拽调整预览区域宽度"
+      ></div>
+
+      <DebugPanel
+        v-show="!chromeOff"
+        :rt="rt"
+        :preview="preview"
+        :schema="currentSchema"
+        :card-id="selectedId"
+        :reload-token="reloadToken"
+        :card-count="cardCount"
+        :selected-node-id="selectedNodeId"
+        :move-collapse-token="moveCollapseToken"
+        :active-tab="activeTab"
+        @schema-changed="onSchemaChanged"
+        @schema-commit="onSchemaCommit"
+        @select-node="onSelectNode"
+        @update:active-tab="activeTab = $event"
+        @add-node="onAddNode"
+        @move-node="onMoveNode"
+        @hover-node="onHoverNode"
+        @copy-selected="copySelectedNode"
+        @paste="pasteNode"
+        @duplicate="duplicateNode"
+        @delete-selected="deleteSelectedNode"
+        @reset-import="onRefresh"
+        :dev-svc-class="devSvcClass"
+        :dev-svc-title="devSvcTitle"
+        :dev-svc-label="devSvcLabel"
+      />
+    </main>
+    <!-- 远端预览二维码弹层：点击顶栏「远端预览」按钮打开，手机（FinMall App）扫码真机查看 -->
+    <RemotePreview
+      :visible="remotePreviewOpen"
+      :page-id="currentSchema ? currentSchema.pageId : ''"
+      :schema="currentSchema"
+      @close="remotePreviewOpen = false"
+    />
+    <!-- 登录凭据弹窗：远程同步检测到缺凭据时弹出，填写账号密码（MD5 后）写入 .local/credentials.json -->
+    <div v-if="loginModal" class="login-mask" @click.self="closeLoginModal">
+      <div class="login-modal" role="dialog" aria-modal="true">
+        <div class="login-modal__title">FinMall 登录凭据</div>
+        <div class="login-modal__desc">
+          本地登录凭据缺失，请填写账号与密码。密码仅做 MD5 后保存，不落明文。
+        </div>
+        <label class="login-modal__row">
+          <span class="login-modal__label">账号</span>
+          <input
+            class="login-modal__input"
+            type="text"
+            v-model="loginName"
+            placeholder="FinMall 登录账号"
+            :disabled="loginSubmitting"
+            @keyup.enter="submitLogin"
+          />
+        </label>
+        <label class="login-modal__row">
+          <span class="login-modal__label">密码</span>
+          <input
+            class="login-modal__input"
+            type="password"
+            v-model="loginPassword"
+            placeholder="FinMall 登录密码"
+            :disabled="loginSubmitting"
+            @keyup.enter="submitLogin"
+          />
+        </label>
+        <div v-if="loginError" class="login-modal__error">{{ loginError }}</div>
+        <div class="login-modal__actions">
+          <button
+            class="login-modal__btn login-modal__btn--ghost"
+            type="button"
+            :disabled="loginSubmitting"
+            @click="closeLoginModal"
+          >
+            取消
+          </button>
+          <button
+            class="login-modal__btn login-modal__btn--primary"
+            type="button"
+            :disabled="loginSubmitting"
+            @click="submitLogin"
+          >
+            {{ loginSubmitting ? '保存中…' : '保存并同步' }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- 组件选择面板：点击结构树每行的「＋」后弹出，选择类型即插入对应节点 -->
+    <ComponentPalette
+      v-if="addNodePanelOpen"
+      @pick="onPickComponent"
+      @close="cancelAddNode"
+    />
+    <!-- 二次确认弹窗：版本推送 / 当前同步 / 全量同步 等写/覆盖类操作前弹出，确认后才执行 -->
+    <ConfirmDialog
+      :visible="confirm.show"
+      :title="confirm.title"
+      :message="confirm.message"
+      :confirm-text="confirm.confirmText"
+      :cancel-text="confirm.cancelText"
+      :danger="confirm.danger"
+      @confirm="onConfirmDialog"
+      @cancel="onCancelDialog"
+    />
+    <!-- 卡片网格预览弹窗：点击顶栏「网格预览」图标按钮打开，选择卡片即载入工作台 -->
+    <CardGallery
+      :visible="galleryOpen"
+      :cards="cardList"
+      :selected-id="selectedId"
+      @select="onSelect"
+      @close="closeGallery"
+    />
+    <!-- App 级弱提示：顶栏异步操作（远端保存 / 同步）完成反馈，浮于 App 外壳顶部居中 -->
+    <AppToast />
+  </div>
+</template>
+
+<script>
+import Adapter from '@/runtime/adapter.js'
+import { createCardRuntime } from '@/runtime/card-runtime.js'
+import { buildPreview, buildModelView, createComponentNode, isContainerMeta, getDefaultSlotKey, COMPONENT_META } from '@/runtime/toPreview.js'
+// 节点树剪贴板：复制/粘贴/副本（Ctrl/⌘+C/V/D）共用
+import {
+  setClipboardNode,
+  getClipboardNode,
+  getClipboardSourceCardId,
+  collectClassNames,
+  regenerateComponentIds,
+} from '@/runtime/clipboard-node.js'
+import RenderTree from '@/components/RenderTree.vue'
+import DebugPanel from '@/components/DebugPanel.vue'
+import CardSelect from '@/components/CardSelect.vue'
+import AlertCardLayer from '@/components/AlertCardLayer.vue'
+import DeviceOverlay from '@/components/DeviceOverlay.vue'
+import PickerOverlay from '@/components/PickerOverlay.vue'
+import DatePickerOverlay from '@/components/DatePickerOverlay.vue'
+import SelectionOverlay from '@/components/SelectionOverlay.vue'
+import HoverGuides from '@/components/HoverGuides.vue'
+import { hoverGuide, setHoverEl, clearHoverEl } from '@/runtime/hoverGuide.js'
+import RemotePreview from '@/components/RemotePreview.vue'
+import AppToast from '@/components/AppToast.vue'
+import ConfirmDialog from '@/components/ConfirmDialog.vue'
+import CardGallery from '@/components/CardGallery.vue'
+import ComponentPalette from '@/components/ComponentPalette.vue'
+import Switch from '@/components/Switch.vue'
+import { showAppToast } from '@/runtime/app-toast.js'
+import { clearAllAlerts } from '@/runtime/alert-card.js'
+import { installJsApiMock, clearDeviceUI } from '@/runtime/jsapi-mock.js'
+import logoUrl from '@/assets/site-icon.png'
+import { apiFetch, resolveApiBase, subscribeCardsChanged, loadDevServiceConfig, saveDevServiceConfig } from '@/api.js'
+// 由 schema 单向派生 data 的共享实现（与 server/core 同源，避免逻辑漂移）。
+// 预览渲染注入的数据绑定、本地基线比较、历史快照还原均使用此函数，使 data 永不读回 data.json 文件。
+import { buildDataFromSchema } from '../server/core/buildDataFromSchema.js'
+
+// 编辑器自身「保存到本地 / 保存至远端」写盘后，cardbuddy 的 watcher 会把这次落盘经 SSE
+// 推回 cards-changed。这是「自己改自己」的回声，并非外部修改，用此窗口吸收，避免误弹外部重载
+// 提示 / 冲突确认框。窗口仅作用于本窗口——其他窗口 / IDE / 远端同步推来的 cards-changed 仍照常提示。
+const SELF_SAVE_SUPPRESS_MS = 2500
+
+// 模块级单例：renderTree 通过 provide/inject 拿到的是稳定引用，
+// 内部 rootScope 可经 setRootScope 整体替换而引用不变。
+const adapter = new Adapter()
+const cardRuntime = createCardRuntime({}, adapter)
+// 开发期暴露 runtime 单例句柄，供 E2E 回归（如 L2-12 绑定数据整体替换实时同步画布）
+// 直接驱动 rt.setRootScope —— 与 DebugPanel「绑定数据」Raw「应用」同源。生产构建不暴露。
+if (typeof window !== 'undefined' && import.meta.env.DEV) window.__rt = cardRuntime
+
+export default {
+  name: 'App',
+  components: { RenderTree, DebugPanel, CardSelect, AlertCardLayer, DeviceOverlay, PickerOverlay, DatePickerOverlay, SelectionOverlay, HoverGuides, RemotePreview, AppToast, ConfirmDialog, CardGallery, ComponentPalette, Switch },
+  provide() {
+    return {
+      adapter,
+      cardRuntime,
+      customComponents: {},
+    }
+  },
+  data() {
+    return {
+      adapter,
+      rt: cardRuntime,
+      logoUrl,
+      // 顶栏版本号小字：由 vite.config.mjs 经 define 内联的 __APP_VERSION__ 提供，
+      // 与 package.json 的 version 保持一致。
+      appVersion: __APP_VERSION__,
+      cardList: [], // 实时从 GET /__cards 拉取，不缓存启动快照
+      cardCount: 0,
+      galleryOpen: false, // 卡片网格预览弹窗开关
+      selectedId: '',
+      // 外部（IDE / 其他工具）改了当前卡、且平台无未保存改动时，自动重载后顶部短暂提示
+      // （非阻塞，区别于有未保存改动时的阻塞确认框）。
+      externalReloadNote: '',
+      externalReloadTimer: null,
+      // 自保存标记：记录「本窗口刚发起落盘」的卡片 id 与时刻，用于吸收 watcher 推回的 cards-changed 回声。
+      // 仅本窗口可见——其他窗口 / IDE / 远端同步触发的变更不会带此标记，仍照常提示外部重载。
+      selfSaveId: '',
+      selfSaveAt: 0,
+      preview: null,
+      // chrome=off：纯净截图模式（隐藏顶栏/设备条/调试面板，卡片根挂 data-card-ready），
+      // 供 /__screenshot 无头截图使用。由 URL ?chrome=off 触发。
+      chromeOff: false,
+      // 主题：'dark'（默认，当前配色）/ 'light'（浅色，白底）。持久化于 localStorage，切换即整体换肤。
+      theme: 'dark',
+      // 卡片首帧渲染完成标志：在 /__screenshot 模式下，screenshot.js 等待 [data-card-ready]
+      // 出现再截图（比 networkidle 稳，避免截到尚未挂载的空壳）。
+      cardReady: false,
+      reloadToken: 0,
+      // 拖拽移动成功令牌：每次「节点拖拽移动成功」自增，经 DebugPanel 透传给结构树，
+      // 用于触发「移动完成后：选中被拖节点 + 仅展开其祖先链、其余全部折叠」的行为。
+      moveCollapseToken: 0,
+      refreshing: false,
+      loadingCard: false, // 切卡/载入进行中：临时禁用「保存到本地」，避免沿用上一卡的脏状态或把上一卡误写进新卡
+      currentSchema: null,
+      currentCard: null, // 当前卡片的磁盘最新内容（实时载入的工作副本，非跨卡缓存）
+      // 导入来源元数据（Phase E 可追溯）：GET /__import-meta/:id 的 meta，无侧车（本地新建卡）时为 null。
+      // 顶栏「版本推送」据此置灰——无来源则无远端卡片可推送版本。
+      cardImportMeta: null,
+      // 本地真实版本基线：载入（或「保存到本地」写盘）时记录磁盘当前 schema+data 的克隆。
+      // 用于判断「当前显示版本」是否与本地磁盘一致：撤销/重做到历史版本、或编辑未本地保存
+      // 时两者不一致 → 顶栏「保存到本地」按钮高亮可点；一致时按钮置灰。
+      localSchema: null,
+      localData: null,
+      selectedNodeId: '',
+      // 当前激活的调试面板 tab（接口调用/绑定数据/组件结构/卡片来源）。
+      // 画布 Ctrl/⌘ 点击会自动切到「组件结构」tab 并在节点树聚焦选中，无需预先停在结构树 tab。
+      activeTab: 'scope',
+      // 组件结构树「添加」面板：addNodePanelOpen 控制弹层显隐；addNodeTarget 记录
+      // 插入锚点与模式（{ node, mode }，来自结构树 add-node 事件）：
+      //   node = 右键/选中 viewNode（null 或 Root → 视作根）；mode 决定落位规则：
+      //     'child'  → 容器内默认插槽末尾追加子节点（根 → view.components 末尾）；
+      //     'before' → 节点相邻兄弟之前插入；
+      //     'after'  → 节点相邻兄弟之后插入；
+      //     'auto'   → 顶部「+ 添加」原行为（容器→子节点末尾；非容器→其后兄弟）。
+      addNodePanelOpen: false,
+      addNodeTarget: null,
+      // 整卡校验徽标（Q3：仅 ok/error，不展开 bindingErrors 明细）
+      validateBadge: { state: 'idle', errors: 0, warnings: 0, renderOk: null, ts: 0 },
+      validateTimer: null,
+      copiedSchema: false,
+      copyTimer: null,
+      savedCard: false,
+      savingCard: false,
+      saveTimer: null,
+      savingRemote: false, // 远端保存（写回 FinMall）进行中
+      savedRemote: false, // 远端保存成功反馈
+      verifiedRemote: null, // 保存后读回校验结果：null=未校验/跳过，true=一致，false=不符
+      saveRemoteTimer: null,
+      syncingRemote: false,
+      syncedRemote: false,
+      remotePreviewOpen: false, // 「远端预览」二维码弹层开关
+      syncTarget: null, // 'full' | 'selected' | null —— 标记上一次/正在进行的同步模式，用于按钮反馈
+      syncTimer: null,
+      // 登录凭据弹窗（远程同步缺凭据时弹出，填写账号密码写入 .local/credentials.json）
+      loginModal: false,
+      loginName: '',
+      loginPassword: '',
+      loginSubmitting: false,
+      loginError: '',
+      // 二次确认弹窗（版本推送 / 当前同步 / 全量同步 等写/覆盖类操作前弹出，确认后才执行 onConfirm）
+      confirm: {
+        show: false,
+        title: '',
+        message: '',
+        confirmText: '继续',
+        cancelText: '取消',
+        danger: false,
+        onConfirm: null,
+      },
+      // 编辑历史（撤销/重做）：每个快照为 { schema, data }，data 即 rt.rootScope（数据绑定），
+      // 与 schema 一并快照，撤销时两者都还原（否则 syncDataToSchema 会用新数据覆盖回 schema）。
+      // past=可回退的「上一版本」快照（最新在末尾），future=可重做的快照，
+      // baseline=当前已提交版本的 { schema, data } 克隆（schema 比较时忽略 defaultValue 噪声，data 比较用深层相等）。
+      past: [],
+      future: [],
+      baseline: null,
+      _commitTimer: null, // 编辑落定防抖计时器，避免连续编辑产生过多快照
+      viewportHeight: 700, // 手机视口实际高度（高度自适应填充后由 ResizeObserver 实测更新）
+      // 画布背景模式：checker（棋盘格） / white（白色） / gray（浅灰）
+      canvasBg: 'gray',
+      bgOptions: [
+        { key: 'checker', label: '棋盘' },
+        { key: 'white', label: '白色' },
+        { key: 'gray', label: '浅灰' },
+      ],
+      // —— 预览区宽度可调（拖拽分隔条 / 预设尺寸，画布按实际像素宽度布局，无 transform 缩放）——
+      _previewWidthPx: 372, // 预览列宽度（像素，持久化到 localStorage）；第一次打开未主动设置时默认 372px
+      presetSizes: [ // 预设尺寸下拉选项（仅宽度；高度随列高动态一致）
+        { key: 375, value: '375' },
+        { key: 430, value: '430' },
+        { key: 188, value: '188' },
+      ],
+      stageWidth: typeof window !== 'undefined' ? window.innerWidth : 1280, // 舞台实际宽度（ResizeObserver 实测后更新）
+      stageHeight: typeof window !== 'undefined' ? window.innerHeight - 52 : 748, // 舞台实际高度（contain 缩放的“高度上限”基准）
+      dragging: false, // 是否正在拖拽分隔条
+      _stageObserver: null,
+      _dragMove: null,
+      _dragUp: null,
+      // —— 本地开发服务（前后端分离）配置入口 ——
+      // devServiceForm：设置面板双向绑定的草稿；启用后前端所有 /__xxx 请求改走该地址。
+      devServiceOpen: false,
+      devServiceForm: loadDevServiceConfig(),
+      // apiBaseResolved：当前生效的 API 基址；null 表示部署态未配置（必须用本地服务才能编辑）。
+      apiBaseResolved: resolveApiBase(),
+      // devSvcLive：本地开发服务 / 同源 dev server 的实时连接态（由 SSE / Vite HMR 生命周期驱动）：
+      // 'unknown' | 'connecting' | 'open' | 'closed'。与 apiBaseResolved（静态配置态）解耦，
+      // 用于顶栏「连接」图标真实反映服务端是否在运行。
+      devSvcLive: 'unknown',
+      // devSvcDown：是否已确认「本地开发服务断开」。与 devSvcLive 区分——
+      // EventSource 断链后会每 ~3s 自动重连并把 devSvcLive 翻回 'connecting'，
+      // 若直接用 'closed' 判定提示条会闪烁消失；故用独立标志：仅在真正重连成功(open)时清除，
+      // 断开期间（含重连中）始终保持 true，提示条因此持续显示直到重连。
+      devSvcDown: false,
+      _unsubCardsChanged: null,
+    }
+  },
+  computed: {
+    currentBg() {
+      return this.bgOptions.find((b) => b.key === this.canvasBg) || this.bgOptions[0]
+    },
+    // 撤销可用：存在可回退的上一版本；重做可用：存在被撤销后的版本
+    canUndo() {
+      return this.past.length > 0
+    },
+    canRedo() {
+      return this.future.length > 0
+    },
+    // 部署态未生效的具体原因（基于设置面板草稿 devServiceForm 实时判断）：
+    // 'empty'    = 未填写服务地址；
+    // 'disabled' = 已填地址但未打开「启用」开关；
+    // null       = 已正确配置（apiBaseResolved 不应为 null）。
+    devSvcBlockReason() {
+      const f = this.devServiceForm || {}
+      const hasUrl = !!String(f.baseUrl || '').trim()
+      if (!hasUrl) return 'empty'
+      if (!f.enabled) return 'disabled'
+      return null
+    },
+    // 剪贴板是否有可粘贴节点（供结构树「粘贴」按钮 disabled 态）
+    canPaste() {
+      return !!getClipboardNode()
+    },
+    // 当前卡片是否有导入来源信息（经同步远程导入才有 .import-meta.json）：
+    // 无来源 = 本地新建卡，无远端卡片可推送版本，顶栏「版本推送」应置灰。
+    hasCardSource() {
+      return !!(this.cardImportMeta && this.cardImportMeta.source)
+    },
+    // 当前显示版本（schema 结构 + 数据绑定）是否与本地磁盘版本一致：
+    // 不一致（撤销/重做到历史版本、或编辑后未本地保存）时，顶栏「保存到本地」按钮高亮且可点击；
+    // 一致时按钮置灰不可用。
+    // 注意：数据绑定比较用 localData（= buildDataFromSchema(localSchema)，载入/保存时记录），
+    // 而非 data.json 文件 —— data.json 仅为 schema 派生产物，永不读回。
+    historyDirty() {
+      if (!this.localSchema || !this.currentSchema) return false
+      return (
+        !this.structuralEqual(this.currentSchema, this.localSchema) ||
+        !this.dataEqual(this.rt && this.rt.rootScope, this.localData)
+      )
+    },
+    // 本地开发服务连接态聚合：静态配置态(apiBaseResolved) + 实时连接态(devSvcLive)。
+    // - null        = 未配置（部署态必填 / 已填但未启用）
+    // - ''          = 同源 dev 模式（页面本身由 dev server 提供）
+    // - 其它地址     = 已连接本地服务（8787）
+    devSvcConn() {
+      if (this.apiBaseResolved === null) return 'unconfigured'
+      if (this.devSvcLive === 'open') return 'open'
+      if (this.devSvcDown) return 'closed'
+      return 'connecting' // unknown 或 connecting 均视为「连接中 / 重连中」
+    },
+    // 顶栏「连接」图标 tooltip：按模式 + 实时连接态给出可读文案。
+    devSvcTitle() {
+      if (this.apiBaseResolved === null) {
+        return this.devSvcBlockReason === 'disabled'
+          ? '已填地址但未开启用本地服务'
+          : '未配置本地开发服务（部署态必填）'
+      }
+      const prefix = this.apiBaseResolved === '' ? '同源开发服务' : '本地开发服务'
+      if (this.devSvcLive === 'open') return prefix + '已连接'
+      if (this.devSvcDown) return prefix + '已断开（连接失败或服务已停止，重连中…）'
+      return prefix + '连接中 / 重连中…'
+    },
+    // 顶栏「连接」图标配色态。
+    devSvcClass() {
+      if (this.apiBaseResolved === null) return 'app__btn--warn'
+      if (this.devSvcLive === 'open') return 'app__btn--connected'
+      if (this.devSvcDown) return 'app__btn--disconnected'
+      return 'app__btn--reconnecting'
+    },
+    // 底部状态条「连接」状态文案：与 devSvcClass / devSvcConn 同源，给出可朗读的简短状态（顶栏 tooltip 为完整说明）。
+    devSvcLabel() {
+      if (this.apiBaseResolved === null) return '未配置本地服务'
+      if (this.devSvcLive === 'open') return '本地服务已连接'
+      if (this.devSvcDown) return '本地服务已断开'
+      return '本地服务连接中…'
+    },
+    badgeText() {
+      const map = {
+        idle: '待校验',
+        pending: '校验中…',
+        ok: '校验通过',
+        error: '校验未通过',
+        nopython: '未配置校验',
+        fail: '校验服务异常',
+      }
+      return map[this.validateBadge.state] || '待校验'
+    },
+    badgeTitle() {
+      const b = this.validateBadge
+      if (b.state === 'ok') return '结构合法 + 渲染不抛错（不保证画得对，视觉正确性见截图）'
+      if (b.state === 'error') {
+        const parts = []
+        if (b.errors) parts.push(`契约错误 ${b.errors} 个`)
+        if (b.renderOk === false) parts.push('渲染抛出异常')
+        return '校验未通过：' + (parts.join('；') || '详见 /__validate 与 /__render-status')
+      }
+      if (b.state === 'nopython') return '未找到 python3/python，无法跑契约校验（请安装 Python 或设置 DSL_PYTHON）'
+      if (b.state === 'fail') return '校验服务异常（dev server 未启动或端点不可用）'
+      return ''
+    },
+    // 预览列宽度（像素）：chromeOff 时占满整屏（截图/真机模式，非“宽度调整”场景）；
+    // 否则使用 _previewWidthPx 并限制在 [188, 可视宽度/2]，最大不得超过画布左侧可视区域的一半
+    previewWidth() {
+      if (this.chromeOff) return this.stageWidth
+      const total = this.stageWidth || 1
+      const minW = 188 // 最小宽度不得小于 188（预设最小尺寸）
+      const maxW = Math.max(minW, Math.floor(total / 2)) // 最大不得超过可视宽度的一半
+      const w = this._previewWidthPx || minW
+      return Math.max(minW, Math.min(maxW, w))
+    },
+    // 画布实际宽度（列宽，整数）：device-bar__info 实时显示用，拖拽分隔条时随之变化
+    canvasW() {
+      return Math.round(this.previewWidth || 375)
+    },
+    // 缩放外框占满整列（宽高交由 CSS flex 填满；画布不再做 transform 缩放，直接按实际尺寸布局）
+    frameStyle() {
+      return {}
+    },
+  },
+  watch: {
+    // 切到「组件结构」以外的 tab 时，取消任何节点的选中状态
+    activeTab(val) {
+      if (val !== 'structure') {
+        this.selectedNodeId = ''
+        // 离开组件结构 tab：结构树被卸载，hover 参考线不再有意义，清除避免残留
+        clearHoverEl()
+      }
+    },
+    // 主题切换：把 'dark' / 'light' 写到 <html data-theme>，驱动 CSS 变量整体换肤
+    theme(val) {
+      document.documentElement.dataset.theme = val
+    },
+  },
+  beforeUnmount() {
+    if (this.viewportObserver) this.viewportObserver.disconnect()
+    if (this._stageObserver) this._stageObserver.disconnect()
+    if (this._dragMove) document.removeEventListener('mousemove', this._dragMove)
+    if (this._dragUp) document.removeEventListener('mouseup', this._dragUp)
+    if (this.saveTimer) clearTimeout(this.saveTimer)
+    if (this.syncTimer) clearTimeout(this.syncTimer)
+    if (this.saveRemoteTimer) clearTimeout(this.saveRemoteTimer)
+    window.removeEventListener('keydown', this.onKeydown)
+  },
+  mounted() {
+    // 视口高度随窗口弹性填充，实测高度同步到 device-bar 信息条
+    this.viewportObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        this.viewportHeight = Math.round(entry.contentRect.height)
+      }
+    })
+    if (this.$refs.phoneViewport) this.viewportObserver.observe(this.$refs.phoneViewport)
+    // 预览区宽度可调：实测舞台尺寸，驱动 previewWidth/frameStyle 自适应窗口变化
+    this.loadPreviewWidth()
+    this._stageObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        this.stageWidth = Math.round(entry.contentRect.width)
+        this.stageHeight = Math.round(entry.contentRect.height)
+      }
+    })
+    if (this.$refs.stageEl) this._stageObserver.observe(this.$refs.stageEl)
+    // 全局键盘快捷键：复制/粘贴/副本/删除/撤销/重做/取消选中（见 onKeydown）
+    window.addEventListener('keydown', this.onKeydown)
+  },
+  async created() {
+    // ynet.callJSAPI 统一桩：所有 jsapi 模拟集中在 runtime/jsapi-mock.js 分发
+    // （alertCard / closeAlertCard / alertDialog / showToast），不真正发请求。
+    installJsApiMock(cardRuntime)
+    // 纯净截图模式：?chrome=off 触发（隐藏调试外壳，见 template 的 v-show）
+    const chromeParam = new URLSearchParams(location.search).get('chrome')
+    this.chromeOff = chromeParam === 'off' || chromeParam === ''
+    // 主题：恢复本地持久化（默认深色）；尽早应用到 <html>，避免首帧闪烁
+    try {
+      const t = localStorage.getItem('cardbuddy:theme')
+      if (t === 'light' || t === 'dark') this.theme = t
+    } catch (e) {
+      /* localStorage 不可用时忽略 */
+    }
+    document.documentElement.dataset.theme = this.theme
+    // 实时拉取卡片列表（不再依赖启动快照），再载入首张卡
+    await this.fetchCardList()
+    // 深链：若 URL 带 ?card=<id> 且命中列表，则预选该卡（供「远端预览」二维码扫码直达）
+    const deep = new URLSearchParams(location.search).get('card')
+    // 本地持久化：上次选中的卡片（无 URL 深链时优先恢复，而不是每次都回到首卡）
+    let persisted = null
+    try {
+      const v = localStorage.getItem('cardbuddy:selected-card')
+      if (v && this.cardList.some((c) => c.id === v)) persisted = v
+    } catch (e) {
+      /* localStorage 不可用时忽略 */
+    }
+    const initial =
+      deep && this.cardList.some((c) => c.id === deep)
+        ? deep
+        : persisted || (this.cardList[0] && this.cardList[0].id)
+    if (initial) {
+      this.selectedId = initial
+      await this.loadCard(this.selectedId)
+    }
+    // 数据绑定（rt.rootScope）深度监听：任意编辑实时同步进 schema.dictionary.inputParams.defaultValue，
+    // 保证「保存到本地」基于最新数据绑定；预览也经 rt 响应式实时刷新。
+    // ⚠️ 此处【不】写历史——历史由「绑定数据」面板的「应用」按钮（schema-commit）落定，
+    // 与节点属性/事件面板一致：实时编辑只更新预览与内存，点「应用」才记一笔撤销记录。
+    this.$watch(
+      () => this.rt.rootScope,
+      () => {
+        this.syncDataToSchema()
+      },
+      { deep: true }
+    )
+    // 监听 dev server 推送的磁盘变更事件：同步远程 / 其他窗口保存 / 手工编辑改了
+    // src/cards 后，预览重新拉取列表并在当前卡片受影响时即时重载，保证磁盘是唯一真相。
+    // 订阅磁盘变更推送：部署态经本地服务 SSE，开发期经 Vite HMR（见 @/api.js）
+    this.setupCardsChanged()
+  },
+  methods: {
+    /** 订阅磁盘变更推送：部署态经本地服务 SSE，开发期经 Vite HMR（见 @/api.js）。可重复调用以切换数据源。 */
+    setupCardsChanged() {
+      if (this._unsubCardsChanged) {
+        try { this._unsubCardsChanged() } catch (e) { /* ignore */ }
+        this._unsubCardsChanged = null
+      }
+      // 新订阅建立即进入「连接中」，待首帧 open / error 事件回写真实态
+      this.devSvcLive = 'connecting'
+      this._unsubCardsChanged = subscribeCardsChanged(
+        (payload) => this.onCardsChanged(payload),
+        (state) => this.onDevServiceState(state)
+      )
+    },
+    /**
+     * SSE / Vite HMR 连接态变化时回调，驱动顶栏「连接」图标实时反映服务端运行态。
+     * 断线 watchdog：若持续处于「连接中」超过 8s 仍未 open（服务端确已停止），翻为「已断开」，
+     * 避免用户看到永远转圈的黄灯误以为还活着；EventSource 后台仍会自动重连，恢复时 onopen 会翻回 open。
+     */
+    onDevServiceState(state) {
+      const wasConnecting = this.devSvcLive === 'connecting'
+      this.devSvcLive = state
+      if (state === 'open') {
+        // 真正重连成功：清除「已断开」标志，顶部提示条随之关闭
+        this.devSvcDown = false
+      } else if (state === 'closed') {
+        // 服务确已彻底关闭（EventSource readyState===2 / 显式 close）：标记已断开
+        this.devSvcDown = true
+      }
+      // 注意：state==='connecting' 且此前已 devSvcDown===true（断开后重试）时，
+      // 保持 devSvcDown 为 true，使提示条在重连过程中持续显示，不闪退。
+      if (state === 'connecting') {
+        // 仅在「从其他态首次进入连接中」时启动 watchdog；
+        // 浏览器 EventSource 断链后会每 ~3s 自动重连并重发 onerror('connecting')，
+        // 若每次都重置计时器，则永远到不了 8s —— 故重复 connecting 不再重置。
+        if (!wasConnecting && !this._svcWatchdog) {
+          this._svcWatchdog = setTimeout(() => {
+            if (this.devSvcLive === 'connecting') {
+              this.devSvcLive = 'closed'
+              // watchdog 确认服务停止：标记已断开（即便后续重试翻回 connecting 也保持）
+              this.devSvcDown = true
+            }
+            this._svcWatchdog = null
+          }, 8000)
+        }
+      } else if (this._svcWatchdog) {
+        clearTimeout(this._svcWatchdog)
+        this._svcWatchdog = null
+      }
+    },
+    /** 保存「本地开发服务」配置并即时切换数据源 */
+    saveDevService() {
+      saveDevServiceConfig(this.devServiceForm)
+      this.apiBaseResolved = resolveApiBase()
+      this.setupCardsChanged()
+      this.devServiceOpen = false
+      showAppToast('本地开发服务配置已保存', 'ok')
+      this.fetchCardList()
+    },
+    // —— 预览区宽度调节 ——
+    // 拖拽分隔条：拖动改变预览列宽度（直接写入 _previewWidthPx 像素，previewWidth/canvasW 自动联动），松手持久化
+    startDrag() {
+      if (this.chromeOff) return
+      this.dragging = true
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+      const stage = this.$refs.stageEl
+      this._dragMove = (ev) => {
+        const rect = stage.getBoundingClientRect()
+        const minW = 188 // 最小宽度不得小于 188
+        const maxW = Math.max(minW, Math.floor(rect.width / 2)) // 最大不得超过可视宽度的一半
+        let w = ev.clientX - rect.left
+        w = Math.max(minW, Math.min(maxW, w))
+        this._previewWidthPx = w
+      }
+      this._dragUp = () => {
+        this.dragging = false
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+        document.removeEventListener('mousemove', this._dragMove)
+        document.removeEventListener('mouseup', this._dragUp)
+        this.savePreviewWidth()
+      }
+      document.addEventListener('mousemove', this._dragMove)
+      document.addEventListener('mouseup', this._dragUp)
+    },
+    // 读取上次保存的预览列宽度（像素）；首次打开（无记录）时保持默认 372px
+    loadPreviewWidth() {
+      try {
+        const v = localStorage.getItem('cardbuddy:preview-width')
+        if (v != null) {
+          const px = parseInt(v, 10)
+          if (!Number.isNaN(px) && px >= 188) this._previewWidthPx = px
+        }
+      } catch (e) { /* localStorage 不可用时忽略 */ }
+    },
+    // 持久化预览列宽度（像素）到 localStorage
+    savePreviewWidth() {
+      try {
+        localStorage.setItem('cardbuddy:preview-width', String(Math.round(this._previewWidthPx)))
+      } catch (e) { /* 忽略 */ }
+    },
+    // 预设尺寸切换：375 / 188 一键设定预览列宽度；高度随列高动态保持一致（由 CSS flex 自动填充）
+    setPresetWidth(w) {
+      if (this.chromeOff) return
+      const total = this.stageWidth || 1
+      const minW = 188
+      const maxW = Math.max(minW, Math.floor(total / 2)) // 最大不得超过可视宽度的一半
+      this._previewWidthPx = Math.max(minW, Math.min(maxW, w))
+      this.savePreviewWidth()
+    },
+    /** 背景下拉：选中某项 */
+    chooseBg(key) {
+      this.canvasBg = key
+    },
+    onSelect(id) {
+      this.loadingCard = true
+      this.selectedId = id
+      // 持久化当前选中卡片，下次打开页面自动恢复（沿用 cardbuddy: 前缀约定）
+      try {
+        localStorage.setItem('cardbuddy:selected-card', id)
+      } catch (e) {
+        /* localStorage 不可用时忽略 */
+      }
+      this.loadCard(id, { clearAll: true })
+    },
+    /** 打开卡片网格预览弹窗 */
+    openGallery() {
+      if (!this.cardList.length) return
+      this.galleryOpen = true
+    },
+    /** 关闭卡片网格预览弹窗 */
+    closeGallery() {
+      this.galleryOpen = false
+    },
+    /**
+     * 顶栏「打开目录」按钮：请求本地开发服务在系统文件管理器打开
+     * 当前卡片对应文件夹（src/cards/<selectedId>）。跨平台（win/mac）由后端完成。
+     */
+    async openCardFolder() {
+      if (!this.selectedId) return
+      try {
+        const res = await apiFetch('/__open-folder', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ id: this.selectedId }),
+        })
+        const data = (res.headers.get('content-type') || '').includes('application/json')
+          ? await res.json().catch(() => ({}))
+          : {}
+        if (!res.ok || !data.ok) {
+          showAppToast(data.error || '打开文件夹失败', 'err')
+        } else {
+          showAppToast('已打开卡片文件夹', 'ok')
+        }
+      } catch (e) {
+        showAppToast('无法连接本地开发服务，请确认已启动', 'err')
+      }
+    },
+    /**
+     * 底部状态条刷新按钮：重新从本地开发服务拉取当前卡片并重建预览。
+     */
+    async refreshCard() {
+      if (!this.selectedId) return
+      await this.loadCard(this.selectedId)
+    },
+    // 切换深/浅主题：写入 <html data-theme> 并持久化，刷新后保持
+    toggleTheme() {
+      this.theme = this.theme === 'light' ? 'dark' : 'light'
+      try {
+        localStorage.setItem('cardbuddy:theme', this.theme)
+      } catch (e) {
+        /* localStorage 不可用时忽略 */
+      }
+    },
+    /**
+     * 整卡校验徽标（Q3：仅 ok/error，不展开 bindingErrors 明细）。
+     * 调 /__validate（契约硬校验）与 /__render-status（结构合法 + 渲染不抛错）两个既有端点，
+     * 均读磁盘，故在「载入 / 本地保存」后刷新——编辑→本地保存→徽标即时反映。
+     * 语义三处一致：ok = 结构合法 + 渲染不抛错，**不保证画得对**（视觉见截图）。
+     * bindingErrors 明细不进徽标（已有 DebugPanel 状态栏单独展示）。
+     */
+    async refreshValidateBadge() {
+      const id = this.selectedId
+      if (!id || !this.preview) return
+      if (this.validateTimer) clearTimeout(this.validateTimer)
+      this.validateBadge = { ...this.validateBadge, state: 'pending' }
+      // 轻量去抖：连续保存/热更新时只取最后一次结果
+      await new Promise((r) => {
+        this.validateTimer = setTimeout(r, 120)
+      })
+      if (this.selectedId !== id) return // 已切卡，丢弃过期结果
+      try {
+        const [vRes, rRes] = await Promise.all([
+          apiFetch(`/__validate/${encodeURIComponent(id)}`),
+          apiFetch(`/__render-status/${encodeURIComponent(id)}`),
+        ])
+        // 503 = 未装 python（环境缺失，非卡片问题）
+        if (!vRes.ok) {
+          this.validateBadge = { ...this.validateBadge, state: vRes.status === 503 ? 'nopython' : 'fail' }
+          return
+        }
+        const v = await vRes.json().catch(() => null)
+        const r = rRes.ok ? await rRes.json().catch(() => null) : null
+        if (!v) {
+          this.validateBadge = { ...this.validateBadge, state: 'fail' }
+          return
+        }
+        const contractOk = !!v.ok
+        // 渲染端点异常不强行判错（避免 dev server 预热期 SSR 冷启动误报）
+        const renderOk = r ? !!r.renderOk : true
+        const ok = contractOk && renderOk
+        this.validateBadge = {
+          state: ok ? 'ok' : 'error',
+          errors: (v.errors || []).length,
+          warnings: (v.warnings || []).length,
+          renderOk,
+          ts: Date.now(),
+        }
+      } catch (e) {
+        // 网络/服务不可用：保底不阻断编辑，标记 fail
+        this.validateBadge = { ...this.validateBadge, state: 'fail' }
+      }
+    },
+    /** 实时从磁盘读取并载入指定卡片（GET /__card/<id>），不读任何缓存 */
+    async loadCard(id, opts = {}) {
+      if (!id) return
+      this.loadingCard = true
+      try {
+      const res = await apiFetch(`/__card/${encodeURIComponent(id)}`)
+      if (!res.ok) {
+        this.rt.pushError('loadCard', 'HTTP ' + res.status)
+        return
+      }
+      const fresh = await res.json()
+      if (!fresh.schema) {
+        this.rt.pushError('loadCard', 'schema 读取失败')
+        return
+      }
+      // 切换卡片：清全部错误；刷新/重建预览：只清绑定错误，保留事件错误
+      if (opts.clearAll) {
+        this.rt.clearErrors()
+      } else {
+        this.rt.clearBindingErrors()
+      }
+      this.rt.clearApiCalls()
+      // schema 被事件编辑器改后重建时保留当前数据绑定编辑，避免被磁盘 data（由 schema 派生）覆盖。
+      // 数据绑定改为由 schema 单向派生，不再读回 data.json 文件。
+      if (!opts.keepScope) this.rt.setRootScope(buildDataFromSchema(fresh.schema))
+      this.currentCard = { schema: fresh.schema }
+      this.currentSchema = fresh.schema
+      // 重置并在载入后拉取导入来源元数据（Phase E）：本地新建卡无 .import-meta.json → null，
+      // 顶栏「版本推送」据此置灰（无来源则无远端可推送版本）。同步远程后 onRefresh 也会回到此处刷新。
+      this.cardImportMeta = null
+      this.fetchImportMeta(id)
+      // 记录本地真实版本基线（磁盘当前内容），供「保存到本地」按钮判断与本地是否一致。
+      // localData 由 schema 派生（与渲染注入同源），保证纯数据编辑也能触发脏标记。
+      this.localSchema = this.cloneSchema(fresh.schema)
+      this.localData = this.cloneData(buildDataFromSchema(fresh.schema))
+      this.preview = buildPreview(fresh.schema)
+      // Task #5：把 Property 树模型森林暴露到 window，供浏览器内 AI / skill 直接读取节点可编辑结构
+      if (typeof window !== 'undefined') window.__cardModel = buildModelView(fresh.schema)
+      // 标脏后重新挂 data-card-ready：截图模式下 screenshot.js 等该属性出现再截，
+      // 保证截到的是已挂载的首帧而非空壳。先置 false 让切换卡片时属性短暂消失，
+      // 待 RenderTree 重新挂载后于 nextTick 置 true。
+      this.cardReady = false
+      this.$nextTick(() => {
+        this.cardReady = true
+      })
+      // 重建后立即把当前数据绑定同步进 schema（尤其 keepScope 时 currentSchema 被重置为磁盘版）
+      this.syncDataToSchema()
+      this.selectedNodeId = ''
+      // 以刚载入的磁盘版本作为「已提交基线」（仅 schema；数据绑定由 schema.defaultValue 派生，单向）。
+      // 撤销/重做历史快照也只存 schema，还原时由 buildDataFromSchema(schema) 重建数据绑定。
+      this.baseline = {
+        schema: this.cloneSchema(this.currentSchema),
+      }
+      // 递增 token 强制 RenderTree 重新挂载（重跑 init），保证新卡片 / 新 schema 的
+      // 初始化动作（如 assetOverview 计算 ratio）一定在 created 阶段执行。
+      this.reloadToken += 1
+      // 切换主卡片时清理弹窗与设备级模拟 UI，避免残留引用旧上下文
+      clearAllAlerts()
+      clearDeviceUI()
+      // 载入即刷新整卡校验徽标（端点读磁盘，载入后状态最新）
+      this.refreshValidateBadge()
+      // 载入编辑历史（落盘在 .history/）：重置 past/future 并重建撤销栈
+      await this.loadHistory(id)
+      } finally {
+        this.loadingCard = false
+      }
+    },
+    /**
+     * 编辑历史：深拷贝 schema（剥离运行时 _schemaNode 自引用）。
+     */
+    cloneSchema(schema) {
+      if (!schema) return null
+      return JSON.parse(JSON.stringify(schema, (k, v) => (k === '_schemaNode' ? undefined : v)))
+    },
+    /**
+     * 归一化用于结构比较：忽略由数据绑定推导写入的 dictionary.inputParams[].defaultValue
+     * （这部分是数据绑定镜像，非结构性编辑，不应触发快照）。
+     */
+    normalizeForCompare(schema) {
+      const clone = this.cloneSchema(schema)
+      if (clone && clone.dictionary && Array.isArray(clone.dictionary.inputParams)) {
+        for (const p of clone.dictionary.inputParams) {
+          if (p && typeof p === 'object') p.defaultValue = undefined
+        }
+      }
+      return clone
+    },
+    /** 结构性相等（忽略数据绑定 defaultValue 噪声） */
+    structuralEqual(a, b) {
+      if (!a || !b) return a === b
+      return JSON.stringify(this.normalizeForCompare(a)) === JSON.stringify(this.normalizeForCompare(b))
+    },
+    /** 深拷贝数据绑定（rt.rootScope）；同样剥离运行时 _schemaNode，避免自引用 */
+    cloneData(data) {
+      if (data == null) return data
+      return JSON.parse(JSON.stringify(data, (k, v) => (k === '_schemaNode' ? undefined : v)))
+    },
+    /** 数据绑定（rt.rootScope）深层相等：用于判断绑定编辑是否产生了新快照 */
+    dataEqual(a, b) {
+      return JSON.stringify(a) === JSON.stringify(b)
+    },
+    /**
+     * 把历史快照（某一旧版本 { schema }）应用回当前编辑态：替换 currentSchema 与数据绑定，
+     * 重建预览/模型视图，但不产生新的历史记录（撤销/重做本身是导航，不是新修改）。
+     * 数据绑定由 buildDataFromSchema(schema) 从快照的 schema（含 defaultValue 镜像）重建，
+     * 还原后再 syncDataToSchema，保证 schema.dictionary.inputParams.defaultValue 与新数据绑定一致。
+     */
+    applySchemaSnapshot(snapshot) {
+      const id = this.selectedId
+      if (!id || !snapshot) return
+      const schema = snapshot.schema || snapshot
+      // 快照只存 schema；数据绑定由其派生。若老快照带 data 则优先沿用（历史兼容）。
+      const data = snapshot.data != null ? snapshot.data : buildDataFromSchema(schema)
+      this.currentSchema = this.cloneSchema(schema)
+      this.rt.setRootScope(this.cloneData(data))
+      this.preview = buildPreview(this.currentSchema)
+      if (typeof window !== 'undefined') window.__cardModel = buildModelView(this.currentSchema)
+      this.syncDataToSchema()
+      this.selectedNodeId = ''
+      this.reloadToken += 1
+      this.refreshValidateBadge()
+    },
+    /** 提交一次编辑：与 baseline（仅 schema）比较，schema 结构或数据绑定任一变化即算改动，
+     *  把「上一版本(baseline)」压入 past 并落盘（仅 schema），清空重做栈。
+     *  数据绑定比较用 buildDataFromSchema(baseline.schema) 派生，与 baseline 记录时一致。 */
+    commitHistory() {
+      if (!this.currentSchema || !this.baseline) return
+      const sameSchema = this.structuralEqual(this.currentSchema, this.baseline.schema)
+      const sameData = this.dataEqual(this.rt.rootScope, buildDataFromSchema(this.baseline.schema))
+      if (sameSchema && sameData) return
+      const previous = { schema: this.baseline.schema }
+      this.past.push(previous)
+      if (this.past.length > 30) this.past.shift()
+      this.future = []
+      this.baseline = { schema: this.cloneSchema(this.currentSchema) }
+      // 落盘：把「上一版本」写入卡片同目录 .history/（最多 30 个，由服务端裁剪）
+      this.persistSnapshot(previous)
+    },
+    /** 编辑落定防抖：连续编辑（如连续改属性）合并为一次快照 */
+    scheduleCommit() {
+      if (this._commitTimer) clearTimeout(this._commitTimer)
+      this._commitTimer = setTimeout(() => {
+        this._commitTimer = null
+        this.commitHistory()
+      }, 500)
+    },
+    /** 把上一版本 { schema } 落盘到 .history/（fire-and-forget，失败仅告警；data 由服务端从 schema 派生） */
+    persistSnapshot(snapshot) {
+      const id = this.selectedId
+      if (!id) return
+      const schema = snapshot.schema || snapshot
+      apiFetch(`/__history/${encodeURIComponent(id)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ schema }, (k, v) => (k === '_schemaNode' ? undefined : v), 2),
+      }).catch((e) => console.warn('[历史快照落盘失败]', e))
+    },
+    /** 载入指定卡片的编辑历史（从 .history/ 读取，旧→新），用于页面重载后重建撤销栈 */
+    async loadHistory(id) {
+      this.past = []
+      this.future = []
+      try {
+        const res = await apiFetch(`/__history/${encodeURIComponent(id)}`)
+        if (!res.ok) return
+        const r = await res.json().catch(() => null)
+        const snaps = (r && r.snapshots) || []
+        // 取末尾最多 30 个作为可回退的上一版本（最新在末尾；仅 schema，data 由 schema 派生）
+        this.past = snaps.slice(-30).map((s) => ({
+          schema: s.schema,
+          data: s.data != null ? s.data : buildDataFromSchema(s.schema),
+        }))
+      } catch (e) {
+        console.warn('[加载编辑历史失败]', e)
+      }
+    },
+    /** 后退一步（撤销）：弹出最近一次编辑前的版本并应用 */
+    undo() {
+      if (!this.canUndo) return
+      const prev = this.past.pop()
+      this.future.push(this.baseline)
+      if (this.future.length > 30) this.future.shift()
+      this.baseline = prev
+      this.applySchemaSnapshot(prev)
+    },
+    /** 前进一步（重做）：重放被撤销的版本 */
+    redo() {
+      if (!this.canRedo) return
+      const next = this.future.pop()
+      this.past.push(this.baseline)
+      if (this.past.length > 30) this.past.shift()
+      this.baseline = next
+      this.applySchemaSnapshot(next)
+    },
+    /**
+     * 顶栏「保存到本地」：把当前显示的历史版本（撤销/重做导航到的版本，或编辑后未保存的版本）
+     * 真正写回本地磁盘（src/cards/<id>/schema.json + data.json）。写盘成功后 saveCard 会刷新
+     * 本地基线，使按钮在「当前版本 == 本地版本」时自动置灰；下一次重新打开即加载该真实版本，
+     * 而非任意历史记录。
+     */
+    async applyHistoryToLocal() {
+      // 切卡/载入进行中：currentSchema 仍是上一卡、selectedId 已是新卡，拦截以免把上一卡误写进新卡文件
+      if (this.loadingCard) return
+      if (!this.historyDirty || !this.preview || !this.selectedId) return
+      const ok = await this.saveCard()
+      if (ok) showAppToast('已将该版本保存到本地', 'ok')
+    },
+    /**
+     * schema 被事件编辑器修改后，用内存中已编辑（事件编辑器直接改了 currentSchema 对象）
+     * 的版本重建预览，不回读磁盘以免丢失编辑。强制重挂载以重跑 init 生命周期。
+     */
+    /** 实时编辑（属性/事件/数据绑定）重建预览：仅刷新预览，不写历史。
+     *  历史由「应用」按钮（onSchemaCommit）落定写入。 */
+    onSchemaChanged() {
+      const id = this.selectedId
+      if (!id || !this.currentSchema) return
+      this.reloadToken += 1
+      this.preview = buildPreview(this.currentSchema)
+      if (typeof window !== 'undefined') window.__cardModel = buildModelView(this.currentSchema)
+      this.syncDataToSchema()
+      this.selectedNodeId = ''
+    },
+    /** 「应用」按钮：以最新编辑重建预览，并写入一次历史（生成一条撤销记录）。
+     *  区别于 onSchemaChanged：这里落定历史，实时编辑路径不写历史。 */
+    onSchemaCommit() {
+      const id = this.selectedId
+      if (!id || !this.currentSchema) return
+      this.reloadToken += 1
+      this.preview = buildPreview(this.currentSchema)
+      if (typeof window !== 'undefined') window.__cardModel = buildModelView(this.currentSchema)
+      this.syncDataToSchema()
+      this.selectedNodeId = ''
+      this.commitHistory()
+    },
+    /**
+     * 把数据绑定（rt.rootScope，即 data.json）的编辑实时同步回 schema 的
+     * 权威数据位置：schema.dictionary.inputParams[i].defaultValue。
+     * 这样「本地保存」时 schema.json 与 data.json 都携带最新数据绑定，
+     * 二者同时生效、不会互相覆盖（data.json 本身即由 inputParams.defaultValue 派生）。
+     */
+    syncDataToSchema() {
+      const schema = this.currentSchema
+      if (!schema || !schema.dictionary || !Array.isArray(schema.dictionary.inputParams)) return
+      const root = this.rt && this.rt.rootScope
+      if (!root || typeof root !== 'object') return
+      const params = schema.dictionary.inputParams
+      for (const key of Object.keys(root)) {
+        const param = params.find((p) => p && (p.key === key || p.name === key))
+        if (!param) continue
+        // 深拷贝，避免数据绑定与 schema 共享同一引用（setRootScope 重建后会失联）
+        param.defaultValue = JSON.parse(
+          JSON.stringify(root[key], (k, v) => (k === '_schemaNode' ? undefined : v))
+        )
+      }
+    },
+    /** 结构树选中节点 */
+    onSelectNode(id) {
+      this.selectedNodeId = id || ''
+    },
+    /**
+     * 在预览树（preview.view）中按运行时 id 递归查找对应节点。
+     * @param {Object} view 预览树根（或任意子树入口）
+     * @param {string} id 目标节点的运行时 id（即 selectedNodeId 的取值）
+     * @returns {Object|null}
+     */
+    findPreviewNodeById(view, id) {
+      if (!view || id == null) return null
+      const key = String(id)
+      const walk = (node) => {
+        if (!node) return null
+        if (String(node.id) === key) return node
+        const kids = []
+        if (node.components) kids.push(...node.components)
+        if (node.slots) for (const s of node.slots) if (s.components) kids.push(...s.components)
+        for (const k of kids) {
+          const r = walk(k)
+          if (r) return r
+        }
+        return null
+      }
+      return walk(view)
+    },
+    /**
+     * 复制选中节点：把其在 schema 树中的子树深拷贝进剪贴板（含子节点）。
+     * 根节点或空选区不处理。
+     */
+    copySelectedNode() {
+      const id = this.selectedNodeId
+      if (!id || id === '_root' || !this.currentSchema || !this.preview) return
+      const vn = this.findPreviewNodeById(this.preview.view, id)
+      if (!vn) return
+      const loc = this.findSchemaNodeByComponentId(this.currentSchema.view, vn.componentId)
+      if (!loc) return
+      // 记录来源卡片 id，供跨卡片粘贴标注与兼容性校验
+      setClipboardNode(loc.node, this.selectedId)
+      showAppToast('已复制节点（含子节点）', 'ok')
+    },
+    /**
+     * 粘贴剪贴板节点到当前选区：
+     *  - 选区为容器 → 追加到其默认插槽末尾（作为子节点）；
+     *  - 选区为非容器 → 作为其后兄弟（同级相邻），禁止再把复制的节点插入为非容器的子节点；
+     *  - 选区为空或根 → 追加到根组件列表末尾。
+     * 重复粘贴互不干扰（每次都重新克隆 + 重新生成 componentId）。
+     */
+    pasteNode() {
+      const clip = getClipboardNode()
+      if (!clip || !this.currentSchema) return
+      // 跨卡片兼容性校验：克隆子树引用的组件类型必须在本编辑器组件注册表中存在，
+      // 否则粘贴到目标卡片会因找不到组件而渲染异常。未知类型直接阻断并提示。
+      const classNames = collectClassNames(clip)
+      const unknown = [...new Set(classNames.filter((c) => !COMPONENT_META[c]))]
+      if (unknown.length) {
+        showAppToast('粘贴失败：含未知组件类型 ' + unknown.join('、'), 'err')
+        return
+      }
+      const clone = JSON.parse(
+        JSON.stringify(clip, (k, v) => (k === '_schemaNode' ? undefined : v)),
+      )
+      regenerateComponentIds(clone)
+      const anchor =
+        this.selectedNodeId && this.selectedNodeId !== '_root'
+          ? this.findPreviewNodeById(this.preview.view, this.selectedNodeId)
+          : null
+      let position = 'root'
+      // 显式约束：非容器节点禁止作为「粘贴为子节点」的目标——只有容器锚点才允许 'into'，
+      // 非容器锚点一律降级为 'after'（粘为紧随其后的同级兄弟），避免把节点误塞进不可承载子节点的节点内。
+      if (anchor) position = isContainerMeta(anchor.className) ? 'into' : 'after'
+      this.insertClone(clone, anchor, position)
+      // 粘贴成功提示：区分同卡副本与跨卡片粘贴，来源卡片 id 来自剪贴板记录
+      const src = getClipboardSourceCardId()
+      if (src && src !== this.selectedId) {
+        showAppToast(`已从卡片「${src}」跨卡片粘贴到「${this.selectedId}」`, 'ok')
+      } else {
+        showAppToast('已粘贴节点（含子节点）', 'ok')
+      }
+    },
+    /**
+     * 副本：把选中节点就地复制为一个新节点，插入到其原位置之后（兄弟）。
+     * 根节点或空选区不处理。
+     */
+    duplicateNode() {
+      const id = this.selectedNodeId
+      if (!id || id === '_root' || !this.currentSchema || !this.preview) return
+      const vn = this.findPreviewNodeById(this.preview.view, id)
+      if (!vn) return
+      const loc = this.findSchemaNodeByComponentId(this.currentSchema.view, vn.componentId)
+      if (!loc) return
+      const clone = JSON.parse(
+        JSON.stringify(loc.node, (k, v) => (k === '_schemaNode' ? undefined : v)),
+      )
+      regenerateComponentIds(clone)
+      loc.parentArr.splice(loc.index + 1, 0, clone)
+      this.afterStructuralEdit(clone.componentId)
+    },
+    /**
+     * 把已生成的 schema 克隆节点插入指定位置并重建预览/选中/历史。
+     * @param {Object} clone 已重新生成 componentId 的 schema 节点
+     * @param {Object|null} anchor 锚点预览节点（null 表示根）
+     * @param {'root'|'into'|'after'} position 插入位置
+     */
+    insertClone(clone, anchor, position) {
+      const schema = this.currentSchema
+      if (position === 'root') {
+        if (!schema.view.components) schema.view.components = []
+        schema.view.components.push(clone)
+      } else if (position === 'into') {
+        const tgt = anchor && anchor._schemaNode
+        if (!tgt) {
+          if (!schema.view.components) schema.view.components = []
+          schema.view.components.push(clone)
+          this.afterStructuralEdit(clone.componentId)
+          return
+        }
+        const slotKey = getDefaultSlotKey(anchor.className)
+        let slot = (tgt.slots || []).find((s) => s.slotKey === slotKey)
+        if (!slot) {
+          if (!tgt.slots) tgt.slots = []
+          slot = { slotKey, slotScope: false, slotSwitch: '1', components: [] }
+          tgt.slots.push(slot)
+        }
+        if (!slot.components) slot.components = []
+        slot.components.push(clone)
+      } else {
+        // after：作为锚点的同父兄弟，插入其后
+        const loc = this.findSchemaNodeByComponentId(schema.view, anchor.componentId)
+        if (!loc) {
+          if (!schema.view.components) schema.view.components = []
+          schema.view.components.push(clone)
+        } else {
+          loc.parentArr.splice(loc.index + 1, 0, clone)
+        }
+      }
+      this.afterStructuralEdit(clone.componentId)
+    },
+    /**
+     * 结构性编辑（增/删/移动/粘贴/副本）后的统一收尾：
+     * 重建预览 → 暴露模型 → 同步数据绑定 → 选中新节点 → 落定历史。
+     * @param {string} [selectComponentId] 编辑后需选中的节点 componentId
+     */
+    afterStructuralEdit(selectComponentId) {
+      const schema = this.currentSchema
+      this.reloadToken += 1
+      this.preview = buildPreview(schema)
+      if (typeof window !== 'undefined') window.__cardModel = buildModelView(schema)
+      this.syncDataToSchema()
+      this.selectedNodeId = selectComponentId
+        ? this.findViewIdByComponentId(this.preview.view, selectComponentId) || ''
+        : ''
+      this.scheduleCommit()
+    },
+    /** 删除选中节点（非根）：从 schema 树移除并重建；可撤销。 */
+    deleteSelectedNode() {
+      const id = this.selectedNodeId
+      if (!id || id === '_root' || !this.currentSchema || !this.preview) return
+      const vn = this.findPreviewNodeById(this.preview.view, id)
+      if (!vn) return
+      const loc = this.findSchemaNodeByComponentId(this.currentSchema.view, vn.componentId)
+      if (!loc) return
+      loc.parentArr.splice(loc.index, 1)
+      this.reloadToken += 1
+      this.preview = buildPreview(this.currentSchema)
+      if (typeof window !== 'undefined') window.__cardModel = buildModelView(this.currentSchema)
+      this.syncDataToSchema()
+      this.selectedNodeId = ''
+      clearHoverEl()
+      this.scheduleCommit()
+    },
+    /** 判断按键事件焦点是否在可编辑元素内（输入框/文本域/可选文本），此时不劫持快捷键 */
+    isEditableTarget(e) {
+      const t = e.target
+      if (!t) return false
+      const tag = t.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true
+      if (t.isContentEditable) return true
+      return false
+    },
+    /**
+     * 全局键盘快捷键（编辑器标配）：
+     *  Ctrl/⌘+C 复制节点 · Ctrl/⌘+V 粘贴 · Ctrl/⌘+D 副本 · Delete/Backspace 删除 ·
+     *  Ctrl/⌘+Z 撤销 · Ctrl/⌘+Shift+Z / Ctrl+Y 重做 · Esc 取消选中。
+     * 焦点在输入框/JSON 编辑器等可编辑元素内时，仅放行 Esc，其余交还原生行为
+     * （避免误删节点或劫持文本撤销/复制）。
+     */
+    onKeydown(e) {
+      if (this.chromeOff || !this.preview) return
+      const editable = this.isEditableTarget(e)
+      const ctrl = e.ctrlKey || e.metaKey
+      const k = e.key
+
+      if (ctrl && (k === 'c' || k === 'C')) {
+        if (editable) return
+        this.copySelectedNode()
+        e.preventDefault()
+        return
+      }
+      if (ctrl && (k === 'v' || k === 'V')) {
+        if (editable) return
+        this.pasteNode()
+        e.preventDefault()
+        return
+      }
+      if (ctrl && (k === 'd' || k === 'D')) {
+        if (editable) return
+        this.duplicateNode()
+        e.preventDefault()
+        return
+      }
+      if (ctrl && (k === 'z' || k === 'Z')) {
+        if (editable) return
+        e.preventDefault()
+        if (e.shiftKey) this.redo()
+        else this.undo()
+        return
+      }
+      if (ctrl && (k === 'y' || k === 'Y')) {
+        if (editable) return
+        e.preventDefault()
+        this.redo()
+        return
+      }
+      if (k === 'Delete' || k === 'Backspace') {
+        if (editable) return
+        if (!this.selectedNodeId || this.selectedNodeId === '_root') return
+        e.preventDefault()
+        this.deleteSelectedNode()
+        return
+      }
+      if (k === 'Escape') {
+        if (this.selectedNodeId) {
+          this.selectedNodeId = ''
+          e.preventDefault()
+        }
+        return
+      }
+    },
+    /**
+     * 结构树节点 hover：把对应节点（componentId / id）解析为画布 DOM 元素，
+     * 驱动参考线框出该元素；鼠标移出节点区域（payload 为 null）则清除参考线。
+     * 解析依据：RenderTree 在组件根元素挂载 data-cid = node.componentId || node.id，
+     * 与结构树节点组件标识一致，故按 data-cid 反查即可定位画布元素。
+     * @param {{componentId:*, id:*}|null} payload
+     */
+    onHoverNode(payload) {
+      if (!payload) { clearHoverEl(); return }
+      // 离开事件：仅当离开的正是当前高亮节点时才清除（防止「进入 B 后再离开 A」的竞态误清）
+      if (payload.leave) { clearHoverEl(payload.id); return }
+      const screen = typeof document !== 'undefined' ? document.querySelector('.phone__screen') : null
+      if (!screen) { clearHoverEl(payload.id); return }
+      const esc = (v) => (window.CSS && CSS.escape) ? CSS.escape(String(v)) : String(v).replace(/["\\\]]/g, '\\$&')
+      let el = null
+      if (payload.componentId != null) el = screen.querySelector('[data-cid="' + esc(payload.componentId) + '"]')
+      if (!el && payload.id != null) el = screen.querySelector('[data-cid="' + esc(payload.id) + '"]')
+      if (el) setHoverEl(el, payload.id)
+      else clearHoverEl(payload.id)
+    },
+    /**
+     * 画布点击定位：仅当「组件结构」tab 激活且按住 Ctrl(Windows/Linux) 或 ⌘Cmd(macOS) 时生效。
+     * 取点击位置最内层组件根元素（[data-cid]），把其 componentId 解析回预览树节点，
+     * 写入 selectedNodeId（复用现有选中机制：高亮 + 结构树展开祖先 + 滚动可见）。
+     * 普通点击保持原行为不变（不干涉卡片自身运行期 click 事件）。
+     * @param {MouseEvent} e
+     */
+    onCanvasClick(e) {
+      if (!e.ctrlKey && !e.metaKey) return
+      if (this.chromeOff) return
+      const el = e.target && e.target.closest ? e.target.closest('[data-cid]') : null
+      if (!el) return
+      const cid = el.getAttribute('data-cid')
+      if (!cid) return
+      const node = this.findPreviewNodeByCid(cid)
+      if (!node) return
+      // 自动切到「组件结构」tab，并在节点树中聚焦选中该节点。
+      // 结构树挂载后会对 selectedNodeId 变化展开祖先并滚动可见；
+      // 当前不在结构树 tab 时，结构树是首次挂载即带选中态，故其
+      // selectedNodeId 监听器设为 immediate，挂载即 ensureVisible。
+      this.activeTab = 'structure'
+      this.selectedNodeId = node.id
+    },
+    /**
+     * 在预览树（preview.view）中按 componentId（回退 id）递归查找对应节点。
+     * @param {string} cid
+     * @returns {Object|null}
+     */
+    findPreviewNodeByCid(cid) {
+      const view = this.preview && this.preview.view
+      if (!view) return null
+      const key = String(cid)
+      const walk = (node) => {
+        if (!node) return null
+        const nodeCid = String(node.componentId != null ? node.componentId : node.id)
+        if (nodeCid === key) return node
+        const kids = []
+        if (node.components) kids.push(...node.components)
+        if (node.slots) for (const s of node.slots) if (s.components) kids.push(...s.components)
+        for (const k of kids) {
+          const r = walk(k)
+          if (r) return r
+        }
+        return null
+      }
+      return walk(view)
+    },
+    /**
+     * 结构树发起「添加」：打开组件选择面板，并记录插入锚点与模式。
+     * @param {{node:Object|null, mode:string}} payload
+     *   node 为右键/选中的 viewNode（className 'Root' 或组件；null 视作根）；
+     *   mode ∈ 'child' | 'before' | 'after' | 'auto'，决定 onPickComponent 的落位规则。
+     */
+    onAddNode(payload) {
+      if (!this.currentSchema) return
+      this.addNodeTarget = payload || null
+      this.addNodePanelOpen = true
+    },
+    /** 关闭组件选择面板（取消添加） */
+    cancelAddNode() {
+      this.addNodePanelOpen = false
+      this.addNodeTarget = null
+    },
+    /**
+     * 在 schema 树中定位某节点所在的容器数组与下标（用于非容器节点的"插入兄弟"）。
+     * @returns {{containerArr:Array, index:number}|null}
+     */
+    findSchemaLocation(node, needle) {
+      const search = (containerArr) => {
+        for (let i = 0; i < containerArr.length; i++) {
+          const c = containerArr[i]
+          if (c === needle) return { containerArr, index: i }
+          const slots = c.slots || []
+          for (const s of slots) {
+            const r = search(s.components || [])
+            if (r) return r
+          }
+        }
+        return null
+      }
+      return search((node && node.components) || [])
+    },
+    /** 在预览树中按 componentId 找到对应 viewNode 的运行时 id（选中键） */
+    findViewIdByComponentId(viewNode, componentId) {
+      if (!viewNode) return null
+      if (viewNode.componentId === componentId) return viewNode.id
+      const kids = []
+      if (viewNode.components) kids.push(...viewNode.components)
+      if (viewNode.slots) for (const s of viewNode.slots) if (s.components) kids.push(...s.components)
+      for (const k of kids) {
+        const r = this.findViewIdByComponentId(k, componentId)
+        if (r) return r
+      }
+      return null
+    },
+    /** 在 schema 树中按 componentId 定位节点，返回 {node, parentArr, index, owner}（owner 为父节点或 'root'） */
+    findSchemaNodeByComponentId(view, compId) {
+      const search = (arr, owner) => {
+        for (let i = 0; i < arr.length; i++) {
+          const c = arr[i]
+          if (c.componentId === compId) return { node: c, parentArr: arr, index: i, owner }
+          const slots = c.slots || []
+          for (const s of slots) {
+            const r = search(s.components || [], c)
+            if (r) return r
+          }
+        }
+        return null
+      }
+      return search((view && view.components) || [], 'root')
+    },
+    /** compId 是否位于 node 子树内（防环：禁止把节点拖入自身或其后代） */
+    isDescendantCompId(compId, node) {
+      if (!node || !node.componentId) return false
+      if (node.componentId === compId) return true
+      const kids = []
+      if (node.components) kids.push(...node.components)
+      if (node.slots) for (const s of node.slots) if (s.components) kids.push(...s.components)
+      for (const k of kids) if (this.isDescendantCompId(compId, k)) return true
+      return false
+    },
+    /**
+     * 结构性移动：把 sourceCompId 节点移动到 targetCompId 的相对位置。
+     * @param {string} position 'before' | 'after' | 'inside'
+     * @returns {Object|false} 被移动的 schema 节点；非法移动返回 false
+     */
+    moveNode(sourceCompId, targetCompId, position) {
+      const schema = this.currentSchema
+      if (!schema || !schema.view) return false
+      if (sourceCompId === targetCompId) return false
+      const src = this.findSchemaNodeByComponentId(schema.view, sourceCompId)
+      if (!src) return false
+      const sourceNode = src.node
+      // 防环：目标不能是源自身或其后代
+      if (this.isDescendantCompId(targetCompId, sourceNode)) return false
+
+      let destArr
+      let insertIndex
+      if (targetCompId === '__root__') {
+        if (!schema.view.components) schema.view.components = []
+        destArr = schema.view.components
+        insertIndex = destArr.length
+      } else {
+        const tgt = this.findSchemaNodeByComponentId(schema.view, targetCompId)
+        if (!tgt) return false
+        const targetNode = tgt.node
+        if (position === 'inside') {
+          if (!isContainerMeta(targetNode.className)) return false
+          const slotKey = getDefaultSlotKey(targetNode.className)
+          let slot = (targetNode.slots || []).find((s) => s.slotKey === slotKey)
+          if (!slot) {
+            if (!targetNode.slots) targetNode.slots = []
+            slot = { slotKey, slotScope: false, slotSwitch: '1', components: [] }
+            targetNode.slots.push(slot)
+          }
+          if (!slot.components) slot.components = []
+          destArr = slot.components
+          insertIndex = destArr.length
+        } else {
+          destArr = tgt.parentArr
+          insertIndex = position === 'before' ? tgt.index : tgt.index + 1
+        }
+      }
+
+      // 从原父数组移除（记录是否在同一数组且位于插入点之前，用于修正下标）
+      const sameArr = destArr === src.parentArr
+      const removeBefore = sameArr && src.index < insertIndex
+      src.parentArr.splice(src.index, 1)
+      if (removeBefore) insertIndex -= 1
+      destArr.splice(insertIndex, 0, sourceNode)
+      return sourceNode
+    },
+    /** 结构树拖拽移动：改写 currentSchema → 重建预览 → 选中移动后的节点。
+     *  按需求：拖拽仅实时预览（不在此提交历史），历史由后续「应用/保存到本地」落定。 */
+    onMoveNode({ sourceCompId, targetCompId, position }) {
+      if (!this.currentSchema) return
+      const moved = this.moveNode(sourceCompId, targetCompId, position)
+      if (!moved) return
+      this.reloadToken += 1
+      this.preview = buildPreview(this.currentSchema)
+      if (typeof window !== 'undefined') window.__cardModel = buildModelView(this.currentSchema)
+      this.syncDataToSchema()
+      const newId = this.findViewIdByComponentId(this.preview.view, sourceCompId)
+      this.selectedNodeId = newId || ''
+      // 仅当移动成功且能定位到新节点时才触发「折叠其他、仅展开祖先」行为
+      if (newId) this.moveCollapseToken += 1
+    },
+    /**
+     * 从组件选择面板选定类型后，按插入规则把新节点写进 currentSchema，再重建预览并选中新节点。
+     * 规则：
+     *  - 锚点为根（或未指定）→ 追加到 view.components 末尾；
+     *  - 锚点为容器节点 → 追加到其默认插槽 children 末尾（插槽缺失时依 meta 建立）；
+     *  - 锚点为非容器节点 → 在同父级、该节点之后插入兄弟节点；
+     *    找不到父级时兜底追加到根。
+     */
+    onPickComponent(className) {
+      const payload = this.addNodeTarget || {}
+      const targetNode = payload.node || null
+      const mode = payload.mode || 'auto'
+      const schema = this.currentSchema
+      if (!schema) {
+        this.cancelAddNode()
+        return
+      }
+      let newNode
+      try {
+        newNode = createComponentNode(className)
+      } catch (e) {
+        console.error('[创建组件节点失败]', e)
+        this.rt.pushError('addNode', String(e && e.message))
+        this.cancelAddNode()
+        return
+      }
+
+      const targetIsRoot = !targetNode || targetNode.className === 'Root'
+      if ((mode === 'before' || mode === 'after') && !targetIsRoot) {
+        // 相邻兄弟插入：在非根节点所在的容器数组内，按 'before'/'after' 相对位置落位
+        const targetSchema = targetNode._schemaNode
+        const loc = targetSchema ? this.findSchemaLocation(schema.view, targetSchema) : null
+        if (!loc) {
+          // 兜底：找不到父数组则追加到根末尾
+          if (!schema.view.components) schema.view.components = []
+          schema.view.components.push(newNode)
+        } else {
+          const idx = mode === 'before' ? loc.index : loc.index + 1
+          loc.containerArr.splice(idx, 0, newNode)
+        }
+      } else if (targetIsRoot) {
+        // 根：添加子节点（'child'）或 'auto' → 追加到 view.components 末尾
+        if (!schema.view.components) schema.view.components = []
+        schema.view.components.push(newNode)
+      } else {
+        // 'child' / 'auto' 且非根：容器 → 默认插槽末尾；非容器 → 其后兄弟
+        const targetSchema = targetNode._schemaNode
+        if (!targetSchema) {
+          this.cancelAddNode()
+          return
+        }
+        if (isContainerMeta(targetNode.className)) {
+          const slotKey = getDefaultSlotKey(targetNode.className)
+          let slot = (targetSchema.slots || []).find((s) => s.slotKey === slotKey)
+          if (!slot) {
+            if (!targetSchema.slots) targetSchema.slots = []
+            slot = { slotKey, slotScope: false, slotSwitch: '1', components: [] }
+            targetSchema.slots.push(slot)
+          }
+          if (!slot.components) slot.components = []
+          slot.components.push(newNode)
+        } else {
+          const loc = this.findSchemaLocation(schema.view, targetSchema)
+          if (!loc) {
+            if (!schema.view.components) schema.view.components = []
+            schema.view.components.push(newNode)
+          } else {
+            loc.containerArr.splice(loc.index + 1, 0, newNode)
+          }
+        }
+      }
+
+      this.cancelAddNode()
+      // 重建预览并选中新节点（与 onSchemaChanged 同款重建路径）
+      this.reloadToken += 1
+      this.preview = buildPreview(schema)
+      if (typeof window !== 'undefined') window.__cardModel = buildModelView(schema)
+      this.syncDataToSchema()
+      const newId = this.findViewIdByComponentId(this.preview.view, newNode.componentId)
+      this.selectedNodeId = newId || ''
+      // 结构性编辑落定后提交一次历史记录（防抖合并连续编辑）
+      this.scheduleCommit()
+    },
+    /** 复制 schema（合并数据绑定编辑后的数据：写入 dictionary.inputParams.defaultValue，并保留顶层 .data） */
+    async copySchema() {
+      if (!this.currentSchema) return
+      // 确保数据绑定已同步进 schema（实时 watcher 之外再加一道保险，避免编辑后立刻复制时落空）
+      this.syncDataToSchema()
+      let text = ''
+      try {
+        const merged = { ...this.currentSchema }
+        if (this.rt && this.rt.rootScope) {
+          merged.data = this.rt.rootScope
+        }
+        // 过滤掉 _schemaNode 引用（不可序列化）
+        text = JSON.stringify(merged, (key, val) => {
+          if (key === '_schemaNode') return undefined
+          return val
+        }, 2)
+      } catch (e) {
+        text = '(无法序列化)'
+      }
+      const ok = await this.doCopy(text)
+      if (ok) {
+        this.copiedSchema = true
+        if (this.copyTimer) clearTimeout(this.copyTimer)
+        this.copyTimer = setTimeout(() => { this.copiedSchema = false }, 1500)
+      }
+    },
+    async doCopy(text) {
+      try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          await navigator.clipboard.writeText(text)
+          return true
+        }
+      } catch (e) { /* fallback */ }
+      try {
+        const ta = document.createElement('textarea')
+        ta.value = text
+        ta.style.position = 'fixed'
+        ta.style.opacity = '0'
+        document.body.appendChild(ta)
+        ta.select()
+        const ok = document.execCommand('copy')
+        document.body.removeChild(ta)
+        return ok
+      } catch (e) {
+        return false
+      }
+    },
+    /**
+     * 从 FinMall UAT 拉取卡片最新 schema/封面并写回 src/cards。
+     * 经 dev-server 的 /__sync 端点触发（端点内部复用 finmall-card-sync 的 syncCards，
+     * 通过 connectOverCDP 连用户已开的 Chrome，在已登录的 FinMall 页内发起 API 请求）。
+     * 纯前端无法直接调 FinMall：跨域 + 无 token，故必须经此中转。
+     * @param {string} [cardCode] 传值时仅同步该卡；不传则拉取完整远程卡片列表逐张覆盖本地（全量同步）。
+     */
+    async runSync(cardCode) {
+      if (this.syncingRemote) return
+      if (cardCode && !this.selectedId) return
+      this.syncingRemote = true
+      this.syncedRemote = false
+      this.syncTarget = cardCode ? 'selected' : 'full'
+      try {
+        const res = await apiFetch('/__sync', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(cardCode ? { cardCode } : {}),
+        })
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}))
+          throw new Error(err.message || err.error || 'HTTP ' + res.status)
+        }
+        const r = await res.json()
+        if (r.needCredentials) {
+          // 凭据缺失：弹出登录表单，由用户填写账号密码后自动重试同步
+          this.openLoginModal()
+          return
+        }
+        if (!r.success) {
+          const detail = (r.failed || []).map((f) => `${f.id}: ${f.error}`).join('; ')
+          throw new Error(detail || '同步失败')
+        }
+        this.syncedRemote = true
+        if (this.syncTimer) clearTimeout(this.syncTimer)
+        this.syncTimer = setTimeout(() => { this.syncedRemote = false; this.syncTarget = null }, 1800)
+        // 把刚拉取的最新卡片载入预览
+        await this.onRefresh()
+        // 操作完成提示：全量 / 选中卡片区分文案
+        showAppToast(this.syncTarget === 'selected' ? '已同步当前卡片到本地' : '全量同步完成', 'ok')
+      } catch (e) {
+        console.error('[同步远程数据失败]', e)
+        // 远端操作接口报错：仅弹出错误提示，不写入事件/绑定错误记录（避免污染事件面板）
+        showAppToast('同步失败：' + (e && e.message), 'err')
+      } finally {
+        this.syncingRemote = false
+      }
+    },
+    /** 全量同步：拉取完整远程卡片列表，逐张覆盖本地同名卡片（本地独有卡片保留）。 */
+    syncRemote() {
+      return this.runSync()
+    },
+    /** 仅同步当前选中卡片。 */
+    syncSelected() {
+      return this.runSync(this.selectedId)
+    },
+    /** 打开 FinMall 登录凭据弹窗（远程同步检测到缺凭据时调用） */
+    openLoginModal() {
+      this.loginModal = true
+      this.loginName = ''
+      this.loginPassword = ''
+      this.loginError = ''
+    },
+    /** 关闭登录凭据弹窗（提交中不可关闭） */
+    closeLoginModal() {
+      if (this.loginSubmitting) return
+      this.loginModal = false
+      this.loginPassword = ''
+      this.loginError = ''
+    },
+    /** 提交账号密码：写入本地凭据后，自动重试上一次同步 */
+    async submitLogin() {
+      if (this.loginSubmitting) return
+      const loginName = this.loginName.trim()
+      const loginPassword = this.loginPassword
+      if (!loginName || !loginPassword) {
+        this.loginError = '账号与密码均不能为空'
+        return
+      }
+      this.loginSubmitting = true
+      this.loginError = ''
+      try {
+        const res = await apiFetch('/__login-credentials', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ loginName, loginPassword }),
+        })
+        const r = await res.json().catch(() => ({}))
+        if (!res.ok || !r.ok) {
+          throw new Error(r.message || r.error || 'HTTP ' + res.status)
+        }
+        this.loginModal = false
+        this.loginPassword = ''
+        showAppToast('凭据已保存，正在重试同步…', 'ok')
+        // 沿用上一次同步模式自动重试
+        await this.runSync(this.syncTarget === 'selected' ? this.selectedId : undefined)
+      } catch (e) {
+        this.loginError = '保存失败：' + (e && e.message)
+      } finally {
+        this.loginSubmitting = false
+      }
+    },
+    /** 下拉菜单选中某项：执行对应同步（先二次确认） */
+    chooseSync(target) {
+      if (target === 'full') {
+        if (this.syncingRemote) return
+        this.requestConfirm({
+          title: '全量同步',
+          message: '即将从远端 FinMall 拉取完整卡片列表，并逐张覆盖本地同名卡片。本地独有卡片会保留，但被覆盖卡片的未保存改动将丢失，且无法撤销。是否继续？',
+          confirmText: '继续同步',
+          onConfirm: () => this.syncRemote(),
+        })
+        return
+      }
+      if (!this.preview || !this.selectedId || this.syncingRemote) return
+      this.requestConfirm({
+        title: '当前同步',
+        message: `即将从远端 FinMall 拉取当前卡片「${this.selectedId}」的最新版本并覆盖本地。本地未保存的改动将丢失，且无法撤销。是否继续？`,
+        confirmText: '继续同步',
+        onConfirm: () => this.syncSelected(),
+      })
+    },
+    /** 「远端」分组菜单项：保存到远端 / 远端预览（保存到远端先二次确认） */
+    chooseRsave(target) {
+      if (target === 'save') {
+        if (!this.preview || !this.selectedId || this.savingRemote || !this.hasCardSource) return
+        this.requestConfirm({
+          title: '版本推送',
+          message: `即将把本地卡片「${this.selectedId}」的当前版本推送并覆盖到远端 FinMall。线上版本会被立即更新，且该操作不可撤销。是否继续？`,
+          confirmText: '继续推送',
+          danger: true,
+          onConfirm: () => this.saveToRemote(),
+        })
+        return
+      }
+      if (!this.preview || !this.selectedId || !this.hasCardSource) return
+      this.remotePreviewOpen = true
+    },
+    /** 请求二次确认：统一在写/覆盖类操作前弹出，确认后执行 onConfirm 回调 */
+    requestConfirm({ title, message, confirmText, cancelText, danger, onConfirm }) {
+      this.confirm = {
+        show: true,
+        title,
+        message,
+        confirmText: confirmText || '继续',
+        cancelText: cancelText || '取消',
+        danger: !!danger,
+        onConfirm,
+      }
+    },
+    /** 确认弹窗点击「确认」：执行挂起的回调 */
+    onConfirmDialog() {
+      const cb = this.confirm.onConfirm
+      this.confirm.show = false
+      this.confirm.onConfirm = null
+      if (typeof cb === 'function') cb()
+    },
+    /** 确认弹窗点击「取消」或遮罩：丢弃挂起操作 */
+    onCancelDialog() {
+      this.confirm.show = false
+      this.confirm.onConfirm = null
+    },
+    /** 把预览内编辑后的最新数据绑定 + schema 写回 src/cards/<id>/（经 dev 中间件 POST） */
+    async saveCard() {
+      if (!this.preview || !this.selectedId) return
+      this.savingCard = true
+      const id = this.selectedId
+      // 标记本窗口即将落盘：吸收随后 watcher 经 SSE 推回的 cards-changed 回声，避免误弹外部重载提示。
+      // 落盘未成功时（catch）清除，以免误吞后续真正的外部改动。
+      this.selfSaveId = id
+      this.selfSaveAt = Date.now()
+      try {
+        // 保存前从磁盘校准元数据（pageId/name/desc 由远端/磁盘权威决定，内存编辑不修改它们），
+        // 取磁盘最新值覆盖内存，避免滞后于同步结果把真实 cardId 写回成旧值。
+        try {
+          const fresh = await this.fetchDiskCard(this.selectedId)
+          if (fresh && fresh.schema) {
+            const disk = fresh.schema
+            const mem = this.currentSchema
+            if (mem) {
+              if (disk.pageId) mem.pageId = disk.pageId
+              if (disk.name) mem.name = disk.name
+              if (disk.desc !== undefined) mem.desc = disk.desc
+            }
+          }
+        } catch { /* 磁盘读取失败不阻塞保存 */ }
+        // 保存前确保数据绑定已同步进 schema.dictionary.inputParams.defaultValue
+        this.syncDataToSchema()
+        // 只发 schema：服务端写 schema.json 后会用 buildDataFromSchema(schema) 单向重算
+        // data.json，data 永不随请求上传、也不作为写入来源。
+        const payload = {
+          schema: this.currentSchema,
+        }
+        const body = JSON.stringify(payload, (k, v) => (k === '_schemaNode' ? undefined : v), 2)
+        const res = await apiFetch(`/__card/${encodeURIComponent(this.selectedId)}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body,
+        })
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}))
+          throw new Error(err.message || 'HTTP ' + res.status)
+        }
+        // 写盘成功：更新内存工作副本，便于后续操作基于刚落盘的内容。磁盘变更也会经
+        // watcher 触发 onCardsChanged 重新载入，二者最终一致。
+        this.currentCard = { schema: payload.schema }
+        // 写盘成功后，当前显示版本即成为本地真实版本：刷新本地基线，使顶栏
+        // 「保存到本地」按钮在「当前版本 == 本地版本」时自动置灰。
+        this.localSchema = this.cloneSchema(this.currentSchema)
+        this.localData = this.cloneData(buildDataFromSchema(this.currentSchema))
+        this.savedCard = true
+        // 本地保存后磁盘已更新，刷新整卡校验徽标（端点读磁盘）
+        this.refreshValidateBadge()
+        if (this.saveTimer) clearTimeout(this.saveTimer)
+        this.saveTimer = setTimeout(() => { this.savedCard = false }, 1800)
+        return true
+      } catch (e) {
+        console.error('[本地保存失败]', e)
+        this.rt.pushError('saveCard', String(e && e.message))
+        // 落盘未成功：清除自保存标记，避免误吞后续真正的外部改动
+        this.selfSaveId = ''
+        this.selfSaveAt = 0
+        return false
+      } finally {
+        this.savingCard = false
+      }
+    },
+    /** 从磁盘读取指定卡片最新 schema/data（供保存前校准与刷新使用） */
+    async fetchDiskCard(id) {
+      const res = await apiFetch(`/__card/${encodeURIComponent(id)}`)
+      if (!res.ok) throw new Error('HTTP ' + res.status)
+      return res.json()
+    },
+    /**
+     * 拉取当前卡片的导入来源元数据（Phase E）：GET /__import-meta/:id。
+     * 本地新建卡无 .import-meta.json → 端点 404 → 置 null（顶栏「版本推送」据此置灰）。
+     * 与 DebugPanel「来源」tab 同源，但此处为顶栏按钮的响应式来源标志，覆盖每次切卡/同步刷新。
+     */
+    async fetchImportMeta(id) {
+      if (!id) { this.cardImportMeta = null; return }
+      try {
+        const res = await apiFetch(`/__import-meta/${encodeURIComponent(id)}`)
+        if (!res.ok) { this.cardImportMeta = null; return }
+        const r = await res.json().catch(() => ({}))
+        this.cardImportMeta = (r && r.meta) || null
+      } catch {
+        this.cardImportMeta = null
+      }
+    },
+    /**
+     * 把当前预览的卡片 schema 写回 FinMall 远端（线上编辑器「保存」接口 IDC10010.do）。
+     * 经 dev 中间件 /__save 触发：端点内部复用 finmall-card-sync 的 saveCardToRemote，
+     * 通过已登录的 FinMall 浏览器会话（与「同步」共用）中转 POST，body 含 cardId(=pageId) 与
+     * schemaValue（整张 schema 的 JSON 字符串）。纯前端无法直接调 FinMall（跨域 + 需 token），故须经此中转。
+     * 无自动保存——仅手动触发。
+     */
+    async saveToRemote() {
+      if (!this.preview || !this.selectedId || this.savingRemote) return
+      this.savingRemote = true
+      this.savedRemote = false
+      this.verifiedRemote = null
+      try {
+        // 保存前从磁盘校准 pageId：避免内存滞后于同步结果，把当前卡片误存到旧的远端 cardId。
+        try {
+          const fresh = await this.fetchDiskCard(this.selectedId)
+          if (fresh && fresh.schema && fresh.schema.pageId && this.currentSchema) {
+            this.currentSchema.pageId = fresh.schema.pageId
+          }
+        } catch { /* 磁盘读取失败不阻塞保存 */ }
+        // 保存前确保数据绑定已同步进 schema.dictionary.inputParams.defaultValue
+        this.syncDataToSchema()
+        // 标记本窗口即将落盘（saveCardToRemote 会写回 src/cards），吸收 watcher 推回的 cards-changed 回声
+        this.selfSaveId = this.selectedId
+        this.selfSaveAt = Date.now()
+        const res = await apiFetch('/__save', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(
+            { code: this.selectedId, schema: this.currentSchema },
+            (k, v) => (k === '_schemaNode' ? undefined : v),
+            2
+          ),
+        })
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}))
+          throw new Error(err.message || err.error || 'HTTP ' + res.status)
+        }
+        const r = await res.json()
+        if (!r.ok) throw new Error(r.error || '远端保存失败')
+        // verified: {ok, cardIdMatched, fingerprintMatched, diff, readBackError}
+        // ok=true → 保存并读回一致；ok=false → 「交易成功」但内容未落库（FinMall 静默空返回）
+        this.verifiedRemote = r.verified ? !!r.verified.ok : null
+        this.savedRemote = true
+        if (this.verifiedRemote === false) {
+          const v = r.verified || {}
+          const detail = (v.diff && v.diff.length)
+            ? '差异：' + v.diff.join('；')
+            : (v.readBackError || '读回校验未通过')
+          // 远端操作结果异常：仅弹出错误提示，不写入事件/绑定错误记录
+          console.warn('[保存校验不符]', v)
+          showAppToast('已保存至远端，但读回校验未通过', 'err')
+        } else {
+          showAppToast('已保存至远端', 'ok')
+        }
+        if (this.saveRemoteTimer) clearTimeout(this.saveRemoteTimer)
+        this.saveRemoteTimer = setTimeout(() => { this.savedRemote = false; this.verifiedRemote = null }, 2500)
+      } catch (e) {
+        console.error('[保存至远端失败]', e)
+        // 远端操作接口报错：仅弹出错误提示，不写入事件/绑定错误记录（避免污染事件面板）
+        showAppToast('保存至远端失败：' + (e && e.message), 'err')
+        // 落盘未成功：清除自保存标记，避免误吞后续真正的外部改动
+        this.selfSaveId = ''
+        this.selfSaveAt = 0
+      } finally {
+        this.savingRemote = false
+      }
+    },
+    /** 实时拉取卡片列表（GET /__cards），替换下拉框选项，不缓存 */
+    async fetchCardList() {
+      try {
+        const res = await apiFetch('/__cards')
+        if (!res.ok) return
+        const r = await res.json()
+        const cards = (r && r.cards) || []
+        this.cardList = cards
+        this.cardCount = cards.length
+      } catch (e) {
+        console.error('[加载卡片列表失败]', e)
+      }
+    },
+    /** 刷新当前卡片：从磁盘重新读取 schema/data 并强制重挂载 */
+    async onRefresh() {
+      const id = this.selectedId
+      if (!id || this.refreshing) return
+      this.refreshing = true
+      try {
+        await this.loadCard(id)
+        // 立即刷新卡片列表：同步远程可能新增 / 重命名卡片，
+        // 让顶栏下拉框即时反映，无需等待 dev server 文件监听事件。
+        await this.fetchCardList()
+        // 同步下拉框名称（若 schema.name 有改动，以内存态为准兜底）
+        const item = this.cardList.find((c) => c.id === id)
+        if (item && this.currentSchema && this.currentSchema.name) item.name = this.currentSchema.name
+      } catch (e) {
+        console.error('[刷新卡片失败]', e)
+        this.rt.pushError('refresh', String(e && e.message))
+      } finally {
+        this.refreshing = false
+      }
+    },
+    /**
+     * 处理 dev server 推送的磁盘变更事件（同步远程 / 其他窗口保存 / 手工编辑）。
+     * - 始终重新拉取卡片列表（新增 / 改名 / 删除的卡即时反映在下拉框）。
+     * - 若变更的是当前选中卡片的文件，重新从磁盘载入，使预览即时生效
+     *   （这正是「连接本地开发服务后，编辑器外改文件，预览立刻刷新」的关键路径）。
+     * - 若当前卡片存在未保存编辑，先用既有 ConfirmDialog 二次确认，避免静默丢弃编辑。
+     * 用极短防抖合并同步写盘的突发多文件变更，避免重复重载。
+     */
+    onCardsChanged(payload) {
+      const file = (payload && payload.file) || ''
+      // 编辑历史快照落盘在 src/cards/<id>/.history/ 下写 .json，不属于卡片本体变更，
+      // 须忽略，否则会触发 loadCard 自动重载、丢弃未保存编辑并关闭属性面板。
+      if (/\.history[\\/]/.test(file)) return
+      // data.json 是 schema 的单向派生产物，其变更（写盘重算 / 外部直改）不应触发重载；
+      // 真正触发重载的只有 schema.json 变更（此处与 8787 watcher 形成双保险）。
+      if (/data\.json$/i.test(file)) return
+      const m = file.match(/src[\\/]cards[\\/]([^\\/]+)[\\/]/)
+      const changedId = m ? m[1] : null
+      if (this._cardsChangedTimer) return
+      this._cardsChangedTimer = setTimeout(() => {
+        this._cardsChangedTimer = null
+        this.fetchCardList()
+        if (changedId && changedId === this.selectedId) {
+          // 本窗口自己的「保存到本地 / 保存至远端」刚落盘，watcher 推回的 cards-changed 是回声，
+          // 并非外部修改——内存态已由 saveCard / saveToRemote 就地更新，不应弹外部重载提示或冲突确认框。
+          // 仅吸收本窗口的回声；其他窗口 / IDE / 远端同步的变更仍照常提示（其 selfSaveId 不会被设置）。
+          if (this.selfSaveId === changedId && Date.now() - this.selfSaveAt < SELF_SAVE_SUPPRESS_MS) {
+            this.selfSaveId = ''
+            this.selfSaveAt = 0
+            return
+          }
+          if (this.historyDirty) {
+            // 当前卡有未保存编辑，外部又改了文件 → 二次确认，避免静默丢弃编辑
+            this.promptExternalReload(changedId)
+          } else {
+            // 无未保存改动：外部改动直接自动重载（符合「主动刷新重载」诉求），
+            // 但给一条非阻塞轻提示，避免「改了却毫无感知」。
+            const name = (this.currentSchema && this.currentSchema.name) || changedId
+            this.showExternalReloadNote(`卡片「${name}」已在编辑器外被修改，已自动重新载入预览`)
+            this.loadCard(this.selectedId)
+          }
+        }
+      }, 120)
+    },
+    /**
+     * 外部（IDE / 其他工具 / 远端同步）改动了当前卡片文件，而平台有未保存编辑时，
+     * 复用既有的 ConfirmDialog 弹二次确认（与同步发布 / 版本推送同款组件）：
+     * - 「重新载入」：放弃本地未保存改动，从磁盘重新载入（onConfirm 执行 loadCard）。
+     * - 「保留我的改动」：取消，保留编辑器内未保存编辑、不重载。
+     * 已有确认弹窗打开时跳过，避免同一波变更重复弹窗。
+     */
+    promptExternalReload(id) {
+      if (this.confirm.show) return
+      const name = (this.currentSchema && this.currentSchema.name) || id
+      this.requestConfirm({
+        title: '卡片已在编辑器外被修改',
+        message: `卡片「${name}」的 schema / data 在编辑器外发生了变更（例如 IDE 或其他工具覆盖了文件）。\n当前编辑器存在未保存的改动，是否放弃本地未保存改动并重新载入磁盘版本？`,
+        confirmText: '重新载入',
+        cancelText: '保留我的改动',
+        danger: false,
+        onConfirm: () => this.loadCard(id),
+      })
+    },
+    /**
+     * 外部改了当前卡、但平台无未保存改动时的非阻塞轻提示：顶部短暂出现、自动消失。
+     * 与 promptExternalReload（阻塞确认）互补——脏时弹确认、非脏时给提示。
+     */
+    showExternalReloadNote(msg) {
+      this.externalReloadNote = msg
+      if (this.externalReloadTimer) clearTimeout(this.externalReloadTimer)
+      this.externalReloadTimer = setTimeout(() => {
+        this.externalReloadNote = ''
+        this.externalReloadTimer = null
+      }, 3500)
+    },
+  },
+}
+</script>