开源软件供应链监控预警平台（Vue 3 版）

由原生 HTML/CSS/JS 多页项目 1:1 组件化还原为 Vue 3 单页应用，并对接 http://192.168.215.211:5000 后端（接口契约见根目录 openapi.json，121 个接口按需取用）。原展示项目参照：D:\Desktop\keda\fanhao\chainWarning。

技术栈

Vue 3（<script setup> Composition API）
Vite 4（dev 代理 /api → 后端、/kc → Keycloak，免 CORS）
Vue Router 4（展示页 5 路由 + /admin 后台路由段 + 登录守卫）
keycloak-js 24（登录对接 http://192.168.215.211:5001 / realm artifact-platform）
ECharts 6（图表按需引入）+ AntV X6（预警定位链路图，见下「图表架构」）

两大板块

1. 展示页（/, /units, /vuln, /vulnhub /trace）

原 5 个大屏页 1:1 还原（样式/交互/动画不变），数据源改为 实时优先 + 演示兜底：

src/stores/dataset.js：与原 scd.js 同构的响应式数据集 D； refreshLive() 并行拉 units / systems / vulnerabilities / catalog-stats，成功一个覆盖一个（D.live.* 标记），失败静默保留演示数据
已接实时：软件总数/漏洞总数/覆盖单位 KPI、组件总数与语言分布（catalog/stats）、漏洞列表与等级环、软件列表（详情按需 enrichSystem 拉 SBOM/绑定/漏洞）
暂无后端口径（保留演示）：接入开源平台数、漏洞库宫格、30 天趋势、预警速报、可信认证统计
软件信息页的 CLEAN_SHOW（全部可信·无漏洞演示口径）在后端系统数据就绪后自动失效

2. 管理后台（/admin，需登录）

路由	模块	能力
/admin/units	单位管理	列表搜索分页、新增/编辑（13 字段）、删除、人员绑定（Keycloak user_sub）
/admin/systems	软件系统	筛选（关键词/状态/单位）、multipart 创建（元数据+安装包+SBOM）、编辑、删除、绑定研制单位(角色)/平台/设备、关联漏洞查看
/admin/platforms	部署平台	CRUD（类型/位置/归属单位）、接入系统查看
/admin/devices	设备终端	CRUD（类型/IP/OS/责任人/状态）、运行系统查看
/admin/vulns	漏洞库	upsert（含受影响组件 purl 行编辑）、删除、受影响分析、统计卡

⚠️ 当前线上数据库尚未创建 units / software_systems / deploy_platforms / devices / vulnerabilities 五张表，上述模块接口返回 500——前端已就绪，建表后即可全链路使用；在此之前列表页显示「暂无数据」。

登录（双模式，`src/stores/auth.js`）

账号密码直连（password grant，本地开发即可用）：登录页表单 → POST /kc/realms/artifact-platform/protocol/openid-connect/token，token 存 localStorage 并自动续期
- 测试账号：admin / admin@321（super_admin）
Keycloak 标准跳转（PKCE）：需先在 Keycloak 客户端 platform-frontend 注册来源（当前仅 http://192.168.215.211:3000/* 已注册；本地需加 http://localhost:5173/* 的 Valid Redirect URIs 与 Web Origins，否则跳转会被拒）

两路 token 均为同 realm 签发，/auth/me 返回 { username, roles } 驱动顶栏显示。

图表架构（ECharts 6 按需引入）

原版手写 Canvas/SVG 图表全部换为 ECharts 实现，视觉按原版逐一对齐：

组件	实现	要点
`DonutChart.vue`	pie	环形 padAngle、中心 title 双行文字（总数/副标）
`HBarChart.vue`	bar	y 类目轴逆序、渐变填充+背景槽、右端数值标签、1s cubicOut 生长动画；行高按条数 CSS calc
`AreaChart.vue`	line	smooth+monotone、渐变面积、首尾日期 interval 回调
`SupplyGraph.vue`	graph(layout:none)	大屏供应链拓扑：四层分层坐标（原版 spreadKeys/meanXOf 同源算法）、邻接聚焦高亮、roam 缩放、共现橙虚线弧、tooltip 复刻原 sc-tip
`TraceChain.vue`	AntV X6	预警定位六列链路：节点=SVG 原语 markup（rect+双行 text，坐标逐像素对齐原版手写 SVG）、自定义 connector 复刻原版三阶贝塞尔 S 弯、锚点=节点左右缘中点、zoomToFit 等比缩放（meet 语义）、内置拖拽/滚轮缩放/双击复位、光点沿贝塞尔精确流动、逐批点亮/逐列浮现入场动画

统一从 src/utils/echarts.js 取实例（echarts/core 按需注册，图表/组件/渲染器只用到的才打包）；不要直接 import 'echarts'
initWhenSized()：容器有尺寸后再 init（ECharts 6 在 0×0 容器上渲染 graph 会崩 zrender；用 setTimeout 轮询而非 rAF）
数据集 D 实时覆盖后各图 watch 自动 setOption 重绘，无需重建组件

项目结构

src/
├── api/                  # request.js（envelope/Bearer/401/分页）+ index.js（六域 API）
├── stores/
│   ├── auth.js           # 双模式登录、token 管理、路由守卫配合
│   └── dataset.js        # 展示页数据集（SCD 演示基线 + 后端实时覆盖）
├── components/           # ECharts 图表组件 + TraceChain/SupplyGraph + admin/AdmModal/AdmPager
├── views/                # 5 个展示页
│   └── admin/            # 登录页 + 布局 + 5 个管理模块页
├── utils/                # echarts.js（按需引入+initWhenSized）+ app.js + chain.js
├── data/scd.js           # 演示数据（改演示数据只动这里）
└── assets/css/           # base 全局 + 各页样式 + admin.css（后台浅色）
public/silent-check-sso.html   # keycloak-js 静默会话恢复页

开发与部署

npm install
npm run dev      # 端口 3000（代理已配好）
npm run build

生产部署（nginx）需要两条代理（对齐 vite dev 代理）：

location /api/ { proxy_pass http://127.0.0.1:5000/api/; }   # 或 /prod-api
location /kc/  { proxy_pass http://127.0.0.1:5001/; }

相对原展示版的必要适配（共 4 处 CSS + 数据源切换）

screen.css：html, body 锁滚动 → .screen-mode（按路由挂摘）；.theme-dark/死代码 .sync-row 限定 #stage 作用域防串页
trace.css：body 底部留白 → .trace-page
vulnhub.css：.trust-mini → .trust-grid（与 units.css 重名）
window.SCD 全局 → ES 模块；展示视图数据源 SCD → D（dataset）

待办（后端侧）

数据库建表：units / software_systems / deploy_platforms / devices / vulnerabilities + 绑定表
Keycloak 客户端注册本地开发来源（如需标准跳转登录）