优化客服群聊订单信息展示

frontend/src/features/admin/api/adminPayments.ts

@@ -36,15 +36,18 @@ export interface AdminPaymentQuery {
   provider?: string
   page?: number
   page_size?: number
+  silent?: boolean
 }
 
 export async function fetchAdminPayments(query: AdminPaymentQuery = {}) {
   const params = Object.fromEntries(
-    Object.entries(query).filter(([, value]) => value !== '' && value !== undefined)
+    Object.entries(query).filter(
+      ([key, value]) => key !== 'silent' && value !== '' && value !== undefined
+    )
   )
   const { data } = await apiClient.get<ApiResponse<PaginatedResult<AdminPayment>>>(
     '/admin/payments',
-    { params }
+    { params, silent: query.silent }
   )
   const result = data.data
   return {

frontend/src/features/admin/views/AdminChatsView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Close, Picture } from '@element-plus/icons-vue'
 import {
@@ -14,21 +15,37 @@ import {
   type ChatMessage,
   type QuickReply,
 } from '@/features/chats'
+import {
+  fetchAdminLatestOrderByListing,
+  fetchAdminHandoffRecords,
+  fetchAdminOrder,
+  type HandoffRecord,
+  type Order,
+} from '@/features/orders'
+import { fetchAdminPayments, type AdminPayment } from '@/features/admin/api/adminPayments'
 import { uploadAdminFile } from '@/shared/api/files'
 import ChatAttachmentImage from '@/components/ChatAttachmentImage.vue'
 import { useChatSSE, type ChatEvent } from '@/features/chats/composables/useChatSSE'
 import { useDesktopNotification } from '@/features/chats/composables/useDesktopNotification'
 import NotificationSettings from '@/features/chats/components/NotificationSettings.vue'
 import { adminPath } from '@/shared/utils/adminPath'
-import { formatDateMinute } from '@/shared/utils/time'
+import { centToYuan, formatCentWithSymbol, formatMoney } from '@/shared/utils/money'
+import { formatDateMinute, formatDateTime } from '@/shared/utils/time'
+import { formatListingNo } from '@/shared/utils/listingDisplay'
+import { handoffStatusLabel, orderStatusLabel } from '@/shared/utils/statusLabels'
 import TransferDialog from '../components/TransferDialog.vue'
 import QuickReplyDialog from '../components/QuickReplyDialog.vue'
 
 const currentAdminId = Number(localStorage.getItem('admin_id') || 0)
+const route = useRoute()
 
 const conversations = ref<ChatConversation[]>([])
 const active = ref<ChatConversation | null>(null)
 const messages = ref<ChatMessage[]>([])
+const orderLoading = ref(false)
+const activeOrder = ref<Order | null>(null)
+const activeHandoffRecords = ref<HandoffRecord[]>([])
+const activePaymentRecords = ref<AdminPayment[]>([])
 const loading = ref(false)
 const messageLoading = ref(false)
 const sending = ref(false)
@@ -55,6 +72,27 @@ const activeMembers = computed(() => {
     .join(' / ')
 })
 const canSend = computed(() => content.value.trim() !== '' || attachments.value.length > 0)
+const activeListingCode = computed(() =>
+  activeOrder.value
+    ? formatListingNo(activeOrder.value.listing_no, activeOrder.value.listing_id)
+    : '-'
+)
+const latestHandoffRecord = computed(() => activeHandoffRecords.value[0])
+const latestPaymentRecord = computed(() => activePaymentRecords.value[0])
+const hasOrderContext = computed(() => Boolean(active.value?.order_id || active.value?.listing_id))
+const orderDetailLink = computed(() =>
+  activeOrder.value
+    ? {
+        path: adminPath(`orders/${activeOrder.value.id}`),
+        query: {
+          from: 'chat',
+          chat_id: String(active.value?.id || ''),
+          chat_filter: filter.value,
+        },
+      }
+    : ''
+)
+let orderLoadToken = 0
 
 // 桌面通知
 const desktopNotification = useDesktopNotification('admin')
@@ -125,6 +163,10 @@ onEvent(handleSSEEvent)
 onMounted(async () => {
   // 静默请求通知权限（用户交互后才会弹窗）
   desktopNotification.requestPermissionSilently()
+  const routeFilter = firstQueryValue(route.query.chat_filter)
+  if (['all', 'mine', 'unassigned'].includes(routeFilter)) {
+    filter.value = routeFilter as typeof filter.value
+  }
   await Promise.all([loadConversations(), loadQuickReplies()])
 })
 
@@ -134,8 +176,13 @@ async function loadConversations(showLoading = true) {
     const res = await fetchAdminChats(1, 100, filter.value)
     conversations.value = res.items
     const first = conversations.value[0]
-    if (!active.value && first) {
-      await openConversation(first)
+    if (!active.value) {
+      const routeChatID = Number(firstQueryValue(route.query.chat_id) || 0)
+      if (routeChatID) {
+        await openConversationById(routeChatID, false)
+      } else if (first) {
+        await openConversationById(first.id, false)
+      }
     }
   } catch {
     ElMessage.error('会话加载失败')
@@ -153,12 +200,18 @@ async function loadQuickReplies() {
 }
 
 async function openConversation(item: ChatConversation) {
+  await openConversationById(item.id)
+}
+
+async function openConversationById(id: number, refreshList = true) {
   messageLoading.value = true
   try {
-    active.value = await fetchAdminChat(item.id)
-    await loadMessages(item.id)
-    await markAdminChatRead(item.id)
-    await loadConversations(false)
+    const chat = await fetchAdminChat(id)
+    active.value = chat
+    void loadOrderContext(chat)
+    await loadMessages(id)
+    await markAdminChatRead(id)
+    if (refreshList) await loadConversations(false)
     remarkEditing.value = false
     remarkValue.value = ''
     attachments.value = []
@@ -169,6 +222,43 @@ async function openConversation(item: ChatConversation) {
   }
 }
 
+async function loadOrderContext(chat: ChatConversation) {
+  const token = ++orderLoadToken
+  activeOrder.value = null
+  activeHandoffRecords.value = []
+  activePaymentRecords.value = []
+  if (!chat.order_id && !chat.listing_id) {
+    orderLoading.value = false
+    return
+  }
+  orderLoading.value = true
+  try {
+    const resolvedOrder = chat.order_id
+      ? await fetchAdminOrder(chat.order_id)
+      : await fetchAdminLatestOrderByListing(chat.listing_id as number)
+    if (token !== orderLoadToken) return
+    const handoffRecords = await fetchAdminHandoffRecords(resolvedOrder.id)
+    if (token !== orderLoadToken) return
+    activeOrder.value = resolvedOrder
+    activeHandoffRecords.value = handoffRecords
+    fetchAdminPayments({ order_id: String(resolvedOrder.id), page_size: 5, silent: true })
+      .then(paymentRecords => {
+        if (token === orderLoadToken) activePaymentRecords.value = paymentRecords.items
+      })
+      .catch(() => {
+        if (token === orderLoadToken) activePaymentRecords.value = []
+      })
+  } catch {
+    if (token === orderLoadToken) {
+      activeOrder.value = null
+      activeHandoffRecords.value = []
+      activePaymentRecords.value = []
+    }
+  } finally {
+    if (token === orderLoadToken) orderLoading.value = false
+  }
+}
+
 async function loadMessages(id: number, scroll = true) {
   const res = await fetchAdminChatMessages(id, 1, 100)
   messages.value = res.items
@@ -342,6 +432,61 @@ function getSupportName(item: ChatConversation) {
   const support = item.participants?.find(p => p.role === 'support')
   return support?.display_name || '未分配'
 }
+
+function amountYuan(cent: unknown) {
+  if (cent !== undefined && cent !== null) return centToYuan(Number(cent || 0))
+  return 0
+}
+
+function money(value: unknown) {
+  return formatMoney(Number(value || 0))
+}
+
+function moneyCent(value: number) {
+  return formatCentWithSymbol(value)
+}
+
+function orderRentedAt() {
+  return activeOrder.value?.rented_at
+}
+
+function orderEstimatedEndAt() {
+  if (!activeOrder.value) return undefined
+  if (activeOrder.value.estimated_end_at) return activeOrder.value.estimated_end_at
+  const rentedAt = orderRentedAt()
+  const durationHours = Number(activeOrder.value.estimated_duration_hours || 0)
+  if (!rentedAt || durationHours <= 0) return undefined
+  return new Date(new Date(rentedAt).getTime() + durationHours * 60 * 60 * 1000).toISOString()
+}
+
+function paymentBizTypeLabel(type: string) {
+  const map: Record<string, string> = {
+    order_pay: '订单支付',
+    checkout_refund: '结账退款',
+    arbitration_refund: '仲裁退款',
+    admin_refund: '人工退款',
+    cancel_refund: '取消退款',
+    admin_close_refund: '客服关闭退款',
+  }
+  return map[type] || type
+}
+
+function formatHandoffRecordType(type: string) {
+  const typeMap: Record<string, string> = {
+    owner_handoff: '卖家交接',
+    renter_checkout: '买家结账',
+    owner_counter_checkout: '卖家反驳结账',
+    renter_confirm_checkout: '买家确认结账',
+    owner_accept_checkout: '卖家接受结账',
+    admin_arbitration: '客服仲裁',
+  }
+  return typeMap[type] || type
+}
+
+function firstQueryValue(value: unknown) {
+  if (Array.isArray(value)) return typeof value[0] === 'string' ? value[0] : ''
+  return typeof value === 'string' ? value : ''
+}
 </script>
 
 <template>
@@ -418,44 +563,114 @@ function getSupportName(item: ChatConversation) {
             </div>
             <div class="head-actions">
               <el-button size="small" @click="transferVisible = true">转接</el-button>
-              <RouterLink v-if="active.order_id" :to="adminPath(`orders/${active.order_id}`)">
+              <RouterLink v-if="activeOrder" :to="orderDetailLink">
                 <el-button size="small">查看订单</el-button>
               </RouterLink>
             </div>
           </header>
 
-          <div ref="listRef" class="message-list" v-loading="messageLoading">
-            <div
-              v-for="item in messages"
-              :key="item.id"
-              class="message-row"
-              :class="{
-                self: item.is_self,
-                system: item.sender_type === 'system',
-                admin: item.sender_role === 'admin',
-              }"
-            >
-              <template v-if="item.sender_type === 'system'">
-                <span>{{ item.content }}</span>
-              </template>
-              <template v-else>
-                <small :class="{ 'admin-label': item.sender_role === 'admin' }">
-                  {{ senderLabel(item) }} · {{ formatDateMinute(item.created_at) }}
-                </small>
-                <p v-if="item.content">{{ item.content }}</p>
-                <div v-if="item.attachment_urls.length > 0" class="message-attachments">
-                  <ChatAttachmentImage
-                    v-for="url in item.attachment_urls"
-                    :key="url"
-                    :source="url"
-                    admin
-                  />
-                </div>
-                <small v-if="item.is_self" class="read-status" :class="{ read: item.is_read }">
-                  {{ item.is_read ? '已读' : '未读' }}
-                </small>
-              </template>
+          <div class="message-body" :class="{ 'has-order': hasOrderContext }">
+            <div ref="listRef" class="message-list" v-loading="messageLoading">
+              <div
+                v-for="item in messages"
+                :key="item.id"
+                class="message-row"
+                :class="{
+                  self: item.is_self,
+                  system: item.sender_type === 'system',
+                  admin: item.sender_role === 'admin',
+                }"
+              >
+                <template v-if="item.sender_type === 'system'">
+                  <span>{{ item.content }}</span>
+                </template>
+                <template v-else>
+                  <small :class="{ 'admin-label': item.sender_role === 'admin' }">
+                    {{ senderLabel(item) }} · {{ formatDateMinute(item.created_at) }}
+                  </small>
+                  <p v-if="item.content">{{ item.content }}</p>
+                  <div v-if="item.attachment_urls.length > 0" class="message-attachments">
+                    <ChatAttachmentImage
+                      v-for="url in item.attachment_urls"
+                      :key="url"
+                      :source="url"
+                      admin
+                    />
+                  </div>
+                  <small v-if="item.is_self" class="read-status" :class="{ read: item.is_read }">
+                    {{ item.is_read ? '已读' : '未读' }}
+                  </small>
+                </template>
+              </div>
             </div>
+
+            <aside v-if="hasOrderContext" class="order-side-panel" v-loading="orderLoading">
+              <template v-if="activeOrder">
+                <div class="order-side-head">
+                  <span>{{ activeOrder.order_no }}</span>
+                  <strong>{{ activeListingCode }}</strong>
+                  <p>
+                    {{ activeOrder.title }} · {{ activeOrder.server_region }} /
+                    {{ activeOrder.login_platform }}
+                  </p>
+                </div>
+
+                <div class="order-side-metrics">
+                  <div>
+                    <span>订单状态</span>
+                    <strong>{{ orderStatusLabel(activeOrder.status) }}</strong>
+                  </div>
+                  <div>
+                    <span>交接状态</span>
+                    <strong>{{ handoffStatusLabel(activeOrder.handoff_status) }}</strong>
+                  </div>
+                  <div>
+                    <span>订单金额</span>
+                    <strong>¥{{ money(amountYuan(activeOrder.rent_amount_cent)) }}</strong>
+                  </div>
+                  <div>
+                    <span>押金</span>
+                    <strong>¥{{ money(amountYuan(activeOrder.deposit_amount_cent)) }}</strong>
+                  </div>
+                </div>
+
+                <section class="order-side-section">
+                  <h3>用户信息</h3>
+                  <p>商品编号：{{ activeListingCode }}</p>
+                  <p>租客：{{ activeOrder.renter_phone || activeOrder.renter_id }}</p>
+                  <p>号主：{{ activeOrder.owner_phone || activeOrder.owner_id }}</p>
+                  <p>开始：{{ formatDateTime(orderRentedAt(), '未开始') }}</p>
+                  <p>预计截止：{{ formatDateTime(orderEstimatedEndAt(), '未设置') }}</p>
+                </section>
+
+                <section class="order-side-section">
+                  <h3>支付与退款</h3>
+                  <template v-if="latestPaymentRecord">
+                    <p>
+                      {{ paymentBizTypeLabel(latestPaymentRecord.biz_type) }} ·
+                      {{ moneyCent(latestPaymentRecord.amount_cent) }}
+                    </p>
+                    <p>
+                      {{ latestPaymentRecord.provider || '-' }} ·
+                      {{ latestPaymentRecord.third_order_id }}
+                    </p>
+                    <p>{{ formatDateTime(latestPaymentRecord.created_at) }}</p>
+                  </template>
+                  <p v-else>暂无支付流水</p>
+                </section>
+
+                <section class="order-side-section">
+                  <h3>交接记录</h3>
+                  <template v-if="latestHandoffRecord">
+                    <strong>{{ formatHandoffRecordType(latestHandoffRecord.type) }}</strong>
+                    <p>{{ latestHandoffRecord.content }}</p>
+                    <p>{{ formatDateTime(latestHandoffRecord.created_at) }}</p>
+                  </template>
+                  <p v-else>暂无交接记录</p>
+                </section>
+              </template>
+              <el-empty v-else description="暂无订单信息" />
+            </aside>
           </div>
 
           <footer class="composer">
@@ -714,6 +929,17 @@ function getSupportName(item: ChatConversation) {
   text-decoration: none;
 }
 
+.message-body {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  background: #f3f6fa;
+}
+
+.message-body.has-order {
+  grid-template-columns: minmax(0, 1fr) minmax(330px, 38%);
+}
+
 .message-list {
   min-height: 0;
   overflow-y: auto;
@@ -721,6 +947,99 @@ function getSupportName(item: ChatConversation) {
   background: #f3f6fa;
 }
 
+.order-side-panel {
+  min-width: 0;
+  overflow-y: auto;
+  padding: 16px;
+  border-left: 1px solid #e5e7eb;
+  background: #f8fafc;
+}
+
+.order-side-head,
+.order-side-section {
+  padding: 14px;
+  border: 1px solid #edf2f7;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.03);
+}
+
+.order-side-head {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.order-side-head span {
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.order-side-head strong {
+  color: #071947;
+  font-size: 18px;
+}
+
+.order-side-head p,
+.order-side-section p {
+  margin: 0;
+  color: #7c8aaa;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.order-side-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.order-side-metrics div {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid #edf2f7;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.order-side-metrics span {
+  color: #8a94a6;
+  font-size: 12px;
+}
+
+.order-side-metrics strong {
+  overflow: hidden;
+  color: #071947;
+  font-size: 16px;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.order-side-section {
+  display: grid;
+  gap: 8px;
+}
+
+.order-side-section + .order-side-section {
+  margin-top: 12px;
+}
+
+.order-side-section h3 {
+  margin: 0;
+  color: #071947;
+  font-size: 15px;
+}
+
+.order-side-section strong {
+  color: #071947;
+  font-size: 13px;
+}
+
 .message-row {
   max-width: 70%;
   margin-bottom: 14px;

frontend/src/features/admin/views/AdminOrderDetailView.vue

@@ -35,6 +35,26 @@ const refundStatus = ref<RefundStatus | null>(null)
 const listingCode = computed(() =>
   order.value ? formatListingNo(order.value.listing_no, order.value.listing_id) : '-'
 )
+const returnTarget = computed(() => {
+  const from = firstQueryValue(route.query.from)
+  const chatID = firstQueryValue(route.query.chat_id)
+  const chatFilter = firstQueryValue(route.query.chat_filter)
+  if (from === 'chat' && chatID) {
+    return {
+      path: adminPath('chats'),
+      query: {
+        chat_id: chatID,
+        ...(chatFilter ? { chat_filter: chatFilter } : {}),
+      },
+    }
+  }
+  return adminPath('orders')
+})
+const returnLabel = computed(() =>
+  firstQueryValue(route.query.from) === 'chat' && firstQueryValue(route.query.chat_id)
+    ? '返回会话'
+    : '返回列表'
+)
 const refunding = ref(false)
 
 const snapshotText = computed(() => JSON.stringify(order.value?.account_snapshot || {}, null, 2))
@@ -184,6 +204,11 @@ function moneyCent(value: number) {
   return formatCentWithSymbol(value)
 }
 
+function firstQueryValue(value: unknown) {
+  if (Array.isArray(value)) return typeof value[0] === 'string' ? value[0] : ''
+  return typeof value === 'string' ? value : ''
+}
+
 function formatHandoffRecordType(type: string) {
   const typeMap: Record<string, string> = {
     owner_handoff: '卖家交接',
@@ -209,8 +234,8 @@ function formatHandoffRecordType(type: string) {
         </p>
       </div>
       <div class="toolbar-actions">
-        <RouterLink :to="adminPath('orders')">
-          <el-button>返回列表</el-button>
+        <RouterLink :to="returnTarget">
+          <el-button>{{ returnLabel }}</el-button>
         </RouterLink>
         <el-button v-if="canResetHandoff" type="success" @click="openAction('reset')"
           >重置交接</el-button

frontend/src/features/chats/api/chats.ts

@@ -17,6 +17,7 @@ export interface ChatParticipant {
 export interface ChatConversation {
   id: number
   order_id: number | null
+  listing_id?: number | null
   type: string
   title: string
   status: string

frontend/src/features/listings/components/ListingCard.vue

@@ -10,6 +10,7 @@ import {
   formatListingCode,
   getListingChips,
   getListingResources,
+  getListingSkinGroups,
   getListingTitle,
   getLoginMethod,
   getServerRegion,
@@ -29,13 +30,13 @@ const props = defineProps<Props>()
 const coverURL = computed(() => props.listing.cover_url || props.listing.screenshot_urls?.[0] || '')
 const dailyLoss = computed(() => getDailyLoss(props.listing))
 const skinNames = computed(() => getSkinNames(props.listing))
+const skinGroups = computed(() => getListingSkinGroups(props.listing))
+const skinSummaryText = computed(() =>
+  skinGroups.value.map(group => `${group.title}: ${group.options.join(' / ')}`).join(' ｜ ')
+)
 const chipItems = computed(() => getListingChips(props.listing))
 const resourceItems = computed(() => getListingResources(props.listing))
 const rentalDuration = computed(() => formatEstimatedRentalDuration(props.listing))
-const visibleSkinNames = computed(() => skinNames.value.slice(0, 4))
-const skinOverflowCount = computed(() =>
-  Math.max(0, skinNames.value.length - visibleSkinNames.value.length)
-)
 const accessTags = computed(() =>
   [getServerRegion(props.listing), getLoginMethod(props.listing)]
     .filter(Boolean)
@@ -113,10 +114,10 @@ function formatStatNumber(value: number) {
         </span>
       </div>
 
-      <div v-if="skinNames.length" class="skin-line" :title="skinNames.join('、')">
+      <div v-if="skinGroups.length" class="skin-line" :title="skinNames.join('、')">
         <span class="line-title">皮肤</span>
-        <span class="skin-list">{{ visibleSkinNames.join(' / ') }}</span>
-        <span v-if="skinOverflowCount" class="skin-count">+{{ skinOverflowCount }}</span>
+        <span class="skin-list">{{ skinSummaryText }}</span>
+        <span class="skin-count">{{ skinNames.length }}款</span>
       </div>
 
       <div v-if="resourceItems.length" class="resource-line">

frontend/src/features/orders/api/orders.ts

@@ -303,6 +303,13 @@ export async function fetchAdminOrder(id: string | number) {
   return data.data
 }
 
+export async function fetchAdminLatestOrderByListing(listingId: string | number) {
+  const { data } = await apiClient.get<ApiResponse<Order>>(
+    `/admin/listing-orders/${listingId}/latest`
+  )
+  return data.data
+}
+
 export async function fetchAdminHandoffRecords(id: string | number) {
   const { data } = await apiClient.get<ApiResponse<{ items: HandoffRecord[] }>>(
     `/admin/orders/${id}/handoff-records`

frontend/src/shared/utils/listingDisplay.ts

@@ -15,6 +15,12 @@ export interface ListingDisplayResource {
   amount: number
 }
 
+export interface ListingDisplaySkinGroup {
+  key: string
+  title: string
+  options: string[]
+}
+
 export function getCoinWan(item: Listing) {
   return Math.round(Number(item.haf_coin_amount || 0) / 10000)
 }
@@ -204,12 +210,29 @@ export function getSkinGroup(item: Listing, groupKey: string) {
   )
 }
 
-export function getSkinNames(item: Listing) {
+export function getListingSkinGroups(item: Listing): ListingDisplaySkinGroup[] {
   const skinGroups = item.asset_summary?.skin_groups
   if (typeof skinGroups !== 'object' || skinGroups === null) return []
-  return Object.values(skinGroups as Record<string, unknown>)
-    .flatMap(group => (Array.isArray(group) ? group : []))
-    .filter((skin): skin is string => typeof skin === 'string')
+  const titles: Record<string, string> = {
+    melee: '近战',
+    operator: '干员',
+    operatorGold: '金皮',
+    operatorRed: '红皮',
+    weapon: '武器',
+  }
+  return Object.entries(skinGroups as Record<string, unknown>)
+    .map(([key, value]) => ({
+      key,
+      title: titles[key] || key,
+      options: Array.isArray(value)
+        ? value.filter((skin): skin is string => typeof skin === 'string' && Boolean(skin.trim()))
+        : [],
+    }))
+    .filter(group => group.options.length)
+}
+
+export function getSkinNames(item: Listing) {
+  return getListingSkinGroups(item).flatMap(group => group.options)
 }
 
 export function assetRegions(item: Listing) {