Skip to content

Commit b26686f

Browse files
wzc520pyfmwzc520pyfm
authored
feat(actions): add actions component (#449)
* feat(actions): add actions component * fix(actions): fix repeat trigger click event
1 parent 73e9e1b commit b26686f

File tree

17 files changed

+823
-0
lines changed

17 files changed

+823
-0
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,5 @@ docs/.vitepress/cache
1313
docs/.vitepress/dist
1414
docs/.vitepress/.temp
1515
.vitepress/cache
16+
.cursor
17+
.history

‎docs/.vitepress/config.mts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,12 @@ export default defineConfig({
122122
{ text: 'ThoughtChain 思维链', link: '/component/thought-chain' }
123123
]
124124
},
125+
{
126+
text: '反馈',
127+
items: [
128+
{ text: 'Actions 操作列表', link: '/component/actions' }
129+
]
130+
},
125131
{
126132
text: '工具',
127133
items: [

‎docs/component/actions.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
2+
# Actions 操作列表
3+
4+
用于快速配置一些 AI 场景下所需要的操作按钮/功能。
5+
6+
## 何时使用
7+
8+
Actions 组件用于快速配置一些 AI 场景下所需要的操作按钮/功能。
9+
10+
## 代码演示
11+
12+
### 基本
13+
14+
:::demo 基础用法。
15+
16+
actions/basic
17+
18+
:::
19+
20+
### 更多菜单项
21+
22+
:::demo 支持嵌套菜单项和自定义点击事件。
23+
24+
actions/sub
25+
26+
:::
27+
28+
### 使用变体
29+
30+
:::demo 使用 `variant` 属性来设置不同的样式变体。
31+
32+
actions/variant
33+
34+
:::
35+
36+
## API
37+
38+
<!-- 通用属性参考：[通用属性](/docs/react/common-props) -->
39+
40+
### ActionsProps
41+
42+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
43+
| --- | --- | --- | --- | --- |
44+
| items | 包含多个操作项的列表 | ActionItem[] | - | - |
45+
| rootClassName | 根节点样式类 | string | - | - |
46+
| block | 子操作项是否占据一行 | boolean | false | - |
47+
| onClick | Item 操作项被点击时的回调函数 | `function({ item, key, keyPath, domEvent })` | - | - |
48+
| style | 根节点样式 | CSSProperties | - | - |
49+
| variant | 变体 | `'borderless' \| 'border'` | 'borderless' | - |
50+
| prefixCls | 样式类名的前缀 | string | - | - |
51+
52+
### ItemType
53+
54+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
55+
| --- | --- | --- | --- | --- |
56+
| key | 自定义操作的唯一标识 | string | - | - |
57+
| label | 自定义操作的显示标签 | string | - | - |
58+
| icon | 自定义操作的图标 | VNode | - | - |
59+
| children | 子操作项 | ActionItem[] | - | - |
60+
| triggerSubMenuAction | 触发子菜单的操作 | `'hover' \| 'click'` | 'hover' | - |
61+
| onItemClick | 点击自定义操作按钮时的回调函数 | (info: ActionItem) => void | - | - |
62+
63+
### SubItemType
64+
65+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
66+
| --- | --- | --- | --- | --- |
67+
| label | 自定义操作的显示标签 | string | - | - |
68+
| key | 自定义操作的唯一标识 | string | - | - |
69+
| icon | 自定义操作的图标 | VNode | - | - |
70+
| onItemClick | 点击自定义操作按钮时的回调函数 | (info: ActionItem) => void | - | - |
71+
| danger | 语法糖，设置危险 icon | boolean | false | - |
72+
73+
### ActionItem
74+
75+
```typescript | pure
76+
type ActionItem = ItemType | SubItemType;
77+
```
78+
79+
## 主题变量（Design Token）
80+
81+
<!-- <ComponentTokenTable component="Actions"></ComponentTokenTable> -->
82+
83+
## 贡献者
84+
85+
<doc-contributors component-name="actions" :max-count="50" :show-view-all="true" />
86+

‎docs/examples-setup/actions/basic.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup lang="ts">
2+
import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
3+
import { message as messageAnt } from 'ant-design-vue';
4+
import { Actions, type ActionsProps } from 'ant-design-x-vue';
5+
import { h } from 'vue';
6+
7+
defineOptions({ name: 'AXActionsBasicSetup' });
8+
9+
const [message, contextHolder] = messageAnt.useMessage();
10+
11+
const actionItems: ActionsProps['items'] = [
12+
{
13+
key: 'retry',
14+
icon: h(RedoOutlined),
15+
label: 'Retry',
16+
},
17+
{
18+
key: 'copy',
19+
icon: h(CopyOutlined),
20+
label: 'Copy',
21+
},
22+
];
23+
24+
const onClick: ActionsProps['onClick'] = ({ keyPath }) => {
25+
// Logic for handling click events
26+
message.success(`you clicked ${keyPath.join(',')}`);
27+
};
28+
</script>
29+
30+
<template>
31+
<context-holder />
32+
<Actions :items="actionItems" :on-click="onClick" />
33+
</template>
34+

‎docs/examples-setup/actions/sub.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<script setup lang="ts">
2+
import { CopyOutlined, DeleteOutlined, RedoOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
3+
import { message as messageAnt, Modal } from 'ant-design-vue';
4+
import { Actions, type ActionsProps } from 'ant-design-x-vue';
5+
import { h } from 'vue';
6+
7+
defineOptions({ name: 'AXActionsSubSetup' });
8+
9+
const [message, contextHolder] = messageAnt.useMessage();
10+
11+
const actionItems: ActionsProps['items'] = [
12+
{
13+
key: 'retry',
14+
label: 'Retry',
15+
icon: h(RedoOutlined),
16+
},
17+
{
18+
key: 'copy',
19+
label: 'Copy',
20+
icon: h(CopyOutlined),
21+
},
22+
{
23+
key: 'more',
24+
children: [
25+
{
26+
key: 'share',
27+
label: 'Share',
28+
icon: h(ShareAltOutlined),
29+
children: [
30+
{ key: 'qq', label: 'QQ' },
31+
{ key: 'wechat', label: 'WeChat' },
32+
],
33+
},
34+
{ key: 'import', label: 'Import' },
35+
{
36+
key: 'delete',
37+
label: 'Delete',
38+
icon: h(DeleteOutlined),
39+
onItemClick: () => {
40+
Modal.confirm({
41+
title: 'Are you sure want to delete?',
42+
content: 'Some descriptions',
43+
onOk() {
44+
message.success('Delete successfully');
45+
},
46+
onCancel() {
47+
message.info('Cancel');
48+
},
49+
});
50+
},
51+
danger: true,
52+
},
53+
],
54+
},
55+
{
56+
key: 'clear',
57+
label: 'Clear',
58+
icon: h(DeleteOutlined),
59+
},
60+
];
61+
62+
const onClick: ActionsProps['onClick'] = ({ keyPath }) => {
63+
// Logic for handling click events
64+
message.success(`you clicked ${keyPath.join(',')}`);
65+
};
66+
</script>
67+
68+
<template>
69+
<context-holder />
70+
<Actions :items="actionItems" :on-click="onClick" />
71+
</template>
72+

‎docs/examples-setup/actions/variant.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup lang="ts">
2+
import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
3+
import { message as messageAnt } from 'ant-design-vue';
4+
import { Actions, type ActionsProps } from 'ant-design-x-vue';
5+
import { h } from 'vue';
6+
7+
defineOptions({ name: 'AXActionsVariantSetup' });
8+
9+
const [message, contextHolder] = messageAnt.useMessage();
10+
11+
const actionItems: ActionsProps['items'] = [
12+
{
13+
key: 'retry',
14+
icon: h(RedoOutlined),
15+
label: 'Retry',
16+
},
17+
{
18+
key: 'copy',
19+
icon: h(CopyOutlined),
20+
label: 'Copy',
21+
},
22+
];
23+
24+
const onClick: ActionsProps['onClick'] = ({ keyPath }) => {
25+
// Logic for handling click events
26+
message.success(`you clicked ${keyPath.join(',')}`);
27+
};
28+
</script>
29+
30+
<template>
31+
<context-holder />
32+
<Actions :items="actionItems" :on-click="onClick" variant="border" />
33+
</template>
34+

‎docs/examples/actions/basic.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup lang="tsx">
2+
import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
3+
import { App } from 'ant-design-vue';
4+
import { Actions, type ActionsProps } from 'ant-design-x-vue';
5+
6+
defineOptions({ name: 'AXActionsBasic' });
7+
8+
const actionItems: ActionsProps['items'] = [
9+
{
10+
key: 'retry',
11+
icon: <RedoOutlined />,
12+
label: 'Retry',
13+
},
14+
{
15+
key: 'copy',
16+
icon: <CopyOutlined />,
17+
label: 'Copy',
18+
},
19+
];
20+
21+
const Demo = () => {
22+
const { message } = App.useApp();
23+
24+
const onClick: ActionsProps['onClick'] = ({ keyPath }) => {
25+
// Logic for handling click events
26+
message.success(`you clicked ${keyPath?.join(',')}`);
27+
};
28+
29+
return <Actions items={actionItems} onClick={onClick} />;
30+
};
31+
32+
defineRender(() => {
33+
return (
34+
<App>
35+
<Demo />
36+
</App>
37+
);
38+
});
39+
</script>
40+

‎docs/examples/actions/sub.vue‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<script setup lang="tsx">
2+
import { CopyOutlined, DeleteOutlined, RedoOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
3+
import { App, Modal } from 'ant-design-vue';
4+
import { Actions, type ActionsProps } from 'ant-design-x-vue';
5+
6+
defineOptions({ name: 'AXActionsSub' });
7+
8+
const Demo = () => {
9+
const { message } = App.useApp();
10+
11+
const actionItems: ActionsProps['items'] = [
12+
{
13+
key: 'retry',
14+
label: 'Retry',
15+
icon: <RedoOutlined />,
16+
},
17+
{
18+
key: 'copy',
19+
label: 'Copy',
20+
icon: <CopyOutlined />,
21+
},
22+
{
23+
key: 'more',
24+
children: [
25+
{
26+
key: 'share',
27+
label: 'Share',
28+
icon: <ShareAltOutlined />,
29+
children: [
30+
{ key: 'qq', label: 'QQ' },
31+
{ key: 'wechat', label: 'WeChat' },
32+
],
33+
},
34+
{ key: 'import', label: 'Import' },
35+
{
36+
key: 'delete',
37+
label: 'Delete',
38+
icon: <DeleteOutlined />,
39+
onItemClick: () => {
40+
Modal.confirm({
41+
title: 'Are you sure want to delete?',
42+
content: 'Some descriptions',
43+
onOk() {
44+
message.success('Delete successfully');
45+
},
46+
onCancel() {
47+
message.info('Cancel');
48+
},
49+
});
50+
},
51+
danger: true,
52+
},
53+
],
54+
},
55+
{
56+
key: 'clear',
57+
label: 'Clear',
58+
icon: <DeleteOutlined />,
59+
},
60+
];
61+
62+
const onClick: ActionsProps['onClick'] = ({ keyPath }) => {
63+
// Logic for handling click events
64+
message.success(`you clicked ${keyPath.join(',')}`);
65+
};
66+
67+
return <Actions items={actionItems} onClick={onClick} />;
68+
};
69+
70+
defineRender(() => {
71+
return (
72+
<App>
73+
<Demo />
74+
</App>
75+
);
76+
});
77+
</script>
78+

0 commit comments

Comments
 (0)