cardbuddy 0.6.0

package/dist/vendored/components/AbsoluteLayout.vue

@@ -0,0 +1,42 @@
+<!--
+  官方 module 2117 / 549。
+  子元素由 CSS `.ce_absolutelayout > *{position:absolute}` 脱标，
+  容器自身按 align 用 flex 对齐（positionMap）。
+-->
+<template>
+  <div class="ce_absolutelayout" :style="styleObj">
+    <slot />
+  </div>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+const POSITION_MAP = {
+  TopLeft: { justifyContent: 'flex-start', alignItems: 'flex-start' },
+  TopCenter: { justifyContent: 'flex-start', alignItems: 'center' },
+  TopRight: { justifyContent: 'flex-start', alignItems: 'flex-end' },
+  CenterLeft: { justifyContent: 'center', alignItems: 'flex-start' },
+  Center: { justifyContent: 'center', alignItems: 'center' },
+  CenterRight: { justifyContent: 'center', alignItems: 'flex-end' },
+  BottomLeft: { justifyContent: 'flex-end', alignItems: 'flex-start' },
+  BottomCenter: { justifyContent: 'flex-end', alignItems: 'center' },
+  BottomRight: { justifyContent: 'flex-end', alignItems: 'flex-end' },
+}
+
+export default {
+  name: 'CeAbsoluteLayout',
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    align: { type: String, default: '' },
+  },
+  computed: {
+    styleObj() {
+      const out = new StyleParser(this, this.styleProps).parse()
+      return Object.assign(out, POSITION_MAP[this.align] || {})
+    },
+  },
+}
+</script>

package/dist/vendored/components/AlertCardInstance.vue

@@ -0,0 +1,58 @@
+<!--
+  单张弹窗卡片实例：为 alertCard 弹出的卡片提供「独立」的 cardRuntime，
+  使其脚本里的 this.data / this.state / setData / setRootData 都指向自身作用域，
+  而不是父卡片（主卡片）的作用域。渲染复用 RenderTree 同一套预览管线。
+
+  同时把弹窗卡片内部的「绑定错误 / 接口调用」转发到主运行时（mainRt），
+  以便右侧调试面板能像主卡片一样看到弹窗卡片的运行情况。
+-->
+<script>
+import { h } from 'vue'
+import Adapter from '@/runtime/adapter.js'
+import { createCardRuntime } from '@/runtime/card-runtime.js'
+import RenderTree from './RenderTree.vue'
+
+export default {
+  name: 'AlertCardInstance',
+  components: { RenderTree },
+  props: {
+    entry: { type: Object, required: true },
+    mainRt: { type: Object, default: null },
+  },
+  data() {
+    const adapter = new Adapter()
+    const cardRuntime = createCardRuntime(this.entry.scope, adapter)
+
+    // 转发弹窗卡片的绑定错误 / 接口调用到主运行时，方便调试面板查看
+    const mainRt = this.mainRt
+    if (mainRt && mainRt.pushError && mainRt.pushApiCall) {
+      const origErr = cardRuntime.pushError.bind(cardRuntime)
+      cardRuntime.pushError = (k, m) => {
+        origErr(k, m)
+        mainRt.pushError(k, m)
+      }
+      const origApi = cardRuntime.pushApiCall.bind(cardRuntime)
+      cardRuntime.pushApiCall = (api, p) => {
+        origApi(api, p)
+        mainRt.pushApiCall(api, p)
+      }
+    }
+
+    return { adapter, cardRuntime }
+  },
+  provide() {
+    return {
+      adapter: this.adapter,
+      cardRuntime: this.cardRuntime,
+      customComponents: {},
+    }
+  },
+  render() {
+    return h(RenderTree, {
+      node: this.entry.preview.view,
+      scope: this.cardRuntime.rootScope,
+      key: this.entry.id,
+    })
+  },
+}
+</script>

package/dist/vendored/components/AlertCardLayer.vue

@@ -0,0 +1,59 @@
+<!--
+  弹窗卡片图层：固定全屏遮罩 + 按 gravity 定位的卡片面板，渲染 alertStack 栈顶的卡片。
+  点击遮罩（仅当该弹窗 clickOutsideCanHide）关闭栈顶弹窗。
+-->
+<template>
+  <div class="alert-layer" v-if="top">
+    <div
+      class="alert-mask"
+      :class="'alert-mask--' + top.gravity"
+      @click.self="onMaskClick(top)"
+    >
+      <div class="alert-panel" :style="panelStyle(top)">
+        <AlertCardInstance
+          :entry="top"
+          :main-rt="mainRt"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import AlertCardInstance from './AlertCardInstance.vue'
+import { alertStore, closeAlertCard } from '@/runtime/alert-card.js'
+
+export default {
+  name: 'AlertCardLayer',
+  components: { AlertCardInstance },
+  props: {
+    mainRt: { type: Object, default: null },
+  },
+  computed: {
+    top() {
+      // 必须先读 alertStore.stack（走对象 getter）才能收集到数组依赖，
+      // 直接对导出的数组做索引/length 访问不会触发响应式更新。
+      const stack = alertStore.stack
+      return stack.length ? stack[stack.length - 1] : null
+    },
+  },
+  methods: {
+    onMaskClick(entry) {
+      if (entry.clickOutsideCanHide) {
+        closeAlertCard({ cardCode: entry.cardCode })
+      }
+    },
+    panelStyle(entry) {
+      const s = {}
+      if (entry.width) s.width = entry.width + 'px'
+      if (entry.height) s.height = entry.height + 'px'
+      // offsetX / offsetY：在 gravity 定位基础上做平移微调
+      const transforms = []
+      if (entry.offsetX) transforms.push('translateX(' + entry.offsetX + 'px)')
+      if (entry.offsetY) transforms.push('translateY(' + entry.offsetY + 'px)')
+      if (transforms.length) s.transform = transforms.join(' ')
+      return s
+    },
+  },
+}
+</script>

package/dist/vendored/components/ApiPayloadTree.vue

@@ -0,0 +1,168 @@
+<!--
+  接口调用 tab 的「返回数据」结构化折叠树（只读，对齐 Chrome 控制台对象检视器）。
+  - 复合类型（对象 / 数组）可点击折叠 / 展开，默认全部折叠，折叠时显示预览摘要。
+  - 基础类型按类型着色（复用 .jt__val--* 配色），字符串不带引号（DevTools 风格）。
+  - 折叠状态在整棵树内共享（openState），按节点路径独立记录。
+-->
+<template>
+  <div class="apt" :class="{ 'apt--root': isRoot }">
+    <!-- 根级别：非复合值（如 payload 就是字符串）直接作为单个叶子展示 -->
+    <div v-if="!isComplex(value)" class="apt__leaf apt__leaf--root">
+      <span class="apt__caret apt__caret--leaf">▶</span>
+      <span v-if="rootKeyLabel !== null" class="jt__key">{{ rootKeyLabel }}</span>
+      <span v-if="rootKeyLabel !== null" class="jt__colon">:</span>
+      <span class="jt__val" :class="'jt__val--' + typeOf(value)">{{ format(value) }}</span>
+    </div>
+
+    <template v-else>
+      <div class="apt__list">
+        <div v-for="(entry, i) in entries" :key="i" class="apt__node">
+          <!-- 复合类型且未超最大深度：可折叠分支 -->
+          <div v-if="canExpand(entry)" class="apt__branch" @click="toggle(entry)">
+            <span class="apt__caret" :class="{ 'apt__caret--open': isOpen(entry) }">▶</span>
+            <span v-if="entry.keyLabel !== null" class="jt__key">{{ entry.keyLabel }}</span>
+            <span class="jt__bracket">{{ entry.isArray ? '[' : '{' }}</span>
+            <template v-if="!isOpen(entry)">
+              <span class="jt__preview">{{ preview(entry.value) }}</span>
+              <span class="jt__bracket">{{ entry.isArray ? ']' : '}' }}</span>
+            </template>
+          </div>
+          <!-- 复合类型但已达最大深度：不再可展开，仅作摘要叶子 -->
+          <div v-else-if="isComplex(entry.value)" class="apt__leaf">
+            <span class="apt__caret apt__caret--leaf">▶</span>
+            <span v-if="entry.keyLabel !== null" class="jt__key">{{ entry.keyLabel }}</span>
+            <span v-if="entry.keyLabel !== null" class="jt__colon">:</span>
+            <span class="jt__val" :class="'jt__val--' + (entry.isArray ? 'array' : 'object')">{{ entry.count }} {{ entry.isArray ? '项' : '键' }}（已折叠）</span>
+          </div>
+          <!-- 基础类型：叶子 -->
+          <div v-else class="apt__leaf">
+            <span class="apt__caret apt__caret--leaf">▶</span>
+            <span v-if="entry.keyLabel !== null" class="jt__key">{{ entry.keyLabel }}</span>
+            <span v-if="entry.keyLabel !== null" class="jt__colon">:</span>
+            <span class="jt__val" :class="'jt__val--' + entry.type">{{ format(entry.value) }}</span>
+          </div>
+
+          <!-- 展开后的子层级 -->
+          <div v-if="isComplex(entry.value) && isOpen(entry)" class="apt__children">
+            <ApiPayloadTree
+              :value="entry.value"
+              :depth="depth + 1"
+              :path="entry.path"
+              :open-state="state"
+              :max-depth="maxDepth"
+            />
+            <div class="apt__close">
+              <span class="jt__bracket">{{ entry.isArray ? ']' : '}' }}</span>
+              <span class="jt__count">{{ entry.count }} {{ entry.isArray ? '项' : '键' }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { reactive } from 'vue'
+
+export default {
+  name: 'ApiPayloadTree',
+  props: {
+    // 当前节点的值（对象 / 数组 / 基础类型均可）
+    value: { default: () => ({}) },
+    // 当前层级深度（根=0），用于根判断
+    depth: { type: Number, default: 0 },
+    // 从根到当前节点的路径（key 数组），用作折叠状态的唯一 key
+    path: { type: Array, default: () => [] },
+    // 跨整棵树共享的折叠状态对象：{ '<path>': bool }
+    openState: { type: Object, default: null },
+    // 仅当根级别 value 为基元类型且需要展示 key 时传入（如顶层字符串）
+    rootKeyLabel: { type: [String, Number, null], default: null },
+    // 最大可展开深度（保护）：达到该深度的复合节点不再可展开，
+    // 避免日志中循环引用 / 超深结构在展开时无限递归。默认 100（接口调用场景基本无感）。
+    maxDepth: { type: Number, default: 100 },
+  },
+  data() {
+    return {
+      // 若未传入共享状态（理论只发生在根），自行创建，保证递归子组件拿到同一引用
+      localOpenState: this.openState || reactive({}),
+    }
+  },
+  computed: {
+    isRoot() {
+      return this.depth === 0
+    },
+    state() {
+      return this.openState || this.localOpenState
+    },
+    entries() {
+      const d = this.value
+      if (Array.isArray(d)) {
+        return d.map((v, i) => this.makeEntry(String(i), v, true, i))
+      }
+      if (d && typeof d === 'object') {
+        return Object.keys(d).map((k) => this.makeEntry(k, d[k], false, k))
+      }
+      return []
+    },
+  },
+  methods: {
+    typeOf(v) {
+      if (v === null) return 'null'
+      if (Array.isArray(v)) return 'array'
+      return typeof v
+    },
+    isComplex(v) {
+      return v !== null && typeof v === 'object'
+    },
+    makeEntry(keyLabel, value, isArrayBranch, rawKey) {
+      const isArr = Array.isArray(value)
+      const count = isArr
+        ? value.length
+        : value && typeof value === 'object'
+          ? Object.keys(value).length
+          : 0
+      return {
+        keyLabel,
+        value,
+        isArray: isArr,
+        count,
+        type: this.typeOf(value),
+        path: [...this.path, rawKey],
+      }
+    },
+    pathKey(entry) {
+      return entry.path.join('/')
+    },
+    isOpen(entry) {
+      // 必须直接以 st[k] 读取：Vue 3 的 reactive get 陷阱对「不存在的 key」同样会 track，
+      // 而 hasOwnProperty 走 getOwnPropertyDescriptor（Vue 未代理）不会 track——
+      // 若先用 hasOwnProperty 短路返回，首次点击写入新 key 时无人订阅，视图不会重渲染（点了没反应）。
+      const v = this.state[this.pathKey(entry)]
+      // 默认全部折叠，由用户逐层点开
+      return v === undefined ? false : v
+    },
+    /** 当前节点是否可展开：复合类型且未超过最大深度（保护循环引用 / 超深结构） */
+    canExpand(entry) {
+      return this.isComplex(entry.value) && this.depth < this.maxDepth
+    },
+    toggle(entry) {
+      const k = this.pathKey(entry)
+      this.state[k] = !this.isOpen(entry)
+    },
+    preview(val) {
+      if (Array.isArray(val)) return ' … ' + val.length + ' 项'
+      const keys = Object.keys(val)
+      const head = keys.slice(0, 3).join(', ')
+      return ' … ' + head + (keys.length > 3 ? ', …' : '') + ' '
+    },
+    format(v) {
+      if (v === null) return 'null'
+      if (typeof v === 'string') return v // DevTools 风格：字符串不带引号
+      if (typeof v === 'number') return String(v)
+      if (typeof v === 'boolean') return String(v)
+      return JSON.stringify(v)
+    },
+  },
+}
+</script>

package/dist/vendored/components/AppToast.vue

@@ -0,0 +1,37 @@
+<!--
+  App 级弱提示（toast）：顶栏异步操作（远端保存 / 同步）完成后的反馈。
+  固定悬浮在 App 外壳顶部居中，不随手机预览框定位（区别于设备框内的 showToast）。
+  通过 runtime/app-toast.js 的 appToast 响应式单例读取，2.4s 自动消失。
+-->
+<template>
+  <transition name="apptoast-fade">
+    <div
+      v-if="toast.visible"
+      class="apptoast"
+      :class="'apptoast--' + toast.type"
+      role="status"
+      aria-live="polite"
+    >
+      <span class="apptoast__icon">
+        <svg class="apptoast__icon-svg" viewBox="0 0 24 24" aria-hidden="true">
+          <path v-if="toast.type === 'ok'" d="M5 13l4 4L19 7" />
+          <path v-else d="M6 6l12 12M18 6L6 18" />
+        </svg>
+      </span>
+      <span class="apptoast__msg">{{ toast.message }}</span>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { appToast } from '@/runtime/app-toast.js'
+
+export default {
+  name: 'AppToast',
+  computed: {
+    toast() {
+      return appToast
+    },
+  },
+}
+</script>

package/dist/vendored/components/Button.vue

@@ -0,0 +1,37 @@
+<!-- 官方 module 2000 / 515 -->
+<template>
+  <button
+    class="ce_button"
+    :class="{ ce_button_disabled: disabled }"
+    :style="styleObj"
+    @click="!disabled && $emit('click', $event)"
+  >
+    {{ doI18n(value) }}
+  </button>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+export default {
+  name: 'CeButton',
+  emits: ['click'],
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    // 官方是 String / Boolean，这里放宽以兼容变量算出的其它原始类型；
+    // 真值判断规则与官方完全相同（字符串 "false" 同样是真）
+    value: { type: [String, Number], default: '' },
+    disabled: { type: [Boolean, String, Number], default: false },
+  },
+  computed: {
+    styleObj() {
+      const parser = new StyleParser(this, this.styleProps)
+      const out = parser.parse()
+      parser.parseFont(this.styleProps.font || {}, out)
+      return out
+    },
+  },
+}
+</script>

package/dist/vendored/components/Canvas.vue

@@ -0,0 +1,65 @@
+<!--
+  官方 module 1985 / 506。
+  挂载后按 devicePixelRatio 放大位图并 scale 上下文，然后把「设计稿坐标系」的
+  canvas 包装对象通过 onMeasured 抛给卡片脚本去画。
+-->
+<template>
+  <canvas ref="canvas" class="ce_canvas" :style="styleObj" />
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import { makeCanvasWrapperClass } from '../runtime/canvas-context.js'
+import base from './base.js'
+
+export default {
+  name: 'CeCanvas',
+  emits: ['onMeasured'],
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+  },
+  computed: {
+    styleObj() {
+      return new StyleParser(this, this.styleProps).parse()
+    },
+  },
+  created() {
+    this.resizeEvt =
+      typeof window !== 'undefined' && 'orientationchange' in window ? 'orientationchange' : 'resize'
+  },
+  mounted() {
+    this.$nextTick(() => this.doPaint())
+    if (typeof window !== 'undefined') window.addEventListener(this.resizeEvt, this.doRepaint, false)
+  },
+  unmounted() {
+    if (typeof window !== 'undefined') window.removeEventListener(this.resizeEvt, this.doRepaint, false)
+  },
+  methods: {
+    doPaint() {
+      const el = this.$refs.canvas
+      if (!el) return
+      const rect = el.getBoundingClientRect()
+      const { availableWidth, applyUnitRatio, fontRatio = 1 } = this.adapter.getSystemInfo()
+      // availableWidth=0 时退化为 1，即 1:1 使用设计稿 px
+      const scale =
+        (availableWidth * applyUnitRatio) / this.adapter.getDesignInfo().styleWidth || 1
+      const ctx = el.getContext('2d')
+      const dpr = (typeof window !== 'undefined' ? window.devicePixelRatio : 1) || 1
+      el.width = rect.width * dpr
+      el.height = rect.height * dpr
+      ctx.scale(dpr, dpr)
+
+      const CanvasWrapper = makeCanvasWrapperClass(el, this)
+      const canvas = new CanvasWrapper(rect, scale, fontRatio)
+      this.$emit('onMeasured', { canvas, width: canvas.width, height: canvas.height })
+    },
+    doRepaint() {
+      const el = this.$refs.canvas
+      if (!el) return
+      el.getContext('2d').clearRect(0, 0, el.width, el.height)
+      this.doPaint()
+    },
+  },
+}
+</script>