@dckj-npm/dc-material 0.1.358 → 0.1.360

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

@@ -1,40 +1,53 @@
-@import '../../variables.scss';
-
-.teletext-list__panel {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: 100%;
-  margin: 0;
-
-  .teletext-list__panel__item-list {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  &-head {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    //align-items: ;
-    &-more {
-      flex-shrink: 0;
-      cursor: pointer;
-      &-text {
-        font-weight: 500;
-        font-size: 14px;
-        color: #666666;
-        margin-right: 2px;
-      }
-      &-img {
-        width: 5px;
-        height: 10px;
-      }
-    }
-  }
-
-}
-
-
+@import '../../variables.scss';
+
+.teletext-list__panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  margin: 0;
+
+  .teletext-list__panel__item-list {
+    display: grid;
+    width: 100%;
+    // flex-direction: column;
+    gap: 10px;
+  }
+
+  &-head {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    //align-items: ;
+    &-more {
+      flex-shrink: 0;
+      cursor: pointer;
+      &-text {
+        font-weight: 500;
+        font-size: 14px;
+        color: #666666;
+        margin-right: 2px;
+      }
+      &-img {
+        width: 5px;
+        height: 10px;
+      }
+    }
+  }
+
+  &-head-user-menu {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    &-img {
+      width: 45px;
+      height: 45px;
+      border-radius: 50%;
+    }
+    &-text {
+      font-size: 14px;
+      color: #222222;
+    }
+  }
+}
+

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

@@ -1,33 +1,102 @@
-import React from 'react';
-import './teletext-list-item.scss';
-/**
- * 数据
- */
-export interface TeletextListItemProps {
-    /**
-     * 点击事件
-     */
-    onClick?: (e: any) => void;
-    /**
-     * 标题
-     */
-    title?: string;
-    /**
-     * 图片地址
-     */
-    image?: string[];
-    /**
-     * 图片位置
-     */
-    imagePlacement?: 'left' | 'right' | 'none';
-    /**
-     * 说明
-     */
-    description?: string;
-    /**
-     * 标签列表
-     */
-    tags?: string;
-}
-declare const TeletextListItem: React.FC<TeletextListItemProps>;
-export default TeletextListItem;
+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[];
+    /**
+     * 图片位置
+     */
+    imagePlacement?: 'left' | 'right' | 'top' | 'bottom' | 'left-right' | '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;
+}
+declare const TeletextListItem: React.FC<TeletextListItemProps>;
+export default TeletextListItem;

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

@@ -8,9 +8,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 require("./teletext-list-item.scss");
 var _childrenNodeHandle = require("../../utils/children-node-handle");
-var _excluded = ["onClick", "title", "image", "children", "imagePlacement", "description", "tags"];
-/**
- * 数据
+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"];
+/**
+ * 数据
  */
 
 var TeletextListItem = function TeletextListItem(_ref) {
@@ -22,10 +23,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 = (0, _objectWithoutPropertiesLoose2["default"])(_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) {
@@ -33,33 +52,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 = (0, _extends2["default"])({
+    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 (0, _extends2["default"])({}, baseStyle, defaultPosition);
+  };
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    className: "teletext-list__panel__item",
-    onClick: onClick
-  }, _otherProps), resultImage && imagePlacement === 'left' ? (0, _childrenNodeHandle.convertChildren)(children, 'image', {
-    src: resultImage,
-    className: 'teletext-list__panel__item_image'
-  }) : null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "teletext-list__panel__item__text"
-  }, (0, _childrenNodeHandle.convertChildren)(children, 'title', {
+    className: containerClass,
+    onClick: onClick,
+    style: containerStyle
+  }, _otherProps), resultImage && (imagePlacement === 'left' || imagePlacement === 'top') && type !== 'textOnly' ? (0, _childrenNodeHandle.convertChildren)(children, 'image', {
+    imgSrc: resultImage,
+    className: 'teletext-list__panel__item_image',
+    style: {
+      width: imgWidth + "px",
+      height: imgHeight + "px"
+    }
+  }) : null, 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__text__title'
-  }), (0, _childrenNodeHandle.convertChildren)(children, 'content', {
-    children: [description],
-    className: 'teletext-list__panel__item__text__description'
-  }), tags ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "teletext-list__panel__item__text__tags"
-  }, tagList.map(function (tag, tagIndex) {
-    return (0, _childrenNodeHandle.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"
+  }), (0, _childrenNodeHandle.convertChildren)(children, "switch-1", {
+    children: [itemType],
+    className: "teletext-list__panel__item__switch__switch"
+  })), 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 (0, _childrenNodeHandle.convertChildren)(children, "text-" + (index + 1), {
+      children: [content],
+      className: "teletext-list__panel__item__text__" + (index === 0 ? 'title' : 'description')
     });
-  })) : null), resultImage && imagePlacement === 'right' ? (0, _childrenNodeHandle.convertChildren)(children, 'image', {
-    src: resultImage,
+  }), 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", {
+    className: "shopping-cart-select__btn"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "shopping-cart-select__btn__item"
+  }, /*#__PURE__*/_react["default"].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["default"].createElement("div", {
+    className: "remove-box"
+  }, /*#__PURE__*/_react["default"].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["default"].createElement("div", {
+    className: "shopping-cart-select__btn"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "shopping-cart-select__btn__item"
+  }, /*#__PURE__*/_react["default"].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["default"].createElement("div", {
+    className: "remove-box"
+  }, /*#__PURE__*/_react["default"].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' ? (0, _childrenNodeHandle.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["default"].createElement("div", {
+      key: index,
+      className: "teletext-list__panel__item__icon size-" + icon.size,
+      style: getIconStyle(icon)
+    }, /*#__PURE__*/_react["default"].createElement(_lowcodeMaterials.Icon, {
+      type: icon.icon,
+      size: icon.size
+    }));
+  }));
 };
 TeletextListItem.displayName = 'TeletextListItem';
 var _default = exports["default"] = TeletextListItem;