使用 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
@@ -191,7 +191,7 @@ const AdvanceSearchForm = memo(function AdvanceSearch({ onSubmit }) {
     <Form
       layout={'inline'}
       form={form}
-      initialValues={{orderLabel: '全部'}}
+      initialValues={{ orderLabel: '全部' }}
       onFinish={handleSubmit}
       style={{
         maxWidth: 'none',
@@ -290,10 +290,9 @@ function OrderFollow() {
   }, [])
 
   return (
-    <Spin spinning={false} delay={500}>
-      <Space direction='vertical' style={{ width: '100%' }}>
-        <Row gutter={[16, 16]} justify='start' align='middle'>
-          <Col span={10}>
+    <>
+      <Space direction='vertical' size='large' style={{ width: '100%' }}>
+        <Flex gap='large' justify='start' align='center' horizontal>
           <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>
-        </Row>
+        </Flex>
         <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 dataSource={dataSource} columns={columns} />
-      </>
+      <Table loading={countryList === null} dataSource={dataSource} columns={columns} />
     )
   }
 }