feat: 移动端
fix: 更新未读消息数; style: 历史记录查询表单 perf: Emoji picker 使用native 避免下载图片 fix: 退出登录 perf: 历史记录: 会话显示Me的名字dev/mobile
Lei OT
2 years ago
parent
6d3c40188c
commit
5b158f80e1
@ -1,68 +1,26 @@
|
|||||||
import { memo, useCallback, useEffect, useRef, useState, forwardRef } from 'react'
|
import { Layout } from 'antd';
|
||||||
import { App, Avatar, List, Layout, Input, DatePicker, Button, Spin } from 'antd'
|
import MessagesHeader from '@/views/Conversations/Components/MessagesHeader';
|
||||||
import { ChatItem, MessageBox } from 'react-chat-elements'
|
import MessagesWrapper from '@/views/Conversations/Components/MessagesWrapper';
|
||||||
import { fetchConversationsList, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions'
|
import InputComposer from '@/views/Conversations/Components/InputComposer';
|
||||||
import { isEmpty } from '@/utils/utils'
|
|
||||||
import useFormStore from '@/stores/FormStore'
|
|
||||||
import { useShallow } from 'zustand/react/shallow'
|
|
||||||
|
|
||||||
|
const { Content, Header, Footer } = Layout;
|
||||||
import { RightOutlined } from '@ant-design/icons'
|
|
||||||
|
|
||||||
import { fetchSalesAgent, fetchCustomerList } from '@/actions/CommonActions'
|
|
||||||
import SearchInput from '@/components/SearchInput'
|
|
||||||
|
|
||||||
const { Sider, Content, Header, Footer } = Layout
|
|
||||||
const { TextArea } = Input
|
|
||||||
const { RangePicker } = DatePicker
|
|
||||||
|
|
||||||
const data = [
|
|
||||||
{
|
|
||||||
title: 'Tyler Dru Kelly',
|
|
||||||
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
|
|
||||||
msgTime: 'Hi Nazly Parlindungan Siregar, this is Sharon , travel advisor of Asia Highlights. We got your inquiry for your trip toJapan , are you available for a quick chat to discuss about your trip? I have some ideas to share with you . Looking forward to talking with you!',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Chhavi',
|
|
||||||
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
|
|
||||||
msgTime: 'Hi Sharon, thanks for reaching out. I am extremely busy person, please feel free to write down or send me any note and I will respond to you immediately. Cheers🙏',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Nathan Posey',
|
|
||||||
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
|
|
||||||
msgTime: 'It is too late to see cherry blossom from April 28, is it ok for you? For your 7 days tour, visit Tokyo and Kyoto is ok. I will suggest a tour with private car for you because your mother cannot walk too much.',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
function Chat() {
|
function Chat() {
|
||||||
const { notification } = App.useApp()
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<List
|
<Layout className='h-full chatwindow-wrapper mobilechat-wrapper' style={{ maxHeight: 'calc(100vh - 84px)', height: 'calc(100vh - 84px)', minWidth: '360px' }}>
|
||||||
itemLayout='horizontal'
|
<Header className='ant-layout-sider-light ant-card h-auto flex justify-between gap-1 items-center'>
|
||||||
dataSource={data}
|
<MessagesHeader />
|
||||||
renderItem={(item, index) => (
|
</Header>
|
||||||
<List.Item>
|
<Content className='flex-grow bg-whatsapp-bg relative'>
|
||||||
<List.Item.Meta
|
<MessagesWrapper />
|
||||||
avatar={<Avatar src={item.avatarUrl} />}
|
</Content>
|
||||||
title={<a href='https://ant.design'>{item.title}</a>}
|
<Footer className='ant-layout-sider-light p-0'>
|
||||||
description={item.msgTime}
|
<InputComposer mobile />
|
||||||
/>
|
</Footer>
|
||||||
</List.Item>
|
</Layout>
|
||||||
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<TextArea rows={4} placeholder='聊天窗口' maxLength={2000} />
|
|
||||||
<Button type='primary' onClick={() => {
|
|
||||||
notification.info({
|
|
||||||
message: '温馨提示',
|
|
||||||
description: '功能还在开发中，敬请期待',
|
|
||||||
placement: 'top',
|
|
||||||
duration: 60,
|
|
||||||
})
|
|
||||||
}}>发送</Button>
|
|
||||||
</>
|
</>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Chat
|
export default Chat;
|
||||||
|
|||||||
@ -1,90 +1,12 @@
|
|||||||
import { memo, useCallback, useEffect, useRef, useState, forwardRef } from 'react'
|
import ConversationsList from '@/views/Conversations/Components/ConversationsList';
|
||||||
import { Avatar, List, Button, Input, Layout, Select, DatePicker, Form, Spin } from 'antd'
|
|
||||||
import { ChatItem, MessageBox } from 'react-chat-elements'
|
|
||||||
import { fetchConversationsList, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions'
|
|
||||||
import { isEmpty } from '@/utils/utils'
|
|
||||||
import useFormStore from '@/stores/FormStore'
|
|
||||||
import { useShallow } from 'zustand/react/shallow'
|
|
||||||
import { useNavigate, useHref } from 'react-router-dom'
|
|
||||||
|
|
||||||
|
function Conversation() {
|
||||||
import { RightOutlined } from '@ant-design/icons'
|
|
||||||
|
|
||||||
import { fetchSalesAgent, fetchCustomerList } from '@/actions/CommonActions'
|
|
||||||
import SearchInput from '@/components/SearchInput'
|
|
||||||
|
|
||||||
const { Sider, Content, Header, Footer } = Layout
|
|
||||||
const { Search } = Input
|
|
||||||
const { RangePicker } = DatePicker
|
|
||||||
|
|
||||||
const data = [
|
|
||||||
{
|
|
||||||
title: 'Tyler Dru Kelly',
|
|
||||||
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
|
|
||||||
msgTime: '15127570944',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Chhavi',
|
|
||||||
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
|
|
||||||
msgTime: 'WLJ240311112',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Nathan Posey',
|
|
||||||
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
|
|
||||||
msgTime: 'WLJ240311114',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Philip',
|
|
||||||
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
|
|
||||||
msgTime: 'WLJ240312062',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Jeanne',
|
|
||||||
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
|
|
||||||
msgTime: 'H240313032',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Susan Puls',
|
|
||||||
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
|
|
||||||
msgTime: 'H240311213',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Ana Beatriz',
|
|
||||||
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
|
|
||||||
msgTime: 'H240312073',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Kathleen Anne Workman',
|
|
||||||
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
|
|
||||||
msgTime: 'HXY240104171',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
function Login() {
|
|
||||||
const navigate = useNavigate()
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className='chatwindow-wrapper'>
|
||||||
<List
|
<ConversationsList mobile={true} />
|
||||||
itemLayout='horizontal'
|
</div>
|
||||||
dataSource={data}
|
|
||||||
renderItem={(item, index) => (
|
|
||||||
<List.Item
|
|
||||||
onClick={() => {
|
|
||||||
navigate('/m/chat')}}
|
|
||||||
actions={[<RightOutlined key='goto' />]}
|
|
||||||
>
|
|
||||||
<List.Item.Meta
|
|
||||||
avatar={<Avatar src={item.avatarUrl} />}
|
|
||||||
title={<a href='https://ant.design'>{item.title}</a>}
|
|
||||||
description={item.msgTime}
|
|
||||||
/>
|
|
||||||
</List.Item>
|
|
||||||
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Login
|
export default Conversation
|
||||||
|
|||||||
Loading…
Reference in New Issue