cardbuddy 0.9.1 → 0.11.0

package/dist/vendored/App.vue

@@ -3,7 +3,7 @@
   右侧调试面板。
 -->
 <template>
-  <div class="app" :class="{ 'app--chrome-off': chromeOff }" :style="{ '--preview-width': previewWidth + 'px', '--api-panel-width': apiPanelWidth + 'px' }">
+  <div class="app" :class="{ 'app--chrome-off': chromeOff }" :style="{ '--preview-width': previewWidth + 'px', '--api-panel-width': apiPanelWidth + 'px', '--debug-min': debugMinWidth + 'px' }">
     <header class="app__bar" v-show="!chromeOff">
       <strong class="app__logo">
         <img class="app__logo-icon" :src="logoUrl" alt="" />
@@ -35,7 +35,17 @@
       >
         <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>
+      <!-- 新增空白卡片：紧邻网格预览的图标按钮；弹窗收 ID（必填、本地重名前置拦截）+ 描述（选填），创建成功切换到新卡 -->
+      <button
+        class="app__btn app__btn--icon"
+        type="button"
+        @click="openNewCard"
+        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-folder-plus" /></svg>
+      </button>
       <div
+        ref="validateBadgeEl"
         class="app__badge"
         :class="'app__badge--' + validateBadge.state"
         :title="badgeTitle"
@@ -69,7 +79,7 @@
             <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（含数据绑定编辑后的数据）">
+          <button class="app__btn app__btn--op" :disabled="!preview" @click="copySchema" title="复制 schema（含变量 mock 编辑后的数据）">
             <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>
@@ -198,35 +208,64 @@
           >
             <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 v-if="devServiceOpen" class="app__dev-svc-mask" @click="devServiceOpen = false"></div>
+          <Transition name="pop">
+            <div v-if="devServiceOpen" class="app__dev-svc-panel" @click.stop>
+              <div class="app__dev-svc-head">
+                <span class="app__dev-svc-title">本地开发服务</span>
+                <button class="app__dev-svc-close" type="button" title="关闭" @click="devServiceOpen = false"></button>
+              </div>
+              <div class="app__dev-svc-body">
+                <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>
+                <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 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>
+              </div>
             </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>
+          </Transition>
         </div>
       </div>
-      <!-- revision 依赖锚点：setData 自增后驱动本组件重渲染 -->
       <span style="display: none">{{ rt.revision }}</span>
     </header>
 
+    <!-- AI 开发助手悬浮入口：右下角圆形按钮（尺寸 / 配色走规范 Token，图标取自 sprite） -->
+    <button
+      class="ai-fab"
+      type="button"
+      :class="{ 'ai-fab--active': aiChatOpen }"
+      :title="aiChatOpen ? 'AI 开发助手（已打开）' : 'AI 开发助手'"
+      :aria-expanded="aiChatOpen ? 'true' : 'false'"
+      data-testid="ai-fab"
+      @click="aiChatOpen = !aiChatOpen"
+    >
+      <svg class="ai-fab__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-sparkles" /></svg>
+    </button>
+
+    <!-- AI 开发助手对话面板：右侧抽屉，宽度可拖（320px ~ 视口 50%，默认 33%），对话记录按卡片落盘 -->
+    <ChatPanel
+      :visible="aiChatOpen"
+      :card-id="selectedId"
+      :card-name="selectedCardName"
+      @close="aiChatOpen = false"
+    />
+
     <!-- 部署态但未配置本地开发服务：顶部提示条（chrome=off 截图模式不显示） -->
     <div v-if="apiBaseResolved === null && !chromeOff" class="app__nosvc-banner">
       <template v-if="devSvcBlockReason === 'disabled'">
@@ -348,7 +387,7 @@
         v-show="!chromeOff"
         class="splitter"
         :class="{ 'is-dragging': dragging }"
-        @mousedown.prevent="startDrag"
+        @pointerdown.prevent="startDrag"
         title="拖拽调整预览区域宽度"
       ></div>
 
@@ -359,7 +398,7 @@
       <div class="workside" v-show="!chromeOff">
         <div id="app-workside-bar" class="workside__bar"></div>
         <div id="app-workside-panels" class="workside__panels"></div>
-        <div class="workside__cols">
+        <div class="workside__cols" ref="colsEl">
           <!-- 拖拽分隔条：置于两栏容器内（定位上下文），只贯穿列区高度，不穿过底部弹出面板与状态栏 -->
           <!-- 中右分隔条：调试面板 | 接口调用面板 接缝，拖动调整右栏宽度。
                约束：中栏最小宽度 ≥ 屏宽 1/3，右栏最小宽度 ≥ 320px（见 startApiDrag） -->
@@ -367,7 +406,7 @@
             v-show="!chromeOff && apiPanelOpen"
             class="splitter splitter--api"
             :class="{ 'is-dragging': apiDragging }"
-            @mousedown.prevent="startApiDrag"
+            @pointerdown.prevent="startApiDrag"
             title="拖拽调整接口调用面板宽度"
           ></div>
           <DebugPanel
@@ -494,6 +533,14 @@
       :selected-id="selectedId"
       @select="onSelect"
       @close="closeGallery"
+      @delete="onGalleryDelete"
+    />
+    <!-- 新增空白卡片弹窗：创建成功后关弹窗 + 刷列表 + 切换到新卡；existing-ids 供 ID 重名前置判定 -->
+    <NewCardDialog
+      :visible="newCardOpen"
+      :existing-ids="cardIds"
+      @close="newCardOpen = false"
+      @created="onNewCardCreated"
     />
     <!-- App 级弱提示：顶栏异步操作（远端保存 / 同步）完成反馈，浮于 App 外壳顶部居中 -->
     <AppToast />
@@ -527,8 +574,10 @@ 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 NewCardDialog from '@/components/NewCardDialog.vue'
 import ComponentPalette from '@/components/ComponentPalette.vue'
 import Switch from '@/components/Switch.vue'
+import ChatPanel from '@/components/ChatPanel.vue'
 import { showAppToast } from '@/runtime/app-toast.js'
 import { clearAllAlerts } from '@/runtime/alert-card.js'
 import { installJsApiMock, clearDeviceUI } from '@/runtime/jsapi-mock.js'
@@ -536,7 +585,9 @@ 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'
+import { buildDataFromSchema, readMocks } from '../server/core/buildDataFromSchema.js'
+// 编辑器预览态派生 data 时叠加 dictionary.mocks（设计期覆盖）；服务端写盘仍只用 defaultValue。
+const WITH_MOCKS = { includeMocks: true }
 
 // 编辑器自身「保存到本地 / 保存至远端」写盘后，cardbuddy 的 watcher 会把这次落盘经 SSE
 // 推回 cards-changed。这是「自己改自己」的回声，并非外部修改，用此窗口吸收，避免误弹外部重载
@@ -547,13 +598,20 @@ const SELF_SAVE_SUPPRESS_MS = 2500
 // 内部 rootScope 可经 setRootScope 整体替换而引用不变。
 const adapter = new Adapter()
 const cardRuntime = createCardRuntime({}, adapter)
-// 开发期暴露 runtime 单例句柄，供 E2E 回归（如 L2-12 绑定数据整体替换实时同步画布）
-// 直接驱动 rt.setRootScope —— 与 DebugPanel「绑定数据」Raw「应用」同源。生产构建不暴露。
+// 开发期暴露 runtime 单例句柄，供 E2E 回归（如 L2-12 rootScope 整体替换实时同步画布）
+// 直接驱动 rt.setRootScope —— 与 DebugPanel「变量 → 配置变量 mock」Raw「应用」同源。生产构建不暴露。
 if (typeof window !== 'undefined' && import.meta.env.DEV) window.__rt = cardRuntime
 
+// 三栏（预览列 | 调试面板 | 接口调用面板）布局约束的单一来源：
+// 拖拽夹取与 computed 都从这里取值，避免「两套口径」在极限位置互相打架导致接缝跳动 / 整行溢出。
+const PREVIEW_MIN = 188 // 预览列硬下限（= 最小机型预设宽）
+const API_MIN = 320 // 接口调用面板常规下限（空间不足时按 apiPanelBounds 优雅退让，不整行溢出）
+const DEBUG_MIN_FLOOR = 200 // 中栏（调试面板）硬下限；软目标为屏宽 1/3
+const API_ABS_MIN = 160 // 极窄窗口下面板的绝对下限，保证不撑破容器
+
 export default {
   name: 'App',
-  components: { RenderTree, DebugPanel, ApiCallPanel, CardSelect, AlertCardLayer, DeviceOverlay, PickerOverlay, DatePickerOverlay, SelectionOverlay, HoverGuides, RemotePreview, AppToast, ConfirmDialog, CardGallery, ComponentPalette, Switch },
+  components: { RenderTree, DebugPanel, ApiCallPanel, CardSelect, AlertCardLayer, DeviceOverlay, PickerOverlay, DatePickerOverlay, SelectionOverlay, HoverGuides, RemotePreview, AppToast, ConfirmDialog, CardGallery, NewCardDialog, ComponentPalette, Switch, ChatPanel },
   provide() {
     return {
       adapter,
@@ -571,7 +629,9 @@ export default {
       appVersion: __APP_VERSION__,
       cardList: [], // 实时从 GET /__cards 拉取，不缓存启动快照
       cardCount: 0,
-      galleryOpen: false, // 卡片网格预览弹窗开关
+      galleryOpen: false,
+      // 新增空白卡片弹窗开关（顶栏图标按钮触发）
+      newCardOpen: false, // 卡片网格预览弹窗开关
       selectedId: '',
       // 外部（IDE / 其他工具）改了当前卡、且平台无未保存改动时，自动重载后顶部短暂提示
       // （非阻塞，区别于有未保存改动时的阻塞确认框）。
@@ -607,9 +667,9 @@ export default {
       localSchema: null,
       localData: null,
       selectedNodeId: '',
-      // 当前激活的调试面板 tab（绑定数据/组件结构/卡片来源）。
+      // 当前激活的调试面板 tab（变量/组件结构/卡片来源）。
       // 画布 Ctrl/⌘ 点击会自动切到「组件结构」tab 并在节点树聚焦选中，无需预先停在结构树 tab。
-      activeTab: 'scope',
+      activeTab: 'vars',
       // 右侧常驻「接口调用」面板：展开/收起由顶栏按钮与面板内 ✕ 控制，
       // 初始状态持久化到 localStorage（cardbuddy:api-panel-open）
       apiPanelOpen: true,
@@ -666,7 +726,7 @@ export default {
       baseline: null,
       _commitTimer: null, // 编辑落定防抖计时器，避免连续编辑产生过多快照
       viewportHeight: 700, // 手机视口实际高度（高度自适应填充后由 ResizeObserver 实测更新）
-      // 画布背景模式：checker（棋盘格） / white（白色） / gray（浅灰）
+      // 画布背景模式：checker（棋盘格） / white（白色） / gray（浅灰） / black（近黑，深色卡片对色用）
       canvasBg: 'gray',
       // 刷新按钮进行态：图标自转 + 禁用，避免连点与「点了没反应」
       refreshing: false,
@@ -674,6 +734,7 @@ export default {
         { key: 'checker', label: '棋盘' },
         { key: 'white', label: '白色' },
         { key: 'gray', label: '浅灰' },
+        { key: 'black', label: '黑色' },
       ],
       // —— 预览区宽度可调（拖拽分隔条 / 预设尺寸，画布按实际像素宽度布局，无 transform 缩放）——
       _previewWidthPx: 372, // 预览列宽度（像素，持久化到 localStorage）；第一次打开未主动设置时默认 372px
@@ -684,15 +745,22 @@ export default {
         { key: 188, value: '188' },
       ],
       stageWidth: typeof window !== 'undefined' ? window.innerWidth : 1280, // 舞台实际宽度（ResizeObserver 实测后更新）
+      colsWidth: 0, // 中右两栏容器（.workside__cols）实测宽度：右栏宽度夹取的单一口径
       stageHeight: typeof window !== 'undefined' ? window.innerHeight - 52 : 748, // 舞台实际高度（contain 缩放的“高度上限”基准）
       dragging: false, // 是否正在拖拽分隔条
       apiDragging: false, // 是否正在拖拽「接口调用」面板分隔条
       _stageObserver: null,
-      _dragMove: null,
-      _dragUp: null,
       // —— 本地开发服务（前后端分离）配置入口 ——
       // devServiceForm：设置面板双向绑定的草稿；启用后前端所有 /__xxx 请求改走该地址。
       devServiceOpen: false,
+      // AI 面板开合跨刷新保持：dev server 重启 / 误刷新后不必重新找入口
+      aiChatOpen: (() => {
+        try {
+          return sessionStorage.getItem('cardbuddy:ai-chat-open') === '1'
+        } catch {
+          return false
+        }
+      })(),
       devServiceForm: loadDevServiceConfig(),
       // apiBaseResolved：当前生效的 API 基址；null 表示部署态未配置（必须用本地服务才能编辑）。
       apiBaseResolved: resolveApiBase(),
@@ -712,6 +780,10 @@ export default {
     currentBg() {
       return this.bgOptions.find((b) => b.key === this.canvasBg) || this.bgOptions[0]
     },
+    /** 本地已有卡片 ID（GET /__cards 实时扫描 src/cards 的结果）：新增空白卡片时做重名前置判定 */
+    cardIds() {
+      return this.cardList.map((c) => c && c.id).filter(Boolean)
+    },
     // 撤销可用：存在可回退的上一版本；重做可用：存在被撤销后的版本
     canUndo() {
       return this.past.length > 0
@@ -812,27 +884,58 @@ export default {
       return ''
     },
     // 预览列宽度（像素）：chromeOff 时占满整屏（截图/真机模式，非“宽度调整”场景）；
-    // 否则使用 _previewWidthPx 并限制在 [188, 可视宽度/2]，最大不得超过画布左侧可视区域的一半
+    // 否则使用 _previewWidthPx 并夹到 previewBounds（拖拽与渲染共用同一口径，杜绝两套夹取打架）
     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))
+      const { min, max } = this.previewBounds
+      const w = this._previewWidthPx || PREVIEW_MIN
+      return Math.max(min, Math.min(max, w))
+    },
+    /** 视口宽（响应式：随 stageWidth / colsWidth 的实测更新一起重算） */
+    viewportWidth() {
+      // 依赖 stageWidth 以便窗口缩放时重算；取值仍用 innerWidth（vw 口径与 CSS 一致）
+      void this.stageWidth
+      return typeof window !== 'undefined' ? window.innerWidth : 1280
+    },
+    /** 中栏软目标宽：屏宽 1/3，且不低于硬下限（下发给 CSS `.debug` 的 min-width） */
+    debugSoftWidth() {
+      return Math.max(DEBUG_MIN_FLOOR, Math.floor(this.viewportWidth / 3))
+    },
+    /** 预览列宽度区间：[188, min(舞台宽/2, 舞台宽 - 右栏下限 - 中栏软目标)]。
+     *  只依赖舞台宽与视口宽（不反向依赖中右两栏实测），杜绝循环夹取。 */
+    previewBounds() {
+      const stage = this.stageWidth || 0
+      const byHalf = Math.floor(stage / 2)
+      const byWorkspace = stage - API_MIN - this.debugSoftWidth
+      return { min: PREVIEW_MIN, max: Math.max(PREVIEW_MIN, Math.min(byHalf, byWorkspace)) }
+    },
+    /** 中栏（调试面板）实际最小宽：软目标（屏宽 1/3）优先，空间不足时退让到硬下限 */
+    debugMinWidth() {
+      const cols = this.colsWidth || Math.max(0, (this.stageWidth || 0) - this.previewWidth)
+      return Math.max(DEBUG_MIN_FLOOR, Math.min(this.debugSoftWidth, Math.floor(cols) - API_MIN))
+    },
+    /** 右栏（接口调用面板）宽度区间：常规 [320, 两栏容器宽 - 中栏最小宽]；
+     *  容器实在放不下 320 时（窄窗口 + 预览列已占位）整体退让到剩余空间，绝不撑破容器
+     *  —— 撑破会让面板被推出视口、分隔条接缝与面板边缘脱节，表现为「拖到极限就跳」。 */
+    apiPanelBounds() {
+      const cols = this.colsWidth || Math.max(0, (this.stageWidth || 0) - this.previewWidth)
+      const max = Math.max(API_ABS_MIN, Math.floor(cols) - this.debugMinWidth)
+      return { min: Math.min(API_MIN, max), max }
     },
     // 画布实际宽度（列宽，整数）：canvas-bar__size 实时显示用，拖拽分隔条时随之变化
     canvasW() {
       return Math.round(this.previewWidth || 375)
     },
-    // 右侧「接口调用」面板宽度（像素）：限制在 [320, 舞台宽度 - 预览列宽 - 中栏最小宽(屏宽 1/3)]，
-    // 保证中栏（调试面板）最小宽度不小于三分之一屏幕宽度、右栏不小于 320px
+    /** 当前卡片名（AI 开发助手头部展示；列表未加载完时回落 id） */
+    selectedCardName() {
+      const hit = this.cardList.find((c) => c.id === this.selectedId)
+      return (hit && hit.name) || this.selectedId || ''
+    },
+    // 右侧「接口调用」面板宽度（像素）：夹到 apiPanelBounds，保证中栏不小于屏宽 1/3、右栏不小于 320px
     apiPanelWidth() {
-      const minW = 320 // 右栏最小宽度
-      const midMin = Math.floor((typeof window !== 'undefined' ? window.innerWidth : 1280) / 3)
-      const maxW = Math.max(minW, Math.floor((this.stageWidth || 0) - this.previewWidth - midMin))
+      const { min, max } = this.apiPanelBounds
       const w = this._apiPanelWidthPx || 360
-      return Math.max(minW, Math.min(maxW, w))
+      return Math.max(min, Math.min(max, w))
     },
     // 缩放外框占满整列（宽高交由 CSS flex 填满；画布不再做 transform 缩放，直接按实际尺寸布局）
     frameStyle() {
@@ -848,6 +951,13 @@ export default {
         clearHoverEl()
       }
     },
+    aiChatOpen(val) {
+      try {
+        sessionStorage.setItem('cardbuddy:ai-chat-open', val ? '1' : '0')
+      } catch {
+        /* sessionStorage 不可用时忽略 */
+      }
+    },
     // 主题切换：把 'dark' / 'light' 写到 <html data-theme>，驱动 CSS 变量整体换肤
     theme(val) {
       document.documentElement.dataset.theme = val
@@ -864,8 +974,6 @@ export default {
   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)
@@ -884,11 +992,17 @@ export default {
     this.loadApiPanelWidth()
     this._stageObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
+        // 舞台与两栏容器分别实测：右栏夹取要用 colsWidth（不含预览列），不能拿舞台宽反推
+        if (entry.target === this.$refs.colsEl) {
+          this.colsWidth = Math.round(entry.contentRect.width)
+          continue
+        }
         this.stageWidth = Math.round(entry.contentRect.width)
         this.stageHeight = Math.round(entry.contentRect.height)
       }
     })
     if (this.$refs.stageEl) this._stageObserver.observe(this.$refs.stageEl)
+    if (this.$refs.colsEl) this._stageObserver.observe(this.$refs.colsEl)
     // 全局键盘快捷键：复制/粘贴/副本/删除/撤销/重做/取消选中（见 onKeydown）
     window.addEventListener('keydown', this.onKeydown)
   },
@@ -934,9 +1048,10 @@ export default {
       this.selectedId = initial
       await this.loadCard(this.selectedId)
     }
-    // 数据绑定（rt.rootScope）深度监听：任意编辑实时同步进 schema.dictionary.inputParams.defaultValue，
+    // 数据绑定（rt.rootScope）深度监听：任意编辑实时回写 schema 的权威数据位 ——
+    // 已配置 mock 的 key 回写 dictionary.mocks[key]，其余回写 inputParams[].defaultValue，
     // 保证「保存到本地」基于最新数据绑定；预览也经 rt 响应式实时刷新。
-    // ⚠️ 此处【不】写历史——历史由「绑定数据」面板的「应用」按钮（schema-commit）落定，
+    // ⚠️ 此处【不】写历史——历史由「变量 → 配置变量 mock」视图的「应用」按钮（schema-commit）落定，
     // 与节点属性/事件面板一致：实时编辑只更新预览与内存，点「应用」才记一笔撤销记录。
     this.$watch(
       () => this.rt.rootScope,
@@ -1009,32 +1124,84 @@ export default {
       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
+    // —— 列宽拖拽（左：预览列 / 右：接口调用面板）——
+    /**
+     * 分隔条拖拽统一入口：Pointer Events + 指针捕获。
+     * 曾经左条绑 mousedown、处理函数却按 pointer 写（ev.pointerId 为 undefined → 捕获失败，
+     * pointermove 只在 6px 命中区内触发），表现为「左侧分隔条拖不动」；两条统一走这里。
+     * 捕获后即使松手点在视口外，pointerup / pointercancel 仍回送本元素，不会残留拖拽态。
+     * @param {PointerEvent} ev
+     * @param {(e: PointerEvent) => void} onMove 每次移动的夹取写入
+     * @param {() => void} onEnd 收尾（清光标 / 持久化）
+     */
+    beginColumnDrag(ev, onMove, onEnd) {
+      const el = ev && ev.currentTarget
+      if (!el) return
+      const pointerId = ev.pointerId
+      try {
+        el.setPointerCapture(pointerId)
+      } catch {
+        /* 不支持捕获时退化为元素级监听 */
       }
-      this._dragUp = () => {
-        this.dragging = false
+      const finish = () => {
+        el.removeEventListener('pointermove', onMove)
+        el.removeEventListener('pointerup', finish)
+        el.removeEventListener('pointercancel', finish)
+        window.removeEventListener('blur', finish)
+        try {
+          if (el.hasPointerCapture?.(pointerId)) el.releasePointerCapture(pointerId)
+        } catch {
+          /* 已释放 */
+        }
         document.body.style.cursor = ''
         document.body.style.userSelect = ''
-        document.removeEventListener('mousemove', this._dragMove)
-        document.removeEventListener('mouseup', this._dragUp)
-        this.savePreviewWidth()
+        onEnd()
       }
-      document.addEventListener('mousemove', this._dragMove)
-      document.addEventListener('mouseup', this._dragUp)
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+      el.addEventListener('pointermove', onMove)
+      el.addEventListener('pointerup', finish)
+      el.addEventListener('pointercancel', finish)
+      window.addEventListener('blur', finish) // 窗口失焦兜底：切走 / 最小化不卡死拖拽态
+    },
+    // 左分隔条：拖动改变预览列宽度（写像素，previewWidth / canvasW 自动联动），松手持久化
+    startDrag(ev) {
+      if (this.chromeOff) return
+      const stage = this.$refs.stageEl
+      if (!stage) return
+      const baseLeft = stage.getBoundingClientRect().left
+      this.dragging = true
+      this.beginColumnDrag(
+        ev,
+        (e) => {
+          const { min, max } = this.previewBounds
+          this._previewWidthPx = Math.max(min, Math.min(max, Math.round(e.clientX - baseLeft)))
+        },
+        () => {
+          this.dragging = false
+          this.savePreviewWidth()
+        }
+      )
+    },
+    // 右分隔条：拖动改变「接口调用」面板宽度（向左加宽 / 向右收窄），松手持久化。
+    // 基准取两栏容器右缘（= 面板右缘），夹取用 apiPanelBounds，与渲染口径完全一致 → 极限处不再跳动
+    startApiDrag(ev) {
+      if (this.chromeOff || !this.apiPanelOpen) return
+      const cols = this.$refs.colsEl
+      if (!cols) return
+      const baseRight = cols.getBoundingClientRect().right
+      this.apiDragging = true
+      this.beginColumnDrag(
+        ev,
+        (e) => {
+          const { min, max } = this.apiPanelBounds
+          this._apiPanelWidthPx = Math.max(min, Math.min(max, Math.round(baseRight - e.clientX)))
+        },
+        () => {
+          this.apiDragging = false
+          this.saveApiPanelWidth()
+        }
+      )
     },
     // 读取上次保存的预览列宽度（像素）；首次打开（无记录）时保持默认 372px
     loadPreviewWidth() {
@@ -1055,40 +1222,10 @@ export default {
     // 预设尺寸切换：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))
+      const { min, max } = this.previewBounds
+      this._previewWidthPx = Math.max(min, Math.min(max, w))
       this.savePreviewWidth()
     },
-    // —— 接口调用面板宽度调节 ——
-    // 拖拽分隔条：拖动改变右栏宽度（向左拖加宽、向右拖收窄），松手持久化。
-    // 约束：右栏 [320px, 舞台宽 - 预览列宽 - 中栏最小宽(屏宽 1/3)]，与 apiPanelWidth computed 一致
-    startApiDrag() {
-      if (this.chromeOff || !this.apiPanelOpen) return
-      this.apiDragging = true
-      document.body.style.cursor = 'col-resize'
-      document.body.style.userSelect = 'none'
-      const stage = this.$refs.stageEl
-      this._apiDragMove = (ev) => {
-        const rect = stage.getBoundingClientRect()
-        const minW = 320 // 右栏最小宽度
-        const midMin = Math.floor(window.innerWidth / 3) // 中栏最小宽度：屏宽 1/3
-        const maxW = Math.max(minW, Math.floor(rect.width - this.previewWidth - midMin))
-        const w = Math.max(minW, Math.min(maxW, rect.right - ev.clientX))
-        this._apiPanelWidthPx = w
-      }
-      this._apiDragUp = () => {
-        this.apiDragging = false
-        document.body.style.cursor = ''
-        document.body.style.userSelect = ''
-        document.removeEventListener('mousemove', this._apiDragMove)
-        document.removeEventListener('mouseup', this._apiDragUp)
-        this.saveApiPanelWidth()
-      }
-      document.addEventListener('mousemove', this._apiDragMove)
-      document.addEventListener('mouseup', this._apiDragUp)
-    },
     // 读取上次保存的接口调用面板宽度（像素）；首次打开（无记录）时保持默认 360px
     loadApiPanelWidth() {
       try {
@@ -1111,20 +1248,35 @@ export default {
     },
     onSelect(id) {
       this.loadingCard = true
+      // 乐观置位：下拉立刻跟手。持久化交给 loadCard —— 载入成功才记，
+      // 避免把一张打不开的卡记成「上次选中」，下次进页面直接白屏
+      this.selectedId = id
+      this.loadCard(id, { clearAll: true })
+    },
+    /**
+     * 置为「当前卡」并持久化（下次打开页面自动恢复，沿用 cardbuddy: 前缀约定）。
+     * 顶栏下拉、网格高亮、校验徽标、RenderTree 的 key、导入元数据的过期判定全读 selectedId，
+     * 所以由 loadCard 统一置位：任何调用点（下拉选中、网格点卡、新增空白卡、删除后切下一张）
+     * 都不会再出现「画布切过去了、下拉还停在旧卡」的错位。
+     */
+    selectCard(id) {
       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
     },
+    /** 打开「新增空白卡片」弹窗：先刷一次列表，重名判定才拿得到最新本地卡片（别的窗口 / 同步远程可能刚建过卡） */
+    openNewCard() {
+      this.newCardOpen = true
+      this.fetchCardList()
+    },
     /** 关闭卡片网格预览弹窗 */
     closeGallery() {
       this.galleryOpen = false
@@ -1215,18 +1367,89 @@ export default {
         // 渲染端点异常不强行判错（避免 dev server 预热期 SSR 冷启动误报）
         const renderOk = r ? !!r.renderOk : true
         const ok = contractOk && renderOk
+        const next = ok ? 'ok' : 'error'
+        const changed = this.validateBadge.state !== next
         this.validateBadge = {
-          state: ok ? 'ok' : 'error',
+          state: next,
           errors: (v.errors || []).length,
           warnings: (v.warnings || []).length,
           renderOk,
           ts: Date.now(),
         }
+        if (changed && (next === 'ok' || next === 'error')) this.celebrateValidate(next)
       } catch (e) {
-        // 网络/服务不可用：保底不阻断编辑，标记 fail
+        // 网络/服务不可用：保底不阻断编辑，标记 fail（fail 不触发动画）
         this.validateBadge = { ...this.validateBadge, state: 'fail' }
       }
     },
+    /** 状态跳变时，在徽标局部触发庆祝动画：徽标弹跳 + 碎玻璃碎屑沿轮廓放射爆开，碎屑颜色跟随目标状态主色。仅局部，不铺屏。 */
+    celebrateValidate(state = 'ok') {
+      const el = this.$refs.validateBadgeEl
+      if (!el) return
+      if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+      // 徽标弹跳
+      el.classList.remove('is-celebrating')
+      void el.offsetWidth // 重排以重启动画
+      el.classList.add('is-celebrating')
+      setTimeout(() => el.classList.remove('is-celebrating'), 600)
+      // 碎屑颜色跟随目标状态徽标主色（--ok / --danger / --warn / --text-faint）
+      const r = el.getBoundingClientRect()
+      const colorVar = { ok: '--ok', error: '--danger', pending: '--warn', fail: '--text-faint', nopython: '--text-faint' }[state] || '--ok'
+      const fallback = { ok: '#52c41a', error: '#F5222D', pending: '#FAAD14', fail: '#8c8c8c', nopython: '#8c8c8c' }[state] || '#52c41a'
+      const badgeColor = getComputedStyle(el).getPropertyValue(colorVar).trim() || fallback
+      const box = document.createElement('div')
+      box.className = 'app__confetti'
+      box.style.left = r.left + r.width / 2 + 'px'
+      box.style.top = r.top + r.height / 2 + 'px'
+      // 碎玻璃碎片：从徽标矩形轮廓迸出，沿外法线方向飞散；不规则尖锐多边形 + 尺寸不一
+      const count = 22
+      const clips = [
+        'polygon(50% 0%, 0% 100%, 100% 100%)',
+        'polygon(62% 0%, 100% 40%, 45% 100%, 0% 52%)',
+        'polygon(0% 0%, 100% 18%, 82% 100%, 12% 70%)',
+        'polygon(22% 0%, 100% 8%, 88% 100%, 0% 76%)',
+        'polygon(0% 32%, 100% 0%, 76% 100%, 18% 86%)',
+        'polygon(8% 0%, 100% 22%, 70% 100%, 0% 64%)',
+        'polygon(0% 12%, 100% 0%, 100% 78%, 30% 100%, 12% 55%)',
+      ]
+      const halfW = r.width / 2
+      const halfH = r.height / 2
+      for (let i = 0; i < count; i++) {
+        const bit = document.createElement('span')
+        bit.className = 'app__confetti-bit'
+        // 在徽标矩形轮廓上随机取一点作为迸发起点
+        const edge = (Math.random() * 4) | 0
+        let px, py
+        if (edge === 0) { px = (Math.random() * 2 - 1) * halfW; py = -halfH }
+        else if (edge === 1) { px = halfW; py = (Math.random() * 2 - 1) * halfH }
+        else if (edge === 2) { px = (Math.random() * 2 - 1) * halfW; py = halfH }
+        else { px = -halfW; py = (Math.random() * 2 - 1) * halfH }
+        // 沿轮廓点的外法线方向飞出 + 微抖动
+        const len = Math.hypot(px, py) || 1
+        const a = Math.atan2(py / len, px / len) + (Math.random() - 0.5) * 0.5
+        const dist = 16 + Math.random() * 26
+        bit.style.setProperty('--sx', px.toFixed(1) + 'px')
+        bit.style.setProperty('--sy', py.toFixed(1) + 'px')
+        bit.style.setProperty('--tx', (Math.cos(a) * dist).toFixed(1) + 'px')
+        bit.style.setProperty('--ty', (Math.sin(a) * dist).toFixed(1) + 'px')
+        bit.style.setProperty('--rot', (Math.random() * 720 - 360).toFixed(0) + 'deg')
+        bit.style.setProperty('--clip', clips[(Math.random() * clips.length) | 0])
+        bit.style.setProperty('--c', badgeColor)
+        // 每片独立透明度，半透明玻璃感
+        bit.style.setProperty('--o', (0.68 + Math.random() * 0.27).toFixed(2))
+        // 三层尺寸分布：长薄片 / 中等碎块 / 细微粉尘，强化碎裂参差感
+        const roll = Math.random()
+        let w, h
+        if (roll < 0.35) { w = 1.5 + Math.random() * 2; h = 10 + Math.random() * 10 }       // 细长薄片
+        else if (roll < 0.75) { w = 4 + Math.random() * 5; h = w * (0.6 + Math.random() * 0.8) } // 中等碎块
+        else { w = 2 + Math.random() * 2.5; h = w }                            // 细微粉尘
+        bit.style.width = w.toFixed(0) + 'px'
+        bit.style.height = h.toFixed(0) + 'px'
+        box.appendChild(bit)
+      }
+      document.body.appendChild(box)
+      setTimeout(() => box.remove(), 800)
+    },
     /** 实时从磁盘读取并载入指定卡片（GET /__card/<id>），不读任何缓存 */
     async loadCard(id, opts = {}) {
       if (!id) return
@@ -1242,6 +1465,9 @@ export default {
         this.rt.pushError('loadCard', 'schema 读取失败')
         return
       }
+      // 载入成功即认定这张卡为当前卡：必须在 fetchImportMeta / refreshValidateBadge 之前，
+      // 二者都以 selectedId 作「是否已切卡」的判据，晚置位会把新卡的结果当过期丢掉
+      this.selectCard(id)
       // 切换卡片：清全部错误；刷新/重建预览：只清绑定错误，保留事件错误
       if (opts.clearAll) {
         this.rt.clearErrors()
@@ -1251,7 +1477,7 @@ export default {
       this.rt.clearApiCalls()
       // schema 被事件编辑器改后重建时保留当前数据绑定编辑，避免被磁盘 data（由 schema 派生）覆盖。
       // 数据绑定改为由 schema 单向派生，不再读回 data.json 文件。
-      if (!opts.keepScope) this.rt.setRootScope(buildDataFromSchema(fresh.schema))
+      if (!opts.keepScope) this.rt.setRootScope(buildDataFromSchema(fresh.schema, WITH_MOCKS))
       this.currentCard = { schema: fresh.schema }
       this.currentSchema = fresh.schema
       // 重置并在载入后拉取导入来源元数据（Phase E）：本地新建卡无 .import-meta.json → null，
@@ -1261,7 +1487,7 @@ export default {
       // 记录本地真实版本基线（磁盘当前内容），供「保存到本地」按钮判断与本地是否一致。
       // localData 由 schema 派生（与渲染注入同源），保证纯数据编辑也能触发脏标记。
       this.localSchema = this.cloneSchema(fresh.schema)
-      this.localData = this.cloneData(buildDataFromSchema(fresh.schema))
+      this.localData = this.cloneData(buildDataFromSchema(fresh.schema, WITH_MOCKS))
       this.preview = buildPreview(fresh.schema)
       // Task #5：把 Property 树模型森林暴露到 window，供浏览器内 AI / skill 直接读取节点可编辑结构
       if (typeof window !== 'undefined') window.__cardModel = buildModelView(fresh.schema)
@@ -1339,7 +1565,7 @@ export default {
       if (!id || !snapshot) return
       const schema = snapshot.schema || snapshot
       // 快照只存 schema；数据绑定由其派生。若老快照带 data 则优先沿用（历史兼容）。
-      const data = snapshot.data != null ? snapshot.data : buildDataFromSchema(schema)
+      const data = snapshot.data != null ? snapshot.data : buildDataFromSchema(schema, WITH_MOCKS)
       this.currentSchema = this.cloneSchema(schema)
       this.rt.setRootScope(this.cloneData(data))
       this.preview = buildPreview(this.currentSchema)
@@ -1355,7 +1581,7 @@ export default {
     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))
+      const sameData = this.dataEqual(this.rt.rootScope, buildDataFromSchema(this.baseline.schema, WITH_MOCKS))
       if (sameSchema && sameData) return
       const previous = { schema: this.baseline.schema }
       this.past.push(previous)
@@ -1396,7 +1622,7 @@ export default {
         // 取末尾最多 30 个作为可回退的上一版本（最新在末尾；仅 schema，data 由 schema 派生）
         this.past = snaps.slice(-30).map((s) => ({
           schema: s.schema,
-          data: s.data != null ? s.data : buildDataFromSchema(s.schema),
+          data: s.data != null ? s.data : buildDataFromSchema(s.schema, WITH_MOCKS),
         }))
       } catch (e) {
         console.warn('[加载编辑历史失败]', e)
@@ -1461,10 +1687,11 @@ export default {
       this.commitHistory()
     },
     /**
-     * 把数据绑定（rt.rootScope，即 data.json）的编辑实时同步回 schema 的
-     * 权威数据位置：schema.dictionary.inputParams[i].defaultValue。
-     * 这样「本地保存」时 schema.json 与 data.json 都携带最新数据绑定，
-     * 二者同时生效、不会互相覆盖（data.json 本身即由 inputParams.defaultValue 派生）。
+     * 把数据绑定（rt.rootScope）的编辑实时同步回 schema 的权威数据位：
+     * key 已在 dictionary.mocks 中 → 回写 mocks[key]（设计期覆盖仓）；
+     * 否则回写 schema.dictionary.inputParams[i].defaultValue（随卡发布的缺省仓）。
+     * 这样「本地保存」时 schema.json 携带最新两仓数据，而 data.json 仍只由 defaultValue 派生，
+     * mock 不会泄漏进发布数据；两仓也不会互相覆盖。
      */
     syncDataToSchema() {
       const schema = this.currentSchema
@@ -1472,13 +1699,14 @@ export default {
       const root = this.rt && this.rt.rootScope
       if (!root || typeof root !== 'object') return
       const params = schema.dictionary.inputParams
+      const mocks = readMocks(schema)
       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))
-        )
+        const value = JSON.parse(JSON.stringify(root[key], (k, v) => (k === '_schemaNode' ? undefined : v)))
+        if (mocks && Object.prototype.hasOwnProperty.call(mocks, key)) mocks[key] = value
+        else param.defaultValue = value
       }
     },
     /** 结构树选中节点 */
@@ -1653,6 +1881,16 @@ export default {
       clearHoverEl()
       this.scheduleCommit()
     },
+    /** 页面是否存在非空文本选区：有则视为「文本复制/粘贴」意图，交还原生行为 */
+    hasTextSelection() {
+      if (typeof window === 'undefined' || !window.getSelection) return false
+      const sel = window.getSelection()
+      return !!sel && !sel.isCollapsed && sel.toString().trim() !== ''
+    },
+    /** 是否存在可用于节点操作的选区（选中了非根节点）：节点复制/粘贴/副本的前提 */
+    hasNodeSelection() {
+      return !!this.selectedNodeId && this.selectedNodeId !== '_root'
+    },
     /** 判断按键事件焦点是否在可编辑元素内（输入框/文本域/可选文本），此时不劫持快捷键 */
     isEditableTarget(e) {
       const t = e.target
@@ -1668,6 +1906,11 @@ export default {
      *  Ctrl/⌘+Z 撤销 · Ctrl/⌘+Shift+Z / Ctrl+Y 重做 · Esc 取消选中。
      * 焦点在输入框/JSON 编辑器等可编辑元素内时，仅放行 Esc，其余交还原生行为
      * （避免误删节点或劫持文本撤销/复制）。
+     * 节点复制/粘贴与系统文本复制/粘贴共存判据（按优先级）：
+     *  1) 焦点可编辑 → 一律原生（文本撤销/复制/粘贴）；
+     *  2) 存在非空文本选区 → 一律原生（用户意图是文本）；
+     *  3) 节点类操作还要求已选中非根节点（粘贴另要求节点剪贴板非空），
+     *     否则不 preventDefault，把按键还给浏览器（如 ⌘D 书签）。
      */
     onKeydown(e) {
       if (this.chromeOff || !this.preview) return
@@ -1677,18 +1920,21 @@ export default {
 
       if (ctrl && (k === 'c' || k === 'C')) {
         if (editable) return
+        if (this.hasTextSelection() || !this.hasNodeSelection()) return
         this.copySelectedNode()
         e.preventDefault()
         return
       }
       if (ctrl && (k === 'v' || k === 'V')) {
         if (editable) return
+        if (this.hasTextSelection() || !this.hasNodeSelection() || !getClipboardNode()) return
         this.pasteNode()
         e.preventDefault()
         return
       }
       if (ctrl && (k === 'd' || k === 'D')) {
         if (editable) return
+        if (this.hasTextSelection() || !this.hasNodeSelection()) return
         this.duplicateNode()
         e.preventDefault()
         return
@@ -2283,7 +2529,10 @@ export default {
         // 写盘成功后，当前显示版本即成为本地真实版本：刷新本地基线，使顶栏
         // 「保存到本地」按钮在「当前版本 == 本地版本」时自动置灰。
         this.localSchema = this.cloneSchema(this.currentSchema)
-        this.localData = this.cloneData(buildDataFromSchema(this.currentSchema))
+        // 基线数据必须与载入 / 历史快照同源（含 mocks）：rt.rootScope 是含 mock 覆盖的，
+        // 若此处漏传 WITH_MOCKS，只要存在 mock 数据，保存后 rootScope 与 localData 永远
+        // 不等 → historyDirty 恒真，「保存到本地」按钮保存成功也保持高亮。
+        this.localData = this.cloneData(buildDataFromSchema(this.currentSchema, WITH_MOCKS))
         this.savedCard = true
         // 本地保存后磁盘已更新，刷新整卡校验徽标（端点读磁盘）
         this.refreshValidateBadge()
@@ -2479,6 +2728,37 @@ export default {
         console.error('[加载卡片列表失败]', e)
       }
     },
+    /**
+     * 网格预览删除卡片：格子删除钮 → 警告确认 → 这里真删（DELETE /__card/<id> 递归删本地目录）。
+     * 删完刷列表；若删的正是当前卡，切到剩余首卡，避免工作台指向已不存在的目录（保存会 404）。
+     */
+    async onGalleryDelete(id) {
+      try {
+        const res = await apiFetch(`/__card/${encodeURIComponent(id)}`, { method: 'DELETE' })
+        const r = await res.json().catch(() => null)
+        if (!res.ok) throw new Error((r && (r.message || r.error)) || `HTTP ${res.status}`)
+        showAppToast(`已删除本地卡片 ${id}`, 'ok')
+        await this.fetchCardList()
+        if (this.selectedId === id) {
+          const next = this.cardList[0]
+          if (next) await this.loadCard(next.id)
+          else {
+            this.selectedId = ''
+            this.currentSchema = null
+            this.preview = null
+          }
+        }
+      } catch (e) {
+        showAppToast(`删除卡片失败：${e.message}`, 'err')
+      }
+    },
+    /** 新增空白卡片创建成功：关弹窗 → 刷列表 → 切换到新卡（空白卡无封面，网格显示占位图） */
+    async onNewCardCreated(id) {
+      this.newCardOpen = false
+      showAppToast(`已创建空白卡片 ${id}`, 'ok')
+      await this.fetchCardList()
+      await this.loadCard(id)
+    },
     /** 刷新当前卡片：从磁盘重新读取 schema/data 并强制重挂载 */
     async onRefresh() {
       const id = this.selectedId