perf: 使用四列布局订单跟踪

src/views/orders/Follow.jsx

@@ -17,7 +17,7 @@ import {
   SaveOutlined,
   PlusOutlined,
   MehOutlined,
-  SmileOutlined,
+  CompassOutlined,
   CheckSquareTwoTone,
   CarryOutTwoTone,
   MailTwoTone,
@@ -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, Layout,    } from 'antd'
+import { App, Badge, Empty, Flex, Button, Drawer , Space, Radio, Table, Tabs, Divider, Tag, Tooltip, List, Dropdown , Segmented, Tree, Typography, Input, Descriptions, Checkbox, Layout,  Row, Col  } from 'antd'
 import dayjs from 'dayjs'
 import { useCallback, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
@@ -340,7 +340,7 @@ function Follow() {
   const [mailSubject, setSubject] = useState('');
 
   const [openOrder, setOpenOrder] = useState(false);
-
+const [collapsed, setCollapsed] = useState(false)
 
   const [formValues, setFormValues] = useFormStore(useShallow((state) => [state.orderFollowForm, state.setOrderFollowForm]))
   const [advanceChecked, toggleAdvance] = useFormStore(useShallow((state) => [state.orderFollowAdvanceChecked, state.setOrderFollowAdvanceChecked]))
@@ -490,6 +490,30 @@ function Follow() {
   <Layout.Header className='bg-white h-auto px-1 flex gap-1 items-center'>
 
             <Button onClick={() => {}} icon={<PlusOutlined />} type={'primary'}>新邮件</Button>
+
+<Dropdown menu={{ items: [
+  {
+    key: '1',
+    label: '一催：模板一',
+  },
+  {
+    key: '2',
+    label: '一催：模板二',
+  },
+  {
+    key: '3',
+    label: '一催：模板三',
+  },
+]}} trigger={['click']}>
+
+    <Button>
+        <Space>
+          使用模板
+          <DownOutlined />
+        </Space>
+      </Button>
+  </Dropdown>
+            <Button onClick={() => {}} >多选</Button>
             <Input.Search
               className=''
               allowClear
@@ -500,12 +524,183 @@ function Follow() {
               placeholder={`名称/号码/订单号`}
             />
             <Button onClick={() => {}} >高级搜索</Button>
-            <Button onClick={() => {}} >多选</Button>
 </Layout.Header>
   <Layout>
     <Layout.Content>
 
-          <Table
+<Row>
+      <Col className='bg-white' span={16} style={{height: 'calc(100vh - 196px)', overflowY: 'auto'}}>
+<List
+    itemLayout="vertical"
+    size="small"
+    pagination={false}
+    dataSource={[
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: '250520-LSS250429038 团的 变更 <20>确认：Japan Fleet',
+                mailDate: '2025-05-01 19:21:00',
+                orderNo: 'LSS250501006',
+                country: 'Thailand',
+              },
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: 'Your Thailand Private tour by Asia Highlights 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到',
+                mailDate: '2025-05-01 19:21:00',
+                orderNo: 'LSS250501006',
+                country: 'Thailand',
+              },
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: 'Re: Personal information',
+                mailDate: '2025-05-01 19:21:00',
+                orderNo: 'LSS250501006',
+                country: 'Thailand',
+              },
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: 'Re: Your Future Trip with Asia Highlights',
+                mailDate: '2025-05-01 19:21:00',
+                orderNo: 'LSS250501006',
+                country: 'Thailand',
+              },
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: '回复： 回复：中华游251110-LSS250413051(AH)团计划',
+                mailDate: '2025-05-01 19:21:00',
+                orderNo: 'LSS250501006',
+                country: 'Thailand',
+              },
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: 'Re: Greeting from Asia Highlights Alisa',
+                mailDate: '2025-05-01 19:21:00',
+                orderNo: 'LSS250501006',
+                country: 'Thailand',
+              },
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: 'Re: Have you made any decisions about your Japan trip',
+                mailDate: '2025-05-01 19:21:00',
+                orderNo: 'LSS250501006',
+                country: 'Thailand',
+              },
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: 'Re: Sri Lanka tour',
+                mailDate: '2025-05-01 19:21:00',
+                orderNo: 'LSS250501006',
+                country: 'Thailand',
+              },
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: 'Re: How do you like the itinerary 3',
+                mailDate: '2025-05-01 19:21:00',
+                orderNo: 'LSS250501006',
+                country: 'Thailand',
+              },
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: 'Re: Re: Re: Final cost',
+                mailDate: '2025-05-01 19:21:00',
+                orderNo: 'LSS250501006',
+                country: 'Thailand',
+              },
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: 'Reference Number: LSS240628079',
+                mailDate: '2025-05-01 19:21:00',
+                orderNo: 'LSS250501006',
+                country: 'Thailand',
+              },
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: 'Re: Personal information and Hiroshima tour for 2 people',
+                mailDate: '2025-05-01 19:21:00',
+                orderNo: 'LSS250501006',
+                country: 'Thailand',
+              },
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: 'Re: Asia Travel Tips /LSS250429038',
+                mailDate: '2025-05-01 19:21:00',
+                orderNo: 'LSS250501006',
+                country: 'Thailand',
+              },
+            ]}
+    renderItem={item => (
+      <List.Item
+        key={item.title}
+        // actions={[
+        //   <a key="list-vertical-star-o">回复</a>,
+        //   <a key="list-vertical-refor">转发</a>,
+        // ]}
+      >
+        <List.Item.Meta
+          title={<a href={item.href} onClick={() => setSubject(item.title)}>{item.title}</a>}
+          description={item.description + ' ' + item.mailDate}
+        />
+        {item.content}LSS250501006, Thailand
+      </List.Item>
+    )}
+  /></Col>
+      <Col span={8}>
+
+  <div>
+    <Flex gap="small">
+            <Space.Compact>
+          <Button color="primary" variant="solid">
+            回复
+          </Button>
+          <Button color="primary" variant="outlined">
+            回复全部
+          </Button>
+          <Button color="primary" variant="outlined" >
+            转发
+          </Button>
+          </Space.Compact>
+          <Button color="cyan" variant="outlined">
+            已处理
+          </Button>
+          <Button color="cyan" variant="outlined">
+            绑定订单
+          </Button>
+          </Flex>
+     <Descriptions column={2} title={mailSubject} items={[
+  {
+    key: '1',
+    label: '发件人',
+    children: '"阿里邮箱" <no-reply@mailsupport.aliyun.com>',
+  },
+  {
+    key: '2',
+    label: '收件人',
+    children: '<liaoyijun@chinahighlights.com>',
+  },
+  {
+    key: '3',
+    label: '发送日期',
+    children: '2025-05-16 14:11',
+  },
+]} />
+        <p>{Math.random().toString(36).substring(2, 9)}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>
+  </div></Col>
+    </Row>
+          {/* <Table
           onRow={(record) => {
     return {
       onClick: (event) => {console.info(event)}, // 点击行
@@ -672,10 +867,10 @@ function Follow() {
                 country: 'Thailand',
               },
             ]}
-          />
+          /> */}
 </Layout.Content>
   </Layout>
-  <Layout.Footer className='p-1 border-solid border rounded border-gray-300'>
+  {/* <Layout.Footer className='p-1 border-solid border rounded border-gray-300'>
 
           <Descriptions title="Your Thailand Private tour by 'Asia Highlights' 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到" items={[
   {
@@ -714,12 +909,12 @@ function Follow() {
           </Button>
           </Flex>
           <div id='__preHtml__' className='whitespace-pre-wrap break-words' dangerouslySetInnerHTML={{ __html: '邮件内容。。。。。<br/>换行了。。。看看 ' }}></div>
-          </Layout.Footer>
+          </Layout.Footer> */}
 </Layout>
     </Layout.Content>
-    <Layout.Sider  width='400' style={{
+    <Layout.Sider  width='350' style={{
   backgroundColor: '#fff',
-}}>
+}} collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)} collapsedWidth={0} reverseArrow={true}>
       <Flex gap={6} vertical={true} justify='space-between'>
               <Typography.Text>
                 <FieldNumberOutlined className='pr-1' />
@@ -731,6 +926,10 @@ function Follow() {
                 <UserOutlined className=' pr-1' />
                 Jorgina(R1)
               </Typography.Text>
+              <Typography.Text>
+                <CompassOutlined className=' pr-1' />
+                Thailand
+              </Typography.Text>
               <Typography.Text>
                 <PhoneOutlined className=' pr-1' />
                 <Button type='link' size={'small'} onClick={() => {}}>