From 104ecc4691713a60947983e66d7a20d0639fac64 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Tue, 1 Sep 2026 03:16:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8E=9F=E5=A7=8B=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E6=94=B9=E4=B8=BA=E6=A0=87=E7=AD=BE=E9=A1=B5?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=EF=BC=8C=E6=89=8B=E6=9C=BA=E5=8F=8B=E5=A5=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 原始请求/响应不再上下堆叠，改为「请求 / 响应」两个标签页
- 单个内容区（pre 内滚动 + 自动换行），避免手机上需要长距离滚动
- 打开时默认停在有内容的标签（请求优先）；仅有一个数据时只显示对应标签
- 弹窗标题补充模型名与协议信息
---
 frontend/src/views/dashboard/UsageLogs.vue | 43 +++++++++++++++++-----
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/dashboard/UsageLogs.vue b/frontend/src/views/dashboard/UsageLogs.vue
index 977f0d0..9edb340 100644
--- a/frontend/src/views/dashboard/UsageLogs.vue
+++ b/frontend/src/views/dashboard/UsageLogs.vue
@@ -125,17 +125,31 @@
           <button class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2" aria-label="Close">✕</button>
         </form>
         <h3 class="text-lg font-semibold">原始数据 #{{ currentRaw?.id }}</h3>
-        <div class="mt-4 space-y-4 text-sm">
-          <div v-if="currentRaw?.raw_request">
-            <h4 class="mb-1 font-medium text-base-content/70">原始请求</h4>
-            <pre class="max-h-64 overflow-auto rounded-lg bg-base-200/50 p-3 text-xs leading-relaxed">{{ currentRaw.raw_request }}</pre>
+        <p class="mt-1 text-xs text-base-content/50">
+          {{ currentRaw?.model_name }} · {{ currentRaw?.protocol }}
+        </p>
+
+        <!-- 标签页切换：请求 / 响应，避免上下堆叠，手机友好 -->
+        <div v-if="hasAnyRaw" class="mt-4">
+          <div class="tabs tabs-boxed w-fit max-w-full overflow-x-auto">
+            <button
+              v-if="currentRaw?.raw_request"
+              type="button"
+              class="tab tab-sm"
+              :class="rawTab === 'request' && 'tab-active'"
+              @click="rawTab = 'request'"
+            >请求</button>
+            <button
+              v-if="currentRaw?.raw_response"
+              type="button"
+              class="tab tab-sm"
+              :class="rawTab === 'response' && 'tab-active'"
+              @click="rawTab = 'response'"
+            >响应</button>
           </div>
-          <div v-if="currentRaw?.raw_response">
-            <h4 class="mb-1 font-medium text-base-content/70">原始响应</h4>
-            <pre class="max-h-64 overflow-auto rounded-lg bg-base-200/50 p-3 text-xs leading-relaxed">{{ currentRaw.raw_response }}</pre>
-          </div>
-          <p v-if="!currentRaw?.raw_request && !currentRaw?.raw_response" class="text-base-content/50">该请求未记录原始数据（仅管理员且开关开启时记录）。</p>
+          <pre class="mt-3 max-h-[55vh] overflow-auto rounded-lg bg-base-200/50 p-3 text-xs leading-relaxed whitespace-pre-wrap break-words">{{ activeRawContent }}</pre>
         </div>
+        <p v-else class="mt-4 text-sm text-base-content/50">该请求未记录原始数据（仅管理员且开关开启时记录）。</p>
       </div>
       <form method="dialog" class="modal-backdrop">
         <button aria-label="Close">close</button>
@@ -163,8 +177,19 @@ const summary = computed(() => store.adminSummary?.totals)
 // 原始数据弹窗
 const rawModal = ref<HTMLDialogElement | null>(null)
 const currentRaw = ref<UsageLogItem | null>(null)
+const rawTab = ref<'request' | 'response'>('request')
+
+const hasAnyRaw = computed(() => !!currentRaw.value?.raw_request || !!currentRaw.value?.raw_response)
+const activeRawContent = computed(() => {
+  const item = currentRaw.value
+  if (!item) return ''
+  return rawTab.value === 'request' ? item.raw_request ?? '' : item.raw_response ?? ''
+})
+
 function viewRaw(item: UsageLogItem) {
   currentRaw.value = item
+  // 默认停在第一个有内容的标签（请求优先）
+  rawTab.value = item.raw_request ? 'request' : 'response'
   rawModal.value?.showModal()
 }