km-card-layout-component-miniprogram 0.1.5 → 0.1.7

package/src/vendor/km-card-layout-core/index.ts

@@ -5,167 +5,29 @@
  * - 职责：将布局 Schema 与业务数据合成为带内联样式的渲染树，外层只需将节点映射到各端组件。
  */
 
-/** ---------- 类型定义 ---------- */
-
-export type CardElementType =
-  | 'text'
-  | 'image'
-  | 'icon'
-  | 'custom'
-  | 'layout-panel'
-  | 'repeatable-group';
-
-export interface AbsoluteLayoutDefinition {
-  mode: 'absolute';
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  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;
-  visible?: boolean;
-  binding?: string;
-  style?: Record<string, string | number | undefined>;
-  defaultValue?: string;
-}
-
-export interface TextElement extends CardElementBase {
-  type: 'text';
-  align?: 'left' | 'center' | 'right';
-  multiline?: boolean;
-}
-
-export interface ImageElement extends CardElementBase {
-  type: 'image';
-  alt?: string;
-  fit?: 'cover' | 'contain';
-  defaultUrl?: string;
-}
-
-export interface IconElement extends CardElementBase {
-  type: 'icon';
-  name?: string;
-}
-
-export interface CustomElement extends CardElementBase {
-  type: 'custom';
-}
-
-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];
-    };
-  };
-  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;
-
-export interface CardLayoutSchema {
-  name?: string;
-  container: {
-    mode: 'absolute';
-  };
-  width: number;
-  height: number;
-  backgroundImage?: string;
-  backgroundZIndex?: number;
-  fontColor?: string;
-  borderRadius?: number;
-  padding?: number;
-  children: CardElement[];
-  thumbnail?: string;
-}
-
-export interface RenderNode {
-  id: string;
-  type: CardElementType | 'text';
-  wrapperStyle: string;
-  contentStyle: string;
-  name?: string;
-  text?: string;
-  src?: string;
-  mode?: string;
-  children?: RenderNode[];
-  visible?: boolean;
-}
-
-export interface RenderPageResult {
-  renderTree: RenderNode[];
-  cardStyle: string;
-  backgroundImage: string;
-  backgroundStyle: string;
-}
-
-export type RenderResult = RenderPageResult[];
+import type {
+  AbsoluteLayoutDefinition,
+  CardElement,
+  CardElementType,
+  IconElement,
+  ImageElement,
+  LayoutPanelElement,
+  TextElement,
+} from './interface/elements';
+import type { CardLayoutInput, CardLayoutSchema } from './interface/layout';
+import type {
+  BindingContext,
+  RenderNode,
+  RenderPageResult,
+  RenderResult,
+} from './interface/render';
+
+export * from './interface/index';
 
 /** ---------- 常量 ---------- */
 
 const DEFAULT_CARD_WIDTH = 343; // 默认卡片宽度（像素）
 const DEFAULT_CARD_HEIGHT = 210; // 默认卡片高度（像素）
-const DEFAULT_GROUP_GAP = 22; // repeatable-item 默认纵向间距
 
 const DIMENSION_PROPS = new Set<string>([
   'width',
@@ -192,7 +54,6 @@ const DIMENSION_PROPS = new Set<string>([
   'gap',
   'rowGap',
   'columnGap',
-  'flexBasis',
 ]);
 
 /** ---------- 基础工具 ---------- */
@@ -212,44 +73,44 @@ const toKebab = (key: string): string =>
  * 数字追加单位，非数字原样转字符串。
  * 数字追加单位，非数字原样转字符串。
  */
-export const addUnit = (
-  value: string | number | undefined | null,
-  unit: 'px' | 'rpx'
-): string | undefined => {
-  if (value === undefined || value === null || value === '') return undefined;
-  if (typeof value === 'number') {
-    const ratio = unit === 'rpx' ? 2 : 1;
-    return `${value * ratio}${unit}`;
-  }
-  if (typeof value === 'string') {
-    const parsed = Number(value);
-    if (Number.isFinite(parsed)) {
-      const ratio = unit === 'rpx' ? 2 : 1;
-      return `${parsed * ratio}${unit}`;
-    }
-  }
-  return `${value}`;
-};
+export const addUnit = (
+  value: string | number | undefined | null,
+  unit: 'px' | 'rpx'
+): string | undefined => {
+  if (value === undefined || value === null || value === '') return undefined;
+  if (typeof value === 'number') {
+    const ratio = unit === 'rpx' ? 2 : 1;
+    return `${value * ratio}${unit}`;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) {
+      const ratio = unit === 'rpx' ? 2 : 1;
+      return `${parsed * ratio}${unit}`;
+    }
+  }
+  return `${value}`;
+};
 /**
  * 样式对象转内联样式字符串，对需要单位的字段自动补单位。
  */
-export const styleObjectToString = (
-  style?: Record<string, any>,
-  unit: 'px' | 'rpx' = 'px'
-): string => {
-  if (!style) return '';
-  const pairs: string[] = [];
-  Object.keys(style).forEach(key => {
-    const value = style[key];
-    if (value === undefined || value === null || value === '') return;
-    const useUnit = DIMENSION_PROPS.has(key)
-      ? addUnit(value as any, unit)
-      : value;
-    if (useUnit === undefined || useUnit === null || useUnit === '') return;
-    pairs.push(`${toKebab(key)}:${useUnit}`);
-  });
-  return pairs.join(';');
-};
+export const styleObjectToString = (
+  style?: Record<string, any>,
+  unit: 'px' | 'rpx' = 'px'
+): string => {
+  if (!style) return '';
+  const pairs: string[] = [];
+  Object.keys(style).forEach(key => {
+    const value = style[key];
+    if (value === undefined || value === null || value === '') return;
+    const useUnit = DIMENSION_PROPS.has(key)
+      ? addUnit(value as any, unit)
+      : value;
+    if (useUnit === undefined || useUnit === null || useUnit === '') return;
+    pairs.push(`${toKebab(key)}:${useUnit}`);
+  });
+  return pairs.join(';');
+};
 
 /**
  * 容错 JSON 解析：字符串用 JSON.parse，其他保持原样或返回 null。
@@ -272,18 +133,11 @@ 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;
-
 /** ---------- 布局与数据解析 ---------- */
 
 /**
  * 归一化布局输入（对象或 JSON 字符串），补齐宽高/容器/children 默认值。
  */
-export type CardLayoutInput = CardLayoutSchema[];
-
 export const normalizeLayout = (
   layout: CardLayoutInput
 ): CardLayoutSchema[] => {
@@ -318,41 +172,27 @@ const pathToSegments = (path: string): string[] =>
 /**
  * 按路径访问对象/数组，缺失时返回 undefined/null。
  */
-const readByPath = (data: any, path: string): any => {
-  if (path === undefined || path === null || path === '') return data;
-  const segments = pathToSegments(path);
-  let cursor: any = data;
-  for (let i = 0; i < segments.length; i += 1) {
-    if (!isObject(cursor) && !Array.isArray(cursor)) return undefined;
-    const key = segments[i];
-    if (Array.isArray(cursor)) {
-      const idx = Number(key);
-      cursor = Number.isNaN(idx) ? undefined : cursor[idx];
-    } else {
-      cursor = (cursor as Record<string, any>)[key];
-    }
-    if (cursor === undefined || cursor === null) {
-      return cursor;
-    }
-  }
-  return cursor;
+const readByPath = (data: any, path: string): any => {
+  if (path === undefined || path === null || path === '') return data;
+  const segments = pathToSegments(path);
+  let cursor: any = data;
+  for (let i = 0; i < segments.length; i += 1) {
+    if (!isObject(cursor) && !Array.isArray(cursor)) return undefined;
+    const key = segments[i];
+    if (Array.isArray(cursor)) {
+      const idx = Number(key);
+      cursor = Number.isNaN(idx) ? undefined : cursor[idx];
+    } else {
+      cursor = (cursor as Record<string, any>)[key];
+    }
+    if (cursor === undefined || cursor === null) {
+      return cursor;
+    }
+  }
+  return cursor;
 };
-
-export interface BindingContext {
-  /**
-   * 当前上下文数据的绑定前缀（repeatable-group 内为 dataPath）。
-   *
-   */
-  contextBinding?: string;
-  /**
-   * 当前上下文数据（repeatable-group 单条数据）。
-   */
-  contextData?: any;
-}
 /**
- * 解析元素 binding 对应的数据：
- * - 全局 binding：直接基于根数据；
- * - repeatable-group：binding 等于/前缀 dataPath 或以 `$item.` 开头时，改用当前条目数据。
+ * Resolve element binding against provided data.
  */
 export const resolveBindingValue = (
   binding: string | undefined,
@@ -360,122 +200,49 @@ 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;
 };
 
 /** ---------- 样式构建 ---------- */
 
-const justifyByTextAlign = (
-  textAlign?: string
-): 'flex-start' | 'center' | 'flex-end' => {
-  if (textAlign === 'center') return 'center';
-  if (textAlign === 'right') return 'flex-end';
-  return 'flex-start';
-};
-/**
- * 生成元素外层样式（绝对/弹性布局），始终返回内联样式字符串。
- */
-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
-    );
-  }
-
-  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
-  );
-};
 /**
- * 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]}`;
+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 undefined;
+
+  return '';
 };
 /**
- * 构建 layout-panel 的容器样式（flex）。
+ * padding 数组/数字转 CSS 缩写字符串。
+ */
+/**
+ * 构建 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);
 };
 /**
@@ -489,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[],
@@ -583,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);
   });
@@ -655,6 +352,7 @@ const buildNode = (
       contentStyle: textStyle,
       text: `${value}`,
       visible: !!el.visible,
+      icon: buildTextIcon(el as TextElement, unit),
     };
   }
 
@@ -677,22 +375,22 @@ const buildNode = (
     };
   }
 
-  if (el.type === 'icon') {
-    const name =
-      resolveBindingValue(el.binding, rootData, context) ??
-      (el as IconElement).name ??
-      el.defaultValue ??
-      '';
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: baseStyle,
-      name: `${name}`,
-      text: `${name}`,
-      visible: !!el.visible,
-    };
-  }
+  if (el.type === 'icon') {
+    const name =
+      resolveBindingValue(el.binding, rootData, context) ??
+      (el as IconElement).name ??
+      el.defaultValue ??
+      '';
+    return {
+      id: el.id,
+      type: el.type,
+      wrapperStyle,
+      contentStyle: baseStyle,
+      name: `${name}`,
+      text: `${name}`,
+      visible: !!el.visible,
+    };
+  }
 
   if (el.type === 'custom') {
     return {
@@ -704,15 +402,7 @@ const buildNode = (
     };
   }
 
-  // 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 与数据，生成供前端使用的渲染结果。
@@ -766,3 +456,5 @@ export const buildRenderResult = (
     };
   });
 };
+
+export * from './utils';