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

package/src/components/card-layout/elements/image-element/index.ts

@@ -0,0 +1,35 @@
+import {
+  buildImageContentStyle,
+  buildWrapperStyle,
+  getImageSrc,
+  styleObjectToString,
+  type ImageElement,
+} from '../../../../vendor/km-card-layout-core/index';
+
+Component({
+  options: {
+    styleIsolation: 'apply-shared',
+  },
+  properties: {
+    element: {
+      type: Object,
+      value: {},
+    },
+  },
+  data: {
+    wrapperStyle: '',
+    contentStyle: '',
+    imageSrc: '',
+    mode: 'aspectFill',
+  },
+  observers: {
+    element(el: ImageElement) {
+      if (!el) return;
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
+      const contentStyle = styleObjectToString(buildImageContentStyle(el), 'rpx');
+      const imageSrc = getImageSrc(el);
+      const mode = el.fit === 'contain' ? 'aspectFit' : 'aspectFill';
+      this.setData({ wrapperStyle, contentStyle, imageSrc, mode });
+    },
+  },
+});

package/src/components/card-layout/elements/image-element/index.wxml

@@ -0,0 +1,8 @@
+<view class="km-node" style="{{wrapperStyle}}">
+  <image
+    class="km-node__image"
+    style="{{contentStyle}}"
+    src="{{imageSrc}}"
+    mode="{{mode}}"
+  />
+</view>

package/src/components/card-layout/elements/image-element/index.wxss

@@ -0,0 +1,10 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.km-node__image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

package/src/components/card-layout/elements/text-element/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/src/components/card-layout/elements/text-element/index.ts

@@ -0,0 +1,52 @@
+import {
+  buildTextContentStyle,
+  buildTextIconMeta,
+  buildWrapperStyle,
+  getTextValue,
+  styleObjectToString,
+  type TextElement,
+} from '../../../../vendor/km-card-layout-core/index';
+import { ICON_CODE_MAP } from '../../icon-map';
+
+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;
+};
+
+Component({
+  options: {
+    styleIsolation: 'apply-shared',
+  },
+  properties: {
+    element: {
+      type: Object,
+      value: {},
+    },
+  },
+  data: {
+    wrapperStyle: '',
+    contentStyle: '',
+    textValue: '',
+    iconMeta: null as any,
+  },
+  observers: {
+    element(el: TextElement) {
+      if (!el) return;
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
+      const contentStyle = styleObjectToString(buildTextContentStyle(el, 'rpx'), 'rpx');
+      const textValue = getTextValue(el);
+      const iconRaw = buildTextIconMeta(el, 'rpx');
+      const iconMeta =
+        iconRaw && iconRaw.name
+          ? {
+              ...iconRaw,
+              text: mapIconGlyph(iconRaw.name, iconRaw.name),
+              wrapperStyle: styleObjectToString(iconRaw.wrapperStyle, 'rpx'),
+            }
+          : iconRaw;
+      this.setData({ wrapperStyle, contentStyle, textValue, iconMeta });
+    },
+  },
+});

package/src/components/card-layout/elements/text-element/index.wxml

@@ -0,0 +1,29 @@
+<view class="km-node km-node--text" style="{{wrapperStyle}}">
+  <view class="km-node__text" style="{{contentStyle}}">
+    <block wx:if="{{iconMeta && iconMeta.name}}">
+      <view class="km-node__text-content">
+        <block wx:if="{{iconMeta.align === 'right'}}">
+          <text class="km-node__text-value">{{textValue || ''}}</text>
+          <view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper" >
+            <text
+              class="km-node__text-icon icon"
+              style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
+            >{{iconMeta.text || iconMeta.name || ''}}</text>
+          </view>
+        </block>
+        <block wx:else>
+          <view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper">
+            <text
+              class="km-node__text-icon icon"
+              style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
+            >{{iconMeta.text || iconMeta.name || ''}}</text>
+          </view>
+          <text class="km-node__text-value">{{textValue || ''}}</text>
+        </block>
+      </view>
+    </block>
+    <block wx:else>
+      <text class="km-node__text-value">{{textValue || ''}}</text>
+    </block>
+  </view>
+</view>

package/src/components/card-layout/elements/text-element/index.wxss

@@ -0,0 +1,59 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.km-node--text {
+  /* overflow hidden if needed */
+}
+
+.km-node--text text {
+  display: inline;
+}
+
+.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-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.km-node__text-value {
+  display: inline-block;
+  white-space: pre-wrap;
+  word-break: break-word;
+  vertical-align: middle;
+}
+
+@font-face {
+  font-family: 'km-icon';
+  src: url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAEl4AA0AAAAAcmgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAABJXAAAABoAAAAcrMtJV0dERUYAAEk8AAAAHgAAAB4AKQByT1MvMgAAAaQAAABGAAAAYDw3SVljbWFwAAAC7AAAAM8AAAIW8XL3K2dhc3AAAEk0AAAACAAAAAj//wADZ2x5ZgAABJgAAEBZAABkZPJymXJoZWFkAAABMAAAADEAAAA2MtZiFmhoZWEAAAFkAAAAIAAAACQNagmCaG10eAAAAewAAAD/AAABqqs3Ii9sb2NhAAADvAAAANoAAADaKv0P7G1heHAAAAGEAAAAHwAAACABmQHEbmFtZQAARPQAAAFGAAACgl6CAQJwb3N0AABGPAAAAvUAAATh1g15W3jaY2BkYGAA4lqffPd4fpuvDNwsDCDwVIyfA0b///i/gXMWcyeQy8HABBIFAAVdCfwAAAB42mNgZGBgbvjfwBDDOfP/x///OWcxAEVQQCYAuxgH/XjaY2BkYGDIYdzBoMwAAkxAzAWEDAz/wXwGACjlAl8AeNpjYGFRYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnjE+y2Ju+N/AwMB8h6ERKMyIpESBgREAenQNCwAAeNo90cErBGEYx/Hf1LMH7MVxoigHtS600pzWnMjBlt2dFAeiNuWgXLgokgslbpyE/Aduyl38J3ty4aCs7/vOk6lPv+d5531n3nfGVF5JIZlUx9fAbawnEfIFq14/YhddFPjFmynZ9n4TbYzg2tcMW6Epr4NQT3jSJ2lcW9ec1fSEAheMnVume7KKBbQwiMye+5/kEpqYwQoOY59pn1xGw3Lt8NwHS7UY35frivqbet2fNYZp+4j76vj+GpUhjZJreLfxODecay/eTzVPzmIj9uX7VLnUmfdb/2fN4trcv0kYv8Oxe/V5Rzhg7inZ8wzjN5b0f6z8PV2d/AHivi0JAHja3dBFUoVRDITR88PD3d3d3d3d3d33zQqYwwVGbIGk8qV6kK7qIN7vlIsCRdlBRT865iPsWOig318/PwOjbwYd+7mKSZAoSbIUqdKky5ApS7YcufLkK1CoSLESpcqCZ4VKVarVqFWnXoNGTZq1aNWmXYdOXbr16NWn34BBQ4aNGDVm3IRJU6bNmDVn3oJFS5atWLVm3YZNW7bt2LVn34FDR46dOHXm3IVLV67duHXn3oNHT8Hv2YtXbyFaot9HfMeMC4jztyL/vr4AXx4eawAAAAAAAAAAAACwAPIDSgQ8BLIFUgWUBcIF/gY8BpIHCgdAB3wHoAgOCHAIxgk+CV4JzAnqCkQKrgtUC8QMEAxsDNQNFA1SDegONg6qDyQPgg/CEAIQxBEwEaQSHBLYE14T4hRcFPIVTBYMFkwWqBckGGAYxhmYGegaEBpeGuIbXhvwHPQd5B62Hygf6CBeILog9CFUIbgiBCJ0ItQjbCQSJGgkuCVsJcImKib0J44ocijOKSApUCo2KmQqtituK34sJixkLMgtdC3WLpgvPC+QMBww/DGCMagyMgAA') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+.icon {
+  font-family: 'km-icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.km-node__text-icon--wrapper{
+  display: inline-block;
+}

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

@@ -1,3 +1,9 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "text-element": "./elements/text-element/index",
+    "image-element": "./elements/image-element/index",
+    "icon-element": "./elements/icon-element/index",
+    "custom-element": "./elements/custom-element/index"
+  }
 }

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 || []),
   }));
 };
 
@@ -107,7 +99,6 @@ Component({
   methods: {
     rebuild() {
       const layoutInput = ensureArray(this.data.layout as CardLayoutInput);
-      const dataInput = (this.data.data || {}) as LayoutData;
 
       if (!layoutInput.length) {
         this.setData({ cards: [] });
@@ -115,7 +106,7 @@ Component({
       }
 
       const normalizedLayouts = normalizeLayout(layoutInput);
-      const cards = buildCards(normalizedLayouts, dataInput);
+      const cards = buildCards(normalizedLayouts);
 
       this.setData({ cards });
     },

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}}" />
         </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}}" />
   </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}}" />
   </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}}" />
         </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}}" />
   </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}}" />
   </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

@@ -1,4 +1,5 @@
 import { isObject } from './helpers';
+import type { BindingContext } from './interface';
 
 const pathToSegments = (path: string): string[] =>
   `${path || ''}`
@@ -30,7 +31,7 @@ const readByPath = (data: any, path: string): any => {
 export const resolveBindingValue = (
   binding: string | undefined,
   rootData: Record<string, any>,
-  context?: Record<string, any>
+  context?: BindingContext
 ): 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/context.ts

@@ -0,0 +1,6 @@
+export interface BindingContext {
+  // Optional binding prefix for nested contexts
+  contextBinding?: string;
+  // Optional nested context data
+  contextData?: any;
+}

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,4 @@
 export * from './elements';
 export * from './layout';
-export * from './render';
-export * from './data/payload';
+export * from './data/payload';
+export * from './context';