[RFC] New Component - Prompts

[YumoImer]

Summary

新增名为 Prompts 的新组件，通过提供预定义的问题或建议来提升用户体验。

Motivation

增强终端用户参与度，并在与我们的组件库交互时减轻认知负担。终端用户可以更清楚地知道该采取什么操作或提问什么问题，从而带来更顺畅和更直观的用户体验。同时，帮助开发者用户快速集成该功能于他们的应用程序中。

Detailed Design

Name

🇨🇳 - 提示集
🇬🇧 - Prompts

Description

Prompts 组件用于显示一组与当前上下文相关的预定义的问题或建议。

API

PromptProps

export interface PromptProps {
  /**
   * @desc 唯一标识用于区分每个提示项。
   * @descEN Unique identifier used to distinguish each prompt item.
   */
  key: string;

  /**
   * @desc 提示图标显示在提示项的左侧。
   * @descEN Prompt icon displayed on the left side of the prompt item.
   */
  icon?: React.ReactNode;

  /**
   * @desc 提示标签显示提示的主要内容。
   * @descEN Prompt label displaying the main content of the prompt.
   */
  label?: React.ReactNode;

  /**
   * @desc 提示描述提供额外的信息。
   * @descEN Prompt description providing additional information.
   */
  description?: React.ReactNode;

  /**
   * @desc 设置为 true 时禁用点击事件。
   * @descEN When set to true, click events are disabled.
   */
  disabled?: boolean;
}

PromptsProps

import type { FlexProps } from 'antd';

export interface PromptsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'title'> {
  /**
   * @desc 包含多个提示项的列表。
   * @descEN List containing multiple prompt items.
   */
  data?: PromptProps[];

  /**
   * @desc 显示在提示列表顶部的标题。
   * @descEN Title displayed at the top of the prompt list.
   */
  title?: React.ReactNode;

  /**
   * @desc Item 提示项被点击时的回调函数。
   * @descEN Callback function when a prompt item is clicked.
   */
  onClick?: (params: {
    item: PromptProps;
    domEvent: React.MouseEvent<HTMLElement, MouseEvent>;
  }) => void;

  /**
   * @desc 弹性布局配置 - 同 antd 配置提示列表的弹性布局，类似于 antd 的 Flex 组件。
   * @descEN Configure the flex layout of the prompt list, similar to antd's Flex component.
   */
  flex?: Omit<FlexProps, 'children'>;

  /**
   * @desc 自定义样式，用于各个提示项的不同部分。
   * @descEN Custom styles for different parts of each prompt item.
   */
  styles?: Record<'item' | 'icon' | 'label' | 'desc' | 'title', React.CSSProperties>;

  /**
   * @desc 自定义样式类名，用于各个提示项的不同部分。
   * @descEN Custom style class names for different parts of each prompt item.
   */
  classNames?: Record<'item' | 'icon' | 'label' | 'desc' | 'title', string>;

  /**
   * @desc 样式类名的前缀。
   * @descEN Prefix for style class names.
   */
  prefixCls?: string;

  /**
   * @desc 根节点的样式类名。
   * @descEN Style class name for the root node.
   */
  rootClassName?: string;
}

Benefits

For Developers

• 集成简便: 通过简单的配置，开发者可以轻松地将 Prompts 组件集成到他们的应用程序中。
• 增强指导: 帮助开发者为他们的应用程序提供更明确的用户指导，减少用户的学习曲线。

For End Users

• 用户指导: 提供用户明确的、可操作的提示，帮助他们更有效地导航和使用应用程序。
• 提升用户体验: 通过提供预定义的问题或任务，减少认知负担，使用户体验更直观和愉快。
• 增加参与度: 通过提供相关的提示，激发用户的好奇心或提供即时价值，鼓励他们更多地与应用程序互动。

Alternatives

• 交互形态: 使用有序列表、无序列表，而不是交互式的提示按钮，这种交互不灵活且吸引力不足。