@dckj-npm/dc-material 0.1.361 → 0.1.362

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

@@ -14,6 +14,15 @@
     gap: 10px;
   }
 
+  .teletext-list__panel__item-list--row {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
   &-head {
     display: flex;
     justify-content: space-between;

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

@@ -16,7 +16,7 @@ export interface TeletextListItemProps {
     /**
      * 图片地址
      */
-    image?: string[];
+    image?: string | string[];
     /**
      * 图片位置
      */
@@ -97,6 +97,10 @@ export interface TeletextListItemProps {
      * 图文间距
      */
     textImgGap?: number;
+    /**
+     * 子节点
+     */
+    children?: React.ReactNode;
 }
 declare const TeletextListItem: React.FC<TeletextListItemProps>;
 export default TeletextListItem;

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

@@ -1,7 +1,7 @@
 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"];
-import React from 'react';
+import React, { createElement } from 'react';
 import "./teletext-list-item.scss";
 import { convertChildren } from "../../utils/children-node-handle";
 import { Icon } from '@alilc/lowcode-materials';
@@ -14,8 +14,7 @@ var TeletextListItem = function TeletextListItem(_ref) {
   var _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
     title = _ref.title,
-    _ref$image = _ref.image,
-    image = _ref$image === void 0 ? [] : _ref$image,
+    image = _ref.image,
     children = _ref.children,
     imagePlacement = _ref.imagePlacement,
     description = _ref.description,
@@ -39,30 +38,40 @@ var TeletextListItem = function TeletextListItem(_ref) {
     _ref$textImgGap = _ref.textImgGap,
     textImgGap = _ref$textImgGap === void 0 ? 16 : _ref$textImgGap,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  // 处理图片地址，兼容字符串和数组，优先取第一个有效字符串
-  var resultImage = Array.isArray(image) ? image.find(function (item) {
-    return typeof item === 'string' && item.trim();
-  }) || '' : typeof image === 'string' ? image : '';
+  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 tagColorArray = ['orange', 'green'];
-  var tagList = (typeof tags === 'string' ? tags.split(',') : []).map(function (tag) {
-    return {
-      name: tag
-    };
-  });
-
-  // console.log('itemType', itemType)
-  var containerClass = "teletext-list__panel__item image-" + imagePlacement + " itemColumns-" + itemColumns + " type-" + type;
+  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(' ');
+  var imageStyle = _extends({}, typeof imgWidth === 'number' ? {
+    width: imgWidth + "px"
+  } : {}, typeof imgHeight === 'number' ? {
+    height: imgHeight + "px"
+  } : {}, (imageChildProps === null || imageChildProps === void 0 ? void 0 : imageChildProps.style) || {});
   var containerStyle = _extends({
     padding: itemPadding + "px",
     backgroundColor: itemBgColor,
     alignItems: textAlign,
     gap: textImgGap + "px"
   }, style);
-  var imageStyle = {
-    width: imgWidth + "px",
-    height: imgHeight + "px"
-  };
 
   // 生成图标样式
   var getIconStyle = function getIconStyle(icon) {
@@ -70,7 +79,6 @@ var TeletextListItem = function TeletextListItem(_ref) {
       position: 'absolute',
       zIndex: 10
     };
-    console.log('icon', icon);
     // 默认偏移值
     var defaultPosition = {};
     switch (icon.position) {
@@ -116,7 +124,7 @@ var TeletextListItem = function TeletextListItem(_ref) {
     style: containerStyle
   }, _otherProps), resultImage && (imagePlacement === 'left' || imagePlacement === 'top') && type !== 'textOnly' ? convertChildren(children, 'image', {
     imgSrc: resultImage,
-    className: 'teletext-list__panel__item_image',
+    className: imageClassName,
     style: imageStyle
   }) : null, type !== 'imgOnly' && itemType === '开关' && /*#__PURE__*/React.createElement("div", {
     className: "teletext-list__panel__item__switch",
@@ -215,14 +223,14 @@ var TeletextListItem = function TeletextListItem(_ref) {
     alt: ""
   }), "Remove"))), resultImage && (imagePlacement === 'right' || imagePlacement === 'bottom') && type !== 'textOnly' ? convertChildren(children, 'image', {
     imgSrc: resultImage,
-    className: 'teletext-list__panel__item_image',
+    className: imageClassName,
     style: imageStyle
   }) : null, 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,
       style: getIconStyle(icon)
-    }, /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/createElement(IconComp, {
       type: icon.icon,
       size: icon.size
     }));

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

@@ -7,22 +7,7 @@
   gap: 5px;
   // padding-bottom: 10px;
   justify-content: flex-start;
-  align-items: flex-start;
   background-color: #f8f9fb;
-
-  &.type-imgOnly {
-    .teletext-list__panel__item_image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &.type-textOnly {
-    .teletext-list__panel__item__text {
-      width: 100%;
-      flex: 1;
-    }
-  }
   
   .teletext-list__panel__item_image {
     width: 100px;
@@ -43,7 +28,6 @@
   .teletext-list__panel__item__text {
     display: flex;
     flex-direction: column;
-    flex: 1;
     gap: 3px;
 
     .teletext-list__panel__item__text__item {

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

@@ -11,7 +11,7 @@ interface DataProps {
     /**
      * 图片地址
      */
-    image?: string[];
+    image?: string | string[];
     /**
      * 说明
      */
@@ -68,7 +68,7 @@ export interface TeletextListProps {
     /**
      * 子节点
      */
-    children: React.ReactChild;
+    children?: React.ReactNode;
     /**
      * 图片位置
      */
@@ -81,11 +81,11 @@ export interface TeletextListProps {
     /**
      * 更多
      */
-    moreText: string;
+    moreText?: string;
     /**
      * 文字行数
      */
-    textLines: number;
+    textLines?: number;
     /**
      * 控件类型
      */

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

@@ -19,9 +19,11 @@ var TeletextList = function TeletextList(_ref) {
     _ref$imagePlacement = _ref.imagePlacement,
     imagePlacement = _ref$imagePlacement === void 0 ? 'left' : _ref$imagePlacement,
     handleMoreClick = _ref.handleMoreClick,
-    moreText = _ref.moreText,
+    _ref$moreText = _ref.moreText,
+    moreText = _ref$moreText === void 0 ? '' : _ref$moreText,
     title = _ref.title,
-    textLines = _ref.textLines,
+    _ref$textLines = _ref.textLines,
+    textLines = _ref$textLines === void 0 ? 2 : _ref$textLines,
     type = _ref.type,
     itemColumns = _ref.itemColumns,
     iconList = _ref.iconList,
@@ -38,34 +40,19 @@ var TeletextList = function TeletextList(_ref) {
     isUserMenu = _ref.isUserMenu,
     textImgGap = _ref.textImgGap,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var TeletextListItemComp = TeletextListItem;
   var _otherProps = otherProps || {};
-  var columnStyle = {
-    gridTemplateColumns: "repeat(" + itemColumns + ",1fr)",
-    gap: itemGap + "px"
-  };
-  // console.log('dataList1', dataList)
   var getListStyle = function getListStyle() {
     if (itemRowAlign === 'row') {
       return {
         width: 'auto',
-        // 设置为 auto 以适应内容宽度
         display: 'flex',
         gap: itemGap + "px",
         overflowX: 'auto',
-        // 优化滚动体验
         scrollSnapType: 'x mandatory',
-        WebkitOverflowScrolling: 'touch',
-        // 隐藏滚动条
-        msOverflowStyle: 'none',
-        // IE和Edge
-        scrollbarWidth: 'none',
-        // Firefox
-        '::-webkit-scrollbar': {
-          display: 'none' // Chrome, Safari 和 Opera
-        }
+        WebkitOverflowScrolling: 'touch'
       };
     }
-    // column 模式使用 grid 布局
     return {
       display: 'grid',
       gridTemplateColumns: "repeat(" + itemColumns + ",1fr)",
@@ -74,9 +61,9 @@ var TeletextList = function TeletextList(_ref) {
   };
   var getDataList = function getDataList() {
     if (!dataList) return [];
-    console.log('dataList2', dataList);
     return Array.isArray(dataList) ? dataList : [dataList];
   };
+  var dataItems = getDataList();
   return /*#__PURE__*/React.createElement("div", _extends({
     className: "teletext-list__panel"
   }, _otherProps), /*#__PURE__*/React.createElement("div", {
@@ -100,11 +87,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",
+    className: "teletext-list__panel__item-list " + (itemRowAlign === 'row' ? 'teletext-list__panel__item-list--row' : ''),
     style: getListStyle()
-  }, dataList ? getDataList().map(function (item, index) {
-    return /*#__PURE__*/React.createElement(TeletextListItem, _extends({
-      key: item.id || index,
+  }, dataItems.length > 0 ? dataItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(TeletextListItemComp, _extends({
+      key: index,
       onClick: onClick,
       imagePlacement: imagePlacement,
       style: itemRowAlign === 'row' ? {

package/es/types/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const src: string
+  export default src
+}

package/es/utils/children-node-handle.js

@@ -1,5 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+var normalizeNodeKey = function normalizeNodeKey(rawKey) {
+  if (rawKey === undefined || rawKey === null) {
+    return '';
+  }
+  return String(rawKey).replace(/^\.?\$?/, '');
+};
+
 /**
  * 从children数组中获取指定组件
  * @author ZhuGangMin
@@ -10,17 +17,16 @@ import React from 'react';
  */
 export function convertChildren(children, key, props) {
   var node;
+  var targetKey = normalizeNodeKey(key);
   if (Array.isArray(children)) {
     for (var i = 0; i < children.length; i++) {
+      var _child$props;
       var child = children[i];
-      if (child.key === key) {
-        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);
+      if (childKey === targetKey || childPropsKey === targetKey) {
         // 属性融合
         var propsContact = props ? _extends({}, child.props, props) : child.props;
-        // 样式融合
-        if (props !== null && props !== void 0 && props.style && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.style) {
-          propsContact.style = _extends({}, child.props.style, props.style);
-        }
         node = /*#__PURE__*/React.cloneElement(child, propsContact);
         break;
       }

package/lib/components/teletext-list/index.scss

@@ -14,6 +14,15 @@
     gap: 10px;
   }
 
+  .teletext-list__panel__item-list--row {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
   &-head {
     display: flex;
     justify-content: space-between;

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

@@ -16,7 +16,7 @@ export interface TeletextListItemProps {
     /**
      * 图片地址
      */
-    image?: string[];
+    image?: string | string[];
     /**
      * 图片位置
      */
@@ -97,6 +97,10 @@ export interface TeletextListItemProps {
      * 图文间距
      */
     textImgGap?: number;
+    /**
+     * 子节点
+     */
+    children?: React.ReactNode;
 }
 declare const TeletextListItem: React.FC<TeletextListItemProps>;
 export default TeletextListItem;

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

@@ -5,11 +5,12 @@ exports.__esModule = true;
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireDefault(require("react"));
+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"];
+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); }
 /**
  * 数据
  */
@@ -18,8 +19,7 @@ var TeletextListItem = function TeletextListItem(_ref) {
   var _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
     title = _ref.title,
-    _ref$image = _ref.image,
-    image = _ref$image === void 0 ? [] : _ref$image,
+    image = _ref.image,
     children = _ref.children,
     imagePlacement = _ref.imagePlacement,
     description = _ref.description,
@@ -43,30 +43,40 @@ var TeletextListItem = function TeletextListItem(_ref) {
     _ref$textImgGap = _ref.textImgGap,
     textImgGap = _ref$textImgGap === void 0 ? 16 : _ref$textImgGap,
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  // 处理图片地址，兼容字符串和数组，优先取第一个有效字符串
-  var resultImage = Array.isArray(image) ? image.find(function (item) {
-    return typeof item === 'string' && item.trim();
-  }) || '' : typeof image === 'string' ? image : '';
+  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 tagColorArray = ['orange', 'green'];
-  var tagList = (typeof tags === 'string' ? tags.split(',') : []).map(function (tag) {
-    return {
-      name: tag
-    };
-  });
-
-  // console.log('itemType', itemType)
-  var containerClass = "teletext-list__panel__item image-" + imagePlacement + " itemColumns-" + itemColumns + " type-" + type;
+  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(' ');
+  var imageStyle = (0, _extends2["default"])({}, typeof imgWidth === 'number' ? {
+    width: imgWidth + "px"
+  } : {}, typeof imgHeight === 'number' ? {
+    height: imgHeight + "px"
+  } : {}, (imageChildProps === null || imageChildProps === void 0 ? void 0 : imageChildProps.style) || {});
   var containerStyle = (0, _extends2["default"])({
     padding: itemPadding + "px",
     backgroundColor: itemBgColor,
     alignItems: textAlign,
     gap: textImgGap + "px"
   }, style);
-  var imageStyle = {
-    width: imgWidth + "px",
-    height: imgHeight + "px"
-  };
 
   // 生成图标样式
   var getIconStyle = function getIconStyle(icon) {
@@ -74,7 +84,6 @@ var TeletextListItem = function TeletextListItem(_ref) {
       position: 'absolute',
       zIndex: 10
     };
-    console.log('icon', icon);
     // 默认偏移值
     var defaultPosition = {};
     switch (icon.position) {
@@ -120,7 +129,7 @@ var TeletextListItem = function TeletextListItem(_ref) {
     style: containerStyle
   }, _otherProps), resultImage && (imagePlacement === 'left' || imagePlacement === 'top') && type !== 'textOnly' ? (0, _childrenNodeHandle.convertChildren)(children, 'image', {
     imgSrc: resultImage,
-    className: 'teletext-list__panel__item_image',
+    className: imageClassName,
     style: imageStyle
   }) : null, type !== 'imgOnly' && itemType === '开关' && /*#__PURE__*/_react["default"].createElement("div", {
     className: "teletext-list__panel__item__switch",
@@ -219,14 +228,14 @@ var TeletextListItem = function TeletextListItem(_ref) {
     alt: ""
   }), "Remove"))), resultImage && (imagePlacement === 'right' || imagePlacement === 'bottom') && type !== 'textOnly' ? (0, _childrenNodeHandle.convertChildren)(children, 'image', {
     imgSrc: resultImage,
-    className: 'teletext-list__panel__item_image',
+    className: imageClassName,
     style: imageStyle
   }) : null, 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,
       style: getIconStyle(icon)
-    }, /*#__PURE__*/_react["default"].createElement(_lowcodeMaterials.Icon, {
+    }, /*#__PURE__*/(0, _react.createElement)(IconComp, {
       type: icon.icon,
       size: icon.size
     }));

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

@@ -7,22 +7,7 @@
   gap: 5px;
   // padding-bottom: 10px;
   justify-content: flex-start;
-  align-items: flex-start;
   background-color: #f8f9fb;
-
-  &.type-imgOnly {
-    .teletext-list__panel__item_image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &.type-textOnly {
-    .teletext-list__panel__item__text {
-      width: 100%;
-      flex: 1;
-    }
-  }
   
   .teletext-list__panel__item_image {
     width: 100px;
@@ -43,7 +28,6 @@
   .teletext-list__panel__item__text {
     display: flex;
     flex-direction: column;
-    flex: 1;
     gap: 3px;
 
     .teletext-list__panel__item__text__item {

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

@@ -11,7 +11,7 @@ interface DataProps {
     /**
      * 图片地址
      */
-    image?: string[];
+    image?: string | string[];
     /**
      * 说明
      */
@@ -68,7 +68,7 @@ export interface TeletextListProps {
     /**
      * 子节点
      */
-    children: React.ReactChild;
+    children?: React.ReactNode;
     /**
      * 图片位置
      */
@@ -81,11 +81,11 @@ export interface TeletextListProps {
     /**
      * 更多
      */
-    moreText: string;
+    moreText?: string;
     /**
      * 文字行数
      */
-    textLines: number;
+    textLines?: number;
     /**
      * 控件类型
      */

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

@@ -23,9 +23,11 @@ var TeletextList = function TeletextList(_ref) {
     _ref$imagePlacement = _ref.imagePlacement,
     imagePlacement = _ref$imagePlacement === void 0 ? 'left' : _ref$imagePlacement,
     handleMoreClick = _ref.handleMoreClick,
-    moreText = _ref.moreText,
+    _ref$moreText = _ref.moreText,
+    moreText = _ref$moreText === void 0 ? '' : _ref$moreText,
     title = _ref.title,
-    textLines = _ref.textLines,
+    _ref$textLines = _ref.textLines,
+    textLines = _ref$textLines === void 0 ? 2 : _ref$textLines,
     type = _ref.type,
     itemColumns = _ref.itemColumns,
     iconList = _ref.iconList,
@@ -42,34 +44,19 @@ var TeletextList = function TeletextList(_ref) {
     isUserMenu = _ref.isUserMenu,
     textImgGap = _ref.textImgGap,
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var TeletextListItemComp = _teletextListItem["default"];
   var _otherProps = otherProps || {};
-  var columnStyle = {
-    gridTemplateColumns: "repeat(" + itemColumns + ",1fr)",
-    gap: itemGap + "px"
-  };
-  // console.log('dataList1', dataList)
   var getListStyle = function getListStyle() {
     if (itemRowAlign === 'row') {
       return {
         width: 'auto',
-        // 设置为 auto 以适应内容宽度
         display: 'flex',
         gap: itemGap + "px",
         overflowX: 'auto',
-        // 优化滚动体验
         scrollSnapType: 'x mandatory',
-        WebkitOverflowScrolling: 'touch',
-        // 隐藏滚动条
-        msOverflowStyle: 'none',
-        // IE和Edge
-        scrollbarWidth: 'none',
-        // Firefox
-        '::-webkit-scrollbar': {
-          display: 'none' // Chrome, Safari 和 Opera
-        }
+        WebkitOverflowScrolling: 'touch'
       };
     }
-    // column 模式使用 grid 布局
     return {
       display: 'grid',
       gridTemplateColumns: "repeat(" + itemColumns + ",1fr)",
@@ -78,9 +65,9 @@ var TeletextList = function TeletextList(_ref) {
   };
   var getDataList = function getDataList() {
     if (!dataList) return [];
-    console.log('dataList2', dataList);
     return Array.isArray(dataList) ? dataList : [dataList];
   };
+  var dataItems = getDataList();
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: "teletext-list__panel"
   }, _otherProps), /*#__PURE__*/_react["default"].createElement("div", {
@@ -104,11 +91,11 @@ var TeletextList = function TeletextList(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "teletext-list__panel-head-user-menu-text"
   }, "Hello, Paige Turner")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "teletext-list__panel__item-list",
+    className: "teletext-list__panel__item-list " + (itemRowAlign === 'row' ? 'teletext-list__panel__item-list--row' : ''),
     style: getListStyle()
-  }, dataList ? getDataList().map(function (item, index) {
-    return /*#__PURE__*/_react["default"].createElement(_teletextListItem["default"], (0, _extends2["default"])({
-      key: item.id || index,
+  }, dataItems.length > 0 ? dataItems.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(TeletextListItemComp, (0, _extends2["default"])({
+      key: index,
       onClick: onClick,
       imagePlacement: imagePlacement,
       style: itemRowAlign === 'row' ? {

package/lib/types/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const src: string
+  export default src
+}