cardbuddy 0.6.0

package/dist/vendored/components/DeviceOverlay.vue

@@ -0,0 +1,70 @@
+<!--
+  设备级模拟 UI 图层：alertDialog 确认对话框 + showToast 弱提示。
+  相对固定视口 phone-viewport 定位（absolute inset:0），不随卡片内容滚动。
+  层级高于 alertCard 图层（z-index 1100 > 1000），模拟原生对话框盖住弹窗卡片。
+-->
+<template>
+  <div class="device-ui">
+    <!-- alertDialog：原生风格居中确认对话框 -->
+    <transition name="dlg-fade">
+      <div v-if="dialog" class="dlg-mask" @click.self="onMaskClick">
+        <div class="dlg">
+          <div v-if="dialog.title" class="dlg__title">{{ dialog.title }}</div>
+          <div v-if="dialog.message" class="dlg__msg">{{ dialog.message }}</div>
+          <div class="dlg__btns">
+            <button
+              v-if="dialog.cancelButton"
+              type="button"
+              class="dlg__btn dlg__btn--cancel"
+              :class="{ 'dlg__btn--gray': dialog.cancelGrayStyle }"
+              @click="onCancel"
+            >{{ dialog.cancelButton }}</button>
+            <button type="button" class="dlg__btn dlg__btn--ok" @click="onOk">{{ dialog.okButton }}</button>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <!-- showToast：居中弱提示（对齐 Vant Toast 视觉语言） -->
+    <transition name="toast-fade">
+      <div v-if="toast" class="dtoast" :class="{ 'dtoast--icon': toast.icon }">
+        <span v-if="toast.icon" class="dtoast__icon" :class="'dtoast__icon--' + toast.icon">
+          <svg class="dtoast__icon-svg" viewBox="0 0 24 24" aria-hidden="true">
+            <path v-if="toast.icon === 'ok'" d="M5 13l4 4L19 7" />
+            <path v-else d="M6 6l12 12M18 6L6 18" />
+          </svg>
+        </span>
+        <span class="dtoast__msg">{{ toast.message }}</span>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { deviceUI, dismissDialog } from '@/runtime/jsapi-mock.js'
+
+export default {
+  name: 'DeviceOverlay',
+  computed: {
+    dialog() {
+      return deviceUI.dialog
+    },
+    toast() {
+      return deviceUI.toast
+    },
+  },
+  methods: {
+    onOk() {
+      dismissDialog({ ok: true, dismissByClickBg: false })
+    },
+    onCancel() {
+      dismissDialog({ ok: false, dismissByClickBg: false })
+    },
+    onMaskClick() {
+      // 仅当 clickBgToHide 为 true 时点击背景才关闭（dismissByClickBg 标记此关闭方式）
+      if (this.dialog && this.dialog.clickBgToHide) {
+        dismissDialog({ ok: false, dismissByClickBg: true })
+      }
+    },
+  },
+}
+</script>

package/dist/vendored/components/Divider.vue

@@ -0,0 +1,22 @@
+<!-- 官方 module 1964 / 496：纯样式，无 props 无事件 -->
+<template>
+  <div class="ce_divider" :style="styleObj" />
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+export default {
+  name: 'CeDivider',
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+  },
+  computed: {
+    styleObj() {
+      return new StyleParser(this, this.styleProps).parse()
+    },
+  },
+}
+</script>

package/dist/vendored/components/Dropdown.vue

@@ -0,0 +1,191 @@
+<template>
+  <div ref="root" class="dd" :class="['dd--' + size, { 'dd--open': open, 'dd--block': block, 'dd--disabled': disabled, 'dd--borderless': borderless, 'dd--dropup': dropUp }]" :style="rootStyle">
+    <button
+      v-if="!hasTriggerSlot"
+      type="button"
+      class="dd__trigger"
+      :class="{ 'dd__trigger--active': open }"
+      :disabled="disabled"
+      @click="toggle"
+    >
+      <span class="dd__label" :title="displayText">{{ displayText }}</span>
+      <span
+        v-if="clearable && hasValue"
+        class="dd__clear"
+        role="button"
+        tabindex="-1"
+        title="清空"
+        @click.stop="clear"
+        >✕</span
+      >
+      <svg class="dd__chev" viewBox="0 0 16 16" :width="chevSize" :height="chevSize" aria-hidden="true"><use href="#icon-chevron" /></svg>
+    </button>
+    <div v-else class="dd__trigger dd__trigger--slot" @click="toggle">
+      <slot name="trigger" :open="open" :toggle="toggle" />
+    </div>
+
+    <transition name="dd-fade">
+      <div v-if="open" ref="pop" class="dd__pop" :class="['dd__pop--' + placement]">
+        <slot :close="close" :choose="choose">
+          <ul class="dd__list">
+            <li
+              v-for="opt in options"
+              :key="opt.key"
+              class="dd__item"
+              :class="{ 'dd__item--selected': opt.key === value, 'dd__item--disabled': opt.disabled }"
+              @mousemove="onHover(opt)"
+              @click="onItemClick(opt)"
+            >
+              <span class="dd__item-text">{{ opt.value }}</span>
+              <svg v-if="opt.key === value" class="dd__check" viewBox="0 0 16 16" :width="checkSize" :height="checkSize" aria-hidden="true"><use href="#icon-check" /></svg>
+            </li>
+            <li v-if="!options.length" class="dd__empty">{{ placeholder || '无选项' }}</li>
+          </ul>
+        </slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Dropdown',
+  emits: ['input', 'change'],
+  props: {
+    value: { type: [String, Number, null], default: '' },
+    options: { type: Array, default: () => [] },
+    placeholder: { type: String, default: '请选择' },
+    // 尺寸：xs（表单紧凑 24px）/ sm（28px）/ md（顶栏 32px）/ lg（36px）
+    size: { type: String, default: 'sm' },
+    // block：撑满父容器宽度（表单内 select 用）
+    block: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    // 弹层对齐：bottom-start（左对齐）/ bottom-end（右对齐）
+    placement: { type: String, default: 'bottom-start' },
+    // 外部宽度覆盖（px），优先级高于 size
+    width: { type: [String, Number], default: null },
+    // 无边框模式：默认 false（有边框）；true 时不显示边框与选中高亮效果
+    borderless: { type: Boolean, default: false },
+    // 触发器显示文案自定义（默认取选中项 value 或 placeholder）
+    label: { type: String, default: null },
+    // 可清空：选中值后触发器右侧显示 ✕ 清除按钮（默认 false，避免影响其它下拉）
+    clearable: { type: Boolean, default: false },
+  },
+  data() {
+    return { open: false, dropUp: false }
+  },
+  computed: {
+    hasTriggerSlot() {
+      return !!this.$slots.trigger
+    },
+    current() {
+      return this.options.find((o) => o.key === this.value) || null
+    },
+    hasValue() {
+      return this.value !== '' && this.value !== null && this.value !== undefined
+    },
+    displayText() {
+      if (this.label != null) return this.label
+      if (this.current) return this.current.value || String(this.current.key)
+      return this.placeholder || '请选择'
+    },
+    chevSize() {
+      return this.size === 'xs' ? 11 : this.size === 'md' || this.size === 'lg' ? 13 : 12
+    },
+    checkSize() {
+      return this.size === 'xs' ? 11 : 12
+    },
+    rootStyle() {
+      if (this.width != null) return { width: typeof this.width === 'number' ? this.width + 'px' : this.width }
+      return null
+    },
+  },
+  watch: {
+    open(v) {
+      if (v) {
+        document.addEventListener('click', this.onDocClick, true)
+      } else {
+        document.removeEventListener('click', this.onDocClick, true)
+      }
+    },
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.onDocClick, true)
+  },
+  methods: {
+    toggle() {
+      if (this.disabled) return
+      if (!this.open) this.openMenu()
+      else this.open = false
+    },
+    openMenu() {
+      // 打开前先估算弹层高度，判断下方空间是否足够；不足且上方够则翻转到上方，
+      // 避免触发器位于滚动/裁剪容器底部时弹层被裁掉、需手动滚动才可见。
+      const root = this.$refs.root
+      if (root) {
+        const estH = Math.min(this.options.length * 31 + 12, 290)
+        this.dropUp = this.shouldDropUp(root, estH)
+      }
+      this.open = true
+      // 渲染后按弹层真实高度再校正一次（估算与实际有出入时兜底，避免闪烁）
+      this.$nextTick(() => {
+        const pop = this.$refs.pop
+        const root = this.$refs.root
+        if (!pop || !root) return
+        const want = this.shouldDropUp(root, pop.offsetHeight)
+        if (want !== this.dropUp) this.dropUp = want
+      })
+    },
+    /** 触发器位于容器底部、下方空间不足以容纳弹层且上方空间足够时返回 true（向上弹出） */
+    shouldDropUp(root, popH) {
+      const tr = root.getBoundingClientRect()
+      const clip = this.getClipRect(root)
+      const spaceBelow = clip.bottom - tr.bottom
+      const spaceAbove = tr.top - clip.top
+      return spaceBelow < popH && spaceAbove >= popH
+    },
+    /** 向上回溯找到最近的会裁剪/滚动内容的祖先，作为可见区域边界；
+       找不到则回退到视口。弹层必须落在该矩形内才不会被裁掉。 */
+    getClipRect(el) {
+      let node = el.parentElement
+      while (node && node !== document.body) {
+        const ov = getComputedStyle(node).overflowY
+        if (ov === 'auto' || ov === 'scroll' || ov === 'hidden') {
+          return node.getBoundingClientRect()
+        }
+        node = node.parentElement
+      }
+      return document.documentElement.getBoundingClientRect()
+    },
+    close() {
+      this.open = false
+      this.dropUp = false
+    },
+    clear() {
+      if (this.disabled) return
+      this.close()
+      // 即使值未变也照常回传空串，确保父级能把字段重置为空
+      this.$emit('input', '')
+      this.$emit('change', '')
+    },
+    onDocClick(e) {
+      if (this.$refs.root && !this.$refs.root.contains(e.target)) this.close()
+    },
+    onHover() {},
+    onItemClick(opt) {
+      if (opt.disabled) return
+      this.choose(opt.key)
+    },
+    choose(key) {
+      this.close()
+      if (key !== this.value) {
+        this.$emit('input', key)
+        this.$emit('change', key)
+      } else {
+        // 即使值未变也允许父级响应（如菜单按钮只关心点击）
+        this.$emit('change', key)
+      }
+    },
+  },
+}
+</script>

package/dist/vendored/components/EventEditor.vue

@@ -0,0 +1,247 @@
+<!--
+  节点事件编辑抽屉（右侧滑出）。
+
+  与属性编辑（NodeInspector）解耦：结构树的「事件」徽标 / 事件计数按钮
+  点击时单独打开本抽屉，只编辑 eventactions，不涉及属性/样式。
+
+  上下排布：上方事件开关列表，下方动作 / 脚本编辑区（复用 PropTree）。
+  数据模型与 NodeInspector 事件页签一致（EventEditModel）：
+   - 列出该节点所有可用事件（组件 events + 全局生命周期），每事件一个开关；
+   - 开关开 -> 选中后在下方展示动作类型选择 + 参数表单；
+   - 编辑即时（防抖）重建预览（emit apply），「应用」把改动暂存进内存工作副本（currentSchema），落盘由顶栏「保存到本地」负责；不再 emit write-back。
+-->
+<template>
+  <div class="ee-overlay" @click.self="onClose">
+    <div class="ee-panel">
+      <div class="ee-head">
+        <span class="ee-title">
+          事件配置 · {{ compName }}
+          <em class="ee-cls">{{ schemaNode && schemaNode.className }}</em>
+        </span>
+        <button class="ee-close" type="button" @click="onClose"></button>
+      </div>
+
+      <div class="ee-body">
+        <aside class="ee-side">
+          <p v-if="!eventModel || !eventModel.eventOptions.length" class="ee-empty">该节点无可用事件</p>
+          <div v-else class="ee-evt-list">
+            <div
+              v-for="evt in eventModel.eventOptions"
+              :key="evt.eventKey"
+              class="ee-evt"
+              :class="{ 'is-on': isOn(evt) }"
+              @click="onSelectEvent(evt)"
+            >
+              <span class="ee-evt-name" :title="evt.eventDesc || evt.eventName || evt.eventKey">{{ evt.eventName || evt.eventKey }}</span>
+              <button
+                class="ee-switch"
+                type="button"
+                role="switch"
+                :aria-checked="isOn(evt)"
+                :class="{ 'is-on': isOn(evt) }"
+                @click.stop="onToggleEvent(evt)"
+              ><span class="ee-switch__dot"></span></button>
+            </div>
+          </div>
+        </aside>
+
+        <section class="ee-detail">
+          <template v-if="activeRow">
+            <div class="ee-detail-head">
+              <div class="ee-field-row">
+                <label class="ee-field-label">动作类型</label>
+                <Dropdown
+                  :value="activeRow.actionType"
+                  :options="actionOptions(activeRow)"
+                  size="sm"
+                  block
+                  @change="onActionType(activeRow, $event)"
+                />
+              </div>
+              <p v-if="actionDesc(activeRow.actionType)" class="ee-evt-desc">{{ actionDesc(activeRow.actionType) }}</p>
+            </div>
+
+            <div class="ee-detail-body">
+              <prop-tree
+                v-if="activeRow.properties.length"
+                :key="activeRow.formKey"
+                :properties="activeRow.properties"
+                mode="event"
+                :plain="true"
+                @leaf-change="onEventLeaf"
+              />
+              <p v-else class="ee-empty">该动作无可配置参数</p>
+              <p v-if="activeRow.extraProperties.length" class="ee-evt-orphan">
+                另有 {{ activeRow.extraProperties.length }} 项 meta 未定义的参数，已原样保留
+              </p>
+            </div>
+          </template>
+
+          <p v-else class="ee-empty ee-detail-empty">请在左侧开启并选择一个事件</p>
+        </section>
+      </div>
+
+     <div class="ee-foot">
+       <span class="ee-tip">编辑即时预览（不记历史）；「应用」写入历史并关闭，落盘由顶栏「保存到本地」负责</span>
+       <div class="ee-foot-btns">
+          <button class="ee-btn ee-btn--ghost" type="button" @click="onCancel">取消</button>
+          <button class="ee-btn" type="button" @click="onApplyWrite">应用</button>
+       </div>
+     </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive } from 'vue'
+import { EventEditModel, ACTION_MAP } from '@/runtime/event-model.js'
+
+export default {
+  name: 'EventEditor',
+  props: {
+    comp: { type: Object, required: true },
+    compNames: { type: Object, default: () => ({}) },
+    rt: { type: Object, required: true },
+  },
+  emits: ['apply', 'commit', 'close'],
+  data() {
+    return {
+      eventModel: null,
+      activeKey: '',
+      _t: null,
+      _snapshot: null,
+      _dirty: false,
+      _written: false,
+    }
+  },
+  computed: {
+    schemaNode() {
+      return (this.comp && this.comp._schemaNode) || null
+    },
+    compName() {
+      const cn = this.schemaNode && this.schemaNode.className
+      if (!cn) return '节点'
+      return (this.compNames && this.compNames[cn]) || cn
+    },
+    activeRow() {
+      if (!this.eventModel || !this.activeKey) return null
+      return this.eventModel.rowForEvent(this.activeKey) || null
+    },
+  },
+  watch: {
+    comp: {
+      immediate: true,
+      handler() {
+        this.buildModel()
+      },
+    },
+  },
+  methods: {
+    buildModel() {
+      const sn = this.schemaNode
+      this.eventModel = sn ? reactive(new EventEditModel(sn)) : null
+      this.activeKey = ''
+      this._snapshot = sn ? this.snapshotEventActions(sn) : null
+      this._dirty = false
+      this._written = false
+      this.autoSelect()
+    },
+    snapshotEventActions(node) {
+      const hadKey = Object.prototype.hasOwnProperty.call(node, 'eventactions')
+      return {
+        hadKey,
+        eventactions: hadKey ? JSON.parse(JSON.stringify(node.eventactions || [])) : [],
+      }
+    },
+    restoreSnapshot() {
+      const sn = this.schemaNode
+      if (!sn || !this._snapshot) return
+      if (this._snapshot.hadKey) {
+        sn.eventactions = JSON.parse(JSON.stringify(this._snapshot.eventactions || []))
+      } else {
+        delete sn.eventactions
+      }
+    },
+    autoSelect() {
+      // 默认展开「第一个已开启事件」的设置区（驱动下方输入框区域），但不整行高亮；
+      // 没有已开启事件时保持空态。注意：仅选已开启项，不默认选中未开启的首项。
+      if (!this.eventModel) { this.activeKey = ''; return }
+      const firstOn = this.eventModel.eventOptions.find((e) => this.eventModel.rowForEvent(e.eventKey))
+      this.activeKey = firstOn ? firstOn.eventKey : ''
+    },
+    isOn(evt) {
+      return !!(this.eventModel && this.eventModel.rowForEvent(evt.eventKey))
+    },
+    onSelectEvent(evt) {
+      this.activeKey = evt.eventKey
+    },
+    onToggleEvent(evt) {
+      const wasOn = this.isOn(evt)
+      this.eventModel.toggleEvent(evt)
+      this._dirty = true
+      // 开启后展开该事件的下方设置区（驱动右侧详情区），但不整行高亮；
+      // 关闭当前正编辑的事件时收起详情区
+      if (!wasOn) {
+        this.activeKey = evt.eventKey
+      } else if (this.activeKey === evt.eventKey) {
+        this.activeKey = ''
+      }
+      this.scheduleApply()
+    },
+    actionOptions(row) {
+      return (this.eventModel.actionOptionsForEvent(row.eventKey, row.actionType) || []).map((a) => ({
+        key: a.actionType,
+        value: a.actionName + (a._unknown ? ' · meta 未定义' : ''),
+      }))
+    },
+    actionDesc(t) {
+      return (ACTION_MAP[t] && ACTION_MAP[t].actionDesc) || ''
+    },
+    onActionType(row, type) {
+      this.eventModel.setActionType(row, type)
+      this._dirty = true
+      this.scheduleApply()
+    },
+    onEventLeaf() {
+      this.eventModel.refreshVisible()
+      this._dirty = true
+      this.scheduleApply()
+    },
+    scheduleApply() {
+      if (this._t) clearTimeout(this._t)
+      this._t = setTimeout(() => {
+        this.applyAll()
+        this.$emit('apply')
+      }, 250)
+    },
+    applyAll() {
+      if (this.eventModel) this.eventModel.applyToSchema()
+    },
+    /** 将改动暂存到内存工作副本（currentSchema，与预览同引用），并重建预览；
+     *  不写盘——落盘由顶栏「保存到本地」统一负责。_written=true 表示已提交到内存，
+     *  「取消」不再还原；随后关闭抽屉。 */
+    onApplyWrite() {
+      if (this._t) {
+        clearTimeout(this._t)
+        this._t = null
+      }
+      this.applyAll()
+      this._written = true
+      this.$emit('apply')
+      this.$emit('commit')
+      this.$emit('close')
+    },
+    onCancel() {
+      this.onClose()
+    },
+    onClose() {
+      if (this._t) { clearTimeout(this._t); this._t = null }
+      if (this._dirty && !this._written) {
+        this.restoreSnapshot()
+        this.$emit('apply')
+      }
+      this.$emit('close')
+    },
+  },
+}
+</script>

package/dist/vendored/components/GridLayout.vue

@@ -0,0 +1,67 @@
+<!-- 官方 module 2113 / 547：按 column 等分宽度，列间距用 marginRight 撑 -->
+<template>
+  <div class="ce_gridlayout" :style="styleObj" @click="$emit('click', $event)">
+    <div
+      v-for="(item, index) in value || []"
+      :key="index"
+      class="ce_gridlayout_item"
+      :style="getItemStyle(index)"
+    >
+      <slot :item="item" :index="index" />
+    </div>
+  </div>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+export default {
+  name: 'CeGridLayout',
+  emits: ['click'],
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    value: { type: Array, default: () => [] },
+    column: { type: [Number, String], default: 2 },
+    rowSpacing: { type: [String, Number], default: '' },
+    itemSpacing: { type: [String, Number], default: '' },
+    edgeInsets: { type: String, default: '' },
+  },
+  computed: {
+    styleObj() {
+      const out = new StyleParser(this, this.styleProps).parse()
+      if (this.rowSpacing) out.rowGap = this.adapter.doSize(this.rowSpacing)
+      if (this.edgeInsets) {
+        const p = this.parsePadding(this.edgeInsets)
+        out.paddingLeft = this.adapter.doSize(p[1])
+        out.paddingTop = this.adapter.doSize(p[0])
+        out.paddingRight = this.adapter.doSize(p[3])
+        out.paddingBottom = this.adapter.doSize(p[2])
+      }
+      return out
+    },
+  },
+  methods: {
+    getItemStyle(index) {
+      const col = Number(this.column)
+      let width = 100 / col + '%'
+      let deduct = 0
+      let marginRight = 0
+      if (col > 1) {
+        if (this.itemSpacing) {
+          marginRight = this.adapter.doSize(this.itemSpacing)
+          deduct = this.adapter.doSize(((col - 1) * Number(this.itemSpacing)) / col)
+        }
+        width = `calc(${width} - ${deduct})`
+        // 每行最后一列不留右间距
+        if (index % col === col - 1) marginRight = 0
+      }
+      return { width, marginRight }
+    },
+    parsePadding(v) {
+      return String(v).replace(/[{}]/g, '').split(',')
+    },
+  },
+}
+</script>