cardbuddy 0.6.0

package/dist/vendored/components/ComponentPalette.vue

@@ -0,0 +1,294 @@
+<!--
+  组件选择面板：参考线上卡片编辑器「卡片-组件」面板（布局组件 / 基础组件 两组）。
+  点击结构树每行的「＋」后弹出，选择某类型组件即回调 pick(className)，由上层负责插入。
+  数据完全取自本地 component-meta.json（与线上分组一致），无图标资源时用文字占位。
+-->
+<template>
+  <div class="cp__mask" @click.self="$emit('close')">
+    <div class="cp" role="dialog" aria-label="选择组件类型">
+      <div class="cp__head">
+        <span class="cp__title">添加组件</span>
+        <span class="cp__hint">选择要插入的组件类型</span>
+        <button class="cp__close" type="button" title="关闭" @click="$emit('close')">✕</button>
+      </div>
+
+      <div class="cp__body">
+        <input
+          class="cp__search"
+          type="text"
+          v-model="query"
+          placeholder="搜索组件…"
+          title="按组件名 / 类型过滤"
+        />
+        <section v-for="g in filteredGroups" :key="g.key" class="cp__group">
+          <h4 class="cp__group-title">{{ g.key }}</h4>
+          <div class="cp__grid">
+            <button
+              v-for="item in g.items"
+              :key="item.className"
+              class="cp__item"
+              type="button"
+              :title="item.className"
+              @click="$emit('pick', item.className)"
+            >
+              <span class="cp__avatar" :data-g="g.key === '布局组件' ? 'layout' : 'basic'" v-html="iconSvg(item.glyph)"></span>
+              <span class="cp__item-name">{{ item.name }}</span>
+              <span class="cp__item-class">{{ item.className }}</span>
+            </button>
+          </div>
+        </section>
+        <p v-if="query && !filteredGroups.length" class="cp__empty">无匹配组件</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import componentMetaJson from '../meta/component-meta.json'
+
+/*
+  统一风格的线性图标（Feather 同款：24x24、stroke=currentColor、圆角端点、无填充）。
+  每个图标贴合组件语义：布局类用「容器框 + 内部排布示意」，基础类用「组件形态/用途」示意。
+  几何统一集中在 preview/assets/svgIcons/icons.svg 的 #icon-glyph-<Name> 符号中；
+  此处仅登记「有哪些组件类型具备语义图标」，供 iconSvg() 判断是否引用 sprite，否则回退首字。
+*/
+const GLYPH_NAMES = [
+  'Row', 'Column', 'MultiColumn', 'ListLayout', 'GridLayout', 'AbsoluteLayout',
+  'ViewContainer', 'Text', 'Button', 'Image', 'Icon', 'MultiText', 'Canvas',
+  'Input', 'CheckGroup', 'RadioButton', 'ProgressSlider', 'Video', 'Map', 'Divider',
+]
+
+function buildGroups() {
+  const order = componentMetaJson.groups && componentMetaJson.groups.length
+    ? componentMetaJson.groups
+    : ['布局组件', '基础组件']
+  const byGroup = {}
+  const comps = componentMetaJson.components || {}
+  for (const key in comps) {
+    const m = comps[key]
+    const g = m.group || '基础组件'
+    if (!byGroup[g]) byGroup[g] = []
+    const name = m.name || key
+    byGroup[g].push({
+      className: key,
+      name,
+      // 用语义图标符号名（对应 icons.svg 的 #icon-glyph-<className>）；缺失时回退首字
+      glyph: key,
+    })
+  }
+  return order
+    .filter((g) => byGroup[g] && byGroup[g].length)
+    .map((g) => ({ key: g, items: byGroup[g] }))
+}
+
+export default {
+  name: 'ComponentPalette',
+  emits: ['pick', 'close'],
+  data() {
+    return {
+      groups: buildGroups(),
+      query: '',
+    }
+  },
+  computed: {
+    /** 按组件名 / 类型过滤；无搜索词时返回全部分组 */
+    filteredGroups() {
+      const q = (this.query || '').trim().toLowerCase()
+      if (!q) return this.groups
+      return this.groups
+        .map((g) => ({
+          key: g.key,
+          items: g.items.filter((it) => {
+            const name = (it.name || '').toLowerCase()
+            const cls = (it.className || '').toLowerCase()
+            return name.indexOf(q) !== -1 || cls.indexOf(q) !== -1
+          }),
+        }))
+        .filter((g) => g.items.length)
+    },
+  },
+  methods: {
+    /** 统一引用 sprite 中的语义图标（#icon-glyph-<className>），保证尺寸/描边/配色一致 */
+    iconSvg(name) {
+      if (GLYPH_NAMES.indexOf(name) !== -1) {
+        return (
+          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" ' +
+          'stroke-linecap="round" stroke-linejoin="round" width="18" height="18">' +
+          '<use href="#icon-glyph-' + name + '"></use>' +
+          '</svg>'
+        )
+      }
+      // 兜底：无对应语义图标时使用中文名首字
+      return '<span class="cp__avatar-text">' + String(name).slice(0, 1) + '</span>'
+    },
+  },
+}
+</script>
+
+<style scoped>
+.cp__mask {
+  position: fixed;
+  inset: 0;
+  background: var(--scrim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.cp {
+  width: 560px;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 64px);
+  background: var(--bg-panel);
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  box-shadow: 0 18px 48px var(--shadow-pop);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--text);
+}
+
+.cp__head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border-strong);
+}
+.cp__title {
+  font-size: 15px;
+  font-weight: 600;
+}
+.cp__hint {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.cp__close {
+  margin-left: auto;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.cp__close:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.cp__body {
+  padding: 8px 16px 16px;
+  overflow-y: auto;
+}
+
+.cp__group {
+  margin-top: 12px;
+}
+.cp__group-title {
+  margin: 0 0 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-faint);
+  letter-spacing: 0.04em;
+}
+
+.cp__grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.cp__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 6px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--text);
+  transition: border-color 0.12s, background 0.12s, transform 0.08s;
+}
+.cp__item:hover {
+  border-color: var(--accent);
+  background: var(--bg-hover);
+  transform: translateY(-1px);
+}
+.cp__item:active {
+  transform: translateY(0);
+}
+
+.cp__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--on-accent);
+  background: var(--accent);
+}
+.cp__avatar[data-g='layout'] {
+  background: var(--accent-2);
+}
+.cp__avatar[data-g='basic'] {
+  background: var(--ok);
+}
+.cp__avatar svg {
+  display: block;
+  width: 18px;
+  height: 18px;
+}
+.cp__avatar-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.cp__item-name {
+  font-size: 12px;
+  line-height: 1.2;
+  text-align: center;
+}
+.cp__item-class {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+}
+/* 组件面板搜索框 */
+.cp__search {
+  box-sizing: border-box;
+  width: 100%;
+  height: 32px;
+  margin-bottom: 10px;
+  padding: 0 10px;
+  font-size: 13px;
+  color: var(--text);
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  outline: none;
+}
+.cp__search:focus {
+  border-color: var(--accent);
+}
+.cp__empty {
+  margin: 8px 0;
+  color: var(--text-dim);
+  font-size: 12px;
+  text-align: center;
+}
+</style>

package/dist/vendored/components/ConfirmDialog.vue

@@ -0,0 +1,39 @@
+<template>
+  <transition name="confirm-fade">
+    <div v-if="visible" class="confirm-mask" @click.self="$emit('cancel')">
+      <div class="confirm-modal" role="alertdialog" aria-modal="true" :aria-label="title">
+        <div class="confirm-modal__title" :class="{ 'is-danger': danger }">
+          <svg v-if="danger" class="confirm-modal__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-no-entry" /></svg>
+          <svg v-else class="confirm-modal__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-gear" /></svg>
+          {{ title }}
+        </div>
+        <div class="confirm-modal__desc">{{ message }}</div>
+        <div class="confirm-modal__actions">
+          <button class="confirm-modal__btn confirm-modal__btn--ghost" type="button" @click="$emit('cancel')">{{ cancelText }}</button>
+          <button class="confirm-modal__btn" :class="danger ? 'confirm-modal__btn--danger' : 'confirm-modal__btn--primary'" type="button" @click="$emit('confirm')">{{ confirmText }}</button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'ConfirmDialog',
+  props: {
+    /** 是否显示弹窗 */
+    visible: { type: Boolean, default: false },
+    /** 标题 */
+    title: { type: String, default: '' },
+    /** 操作说明 / 风险描述（纯文本，支持换行由调用方控制） */
+    message: { type: String, default: '' },
+    /** 确认按钮文案，默认「继续」 */
+    confirmText: { type: String, default: '继续' },
+    /** 取消按钮文案，默认「取消」 */
+    cancelText: { type: String, default: '取消' },
+    /** 是否为危险（破坏性）操作：确认按钮转红、标题加警示图标 */
+    danger: { type: Boolean, default: false },
+  },
+  emits: ['confirm', 'cancel'],
+}
+</script>

package/dist/vendored/components/CustomPlaceholder.vue

@@ -0,0 +1,33 @@
+<!--
+  ViewContainer 的兜底实现。官方宿主会按 customClass 注入真实业务组件，
+  预览里拿不到，画一个带类名的虚线占位块，方便定位是哪个自定义组件。
+-->
+<template>
+  <div class="ce_custom_placeholder">
+    <span class="ce_custom_placeholder_tag">{{ tagText }}</span>
+    <span class="ce_custom_placeholder_name">{{ label }}</span>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CustomPlaceholder',
+  props: {
+    icon: { type: String, default: '' },
+    props: { type: Object, default: () => ({}) },
+    customClass: { type: String, default: '' },
+    title: { type: String, default: '' },
+  },
+  computed: {
+    tagText() {
+      return this.title || '自定义组件'
+    },
+    label() {
+      if (this.customClass) return this.customClass
+      const keys = Object.keys(this.props || {})
+      return keys.length ? keys.join(', ') : '未指定 customClass'
+    },
+  },
+}
+</script>