km-card-layout-component-miniprogram 0.1.41 → 0.1.42

package/miniprogram_dist/components/card-layout/elements/icon-element/index.js

@@ -5,13 +5,13 @@ const icon_map_1 = require("../../icon-map");
 const normalizeIconName = (name) => {
     if (!name)
         return "";
-    return name.startsWith("icon-") ? name.slice(5) : name;
+    return name.startsWith("layout-icon-") ? name.slice(5) : name;
 };
 const buildIconClassName = (name) => {
     const normalized = normalizeIconName(name);
     if (!normalized)
         return "";
-    return `icon-${normalized}`;
+    return `layout-icon-${normalized}`;
 };
 const buildIconCode = (name) => {
     const normalized = normalizeIconName(name);

package/miniprogram_dist/components/card-layout/elements/icon-element/index.wxml

@@ -1,3 +1,3 @@
 <view class="km-node km-node--icon canvas-item" style="{{wrapperStyle}}">
-  <view class="km-node__icon icon {{iconClass}} canvas-item" style="{{contentStyle}}" data-icon="{{iconCode}}"></view>
+  <view class="km-node__icon layoutIconFont {{iconClass}} canvas-item" style="{{contentStyle}}" data-icon="{{iconCode}}"></view>
 </view>

package/miniprogram_dist/components/card-layout/elements/icon-font.wxss

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "layoutIconFont"; /* Project id 5095635 */
-  src: url('//at.alicdn.com/t/c/font_5095635_ztv7ro0zm59.woff2?t=1766563440291') format('woff2'),
-       url('//at.alicdn.com/t/c/font_5095635_ztv7ro0zm59.woff?t=1766563440291') format('woff'),
-       url('//at.alicdn.com/t/c/font_5095635_ztv7ro0zm59.ttf?t=1766563440291') format('truetype'),
-       url('//at.alicdn.com/t/c/font_5095635_ztv7ro0zm59.svg?t=1766563440291#layoutIconFont') format('svg');
+  src: url('//at.alicdn.com/t/c/font_5095635_0u3b33ft9ub.woff2?t=1770624313420') format('woff2'),
+       url('//at.alicdn.com/t/c/font_5095635_0u3b33ft9ub.woff?t=1770624313420') format('woff'),
+       url('//at.alicdn.com/t/c/font_5095635_0u3b33ft9ub.ttf?t=1770624313420') format('truetype'),
+       url('//at.alicdn.com/t/c/font_5095635_0u3b33ft9ub.svg?t=1770624313420#layoutIconFont') format('svg');
 }
 
 .layoutIconFont {
@@ -14,6 +14,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.layout-icon-refresh:before {
+  content: "\e62b";
+}
+
 .layout-icon-round:before {
   content: "\e608";
 }

package/miniprogram_dist/components/card-layout/icon-map.js

@@ -13,4 +13,5 @@ exports.ICON_CODE_MAP = {
     address: "e628",
     "website-line": "e679",
     website: "e643",
+    refresh: "e62b",
 };

package/miniprogram_dist/components/card-layout/index.js

@@ -7,17 +7,18 @@ const EMPTY_COMPANY_DUTY = {
     company: "",
     duty: "",
 };
+const SWITCH_ANIMATION_MS = 420;
+const SWIPE_MIN_DISTANCE = 40;
+const SWIPE_DIRECTION_RATIO = 1.2;
 /**
- * 规范化 moreCardInfo.company，保证长度始终为 2
+ * 规范�?moreCardInfo.company，保证长度始终为 2
  */
 function normalizeMoreCompany(data) {
     var _a, _b;
     const origin = (_b = (_a = data.user) === null || _a === void 0 ? void 0 : _a.moreCardInfo) === null || _b === void 0 ? void 0 : _b.company;
-    // 不存在 / 不是数组 → 不处理
     if (!Array.isArray(origin)) {
         return data;
     }
-    // 长度 === 0 → 不处理
     if (origin.length === 0) {
         return data;
     }
@@ -43,13 +44,22 @@ const pickCardId = (layout, idx) => {
     return `card-${idx}`;
 };
 const buildCards = (layouts) => {
-    return layouts.map((layout, idx) => ({
-        id: pickCardId(layouts[idx], idx),
-        cardStyle: (0, index_1.styleObjectToString)((0, index_1.buildCardStyle)(layout, "rpx"), "rpx"),
-        backgroundImage: layout.backgroundImage || "",
-        backgroundStyle: (0, index_1.styleObjectToString)((0, index_1.buildBackgroundStyle)(layout, "rpx"), "rpx"),
-        elements: layout.children || [],
-    }));
+    return layouts.map((layout, idx) => {
+        const baseCardStyle = (0, index_1.buildCardStyle)(layout, "rpx");
+        const cardStyle = (0, index_1.styleObjectToString)(baseCardStyle, "rpx");
+        const sizeStyle = (0, index_1.styleObjectToString)({
+            width: baseCardStyle.width,
+            height: baseCardStyle.height,
+        }, "rpx");
+        return {
+            id: pickCardId(layouts[idx], idx),
+            cardStyle,
+            sizeStyle,
+            backgroundImage: layout.backgroundImage || "",
+            backgroundStyle: (0, index_1.styleObjectToString)((0, index_1.buildBackgroundStyle)(layout, "rpx"), "rpx"),
+            elements: layout.children || [],
+        };
+    });
 };
 const nextTick = () => new Promise((resolve) => {
     wx.nextTick(() => resolve());
@@ -76,6 +86,20 @@ Component({
         rootData: {},
         firstCard: [],
         shareImage: "",
+        activeCard: null,
+        canvasCard: null,
+        frontCard: null,
+        backCard: null,
+        activeIndex: 0,
+        flipEnabled: false,
+        showToggle: false,
+        isFlipped: false,
+        isSwitching: false,
+        switch: {
+            name: "refresh",
+            size: 14,
+            style: "fill",
+        },
     },
     observers: {
         layout() {
@@ -100,18 +124,112 @@ Component({
             return self._fontReady;
         },
         rebuild() {
+            const self = this;
+            if (self._switchTimer) {
+                clearTimeout(self._switchTimer);
+                self._switchTimer = null;
+            }
             const data = normalizeMoreCompany(this.data.data);
             const layoutInput = (0, helpers_1.hasCompanyDutyKey)(this.data.layout)
                 ? (0, index_1.processCardLayout)(this.data.layout, data)
                 : this.data.layout;
             const rootData = (0, index_1.handleSpecialFields)(data);
             if (!layoutInput.length) {
-                this.setData({ cards: [], rootData });
+                this.setData({
+                    cards: [],
+                    rootData,
+                    activeCard: null,
+                    canvasCard: null,
+                    frontCard: null,
+                    backCard: null,
+                    activeIndex: 0,
+                    flipEnabled: false,
+                    showToggle: false,
+                    isFlipped: false,
+                    isSwitching: false,
+                });
                 return;
             }
             const normalizedLayouts = (0, index_1.normalizeLayout)(layoutInput);
             const cards = buildCards(normalizedLayouts);
-            this.setData({ cards, rootData, firstCard: [cards[0]] });
+            const activeIndex = 0;
+            const flipEnabled = cards.length > 1;
+            const activeCard = cards[activeIndex] || null;
+            const frontCard = cards[0] || null;
+            const backCard = cards[1] || null;
+            this.setData({
+                cards,
+                rootData,
+                firstCard: [cards[0]],
+                activeIndex,
+                activeCard,
+                canvasCard: activeCard,
+                frontCard,
+                backCard,
+                flipEnabled,
+                showToggle: flipEnabled,
+                isFlipped: false,
+                isSwitching: false,
+            });
+        },
+        handleToggleCard() {
+            const cards = this.data.cards;
+            if (!cards || cards.length < 2)
+                return;
+            if (this.data.isSwitching)
+                return;
+            const self = this;
+            if (self._switchTimer) {
+                clearTimeout(self._switchTimer);
+                self._switchTimer = null;
+            }
+            const nextIndex = this.data.activeIndex === 0 ? 1 : 0;
+            this.setData({
+                activeIndex: nextIndex,
+                activeCard: cards[nextIndex],
+                canvasCard: cards[nextIndex],
+                isFlipped: nextIndex === 1,
+                isSwitching: true,
+            });
+            self._switchTimer = setTimeout(() => {
+                self._switchTimer = null;
+                this.setData({ isSwitching: false });
+            }, SWITCH_ANIMATION_MS);
+        },
+        onToggleTap() {
+            this.handleToggleCard();
+        },
+        onTouchStart(event) {
+            const touch = event.touches && event.touches[0];
+            if (!touch)
+                return;
+            const self = this;
+            self._touchStartX = touch.clientX;
+            self._touchStartY = touch.clientY;
+        },
+        onTouchEnd(event) {
+            const self = this;
+            const touch = event.changedTouches && event.changedTouches[0];
+            if (!touch)
+                return;
+            const startX = self._touchStartX;
+            const startY = self._touchStartY;
+            self._touchStartX = null;
+            self._touchStartY = null;
+            if (typeof startX !== "number" || typeof startY !== "number")
+                return;
+            const dx = touch.clientX - startX;
+            const dy = touch.clientY - startY;
+            const absDx = Math.abs(dx);
+            const absDy = Math.abs(dy);
+            if (absDx > SWIPE_MIN_DISTANCE && absDx > absDy * SWIPE_DIRECTION_RATIO) {
+                this.handleToggleCard();
+            }
+        },
+        onTouchCancel() {
+            const self = this;
+            self._touchStartX = null;
+            self._touchStartY = null;
         },
         async handleDrawCanvas(options) {
             const self = this;
@@ -138,16 +256,22 @@ Component({
                     self._isDrawing = false;
                 }
             }
-        },
-        async handleDrawShareCanvas() {
+        }, async handleDrawShareCanvas() {
             var _a, _b, _c;
             const self = this;
             if (self._isDrawing)
                 return;
             self._isDrawing = true;
+            let previousCanvasCard;
             try {
                 // wait for setData / component render
                 await nextTick();
+                const frontCard = this.data.frontCard || this.data.activeCard;
+                previousCanvasCard = this.data.canvasCard;
+                if (frontCard && frontCard !== previousCanvasCard) {
+                    await new Promise((resolve) => this.setData({ canvasCard: frontCard }, resolve));
+                    await nextTick();
+                }
                 const layoutPath = await this.handleDrawCanvas({ waitForReady: false, skipDrawingGuard: true });
                 if (!layoutPath)
                     return;
@@ -165,6 +289,9 @@ Component({
                 return filePath;
             }
             finally {
+                if (previousCanvasCard && previousCanvasCard !== this.data.canvasCard) {
+                    this.setData({ canvasCard: previousCanvasCard });
+                }
                 self._isDrawing = false;
             }
         },
@@ -173,8 +300,7 @@ Component({
                 global: true,
                 family: "layoutIconFont",
                 scopes: ["native"],
-                // 可以为 https 链接或者 Data URL
-                source: "https://at.alicdn.com/t/c/font_5095635_ztv7ro0zm59.ttf?t=1766563440291",
+                source: "https://at.alicdn.com/t/c/font_5095635_0u3b33ft9ub.ttf?t=1770624313420",
             });
         },
     },

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

@@ -1,39 +1,63 @@
-<template name="layout-template">
-  <block wx:for="{{renderCards}}" wx:key="id">
-    <view class="km-card-layout layout-container">
-      <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 class="km-card-layout layout-view-container" bindtouchstart="onTouchStart" bindtouchend="onTouchEnd" bindtouchcancel="onTouchCancel">
+  <view class="km-card-layout__item canvas-item">
+    <view wx:if="{{flipEnabled}}" class="km-card-layout__flip {{isFlipped ? 'is-flipped' : ''}} {{isSwitching ? 'is-switching' : ''}}" style="{{frontCard.sizeStyle}}">
+      <view class="km-card-layout__face km-card-layout__face--front">
+        <template is="card-content" data="{{ idPrefix: 'view', card: frontCard, rootData: rootData }}" />
+      </view>
+      <view class="km-card-layout__face km-card-layout__face--back">
+        <template is="card-content" data="{{ idPrefix: 'view', card: backCard, rootData: rootData }}" />
       </view>
     </view>
-  </block>
-</template>
-<template is="layout-template" data="{{ renderCards: cards, rootData: rootData }}"></template>
-<!-- 暂时只绘制第一张卡片 -->
-<wxml2canvas id="layout-canvas" container-class="layout-container" item-class="canvas-item"></wxml2canvas>
+    <view wx:else class="km-card-layout__single">
+      <template is="card-content" data="{{ idPrefix: 'view', card: activeCard, rootData: rootData }}" />
+    </view>
+    <view wx:if="{{showToggle}}" class="km-card-layout__toggle" catchtap="onToggleTap">
+      <icon-element element="{{switch}}" > </icon-element>
+      <text class="km-card-layout__toggle-text">{{activeIndex === 0?'反面':'正面'}}</text>
+    </view>
+  </view>
+</view>
+
+<view class="km-card-layout layout-canvas-container" style="{{canvasCard.sizeStyle}}">
+  <view class="km-card-layout__item canvas-item">
+    <view class="km-card-layout__single">
+      <template is="card-content" data="{{ idPrefix: 'canvas', card: canvasCard, rootData: rootData }}" />
+    </view>
+  </view>
+</view>
+
+<wxml2canvas id="layout-canvas" container-class="layout-canvas-container" item-class="canvas-item"></wxml2canvas>
 <share-canvas id="share-canvas"></share-canvas>
+
+<template name="card-content">
+  <view wx:if="{{card}}" class="km-card canvas-item" style="{{card.cardStyle}}">
+    <image wx:if="{{card.backgroundImage}}" class="km-card__bg canvas-item" style="{{card.backgroundStyle}}" src="{{card.backgroundImage}}" mode="aspectFill" />
+    <block wx:for="{{card.elements}}" wx:key="id">
+      <template wx:if="{{item.visible !== false}}" is="render-element" data="{{el:item, rootData: rootData, idPrefix: idPrefix}}" />
+    </block>
+  </view>
+</template>
+
 <template name="render-element">
   <block wx:if="{{el.type === 'image'}}">
-    <image-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
+    <image-element id="{{idPrefix}}-node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
   <block wx:elif="{{el.type === 'icon'}}">
-    <icon-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
+    <icon-element id="{{idPrefix}}-node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
   <block wx:elif="{{el.type === 'layout-panel'}}">
-    <layout-panel-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}">
+    <layout-panel-element id="{{idPrefix}}-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}}" />
+        <template is="render-element" data="{{el:item, rootData: rootData, idPrefix: idPrefix}}" />
       </block>
     </layout-panel-element>
   </block>
   <block wx:elif="{{el.type === 'custom'}}">
-    <custom-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
+    <custom-element id="{{idPrefix}}-node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
   <block wx:else>
-    <text-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
+    <text-element id="{{idPrefix}}-node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
-</template>
+</template>
+
+

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

@@ -2,10 +2,66 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  perspective: 1200rpx;
 }
 
 .km-card-layout__item {
   width: 100%;
+  position: relative;
+}
+
+.layout-canvas-container {
+  position: fixed;
+  left: -10000rpx;
+  top: 0;
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.km-card-layout__flip {
+  position: relative;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  transition: transform 420ms ease;
+  transform-origin: center;
+  will-change: transform;
+}
+
+.km-card-layout__flip.is-flipped {
+  transform: rotateY(180deg);
+}
+
+.km-card-layout__flip:not(.is-switching) .km-card-layout__face--back {
+  visibility: hidden;
+}
+
+.km-card-layout__flip.is-flipped:not(.is-switching) .km-card-layout__face--front {
+  visibility: hidden;
+}
+
+.km-card-layout__flip.is-flipped:not(.is-switching) .km-card-layout__face--back {
+  visibility: visible;
+}
+
+.km-card-layout__face {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+
+.km-card-layout__face--back {
+  transform: rotateY(180deg);
+}
+
+.km-card-layout__single {
+  position: relative;
 }
 
 .km-card {
@@ -15,6 +71,8 @@
   color: inherit;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   background: transparent;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
 .km-card__bg {
@@ -25,3 +83,27 @@
   height: 100%;
   object-fit: cover;
 }
+
+.km-card-layout__toggle {
+  position: absolute;
+  top: 48rpx;
+  right: 20rpx;
+  z-index: 20;
+  padding: 8rpx 16rpx;
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+  border-radius: 30px;
+  border: 0.5px solid #FFF;
+  color: #fff;
+  background: rgba(85, 85, 85, 0.30);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4rpx);
+
+}
+
+.km-card-layout__toggle-text {
+  color: #ffffff;
+  font-size: 24rpx;
+  line-height: 1;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "km-card-layout-component-miniprogram",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "description": "",
   "main": "miniprogram_dist/index.js",
   "miniprogram": "miniprogram_dist",

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

@@ -9,13 +9,13 @@ import { ICON_CODE_MAP } from "../../icon-map";
 
 const normalizeIconName = (name?: string) => {
   if (!name) return "";
-  return name.startsWith("icon-") ? name.slice(5) : name;
+  return name.startsWith("layout-icon-") ? name.slice(5) : name;
 };
 
 const buildIconClassName = (name?: string) => {
   const normalized = normalizeIconName(name);
   if (!normalized) return "";
-  return `icon-${normalized}`;
+  return `layout-icon-${normalized}`;
 };
 
 const buildIconCode = (name?: string) => {

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

@@ -1,3 +1,3 @@
 <view class="km-node km-node--icon canvas-item" style="{{wrapperStyle}}">
-  <view class="km-node__icon icon {{iconClass}} canvas-item" style="{{contentStyle}}" data-icon="{{iconCode}}"></view>
+  <view class="km-node__icon layoutIconFont {{iconClass}} canvas-item" style="{{contentStyle}}" data-icon="{{iconCode}}"></view>
 </view>

package/src/components/card-layout/elements/icon-font.wxss

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "layoutIconFont"; /* Project id 5095635 */
-  src: url('//at.alicdn.com/t/c/font_5095635_ztv7ro0zm59.woff2?t=1766563440291') format('woff2'),
-       url('//at.alicdn.com/t/c/font_5095635_ztv7ro0zm59.woff?t=1766563440291') format('woff'),
-       url('//at.alicdn.com/t/c/font_5095635_ztv7ro0zm59.ttf?t=1766563440291') format('truetype'),
-       url('//at.alicdn.com/t/c/font_5095635_ztv7ro0zm59.svg?t=1766563440291#layoutIconFont') format('svg');
+  src: url('//at.alicdn.com/t/c/font_5095635_0u3b33ft9ub.woff2?t=1770624313420') format('woff2'),
+       url('//at.alicdn.com/t/c/font_5095635_0u3b33ft9ub.woff?t=1770624313420') format('woff'),
+       url('//at.alicdn.com/t/c/font_5095635_0u3b33ft9ub.ttf?t=1770624313420') format('truetype'),
+       url('//at.alicdn.com/t/c/font_5095635_0u3b33ft9ub.svg?t=1770624313420#layoutIconFont') format('svg');
 }
 
 .layoutIconFont {
@@ -14,6 +14,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.layout-icon-refresh:before {
+  content: "\e62b";
+}
+
 .layout-icon-round:before {
   content: "\e608";
 }

package/src/components/card-layout/icon-map.ts

@@ -10,4 +10,5 @@ export const ICON_CODE_MAP: Record<string, string> = {
   address: "e628",
   "website-line": "e679",
   website: "e643",
+  refresh: "e62b",
 };

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

@@ -19,18 +19,20 @@ const EMPTY_COMPANY_DUTY: CompanyDuty = {
   duty: "",
 };
 
+const SWITCH_ANIMATION_MS = 420;
+const SWIPE_MIN_DISTANCE = 40;
+const SWIPE_DIRECTION_RATIO = 1.2;
+
 /**
- * 规范化 moreCardInfo.company，保证长度始终为 2
+ * 规范�?moreCardInfo.company，保证长度始终为 2
  */
 export function normalizeMoreCompany(data: AnyObject): AnyObject {
   const origin = data.user?.moreCardInfo?.company;
 
-  // 不存在 / 不是数组 → 不处理
   if (!Array.isArray(origin)) {
     return data;
   }
 
-  // 长度 === 0 → 不处理
   if (origin.length === 0) {
     return data;
   }
@@ -58,6 +60,7 @@ type RenderElement = CardElement;
 type RenderCard = {
   id: string;
   cardStyle: string;
+  sizeStyle: string;
   backgroundImage?: string;
   backgroundStyle: string;
   elements: RenderElement[];
@@ -69,13 +72,25 @@ const pickCardId = (layout: any, idx: number) => {
 };
 
 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: layout.children || [],
-  }));
+  return layouts.map((layout, idx) => {
+    const baseCardStyle = buildCardStyle(layout, "rpx");
+    const cardStyle = styleObjectToString(baseCardStyle, "rpx");
+    const sizeStyle = styleObjectToString(
+      {
+        width: baseCardStyle.width,
+        height: baseCardStyle.height,
+      },
+      "rpx",
+    );
+    return {
+      id: pickCardId(layouts[idx], idx),
+      cardStyle,
+      sizeStyle,
+      backgroundImage: layout.backgroundImage || "",
+      backgroundStyle: styleObjectToString(buildBackgroundStyle(layout, "rpx"), "rpx"),
+      elements: layout.children || [],
+    };
+  });
 };
 
 const nextTick = () =>
@@ -105,6 +120,20 @@ Component({
     rootData: {} as Record<string, any>,
     firstCard: [] as RenderCard[],
     shareImage: "",
+    activeCard: null as RenderCard | null,
+    canvasCard: null as RenderCard | null,
+    frontCard: null as RenderCard | null,
+    backCard: null as RenderCard | null,
+    activeIndex: 0,
+    flipEnabled: false,
+    showToggle: false,
+    isFlipped: false,
+    isSwitching: false,
+    switch: {
+      name: "refresh",
+      size: 14,
+      style: "fill",
+    },
   },
   observers: {
     layout() {
@@ -129,18 +158,119 @@ Component({
       return self._fontReady;
     },
     rebuild() {
+      const self = this as any;
+      if (self._switchTimer) {
+        clearTimeout(self._switchTimer);
+        self._switchTimer = null;
+      }
       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 });
+        this.setData({
+          cards: [],
+          rootData,
+          activeCard: null,
+          canvasCard: null,
+          frontCard: null,
+          backCard: null,
+          activeIndex: 0,
+          flipEnabled: false,
+          showToggle: false,
+          isFlipped: false,
+          isSwitching: false,
+        });
         return;
       }
       const normalizedLayouts = normalizeLayout(layoutInput);
       const cards = buildCards(normalizedLayouts);
-      this.setData({ cards, rootData, firstCard: [cards[0]] });
+      const activeIndex = 0;
+      const flipEnabled = cards.length > 1;
+      const activeCard = cards[activeIndex] || null;
+      const frontCard = cards[0] || null;
+      const backCard = cards[1] || null;
+      this.setData({
+        cards,
+        rootData,
+        firstCard: [cards[0]],
+        activeIndex,
+        activeCard,
+        canvasCard: activeCard,
+        frontCard,
+        backCard,
+        flipEnabled,
+        showToggle: flipEnabled,
+        isFlipped: false,
+        isSwitching: false,
+      });
+    },
+
+    handleToggleCard() {
+      const cards = this.data.cards;
+      if (!cards || cards.length < 2) return;
+      if (this.data.isSwitching) return;
+
+      const self = this as any;
+      if (self._switchTimer) {
+        clearTimeout(self._switchTimer);
+        self._switchTimer = null;
+      }
+
+      const nextIndex = this.data.activeIndex === 0 ? 1 : 0;
+      this.setData({
+        activeIndex: nextIndex,
+        activeCard: cards[nextIndex],
+        canvasCard: cards[nextIndex],
+        isFlipped: nextIndex === 1,
+        isSwitching: true,
+      });
+
+      self._switchTimer = setTimeout(() => {
+        self._switchTimer = null;
+        this.setData({ isSwitching: false });
+      }, SWITCH_ANIMATION_MS);
+    },
+
+    onToggleTap() {
+      this.handleToggleCard();
+    },
+
+    onTouchStart(event: WechatMiniprogram.TouchEvent) {
+      const touch = event.touches && event.touches[0];
+      if (!touch) return;
+      const self = this as any;
+      self._touchStartX = touch.clientX;
+      self._touchStartY = touch.clientY;
+    },
+
+    onTouchEnd(event: WechatMiniprogram.TouchEvent) {
+      const self = this as any;
+      const touch = event.changedTouches && event.changedTouches[0];
+      if (!touch) return;
+
+      const startX = self._touchStartX;
+      const startY = self._touchStartY;
+      self._touchStartX = null;
+      self._touchStartY = null;
+
+      if (typeof startX !== "number" || typeof startY !== "number") return;
+
+      const dx = touch.clientX - startX;
+      const dy = touch.clientY - startY;
+      const absDx = Math.abs(dx);
+      const absDy = Math.abs(dy);
+
+      if (absDx > SWIPE_MIN_DISTANCE && absDx > absDy * SWIPE_DIRECTION_RATIO) {
+        this.handleToggleCard();
+      }
+    },
+
+    onTouchCancel() {
+      const self = this as any;
+      self._touchStartX = null;
+      self._touchStartY = null;
     },
 
     async handleDrawCanvas(options?: { waitForReady?: boolean; skipDrawingGuard?: boolean }) {
@@ -166,16 +296,22 @@ Component({
           self._isDrawing = false;
         }
       }
-    },
-
-    async handleDrawShareCanvas() {
+    },    async handleDrawShareCanvas() {
       const self = this as any;
       if (self._isDrawing) return;
       self._isDrawing = true;
+      let previousCanvasCard: RenderCard | null | undefined;
       try {
         // wait for setData / component render
         await nextTick();
 
+        const frontCard = this.data.frontCard || this.data.activeCard;
+        previousCanvasCard = this.data.canvasCard;
+        if (frontCard && frontCard !== previousCanvasCard) {
+          await new Promise<void>((resolve) => this.setData({ canvasCard: frontCard }, resolve));
+          await nextTick();
+        }
+
         const layoutPath = await this.handleDrawCanvas({ waitForReady: false, skipDrawingGuard: true });
         if (!layoutPath) return;
 
@@ -193,18 +329,24 @@ Component({
         }
         return filePath;
       } finally {
+        if (previousCanvasCard && previousCanvasCard !== this.data.canvasCard) {
+          this.setData({ canvasCard: previousCanvasCard });
+        }
         self._isDrawing = false;
       }
     },
-
     async loadFont() {
       await wx.loadFontFace({
         global: true,
         family: "layoutIconFont",
         scopes: ["native"],
-        // 可以为 https 链接或者 Data URL
-        source: "https://at.alicdn.com/t/c/font_5095635_ztv7ro0zm59.ttf?t=1766563440291",
+        source: "https://at.alicdn.com/t/c/font_5095635_0u3b33ft9ub.ttf?t=1770624313420",
       });
     },
   },
 });
+
+
+
+
+

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

@@ -1,39 +1,63 @@
-<template name="layout-template">
-  <block wx:for="{{renderCards}}" wx:key="id">
-    <view class="km-card-layout layout-container">
-      <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 class="km-card-layout layout-view-container" bindtouchstart="onTouchStart" bindtouchend="onTouchEnd" bindtouchcancel="onTouchCancel">
+  <view class="km-card-layout__item canvas-item">
+    <view wx:if="{{flipEnabled}}" class="km-card-layout__flip {{isFlipped ? 'is-flipped' : ''}} {{isSwitching ? 'is-switching' : ''}}" style="{{frontCard.sizeStyle}}">
+      <view class="km-card-layout__face km-card-layout__face--front">
+        <template is="card-content" data="{{ idPrefix: 'view', card: frontCard, rootData: rootData }}" />
+      </view>
+      <view class="km-card-layout__face km-card-layout__face--back">
+        <template is="card-content" data="{{ idPrefix: 'view', card: backCard, rootData: rootData }}" />
       </view>
     </view>
-  </block>
-</template>
-<template is="layout-template" data="{{ renderCards: cards, rootData: rootData }}"></template>
-<!-- 暂时只绘制第一张卡片 -->
-<wxml2canvas id="layout-canvas" container-class="layout-container" item-class="canvas-item"></wxml2canvas>
+    <view wx:else class="km-card-layout__single">
+      <template is="card-content" data="{{ idPrefix: 'view', card: activeCard, rootData: rootData }}" />
+    </view>
+    <view wx:if="{{showToggle}}" class="km-card-layout__toggle" catchtap="onToggleTap">
+      <icon-element element="{{switch}}" > </icon-element>
+      <text class="km-card-layout__toggle-text">{{activeIndex === 0?'反面':'正面'}}</text>
+    </view>
+  </view>
+</view>
+
+<view class="km-card-layout layout-canvas-container" style="{{canvasCard.sizeStyle}}">
+  <view class="km-card-layout__item canvas-item">
+    <view class="km-card-layout__single">
+      <template is="card-content" data="{{ idPrefix: 'canvas', card: canvasCard, rootData: rootData }}" />
+    </view>
+  </view>
+</view>
+
+<wxml2canvas id="layout-canvas" container-class="layout-canvas-container" item-class="canvas-item"></wxml2canvas>
 <share-canvas id="share-canvas"></share-canvas>
+
+<template name="card-content">
+  <view wx:if="{{card}}" class="km-card canvas-item" style="{{card.cardStyle}}">
+    <image wx:if="{{card.backgroundImage}}" class="km-card__bg canvas-item" style="{{card.backgroundStyle}}" src="{{card.backgroundImage}}" mode="aspectFill" />
+    <block wx:for="{{card.elements}}" wx:key="id">
+      <template wx:if="{{item.visible !== false}}" is="render-element" data="{{el:item, rootData: rootData, idPrefix: idPrefix}}" />
+    </block>
+  </view>
+</template>
+
 <template name="render-element">
   <block wx:if="{{el.type === 'image'}}">
-    <image-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
+    <image-element id="{{idPrefix}}-node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
   <block wx:elif="{{el.type === 'icon'}}">
-    <icon-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
+    <icon-element id="{{idPrefix}}-node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
   <block wx:elif="{{el.type === 'layout-panel'}}">
-    <layout-panel-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}">
+    <layout-panel-element id="{{idPrefix}}-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}}" />
+        <template is="render-element" data="{{el:item, rootData: rootData, idPrefix: idPrefix}}" />
       </block>
     </layout-panel-element>
   </block>
   <block wx:elif="{{el.type === 'custom'}}">
-    <custom-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
+    <custom-element id="{{idPrefix}}-node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
   <block wx:else>
-    <text-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
+    <text-element id="{{idPrefix}}-node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
-</template>
+</template>
+
+

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

@@ -2,10 +2,66 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  perspective: 1200rpx;
 }
 
 .km-card-layout__item {
   width: 100%;
+  position: relative;
+}
+
+.layout-canvas-container {
+  position: fixed;
+  left: -10000rpx;
+  top: 0;
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.km-card-layout__flip {
+  position: relative;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  transition: transform 420ms ease;
+  transform-origin: center;
+  will-change: transform;
+}
+
+.km-card-layout__flip.is-flipped {
+  transform: rotateY(180deg);
+}
+
+.km-card-layout__flip:not(.is-switching) .km-card-layout__face--back {
+  visibility: hidden;
+}
+
+.km-card-layout__flip.is-flipped:not(.is-switching) .km-card-layout__face--front {
+  visibility: hidden;
+}
+
+.km-card-layout__flip.is-flipped:not(.is-switching) .km-card-layout__face--back {
+  visibility: visible;
+}
+
+.km-card-layout__face {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+
+.km-card-layout__face--back {
+  transform: rotateY(180deg);
+}
+
+.km-card-layout__single {
+  position: relative;
 }
 
 .km-card {
@@ -15,6 +71,8 @@
   color: inherit;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   background: transparent;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
 .km-card__bg {
@@ -25,3 +83,27 @@
   height: 100%;
   object-fit: cover;
 }
+
+.km-card-layout__toggle {
+  position: absolute;
+  top: 48rpx;
+  right: 20rpx;
+  z-index: 20;
+  padding: 8rpx 16rpx;
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+  border-radius: 30px;
+  border: 0.5px solid #FFF;
+  color: #fff;
+  background: rgba(85, 85, 85, 0.30);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4rpx);
+
+}
+
+.km-card-layout__toggle-text {
+  color: #ffffff;
+  font-size: 24rpx;
+  line-height: 1;
+}