km-card-layout-core 0.1.1 → 0.1.3

package/README.md

@@ -1,6 +1,6 @@
 # km-card-layout-core
 
-纯函数渲染核心：负责将布局 JSON 与数据合成渲染树，处理绑定路径、repeatable-group 展开、样式单位（px/rpx）等。
+纯函数渲染核心：负责将布局 JSON 与数据合成渲染树，处理绑定路径、样式单位（px/rpx）等。
 
 ## API
 

package/dist/index.js

@@ -25,7 +25,6 @@ __exportStar(require("./interface"), exports);
 /** ---------- 常量 ---------- */
 const DEFAULT_CARD_WIDTH = 343; // 默认卡片宽度（像素）
 const DEFAULT_CARD_HEIGHT = 210; // 默认卡片高度（像素）
-const DEFAULT_GROUP_GAP = 22; // repeatable-item 默认纵向间距
 const DIMENSION_PROPS = new Set([
     'width',
     'height',
@@ -51,7 +50,6 @@ const DIMENSION_PROPS = new Set([
     'gap',
     'rowGap',
     'columnGap',
-    'flexBasis',
 ]);
 /** ---------- 基础工具 ---------- */
 /**
@@ -125,9 +123,6 @@ const isObject = (val) => Boolean(val) && typeof val === 'object';
 const getAbsLayout = (el) => el.layout && el.layout.mode === 'absolute'
     ? el.layout
     : null;
-const getFlexLayout = (el) => el.layout && el.layout.mode === 'flex'
-    ? el.layout
-    : null;
 /** ---------- 布局与数据解析 ---------- */
 /**
  * 归一化布局输入（对象或 JSON 字符串），补齐宽高/容器/children 默认值。
@@ -188,30 +183,12 @@ const readByPath = (data, path) => {
     return cursor;
 };
 /**
- * 解析元素 binding 对应的数据：
- * - 全局 binding：直接基于根数据；
- * - repeatable-group：binding 等于/前缀 dataPath 或以 `$item.` 开头时，改用当前条目数据。
+ * Resolve element binding against provided data.
  */
 const resolveBindingValue = (binding, rootData, context) => {
     if (!binding)
         return undefined;
-    const { contextBinding, contextData } = context || {};
-    let target = rootData;
-    let path = binding;
-    // repeatable-group: binding 等于 dataPath 或以其为前缀时，切换到当前条目数据
-    if (contextBinding &&
-        (binding === contextBinding || binding.startsWith(`${contextBinding}.`))) {
-        target = contextData;
-        path =
-            binding === contextBinding
-                ? ''
-                : binding.slice(contextBinding.length + 1);
-    }
-    else if (binding.startsWith('$item.')) {
-        target = contextData;
-        path = binding.slice('$item.'.length);
-    }
-    const value = readByPath(target, path);
+    const value = readByPath(rootData, binding);
     return value === undefined ? undefined : value;
 };
 exports.resolveBindingValue = resolveBindingValue;
@@ -220,7 +197,7 @@ exports.resolveBindingValue = resolveBindingValue;
  * 生成元素外层样式（绝对/弹性布局），始终返回内联样式字符串。
  */
 const buildWrapperStyle = (el, unit) => {
-    var _a, _b;
+    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;
@@ -235,65 +212,18 @@ const buildWrapperStyle = (el, unit) => {
             textAlign,
         }, unit);
     }
-    const flex = getFlexLayout(el);
-    if (!flex)
-        return '';
-    const item = flex.item || {};
-    return (0, exports.styleObjectToString)({
-        width: (0, exports.addUnit)(flex.width, unit),
-        height: (0, exports.addUnit)(flex.height, unit),
-        order: item.order,
-        flexGrow: item.flexGrow,
-        flexShrink: item.flexShrink,
-        flexBasis: item.flexBasis,
-        alignSelf: item.alignSelf,
-        boxSizing: 'border-box',
-        textAlign: (_b = el === null || el === void 0 ? void 0 : el.style) === null || _b === void 0 ? void 0 : _b.textAlign,
-    }, unit);
+    return '';
 };
 /**
  * padding 数组/数字转 CSS 缩写字符串。
  */
-const formatPadding = (padding, unit) => {
-    if (padding === undefined || padding === null)
-        return undefined;
-    if (typeof padding === 'number')
-        return (0, exports.addUnit)(padding, unit);
-    if (Array.isArray(padding)) {
-        const list = padding
-            .filter(v => v !== undefined && v !== null)
-            .map(v => (0, exports.addUnit)(v, unit));
-        if (!list.length)
-            return undefined;
-        if (list.length === 2)
-            return `${list[0]} ${list[1]}`;
-        if (list.length === 3)
-            return `${list[0]} ${list[1]} ${list[2]}`;
-        if (list.length >= 4)
-            return `${list[0]} ${list[1]} ${list[2]} ${list[3]}`;
-    }
-    return undefined;
-};
 /**
- * 构建 layout-panel 的容器样式（flex）。
+ * 构建 layout-panel 的容器样式（绝对布局容器）。
  */
 const buildPanelStyle = (el, unit) => {
-    const options = (el.container && el.container.options) || {};
     const style = {
-        display: 'flex',
-        flexDirection: options.direction || 'row',
-        flexWrap: options.wrap || 'nowrap',
-        justifyContent: options.justifyContent,
-        alignItems: options.alignItems,
-        padding: formatPadding(options.padding, unit),
+        display: 'block',
     };
-    if (options.gap && typeof options.gap === 'number') {
-        style.gap = (0, exports.addUnit)(options.gap, unit);
-    }
-    else if (options.gap && isObject(options.gap)) {
-        style.rowGap = (0, exports.addUnit)(options.gap.row, unit);
-        style.columnGap = (0, exports.addUnit)(options.gap.column, unit);
-    }
     return (0, exports.styleObjectToString)(style, unit);
 };
 /**
@@ -304,106 +234,47 @@ const normalizeElementStyle = (style, unit) => {
         return '';
     return (0, exports.styleObjectToString)(style, unit);
 };
-/** ---------- Repeatable 相关 ---------- */
-/**
- * 通过前两条 item 的布局推断间距，不足则回落 DEFAULT_GROUP_GAP。
- */
-const inferGroupGap = (group) => {
-    const items = group.items || [];
-    if (items.length >= 2) {
-        const first = (items[0].elements || []).map(getAbsLayout).find(Boolean);
-        const second = (items[1].elements || []).map(getAbsLayout).find(Boolean);
-        if (first &&
-            second &&
-            typeof first.y === 'number' &&
-            typeof second.y === 'number') {
-            return Math.abs(second.y - first.y);
-        }
-    }
-    return DEFAULT_GROUP_GAP;
-};
-/**
- * 展开 repeatable-group 为具体元素实例，并附带条目数据。
- * 优先使用设计器保存的 `items`；否则按推断间距克隆 `itemTemplate`。
- */
-const materializeRepeatableItems = (group, rootData) => {
-    const result = [];
-    const dataset = (0, exports.resolveBindingValue)(group.dataPath, rootData, {}) || [];
-    const dataList = Array.isArray(dataset) ? dataset : [];
-    const maxItems = group.maxItems ||
-        dataList.length ||
-        (group.items || []).length ||
-        (group.itemTemplate || []).length;
-    const template = (group.items && group.items[0] && group.items[0].elements) ||
-        group.itemTemplate ||
-        [];
-    const gap = inferGroupGap(group);
-    // Use saved items (from designer) first
-    if (group.items && group.items.length) {
-        group.items.slice(0, maxItems).forEach((item, idx) => {
-            const payload = dataList[idx] !== undefined ? dataList[idx] : item.data;
-            (item.elements || []).forEach(el => {
-                result.push({
-                    element: el,
-                    contextData: payload,
-                    contextBinding: group.dataPath,
-                });
-            });
-        });
-        return result;
-    }
-    // Otherwise clone from template by gap
-    dataList.slice(0, maxItems).forEach((payload, idx) => {
-        template.forEach(el => {
-            const abs = getAbsLayout(el);
-            const cloned = abs
-                ? {
-                    ...el,
-                    layout: { ...abs, y: abs.y + idx * gap },
-                }
-                : el;
-            result.push({
-                element: cloned,
-                contextData: payload,
-                contextBinding: group.dataPath,
-            });
-        });
-    });
-    return result;
+const buildTextIcon = (el, unit) => {
+    var _a, _b, _c;
+    const icon = el.icon;
+    if (!icon || icon.enable === false)
+        return undefined;
+    const style = icon.style || 'fill';
+    const baseName = el.key || el.binding || el.id;
+    let name;
+    if (style === 'dot')
+        name = 'round';
+    else if (style === 'line')
+        name = baseName ? `${baseName}-line` : undefined;
+    else
+        name = baseName || undefined;
+    if (!name)
+        return undefined;
+    const size = icon.size !== undefined && icon.size !== null
+        ? icon.size
+        : (_a = el.style) === null || _a === void 0 ? void 0 : _a.fontSize;
+    const gap = icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
+    const color = (_b = icon.color) !== null && _b !== void 0 ? _b : (typeof ((_c = el.style) === null || _c === void 0 ? void 0 : _c.color) === 'string' ? el.style.color : undefined);
+    return {
+        name: `${name}`,
+        text: `${name}`,
+        size: (0, exports.addUnit)(size, unit),
+        gap: (0, exports.addUnit)(gap, unit),
+        color: color,
+        align: icon.align || 'left',
+    };
 };
 /** ---------- 渲染树构建 ---------- */
 /**
- * 将 children 展开为渲染节点，处理 repeatable-group 展开与 mutualExcludes 隐藏。
+ * 将 children 展开为渲染节点。
  */
 const buildRenderNodes = (children, rootData, unit = 'px', context = {}) => {
     if (!Array.isArray(children))
         return [];
-    // Mark mutually exclusive bindings to hide them when repeatable-group is present
-    const excluded = new Set();
-    children.forEach(el => {
-        if (el && el.type === 'repeatable-group' && !!el.visible) {
-            (el.mutualExcludes || []).forEach(b => excluded.add(b));
-        }
-    });
     const nodes = [];
     children.forEach(el => {
         if (!el || el.visible === false)
             return;
-        if (el.type === 'repeatable-group') {
-            const instances = materializeRepeatableItems(el, rootData);
-            instances.forEach(({ element, contextData, contextBinding }) => {
-                const node = buildNode(element, rootData, unit, {
-                    ...context,
-                    contextData,
-                    contextBinding,
-                });
-                if (node)
-                    nodes.push(node);
-            });
-            return;
-        }
-        if (el.binding && excluded.has(el.binding))
-            return;
         const node = buildNode(el, rootData, unit, context);
         if (node)
             nodes.push(node);
@@ -441,6 +312,7 @@ const buildNode = (el, rootData, unit, context) => {
             contentStyle: textStyle,
             text: `${value}`,
             visible: !!el.visible,
+            icon: buildTextIcon(el, unit),
         };
     }
     if (el.type === 'image') {
@@ -477,15 +349,7 @@ const buildNode = (el, rootData, unit, context) => {
             visible: !!el.visible,
         };
     }
-    // Unknown type fallback to simple text node
-    return {
-        id: el.id,
-        type: 'text',
-        wrapperStyle,
-        contentStyle: baseStyle,
-        text: el.defaultValue || '',
-        visible: !!el.visible,
-    };
+    return null;
 };
 /**
  * 主入口：合并布局 Schema 与数据，生成供前端使用的渲染结果。
@@ -521,4 +385,3 @@ const buildRenderResult = (layoutInput, dataInput, unit = 'px') => {
     });
 };
 exports.buildRenderResult = buildRenderResult;
-__exportStar(require("./utils"), exports);

package/dist/utils.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.backgroundChange = backgroundChange;
+exports.stripLayoutBindings = stripLayoutBindings;
+exports.applyItemCollectBindings = applyItemCollectBindings;
 function backgroundChange(bg, layout) {
     const toNameArray = (name) => {
         if (Array.isArray(name))
@@ -43,16 +45,6 @@ function backgroundChange(bg, layout) {
                 children: traverse(el.children || []),
             };
         }
-        if (el.type === 'repeatable-group') {
-            return {
-                ...el,
-                itemTemplate: traverse(el.itemTemplate || []),
-                items: (el.items || []).map(item => ({
-                    ...item,
-                    elements: traverse(item.elements || []),
-                })),
-            };
-        }
         return applySpecialColor(el);
     });
     return {
@@ -62,3 +54,68 @@ function backgroundChange(bg, layout) {
         children: traverse(layout.children || []),
     };
 }
+function stripLayoutBindings(layouts = []) {
+    const targetLayouts = Array.isArray(layouts) ? layouts : [];
+    const stripElement = (el) => {
+        const { binding: _b, defaultValue: _d, ...rest } = el;
+        if (el.type === 'layout-panel') {
+            return {
+                ...rest,
+                children: (el.children || []).map(stripElement),
+            };
+        }
+        return rest;
+    };
+    return targetLayouts.map(layout => ({
+        ...layout,
+        children: (layout.children || []).map(stripElement),
+    }));
+}
+/**
+ * 应用元素数据绑定字段
+ * @param layouts 布局
+ * @param items 绑定元素数据
+ * @returns
+ */
+function applyItemCollectBindings(layouts = [], items = []) {
+    const targetLayouts = Array.isArray(layouts) ? layouts : [];
+    const metaMap = new Map();
+    const metaList = Array.isArray(items) ? items : [];
+    metaList.forEach(item => {
+        if (item && item.id !== undefined && item.id !== null) {
+            metaMap.set(String(item.id), item);
+        }
+    });
+    const assignBinding = (el) => {
+        const meta = metaMap.get(String(el.id));
+        const binding = meta && meta.bind !== undefined && meta.bind !== null
+            ? meta.bind
+            : el.binding;
+        const defaultValue = meta && meta.default !== undefined ? meta.default : el.defaultValue;
+        const key = meta && meta.key !== undefined ? meta.key : el.key;
+        const base = { ...el };
+        if (binding !== undefined)
+            base.binding = binding;
+        else
+            delete base.binding;
+        if (defaultValue !== undefined)
+            base.defaultValue = defaultValue;
+        else
+            delete base.defaultValue;
+        if (key !== undefined)
+            base.key = key;
+        else
+            delete base.key;
+        if (el.type === 'layout-panel') {
+            return {
+                ...base,
+                children: (el.children || []).map(assignBinding),
+            };
+        }
+        return base;
+    };
+    return targetLayouts.map(layout => ({
+        ...layout,
+        children: (layout.children || []).map(assignBinding),
+    }));
+}

package/index.ts

@@ -9,11 +9,10 @@ import type {
   AbsoluteLayoutDefinition,
   CardElement,
   CardElementType,
-  FlexItemLayoutDefinition,
   IconElement,
   ImageElement,
   LayoutPanelElement,
-  RepeatableGroupElement,
+  TextElement,
 } from './interface/elements';
 import type { CardLayoutInput, CardLayoutSchema } from './interface/layout';
 import type {
@@ -29,7 +28,6 @@ export * from './interface';
 
 const DEFAULT_CARD_WIDTH = 343; // 默认卡片宽度（像素）
 const DEFAULT_CARD_HEIGHT = 210; // 默认卡片高度（像素）
-const DEFAULT_GROUP_GAP = 22; // repeatable-item 默认纵向间距
 
 const DIMENSION_PROPS = new Set<string>([
   'width',
@@ -56,7 +54,6 @@ const DIMENSION_PROPS = new Set<string>([
   'gap',
   'rowGap',
   'columnGap',
-  'flexBasis',
 ]);
 
 /** ---------- 基础工具 ---------- */
@@ -136,11 +133,6 @@ const getAbsLayout = (el: CardElement): AbsoluteLayoutDefinition | null =>
     ? (el.layout as AbsoluteLayoutDefinition)
     : null;
 
-const getFlexLayout = (el: CardElement): FlexItemLayoutDefinition | null =>
-  el.layout && el.layout.mode === 'flex'
-    ? (el.layout as FlexItemLayoutDefinition)
-    : null;
-
 /** ---------- 布局与数据解析 ---------- */
 
 /**
@@ -200,9 +192,7 @@ const readByPath = (data: any, path: string): any => {
   return cursor;
 };
 /**
- * 解析元素 binding 对应的数据：
- * - 全局 binding：直接基于根数据；
- * - repeatable-group：binding 等于/前缀 dataPath 或以 `$item.` 开头时，改用当前条目数据。
+ * Resolve element binding against provided data.
  */
 export const resolveBindingValue = (
   binding: string | undefined,
@@ -210,26 +200,7 @@ export const resolveBindingValue = (
   context?: BindingContext
 ): any => {
   if (!binding) return undefined;
-  const { contextBinding, contextData } = context || {};
-  let target: any = rootData;
-  let path = binding;
-
-  // repeatable-group: binding 等于 dataPath 或以其为前缀时，切换到当前条目数据
-  if (
-    contextBinding &&
-    (binding === contextBinding || binding.startsWith(`${contextBinding}.`))
-  ) {
-    target = contextData;
-    path =
-      binding === contextBinding
-        ? ''
-        : binding.slice(contextBinding.length + 1);
-  } else if (binding.startsWith('$item.')) {
-    target = contextData;
-    path = binding.slice('$item.'.length);
-  }
-
-  const value = readByPath(target, path);
+  const value = readByPath(rootData, binding);
   return value === undefined ? undefined : value;
 };
 
@@ -257,68 +228,21 @@ const buildWrapperStyle = (el: CardElement, unit: 'px' | 'rpx'): string => {
     );
   }
 
-  const flex = getFlexLayout(el);
-  if (!flex) return '';
-  const item:any = flex.item || {};
-  return styleObjectToString(
-    {
-      width: addUnit(flex.width, unit),
-      height: addUnit(flex.height, unit),
-      order: item.order,
-      flexGrow: item.flexGrow,
-      flexShrink: item.flexShrink,
-      flexBasis: item.flexBasis,
-      alignSelf: item.alignSelf,
-      boxSizing: 'border-box',
-      textAlign: el?.style?.textAlign as string | undefined,
-    },
-    unit
-  );
+  return '';
 };
 /**
  * padding 数组/数字转 CSS 缩写字符串。
  */
-const formatPadding = (
-  padding: number | number[] | undefined,
-  unit: 'px' | 'rpx'
-) => {
-  if (padding === undefined || padding === null) return undefined;
-  if (typeof padding === 'number') return addUnit(padding, unit);
-  if (Array.isArray(padding)) {
-    const list = padding
-      .filter(v => v !== undefined && v !== null)
-      .map(v => addUnit(v as number, unit));
-    if (!list.length) return undefined;
-    if (list.length === 2) return `${list[0]} ${list[1]}`;
-    if (list.length === 3) return `${list[0]} ${list[1]} ${list[2]}`;
-    if (list.length >= 4) return `${list[0]} ${list[1]} ${list[2]} ${list[3]}`;
-  }
-  return undefined;
-};
 /**
- * 构建 layout-panel 的容器样式（flex）。
+ * 构建 layout-panel 的容器样式（绝对布局容器）。
  */
 const buildPanelStyle = (
   el: LayoutPanelElement,
   unit: 'px' | 'rpx'
 ): string => {
-  const options = (el.container && el.container.options) || {};
   const style = {
-    display: 'flex',
-    flexDirection: options.direction || 'row',
-    flexWrap: options.wrap || 'nowrap',
-    justifyContent: options.justifyContent,
-    alignItems: options.alignItems,
-    padding: formatPadding(options.padding as any, unit),
+    display: 'block',
   } as Record<string, any>;
-
-  if (options.gap && typeof options.gap === 'number') {
-    style.gap = addUnit(options.gap, unit);
-  } else if (options.gap && isObject(options.gap)) {
-    style.rowGap = addUnit((options.gap as any).row, unit);
-    style.columnGap = addUnit((options.gap as any).column, unit);
-  }
-
   return styleObjectToString(style, unit);
 };
 /**
@@ -332,91 +256,46 @@ const normalizeElementStyle = (
   return styleObjectToString(style, unit);
 };
 
-/** ---------- Repeatable 相关 ---------- */
-/**
- * 通过前两条 item 的布局推断间距，不足则回落 DEFAULT_GROUP_GAP。
- */
-const inferGroupGap = (group: RepeatableGroupElement): number => {
-  const items = group.items || [];
-  if (items.length >= 2) {
-    const first = (items[0].elements || []).map(getAbsLayout).find(Boolean);
-    const second = (items[1].elements || []).map(getAbsLayout).find(Boolean);
-    if (
-      first &&
-      second &&
-      typeof first.y === 'number' &&
-      typeof second.y === 'number'
-    ) {
-      return Math.abs(second.y - first.y);
-    }
-  }
-  return DEFAULT_GROUP_GAP;
-};
-/**
- * 展开 repeatable-group 为具体元素实例，并附带条目数据。
- * 优先使用设计器保存的 `items`；否则按推断间距克隆 `itemTemplate`。
- */
-const materializeRepeatableItems = (
-  group: RepeatableGroupElement,
-  rootData: Record<string, any>
-): { element: CardElement; contextData: any; contextBinding: string }[] => {
-  const result: {
-    element: CardElement;
-    contextData: any;
-    contextBinding: string;
-  }[] = [];
-  const dataset = resolveBindingValue(group.dataPath, rootData, {}) || [];
-  const dataList = Array.isArray(dataset) ? dataset : [];
-  const maxItems =
-    group.maxItems ||
-    dataList.length ||
-    (group.items || []).length ||
-    (group.itemTemplate || []).length;
-  const template =
-    (group.items && group.items[0] && group.items[0].elements) ||
-    group.itemTemplate ||
-    [];
-  const gap = inferGroupGap(group);
-
-  // Use saved items (from designer) first
-  if (group.items && group.items.length) {
-    group.items.slice(0, maxItems).forEach((item, idx) => {
-      const payload = dataList[idx] !== undefined ? dataList[idx] : item.data;
-      (item.elements || []).forEach(el => {
-        result.push({
-          element: el,
-          contextData: payload,
-          contextBinding: group.dataPath,
-        });
-      });
-    });
-    return result;
-  }
-
-  // Otherwise clone from template by gap
-  dataList.slice(0, maxItems).forEach((payload, idx) => {
-    template.forEach(el => {
-      const abs = getAbsLayout(el);
-      const cloned = abs
-        ? ({
-            ...el,
-            layout: { ...abs, y: abs.y + idx * gap },
-          } as CardElement)
-        : el;
-      result.push({
-        element: cloned,
-        contextData: payload,
-        contextBinding: group.dataPath,
-      });
-    });
-  });
+const buildTextIcon = (
+  el: TextElement,
+  unit: 'px' | 'rpx'
+): RenderNode['icon'] | undefined => {
+  const icon = el.icon;
+  if (!icon || icon.enable === false) return undefined;
+
+  const style = icon.style || 'fill';
+  const baseName = el.key || el.binding || el.id;
+  let name: string | undefined;
+  if (style === 'dot') name = 'round';
+  else if (style === 'line') name = baseName ? `${baseName}-line` : undefined;
+  else name = baseName || undefined;
+  if (!name) return undefined;
+
+  const size =
+    icon.size !== undefined && icon.size !== null
+      ? icon.size
+      : (el.style?.fontSize as any);
+  const gap =
+    icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
+  const color =
+    icon.color ??
+    ((typeof el.style?.color === 'string' ? el.style.color : undefined) as
+      | string
+      | undefined);
 
-  return result;
+  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',
+  };
 };
 
 /** ---------- 渲染树构建 ---------- */
 /**
- * 将 children 展开为渲染节点，处理 repeatable-group 展开与 mutualExcludes 隐藏。
+ * 将 children 展开为渲染节点。
  */
 export const buildRenderNodes = (
   children: CardElement[],
@@ -426,34 +305,9 @@ export const buildRenderNodes = (
 ): RenderNode[] => {
   if (!Array.isArray(children)) return [];
 
-  // Mark mutually exclusive bindings to hide them when repeatable-group is present
-  const excluded = new Set<string>();
-  children.forEach(el => {
-    if (el && el.type === 'repeatable-group' && !!el.visible) {
-      (el.mutualExcludes || []).forEach(b => excluded.add(b));
-    }
-  });
-
   const nodes: RenderNode[] = [];
   children.forEach(el => {
     if (!el || el.visible === false) return;
-    if (el.type === 'repeatable-group') {
-      const instances = materializeRepeatableItems(
-        el as RepeatableGroupElement,
-        rootData
-      );
-      instances.forEach(({ element, contextData, contextBinding }) => {
-        const node = buildNode(element, rootData, unit, {
-          ...context,
-          contextData,
-          contextBinding,
-        });
-        if (node) nodes.push(node);
-      });
-      return;
-    }
-
-    if (el.binding && excluded.has(el.binding)) return;
     const node = buildNode(el, rootData, unit, context);
     if (node) nodes.push(node);
   });
@@ -498,6 +352,7 @@ const buildNode = (
       contentStyle: textStyle,
       text: `${value}`,
       visible: !!el.visible,
+      icon: buildTextIcon(el as TextElement, unit),
     };
   }
 
@@ -537,26 +392,18 @@ const buildNode = (
     };
   }
 
-  if (el.type === 'custom') {
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: baseStyle,
-      visible: !!el.visible,
-    };
-  }
-
-  // Unknown type fallback to simple text node
-  return {
-    id: el.id,
-    type: 'text',
-    wrapperStyle,
-    contentStyle: baseStyle,
-    text: el.defaultValue || '',
-    visible: !!el.visible,
-  };
-};
+  if (el.type === 'custom') {
+    return {
+      id: el.id,
+      type: el.type,
+      wrapperStyle,
+      contentStyle: baseStyle,
+      visible: !!el.visible,
+    };
+  }
+
+  return null;
+};
 /**
  * 主入口：合并布局 Schema 与数据，生成供前端使用的渲染结果。
  */
@@ -609,6 +456,3 @@ export const buildRenderResult = (
     };
   });
 };
-
-
-export * from './utils'

package/interface/data/payload.ts

@@ -18,7 +18,10 @@ export interface TemplateItem {
   id: number;
   name: string;
   bind: string;
+  key?: string;
+  icon?: string;
   default?: string;
   type: 'text' | 'image';
   cate: number;
-}
+  required?: 0 | 1;
+}

package/interface/elements.ts

@@ -3,8 +3,7 @@ export type CardElementType =
   | 'image'
   | 'icon'
   | 'custom'
-  | 'layout-panel'
-  | 'repeatable-group';
+  | 'layout-panel';
 
 export interface AbsoluteLayoutDefinition {
   mode: 'absolute';
@@ -15,37 +14,31 @@ export interface AbsoluteLayoutDefinition {
   zIndex?: number;
 }
 
-export interface FlexItemOptions {
-  flexGrow?: number;
-  flexShrink?: number;
-  flexBasis?: number | string;
-  order?: number;
-  alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-}
-
-export interface FlexItemLayoutDefinition {
-  mode: 'flex';
-  item?: FlexItemOptions;
-  width?: number;
-  height?: number;
-}
-
-export type ElementLayout = AbsoluteLayoutDefinition | FlexItemLayoutDefinition;
-
 export interface CardElementBase {
   id: string;
   type: CardElementType;
-  layout: ElementLayout;
+  layout: AbsoluteLayoutDefinition;
   visible?: boolean;
   binding?: string;
   style?: Record<string, string | number | undefined>;
   defaultValue?: string;
+  key?: string;
+}
+
+export interface TextIconConfig {
+  name?: string;
+  size?: number;
+  color?: string;
+  gap?: number;
+  align?: 'left' | 'right';
+  enable?: boolean;
+  style?: 'fill' | 'dot' | 'line';
 }
 
 export interface TextElement extends CardElementBase {
   type: 'text';
   align?: 'left' | 'center' | 'right';
-  multiline?: boolean;
+  icon?: TextIconConfig;
 }
 
 export interface ImageElement extends CardElementBase {
@@ -67,44 +60,14 @@ export interface CustomElement extends CardElementBase {
 export interface LayoutPanelElement extends CardElementBase {
   type: 'layout-panel';
   container: {
-    mode: 'absolute' | 'flex';
-    options?: {
-      direction?: 'row' | 'column';
-      wrap?: 'nowrap' | 'wrap';
-      justifyContent?:
-        | 'flex-start'
-        | 'flex-end'
-        | 'center'
-        | 'space-between'
-        | 'space-around'
-        | 'space-evenly';
-      alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-      gap?: number | { row: number; column: number };
-      padding?: number | [number, number] | [number, number, number, number];
-    };
+    mode: 'absolute';
   };
   children?: CardElement[];
 }
 
-export interface RepeatableGroupItem {
-  id: string;
-  elements: CardElement[];
-  data?: Record<string, any>;
-}
-
-export interface RepeatableGroupElement extends CardElementBase {
-  type: 'repeatable-group';
-  dataPath: string;
-  itemTemplate: CardElement[];
-  items: RepeatableGroupItem[];
-  maxItems?: number;
-  mutualExcludes?: string[];
-}
-
 export type CardElement =
   | TextElement
   | ImageElement
   | IconElement
   | CustomElement
-  | LayoutPanelElement
-  | RepeatableGroupElement;
+  | LayoutPanelElement;

package/interface/render.ts

@@ -1,6 +1,15 @@
 import type { CardElementType, CardElement } from './elements';
 import type { CardLayoutInput, CardLayoutSchema } from './layout';
 
+export interface RenderNodeIcon {
+  name: string;
+  text?: string;
+  size?: string;
+  color?: string;
+  gap?: string;
+  align?: 'left' | 'right';
+}
+
 export interface RenderNode {
   id: string;
   type: CardElementType | 'text';
@@ -12,6 +21,7 @@ export interface RenderNode {
   mode?: string;
   children?: RenderNode[];
   visible?: boolean;
+  icon?: RenderNodeIcon;
 }
 
 export interface RenderPageResult {
@@ -25,11 +35,11 @@ export type RenderResult = RenderPageResult[];
 
 export interface BindingContext {
   /**
-   * 当前上下文数据的绑定前缀（repeatable-group 内为 dataPath）
+   * 当前上下文数据的绑定前缀（预留给嵌套场景）
    */
   contextBinding?: string;
   /**
-   * 当前上下文数据（repeatable-group 单条数据）
+   * 当前上下文数据（预留给嵌套场景）
    */
   contextData?: any;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "km-card-layout-core",
-  "version": "0.1.1",
-  "description": "Shared render helpers for CardMaster layout JSON (binding resolution, repeatable groups, layout normalization).",
+  "version": "0.1.3",
+  "description": "Shared render helpers for CardMaster layout JSON (binding resolution, layout normalization).",
   "main": "dist/index.js",
   "types": "types.d.ts",
   "license": "MIT",

package/types.d.ts

@@ -14,6 +14,13 @@ import type {
   RenderResult,
 } 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'
@@ -32,6 +39,15 @@ export function resolveBindingValue(
   context?: BindingContext
 ): any;
 
+export function stripLayoutBindings(
+  layouts?: CardLayoutSchema[]
+): CardLayoutSchema[];
+
+export function applyItemCollectBindings(
+  layouts: CardLayoutSchema[],
+  items?: ItemCollectMeta[]
+): CardLayoutSchema[];
+
 export function buildRenderNodes(
   children: CardElement[],
   data: Record<string, any>,

package/utils.ts

@@ -1,67 +1,136 @@
-import type { CardElement, CardLayoutSchema } from './interface';
-import { TemplateBackground } from './interface/data/payload';
-
-export function backgroundChange(
-  bg: TemplateBackground,
-  layout: CardLayoutSchema
-): CardLayoutSchema {
-  const toNameArray = (name?: string | string[]) => {
-    if (Array.isArray(name)) return name.filter(Boolean);
-    if (!name) return [];
-    return `${name}`
-      .split(',')
-      .map(n => n.trim())
-      .filter(Boolean);
-  };
-
-  const applySpecialColor = (el: CardElement): CardElement => {
-    const extras = bg.fontColorExtra || [];
-    if (!extras.length) return el;
-
-    const keys: string[] = [];
-    if (el.binding) keys.push(String(el.binding));
-    if (el.id) keys.push(String(el.id));
-    if (el.type === 'icon') keys.push('icon');
-    if (el.type === 'custom') keys.push('decor');
-
-    const matched = extras.find(sc =>
-      toNameArray(sc.name).some(n => keys.some(k => k?.startsWith(n)))
-    );
-    if (!matched) return el;
-
-    const baseStyle = { ...(el.style || {}) };
-    if (el.type === 'custom') {
-      return { ...el, style: { ...baseStyle, backgroundColor: matched.color } };
-    }
-    return { ...el, style: { ...baseStyle, color: matched.color } };
-  };
-
-  const traverse = (children: CardElement[] = []): CardElement[] =>
-    children.map(el => {
-      if (!el) return el;
-      if (el.type === 'layout-panel') {
-        return {
-          ...el,
-          children: traverse(el.children || []),
-        };
-      }
-      if (el.type === 'repeatable-group') {
-        return {
-          ...el,
-          itemTemplate: traverse(el.itemTemplate || []),
-          items: (el.items || []).map(item => ({
-            ...item,
-            elements: traverse(item.elements || []),
-          })),
-        };
-      }
-      return applySpecialColor(el);
-    });
-
-  return {
-    ...layout,
-    backgroundImage: bg.imgUrl,
-    fontColor: bg.fontColor || layout.fontColor,
-    children: traverse(layout.children || []),
-  };
-}
+import type { CardElement, CardLayoutSchema } 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,
+  layout: CardLayoutSchema
+): CardLayoutSchema {
+  const toNameArray = (name?: string | string[]) => {
+    if (Array.isArray(name)) return name.filter(Boolean);
+    if (!name) return [];
+    return `${name}`
+      .split(',')
+      .map(n => n.trim())
+      .filter(Boolean);
+  };
+
+  const applySpecialColor = (el: CardElement): CardElement => {
+    const extras = bg.fontColorExtra || [];
+    if (!extras.length) return el;
+
+    const keys: string[] = [];
+    if (el.binding) keys.push(String(el.binding));
+    if (el.id) keys.push(String(el.id));
+    if (el.type === 'icon') keys.push('icon');
+    if (el.type === 'custom') keys.push('decor');
+
+    const matched = extras.find(sc =>
+      toNameArray(sc.name).some(n => keys.some(k => k?.startsWith(n)))
+    );
+    if (!matched) return el;
+
+    const baseStyle = { ...(el.style || {}) };
+    if (el.type === 'custom') {
+      return { ...el, style: { ...baseStyle, backgroundColor: matched.color } };
+    }
+    return { ...el, style: { ...baseStyle, color: matched.color } };
+  };
+
+  const traverse = (children: CardElement[] = []): CardElement[] =>
+    children.map(el => {
+      if (!el) return el;
+      if (el.type === 'layout-panel') {
+        return {
+          ...el,
+          children: traverse(el.children || []),
+        };
+      }
+      return applySpecialColor(el);
+    });
+
+  return {
+    ...layout,
+    backgroundImage: bg.imgUrl,
+    fontColor: bg.fontColor || layout.fontColor,
+    children: traverse(layout.children || []),
+  };
+}
+
+export function stripLayoutBindings(
+  layouts: CardLayoutSchema[] = []
+): CardLayoutSchema[] {
+  const targetLayouts = Array.isArray(layouts) ? layouts : [];
+  const stripElement = (el: CardElement): CardElement => {
+    const { binding: _b, defaultValue: _d, ...rest } = el as any;
+    if (el.type === 'layout-panel') {
+      return {
+        ...rest,
+        children: (el.children || []).map(stripElement),
+      } as CardElement;
+    }
+    return rest as CardElement;
+  };
+
+  return targetLayouts.map(layout => ({
+    ...layout,
+    children: (layout.children || []).map(stripElement),
+  }));
+}
+
+/**
+ * 应用元素数据绑定字段
+ * @param layouts 布局
+ * @param items 绑定元素数据
+ * @returns 
+ */
+export function applyItemCollectBindings(
+  layouts: CardLayoutSchema[] = [],
+  items: ItemCollectMeta[] = []
+): CardLayoutSchema[] {
+  const targetLayouts = Array.isArray(layouts) ? layouts : [];
+  const metaMap = new Map<string, ItemCollectMeta>();
+  const metaList = Array.isArray(items) ? items : [];
+  metaList.forEach(item => {
+    if (item && item.id !== undefined && item.id !== null) {
+      metaMap.set(String(item.id), item);
+    }
+  });
+
+  const assignBinding = (el: CardElement): CardElement => {
+    const meta = metaMap.get(String(el.id));
+    const binding =
+      meta && meta.bind !== undefined && meta.bind !== null
+        ? meta.bind
+        : el.binding;
+    const defaultValue =
+      meta && meta.default !== undefined ? meta.default : el.defaultValue;
+    const key = meta && meta.key !== undefined ? meta.key : el.key;
+    const base: any = { ...el };
+    if (binding !== undefined) base.binding = binding;
+    else delete base.binding;
+    if (defaultValue !== undefined) base.defaultValue = defaultValue;
+    else delete base.defaultValue;
+    if (key !== undefined) base.key = key;
+    else delete base.key;
+
+    if (el.type === 'layout-panel') {
+      return {
+        ...base,
+        children: (el.children || []).map(assignBinding),
+      } as CardElement;
+    }
+    return base as CardElement;
+  };
+
+  return targetLayouts.map(layout => ({
+    ...layout,
+    children: (layout.children || []).map(assignBinding),
+  }));
+}