cardbuddy 0.9.0 → 0.10.0

package/dist/vendored/App.vue

@@ -36,6 +36,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-grid" /></svg>
       </button>
       <div
+        ref="validateBadgeEl"
         class="app__badge"
         :class="'app__badge--' + validateBadge.state"
         :title="badgeTitle"
@@ -69,7 +70,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,29 +199,38 @@
           >
             <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 自增后驱动本组件重渲染 -->
@@ -253,9 +263,11 @@
         <div class="phone__frame" :style="frameStyle">
         <!-- 画布层：直接按实际列宽/列高布局（width/height 100%），不再使用 transform 缩放 -->
         <div class="phone__scaler">
-        <!-- 设备工具条（类 Chrome DevTools 设备模式）：下拉选择画布背景 -->
-        <div class="device-bar" v-show="!chromeOff">
-          <!-- 背景选择下拉框：无边框模式（工具栏文字式控件） -->
+        <!-- 画布工具条：原 device-bar（顶 28px）+ preview-statusbar（底 28px）合并为一条 32px，
+             竖向空间还给手机视口。左组=改变画布（背景 / 宽度预设），右组=画布现状与动作（尺寸读数 / 刷新）；
+             预览列窄于 300px 时收起读数与文案只留图标（188 预设下仍单行可用）。 -->
+        <div class="canvas-bar" :class="{ 'canvas-bar--tight': previewWidth < 300 }" v-show="!chromeOff">
+          <!-- 画布背景：触发器带当前底色小样，不展开下拉也可见当前模式 -->
           <Dropdown
             borderless
             size="xs"
@@ -263,19 +275,47 @@
             :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 两个预设，切换即动态改宽度（高度随列高自动一致） -->
+          >
+            <template #trigger>
+              <span class="canvas-bar__chip" :title="'画布背景：' + currentBg.label">
+                <i class="canvas-bar__swatch" :class="'canvas-bar__swatch--' + canvasBg"></i>
+                <span class="canvas-bar__txt">{{ currentBg.label }}背景</span>
+                <svg class="canvas-bar__chev" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-chevron" /></svg>
+              </span>
+            </template>
+          </Dropdown>
+          <!-- 宽度预设：触发器直接显示当前宽度，省去独立的「宽度」标签 -->
           <Dropdown
             borderless
             size="xs"
-            placement="bottom-end"
+            placement="bottom-start"
             :value="canvasW"
-            :label="canvasW + ' px'"
             :options="presetSizes"
             @change="setPresetWidth"
-          />
+          >
+            <template #trigger>
+              <span class="canvas-bar__chip" title="画布宽度预设（高度随列高自适应）">
+                <svg class="canvas-bar__icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="8 7 4 12 8 17" /><polyline points="16 7 20 12 16 17" /><line x1="4" y1="12" x2="20" y2="12" /></svg>
+                <span class="canvas-bar__txt">{{ canvasW }} px</span>
+                <svg class="canvas-bar__chev" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-chevron" /></svg>
+              </span>
+            </template>
+          </Dropdown>
+          <span class="canvas-bar__spacer"></span>
+          <span class="canvas-bar__size" title="画布实际尺寸（宽 × 高，高度随窗口自适应）">{{ canvasW }} × {{ viewportHeight }}</span>
+          <button
+            class="canvas-bar__iconbtn"
+            :class="{ 'is-loading': refreshing }"
+            type="button"
+            :disabled="!selectedId || refreshing"
+            title="刷新卡片，重新加载"
+            @click="refreshCard"
+          >
+            <svg class="canvas-bar__icn" 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>
         <!--
           固定视口：弹层（alertCard / alertDialog / toast）相对此容器 absolute inset:0 定位，
@@ -307,23 +347,6 @@
           <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>
@@ -523,7 +546,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。这是「自己改自己」的回声，并非外部修改，用此窗口吸收，避免误弹外部重载
@@ -534,8 +559,8 @@ 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
 
 export default {
@@ -594,9 +619,9 @@ export default {
       localSchema: null,
       localData: null,
       selectedNodeId: '',
-      // 当前激活的调试面板 tab（绑定数据/组件结构/卡片来源）。
+      // 当前激活的调试面板 tab（变量/组件结构/卡片来源）。
       // 画布 Ctrl/⌘ 点击会自动切到「组件结构」tab 并在节点树聚焦选中，无需预先停在结构树 tab。
-      activeTab: 'scope',
+      activeTab: 'vars',
       // 右侧常驻「接口调用」面板：展开/收起由顶栏按钮与面板内 ✕ 控制，
       // 初始状态持久化到 localStorage（cardbuddy:api-panel-open）
       apiPanelOpen: true,
@@ -653,12 +678,15 @@ export default {
       baseline: null,
       _commitTimer: null, // 编辑落定防抖计时器，避免连续编辑产生过多快照
       viewportHeight: 700, // 手机视口实际高度（高度自适应填充后由 ResizeObserver 实测更新）
-      // 画布背景模式：checker（棋盘格） / white（白色） / gray（浅灰）
+      // 画布背景模式：checker（棋盘格） / white（白色） / gray（浅灰） / black（近黑，深色卡片对色用）
       canvasBg: 'gray',
+      // 刷新按钮进行态：图标自转 + 禁用，避免连点与「点了没反应」
+      refreshing: false,
       bgOptions: [
         { key: 'checker', label: '棋盘' },
         { key: 'white', label: '白色' },
         { key: 'gray', label: '浅灰' },
+        { key: 'black', label: '黑色' },
       ],
       // —— 预览区宽度可调（拖拽分隔条 / 预设尺寸，画布按实际像素宽度布局，无 transform 缩放）——
       _previewWidthPx: 372, // 预览列宽度（像素，持久化到 localStorage）；第一次打开未主动设置时默认 372px
@@ -806,7 +834,7 @@ export default {
       const w = this._previewWidthPx || minW
       return Math.max(minW, Math.min(maxW, w))
     },
-    // 画布实际宽度（列宽，整数）：device-bar__info 实时显示用，拖拽分隔条时随之变化
+    // 画布实际宽度（列宽，整数）：canvas-bar__size 实时显示用，拖拽分隔条时随之变化
     canvasW() {
       return Math.round(this.previewWidth || 375)
     },
@@ -857,7 +885,7 @@ export default {
     window.removeEventListener('keydown', this.onKeydown)
   },
   mounted() {
-    // 视口高度随窗口弹性填充，实测高度同步到 device-bar 信息条
+    // 视口高度随窗口弹性填充，实测高度同步到 canvas-bar 尺寸读数
     this.viewportObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         this.viewportHeight = Math.round(entry.contentRect.height)
@@ -919,9 +947,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,
@@ -1142,8 +1171,13 @@ export default {
      * 底部状态条刷新按钮：重新从本地开发服务拉取当前卡片并重建预览。
      */
     async refreshCard() {
-      if (!this.selectedId) return
-      await this.loadCard(this.selectedId)
+      if (!this.selectedId || this.refreshing) return
+      this.refreshing = true
+      try {
+        await this.loadCard(this.selectedId)
+      } finally {
+        this.refreshing = false
+      }
     },
     // 切换深/浅主题：写入 <html data-theme> 并持久化，刷新后保持
     toggleTheme() {
@@ -1195,18 +1229,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
@@ -1231,7 +1336,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，
@@ -1241,7 +1346,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)
@@ -1319,7 +1424,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)
@@ -1335,7 +1440,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)
@@ -1376,7 +1481,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)
@@ -1441,10 +1546,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
@@ -1452,13 +1558,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
       }
     },
     /** 结构树选中节点 */
@@ -2263,7 +2370,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()

package/dist/vendored/components/ComponentPalette.vue

@@ -157,7 +157,7 @@ export default {
   align-items: center;
   gap: 10px;
   padding: 10px 16px;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--hairline) solid var(--border);
 }
 .cp__title {
   font-size: 13px;