km-card-layout-core 0.1.7 → 0.1.9

package/dist/index.js

@@ -193,49 +193,91 @@ const resolveBindingValue = (binding, rootData, context) => {
 };
 exports.resolveBindingValue = resolveBindingValue;
 /** ---------- 样式构建 ---------- */
+const buildCardStyle = (layout, unit) => (0, exports.styleObjectToString)({
+    width: (0, exports.addUnit)(layout.width, unit),
+    height: (0, exports.addUnit)(layout.height, unit),
+    color: layout.fontColor,
+    borderRadius: layout.borderRadius !== undefined
+        ? (0, exports.addUnit)(layout.borderRadius, unit)
+        : undefined,
+    padding: layout.padding !== undefined ? (0, exports.addUnit)(layout.padding, unit) : undefined,
+    position: 'relative',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    backgroundColor: 'transparent',
+}, unit);
+const buildBackgroundStyle = (layout, unit) => (0, exports.styleObjectToString)({
+    zIndex: layout.backgroundZIndex,
+    borderRadius: layout.borderRadius !== undefined
+        ? (0, exports.addUnit)(layout.borderRadius, unit)
+        : undefined,
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+}, unit);
 /**
  * 生成元素外层样式（绝对/弹性布局），始终返回内联样式字符串。
  */
 const buildWrapperStyle = (el, unit) => {
-    var _a;
     const abs = getAbsLayout(el);
-    if (abs) {
-        const textAlign = (_a = el === null || el === void 0 ? void 0 : el.style) === null || _a === void 0 ? void 0 : _a.textAlign;
-        return (0, exports.styleObjectToString)({
-            position: 'absolute',
-            left: (0, exports.addUnit)(abs.x, unit),
-            top: (0, exports.addUnit)(abs.y, unit),
-            width: (0, exports.addUnit)(abs.width, unit),
-            height: (0, exports.addUnit)(abs.height, unit),
-            zIndex: abs.zIndex,
-            boxSizing: 'border-box',
-            textAlign,
-        }, unit);
-    }
-    return '';
+    if (!abs)
+        return '';
+    return (0, exports.styleObjectToString)({
+        position: 'absolute',
+        left: (0, exports.addUnit)(abs.x, unit),
+        top: (0, exports.addUnit)(abs.y, unit),
+        width: (0, exports.addUnit)(abs.width, unit),
+        height: (0, exports.addUnit)(abs.height, unit),
+        zIndex: abs.zIndex,
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'center',
+    }, unit);
 };
-/**
- * padding 数组/数字转 CSS 缩写字符串。
- */
-/**
- * 构建 layout-panel 的容器样式（绝对布局容器）。
- */
-const buildPanelStyle = (el, unit) => {
+const buildPanelContentStyle = (el, unit) => (0, exports.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 = {
-        display: 'block',
+        ...(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, exports.styleObjectToString)(style, unit);
 };
-/**
- * 元素样式转内联字符串（自动补单位）。
- */
-const normalizeElementStyle = (style, unit) => {
-    if (!style)
-        return '';
+const buildBaseContentStyle = (el, unit) => (0, exports.styleObjectToString)({
+    ...(el.style || {}),
+    boxSizing: 'border-box',
+}, unit);
+const buildImageContentStyle = (el, unit) => {
+    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 (0, exports.styleObjectToString)(style, unit);
 };
 const buildTextIcon = (el, unit) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const icon = el.icon;
     if (!icon || icon.enable === false)
         return undefined;
@@ -262,6 +304,11 @@ const buildTextIcon = (el, unit) => {
         gap: (0, exports.addUnit)(gap, unit),
         color: color,
         align: icon.align || 'left',
+        wrapperStyle: (0, exports.styleObjectToString)({
+            display: 'inline-flex',
+            alignItems: 'center',
+            height: ((_d = el.style) === null || _d === void 0 ? void 0 : _d.lineHeight) || 'auto',
+        }, unit),
     };
 };
 /** ---------- 渲染树构建 ---------- */
@@ -286,7 +333,7 @@ exports.buildRenderNodes = buildRenderNodes;
  * 构建单个渲染节点（layout-panel 递归处理子元素）。
  */
 const buildNode = (el, rootData, unit, context) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (!el || el.visible === false)
         return null;
     const wrapperStyle = buildWrapperStyle(el, unit);
@@ -294,42 +341,40 @@ const buildNode = (el, rootData, unit, context) => {
         return {
             id: el.id,
             type: el.type,
-            visible: !!el.visible,
+            visible: el.visible,
             wrapperStyle,
-            contentStyle: buildPanelStyle(el, unit),
+            contentStyle: buildPanelContentStyle(el, unit),
             children: (0, exports.buildRenderNodes)(el.children || [], rootData, unit, context),
         };
     }
-    const baseStyle = normalizeElementStyle(el.style, unit);
+    const baseStyle = buildBaseContentStyle(el, unit);
     if (el.type === 'text') {
-        const align = ((_a = el.style) === null || _a === void 0 ? void 0 : _a.textAlign) || el.align;
-        const textStyle = align ? `${baseStyle};text-align:${align}` : baseStyle;
-        const value = (_c = (_b = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _b !== void 0 ? _b : el.defaultValue) !== null && _c !== void 0 ? _c : '';
+        const value = (_b = (_a = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _a !== void 0 ? _a : el.defaultValue) !== null && _b !== void 0 ? _b : '';
         return {
             id: el.id,
             type: el.type,
             wrapperStyle,
-            contentStyle: textStyle,
+            contentStyle: buildTextContentStyle(el, unit),
             text: `${value}`,
-            visible: !!el.visible,
+            visible: el.visible,
             icon: buildTextIcon(el, unit),
         };
     }
     if (el.type === 'image') {
-        const src = (_f = (_e = (_d = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _d !== void 0 ? _d : el.defaultUrl) !== null && _e !== void 0 ? _e : el.defaultValue) !== null && _f !== void 0 ? _f : '';
+        const src = (_e = (_d = (_c = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== 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: baseStyle,
+            contentStyle: buildImageContentStyle(el, unit),
             src,
             mode,
-            visible: !!el.visible,
+            visible: el.visible,
         };
     }
     if (el.type === 'icon') {
-        const name = (_j = (_h = (_g = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _g !== void 0 ? _g : el.name) !== null && _h !== void 0 ? _h : el.defaultValue) !== null && _j !== void 0 ? _j : '';
+        const name = (_h = (_g = (_f = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _f !== void 0 ? _f : el.name) !== null && _g !== void 0 ? _g : el.defaultValue) !== null && _h !== void 0 ? _h : '';
         return {
             id: el.id,
             type: el.type,
@@ -337,7 +382,7 @@ const buildNode = (el, rootData, unit, context) => {
             contentStyle: baseStyle,
             name: `${name}`,
             text: `${name}`,
-            visible: !!el.visible,
+            visible: el.visible,
         };
     }
     if (el.type === 'custom') {
@@ -346,7 +391,7 @@ const buildNode = (el, rootData, unit, context) => {
             type: el.type,
             wrapperStyle,
             contentStyle: baseStyle,
-            visible: !!el.visible,
+            visible: el.visible,
         };
     }
     return null;
@@ -357,24 +402,8 @@ const buildNode = (el, rootData, unit, context) => {
 const buildRenderResult = (layoutInput, dataInput, unit = 'px') => {
     const layouts = (0, exports.normalizeLayout)(layoutInput);
     return layouts.map(layout => {
-        const cardStyle = (0, exports.styleObjectToString)({
-            width: (0, exports.addUnit)(layout.width, unit),
-            height: (0, exports.addUnit)(layout.height, unit),
-            color: layout.fontColor,
-            borderRadius: layout.borderRadius !== undefined
-                ? (0, exports.addUnit)(layout.borderRadius, unit)
-                : undefined,
-            padding: layout.padding !== undefined
-                ? (0, exports.addUnit)(layout.padding, unit)
-                : undefined,
-            position: 'relative',
-        }, unit);
-        const bgStyle = (0, exports.styleObjectToString)({
-            zIndex: layout.backgroundZIndex,
-            borderRadius: layout.borderRadius !== undefined
-                ? (0, exports.addUnit)(layout.borderRadius, unit)
-                : undefined,
-        }, unit);
+        const cardStyle = buildCardStyle(layout, unit);
+        const bgStyle = buildBackgroundStyle(layout, unit);
         const renderTree = (0, exports.buildRenderNodes)(layout.children || [], dataInput || {}, unit);
         return {
             renderTree,

package/index.ts

@@ -206,53 +206,127 @@ export const resolveBindingValue = (
 
 /** ---------- 样式构建 ---------- */
 
+const buildCardStyle = (
+  layout: CardLayoutSchema,
+  unit: 'px' | 'rpx'
+): string =>
+  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'
+): string =>
+  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) {
-    const textAlign = el?.style?.textAlign as string | undefined;
-    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',
-        textAlign,
-      },
-      unit
-    );
-  }
-
-  return '';
+  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',
+      display: 'flex',
+      alignItems: 'center',
+    },
+    unit
+  );
 };
-/**
- * padding 数组/数字转 CSS 缩写字符串。
- */
-/**
- * 构建 layout-panel 的容器样式（绝对布局容器）。
- */
-const buildPanelStyle = (
+const buildPanelContentStyle = (
   el: LayoutPanelElement,
   unit: 'px' | 'rpx'
-): string => {
-  const style = {
-    display: 'block',
-  } as Record<string, any>;
+): string =>
+  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.2',
+    display: 'inline-flex',
+    alignItems: 'center',
+  };
+  if (textAlign) style.textAlign = textAlign;
   return styleObjectToString(style, unit);
 };
-/**
- * 元素样式转内联字符串（自动补单位）。
- */
-const normalizeElementStyle = (
-  style: Record<string, any> | undefined,
+
+const buildBaseContentStyle = (
+  el: CardElement,
+  unit: 'px' | 'rpx'
+): string =>
+  styleObjectToString(
+    {
+      ...(el.style || {}),
+      boxSizing: 'border-box',
+    },
+    unit
+  );
+
+const buildImageContentStyle = (
+  el: ImageElement,
   unit: 'px' | 'rpx'
 ): string => {
-  if (!style) return '';
+  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);
 };
 
@@ -290,6 +364,14 @@ const buildTextIcon = (
     gap: addUnit(gap as any, unit),
     color: color as any,
     align: icon.align || 'left',
+    wrapperStyle: styleObjectToString(
+      {
+        display: 'inline-flex',
+        alignItems: 'center',
+        height: el.style?.lineHeight || 'auto',
+      },
+      unit
+    ),
   };
 };
 
@@ -330,17 +412,15 @@ const buildNode = (
     return {
       id: el.id,
       type: el.type,
-      visible: !!el.visible,
+      visible: el.visible,
       wrapperStyle,
-      contentStyle: buildPanelStyle(el as LayoutPanelElement, unit),
+      contentStyle: buildPanelContentStyle(el as LayoutPanelElement, unit),
       children: buildRenderNodes(el.children || [], rootData, unit, context),
     };
   }
 
-  const baseStyle = normalizeElementStyle(el.style, unit);
+  const baseStyle = buildBaseContentStyle(el, unit);
   if (el.type === 'text') {
-    const align = (el.style?.textAlign as string | undefined) || el.align;
-    const textStyle = align ? `${baseStyle};text-align:${align}` : baseStyle;
     const value =
       resolveBindingValue(el.binding, rootData, context) ??
       el.defaultValue ??
@@ -349,9 +429,9 @@ const buildNode = (
       id: el.id,
       type: el.type,
       wrapperStyle,
-      contentStyle: textStyle,
+      contentStyle: buildTextContentStyle(el as TextElement, unit),
       text: `${value}`,
-      visible: !!el.visible,
+      visible: el.visible,
       icon: buildTextIcon(el as TextElement, unit),
     };
   }
@@ -368,10 +448,10 @@ const buildNode = (
       id: el.id,
       type: el.type,
       wrapperStyle,
-      contentStyle: baseStyle,
+      contentStyle: buildImageContentStyle(el as ImageElement, unit),
       src,
       mode,
-      visible: !!el.visible,
+      visible: el.visible,
     };
   }
 
@@ -388,7 +468,7 @@ const buildNode = (
       contentStyle: baseStyle,
       name: `${name}`,
       text: `${name}`,
-      visible: !!el.visible,
+      visible: el.visible,
     };
   }
 
@@ -398,7 +478,7 @@ const buildNode = (
       type: el.type,
       wrapperStyle,
       contentStyle: baseStyle,
-      visible: !!el.visible,
+      visible: el.visible,
     };
   }
 
@@ -414,33 +494,8 @@ export const buildRenderResult = (
 ): RenderResult => {
   const layouts = normalizeLayout(layoutInput);
   return layouts.map(layout => {
-    const cardStyle = 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',
-      },
-      unit
-    );
-    const bgStyle = styleObjectToString(
-      {
-        zIndex: layout.backgroundZIndex,
-        borderRadius:
-          layout.borderRadius !== undefined
-            ? addUnit(layout.borderRadius, unit)
-            : undefined,
-      },
-      unit
-    );
+    const cardStyle = buildCardStyle(layout, unit);
+    const bgStyle = buildBackgroundStyle(layout, unit);
 
     const renderTree = buildRenderNodes(
       layout.children || [],
@@ -457,4 +512,4 @@ export const buildRenderResult = (
   });
 };
 
-export * from './utils';
+export * from './utils';

package/interface/data/payload.ts

@@ -1,3 +1,5 @@
+import { CardLayoutSchema } from "../layout";
+
 /**
  * 背景项
  */
@@ -6,11 +8,10 @@ export interface TemplateBackground {
   name: string;
   fileId?: number;
   fontColor?: string;
-  fontColorExtra?: { name: string | string[]; color: string }[]
+  fontColorExtra?: { name: string | string[]; color: string }[];
   imgUrl: string;
 }
 
-
 /**
  * 元素项
  */
@@ -25,3 +26,20 @@ export interface TemplateItem {
   cate: number;
   required?: 0 | 1;
 }
+
+export interface TemplateLayoutInfo {
+  id: number | string;
+  name?: string;
+  previewImg?: string;
+  height?: number;
+  width?: number;
+  enableBgIds?: string | null;
+  enableItemIds?: string | null;
+  content?: CardLayoutSchema[];
+  isVip?: 0 | 1;
+  isDouble?: 0 | 1;
+  isMoreCompany?: 0 | 1;
+  isBgCustomize?: 0 | 1;
+  createAt?: string;
+  updateAt?: string;
+}

package/interface/render.ts

@@ -8,6 +8,7 @@ export interface RenderNodeIcon {
   color?: string;
   gap?: string;
   align?: 'left' | 'right';
+  wrapperStyle?: string;
 }
 
 export interface RenderNode {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "km-card-layout-core",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Shared render helpers for CardMaster layout JSON (binding resolution, layout normalization).",
   "main": "dist/index.js",
   "types": "types.d.ts",

package/types.d.ts

@@ -12,6 +12,8 @@ import type {
   CardLayoutSchema,
   RenderNode,
   RenderResult,
+  TemplateBackground,
+  TemplateItem,
 } from './interface';
 
 export function addUnit(
@@ -56,4 +58,4 @@ export function buildRenderResult(
 
 export function getTemplateItems(ids: string, items: TemplateItem[]): TemplateItem[];
 
-export function getTemplateBackgrounds(ids: string, items: TemplateBackground[]) : TemplateBackground[];
+export function getTemplateBackgrounds(ids: string, items: TemplateBackground[]) : TemplateBackground[];