🔥 feat(design): Add Modal.Progress component

[dengfuping]

Summary

• 长任务反馈模态框，用于异步任务或耗时较长的场景。

Motivation

用户提交任务后，系统需要一段时间执行某类任务后，才会反馈任务结果，如集群创建的预检查场景。

Design Guide

任务耗时建议不超过1分钟，若任务耗时较长建议采用页面内置步骤或异步任务方式并使用全局同时告知用户任务提交成功和预计耗时等。使用注意点：

1. 底部辅助信息说明区为可选。
2. 执行中：无法获取进度则展示循环 loading，可获取进度则展示百分比。
3. 成功态：3s 自动消失，同时可配置自动跳转指定 URL
4. 失败态：点击取消关闭弹窗

Detailed Design

• 新增 Modal.Progress 组件，用于异步任务或耗时较长的场景。
• Modal.Progress 使用 Modal 组件实现，而不是 Modal.method()。因为静态方法无法消费 React 状态，导致状态无法更新到对话框内部。
• 除支持 Modal 属性之外，Modal.Progress 还扩展出以下三项配置，具体用法见下面的 API 说明:
  • loading
  • progress
  • description
• 实现上和设计差异的点:
  • 成功态的弹窗不会 3s 自动消失，包括跳转到指定 URL，需要业务侧自行处理相关逻辑。
  • 右上角透出关闭 icon，执行过程中也可能有手动管理的诉求。

API

参数	说明	类型	默认值	版本
width	对话框宽度	string | number	480	-
maskClosable	点击蒙层是否允许关闭	boolean	false	-
title	标题	ReactNode	-	-
loading	是否加载中	boolean	false	-
progress	进度条属性	ProgressProps	{ type: 'circle', size: 150 }	-
description	描述	ReactNode	-	-
footer	底部内容	ReactNode	null	-

• 更多 API 详见 antd Modal 文档: https://ant.design/components/modal-cn#api

Basic Example

• Modal.Progress with progress.percent:

<Modal.Progress
  title="Cluster is creating..."
  open={open}
  progress={{
    percent: 60
  }}
  description="Please waiting for a few seconds."
/>

• Modal.Progress with progress.status:

<Modal.Progress
  title="Fail to create cluster"
  open={open}
  progress={{
    status: 'exeception'
  }}
  description="Please try again later."
/>

• Modal.Progress with loading:

<Modal.Progress
  title="Cluster is creating..."
  open={open}
  loading={loading}
  description="Please waiting for a few seconds."
/>

Advanced Usage

Modal.Progress from percent to success	Modal.Progress from percent to fail	Modal.Progress from loading to success

Tests

• Unit tests
• Snapshot tests

[github-actions]