@dckj-npm/dc-material 0.1.76 → 0.1.77

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

@@ -24,6 +24,12 @@ var TeletextListItem = function TeletextListItem(_ref) {
   var resultImage = image && image.length > 0 ? image[0] : '';
   var _otherProps = otherProps || {};
   var tagColorArray = ['orange', 'green'];
+  var tagList = (typeof tags === 'string' ? tags.split(',') : []).map(function (tag) {
+    return {
+      name: tag
+    };
+  });
+  console.log('tagList', tagList, 'type of tags', typeof tags === 'string');
   return /*#__PURE__*/React.createElement("div", _extends({
     className: "teletext-list__panel__item",
     onClick: onClick
@@ -40,11 +46,11 @@ var TeletextListItem = function TeletextListItem(_ref) {
     className: 'teletext-list__panel__item__text__description'
   }), tags ? /*#__PURE__*/React.createElement("div", {
     className: "teletext-list__panel__item__text__tags"
-  }, (Array.isArray(tags) ? tags : tags.split(',')).map(function (tag, tagIndex) {
-    return convertChildren(children, 'teletext-tagc-1', {
-      name: tag.name,
-      key: tagIndex,
-      color: tagColorArray[tagIndex % tagColorArray.length]
+  }, tagList.map(function (tag, tagIndex) {
+    return convertChildren(children, "teletext-tagc-" + (tagIndex % tagColorArray.length + 1), {
+      name: tag.name
+      // key: tagIndex,
+      // color: tagColorArray[tagIndex % tagColorArray.length],
     });
   })) : null), resultImage && imagePlacement === 'right' ? convertChildren(children, 'image', {
     src: resultImage,

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

@@ -19,16 +19,7 @@ interface DataProps {
     /**
      * 标签列表
      */
-    tags?: {
-        /**
-         * 标签名称
-         */
-        name: string;
-        /**
-         * 标签颜色
-         */
-        color: string;
-    }[] | string;
+    tags?: string;
     /**
      * 链接地址
      */
@@ -55,7 +46,7 @@ export interface TeletextListProps {
     /**
      * 图片位置
      */
-    imagePlacement?: "left" | "right" | "none";
+    imagePlacement?: 'left' | 'right' | 'none';
 }
 declare const TeletextList: React.FC<TeletextListProps>;
 export default TeletextList;

package/es/index.d.ts

@@ -35,6 +35,8 @@ export { default as Button2 } from './components/button';
 export type { RadioGroupProps, RadioGroupItemProps } from './components/radio-group';
 export { CustomRadioGroup, CustomRadioGroupItem } from './components/radio-group';
 export type { GoodsCardListProps } from './components/goods-card-list';
-export { GoodsCardList } from './components/goods-card-list';
+export { GoodsCardList, GoodsCardListCommon } from './components/goods-card-list';
+export type { RichTextProps } from './components/rich-text';
+export { RichText } from './components/rich-text';
 declare const bizCssPrefix = "bizpack";
 export { bizCssPrefix };

package/es/index.js

@@ -69,6 +69,10 @@ export { CustomRadioGroup, CustomRadioGroupItem } from "./components/radio-group
 
 // 商品卡片列表
 
-export { GoodsCardList } from "./components/goods-card-list";
+export { GoodsCardList, GoodsCardListCommon } from "./components/goods-card-list";
+
+// 富文本
+
+export { RichText } from "./components/rich-text";
 var bizCssPrefix = 'bizpack';
 export { bizCssPrefix };

package/lib/components/goods-card-list/goods-card-list-common.d.ts

@@ -0,0 +1,5 @@
+import type { GoodsCardListProps } from './types';
+import React from 'react';
+import './goods-card-list-common.scss';
+declare const GoodsCardListCommon: React.FC<GoodsCardListProps>;
+export default GoodsCardListCommon;

package/lib/components/goods-card-list/goods-card-list-common.js

@@ -0,0 +1,65 @@
+"use strict";
+
+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 _react = _interopRequireDefault(require("react"));
+var _carousel = _interopRequireDefault(require("../carousel/carousel"));
+require("./goods-card-list-common.scss");
+var _excluded = ["dataList", "maxSales", "onClick"];
+var GoodsCardListCommon = function GoodsCardListCommon(_ref) {
+  var _ref$dataList = _ref.dataList,
+    dataList = _ref$dataList === void 0 ? [] : _ref$dataList,
+    _ref$maxSales = _ref.maxSales,
+    maxSales = _ref$maxSales === void 0 ? 1000 : _ref$maxSales,
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  var resolveResultDesc = function resolveResultDesc(desc) {
+    var htmlString = "<div>" + desc + "</div>";
+    // 创建一个虚拟的 DOM 容器
+    var tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlString;
+    // 提取文本
+    return tempDiv.textContent || tempDiv.innerText;
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: "card-list-goods-common__container"
+  }, _otherProps), dataList.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: item.key,
+      className: "card-list-goods__item",
+      onClick: function onClick() {
+        return _onClick(item);
+      }
+    }, item.imageList && item.imageList.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "card-list-goods__image"
+    }, /*#__PURE__*/_react["default"].createElement(_carousel["default"], {
+      images: item.imageList,
+      interval: 3000
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "card-list-goods__content"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "card-list-goods__title"
+    }, item.title), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "card-list-goods__desc"
+    }, resolveResultDesc(item.desc)), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "card-list-goods__bottom"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "card-list-goods__unit"
+    }, "\uFFE5"), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "card-list-goods__price"
+    }, item.activePrice || item.price), item.activePrice && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "card-list-goods__unit__delete"
+    }, "\uFFE5"), item.activePrice && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "card-list-goods__price__delete"
+    }, item.price), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "card-list-goods__sales"
+    }, "\u5DF2\u552E", item.sales > maxSales ? maxSales + "+" : item.sales))));
+  }));
+};
+GoodsCardListCommon.displayName = 'GoodsCardListCommon';
+var _default = exports["default"] = GoodsCardListCommon;

package/lib/components/goods-card-list/goods-card-list-common.scss

@@ -0,0 +1,118 @@
+.card-list-goods-common__container {
+  display: grid;
+  grid-template-columns:repeat(2, minmax(0, 1fr));
+  row-gap: 12px;
+  column-gap: 10px;
+  width: 100%;
+
+  & > .card-list-goods__item {
+    box-sizing: border-box;
+    transition: top 0.35s ease, left 0.35s ease, width 0.35s ease;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 3px 9px 1px rgba(204, 204, 204, 0.35);
+
+    & > .card-list-goods__image {
+      height: 200px;
+      width: 100%;
+      overflow: hidden;
+      display: flex;
+
+      & > img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        //object-position: center;
+        object-position: 50% 50%;
+      }
+    }
+
+    & > .card-list-goods__content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 0.5rem;
+
+      .card-list-goods__title {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        font-size: 14px;
+        font-weight: 700;
+      }
+
+      .card-list-goods__desc {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-clamp: 2;
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        font-size: 12px;
+        color: #333333;
+      }
+
+      .card-list-goods__bottom {
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        display: flex;
+        align-items: baseline;
+        flex-wrap: wrap;
+        row-gap: 0.5rem;
+
+        & > div {
+          display: flex;
+        }
+
+        .card-list-goods__unit {
+          font-size: 12px;
+          color: #F57D51;
+          font-weight: 700;
+          line-height: 1;
+
+          &__delete {
+            margin-left: 0;
+            font-size: 14px;
+            color: #666666;
+            line-height: 1;
+            text-decoration: line-through
+          }
+
+        }
+
+        .card-list-goods__price {
+          font-size: 17px;
+          color: #F57D51;
+          font-weight: 700;
+          line-height: 1;
+
+          &__delete {
+            margin-left: 0;
+            font-size: 14px;
+            color: #666666;
+            line-height: 1;
+            text-decoration: line-through
+          }
+        }
+
+        .card-list-goods__sales {
+          margin-left: 3px;
+          font-size: 12px;
+          color: #666666;
+          line-height: 1;
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
+
+

package/lib/components/goods-card-list/index.d.ts

@@ -1,3 +1,4 @@
 import GoodsCardList from './goods-card-list';
+import GoodsCardListCommon from './goods-card-list-common';
 export type { GoodsCardListItemProps, GoodsCardListProps } from './types';
-export { GoodsCardList };
+export { GoodsCardList, GoodsCardListCommon };

package/lib/components/goods-card-list/index.js

@@ -3,4 +3,6 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 var _goodsCardList = _interopRequireDefault(require("./goods-card-list"));
-exports.GoodsCardList = _goodsCardList["default"];
+exports.GoodsCardList = _goodsCardList["default"];
+var _goodsCardListCommon = _interopRequireDefault(require("./goods-card-list-common"));
+exports.GoodsCardListCommon = _goodsCardListCommon["default"];

package/lib/components/grid-nav/index.scss

@@ -1,37 +1,41 @@
 /* write style here */
 .grid-navigation {
-    //padding: 10px;
-    width: 100%;
-    display: grid;
-    gap: 14px 38px; /* 宫格之间的间距 */
-    margin: 0;
-    // grid-template-columns: repeat(60px, minmax(1fr));
-  }
+  //padding: 10px;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  //gap: 14px 38px; /* 宫格之间的间距 */
+  grid-row-gap: 14px;
+  margin: 0;
+  //padding: 0 18px
+  // grid-template-columns: repeat(60px, minmax(1fr));
+}
+
+.grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  text-decoration: none;
+  color: #333;
+  position: relative;
 
-  .grid-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    text-decoration: none;
-    color: #333;
-    position: relative;
-    img {
-      width: 48px;
-      height: 51px;
-      margin-bottom: 3px;
-    }
+  img {
+    width: 48px;
+    height: 51px;
+    margin-bottom: 3px;
+  }
 
-    span {
-      font-size: 13px;
-      color: #222222;
-      // overflow: hidden;
-      // text-overflow: ellipsis;
-      // white-space: nowrap;
-      // max-width: 60px;
-    }
+  span {
+    font-size: 13px;
+    color: #222222;
+    // overflow: hidden;
+    // text-overflow: ellipsis;
+    // white-space: nowrap;
+    // max-width: 60px;
+  }
 
-    &:hover {
-      color: #007bff;
-    }
+  &:hover {
+    color: #007bff;
   }
+}

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

@@ -24,6 +24,10 @@ export interface DataProps {
      * 点击事件
      */
     onClick?: (e: any) => void;
+    /**
+     * 是否已读
+     */
+    isRead?: boolean;
 }
 declare const MessageListItem: React.FC<DataProps>;
 export default MessageListItem;

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

@@ -8,7 +8,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 require("./message-list-item.scss");
 var _childrenNodeHandle = require("../../utils/children-node-handle");
-var _excluded = ["onClick", "title", "image", "gmtCreate", "children", "description"];
+var _excluded = ["onClick", "title", "image", "gmtCreate", "children", "description", "isRead"];
 /**
  * 数据
  */
@@ -21,6 +21,7 @@ var MessageListItem = function MessageListItem(_ref) {
     gmtCreate = _ref.gmtCreate,
     children = _ref.children,
     description = _ref.description,
+    isRead = _ref.isRead,
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var _otherProps = otherProps || {};
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
@@ -28,6 +29,8 @@ var MessageListItem = function MessageListItem(_ref) {
     onClick: onClick
   }, _otherProps), (0, _childrenNodeHandle.convertChildren)(children, 'image', {
     src: image
+  }), isRead ? null : /*#__PURE__*/_react["default"].createElement("span", {
+    className: "badge"
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "message-list__panel__item__text"
   }, (0, _childrenNodeHandle.convertChildren)(children, 'title', {

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

@@ -5,33 +5,42 @@
   gap: 5px;
   padding-bottom: 15px;
   justify-content: flex-start;
-
-  border-bottom: 0.5px solid #eeeeee;
-
+  border-bottom: 1px solid #eeeeee;
+  position: relative;
   &_image {
     width: 90px;
     height: 71px;
     border-radius: 5px;
     flex: 0 0 auto;
     overflow: hidden;
+    position: relative;
 
     & > img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
-
+  }
+  .badge {
+    display: inline-block;
+    width: 7px; // 根据需要设置的大小
+    height: 7px;
+    border-radius: 50%;
+    background-color: #F44341; // 红色背景
+    position: absolute; // 绝对定位
+    top: 5px; // 根据需要调整位置
+    left: 38px; // 根据需要调整位置
   }
 
   &__text {
     display: flex;
     flex-direction: column;
     gap: 3px;
-    padding-top: 5px;
+    padding-top: 4px;
 
     &__title {
       font-size: 15px;
-      font-weight: 500;
+      font-weight: 600;
       color: #000000;
     }
 
@@ -46,5 +55,6 @@
     }
 
   }
+  
 
 }

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

@@ -6,14 +6,6 @@ export interface MessageListProps {
      * 全部的数据
      */
     dataList?: DataProps[];
-    /**
-     * 已读的数据
-     */
-    readDataList?: DataProps[];
-    /**
-     * 未读的数据
-     */
-    unReadDataList?: DataProps[];
     /**
      * 点击事件
      * @param e
@@ -27,6 +19,10 @@ export interface MessageListProps {
      * 图片
      */
     images: string[];
+    /**
+     * 切换数据源
+     */
+    handleDataList: (key: string) => DataProps[];
 }
 declare const MessageList: React.FC<MessageListProps>;
 export default MessageList;

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

@@ -9,42 +9,35 @@ var _react = _interopRequireWildcard(require("react"));
 require("./index.scss");
 var _messageListItem = _interopRequireDefault(require("./message-list-item"));
 var _childrenNodeHandle = require("../../utils/children-node-handle");
-var _excluded = ["dataList", "readDataList", "unReadDataList", "onClick", "children", "images"];
+var _excluded = ["dataList", "handleDataList", "onClick", "children", "images"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var MessageList = function MessageList(_ref) {
   var dataList = _ref.dataList,
-    readDataList = _ref.readDataList,
-    unReadDataList = _ref.unReadDataList,
+    handleDataList = _ref.handleDataList,
     _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
     children = _ref.children,
     images = _ref.images,
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var _otherProps = otherProps || {};
-  var _React$useState = _react["default"].useState(dataList),
+  var _React$useState = _react["default"].useState(dataList || []),
     currentDataList = _React$useState[0],
     setCurrentDataList = _React$useState[1];
   var _React$useState2 = _react["default"].useState('all'),
     currentKey = _React$useState2[0],
     setCurrentKey = _React$useState2[1];
+
   // 切换数据源
   var handleClick = function handleClick(key) {
-    if (key === 'read') {
-      setCurrentDataList(readDataList);
-      setCurrentKey('read');
-    } else if (key === 'unRead') {
-      setCurrentDataList(unReadDataList);
-      setCurrentKey('unRead');
-    } else {
-      setCurrentDataList(dataList);
-      setCurrentKey('all');
-    }
+    var newDataList = handleDataList(key);
+    setCurrentDataList(newDataList);
+    setCurrentKey(key);
   };
   images = images || [];
   (0, _react.useEffect)(function () {
-    handleClick(currentKey);
-  });
+    setCurrentDataList(dataList || []);
+  }, [dataList]);
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: "message-list__panel"
   }, _otherProps), /*#__PURE__*/_react["default"].createElement("div", {

package/lib/components/notice-bar/notice-bar-item.scss

@@ -1,5 +1,5 @@
 .notice-bar__panel__item {
-    width: calc(100vw - 104px);
+    width: calc(100vw - 110px);
     display: flex;
     align-items: center;
     justify-content: space-between;

package/lib/components/rich-text/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 富文本
+ */
+import RichText from './rich-text';
+export type { RichTextProps } from './rich-text';
+export { RichText, };

package/lib/components/rich-text/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+var _richText = _interopRequireDefault(require("./rich-text"));
+exports.RichText = _richText["default"];

package/lib/components/rich-text/index.scss

@@ -0,0 +1,19 @@
+.rich-text {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0; /* 添加内边距 */
+  margin: 0; /* 去除外边距 */
+  word-break: break-word; /* 处理长单词换行 */
+  overflow-wrap: break-word; /* 支持长单词换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+}
+p {
+  padding: 0;
+  margin: 0 0 20px 0 !important;
+}
+img {
+  max-width: 100%;
+  height: auto; /* 保持纵横比 */
+  object-fit: contain; /* 确保图片保持在容器内 */
+}

package/lib/components/rich-text/rich-text.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import './index.scss';
+interface DataProps {
+    content?: string;
+}
+export interface RichTextProps {
+    content?: string;
+    dataList?: DataProps[];
+}
+declare const RichText: {
+    (props: RichTextProps): JSX.Element;
+    displayName: string;
+};
+export default RichText;

package/lib/components/rich-text/rich-text.js

@@ -0,0 +1,42 @@
+"use strict";
+
+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 _react = _interopRequireDefault(require("react"));
+require("./index.scss");
+var _excluded = ["content", "dataList"];
+// 富文本
+
+// 用于处理富文本内容的函数
+var processContent = function processContent(content) {
+  // 检查内容是否为字符串
+  if (typeof content !== 'string') {
+    return '';
+  }
+  // 替换转义符号（这里可以根据需要添加更多处理逻辑）
+  return content.replace(/\\/g, '');
+};
+var RichText = function RichText(props) {
+  var content = props.content,
+    dataList = props.dataList,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: "rich-text"
+  }, otherProps), dataList && dataList.length > 0 ? dataList.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      dangerouslySetInnerHTML: {
+        __html: processContent(item.content)
+      }
+    });
+  }) : /*#__PURE__*/_react["default"].createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: processContent(content)
+    }
+  }));
+};
+RichText.displayName = 'RichText';
+var _default = exports["default"] = RichText;

package/lib/components/tab/index.scss

@@ -8,6 +8,7 @@
   cursor: pointer;
   margin-right: 6px;
   letter-spacing: 2px;
+  position: relative;
   &--selected {
     background-color: #ED794A;
     color: #FFFFFF;
@@ -20,4 +21,19 @@
     padding: 14px 30px;
     border-radius: 28px;
   }
+  .badge {
+    display: flex;
+    padding: 2px 4px;
+    border-radius: 8px;
+    background-color: #F44341; // 红色背景
+    color: white; // 字体颜色
+    // text-align: center;
+    letter-spacing: 0;
+    justify-content: center;
+    line-height: normal; // 垂直居中
+    font-size: 10px; // 根据需要调整字体大小
+    position: absolute; // 绝对定位
+    top: 0; // 根据需要调整位置
+    right: 3px; // 根据需要调整位置
+  }
 }