From 96b5afb7566288894ac91e29ed57fa271b3f12b0 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Fri, 26 Jun 2026 11:39:46 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=86=B2=E7=AA=81:=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=97=A5=E5=BF=97/=E5=A4=8D=E9=AA=8C=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 标签页更紧凑（字体 11px，高度 24px）
- 日志行使用 flex 布局避免换行
- 抢购结果 key/value 分离显示
- 统计面板使用卡片式布局
- 复验结果长文本自动截断
- 隐藏横向滚动条
---
 frontend/src/components/log/LogPanel.vue | 339 +++++++++++++++--------
 1 file changed, 229 insertions(+), 110 deletions(-)

diff --git a/frontend/src/components/log/LogPanel.vue b/frontend/src/components/log/LogPanel.vue
index e5f861a..4344fc5 100644
--- a/frontend/src/components/log/LogPanel.vue
+++ b/frontend/src/components/log/LogPanel.vue
@@ -101,14 +101,14 @@ const handleVerify = async () => {
           :class="{ active: activeTab === 'log' }"
           @click="activeTab = 'log'"
         >
-          实时日志
+          日志
         </button>
         <button
           class="log-tab"
           :class="{ active: activeTab === 'result' }"
           @click="activeTab = 'result'"
         >
-          抢购结果
+          结果
         </button>
         <button
           class="log-tab"
@@ -122,7 +122,7 @@ const handleVerify = async () => {
           :class="{ active: activeTab === 'verify' }"
           @click="activeTab = 'verify'"
         >
-          兑换复验
+          复验
         </button>
       </div>
       <div class="log-actions">
@@ -147,15 +147,17 @@ const handleVerify = async () => {
       <div
         v-for="(log, index) in logs"
         :key="index"
+        class="log-line"
         :class="`log-${log.type}`"
       >
         <template v-if="log.source === 'server'">
-          [后端]
+          <span class="log-prefix">[后端]</span>
           <span v-if="log.category" class="log-cat">{{ log.category }}</span>
-          {{ log.message }}
+          <span class="log-msg">{{ log.message }}</span>
         </template>
         <template v-else>
-          [{{ log.time }}] {{ log.message }}
+          <span class="log-time">[{{ log.time }}]</span>
+          <span class="log-msg">{{ log.message }}</span>
         </template>
       </div>
     </div>
@@ -167,14 +169,15 @@ const handleVerify = async () => {
     >
       <div v-if="resultEntries.length === 0" class="result-empty">暂无抢购结果</div>
       <template v-else>
-        <div class="log-i">=== 最新结果 ===</div>
+        <div class="log-i result-header">=== 最新结果 ===</div>
         <div
           v-for="[key, value] in resultEntries"
           :key="key"
           class="log-result"
           :class="value.includes('成功') ? 'log-s' : 'log-e'"
         >
-          <b>{{ key }}</b>: {{ value }}
+          <span class="result-key">{{ key }}</span>
+          <span class="result-value">{{ value }}</span>
         </div>
       </template>
     </div>
@@ -182,12 +185,25 @@ const handleVerify = async () => {
     <!-- 统计 -->
     <div
       v-show="activeTab === 'stats'"
-      class="log-panel"
+      class="log-panel stats-panel"
     >
-      <div class="log-result log-s">成功账号: {{ stats.success }}</div>
-      <div class="log-result log-e">异常账号: {{ stats.fail }}</div>
-      <div class="log-result log-i">待处理账号: {{ stats.pending }}</div>
-      <div class="log-result">已选账号: {{ stats.selected }} / 总账号: {{ stats.total }}</div>
+      <div class="stats-grid">
+        <div class="stat-item stat-success">
+          <span class="stat-label">成功</span>
+          <span class="stat-value">{{ stats.success }}</span>
+        </div>
+        <div class="stat-item stat-fail">
+          <span class="stat-label">异常</span>
+          <span class="stat-value">{{ stats.fail }}</span>
+        </div>
+        <div class="stat-item stat-pending">
+          <span class="stat-label">待处理</span>
+          <span class="stat-value">{{ stats.pending }}</span>
+        </div>
+      </div>
+      <div class="stat-summary">
+        已选 {{ stats.selected }} / 总 {{ stats.total }}
+      </div>
     </div>
 
     <!-- 兑换复验 -->
@@ -196,13 +212,13 @@ const handleVerify = async () => {
       class="log-panel"
     >
       <div v-if="verifyEntries.length === 0" class="result-empty">
-        点击「🔍 复验」按钮查询斗鱼真实兑换记录
+        点击「🔍 复验」查询斗鱼真实兑换记录
       </div>
       <template v-else>
         <div class="verify-summary">
-          <span class="log-s">✅ 已兑换: {{ verifyStats.verified }}</span>
-          <span class="log-w">⚠️ 无记录: {{ verifyStats.noRecord }}</span>
-          <span class="log-e">❌ 查询失败: {{ verifyStats.failed }}</span>
+          <span class="log-s">✅ {{ verifyStats.verified }}</span>
+          <span class="log-w">⚠️ {{ verifyStats.noRecord }}</span>
+          <span class="log-e">❌ {{ verifyStats.failed }}</span>
         </div>
         <div class="verify-list">
           <div
@@ -224,7 +240,7 @@ const handleVerify = async () => {
                   <span class="record-role">{{ record.showName }}</span>
                 </div>
               </div>
-              <div v-else class="verify-no-record">暂无兑换记录</div>
+              <div v-else class="verify-no-record">无记录</div>
             </template>
             <div v-else class="verify-error-msg">{{ entry.error }}</div>
           </div>
@@ -238,16 +254,20 @@ const handleVerify = async () => {
 .log-wrap {
   flex: 1;
   min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .log-header {
-  padding: 8px 12px;
+  padding: 6px 10px;
   border-bottom: 1px solid var(--line);
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
   background: var(--surface);
+  flex-shrink: 0;
 }
 
 .log-tabs {
@@ -257,16 +277,17 @@ const handleVerify = async () => {
 }
 
 .log-tab {
-  height: 26px;
-  padding: 0 10px;
+  height: 24px;
+  padding: 0 8px;
   border-radius: var(--radius-sm);
   border: 0;
   background: transparent;
   color: var(--muted);
   cursor: pointer;
-  font-size: 11.5px;
+  font-size: 11px;
   font-weight: 500;
   transition: .12s;
+  white-space: nowrap;
 }
 
 .log-tab:hover {
@@ -279,89 +300,18 @@ const handleVerify = async () => {
   color: var(--accent);
 }
 
-.log-panel {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 10px 12px;
-  font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
-  font-size: 11.5px;
-  line-height: 1.7;
-  background: var(--field);
-}
-
-.log-s {
-  color: var(--success);
-}
-
-.log-e {
-  color: var(--danger);
-}
-
-.log-i {
-  color: var(--accent);
-}
-
-.log-w {
-  color: var(--warning);
-}
-
-.log-d {
-  color: var(--muted-2);
-}
-
-.log-result {
-  background: var(--surface);
-  padding: 6px 9px;
-  margin: 4px 0;
-  border-radius: var(--radius-sm);
-  word-break: break-all;
-  border: 1px solid var(--line);
-}
-
-.log-cat {
-  display: inline-block;
-  min-width: 32px;
-  text-align: center;
-  margin-right: 6px;
-  padding: 0 5px;
-  border: 1px solid var(--line);
-  border-radius: 3px;
-  color: var(--muted);
-  font-size: 10px;
-  line-height: 1.5;
-  background: var(--surface);
-}
-
-.result-empty {
-  color: var(--muted);
-  padding: 14px 4px;
-  font-style: italic;
-}
-
-.panel {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  height: 100%;
-}
-
-/* 复验相关样式 */
 .log-actions {
   display: flex;
-  gap: 6px;
+  gap: 4px;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .btn-verify {
   background: var(--accent-soft);
   color: var(--accent);
   border-color: var(--accent-border);
+  font-size: 11px;
 }
 
 .btn-verify:hover {
@@ -374,28 +324,171 @@ const handleVerify = async () => {
   cursor: not-allowed;
 }
 
-.verify-summary {
+/* 日志面板 */
+.log-panel {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 8px 10px;
+  font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
+  font-size: 11px;
+  line-height: 1.6;
+  background: var(--field);
+}
+
+/* 日志行 */
+.log-line {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 2px 0;
+  word-break: break-all;
+}
+
+.log-prefix {
+  color: var(--muted);
+  flex-shrink: 0;
+}
+
+.log-time {
+  color: var(--muted);
+  flex-shrink: 0;
+  font-size: 10px;
+}
+
+.log-cat {
+  display: inline-block;
+  padding: 0 4px;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  color: var(--muted);
+  font-size: 10px;
+  line-height: 1.4;
+  background: var(--surface);
+  flex-shrink: 0;
+}
+
+.log-msg {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 颜色 */
+.log-s { color: var(--success); }
+.log-e { color: var(--danger); }
+.log-i { color: var(--accent); }
+.log-w { color: var(--warning); }
+.log-d { color: var(--muted-2); }
+
+/* 抢购结果 */
+.result-header {
+  padding-bottom: 6px;
+  margin-bottom: 6px;
+  border-bottom: 1px solid var(--line);
+}
+
+.log-result {
+  display: flex;
+  gap: 8px;
+  padding: 4px 8px;
+  margin: 2px 0;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--surface);
+  font-size: 11px;
+}
+
+.result-key {
+  font-weight: 600;
+  flex-shrink: 0;
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.result-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 统计面板 */
+.stats-panel {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+
+.stats-grid {
   display: flex;
   gap: 16px;
-  padding: 8px 12px;
-  margin-bottom: 12px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 12px 16px;
+  background: var(--surface);
+  border-radius: var(--radius);
+  border: 1px solid var(--line);
+  min-width: 70px;
+}
+
+.stat-label {
+  font-size: 10px;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: .05em;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.stat-success .stat-value { color: var(--success); }
+.stat-fail .stat-value { color: var(--danger); }
+.stat-pending .stat-value { color: var(--accent); }
+
+.stat-summary {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+/* 复验相关 */
+.verify-summary {
+  display: flex;
+  gap: 12px;
+  padding: 6px 10px;
+  margin-bottom: 8px;
   background: var(--surface);
   border-radius: var(--radius-sm);
   border: 1px solid var(--line);
+  font-size: 11px;
   font-weight: 500;
 }
 
 .verify-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }
 
 .verify-item {
-  padding: 10px 12px;
+  padding: 8px 10px;
   background: var(--surface);
   border-radius: var(--radius-sm);
   border: 1px solid var(--line);
+  font-size: 11px;
 }
 
 .verify-success {
@@ -416,47 +509,73 @@ const handleVerify = async () => {
 .verify-account {
   font-weight: 600;
   color: var(--text-strong);
-  margin-bottom: 6px;
+  margin-bottom: 4px;
+  font-size: 11px;
 }
 
 .verify-records {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
 }
 
 .verify-record {
   display: flex;
-  gap: 12px;
-  font-size: 12px;
+  gap: 8px;
+  font-size: 11px;
   align-items: center;
 }
 
 .record-time {
   color: var(--muted);
-  font-size: 11px;
+  font-size: 10px;
   white-space: nowrap;
-  min-width: 100px;
+  flex-shrink: 0;
 }
 
 .record-name {
   color: var(--text);
   font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .record-role {
   color: var(--muted);
-  font-size: 11px;
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .verify-no-record {
   color: var(--muted);
-  font-size: 12px;
+  font-size: 11px;
 }
 
 .verify-error-msg {
   color: var(--danger);
-  font-size: 12px;
+  font-size: 11px;
+}
+
+.result-empty {
+  color: var(--muted);
+  padding: 12px 4px;
+  font-style: italic;
+  font-size: 11px;
+}
+
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
 }
 
 @media (max-width: 1180px) {