fix: 优化全局 Message & Notification 展示效果

km-console/packages/config-manager-fe/src/components/Message/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { IconFont } from '@knowdesign/icons';
+import { message } from 'knowdesign';
+import { ArgsProps, ConfigOnClose } from 'knowdesign/es/basic/message';
+
+type ConfigContent = React.ReactNode;
+type ConfigDuration = number | (() => void);
+type JointContent = ConfigContent | ArgsProps;
+
+message.config({
+  top: 16,
+});
+
+function isArgsProps(content: JointContent): content is ArgsProps {
+  return Object.prototype.toString.call(content) === '[object Object]' && !!(content as ArgsProps).content;
+}
+
+const openMessage = (
+  type: 'info' | 'success' | 'warning' | 'error',
+  content: JointContent,
+  duration?: ConfigDuration,
+  onClose?: ConfigOnClose
+) => {
+  if (isArgsProps(content)) {
+    message[type]({
+      icon: <IconFont type={`icon-${type}-circle`} />,
+      ...content,
+    });
+  } else {
+    message[type]({
+      icon: <IconFont type={`icon-${type}-circle`} />,
+      content,
+      duration,
+      onClose,
+    });
+  }
+};
+
+const customMessage = {
+  info(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
+    openMessage('info', content, duration, onClose);
+  },
+  success(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
+    openMessage('success', content, duration, onClose);
+  },
+  warning(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
+    openMessage('warning', content, duration, onClose);
+  },
+  error(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
+    openMessage('error', content, duration, onClose);
+  },
+};
+
+export default customMessage;

km-console/packages/config-manager-fe/src/components/Notification/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { notification } from 'knowdesign';
+import { ArgsProps } from 'knowdesign/es/basic/notification';
+import { IconFont } from '@knowdesign/icons';
+
+notification.config({
+  top: 16,
+  duration: 3,
+});
+
+const open = (type: 'info' | 'success' | 'warning' | 'error', content: ArgsProps) => {
+  notification[type]({
+    icon: <IconFont type={`icon-${type}-circle`} />,
+    ...content,
+  });
+};
+
+const customNotification = {
+  info(content: ArgsProps) {
+    open('info', content);
+  },
+  success(content: ArgsProps) {
+    open('success', content);
+  },
+  warning(content: ArgsProps) {
+    open('warning', content);
+  },
+  error(content: ArgsProps) {
+    open('error', content);
+  },
+};
+
+export default customNotification;

km-console/packages/config-manager-fe/src/constants/axiosConfig.ts

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 
-import { notification, Utils } from 'knowdesign';
+import { Utils } from 'knowdesign';
+import notification from '@src/components/Notification';
 
 export const goLogin = () => {
   if (!window.location.pathname.toLowerCase().startsWith('/login')) {
@@ -37,10 +38,9 @@ serviceInstance.interceptors.response.use(
   (config: any) => {
     const res: { code: number; message: string; data: any } = config.data;
     if (res.code !== 0 && res.code !== 200) {
-      const desc = res.message;
       notification.error({
-        message: desc,
-        duration: 3,
+        message: '错误信息',
+        description: res.message,
       });
       throw res;
     }

km-console/packages/config-manager-fe/src/pages/ConfigManage/index.tsx

@@ -1,20 +1,6 @@
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import {
-  Button,
-  Form,
-  Input,
-  Select,
-  Switch,
-  Modal,
-  message,
-  ProTable,
-  Drawer,
-  Space,
-  Divider,
-  Tooltip,
-  AppContainer,
-  Utils,
-} from 'knowdesign';
+import { Button, Form, Input, Select, Switch, Modal, ProTable, Drawer, Space, Divider, Tooltip, AppContainer, Utils } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import { PlusOutlined } from '@ant-design/icons';
 import moment from 'moment';
@@ -81,7 +67,7 @@ const EditConfigDrawer = forwardRef((_, ref) => {
         // 如果内容可以格式化为 JSON，进行处理
         config.value = JSON.stringify(JSON.parse(config.value), null, 2);
       } catch (_) {
-        return;
+        //
       }
     }
     form.setFieldsValue({ ...config, status: config.status === 1 });
@@ -476,7 +462,7 @@ export default () => {
               rowKey: 'id',
               dataSource: data,
               paginationProps: pagination,
-              columns,
+              columns: columns as any,
               lineFillColor: true,
               attrs: {
                 onChange: onTableChange,

km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx

@@ -11,7 +11,6 @@ import {
   Transfer,
   Row,
   Col,
-  message,
   Tooltip,
   Spin,
   AppContainer,
@@ -19,6 +18,7 @@ import {
   Popover,
   IconFont,
 } from 'knowdesign';
+import message from '@src/components/Message';
 import moment from 'moment';
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
 import { defaultPagination } from '@src/constants/common';

km-console/packages/config-manager-fe/src/pages/UserManage/UserTabContent.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Form, ProTable, Select, Button, Input, Modal, message, Drawer, Space, Divider, AppContainer, Utils } from 'knowdesign';
+import { Form, ProTable, Select, Button, Input, Modal, Drawer, Space, Divider, AppContainer, Utils } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import { PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import moment from 'moment';

km-console/packages/layout-clusters-fe/src/components/Message/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { IconFont } from '@knowdesign/icons';
+import { message } from 'knowdesign';
+import { ArgsProps, ConfigOnClose } from 'knowdesign/es/basic/message';
+
+type ConfigContent = React.ReactNode;
+type ConfigDuration = number | (() => void);
+type JointContent = ConfigContent | ArgsProps;
+
+message.config({
+  top: 16,
+});
+
+function isArgsProps(content: JointContent): content is ArgsProps {
+  return Object.prototype.toString.call(content) === '[object Object]' && !!(content as ArgsProps).content;
+}
+
+const openMessage = (
+  type: 'info' | 'success' | 'warning' | 'error',
+  content: JointContent,
+  duration?: ConfigDuration,
+  onClose?: ConfigOnClose
+) => {
+  if (isArgsProps(content)) {
+    message[type]({
+      icon: <IconFont type={`icon-${type}-circle`} />,
+      ...content,
+    });
+  } else {
+    message[type]({
+      icon: <IconFont type={`icon-${type}-circle`} />,
+      content,
+      duration,
+      onClose,
+    });
+  }
+};
+
+const customMessage = {
+  info(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
+    openMessage('info', content, duration, onClose);
+  },
+  success(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
+    openMessage('success', content, duration, onClose);
+  },
+  warning(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
+    openMessage('warning', content, duration, onClose);
+  },
+  error(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
+    openMessage('error', content, duration, onClose);
+  },
+};
+
+export default customMessage;

km-console/packages/layout-clusters-fe/src/components/Notification/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { notification } from 'knowdesign';
+import { ArgsProps } from 'knowdesign/es/basic/notification';
+import { IconFont } from '@knowdesign/icons';
+
+notification.config({
+  top: 16,
+  duration: 3,
+});
+
+const open = (type: 'info' | 'success' | 'warning' | 'error', content: ArgsProps) => {
+  notification[type]({
+    icon: <IconFont type={`icon-${type}-circle`} />,
+    ...content,
+  });
+};
+
+const customNotification = {
+  info(content: ArgsProps) {
+    open('info', content);
+  },
+  success(content: ArgsProps) {
+    open('success', content);
+  },
+  warning(content: ArgsProps) {
+    open('warning', content);
+  },
+  error(content: ArgsProps) {
+    open('error', content);
+  },
+};
+
+export default customNotification;

km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaChange.tsx

@@ -15,10 +15,10 @@ import {
   Tag,
   Utils,
   AppContainer,
-  message,
   Divider,
   Space,
 } from 'knowdesign';
+import message from '@src/components/Message';
 import './index.less';
 import Api, { MetricType } from '@src/api/index';
 import moment from 'moment';

km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaMove.tsx

@@ -14,12 +14,12 @@ import {
   Table,
   Utils,
   AppContainer,
-  message,
   Space,
   Divider,
   Transfer,
   Tooltip,
 } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import './index.less';
 import Api, { MetricType } from '@src/api/index';

km-console/packages/layout-clusters-fe/src/constants/axiosConfig.ts

@@ -1,4 +1,6 @@
-import { notification, Utils } from 'knowdesign';
+import { Utils } from 'knowdesign';
+import notification from '@src/components/Notification';
+
 const { EventBus } = Utils;
 export const licenseEventBus = new EventBus();
 
@@ -42,8 +44,8 @@ serviceInstance.interceptors.response.use(
         licenseEventBus.emit('licenseError', desc);
       } else {
         notification.error({
-          message: desc,
-          duration: 3,
+          message: '错误信息',
+          description: desc,
         });
       }
       throw res;
@@ -83,36 +85,31 @@ const dealResponse = (error: any) => {
       case 405:
         notification.error({
           message: '错误',
-          duration: 3,
           description: `${error.response.data.message || '请求方式错误'}`,
         });
         break;
       case 500:
         notification.error({
           message: '错误',
-          duration: 3,
           description: '服务错误，请重试！',
         });
         break;
       case 502:
         notification.error({
           message: '错误',
-          duration: 3,
           description: '网络错误，请重试！',
         });
         break;
       default:
         notification.error({
           message: '连接出错',
-          duration: 3,
           description: `${error.response.status}`,
         });
     }
   } else {
     notification.error({
+      message: '连接超时!',
       description: '请重试或检查服务',
-      message: '连接超时!  ',
-      duration: 3,
     });
   }
   return Promise.reject(error);

km-console/packages/layout-clusters-fe/src/pages/BrokerDetail/ConfigurationEdit.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
-import { Drawer, Form, Input, Space, Button, Checkbox, Utils, Row, Col, Divider, message } from 'knowdesign';
+import { Drawer, Form, Input, Space, Button, Checkbox, Utils, Row, Col, Divider } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import { useParams } from 'react-router-dom';
 import Api from '@src/api';

km-console/packages/layout-clusters-fe/src/pages/Consumers/ResetOffsetDrawer.tsx

@@ -1,11 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import { Button, DatePicker, Drawer, Form, notification, Radio, Utils, Space, Divider, message } from 'knowdesign';
+import { Button, DatePicker, Drawer, Form, Radio, Utils, Space, Divider } from 'knowdesign';
+import notification from '@src/components/Notification';
+
+import message from '@src/components/Message';
 import { useParams } from 'react-router-dom';
 import EditTable from '../TestingProduce/component/EditTable';
 import Api from '@src/api/index';
 import moment from 'moment';
 
-const CustomSelectResetTime = (props: { value?: string; onChange?: (val: Number | String) => void }) => {
+const CustomSelectResetTime = (props: { value?: string; onChange?: (val: number | string) => void }) => {
   const { value, onChange } = props;
   const [timeSetMode, setTimeSetMode] = useState('newest');
   useEffect(() => {
@@ -81,7 +84,7 @@ export default (props: any) => {
       tableData = customFormRef.current.getTableData();
     }
     const formData = form.getFieldsValue();
-    let resetParams: any = {
+    const resetParams: any = {
       clusterId: clusterPhyId,
       createIfNotExist: false,
       groupName: record.groupName,

km-console/packages/layout-clusters-fe/src/pages/Jobs/ViewJobsProgress.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import moment from 'moment';
 import { useParams } from 'react-router-dom';
-import { Button, Drawer, Utils, Descriptions, Tabs, Input, message, Spin, InputNumber } from 'knowdesign';
+import { Button, Drawer, Utils, Descriptions, Tabs, Input, Spin, InputNumber } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import TaskDetails from './TeskDetails';
 import NodeTraffic from './NodeTraffic';

km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, memo } from 'react';
 import { useParams, useHistory, useLocation } from 'react-router-dom';
-import { ProTable, Drawer, Utils, AppContainer, Form, Select, Input, Button, message, Modal, Divider } from 'knowdesign';
+import { ProTable, Drawer, Utils, AppContainer, Form, Select, Input, Button, Modal, Divider } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import API from '../../api';
 import { getJobsListColumns, defaultPagination, runningStatus, jobType } from './config';

km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/BalanceDrawer.tsx

@@ -1,19 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import {
-  Utils,
-  Drawer,
-  Button,
-  Form,
-  Space,
-  Divider,
-  AppContainer,
-  Radio,
-  InputNumber,
-  Transfer,
-  Select,
-  message,
-  Tooltip,
-} from 'knowdesign';
+import { Utils, Drawer, Button, Form, Space, Divider, AppContainer, Radio, InputNumber, Transfer, Select, Tooltip } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import CronInput from './CronInput';
 import BalanceEditTable from './BalanceEditTable';

km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/ClusterNorms.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Utils, Drawer, Button, Form, Space, Divider, AppContainer, Input, Transfer, message, InputNumber } from 'knowdesign';
+import { Utils, Drawer, Button, Form, Space, Divider, AppContainer, Input, Transfer, InputNumber } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import { CloseOutlined } from '@ant-design/icons';
 import api from '../../api';

km-console/packages/layout-clusters-fe/src/pages/Login/login.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Form, Button, Input, Row, InputNumber, Utils, message } from 'knowdesign';
+import { Form, Button, Input, Row, InputNumber, Utils } from 'knowdesign';
+import message from '@src/components/Message';
 import { FormMap } from './config';
 import Api from '../../api';
 import { useHistory } from 'react-router-dom';

km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx

@@ -1,4 +1,5 @@
-import { Button, Divider, Drawer, Form, Input, InputNumber, message, Radio, Select, Spin, Space, Utils } from 'knowdesign';
+import { Button, Divider, Drawer, Form, Input, InputNumber, Radio, Select, Spin, Space, Utils } from 'knowdesign';
+import message from '@src/components/Message';
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 import api from '@src/api';

km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/EditDrawer.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Button, Form, Input, Select, message, Drawer, Space, Divider, Utils, Radio, AutoComplete, Alert } from 'knowdesign';
+import { Button, Form, Input, Select, Drawer, Space, Divider, Utils, Radio, AutoComplete, Alert } from 'knowdesign';
+import message from '@src/components/Message';
 import api from '@src/api';
 import { useParams } from 'react-router-dom';
 import { UsersProps } from '../SecurityUsers';

km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Form, Input, Select, Modal, message, ProTable, AppContainer, DKSBreadcrumb, Utils, Divider } from 'knowdesign';
+import { Button, Form, Input, Select, Modal, ProTable, AppContainer, DKSBreadcrumb, Utils, Divider } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import ACLsCardBar from '@src/components/CardBar/ACLsCardBar';
 import api from '@src/api';

km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx

@@ -4,7 +4,6 @@ import {
   Form,
   Input,
   Modal,
-  message,
   ProTable,
   Drawer,
   Space,
@@ -16,6 +15,7 @@ import {
   Tooltip,
   Alert,
 } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import { CloseOutlined, EyeInvisibleOutlined, EyeOutlined, LoadingOutlined } from '@ant-design/icons';
 import './index.less';

km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/Consume.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-case-declarations */
 import { DownloadOutlined } from '@ant-design/icons';
-import { AppContainer, Divider, message, Tooltip, Utils } from 'knowdesign';
+import { AppContainer, Divider, Tooltip, Utils } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import * as React from 'react';
 import moment from 'moment';

km-console/packages/layout-clusters-fe/src/pages/TestingProduce/Produce.tsx

@@ -1,4 +1,5 @@
-import { AppContainer, Form, message, Tabs, Utils } from 'knowdesign';
+import { AppContainer, Form, Tabs, Utils } from 'knowdesign';
+import message from '@src/components/Message';
 import * as React from 'react';
 import ConfigForm from './component/ConfigFrom';
 import TestResult from '../TestingConsumer/component/Result';

km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/EditTable.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/display-name */
 import React, { useState } from 'react';
-import { Table, Input, InputNumber, Popconfirm, Form, Typography, Button, message, Select } from 'knowdesign';
+import { Table, Input, InputNumber, Popconfirm, Form, Typography, Button, Select } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import './style/edit-table.less';
 import { CheckOutlined, CloseOutlined, PlusSquareOutlined } from '@ant-design/icons';

km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConfigurationEdit.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Drawer, Form, Input, Space, Button, Utils, Row, Col, Divider, message } from 'knowdesign';
+import { Drawer, Form, Input, Space, Button, Utils, Row, Col, Divider } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import { useParams } from 'react-router-dom';
 import Api from '@src/api';

km-console/packages/layout-clusters-fe/src/pages/TopicList/Create.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { Alert, Button, Checkbox, Divider, Drawer, Form, Input, InputNumber, Modal, notification, Select, Utils } from 'knowdesign';
+import { Alert, Button, Checkbox, Divider, Drawer, Form, Input, InputNumber, Modal, Select, Utils } from 'knowdesign';
+import notification from '@src/components/Notification';
 import { PlusOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
 import Api from '@src/api/index';
 

km-console/packages/layout-clusters-fe/src/pages/TopicList/Delete.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Button, Form, Input, Modal, notification, Utils } from 'knowdesign';
+import { Button, Form, Input, Modal, Utils } from 'knowdesign';
+import notification from '@src/components/Notification';
 import { IconFont } from '@knowdesign/icons';
 import Api from '@src/api/index';
 

km-console/packages/layout-clusters-fe/src/pages/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Redirect, useHistory, useLocation } from 'react-router-dom';
-import { DProLayout, AppContainer, RouteGuard, notification, Spin } from 'knowdesign';
+import { DProLayout, AppContainer, RouteGuard, Spin } from 'knowdesign';
+import notification from '@src/components/Notification';
 import { pageRoutes } from './pageRoutes';
 import { leftMenus, systemKey } from '@src/constants/menu';
 import { ClustersPermissionMap } from './CommonConfig';

km-console/packages/layout-clusters-fe/src/style-addition.less

@@ -11,6 +11,7 @@
 @select-item-selected-font-weight: normal;
 @btn-danger-bg: #F5483B;
 @btn-danger-border: #F5483B;
+@notification-icon-size: 20px;
 // 自定义变量
 // Input
 @input-bg: rgba(33, 37, 41, 0.06);
@@ -656,3 +657,109 @@
 .@{ant-prefix}-empty-img-default{
   width: 100% !important;
 }
+
+// message 样式覆盖
+.@{message-prefix-cls} {
+  &-notice-content {
+    padding: 8px 12px;
+    font-size: 14px;
+    border-radius: 4px;
+    background: #fff;
+  }
+  &-success,
+  &-info,
+  &-warning,
+  &-error,
+  &-loading {
+    margin: unset;
+    padding: unset;
+    color: #000;
+    border-style: unset;
+    border-width: unset;
+    border-radius: unset;
+  }
+
+  &-success {
+    background-color: unset;
+    border-color: unset;
+  }
+
+  &-info,
+  &-loading {
+    background-color: unset;
+    border-color: unset;
+  }
+
+  &-warning {
+    background-color: unset;
+    border-color: unset;
+  }
+
+  &-error {
+    background-color: unset;
+    border-color: unset;
+  }
+
+  .@{iconfont-css-prefix} {
+    top: 2px;
+    color: unset;
+  }
+}
+
+// Notification 样式覆盖
+.@{notification-prefix-cls} {
+  &-notice {
+    width: 348px;
+    color: #000;
+    background-color: #fff;
+    border: unset;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.02), 0 4px 6px 6px rgba(0,0,0,0.02), 0 4px 6px 0 rgba(0,0,0,0.06);
+    &-message {
+      font-family: @font-family-bold;
+      font-size: 16px;
+      color: #000;
+    }
+    &-description {
+      font-size: 14px;
+      color: rgba(0,0,0,0.60);
+    }
+    &-with-icon &-message {
+      font-size: 16px;
+      margin-left: 26px;
+    }
+    &-with-icon &-description {
+      font-size: 14px;
+      margin-left: 26px;
+    }
+    &-icon {
+      top: 18px;
+      font-size: @notification-icon-size;
+      line-height: @notification-icon-size;
+    }
+    .@{iconfont-css-prefix}&-icon {
+      color: @notification-content-color !important;
+    }
+    &-success {
+      background-color: #fff;
+      border: unset;
+    }
+    &-warning {
+      background-color: #fff;
+      border: unset;
+    }
+    &-error {
+      background-color: #fff;
+      border: unset;
+    }
+    &-close {
+      color: rgba(0,0,0,0.60);
+
+      &:hover {
+        & when not (@theme = dark) {
+          color: shade(@white, 30%);
+        }
+      }
+    }
+  }
+}