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

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

@@ -4,19 +4,29 @@ import {
   getIconName,
   styleObjectToString,
   type IconElement,
-} 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: {
@@ -29,18 +39,26 @@ Component({
     },
   },
   data: {
-    wrapperStyle: '',
-    contentStyle: '',
-    iconText: '',
+    wrapperStyle: "",
+    contentStyle: "",
+    iconClass: "",
+    iconCode: "",
   },
   observers: {
-    element(el: IconElement) {
+    element() {
+      this.rebuild();
+    },
+  },
+  methods: {
+    rebuild() {
+      const el = this.data.element as IconElement;
       if (!el) return;
-      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
-      const contentStyle = styleObjectToString(buildBaseContentStyle(el), 'rpx');
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, "rpx"), "rpx");
+      const contentStyle = styleObjectToString(buildBaseContentStyle(el), "rpx");
       const name = getIconName(el);
-      const iconText = mapIconGlyph(name, name || '');
-      this.setData({ wrapperStyle, contentStyle, iconText });
+      const iconClass = buildIconClassName(name);
+      const iconCode = buildIconCode(name);
+      this.setData({ wrapperStyle, contentStyle, iconClass, iconCode });
     },
   },
 });

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

@@ -1,7 +1,3 @@
-<template name="icon-element">
-  <view class="km-node km-node--icon" style="{{wrapperStyle}}">
-    <view class="km-node__icon icon" style="{{contentStyle}}">
-      {{iconText}}
-    </view>
-  </view>
-</template>
+<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>

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

@@ -1,3 +1,5 @@
+@import "../icon-font.wxss";
+
 .km-node {
   box-sizing: border-box;
   color: inherit;
@@ -18,20 +20,4 @@
   font-family: 'km-icon', 'PingFang SC', 'Microsoft Yahei', sans-serif;
   font-style: normal;
   font-weight: normal;
-}
-
-@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;
-}
+}

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

@@ -0,0 +1,429 @@
+.icon {
+  font-family: 'km-icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-buy-vip-13:before {
+  content: '\e66a';
+}
+
+.icon-buy-vip-11:before {
+  content: '\e669';
+}
+
+.icon-buy-vip-12:before {
+  content: '\e668';
+}
+
+.icon-contact-wechat:before {
+  content: '\e667';
+}
+
+.icon-contact-phone:before {
+  content: '\e666';
+}
+
+.icon-column-group:before {
+  content: '\e664';
+}
+
+.icon-minichat:before {
+  content: '\e617';
+}
+
+.icon-remove-module:before {
+  content: '\e660';
+}
+
+.icon-add-module:before {
+  content: '\e662';
+}
+
+.icon-drag:before {
+  content: '\e661';
+}
+
+.icon-switch-company:before {
+  content: '\e65f';
+}
+
+.icon-switch-person:before {
+  content: '\e65e';
+}
+
+.icon-manual-entry:before {
+  content: '\e65d';
+}
+
+.icon-play:before {
+  content: '\e65c';
+}
+
+.icon-plus:before {
+  content: '\e659';
+}
+
+.icon-file-pdf:before {
+  content: '\e65b';
+}
+
+.icon-file-video:before {
+  content: '\e65a';
+}
+
+.icon-upload:before {
+  content: '\e650';
+}
+
+.icon-cert-company:before {
+  content: '\e64f';
+}
+
+.icon-qr-code:before {
+  content: '\e658';
+}
+
+.icon-company-card:before {
+  content: '\e657';
+}
+
+.icon-card-import:before {
+  content: '\e64e';
+}
+
+.icon-camera:before {
+  content: '\e655';
+}
+
+.icon-card-apply:before {
+  content: '\e632';
+}
+
+.icon-check-2:before {
+  content: '\e616';
+}
+
+.icon-check:before {
+  content: '\e614';
+}
+
+.icon-buy-vip-4:before {
+  content: '\e613';
+}
+
+.icon-buy-vip-10:before {
+  content: '\e656';
+}
+
+.icon-weixin-2:before {
+  content: '\e653';
+}
+
+.icon-qrcode-1:before {
+  content: '\e654';
+}
+
+.icon-local:before {
+  content: '\e652';
+}
+
+.icon-cert-job:before {
+  content: '\e64d';
+}
+
+.icon-cert-name:before {
+  content: '\e651';
+}
+
+.icon-card-style-1:before {
+  content: '\e64c';
+}
+
+.icon-add-pic:before {
+  content: '\e646';
+}
+
+.icon-add-text:before {
+  content: '\e647';
+}
+
+.icon-buy-vip-2:before {
+  content: '\e648';
+}
+
+.icon-company-upload-logo:before {
+  content: '\e649';
+}
+
+.icon-Headset-one:before {
+  content: '\e64a';
+}
+
+.icon-edit-info:before {
+  content: '\e64b';
+}
+
+.icon-more-action:before {
+  content: '\e645';
+}
+
+.icon-upload-video:before {
+  content: '\e644';
+}
+
+.icon-upload-image:before {
+  content: '\e643';
+}
+
+.icon-company-info:before {
+  content: '\e62a';
+}
+
+.icon-contact:before {
+  content: '\e642';
+}
+
+.icon-notice-1:before {
+  content: '\e641';
+}
+
+.icon-visitor:before {
+  content: '\e640';
+}
+
+.icon-mobile-2:before {
+  content: '\e63e';
+}
+
+.icon-weixin-1:before {
+  content: '\e63f';
+}
+
+.icon-share:before {
+  content: '\e63d';
+}
+
+.icon-refund-mistake:before {
+  content: '\e637';
+}
+
+.icon-buy-vip-7:before {
+  content: '\e63b';
+}
+
+.icon-table-import:before {
+  content: '\e63c';
+}
+
+.icon-misService:before {
+  content: '\e63a';
+}
+
+.icon-buy-vip-6:before {
+  content: '\e634';
+}
+
+.icon-import:before {
+  content: '\e638';
+}
+
+.icon-download:before {
+  content: '\e639';
+}
+
+.icon-image:before {
+  content: '\e636';
+}
+
+.icon-buy-vip-9:before {
+  content: '\e635';
+}
+
+.icon-buy-vip-5:before {
+  content: '\e62f';
+}
+
+.icon-buy-vip-3:before {
+  content: '\e630';
+}
+
+.icon-buy-vip-1:before {
+  content: '\e631';
+}
+
+.icon-buy-vip-8:before {
+  content: '\e633';
+}
+
+.icon-companyWx:before {
+  content: '\e62b';
+}
+
+.icon-dingding:before {
+  content: '\e62c';
+}
+
+.icon-shui:before {
+  content: '\e62d';
+}
+
+.icon-gongzhang:before {
+  content: '\e62e';
+}
+
+.icon-wait:before {
+  content: '\e629';
+}
+
+.icon-addImg:before {
+  content: '\e628';
+}
+
+.icon-copy:before {
+  content: '\e625';
+}
+
+.icon-mobile-1:before {
+  content: '\e627';
+}
+
+.icon-functional-config:before {
+  content: '\e604';
+}
+
+.icon-module-config:before {
+  content: '\e601';
+}
+
+.icon-select-right:before {
+  content: '\e626';
+}
+
+.icon-like:before {
+  content: '\e624';
+}
+
+.icon-weixin:before {
+  content: '\e620';
+}
+
+.icon-column-user:before {
+  content: '\e621';
+}
+
+.icon-column-card:before {
+  content: '\e622';
+}
+
+.icon-column-company-card:before {
+  content: '\e623';
+}
+
+.icon-on-job:before {
+  content: '\e61e';
+}
+
+.icon-person:before {
+  content: '\e61f';
+}
+
+.icon-wallet:before {
+  content: '\e615';
+}
+
+.icon-opinion:before {
+  content: '\e618';
+}
+
+.icon-sys-set:before {
+  content: '\e619';
+}
+
+.icon-sys-msg:before {
+  content: '\e61d';
+}
+
+.icon-add:before {
+  content: '\e61a';
+}
+
+.icon-search:before {
+  content: '\e61b';
+}
+
+.icon-delete:before {
+  content: '\e61c';
+}
+
+.icon-enter:before {
+  content: '\e60f';
+}
+
+.icon-card-style:before {
+  content: '\e610';
+}
+
+.icon-switch:before {
+  content: '\e612';
+}
+
+.icon-card-edit:before {
+  content: '\e60a';
+}
+
+.icon-close:before {
+  content: '\e60d';
+}
+
+.icon-notice:before {
+  content: '\e611';
+}
+
+.icon-edit:before {
+  content: '\e60b';
+}
+
+.icon-help-info:before {
+  content: '\e60c';
+}
+
+.icon-tag-filtering:before {
+  content: '\e60e';
+}
+
+.icon-kuanmai-logo:before {
+  content: '\e603';
+}
+
+.icon-company:before {
+  content: '\e606';
+}
+
+.icon-email:before {
+  content: '\e607';
+}
+
+.icon-round:before {
+  content: '\e608';
+}
+
+.icon-address:before {
+  content: '\e609';
+}
+
+.icon-mobile:before {
+  content: '\e602';
+}
+.icon-helper:before {
+  content: '\e663';
+}
+
+.icon-bag:before {
+  content: '\e605';
+}
+.icon-group:before {
+  content: '\e665';
+}

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

@@ -4,11 +4,11 @@ import {
   getImageSrc,
   styleObjectToString,
   type ImageElement,
-} from '../../../../vendor/km-card-layout-core/index';
+} from "../../../../vendor/km-card-layout-core/index";
 
 Component({
   options: {
-    styleIsolation: 'apply-shared',
+    styleIsolation: "apply-shared",
   },
   properties: {
     element: {
@@ -19,21 +19,31 @@ Component({
       type: Object,
       value: {},
     },
+
   },
   data: {
-    wrapperStyle: '',
-    contentStyle: '',
-    imageSrc: '',
-    mode: 'aspectFill',
+    wrapperStyle: "",
+    contentStyle: "",
+    imageSrc: "",
+    mode: "aspectFill",
   },
   observers: {
-    element(el: ImageElement) {
+    element() {
+      this.rebuild();
+    },
+    rootData() {
+      this.rebuild();
+    },
+  },
+  methods: {
+    rebuild() {
+      const el = this.data.element as ImageElement;
       if (!el) return;
-      const data: Record<string, any> = this.data.rootData || {};
-      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
-      const contentStyle = styleObjectToString(buildImageContentStyle(el), 'rpx');
+      const data = this.data.rootData || {};
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, "rpx"), "rpx");
+      const contentStyle = styleObjectToString(buildImageContentStyle(el), "rpx");
       const imageSrc = getImageSrc(el, data);
-      const mode = el.fit === 'contain' ? 'aspectFit' : 'aspectFill';
+      const mode = el.fit === "contain" ? "aspectFit" : "aspectFill";
       this.setData({ wrapperStyle, contentStyle, imageSrc, mode });
     },
   },

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

@@ -1,10 +1,8 @@
-<template name="image-element">
-  <view class="km-node" style="{{wrapperStyle}}">
-    <image
-      class="km-node__image"
-      style="{{contentStyle}}"
-      src="{{imageSrc}}"
-      mode="{{mode}}"
-    />
-  </view>
-</template>
+<view class="km-node canvas-item" style="{{wrapperStyle}}">
+  <image
+    class="km-node__image canvas-item"
+    style="{{contentStyle}}"
+    src="{{imageSrc}}"
+    mode="{{mode}}"
+  />
+</view>

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

@@ -7,4 +7,4 @@
   width: 100%;
   height: 100%;
   display: block;
-}
+}

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

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

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;
+}