优化: 参考 u-agent 管理台范式升级 UI 设计令牌与公共组件

src/styles/global.css

@@ -5,19 +5,20 @@
    ═══════════════════════════════════════════════════════════ */
 
 :root {
-  /* — Surface — */
+  /* — Surface — 2026-10-18 UI 升级:参考 u-agent 管理台 GitHub Dark 四级灰阶(#0d1117→#22272e),
-  --df-bg:                #0c0e1a;
+       替换原紫调深底,信息密度型界面灰阶更中性、层级更清晰 */
-  --df-bg-raised:         #12152a;
+  --df-bg:                #0d1117;
-  --df-bg-card:           #171b33;
+  --df-bg-raised:         #161b22;
-  --df-bg-card-hover:     #1c2140;
+  --df-bg-card:           #1c2128;
-  --df-sidebar-bg:        #090b15;
+  --df-bg-card-hover:     #22272e;
-  --df-sidebar-hover:     rgba(108,99,255,0.06);
+  --df-sidebar-bg:        #0d1117;
-  --df-sidebar-active:    rgba(108,99,255,0.12);
+  --df-sidebar-hover:     rgba(88,166,255,0.08);
+  --df-sidebar-active:    rgba(88,166,255,0.14);
 
-  /* — Text — */
+  /* — Text — GitHub Dark 三级文字(#e6edf3/#8b949e/#6e7681) — */
-  --df-text:              #eef0f6;
+  --df-text:              #e6edf3;
-  --df-text-secondary:    #8b90a8;
+  --df-text-secondary:    #8b949e;
-  --df-text-dim:          #4a4f6a;
+  --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); }