style: 固定mail list 的header

src/views/orders/components/MailBox.jsx

@@ -97,13 +97,14 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
   const mailItemRender = (item) => {
     const isOrderNode = mailboxDir.COLI_SN > 0
     const orderNumber = isEmpty(item.MAI_COLI_ID) || isOrderNode ? '' : item.MAI_COLI_ID + ' - '
-    const folderName = isOrderNode  ? `[${item.FDir}]` : ''
+    const folderName = isOrderNode ? `[${item.FDir}]` : ''
     const orderMailType = <span className='text-blue-400 text-xs'>{item.MAT_Name}</span>
     const countryName = isEmpty(item.CountryCN) ? '' : '[' + item.CountryCN + '] '
     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='全选'>
@@ -154,36 +155,40 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
         </Flex>
 
         <Flex wrap gap={8}>
-        <NewEmailButton />
+          <NewEmailButton />
-            <Button
+          <Button
-              size='small'
+            size='small'
-              icon={<MailOpenIcon />}
+            icon={<MailOpenIcon />}
-              onClick={() => {
+            onClick={() => {
               markAsRead(selectedItems.map((item) => item.MAI_SN)).then(() => setSelectedItems([]))
-              }}
+            }}>
-            >已读</Button>
+            已读
-            <Button
+          </Button>
-              size='small'
+          <Button
-              icon={<MailOutlined />}
+            size='small'
-              onClick={() => {
+            icon={<MailOutlined />}
+            onClick={() => {
               console.info('未读未实现')
-              }}
+            }}>
-            >未读</Button>
+            未读
-            <Button
+          </Button>
-              size='small'
+          <Button
-              icon={<MailCheckIcon />}
+            size='small'
-              onClick={() => {
+            icon={<MailCheckIcon />}
+            onClick={() => {
               markAsProcessed(selectedItems.map((item) => item.MAI_SN)).then(() => setSelectedItems([]))
-              }}
+            }}>
-            >已处理</Button>
+            已处理
-            <Button
+          </Button>
-              size='small' // danger
+          <Button
-              icon={<DeleteOutlined />}
+            size='small' // danger
-              onClick={() => {
+            icon={<DeleteOutlined />}
+            onClick={() => {
               markAsDeleted(selectedItems.map((item) => item.MAI_SN)).then(() => setSelectedItems([]))
-              }}
+            }}>
-            >删除</Button>
+            删除
-        <MailOrderSearchModal />
+          </Button>
+          <MailOrderSearchModal />
         </Flex>
       </div>
       <div className='bg-white h-auto p-1 flex gap-1 items-center hidden'>
@@ -211,47 +216,47 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
           </Row>
         </Form>
       </div>
+      <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 {
+              title: (
+                <>
+                  <MailboxDirIcon type={bc?.iconIndex} />
+                  <span>{bc.title}</span>
+                </>
+              ),
+            }
+          })}
+        />
+        <Flex align='center' justify='space-between' className='ml-auto'>
+          <span>已选: {selectedItems.length} 项；</span>
+          <span>
+            {(pagination.current - 1) * PAGE_SIZE + 1}-{Math.min(pagination.current * PAGE_SIZE, pagination.total)} of {pagination.total}
+          </span>
+          <Button
+            icon={<LeftOutlined />}
+            type='text'
+            onClick={() => {
+              prePage()
+            }}
+            iconPosition={'end'}></Button>
+          <Button
+            icon={<RightOutlined />}
+            type='text'
+            onClick={() => {
+              nextPage()
+            }}
+            iconPosition={'end'}></Button>
+        </Flex>
+      </Flex>
 
-      <div className='bg-white overflow-y-auto px-2' style={{ height: 'calc(100vh - 198px)' }}>
+      <div className='bg-white overflow-auto px-2' style={{ height1: 'calc(100vh - 198px)' }}>
         <Skeleton active loading={loading}>
           <List
             loading={loading}
-            header={
+            className='flex flex-col h-full [&_.ant-list-items]:overflow-auto'
-              <Flex align='center' justify='space-between' wrap >
+            header={null}
-                <Breadcrumb
-                  items={props.breadcrumb.map((bc) => {
-                    return {
-                      title: (
-                        <>
-                          <MailboxDirIcon type={bc?.iconIndex} />
-                          <span>{bc.title}</span>
-                        </>
-                      ),
-                    }
-                  })}
-                />
-                <Flex align='center' justify='space-between' className='ml-auto' >
-                  <span>已选: {selectedItems.length} 项；</span>
-                  <span>
-                    {(pagination.current - 1) * PAGE_SIZE + 1}-{Math.min(pagination.current * PAGE_SIZE, pagination.total)} of {pagination.total}
-                  </span>
-                  <Button
-                    icon={<LeftOutlined />}
-                    type='text'
-                    onClick={() => {
-                      prePage()
-                    }}
-                    iconPosition={'end'}></Button>
-                  <Button
-                    icon={<RightOutlined />}
-                    type='text'
-                    onClick={() => {
-                      nextPage()
-                    }}
-                    iconPosition={'end'}></Button>
-                </Flex>
-              </Flex>
-            }
             itemLayout='vertical'
             pagination={false}
             dataSource={pagination.pagedList}
@@ -259,7 +264,7 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
           />
         </Skeleton>
       </div>
-    </>
+    </div>
   )
 }