feat(usage): 请求详情页面添加对话视图功能

2026-10-08 10:27:46 +08:00 · 2026-01-15 18:37:59 +08:00
parent dd387735d4
commit 38607332b9
3 changed files with 1029 additions and 4 deletions
@@ -362,14 +362,41 @@
                            class="h-4 mx-1"
                          />
                        </template>
+
+                        <!-- 请求体/响应体专用：JSON/对话 视图切换（单按钮） -->
+                        <template v-if="supportsConversationView">
+                          <button
+                            :title="contentViewMode === 'json' ? '切换到对话视图' : '切换到 JSON 视图'"
+                            class="p-1.5 rounded transition-colors"
+                            :class="hasValidConversation || contentViewMode === 'conversation'
+                              ? 'text-muted-foreground hover:bg-muted'
+                              : 'text-muted-foreground/40 cursor-not-allowed'"
+                            :disabled="!hasValidConversation && contentViewMode === 'json'"
+                            @click="toggleContentView"
+                          >
+                            <Code2
+                              v-if="contentViewMode === 'conversation'"
+                              class="w-4 h-4"
+                            />
+                            <MessageSquareText
+                              v-else
+                              class="w-4 h-4"
+                            />
+                          </button>
+                          <Separator
+                            orientation="vertical"
+                            class="h-4 mx-1"
+                          />
+                        </template>
+
                        <!-- 展开/收缩 -->
                        <button
                          :title="currentExpandDepth === 0 ? '展开全部' : '收缩全部'"
                          class="p-1.5 rounded transition-colors"
-                          :class="viewMode === 'compare'
+                          :class="viewMode === 'compare' || contentViewMode === 'conversation'
                            ? 'text-muted-foreground/40 cursor-not-allowed'
                            : 'text-muted-foreground hover:bg-muted'"
-                          :disabled="viewMode === 'compare'"
+                          :disabled="viewMode === 'compare' || contentViewMode === 'conversation'"
                          @click="currentExpandDepth === 0 ? expandAll() : collapseAll()"
                        >
                          <Maximize2
@@ -389,7 +416,7 @@
                            ? 'text-muted-foreground/40 cursor-not-allowed'
                            : 'text-muted-foreground hover:bg-muted'"
                          :disabled="viewMode === 'compare'"
-                          @click="copyJsonToClipboard(activeTab)"
+                          @click="copyContent(activeTab)"
                        >
                          <Check
                            v-if="copiedStates[activeTab]"
@@ -420,7 +447,15 @@
                    </TabsContent>

                    <TabsContent value="request-body">
+                      <!-- 对话视图 -->
+                      <ConversationView
+                        v-if="contentViewMode === 'conversation'"
+                        :conversation="requestConversation"
+                        empty-message="无请求体信息"
+                      />
+                      <!-- JSON 视图 -->
                      <JsonContent
+                        v-else
                        :data="detail.request_body"
                        :view-mode="viewMode"
                        :expand-depth="currentExpandDepth"
@@ -440,7 +475,15 @@
                    </TabsContent>

                    <TabsContent value="response-body">
+                      <!-- 对话视图 -->
+                      <ConversationView
+                        v-if="contentViewMode === 'conversation'"
+                        :conversation="responseConversation"
+                        empty-message="无响应体信息"
+                      />
+                      <!-- JSON 视图 -->
                      <JsonContent
+                        v-else
                        :data="detail.response_body"
                        :view-mode="viewMode"
                        :expand-depth="currentExpandDepth"
@@ -480,15 +523,26 @@ import Separator from '@/components/ui/separator.vue'
 import Skeleton from '@/components/ui/skeleton.vue'
 import Tabs from '@/components/ui/tabs.vue'
 import TabsContent from '@/components/ui/tabs-content.vue'
-import { Copy, Check, Maximize2, Minimize2, Columns2, RefreshCw, X, Monitor, Server } from 'lucide-vue-next'
+import { Copy, Check, Maximize2, Minimize2, Columns2, RefreshCw, X, Monitor, Server, MessageSquareText, Code2 } from 'lucide-vue-next'
 import { dashboardApi, type RequestDetail } from '@/api/dashboard'
 import { log } from '@/utils/logger'

 // 子组件
 import RequestHeadersContent from './RequestDetailDrawer/RequestHeadersContent.vue'
 import JsonContent from './RequestDetailDrawer/JsonContent.vue'
+import ConversationView from './RequestDetailDrawer/ConversationView.vue'
 import HorizontalRequestTimeline from './HorizontalRequestTimeline.vue'

+// 消息提取工具
+import {
+  detectApiFormat,
+  extractRequestMessages,
+  extractResponseMessages,
+  formatConversationAsText,
+  type ExtractedConversation,
+  type ApiFormat,
+} from '../utils/messageExtractor'
+
 const props = defineProps<{
  isOpen: boolean
  requestId: string | null
@@ -506,6 +560,7 @@ const copiedStates = ref<Record<string, boolean>>({})
 const viewMode = ref<'compare' | 'formatted' | 'raw'>('compare')
 const currentExpandDepth = ref(1)
 const dataSource = ref<'client' | 'provider'>('client')
+const contentViewMode = ref<'json' | 'conversation'>('json')
 const { copyToClipboard } = useClipboard()
 const historicalPricing = ref<{
  input_price: string
@@ -520,6 +575,10 @@ watch(activeTab, (newTab) => {
  if (newTab !== 'request-headers' && viewMode.value === 'compare') {
    viewMode.value = 'formatted'
  }
+  // 切换到不支持对话视图的 Tab 时，重置为 JSON 视图
+  if (!['request-body', 'response-body'].includes(newTab)) {
+    contentViewMode.value = 'json'
+  }
 })

 // 检测暗色模式
@@ -541,6 +600,50 @@ const currentHeaderData = computed(() => {
    : detail.value.provider_request_headers
 })

+// 检测到的 API 格式
+const detectedApiFormat = computed<ApiFormat>(() => {
+  if (!detail.value) return 'unknown'
+  return detectApiFormat(
+    detail.value.request_body,
+    detail.value.response_body,
+    detail.value.api_format
+  )
+})
+
+// 请求体对话提取结果
+const requestConversation = computed<ExtractedConversation>(() => {
+  if (!detail.value?.request_body) {
+    return { messages: [], isStream: false }
+  }
+  return extractRequestMessages(detail.value.request_body, detectedApiFormat.value)
+})
+
+// 响应体对话提取结果
+const responseConversation = computed<ExtractedConversation>(() => {
+  if (!detail.value?.response_body) {
+    return { messages: [], isStream: false }
+  }
+  return extractResponseMessages(detail.value.response_body, detectedApiFormat.value)
+})
+
+// 当前 Tab 是否支持对话视图
+const supportsConversationView = computed(() => {
+  return ['request-body', 'response-body'].includes(activeTab.value)
+})
+
+// 当前对话数据是否有效（用于禁用按钮）
+const hasValidConversation = computed(() => {
+  if (activeTab.value === 'request-body') {
+    return !requestConversation.value.parseError &&
+      (requestConversation.value.system || requestConversation.value.messages.length > 0)
+  }
+  if (activeTab.value === 'response-body') {
+    return !responseConversation.value.parseError &&
+      responseConversation.value.messages.length > 0
+  }
+  return false
+})
+
 // 价格来源标签
 // tiered_pricing.source 表示定价来源: 'provider' 或 'global'
 const priceSourceLabel = computed(() => {
@@ -813,6 +916,67 @@ function copyJsonToClipboard(tabName: string) {
  }
 }

+// 复制内容（支持 JSON 和对话两种模式）
+function copyContent(tabName: string) {
+  if (!detail.value) return
+  if (viewMode.value === 'compare') return
+
+  let textToCopy = ''
+
+  // 对话视图模式：复制格式化的对话文本
+  if (contentViewMode.value === 'conversation') {
+    if (tabName === 'request-body') {
+      textToCopy = formatConversationAsText(requestConversation.value)
+    } else if (tabName === 'response-body') {
+      textToCopy = formatConversationAsText(responseConversation.value)
+    }
+  } else {
+    // JSON 视图模式：复制原始 JSON
+    let data: any = null
+    switch (tabName) {
+      case 'request-headers':
+        data = dataSource.value === 'provider'
+          ? detail.value.provider_request_headers
+          : detail.value.request_headers
+        break
+      case 'request-body':
+        data = detail.value.request_body
+        break
+      case 'response-headers':
+        data = actualResponseHeaders.value
+        break
+      case 'response-body':
+        data = detail.value.response_body
+        break
+      case 'metadata':
+        data = detail.value.metadata
+        break
+    }
+    if (data) {
+      textToCopy = JSON.stringify(data, null, 2)
+    }
+  }
+
+  if (textToCopy) {
+    copyToClipboard(textToCopy, false)
+    copiedStates.value[tabName] = true
+    setTimeout(() => {
+      copiedStates.value[tabName] = false
+    }, 2000)
+  }
+}
+
+// 切换内容视图模式
+function toggleContentView() {
+  if (contentViewMode.value === 'json') {
+    if (hasValidConversation.value) {
+      contentViewMode.value = 'conversation'
+    }
+  } else {
+    contentViewMode.value = 'json'
+  }
+}
+
 function expandAll() {
  currentExpandDepth.value = 999
 }
@@ -0,0 +1,306 @@
+<template>
+  <div class="conversation-view">
+    <!-- 解析错误提示 -->
+    <div
+      v-if="conversation.parseError"
+      class="parse-error"
+    >
+      <AlertCircle class="w-4 h-4" />
+      <span>{{ conversation.parseError }}</span>
+    </div>
+
+    <!-- 空内容提示 -->
+    <div
+      v-else-if="!conversation.system && conversation.messages.length === 0"
+      class="text-sm text-muted-foreground"
+    >
+      {{ emptyMessage }}
+    </div>
+
+    <template v-else>
+      <!-- System Prompt -->
+      <div
+        v-if="conversation.system"
+        class="message-block system"
+      >
+        <div class="message-header">
+          <Settings class="w-3.5 h-3.5" />
+          <span>System</span>
+        </div>
+        <div class="message-content">
+          <pre class="whitespace-pre-wrap">{{ conversation.system }}</pre>
+        </div>
+      </div>
+
+      <!-- 对话消息 -->
+      <div
+        v-for="(msg, index) in conversation.messages"
+        :key="index"
+        class="message-block"
+        :class="[msg.role, msg.type]"
+      >
+        <div class="message-header">
+          <component
+            :is="getRoleIcon(msg.role)"
+            class="w-3.5 h-3.5"
+          />
+          <span>{{ getRoleLabel(msg.role) }}</span>
+          <Badge
+            v-if="msg.type === 'thinking'"
+            variant="secondary"
+            class="ml-2 text-xs"
+          >
+            思考
+          </Badge>
+          <Badge
+            v-if="msg.type === 'tool_use'"
+            variant="outline"
+            class="ml-2 text-xs"
+          >
+            {{ msg.metadata?.toolName || '工具调用' }}
+          </Badge>
+          <Badge
+            v-if="msg.type === 'tool_result'"
+            variant="outline"
+            class="ml-2 text-xs"
+          >
+            工具结果
+          </Badge>
+          <Badge
+            v-if="msg.type === 'image'"
+            variant="secondary"
+            class="ml-2 text-xs"
+          >
+            图片
+          </Badge>
+        </div>
+
+        <div class="message-content">
+          <!-- 思考过程：可折叠 -->
+          <details
+            v-if="msg.type === 'thinking'"
+            class="thinking-details"
+          >
+            <summary class="thinking-summary">
+              <ChevronRight class="w-4 h-4 chevron" />
+              <span class="text-muted-foreground">点击展开思考过程 ({{ msg.content.length }} 字符)</span>
+            </summary>
+            <pre class="thinking-content whitespace-pre-wrap">{{ msg.content }}</pre>
+          </details>
+
+          <!-- 工具调用/结果：代码块样式 -->
+          <pre
+            v-else-if="msg.type === 'tool_use' || msg.type === 'tool_result'"
+            class="tool-content whitespace-pre-wrap"
+          >{{ msg.content }}</pre>
+
+          <!-- 普通文本 -->
+          <pre
+            v-else
+            class="whitespace-pre-wrap"
+          >{{ msg.content }}</pre>
+        </div>
+      </div>
+
+      <!-- 流式响应标记 -->
+      <div
+        v-if="conversation.isStream"
+        class="stream-indicator"
+      >
+        <Zap class="w-3 h-3" />
+        <span>流式响应</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { User, Bot, Settings, Wrench, AlertCircle, ChevronRight, Zap } from 'lucide-vue-next'
+import Badge from '@/components/ui/badge.vue'
+import type { ExtractedConversation, MessageRole } from '../../utils/messageExtractor'
+
+defineProps<{
+  conversation: ExtractedConversation
+  emptyMessage: string
+}>()
+
+const getRoleIcon = (role: MessageRole) => {
+  switch (role) {
+    case 'user':
+      return User
+    case 'assistant':
+      return Bot
+    case 'system':
+      return Settings
+    case 'tool':
+      return Wrench
+    default:
+      return User
+  }
+}
+
+const getRoleLabel = (role: MessageRole) => {
+  switch (role) {
+    case 'user':
+      return 'User'
+    case 'assistant':
+      return 'Assistant'
+    case 'system':
+      return 'System'
+    case 'tool':
+      return 'Tool'
+    default:
+      return role
+  }
+}
+</script>
+
+<style scoped>
+.conversation-view {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 500px;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.parse-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background: hsl(var(--destructive) / 0.1);
+  border: 1px solid hsl(var(--destructive) / 0.3);
+  border-radius: 8px;
+  color: hsl(var(--destructive));
+  font-size: 13px;
+}
+
+.message-block {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.message-content {
+  padding: 0 12px 12px;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.message-content pre {
+  margin: 0;
+  font-family: inherit;
+}
+
+/* User 消息样式 */
+.message-block.user {
+  background: hsl(var(--primary) / 0.08);
+  border: 1px solid hsl(var(--primary) / 0.2);
+}
+
+.message-block.user .message-header {
+  color: hsl(var(--primary));
+}
+
+/* Assistant 消息样式 */
+.message-block.assistant {
+  background: hsl(var(--muted) / 0.5);
+  border: 1px solid hsl(var(--border));
+}
+
+.message-block.assistant .message-header {
+  color: hsl(var(--foreground));
+}
+
+/* System 消息样式 */
+.message-block.system {
+  background: hsl(var(--muted) / 0.3);
+  border: 1px dashed hsl(var(--border));
+}
+
+.message-block.system .message-header {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Tool 消息样式 */
+.message-block.tool {
+  background: hsl(var(--muted) / 0.3);
+  border: 1px solid hsl(var(--border));
+}
+
+/* 思考过程样式 */
+.message-block.thinking {
+  background: hsl(var(--muted) / 0.3);
+  border: 1px solid hsl(var(--border));
+}
+
+.thinking-details {
+  cursor: pointer;
+}
+
+.thinking-summary {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 0;
+  list-style: none;
+  user-select: none;
+}
+
+.thinking-summary::-webkit-details-marker {
+  display: none;
+}
+
+.thinking-summary .chevron {
+  transition: transform 0.2s;
+}
+
+.thinking-details[open] .chevron {
+  transform: rotate(90deg);
+}
+
+.thinking-content {
+  margin-top: 8px;
+  padding: 12px;
+  background: hsl(var(--muted) / 0.5);
+  border-radius: 6px;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 12px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+/* 工具调用样式 */
+.tool-content {
+  padding: 12px;
+  background: hsl(var(--muted) / 0.5);
+  border-radius: 6px;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 12px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+/* 流式响应标记 */
+.stream-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 4px;
+  width: fit-content;
+}
+</style>