@dckj-npm/dc-material 0.1.127 → 0.1.129

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

@@ -1,16 +1,16 @@
-@import '../../variables.scss';
-
-.menu-list__panel {
-  border-radius: 10px;
-  background-color: white;
-
-  .menu-list__panel__item-list {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 1px 22px;
-  }
-
-}
-
-
+@import '../../variables.scss';
+
+.menu-list__panel {
+  border-radius: 10px;
+  background-color: white;
+
+  .menu-list__panel__item-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 1px 22px;
+  }
+
+}
+
+

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

@@ -1,49 +1,49 @@
-@import '../../variables.scss';
-
-.menu-list__panel__item {
-  display: flex;
-  gap: 7px;
-  justify-content: space-between;
-  align-items: center;
-  height: 45px;
-
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  .menu-list__panel__item_icon {
-    height: 100%;
-    display: flex;
-    align-items: center;
-
-    & > img {
-      height: 15px;
-    }
-  }
-
-  .menu-list__panel__item_title {
-    font-size: 15px;
-    color: #666666;
-    font-weight: 500;
-    margin-right: auto;
-  }
-
-  .menu-list__panel__item_right {
-    height: 100%;
-    display: flex;
-    align-items: center;
-
-    & > svg {
-      height: 16px;
-      font-size: 12px;
-      color: #666666;
-      font-weight: 500;
-    }
-
-
-  }
-
-
-}
+@import '../../variables.scss';
+
+.menu-list__panel__item {
+  display: flex;
+  gap: 7px;
+  justify-content: space-between;
+  align-items: center;
+  height: 45px;
+
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .menu-list__panel__item_icon {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    & > img {
+      height: 15px;
+    }
+  }
+
+  .menu-list__panel__item_title {
+    font-size: 15px;
+    color: #666666;
+    font-weight: 500;
+    margin-right: auto;
+  }
+
+  .menu-list__panel__item_right {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    & > svg {
+      height: 16px;
+      font-size: 12px;
+      color: #666666;
+      font-weight: 500;
+    }
+
+
+  }
+
+
+}

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _messageList = _interopRequireDefault(require("./message-list"));
-/**
- * 消息列表
+/**
+ * 消息列表
  */
 var _default = exports["default"] = _messageList["default"];

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

@@ -1,22 +1,22 @@
-@import '../../variables.scss';
-
-.message-list__panel {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  &__tab{
-    margin-bottom: 20px;
-  }
-
-  &__item-list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    div:last-child {
-      border-bottom: none;
-    }
-  }
-
-}
-
-
+@import '../../variables.scss';
+
+.message-list__panel {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  &__tab{
+    margin-bottom: 20px;
+  }
+
+  &__item-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    div:last-child {
+      border-bottom: none;
+    }
+  }
+
+}
+
+

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

@@ -9,8 +9,8 @@ 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", "isRead"];
-/**
- * 数据
+/**
+ * 数据
  */
 
 var MessageListItem = function MessageListItem(_ref) {

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

@@ -1,60 +1,60 @@
-@import '../../variables.scss';
-
-.message-list__panel__item {
-  display: flex;
-  gap: 5px;
-  padding-bottom: 15px;
-  justify-content: flex-start;
-  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: 4px;
-
-    &__title {
-      font-size: 15px;
-      font-weight: 600;
-      color: #000000;
-    }
-
-    &__description {
-      -webkit-line-clamp: 1;
-      overflow: hidden;
-      color: #686868;
-      -webkit-box-orient: vertical;
-      display: -webkit-box;
-      font-size: 12px;
-      text-overflow: ellipsis;
-    }
-
-  }
-
-
-}
+@import '../../variables.scss';
+
+.message-list__panel__item {
+  display: flex;
+  gap: 5px;
+  padding-bottom: 15px;
+  justify-content: flex-start;
+  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: 4px;
+
+    &__title {
+      font-size: 15px;
+      font-weight: 600;
+      color: #000000;
+    }
+
+    &__description {
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      color: #686868;
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      font-size: 12px;
+      text-overflow: ellipsis;
+    }
+
+  }
+  
+
+}

package/lib/components/notice-bar/components/ScrollSwitcher.js

@@ -0,0 +1,52 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./ScrollSwitcher.scss");
+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 ScrollSwitcher = function ScrollSwitcher(_ref) {
+  var children = _ref.children,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '20px' : _ref$height,
+    _ref$interval = _ref.interval,
+    interval = _ref$interval === void 0 ? 3000 : _ref$interval;
+  var _useState = (0, _react.useState)(0),
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
+  var childrenCount = _react["default"].Children.count(children);
+  (0, _react.useEffect)(function () {
+    var timer = setInterval(function () {
+      setCurrentIndex(function (prevIndex) {
+        return (prevIndex + 1) % _react["default"].Children.count(children);
+      });
+    }, interval);
+    return function () {
+      return clearInterval(timer);
+    }; // 清理定时器
+  }, [children, interval]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "scroll-switcher",
+    style: {
+      height: height
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "scroll-switcher-content",
+    style: {
+      transform: "translateY(-" + currentIndex * 100 + "%)",
+      transition: 'transform 0.5s ease'
+    }
+  }, _react["default"].Children.map(children, function (child, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "scroll-item",
+      key: index
+    }, child);
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "scroll-item",
+    key: childrenCount
+  }, children)));
+};
+var _default = exports["default"] = ScrollSwitcher;

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

@@ -0,0 +1,17 @@
+.scroll-switcher {
+    overflow: hidden; /* 隐藏溢出内容 */
+    position: relative; /* 使子元素绝对定位 */
+  }
+  
+  .scroll-switcher-content {
+    display: flex; /* 使用 flexbox 使子元素竖直排列 */
+    flex-direction: column; /* 子元素垂直排列 */
+  }
+  
+  .scroll-item {
+    height: 100%; /* 使每个子项占满容器的高度 */
+    display: flex;
+    align-items: center; /* 垂直居中对齐 */
+    justify-content: center; /* 水平居中对齐 */
+  }
+  

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

@@ -1,59 +1,42 @@
-.notice-bar__panel {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    height: 70px;
-    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.07);
-    margin: 0;
-    padding: 0 10px;
-    border-radius: 12px;
-    box-sizing: border-box;
-    .notice-bar__panel__item-img {
-        width: 46px;
-        margin-right: 7px;
-
-    }
-    .notice-bar__panel__item-list {
-        width: calc(100% - 53px);
-        display: flex;
-        flex-direction: column;
-        align-items: start;
-        justify-content: start;
-        border-left: 1px solid #f1f1f1;
-        padding-left: 10px;
-        position: relative;
-        overflow: hidden;
-
-        .notice-bar__panel__item-loop {
-            width: 100%;
-            position: relative;
-            overflow: hidden; // 确保超出部分不显示
-            height: 20px; // 设置合适的高度
-          }
-
-          .notice-bar__panel__item-loop > div {
-            position: absolute; // 绝对定位
-            width: 100%;
-            height: 20px;
-            animation: scrollUp 4s linear infinite; // 动画持续时间和类型
-          }
-
-          @keyframes scrollUp {
-            0% {
-              transform: translateY(100%); // 从底部开始
-            }
-            100% {
-              transform: translateY(-200%); // 滚动到顶部
-            }
-          }
-
-
-    }
-
-
-}
-//动画
-.anim {
-  transition: all 0.5s;
-  margin-top: -24px;
-}
+.notice-bar__panel {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 70px;
+    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.07);
+    margin: 0;
+    padding: 0 10px;
+    border-radius: 12px;
+    box-sizing: border-box;
+    .notice-bar__panel__item-img {
+        width: 46px;
+        margin-right: 7px;
+
+    }
+    .notice-bar__panel__item-list {
+        width: calc(100% - 53px);
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        justify-content: start;
+        border-left: 1px solid #f1f1f1;
+        padding-left: 10px;
+        .notice-bar__panel-loop {
+            width: 100%;
+            overflow: hidden;
+            list-style: none;
+            text-align: center;
+            height: 20px;
+            color: #111111;
+            padding: 0;
+            .notice-bar__panel-loop__item {
+              text-align: left;
+              height: 20px;
+            }
+            .toUp {
+              margin-top: -25px; //向上移
+              transition: all 0.5s;
+            }
+          }
+    }
+}

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

@@ -18,15 +18,12 @@ var NoticeBarItem = function NoticeBarItem(_ref) {
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var _otherProps = otherProps || {};
   releaseTime = (0, _timeUtil.formatTime)(releaseTime);
-  console.log((0, _childrenNodeHandle.convertChildren)(children, isTop === 1 ? 'teletext-tagc-1' : 'teletext-tagc-2', {
-    name: isTop === 1 ? '置顶' : '最新'
-  }));
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: "notice-bar__panel__item"
   }, _otherProps), /*#__PURE__*/_react["default"].createElement("div", {
     className: "notice-bar__panel__item-left"
-  }, (0, _childrenNodeHandle.convertChildren)(children, isTop === 1 ? 'teletext-tagc-1' : 'teletext-tagc-2', {
-    name: isTop === 1 ? '置顶' : '最新'
+  }, (0, _childrenNodeHandle.convertChildren)(children, isTop === 0 ? 'teletext-tagc-1' : 'teletext-tagc-2', {
+    name: isTop === 0 ? '置顶' : '最新'
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "notice-bar__panal__item__content"
   }, content)), /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -1,26 +1,26 @@
-.notice-bar__panel__item {
-    width: calc(100vw - 110px);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 5px;
-    .notice-bar__panel__item-left {
-        display: flex;
-        align-items: center;
-        .notice-bar__panal__item__content{
-          color: #676767;
-          font-size: 12px;
-          width: 160px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          margin-left: 4px;
-        }
-    }
-    .notice-bar__panel__item-releaseTime {
-         color: #676767;
-         font-size: 11px;
-         opacity: 0.5;
-    }
-
-}
+.notice-bar__panel__item {
+    width: calc(100vw - 110px);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 5px;
+    .notice-bar__panel__item-left {
+        display: flex;
+        align-items: center;
+        .notice-bar__panal__item__content{
+          color: #676767;
+          font-size: 12px;
+          width: 160px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-left: 4px;
+        }
+    }
+    .notice-bar__panel__item-releaseTime {
+         color: #676767;
+         font-size: 11px;
+         opacity: 0.5;
+    }
+
+}

package/lib/components/notice-bar/notice-bar.js

@@ -5,10 +5,12 @@ 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 _react = _interopRequireWildcard(require("react"));
 require("./index.scss");
 var _noticeBarItem = _interopRequireDefault(require("./notice-bar-item"));
 var _excluded = ["dataList", "onClick", "icon", "children"];
+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 NoticeBar = function NoticeBar(_ref) {
   var dataList = _ref.dataList,
     _ref$onClick = _ref.onClick,
@@ -17,13 +19,45 @@ var NoticeBar = function NoticeBar(_ref) {
     children = _ref.children,
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var _otherProps = otherProps || {};
-  var stickyItems = (dataList || []).filter(function (item) {
-    return (item === null || item === void 0 ? void 0 : item.isTop) === 1;
-  });
-  var loopItems = (dataList || []).filter(function (item) {
-    return (item === null || item === void 0 ? void 0 : item.isTop) === 0;
+  //   const stickyItems = (dataList || []).filter((item) => item?.isTop === 1)
+  //   const loopItems = (dataList || []).filter((item) => item?.isTop === 0)
+
+  var _useState = (0, _react.useState)(true),
+    play = _useState[0],
+    setPlay = _useState[1];
+  var _useState2 = (0, _react.useState)([]),
+    loopItems = _useState2[0],
+    setLoopItems = _useState2[1];
+  var intervalId = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var stickyItems = dataList.filter(function (item) {
+      return item.isTop === 1;
+    });
+    setLoopItems(dataList.filter(function (item) {
+      return item.isTop === 1;
+    }));
+    var startPlay = function startPlay() {
+      if (play) {
+        setLoopItems(function (prev) {
+          var newItems = [].concat(prev);
+          newItems.push(newItems[0]);
+          newItems.shift();
+          return newItems;
+        });
+        setPlay(false);
+      }
+    };
+    intervalId.current = setInterval(startPlay, 2000);
+    return function () {
+      clearInterval(intervalId.current);
+    };
+  }, [dataList, play]);
+  var isScroll = function isScroll(index) {
+    return index === 0;
+  };
+  var stickyItems = dataList.filter(function (item) {
+    return item.isTop === 1;
   });
-  var loopItemsData = console.log('loopItemsData');
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: "notice-bar__panel"
   }, _otherProps), /*#__PURE__*/_react["default"].createElement("img", {
@@ -38,15 +72,19 @@ var NoticeBar = function NoticeBar(_ref) {
       onClick: onClick,
       children: children
     }, item));
-  }) : /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "notice-bar__panel__item-loop"
-  }, /*#__PURE__*/_react["default"].createElement("div", null, loopItems.length > 0 ? loopItems.map(function (item, index) {
-    return /*#__PURE__*/_react["default"].createElement(_noticeBarItem["default"], (0, _extends2["default"])({
+  }) : /*#__PURE__*/_react["default"].createElement("div", null), loopItems.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "notice-bar__panel-loop"
+  }, loopItems.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_noticeBarItem["default"], {
       key: index,
-      onClick: onClick,
-      children: children
-    }, item));
-  }) : /*#__PURE__*/_react["default"].createElement("div", null, "No items to display")))));
+      className: "notice-bar__panel-loop__item " + (isScroll(index) && play ? 'toUp' : ''),
+      content: item.content,
+      releaseTime: item.releaseTime,
+      isTop: item.isTop,
+      tag: item.tag,
+      onClick: onClick
+    });
+  })) : /*#__PURE__*/_react["default"].createElement("div", null, "\u6682\u65E0\u6570\u636E")));
 };
 NoticeBar.displayName = 'NoticeBar';
 var _default = exports["default"] = NoticeBar;