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

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

@@ -1,25 +1,33 @@
 import type {
+  CardElement,
   CardLayoutInput,
   CardLayoutSchema,
-  RenderNode,
+  LayoutPanelElement,
 } from '../../vendor/km-card-layout-core/index';
 import {
-  buildRenderResult,
+  buildBackgroundStyle,
+  buildCardStyle,
+  buildPanelContentStyle,
+  buildWrapperStyle,
   normalizeLayout,
+  styleObjectToString,
 } from '../../vendor/km-card-layout-core/index';
-import { ICON_CODE_MAP } from './icon-map';
 
-type LayoutData = {
-  [key: string]: any;
+type PanelElement = LayoutPanelElement & {
+  wrapperStyle: string;
+  contentStyle: string;
+  children?: RenderElement[];
 };
 
-interface RenderCard {
+type RenderElement = CardElement | PanelElement;
+
+type RenderCard = {
   id: string;
   cardStyle: string;
   backgroundImage?: string;
   backgroundStyle: string;
-  nodes: RenderNode[];
-}
+  elements: RenderElement[];
+};
 
 const ensureArray = (input: CardLayoutInput | any): CardLayoutInput => {
   if (!input) return [];
@@ -31,43 +39,27 @@ const pickCardId = (layout: any, idx: number) => {
   return `card-${idx}`;
 };
 
-const mapIconGlyph = (name?: string, fallback?: string) => {
-  if (!name) return fallback;
-  const glyph = ICON_CODE_MAP[name];
-  if (glyph) return String.fromCharCode(parseInt(glyph, 16));
-  return fallback || name;
-};
-
-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;
-
-  return {
-    ...node,
-    text: mappedText,
-    icon,
-    children,
-  };
-};
-
-const mapRenderTree = (nodes: RenderNode[]) =>
-  Array.isArray(nodes) ? nodes.map(mapRenderNode) : [];
+const decorateElements = (children: CardElement[] = []): RenderElement[] =>
+  (children || []).map(el => {
+    if (el.type === 'layout-panel') {
+      const panel = el as LayoutPanelElement;
+      return {
+        ...panel,
+        wrapperStyle: styleObjectToString(buildWrapperStyle(panel, 'rpx'), 'rpx'),
+        contentStyle: styleObjectToString(buildPanelContentStyle(panel, 'rpx'), 'rpx'),
+        children: decorateElements(panel.children || []),
+      };
+    }
+    return el;
+  });
 
-const buildCards = (layouts: CardLayoutSchema[], data: LayoutData) => {
-  const renders = buildRenderResult(layouts as CardLayoutInput, data, 'rpx');
-  return renders.map((render, idx) => ({
+const buildCards = (layouts: CardLayoutSchema[]) => {
+  return layouts.map((layout, idx) => ({
     id: pickCardId(layouts[idx], idx),
-    cardStyle: render.cardStyle,
-    backgroundImage: render.backgroundImage || '',
-    backgroundStyle: render.backgroundStyle,
-    nodes: mapRenderTree(render.renderTree),
+    cardStyle: styleObjectToString(buildCardStyle(layout, 'rpx'), 'rpx'),
+    backgroundImage: layout.backgroundImage || '',
+    backgroundStyle: styleObjectToString(buildBackgroundStyle(layout, 'rpx'), 'rpx'),
+    elements: decorateElements(layout.children || []),
   }));
 };
 
@@ -90,6 +82,7 @@ Component({
   },
   data: {
     cards: [] as RenderCard[],
+    rootData: {} as Record<string, any>,
   },
   observers: {
     layout() {
@@ -107,17 +100,17 @@ Component({
   methods: {
     rebuild() {
       const layoutInput = ensureArray(this.data.layout as CardLayoutInput);
-      const dataInput = (this.data.data || {}) as LayoutData;
+      const rootData = (this.data.data || {}) as Record<string, any>;
 
       if (!layoutInput.length) {
-        this.setData({ cards: [] });
+        this.setData({ cards: [], rootData });
         return;
       }
 
       const normalizedLayouts = normalizeLayout(layoutInput);
-      const cards = buildCards(normalizedLayouts, dataInput);
+      const cards = buildCards(normalizedLayouts);
 
-      this.setData({ cards });
+      this.setData({ cards, rootData });
     },
   },
 });

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

@@ -9,82 +9,34 @@
           src="{{item.backgroundImage}}"
           mode="aspectFill"
         />
-        <block wx:for="{{item.nodes}}" wx:key="id">
-          <template is="render-node" data="{{node:item}}" />
+        <block wx:for="{{item.elements}}" wx:key="id">
+          <template is="render-element" data="{{el:item, rootData: rootData}}" />
         </block>
       </view>
     </view>
   </block>
 </view>
 
-<template name="render-node">
-  <block wx:if="{{node.type === 'image'}}">
-    <view class="km-node" style="{{node.wrapperStyle}}">
-      <image
-        class="km-node__image"
-        style="{{node.contentStyle}}"
-        src="{{node.src}}"
-        mode="{{node.mode || 'aspectFill'}}"
-      />
-    </view>
+<template name="render-element">
+  <block wx:if="{{el.type === 'image'}}">
+    <image-element element="{{el}}" rootData="{{rootData}}" />
   </block>
-  <block wx:elif="{{node.type === 'icon'}}">
-    <view class="km-node km-node--icon" style="{{node.wrapperStyle}}">
-      <view
-        wx:if="{{node.name === 'dot' || node.name === 'round'}}"
-        class="km-node__icon-dot"
-        style="{{node.contentStyle}}"
-      />
-      <view
-        wx:else
-        class="km-node__icon icon"
-        style="{{node.contentStyle}}"
-      >{{node.text || ''}}</view>
-    </view>
+  <block wx:elif="{{el.type === 'icon'}}">
+    <icon-element element="{{el}}" rootData="{{rootData}}" />
   </block>
-  <block wx:elif="{{node.type === 'layout-panel'}}">
-    <view class="km-node" style="{{node.wrapperStyle}}">
-      <view class="km-node__panel" style="{{node.contentStyle}}">
-        <block wx:for="{{node.children}}" wx:key="id">
-          <template is="render-node" data="{{node:item}}" />
+  <block wx:elif="{{el.type === 'layout-panel'}}">
+    <view class="km-node" style="{{el.wrapperStyle}}">
+      <view class="km-node__panel" style="{{el.contentStyle}}">
+        <block wx:for="{{el.children}}" wx:key="id">
+          <template is="render-element" data="{{el:item, rootData: rootData}}" />
         </block>
       </view>
     </view>
   </block>
-  <block wx:elif="{{node.type === 'custom'}}">
-    <view class="km-node km-node--custom" style="{{node.wrapperStyle}}">
-      <view class="km-node__custom" style="{{node.contentStyle}}">
-        <slot name="{{node.id}}"></slot>
-      </view>
-    </view>
+  <block wx:elif="{{el.type === 'custom'}}">
+    <custom-element element="{{el}}" rootData="{{rootData}}" />
   </block>
   <block wx:else>
-    <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">
-            <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>
-          <text class="km-node__text-value">{{node.text || ''}}</text>
-        </block>
-      </view>
-    </view>
+    <text-element element="{{el}}" rootData="{{rootData}}" />
   </block>
 </template>

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

@@ -1,9 +1,6 @@
-
-
 .km-card-layout {
   display: flex;
   flex-direction: column;
-  gap: 16rpx;
 }
 
 .km-card-layout__item {
@@ -33,76 +30,14 @@
   color: inherit;
 }
 
-.km-node--icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.km-node__image {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.km-node__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  font-family: 'km-icon', 'PingFang SC', 'Microsoft Yahei', sans-serif;
-  font-style: normal;
-  font-weight: normal;
-}
-
-.km-node__icon-dot {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background-color: #999;
-}
-
 .km-node__panel {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
 }
 
-.km-node__custom {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
 
-.km-node__text {
-  width: 100%;
-  height: 100%;
-  display: block;
-  box-sizing: border-box;
-  text-align: inherit;
-}
-
-.km-node__text-content {
-  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: inline;
-}
 
-/* ICON */
 
 
 @font-face {

package/src/utils/card-schema.ts

@@ -3,14 +3,21 @@ export type {
   CardElementType,
   CardLayoutInput,
   CardLayoutSchema,
-  RenderNode,
-  RenderResult
 } from '../vendor/km-card-layout-core/index'
 
 export {
   addUnit,
-  buildRenderNodes,
-  buildRenderResult,
+  buildWrapperStyle,
+  buildCardStyle,
+  buildBackgroundStyle,
+  buildBaseContentStyle,
+  buildPanelContentStyle,
+  buildTextContentStyle,
+  buildImageContentStyle,
+  buildTextIconMeta,
+  getTextValue,
+  getImageSrc,
+  getIconName,
   normalizeLayout,
   resolveBindingValue,
   styleObjectToString

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

@@ -54,6 +54,9 @@ export function applyItemCollectBindings(
     else delete base.defaultValue;
     if (key !== undefined) base.key = key;
     else delete base.key;
+    if (el.type === 'text' && meta?.extra?.icon) {
+      base.icon = { ...(base.icon || {}), name: meta.extra.icon };
+    }
 
     if (el.type === 'layout-panel') {
       return {

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

@@ -29,8 +29,7 @@ const readByPath = (data: any, path: string): any => {
 
 export const resolveBindingValue = (
   binding: string | undefined,
-  rootData: Record<string, any>,
-  context?: Record<string, any>
+  rootData: Record<string, any>
 ): any => {
   if (!binding) return undefined;
   const value = readByPath(rootData, binding);

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

@@ -5,11 +5,30 @@
  * - 职责：将布局 Schema 与业务数据合成可渲染树，外层只需将节点映射到各端组件。
  */
 
+
+
+
+
 export * from './interface/index';
-export * from './helpers';
-export * from './layout';
-export * from './data';
-export * from './bindings';
+export { addUnit, styleObjectToString, toNumber, isObject } from './helpers';
+export {
+  normalizeLayout,
+  sanitizeLayout,
+  sanitizeElement,
+  roundToInt,
+  getAbsLayout,
+  collectBindings,
+  normalizeId,
+  parseLayout,
+  areChildrenEqual,
+} from './layout';
+export { resolveBindingValue } from './data';
+export {
+  stripLayoutBindings,
+  applyItemCollectBindings,
+  getTemplateItems,
+  getTemplateBackgrounds,
+} from './bindings';
 export {
   backgroundChange,
   DEFAULT_DECOR_COLOR,
@@ -18,4 +37,17 @@ export {
   applyBackground,
   updateElementsStyle,
 } from './ops/changeBackground';
-export * from './render/builder';
+export { buildRenderData } from './render/tool';
+export {
+  buildWrapperStyle,
+  buildCardStyle,
+  buildBackgroundStyle,
+  buildBaseContentStyle,
+  buildPanelContentStyle,
+  buildTextContentStyle,
+  buildImageContentStyle,
+  getTextValue,
+  getImageSrc,
+  getIconName,
+  buildTextIconMeta,
+} from './render/helpers';

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

@@ -21,6 +21,7 @@ export interface TemplateItem {
   bind: string;
   key?: string;
   icon?: string;
+  extra?: { icon?: string };
   default?: string;
   type: 'text' | 'image';
   cate: number;

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

@@ -1,4 +1,3 @@
 export * from './elements';
 export * from './layout';
-export * from './render';
-export * from './data/payload';
+export * from './data/payload';

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

@@ -102,10 +102,9 @@ export const applySpecialStyle = (
   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 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;
@@ -167,3 +166,14 @@ export const updateElementsStyle = (
     ),
   };
 };
+
+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,159 @@
+import { addUnit } from '../helpers';
+import { getAbsLayout } from '../layout';
+import { resolveBindingValue } from '../data';
+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,
+  data?: Record<string, any>
+) => {
+  const bound = el.binding && data ? resolveBindingValue(el.binding, data) : undefined;
+  const val =
+    bound !== undefined && bound !== null
+      ? bound
+      : el.defaultValue !== undefined && el.defaultValue !== null
+        ? el.defaultValue
+        : '';
+  return `${val ?? ''}`;
+};
+
+export const getImageSrc = (
+  el: ImageElement,
+  data?: Record<string, any>
+) => {
+  const bound = el.binding && data ? resolveBindingValue(el.binding, data) : undefined;
+  return (bound as any) || 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;
+}