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 { App, Avatar, List, Layout, Input, DatePicker, Button, 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 { Layout } from 'antd';
|
||||
import MessagesHeader from '@/views/Conversations/Components/MessagesHeader';
|
||||
import MessagesWrapper from '@/views/Conversations/Components/MessagesWrapper';
|
||||
import InputComposer from '@/views/Conversations/Components/InputComposer';
|
||||
|
||||
|
||||
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.',
|
||||
},
|
||||
]
|
||||
const { Content, Header, Footer } = Layout;
|
||||
|
||||
function Chat() {
|
||||
const { notification } = App.useApp()
|
||||
return (
|
||||
<>
|
||||
<List
|
||||
itemLayout='horizontal'
|
||||
dataSource={data}
|
||||
renderItem={(item, index) => (
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar src={item.avatarUrl} />}
|
||||
title={<a href='https://ant.design'>{item.title}</a>}
|
||||
description={item.msgTime}
|
||||
/>
|
||||
</List.Item>
|
||||
|
||||
)}
|
||||
/>
|
||||
<TextArea rows={4} placeholder='聊天窗口' maxLength={2000} />
|
||||
<Button type='primary' onClick={() => {
|
||||
notification.info({
|
||||
message: '温馨提示',
|
||||
description: '功能还在开发中，敬请期待',
|
||||
placement: 'top',
|
||||
duration: 60,
|
||||
})
|
||||
}}>发送</Button>
|
||||
<Layout className='h-full chatwindow-wrapper mobilechat-wrapper' style={{ maxHeight: 'calc(100vh - 84px)', height: 'calc(100vh - 84px)', minWidth: '360px' }}>
|
||||
<Header className='ant-layout-sider-light ant-card h-auto flex justify-between gap-1 items-center'>
|
||||
<MessagesHeader />
|
||||
</Header>
|
||||
<Content className='flex-grow bg-whatsapp-bg relative'>
|
||||
<MessagesWrapper />
|
||||
</Content>
|
||||
<Footer className='ant-layout-sider-light p-0'>
|
||||
<InputComposer mobile />
|
||||
</Footer>
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Chat
|
||||
export default Chat;
|
||||
|
||||
@ -1,90 +1,12 @@
|
||||
import { memo, useCallback, useEffect, useRef, useState, forwardRef } from 'react'
|
||||
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'
|
||||
import ConversationsList from '@/views/Conversations/Components/ConversationsList';
|
||||
|
||||
|
||||
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()
|
||||
function Conversation() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<List
|
||||
itemLayout='horizontal'
|
||||
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>
|
||||
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
<div className='chatwindow-wrapper'>
|
||||
<ConversationsList mobile={true} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Login
|
||||
export default Conversation
|
||||
|
||||
Loading…
Reference in New Issue