chore(components/dropdown): 补全文档

packages/components/src/dropdown/demo/footer.tsx

@@ -0,0 +1,45 @@
+/**
+ * title: 尾部插槽
+ */
+
+import React from 'react';
+import {
+  Button,
+  ButtonGroup,
+  Dropdown,
+  type DropdownOptionsItem,
+  Icon,
+  Icons,
+  useMessage,
+  WordBalloon,
+} from '@tool-pack/react-ui';
+
+const options: DropdownOptionsItem[] = [
+  { key: '1', label: '黄金蛋炒饭' },
+  { key: '2', label: '扬州炒饭' },
+];
+const App: React.FC = () => {
+  const message = useMessage();
+  return (
+    <>
+      <ButtonGroup>
+        <Button type="primary">菜单</Button>
+        <Dropdown
+          footer={<WordBalloon placement="bottom">foo bar</WordBalloon>}
+          options={options}
+          onSelect={(option) => message.info(option.label)}>
+          <Button
+            type="primary"
+            icon={
+              <Icon>
+                <Icons.Down />
+              </Icon>
+            }
+          />
+        </Dropdown>
+      </ButtonGroup>
+    </>
+  );
+};
+
+export default App;

packages/components/src/dropdown/demo/header.tsx

@@ -0,0 +1,44 @@
+/**
+ * title: 头部插槽
+ */
+
+import React from 'react';
+import {
+  Button,
+  ButtonGroup,
+  Dropdown,
+  type DropdownOptionsItem,
+  Icon,
+  Icons,
+  useMessage,
+} from '@tool-pack/react-ui';
+
+const options: DropdownOptionsItem[] = [
+  { key: '1', label: '黄金蛋炒饭' },
+  { key: '2', label: '扬州炒饭' },
+];
+const App: React.FC = () => {
+  const message = useMessage();
+  return (
+    <>
+      <ButtonGroup>
+        <Button type="primary">菜单</Button>
+        <Dropdown
+          header={<h2>选什么好呢</h2>}
+          options={options}
+          onSelect={(option) => message.info(option.label)}>
+          <Button
+            type="primary"
+            icon={
+              <Icon>
+                <Icons.Down />
+              </Icon>
+            }
+          />
+        </Dropdown>
+      </ButtonGroup>
+    </>
+  );
+};
+
+export default App;

packages/components/src/dropdown/index.zh-CN.md

@@ -14,12 +14,14 @@ Dropdown 说明。
 
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx"></code>
-<code src="./demo/divider.tsx"></code>
 <code src="./demo/hide-on-click.tsx"></code>
+<code src="./demo/divider.tsx"></code>
 <code src="./demo/show-arrow.tsx"></code>
 <code src="./demo/icon.tsx"></code>
 <code src="./demo/size.tsx"></code>
 <code src="./demo/disabled.tsx"></code>
+<code src="./demo/header.tsx"></code>
+<code src="./demo/footer.tsx"></code>
 <code src="./demo/nest.tsx"></code>
 <code src="./demo/group.tsx"></code>
 <code src="./demo/contextmenu.tsx"></code>
@@ -28,8 +30,46 @@ Dropdown 说明。
 
 Dropdown 的属性说明如下：
 
-| 属性 | 说明 | 类型 | 默认值 | 版本 |
-| ---- | ---- | ---- | ------ | ---- |
-| --   | --   | --   | --     | --   |
+```typescript
+export type DividerProps = React.HTMLAttributes<HTMLDivElement> & {
+  lineStyle?: React.CSSProperties['borderStyle'];
+  lineColor?: React.CSSProperties['borderColor'];
+  lineWidth?: React.CSSProperties['borderWidth'];
+  placement?: 'left' | 'center' | 'right';
+  vertical?: boolean;
+  tag?: keyof HTMLElementTagNameMap;
+};
+
+export type DropdownDivider = DividerProps & {
+  type: 'divider';
+  key: React.Key;
+};
+
+export type OptionProps = React.HTMLAttributes<HTMLElement> & {
+  tag?: keyof HTMLElementTagNameMap;
+  size?: Size;
+  disabled?: boolean;
+  expandable?: boolean;
+  readonly?: boolean;
+  icon?: React.ReactNode;
+};
+
+export type DropdownOption = Omit<OptionProps, 'size' | 'children'> & {
+  type?: 'group' | 'option';
+  key: React.Key;
+  label: React.ReactNode;
+  children?: DropdownOptionsItem[];
+};
+export type DropdownOptionsItem = DropdownOption | DropdownDivider;
+```
+
+| 属性        | 说明                 | 类型                                                        | 默认值   | 版本 |
+| ----------- | -------------------- | ----------------------------------------------------------- | -------- | ---- |
+| options     | 选项(必填)           | DropdownOptionsItem[]                                       | --       | --   |
+| size        | 尺寸                 | "small" \| "medium" \| "large"                              | "medium" | --   |
+| onSelect    | 选项选中时的回调函数 | (option: DropdownOption, parents: DropdownOption[]) => void | --       | --   |
+| header      | 头部插槽             | React.ReactNode                                             | --       | --   |
+| header      | 尾部插槽             | React.ReactNode                                             | --       | --   |
+| hideOnClick | 点击选项时是否关闭   | boolean                                                     | true     | --   |
 
-其他说明。
+支持 html 标签的其他属性。