cardbuddy 0.9.1 → 0.11.0

package/dist/vendored/components/DebugPanel.vue

@@ -1,7 +1,8 @@
 <!--
   调试面板：三个标签页。
-  - 数据绑定：当前 rootScope 的实时 JSON（初始数据 / 落盘 / 保存高亮比对源）。
-    本地调试的所有交互只写「运行态」，不会改这里，故调试中此 tab 保持不变、保存不亮。
+  - 变量：schema.dictionary.inputParams 的增 / 删 / 改（变量名 · 中文名 · 类型 · 默认值 · 描述），
+    即卡片对外声明的入参；默认值同时是设计期 mock 基线，落到 rt.rootScope 供画布预览。
+    底部「配置变量 mock」进入二级视图，以 Raw JSON 直接编辑整份设计期数据。
   - 组件结构：当前卡片的组件层级树（参考编辑器「结构」面板）
   - 卡片来源：导入来源元数据
 
@@ -30,47 +31,92 @@
     </div>
 
     <div class="debug__body">
-      <template v-if="activeTab === 'scope'">
-        <div class="debug__scope-wrap" :class="{ 'debug__scope-wrap--raw': rawMode }">
-          <!-- Raw 模式：直接编辑原始 JSON（CodeJar + Prism 语法高亮） -->
-          <template v-if="rawMode">
-            <div class="debug__scope-raw">
-              <div
-                ref="rawEditor"
-                class="debug__raw-editor"
-                spellcheck="false"
-              ></div>
-              <p v-if="rawError" class="debug__raw-err">{{ rawError }}</p>
-            </div>
-            <div class="debug__scope-foot">
-              <button class="debug__copy debug__copy--primary" type="button" @click="saveRaw">
-                <svg class="debug__copy-icn" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-check" /></svg>应用
-              </button>
-              <button class="debug__copy" type="button" @click="exitRaw">取消</button>
-            </div>
-          </template>
-          <!-- 默认模式：JSON 树 -->
-          <template v-else>
-            <div class="debug__scope-tree">
-              <JsonTree :data="rt.rootScope" :rt="rt" :editable="true" :schema="schema" />
-            </div>
-            <div class="debug__scope-foot">
-              <span v-if="copied" class="debug__copied">已复制 ✓</span>
-              <button class="debug__copy" type="button" title="切换为 Raw JSON 编辑" @click="enterRaw">
-                <svg class="debug__copy-icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></svg>Raw
-              </button>
-              <button class="debug__copy" type="button" @click="copyScope">
-                <svg class="debug__copy-icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-copy-sm" /></svg>复制
-              </button>
-              <span class="debug__sep"></span>
-              <button class="debug__copy debug__copy--primary" type="button" @click="onCommit">
-                <svg class="debug__copy-icn" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-check" /></svg>应用
-              </button>
-              <button class="debug__copy debug__copy--warn" type="button" @click="$emit('reset-import')" title="丢弃内存编辑，从磁盘重新载入（导入优先于编辑）">
-                <svg class="debug__copy-icn" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-reset" /></svg>重置
-              </button>
+      <template v-if="activeTab === 'vars'">
+        <!-- 变量列表视图：管理 schema.dictionary.inputParams（变量属性的增 / 删 / 改） -->
+        <div v-if="varsMode === 'list'" class="vars">
+          <!-- 空态占位：与卡片来源 / API 调用面板同款语言 -->
+          <div v-if="!inputParams.length" class="empty-state">
+            <span class="empty-state__badge" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-settings" /></svg>
+            </span>
+            <p class="debug__empty">暂无变量</p>
+            <p class="empty-state__hint">变量与 schema.dictionary.inputParams 一一对应：绑定表达式以 $key 引用，mock 值供设计期预览</p>
+          </div>
+          <ul v-else class="vars__list">
+            <li v-for="(p, i) in inputParams" :key="p.key || i" class="vars__row" @dblclick="openVarDlg(i)">
+              <span class="vars__key">{{ p.key }}</span>
+              <span class="vars__type" :class="'vars__type--' + (p.type || 'string')">{{ p.type || 'string' }}</span>
+              <span v-if="hasMock(p)" class="vars__mock" title="已配置 mock（dictionary.mocks，设计期覆盖默认值）">m</span>
+              <span class="vars__name" :title="[p.name, p.desc].filter(Boolean).join(' · ')">{{ p.name || p.desc || '' }}</span>
+              <!-- 操作区双击不冒泡到行：连点复制/删除/编辑钮时不误开编辑弹窗 -->
+              <span class="vars__ops" @dblclick.stop>
+                <!-- 复制变量名：复制当前变量 key（绑定以 $key 引用），无变量名时禁用 -->
+                <button
+                  class="vars__op"
+                  type="button"
+                  :disabled="!p.key"
+                  :title="copiedVar === i ? '已复制 ✓' : p.key ? '复制变量名' : '暂无变量名'"
+                  @click="copyVarName(p, i)"
+                >
+                  <span v-if="copiedVar === i" class="debug__copy-ok">✓</span>
+                  <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-copy-sm" /></svg>
+                </button>
+                <button class="vars__op" type="button" title="编辑变量" @click="openVarDlg(i)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-gear" /></svg>
+                </button>
+                <button class="vars__op vars__op--del" type="button" title="删除变量" @click="askDeleteVar(i)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-trash" /></svg>
+                </button>
+              </span>
+            </li>
+          </ul>
+          <!-- 右下角悬浮操作组：与 mock 视图悬浮条同语言，不占固定行高 -->
+          <div class="vars__fabs">
+            <button class="debug__copy" type="button" title="新增变量（写入 dictionary.inputParams）" @click="openVarDlg(null)">+ 添加变量</button>
+            <button v-if="inputParams.length" class="debug__copy" type="button" title="以 Raw JSON 编辑全部变量的设计期 mock 数据" @click="varsMode = 'mock'">配置变量 mock</button>
+          </div>
+        </div>
+        <!-- mock 二级视图：仅 Raw JSON（CodeJar + Prism 高亮）；右下角操作按钮只在此出现 -->
+        <div v-else class="debug__scope-wrap debug__scope-wrap--raw">
+          <div class="vars__mockhead">
+            <button class="vars__back" type="button" title="返回变量列表" @click="leaveMock">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6" /></svg>
+              变量
+            </button>
+            <span class="vars__mocktitle">变量 mock · 设计期覆盖（dictionary.mocks · Raw JSON）</span>
+            <span class="vars__mockhint">仅设计期生效 · 未列出的键回退默认值</span>
+          </div>
+          <div class="debug__scope-raw">
+            <!-- 报错提示条：与顶部提示条同语言（语义色软底 + 图标 + 关闭），钉在编辑器顶部不挤占编辑区 -->
+            <div v-if="rawError" class="raw-err-bar" role="alert">
+              <svg class="raw-err-bar__icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-alert-triangle" /></svg>
+              <span class="raw-err-bar__msg">{{ rawError }}</span>
+              <button class="raw-err-bar__close" type="button" title="关闭" @click="rawError = ''">✕</button>
             </div>
-          </template>
+            <div
+              ref="rawEditor"
+              class="debug__raw-editor"
+              spellcheck="false"
+            ></div>
+          </div>
+          <div class="debug__scope-foot">
+            <!-- 右下角悬浮组内的返回：与头部 chip 同一 leaveMock 语义，手不离编辑区即可退出二级视图 -->
+            <button class="debug__copy" type="button" title="返回变量列表" @click="leaveMock">
+              <svg class="debug__copy-icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6" /></svg>返回
+            </button>
+            <span class="debug__sep"></span>
+            <span v-if="copied" class="debug__copied">已复制 ✓</span>
+            <button class="debug__copy" type="button" @click="copyScope">
+              <svg class="debug__copy-icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-copy-sm" /></svg>复制
+            </button>
+            <span class="debug__sep"></span>
+            <button class="debug__copy debug__copy--primary" type="button" @click="saveRaw">
+              <svg class="debug__copy-icn" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-check" /></svg>应用
+            </button>
+            <button class="debug__copy debug__copy--warn" type="button" @click="$emit('reset-import')" title="丢弃内存编辑，从磁盘重新载入（导入优先于编辑）">
+              <svg class="debug__copy-icn" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-reset" /></svg>重置
+            </button>
+          </div>
         </div>
       </template>
 
@@ -138,7 +184,7 @@
               </dd>
             </div>
           </dl>
-          <p class="debug__meta-hint">导入优先于编辑：点「数据绑定」tab 的「重置为导入镜像」可丢弃内存编辑、从磁盘重新载入最新导入。</p>
+          <p class="debug__meta-hint">导入优先于编辑：在「变量」tab →「配置变量 mock」里点「重置」，可丢弃内存编辑、从磁盘重新载入最新导入。</p>
         </div>
       </template>
     </div>
@@ -250,7 +296,7 @@
       </button>
       <!-- 本地开发服务连接状态：连接图标 + 状态文案，颜色与右上角「连接」按钮实时同步（复用 devSvcClass / devSvcTitle / devSvcLabel）。
            可点击：弹出 / 收起底部「服务日志」面板（实时镜像所连 cardbuddy 终端输出）。
-           语义色本身已表达连接态，故不设选中态，仅 hover 提示可点。 -->
+           仅重连 / 断开 / 未配置等_warn、danger 态着语义色，连接成功用状态栏默认色；不设选中态，仅 hover 提示可点。 -->
       <button
         class="statusbar__item statusbar__conn"
         :class="devSvcClass"
@@ -448,6 +494,101 @@
       </div>
     </section>
     </Teleport>
+
+    <!-- 变量添加 / 编辑弹窗：与节点属性面板同构（ni-overlay / ni-panel / ni-head / ni-foot），
+         宽度 · 字号 · 控件高度 · 发丝线分隔全部沿用 node-inspector 的视觉语言；
+         默认值按类型分控件：数组 / 对象走 CodeJar 代码编辑区（高亮 + 缩进 + 大段粘贴，确定时自动格式化）、
+         字符串走多行文本域、数字走带 −/+ 的 NumberStepper、布尔走 SetSegment 分段单选。 -->
+    <transition name="modal">
+      <div v-if="varDlg" class="ni-overlay" @click.self="varDlg = null">
+        <div class="ni-panel modal-card vars-dlg" role="alertdialog" aria-modal="true" :aria-label="varDlg.index == null ? '添加变量' : '编辑变量'">
+          <div class="ni-head">
+            <span class="ni-title">{{ varDlg.index == null ? '添加变量' : '编辑变量' }}<em class="ni-cls">{{ varDlg.form.key || '未命名' }}</em></span>
+            <button class="ni-close" type="button" title="关闭" @click="varDlg = null"></button>
+          </div>
+          <div class="ni-body">
+            <div class="ni-scroll">
+              <div class="ni-field-row">
+                <label class="ni-field-label"><i>*</i>变量名</label>
+                <input class="ni-input" type="text" v-model="varDlg.form.key" placeholder="英文标识，绑定以 $key 引用" />
+              </div>
+              <div class="ni-field-row">
+                <label class="ni-field-label"><i>*</i>中文名</label>
+                <input class="ni-input" type="text" v-model="varDlg.form.name" placeholder="中文名" />
+              </div>
+              <div class="ni-field-row">
+                <label class="ni-field-label"><i>*</i>类型</label>
+                <!-- 类型下拉：触发器与选项都走「中文名 + 彩色类型标签」，标签直接复用变量列表的
+                     .vars__type / .vars__type--<type>（同一套 --type-* 语义色），两处视觉完全一致 -->
+                <Dropdown class="vars-dlg__ctrl" block size="sm" :value="varDlg.form.type" :options="varTypeOptions" @change="onVarTypeChange">
+                  <template #current="{ opt, text }">
+                    <span v-if="opt" class="vars-type-pick">
+                      <span class="vars-type-pick__name">{{ opt.value }}</span>
+                      <span class="vars__type" :class="'vars__type--' + opt.key">{{ opt.key }}</span>
+                    </span>
+                    <template v-else>{{ text }}</template>
+                  </template>
+                  <template #option="{ opt }">
+                    <span class="vars-type-pick">
+                      <span class="vars-type-pick__name">{{ opt.value }}</span>
+                      <span class="vars__type" :class="'vars__type--' + opt.key">{{ opt.key }}</span>
+                    </span>
+                  </template>
+                </Dropdown>
+              </div>
+              <!-- 默认值按类型分四种控件：数组 / 对象 = CodeJar 代码编辑区、字符串 = 多行文本域、
+                   数字 = 带 −/+ 的 NumberStepper、布尔 = 复用 SetSegment 的 true / false 分段单选。四者统一以文本承载
+                   （varDlg.form.defaultValue），确定时仍由 parseDefault 按类型解析。 -->
+              <div class="ni-field-row ni-field-row--top">
+                <label class="ni-field-label">默认值</label>
+                <div v-if="isComplexType(varDlg.form.type)" ref="dlgCode" class="vars-dlg__code" spellcheck="false"></div>
+                <textarea
+                  v-else-if="varDlg.form.type === 'string'"
+                  class="ni-input vars-dlg__str"
+                  v-model="varDlg.form.defaultValue"
+                  :placeholder="scalarPlaceholder('string')"
+                ></textarea>
+                <NumberStepper
+                  v-else-if="varDlg.form.type === 'number'"
+                  class="vars-dlg__ctrl"
+                  :value="varDlg.form.defaultValue"
+                  :placeholder="scalarPlaceholder('number')"
+                  @input="varDlg.form.defaultValue = $event"
+                />
+                <SetSegment
+                  v-else
+                  class="vars-dlg__ctrl"
+                  :value="varDlg.form.defaultValue"
+                  :options="{ iParamList: varBoolOptions }"
+                  @input="varDlg.form.defaultValue = $event"
+                />
+              </div>
+              <div class="ni-field-row ni-field-row--top">
+                <label class="ni-field-label">描述</label>
+                <textarea class="ni-input vars-dlg__desc" v-model="varDlg.form.desc" placeholder="可选"></textarea>
+              </div>
+              <p v-if="varDlgError" class="vars-dlg__err">{{ varDlgError }}</p>
+            </div>
+          </div>
+          <div class="ni-foot">
+            <span class="ni-tip">默认值入 defaultValue；设计期覆盖见「配置变量 mock」</span>
+            <div class="ni-foot-btns">
+              <button class="ni-btn ni-btn--ghost" type="button" @click="varDlg = null">取消</button>
+              <button class="ni-btn" type="button" @click="confirmVarDlg">确定</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <ConfirmDialog
+      :visible="delVarTarget != null"
+      title="删除变量"
+      :message="delVarMessage"
+      :severity="delVarSeverity"
+      :confirm-text="delVarConfirmText"
+      @confirm="confirmDeleteVar"
+      @cancel="delVarTarget = null"
+    />
   </aside>
 </template>
 
@@ -457,6 +598,10 @@ import StructureTree from './StructureTree.vue'
 import NodeInspector from './NodeInspector.vue'
 import EventEditor from './EventEditor.vue'
 import LogValue from './LogValue.vue'
+import Dropdown from './Dropdown.vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+import NumberStepper from './NumberStepper.vue'
+import SetSegment from './setters/SetSegment.vue'
 import { COMPONENT_META } from '@/runtime/toPreview.js'
 import { copyText } from '@/runtime/clipboard.js'
 // 结构树「粘贴」按钮的 disabled 态：剪贴板是否有可粘贴节点
@@ -467,12 +612,141 @@ import { CodeJar } from 'codejar'
 import Prism from 'prismjs'
 import 'prismjs/components/prism-json'
 import { apiFetch, subscribeServiceLog, fetchServiceLogs } from '@/api.js'
+// mock 覆盖仓与派生真相：与 App / 服务端共用同一实现，避免判据漂移
+import { buildDataFromSchema, readMocks, hasMockValue } from '../../server/core/buildDataFromSchema.js'
 // 服务日志面板：终端 ANSI（SGR）→ HTML，1:1 还原 cardbuddy 的 chalk 配色
 import { ansiToHtml, stripAnsi } from '@/ansi.js'
 
 /** 服务日志在前端保留的最大行数（与服务端环形缓冲同量级，超出裁剪最旧的）。 */
 const SVC_MAX_LINES = 800
 
+/**
+ * 容错 JSON 解析（对象字面量友好）：先做一遍「格式化容忍」清理，再交严格 JSON.parse ——
+ * 报错只针对对象结构本身非法（括号不配对 / 悬空冒号 / 未闭合字符串等），
+ * 手写习惯一律容忍并规范化：无引号键 / 单引号字符串 / 注释 / 尾逗号 /
+ * 分号当逗号 / 重复逗号 / undefined·NaN·Infinity 归 null。
+ * 字符串字面量原样搬运（含转义），不会误伤内容里的 // 、,} 等字符；
+ * 清理后的标准 JSON 由调用方（应用 / 确定）回灌编辑器完成「保存即格式化」。
+ * @param {string} text
+ * @returns {{ value: any } | { error: string }}
+ */
+function parseJsonLenient(text) {
+  const src = String(text == null ? '' : text).replace(/^\uFEFF/, '')
+  let out = ''
+  let i = 0
+  const n = src.length
+  const lastNonWs = () => {
+    let k = out.length - 1
+    while (k >= 0 && /\s/.test(out[k])) k -= 1
+    return k
+  }
+  // 逗号去重入栈： leading 逗号（紧跟 [ { ）与连续逗号都不输出
+  const pushComma = () => {
+    const k = lastNonWs()
+    if (k >= 0 && out[k] !== ',' && out[k] !== '[' && out[k] !== '{') out += ','
+  }
+  const skipWs = (from) => {
+    let k = from
+    while (k < n && /\s/.test(src[k])) k += 1
+    return k
+  }
+  while (i < n) {
+    const ch = src[i]
+    // 双引号字符串：原样搬运（含转义）
+    if (ch === '"') {
+      let j = i + 1
+      while (j < n) {
+        if (src[j] === '\\') { j += 2; continue }
+        if (src[j] === '"') { j += 1; break }
+        j += 1
+      }
+      out += src.slice(i, j)
+      i = j
+      continue
+    }
+    // 单引号字符串：转双引号（内部双引号转义、\' 还原为裸引号）
+    if (ch === '\'') {
+      let j = i + 1
+      let body = ''
+      while (j < n) {
+        const c = src[j]
+        if (c === '\\' && j + 1 < n) {
+          const nx = src[j + 1]
+          if (nx === '\'') { body += '\''; j += 2; continue }
+          if (nx === '"') { body += '\\\"'; j += 2; continue }
+          body += c + nx
+          j += 2
+          continue
+        }
+        if (c === '\'') { j += 1; break }
+        if (c === '"') { body += '\\\"'; j += 1; continue }
+        body += c
+        j += 1
+      }
+      out += '"' + body + '"'
+      i = j
+      continue
+    }
+    // 注释：// 与 /* */
+    if (ch === '/' && src[i + 1] === '/') {
+      while (i < n && src[i] !== '\n') i += 1
+      continue
+    }
+    if (ch === '/' && src[i + 1] === '*') {
+      const close = src.indexOf('*/', i + 2)
+      i = close === -1 ? n : close + 2
+      continue
+    }
+    // 分号视同逗号；逗号去重
+    if (ch === ';' || ch === ',') {
+      pushComma()
+      i += 1
+      continue
+    }
+    // 标识符：后跟冒号 → 键，补双引号；否则原样（true/false/null 等关键字）
+    if (/[A-Za-z_$]/.test(ch)) {
+      let j = i
+      while (j < n && /[A-Za-z0-9_$]/.test(src[j])) j += 1
+      const token = src.slice(i, j)
+      if (src[skipWs(j)] === ':') out += '"' + token + '"'
+      else if (token === 'undefined' || token === 'NaN' || token === 'Infinity') out += 'null'
+      else out += token
+      i = j
+      continue
+    }
+    // 数字（含负号 / 指数）：后跟冒号 → 键，补双引号；-Infinity 归 null
+    if (ch === '-' && src.startsWith('Infinity', i + 1)) {
+      out += 'null'
+      i += 9
+      continue
+    }
+    if (/[0-9]/.test(ch) || (ch === '-' && /[0-9]/.test(src[i + 1] || ''))) {
+      let j = i
+      while (j < n && /[0-9eE+\-.]/.test(src[j])) j += 1
+      const token = src.slice(i, j)
+      if (src[skipWs(j)] === ':') out += '"' + token + '"'
+      else out += token
+      i = j
+      continue
+    }
+    // 收括号：抹掉所有尾逗号
+    if (ch === '}' || ch === ']') {
+      let k = lastNonWs()
+      while (k >= 0 && out[k] === ',') {
+        out = out.slice(0, k) + out.slice(k + 1)
+        k = lastNonWs()
+      }
+    }
+    out += ch
+    i += 1
+  }
+  try {
+    return { value: JSON.parse(out.trim() || '{}') }
+  } catch (e) {
+    return { error: e.message }
+  }
+}
+
 /**
  * 行级别判定：只认 logger.js 的行首标签（HH:MM:SS.mmm INFO/OK/WARN/ERR），
  * 其余输出（console.* / 第三方 / vite）统一 info，避免把卡片内容里的「错误」字样误判。
@@ -515,9 +789,14 @@ function deepEqual(a, b) {
   return true
 }
 
+/** 深拷贝 JSON 安全值；变量默认值写入 schema / rootScope 前隔断引用 */
+function cloneJson(v) {
+  return v === undefined ? undefined : JSON.parse(JSON.stringify(v))
+}
+
 export default {
   name: 'DebugPanel',
-  components: { JsonTree, StructureTree, NodeInspector, EventEditor, LogValue },
+  components: { JsonTree, StructureTree, NodeInspector, EventEditor, LogValue, Dropdown, ConfirmDialog, NumberStepper, SetSegment },
   props: {
     rt: { type: Object, required: true },
     preview: { type: Object, default: null },
@@ -532,9 +811,9 @@ export default {
     // 拖拽移动成功令牌：App 在节点拖拽移动成功后自增，透传给结构树，
     // 触发「选中被拖节点 + 仅展开其祖先链、其余全部折叠」。
     moveCollapseToken: { type: Number, default: 0 },
-    // 当前激活的调试面板 tab（绑定数据/组件结构/卡片来源），由 App 统一管理，
+    // 当前激活的调试面板 tab（变量/组件结构/卡片来源），由 App 统一管理，
     // 便于画布 Ctrl/⌘ 点击定位在「组件结构」tab 激活时才生效。
-    activeTab: { type: String, default: 'scope' },
+    activeTab: { type: String, default: 'vars' },
     // 本地开发服务连接状态：复用 App 中顶栏「连接」按钮同款状态/配色（devSvcClass/devSvcTitle/devSvcLabel），
     // 供底部状态栏展示「连接图标 + 状态文案」，与右上角按钮实时同步（颜色一致、状态一致）。
     devSvcClass: { type: String, default: 'app__btn--warn' },
@@ -550,6 +829,9 @@ export default {
     return {
       copied: false,
       copyTimer: null,
+      // 刚复制过默认值的变量行下标（图标变 ✓ 反馈），null=无
+      copiedVar: null,
+      varCopyTimer: null,
       // 底部面板模式：''（收起） | 'binding'（变量绑定错误） | 'event'（事件日志 / 执行错误）
       errorPanel: '',
       // 事件面板内部 tab：'log'（主动日志） | 'err'（执行错误），打开面板时按是否有错误自动定位
@@ -581,20 +863,79 @@ export default {
       // 事件编辑弹框目标节点（点击「事件」徽标时单独弹出，与属性面板解耦）
       editingEventComp: null,
       eventEditorKey: 0,
-      // Raw 编辑模式状态
-      rawMode: false,
+      // Raw JSON 编辑状态（mock 二级视图的编辑器内容与解析错误）
       rawText: '',
       rawError: '',
+      // 变量 tab 二级视图：'list'（变量列表，管理 inputParams）| 'mock'（Raw JSON 编辑 mock 数据）
+      varsMode: 'list',
+      // 变量添加 / 编辑弹窗：null | { index: null|number, form: { key, name, type, defaultValue, desc } }
+      varDlg: null,
+      varDlgError: '',
+      // 待删除变量下标（ConfirmDialog 确认中）
+      delVarTarget: null,
+      // 类型选项：value 只留中文名，英文类型名由 Dropdown 的 current / option 插槽渲染成彩色标签
+      varTypeOptions: [
+        { key: 'string', value: '字符串' },
+        { key: 'number', value: '数字' },
+        { key: 'boolean', value: '布尔' },
+        { key: 'array', value: '数组' },
+        { key: 'object', value: '对象' },
+      ],
+      // 布尔默认值的分段单选项（交 SetSegment 渲染，即属性面板同款 .st-seg）：
+      // 值仍以文本承载（'true' / 'false'），与 parseDefault 的解析口径一致
+      varBoolOptions: [
+        { key: 'true', value: 'true' },
+        { key: 'false', value: 'false' },
+      ],
       // 导入来源元数据（Phase E）：GET /__import-meta/:id，无侧车时为 null
       importMeta: null,
       tabs: [
-        { key: 'scope', label: '绑定数据' },
+        { key: 'vars', label: '变量' },
         { key: 'structure', label: '组件结构' },
         { key: 'meta', label: '卡片来源' },
       ],
     }
   },
   computed: {
+    /** 设计期 mock 覆盖表：schema.dictionary.mocks（key → 值）；m 徽标与 mock 编辑器的唯一数据源 */
+    mocks() {
+      return readMocks(this.schema) || {}
+    },
+    /** 变量定义列表：schema.dictionary.inputParams（变量 tab 的唯一数据源） */
+    inputParams() {
+      const dict = this.schema && this.schema.dictionary
+      return dict && Array.isArray(dict.inputParams) ? dict.inputParams : []
+    },
+    /** 删除确认文案：点名变量与影响面 */
+    /** 待删变量的引用统计（绑定表达式 / 事件脚本 / 其它文本），供删除确认分级 */
+    delVarRefs() {
+      const p = this.delVarTarget == null ? null : this.inputParams[this.delVarTarget]
+      return this.scanVarRefs(p && p.key)
+    },
+    /** 被引用 = danger（红·禁止图标，明确破坏面）；未被引用 = warn（橙黄·三角，普通不可逆操作） */
+    delVarSeverity() {
+      const r = this.delVarRefs
+      return r.binding + r.event + r.other > 0 ? 'danger' : 'warn'
+    },
+    delVarConfirmText() {
+      return this.delVarSeverity === 'danger' ? '仍要删除' : '删除'
+    },
+    delVarMessage() {
+      const p = this.delVarTarget == null ? null : this.inputParams[this.delVarTarget]
+      if (!p) return ''
+      // 中文名与 key 相同时不重复展示括号
+      const nm = p.name && p.name !== p.key ? '（' + p.name + '）' : ''
+      const r = this.delVarRefs
+      const total = r.binding + r.event + r.other
+      if (total > 0) {
+        const parts = []
+        if (r.binding) parts.push(`绑定表达式 ${r.binding} 处`)
+        if (r.event) parts.push(`事件脚本 ${r.event} 处`)
+        if (r.other) parts.push(`其它文本 ${r.other} 处`)
+        return `变量「${p.key}」${nm}仍被${parts.join('、')}引用（共 ${total} 处）。删除后这些引用将取不到值，画布可能出现空白或执行报错，请先迁移再删除。`
+      }
+      return `变量「${p.key}」${nm}当前未被任何绑定表达式或事件脚本引用。删除后变量定义与 mock 值一并移除，不可恢复。`
+    },
     /** 服务日志空态标题：按连接态区分「没配 / 没连上 / 连上了但还没输出」 */
     svcEmptyText() {
       if (this.devSvcConn === 'unconfigured') return '未配置本地开发服务'
@@ -692,9 +1033,13 @@ export default {
     cardId: {
       immediate: true,
       handler() {
-        this.rawMode = false
         this.rawError = ''
         this.destroyJar()
+        // 换卡回到变量列表视图，并关掉可能开着的变量弹窗 / 删除确认
+        this.varsMode = 'list'
+        this.varDlg = null
+        this.varDlgError = ''
+        this.delVarTarget = null
         this.inspectingComp = null
         this.editingEventComp = null
         this.importMeta = null
@@ -711,12 +1056,49 @@ export default {
     // 切到「来源」tab 时按需拉取导入来源元数据（懒加载，消除自动 404）。
     activeTab(n) {
       if (n === 'meta') this.fetchImportMeta()
+      // 离开变量 tab：mock 编辑器随视图卸载，销毁 CodeJar 防泄漏；回到列表视图
+      if (n !== 'vars') {
+        this.varsMode = 'list'
+        this.rawError = ''
+        this.destroyJar()
+        this.varDlg = null
+      }
+    },
+    // 变量弹窗开合：打开且为数组 / 对象类型时挂载 CodeJar 代码编辑区；关闭即销毁
+    varDlg(n) {
+      if (!n) {
+        this.destroyDlgJar()
+        return
+      }
+      this.varDlgError = ''
+      if (this.isComplexType(n.form.type)) this.$nextTick(() => this.initDlgJar())
+    },
+    // 类型切换：四种默认值控件互换，旧文本按新类型规整（能沿用则沿用，不能则给该类型的空态）；
+    // 容器类型还要等 DOM 换出后重新挂 CodeJar
+    'varDlg.form.type'(n, o) {
+      if (!this.varDlg || n === o) return
+      this.varDlg.form.defaultValue = this.normalizeDefaultText(n, this.varDlg.form.defaultValue)
+      if (this.isComplexType(n)) this.$nextTick(() => this.initDlgJar())
+      else this.destroyDlgJar()
+    },
+    // 进入 mock 二级视图：序列化 rootScope 交 CodeJar 托管；退出即销毁实例
+    varsMode(n) {
+      if (n === 'mock') {
+        this.seedRawFromMocks()
+        this.$nextTick(() => this.initJar())
+      } else {
+        this.rawError = ''
+        this.destroyJar()
+      }
     },
     // schema 引用变化（撤销/重做、刷新重载会整体替换对象；就地编辑只 mutate 不换引用）
     // 时关闭已打开的节点属性/事件面板，避免面板持有已被替换的旧预览节点引用。
     schema() {
       this.inspectingComp = null
       this.editingEventComp = null
+      // schema 整体被替换（重置 / 撤销重做 / 外部重载）：mock 视图开着时同步重播种，
+      // 否则 CodeJar 会停留在「应用」前的旧文本，重置按钮看起来像没生效
+      if (this.varsMode === 'mock') this.seedRawFromMocks()
     },
   },
   mounted() {
@@ -729,6 +1111,7 @@ export default {
   beforeUnmount() {
     // DebugPanel 一般常驻，但保险起见卸载时销毁 CodeJar、清理可能残留的拖拽监听
     this.destroyJar()
+    this.destroyDlgJar()
     this.cancelResize()
     this.stopSvcLog()
   },
@@ -823,18 +1206,6 @@ export default {
         /* localStorage 不可用时忽略 */
       }
     },
-    /** 进入 Raw 模式：把当前 rootScope 序列化为可编辑文本，并用 CodeJar 托管高亮 */
-    enterRaw() {
-      this.rawError = ''
-      try {
-        this.rawText = JSON.stringify(this.rt.rootScope, (k, v) => (k === '_schemaNode' ? undefined : v), 2)
-      } catch (e) {
-        this.rawText = ''
-        this.rawError = '无法序列化当前数据：' + (e && e.message)
-      }
-      this.rawMode = true
-      this.$nextTick(() => this.initJar())
-    },
     /** 用 CodeJar 初始化原始 JSON 编辑器：contenteditable + Prism(json) 高亮 */
     initJar() {
       const el = this.$refs.rawEditor
@@ -855,6 +1226,9 @@ export default {
         this.rawText = code
         if (this.rawError) this.rawError = '' // 用户再次输入即清除旧错误
       })
+      // 开发期暴露 Raw 编辑器句柄供 E2E 程序化写入（与 window.__rt 同源约定）；生产构建不暴露。
+      // 合成 input 事件驱动不了 CodeJar，E2E 经 updateCode 走真实 onUpdate → 「应用」路径。
+      if (import.meta.env.DEV) window.__rawEditor = this._jar
       this.$nextTick(() => el.focus())
     },
     /** 销毁 CodeJar 实例（退出/保存/卸载/切卡时调用） */
@@ -863,46 +1237,94 @@ export default {
         this._jar.destroy()
       }
       this._jar = null
+      if (typeof window !== 'undefined' && window.__rawEditor) window.__rawEditor = null
     },
-    /** 取消 Raw 编辑：放弃改动，切回默认树形模式 */
-    exitRaw() {
-      this.rawMode = false
-      this.rawError = ''
-      this.destroyJar()
+    /** 变量弹窗「默认值」代码编辑区（数组 / 对象）：CodeJar + Prism(json)，与 mock Raw 编辑器同方案 */
+    initDlgJar() {
+      const el = this.$refs.dlgCode
+      if (!el) return
+      this.destroyDlgJar()
+      const highlight = (editor) => {
+        editor.innerHTML = Prism.highlight(editor.textContent, Prism.languages.json, 'json')
+      }
+      this._dlgJar = CodeJar(el, highlight, {
+        tab: '  ',
+        indentOn: /[({[]$/,
+        addClosing: true,
+        history: true,
+      })
+      this._dlgJar.updateCode(this.varDlg ? this.varDlg.form.defaultValue : '')
+      this._dlgJar.onUpdate((code) => {
+        if (this.varDlg) this.varDlg.form.defaultValue = code
+        if (this.varDlgError) this.varDlgError = ''
+      })
+      // 开发期暴露弹窗代码区句柄供 E2E 程序化写入（合成 input 事件驱动不了 CodeJar）；生产不暴露
+      if (import.meta.env.DEV) window.__dlgEditor = this._dlgJar
+    },
+    destroyDlgJar() {
+      if (this._dlgJar && this._dlgJar.destroy) this._dlgJar.destroy()
+      this._dlgJar = null
+      if (typeof window !== 'undefined' && window.__dlgEditor) window.__dlgEditor = null
+    },
+    /** 标量 → 容器切换时的种子文本：旧文本形状匹配则格式化沿用，否则给空容器骨架 */
+    complexSeed(type, text) {
+      const empty = type === 'array' ? '[]' : '{}'
+      const t = String(text == null ? '' : text).trim()
+      if (!t) return empty
+      try {
+        const v = JSON.parse(t)
+        const shapeOk = type === 'array' ? Array.isArray(v) : !!v && typeof v === 'object'
+        return shapeOk ? JSON.stringify(v, null, 2) : empty
+      } catch (e) {
+        return empty
+      }
+    },
+    /**
+     * 默认值统一以文本承载，但四种类型「合法文本」的形态不同：切类型 / 打开弹窗时按目标类型规整，
+     * 免得把上一类型的字面量塞进新控件（如布尔的 'true' 落进数字步进框）。
+     * 字符串原样保留（含首尾空白与换行）——占位提示已明示「字符串原样保存」。
+     */
+    normalizeDefaultText(type, text) {
+      if (this.isComplexType(type)) return this.complexSeed(type, text)
+      const t = String(text == null ? '' : text).trim()
+      if (type === 'number') return t !== '' && Number.isFinite(Number(t)) ? String(Number(t)) : ''
+      if (type === 'boolean') return /^(true|1)$/i.test(t) ? 'true' : 'false'
+      return String(text == null ? '' : text)
     },
-    /** 保存 Raw 编辑：先校验 JSON 合法性与类型，通过后替换 rootScope */
+    /** 应用 Raw 编辑：校验 JSON 合法性与形状 → 写入 dictionary.mocks → 重算预览数据（默认值之上叠 mock）；
+     *  写入即按 2 空格标准格式回灌编辑器；留在 mock 视图继续编辑 */
     saveRaw() {
-      const text = (this.rawText || '').trim()
-      if (!text) {
-        this.rawError = '内容不能为空'
+      // 先容错清理（注释 / 尾逗号）再严格校验：报错判定基于清理后的文本
+      const parsed = parseJsonLenient(this.rawText)
+      if (parsed.error) {
+        this.rawError = 'JSON 格式错误：' + parsed.error
         return
       }
-      let parsed
-      try {
-        parsed = JSON.parse(text)
-      } catch (e) {
-        this.rawError = 'JSON 格式错误：' + e.message
+      if (parsed.value === null || typeof parsed.value !== 'object' || Array.isArray(parsed.value)) {
+        this.rawError = '变量 mock 必须是 JSON 对象（{ ... }）'
         return
       }
-      if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
-        this.rawError = '数据绑定必须是对象（{ ... }）'
+      const schema = this.schema
+      if (!schema) {
+        this.rawError = '当前未载入卡片'
         return
       }
-      this.rt.setRootScope(parsed)
-      // 等待 watcher 把 rootScope 同步进 currentSchema.dictionary 后再落定历史，
-      // 使本次 Raw 编辑作为一笔撤销记录（与「应用」按钮同路径）。
+      if (!schema.dictionary || typeof schema.dictionary !== 'object') {
+        schema.dictionary = { dictionaryList: [], inputParams: [] }
+      }
+      schema.dictionary.mocks = parsed.value
+      // 画布数据 = defaultValue 之上按 key 叠加非空 mock；watcher 会把 rootScope 回写两仓
+      this.rt.setRootScope(buildDataFromSchema(schema, { includeMocks: true }))
+      const formatted = JSON.stringify(parsed.value, null, 2)
+      this.rawText = formatted
+      if (this._jar) this._jar.updateCode(formatted)
+      // 落定一笔撤销记录（与节点属性「应用」同路径）
       this.$nextTick(() => this.onCommit())
-      this.destroyJar()
-      this.rawMode = false
       this.rawError = ''
     },
     async copyScope() {
-      let text = ''
-      try {
-        text = JSON.stringify(this.rt.rootScope, null, 2)
-      } catch (e) {
-        text = String(this.rt.rootScope)
-      }
+      // 复制当前 mock 文档（编辑器所见即所得）
+      const text = this.rawText || ''
       const ok = await copyText(text)
       if (ok) {
         this.copied = true
@@ -925,6 +1347,226 @@ export default {
     onCommit() {
       this.$emit('schema-commit')
     },
+    // —— 变量管理（schema.dictionary.inputParams）——
+    /** 是否已配置 mock（dictionary.mocks 有数据；与 buildDataFromSchema 同判据）→ 列表行 m 徽标 */
+    hasMock(param) {
+      return hasMockValue(this.mocks, param.key)
+    },
+    /** 复制变量名（当前 key，绑定以 $key 引用）；成功后图标短暂变 ✓（与接口调用面板同款反馈节奏） */
+    async copyVarName(param, i) {
+      const text = param && param.key ? String(param.key) : ''
+      if (!text) return
+      const ok = await copyText(text)
+      if (ok) {
+        this.copiedVar = i
+        if (this.varCopyTimer) clearTimeout(this.varCopyTimer)
+        this.varCopyTimer = setTimeout(() => {
+          if (this.copiedVar === i) this.copiedVar = null
+        }, 1500)
+      }
+    },
+    isComplexType(type) {
+      return type === 'array' || type === 'object'
+    },
+    // 布尔改用单选（无占位提示），故这里只剩数字与字符串两支
+    scalarPlaceholder(type) {
+      if (type === 'number') return '数字，如 0 / 99.5'
+      return '字符串原样保存'
+    },
+    onVarTypeChange(type) {
+      if (this.varDlg) this.varDlg.form.type = type
+    },
+    /** 打开添加（index=null）/ 编辑（index=下标）弹窗；默认值统一以文本承载，确定时按类型解析 */
+    openVarDlg(index) {
+      const param = index == null ? null : this.inputParams[index]
+      const type = param ? param.type || 'string' : 'string'
+      const raw = param ? param.defaultValue : undefined
+      let text = ''
+      if (raw !== undefined && raw !== null) {
+        text = typeof raw === 'object' ? JSON.stringify(raw, null, 2) : String(raw)
+      }
+      // 按类型规整：布尔补出 'false' 让单选有落点，数字剔除非法字面量，容器格式化
+      text = this.normalizeDefaultText(type, text)
+      this.varDlgError = ''
+      this.varDlg = {
+        index,
+        form: {
+          key: param ? param.key || '' : '',
+          name: param ? param.name || '' : '',
+          type,
+          defaultValue: text,
+          desc: param ? param.desc || '' : '',
+        },
+      }
+    },
+    /** 默认值文本 → 类型化值；返回 { value } 或 { error } */
+    parseDefault(type, text) {
+      const t = String(text == null ? '' : text).trim()
+      if (this.isComplexType(type)) {
+        if (!t) return { value: type === 'array' ? [] : {} }
+        // 与 mock 编辑器同套容错：先清理注释 / 尾逗号再严格校验
+        const parsed = parseJsonLenient(t)
+        if (parsed.error) return { error: '默认值不是合法 JSON：' + parsed.error }
+        const v = parsed.value
+        if (type === 'array' && !Array.isArray(v)) return { error: '默认值需为 JSON 数组' }
+        if (type === 'object' && (typeof v !== 'object' || v === null || Array.isArray(v))) return { error: '默认值需为 JSON 对象' }
+        return { value: v }
+      }
+      if (type === 'number') {
+        if (!t) return { value: 0 }
+        const n = Number(t)
+        if (!Number.isFinite(n)) return { error: '默认值不是合法数字' }
+        return { value: n }
+      }
+      if (type === 'boolean') {
+        if (!t) return { value: false }
+        if (t === 'true' || t === '1') return { value: true }
+        if (t === 'false' || t === '0') return { value: false }
+        return { error: '布尔默认值仅接受 true / false' }
+      }
+      return { value: String(text == null ? '' : text) }
+    },
+    /** 确定：写入 inputParams 并同步 rootScope（mock 基线），再记一笔历史 */
+    confirmVarDlg() {
+      const dlg = this.varDlg
+      if (!dlg) return
+      const form = dlg.form
+      const key = String(form.key || '').trim()
+      const name = String(form.name || '').trim()
+      if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) {
+        this.varDlgError = '变量名需为字母 / 下划线开头的英文标识（绑定以 $key 引用）'
+        return
+      }
+      if (this.inputParams.some((p, i) => p.key === key && i !== dlg.index)) {
+        this.varDlgError = '已存在同名变量 ' + key
+        return
+      }
+      if (!name) {
+        this.varDlgError = '中文名不能为空'
+        return
+      }
+      const parsed = this.parseDefault(form.type, form.defaultValue)
+      if (parsed.error) {
+        this.varDlgError = parsed.error
+        return
+      }
+      // 容器类型：保存即按 2 空格标准 JSON 格式化回灌（编辑器与存档同形）
+      if (this.isComplexType(form.type)) {
+        const formatted = JSON.stringify(parsed.value, null, 2)
+        form.defaultValue = formatted
+        if (this._dlgJar) this._dlgJar.updateCode(formatted)
+      }
+      const schema = this.schema
+      if (!schema) {
+        this.varDlgError = '当前未载入卡片'
+        return
+      }
+      if (!schema.dictionary || typeof schema.dictionary !== 'object') {
+        schema.dictionary = { dictionaryList: [], inputParams: [] }
+      }
+      if (!Array.isArray(schema.dictionary.inputParams)) schema.dictionary.inputParams = []
+      const params = schema.dictionary.inputParams
+      const root = this.rt.rootScope
+      const mocks = readMocks(schema) || {}
+      const value = cloneJson(parsed.value)
+      if (dlg.index == null) {
+        params.push({ key, name, type: form.type, defaultValue: cloneJson(value), desc: String(form.desc || ''), rule: { type: '', options: {} }, children: [] })
+        // 已有 mock 覆盖时画布继续用 mock，默认值只入 defaultValue 仓
+        if (!hasMockValue(mocks, key)) root[key] = value
+      } else {
+        const param = params[dlg.index]
+        if (!param) return
+        const oldKey = param.key
+        param.key = key
+        param.name = name
+        param.type = form.type
+        param.desc = String(form.desc || '')
+        param.defaultValue = cloneJson(value)
+        if (oldKey !== key) {
+          // 改名时 mock 覆盖跟随迁移，避免旧 key 的 mock 变成孤儿 / 新 key 丢覆盖
+          if (Object.prototype.hasOwnProperty.call(mocks, oldKey)) {
+            mocks[key] = mocks[oldKey]
+            delete mocks[oldKey]
+          }
+          if (root && Object.prototype.hasOwnProperty.call(root, oldKey)) delete root[oldKey]
+        }
+        if (!hasMockValue(mocks, key)) root[key] = value
+      }
+      this.varDlg = null
+      this.onCommit()
+    },
+    askDeleteVar(index) {
+      this.delVarTarget = index
+    },
+    /** 删除：inputParams 移除 + rootScope 清键，再记一笔历史 */
+    /**
+     * 扫描变量引用面：遍历 schema（跳过 dictionary 两仓与 compiled 回声产物），
+     * 按两种引用形态匹配——表达式里的 `$key`、事件脚本里的 `state.key` / `state['key']`；
+     * 分类计数：绑定表达式（itemValue 为字符串）/ 事件脚本（code 键）/ 其它文本。
+     * 仅供删除确认分级（被引用=danger / 未被引用=warn），不做写操作。
+     */
+    scanVarRefs(key) {
+      const refs = { binding: 0, event: 0, other: 0 }
+      const schema = this.schema
+      if (!key || !schema || typeof schema !== 'object') return refs
+      const esc = String(key).replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      const boundary = '(?![A-Za-z0-9_$])'
+      const dollarRe = new RegExp('\\$' + esc + boundary)
+      const stateRe = new RegExp('state\\s*(?:\\.\\s*' + esc + boundary + '|\\[\\s*[\'"]' + esc + '[\'"]\\s*\\])')
+      const hit = (s) => dollarRe.test(s) || stateRe.test(s)
+      const walk = (v) => {
+        if (v == null) return
+        if (Array.isArray(v)) {
+          for (const item of v) walk(item)
+          return
+        }
+        if (typeof v !== 'object') return
+        for (const [k, val] of Object.entries(v)) {
+          if (k === 'dictionary' || k === 'compiled') continue
+          if (typeof val === 'string') {
+            if (!hit(val)) continue
+            if (k === 'itemValue') refs.binding += 1
+            else if (k === 'code') refs.event += 1
+            else refs.other += 1
+          } else {
+            walk(val)
+          }
+        }
+      }
+      walk(schema)
+      return refs
+    },
+    confirmDeleteVar() {
+      const param = this.delVarTarget == null ? null : this.inputParams[this.delVarTarget]
+      this.delVarTarget = null
+      if (!param || !this.schema || !this.schema.dictionary) return
+      const params = this.schema.dictionary.inputParams || []
+      const idx = params.indexOf(param)
+      if (idx >= 0) params.splice(idx, 1)
+      // mock 覆盖一并清除，避免留下孤儿 key 与误报的 m 徽标
+      const mocks = readMocks(this.schema) || {}
+      if (Object.prototype.hasOwnProperty.call(mocks, param.key)) delete mocks[param.key]
+      const root = this.rt.rootScope
+      if (root && Object.prototype.hasOwnProperty.call(root, param.key)) delete root[param.key]
+      this.onCommit()
+    },
+    /** 从 mock 二级视图回到变量列表（编辑器随视图卸载，watcher 负责销毁 CodeJar） */
+    leaveMock() {
+      this.varsMode = 'list'
+    },
+    /** 以当前 dictionary.mocks 播种 mock 编辑器文本（进入视图 / schema 被替换时共用） */
+    seedRawFromMocks() {
+      this.rawError = ''
+      try {
+        // mock 编辑器只编辑覆盖仓 dictionary.mocks（默认值在变量弹窗里改）；空表即 {}
+        this.rawText = JSON.stringify(this.mocks, null, 2)
+      } catch (e) {
+        this.rawText = ''
+        this.rawError = '无法序列化当前数据：' + (e && e.message)
+        return
+      }
+      if (this._jar) this._jar.updateCode(this.rawText)
+    },
     /** 双击结构树节点：弹出属性面板 */
     onInspect(comp) {
       this.inspectingComp = comp