cardbuddy 0.6.0

package/dist/vendored/runtime/toPreview.js

@@ -0,0 +1,648 @@
+/**
+ * schema.json → 预览数据
+ *
+ * 复刻编辑器 chunk c9 中 View / Node / Component / Slot / Style 的
+ * `onRestore` + `onPreview` 组合流程：
+ *
+ *   1. 按组件 meta 造一棵**带默认值**的属性树；
+ *   2. 用 schema 导出的 item 覆盖；
+ *   3. 依据 itemCondition 重算可见性；
+ *   4. 摊平成普通对象，变量表达式收集进 __vars__。
+ *
+ * 易漏点：schema 里 `properties: []` 的组件**不是没有属性**，
+ * 而是"全部沿用 meta 默认值"（restoreProperty 在 items 为空时直接返回）。
+ */
+
+import Property, { PropertyList, RestoreMode } from './property.js';
+import componentMetaJson from '../meta/component-meta.json';
+import styleMetaJson from '../meta/style-meta.json';
+import directiveMetaJson from '../meta/directive-meta.json';
+
+const clone = (v) => (v === undefined ? v : JSON.parse(JSON.stringify(v)));
+
+let __seq = 0;
+const nextVal = (p) => `${p}_${(++__seq).toString(36)}`;
+
+/* ------------------------------ meta 索引 ------------------------------ */
+
+export const COMPONENT_META = componentMetaJson.components || {};
+
+/** 样式分组 meta：按 itemKey / itemId 以及 `id1|id2`、`key1.key2` 路径索引 */
+export const STYLE_META_LIST = styleMetaJson.properties || [];
+export const STYLE_META_MAP = {};
+(function indexStyleMeta(list, idPath = [], keyPath = []) {
+  list.forEach((m) => {
+    const ids = idPath.concat(m.itemId);
+    const keys = keyPath.concat(m.itemKey);
+    STYLE_META_MAP[ids.join('|')] = m;
+    STYLE_META_MAP[keys.join('.')] = m;
+    if (m.itemChildren) indexStyleMeta(m.itemChildren, ids, keys);
+  });
+})(STYLE_META_LIST);
+
+export const DIRECTIVE_META = directiveMetaJson.properties || [];
+
+/* -------------------------------- Style -------------------------------- */
+
+/**
+ * 组件样式。
+ * 默认属性树**只包含 metaInfo.style.state 中显式列出的分组与字段**
+ * （parseStateProperties 会把 state 未列出的子属性 splice 掉）。
+ */
+export class Style {
+  constructor(meta = {}) {
+    this.id = nextVal('style');
+    this.state = Object.assign({}, meta.state || {});
+    this.visible = meta.visible || {};
+    this.meta = meta.meta || {};
+    this.properties = [];
+    this.parseStateProperties(this.state, this.properties);
+  }
+
+  parseStateProperties(state, target = []) {
+    const snapshot = clone(state) || {};
+    for (const groupKey in snapshot) {
+      const meta = STYLE_META_MAP[groupKey];
+      if (!meta) continue;
+
+      const prop = new Property(meta);
+      target.push(prop);
+
+      // 裁掉 state 未列出的子属性
+      const allowed = Object.keys(snapshot[groupKey] || {});
+      const children = prop.itemChildren?.properties || [];
+      // flexShrink 例外：styleVisible 声明了「空间不足时压缩节点」时保留该字段。
+      // 否则实例树缺失 flexShrink → 样式输出无 flex-shrink → CSS 回落浏览器默认 1
+      // （压缩），而面板按 meta 默认显示 0（关闭），两者脱节。
+      const flexVisible = this.visible && this.visible.flex
+      if (
+        groupKey === 'flex' &&
+        flexVisible &&
+        typeof flexVisible === 'object' &&
+        flexVisible.flexShrink
+      ) {
+        allowed.push('flexShrink');
+      }
+      for (let i = 0; i < children.length; i++) {
+        if (!allowed.includes(children[i].itemKey)) children.splice(i--, 1);
+      }
+
+      // 写入 state 里的初值
+      PropertyList.setPropertyValue(children, snapshot[groupKey]);
+      prop.itemValueFrom = '0';
+      prop.itemUpdated = true;
+    }
+  }
+
+  onRestore(schemaStyle = {}) {
+    this.properties.length = 0;
+    this.parseStateProperties(this.state, this.properties);
+
+    const byId = this.properties.reduce((acc, p) => {
+      acc[p.itemId] = p;
+      return acc;
+    }, {});
+
+    // schema 里出现的分组：默认树里已有 → Append 合并；没有 → Delete 只保留 schema 列出的字段
+    const appendHook = {
+      append(item, targetProps, paths = []) {
+        const ids = [].concat(paths);
+        ids.push(item.itemId);
+        const meta = STYLE_META_MAP[ids.join('|')];
+        const np = new Property(meta || {});
+        targetProps.push(np);
+        np.onRestore(clone(item), RestoreMode.Delete);
+      },
+    };
+
+    (schemaStyle.properties || []).forEach((item) => {
+      const meta = STYLE_META_MAP[item.itemId];
+      if (!meta) {
+        // meta 未知的样式分组：仍按 schema 原始结构建一个 Property 保留下来，避免写回时丢字段
+        const np = new Property(item);
+        this.properties.push(np);
+        byId[item.itemId] = np;
+        np.onRestore(item, RestoreMode.Delete);
+        return;
+      }
+      const existing = byId[item.itemId];
+      if (existing) {
+        existing.onRestore(item, RestoreMode.Append, appendHook);
+      } else {
+        const np = new Property(meta);
+        this.properties.push(np);
+        byId[item.itemId] = np;
+        np.onRestore(item, RestoreMode.Delete);
+      }
+    });
+
+    Property.updatePropertyVisible(this.properties);
+  }
+
+  onPreview() {
+    const properties = this.properties.reduce((acc, p) => {
+      const r = p.onPreview();
+      if (r) Property.mergePreview(acc, r);
+      return acc;
+    }, {});
+    return { id: this.id, properties };
+  }
+
+  /** 序列化回 schema 的 style 结构 `{properties:[...]}` */
+  onExport() {
+    const properties = this.properties.reduce((ret, p) => {
+      const e = p.onExport();
+      if (e) ret.push(e);
+      return ret;
+    }, []);
+    return { properties };
+  }
+
+  /**
+   * 定点写入一个样式字段（移植自编辑器 ModelStyle.onPropertyChange）。
+   * 只把用户真正改过的字段并进实例树，避免把整棵样式默认树写进 schema。
+   * @param {Property} formGroup 表单树上的顶层分组属性（已含新值）
+   * @param {{itemId:string, child?:Object}} childChain 从分组往下指向被改字段的链
+   */
+  applyChange(formGroup, childChain) {
+    const status = formGroup.onExport(childChain);
+    if (!status) return;
+
+    const itemId = formGroup.itemId;
+    let target = this.properties.filter((p) => p.itemId === itemId)[0];
+
+    if (!target) {
+      target = new Property(STYLE_META_MAP[itemId] || {});
+      this.properties.push(target);
+      target.onRestore(clone(status), RestoreMode.Delete);
+      return;
+    }
+
+    const ids = [itemId];
+    for (let c = childChain; c; c = c.child) ids.push(c.itemId);
+
+    target.onRestore(clone(status), RestoreMode.Append, {
+      append(item, targetProps) {
+        const meta = STYLE_META_MAP[ids.join('|')];
+        const np = new Property(meta || {});
+        targetProps.push(np);
+        np.onRestore(clone(item), RestoreMode.Delete);
+      },
+    });
+  }
+}
+
+/* -------------------------------- Slot --------------------------------- */
+
+class Slot {
+  constructor(meta = {}) {
+    this.id = nextVal('slot');
+    this.slotKey = meta.slotKey;
+    this.slotName = meta.slotName;
+    this.slotDesc = meta.slotDesc || '';
+    this.slotScope = meta.slotScope === true || meta.slotScope === 'true';
+    this.slotWidth = meta.slotWidth || '';
+    this.slotHeight = meta.slotHeight || '';
+    this.slotSwitch = meta.slotSwitch === undefined ? '1' : meta.slotSwitch;
+    this.components = [];
+  }
+
+  onRestore(schemaSlot = {}) {
+    if (schemaSlot.slotSwitch !== undefined) this.slotSwitch = schemaSlot.slotSwitch;
+    this.components = (schemaSlot.components || []).map((c) => makeComponent(c));
+  }
+
+  onPreview() {
+    return {
+      id: this.id,
+      slotKey: this.slotKey,
+      slotScope: this.slotScope,
+      slotDesc: this.slotDesc,
+      slotSwitch: this.slotSwitch,
+      slotWidth: this.slotWidth,
+      slotHeight: this.slotHeight,
+      components: this.components.reduce((acc, c) => {
+        const r = c.onPreview();
+        if (r) acc.push(r);
+        return acc;
+      }, []),
+    };
+  }
+
+  /** 序列化回 schema 的 slot 结构（onRestore 的逆运算）。components 此时已是 schema 节点数组。 */
+  onExport() {
+    return {
+      slotKey: this.slotKey,
+      slotScope: this.slotScope,
+      slotSwitch: this.slotSwitch,
+      components: (this.components || []).map((c) => (c && typeof c.onExport === 'function' ? c.onExport() : c)),
+    };
+  }
+}
+
+/* ------------------------------ EventAction ----------------------------- */
+
+/**
+ * 事件动作。
+ * action 的属性 meta 不在组件包里（由动作类型决定），而 schema 已完整导出了
+ * itemKey/itemValueFrom/itemValue，所以这里直接按 onPreview 的语义摊平即可。
+ */
+function flattenSchemaItems(items = [], paths = [], vars = {}) {
+  const out = {};
+  const isNested = paths.length > 0;
+  (items || []).forEach((it) => {
+    if (!it || !it.itemKey) return;
+    const cur = paths.concat(it.itemKey);
+    if (it.itemValueFrom === '1') {
+      out[it.itemKey] = it.itemDefaultValue;
+      if (it.itemValue) vars[cur.join('.')] = it.itemValue;
+    } else if (it.itemValueFrom === '2') {
+      out[it.itemKey] = it.itemValue;
+    } else if (it.itemChildren && it.itemChildren.properties) {
+      out[it.itemKey] = flattenSchemaItems(it.itemChildren.properties, cur, vars);
+    } else if (it.itemList) {
+      out[it.itemKey] = it.itemList.map((li, idx) =>
+        flattenSchemaItems((li && li.properties) || [], cur.concat(String(idx)), vars),
+      );
+    } else {
+      out[it.itemKey] = it.itemValue;
+    }
+  });
+  if (!isNested) out.__vars__ = vars;
+  return out;
+}
+
+function makeEventAction(schemaEA = {}, componentEvents = []) {
+  const se = schemaEA.event || {};
+  // 与官方 getMatchEvent 一致：按 eventKey 在组件 meta 的事件表里找，找不到就是空事件
+  const matched = (componentEvents || []).filter((e) => e.eventKey === se.eventKey)[0] || {};
+  const action = schemaEA.action || {};
+  return {
+    event: { eventName: matched.eventName, eventKey: matched.eventKey },
+    action: {
+      actionType: action.actionType,
+      properties: flattenSchemaItems(action.properties || []),
+    },
+    // 在 schema.eventactions 中的原始下标：回写代码时按下标精确定位，
+    // 避免按 eventKey 匹配时 undefined === undefined 误写进空条目
+    schemaIndex: -1,
+  };
+}
+
+/* ------------------------------- Component ------------------------------ */
+
+class Component {
+  constructor(schemaNode = {}) {
+    const className = schemaNode.className;
+    const meta = COMPONENT_META[className] || {};
+
+    this.id = schemaNode.id || nextVal('comp');
+    this.componentId = schemaNode.componentId || nextVal(String(className).toLowerCase());
+    this.name = schemaNode.name || meta.name || className;
+    this.className = className;
+    this.version = schemaNode.version || meta.version;
+    this.visible = true;
+    this.metaMissing = !COMPONENT_META[className];
+
+    this.style = new Style({ state: meta.styleState, visible: meta.styleVisible });
+    this.directives = DIRECTIVE_META.map((m) => new Property(m));
+    this.properties = (meta.properties || []).map((m) => new Property(m));
+    this.events = meta.events || [];
+    this.eventactions = [];
+    this.slots = (meta.slots || []).map((s) => new Slot(s));
+    // 保存原始 schema 节点引用，供事件编辑器回写
+    this._schemaNode = schemaNode;
+
+    this.onRestore(schemaNode);
+  }
+
+  onRestore(node = {}) {
+    this.style.onRestore(node.style || {});
+
+    // 注意：不传 mode —— 既不删除未匹配的默认属性，也不追加 schema 中的多余项
+    Property.restoreProperty(node.directives || [], this.directives);
+    Property.updatePropertyVisible(this.directives);
+
+    Property.restoreProperty(node.properties || [], this.properties);
+    Property.updatePropertyVisible(this.properties);
+
+    this.eventactions = (node.eventactions || []).map((ea, i) => {
+      const p = makeEventAction(ea, this.events);
+      p.schemaIndex = i;
+      return p;
+    });
+
+    const bySlotKey = (node.slots || []).reduce((acc, s) => {
+      acc[s.slotKey] = s;
+      return acc;
+    }, {});
+    this.slots.forEach((s) => {
+      if (bySlotKey[s.slotKey]) s.onRestore(bySlotKey[s.slotKey]);
+    });
+
+    // meta 缺失时（未知组件）兜底：直接把 schema 的子节点挂到 default 插槽，避免整棵子树丢失
+    if (this.metaMissing && !this.slots.length && (node.slots || []).length) {
+      (node.slots || []).forEach((s) => {
+        const slot = new Slot({ slotKey: s.slotKey, slotScope: s.slotScope });
+        slot.onRestore(s);
+        this.slots.push(slot);
+      });
+    }
+  }
+
+  onPreview() {
+    const directives = this.directives.reduce((acc, p) => {
+      const r = p.onPreview();
+      if (r) Property.mergePreview(acc, r);
+      return acc;
+    }, {});
+    const properties = this.properties.reduce((acc, p) => {
+      const r = p.onPreview();
+      if (r) Property.mergePreview(acc, r);
+      return acc;
+    }, {});
+
+    const viewNode = {
+      id: this.id,
+      componentId: this.componentId,
+      name: this.name,
+      className: this.className,
+      version: this.version,
+      directives,
+      style: this.style.onPreview(),
+      properties,
+      eventactions: this.eventactions,
+      slots: this.slots.map((s) => s.onPreview()),
+      visible: this.visible,
+      metaMissing: this.metaMissing || undefined,
+      // 原始 schema 节点引用（非 enumerable，JSON.stringify 时自动忽略）
+      _schemaNode: this._schemaNode,
+    };
+    // Task #5：把本题的「Property 树模型实例」挂到预览输出上，供 AI / skill / MCP 直接读取可编辑结构。
+    // 非 enumerable：不会被 JSON.stringify 误带进保存/传输（保存路径只序列化 currentSchema 并剥离 _schemaNode）。
+    attachModel(viewNode, {
+      className: this.className,
+      properties: this.properties,
+      style: this.style.properties,
+      directives: this.directives,
+      events: this.events,
+    });
+    return viewNode;
+  }
+}
+
+function makeComponent(node) {
+  return new Component(node);
+}
+
+/* --------------------------------- Node --------------------------------- */
+
+/** 根节点（className "Root"），没有 directives / slots */
+class Node {
+  constructor(view = {}) {
+    this.id = nextVal('view');
+    this.width = view.width || '375';
+    this.className = view.className || 'Root';
+    this.style = new Style({ state: {} });
+    this.properties = [];
+    this.eventactions = [];
+    this.components = [];
+    this._schemaNode = view;
+    this.onRestore(view);
+  }
+
+  onRestore(view = {}) {
+    this.style.onRestore(view.style || {});
+    Property.restoreProperty(view.properties || [], this.properties);
+    Property.updatePropertyVisible(this.properties);
+    this.eventactions = (view.eventactions || []).map((ea, i) => {
+      const p = makeEventAction(ea, []);
+      p.schemaIndex = i;
+      return p;
+    });
+    this.components = (view.components || []).map((c) => makeComponent(c));
+  }
+
+  onPreview() {
+    const properties = this.properties.reduce((acc, p) => {
+      const r = p.onPreview();
+      if (r) Property.mergePreview(acc, r);
+      return acc;
+    }, {});
+    const viewNode = {
+      id: this.id,
+      componentId: this.id,
+      width: this.width,
+      className: this.className,
+      style: this.style.onPreview(),
+      properties,
+      eventactions: this.eventactions,
+      components: this.components.map((c) => c.onPreview()),
+      _schemaNode: this._schemaNode,
+    };
+    // Task #5：根节点同样挂 Property 树模型实例（无 directives / events）
+    attachModel(viewNode, {
+      className: this.className,
+      properties: this.properties,
+      style: this.style.properties,
+      directives: [],
+      events: [],
+    });
+    return viewNode;
+  }
+}
+
+/* -------------------------------- 字典 ---------------------------------- */
+
+function dictionaryPreview(dict) {
+  if (!dict) return undefined;
+  const reduceKV = (arr) =>
+    (arr || []).reduce((acc, it) => {
+      acc[it.key] = it.defaultValue;
+      return acc;
+    }, {});
+  return {
+    dictionaryList: reduceKV(dict.dictionaryList),
+    inputParams: reduceKV(dict.inputParams),
+    mocks: dict.mocks || {},
+  };
+}
+
+/* ------------------------------- 对外接口 -------------------------------- */
+
+/**
+ * 生成稳定的组件实例 ID（与线上编辑器风格一致：`className_<短序列>`）。
+ * 同模块内共享序列号，保证同一会话内不重复。
+ * @param {string} className 组件类型
+ * @returns {string} 形如 `text_3k` 的实例 ID
+ */
+export function genComponentId(className) {
+  const base = String(className || 'comp').toLowerCase()
+  return nextVal(base)
+}
+
+/** 某组件类型在 meta 中是否声明了插槽（即是否为"容器节点"，可承载子节点） */
+export function isContainerMeta(className) {
+  const meta = COMPONENT_META[className]
+  return !!(meta && meta.slots && meta.slots.length)
+}
+
+/** 取某容器组件类型的默认插槽 key（无 meta 时回落到 'default'） */
+export function getDefaultSlotKey(className) {
+  const meta = COMPONENT_META[className]
+  if (meta && meta.slots && meta.slots.length) return meta.slots[0].slotKey
+  return 'default'
+}
+
+/**
+ * 造一个**完整带默认值**的 schema 组件节点（与线上编辑器「添加组件」的产物同构）。
+ * 直接用 meta 默认树填充 directives / style / properties / slots，保证落盘后 schema 完整合法，
+ * 不必依赖 buildPreview 在读取时的"空数组沿用默认值"兜底（否则保存出去的节点会是空壳）。
+ * @param {string} className 组件类型（与 component-meta.json 的 key 一致）
+ * @returns {Object} 可直接 push 进 currentSchema.view.components / slot.components 的 schema 节点
+ */
+export function createComponentNode(className) {
+  const meta = COMPONENT_META[className]
+  if (!meta) throw new Error('未知组件类型：' + className)
+  const comp = new Component({ className, componentId: genComponentId(className) })
+  const packProps = (props) =>
+    (props || []).map((p) => p.onExport()).filter((x) => x !== undefined)
+  return {
+    componentId: comp.componentId,
+    className: comp.className,
+    directives: packProps(comp.directives),
+    style: comp.style.onExport(),
+    properties: packProps(comp.properties),
+    eventactions: [],
+    slots: comp.slots.map((s) => s.onExport()),
+  }
+}
+
+/**
+ * @param {Object} schema src/cards/<id>/schema.json 的内容
+ * @returns {Object} 预览数据 `{id, version, pageId, name, desc, platform, dictionary, view}`
+ */
+export function buildPreview(schema = {}) {
+  const viewSchema = schema.view || schema;
+  const node = new Node(viewSchema);
+  const dictionary = dictionaryPreview(schema.dictionary);
+  return {
+    id: schema.id,
+    version: schema.version,
+    pageId: schema.pageId,
+    name: schema.name,
+    desc: schema.desc,
+    platform: schema.platform,
+    ...(dictionary ? { dictionary } : {}),
+    view: node.onPreview(),
+  };
+}
+
+/** 遍历预览树上的所有组件（含插槽内的） */
+export function walkComponents(previewView, fn) {
+  const visit = (c, parent, slot) => {
+    fn(c, parent, slot);
+    (c.slots || []).forEach((s) => (s.components || []).forEach((x) => visit(x, c, s)));
+  };
+  (previewView.components || []).forEach((c) => visit(c, null, null));
+}
+
+/* ----------------------- 模型实例暴露（Task #5） ----------------------- */
+
+/**
+ * 单个 Property 实例 → 可传输纯对象（剔除函数/循环引用，保留编辑所需元信息），
+ * 用于把预览输出里的 Property 树「暴露」给 AI / skill / MCP 等外部消费者。
+ */
+function serializeItemOption(opt = {}) {
+  const o = {};
+  if (opt.iParamList) o.iParamList = opt.iParamList;
+  if (opt.iTypeList) o.iTypeList = opt.iTypeList;
+  if (opt.codeKey) o.codeKey = opt.codeKey;
+  if (opt.language) o.language = opt.language;
+  if (opt.max !== undefined) o.max = opt.max;
+  if (opt.min !== undefined) o.min = opt.min;
+  if (opt.step !== undefined) o.step = opt.step;
+  return o;
+}
+
+function serializeProperty(p) {
+  if (!p || !p.itemKey) return null;
+  const out = {
+    itemId: p.itemId,
+    itemKey: p.itemKey,
+    itemName: p.itemName,
+    itemType: p.itemType,
+    itemValue: p.itemValue,
+    itemValueFrom: p.itemValueFrom,
+    itemTypeRange: p.itemTypeRange,
+    itemVisible: p.itemVisible,
+    itemRequired: !!p.itemRequired,
+    itemDesc: p.itemDesc,
+    options: serializeItemOption(p.itemOption),
+  };
+  if (p.itemChildren && p.itemChildren.properties && p.itemChildren.properties.length) {
+    out.children = p.itemChildren.properties.map(serializeProperty).filter(Boolean);
+  }
+  if (p.itemList && p.itemList.length) {
+    out.itemList = p.itemList.map((g) => (g.properties || []).map(serializeProperty).filter(Boolean));
+  }
+  return out;
+}
+
+/** 把某 viewNode 的 Property 树模型实例挂到预览输出上（非 enumerable，JSON.stringify 时自动忽略） */
+function attachModel(viewNode, model) {
+  Object.defineProperty(viewNode, '_model', {
+    value: model,
+    enumerable: false,
+    configurable: true,
+    writable: false,
+  });
+}
+
+/** 收集某 viewNode 的直接子组件 viewNode（Node 用 components，Component 用 slots[].components） */
+function childComponents(vn) {
+  const out = [];
+  if (vn.components) out.push(...vn.components);
+  if (vn.slots) for (const s of vn.slots) if (s.components) out.push(...s.components);
+  return out;
+}
+
+/**
+ * 把已构建的预览树（每个节点带非枚举 _model）序列化为可传输的模型森林（嵌套，含根节点）。
+ * 直接读 viewNode._model 里的 live Property 实例，转成纯对象。
+ * @returns {{id,componentId,className,name,properties,style,directives,eventactions,components?}}
+ */
+export function serializePreviewModel(viewNode) {
+  if (!viewNode) return null;
+  const m = viewNode._model || {};
+  const node = {
+    id: viewNode.id,
+    componentId: viewNode.componentId,
+    className: viewNode.className,
+    name: viewNode.name,
+    properties: (m.properties || []).map(serializeProperty).filter(Boolean),
+    style: (m.style || []).map(serializeProperty).filter(Boolean),
+    directives: (m.directives || []).map(serializeProperty).filter(Boolean),
+    eventactions: viewNode.eventactions || [],
+  };
+  const kids = childComponents(viewNode);
+  if (kids.length) node.components = kids.map(serializePreviewModel).filter(Boolean);
+  return node;
+}
+
+/**
+ * 直接由 schema 产出「可序列化 Property 树模型森林」，供 dev 端点 / AI / skill 调用，
+ * 无需先构建 UI 预览数据。
+ * @returns {{id:?, version:?, className:string, properties, style, directives, eventactions, components:Array}}
+ */
+export function buildModelView(schema = {}) {
+  const preview = buildPreview(schema);
+  const root = serializePreviewModel(preview.view);
+  if (root) {
+    root.id = schema.id;
+    root.version = schema.version;
+  }
+  return root;
+}
+
+export default buildPreview;

package/dist/vendored/standalone-main.js

@@ -0,0 +1,36 @@
+// 自包含卡片预览入口：只挂载 CardPreview，不加载编辑器外壳、卡片列表和 dev service 连接逻辑。
+import './assets/svgIcons/index.js'
+
+import { createApp, h } from 'vue'
+import CardPreview from './components/CardPreview.vue'
+import './styles/components.css'
+import './styles/app.css'
+import './styles/standalone.css'
+
+const params = new URLSearchParams(window.location.search)
+const id = params.get('card') || ''
+const width = Number(params.get('width') || 375)
+
+async function boot() {
+  const res = await fetch(`/__standalone-card/${encodeURIComponent(id)}`)
+  if (!res.ok) {
+    const detail = await res.json().catch(() => ({}))
+    throw new Error(detail.message || `HTTP ${res.status}`)
+  }
+  const { schema, data } = await res.json()
+
+  const app = createApp({
+    render() {
+      return h(CardPreview, { schema, data, width })
+    },
+  })
+  app.config.errorHandler = (err, vm, info) => {
+    console.error('[standalone render error]', info, err)
+  }
+  app.mount('#app')
+}
+
+boot().catch((err) => {
+  console.error('[standalone boot failed]', err)
+  document.body.setAttribute('data-boot-error', String((err && err.message) || err))
+})

package/dist/vendored/standalone.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CardBuddy Standalone Card Preview</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/standalone-main.js"></script>
+  </body>
+</html>