feat: message

components/message/demo/basic.md

@@ -0,0 +1,41 @@
+---
+order: 0
+title:
+  zh-CN: 基本使用
+---
+
+## zh-CN
+
+最简单的用法，适用于信息提醒反馈。
+
+共有四种样式 infor、success、warning、error。
+
+```jsx
+import { message, Button } from 'antd';
+
+const success = () => {
+  message.success('This is a success message');
+};
+
+const error = () => {
+  message.error('This is an error message');
+};
+
+const warning = () => {
+  message.warning('This is a warning message');
+};
+
+const info = () => {
+  message.info('This is a normal message');
+};
+
+ReactDOM.render(
+  <div className="demo-message-box">
+    <Button onClick={info}>Info</Button>
+    <Button onClick={success}>Success</Button>
+    <Button onClick={error}>Error</Button>
+    <Button onClick={warning}>Warning</Button>
+  </div>,
+  mountNode,
+);
+```

components/message/index.zh-CN.md

@@ -0,0 +1,13 @@
+---
+category: Components
+cols: 1
+type: 反馈
+title: Message
+subtitle: 全局提示
+---
+
+全局展示操作反馈信息。
+
+## 设计规范
+
+不同主题，背景色不一致，默认主题背景色为 #FFFFFF，暗黑主题背景色为 #1D1F2E。

components/modal/index.zh-CN.md

@@ -11,6 +11,8 @@ title: Modal
 
 弹窗常规宽度为 520px，large size 为 680px,横向居中，分为标题，内容，和下面的操作部分，操作按钮主按钮居右，次级按钮居左。整个弹窗高度随着内容区域变化而变化，内容太长固定下部,内容区域做滚动。
 
-- 顶部标题区域：高度为 52px，标题字体为 14px Medium 居中，线为一像素的#DDDDDD 分割线
+- 顶部标题区域：高度为 52px，标题字体为 14px Medium 居中，线为一像素的分割线。
 - 底部操作区域：高度为 72px，按钮距离右边和下面 20px,居中。
 - 内容区域：内容区域看作整体，距离上部 24px，距离下部分 28px,左右位置视内容而定。
+
+特别的，在暗黑主题中，弹框有一像素的边框。

theme/dt-theme/dark/index.less

@@ -3,6 +3,7 @@
 @import './modal.less';
 @import './alert.less';
 @import './notification.less';
+@import './message.less';
 
 * {
     margin: 0;

theme/dt-theme/dark/message.less

@@ -0,0 +1,11 @@
+@import '../const.less';
+
+.ant-message-notice-content {
+    box-shadow: 0px 2px 8px 0px #06070A;
+    height: 40px;
+    font-size: 14px;
+    color: @whiteBF;
+    .anticon {
+        font-size: 16px;
+    }
+}

theme/dt-theme/default/notice.less

@@ -47,10 +47,6 @@
 .ant-notification-notice {
     padding: 20px 28px 20px 16px;
 }
-.ant-message-notice-content {
-    font-size: 14px;
-    color: @black6;
-}
 .ant-notification-notice-icon {
     margin-left: 0px;
     font-size: 20px;
@@ -73,6 +69,11 @@
 .ant-message-notice-content {
     box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.10);
     height: 40px;
+    font-size: 14px;
+    color: @black6;
+    .anticon {
+        font-size: 16px;
+    }
 }
 .dt-notification-close-btn {
     position: absolute;

theme/static/common.less

@@ -169,7 +169,7 @@ a {
     margin-bottom: 20px;
   }
 }
-.demo-button-type, .demo-modal-box, .demo-notification-box {
+.demo-button-type, .demo-modal-box, .demo-notification-box, .demo-message-box {
   button {
     margin-right: 12px;
   }