perf：调整邮件列表样式，精简字体大小、行间距

src/views/orders/components/MailBox.jsx

@@ -1,18 +1,9 @@
-
 import { useCallback, useEffect, useState } from 'react'
-import {
-  ReloadOutlined,
-  ReadOutlined, CheckSquareOutlined
-} from '@ant-design/icons'
-import {
-  Flex,
-  Button, Tooltip,
-  List,Radio,Typography,Divider,Drawer,
-  Dropdown, Input, Checkbox
-} from 'antd'
+import { ReloadOutlined, ReadOutlined, CheckSquareOutlined } from '@ant-design/icons'
+import { Flex, Button, Tooltip, List, Radio, Typography, Divider, Drawer, Dropdown, Input, Checkbox } from 'antd'
 
 const MailBox = (props) => {
-    const [openOrder, setOpenOrder] = useState(false)
+  const [openOrder, setOpenOrder] = useState(false)
   return (
     <>
       <div className='bg-white h-auto px-1 flex gap-1 items-center'>
@@ -82,7 +73,12 @@ const MailBox = (props) => {
           }}
           placeholder={`邮件主题`}
         />
-        <Button onClick={() => {setOpenOrder(true)}}>高级搜索</Button>
+        <Button
+          onClick={() => {
+            setOpenOrder(true)
+          }}>
+          高级搜索
+        </Button>
       </div>
 
       <div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
@@ -200,34 +196,23 @@ const MailBox = (props) => {
             },
           ]}
           renderItem={(item) => (
-            <List.Item
-              key={item.title}
-              // actions={[
-              //   <a key="list-vertical-star-o">回复</a>,
-              //   <a key="list-vertical-refor">转发</a>,
-              // ]}
-              extra={<Checkbox></Checkbox>}>
-              <List.Item.Meta
-                className='cursor-pointer'
-                onClick={() => {console.info('item: ', item); props?.onMailClick(item.key)}}
-                title={<a href={item.href} onClick={() => {console.info(''); props?.onMailClick(item.key)}}>{item.title}</a>}
-                description={item.description + ' ' + item.mailDate}
-              />
-              {item.content}LSS250501006, Thailand
-            </List.Item>
+            <li className='flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-gray-100 p-2'>
+              <div className='flex-1'>
+                <Flex gap='small' vertical={true} justify='space-between' className='cursor-pointer'>
+                  <span className="font-bold">{item.title}</span>
+                  <span className="text-neutral-500 text-wrap break-words break-all ">{item.description + ' ' + item.mailDate}</span>
+                  {item.orderNo + ' ' + item.country}
+                </Flex>
+              </div>
+              <div className=''>
+                <Checkbox></Checkbox>
+              </div>
+            </li>
           )}
         />
       </div>
 
-      <Drawer
-        title={'高级搜索'}
-        placement='right'
-        getContainer={false}
-        size={'large'}
-        mask={true}
-        maskClosable={true}
-        open={openOrder}
-        onClose={() => setOpenOrder(false)}>
+      <Drawer title={'高级搜索'} placement='top' getContainer={false} size={'large'} mask={true} maskClosable={true} open={openOrder} onClose={() => setOpenOrder(false)}>
         <Divider orientation='left'>
           <Typography.Text strong>是否重要</Typography.Text>
         </Divider>