diff --git a/src/styles/global.css b/src/styles/global.css index dcb6a1f..6e54a97 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -5,19 +5,20 @@ ═══════════════════════════════════════════════════════════ */ :root { - /* — Surface — */ - --df-bg: #0c0e1a; - --df-bg-raised: #12152a; - --df-bg-card: #171b33; - --df-bg-card-hover: #1c2140; - --df-sidebar-bg: #090b15; - --df-sidebar-hover: rgba(108,99,255,0.06); - --df-sidebar-active: rgba(108,99,255,0.12); + /* — Surface — 2026-10-18 UI 升级:参考 u-agent 管理台 GitHub Dark 四级灰阶(#0d1117→#22272e), + 替换原紫调深底,信息密度型界面灰阶更中性、层级更清晰 */ + --df-bg: #0d1117; + --df-bg-raised: #161b22; + --df-bg-card: #1c2128; + --df-bg-card-hover: #22272e; + --df-sidebar-bg: #0d1117; + --df-sidebar-hover: rgba(88,166,255,0.08); + --df-sidebar-active: rgba(88,166,255,0.14); - /* — Text — */ - --df-text: #eef0f6; - --df-text-secondary: #8b90a8; - --df-text-dim: #4a4f6a; + /* — Text — GitHub Dark 三级文字(#e6edf3/#8b949e/#6e7681) — */ + --df-text: #e6edf3; + --df-text-secondary: #8b949e; + --df-text-dim: #6e7681; /* — Accent: 紫色系(系统功能、互动元素)— */ --df-accent: #7b6ff0; @@ -326,3 +327,51 @@ html, body, #app { border-color: var(--df-accent); background: var(--df-bg-raised); } + +/* ═══ 2026-10-18 UI 升级:参考 u-agent 管理台范式注入公共组件 ═══ + 来源:D:\Downloads\u-agent\agent-manager.html(GitHub Dark 体系) + ① 状态点三态(run 绿 / deg 琥珀 pulse / stop 灰) + ② 透明彩底三件套徽章(底15% + 边30% + 同色字) + ③ mono 数据字体标记(数值/版本/哈希/ID 用 mono,信息密度感) */ + +/* — 状态点三态 — */ +.df-dot { + width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; +} +.df-dot--run { background: var(--df-success); } +.df-dot--deg { background: var(--df-warning); box-shadow: 0 0 6px var(--df-warning); animation: df-pulse 1.5s infinite; } +.df-dot--stop { background: var(--df-text-dim); } +@keyframes df-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } + +/* — 透明彩底三件套徽章 — */ +.df-badge { + font-family: var(--df-font-mono); font-size: 10px; padding: 3px 8px; + border-radius: var(--df-radius-sm); display: inline-flex; align-items: center; gap: 4px; +} +.df-badge--success { background: var(--df-success-bg); color: var(--df-success); border: 1px solid rgba(61,219,160,0.3); } +.df-badge--warning { background: var(--df-warning-bg); color: var(--df-warning); border: 1px solid rgba(240,199,94,0.3); } +.df-badge--danger { background: var(--df-danger-bg); color: var(--df-danger); border: 1px solid rgba(240,101,101,0.3); } +.df-badge--info { background: var(--df-info-bg); color: var(--df-info); border: 1px solid rgba(94,175,240,0.3); } +.df-badge--accent { background: var(--df-accent-soft); color: var(--df-accent); border: 1px solid rgba(123,111,240,0.3); } + +/* — 标签(tag,列表项内联小标签) — */ +.df-tag { + font-size: 9px; font-family: var(--df-font-mono); padding: 1px 5px; + border-radius: 3px; background: var(--df-bg-card-hover); color: var(--df-text-secondary); +} +.df-tag--info { background: var(--df-info-bg); color: var(--df-info); } +.df-tag--accent { background: var(--df-accent-bg); color: var(--df-accent); } +.df-tag--success { background: var(--df-success-bg); color: var(--df-success); } + +/* — mono 数据标记 — */ +.df-mono { + font-family: var(--df-font-mono); font-size: 12px; letter-spacing: -0.2px; +} + +/* — 顶栏状态徽章(参考 u-agent hd-stats) — */ +.df-hstat { + display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; + background: var(--df-bg-card); border: 0.5px solid var(--df-border); + border-radius: var(--df-radius); font-size: 11px; color: var(--df-text-secondary); +} +.df-hstat b { font-family: var(--df-font-mono); font-size: 12px; color: var(--df-text); }