km-card-layout-component-miniprogram 0.1.6 → 0.1.8

package/example/pages/home/index.js

@@ -1,356 +1,6 @@
 
 
-const layouts = [
-  {
-    "name": "内置布局-左侧头像",
-    "width": 343,
-    "height": 210,
-    "children": [
-      {
-        "id": "1",
-        "key": "name",
-        "type": "text",
-        "style": {
-          "color": "",
-          "fontSize": 18,
-          "textAlign": "left",
-          "fontWeight": "bold",
-          "lineHeight": 25
-        },
-        "layout": {
-          "x": 107,
-          "y": 23,
-          "mode": "absolute",
-          "width": 190,
-          "height": 25,
-          "zIndex": 1
-        }
-      },
-      {
-        "id": "2",
-        "key": "company",
-        "type": "text",
-        "style": {
-          "color": "",
-          "fontSize": 13,
-          "textAlign": "left",
-          "fontWeight": "normal",
-          "lineHeight": 18
-        },
-        "layout": {
-          "x": 107,
-          "y": 51,
-          "mode": "absolute",
-          "width": 190,
-          "height": 18,
-          "zIndex": 2
-        },
-        "visible": true
-      },
-      {
-        "id": "3",
-        "key": "mobile",
-        "icon": {
-          "size": 8,
-          "style": "dot",
-          "enable": true
-        },
-        "type": "text",
-        "style": {
-          "color": "",
-          "fontSize": 13,
-          "textAlign": "left",
-          "fontWeight": "normal"
-        },
-        "layout": {
-          "x": 18,
-          "y": 131,
-          "mode": "absolute",
-          "width": 290,
-          "height": 14,
-          "zIndex": 8
-        }
-      },
-      {
-        "id": "4",
-        "key": "duty",
-        "type": "text",
-        "style": {
-          "color": "",
-          "fontSize": 13,
-          "textAlign": "left",
-          "fontWeight": "normal",
-          "lineHeight": 18
-        },
-        "layout": {
-          "x": 107,
-          "y": 72,
-          "mode": "absolute",
-          "width": 190,
-          "height": 18,
-          "zIndex": 3
-        },
-        "visible": true
-      },
-      {
-        "id": "6",
-        "key": "image",
-        "url": "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202505/3c6d8cc2b1df2cfad624376ae37d3b9e.png",
-        "type": "image",
-        "style": {
-          "borderColor": "#f6f7fb",
-          "borderStyle": "solid",
-          "borderWidth": 1,
-          "borderRadius": 100
-        },
-        "layout": {
-          "x": 18,
-          "y": 16,
-          "mode": "absolute",
-          "width": 80,
-          "height": 80,
-          "zIndex": 7
-        }
-      },
-      {
-        "id": "5",
-        "key": "email",
-        "icon": {
-          "size": 8,
-          "style": "dot",
-          "enable": true
-        },
-        "type": "text",
-        "style": {
-          "color": "",
-          "fontSize": 13,
-          "textAlign": "left",
-          "fontWeight": "normal"
-        },
-        "layout": {
-          "x": 18,
-          "y": 152,
-          "mode": "absolute",
-          "width": 290,
-          "height": 14,
-          "zIndex": 9
-        }
-      },
-      {
-        "id": "9",
-        "key": "address",
-        "icon": {
-          "size": 8,
-          "style": "dot",
-          "enable": true
-        },
-        "type": "text",
-        "style": {
-          "color": "",
-          "fontSize": 13,
-          "textAlign": "left",
-          "fontWeight": "normal"
-        },
-        "layout": {
-          "x": 18,
-          "y": 173,
-          "mode": "absolute",
-          "width": 290,
-          "height": 34,
-          "zIndex": 10
-        }
-      },
-      {
-        "id": "repeatable-1764640366125",
-        "type": "repeatable-group",
-        "items": [
-          {
-            "id": "item-1764640366125-d4ea",
-            "data": {
-              "duty": "CEO",
-              "company": "合肥魅客网络有限公司"
-            },
-            "elements": [
-              {
-                "id": "company-duty-1764640366125-d4ea",
-                "type": "text",
-                "style": {
-                  "fontSize": 12,
-                  "textAlign": "left",
-                  "fontWeight": "normal",
-                  "lineHeight": 14
-                },
-                "layout": {
-                  "x": 107,
-                  "y": 52,
-                  "mode": "absolute",
-                  "width": 220,
-                  "height": 14,
-                  "zIndex": 2
-                }
-              }
-            ]
-          },
-          {
-            "id": "item-1764640369647-8b58",
-            "data": {
-              "duty": "副会长",
-              "company": "人力资源协会"
-            },
-            "elements": [
-              {
-                "id": "company-duty-1764640369647-8b58",
-                "type": "text",
-                "style": {
-                  "fontSize": 12,
-                  "textAlign": "left",
-                  "fontWeight": "normal",
-                  "lineHeight": 14
-                },
-                "layout": {
-                  "x": 107,
-                  "y": 67,
-                  "mode": "absolute",
-                  "width": 220,
-                  "height": 14,
-                  "zIndex": 2
-                }
-              }
-            ]
-          },
-          {
-            "id": "item-1764640371911-e6ae",
-            "data": {
-              "duty": "高级顾问",
-              "company": "北京博然思维咨询有限公司"
-            },
-            "elements": [
-              {
-                "id": "company-duty-1764640371911-e6ae",
-                "type": "text",
-                "style": {
-                  "fontSize": 12,
-                  "textAlign": "left",
-                  "fontWeight": "normal",
-                  "lineHeight": 14
-                },
-                "layout": {
-                  "x": 107,
-                  "y": 83,
-                  "mode": "absolute",
-                  "width": 220,
-                  "height": 14,
-                  "zIndex": 2
-                }
-              }
-            ]
-          }
-        ],
-        "layout": {
-          "x": 0,
-          "y": 0,
-          "mode": "absolute",
-          "width": 0,
-          "height": 0,
-          "zIndex": 1
-        },
-        "visible": false,
-        "dataPath": "user.multiCompanyDuty",
-        "maxItems": 3,
-        "itemTemplate": [
-          {
-            "id": "company-duty",
-            "type": "text",
-            "style": {
-              "fontSize": 13,
-              "textAlign": "left",
-              "fontWeight": "normal",
-              "lineHeight": 18
-            },
-            "layout": {
-              "x": 107,
-              "y": 51,
-              "mode": "absolute",
-              "width": 190,
-              "height": 18,
-              "zIndex": 2
-            }
-          }
-        ],
-        "mutualExcludes": [
-          "user.company",
-          "user.duty"
-        ]
-      },
-      {
-        "id": "multiple-company-1",
-        "type": "text",
-        "style": {
-          "color": "",
-          "fontSize": 11,
-          "textAlign": "left",
-          "fontWeight": "normal",
-          "lineHeight": 11
-        },
-        "layout": {
-          "x": 107,
-          "y": 51,
-          "mode": "absolute",
-          "width": 190,
-          "height": 11,
-          "zIndex": 2
-        },
-        "visible": false
-      },
-      {
-        "id": "multiple-company-2",
-        "type": "text",
-        "style": {
-          "color": "",
-          "fontSize": 11,
-          "textAlign": "left",
-          "fontWeight": "normal",
-          "lineHeight": 11
-        },
-        "layout": {
-          "x": 107,
-          "y": 65,
-          "mode": "absolute",
-          "width": 190,
-          "height": 11,
-          "zIndex": 2
-        },
-        "visible": false
-      },
-      {
-        "id": "multiple-company-3",
-        "type": "text",
-        "style": {
-          "color": "",
-          "fontSize": 11,
-          "textAlign": "left",
-          "fontWeight": "normal",
-          "lineHeight": 11
-        },
-        "layout": {
-          "x": 107,
-          "y": 79,
-          "mode": "absolute",
-          "width": 190,
-          "height": 11,
-          "zIndex": 2
-        },
-        "visible": false
-      }
-    ],
-    "container": {
-      "mode": "absolute"
-    },
-    "fontColor": "#ffffff",
-    "backgroundImage": "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/21dd21c0d693a1eb44e53bad64b9b94a.png",
-    "backgroundZIndex": 0
-  }
-]
+const layouts = [{"name":"内置布局-右侧logo","width":343,"height":210,"children":[{"id":"f2dd3515-2147-460a-b788-3f58dd5f858b","type":"custom","style":{"borderRadius":0,"backgroundColor":"currentColor"},"layout":{"x":20,"y":104,"mode":"absolute","width":12,"height":1,"zIndex":8}},{"id":"7fd4c8cd-6bea-42d0-9a80-b1ba27f4abd3","type":"custom","style":{"borderRadius":0,"backgroundColor":"currentColor"},"layout":{"x":37,"y":104,"mode":"absolute","width":105,"height":1,"zIndex":9}},{"id":"1","key":"name","type":"text","style":{"color":"","fontSize":16,"textAlign":"left","fontWeight":"bold","lineHeight":22},"layout":{"x":20,"y":45,"mode":"absolute","width":210,"height":22,"zIndex":1},"binding":"user.name","defaultValue":"名片君"},{"id":"2","key":"company","type":"text","style":{"color":"","fontSize":11,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":74,"mode":"absolute","width":210,"height":15,"zIndex":3},"binding":"user.company","defaultValue":"合肥魅客网络有限公司"},{"id":"4","key":"duty","type":"text","style":{"color":"","fontSize":10,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":21,"mode":"absolute","width":210,"height":15,"zIndex":2},"binding":"user.duty","defaultValue":"销售经理"},{"id":"3","key":"mobile","icon":{"style":"fill","enable":true},"type":"text","style":{"color":"","fontSize":10,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":123,"mode":"absolute","width":280,"height":15,"zIndex":5},"binding":"user.mobile","defaultValue":"18888888888"},{"id":"5","key":"email","icon":{"style":"fill","enable":true},"type":"text","style":{"color":"","fontSize":10,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":145,"mode":"absolute","width":280,"height":15,"zIndex":6},"binding":"user.email","defaultValue":"km@kuanmai.com"},{"id":"8","key":"logo","type":"image","style":{"color":"#000000","objectFit":"contain","borderRadius":0},"layout":{"x":263,"y":20,"mode":"absolute","width":60,"height":60,"zIndex":4},"binding":"user.logo","defaultValue":"https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/4c71811adfa51e1e3ab4181a88cebc87.png"},{"id":"9","key":"address","icon":{"style":"fill","enable":true},"type":"text","style":{"color":"","fontSize":10,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":167,"mode":"absolute","width":280,"height":33,"zIndex":7},"binding":"user.address","defaultValue":"安徽省合肥市包河区硅谷大厦"}],"container":{"mode":"absolute"},"fontColor":"#333333","backgroundImage":"https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/0a7331e2e1a9a4cbc828afe6c338aaae.png","backgroundZIndex":1}]
 
 
 const cardData = {

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

@@ -12,75 +12,6 @@ const pickCardId = (layout, idx) => {
         return layout.name || layout.id;
     return `card-${idx}`;
 };
-const withUnit = (value, unit) => (0, index_1.addUnit)(value, unit);
-const buildCardStyle = (layout, unit) => (0, index_1.styleObjectToString)({
-    width: withUnit(layout.width, unit),
-    height: withUnit(layout.height, unit),
-    color: layout.fontColor,
-    borderRadius: layout.borderRadius !== undefined
-        ? withUnit(layout.borderRadius, unit)
-        : undefined,
-    padding: layout.padding !== undefined ? withUnit(layout.padding, unit) : undefined,
-    position: 'relative',
-    overflow: 'hidden',
-    boxSizing: 'border-box',
-    backgroundColor: 'transparent',
-}, unit);
-const buildBackgroundStyle = (layout, unit) => (0, index_1.styleObjectToString)({
-    zIndex: layout.backgroundZIndex,
-    borderRadius: layout.borderRadius !== undefined
-        ? withUnit(layout.borderRadius, unit)
-        : undefined,
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-}, unit);
-const buildWrapperStyle = (el, unit) => {
-    if (!el.layout || el.layout.mode !== 'absolute')
-        return '';
-    return (0, index_1.styleObjectToString)({
-        position: 'absolute',
-        left: withUnit(el.layout.x, unit),
-        top: withUnit(el.layout.y, unit),
-        width: withUnit(el.layout.width, unit),
-        height: withUnit(el.layout.height, unit),
-        zIndex: el.layout.zIndex,
-        boxSizing: 'border-box',
-        display: 'flex',
-        alignItems: 'center',
-    }, unit);
-};
-const buildPanelContentStyle = (el, unit) => (0, index_1.styleObjectToString)({
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-    display: 'block',
-    boxSizing: 'border-box',
-    ...(el.style || {}),
-}, unit);
-const buildTextContentStyle = (el, unit) => {
-    var _a, _b, _c;
-    const textAlign = ((_a = el.style) === null || _a === void 0 ? void 0 : _a.textAlign) || el.align || undefined;
-    const style = {
-        ...el.style,
-        whiteSpace: 'pre-wrap',
-        wordBreak: 'break-word',
-        lineHeight: ((_b = el.style) === null || _b === void 0 ? void 0 : _b.lineHeight) !== undefined && ((_c = el.style) === null || _c === void 0 ? void 0 : _c.lineHeight) !== null
-            ? el.style.lineHeight
-            : '1.2',
-        display: 'inline-flex',
-        alignItems: 'center',
-    };
-    if (textAlign)
-        style.textAlign = textAlign;
-    return (0, index_1.styleObjectToString)(style, unit);
-};
-const buildBaseContentStyle = (el, unit) => (0, index_1.styleObjectToString)({
-    ...(el.style || {}),
-    boxSizing: 'border-box',
-}, unit);
 const mapIconGlyph = (name, fallback) => {
     if (!name)
         return fallback;
@@ -89,125 +20,34 @@ const mapIconGlyph = (name, fallback) => {
         return String.fromCharCode(parseInt(glyph, 16));
     return fallback || name;
 };
-const buildTextIcon = (el, unit) => {
-    var _a, _b, _c, _d;
-    const icon = el.icon;
-    if (!icon || icon.enable === false)
-        return undefined;
-    const style = icon.style || 'fill';
-    const baseName = el.key || el.binding || el.id;
-    let name;
-    if (style === 'dot')
-        name = 'round';
-    else if (style === 'line')
-        name = baseName ? `${baseName}-line` : undefined;
-    else
-        name = baseName || undefined;
-    if (!name)
-        return undefined;
-    const size = icon.size !== undefined && icon.size !== null
-        ? icon.size
-        : (_a = el.style) === null || _a === void 0 ? void 0 : _a.fontSize;
-    const gap = icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
-    const color = (_d = (_b = icon.color) !== null && _b !== void 0 ? _b : (_c = el.style) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : undefined;
-    const text = mapIconGlyph(name, name);
+const mapRenderNode = (node) => {
+    var _a;
+    const icon = node.icon
+        ? {
+            ...node.icon,
+            text: mapIconGlyph(node.icon.name, node.icon.text),
+        }
+        : undefined;
+    const children = (_a = node.children) === null || _a === void 0 ? void 0 : _a.map(mapRenderNode);
+    const mappedText = node.type === 'icon' ? mapIconGlyph(node.name, node.text) : node.text;
     return {
-        name,
-        text,
-        size: size !== undefined ? withUnit(size, unit) : undefined,
-        gap: gap !== undefined ? withUnit(gap, unit) : undefined,
-        color,
-        align: icon.align || 'left',
+        ...node,
+        text: mappedText,
+        icon,
+        children,
     };
 };
-const buildRenderNode = (el, data, unit) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (!el || el.visible === false)
-        return null;
-    const wrapperStyle = buildWrapperStyle(el, unit);
-    if (el.type === 'layout-panel') {
-        const panel = el;
-        return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: buildPanelContentStyle(panel, unit),
-            children: buildRenderNodes(panel.children || [], data, unit),
-        };
-    }
-    if (el.type === 'text') {
-        const textValue = (_b = (_a = (0, index_1.resolveBindingValue)(el.binding, data)) !== null && _a !== void 0 ? _a : el.defaultValue) !== null && _b !== void 0 ? _b : '';
-        return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: buildTextContentStyle(el, unit),
-            text: `${textValue}`,
-            icon: buildTextIcon(el, unit),
-        };
-    }
-    if (el.type === 'image') {
-        const style = { ...(el.style || {}) };
-        const borderWidth = Number(style.borderWidth);
-        if (Number.isFinite(borderWidth) && borderWidth > 0) {
-            if (!style.borderStyle)
-                style.borderStyle = 'solid';
-            if (!style.borderColor)
-                style.borderColor = '#000000';
-        }
-        const src = (_e = (_d = (_c = (0, index_1.resolveBindingValue)(el.binding, data)) !== null && _c !== void 0 ? _c : el.defaultUrl) !== null && _d !== void 0 ? _d : el.defaultValue) !== null && _e !== void 0 ? _e : '';
-        const mode = el.fit === 'contain' ? 'aspectFit' : 'aspectFill';
-        return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: (0, index_1.styleObjectToString)(style, unit),
-            src,
-            mode,
-        };
-    }
-    if (el.type === 'icon') {
-        const resolved = (_h = (_g = (_f = (0, index_1.resolveBindingValue)(el.binding, data)) !== null && _f !== void 0 ? _f : el.name) !== null && _g !== void 0 ? _g : el.defaultValue) !== null && _h !== void 0 ? _h : '';
-        const text = mapIconGlyph(`${resolved}`, `${resolved}`);
-        return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: buildBaseContentStyle(el, unit),
-            name: `${resolved}`,
-            text,
-        };
-    }
-    if (el.type === 'custom') {
-        return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: buildBaseContentStyle(el, unit),
-        };
-    }
-    return null;
-};
-const buildRenderNodes = (children, data, unit) => {
-    if (!Array.isArray(children))
-        return [];
-    const nodes = [];
-    children.forEach(el => {
-        if (!el || el.visible === false)
-            return;
-        const node = buildRenderNode(el, data, unit);
-        if (node)
-            nodes.push(node);
-    });
-    return nodes;
+const mapRenderTree = (nodes) => Array.isArray(nodes) ? nodes.map(mapRenderNode) : [];
+const buildCards = (layouts, data) => {
+    const renders = (0, index_1.buildRenderResult)(layouts, data, 'rpx');
+    return renders.map((render, idx) => ({
+        id: pickCardId(layouts[idx], idx),
+        cardStyle: render.cardStyle,
+        backgroundImage: render.backgroundImage || '',
+        backgroundStyle: render.backgroundStyle,
+        nodes: mapRenderTree(render.renderTree),
+    }));
 };
-const buildCards = (layouts, data, unit) => layouts.map(layout => ({
-    id: layout.name || layout.id || '',
-    cardStyle: buildCardStyle(layout, unit),
-    backgroundImage: layout.backgroundImage || '',
-    backgroundStyle: buildBackgroundStyle(layout, unit),
-    nodes: buildRenderNodes(layout.children || [], data, unit),
-}));
 Component({
     options: {
         styleIsolation: 'apply-shared',
@@ -250,10 +90,7 @@ Component({
                 return;
             }
             const normalizedLayouts = (0, index_1.normalizeLayout)(layoutInput);
-            const cards = buildCards(normalizedLayouts, dataInput, 'rpx').map((card, idx) => ({
-                ...card,
-                id: pickCardId(layoutInput[idx], idx),
-            }));
+            const cards = buildCards(normalizedLayouts, dataInput);
             this.setData({ cards });
         },
     },

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

@@ -62,15 +62,23 @@
     <view class="km-node km-node--text" style="{{node.wrapperStyle}}">
       <view class="km-node__text" style="{{node.contentStyle}}">
         <block wx:if="{{node.icon && node.icon.name}}">
-          <view
-            class="km-node__text-content"
-            style="flex-direction: {{node.icon.align === 'right' ? 'row-reverse' : 'row'}};">
-            <text
-              class="km-node__text-icon icon"
-              style="font-size: {{node.icon.size || '16px'}}; color: {{node.icon.color || ''}}; margin-right: {{node.icon.align !== 'right' ? (node.icon.gap || '') : ''}}; margin-left: {{node.icon.align === 'right' ? (node.icon.gap || '') : ''}};">
-              {{node.icon.text || node.icon.name || ''}}
-            </text>
-            <text class="km-node__text-value">{{node.text || ''}}</text>
+          <view class="km-node__text-content">
+            <block wx:if="{{node.icon.align === 'right'}}">
+              <text class="km-node__text-value">{{node.text || ''}}</text>
+              <view style="{{node.icon.wrapperStyle}}">
+                <text
+                class="km-node__text-icon icon"
+                style="font-size: {{node.icon.size || '16px'}}; color: {{node.icon.color || ''}}; margin-right: {{node.icon.gap || ''}};">{{node.icon.text || node.icon.name || ''}}</text>
+              </view>
+            </block>
+            <block wx:else>
+              <view style="{{node.icon.wrapperStyle}}">
+                <text
+                class="km-node__text-icon icon"
+                style="font-size: {{node.icon.size || '16px'}}; color: {{node.icon.color || ''}}; margin-right: {{node.icon.gap || ''}};">{{node.icon.text || node.icon.name || ''}}</text>
+              </view>
+              <text class="km-node__text-value">{{node.text || ''}}</text>
+            </block>
           </view>
         </block>
         <block wx:else>

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

@@ -78,25 +78,28 @@
 .km-node__text {
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
+  display: block;
+  box-sizing: border-box;
+  text-align: inherit;
 }
 
 .km-node__text-content {
-  display: inline-flex;
-  align-items: center;
+  display: inline-block;
+  vertical-align: middle;
+  height: 100%;
 }
 
 .km-node__text-value {
   display: inline-block;
   white-space: pre-wrap;
   word-break: break-word;
+  vertical-align: middle;
+}
+.km-node--text{
+  /* 溢出隐藏 */
 }
-
 .km-node--text text {
-  display: block;
-  white-space: pre-wrap;
-  word-break: break-word;
+  display: inline;
 }
 
 /* ICON */