feat: 消息筛选: 图片按日期,

src/views/Conversations/Online/Components/MessageListFilter.jsx

@@ -1,8 +1,8 @@
 import { createContext, useEffect, useState } from 'react';
-import { Button, Tag, Radio, Popover, Form, Dropdown, Tabs, List, Image, Empty, Avatar } from 'antd';
+import { Button, Tag, Radio, Popover, Form, Dropdown, Tabs, List, Image, Empty, Avatar, Card } from 'antd';
 import { FileSearchOutlined, FilterOutlined, FilterTwoTone } from '@ant-design/icons';
 import { FilterIcon, InboxIcon, MailSendIcon, SendPlaneFillIcon, SendPlaneLineIcon } from '@/components/Icons';
-import { isEmpty, objectMapper, stringToColour } from '@/utils/commons';
+import { groupBy, isEmpty, objectMapper, stringToColour } from '@/utils/commons';
 import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
 import EmailDetail from './EmailDetail';
@@ -12,6 +12,10 @@ const CalColorStyle = (tag, outerStyle = true) => {
   const outerStyleObj = outerStyle ? { borderColor: `${color}66`, backgroundColor: `${color}0D` } : {};
   return { color: `${color}`, ...outerStyleObj };
 };
+const getVideoName = (vUrl) => {
+  const url = new URL(vUrl);
+  return url.pathname.split('/').pop();
+};
 const MessageListFilter = ({ ...props }) => {
   const activeMessages = useConversationStore(
     useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn] : []))
@@ -23,13 +27,20 @@ const MessageListFilter = ({ ...props }) => {
 
   const Album = () => {
     const data = (activeMessages || []).filter((item) => item.type === 'photo').reverse();
+    const byDate = groupBy(data, (item) => item.localDate.slice(0, 10));
     return (
       <>
         {data.length === 0 && <Empty description={false} />}
-        <div className='grid grid-cols-5 gap-2 max-h-96 overflow-y-auto'>
+        <div className='max-h-96 overflow-y-auto'>
           <Image.PreviewGroup className='my-4'>
-            {data.map((img) => (
-              <Image className='border object-cover' key={img.data.id} width={100} height={100} src={img.data.uri} />
+            {Object.keys(byDate).map((date, index) => (
+              <Card size='small' title={date} key={date} className='mb-2'>
+                <div className='grid grid-cols-5 gap-2 '>
+                  {byDate[date].map((img) => (
+                    <Image className='border object-cover' key={img.data.id} width={100} height={100} src={img.data.uri} />
+                  ))}
+                </div>
+              </Card>
             ))}
           </Image.PreviewGroup>
         </div>
@@ -42,7 +53,7 @@ const MessageListFilter = ({ ...props }) => {
     const data = (activeMessages || []).filter((item) => item.type === 'video').reverse();
     return (
       <>
-        {data.length === 0 && <Empty description={false} />}
+        {/* {data.length === 0 && <Empty description={false} />}
         <div className='grid grid-cols-3 gap-2 max-h-96 overflow-y-auto'>
           {data.map((item) => (
             <video controls controlsList='nodownload nofullscreen noremoteplayback' preload='metadata' key={item.data.id} className='max-h-24'>
@@ -50,7 +61,31 @@ const MessageListFilter = ({ ...props }) => {
               Your browser does not support HTML video.
             </video>
           ))}
-        </div>
+        </div> */}
+        <List
+          className='max-h-96 overflow-y-auto'
+          itemLayout='horizontal'
+          dataSource={data}
+          renderItem={(item, index) => (
+            <List.Item actions={[item.localDate]}>
+              <List.Item.Meta
+                // avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
+                avatar={
+                  <Avatar size='small' style={CalColorStyle(item.sender)}>
+                    {item.senderName}
+                  </Avatar>
+                }
+                title={
+                  <a href={item.data.uri} target='_blank' rel='noreferrer'>
+                    {getVideoName(item?.data.videoURL)}
+                  </a>
+                }
+                description={item.text}
+              />
+              {/* {item.text} */}
+            </List.Item>
+          )}
+        />
       </>
     );
   };

src/views/Conversations/Online/Input/EmailEditorPopup.jsx

@@ -215,7 +215,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote = {}, ini
             </Popconfirm>
             <Select options={[
               {key: 'lyt@hainatravel.com', value: 'lyt@hainatravel.com', label: 'LYT <lyt@hainatravel.com>' },
-              {key: 'ycc@chinahighlights.com', value: 'ycc@chinahighlights.com', label: 'YCC <ycc@chinahighlights.com>' },
+              {key: 'XXX@chinahighlights.com', value: 'XXX@chinahighlights.com', label: 'XXX <XXX@chinahighlights.com>' },
             ]} value={newFromEmail || fromEmail} onChange={(val) => setNewFromEmail(val)} variant={'borderless'}  />
           </div>
         }>