style: 固定mail list 的header

src/views/orders/components/MailBox.jsx

@@ -103,7 +103,8 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
     const mailStateClass = item.MOI_ReadState === 0 ? 'font-bold' : ''
     const hasAtta = item.MAI_Attachment !== 0 ? <AttachmentIcon className='text-blue-500' /> : null
     return (
-      <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.MAI_SN ? 'bg-neutral-100' : ''}`}>
+      <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.MAI_SN ? 'bg-neutral-100' : ''}`}>
         <div className=''>
           <Checkbox
             checked={selectedItems.some((i) => i.MAI_SN === item.MAI_SN)}
@@ -132,7 +133,7 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
   }
 
   return (
-    <>
+    <div className='h-full flex flex-col gap-1 bg-white'>
       <div className='bg-white h-auto px-1 flex gap-1 items-center'>
         <Flex wrap gap='middle' justify={'center'} className='min-w-30 px-1'>
           <Tooltip title='全选'>
@@ -160,29 +161,33 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
             icon={<MailOpenIcon />}
             onClick={() => {
               markAsRead(selectedItems.map((item) => item.MAI_SN)).then(() => setSelectedItems([]))
-              }}
-            >已读</Button>
+            }}>
+            已读
+          </Button>
           <Button
             size='small'
             icon={<MailOutlined />}
             onClick={() => {
               console.info('未读未实现')
-              }}
-            >未读</Button>
+            }}>
+            未读
+          </Button>
           <Button
             size='small'
             icon={<MailCheckIcon />}
             onClick={() => {
               markAsProcessed(selectedItems.map((item) => item.MAI_SN)).then(() => setSelectedItems([]))
-              }}
-            >已处理</Button>
+            }}>
+            已处理
+          </Button>
           <Button
             size='small' // danger
             icon={<DeleteOutlined />}
             onClick={() => {
               markAsDeleted(selectedItems.map((item) => item.MAI_SN)).then(() => setSelectedItems([]))
-              }}
-            >删除</Button>
+            }}>
+            删除
+          </Button>
           <MailOrderSearchModal />
         </Flex>
       </div>
@@ -211,13 +216,7 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
           </Row>
         </Form>
       </div>
-
-      <div className='bg-white overflow-y-auto px-2' style={{ height: 'calc(100vh - 198px)' }}>
-        <Skeleton active loading={loading}>
-          <List
-            loading={loading}
-            header={
-              <Flex align='center' justify='space-between' wrap >
+      <Flex align='center' justify='space-between' wrap className='px-1 border-0 border-b border-solid border-neutral-200'>
         <Breadcrumb
           items={props.breadcrumb.map((bc) => {
             return {
@@ -251,7 +250,13 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
             iconPosition={'end'}></Button>
         </Flex>
       </Flex>
-            }
+
+      <div className='bg-white overflow-auto px-2' style={{ height1: 'calc(100vh - 198px)' }}>
+        <Skeleton active loading={loading}>
+          <List
+            loading={loading}
+            className='flex flex-col h-full [&_.ant-list-items]:overflow-auto'
+            header={null}
             itemLayout='vertical'
             pagination={false}
             dataSource={pagination.pagedList}
@@ -259,7 +264,7 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
           />
         </Skeleton>
       </div>
-    </>
+    </div>
   )
 }