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

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

@@ -1,96 +1,371 @@
-import type { CardLayoutInput, RenderNode } from '../../vendor/km-card-layout-core/index'
-import { buildRenderResult } from '../../vendor/km-card-layout-core/index'
-import { ICON_CODE_MAP } from './icon-map'
+import type {
+  CardElement,
+  CardLayoutInput,
+  CardLayoutSchema,
+  IconElement,
+  ImageElement,
+  LayoutPanelElement,
+  TextElement,
+} from '../../vendor/km-card-layout-core/index';
+import {
+  addUnit,
+  normalizeLayout,
+  resolveBindingValue,
+  styleObjectToString,
+} from '../../vendor/km-card-layout-core/index';
+import { ICON_CODE_MAP } from './icon-map';
 
 type LayoutData = {
-  user?: Record<string, any>
-  [key: string]: any
+  [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: RenderNode[]
+  id: string;
+  cardStyle: string;
+  backgroundImage?: string;
+  backgroundStyle: string;
+  nodes: RenderElement[];
 }
 
 const ensureArray = (input: CardLayoutInput | any): CardLayoutInput => {
-  if (!input) return []
-  return Array.isArray(input) ? input : [input]
-}
+  if (!input) return [];
+  return Array.isArray(input) ? input : [input];
+};
 
 const pickCardId = (layout: any, idx: number) => {
-  if (layout && (layout.name || layout.id)) return layout.name || layout.id
-  return `card-${idx}`
-}
+  if (layout && (layout.name || layout.id)) return layout.name || layout.id;
+  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];
+  if (glyph) return String.fromCharCode(parseInt(glyph, 16));
+  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 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',
+  };
+};
+
+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),
+  }));
 
 Component({
   options: {
-    styleIsolation: 'apply-shared'
+    styleIsolation: 'apply-shared',
   },
   properties: {
     layout: {
       type: Array,
       optionalTypes: [Object],
-      value: []
+      value: [],
     },
     data: {
       type: Object,
       value: {
-        user: {}
-      }
-    }
+        user: {},
+      },
+    },
   },
   data: {
-    cards: [] as RenderCard[]
+    cards: [] as RenderCard[],
   },
   observers: {
     layout() {
-      this.rebuild()
+      this.rebuild();
     },
     data() {
-      this.rebuild()
-    }
+      this.rebuild();
+    },
   },
   lifetimes: {
     attached() {
-      this.rebuild()
-    }
+      this.rebuild();
+    },
   },
   methods: {
-    normalizeIconGlyph(nodes: RenderNode[]): RenderNode[] {
-      return nodes.map(node => {
-        if (node.type === 'icon') {
-          const glyph = ICON_CODE_MAP[node.name || node.text || '']
-          const text = glyph ? String.fromCharCode(parseInt(glyph, 16)) : node.text
-          return { ...node, text }
-        }
-        if (node.children && node.children.length) {
-          return { ...node, children: this.normalizeIconGlyph(node.children) }
-        }
-        return node
-      })
-    },
     rebuild() {
-      const layoutInput = ensureArray(this.data.layout as CardLayoutInput)
-      const dataInput = (this.data.data || {}) as LayoutData
+      const layoutInput = ensureArray(this.data.layout as CardLayoutInput);
+      const dataInput = (this.data.data || {}) as LayoutData;
 
       if (!layoutInput.length) {
-        this.setData({ cards: [] })
-        return
+        this.setData({ cards: [] });
+        return;
       }
 
-      const rendered = buildRenderResult(layoutInput, dataInput, 'rpx')
-      const cards = rendered.map((card, idx) => ({
-        id: pickCardId(layoutInput[idx], idx),
-        cardStyle: card.cardStyle,
-        backgroundImage: card.backgroundImage,
-        backgroundStyle: card.backgroundStyle,
-        nodes: this.normalizeIconGlyph(card.renderTree)
-      }))
+      const normalizedLayouts = normalizeLayout(layoutInput);
+      const cards = buildCards(normalizedLayouts, dataInput, 'rpx').map(
+        (card, idx) => ({
+          ...card,
+          id: pickCardId(layoutInput[idx], idx),
+        }),
+      );
 
-      this.setData({ cards })
-    }
-  }
-})
+      this.setData({ cards });
+    },
+  },
+});

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

@@ -1,6 +1,6 @@
-<view class="km-card-layout-list">
+<view class="km-card-layout">
   <block wx:for="{{cards}}" wx:key="id">
-    <view class="km-card-layout-item">
+    <view class="km-card-layout__item">
       <view class="km-card" style="{{item.cardStyle}}">
         <image
           wx:if="{{item.backgroundImage}}"
@@ -31,7 +31,7 @@
   <block wx:elif="{{node.type === 'icon'}}">
     <view class="km-node km-node--icon" style="{{node.wrapperStyle}}">
       <view
-        wx:if="{{node.name === 'dot'}}"
+        wx:if="{{node.name === 'dot' || node.name === 'round'}}"
         class="km-node__icon-dot"
         style="{{node.contentStyle}}"
       />
@@ -39,7 +39,7 @@
         wx:else
         class="km-node__icon icon"
         style="{{node.contentStyle}}"
-      >{{node.text}}</view>
+      >{{node.text || ''}}</view>
     </view>
   </block>
   <block wx:elif="{{node.type === 'layout-panel'}}">
@@ -60,7 +60,23 @@
   </block>
   <block wx:else>
     <view class="km-node km-node--text" style="{{node.wrapperStyle}}">
-      <view style="{{node.contentStyle}}">{{node.text}}</view>
+      <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>
+        </block>
+        <block wx:else>
+          <text class="km-node__text-value">{{node.text || ''}}</text>
+        </block>
+      </view>
     </view>
   </block>
 </template>

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

@@ -1,11 +1,12 @@
 
 
-.km-card-layout-list {
+.km-card-layout {
   display: flex;
   flex-direction: column;
+  gap: 16rpx;
 }
 
-.km-card-layout-item {
+.km-card-layout__item {
   width: 100%;
 }
 
@@ -15,7 +16,7 @@
   box-sizing: border-box;
   color: inherit;
   font-family: 'PingFang SC', 'Microsoft Yahei', sans-serif;
-  background: #0f1115;
+  background: transparent;
 }
 
 .km-card__bg {
@@ -32,11 +33,12 @@
   color: inherit;
 }
 
-.km-node--icon{
+.km-node--icon {
   display: flex;
   align-items: center;
-  justify-items: center;
+  justify-content: center;
 }
+
 .km-node__image {
   width: 100%;
   height: 100%;
@@ -73,8 +75,27 @@
   box-sizing: border-box;
 }
 
+.km-node__text {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.km-node__text-content {
+  display: inline-flex;
+  align-items: center;
+}
+
+.km-node__text-value {
+  display: inline-block;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
 .km-node--text text {
   display: block;
+  white-space: pre-wrap;
   word-break: break-word;
 }