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'"
>
- 实时日志
+ 日志
@@ -147,15 +147,17 @@ const handleVerify = async () => {
- [后端]
+ [后端]
{{ log.category }}
- {{ log.message }}
+ {{ log.message }}
- [{{ log.time }}] {{ log.message }}
+ [{{ log.time }}]
+ {{ log.message }}
@@ -167,14 +169,15 @@ const handleVerify = async () => {
>
暂无抢购结果
- === 最新结果 ===
+
- {{ key }}: {{ value }}
+ {{ key }}
+ {{ value }}
@@ -182,12 +185,25 @@ const handleVerify = async () => {
-
成功账号: {{ stats.success }}
-
异常账号: {{ stats.fail }}
-
待处理账号: {{ stats.pending }}
-
已选账号: {{ stats.selected }} / 总账号: {{ stats.total }}
+
+
+ 成功
+ {{ stats.success }}
+
+
+ 异常
+ {{ stats.fail }}
+
+
+ 待处理
+ {{ stats.pending }}
+
+
+
+ 已选 {{ stats.selected }} / 总 {{ stats.total }}
+
@@ -196,13 +212,13 @@ const handleVerify = async () => {
class="log-panel"
>
- 点击「🔍 复验」按钮查询斗鱼真实兑换记录
+ 点击「🔍 复验」查询斗鱼真实兑换记录
- ✅ 已兑换: {{ verifyStats.verified }}
- ⚠️ 无记录: {{ verifyStats.noRecord }}
- ❌ 查询失败: {{ verifyStats.failed }}
+ ✅ {{ verifyStats.verified }}
+ ⚠️ {{ verifyStats.noRecord }}
+ ❌ {{ verifyStats.failed }}
- 暂无兑换记录
+ 无记录
{{ entry.error }}
@@ -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) {