@dckj-npm/dc-material 0.1.147 → 0.1.149

package/es/components/goods-card-list/goods-card-list.js

@@ -0,0 +1,156 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList", "maxSales", "onClick"];
+import React, { useEffect, useState } from 'react';
+import { debounce } from "../../utils/debounce";
+import Carousel from "../carousel/carousel";
+import "./goods-card-list.scss";
+var GoodsCardList = function GoodsCardList(_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 _useState = useState([]),
+    positions = _useState[0],
+    setPositions = _useState[1];
+  var _useState2 = useState(0),
+    columnWidth = _useState2[0],
+    setColumnWidth = _useState2[1];
+  var _useState3 = useState(0),
+    maxContainerHeight = _useState3[0],
+    setMaxContainerHeight = _useState3[1];
+  useEffect(function () {
+    var updateLayout = function updateLayout() {
+      var container = document.querySelector('.waterfall-container');
+      if (container) {
+        var itemElements = document.querySelectorAll('.waterfall-item');
+        // 横向间距
+        var horizontalGap = 12;
+        // 纵向间距
+        var verticalGap = 10;
+        var containerWidth = container.offsetWidth;
+        // 每列宽度为容器宽度的一半减去间距
+        var calculatedColumnWidth = (containerWidth - horizontalGap) / 2;
+        setColumnWidth(calculatedColumnWidth);
+        // 两列布局
+        var columnHeights = Array.from({
+          length: 2
+        }).fill(0);
+        var newPositions = [];
+        // 循环计算所有的子元素的信息
+        itemElements.forEach(function (item) {
+          var _item$getBoundingClie = item.getBoundingClientRect(),
+            height = _item$getBoundingClie.height;
+          // 找到最短的那一列
+          var minHeight = Math.min.apply(Math, columnHeights);
+          // 获取该列的索引
+          var columnIndex = columnHeights.indexOf(minHeight);
+          var left = columnIndex * (calculatedColumnWidth + horizontalGap);
+          var top = columnHeights[columnIndex];
+          // 存储元素的定位
+          newPositions.push({
+            left: left,
+            top: top
+          });
+          // 更新该列的高度
+          columnHeights[columnIndex] += height + verticalGap;
+        });
+        // 更新位置
+        setPositions(newPositions);
+        setMaxContainerHeight(Math.max.apply(Math, columnHeights));
+      }
+    };
+    var debouncedUpdateLayout = dataList.length < 15 ? updateLayout : debounce(updateLayout, 200);
+    // 图片加载完成后更新布局
+    var handleImageLoad = function handleImageLoad() {
+      debouncedUpdateLayout();
+    };
+    // 初始化布局
+    debouncedUpdateLayout();
+    // 监听图片加载事件，以确保所有图片都加载完后再更新布局
+    var images = document.querySelectorAll('.waterfall-container img');
+    images.forEach(function (img) {
+      // 如果图片已经加载完成（缓存中加载），则立即更新布局
+      if (img.complete) {
+        handleImageLoad();
+      } else {
+        // 如果图片未加载完成，监听加载事件
+        img.addEventListener('load', handleImageLoad);
+      }
+    });
+
+    // 窗口变化时更新布局
+    window.addEventListener('resize', debouncedUpdateLayout);
+    return function () {
+      // 清理事件监听
+      window.removeEventListener('resize', debouncedUpdateLayout);
+      images.forEach(function (img) {
+        return img.removeEventListener('load', handleImageLoad);
+      });
+    };
+  },
+  // 当 dataList 变化时重新计算
+  [dataList]);
+  var resolveResultDesc = function resolveResultDesc(desc) {
+    var htmlString = "<div>" + desc + "</div>";
+    // 创建一个虚拟的 DOM 容器
+    var tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlString;
+    // 提取文本
+    return tempDiv.textContent || tempDiv.innerText;
+  };
+  var resultStyle = _extends({}, otherProps.style || {}, {
+    height: maxContainerHeight + 20 + "px"
+  });
+  var _otherProps = _extends({}, otherProps || {}, {
+    style: resultStyle
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "card-list-goods__container waterfall-container",
+    style: {
+      height: maxContainerHeight + 20 + "px"
+    }
+  }, _otherProps), dataList.map(function (item, index) {
+    var _positions$index, _positions$index2;
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.key,
+      className: "card-list-goods__item waterfall-item",
+      onClick: function onClick() {
+        return _onClick(item);
+      },
+      style: {
+        left: ((_positions$index = positions[index]) === null || _positions$index === void 0 ? void 0 : _positions$index.left) + "px",
+        top: ((_positions$index2 = positions[index]) === null || _positions$index2 === void 0 ? void 0 : _positions$index2.top) + "px",
+        width: columnWidth + "px"
+      }
+    }, 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))));
+  }));
+};
+GoodsCardList.displayName = 'GoodsCardList';
+export default GoodsCardList;

package/es/components/goods-card-list/goods-card-list.scss

@@ -0,0 +1,112 @@
+.card-list-goods__container {
+  position: relative;
+  width: 100%;
+
+  & > .card-list-goods__item {
+    position: absolute;
+    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;
+      }
+    }
+
+    & > .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

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

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

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

package/es/components/goods-card-list/types.d.ts

@@ -0,0 +1,45 @@
+export interface GoodsCardListProps {
+    /**
+     * 卡片列表数据
+     */
+    dataList: GoodsCardListItemProps[];
+    /**
+     * 最大销量
+     */
+    maxSales?: number;
+    /**
+     * 点击事件
+     * @param item
+     */
+    onClick?: (item: GoodsCardListItemProps) => void;
+}
+export interface GoodsCardListItemProps {
+    /**
+     * 唯一标识
+     */
+    key: string;
+    /**
+     * 缩略图列表
+     */
+    imageList: string[];
+    /**
+     * 标题
+     */
+    title: string;
+    /**
+     * 简介
+     */
+    desc: string;
+    /**
+     * 价格
+     */
+    price: string;
+    /**
+     * 促销价格
+     */
+    activePrice?: string;
+    /**
+     * 销量
+     */
+    sales: number;
+}

package/es/components/goods-card-list/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/grid-nav/grid-nav.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface GridNavProps {
+    dataSourceSetting: [];
+    columns: number;
+    iconSize: string;
+    fontWeight: string;
+    fontSize: number;
+    fontColor: string;
+    lineHeight: string;
+    lineNum: number;
+}
+declare const GridNav: React.ForwardRefExoticComponent<GridNavProps & React.RefAttributes<any>>;
+export default GridNav;

package/es/components/grid-nav/grid-nav.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { forwardRef } from 'react';
+import gridNavImg from "../../assets/icon/grid-nav/right.png";
+var ExampleComponent = function ExampleComponent(props, ref) {
+  var columns = props.columns,
+    _props$iconSize = props.iconSize,
+    iconSize = _props$iconSize === void 0 ? 'medium' : _props$iconSize,
+    _props$fontWeight = props.fontWeight,
+    fontWeight = _props$fontWeight === void 0 ? 'normal' : _props$fontWeight,
+    _props$fontSize = props.fontSize,
+    fontSize = _props$fontSize === void 0 ? 12 : _props$fontSize,
+    _props$fontColor = props.fontColor,
+    fontColor = _props$fontColor === void 0 ? '#222' : _props$fontColor,
+    _props$lineHeight = props.lineHeight,
+    lineHeight = _props$lineHeight === void 0 ? 'auto' : _props$lineHeight,
+    _props$lineNum = props.lineNum,
+    lineNum = _props$lineNum === void 0 ? 1 : _props$lineNum,
+    dataSourceSetting = props.dataSourceSetting;
+  console.log('dataSourceSetting的值为', dataSourceSetting);
+
+  // 设置图标尺寸
+  var iconStyle = {};
+  switch (iconSize) {
+    case 'large':
+      iconStyle = {
+        width: '64px',
+        height: '64px'
+      };
+      break;
+    case 'medium':
+      iconStyle = {
+        width: '48px',
+        height: '48px'
+      };
+      break;
+    case 'small':
+      iconStyle = {
+        width: '32px',
+        height: '32px'
+      };
+      break;
+    default:
+      iconStyle = {
+        width: '48px',
+        height: '48px'
+      };
+  }
+
+  // 设置字重
+  var fontStyle = {
+    fontWeight: fontWeight,
+    fontSize: fontSize,
+    color: fontColor,
+    lineHeight: lineHeight
+  };
+
+  // 设置行数
+  var fontLineStyle = {};
+  fontLineStyle = {
+    maxWidth: '80px',
+    overflow: 'hidden',
+    // whiteSpace: lineNum === 1 ? 'nowrap' : 'none',
+    textOverflow: 'ellipsis',
+    display: '-webkit-box',
+    WebkitLineClamp: lineNum,
+    WebkitBoxOrient: 'vertical'
+  };
+  var fontAllStyle = _extends({}, fontStyle, fontLineStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "dc-grid-nav",
+    style: {
+      gridTemplateColumns: "repeat(" + columns + ", 1fr)"
+    }
+  }, dataSourceSetting.map(function (item, index) {
+    var _item$rightText;
+    return item ? /*#__PURE__*/React.createElement("a", {
+      key: index,
+      href: item.link || '#',
+      className: "grid-item"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: item.icon || 'https://qcloudimg.tencent-cloud.cn/raw/fe54a986a821473655ba20afe30a543a.png',
+      alt: item.title || '导航',
+      style: iconStyle,
+      className: "dc-grid-nav-item-img"
+    }), /*#__PURE__*/React.createElement("span", {
+      style: fontAllStyle,
+      className: "dc-grid-nav-item-title"
+    }, item.title || '无标题'), item.rightText ? /*#__PURE__*/React.createElement("div", {
+      className: "dc-grid-nav-item-right"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: gridNavImg,
+      className: "dc-grid-nav-item-right-img"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "dc-grid-nav-item-right-title"
+    }, (_item$rightText = item.rightText) !== null && _item$rightText !== void 0 ? _item$rightText : '右侧')) : '') : null;
+  }));
+};
+var GridNav = /*#__PURE__*/forwardRef(ExampleComponent);
+GridNav.displayName = 'GridNav';
+export default GridNav;

package/es/components/grid-nav/index.d.ts

@@ -0,0 +1,3 @@
+import GridNav from "./grid-nav";
+export type { GridNavProps } from './grid-nav';
+export default GridNav;

package/es/components/grid-nav/index.js

@@ -0,0 +1,2 @@
+import GridNav from "./grid-nav";
+export default GridNav;

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

@@ -0,0 +1,50 @@
+/* write style here */
+.dc-grid-nav {
+  width: 100%;
+  display: grid;
+  // gap: 14px 38px;
+  margin: 0;
+  grid-row-gap: 14px;
+  &-item {
+    &-title {
+      color: #222222;
+    }
+    &-right {
+      position: absolute;
+      top: -10px;
+      right: 2px;
+      z-index: 9;
+      &-title {
+        font-size: 8px;
+        color: #fff;
+        position: absolute;
+        left: 8px;
+        top: 2px;
+        z-index: 10;
+      }
+      &-img {
+        width: 32px;
+        height: 19.5px;
+      }
+    }
+  }
+}
+
+.grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  text-decoration: none;
+  color: #333;
+  position: relative;
+
+  img {
+    object-fit: cover;
+    margin-bottom: 3px;
+  }
+
+  &:hover {
+    color: #007bff;
+  }
+}

package/es/components/integral-task/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 标签tag
+ */
+import IntegralTask from './integral-task';
+export type { IntegralTaskProps } from './integral-task';
+export default IntegralTask;

package/es/components/integral-task/index.js

@@ -0,0 +1,5 @@
+/**
+ * 标签tag
+ */
+import IntegralTask from "./integral-task";
+export default IntegralTask;

package/es/components/integral-task/index.scss

@@ -0,0 +1,35 @@
+.integral-task__container {
+  padding: 0 12px;
+  &__item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &__left {
+      display: flex;
+      align-items: center;
+      &__img {
+        width: 53px;
+        height: 53px;
+        margin-right: 9px;
+      }
+      &__content {
+        &__title {
+          font-size: 15px;
+          color: #333333;
+        }
+        &__integral {
+          display: flex;
+          align-items: center;
+          &--icon {
+            width: 15px;
+            height: 15px;
+          }
+          &--number {
+            font-size: 12px;
+            color: #EA6A3D;
+          }
+        }
+      }
+    }
+  }
+}

package/es/components/integral-task/integral-task.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import './index.scss';
+interface DataProps {
+    /**
+     * 任务名称
+     */
+    name: string;
+    /**
+     * 积分
+     */
+    integral: number;
+    /**
+     * 状态 0 未完成 1 已完成
+     */
+    status: number;
+}
+export interface IntegralTaskProps {
+    /**
+     * 任务名称
+     */
+    list: DataProps[];
+    /**
+     * 图标
+     */
+    icon: string;
+    /**
+     * 图片
+     */
+    images: string[];
+    /**
+     * 完成文案
+     */
+    completeLabel: string;
+    /**
+     * 未完成文案
+     */
+    undoneLabel: string;
+}
+declare const IntegralTask: React.FC<IntegralTaskProps>;
+export default IntegralTask;

package/es/components/integral-task/integral-task.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["list", "icon", "images", "undoneLabel", "completeLabel", "children"];
+import * as React from 'react';
+import "./index.scss";
+import { convertChildren } from "../../utils/children-node-handle";
+var Status = /*#__PURE__*/function (Status) {
+  Status[Status["undone"] = 0] = "undone";
+  Status[Status["complete"] = 1] = "complete";
+  return Status;
+}(Status || {});
+var IntegralTask = function IntegralTask(_ref) {
+  var list = _ref.list,
+    icon = _ref.icon,
+    images = _ref.images,
+    undoneLabel = _ref.undoneLabel,
+    completeLabel = _ref.completeLabel,
+    children = _ref.children,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  console.log(images, 'images');
+  images = images || [];
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "integral-task__container"
+  }, otherProps), list && list.length ? list.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "integral-task__container__item"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "integral-task__container__item__left"
+    }, convertChildren(children, 'image-left', {
+      src: images[index % images.length],
+      className: 'integral-task__container__item__left__img'
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "integral-task__container__item__left__content"
+    }, convertChildren(children, 'title', {
+      children: item.name,
+      className: 'integral-task__container__item__left__content__title'
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "integral-task__container__item__left__content__integral"
+    }, icon ? convertChildren(children, 'image-icon', {
+      src: icon,
+      className: 'integral-task__container__item__left__content__integral--icon'
+    }) : '', convertChildren(children, 'integral', {
+      children: item.integral + ' 积分',
+      className: 'integral-task__container__item__left__content__integral--number'
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "integral-task__container__item__right"
+    }, convertChildren(children, 'button2', {
+      children: item.integral + ' 积分',
+      name: item.status === Status.undone ? undoneLabel : completeLabel,
+      color: Status[item.status]
+    })));
+  }) : '暂无数据');
+};
+export default IntegralTask;

package/es/components/menu-list/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 菜单列表
+ */
+import MenuList from './menu-list';
+export type { MenuListDataProps, MenuListProps } from './types';
+export default MenuList;

package/es/components/menu-list/index.js

@@ -0,0 +1,6 @@
+/**
+ * 菜单列表
+ */
+
+import MenuList from "./menu-list";
+export default MenuList;

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

@@ -0,0 +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;
+  }
+
+}
+
+