docs: add Actions document

components/actions/demo/basic.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+基础用法。
+
+## en-US
+
+Basic usage.

components/actions/demo/basic.tsx

@@ -0,0 +1,26 @@
+import { CopyOutlined, RedoOutlined } from '@ant-design/icons';
+import { Actions, ActionsProps } from '@ant-design/x';
+import { message } from 'antd';
+import React from 'react';
+
+const actionItems = [
+  {
+    key: 'retry',
+    icon: <RedoOutlined />,
+    label: '重试',
+  },
+  {
+    key: 'copy',
+    icon: <CopyOutlined />,
+    label: '复制',
+  },
+];
+
+const Demo: React.FC = () => {
+  const onClick: ActionsProps['onClick'] = ({ key, keyPath, item }) => {
+    message.success(`you click ${keyPath.join(',')}`);
+  };
+  return <Actions items={actionItems} onClick={onClick} />;
+};
+
+export default Demo;

components/actions/demo/sub.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+更多菜单项。
+
+## en-US
+
+Basic usage.

components/actions/demo/sub.tsx

@@ -0,0 +1,54 @@
+import {
+  CopyOutlined,
+  DeleteOutlined,
+  RedoOutlined,
+  ReloadOutlined,
+  ShareAltOutlined,
+} from '@ant-design/icons';
+import { Actions, ActionsProps } from '@ant-design/x';
+import { message } from 'antd';
+import React from 'react';
+
+const actionItems: ActionsProps['items'] = [
+  {
+    key: 'retry',
+    label: '重试',
+    icon: <RedoOutlined />,
+  },
+  {
+    key: 'copy',
+    label: '复制',
+    icon: <CopyOutlined />,
+  },
+  {
+    key: 'more',
+    // icon:  <EllipsisOutlined />, // 不传使用默认的icon
+    children: [
+      {
+        key: 'share',
+        label: '分享',
+        icon: <ShareAltOutlined />,
+        children: [
+          { key: 'qq', label: 'QQ' },
+          { key: 'wechat', label: '微信' },
+        ],
+      },
+      { key: 'import', label: '引用' },
+      { key: 'delete', label: '删除', icon: <DeleteOutlined />, onClick: () => {}, danger: true },
+    ],
+  },
+  {
+    key: 'clear',
+    label: '清空',
+    icon: <ReloadOutlined />,
+  },
+];
+
+const Demo: React.FC = () => {
+  const onClick: ActionsProps['onClick'] = ({ key, keyPath, item }) => {
+    message.success(`you click ${keyPath}`);
+  };
+  return <Actions items={actionItems} onClick={onClick} />;
+};
+
+export default Demo;

components/actions/demo/variant.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+使用`variant`切换变体。
+
+## en-US
+
+Use `variant` to switch variants.

components/actions/demo/variant.tsx

@@ -0,0 +1,26 @@
+import { CopyOutlined, RedoOutlined } from '@ant-design/icons';
+import { Actions, ActionsProps } from '@ant-design/x';
+import { message } from 'antd';
+import React from 'react';
+
+const actionItems = [
+  {
+    key: 'retry',
+    icon: <RedoOutlined />,
+    label: '重试',
+  },
+  {
+    key: 'copy',
+    icon: <CopyOutlined />,
+    label: '复制',
+  },
+];
+
+const Demo: React.FC = () => {
+  const onClick: ActionsProps['onClick'] = ({ key, keyPath, item }) => {
+    message.success(`you click ${keyPath.join(',')}`);
+  };
+  return <Actions items={actionItems} onClick={onClick} variant="border" />;
+};
+
+export default Demo;

components/actions/index.en-US.md

@@ -0,0 +1,62 @@
+---
+category: Components
+group:
+  title: Common
+  order: 0
+title: Actions
+description: Used for quickly configuring required action buttons or features in some AI scenarios.
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1ysXSqEnAckAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*EkYUTotf-eYAAAAAAAAAAAAADgCCAQ/original
+demo:
+  cols: 1
+---
+
+## When to Use
+
+The Actions component is used for quickly configuring required action buttons or features in some AI scenarios.
+
+## Examples
+
+<!-- prettier-ignore -->
+<code src="./demo/basic.tsx">Basic</code>
+<code src="./demo/sub.tsx">More Menu Items</code>
+<code src="./demo/variant.tsx">Using Variants</code>
+
+## API
+
+Common props ref：[Common props](/docs/react/common-props)
+
+### Actions
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| items | A list containing multiple action items | ActionItemType[] | - | - |
+| rootClassName | Style class for the root node | string | - | - |
+| onClick | Callback function when an action item is clicked | `function({ item, key, keyPath, selectedKeys, domEvent })` | - | - |
+| style | Style for the root node | React.CSSProperties | - | - |
+| variant | Variant | `'borderless' \| 'border'` | 'border' | - |
+| prefixCls | Prefix for style class names | string | - | - |
+
+### ItemType
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| label | The display label for the custom action | string | - | - |
+| key | The unique identifier for the custom action | string | - | - |
+| icon | The icon for the custom action | ReactNode | - | - |
+| onClick | Callback function when the custom action button is clicked | () => void | - | - |
+
+### SubItemType
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| key | The unique identifier for the custom action | string | - | - |
+| label | The display label for the custom action | string | - | - |
+| icon | The icon for the custom action | ReactNode | - | - |
+| children | Sub action items | ActionItemType[] | - | - |
+| triggerSubMenuAction | Action to trigger the sub-menu | `hover \| click` | - | - |
+| onClick | Callback function when the custom action button is clicked | () => void | - | - |
+
+### ActionItemType
+
+> type `ActionItemType` = `ItemType` | `SubItemType`

components/actions/index.zh-CN.md

@@ -0,0 +1,63 @@
+---
+category: Components
+group:
+  title: 通用
+  order: 0
+title: Actions
+subtitle: 操作栏
+description: 用于快速配置一些 AI 场景下所需要的操作按钮/功能。
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1ysXSqEnAckAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*EkYUTotf-eYAAAAAAAAAAAAADgCCAQ/original
+demo:
+  cols: 1
+---
+
+## 何时使用
+
+Actions 组件用于快速配置一些 AI 场景下所需要的操作按钮/功能
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/basic.tsx">基本</code>
+<code src="./demo/sub.tsx">更多菜单项</code>
+<code src="./demo/variant.tsx">使用变体</code>
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+### Actions
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| items | 包含多个操作项的列表 | ActionItemType[] | - | - |
+| rootClassName | 根节点样式类 | string | - | - |
+| onClick | Item 操作项被点击时的回调函数 | `function({ item, key, keyPath, selectedKeys, domEvent })` | - | - |
+| style | 根节点样式 | React.CSSProperties | - | - |
+| variant | 变体 | `'borderless' \| 'border'` | 'border' | - |
+| prefixCls | 样式类名的前缀 | string | - | - |
+
+### ItemType
+
+| 属性    | 说明                           | 类型       | 默认值 | 版本 |
+| ------- | ------------------------------ | ---------- | ------ | ---- |
+| label   | 自定义操作的显示标签           | string     | -      | -    |
+| key     | 自定义操作的唯一标识           | string     | -      | -    |
+| icon    | 自定义操作的图标               | ReactNode  | -      | -    |
+| onClick | 点击自定义操作按钮时的回调函数 | () => void | -      | -    |
+
+### SubItemType
+
+| 属性                 | 说明                           | 类型             | 默认值 | 版本 |
+| -------------------- | ------------------------------ | ---------------- | ------ | ---- |
+| key                  | 自定义操作的唯一标识           | string           | -      | -    |
+| label                | 自定义操作的显示标签           | string           | -      | -    |
+| icon                 | 自定义操作的图标               | ReactNode        | -      | -    |
+| children             | 子操作项                       | ActionItemType[] | -      | -    |
+| triggerSubMenuAction | 触发子菜单的操作               | `hover \| click` | -      | -    |
+| onClick              | 点击自定义操作按钮时的回调函数 | () => void       | -      | -    |
+
+### ActionItemType
+
+> type `ActionItemType` = `ItemType` | `SubItemType`