优化订单交接和结账界面

frontend/src/features/chats/views/ChatView.vue

@@ -2,7 +2,7 @@
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { ArrowLeft, Close, Loading, Picture } from '@element-plus/icons-vue'
+import { ArrowLeft, Close, DocumentChecked, Loading, Picture } from '@element-plus/icons-vue'
 import {
   fetchChat,
   fetchChatMessages,
@@ -33,6 +33,9 @@ const fileInputRef = ref<HTMLInputElement | null>(null)
 
 const conversationID = computed(() => Number(route.params.id || 0))
 const canSend = computed(() => content.value.trim() !== '' || attachments.value.length > 0)
+const activeOrderId = computed(
+  () => conversation.value?.order_id || conversation.value?.latest_order_id || null
+)
 const memberText = computed(() => {
   const participants = conversation.value?.participants || []
   if (participants.length === 0)
@@ -252,6 +255,11 @@ function handleKeydown(e: KeyboardEvent) {
     handleSend()
   }
 }
+
+function goOrderHandoff() {
+  if (!activeOrderId.value) return
+  router.push({ path: `/orders/${activeOrderId.value}`, query: { focus: 'handoff' } })
+}
 </script>
 
 <template>
@@ -267,14 +275,11 @@ function handleKeydown(e: KeyboardEvent) {
           <h2>{{ conversation?.title || '客服会话' }}</h2>
           <p>{{ memberText }}</p>
         </div>
-        <el-button
-          v-if="conversation?.order_id"
-          type="primary"
-          link
-          @click="router.push(`/orders/${conversation.order_id}`)"
-        >
-          查看订单
-        </el-button>
+        <div v-if="activeOrderId" class="chat-header-actions">
+          <el-button type="primary" :icon="DocumentChecked" @click="goOrderHandoff">
+            订单交接
+          </el-button>
+        </div>
       </div>
 
       <!-- Messages -->
@@ -450,6 +455,14 @@ function handleKeydown(e: KeyboardEvent) {
   font-size: 12px;
 }
 
+.chat-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
 .message-list {
   flex: 1;
   min-height: 0;