@dckj-npm/dc-material 0.1.357 → 0.1.358

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/member-card/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 菜单列表
+ */
+import MemberCard from './member-card';
+export type { MemberInfoModel } from './type';
+export { MemberCard };

package/es/components/member-card/index.js

@@ -0,0 +1,6 @@
+/**
+ * 菜单列表
+ */
+
+import MemberCard from "./member-card";
+export { MemberCard };

package/es/components/member-card/index.scss

@@ -0,0 +1,86 @@
+.member-card {
+  width: 100%;
+  //height: 60px;
+  border-radius: 15px;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  flex-direction: column;
+  background: white;
+  padding: 13px 20px;
+
+  .header {
+    width: 100%;
+    padding-bottom: 2px;
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+      font-weight: bold;
+      font-size: 15px;
+      color: #333333;
+      display: flex;
+      align-items: center;
+
+      .grade {
+        width: 53px;
+        height: 13px;
+        margin-left: 5px;
+      }
+    }
+
+    .btn-tag {
+      //width: 74px;
+      height: 30px;
+      border-radius: 15px;
+      font-size: 12px;
+      font-weight: bold;
+      color: #63421a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .footer {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .progress-bar-container {
+      width: 100%;
+      margin: 2px 0;
+
+      .progress-bar-background {
+        width: 100%;
+        height: 15px;
+        background-color: #FEF1E6;
+        border-radius: 10px;
+        overflow: hidden;
+      }
+
+      .progress-bar-foreground {
+        height: 100%;
+        background-color: #FF5E27;
+        border-radius: 10px;
+        transition: width 0.3s ease-in-out;
+      }
+    }
+
+    .right {
+      font-weight: 500;
+      font-size: 12px;
+      color: #999999;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .img {
+        width: 6px;
+        height: 7px;
+        margin-left: 5px;
+      }
+    }
+  }
+}

package/es/components/member-card/member-card.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.scss';
+import { MemberInfoModel } from "./type";
+declare const MemberCard: React.FC<MemberInfoModel>;
+export default MemberCard;

package/es/components/member-card/member-card.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["userName", "gradeImg", "isMaxLevel", "maxTotal", "currentNum", "isFastExpireCoupon", "discount", "handleClick", "handleCouponClick"];
+import React, { useMemo } from 'react';
+import "./index.scss";
+import arrowImg from "../../assets/icon/mine/right.png";
+var MemberCard = function MemberCard(_ref) {
+  var userName = _ref.userName,
+    gradeImg = _ref.gradeImg,
+    isMaxLevel = _ref.isMaxLevel,
+    maxTotal = _ref.maxTotal,
+    currentNum = _ref.currentNum,
+    isFastExpireCoupon = _ref.isFastExpireCoupon,
+    discount = _ref.discount,
+    _ref$handleClick = _ref.handleClick,
+    handleClick = _ref$handleClick === void 0 ? function () {} : _ref$handleClick,
+    _ref$handleCouponClic = _ref.handleCouponClick,
+    handleCouponClick = _ref$handleCouponClic === void 0 ? function () {} : _ref$handleCouponClic,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+
+  // 计算进度百分比 使用 useMemo 来模拟计算属性
+  var progressPercentage = useMemo(function () {
+    if (isMaxLevel) return 100;
+    if (maxTotal === 0) return 0; // 防止除以零错误
+    if (!maxTotal || !currentNum) return 0;
+    return (currentNum / maxTotal * 100).toFixed(2); // 保留两位小数
+  }, [isMaxLevel, maxTotal, currentNum]);
+
+  // 外层容器的宽度
+  var containerWidth = isFastExpireCoupon ? '60%' : '100%';
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "member-card"
+  }, _otherProps, {
+    onClick: handleClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left"
+  }, /*#__PURE__*/React.createElement("span", null, userName), gradeImg && /*#__PURE__*/React.createElement("img", {
+    className: "grade",
+    src: gradeImg
+  })), discount && /*#__PURE__*/React.createElement("div", {
+    className: "btn-tag"
+  }, "\u5C0A\u4EAB", discount !== null && discount !== void 0 ? discount : 0, "\u6298")), /*#__PURE__*/React.createElement("div", {
+    className: "footer"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar-container",
+    style: {
+      width: containerWidth
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar-background"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar-foreground",
+    style: {
+      width: progressPercentage + "%"
+    }
+  }))), isFastExpireCoupon && /*#__PURE__*/React.createElement("div", {
+    className: "right",
+    onClick: handleCouponClick
+  }, "\u60A8\u6709\u4F18\u60E0\u5238\u5373\u5C06\u5230\u671F", /*#__PURE__*/React.createElement("img", {
+    className: "img",
+    src: arrowImg
+  }))));
+};
+MemberCard.displayName = 'MemberCard';
+export default MemberCard;

package/es/components/member-card/type.d.ts

@@ -0,0 +1,11 @@
+export interface MemberInfoModel {
+    userName: string;
+    discount: string | number;
+    maxTotal: number;
+    currentNum: number;
+    isMaxLevel: boolean;
+    gradeImg: string;
+    isFastExpireCoupon: boolean;
+    handleClick?: () => void;
+    handleCouponClick?: () => void;
+}

package/es/components/member-card/type.js

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

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;
+  }
+
+}
+
+

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MenuListDataProps } from "./types";
+import "./menu-list-item.scss";
+declare const MenuListItem: React.FC<MenuListDataProps>;
+export default MenuListItem;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import "./menu-list-item.scss";
+var MenuListItem = function MenuListItem(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '菜单名称' : _ref$title,
+    _ref$iconUrl = _ref.iconUrl,
+    iconUrl = _ref$iconUrl === void 0 ? '' : _ref$iconUrl,
+    handleClick = _ref.handleClick;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "menu-list__panel__item",
+    onClick: handleClick
+  }, iconUrl ? /*#__PURE__*/React.createElement("div", {
+    className: "menu-list__panel__item_icon"
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    src: iconUrl
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: "menu-list__panel__item_title"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "menu-list__panel__item_right"
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"
+  }))));
+};
+MenuListItem.displayName = 'MenuListItem';
+export default MenuListItem;

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

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.scss';
+import { MenuListProps } from "./types";
+declare const MenuList: React.FC<MenuListProps>;
+export default MenuList;

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList"];
+import React from 'react';
+import "./index.scss";
+import MenuListItem from "./menu-list-item";
+var MenuList = function MenuList(_ref) {
+  var dataList = _ref.dataList,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "menu-list__panel"
+  }, _otherProps), /*#__PURE__*/React.createElement("div", {
+    className: "menu-list__panel__item-list"
+  }, dataList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(MenuListItem, {
+      key: index,
+      title: item.title,
+      iconUrl: item.iconUrl,
+      handleClick: item.handleClick
+    });
+  })));
+};
+MenuList.displayName = 'MenuList';
+export default MenuList;

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

@@ -0,0 +1,23 @@
+/**
+ * 数据
+ */
+export interface MenuListDataProps {
+    /**
+     * 菜单名称
+     */
+    title: string;
+    /**
+     * 菜单图标地址
+     */
+    iconUrl?: string;
+    /**
+     * 点击事件
+     */
+    handleClick?: Function;
+}
+export interface MenuListProps {
+    /**
+     * 数据
+     */
+    dataList?: MenuListDataProps[];
+}

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * 消息列表
+ */
+import MessageList from './message-list';
+export type { MessageListProps } from './message-list';
+export default MessageList;

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

@@ -0,0 +1,6 @@
+/**
+ * 消息列表
+ */
+
+import MessageList from "./message-list";
+export default MessageList;

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

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

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import './message-list-item.scss';
+/**
+ * 数据
+ */
+export interface DataProps {
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 图片地址
+     */
+    image?: string;
+    /**
+     * 说明
+     */
+    description?: string;
+    /**
+     * 发布时间
+     */
+    gmtCreate?: string;
+    /**
+     * 点击事件
+     */
+    onClick?: (e: any) => void;
+    /**
+     * 是否已读
+     */
+    isRead?: boolean;
+}
+declare const MessageListItem: React.FC<DataProps>;
+export default MessageListItem;