cardbuddy 0.6.0

package/dist/vendored/components/Map.vue

@@ -0,0 +1,110 @@
+<!--
+  地图（官方 module 1983 / 506）。
+  在线端用 Leaflet 渲染瓦片；预览端不内嵌 Leaflet（体积大且与本地资源代理不兼容），
+  改用「ce_map_view 占位 + 背景网格 + 标记点」还原在线结构（ce_map > ce_map_view + ce_map_placeholder），
+  视觉表现与在线一致：一个地图容器 + 中心标记点。
+-->
+<template>
+  <div class="ce_map" :style="rootStyle">
+    <div class="ce_map_view">
+      <svg class="ce_map_grid" viewBox="0 0 100 100" preserveAspectRatio="none">
+        <defs>
+          <pattern id="ceMapGrid" width="10" height="10" patternUnits="userSpaceOnUse">
+            <path d="M10 0 L0 0 0 10" fill="none" stroke="#dfe3ea" stroke-width="0.4" />
+          </pattern>
+        </defs>
+        <rect width="100" height="100" fill="#eef1f6" />
+        <rect width="100" height="100" fill="url(#ceMapGrid)" />
+        <!-- 模拟几条道路 -->
+        <path d="M0 60 Q40 50 100 65" fill="none" stroke="#cdd4df" stroke-width="2.2" />
+        <path d="M30 0 L45 100" fill="none" stroke="#cdd4df" stroke-width="2.2" />
+      </svg>
+      <div class="ce_map_center">
+        <div class="ce_map_pin">
+          <svg viewBox="0 0 24 24" width="26" height="26">
+            <path
+              d="M12 2C7.6 2 4 5.6 4 10c0 5.4 7.1 11.6 7.4 11.9.6.6 1.6.6 2.2 0C13.9 21.6 21 15.4 21 10c0-4.4-3.6-8-9-8z"
+              fill="#ff4d4f"
+            />
+            <circle cx="12" cy="10" r="3" fill="#fff" />
+          </svg>
+        </div>
+        <div v-if="markerName" class="ce_map_markname">{{ doI18n(markerName) }}</div>
+      </div>
+    </div>
+    <div class="ce_map_placeholder" />
+  </div>
+</template>
+
+<script>
+import base from './base.js'
+import StyleParser from '../runtime/StyleParser.js'
+
+export default {
+  name: 'CeMap',
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    centerLat: { type: [String, Number], default: '' },
+    centerLng: { type: [String, Number], default: '' },
+    zoom: { type: [String, Number], default: '' },
+    markerLat: { type: [String, Number], default: '' },
+    markerLng: { type: [String, Number], default: '' },
+    markerName: { type: String, default: '' },
+  },
+  emits: ['click'],
+  computed: {
+    // 沿用官方统一做法：用 StyleParser 解析样式面板设置（rect.height / border /
+    // borderRadius 等），让高度、边框等样式真正生效；地图占位仍需裁掉溢出的网格与标记点。
+    rootStyle() {
+      const out = new StyleParser(this, this.styleProps).parse()
+      out.overflow = 'hidden'
+      return out
+    },
+  },
+}
+</script>
+
+<style scoped>
+.ce_map_view {
+  width: 100%;
+  height: 100%;
+  min-height: 160px;
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 100%;
+}
+.ce_map_grid {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.ce_map_center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none;
+}
+.ce_map_pin {
+  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
+}
+.ce_map_markname {
+  margin-top: 2px;
+  padding: 2px 6px;
+  font-size: 12px;
+  line-height: 1.3;
+  color: #333;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 4px;
+  white-space: nowrap;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/dist/vendored/components/MultiColumn.vue

@@ -0,0 +1,49 @@
+<!--
+  多列布局容器（官方组件 MultiColumn）。
+
+  预览运行时此前未注册该组件，导致画布显示「未知组件」占位（问题 #4）。
+  本组件对齐 Row/Column 的容器范式：用 StyleParser 解析样式（rect / flex / padding …），
+  渲染默认插槽内容；当 `column` 属性 > 1 时切换为 CSS Grid 多列布局（列数 = column）。
+
+  说明：当前测试卡的 MultiColumn 实例（comp_3）为「空容器」（无插槽子节点、无 column 属性），
+  此处仍提供完整的多列渲染能力，便于后续接入真实带子节点的多列布局卡片。
+-->
+<template>
+  <div ref="mc" class="ce_multicolumn" :style="styleObj" @click="$emit('click', $event)">
+    <slot />
+  </div>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+export default {
+  name: 'CeMultiColumn',
+  emits: ['click'],
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    column: { type: [Number, String], default: 2 },
+  },
+  computed: {
+    styleObj() {
+      const s = new StyleParser(this, this.styleProps).parse()
+      const cols = parseInt(this.column, 10)
+      if (cols && cols > 1) {
+        // 多列：用 grid 把子节点按 column 列均分；flex gap 同时充当 grid 行列间距。
+        s.display = 'grid'
+        s.gridTemplateColumns = `repeat(${cols}, 1fr)`
+      }
+      return s
+    },
+  },
+}
+</script>
+
+<style scoped>
+.ce_multicolumn {
+  box-sizing: border-box;
+  min-height: 24px;
+}
+</style>

package/dist/vendored/components/MultiText.vue

@@ -0,0 +1,58 @@
+<!--
+  官方 module 1981 / 504。
+  一行里多段不同字体的文本；点击时用 event.__do__ 做冒泡去重，
+  子段先命中，父段再收到同一个 event 就不重复 emit 了。
+-->
+<template>
+  <span class="ce_multitext" :style="styleObj" @click="doClick($event)">
+    <span class="ce_multitext_item">
+      <span
+        v-for="(item, index) in textList"
+        :key="index"
+        :style="parseFont(item)"
+        @click="doClick($event, item, index)"
+        >{{ doI18n(item.value) }}</span
+      >
+    </span>
+  </span>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+export default {
+  name: 'CeMultiText',
+  emits: ['click'],
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    textList: { type: Array, default: () => [] },
+  },
+  computed: {
+    styleObj() {
+      const parser = new StyleParser(this, this.styleProps)
+      const out = parser.parse()
+      parser.parseFont(this.styleProps.font || {}, out)
+      return out
+    },
+  },
+  methods: {
+    doClick(e, item, index) {
+      if (e.__do__) return
+      e.__do__ = true
+      this.$emit('click', {
+        data: { index, tag: item ? item.tag : '', text: item ? item.value : '' },
+      })
+    },
+    parseFont(item) {
+      const out = {}
+      new StyleParser(this, {}).parseFont(item || {}, out)
+      if (item && item.backgroundColor) {
+        out.backgroundColor = this.adapter.doColor(item.backgroundColor)
+      }
+      return out
+    },
+  },
+}
+</script>

package/dist/vendored/components/NodeInspector.vue

@@ -0,0 +1,295 @@
+<!--
+  节点属性面板（meta 驱动，可编辑写回）。
+
+  数据源：预览树节点 comp._schemaNode（与 currentSchema 同引用）。构建 NodeEditModel 后：
+   - 组件属性 / 指令：表单树 == 实例树，直接 mutate Property.itemValue，整树导出（applyToSchema）；
+   - 样式：表单树(styleForm, 完整 meta) 与实例树(style, 精简) 分离，改动经 applyStyleChange 定点并入；
+   - 编辑即时（防抖）重建预览（emit apply），「应用」把改动暂存进内存工作副本（currentSchema），落盘由顶栏「保存到本地」负责；不再 emit write-back。
+
+  面板布局对齐线上编辑器右侧「属性 / 事件」：
+   属性 tab：基本信息 + 组件属性 + 样式 + 指令（分组可折叠，叶子用类型化控件）；
+   事件 tab：事件动作列表，每条 = 触发事件 + 动作类型 + 动作参数。
+     参数由 meta/action-meta.json 声明（Property meta 形态），
+     因此和属性页签共用 Property / PropTree / PropControl 同一套渲染与回写机制，
+     customAction 的脚本走 itemType=Code 的 SetCode 设置器（CodeJar + Prism）。
+     导出纪律见 runtime/event-model.js 文件头：必填/原有/改过的参数才写回 schema。
+-->
+<template>
+  <div class="ni-overlay">
+    <div class="ni-panel">
+      <div class="ni-head">
+        <span class="ni-title">
+          节点属性 · {{ compName }}
+          <em class="ni-cls">{{ schemaNode && schemaNode.className }}</em>
+        </span>
+        <button class="ni-close" type="button" @click="onClose"></button>
+      </div>
+
+      <div v-if="!model" class="ni-body">
+        <p class="ni-empty">无法定位该节点的原始 schema（_schemaNode 缺失）</p>
+      </div>
+
+     <div v-else class="ni-body">
+        <!-- ============ 属性 ============ -->
+        <div class="ni-scroll">
+          <!-- 基本信息 -->
+          <section class="ni-sec">
+            <div class="ni-sec-head" @click="toggleSec('basic')">
+              <span class="ni-caret" :class="{ 'is-open': secOpen.basic }">▸</span>基本信息
+            </div>
+            <div v-show="secOpen.basic" class="ni-sec-body">
+              <div class="ni-field-row">
+                <label class="ni-field-label">组件类型</label>
+                <span class="ni-static">{{ compName }}</span>
+              </div>
+              <div class="ni-field-row" v-if="hasField('componentId')">
+                <label class="ni-field-label">实例 ID</label>
+                <input class="ni-input" :value="schemaNode.componentId" @input="onMetaInput('componentId', $event.target.value)" />
+              </div>
+              <div class="ni-field-row" v-if="hasField('name')">
+                <label class="ni-field-label">节点名</label>
+                <input class="ni-input" :value="schemaNode.name" @input="onMetaInput('name', $event.target.value)" />
+              </div>
+            </div>
+          </section>
+
+          <!-- 组件属性 -->
+          <section class="ni-sec" v-show="model.properties.length">
+            <div class="ni-sec-head" @click="toggleSec('props')">
+              <span class="ni-caret" :class="{ 'is-open': secOpen.props }">▸</span>
+              组件属性
+            </div>
+            <div v-show="secOpen.props" class="ni-sec-body">
+              <prop-tree
+                :properties="model.properties"
+                mode="property"
+                :plain="true"
+                @leaf-change="onPropChange"
+                @leaf-sync="onStyleSync"
+              />
+            </div>
+          </section>
+
+          <!-- 样式 -->
+          <section class="ni-sec">
+            <div class="ni-sec-head" @click="toggleSec('style')">
+              <span class="ni-caret" :class="{ 'is-open': secOpen.style }">▸</span>
+              样式
+            </div>
+            <div v-show="secOpen.style" class="ni-sec-body">
+              <prop-tree
+                :properties="model.styleForm"
+                mode="style"
+                :watches="styleWatches"
+                :plain="true"
+                @leaf-change="onStyleChange"
+                @leaf-sync="onStyleSync"
+              />
+            </div>
+          </section>
+
+          <!-- 指令 -->
+          <section class="ni-sec" v-if="model.hasDirectives">
+            <div class="ni-sec-head" @click="toggleSec('directive')">
+              <span class="ni-caret" :class="{ 'is-open': secOpen.directive }">▸</span>
+              指令
+            </div>
+            <div v-show="secOpen.directive" class="ni-sec-body">
+              <p v-if="!model.directives.length" class="ni-empty">无指令</p>
+              <prop-tree
+                v-else
+                :properties="model.directives"
+                mode="directive"
+                :b-exchange="false"
+                :plain="true"
+                @leaf-change="onPropChange"
+                @leaf-sync="onStyleSync"
+              />
+            </div>
+          </section>
+       </div>
+
+     </div>
+
+      <div class="ni-foot">
+        <span class="ni-tip">编辑即时预览（不记历史）；「取消」丢弃改动并还原，「应用」写入历史并关闭，落盘由顶栏「保存到本地」负责</span>
+        <div class="ni-foot-btns">
+          <button class="ni-btn ni-btn--ghost" type="button" @click="onCancel">取消</button>
+          <button class="ni-btn" type="button" @click="onApplyWrite">应用</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive } from 'vue'
+import { NodeEditModel } from '@/runtime/node-model.js'
+
+export default {
+  name: 'NodeInspector',
+  props: {
+    comp: { type: Object, required: true },
+    compNames: { type: Object, default: () => ({}) },
+    rt: { type: Object, required: true },
+  },
+  emits: ['apply', 'commit', 'close'],
+  data() {
+    return {
+      model: null,
+     secOpen: { basic: true, props: true, style: true, directive: true },
+     _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
+    },
+    /** 样式编辑联动快照：把所有样式字段 itemKey→itemValue 摊平，供 itemWatch 使用 */
+    styleWatches() {
+      const w = {}
+      const walk = (props) => {
+        (props || []).forEach((p) => {
+          if (p.itemKey != null) w[p.itemKey] = p.itemValue
+          if (p.itemChildren && p.itemChildren.properties) walk(p.itemChildren.properties)
+        })
+      }
+      if (this.model) walk(this.model.styleForm)
+      return w
+    },
+  },
+  watch: {
+    comp: {
+      immediate: true,
+      handler() {
+        this.buildModel()
+      },
+    },
+  },
+  methods: {
+    buildModel() {
+      const sn = this.schemaNode
+      this.model = sn ? reactive(new NodeEditModel(sn)) : null
+      this._snapshot = sn ? this.snapshotNode(sn) : null
+      this._dirty = false
+      this._written = false
+    },
+    snapshotNode(node) {
+      const has = (k) => Object.prototype.hasOwnProperty.call(node, k)
+      const clone = (v) => v === undefined ? undefined : JSON.parse(JSON.stringify(v))
+      return {
+        hasProperties: has('properties'), properties: clone(node.properties),
+        hasStyle: has('style'), style: clone(node.style),
+        hasDirectives: has('directives'), directives: clone(node.directives),
+        hasComponentId: has('componentId'), componentId: clone(node.componentId),
+        hasName: has('name'), name: clone(node.name),
+      }
+    },
+    restoreSnapshot() {
+      const sn = this.schemaNode
+      if (!sn || !this._snapshot) return
+      const s = this._snapshot
+      const setOrDel = (had, key, val) => { if (had) sn[key] = JSON.parse(JSON.stringify(val)); else delete sn[key] }
+      setOrDel(s.hasProperties, 'properties', s.properties)
+      setOrDel(s.hasStyle, 'style', s.style)
+      setOrDel(s.hasDirectives, 'directives', s.directives)
+      setOrDel(s.hasComponentId, 'componentId', s.componentId)
+      setOrDel(s.hasName, 'name', s.name)
+    },
+    toggleSec(k) {
+      this.secOpen[k] = !this.secOpen[k]
+      this.secOpen = Object.assign({}, this.secOpen)
+    },
+    hasField(name) {
+      return this.schemaNode && Object.prototype.hasOwnProperty.call(this.schemaNode, name)
+    },
+    onMetaInput(field, v) {
+      if (!this.schemaNode) return
+      this.schemaNode[field] = v
+      this._dirty = true
+      this.scheduleApply()
+    },
+    /** 组件属性 / 指令：整树导出即可 */
+    onPropChange() {
+      this.model.refreshVisible()
+      this._dirty = true
+      this.scheduleApply()
+    },
+    /** 样式：定点并入实例树 */
+    onStyleChange(chain) {
+      if (!chain || !chain.length) return
+      this.model.applyStyleChange(chain[0], chain.slice(1))
+      this.model.refreshVisible()
+      this._dirty = true
+      this.scheduleApply()
+    },
+    /** 常用样式（CustomSelect）批量写入：sync map 形如 { 'style.font.color': '#333' } */
+    onStyleSync(map) {
+      if (!map) return
+      for (const path in map) {
+        const parts = String(path).split('.')
+        if (parts.length < 3 || parts[0] !== 'style') continue
+        const groupKey = parts[1]
+        const fieldKey = parts[2]
+        const group = this.model.styleForm.find((p) => p.itemKey === groupKey)
+        if (!group) continue
+        const child = group.itemChildren.properties.find((c) => c.itemKey === fieldKey)
+        if (!child) continue
+        child.itemValue = map[path]
+        this.model.applyStyleChange(group, [child])
+      }
+      this.model.refreshVisible()
+      this.scheduleApply()
+    },
+    scheduleApply() {
+      if (this._t) clearTimeout(this._t)
+      this._t = setTimeout(() => {
+        this.applyAll()
+        this.$emit('apply')
+      }, 250)
+    },
+    applyAll() {
+      if (this.model) this.model.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')
+    },
+
+    /** 丢弃本次编辑（还原到打开时快照）+ 关闭面板。
+     *  已本地保存(_written)的改动视为已提交，不再还原。 */
+    discardAndClose() {
+      if (this._t) { clearTimeout(this._t); this._t = null }
+      if (this._dirty && !this._written) {
+        this.restoreSnapshot()
+        this.$emit('apply')
+      }
+      this.$emit('close')
+    },
+    onClose() {
+      this.discardAndClose()
+    },
+    onCancel() {
+      this.discardAndClose()
+    },
+  },
+}
+</script>

package/dist/vendored/components/PickerOverlay.vue

@@ -0,0 +1,131 @@
+<!--
+  showPicker 模拟展现层：底部弹出级联选择器。
+  相对固定视口 phone-viewport 定位（absolute inset:0），不随卡片内容滚动；
+  层级同 DeviceOverlay（z-index 1100），盖住弹窗卡片。
+
+  交互对齐 docs「showPicker - 选择器」：
+  - mode='single' 单列；mode='multi' 多列（一级驱动二级 children 级联）。
+  - 点击某列项即选中（中间高亮带提示当前项）；点「确定」回传 result，点「取消」不回传。
+  - result 数组每项 { key, value }，value 取节点 text。
+-->
+<template>
+  <div class="device-ui">
+    <transition name="picker-fade">
+      <div v-if="picker" class="pk-mask" @click.self="onCancel">
+        <div class="pk-sheet">
+          <div class="pk-bar">
+            <button type="button" class="pk-bar__btn pk-bar__btn--cancel" @click="onCancel">取消</button>
+            <div v-if="picker.title" class="pk-bar__title">{{ picker.title }}</div>
+            <button type="button" class="pk-bar__btn pk-bar__btn--ok" @click="onConfirm">确定</button>
+          </div>
+          <div class="pk-cols" :class="'pk-cols--' + columns.length">
+            <div v-for="(col, ci) in columns" :key="ci" class="pk-col">
+              <div class="pk-col__band"></div>
+              <div class="pk-col__list">
+                <div
+                  v-for="(item, ii) in col.items"
+                  :key="item.key"
+                  class="pk-item"
+                  :class="{ 'pk-item--on': sel[ci] === ii }"
+                  @click="select(ci, ii)"
+                >{{ item.text }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { deviceUI, dismissPicker } from '@/runtime/jsapi-mock.js'
+
+export default {
+  name: 'PickerOverlay',
+  data() {
+    return {
+      sel: [], // 每列选中索引（列数由 mode 决定）
+    }
+  },
+  computed: {
+    picker() {
+      return deviceUI.picker
+    },
+    // 列定义：single -> 单列（顶级项，忽略 children）；multi -> 两列（级联，第二列为第一列选中项的 children）
+    columns() {
+      if (!this.picker) return []
+      const ds = this.picker.dataSource || []
+      if (this.picker.mode === 'multi') {
+        const col1 = ds.map((n) => ({ key: String(n.key), text: n.text }))
+        const sel1 = this.sel[0] || 0
+        const children = (ds[sel1] && ds[sel1].children) || []
+        const col2 = children.map((n) => ({ key: String(n.key), text: n.text }))
+        return [{ items: col1, level: 0 }, { items: col2, level: 1 }]
+      }
+      return [{ items: ds.map((n) => ({ key: String(n.key), text: n.text })), level: 0 }]
+    },
+  },
+  watch: {
+    // picker 切换（含入参变化）时按 currentValue 初始化选中项
+    picker: {
+      immediate: true,
+      handler(p) {
+        if (!p) {
+          this.sel = []
+          return
+        }
+        const ds = p.dataSource || []
+        const cv = p.currentValue || []
+        if (p.mode === 'multi') {
+          const i1 = ds.findIndex((n) => String(n.key) === String(cv[0]))
+          const idx1 = i1 >= 0 ? i1 : 0
+          const children = (ds[idx1] && ds[idx1].children) || []
+          const i2 = children.findIndex((n) => String(n.key) === String(cv[1]))
+          this.sel = [idx1, i2 >= 0 ? i2 : children.length ? 0 : -1]
+        } else {
+          const i1 = ds.findIndex((n) => String(n.key) === String(cv[0]))
+          this.sel = [i1 >= 0 ? i1 : 0]
+        }
+      },
+    },
+  },
+  methods: {
+    select(ci, ii) {
+      const next = this.sel.slice()
+      next[ci] = ii
+      // 切换第一列时重置第二列选中（级联）
+      if (ci === 0 && this.picker.mode === 'multi') {
+        const ds = this.picker.dataSource || []
+        const children = (ds[ii] && ds[ii].children) || []
+        next[1] = children.length ? 0 : -1
+      }
+      this.sel = next
+    },
+    buildResult() {
+      const p = this.picker
+      if (!p) return []
+      const ds = p.dataSource || []
+      // 回传对象携带 text（卡片回调读 result[0].text）与 value（文档出参规范），两者取节点 text。
+      const wrap = (n) => ({ key: String(n.key), text: n.text, value: n.text })
+      if (p.mode === 'multi') {
+        const n1 = ds[this.sel[0]] || ds[0]
+        const children = (n1 && n1.children) || []
+        const n2 = children[this.sel[1]] || children[0]
+        const arr = []
+        if (n1) arr.push(wrap(n1))
+        if (n2) arr.push(wrap(n2))
+        return arr
+      }
+      const n1 = ds[this.sel[0]] || ds[0]
+      return n1 ? [wrap(n1)] : []
+    },
+    onConfirm() {
+      dismissPicker(true, this.buildResult())
+    },
+    onCancel() {
+      dismissPicker(false)
+    },
+  },
+}
+</script>