@dckj-npm/dc-material 0.1.358 → 0.1.360

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

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["onClick", "title", "image", "children", "imagePlacement", "description", "tags"];
+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 "./teletext-list-item.scss";
 import { convertChildren } from "../../utils/children-node-handle";
+import { Icon } from '@alilc/lowcode-materials';
 
-/**
- * 数据
+/**
+ * 数据
  */
 
 var TeletextListItem = function TeletextListItem(_ref) {
@@ -18,10 +19,28 @@ var TeletextListItem = function TeletextListItem(_ref) {
     children = _ref.children,
     imagePlacement = _ref.imagePlacement,
     description = _ref.description,
+    type = _ref.type,
+    textLines = _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,
+    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,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  // 只获取第一张图片
-  var resultImage = image && image.length > 0 ? image[0] : '';
+  // 处理图片地址，兼容字符串和数组
+  var resultImage = Array.isArray(image) ? image.length > 0 ? image[0] : '' : typeof image === 'string' ? image : '';
   var _otherProps = otherProps || {};
   var tagColorArray = ['orange', 'green'];
   var tagList = (typeof tags === 'string' ? tags.split(',') : []).map(function (tag) {
@@ -29,33 +48,181 @@ var TeletextListItem = function TeletextListItem(_ref) {
       name: tag
     };
   });
-  console.log('tagList', tagList, 'type of tags', typeof tags === 'string');
+
+  // console.log('itemType', itemType)
+  var containerClass = "teletext-list__panel__item image-" + imagePlacement + " itemColumns-" + itemColumns;
+  var containerStyle = _extends({
+    padding: itemPadding + "px",
+    backgroundColor: itemBgColor,
+    alignItems: textAlign,
+    gap: textImgGap + "px"
+  }, style);
+
+  // 生成图标样式
+  var getIconStyle = function getIconStyle(icon) {
+    var baseStyle = {
+      position: 'absolute',
+      zIndex: 10
+    };
+    console.log('icon', icon);
+    // 默认偏移值
+    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: "teletext-list__panel__item",
-    onClick: onClick
-  }, _otherProps), resultImage && imagePlacement === 'left' ? convertChildren(children, 'image', {
-    src: resultImage,
-    className: 'teletext-list__panel__item_image'
-  }) : null, /*#__PURE__*/React.createElement("div", {
-    className: "teletext-list__panel__item__text"
-  }, convertChildren(children, 'title', {
+    className: containerClass,
+    onClick: onClick,
+    style: containerStyle
+  }, _otherProps), resultImage && (imagePlacement === 'left' || imagePlacement === 'top') && type !== 'textOnly' ? convertChildren(children, 'image', {
+    imgSrc: resultImage,
+    className: 'teletext-list__panel__item_image',
+    style: {
+      width: imgWidth + "px",
+      height: imgHeight + "px"
+    }
+  }) : null, 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__text__title'
-  }), convertChildren(children, 'content', {
-    children: [description],
-    className: 'teletext-list__panel__item__text__description'
-  }), tags ? /*#__PURE__*/React.createElement("div", {
-    className: "teletext-list__panel__item__text__tags"
-  }, tagList.map(function (tag, tagIndex) {
-    return convertChildren(children, "teletext-tagc-" + (tagIndex % tagColorArray.length + 1), {
-      name: tag.name
-      // key: tagIndex,
-      // color: tagColorArray[tagIndex % tagColorArray.length],
+    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", {
+    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 convertChildren(children, "text-" + (index + 1), {
+      children: [content],
+      className: "teletext-list__panel__item__text__" + (index === 0 ? 'title' : 'description')
     });
-  })) : null), resultImage && imagePlacement === 'right' ? convertChildren(children, 'image', {
-    src: resultImage,
+  }), 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", {
+    className: "shopping-cart-select__btn"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "shopping-cart-select__btn__item"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "shopping-cart-select-img",
+    src: "https://51ymb.com/source/api/upload/1075055372064133120/2025/202501/20250110/1075084331397025792.png",
+    alt: ""
+  }), "Move to wishlist"), /*#__PURE__*/React.createElement("div", {
+    className: "remove-box"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "shopping-cart-select-img",
+    src: "https://51ymb.com/source/api/upload/1075055372064133120/2025/202502/20250207/1085235703970926592.png",
+    alt: ""
+  }), "Remove"))), isWishList && /*#__PURE__*/React.createElement("div", {
+    className: "shopping-cart-select__btn"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "shopping-cart-select__btn__item"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "shopping-cart-select-img",
+    src: "https://51ymb.com/source/api/upload/1075055372064133120/2025/202501/20250110/1075084331397025792.png",
+    alt: ""
+  }), "Move to Cart"), /*#__PURE__*/React.createElement("div", {
+    className: "remove-box"
+  }, /*#__PURE__*/React.createElement("img", {
+    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: 'teletext-list__panel__item_image'
-  }) : null);
+  }) : 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, {
+      type: icon.icon,
+      size: icon.size
+    }));
+  }));
 };
 TeletextListItem.displayName = 'TeletextListItem';
 export default TeletextListItem;

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

@@ -1,57 +1,203 @@
-@import '../../variables.scss';
-
-.teletext-list__panel__item {
-  width: 100%;
-  display: flex;
-  gap: 5px;
-  padding-bottom: 10px;
-  justify-content: flex-start;
-
-  .teletext-list__panel__item_image {
-    width: 90px;
-    height: 71px;
-    border-radius: 5px;
-    flex: 0 0 auto;
-    overflow: hidden;
-
-    & > img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-  }
-
-  .teletext-list__panel__item__text {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-
-    .teletext-list__panel__item__text__title {
-      font-size: 15px;
-      font-weight: 500;
-      color: #000000;
-    }
-
-    .teletext-list__panel__item__text__description {
-      -webkit-line-clamp: 1;
-      overflow: hidden;
-      color: #686868;
-      -webkit-box-orient: vertical;
-      display: -webkit-box;
-      font-size: 12px;
-      text-overflow: ellipsis;
-    }
-
-    .teletext-list__panel__item__text__tags {
-      display: flex;
-      gap: 6px;
-    }
-
-  }
-
-}
-
-.teletext-list__panel__item:not(:last-child) {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
+@import '../../variables.scss';
+
+.teletext-list__panel__item {
+  position: relative; 
+  // width: 100%;
+  display: flex;
+  gap: 5px;
+  // padding-bottom: 10px;
+  justify-content: flex-start;
+  background-color: #f8f9fb;
+  
+  .teletext-list__panel__item_image {
+    width: 100px;
+    height: 100px;
+    border-radius: 5px;
+    flex: 0 0 auto;
+    overflow: hidden;
+    object-fit: cover;
+
+    & > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+  }
+
+  .teletext-list__panel__item__text {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+
+    .teletext-list__panel__item__text__item {
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      color: #686868;
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      font-size: 12px;
+      text-overflow: ellipsis;
+    }
+    .teletext-list__panel__item__text__title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #222222;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      text-overflow: ellipsis;
+    }
+
+    .teletext-list__panel__item__text__description {
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      color: #777777;
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      font-size: 13px;
+      text-overflow: ellipsis;
+    }
+
+    .teletext-list__panel__item__text__tags {
+      display: flex;
+      gap: 6px; 
+    }
+  }
+  .teletext-list__panel__item__switch {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    .teletext-list__panel__item__switch__title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #222222;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      text-overflow: ellipsis;
+    }
+    .teletext-list__panel__item__switch__switch {
+      font-size: 14px;
+      font-weight: 600;
+      color: #222222;
+    }
+  }
+  .shopping-cart-select {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    .select-box {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .shopping-cart-select__btn {
+      display: flex;
+      align-items: center;
+      font-size: 13px;
+      line-height: 1.3;
+      color: #000000;
+      gap: 5px;
+      padding-right: 5px;
+      .shopping-cart-select__btn__item {
+        display: flex;
+        align-items: center;
+        border-right: 1px solid #000000;
+        gap: 6px;
+        font-size: 13px;
+        line-height: 1.3;
+        color: #000000;
+        padding-right: 5px;
+        .shopping-cart-select-img {
+          width: 15px;
+          height: 15px;
+        }
+      }
+      .remove-box {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 13px;
+        line-height: 1.3;
+        color: #000000;
+        .shopping-cart-select-img {
+          width: 13px;
+          height: 13px;
+        }
+      }
+    }
+  }
+
+  .shopping-cart-select__btn {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    line-height: 1.3;
+    color: #000000;
+    gap: 5px;
+    padding-right: 5px;
+    .shopping-cart-select__btn__item {
+      display: flex;
+      align-items: center;
+      border-right: 1px solid #000000;
+      gap: 6px;
+      font-size: 13px;
+      line-height: 1.3;
+      color: #000000;
+      padding-right: 5px;
+      .shopping-cart-select-img {
+        width: 15px;
+        height: 15px;
+      }
+    }
+    .remove-box {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      line-height: 1.3;
+      color: #000000;
+      .shopping-cart-select-img {
+        width: 13px;
+        height: 13px;
+      }
+    }
+  }
+  
+  &.image-left, &.image-right {
+    flex-direction: row;
+  }
+  
+  &.image-top, &.image-bottom {
+    flex-direction: column;
+  }
+}
+
+.image-top,
+.image-bottom {
+  flex-direction: column; // 图片在上下时，切换为列布局
+  align-items: start; // 居中对齐
+  .teletext-list__panel__item_image {
+    width: 100%;
+    height: 172px;
+    border-radius: 5px;
+    flex: 0 0 auto;
+    overflow: hidden;
+    object-fit: cover;
+
+    & > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+  }
+}
+
+.teletext-list__panel__item:not(:last-child) {
+  // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}