使用 Flex 替换 Row 布局

src/views/OrderFollow.jsx

@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom'
 import { memo, useMemo, useCallback, useEffect, useState } from 'react'
 import {
   Row, Col, Divider, Table, Card, Button, Input,
-  Space, Segmented, Radio, Select, AutoComplete, Spin, Form, Switch, DatePicker, List, Avatar
+  Space, Segmented, Radio, Select, Flex, Spin, Form, Switch, DatePicker, List, Avatar
 } from 'antd'
 import {
   StarFilled, ZoomInOutlined, StarOutlined, BarsOutlined, AppstoreOutlined, SearchOutlined
@@ -290,10 +290,9 @@ function OrderFollow() {
   }, [])
 
   return (
-    <Spin spinning={false} delay={500}>
+    <>
-      <Space direction='vertical' style={{ width: '100%' }}>
+      <Space direction='vertical' size='large' style={{ width: '100%' }}>
-        <Row gutter={[16, 16]} justify='start' align='middle'>
+        <Flex gap='large' justify='start' align='center' horizontal>
-          <Col span={10}>
           <Radio.Group
             options={[
               { label: '今日任务', value: 'today' },
@@ -314,27 +313,17 @@ function OrderFollow() {
             buttonStyle='solid'
             disabled={advanceChecked}
           />
-          </Col>
+
-          <Col span={4}>
           <Switch checkedChildren='高级查询' unCheckedChildren='高级查询'
             defaultChecked={false}
             onChange={() => { toggleAdvance(!advanceChecked) }} />
-          </Col>
+        </Flex>
-        </Row>
         <Conditional condition={advanceChecked} whenTrue={<AdvanceSearchForm onSubmit={handleSubmit} />}
         />
       </Space>
       <Divider plain orientation='left'></Divider>
-      <Space
-        direction='vertical'
-        size='middle'
-        style={{
-          display: 'flex',
-        }}
-      >
       {orderListMemo}
-      </Space>
+    </>
-    </Spin>
   )
 
   function OrderList({ searchCriteria }) {
@@ -344,9 +333,7 @@ function OrderFollow() {
     console.info('OrderList.searchCriteria: ')
     console.info(searchCriteria)
     return (
-      <>
+      <Table loading={countryList === null} dataSource={dataSource} columns={columns} />
-        <Table dataSource={dataSource} columns={columns} />
-      </>
     )
   }
 }