「RFC」 ActionsBar 操作列表

[ONLY-yours]

Summary

新增名为 ActionBar - 操作列表 的新组件。目的快速配置一些 AI 场景下所需要的操作按钮/功能

Motivation

在 AI 场景下有些通用、常见的操作列表，例如对话的时候会有一些「重新生成」、「复制」、「点赞」、「点踩」等操作

当选项较多时，还需要提供操作收纳的能力

因此需要有个「操作列表」来帮助用户快速配置对应的能力

有些按钮定制化程度很高，但是有些操作又是通用的，我们会提供一些方式将一些通用的按钮能力提供出来，并支持用户自定义

Detailed Design

组件名称

• 英文名称: Actions
• 中文名称: 操作列表

API 设计

interface ActionsProps {
	items: ActionItem[]
	rootClassName?: string;
	style?: React.CSSProperties
	variant?: 'borderless' | 'border'
}
interface ItemType {
	label?: string; // 自定义操作的显示标签
	key: string; // 自定义操作的唯一标识
	icon: ReactNode;// 自定义操作的图标
	label?: ReactNode; // 自定义操作的显示标签	
	onClick?: () => void; // 点击自定义操作按钮时的回调函数
}
interface SubItemType {
	key: string; // 自定义操作的唯一标识
	label?: string; // 自定义操作的显示标签
	icon?: ReactNode;// 自定义操作的图标
	children?: ActionBarItemType[]
	onClick?: () => void; // 点击自定义操作按钮时的回调函数
}
type ActionItemType =  ItemType|SubItemType

Example Usage

基本使用

import React, { useState } from 'react';
import { Actions } from '@ant-design/x';
import { RedoOutlined, CopyOutlined } from '@ant-design/icons'

const actionItems  = [
    {
      key: 'retry',
      icon: <RedoOutlined />,
    }, {
	key: 'copy',
	icon: <CopyOutlined />,
    }
  ]

const App: React.FC = () => {

  return (
    <Actions items={actionItems} />
  );
};

export default App;

配置 子菜单

import React, { useState } from 'react';
import { Actions } from '@ant-design/x';
import { RedoOutlined, CopyOutlined, DeleteOutlined, ShareAltOutlined } from '@ant-design/icons'

const actionItems  = [
    {
      key: 'retry',
      icon: <RedoOutlined />,
    }, {
	key: 'copy',
	icon: <CopyOutlined />,
    }, {
	key: 'more',
	// icon:  <EllipsisOutlined />, // 不传使用默认的icon
	chidren: [
		{ key: 'share', label: '分享' , icon: <ShareAltOutlined />},
		{ key: 'import', label: '引用' },
          	{ key: 'delete', label: '删除' , icon: <DeleteOutlined />, onClick: () => {}},
	]
    }
  ]

const App: React.FC = () => {

  return (
    <Actions items={actionItems} />
  );
};

export default App;

配置变体

通过variant设置变体

import React, { useState } from 'react';
import { ActionBar } from '@ant-design/x';
import { RedoOutlined, CopyOutlined } from '@ant-design/icons'

const actionItems  = [
    {
      key: 'retry',
      icon: <RedoOutlined />,
    }, {
	key: 'copy',
	icon: <CopyOutlined />,
    }
  ]

const App: React.FC = () => {

  return (
    <Actions items={actionItems}  variant="border"/>
  );
};

export default App;

[zombieJ]

• antd 的命名规范一般叫 items
• and 看起来类似 Menu，似乎 API 直接对着 Menu 就行了？
• 然后 block 作为整行样式，variant 作为变体（有边框、无边框、透明等等）

[ONLY-yours]

我觉得和 Menu 还是不太一样的，我更倾向于是 popover 或者 dropdown 的嵌套情况

• 有些时候 弹出框会有一些类似 placement 之类的 api

[afc163]

ActionBar => Actions 如何？

在桌面端可能是一个 bar，但是在移动端可能是长按菜单的形式。是不是没必要在名字上做限定。

[disturbwe]

Actions确实更响亮一点