From 6db05883de546bd3bb092db64324f07e0b1fffba Mon Sep 17 00:00:00 2001
From: LiaoYijun <lyj@hainatravel.com>
Date: Fri, 6 Jun 2025 15:45:34 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=B2=A1=E6=9C=89=E5=9B=A2=E5=8F=B7?=
 =?UTF-8?q?=E3=80=81=E5=9B=BD=E7=B1=8D=E6=97=B6=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/orders/components/MailBox.jsx | 84 ++++++++++---------------
 1 file changed, 32 insertions(+), 52 deletions(-)

diff --git a/src/views/orders/components/MailBox.jsx b/src/views/orders/components/MailBox.jsx
index fb39504..7c165de 100644
--- a/src/views/orders/components/MailBox.jsx
+++ b/src/views/orders/components/MailBox.jsx
@@ -3,6 +3,7 @@ import { ReloadOutlined, ReadOutlined, CheckSquareOutlined, StarOutlined, RightO
 import { Flex, Button, Tooltip, List, Form, Row, Col, Drawer, Dropdown, Input, Checkbox, DatePicker, Switch, Breadcrumb } from 'antd'
 import dayjs from 'dayjs'
 import { useEmailList } from '@/hooks/useEmail';
+import { isEmpty } from '@/utils/commons';
 
 const { RangePicker } = DatePicker
 const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {
@@ -37,6 +38,30 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {
 
   const { mailList, isLoading, error } = useEmailList(mailboxDir);
 
+  console.info('mailboxDir: ', mailboxDir)
+
+  const mailItemRender = (item) => {
+    const orderNumber = isEmpty(item.MAI_COLI_ID) ? '' : (item.MAI_COLI_ID + ' - ')
+    const countryName = isEmpty(item.CountryCN) ? '' : ('[' + (item.CountryCN === null ? 'USA' : item.CountryCN) + '] ')
+    const mailStateClass = item.MOI_ReadState === 0 ? 'font-bold' : ''
+    return (
+      <li className='flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-neutral-50 p-2' onClick={() => {
+        console.info('item: ', item)
+        onMailItemClick(item.MAI_SN)
+      }}>
+        <div className=''>
+          <Checkbox></Checkbox>
+        </div>
+        <div className='flex-1 pl-2'>
+          <Flex gap='small' vertical={true} justify='space-between' className='cursor-pointer'>
+            <div>{orderNumber}<span className={mailStateClass}>{item.MAI_Subject}</span></div>
+            <span className='text-neutral-500 text-wrap break-words break-all '>{countryName + item.SenderReceiver + ' ' + item.SRDate}</span>
+          </Flex>
+        </div>
+      </li>
+    )
+  }
+
   return (
     <>
       <div className='bg-white h-auto px-1 flex gap-1 items-center'>
@@ -106,8 +131,10 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {
           }}
           placeholder={`邮件主题`}
         />
-        <Switch checkedChildren={<AppstoreOutlined />}
+          <Tooltip title='高级搜索'>
+        <Switch checkedChildren={<ExpandOutlined />}
       unCheckedChildren={<ExpandOutlined />} defaultChecked={false} />
+      </Tooltip>
       </div>
       <div className='bg-white h-auto p-1 flex gap-1 items-center hidden'>
         <Form
@@ -136,7 +163,7 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {
       </div>
 
       <div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
-        <List
+        <List loading={isLoading}
           header={
             <Flex align='center' justify="space-between">
             <Breadcrumb
@@ -145,14 +172,14 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {
                   title: (
                     <>
                       <StarOutlined />
-                      <span>今日任务</span>
+                      <span>{mailboxDir.parentTitle}</span>
                     </>
                   ),
                 },
                 {
                   title: (
                     <>
-                      <span>lyj20210810144702</span>
+                      <span>{mailboxDir.title}</span>
                     </>
                   ),
                 },
@@ -167,58 +194,11 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {
           </Flex>
           }
           itemLayout='vertical'
-          size='large'
           pagination={false}
           dataSource={mailList}
-          renderItem={(item) => (
-            <li onClick={() => onMailItemClick(item.MAI_SN)} className='flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-neutral-50 p-2'>
-              <div className=''>
-                <Checkbox></Checkbox>
-              </div>
-              <div className='flex-1 pl-2'>
-                <Flex gap='small' vertical={true} justify='space-between' className='cursor-pointer'>
-                  <div>{item.orderNo + ' - '}<span className='font-bold'>{item.title}</span></div>
-                  <span className='text-neutral-500 text-wrap break-words break-all '>{'[' + (item.country === null ? '' : item.country) + '] ' + item.description + ' ' + item.mailDate}</span>
-                </Flex>
-              </div>
-            </li>
-          )}
+          renderItem={mailItemRender}
         />
       </div>
-
-      {/* <Drawer title={'高级搜索'} placement='top'  size={'large'} mask={true} maskClosable={true} open={openOrder} onClose={() => setOpenOrder(false)}>
-        <Form
-          layout={'vertical'}
-          form={form}
-          initialValues={{}}
-          // onFinish={handleSubmit}
-        >
-          <Row justify='start' gutter={16}>
-            <Col span={4}>
-              <Form.Item label='订单号' name='orderNumber'>
-                <Input placeholder='订单号' allowClear />
-              </Form.Item>
-            </Col>
-            <Col span={4}>
-              <Form.Item label='出发日期' name='startDateRange'>
-                <RangePicker allowClear={true} inputReadOnly={true} presets={DATE_RANGE_PRESETS} />
-              </Form.Item>
-            </Col>
-            <Col span={4}>
-              <Form.Item label='确认日期' name='confirmDateRange'>
-                <RangePicker allowClear={true} inputReadOnly={true} presets={DATE_RANGE_PRESETS} />
-              </Form.Item>
-            </Col>
-          </Row>
-          <Row justify='start' align='middle' gutter={16}>
-            <Col span={1} offset={1}>
-              <Button type='primary' htmlType='submit'>
-                搜索
-              </Button>
-            </Col>
-          </Row>
-        </Form>
-      </Drawer> */}
     </>
   )
 }