# 实习经历 — 整体概览 > 本文档是对三条实习经历的宏观梳理，后续将针对每条经历分别撰写详细的面试文档。 --- ## 简历原文 > **实习经历：可信开源态势感知平台 — 前端开发实习生** > > 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 加密） |