cardbuddy 0.9.1 → 0.10.0

package/dist/preview-editor/index.html

@@ -8,8 +8,8 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16-Cg6Nrosk.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32-B_1744sp.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-BQcES9QK.png" />
-    <script type="module" crossorigin src="/assets/index-B9MOriNv.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CwD14gm3.css">
+    <script type="module" crossorigin src="/assets/index-D1iIJ4sl.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-C_UKS0NF.css">
   </head>
   <body>
     <div id="app"></div>

package/dist/server-core/assetProxy.js

@@ -87,13 +87,9 @@ async function fetchUpstream(pathname, upstream) {
 }
 
 /**
- * 资源代理 + 落盘缓存（回源地址从传入的 upstream 取）。
- * @param {{ root: string, upstream: string }} opts
- */
-/**
- * 资源代理 + 落盘缓存中间件（与 Express / Vite middleware 容器解耦）。
- * 既可由 Vite 插件 configureServer 挂载，也可由 server/core 的 mountCoreMiddlewares
- * 直接挂载到 cardbuddy（8787），实现「Vite 零后端插件、8787 是唯一后端」。
+ * 资源代理 + 落盘缓存中间件（回源地址从传入的 upstream 取；与 Express / Vite middleware 容器解耦）。
+ * 由 server/core 的 mountCoreMiddlewares 挂载到 cardbuddy（8787），
+ * 实现「Vite 零后端插件、8787 是唯一后端」。
  * @param {{ root: string, upstream: string }} opts
  * @returns {(req: import('http').IncomingMessage, res: import('http').ServerResponse, next: Function) => void}
  */
@@ -137,18 +133,3 @@ export function createAssetProxyMiddleware({ root, upstream }) {
     return res.end(PLACEHOLDER)
   }
 }
-
-/**
- * Vite 插件适配层（保留以兼容纯 vite dev 场景）：configureServer 阶段把
- * createAssetProxyMiddleware 挂到 server.middlewares。前后分离架构下已由 server/core
- * 的 mountCoreMiddlewares 挂载到 cardbuddy（8787），Vite 不再需要此插件。
- * @param {{ root: string, upstream: string }} opts
- */
-export function createAssetProxyPlugin({ root, upstream }) {
-  return {
-    name: 'finmall-asset-proxy',
-    configureServer(server) {
-      server.middlewares.use(createAssetProxyMiddleware({ root, upstream }))
-    },
-  }
-}

package/dist/server-core/buildDataFromSchema.js

@@ -8,13 +8,21 @@
  *   仅当 defaultValue 为空 / 空对象 / 未定义时，回退到 param.desc 里的 JSON 兜底
  *   （desc 以 '{' 开头且解析后含该 key 时生效）。
  *
+ * mock 覆盖（dictionary.mocks）：
+ *   平台变量面板的「配置变量 mock」把设计期覆盖值写在 dictionary.mocks（key → 值），
+ *   与「默认值」inputParams[].defaultValue 分仓：defaultValue 是随卡发布的缺省数据，
+ *   mocks 仅供设计期预览覆盖（编辑器画布），不进入 data.json。故默认（options.includeMocks
+ *    falsy）只按 defaultValue 派生 —— 服务端写盘 / 同步落盘走这条；编辑器预览态传
+ *   { includeMocks: true }，在 defaultValue 之上按 key 叠加非空 mock 值。
+ *
  * 本文件是纯 ESM（无任何 node / 浏览器专有依赖），因此既能被服务端（Node）import，
  * 也能被预览前端（Vite 打包）直接 import，避免逻辑漂移。
  */
-export function buildDataFromSchema(schema) {
+export function buildDataFromSchema(schema, options = {}) {
   // 稳健性：schema 缺失 / 非对象（如外部改坏 schema.json）时返回空对象，
   // 不抛错，避免 GET /__card 在损坏卡片上返回 500 堆栈。
   if (!schema || typeof schema !== 'object') return {}
+  const mocks = options.includeMocks ? readMocks(schema) : null
   const data = {}
   for (const param of schema.dictionary?.inputParams || []) {
     const fallback = parseDescFallback(param)
@@ -24,15 +32,39 @@ export function buildDataFromSchema(schema) {
       typeof defaultValue === 'object' &&
       !Array.isArray(defaultValue) &&
       Object.keys(defaultValue).length === 0
-    data[param.key] = clone(
+    let value =
       fallback !== undefined && (defaultValue === undefined || defaultValue === '' || emptyObject)
         ? fallback
-        : defaultValue,
-    )
+        : defaultValue
+    // mock 覆盖优先于默认值；空 mock（未配置）不覆盖，回退 defaultValue / desc 兜底
+    if (mocks && hasMockValue(mocks, param.key)) value = mocks[param.key]
+    data[param.key] = clone(value)
   }
   return data
 }
 
+/**
+ * 读取 dictionary.mocks（key → mock 值）。历史卡 / 同步脚本可能写成数组或缺省，
+ * 一律归一为 null（视为「没有 mock 表」），调用方无需再判形。
+ */
+export function readMocks(schema) {
+  const mocks = schema && schema.dictionary && schema.dictionary.mocks
+  return mocks && typeof mocks === 'object' && !Array.isArray(mocks) ? mocks : null
+}
+
+/**
+ * 某 key 是否「配置了 mock」：undefined / null / 空串 / 空容器 视为未配置
+ * （与变量列表的 m 徽标同一判据，避免空壳 mock 被当成有效覆盖）。
+ */
+export function hasMockValue(mocks, key) {
+  if (!mocks || !Object.prototype.hasOwnProperty.call(mocks, key)) return false
+  const value = mocks[key]
+  if (value === undefined || value === null || value === '') return false
+  if (Array.isArray(value)) return value.length > 0
+  if (typeof value === 'object') return Object.keys(value).length > 0
+  return true
+}
+
 function parseDescFallback(param) {
   if (!param.desc || typeof param.desc !== 'string') return undefined
   const text = param.desc.trim()

package/dist/server-core/cardListCache.js

@@ -13,7 +13,6 @@
  */
 
 const cardIndex = new Map(); // cardId(String) -> { cardId, code, cardName }
-let lastRefreshedAt = 0;
 
 /**
  * 写入/合并卡片列表。
@@ -27,7 +26,6 @@ export function refreshCardList(cards, { full = false } = {}) {
     const id = String(c.cardId);
     cardIndex.set(id, { cardId: id, code: c.code, cardName: c.cardName });
   }
-  lastRefreshedAt = Date.now();
 }
 
 /** 卡片是否存在于缓存列表（按 cardId / pageId 查）。 */
@@ -35,16 +33,6 @@ export function hasCardId(cardId) {
   return cardIndex.has(String(cardId));
 }
 
-/** 取缓存中的卡片元信息，不存在返回 null。 */
-export function getCard(cardId) {
-  return cardIndex.get(String(cardId)) || null;
-}
-
-/** 缓存是否已非空（至少同步过一次全量列表）。 */
-export function cacheSize() {
-  return cardIndex.size;
-}
-
 /**
  * 推送前存在性校验：目标卡片是否确实在远端卡片列表中（按 cardId/pageId 查）。
  * - 缓存为空（本次 dev server 尚未全量同步过）：放行，返回 allowed=true，避免误拦截首推。
@@ -61,8 +49,3 @@ export function checkPushAllowed(pageId) {
     reason: `卡片 pageId=${pageId} 不在远端卡片列表中，疑似已删除或 pageId 错位，请先「远程同步」刷新列表后再推送`,
   };
 }
-
-/** 上次刷新时间戳（ms），未刷新为 0。 */
-export function lastRefreshed() {
-  return lastRefreshedAt;
-}

package/dist/server-core/index.js

@@ -3,11 +3,9 @@
  *
  * 设计：
  *   - 每个端点都是独立 `(req, res, next)` 中间件工厂（见同目录各文件），与 Express / Vite
- *     中间件容器解耦，因此可被两处复用：
- *       1) Vite 插件（server/cardServer.js，编辑器内核开发 same-origin 路径）；
- *       2) 独立本地开发服务（packages/cardbuddy，公网静态编辑器指向本机路径）。
- *   - mountCoreMiddlewares(app, opts) 把全部中间件挂到任意 Connect 风格容器（Vite 的
- *     server.middlewares 或 connect 实例皆可），两处共用、改一处两处同步。
+ *     中间件容器解耦，由本地开发服务 packages/cardbuddy 统一装配（dev 与发布态同一份）。
+ *   - mountCoreMiddlewares(app, opts) 把全部中间件挂到任意 Connect 风格容器（cardbuddy 的
+ *     connect 实例，或 tools/regress-data.mjs 里的临时容器），改一处全链路同步。
  *
  * 注意：renderStatus / nodeModels 需要活着的 vite 实例做 ssrLoadModule，故 mountCoreMiddlewares
  * 接收 viteServer 参数透传；无 SSR 需求的场景可传 null（这两个端点会返回明确错误）。

package/dist/server-core/logStream.js

@@ -166,11 +166,6 @@ export function subscribeLog(cb) {
   return () => subscribers.delete(cb)
 }
 
-/** 当前订阅者数量（诊断用）。 */
-export function logSubscriberCount() {
-  return subscribers.size
-}
-
 let mirrorInstalled = false
 
 /**
@@ -218,7 +213,7 @@ export function installLogMirror() {
 
 /**
  * 日志流 HTTP 端点：GET /__logs（历史/补漏）、POST /__logs/ingest（外部进程注入）。
- * 挂在 mountCoreMiddlewares 里，因此 Vite 插件形态与 cardbuddy 独立服务形态同时可用。
+ * 挂在 mountCoreMiddlewares 里，随 cardbuddy 本地服务一并生效。
  */
 export function createLogMiddleware() {
   const sendJson = (res, status, payload) => {

package/dist/standalone.js

@@ -24,6 +24,7 @@ import chalk from 'chalk'
 
 import { mountCoreMiddlewares, installLogMirror, subscribeLog } from './core.js'
 import { loadConfig } from './config.js'
+import { ensurePortFree } from './portGuard.js'
 
 const MIME_TYPES = {
   '.html': 'text/html; charset=utf-8',
@@ -45,6 +46,13 @@ const MIME_TYPES = {
   '.map': 'application/json; charset=utf-8',
 }
 
+// 被 dev.mjs 拉起时（DSL_LAUNCHER='dev'），来源标签由启动器用带背景色的 chip 标注，
+// 这里让出前缀避免双重来源标签；直接运行 / dev:prod（stdio:inherit）则自带标签。
+const srcTag =
+  process.env.DSL_LAUNCHER === 'dev'
+    ? ''
+    : chalk.magenta('▌ ') + chalk.magenta.bold('cardbuddy') + ' '
+
 function decodePathname(url) {
   if (!url) return '/'
   const raw = url.split('?')[0]
@@ -382,6 +390,21 @@ async function resolveTls(config) {
  */
 export async function startServer(userConfig = {}) {
   const config = { ...loadConfig(), ...userConfig }
+
+  // 日志镜像尽早安装（幂等，CLI 入口已先行装过一次）：让端口接管等启动期日志也能进入
+  // 编辑器底部「服务日志」面板的环形缓冲。
+  installLogMirror()
+
+  // 端口前置检查：被「上一个 cardbuddy 实例」占用时主动结束它再接管（见 src/portGuard.js）。
+  // 放在最前面，避免白跑一遍 TLS / Vite 初始化后才以 EADDRINUSE 失败。
+  await ensurePortFree({
+    port: config.port,
+    tls: config.https,
+    token: config.token,
+    mode: config.portTakeover,
+    log: (msg) => console.log(srcTag + msg),
+  })
+
   const app = connect()
 
   app.use(corsMiddleware)
@@ -403,8 +426,7 @@ export async function startServer(userConfig = {}) {
 
   // 服务日志流：镜像本进程 stdout/stderr（含 chalk ANSI）→ 环形缓冲 → SSE 批量推送。
   // 编辑器底部「服务日志」面板订阅 event: service-log；历史与断线补漏走 GET /__logs。
-  // installLogMirror 幂等，CLI 入口已先行安装，这里兜住以编程方式调用 startServer 的场景。
-  installLogMirror()
+  // 镜像本体在函数开头安装，这里只负责把新增行转推给 SSE 订阅者。
   subscribeLog((lines) => events.notify({ lines }, 'service-log'))
 
   const vite = await createEmbeddedVite(config)
@@ -437,12 +459,6 @@ export async function startServer(userConfig = {}) {
   })
 
   const bind = `${scheme}://127.0.0.1:${config.port}`
-  // 被 dev.mjs 拉起时（DSL_LAUNCHER='dev'），来源标签由启动器用带背景色的 chip 标注，
-  // 这里让出前缀避免双重来源标签；直接运行 / dev:prod（stdio:inherit）则自带标签。
-  const srcTag =
-    process.env.DSL_LAUNCHER === 'dev'
-      ? ''
-      : chalk.magenta('▌ ') + chalk.magenta.bold('cardbuddy') + ' '
   console.log(
     srcTag +
       chalk.green(`本地开发服务已启动：${bind}`) +

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 自增后驱动本组件重渲染 -->
@@ -536,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。这是「自己改自己」的回声，并非外部修改，用此窗口吸收，避免误弹外部重载
@@ -547,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 {
@@ -607,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,
@@ -666,7 +678,7 @@ export default {
       baseline: null,
       _commitTimer: null, // 编辑落定防抖计时器，避免连续编辑产生过多快照
       viewportHeight: 700, // 手机视口实际高度（高度自适应填充后由 ResizeObserver 实测更新）
-      // 画布背景模式：checker（棋盘格） / white（白色） / gray（浅灰）
+      // 画布背景模式：checker（棋盘格） / white（白色） / gray（浅灰） / black（近黑，深色卡片对色用）
       canvasBg: 'gray',
       // 刷新按钮进行态：图标自转 + 禁用，避免连点与「点了没反应」
       refreshing: false,
@@ -674,6 +686,7 @@ export default {
         { key: 'checker', label: '棋盘' },
         { key: 'white', label: '白色' },
         { key: 'gray', label: '浅灰' },
+        { key: 'black', label: '黑色' },
       ],
       // —— 预览区宽度可调（拖拽分隔条 / 预设尺寸，画布按实际像素宽度布局，无 transform 缩放）——
       _previewWidthPx: 372, // 预览列宽度（像素，持久化到 localStorage）；第一次打开未主动设置时默认 372px
@@ -934,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,
@@ -1215,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
@@ -1251,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，
@@ -1261,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)
@@ -1339,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)
@@ -1355,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)
@@ -1396,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)
@@ -1461,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
@@ -1472,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
       }
     },
     /** 结构树选中节点 */
@@ -2283,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;