@aloudata/aloudata-design 1.10.13 → 2.0.0-beta.1

package/dist/Menu/style/index.less

@@ -1,165 +1,104 @@
 @import '../../style/index.less';
-@import '../../Icon/index.less';
-@import './dropdown.less';
 
-.ant-menu-light.ald-menu.ant-menu {
-  &.ant-menu-root.ant-menu-vertical {
-    border: none;
-  }
+//  Menu 和子menu的 ul样式
+.menu-content {
+  background: var(--alias-colors-bg-skeleton-subtler, #fff);
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
 
-  .ant-menu-item,
-  .ant-menu-submenu,
-  .ant-menu-item-selected {
+  .ant-menu-item-divider,
+  .ant-menu-submenu-title-divider {
+    background-color: var(--alias-colors-border-subtle, #f3f4f6);
     margin: 0;
-    height: initial;
-    padding: 6px 8px;
-    line-height: 20px;
-    font-size: 13px;
-    width: 100%;
-    border-radius: 0;
-    border: none;
-    background-color: @BG100;
-    color: @NL0;
-    transition: none;
-    cursor: pointer;
-
-    &:hover {
-      background-color: @BG90;
-    }
-
-    &:active {
-      background-color: none;
-    }
-
-    &:not(.ant-menu-item-selected):active {
-      background-color: @BG90;
-    }
-
-    &.ant-menu-item-disabled {
-      color: @NL50 !important;
-      transition: none;
-      background-color: @BG100 !important;
-      cursor: default;
-    }
-
-    .ant-menu-submenu-title {
-      line-height: 20px;
-      font-size: 13px;
-      width: 100%;
-      padding: 0;
-      height: initial;
-      margin: 0;
-
-      &:hover {
-        background: none;
-      }
-
-      .ant-menu-submenu-expand-icon {
-        width: initial;
-        right: 8px;
-      }
-    }
   }
 
-  .ant-menu-submenu {
-    padding: 6px 0;
-
-    .ant-menu-submenu-title {
-      padding: 0 8px;
-    }
-  }
-
-  .ant-menu-title-content {
-    line-height: 20px;
-    font-size: 13px;
-    width: 100%;
-    padding: 0;
-    height: initial;
-    margin: 0;
-
-    &:hover {
-      background: none;
-    }
-  }
-}
-
-.ant-menu-submenu.ant-menu-submenu.ant-menu-submenu-popup.ant-menu {
-  .ant-menu-vertical {
-    border: 1px solid @BG70;
-    border-radius: 2px;
-    box-shadow: @shadow-L;
+  .ant-menu-item-selected {
+    background-color: unset;
   }
 
+  // menu项样式
   .ant-menu-item,
-  .ant-menu-submenu,
-  .ant-menu-item-selected {
-    margin: 0;
-    height: initial;
-    padding: 6px 8px;
+  .ant-menu-submenu .ant-menu-submenu-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--alias-padding-100, 8px) var(--alias-padding-150, 12px);
+    color: var(--alias-colors-text-default, #1f2937);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
     line-height: 20px;
-    font-size: 13px;
-    width: 100%;
+    height: auto;
+    margin: 0;
+    width: auto;
+    gap: var(--alias-spacing-50, 4px);
     border-radius: 0;
-    border: none;
-    background-color: @BG100;
-    color: @NL0;
-    transition: none;
 
     &:hover {
-      background-color: @BG90 !important;
-    }
-
-    &:active {
-      background-color: none;
+      background-color: unset;
     }
 
-    &:not(.ant-menu-item-selected):active {
-      background-color: @BG90;
+    .ant-dropdown-menu-item-icon {
+      font-size: 20px;
+      margin: 0;
     }
 
-    &.ant-menu-item-disabled {
-      color: @NL50 !important;
-      transition: none;
-      background-color: @BG100 !important;
-      cursor: default;
+    .ant-menu-title-content.ant-menu-title-content {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      margin-left: 0;
+      flex: 1;
     }
 
-    .ant-menu-submenu-title {
-      line-height: 20px;
-      font-size: 13px;
-      width: 100%;
-      padding: 0;
-      height: initial;
-      margin: 0;
-
-      &:hover {
-        background: none;
-      }
+    svg {
+      flex-shrink: 0;
     }
   }
 
   .ant-menu-submenu {
-    padding: 6px 0;
+    border-radius: 0;
+  }
+
+  .ant-menu-item.ant-menu-item-disabled {
+    cursor: default;
+    color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
 
-    .ant-menu-submenu-title {
-      padding: 0 8px;
+    &:hover {
+      background-color: var(--alias-colors-bg-transp, rgba(0, 0, 0, 0));
     }
   }
 
-  .ant-menu.ant-menu-sub {
-    padding: 0;
+  .ant-menu-item:hover,
+  .ant-menu-submenu:hover,
+  .ant-menu-submenu.ant-menu-submenu-active {
+    background-color: var(
+      --alias-colors-bg-interaction-hover,
+      rgba(0, 0, 0, 0.05)
+    );
   }
+}
 
-  .ant-menu-title-content {
-    line-height: 20px;
-    font-size: 13px;
-    width: 100%;
-    padding: 0;
-    height: initial;
-    margin: 0;
+// 容器样式
+.menu-wrap {
+  border: 1px solid var(--alias-colors-border-strong, #d1d5db);
+  border-radius: var(--alias-radius-75, 6px);
+  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05),
+    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
 
-    &:hover {
-      background: none;
-    }
+// menu菜单
+.ant-menu-root.ant-menu {
+  border: none;
+  .menu-content();
+}
+
+.ant-menu-submenu.ant-menu-submenu-popup {
+  .menu-wrap();
+  // 二级菜单中的ul
+  .ant-menu-sub {
+    .menu-content();
   }
 }

package/dist/Modal/index.d.ts

@@ -18,7 +18,7 @@ export interface ModalProps extends Omit<AntdModalProps, 'okButtonProps' | 'canc
     okType?: ButtonType;
     paddingLess?: boolean;
     virtualScrollBar?: boolean;
-    hasHeaderBottomBorder?: boolean;
+    hideHeaderBottomBorder?: boolean;
 }
 export interface ModalFuncProps extends Omit<AntdModalFuncProps, 'okButtonProps' | 'cancelButtonProps' | 'okType' | 'icon'> {
     cancelButtonProps?: IButtonProps;

package/dist/Modal/index.js

@@ -1,6 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _excluded = ["className", "type", "loading", "size", "disabled", "shape"],
-  _excluded2 = ["className", "children", "okType", "width", "closeIcon", "subTitle", "okButtonProps", "cancelButtonProps", "okText", "cancelText", "icon", "title", "paddingLess", "virtualScrollBar", "hasHeaderBottomBorder"],
+  _excluded2 = ["className", "children", "okType", "width", "closeIcon", "subTitle", "okButtonProps", "cancelButtonProps", "okText", "cancelText", "icon", "title", "paddingLess", "hideHeaderBottomBorder", "virtualScrollBar"],
   _excluded3 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
   _excluded4 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
   _excluded5 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
@@ -20,7 +20,7 @@ import useModal from 'antd/lib/modal/useModal/index';
 import classNames from 'classnames';
 import React from 'react';
 import { btnPrefix, getButtonSizeClass, getButtonType, getDangerStatus, getShape } from "../Button";
-import { AlertTriangleDuotone, CancelCircleDuotone, CheckCircleDuotone, CloseLLine, InfoCircleDuotone } from "../Icon";
+import { AttentionTriangleLightLine, CheckCircleLightLine, CloseLLine, InformationCircleLightLine } from "../Icon";
 import IconButton from "../IconButton";
 import ScrollArea from "../ScrollArea";
 
@@ -49,18 +49,20 @@ function getButtonProps(buttonProps, defaultBtnType, okType) {
     shape: getShape(shape)
   });
 }
-var ModalTitle = function ModalTitle(_ref) {
+var ModalTitle = function ModalTitle(_ref, type) {
   var icon = _ref.icon,
     title = _ref.title,
     subTitle = _ref.subTitle;
   return /*#__PURE__*/React.createElement("div", {
     className: 'ald-modal-title-container'
-  }, icon, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('ald-modal-icon-container', _defineProperty({}, "ald-modal-cion-".concat(type, "-container"), type))
+  }, icon), /*#__PURE__*/React.createElement("div", {
     className: 'ald-modal-text-container'
   }, title && /*#__PURE__*/React.createElement("div", {
-    className: 'title'
+    className: 'ald-modal-text-title'
   }, title), subTitle && /*#__PURE__*/React.createElement("div", {
-    className: 'subTitle'
+    className: 'ald-modal-text-sub-title'
   }, subTitle)));
 };
 var OriginModal = function OriginModal(props) {
@@ -81,30 +83,19 @@ var OriginModal = function OriginModal(props) {
     icon = props.icon,
     title = props.title,
     paddingLess = props.paddingLess,
+    hideHeaderBottomBorder = props.hideHeaderBottomBorder,
     virtualScrollBar = props.virtualScrollBar,
-    _props$hasHeaderBotto = props.hasHeaderBottomBorder,
-    hasHeaderBottomBorder = _props$hasHeaderBotto === void 0 ? false : _props$hasHeaderBotto,
     restProps = _objectWithoutProperties(props, _excluded2);
   return /*#__PURE__*/React.createElement(AntdModal, _extends({}, restProps, {
     title: ModalTitle({
       icon: icon,
       title: title,
       subTitle: subTitle
-    })
-    // title={
-    //   <div className={'ald-modal-title-container'}>
-    //     {icon}
-    //     <div className={'ald-modal-text-container'}>
-    //       {title && <div className={'title'}>{title}</div>}
-    //       {subTitle && <div className={'subTitle'}>{subTitle}</div>}
-    //     </div>
-    //   </div>
-    // }
-    ,
+    }),
     className: classNames('ald-modal', className, {
       'ald-modal-padding-less': paddingLess,
       'ald-modal-virtual-scroll-bar': virtualScrollBar,
-      'ald-modal-header-bottom-border': hasHeaderBottomBorder
+      'ald-modal-show-header-bottom-border': hideHeaderBottomBorder
     }),
     okButtonProps: getButtonProps(okButtonProps, 'primary', okType),
     cancelButtonProps: getButtonProps(cancelButtonProps, 'secondary'),
@@ -113,10 +104,9 @@ var OriginModal = function OriginModal(props) {
     width: width || DEFAULT_WIDTH,
     closeIcon: closeIcon || /*#__PURE__*/React.createElement(IconButton, {
       icon: /*#__PURE__*/React.createElement(CloseLLine, {
-        color: "#171717",
         size: 20
       }),
-      size: 'middle'
+      size: "middle"
     })
   }), virtualScrollBar ? /*#__PURE__*/React.createElement(ScrollArea, {
     className: 'ald-modal-body-wrap',
@@ -146,14 +136,13 @@ Modal.info = function infoFn(props) {
     width: width || DEFAULT_WIDTH,
     className: classNames('ald-modal', className),
     title: ModalTitle({
-      icon: /*#__PURE__*/React.createElement(InfoCircleDuotone, {
-        size: 32,
-        color: '#3271C9',
-        className: "ald-modal-close"
+      icon: /*#__PURE__*/React.createElement(InformationCircleLightLine, {
+        size: 24,
+        color: '#2986F4'
       }),
       title: title,
       subTitle: subTitle
-    }),
+    }, 'info'),
     okText: okText,
     cancelText: cancelText
   }, restProps));
@@ -179,14 +168,14 @@ Modal.success = function successFn(props) {
     width: width || DEFAULT_WIDTH,
     className: classNames('ald-modal', className),
     title: ModalTitle({
-      icon: /*#__PURE__*/React.createElement(CheckCircleDuotone, {
+      icon: /*#__PURE__*/React.createElement(CheckCircleLightLine, {
         fill: "#fff",
-        color: "#16B667",
-        size: 32
+        color: "#22C55E",
+        size: 24
       }),
       title: title,
       subTitle: subTitle
-    }),
+    }, 'success'),
     okText: okText,
     cancelText: cancelText
   }, restProps));
@@ -212,14 +201,14 @@ Modal.error = function errorFn(props) {
     width: width || DEFAULT_WIDTH,
     className: classNames('ald-modal', className),
     title: ModalTitle({
-      icon: /*#__PURE__*/React.createElement(CancelCircleDuotone, {
-        color: "#D64343",
+      icon: /*#__PURE__*/React.createElement(AttentionTriangleLightLine, {
+        color: "#EF4444",
         fill: '#fff',
-        size: 32
+        size: 24
       }),
       title: title,
       subTitle: subTitle
-    }),
+    }, 'error'),
     okText: okText,
     cancelText: cancelText
   }, restProps));
@@ -246,13 +235,13 @@ Modal.warning = function modalWarn(props) {
     // className: classNames('ald-modal-warning', className),
     className: classNames('ald-modal ald-modal-warning', className),
     title: ModalTitle({
-      icon: /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
-        color: "#FFB01F",
-        size: 32
+      icon: /*#__PURE__*/React.createElement(AttentionTriangleLightLine, {
+        color: "#EAB308",
+        size: 24
       }),
       title: title,
       subTitle: subTitle
-    }),
+    }, 'warning'),
     okText: okText,
     cancelText: cancelText
   }, restProps));
@@ -278,14 +267,14 @@ Modal.confirm = function confirmFn(props) {
     width: width || DEFAULT_WIDTH,
     className: classNames('ald-modal', className),
     title: ModalTitle({
-      icon: /*#__PURE__*/React.createElement(InfoCircleDuotone, {
-        size: 32,
-        color: '#3271C9',
+      icon: /*#__PURE__*/React.createElement(InformationCircleLightLine, {
+        size: 24,
+        color: '#2986F4',
         className: "ald-modal-close"
       }),
       title: title,
       subTitle: subTitle
-    }),
+    }, 'confirm'),
     okText: okText,
     cancelText: cancelText
   }, restProps));

package/dist/Modal/style/index.less

@@ -1,195 +1,7 @@
-@import '../../IconButton/style/index.less';
 @import '../../style/index.less';
+@import '../../IconButton/style/index.less';
 @import '../../ScrollArea/style/index.less';
 @import '../../Button/style/index.less';
 @import './polyfill/index.less';
-
-.ald-modal.ald-modal {
-  animation-duration: 10ms !important;
-  // 移除缩放效果
-  &.ant-zoom-enter,
-  &.ant-zoom-leave {
-    animation-duration: 10ms !important;
-  }
-
-  .ant-modal-content {
-    padding: 0;
-    box-shadow: none;
-    border-radius: 4px;
-    border: 1px solid @BG60;
-    overflow: hidden;
-
-    .ant-modal-body {
-      min-height: 130px;
-      max-height: 68vh;
-      line-height: 20px;
-      font-size: 13px;
-      overflow-y: auto;
-      padding: 16px 20px;
-    }
-  }
-
-  .ald-modal-close {
-    position: relative;
-    // top: 5px;
-    // left: -4px;
-  }
-
-  .ald-modal-title-container {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .ald-modal-text-container {
-      // margin-left: 12px;
-      flex: 1;
-    }
-
-    .title {
-      color: @NL0;
-      font-weight: 600;
-      font-size: 16px;
-      line-height: 24px;
-    }
-
-    .subTitle {
-      margin-top: 4px;
-      color: @NL40;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 16px;
-    }
-  }
-
-  .ant-modal-header {
-    padding: 16px 20px;
-    margin-bottom: 0;
-
-    .ant-modal-title {
-      width: 95%;
-      color: @NL0;
-      font-weight: 600;
-      font-size: 16px;
-      font-family: 'PingFang SC', sans-serif;
-      font-style: normal;
-      line-height: 24px;
-    }
-  }
-
-  &.ald-modal-virtual-scroll-bar {
-    .ant-modal-body {
-      overflow: hidden;
-      padding: 0;
-    }
-
-    .ald-modal-body-wrap {
-      .ald-modal-body-wrap-inner {
-        max-height: 68vh;
-        padding: 0 23px;
-      }
-    }
-  }
-
-  &.ald-modal-padding-less {
-    .ant-modal-body {
-      padding: 0;
-    }
-  }
-
-  .ant-modal-footer {
-    position: relative;
-    margin-top: 0;
-    padding: 12px 20px;
-    background: #f4f4f4;
-
-    .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
-      margin-bottom: 0;
-      margin-left: 12px;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background-color: var(--colors-gray-300, #e8e8e8);
-    }
-  }
-
-  .ant-modal-close-x {
-    width: 24px;
-    background-color: #fff;
-  }
-}
-
-.ald-modal-header-bottom-border {
-  .ant-modal-header {
-    border-bottom: 1px solid #dbdbdb;
-  }
-}
-
-.ald-modal-padding-less {
-  .ant-modal-content {
-    .ant-modal-body {
-      .ald-modal-body-wrap {
-        .ald-modal-body-wrap-inner {
-          padding: 0;
-        }
-      }
-    }
-  }
-}
-
-.ald-modal.ant-modal-confirm {
-  .ant-modal-body {
-    padding-bottom: 12px !important;
-  }
-
-  .ant-modal-confirm-body > .i-icon {
-    & + .ant-modal-confirm-title {
-      flex: 1;
-      overflow: initial;
-      margin-inline-start: 12px;
-
-      & + .ant-modal-confirm-content {
-        margin-block-start: 16px;
-        margin-left: 28px;
-      }
-    }
-  }
-
-  .ant-modal-confirm-body {
-    display: block;
-
-    > span.anticon {
-      display: none;
-
-      + .ant-modal-confirm-title + .ant-modal-confirm-content {
-        margin-left: 40px;
-        margin-top: 4px;
-      }
-    }
-  }
-
-  .ant-modal-confirm-btns {
-    margin-block-start: 16px;
-  }
-}
-
-// .ald-modal.ald-modal-warning {
-//   .ant-modal-confirm-btns {
-//     .ald-btn {
-//       background-color: @SB40;
-//       border-color: @SB40;
-
-//       &:hover,
-//       &:active,
-//       &:focus {
-//         background-color: @SB40;
-//         border-color: @SB40;
-//       }
-//     }
-//   }
-// }
+@import './modal.less';
+@import './modalConfirm.less';