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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user