km-card-layout-core 0.1.23 → 0.1.25

package/README.md

@@ -1,18 +1,16 @@
 # km-card-layout-core
 
-纯函数渲染核心：负责将布局 JSON 与数据合成渲染树，处理绑定路径、样式单位（px/rpx）等。
+Utilities for working with card layout schemas: sanitize layouts, handle bindings, convert style units, and apply background/decoration helpers. Rendering now uses `CardElement` directly without intermediate RenderNode conversion.
 
 ## API
 
-- `normalizeLayout(layout)`：清洗/容错布局对象或 JSON 字符串，补齐默认尺寸/children。
-- `buildRenderResult(layout, data, unit?)`：返回 `{ renderTree, cardStyle, backgroundImage, backgroundStyle }`，可直接用于 PC/Vue、小程序等多端。
-- `buildRenderNodes(children, data, unit?, context?)`：仅展开 children 为渲染节点列表。
-- 其他工具：`resolveBindingValue`（绑定读取，支持 `$item.` 与 dataPath 上下文）、`styleObjectToString`、`addUnit`。
+- `normalizeLayout(layout)`: sanitize layout objects and fill defaults.
+- `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.
 
-## 适用场景
+## Usage
 
-- PC 端：在 Vue 组件里调用 `buildRenderResult`，把 renderTree 映射为 VDOM。
-- 小程序：被 `km-card-layout-component-miniprogram` 依赖，组件中通过 core 得到 renderTree。
-- 预渲染/快照：Node 环境按相同逻辑生成渲染树后做静态输出或图片化。
+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')`.
 
-核心不依赖 DOM/平台 API，可直接通过 `require('km-card-layout-core')` 使用。

package/bindings.ts

@@ -54,7 +54,6 @@ export function applyItemCollectBindings(
     else delete base.defaultValue;
     if (key !== undefined) base.key = key;
     else delete base.key;
-    // sync icon name for text elements from template meta.extra.icon
     if (el.type === 'text' && meta?.extra?.icon) {
       base.icon = { ...(base.icon || {}), name: meta.extra.icon };
     }

package/data.ts

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

package/dist/bindings.js

@@ -51,7 +51,6 @@ function applyItemCollectBindings(layouts = [], items = []) {
             base.key = key;
         else
             delete base.key;
-        // sync icon name for text elements from template meta.extra.icon
         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 };
         }

package/dist/index.js

@@ -20,12 +20,30 @@ 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.updateElementsStyle = exports.applyBackground = exports.applySpecialStyle = exports.resolveSpecialStyle = exports.DEFAULT_DECOR_COLOR = exports.backgroundChange = void 0;
+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;
 __exportStar(require("./interface/index"), exports);
-__exportStar(require("./helpers"), exports);
-__exportStar(require("./layout"), exports);
-__exportStar(require("./data"), exports);
-__exportStar(require("./bindings"), exports);
+var helpers_1 = require("./helpers");
+Object.defineProperty(exports, "addUnit", { enumerable: true, get: function () { return helpers_1.addUnit; } });
+Object.defineProperty(exports, "styleObjectToString", { enumerable: true, get: function () { return helpers_1.styleObjectToString; } });
+Object.defineProperty(exports, "toNumber", { enumerable: true, get: function () { return helpers_1.toNumber; } });
+Object.defineProperty(exports, "isObject", { enumerable: true, get: function () { return helpers_1.isObject; } });
+var layout_1 = require("./layout");
+Object.defineProperty(exports, "normalizeLayout", { enumerable: true, get: function () { return layout_1.normalizeLayout; } });
+Object.defineProperty(exports, "sanitizeLayout", { enumerable: true, get: function () { return layout_1.sanitizeLayout; } });
+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; } });
@@ -33,5 +51,17 @@ Object.defineProperty(exports, "resolveSpecialStyle", { enumerable: true, get: f
 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; } });
-__exportStar(require("./render/builder"), exports);
-__exportStar(require("./render/tool"), exports);
+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; } });
+Object.defineProperty(exports, "buildBackgroundStyle", { enumerable: true, get: function () { return helpers_2.buildBackgroundStyle; } });
+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, "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; } });

package/dist/interface/context.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interface/index.js

@@ -16,5 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./elements"), exports);
 __exportStar(require("./layout"), exports);
-__exportStar(require("./render"), exports);
 __exportStar(require("./data/payload"), exports);
+__exportStar(require("./context"), exports);

package/dist/render/builder.js

@@ -83,7 +83,8 @@ const buildImageContentStyle = (el, unit) => {
 const buildTextIcon = (el, unit) => {
     var _a, _b, _c, _d, _e;
     const icon = el.icon;
-    if (!icon || icon.enable === false)
+    const enabled = (icon === null || icon === void 0 ? void 0 : icon.enable) === true;
+    if (!icon || !enabled)
         return undefined;
     const style = icon.style || 'fill';
     const baseName = icon.name || el.key || el.binding || el.id;

package/dist/render/helpers.js

@@ -0,0 +1,133 @@
+"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;
+const helpers_1 = require("../helpers");
+const layout_1 = require("../layout");
+const buildWrapperStyle = (el, unit = 'px') => {
+    const abs = (0, layout_1.getAbsLayout)(el);
+    if (!abs)
+        return {};
+    return {
+        position: 'absolute',
+        left: (0, helpers_1.addUnit)(abs.x, unit),
+        top: (0, helpers_1.addUnit)(abs.y, unit),
+        width: (0, helpers_1.addUnit)(abs.width, unit),
+        height: (0, helpers_1.addUnit)(abs.height, unit),
+        zIndex: abs.zIndex,
+        boxSizing: 'border-box',
+    };
+};
+exports.buildWrapperStyle = buildWrapperStyle;
+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',
+    boxSizing: 'border-box',
+    backgroundColor: 'transparent',
+});
+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%',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+});
+exports.buildBackgroundStyle = buildBackgroundStyle;
+const buildBaseContentStyle = (el) => ({
+    ...(el.style || {}),
+    boxSizing: 'border-box',
+});
+exports.buildBaseContentStyle = buildBaseContentStyle;
+const buildPanelContentStyle = (el, unit = 'px') => ({
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    boxSizing: 'border-box',
+    ...(el.style || {}),
+});
+exports.buildPanelContentStyle = buildPanelContentStyle;
+const buildTextContentStyle = (el, unit = 'px') => {
+    var _a, _b, _c, _d;
+    const textAlign = ((_a = el.style) === null || _a === void 0 ? void 0 : _a.textAlign) || el.align || undefined;
+    const style = {
+        ...(el.style || {}),
+        fontSize: (0, helpers_1.addUnit)((_b = el.style) === null || _b === void 0 ? void 0 : _b.fontSize, unit),
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        lineHeight: ((_c = el.style) === null || _c === void 0 ? void 0 : _c.lineHeight) !== undefined && ((_d = el.style) === null || _d === void 0 ? void 0 : _d.lineHeight) !== null
+            ? (0, helpers_1.addUnit)(el.style.lineHeight, unit)
+            : '1',
+    };
+    if (textAlign)
+        style.textAlign = textAlign;
+    return style;
+};
+exports.buildTextContentStyle = buildTextContentStyle;
+const buildImageContentStyle = (el) => {
+    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';
+    }
+    return style;
+};
+exports.buildImageContentStyle = buildImageContentStyle;
+const getTextValue = (el) => el.defaultValue !== undefined && el.defaultValue !== null
+    ? `${el.defaultValue}`
+    : '';
+exports.getTextValue = getTextValue;
+const getImageSrc = (el) => el.defaultUrl || el.defaultValue || '';
+exports.getImageSrc = getImageSrc;
+const getIconName = (el) => (el.name || el.defaultValue || '');
+exports.getIconName = getIconName;
+const buildTextIconMeta = (el, unit = 'px') => {
+    var _a, _b, _c, _d, _e, _f;
+    const icon = el.icon;
+    const enabled = (icon === null || icon === void 0 ? void 0 : icon.enable) === true;
+    if (!icon || !enabled)
+        return null;
+    const style = icon.style || 'fill';
+    const baseName = icon.name || 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 null;
+    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 = (_b = icon.color) !== null && _b !== void 0 ? _b : (typeof ((_c = el.style) === null || _c === void 0 ? void 0 : _c.color) === 'string' ? el.style.color : undefined);
+    return {
+        name: `${name}`,
+        size: (0, helpers_1.addUnit)(size, unit),
+        gap: (0, helpers_1.addUnit)(gap, unit),
+        color,
+        align: icon.align || 'left',
+        wrapperStyle: {
+            height: ((_d = el.style) === null || _d === void 0 ? void 0 : _d.lineHeight) !== undefined && ((_e = el.style) === null || _e === void 0 ? void 0 : _e.lineHeight) !== null
+                ? (0, helpers_1.addUnit)(el.style.lineHeight, unit)
+                : (_f = el.style) === null || _f === void 0 ? void 0 : _f.fontSize,
+        },
+    };
+};
+exports.buildTextIconMeta = buildTextIconMeta;

package/index.ts

@@ -10,10 +10,25 @@
 
 
 export * from './interface/index';
-export * from './helpers';
-export * from './layout';
-export * from './data';
-export * from './bindings';
+export { addUnit, styleObjectToString, toNumber, isObject } from './helpers';
+export {
+  normalizeLayout,
+  sanitizeLayout,
+  sanitizeElement,
+  roundToInt,
+  getAbsLayout,
+  collectBindings,
+  normalizeId,
+  parseLayout,
+  areChildrenEqual,
+} from './layout';
+export { resolveBindingValue } from './data';
+export {
+  stripLayoutBindings,
+  applyItemCollectBindings,
+  getTemplateItems,
+  getTemplateBackgrounds,
+} from './bindings';
 export {
   backgroundChange,
   DEFAULT_DECOR_COLOR,
@@ -22,7 +37,17 @@ export {
   applyBackground,
   updateElementsStyle,
 } from './ops/changeBackground';
-export * from './render/builder';
-export * from './render/tool';
-
-
+export { buildRenderData } from './render/tool';
+export {
+  buildWrapperStyle,
+  buildCardStyle,
+  buildBackgroundStyle,
+  buildBaseContentStyle,
+  buildPanelContentStyle,
+  buildTextContentStyle,
+  buildImageContentStyle,
+  getTextValue,
+  getImageSrc,
+  getIconName,
+  buildTextIconMeta,
+} from './render/helpers';

package/interface/context.ts

@@ -0,0 +1,6 @@
+export interface BindingContext {
+  // Optional binding prefix for nested contexts
+  contextBinding?: string;
+  // Optional nested context data
+  contextData?: any;
+}

package/interface/index.ts

@@ -1,4 +1,4 @@
 export * from './elements';
 export * from './layout';
-export * from './render';
-export * from './data/payload';
+export * from './data/payload';
+export * from './context';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "km-card-layout-core",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "Shared render helpers for CardMaster layout JSON (binding resolution, layout normalization).",
   "main": "dist/index.js",
   "types": "types.d.ts",
   "license": "MIT",
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
+    "watch": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
     "release": "pnpm run build && npm publish --access public"
   }
 }

package/render/helpers.ts

@@ -0,0 +1,144 @@
+import { addUnit } from '../helpers';
+import { getAbsLayout } from '../layout';
+import type {
+  CardElement,
+  CardLayoutSchema,
+  IconElement,
+  ImageElement,
+  LayoutPanelElement,
+  TextElement,
+} from '../interface';
+
+export const buildWrapperStyle = (el: CardElement, unit: 'px' | 'rpx' = 'px') => {
+  const abs = getAbsLayout(el);
+  if (!abs) return {};
+  return {
+    position: 'absolute',
+    left: addUnit(abs.x, unit),
+    top: addUnit(abs.y, unit),
+    width: addUnit(abs.width, unit),
+    height: addUnit(abs.height, unit),
+    zIndex: abs.zIndex,
+    boxSizing: 'border-box',
+  };
+};
+
+export const buildCardStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx' = 'px') => ({
+  width: addUnit(layout.width, unit),
+  height: addUnit(layout.height, unit),
+  color: layout.fontColor,
+  borderRadius:
+    layout.borderRadius !== undefined
+      ? addUnit(layout.borderRadius, unit)
+      : undefined,
+  padding:
+    layout.padding !== undefined ? addUnit(layout.padding, unit) : undefined,
+  position: 'relative',
+  overflow: 'hidden',
+  boxSizing: 'border-box',
+  backgroundColor: 'transparent',
+});
+
+export const buildBackgroundStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx' = 'px') => ({
+  zIndex: layout.backgroundZIndex,
+  borderRadius:
+    layout.borderRadius !== undefined
+      ? addUnit(layout.borderRadius, unit)
+      : undefined,
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  left: 0,
+  top: 0,
+});
+
+export const buildBaseContentStyle = (el: CardElement) => ({
+  ...(el.style || {}),
+  boxSizing: 'border-box',
+});
+
+export const buildPanelContentStyle = (el: LayoutPanelElement, unit: 'px' | 'rpx' = 'px') => ({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  display: 'block',
+  boxSizing: 'border-box',
+  ...(el.style || {}),
+});
+
+export const buildTextContentStyle = (el: TextElement, unit: 'px' | 'rpx' = 'px') => {
+  const textAlign =
+    (el.style?.textAlign as string | undefined) || el.align || undefined;
+  const style: Record<string, any> = {
+    ...(el.style || {}),
+    fontSize: addUnit(el.style?.fontSize, unit),
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    lineHeight:
+      el.style?.lineHeight !== undefined && el.style?.lineHeight !== null
+        ? addUnit(el.style.lineHeight as any, unit)
+        : '1',
+  };
+  if (textAlign) style.textAlign = textAlign;
+  return style;
+};
+
+export const buildImageContentStyle = (el: ImageElement) => {
+  const style: Record<string, any> = { ...(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';
+  }
+  return style;
+};
+
+export const getTextValue = (el: TextElement) =>
+  el.defaultValue !== undefined && el.defaultValue !== null
+    ? `${el.defaultValue}`
+    : '';
+
+export const getImageSrc = (el: ImageElement) =>
+  el.defaultUrl || el.defaultValue || '';
+
+export const getIconName = (el: IconElement) =>
+  (el.name || el.defaultValue || '') as string;
+
+export const buildTextIconMeta = (el: TextElement, unit: 'px' | 'rpx' = 'px') => {
+  const icon = el.icon;
+  const enabled = icon?.enable === true;
+  if (!icon || !enabled) return null;
+
+  const style = icon.style || 'fill';
+  const baseName = icon.name || el.key || el.binding || el.id;
+  let name: string | undefined;
+  if (style === 'dot') name = 'round';
+  else if (style === 'line') name = baseName ? `${baseName}-line` : undefined;
+  else name = baseName || undefined;
+  if (!name) return null;
+
+  const size =
+    icon.size !== undefined && icon.size !== null
+      ? icon.size
+      : (el.style?.fontSize as any);
+  const gap = icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
+  const color =
+    icon.color ??
+    ((typeof el.style?.color === 'string' ? el.style.color : undefined) as
+      | string
+      | undefined);
+
+  return {
+    name: `${name}`,
+    size: addUnit(size as any, unit),
+    gap: addUnit(gap as any, unit),
+    color,
+    align: icon.align || 'left',
+    wrapperStyle: {
+      height:
+        el.style?.lineHeight !== undefined && el.style?.lineHeight !== null
+          ? addUnit(el.style.lineHeight, unit)
+          : el.style?.fontSize,
+    },
+  };
+};

package/types.d.ts

@@ -10,8 +10,6 @@ import type {
   CardElement,
   CardLayoutInput,
   CardLayoutSchema,
-  RenderNode,
-  RenderResult,
   TemplateItem,
   TemplateBackground
 } from './interface';
@@ -148,22 +146,65 @@ export function updateElementsStyle(
   updates: Record<string, any>
 ): CardLayoutSchema;
 
-export function buildRenderNodes(
-  children: CardElement[],
-  data: Record<string, any>,
-  unit?: 'px' | 'rpx',
-  context?: BindingContext
-): RenderNode[];
+export function buildWrapperStyle(
+  el: CardElement,
+  unit?: 'px' | 'rpx'
+): Record<string, any>;
+
+export function buildCardStyle(
+  layout: CardLayoutSchema,
+  unit?: 'px' | 'rpx'
+): Record<string, any>;
+
+export function buildBackgroundStyle(
+  layout: CardLayoutSchema,
+  unit?: 'px' | 'rpx'
+): Record<string, any>;
+
+export function buildBaseContentStyle(
+  el: CardElement
+): Record<string, any>;
 
-export function buildRenderResult(
-  layout: CardLayoutInput,
-  data: Record<string, any>,
+export function buildPanelContentStyle(
+  el: import('./interface/elements').LayoutPanelElement,
   unit?: 'px' | 'rpx'
-): RenderResult;
+): Record<string, any>;
+
+export function buildTextContentStyle(
+  el: import('./interface/elements').TextElement,
+  unit?: 'px' | 'rpx'
+): Record<string, any>;
+
+export function buildImageContentStyle(
+  el: import('./interface/elements').ImageElement
+): Record<string, any>;
+
+export function getTextValue(
+  el: import('./interface/elements').TextElement
+): string;
+
+export function getImageSrc(
+  el: import('./interface/elements').ImageElement
+): string;
 
+export function getIconName(
+  el: import('./interface/elements').IconElement
+): string;
+
+export function buildTextIconMeta(
+  el: import('./interface/elements').TextElement,
+  unit?: 'px' | 'rpx'
+): {
+  name: string;
+  size?: string;
+  gap?: string;
+  color?: string;
+  align: 'left' | 'right';
+  wrapperStyle?: Record<string, any>;
+} | null;
 
 export function buildRenderData (
   layout: CardLayoutSchema[],
   items: TemplateItem[],
   config: Config
-): CardLayoutSchema[];
+): CardLayoutSchema[];

package/interface/render.ts

@@ -1,53 +0,0 @@
-import type { CardElementType, CardElement } from './elements';
-import type { CardLayoutInput, CardLayoutSchema } from './layout';
-
-export interface RenderNodeIcon {
-  name: string;
-  text?: string;
-  size?: string;
-  color?: string;
-  gap?: string;
-  align?: 'left' | 'right';
-  wrapperStyle?: string;
-}
-
-export interface RenderNode {
-  id: string;
-  type: CardElementType | 'text';
-  wrapperStyle: string;
-  contentStyle: string;
-  name?: string;
-  text?: string;
-  src?: string;
-  mode?: string;
-  children?: RenderNode[];
-  visible?: boolean;
-  icon?: RenderNodeIcon;
-}
-
-export interface RenderPageResult {
-  renderTree: RenderNode[];
-  cardStyle: string;
-  backgroundImage: string;
-  backgroundStyle: string;
-}
-
-export type RenderResult = RenderPageResult[];
-
-export interface BindingContext {
-  /**
-   * 当前上下文数据的绑定前缀（预留给嵌套场景）
-   */
-  contextBinding?: string;
-  /**
-   * 当前上下文数据（预留给嵌套场景）
-   */
-  contextData?: any;
-}
-
-export type {
-  CardElement,
-  CardElementType,
-  CardLayoutInput,
-  CardLayoutSchema,
-};

package/render/builder.ts

@@ -1,286 +0,0 @@
-import type {
-  CardElement,
-  IconElement,
-  ImageElement,
-  LayoutPanelElement,
-  TextElement,
-} from '../interface/elements';
-import type { CardLayoutSchema, CardLayoutInput } from '../interface/layout';
-import type {
-  BindingContext,
-  RenderNode,
-  RenderResult,
-} from '../interface/render';
-import { addUnit, styleObjectToString } from '../helpers';
-import { getAbsLayout, normalizeLayout } from '../layout';
-import { resolveBindingValue } from '../data';
-
-const buildCardStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx') =>
-  styleObjectToString(
-    {
-      width: addUnit(layout.width, unit),
-      height: addUnit(layout.height, unit),
-      color: layout.fontColor,
-      borderRadius:
-        layout.borderRadius !== undefined
-          ? addUnit(layout.borderRadius, unit)
-          : undefined,
-      padding:
-        layout.padding !== undefined ? addUnit(layout.padding, unit) : undefined,
-      position: 'relative',
-      overflow: 'hidden',
-      boxSizing: 'border-box',
-      backgroundColor: 'transparent',
-    },
-    unit
-  );
-
-const buildBackgroundStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx') =>
-  styleObjectToString(
-    {
-      zIndex: layout.backgroundZIndex,
-      borderRadius:
-        layout.borderRadius !== undefined
-          ? addUnit(layout.borderRadius, unit)
-          : undefined,
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      left: 0,
-      top: 0,
-    },
-    unit
-  );
-
-const buildWrapperStyle = (el: CardElement, unit: 'px' | 'rpx'): string => {
-  const abs = getAbsLayout(el);
-  if (!abs) return '';
-  return styleObjectToString(
-    {
-      position: 'absolute',
-      left: addUnit(abs.x, unit),
-      top: addUnit(abs.y, unit),
-      width: addUnit(abs.width, unit),
-      height: addUnit(abs.height, unit),
-      zIndex: abs.zIndex,
-      boxSizing: 'border-box',
-    },
-    unit
-  );
-};
-
-const buildPanelContentStyle = (
-  el: LayoutPanelElement,
-  unit: 'px' | 'rpx'
-) =>
-  styleObjectToString(
-    {
-      position: 'relative',
-      width: '100%',
-      height: '100%',
-      display: 'block',
-      boxSizing: 'border-box',
-      ...(el.style || {}),
-    },
-    unit
-  );
-
-const buildTextContentStyle = (el: TextElement, unit: 'px' | 'rpx') => {
-  const textAlign =
-    (el.style?.textAlign as string | undefined) || el.align || undefined;
-  const style: Record<string, any> = {
-    ...(el.style || {}),
-    whiteSpace: 'pre-wrap',
-    wordBreak: 'break-word',
-    lineHeight:
-      el.style?.lineHeight !== undefined && el.style?.lineHeight !== null
-        ? el.style.lineHeight
-        : '1',
-  };
-  if (textAlign) style.textAlign = textAlign;
-  return styleObjectToString(style, unit);
-};
-
-const buildBaseContentStyle = (el: CardElement, unit: 'px' | 'rpx') =>
-  styleObjectToString(
-    {
-      ...(el.style || {}),
-      boxSizing: 'border-box',
-    },
-    unit
-  );
-
-const buildImageContentStyle = (el: ImageElement, unit: 'px' | 'rpx') => {
-  const style: Record<string, any> = { ...(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';
-  }
-  return styleObjectToString(style, unit);
-};
-
-const buildTextIcon = (
-  el: TextElement,
-  unit: 'px' | 'rpx'
-): RenderNode['icon'] | undefined => {
-  const icon = el.icon;
-  if (!icon || icon.enable === false) return undefined;
-
-  const style = icon.style || 'fill';
-  const baseName = icon.name || el.key || el.binding || el.id;
-  let name: string | undefined;
-  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
-      : (el.style?.fontSize as any);
-  const gap = icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
-  const color =
-    icon.color ??
-    ((typeof el.style?.color === 'string' ? el.style.color : undefined) as
-      | string
-      | undefined);
-
-  return {
-    name: `${name}`,
-    text: `${name}`,
-    size: addUnit(size as any, unit),
-    gap: addUnit(gap as any, unit),
-    color: color as any,
-    align: icon.align || 'left',
-    wrapperStyle: styleObjectToString(
-      {
-        height: el.style?.lineHeight || el.style?.fontSize,
-      },
-      unit
-    ),
-  };
-};
-
-const buildNode = (
-  el: CardElement,
-  rootData: Record<string, any>,
-  unit: 'px' | 'rpx',
-  context: BindingContext
-): RenderNode | null => {
-  if (!el || el.visible === false) return null;
-  const wrapperStyle = buildWrapperStyle(el, unit);
-
-  if (el.type === 'layout-panel') {
-    return {
-      id: el.id,
-      type: el.type,
-      visible: el.visible,
-      wrapperStyle,
-      contentStyle: buildPanelContentStyle(el as LayoutPanelElement, unit),
-      children: buildRenderNodes(el.children || [], rootData, unit, context),
-    };
-  }
-
-  const baseStyle = buildBaseContentStyle(el, unit);
-  if (el.type === 'text') {
-    const value =
-      resolveBindingValue(el.binding, rootData, context) ??
-      el.defaultValue ??
-      '';
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: buildTextContentStyle(el as TextElement, unit),
-      text: `${value}`,
-      visible: el.visible,
-      icon: buildTextIcon(el as TextElement, unit),
-    };
-  }
-
-  if (el.type === 'image') {
-    const src =
-      resolveBindingValue(el.binding, rootData, context) ??
-      (el as ImageElement).defaultUrl ??
-      el.defaultValue ??
-      '';
-    const mode =
-      (el as ImageElement).fit === 'contain' ? 'aspectFit' : 'aspectFill';
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: buildImageContentStyle(el as ImageElement, unit),
-      src,
-      mode,
-      visible: el.visible,
-    };
-  }
-
-  if (el.type === 'icon') {
-    const name =
-      resolveBindingValue(el.binding, rootData, context) ??
-      (el as IconElement).name ??
-      el.defaultValue ??
-      '';
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: baseStyle,
-      name: `${name}`,
-      text: `${name}`,
-      visible: el.visible,
-    };
-  }
-
-  if (el.type === 'custom') {
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: baseStyle,
-      visible: el.visible,
-    };
-  }
-
-  return null;
-};
-
-export const buildRenderNodes = (
-  children: CardElement[],
-  rootData: Record<string, any>,
-  unit: 'px' | 'rpx' = 'px',
-  context: BindingContext = {}
-): RenderNode[] => {
-  if (!Array.isArray(children)) return [];
-
-  const nodes: RenderNode[] = [];
-  children.forEach(el => {
-    if (!el || el.visible === false) return;
-    const node = buildNode(el, rootData, unit, context);
-    if (node) nodes.push(node);
-  });
-
-  return nodes;
-};
-
-export const buildRenderResult = (
-  layoutInput: CardLayoutInput,
-  dataInput: Record<string, any>,
-  unit: 'px' | 'rpx' = 'px'
-): RenderResult => {
-  const layouts = normalizeLayout(layoutInput);
-  return layouts.map(layout => {
-    const cardStyle = buildCardStyle(layout, unit);
-    const bgStyle = buildBackgroundStyle(layout, unit);
-    const renderTree = buildRenderNodes(layout.children || [], dataInput || {}, unit);
-    return {
-      renderTree,
-      cardStyle,
-      backgroundImage: layout.backgroundImage || '',
-      backgroundStyle: bgStyle,
-    };
-  });
-};