perf: 使用 Layout 布局

src/views/orders/Follow.jsx

@@ -27,7 +27,7 @@ import {
   CalendarOutlined,
   HeartTwoTone, MoneyCollectTwoTone
 } from '@ant-design/icons'
-import { App, Badge, Empty, Flex, Button, Drawer , Space, Radio, Table, Tabs, Divider, Tag, Tooltip, Row, Col, Segmented, Tree, Typography, Input, Descriptions, Checkbox } from 'antd'
+import { App, Badge, Empty, Flex, Button, Drawer , Space, Radio, Table, Tabs, Divider, Tag, Tooltip, Row, Col, Segmented, Tree, Typography, Input, Descriptions, Checkbox, Layout,    } from 'antd'
 import dayjs from 'dayjs'
 import { useCallback, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
@@ -358,9 +358,11 @@ function Follow() {
 
   return (
     <>
-      <Row gutter={16}>
-        <Col span={4}>
-          <Flex justify='start' align='start' vertical>
+  <Layout>
+    <Layout.Sider width='300' style={{
+  backgroundColor: '#fff',
+}}>
+      <Flex justify='start' align='start' vertical>
             <Segmented className='w-full' block shape='round' options={['AH', 'CH', 'GH']} />
             <Tree
               showIcon
@@ -444,6 +446,28 @@ function Follow() {
                       title: '5月',
                       key: '0-3-4',
                       icon: <FolderTwoTone />,
+                      children: [
+                        {
+                          title: 'Albee240422193452',
+                          key: 'Albee240422193452',
+                        },
+                        {
+                          title: 'Albee240422193285',
+                          key: 'Albee240422193285',
+                        },
+                        {
+                          title: 'Albee240422193752',
+                          key: 'Albee240422193752',
+                        },
+                        {
+                          title: 'Albee2404221934583',
+                          key: 'Albee2404221934583',
+                        },
+                        {
+                          title: 'Albee2404221937836',
+                          key: 'Albee2404221937836',
+                        },
+                      ],
                     },
                   ],
                 },
@@ -459,11 +483,13 @@ function Follow() {
                 },
               ]}
             />
-          </Flex>
-        </Col>
-        <Col span={14}>
-          <div className='flex gap-1 items-center'>
-            <Button onClick={() => {}} icon={<PlusOutlined />} type={'primary'} ghost shape={'circle'} size='small' />
+          </Flex></Layout.Sider>
+    <Layout.Content>
+
+      <Layout>
+  <Layout.Header className='bg-white h-auto px-1 flex gap-1 items-center'>
+
+            <Button onClick={() => {}} icon={<PlusOutlined />} type={'primary'}>新邮件</Button>
             <Input.Search
               className=''
               allowClear
@@ -473,7 +499,12 @@ function Follow() {
               }}
               placeholder={`名称/号码/订单号`}
             />
-          </div>
+            <Button onClick={() => {}} >高级搜索</Button>
+            <Button onClick={() => {}} >多选</Button>
+</Layout.Header>
+  <Layout>
+    <Layout.Content>
+
           <Table
           onRow={(record) => {
     return {
@@ -485,40 +516,48 @@ function Follow() {
     };
   }}
             pagination={false}
+    sticky={{ offsetHeader: 64 }}
             columns={[
-              {
-                title: '收/发件人',
-                dataIndex: 'name',
-                key: 'name',
-                render: (text) => <a>{text}</a>,
-              },
               {
                 title: '主题',
                 dataIndex: 'subject',
                 key: 'subject',
+                width: 500,
                 render: (text) => <a onClick={() => {
                   setSubject(text)
                   setOpenMail(true)
                 }}>{text}</a>,
               },
+              {
+                title: '收/发件人',
+                dataIndex: 'name',
+                key: 'name',
+                width: 380,
+                minWidth: 180,
+                render: (text) => <a>{text}</a>,
+              },
               {
                 title: '收/发日期',
                 dataIndex: 'mailDate',
                 key: '收/发日期',
+                width: 180,
               },
               {
                 title: '订单号',
                 key: 'orderNo',
                 dataIndex: 'orderNo',
+                width: 140,
               },
               {
                 title: '国籍',
                 key: 'country',
                 dataIndex: 'country',
+                width: 120,
               },
               {
                 title: '操作',
                 key: 'action',
+                width: 120,
                 render: (_, record) => (
                   <Space size='middle'>
                     <a>回复</a>
@@ -539,7 +578,7 @@ function Follow() {
               {
                 key: Math.random().toString(36).substring(2, 9),
                 name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: '【阿里云邮】弱密改密提醒 ' + Math.random().toString(36).substring(2, 9),
+                subject: 'Your Thailand Private tour by Asia Highlights 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到' + Math.random().toString(36).substring(2, 9),
                 mailDate: '2025-05-01 19:21:00',
                 orderNo: 'LSS250501006',
                 country: 'Thailand',
@@ -634,9 +673,9 @@ function Follow() {
               },
             ]}
           />
-{/*
-          <Divider />
-
+</Layout.Content>
+  </Layout>
+  <Layout.Footer className='p-1 border-solid border rounded border-gray-300'>
 
           <Descriptions title="Your Thailand Private tour by 'Asia Highlights' 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到" items={[
   {
@@ -674,12 +713,14 @@ function Follow() {
             绑定订单
           </Button>
           </Flex>
-<div className='border-solid border rounded border-gray-300'>
           <div id='__preHtml__' className='whitespace-pre-wrap break-words' dangerouslySetInnerHTML={{ __html: '邮件内容。。。。。<br/>换行了。。。看看 ' }}></div>
-          </div> */}
-        </Col>
-        <Col span={6}>
-            <Flex gap={6} vertical={true} justify='space-between'>
+          </Layout.Footer>
+</Layout>
+    </Layout.Content>
+    <Layout.Sider  width='400' style={{
+  backgroundColor: '#fff',
+}}>
+      <Flex gap={6} vertical={true} justify='space-between'>
               <Typography.Text>
                 <FieldNumberOutlined className='pr-1' />
                 LSS250501006
@@ -737,12 +778,8 @@ function Follow() {
           <Button color="cyan" variant="outlined">
             提醒中心
           </Button>
-          </Flex>
-
-
-
-        </Col>
-      </Row>
+          </Flex></Layout.Sider>
+  </Layout>
 
 <Drawer
         title={mailSubject}
@@ -791,8 +828,8 @@ function Follow() {
   },
 ]} />
         <p>{Math.random().toString(36).substring(2, 9)}Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
+        <p>Some {Math.random().toString(36).substring(2, 9)}contents...</p>
+        <p>Some contents...{Math.random().toString(36).substring(2, 9)}</p>
       </Drawer>
 
       <Drawer