km-card-layout-core 0.1.25 → 0.1.27

package/index.ts

@@ -1,14 +1,7 @@
 /**
- * CardMaster 布局 JSON 渲染核心
- *
- * - 平台无关：不依赖 DOM/小程序 API，方便在 Web/小程序/Node 复用。
- * - 职责：将布局 Schema 与业务数据合成可渲染树，外层只需将节点映射到各端组件。
+ * Core exports for card layout helpers.
+ * Platform-agnostic utilities shared by web/mini-program renderers.
  */
-
-
-
-
-
 export * from './interface/index';
 export { addUnit, styleObjectToString, toNumber, isObject } from './helpers';
 export {
@@ -17,27 +10,12 @@ export {
   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,
-  resolveSpecialStyle,
-  applySpecialStyle,
-  applyBackground,
-  updateElementsStyle,
-} from './ops/changeBackground';
-export { buildRenderData } from './render/tool';
+export { stripLayoutBindings, applyItemCollectBindings } from './bindings';
+export { backgroundChange } from './ops/changeBackground';
 export {
   buildWrapperStyle,
   buildCardStyle,
@@ -45,9 +23,12 @@ export {
   buildBaseContentStyle,
   buildPanelContentStyle,
   buildTextContentStyle,
+  buildTextValueStyle,
   buildImageContentStyle,
   getTextValue,
   getImageSrc,
   getIconName,
   buildTextIconMeta,
 } from './render/helpers';
+
+export { handleSpecialFields, processCardLayout } from './render/init';

package/interface/data/payload.ts

@@ -1,4 +1,4 @@
-import { CardLayoutSchema } from "../layout";
+import { CardLayoutSchema } from '../layout';
 
 /**
  * 背景项
@@ -20,11 +20,10 @@ export interface TemplateItem {
   name: string;
   bind: string;
   key?: string;
-  icon?: string;
   extra?: { icon?: string };
   default?: string;
   type: 'text' | 'image';
-  cate: number;
+  cate: number; // 1 内置 | 2 特殊
   required?: 0 | 1;
 }
 
@@ -43,4 +42,5 @@ export interface TemplateLayoutInfo {
   isBgCustomize?: 0 | 1;
   createAt?: string;
   updateAt?: string;
+  illustration?: string;
 }

package/interface/elements.ts

@@ -32,13 +32,14 @@ export interface TextIconConfig {
   gap?: number;
   align?: 'left' | 'right';
   enable?: boolean;
-  style?: 'fill' | 'dot' | 'line';
+  style?: 'fill' | 'dot' | 'line' | 'text';
 }
 
 export interface TextElement extends CardElementBase {
   type: 'text';
   align?: 'left' | 'center' | 'right';
   icon?: TextIconConfig;
+  label?: string;
 }
 
 export interface ImageElement extends CardElementBase {

package/interface/index.ts

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

package/interface/layout.ts

@@ -10,10 +10,11 @@ export interface CardLayoutSchema {
   backgroundImage?: string;
   backgroundZIndex?: number;
   fontColor?: string;
-  borderRadius?: number;
   padding?: number;
   children: CardElement[];
   thumbnail?: string;
+  backgroundWidth?: number;
+  backgroundHeight?: number;
 }
 
 export type CardLayoutInput = CardLayoutSchema[];

package/layout.ts

@@ -54,17 +54,6 @@ export const sanitizeLayout = (layout: CardLayoutSchema): CardLayoutSchema => ({
   children: (layout.children || []).map(child => sanitizeElement(child)),
 });
 
-export const collectBindings = (elements: CardElement[] = []): string[] => {
-  const result: string[] = [];
-  elements.forEach(el => {
-    if (el.binding) result.push(el.binding);
-    if (el.type === 'layout-panel' && el.children) {
-      result.push(...collectBindings(el.children));
-    }
-  });
-  return Array.from(new Set(result));
-};
-
 export const normalizeId = (id?: string | number | null) => {
   if (id === undefined || id === null) return undefined;
   const num = Number(id);
@@ -120,10 +109,3 @@ export const normalizeLayout = (
     })
     .filter((value): value is CardLayoutSchema => Boolean(value));
 };
-
-export const areChildrenEqual = (
-  a?: CardLayoutSchema | null,
-  b?: CardLayoutSchema | null
-): boolean => {
-  return JSON.stringify(a?.children) === JSON.stringify(b?.children);
-};

package/ops/changeBackground.ts

@@ -1,19 +1,6 @@
 import type { CardElement, CardLayoutSchema } from '../interface';
 import type { TemplateBackground } from '../interface/data/payload';
 
-type BackgroundColorMap = {
-  name: string | string[];
-  color: string;
-};
-
-type CoreBackgroundConfig = {
-  id?: string | number;
-  name?: string;
-  imageUrl?: string;
-  mainColor?: string;
-  specialColors?: BackgroundColorMap[];
-};
-
 const toNameArray = (name?: string | string[]) => {
   if (Array.isArray(name)) return name.filter(Boolean);
   if (!name) return [];
@@ -27,10 +14,11 @@ export function backgroundChange(
   bg: TemplateBackground,
   layout: CardLayoutSchema
 ): CardLayoutSchema {
-  const applySpecialColor = (el: CardElement): CardElement => {
-    const extras = bg.fontColorExtra || [];
-    if (!extras.length) return el;
+  const extras = bg.fontColorExtra || [];
+  const iconSpecialColor =
+    extras.find(sc => toNameArray(sc.name).some(n => n === 'icon'))?.color;
 
+  const applySpecialColor = (el: CardElement): CardElement => {
     const keys: string[] = [];
     if (el.binding) keys.push(String(el.binding));
     if (el.id) keys.push(String(el.id));
@@ -40,13 +28,49 @@ export function backgroundChange(
     const matched = extras.find(sc =>
       toNameArray(sc.name).some(n => keys.some(k => k?.startsWith(n)))
     );
-    if (!matched) return el;
 
     const baseStyle = { ...(el.style || {}) };
-    if (el.type === 'custom') {
-      return { ...el, style: { ...baseStyle, backgroundColor: matched.color } };
+    let nextEl: CardElement = 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 as any).icon) {
+      const nextIcon = { ...(nextEl as any).icon };
+      if (iconSpecialColor) {
+        nextIcon.color = iconSpecialColor;
+      } else if ('color' in nextIcon) {
+        delete nextIcon.color;
+      }
+      nextEl = { ...(nextEl as any), icon: nextIcon } as CardElement;
     }
-    return { ...el, style: { ...baseStyle, color: matched.color } };
+
+    return nextEl;
   };
 
   const traverse = (children: CardElement[] = []): CardElement[] =>
@@ -61,119 +85,12 @@ export function backgroundChange(
       return applySpecialColor(el);
     });
 
+  const nextChildren = traverse(layout.children || []);
+
   return {
     ...layout,
     backgroundImage: bg.imgUrl,
     fontColor: bg.fontColor || layout.fontColor,
-    children: traverse(layout.children || []),
+    children: nextChildren,
   };
 }
-
-export const DEFAULT_DECOR_COLOR = '#94a3b8';
-
-export const resolveSpecialStyle = (
-  element: CardElement,
-  background?: CoreBackgroundConfig | null
-) => {
-  if (!background) return {};
-  const keys: string[] = [];
-  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 = background.specialColors?.find(sc => {
-    const names = toNameArray(sc.name);
-    return names.some(n => keys.some(k => k?.startsWith(n)));
-  });
-
-  if (!matched) return {};
-  if (element.type === 'custom') {
-    return { backgroundColor: matched.color };
-  }
-  return { color: matched.color };
-};
-
-export const applySpecialStyle = (
-  el: CardElement,
-  background: CoreBackgroundConfig | null = null,
-  options: { overrideExisting?: boolean; defaultDecorColor?: string } = {}
-): CardElement => {
-  const specialStyle = 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 || 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?.mainColor || defaultDecorColor;
-    } else {
-      delete nextStyle.color;
-    }
-    return { ...el, style: nextStyle };
-  }
-
-  return el;
-};
-
-export const applyBackground = (
-  layout: CardLayoutSchema,
-  background: CoreBackgroundConfig,
-  _options: {
-    previousBackground?: CoreBackgroundConfig | null;
-    defaultDecorColor?: string;
-  } = {}
-): CardLayoutSchema => {
-  const bgId = Number(background.id);
-  const payload: TemplateBackground = {
-    id: Number.isFinite(bgId) ? bgId : 0,
-    name: background.name!,
-    imgUrl: background.imageUrl!,
-    fontColor: background.mainColor,
-    fontColorExtra:
-      background.specialColors?.map(sc => ({
-        name: sc.name,
-        color: sc.color,
-      })) || [],
-  };
-  return backgroundChange(payload, layout);
-};
-
-export const updateElementsStyle = (
-  layout: CardLayoutSchema,
-  targetIds: string[],
-  updates: Record<string, any>
-): CardLayoutSchema => {
-  const targets = new Set(targetIds);
-  return {
-    ...layout,
-    children: layout.children.map(el =>
-      targets.has(el.id)
-        ? { ...el, style: { ...(el.style || {}), ...updates } }
-        : el
-    ),
-  };
-};
-
-export const setElementVisible = (
-  layout: CardLayoutSchema[],
-  key: string,
-  visible: boolean
-): CardLayoutSchema[] => {
-  return layout.map(la => ({
-    ...la,
-    children: la.children.map(el => (el.key === key ? { ...el, visible } : el)),
-  }));
-};

package/package.json

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

package/render/helpers.ts

@@ -1,5 +1,6 @@
 import { addUnit } from '../helpers';
 import { getAbsLayout } from '../layout';
+import { resolveBindingValue } from '../data';
 import type {
   CardElement,
   CardLayoutSchema,
@@ -9,7 +10,10 @@ import type {
   TextElement,
 } from '../interface';
 
-export const buildWrapperStyle = (el: CardElement, unit: 'px' | 'rpx' = 'px') => {
+export const buildWrapperStyle = (
+  el: CardElement,
+  unit: 'px' | 'rpx' = 'px'
+) => {
   const abs = getAbsLayout(el);
   if (!abs) return {};
   return {
@@ -23,14 +27,13 @@ export const buildWrapperStyle = (el: CardElement, unit: 'px' | 'rpx' = 'px') =>
   };
 };
 
-export const buildCardStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx' = 'px') => ({
+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',
@@ -39,14 +42,17 @@ export const buildCardStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx' = 'p
   backgroundColor: 'transparent',
 });
 
-export const buildBackgroundStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx' = 'px') => ({
+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%',
+  width: layout.backgroundWidth
+    ? addUnit(layout.backgroundWidth, unit)
+    : '100%',
+  height: layout.backgroundHeight
+    ? addUnit(layout.backgroundHeight, unit)
+    : '100%',
   position: 'absolute',
   left: 0,
   top: 0,
@@ -57,7 +63,10 @@ export const buildBaseContentStyle = (el: CardElement) => ({
   boxSizing: 'border-box',
 });
 
-export const buildPanelContentStyle = (el: LayoutPanelElement, unit: 'px' | 'rpx' = 'px') => ({
+export const buildPanelContentStyle = (
+  el: LayoutPanelElement,
+  unit: 'px' | 'rpx' = 'px'
+) => ({
   position: 'relative',
   width: '100%',
   height: '100%',
@@ -66,7 +75,10 @@ export const buildPanelContentStyle = (el: LayoutPanelElement, unit: 'px' | 'rpx
   ...(el.style || {}),
 });
 
-export const buildTextContentStyle = (el: TextElement, unit: 'px' | 'rpx' = 'px') => {
+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> = {
@@ -83,28 +95,60 @@ export const buildTextContentStyle = (el: TextElement, unit: 'px' | 'rpx' = 'px'
   return style;
 };
 
-export const buildImageContentStyle = (el: ImageElement) => {
+export const buildTextValueStyle = (
+  el: TextElement,
+  unit: 'px' | 'rpx' = 'px'
+) => {
+  const style: Record<string, any> = {
+    letterSpacing:
+      el.style?.letterSpacing !== undefined && el.style?.letterSpacing !== null
+        ? addUnit(el.style.letterSpacing as any, unit)
+        : '0',
+  };
+  return style;
+};
+
+export const buildImageContentStyle = (
+  el: ImageElement,
+  unit: 'px' | 'rpx' = 'px'
+) => {
   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';
-  }
+  style.borderWidth =
+    el.style?.borderWidth !== undefined && el.style?.borderWidth !== null
+      ? addUnit(el.style.borderWidth as any, unit)
+      : '0';
+  style.borderRadius =
+    el.style?.borderRadius !== undefined && el.style?.borderRadius !== null
+      ? addUnit(el.style.borderRadius as any, unit)
+      : '0';
   return style;
 };
 
-export const getTextValue = (el: TextElement) =>
-  el.defaultValue !== undefined && el.defaultValue !== null
-    ? `${el.defaultValue}`
-    : '';
+export const getTextValue = (el: TextElement, data?: Record<string, any>) => {
+  const bound =
+    el.binding && data ? resolveBindingValue(el.binding, data) : undefined;
+  const val =
+    bound !== undefined && bound !== null
+      ? bound
+      : el.defaultValue !== undefined && el.defaultValue !== null
+      ? el.defaultValue
+      : '';
+  return `${val ?? ''}`;
+};
 
-export const getImageSrc = (el: ImageElement) =>
-  el.defaultUrl || el.defaultValue || '';
+export const getImageSrc = (el: ImageElement, data?: Record<string, any>) => {
+  const bound =
+    el.binding && data ? resolveBindingValue(el.binding, data) : undefined;
+  return (bound as any) || el.defaultUrl || el.defaultValue || '';
+};
 
 export const getIconName = (el: IconElement) =>
   (el.name || el.defaultValue || '') as string;
 
-export const buildTextIconMeta = (el: TextElement, unit: 'px' | 'rpx' = 'px') => {
+export const buildTextIconMeta = (
+  el: TextElement,
+  unit: 'px' | 'rpx' = 'px'
+) => {
   const icon = el.icon;
   const enabled = icon?.enable === true;
   if (!icon || !enabled) return null;

package/render/init.ts

@@ -0,0 +1,107 @@
+import { CardElement, CardLayoutSchema } from "../interface";
+
+type CompanyDuty = {
+  company: string;
+  duty: string;
+};
+
+export function handleSpecialFields(data: { user: Record<string, any> }): {
+  user: Record<string, any>;
+} {
+  const user = data.user ?? {};
+
+  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 as CompanyDuty[]).map(
+                  item => `${item.company} ${item.duty}`
+                )
+              : user.moreCardInfo.company,
+          }
+        : user.moreCardInfo,
+    },
+  };
+}
+
+
+
+
+
+type Data = { user: Record<string, any> };
+
+const SHOW_KEYS = new Set([
+  "company_duty_custom",
+  "company_duty_1",
+  "company_duty_2",
+]);
+
+const HIDE_KEYS = new Set(["company", "duty"]);
+
+function getCompanyLen(data: Data): number {
+  const company = (data?.user as any)?.moreCardInfo?.company;
+  return Array.isArray(company) ? company.length : 0;
+}
+
+function updateElementsVisible(
+  elements: CardElement[] | undefined,
+  showMore: boolean
+): CardElement[] | undefined {
+  if (!elements) return elements;
+
+  return elements.map((el) => {
+    // 先递归处理 layout-panel 的 children
+    let next: CardElement = el;
+    if (el.type === "layout-panel") {
+      next = {
+        ...el,
+        children: updateElementsVisible(el.children, showMore),
+      } as CardElement;
+    }
+
+    const key = (next as any).key as string | undefined;
+    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: 反之
+ */
+export function processCardLayout(
+  layout: CardLayoutSchema[],
+  data: Data
+): CardLayoutSchema[] {
+  const companyLen = getCompanyLen(data);
+  const showMore = companyLen > 0;
+
+  return layout.map((card) => ({
+    ...card,
+    children: (updateElementsVisible(card.children, showMore) ??
+      card.children) as CardElement[],
+  }));
+}