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

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

@@ -56,7 +56,7 @@ Component({
             const data = this.data.rootData || {};
             const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, "rpx"), "rpx");
             const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildTextContentStyle)(el, "rpx"), "rpx");
-            const textValue = (0, index_1.getTextValue)(el, data);
+            const textValue = (0, index_1.getTextValue)(el, data, false);
             const textStyle = (0, index_1.styleObjectToString)({
                 ...(0, index_1.buildTextContentStyle)(el, "rpx"),
                 ...(0, index_1.buildTextValueStyle)(el, "rpx"),

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

@@ -87,11 +87,18 @@ Component({
     },
     lifetimes: {
         attached() {
-            this.loadFont();
+            this.ensureFontReady();
             this.rebuild();
         },
     },
     methods: {
+        ensureFontReady() {
+            const self = this;
+            if (!self._fontReady) {
+                self._fontReady = this.loadFont().catch(() => undefined);
+            }
+            return self._fontReady;
+        },
         rebuild() {
             const data = normalizeMoreCompany(this.data.data);
             const layoutInput = (0, helpers_1.hasCompanyDutyKey)(this.data.layout)
@@ -107,10 +114,17 @@ Component({
             this.setData({ cards, rootData, firstCard: [cards[0]] });
         },
         async handleDrawCanvas(options) {
+            const self = this;
+            if (!(options === null || options === void 0 ? void 0 : options.skipDrawingGuard)) {
+                if (self._isDrawing)
+                    return;
+                self._isDrawing = true;
+            }
             try {
                 if ((options === null || options === void 0 ? void 0 : options.waitForReady) !== false) {
                     await nextTick();
                 }
+                await this.ensureFontReady();
                 const canvas = this.selectComponent(`#layout-canvas`);
                 await canvas.draw(this);
                 const filePath = await canvas.toTempFilePath();
@@ -119,26 +133,40 @@ Component({
             catch (_a) {
                 wx.showToast({ title: "保存失败", icon: "error" });
             }
+            finally {
+                if (!(options === null || options === void 0 ? void 0 : options.skipDrawingGuard)) {
+                    self._isDrawing = false;
+                }
+            }
         },
         async handleDrawShareCanvas() {
             var _a, _b, _c;
-            // 等 setData / 组件渲染完成
-            await nextTick();
-            const layoutPath = await this.handleDrawCanvas({ waitForReady: false });
-            if (!layoutPath)
-                return;
-            const shareCanvas = this.selectComponent(`#share-canvas`);
-            if (!shareCanvas || typeof shareCanvas.drawShare !== "function")
+            const self = this;
+            if (self._isDrawing)
                 return;
-            const shareStyleId = (_c = (_b = (_a = this.data.data) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.shareStyle) === null || _c === void 0 ? void 0 : _c.coverStyleId;
-            const filePath = await shareCanvas.drawShare({
-                layoutPath,
-                shareStyleId,
-            });
-            if (filePath) {
-                this.setData({ shareImage: filePath });
+            self._isDrawing = true;
+            try {
+                // wait for setData / component render
+                await nextTick();
+                const layoutPath = await this.handleDrawCanvas({ waitForReady: false, skipDrawingGuard: true });
+                if (!layoutPath)
+                    return;
+                const shareCanvas = this.selectComponent(`#share-canvas`);
+                if (!shareCanvas || typeof shareCanvas.drawShare !== "function")
+                    return;
+                const shareStyleId = (_c = (_b = (_a = this.data.data) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.shareStyle) === null || _c === void 0 ? void 0 : _c.coverStyleId;
+                const filePath = await shareCanvas.drawShare({
+                    layoutPath,
+                    shareStyleId,
+                });
+                if (filePath) {
+                    this.setData({ shareImage: filePath });
+                }
+                return filePath;
+            }
+            finally {
+                self._isDrawing = false;
             }
-            return filePath;
         },
         async loadFont() {
             await wx.loadFontFace({

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

@@ -11,6 +11,29 @@ const resolveShareStyle = (shareStyleId) => {
     return share_style_1.ShareStyle[0];
 };
 const resolveShareBackground = (style) => (style === null || style === void 0 ? void 0 : style.bigImg) || (style === null || style === void 0 ? void 0 : style.path) || (style === null || style === void 0 ? void 0 : style.smallImg) || "";
+const nextTick = () => new Promise((resolve) => {
+    wx.nextTick(() => resolve());
+});
+const sleep = (ms) => new Promise((resolve) => {
+    setTimeout(resolve, ms);
+});
+const imageInfoCache = new Map();
+const preloadImage = (src) => {
+    if (!src)
+        return Promise.resolve();
+    const cached = imageInfoCache.get(src);
+    if (cached)
+        return cached;
+    const promise = new Promise((resolve) => {
+        wx.getImageInfo({
+            src,
+            success: () => resolve(),
+            fail: () => resolve(),
+        });
+    });
+    imageInfoCache.set(src, promise);
+    return promise;
+};
 Component({
     data: {
         shareBgImage: "",
@@ -24,7 +47,32 @@ Component({
                 this.setData(data, resolve);
             });
         },
+        getRects(selector) {
+            return new Promise((resolve) => {
+                const query = this.createSelectorQuery();
+                query.selectAll(selector).boundingClientRect();
+                query.exec((res) => {
+                    resolve((res && res[0]) || []);
+                });
+            });
+        },
+        async waitForImagesReady(srcs) {
+            await nextTick();
+            await Promise.all(srcs.map((src) => preloadImage(src)));
+            for (let i = 0; i < 10; i += 1) {
+                const rects = await this.getRects(".share-container image");
+                if (rects.length === 0
+                    || rects.every((rect) => rect && rect.width > 0 && rect.height > 0)) {
+                    return;
+                }
+                await sleep(50);
+            }
+        },
         async drawShare(options) {
+            const self = this;
+            if (self._isDrawing)
+                return;
+            self._isDrawing = true;
             try {
                 const { layoutPath, shareStyleId } = options || {};
                 if (!layoutPath)
@@ -41,6 +89,7 @@ Component({
                     shareOffsetY,
                     shareImage: layoutPath,
                 });
+                await this.waitForImagesReady([shareBgImage, layoutPath]);
                 const canvas = this.selectComponent(`#share-canvas`);
                 if (!canvas)
                     return;
@@ -51,6 +100,9 @@ Component({
             catch (_a) {
                 wx.showToast({ title: "保存失败", icon: "error" });
             }
+            finally {
+                self._isDrawing = false;
+            }
         },
     },
 });

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

@@ -6,6 +6,6 @@
     mode="widthFix"
     style="margin-left: {{shareOffsetX}}rpx; margin-top: {{shareOffsetY}}rpx;"
   />
-  <image class="share-bg share-item" src="{{shareBgImage}}" />
+  <image class="share-bg share-item" src="{{shareBgImage}}" mode="aspectFill" />
 </view>
 <wxml2canvas id="share-canvas" container-class="share-container" item-class="share-item"></wxml2canvas>

package/miniprogram_dist/vendor/km-card-layout-core/render/helpers.js

@@ -129,7 +129,7 @@ const buildImageContentStyle = (el, unit = 'px') => {
     return style;
 };
 exports.buildImageContentStyle = buildImageContentStyle;
-const getTextValue = (el, data) => {
+const getTextValue = (el, data, useDefault = true) => {
     // 如果 id 匹配，则使用 mock 的 binding，否则用原来的
     const binding = el.id === String(exports.mockBaseCompanyDutyTemplateItem.id)
         ? exports.mockBaseCompanyDutyTemplateItem.bind
@@ -137,15 +137,21 @@ const getTextValue = (el, data) => {
     const bound = binding && data ? (0, data_1.resolveBindingValue)(binding, data) : undefined;
     const val = bound !== undefined && bound !== null
         ? bound
-        : el.defaultValue !== undefined && el.defaultValue !== null
+        : useDefault && el.defaultValue !== undefined && el.defaultValue !== null
             ? el.defaultValue
             : '';
     return `${val !== null && val !== void 0 ? val : ''}`;
 };
 exports.getTextValue = getTextValue;
-const getImageSrc = (el, data) => {
+const getImageSrc = (el, data, useDefault = true) => {
     const bound = el.binding && data ? (0, data_1.resolveBindingValue)(el.binding, data) : undefined;
-    return bound || el.defaultUrl || el.defaultValue || '';
+    if (bound) {
+        return bound;
+    }
+    if (useDefault) {
+        return el.defaultUrl || el.defaultValue || '';
+    }
+    return '';
 };
 exports.getImageSrc = getImageSrc;
 const getIconName = (el) => (el.name || el.defaultValue || '');

package/package.json

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

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

@@ -62,7 +62,7 @@ Component({
       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 textValue = getTextValue(el, data, false);
       const textStyle = styleObjectToString(
         {
           ...buildTextContentStyle(el, "rpx"),

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

@@ -116,11 +116,18 @@ Component({
   },
   lifetimes: {
     attached() {
-      this.loadFont();
+      this.ensureFontReady();
       this.rebuild();
     },
   },
   methods: {
+    ensureFontReady() {
+      const self = this as any;
+      if (!self._fontReady) {
+        self._fontReady = this.loadFont().catch(() => undefined);
+      }
+      return self._fontReady;
+    },
     rebuild() {
       const data = normalizeMoreCompany(this.data.data);
       const layoutInput = hasCompanyDutyKey(this.data.layout)
@@ -136,11 +143,17 @@ Component({
       this.setData({ cards, rootData, firstCard: [cards[0]] });
     },
 
-    async handleDrawCanvas(options?: { waitForReady?: boolean }) {
+    async handleDrawCanvas(options?: { waitForReady?: boolean; skipDrawingGuard?: boolean }) {
+      const self = this as any;
+      if (!options?.skipDrawingGuard) {
+        if (self._isDrawing) return;
+        self._isDrawing = true;
+      }
       try {
         if (options?.waitForReady !== false) {
           await nextTick();
         }
+        await this.ensureFontReady();
 
         const canvas = this.selectComponent(`#layout-canvas`);
         await canvas.draw(this);
@@ -148,29 +161,40 @@ Component({
         return filePath;
       } catch {
         wx.showToast({ title: "保存失败", icon: "error" });
+      } finally {
+        if (!options?.skipDrawingGuard) {
+          self._isDrawing = false;
+        }
       }
     },
 
     async handleDrawShareCanvas() {
-      // 等 setData / 组件渲染完成
-      await nextTick();
+      const self = this as any;
+      if (self._isDrawing) return;
+      self._isDrawing = true;
+      try {
+        // wait for setData / component render
+        await nextTick();
 
-      const layoutPath = await this.handleDrawCanvas({ waitForReady: false });
-      if (!layoutPath) return;
+        const layoutPath = await this.handleDrawCanvas({ waitForReady: false, skipDrawingGuard: true });
+        if (!layoutPath) return;
 
-      const shareCanvas = this.selectComponent(`#share-canvas`) as any;
-      if (!shareCanvas || typeof shareCanvas.drawShare !== "function") return;
+        const shareCanvas = this.selectComponent(`#share-canvas`) as any;
+        if (!shareCanvas || typeof shareCanvas.drawShare !== "function") return;
 
-      const shareStyleId = this.data.data?.user?.shareStyle?.coverStyleId;
-      const filePath = await shareCanvas.drawShare({
-        layoutPath,
-        shareStyleId,
-      });
+        const shareStyleId = this.data.data?.user?.shareStyle?.coverStyleId;
+        const filePath = await shareCanvas.drawShare({
+          layoutPath,
+          shareStyleId,
+        });
 
-      if (filePath) {
-        this.setData({ shareImage: filePath });
+        if (filePath) {
+          this.setData({ shareImage: filePath });
+        }
+        return filePath;
+      } finally {
+        self._isDrawing = false;
       }
-      return filePath;
     },
 
     async loadFont() {

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

@@ -14,6 +14,33 @@ const resolveShareStyle = (shareStyleId?: number | string): ShareStyleItem => {
 const resolveShareBackground = (style?: ShareStyleItem) =>
   style?.bigImg || style?.path || style?.smallImg || "";
 
+const nextTick = () =>
+  new Promise<void>((resolve) => {
+    wx.nextTick(() => resolve());
+  });
+
+const sleep = (ms: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+const imageInfoCache = new Map<string, Promise<void>>();
+
+const preloadImage = (src?: string) => {
+  if (!src) return Promise.resolve();
+  const cached = imageInfoCache.get(src);
+  if (cached) return cached;
+  const promise = new Promise<void>((resolve) => {
+    wx.getImageInfo({
+      src,
+      success: () => resolve(),
+      fail: () => resolve(),
+    });
+  });
+  imageInfoCache.set(src, promise);
+  return promise;
+};
+
 Component({
   data: {
     shareBgImage: "",
@@ -27,8 +54,34 @@ Component({
         this.setData(data, resolve);
       });
     },
+    getRects(selector: string) {
+      return new Promise<any[]>((resolve) => {
+        const query = this.createSelectorQuery();
+        query.selectAll(selector).boundingClientRect();
+        query.exec((res) => {
+          resolve((res && res[0]) || []);
+        });
+      });
+    },
+    async waitForImagesReady(srcs: Array<string | undefined>) {
+      await nextTick();
+      await Promise.all(srcs.map((src) => preloadImage(src)));
+      for (let i = 0; i < 10; i += 1) {
+        const rects = await this.getRects(".share-container image");
+        if (
+          rects.length === 0
+          || rects.every((rect) => rect && rect.width > 0 && rect.height > 0)
+        ) {
+          return;
+        }
+        await sleep(50);
+      }
+    },
 
     async drawShare(options: { layoutPath: string; shareStyleId?: number | string }) {
+      const self = this as any;
+      if (self._isDrawing) return;
+      self._isDrawing = true;
       try {
         const { layoutPath, shareStyleId } = options || {};
         if (!layoutPath) return;
@@ -45,6 +98,7 @@ Component({
           shareOffsetY,
           shareImage: layoutPath,
         });
+        await this.waitForImagesReady([shareBgImage, layoutPath]);
 
         const canvas = this.selectComponent(`#share-canvas`);
         if (!canvas) return;
@@ -53,6 +107,8 @@ Component({
         return filePath;
       } catch {
         wx.showToast({ title: "保存失败", icon: "error" });
+      } finally {
+        self._isDrawing = false;
       }
     },
   },

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

@@ -6,6 +6,6 @@
     mode="widthFix"
     style="margin-left: {{shareOffsetX}}rpx; margin-top: {{shareOffsetY}}rpx;"
   />
-  <image class="share-bg share-item" src="{{shareBgImage}}" />
+  <image class="share-bg share-item" src="{{shareBgImage}}" mode="aspectFill" />
 </view>
 <wxml2canvas id="share-canvas" container-class="share-container" item-class="share-item"></wxml2canvas>

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

@@ -31,8 +31,11 @@ export interface TextIconConfig {
   color?: string;
   gap?: number;
   align?: 'left' | 'right';
+  // 图标属性的开关值
   enable?: boolean;
   style?: 'fill' | 'dot' | 'line' | 'text';
+  // 控制图标属性区域是否显示（用户端）
+  visible:boolean;
 }
 
 export interface TextElement extends CardElementBase {

package/src/vendor/km-card-layout-core/render/helpers.ts

@@ -158,10 +158,10 @@ export const buildImageContentStyle = (
       : '0';
   return style;
 };
-
 export const getTextValue = (
   el: TextElement,
-  data?: Record<string, any>
+  data?: Record<string, any>,
+  useDefault: boolean = true
 ) => {
   // 如果 id 匹配，则使用 mock 的 binding，否则用原来的
   const binding =
@@ -175,7 +175,7 @@ export const getTextValue = (
   const val =
     bound !== undefined && bound !== null
       ? bound
-      : el.defaultValue !== undefined && el.defaultValue !== null
+      : useDefault && el.defaultValue !== undefined && el.defaultValue !== null
       ? el.defaultValue
       : '';
 
@@ -183,10 +183,23 @@ export const getTextValue = (
 };
 
 
-export const getImageSrc = (el: ImageElement, data?: Record<string, any>) => {
+export const getImageSrc = (
+  el: ImageElement,
+  data?: Record<string, any>,
+  useDefault: boolean = true
+) => {
   const bound =
     el.binding && data ? resolveBindingValue(el.binding, data) : undefined;
-  return (bound as any) || el.defaultUrl || el.defaultValue || '';
+
+  if (bound) {
+    return bound as any;
+  }
+
+  if (useDefault) {
+    return el.defaultUrl || el.defaultValue || '';
+  }
+
+  return '';
 };
 
 export const getIconName = (el: IconElement) =>

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

@@ -114,12 +114,14 @@ export function buildImageContentStyle(
 
 export function getTextValue(
   el: TextElement,
-  data?: Record<string, any>
+  data?: Record<string, any>,
+  useDefault?: boolean
 ): string;
 
 export function getImageSrc(
   el: ImageElement,
-  data?: Record<string, any>
+  data?: Record<string, any>,
+  useDefault?: boolean
 ): string;
 
 export function getIconName(el: IconElement): string;