+ {items.map(item => (
+
+ )}
+
+
+ )
+ }
+
+ if (!token) {
+ return (
+
+
+ 登录后进入会话
+
+ 订单群聊与客服会话只对当前账号开放。
+
+
+
+
+ )
+ }
+
+ const title = conversation.data?.title || '交易会话'
+ const subtitle =
+ conversation.data?.type === 'general_support'
+ ? '平台客服'
+ : conversation.data?.type === 'order_group'
+ ? `订单 ${conversation.data.latest_order_no || ''}`.trim()
+ : conversation.data?.type === 'listing_group'
+ ? '商品咨询群'
+ : '交易会话'
+
+ let previousDate = ''
+
+ return (
+
+
+
+
+ )
+}
diff --git a/frontend/src/features/messages/MessagesPage.tsx b/frontend/src/features/messages/MessagesPage.tsx
new file mode 100644
index 0000000..93801b2
--- /dev/null
+++ b/frontend/src/features/messages/MessagesPage.tsx
@@ -0,0 +1,200 @@
+import { useState } from 'react'
+import {
+ Alert,
+ Avatar,
+ Badge,
+ Button,
+ Card,
+ Empty,
+ Skeleton,
+ Space,
+ Tag,
+ Typography,
+} from 'antd'
+import { ArrowRightOutlined, CustomerServiceOutlined, MessageOutlined } from '@ant-design/icons'
+import { Link, useNavigate } from 'react-router-dom'
+
+import { BrandLogo } from '@/components/BrandLogo'
+import { ensureSupportConversation, useConversations } from '@/features/messages/api'
+import type { ChatConversation } from '@/features/messages/types'
+import { useSessionStore } from '@/stores/session'
+import { formatRelativeTime } from '@/shared/utils/format'
+
+function conversationMeta(type: string) {
+ if (type === 'general_support') return { label: '平台客服', color: 'gold' }
+ if (type === 'order_group') return { label: '订单群聊', color: 'green' }
+ if (type === 'listing_group') return { label: '商品咨询', color: 'blue' }
+ return { label: '交易会话', color: 'default' }
+}
+
+function ConversationRow({ item }: { item: ChatConversation }) {
+ const meta = conversationMeta(item.type)
+ return (
+
+
+ } onClick={() => navigate('/messages')}>
+ 返回消息中心
+
+
+ 消息 / {title}
+
+
+
+
+
+
+
+ {title}
+
+
+ {subtitle}
+
+ {conversation.data?.latest_order_no && conversation.data?.type !== 'order_group' ? (
+ 订单 {conversation.data.latest_order_no}
+ ) : null}
+
+
+ {conversation.data?.type !== 'general_support' ? (
+ }
+ loading={openingSupport}
+ onClick={() => void openSupport()}
+ >
+ 需要客服介入
+
+ ) : null}
+
+ {messagesQuery.hasNextPage ? (
+ void messagesQuery.refetch()}>
+ 重试
+
+ }
+ />
+ ) : messages.length === 0 ? (
+
+
+ {pendingImages.length > 0 ? (
+
+
+
+ ) : null}
+
+ {messagesQuery.isPending ? (
+ 还没有消息，先打个招呼吧。
+ ) : (
+ messages.map(message => {
+ const label = dateLabel(message.created_at)
+ const showDate = label !== previousDate
+ previousDate = label
+ return (
+
+ {showDate ?
+ )
+ })
+ )}
+ {label}
: null}
+
+ {pendingImages.map(image => (
+
+ ) : null}
+
+
+ 
+
+
+ ))}
+ {pendingImages.length}/9
+
+ {
+ void uploadOne(file)
+ return false
+ }}
+ >
+ } loading={uploading} disabled={pendingImages.length >= 9}>
+ 图片
+
+
+ setContent(event.target.value)}
+ onPressEnter={event => {
+ if (!event.shiftKey) {
+ event.preventDefault()
+ void onSend()
+ }
+ }}
+ />
+ }
+ loading={sending}
+ disabled={(!content.trim() && pendingImages.length === 0) || uploading}
+ onClick={() => void onSend()}
+ >
+ 发送
+
+
+
+
+
+ {item.title || '未命名会话'}
+ {formatRelativeTime(item.last_message_at)}
+
+
+
+ {meta.label}
+
+ {item.latest_order_no ? 订单 {item.latest_order_no} : null}
+
+ {item.last_message_preview || '还没有消息，进入会话开始沟通。'}
+
+ {item.unread_count > 0 ?
+
+ )
+}
+
+export function MessagesPage() {
+ const navigate = useNavigate()
+ const token = useSessionStore(state => state.token)
+ const hydrated = useSessionStore(state => state.hydrated)
+ const [openingSupport, setOpeningSupport] = useState(false)
+ const chats = useConversations(Boolean(token))
+ const items = chats.data?.pages.flatMap(page => page.items) ?? []
+ const unreadTotal = items.reduce((sum, item) => sum + item.unread_count, 0)
+
+ const openSupport = async () => {
+ setOpeningSupport(true)
+ try {
+ const conversation = await ensureSupportConversation()
+ navigate(`/messages/${conversation.id}`)
+ } catch {
+ // 全局响应拦截已提示，这里保留按钮可重试状态。
+ } finally {
+ setOpeningSupport(false)
+ }
+ }
+
+ if (!hydrated) {
+ return (
+
+
+ )
+ }
+
+ if (!token) {
+ return (
+
+
+ 登录后查看消息
+
+ 订单群聊、客服回复与系统通知只对当前账号开放。
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ {unreadTotal > 0 ? {unreadTotal} 条未读 : 全部已读 }
+ }
+ loading={openingSupport}
+ onClick={() => void openSupport()}
+ >
+ 联系平台客服
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/features/messages/api.ts b/frontend/src/features/messages/api.ts
index 72050d7..1e46c8e 100644
--- a/frontend/src/features/messages/api.ts
+++ b/frontend/src/features/messages/api.ts
@@ -88,13 +88,24 @@ export function useChatMessages(id?: string, enabled = true) {
})
}
-export async function sendChatMessage(id: number | string, content: string) {
+export async function sendChatMessage(
+ id: number | string,
+ content: string,
+ attachmentURLs: string[] = []
+) {
const { data } = await apiClient.post
+ MESSAGES
+
+ 消息中心
+
+
+ 订单群聊会随下单自动建立，交接、结账与申诉都建议在群内留痕。
+
+
+
+
+ {items.length} 个 : null}
+ className="pc-messages-card"
+ >
+ {chats.isPending ? (
+ void chats.refetch()}>
+ 重试
+
+ }
+ />
+ ) : items.length === 0 ? (
+
+
+
+ ) : (
+
+
+
+
+
+
+ {pendingImages.map(image => (
+
+ ) : null}
+
+
+
+
+ ))}
+ {pendingImages.length}/9
+
+ void onPickImages(event.target.files)}
+ />
+
0 ? '补充图片说明…' : '输入消息…'}
onChange={setContent}
onEnterPress={() => void onSend()}
/>