用户界面¶
SPA 采用统一仪表盘布局：顶栏全局操作、统一侧栏 SubNav、主区标签页。下图展示 中文（LTR）下的实时 Web UI。其他语言布局相同、文案本地化——请参阅对应语言的 03-user-interface 章节。
在顶栏切换语言会更新菜单标签、标签页标题、内部数据源名称；启用翻译时 CVE 文本方向也会相应调整。
布局区域¶
顶栏 显示栈工具数量、语言选择、主题切换（浅色 / 深色 / 系统）、实时监控、告警、自动刷新与 完整扫描。导出 菜单（CSV、JSON、打印）支持键盘操作，可用 Escape 或点击外部关闭；CSV 包含 EPSS、风险分、类型、版本、截断描述与别名，并在首行注释扫描日期与栈；JSON 以 exported_at、栈、来源与总数封装结果。打印时专用样式表隐藏导航栏与侧栏。窄屏下菜单按钮以抽屉形式打开 SubNav。
SubNav 含产品标题、实时监控徽章、主导航、带 CVE 计数的 栈工具、（漏洞页）快速严重度筛选、带 最后更新 时间的数据源，以及按严重度汇总的扫描摘要。折叠 可将侧栏缩为仅图标。
| 标签页 | 用途 |
|---|---|
| 仪表盘 | 指标、图表、关键列表、可点击工具卡片 |
| 漏洞 | 搜索、筛选、可展开 CVE 卡片 |
| 实时监控 | watch 间隔、倒计时、自上次完整扫描的新 CVE、poll 历史 |
| 扫描历史 | 趋势图与近期扫描（PostgreSQL，按 tenant） |
| 基础设施 | 栈编辑、设置子导航（数据源、通知、Ops、租户、外观） |
告警标签页已移除
独立的告警历史标签页已移除；新发现仍通过横幅与 toast 通知显示。
仪表盘¶
完整扫描 后，仪表盘展示严重度摘要、分布图、受影响工具与关键 CVE。KEV / 在野利用 与 有补丁 指标汇总利用与修复信号。数据源状态 面板列出上次扫描中各数据源（sources_checked / sources_failed）。工具卡片显示各服务的 KEV 与 补丁 计数。点击工具卡片会跳转到漏洞页并应用该工具筛选。
图 1 — 扫描后的仪表盘（中文，浅色主题）
漏洞标签页¶
文本搜索、严重度 / 类型 / 工具 / 来源 筛选、仅 KEV 复选框、排序（含 EPSS 与风险评分）与可展开卡片。CVE 卡片在存在 enrichment 数据时显示独立的 EPSS 与 风险评分 徽章。点击卡片上的严重度、类型、来源或 KEV 标签会在本页应用对应筛选。当 merge 跨来源去重同一 CVE（如 NVD + GitHub）时，备用 ID（GHSA、PYSEC 等）以等宽 chip 显示在展开卡片正文中，并强制 LTR 方向。
图 2 — 带筛选与卡片的漏洞标签页
基础设施标签页¶
基础设施主标签页集中长期配置：技术栈、扫描行为、数据源、通知可见性与显示偏好。水平 设置子导航 在分区间切换，无需离开标签页。值保存在浏览器 localStorage 的 cve-radar:* 前缀下。启用 PostgreSQL 时，Ops 与 Tenants 展示服务器会话与按 tenant 的栈。
图 3 — 子导航：技术栈与快速监控（中文）
| 子导航 | 内容 |
|---|---|
| 基础设施 | 栈工具、预设、watch 间隔、周期性完整扫描 |
| 数据源 | 内置 CVE feed 与自定义 RSS |
| 通知 | 服务器通道状态（只读）、浏览器 toast/横幅 |
| Ops | API 密钥、会话（RBAC 角色、tenant、multi-tenant）、健康、metrics、audit |
| Tenants | 活动 slug、创建 tenant、保存的栈（加载/编辑/删除）、通知偏好 |
| 外观 | 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
通知¶
通知 分为 服务器通道（含分步指南）与 浏览器告警。
服务器投递在 API 主机 通过环境变量配置 — 密钥不会进入浏览器。点击通道行展开 设置指南：步骤、变量名、复制示例 .env 片段。修改后重启 API 并点 刷新。
| 通道 | 必需 env |
|---|---|
| Slack | NOTIFICATION_SLACK_WEBHOOK_URL |
| Discord | NOTIFICATION_DISCORD_WEBHOOK_URL |
| Teams | NOTIFICATION_TEAMS_WEBHOOK_URL |
| Telegram | NOTIFICATION_TELEGRAM_BOT_TOKEN, NOTIFICATION_TELEGRAM_CHAT_ID |
| 邮件 | NOTIFICATION_SMTP_HOST, _FROM, _TO |
| Webhook | NOTIFICATION_WEBHOOK_URL |
详见 NOTIFICATIONS.md。
图 3b — 通道列表（未配置 env 前为未配置）
图 3b2 — 展开的 Slack 设置指南与 env 示例
外观¶
外观 汇总不影响扫描逻辑的显示设置：
- 语言 — 英/波斯/阿拉伯/俄/中/法；更新标签、SubNav 源名与 CVE 方向（fa/ar 为 RTL）。
- 字体缩放 — 85%–140%（+/−，
cve-radar:font-scale）。 - 主题 — 浅色 / 深色 / 系统（
cve-radar:theme）；深色为 navy 背景 teal 强调色。 - CVE 自动翻译 — 启用后服务器在扫描时按 UI 语言 enrich 标题与描述。
顶栏仍提供语言与主题快捷入口，两处修改保持同步。
图 3c — 外观：语言、字体、主题、翻译
Ops¶
Ops 分区在浏览器中保存可选 API 密钥（/api/v1/* 上的 X-Api-Key）。GET /api/v1/session 显示 multi-tenant、RBAC 角色、活动 tenant（X-Tenant-Id）及 API auth 是否启用。Runtime features 来自 /api/capabilities；System health 含数据库 multi-tenant 标志。Prometheus metrics 链接 /metrics。Audit 为 tenant 范围行，含 IP、stack 与 sources_failed。
Tenants¶
配置 DATABASE_URL 后，Tenants 可切换 slug（X-Tenant-Id）、创建 tenant、管理保存的栈（save/load/edit/delete）。通知测试请求包含 X-Tenant-Id。
扫描历史标签页¶
扫描历史（SubNav）需要 PostgreSQL。展示活动 tenant 的漏洞趋势与近期扫描；每行含 mode、严重度计数、stack 与 sources failed。无数据库时提示需要 DATABASE_URL。
实时监控标签页¶
实时监控标签页（SubNav，位于「漏洞」与「基础设施」之间）展示 OSV/GitHub 的快速 polling，无需完整扫描。poll 调用 POST /api/v1/watch 并携带 X-Tenant-Id。watch 启用时显示距下次 poll 的倒计时；间隔选择（2 / 5 / 15 分钟）写入 settings.watchIntervalMs。自上次完整扫描的新增列出 watch 发现的紧凑 CVE 行；标签页徽章显示数量。Watch poll 历史保留最近 20 次 poll 结果及时间戳与新 CVE 数。此处与顶栏的 watch 开关保持同步；成功的完整扫描（POST /api/v1/scan/stream）会清空「自扫描以来新增」列表。
图 3d — 实时监控：倒计时、间隔、新 CVE、历史
扫描全屏页¶
启动 完整扫描 时出现全屏遮罩。随着 SSE 进度事件到达，每个 数据源 显示为一行：脉动圆点（进行中）、绿色圆点（完成）及当前栈工具（如有）；总进度条反映 ScanProgressEvent.percent。首个事件之前回退到静态步骤文案（NVD → OSV → …）。完成后自动返回 仪表盘。
图 4 — 完整扫描进行中的全屏界面
首次设置向导¶
免责声明之后，新用户会看到 全屏四步向导：
- 栈 — 添加工具或应用基础设施预设。
- 设置 — 告警、实时监控、间隔、可选翻译。
- 数据源 — 启用或禁用内置源与自定义 RSS。
- 完成 — 可选首次完整扫描；设置
cve-radar:setup-complete。
图 5 — 首次设置向导，技术栈步骤（中文，浅色主题）
已设置 setupComplete 的回访用户会跳过向导。
缓存的扫描结果¶
当应用从 localStorage 加载上次扫描（相同栈键）时，仪表盘显示 缓存结果 横幅及保存的扫描日期。从顶栏运行 完整扫描 以从 API 刷新实时数据。
以工具为中心的导航¶
点击仪表盘 工具卡片（或 SubNav 中的工具名）会切换到 漏洞 页，设置工具筛选、清除其他筛选，并 无分页 显示全部匹配项。
字体缩放与主题¶
详见基础设施标签页的 外观：字号 85%–140%、主题（浅色 / 深色 / 系统）与 CVE 自动翻译。深色模式在 navy 背景上使用 teal 强调色（#20c5ba）。
移动端¶
低于 md 断点时侧栏隐藏；使用顶栏菜单打开完整 SubNav overlay。
下一章：扫描与监控
高级筛选 (#263)：粘性筛选栏、多选严重性/来源、EPSS 与发布日期、URL 同步、已保存视图。