cardbuddy 0.6.0

package/dist/vendored/runtime/StyleParser.js

@@ -0,0 +1,179 @@
+/**
+ * 移植自官方 inner_card chunk 4 的模块 182（StyleParser）。
+ *
+ * 输入是「样式分组对象」（rect / flex / background / padding / margin /
+ * borderRadius / border / shadow / transform / other / font / image），
+ * 输出是可以直接绑到 `:style` 上的对象。
+ *
+ * 用法与官方一致：`new StyleParser(this, this.styleProps).parse()`
+ * （第一个参数是组件实例，内部取 `vm.adapter`）。
+ */
+export default class StyleParser {
+  constructor(vm, styleProps) {
+    this.vm = vm
+    this.styleProps = styleProps || {}
+  }
+
+  get adapter() {
+    // 兼容直接传 adapter 的用法
+    return this.vm && this.vm.adapter ? this.vm.adapter : this.vm
+  }
+
+  /** 解析顺序与官方严格一致，后面的分组会覆盖前面的同名属性 */
+  parse() {
+    const s = this.styleProps
+    const out = {}
+    this.parseRect(s.rect || {}, out)
+    this.parseFlex(s.flex || {}, out)
+    this.parseBackground(s.background || {}, out)
+    this.parsePadding(s.padding || {}, out)
+    this.parseMargin(s.margin || {}, out)
+    this.parseBorderRadius(s.borderRadius || {}, out)
+    this.parseBorder(s.border || {}, out)
+    this.parseShadow(s.shadow || {}, out)
+    this.parseTransform(s.transform || {}, out)
+    this.parseOther(s.other || {}, out)
+    out.boxSizing = 'border-box'
+    return out
+  }
+
+  /** 字体不在 parse() 里，由 Text / MultiText 等组件单独调用 */
+  parseFont(t = {}, e = {}) {
+    if (t.color) e.color = this.adapter.doColor(t.color)
+    if (t.fontSize) e.fontSize = this.adapter.doSize(t.fontSize, 'font')
+    if (t.lineHeight) e.lineHeight = this.adapter.doSize(t.lineHeight)
+    if (t.textAlign) e.textAlign = t.textAlign
+    if (t.fontWeight) e.fontWeight = t.fontWeight
+    if (t.fontStyle) e.fontStyle = t.fontStyle
+    if (t.textDecoration) e.textDecoration = t.textDecoration
+    if (t.isMaxLine == '1') {
+      e.lineClamp = t.maxLine || '1'
+      e['-webkit-line-clamp'] = t.maxLine || '1'
+    }
+    return e
+  }
+
+  /** 图片裁剪模式，只有 Image 组件用 */
+  parseImage(t = {}, e = {}) {
+    if (t.cropMode == '01') {
+      e.backgroundSize = 'contain'
+      e.aspectRatio = '1/1'
+    } else {
+      e.backgroundSize = 'cover'
+      e.aspectRatio = '16/9'
+    }
+    return e
+  }
+
+  parseRect(t, e) {
+    e.width = this.adapter.doSize(t.width)
+    e.height = this.adapter.doSize(t.height)
+    e.maxWidth = this.adapter.doSize(t.maxWidth)
+    e.maxHeight = this.adapter.doSize(t.maxHeight)
+    e.minWidth = this.adapter.doSize(t.minWidth)
+    e.minHeight = this.adapter.doSize(t.minHeight)
+  }
+
+  parseFlex(t, e) {
+    if (t.flexDirection) e.flexDirection = t.flexDirection
+    if (t.justifyContent) e.justifyContent = t.justifyContent
+    if (t.alignItems) e.alignItems = t.alignItems
+    if (t.flexWrap) e.flexWrap = t.flexWrap
+    if (t.flexShrink) e.flexShrink = t.flexShrink
+    if (t.gap) e.gap = this.adapter.doSize(t.gap)
+  }
+
+  parseBackground(t, e) {
+    if (t.backgroundType == '01' && t.backgroundColor) {
+      e.backgroundColor = this.adapter.doColor(t.backgroundColor)
+    } else if (t.backgroundType == '02' && t.backgroundImage) {
+      e.backgroundImage = `url("${this.adapter.doReplaceUrl(
+        this.adapter.doI18n(t.backgroundImage)
+      )}")`
+      if (t.backgroundPosition) {
+        const p = t.backgroundPosition.split(/[ ]+/)
+        e.backgroundPosition = `${this.adapter.doSize(p[0] || '')} ${this.adapter.doSize(
+          p[1] || ''
+        )}`
+      } else {
+        e.backgroundPosition = '50% 50%'
+      }
+      if (t.backgroundSize) {
+        const sz = t.backgroundSize.split(/[ ]+/)
+        e.backgroundSize =
+          sz.length >= 2
+            ? `${this.adapter.doSize(sz[0] || '')} ${this.adapter.doSize(sz[1] || '')}`
+            : t.backgroundSize
+      } else {
+        e.backgroundSize = 'cover'
+      }
+      e.backgroundRepeat = t.backgroundRepeat || 'no-repeat'
+    } else if (t.backgroundType == '03' && t.backgroundGradient) {
+      e.backgroundImage = t.backgroundGradient
+    }
+  }
+
+  parsePadding(t, e) {
+    if (t.paddingType == '0') {
+      e.padding = this.adapter.doSize(t.padding)
+    } else if (t.paddingType == '1') {
+      e.paddingLeft = this.adapter.doSize(t.paddingLeft)
+      e.paddingTop = this.adapter.doSize(t.paddingTop)
+      e.paddingRight = this.adapter.doSize(t.paddingRight)
+      e.paddingBottom = this.adapter.doSize(t.paddingBottom)
+    }
+  }
+
+  parseMargin(t, e) {
+    if (t.marginType == '0') {
+      e.margin = this.adapter.doSize(t.margin)
+    } else if (t.marginType == '1') {
+      e.marginLeft = this.adapter.doSize(t.marginLeft)
+      e.marginTop = this.adapter.doSize(t.marginTop)
+      e.marginRight = this.adapter.doSize(t.marginRight)
+      e.marginBottom = this.adapter.doSize(t.marginBottom)
+    }
+  }
+
+  parseBorderRadius(t, e) {
+    if (t.borderRadiusType == '0') {
+      e.borderRadius = this.adapter.doSize(t.borderRadius)
+    } else if (t.borderRadiusType == '1') {
+      e.borderTopLeftRadius = this.adapter.doSize(t.borderTopLeftRadius)
+      e.borderTopRightRadius = this.adapter.doSize(t.borderTopRightRadius)
+      e.borderBottomRightRadius = this.adapter.doSize(t.borderBottomRightRadius)
+      e.borderBottomLeftRadius = this.adapter.doSize(t.borderBottomLeftRadius)
+    }
+  }
+
+  parseBorder(t, e) {
+    if (t.isBorder == '1') {
+      e.borderWidth = this.adapter.doSize(t.borderWidth || '1')
+      e.borderStyle = t.borderStyle || 'solid'
+      e.borderColor = this.adapter.doColor(t.borderColor || '#e7e7ee')
+    }
+  }
+
+  parseShadow(t, e) {
+    if (t.isShadow == '1') {
+      const parts = []
+      parts.push(this.adapter.doSize(t.shadowX || '0'))
+      parts.push(this.adapter.doSize(t.shadowY || '0'))
+      if (t.shadowBlur) parts.push(this.adapter.doSize(t.shadowBlur))
+      if (t.shadowSpread) parts.push(this.adapter.doSize(t.shadowSpread))
+      parts.push(this.adapter.doColor(t.shadowColor || '#e7e7ee'))
+      e.boxShadow = parts.join(' ')
+    }
+  }
+
+  parseTransform(t, e) {
+    const parts = []
+    if (t.rotate) parts.push(`rotate(${t.rotate}deg)`)
+    if (parts.length) e.transform = parts.join(' ')
+  }
+
+  parseOther(t, e) {
+    e.overflow = t.overflow ? t.overflow : 'hidden'
+    if (t.opacity) e.opacity = `${Number(t.opacity) / 100}`
+  }
+}

package/dist/vendored/runtime/adapter.js

@@ -0,0 +1,166 @@
+/**
+ * 移植自官方 inner_card chunk 14 的模块 2191（adapter）。
+ *
+ * adapter 通过 Vue 的 provide/inject 下发给每个组件，组件里所有尺寸/颜色/URL
+ * 的换算都走它。这里逐行对齐原实现，只在 doReplaceUrl 上做了本地化：
+ * 官方是 `app.vm.$replaceUrl(t)`，实现在宿主 framework 里，是一张前缀别名表 +
+ * 全局正则替换。别名表取自 /ubomp-h5-sub/js/main.js。
+ */
+
+// 前后分离后，站内资源统一经「本地开发服务（8787）」的资源代理回源 FinMall。
+// 这里引入 resolveApiBase，把本地化出的站内路径改写为指向 8787 的绝对 URL，
+// 修复部署态（静态编辑器 + 本机 8787，无 Vite）资源缺失的问题。
+import { resolveApiBase } from '@/api.js'
+
+/** 宿主 sub/main.js 里的 url.paths 别名表 */
+export const URL_PREFIX_ALIAS = {
+  '@staticfile/': '/fastdfs/',
+  '@filestore/': '/minio/',
+  '@minio/': '/minio/',
+  '@floorstatic/': '/floorstatic/',
+  '@flamestore/': '/',
+}
+
+/**
+ * 卡片 data.json 里有不少写死的完整 CDN 地址，直接请求会跨域也吃不到本地缓存。
+ * 统一改写成同源路径，交给 vite 的资源代理中间件。
+ *
+ * 域名不硬编码：从 .env.finmall 的 FINMALL_BASE_URL 读取（vite 以
+ * envPrefix FINMALL_ 暴露到 import.meta.env），未配置时回退 UAT 域名。
+ */
+const BASE_URL = import.meta.env.FINMALL_BASE_URL || 'https://uat-pkg.finmall.com'
+const BASE_HOST = BASE_URL.replace(/^https?:/, '') // '//uat-pkg.finmall.com'
+const ABSOLUTE_ASSET_HOSTS = [...new Set([
+  BASE_URL,
+  BASE_URL.replace(/^https:/, 'http:'),
+  BASE_HOST,
+])]
+
+export function toLocalAssetUrl(url) {
+  if (typeof url !== 'string' || !url) return url
+  for (const host of ABSOLUTE_ASSET_HOSTS) {
+    if (url.startsWith(host)) return url.slice(host.length) || '/'
+  }
+  return url
+}
+
+export default class Adapter {
+  constructor(options = {}) {
+    // availableWidth 非 0 时 doSize 会按 availableWidth/styleWidth 整体缩放。
+    // 官方 web 端固定给 0（即 1:1 使用设计稿 px），这里保留可注入以备后用。
+    this.options = {
+      availableWidth: 0,
+      applyUnit: 'px',
+      applyUnitRatio: 1,
+      fontRatio: 1,
+      styleWidth: 375,
+      // 独立渲染器可显式传入空串，使站内资源（如 /slices/*）保持同源相对路径，
+      // 不强制走开发服务 8787。undefined 时维持既有 resolveApiBase() 行为。
+      apiBase: undefined,
+      ...options,
+    }
+  }
+
+  getSystemInfo() {
+    const o = this.options
+    return {
+      screenWidth: typeof window !== 'undefined' ? window.innerWidth : o.styleWidth,
+      availableWidth: o.availableWidth,
+      applyUnit: o.applyUnit,
+      applyUnitRatio: o.applyUnitRatio,
+      fontRatio: o.fontRatio,
+    }
+  }
+
+  getDesignInfo() {
+    return { styleWidth: this.options.styleWidth }
+  }
+
+  /**
+   * 资源地址归一。规则：
+   * - `http(s)://` 开头的绝对地址：视为真实远程资源，**原样保留**，不做任何别名替换 / host 截取。
+   * - `@` 开头的站内别名（如 `@filestore/x`）：走 URL_PREFIX_ALIAS 替换 + 绝对 host 截取，
+   *   转成同源站内路径，交给本地资源代理回源。
+   *
+   * 历史实现里 toLocalAssetUrl 对所有入参（含 http 图链）都截取 FinMall 等 host，导致
+   * 背景图 / 图片一旦命中这些 host 就被剥掉域名、改走本地代理，与「远程地址原样直连」的预期不符。
+   */
+  doReplaceUrl(url) {
+    if (typeof url !== 'string') return url
+    // http(s) 绝对地址：真实远程资源，原样返回，不做任何处理
+    if (/^https?:\/\//i.test(url)) return url
+    let out = url
+    try {
+      for (const key of Object.keys(URL_PREFIX_ALIAS)) {
+        out = out.replace(new RegExp(key, 'g'), URL_PREFIX_ALIAS[key])
+      }
+    } catch (e) {
+      /* 与官方一致：吞掉异常返回原值 */
+    }
+    const local = toLocalAssetUrl(out)
+    // 前后分离：站内资源改写为指向「本地开发服务（8787）」资源代理的绝对 URL，
+    // 这样部署态（静态编辑器，无 Vite）也能正常取图；DEV 下 apiBase 默认 8787，
+    // 与部署态同源，预览一致。无 apiBase（部署态且未配置开发服务）时回退相对路径，
+    // 由上层提示用户配置（与 resolveApiBase 的语义保持一致）。
+    const base =
+      this.options.apiBase !== undefined ? this.options.apiBase : resolveApiBase()
+    if (base && typeof local === 'string' && local.startsWith('/')) {
+      return base + local
+    }
+    return local
+  }
+
+  /**
+   * 裸数字按设计稿 px 处理。
+   * - 空值且不是 0 -> ""
+   * - "auto" 或含 "%" -> 原样返回
+   * - 其余剥离非数字字符后拼单位
+   */
+  doSize(value, kind) {
+    if (!value && value !== 0) return ''
+    if (value === 'auto' || String(value).indexOf('%') > -1) return value
+    const sys = this.getSystemInfo() || {}
+    const design = this.getDesignInfo() || {}
+    const num = String(value).replace(/[^0-9\-.]/g, '')
+    let ratio = 1
+    if (sys.availableWidth) {
+      if (kind === 'font') ratio = Number(sys.fontRatio || 1)
+      const scale = parseFloat(sys.availableWidth) / parseFloat(design.styleWidth)
+      return parseFloat(num) * scale * ratio + sys.applyUnit
+    }
+    return num + sys.applyUnit
+  }
+
+  /**
+   * `#AARRGGBB` 八位色值：首字节是「不透明度百分比」的十六进制，
+   * 例如 #64FF0000 -> alpha = 0x64/100 = 1。其余格式原样返回。
+   */
+  doColor(value = '') {
+    const v = String(value)
+    if (/^#[a-fA-F0-9]{8}$/.test(v)) {
+      const [a, r, g, b] = v.substring(1).match(/[a-fA-F0-9]{2}/g)
+      return `rgba(${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt(b, 16)}, ${
+        parseInt(a, 16) / 100
+      })`
+    }
+    return v
+  }
+
+  doRemoveUnit(value = '') {
+    return String(value).replace(/[^0-9.]/g, '')
+  }
+
+  doApplyUnit(value) {
+    return value + (this.getSystemInfo() || {}).applyUnit
+  }
+
+  /** 官方就是原样返回，没有实际的国际化 */
+  doI18n(value) {
+    return value
+  }
+
+  /** 官方返回空对象；预览里由 ynet mock 接管 */
+  async doRpc() {
+    return {}
+  }
+}

package/dist/vendored/runtime/alert-card.js

@@ -0,0 +1,125 @@
+/**
+ * 弹窗卡片（alertCard / closeAlertCard）运行时，对齐 FCard.alertCard 语义：
+ * alertCard({cardCode,data,gravity,width,height,offsetX,offsetY,clickOutsideCanHide},cb) 弹另一张卡，
+ * cb 在关闭时触发（res.data.event==='hidden'，携带 closeAlertCard 传入的 data）。
+ * 设计要点：①弹窗堆栈挂 alertStore.stack（对象 getter 走 __ob__.dep，Vue2 才能侦测 push/索引访问），
+ * 消费方务必用 alertStore.stack；②每张弹窗卡用「自身 data.json ∪ 传入 data」，AlertCardInstance
+ * 提供独立 cardRuntime，this.data/this.state/setData 指向自身作用域。
+ */
+import { reactive } from 'vue'
+import { buildPreview } from '@/runtime/toPreview.js'
+import { apiFetch } from '@/api.js'
+
+// 弹窗卡片堆栈（响应式），从栈顶（数组末尾）渲染 / 关闭
+export const alertStore = reactive({ stack: [] })
+let seq = 0
+
+/**
+ * 打开一张弹窗卡片。
+ * @param {object} params
+ * @param {function} [callback] 弹窗关闭回调，res = { success, data:{ event:'hidden', ...closeData } }
+ */
+export async function openAlertCard(params, callback) {
+  const p = params || {}
+  const cardCode = p.cardCode
+  // 实时从磁盘读取该卡片，保证弹窗卡片始终是最新落盘版本。
+  let card = null
+  try {
+    const res = await apiFetch(`/__card/${encodeURIComponent(cardCode)}`)
+    if (res.ok) {
+      const c = await res.json()
+      if (c && c.schema) card = c
+    }
+  } catch (_) {
+    /* 读取失败按未找到处理 */
+  }
+  if (!card || !card.schema) {
+    if (typeof callback === 'function') {
+      callback({ success: false, error: 'card_not_found', errorMessage: '未找到卡片 ' + cardCode })
+    }
+    return
+  }
+  // 对齐官方行为：重复打开 alertCard 时先关闭已有弹窗（避免多个叠加），
+  // 触发已有弹窗的回调（event: 'hidden'），但不传额外 closeData。
+  const stack = alertStore.stack
+  if (stack.length) {
+    const old = stack.splice(0, stack.length)
+    old.forEach((entry) => {
+      if (typeof entry.callback === 'function') {
+        try { entry.callback({ success: true, data: { event: 'hidden' } }) } catch (_) { /* ignore */ }
+      }
+    })
+  }
+  // 数据绑定：卡片自带 data.json 作基底，再用传入 data 覆盖
+  const ownData = card.data && typeof card.data === 'object' ? card.data : {}
+  const scope = reactive(Object.assign({}, ownData, p.data || {}))
+  const preview = buildPreview(card.schema)
+  const id = 'alert-' + ++seq
+  stack.push({
+    id,
+    cardCode,
+    preview,
+    scope,
+    gravity: p.gravity || 'bottom',
+    width: typeof p.width === 'number' ? p.width : undefined,
+    height: typeof p.height === 'number' ? p.height : undefined,
+    offsetX: typeof p.offsetX === 'number' ? p.offsetX : 0,
+    offsetY: typeof p.offsetY === 'number' ? p.offsetY : 0,
+    clickOutsideCanHide: p.clickOutsideCanHide !== false,
+    callback,
+  })
+}
+
+/**
+ * 关闭弹窗卡片，并把回传数据交给对应 alertCard 的回调。
+ * @param {object} params { cardCode?, index?, data? }
+ * @param {function} [callback] closeAlertCard 自身的回调
+ */
+export function closeAlertCard(params, callback) {
+  const p = params || {}
+  const stack = alertStore.stack
+  let target = null
+  if (typeof p.index === 'number') {
+    const n = Math.abs(p.index)
+    if (stack.length >= n) target = stack[stack.length - n]
+  } else if (p.cardCode) {
+    // 从栈顶往下找到第一个匹配 cardCode 的弹窗
+    for (let i = stack.length - 1; i >= 0; i--) {
+      if (stack[i].cardCode === p.cardCode) {
+        target = stack[i]
+        break
+      }
+    }
+  } else {
+    target = stack[stack.length - 1] // 默认关闭栈顶
+  }
+
+  if (!target) {
+    if (typeof callback === 'function') {
+      callback({ success: false, error: 'no_alert', errorMessage: '没有可关闭的弹窗' })
+    }
+    return
+  }
+
+  const idx = stack.indexOf(target)
+  stack.splice(idx, 1)
+
+  // 回传参数：closeAlertCard 的 data 作为 alertCard 回调的参数。
+  // 仅当显式传入 data 时，才附加 event:'hidden' 关闭标记；未传 data 时不返回多余的 { event:'hidden' }
+  if (typeof target.callback === 'function') {
+    if (p.data) {
+      target.callback({ success: true, data: Object.assign({ event: 'hidden' }, p.data) })
+    } else {
+      target.callback({ success: true, data: {} })
+    }
+  }
+  if (typeof callback === 'function') {
+    callback({ success: true })
+  }
+}
+
+/** 关闭全部弹窗（切换主卡片时清理，避免残留弹窗引用旧上下文）。静默清空，不触发回调。 */
+export function clearAllAlerts() {
+  const stack = alertStore.stack
+  if (stack.length) stack.splice(0, stack.length)
+}

package/dist/vendored/runtime/app-toast.js

@@ -0,0 +1,33 @@
+/**
+ * App 级弱提示（toast）单例。
+ *
+ * 与「设备框内的 showToast（deviceUI.toast，由卡片 ynet.callJSAPI 触发）」区分：
+ * 这里是**顶栏异步操作（远端保存 / 同步）**完成后的反馈，应浮在 App 外壳层级、
+ * 不被手机预览框裁切。组件 `AppToast.vue` 读取本响应式对象并自动消失。
+ */
+import { reactive } from 'vue'
+
+export const appToast = reactive({
+  visible: false,
+  message: '',
+  type: 'ok', // 'ok' | 'err'
+})
+
+let appToastTimer = null
+
+/**
+ * 弹出一个 App 级消息提示，duration 毫秒后自动消失（重复调用会重置计时）。
+ * @param {string} message 提示文案
+ * @param {'ok'|'err'} [type='ok'] 类型：成功 / 失败（决定图标与配色）
+ * @param {number} [duration=2400] 自动消失时长（ms）
+ */
+export function showAppToast(message, type = 'ok', duration = 2400) {
+  appToast.message = message
+  appToast.type = type
+  appToast.visible = true
+  if (appToastTimer) clearTimeout(appToastTimer)
+  appToastTimer = setTimeout(() => {
+    appToast.visible = false
+    appToastTimer = null
+  }, duration)
+}

package/dist/vendored/runtime/assets.js

@@ -0,0 +1,16 @@
+/**
+ * 官方静态资产在预览工程里的落点。
+ *
+ * 通过 import 引入，交由 Vite 统一处理（hash 命名 + 自动套 base），
+ * 这样无论部署在根路径('/')还是子路径(如 '/cardBuddy/')，
+ * import.meta.env.BASE_URL 都会让 URL 解析正确，无需手写绝对路径。
+ *
+ * 对应关系（构建后）：
+ *   svg-symbols.svg  -> <base>assets/svg-symbols.<hash>.svg  （Icon 的 sprite）
+ *   default-image.png -> <base>assets/default-image.<hash>.png（Image 的兜底图）
+ */
+import svgSymbolsUrl from '../assets/svg-symbols.svg'
+import defaultImageUrl from '../assets/default-image.png'
+
+export const SVG_SYMBOLS_URL = svgSymbolsUrl
+export const DEFAULT_IMAGE_URL = defaultImageUrl

package/dist/vendored/runtime/canvas-context.js

@@ -0,0 +1,141 @@
+/**
+ * 移植自官方 inner_card chunk 4 的模块 1987 / 1988 / 1989。
+ *
+ * Canvas 组件不会把原生 <canvas> 直接交给业务代码，而是包一层：
+ *   - `canvas.width/height` 换算成「设计稿 px」（除以 scale）
+ *   - `canvas.getContext("2d")` 返回一个代理 ctx，所有坐标 / 尺寸乘以 scale，
+ *     字号再额外乘 fontRatio，fillText 的文本过一遍 doI18n
+ *
+ * 卡片里的 onMeasured 自定义脚本拿到的就是这个包装对象，因此必须复刻，
+ * 否则 `event.canvas.width` 之类的读数会差一个 devicePixelRatio。
+ *
+ * 我们的 adapter 默认 availableWidth=0，算出来 scale=1、fontRatio=1，
+ * 此时代理等价于透传；保留完整实现是为了将来注入真实机型宽度时仍然对齐。
+ */
+
+/** 直通属性（get/set 原样转发） */
+function passthrough(key) {
+  return (ctx) => ({
+    get: () => ctx[key],
+    set: (v) => {
+      ctx[key] = v
+    },
+  })
+}
+
+/** 直通方法（bind 后返回） */
+function passthroughFn(key) {
+  return (ctx) => ({
+    get: () => ctx[key].bind(ctx),
+  })
+}
+
+/** 按下标缩放入参的方法 */
+function scaledFn(key, indexes = []) {
+  return (ctx, scale) => ({
+    get:
+      () =>
+      (...args) => {
+        indexes.forEach((i) => {
+          args[i] = Number(args[i]) * scale
+        })
+        return ctx[key](...args)
+      },
+  })
+}
+
+const DESCRIPTORS = {
+  textAlign: passthrough('textAlign'),
+  textBaseline: passthrough('textBaseline'),
+  fillStyle: passthrough('fillStyle'),
+  strokeStyle: passthrough('strokeStyle'),
+  lineCap: passthrough('lineCap'),
+  imageSmoothingEnabled: passthrough('imageSmoothingEnabled'),
+  imageSmoothingQuality: passthrough('imageSmoothingQuality'),
+
+  lineWidth: (ctx, scale) => ({
+    get: () => ctx.lineWidth,
+    set: (v) => {
+      ctx.lineWidth = v * scale
+    },
+  }),
+
+  font: (ctx, scale, fontRatio) => ({
+    get: () => ctx.font,
+    set: (v) => {
+      ctx.font = String(v).replace(
+        /([0-9.]+)px/,
+        (_, num) => Number(num) * scale * Number(fontRatio || 1) + 'px'
+      )
+    },
+  }),
+
+  fillText: (ctx, scale, fontRatio, vm) => ({
+    get:
+      () =>
+      (...args) => {
+        args[0] = args[0] ? vm.adapter.doI18n(args[0]) : args[0]
+        ;[1, 2].forEach((i) => {
+          args[i] = Number(args[i]) * scale
+        })
+        return ctx.fillText(...args)
+      },
+  }),
+
+  fillRect: scaledFn('fillRect', [0, 1, 2, 3]),
+  moveTo: scaledFn('moveTo', [0, 1]),
+  lineTo: scaledFn('lineTo', [0, 1]),
+  arc: scaledFn('arc', [0, 1, 2]),
+  clearRect: scaledFn('clearRect', [0, 1, 2, 3]),
+  createLinearGradient: scaledFn('createLinearGradient', [0, 1, 2, 3]),
+  createRadialGradient: scaledFn('createRadialGradient', [0, 1, 2, 3, 4, 5]),
+
+  beginPath: passthroughFn('beginPath'),
+  closePath: passthroughFn('closePath'),
+  fill: passthroughFn('fill'),
+  stroke: passthroughFn('stroke'),
+
+  /** 量文本时先把字号还原成设计稿尺寸，量完再改回去 */
+  measureText: (ctx, scale) => ({
+    get:
+      () =>
+      (...args) => {
+        const font = ctx.font
+        ctx.font = font.replace(/([0-9.]+)px/, (_, num) => Number(num) / scale + 'px')
+        const metrics = ctx.measureText(...args)
+        ctx.font = font
+        return metrics
+      },
+  }),
+
+  setLineDash: (ctx) => ({
+    get: () => ctx.setLineDash.bind(ctx),
+    set: (v) => ctx.setLineDash(v),
+  }),
+}
+
+/** 官方 module 1988：给原生 ctx 造一个「按 scale 换算」的代理类 */
+export function makeContextProxyClass(nativeCtx, vm) {
+  function Proxied(scale, fontRatio) {
+    Object.keys(DESCRIPTORS).forEach((key) => {
+      Object.defineProperty(this, key, DESCRIPTORS[key](nativeCtx, scale, fontRatio, vm))
+    })
+  }
+  // 原型指向原生 ctx，未代理的 API 直接落到原生实现上
+  Proxied.prototype = nativeCtx
+  return Proxied
+}
+
+/** 官方 module 1987：给 <canvas> 元素造一个「设计稿坐标系」的包装类 */
+export function makeCanvasWrapperClass(canvasEl, vm) {
+  return function CanvasWrapper(rect, scale, fontRatio) {
+    this.width = rect.width / scale
+    this.height = rect.height / scale
+    this.style = canvasEl.style
+    this.getContext = function (...args) {
+      const nativeCtx = canvasEl.getContext(...args)
+      const Proxied = makeContextProxyClass(nativeCtx, vm)
+      return new Proxied(scale, fontRatio)
+    }
+  }
+}