Merge branch 'main' into release

.github/workflows/chromatic.yml

@@ -26,6 +26,7 @@ jobs:
   chromatic-deployment:
     # Operating System
     runs-on: ubuntu-latest
+    if: ${{ github.repository_owner == 'DouyinFE' }}
     # Job steps
     steps:
       - uses: actions/checkout@v1

.github/workflows/cypress.yml

@@ -22,6 +22,7 @@ jobs:
   install:
     runs-on: ubuntu-latest
     container: cypress/browsers:node14.16.0-chrome90-ff88
+    if: ${{ github.repository_owner == 'DouyinFE' }}
     steps:
       - name: Checkout
         uses: actions/checkout@v2

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org

README-zh_CN.md

@@ -28,9 +28,9 @@
 [cypress-url]: https://dashboard.cypress.io/projects/k83u7j/runs
 
 [build-js-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/umd/semi-ui.min.js?label=semi.min.js&compression=gzip
-[build-js-url]: https://unpkg.com/browse/@douyinfe/semi-ui@2.1.1/dist/umd/semi-ui.min.js
+[build-js-url]: https://unpkg.com/browse/@douyinfe/semi-ui/dist/umd/semi-ui.min.js
 [build-css-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/css/semi.min.css?label=semi.min.css&compression=gzip
-[build-css-url]: https://unpkg.com/browse/@douyinfe/semi-ui@2.1.1/dist/css/semi.min.css
+[build-css-url]: https://unpkg.com/browse/@douyinfe/semi-ui/dist/css/semi.min.css
 
 </div>
 

README.md

@@ -29,9 +29,9 @@
 
 
 [build-js-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/umd/semi-ui.min.js?label=semi.min.js&compression=gzip
-[build-js-url]: https://unpkg.com/browse/@douyinfe/semi-ui@2.1.1/dist/umd/semi-ui.min.js
+[build-js-url]: https://unpkg.com/browse/@douyinfe/semi-ui/dist/umd/semi-ui.min.js
 [build-css-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/css/semi.min.css?label=semi.min.css&compression=gzip
-[build-css-url]: https://unpkg.com/browse/@douyinfe/semi-ui@2.1.1/dist/css/semi.min.css
+[build-css-url]: https://unpkg.com/browse/@douyinfe/semi-ui/dist/css/semi.min.css
 
 </div>
 
@@ -46,7 +46,7 @@ English | [简体中文](./README-zh_CN.md)
 # 🎉 Features
 
 - 💪 Up to 58 high-quality Components.
-- 💅 Thousands Design Tokens. Powerful Themes Customizing.
+- 💅 2000+ Design Tokens. Flexible custom render structure. Build your own design system.
 - 🌍 Internationalization Support for Dozens of Languages.
 - 👏 Written in Typescript, Friendly Static Type Support.
 - 🥳 SSR (Server Side Rendering) Compatible.

content/feedback/progress/index-en-US.md

@@ -35,9 +35,9 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 200 }}>
-        <Progress percent={10} stroke="#fc8800" aria-label="disk usage"/>
+       <Progress percent={10} stroke="var(--semi-color-warning)" aria-label="disk usage" />
         <br />
-        <Progress percent={25} stroke="#f93920" aria-label="disk usage"/>
+        <Progress percent={25} stroke="var(--semi-color-danger)" aria-label="disk usage" />
         <br />
         <Progress percent={50} aria-label="disk usage"/>
         <br />
@@ -60,9 +60,9 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 200 }}>
-        <Progress percent={10} stroke="#fc8800" showInfo={true} aria-label="disk usage"/>
+        <Progress percent={10} stroke="var(--semi-color-warning)" showInfo={true} aria-label="disk usage"/>
         <br />
-        <Progress percent={25} stroke="#f93920" showInfo={true} aria-label="disk usage"/>
+        <Progress percent={25} stroke="var(--semi-color-danger)" showInfo={true} aria-label="disk usage"/>
         <br />
         <Progress percent={50} showInfo={true} aria-label="disk usage"/>
         <br />

content/feedback/progress/index.md

@@ -34,9 +34,9 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 200 }}>
-        <Progress percent={10} stroke="#fc8800" aria-label="disk usage" />
+        <Progress percent={10} stroke="var(--semi-color-warning)" aria-label="disk usage" />
         <br />
-        <Progress percent={25} stroke="#f93920" aria-label="download progress" />
+        <Progress percent={25} stroke="var(--semi-color-danger)" aria-label="disk usage" />
         <br />
         <Progress percent={50} aria-label="disk usage" />
         <br />
@@ -59,9 +59,9 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 200 }}>
-        <Progress percent={10} stroke="#fc8800" showInfo={true} aria-label="disk usage" />
+        <Progress percent={10} stroke="var(--semi-color-warning)" showInfo={true} aria-label="disk usage" />
         <br />
-        <Progress percent={25} stroke="#f93920" showInfo={true} aria-label="disk usage" />
+        <Progress percent={25} stroke="var(--semi-color-danger)" showInfo={true} aria-label="disk usage" />
         <br />
         <Progress percent={50} showInfo={true} aria-label="disk usage" />
         <br />
@@ -124,7 +124,7 @@ import { Progress } from '@douyinfe/semi-ui';
                 type="circle"
                 width={100}
                 style={{ margin: 5 }}
-                stroke="#f93920"
+                stroke="var(--semi-color-danger)"
                 aria-label="disk usage"
             />
         </div>

content/input/datepicker/index.md

@@ -654,7 +654,7 @@ function Demo() {
             justifyContent: 'center',
             width: '80%',
             height: '80%',
-            borderRadius: '50%',
+            borderRadius: 'var(--semi-border-radius-circle)',
         };
 
         return (

content/input/form/index-en-US.md

@@ -425,7 +425,7 @@ import { Form, Button, Toast } from '@douyinfe/semi-ui';
                     <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <p>
-                            <span>Or</span><Button theme='borderless' style={{ color: 'rgb(101, 178, 252)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
+                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
                         </p>
                         <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
                     </div>
@@ -458,7 +458,6 @@ import { Form } from '@douyinfe/semi-ui';
 import React from 'react';
 import { Form, Select, Checkbox, Radio } from '@douyinfe/semi-ui';
 
-const { Option } = Select;
 
 class BasicDemo extends React.Component {
     constructor() {
@@ -775,9 +774,8 @@ When submitting, use `formApi.validate()` to centrally verify the Field
 
 ```jsx live=true dir="column"
 import React from 'react';
-import { Form, Modal, Button, Row, Col } from '@douyinfe/semi-ui';
+import { Form, Modal, Select, Button, Row, Col } from '@douyinfe/semi-ui';
 
-const { Option } = Select;
 
 class ModalFormDemo extends React.Component {
     constructor(props) {

content/input/form/index.md

@@ -501,7 +501,7 @@ import { Form, Toast, Button } from '@douyinfe/semi-ui';
                     <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <p>
-                            <span>Or</span><Button theme='borderless' style={{ color: 'rgb(101, 178, 252)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
+                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
                         </p>
                         <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
                     </div>
@@ -967,7 +967,7 @@ class HelpAndExtra extends React.Component {
                     extraText={
                         <div 
                             style={{
-                                color: 'rgba(var(--semi-blue-5), 1)',
+                                color: 'var(--semi-color-link)',
                                 fontSize: 14,
                                 userSelect: 'none',
                                 cursor: 'pointer'

content/input/select/index.md

@@ -332,43 +332,44 @@ import React from 'react';
 import { Select } from '@douyinfe/semi-ui';
 
 () => {
-    let selectStyle = { width: 180, margin: 20 };
     let innerSlotStyle = {
-        backgroundColor: '#FFF',
+        backgroundColor: 'var(--color-white)',
         height: '36px',
         display: 'flex',
         alignItems: 'center',
         cursor: 'pointer',
-        marginLeft: 32,
+        paddingLeft: 32,
+        borderTop: '1px solid var(--semi-color-border)',
         borderRadius: '0 0 6px 6px',
-        color: '#0077FA'
+        color: 'var(--semi-color-link)',
     };
     let innerSlotNode = (<div style={innerSlotStyle}>
         点击加载更多
     </div>);
     let outSlotStyle = {
-        backgroundColor: 'whitesmoke',
+        backgroundColor: 'var(--semi-color-fill-0)',
         height: '36px',
         display: 'flex',
         paddingLeft: 32,
-        color: '#0077FA',
+        color: 'var(--semi-color-link)',
         alignItems: 'center',
         cursor: 'pointer',
+        borderTop: '1px solid var(--semi-color-border)',
         borderRadius: '0 0 6px 6px',
     };
     let outSlotNode = (<div style={outSlotStyle}>
-        <span style={{color: '#0077FA'}}>未找到应用?</span>
+        <span style={{color: 'var(--semi-color-link)'}}>未找到应用?</span>
     </div>);
 
     return (
         <div>
             <p>outerBottomSlot:</p>
             <Select
-                style={selectStyle}
+                style={{ width: 300 }}
                 dropdownStyle={{ width: 180 }}
                 maxHeight={150}
                 outerBottomSlot={outSlotNode}
-                placeholder='自定义外侧底部slot'
+                placeholder='自定义外侧底部slot，始终显示'
                 defaultOpen
                 autoAdjustOverflow={false}
                 position='bottom'
@@ -381,11 +382,11 @@ import { Select } from '@douyinfe/semi-ui';
             </Select>
             <p style={{ marginTop: 200 }}>innerBottomSlot:</p>
             <Select
-                style={selectStyle}
+                style={{ width: 300 }}
                 dropdownStyle={{ width: 180 }}
                 maxHeight={150}
                 innerBottomSlot={innerSlotNode}
-                placeholder='自定义内侧底部slot'
+                placeholder='自定义内侧底部slot，滚动至底部显示'
             >
                 <Select.Option value='abc'>抖音</Select.Option>
                 <Select.Option value='hotsoon'>火山</Select.Option>
@@ -396,6 +397,7 @@ import { Select } from '@douyinfe/semi-ui';
         </div>
     );
 };
+
 ```
 
 通过 outerTopSlot 将内容插入顶部插槽

content/input/upload/index-en-US.md

@@ -102,27 +102,18 @@ import { IconPlus } from '@douyinfe/semi-icons';
     const defaultFileList = [
         {
             uid: '1',
-            name: 'jiafang1.jpeg',
+            name: '1.jpeg',
             status: 'success',
             size: '130kb',
             url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',
         },
         {
             uid: '2',
-            name: 'jiafang2.jpeg',
+            name: '2.jpeg',
             size: '222kb',
-            url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg',
-        },
-        {
-            uid: '5',
-            name: 'jiafang3.jpeg',
-            percent: 50,
-            size: '222kb',
-            url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/8bd8224511db085ed74fea37205aede5.jpg',
-        },
+            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',
+        }
     ];
     const positions = ['right', 'bottom'];
     return (
@@ -166,13 +157,13 @@ import { IconCamera } from '@douyinfe/semi-icons';
     };
 
     const style = {
-        backgroundColor: 'rgba(0,0,0,.4)',
+        backgroundColor: 'var(--semi-color-overlay-bg)',
         height: '100%',
         width: '100%',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        color: '#FFF',
+        color: 'var(--semi-color-white)',
     };
     
     const hoverMask =  (<div style={style}>
@@ -521,7 +512,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
             size: '222KB',
             preview: true,
             fileInstance: new File([new ArrayBuffer(2048)], 'abc.jpeg', { type: 'image/png' }),
-            url: 'https://sf6-cdn-tos.douyinstatic.com/img/ee-finolhu/c2a65140483e4a20802d64af5fec1b39~noop.image',
+            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',
         },
     ];
 
@@ -554,7 +545,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
             status: 'success',
             size: '130KB',
             preview: true,
-            url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/e82f3b261133d2b20d85e8483c203112.jpg',
+            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',
         },
         {
             uid: '2',
@@ -565,18 +556,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
             preview: true,
             fileInstance: new File([new ArrayBuffer(2048)], 'jiafang2.jpeg', { type: 'image/jpeg' }),
             url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/4a55704fb0b8b85eaccdb4ed22469f57.jpg',
-        },
-        {
-            uid: '3',
-            name: 'jiafang.jpeg',
-            status: 'uploading',
-            size: '222KB',
-            percent: 50,
-            preview: true,
-            fileInstance: new File([new ArrayBuffer(2048)], 'jiafang.jpeg', { type: 'image/jpeg' }),
-            url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/4a55704fb0b8b85eaccdb4ed22469f57.jpg',
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',
         },
     ];
 
@@ -623,8 +603,7 @@ import { IconPlus } from '@douyinfe/semi-icons';
             status: 'success',
             size: '130KB',
             preview: true,
-            url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/e82f3b261133d2b20d85e8483c203112.jpg',
+            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',
         },
     ];
     return (
@@ -649,12 +628,19 @@ import { IconPlus } from '@douyinfe/semi-icons';
     const defaultFileList = [
         {
             uid: '1',
-            name: 'jiafang.png',
+            name: '1.png',
             status: 'success',
             size: '130KB',
             preview: true,
-            url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/e82f3b261133d2b20d85e8483c203112.jpg',
+            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',
+        },
+        {
+            uid: '2',
+            name: '2.png',
+            status: 'success',
+            size: '130KB',
+            preview: true,
+            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',
         },
     ];
     return (
@@ -682,7 +668,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
             status: 'success',
             size: '130KB',
             preview: true,
-            url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/e82f3b261133d2b20d85e8483c203112.jpg',
+            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',
         },
         {
             uid: '2',
@@ -690,7 +676,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
             status: 'validateFail',
             size: '222KB',
             preview: true,
-            url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/e82f3b261133d2b20d85e8483c203112.jpg',
+            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',
         },
     ];
     let action = '//semi.design/api/upload';

content/input/upload/index.md

@@ -24,11 +24,15 @@ import React from 'react';
 import { Upload, Button } from '@douyinfe/semi-ui';
 import { IconUpload } from '@douyinfe/semi-icons';
 
-<Upload action="https://run.mocky.io/v3/d6ac5c9e-4d39-4309-a747-7ed3b5694859">
-        <Button icon={<IconUpload />} theme="light">
-        点击上传
-    </Button>
-    </Upload>;
+() => {
+    return (
+        <Upload action="https://run.mocky.io/v3/d6ac5c9e-4d39-4309-a747-7ed3b5694859">
+            <Button icon={<IconUpload />} theme="light">
+                点击上传
+            </Button>
+        </Upload>
+    );
+};
 ```
 
 ### 添加提示文本
@@ -96,7 +100,7 @@ import { IconPlus } from '@douyinfe/semi-icons';
         };
         let style = { ...basicStyle, ...marginStyle[pos] };
 
-        return <div style={style}>请上传萌宠认证材料</div>;
+        return <div style={style}>请上传认证材料</div>;
     };
     const defaultFileList = [
         {
@@ -105,14 +109,7 @@ import { IconPlus } from '@douyinfe/semi-icons';
             status: 'success',
             size: '130kb',
             url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
-        },
-        {
-            uid: '2',
-            name: 'jiafang2.jpeg',
-            size: '222kb',
-            url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg',
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',
         },
         {
             uid: '5',
@@ -120,7 +117,7 @@ import { IconPlus } from '@douyinfe/semi-icons';
             percent: 50,
             size: '222kb',
             url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/8bd8224511db085ed74fea37205aede5.jpg',
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',
         },
     ];
     const positions = ['right', 'bottom'];
@@ -164,13 +161,13 @@ import { IconCamera } from '@douyinfe/semi-icons';
     };
 
     const style = {
-        backgroundColor: 'rgba(0,0,0,.4)',
+        backgroundColor: 'var(--semi-color-overlay-bg)',
         height: '100%',
         width: '100%',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        color: '#FFF',
+        color: 'var(--semi-color-white)',
     };
     
     const hoverMask =  (<div style={style}>
@@ -333,7 +330,7 @@ import { Upload, Button } from '@douyinfe/semi-ui';
 import { IconUpload } from '@douyinfe/semi-icons';
 
 () => {
-    let action = 'https:https://run.mocky.io/v3/d6ac5c9e-4d39-4309-a747-7ed3b5694859';
+    let action = 'https://run.mocky.io/v3/d6ac5c9e-4d39-4309-a747-7ed3b5694859';
     let limit = 1;
     let onChange = props => {
         console.log(props.fileList);
@@ -358,7 +355,7 @@ import { Upload, Button } from '@douyinfe/semi-ui';
 import { IconUpload } from '@douyinfe/semi-icons';
 
 () => {
-    let action = 'https:https://run.mocky.io/v3/d6ac5c9e-4d39-4309-a747-7ed3b5694859';
+    let action = 'https://run.mocky.io/v3/d6ac5c9e-4d39-4309-a747-7ed3b5694859';
     let [disabled, setDisabled] = useState(false);
     let limit = 2;
     let onChange = props => {
@@ -495,6 +492,11 @@ import { IconUpload, IconFile } from '@douyinfe/semi-icons';
 
 通过 `defaultFileList` 可以展示已上传的文件。当需要预览默认文件的缩略图时，你可以将 `defaultFileList` 内对应 `item` 的 `preview` 属性设为 `true`
 
+<Notice title='注意事项'>
+    defaultFileList中 uid 必须唯一，不可重复
+</Notice>
+
+
 ```jsx live=true width=48%
 import React from 'react';
 import { Upload, Button } from '@douyinfe/semi-ui';
@@ -552,7 +554,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
             status: 'success',
             size: '130KB',
             preview: true,
-            url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/e82f3b261133d2b20d85e8483c203112.jpg',
+            url: 'https://sf6-cdn-tos.douyinstatic.com/img/ee-finolhu/c2a65140483e4a20802d64af5fec1b39~noop.image',
         },
         {
             uid: '2',
@@ -563,7 +565,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
             preview: true,
             fileInstance: new File([new ArrayBuffer(2048)], 'jiafang.jpeg', { type: 'image/jpeg' }),
             url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/4a55704fb0b8b85eaccdb4ed22469f57.jpg',
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',
         },
     ];
 
@@ -611,7 +613,7 @@ import { IconPlus } from '@douyinfe/semi-icons';
             size: '130KB',
             preview: true,
             url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/e82f3b261133d2b20d85e8483c203112.jpg',
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',
         },
     ];
     return (
@@ -636,12 +638,21 @@ import { IconPlus } from '@douyinfe/semi-icons';
     const defaultFileList = [
         {
             uid: '1',
-            name: 'jiafang.png',
+            name: 'music.png',
             status: 'success',
             size: '130KB',
             preview: true,
             url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/e82f3b261133d2b20d85e8483c203112.jpg',
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',
+        },
+        {
+            uid: '2',
+            name: 'brand.png',
+            status: 'success',
+            size: '130KB',
+            preview: true,
+            url:
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',
         },
     ];
     return (
@@ -665,19 +676,19 @@ import { IconUpload } from '@douyinfe/semi-icons';
     const defaultFileList = [
         {
             uid: '1',
-            name: 'vigo.png',
+            name: 'first.png',
             status: 'success',
             size: '130KB',
             preview: true,
-            url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/e82f3b261133d2b20d85e8483c203112.jpg',
+            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',
         },
         {
             uid: '2',
-            name: 'vigo2.jpeg',
+            name: 'second.png',
             status: 'validateFail',
             size: '222KB',
             preview: true,
-            url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/e82f3b261133d2b20d85e8483c203112.jpg',
+            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',
         },
     ];
     let action = 'https://run.mocky.io/v3/d6ac5c9e-4d39-4309-a747-7ed3b5694859';
@@ -792,6 +803,7 @@ import { IconBolt } from '@douyinfe/semi-icons';
         <img
             src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/0f2a32f27eab90a296814fbc26103b2b.jpg"
             height="96"
+            alt='demo img'
             style={{ borderRadius: 4 }}
         />
         <div

content/navigation/navigation/index-en-US.md

@@ -785,4 +785,7 @@ function NavApp (props = {}) {
 ## FAQ
 - **Lost animation in navigation bar?**
 
-    When using functional components, you should give items with useState or useMemo, because passing an array directly to items will trigger component rerendering.
+    When using functional components, you should give items with useState or useMemo, because passing an array directly to items will trigger component rerendering.
+
+- **Lost item when subNav is too height >=999px ?**
+    Please refer to [this issue](https://github.com/DouyinFE/semi-design/issues/563)

content/navigation/navigation/index.md

@@ -63,6 +63,7 @@ class NavApp extends React.Component {
 
 ```
 
+
 ### 导航缩进
 
 版本：>= 0.16.0
@@ -789,3 +790,6 @@ function NavApp (props = {}) {
 
 -   **导航动画丢失？**  
     在使用函数式组件时，应该用 useState 或者 useMemo 包裹一下 items，原因是 items 直接传一个数组会触发组件重新渲染。
+
+-   **当子菜单高度超过999px，部分导航消失？**
+    请查看 [此 issue](https://github.com/DouyinFE/semi-design/issues/563)

content/navigation/tabs/index-en-US.md

@@ -67,7 +67,7 @@ class App extends React.Component {
                                 padding: '20px',
                                 border: 'none',
                                 whiteSpace: 'normal',
-                                borderRadius: '6px',
+                                borderRadius: 'var(--semi-border-radius-medium)',
                                 color: 'var(--semi-color-text-1)',
                                 backgroundColor: 'var(--semi-color-fill-0)',
                             }}

content/navigation/tabs/index.md

@@ -64,7 +64,7 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
                         padding: '20px',
                         border: 'none',
                         whiteSpace: 'normal',
-                        borderRadius: '6px',
+                        borderRadius: 'var(--semi-border-radius-medium)',
                         color: 'var(--semi-color-text-1)',
                         backgroundColor: 'var(--semi-color-fill-0)',
                     }}

content/show/avatar/index-en-US.md

@@ -127,7 +127,7 @@ import { IconCamera } from '@douyinfe/semi-icons';
 
 () => {
     const style = {
-        backgroundColor: 'rgba(0,0,0,.4)',
+        backgroundColor: 'var(--semi-color-overlay-bg)',
         height: '100%',
         width: '100%',
         display: 'flex',

content/show/avatar/index.md

@@ -125,7 +125,7 @@ import { IconCamera } from '@douyinfe/semi-icons';
 
 () => {
     const style = {
-        backgroundColor: 'rgba(0,0,0,.4)',
+        backgroundColor: 'var(--semi-color-overlay-bg)',
         height: '100%',
         width: '100%',
         display: 'flex',

content/show/popover/index-en-US.md

@@ -437,9 +437,9 @@ function Demo() {
             visible
             showArrow
             style={{
-                backgroundColor: 'rgb(0,119,250)',
-                borderColor: 'rgb(0,98,214)',
-                color: 'rgb(255,255,255)',
+                backgroundColor: 'rgba(var(--semi-blue-4),1)',
+                borderColor: 'rgba(var(--semi-blue-4),1)',
+                color: 'var(--semi-color-white)',
                 borderWidth: 1,
                 borderStyle: 'solid',
             }}

content/show/popover/index.md

@@ -437,9 +437,9 @@ function Demo() {
             visible
             showArrow
             style={{
-                backgroundColor: 'rgb(0,119,250)',
-                borderColor: 'rgb(0,98,214)',
-                color: 'rgb(255,255,255)',
+                backgroundColor: 'rgba(var(--semi-blue-4),1)',
+                borderColor: 'rgba(var(--semi-blue-4),1)',
+                color: 'var(--semi-color-white)',
                 borderWidth: 1,
                 borderStyle: 'solid',
             }}

content/start/changelog/index-en-US.md

@@ -16,10 +16,24 @@ Version：Major.Minor.Patch
 
 ---
 
+#### 🎉 2.3.1 (2022-01-21)
+- 【Chore】
+    - Fix List component pass the datasource props, the renderItem function params of item missing the type defined [#393](https://github.com/DouyinFE/semi-design/issues/393) [@chenc041](https://github.com/chenc041)
+    - Fix Dropdown props menu type definition
+- 【Fix】
+    - Fixed warning when InputNumber given defaultValue [#537](https://github.com/DouyinFE/semi-design/issues/537) [@chenc041](https://github.com/chenc041)
+
+
+#### 🎉 2.3.0 (2022-01-14)
+- 【Fix】
+    - Fixed Notification display collapsing order [#531](https://github.com/DouyinFE/semi-design/pull/531)
+    - Fixed the problem that the edge click of the remove button is not available in Upload when `listType='picture'` [@pdsuwwz](https://github.com/pdsuwwz) [#525](https://github.com/DouyinFE/semi-design/pull/525)
+    - Removed useless `aria-label` in Collapse, SideSheet, Avatar, Spin components [#536](https://github.com/DouyinFE/semi-design/pull/536)
+
 #### 🎉 2.3.0-beta.0 (2022-01-07)
 - 【Fix】
-    - Fixed the problem that when Form uses the parent fieldPath in formApi.setValue, setError, and setTouch to perform batch assignment to multiple nested fields, there may be a problem of stuck (affecting versions v1.32~v2.2) Checklist
-    - Fix the inaccurate trigger range of Form formApi.validate partial verification Checklist
+    - Fixed the problem that when Form uses the parent fieldPath in formApi.setValue, setError, and setTouch to perform batch assignment to multiple nested fields, there may be a problem of stuck (affecting versions v1.32~v2.2) 
+    - Fix the inaccurate trigger range of Form formApi.validate partial verification [#510](https://github.com/DouyinFE/semi-design/issues/510)
     - Fix the problem that Tooltip did not include spacing when calculating adjustOverflow, which caused the content to exceed (but not exceed 8px) and still not automatically switch the direction.  [#491](https://github.com/DouyinFE/semi-design/issues/491)
     - Fix Tooltip showing that the default direction of the floating layer is insufficient, and it will flicker when adjustOverflow is triggered to automatically switch the direction.   [#69](https://github.com/DouyinFE/semi-design/issues/69)
     - Fix Tree handleNodeDragOver internal event parameters are not properly passed  [#345 ](https://github.com/DouyinFE/semi-design/issues/345)
@@ -354,6 +368,8 @@ Version：Major.Minor.Patch
      - Cascader supports disableStrictly 
      - Tooltip supports wrapperClassName
      - Form formApi.setValue, setError, and setTouched support the use of parent fieldPath to assign values to multiple fields in batches 
+- 【Fix】
+    - **Fixed the problem that when Form ArrayField sets initValue and its subordinate Field also sets initValue, the initial value configured by ArrayField Props has a higher weight than the initial value configured by Field Props. Align the priority rules of Form Props and Field Props, and follow the principle that the sub-level configuration has the highest weight**
 
 #### 🎉 1.31.0 (2021-09-24)
 - 【Fix】

content/start/changelog/index.md

@@ -15,10 +15,23 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 
 ---
 
+#### 🎉 2.3.1 (2022-01-21)
+- 【Chore】
+    - 修复 List 组件传递 datasource 属性时, renderItem 类型丢失 [#393](https://github.com/DouyinFE/semi-design/issues/393) [@chenc041](https://github.com/chenc041)
+    - 修复 Dropdown menu 类型定义异常问题 
+- 【Fix】
+    - 修复 InputNumber 传入 defaultValue 时警告问题 [#537](https://github.com/DouyinFE/semi-design/issues/537) [@chenc041](https://github.com/chenc041)
+
+#### 🎉 2.3.0 (2022-01-14)
+- 【Fix】
+    - 修复 Notification 显示收起顺序 [#531](https://github.com/DouyinFE/semi-design/pull/531)
+    - 修复 Upload 照片墙模式下移除按钮的边缘点击不可用的问题 [@pdsuwwz](https://github.com/pdsuwwz) [#525](https://github.com/DouyinFE/semi-design/pull/525)
+    - 去除了 Collapse、SideSheet、Avatar、Spin 组件中无效的 aria-label [#536](https://github.com/DouyinFE/semi-design/pull/536)
+
 #### 🎉 2.3.0-beta.0 (2022-01-07)
 - 【Fix】
     - 修复 Form 使用 formApi.setValue、setError、setTouch 中用父级fieldPath，对多个嵌套field进行批量赋值时，可能存在卡顿的问题（影响版本 v1.32~v2.2）
-    - 修复Form formApi.validate 局部校验触发范围不准确的问题
+    - 修复Form formApi.validate 局部校验触发范围不准确的问题 [#510](https://github.com/DouyinFE/semi-design/issues/510)
     - 修复 Tooltip 计算 adjustOverflow时未将 spacing纳入，导致内容超出（但未超过8px）后仍未自动切换方向的问题  [#491](https://github.com/DouyinFE/semi-design/issues/491)
     - 修复 Tooltip 展现浮层默认方向空间不足，触发 adjustOverflow 自动切换方向时会闪烁的问题  [#69](https://github.com/DouyinFE/semi-design/issues/69)
     - 修复 Tree handleNodeDragOver 内部 event 传参不恰当的问题  [#345 ](https://github.com/DouyinFE/semi-design/issues/345)
@@ -371,6 +384,8 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
     - Cascader 支持 disableStrictly 
     - Tooltip 支持 wrapperClassName
     - Form formApi.setValue、setError、setTouched 支持使用父级fieldPath，对多个field进行批量赋值 
+- 【Fix】
+    - **修正 Form ArrayField 设置 initValue，其下属的 Field 也设置initValue时 ，通过ArrayField Props 配置的初始值反而比通过Field Props配置的初始值权重高的问题。对齐Form Props、Field Props的优先级生效规则，遵循子级配置权重最高的原则**
 
 #### 🎉 1.31.0 (2021-09-24)
 - 【Fix】

content/start/getting-started/index-en-US.md

@@ -43,9 +43,9 @@ class Demo extends React.Component {
 [![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url]
 
 [build-js-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/umd/semi-ui.min.js?label=semi.min.js&compression=gzip
-[build-js-url]: https://unpkg.com/browse/@douyinfe/semi-ui@2.1.1/dist/umd/semi-ui.min.js
+[build-js-url]: https://unpkg.com/browse/@douyinfe/semi-ui/dist/umd/semi-ui.min.js
 [build-css-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/css/semi.min.css?label=semi.min.css&compression=gzip
-[build-css-url]: https://unpkg.com/browse/@douyinfe/semi-ui@2.1.1/dist/css/semi.min.css
+[build-css-url]: https://unpkg.com/browse/@douyinfe/semi-ui/dist/css/semi.min.css
 
 > We do not recommend using the built file directly, as this will introduce all components in full and cannot be loaded on demand. But if there is indeed a need for non-construction scenarios, you can quote in the following ways
 
@@ -137,14 +137,19 @@ module.exports = semi({
 });
 ```
 
-[Detailed documentation]() of `@douyinfe/semi-next`.
+[Detailed documentation](https://www.npmjs.com/package/@douyinfe/semi-next) of `@douyinfe/semi-next`.
 
 ### Step3
 
-Introduce the full amount of semi css in `global.css`. Currently, on-demand introduction is not supported.
+Introduce the full amount of semi css in `global.css`. Currently, on-demand import is not supported.
 
 ``` css
 /* styles/globals.css */
 @import '~@douyinfe/semi-ui/dist/css/semi.min.css';
 
 ```
+
+**Using theme in nextjs**
+
+Please refer to [this issue](https://github.com/DouyinFE/semi-design/issues/565)
+

content/start/getting-started/index.md

@@ -74,7 +74,7 @@ module.exports = semi({
 });
 ```
 
-`@douyinfe/semi-next` 的[详细文档]()。
+`@douyinfe/semi-next` 的 [详细文档](https://www.npmjs.com/package/@douyinfe/semi-next) 。
 
 ### Step3
 
@@ -85,14 +85,18 @@ module.exports = semi({
 @import '~@douyinfe/semi-ui/dist/css/semi.min.css';
 ```
 
+**在 nextjs 中使用主题包**
+
+请查阅 [此 issue](https://github.com/DouyinFE/semi-design/issues/565) 中的方法
+
 ## 4、UMD 方式使用组件
 
 [![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url]
 
 [build-js-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/umd/semi-ui.min.js?label=semi.min.js&compression=gzip
-[build-js-url]: https://unpkg.com/browse/@douyinfe/semi-ui@2.1.1/dist/umd/semi-ui.min.js
+[build-js-url]: https://unpkg.com/browse/@douyinfe/semi-ui/dist/umd/semi-ui.min.js
 [build-css-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/css/semi.min.css?label=semi.min.css&compression=gzip
-[build-css-url]: https://unpkg.com/browse/@douyinfe/semi-ui@2.1.1/dist/css/semi.min.css
+[build-css-url]: https://unpkg.com/browse/@douyinfe/semi-ui/dist/css/semi.min.css
 
 > 我们并不推荐直接使用已构建文件，这样会全量引入所有组件，无法实现按需加载。但如果确实有非构建场景的需求，可以通过以下方式引用
 

gatsby-node.js

@@ -10,7 +10,6 @@ const path = require('path');
 const fs = require('fs');
 const processGraphQLData = require('./search/generator');
 const items = ['basic', 'chart'];
- 
 const sha1 = require('sha1');
 const hash = sha1(`${new Date().getTime()}${Math.random()}`);
 const glob = require('glob');
@@ -29,7 +28,7 @@ const addPageDataVersion = async file => {
         fs.writeFileSync(file, result, 'utf8');
     }
 };
- 
+
 function resolve(dir) {
     return path.resolve(__dirname, dir);
 }
@@ -41,7 +40,7 @@ const getLocale = path => {
     }
     return locale;
 };
- 
+
 exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) => {
     const isSSR = stage.includes('html');
     const sassLoader = () => 'sass-loader';
@@ -52,15 +51,15 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
             ...options,
         },
     });
- 
+
     const semiOptions = { esbuild: true };
     const srcScssModuleUse = [];
     const srcScssUse = [];
     const srcCssUse = [];
     const semiDvScssUse = [];
- 
+
     const semiDvJsxRule = [];
- 
+
     // for semi
     semiOptions.scssUse = [
         loaders.css({
@@ -108,7 +107,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
             }
         );
     }
- 
+
     actions.setWebpackConfig({
         resolve: {
             alias: {
@@ -176,37 +175,40 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
                 }
             ],
         },
-        plugins: [plugins.extractText()],
+        plugins: [plugins.extractText(),plugins.define({
+            "THEME_SWITCHER_URL":JSON.stringify(process.env['THEME_SWITCHER_URL']),
+            'process.env.SEMI_SITE_HEADER':JSON.stringify(process.env.SEMI_SITE_HEADER)
+        })],
     });
 };
- 
+
 exports.onCreateNode = ({ node, getNode, actions }) => {
     const { createNodeField } = actions;
- 
+
     if (node.internal.type === 'Mdx') {
         const mdxNode = getNode(node.parent);
         const levels = mdxNode.relativePath.split(path.sep);
- 
+
         const locale = getLocale(mdxNode.name);
- 
+
         createNodeField({
             node,
             name: 'slug',
             value: `${locale}/${levels[0]}/${levels[1]}`, // eg: zh-CN/chart/area
         });
- 
+
         createNodeField({
             node,
             name: 'type',
             value: `${levels[0]}`,
         });
- 
+
         createNodeField({
             node,
             name: 'typeOrder',
             value: items.indexOf(levels[0]),
         });
- 
+
         createNodeField({
             node,
             name: 'locale',
@@ -214,18 +216,18 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
         });
     }
 };
- 
+
 exports.onPreBootstrap = ({ Joi }) => {
     let orderFunc = require('./content/order');
     console.log('starting order mdx');
     orderFunc();
 };
- 
+
 exports.createPages = async ({ actions, graphql, reporter }) => {
     const { createPage } = actions;
- 
+
     const blogPostTemplate = path.resolve('src/templates/postTemplate.js');
- 
+
     // 开始处理搜索数据
     // console.log('building search data.');
     const searchData = await graphql(`
@@ -248,7 +250,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
            }
          }
        }`);
- 
+
     // 在此你可以处理searchData(GraphQL查询的raw数据) 或者传入回调 处理运算后的数据
     processGraphQLData(searchData, processedData => {});
     // 搜索有用到，但是目前没有搜索，先注释掉，不然影响文档站的本地调试
@@ -304,7 +306,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         reporter.panicOnBuild('Error while running GraphQL query.');
         return;
     }
- 
+
     result.data.allMdx.edges.forEach(({ next, previous, node }) => {
         createPage({
             path: node.fields.slug,
@@ -319,12 +321,12 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         });
     });
 };
- 
+
 exports.onPostBootstrap = async () => {
     const loader = path.join(__dirname, 'node_modules/gatsby/cache-dir/loader.js');
     await addPageDataVersion(loader);
 };
- 
+
 exports.onPostBuild = async () => {
     const publicPath = path.join(__dirname, 'public');
     const htmlAndJSFiles = glob.sync(`${publicPath}/**/*.{html,js}`);
@@ -332,4 +334,3 @@ exports.onPostBuild = async () => {
         await addPageDataVersion(file);
     }
 };
- 

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.3.0-beta.0"
+    "version": "2.3.1"
 }

package.json

@@ -40,7 +40,7 @@
   "dependencies": {
     "@douyinfe/semi-site-banner": "0.0.1",
     "@douyinfe/semi-site-doc-style": "0.0.1",
-    "@douyinfe/semi-site-header": "0.0.3",
+    "@douyinfe/semi-site-header": "0.0.6-alpha.3",
     "@douyinfe/semi-site-markdown-blocks": "0.0.1",
     "@mdx-js/react": "^1.6.22",
     "@svgr/core": "^5.5.0",

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-react",
-  "version": "2.3.0-beta.0",
+  "version": "2.3.1",
   "description": "motion library for semi-ui-react",
   "keywords": [
     "motion",
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.15.4",
-    "@douyinfe/semi-animation": "2.3.0-beta.0",
-    "@douyinfe/semi-animation-styled": "2.3.0-beta.0",
+    "@douyinfe/semi-animation": "2.3.1",
+    "@douyinfe/semi-animation-styled": "2.3.1",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-styled",
-  "version": "2.3.0-beta.0",
+  "version": "2.3.1",
   "description": "semi styled animation",
   "keywords": [
     "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation",
-  "version": "2.3.0-beta.0",
+  "version": "2.3.1",
   "description": "animation base library for semi-ui",
   "keywords": [
     "animation",

packages/semi-foundation/input/textarea.scss

@@ -55,11 +55,7 @@ $module: #{$prefix}-input;
         }
     }
 
-    &-readonly {
-        cursor: default;
-    }
-
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         // border: $border-thickness-control $color-input_disabled-border-default solid;
         color: $color-input_disabled-text-default;
@@ -74,6 +70,10 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-error {
         background-color: $color-input_danger-bg-default;
         border-color: $color-input_danger-border-default;
@@ -151,7 +151,7 @@ $module: #{$prefix}-input;
         padding-right: $spacing-textarea_withShowClear-paddingRight;
     }
 
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         color: $color-input_disabled-text-default;
         background-color: transparent;
@@ -165,10 +165,14 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-autosize {
         overflow: hidden;
     }
-    
+
     &-counter {
         @include font-size-small;
         display: flex;

packages/semi-foundation/inputNumber/constants.ts

@@ -10,6 +10,7 @@ const numbers = {
     DEFAULT_SHIFT_STEP: 1,
     DEFAULT_PRESS_TIMEOUT: 250,
     DEFAULT_PRESS_INTERVAL: 0,
+    MOUSE_BUTTON_LEFT: 0, // left mouse button
 };
 
 const strings = {

packages/semi-foundation/inputNumber/foundation.ts

@@ -4,7 +4,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import keyCode from '../utils/keyCode';
 import { numbers } from './constants';
-import { toNumber, toString } from 'lodash';
+import { toNumber, toString, get } from 'lodash';
 import { minus as numberMinus } from '../utils/number';
 
 export interface InputNumberAdapter extends DefaultAdapter {
@@ -286,6 +286,9 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleUpClick(event: any) {
+        if (!this._isMouseButtonLeft(event)) {
+            return;
+        }
         this._adapter.setClickUpOrDown(true);
         if (event) {
             event.persist();
@@ -303,6 +306,9 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleDownClick(event: any) {
+        if (!this._isMouseButtonLeft(event)) {
+            return;
+        }
         this._adapter.setClickUpOrDown(true);
         if (event) {
             event.persist();
@@ -317,6 +323,14 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         });
     }
 
+    /**
+     * Whether it is a left mouse button click
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+     */
+    _isMouseButtonLeft(event: any) {
+        return get(event, 'button') === numbers.MOUSE_BUTTON_LEFT;
+    }
+
     _preventDefault(event: any) {
         const keepFocus = this._adapter.getProp('keepFocus');
         if (keepFocus) {

packages/semi-foundation/notification/notificationListFoundation.ts

@@ -4,24 +4,22 @@ import { NoticeInstance, NoticePosition, NoticeProps } from '../notification/not
 import { strings } from './constants';
 
 
-
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface NotificationListProps{
+export interface NotificationListProps {
 
 }
 
-export interface NotificationListState{
+export interface NotificationListState {
     notices: NoticeInstance[];
     removedItems: NoticeInstance[];
 }
 
-export interface NotificationListAdapter extends DefaultAdapter<NotificationListProps, NotificationListState>{
+export interface NotificationListAdapter extends DefaultAdapter<NotificationListProps, NotificationListState> {
     updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[]) => void;
     getNotices: () => NoticeInstance[];
 }
 
 
-
 export interface ConfigProps {
     top?: number | string;
     bottom?: number | string;
@@ -34,8 +32,6 @@ export interface ConfigProps {
 }
 
 
-
-
 export default class NotificationListFoundation extends BaseFoundation<NotificationListAdapter> {
 
     addNotice(opts: NoticeProps) {
@@ -48,7 +44,7 @@ export default class NotificationListFoundation extends BaseFoundation<Notificat
         //         this.removeNotice(opts.id);
         //     }, opts.duration * 1000);
         // }
-        this._adapter.updateNotices([...notices, opts]);
+        this._adapter.updateNotices([opts, ...notices]);
         // return id;
     }
 

packages/semi-foundation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.3.0-beta.0",
+    "version": "2.3.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.3.0-beta.0",
+        "@douyinfe/semi-animation": "2.3.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons",
-  "version": "2.3.0-beta.0",
+  "version": "2.3.1",
   "description": "semi icons",
   "keywords": [
     "semi",
@@ -38,7 +38,7 @@
     "@babel/plugin-transform-runtime": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
-    "@douyinfe/semi-webpack-plugin": "2.3.0-beta.0",
+    "@douyinfe/semi-webpack-plugin": "2.3.1",
     "babel-loader": "^8.2.2",
     "css-loader": "4.3.0",
     "del": "^6.0.0",

packages/semi-illustrations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-illustrations",
-  "version": "2.3.0-beta.0",
+  "version": "2.3.1",
   "description": "semi illustrations",
   "keywords": [
     "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.3.0-beta.0",
+    "version": "2.3.1",
     "description": "Plugin that support Semi Design in Next.js",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",
@@ -23,7 +23,7 @@
         "typescript": "^4"
     },
     "dependencies": {
-        "@douyinfe/semi-webpack-plugin": "2.3.0-beta.0"
+        "@douyinfe/semi-webpack-plugin": "2.3.1"
     },
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a"
 }

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-scss-compile",
-  "version": "2.3.0-beta.0",
+  "version": "2.3.1",
   "description": "compile semi scss to css",
   "author": "[email protected]",
   "license": "MIT",

packages/semi-theme-default/README.md

@@ -24,12 +24,12 @@ You can make a custom theme through [Semi Design System](https://semi.design/dsm
 
 ## Design Token stratification principle
 
-![Theme scheme](https://lf26-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/tech-doc/theme-arch.png "Theme scheme")
+![Theme scheme](https://lf26-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/tech-doc/theme-arch.png)
 
 - No need to switch at runtime, carried by sass variable
 - Need to support runtime switching, such as the color variable related to the dark mode, carried by css variable
 
-![Design Token](https://lf26-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/tech-doc/theme-design-token.png "Design Token")
+![Design Token](https://lf26-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/tech-doc/theme-design-token.png)
 
 ## License
 

packages/semi-theme-default/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-theme-default",
-    "version": "2.3.0-beta.0",
+    "version": "2.3.1",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/dropdown/index.tsx

@@ -25,12 +25,20 @@ export { DropdownDividerProps } from './dropdownDivider';
 export { DropdownItemProps, Type } from './dropdownItem';
 export { DropdownMenuProps } from './dropdownMenu';
 export { DropdownTitleProps } from './dropdownTitle';
-export interface DropDownMenuItemBasic {
-    node: 'title' | 'item' | 'divider';
+
+export interface DropDownMenuItemItem extends DropdownItemProps {
+    node: 'item';
     name?: string;
 }
+export interface DropDownMenuItemDivider extends DropdownDividerProps {
+    node: 'divider'
+}
+export interface DropDownMenuItemTitle extends DropdownTitleProps {
+    node: 'title';
+    name?: string
+}
 
-export type DropDownMenuItem = DropDownMenuItemBasic & DropdownItemProps & DropdownDividerProps & DropdownTitleProps;
+export type DropDownMenuItem = DropDownMenuItemItem | DropDownMenuItemDivider | DropDownMenuItemTitle;
 
 export interface DropdownProps extends TooltipProps {
     render?: React.ReactNode;

packages/semi-ui/input/textarea.tsx

@@ -295,7 +295,8 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
             className,
             `${prefixCls}-textarea-wrapper`,
             {
-                [`${prefixCls}-textarea-wrapper-disabled`]: disabled || readonly,
+                [`${prefixCls}-textarea-wrapper-disabled`]: disabled,
+                [`${prefixCls}-textarea-wrapper-readonly`]: readonly,
                 [`${prefixCls}-textarea-wrapper-${validateStatus}`]: Boolean(validateStatus),
                 [`${prefixCls}-textarea-wrapper-focus`]: isFocus,
                 // [`${prefixCls}-textarea-wrapper-resize`]: !autosize && resize,
@@ -305,7 +306,8 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
         const itemCls = cls(
             `${prefixCls}-textarea`,
             {
-                [`${prefixCls}-textarea-disabled`]: disabled || readonly,
+                [`${prefixCls}-textarea-disabled`]: disabled,
+                [`${prefixCls}-textarea-readonly`]: readonly,
                 [`${prefixCls}-textarea-autosize`]: autosize,
                 [`${prefixCls}-textarea-showClear`]: showClear,
             }
@@ -346,4 +348,4 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
 
 const ForwardTextarea = React.forwardRef<HTMLTextAreaElement, Omit<TextAreaProps, 'forwardRef'>>((props, ref) => <TextArea {...props} forwardRef={ref} />);
 
-export default ForwardTextarea;
+export default ForwardTextarea;

packages/semi-ui/inputNumber/__test__/inputNumber.test.js

@@ -5,6 +5,7 @@ import sinon from 'sinon';
 import keyCode from '@douyinfe/semi-foundation/utils/keyCode';
 import * as _ from 'lodash';
 import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import { numbers } from '@douyinfe/semi-foundation/inputNumber/constants';
 import { Form, withField } from '../../index';
 
 const log = (...args) => console.log(...args);
@@ -216,8 +217,8 @@ describe(`InputNumber`, () => {
         const addCount = 3;
         const minusCount = 1;
 
-        _.times(addCount, () => addBtn.simulate('mousedown'));
-        _.times(minusCount, () => minusBtn.simulate('mousedown'));
+        _.times(addCount, () => addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
+        _.times(minusCount, () => minusBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
 
         expect(inputElem.instance().value).toBe(String(defaultValue + addCount - minusCount));
         expect(onUpClick.called).toBe(true);
@@ -243,8 +244,8 @@ describe(`InputNumber`, () => {
         const addCount = 3;
         const minusCount = 1;
 
-        _.times(addCount, () => addBtn.simulate('mousedown'));
-        _.times(minusCount, () => minusBtn.simulate('mousedown'));
+        _.times(addCount, () => addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
+        _.times(minusCount, () => minusBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
 
         expect(inputElem.instance().value).toBe(String(defaultValue + addCount - minusCount));
         expect(onUpClick.called).toBe(true);
@@ -283,9 +284,9 @@ describe(`InputNumber`, () => {
         // click button focus
         const addCount = 3;
         const minusCount = 1;
-        _.times(addCount, () => addBtn.simulate('mousedown'));
+        _.times(addCount, () => addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
         _.times(addCount, () => addBtn.simulate('mouseup'));
-        _.times(minusCount, () => minusBtn.simulate('mousedown'));
+        _.times(minusCount, () => minusBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
         _.times(minusCount, () => minusBtn.simulate('mouseup'));
         expect(inputElem.instance().value).toBe(String(defaultValue + addCount - minusCount));
         expect(inputNumber.find(BaseInputNumber).state('focusing')).toBeTruthy();
@@ -338,7 +339,7 @@ describe(`InputNumber`, () => {
         const btns = inputNumber.find(`.${BASE_CLASS_PREFIX}-input-number-suffix-btns .${BASE_CLASS_PREFIX}-input-number-button`);
         const inputElem = inputNumber.find('input');
         const addBtn = btns.first();
-        addBtn.simulate('mousedown');
+        addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT });
         expect(inputElem.instance().value).toBe("1");
     })
 
@@ -366,5 +367,32 @@ describe(`InputNumber`, () => {
         inputElem.simulate('change', newEvent);
         expect(onNumberChange.calledOnce).toBe(true);
         expect(inputElem.instance().value).toBe('123');
-    })
+    });
+
+    /**
+     * test buttons right click
+     */
+     it(`right click add/minus button`, async () => {
+        const defaultValue = 1000;
+        const onUpClick = sinon.spy();
+        const onDownClick = sinon.spy();
+        const MOUSE_BUTTON_RIGHT = 2;
+
+        const inputNumber = mount(
+            <InputNumber defaultValue={defaultValue} onUpClick={onUpClick} onDownClick={onDownClick} />
+        );
+        const inputElem = inputNumber.find('input');
+
+        const btns = inputNumber.find(`.${BASE_CLASS_PREFIX}-input-number-suffix-btns .${BASE_CLASS_PREFIX}-input-number-button`);
+
+        const addBtn = btns.first();
+        const minusBtn = btns.last();
+
+        _.times(1, () => addBtn.simulate('mousedown', { button: MOUSE_BUTTON_RIGHT  }));
+        _.times(3, () => minusBtn.simulate('mousedown', { button: MOUSE_BUTTON_RIGHT }));
+
+        expect(inputElem.instance().value).toBe(String(defaultValue));
+        expect(onUpClick.called).toBe(false);
+        expect(onDownClick.called).toBe(false);
+    });
 });

packages/semi-ui/inputNumber/index.tsx

@@ -447,6 +447,7 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
             style,
             onNumberChange,
             keepFocus,
+            defaultValue,
             ...rest
         } = this.props;
         const { value, number } = this.state;
@@ -508,4 +509,4 @@ export default forwardStatics(
     InputNumber
 );
 
-export { InputNumber };
+export { InputNumber };

packages/semi-ui/list/index.tsx

@@ -14,7 +14,7 @@ import BaseComponent from '../_base/baseComponent';
 
 export { ListItemProps } from './item';
 
-export interface ListProps {
+export interface ListProps<T> {
     style?: React.CSSProperties;
     className?: string;
     bordered?: boolean;
@@ -24,8 +24,8 @@ export interface ListProps {
     size?: 'small' | 'large' | 'default';
     split?: boolean;
     emptyContent?: React.ReactNode;
-    dataSource?: any[];
-    renderItem?: (item: any, ind: number) => React.ReactNode;
+    dataSource?: T[];
+    renderItem?: (item: T, ind: number) => React.ReactNode;
     grid?: Grid;
     loading?: boolean;
     loadMore?: React.ReactNode;
@@ -35,7 +35,7 @@ export interface ListProps {
 
 const prefixCls = cssClasses.PREFIX;
 
-class List extends BaseComponent<ListProps> {
+class List<T = any> extends BaseComponent<ListProps<T>> {
     static Item = ListItem;
 
     static propTypes = {
@@ -170,4 +170,4 @@ class List extends BaseComponent<ListProps> {
     }
 }
 
-export default List;
+export default List;

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.3.0-beta.0",
+    "version": "2.3.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,11 +14,11 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation-react": "2.3.0-beta.0",
-        "@douyinfe/semi-foundation": "2.3.0-beta.0",
-        "@douyinfe/semi-icons": "2.3.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.3.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.3.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.3.1",
+        "@douyinfe/semi-foundation": "2.3.1",
+        "@douyinfe/semi-icons": "2.3.1",
+        "@douyinfe/semi-illustrations": "2.3.1",
+        "@douyinfe/semi-theme-default": "2.3.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -74,7 +74,7 @@
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.3.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.3.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

packages/semi-ui/select/index.tsx

@@ -739,7 +739,12 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
         return (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus
-            <div role="button" aria-label="Use the input box to create an optional item" onClick={e => this.onSelect(option, optionIndex, e)} key={new Date().valueOf()}>
+            <div
+                role="button"
+                aria-label="Use the input box to create an optional item"
+                onClick={e => this.onSelect(option, optionIndex, e)}
+                key={option.key || option.label}
+            >
                 {customCreateItem}
             </div>
         );

packages/semi-webpack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-webpack-plugin",
-    "version": "2.3.0-beta.0",
+    "version": "2.3.1",
     "description": "",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",

src/components/Notice/index.scss

@@ -7,6 +7,10 @@
     margin-bottom: 2 * $bf;
     border-radius: 3px 6px 6px 3px;
 
+    span[role=img] {
+        font-size: 22px;
+    }
+
     &.primary {
         background: var(--semi-color-primary-light-default);
         border-left: 4px solid var(--semi-color-primary);

src/html.js

@@ -156,6 +156,9 @@ export default function HTML(props) {
                 <meta httpEquiv="x-ua-compatible" content="ie=edge" />
                 <meta name="viewport" content="width=1440, initial-scale=0, shrink-to-fit=no" />
                 <script src="https://lf1-cdn-tos.bytescm.com/goofy/semi_convenience/semi-analyze.js" />
+                {
+                    THEME_SWITCHER_URL?<script src={THEME_SWITCHER_URL} defer={true}/>:<script src="https://unpkg.byted-static.com/latest/ies/semi-theme-switcher-opensource/dist/semi-theme-switcher.js" defer={true}/>
+                }
                 <link rel="icon" href="https://lf9-static.semi.design/obj/semi-tos/images/favicon.ico" />
                 <script dangerouslySetInnerHTML={{ __html: `(${darkmodeProcesser.toString()})()` }} />
                 {props.headComponents}

src/sitePages/newHome/components/banner/banner.jsx

@@ -24,8 +24,8 @@ function Banner() {
                     </div>
                     <div className={styles.group2835}>
                         <Button onClick={goStart} size="large" theme="solid" className={styles.extraLarge}>{_t("start_using", { }, "开始使用")}</Button>
-                        <div onClick={goGithub} className={styles.buttonSecondarySolid_4427b030} role="button" tabIndex={0}><IconGithubLogo size="extra-large" /><p className={styles.text_bff7eaeb}>GitHub</p>
-                        </div>
+                        <Button onClick={goGithub}  size="large" type={'tertiary'} theme="borderless" style={{border:'1px solid var(--semi-color-border)',color:'var(--semi-color-text-0)',marginLeft:'16px'}} className={styles.extraLarge}  icon={<IconGithubLogo size={'large'}/>}>GitHub</Button>
+
                     </div>
                 </div>
                 <div className={styles.autoWrapper_4fa00029}>
@@ -34,6 +34,10 @@ function Banner() {
                         src="https://lf9-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/37361.png"
                         alt="semi application demo"
                         className={styles.group3736} />
+                    <img
+                        src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/desk-dark.png"
+                        alt="semi application demo"
+                        className={`${styles.group3736dark}`} />
                 </div>
             </div>
         </div>

src/sitePages/newHome/components/banner/banner.module.scss

@@ -170,3 +170,21 @@
     margin-left: -30px;
     margin-top: -30px;
 }
+
+.group3736dark {
+    display: none;
+    position: relative;
+    height: 682px;
+    margin-left: -30px;
+    margin-top: -30px;
+}
+
+body[theme-mode='dark'] {
+    .group3736 {
+        display: none;
+    }
+
+    .group3736dark {
+        display: inline;
+    }
+}

src/templates/postTemplate.js

@@ -362,26 +362,26 @@ const components = {
             })
             return dataSource;
         }
-        try {
-            const columns = getColumnsFromFiber(columnsFiber);
-            const dataSource = getDataFromFiber(dataFiber);
-            return (
-                <div className="table-container gatsby-table-container">
-                    {/* <table className="md markdown gatsby-table">{children}</table> */}
-                    <Table
-                        pagination={false}
-                        columns={columns}
-                        dataSource={dataSource}
-                    />
-                </div>
-            );
-        } catch {
+        // try {
+        //     const columns = getColumnsFromFiber(columnsFiber);
+        //     const dataSource = getDataFromFiber(dataFiber);
+        //     return (
+        //         <div className="table-container gatsby-table-container">
+        //             {/* <table className="md markdown gatsby-table">{children}</table> */}
+        //             <Table
+        //                 pagination={false}
+        //                 columns={columns}
+        //                 dataSource={dataSource}
+        //             />
+        //         </div>
+        //     );
+        // } catch {
             return (
                 <div className="table-container gatsby-table-container">
                     <table className="md markdown gatsby-table">{children}</table>
                 </div>
             );
-        }
+        // }
     },
 };
 

src/templates/toUEDUtils/toUED.ts

@@ -51,6 +51,8 @@ const transContent=(site:'main'|'design')=>{
                 try {
                     const data=JSON.parse(e.data);
                     if (data['scrollHeight']){
+                        // @ts-ignore
+                        window.syncThemeToIframe && window.syncThemeToIframe();
                         iframeDOM.style['height']=`${data['scrollHeight']}px`;
                         iframeContainer.style['height']=`${data['scrollHeight']}px`;
                         console.log('height===>',data['scrollHeight']);

yarn.lock

@@ -1676,13 +1676,14 @@
   resolved "https://registry.npmjs.org/@douyinfe/semi-site-doc-style/-/semi-site-doc-style-0.0.1.tgz#c3c803014218ec00441dac32db9a875f6222ed0b"
   integrity sha512-y7Jc1i9q/O2idfaqckSJvghpt4AboQJgZ4iTEK8UMqjQkyWmb5I/NRzVWjOP9S0LEbJNs76OKfZil7DwsOmY/A==
 
-"@douyinfe/[email protected]":
-  version "0.0.3"
-  resolved "https://registry.npmjs.org/@douyinfe/semi-site-header/-/semi-site-header-0.0.3.tgz#3cf22161d70101e9191e28738242254601d17e81"
-  integrity sha512-pRDwL701g3KQIueTh5mNg/uUK9JJLUfFzC7g7I8k7MSZ8KxtaqdrNqZkulBJY2Cchd3De7UY1aVi4q8bNp0A4A==
+"@douyinfe/[email protected].6-alpha.3":
+  version "0.0.6-alpha.3"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-site-header/-/semi-site-header-0.0.6-alpha.3.tgz#b3f6943ca340c97556ada9ef1886b52485e21db5"
+  integrity sha512-tRE9AXguPWt6mkkCCgTm0DflnC2k+GrX87DmDUuLrxp1M8c0t5DoLoTONc0Jwme0M+fHVsJqqCC/cto8os71zQ==
   dependencies:
     "@douyinfe/semi-icons" "2.0.0"
     "@douyinfe/semi-ui" "2.0.0"
+    axios "^0.23.0"
     chroma-js "^2.1.0"
     classnames "^2.3.1"
     i18next "^21.3.2"
@@ -25260,10 +25261,8 @@ watchpack@^1.7.4:
   resolved "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
   integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
   dependencies:
-    chokidar "^3.4.1"
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
-    watchpack-chokidar2 "^2.0.1"
   optionalDependencies:
     chokidar "^3.4.1"
     watchpack-chokidar2 "^2.0.1"