docs: add new tag for new component

content/basic/button/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 19
+order: 18
 category: Input
 title:  Button
 subTitle: Button

content/basic/button/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 19
+order: 18
 category: 输入类
 title:  Button 按钮
 icon: doc-button

content/basic/divider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 14
+order: 20
 category: Basic
 title:  Divider
 icon: doc-divider

content/basic/divider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 14
+order: 20
 category: 基础 
 title:  Divider 分割线 
 icon: doc-divider 

content/basic/grid/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 15
+order: 16
 category: Basic
 title:  Grid
 icon: doc-grid

content/basic/grid/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 15
+order: 16
 category: 基础
 title:  Grid 栅格
 icon: doc-grid

content/basic/icon/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 16
+order: 21
 category: Basic
 title: Icon
 subTitle: Icon

content/basic/icon/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 16
+order: 21
 category: 基础
 title:  Icon 图标
 icon: doc-icons

content/basic/layout/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 17
+order: 15
 category: Basic
 title:  Layout
 subTitle: Layout

content/basic/layout/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 17
+order: 15
 category: 基础
 title: Layout 布局
 icon: doc-layout

content/show/resizable/index-en-US.md → content/basic/resizable/index-en-US.md

@@ -1,10 +1,11 @@
 ---
 localeCode: en-US
-order: 68
-category: Show
+order: 17
+category: Basic
 title: Resizable
 icon: doc-steps
 dir: column
+showNew: true
 brief: The component size is adjusted based on the user's mouse drag, supporting both resizing of a single component and combined resizing.
 ---
 
@@ -12,6 +13,8 @@ brief: The component size is adjusted based on the user's mouse drag, supporting
 
 ### How to import
 
+Resizable supported from 2.69.0
+
 ```jsx 
 import { Resizable } from '@douyinfe/semi-ui';
 import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui'

content/basic/resizable/index.md

@@ -0,0 +1,760 @@
+---
+localeCode: zh-CN
+order: 17
+category: 基础
+title: Resizable 伸缩框
+icon: doc-steps
+brief: 根据用户的鼠标拖拽，改变组件的大小，支持单个组件伸缩与组合伸缩
+showNew: true
+---
+
+## 代码演示
+
+### 如何引入
+
+Resizable 从 2.69.0 开始支持
+
+```jsx
+import { Resizable } from '@douyinfe/semi-ui';
+import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui';
+```
+
+### 单个组件 基本使用
+
+通过`defaultSize`设置初始大小，可以通过`onResizeStart` `onResize` `onResizeEnd`设置拖拽的回调
+
+```tsx
+interface Size {
+    width: string | number;
+    height: string | number;
+}
+```
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Resizable } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const [text, setText] = useState('Drag edge to resize');
+    const opts_1 = {
+        content: 'resize start',
+        duration: 1,
+        stack: true,
+    };
+    const opts_2 = {
+        content: 'resize end',
+        duration: 1,
+        stack: true,
+    };
+    return (
+        <div style={{ width: '500px' }}>
+            <Resizable
+                style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}
+                defaultSize={{
+                    width: '60%',
+                    height: 300,
+                }}
+                onChange={() => {
+                    setText('resizing');
+                }}
+                onResizeStart={() => Toast.info(opts_1)}
+                onResizeEnd={() => {
+                    Toast.info(opts_2);
+                    setText('Drag edge to resize');
+                }}
+            >
+                <div style={{ marginLeft: '20%' }}>{text}</div>
+            </Resizable>
+        </div>
+    );
+}
+```
+
+### 控制伸缩方向
+
+通过设置`enable`的值开启/关闭特定伸缩方向，默认值均为`true`
+
+```tsx
+interface Enable {
+    left: Boolean;
+    right: Boolean;
+    top: Boolean;
+    bottom: Boolean;
+    topLeft: Boolean;
+    topRight: Boolean;
+    bottomLeft: Boolean;
+    bottomRight: Boolean;
+}
+```
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Resizable, Switch, Typography } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const [b, setB] = useState(false);
+    const { Title } = Typography;
+    return (
+        <div style={{ width: '500px', height: '60%' }}>
+            <div style={{ display: 'flex', alignItems: 'center', margin: 8 }}>
+                <Switch checked={b} onChange={setB}></Switch>
+                <Title heading={6} style={{ margin: 8 }}>
+                    {b ? 'able' : 'disable'}
+                </Title>
+            </div>
+            <Resizable
+                style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}
+                enable={{
+                    left: b,
+                }}
+                defaultSize={{
+                    width: 200,
+                    height: 200,
+                }}
+            >
+                <div style={{ marginLeft: '20%' }}>{'enable.left:' + b}</div>
+            </Resizable>
+        </div>
+    );
+}
+```
+
+### 设置变化比例
+
+通过`ratio`设置拖动和实际变化的比例
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Resizable } from '@douyinfe/semi-ui';
+
+function Demo() {
+    return (
+        <div style={{ width: '500px', height: '60%' }}>
+            <Resizable
+                style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}
+                ratio={2}
+                defaultSize={{
+                    width: 200,
+                    height: 200,
+                }}
+            >
+                <div style={{ marginLeft: '20%' }}>ratio=2</div>
+            </Resizable>
+        </div>
+    );
+}
+```
+
+### 锁定横纵比
+
+通过`lockAspectRatio`设置锁定横纵比,可以为`boolean`或`number`,为`number`时表示横纵比为`number`,为`true`时锁定初始横纵比
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Resizable } from '@douyinfe/semi-ui';
+
+function Demo() {
+    return (
+        <div style={{ width: '500px', height: '60%' }}>
+            <Resizable
+                style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', marginBottom: '10px' }}
+                defaultSize={{
+                    width: 400,
+                    height: 300,
+                }}
+                lockAspectRatio
+            >
+                <div style={{ marginLeft: '20%' }}>lock</div>
+            </Resizable>
+            <Resizable
+                style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}
+                defaultSize={{
+                    width: 200,
+                    height: (200 * 9) / 16,
+                }}
+                lockAspectRatio={16 / 9}
+            >
+                <div style={{ marginLeft: '20%' }}>16 / 9</div>
+            </Resizable>
+        </div>
+    );
+}
+```
+
+### 设置最大，最小宽高
+
+可通过 `maxHeight`，`maxWidth`，`minHeight`，`minWidth` 设置最大，最小宽高
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Resizable } from '@douyinfe/semi-ui';
+
+function Demo() {
+    return (
+        <div style={{ width: '500px', height: '60%' }}>
+            <Resizable
+                style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}
+                maxWidth={200}
+                maxHeight={300}
+                minWidth={50}
+                minHeight={50}
+                defaultSize={{
+                    width: 100,
+                    height: 100,
+                }}
+            >
+                <div style={{ marginLeft: '20%' }}>width在50到200之间，height在50到300之间</div>
+            </Resizable>
+        </div>
+    );
+}
+```
+
+### 受控宽高
+
+可通过 `size` 控制元素的宽高
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Resizable } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const [size, setSize] = useState({ width: 200, height: 300 });
+
+    const onChange = () => {
+        let realSize = { width: size.width + 10, height: size.height + 10 };
+        setSize(realSize);
+    };
+    return (
+        <div style={{ width: '500px', height: '60%' }}>
+            <Button onClick={onChange}>set += 10</Button>
+            <Resizable
+                style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', marginTop: '10px' }}
+                defaultSize={{
+                    width: 100,
+                    height: 100,
+                }}
+                size={size}
+            >
+                <div style={{ marginLeft: '20%' }}>受控</div>
+            </Resizable>
+        </div>
+    );
+}
+```
+
+### 设置缩放值
+
+通过设置 `scale`，整体缩放元素
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Resizable } from '@douyinfe/semi-ui';
+
+function Demo() {
+    return (
+        <div style={{ width: '500px', height: '60%', transform: 'scale(0.5)', transformOrigin: '0 0' }}>
+            <Resizable
+                style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}
+                defaultSize={{
+                    width: '60%',
+                    height: '60%',
+                }}
+                scale={0.5}
+            >
+                <div style={{ marginLeft: '20%' }}>scale 0.5</div>
+            </Resizable>
+        </div>
+    );
+}
+```
+
+### 根据元素限制元素宽高
+
+通过 boundElement 设置用于限制宽高的元素，支持 string（'parent'｜'window'）
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Resizable } from '@douyinfe/semi-ui';
+
+function Demo() {
+    return (
+        <div style={{ width: '300px', height: '300px', border: 'var(--semi-color-border) 1px solid' }}>
+            <Resizable
+                style={{ marginLeft: '20%', backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}
+                defaultSize={{
+                    width: '60%',
+                    height: 200,
+                }}
+                boundElement={'parent'}
+            >
+                <div style={{ marginLeft: '20%' }}>bound：parent</div>
+            </Resizable>
+        </div>
+    );
+}
+```
+
+### 自定义边角 handler 样式
+
+可通过 handleNode 设置不同方向的拖动元素节点，可通过 handleStyle，handleClassName 设置不同方向上的样式
+
+```jsx
+type HandleNode = {
+    left: ReactNode,
+    right: ReactNode,
+    top: ReactNode,
+    bottom: ReactNode,
+    topLeft: ReactNode,
+    topRight: ReactNode,
+    bottomLeft: ReactNode,
+    bottomRight: ReactNode,
+};
+
+type HandleStyle = {
+    left: React.CSSProperties,
+    right: React.CSSProperties,
+    top: React.CSSProperties,
+    bottom: React.CSSProperties,
+    topLeft: React.CSSProperties,
+    topRight: React.CSSProperties,
+    bottomLeft: React.CSSProperties,
+    bottomRight: React.CSSProperties,
+};
+
+type HandleClass = {
+    left: string,
+    right: string,
+    top: string,
+    bottom: string,
+    topLeft: string,
+    topRight: string,
+    bottomLeft: string,
+    bottomRight: string,
+};
+```
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Resizable, Button } from '@douyinfe/semi-ui';
+function Demo() {
+    return (
+        <div style={{ width: '500px', height: '60%' }}>
+            <Resizable
+                style={{
+                    marginLeft: '20%',
+                    backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                    border: 'var(--semi-color-border) 1px solid',
+                }}
+                defaultSize={{
+                    width: '60%',
+                    height: 300,
+                }}
+                handleNode={{
+                    right: (
+                        <div
+                            style={{
+                                height: '100%',
+                                display: 'flex',
+                                alignItems: 'center',
+                                width: 'fit-content',
+                            }}
+                        >
+                            <IconTransfer />
+                        </div>
+                    ),
+                }}
+            >
+                <div style={{ marginLeft: '20%' }}>right</div>
+            </Resizable>
+        </div>
+    );
+}
+```
+
+### 允许阶段性调整宽高
+
+可通过 grid ，snap 属性允许逐渐调整宽高。 grid 属性用于指定调整大小应对齐的增量。默认为 [1, 1]。 snap 属性用于指定调整大小时应对齐的绝对像素值。 x 和 y 都是可选的，允许仅包含要定义的轴。默认为空。以上两个参数可结合 snapGap 使用，该参数用于指定移动到下一个目标所需的最小间隙。默认为 0，这意味着始终使用 grid/snap 设定的目标。
+
+```tsx
+interface Snap {
+    x: number[];
+    y: number[];
+}
+```
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Resizable } from '@douyinfe/semi-ui';
+
+function Demo() {
+    return (
+        <div style={{ width: '500px', height: '60%' }}>
+            <Resizable
+                style={{
+                    marginLeft: '20%',
+                    backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                    border: 'var(--semi-color-border) 1px solid',
+                }}
+                defaultSize={{
+                    width: '60%',
+                    height: 300,
+                }}
+                grid={100}
+                snapGap={20}
+            >
+                <div style={{ marginLeft: '20%' }}>snap</div>
+            </Resizable>
+        </div>
+    );
+}
+```
+
+### 组合组件 基本使用
+
+<Notice type='primary' title='注意事项'>
+`ResizeGroup`的父元素需要具有主轴方向上的尺寸 
+最好不要为`ResizeItem`设置`padding`，会导致最小尺寸不符合预期，可以为子元素设置`padding`
+</Notice>
+
+通过`direction`设置伸缩方向，可选值为`horizontal`和`vertical` 支持`onResizeStart` `onResize` `onResizeEnd`回调，支持`min` `max`设置最大最小宽高
+
+```jsx live=true dir="column"
+import React, { useState } from 'react';
+import { ResizeItem, ResizeHandler, ResizeGroup, Toast } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const [text, setText] = useState('Drag to resize');
+    return (
+        <div style={{ width: '1000px', height: '100px' }}>
+            <ResizeGroup direction="horizontal">
+                <ResizeItem
+                    style={{
+                        backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                        border: 'var(--semi-color-border) 1px solid',
+                    }}
+                    defaultSize={'400px'}
+                    min={'10%'}
+                    onChange={() => {
+                        setText('resizing');
+                    }}
+                    onResizeEnd={() => {
+                        setText('Drag to resize');
+                    }}
+                >
+                    <div style={{ marginLeft: '20%' }}>{text + ' min:10%'}</div>
+                </ResizeItem>
+                <ResizeHandler></ResizeHandler>
+                <ResizeItem
+                    style={{
+                        backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                        border: 'var(--semi-color-border) 1px solid',
+                    }}
+                    defaultSize={'20%'}
+                    min={'10%'}
+                    max={'30%'}
+                    onChange={() => {
+                        setText('resizing');
+                    }}
+                >
+                    <div style={{ marginLeft: '20%' }}>{text + ' min:10% max:30%'}</div>
+                </ResizeItem>
+                <ResizeHandler></ResizeHandler>
+                <ResizeItem
+                    style={{
+                        backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                        border: 'var(--semi-color-border) 1px solid',
+                    }}
+                    defaultSize={'0.5'}
+                    onChange={() => {
+                        setText('resizing');
+                    }}
+                >
+                    <div style={{ marginLeft: '20%' }}>{text}</div>
+                </ResizeItem>
+                <ResizeHandler></ResizeHandler>
+                <ResizeItem
+                    style={{
+                        backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                        border: 'var(--semi-color-border) 1px solid',
+                    }}
+                    defaultSize={1}
+                    onChange={() => {
+                        setText('resizing');
+                    }}
+                >
+                    <div style={{ marginLeft: '20%' }}>{text}</div>
+                </ResizeItem>
+            </ResizeGroup>
+        </div>
+    );
+}
+```
+
+### 嵌套使用
+
+通过`direction`设置伸缩方向，可选值为`horizontal`和`vertical`
+
+```jsx live=true dir="column"
+import React, { useState } from 'react';
+import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const [text, setText] = useState('Drag to resize');
+    const opts_1 = {
+        content: 'resize start',
+        duration: 1,
+        stack: true,
+    };
+    const opts = {
+        content: 'resize end',
+        duration: 1,
+        stack: true,
+    };
+    return (
+        <div style={{ width: '1000px', height: '600px' }}>
+            <ResizeGroup direction="vertical">
+                <ResizeItem
+                    style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}
+                    defaultSize={'20%'}
+                    onChange={() => {
+                        setText('resizing');
+                    }}
+                    onResizeStart={() => Toast.info(opts_1)}
+                    onResizeEnd={() => {
+                        Toast.info(opts);
+                        setText('Drag to resize');
+                    }}
+                >
+                    <div style={{ marginLeft: '20%' }}>{'header'}</div>
+                </ResizeItem>
+                <ResizeHandler></ResizeHandler>
+                <ResizeItem
+                    defaultSize={'80%'}
+                    onChange={() => {
+                        setText('resizing');
+                    }}
+                >
+                    <ResizeGroup direction="horizontal">
+                        <ResizeItem
+                            style={{
+                                backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                                border: 'var(--semi-color-border) 1px solid',
+                            }}
+                            defaultSize={'25%'}
+                            onChange={() => {
+                                setText('resizing');
+                            }}
+                            onResizeStart={() => Toast.info(opts_1)}
+                            onResizeEnd={() => {
+                                Toast.info(opts);
+                                setText('Drag to resize');
+                            }}
+                        >
+                            <div style={{ marginLeft: '20%' }}>{'tab'}</div>
+                        </ResizeItem>
+                        <ResizeHandler></ResizeHandler>
+                        <ResizeItem
+                            style={{
+                                backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                                border: 'var(--semi-color-border) 1px solid',
+                            }}
+                            defaultSize={'75%'}
+                            onChange={() => {
+                                setText('resizing');
+                            }}
+                        >
+                            <div style={{ marginLeft: '20%' }}>{text}</div>
+                        </ResizeItem>
+                    </ResizeGroup>
+                </ResizeItem>
+            </ResizeGroup>
+        </div>
+    );
+}
+```
+
+```jsx live=true dir="column"
+import React, { useState } from 'react';
+import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const [text, setText] = useState('Drag to resize');
+    const opts_1 = {
+        content: 'resize start',
+        duration: 1,
+        stack: true,
+    };
+    const opts = {
+        content: 'resize end',
+        duration: 1,
+        stack: true,
+    };
+    return (
+        <div style={{ width: '1000px', height: '600px' }}>
+            <ResizeGroup direction="vertical">
+                <ResizeItem defaultSize={'80%'}>
+                    <ResizeGroup direction="horizontal">
+                        <ResizeItem
+                            style={{
+                                backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                                border: 'var(--semi-color-border) 1px solid',
+                            }}
+                            defaultSize={'25%'}
+                            min={'10%'}
+                            max={'30%'}
+                        >
+                            <div style={{ marginLeft: '20%' }}>{text + ' min:10% max:30%'}</div>
+                        </ResizeItem>
+                        <ResizeHandler></ResizeHandler>
+                        <ResizeItem style={{ border: 'var(--semi-color-border) 1px solid' }} defaultSize={'50%'}>
+                            <div style={{ height: '100%' }}>
+                                <ResizeGroup direction="vertical">
+                                    <ResizeItem
+                                        style={{
+                                            backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                                            border: 'var(--semi-color-border) 1px solid',
+                                        }}
+                                        defaultSize={'33%'}
+                                        min={'10%'}
+                                        onChange={() => {
+                                            setText('resizing');
+                                        }}
+                                        onResizeEnd={() => {
+                                            setText('Drag to resize');
+                                        }}
+                                    >
+                                        <div style={{ marginLeft: '20%' }}>{text + ' min:10%'}</div>
+                                    </ResizeItem>
+                                    <ResizeHandler></ResizeHandler>
+                                    <ResizeItem
+                                        style={{
+                                            backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                                            border: 'var(--semi-color-border) 1px solid',
+                                        }}
+                                        defaultSize={'33%'}
+                                        min={'10%'}
+                                        max={'40%'}
+                                    >
+                                        <div style={{ marginLeft: '20%' }}>{text + ' min:10% max:40%'}</div>
+                                    </ResizeItem>
+                                    <ResizeHandler></ResizeHandler>
+                                    <ResizeItem
+                                        style={{
+                                            backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                                            border: 'var(--semi-color-border) 1px solid',
+                                        }}
+                                    >
+                                        <div style={{ marginLeft: '20%' }}>{text}</div>
+                                    </ResizeItem>
+                                </ResizeGroup>
+                            </div>
+                        </ResizeItem>
+                        <ResizeHandler></ResizeHandler>
+                        <ResizeItem
+                            style={{
+                                backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                                border: 'var(--semi-color-border) 1px solid',
+                            }}
+                            defaultSize={'1'}
+                            max={'30%'}
+                        >
+                            <div style={{ marginLeft: '20%' }}>{text + ' max:30%'}</div>
+                        </ResizeItem>
+                    </ResizeGroup>
+                </ResizeItem>
+                <ResizeHandler></ResizeHandler>
+                <ResizeItem
+                    defaultSize={'20%'}
+                    onChange={() => {
+                        setText('resizing');
+                    }}
+                >
+                    <ResizeGroup direction="horizontal">
+                        <ResizeItem
+                            style={{
+                                backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                                border: 'var(--semi-color-border) 1px solid',
+                            }}
+                            defaultSize={'50%'}
+                        >
+                            <div style={{ marginLeft: '20%' }}>{'tab'}</div>
+                        </ResizeItem>
+                        <ResizeHandler></ResizeHandler>
+                        <ResizeItem
+                            style={{
+                                backgroundColor: 'rgba(var(--semi-grey-1), 1)',
+                                border: 'var(--semi-color-border) 1px solid',
+                            }}
+                            defaultSize={'50%'}
+                        >
+                            <div style={{ marginLeft: '20%' }}>{'content'}</div>
+                        </ResizeItem>
+                    </ResizeGroup>
+                </ResizeItem>
+            </ResizeGroup>
+        </div>
+    );
+}
+```
+
+## API 参考
+
+### Resizable
+
+单个伸缩框组件。
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| className | 类名 | string |  |  |
+| size | 控制伸缩框的大小，支持数字和字符串（px/vw/vh/%）两种格式 | [Size](#基本使用与回调) |  |  |
+| defaultSize | 用于设置初始宽高，支持数字和字符串（px/vw/vh/%）两种格式 | [Size](#基本使用与回调) |  |  |
+| minWidth | 指定伸缩框最小宽度 | string \| number |  |  |
+| maxWidth | 指定伸缩框最大宽度 | string \| number |  |  |
+| minHeight | 指定伸缩框最小高度 | string \| number |  |  |
+| maxHeight | 指定伸缩框最大高度 | string \| number |  |
+| lockAspectRatio | 设置伸缩框横纵比，当为`true`时按照初始宽高锁定 | boolean \| number |  |  |
+| enable | 指定伸缩框可以伸缩的方向，没有设置为 false，则默认允许该方向的拖动 | [Enable](#控制伸缩方向) |
+| scale | 可伸缩元素被缩放的比例 | number | 1 |  |
+| boundElement | 用于限制可伸缩元素宽高的元素,传入 `parent` 设置父节点为限制节点 | string |  |  |
+| handleNode | 用于设置拖拽处理元素各个方向的自定义节点 | [HandleNode](#自定义边角handler样式) |  |  |
+| handleStyle | 用于设置拖拽处理元素各个方向的样式 | [HandleStyles](#自定义边角handler样式) |  |  |
+| handleClass | 用于设置拖拽处理元素各个方向的类名称 | [HandleClasses](#自定义边角handler样式) |  |  |
+| style | 样式 | CSSProperties |  |
+| snapGap | 用于指定移动到下一个目标所需的最小间隙。 | number | 0 |  |
+| snap | 指定调整大小时应对齐的绝对像素值。 x 和 y 都是可选的，允许仅包含要定义的轴 | [Snap](#允许阶段性调整宽高) | null |  |
+| grid | 指定调整大小应对齐的增量 | \[number, number\] | \[1,1\] |  |
+| onChange | 拖拽过程中的回调 | (e: Event; direction: String;size: Size) => void | - |  |
+| onResizeStart | 开始伸缩的回调 | (e: Event; direction: String) => void | - |  |
+| onResizeEnd | 结束伸缩的回调 | (e: Event; direction: String) => void | - |  |
+
+### ResizeGroup
+
+| 参数      | 说明                    | 类型                       | 默认值       | 版本 |
+| --------- | ----------------------- | -------------------------- | ------------ | ---- |
+| className | 类名                    | string                     |              |      |
+| direction | 指定 Group 内的伸缩方向 | 'horizontal' \| 'vertical' | 'horizontal' |      |
+
+### ResizeHandler
+
+| 参数      | 说明 | 类型          | 默认值 | 版本 |
+| --------- | ---- | ------------- | ------ | ---- |
+| className | 类名 | string        |        |      |
+| style     | 样式 | CSSProperties |        |
+
+### ResizeItem
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| className | 类名 | string |  |  |
+| defaultSize | 用于设置初始宽高，**字符串支持%和 px 单位，当字符串为纯数字或直接设置数字时表示按照值的比例分配剩余空间** | string \| number |  |  |
+| min | 指定伸缩框最小尺寸（百分比或像素值） | string |  |  |
+| max | 指定伸缩框最大尺寸（百分比或像素值） | string |  |  |
+| style | 样式 | CSSProperties |  |
+| onChange | 拖拽过程中的回调 | (e: Event; direction: String;size: Size) => void | - |  |
+| onResizeStart | 开始伸缩的回调 | (e: Event; direction: String) => void | - |  |
+| onResizeEnd | 结束伸缩的回调 | (e: Event; direction: String) => void | - |  |
+
+## 设计变量
+
+<DesignToken/>

content/basic/space/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 20
+order: 22
 category: basic
 title:  Space
 icon: doc-space

content/basic/space/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 20
+order: 22
 category: 基础
 title:  Space 间距
 icon: doc-space

content/basic/tokens/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 18
+order: 14
 category: Basic
 title: Tokens 
 icon: doc-token

content/basic/tokens/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 18
+order: 14
 category: 基础
 title:  Tokens 设计变量
 icon: doc-token
@@ -9,9 +9,9 @@ brief: Semi Design Tokens
 
 <JumpToToken/>
 
-## 为什么要使用变量
+## 为什么要使用 Design Token
 
-变量实际上是将设计中的基础元素与具体的样式进行解耦。
+Design Token 设计变量实际上是将设计中的基础元素与具体的样式进行解耦。
 
 对于设计师来说，如果产品的风格需要迭代更新，比如需要更新 危险 的功能色，即 color-danger，只需要修改其对应的颜色默认值，既可以完成整套产品的 UI 迭代。
 

content/basic/typography/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 21
+order: 19
 category: Basic
 title:  Typography
 subTitle: Typography

content/basic/typography/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 21
+order: 19
 category: 基础
 title:  Typography 版式
 icon: doc-typography

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 76
+order: 78
 category: Feedback
 title:  Banner
 subTitle: Banner

content/feedback/banner/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 76
+order: 78
 category: 反馈类
 title:  Banner 通知横幅
 icon: doc-banner

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 77
+order: 79
 category: Feedback
 title:  Notification
 subTitle: Notification

content/feedback/notification/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 77
+order: 79
 category: 反馈类
 title: Notification 通知
 icon: doc-notification

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 78
+order: 80
 category: Feedback
 title:  Popconfirm
 subTitle: Popconfirm

content/feedback/popconfirm/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 78
+order: 80
 category: 反馈类
 title:  Popconfirm 气泡确认框
 icon: doc-popconfirm

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 79
+order: 81
 category: Feedback
 title: Progress
 subTitle: Progress

content/feedback/progress/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 79
+order: 81
 category: 反馈类
 title: Progress 进度条
 icon: doc-progress

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 80
+order: 82
 category: Feedback
 title: Skeleton
 subTitle: Skeleton

content/feedback/skeleton/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 80
+order: 82
 category: 反馈类
 title: Skeleton 骨架屏
 icon: doc-skeleton

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 81
+order: 83
 category: Feedback
 title: Spin
 subTitle: Spin

content/feedback/spin/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 81
+order: 83
 category: 反馈类
 title: Spin 加载器
 icon: doc-spin

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 82
+order: 84
 category: Feedback
 title: Toast
 subTitle: Toast

content/feedback/toast/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 82
+order: 84
 category: 反馈类
 title: Toast 提示
 icon: doc-toast

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 24
+order: 28
 category: Input
 title: AutoComplete
 icon: doc-autocomplete

content/input/autocomplete/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 24
+order: 28
 category: 输入类
 title: AutoComplete 自动完成
 icon: doc-autocomplete

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 25
+order: 29
 category: Input
 title:  Cascader
 subTitle: Cascade

content/input/cascader/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 25
+order: 29
 category: 输入类
 title:  Cascader 级联选择
 icon: doc-cascader

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 26
+order: 30
 category: Input
 title:  Checkbox
 subTitle: Checkbox

content/input/checkbox/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 26
+order: 30
 category: 输入类
 title: Checkbox 复选框
 icon: doc-checkbox

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 27
+order: 31
 category: Input
 title: ColorPicker
 icon: doc-colorPlatteNew

content/input/colorpicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 27
+order: 31
 category: 输入类
 title: ColorPicker 颜色选择器
 icon: doc-colorPlatteNew

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 28
+order: 32
 category: Input
 title: DatePicker
 subTitle: Date Selector

content/input/datepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 28
+order: 32
 category: 输入类
 title: DatePicker 日期选择器
 icon: doc-datepicker

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 29
+order: 33
 category: Input
 title:  Form
 subTitle: Form

content/input/form/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 29
+order: 33
 category: 输入类
 title:  Form 表单
 icon: doc-form

content/input/hotkeys/index.md

@@ -1,246 +0,0 @@
----
-localeCode: zh-CN
-order: 30
-category: 输入类
-title: HotKeys 快捷键
-icon: doc-configprovider
-width: 60%
-brief: 用于方便用户自定义快捷键及相关操作
----
-
-
-## 代码演示
-
-### 如何引入
-HotKeys 从 2.66.0 开始支持
-
-```jsx import
-import { HotKeys } from '@douyinfe/semi-ui';
-```
-
-
-### 说明
-快捷键仅支持修饰键组合`Shift`,`Control`,`Meta`,`Alt`与其他键的组合。
-> [Meta](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/metaKey) 在MacOS中为`Command`，在Windows中为`Win`
-
-当设定快捷键与常用快捷键如`Ctrl/Meta + C`相同时，可以通过设置`preventDefault`控制默认事件是否触发。
-
-### 基本
-
-基本使用，通过`hotKeys`传入快捷键组合，通过 `onHotKey` 绑定快捷键处理函数，作出响应动作。
-
-按下 Ctrl + Shift + A， 唤起modal。默认在 body.document 监听，全局生效。
-
-[hotKeys取值参考](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)，也可以使用`HotKeys.Keys`进行设置
-
-```jsx live=true
-import React, { useState } from 'react';
-import { HotKeys, Modal } from '@douyinfe/semi-ui';
-
-function Demo() {
-  const [visible, setVisible] = useState(false);
-  const showDialog = () => {
-      setVisible(true);
-  };
-  const handleOk = () => {
-      setVisible(false);
-  };
-  const handleCancel = () => {
-      setVisible(false);
-  };
-  const hotKeys = [HotKeys.Keys.Control, 'Shift', HotKeys.Keys.A]
-  
-  return (
-    <div>
-      <HotKeys hotKeys={hotKeys} onHotKey={showDialog} ></HotKeys>
-      <Modal
-          title="Dialog"
-          visible={visible}
-          onOk={handleOk}
-          onCancel={handleCancel}
-      >
-          This is the Modal opened by hotkey: {hotKeys.join('+')}.
-      </Modal>
-    </div>
-  );
-}
-```
-
-### 自定义内容
-
-通过`content`传入渲染的字符
-
-```jsx live=true
-import React, { useState } from 'react';
-import { HotKeys, Modal } from '@douyinfe/semi-ui';
-
-function Demo() {
-  const [visible, setVisible] = useState(false);
-  const showDialog = () => {
-      setVisible(true);
-  };
-  const handleOk = () => {
-      setVisible(false);
-  };
-  const handleCancel = () => {
-      setVisible(false);
-  };
-  const hotKeys = [HotKeys.Keys.Control, 'Shift', HotKeys.Keys.B]
-  
-  return (
-    <div>
-      <HotKeys hotKeys={hotKeys} onHotKey={showDialog} content={['Ctrl', 'Shift', 'B']}></HotKeys>
-      <Modal
-          title="Dialog"
-          visible={visible}
-          onOk={handleOk}
-          onCancel={handleCancel}
-      >
-          This is the Modal opened by hotkey: {hotKeys.join('+')}.
-      </Modal>
-    </div>
-  );
-}
-```
-
-通过`render`传入代替渲染的元素
-
-```jsx live=true
-import React, { useState } from 'react';
-import { HotKeys, Modal, Tag } from '@douyinfe/semi-ui';
-
-function Demo() {
-  const [visible, setVisible] = useState(false);
-  const showDialog = () => {
-      setVisible(true);
-  };
-  const handleOk = () => {
-      setVisible(false);
-  };
-  const handleCancel = () => {
-      setVisible(false);
-  };
-  const hotKeys = [HotKeys.Keys.Control, HotKeys.Keys.R]
-  
-  const newHotKeys = <Tag>Press Ctrl+R to Open Modal</Tag>
-  return (
-    <div>
-      <HotKeys hotKeys={hotKeys} onHotKey={showDialog} render={newHotKeys}></HotKeys>
-      <Modal
-          title="Dialog"
-          visible={visible}
-          onOk={handleOk}
-          onCancel={handleCancel}
-      >
-          This is the Modal opened by hotkey: {hotKeys.join('+')}.
-      </Modal>
-    </div>
-  );
-}
-```
-
-### 阻止默认事件
-
-通过设置`preventDefault`控制默认事件是否触发。
-```jsx live=true
-import React, { useState } from 'react';
-import { HotKeys, Modal } from '@douyinfe/semi-ui';
-
-function Demo() {
-  const [visible, setVisible] = useState(false);
-  const showDialog = () => {
-      setVisible(true);
-  };
-  const handleOk = () => {
-      setVisible(false);
-  };
-  const handleCancel = () => {
-      setVisible(false);
-  };
-  const hotKeys = [HotKeys.Keys.Meta, HotKeys.Keys.S]
-
-  return (
-    <div>
-      <HotKeys hotKeys={hotKeys} onHotKey={showDialog} preventDefault></HotKeys>
-      <br />
-      <HotKeys hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.S]} onHotKey={showDialog} preventDefault></HotKeys>
-      <Modal
-          title="Dialog"
-          visible={visible}
-          onOk={handleOk}
-          onCancel={handleCancel}
-      >
-          This is the Modal opened by hotkey: {'Meta/Control + S'}.
-      </Modal>
-    </div>
-  );
-}
-```
-
-### 修改监听挂载DOM
-快捷键默认在 body 监听，通过`getListenerTarget`修改快捷键监听挂载的DOM
-```jsx live=true
-import React, { useState, useRef } from 'react';
-import { HotKeys, Input, Modal } from '@douyinfe/semi-ui';
-
-function Demo() {
-  const hotKeys = ["Control", "q"]
-  const [visible, setVisible] = useState(false);
-  const showDialog = () => {
-      setVisible(true);
-  };
-  const handleOk = () => {
-      setVisible(false);
-  };
-  const handleCancel = () => {
-      setVisible(false);
-  };
-
-  const inputRef = useRef(null);
-  return (
-    <div>
-      <Input ref={inputRef} placeholder='test for target'></Input>
-      <HotKeys hotKeys={hotKeys} onHotKey={showDialog} 
-        getListenerTarget={() => inputRef.current}>
-      </HotKeys>
-      <Modal
-          title="Dialog"
-          visible={visible}
-          onOk={handleOk}
-          onCancel={handleCancel}
-      >
-          This is the Modal opened by hotkey: {hotKeys.join('+')}.
-      </Modal>
-    </div>
-  );
-}
-```
-
-## API 参考
-
-### HotKeys
-
-| 属性              | 说明                                                                  | 类型                            | 默认值    |
-| ----------------- | --------------------------------------------------------------------- | ------------------------------- | --------- |
-| className         | 类名                                                                  | string                          |           |
-| content | 设置显示内容                                          | string[]                          | -         |
-| getListenerTarget         | 用于设置监听器挂载的DOM            | () => HTMLElement                       |  document.body         |
-| hotKeys  | 设置快捷键组合，[取值参考](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)                                          | KeyboardEvent.key[]                          | -         |
-| onClick        | 点击回调函数                                                              |   () => void                      |    -       |
-| onHotKey        | 快捷键回调函数                                                              |   (e: KeyboardEvent) => void                      |    -       |
-| preventDefault        | 是否阻止快捷键默认行为                                                                  | boolean                          | false          |
-| render        |    覆盖组件渲染                                               | () => ReactNode \| ReactNode                       |           |
-| style             | 样式                                                                  | CSSProperties                   |           |
-
-
-## 设计变量
-<DesignToken/>
-
-<!-- ## 相关物料
-```material
-44, 46
-``` -->
-
-## 相关物料
-<semi-material-list code="46"></semi-material-list>
-

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 31
+order: 34
 category: Input
 title:  Input
 subTitle: Input

content/input/input/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 31
+order: 34
 category: 输入类
 title:  Input 输入框
 icon: doc-input

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 32
+order: 35
 category: Input
 title:  InputNumber
 subTitle: InputNumber

content/input/inputnumber/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 32
+order: 35
 category: 输入类
 title: InputNumber 数字输入框
 icon: doc-inputnumber

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

@@ -1,11 +1,12 @@
 ---
 localeCode: en-US
-order: 33
+order: 36
 category: Input
 title: PinCode
 icon: doc-pincode
 width: 60%
 brief: For easy and intuitive verification code entry
+showNew: true
 ---
 
 ## Code demonstration

content/input/pincode/index.md

@@ -1,11 +1,12 @@
 ---
 localeCode: zh-CN
-order: 33
+order: 36
 category: 输入类
 title: PinCode 验证码输入
 icon: doc-pincode
 width: 60%
 brief: 用于便捷直观地输入验证码
+showNew: true
 ---
 
 ## 代码演示

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 34
+order: 37
 category: Input
 title: Radio
 subTitle: Radio

content/input/radio/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 34
+order: 37
 category: 输入类
 title: Radio 单选框
 icon: doc-radio

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 35
+order: 38
 category: Input
 title: Rating
 subTitle: Rating

content/input/rating/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 35
+order: 38
 category: 输入类
 title:  Rating 评分
 icon: doc-rating

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 36
+order: 39
 category: Input
 title: Select
 subTitle: Select

content/input/select/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 36
+order: 39
 category: 输入类
 title: Select 选择器
 icon: doc-select

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 37
+order: 40
 category: Input
 title:  Slider
 subTitle: Slider

content/input/slider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 37
+order: 40
 category: 输入类
 title:  Slider 滑动选择器
 icon: doc-slider

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 38
+order: 41
 category: Input
 title: Switch
 subTitle: Switch

content/input/switch/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 38
+order: 41
 category: 输入类
 title: Switch 开关
 icon: doc-switch

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 39
+order: 42
 category: Input
 title: TagInput
 subTitle: TagInput

content/input/taginput/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 39
+order: 42
 category: 输入类
 title: TagInput 标签输入框
 icon: doc-tagInput

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 40
+order: 43
 category: Input
 title: TimePicker
 subTitle: TimePicker

content/input/timepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 40
+order: 43
 category: 输入类
 title: TimePicker 时间选择器
 icon: doc-timepicker

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 41
+order: 44
 category: Input
 title: Transfer
 icon: doc-transfer

content/input/transfer/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 41
+order: 44
 category: 输入类
 title: Transfer 穿梭框
 icon: doc-transfer

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 42
+order: 45
 category: Input
 title:  TreeSelect
 subTitle: TreeSelect

content/input/treeselect/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 42
+order: 45
 category: 输入类
 title: TreeSelect 树选择器
 icon: doc-treeselect

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 43
+order: 46
 category: Input
 title: Upload
 icon: doc-upload

content/input/upload/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 43
+order: 46
 category: 输入类
 title: Upload 上传
 icon: doc-upload

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 44
+order: 47
 category: Navigation
 title:  Anchor
 subTitle: Anchor

content/navigation/anchor/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 44
+order: 47
 category: 导航类
 title:  Anchor 锚点
 icon: doc-anchor

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 45
+order: 48
 category: Navigation
 title: BackTop
 subTitle: BackTop

content/navigation/backtop/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 45
+order: 48
 category: 导航类
 title: BackTop 回到顶部
 icon: doc-backtop

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 46
+order: 49
 category: Navigation
 title:  Breadcrumb
 subTitle: Breadcrumb

content/navigation/breadcrumb/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 46
+order: 49
 category: 导航类
 title:  Breadcrumb 面包屑
 icon: doc-breadcrumb

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 47
+order: 50
 category: Navigation
 title:  Navigation
 subTitle: Navigation

content/navigation/navigation/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 47
+order: 50
 category: 导航类
 title:  Navigation 导航
 icon: doc-navigation

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 48
+order: 51
 category: Navigation
 title:  Pagination
 subTitle: Pagination

content/navigation/pagination/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 48
+order: 51
 category: 导航类
 title:  Pagination 翻页器
 icon: doc-pagination

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 49
+order: 52
 category: Navigation
 title: Steps
 subTitle: Steps

content/navigation/steps/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 49
+order: 52
 category: 导航类
 title:  Steps 步骤
 icon: doc-steps

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 50
+order: 53
 category: Navigation
 title: Tabs
 subTitle: Tabs

content/navigation/tabs/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 50
+order: 53
 category: 导航类
 title: Tabs 标签栏
 icon: doc-tabs

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 51
+order: 54
 category: Navigation
 title:  Tree
 subTitle: Tree

content/navigation/tree/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 51
+order: 54
 category: 导航类
 title:  Tree 树形控件
 icon: doc-tree

content/order.js

@@ -12,15 +12,19 @@ const order = [
     'content-guidelines',
     'changelog',
     'update-to-v2',
-    'divider',
-    'grid',
-    'icon',
-    'layout',
     'tokens',
+    'layout',
+    'grid',
+    'resizable',
     'button',
-    'space',
     'typography',
+    'divider',
+    'icon',
+    'space',
+    'chat',
+    'codehighlight',
     "markdownrender",
+    'hotkeys',
     "lottie",
     'autocomplete',
     'cascader',
@@ -28,7 +32,6 @@ const order = [
     'colorpicker',
     'datepicker',
     'form',
-    'hotkeys',
     'input',
     'inputnumber',
     'pincode',
@@ -66,7 +69,6 @@ const order = [
     'modal',
     'overflowlist',
     'popover',
-    'resizable',
     'scrolllist',
     'sidesheet',
     'table',
@@ -82,8 +84,7 @@ const order = [
     'spin',
     'toast',
     'configprovider',
-    'locale',
-    'chat',
+    'locale'
 ];
 let { exec } = require('child_process');
 let fs = require('fs');

content/other/configprovider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 83
+order: 85
 category: Other
 title: ConfigProvider
 icon: doc-configprovider

content/other/configprovider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 83
+order: 85
 category: 其他
 title:  ConfigProvider 全局配置
 icon: doc-configprovider

content/other/locale/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 84
+order: 86
 category: Other
 title: LocaleProvider
 subTitle: LocaleProvider

content/other/locale/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 84
+order: 86
 category: 其他
 title:  LocaleProvider 多语言
 icon: doc-i18n

content/plus/chat/index-en-US.md

@@ -1,16 +1,17 @@
 ---
 localeCode: en-US
-order: 85
+order: 23
 category: Plus
 title:  Chat
 icon: doc-chat
 dir: column
 brief: Used to quickly build conversation content
+showNew: true
 ---
 
 ## When to use
 
-The Chat component can be used in scenarios such as regular conversations or AI conversations.
+The `Chat` component can be used in scenarios such as regular conversations or AI conversations.
 
 The rendering of the conversation content is based on the MarkdownRender component, which supports Markdown and MDX. It allows for common rich text features such as images, tables, links, bold text, code blocks, and more. More complex and customized document writing and display requirements can be achieved using JSX.
 

content/plus/chat/index.md

@@ -1,11 +1,12 @@
 ---
 localeCode: zh-CN
-order: 85
+order: 23
 category: Plus
 title:  Chat 对话
 icon: doc-chat
 dir: column
 brief: 用于快速搭建对话内容
+showNew: true
 ---
 
 ## 使用场景

content/plus/codehighlight/index-en-US.md

@@ -1,14 +1,17 @@
 ---
 localeCode: en-US
-order: 0
+order: 24
 category: Plus
 title:  CodeHighlight
 icon: doc-codehighlight
 dir: column
 brief: Highlight code blocks in the page according to syntax
+showNew: true
 ---
 
-The Semi code highlighting component uses prismjs, which supports highlighting of 297 programming languages ​​(automatically configured `JavaScript` `CSS` `Class C` `html` `svg`, etc., other languages ​​need to be manually introduced), and has high scalability and rich plug-in ecology.
+## When to use
+
+Semi `CodeHighlight` component uses `prismjs`, which supports highlighting of 297 programming languages ​​(automatically configured `JavaScript` `CSS` `Class C` `html` `svg`, etc., other languages ​​need to be manually introduced), and has high scalability and rich plug-in ecology.
 
 Pass the code plain text to `code` props, and pass the programming language name to `language`. Supported programming languages ​​and corresponding names can be viewed on the [Prismjs official website](https://prismjs.com/#supported-languages)
 

content/plus/codehighlight/index.md

@@ -1,17 +1,17 @@
 ---
 localeCode: zh-CN
-order: 0
+order: 24
 category: Plus
 title:  CodeHighlight 代码高亮
 icon: doc-codehighlight
 dir: column
 brief: 根据语法高亮页面中的代码块
+showNew: true
 ---
 
-Semi 代码高亮组件使用了 prismjs，支持297 种编程语言的高亮（已自动配置 `JavaScript` `CSS` `类 C` `html` `svg` 等，其他语言需要手动引入），同时具有高扩展性和丰富的插件生态。
-
-向 `code` props 传入代码纯文本，并在 `language` 传入编程语言名称。支持的编程语言和对应名称在 [Prismjs 官网](https://prismjs.com/#supported-languages) 查看
-
+## 使用场景
+Semi 代码高亮组件基于 prismjs 封装，支持297 种编程语言的高亮（已自动配置 `JavaScript` `CSS` `类 C` `html` `svg` 等，其他语言需要手动引入），同时具有高扩展性和丰富的插件生态。  
+需要展示代码片段时推荐使用 CodeHighlight 组件
 
 ## 代码演示
 
@@ -24,6 +24,7 @@ import { CodeHighlight } from '@douyinfe/semi-ui';
 ```
 
 ### 基本用法
+向 `code` props 传入代码纯文本，并在 `language` 传入编程语言名称。支持的编程语言和对应名称在 [Prismjs 官网](https://prismjs.com/#supported-languages) 查看
 
 ```jsx live=true dir=column
 import { CodeHighlight } from '@douyinfe/semi-ui';
@@ -33,7 +34,7 @@ function Demo() {
     return <CodeHighlight
         language={"javascript"} 
         code={
-        `
+            `
 import * as React from 'react"
 const Test = ()=>{
     const handleClick = ()=>{
@@ -41,7 +42,7 @@ const Test = ()=>{
     }
     return <div onClick={handleClick}>test</div>
 }`
-    }/>
+    }/>;
 }
 
 ```
@@ -56,7 +57,7 @@ function Demo() {
     return <CodeHighlight
         language={"css"} 
         code={
-        `.grid {
+            `.grid {
     .semi-row,
     .semi-row-flex {
         text-align: center;
@@ -69,7 +70,7 @@ function Demo() {
     }
 }
 `
-    }/>
+    }/>;
 }
 
 ```
@@ -88,13 +89,13 @@ import "prismjs/components/prism-vala.js"
 
 ```jsx live=true dir="column"
 import { CodeHighlight } from '@douyinfe/semi-ui';
-import "prismjs/components/prism-vala.js"
+import "prismjs/components/prism-vala.js";
 
 function Demo() {
     return <CodeHighlight
         language={"vala"} 
         code={
-        `public class ExampleApp : Gtk.Application {
+            `public class ExampleApp : Gtk.Application {
     public ExampleApp () {
         Object (application_id: "com.example.App");
     }
@@ -115,7 +116,7 @@ function Demo() {
     }
 }
 `
-    }/>
+    }/>;
 }
 
 ```

content/input/hotkeys/index-en-US.md → content/plus/hotkeys/index-en-US.md

@@ -1,14 +1,18 @@
 ---
 localeCode: en-US
-order: 30
-category: Input
+order: 26
+category: Plus
 title:  HotKeys
 icon: doc-configprovider
 width: 60%
 brief: used to facilitate the customization of keyboard shortcut
+showNew: true
 ---
 
 
+## When to use
+When it is necessary to express the usage method of shortcut key combinations to users, using the `Hotkeys` component can quickly render the corresponding UI elements and automatically obtain event bindings.
+
 ## Demos
 
 ### How to import

content/plus/hotkeys/index.md

@@ -0,0 +1,250 @@
+---
+localeCode: zh-CN
+order: 26
+category: Plus
+title: HotKeys 快捷键
+icon: doc-configprovider
+width: 60%
+brief: 用于方便用户自定义快捷键及相关操作
+showNew: true
+---
+
+## 使用场景
+需要向用户表达快捷键组合的使用方式时，使用 Hotkeys 组件可快速渲染出对应的 UI 元素且自动获得事件绑定
+
+
+## 代码演示
+
+### 如何引入
+HotKeys 从 2.66.0 开始支持
+
+```jsx import
+import { HotKeys } from '@douyinfe/semi-ui';
+```
+
+
+### 说明
+快捷键仅支持修饰键组合`Shift`,`Control`,`Meta`,`Alt`与其他键的组合。
+> [Meta](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/metaKey) 在MacOS中为`Command`，在Windows中为`Win`
+
+当设定快捷键与常用快捷键如`Ctrl/Meta + C`相同时，可以通过设置`preventDefault`控制默认事件是否触发。
+
+### 基本用法
+
+基本使用，通过`hotKeys`传入快捷键组合，通过 `onHotKey` 绑定快捷键处理函数，作出响应动作。
+
+按下 Ctrl + Shift + A， 唤起modal。默认在 body.document 监听，全局生效。
+
+[hotKeys取值参考](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)，也可以使用`HotKeys.Keys`进行设置
+
+```jsx live=true
+import React, { useState } from 'react';
+import { HotKeys, Modal } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const [visible, setVisible] = useState(false);
+    const showDialog = () => {
+        setVisible(true);
+    };
+    const handleOk = () => {
+        setVisible(false);
+    };
+    const handleCancel = () => {
+        setVisible(false);
+    };
+    const hotKeys = [HotKeys.Keys.Control, 'Shift', HotKeys.Keys.A];
+  
+    return (
+        <div>
+            <HotKeys hotKeys={hotKeys} onHotKey={showDialog} ></HotKeys>
+            <Modal
+                title="Dialog"
+                visible={visible}
+                onOk={handleOk}
+                onCancel={handleCancel}
+            >
+                This is the Modal opened by hotkey: {hotKeys.join('+')}.
+            </Modal>
+        </div>
+    );
+}
+```
+
+### 自定义内容
+
+通过`content`传入渲染的字符
+
+```jsx live=true
+import React, { useState } from 'react';
+import { HotKeys, Modal } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const [visible, setVisible] = useState(false);
+    const showDialog = () => {
+        setVisible(true);
+    };
+    const handleOk = () => {
+        setVisible(false);
+    };
+    const handleCancel = () => {
+        setVisible(false);
+    };
+    const hotKeys = [HotKeys.Keys.Control, 'Shift', HotKeys.Keys.B];
+  
+    return (
+        <div>
+            <HotKeys hotKeys={hotKeys} onHotKey={showDialog} content={['Ctrl', 'Shift', 'B']}></HotKeys>
+            <Modal
+                title="Dialog"
+                visible={visible}
+                onOk={handleOk}
+                onCancel={handleCancel}
+            >
+                This is the Modal opened by hotkey: {hotKeys.join('+')}.
+            </Modal>
+        </div>
+    );
+}
+```
+
+通过`render`传入代替渲染的元素
+
+```jsx live=true
+import React, { useState } from 'react';
+import { HotKeys, Modal, Tag } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const [visible, setVisible] = useState(false);
+    const showDialog = () => {
+        setVisible(true);
+    };
+    const handleOk = () => {
+        setVisible(false);
+    };
+    const handleCancel = () => {
+        setVisible(false);
+    };
+    const hotKeys = [HotKeys.Keys.Control, HotKeys.Keys.R];
+  
+    const newHotKeys = <Tag>Press Ctrl+R to Open Modal</Tag>;
+    return (
+        <div>
+            <HotKeys hotKeys={hotKeys} onHotKey={showDialog} render={newHotKeys}></HotKeys>
+            <Modal
+                title="Dialog"
+                visible={visible}
+                onOk={handleOk}
+                onCancel={handleCancel}
+            >
+                This is the Modal opened by hotkey: {hotKeys.join('+')}.
+            </Modal>
+        </div>
+    );
+}
+```
+
+### 阻止默认事件
+
+通过设置`preventDefault`控制默认事件是否触发。
+```jsx live=true
+import React, { useState } from 'react';
+import { HotKeys, Modal } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const [visible, setVisible] = useState(false);
+    const showDialog = () => {
+        setVisible(true);
+    };
+    const handleOk = () => {
+        setVisible(false);
+    };
+    const handleCancel = () => {
+        setVisible(false);
+    };
+    const hotKeys = [HotKeys.Keys.Meta, HotKeys.Keys.S];
+
+    return (
+        <div>
+            <HotKeys hotKeys={hotKeys} onHotKey={showDialog} preventDefault></HotKeys>
+            <br />
+            <HotKeys hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.S]} onHotKey={showDialog} preventDefault></HotKeys>
+            <Modal
+                title="Dialog"
+                visible={visible}
+                onOk={handleOk}
+                onCancel={handleCancel}
+            >
+                This is the Modal opened by hotkey: {'Meta/Control + S'}.
+            </Modal>
+        </div>
+    );
+}
+```
+
+### 修改监听挂载DOM
+快捷键默认在 body 监听，通过`getListenerTarget`修改快捷键监听挂载的DOM
+```jsx live=true
+import React, { useState, useRef } from 'react';
+import { HotKeys, Input, Modal } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const hotKeys = ["Control", "q"];
+    const [visible, setVisible] = useState(false);
+    const showDialog = () => {
+        setVisible(true);
+    };
+    const handleOk = () => {
+        setVisible(false);
+    };
+    const handleCancel = () => {
+        setVisible(false);
+    };
+
+    const inputRef = useRef(null);
+    return (
+        <div>
+            <Input ref={inputRef} placeholder='test for target'></Input>
+            <HotKeys hotKeys={hotKeys} onHotKey={showDialog} 
+                getListenerTarget={() => inputRef.current}>
+            </HotKeys>
+            <Modal
+                title="Dialog"
+                visible={visible}
+                onOk={handleOk}
+                onCancel={handleCancel}
+            >
+                This is the Modal opened by hotkey: {hotKeys.join('+')}.
+            </Modal>
+        </div>
+    );
+}
+```
+
+## API 参考
+
+### HotKeys
+
+| 属性              | 说明                                                                  | 类型                            | 默认值    |
+| ----------------- | --------------------------------------------------------------------- | ------------------------------- | --------- |
+| className         | 类名                                                                  | string                          |           |
+| content | 设置显示内容                                          | string[]                          | -         |
+| getListenerTarget         | 用于设置监听器挂载的DOM            | () => HTMLElement                       |  document.body         |
+| hotKeys  | 设置快捷键组合，[取值参考](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)                                          | KeyboardEvent.key[]                          | -         |
+| onClick        | 点击回调函数                                                              |   () => void                      |    -       |
+| onHotKey        | 快捷键回调函数                                                              |   (e: KeyboardEvent) => void                      |    -       |
+| preventDefault        | 是否阻止快捷键默认行为                                                                  | boolean                          | false          |
+| render        |    覆盖组件渲染                                               | () => ReactNode \| ReactNode                       |           |
+| style             | 样式                                                                  | CSSProperties                   |           |
+
+
+## 设计变量
+<DesignToken/>
+
+<!-- ## 相关物料
+```material
+44, 46
+``` -->
+
+## 相关物料
+<semi-material-list code="46"></semi-material-list>
+

content/plus/lottie/index-en-US.md

@@ -1,23 +1,18 @@
 ---
 localeCode: en-US
-order: 23
+order: 27
 category: Plus
 title: Lottie Animation
 icon: doc-lottie
 dir: column
 brief: Display Lottie animation on the web page
+showNew: true
 ---
 
-## Overview
+## When to use
 
 The Lottie component can render Lottie animations conveniently and simply, and provides a way to obtain global Lottie and animation instances to meet a wider range of configuration needs.
-
-`lottie-web` is used internally to render Lottie animations.
-
-## Usage scenarios
-
-Compared to using `lottie-web` directly, use the Semi Lottie component
-
+`lottie-web` is used internally to render Lottie animations. Compared to using `lottie-web` directly, use the Semi Lottie component  
 -   No need to worry about the creation and destruction of animation containers
 -   No need to worry about the life cycle of the animation itself
 -   Easier to use with React projects

content/plus/lottie/index.md

@@ -1,22 +1,18 @@
 ---
 localeCode: zh-CN
-order: 23
+order: 27
 category: Plus
 title: Lottie 动画
 icon: doc-lottie
 dir: column
 brief: 在网页中展示 Lottie 动画
+showNew: true
 ---
 
-## 概述
-
-Lottie 组件能够便捷简单地渲染 Lottie 动画，同时提供方式获取到全局 Lottie 和 动画实例满足更广泛的配置需求。
-
-内部使用 `lottie-web` 渲染 Lottie 动画。
-
 ## 使用场景
 
-相较于直接使用 `lottie-web`，使用 Semi Lottie 组件
+Lottie 组件能够便捷简单地渲染 Lottie 动画，同时提供方式获取到全局 Lottie 和 动画实例满足更广泛的配置需求。内部基于 `lottie-web` 渲染 Lottie 动画。  
+相较于直接使用 `lottie-web`，使用 Semi Lottie 组件的优势在于
 
 -   无需关心动画容器的创建与销毁
 -   无需关心动画本身的生命周期