428 lines
15 KiB
React
428 lines
15 KiB
React
import React, { useState, useEffect, useRef } from 'react'
|
||
import { Card, Button, Input, List, Badge, Modal, Form, Select, Tabs, Avatar, Empty, message, Popconfirm, Space, Tag, Tooltip } from 'antd'
|
||
import { PlusOutlined, SendOutlined, TeamOutlined, UserOutlined, ArrowLeftOutlined, DeleteOutlined, SettingOutlined, UserDeleteOutlined } from '@ant-design/icons'
|
||
import axios from 'axios'
|
||
|
||
const { TextArea } = Input
|
||
|
||
// 移动端检测
|
||
function useIsMobile() {
|
||
const [isMobile, setIsMobile] = useState(window.innerWidth < 768)
|
||
useEffect(() => {
|
||
const onResize = () => setIsMobile(window.innerWidth < 768)
|
||
window.addEventListener('resize', onResize)
|
||
return () => window.removeEventListener('resize', onResize)
|
||
}, [])
|
||
return isMobile
|
||
}
|
||
|
||
function Messages({ user }) {
|
||
const isMobile = useIsMobile()
|
||
const [conversations, setConversations] = useState([])
|
||
const [allUsers, setAllUsers] = useState([])
|
||
const [activeConv, setActiveConv] = useState(null)
|
||
const [messages, setMessages] = useState([])
|
||
const [inputValue, setInputValue] = useState('')
|
||
const [sending, setSending] = useState(false)
|
||
const [createVisible, setCreateVisible] = useState(false)
|
||
const [membersVisible, setMembersVisible] = useState(false)
|
||
const [createForm] = Form.useForm()
|
||
const [creating, setCreating] = useState(false)
|
||
const bottomRef = useRef(null)
|
||
const activeConvRef = useRef(null)
|
||
const lastMsgIdRef = useRef(0)
|
||
|
||
// 打开会话时同步到 ref（供轮询闭包使用）
|
||
const openConversation = (conv) => {
|
||
setActiveConv(conv)
|
||
activeConvRef.current = conv
|
||
lastMsgIdRef.current = 0
|
||
setMessages([])
|
||
}
|
||
|
||
const closeConversation = () => {
|
||
setActiveConv(null)
|
||
activeConvRef.current = null
|
||
setMessages([])
|
||
}
|
||
|
||
const fetchConversations = async () => {
|
||
try {
|
||
const res = await axios.get('/api/chat/conversations')
|
||
if (res.data.success) setConversations(res.data.data)
|
||
} catch (err) { /* 静默 */ }
|
||
}
|
||
|
||
const fetchUsers = async () => {
|
||
try {
|
||
const res = await axios.get('/api/chat/users')
|
||
if (res.data.success) setAllUsers(res.data.data)
|
||
} catch (err) { /* 静默 */ }
|
||
}
|
||
|
||
// 拉取当前打开会话的消息（首次全量，之后增量）
|
||
const fetchMessages = async (conv) => {
|
||
if (!conv) return
|
||
try {
|
||
const after = lastMsgIdRef.current
|
||
const res = await axios.get(`/api/chat/conversations/${conv.id}/messages`, { params: after ? { after } : {} })
|
||
if (res.data.success) {
|
||
const rows = res.data.data
|
||
if (rows.length > 0) {
|
||
lastMsgIdRef.current = rows[rows.length - 1].id
|
||
setMessages(prev => after > 0 ? [...prev, ...rows] : rows)
|
||
}
|
||
}
|
||
} catch (err) { /* 静默 */ }
|
||
}
|
||
|
||
// 会话列表 5 秒轮询；打开的会话 3 秒轮询消息
|
||
useEffect(() => {
|
||
fetchConversations()
|
||
fetchUsers()
|
||
const convTimer = setInterval(fetchConversations, 5000)
|
||
const msgTimer = setInterval(() => fetchMessages(activeConvRef.current), 3000)
|
||
return () => { clearInterval(convTimer); clearInterval(msgTimer) }
|
||
}, [])
|
||
|
||
// 新消息自动滚动到底部
|
||
useEffect(() => {
|
||
bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||
}, [messages.length])
|
||
|
||
const handleSend = async () => {
|
||
const content = inputValue.trim()
|
||
if (!content || !activeConv || sending) return
|
||
setSending(true)
|
||
try {
|
||
const res = await axios.post(`/api/chat/conversations/${activeConv.id}/messages`, { content })
|
||
if (res.data.success) {
|
||
setInputValue('')
|
||
await fetchMessages(activeConvRef.current)
|
||
fetchConversations()
|
||
}
|
||
} catch (err) {
|
||
message.error(err.response?.data?.message || '发送失败')
|
||
} finally {
|
||
setSending(false)
|
||
}
|
||
}
|
||
|
||
const handleCreate = async (values) => {
|
||
setCreating(true)
|
||
try {
|
||
const payload = values.tab === 'group'
|
||
? { type: 'group', name: values.name, memberIds: values.memberIds }
|
||
: { type: 'direct', userId: values.userId }
|
||
const res = await axios.post('/api/chat/conversations', payload)
|
||
if (res.data.success) {
|
||
message.success(res.data.message)
|
||
setCreateVisible(false)
|
||
createForm.resetFields()
|
||
await fetchConversations()
|
||
// 自动打开新会话
|
||
const list = (await axios.get('/api/chat/conversations')).data
|
||
if (list.success) {
|
||
const conv = list.data.find(c => c.id === res.data.data.id)
|
||
if (conv) openConversation(conv)
|
||
}
|
||
}
|
||
} catch (err) {
|
||
message.error(err.response?.data?.message || '创建失败')
|
||
} finally {
|
||
setCreating(false)
|
||
}
|
||
}
|
||
|
||
const handleDeleteConv = async (conv) => {
|
||
try {
|
||
const res = await axios.delete(`/api/chat/conversations/${conv.id}`)
|
||
if (res.data.success) {
|
||
message.success(res.data.message)
|
||
if (activeConv?.id === conv.id) closeConversation()
|
||
fetchConversations()
|
||
}
|
||
} catch (err) {
|
||
message.error(err.response?.data?.message || '删除失败')
|
||
}
|
||
}
|
||
|
||
const canDelete = (conv) => conv.type === 'direct' || conv.creator_id === user?.id
|
||
|
||
// 群主移除群成员
|
||
const handleRemoveMember = async (memberId) => {
|
||
try {
|
||
const res = await axios.delete(`/api/chat/conversations/${activeConv.id}/members/${memberId}`)
|
||
if (res.data.success) {
|
||
message.success(res.data.message)
|
||
setMembersVisible(false)
|
||
// 刷新会话列表与当前会话
|
||
const list = await axios.get('/api/chat/conversations')
|
||
if (list.data.success) {
|
||
setConversations(list.data.data)
|
||
const conv = list.data.data.find(c => c.id === activeConv.id)
|
||
if (conv) {
|
||
setActiveConv(conv)
|
||
activeConvRef.current = conv
|
||
} else {
|
||
closeConversation()
|
||
}
|
||
}
|
||
}
|
||
} catch (err) {
|
||
message.error(err.response?.data?.message || '操作失败')
|
||
}
|
||
}
|
||
|
||
const otherOptions = allUsers.filter(u => u.id !== user?.id).map(u => ({
|
||
value: u.id,
|
||
label: (
|
||
<span>
|
||
<Badge status={u.is_online ? 'success' : 'default'} />
|
||
{u.display_name || u.username}
|
||
<span style={{ color: '#999', fontSize: 12 }}>（{u.username}）</span>
|
||
</span>
|
||
)
|
||
}))
|
||
|
||
// ============ 会话列表 ============
|
||
const conversationList = (
|
||
<>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
||
<span style={{ fontWeight: 500 }}>我的会话</span>
|
||
<Button type="primary" size="small" icon={<PlusOutlined />} onClick={() => { createForm.resetFields(); setCreateVisible(true) }}>
|
||
发起对话 / 建群
|
||
</Button>
|
||
</div>
|
||
{conversations.length === 0 ? (
|
||
<Empty description="暂无会话，点击右上角发起对话" image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||
) : (
|
||
<List
|
||
dataSource={conversations}
|
||
renderItem={(conv) => (
|
||
<List.Item
|
||
className={`conv-item ${activeConv?.id === conv.id ? 'conv-item-active' : ''}`}
|
||
onClick={() => openConversation(conv)}
|
||
style={{ cursor: 'pointer', padding: '10px 8px' }}
|
||
extra={
|
||
<Space size={4}>
|
||
{conv.unread > 0 && <Badge count={conv.unread} />}
|
||
{canDelete(conv) && (
|
||
<Popconfirm
|
||
title={conv.type === 'group' ? '确定解散该群组吗？' : '确定删除该会话吗？'}
|
||
onConfirm={(e) => { e?.stopPropagation(); handleDeleteConv(conv) }}
|
||
onCancel={(e) => e?.stopPropagation()}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<Button type="text" size="small" danger icon={<DeleteOutlined />} onClick={(e) => e.stopPropagation()} />
|
||
</Popconfirm>
|
||
)}
|
||
</Space>
|
||
}
|
||
>
|
||
<List.Item.Meta
|
||
avatar={
|
||
<Avatar
|
||
style={{ backgroundColor: conv.type === 'group' ? '#faad14' : '#7c3aed' }}
|
||
icon={conv.type === 'group' ? <TeamOutlined /> : <UserOutlined />}
|
||
/>
|
||
}
|
||
title={
|
||
<span>
|
||
{conv.name || '未命名'}
|
||
{conv.type === 'group' && <Tag style={{ marginLeft: 8 }}>{conv.member_count}人</Tag>}
|
||
</span>
|
||
}
|
||
description={
|
||
conv.last_message
|
||
? `${conv.last_message.sender_name}：${conv.last_message.content.slice(0, 20)}`
|
||
: '暂无消息'
|
||
}
|
||
/>
|
||
</List.Item>
|
||
)}
|
||
/>
|
||
)}
|
||
</>
|
||
)
|
||
|
||
// ============ 聊天窗口 ============
|
||
const chatWindow = activeConv ? (
|
||
<div className="chat-window">
|
||
<div className="chat-header">
|
||
{isMobile && (
|
||
<Button type="text" icon={<ArrowLeftOutlined />} onClick={closeConversation} style={{ marginRight: 4 }} />
|
||
)}
|
||
<span style={{ fontWeight: 500 }}>{activeConv.name || '未命名'}</span>
|
||
{activeConv.type === 'group' && (
|
||
<Tooltip title={activeConv.members.map(m => m.display_name || m.username).join('、')}>
|
||
<Tag style={{ marginLeft: 8 }}>{activeConv.member_count}人</Tag>
|
||
</Tooltip>
|
||
)}
|
||
{activeConv.type === 'group' && activeConv.creator_id === user?.id && (
|
||
<Button size="small" type="text" icon={<SettingOutlined />} onClick={() => setMembersVisible(true)} style={{ marginLeft: 'auto' }}>
|
||
成员管理
|
||
</Button>
|
||
)}
|
||
</div>
|
||
<div className="chat-messages">
|
||
{messages.length === 0 && <Empty description="还没有消息，发送第一条吧" image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ marginTop: 40 }} />}
|
||
{messages.map(m => {
|
||
const mine = m.sender_id === user?.id
|
||
return (
|
||
<div key={m.id} className={`chat-msg ${mine ? 'chat-msg-mine' : ''}`}>
|
||
{!mine && <div className="chat-msg-sender">{m.sender_name}</div>}
|
||
<div className={`chat-bubble ${mine ? 'chat-bubble-mine' : ''}`}>{m.content}</div>
|
||
<div className="chat-msg-time">{m.created_at?.slice(5, 16)}</div>
|
||
</div>
|
||
)
|
||
})}
|
||
<div ref={bottomRef} />
|
||
</div>
|
||
<div className="chat-input">
|
||
<TextArea
|
||
value={inputValue}
|
||
onChange={(e) => setInputValue(e.target.value)}
|
||
onPressEnter={(e) => { if (!e.shiftKey) { e.preventDefault(); handleSend() } }}
|
||
placeholder="输入消息，Enter 发送，Shift+Enter 换行"
|
||
autoSize={{ minRows: 1, maxRows: 4 }}
|
||
style={{ flex: 1 }}
|
||
/>
|
||
<Button type="primary" icon={<SendOutlined />} loading={sending} onClick={handleSend}>发送</Button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="chat-placeholder">
|
||
<Empty description="选择一个会话开始聊天" />
|
||
</div>
|
||
)
|
||
|
||
// ============ 发起对话 / 建群弹窗 ============
|
||
// 注意：这里必须用普通 JSX 变量而非内部函数组件，
|
||
// 否则轮询重新渲染时组件类型变化会导致弹窗被卸载重建（闪退）
|
||
const createModal = (
|
||
<Modal
|
||
title="发起对话"
|
||
open={createVisible}
|
||
onCancel={() => setCreateVisible(false)}
|
||
footer={null}
|
||
width={480}
|
||
>
|
||
<Form form={createForm} layout="vertical" onFinish={handleCreate} initialValues={{ tab: 'direct' }}>
|
||
<Form.Item name="tab" noStyle>
|
||
<Tabs
|
||
centered
|
||
items={[
|
||
{
|
||
key: 'direct',
|
||
label: '单聊',
|
||
children: (
|
||
<Form.Item name="userId" label="选择对话对象" rules={[{ required: true, message: '请选择对话对象' }]}>
|
||
<Select placeholder="选择用户（绿点为在线）" options={otherOptions} showSearch optionFilterProp="label" />
|
||
</Form.Item>
|
||
)
|
||
},
|
||
{
|
||
key: 'group',
|
||
label: '创建群聊',
|
||
children: (
|
||
<>
|
||
<Form.Item name="name" label="群名称" rules={[{ required: true, message: '请输入群名称' }]}>
|
||
<Input placeholder="例如：拍摄组工作群" />
|
||
</Form.Item>
|
||
<Form.Item name="memberIds" label="群成员（除自己外至少选1人）" rules={[{ required: true, message: '请选择群成员' }]}>
|
||
<Select mode="multiple" placeholder="选择群成员" options={otherOptions} showSearch optionFilterProp="label" />
|
||
</Form.Item>
|
||
</>
|
||
)
|
||
}
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
<div style={{ textAlign: 'right' }}>
|
||
<Space>
|
||
<Button onClick={() => setCreateVisible(false)}>取消</Button>
|
||
<Button type="primary" htmlType="submit" loading={creating}>确定</Button>
|
||
</Space>
|
||
</div>
|
||
</Form>
|
||
</Modal>
|
||
)
|
||
|
||
// ============ 群成员管理弹窗（仅群主可见） ============
|
||
const membersModal = (
|
||
<Modal
|
||
title={`群成员管理（${activeConv?.member_count || 0}人）`}
|
||
open={membersVisible}
|
||
onCancel={() => setMembersVisible(false)}
|
||
footer={null}
|
||
width={420}
|
||
>
|
||
<List
|
||
dataSource={activeConv?.members || []}
|
||
renderItem={(m) => (
|
||
<List.Item
|
||
actions={
|
||
m.id !== activeConv?.creator_id
|
||
? [
|
||
<Popconfirm
|
||
key="del"
|
||
title={`确定将 ${m.display_name || m.username} 移出群聊吗？`}
|
||
onConfirm={() => handleRemoveMember(m.id)}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<Button type="text" size="small" danger icon={<UserDeleteOutlined />} />
|
||
</Popconfirm>
|
||
]
|
||
: []
|
||
}
|
||
>
|
||
<List.Item.Meta
|
||
avatar={<Avatar icon={<UserOutlined />} />}
|
||
title={
|
||
<span>
|
||
{m.display_name || m.username}
|
||
{m.id === activeConv?.creator_id && <Tag color="gold" style={{ marginLeft: 8 }}>群主</Tag>}
|
||
{m.id === user?.id && <Tag style={{ marginLeft: 8 }}>我</Tag>}
|
||
</span>
|
||
}
|
||
/>
|
||
</List.Item>
|
||
)}
|
||
/>
|
||
</Modal>
|
||
)
|
||
|
||
// ============ 布局 ============
|
||
if (isMobile) {
|
||
return (
|
||
<div className="page-content">
|
||
<Card bodyStyle={{ padding: 12 }}>
|
||
{activeConv ? chatWindow : conversationList}
|
||
</Card>
|
||
|
||
{createModal}
|
||
{membersModal}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="page-content">
|
||
<Card bodyStyle={{ padding: 0 }}>
|
||
<div className="messages-layout">
|
||
<div className="messages-list">{conversationList}</div>
|
||
<div className="messages-chat">{chatWindow}</div>
|
||
</div>
|
||
</Card>
|
||
|
||
{createModal}
|
||
{membersModal}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Messages
|