cfy777/Situation-Awareness-Platform-Frontend

Files

cfy666 c1e9a4be83 chore: sync local changes and add documentation

- Update yarn.lock
- Add project implementation docs in docs/
- Add personal internship experience notes in 实习讲解/

2026-06-29 19:47:30 +08:00

12 KiB

Raw Blame History

实习经历 — 整体概览

本文档是对三条实习经历的宏观梳理，后续将针对每条经历分别撰写详细的面试文档。

简历原文

实习经历：可信开源态势感知平台 — 前端开发实习生

参与开发全球风险监测模块，实现威胁情报地图、CVE趋势分析、高危组件排行等10+数据可视化组件

参与开发TcodeAI助手辅助修复功能，集成金银湖大模型能力，提供智能漏洞修复建议

协作设计可信态势感知平台API接口，完成50+数据接口的前后端集成

一、三条经历的关系

┌─────────────────────────────────────────────────────────────┐
│                  可信开源态势感知平台                           │
│                                                             │
│  ┌──────────────────┐  ┌──────────────┐  ┌───────────────┐  │
│  │ 经历1：风险监测模块 │  │经历2：AI修复  │  │经历3：API集成   │  │
│  │ 10+可视化组件     │  │金银湖大模型   │  │50+接口前后端   │  │
│  │ 威胁地图/趋势/排行 │  │智能修复建议   │  │请求基础设施    │  │
│  └────────┬─────────┘  └──────┬───────┘  └───────┬───────┘  │
│           │                   │                   │          │
│           ▼                   ▼                   ▼          │
│     前端渲染层             AI 交互层            数据通信层     │
│                                                             │
│  三者共同构成平台的核心能力：数据展示 → 智能分析 → 数据获取      │
└─────────────────────────────────────────────────────────────┘

二、经历1：全球风险监测模块

做了什么

参与开发了全球开源风险态势感知监控中心，路由为 /security，页面标题为"全球开源风险态势感知监控中心"。实现了 10+ 个 ECharts 数据可视化组件，覆盖威胁情报地图、CVE 趋势分析、高危组件排行、漏洞分布、行业分布等多个维度。

涉及的组件

组件	图表类型	做什么
ThreatIntelMap	世界地图 + 散点 + 热力	全球威胁情报分布，含国家热力、关键节点、实时警报
ChinaSecurityMap	中国地图 + 攻击路径	中国安全态势，含省份热力、攻击路径动画
CveTrendChart	柱状图 + 折线图	CVE 月度趋势，支持全球/区域切换
HighRiskComponentRank	横向柱状图	高危开源组件 Top 10，按 CVSS 评分排序
VulnerabilitySeverityChart	堆叠柱状图	漏洞严重性分季度分布（高/中/低危）
VulnerabilityLanguageChart	堆叠面积图	12 种编程语言的漏洞趋势（2017-2024）
ScatterChart	气泡散点图	编程语言安全态势，代码活跃度 vs 漏洞密度
IndustryDistribution	环形饼图	开源风险行业分布（AI、云计算、大数据等 8 大行业）
IntelligenceFeed	自动滚动列表	实时安全情报流，含类型标签和自动滚动
StatsGlass	毛玻璃统计卡片	4 项全球汇总指标（企业数、高校数、社区活跃度、项目数）

技术要点

全部基于 ECharts 6.x 实现，使用 echarts.init + dispose 生命周期
世界地图和中国地图使用 GeoJSON 懒加载，几百 KB 的地图数据按需加载
图表组件通过 Vite 动态 import 按需加载，不打包进主 bundle
使用暗色主题（#020617 背景），带浮动粒子动画背景
13 个后端 API 接口提供数据（/api/v1/page1/*），每个组件有硬编码的兜底数据

后续详细文档

→ 经历1-全球风险监测模块详解 ✅ 已完成

三、经历2：TcodeAI助手辅助修复功能

做了什么

参与开发了 TcodeAI 助手的辅助修复功能，集成金银湖大模型能力，为开源组件的已知漏洞提供 AI 生成的修复建议。用户查看某个软件版本时，可以看到该版本依赖库中存在的漏洞，以及对每个漏洞的 AI 修复建议。

功能流程

用户进入软件版本详情页
        │
        ▼
切换到 "AI修复建议" Tab
        │
        ▼
POST /api/v1/repo/repair/info ──→ 返回漏洞列表（库名、版本、CVE 等）
        │
        ▼
展示可折叠面板列表（每个受影响的库一个面板）
        │
        ▼
用户点击某个漏洞的 "AI修复建议" 按钮
        │
        ▼
POST /ai/vul_suggestion ──→ 返回 AI 生成的修复建议
        │
        ▼
弹窗展示：漏洞特性 + 漏洞描述 + 升级版本 + 修复建议列表

涉及的组件

组件	位置	做什么
AIRepair 主页	`src/views/Jyh/AIRepair/`	主页面，展示漏洞列表 + AI 修复建议面板
Panel	`src/components/AIRepair/`	可折叠展开面板，带 `max-height` 动画过渡
Table	`src/components/AIRepair/`	漏洞表格 + "AI修复建议"按钮 + 弹窗展示 AI 建议

技术要点

对接金银湖大模型的 /ai/vul_suggestion 接口，传入组件名、版本号、CVE 编号，返回结构化的修复建议（漏洞特性、描述、升级版本、修复建议列表）
修复建议以结构化 JSON 返回，前端用列表形式渲染
Panel 组件使用了 requestAnimationFrame + scrollHeight 实现平滑折叠动画
该功能在 3 个父页面中以 Tab 形式嵌入（版本详情页、AI Home 开源详情页、代码质量页）

后续详细文档

→ 经历2-TcodeAI助手辅助修复详解 ✅ 已完成

四、经历3：API 接口前后端集成

做了什么

协作设计了可信态势感知平台的 API 接口，完成了 50+ 数据接口的前后端集成，涵盖态势感知数据看板、仓库管理、组织管理、用户管理、AI 对话、合并请求、Issue 跟踪等多个业务模块。

整体规模

数据	数值
API 函数总数	641 个
API 文件数	29 个
金银湖（JYH）相关 API	106 个（situation.ts 50 + index.ts 45 + home.ts 5 + auth.ts 3 + scanCenter.ts 3）
态势感知看板接口	50+ 个（三大页面，覆盖全球态势、开源生态、武汉本地生态）

请求基础设施

请求发出
    │
    ├── 请求拦截器
    │   ├── Token 注入（DP_TOKEN + DP_REFRESH_TOKEN）
    │   ├── 页面级 Header 附加（标题、仓库ID、来源、UTM）
    │   └── URL 前缀重写（passport /uc 前缀）
    │
    ├── 数据传输
    │   ├── AES-128-CBC 加密/解密（密钥 + IV 硬编码）
    │   └── 标准 POST/GET，部分接口使用 FormData 上传
    │
    └── 响应拦截器
        ├── 解密响应数据
        ├── HTTP 状态码处理（400/401/403/408/500/502/504）
        ├── Token 过期自动刷新 + 请求队列重放
        └── API 缓存降级（IndexedDB 缓存失败兜底）

关键模块

模块	文件	核心接口
态势感知看板	`jyh/situation.ts`（50 端点）	威胁地图、CVE 趋势、组件排行、漏洞分布、生态健康度等
仓库管理	`repo/index.ts`（161 端点）	仓库 CRUD、分支/标签、Webhook、文件管理、Wiki、Star/Fork
合并请求	`merge/index.ts`（62 端点）	MR 创建/审查、差异对比、代码评审、门禁检查
AI 大模型	`jyh/index.ts`（45 端点）	对话创建、消息收发、历史管理、推荐问题、修复建议
组织管理	`org/index.ts`（55 端点）	组织 CRUD、成员管理、主页信息、CLA 管理
用户管理	`user/index.ts`（55+ 端点）	登录注册、OAuth、个人资料、SSH 密钥、Token 管理
讨论系统	`discussion/index.ts`（50 端点）	讨论 CRUD、分类、评论、投票、排行榜

技术要点

AES 加密：敏感数据在传输层使用 AES-128-CBC 加密（密钥 mXzfCSPBKmEA8aLq，IV tbeJJLC6dZQXXtWr）
Token 自动刷新：401 响应触发自动刷新，并发请求排队等待，刷新成功后统一重发
错误降级：reqCatch / reqCatchV2 包装函数，API 失败时自动捕获错误并通过事件总线通知；部分接口有硬编码兜底数据
自定义错误处理：支持 customError: true 参数跳过默认错误提示，由调用方自行处理
环境切换：通过 Vite 环境变量区分开发/测试/生产环境 API 地址

后续详细文档

→ 经历3-API接口前后端集成详解 ✅ 已完成

五、三条经历的面试定位

经历	展示什么能力	面试重点
经历1（风险监测）	数据可视化能力、ECharts 实战、复杂图表组件开发	ECharts 使用经验、地图图表、大数据图表性能
经历2（AI修复）	AI 能力集成、前后端协作、组件化设计	大模型接入方式、结构化响应处理、组件复用
经历3（API集成）	工程化能力、安全设计、大规模接口管理	请求拦截器、加密方案、Token 刷新、错误处理

一句话概括：

"我在实习中从三个层面参与了平台建设——前端展示层（数据可视化组件）、AI 智能层（大模型集成）、数据通信层（API 设计与集成），形成了比较完整的项目参与度。"

六、涉及的源码文件总览

经历1：风险监测模块

做什么	文件在哪
态势感知主页面	`src/views/Jyh/security/index.vue`
全球威胁地图	`src/views/Jyh/security/components/ThreatIntelMap.vue`
中国安全地图	`src/views/Jyh/security/components/ChinaSecurityMap.vue`
CVE 趋势图	`src/views/Jyh/security/components/CveTrendChart.vue`
高危组件排行	`src/views/Jyh/security/components/HighRiskComponentRank.vue`
漏洞严重性分布	`src/views/Jyh/security/components/VulnerabilitySeverityChart.vue`
语言漏洞趋势	`src/views/Jyh/security/components/VulnerabilityLanguageChart.vue`
语言安全散点图	`src/views/Jyh/security/components/ScatterChart.vue`
行业分布饼图	`src/views/Jyh/security/components/IndustryDistribution.vue`
情报动态流	`src/views/Jyh/security/components/IntelligenceFeed.vue`
统计卡片	`src/views/Jyh/security/StatsGlass.vue`
态势 API（50 端点）	`src/api/jyh/situation.ts`
威胁情报库	`src/views/Jyh/ThreatIntelligence/index.vue`
漏洞数据库	`src/views/Jyh/VulnerabilityDatabase/index.vue`

经历2：AI 修复功能

做什么	文件在哪
AI 修复主页面	`src/views/Jyh/AIRepair/index.vue`
可折叠面板组件	`src/components/AIRepair/Panel.vue`
漏洞表格 + AI 建议弹窗	`src/components/AIRepair/Table.vue`
AI Home 中的修复	`src/views/Jyh/AI/Home/components/OssDetail/AIRepair/index.vue`
AI 修复 API	`src/api/jyh/index.ts`（remediationSearchRemediations, getVulSuggestion）
版本详情（嵌入位置）	`src/views/Jyh/Version/Detail/index.vue`

经历3：API 集成

做什么	文件在哪
请求核心基础设施	`src/utils/request.ts`（Axios 实例、拦截器、加密、Token 刷新）
态势感知看板 API	`src/api/jyh/situation.ts`（50 端点）
金银湖核心 API	`src/api/jyh/index.ts`（45 端点）
仓库管理 API	`src/api/repo/index.ts`（161 端点）
组织管理 API	`src/api/org/index.ts`（55 端点）
用户管理 API	`src/api/user/index.ts`（55+ 端点）
错误捕获包装	`src/utils/catch.ts`（reqCatch / reqCatchV2）
状态码处理	`src/utils/status.ts`（dealWarning）
缓存降级系统	`src/utils/degradeInterceptor.ts`
加密配置	`src/utils/request.ts`（AES-CBC 加密）

12 KiB Raw Blame History Unescape Escape

实习经历 — 整体概览

简历原文

一、三条经历的关系

二、经历1：全球风险监测模块

做了什么

涉及的组件

技术要点

后续详细文档

三、经历2：TcodeAI助手辅助修复功能

做了什么

功能流程

涉及的组件

技术要点

后续详细文档

四、经历3：API 接口前后端集成

做了什么

整体规模

请求基础设施

关键模块

技术要点

后续详细文档

五、三条经历的面试定位

六、涉及的源码文件总览

经历1：风险监测模块

经历2：AI 修复功能

经历3：API 集成

12 KiB

Raw Blame History