From 8b2dfea884f694d5edef8d61c1d6ce7218f616ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=AC=E6=98=8E?= <83812544+Ed1s0nZ@users.noreply.github.com> Date: Sun, 8 Feb 2026 23:38:57 +0800 Subject: [PATCH] Add files via upload --- web/static/css/style.css | 183 +++++++++++++++++++++++++++++++++++---- web/static/js/router.js | 6 +- web/templates/index.html | 58 ++++++------- 3 files changed, 200 insertions(+), 47 deletions(-) diff --git a/web/static/css/style.css b/web/static/css/style.css index 1c77d1d4..86bf4a06 100644 --- a/web/static/css/style.css +++ b/web/static/css/style.css @@ -7945,6 +7945,16 @@ header { flex-direction: column; overflow: auto; background: linear-gradient(180deg, #eef2f7 0%, #f1f5f9 50%, #e2e8f0 100%); + position: relative; +} + +.dashboard-page::before { + content: ''; + position: absolute; + inset: 0; + background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.03) 1px, transparent 0); + background-size: 24px 24px; + pointer-events: none; } .dashboard-page .page-header { @@ -8015,6 +8025,12 @@ header { color: var(--text-primary); line-height: 1.2; letter-spacing: -0.03em; + font-variant-numeric: tabular-nums; +} + +.dashboard-kpi-card:focus-visible { + outline: 2px solid rgba(0, 102, 255, 0.5); + outline-offset: 2px; } .dashboard-kpi-label { @@ -8052,12 +8068,13 @@ header { .dashboard-grid .dashboard-section { margin-bottom: 0; - background: #fff; + background: rgba(255, 255, 255, 0.95); border-radius: 14px; padding: 22px; box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.05); transition: box-shadow 0.25s ease; + position: relative; } .dashboard-grid .dashboard-section:hover { @@ -8082,6 +8099,9 @@ header { } .dashboard-overview-item { + display: flex; + align-items: flex-start; + gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%); border-radius: 10px; @@ -8096,12 +8116,33 @@ header { transform: translateX(4px); } +.dashboard-overview-item:focus-visible { + outline: 2px solid rgba(0, 102, 255, 0.5); + outline-offset: 2px; +} + +.dashboard-overview-icon { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: 8px; + background: rgba(0, 102, 255, 0.08); + color: #0369a1; + flex-shrink: 0; +} + +.dashboard-overview-item > div { + min-width: 0; +} + .dashboard-overview-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); - margin-bottom: 6px; + margin-bottom: 4px; } .dashboard-overview-value { @@ -8129,6 +8170,17 @@ header { min-width: 2px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0.92; + border-right: 1px solid rgba(241, 245, 249, 0.9); + box-sizing: border-box; +} + +.dashboard-bar-seg:first-child { + border-radius: 14px 0 0 14px; +} + +.dashboard-bar-seg:last-child { + border-right: none; + border-radius: 0 14px 14px 0; } .dashboard-bar-seg.seg-critical { background: linear-gradient(90deg, #fca5a5, #fecaca); } @@ -8255,6 +8307,11 @@ header { box-shadow: 0 2px 8px rgba(0,102,255,0.08); } +.dashboard-quick-link:focus-visible { + outline: 2px solid rgba(0, 102, 255, 0.5); + outline-offset: 2px; +} + .dashboard-quick-icon { display: flex; align-items: center; @@ -8347,44 +8404,140 @@ header { } .dashboard-cta-block { + position: relative; margin-top: 24px; - padding: 20px 24px; - background: linear-gradient(135deg, #fff 0%, #f8fafc 100%); - border: 1px solid rgba(0,0,0,0.06); - border-radius: 14px; + padding: 24px 28px; + background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(241,245,249,0.95) 50%, rgba(226,232,240,0.4) 100%); + border: 1px solid rgba(2, 132, 199, 0.12); + border-radius: 16px; display: flex; align-items: center; justify-content: space-between; - gap: 20px; + gap: 24px; flex-wrap: wrap; - box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04); + box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8); + overflow: hidden; +} + +.dashboard-cta-accent { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%); + border-radius: 16px 0 0 16px; +} + +.dashboard-cta-content { + display: flex; + align-items: center; + gap: 16px; + flex: 1; + min-width: 0; +} + +.dashboard-cta-icon { + flex-shrink: 0; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(2, 132, 199, 0.1) 100%); + color: #0284c7; + border-radius: 12px; +} + +.dashboard-cta-copy { + min-width: 0; } .dashboard-cta-text { - font-size: 1rem; + font-size: 1.125rem; font-weight: 700; color: var(--text-primary); + margin: 0 0 4px 0; + letter-spacing: -0.02em; + line-height: 1.3; +} + +.dashboard-cta-sub { + font-size: 0.8125rem; + color: var(--text-secondary); margin: 0; - letter-spacing: -0.01em; + line-height: 1.4; + max-width: 420px; } .dashboard-cta-btn { - padding: 12px 24px; - background: linear-gradient(135deg, #0369a1 0%, #0284c7 50%, #0ea5e9 100%); + flex-shrink: 0; + display: inline-flex; + align-items: center; + gap: 8px; + padding: 12px 20px 12px 22px; + background: linear-gradient(135deg, #0369a1 0%, #0284c7 48%, #0ea5e9 100%); border: none; - border-radius: 10px; + border-radius: 12px; color: #fff; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s; - box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4); + box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35); } .dashboard-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(2, 132, 199, 0.45); - filter: brightness(1.05); + filter: brightness(1.06); +} + +.dashboard-cta-btn-arrow { + display: inline-flex; + opacity: 0.9; + transition: transform 0.2s ease; +} + +.dashboard-cta-btn:hover .dashboard-cta-btn-arrow { + transform: translateX(2px); +} + +.dashboard-cta-btn:focus-visible { + outline: 2px solid rgba(255, 255, 255, 0.8); + outline-offset: 2px; +} + +/* 尊重用户“减少动效”偏好（无障碍最佳实践） */ +@media (prefers-reduced-motion: reduce) { + .dashboard-kpi-card, + .dashboard-overview-item, + .dashboard-quick-link, + .dashboard-cta-btn { + transition: none; + } + .dashboard-kpi-card:hover, + .dashboard-overview-item:hover { + transform: none; + } + .dashboard-quick-link:hover { + transform: none; + } + .dashboard-cta-btn:hover { + transform: none; + } + .dashboard-cta-btn:hover .dashboard-cta-btn-arrow { + transform: none; + } + .dashboard-cta-btn-arrow { + transition: none; + } + .dashboard-tools-bar-fill { + animation: none; + } + .dashboard-bar-seg { + transition: none; + } } .vulnerability-controls { diff --git a/web/static/js/router.js b/web/static/js/router.js index 49b33aaf..1e88113c 100644 --- a/web/static/js/router.js +++ b/web/static/js/router.js @@ -1,5 +1,5 @@ // 页面路由管理 -let currentPage = 'chat'; +let currentPage = 'dashboard'; // 初始化路由 function initRouter() { @@ -32,8 +32,8 @@ function initRouter() { } } - // 默认显示对话页面 - switchPage('chat'); + // 默认显示仪表盘 + switchPage('dashboard'); } // 切换页面 diff --git a/web/templates/index.html b/web/templates/index.html index dc480c28..1f43194b 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -204,7 +204,7 @@
-
+

仪表盘

@@ -215,22 +215,10 @@
-
-
-
-
运行中任务
-
-
-
-
-
漏洞总数
-
-
-
-
-
工具调用次数
-
-
-
-
-
工具执行成功率
-
+
-
运行中任务
+
-
漏洞总数
+
-
工具调用次数
+
-
工具执行成功率
@@ -257,17 +245,17 @@

运行概览

-
- 批量任务队列 - - 待执行 / - 执行中 / - 已完成 +
+ +
批量任务队列- 待执行 / - 执行中 / - 已完成
-
- 工具调用 - - 个工具，共 - 次 +
+ +
工具调用- 个工具，共 - 次
-
- Skills - - 个 Skill，共 - 次调用 +
+ +
Skills- 个 Skill，共 - 次调用
@@ -293,15 +281,27 @@
-

准备好开始安全测试？

- +
+
+ +
+

准备好开始安全测试？

+

在对话中描述目标，AI 将协助执行扫描与漏洞分析

+
+
+
-
+