perf：调整邮件列表样式和代码

src/components/OrderProfile.jsx

@@ -1,7 +1,7 @@
 import { WhatsAppOutlined, FileAddOutlined, MailOutlined, PhoneOutlined, UserOutlined, FieldNumberOutlined, CompassOutlined, CalendarOutlined, EditOutlined, CheckOutlined } from '@ant-design/icons'
 
 import { useEffect, useState } from 'react'
-import { App, Flex, Select, Tooltip, Tabs, Button, Divider, Typography, Skeleton, Checkbox } from 'antd'
+import { App, Flex, Select, Tooltip, Divider, Typography, Skeleton, Checkbox } from 'antd'
 import { useOrderStore, fetchSetRemindStateAction, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions } from '@/stores/OrderStore'
 import { copy, isEmpty } from '@/utils/commons'
 const OrderProfile = ({ coliSN, ...props }) => {
@@ -21,7 +21,7 @@ const OrderProfile = ({ coliSN, ...props }) => {
     s.appendOrderComment,
   ])
 
-  const [orderRemindState, setOrderRemindState] = useState(orderDetail.remindstate);
+  const [orderRemindState, setOrderRemindState] = useState(orderDetail.remindstate)
   useEffect(() => {
     if (coliSN) {
       setLoading(true)
@@ -40,20 +40,20 @@ const OrderProfile = ({ coliSN, ...props }) => {
   }, [coliSN])
 
   const handleSetRemindState = async (checkedValue) => {
-    const state = checkedValue.filter(v => v !== orderRemindState);
+    const state = checkedValue.filter((v) => v !== orderRemindState)
-    const oldState = orderRemindState;
+    const oldState = orderRemindState
 
     try {
       if (isEmpty(state)) {
-        setOrderRemindState(null);
+        setOrderRemindState(null)
       } else {
-        setOrderRemindState(state[0]);
+        setOrderRemindState(state[0])
       }
-      await fetchSetRemindStateAction({ coli_sn: coliSN, remindstate: state });
+      await fetchSetRemindStateAction({ coli_sn: coliSN, remindstate: state })
-      message.success('设置成功');
+      message.success('设置成功')
     } catch (error) {
-      notification.warning({ message: '设置失败', description: error.message, placement: 'top', duration: 60 });
+      notification.warning({ message: '设置失败', description: error.message, placement: 'top', duration: 60 })
-      setOrderRemindState(oldState);
+      setOrderRemindState(oldState)
     }
   }
 
@@ -79,7 +79,7 @@ const OrderProfile = ({ coliSN, ...props }) => {
         })}
       /> */}
       <Skeleton active loading={loading}>
-        <Flex gap='small' vertical={true} justify='space-between'>
+        <Flex gap='small' vertical={true} justify='space-between' className='p-2'>
           <Typography.Text>
             <FieldNumberOutlined className='pr-1' />
             {orderDetail.order_no}
@@ -129,20 +129,20 @@ const OrderProfile = ({ coliSN, ...props }) => {
               width: '100%',
             }}
             variant='underlined'
-								onSelect={value => {
+            onSelect={(value) => {
-									setOrderPropValue(coliSN, "orderlabel", value)
+              setOrderPropValue(coliSN, 'orderlabel', value)
-										.then(() => {
+                .then(() => {
-											message.success("设置成功");
+                  message.success('设置成功')
-										})
+                })
-										.catch(reason => {
+                .catch((reason) => {
-											notification.error({
+                  notification.error({
-												message: "设置出错",
+                    message: '设置出错',
-												description: reason.message,
+                    description: reason.message,
-												placement: "top",
+                    placement: 'top',
-												duration: 60,
+                    duration: 60,
-											});
+                  })
-										});
+                })
-								}}
+            }}
             value={orderDetail.tags}
             options={orderLabelOptions}
           />
@@ -154,20 +154,20 @@ const OrderProfile = ({ coliSN, ...props }) => {
               width: '100%',
             }}
             variant='underlined'
-								onSelect={value => {
+            onSelect={(value) => {
-									setOrderPropValue(coliSN, "orderstatus", value)
+              setOrderPropValue(coliSN, 'orderstatus', value)
-										.then(() => {
+                .then(() => {
-											message.success("设置成功");
+                  message.success('设置成功')
-										})
+                })
-										.catch(reason => {
+                .catch((reason) => {
-											notification.error({
+                  notification.error({
-												message: "设置出错",
+                    message: '设置出错',
-												description: reason.message,
+                    description: reason.message,
-												placement: "top",
+                    placement: 'top',
-												duration: 60,
+                    duration: 60,
-											});
+                  })
-										});
+                })
-								}}
+            }}
             value={orderDetail.states}
             options={orderStatusOptions}
           />
@@ -176,7 +176,7 @@ const OrderProfile = ({ coliSN, ...props }) => {
         <Divider orientation='left'>
           <Typography.Text strong>催信</Typography.Text>
         </Divider>
-        <Checkbox.Group key='substatus' className="px-2" value={[orderRemindState]} options={remindStatusOptions} onChange={handleSetRemindState} />
+        <Checkbox.Group key='substatus' className='px-2' value={[orderRemindState]} options={remindStatusOptions} onChange={handleSetRemindState} />
 
         <Divider orientation='left'>
           <Typography.Text strong>表单信息</Typography.Text>

src/views/orders/components/MailBox.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { ReloadOutlined, ReadOutlined, CheckSquareOutlined, RightOutlined, LeftOutlined, ExpandOutlined } from '@ant-design/icons'
+import { ReloadOutlined, ReadOutlined, RightOutlined, LeftOutlined, ExpandOutlined } from '@ant-design/icons'
-import { Flex, Button, Tooltip, List, Form, Row, Col, Dropdown, Input, Checkbox, DatePicker, Switch, Breadcrumb, Skeleton } from 'antd'
+import { Flex, Button, Tooltip, List, Form, Row, Col, Input, Checkbox, DatePicker, Switch, Breadcrumb, Skeleton } from 'antd'
 import dayjs from 'dayjs'
 import { useEmailList } from '@/hooks/useEmail'
 import { isEmpty } from '@/utils/commons'
@@ -12,7 +12,7 @@ const { RangePicker } = DatePicker
 
 const PAGE_SIZE = 50 // 每页显示条数
 
-const MailBox = ({ mailboxDir, onMailItemClick, onSelect, ...props }) => {
+const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
   const DATE_RANGE_PRESETS = [
     {
       label: '本周',
@@ -100,24 +100,21 @@ const MailBox = ({ mailboxDir, onMailItemClick, onSelect, ...props }) => {
     const mailStateClass = item.MOI_ReadState === 0 ? 'font-bold' : ''
     const hasAtta = item.MAI_Attachment !== 0 ? <AttachmentIcon className='text-blue-500' /> : null
     return (
-      <li
+      <li className={`flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-neutral-50 active:bg-gray-200 p-2 ${props.currentActiveMailItem === item.key ? 'bg-neutral-100' : ''}`}>
-        className={`flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-neutral-50 active:bg-gray-200 p-2 ${props.currentActiveMailItem === item.key ? 'bg-neutral-100' : ''}`}>
+        <div className=''>
-          <div className=''>
           <Checkbox
-          checked={selectedItems.some((i) => i.MAI_SN === item.MAI_SN)}
+            checked={selectedItems.some((i) => i.MAI_SN === item.MAI_SN)}
-            onClick={e => {
+            onClick={(e) => {
-            const isChecked = e.target.checked;
+              const isChecked = e.target.checked
-            const updatedSelection = isChecked
+              const updatedSelection = isChecked ? [...selectedItems, item] : selectedItems.filter((item) => item.MAI_SN !== item.MAI_SN)
-              ? [...selectedItems, item]
+              setSelectedItems(updatedSelection)
-              : selectedItems.filter((item) => item.MAI_SN !== item.MAI_SN)
+            }}></Checkbox>
-            setSelectedItems(updatedSelection)
+        </div>
-            }
+        <div
-          }></Checkbox>
+          className='flex-1 pl-2'
-          </div>
-        <div className='flex-1 pl-2'
           onClick={() => {
             onMailItemClick(item)
-        }}>
+          }}>
           <Flex gap='small' vertical={true} justify='space-between' className='cursor-pointer'>
             <div>
               {orderNumber}
@@ -138,38 +135,38 @@ const MailBox = ({ mailboxDir, onMailItemClick, onSelect, ...props }) => {
         <Flex wrap gap='middle' justify={'center'} className='min-w-40'>
           <Tooltip title='全选'>
             <Checkbox
-            indeterminate={
+              indeterminate={selectedItems.length > 0 && selectedItems.length < pagination.pagedList.length}
-                selectedItems.length > 0 &&
+              checked={pagination.pagedList.length === 0 ? false : pagination.pagedList.every((item) => selectedItems.some((selected) => selected.MAI_SN === item.MAI_SN))}
-                selectedItems.length < pagination.pagedList.length
+              onChange={(e) => {
-              }
+                const isChecked = e.target.checked
-              checked={pagination.pagedList.length === 0 ? false : pagination.pagedList.every((item) =>
-                selectedItems.some((selected) => selected.MAI_SN === item.MAI_SN)
-              )}
-            onChange={(e) => {
-                const isChecked = e.target.checked;
                 if (isChecked) {
-                  setSelectedItems((prev) => [
+                  setSelectedItems((prev) => [...prev, ...pagination.pagedList])
-                    ...prev,
-                    ...pagination.pagedList,
-                  ]);
                 } else {
-                  setSelectedItems([]);
+                  setSelectedItems([])
                 }
-              }}
+              }}></Checkbox>
-            ></Checkbox>
           </Tooltip>
           <Tooltip title='标记已读'>
-            <Button shape='circle' type='text' size='small' icon={<ReadOutlined />}
+            <Button
-            onClick={() => {
+              shape='circle'
-              markAsRead(selectedItems.map((item) => item.MAI_SN))
+              type='text'
-            }}
+              size='small'
+              icon={<ReadOutlined />}
+              onClick={() => {
+                markAsRead(selectedItems.map((item) => item.MAI_SN))
+              }}
             />
           </Tooltip>
           <Tooltip title='已处理'>
-            <Button shape='circle' type='text' size='small' icon={<MailCheckIcon />}
+            <Button
-            onClick={() => {
+              shape='circle'
-              markAsProcessed(selectedItems.map((item) => item.MAI_SN))
+              type='text'
-            }} />
+              size='small'
+              icon={<MailCheckIcon />}
+              onClick={() => {
+                markAsProcessed(selectedItems.map((item) => item.MAI_SN))
+              }}
+            />
           </Tooltip>
           <Tooltip title='刷新'>
             <Button shape='circle' type='text' size='small' icon={<ReloadOutlined />} onClick={refresh} />
@@ -214,51 +211,51 @@ const MailBox = ({ mailboxDir, onMailItemClick, onSelect, ...props }) => {
         </Form>
       </div>
 
-      <div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
+      <div className='bg-white overflow-y-auto px-2' style={{ height: 'calc(100vh - 198px)' }}>
         <Skeleton active loading={loading}>
-        <List
+          <List
-          loading={loading}
+            loading={loading}
-          header={
+            header={
-            <Flex align='center' justify='space-between'>
-              <Breadcrumb
-                items={props.breadcrumb.map((bc) => {
-                  return {
-                    title: (
-                      <>
-                        <MailboxDirIcon type={bc?.iconIndex} />
-                        <span>{bc.title}</span>
-                      </>
-                    ),
-                  }
-                })}
-              />
               <Flex align='center' justify='space-between'>
-                <span>已选: {selectedItems.length} 项；</span>
+                <Breadcrumb
-                <span>
+                  items={props.breadcrumb.map((bc) => {
-                  {(pagination.current - 1) * PAGE_SIZE + 1}-{Math.min(pagination.current * PAGE_SIZE, pagination.total)} of {pagination.total}
+                    return {
-                </span>
+                      title: (
-                <Button
+                        <>
-                  icon={<LeftOutlined />}
+                          <MailboxDirIcon type={bc?.iconIndex} />
-                  type='text'
+                          <span>{bc.title}</span>
-                  onClick={() => {
+                        </>
-                    prePage()
+                      ),
-                  }}
+                    }
-                  iconPosition={'end'}></Button>
+                  })}
-                <Button
+                />
-                  icon={<RightOutlined />}
+                <Flex align='center' justify='space-between'>
-                  type='text'
+                  <span>已选: {selectedItems.length} 项；</span>
-                  onClick={() => {
+                  <span>
-                    nextPage()
+                    {(pagination.current - 1) * PAGE_SIZE + 1}-{Math.min(pagination.current * PAGE_SIZE, pagination.total)} of {pagination.total}
-                  }}
+                  </span>
-                  iconPosition={'end'}></Button>
+                  <Button
+                    icon={<LeftOutlined />}
+                    type='text'
+                    onClick={() => {
+                      prePage()
+                    }}
+                    iconPosition={'end'}></Button>
+                  <Button
+                    icon={<RightOutlined />}
+                    type='text'
+                    onClick={() => {
+                      nextPage()
+                    }}
+                    iconPosition={'end'}></Button>
+                </Flex>
               </Flex>
-            </Flex>
+            }
-          }
+            itemLayout='vertical'
-          itemLayout='vertical'
+            pagination={false}
-          pagination={false}
+            dataSource={pagination.pagedList}
-          dataSource={pagination.pagedList}
+            renderItem={mailItemRender}
-          renderItem={mailItemRender}
+          />
-        />
         </Skeleton>
       </div>
     </>