UI/UX优化: CSS变量化 + 错误反馈增强 + 按钮type属性

- CSS: 全部硬编码hex颜色替换为CSS变量(base/scan/pages/responsive/admin)
- CSS: 硬编码字体提取为--font-sans/--font-mono变量
- CSS: 新增打印色/渐变色/辅助色等20+变量定义
- CSS: 修复scan.css lint警告(line-clamp标准属性+空规则集)
- app.js: 16处用户可感知catch块补充showToast错误反馈
- app.js: 全部console.log降级为console.debug
- index.html: 76个button补充type属性
- index.html: 内联hex颜色/SVG stroke/Vue :style替换为CSS变量
- admin.html: 残留hex替换为CSS变量
- 全部CSS版本号更新用于缓存刷新
This commit is contained in:
selfrelease
2026-07-18 09:53:34 +08:00
parent 03e095ded0
commit bb5a72767f
7 changed files with 267 additions and 209 deletions
+10 -8
View File
@@ -22,6 +22,8 @@
--danger: #ff4444;
--warning: #fbbf24;
--info: #3b82f6;
--info-light: #60a5fa;
--purple: #a855f7;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@@ -60,11 +62,11 @@
.stat-card { background: var(--bg-glass); border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 12px; }
.stat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon svg { width: 18px; height: 18px; }
.stat-icon.blue { background: rgba(59,130,246,0.15); color: #3b82f6; }
.stat-icon.green { background: rgba(0,255,136,0.15); color: #00ff88; }
.stat-icon.orange { background: rgba(255,170,0,0.15); color: #ffaa00; }
.stat-icon.red { background: rgba(255,68,68,0.15); color: #ff4444; }
.stat-icon.purple { background: rgba(168,85,247,0.15); color: #a855f7; }
.stat-icon.blue { background: rgba(59,130,246,0.15); color: var(--info); }
.stat-icon.green { background: rgba(0,255,136,0.15); color: var(--success); }
.stat-icon.orange { background: rgba(255,170,0,0.15); color: var(--warning); }
.stat-icon.red { background: rgba(255,68,68,0.15); color: var(--danger); }
.stat-icon.purple { background: rgba(168,85,247,0.15); color: var(--purple); }
.stat-info .stat-val { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }
.stat-info .stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
@@ -338,7 +340,7 @@
</div>
<div class="sys-info-row">
<span class="lbl">🌐 外网IP</span>
<span class="val" style="font-family:monospace;color:#60a5fa;">{{ dash.server_info.external_ip }}</span>
<span class="val" style="font-family:monospace;color:var(--info-light);">{{ dash.server_info.external_ip }}</span>
</div>
<div class="sys-info-row">
<span class="lbl">🏠 内网IP</span>
@@ -346,11 +348,11 @@
</div>
<div class="sys-info-row">
<span class="lbl">🔌 应用端口</span>
<span class="val" style="font-family:monospace;color:#fbbf24;">{{ dash.server_info.app_port }}</span>
<span class="val" style="font-family:monospace;color:var(--accent);">{{ dash.server_info.app_port }}</span>
</div>
<div class="sys-info-row">
<span class="lbl">🌍 访问域名</span>
<span class="val" style="font-family:monospace;color:#34d399;">{{ dash.server_info.scheme }}://{{ dash.server_info.domain }}</span>
<span class="val" style="font-family:monospace;color:var(--success);">{{ dash.server_info.scheme }}://{{ dash.server_info.domain }}</span>
</div>
<div class="sys-info-row">
<span class="lbl">🖥️ 主机名</span>