cardbuddy 0.14.2 → 0.15.0

package/dist/vendored/skills/dsl-card-generator/scripts/lib/v3_shared.mjs

@@ -0,0 +1,1116 @@
+/**
+ * v3_shared.mjs — v3 生成器共享层（2026-09-21 自 spec_to_schema_v3.mjs 拆出）。
+ * 内容：imports 依赖、常量、style-meta、组件/容器构造器、金额/字段词典、几何工具。
+ * 消费方：lib/v3_extract.mjs（语义识别）、lib/v3_assemble.mjs（schema 组装）、CLI。
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { makeMinComponent } from './scaffold.mjs'
+import { T } from './layout-tokens.mjs'
+import { sampleTopBand, sampleRegionColor, sampleRegionEdgeColor, sampleCardBodyColor, crossCheckTextColor, sampleOutlineRing, sampleBackdropBands } from './design_sample.mjs'
+import { resolveSliceExport, sliceRefPath, sliceFlatName, stripScale } from './slicePath.mjs'
+import { cardsDir, metaDir, slicesDir } from './paths.mjs'
+/**
+ * v3 生成器设计原则（直组装，非近邻复用；原 spec_to_schema_v3.mjs 文件头，随拆分移此）：
+ *
+ * 设计原则（直组装，非近邻复用）：
+ *   1) 读 spec.json cards[0].elements → 按 y 坐标分段聚类为语义块（Tab 头 / 汇总区 / 按钮行 / 列表标题 / 列表项组 / 查看更多）；
+ *   2) 每个语义块按其几何/文本特征映射到 DSL 组件类（Tab→Row of Text，汇总区→Column of Text，列表→ListLayout，按钮→Button）；
+ *   3) 文案/颜色/字号/字重/对齐 直接来自 spec 的 textStyle（不臆造）；
+ *   4) 动态绑定按规范抽 inputParams（列表用 $list，金额用表达式千分号）；
+ *   5) 组件树用 scaffold.mjs::makeMinComponent 真实构建（不拷贝任何导出卡）。
+ *
+ * 用法：
+ *   node spec_to_schema_v3.mjs --spec <UI/xxx/spec.json> --id <新卡id>
+ *       [--name <名称>] [--out <dir>] [--force]
+ */
+
+export const RENDER_CONTRACT = JSON.parse(fs.readFileSync(
+  path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../config/render-contract.json'),
+  'utf8',
+))
+
+export const CARDS_DIR = cardsDir
+export const META_DIR = metaDir
+
+/* ---------- 语义判定常量（布局优化 P0：formRow 基线同行约束） ---------- */
+// formRow 的 value 必须与 label 视觉基线（y + fontSize）对齐，偏差超过该值视为
+// 「上下两行的标题-描述文本」（如 重点摘要 / 按强重要…），不得误判为表单行 value。
+export const FORM_ROW_BASE_GAP = 8 // px
+// label 候选排除「大字号纯数字」（头部主数字，如未读消息数 12）：它是标题区数字块，
+// 不是表单 label（避免把紧随其后的单位/说明文本吞成 value）。
+export const LABEL_MAX_NUM_FONT = 28 // px
+// 右操作文本排除比例：右簇文本若同行存在小尺寸近似方形媒体 affordance，
+// 且位于卡片右缘，则按行级操作件处理，不作为表单 value/subValue。
+export const RIGHT_ACTION_X_RATIO = 0.6
+
+/* ----------------------- style-meta 加载（用于构造完整 style 组） ----------------------- */
+export let _styleMeta = null
+export function loadStyleMeta() {
+  if (_styleMeta) return _styleMeta
+  const data = JSON.parse(fs.readFileSync(path.join(META_DIR, 'style-meta.json'), 'utf8'))
+  const byKey = {}
+  for (const g of data.properties || []) if (g.itemKey) byKey[g.itemKey] = g
+  _styleMeta = { byKey }
+  return _styleMeta
+}
+export function fallbackValue(c) {
+  if (c.itemDefaultValue !== undefined) return c.itemDefaultValue
+  switch (c.itemType) {
+    case 'Input': case 'Textarea': return ''
+    case 'InputNumber': return 0
+    case 'Color': return '#000000'
+    case 'Switcher': return '0'
+    case 'BooleanForm': return false
+    case 'PaddingStyle': return '{0,0,0,0}'
+    case 'List': return []
+    default: return ''
+  }
+}
+export function makeStyleChild(c) {
+  const node = {
+    itemId: c.itemId, itemKey: c.itemKey, itemName: c.itemName,
+    itemType: c.itemType || 'group', itemValueFrom: '0',
+    itemValue: c.itemType === 'group' ? {} : fallbackValue(c),
+  }
+  if (c.itemOption !== undefined) node.itemOption = c.itemOption
+  if (c.itemChildren && c.itemChildren.length) node.itemChildren = { properties: c.itemChildren.map(makeStyleChild) }
+  node.itemUpdated = true
+  return node
+}
+export function makeStyle(groups) {
+  const meta = loadStyleMeta()
+  return groups.map((gk) => {
+    const gm = meta.byKey[gk]
+    if (!gm) return null
+    const gnode = {
+      itemId: gm.itemId, itemKey: gm.itemKey, itemName: gm.itemName,
+      itemType: gm.itemType || 'group', itemValueFrom: '0',
+      itemValue: gm.itemType === 'group' ? {} : fallbackValue(gm),
+    }
+    if (gm.itemOption !== undefined) gnode.itemOption = gm.itemOption
+    if (gm.itemChildren && gm.itemChildren.length) gnode.itemChildren = { properties: gm.itemChildren.map(makeStyleChild) }
+    gnode.itemUpdated = true
+    return gnode
+  }).filter(Boolean)
+}
+
+/* ----------------------- 辅助：常量属性 / 表达式绑定属性 ----------------------- */
+export function constProp(itemKey, value) {
+  return { itemId: '', itemKey, itemName: itemKey, itemType: '', itemValueFrom: '0', itemValue: value, itemDefaultValue: value }
+}
+export function imageStaticProp(itemKey, value) {
+  return { itemId: '', itemKey, itemName: itemKey, itemType: '', itemValueFrom: '2', itemValue: value, itemDefaultValue: value }
+}
+export function boundProp(itemKey, expr, defaultValue = '') {
+  return { itemId: '', itemKey, itemName: itemKey, itemType: '', itemValueFrom: '1', itemValue: expr, itemDefaultValue: defaultValue }
+}
+// v-show 条件渲染指令：showType=01 + condition.expression（如 "$afford != ''"）
+export function vShowDirective(expression, name) {
+  const prop = (itemId, itemKey, itemValue) => ({
+    itemId, itemKey, itemName: itemKey, itemType: '', itemValueFrom: '0', itemValue, itemDefaultValue: itemValue,
+  })
+  const expr = String(expression || '')
+  // validate_schema.py 铁律：condition.name 必填非空；表达式 <15 字符时 name 与表达式一致，
+  // >=15 字符给可读显示名（调用方可传语义名，缺省回退通用名）。
+  const displayName = expr.length < 15 ? expr : (String(name || '').trim() || '显示条件')
+  return {
+    itemId: '', itemKey: 'v-show', itemName: 'v-show', itemType: '', itemValueFrom: '0',
+    itemValue: {}, itemDefaultValue: {},
+    itemChildren: {
+      properties: [
+        prop('001', 'showType', '01'),
+        prop('002', 'condition', { expression: expr, name: displayName }),
+      ],
+    },
+  }
+}
+export function clickAction(code = '// TODO') {
+  return { event: { eventKey: 'click', eventName: '点击' }, action: { actionType: 'customAction', properties: [constProp('function', { code })] } }
+}
+
+export function normalizeRenderContract(root) {
+  const leafTypes = new Set(RENDER_CONTRACT.leafClasses)
+  const clickRequiredTypes = new Set(RENDER_CONTRACT.clickRequiredClasses)
+  const walk = (node) => {
+    if (!node) return
+    const widthGroup = node.style?.properties?.find((group) => group.itemKey === 'rect')
+      ?.itemChildren?.properties?.find((property) => property.itemKey === 'width')
+    const isFullWidth = String(widthGroup?.itemValue ?? '') === '100%'
+    if (leafTypes.has(node.className)) {
+      ensureStyleGroup(node, 'flex')
+      setStyleChild(node, 'flex', 'flexShrink', node.className === 'Text' ? '0' : isFullWidth ? '1' : '0')
+    }
+    if (clickRequiredTypes.has(node.className) &&
+        !(node.eventactions || []).some((item) => item?.event?.eventKey === 'click')) {
+      node.eventactions = [...(node.eventactions || []), clickAction('// Icon click contract')]
+    }
+    for (const child of node.components || []) walk(child)
+    for (const slot of node.slots || []) for (const child of slot.components || []) walk(child)
+  }
+  walk(root)
+}
+
+export function fixFlexShrinkOverflow(root) {
+  const getChildren = (node) => {
+    const children = [...(node.components || [])]
+    for (const slot of node.slots || []) {
+      for (const child of slot.components || []) children.push(child)
+    }
+    return children
+  }
+  const getStyleVal = (node, groupKey, childKey) => {
+    const grp = node?.style?.properties?.find((p) => p.itemKey === groupKey)
+    const child = grp?.itemChildren?.properties?.find((x) => x.itemKey === childKey)
+    return child ? String(child.itemValue) : undefined
+  }
+  const setStyleVal = (node, groupKey, childKey, value) => {
+    const grp = node?.style?.properties?.find((p) => p.itemKey === groupKey)
+    const child = grp?.itemChildren?.properties?.find((x) => x.itemKey === childKey)
+    if (child) child.itemValue = value
+  }
+  const walk = (node) => {
+    if (!node) return
+    const cls = node.className
+    if (cls === 'Row' || cls === 'Column') {
+      const width = getStyleVal(node, 'rect', 'width')
+      const isAutoSize = !width || width === 'auto'
+      const children = getChildren(node)
+      if (!isAutoSize && children.length >= 2) {
+        const allShrinkZero = children.every((child) => getStyleVal(child, 'flex', 'flexShrink') === '0')
+        if (allShrinkZero) {
+          // Set the last child to flexShrink:1 (typically the most flexible content area)
+          setStyleVal(children[children.length - 1], 'flex', 'flexShrink', '1')
+        }
+      }
+    }
+    for (const child of node.components || []) walk(child)
+    for (const slot of node.slots || []) for (const child of slot.components || []) walk(child)
+  }
+  walk(root)
+}
+
+/* ----------------------- 颜色相对亮度（用于 placeholder 灰度判定） ----------------------- */
+// 返回 0~1 的相对亮度（sRGB 感知亮度近似）。placeholder 文本通常明显比 label 浅（如 #CCCCCC vs #111111）。
+export function lum(hex) {
+  if (!hex || typeof hex !== 'string') return 0
+  let h = hex.trim().replace('#', '')
+  if (h.length === 3) h = h.split('').map((c) => c + c).join('')
+  if (!/^[0-9a-fA-F]{6}$/.test(h)) return 0
+  const r = parseInt(h.slice(0, 2), 16) / 255
+  const g = parseInt(h.slice(2, 4), 16) / 255
+  const b = parseInt(h.slice(4, 6), 16) / 255
+  const f = (c) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4))
+  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b)
+}
+
+/* ----------------------- hex → rgba ----------------------- */
+export function hexToRgba(hex, alpha = 1) {
+  if (!hex) return ''
+  let h = String(hex).trim().replace('#', '')
+  if (h.length === 3) h = h.split('').map((c) => c + c).join('')
+  if (!/^[0-9a-fA-F]{6}$/.test(h)) return hex
+  const r = parseInt(h.slice(0, 2), 16)
+  const g = parseInt(h.slice(2, 4), 16)
+  const b = parseInt(h.slice(4, 6), 16)
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+export function gradientWithOpacity(gradient, opacity = 1) {
+  const value = Number(opacity)
+  if (!Number.isFinite(value) || value >= 1 || value < 0) return gradient
+  return String(gradient || '').replace(/rgba\(([^,]+),([^,]+),([^,]+),([^)]+)\)/gi,
+    (_, red, green, blue, alpha) =>
+      `rgba(${red.trim()},${green.trim()},${blue.trim()},${Number(alpha) * value})`)
+}
+
+/* ----------------------- style 子项写入辅助 ----------------------- */
+export function ensureStyleGroup(node, groupKey) {
+  const props = (node.style && node.style.properties) || []
+  if (props.some((p) => p.itemKey === groupKey)) return true
+  const g = makeStyle([groupKey])[0]
+  if (!g) return false
+  node.style = node.style || { properties: [] }
+  node.style.properties.push(g)
+  return true
+}
+export function setStyleChild(node, groupKey, childKey, value) {
+  const grp = (node.style?.properties || []).find((p) => p.itemKey === groupKey)
+  if (!grp) return false
+  const c = (grp.itemChildren?.properties || []).find((x) => x.itemKey === childKey)
+  if (!c) return false
+  c.itemValue = value
+  c.itemValueFrom = '0'
+  if (c.itemDefaultValue !== undefined) c.itemDefaultValue = value
+  return true
+}
+
+/* ----------------------- 组件工厂（最小节点 + 精确样式注入） ----------------------- */
+// 有效组件名白名单：直接来自 vendor/preview/meta/component-meta.json（与 component_specs.md 同源）
+// 关键纪律：脚本只能用白名单内的组件名，避免用错（如 View 不是有效名 → 编辑器显示"未知组件"）。
+// 新增组件用法前，先查 component_specs.md 对应骨架。
+export const COMPONENT_WHITELIST = new Set([
+  'Row', 'Column', 'MultiColumn', 'ListLayout', 'GridLayout', 'AbsoluteLayout',
+  'Text', 'Button', 'Image', 'Icon', 'MultiText', 'Canvas', 'Input',
+  'CheckGroup', 'RadioButton', 'ProgressSlider', 'Video', 'Map', 'Divider', 'ViewContainer',
+])
+export let CID = 0
+export const semanticYByNode = new WeakMap()
+export function comp(className, opts = {}) {
+  if (!COMPONENT_WHITELIST.has(className)) {
+    console.warn(`[warn] 组件名 ${className} 不在白名单内，可能被编辑器识别为"未知组件"。有效清单见 component-meta.json / component_specs.md`)
+  }
+  const n = makeMinComponent(className, { componentId: `comp_${++CID}`, ...opts })
+  if (!n.style) n.style = { properties: [] }
+  // 溯源（调试）：SCHEMA_PROV=1 时记录创建点（文件:行），写入 n.__prov；
+  // 序列化前由 stripProv 移除，不污染产物。排查"某节点由哪个语义通道生成"时用。
+  if (process.env.SCHEMA_PROV === '1') {
+    const frame = (new Error().stack || '').split('\n')[3] || ''
+    const m = frame.match(/(\w+\.mjs):(\d+)/)
+    n.__prov = m ? `${m[1]}:${m[2]}` : frame.trim()
+  }
+  return n
+}
+/** 圆角归一：标注可能是四角数组 [上,右,下,左]（数组直接 >=N 比较恒 false，壳/按钮会漏判），取最大角。 */
+export function radiusMax(style) {
+  const v = style?.radius?.borderRadius
+  if (Array.isArray(v)) return Math.max(0, ...v.map((n) => Number(n) || 0))
+  return Number(v) || 0
+}
+
+/** 多行判定阈值（层框高/字号）：2 行文本层框高 ≈ 2×行距（行距系数 ≥1.2）→ ≥2.4×fs；
+ * 单行文本的标注行高可宽松到 ~2×fs（Sketch 常见 1.5-1.7）。
+ * 旧阈值 1.5 把 fs15/h24（1.6×）这类「单行宽松行高」误判多行——不设固定高、按渲染
+ * 自然行距 fs×1.5=22.5 撑盒，比设计层框矮 1.5px/行，行间节奏逐行累积上移。 */
+export const MULTILINE_HEIGHT_RATIO = 2.3
+
+/** 单行文本安全盒高（textFromSpec 同款策略，供调用方预算盒高/重居中补偿）：
+ * specH >= round(fs×1.53)-2 → specH（零漂移不溢出）；否则 max(round(fs×1.53)-2, ceil(fs×1.35))。
+ * 返回 0 表示多行/无固定高（自然撑高）。 */
+export function safeTextBoxHeight(fontSize, specH) {
+  const fs = Number(fontSize || 14)
+  const h = Number(specH)
+  if (!Number.isFinite(h) || h <= 0) return 0
+  if (h > fs * MULTILINE_HEIGHT_RATIO) return 0 // 多行：不设固定高
+  const scrollFloor = Math.round(fs * 1.53)
+  const glyphFloor = Math.ceil(fs * 1.35)
+  return h >= scrollFloor - 2 ? Math.round(h) : Math.max(scrollFloor - 2, glyphFloor)
+}
+
+/** 文本渲染盒高估算（与 textFromSpec 盒高策略严格一致）：
+ * 语义边界/行距预算一律用它，保证「估算底沿 == 渲染流式底沿」，顶距换算零漂移。
+ * 多行（specH > fs×1.5）自然撑高 ≈ 标注高度；无标注高自然撑高 = round(fs×1.53)。 */
+export function estimatedTextBoxHeight(specH, fontSize) {
+  const fs = Number(fontSize || 14)
+  const h = Number(specH)
+  if (Number.isFinite(h) && h > 0) {
+    if (h > fs * MULTILINE_HEIGHT_RATIO) return h
+    return safeTextBoxHeight(fs, h)
+  }
+  return Math.round(fs * 1.53)
+}
+
+/** Text 节点 + 完整 font 组（color/fontSize/fontWeight/textAlign 来自 spec textStyle） */
+export function textFromSpec(textObj) {
+  const t = comp('Text')
+  const _fs = Number(textObj.fontSize || 14)
+  const _specH = Number(textObj.height)
+  // 多行文本（spec 高度 > 1.5 倍字号）：允许换行(maxLine=0)，不设固定高度让文本自然撑高
+  // 单行文本：保留 spec 高度 + maxLine=1 防止换行，避免 scrollHeight > clientHeight 溢出
+  const _isMultiLine = Number.isFinite(_specH) && _specH > _fs * MULTILINE_HEIGHT_RATIO
+  // 多行段落的标注行距：标注总高/估算行数。低于自然行距(fs×1.5)时设 lineHeight 收拢，
+  // 否则段落比设计稿高 (1.5×fs−pitch)×行数，下方内容整段下漂。
+  const _multiLinePitch = _isMultiLine
+    ? _specH / Math.max(2, Math.round(_specH / (_fs * 1.5)))
+    : 0
+  if (_isMultiLine) {
+    // 不设 rect.height，文本自然撑高
+    // 多行段落钉标注宽：盒宽决定换行折点，比设计稿宽会把每行字数变多、折点全错。
+    const _specW = Number(textObj.width)
+    if (Number.isFinite(_specW) && _specW > 0) {
+      ensureStyleGroup(t, 'rect')
+      setStyleChild(t, 'rect', 'width', String(Math.round(_specW)))
+    }
+  } else if (Number.isFinite(_specH) && _specH > 0) {
+    ensureStyleGroup(t, 'rect')
+    // 盒高策略（实测渲染度量）：单行文本 scrollHeight ≈ round(fs×1.53)（PingFang web 度量，
+    // 与 font.lineHeight 无关——lineHeight 只能撑大不能缩小滚动高度），渲染器默认
+    // overflow:hidden，盒高不足会真实裁切。评分按 scrollH > clientH + 2 判溢出。
+    //  - specH >= scrollFloor-2：盒高=specH —— 零漂移且 scrollH <= specH+2，不溢出不裁切；
+    //  - specH < scrollFloor-2（标注层异常紧致）：盒高=max(scrollFloor-2, ceil(fs×1.35)) ——
+    //    scrollFloor-2 是评分安全线，fs×1.35 是字形 em 盒下限（再低会裁到字形本身），
+    //    残余漂移 <=3px，远小于直接撑到 fs×1.5 的 3-4px。
+    // 不设 font.lineHeight：实测对盒高/滚动高度无正向作用，且历史上因 font 组尚未
+    // ensure 而静默失效（setStyleChild 找不到子项直接 return false）。
+    const _boxH = safeTextBoxHeight(_fs, _specH)
+    if (_boxH > 0) setStyleChild(t, 'rect', 'height', String(_boxH))
+  }
+  ensureStyleGroup(t, 'font')
+  setStyleChild(t, 'font', 'color', hexToRgba(textObj.color || T.color('textDefault')))
+  setStyleChild(t, 'font', 'fontSize', String(textObj.fontSize || 14))
+  setStyleChild(t, 'font', 'fontWeight', String(textObj.fontWeight || '400'))
+  // textAlign：预览器 font 组支持 textAlign 子项（itemId 见 style-meta）
+  if (textObj.align) setStyleChild(t, 'font', 'textAlign', textObj.align)
+  // 框架行距（标注层框高/行数）与自然行距偏差 >0.5 时双向设定：偏低收拢防段落超高，
+  // 偏高撑开防行块过矮（框高是几何真值，textStyle.lineHeight 属性可能是陈旧元数据——
+  // 实测导出位图行距与框高一致、与 lineHeight 属性相差 4px/行）。
+  // 扩张方向无裁切风险（多行不设固定盒高，盒随内容长）。
+  if (_isMultiLine && Math.abs(_multiLinePitch - _fs * 1.5) > 0.5) {
+    setStyleChild(t, 'font', 'lineHeight', String(Math.round(_multiLinePitch)))
+  }
+  // 多行文本允许换行(maxLine=0)；单行文本用 maxLine=1 防止意外换行导致溢出检测误报
+  setStyleChild(t, 'font', 'maxLine', _isMultiLine ? '0' : '1')
+  // itemValueFrom：1=表达式绑定（必须带 itemDefaultValue）；0=常量
+  if (textObj.bind) {
+    t.properties = [boundProp('value', textObj.bind, textObj.defaultValue !== undefined ? textObj.defaultValue : textObj.text)]
+  } else {
+    t.properties = [constProp('value', textObj.text)]
+  }
+  return t
+}
+/** 切片(slice=切图/图片) → Image 组件，引用导出的切片 PNG 资源 */
+// 关键纪律：设计稿的箭头/图标常以 slice（切图）形式存在，且卡片 prompt.md §5.2 要求「优先复用切图素材」。
+// 禁止臆造 Icon 矢量字形替代（如 arrow=angle_right）；应如实用 Image 引用切片。
+// value 约定（issue-slices）：统一用 /slices/<扁平化导出路径> 引用，本地落点 src/slices/<扁平名>，
+//   由 Vite(5180)/cardbuddy(8787) 挂载 /slices/* 供预览访问；同步远程时再改写为 @filestore/<ns>/<name>@3x.png。
+export function imageFromSlice(sliceEl, specSlices) {
+  const exportRel = resolveSliceExport(specSlices, sliceEl.name)
+  const cropRel = sliceEl.annotationDefect?.cropSlice
+  if (!exportRel && !cropRel) return null
+  if (sliceEl.annotationDefect && !cropRel) return null
+  const img = comp('Image')
+  const r = rect(sliceEl)
+  ensureStyleGroup(img, 'rect')
+  ensureStyleGroup(img, 'image')
+  ensureStyleGroup(img, 'flex')
+  setStyleChild(img, 'rect', 'width', String(Math.round(r.width || 20)))
+  setStyleChild(img, 'rect', 'height', String(Math.round(r.height || 20)))
+  // 切片图标是固定尺寸节点：与撑满型兄弟节点（Input/值列）同处一行时绝不收缩，
+  // 否则会被 width:100% 的兄弟挤压变形。通用规则：固定型兄弟节点一律 flexShrink:0
+  setStyleChild(img, 'flex', 'flexShrink', '0')
+  // cropMode 01 = contain（透明小图标 PNG 不裁切、保持原比例）
+  setStyleChild(img, 'image', 'cropMode', '01')
+  img.properties = [imageStaticProp('value', sliceRefPath(cropRel || exportRel))]
+  return img
+}
+/** 可见媒体占位：素材未导出 PNG 时用占位 Image，
+ * 绝不静默丢弃（用户可见的图标必须还原位置）；仅装饰性大位图才允许跳过。
+ * 尺寸/圆角取自 sliceEl rect（与真实切片同占位）。 */
+export function placeholderImage(sliceEl) {
+  const r = rect(sliceEl)
+  const width = Math.max(1, Math.round(r.width || 20))
+  const height = Math.max(1, Math.round(r.height || 20))
+  const defectType = sliceEl.annotationDefect?.type || 'missing-slice'
+  const label = defectType === 'slice-visual-mismatch' ? '素材冲突' : '缺素材'
+  const placeholderUrl = `http://iph.href.lu/${width}x${height}?text=${encodeURIComponent(label)}`
+  const image = comp('Image')
+  ensureStyleGroup(image, 'rect')
+  ensureStyleGroup(image, 'image')
+  ensureStyleGroup(image, 'flex')
+  setStyleChild(image, 'rect', 'width', String(width))
+  setStyleChild(image, 'rect', 'height', String(height))
+  setStyleChild(image, 'flex', 'flexShrink', '0')
+  setStyleChild(image, 'image', 'cropMode', '01')
+  image.properties = [imageStaticProp('value', placeholderUrl)]
+  return image
+}
+/** 功能图标三态：已导出 → 真实 Image；未导出 → 占位 Image；无 sliceEl → null（装饰跳过由调用方决定） */
+export function imageOrPlaceholder(sliceEl, specSlices) {
+  if (!sliceEl) return null
+  const img = imageFromSlice(sliceEl, specSlices)
+  return img || placeholderImage(sliceEl)
+}
+
+/** 在 sem.slices（切片元素数组）中按导出相对路径反查切片元素（用于取 rect 尺寸） */
+export function findSliceElByExport(sem, exportRel) {
+  if (!exportRel) return null
+  const base = stripScale(String(exportRel).split('/').pop())
+  return (sem.slices || []).find((s) => stripScale(String(s.name || '').split('/').pop()) === base) || null
+}
+/** 把金额字符串（如 "¥5,638.00" / "-¥23.50"）解析为数字 */
+export function parseAmount(text) {
+  if (!text) return null
+  // 从任意位置抽取首个数字串（先剥千分位/空白）——兼容 "HK$14,222.7" 这类
+  // 字母+符号混合前缀；只剥符号对字母前缀无能为力（parseFloat("HK1…")=NaN → 金额归零）。
+  const neg = /^-|^\(.*\)$/.test(text) ? -1 : 1
+  const m = String(text).replace(/[,，\s]/g, '').match(/\d+(\.\d+)?/)
+  if (!m) return null
+  return neg * parseFloat(m[0])
+}
+/** 纯掩码文本（如 "*****" / "●●●●"）：无数字、仅掩码符。
+ * 金额隐藏态（如隐藏余额）在设计稿中只有掩码占位，底层数值不可知；
+ * 若按 number 解析会得到 0 并覆盖掩码展示（重影/失真），应按 string 字面量绑定。 */
+export function isMaskedOnlyText(text) {
+  const t = String(text || '').trim()
+  return t.length > 0 && !/\d/.test(t) && /^[*●•·]+$/.test(t)
+}
+/** 构建金额表达式（千分号 + 两位小数 + 运行时按正负决定负号前缀）
+ * 关键纪律：**不能根据 spec 原始文本写死前缀负号**——同一变量在不同数据下可能正负切换。
+ * 必须在表达式里运行时判断 $var 的正负：负数显示 '-¥abs'，正数显示 '¥amount'。
+ */
+export function currencyPrefixOf(srcText) {
+  const curMatch = String(srcText || '').replace(/^[-+]/, '').match(/^[^\d\-(),.\s]{1,4}(?=[\d(])/u)
+  return curMatch && /\p{Sc}/u.test(curMatch[0]) ? curMatch[0] : ''
+}
+export function amountExpr(varName, srcText, opts = {}) {
+  // 尊重设计稿原文：
+  //   原文含 ¥/￥ 符号 → '¥'+千分号（如"¥563.80"）
+  //   纯数字无符号 → 仅千分号（如 "2000" 配合相邻 "万元"）
+  //   原文含汉字单位（元/角/分/万）→ 仅千分号 + 单位后缀（如 "563.80元" / "5,074.20元"）
+  // 避免把设计稿的"563.80元"强改为"¥563.80"。
+  // 小数位数尊重原文：原文整数（如"2000万元"）不强加 .00，否则按默认宽度裁切后显示成"2,00"；
+  // 运行时若非整数仍兜底 toFixed(2)。原文无千分号则不加（避免 4 位整数被插逗号撑破设计宽度）。
+  const unitMatch = srcText != null ? String(srcText).match(/([\d,.\-]+)([\u4e00-\u9fa5]+)$/) : null
+  const hasYuanUnit = !!unitMatch
+  // 货币前缀取设计稿原文（任意 Unicode 货币符号，含 "HK$"/"US$" 字母+符号组合），不写死某一种
+  // 负号不是货币前缀的一部分：先剥离首符号再取前缀（"-¥2,000.00" 否则丢 ¥）。
+  const curPrefix = currencyPrefixOf(srcText)
+  const hasCurrency = !!curPrefix
+  const srcNum = srcText != null ? String(srcText).replace(/[^\d,.-]/g, '') : ''
+  const srcHasDecimals = /\.\d/.test(srcNum)
+  const srcHasSep = srcNum.includes(',')
+  const absRaw = "($" + varName + " < 0 ? (0 - $" + varName + ") : $" + varName + ")"
+  const sep = ".replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')"
+  const abs = srcHasDecimals
+    ? absRaw + ".toFixed(2)" + sep
+    : "((" + absRaw + ") % 1 === 0 ? '' + (" + absRaw + ") : (" + absRaw + ").toFixed(2))" + (srcHasSep ? sep : '')
+  const sign = "($" + varName + " < 0 ? '-' : '')"
+  if (hasYuanUnit) {
+    const unit = JSON.stringify(unitMatch[2])
+    return `${sign} + ${abs} + ${unit}`
+  }
+  // 列表行模板共用一套表达式：货币前缀必须逐行数据驱动（$amtCurN），否则首行符号套到全行
+  if (opts.prefixVar) return `${sign} + $${opts.prefixVar} + ${abs}`
+  return `${sign} + ${abs}`
+}
+
+export function amountValueExpr(varName, srcText, { currencyPrefix = true } = {}) {
+  const expression = amountExpr(varName, srcText)
+  return currencyPrefix ? expression : expression.replace(/ \+ (?:'[^']*'|"[^"]*")/, '')
+}
+/** 卡号脱敏表达式：仅存【完整】卡号，展示时由表达式处理脱敏（保留前4后4，中间 ****）。
+ * 通用做法：不另存 masked 字段——双字段会带来数据冗余与双源不一致。
+ * 设计稿里的 * 只是脱敏占位，真实数据基本未脱敏，故 data 里存完整卡号，表达式负责展示态脱敏。 */
+export function maskCardExpr(varName) {
+  const v = '$' + varName
+  // 脱敏组数随行号长度走：16 位卡号 = 前4 + 两组 **** + 后4（如"6230 **** **** 2939"），
+  // 只有一组会丢段（曾渲染成"6230 **** 2939"）。
+  return `(${v}.length > 8 ? ${v}.slice(0,4) + ' ****'.repeat(Math.max(1, Math.ceil((${v}.length - 8) / 4))) + ' ' + ${v}.slice(-4) : ${v})`
+}
+/** 脱敏还原：设计稿中的 * 是脱敏占位（真实数据基本未脱敏），mock 须还原为未脱敏值。
+ * 规则：* 还原为 0（保留位数结构），去空格。如 "6230 **** 1238" → "623000001238"。 */
+export function unmask(s) {
+  return String(s).split('').map((ch) => (ch === '*' ? '0' : ch)).join('').replace(/\s+/g, '')
+}
+/** 把文本按 literalBind 映射为绑定表达式（关键信息 → $obj.field），否则原样常量返回。
+ * e.expr 存在时优先用自定义表达式（如卡号脱敏 maskCardExpr），否则按 amount/$var 兜底。 */
+export function applyLiteralBind(textObj, map) {
+  const e = map && map[textObj.text]
+  if (!e) return textObj
+  const expr = e.expr || (e.amount ? amountExpr(e.var) : '$' + e.var)
+  return { ...textObj, bind: expr, defaultValue: e.default }
+}
+/** 值格式分类（纯 SHAPE，零业务语义）：只决定「绑定表达式用哪种变换」，不关心"这是什么业务字段"。
+ *  - amount    带 ¥/元/千分位/小数的数值
+ *  - cardNumber 4-4-4(含*) 或 12-19 位纯数字
+ *  - phone     11 位手机号 / 6+ 位纯数字
+ *  - code      (XXXX) 括号后缀
+ *  - name      2-4 个中文字（含 ·•）
+ *  - date      YYYY-MM-DD
+ *  - text      其余（默认字面量，不绑定）
+ */
+export function classifyValue(s) {
+  const t = (s || '').trim()
+  // 金额：¥/￥ 前缀、千分位/小数、或 数字+元（含小数，如 563.80元 / 5,074.20元）
+  if (/^[A-Za-z]{0,3}\p{Sc}.*[\d,]+(\.\d+)?$|^[\d,]+\.\d+$|^[\d,]+(\.\d+)?元$/u.test(t)) return 'amount'
+  if (/^\*?\d{4}[\s*·\-]+\d{4}([\s*·\-]+\d{1,4})*\*?$/.test(t) || /^\d{12,19}$/.test(t.replace(/\s/g, ''))) return 'cardNumber'
+  if (/^1\d{10}$/.test(t) || /^\d{6,}$/.test(t)) return 'phone'
+  if (/^\(.*\)$/.test(t)) return 'code'
+  if (/^[一-龥·•]{2,4}$/.test(t)) return 'name'
+  if (/^\d{4}-\d{2}-\d{2}$/.test(t)) return 'date'
+  return 'text'
+}
+/** 手机号脱敏表达式：仅当设计稿本身含 * 时才脱敏（保留前3后4，中间 ****）；否则原样绑定（展示态=设计态）。 */
+export function maskPhoneExpr(varName) {
+  const v = '$' + varName
+  return `(${v}.length === 11 ? ${v}.slice(0,3) + '****' + ${v}.slice(-4) : ${v})`
+}
+/** 由「值格式角色」决定绑定表达式（普适，与业务无关）。脱敏仅当源文本含 * 时才启用，保证展示态=设计态。 */
+export function valueExpr(role, varName, text) {
+  if (role === 'amount') return amountExpr(varName, text)
+  // 卡号分组空格是展示态的一部分：数据层 unmask 存纯数字，表达式按源文本分组模式还原空格。
+  // 分组模式从源文本推导（如 "6239 2738 2928 0193" → 等长 4 位组），不写死分组规则；
+  // 非均匀分组罕见且易错，回退为原样绑定（设计稿还原优先于数据规范化）。
+  if (role === 'cardNumber') {
+    if (/\*/.test(text || '')) return maskCardExpr(varName)
+    const grouped = String(text || '').trim().match(/^\d+( \d+)+$/)
+    if (grouped) {
+      const lens = String(text).trim().split(' ').map((g) => g.length)
+      if (lens.every((l) => l === lens[0])) {
+        return `($${varName} || '').replace(/\\D/g, '').replace(/(\\d{${lens[0]}})(?=\\d)/g, '$1 ')`
+      }
+    }
+    return '$' + varName
+  }
+  if (role === 'phone') return /\*/.test(text || '') ? maskPhoneExpr(varName) : '$' + varName
+  return '$' + varName
+}
+/* ----------------------- 语义化字段命名（标签词典 + 值角色兜底，泛化非硬编码） ----------------------- */
+// 双层命名机制（替代旧 obj_N / amount_0 序号命名）：
+//   1) 标签词典 references/field_name_dict.json：UI 中文标签（表单行左标签 / 副值行标签 / 辅助文案）
+//      → 语义化英文驼峰 key。词典是**领域通用词表**（账号/金额/人/日期/状态等高频标签），
+//      不针对任何具体卡片：任何卡的标签都能命中，卡片 id 永不进入命名。
+//   2) 值角色兜底（cardNumber/amount/phone/name/date/code）：词典未命中时按值格式命名，
+//      保证永不出现 obj_N / amount_0 序号名。
+export let _fieldDict = null
+export function loadFieldDict() {
+  if (_fieldDict) return _fieldDict
+  try {
+    _fieldDict = JSON.parse(fs.readFileSync(path.join(SCRIPT_DIR, '..', 'references', 'field_name_dict.json'), 'utf8'))
+  } catch { _fieldDict = { entries: [] } }
+  return _fieldDict
+}
+export function displayPrefixRe() {
+  const prefixes = (loadFieldDict().displayPrefixes || [])
+    .map((item) => String(item).trim()).filter(Boolean)
+  if (!prefixes.length) return null
+  return new RegExp(`^(${prefixes.map((item) => item.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})\\s*`)
+}
+// 中文 label → 词典条目（去冒号空格后做前缀包含匹配；最长词优先，避免「金额」抢先于「转账金额」）
+export function dictEntryFor(label) {
+  const norm = String(label || '').replace(/[:：\s]/g, '')
+  if (!norm) return null
+  const entries = (loadFieldDict().entries) || []
+  let best = null, bestLen = 0
+  for (const en of entries) {
+    for (const l of en.labels || []) {
+      const ln = String(l).replace(/\s/g, '')
+      if (norm.includes(ln) && ln.length > bestLen) { best = en; bestLen = ln.length }
+    }
+  }
+  return best
+}
+// label → 对象级 key（实体名，如「转出账号」→ outAccount）；未命中返回 null
+export function entityKeyFor(label) {
+  const en = dictEntryFor(label)
+  if (!en) return null
+  return en.entityKey || en.fieldKey || null
+}
+// label → 字段级 key（如「可用余额：」→ availableBalance）；未命中返回 null
+export function fieldKeyFor(label) {
+  const en = dictEntryFor(label)
+  if (!en) return null
+  return en.fieldKey || en.entityKey || null
+}
+// 值格式角色 → 兜底字段名（词典未命中时用；也用于无 label 场景）
+export const ROLE_BASE_NAME = { amount: 'amount', cardNumber: 'cardNumber', phone: 'phone', code: 'code', date: 'date', name: 'name' }
+export function roleFieldKey(role, label) {
+  const dk = fieldKeyFor(label)
+  if (dk) return dk
+  return ROLE_BASE_NAME[role] || role
+}
+// 唯一 key：base 已被占用 → base_1 / base_2 ...
+export function uniqueKey(base, used) {
+  let k = base || 'field'
+  let i = 1
+  while (used.has(k)) k = base + '_' + (i++)
+  used.add(k)
+  return k
+}
+
+/** 把含多个值 token 的文本拆为有序段：[{text, role}]，role=null 表示字面量（非值）。
+ * 仅按 SHAPE 切分，不依赖业务词；用于「张三 13800138000」类单元素多值文本。 */
+export function splitValueTokens(raw) {
+  const t = (raw || '').trim()
+  if (!t) return []
+  const tokRe = /(¥?\s*[\d,]+(\.\d+)?\s*元?|[\d]{4}[\s*·\-]+[\d]{4}([\s*·\-]+[\d]{1,4})*|\([\w]+\)|[一-龥·•]{2,4}|1\d{10}|\d{6,})/g
+  const segs = []
+  let last = 0, m
+  while ((m = tokRe.exec(t))) {
+    if (m.index > last) {
+      const lit = t.slice(last, m.index).trim()
+      if (lit) segs.push({ text: lit, role: null })
+    }
+    segs.push({ text: m[0].trim(), role: classifyValue(m[0]) })
+    last = m.index + m[0].length
+  }
+  if (last < t.length) { const tail = t.slice(last).trim(); if (tail) segs.push({ text: tail, role: null }) }
+  return segs
+}
+/** 枚举统计行检测（Enum-Stat Strip，泛用非硬编码）：识别「类型标签 + 数字」多段枚举统计文本。
+ * 结构信号（不看业务词，任何枚举统计场景通用）：
+ *  1. 整行 = ≥2 段「短标签 + 数字」；
+ *  2. 段间统一分隔符（· 、 ， | / 空格等，整行内一致）；
+ *  3. 每段数字 = 正整数计数（5/12）或金额（¥1,280.00 / 2.5万 / 563.80元）；
+ *  4. 每段标签 = 1-6 字分类词（动账/转账/站内…），排除量词/序号（第 5 名不命中）。
+ * 命中返回 { items:[{label,value}], sep }（sep 为段间原文分隔符串，渲染 map/join 用）；
+ * 未命中返回 null。例："动账 5 · 转账 2 · 站内 1 · 其他 4" → items 4 项 + sep " · "。
+ * 注：value 统一为 number（计数 parseInt；金额 parseAmount）。 */
+export function detectEnumStatStrip(raw) {
+  const t = String(raw || '').trim()
+  if (!t) return null
+  // 全局配对：每段 = 「1-6 字标签 + 数字（计数或金额）」+ 可选的段间分隔符（·、，|/ 空格等）。
+  // 要求：① 全文本从头到尾都被配对覆盖（无残余）；② 段数 ≥2；③ 段间分隔符类型统一。
+  // 数字形态：正整数计数（5/12）或金额（1,200.00 / ¥5,638.00 / 2.5万 / 563.80元）。
+  const pairRe = /([\u4e00-\u9fa5A-Za-z]{1,6})[\s　]*([¥￥]?[\d][\d,]*(?:\.\d+)?(?:[元万]|%|％)?)([·、，,|/\s　]*)/g
+  const items = []
+  const seps = []
+  let m, lastEnd = 0
+  while ((m = pairRe.exec(t))) {
+    if (m.index !== lastEnd) return null // 段间存在无法解释的内容（如"剩余 3 天"的"天"）
+    const label = m[1], numText = m[2], sep = m[3] || ''
+    const value = /[¥￥]/.test(numText) || /\.\d/.test(numText) || /[元万]/.test(numText)
+      ? (parseAmount(numText) !== null ? parseAmount(numText) : Number(numText.replace(/[^0-9.]/g, '')))
+      : parseInt(numText.replace(/[^0-9]/g, ''), 10)
+    items.push({ label, value: isNaN(value) ? 0 : value })
+    if (sep) seps.push(sep)
+    lastEnd = m.index + m[0].length
+  }
+  if (items.length < 2 || lastEnd !== t.length) return null
+  // 分隔符统一性：去空格后相同才命中（" · " 与 " | " 混用 → 不规则，交给 LLM/Agent 判）
+  const normSeps = new Set(seps.map((s) => s.replace(/\s/g, '')))
+  if (normSeps.size > 1) return null
+  // 分隔符取**原文形态**（保留空格，如 " · "）——渲染 map/join 用它还原设计稿视觉；纯空格型取单个空格。
+  const sep = seps.length ? seps[0] : ' '
+  return { items, sep }
+}
+/** 容器（Row/Column）+ flex 组（direction/justify/align/gap）+ padding 组
+ * 关键默认：flexShrink='1'（允许空间不足时被压缩）。
+ * 这是 flex 布局的标准行为——所有子项默认可压缩，由调用方通过 opts.flexShrink='0'
+ * 显式声明"独占保护"的元素（如列表右侧金额/箭头组），避免 width:100% 被默认 shrink=0 顶死。
+ * 范式参考：creditCardBill row_5v → column_61(width:100%, 默认可压缩) + row_6h(flexShrink:0)
+ */
+export function container(className, opts = {}) {
+  const n = comp(className)
+  ensureStyleGroup(n, 'rect')
+  ensureStyleGroup(n, 'flex')
+  ensureStyleGroup(n, 'padding')
+  if (opts.width) setStyleChild(n, 'rect', 'width', String(opts.width))
+  // 关键：按 className 自动推导默认排列方向，防止漏传 direction 时落到 style-meta 默认 row
+  // 造成"选了 Column 却横向排列"的离谱布局（_v3_dividerfix 曾踩：itemTpl=Column 但方向未设=横排）
+  const defaultDir = opts.direction || (className === 'Column' ? 'column' : 'row')
+  setStyleChild(n, 'flex', 'flexDirection', defaultDir)
+  if (opts.justify) setStyleChild(n, 'flex', 'justifyContent', opts.justify)
+  if (opts.align) setStyleChild(n, 'flex', 'alignItems', opts.align)
+  if (opts.gap !== undefined) setStyleChild(n, 'flex', 'gap', String(opts.gap))
+  // 默认允许压缩；opts.flexShrink 显式覆盖（'0' 表示独占保护不被压缩）
+  setStyleChild(n, 'flex', 'flexShrink', opts.flexShrink !== undefined ? String(opts.flexShrink) : '1')
+  if (opts.padding !== undefined) {
+    // 支持两种语法：单值 "12" → 统一 padding；双值/四值 "12 16" / "8 16" → paddingType=1 各边独立。
+    // 关键纪律：style-meta 的 padding.padding 仅接受单值，多值必须拆到 paddingTop/Right/Bottom/Left，
+    // 否则渲染器解析失败 → 文本 width 塌缩为 0（纵向换行）、行宽爆成数千 px（实测 2432px）。
+    const pv = String(opts.padding).trim().split(/\s+/).map(Number)
+    if (pv.length === 1 || isNaN(pv[1])) {
+      setStyleChild(n, 'padding', 'paddingType', '0')
+      setStyleChild(n, 'padding', 'padding', String(pv[0] || 0))
+    } else {
+      setStyleChild(n, 'padding', 'paddingType', '1')
+      const [a, b, c, d] = pv
+      const top = a, right = (b !== undefined ? b : a)
+      const bottom = (c !== undefined ? c : a), left = (d !== undefined ? d : right)
+      setStyleChild(n, 'padding', 'paddingTop', String(top))
+      setStyleChild(n, 'padding', 'paddingBottom', String(bottom))
+      setStyleChild(n, 'padding', 'paddingLeft', String(left))
+      setStyleChild(n, 'padding', 'paddingRight', String(right))
+    }
+  }
+  return n
+}
+/** 白色圆角卡片容器（背景 + 圆角） */
+export function whiteCard(opts = {}) {
+  const c = container('Column', { direction: 'column', padding: opts.padding || 0, ...opts })
+  ensureStyleGroup(c, 'background')
+  ensureStyleGroup(c, 'borderRadius')
+  setStyleChild(c, 'background', 'backgroundType', '01')
+  setStyleChild(c, 'background', 'backgroundColor', hexToRgba(opts.bg || T.color('cardBg')))
+  setStyleChild(c, 'borderRadius', 'borderRadiusType', '0')
+  setStyleChild(c, 'borderRadius', 'borderRadius', String(opts.radius || 12))
+  return c
+}
+
+/* ============================== 1. spec.json 元素聚类为语义块 ============================== */
+
+export function rect(e) { return e?.rect || {} }
+export function ts(e) { return e.textStyle || {} }
+export function textOf(e) { return (e.text || '').trim() }
+// 颜色亮度（0-1）：#RRGGBB → 相对亮度；非法输入返回 null
+export function colorLuminance(hex) {
+  if (!hex || typeof hex !== 'string') return null
+  const m = hex.replace('#', '')
+  if (m.length < 6) return null
+  const r = parseInt(m.slice(0, 2), 16) / 255
+  const g = parseInt(m.slice(2, 4), 16) / 255
+  const b = parseInt(m.slice(4, 6), 16) / 255
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+// 低对比文本兜底（标注缺陷：换肤后文字色未同步，如白字落在白底上）：
+// 文本色与任一背景候选亮度几乎一致 → 不可见，用兜底色（壳描边色/默认文本色）替代。
+export function ensureVisibleTextColor(textColor, bgColors, fallback) {
+  const tl = colorLuminance(textColor)
+  if (tl === null) return fallback
+  for (const bg of bgColors) {
+    const bl = colorLuminance(bg)
+    if (bl === null) continue
+    if (Math.abs(tl - bl) < 0.08) return fallback
+  }
+  return textColor
+}
+/** 颜色调浅：与白色按比例混合（ratio=颜色占比），用于「描边同色 fill」标注缺陷的浅底还原 */
+export function tintHex(hex, ratio = 0.1) {
+  const h = String(hex || '').replace('#', '')
+  if (!/^[0-9a-fA-F]{6}$/.test(h)) return hex
+  const mix = (i) => Math.round(parseInt(h.slice(i, i + 2), 16) * ratio + 255 * (1 - ratio))
+  return '#' + [0, 2, 4].map((i) => mix(i).toString(16).padStart(2, '0')).join('').toUpperCase()
+}
+export function isBg(e) {
+  const r = rect(e)
+  return (r.width || 0) >= 340 && (r.height || 0) >= 600
+}
+export function sameRow(a, b, tol = 12) { return Math.abs((rect(a).y || 0) - (rect(b).y || 0)) <= tol }
+
+
+/** 矩形并集 / 包含判定（图表簇几何用） */
+export function unionRects(items) {
+  const xs = items.map((e) => rect(e).x || 0)
+  const ys = items.map((e) => rect(e).y || 0)
+  const rs = items.map((e) => (rect(e).x || 0) + (rect(e).width || 0))
+  const bs = items.map((e) => (rect(e).y || 0) + (rect(e).height || 0))
+  const x = Math.min(...xs); const y = Math.min(...ys)
+  return { x, y, width: Math.max(...rs) - x, height: Math.max(...bs) - y }
+}
+export function rectInside(outer, r, pad = 0) {
+  const pl = typeof pad === 'number' ? { l: pad, r: pad, t: pad, b: pad } : pad
+  return (r.x || 0) >= (outer.x || 0) - (pl.l || 0)
+    && (r.y || 0) >= (outer.y || 0) - (pl.t || 0)
+    && ((r.x || 0) + (r.width || 0)) <= (outer.x || 0) + (outer.width || 0) + (pl.r || 0)
+    && ((r.y || 0) + (r.height || 0)) <= (outer.y || 0) + (outer.height || 0) + (pl.b || 0)
+}
+
+/** 柱状图矢量簇识别（纯几何，不依赖业务词）：
+ *  同基线（底沿 ±3）窄柱 ≥4 + 横向近等距 + 网格线/轴标签佐证 → 整簇（柱+网格线+簇内文本）
+ *  交给 Canvas 自绘回放。DSL 无图表组件，此前柱体被静默丢弃、网格线被当 Divider 错排。 */
+export function detectChartClusters(content) {
+  const shapes = content.filter((e) => e.type === 'shape')
+  const texts = content.filter((e) => e.type === 'text' && textOf(e))
+  const bars = shapes.filter((e) => {
+    const r = rect(e); const fill = e.style?.fill
+    if (!fill || (!fill.color && !fill.gradient)) return false
+    if (radiusMax(e.style) >= 8) return false
+    return (r.width || 0) >= 4 && (r.width || 0) <= 48 && (r.height || 0) >= 4 && (r.height || 0) <= 260
+  })
+  const byBottom = []
+  for (const bar of bars.slice().sort((a, b) => (rect(a).x || 0) - (rect(b).x || 0))) {
+    const bottom = (rect(bar).y || 0) + (rect(bar).height || 0)
+    let group = byBottom.find((item) => Math.abs(item.bottom - bottom) <= 3)
+    if (!group) { group = { bottom, members: [] }; byBottom.push(group) }
+    group.members.push(bar)
+  }
+  const clusters = []
+  for (const group of byBottom) {
+    if (group.members.length < 4) continue
+    const xs = group.members.map((m) => rect(m).x || 0)
+    const gaps = xs.slice(1).map((x, i) => x - xs[i])
+    const gapAvg = gaps.reduce((a, b) => a + b, 0) / Math.max(1, gaps.length)
+    if (gaps.some((gap) => Math.abs(gap - gapAvg) > Math.max(6, gapAvg * 0.6))) continue
+    const barBox = unionRects(group.members)
+    const grid = shapes.filter((e) => {
+      const r = rect(e)
+      if ((r.height || 0) > 2 || (r.width || 0) < 60) return false
+      const overlap = Math.min((r.x || 0) + (r.width || 0), barBox.x + barBox.width) - Math.max(r.x || 0, barBox.x)
+      return overlap >= barBox.width * 0.6 && (r.y || 0) >= barBox.y - 260 && (r.y || 0) <= barBox.y + barBox.height + 4
+    })
+    const seedBox = unionRects([...group.members, ...grid])
+    const labels = texts.filter((e) => rectInside(seedBox, rect(e), { l: 48, r: 12, t: 30, b: 36 }))
+    if (grid.length < 3 && labels.length < 4) continue
+    const members = [...group.members, ...grid]
+    const box = unionRects([...members, ...labels])
+    clusters.push({ kind: 'bar', members, texts: labels, x: box.x, y: box.y, width: box.width, height: box.height })
+  }
+  return clusters
+}
+
+/** 柱状图簇 → Canvas onMeasured 绘图代码（坐标相对簇原点；只用代理白名单 API）。
+ *  圆角矩形无 roundRect 白名单 → 四角 arc 拼路径；网格线走 stroke；标签走 fillText。 */
+/** 图表绘制层序（铁律 R62）：坐标系 / 参考系线条（网格线、轴线、刻度线、雷达环与辐射线、环形轨道）
+ *  画在**最底层**，数据标记（柱 / 折线 / 多边形 / 扇区）在其上，文字标签最上层。
+ *  Canvas 是即时模式绘制——后画的压先画的，所以出码顺序必须 = 底 → 顶。
+ *  spec 元素顺序**不可照抄**：标注导出常把网格线排在数据图元之后（assetAllocRadar 雷达
+ *  34-39 是 #DCDCDC 网格/辐射线、40 才是数据多边形），直出会把参考线盖在数据上。 */
+export function chartPaintLayers(members, cluster) {
+  const backdrop = []
+  const axis = []
+  const marks = []
+  const cw = cluster?.width || 0
+  const ch = cluster?.height || 0
+  for (const m of members) {
+    const r = rect(m)
+    const w = r.width || 0
+    const h = r.height || 0
+    // 细线（任一维 ≤2px）= 网格线 / 轴线 / 刻度线 → 底层
+    if (h <= 2 || w <= 2) { axis.push(m); continue }
+    // 大面积填充（覆盖簇 bbox 一半以上）= 绘图区底板 → 更底层
+    const fill = m.style?.fill
+    if (fill && (fill.color || fill.gradient) && cw && ch && w >= cw * 0.5 && h >= ch * 0.5) { backdrop.push(m); continue }
+    marks.push(m)
+  }
+  return { backdrop, axis, marks }
+}
+
+/** 数据标记半透明时把 opacity 乘进颜色 / 渐变（ctx 代理白名单无 globalAlpha），底层网格才透得出来。 */
+export function chartPaintColor(color, opacity = 1) {
+  const op = Number(opacity)
+  const k = Number.isFinite(op) && op > 0 && op < 1 ? op : 1
+  const c = String(color || '').trim()
+  const m = c.match(/^rgba?\(([^,]+),([^,]+),([^,]+)(?:,([^)]+))?\)$/i)
+  if (m) return `rgba(${m[1].trim()},${m[2].trim()},${m[3].trim()},${Number(m[4] ?? 1) * k})`
+  return hexToRgba(color, k)
+}
+
+/** 柱状图簇 → flex 原生组件树（柱=色块 Column、值/轴/类目标签=真实 Text、网格线=硬停渐变背景）。
+ *  Canvas 自绘会让标注文本在组件计数中消失（文本召回/组件数被系统性低估），且字体渲染与设计稿偏差大；
+ *  渲染器无绝对定位，故用「轴列 + 槽位列」flex 结构按 spec 几何精确回放：
+ *  槽位边界取类目标签中心中点，柱列宽=柱宽、值标签靠 overflow:visible 居中溢出。
+ *  返回 null 表示该簇不满足柱状图形态（调用方回退 Canvas）。 */
+export function buildFlexBarChart(cluster) {
+  const members = cluster.members || []
+  const bars = members.filter((m) => {
+    const r = rect(m); const h = r.height || 0; const w = r.width || 0
+    return m.style?.fill?.color && h >= 4 && w >= 6 && w <= 48
+  })
+  const gridlines = members.filter((m) => (rect(m).height || 0) <= 2 && (rect(m).width || 0) >= 100)
+  const texts = cluster.texts || []
+  if (bars.length < 4 || gridlines.length < 2 || !texts.length) return null
+  const baseline = Math.max(...bars.map((b) => (rect(b).y || 0) + (rect(b).height || 0)))
+  const plotLeft = Math.min(...bars.map((b) => rect(b).x || 0))
+  const plotRight = Math.max(...gridlines.map((g) => (rect(g).x || 0) + (rect(g).width || 0)),
+    ...bars.map((b) => (rect(b).x || 0) + (rect(b).width || 0)))
+  const plotTop = Math.min(...gridlines.map((g) => rect(g).y || 0))
+  const axisTexts = texts.filter((t) => ((rect(t).x || 0) + (rect(t).width || 0)) <= plotLeft - 4)
+    .sort((a, b) => (rect(a).y || 0) - (rect(b).y || 0))
+  const nameTexts = texts.filter((t) => (rect(t).y || 0) >= baseline + 2)
+    .sort((a, b) => (rect(a).x || 0) - (rect(b).x || 0))
+  const valueTexts = texts.filter((t) => !axisTexts.includes(t) && !nameTexts.includes(t))
+  if (!axisTexts.length || !nameTexts.length) return null
+  // 槽位：类目标签中心的中点切分绘图区
+  const centers = nameTexts.map((t) => (rect(t).x || 0) + (rect(t).width || 0) / 2)
+  const bounds = [plotLeft]
+  for (let i = 1; i < centers.length; i++) bounds.push(Math.round((centers[i - 1] + centers[i]) / 2))
+  bounds.push(plotRight)
+  const slots = []
+  for (let i = 0; i < nameTexts.length; i++) {
+    const slotBars = bars.filter((b) => {
+      const cx = (rect(b).x || 0) + (rect(b).width || 0) / 2
+      return cx >= bounds[i] - 1 && cx <= bounds[i + 1] + 1
+    }).sort((a, b) => (rect(a).x || 0) - (rect(b).x || 0))
+    if (!slotBars.length) return null
+    slots.push({ name: nameTexts[i], x: bounds[i], width: bounds[i + 1] - bounds[i], bars: slotBars })
+  }
+  const plotH = Math.round(baseline - plotTop)
+  const axisTop = rect(axisTexts[0]).y || 0
+  const axisBottom = Math.max(...axisTexts.map((t) => (rect(t).y || 0) + (rect(t).height || 0)))
+  const axisRight = Math.max(...axisTexts.map((t) => (rect(t).x || 0) + (rect(t).width || 0)))
+  const axisGap = Math.max(0, Math.round(plotLeft - axisRight))
+  const nameTop = Math.min(...nameTexts.map((t) => rect(t).y || 0))
+  const nameGap = Math.max(0, Math.round(nameTop - baseline))
+  // 网格线硬停渐变（坐标系线条必须在绘制层最底部 → 作背景，柱/标签在其上）
+  const gl = gridlines.map((g) => rect(g).y || 0).sort((a, b) => a - b)
+  const glColor = (() => {
+    const g0 = gridlines[0]
+    const stops = g0.style?.fill?.gradient?.stops || g0.style?.fill?.gradient?.colors || null
+    if (Array.isArray(stops) && stops[0]?.color) return hexToRgba(stops[0].color)
+    if (g0.style?.fill?.color) return hexToRgba(g0.style.fill.color)
+    return 'rgba(244,244,247,1)'
+  })()
+  const gradParts = []
+  let prev = 0
+  for (const y of gl) {
+    const o = Math.max(0, Math.round(y - plotTop))
+    if (o > prev) gradParts.push(`rgba(0,0,0,0) ${prev}px`, `${glColor} ${o}px`)
+    gradParts.push(`${glColor} ${o}px`, `${glColor} ${o + 1}px`)
+    prev = o + 1
+  }
+  gradParts.push(`rgba(0,0,0,0) ${prev}px`, `rgba(0,0,0,0) ${plotH}px`)
+  // —— 组装 ——
+  const chartRow = container('Row', { width: '100%', direction: 'row', align: 'flex-start', gap: String(axisGap) })
+  const axisCol = container('Column', {
+    direction: 'column', justify: 'space-between', align: 'flex-end', flexShrink: 0,
+    width: String(Math.round(axisRight - (rect(axisTexts[0]).x || 0))),
+  })
+  ensureStyleGroup(axisCol, 'rect')
+  setStyleChild(axisCol, 'rect', 'height', String(Math.round(axisBottom - axisTop)))
+  for (const t of axisTexts) {
+    const node = textFromSpec({ ...t, text: textOf(t), color: ts(t).color, fontSize: ts(t).fontSize, fontWeight: ts(t).fontWeight, align: 'right' })
+    ensureStyleGroup(node, 'flex')
+    setStyleChild(node, 'flex', 'flexShrink', '0')
+    axisCol.slots[0].components.push(node)
+  }
+  chartRow.slots[0].components.push(axisCol)
+  const plotCol = container('Column', {
+    direction: 'column', align: 'stretch', gap: '0', flexShrink: 0,
+    width: String(Math.round(plotRight - plotLeft)),
+    padding: `${Math.max(0, Math.round(plotTop - axisTop))} 0 0 0`,
+  })
+  const gridArea = container('Row', { direction: 'row', align: 'flex-end', gap: '0', width: '100%' })
+  ensureStyleGroup(gridArea, 'rect')
+  setStyleChild(gridArea, 'rect', 'height', String(plotH))
+  ensureStyleGroup(gridArea, 'background')
+  setStyleChild(gridArea, 'background', 'backgroundType', '03')
+  setStyleChild(gridArea, 'background', 'backgroundGradient', `linear-gradient(to bottom, ${gradParts.join(', ')})`)
+  for (const slot of slots) {
+    const padLeft = Math.max(0, Math.round((rect(slot.bars[0]).x || 0) - slot.x))
+    const slotCol = container('Column', {
+      direction: 'column', justify: 'flex-end', align: 'flex-start', flexShrink: 0,
+      width: String(slot.width), padding: `0 0 0 ${padLeft}`,
+    })
+    ensureStyleGroup(slotCol, 'rect')
+    setStyleChild(slotCol, 'rect', 'height', String(plotH))
+    // 柱列宽 = max(柱宽, 值标签宽)：渲染器 fit-content 受父宽限制会把标签折行（h 爆成 3 行）；
+    // 相邻标签水平重叠时用负 marginLeft 拉回设计中心（flex 行内唯一可重叠手段）。
+    const barRow = container('Row', { direction: 'row', align: 'flex-end', gap: '0' })
+    const firstBarX = rect(slot.bars[0]).x || 0
+    let barCursor = 0
+    for (const bar of slot.bars) {
+      const br = rect(bar)
+      const label = valueTexts.find((t) => {
+        const cx = (br.x || 0) + (br.width || 0) / 2
+        const tcx = (rect(t).x || 0) + (rect(t).width || 0) / 2
+        return Math.abs(tcx - cx) <= Math.max(br.width || 0, (rect(t).width || 0) / 2)
+          && (rect(t).y || 0) + (rect(t).height || 0) <= (br.y || 0) + 2
+      })
+      const barCenter = (br.x || 0) + (br.width || 0) / 2
+      // 渲染字形比标注 rect 略宽（PingFang 度量差）：不留余量会折行（h 16→30、整列上移）
+      const colW = Math.max(Math.round(br.width || 0), label ? Math.round(rect(label).width || 0) + 4 : 0)
+      const desiredLeft = Math.round(barCenter - colW / 2) - firstBarX
+      const barCol = container('Column', {
+        direction: 'column', justify: 'flex-end', align: 'center', gap: '0', flexShrink: 0,
+        width: String(colW),
+      })
+      if (desiredLeft !== barCursor) {
+        ensureStyleGroup(barCol, 'margin')
+        setStyleChild(barCol, 'margin', 'marginType', '1')
+        setStyleChild(barCol, 'margin', 'marginLeft', String(desiredLeft - barCursor))
+        setStyleChild(barCol, 'margin', 'marginTop', '0')
+        setStyleChild(barCol, 'margin', 'marginRight', '0')
+        setStyleChild(barCol, 'margin', 'marginBottom', '0')
+      }
+      barCursor = desiredLeft + colW
+      if (label) {
+        const ln = textFromSpec({ text: textOf(label), color: ts(label).color, fontSize: ts(label).fontSize, fontWeight: ts(label).fontWeight, align: 'center' })
+        ensureStyleGroup(ln, 'flex')
+        setStyleChild(ln, 'flex', 'flexShrink', '0')
+        barCol.slots[0].components.push(ln)
+      }
+      const block = container('Column', { direction: 'column', flexShrink: 0 })
+      ensureStyleGroup(block, 'rect')
+      ensureStyleGroup(block, 'background')
+      ensureStyleGroup(block, 'borderRadius')
+      setStyleChild(block, 'rect', 'width', String(Math.round(br.width || 0)))
+      setStyleChild(block, 'rect', 'height', String(Math.round(br.height || 0)))
+      setStyleChild(block, 'background', 'backgroundType', '01')
+      setStyleChild(block, 'background', 'backgroundColor', hexToRgba(bar.style.fill.color))
+      setStyleChild(block, 'borderRadius', 'borderRadiusType', '1')
+      setStyleChild(block, 'borderRadius', 'borderTopLeftRadius', '2')
+      setStyleChild(block, 'borderRadius', 'borderTopRightRadius', '2')
+      setStyleChild(block, 'borderRadius', 'borderBottomLeftRadius', '0')
+      setStyleChild(block, 'borderRadius', 'borderBottomRightRadius', '0')
+      barCol.slots[0].components.push(block)
+      barRow.slots[0].components.push(barCol)
+    }
+    slotCol.slots[0].components.push(barRow)
+    gridArea.slots[0].components.push(slotCol)
+  }
+  plotCol.slots[0].components.push(gridArea)
+  const nameRow = container('Row', { direction: 'row', align: 'flex-start', gap: '0', width: '100%', padding: `${nameGap} 0 0 0` })
+  for (const slot of slots) {
+    const slotCol = container('Column', { direction: 'column', align: 'flex-start', flexShrink: 0, width: String(slot.width) })
+    // 类目标签可能比柱对宽（日常开销 48 > 柱对 42）：居中行按标签宽撑开 + 负 margin 锚柱对中心，
+    // 槽位列 overflow visible 放行溢出（flex 行宽不变，邻槽不受影响）
+    ensureStyleGroup(slotCol, 'other')
+    setStyleChild(slotCol, 'other', 'overflow', 'visible')
+    const pairW = Math.round(((rect(slot.bars[slot.bars.length - 1]).x || 0) + (rect(slot.bars[slot.bars.length - 1]).width || 0)) - (rect(slot.bars[0]).x || 0))
+    const nameW = Math.round(rect(slot.name).width || 0) + 4
+    const rowW = Math.max(pairW, nameW)
+    const pairCenter = Math.round((rect(slot.bars[0]).x || 0) + pairW / 2)
+    const centerRow = container('Row', { direction: 'row', justify: 'center', align: 'center', width: String(rowW) })
+    const rowLeft = pairCenter - Math.round(rowW / 2) - slot.x
+    if (rowLeft !== 0) {
+      ensureStyleGroup(centerRow, 'margin')
+      setStyleChild(centerRow, 'margin', 'marginType', '1')
+      setStyleChild(centerRow, 'margin', 'marginLeft', String(rowLeft))
+      setStyleChild(centerRow, 'margin', 'marginTop', '0')
+      setStyleChild(centerRow, 'margin', 'marginRight', '0')
+      setStyleChild(centerRow, 'margin', 'marginBottom', '0')
+    }
+    const nn = textFromSpec({ text: textOf(slot.name), color: ts(slot.name).color, fontSize: ts(slot.name).fontSize, fontWeight: ts(slot.name).fontWeight, align: 'center' })
+    ensureStyleGroup(nn, 'flex')
+    setStyleChild(nn, 'flex', 'flexShrink', '0')
+    centerRow.slots[0].components.push(nn)
+    slotCol.slots[0].components.push(centerRow)
+    nameRow.slots[0].components.push(slotCol)
+  }
+  plotCol.slots[0].components.push(nameRow)
+  chartRow.slots[0].components.push(plotCol)
+  return chartRow
+}
+export function chartBarCanvasCode(cluster) {
+  const ox = cluster.x; const oy = cluster.y
+  const n = (v) => Math.round(Number(v) * 100) / 100
+  const out = []
+  out.push('var self = this;')
+  // event.canvas 是画布包装对象（非 ctx）：export-proven 范式先 getContext('2d') 拿代理 ctx
+  out.push('var canvas = event.canvas;')
+  out.push("var cv = canvas.getContext('2d');")
+  out.push('canvas.width = event.width;')
+  out.push('canvas.height = event.height;')
+  out.push('cv.clearRect(0,0,event.width,event.height);')
+  out.push('var rr=function(x,y,w,h,tl,tr,br,bl){cv.beginPath();cv.moveTo(x+tl,y);'
+    + 'cv.lineTo(x+w-tr,y);cv.arc(x+w-tr,y+tr,tr,Math.PI*1.5,Math.PI*2);'
+    + 'cv.lineTo(x+w,y+h-br);cv.arc(x+w-br,y+h-br,br,0,Math.PI*0.5);'
+    + 'cv.lineTo(x+bl,y+h);cv.arc(x+bl,y+h-bl,bl,Math.PI*0.5,Math.PI);'
+    + 'cv.lineTo(x,y+tl);cv.arc(x+tl,y+tl,tl,Math.PI,Math.PI*1.5);cv.closePath();};')
+  // 出码顺序 = 绘制层序（底 → 顶）：绘图区底板 → 网格线/轴线 → 数据标记 → 文字标签
+  const layers = chartPaintLayers(cluster.members, cluster)
+  for (const m of [...layers.backdrop, ...layers.axis, ...layers.marks]) {
+    const r = rect(m)
+    const x = n((r.x || 0) - ox); const y = n((r.y || 0) - oy)
+    const w = n(r.width || 0); const h = n(r.height || 0)
+    const fill = m.style?.fill
+    const border = m.style?.border
+    const opacity = m.style?.opacity ?? 1
+    if (fill && (fill.color || fill.gradient)) {
+      if (fill.gradient && (fill.gradient.stops || []).length) {
+        const stops = fill.gradient.stops
+        out.push(`var g=cv.createLinearGradient(${x},${y},${x},${y + h});`)
+        for (const stop of stops) {
+          out.push(`g.addColorStop(${n(stop.position || 0)},'${chartPaintColor(stop.color, opacity)}');`)
+        }
+        out.push('cv.fillStyle=g;')
+      } else {
+        out.push(`cv.fillStyle='${chartPaintColor(fill.color, opacity)}';`)
+      }
+      const rad = m.style?.radius?.borderRadius
+      const arr = Array.isArray(rad) ? rad.map((v) => n(v) || 0) : [n(rad) || 0, n(rad) || 0, n(rad) || 0, n(rad) || 0]
+      out.push(`rr(${x},${y},${w},${h},${arr[0]},${arr[1]},${arr[2]},${arr[3]});cv.fill();`)
+    } else if (border && border.isBorder) {
+      out.push(`cv.strokeStyle='${chartPaintColor(border.color, opacity)}';`)
+      out.push(`cv.lineWidth=${Math.max(1, n(border.width || r.height || 1))};`)
+      out.push(`cv.beginPath();cv.moveTo(${x},${n(y + h / 2)});cv.lineTo(${n(x + w)},${n(y + h / 2)});cv.stroke();`)
+    }
+  }
+  for (const t of cluster.texts) {
+    const r = rect(t); const st = ts(t)
+    const align = String(st.align || 'left')
+    const cx = align === 'center' ? n((r.x || 0) - ox + (r.width || 0) / 2)
+      : align === 'right' ? n((r.x || 0) - ox + (r.width || 0)) : n((r.x || 0) - ox)
+    out.push(`cv.fillStyle='${hexToRgba(st.color)}';`)
+    out.push(`cv.font='${Number(st.fontWeight) || 400} ${Number(st.fontSize) || 12}px "PingFang SC","Helvetica Neue",sans-serif';`)
+    out.push(`cv.textAlign='${align === 'center' || align === 'right' ? align : 'left'}';`)
+    out.push("cv.textBaseline='top';")
+    out.push(`cv.fillText(${JSON.stringify(textOf(t))},${cx},${n((r.y || 0) - oy)});`)
+  }
+  return out.join('')
+}
+
+// 评分仪表盘 Canvas 出码（recipe_snippets/canvas-gauge-score.json 同族：半环灰轨 + 高亮弧 + 中心分数/标签）
+export const SCORE_GAUGE_CANVAS_CODE = "var self = this;\nvar canvas = event.canvas;\nvar ctx = canvas.getContext('2d');\nctx.imageSmoothingEnabled = true;\nctx.imageSmoothingQuality = 'high';\nvar cx = 60;\nvar cy = 60;\nvar r = 56.5;\nfunction toRad(a) { return a * Math.PI / 180; }\nctx.lineWidth = 6;\nctx.lineCap = 'butt';\nctx.strokeStyle = '#F5F5F5';\nctx.beginPath();\nctx.arc(cx, cy, r, toRad(317), toRad(517), false);\nctx.stroke();\nvar score = Number(self.state.score);\nif (isNaN(score)) { score = 0; }\nscore = Math.min(Math.max(score, 0), 100);\nvar fill = score * (160 / 70);\nif (fill > 270) { fill = 270; }\nctx.strokeStyle = '#FCC800';\nctx.beginPath();\nctx.arc(cx, cy, r, toRad(157), toRad(157 + fill), false);\nctx.stroke();\nvar scoreText = String(self.state.score == null ? '' : self.state.score);\nctx.textBaseline = 'alphabetic';\nctx.fillStyle = '#221715';\nctx.font = '500 28px \"Helvetica Neue\", \"PingFang SC\", sans-serif';\nvar wNum = ctx.measureText(scoreText).width;\nctx.font = '500 14px \"PingFang SC\", sans-serif';\nvar wUnit = ctx.measureText('\u5206').width;\nvar startX = cx - (wNum + wUnit + 2) / 2;\nctx.textAlign = 'left';\nctx.font = '500 28px \"Helvetica Neue\", \"PingFang SC\", sans-serif';\nctx.fillText(scoreText, startX, 52);\nctx.font = '500 14px \"PingFang SC\", sans-serif';\nctx.fillText('\u5206', startX + wNum + 2, 52);\nctx.font = '400 12px \"PingFang SC\", sans-serif';\nctx.textAlign = 'center';\nctx.fillStyle = '#575757';\nctx.fillText(String(self.state.scoreLabel || ''), cx, 73);"