km-card-layout-component-miniprogram 0.1.5 → 0.1.7

package/example/pages/home/index.js

@@ -1,253 +1,7 @@
-const layouts = [
-{
-  "id": "3",
-  "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
-      },
-      "binding": "decor-1764137606935"
-    },
-    {
-      "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
-      },
-      "binding": "decor-1764137663972"
-    },
-    {
-      "id": "4985e0b1-8200-4f15-b18e-e1dcccce56a4",
-      "name": "mobile",
-      "type": "icon",
-      "style": {
-        "color": "",
-        "fontSize": 11
-      },
-      "layout": {
-        "x": 20,
-        "y": 124,
-        "mode": "absolute",
-        "width": 11,
-        "height": 11,
-        "zIndex": 10
-      },
-      "binding": "decor-icon-1764137759247"
-    },
-    {
-      "id": "a5fbea00-26d1-4f68-8cea-053e8541ae5c",
-      "name": "email",
-      "type": "icon",
-      "style": {
-        "color": "",
-        "fontSize": 10
-      },
-      "layout": {
-        "x": 20,
-        "y": 147,
-        "mode": "absolute",
-        "width": 10,
-        "height": 10,
-        "zIndex": 11
-      },
-      "binding": "decor-icon-1764137817702"
-    },
-    {
-      "id": "ce82ffa0-3e48-48aa-81c2-a5fbe07271a7",
-      "name": "address",
-      "type": "icon",
-      "style": {
-        "color": "",
-        "fontSize": 10
-      },
-      "layout": {
-        "x": 20,
-        "y": 169,
-        "mode": "absolute",
-        "width": 10,
-        "height": 10,
-        "zIndex": 12
-      },
-      "binding": "decor-icon-1764137829061"
-    },
-    {
-      "id": "1",
-      "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",
-      "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",
-      "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",
-      "type": "text",
-      "style": {
-        "color": "",
-        "fontSize": 10,
-        "textAlign": "left",
-        "fontWeight": "normal",
-        "lineHeight": 15
-      },
-      "layout": {
-        "x": 36,
-        "y": 123,
-        "mode": "absolute",
-        "width": 280,
-        "height": 15,
-        "zIndex": 5
-      },
-      "binding": "user.mobile",
-      "defaultValue": "18888888888"
-    },
-    {
-      "id": "5",
-      "type": "text",
-      "style": {
-        "color": "",
-        "fontSize": 10,
-        "textAlign": "left",
-        "fontWeight": "normal",
-        "lineHeight": 15
-      },
-      "layout": {
-        "x": 36,
-        "y": 145,
-        "mode": "absolute",
-        "width": 280,
-        "height": 15,
-        "zIndex": 6
-      },
-      "binding": "user.email",
-      "defaultValue": "km@kuanmai.com"
-    },
-    {
-      "id": "8",
-      "url": "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/4c71811adfa51e1e3ab4181a88cebc87.png",
-      "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",
-      "type": "text",
-      "style": {
-        "color": "",
-        "fontSize": 10,
-        "textAlign": "left",
-        "fontWeight": "normal",
-        "lineHeight": 15
-      },
-      "layout": {
-        "x": 36,
-        "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 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 = {
   user: {

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

@@ -12,25 +12,226 @@ 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;
+    const glyph = icon_map_1.ICON_CODE_MAP[name];
+    if (glyph)
+        return String.fromCharCode(parseInt(glyph, 16));
+    return fallback || name;
+};
+const buildTextIcon = (el, unit) => {
+    var _a, _b, _c, _d, _e;
+    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);
+    return {
+        name,
+        text,
+        size: size !== undefined ? withUnit(size, unit) : undefined,
+        gap: gap !== undefined ? withUnit(gap, unit) : undefined,
+        wrapperStyle: (0, index_1.styleObjectToString)({
+            display: 'inline-flex',
+            alignItems: 'center',
+            height: ((_e = el.style) === null || _e === void 0 ? void 0 : _e.lineHeight) || 'auto',
+        }, unit),
+        color,
+        align: icon.align || 'left',
+    };
+};
+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 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'
+        styleIsolation: 'apply-shared',
     },
     properties: {
         layout: {
             type: Array,
             optionalTypes: [Object],
-            value: []
+            value: [],
         },
         data: {
             type: Object,
             value: {
-                user: {}
-            }
-        }
+                user: {},
+            },
+        },
     },
     data: {
-        cards: []
+        cards: [],
     },
     observers: {
         layout() {
@@ -38,27 +239,14 @@ Component({
         },
         data() {
             this.rebuild();
-        }
+        },
     },
     lifetimes: {
         attached() {
             this.rebuild();
-        }
+        },
     },
     methods: {
-        normalizeIconGlyph(nodes) {
-            return nodes.map(node => {
-                if (node.type === 'icon') {
-                    const glyph = icon_map_1.ICON_CODE_MAP[node.name || node.text || ''];
-                    const text = glyph ? String.fromCharCode(parseInt(glyph, 16)) : node.text;
-                    return { ...node, text };
-                }
-                if (node.children && node.children.length) {
-                    return { ...node, children: this.normalizeIconGlyph(node.children) };
-                }
-                return node;
-            });
-        },
         rebuild() {
             const layoutInput = ensureArray(this.data.layout);
             const dataInput = (this.data.data || {});
@@ -66,15 +254,12 @@ Component({
                 this.setData({ cards: [] });
                 return;
             }
-            const rendered = (0, index_1.buildRenderResult)(layoutInput, dataInput, 'rpx');
-            const cards = rendered.map((card, idx) => ({
+            const normalizedLayouts = (0, index_1.normalizeLayout)(layoutInput);
+            const cards = buildCards(normalizedLayouts, dataInput, 'rpx').map((card, idx) => ({
+                ...card,
                 id: pickCardId(layoutInput[idx], idx),
-                cardStyle: card.cardStyle,
-                backgroundImage: card.backgroundImage,
-                backgroundStyle: card.backgroundStyle,
-                nodes: this.normalizeIconGlyph(card.renderTree)
             }));
             this.setData({ cards });
-        }
-    }
+        },
+    },
 });

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

@@ -1,6 +1,6 @@
-<view class="km-card-layout-list">
+<view class="km-card-layout">
   <block wx:for="{{cards}}" wx:key="id">
-    <view class="km-card-layout-item">
+    <view class="km-card-layout__item">
       <view class="km-card" style="{{item.cardStyle}}">
         <image
           wx:if="{{item.backgroundImage}}"
@@ -31,7 +31,7 @@
   <block wx:elif="{{node.type === 'icon'}}">
     <view class="km-node km-node--icon" style="{{node.wrapperStyle}}">
       <view
-        wx:if="{{node.name === 'dot'}}"
+        wx:if="{{node.name === 'dot' || node.name === 'round'}}"
         class="km-node__icon-dot"
         style="{{node.contentStyle}}"
       />
@@ -39,7 +39,7 @@
         wx:else
         class="km-node__icon icon"
         style="{{node.contentStyle}}"
-      >{{node.text}}</view>
+      >{{node.text || ''}}</view>
     </view>
   </block>
   <block wx:elif="{{node.type === 'layout-panel'}}">
@@ -60,7 +60,31 @@
   </block>
   <block wx:else>
     <view class="km-node km-node--text" style="{{node.wrapperStyle}}">
-      <view style="{{node.contentStyle}}">{{node.text}}</view>
+      <view class="km-node__text" style="{{node.contentStyle}}">
+        <block wx:if="{{node.icon && node.icon.name}}">
+          <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>
+          <text class="km-node__text-value">{{node.text || ''}}</text>
+        </block>
+      </view>
     </view>
   </block>
 </template>

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

@@ -1,11 +1,12 @@
 
 
-.km-card-layout-list {
+.km-card-layout {
   display: flex;
   flex-direction: column;
+  gap: 16rpx;
 }
 
-.km-card-layout-item {
+.km-card-layout__item {
   width: 100%;
 }
 
@@ -15,7 +16,7 @@
   box-sizing: border-box;
   color: inherit;
   font-family: 'PingFang SC', 'Microsoft Yahei', sans-serif;
-  background: #0f1115;
+  background: transparent;
 }
 
 .km-card__bg {
@@ -32,11 +33,12 @@
   color: inherit;
 }
 
-.km-node--icon{
+.km-node--icon {
   display: flex;
   align-items: center;
-  justify-items: center;
+  justify-content: center;
 }
+
 .km-node__image {
   width: 100%;
   height: 100%;
@@ -73,9 +75,29 @@
   box-sizing: border-box;
 }
 
-.km-node--text text {
+.km-node__text {
+  width: 100%;
+  height: 100%;
   display: block;
+  box-sizing: border-box;
+  text-align: inherit;
+}
+
+.km-node__text-content {
+  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 text {
+  display: inline;
 }
 
 /* ICON */