km-card-layout-component-miniprogram 0.1.6 → 0.1.8

package/src/components/card-layout/index.ts

@@ -1,17 +1,11 @@
 import type {
-  CardElement,
   CardLayoutInput,
   CardLayoutSchema,
-  IconElement,
-  ImageElement,
-  LayoutPanelElement,
-  TextElement,
+  RenderNode,
 } from '../../vendor/km-card-layout-core/index';
 import {
-  addUnit,
+  buildRenderResult,
   normalizeLayout,
-  resolveBindingValue,
-  styleObjectToString,
 } from '../../vendor/km-card-layout-core/index';
 import { ICON_CODE_MAP } from './icon-map';
 
@@ -19,34 +13,12 @@ type LayoutData = {
   [key: string]: any;
 };
 
-interface RenderIcon {
-  name?: string;
-  text?: string;
-  size?: string;
-  color?: string;
-  gap?: string;
-  align?: 'left' | 'right';
-}
-
-interface RenderElement {
-  id: string;
-  type: CardElement['type'];
-  wrapperStyle: string;
-  contentStyle: string;
-  name?: string;
-  text?: string;
-  src?: string;
-  mode?: string;
-  icon?: RenderIcon;
-  children?: RenderElement[];
-}
-
 interface RenderCard {
   id: string;
   cardStyle: string;
   backgroundImage?: string;
   backgroundStyle: string;
-  nodes: RenderElement[];
+  nodes: RenderNode[];
 }
 
 const ensureArray = (input: CardLayoutInput | any): CardLayoutInput => {
@@ -59,106 +31,6 @@ const pickCardId = (layout: any, idx: number) => {
   return `card-${idx}`;
 };
 
-const withUnit = (value: any, unit: 'px' | 'rpx') => addUnit(value, unit);
-
-const buildCardStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx') =>
-  styleObjectToString(
-    {
-      width: withUnit(layout.width, unit),
-      height: withUnit(layout.height, unit),
-      color: layout.fontColor,
-      borderRadius:
-        layout.borderRadius !== undefined
-          ? withUnit(layout.borderRadius, unit)
-          : undefined,
-      padding:
-        layout.padding !== undefined ? withUnit(layout.padding, unit) : undefined,
-      position: 'relative',
-      overflow: 'hidden',
-      boxSizing: 'border-box',
-      backgroundColor: 'transparent',
-    },
-    unit,
-  );
-
-const buildBackgroundStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx') =>
-  styleObjectToString(
-    {
-      zIndex: layout.backgroundZIndex,
-      borderRadius:
-        layout.borderRadius !== undefined
-          ? withUnit(layout.borderRadius, unit)
-          : undefined,
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      left: 0,
-      top: 0,
-    },
-    unit,
-  );
-
-const buildWrapperStyle = (el: CardElement, unit: 'px' | 'rpx') => {
-  if (!el.layout || el.layout.mode !== 'absolute') return '';
-  return styleObjectToString(
-    {
-      position: 'absolute',
-      left: withUnit(el.layout.x, unit),
-      top: withUnit(el.layout.y, unit),
-      width: withUnit(el.layout.width, unit),
-      height: withUnit(el.layout.height, unit),
-      zIndex: el.layout.zIndex,
-      boxSizing: 'border-box',
-      display: 'flex',
-      alignItems: 'center',
-    },
-    unit,
-  );
-};
-
-const buildPanelContentStyle = (
-  el: LayoutPanelElement,
-  unit: 'px' | 'rpx',
-) =>
-  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') =>
-  styleObjectToString(
-    {
-      ...(el.style || {}),
-      boxSizing: 'border-box',
-    },
-    unit,
-  );
-
 const mapIconGlyph = (name?: string, fallback?: string) => {
   if (!name) return fallback;
   const glyph = ICON_CODE_MAP[name];
@@ -166,153 +38,38 @@ const mapIconGlyph = (name?: string, fallback?: string) => {
   return fallback || name;
 };
 
-const buildTextIcon = (
-  el: TextElement,
-  unit: 'px' | 'rpx',
-): RenderIcon | 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 number | string | undefined);
-  const gap = icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
-  const color =
-    icon.color ?? (el.style?.color as string | undefined) ?? undefined;
+const mapRenderNode = (node: RenderNode): RenderNode => {
+  const icon = node.icon
+    ? {
+        ...node.icon,
+        text: mapIconGlyph(node.icon.name, node.icon.text),
+      }
+    : undefined;
+  const children = node.children?.map(mapRenderNode);
+  const mappedText =
+    node.type === 'icon' ? mapIconGlyph(node.name, node.text) : node.text;
 
-  const text = mapIconGlyph(name, name);
   return {
-    name,
-    text,
-    size: size !== undefined ? withUnit(size, unit) : undefined,
-    gap: gap !== undefined ? withUnit(gap, unit) : undefined,
-    color,
-    align: icon.align || 'left',
+    ...node,
+    text: mappedText,
+    icon,
+    children,
   };
 };
 
-const buildRenderNode = (
-  el: CardElement,
-  data: LayoutData,
-  unit: 'px' | 'rpx',
-): RenderElement | null => {
-  if (!el || el.visible === false) return null;
-  const wrapperStyle = buildWrapperStyle(el, unit);
-
-  if (el.type === 'layout-panel') {
-    const panel = el as LayoutPanelElement;
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: buildPanelContentStyle(panel, unit),
-      children: buildRenderNodes(panel.children || [], data, unit),
-    };
-  }
-
-  if (el.type === 'text') {
-    const textValue =
-      resolveBindingValue(el.binding, data) ?? el.defaultValue ?? '';
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: buildTextContentStyle(el as TextElement, unit),
-      text: `${textValue}`,
-      icon: buildTextIcon(el as TextElement, unit),
-    };
-  }
-
-  if (el.type === 'image') {
-    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';
-    }
-
-    const src =
-      resolveBindingValue(el.binding, data) ??
-      (el as ImageElement).defaultUrl ??
-      el.defaultValue ??
-      '';
-    const mode =
-      (el as ImageElement).fit === 'contain' ? 'aspectFit' : 'aspectFill';
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: styleObjectToString(style, unit),
-      src,
-      mode,
-    };
-  }
-
-  if (el.type === 'icon') {
-    const resolved =
-      resolveBindingValue(el.binding, data) ??
-      (el as IconElement).name ??
-      el.defaultValue ??
-      '';
-    const text = mapIconGlyph(`${resolved}`, `${resolved}`);
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: buildBaseContentStyle(el, unit),
-      name: `${resolved}`,
-      text,
-    };
-  }
-
-  if (el.type === 'custom') {
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: buildBaseContentStyle(el, unit),
-    };
-  }
-
-  return null;
-};
-
-const buildRenderNodes = (
-  children: CardElement[],
-  data: LayoutData,
-  unit: 'px' | 'rpx',
-) => {
-  if (!Array.isArray(children)) return [];
-  const nodes: RenderElement[] = [];
-  children.forEach(el => {
-    if (!el || el.visible === false) return;
-    const node = buildRenderNode(el, data, unit);
-    if (node) nodes.push(node);
-  });
-  return nodes;
-};
-
-const buildCards = (
-  layouts: CardLayoutInput,
-  data: LayoutData,
-  unit: 'px' | 'rpx',
-) =>
-  layouts.map(layout => ({
-    id: layout.name || (layout as any).id || '',
-    cardStyle: buildCardStyle(layout, unit),
-    backgroundImage: layout.backgroundImage || '',
-    backgroundStyle: buildBackgroundStyle(layout, unit),
-    nodes: buildRenderNodes(layout.children || [], data, unit),
+const mapRenderTree = (nodes: RenderNode[]) =>
+  Array.isArray(nodes) ? nodes.map(mapRenderNode) : [];
+
+const buildCards = (layouts: CardLayoutSchema[], data: LayoutData) => {
+  const renders = buildRenderResult(layouts as CardLayoutInput, data, 'rpx');
+  return renders.map((render, idx) => ({
+    id: pickCardId(layouts[idx], idx),
+    cardStyle: render.cardStyle,
+    backgroundImage: render.backgroundImage || '',
+    backgroundStyle: render.backgroundStyle,
+    nodes: mapRenderTree(render.renderTree),
   }));
+};
 
 Component({
   options: {
@@ -358,12 +115,7 @@ Component({
       }
 
       const normalizedLayouts = normalizeLayout(layoutInput);
-      const cards = buildCards(normalizedLayouts, dataInput, 'rpx').map(
-        (card, idx) => ({
-          ...card,
-          id: pickCardId(layoutInput[idx], idx),
-        }),
-      );
+      const cards = buildCards(normalizedLayouts, dataInput);
 
       this.setData({ cards });
     },

package/src/components/card-layout/index.wxml

@@ -62,15 +62,23 @@
     <view class="km-node km-node--text" style="{{node.wrapperStyle}}">
       <view class="km-node__text" style="{{node.contentStyle}}">
         <block wx:if="{{node.icon && node.icon.name}}">
-          <view
-            class="km-node__text-content"
-            style="flex-direction: {{node.icon.align === 'right' ? 'row-reverse' : 'row'}};">
-            <text
-              class="km-node__text-icon icon"
-              style="font-size: {{node.icon.size || '16px'}}; color: {{node.icon.color || ''}}; margin-right: {{node.icon.align !== 'right' ? (node.icon.gap || '') : ''}}; margin-left: {{node.icon.align === 'right' ? (node.icon.gap || '') : ''}};">
-              {{node.icon.text || node.icon.name || ''}}
-            </text>
-            <text class="km-node__text-value">{{node.text || ''}}</text>
+          <view class="km-node__text-content">
+            <block wx:if="{{node.icon.align === 'right'}}">
+              <text class="km-node__text-value">{{node.text || ''}}</text>
+              <view style="{{node.icon.wrapperStyle}}">
+                <text
+                class="km-node__text-icon icon"
+                style="font-size: {{node.icon.size || '16px'}}; color: {{node.icon.color || ''}}; margin-right: {{node.icon.gap || ''}};">{{node.icon.text || node.icon.name || ''}}</text>
+              </view>
+            </block>
+            <block wx:else>
+              <view style="{{node.icon.wrapperStyle}}">
+                <text
+                class="km-node__text-icon icon"
+                style="font-size: {{node.icon.size || '16px'}}; color: {{node.icon.color || ''}}; margin-right: {{node.icon.gap || ''}};">{{node.icon.text || node.icon.name || ''}}</text>
+              </view>
+              <text class="km-node__text-value">{{node.text || ''}}</text>
+            </block>
           </view>
         </block>
         <block wx:else>

package/src/components/card-layout/index.wxss

@@ -78,25 +78,28 @@
 .km-node__text {
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
+  display: block;
+  box-sizing: border-box;
+  text-align: inherit;
 }
 
 .km-node__text-content {
-  display: inline-flex;
-  align-items: center;
+  display: inline-block;
+  vertical-align: middle;
+  height: 100%;
 }
 
 .km-node__text-value {
   display: inline-block;
   white-space: pre-wrap;
   word-break: break-word;
+  vertical-align: middle;
+}
+.km-node--text{
+  /* 溢出隐藏 */
 }
-
 .km-node--text text {
-  display: block;
-  white-space: pre-wrap;
-  word-break: break-word;
+  display: inline;
 }
 
 /* ICON */

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

@@ -0,0 +1,84 @@
+import type { CardElement, CardLayoutSchema } from './interface';
+import type {
+  TemplateBackground,
+  TemplateItem,
+} from './interface/data/payload';
+
+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),
+  }));
+}
+
+export function applyItemCollectBindings(
+  layouts: CardLayoutSchema[] = [],
+  items: TemplateItem[] = []
+): CardLayoutSchema[] {
+  const targetLayouts = Array.isArray(layouts) ? layouts : [];
+  const metaMap = new Map<string, TemplateItem>();
+  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),
+  }));
+}
+
+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)));
+}

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

@@ -0,0 +1,38 @@
+import { isObject } from './helpers';
+
+const pathToSegments = (path: string): string[] =>
+  `${path || ''}`
+    .replace(/\[(\d+)\]/g, '.$1')
+    .split('.')
+    .map(p => p.trim())
+    .filter(Boolean);
+
+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 const resolveBindingValue = (
+  binding: string | undefined,
+  rootData: Record<string, any>,
+  context?: Record<string, any>
+): any => {
+  if (!binding) return undefined;
+  const value = readByPath(rootData, binding);
+  return value === undefined ? undefined : value;
+};

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

@@ -0,0 +1,76 @@
+const DIMENSION_PROPS = new Set([
+  'width',
+  'height',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'padding',
+  'paddingTop',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  'margin',
+  'marginTop',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
+  'fontSize',
+  'lineHeight',
+  'borderRadius',
+  'borderWidth',
+  'letterSpacing',
+  'gap',
+  'rowGap',
+  'columnGap',
+]);
+
+export const toNumber = (value: unknown): number | undefined => {
+  const num = Number(value);
+  return Number.isFinite(num) ? num : undefined;
+};
+
+const toKebab = (key: string): string =>
+  key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+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 isObject = (
+  val: unknown
+): val is Record<string, any> | any[] =>
+  Boolean(val) && typeof val === 'object';