cfy666
c1e9a4be83
- Update yarn.lock - Add project implementation docs in docs/ - Add personal internship experience notes in 实习讲解/
245 lines
12 KiB
Markdown
245 lines
12 KiB
Markdown
# 实习经历 — 整体概览
|
||
|
||
> 本文档是对三条实习经历的宏观梳理，后续将针对每条经历分别撰写详细的面试文档。
|
||
|
||
---
|
||
|
||
## 简历原文
|
||
|
||
> **实习经历：可信开源态势感知平台 — 前端开发实习生**
|
||
>
|
||
> 1. 参与开发全球风险监测模块，实现威胁情报地图、CVE趋势分析、高危组件排行等10+数据可视化组件
|
||
> 2. 参与开发TcodeAI助手辅助修复功能，集成金银湖大模型能力，提供智能漏洞修复建议
|
||
> 3. 协作设计可信态势感知平台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 加密） |
|