feat: 新增spin

src/pages/ShowInfo.tsx

@@ -1,4 +1,5 @@
 import {
+  PageContainer,
   ProCard,
   ProForm,
   ProFormDependency,
@@ -6,23 +7,28 @@ import {
   ProFormText,
   ProFormUploadDragger,
 } from '@ant-design/pro-components';
-import { Form, Image } from 'antd';
+import { Button, Form, Image, Spin, SpinProps } from 'antd';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 // @ts-ignore
 import cookie from 'react-cookies';
-import axios from 'axios';
+import { API } from 'types';
 const ShowInfoDemo: React.FC = () => {
   const [form] = Form.useForm<API.ModelImage>();
   const [imageUrl, setImageUrl] = useState<string>('');
-  // useEffect(()=>{
+  // 是否需要加载中
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  // }, [])
   const initialValues = {
     cardCode: '200100199508081010',
     gender: '男',
   };
+
+
   return (
     <div className="showInfoDemo_wrap">
+      <Spin tip="正在分析中，请稍候..." fullscreen={true} spinning={isLoading}></Spin>
+
+      <PageContainer>
         <ProCard wrap title={'选择图片'} bodyStyle={{ display: 'flex' }}>
           <div>
             <ProFormUploadDragger
@@ -34,6 +40,7 @@ const ShowInfoDemo: React.FC = () => {
                 showUploadList: false,
                 listType: 'picture-card',
                 beforeUpload: (file) => {
+                  setIsLoading(true)
                   const reader = new FileReader();
                   reader.onload = (e) => {
                     setImageUrl(e.target?.result as string);
@@ -45,6 +52,7 @@ const ShowInfoDemo: React.FC = () => {
                   // 返回 Promise 可以异步操作
                   return true;
                 },
+            
                 maxCount: 1,
                 name: 'file',
                 // beforeUpload: beforeUploadFile,
@@ -88,7 +96,13 @@ const ShowInfoDemo: React.FC = () => {
                   if (name1) {
                     console.log(name1, 'ProFormDependency_name1');
                     return (
-                    <ProFormText width={160} label={name1.label} name={name1.value} disabled required={false}/>
+                      <ProFormText
+                        width={160}
+                        label={name1.label}
+                        name={name1.value}
+                        disabled
+                        required={false}
+                      />
                     );
                   }
                   return <></>;
@@ -97,6 +111,7 @@ const ShowInfoDemo: React.FC = () => {
             </ProForm>
           </div>
         </ProCard>
+      </PageContainer>
     </div>
   );
 };