cardbuddy 0.6.0

package/dist/vendored/components/HoverGuides.vue

@@ -0,0 +1,122 @@
+<!--
+  「组件结构」tab 的 hover 参考线（Photoshop 风格辅助线）：
+
+  鼠标 hover 到结构树某节点时，于画布上绘制两对「贯穿」参考线，用于选中/定位前的快速预览——
+    - 一对竖线：位于元素左、右边缘，纵向贯穿整个画布（高度 = 画布内容全高）；
+    - 一对横线：位于元素上、下边缘，横向贯穿整个画布（宽度 = 画布内容全宽）。
+
+  覆盖层作为 .phone__screen（滚动容器）的直接子节点，绝对定位于屏幕的 content 坐标系，
+  随卡片内容纵向滚动时自动贴合目标元素，无需手动跟随滚动；pointer-events:none 不挡交互。
+
+  与选中态遮罩 (SelectionOverlay) 相互独立：选中框（蓝虚线）与 hover 参考线（荧光绿贯穿线）
+  可同时显示、互不干扰。定位依据：hoverGuide.el 即目标节点画布根 DOM，由 App.onHoverNode
+  通过 data-cid 反查写入。
+-->
+<template>
+  <div v-show="hoverGuide.visible" class="ce-guides" :style="containerStyle">
+    <!-- 左 / 右竖线：贯穿画布全高 -->
+    <div class="ce-guide ce-guide--v" :style="{ left: box.left + 'px' }"></div>
+    <div class="ce-guide ce-guide--v" :style="{ left: box.right + 'px' }"></div>
+    <!-- 上 / 下横线：贯穿画布全宽 -->
+    <div class="ce-guide ce-guide--h" :style="{ top: box.top + 'px' }"></div>
+    <div class="ce-guide ce-guide--h" :style="{ top: box.bottom + 'px' }"></div>
+  </div>
+</template>
+
+<script>
+import { watch } from 'vue'
+import { hoverGuide } from '@/runtime/hoverGuide.js'
+
+export default {
+  name: 'HoverGuides',
+  // 模板需要访问模块级 reactive 对象 hoverGuide（v-show 控制显隐），
+  // 但 Vue SFC 的 <template> 作用域只能访问组件实例属性，
+  // 故通过 setup() 把它暴露出去（不能裸用 import 变量）。
+  setup() {
+    return { hoverGuide }
+  },
+  data() {
+    return {
+      // 元素边缘（content 坐标）：左/上/右/下
+      box: { left: 0, top: 0, right: 0, bottom: 0 },
+      // 覆盖层尺寸 = 画布内容全宽 / 全高，使参考线贯穿整块画布
+      containerStyle: { width: '0px', height: '0px' },
+      _ro: null,
+      _onScroll: null,
+      _onResize: null,
+      _raf: 0,
+      _stopWatch: null,
+    }
+  },
+  created() {
+    // 注意：hoverGuide 是模块级 reactive 导入，不属于组件实例，
+    // Options API 的字符串监听路径 'hoverGuide.el' 会相对 this 解析而失效，
+    // 必须改用命令式 watch(getter) 才能正确监听目标元素变化。
+    this._stopWatch = watch(
+      () => hoverGuide.el,
+      () => {
+        this.bindTarget()
+        this.schedule()
+      },
+    )
+  },
+  mounted() {
+    this._onScroll = () => this.schedule()
+    this._onResize = () => this.schedule()
+    // 滚动（含嵌套滚动）与窗口缩放都可能改变元素视口位置，重算即可，
+    // 因坐标基于 content 且覆盖层随滚动容器移动，重算值本身稳定，开销很小。
+    document.addEventListener('scroll', this._onScroll, { passive: true, capture: true })
+    window.addEventListener('resize', this._onResize)
+    this.bindTarget()
+    this.schedule()
+  },
+  beforeUnmount() {
+    document.removeEventListener('scroll', this._onScroll, { capture: true })
+    window.removeEventListener('resize', this._onResize)
+    if (this._stopWatch) { this._stopWatch(); this._stopWatch = null }
+    if (this._ro) { this._ro.disconnect(); this._ro = null }
+    if (this._raf) cancelAnimationFrame(this._raf)
+  },
+  methods: {
+    /** 把 ResizeObserver 绑定到当前目标元素，元素自身尺寸变化（编辑文本/改样式）时自动重算 */
+    bindTarget() {
+      if (this._ro) { this._ro.disconnect(); this._ro = null }
+      const el = hoverGuide.el
+      if (!el || typeof ResizeObserver === 'undefined') return
+      this._ro = new ResizeObserver(() => this.schedule())
+      this._ro.observe(el)
+    },
+    /** rAF 批处理，避免一帧内多次重算 */
+    schedule() {
+      if (this._raf) return
+      this._raf = requestAnimationFrame(() => {
+        this._raf = 0
+        this.recompute()
+      })
+    },
+    recompute() {
+      const el = hoverGuide.el
+      if (!el || !hoverGuide.visible) return
+      const container = el.closest('.phone__screen')
+      // 目标元素已脱离文档（如切换卡片后旧的 RenderTree 被卸载）：自动隐藏，避免残留
+      if (!container) {
+        hoverGuide.visible = false
+        return
+      }
+      const cRect = container.getBoundingClientRect()
+      const eRect = el.getBoundingClientRect()
+      // content 坐标：减屏幕视口偏移 + 加屏幕滚动量（抵消滚动，使参考线粘在元素上）
+      const left = eRect.left - cRect.left + container.scrollLeft
+      const top = eRect.top - cRect.top + container.scrollTop
+      const width = eRect.width
+      const height = eRect.height
+      this.box = { left, top, right: left + width, bottom: top + height }
+      // 贯穿尺寸：竖线高 = 画布内容全高（scrollHeight），横线宽 = 画布内容全宽（clientWidth）
+      this.containerStyle = {
+        width: container.clientWidth + 'px',
+        height: container.scrollHeight + 'px',
+      }
+    },
+  },
+}
+</script>

package/dist/vendored/components/Icon.vue

@@ -0,0 +1,34 @@
+<!-- 官方 module 1990 / 508：有内联 svg 源码走 SvgCode，否则从 sprite 取 -->
+<template>
+  <span class="ce_icon" :style="styleObj" @click="$emit('click', $event)">
+    <svg-code v-if="content && content.trim()" :color="color" :content="content" />
+    <svg-symbols v-else :color="color" :icon="icon" />
+  </span>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import SvgSymbols from './SvgSymbols.vue'
+import SvgCode from './SvgCode.vue'
+import base from './base.js'
+
+export default {
+  name: 'CeIcon',
+  // 必须声明 emits：否则父级传入的 onClick 会同时作为原生监听透传到根元素
+  // 且被 $emit 再次调用，导致 handler 双触发（折叠 toggle 会被第二次改回去）
+  emits: ['click'],
+  mixins: [base],
+  components: { SvgSymbols, SvgCode },
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    icon: { type: String, default: '' },
+    color: { type: String, default: '' },
+    content: { type: String, default: '' },
+  },
+  computed: {
+    styleObj() {
+      return new StyleParser(this, this.styleProps).parse()
+    },
+  },
+}
+</script>

package/dist/vendored/components/Image.vue

@@ -0,0 +1,34 @@
+<!-- 官方 module 1968 / 498：外层控尺寸，内层 div 用 background-image 填充 -->
+<template>
+  <div class="ce_image" :style="styleObj" @click="$emit('click', $event)">
+    <div class="ce_image_fill" :style="fillStyleObj" />
+  </div>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import { DEFAULT_IMAGE_URL } from '../runtime/assets.js'
+import base from './base.js'
+
+export default {
+  name: 'CeImage',
+  emits: ['click'],
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    value: { type: [String, Number], default: '' },
+  },
+  computed: {
+    styleObj() {
+      return new StyleParser(this, this.styleProps).parse()
+    },
+    fillStyleObj() {
+      const out = {}
+      new StyleParser(this, this.styleProps).parseImage(this.styleProps.image || {}, out)
+      const src = this.adapter.doReplaceUrl(this.doI18n(this.value || DEFAULT_IMAGE_URL))
+      out.backgroundImage = `url(${src})`
+      return out
+    },
+  },
+}
+</script>

package/dist/vendored/components/Input.vue

@@ -0,0 +1,90 @@
+<!-- 官方 module 1973 / 500 -->
+<template>
+  <input
+    class="ce_input"
+    :style="styleObj"
+    :type="type"
+    :placeholder="doI18n(placeholder)"
+    :maxlength="maxLength"
+    :value="inputValue"
+    @input="$emit('input', $event.target.value)"
+    @change="$emit('change')"
+  />
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+export default {
+  name: 'CeInput',
+  emits: ['input', 'change'],
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    value: { type: [String, Number], default: '' },
+    placeholder: { type: [String, Number], default: '' },
+    inputType: { type: String, default: '' },
+    maxLength: { type: [String, Number], default: '' },
+  },
+  data() {
+    return {
+      typeMap: {
+        text: 'text',
+        number: 'text',
+        email: 'text',
+        password: 'password',
+        phone: 'text',
+      },
+      regexpMap: {
+        number: /^-?([0-9]*|(0|[1-9][0-9]*)\.[0-9]{0,})?$/i,
+        email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
+        phone: /^[0-9]{11}$/,
+      },
+      inputValue: '',
+      oldValue: '',
+    }
+  },
+  created() {
+    this.inputValue = this.value
+    this.oldValue = this.inputValue
+  },
+  computed: {
+    type() {
+      return this.typeMap[this.inputType]
+    },
+    styleObj() {
+      const parser = new StyleParser(this, this.styleProps)
+      const out = parser.parse()
+      parser.parseFont(this.styleProps.font || {}, out)
+      // 官方是 Object.assign({padding}, out)，样式里显式写了 padding 则以样式为准
+      return Object.assign(
+        { padding: `${this.adapter.doSize(4)} ${this.adapter.doSize(8)}` },
+        out
+      )
+    },
+  },
+  watch: {
+    value() {
+      this.inputValue = this.value
+      this.oldValue = this.inputValue
+    },
+  },
+  methods: {
+    /**
+     * 官方 script 里定义了 doInput 做格式校验，但模板上绑的是直接 $emit("input")，
+     * 这个方法其实没被接线。保留原样以维持行为一致（输入框是非受控的，
+     * 只有外部 value 变化时才会回写 DOM）。
+     */
+    doInput(v) {
+      const re = this.regexpMap[this.inputType]
+      if (!re || re.test(v)) {
+        this.$emit('input', v)
+        this.inputValue = v
+      } else {
+        this.inputValue = this.oldValue
+      }
+    },
+  },
+}
+</script>