cardbuddy 0.6.0

package/dist/vendored/components/RemotePreview.vue

@@ -0,0 +1,171 @@
+<template>
+  <div v-if="visible" class="rp-mask" @click.self="$emit('close')">
+    <div class="rp-card" role="dialog" aria-label="远端预览二维码">
+      <div class="rp-head">
+        <span class="rp-title">远端预览（真机扫码）</span>
+        <button class="rp-x" type="button" @click="$emit('close')" aria-label="关闭">×</button>
+      </div>
+      <div class="rp-body">
+        <div class="rp-qr-wrap">
+          <img v-if="qrDataUrl" :src="qrDataUrl" class="rp-qr" :class="{ 'rp-qr--blurred': publishing }" alt="preview qr" />
+          <div v-else class="rp-qr rp-qr--loading">{{ loading ? '准备中…' : '—' }}</div>
+          <div v-if="publishing" class="rp-qr-loading">
+            <span class="rp-spinner" />
+            <span class="rp-loading-text">正在发布预览…</span>
+          </div>
+        </div>
+        <p class="rp-tip">手机（FinMall App）扫一扫，真机查看当前卡片预览</p>
+
+        <div class="rp-url">
+          <code class="rp-url-text">{{ url || '—' }}</code>
+          <button class="rp-copy" type="button" :disabled="!url" @click="copyUrl">
+            {{ copied ? '已复制 ✓' : '复制链接' }}
+          </button>
+        </div>
+        <p v-if="warn" class="rp-warn">{{ warn }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import QRCode from 'qrcode'
+import { apiFetch } from '@/api.js'
+
+/**
+ * 复刻 ubomp-h5-sub 的 PreviewPopover.vue（onPopoverShow）远端预览逻辑：
+ *   1) 先显示「简版」二维码：app://previewCard?cardId=<id>（对齐 PreviewPopover 第80行）
+ *   2) 调后端 /__preview 走全链路：
+ *        prepreview 保存（IDC10010）→ 取 code（IDC10015）→ 发布测试版（IDC10020）→ 通知真机（IDC10021）
+ *   3) 再显示「完整版」二维码：app://previewCard?cardId=<id>&cardCode=<code>&cardVersion=00000000&socket=<wss>
+ *      （对齐 PreviewPopover 第92行，socket = CARD_WEBSOCKET + /websocket/card/<id>）
+ * 二维码编码的是原生 App scheme（非 http 地址），由 FinMall App 扫码后自行渲染卡片。
+ * 参考 ubomp-h5-sub/src/modules/inner_card/views/editor/components/PreviewPopover.vue
+ */
+export default {
+  name: 'RemotePreview',
+  props: {
+    visible: { type: Boolean, default: false },
+    // 远端卡片 id（schema.pageId，数值型），对应 ubomp 的 cardId / $route.query.id
+    pageId: { type: [String, Number], default: '' },
+    // 当前卡片完整 schema（含 pageId），用于「预览前先保存」当前编辑内容
+    schema: { type: Object, default: null },
+    // 远端卡片 code（可选；留空时由 /__preview 经 IDC10015 取回）
+    cardCode: { type: String, default: '' },
+  },
+  data() {
+    return {
+      qrDataUrl: '',
+      url: '',
+      loading: false,
+      publishing: false,
+      copied: false,
+      copyTimer: null,
+      warn: '',
+      code: '',
+    }
+  },
+  watch: {
+    visible(v) {
+      if (v) this.open()
+    },
+    pageId() {
+      if (this.visible) this.open()
+    },
+  },
+  beforeUnmount() {
+    if (this.copyTimer) clearTimeout(this.copyTimer)
+  },
+  methods: {
+    buildSocket(cardId) {
+      // 对应 ubomp config/uat.env.js：CARD_WEBSOCKET = wss://<host>/pmb-web
+      // 域名不硬编码：从 .env.finmall 的 FINMALL_BASE_URL 经 vite 暴露到
+      // import.meta.env 读取（默认 UAT 域名），部署到其他环境时改配置即可。
+      const base = import.meta.env.FINMALL_BASE_URL || 'https://uat-pkg.finmall.com'
+      const wsHost = base.replace(/^https?:/, 'wss:')
+      return `${wsHost}/pmb-web/websocket/card/${cardId}`
+    },
+    fullUrl(cardId, cardCode) {
+      const socket = this.buildSocket(cardId)
+      return (
+        `app://previewCard?cardId=${encodeURIComponent(cardId)}` +
+        `&cardCode=${encodeURIComponent(cardCode || '')}` +
+        `&cardVersion=00000000` +
+        `&socket=${encodeURIComponent(socket)}`
+      )
+    },
+    async makeQr(text) {
+      return QRCode.toDataURL(text, {
+        width: 220,
+        margin: 1,
+        errorCorrectionLevel: 'H',
+        color: { dark: '#10131a', light: '#ffffff' },
+      })
+    },
+    async open() {
+      this.qrDataUrl = ''
+      this.url = ''
+      this.loading = true
+      this.publishing = false
+      this.copied = false
+      this.warn = ''
+      this.code = this.cardCode || ''
+      const cardId = String(this.pageId || '').trim()
+      if (!cardId) {
+        this.warn = '当前卡片缺少 pageId（远端卡片 id），无法生成预览二维码'
+        this.loading = false
+        return
+      }
+      // 1) 简版二维码（仅 cardId）
+      this.url = `app://previewCard?cardId=${encodeURIComponent(cardId)}`
+      try {
+        this.qrDataUrl = await this.makeQr(this.url)
+      } catch (e) {
+        this.warn = '二维码生成失败：' + (e && e.message)
+      }
+      // 2) 走远端全链路：保存 → 取 code → 发布 → 通知
+      this.publishing = true
+      try {
+        const resp = await apiFetch('/__preview', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ schema: this.schema || { pageId: cardId } }),
+        })
+        const data = await resp.json().catch(() => ({}))
+        if (!resp.ok) throw new Error(data.message || 'preview failed')
+        if (data.cardCode !== undefined) this.code = data.cardCode
+        // 3) 完整版二维码（带 cardCode / socket）
+        this.url = this.fullUrl(cardId, this.code)
+        this.qrDataUrl = await this.makeQr(this.url)
+      } catch (e) {
+        this.warn = '远端发布失败：' + (e && e.message)
+      } finally {
+        this.publishing = false
+        this.loading = false
+      }
+    },
+    async copyUrl() {
+      if (!this.url) return
+      try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          await navigator.clipboard.writeText(this.url)
+        } else {
+          const ta = document.createElement('textarea')
+          ta.value = this.url
+          ta.style.position = 'fixed'
+          ta.style.opacity = '0'
+          document.body.appendChild(ta)
+          ta.select()
+          document.execCommand('copy')
+          document.body.removeChild(ta)
+        }
+        this.copied = true
+        if (this.copyTimer) clearTimeout(this.copyTimer)
+        this.copyTimer = setTimeout(() => { this.copied = false }, 1500)
+      } catch (e) {
+        this.warn = '复制失败：' + (e && e.message)
+      }
+    },
+  },
+}
+</script>

package/dist/vendored/components/RenderTree.vue

@@ -0,0 +1,437 @@
+<!--
+  递归渲染组件：消费 buildPreview(schema).view 这棵预览树。
+  对齐官方渲染模块 2130 的 `v`（单组件）/ `g`（作用域插槽）/ `h`（事件 handler）/
+  `p`（applyVars）/ `d`（evalExpr）。
+
+  注意：本组件**没有 <template>**，完全由 <script> 里的 render() 函数驱动——
+  SFC 中若存在 <template> 会覆盖 script 的 render 选项，导致渲染为空。
+
+  要点：
+  - className -> 注册表取 Vue 组件；取不到画未知组件占位但仍渲染子树。
+  - 数据绑定：applyVars(properties, scope) / applyVars(style.properties, scope)。
+  - 列表（ListLayout / GridLayout）用 makeSlotScope 构造 item 作用域后，
+    以具名默认插槽（Vue 3 slots 对象）把「模板子节点」按 value 逐项渲染
+    （对齐官方 `g` 的 Object.assign({}, o, item, { $$:item, _index:index })）。
+  - 事件：eventactions 中 actionType=customAction 的，生成
+    new Function("event", code) 并在触发时以 {state,data,setData,...} 为 this 执行。
+  - **加载/初始化动作**（eventKey 属于「就绪类」生命周期：
+    '' / onReady / onLoad / onCreate）在 `created`（首帧之前）由 runLoadActions
+    执行一次；它们**不**注册成被动事件 handler，避免与 Root/组件自身的 emit 重复触发。
+    这样数据（如 assetOverview 的 ratio）在首帧渲染前就位，不会首帧 NaN 再依赖
+    异步重渲染补救。
+  - 其余事件（click / change / onMeasured / selectChange / action …）注册成被动
+    handler，由用户交互或组件（如 Canvas 测量后 emit onMeasured）触发。
+  - v-show：渲染期按 showType(00/01/02) + condition.expression 实时 evalExpr 计算。
+-->
+<script>
+import { h } from 'vue'
+import RenderTree from './RenderTree.vue'
+import { getComponent, SCOPED_SLOT_COMPONENTS } from './index.js'
+import { applyVars, makeSlotScope, evalExpr, makeRenderScope } from '../runtime/evaluate.js'
+import CustomPlaceholder from './CustomPlaceholder.vue'
+import { setSelectionEl, clearSelectionEl } from '../runtime/selectionOverlay.js'
+
+// 「就绪类」生命周期事件 key：这些不是用户交互，而是卡片/组件加载完成时应自动执行的
+// 初始化动作（如 assetOverview 根节点挂在 onReady 上的 ratio 计算）。
+// 它们在 created（首帧之前）由 runLoadActions 执行一次，且不注册成被动 handler。
+const LIFECYCLE_KEYS = new Set(['', 'onReady', 'onLoad', 'onCreate'])
+
+function isLifecycleKey(key) {
+  return LIFECYCLE_KEYS.has(key || '')
+}
+
+/**
+ * Vue 2 的 `on: { eventKey: fn }` 事件对象 → Vue 3 的 onXxx 监听 prop。
+ * 与运行时 emit 解析规则一致：emit('foo') 对应 prop `onFoo`，
+ * emit('onMeasured') 对应 `onOnMeasured`，中划线 key 先驼峰化。
+ */
+function toHandlerKey(key) {
+  const camel = String(key).replace(/-(\w)/g, (_, c) => c.toUpperCase())
+  return 'on' + camel.charAt(0).toUpperCase() + camel.slice(1)
+}
+
+/** CSS 选择器转义：用于按 data-id 精确查询首个匹配元素（列表重复项定位）。 */
+function cssEscape(v) {
+  return (typeof window !== 'undefined' && window.CSS && CSS.escape)
+    ? CSS.escape(String(v))
+    : String(v).replace(/["\\\]]/g, '\\$&')
+}
+
+export default {
+  name: 'RenderTree',
+  inject: ['adapter', 'cardRuntime'],
+  props: {
+    node: { type: Object, required: true },
+    scope: { type: Object, default: () => ({}) },
+    selectedNodeId: { type: String, default: '' },
+  },
+  methods: {
+    /** 取某节点的「直接子节点」：优先用默认插槽里的 children，否则用 components */
+    getChildNodes(node) {
+      const slots = node.slots || []
+      if (slots.length && slots[0].components && slots[0].components.length) {
+        return slots[0].components
+      }
+      return node.components || []
+    },
+
+    /** 取 customAction 脚本代码（兼容 code / compiled 两种导出字段） */
+    actionCode(ea) {
+      const fn = (ea.action && ea.action.properties && ea.action.properties.function) || {}
+      return fn.code || fn.compiled || ''
+    },
+
+    /** v-show 可见性：00 始终显示；01 条件真显示；02 条件真隐藏 */
+    isVisible(node, scope) {
+      const rt = this.cardRuntime
+      const vshow = node.directives && node.directives['v-show']
+      if (!vshow) return true
+      const showType = vshow.showType || '00'
+      if (showType === '00') return true
+      const cond = vshow.condition || {}
+      const expr = cond.expression
+      if (!expr) return showType === '01' // 无表达式兜底：01 显 / 02 隐
+      try {
+        const res = evalExpr(expr, scope)
+        return showType === '01' ? !!res : !res
+      } catch (e) {
+        rt.pushError('vshow', `${node.className}: [${expr}] -> ${e.message}`)
+        return showType === '01'
+      }
+    },
+
+    /** 收集绑定到具体事件的 handler（就绪类生命周期动作不在此处理，改由 runLoadActions 在 created 执行） */
+    buildHandlers(node, scope) {
+      const rt = this.cardRuntime
+      const handlers = {}
+      // 用户交互触发的事件：直接执行，交互前不回写 rootScope。
+      // 设计：输入框 / 选择等交互只写运行期克隆 rt.state，而事件代码里 `this.data.xxx`
+      // 也直接读 rt.state（对齐官方运行时——`this.data` 即含实时输入的工作数据，
+      // 仅「保存到服务器」才持久化）。因此本地调试全程不碰 rt.rootScope（初始数据 /
+      // 保存基线），永不触发保存高亮、也不作为最终数据落盘。生命周期动作不走此路径。
+      ;(node.eventactions || []).forEach((ea) => {
+        const ev = ea.event || {}
+        const evKey = ev.eventKey || ''
+        if (isLifecycleKey(evKey)) return // 初始化动作在 created 由 runLoadActions 统一处理
+        const at = ea.action || {}
+        const atype = at.actionType
+        if (atype === 'customAction') {
+          const code = this.actionCode(ea)
+          handlers[evKey] = (event) => this.runCustomAction(code, scope, event, node)
+        } else {
+          handlers[evKey] = (event) => this.runSystemAction(atype, at.properties, scope, event, node)
+        }
+      })
+      return handlers
+    },
+
+    /** 执行一条 customAction 脚本 */
+    runCustomAction(code, scope, event, node) {
+      const rt = this.cardRuntime
+      // this.state 必须「读取当前节点作用域、写入独立的 rt.state」：
+      //  - 读：走 scope 原对象。列表项场景下 scope 就是该项本身，弹窗用
+      //    `this.state` 取选中项才不会失效（原实现 this.state===scope 正是靠此）；
+      //    主卡读 this.state.x 也仍是 rootScope 原值。
+      //  - 写：this.state.x = v 与 setData 都劫持到 rt.state，绝不动 rootScope，
+      //    从而不污染持久化数据、不触发「保存」脏标记（修复上轮交互误判已编辑）。
+      //    显示层经 makeRenderScope(rt.state, 局部作用域) 按「局部优先于 state」合并，仍读得到运行期写入
+      //    （根节点局部作用域即 rt.state 本身，故根层级 state 写入恒优先生效；列表项 itemScope 优先于全局）。
+      const stateProxy = new Proxy(scope, {
+        set(_t, k, v) {
+          rt.state[k] = v
+          return true
+        },
+      })
+      const ctx = {
+        state: stateProxy,
+        // `this.data` 在运行时读取运行期克隆 rt.state（而非 rt.rootScope）：
+        //  - 对齐官方语义——运行时 `this.data` 即「含 Input 实时写入的工作数据」，
+        //    脚本里 `this.data.payAmount` / `this.data.remark` 读到的就是当前交互值；
+        //  - rt.rootScope 仅作「初始数据 / 保存基线」，调试交互（输入、选择、标签
+        //    切换、globalSet）一律只写 rt.state，**绝不**回写 rt.rootScope，
+        //    故 historyDirty 永不因调试变真、保存按钮不亮、存档也只存初始数据。
+        data: rt.state,
+        setData(patch) {
+          if (patch && typeof patch === 'object') Object.assign(rt.state, patch)
+          rt.markDirty()
+        },
+        setRootData(patch) {
+          if (patch && typeof patch === 'object') Object.assign(rt.rootScope, patch)
+          rt.markDirty()
+        },
+        addEventListener(name, fn) {
+          rt.addEventListener(name, fn)
+        },
+        postMessage(name, payload) {
+          rt.postMessage(name, payload)
+        },
+      }
+      // 事件代码的 console.* 主动日志：注入一个与全局 console 同签名的对象，作为
+      // new Function 的第 2 个形参（形参遮蔽全局 console），既打到真实控制台，
+      // 又汇入 rt.eventLogs 供「事件面板」展示。不修改全局 console，避免污染/误伤。
+      const evtConsole = {
+        log: (...a) => { console.log(...a); rt.pushLog('log', a) },
+        info: (...a) => { console.info(...a); rt.pushLog('info', a) },
+        warn: (...a) => { console.warn(...a); rt.pushLog('warn', a) },
+        error: (...a) => { console.error(...a); rt.pushLog('error', a) },
+        debug: (...a) => { console.debug(...a); rt.pushLog('debug', a) },
+      }
+      try {
+        // eslint-disable-next-line no-new-func
+        const fn = new Function('event', 'console', code || '')
+        fn.apply(ctx, [event, evtConsole])
+      } catch (e) {
+        // 错误面板里带上节点 id，便于在结构树里定位出错节点（如 Row[row_4w]）
+        const nodeTag = node && node.id ? `${node.className}(${node.id})` : node.className
+        rt.pushError('customAction', `${nodeTag}: ${e.message}`)
+        // eslint-disable-next-line no-console
+        console.error('[customAction error]', nodeTag, e)
+      }
+    },
+
+    /** 系统动作（closeAlertCard / sendAiChatMessage 等）：转给 ynet.callJSAPI 桩 */
+    runSystemAction(atype, props, scope, event, node) {
+      const rt = this.cardRuntime
+      let ynet = typeof window !== 'undefined' ? window.ynet : null
+      if (!ynet && typeof window !== 'undefined') {
+        ynet = window.ynet = {
+          callJSAPI(api, p, cb) {
+            rt.pushApiCall(api, p)
+            if (typeof cb === 'function') {
+              try {
+                cb({})
+              } catch (e) {
+                /* ignore */
+              }
+            }
+          },
+        }
+      }
+      const p = props || {}
+      if (atype === 'closeAlertCard') ynet.callJSAPI('closeAlertCard', p, p && p.callback)
+      else if (atype === 'sendAiChatMessage') ynet.callJSAPI('sendAiChatMessage', { message: (p && p.message) || '' }, undefined)
+      else ynet.callJSAPI(atype, p, undefined)
+      rt.pushApiCall(atype, p)
+    },
+
+    /** 加载/初始化动作（就绪类生命周期 eventKey 的 customAction），created 执行一次（mounted 补跑但按节点去重） */
+    runLoadActions() {
+      const rt = this.cardRuntime
+      const node = this.node
+      if (!node.__loadRan) {
+        node.__loadRan = true
+        ;(node.eventactions || []).forEach((ea) => {
+          const ev = ea.event || {}
+          if (!isLifecycleKey(ev.eventKey || '')) return
+          if (((ea.action || {}).actionType) !== 'customAction') return
+          const code = this.actionCode(ea)
+          if (!code) return
+          // 初始化动作的作用域必须是「局部作用域（根节点即 rt.state）优先」的合并视图：
+          //  - 读 this.state.x 取 rt.state（根节点 scope 已由 App.vue 换成 rt.state；深拷贝副本见 seedState），
+          //    绝不触碰 rootScope 嵌套对象；
+          //  - 写 this.state.x / setData 经 set 陷阱只落 rt.state，不污染持久化数据绑定。
+          // 否则（如 assetOverview 根节点 onReady 里 `this.state.listData.forEach(e => e.ratio=...)`）
+          // 会顺着「this.scope===rt.rootScope」的共享引用把 ratio 写进 rootScope，
+          // 导致切卡即被保存脏标记误判为「已编辑」。交互事件路径仍直接用 this.scope（保持列表项回填语义）。
+          this.runCustomAction(code, makeRenderScope(rt.state, this.scope), undefined, node)
+        })
+      }
+    },
+
+    /** 递归渲染一个节点，返回 vnode 或 null */
+    renderNode(node) {
+      if (node.visible === false) return null
+      const rt = this.cardRuntime
+      const scope = makeRenderScope(rt.state, this.scope)
+      if (!this.isVisible(node, scope)) return null
+
+      const comp = getComponent(node.className)
+
+      // 未知组件：画占位但保留子树
+      if (!comp) {
+        const children = this.getChildNodes(node).map((c) => this.renderSub(c, scope))
+        return h(CustomPlaceholder, { customClass: node.className, title: '未知组件' }, () => children)
+      }
+
+      const props = applyVars(node.properties || {}, scope, rt.getBindingBuffer())
+      const styleProps = applyVars((node.style && node.style.properties) || {}, scope, rt.getBindingBuffer())
+      // Vue 3：props 与事件监听（onXxx）统一平铺在同一个 vnode props 对象里
+      const vnodeProps = Object.assign({}, props, { styleProps })
+      // 在组件根元素挂载调试用 data 属性（data-cid / data-class），便于结构树定位、
+      // 事件面板与自动化测试精准选择对应节点（不影响渲染与布局）。
+      vnodeProps['data-cid'] = node.componentId || node.id
+      vnodeProps['data-class'] = node.className
+      // 节点唯一 id（与结构树选中键 selectedNodeId 同源），供选中覆盖层在列表重复项
+      // 中精确定位「第一个」匹配元素（querySelector 取文档顺序首个）。
+      vnodeProps['data-id'] = node.id
+      const handlers = this.buildHandlers(node, scope)
+      for (const key in handlers) vnodeProps[toHandlerKey(key)] = handlers[key]
+
+      // 输入框双向回写：官方平台会把 Input 的实时输入值写回卡片「工作数据」，
+      // 脚本里统一以 `this.data.xxx` 读取（见 creditCardPayment 的 `this.data.payAmount`、
+      // dreamPlan 的 `this.data.targetName`、transfersjump 的 `this.data.remark`）。
+      // 组件 meta 里 Input 没有可绑定事件（events: []），卡片无法自己接线，
+      // 所以由渲染层兜底：value 绑定形如 `$key` 时，输入即写回同名字段。
+      //
+      // 关键设计（对齐 RadioButton/CheckGroup 交互态语义 + 官方运行时语义）：
+      //  - 输入只写运行期克隆 `rt.state`，绝不碰持久化 `rt.rootScope`，因此打字过程
+      //    不会触发「保存到本地」脏标记（historyDirty 比对的是 rootScope 与磁盘版本）；
+      //  - 事件代码里 `this.data.xxx` 直接读 `rt.state`（见 runCustomAction 的
+      //    `data: rt.state`），故 `this.data.remark` 等读到的就是当前实时输入值，
+      //    无需任何「交互前回写」；显示层经 makeRenderScope 按局部优先合并读取即时回显。
+      //  state 是响应式的，赋值本身就会触发依赖它的节点重渲染，无需 markDirty。
+      if (node.className === 'Input' && !vnodeProps.onInput) {
+        const expr = ((node.properties && node.properties.__vars__) || {}).value
+        const m = /^\s*\$([A-Za-z_$][\w$]*)\s*$/.exec(String(expr || ''))
+        if (m) {
+          const key = m[1]
+          vnodeProps.onInput = (v) => {
+            rt.state[key] = v
+          }
+        }
+      }
+
+      // 单选/复选框双向回写：组件仅 emit('change', next) 而不自维护选中态，
+      // selected / checkedSet 完全由传入的 value 决定。运行时需把新值写回 value
+      // 绑定的变量（与 Input 同理，卡片脚本统一以 `this.data.xxx` 读取），否则点击
+      // 只会触发事件、选中态永不刷新。仅当用户未在 schema 自定义 change handler 时兜底。
+      if ((node.className === 'RadioButton' || node.className === 'CheckGroup') && !vnodeProps.onChange) {
+        const expr = ((node.properties && node.properties.__vars__) || {}).value
+        const m = /^\s*\$([A-Za-z_$][\w$]*)\s*$/.exec(String(expr || ''))
+        if (m) {
+          const key = m[1]
+          vnodeProps.onChange = (v) => {
+            // 单选/复选框的运行时选择是「交互态」而非「卡片数据编辑」：只写运行期
+            // state（绝不碰持久化 rootScope），因此不会触发「保存到本地」脏标记
+            // （historyDirty 比对的是 rt.rootScope 与磁盘版本），切卡/重载也不落盘。
+            // 显示层经 makeRenderScope 按局部优先合并读取，选中态即时刷新；组件级
+            // value 完全由 prop 驱动（无本地状态），须 markDirty 自增 revision
+            // 强制 RadioButton/CheckGroup 重算选中态。
+            rt.state[key] = v
+            rt.markDirty()
+          }
+        }
+      }
+
+      // 滑块双向回写：ProgressSlider 仅 emit('change'/'selectChange', v) 而不自维护值，
+      // 进度条宽度与滑块块位置完全由传入的 value 决定。运行时须把新值写回 value 绑定的
+      // 变量（卡片脚本统一以 `this.data.xxx` 读取），否则拖动只会触发事件、滑块位置
+      // （进度条 / 滑块块）永不刷新，表现为"滑不动"。
+      //
+      // 关键：值回写是**平台内置绑定**（对齐线上语义——拖动即写回绑定变量），与用户自定义
+      // 的 change/selectChange 动作是「叠加」关系，绝不能因为用户绑了自定义 handler 就跳过
+      // 回写（否则像本仓库 all-components-test 卡那样「绑了 change 日志」的滑块就彻底滑不动）。
+      // 故此处无论用户是否自定义 handler 都写回，并把自定义 handler 与回写**组合**执行。
+      if (node.className === 'ProgressSlider') {
+        const expr = ((node.properties && node.properties.__vars__) || {}).value
+        const m = /^\s*\$([A-Za-z_$][\w$]*)\s*$/.exec(String(expr || ''))
+        if (m) {
+          const key = m[1]
+          const writeBack = (v) => {
+            // 滑块拖动是「交互态」而非「卡片数据编辑」：只写运行期 state（绝不碰
+            // 持久化 rootScope），不触发「保存到本地」脏标记，切卡/重载也不落盘；
+            // 显示层经 makeRenderScope 按局部优先合并读取即时回显，markDirty 自增
+            // revision 强制进度条宽度与滑块块位置重算。
+            rt.state[key] = v
+            rt.markDirty()
+          }
+          // 组合：先跑用户自定义 handler（若有），再执行平台内置值回写；
+          // 用 finally 保证即使用户 handler 抛错，回写仍生效。
+          const userOnChange = vnodeProps.onChange
+          const userOnSelectChange = vnodeProps.onSelectChange
+          vnodeProps.onChange = (v) => {
+            try {
+              if (userOnChange) userOnChange(v)
+            } finally {
+              writeBack(v)
+            }
+          }
+          vnodeProps.onSelectChange = (v) => {
+            try {
+              if (userOnSelectChange) userOnSelectChange(v)
+            } finally {
+              writeBack(v)
+            }
+          }
+        }
+      }
+
+      const children = this.getChildNodes(node)
+
+      // 带作用域插槽的容器：把「模板子节点」按 value 逐项渲染
+      if (SCOPED_SLOT_COMPONENTS.has(node.className)) {
+        return h(comp, vnodeProps, {
+          default: (slotProps) => {
+            const itemScope = makeSlotScope(scope, slotProps.item, slotProps.index)
+            return children.map((c) => this.renderSub(c, itemScope))
+          },
+        })
+      }
+
+      // 普通组件：子节点直接渲染进默认插槽（函数式插槽，Vue 3 推荐写法）
+      return h(comp, vnodeProps, () => children.map((c) => this.renderSub(c, scope)))
+    },
+
+    /** 渲染子节点：包一层 RenderTree 以获得独立生命周期（mounted/事件作用域） */
+    renderSub(node, scope) {
+      return h(RenderTree, { node, scope, selectedNodeId: this.selectedNodeId })
+    },
+
+    /** 根据选中状态驱动覆盖层：选中时把根元素交给覆盖层贴合，取消时归还 */
+    updateHighlight() {
+      const el = this.$el
+      if (!el || el.nodeType !== 1) return
+      const id = this.node.id
+      const isSelected = this.selectedNodeId && id === this.selectedNodeId
+      if (isSelected) {
+        // 列表（ListLayout/GridLayout）会把同一模板节点渲染成多个共享 id 的 DOM 实例，
+        // 全部满足选中条件。若直接把本实例 el 交给覆盖层，各实例依次覆盖会令高亮落在末项；
+        // 故显式取文档顺序中第一个匹配元素（即顶部项），保证高亮落在其一，并与
+        // Ctrl/⌘ 点击「定位」行为一致（均选中第一个）。
+        const screen = typeof document !== 'undefined' ? document.querySelector('.phone__screen') : null
+        const target = screen ? screen.querySelector('[data-id="' + cssEscape(String(id)) + '"]') : null
+        setSelectionEl(target || el, id)
+      } else {
+        clearSelectionEl(id)
+      }
+    },
+  },
+
+  render() {
+    // 读取 revision 建立「整树重渲染」依赖
+    void this.cardRuntime.revision
+    // 根节点渲染开始时重置绑定错误缓冲区：本轮渲染重新收集（渲染结束后
+    // 在 mounted/updated 里提交）。不能在此处直接清空响应式错误列表，
+    // 否则会在渲染中读写 observable 导致无限更新循环，且会误清事件错误。
+    if (this.node.className === 'Root') this.cardRuntime.startBindingPass()
+    return this.renderNode(this.node)
+  },
+
+  created() {
+    // 加载/初始化动作（就绪类生命周期 eventKey：'' / onReady / onLoad / onCreate 的
+    // customAction，如 assetOverview 根节点 onReady 里计算 ratio）。必须在「首帧渲染
+    // 之前」执行，否则首帧会因 ratio 等字段尚未计算而渲染成 NaN%，之后虽能靠 revision
+    // 自增触发重渲染，但某些环境下（如 HMR 状态异常、浏览器缓存）这次异步重渲染可能不
+    // 触发，导致百分比长期停留在 NaN%。提前到 created 可从根本上消除该时序风险。
+    this.runLoadActions()
+  },
+
+  mounted() {
+    // 首帧之后仍补跑一次：兼容那些需要在 DOM 就绪后才安全执行的加载动作；
+    // runLoadActions 内部按节点去重，不会重复执行同一动作。
+    this.runLoadActions()
+    this.$nextTick(() => this.updateHighlight())
+    // 首帧渲染结束：提交本轮收集到的绑定错误（渲染期之外，响应式安全）
+    if (this.node.className === 'Root') this.cardRuntime.commitBindingPass()
+  },
+  updated() {
+    // 每次重渲染结束后同样提交一轮绑定错误
+    if (this.node.className === 'Root') this.cardRuntime.commitBindingPass()
+  },
+  watch: {
+    selectedNodeId() {
+      this.updateHighlight()
+    },
+  },
+}
+</script>

package/dist/vendored/components/Root.vue

@@ -0,0 +1,30 @@
+<!-- 官方 module 2089 / 535：卡片根容器，挂载后抛 onReady -->
+<template>
+  <div ref="root" class="ce_root" :style="styleObj">
+    <slot />
+  </div>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+export default {
+  name: 'CeRoot',
+  emits: ['onReady'],
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+  },
+  computed: {
+    styleObj() {
+      const parsed = new StyleParser(this, this.styleProps).parse()
+      // 官方是 Object.assign({fontSize}, parsed)，即 style 里的 fontSize 优先
+      return Object.assign({ fontSize: this.adapter.doSize(14, 'font') }, parsed)
+    },
+  },
+  mounted() {
+    this.$emit('onReady', {})
+  },
+}
+</script>

package/dist/vendored/components/Row.vue

@@ -0,0 +1,25 @@
+<!-- 官方 module 2093 / 537（updateGap 是 IE 兼容分支，省略） -->
+<template>
+  <div ref="row" class="ce_row" :style="styleObj" @click="$emit('click', $event)">
+    <slot />
+  </div>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+export default {
+  name: 'CeRow',
+  emits: ['click'],
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+  },
+  computed: {
+    styleObj() {
+      return new StyleParser(this, this.styleProps).parse()
+    },
+  },
+}
+</script>