使用 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,51 +290,40 @@ 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
-            <Radio.Group
+            options={[
-              options={[
+              { label: '今日任务', value: 'today' },
-                { label: '今日任务', value: 'today' },
+              { label: '潜力客户', value: 'star' },
-                { label: '潜力客户', value: 'star' },
+              { label: '重点订单', value: 'important' },
-                { label: '重点订单', value: 'important' },
+              { label: '成行', value: 'myfavorites' },
-                { label: '成行', value: 'myfavorites' },
+              { label: '走团中', value: 'ing' },
-                { label: '走团中', value: 'ing' },
+              { label: '走团后一月', value: 'lastMonth' }
-                { label: '走团后一月', value: 'lastMonth' }
+            ]}
-              ]}
+            value={searchCriteria.type}
-              value={searchCriteria.type}
+            onChange={({ target: { value } }) => {
-              onChange={({ target: { value } }) => {
+              setSearchCriteria({
-                setSearchCriteria({
+                ...searchCriteria,
-                  ...searchCriteria,
+                type: value
-                  type: value
+              })
-                })
+            }}
-              }}
+            optionType='button'
-              optionType='button'
+            buttonStyle='solid'
-              buttonStyle='solid'
+            disabled={advanceChecked}
-              disabled={advanceChecked}
+          />
-            />
+
-          </Col>
+          <Switch checkedChildren='高级查询' unCheckedChildren='高级查询'
-          <Col span={4}>
+            defaultChecked={false}
-            <Switch checkedChildren='高级查询' unCheckedChildren='高级查询'
+            onChange={() => { toggleAdvance(!advanceChecked) }} />
-              defaultChecked={false}
+        </Flex>
-              onChange={() => { toggleAdvance(!advanceChecked) }} />
-          </Col>
-        </Row>
         <Conditional condition={advanceChecked} whenTrue={<AdvanceSearchForm onSubmit={handleSubmit} />}
         />
       </Space>
       <Divider plain orientation='left'></Divider>
-      <Space
+      {orderListMemo}
-        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} />
-      </>
     )
   }
 }