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

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 {
@@ -13,8 +69,10 @@
   overflow: hidden;
   box-sizing: border-box;
   color: inherit;
-  font-family: 'PingFang SC', 'Microsoft Yahei', sans-serif;
+  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/src/vendor/km-card-layout-core/index.ts

@@ -15,7 +15,7 @@ export {
 } from './layout';
 export { resolveBindingValue } from './data';
 export { stripLayoutBindings, applyItemCollectBindings } from './bindings';
-export { backgroundChange } from './ops/changeBackground';
+export { backgroundChange, applySpecialColor } from './ops/changeBackground';
 export {
   buildWrapperStyle,
   buildCardStyle,

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

@@ -35,7 +35,7 @@ export interface TextIconConfig {
   enable?: boolean;
   style?: 'fill' | 'dot' | 'line' | 'text';
   // 控制图标属性区域是否显示（用户端）
-  visible:boolean;
+  visible ?:boolean;
 }
 
 export interface TextElement extends CardElementBase {

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

@@ -10,69 +10,75 @@ const toNameArray = (name?: string | string[]) => {
     .filter(Boolean);
 };
 
-export function backgroundChange(
-  bg: TemplateBackground,
-  layout: CardLayoutSchema
-): CardLayoutSchema {
+export function applySpecialColor (
+  el: CardElement,
+  bg: TemplateBackground
+): CardElement {
   const extras = bg.fontColorExtra || [];
-  const iconSpecialColor =
-    extras.find(sc => toNameArray(sc.name).some(n => n === 'icon'))?.color;
-
-  const applySpecialColor = (el: CardElement): CardElement => {
-    const keys: string[] = [];
-    if (el.binding) keys.push(String(el.binding));
-    if (el.id) keys.push(String(el.id));
-    if (el.type === 'icon') keys.push('icon');
-    if (el.type === 'custom') keys.push('decor');
+  const iconSpecialColor = extras.find(sc =>
+    toNameArray(sc.name).some(n => n === 'icon')
+  )?.color;
+  const keys: string[] = [];
+  if (el.binding) keys.push(String(el.binding));
+  if (el.id) keys.push(String(el.id));
+  if (el.type === 'icon') keys.push('icon');
+  if (el.type === 'custom') keys.push('decor');
 
-    const matched = extras.find(sc =>
-      toNameArray(sc.name).some(n => keys.some(k => k?.startsWith(n)))
-    );
+  const matched = extras.find(sc =>
+    toNameArray(sc.name).some(n => keys.some(k => k?.startsWith(n)))
+  );
 
-    const baseStyle = { ...(el.style || {}) };
-    let nextEl: CardElement = el;
+  const baseStyle = { ...(el.style || {}) };
+  let nextEl: CardElement = el;
 
-    if (matched) {
-      if (el.type === 'custom') {
-        nextEl = { ...el, style: { ...baseStyle, backgroundColor: matched.color } };
-      } else {
-        nextEl = { ...el, style: { ...baseStyle, color: matched.color } };
-      }
+  if (matched) {
+    if (el.type === 'custom') {
+      nextEl = {
+        ...el,
+        style: { ...baseStyle, backgroundColor: matched.color },
+      };
     } else {
-      const nextStyle = { ...baseStyle };
-      let changed = false;
-      if (el.type === 'custom') {
-        if ('backgroundColor' in nextStyle) {
-          delete nextStyle.backgroundColor;
-          changed = true;
-        }
-        if ('background' in nextStyle) {
-          delete nextStyle.background;
-          changed = true;
-        }
-      }
-      if ('color' in nextStyle) {
-        delete nextStyle.color;
+      nextEl = { ...el, style: { ...baseStyle, color: matched.color } };
+    }
+  } else {
+    const nextStyle = { ...baseStyle };
+    let changed = false;
+    if (el.type === 'custom') {
+      if ('backgroundColor' in nextStyle) {
+        delete nextStyle.backgroundColor;
         changed = true;
       }
-      if (changed) {
-        nextEl = { ...el, style: nextStyle };
+      if ('background' in nextStyle) {
+        delete nextStyle.background;
+        changed = true;
       }
     }
+    if ('color' in nextStyle) {
+      delete nextStyle.color;
+      changed = true;
+    }
+    if (changed) {
+      nextEl = { ...el, style: nextStyle };
+    }
+  }
 
-    if (nextEl.type === 'text' && (nextEl as any).icon) {
-      const nextIcon = { ...(nextEl as any).icon };
-      if (iconSpecialColor) {
-        nextIcon.color = iconSpecialColor;
-      } else if ('color' in nextIcon) {
-        delete nextIcon.color;
-      }
-      nextEl = { ...(nextEl as any), icon: nextIcon } as CardElement;
+  if (nextEl.type === 'text' ) {
+    const nextIcon = (nextEl as any).icon ? { ...(nextEl as any).icon } :{};
+    if (iconSpecialColor) {
+      nextIcon.color = iconSpecialColor;
+    } else if ('color' in nextIcon) {
+      delete nextIcon.color;
     }
+    nextEl = { ...(nextEl as any), icon: nextIcon } as CardElement;
+  }
 
-    return nextEl;
-  };
+  return nextEl;
+};
 
+export function backgroundChange(
+  bg: TemplateBackground,
+  layout: CardLayoutSchema
+): CardLayoutSchema {
   const traverse = (children: CardElement[] = []): CardElement[] =>
     children.map(el => {
       if (!el) return el;
@@ -82,7 +88,7 @@ export function backgroundChange(
           children: traverse(el.children || []),
         };
       }
-      return applySpecialColor(el);
+      return applySpecialColor(el, bg);
     });
 
   const nextChildren = traverse(layout.children || []);

package/src/vendor/km-card-layout-core/types.d.ts

@@ -72,7 +72,10 @@ export function backgroundChange(
   bg: TemplateBackground,
   layout: CardLayoutSchema
 ): CardLayoutSchema;
-
+export function applySpecialColor (
+  el: CardElement,
+  bg: TemplateBackground
+): CardElement;
 export function buildWrapperStyle(
   el: CardElement,
   unit?: 'px' | 'rpx'