增加布局组件

src/components/layout/index.tsx

-import React from 'react';
+import React, { Suspense } from 'react';
+import { Layout, Space } from 'antd';
+import { Outlet } from 'react-router-dom';
 
-function Index() {
-  return <div>123132</div>;
-}
+const { Header, Footer, Content } = Layout;
+
+const headerStyle: React.CSSProperties = {
+  textAlign: 'center',
+  color: '',
+  height: 64,
+  paddingInline: 50,
+  lineHeight: '',
+  backgroundColor: '#7dbcea',
+};
+
+const contentStyle: React.CSSProperties = {
+  textAlign: 'center',
+  minHeight: 120,
+  lineHeight: '',
+  color: '',
+  backgroundColor: '',
+};
 
-export default Index;
+const footerStyle: React.CSSProperties = {
+  textAlign: 'center',
+  color: '',
+  backgroundColor: '#7dbcea',
+};
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function LayoutView(props: Props) {
+  return (
+    <Space direction='vertical' style={{ width: '100%' }} size={[0, 48]}>
+      <Layout style={{ height: '100vh' }}>
+        <Header style={headerStyle}>Header</Header>
+        <Content style={contentStyle}>
+          {props.children}
+          <Suspense fallback={<div>Loading...</div>}>
+            <Outlet></Outlet>
+          </Suspense>
+        </Content>
+        <Footer style={footerStyle}>Footer</Footer>
+      </Layout>
+    </Space>
+  );
+}

src/pages/home/index.tsx

+import React from 'react';
+
+export default function Home() {
+  return (
+    <div>123</div>
+  )
+}

src/pages/jobServices/index.tsx

+import React from 'react';
+
+export default function JobServices() {
+  return <div>JobServices</div>;
+}

src/pages/test/search/index.tsx

-import { Button } from 'antd';
-import React from 'react';
-import BrandSelectSearch from '~/components/brandSelectSearch';
-
-const SearchView = () => {
-  return (
-    <div
-      style={{
-        padding: 10,
-        background: 'aliceblue',
-        boxSizing: 'border-box',
-        width: '100%',
-        height: '100%',
-      }}
-    >
-      <BrandSelectSearch
-        selected={true}
-        region={true}
-        columns={[
-          {
-            type: 'Product',
-            name: 'product',
-            label: '产品',
-            options: [
-              { label: '无人机', value: 1 },
-              { label: '挂载', value: 2 },
-              { label: '地面站', value: 3 },
-              { label: '电池', value: 4 },
-              { label: '解决方案', value: 5 },
-            ],
-          },
-          {
-            type: 'Brand',
-            name: 'brand',
-            label: '品牌',
-            subLabel: '型号',
-            options: [
-              {
-                label: '科比特',
-                value: 'MMC',
-                children: [
-                  { label: '入云龙', value: 1 },
-                  { label: '小旋风', value: 2 },
-                ],
-              },
-              {
-                label: '大疆',
-                value: 'DJI',
-                children: [
-                  { label: '御2', value: 1 },
-                  { label: '悟2', value: 2 },
-                ],
-              },
-              {
-                label: '小米',
-                value: 'MI',
-                children: [
-                  { label: '小米12', value: 1 },
-                  { label: '小米13', value: 2 },
-                ],
-              },
-              {
-                label: '华为',
-                value: 'HUAWEI',
-                children: [
-                  { label: 'P50 Pro', value: 1 },
-                  { label: 'P60 Pro', value: 2 },
-                ],
-              },
-              {
-                label: '苹果',
-                value: 'APPLE',
-                children: [
-                  { label: 'iPhone 13', value: 1 },
-                  { label: 'iPhone 14', value: 2 },
-                ],
-              },
-            ],
-          },
-          {
-            type: 'Industry',
-            name: 'industry',
-            label: '行业',
-            options: [
-              { label: '公共安全', value: 1 },
-              { label: '交通安全', value: 2 },
-              { label: '应急', value: 3 },
-              { label: '消防', value: 4 },
-              { label: '城管', value: 5 },
-              { label: '环保', value: 6 },
-            ],
-          },
-          {
-            type: 'Price',
-            name: 'price',
-            label: '价格',
-            options: [
-              { label: '0-3万', value: [0, 3] },
-              { label: '3-5万', value: [3, 5] },
-              { label: '5-10万', value: [5, 10] },
-              { label: '10-15万', value: [10, 15] },
-              { label: '15-20万', value: [15, 20] },
-              { label: '20-30万', value: [20, 30] },
-              { label: '30万以上', value: [30, null] },
-            ],
-          },
-        ]}
-      />
-      <div
-        style={{
-          height: 100,
-          width: 400,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-around',
-        }}
-      >
-        <Button type={'primary'}>确定</Button>
-        <Button type={'default'}>确定</Button>
-        <Button type={'dashed'}>确定</Button>
-        <Button type={'link'}>确定</Button>
-        <Button type={'ghost'}>确定</Button>
-      </div>
-    </div>
-  );
-};
-
-export default SearchView;

src/router/router.tsx

@@ -2,6 +2,10 @@ import React from 'react';
 import { Navigate, RouteObject } from 'react-router-dom';
 import ErrorPage from '~/pages/common/error';
 import SearchView from '~/pages/test/search';
+import LayoutView from '~/components/layout';
+
+const Home = React.lazy(() => import('~/pages/home'));                    //首页
+const JobServices = React.lazy(() => import('~/pages/jobServices'));      //工作服务
 
 interface RouteObjectType {
   meta?: {
@@ -21,21 +25,21 @@ export const routerList: Array<RouteObject & RouteObjectType> = [
   },
   {
     path: '/',
-    element: <Navigate to='/search' />,
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: '/test',
-    element: <div>1223123</div>,
+    element: (
+      <LayoutView>
+        <Navigate to='/home' />
+      </LayoutView>
+    ),
     errorElement: <ErrorPage />,
-  },
-  {
-    path: '/search',
-    element: <SearchView />,
-    errorElement: <ErrorPage />,
-    meta: {
-      id: 1,
-      title: '时间计算器',
-    },
-  },
+    children: [
+      {
+        path: '/home',
+        element: <Home />,
+      },
+      {
+        path: '/jobServices',
+        element: <JobServices />,
+      },
+    ],
+  }
 ];