diff --git a/src/App.vue b/src/App.vue index 8251ede..95ed9d7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -54,9 +54,11 @@
- +
-

🖥️ 硬件与资源

+
+

🖥️ 硬件概览与资源占用

+
CPU{{ report.hardware.cpu_name }}
@@ -83,9 +85,14 @@
- +
-

🔌 驱动状态

{{ report.drivers.length > 0 ? '异常' : '正常' }}
+
+

🔌 驱动状态

+ + {{ report.drivers.length > 0 ? '异常' : '正常' }} + +
@@ -98,18 +105,23 @@
设备管理器无异常。
- +
-

🔋 电池健康

{{ report.battery.health_percentage }}%
+
+

🔋 电池健康

+ {{ report.battery.health_percentage }}% +

{{ report.battery.explanation }}

- +
-

💾 硬盘 S.M.A.R.T

+
+

💾 硬盘 S.M.A.R.T

+
@@ -121,9 +133,11 @@
- +
-

⚡ 关键日志

+
+

⚡ 关键日志

+
@@ -309,53 +323,49 @@ onUnmounted(() => { for (const fn of unlistenFns) fn(); if (toastTimer) clearTim .dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; } .card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); border: 1px solid #eaecf0; border-top: 3px solid #2ecc71; } -.card-header { display: flex; justify-content: space-between; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f0f2f5; } +/* 修复: 头部 flex 对齐 */ +.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f0f2f5; } +/* 修复: 使用 h3 匹配样式 */ .card-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; } -/* --- [修复] 关键 CSS 修改 --- */ - -/* 1. item-header 增加 gap */ +/* item-header 增加 gap */ .item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; - gap: 12px; /* [新增] 强制间距,防止内容对撞 */ + gap: 12px; } -/* 2. 进度条标签 增加 gap */ +/* 进度条标签 增加 gap */ .progress-label { display: flex; justify-content: space-between; font-size: 0.85rem; color: #636e72; - gap: 10px; /* [新增] 强制间距 */ + gap: 10px; } -/* 3. 长文本处理:设备名、日志来源等 */ .text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - min-width: 0; /* Flexbox item 必须有这个才能正确收缩 */ + min-width: 0; } -/* 让 item-header 中的 strong 也能截断 */ .item-header strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; - flex: 1; /* 占据剩余空间 */ + flex: 1; } -/* 状态标签固定宽度,防止被挤压 */ .status-text, .code-tag, .badge { - flex-shrink: 0; /* 禁止缩小 */ + flex-shrink: 0; white-space: nowrap; } -/* 4. 日志行布局优化 */ .event-id { font-weight: bold; color: #2c3e50; @@ -366,19 +376,17 @@ onUnmounted(() => { for (const fn of unlistenFns) fn(); if (toastTimer) clearTim flex-shrink: 0; } -/* 来源:占据中间空间,过长省略 */ .event-source { font-size: 0.75rem; color: #7f8c8d; - flex: 1; /* 关键:占据中间所有剩余空间 */ + flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - margin: 0 5px; /* 小间距 */ + margin: 0 5px; text-align: left; } -/* 时间:靠右,不换行 */ .event-time { font-size: 0.75rem; color: #95a5a6; @@ -386,9 +394,21 @@ onUnmounted(() => { for (const fn of unlistenFns) fn(); if (toastTimer) clearTim white-space: nowrap; } -/* --- 剩余样式 (保持不变) --- */ +/* Badge 样式增强 */ +.badge { + font-size: 0.75rem; + padding: 3px 10px; + border-radius: 12px; + color: white; + font-weight: 600; + letter-spacing: 0.5px; + white-space: nowrap; + flex-shrink: 0; +} + +/* ... 剩余样式 ... */ .grid-container-summary { display: grid; grid-template-columns: 1fr 1.5fr; gap: 25px; } -@media (max-width: 900px) { .grid-container-summary { grid-template-columns: 1fr; } } /* 响应式阈值调大一点 */ +@media (max-width: 900px) { .grid-container-summary { grid-template-columns: 1fr; } } .basic-info, .usage-bars { display: flex; flex-direction: column; gap: 12px; } .usage-bars { padding-top: 5px; } .usage-item { display: flex; flex-direction: column; gap: 6px; } @@ -405,7 +425,7 @@ onUnmounted(() => { for (const fn of unlistenFns) fn(); if (toastTimer) clearTim .description.highlight { color: #d35400; font-weight: 500; } .description.raw-message { margin-top: 6px; font-size: 0.8rem; color: #7f8c8d; font-family: Consolas, monospace; background: #fff; padding: 4px 8px; border-radius: 4px; border: 1px solid #eee; word-break: break-all; } .text-green { color: #27ae60; } .text-red { color: #c0392b; } -.badge-red { background-color: #ff4757; } .badge-green { background-color: #2ed573; } .badge-blue { background-color: #3498db; } +.badge-red { background-color: #ff4757; } .badge-green { background-color: #2ed573; } .badge-blue { background-color: #3498db; } .badge-gray { background-color: #95a5a6; } .code-tag { background: #ff4757; color: white; padding: 1px 5px; border-radius: 3px; font-size: 0.75rem; font-weight: bold; } .good-news { color: #27ae60; font-weight: 600; background: #eafaf1; padding: 12px; border-radius: 6px; border: 1px solid #d4efdf; text-align: center; font-size: 0.9rem; } .tip { margin-top: 12px; font-size: 0.85rem; color: #d35400; background: #fff3e0; padding: 10px; border-radius: 6px; border: 1px solid #ffe0b2; }