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

package/src/vendor/km-card-layout-core/ops/changeBackground.ts

@@ -0,0 +1,179 @@
+import type { CardElement, CardLayoutSchema } from '../interface';
+import type { TemplateBackground } from '../interface/data/payload';
+
+type BackgroundColorMap = {
+  name: string | string[];
+  color: string;
+};
+
+type CoreBackgroundConfig = {
+  id?: string | number;
+  name?: string;
+  imageUrl?: string;
+  mainColor?: string;
+  specialColors?: BackgroundColorMap[];
+};
+
+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);
+};
+
+export function backgroundChange(
+  bg: TemplateBackground,
+  layout: CardLayoutSchema
+): CardLayoutSchema {
+  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 const DEFAULT_DECOR_COLOR = '#94a3b8';
+
+export const resolveSpecialStyle = (
+  element: CardElement,
+  background?: CoreBackgroundConfig | null
+) => {
+  if (!background) return {};
+  const keys: string[] = [];
+  if (element.binding) keys.push(String(element.binding));
+  if (element.id) keys.push(String(element.id));
+  if (element.type === 'icon') keys.push('icon');
+  if (element.type === 'custom') keys.push('decor');
+
+  const matched = background.specialColors?.find(sc => {
+    const names = toNameArray(sc.name);
+    return names.some(n => keys.some(k => k?.startsWith(n)));
+  });
+
+  if (!matched) return {};
+  if (element.type === 'custom') {
+    return { backgroundColor: matched.color };
+  }
+  return { color: matched.color };
+};
+
+export const applySpecialStyle = (
+  el: CardElement,
+  background: CoreBackgroundConfig | null = null,
+  options: { overrideExisting?: boolean; defaultDecorColor?: string } = {}
+): CardElement => {
+  const specialStyle = resolveSpecialStyle(el, background);
+  const baseStyle = { ...(el.style || {}) };
+  const isCustom = el.type === 'custom';
+  const hasExplicit = isCustom
+    ? Boolean(baseStyle.backgroundColor || baseStyle.background)
+    : baseStyle.color !== undefined && baseStyle.color !== null;
+
+  const overrideExisting = options.overrideExisting === true;
+  const hasSpecial = Object.keys(specialStyle).length > 0;
+  const defaultDecorColor = options.defaultDecorColor || DEFAULT_DECOR_COLOR;
+
+  if (hasSpecial) {
+    if (hasExplicit && !overrideExisting) return el;
+    return { ...el, style: { ...baseStyle, ...specialStyle } };
+  }
+
+  if (overrideExisting && hasExplicit) {
+    const nextStyle = { ...baseStyle };
+    if (isCustom) {
+      nextStyle.backgroundColor = background?.mainColor || defaultDecorColor;
+    } else {
+      delete nextStyle.color;
+    }
+    return { ...el, style: nextStyle };
+  }
+
+  return el;
+};
+
+export const applyBackground = (
+  layout: CardLayoutSchema,
+  background: CoreBackgroundConfig,
+  _options: {
+    previousBackground?: CoreBackgroundConfig | null;
+    defaultDecorColor?: string;
+  } = {}
+): CardLayoutSchema => {
+  const bgId = Number(background.id);
+  const payload: TemplateBackground = {
+    id: Number.isFinite(bgId) ? bgId : 0,
+    name: background.name!,
+    imgUrl: background.imageUrl!,
+    fontColor: background.mainColor,
+    fontColorExtra:
+      background.specialColors?.map(sc => ({
+        name: sc.name,
+        color: sc.color,
+      })) || [],
+  };
+  return backgroundChange(payload, layout);
+};
+
+export const updateElementsStyle = (
+  layout: CardLayoutSchema,
+  targetIds: string[],
+  updates: Record<string, any>
+): CardLayoutSchema => {
+  const targets = new Set(targetIds);
+  return {
+    ...layout,
+    children: layout.children.map(el =>
+      targets.has(el.id)
+        ? { ...el, style: { ...(el.style || {}), ...updates } }
+        : el
+    ),
+  };
+};
+
+export const setElementVisible = (
+  layout: CardLayoutSchema[],
+  key: string,
+  visible: boolean
+): CardLayoutSchema[] => {
+  return layout.map(la => ({
+    ...la,
+    children: la.children.map(el => (el.key === key ? { ...el, visible } : el)),
+  }));
+};

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

@@ -0,0 +1,144 @@
+import { addUnit } from '../helpers';
+import { getAbsLayout } from '../layout';
+import type {
+  CardElement,
+  CardLayoutSchema,
+  IconElement,
+  ImageElement,
+  LayoutPanelElement,
+  TextElement,
+} from '../interface';
+
+export const buildWrapperStyle = (el: CardElement, unit: 'px' | 'rpx' = 'px') => {
+  const abs = getAbsLayout(el);
+  if (!abs) return {};
+  return {
+    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',
+  };
+};
+
+export const buildCardStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx' = 'px') => ({
+  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',
+});
+
+export const buildBackgroundStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx' = 'px') => ({
+  zIndex: layout.backgroundZIndex,
+  borderRadius:
+    layout.borderRadius !== undefined
+      ? addUnit(layout.borderRadius, unit)
+      : undefined,
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  left: 0,
+  top: 0,
+});
+
+export const buildBaseContentStyle = (el: CardElement) => ({
+  ...(el.style || {}),
+  boxSizing: 'border-box',
+});
+
+export const buildPanelContentStyle = (el: LayoutPanelElement, unit: 'px' | 'rpx' = 'px') => ({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  display: 'block',
+  boxSizing: 'border-box',
+  ...(el.style || {}),
+});
+
+export const buildTextContentStyle = (el: TextElement, unit: 'px' | 'rpx' = 'px') => {
+  const textAlign =
+    (el.style?.textAlign as string | undefined) || el.align || undefined;
+  const style: Record<string, any> = {
+    ...(el.style || {}),
+    fontSize: addUnit(el.style?.fontSize, unit),
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    lineHeight:
+      el.style?.lineHeight !== undefined && el.style?.lineHeight !== null
+        ? addUnit(el.style.lineHeight as any, unit)
+        : '1',
+  };
+  if (textAlign) style.textAlign = textAlign;
+  return style;
+};
+
+export const buildImageContentStyle = (el: ImageElement) => {
+  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 style;
+};
+
+export const getTextValue = (el: TextElement) =>
+  el.defaultValue !== undefined && el.defaultValue !== null
+    ? `${el.defaultValue}`
+    : '';
+
+export const getImageSrc = (el: ImageElement) =>
+  el.defaultUrl || el.defaultValue || '';
+
+export const getIconName = (el: IconElement) =>
+  (el.name || el.defaultValue || '') as string;
+
+export const buildTextIconMeta = (el: TextElement, unit: 'px' | 'rpx' = 'px') => {
+  const icon = el.icon;
+  const enabled = icon?.enable === true;
+  if (!icon || !enabled) return null;
+
+  const style = icon.style || 'fill';
+  const baseName = icon.name || 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 null;
+
+  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 {
+    name: `${name}`,
+    size: addUnit(size as any, unit),
+    gap: addUnit(gap as any, unit),
+    color,
+    align: icon.align || 'left',
+    wrapperStyle: {
+      height:
+        el.style?.lineHeight !== undefined && el.style?.lineHeight !== null
+          ? addUnit(el.style.lineHeight, unit)
+          : el.style?.fontSize,
+    },
+  };
+};

package/src/vendor/km-card-layout-core/render/tool.ts

@@ -0,0 +1,21 @@
+import { CardLayoutSchema, TemplateItem } from '../interface';
+import { backgroundChange, setElementVisible } from '../ops/changeBackground';
+import { Config } from '../types';
+import { applyItemCollectBindings } from '../utils';
+
+export function buildRenderData(
+  layout: CardLayoutSchema[],
+  items: TemplateItem[],
+  config: Config
+): CardLayoutSchema[] {
+  // 绑定数据
+  let renderLayout = applyItemCollectBindings(layout, items);
+  // 设置显示逻辑
+  renderLayout = setElementVisible(renderLayout, 'image', config.showAvatar);
+  renderLayout = setElementVisible(renderLayout, 'logo', config.showLogo);
+  // 设置背景
+  renderLayout = renderLayout.map((la, index) =>
+    config.currentBg[index] ? backgroundChange(config.currentBg[index], la) : la
+  );
+  return renderLayout;
+}

package/src/vendor/km-card-layout-core/types.d.ts

@@ -10,10 +10,19 @@ import type {
   CardElement,
   CardLayoutInput,
   CardLayoutSchema,
-  RenderNode,
-  RenderResult,
+  TemplateItem,
+  TemplateBackground
 } from './interface';
 
+export type Config = {
+  showAvatar: boolean;
+  showLogo: boolean;
+  /**
+   * 当前背景 (0 为正面背景 1 为背面背景)
+   */
+  currentBg: TemplateBackground[];
+};
+
 export function addUnit(
   value: string | number | undefined | null,
   unit: 'px' | 'rpx'
@@ -24,8 +33,37 @@ export function styleObjectToString(
   unit?: 'px' | 'rpx'
 ): string;
 
+export function toNumber(value: unknown): number | undefined;
+
+export function isObject(
+  val: unknown
+): val is Record<string, any> | any[];
+
 export function normalizeLayout(layout: CardLayoutInput): CardLayoutSchema[];
 
+export function sanitizeLayout(layout: CardLayoutSchema): CardLayoutSchema;
+
+export function sanitizeElement(element: CardElement): CardElement;
+
+export function roundToInt(value: number): number;
+
+export function getAbsLayout(
+  el: CardElement
+): import('./interface/elements').AbsoluteLayoutDefinition | null;
+
+export function collectBindings(elements?: CardElement[]): string[];
+
+export function normalizeId(
+  id?: string | number | null
+): number | string | undefined;
+
+export function parseLayout(input: unknown): CardLayoutSchema | null;
+
+export function areChildrenEqual(
+  a?: CardLayoutSchema | null,
+  b?: CardLayoutSchema | null
+): boolean;
+
 export function resolveBindingValue(
   binding: string | undefined,
   rootData: Record<string, any>,
@@ -38,22 +76,135 @@ export function stripLayoutBindings(
 
 export function applyItemCollectBindings(
   layouts: CardLayoutSchema[],
-  items?: TemplateItem[]
+  items?: import('./interface/data/payload').TemplateItem[]
 ): CardLayoutSchema[];
 
-export function buildRenderNodes(
-  children: CardElement[],
-  data: Record<string, any>,
-  unit?: 'px' | 'rpx',
-  context?: BindingContext
-): RenderNode[];
+export function getTemplateItems(
+  ids: string,
+  items: import('./interface/data/payload').TemplateItem[]
+): import('./interface/data/payload').TemplateItem[];
+
+export function getTemplateBackgrounds(
+  ids: string,
+  items: import('./interface/data/payload').TemplateBackground[]
+): import('./interface/data/payload').TemplateBackground[];
+
+export function backgroundChange(
+  bg: import('./interface/data/payload').TemplateBackground,
+  layout: CardLayoutSchema
+): CardLayoutSchema;
+
+export const DEFAULT_DECOR_COLOR: string;
+
+export function resolveSpecialStyle(
+  element: CardElement,
+  background?: {
+    id?: string | number;
+    name?: string;
+    imageUrl?: string;
+    mainColor?: string;
+    specialColors?: { name: string | string[]; color: string }[];
+  } | null
+): Record<string, any>;
+
+export function applySpecialStyle(
+  element: CardElement,
+  background?: {
+    id?: string | number;
+    name?: string;
+    imageUrl?: string;
+    mainColor?: string;
+    specialColors?: { name: string | string[]; color: string }[];
+  } | null,
+  options?: { overrideExisting?: boolean; defaultDecorColor?: string }
+): CardElement;
+
+export function applyBackground(
+  layout: CardLayoutSchema,
+  background: {
+    id?: string | number;
+    name?: string;
+    imageUrl?: string;
+    mainColor?: string;
+    specialColors?: { name: string | string[]; color: string }[];
+  },
+  options?: {
+    previousBackground?: {
+      id?: string | number;
+      name?: string;
+      imageUrl?: string;
+      mainColor?: string;
+      specialColors?: { name: string | string[]; color: string }[];
+    } | null;
+    defaultDecorColor?: string;
+  }
+): CardLayoutSchema;
+
+export function updateElementsStyle(
+  layout: CardLayoutSchema,
+  targetIds: string[],
+  updates: Record<string, any>
+): CardLayoutSchema;
 
-export function buildRenderResult(
-  layout: CardLayoutInput,
-  data: Record<string, any>,
+export function buildWrapperStyle(
+  el: CardElement,
   unit?: 'px' | 'rpx'
-): RenderResult;
+): Record<string, any>;
 
-export function getTemplateItems(ids: string, items: TemplateItem[]): TemplateItem[];
+export function buildCardStyle(
+  layout: CardLayoutSchema,
+  unit?: 'px' | 'rpx'
+): Record<string, any>;
+
+export function buildBackgroundStyle(
+  layout: CardLayoutSchema,
+  unit?: 'px' | 'rpx'
+): Record<string, any>;
+
+export function buildBaseContentStyle(
+  el: CardElement
+): Record<string, any>;
+
+export function buildPanelContentStyle(
+  el: import('./interface/elements').LayoutPanelElement,
+  unit?: 'px' | 'rpx'
+): Record<string, any>;
+
+export function buildTextContentStyle(
+  el: import('./interface/elements').TextElement,
+  unit?: 'px' | 'rpx'
+): Record<string, any>;
+
+export function buildImageContentStyle(
+  el: import('./interface/elements').ImageElement
+): Record<string, any>;
 
-export function getTemplateBackgrounds(ids: string, items: TemplateBackground[]) : TemplateBackground[];
+export function getTextValue(
+  el: import('./interface/elements').TextElement
+): string;
+
+export function getImageSrc(
+  el: import('./interface/elements').ImageElement
+): string;
+
+export function getIconName(
+  el: import('./interface/elements').IconElement
+): string;
+
+export function buildTextIconMeta(
+  el: import('./interface/elements').TextElement,
+  unit?: 'px' | 'rpx'
+): {
+  name: string;
+  size?: string;
+  gap?: string;
+  color?: string;
+  align: 'left' | 'right';
+  wrapperStyle?: Record<string, any>;
+} | null;
+
+export function buildRenderData (
+  layout: CardLayoutSchema[],
+  items: TemplateItem[],
+  config: Config
+): CardLayoutSchema[];

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

@@ -1,141 +1,13 @@
-import type { CardElement, CardLayoutSchema, TemplateItem } 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 || []),
-        };
-      }
-      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: 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)));
-}
+
+
+export * from './bindings';
+export {
+  backgroundChange,
+  applySpecialStyle,
+  applyBackground,
+  updateElementsStyle,
+  resolveSpecialStyle,
+  DEFAULT_DECOR_COLOR,
+} from './ops/changeBackground';
+
+