Skip to content

用户界面

SPA 采用统一仪表盘布局：顶栏全局操作、统一侧栏 SubNav、主区标签页。下图展示 中文（LTR）下的实时 Web UI。其他语言布局相同、文案本地化——请参阅对应语言的 03-user-interface 章节。

在顶栏切换语言会更新菜单标签、标签页标题、内部数据源名称；启用翻译时 CVE 文本方向也会相应调整。

布局区域

顶栏 显示栈工具数量、语言选择、主题切换（浅色 / 深色 / 系统）、实时监控、告警、自动刷新与 完整扫描。导出 菜单（CSV、JSON、打印）支持键盘操作，可用 Escape 或点击外部关闭；CSV 包含 EPSS、风险分、类型、版本、截断描述与别名，并在首行注释扫描日期与栈；JSON 以 exported_at、栈、来源与总数封装结果。打印时专用样式表隐藏导航栏与侧栏。窄屏下菜单按钮以抽屉形式打开 SubNav。

SubNav 含产品标题、实时监控徽章、主导航、带 CVE 计数的 栈工具、（漏洞页）快速严重度筛选、带 最后更新 时间的数据源，以及按严重度汇总的扫描摘要。折叠 可将侧栏缩为仅图标。

标签页 用途
仪表盘 指标、图表、关键列表、可点击工具卡片
漏洞 搜索、筛选、可展开 CVE 卡片
基础设施 栈编辑、设置子导航（数据源、通知、外观）

告警标签页已移除

独立的告警历史标签页已移除；新发现仍通过横幅与 toast 通知显示。

仪表盘

完整扫描 后，仪表盘展示严重度摘要、分布图、受影响工具与关键 CVE。KEV / 在野利用 与 有补丁 指标汇总利用与修复信号。数据源状态 面板列出上次扫描中各数据源（sources_checked / sources_failed）。工具卡片显示各服务的 KEV 与 补丁 计数。点击工具卡片会跳转到漏洞页并应用该工具筛选。

仪表盘 — 中文 图 1 — 扫描后的仪表盘（中文，浅色主题）

漏洞标签页

文本搜索、严重度 / 类型 / 工具 / 来源 筛选、仅 KEV 复选框、排序（含 EPSS 与风险评分）与可展开卡片。CVE 卡片在存在 enrichment 数据时显示独立的 EPSS 与 风险评分 徽章。点击卡片上的严重度、类型、来源或 KEV 标签会在本页应用对应筛选。

CVE 列表 — 中文 图 2 — 带筛选与卡片的漏洞标签页

基础设施标签页

基础设施主标签页集中长期配置：技术栈、扫描行为、数据源、通知可见性与显示偏好。水平 设置子导航 在四个分区间切换，无需离开标签页。值保存在浏览器 localStorage 的 cve-radar:* 前缀下。

基础设施 — 中文 图 3 — 子导航：技术栈与快速监控（中文）

子导航 内容
基础设施 栈工具、预设、watch 间隔、周期性完整扫描
数据源 内置 CVE feed 与自定义 RSS
通知 服务器通道状态（只读）、浏览器 toast/横幅
外观 UI 语言、字体缩放、主题、CVE 自动翻译

数据源

数据源分区列出全部 内置 feed：NVD、OSV、GitHub Advisories、GitLab Advisory Database、CISA KEV、The Hacker News、TuxCare、Alpine secdb、Ubuntu USN、Red Hat Security、Debian Security Tracker、Amazon Linux ALAS。每行含品牌图标与复选框——禁用的 feed 在下次 完整扫描 或 watch 周期中跳过。

自定义 RSS 位于内置列表下方。添加自定义 feed 会新增含 启用、显示名称 与 URL（LTR）的卡片；垃圾桶按钮删除。内部 id 为 custom:{uuid}，仅非空 URL 参与扫描。

选项保存在 cve-radar:source-config，新用户向导第 3 步相同。SubNav 侧栏显示各启用源的 最后更新 时间（来自最近一次扫描 meta）。

数据源 — 中文 图 3a — 数据源：内置开关与自定义 RSS

通知

通知 分为 服务器通道 与 浏览器告警。

服务器投递（Slack、Discord、Telegram、邮件、webhook）仅在 API 主机通过环境变量配置——见 Self-hosted notifications。面板调用 GET /api/health?detailed=true，显示各通道 已配置 / 未配置 及 API 最低严重级别。修改服务器密钥后请点刷新。

浏览器告警仅客户端：Toast / 横幅（顶栏铃铛亦可切换）在 watch 或扫描发现新 CVE 时显示。面板展示 Notification API 权限，未决定时提供 请求权限。

通知 — 中文 图 3b — 通知：服务器通道与浏览器告警

外观

外观 汇总不影响扫描逻辑的显示设置：

  • 语言 — 英/波斯/阿拉伯/俄/中/法；更新标签、SubNav 源名与 CVE 方向（fa/ar 为 RTL）。
  • 字体缩放 — 85%–140%（+/−，cve-radar:font-scale）。
  • 主题 — 浅色 / 深色 / 系统（cve-radar:theme）；深色为 navy 背景 teal 强调色。
  • CVE 自动翻译 — 启用后服务器在扫描时按 UI 语言 enrich 标题与描述。

顶栏仍提供语言与主题快捷入口，两处修改保持同步。

外观 — 中文 图 3c — 外观：语言、字体、主题、翻译

扫描全屏页

启动 完整扫描 时会出现全屏遮罩，显示各源进度（NVD、OSV、GitHub、KEV、RSS、合并）。完成后自动返回 仪表盘。

扫描全屏 — 中文 图 4 — 完整扫描进行中的全屏界面

首次设置向导

免责声明之后，新用户会看到 全屏四步向导：

  1. 栈 — 添加工具或应用基础设施预设。
  2. 设置 — 告警、实时监控、间隔、可选翻译。
  3. 数据源 — 启用或禁用内置源与自定义 RSS。
  4. 完成 — 可选首次完整扫描；设置 cve-radar:setup-complete。

设置向导 — 中文 图 5 — 首次设置向导，技术栈步骤（中文，浅色主题）

已设置 setupComplete 的回访用户会跳过向导。

缓存的扫描结果

当应用从 localStorage 加载上次扫描（相同栈键）时，仪表盘显示 缓存结果 横幅及保存的扫描日期。从顶栏运行 完整扫描 以从 API 刷新实时数据。

以工具为中心的导航

点击仪表盘 工具卡片（或 SubNav 中的工具名）会切换到 漏洞 页，设置工具筛选、清除其他筛选，并 无分页 显示全部匹配项。

字体缩放与主题

详见基础设施标签页的 外观：字号 85%–140%、主题（浅色 / 深色 / 系统）与 CVE 自动翻译。深色模式在 navy 背景上使用 teal 强调色（#20c5ba）。

移动端

低于 md 断点时侧栏隐藏；使用顶栏菜单打开完整 SubNav overlay。

下一章：扫描与监控