km-card-layout-component-miniprogram 0.1.19 → 0.1.20

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

@@ -0,0 +1,40 @@
+import {
+  buildPanelContentStyle,
+  buildWrapperStyle,
+  styleObjectToString,
+  type LayoutPanelElement,
+} from "../../../../vendor/km-card-layout-core/index";
+
+Component({
+  options: {
+    styleIsolation: "apply-shared",
+  },
+  properties: {
+    element: {
+      type: Object,
+      value: {},
+    },
+    rootData: {
+      type: Object,
+      value: {},
+    },
+  },
+  data: {
+    wrapperStyle: "",
+    contentStyle: "",
+  },
+  observers: {
+    element() {
+      this.rebuild();
+    },
+  },
+  methods: {
+    rebuild() {
+      const el = this.data.element as LayoutPanelElement;
+      if (!el) return;
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, "rpx"), "rpx");
+      const contentStyle = styleObjectToString(buildPanelContentStyle(el, "rpx"), "rpx");
+      this.setData({ wrapperStyle, contentStyle });
+    },
+  },
+});

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

@@ -0,0 +1,5 @@
+<view class="km-node itemClass" style="{{wrapperStyle}}">
+  <view class="km-node__panel itemClass" style="{{contentStyle}}">
+    <slot></slot>
+  </view>
+</view>

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

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

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

@@ -1,23 +1,34 @@
 import {
   buildTextContentStyle,
   buildTextIconMeta,
+  buildTextValueStyle,
   buildWrapperStyle,
   getTextValue,
   styleObjectToString,
   type TextElement,
-} from '../../../../vendor/km-card-layout-core/index';
-import { ICON_CODE_MAP } from '../../icon-map';
+} 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;
+const normalizeIconName = (name?: string) => {
+  if (!name) return "";
+  return name.startsWith("icon-") ? name.slice(5) : name;
+};
+
+const buildIconClassName = (name?: string) => {
+  const normalized = normalizeIconName(name);
+  if (!normalized) return "";
+  return `icon-${normalized}`;
+};
+
+const buildIconCode = (name?: string) => {
+  const normalized = normalizeIconName(name);
+  if (!normalized) return "";
+  return ICON_CODE_MAP[normalized] || "";
 };
 
 Component({
   options: {
-    styleIsolation: 'apply-shared',
+    styleIsolation: "apply-shared",
   },
   properties: {
     element: {
@@ -30,28 +41,46 @@ Component({
     },
   },
   data: {
-    wrapperStyle: '',
-    contentStyle: '',
-    textValue: '',
+    wrapperStyle: "",
+    contentStyle: "",
+    textValue: "",
+    textStyle: "",
     iconMeta: null as any,
   },
   observers: {
-    element(el: TextElement) {
+    element() {
+      this.rebuild();
+    },
+    rootData() {
+      this.rebuild();
+    },
+  },
+  methods: {
+    rebuild() {
+      const el = this.data.element as TextElement;
       if (!el) return;
-      const data: Record<string, any> = this.data.rootData || {};
-      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
-      const contentStyle = styleObjectToString(buildTextContentStyle(el, 'rpx'), 'rpx');
+      const data = this.data.rootData || {};
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, "rpx"), "rpx");
+      const contentStyle = styleObjectToString(buildTextContentStyle(el, "rpx"), "rpx");
       const textValue = getTextValue(el, data);
-      const iconRaw = buildTextIconMeta(el, 'rpx');
+      const textStyle = styleObjectToString(
+        {
+          ...buildTextContentStyle(el, "rpx"),
+          ...buildTextValueStyle(el, "rpx"),
+        },
+        "rpx"
+      );
+      const iconRaw = buildTextIconMeta(el, "rpx");
       const iconMeta =
         iconRaw && iconRaw.name
           ? {
               ...iconRaw,
-              text: mapIconGlyph(iconRaw.name, iconRaw.name),
-              wrapperStyle: styleObjectToString(iconRaw.wrapperStyle, 'rpx'),
+              className: buildIconClassName(iconRaw.name),
+              iconCode: buildIconCode(iconRaw.name),
+              wrapperStyle: styleObjectToString(iconRaw.wrapperStyle, "rpx"),
             }
           : iconRaw;
-      this.setData({ wrapperStyle, contentStyle, textValue, iconMeta });
+      this.setData({ wrapperStyle, contentStyle, textValue, textStyle, iconMeta });
     },
   },
 });

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

@@ -1,44 +1,18 @@
-<template name="text-element">
-<view class="km-node km-node--text" style="{{wrapperStyle}}">
-  <view class="km-node__text" style="{{contentStyle}}">
-    <block wx:if="{{(iconMeta && (iconMeta.name || iconMeta.text)) && (element.icon && element.icon.style !== 'text')}}">
-      <view class="km-node__text-content">
-
-        <!-- icon 在右侧 -->
-        <block wx:if="{{iconMeta && iconMeta.align === 'right'}}">
-          <text class="km-node__text-value">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '：') : ''}}{{textValue || ''}}</text>
+<view class="km-node km-node--text canvas-item" style="{{wrapperStyle}}">
+  <view class="km-node__text canvas-item" style="{{contentStyle}}">
+    <block wx:if="{{iconMeta && iconMeta.name && (element.icon && element.icon.style !== 'text')}}">
+      <view class="km-node__text-content canvas-item">
           <view
-            class="km-node__text-icon--wrapper"
+            class="km-node__text-icon--wrapper canvas-item"
             style="{{iconMeta.wrapperStyle}}"
           >
-            <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>
+            <i class="km-node__text-icon icon {{iconMeta.className}} canvas-item" style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};" data-icon="{{iconMeta.iconCode}}" ></i>
           </view>
-        </block>
-
-        <!-- icon 在左侧 -->
-        <block wx:else>
-          <view
-            class="km-node__text-icon--wrapper"
-            style="{{iconMeta.wrapperStyle}}"
-          >
-            <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>
-
+          <text class="km-node__text-value canvas-item"  style="{{textStyle}}" data-text="{{textValue || ''}}">{{textValue || ''}}</text>
       </view>
     </block>
-
-    <!-- 无 icon -->
     <block wx:else>
-      <text class="km-node__text-value">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '：') : ''}}{{textValue || ''}}</text>
+      <text class="km-node__text-value canvas-item"  style="{{textStyle}}" data-text="{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '：') : ''}}{{textValue || ''}}">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '：') : ''}}{{textValue || ''}}</text>
     </block>
   </view>
 </view>
-</template>

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

@@ -1,3 +1,5 @@
+@import "../icon-font.wxss";
+
 .km-node {
   box-sizing: border-box;
   color: inherit;
@@ -19,6 +21,7 @@
   display: inline-block;
   vertical-align: middle;
   height: 100%;
+  display: inline-flex;
 }
 
 .km-node__text-icon {
@@ -34,22 +37,6 @@
   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{
+.km-node__text-icon--wrapper {
   display: inline-block;
-}
+}

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

@@ -1,3 +1,11 @@
 {
-  "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",
+    "layout-panel-element": "./elements/layout-panel-element/index",
+    "wxml2canvas": "../../vendor/wxml2canvas-2d/index"
+  }
 }

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

@@ -1,48 +1,23 @@
 import type {
   CardElement,
-  CardLayoutInput,
   CardLayoutSchema,
-  CustomElement,
-  IconElement,
-  ImageElement,
-  LayoutPanelElement,
-  TextElement,
-} from '../../vendor/km-card-layout-core/index';
+} from "../../vendor/km-card-layout-core/index";
 import {
   buildBackgroundStyle,
-  buildBaseContentStyle,
   buildCardStyle,
-  buildImageContentStyle,
-  buildPanelContentStyle,
-  buildTextContentStyle,
-  buildTextIconMeta,
-  buildWrapperStyle,
-  getIconName,
-  getImageSrc,
-  getTextValue,
   normalizeLayout,
   processCardLayout,
   styleObjectToString,
-} from '../../vendor/km-card-layout-core/index';
-import { ICON_CODE_MAP } from './icon-map';
+} from "../../vendor/km-card-layout-core/index";
 
 type CompanyDuty = {
   company: string;
   duty: string;
 };
 
-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 EMPTY_COMPANY_DUTY: CompanyDuty = {
-  company: '',
-  duty: '',
+  company: "",
+  duty: "",
 };
 
 /**
@@ -79,7 +54,6 @@ export function normalizeMoreCompany(data: AnyObject): AnyObject {
   };
 }
 
-
 const handleSpecialFields = (data: { user: Record<string, any> }) => {
   const user = data.user ?? {};
   return {
@@ -87,15 +61,13 @@ const handleSpecialFields = (data: { user: Record<string, any> }) => {
     user: {
       ...user,
       baseCompanyDuty:
-        user.company && user.duty
-          ? `${user.company} ${user.duty}`
-          : user.baseCompanyDuty,
+        user.company && user.duty ? `${user.company} ${user.duty}` : user.baseCompanyDuty,
       moreCardInfo: user.moreCardInfo
         ? {
             ...user.moreCardInfo,
             company: Array.isArray(user.moreCardInfo.company)
               ? (user.moreCardInfo.company as CompanyDuty[]).map(
-                  item => `${item.company} ${item.duty}`
+                  (item) => `${item.company} ${item.duty}`
                 )
               : user.moreCardInfo.company,
           }
@@ -104,22 +76,7 @@ const handleSpecialFields = (data: { user: Record<string, any> }) => {
   };
 };
 
-type RenderElement = CardElement & {
-  wrapperStyle?: string;
-  contentStyle?: string;
-  imageSrc?: string;
-  mode?: string;
-  iconText?: string;
-  textValue?: string;
-  iconMeta?: any;
-  children?: RenderElement[];
-};
-
-type PanelElement = LayoutPanelElement & {
-  wrapperStyle: string;
-  contentStyle: string;
-  children?: RenderElement[];
-};
+type RenderElement = CardElement;
 
 type RenderCard = {
   id: string;
@@ -129,123 +86,33 @@ type RenderCard = {
   elements: RenderElement[];
 };
 
-const ensureArray = (input: CardLayoutInput | any): CardLayoutInput => {
-  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}`;
 };
 
-const decorateElements = (
-  children: CardElement[] = [],
-  rootData: Record<string, any>
-): RenderElement[] => {
-  const data = rootData || {};
-
-  return (children || []).map(el => {
-    const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
-
-    switch (el.type) {
-      case 'layout-panel': {
-        const panel = el as LayoutPanelElement;
-        return {
-          ...panel,
-          wrapperStyle,
-          contentStyle: styleObjectToString(buildPanelContentStyle(panel, 'rpx'), 'rpx'),
-          children: decorateElements(panel.children || [], rootData),
-        } as PanelElement;
-      }
-      case 'image': {
-        const imageEl = el as ImageElement;
-        const contentStyle = styleObjectToString(buildImageContentStyle(imageEl), 'rpx');
-        const imageSrc = getImageSrc(imageEl, data);
-        const mode = imageEl.fit === 'contain' ? 'aspectFit' : 'aspectFill';
-        return {
-          ...imageEl,
-          wrapperStyle,
-          contentStyle,
-          imageSrc,
-          mode,
-        };
-      }
-      case 'icon': {
-        const iconEl = el as IconElement;
-        const contentStyle = styleObjectToString(buildBaseContentStyle(iconEl), 'rpx');
-        const name = getIconName(iconEl);
-        const iconText = mapIconGlyph(name, name || '');
-        return {
-          ...iconEl,
-          wrapperStyle,
-          contentStyle,
-          iconText,
-        };
-      }
-      case 'custom': {
-        const customEl = el as CustomElement;
-        const contentStyle = styleObjectToString(buildBaseContentStyle(customEl), 'rpx');
-        return {
-          ...customEl,
-          wrapperStyle,
-          contentStyle,
-        };
-      }
-      default: {
-        const textEl = el as TextElement;
-        const contentStyle = styleObjectToString(buildTextContentStyle(textEl, 'rpx'), 'rpx');
-        const textValue = getTextValue(textEl, data);
-        const iconRaw = buildTextIconMeta(textEl, 'rpx');
-        const iconMeta =
-          iconRaw && iconRaw.name
-            ? {
-                ...iconRaw,
-                text: mapIconGlyph(iconRaw.name, iconRaw.name),
-                wrapperStyle: styleObjectToString(iconRaw.wrapperStyle, 'rpx'),
-              }
-            : iconRaw;
-        return {
-          ...textEl,
-          wrapperStyle,
-          contentStyle,
-          textValue,
-          iconMeta,
-        };
-      }
-    }
-  });
-};
-
-const buildCards = (layouts: CardLayoutSchema[], rootData: Record<string, any>) => {
+const buildCards = (layouts: CardLayoutSchema[]) => {
   return layouts.map((layout, idx) => ({
     id: pickCardId(layouts[idx], idx),
-    cardStyle: styleObjectToString(buildCardStyle(layout, 'rpx'), 'rpx'),
-    backgroundImage: layout.backgroundImage || '',
-    backgroundStyle: styleObjectToString(buildBackgroundStyle(layout, 'rpx'), 'rpx'),
-    elements: decorateElements(layout.children || [], rootData),
+    cardStyle: styleObjectToString(buildCardStyle(layout, "rpx"), "rpx"),
+    backgroundImage: layout.backgroundImage || "",
+    backgroundStyle: styleObjectToString(buildBackgroundStyle(layout, "rpx"), "rpx"),
+    elements: layout.children || [],
   }));
 };
 
-
-export const hasCompanyDutyKey = (
-  schemas: CardLayoutSchema[]
-): boolean => {
-  const TARGET_KEYS = new Set([
-    'company_duty_custom',
-    'company_duty_1',
-    'company_duty_2',
-  ]);
+export const hasCompanyDutyKey = (schemas: CardLayoutSchema[]): boolean => {
+  const TARGET_KEYS = new Set(["company_duty_custom", "company_duty_1", "company_duty_2"]);
 
   const traverse = (elements: CardElement[]): boolean => {
-    return elements.some(el => {
+    return elements.some((el) => {
       // 命中 key
       if (el.key && TARGET_KEYS.has(el.key)) {
         return true;
       }
 
       // 递归 layout-panel
-      if (el.type === 'layout-panel' && el.children?.length) {
+      if (el.type === "layout-panel" && el.children?.length) {
         return traverse(el.children);
       }
 
@@ -253,13 +120,12 @@ export const hasCompanyDutyKey = (
     });
   };
 
-  return schemas.some(schema => traverse(schema.children));
+  return schemas.some((schema) => traverse(schema.children));
 };
 
-
 Component({
   options: {
-    styleIsolation: 'apply-shared',
+    styleIsolation: "apply-shared",
   },
   properties: {
     layout: {
@@ -277,6 +143,7 @@ Component({
   data: {
     cards: [] as RenderCard[],
     rootData: {} as Record<string, any>,
+    firstCard: [] as RenderCard[],
   },
   observers: {
     layout() {
@@ -293,16 +160,29 @@ Component({
   },
   methods: {
     rebuild() {
-      const data = normalizeMoreCompany(this.data.data)
-      const layoutInput = hasCompanyDutyKey(this.data.layout)?processCardLayout(this.data.layout, data as any): this.data.layout;
+      const data = normalizeMoreCompany(this.data.data);
+      const layoutInput = hasCompanyDutyKey(this.data.layout)
+        ? processCardLayout(this.data.layout, data as any)
+        : this.data.layout;
       const rootData = handleSpecialFields(data as any);
       if (!layoutInput.length) {
         this.setData({ cards: [], rootData });
         return;
       }
       const normalizedLayouts = normalizeLayout(layoutInput);
-      const cards = buildCards(normalizedLayouts, rootData);
-      this.setData({ cards, rootData });
+      const cards = buildCards(normalizedLayouts);
+      this.setData({ cards, rootData, firstCard: [cards[0]] });
+    },
+
+    async handleDrawCanvas() {
+      try {
+        const canvas = this.selectComponent(`#layout-canvas`);
+        await canvas.draw(this);
+        const filePath = await canvas.toTempFilePath();
+        return filePath;
+      } catch {
+        wx.showToast({ title: "保存失败", icon: "error" });
+      }
     },
   },
 });

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

@@ -1,59 +1,38 @@
-<import src="./elements/custom-element/index.wxml" />
-<import src="./elements/icon-element/index.wxml" />
-<import src="./elements/image-element/index.wxml" />
-<import src="./elements/text-element/index.wxml" />
-
-<view class="km-card-layout">
-  <block wx:for="{{cards}}" wx:key="id">
-    <view class="km-card-layout__item">
-      <view class="km-card" style="{{item.cardStyle}}">
-        <image
-          wx:if="{{item.backgroundImage}}"
-          class="km-card__bg"
-          style="{{item.backgroundStyle}}"
-          src="{{item.backgroundImage}}"
-          mode="aspectFill"
-        />
-        <block wx:for="{{item.elements}}" wx:key="id">
-          <template wx:if="{{item.visible !== false}}" is="render-element" data="{{el:item, rootData: rootData}}" />
-        </block>
+<template name="layout-template">
+  <view class="km-card-layout layout-container">
+    <block wx:for="{{renderCards}}" wx:key="id">
+      <view class="km-card-layout__item canvas-item">
+        <view class="km-card canvas-item" style="{{item.cardStyle}}">
+          <image wx:if="{{item.backgroundImage}}" class="km-card__bg canvas-item" style="{{item.backgroundStyle}}" src="{{item.backgroundImage}}" mode="aspectFill" />
+          <block wx:for="{{item.elements}}" wx:key="id">
+            <template wx:if="{{item.visible !== false}}" is="render-element" data="{{el:item, rootData: rootData}}" />
+          </block>
+        </view>
       </view>
-    </view>
-  </block>
-</view>
-
+    </block>
+  </view>
+</template>
+<template is="layout-template" data="{{ renderCards: cards, rootData: rootData }}"></template>
+<!-- 暂时只绘制第一张卡片 -->
+<wxml2canvas id="layout-canvas" container-class="layout-container" item-class="canvas-item"></wxml2canvas>
 <template name="render-element">
   <block wx:if="{{el.type === 'image'}}">
-    <template
-      is="image-element"
-      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, imageSrc: el.imageSrc, mode: el.mode}}"
-    />
+    <image-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
   <block wx:elif="{{el.type === 'icon'}}">
-    <template
-      is="icon-element"
-      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, iconText: el.iconText}}"
-    />
+    <icon-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
   <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>
+    <layout-panel-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}">
+      <block wx:for="{{el.children}}" wx:key="id">
+        <template is="render-element" data="{{el:item, rootData: rootData}}" />
+      </block>
+    </layout-panel-element>
   </block>
   <block wx:elif="{{el.type === 'custom'}}">
-    <template
-      is="custom-element"
-      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, element: el}}"
-    />
+    <custom-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
   <block wx:else>
-    <template
-      is="text-element"
-      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, textValue: el.textValue, iconMeta: el.iconMeta, element: el}}"
-    />
+    <text-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
 </template>