docs: update dropdown demo

content/input/form/index.md

@@ -185,256 +185,249 @@ import { Form } from '@douyinfe/semi-ui';
 
 ```jsx live=true dir="column"
 import React from 'react';
-import { Form, Col, Row, Button } from '@douyinfe/semi-ui';
+import { Form, Col, Row, Button, Space } from '@douyinfe/semi-ui';
 import { IconUpload } from '@douyinfe/semi-icons';
 
-class BasicDemoWithInit extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            initValues: {
-                name: 'semi',
-                business: ['ulikeCam'],
-                role: 'ued',
-                switch: true,
-                files: [
-                    {
-                        uid: '1',
-                        name: 'vigo.png',
-                        status: 'success',
-                        size: '130KB',
-                        preview: true,
-                        url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/vigo.png'
-                    },
-                    {
-                        uid: '2',
-                        name: 'resso.jpeg',
-                        status: 'validateFail',
-                        size: '222KB',
-                        percent: 50,
-                        preview: true,
-                        fileInstance: new File([new ArrayBuffer(2048)], 'resso.jpeg', { type: 'image/jpeg' }),
-                        url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png'
-                    },
-                    {
-                        uid: '3',
-                        name: 'dy.jpeg',
-                        status: 'uploading',
-                        size: '222KB',
-                        percent: 50,
-                        preview: true,
-                        fileInstance: new File([new ArrayBuffer(2048)], 'dy.jpeg', { type: 'image/jpeg' }),
-                        url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png'
-                    }
-                ]
-            }
-        };
-    }
-
-    render() {
-        const { Section, Input, InputNumber, AutoComplete, Select, TreeSelect, Cascader, DatePicker, TimePicker, TextArea, CheckboxGroup, Checkbox, RadioGroup, Radio, Slider, Rating, Switch, TagInput } = Form;
-        const { initValues } = this.state;
-        const plainOptions = ['A', 'B', 'C'];
-        const style = { width: '90%' };
-        const treeData = [
+() => {
+    const initValues = {
+        name: 'semi',
+        business: ['ulikeCam'],
+        role: 'ued',
+        switch: true,
+        files: [
             {
-                label: '亚洲',
-                value: 'Asia',
-                key: '0',
-                children: [
-                    {
-                        label: '中国',
-                        value: 'China',
-                        key: '0-0',
-                        children: [
-                            {
-                                label: '北京',
-                                value: 'Beijing',
-                                key: '0-0-0',
-                            },
-                            {
-                                label: '上海',
-                                value: 'Shanghai',
-                                key: '0-0-1',
-                            },
-                        ],
-                    },
-                ],
+                uid: '1',
+                name: 'vigo.png',
+                status: 'success',
+                size: '130KB',
+                preview: true,
+                url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/vigo.png'
+            },
+            {
+                uid: '2',
+                name: 'resso.jpeg',
+                status: 'validateFail',
+                size: '222KB',
+                percent: 50,
+                preview: true,
+                fileInstance: new File([new ArrayBuffer(2048)], 'resso.jpeg', { type: 'image/jpeg' }),
+                url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png'
             },
             {
-                label: '北美洲',
-                value: 'North America',
-                key: '1',
+                uid: '3',
+                name: 'douyin.jpeg',
+                status: 'uploading',
+                size: '222KB',
+                percent: 50,
+                preview: true,
+                fileInstance: new File([new ArrayBuffer(2048)], 'dy.jpeg', { type: 'image/jpeg' }),
+                url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png'
             }
-        ];
+        ]
+    };
+    const { Section, Input, InputNumber, AutoComplete, Select, TreeSelect, Cascader, DatePicker, TimePicker, TextArea, CheckboxGroup, Checkbox, RadioGroup, Radio, Slider, Rating, Switch, TagInput } = Form;
+    const plainOptions = ['A', 'B', 'C'];
+    const style = { width: '90%' };
+    const treeData = [
+        {
+            label: '亚洲',
+            value: 'Asia',
+            key: '0',
+            children: [
+                {
+                    label: '中国',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: '北京',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: '上海',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            label: '北美洲',
+            value: 'North America',
+            key: '1',
+        }
+    ];
 
-        return (
-            <Form
-                initValues={initValues}
-                style={{ padding: 10, width: '100%' }}
-                onValueChange={(v)=>console.log(v)}
-            >
-                <Section text={'基本信息'}>
-                    <Row>
-                        <Col span={12}>
-                            <Input
-                                field="name"
-                                label="名称（Input）"
-                                initValue={'mikeya'}
-                                style={style}
-                                trigger='blur'
-                            />
-                        </Col>
-                        <Col span={12}>
-                            <DatePicker field="date" label='日期（DatePicker）' style={style} initValue={new Date()} placeholder='请选择生效日期' />
-                        </Col>
-                    </Row>
-                    <Row>
-                        <Col span={12}>
-                            <Select field="role" style={style} label='角色（Select）' placeholder='请选择你的角色'>
-                                <Select.Option value="operate">运营</Select.Option>
-                                <Select.Option value="rd">开发</Select.Option>
-                                <Select.Option value="pm">产品</Select.Option>
-                                <Select.Option value="ued">设计</Select.Option>
-                            </Select>
-                        </Col>
-                        <Col span={12}>
-                            <Select
-                                field="business"
-                                multiple
-                                style={style}
-                                placeholder='请选择业务线'
-                                label="业务线（多选Select）"
-                                extraText={
-                                    <div style={{
-                                        color: 'rgba(var(--semi-blue-5), 1)',
-                                        fontSize: 14,
-                                        userSelect: 'none',
-                                        cursor: 'pointer'
-                                    }}>
-                                        没有找到合适的业务线？
-                                    </div>
-                                }
-                            >
-                                <Select.Option value="abc">Semi</Select.Option>
-                                <Select.Option value="ulikeCam">轻颜相机</Select.Option>
-                                <Select.Option value="toutiao">今日头条</Select.Option>
-                            </Select>
-                        </Col>
-                    </Row>
-                    <Row>
-                        <Col span={12}>
-                            <Form.Cascader
-                                placeholder="请选择所在地区"
-                                treeData={treeData}
-                                field='area'
-                                label='地区（Cascader）'
-                                style={style}
-                            >
-                            </Form.Cascader>
-                        </Col>
-                        <Col span={12}>
-                            <Form.TreeSelect
-                                field="tree"
-                                style={style}
-                                label='节点（TreeSelect）'
-                                placeholder='请选择服务节点'
-                                treeData={treeData}
-                                filterTreeNode
-                            >
-                            </Form.TreeSelect>
-                        </Col>
-                    </Row>
-                    <Row>
-                        <Col span={12}>
-                            <TagInput 
-                                field="product"
-                                label='产品（TagInput）'
-                                initValue={['abc', 'ulikeCam']}
-                                placeholder='请输入产品'
-                                style={style}
-                            />
-                        </Col>
-                    </Row>
-                    <Row>
-                        <Col span={24}>
-                            <Form.Upload
-                                field='files'
-                                label='证明文件（Upload）'
-                                action='//semi.design/api/upload'
-                            >
-                                <Button icon={<IconUpload />} theme="light">
-                                    点击上传
-                                </Button>
-                            </Form.Upload>
-                        </Col>
-                    </Row>
-                </Section>
-                <Section text='资源详情'>
-                    <Row>
-                        <Col span={12}>
-                            <TextArea
-                                style={{ ...style, height: 120 }}
-                                field='description'
-                                label='申请理由（TextArea）'
-                                placeholder='请填写申请资源理由'
-                            />
-                        </Col>
-                        <Col span={12}>
-                            <CheckboxGroup
-                                field="type"
-                                direction='horizontal'
-                                label='申请类型（CheckboxGroup）'
-                                initValue={['user', 'admin']}
-                                rules={[
-                                    { required: true }
-                                ]}
-                            >
-                                <Checkbox value="admin">admin</Checkbox>
-                                <Checkbox value="user">user</Checkbox>
-                                <Checkbox value="guest">guest</Checkbox>
-                                <Checkbox value="root">root</Checkbox>
-                            </CheckboxGroup>
-                            <RadioGroup field="isMonopolize" label='是否独占资源（Radio）' rules={[
-                                { type: 'boolean' },
-                                { required: true, message: '必须选择是否独占 ' }
-                            ]}>
-                                <Radio value={1}>是</Radio>
-                                <Radio value={0}>否</Radio>
-                            </RadioGroup>
-                        </Col>
-                    </Row>
-                    <Row>
-                        <Col span={12}>
-                            <TimePicker field="time" label='截止时刻（TimePicker）' style={{ width: '90%' }}/>
-                        </Col>
-                        <Col span={12}>
-                            <InputNumber field='number' label='申请数量（InputNumber）' initValue={20} style={style}/>
-                        </Col>
-                    </Row>
-                    <Row>
-                        <Col span={12}>
-                            <Slider field="range" label='资源使用报警阈值(%)（Slider）' initValue={10} style={{ width: '90%' }}/>
-                        </Col>
-                        <Col span={12}>
-                            <Switch field='switch' label='开关(Switch)'/>
-                        </Col>
-                    </Row>
-                    <Row>
-                        <Col span={12}>
-                            <Rating field="rating" label='满意度(Rating)' initValue={2} style={{ width: '90%' }}/>
-                        </Col>
-                    </Row>
-                </Section>
-                <Checkbox value="false" field="agree" noLabel={true}>
-                    我已阅读并清楚相关规定（Checkbox）
-                </Checkbox>
+    return (
+        <Form
+            initValues={initValues}
+            style={{ padding: 10, width: '100%' }}
+            onValueChange={(v)=>console.log(v)}
+        >
+            <Section text={'基本信息'}>
+                <Row>
+                    <Col span={12}>
+                        <Input
+                            field="name"
+                            label="名称（Input）"
+                            initValue={'mikeya'}
+                            style={style}
+                            trigger='blur'
+                        />
+                    </Col>
+                    <Col span={12}>
+                        <DatePicker field="date" label='日期（DatePicker）' style={style} initValue={new Date()} placeholder='请选择生效日期' />
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span={12}>
+                        <Select field="role" style={style} label='角色（Select）' placeholder='请选择你的角色'>
+                            <Select.Option value="operate">运营</Select.Option>
+                            <Select.Option value="rd">开发</Select.Option>
+                            <Select.Option value="pm">产品</Select.Option>
+                            <Select.Option value="ued">设计</Select.Option>
+                        </Select>
+                    </Col>
+                    <Col span={12}>
+                        <Select
+                            field="business"
+                            multiple
+                            style={style}
+                            placeholder='请选择业务线'
+                            label="业务线（多选Select）"
+                            extraText={
+                                <div style={{
+                                    color: 'rgba(var(--semi-blue-5), 1)',
+                                    fontSize: 14,
+                                    userSelect: 'none',
+                                    cursor: 'pointer'
+                                }}>
+                                    没有找到合适的业务线？
+                                </div>
+                            }
+                        >
+                            <Select.Option value="abc">Semi</Select.Option>
+                            <Select.Option value="ulikeCam">轻颜相机</Select.Option>
+                            <Select.Option value="toutiao">今日头条</Select.Option>
+                        </Select>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span={12}>
+                        <Form.Cascader
+                            placeholder="请选择所在地区"
+                            treeData={treeData}
+                            field='area'
+                            label='地区（Cascader）'
+                            style={style}
+                        >
+                        </Form.Cascader>
+                    </Col>
+                    <Col span={12}>
+                        <Form.TreeSelect
+                            field="tree"
+                            style={style}
+                            label='节点（TreeSelect）'
+                            placeholder='请选择服务节点'
+                            treeData={treeData}
+                            filterTreeNode
+                        >
+                        </Form.TreeSelect>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span={12}>
+                        <TagInput 
+                            field="product"
+                            label='产品（TagInput）'
+                            initValue={['abc', 'ulikeCam']}
+                            placeholder='请输入产品'
+                            style={style}
+                        />
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span={24}>
+                        <Form.Upload
+                            field='files'
+                            label='证明文件（Upload）'
+                            action='//semi.design/api/upload'
+                        >
+                            <Button icon={<IconUpload />} theme="light">
+                                点击上传
+                            </Button>
+                        </Form.Upload>
+                    </Col>
+                </Row>
+            </Section>
+            <Section text='资源详情'>
+                <Row>
+                    <Col span={12}>
+                        <TextArea
+                            style={{ ...style, height: 120 }}
+                            field='description'
+                            label='申请理由（TextArea）'
+                            placeholder='请填写申请资源理由'
+                        />
+                    </Col>
+                    <Col span={12}>
+                        <CheckboxGroup
+                            field="type"
+                            direction='horizontal'
+                            label='申请类型（CheckboxGroup）'
+                            initValue={['user', 'admin']}
+                            rules={[
+                                { required: true }
+                            ]}
+                        >
+                            <Checkbox value="admin">admin</Checkbox>
+                            <Checkbox value="user">user</Checkbox>
+                            <Checkbox value="guest">guest</Checkbox>
+                            <Checkbox value="root">root</Checkbox>
+                        </CheckboxGroup>
+                        <RadioGroup field="isMonopolize" label='是否独占资源（Radio）' rules={[
+                            { type: 'boolean' },
+                            { required: true, message: '必须选择是否独占 ' }
+                        ]}>
+                            <Radio value={1}>是</Radio>
+                            <Radio value={0}>否</Radio>
+                        </RadioGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span={12}>
+                        <TimePicker field="time" label='截止时刻（TimePicker）' style={{ width: '90%' }}/>
+                    </Col>
+                    <Col span={12}>
+                        <InputNumber field='number' label='申请数量（InputNumber）' initValue={20} style={style}/>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span={12}>
+                        <Slider field="range" label='资源使用报警阈值(%)（Slider）' initValue={10} style={{ width: '90%' }}/>
+                    </Col>
+                    <Col span={12}>
+                        <Switch field='switch' label='开关(Switch)'/>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span={12}>
+                        <Rating field="rating" label='满意度(Rating)' initValue={2} style={{ width: '90%' }}/>
+                    </Col>
+                </Row>
+            </Section>
+            <Checkbox value="false" field="agree" noLabel={true}>
+                我已阅读并清楚相关规定（Checkbox）
+            </Checkbox>
+            <Space>
                 <Button type="primary" htmlType="submit" className="btn-margin-right">提交(submit)</Button>
                 <Button htmlType="reset">重置(reset)</Button>
-            </Form>
-        );
-    }
-}
+            </Space>
+        </Form>
+    );
+};
 ```
 
 ### 表单控件值的绑定
@@ -1580,22 +1573,31 @@ import { Form, ArrayField, Button, Card, Typography, } from "@douyinfe/semi-ui";
 import { IconPlusCircle, IconMinusCircle } from "@douyinfe/semi-icons";
 import React from "react";
 
+const selectOption = [
+    { label: '发件人地址', value: 'address' },
+    { label: '邮件主题', value: 'title' },
+    { label: '发送时间', value: 'sendTime' },
+    { label: '接收时间', value: 'receiveTime' },
+    { label: '正文', value: 'main' },
+    { label: '附件名称', value: 'attachmentName' },
+];
+
 const initValue = {
     group: [
         {
             name: "收信规则1",
             rules: [
-                { itemName: "发件人地址", type: "include" },
-                { itemName: "邮件主题", type: "exclude" },
+                { ruleType: "address", type: "include", text: "bytedance.com" },
+                { ruleType: "title", type: "exclude", text: "更新日志" },
             ],
         },
         {
             name: "收信规则2",
             rules: [
-                { itemName: "发送时间", type: "include" }
+                { ruleType: "sendTime", type: "include", text: "2019" }
             ],
         },
-    ]
+    ] 
 };
 
 const NestedField = (props) => {
@@ -1609,22 +1611,29 @@ const NestedField = (props) => {
                 <React.Fragment>
                     {arrayFields.map(({ field, key, remove }, i) => (
                         <div style={{ display: "flex" }} key={key}>
-                            <Form.Input
-                                field={`${field}[itemName]`}
-                                label={`${field}.itemName`}
+                            <Form.Select
+                                field={`${field}[ruleType]`}
+                                label={`${field}.ruleType`}
                                 noLabel
-                                style={{ width: 100, marginRight: 12 }}
-                            ></Form.Input>
+                                optionList={selectOption}
+                                style={{ width: 120, marginRight: 12 }}
+                            ></Form.Select>
                             <Form.Select
                                 field={`${field}[type]`}
                                 label={`${field}.type`}
                                 noLabel
-                                style={{ width: 100 }}
+                                style={{ width: 100, marginRight: 12 }}
                                 optionList={[
                                     { label: "包含", value: "include" },
                                     { label: "不包含", value: "exclude" },
                                 ]}
                             ></Form.Select>
+                            <Form.Input 
+                                field={`${field}[text]`}
+                                label={`${field}.text`}
+                                noLabel
+                                style={{ width: 200 }}
+                            ></Form.Input>
                             <Button
                                 type="danger"
                                 theme="borderless"
@@ -1638,7 +1647,7 @@ const NestedField = (props) => {
                                 disabled={i !== arrayFields.length - 1}
                                 onClick={() => {
                                     addWithInitValue({
-                                        itemName: `条件${arrayFields.length + 1}`,
+                                        ruleType: `条件${arrayFields.length + 1}`,
                                         type: "include",
                                     });
                                 }}
@@ -1670,13 +1679,13 @@ const NestArrayFieldDemo = () => {
                                 addWithInitValue({
                                     name: "新规则名称",
                                     rules: [
-                                        { itemName: "正文", type: "include" },
-                                        { itemName: "附件名称", type: "include" },
+                                        { ruleType: "main", type: "include", text: "" },
+                                        { ruleType: "attachmentName", type: "include", text: "" },
                                     ],
                                 });
                             }}
                         >
-                            新增收信规则
+                            新增收信规则 
                         </Button>
                         {arrayFields.map(({ field, key, remove }, i) => (
                             <div
@@ -1717,6 +1726,7 @@ const NestArrayFieldDemo = () => {
 };
 
 render(NestArrayFieldDemo);
+
 ```
 
 

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

@@ -18,27 +18,65 @@ import { Dropdown } from '@douyinfe/semi-ui';
 
 ### Basic Usage
 
+- For the Trigger of the Dropdown within its children: By default, it is displayed on hover. You can modify it to values like `click`, `custom`, `contextMenu`, etc. through the `props.trigger` to specify different triggering methods.
+- Use `render` to specify the specific content of the dropdown box: Use `Dropdown.Menu` as the parent container, and use `Dropdown.Item`, `Dropdown.Divider`, and `Dropdown.Title` in combination. Of course, in simple scenarios, you can also just combine `Dropdown.Menu` with `Dropdown.Item`, and the other elements are not mandatory.
+- `Dropdown.Item` can disable a certain option by setting `disabled`. By configuring `type`, text in different colors can be displayed. By setting `icon`, icons can be quickly configured. For more complex custom structures, you can pass in `ReactNode` through `children` for custom rendering. 
+
 ```jsx live=true
 import React from 'react';
-import { Dropdown, Tag } from '@douyinfe/semi-ui';
+import { Dropdown, Button, HotKeys } from '@douyinfe/semi-ui';
+import { IconBox, IconSetting, IconForward, IconRefresh, IconSearch, IconAlertCircle } from "@douyinfe/semi-icons";
+import { IconToken } from "@douyinfe/semi-icons-lab";
 
 function Demo() {
     return (
         <Dropdown
+            position="bottomLeft"
             render={
                 <Dropdown.Menu>
-                    <Dropdown.Item>Menu Item 1</Dropdown.Item>
-                    <Dropdown.Item>Menu Item 2</Dropdown.Item>
-                    <Dropdown.Item>Menu Item 3</Dropdown.Item>
+                    <Dropdown.Title>Group 1</Dropdown.Title>
+                    <Dropdown.Item icon={<IconBox />}>
+                        Menu Item 1
+                        <HotKeys
+                            style={{ marginLeft: 20 }}
+                            hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.B]}
+                            content={['Ctrl', 'B']}
+                        ></HotKeys>
+                    </Dropdown.Item>
+                    <Dropdown.Item icon={<IconSetting />}>
+                        Menu Item 2
+                        <HotKeys
+                            style={{ marginLeft: 20 }}
+                            hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.V]}
+                            content={['Ctrl', 'V']}
+                        ></HotKeys>
+                    </Dropdown.Item>
+                    <Dropdown.Item disabled icon={<IconForward />}>
+                        Menu Item 3
+                        <HotKeys
+                            style={{ marginLeft: 20 }}
+                            hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.F3]}
+                            content={['Ctrl', 'F3']}
+                        ></HotKeys>
+                    </Dropdown.Item>
+                    <Dropdown.Divider />
+                    <Dropdown.Title>Group 2</Dropdown.Title>
+                    <Dropdown.Item type="tertiary" icon={<IconRefresh />}>Tertiary text</Dropdown.Item>
+                    <Dropdown.Item type="warning" icon={<IconSearch />}>
+                        Warning Text
+                    </Dropdown.Item>
+                    <Dropdown.Item type="danger" icon={<IconAlertCircle />}>Danger text</Dropdown.Item>
                 </Dropdown.Menu>
             }
         >
-            <Tag>Hover Me</Tag>
+            <Button theme="outline" type="tertiary" icon={<IconToken />}>
+                Hover Me
+            </Button>
         </Dropdown>
     );
 }
-```
 
+```
 ### Nested Usage
 
 Users can nested `Dropdown`, which is suitable for situations with multiple sublevel options.
@@ -81,96 +119,6 @@ function Demo() {
 }
 ```
 
-### Element Properties
-
-By configuing `disabled` for `Dropdown.Item`, you can disabled an item.  
-By configuring `type` on `Dropdown.Item`, you can display text in different colors.  
-By configuring `icon` on `Dropdown.Item` (`icon` needs to be ReactNode), you can quickly configured icon of item.
-
-```jsx live=true
-import React from 'react';
-import { Dropdown, Button } from '@douyinfe/semi-ui';
-import { IconBox, IconSimilarity, IconSetting, IconForward, IconColorPalette, IconRefresh, IconSearch, IconBranch } from '@douyinfe/semi-icons';
-
-function Demo() {
-    return (
-        <div>
-            <Dropdown
-                trigger="custom"
-                position="bottomLeft"
-                visible
-                render={
-                    <Dropdown.Menu>
-                        <Dropdown.Item icon={<IconBox />}>Menu Item 1</Dropdown.Item>
-                        <Dropdown.Item icon={<IconSetting />}>Menu Item 2</Dropdown.Item>
-                        <Dropdown.Item disabled icon={<IconForward />}>
-                            Menu Item 3
-                        </Dropdown.Item>
-                        <Dropdown.Item type="primary" icon={<IconBranch />}>
-                            primary
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconColorPalette />} type="secondary">
-                            secondary
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconRefresh />} type="tertiary">
-                            tertiary
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconSearch />} type="warning">
-                            warning
-                        </Dropdown.Item>
-                        <Dropdown.Item
-                            icon={<IconSimilarity style={{ color: 'var(--semi-color-tertiary)' }} />}
-                            type="danger"
-                        >
-                            danger
-                        </Dropdown.Item>
-                    </Dropdown.Menu>
-                }
-            >
-                <Button>Always Show</Button>
-            </Dropdown>
-            <Dropdown
-                trigger="custom"
-                position="bottomLeft"
-                showTick
-                visible
-                render={
-                    <Dropdown.Menu>
-                        <Dropdown.Item icon={<IconBox />} active>
-                            Menu Item 1
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconSetting />}>Menu Item 2</Dropdown.Item>
-                        <Dropdown.Item disabled icon={<IconForward />}>
-                            Menu Item 3
-                        </Dropdown.Item>
-                        <Dropdown.Item type="primary" icon={<IconBranch />}>
-                            primary
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconColorPalette />} type="secondary">
-                            secondary
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconRefresh />} type="tertiary">
-                            tertiary
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconSearch />} type="warning">
-                            warning
-                        </Dropdown.Item>
-                        <Dropdown.Item
-                            icon={<IconSimilarity style={{ color: 'var(--semi-color-tertiary)' }} />}
-                            type="danger"
-                        >
-                            danger
-                        </Dropdown.Item>
-                    </Dropdown.Menu>
-                }
-            >
-                <Button style={{ marginLeft: 90 }}>Always ShowTick</Button>
-            </Dropdown>
-        </div>
-    );
-}
-```
-
 ### Popup Position
 
 The position of support is the same. [Tooltip](https://semi.design/en-US/show/tooltip#Position), commonly used are: "bottom", "bottomLeft", "bottomRight".
@@ -300,99 +248,36 @@ Click on the menu item to trigger different mouse events, support `onClick`, `on
 ```jsx live=true
 import React from 'react';
 import { Dropdown, Button, Toast } from '@douyinfe/semi-ui';
+import { IconToken } from "@douyinfe/semi-icons-lab";
 
-class DropdownEvents extends React.Component {
-    constructor() {
-        super();
-        this.click = this.click.bind(this);
-        this.mouseEnter = this.mouseEnter.bind(this);
-        this.mouseLeave = this.mouseLeave.bind(this);
-        this.rightClick = this.rightClick.bind(this);
-    }
-
-    click(value) {
-        Toast.info({ content: 'You clicked me!' });
-    }
-
-    mouseEnter(value) {
-        Toast.info({ content: 'Nice to meet you!' });
-    }
-
-    mouseLeave(value) {
-        Toast.info({ content: 'See ya!' });
-    }
-
-    rightClick(value) {
-        Toast.info({ content: 'Right clicked!' });
-    }
-
-    render() {
-        return (
-            <Dropdown
-                trigger={'click'}
-                position={'bottomLeft'}
-                render={
-                    <Dropdown.Menu>
-                        <Dropdown.Item onClick={this.click}>1: click me!</Dropdown.Item>
-                        <Dropdown.Item onMouseEnter={this.mouseEnter}>2: mouse enter</Dropdown.Item>
-                        <Dropdown.Item onMouseLeave={this.mouseLeave}>3: mouse leave</Dropdown.Item>
-                        <Dropdown.Item onContextMenu={this.rightClick}>4: right click</Dropdown.Item>
-                    </Dropdown.Menu>
-                }
-            >
-                <Button>Click me</Button>
-            </Dropdown>
-        );
-    }
-}
-```
-
-### Group Combinations
-
-Combination uses`Dropdown.Title`, `Dropdown.Divider`, `Dropdown.Item`.
-
-Configure type `Dropdown.Item` to show different colors of text.
-
-```jsx live=true
-import React from 'react';
-import { Dropdown, Button, Toast } from '@douyinfe/semi-ui';
-
-class DropdownEvents extends React.Component {
-    constructor() {
-        super();
-        this.click = this.click.bind(this);
-    }
-
-    click(value) {
-        Toast.info({ content: 'You clicked me!' });
-    }
-
-    render() {
-        return (
-            <Dropdown
-                trigger={'click'}
-                showTick
-                position={'bottomLeft'}
-                render={
-                    <Dropdown.Menu>
-                        <Dropdown.Title>Group 1</Dropdown.Title>
-                        <Dropdown.Item type="primary">primary</Dropdown.Item>
-                        <Dropdown.Item type="secondary">secondary</Dropdown.Item>
-                        <Dropdown.Divider />
-                        <Dropdown.Title>Group 2</Dropdown.Title>
-                        <Dropdown.Item type="tertiary">tertiary</Dropdown.Item>
-                        <Dropdown.Item type="warning" active>
-                            warning
-                        </Dropdown.Item>
-                        <Dropdown.Item type="danger">danger</Dropdown.Item>
-                    </Dropdown.Menu>
-                }
-            >
-                <Button>Click me</Button>
-            </Dropdown>
-        );
-    }
-}
+() => {
+    return (
+        <Dropdown
+            trigger={'click'}
+            position={'bottomLeft'}
+            render={
+                <Dropdown.Menu>
+                    <Dropdown.Item onClick={() => Toast.info({ content: 'You clicked me!' })}>
+                        1: click me!
+                    </Dropdown.Item>
+                    <Dropdown.Item onMouseEnter={() => Toast.info({ content: 'Nice to meet you!' })}>
+                        2: mouse enter
+                    </Dropdown.Item>
+                    <Dropdown.Item onMouseLeave={() => Toast.info({ content: 'See ya!' })}>
+                        3: mouse leave
+                    </Dropdown.Item>
+                    <Dropdown.Item onContextMenu={() => Toast.info({ content: 'Right clicked!' })}>
+                        4: right click
+                    </Dropdown.Item>
+                </Dropdown.Menu>
+            }
+        >
+            <Button theme="outline" type="tertiary" icon={<IconToken />}>
+                Click Me
+            </Button>
+        </Dropdown>
+    );
+};
 ```
 
 ### Json Usage
@@ -402,6 +287,7 @@ Can use the menu attribute to configure the Dropdown content menu
 ```jsx live=true
 import React from 'react';
 import { Dropdown, Button } from '@douyinfe/semi-ui';
+import { IconToken } from "@douyinfe/semi-icons-lab";
 
 function DropdownEvents() {
     const menu = [
@@ -416,7 +302,9 @@ function DropdownEvents() {
     ];
     return (
         <Dropdown trigger={'click'} showTick position={'bottomLeft'} menu={menu}>
-            <Button>Click me</Button>
+            <Button theme="outline" type="tertiary" icon={<IconToken />}>
+                Click Me
+            </Button>
         </Dropdown>
     );
 }

content/show/dropdown/index.md

@@ -17,25 +17,65 @@ import { Dropdown } from '@douyinfe/semi-ui';
 
 ### 基本用法
 
+-   在 Dropdown 的 children 中为它的 Trigger 触发器：默认为 hover 展示，可通过 props.trigger 修改为 `click`、`custom`、`contextMenu`等值指定不同触发方式  
+-   通过 render 指定下拉框的具体内容：使用 `Dropdown.Menu` 作为父容器，组合使用 `Dropdown.Item`、`Dropdown.Divider`、`Dropdown.Title` 。  
+    当然简单场景你也可以仅搭配 `Dropdown.Menu` 与 `Dropdown.Item`，其他元素不是必须的。  
+-   `Dropdown.Item` 通过设置 `disabled` 可以禁用某个选项，配置 `type`，可以展示不同颜色的文本，上设置 `icon` 可以快速配置图标。更复杂的自定义结构，你可以通过 children 传入 ReactNode自定义渲染
+
 ```jsx live=true
 import React from 'react';
-import { Dropdown, Tag } from '@douyinfe/semi-ui';
+import { Dropdown, Button, HotKeys } from '@douyinfe/semi-ui';
+import { IconBox, IconSetting, IconForward, IconRefresh, IconSearch, IconAlertCircle } from "@douyinfe/semi-icons";
+import { IconToken } from "@douyinfe/semi-icons-lab";
 
 function Demo() {
     return (
         <Dropdown
+            position="bottomLeft"
             render={
                 <Dropdown.Menu>
-                    <Dropdown.Item>Menu Item 1</Dropdown.Item>
-                    <Dropdown.Item>Menu Item 2</Dropdown.Item>
-                    <Dropdown.Item>Menu Item 3</Dropdown.Item>
+                    <Dropdown.Title>分组1</Dropdown.Title>
+                    <Dropdown.Item icon={<IconBox />}>
+                        Menu Item 1
+                        <HotKeys
+                            style={{ marginLeft: 20 }}
+                            hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.B]}
+                            content={['Ctrl', 'B']}
+                        ></HotKeys>
+                    </Dropdown.Item>
+                    <Dropdown.Item icon={<IconSetting />}>
+                        Menu Item 2
+                        <HotKeys
+                            style={{ marginLeft: 20 }}
+                            hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.V]}
+                            content={['Ctrl', 'V']}
+                        ></HotKeys>
+                    </Dropdown.Item>
+                    <Dropdown.Item disabled icon={<IconForward />}>
+                        Menu Item 3
+                        <HotKeys
+                            style={{ marginLeft: 20 }}
+                            hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.F3]}
+                            content={['Ctrl', 'F3']}
+                        ></HotKeys>
+                    </Dropdown.Item>
+                    <Dropdown.Divider />
+                    <Dropdown.Title>分组2</Dropdown.Title>
+                    <Dropdown.Item type="tertiary" icon={<IconRefresh />}>tertiary</Dropdown.Item>
+                    <Dropdown.Item type="warning" icon={<IconSearch />}>
+                        warning
+                    </Dropdown.Item>
+                    <Dropdown.Item type="danger" icon={<IconAlertCircle />}>danger</Dropdown.Item>
                 </Dropdown.Menu>
             }
         >
-            <Tag>Hover Me</Tag>
+            <Button theme="outline" type="tertiary" icon={<IconToken />}>
+                Hover Me
+            </Button>
         </Dropdown>
     );
 }
+
 ```
 
 ### 嵌套使用
@@ -44,15 +84,16 @@ function Demo() {
 
 ```jsx live=true
 import React, { useMemo } from 'react';
-import { Dropdown, Tag } from '@douyinfe/semi-ui';
+import { Dropdown, Button, HotKeys } from '@douyinfe/semi-ui';
+import { IconToken } from "@douyinfe/semi-icons-lab";
 
 function Demo() {
     const subDropdown = useMemo(
         () => (
             <Dropdown.Menu>
-                <Dropdown.Item>Menu Item 1</Dropdown.Item>
-                <Dropdown.Item>Menu Item 2</Dropdown.Item>
-                <Dropdown.Item>Menu Item 3</Dropdown.Item>
+                <Dropdown.Item>Nested Menu Item 1</Dropdown.Item>
+                <Dropdown.Item>Nested  Menu Item 2</Dropdown.Item>
+                <Dropdown.Item>Nested  Menu Item 3</Dropdown.Item>
             </Dropdown.Menu>
         ),
         []
@@ -73,97 +114,9 @@ function Demo() {
                     </Dropdown.Menu>
                 }
             >
-                <Tag>Hover Me</Tag>
-            </Dropdown>
-        </div>
-    );
-}
-```
-
-### 元素属性
-
-通过设置 `disabled` 可以禁用某个选项  
-通过给 `Dropdown.Item` 配置 `type`，可以展示不同颜色的文本  
-通过在 `Dropdown.Item` 上设置 `icon` 可以快速配置图标
-
-```jsx live=true
-import React from 'react';
-import { Dropdown, Button } from '@douyinfe/semi-ui';
-import { IconBox, IconSimilarity, IconSetting, IconForward, IconColorPalette, IconRefresh, IconSearch, IconBranch } from '@douyinfe/semi-icons';
-
-function Demo() {
-    return (
-        <div>
-            <Dropdown
-                trigger="custom"
-                position="bottomLeft"
-                visible
-                render={
-                    <Dropdown.Menu>
-                        <Dropdown.Item icon={<IconBox />}>Menu Item 1</Dropdown.Item>
-                        <Dropdown.Item icon={<IconSetting />}>Menu Item 2</Dropdown.Item>
-                        <Dropdown.Item disabled icon={<IconForward />}>
-                            Menu Item 3
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconBranch />} type="primary">
-                            primary
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconColorPalette />} type="secondary">
-                            secondary
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconRefresh />} type="tertiary">
-                            tertiary
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconSearch />} type="warning">
-                            warning
-                        </Dropdown.Item>
-                        <Dropdown.Item
-                            icon={<IconSimilarity style={{ color: 'var(--semi-color-tertiary)' }} />}
-                            type="danger"
-                        >
-                            danger
-                        </Dropdown.Item>
-                    </Dropdown.Menu>
-                }
-            >
-                <Button>始终展示</Button>
-            </Dropdown>
-            <Dropdown
-                trigger="custom"
-                position="bottomLeft"
-                showTick
-                visible
-                render={
-                    <Dropdown.Menu>
-                        <Dropdown.Item icon={<IconBox />} active>
-                            Menu Item 1
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconSetting />}>Menu Item 2</Dropdown.Item>
-                        <Dropdown.Item disabled icon={<IconForward />}>
-                            Menu Item 3
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconBranch />} type="primary">
-                            primary
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconColorPalette />} type="secondary">
-                            secondary
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconRefresh />} type="tertiary">
-                            tertiary
-                        </Dropdown.Item>
-                        <Dropdown.Item icon={<IconSearch />} type="warning">
-                            warning
-                        </Dropdown.Item>
-                        <Dropdown.Item
-                            icon={<IconSimilarity style={{ color: 'var(--semi-color-tertiary)' }} />}
-                            type="danger"
-                        >
-                            danger
-                        </Dropdown.Item>
-                    </Dropdown.Menu>
-                }
-            >
-                <Button style={{ marginLeft: 90 }}>ShowTick+始终展示</Button>
+                <Button theme="outline" type="tertiary" icon={<IconToken />}>
+                    Hover Me
+                </Button>
             </Dropdown>
         </div>
     );
@@ -229,7 +182,7 @@ function Demo() {
 ### 触发方式
 
 默认是移入触发，可通过获取焦点(focus)，点击(click)或自定义事件触发菜单展开。  
-contextMenu方式在 v2.42 后提供
+contextMenu 方式在 v2.42 后提供
 
 ```jsx live=true
 import React from 'react';
@@ -264,12 +217,14 @@ function Demo() {
                     </Dropdown.Menu>
                 }
             >
-                <div style={{
-                    border: '1px solid var(--semi-color-border)',
-                    borderRadius: 4,
-                    height: 36,
-                    width: 220
-                }}>
+                <div
+                    style={{
+                        border: '1px solid var(--semi-color-border)',
+                        borderRadius: 4,
+                        height: 36,
+                        width: 220,
+                    }}
+                >
                     Please use Tab to focus this div
                 </div>
             </Dropdown>
@@ -301,7 +256,9 @@ function Demo() {
                     </Dropdown.Menu>
                 }
             >
-                <Button theme='solid' type='secondary' style={{ marginBottom: 20 }}>Right click (ContextMenu)</Button>
+                <Button theme="solid" type="secondary" style={{ marginBottom: 20 }}>
+                    Right click (ContextMenu)
+                </Button>
             </Dropdown>
         </div>
     );
@@ -315,97 +272,36 @@ function Demo() {
 ```jsx live=true
 import React from 'react';
 import { Dropdown, Button, Toast } from '@douyinfe/semi-ui';
+import { IconToken } from "@douyinfe/semi-icons-lab";
 
-class DropdownEvents extends React.Component {
-    constructor() {
-        super();
-        this.click = this.click.bind(this);
-        this.mouseEnter = this.mouseEnter.bind(this);
-        this.mouseLeave = this.mouseLeave.bind(this);
-        this.rightClick = this.rightClick.bind(this);
-    }
-
-    click(value) {
-        Toast.info({ content: 'You clicked me!' });
-    }
-
-    mouseEnter(value) {
-        Toast.info({ content: 'Nice to meet you!' });
-    }
-
-    mouseLeave(value) {
-        Toast.info({ content: 'See ya!' });
-    }
-
-    rightClick(value) {
-        Toast.info({ content: 'Right clicked!' });
-    }
-
-    render() {
-        return (
-            <Dropdown
-                trigger={'click'}
-                position={'bottomLeft'}
-                render={
-                    <Dropdown.Menu>
-                        <Dropdown.Item onClick={this.click}>1: click me!</Dropdown.Item>
-                        <Dropdown.Item onMouseEnter={this.mouseEnter}>2: mouse enter</Dropdown.Item>
-                        <Dropdown.Item onMouseLeave={this.mouseLeave}>3: mouse leave</Dropdown.Item>
-                        <Dropdown.Item onContextMenu={this.rightClick}>4: right click</Dropdown.Item>
-                    </Dropdown.Menu>
-                }
-            >
-                <Button>Click me</Button>
-            </Dropdown>
-        );
-    }
-}
-```
-
-### 分组组合
-
-使用 `Dropdown.Divider` 可以插入分割线使用 `Dropdown.Title` 可以插入分组名组合使用 `Dropdown.Title`、`Dropdown.Divider`、`Dropdown.Item`。
-
-```jsx live=true
-import React from 'react';
-import { Dropdown, Button, Toast } from '@douyinfe/semi-ui';
-
-class DropdownEvents extends React.Component {
-    constructor() {
-        super();
-        this.click = this.click.bind(this);
-    }
-
-    click(value) {
-        Toast.info({ content: 'You clicked me!' });
-    }
-
-    render() {
-        return (
-            <Dropdown
-                trigger={'click'}
-                showTick
-                position={'bottomLeft'}
-                render={
-                    <Dropdown.Menu>
-                        <Dropdown.Title>分组1</Dropdown.Title>
-                        <Dropdown.Item type="primary">primary</Dropdown.Item>
-                        <Dropdown.Item type="secondary">secondary</Dropdown.Item>
-                        <Dropdown.Divider />
-                        <Dropdown.Title>分组2</Dropdown.Title>
-                        <Dropdown.Item type="tertiary">tertiary</Dropdown.Item>
-                        <Dropdown.Item type="warning" active>
-                            warning
-                        </Dropdown.Item>
-                        <Dropdown.Item type="danger">danger</Dropdown.Item>
-                    </Dropdown.Menu>
-                }
-            >
-                <Button>Click me</Button>
-            </Dropdown>
-        );
-    }
-}
+() => {
+    return (
+        <Dropdown
+            trigger={'click'}
+            position={'bottomLeft'}
+            render={
+                <Dropdown.Menu>
+                    <Dropdown.Item onClick={() => Toast.info({ content: 'You clicked me!' })}>
+                        1: click me!
+                    </Dropdown.Item>
+                    <Dropdown.Item onMouseEnter={() => Toast.info({ content: 'Nice to meet you!' })}>
+                        2: mouse enter
+                    </Dropdown.Item>
+                    <Dropdown.Item onMouseLeave={() => Toast.info({ content: 'See ya!' })}>
+                        3: mouse leave
+                    </Dropdown.Item>
+                    <Dropdown.Item onContextMenu={() => Toast.info({ content: 'Right clicked!' })}>
+                        4: right click
+                    </Dropdown.Item>
+                </Dropdown.Menu>
+            }
+        >
+            <Button theme="outline" type="tertiary" icon={<IconToken />}>
+                Click Me
+            </Button>
+        </Dropdown>
+    );
+};
 ```
 
 ### Json 用法
@@ -415,6 +311,7 @@ class DropdownEvents extends React.Component {
 ```jsx live=true
 import React from 'react';
 import { Dropdown, Button } from '@douyinfe/semi-ui';
+import { IconToken } from "@douyinfe/semi-icons-lab";
 
 function DropdownEvents() {
     const menu = [
@@ -429,7 +326,9 @@ function DropdownEvents() {
     ];
     return (
         <Dropdown trigger={'click'} showTick position={'bottomLeft'} menu={menu}>
-            <Button>Click me</Button>
+            <Button theme="outline" type="tertiary" icon={<IconToken />}>
+                Click Me
+            </Button>
         </Dropdown>
     );
 }
@@ -439,33 +338,33 @@ function DropdownEvents() {
 
 ### Dropdown
 
-| 属性 | 说明                                                                                                                           | 类型 | 默认值 | 版本 |
-| --- |------------------------------------------------------------------------------------------------------------------------------| --- | --- | --- |
-| autoAdjustOverflow | 弹出层被遮挡时是否自动调整方向                                                                                                              | boolean | true |  |
-| closeOnEsc | 在 trigger 或 弹出层按 Esc 键是否关闭面板，受控时不生效                                                                                          | boolean | true ｜ **2.13.0** |
-| className | 下拉弹层外层样式类名                                                                                                                   | string |  |  |
-| children | 触发弹出层的 Trigger 元素                                                                                                            | ReactNode |  |  |
-| clickToHide | 在弹出层内点击时是否自动关闭弹出层                                                                                                            | boolean |  | **0.24.0** |
-| contentClassName | 下拉菜单根元素类名                                                                                                                    | string |  |  |
-| getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 `position: relative` 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。                                                                         | function():HTMLElement | () => document.body |  |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| autoAdjustOverflow | 弹出层被遮挡时是否自动调整方向 | boolean | true |  |
+| closeOnEsc | 在 trigger 或 弹出层按 Esc 键是否关闭面板，受控时不生效 | boolean | true ｜ **2.13.0** |
+| className | 下拉弹层外层样式类名 | string |  |  |
+| children | 触发弹出层的 Trigger 元素 | ReactNode |  |  |
+| clickToHide | 在弹出层内点击时是否自动关闭弹出层 | boolean |  | **0.24.0** |
+| contentClassName | 下拉菜单根元素类名 | string |  |  |
+| getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 `position: relative` 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。 | function():HTMLElement | () => document.body |  |
 | keepDOM | 关闭时是否保留内部组件 DOM 不销毁 | boolean | false | **2.31.0** |
-| margin| 弹出层计算溢出时的增加的冗余值，详见[issue#549](https://github.com/DouyinFE/semi-design/issues/549)，作用同 Tooltip margin                         | number\|object  |  |  **2.25.0**   |
-| mouseEnterDelay | 鼠标移入 Trigger 后，延迟显示的时间，单位毫秒（仅当 trigger 为 hover/focus 时生效）                                                                    | number | 50 |  |
-| mouseLeaveDelay | 鼠标移出弹出层后，延迟消失的时间，单位毫秒（仅当 trigger 为 hover/focus 时生效）                                                                          | number | 50 |  |
-| menu | 通过传入 JSON Array 来快速配置 Dropdown 内容                                                                                            | Array<DropdownMenuItem\> | [] | **1.12.0** |
+| margin | 弹出层计算溢出时的增加的冗余值，详见[issue#549](https://github.com/DouyinFE/semi-design/issues/549)，作用同 Tooltip margin | number\|object |  | **2.25.0** |
+| mouseEnterDelay | 鼠标移入 Trigger 后，延迟显示的时间，单位毫秒（仅当 trigger 为 hover/focus 时生效） | number | 50 |  |
+| mouseLeaveDelay | 鼠标移出弹出层后，延迟消失的时间，单位毫秒（仅当 trigger 为 hover/focus 时生效） | number | 50 |  |
+| menu | 通过传入 JSON Array 来快速配置 Dropdown 内容 | Array<DropdownMenuItem\> | [] | **1.12.0** |
 | position | 弹出菜单的位置，常用："bottom", "bottomLeft", "bottomRight"，更多详见[Tooltip 位置](https://semi.design/zh-CN/show/tooltip#%E4%BD%8D%E7%BD%AE) | string | "bottom" |  |
-| render | 弹出层的内容，由 `Dropdown.Menu` 及 `Dropdown.Item`、`Dropdown.Title` 构成                                                               | ReactNode |  |  |
-| rePosKey | 可以更新该项值手动触发弹出层的重新定位                                                                                                          | string \| number |  |  |
-| spacing | 弹出层与 Trigger 元素（即 Dropdown children）的距离，单位 px                                                                                | number | 4 |  |
-| style | 弹出层内联样式                                                                                                                      | object |  |  |
-| showTick | 是否自动在 active 的 Dropdown.Item 项左侧展示表示选中的勾                                                                                     | boolean | false | **0.26.0** |
-| stopPropagation | 是否阻止弹出层上的点击事件冒泡                                                                                                              | boolean | false | **0.34.0** |
-| trigger | 触发下拉的行为，可选 "hover", "focus", "click", "custom", "contextMenu"(v2.42后提供)                                                                               | string | "hover" |  |
-| visible | 是否显示菜单，需配合 trigger custom 使用                                                                                                 | boolean | 无 |  |
-| zIndex | 弹出层 z-index 值                                                                                                                | number | 1050 |  |
-| onClickOutSide | 当弹出层处于展示状态，点击非Children、非弹出层内部区域时的回调（仅trigger为custom、click时有效）                                                                | function(e:event) |  | **2.1.0** |
-| onEscKeyDown | 在 trigger 或 弹出层按 Esc 键时调用                                                                                                    |  function(e:event) |  |  **2.13.0** | 
-| onVisibleChange | 弹出层显示状态改变时的回调                                                                                                                | function(visible: boolean) |  |  |
+| render | 弹出层的内容，由 `Dropdown.Menu` 及 `Dropdown.Item`、`Dropdown.Title` 构成 | ReactNode |  |  |
+| rePosKey | 可以更新该项值手动触发弹出层的重新定位 | string \| number |  |  |
+| spacing | 弹出层与 Trigger 元素（即 Dropdown children）的距离，单位 px | number | 4 |  |
+| style | 弹出层内联样式 | object |  |  |
+| showTick | 是否自动在 active 的 Dropdown.Item 项左侧展示表示选中的勾 | boolean | false | **0.26.0** |
+| stopPropagation | 是否阻止弹出层上的点击事件冒泡 | boolean | false | **0.34.0** |
+| trigger | 触发下拉的行为，可选 "hover", "focus", "click", "custom", "contextMenu"(v2.42 后提供) | string | "hover" |  |
+| visible | 是否显示菜单，需配合 trigger custom 使用 | boolean | 无 |  |
+| zIndex | 弹出层 z-index 值 | number | 1050 |  |
+| onClickOutSide | 当弹出层处于展示状态，点击非 Children、非弹出层内部区域时的回调（仅 trigger 为 custom、click 时有效） | function(e:event) |  | **2.1.0** |
+| onEscKeyDown | 在 trigger 或 弹出层按 Esc 键时调用 | function(e:event) |  | **2.13.0** |
+| onVisibleChange | 弹出层显示状态改变时的回调 | function(visible: boolean) |  |  |
 
 ### Dropdown.Menu
 
@@ -508,28 +407,28 @@ function DropdownEvents() {
 ## Accessibility
 
 ### ARIA
-- Dropdown.Menu `role` 设置为 `menu`，`aria-orientatio` 设置为 `vertical`
-- Dropdown.Item `role` 设置为 `menuitem`
-- ### 键盘和焦点
-- Dropdown 的触发器可被聚焦，目前支持 3 种触发方式：
-    - 触发方式设置为 hover 或 focus 时：鼠标悬浮或聚焦时打开 Dropdown，Dropdown 打开后，用户可以使用 `下箭头` 将焦点移动到Dropdown 内
-    - 触发方式设置为 click 时：点击触发器或聚焦时使用 `Enter` 或 `Space` 键可以打开 Dropdown，此时焦点自动聚焦到 Dropdown 中的第一个非禁用项上
-- 当焦点位于 Dropdown 内的菜单项上时：
-    - 键盘用户可以使用键盘 `上箭头` 或 `下箭头` 切换可交互元素
-    - 使用 `Enter` 键 或 `Space` 键可以激活聚焦的菜单项, 若菜单项绑定了onClick，事件会被触发
-- 键盘用户可以通过按 `Esc` 关闭 Dropdown，关闭后焦点返回到触发器上
-- 键盘交互暂未完整支持嵌套场景
 
-## 文案规范
+-   Dropdown.Menu `role` 设置为 `menu`，`aria-orientatio` 设置为 `vertical`
+-   Dropdown.Item `role` 设置为 `menuitem`
+-   ### 键盘和焦点
+-   Dropdown 的触发器可被聚焦，目前支持 3 种触发方式：
+    -   触发方式设置为 hover 或 focus 时：鼠标悬浮或聚焦时打开 Dropdown，Dropdown 打开后，用户可以使用 `下箭头` 将焦点移动到 Dropdown 内
+    -   触发方式设置为 click 时：点击触发器或聚焦时使用 `Enter` 或 `Space` 键可以打开 Dropdown，此时焦点自动聚焦到 Dropdown 中的第一个非禁用项上
+-   当焦点位于 Dropdown 内的菜单项上时：
+    -   键盘用户可以使用键盘 `上箭头` 或 `下箭头` 切换可交互元素
+    -   使用 `Enter` 键 或 `Space` 键可以激活聚焦的菜单项, 若菜单项绑定了 onClick，事件会被触发
+-   键盘用户可以通过按 `Esc` 关闭 Dropdown，关闭后焦点返回到触发器上
+-   键盘交互暂未完整支持嵌套场景
 
-- 下拉框内选项内容需要表述准确且包含信息，使用户在浏览时更加容易在选项中选择
-- 使用语句式的大小写，并且简洁明了地书写选项
-- 如果是动作选项，使用动词或者动词短语来描述用户选择该选项后会发生的动作。举个例子，"Move", "Log time", or "Hide labels" 
-- 不使用介词
+## 文案规范
 
+-   下拉框内选项内容需要表述准确且包含信息，使用户在浏览时更加容易在选项中选择
+-   使用语句式的大小写，并且简洁明了地书写选项
+-   如果是动作选项，使用动词或者动词短语来描述用户选择该选项后会发生的动作。举个例子，"Move", "Log time", or "Hide labels"
+-   不使用介词
 
-| ✅ 推荐用法 | ❌ 不推荐用法 |   
-| --- | --- | 
+| ✅ 推荐用法 | ❌ 不推荐用法 |
+| --- | --- |
 | <div style={{ height: 150}}><Dropdown visible trigger={'custom'} autoAdjustOverflow={false} position={'bottomLeft'} menu={[{ node: 'item', name: 'Add text' },{ node: 'item', name: 'Add link' },{ node: 'item', name: 'Add image' },{ node: 'item', name: 'Add video' }]} /></div> | <div style={{ height: 150}}><Dropdown visible trigger={'custom'} autoAdjustOverflow={false} position={'bottomLeft'} menu={[{ node: 'item', name: 'Add a text' },{ node: 'item', name: 'Add a link' },{ node: 'item', name: 'Add a image' },{ node: 'item', name: 'Add a video' }]} /></div> |
 
 ## 设计变量
@@ -537,8 +436,9 @@ function DropdownEvents() {
 <DesignToken/>
 
 ## FAQ
+
 -   **为什么 Dropdown 浮层在靠近屏幕边界宽度不够时，丢失宽度意外换行?**  
-    在 chromium 104 后 对于屏幕边界文本宽度不够时的换行渲染策略发生变化，详细原因可查看 [issue #1022](https://github.com/DouyinFE/semi-design/issues/1022)，semi侧已经在v2.17.0版本修复了这个问题。
+    在 chromium 104 后 对于屏幕边界文本宽度不够时的换行渲染策略发生变化，详细原因可查看 [issue #1022](https://github.com/DouyinFE/semi-design/issues/1022)，semi 侧已经在 v2.17.0 版本修复了这个问题。
 
 <!--
 ## 相关物料
@@ -546,5 +446,7 @@ function DropdownEvents() {
 ```material
 5
 ``` -->
+
 ## 相关物料
-<semi-material-list code="5"></semi-material-list>
+
+<semi-material-list code="5"></semi-material-list>