Situation-Awareness-Platform-Frontend/实习讲解/经历2-TcodeAI助手辅助修复详解.md

# TcodeAI 助手辅助修复功能 — 面试版

> 简历原话：**"参与开发TcodeAI助手辅助修复功能，集成金银湖大模型能力，提供智能漏洞修复建议"**
>
> 这篇文档帮你理解这个功能到底做了什么、怎么做的，以及面试时怎么讲。

---

## 一、先搞清楚：这个功能是什么？

在可信态势感知平台中，用户查看某个软件版本时，平台会扫描该版本依赖的开源组件，列出其中存在的已知漏洞。TcodeAI 助手辅助修复功能的作用就是——**对每个漏洞生成一份 AI 修复建议**，告诉用户这个漏洞有什么特征、怎么描述、建议升级到什么版本、具体怎么修。

**一句话概括**：我给平台接入了金银湖大模型的智能修复能力，用户点一下"AI修复建议"按钮，就能看到模型生成的漏洞分析 + 升级方案 + 修复步骤。

---

## 二、功能长什么样？（用户视角）

```
用户进入软件版本详情页
        │
        ▼
切换到 "AI修复建议" Tab
        │
        ▼
┌─────────────────────────────────────────────────────────────┐
│  AI修复建议说明（功能介绍横幅）                                  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌───────────────────────────────────────────────────────┐  │
│  │  🔴 严重  Log4j2                       [展开 ▼]       │  │
│  │  安全问题 3    升级版本 2.14.0 → 2.17.1                │  │
│  ├───────────────────────────────────────────────────────┤  │
│  │  （展开后显示漏洞列表表格）                              │  │
│  │  ┌──────────┬──────────┬──────────┬──────┬──────────┐ │  │
│  │  │ 问题编号  │ 问题类型  │ CWE编号   │ 分值  │ 操作     │ │  │
│  │  ├──────────┼──────────┼──────────┼──────┼──────────┤ │  │
│  │  │CVE-2021..│ RCE      │ CWE-502  │ 9.8  │[AI修复]  │ │  │
│  │  │CVE-2021..│ DoS      │ CWE-400  │ 7.5  │[AI修复]  │ │  │
│  │  └──────────┴──────────┴──────────┴──────┴──────────┘ │  │
│  └───────────────────────────────────────────────────────┘  │
│                                                             │
│  ┌───────────────────────────────────────────────────────┐  │
│  │  🔴 严重  Spring Framework              [展开 ▼]      │  │
│  │  安全问题 2    升级版本 5.3.26 → 5.3.31               │  │
│  └───────────────────────────────────────────────────────┘  │
│                                                             │
│  （点击 "AI修复建议" 按钮后弹出弹窗）                          │
│  ┌───────────────────────────────────────────────────────┐  │
│  │  AI修复建议                                   [弹窗]   │  │
│  │  ┌─────────────────────────────────────────────────┐  │  │
│  │  │ 漏洞特性：远程代码执行，攻击者可构造恶意数据包...    │  │  │
│  │  │ 漏洞描述：Apache Log4j2 存在 JNDI 注入漏洞...      │  │  │
│  │  │ 升级版本：2.17.1                                 │  │  │
│  │  │ 🤖 AI修复建议：                                   │  │  │
│  │  │   • 将 Log4j2 版本升级至 2.17.1 或更高版本        │  │  │
│  │  │   • 若无法升级，设置 log4j2.formatMsgNoLookups=true│  │  │
│  │  │   • 检查项目中是否有自定义的 Lookup 插件...         │  │  │
│  │  └─────────────────────────────────────────────────┘  │  │
│  │                              [确定]  [取消]            │  │
│  └───────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
```

---

## 三、怎么实现的？（面试核心）

### 3.1 三个组件的协作关系

这个功能由三个组件构成：

```
AIRepair/index.vue（主页面）
    │
    ├──→ 调用 /api/v1/repo/repair/info  获取漏洞数据
    │
    ├──→ Panel.vue（可折叠面板组件）
    │       每个受影响的库一个面板，展示库名、版本、升级路径
    │       点击 "展开/收起" 控制面板折叠
    │
    └──→ Table.vue（漏洞表格 + AI 建议弹窗）
            展示该库下的漏洞列表（CVE编号、类型、CVSS评分）
            点击 "AI修复建议" → 调用 /ai/vul_suggestion → 弹窗展示 AI 建议
```

### 3.2 第一步：获取漏洞列表（AIRepair/index.vue）

```typescript
// views/Jyh/AIRepair/index.vue（简化版）
const tableData = ref([]);
const pager = ref({ total: 10, pageIndex: 1, pageSize: 10 });

// 页面加载时调后端 API 获取受漏洞影响的组件列表
const fetchVulnList = async () => {
  const { data } = await remediationSearchRemediations({
    softwareId: propsData.versionId,  // 当前查看的软件版本 ID
    current: pager.value.pageIndex,
    size: pager.value.pageSize
  });

  if (data.data.code === 200) {
    // 数据格式：每个元素是一个受影响的库
    // { libraryName, currentVersion, recommendedVersion, vulnerabilities: [...] }
    tableData.value = data?.data?.data?.records || [];
    pager.value.total = data?.data?.data?.total || 0;
  }
};

onMounted(() => { fetchVulnList(); });
```

**API 接口**：`POST /api/v1/repo/repair/info`，参数 `{ softwareId, current, size }`。

### 3.3 第二步：可折叠面板（Panel.vue）

```vue
<!-- components/AIRepair/Panel.vue — 可折叠面板 -->
<template>
  <!-- 头部：始终可见 -->
  <div>
    <slot name="header"></slot>       <!-- 库名、版本信息、展开/收起按钮 -->
  </div>

  <!-- 内容：展开/收起动画过渡 -->
  <Transition name="collapse-transition"
    @beforeEnter="beforeEnter"
    @enter="enter"
    @beforeLeave="beforeLeave"
    @leave="leave"
  >
    <div v-if="props.expand">
      <slot name="body"></slot>       <!-- 漏洞表格 -->
    </div>
  </Transition>
</template>
```

**折叠动画是怎么实现的？** 手动控制 Vue Transition 的六个钩子函数：

```typescript
// 展开时：先量高度（scrollHeight）→ 设置 max-height → 过渡到全高 → 清除限制
const enter = (el) => {
  requestAnimationFrame(() => {
    el.style.maxHeight = `${el.scrollHeight}px`;  // 设为元素实际高度
  });
};
const afterEnter = (el) => {
  el.style.maxHeight = '';  // 展开完成后清除限制，防止内容溢出
};

// 收起时：先设当前高度 → 过渡回 max-height: 0
const beforeLeave = (el) => {
  el.style.maxHeight = `${el.scrollHeight}px`;     // 锁定当前高度
};
const leave = (el) => {
  el.style.maxHeight = 0;                           // 过渡回 0
};
```

**为什么不用 CSS `height: auto` 动画？** CSS 无法对 `height: auto` 做动画过渡。所以用 JS 读取 `scrollHeight` 再设置 `max-height` 的数值，这才能实现平滑的展开/收起动画。过渡曲线是 `cubic-bezier(0.5, 0.05, 0.5, 0.95)`，持续 0.3 秒。

### 3.4 第三步：AI 修复建议弹窗（Table.vue — 核心交互）

这是整个功能的核心——用户点击漏洞行里的"AI修复建议"按钮，弹出弹窗展示 AI 生成的内容：

```javascript
// components/AIRepair/Table.vue（简化版核心逻辑）

// 1. 表格渲染每行漏洞信息 + "AI修复建议"按钮
// <d-button @click="openModal(row)">AI修复建议</d-button>

// 2. 点击按钮 → 调 AI 接口获取建议
const openModal = async (row) => {
  showModal.value = true;
  await fetchVulSuggestion(row);   // 调 AI 接口
};

const fetchVulSuggestion = async (row) => {
  loading.value = true;
  const { data } = await getVulSuggestion({
    name: props.libraryName,        // 组件库名（如 "Log4j2"）
    version: props.currentVersion,  // 当前版本号（如 "2.14.0"）
    cve: row.vulnId                 // CVE 编号（如 "CVE-2021-44228"）
  });

  if (data.code === 200) {
    vulSuggestion.value = {
      vulFeature: data.data?.vulFeature || '',           // 漏洞特性
      vulDescription: data.data?.vulDescription || '',   // 漏洞描述
      upgradeVersion: data.data?.upgradeVersion || '',   // 建议升级版本
      fixSuggestionList: data.data?.fixSuggestionList || [] // AI修复建议列表
    };
  }
};

// 3. 弹窗展示 AI 返回的四部分内容
// ┌──────────────────────────────────────────┐
// │ 漏洞特性：远程代码执行，攻击者构造恶意...    │
// │ 漏洞描述：Apache Log4j2 存在 JNDI 注入...  │
// │ 升级版本：2.17.1                          │
// │ 🤖 AI修复建议：                            │
// │   • 升级至 2.17.1 或更高版本              │
// │   • 设置 formatMsgNoLookups=true         │
// │   • 检查自定义 Lookup 插件                 │
// └──────────────────────────────────────────┘
```

**API 接口**：`POST /ai/vul_suggestion`，参数 `{ name, version, cve }`，返回结构化 JSON。

### 3.5 数据流全景

```
用户进入 "AI修复建议" Tab
        │
        ▼
AIRepair/index.vue 调用
  POST /api/v1/repo/repair/info
  参数: { softwareId, current, size }
        │
        ▼
返回: { records: [{ libraryName, currentVersion,
          recommendedVersion, vulnerabilities: [...] }] }
        │
        ▼
渲染可折叠面板（Panel.vue）
  每个受影响的库 → 一个面板
  面板头部展示：库名、严重标签、问题数、升级路径
  面板内容展示：漏洞表格（Table.vue）
        │
        ▼
用户点击某行 "AI修复建议" 按钮
        │
        ▼
Table.vue 调用
  POST /ai/vul_suggestion  ← 金银湖大模型
  参数: { name: "Log4j2", version: "2.14.0", cve: "CVE-2021-44228" }
        │
        ▼
返回: { vulFeature, vulDescription,
        upgradeVersion, fixSuggestionList: [...] }
        │
        ▼
弹窗展示 AI 修复建议
```

---

## 四、这个功能还在哪些地方用？

AIRepair 组件被复用在 **3 个不同的父页面**中，以 Tab 形式嵌入：

| 父页面 | 文件位置 | Tab 名称 |
|--------|---------|---------|
| **版本详情页** | `src/views/Jyh/Version/Detail/index.vue` | "AI修复建议" Tab |
| **版本详情页（备选视图）** | `src/views/Jyh/Version/Detail/repoDetails/index2.vue` | "AI修复建议" Tab |
| **AI Home 开源详情** | `src/views/Jyh/AI/Home/components/OssDetail/index.vue` | "AI 修复建议" Tab |

此外，Panel 和 Table 组件还被复用在**代码质量页**（`CodeQuality/index.vue`）中，说明这套 UI 模式在项目中有一定的通用性。

---

## 五、面试问答准备

### Q1："TcodeAI助手辅助修复功能"具体做了什么？

> 这个功能主要是把金银湖大模型的智能分析能力集成到平台的漏洞修复流程里。用户查看某个软件版本时，平台会列出该版本依赖库中存在的已知漏洞。对于每个漏洞，用户可以点击"AI修复建议"按钮，前端会调用金银湖大模型的 `/ai/vul_suggestion` 接口，传入组件名、版本号、CVE 编号，模型会返回结构化的修复建议——包括漏洞特性、漏洞描述、建议升级版本和修复步骤列表。前端把这些内容展示在弹窗中，用户就能看到具体的修复方案。

### Q2：AI 接口是怎么对接的？

> 用的是标准的 HTTP POST 请求。前端传三个参数给后端 `/ai/vul_suggestion` 接口：`name`（库名，如 Log4j2）、`version`（当前版本号）、`cve`（CVE 编号）。后端调用金银湖大模型进行处理，返回结构化 JSON，包含 `vulFeature`（漏洞特性）、`vulDescription`（漏洞描述）、`upgradeVersion`（建议升级版本）、`fixSuggestionList`（修复建议列表）。前端直接按字段渲染就行，不需要自己解析自然语言。

### Q3：Panel 组件的折叠动画怎么实现的？

> 用 Vue 的 Transition 组件 + JavaScript 钩子函数实现的。核心思路是：因为 CSS 无法对 `height: auto` 做过渡动画，所以用 JS 在展开前读取元素的 `scrollHeight`（实际内容高度），设置 `max-height` 为目标值，让 CSS transition 驱动动画；展开完成后清掉 `max-height` 限制，防止内容溢出。收起的流程相反——先设 `max-height` 为当前高度，再过渡到 0。过渡持续 0.3 秒，使用 `cubic-bezier(0.5, 0.05, 0.5, 0.95)` 缓动曲线。

### Q4：这个功能是怎么嵌入到平台里的？

> AIRepair 组件以 Tab 的形式嵌入到三个不同的父页面中——软件版本详情页的两个视图，和 AI Home 的开源软件详情页。父页面通过 `versionId` prop 把当前查看的软件版本 ID 传给 AIRepair，AIRepair 根据这个 ID 去请求对应版本的安全漏洞信息。这种组件化的设计使得同一个功能可以在多个页面中复用，不需要重复开发。

### Q5：AI 返回的数据有哪些字段？怎么展示的？

> AI 返回四个字段：`vulFeature`（漏洞特性——描述漏洞的技术特征，如"远程代码执行，攻击者可通过构造恶意数据包触发"）、`vulDescription`（漏洞描述——更详细的漏洞说明）、`upgradeVersion`（建议升级到的安全版本号）、`fixSuggestionList`（修复建议列表——一个字符串数组，每条是一条具体的修复措施）。前端用弹窗展示，前三个字段是键值对形式，修复建议用列表形式渲染。所有字段都用了 `||` 兜底为 `'--'`，防止某个字段缺失导致空白。

### Q6：AI 修复建议和漏洞列表是两个不同的接口，为什么要分开？

> 两个接口的职责不同。漏洞列表接口（`/api/v1/repo/repair/info`）返回的是批量数据——当前软件版本所有受影响依赖库的漏洞概况，数据量较大但字段较少，页面加载时一次性请求。AI 修复建议接口（`/ai/vul_suggestion`）是点对点请求——用户点击某个具体漏洞后才请求，每次只传一个 CVE 编号去查询。这种设计避免了首页加载时对每个漏洞都调一次 AI 接口，既不浪费 AI 调用额度，也保证了页面加载速度。

---

## 六、关键数字（面试时用）

| 数据 | 数字 |
|------|------|
| 组件文件数 | 3 个（index.vue + Panel.vue + Table.vue） |
| AI API 接口数 | 2 个（`/api/v1/repo/repair/info` + `/ai/vul_suggestion`） |
| AI 返回字段数 | 4 个（漏洞特性、漏洞描述、升级版本、修复建议列表） |
| 嵌入父页面数 | 3+ 个（版本详情页 ×2 + AI Home详情 + 代码质量页） |
| Panel 折叠动画过渡 | 0.3 秒，cubic-bezier 缓动 |

---

## 七、涉及的源码文件（需要看的时候查）

| 做什么 | 文件在哪 |
|--------|----------|
| 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） |
| 版本详情页（嵌入位置 1） | `src/views/Jyh/Version/Detail/index.vue` |
| 版本详情页（嵌入位置 2） | `src/views/Jyh/Version/Detail/repoDetails/index2.vue` |
| AI Home 详情（嵌入位置 3） | `src/views/Jyh/AI/Home/components/OssDetail/index.vue` |