@dckj-npm/dc-material 0.1.376 → 0.1.377

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

@@ -1,10 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["dataList", "onClick", "children", "imagePlacement", "handleMoreClick", "moreText", "title", "textLines", "type", "itemColumns", "iconList", "itemGap", "itemPadding", "imgWidth", "imgHeight", "itemBgColor", "itemRowAlign", "textAlign", "isShoppingCart", "isWishList", "isUserMenu", "textImgGap"];
+var _excluded = ["dataList", "onClick", "imagePlacement", "handleMoreClick", "moreText", "title", "textLines", "type", "itemColumns", "iconList", "itemGap", "itemPadding", "imgWidth", "imgHeight", "itemBgColor", "itemRowAlign", "textAlign", "isShoppingCart", "isWishList", "isUserMenu", "textImgGap", "imgBorderRadius", "imgObjectFit", "titleColor", "titleFontSize", "titleFontWeight", "titleLineClamp", "descriptionColor", "descriptionFontSize", "descriptionFontWeight", "descriptionLineClamp", "itemBorderRadius", "itemBorderColor", "itemBorderWidth"];
 import React from 'react';
 import "./index.scss";
 import { default as TeletextListItem } from "./teletext-list-item";
-import { convertChildren } from "../../utils/children-node-handle";
 import arr from "../../assets/icon/teletext-list/arr.png";
 
 /**
@@ -15,7 +14,6 @@ var TeletextList = function TeletextList(_ref) {
   var dataList = _ref.dataList,
     _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-    children = _ref.children,
     _ref$imagePlacement = _ref.imagePlacement,
     imagePlacement = _ref$imagePlacement === void 0 ? 'left' : _ref$imagePlacement,
     handleMoreClick = _ref.handleMoreClick,
@@ -25,13 +23,16 @@ var TeletextList = function TeletextList(_ref) {
     _ref$textLines = _ref.textLines,
     textLines = _ref$textLines === void 0 ? 2 : _ref$textLines,
     type = _ref.type,
-    itemColumns = _ref.itemColumns,
+    _ref$itemColumns = _ref.itemColumns,
+    itemColumns = _ref$itemColumns === void 0 ? 1 : _ref$itemColumns,
     iconList = _ref.iconList,
     _ref$itemGap = _ref.itemGap,
     itemGap = _ref$itemGap === void 0 ? 16 : _ref$itemGap,
     itemPadding = _ref.itemPadding,
-    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,
     itemRowAlign = _ref.itemRowAlign,
     textAlign = _ref.textAlign,
@@ -39,38 +40,41 @@ var TeletextList = function TeletextList(_ref) {
     isWishList = _ref.isWishList,
     isUserMenu = _ref.isUserMenu,
     textImgGap = _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 TeletextListItemComp = TeletextListItem;
   var _otherProps = otherProps || {};
-  var getListStyle = function getListStyle() {
-    if (itemRowAlign === 'row') {
-      return {
-        width: 'auto',
-        display: 'flex',
-        gap: itemGap + "px",
-        overflowX: 'auto',
-        scrollSnapType: 'x mandatory',
-        WebkitOverflowScrolling: 'touch'
-      };
-    }
-    return {
-      display: 'grid',
-      gridTemplateColumns: "repeat(" + itemColumns + ",1fr)",
-      gap: itemGap + "px"
-    };
+  var listStyle = itemRowAlign === 'row' ? {
+    width: 'auto',
+    display: 'flex',
+    gap: itemGap + "px",
+    overflowX: 'auto',
+    scrollSnapType: 'x mandatory',
+    WebkitOverflowScrolling: 'touch'
+  } : {
+    display: 'grid',
+    gridTemplateColumns: "repeat(" + itemColumns + ", 1fr)",
+    gap: itemGap + "px"
   };
-  var getDataList = function getDataList() {
-    if (!dataList) return [];
-    return Array.isArray(dataList) ? dataList : [dataList];
-  };
-  var dataItems = getDataList();
+  var dataItems = dataList ? Array.isArray(dataList) ? dataList : [dataList] : [];
   return /*#__PURE__*/React.createElement("div", _extends({
     className: "teletext-list__panel"
   }, _otherProps), /*#__PURE__*/React.createElement("div", {
     className: "teletext-list__panel-head"
-  }, convertChildren(children, 'box-title', {
-    children: [title]
-  }), moreText ? /*#__PURE__*/React.createElement("div", {
+  }, title && /*#__PURE__*/React.createElement("h5", {
+    className: "teletext-list__panel-head-title"
+  }, title), moreText && /*#__PURE__*/React.createElement("div", {
     className: "teletext-list__panel-head-more",
     onClick: handleMoreClick
   }, /*#__PURE__*/React.createElement("span", {
@@ -78,7 +82,7 @@ var TeletextList = function TeletextList(_ref) {
   }, moreText), /*#__PURE__*/React.createElement("img", {
     src: arr,
     className: "teletext-list__panel-head-more-img"
-  })) : ''), isUserMenu && /*#__PURE__*/React.createElement("div", {
+  }))), isUserMenu && /*#__PURE__*/React.createElement("div", {
     className: "teletext-list__panel-head-user-menu"
   }, /*#__PURE__*/React.createElement("img", {
     className: "teletext-list__panel-head-user-menu-img",
@@ -87,10 +91,11 @@ var TeletextList = function TeletextList(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "teletext-list__panel-head-user-menu-text"
   }, "Hello, Paige Turner")), /*#__PURE__*/React.createElement("div", {
-    className: "teletext-list__panel__item-list " + (itemRowAlign === 'row' ? 'teletext-list__panel__item-list--row' : ''),
-    style: getListStyle()
+    className: "teletext-list__panel__item-list" + (itemRowAlign === 'row' ? ' teletext-list__panel__item-list--row' : ''),
+    style: listStyle
   }, dataItems.length > 0 ? dataItems.map(function (item, index) {
-    return /*#__PURE__*/React.createElement(TeletextListItemComp, _extends({
+    var ItemComp = TeletextListItem;
+    return /*#__PURE__*/React.createElement(ItemComp, _extends({
       key: index,
       onClick: onClick,
       imagePlacement: imagePlacement,
@@ -109,8 +114,21 @@ var TeletextList = function TeletextList(_ref) {
       isShoppingCart: isShoppingCart,
       isWishList: isWishList,
       isUserMenu: isUserMenu,
-      textImgGap: textImgGap
-    }, item), children);
+      textImgGap: textImgGap,
+      imgBorderRadius: imgBorderRadius,
+      imgObjectFit: imgObjectFit,
+      titleColor: titleColor,
+      titleFontSize: titleFontSize,
+      titleFontWeight: titleFontWeight,
+      titleLineClamp: titleLineClamp,
+      descriptionColor: descriptionColor,
+      descriptionFontSize: descriptionFontSize,
+      descriptionFontWeight: descriptionFontWeight,
+      descriptionLineClamp: descriptionLineClamp,
+      itemBorderRadius: itemBorderRadius,
+      itemBorderColor: itemBorderColor,
+      itemBorderWidth: itemBorderWidth
+    }, item));
   }) : /*#__PURE__*/React.createElement("div", null, "\u6682\u65E0\u6570\u636E")));
 };
 TeletextList.displayName = 'TeletextList';

package/lib/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/lib/components/teletext-list/teletext-list-item.js

@@ -3,217 +3,205 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 require("./teletext-list-item.scss");
-var _childrenNodeHandle = require("../../utils/children-node-handle");
 var _lowcodeMaterials = require("@alilc/lowcode-materials");
-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"];
+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"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-/**
- * 数据
- */
+// ─── 图标位置计算（纯函数，无副作用） ────────────────────────────────────────────
+function getIconStyle(icon) {
+  var base = {
+    position: 'absolute',
+    zIndex: 10
+  };
+  switch (icon.position) {
+    case 'leftTop':
+      return (0, _extends2["default"])({}, base, {
+        top: '0px',
+        left: '10px'
+      });
+    case 'leftBottom':
+      return (0, _extends2["default"])({}, base, {
+        bottom: '0px',
+        left: '10px'
+      });
+    case 'rightTop':
+      return (0, _extends2["default"])({}, base, {
+        top: '0px',
+        right: '10px'
+      });
+    case 'rightBottom':
+      return (0, _extends2["default"])({}, base, {
+        bottom: '0px',
+        right: '10px'
+      });
+    case 'customize':
+      return (0, _extends2["default"])({}, 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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  var normalizeNodeKey = function normalizeNodeKey(rawKey) {
-    if (rawKey === undefined || rawKey === null) {
-      return '';
-    }
-    return String(rawKey).replace(/^\.?\$?/, '');
-  };
   var IconComp = _lowcodeMaterials.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["default"].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 = (0, _objectWithoutPropertiesLoose2["default"])(childStyle, _excluded2);
-  var DEFAULT_IMG_SIZE = 100;
-  var imageStyle = (0, _extends2["default"])({}, 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 = (0, _extends2["default"])({
-    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 (0, _extends2["default"])({}, baseStyle, defaultPosition);
-  };
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    className: containerClass,
-    onClick: onClick,
-    style: containerStyle
-  }, _otherProps), resultImage && (imagePlacement === 'left' || imagePlacement === 'top') && type !== 'textOnly' ? (0, _childrenNodeHandle.convertChildren)(children, 'image', {
-    imgSrc: resultImage,
-    className: imageClassName,
+  // ── 图片元素（原生 img，不依赖低代码 Image 组件 / convertChildren / cloneElement）
+  var imageEl = resultImage && type !== 'textOnly' ? /*#__PURE__*/_react["default"].createElement("img", {
+    src: resultImage,
+    alt: title || '',
+    className: "teletext-list__panel__item_image",
     style: imageStyle
-  }) : null, type !== 'imgOnly' && itemType === '开关' && /*#__PURE__*/_react["default"].createElement("div", {
+  }) : null;
+
+  // ── 开关行（原生 CSS toggle switch；点击不冒泡到 item，状态由页面级事件控制）
+  var switchRow = type !== 'imgOnly' && itemType === '开关' ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "teletext-list__panel__item__switch",
     style: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between'
     }
-  }, (0, _childrenNodeHandle.convertChildren)(children, "text-1", {
-    children: [title],
-    className: "teletext-list__panel__item__switch__title"
-  }), (0, _childrenNodeHandle.convertChildren)(children, "switch-1", {
-    children: [itemType],
-    className: "teletext-list__panel__item__switch__switch"
-  })), type !== 'imgOnly' && itemType !== '开关' && /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].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["default"].createElement("label", {
+    className: "teletext-list__panel__item__switch__toggle",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "checkbox"
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "teletext-list__panel__item__switch__slider"
+  }))) : null;
+
+  // ── 文本区
+  var textArea = type !== 'imgOnly' && itemType !== '开关' ? /*#__PURE__*/_react["default"].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["default"].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 (0, _childrenNodeHandle.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["default"].createElement("div", {
     className: "shopping-cart-select"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "select-box"
-  }, (0, _childrenNodeHandle.convertChildren)(children, 'select-box-1', {
-    popType: 'dialog',
-    selectType: 'number',
-    value: 1,
-    prefix: '数量',
-    dialogTitle: '选择数量',
-    btnText: '确定',
-    className: 'teletext-list__panel__item__select'
-  }), (0, _childrenNodeHandle.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["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement("select", {
+    className: "teletext-list__panel__item__select"
+  }, [1, 2, 3, 4, 5].map(function (n) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: n,
+      value: n
+    }, "\u6570\u91CF: ", n);
+  })), /*#__PURE__*/_react["default"].createElement("select", {
+    className: "teletext-list__panel__item__select"
+  }, ['M', 'X', 'XL'].map(function (s) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: s,
+      value: s
+    }, "\u5C3A\u7801: ", s);
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "shopping-cart-select__btn"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "shopping-cart-select__btn__item"
@@ -241,11 +229,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' ? (0, _childrenNodeHandle.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["default"].createElement("div", (0, _extends2["default"])({
+    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["default"].createElement("div", {
       key: index,
       className: "teletext-list__panel__item__icon size-" + icon.size,