km-card-layout-core 0.1.25 → 0.1.27

package/README.md

@@ -8,9 +8,8 @@ Utilities for working with card layout schemas: sanitize layouts, handle binding
 - `resolveBindingValue(path, data, context?)`: read bound data with optional context.
 - `styleObjectToString(style, unit?)`: convert a style object to a CSS string.
 - `addUnit(value, unit)`: append px/rpx to numbers or numeric strings.
-- Background helpers: `applyBackground`, `applySpecialStyle`, `backgroundChange`, `buildRenderData`, etc.
+- Background helper: `backgroundChange` to apply template background colors.
 
 ## Usage
 
 Use the layout schema and card elements directly for rendering on web or mini-program targets—no extra RenderNode transformation layer is required. The core is platform-agnostic and can be imported via `require('km-card-layout-core')`.
-

package/bindings.ts

@@ -1,8 +1,5 @@
 import type { CardElement, CardLayoutSchema } from './interface';
-import type {
-  TemplateBackground,
-  TemplateItem,
-} from './interface/data/payload';
+import type { TemplateItem } from './interface/data/payload';
 
 export function stripLayoutBindings(
   layouts: CardLayoutSchema[] = []
@@ -29,6 +26,8 @@ export function applyItemCollectBindings(
   layouts: CardLayoutSchema[] = [],
   items: TemplateItem[] = []
 ): CardLayoutSchema[] {
+  console.log('applyItemCollectBindings', layouts, items);
+  
   const targetLayouts = Array.isArray(layouts) ? layouts : [];
   const metaMap = new Map<string, TemplateItem>();
   const metaList = Array.isArray(items) ? items : [];
@@ -47,15 +46,17 @@ export function applyItemCollectBindings(
     const defaultValue =
       meta && meta.default !== undefined ? meta.default : el.defaultValue;
     const key = meta && meta.key !== undefined ? meta.key : el.key;
-    const base: any = { ...el };
+    const base: any = { ...el, label: meta?.name };
     if (binding !== undefined) base.binding = binding;
     else delete base.binding;
     if (defaultValue !== undefined) base.defaultValue = defaultValue;
     else delete base.defaultValue;
     if (key !== undefined) base.key = key;
     else delete base.key;
-    if (el.type === 'text' && meta?.extra?.icon) {
-      base.icon = { ...(base.icon || {}), name: meta.extra.icon };
+    if (el.type === 'text') {
+      // if (meta?.extra?.icon) {
+      //   base.icon = { ...(base.icon || {}), name: meta.extra.icon };
+      // }
     }
 
     if (el.type === 'layout-panel') {
@@ -64,6 +65,7 @@ export function applyItemCollectBindings(
         children: (el.children || []).map(assignBinding),
       } as CardElement;
     }
+
     return base as CardElement;
   };
 
@@ -72,16 +74,3 @@ export function applyItemCollectBindings(
     children: (layout.children || []).map(assignBinding),
   }));
 }
-
-export function getTemplateItems(ids: string, items: TemplateItem[]) {
-  const idArray = ids.split(',').map(id => id.trim());
-  return items.filter(item => idArray.includes(String(item.id)));
-}
-
-export function getTemplateBackgrounds(
-  ids: string,
-  items: TemplateBackground[]
-) {
-  const idArray = ids.split(',').map(id => id.trim());
-  return items.filter(item => idArray.includes(String(item.id)));
-}

package/data.ts

@@ -1,5 +1,4 @@
 import { isObject } from './helpers';
-import type { BindingContext } from './interface';
 
 const pathToSegments = (path: string): string[] =>
   `${path || ''}`
@@ -30,8 +29,7 @@ const readByPath = (data: any, path: string): any => {
 
 export const resolveBindingValue = (
   binding: string | undefined,
-  rootData: Record<string, any>,
-  context?: BindingContext
+  rootData: Record<string, any>
 ): any => {
   if (!binding) return undefined;
   const value = readByPath(rootData, binding);

package/dist/bindings.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stripLayoutBindings = stripLayoutBindings;
 exports.applyItemCollectBindings = applyItemCollectBindings;
-exports.getTemplateItems = getTemplateItems;
-exports.getTemplateBackgrounds = getTemplateBackgrounds;
 function stripLayoutBindings(layouts = []) {
     const targetLayouts = Array.isArray(layouts) ? layouts : [];
     const stripElement = (el) => {
@@ -22,6 +20,7 @@ function stripLayoutBindings(layouts = []) {
     }));
 }
 function applyItemCollectBindings(layouts = [], items = []) {
+    console.log('applyItemCollectBindings', layouts, items);
     const targetLayouts = Array.isArray(layouts) ? layouts : [];
     const metaMap = new Map();
     const metaList = Array.isArray(items) ? items : [];
@@ -31,14 +30,13 @@ function applyItemCollectBindings(layouts = [], items = []) {
         }
     });
     const assignBinding = (el) => {
-        var _a;
         const meta = metaMap.get(String(el.id));
         const binding = meta && meta.bind !== undefined && meta.bind !== null
             ? meta.bind
             : el.binding;
         const defaultValue = meta && meta.default !== undefined ? meta.default : el.defaultValue;
         const key = meta && meta.key !== undefined ? meta.key : el.key;
-        const base = { ...el };
+        const base = { ...el, label: meta === null || meta === void 0 ? void 0 : meta.name };
         if (binding !== undefined)
             base.binding = binding;
         else
@@ -51,8 +49,10 @@ function applyItemCollectBindings(layouts = [], items = []) {
             base.key = key;
         else
             delete base.key;
-        if (el.type === 'text' && ((_a = meta === null || meta === void 0 ? void 0 : meta.extra) === null || _a === void 0 ? void 0 : _a.icon)) {
-            base.icon = { ...(base.icon || {}), name: meta.extra.icon };
+        if (el.type === 'text') {
+            // if (meta?.extra?.icon) {
+            //   base.icon = { ...(base.icon || {}), name: meta.extra.icon };
+            // }
         }
         if (el.type === 'layout-panel') {
             return {
@@ -67,11 +67,3 @@ function applyItemCollectBindings(layouts = [], items = []) {
         children: (layout.children || []).map(assignBinding),
     }));
 }
-function getTemplateItems(ids, items) {
-    const idArray = ids.split(',').map(id => id.trim());
-    return items.filter(item => idArray.includes(String(item.id)));
-}
-function getTemplateBackgrounds(ids, items) {
-    const idArray = ids.split(',').map(id => id.trim());
-    return items.filter(item => idArray.includes(String(item.id)));
-}

package/dist/data.js

@@ -29,7 +29,7 @@ const readByPath = (data, path) => {
     }
     return cursor;
 };
-const resolveBindingValue = (binding, rootData, context) => {
+const resolveBindingValue = (binding, rootData) => {
     if (!binding)
         return undefined;
     const value = readByPath(rootData, binding);

package/dist/index.js

@@ -1,10 +1,4 @@
 "use strict";
-/**
- * CardMaster 布局 JSON 渲染核心
- *
- * - 平台无关：不依赖 DOM/小程序 API，方便在 Web/小程序/Node 复用。
- * - 职责：将布局 Schema 与业务数据合成可渲染树，外层只需将节点映射到各端组件。
- */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -20,7 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildTextIconMeta = exports.getIconName = exports.getImageSrc = exports.getTextValue = exports.buildImageContentStyle = exports.buildTextContentStyle = exports.buildPanelContentStyle = exports.buildBaseContentStyle = exports.buildBackgroundStyle = exports.buildCardStyle = exports.buildWrapperStyle = exports.buildRenderData = exports.updateElementsStyle = exports.applyBackground = exports.applySpecialStyle = exports.resolveSpecialStyle = exports.DEFAULT_DECOR_COLOR = exports.backgroundChange = exports.getTemplateBackgrounds = exports.getTemplateItems = exports.applyItemCollectBindings = exports.stripLayoutBindings = exports.resolveBindingValue = exports.areChildrenEqual = exports.parseLayout = exports.normalizeId = exports.collectBindings = exports.getAbsLayout = exports.roundToInt = exports.sanitizeElement = exports.sanitizeLayout = exports.normalizeLayout = exports.isObject = exports.toNumber = exports.styleObjectToString = exports.addUnit = void 0;
+exports.processCardLayout = exports.handleSpecialFields = exports.buildTextIconMeta = exports.getIconName = exports.getImageSrc = exports.getTextValue = exports.buildImageContentStyle = exports.buildTextValueStyle = exports.buildTextContentStyle = exports.buildPanelContentStyle = exports.buildBaseContentStyle = exports.buildBackgroundStyle = exports.buildCardStyle = exports.buildWrapperStyle = exports.backgroundChange = exports.applyItemCollectBindings = exports.stripLayoutBindings = exports.resolveBindingValue = exports.parseLayout = exports.normalizeId = exports.getAbsLayout = exports.roundToInt = exports.sanitizeElement = exports.sanitizeLayout = exports.normalizeLayout = exports.isObject = exports.toNumber = exports.styleObjectToString = exports.addUnit = void 0;
+/**
+ * Core exports for card layout helpers.
+ * Platform-agnostic utilities shared by web/mini-program renderers.
+ */
 __exportStar(require("./interface/index"), exports);
 var helpers_1 = require("./helpers");
 Object.defineProperty(exports, "addUnit", { enumerable: true, get: function () { return helpers_1.addUnit; } });
@@ -33,26 +31,15 @@ Object.defineProperty(exports, "sanitizeLayout", { enumerable: true, get: functi
 Object.defineProperty(exports, "sanitizeElement", { enumerable: true, get: function () { return layout_1.sanitizeElement; } });
 Object.defineProperty(exports, "roundToInt", { enumerable: true, get: function () { return layout_1.roundToInt; } });
 Object.defineProperty(exports, "getAbsLayout", { enumerable: true, get: function () { return layout_1.getAbsLayout; } });
-Object.defineProperty(exports, "collectBindings", { enumerable: true, get: function () { return layout_1.collectBindings; } });
 Object.defineProperty(exports, "normalizeId", { enumerable: true, get: function () { return layout_1.normalizeId; } });
 Object.defineProperty(exports, "parseLayout", { enumerable: true, get: function () { return layout_1.parseLayout; } });
-Object.defineProperty(exports, "areChildrenEqual", { enumerable: true, get: function () { return layout_1.areChildrenEqual; } });
 var data_1 = require("./data");
 Object.defineProperty(exports, "resolveBindingValue", { enumerable: true, get: function () { return data_1.resolveBindingValue; } });
 var bindings_1 = require("./bindings");
 Object.defineProperty(exports, "stripLayoutBindings", { enumerable: true, get: function () { return bindings_1.stripLayoutBindings; } });
 Object.defineProperty(exports, "applyItemCollectBindings", { enumerable: true, get: function () { return bindings_1.applyItemCollectBindings; } });
-Object.defineProperty(exports, "getTemplateItems", { enumerable: true, get: function () { return bindings_1.getTemplateItems; } });
-Object.defineProperty(exports, "getTemplateBackgrounds", { enumerable: true, get: function () { return bindings_1.getTemplateBackgrounds; } });
 var changeBackground_1 = require("./ops/changeBackground");
 Object.defineProperty(exports, "backgroundChange", { enumerable: true, get: function () { return changeBackground_1.backgroundChange; } });
-Object.defineProperty(exports, "DEFAULT_DECOR_COLOR", { enumerable: true, get: function () { return changeBackground_1.DEFAULT_DECOR_COLOR; } });
-Object.defineProperty(exports, "resolveSpecialStyle", { enumerable: true, get: function () { return changeBackground_1.resolveSpecialStyle; } });
-Object.defineProperty(exports, "applySpecialStyle", { enumerable: true, get: function () { return changeBackground_1.applySpecialStyle; } });
-Object.defineProperty(exports, "applyBackground", { enumerable: true, get: function () { return changeBackground_1.applyBackground; } });
-Object.defineProperty(exports, "updateElementsStyle", { enumerable: true, get: function () { return changeBackground_1.updateElementsStyle; } });
-var tool_1 = require("./render/tool");
-Object.defineProperty(exports, "buildRenderData", { enumerable: true, get: function () { return tool_1.buildRenderData; } });
 var helpers_2 = require("./render/helpers");
 Object.defineProperty(exports, "buildWrapperStyle", { enumerable: true, get: function () { return helpers_2.buildWrapperStyle; } });
 Object.defineProperty(exports, "buildCardStyle", { enumerable: true, get: function () { return helpers_2.buildCardStyle; } });
@@ -60,8 +47,12 @@ Object.defineProperty(exports, "buildBackgroundStyle", { enumerable: true, get:
 Object.defineProperty(exports, "buildBaseContentStyle", { enumerable: true, get: function () { return helpers_2.buildBaseContentStyle; } });
 Object.defineProperty(exports, "buildPanelContentStyle", { enumerable: true, get: function () { return helpers_2.buildPanelContentStyle; } });
 Object.defineProperty(exports, "buildTextContentStyle", { enumerable: true, get: function () { return helpers_2.buildTextContentStyle; } });
+Object.defineProperty(exports, "buildTextValueStyle", { enumerable: true, get: function () { return helpers_2.buildTextValueStyle; } });
 Object.defineProperty(exports, "buildImageContentStyle", { enumerable: true, get: function () { return helpers_2.buildImageContentStyle; } });
 Object.defineProperty(exports, "getTextValue", { enumerable: true, get: function () { return helpers_2.getTextValue; } });
 Object.defineProperty(exports, "getImageSrc", { enumerable: true, get: function () { return helpers_2.getImageSrc; } });
 Object.defineProperty(exports, "getIconName", { enumerable: true, get: function () { return helpers_2.getIconName; } });
 Object.defineProperty(exports, "buildTextIconMeta", { enumerable: true, get: function () { return helpers_2.buildTextIconMeta; } });
+var init_1 = require("./render/init");
+Object.defineProperty(exports, "handleSpecialFields", { enumerable: true, get: function () { return init_1.handleSpecialFields; } });
+Object.defineProperty(exports, "processCardLayout", { enumerable: true, get: function () { return init_1.processCardLayout; } });

package/dist/interface/index.js

@@ -17,4 +17,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./elements"), exports);
 __exportStar(require("./layout"), exports);
 __exportStar(require("./data/payload"), exports);
-__exportStar(require("./context"), exports);

package/dist/layout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.areChildrenEqual = exports.normalizeLayout = exports.parseLayout = exports.normalizeId = exports.collectBindings = exports.sanitizeLayout = exports.sanitizeElement = exports.getAbsLayout = exports.roundToInt = void 0;
+exports.normalizeLayout = exports.parseLayout = exports.normalizeId = exports.sanitizeLayout = exports.sanitizeElement = exports.getAbsLayout = exports.roundToInt = void 0;
 const helpers_1 = require("./helpers");
 const DEFAULT_CARD_WIDTH = 343;
 const DEFAULT_CARD_HEIGHT = 210;
@@ -40,18 +40,6 @@ const sanitizeLayout = (layout) => ({
     children: (layout.children || []).map(child => (0, exports.sanitizeElement)(child)),
 });
 exports.sanitizeLayout = sanitizeLayout;
-const collectBindings = (elements = []) => {
-    const result = [];
-    elements.forEach(el => {
-        if (el.binding)
-            result.push(el.binding);
-        if (el.type === 'layout-panel' && el.children) {
-            result.push(...(0, exports.collectBindings)(el.children));
-        }
-    });
-    return Array.from(new Set(result));
-};
-exports.collectBindings = collectBindings;
 const normalizeId = (id) => {
     if (id === undefined || id === null)
         return undefined;
@@ -111,7 +99,3 @@ const normalizeLayout = (layout) => {
         .filter((value) => Boolean(value));
 };
 exports.normalizeLayout = normalizeLayout;
-const areChildrenEqual = (a, b) => {
-    return JSON.stringify(a === null || a === void 0 ? void 0 : a.children) === JSON.stringify(b === null || b === void 0 ? void 0 : b.children);
-};
-exports.areChildrenEqual = areChildrenEqual;

package/dist/ops/changeBackground.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setElementVisible = exports.updateElementsStyle = exports.applyBackground = exports.applySpecialStyle = exports.resolveSpecialStyle = exports.DEFAULT_DECOR_COLOR = void 0;
 exports.backgroundChange = backgroundChange;
 const toNameArray = (name) => {
     if (Array.isArray(name))
@@ -13,10 +12,10 @@ const toNameArray = (name) => {
         .filter(Boolean);
 };
 function backgroundChange(bg, layout) {
+    var _a;
+    const extras = bg.fontColorExtra || [];
+    const iconSpecialColor = (_a = extras.find(sc => toNameArray(sc.name).some(n => n === 'icon'))) === null || _a === void 0 ? void 0 : _a.color;
     const applySpecialColor = (el) => {
-        const extras = bg.fontColorExtra || [];
-        if (!extras.length)
-            return el;
         const keys = [];
         if (el.binding)
             keys.push(String(el.binding));
@@ -27,13 +26,48 @@ function backgroundChange(bg, layout) {
         if (el.type === 'custom')
             keys.push('decor');
         const matched = extras.find(sc => toNameArray(sc.name).some(n => keys.some(k => k === null || k === void 0 ? void 0 : k.startsWith(n))));
-        if (!matched)
-            return el;
         const baseStyle = { ...(el.style || {}) };
-        if (el.type === 'custom') {
-            return { ...el, style: { ...baseStyle, backgroundColor: matched.color } };
+        let nextEl = el;
+        if (matched) {
+            if (el.type === 'custom') {
+                nextEl = { ...el, style: { ...baseStyle, backgroundColor: matched.color } };
+            }
+            else {
+                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 ('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.icon) {
+            const nextIcon = { ...nextEl.icon };
+            if (iconSpecialColor) {
+                nextIcon.color = iconSpecialColor;
+            }
+            else if ('color' in nextIcon) {
+                delete nextIcon.color;
+            }
+            nextEl = { ...nextEl, icon: nextIcon };
         }
-        return { ...el, style: { ...baseStyle, color: matched.color } };
+        return nextEl;
     };
     const traverse = (children = []) => children.map(el => {
         if (!el)
@@ -46,97 +80,11 @@ function backgroundChange(bg, layout) {
         }
         return applySpecialColor(el);
     });
+    const nextChildren = traverse(layout.children || []);
     return {
         ...layout,
         backgroundImage: bg.imgUrl,
         fontColor: bg.fontColor || layout.fontColor,
-        children: traverse(layout.children || []),
+        children: nextChildren,
     };
 }
-exports.DEFAULT_DECOR_COLOR = '#94a3b8';
-const resolveSpecialStyle = (element, background) => {
-    var _a;
-    if (!background)
-        return {};
-    const keys = [];
-    if (element.binding)
-        keys.push(String(element.binding));
-    if (element.id)
-        keys.push(String(element.id));
-    if (element.type === 'icon')
-        keys.push('icon');
-    if (element.type === 'custom')
-        keys.push('decor');
-    const matched = (_a = background.specialColors) === null || _a === void 0 ? void 0 : _a.find(sc => {
-        const names = toNameArray(sc.name);
-        return names.some(n => keys.some(k => k === null || k === void 0 ? void 0 : k.startsWith(n)));
-    });
-    if (!matched)
-        return {};
-    if (element.type === 'custom') {
-        return { backgroundColor: matched.color };
-    }
-    return { color: matched.color };
-};
-exports.resolveSpecialStyle = resolveSpecialStyle;
-const applySpecialStyle = (el, background = null, options = {}) => {
-    const specialStyle = (0, exports.resolveSpecialStyle)(el, background);
-    const baseStyle = { ...(el.style || {}) };
-    const isCustom = el.type === 'custom';
-    const hasExplicit = isCustom
-        ? Boolean(baseStyle.backgroundColor || baseStyle.background)
-        : baseStyle.color !== undefined && baseStyle.color !== null;
-    const overrideExisting = options.overrideExisting === true;
-    const hasSpecial = Object.keys(specialStyle).length > 0;
-    const defaultDecorColor = options.defaultDecorColor || exports.DEFAULT_DECOR_COLOR;
-    if (hasSpecial) {
-        if (hasExplicit && !overrideExisting)
-            return el;
-        return { ...el, style: { ...baseStyle, ...specialStyle } };
-    }
-    if (overrideExisting && hasExplicit) {
-        const nextStyle = { ...baseStyle };
-        if (isCustom) {
-            nextStyle.backgroundColor = (background === null || background === void 0 ? void 0 : background.mainColor) || defaultDecorColor;
-        }
-        else {
-            delete nextStyle.color;
-        }
-        return { ...el, style: nextStyle };
-    }
-    return el;
-};
-exports.applySpecialStyle = applySpecialStyle;
-const applyBackground = (layout, background, _options = {}) => {
-    var _a;
-    const bgId = Number(background.id);
-    const payload = {
-        id: Number.isFinite(bgId) ? bgId : 0,
-        name: background.name,
-        imgUrl: background.imageUrl,
-        fontColor: background.mainColor,
-        fontColorExtra: ((_a = background.specialColors) === null || _a === void 0 ? void 0 : _a.map(sc => ({
-            name: sc.name,
-            color: sc.color,
-        }))) || [],
-    };
-    return backgroundChange(payload, layout);
-};
-exports.applyBackground = applyBackground;
-const updateElementsStyle = (layout, targetIds, updates) => {
-    const targets = new Set(targetIds);
-    return {
-        ...layout,
-        children: layout.children.map(el => targets.has(el.id)
-            ? { ...el, style: { ...(el.style || {}), ...updates } }
-            : el),
-    };
-};
-exports.updateElementsStyle = updateElementsStyle;
-const setElementVisible = (layout, key, visible) => {
-    return layout.map(la => ({
-        ...la,
-        children: la.children.map(el => (el.key === key ? { ...el, visible } : el)),
-    }));
-};
-exports.setElementVisible = setElementVisible;

package/dist/render/helpers.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildTextIconMeta = exports.getIconName = exports.getImageSrc = exports.getTextValue = exports.buildImageContentStyle = exports.buildTextContentStyle = exports.buildPanelContentStyle = exports.buildBaseContentStyle = exports.buildBackgroundStyle = exports.buildCardStyle = exports.buildWrapperStyle = void 0;
+exports.buildTextIconMeta = exports.getIconName = exports.getImageSrc = exports.getTextValue = exports.buildImageContentStyle = exports.buildTextValueStyle = exports.buildTextContentStyle = exports.buildPanelContentStyle = exports.buildBaseContentStyle = exports.buildBackgroundStyle = exports.buildCardStyle = exports.buildWrapperStyle = void 0;
 const helpers_1 = require("../helpers");
 const layout_1 = require("../layout");
+const data_1 = require("../data");
 const buildWrapperStyle = (el, unit = 'px') => {
     const abs = (0, layout_1.getAbsLayout)(el);
     if (!abs)
@@ -22,9 +23,6 @@ const buildCardStyle = (layout, unit = 'px') => ({
     width: (0, helpers_1.addUnit)(layout.width, unit),
     height: (0, helpers_1.addUnit)(layout.height, unit),
     color: layout.fontColor,
-    borderRadius: layout.borderRadius !== undefined
-        ? (0, helpers_1.addUnit)(layout.borderRadius, unit)
-        : undefined,
     padding: layout.padding !== undefined ? (0, helpers_1.addUnit)(layout.padding, unit) : undefined,
     position: 'relative',
     overflow: 'hidden',
@@ -34,11 +32,12 @@ const buildCardStyle = (layout, unit = 'px') => ({
 exports.buildCardStyle = buildCardStyle;
 const buildBackgroundStyle = (layout, unit = 'px') => ({
     zIndex: layout.backgroundZIndex,
-    borderRadius: layout.borderRadius !== undefined
-        ? (0, helpers_1.addUnit)(layout.borderRadius, unit)
-        : undefined,
-    width: '100%',
-    height: '100%',
+    width: layout.backgroundWidth
+        ? (0, helpers_1.addUnit)(layout.backgroundWidth, unit)
+        : '100%',
+    height: layout.backgroundHeight
+        ? (0, helpers_1.addUnit)(layout.backgroundHeight, unit)
+        : '100%',
     position: 'absolute',
     left: 0,
     top: 0,
@@ -75,23 +74,44 @@ const buildTextContentStyle = (el, unit = 'px') => {
     return style;
 };
 exports.buildTextContentStyle = buildTextContentStyle;
-const buildImageContentStyle = (el) => {
+const buildTextValueStyle = (el, unit = 'px') => {
+    var _a, _b;
+    const style = {
+        letterSpacing: ((_a = el.style) === null || _a === void 0 ? void 0 : _a.letterSpacing) !== undefined && ((_b = el.style) === null || _b === void 0 ? void 0 : _b.letterSpacing) !== null
+            ? (0, helpers_1.addUnit)(el.style.letterSpacing, unit)
+            : '0',
+    };
+    return style;
+};
+exports.buildTextValueStyle = buildTextValueStyle;
+const buildImageContentStyle = (el, unit = 'px') => {
+    var _a, _b, _c, _d;
     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';
-    }
+    style.borderWidth =
+        ((_a = el.style) === null || _a === void 0 ? void 0 : _a.borderWidth) !== undefined && ((_b = el.style) === null || _b === void 0 ? void 0 : _b.borderWidth) !== null
+            ? (0, helpers_1.addUnit)(el.style.borderWidth, unit)
+            : '0';
+    style.borderRadius =
+        ((_c = el.style) === null || _c === void 0 ? void 0 : _c.borderRadius) !== undefined && ((_d = el.style) === null || _d === void 0 ? void 0 : _d.borderRadius) !== null
+            ? (0, helpers_1.addUnit)(el.style.borderRadius, unit)
+            : '0';
     return style;
 };
 exports.buildImageContentStyle = buildImageContentStyle;
-const getTextValue = (el) => el.defaultValue !== undefined && el.defaultValue !== null
-    ? `${el.defaultValue}`
-    : '';
+const getTextValue = (el, data) => {
+    const bound = el.binding && data ? (0, data_1.resolveBindingValue)(el.binding, data) : undefined;
+    const val = bound !== undefined && bound !== null
+        ? bound
+        : el.defaultValue !== undefined && el.defaultValue !== null
+            ? el.defaultValue
+            : '';
+    return `${val !== null && val !== void 0 ? val : ''}`;
+};
 exports.getTextValue = getTextValue;
-const getImageSrc = (el) => el.defaultUrl || el.defaultValue || '';
+const getImageSrc = (el, data) => {
+    const bound = el.binding && data ? (0, data_1.resolveBindingValue)(el.binding, data) : undefined;
+    return bound || el.defaultUrl || el.defaultValue || '';
+};
 exports.getImageSrc = getImageSrc;
 const getIconName = (el) => (el.name || el.defaultValue || '');
 exports.getIconName = getIconName;

package/dist/render/init.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleSpecialFields = handleSpecialFields;
+exports.processCardLayout = processCardLayout;
+function handleSpecialFields(data) {
+    var _a;
+    const user = (_a = data.user) !== null && _a !== void 0 ? _a : {};
+    return {
+        ...data,
+        user: {
+            ...user,
+            // 1. 构造 baseCompanyDuty
+            baseCompanyDuty: user.company && user.duty
+                ? `${user.company} ${user.duty}`
+                : user.baseCompanyDuty,
+            // 2. 构造 moreCardInfo.company
+            moreCardInfo: user.moreCardInfo
+                ? {
+                    ...user.moreCardInfo,
+                    company: Array.isArray(user.moreCardInfo.company)
+                        ? user.moreCardInfo.company.map(item => `${item.company} ${item.duty}`)
+                        : user.moreCardInfo.company,
+                }
+                : user.moreCardInfo,
+        },
+    };
+}
+const SHOW_KEYS = new Set([
+    "company_duty_custom",
+    "company_duty_1",
+    "company_duty_2",
+]);
+const HIDE_KEYS = new Set(["company", "duty"]);
+function getCompanyLen(data) {
+    var _a, _b;
+    const company = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.moreCardInfo) === null || _b === void 0 ? void 0 : _b.company;
+    return Array.isArray(company) ? company.length : 0;
+}
+function updateElementsVisible(elements, showMore) {
+    if (!elements)
+        return elements;
+    return elements.map((el) => {
+        // 先递归处理 layout-panel 的 children
+        let next = el;
+        if (el.type === "layout-panel") {
+            next = {
+                ...el,
+                children: updateElementsVisible(el.children, showMore),
+            };
+        }
+        const key = next.key;
+        if (!key)
+            return next;
+        // showMore=true: 显示 company_duty_*，隐藏 company/duty
+        // showMore=false: 反过来
+        if (SHOW_KEYS.has(key)) {
+            return { ...next, visible: showMore };
+        }
+        if (HIDE_KEYS.has(key)) {
+            return { ...next, visible: !showMore };
+        }
+        return next;
+    });
+}
+/**
+ * 根据 user.moreCardInfo.company 数组长度切换元素 visible：
+ * - length > 0: key in [company_duty_custom, company_duty_1, company_duty_2] => visible=true
+ *              key in [company, duty] => visible=false
+ * - length === 0: 反之
+ */
+function processCardLayout(layout, data) {
+    const companyLen = getCompanyLen(data);
+    const showMore = companyLen > 0;
+    return layout.map((card) => {
+        var _a;
+        return ({
+            ...card,
+            children: ((_a = updateElementsVisible(card.children, showMore)) !== null && _a !== void 0 ? _a : card.children),
+        });
+    });
+}