@dckj-npm/dc-material 0.1.76 → 0.1.78

package/es/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/es/components/goods-card-list/goods-card-list-common.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList", "maxSales", "onClick"];
+import React from 'react';
+import Carousel from "../carousel/carousel";
+import "./goods-card-list-common.scss";
+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 = _objectWithoutPropertiesLoose(_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.createElement("div", _extends({
+    className: "card-list-goods-common__container"
+  }, _otherProps), dataList.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.key,
+      className: "card-list-goods__item",
+      onClick: function onClick() {
+        return _onClick(item);
+      }
+    }, item.imageList && item.imageList.length > 0 && /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__image"
+    }, /*#__PURE__*/React.createElement(Carousel, {
+      images: item.imageList,
+      interval: 3000
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__title"
+    }, item.title), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__desc"
+    }, resolveResultDesc(item.desc)), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__bottom"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__unit"
+    }, "\uFFE5"), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__price"
+    }, item.activePrice || item.price), item.activePrice && /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__unit__delete"
+    }, "\uFFE5"), item.activePrice && /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__price__delete"
+    }, item.price), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__sales"
+    }, "\u5DF2\u552E", item.sales > maxSales ? maxSales + "+" : item.sales))));
+  }));
+};
+GoodsCardListCommon.displayName = 'GoodsCardListCommon';
+export default GoodsCardListCommon;

package/es/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/es/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/es/components/goods-card-list/index.js

@@ -1,2 +1,3 @@
 import GoodsCardList from "./goods-card-list";
-export { GoodsCardList };
+import GoodsCardListCommon from "./goods-card-list-common";
+export { GoodsCardList, GoodsCardListCommon };

package/es/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/es/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/es/components/message-list/message-list-item.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["onClick", "title", "image", "gmtCreate", "children", "description"];
+var _excluded = ["onClick", "title", "image", "gmtCreate", "children", "description", "isRead"];
 import React from 'react';
 import "./message-list-item.scss";
 import { convertChildren } from "../../utils/children-node-handle";
@@ -17,6 +17,7 @@ var MessageListItem = function MessageListItem(_ref) {
     gmtCreate = _ref.gmtCreate,
     children = _ref.children,
     description = _ref.description,
+    isRead = _ref.isRead,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _otherProps = otherProps || {};
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -24,6 +25,8 @@ var MessageListItem = function MessageListItem(_ref) {
     onClick: onClick
   }, _otherProps), convertChildren(children, 'image', {
     src: image
+  }), isRead ? null : /*#__PURE__*/React.createElement("span", {
+    className: "badge"
   }), /*#__PURE__*/React.createElement("div", {
     className: "message-list__panel__item__text"
   }, convertChildren(children, 'title', {

package/es/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/es/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/es/components/message-list/message-list.js

@@ -1,43 +1,36 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["dataList", "readDataList", "unReadDataList", "onClick", "children", "images"];
+var _excluded = ["dataList", "handleDataList", "onClick", "children", "images"];
 import React, { useEffect } from 'react';
 import "./index.scss";
 import { default as MessageListItem } from "./message-list-item";
 import { convertChildren } from "../../utils/children-node-handle";
 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 = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _otherProps = otherProps || {};
-  var _React$useState = React.useState(dataList),
+  var _React$useState = React.useState(dataList || []),
     currentDataList = _React$useState[0],
     setCurrentDataList = _React$useState[1];
   var _React$useState2 = React.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 || [];
   useEffect(function () {
-    handleClick(currentKey);
-  });
+    setCurrentDataList(dataList || []);
+  }, [dataList]);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: "message-list__panel"
   }, _otherProps), /*#__PURE__*/React.createElement("div", {

package/es/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/es/components/rich-text/index.d.ts

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

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

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

package/es/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/es/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/es/components/rich-text/rich-text.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["content", "dataList"];
+import React from 'react';
+import "./index.scss";
+// 富文本
+
+// 用于处理富文本内容的函数
+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 = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "rich-text"
+  }, otherProps), dataList && dataList.length > 0 ? dataList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      dangerouslySetInnerHTML: {
+        __html: processContent(item.content)
+      }
+    });
+  }) : /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: processContent(content)
+    }
+  }));
+};
+RichText.displayName = 'RichText';
+export default RichText;

package/es/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; // 根据需要调整位置
+  }
 }

package/es/components/tab/tab.d.ts

@@ -18,6 +18,10 @@ export interface TabProps {
      * @param e
      */
     onClickHandle?: (e: string) => void;
+    /**
+     * 未读消息数量
+     */
+    unreadCount?: number;
 }
 declare const Tab: React.FC<TabProps>;
 export default Tab;

package/es/components/tab/tab.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["selectedBGColor", "selectedFontColor", "size", "onClickHandle"];
+var _excluded = ["selectedBGColor", "selectedFontColor", "size", "onClickHandle", "unreadCount"];
 import * as React from 'react';
 import "./index.scss";
 var Tab = function Tab(_ref) {
@@ -8,6 +8,7 @@ var Tab = function Tab(_ref) {
     selectedFontColor = _ref.selectedFontColor,
     size = _ref.size,
     onClickHandle = _ref.onClickHandle,
+    unreadCount = _ref.unreadCount,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var tabList = [{
     key: 'all',
@@ -40,7 +41,10 @@ var Tab = function Tab(_ref) {
         backgroundColor: tab === item.key ? selectedBGColor : '',
         color: tab === item.key ? selectedFontColor : ''
       }
-    }), item.label);
+    }), item.label, item.key === 'unRead' && unreadCount > 0 && /*#__PURE__*/React.createElement("span", {
+      className: "badge"
+    }, unreadCount) // 条件渲染badge
+    );
   });
 };
 export default Tab;

package/es/components/tab-container-item/tab-container-item.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import { Tab } from '@alifd/next';
 export interface TabContainerItemProps extends React.ComponentProps<typeof Tab> {
     className?: string;
+    tab: string;
+    key: string;
 }
 export declare const TabContainerItem: {
     (props: TabContainerItemProps): JSX.Element;

package/es/components/tab-container-item/tab-container-item.js

@@ -1,14 +1,19 @@
 import _Tab from "@alifd/next/es/tab";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className"];
+var _excluded = ["className", "tab", "key"];
 import React from 'react';
 import cx from 'classnames';
 export var TabContainerItem = function TabContainerItem(props) {
   var className = props.className,
+    tab = props.tab,
+    key = props.key,
     restProps = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/React.createElement(_Tab.Item, _extends({
     className: cx(className, 'fusion-ui-tab')
-  }, restProps));
+  }, restProps, {
+    title: tab,
+    primaryKey: key
+  }));
 };
 TabContainerItem.displayName = 'TabContainerItem';

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

@@ -19,7 +19,7 @@ export interface TeletextListItemProps {
     /**
      * 图片位置
      */
-    imagePlacement?: "left" | "right" | "none";
+    imagePlacement?: 'left' | 'right' | 'none';
     /**
      * 说明
      */
@@ -27,16 +27,7 @@ export interface TeletextListItemProps {
     /**
      * 标签列表
      */
-    tags?: {
-        /**
-         * 标签名称
-         */
-        name: string;
-        /**
-         * 标签颜色
-         */
-        color: string;
-    }[] | string;
+    tags?: string;
 }
 declare const TeletextListItem: React.FC<TeletextListItemProps>;
 export default TeletextListItem;