chore: chinese doc

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

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

content/feedback/banner/index.md

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

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

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

content/feedback/notification/index.md

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

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

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

content/feedback/popconfirm/index.md

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

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

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

content/feedback/progress/index.md

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

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

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

content/feedback/skeleton/index.md

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

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

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

content/feedback/spin/index.md

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

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

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

content/feedback/toast/index.md

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

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

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

content/input/keyboardshortcut/index.md

@@ -1,11 +1,11 @@
 ---
 localeCode: zh-CN
-order: 30
+order: 32
 category: 输入类
-title:  Input 输入框
+title: KeyboardShortCut 快捷键
 icon: doc-input
 width: 60%
-brief: 输入框是最基本的接收用户文本输入的组件
+brief: 用于方便用户自定义快捷键及相关操作
 ---
 
 
@@ -14,497 +14,173 @@ brief: 输入框是最基本的接收用户文本输入的组件
 ### 如何引入
 
 ```jsx import
-import { Input } from '@douyinfe/semi-ui';
+import { KeyboardShortCut } from '@douyinfe/semi-ui';
 ```
 ### 基本
 
-基本使用
-
-```jsx live=true
-import React from 'react';
-import { Input } from '@douyinfe/semi-ui';
-
-() => (
-    <Input defaultValue='hi'></Input>
-);
-```
-
-### 三种大小
-
-默认定义了三种尺寸：大、默认、小
-
-```jsx live=true
-import React from 'react';
-import { Input } from '@douyinfe/semi-ui';
-
-() => (
-    <>
-        <Input placeholder='large' size='large'></Input>
-        <br/><br/>
-        <Input placeholder='default'></Input>
-        <br/><br/>
-        <Input placeholder='small' size='small'></Input>
-    </>
-);
-```
-
-### 不可用
-
-设定 `disabled` 属性为 `true`
-
-```jsx live=true
-import React from 'react';
-import { Input } from '@douyinfe/semi-ui';
-
-() => (
-    <>
-        <Input defaultValue='enabled input'></Input>
-        <br/>
-        <br/>
-        <Input disabled defaultValue='disabled input'></Input>
-    </>
-);
-```
-
-### 前缀/后缀
-
-在输入框上增加前缀、后缀图标，可以是 ReactNode
-
-当 prefix、suffix 传入的内容为文本或者 Semi Icon 时，会自动带上左右间隔，若为自定义 ReactNode，则左右间隔为 0
+基本使用，通过`hotKeys`传入快捷键组合
 
+[hotKeys取值参考](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)
 
 ```jsx live=true
-import React from 'react';
-import { Input, Typography } from '@douyinfe/semi-ui';
-import { IconSearch } from '@douyinfe/semi-icons';
-
-() => (
-    <>
-        <Input prefix={<IconSearch />} showClear></Input>
-        <br/><br/>
-        <Input prefix="Prefix" showClear></Input>
-        <br/><br/>
-        <Input suffix={<IconSearch />} showClear></Input>
-        <br/><br/>
-        <Input suffix={<Typography.Text strong type='secondary' style={{ marginRight: 8 }}>Suffix</Typography.Text>} showClear></Input>
-    </>
-);
-```
-
-### 前置/后置标签
-
-在输入框上增加前置/后置标签
-
-当 addonBefore、addonAfter 传入的内容为文本或者 Semi Icon 时，会自动带上左右间隔，若为自定义 ReactNode，则左右间隔为 0
-
-```jsx live=true
-import React from 'react';
-import { Input } from '@douyinfe/semi-ui';
-
-() => (
-    <Input addonBefore="http://" addonAfter=".com" />
-);
-```
-
-### 带移除图标
-
-点击图标删除所有内容
-
-```jsx live=true
-import React from 'react';
-import { Input } from '@douyinfe/semi-ui';
-
-() => (
-    <Input showClear defaultValue='click to clear'></Input>
-);
-```
-
-### 密码模式
-
-隐藏输入的具体内容
-
-```jsx live=true
-import React from 'react';
-import { Input } from '@douyinfe/semi-ui';
-
-() => (
-    <Input mode="password" defaultValue="123456"></Input>
-);
-```
-
-
-### 校验状态
-
-可设置不同校验状态，展示不同样式
-
-```jsx live=true
-import React from 'react';
-import { Input } from '@douyinfe/semi-ui';
-
-() => (
-    <>
-        <Input defaultValue='ies' validateStatus='warning'></Input>
-        <br/><br/>
-        <Input defaultValue='ies' validateStatus='error'></Input>
-        <br/><br/>
-        <Input defaultValue='ies'></Input>
-    </>
-);
-```
-
-### 受控组件
-
-`Input` 值完全取决于传入的 `value` 值，配合 `onChange` 回调函数使用
-
-```jsx live=true hideInDSM
-import React from 'react';
-import { Input } from '@douyinfe/semi-ui';
-
-class InputDemo extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            value: 'controlInput',
-            value2: 'input'
-        };
-        this.onChange = this.onChange.bind(this);
-    }
-    onChange(value, e) {
-        console.log(value);
-        this.setState({ value });
-    }
-    render() {
-        return (
-            <>
-                <Input
-                    value={this.state.value}
-                    onChange={this.onChange}>
-                </Input>
-            </>
-        );
-    }
+import React, { useState } from 'react';
+import { KeyboardShortCut } from '@douyinfe/semi-ui';
+
+function Demo() {
+  const hotKeys = ["Ctrl", "a"]
+  const [cnt, setCnt] = useState(0)
+  const onClick = () => {
+    setCnt(cnt+1)
+  }
+  return (
+    <div>
+      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} ></KeyboardShortCut>
+      <br></br>
+      <KeyboardShortCut hotKeys={['Ctrl', 'Shift', 'a']} onClick={onClick} ></KeyboardShortCut>
+      <div>{cnt}</div>
+    </div>
+  );
 }
 ```
 
-### 输入框组合
+### 自定义内容
 
-可以将多个输入框放入 InputGroup 的容器中，通过设置 `size` ，`disabled` 可统一设置组合中的输入框属性，支持输入框类型包括： `Input`， `InputNumber`， `Select`， `AutoComplete`、`TreeSelect`、`Cascader`、`DatePicker`
-
-<Notice type="primary" title="注意事项">
-  <div>InputGroup 不推荐插入非支持元素，Form.InputGroup 会对支持的元素进行错误聚合，而不会自定义元素进行处理。</div>
-</Notice>
+通过`content`传入渲染的字符
 
 ```jsx live=true
-import React from 'react';
-import { InputGroup, Input, InputNumber, AutoComplete, DatePicker, Select } from '@douyinfe/semi-ui';
-
-() => (
+import React, { useState } from 'react';
+import { KeyboardShortCut } from '@douyinfe/semi-ui';
+
+function Demo() {
+  const [cnt, setCnt] = useState(0)
+  const onClick = () => {
+    setCnt(cnt+1)
+  }
+  return (
     <div>
-        <InputGroup>
-            <Input placeholder="Name" style={{ width: 100 }} />
-            <InputNumber placeholder="Score" style={{ width: 140 }} />
-        </InputGroup>
-        <br/><br/><br/>
-        <InputGroup size={'small'}>
-            <Select style={{ width: '100px' }} defaultValue='home'>
-                <Select.Option value='home'>Home</Select.Option>
-                <Select.Option value='work'>Work</Select.Option>
-            </Select>
-            <AutoComplete
-                data={['Beijing Haidian']}
-                placeholder='Address: '
-                style={{ width: 180 }}
-            >
-            </AutoComplete>
-        </InputGroup>
-        <br/><br/><br/>
-        <InputGroup size={'small'}>
-            <Select style={{ width: '100px' }} defaultValue='signup'>
-                <Select.Option value='signup'>Sign Up</Select.Option>
-                <Select.Option value='signin'>Sign In</Select.Option>
-            </Select>
-            <Input placeholder="Email" style={{ width: 180 }} />
-        </InputGroup>
-        <br/><br/><br/>
-        <InputGroup size={'small'}>
-            <Input placeholder="Name" style={{ width: 100 }} />
-            <DatePicker placeholder="Birthday" />
-        </InputGroup>
+      <KeyboardShortCut hotKeys={["Ctrl", "b"]} onClick={onClick} content={["Control", "B"]}></KeyboardShortCut>
+        <br></br>
+      <KeyboardShortCut hotKeys={["Meta","c"]} onClick={onClick} content={["⌘", "C"]}></KeyboardShortCut>
+      <div>{cnt}</div>
     </div>
-);
+  );
+}
 ```
 
+通过`render`传入代替渲染的元素
 ```jsx live=true
-import React from 'react';
-import { InputGroup, Select, Cascader, TreeSelect } from '@douyinfe/semi-ui';
-
-() => {
-    const Option = Select.Option;
-    const treeData = [
-        {
-            label: 'Asia',
-            value: 'Asia',
-            key: '0',
-            children: [
-                {
-                    label: 'China',
-                    value: 'China',
-                    key: '0-0',
-                    children: [
-                        { label: 'Beijing', value: 'Beijing', key: '0-0-0' },
-                        { label: 'Shanghai', value: 'Shanghai', key: '0-0-1' },
-                    ],
-                },
-            ],
-        },
-        { label: 'North America', value: 'North America', key: '1' }
-    ];
+import React, { useState } from 'react';
+import { KeyboardShortCut, Tag } from '@douyinfe/semi-ui';
+
+function Demo() {
+  const hotKeys = ["r"]
+  const [cnt, setCnt] = useState(0)
+  const onClick = () => {
+    setCnt(cnt+1)
+  }
+  const newShortCut = () => {
     return (
-        <>
-            <InputGroup>
-                <Select style={{ width: 100 }} defaultValue='from'>
-                    <Select.Option value='from'>From: </Select.Option>
-                    <Select.Option value='to'>To: </Select.Option>
-                </Select>
-                <TreeSelect
-                    style={{ width: 220 }}
-                    treeData={treeData}
-                    placeholder="Please select"
-                />
-            </InputGroup>
-            <br/><br/>
-            <InputGroup>
-                <Select style={{ width: 100 }} defaultValue='from'>
-                    <Select.Option value='from'>From: </Select.Option>
-                    <Select.Option value='to'>To: </Select.Option>
-                </Select>
-                <Cascader
-                    style={{ width: 220 }}
-                    treeData={treeData}
-                    placeholder="Please select"
-                />
-            </InputGroup>
-        </>
-    );
-};
-
+      <div>
+        <Tag>{"按下R / K即可加一"}</Tag>
+      </div>
+    )
+  }
+  return (
+    <div>
+      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} render={newShortCut}></KeyboardShortCut>
+      <KeyboardShortCut hotKeys={["k"]} onClick={onClick} render={() => null}></KeyboardShortCut>
+      <div>{cnt}</div>
+    </div>
+  );
+}
 ```
 
-### 多行输入框
-
-用于多行输入。通过设置 `maxCount` 属性可以进行字数限制并显示字数统计。1.30.0 开始支持 `showClear`。
+### 点击触发
 
+设置`clickable`为`true`可以通过点击触发
 ```jsx live=true
-import React from 'react';
-import { TextArea } from '@douyinfe/semi-ui';
-
-() => (
+import React, { useState } from 'react';
+import { KeyboardShortCut } from '@douyinfe/semi-ui';
+
+function Demo() {
+  const hotKeys = ["Ctrl", "a"]
+  const [cnt, setCnt] = useState(0)
+  const onClick = () => {
+    setCnt(cnt+1)
+  }
+  return (
     <div>
-        <TextArea />
-        <br/><br/>
-        <TextArea maxCount={100} showClear/>
+      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} clickable={true}></KeyboardShortCut>
+      <div>{cnt}</div>
     </div>
-);
+  );
+}
 ```
 
-### 自动扩展的多行输入框
-
-通过设置 `autosize` 属性可设置只有高度自动随内容增加而变化。
-
+### 修改监听挂载DOM
+通过`getListenerTarget`修改快捷键监听挂载的DOM
 ```jsx live=true
-import React from 'react';
-import { TextArea } from '@douyinfe/semi-ui';
-
-() => (
+import React, { useState, useRef } from 'react';
+import { KeyboardShortCut, Input } from '@douyinfe/semi-ui';
+
+function Demo() {
+  const hotKeys = ["Meta", "s"]
+  const [cnt, setCnt] = useState(0)
+  const onClick = () => {
+    setCnt(cnt+1)
+  }
+
+  const inputRef = useRef(null);
+  return (
     <div>
-        <TextArea autosize rows={1} />
-        <br/><br/>
-        <TextArea autosize={{ minRows: 1, maxRows: 3}} />
-        <br/><br/>
-        <TextArea autosize maxCount={100} />
+      <Input ref={inputRef} placeholder='test for target'></Input>
+      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} 
+        getListenerTarget={() => inputRef.current}>
+      </KeyboardShortCut>
+      <div>{cnt}</div>
     </div>
-);
+  );
+}
 ```
 
-### 自定义计算字符串长度
-
-通过设置 `getValueLength` 属性可以自定义计算字符串长度。搭配 maxLength 和 minLength 可以支持 emoji 长度按照可见长度计算。
-
-
-传入 getValueLength 时，Semi 内部做了什么：
+### 不可用
 
-- maxLength：不直接透传 maxLength 给原生 input。如果输入长度超出最大限制，则使用上一次输入的合法长度字符。
-- minLength：动态切换 minLength 的长度，emoji 按照一个长度计算。
-- maxCount：使用 getValueLength 获取的值与 maxCount 进行比较
+设定 `disabled` 属性为 `true`
 
 ```jsx live=true
-import React from 'react';
-import GraphemeSplitter from 'grapheme-splitter';
-import { Input, Typography, Form, TextArea, Button } from '@douyinfe/semi-ui';
-
-() => {
-    const [value, setValue] = useState();
-    function getValueLength(str) {
-        if (typeof str === 'string') {
-            const splitter = new GraphemeSplitter();
-            return splitter.countGraphemes(str);
-        } else {
-            return 0;
-        }
-    }
-
-    function getTextAreaStrLength(str) {
-        const filteredStr = str.replace(/\s/g, '');
-        return filteredStr.length;
-    }
-
-    return (
-        <div>
-            <h4>maxLength=10</h4>
-            <div>
-                <Typography.Text>尝试输入以下字符</Typography.Text>
-                <div><Typography.Text copyable>💖</Typography.Text></div>
-                <div><Typography.Text copyable>👨‍👩‍👧‍👦</Typography.Text></div>
-            </div>
-            <Input maxLength={10} getValueLength={getValueLength} onChange={setValue} style={{ width: 200, marginTop: 12, marginBottom: 12 }} />
-            {
-                value && (
-                    <div>
-                        <div><Typography.Text type="tertiary">{`getValueLength=${getValueLength(value)}`}</Typography.Text></div>
-                        <div><Typography.Text type="tertiary">{`length=${value.length}`}</Typography.Text></div>
-                    </div>
-                )
-            }
-            <br/><br/>
-            <h4>Form.Input + minLength=4</h4>
-            <Form layout="horizontal">
-                <Form.Input noLabel field="username" minLength={4} getValueLength={getValueLength} style={{ width: 200 }} />
-                <Button type="primary" htmlType="submit">提交</Button>
-            </Form>
-            <h4>maxCount=10</h4>
-            <TextArea defaultValue="semi design" rows={2} maxCount={10} getValueLength={getTextAreaStrLength} style={{ width: 200 }} />
-        </div>
-    );
-};
+import React, { useState } from 'react';
+import { KeyboardShortCut } from '@douyinfe/semi-ui';
+
+function Demo() {
+  const hotKeys = ["Ctrl", "a"]
+  const [cnt, setCnt] = useState(0)
+  const onClick = () => {
+    setCnt(cnt+1)
+  }
+  return (
+    <div>
+      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} disabled></KeyboardShortCut>
+      <div>{cnt}</div>
+    </div>
+  );
+}
 ```
 
-一些问题的回答：
-
-> 为何不直接引入 `grapheme-splitter` 包？这个包未压缩体积为 200+kB，对于不需要把 emoji 按照可见长度计算的用户来说，这个体积有点过大了。因此 Semi 选择把长度计算函数作为参数让用户传入。
-
-> 为何不动态修改 maxLength？动态修改 maxLength 在输入操作完成以后，计算剩余可以输入的字符长度。 如 maxLength 设置为 1，想输入一个 length 为 2 的 '💖'，但是由于 input maxLength 的限制，这里根本就输入不进去，也就无法更新 maxLength。
-
 ## API 参考
 
-### Input
-> 其他属性与html input 标签保持一致
-
-| 属性                | 说明                                             | 类型                              | 默认值    |
-|-------------------|------------------------------------------------|---------------------------------|-----------|
-| aria-describedby  | 设置 aria-describedby 属性                         | string                          | -  |
-| aria-errormessage | 设置 aria-errormessage 属性                        | string                          | -  |
-| aria-invalid      | 设置 aria-invalid 属性                             | string                          | -  |
-| aria-label        | 设置 aria-label 属性                               | string                          | -  |
-| aria-labelledby   | 设置 aria-labelledby 属性                          | string                          | -  |
-| aria-required     | 设置 aria-required 属性                            | string                          | -  |
-| addonAfter        | 后置标签                                           | ReactNode                       |           |
-| addonBefore       | 前置标签                                           | ReactNode                       |           |
-| borderless        | 无边框模式  >=2.33.0                                | boolean                         |           |
-| className         | 类名                                             | string                          |           |
-| clearIcon         | 可用于自定义清除按钮, showClear为true时有效 **>=2.25.0**     | ReactNode                       |  |
-| defaultValue      | 输入框内容默认值                                       | ReactText                       |           |
-| disabled          | 是否禁用，默认为false                                  | boolean                         | false     |
-| getValueLength    | 自定义计算字符串长度                                     | (value: string) => number       |      |
-| hideSuffix        | 清除按钮与后缀标签并存时隐藏后缀标签，默认为false两者并列                | boolean                         | false     |
-| mode              | 输入框的模式，可选值password **>=v1.3.0**                | string                          |           |
-| prefix            | 前缀标签                                           | ReactNode                       |           |
-| preventScroll     | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法         | boolean                         |  |  |
-| showClear         | 输入框有内容且 hover 或 focus 时展示清除按钮 **>=1.0.0**      | boolean                         | false     |
-| size              | 输入框大小，large、default、small                      | string                          | 'default' |
-| style             | 样式                                             | CSSProperties                   |           |
-| suffix            | 后缀标签                                           | ReactNode                       |           |
-| type              | 声明input类型，同原生input标签的type属性                    | string                          | text     |
-| validateStatus    | 校验状态，可选值default、error、warning，默认default。仅影响展示样式 | string                          | 'default' |
-| value             | 输入框内容                                          | ReactText                       |           |
-| onBlur            | 输入框失去焦点时的回调                                    | function(e:event)               |           |
-| onChange          | 输入框内容变化时的回调                                    | function(value:string, e:event) |           |
-| onClear           | 点击清除按钮时的回调                                     | function(e:event)               |           |
-| onEnterPress      | 按回车时回调（keypress）                               | function(e:event)               |           |
-| onFocus           | 输入框focus时的回调                                   | function(e:event)               |           |
-| onKeyDown         | keydown回调                                      | function(e:event)               |           |
-| onKeyPress        | keypress回调                                     | function(e:event)               |           |
-| onKeyUp           | keyup回调                                        | function(e:event)               |           |
-
-### TextArea
-
-> 其他属性与 html textarea 标签保持一致
-
-| 属性         | 说明                               | 类型                            | 默认值 |
-|--------------|----------------------------------|---------------------------------|--------|
-| aria-describedby   | 设置 aria-describedby 属性           | string                         | -  |
-| aria-errormessage   | 设置 aria-errormessage 属性           | string                         | -  |
-| aria-invalid   | 设置 aria-invalid 属性           | string                         | -  |
-| aria-label   | 设置 aria-label 属性           | string                         | -  |
-| aria-labelledby   | 设置 aria-labelledby 属性           | string                         | -  |
-| aria-required   | 设置 aria-required 属性           | string                         | -  |
-| autosize     | 是否随着自动适应内容高度，可写成对象配置最小最大行数`{minRows?: number, maxRows?: number}`<br />**从2.45.0版本起支持对象参数**           | boolean\|object                         | false  |
-| borderless        | 无边框模式  >=2.33.0                                 | boolean                         |           |
-| className    | 类名                               | string                          | -      |
-| cols         | 默认列数                           | number                          | 无     |
-| disabled     | 禁用状态                           | boolean                         | false  |
-| getValueLength| 自定义计算字符串长度                                            | (value: string) => number        |      |
-| maxCount     | 设置字数限制并显示字数统计         | number                          | 无     |
-| placeholder  | 当前的默认值                       | string                          | 无     |
-| readonly     | 只读                               | boolean                         | false  |
-| rows         | 默认行数                           | number                          | 4      |
-| showClear    | 支持清除 **>=1.30.0**               | boolean                         | false     |
-| style        | 样式                               | CSSProperties                   | -      |
-| onBlur       | 输入框失去焦点时的回调             |(e:event) => void               | -      |
-| onChange     | 输入框内容变化时的回调             | (value:string, e:event) => void |        |
-| onClear      | 点击清除按钮时的回调  **>=1.30.0** | (e:event) => void                         | -       |
-| onEnterPress | 按下回车的回调                     | (e:event) => void                         | 无     |
-| onFocus      | 输入框 focus 时的回调              | (e:event) => void               | -      |
-| onKeyDown    | keydown 回调，html 事件             | (e:event) => void               | -      |
-| onKeyPress   | keypress 回调，html 事件            | (e:event) => void               | -      |
-| onKeyUp      | keyup 回调，html 事件               | (e:event) => void               | -      |
-| onResize     | 触发高度变化时的回调 **>=v0.37.0** | ({ height:number }) => void    | -      |
-
-### InputGroup
-
-通用属性将设置到 InputGroup 的子级元素上，例如 disabled、onFocus 等。如果你在子级设置了 onFocus、onBlur 或 disabled，会覆盖掉 InputGroup 对应属性值。
-
-
-| 属性          | 说明                           | 类型                                                          | 默认值    |
-|---------------|------------------------------|---------------------------------------------------------------|-----------|
-| className     | 组的类名                       | string                                                        | -         |
-| disabled      | 禁用                           | boolean                                                       | -         |
-| label         | InputGroup 的 label 属性       | [LabelProps](https://semi.design/zh-CN/input/form#Form.Label) | -         |
-| labelPosition | label 位置，可选 top 或 left    | string                                                        | -         |
-| size          | 输入框大小，large、default、small | string                                                        | 'default' |
-| style         | 组的样式                       | CSSProperties                                                 | -         |
-| onBlur        | 输入框失去焦点时的回调         | (e:event) => void                                             | -         |
-| onFocus       | 输入框 focus 时的回调          | (e:event) => void                                             | -         |
-
-## Methods
-
-绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
-
-| 名称    | 描述     |
-|---------|--------|
-| blur()  | 移出焦点 |
-| focus() | 获取焦点 |
-
-## Accessibility
-
-### ARIA
-
-- 当 validateStatus 为 error 时，输入框的 aria-invalid 为 true
-- 在 Form 中使用时，field label 是 Input 的 aria-label
-
-### 键盘和焦点
-
-- Input 可被获取焦点，键盘用户可以使用 Tab 及 Shift  + Tab 切换焦点
-- 密码按钮可以被聚焦，聚焦后使用 Enter 或者空格键激活
+### KeyboardShortCut
+
+| 属性              | 说明                                                                  | 类型                            | 默认值    |
+| ----------------- | --------------------------------------------------------------------- | ------------------------------- | --------- |
+| hotKeys  | 设置快捷键组合，[取值参考](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)                                          | KeyboardEvent.key[]                          | -         |
+| content | 设置显示内容                                          | string[]                          | -         |
+| onClick        | 快捷键触发函数                                                              |   () => void                      |    -       |
+| clickable       | 设置函数是否可以点击触发                                                              | boolean                       |   false       |
+| render        |    覆盖组件渲染                                               | () => ReactNode                        |           |
+| className         | 类名                                                                  | string                          |           |
+| getListenerTarget         | 用于设置监听器挂载的DOM            | () => HTMLElement                       |  document.body         |
+| disabled          | 是否禁用，默认为false                                                 | boolean                         | false     |
+| style             | 样式                                                                  | CSSProperties                   |           |
 
 
 ## 设计变量

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 32
+order: 33
 category: Input
 title: PinCode
 icon: doc-pincode

content/input/pincode/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 32
+order: 33
 category: 输入类
 title: PinCode 验证码输入
 icon: doc-pincode

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

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

content/input/radio/index.md

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

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

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

content/input/rating/index.md

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

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

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

content/input/select/index.md

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

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

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

content/input/slider/index.md

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

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

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

content/input/switch/index.md

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

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

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

content/input/taginput/index.md

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

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

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

content/input/timepicker/index.md

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

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

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

content/input/transfer/index.md

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

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

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

content/input/treeselect/index.md

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

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

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

content/input/upload/index.md

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

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

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

content/navigation/anchor/index.md

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

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

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

content/navigation/backtop/index.md

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

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

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

content/navigation/breadcrumb/index.md

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

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

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

content/navigation/navigation/index.md

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

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

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

content/navigation/pagination/index.md

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

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

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

content/navigation/steps/index.md

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

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

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

content/navigation/tabs/index.md

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

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

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

content/navigation/tree/index.md

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

content/order.js

@@ -30,6 +30,7 @@ const order = [
     'form',
     'input',
     'inputnumber',
+    'keyboardshortcut',
     'pincode',
     'radio',
     'rating',

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

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

content/other/configprovider/index.md

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

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

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

content/other/locale/index.md

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

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 83
+order: 84
 category: Plus
 title:  Chat
 icon: doc-chat

content/plus/chat/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 83
+order: 84
 category: Plus
 title:  Chat 对话
 icon: doc-chat

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 51
+order: 52
 category: Show
 title:  Avatar
 subTitle: avatar

content/show/avatar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 51
+order: 52
 category: 展示类
 title: Avatar 头像
 icon: doc-avatar

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 52
+order: 53
 category: Show
 title:  Badge
 subTitle: Badge

content/show/badge/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 52
+order: 53
 category: 展示类
 title:  Badge 徽章
 icon: doc-badge

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 53
+order: 54
 category: Show
 title:  Calendar
 subTitle: Calendar

content/show/calendar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 53
+order: 54
 category: 展示类
 title: Calendar 日历
 icon: doc-calendar

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 54
+order: 55
 category: Show
 title:  Card
 subTitle: Card

content/show/card/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 54
+order: 55
 category: 展示类
 title:  Card 卡片
 subTitle: 卡片

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 55
+order: 56
 category: Show
 title: Carousel
 subTitle: Carousel

content/show/carousel/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 55
+order: 56
 category: 展示类
 title: Carousel 轮播图
 icon: doc-carousel

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 73
+order: 74
 category: Show
 title: Data Visualization
 icon: doc-vchart

content/show/chart/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 73
+order: 74
 category: 展示类
 title:  Data Visualization 数据可视化
 icon: doc-vchart

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 56
+order: 57
 category: Show
 title: Collapse
 subTitle: Collapse

content/show/collapse/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 56
+order: 57
 category: 展示类
 title: Collapse 折叠面板
 icon: doc-accordion

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 57
+order: 58
 category: Show
 title: Collapsible
 subTitle: Collapsible

content/show/collapsible/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 57
+order: 58
 category: 展示类
 title: Collapsible 折叠
 icon: doc-collapsible

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 58
+order: 59
 category: Show
 title: Description
 subTitle: Descriptions

content/show/descriptions/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 58
+order: 59
 category: 展示类
 title: Descriptions 描述列表
 icon: doc-descriptions

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 59
+order: 60
 category: Show
 title: Dropdown
 subTitle: Dropdown

content/show/dropdown/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 59
+order: 60
 category: 展示类
 title: Dropdown 下拉框
 icon: doc-dropdown

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 60
+order: 61
 category: Show
 title: Empty
 subTitle: Empty

content/show/empty/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 60
+order: 61
 category: 展示类
 title: Empty 空状态
 icon: doc-empty

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 61
+order: 62
 category: Show
 title: Highlight 
 icon: doc-highlight

content/show/highlight/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 61
+order: 62
 category: 展示类
 title: Highlight 高亮文本
 icon: doc-highlight

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 62
+order: 63
 category: Show
 title: Image
 icon: doc-image

content/show/image/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 62
+order: 63
 category: 展示类
 title: Image 图片
 icon: doc-image

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 63
+order: 64
 category: Show
 title: List
 subTitle: List

content/show/list/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 63
+order: 64
 category: 展示类
 title: List 列表
 icon: doc-list

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 64
+order: 65
 category: Show
 title:  Modal
 subTitle: Modal

content/show/modal/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 64
+order: 65
 category: 展示类
 title: Modal 模态对话框
 icon: doc-modal

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 65
+order: 66
 category: Show
 title: OverflowList
 subTitle: OverflowList

content/show/overflowlist/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 65
+order: 66
 category: 展示类
 title: OverflowList 折叠列表
 icon: doc-overflowList

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 66
+order: 67
 category: Show
 title: Popover
 subTitle: Popover

content/show/popover/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 66
+order: 67
 category: 展示类
 title: Popover 气泡卡片
 icon: doc-popover

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 67
+order: 68
 category: Show
 title:  ScrollList
 subTitle: ScrollList

content/show/scrolllist/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 67
+order: 68
 category: 展示类
 title: ScrollList 滚动列表
 icon: doc-scrolllist

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 68
+order: 69
 category: Show
 title: SideSheet
 subTitle: SideSheet

content/show/sidesheet/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 68
+order: 69
 category: 展示类
 title: SideSheet 滑动侧边栏
 icon: doc-sidesheet

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 69
+order: 70
 category: Show
 title: Table
 subTitle: Table