cardbuddy 0.6.0

package/dist/vendored/components/CardGallery.vue

@@ -0,0 +1,243 @@
+<!--
+  卡片网格预览弹窗：点击顶栏「网格预览」图标按钮打开。
+  展示本地全部卡片（GET /__cards 的 cardList）的缩略图墙，每格含：
+    - 预览图：复用本地静态服务 /__card-image/<id>，读取卡片目录下的同名预览图
+      （src/cards/<id>/<id>.png），不触发实时无头截图
+    - 标题：card.name
+    - 卡 id：card.id
+  缩略图按可见性懒加载（IntersectionObserver），避免一次打开对 70+ 张图同时发起请求。
+  点击任一张 → emit select(id)（父级 onSelect 载入工作台并持久化）+ close 关闭弹窗。
+  搜索框按 id / 名称过滤；Esc 或点遮罩关闭；当前选中卡高亮。
+-->
+<template>
+  <transition name="cg-fade">
+    <div v-if="visible" class="cg-mask" @click.self="close">
+      <div class="cg-modal" role="dialog" aria-modal="true" aria-label="卡片网格预览">
+        <header class="cg-modal__head">
+          <div class="cg-modal__title">
+            <svg class="app__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-grid" /></svg>
+            <span>卡片网格预览</span>
+            <span class="cg-modal__count">{{ cards.length }} 张本地卡片</span>
+          </div>
+          <div class="cg-modal__search">
+            <svg class="cg-modal__search-icon" viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><use href="#icon-search" /></svg>
+            <input
+              ref="search"
+              v-model="query"
+              class="cg-modal__input"
+              type="text"
+              placeholder="搜索卡片 ID / 名称…"
+            />
+          </div>
+          <button
+            class="cg-modal__sort"
+            :class="{ 'cg-modal__sort--active': sortByTime }"
+            type="button"
+            :title="sortByTime ? '已按修改时间排序（新→旧），点击取消' : '按修改时间排序（新→旧）'"
+            :aria-pressed="sortByTime"
+            @click="toggleSort"
+          >按修改时间排序</button>
+          <button class="cg-modal__close" type="button" title="关闭" @click="close" aria-label="关闭">
+            <svg class="app__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></svg>
+          </button>
+        </header>
+
+        <div ref="grid" class="cg-grid">
+          <button
+            v-for="card in filtered"
+            :key="card.id"
+            :data-id="card.id"
+            type="button"
+            class="cg-tile"
+            :class="{
+              'cg-tile--active': card.id === selectedId,
+              'cg-tile--failed': failed.has(card.id),
+            }"
+            @click="choose(card)"
+          >
+            <div class="cg-tile__thumb">
+              <img
+                v-if="visibleIds.has(card.id) && !failed.has(card.id)"
+                class="cg-tile__img"
+                :src="thumbUrl(card.id)"
+                :alt="card.name"
+                loading="lazy"
+                @error="onImgError(card.id)"
+              />
+              <div v-else-if="!visibleIds.has(card.id)" class="cg-tile__skeleton">预览加载中…</div>
+              <div v-else class="cg-tile__fallback">
+                <svg class="app__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><use href="#icon-glyph-Image" /></svg>
+                <span>预览不可用</span>
+              </div>
+            </div>
+            <div class="cg-tile__meta">
+              <span class="cg-tile__name" :title="card.name">{{ card.name }}</span>
+              <span class="cg-tile__id" :title="card.id">{{ card.id }}</span>
+            </div>
+          </button>
+          <p v-if="!filtered.length" class="cg-empty">无匹配卡片</p>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { resolveApiBase } from '@/api.js'
+
+export default {
+  name: 'CardGallery',
+  props: {
+    /** 是否显示弹窗 */
+    visible: { type: Boolean, default: false },
+    /** 卡片列表（与顶栏 csel-combo 同源：GET /__cards 的 cardList） */
+    cards: { type: Array, default: () => [] },
+    /** 当前选中卡片 id，用于高亮 */
+    selectedId: { type: String, default: '' },
+  },
+  emits: ['select', 'close'],
+  data() {
+    return {
+      query: '',
+      // 排序开关：false=按名称（默认），true=按修改时间新→旧；初始值从 localStorage 读取
+      sortByTime: this.loadSortByTime(),
+      // 已滚动进入视口、应当发起缩略图请求的卡片 id 集合（IntersectionObserver 填充）
+      visibleIds: new Set(),
+      // 缩略图加载失败的卡片 id 集合（回退占位）
+      failed: new Set(),
+      observer: null,
+      // 截图端点 base（弹窗打开时按当前 apiBase 解析一次）
+      base: '',
+    }
+  },
+  created() {
+    // 仅确保 data 阶段读取的持久化值已落盘（无记录时建立基线）
+    this.saveSortByTime()
+  },
+  computed: {
+    filtered() {
+      const q = this.query.trim().toLowerCase()
+      let arr = this.cards
+      if (q) {
+        arr = arr.filter(
+          (c) =>
+            c.id.toLowerCase().includes(q) ||
+            String(c.name || '').toLowerCase().includes(q)
+        )
+      }
+      // 排序：时间模式按修改时间新→旧；否则按名称（默认）
+      const sorted = this.sortByTime
+        ? arr.slice().sort((a, b) => (b.mtime || 0) - (a.mtime || 0))
+        : arr.slice().sort((a, b) => String(a.name || '').localeCompare(String(b.name || '')))
+      return sorted
+    },
+  },
+  watch: {
+    visible(v) {
+      if (v) {
+        this.query = ''
+        this.failed = new Set()
+        this.$nextTick(() => {
+          this.setupObserver()
+          this.focusSearch()
+        })
+        window.addEventListener('keydown', this.onKey)
+      } else {
+        this.teardownObserver()
+        window.removeEventListener('keydown', this.onKey)
+      }
+    },
+    // 搜索过滤改变列表 DOM → 重新观察新出现的卡片格子，保证懒加载继续生效
+    query() {
+      if (this.visible) this.$nextTick(this.setupObserver)
+    },
+    // 切换排序方式时立即持久化，避免每次刷新都要手动再点一次
+    sortByTime(v) {
+      this.saveSortByTime()
+    },
+  },
+  beforeUnmount() {
+    this.teardownObserver()
+    window.removeEventListener('keydown', this.onKey)
+  },
+  methods: {
+    /** 缩略图地址：复用本地静态服务 /__card-image/<id>，直接读取卡片目录下的同名预览图
+     * （src/cards/<id>/<id>.png），不触发实时无头截图。 */
+    thumbUrl(id) {
+      const base = this.base || resolveApiBase() || ''
+      return base + '/__card-image/' + encodeURIComponent(id)
+    },
+    /** 建立滚动容器内缩略图懒加载观察器：仅对进入视口（含 200px 预载边距）的格子发起截图请求。 */
+    setupObserver() {
+      this.base = resolveApiBase() || ''
+      const grid = this.$refs.grid
+      if (!grid) return
+      this.teardownObserver()
+      this.observer = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue
+            const id = e.target.getAttribute('data-id')
+            if (id && !this.visibleIds.has(id)) {
+              const next = new Set(this.visibleIds)
+              next.add(id)
+              this.visibleIds = next
+            }
+            this.observer.unobserve(e.target)
+          }
+        },
+        { root: grid, rootMargin: '200px' }
+      )
+      grid.querySelectorAll('.cg-tile').forEach((el) => this.observer.observe(el))
+    },
+    teardownObserver() {
+      if (this.observer) {
+        this.observer.disconnect()
+        this.observer = null
+      }
+    },
+    onImgError(id) {
+      const next = new Set(this.failed)
+      next.add(id)
+      this.failed = next
+    },
+    /** 读取持久化的排序方式（localStorage）。无记录或损坏时回退默认 false。 */
+    loadSortByTime() {
+      try {
+        return localStorage.getItem('cardbuddy:cardgallery-sort-by-time') === '1'
+      } catch (e) {
+        return false
+      }
+    },
+    /** 持久化排序方式到 localStorage：'1'=按修改时间，'0'=按名称。 */
+    saveSortByTime() {
+      try {
+        localStorage.setItem(
+          'cardbuddy:cardgallery-sort-by-time',
+          this.sortByTime ? '1' : '0'
+        )
+      } catch (e) {
+        /* localStorage 不可用时忽略 */
+      }
+    },
+    /** 切换「按修改时间排序」：激活时列表新→旧；再次点击取消，回到按名称默认排序。 */
+    toggleSort() {
+      this.sortByTime = !this.sortByTime
+    },
+    onKey(e) {
+      if (e.key === 'Escape') this.close()
+    },
+    focusSearch() {
+      if (this.$refs.search) this.$refs.search.focus()
+    },
+    choose(card) {
+      if (!card) return
+      this.$emit('select', card.id)
+      this.close()
+    },
+    close() {
+      this.$emit('close')
+    },
+  },
+}
+</script>

package/dist/vendored/components/CardPreview.vue

@@ -0,0 +1,72 @@
+<!--
+  自包含卡片预览组件（供独立截图/视觉比对复用，无需编辑器和 dev server）。
+
+  与编辑器 App.vue 共用同一套渲染内核（RenderTree / Adapter / createCardRuntime /
+  buildPreview），但只保留「卡片本身」：
+    - provide 下发的 adapter/cardRuntime/customComponents 与编辑器预览一致；
+    - 挂载 [data-card-ready] 供无头浏览器等待首帧落定；
+    - adapter 使用 apiBase:''，让 /slices 等站内资源保持同源相对路径，
+      不依赖 8787 本地开发服务。
+-->
+<template>
+  <div class="card-preview">
+    <div
+      class="phone__screen phone__screen--bg-white"
+      :style="screenStyle"
+      :data-card-ready="ready ? '1' : null"
+    >
+      <RenderTree
+        v-if="preview"
+        :node="preview.view"
+        :scope="runtime.state"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import RenderTree from './RenderTree.vue'
+import Adapter from '../runtime/adapter.js'
+import { createCardRuntime } from '../runtime/card-runtime.js'
+import { buildPreview } from '../runtime/toPreview.js'
+import { installJsApiMock } from '../runtime/jsapi-mock.js'
+
+export default {
+  name: 'CardPreview',
+  components: { RenderTree },
+  props: {
+    schema: { type: Object, required: true },
+    data: { type: Object, default: () => ({}) },
+    width: { type: [String, Number], default: 375 },
+  },
+  provide() {
+    return {
+      adapter: this.adapter,
+      cardRuntime: this.runtime,
+      customComponents: {},
+    }
+  },
+  data() {
+    const adapter = new Adapter({ apiBase: '' })
+    const runtime = createCardRuntime(this.data || {}, adapter)
+    installJsApiMock(runtime)
+    return {
+      adapter,
+      runtime,
+      preview: buildPreview(this.schema),
+      ready: false,
+    }
+  },
+  computed: {
+    screenStyle() {
+      const width = Number(this.width) || (this.preview && this.preview.view && this.preview.view.width) || 375
+      return { width: width + 'px' }
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.ready = true
+    })
+  },
+}
+</script>

package/dist/vendored/components/CardSelect.vue

@@ -0,0 +1,200 @@
+<template>
+  <div ref="root" class="csel" :class="{ 'csel--open': open }">
+    <button
+      type="button"
+      class="csel__trigger"
+      :class="{ 'csel__trigger--active': open }"
+      @click="toggle"
+    >
+      <span class="csel__current">
+        <span class="csel__id">{{ current.id }}</span>
+        <span class="csel__name">{{ current.name }}</span>
+      </span>
+      <svg class="csel__chev" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><use href="#icon-chevron" /></svg>
+    </button>
+
+    <transition name="csel-fade">
+      <div v-if="open" class="csel__pop">
+        <div class="csel__search">
+          <svg class="csel__search-icon" viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><use href="#icon-search" /></svg>
+          <input
+            ref="search"
+            v-model="query"
+            class="csel__input"
+            type="text"
+            placeholder="搜索卡片 ID / 名称…"
+            @keydown.down.prevent="move(1)"
+            @keydown.up.prevent="move(-1)"
+            @keydown.enter.prevent="choose(filtered[highlighted])"
+            @keydown.esc.prevent="close"
+          />
+        </div>
+        <ul ref="list" class="csel__list">
+          <li
+            v-for="(opt, i) in filtered"
+            :key="opt.id"
+            :class="[
+              'csel__item',
+              {
+                'csel__item--active': i === highlighted,
+                'csel__item--selected': opt.id === value,
+              },
+            ]"
+            @mousemove="highlighted = i"
+            @click="choose(opt)"
+          >
+            <span class="csel__item-id">{{ opt.id }}</span>
+            <span class="csel__item-name">{{ opt.name }}</span>
+            <svg v-if="opt.id === value" class="csel__check" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><use href="#icon-check" /></svg>
+          </li>
+          <li v-if="!filtered.length" class="csel__empty">无匹配卡片</li>
+        </ul>
+        <div class="csel__foot">
+          <button
+            class="csel__sort"
+            :class="{ 'csel__sort--active': sortByTime }"
+            type="button"
+            :title="sortByTime ? '已按修改时间排序（新→旧），点击取消' : '按修改时间排序（新→旧）'"
+            :aria-pressed="sortByTime"
+            @click="toggleSort"
+          >按修改时间排序</button>
+          <span class="csel__count">{{ filtered.length }} / {{ options.length }} 张卡片</span>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CardSelect',
+  // 必须声明 emits：否则父组件的 @change 会作为 onChange 透传到根 div，
+  // 内部搜索框 <input> 的原生 change 事件冒泡上来会再次触发父级 onSelect，
+  // 把 selectedId 覆盖成 Event 对象（表现为搜索后选卡片不生效）。
+  emits: ['input', 'change'],
+  props: {
+    value: { type: String, default: '' },
+    options: { type: Array, default: () => [] },
+  },
+  data() {
+    return {
+      open: false,
+      query: '',
+      highlighted: 0,
+      // 排序开关：false=按名称（默认），true=按修改时间新→旧
+      // 初始值从 localStorage 读取，保证刷新后仍保持上次选择
+      sortByTime: this.loadSortByTime(),
+    }
+  },
+  created() {
+    // 仅确保 data 阶段读取的持久化值已落盘（无记录时建立基线）
+    this.saveSortByTime()
+  },
+  computed: {
+    current() {
+      return (
+        this.options.find((o) => o.id === this.value) || {
+          id: this.value,
+          name: this.value,
+        }
+      )
+    },
+    filtered() {
+      const q = this.query.trim().toLowerCase()
+      let arr = this.options
+      if (q) {
+        arr = this.options.filter(
+          (o) =>
+            o.id.toLowerCase().includes(q) ||
+            String(o.name || '').toLowerCase().includes(q)
+        )
+      }
+      // 排序：时间模式按修改时间新→旧；否则按名称（默认）
+      const sorted = this.sortByTime
+        ? arr.slice().sort((a, b) => (b.mtime || 0) - (a.mtime || 0))
+        : arr.slice().sort((a, b) =>
+            String(a.name || '').localeCompare(String(b.name || ''))
+          )
+      return sorted
+    },
+  },
+  watch: {
+    open(v) {
+      if (v) {
+        this.query = ''
+        this.highlighted = Math.max(0, this.filtered.findIndex((o) => o.id === this.value))
+        this.$nextTick(() => {
+          if (this.$refs.search) this.$refs.search.focus()
+          this.scrollToActive()
+        })
+        document.addEventListener('click', this.onDocClick, true)
+      } else {
+        document.removeEventListener('click', this.onDocClick, true)
+      }
+    },
+    // 切换排序方式时立即持久化，避免每次刷新都要手动再点一次
+    sortByTime(v) {
+      this.saveSortByTime()
+    },
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.onDocClick, true)
+  },
+  methods: {
+    toggle() {
+      this.open = !this.open
+    },
+    /** 切换「按修改时间排序」：激活时列表新→旧；再次点击取消，回到按名称默认排序。
+     * 切换后把高亮重新指回当前选中卡片，避免高亮错位到别的行。 */
+    toggleSort() {
+      this.sortByTime = !this.sortByTime
+      this.highlighted = Math.max(0, this.filtered.findIndex((o) => o.id === this.value))
+    },
+    /** 读取持久化的排序方式（localStorage）。无记录或损坏时回退默认 false。 */
+    loadSortByTime() {
+      try {
+        return localStorage.getItem('cardbuddy:cardselect-sort-by-time') === '1'
+      } catch (e) {
+        return false
+      }
+    },
+    /** 持久化排序方式到 localStorage：'1'=按修改时间，'0'=按名称。 */
+    saveSortByTime() {
+      try {
+        localStorage.setItem(
+          'cardbuddy:cardselect-sort-by-time',
+          this.sortByTime ? '1' : '0'
+        )
+      } catch (e) {
+        /* localStorage 不可用时忽略 */
+      }
+    },
+    close() {
+      this.open = false
+    },
+    onDocClick(e) {
+      if (this.$refs.root && !this.$refs.root.contains(e.target)) this.close()
+    },
+    move(delta) {
+      if (!this.filtered.length) return
+      const n = this.filtered.length
+      this.highlighted = (this.highlighted + delta + n) % n
+      this.$nextTick(this.scrollToActive)
+    },
+    scrollToActive() {
+      const list = this.$refs.list
+      if (!list) return
+      const el = list.children[this.highlighted]
+      if (el && el.scrollIntoView) el.scrollIntoView({ block: 'nearest' })
+    },
+    choose(opt) {
+      if (!opt) return
+      this.close()
+      if (opt.id !== this.value) {
+        this.$emit('input', opt.id)
+        this.$emit('change', opt.id)
+      }
+    },
+  },
+}
+</script>

package/dist/vendored/components/CheckGroup.vue

@@ -0,0 +1,131 @@
+<!--
+  多选组（官方 module 1980 / 503）。
+  结构对齐在线编辑器渲染产物：
+  ce_check_group > ce_check_list(flex row/column) > ce_check_item
+    > ce_check_icon(svg) + ce_check_text(span)
+  颜色/尺寸/间距由 schema 属性驱动（value / dataList / selectColor /
+  unSelectColor / buttonStyle / direction / itemPadding / itemSpacing /
+  textSpacing / fontSize / iconSize）。
+-->
+<template>
+  <div class="ce_check_group" :style="rootStyle">
+    <div class="ce_check_list" :style="{ flexDirection: direction === 'vertical' ? 'column' : 'row' }">
+      <div
+        v-for="(item, idx) in dataList"
+        :key="item.key"
+        class="ce_check_item"
+        :style="itemStyle(idx)"
+        @click="toggle(item)"
+      >
+        <div
+          v-if="buttonStyle !== 'Text'"
+          class="ce_check_icon"
+          :style="{ width: iconSize + 'px', height: iconSize + 'px', marginRight: textSpacing + 'px' }"
+        >
+          <svg class="ce_svgcheckstyle" :viewBox="'0 0 1024 1024'">
+            <path
+              v-for="(d, i) in checkPaths(item)"
+              :key="i"
+              :d="d"
+              :fill="isChecked(item) ? selectColor : unSelectColor"
+            />
+          </svg>
+        </div>
+        <span
+          class="ce_check_text"
+          :title="item.desc"
+          :style="{ color: isChecked(item) ? selectColor : unSelectColor, fontSize: fontSize + 'px' }"
+        >{{ item.desc }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import base from './base.js'
+import { CHECK_PATHS } from './icons.js'
+
+export default {
+  name: 'CeCheckGroup',
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    value: { type: [Array, String, Number], default: () => [] },
+    dataList: { type: Array, default: () => [] },
+    selectColor: { type: String, default: '#0082ff' },
+    unSelectColor: { type: String, default: '#333333' },
+    buttonStyle: { type: String, default: 'Circle' },
+    maxSelectCount: { type: [String, Number], default: '0' },
+    direction: { type: String, default: 'horizontal' },
+    itemPadding: { type: [String, Number], default: '4 10 4 10' },
+    itemSpacing: { type: [String, Number], default: '4' },
+    textSpacing: { type: [String, Number], default: '3' },
+    fontSize: { type: [String, Number], default: '13' },
+    iconSize: { type: [String, Number], default: '14' },
+  },
+  emits: ['change', 'selectChange'],
+  computed: {
+    rootStyle() {
+      return { overflow: 'hidden', boxSizing: 'border-box' }
+    },
+    checkedSet() {
+      const v = this.value
+      if (Array.isArray(v)) return new Set(v.map(String))
+      if (v === '' || v == null) return new Set()
+      return new Set([String(v)])
+    },
+    limit() {
+      const n = Number(this.maxSelectCount)
+      return Number.isFinite(n) && n > 0 ? n : Infinity
+    },
+  },
+  methods: {
+    isChecked(item) {
+      return this.checkedSet.has(String(item.key))
+    },
+    /** 选中态图标路径：Circle 共用一个符号；SquareEmpty / Square 有选中/未选中两套 */
+    checkPaths(item) {
+      const checked = this.isChecked(item)
+      switch (this.buttonStyle) {
+        case 'SquareEmpty':
+          return CHECK_PATHS[checked ? 'CheckGroupSquareEmptyCheck' : 'CheckGroupSquareEmpty']
+        case 'Square':
+          return CHECK_PATHS[checked ? 'CheckGroupSquareCheck' : 'CheckGroupSquare']
+        case 'Text':
+          return []
+        case 'Circle':
+        default:
+          return CHECK_PATHS.CheckGroupCircle
+      }
+    },
+    itemStyle(idx) {
+      const pad = String(this.itemPadding).split(/\s+/)
+      const spacing = Number(this.itemSpacing) || 0
+      const isLast = idx === this.dataList.length - 1
+      const marginRight = isLast ? 0 : spacing
+      const marginBottom = idx === this.dataList.length - 1 ? 0 : spacing
+      const toPx = (a, i) => this.adapter.doSize(a[i] !== undefined ? a[i] : a[0] || 0)
+      const padding =
+        pad.length >= 4
+          ? `${toPx(pad, 0)} ${toPx(pad, 1)} ${toPx(pad, 2)} ${toPx(pad, 3)}`
+          : this.adapter.doSize(this.itemPadding)
+      return this.direction === 'vertical'
+        ? { padding, marginBottom }
+        : { padding, marginRight }
+    },
+    toggle(item) {
+      const key = String(item.key)
+      const set = new Set(this.checkedSet)
+      if (set.has(key)) {
+        set.delete(key)
+      } else {
+        if (set.size >= this.limit) set.clear()
+        set.add(key)
+      }
+      const next = [...set]
+      this.$emit('change', next)
+      this.$emit('selectChange', { value: next, item })
+    },
+  },
+}
+</script>

package/dist/vendored/components/Column.vue

@@ -0,0 +1,25 @@
+<!-- 官方 module 2097 / 539（updateGap 是 IE 兼容分支，省略） -->
+<template>
+  <div ref="column" class="ce_column" :style="styleObj" @click="$emit('click', $event)">
+    <slot />
+  </div>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+export default {
+  name: 'CeColumn',
+  emits: ['click'],
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+  },
+  computed: {
+    styleObj() {
+      return new StyleParser(this, this.styleProps).parse()
+    },
+  },
+}
+</script>