From 559f43a8c1a6dbe836555f64b7044b2e578b58c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=98=8E=E9=98=B3?= <1347276498@qq.com>
Date: Fri, 24 Apr 2020 10:59:43 +0800
Subject: [PATCH 1/5] chore(component/button): remove text ghost button demo

---
 packages/component/src/components/button/demo/demo1.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/component/src/components/button/demo/demo1.js b/packages/component/src/components/button/demo/demo1.js
index d0f978ef9..85085c084 100644
--- a/packages/component/src/components/button/demo/demo1.js
+++ b/packages/component/src/components/button/demo/demo1.js
@@ -43,16 +43,12 @@ const Demo1 = () => (
       Secondary
     </Button>
     <div className="ghost-dark-background">
-      <Button ghost="dark">Ghost</Button>
-      <Button ghost="dark" loading>
+      <Button style={{ marginLeft: '16px' }} ghost="dark">
         Ghost
       </Button>
       <Button ghost="dark" disabled>
         Ghost
       </Button>
-      <Button ghost="dark" text>
-        Ghost
-      </Button>
     </div>
   </Wrapper>
 )

From fff2411858bf24b2c503bcf059eef245f361855d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=98=8E=E9=98=B3?= <1347276498@qq.com>
Date: Fri, 24 Apr 2020 11:00:03 +0800
Subject: [PATCH 2/5] docs(component/date-picker): improve README.md

---
 .../src/components/date-picker/README.md      | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/packages/component/src/components/date-picker/README.md b/packages/component/src/components/date-picker/README.md
index eaf0f826c..7e2f7172b 100644
--- a/packages/component/src/components/date-picker/README.md
+++ b/packages/component/src/components/date-picker/README.md
@@ -11,6 +11,80 @@ tags:
 
 输入或选择日期的控件。当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
 
+### 日期选择模式
+
+DatePicker/RangePicker 在交互上增加了**操作焦点**的设置，意味着，如果某个输入框处于 focus 态，那么当前选择的日期将会作用于该输入框对应的日期。
+
+如上图所示，带时间的 RangePicker 有 4 个输入焦点，分别为开始日期、开始时间、结束日期、结束时间。当用户激活某个输入框时，此时下拉选择的日期将会作用域该输入框。同时设置了如下两个规则：
+
+1.  已选定日期范围后，当焦点在开始日期时，如果即将选择的日期大于结束日期，将会重设开始日期。
+2.  已选定日期范围后，当焦点在结束日期时，如果即将选择的日期小于开始日期，将会重设开始日期。
+
+### 日期值的多语言
+
+由于 Calendar 组件内部使用 moment 对象来设置日期（请使用最新版 moment），部分 Locale 读取自 moment，因此用户需要在外部使用时[正确的设置 moment 的 locale](http://momentjs.cn/docs/#/i18n/changing-locale/) 。
+
+-   Q: 文档站点上看是中式日历，为什么我本地却是美式日历呢？如何进行多语言适配？<br/>
+    A: 日期的多语言情况比较复杂，涉及到年、月、日、星期、阅读习惯等多方面(美式从周日到周六，中式从周一到周日)，因此我们借助了成熟的时间库 moment.js 来进行日期的多语言处理。
+     moment.js 默认支持美式表达，如需中文等其他语言，请引入moment-with-locales.js语言包。
+
+```js
+import moment from 'moment';
+
+moment.locale('zh-cn');
+```
+
+此外，当改变 moment 的全局 locale 时并不会修改之前的已有实例，例如：
+
+```js
+moment.locale('fr');
+const m = moment(1316116057189);
+m.fromNow(); // il y a une heure
+
+moment.locale('en');
+m.fromNow(); // il y a une heure
+moment(1316116057189).fromNow(); // an hour ago
+```
+
+除了全局设置 moment 的多语言，还可以只对某个 moment 实例设置多语言。比如：
+
+```js
+const value = moment();
+value.locale('fr'); // set this instance to use French
+```
+
+### Moment 对象和字符串
+
+DatePicker 默认情况下接收和返回的数据类型都是 Moment 对象。为了便于用户的使用，DatePikcer 还支持直接传入字符串（组件内部仍然会格式化为 Moment 对象）。使用方法如下：
+
+标准非受控
+
+```jsx
+<DatePicker onChange={val => console.log(val)} />
+// select 2019-01-23
+// >> MomentObject
+
+<DatePicker defaultValue={moment()} onChange={val => console.log(val)} />
+// select 2019-01-23
+// >> MomentObject
+
+<DatePicker defaultValue="2018-01-23" onChange={val => console.log(val)} />
+// select 2019-01-23
+// >> "2019-01-23"
+```
+
+标准受控
+
+```jsx
+<DatePicker value={moment()} onChange={val => console.log(val)} />
+// setProps({ value: moment().add(1, 'months') })
+// >> MomentObject
+
+<DatePicker value="2018-01-23" onChange={val => console.log(val)} />
+// setProps({ value: '2019-01-23' })
+// >> "2019-01-23"
+```
+
 交互说明
 
 DatePicker/RangePicker 在交互上增加了操作焦点的设置，意味着，如果某个输入框处于 focus 态，那么当前选择的日期将会作用于该输入框对应的日期。

From 78774c2927c0f8310718695b005b04be4e8cf664 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=98=8E=E9=98=B3?= <1347276498@qq.com>
Date: Fri, 24 Apr 2020 11:00:52 +0800
Subject: [PATCH 3/5] chore(component/pagination): add controlled
 pageSizeSelector demo

---
 .../src/components/pagination/README.md       |  7 +++-
 .../src/components/pagination/demo/demo8.js   |  9 ++--
 .../src/components/pagination/demo/demo9.js   | 41 +++++++++++++++++++
 .../src/components/pagination/demo/index.js   |  3 ++
 4 files changed, 53 insertions(+), 7 deletions(-)
 create mode 100644 packages/component/src/components/pagination/demo/demo9.js

diff --git a/packages/component/src/components/pagination/README.md b/packages/component/src/components/pagination/README.md
index afee6b7f8..386cfe6e2 100644
--- a/packages/component/src/components/pagination/README.md
+++ b/packages/component/src/components/pagination/README.md
@@ -48,6 +48,9 @@ zhName: 翻页器
 
 #include "demo/demo8.js"
 
-<!-- ### 配合 react-router 使用 -->
+### 分页按钮连接
+
+#include "demo/demo8.js"
+
 
-<!-- #include "demo/demo9.js" -->
+#include "demo/demo9.js"
\ No newline at end of file
diff --git a/packages/component/src/components/pagination/demo/demo8.js b/packages/component/src/components/pagination/demo/demo8.js
index ce07e86d8..e79561690 100644
--- a/packages/component/src/components/pagination/demo/demo8.js
+++ b/packages/component/src/components/pagination/demo/demo8.js
@@ -1,10 +1,9 @@
 import React from 'react'
 import { Pagination } from '@alicloud/console-components'
 
-const format = typeof window === 'undefined'? '': `${window.location.href}#/{page}`;
+const format =
+  typeof window === 'undefined' ? '' : `${window.location.href}#/{page}`
 
-const Demo8 = () => (
-  <Pagination defaultCurrent={2} link={format} />
-)  
+const Demo8 = () => <Pagination defaultCurrent={2} link={format} />
 
-export default Demo8
\ No newline at end of file
+export default Demo8
diff --git a/packages/component/src/components/pagination/demo/demo9.js b/packages/component/src/components/pagination/demo/demo9.js
new file mode 100644
index 000000000..e17cb3377
--- /dev/null
+++ b/packages/component/src/components/pagination/demo/demo9.js
@@ -0,0 +1,41 @@
+import React, { useState, useCallback } from 'react'
+import { Pagination, Select } from '@alicloud/console-components'
+
+const { Option } = Select
+
+const Demo9 = () => {
+  const [pageSize, setPageSize] = useState(10)
+
+  const handleChange = useCallback(value => {
+    console.log('pageSize:', value)
+    setPageSize(value)
+  }, [])
+
+  return (
+    <>
+      <div style={{ marginBottom: '16px' }}>
+        <span>设置pageSize：</span>
+        <Select value={pageSize} onChange={handleChange}>
+          <Option value={10}>每页10条</Option>
+          <Option value={20}>每页20条</Option>
+          <Option value={50}>每页50条</Option>
+          <Option value={100}>每页100条</Option>
+        </Select>
+      </div>
+      <Pagination
+        defaultCurrent={2}
+        pageSizeSelector="dropdown"
+        pageSize={pageSize}
+        onPageSizeChange={setPageSize}
+        pageSizeList={[10, 20, 50, 100]}
+      />
+    </>
+  )
+}
+
+export default Demo9
+
+export const demoMeta = {
+  zhName: '设置`pageSizeSelector`的值',
+  zhDesc: `pageSizeSelector的值完全受pageSize的控制，如刷新页面之后pageSizeSelector的值发生改变，请确认pageSize是否改变`,
+}
diff --git a/packages/component/src/components/pagination/demo/index.js b/packages/component/src/components/pagination/demo/index.js
index be97c03e4..314562294 100644
--- a/packages/component/src/components/pagination/demo/index.js
+++ b/packages/component/src/components/pagination/demo/index.js
@@ -7,6 +7,7 @@ import Demo5 from './demo5'
 import Demo6 from './demo6'
 import Demo7 from './demo7'
 import Demo8 from './demo8'
+import Demo9 from './demo9'
 import './index.less'
 
 const PaginationDemo = () => (
@@ -27,6 +28,8 @@ const PaginationDemo = () => (
     <Demo7 />
     <h2>分页按钮链接</h2>
     <Demo8 />
+    <h2>每页展示条数(受控)</h2>
+    <Demo9 />
   </div>
 )
 

From e5ece038762d2914f412afde4eaf891e3739e60e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=98=8E=E9=98=B3?= <1347276498@qq.com>
Date: Fri, 24 Apr 2020 11:01:30 +0800
Subject: [PATCH 4/5] chore(component/table): add tree Table selected demo

"fix #65"
---
 .../src/components/table/demo/demo20.js       |  40 +----
 .../src/components/table/demo/demo27.js       | 151 ++++++++++++++++++
 .../src/components/table/demo/index.js        |   3 +
 3 files changed, 155 insertions(+), 39 deletions(-)
 create mode 100644 packages/component/src/components/table/demo/demo27.js

diff --git a/packages/component/src/components/table/demo/demo20.js b/packages/component/src/components/table/demo/demo20.js
index af3a6b853..a9fad4ec0 100644
--- a/packages/component/src/components/table/demo/demo20.js
+++ b/packages/component/src/components/table/demo/demo20.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Table } from '@alicloud/console-components'
 import styled from 'styled-components'
 
@@ -68,20 +68,6 @@ const data = [
   },
 ]
 
-const tableMixTree = (
-  <Table
-    dataSource={data}
-    primaryKey="key"
-    isTree
-    rowSelection={{ onChange: () => {} }}
-  >
-    <Table.Column title="Key" dataIndex="key" />
-    <Table.Column title="Name" dataIndex="name" />
-    <Table.Column title="Age" dataIndex="age" />
-    <Table.Column title="Address" dataIndex="address" />
-  </Table>
-)
-
 const tableMixExpanded = (
   <Table
     dataSource={data}
@@ -96,22 +82,6 @@ const tableMixExpanded = (
   </Table>
 )
 
-const tableMixSelectionTreeLock = (
-  <div style={{ width: '500px' }}>
-    <Table
-      dataSource={data}
-      primaryKey="key"
-      rowSelection={{ onChange: () => {} }}
-      isTree
-    >
-      <Table.Column title="Key" dataIndex="key" width={100} />
-      <Table.Column title="Name" dataIndex="name" lock width={100} />
-      <Table.Column title="Age" dataIndex="age" width={200} lock="right" />
-      <Table.Column title="Address" dataIndex="address" width={200} />
-    </Table>
-  </div>
-)
-
 const tableMixLock = (
   <div style={{ width: '500px' }}>
     <Table
@@ -157,18 +127,10 @@ const tableMixTreeLock = (
 
 const Demo20 = () => (
   <SWrapper>
-    <div className="row">
-      <h4>tree & select</h4>
-      {tableMixTree}
-    </div>
     <div className="row">
       <h4>extra & select</h4>
       {tableMixExpanded}
     </div>
-    <div className="row">
-      <h4>tree & lock column & select</h4>
-      {tableMixSelectionTreeLock}
-    </div>
     <div className="row">
       <h4>extra & lock column & select</h4>
       {tableMixExpandedLock}
diff --git a/packages/component/src/components/table/demo/demo27.js b/packages/component/src/components/table/demo/demo27.js
new file mode 100644
index 000000000..c7fa22886
--- /dev/null
+++ b/packages/component/src/components/table/demo/demo27.js
@@ -0,0 +1,151 @@
+import React, { useState, useCallback } from 'react'
+import { Table } from '@alicloud/console-components'
+import styled from 'styled-components'
+
+const data = [
+  {
+    key: 1,
+    name: 'a',
+    age: 32,
+    address: 'aa',
+    children: [
+      {
+        key: 11,
+        name: 'b',
+        age: 33,
+        address: 'bb',
+      },
+      {
+        key: 12,
+        name: 'c',
+        age: 33,
+        address: 'cc',
+        children: [
+          {
+            key: 121,
+            name: 'd',
+            age: 33,
+            address: 'dd',
+          },
+        ],
+      },
+      {
+        key: 13,
+        name: 'e',
+        age: 33,
+        address: 'ee',
+        children: [
+          {
+            key: 131,
+            name: 'f',
+            age: 33,
+            address: 'ff',
+            children: [
+              {
+                key: 1311,
+                name: 'g',
+                age: 33,
+                address: 'gg',
+              },
+              {
+                key: 1312,
+                name: 'h',
+                age: 33,
+                address: 'hh',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    key: 2,
+    name: 'i',
+    age: 32,
+    address: 'ii',
+    children: [],
+  },
+]
+
+const generateAllKeys = (dataSource) => {
+  let allKeys = []
+  dataSource.forEach((item) => {
+    allKeys.push(item.key)
+    if (item.children && Array.isArray(item.children)) {
+      allKeys = allKeys.concat(generateAllKeys(item.children))
+    }
+  })
+  return allKeys
+}
+
+const TableMixTree = () => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState([])
+
+  const handleSelectAll = (selected, records) => {
+    if (selected) {
+      const allKeys = generateAllKeys(records)
+      setSelectedRowKeys(allKeys)
+    } else {
+      const keys = records.map((item) => item.key)
+      setSelectedRowKeys(keys)
+    }
+  }
+
+  const handleSelect = useCallback(
+    (selected, record) => {
+      if (selected) {
+        setSelectedRowKeys([record.key, ...selectedRowKeys])
+      } else {
+        // const selectedkeys = [...selectedRowKeys]
+        // const index = selectedkeys.indexOf(record.key)
+        // selectedkeys.splice(index, 1)
+        const selectedKeys = selectedRowKeys.filter(
+          (item) => item !== record.key
+        )
+        setSelectedRowKeys(selectedKeys)
+      }
+    },
+    [selectedRowKeys]
+  )
+
+  return (
+    <Table
+      dataSource={data}
+      primaryKey="key"
+      isTree
+      rowSelection={{
+        onSelectAll: handleSelectAll,
+        onSelect: handleSelect,
+        selectedRowKeys,
+      }}
+    >
+      <Table.Column title="Key" dataIndex="key" />
+      <Table.Column title="Name" dataIndex="name" />
+      <Table.Column title="Age" dataIndex="age" />
+      <Table.Column title="Address" dataIndex="address" />
+    </Table>
+  )
+}
+
+const Demo27 = () => (
+  <SWrapper>
+    <div className="row">
+      <h4>tree & select</h4>
+      <TableMixTree />
+    </div>
+  </SWrapper>
+)
+
+export default Demo27
+
+export const demoMeta = {
+  zhName: `树型Table`,
+  zhDesc: `演示了树型Table全选功能（包括children）`,
+}
+
+const SWrapper = styled.div`
+  .row {
+    margin-top: 10px;
+  }
+`
diff --git a/packages/component/src/components/table/demo/index.js b/packages/component/src/components/table/demo/index.js
index 1e187fac0..2975837f7 100644
--- a/packages/component/src/components/table/demo/index.js
+++ b/packages/component/src/components/table/demo/index.js
@@ -25,6 +25,7 @@ import Demo23 from './demo23'
 import Demo24 from './demo24'
 import Demo25 from './demo25'
 import Demo26 from './demo26'
+import Demo27 from './demo27'
 import './index.less'
 
 const TableDemo = () => (
@@ -69,6 +70,8 @@ const TableDemo = () => (
     <Demo19 />
     <h2>混合模式</h2>
     <Demo20 />
+    <h2>树型Table全选子节点</h2>
+    <Demo27 />
     <h2>数据集为空</h2>
     <Demo21 />
     <h2>自定义Loading组件</h2>

From a0fa9d45fa7bd1b2e173f91dd6f0df066adab04f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=98=8E=E9=98=B3?= <1347276498@qq.com>
Date: Fri, 24 Apr 2020 11:02:47 +0800
Subject: [PATCH 5/5] chore(component/overlay): adjust demo style to fit design

---
 .../component/src/components/overlay/demo/demo1.js   | 12 ++++++------
 .../component/src/components/overlay/demo/demo2.js   | 12 ++++++------
 .../component/src/components/overlay/demo/demo3.js   |  8 ++++----
 .../component/src/components/overlay/demo/demo4.js   |  8 ++++----
 .../component/src/components/overlay/demo/demo5.js   | 10 +++++-----
 .../component/src/components/overlay/demo/demo6.js   |  8 ++++----
 6 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/packages/component/src/components/overlay/demo/demo1.js b/packages/component/src/components/overlay/demo/demo1.js
index 1a27bf6a6..cc802ded5 100644
--- a/packages/component/src/components/overlay/demo/demo1.js
+++ b/packages/component/src/components/overlay/demo/demo1.js
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback } from 'react'
-import { Overlay } from '@alicloud/console-components'
+import { Overlay, Button } from '@alicloud/console-components'
 import styled from 'styled-components'
 
 const Demo1 = () => {
@@ -17,9 +17,9 @@ const Demo1 = () => {
 
   return (
     <div>
-      <button onClick={handleClick} ref={btnRef}>
+      <Button onClick={handleClick} ref={btnRef}>
         Toggle visible
-      </button>
+      </Button>
       <Overlay
         visible={visible}
         target={() => btnRef.current}
@@ -32,13 +32,13 @@ const Demo1 = () => {
   )
 }
 
-const SInner = styled.span`
+const SInner = styled.div`
   width: 300px;
   height: 100px;
   padding: 10px;
-  border: 1px solid #999999;
   background: #ffffff;
-  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ebebeb;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
 `
 
 export default Demo1
diff --git a/packages/component/src/components/overlay/demo/demo2.js b/packages/component/src/components/overlay/demo/demo2.js
index 438d4bde8..cd7145a0a 100644
--- a/packages/component/src/components/overlay/demo/demo2.js
+++ b/packages/component/src/components/overlay/demo/demo2.js
@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useRef } from 'react'
-import { Overlay } from '@alicloud/console-components'
+import { Overlay, Button } from '@alicloud/console-components'
 import styled from 'styled-components'
 
 const Demo2 = () => {
@@ -17,9 +17,9 @@ const Demo2 = () => {
 
   return (
     <div>
-      <button onClick={handleClick} ref={btnRef}>
+      <Button onClick={handleClick} ref={btnRef}>
         Open
-      </button>
+      </Button>
       <Overlay
         visible={visible}
         safeNode={() => btnRef.current}
@@ -34,13 +34,13 @@ const Demo2 = () => {
   )
 }
 
-const SInner = styled.span`
+const SInner = styled.div`
   width: 300px;
   height: 100px;
   padding: 10px;
-  border: 1px solid #999999;
   background: #ffffff;
-  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ebebeb;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
 `
 
 export default Demo2
diff --git a/packages/component/src/components/overlay/demo/demo3.js b/packages/component/src/components/overlay/demo/demo3.js
index 1b632d00d..95bb3660d 100644
--- a/packages/component/src/components/overlay/demo/demo3.js
+++ b/packages/component/src/components/overlay/demo/demo3.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Overlay } from '@alicloud/console-components'
+import { Overlay, Button } from '@alicloud/console-components'
 import styled from 'styled-components'
 
 const { Popup } = Overlay
 
 const Demo3 = () => (
-  <Popup trigger={<button>Open</button>} triggerType="click">
+  <Popup trigger={<Button>Open</Button>} triggerType="click">
     <SInner>Hello World From Popup!</SInner>
   </Popup>
 )
@@ -14,9 +14,9 @@ const SInner = styled.div`
   width: 300px;
   height: 100px;
   padding: 10px;
-  border: 1px solid #999999;
   background: #ffffff;
-  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ebebeb;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
 `
 
 export default Demo3
diff --git a/packages/component/src/components/overlay/demo/demo4.js b/packages/component/src/components/overlay/demo/demo4.js
index 6ae067791..824fa084c 100644
--- a/packages/component/src/components/overlay/demo/demo4.js
+++ b/packages/component/src/components/overlay/demo/demo4.js
@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react'
-import { Overlay } from '@alicloud/console-components'
+import { Overlay, Button } from '@alicloud/console-components'
 import styled from 'styled-components'
 
 const { Popup } = Overlay
@@ -13,7 +13,7 @@ const Demo4 = () => {
 
   return (
     <Popup
-      trigger={<button>Open</button>}
+      trigger={<Button>Open</Button>}
       triggerType="click"
       visible={visible}
       onVisibleChange={onVisibleChange}
@@ -27,9 +27,9 @@ const SInner = styled.div`
   width: 300px;
   height: 100px;
   padding: 10px;
-  border: 1px solid #999999;
   background: #ffffff;
-  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ebebeb;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
 `
 
 export default Demo4
diff --git a/packages/component/src/components/overlay/demo/demo5.js b/packages/component/src/components/overlay/demo/demo5.js
index 02949c751..450dd60e7 100644
--- a/packages/component/src/components/overlay/demo/demo5.js
+++ b/packages/component/src/components/overlay/demo/demo5.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Overlay } from '@alicloud/console-components'
+import { Overlay, Button } from '@alicloud/console-components'
 import styled from 'styled-components'
 
 const { Popup } = Overlay
 
 const Demo5 = () => (
-  <Popup trigger={<button>Open first overlay</button>} triggerType="click">
+  <Popup trigger={<Button>Open first overlay</Button>} triggerType="click">
     <SInner>
       <Popup
-        trigger={<button>Open second overlay</button>}
+        trigger={<Button>Open second overlay</Button>}
         triggerType="click"
         container={trigger => trigger.parentNode}
       >
@@ -25,9 +25,9 @@ const SInner = styled.div`
   width: 300px;
   height: 100px;
   padding: 10px;
-  border: 1px solid #999999;
   background: #ffffff;
-  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ebebeb;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
 `
 
 export default Demo5
diff --git a/packages/component/src/components/overlay/demo/demo6.js b/packages/component/src/components/overlay/demo/demo6.js
index e0a4f51ad..0cd06bac0 100644
--- a/packages/component/src/components/overlay/demo/demo6.js
+++ b/packages/component/src/components/overlay/demo/demo6.js
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { Overlay } from '@alicloud/console-components'
+import { Overlay, Button } from '@alicloud/console-components'
 import styled from 'styled-components'
 
 const { Popup } = Overlay
@@ -10,7 +10,7 @@ const Demo6 = () => {
   return (
     <SContainer ref={containerRef}>
       <Popup
-        trigger={<button style={{ marginTop: '40px' }}>Open</button>}
+        trigger={<Button style={{ marginTop: '40px' }}>Open</Button>}
         triggerType="click"
         container={trigger => trigger.parentNode}
         target={containerRef.current}
@@ -34,8 +34,8 @@ const SInner = styled.div`
   width: 300px;
   height: 100px;
   padding: 10px;
-  border: 1px solid #999999;
   background: #ffffff;
-  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ebebeb;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
 `
 export default Demo6