refactor: processing style improve (#1140)

Reviewed-on: daoyoucloud/tachybase#1140

packages/plugins/@tachybase/plugin-backup-restore/src/client/Configuration.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Checkbox, DatePicker, useAPIClient, useCompile, useNoticeSub } from '@tachybase/client';
 import { FormItem } from '@tachybase/components';
 
-import { InboxOutlined, PlusOutlined, ReloadOutlined, UploadOutlined } from '@ant-design/icons';
+import { InboxOutlined, LoadingOutlined, PlusOutlined, ReloadOutlined, UploadOutlined } from '@ant-design/icons';
 import { Alert, App, Button, Card, Divider, message, Modal, Space, Spin, Table, Tabs, Upload, UploadProps } from 'antd';
 import { saveAs } from 'file-saver';
 
@@ -237,6 +237,7 @@ const NewBackup = ({ ButtonComponent = Button, refresh }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [dataTypes, setBackupData] = useState<any[]>(['required']);
   const apiClient = useAPIClient();
+  const { notification } = App.useApp();
   const [dataSource, setDataSource] = useState([]);
 
   const showModal = async () => {
@@ -259,6 +260,16 @@ const NewBackup = ({ ButtonComponent = Button, refresh }) => {
         dataTypes,
       },
     });
+    notification.info({
+      key: 'backup',
+      message: (
+        <span>
+          {t('Processing...')} &nbsp; &nbsp;
+          <Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} />
+        </span>
+      ),
+      duration: 0,
+    });
     setIsModalOpen(false);
     setBackupData(['required']);
     setTimeout(() => {
@@ -333,7 +344,7 @@ export const BackupAndRestoreList = () => {
   const [dataSource, setDataSource] = useState([]);
   const [loading, setLoading] = useState(false);
   const [downloadTarget, setDownloadTarget] = useState(false);
-  const { modal } = App.useApp();
+  const { modal, notification } = App.useApp();
   const resource = useMemo(() => {
     return apiClient.resource('backupFiles');
   }, [apiClient]);
@@ -342,7 +353,13 @@ export const BackupAndRestoreList = () => {
     await queryFieldList();
   }, []);
 
-  useNoticeSub('backup', handleRefresh);
+  useNoticeSub('backup', () => {
+    notification.info({
+      key: 'backup',
+      message: t('Done'),
+    });
+    handleRefresh();
+  });
 
   useEffect(() => {
     queryFieldList();

packages/plugins/@tachybase/plugin-workflow/src/client/features/api-regular/usage/hooks.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 import {
   isVariable,
   transformVariableValue,
@@ -14,7 +14,7 @@ import {
 } from '@tachybase/client';
 import { SchemaExpressionScopeContext, useField, useFieldSchema } from '@tachybase/schema';
 
-import { App } from 'antd';
+import { App, Progress } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
@@ -47,15 +47,25 @@ export const usePropsAPIRegular = () => {
   );
   useNoticeSub('workflow:regular', (event) => {
     if (event.msg === 'start') {
-      notification.info({ key: 'workflow:regular', message: t('working'), description: t('starting') });
+      notification.info({
+        key: 'workflow:regular',
+        message: t('Start'),
+        description: <Progress percent={0} />,
+        duration: 0,
+      });
     } else if (event.msg === 'progress') {
       notification.info({
         key: 'workflow:regular',
-        message: t('working'),
+        message: t('Processing...'),
-        description: t('process') + `${event.current} / ${event.total}`,
+        description: <Progress percent={Math.floor((event.current / event.total) * 100)} />,
+        duration: 0,
       });
     } else if (event.msg === 'done') {
-      notification.info({ key: 'workflow:regular', message: t('working'), description: t('done') });
+      notification.success({
+        key: 'workflow:regular',
+        message: t('Done'),
+        description: <Progress percent={100} />,
+      });
       service.refresh();
     }
   });