feat: 使用showInfo为路由组件

config/routes.ts

@@ -1,11 +1,4 @@
-/*
+
- * @Author: zhoux zhouxia@supervision.ltd
- * @Date: 2023-11-22 10:02:59
- * @LastEditors: zhoux zhouxia@supervision.ltd
- * @LastEditTime: 2023-12-20 14:40:04
- * @FilePath: \react-adpro-fabric\config\routes.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
 
 /**
  * @name umi 的路由配置
@@ -23,7 +16,7 @@ export default [
   {
     path: '/showInfo',
     layout: false,
-    component: './404',
+    component: './showInfo',
   },
   {
     path: '/',
@@ -32,6 +25,6 @@ export default [
   {
     path: '*',
     layout: false,
-    component: './404',
+    component: './showInfo',
   },
 ];

src/pages/404.tsx

@@ -1,104 +1,18 @@
-import {
+import { history } from '@umijs/max';
-  ProCard,
+import { Button, Result } from 'antd';
-  ProForm,
+import React from 'react';
-  ProFormDependency,
-  ProFormSelect,
-  ProFormText,
-  ProFormUploadDragger,
-} from '@ant-design/pro-components';
-import { Form, Image } from 'antd';
-import React, { useState } from 'react';
-// @ts-ignore
-import cookie from 'react-cookies';
-const ShowInfoDemo: React.FC = () => {
-  const [form] = Form.useForm<API.ModelImage>();
-  const [imageUrl, setImageUrl] = useState<string>('');
-  // useEffect(()=>{
 
-  // }, [])
+const NoFoundPage: React.FC = () => (
-  const initialValues = {
+  <Result
-    cardCode: '100100199508081010',
+    status="404"
-    gender: '男',
+    title="404"
-  };
+    subTitle="Sorry, the page you visited does not exist."
-  return (
+    extra={
-    <div className="showInfoDemo_wrap">
+      <Button type="primary" onClick={() => history.push('/')}>
-      <ProCard wrap title={'选择图片'} bodyStyle={{ display: 'flex' }}>
+        Back Home 123
-        <div>
+      </Button>
-          <ProFormUploadDragger
-            width={800}
-            name="projectFilePath"
-            action="/api/v1/file/uploadFile"
-            max={1}
-            fieldProps={{
-              showUploadList: false,
-              listType: 'picture-card',
-              beforeUpload: (file) => {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                  setImageUrl(e.target?.result as string);
-                };
-
-                reader.readAsDataURL(file);
-
-                // 返回 false 可以阻止上传
-                // 返回 Promise 可以异步操作
-                return true;
-              },
-              maxCount: 1,
-              name: 'file',
-              // beforeUpload: beforeUploadFile,
-              data: { path: 'project/files' },
-              headers: {
-                'X-CSRFToken': cookie.load('csrftoken'),
-                Authorization: `Bearer ${localStorage.getItem('access') || ''}`,
-              },
-            }}
-          >
-            <Image width={800} src={imageUrl} preview={false} />
-          </ProFormUploadDragger>
-
-          {/* <Image width={800} height={800} src={imageUrl}>
-
-          </Image> */}
-        </div>
-
-        {/* 展示信息 */}
-        <div style={{ flex: 1, padding: 20 }}>
-          <ProForm
-            form={form}
-            initialValues={initialValues} // 设置初始值
-            submitter={
-              { render: false } // 隐藏提交按钮
-            } // 配置 submitter
-          >
-            <ProFormSelect
-              fieldProps={{
-                labelInValue: true,
-              }}
-              request={async () => [
-                // TODO 使用接口数据与  initialValues 值对应
-                { label: '证件号码', value: 'cardCode' },
-                { label: '性别', value: 'gender' },
-              ]}
-              name="name1"
-              label="展示数据"
-            />
-            <ProFormDependency name={['name1']}>
-              {({ name1 }) => {
-                if (name1) {
-                  console.log(name1, 'ProFormDependency_name1');
-                  return (
-                    <ProFormText label={name1.label} name={name1.value} disabled required={false} />
-                  );
     }
-                return <></>;
+  />
-              }}
-            </ProFormDependency>
-          </ProForm>
-        </div>
-      </ProCard>
-    </div>
 );
-};
 
-export default ShowInfoDemo;
+export default NoFoundPage;

src/pages/ShowInfo.tsx

@@ -1,18 +1,104 @@
-import { history } from '@umijs/max';
+import {
-import { Button, Result } from 'antd';
+  ProCard,
-import React from 'react';
+  ProForm,
+  ProFormDependency,
+  ProFormSelect,
+  ProFormText,
+  ProFormUploadDragger,
+} from '@ant-design/pro-components';
+import { Form, Image } from 'antd';
+import React, { useState } from 'react';
+// @ts-ignore
+import cookie from 'react-cookies';
+const ShowInfoDemo: React.FC = () => {
+  const [form] = Form.useForm<API.ModelImage>();
+  const [imageUrl, setImageUrl] = useState<string>('');
+  // useEffect(()=>{
 
-const ShowInfo: React.FC = () => (
+  // }, [])
-  <Result
+  const initialValues = {
-    status="404"
+    cardCode: '200100199508081010',
-    title="40411111"
+    gender: '男',
-    subTitle="Sorry, the page you visited does not exist."
+  };
-    extra={
+  return (
-      <Button type="primary" onClick={() => history.push('/')}>
+    <div className="showInfoDemo_wrap">
-        Back Home1111
+      <ProCard wrap title={'选择图片'} bodyStyle={{ display: 'flex' }}>
-      </Button>
+        <div>
-    }
+          <ProFormUploadDragger
+            width={800}
+            name="projectFilePath"
+            action="/api/v1/file/uploadFile"
+            max={1}
+            fieldProps={{
+              showUploadList: false,
+              listType: 'picture-card',
+              beforeUpload: (file) => {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                  setImageUrl(e.target?.result as string);
+                };
+
+                reader.readAsDataURL(file);
+
+                // 返回 false 可以阻止上传
+                // 返回 Promise 可以异步操作
+                return true;
+              },
+              maxCount: 1,
+              name: 'file',
+              // beforeUpload: beforeUploadFile,
+              data: { path: 'project/files' },
+              headers: {
+                'X-CSRFToken': cookie.load('csrftoken'),
+                Authorization: `Bearer ${localStorage.getItem('access') || ''}`,
+              },
+            }}
+          >
+            <Image width={800} src={imageUrl} preview={false} />
+          </ProFormUploadDragger>
+
+          {/* <Image width={800} height={800} src={imageUrl}>
+
+          </Image> */}
+        </div>
+
+        {/* 展示信息 */}
+        <div style={{ flex: 1, padding: 20 }}>
+          <ProForm
+            form={form}
+            initialValues={initialValues} // 设置初始值
+            submitter={
+              { render: false } // 隐藏提交按钮
+            } // 配置 submitter
+          >
+            <ProFormSelect
+              fieldProps={{
+                labelInValue: true,
+              }}
+              request={async () => [
+                // TODO 使用接口数据与  initialValues 值对应
+                { label: '证件号码', value: 'cardCode' },
+                { label: '性别', value: 'gender' },
+              ]}
+              name="name1"
+              label="展示数据"
             />
+            <ProFormDependency name={['name1']}>
+              {({ name1 }) => {
+                if (name1) {
+                  console.log(name1, 'ProFormDependency_name1');
+                  return (
+                    <ProFormText label={name1.label} name={name1.value} disabled required={false} />
+                  );
+                }
+                return <></>;
+              }}
+            </ProFormDependency>
+          </ProForm>
+        </div>
+      </ProCard>
+    </div>
   );
+};
 
-export default ShowInfo;
+export default ShowInfoDemo;