Fc/clound

dingtalk-ui/.fatherrc.ts

@@ -0,0 +1,4 @@
+export default {
+  // more father 4 config: https://github.com/umijs/father-next/blob/master/docs/config.md
+  esm: {},
+};

packages/creating-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serverless-cd/creating-ui",
-  "version": "0.0.3",
+  "version": "0.0.8",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

packages/creating-ui/src/components/StepContent/index.tsx

@@ -9,8 +9,11 @@ type Props = {
   isSuspend?: boolean;
   currentTask: Request;
   onRetry: () => void;
+  onResume: () => void;
   showRetry: boolean;
   isChild?: boolean;
+  isExecutePendingTask: boolean;
+  resumeText?: string;
 };
 
 const StepContent = (props: Props) => {
@@ -19,38 +22,63 @@ const StepContent = (props: Props) => {
     currentTask = {} as any,
     isSuspend,
     onRetry,
+    onResume,
     showRetry,
     isChild = false,
+    isExecutePendingTask = false,
+    resumeText,
   } = props;
+
+  const className = isChild ? 'mt-4' : '';
+
+  const currentTaskStatusRender = (task) => {
+    const statusRender = {
+      pending: (
+        <div className={className}>
+          {!isExecutePendingTask ? task.title : task.runningMsg || task.title}
+          {!isExecutePendingTask && (
+            <span className="ml-8 cursor-pointer color-primary" onClick={onResume}>
+              {resumeText || '立即执行'}
+            </span>
+          )}
+        </div>
+      ),
+      wait: <div className={className}>{task.runningMsg || task.title}</div>,
+    };
+    return statusRender[task.runStatus];
+  };
+
   return (
     <>
       {map(tasks, (task) => {
         if (task.runStatus === 'finish')
           return (
-            <div className={isChild ? 'color-success' : ''}> {task.successMsg || task.title} </div>
+            <div className={isChild ? `color-success` : className}>
+              {task.successMsg || task.title}
+            </div>
           );
         if (currentTask.key === task.key) {
           return (
             <>
               {isSuspend ? (
-                <div>
-                  <span className="color-error">{task.errorMsg}</span>
+                <div className={className}>
+                  <span className="color-error">{task.errorMsg || task.title}</span>
                   {showRetry && (
                     <Icon
                       className="ml-8 cursor-pointer"
                       type="refresh"
-                      size="xs"
+                      size="small"
                       onClick={onRetry}
                     />
                   )}
                 </div>
               ) : (
-                <div> {task.runningMsg || task.title} </div>
+                currentTaskStatusRender(currentTask)
               )}
             </>
           );
         }
-        return <div>{task.title}</div>;
+        return <div className={className}>{task.title}</div>;
       })}
     </>
   );

packages/creating-ui/src/components/StepTask/index.tsx

@@ -3,29 +3,81 @@ import { Step, Icon } from '@alicloud/console-components';
 import { size, find, map, isEmpty, get } from 'lodash';
 import StepContent from '../StepContent';
 import { Request } from '../../constants';
+import { onTaskOrderContrast } from '../../utils/util';
 import '../../index.less';
 
 type Props = {
   stepList: Request[];
   isSuspend?: boolean;
   count?: number;
   onRetry: () => void;
+  onResume: () => void;
   showRetry?: boolean;
+  isExecutePendingTask?: boolean;
+  resumeText?: string;
 };
 const StepTask = (props: Props) => {
-  const { stepList, isSuspend, count, onRetry, showRetry } = props;
-  const { found, current, currentTask } = useMemo(() => {
-    const found: any = find(stepList, { runStatus: 'wait' });
-    const current = !isEmpty(found) ? found?.index : size(stepList);
-    const currentTask = find(found?.tasks, { runStatus: 'wait' });
-    return { current, currentTask, found };
-  }, [stepList]);
+  const {
+    stepList,
+    isSuspend,
+    count,
+    onRetry,
+    onResume,
+    showRetry,
+    isExecutePendingTask,
+    resumeText,
+  } = props;
+
+  const getTaskInfo = (values) => {
+    const found: any = find(values, { runStatus: 'wait' });
+    const pendingFound: any = find(values, { runStatus: 'pending' });
+    const isOrderFound = onTaskOrderContrast(found, pendingFound);
+    const currentIndex =
+      (!isEmpty(found) && isOrderFound) || isEmpty(pendingFound)
+        ? getCurrentIndex(found, values)
+        : getCurrentIndex(pendingFound, values);
+    const currentFound =
+      (!isEmpty(found) && isOrderFound) || isEmpty(pendingFound) ? found : pendingFound;
+    const task = find(found?.tasks, { runStatus: 'wait' });
+    const pendingTask = find(found?.tasks, { runStatus: 'pending' });
+    const isOrderTask = onTaskOrderContrast(task, pendingTask);
+    const currentTask =
+      (!isEmpty(task) && isOrderTask) || isEmpty(pendingTask) ? task : pendingTask;
+
+    return { currentIndex, currentTask, currentFound };
+  };
+
+  const getCurrentIndex = (task, values) => {
+    return !isEmpty(task) ? task?.index : size(values);
+  };
+  const { currentFound, currentIndex, currentTask } = useMemo(
+    () => getTaskInfo(stepList),
+    [stepList],
+  );
 
   const itemRender = (index, status) => {
     switch (status) {
       case 'process':
-        if (index === current && isSuspend)
+        if (index === currentIndex && isSuspend)
           return <Icon size="small" type="error" className="mt-3" />;
+        if (index === currentIndex && currentFound.runStatus === 'pending' && !isExecutePendingTask)
+          return (
+            <svg
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="5166"
+              width="20"
+              height="20"
+              className="mt-5"
+            >
+              <path
+                d="M512 917.381727c-223.886093 0-405.381727-181.495634-405.381727-405.381727S288.113907 106.618273 512 106.618273s405.381727 181.495634 405.381727 405.381727S735.886093 917.381727 512 917.381727zM528.21531 498.606968l0-278.482549-32.43062 0 0 291.834648-0.040932 0.040932 206.386534 206.386534 22.932292-22.932292L528.21531 498.606968z"
+                p-id="5167"
+                fill="#cccccc"
+              ></path>
+            </svg>
+          );
         return <Icon size="small" type="loading" className="mt-3" />;
       case 'finish':
         return <Icon size="small" type="success" className="mt-3" />;
@@ -51,7 +103,7 @@ const StepTask = (props: Props) => {
   };
   return (
     <div className="mt-16 application-container-step">
-      <Step itemRender={itemRender} current={current} direction="ver" animation={false}>
+      <Step itemRender={itemRender} current={currentIndex} direction="ver" animation={false}>
         {map(stepList, (item: Request, index) => {
           const tasks = get(item, 'tasks', []);
           return (
@@ -61,14 +113,19 @@ const StepTask = (props: Props) => {
                 <div style={{ display: 'flex', alignItems: 'center' }}>
                   <StepContent
                     tasks={[item]}
-                    currentTask={found}
+                    currentTask={currentFound}
                     isSuspend={isEmpty(tasks) ? isSuspend : false}
                     onRetry={onRetry}
+                    onResume={onResume}
+                    isExecutePendingTask={isExecutePendingTask}
+                    resumeText={resumeText}
                     showRetry={showRetry}
                   />
-                  {count !== 0 && index === size(stepList) - 1 && current === size(stepList) && (
-                    <>{count && <span className="color-error mr-8 ml-8">{`${count} s`}</span>}</>
-                  )}
+                  {count !== 0 &&
+                    index === size(stepList) - 1 &&
+                    currentIndex === size(stepList) && (
+                      <>{count && <span className="color-error mr-8 ml-8">{`${count} s`}</span>}</>
+                    )}
                 </div>
               }
               content={
@@ -78,6 +135,9 @@ const StepTask = (props: Props) => {
                   currentTask={currentTask}
                   isSuspend={isSuspend}
                   onRetry={onRetry}
+                  onResume={onResume}
+                  isExecutePendingTask={isExecutePendingTask}
+                  resumeText={resumeText}
                   showRetry={showRetry}
                 />
               }

packages/creating-ui/src/constants/index.ts

@@ -1,22 +1,26 @@
 export type Props = {
   dataSource: Request[];
+  runStatus?: status;
   onError?: (error: any) => void;
   onComplete?: (value: any) => void;
   onCountdownComplete?: () => void;
+  onRetry?: () => void;
   showRetry?: boolean;
   countdown?: number;
   retryType?: string;
+  resumeText?: string;
+  help?: string | HTMLElement;
 };
 
 export type Request = {
-  title: string;
+  title: string | any;
   key: string;
   runStatus?: status;
-  errorMsg?: string;
-  successMsg?: string;
-  runningMsg?: string;
+  errorMsg?: string | any;
+  successMsg?: string | any;
+  runningMsg?: string | any;
   tasks?: Request[];
   run?: (content: any) => void;
 };
 
-type status = 'wait' | 'finish';
+type status = 'wait' | 'finish' | 'pending';

packages/creating-ui/src/index.less

@@ -1,6 +1,9 @@
 .mt-3 {
   margin-top: 3px;
 }
+.mt-4 {
+  margin-top: 4px;
+}
 .mr-8 {
   margin-right: 8px;
 }
@@ -66,3 +69,7 @@
 .display-inline-block {
   display: inline-block;
 }
+
+.color-primary {
+  color: #0064c8;
+}