@dckj-npm/dc-material 0.1.376 → 0.1.377

package/es/components/teletext-list/teletext-list-item.d.ts

@@ -1,106 +1,43 @@
 import React from 'react';
 import './teletext-list-item.scss';
 import { IconListProps } from './teletext-list';
-/**
- * 数据
- */
 export interface TeletextListItemProps {
-    /**
-     * 点击事件
-     */
     onClick?: (e: any) => void;
-    /**
-     * 标题
-     */
     title?: string;
-    /**
-     * 图片地址
-     */
     image?: string | string[];
-    /**
-     * 图片位置
-     */
-    imagePlacement?: 'left' | 'right' | 'top' | 'bottom' | 'left-right' | 'none';
-    /**
-     * 说明
-     */
+    imagePlacement?: 'left' | 'right' | 'top' | 'bottom' | 'none';
     description?: string;
-    /**
-     * 标签列表
-     */
     tags?: string;
-    /**
-     * 控件类型
-     */
     type?: 'textAndImg' | 'imgOnly' | 'textOnly';
-    /**
-     * 行数
-     */
     textLines?: number;
-    /**
-     * 子项列数
-     */
     itemColumns?: number;
-    /**
-     * 图标列表
-     */
     iconList?: IconListProps[];
-    /**
-     * 列表项内边距
-     */
     itemPadding?: number;
-    /**
-     * 行数3
-     */
     text3?: string;
-    /**
-     * 行数4
-     */
     text4?: string;
-    /**
-     * 图片宽度
-     */
     imgWidth?: number;
-    /**
-     * 图片高度
-     */
     imgHeight?: number;
-    /**
-     * 背景颜色
-     */
     itemBgColor?: string;
-    /**
-     * 样式
-     */
     style?: React.CSSProperties;
-    /**
-     * 图文对齐方式
-     */
     textAlign?: 'flex-start' | 'flex-end' | 'center';
-    /**
-     * 是否为购物车列表
-     */
     isShoppingCart?: boolean;
-    /**
-     * 是否为愿望单列表
-     */
     isWishList?: boolean;
-    /**
-     * 是否为用户菜单列表
-     */
     isUserMenu?: boolean;
-    /**
-     * 类型
-     */
     itemType?: string;
-    /**
-     * 图文间距
-     */
     textImgGap?: number;
-    /**
-     * 子节点
-     */
-    children?: React.ReactNode;
+    imgBorderRadius?: number;
+    imgObjectFit?: 'cover' | 'contain' | 'fill' | 'none';
+    titleColor?: string;
+    titleFontSize?: number;
+    titleFontWeight?: 'normal' | '500' | '600' | 'bold';
+    titleLineClamp?: number;
+    descriptionColor?: string;
+    descriptionFontSize?: number;
+    descriptionFontWeight?: 'normal' | '500' | '600' | 'bold';
+    descriptionLineClamp?: number;
+    itemBorderRadius?: number;
+    itemBorderColor?: string;
+    itemBorderWidth?: number;
 }
 declare const TeletextListItem: React.FC<TeletextListItemProps>;
 export default TeletextListItem;

package/es/components/teletext-list/teletext-list-item.js

@@ -1,214 +1,201 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["onClick", "title", "image", "children", "imagePlacement", "description", "type", "textLines", "itemColumns", "itemPadding", "iconList", "tags", "text3", "text4", "imgWidth", "imgHeight", "itemBgColor", "style", "textAlign", "isShoppingCart", "isWishList", "isUserMenu", "itemType", "textImgGap"],
-  _excluded2 = ["width", "height"];
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["onClick", "title", "image", "imagePlacement", "description", "type", "textLines", "itemColumns", "itemPadding", "iconList", "text3", "text4", "imgWidth", "imgHeight", "itemBgColor", "style", "textAlign", "isShoppingCart", "isWishList", "itemType", "textImgGap", "imgBorderRadius", "imgObjectFit", "titleColor", "titleFontSize", "titleFontWeight", "titleLineClamp", "descriptionColor", "descriptionFontSize", "descriptionFontWeight", "descriptionLineClamp", "itemBorderRadius", "itemBorderColor", "itemBorderWidth"];
 import React, { createElement } from 'react';
 import "./teletext-list-item.scss";
-import { convertChildren } from "../../utils/children-node-handle";
 import { Icon } from '@alilc/lowcode-materials';
+// ─── 图标位置计算（纯函数，无副作用） ────────────────────────────────────────────
+function getIconStyle(icon) {
+  var base = {
+    position: 'absolute',
+    zIndex: 10
+  };
+  switch (icon.position) {
+    case 'leftTop':
+      return _extends({}, base, {
+        top: '0px',
+        left: '10px'
+      });
+    case 'leftBottom':
+      return _extends({}, base, {
+        bottom: '0px',
+        left: '10px'
+      });
+    case 'rightTop':
+      return _extends({}, base, {
+        top: '0px',
+        right: '10px'
+      });
+    case 'rightBottom':
+      return _extends({}, base, {
+        bottom: '0px',
+        right: '10px'
+      });
+    case 'customize':
+      return _extends({}, base, {
+        right: (icon.rightOffset || 0) + "px",
+        top: (icon.topOffset || 0) + "px"
+      });
+    default:
+      return base;
+  }
+}
 
-/**
- * 数据
- */
-
+// ─── 文本行内容映射（纯函数） ─────────────────────────────────────────────────────
+function getTextContent(index, title, description, text3, text4) {
+  switch (index) {
+    case 0:
+      return title || '';
+    case 1:
+      return description || '';
+    case 2:
+      return text3 || '';
+    case 3:
+      return text4 || '';
+    default:
+      return '';
+  }
+}
 var TeletextListItem = function TeletextListItem(_ref) {
   var _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
     title = _ref.title,
     image = _ref.image,
-    children = _ref.children,
     imagePlacement = _ref.imagePlacement,
     description = _ref.description,
     type = _ref.type,
-    textLines = _ref.textLines,
+    _ref$textLines = _ref.textLines,
+    textLines = _ref$textLines === void 0 ? 2 : _ref$textLines,
     itemColumns = _ref.itemColumns,
     itemPadding = _ref.itemPadding,
     iconList = _ref.iconList,
-    tags = _ref.tags,
     text3 = _ref.text3,
     text4 = _ref.text4,
-    imgWidth = _ref.imgWidth,
-    imgHeight = _ref.imgHeight,
+    _ref$imgWidth = _ref.imgWidth,
+    imgWidth = _ref$imgWidth === void 0 ? 100 : _ref$imgWidth,
+    _ref$imgHeight = _ref.imgHeight,
+    imgHeight = _ref$imgHeight === void 0 ? 100 : _ref$imgHeight,
     itemBgColor = _ref.itemBgColor,
     style = _ref.style,
     textAlign = _ref.textAlign,
     isShoppingCart = _ref.isShoppingCart,
     isWishList = _ref.isWishList,
-    isUserMenu = _ref.isUserMenu,
     itemType = _ref.itemType,
     _ref$textImgGap = _ref.textImgGap,
     textImgGap = _ref$textImgGap === void 0 ? 16 : _ref$textImgGap,
+    imgBorderRadius = _ref.imgBorderRadius,
+    imgObjectFit = _ref.imgObjectFit,
+    titleColor = _ref.titleColor,
+    titleFontSize = _ref.titleFontSize,
+    titleFontWeight = _ref.titleFontWeight,
+    titleLineClamp = _ref.titleLineClamp,
+    descriptionColor = _ref.descriptionColor,
+    descriptionFontSize = _ref.descriptionFontSize,
+    descriptionFontWeight = _ref.descriptionFontWeight,
+    descriptionLineClamp = _ref.descriptionLineClamp,
+    itemBorderRadius = _ref.itemBorderRadius,
+    itemBorderColor = _ref.itemBorderColor,
+    itemBorderWidth = _ref.itemBorderWidth,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var normalizeNodeKey = function normalizeNodeKey(rawKey) {
-    if (rawKey === undefined || rawKey === null) {
-      return '';
-    }
-    return String(rawKey).replace(/^\.?\$?/, '');
-  };
   var IconComp = Icon;
-  var resultImage = Array.isArray(image) ? image[0] || '' : image || '';
   var _otherProps = otherProps || {};
-  var containerClass = "teletext-list__panel__item image-" + imagePlacement + " itemColumns-" + itemColumns;
-  var childNodeList = React.Children.toArray(children);
-  var getChildPropsByKey = function getChildPropsByKey(key) {
-    var targetKey = normalizeNodeKey(key);
-    var targetChild = childNodeList.find(function (child) {
-      var _child$props;
-      var childKey = normalizeNodeKey(child === null || child === void 0 ? void 0 : child.key);
-      var childPropsKey = normalizeNodeKey(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.key);
-      return childKey === targetKey || childPropsKey === targetKey;
-    });
-    return (targetChild === null || targetChild === void 0 ? void 0 : targetChild.props) || {};
-  };
-  var imageChildProps = getChildPropsByKey('image');
-  var imageClassName = ['teletext-list__panel__item_image', imageChildProps === null || imageChildProps === void 0 ? void 0 : imageChildProps.className].filter(Boolean).join(' ');
 
-  // 图片尺寸策略（修复：不再写入 Image 子节点 style）：
-  // 低代码设计模式下，调用 imageChildNode.setPropValue('style', ...) 会让引擎以"节点级别"
-  // 重渲染 Image 节点，直接使用 schema 默认 imgSrc（占位图），绕过父组件
-  // convertChildren 注入的真实图片 URL，从而导致画布图片回退为默认图。
-  // 因此 imgWidth / imgHeight prop 是图片尺寸的唯一响应来源：
-  //   • 优先使用 imgWidth/imgHeight prop（TeletextList 层面统一控制）
-  //   • 若 prop 未设置，回退到子节点 style 中已有的宽高值（兼容旧页面）
-  //   • 最终默认 100px
-  // 子节点 style 中非尺寸属性（margin、padding 等）始终保留。
-  var childStyle = (imageChildProps === null || imageChildProps === void 0 ? void 0 : imageChildProps.style) || {};
-  var _childW = childStyle.width,
-    _childH = childStyle.height,
-    childLayoutStyle = _objectWithoutPropertiesLoose(childStyle, _excluded2);
-  var DEFAULT_IMG_SIZE = 100;
-  var imageStyle = _extends({}, childLayoutStyle, {
-    width: typeof imgWidth === 'number' ? imgWidth + "px" : _childW != null ? _childW : DEFAULT_IMG_SIZE + "px",
-    height: typeof imgHeight === 'number' ? imgHeight + "px" : _childH != null ? _childH : DEFAULT_IMG_SIZE + "px"
-  });
+  // 图片地址：唯一来源是 dataList[i].image prop，不依赖任何子节点 schema
+  var resultImage = Array.isArray(image) ? image[0] || '' : image || '';
+
+  // 图片尺寸：唯一来源是 imgWidth / imgHeight prop（由父组件 TeletextList 统一下发）
+  // 不读取、不写入任何子节点 style，彻底消除与低代码引擎节点级重渲染的冲突
+  var imageStyle = {
+    width: imgWidth + "px",
+    height: imgHeight + "px",
+    borderRadius: imgBorderRadius != null ? imgBorderRadius + "px" : undefined,
+    objectFit: imgObjectFit
+  };
+  var containerClass = "teletext-list__panel__item image-" + imagePlacement + " itemColumns-" + itemColumns;
   var containerStyle = _extends({
-    padding: itemPadding + "px",
+    padding: itemPadding != null ? itemPadding + "px" : undefined,
     backgroundColor: itemBgColor,
     alignItems: textAlign,
-    gap: textImgGap + "px"
+    gap: textImgGap + "px",
+    borderRadius: itemBorderRadius != null ? itemBorderRadius + "px" : undefined,
+    border: itemBorderWidth != null || itemBorderColor ? (itemBorderWidth !== null && itemBorderWidth !== void 0 ? itemBorderWidth : 1) + "px solid " + (itemBorderColor !== null && itemBorderColor !== void 0 ? itemBorderColor : 'transparent') : undefined
   }, style);
 
-  // 生成图标样式
-  var getIconStyle = function getIconStyle(icon) {
-    var baseStyle = {
-      position: 'absolute',
-      zIndex: 10
-    };
-    // 默认偏移值
-    var defaultPosition = {};
-    switch (icon.position) {
-      case 'leftTop':
-        defaultPosition = {
-          top: '0px',
-          left: '10px'
-        };
-        break;
-      case 'leftBottom':
-        defaultPosition = {
-          bottom: '0px',
-          left: '10px'
-        };
-        break;
-      case 'rightTop':
-        defaultPosition = {
-          top: '0px',
-          right: '10px'
-        };
-        break;
-      case 'rightBottom':
-        defaultPosition = {
-          bottom: '0px',
-          right: '10px'
-        };
-        break;
-      case 'customize':
-        defaultPosition = {
-          right: (icon.rightOffset || 0) + "px",
-          top: (icon.topOffset || 0) + "px"
-        };
-        break;
-      default:
-        defaultPosition = {};
-        break;
-    }
-    return _extends({}, baseStyle, defaultPosition);
-  };
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: containerClass,
-    onClick: onClick,
-    style: containerStyle
-  }, _otherProps), resultImage && (imagePlacement === 'left' || imagePlacement === 'top') && type !== 'textOnly' ? convertChildren(children, 'image', {
-    imgSrc: resultImage,
-    className: imageClassName,
+  // ── 图片元素（原生 img，不依赖低代码 Image 组件 / convertChildren / cloneElement）
+  var imageEl = resultImage && type !== 'textOnly' ? /*#__PURE__*/React.createElement("img", {
+    src: resultImage,
+    alt: title || '',
+    className: "teletext-list__panel__item_image",
     style: imageStyle
-  }) : null, type !== 'imgOnly' && itemType === '开关' && /*#__PURE__*/React.createElement("div", {
+  }) : null;
+
+  // ── 开关行（原生 CSS toggle switch；点击不冒泡到 item，状态由页面级事件控制）
+  var switchRow = type !== 'imgOnly' && itemType === '开关' ? /*#__PURE__*/React.createElement("div", {
     className: "teletext-list__panel__item__switch",
     style: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between'
     }
-  }, convertChildren(children, "text-1", {
-    children: [title],
-    className: "teletext-list__panel__item__switch__title"
-  }), convertChildren(children, "switch-1", {
-    children: [itemType],
-    className: "teletext-list__panel__item__switch__switch"
-  })), type !== 'imgOnly' && itemType !== '开关' && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "teletext-list__panel__item__switch__title",
+    style: {
+      color: titleColor,
+      fontSize: titleFontSize != null ? titleFontSize + "px" : undefined,
+      fontWeight: titleFontWeight,
+      WebkitLineClamp: titleLineClamp
+    }
+  }, title), /*#__PURE__*/React.createElement("label", {
+    className: "teletext-list__panel__item__switch__toggle",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "teletext-list__panel__item__switch__slider"
+  }))) : null;
+
+  // ── 文本区
+  var textArea = type !== 'imgOnly' && itemType !== '开关' ? /*#__PURE__*/React.createElement("div", {
     className: "teletext-list__panel__item__text"
   }, Array.from({
     length: textLines
   }).map(function (_, index) {
-    // 第一行显示标题，其余行显示描述
-    var content = function () {
-      switch (index) {
-        case 0:
-          return title;
-        case 1:
-          return description;
-        case 2:
-          return text3;
-        case 3:
-          return text4;
-        default:
-          return '';
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      className: "teletext-list__panel__item__text__" + (index === 0 ? 'title' : 'description'),
+      style: index === 0 ? {
+        color: titleColor,
+        fontSize: titleFontSize != null ? titleFontSize + "px" : undefined,
+        fontWeight: titleFontWeight,
+        WebkitLineClamp: titleLineClamp
+      } : {
+        color: descriptionColor,
+        fontSize: descriptionFontSize != null ? descriptionFontSize + "px" : undefined,
+        fontWeight: descriptionFontWeight,
+        WebkitLineClamp: descriptionLineClamp
       }
-    }();
-    return convertChildren(children, "text-" + (index + 1), {
-      children: [content],
-      className: "teletext-list__panel__item__text__" + (index === 0 ? 'title' : 'description')
-    });
+    }, getTextContent(index, title, description, text3, text4));
   }), isShoppingCart && /*#__PURE__*/React.createElement("div", {
     className: "shopping-cart-select"
   }, /*#__PURE__*/React.createElement("div", {
     className: "select-box"
-  }, convertChildren(children, 'select-box-1', {
-    popType: 'dialog',
-    selectType: 'number',
-    value: 1,
-    prefix: '数量',
-    dialogTitle: '选择数量',
-    btnText: '确定',
-    className: 'teletext-list__panel__item__select'
-  }), convertChildren(children, 'select-box-2', {
-    popType: 'dialog',
-    selectType: 'string',
-    dataList: [{
-      label: 'M',
-      value: 'M'
-    }, {
-      label: 'X',
-      value: 'X'
-    }, {
-      label: 'XL',
-      value: 'XL'
-    }],
-    value: 'X',
-    prefix: '尺码',
-    dialogTitle: '选择尺码',
-    btnText: '确定',
-    className: 'teletext-list__panel__item__select'
-  })), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("select", {
+    className: "teletext-list__panel__item__select"
+  }, [1, 2, 3, 4, 5].map(function (n) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: n,
+      value: n
+    }, "\u6570\u91CF: ", n);
+  })), /*#__PURE__*/React.createElement("select", {
+    className: "teletext-list__panel__item__select"
+  }, ['M', 'X', 'XL'].map(function (s) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: s,
+      value: s
+    }, "\u5C3A\u7801: ", s);
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "shopping-cart-select__btn"
   }, /*#__PURE__*/React.createElement("div", {
     className: "shopping-cart-select__btn__item"
@@ -236,11 +223,12 @@ var TeletextListItem = function TeletextListItem(_ref) {
     className: "shopping-cart-select-img",
     src: "https://51ymb.com/source/api/upload/1075055372064133120/2025/202502/20250207/1085235703970926592.png",
     alt: ""
-  }), "Remove"))), resultImage && (imagePlacement === 'right' || imagePlacement === 'bottom') && type !== 'textOnly' ? convertChildren(children, 'image', {
-    imgSrc: resultImage,
-    className: imageClassName,
-    style: imageStyle
-  }) : null, iconList === null || iconList === void 0 ? void 0 : iconList.map(function (icon, index) {
+  }), "Remove"))) : null;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: containerClass,
+    onClick: onClick,
+    style: containerStyle
+  }, _otherProps), (imagePlacement === 'left' || imagePlacement === 'top') && imageEl, switchRow, textArea, (imagePlacement === 'right' || imagePlacement === 'bottom') && imageEl, iconList === null || iconList === void 0 ? void 0 : iconList.map(function (icon, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: index,
       className: "teletext-list__panel__item__icon size-" + icon.size,

package/es/components/teletext-list/teletext-list-item.scss

@@ -80,12 +80,61 @@
       display: -webkit-box;
       text-overflow: ellipsis;
     }
-    .teletext-list__panel__item__switch__switch {
-      font-size: 14px;
-      font-weight: 600;
-      color: #222222;
+    // ─── 原生 toggle switch ────────────────────────────────────────────────────────
+    .teletext-list__panel__item__switch__toggle {
+      position: relative;
+      display: inline-block;
+      width: 44px;
+      height: 24px;
+      flex-shrink: 0;
+      cursor: pointer;
+
+      input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+        position: absolute;
+      }
+
+      .teletext-list__panel__item__switch__slider {
+        position: absolute;
+        inset: 0;
+        background-color: #cccccc;
+        border-radius: 24px;
+        transition: background-color 0.2s;
+
+        &::before {
+          content: '';
+          position: absolute;
+          width: 18px;
+          height: 18px;
+          left: 3px;
+          top: 3px;
+          background-color: #fff;
+          border-radius: 50%;
+          transition: transform 0.2s;
+        }
+      }
+
+      input:checked + .teletext-list__panel__item__switch__slider {
+        background-color: #4c84ff;
+        &::before {
+          transform: translateX(20px);
+        }
+      }
     }
   }
+  // ─── 购物车 select 下拉菜单 ──────────────────────────────────────────────────────
+  .teletext-list__panel__item__select {
+    padding: 4px 8px;
+    border: 1px solid #dddddd;
+    border-radius: 4px;
+    font-size: 12px;
+    background: #fff;
+    color: #333333;
+    outline: none;
+    cursor: pointer;
+  }
   .shopping-cart-select {
     display: flex;
     flex-direction: column;

package/es/components/teletext-list/teletext-list.d.ts

@@ -28,6 +28,14 @@ interface DataProps {
      * 类型
      */
     itemType?: string;
+    /**
+     * 扩展文本行3（textLines >= 3 时显示）
+     */
+    text3?: string;
+    /**
+     * 扩展文本行4（textLines >= 4 时显示）
+     */
+    text4?: string;
 }
 export interface IconListProps {
     /**
@@ -65,10 +73,6 @@ export interface TeletextListProps {
      * @param e
      */
     onClick?: (e: any) => void;
-    /**
-     * 子节点
-     */
-    children?: React.ReactNode;
     /**
      * 图片位置
      */
@@ -142,6 +146,58 @@ export interface TeletextListProps {
      * 图文间距
      */
     textImgGap?: number;
+    /**
+     * 图片圆角
+     */
+    imgBorderRadius?: number;
+    /**
+     * 图片填充方式
+     */
+    imgObjectFit?: 'cover' | 'contain' | 'fill' | 'none';
+    /**
+     * 标题颜色
+     */
+    titleColor?: string;
+    /**
+     * 标题字体大小
+     */
+    titleFontSize?: number;
+    /**
+     * 标题字重
+     */
+    titleFontWeight?: 'normal' | '500' | '600' | 'bold';
+    /**
+     * 标题最大行数（超出省略）
+     */
+    titleLineClamp?: number;
+    /**
+     * 说明颜色
+     */
+    descriptionColor?: string;
+    /**
+     * 说明字体大小
+     */
+    descriptionFontSize?: number;
+    /**
+     * 说明字重
+     */
+    descriptionFontWeight?: 'normal' | '500' | '600' | 'bold';
+    /**
+     * 说明最大行数（超出省略）
+     */
+    descriptionLineClamp?: number;
+    /**
+     * 列表项圆角
+     */
+    itemBorderRadius?: number;
+    /**
+     * 列表项边框颜色
+     */
+    itemBorderColor?: string;
+    /**
+     * 列表项边框宽度
+     */
+    itemBorderWidth?: number;
 }
 declare const TeletextList: React.FC<TeletextListProps>;
 export default TeletextList;