@dckj-npm/dc-material 0.1.358 → 0.1.360

package/lib/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);
+}

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

@@ -1,61 +1,147 @@
-import React from 'react';
-import './index.scss';
-/**
- * 数据
- */
-interface DataProps {
-    /**
-     * 标题
-     */
-    title?: string;
-    /**
-     * 图片地址
-     */
-    image?: string[];
-    /**
-     * 说明
-     */
-    description?: string;
-    /**
-     * 标签列表
-     */
-    tags?: string;
-    /**
-     * 链接地址
-     */
-    link?: string;
-}
-export interface TeletextListProps {
-    /**
-     * 标题
-     */
-    title?: string;
-    /**
-     * 数据
-     */
-    dataList?: DataProps[];
-    /**
-     * 点击事件
-     * @param e
-     */
-    onClick?: (e: any) => void;
-    /**
-     * 子节点
-     */
-    children: React.ReactChild;
-    /**
-     * 图片位置
-     */
-    imagePlacement?: 'left' | 'right' | 'none';
-    /**
-     * 点击事件
-     * @param e
-     */
-    handleMoreClick?: (e: any) => void;
-    /**
-     * 更多
-     */
-    moreText: string;
-}
-declare const TeletextList: React.FC<TeletextListProps>;
-export default TeletextList;
+import React from 'react';
+import './index.scss';
+/**
+ * 数据
+ */
+interface DataProps {
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 图片地址
+     */
+    image?: string[];
+    /**
+     * 说明
+     */
+    description?: string;
+    /**
+     * 标签列表
+     */
+    tags?: string;
+    /**
+     * 链接地址
+     */
+    link?: string;
+    /**
+     * 类型
+     */
+    itemType?: string;
+}
+export interface IconListProps {
+    /**
+     * 图标
+     */
+    icon?: string;
+    /**
+     * 图标尺寸
+     */
+    size?: 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit';
+    /**
+     * 图标位置
+     */
+    position?: 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | 'customize';
+    /**
+     * 右偏移
+     */
+    rightOffset?: number;
+    /**
+     * 上偏移
+     */
+    topOffset?: number;
+}
+export interface TeletextListProps {
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 数据
+     */
+    dataList?: DataProps | DataProps[];
+    /**
+     * 点击事件
+     * @param e
+     */
+    onClick?: (e: any) => void;
+    /**
+     * 子节点
+     */
+    children: React.ReactChild;
+    /**
+     * 图片位置
+     */
+    imagePlacement?: 'left' | 'right' | 'top' | 'bottom' | 'none';
+    /**
+     * 点击事件
+     * @param e
+     */
+    handleMoreClick?: (e: any) => void;
+    /**
+     * 更多
+     */
+    moreText: string;
+    /**
+     * 文字行数
+     */
+    textLines: number;
+    /**
+     * 控件类型
+     */
+    type?: 'textAndImg' | 'imgOnly' | 'textOnly';
+    /**
+     * 子项列数
+     */
+    itemColumns?: number;
+    /**
+     * 图标列表
+     */
+    iconList?: IconListProps[];
+    /**
+     * 列表项间距
+     */
+    itemGap?: number;
+    /**
+     * 列表项内边距
+     */
+    itemPadding?: number;
+    /**
+     * 图片宽度
+     */
+    imgWidth?: number;
+    /**
+     * 图片高度
+     */
+    imgHeight?: number;
+    /**
+     * 背景颜色
+     */
+    itemBgColor?: string;
+    /**
+     * 行分布
+     */
+    itemRowAlign?: 'row' | 'column';
+    /**
+     * 图文对齐方式
+     */
+    textAlign?: 'flex-start' | 'flex-end' | 'center';
+    /**
+     * 是否为购物车列表
+     */
+    isShoppingCart?: boolean;
+    /**
+     * 是否为愿望单列表
+     */
+    isWishList?: boolean;
+    /**
+     * 是否为用户菜单列表
+     */
+    isUserMenu?: boolean;
+    /**
+     * 图文间距
+     */
+    textImgGap?: number;
+}
+declare const TeletextList: React.FC<TeletextListProps>;
+export default TeletextList;

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

@@ -10,9 +10,9 @@ require("./index.scss");
 var _teletextListItem = _interopRequireDefault(require("./teletext-list-item"));
 var _childrenNodeHandle = require("../../utils/children-node-handle");
 var _arr = _interopRequireDefault(require("../../assets/icon/teletext-list/arr.png"));
-var _excluded = ["dataList", "onClick", "children", "imagePlacement", "handleMoreClick", "moreText"];
-/**
- * 数据
+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 TeletextList = function TeletextList(_ref) {
@@ -24,13 +24,70 @@ var TeletextList = function TeletextList(_ref) {
     imagePlacement = _ref$imagePlacement === void 0 ? 'left' : _ref$imagePlacement,
     handleMoreClick = _ref.handleMoreClick,
     moreText = _ref.moreText,
+    title = _ref.title,
+    textLines = _ref.textLines,
+    type = _ref.type,
+    itemColumns = _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,
+    itemBgColor = _ref.itemBgColor,
+    itemRowAlign = _ref.itemRowAlign,
+    textAlign = _ref.textAlign,
+    isShoppingCart = _ref.isShoppingCart,
+    isWishList = _ref.isWishList,
+    isUserMenu = _ref.isUserMenu,
+    textImgGap = _ref.textImgGap,
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   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
+        }
+      };
+    }
+    // column 模式使用 grid 布局
+    return {
+      display: 'grid',
+      gridTemplateColumns: "repeat(" + itemColumns + ",1fr)",
+      gap: itemGap + "px"
+    };
+  };
+  var getDataList = function getDataList() {
+    if (!dataList) return [];
+    console.log('dataList2', dataList);
+    return Array.isArray(dataList) ? dataList : [dataList];
+  };
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: "teletext-list__panel"
   }, _otherProps), /*#__PURE__*/_react["default"].createElement("div", {
     className: "teletext-list__panel-head"
-  }, (0, _childrenNodeHandle.convertChildren)(children, 'box-title'), moreText ? /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _childrenNodeHandle.convertChildren)(children, 'box-title', {
+    children: [title]
+  }), moreText ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "teletext-list__panel-head-more",
     onClick: handleMoreClick
   }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -38,13 +95,38 @@ var TeletextList = function TeletextList(_ref) {
   }, moreText), /*#__PURE__*/_react["default"].createElement("img", {
     src: _arr["default"],
     className: "teletext-list__panel-head-more-img"
-  })) : ''), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "teletext-list__panel__item-list"
-  }, dataList ? dataList.map(function (item, index) {
+  })) : ''), isUserMenu && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "teletext-list__panel-head-user-menu"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "teletext-list__panel-head-user-menu-img",
+    src: "",
+    alt: ""
+  }), /*#__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",
+    style: getListStyle()
+  }, dataList ? getDataList().map(function (item, index) {
     return /*#__PURE__*/_react["default"].createElement(_teletextListItem["default"], (0, _extends2["default"])({
-      key: index,
+      key: item.id || index,
       onClick: onClick,
-      imagePlacement: imagePlacement
+      imagePlacement: imagePlacement,
+      style: itemRowAlign === 'row' ? {
+        flex: '0 0 auto'
+      } : undefined,
+      type: type,
+      textLines: textLines,
+      itemColumns: itemColumns,
+      iconList: iconList,
+      itemPadding: itemPadding,
+      imgWidth: imgWidth,
+      imgHeight: imgHeight,
+      itemBgColor: itemBgColor,
+      textAlign: textAlign,
+      isShoppingCart: isShoppingCart,
+      isWishList: isWishList,
+      isUserMenu: isUserMenu,
+      textImgGap: textImgGap
     }, item), children);
   }) : /*#__PURE__*/_react["default"].createElement("div", null, "\u6682\u65E0\u6570\u636E")));
 };

package/lib/components/text-description-detail-list/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 文本描述详情列表
+ */
+import TextDescriptionDetailList from './text-description-detail-list';
+export type { TextDescriptionDetailListProps } from './text-description-detail-list';
+export { TextDescriptionDetailList };

package/lib/components/text-description-detail-list/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+var _textDescriptionDetailList = _interopRequireDefault(require("./text-description-detail-list"));
+exports.TextDescriptionDetailList = _textDescriptionDetailList["default"];

package/lib/components/text-description-detail-list/index.scss

@@ -0,0 +1,12 @@
+.text-description-detail-list {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  
+  .no-data {
+    color: #999;
+    text-align: center;
+    padding: 16px 0;
+  }
+}

package/lib/components/text-description-detail-list/text-description-detail-list-item.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import './text-description-detail-list-item.scss';
+/**
+ * 数据
+ */
+export interface TextDescriptionDetailListItemProps {
+    /**
+     * 标签
+     */
+    label: string;
+    /**
+     * 值
+     */
+    value: string;
+    /**
+     * 标签位置
+     */
+    labelPosition?: 'left' | 'top' | 'none';
+    /**
+     * 点击事件
+     */
+    onClick?: (e: any) => void;
+    /**
+     * 子节点
+     */
+    children?: React.ReactNode;
+}
+declare const TextDescriptionDetailListItem: React.FC<TextDescriptionDetailListItemProps>;
+export default TextDescriptionDetailListItem;

package/lib/components/text-description-detail-list/text-description-detail-list-item.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./text-description-detail-list-item.scss");
+/**
+ * 数据
+ */
+
+var TextDescriptionDetailListItem = function TextDescriptionDetailListItem(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    labelPosition = _ref.labelPosition,
+    onClick = _ref.onClick,
+    children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "text-description-detail-list-item position-" + labelPosition,
+    onClick: onClick
+  }, labelPosition !== 'none' && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "item-label"
+  }, label), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "item-value"
+  }, value));
+};
+TextDescriptionDetailListItem.displayName = 'TextDescriptionDetailListItem';
+var _default = exports["default"] = TextDescriptionDetailListItem;