km-card-layout-core 0.1.0 → 0.1.3

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,8 +1,8 @@
 {
   "name": "km-card-layout-core",
-  "version": "0.1.0",
-  "description": "Shared render helpers for CardMaster layout JSON (binding resolution, repeatable groups, layout normalization).",
-  "main": "index.js",
+  "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",
   "scripts": {

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>,