227 lines
9.6 KiB
TypeScript
227 lines
9.6 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { Input, Spin, message } from 'antd'
|
|
import { SearchOutlined, UserOutlined, StarFilled } from '@ant-design/icons'
|
|
import { useAuth } from '@/stores/auth'
|
|
import { getSessions, getSession, type Session as SessionType } from '@/services/api'
|
|
|
|
interface SessionDetail {
|
|
id: number
|
|
customerName: string
|
|
phone: string
|
|
email: string
|
|
source: string
|
|
tags: string[]
|
|
status: string
|
|
conversationCount: number
|
|
satisfaction: number
|
|
note: string
|
|
messages: { sender: string; content: string; time: string }[]
|
|
}
|
|
|
|
const priorityColors: Record<string, string> = { urgent: '#dc2626', normal: '#d97706', waiting: '#d97706' }
|
|
const priorityLabels: Record<string, string> = { urgent: '紧急', waiting: '等待中', active: '进行中', normal: '进行中' }
|
|
|
|
const Dashboard = () => {
|
|
const { user } = useAuth()
|
|
const [sessions, setSessions] = useState<SessionType[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [selectedId, setSelectedId] = useState<number | null>(null)
|
|
const [detail, setDetail] = useState<SessionDetail | null>(null)
|
|
const [detailLoading, setDetailLoading] = useState(false)
|
|
const [messageInput, setMessageInput] = useState('')
|
|
|
|
useEffect(() => {
|
|
loadSessions()
|
|
}, [])
|
|
|
|
const loadSessions = async () => {
|
|
try {
|
|
setLoading(true)
|
|
const res = await getSessions()
|
|
setSessions(res.list)
|
|
if (res.list.length > 0 && !selectedId) {
|
|
setSelectedId(res.list[0].id)
|
|
}
|
|
} catch {
|
|
// fallback to empty
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (selectedId) {
|
|
loadDetail(selectedId)
|
|
}
|
|
}, [selectedId])
|
|
|
|
const loadDetail = async (id: number) => {
|
|
setDetailLoading(true)
|
|
try {
|
|
const res = await getSession(id)
|
|
const { session } = res.data
|
|
setDetail({
|
|
id: session.id,
|
|
customerName: `客户${session.customer_id}`,
|
|
phone: '获取中...',
|
|
email: '',
|
|
source: '网页',
|
|
tags: session.priority === 'urgent' ? ['VIP'] : [],
|
|
status: session.status,
|
|
conversationCount: 0,
|
|
satisfaction: session.satisfaction_score || 0,
|
|
note: '',
|
|
messages: (res.data as any).messages?.map((m: any) => ({
|
|
sender: m.sender_type === 'agent' ? `客服(${m.sender_id})` : '客户',
|
|
content: m.content,
|
|
time: new Date(m.sent_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
|
|
})) || [],
|
|
})
|
|
} catch {
|
|
message.error('加载会话详情失败')
|
|
} finally {
|
|
setDetailLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleSend = () => {
|
|
if (!messageInput.trim()) return
|
|
setMessageInput('')
|
|
message.info('WebSocket 消息发送（待连接）')
|
|
}
|
|
|
|
if (loading) {
|
|
return <div className="h-full flex items-center justify-center"><Spin size="large" /></div>
|
|
}
|
|
|
|
return (
|
|
<div className="h-full flex">
|
|
{/* 左侧：会话列表 */}
|
|
<div className="w-[300px] flex-shrink-0 border-r border-neutral-200 bg-white flex flex-col">
|
|
<div className="px-3 py-3 border-b border-neutral-100">
|
|
<div className="text-sm font-medium text-neutral-800">{user?.nickname || '客服'}</div>
|
|
<div className="text-xs text-neutral-400">在线</div>
|
|
</div>
|
|
<div className="p-3 border-b border-neutral-100">
|
|
<Input prefix={<SearchOutlined />} placeholder="搜索会话..." variant="borderless" size="small" />
|
|
</div>
|
|
<div className="flex-1 overflow-auto">
|
|
{sessions.length === 0 ? (
|
|
<div className="flex items-center justify-center h-full text-neutral-400 text-sm">暂无会话</div>
|
|
) : (
|
|
sessions.map(s => (
|
|
<div
|
|
key={s.id}
|
|
className={`px-3 py-2.5 cursor-pointer border-b border-neutral-50 hover:bg-neutral-50 transition-colors ${selectedId === s.id ? 'bg-blue-50' : ''}`}
|
|
onClick={() => setSelectedId(s.id)}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="inline-block w-2 h-2 rounded-full" style={{ backgroundColor: priorityColors[s.priority] || '#2563eb' }} />
|
|
<span className="text-sm font-medium text-neutral-800">客户{s.customer_id}</span>
|
|
</div>
|
|
<span className="text-xs text-neutral-300">{new Date(s.created_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}</span>
|
|
</div>
|
|
<p className="text-xs text-neutral-400 mt-1 truncate pl-4">
|
|
<TagBadge status={s.status} priority={s.priority} />
|
|
</p>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 中间：聊天区 */}
|
|
<div className="flex-1 flex flex-col min-w-0 bg-white">
|
|
{detail ? (
|
|
<>
|
|
<div className="h-12 px-4 flex items-center justify-between border-b border-neutral-100 flex-shrink-0">
|
|
<span className="text-sm font-medium text-neutral-800">{detail.customerName}</span>
|
|
<div className="flex gap-2">
|
|
<span className="text-xs text-neutral-400 cursor-pointer hover:text-neutral-600">转接</span>
|
|
<span className="text-xs text-neutral-400 cursor-pointer hover:text-red-500">结束</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 overflow-auto p-4 flex flex-col gap-3">
|
|
{detailLoading ? (
|
|
<div className="flex-1 flex items-center justify-center"><Spin /></div>
|
|
) : detail.messages.length === 0 ? (
|
|
<div className="flex-1 flex items-center justify-center text-neutral-400 text-sm">暂无消息</div>
|
|
) : (
|
|
detail.messages.map((msg, i) => (
|
|
<div key={i} className={`flex ${msg.sender.startsWith('客服') ? 'justify-start' : 'justify-end'}`}>
|
|
<div className={`max-w-[70%] rounded-lg px-3 py-2 text-sm ${msg.sender.startsWith('客服') ? 'bg-neutral-100 text-neutral-700' : 'bg-blue-500 text-white'}`}>
|
|
{msg.content}
|
|
<div className={`text-xs mt-1 ${msg.sender.startsWith('客服') ? 'text-neutral-400' : 'text-white/60'}`}>{msg.time}</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
<div className="p-3 border-t border-neutral-100 flex-shrink-0">
|
|
<div className="flex items-center gap-2 bg-neutral-50 rounded-lg px-3 py-2">
|
|
<input
|
|
className="flex-1 bg-transparent outline-none text-sm text-neutral-700 placeholder:text-neutral-400"
|
|
placeholder="输入消息... (Enter 发送)"
|
|
value={messageInput}
|
|
onChange={e => setMessageInput(e.target.value)}
|
|
onKeyDown={e => { if (e.key === 'Enter') handleSend() }}
|
|
/>
|
|
<span className="text-neutral-300 cursor-pointer hover:text-neutral-500">😊</span>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex-1 flex items-center justify-center text-neutral-400">选择一个会话</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 右侧：客户信息面板 */}
|
|
<div className="w-[300px] flex-shrink-0 border-l border-neutral-200 bg-white overflow-auto">
|
|
{detail ? (
|
|
<div className="p-4 space-y-4">
|
|
<div className="flex items-center gap-3 pb-3 border-b border-neutral-100">
|
|
<div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
|
|
<UserOutlined className="text-blue-500" />
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-medium text-neutral-800">{detail.customerName}</div>
|
|
<div className="text-xs text-neutral-400">ID: {detail.id}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-neutral-400 mb-1.5">标签</div>
|
|
<div className="flex flex-wrap gap-1">
|
|
{detail.tags.map(t => <span key={t} className="text-xs px-2 py-0.5 rounded bg-blue-50 text-blue-600">{t}</span>)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-neutral-400 mb-1.5">统计数据</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="bg-neutral-50 rounded p-2 text-center">
|
|
<div className="text-lg font-semibold text-neutral-800">{detail.conversationCount}</div>
|
|
<div className="text-xs text-neutral-400">对话次数</div>
|
|
</div>
|
|
<div className="bg-neutral-50 rounded p-2 text-center">
|
|
<div className="text-lg font-semibold text-green-600 flex items-center justify-center gap-0.5">
|
|
{detail.satisfaction > 0 ? detail.satisfaction : '-'} {detail.satisfaction > 0 && <StarFilled className="text-xs" />}
|
|
</div>
|
|
<div className="text-xs text-neutral-400">满意度</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TagBadge({ status, priority }: { status: string; priority: string }) {
|
|
const color = status === 'ended' ? '#16a34a' : priorityColors[priority] || '#2563eb'
|
|
const text = status === 'ended' ? '已结束' : status === 'waiting' ? '等待中' : priorityLabels[priority] || status
|
|
return <span className="text-xs px-1.5 py-0.5 rounded" style={{ color, backgroundColor: `${color}15` }}>{text}</span>
|
|
}
|
|
|
|
export default Dashboard
|