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
parent 2cfe01694a
commit c1e9a4be83
12 changed files with 4110 additions and 4 deletions
--- a/实习讲解/实习经历整体概览.md
+++ b/实习讲解/实习经历整体概览.md
@@ -0,0 +1,244 @@
+ # 实习经历 — 整体概览
+
+> 本文档是对三条实习经历的宏观梳理，后续将针对每条经历分别撰写详细的面试文档。
+
+---
+
+## 简历原文
+
+> **实习经历：可信开源态势感知平台 — 前端开发实习生**
+>
+> 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 加密） |