✨feat：收件箱按时间分组

src/utils/pagespy.js

@@ -4,7 +4,7 @@ import { readWebsocketLog } from '@/utils/indexedDB'
 import { BUILD_VERSION, BUILD_DATE } from '@/config'
 
 export const loadPageSpy = (title) => {
-  // if (import.meta.env.DEV || window.$pageSpy) return
+  if (import.meta.env.DEV || window.$pageSpy) return
 
   const PageSpyConfig = { api: 'page-spy.mycht.cn', project: 'Sales CRM', title: title + '(v' + BUILD_VERSION + ')', autoRender: false, offline: true }
 
@@ -52,7 +52,7 @@ export const uploadPageSpyLog = async () => {
   //   await window.$harbor.upload() // 上传日志 { clearCache: true, remark: '' }
   // }
 
-  // if (import.meta.env.DEV) return true;
+  if (import.meta.env.DEV) return true;
 
   if (window.$pageSpy) {
     try {

src/views/orders/components/MailBox.jsx

@@ -1,15 +1,14 @@
 import { useEffect, useState } from 'react'
-import { ReloadOutlined, ReadOutlined, RightOutlined, LeftOutlined, SearchOutlined, MailOutlined, DeleteOutlined, CloseOutlined, CloseCircleTwoTone, CloseCircleOutlined } from '@ant-design/icons'
-import { Flex, Button, Tooltip, List, Form, Row, Col, Input, Checkbox, DatePicker, Switch, Breadcrumb, Skeleton, Popconfirm } from 'antd'
+import { ReloadOutlined, RightOutlined, LeftOutlined, MailOutlined, DeleteOutlined, CloseCircleOutlined } from '@ant-design/icons'
+import { Flex, Button, Tooltip, List, Checkbox, Space, Breadcrumb, Skeleton } from 'antd'
 import { useEmailList } from '@/hooks/useEmail'
 import { isEmpty } from '@/utils/commons'
 import { MailboxDirIcon } from './MailboxDirIcon'
-import { AttachmentIcon, MailCheckIcon, MailOpenIcon } from '@/components/Icons'
+import { AttachmentIcon, MailCheckIcon } from '@/components/Icons'
 import NewEmailButton from './NewEmailButton'
 import MailOrderSearchModal from './MailOrderSearchModal'
 import MailListSearchModal from './MailListSearchModal'
 
-
 const PAGE_SIZE = 50 // 每页显示条数
 
 const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
@@ -42,7 +41,96 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
   const getPagedData = (data, currentPage) => {
     const startIndex = (currentPage - 1) * PAGE_SIZE
     const endIndex = Math.min(startIndex + PAGE_SIZE, data.length)
-    return data.slice(startIndex, endIndex)
+    const slicedData = data.slice(startIndex, endIndex)
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    // 用于存储本周（前天以前，上周以前）的邮件，按键为星期几
+    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+    // 获取本周第一天(周一)和最后一天(周日)的日期
+    const currentDay = today.getDay(); // 0是周日
+    const mondayOffset = currentDay === 0 ? -6 : 1 - currentDay; // 计算周一偏移量
+    const weekStart = new Date(today);
+    weekStart.setDate(today.getDate() + mondayOffset);
+    weekStart.setHours(0, 0, 0, 0);
+
+    const weekEnd = new Date(weekStart);
+    weekEnd.setDate(weekStart.getDate() + 6);
+    weekEnd.setHours(0, 0, 0, 0);
+
+    const groups = {
+      today: [],
+      yesterday: [],
+      dayBeforeYesterday: [],
+      thisWeek: {}, // 用于存储本周其他日期的邮件
+      lastWeek: [],
+      earlier: [],
+    };
+
+    // 初始化本周其他日期的分组
+    for (let i = 0; i < 7; i++) {
+      const date = new Date(weekStart);
+      date.setDate(weekStart.getDate() + i);
+      const weekday = weekdays[date.getDay()];
+      groups.thisWeek[weekday] = [];
+    }
+
+    slicedData.forEach((mail) => {
+      const mailDate = new Date(mail.SRDate);
+      mailDate.setHours(0, 0, 0, 0);
+
+      const diffTime = today - mailDate;
+      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+      // 计算邮件是星期几
+      const weekday = weekdays[mailDate.getDay()];
+
+      if (diffDays === 0) {
+        groups.today.push(mail);
+      } else if (diffDays === 1) {
+        groups.yesterday.push(mail);
+      } else if (diffDays === 2) {
+        groups.dayBeforeYesterday.push(mail);
+      } else if (mailDate >= weekStart && mailDate <= weekEnd && diffDays > 2) {
+        // 本周内但不是今天、昨天、前天的邮件
+        groups.thisWeek[weekday].push(mail);
+      } else if (diffDays <= 14) {
+        groups.lastWeek.push(mail);
+      } else {
+        groups.earlier.push(mail);
+      }
+    });
+
+    const groupedData = [];
+
+    if (groups.today.length > 0) {
+      groupedData.push({ title: '今天', data: groups.today });
+    }
+
+    if (groups.yesterday.length > 0) {
+      groupedData.push({ title: '昨天', data: groups.yesterday });
+    }
+
+    if (groups.dayBeforeYesterday.length > 0) {
+      groupedData.push({ title: '前天', data: groups.dayBeforeYesterday });
+    }
+
+    // 添加本周其他日期的分组（按星期几）
+    Object.entries(groups.thisWeek).forEach(([weekday, mails]) => {
+      if (mails.length > 0) {
+        groupedData.push({ title: weekday, data: mails });
+      }
+    });
+
+    if (groups.lastWeek.length > 0) {
+      groupedData.push({ title: '上周', data: groups.lastWeek });
+    }
+
+    if (groups.earlier.length > 0) {
+      groupedData.push({ title: '更早', data: groups.earlier });
+    }
+
+    return groupedData
   }
 
   const prePage = () => {
@@ -174,7 +262,7 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
             }
           })}
         />
-        {tempBreadcrumb && (<Button type="text" icon={<CloseCircleOutlined />} onClick={() => refresh()} />)}
+        {tempBreadcrumb && (<Button type='text' icon={<CloseCircleOutlined />} onClick={() => refresh()} />)}
         <Flex align='center' justify='space-between' className='ml-auto'>
           <span>已选: {selectedItems.length} 项；</span>
           <span>
@@ -199,15 +287,22 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
 
       <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}
-            renderItem={mailItemRender}
-          />
+          <Space direction='vertical' size='middle' style={{ display: 'flex' }}>
+          {pagination.pagedList.map(item => {
+            return (
+              <List
+                key={item.title}
+                loading={loading}
+                className='flex flex-col h-full [&_.ant-list-items]:overflow-auto'
+                header={item.title}
+                itemLayout='vertical'
+                pagination={false}
+                dataSource={item.data}
+                renderItem={mailItemRender}
+              />
+            )
+          })}
+          </Space>
         </Skeleton>
       </div>
     </div>