km-card-layout-core 0.1.6 → 0.1.8

package/dist/index.js

@@ -193,49 +193,91 @@ const resolveBindingValue = (binding, rootData, context) => {
 };
 exports.resolveBindingValue = resolveBindingValue;
 /** ---------- 样式构建 ---------- */
+const buildCardStyle = (layout, unit) => (0, exports.styleObjectToString)({
+    width: (0, exports.addUnit)(layout.width, unit),
+    height: (0, exports.addUnit)(layout.height, unit),
+    color: layout.fontColor,
+    borderRadius: layout.borderRadius !== undefined
+        ? (0, exports.addUnit)(layout.borderRadius, unit)
+        : undefined,
+    padding: layout.padding !== undefined ? (0, exports.addUnit)(layout.padding, unit) : undefined,
+    position: 'relative',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    backgroundColor: 'transparent',
+}, unit);
+const buildBackgroundStyle = (layout, unit) => (0, exports.styleObjectToString)({
+    zIndex: layout.backgroundZIndex,
+    borderRadius: layout.borderRadius !== undefined
+        ? (0, exports.addUnit)(layout.borderRadius, unit)
+        : undefined,
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+}, unit);
 /**
  * 生成元素外层样式（绝对/弹性布局），始终返回内联样式字符串。
  */
 const buildWrapperStyle = (el, unit) => {
-    var _a;
     const abs = getAbsLayout(el);
-    if (abs) {
-        const textAlign = (_a = el === null || el === void 0 ? void 0 : el.style) === null || _a === void 0 ? void 0 : _a.textAlign;
-        return (0, exports.styleObjectToString)({
-            position: 'absolute',
-            left: (0, exports.addUnit)(abs.x, unit),
-            top: (0, exports.addUnit)(abs.y, unit),
-            width: (0, exports.addUnit)(abs.width, unit),
-            height: (0, exports.addUnit)(abs.height, unit),
-            zIndex: abs.zIndex,
-            boxSizing: 'border-box',
-            textAlign,
-        }, unit);
-    }
-    return '';
+    if (!abs)
+        return '';
+    return (0, exports.styleObjectToString)({
+        position: 'absolute',
+        left: (0, exports.addUnit)(abs.x, unit),
+        top: (0, exports.addUnit)(abs.y, unit),
+        width: (0, exports.addUnit)(abs.width, unit),
+        height: (0, exports.addUnit)(abs.height, unit),
+        zIndex: abs.zIndex,
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'center',
+    }, unit);
 };
-/**
- * padding 数组/数字转 CSS 缩写字符串。
- */
-/**
- * 构建 layout-panel 的容器样式（绝对布局容器）。
- */
-const buildPanelStyle = (el, unit) => {
+const buildPanelContentStyle = (el, unit) => (0, exports.styleObjectToString)({
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    boxSizing: 'border-box',
+    ...(el.style || {}),
+}, unit);
+const buildTextContentStyle = (el, unit) => {
+    var _a, _b, _c;
+    const textAlign = ((_a = el.style) === null || _a === void 0 ? void 0 : _a.textAlign) || el.align || undefined;
     const style = {
-        display: 'block',
+        ...(el.style || {}),
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        lineHeight: ((_b = el.style) === null || _b === void 0 ? void 0 : _b.lineHeight) !== undefined && ((_c = el.style) === null || _c === void 0 ? void 0 : _c.lineHeight) !== null
+            ? el.style.lineHeight
+            : '1.2',
+        display: 'inline-flex',
+        alignItems: 'center',
     };
+    if (textAlign)
+        style.textAlign = textAlign;
     return (0, exports.styleObjectToString)(style, unit);
 };
-/**
- * 元素样式转内联字符串（自动补单位）。
- */
-const normalizeElementStyle = (style, unit) => {
-    if (!style)
-        return '';
+const buildBaseContentStyle = (el, unit) => (0, exports.styleObjectToString)({
+    ...(el.style || {}),
+    boxSizing: 'border-box',
+}, unit);
+const buildImageContentStyle = (el, unit) => {
+    const style = { ...(el.style || {}) };
+    const borderWidth = Number(style.borderWidth);
+    if (Number.isFinite(borderWidth) && borderWidth > 0) {
+        if (!style.borderStyle)
+            style.borderStyle = 'solid';
+        if (!style.borderColor)
+            style.borderColor = '#000000';
+    }
     return (0, exports.styleObjectToString)(style, unit);
 };
 const buildTextIcon = (el, unit) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const icon = el.icon;
     if (!icon || icon.enable === false)
         return undefined;
@@ -262,6 +304,11 @@ const buildTextIcon = (el, unit) => {
         gap: (0, exports.addUnit)(gap, unit),
         color: color,
         align: icon.align || 'left',
+        wrapperStyle: (0, exports.styleObjectToString)({
+            display: 'inline-flex',
+            alignItems: 'center',
+            height: ((_d = el.style) === null || _d === void 0 ? void 0 : _d.lineHeight) || 'auto',
+        }, unit),
     };
 };
 /** ---------- 渲染树构建 ---------- */
@@ -286,7 +333,7 @@ exports.buildRenderNodes = buildRenderNodes;
  * 构建单个渲染节点（layout-panel 递归处理子元素）。
  */
 const buildNode = (el, rootData, unit, context) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (!el || el.visible === false)
         return null;
     const wrapperStyle = buildWrapperStyle(el, unit);
@@ -296,40 +343,38 @@ const buildNode = (el, rootData, unit, context) => {
             type: el.type,
             visible: !!el.visible,
             wrapperStyle,
-            contentStyle: buildPanelStyle(el, unit),
+            contentStyle: buildPanelContentStyle(el, unit),
             children: (0, exports.buildRenderNodes)(el.children || [], rootData, unit, context),
         };
     }
-    const baseStyle = normalizeElementStyle(el.style, unit);
+    const baseStyle = buildBaseContentStyle(el, unit);
     if (el.type === 'text') {
-        const align = ((_a = el.style) === null || _a === void 0 ? void 0 : _a.textAlign) || el.align;
-        const textStyle = align ? `${baseStyle};text-align:${align}` : baseStyle;
-        const value = (_c = (_b = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _b !== void 0 ? _b : el.defaultValue) !== null && _c !== void 0 ? _c : '';
+        const value = (_b = (_a = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _a !== void 0 ? _a : el.defaultValue) !== null && _b !== void 0 ? _b : '';
         return {
             id: el.id,
             type: el.type,
             wrapperStyle,
-            contentStyle: textStyle,
+            contentStyle: buildTextContentStyle(el, unit),
             text: `${value}`,
             visible: !!el.visible,
             icon: buildTextIcon(el, unit),
         };
     }
     if (el.type === 'image') {
-        const src = (_f = (_e = (_d = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _d !== void 0 ? _d : el.defaultUrl) !== null && _e !== void 0 ? _e : el.defaultValue) !== null && _f !== void 0 ? _f : '';
+        const src = (_e = (_d = (_c = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _c !== void 0 ? _c : el.defaultUrl) !== null && _d !== void 0 ? _d : el.defaultValue) !== null && _e !== void 0 ? _e : '';
         const mode = el.fit === 'contain' ? 'aspectFit' : 'aspectFill';
         return {
             id: el.id,
             type: el.type,
             wrapperStyle,
-            contentStyle: baseStyle,
+            contentStyle: buildImageContentStyle(el, unit),
             src,
             mode,
             visible: !!el.visible,
         };
     }
     if (el.type === 'icon') {
-        const name = (_j = (_h = (_g = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _g !== void 0 ? _g : el.name) !== null && _h !== void 0 ? _h : el.defaultValue) !== null && _j !== void 0 ? _j : '';
+        const name = (_h = (_g = (_f = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _f !== void 0 ? _f : el.name) !== null && _g !== void 0 ? _g : el.defaultValue) !== null && _h !== void 0 ? _h : '';
         return {
             id: el.id,
             type: el.type,
@@ -357,24 +402,8 @@ const buildNode = (el, rootData, unit, context) => {
 const buildRenderResult = (layoutInput, dataInput, unit = 'px') => {
     const layouts = (0, exports.normalizeLayout)(layoutInput);
     return layouts.map(layout => {
-        const cardStyle = (0, exports.styleObjectToString)({
-            width: (0, exports.addUnit)(layout.width, unit),
-            height: (0, exports.addUnit)(layout.height, unit),
-            color: layout.fontColor,
-            borderRadius: layout.borderRadius !== undefined
-                ? (0, exports.addUnit)(layout.borderRadius, unit)
-                : undefined,
-            padding: layout.padding !== undefined
-                ? (0, exports.addUnit)(layout.padding, unit)
-                : undefined,
-            position: 'relative',
-        }, unit);
-        const bgStyle = (0, exports.styleObjectToString)({
-            zIndex: layout.backgroundZIndex,
-            borderRadius: layout.borderRadius !== undefined
-                ? (0, exports.addUnit)(layout.borderRadius, unit)
-                : undefined,
-        }, unit);
+        const cardStyle = buildCardStyle(layout, unit);
+        const bgStyle = buildBackgroundStyle(layout, unit);
         const renderTree = (0, exports.buildRenderNodes)(layout.children || [], dataInput || {}, unit);
         return {
             renderTree,

package/dist/utils.js

@@ -4,6 +4,7 @@ exports.backgroundChange = backgroundChange;
 exports.stripLayoutBindings = stripLayoutBindings;
 exports.applyItemCollectBindings = applyItemCollectBindings;
 exports.getTemplateItems = getTemplateItems;
+exports.getTemplateBackgrounds = getTemplateBackgrounds;
 function backgroundChange(bg, layout) {
     const toNameArray = (name) => {
         if (Array.isArray(name))
@@ -124,3 +125,7 @@ function getTemplateItems(ids, items) {
     const idArray = ids.split(',').map(id => id.trim());
     return items.filter(item => idArray.includes(String(item.id)));
 }
+function getTemplateBackgrounds(ids, items) {
+    const idArray = ids.split(',').map(id => id.trim());
+    return items.filter(item => idArray.includes(String(item.id)));
+}

package/index.ts

@@ -204,57 +204,131 @@ export const resolveBindingValue = (
   return value === undefined ? undefined : value;
 };
 
-/** ---------- 样式构建 ---------- */
-
-/**
- * 生成元素外层样式（绝对/弹性布局），始终返回内联样式字符串。
- */
-const buildWrapperStyle = (el: CardElement, unit: 'px' | 'rpx'): string => {
-  const abs = getAbsLayout(el);
-  if (abs) {
-    const textAlign = el?.style?.textAlign as string | undefined;
-    return styleObjectToString(
-      {
-        position: 'absolute',
-        left: addUnit(abs.x, unit),
-        top: addUnit(abs.y, unit),
-        width: addUnit(abs.width, unit),
-        height: addUnit(abs.height, unit),
-        zIndex: abs.zIndex,
-        boxSizing: 'border-box',
-        textAlign,
-      },
-      unit
-    );
-  }
-
-  return '';
-};
-/**
- * padding 数组/数字转 CSS 缩写字符串。
- */
-/**
- * 构建 layout-panel 的容器样式（绝对布局容器）。
- */
-const buildPanelStyle = (
-  el: LayoutPanelElement,
-  unit: 'px' | 'rpx'
-): string => {
-  const style = {
-    display: 'block',
-  } as Record<string, any>;
-  return styleObjectToString(style, unit);
-};
-/**
- * 元素样式转内联字符串（自动补单位）。
- */
-const normalizeElementStyle = (
-  style: Record<string, any> | undefined,
-  unit: 'px' | 'rpx'
-): string => {
-  if (!style) return '';
-  return styleObjectToString(style, unit);
-};
+/** ---------- 样式构建 ---------- */
+
+const buildCardStyle = (
+  layout: CardLayoutSchema,
+  unit: 'px' | 'rpx'
+): string =>
+  styleObjectToString(
+    {
+      width: addUnit(layout.width, unit),
+      height: addUnit(layout.height, unit),
+      color: layout.fontColor,
+      borderRadius:
+        layout.borderRadius !== undefined
+          ? addUnit(layout.borderRadius, unit)
+          : undefined,
+      padding:
+        layout.padding !== undefined ? addUnit(layout.padding, unit) : undefined,
+      position: 'relative',
+      overflow: 'hidden',
+      boxSizing: 'border-box',
+      backgroundColor: 'transparent',
+    },
+    unit
+  );
+
+const buildBackgroundStyle = (
+  layout: CardLayoutSchema,
+  unit: 'px' | 'rpx'
+): string =>
+  styleObjectToString(
+    {
+      zIndex: layout.backgroundZIndex,
+      borderRadius:
+        layout.borderRadius !== undefined
+          ? addUnit(layout.borderRadius, unit)
+          : undefined,
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+    },
+    unit
+  );
+
+/**
+ * 生成元素外层样式（绝对/弹性布局），始终返回内联样式字符串。
+ */
+const buildWrapperStyle = (el: CardElement, unit: 'px' | 'rpx'): string => {
+  const abs = getAbsLayout(el);
+  if (!abs) return '';
+
+  return styleObjectToString(
+    {
+      position: 'absolute',
+      left: addUnit(abs.x, unit),
+      top: addUnit(abs.y, unit),
+      width: addUnit(abs.width, unit),
+      height: addUnit(abs.height, unit),
+      zIndex: abs.zIndex,
+      boxSizing: 'border-box',
+      display: 'flex',
+      alignItems: 'center',
+    },
+    unit
+  );
+};
+const buildPanelContentStyle = (
+  el: LayoutPanelElement,
+  unit: 'px' | 'rpx'
+): string =>
+  styleObjectToString(
+    {
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+      display: 'block',
+      boxSizing: 'border-box',
+      ...(el.style || {}),
+    },
+    unit
+  );
+
+const buildTextContentStyle = (el: TextElement, unit: 'px' | 'rpx') => {
+  const textAlign =
+    (el.style?.textAlign as string | undefined) || el.align || undefined;
+  const style: Record<string, any> = {
+    ...(el.style || {}),
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    lineHeight:
+      el.style?.lineHeight !== undefined && el.style?.lineHeight !== null
+        ? el.style.lineHeight
+        : '1.2',
+    display: 'inline-flex',
+    alignItems: 'center',
+  };
+  if (textAlign) style.textAlign = textAlign;
+  return styleObjectToString(style, unit);
+};
+
+const buildBaseContentStyle = (
+  el: CardElement,
+  unit: 'px' | 'rpx'
+): string =>
+  styleObjectToString(
+    {
+      ...(el.style || {}),
+      boxSizing: 'border-box',
+    },
+    unit
+  );
+
+const buildImageContentStyle = (
+  el: ImageElement,
+  unit: 'px' | 'rpx'
+): string => {
+  const style: Record<string, any> = { ...(el.style || {}) };
+  const borderWidth = Number(style.borderWidth);
+  if (Number.isFinite(borderWidth) && borderWidth > 0) {
+    if (!style.borderStyle) style.borderStyle = 'solid';
+    if (!style.borderColor) style.borderColor = '#000000';
+  }
+  return styleObjectToString(style, unit);
+};
 
 const buildTextIcon = (
   el: TextElement,
@@ -283,15 +357,23 @@ const buildTextIcon = (
       | string
       | undefined);
 
-  return {
-    name: `${name}`,
-    text: `${name}`,
-    size: addUnit(size as any, unit),
-    gap: addUnit(gap as any, unit),
-    color: color as any,
-    align: icon.align || 'left',
-  };
-};
+  return {
+    name: `${name}`,
+    text: `${name}`,
+    size: addUnit(size as any, unit),
+    gap: addUnit(gap as any, unit),
+    color: color as any,
+    align: icon.align || 'left',
+    wrapperStyle: styleObjectToString(
+      {
+        display: 'inline-flex',
+        alignItems: 'center',
+        height: el.style?.lineHeight || 'auto',
+      },
+      unit
+    ),
+  };
+};
 
 /** ---------- 渲染树构建 ---------- */
 /**
@@ -326,54 +408,52 @@ const buildNode = (
   if (!el || el.visible === false) return null;
   const wrapperStyle = buildWrapperStyle(el, unit);
 
-  if (el.type === 'layout-panel') {
-    return {
-      id: el.id,
-      type: el.type,
-      visible: !!el.visible,
-      wrapperStyle,
-      contentStyle: buildPanelStyle(el as LayoutPanelElement, unit),
-      children: buildRenderNodes(el.children || [], rootData, unit, context),
-    };
-  }
-
-  const baseStyle = normalizeElementStyle(el.style, unit);
-  if (el.type === 'text') {
-    const align = (el.style?.textAlign as string | undefined) || el.align;
-    const textStyle = align ? `${baseStyle};text-align:${align}` : baseStyle;
-    const value =
-      resolveBindingValue(el.binding, rootData, context) ??
-      el.defaultValue ??
-      '';
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: textStyle,
-      text: `${value}`,
-      visible: !!el.visible,
-      icon: buildTextIcon(el as TextElement, unit),
-    };
-  }
-
-  if (el.type === 'image') {
-    const src =
-      resolveBindingValue(el.binding, rootData, context) ??
-      (el as ImageElement).defaultUrl ??
-      el.defaultValue ??
+  if (el.type === 'layout-panel') {
+    return {
+      id: el.id,
+      type: el.type,
+      visible: !!el.visible,
+      wrapperStyle,
+      contentStyle: buildPanelContentStyle(el as LayoutPanelElement, unit),
+      children: buildRenderNodes(el.children || [], rootData, unit, context),
+    };
+  }
+
+  const baseStyle = buildBaseContentStyle(el, unit);
+  if (el.type === 'text') {
+    const value =
+      resolveBindingValue(el.binding, rootData, context) ??
+      el.defaultValue ??
+      '';
+    return {
+      id: el.id,
+      type: el.type,
+      wrapperStyle,
+      contentStyle: buildTextContentStyle(el as TextElement, unit),
+      text: `${value}`,
+      visible: !!el.visible,
+      icon: buildTextIcon(el as TextElement, unit),
+    };
+  }
+
+  if (el.type === 'image') {
+    const src =
+      resolveBindingValue(el.binding, rootData, context) ??
+      (el as ImageElement).defaultUrl ??
+      el.defaultValue ??
       '';
-    const mode =
-      (el as ImageElement).fit === 'contain' ? 'aspectFit' : 'aspectFill';
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: baseStyle,
-      src,
-      mode,
-      visible: !!el.visible,
-    };
-  }
+    const mode =
+      (el as ImageElement).fit === 'contain' ? 'aspectFit' : 'aspectFill';
+    return {
+      id: el.id,
+      type: el.type,
+      wrapperStyle,
+      contentStyle: buildImageContentStyle(el as ImageElement, unit),
+      src,
+      mode,
+      visible: !!el.visible,
+    };
+  }
 
   if (el.type === 'icon') {
     const name =
@@ -412,39 +492,14 @@ export const buildRenderResult = (
   dataInput: Record<string, any>,
   unit: 'px' | 'rpx' = 'px'
 ): RenderResult => {
-  const layouts = normalizeLayout(layoutInput);
-  return layouts.map(layout => {
-    const cardStyle = styleObjectToString(
-      {
-        width: addUnit(layout.width, unit),
-        height: addUnit(layout.height, unit),
-        color: layout.fontColor,
-        borderRadius:
-          layout.borderRadius !== undefined
-            ? addUnit(layout.borderRadius, unit)
-            : undefined,
-        padding:
-          layout.padding !== undefined
-            ? addUnit(layout.padding, unit)
-            : undefined,
-        position: 'relative',
-      },
-      unit
-    );
-    const bgStyle = styleObjectToString(
-      {
-        zIndex: layout.backgroundZIndex,
-        borderRadius:
-          layout.borderRadius !== undefined
-            ? addUnit(layout.borderRadius, unit)
-            : undefined,
-      },
-      unit
-    );
-
-    const renderTree = buildRenderNodes(
-      layout.children || [],
-      dataInput || {},
+  const layouts = normalizeLayout(layoutInput);
+  return layouts.map(layout => {
+    const cardStyle = buildCardStyle(layout, unit);
+    const bgStyle = buildBackgroundStyle(layout, unit);
+
+    const renderTree = buildRenderNodes(
+      layout.children || [],
+      dataInput || {},
       unit
     );
 
@@ -457,4 +512,4 @@ export const buildRenderResult = (
   });
 };
 
-export * from './utils';
+export * from './utils';

package/interface/data/payload.ts

@@ -1,3 +1,5 @@
+import { CardLayoutSchema } from "../layout";
+
 /**
  * 背景项
  */
@@ -6,11 +8,10 @@ export interface TemplateBackground {
   name: string;
   fileId?: number;
   fontColor?: string;
-  fontColorExtra?: { name: string | string[]; color: string }[]
+  fontColorExtra?: { name: string | string[]; color: string }[];
   imgUrl: string;
 }
 
-
 /**
  * 元素项
  */
@@ -25,3 +26,20 @@ export interface TemplateItem {
   cate: number;
   required?: 0 | 1;
 }
+
+export interface TemplateLayoutInfo {
+  id: number | string;
+  name?: string;
+  previewImg?: string;
+  height?: number;
+  width?: number;
+  enableBgIds?: string | null;
+  enableItemIds?: string | null;
+  content?: CardLayoutSchema[];
+  isVip?: 0 | 1;
+  isDouble?: 0 | 1;
+  isMoreCompany?: 0 | 1;
+  isBgCustomize?: 0 | 1;
+  createAt?: string;
+  updateAt?: string;
+}

package/interface/render.ts

@@ -8,6 +8,7 @@ export interface RenderNodeIcon {
   color?: string;
   gap?: string;
   align?: 'left' | 'right';
+  wrapperStyle?: string;
 }
 
 export interface RenderNode {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "km-card-layout-core",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Shared render helpers for CardMaster layout JSON (binding resolution, layout normalization).",
   "main": "dist/index.js",
   "types": "types.d.ts",

package/types.d.ts

@@ -12,15 +12,10 @@ import type {
   CardLayoutSchema,
   RenderNode,
   RenderResult,
+  TemplateBackground,
+  TemplateItem,
 } from './interface';
 
-export type ItemCollectMeta = {
-  id: string | number;
-  bind?: string | null;
-  default?: string | null;
-  key?: string | null;
-};
-
 export function addUnit(
   value: string | number | undefined | null,
   unit: 'px' | 'rpx'
@@ -45,7 +40,7 @@ export function stripLayoutBindings(
 
 export function applyItemCollectBindings(
   layouts: CardLayoutSchema[],
-  items?: ItemCollectMeta[]
+  items?: TemplateItem[]
 ): CardLayoutSchema[];
 
 export function buildRenderNodes(
@@ -60,3 +55,7 @@ export function buildRenderResult(
   data: Record<string, any>,
   unit?: 'px' | 'rpx'
 ): RenderResult;
+
+export function getTemplateItems(ids: string, items: TemplateItem[]): TemplateItem[];
+
+export function getTemplateBackgrounds(ids: string, items: TemplateBackground[]) : TemplateBackground[];

package/utils.ts

@@ -1,12 +1,6 @@
-import type { CardElement, CardLayoutSchema } from './interface';
+import type { CardElement, CardLayoutSchema, TemplateItem } from './interface';
 import { TemplateBackground } from './interface/data/payload';
 
-export type ItemCollectMeta = {
-  id: string | number;
-  bind?: string | null;
-  default?: string | null;
-  key?: string | null;
-};
 
 export function backgroundChange(
   bg: TemplateBackground,
@@ -92,10 +86,10 @@ export function stripLayoutBindings(
  */
 export function applyItemCollectBindings(
   layouts: CardLayoutSchema[] = [],
-  items: ItemCollectMeta[] = []
+  items: TemplateItem[] = []
 ): CardLayoutSchema[] {
   const targetLayouts = Array.isArray(layouts) ? layouts : [];
-  const metaMap = new Map<string, ItemCollectMeta>();
+  const metaMap = new Map<string, TemplateItem>();
   const metaList = Array.isArray(items) ? items : [];
   metaList.forEach(item => {
     if (item && item.id !== undefined && item.id !== null) {
@@ -135,7 +129,13 @@ export function applyItemCollectBindings(
   }));
 }
 
-export function getTemplateItems(ids: string, items: ItemCollectMeta[]) {
+export function getTemplateItems(ids: string, items: TemplateItem[]) {
+  const idArray = ids.split(',').map(id => id.trim());
+  return items.filter(item => idArray.includes(String(item.id)));
+}
+
+
+export function getTemplateBackgrounds(ids: string, items: TemplateBackground[]){
   const idArray = ids.split(',').map(id => id.trim());
   return items.filter(item => idArray.includes(String(item.id)));
 }