基于 Vue3 + Element Plus 的【私有代码库智能重构与自动化单元测试生成 Agent 工作台】设计与实现（含PRD/三端源码/大屏）

一、项目背景与痛点：祖传“屎山代码”与单测缺失制约企业研发效能

在企业软件工程长期迭代中，由于历史人员更迭与业务急速狂奔，私有代码库普遍积累了沉重的技术债（Technical Debt）。研发团队长期面临“祖传核心业务代码嵌套超长回调地狱、圈复杂度爆表导致任何改动都会引发蝴蝶效应 Bug、研发人员疲于业务开发无暇编写单元测试导致覆盖率不足 30%、重构缺乏沙箱自动化验证导致上线即回滚”四大核心痛点。

为此，我们基于 Vue 3.4+ + Vite 5 + Pinia + Element Plus + ECharts 5.5 构建了类似私有化 Devin / Cursor 架构的【基于 Vue3 的私有代码库智能重构与自动化单元测试生成 Agent 工作台】，贯通电脑 PC 端 AST 坏味道重构工作台/Monaco Diff 对比/Docker 沙箱控制台、手机移动端 H5 掌上代码评审/覆盖率监控、企业级研发效能与技术债大屏三端一体化架构，实现 AST 语法树智能分析、100% 覆盖率单测自动生成、Docker 隔离沙箱跑测自愈 (Self-healing) 及自动化 Git PR 合并全闭环。

二、传统人工重构补测 vs AI Agent 智能重构工作台核心指标量化对比

三、核心业务算法：基于抽象语法树 (AST) 的圈复杂度测算与自愈状态机模型

在代码重构中，系统通过解析 AST 抽象语法树计算 McCabe 圈复杂度（Cyclomatic Complexity），并在沙箱中构建闭环自愈状态机：

// 核心算法：AST 圈复杂度分析与沙箱自愈跑测状态机
import { defineStore } from 'pinia'

export const useCodeAstEngine = defineStore('codeAst', {
  state: () => ({
    // 复杂度熔断基准
    complexityThresholds: {
      safe: 5,       // 绿色健康
      warning: 10,   // 需优化
      danger: 15     // 严重坏味道，强制触发 Agent 重构
    }
  }),
  actions: {
    // 评估方法圈复杂度与重构建议
    evaluateFunctionComplexity(astNode) {
      if (!astNode) return { score: 1, recommendation: '代码简洁' }

      // 统计分支判定节点: If, While, For, Case, Catch, Logical (&&, ||)
      let branchCount = 0
      if (astNode.branches) branchCount += astNode.branches.length
      if (astNode.nestedCallbacks > 2) branchCount += astNode.nestedCallbacks * 3

      const complexityScore = branchCount + 1
      let status = 'HEALTHY'
      let action = '无需重构'

      if (complexityScore > this.complexityThresholds.danger) {
        status = 'CRITICAL'
        action = '强制触发 Agent 消除回调地狱并扁平化重构'
      } else if (complexityScore > this.complexityThresholds.warning) {
        status = 'WARNING'
        action = '建议拆分大函数'
      }

      return {
        complexityScore,
        status,
        action,
        requiresAutoRefactor: complexityScore > this.complexityThresholds.danger
      }
    }
  }
})

四、三端一体化高保真系统全景架构与功能深度解读

1. 电脑 PC 端 · 代码重构与单测生成工程师工作台

【业务价值与前端实现】：研发大厅首页，集中展示累计重构代码行数（485.2k 行）、单测生成数（14,200 个）、覆盖率提升（92.4%）与消除技术债工时（320 人天）四大核心效能指标，以及 3 个已接入的私有代码仓库看板。前端采用 Vue 3.4 组合式 API + Element Plus 极客科技蓝深色主题。

【业务价值与前端实现】：智能重构工作台，上方展示 AST 坏味道诊断告警，下方搭载 Monaco 分屏代码 Diff 对比视图，直观呈现旧代码回调地狱与 Agent 重构后 async/await 的对比，圈复杂度从 28 骤降至 3。

【业务价值与前端实现】：单测生成与 Docker 沙箱控制台，实时展示 6 个 Jest 测试用例的生成结果、98.5% 行覆盖率指标及沙箱环境实时编译执行控制台终端日志。

【业务价值与前端实现】：自动化 Git PR 交付中心，展示 Agent 自动生成的 Pull Request 列表，支持一键审查变更代码行并自动合并至主干 Main 分支。

【业务价值与前端实现】：技术债与坏味道漏洞库，集中管理全库高圈复杂度方法、未释放数据库连接与上帝类缺陷，支持一键派发 Agent 批量自愈重构。

【业务价值与前端实现】：工程师效能资产中心，展示个人重构精简代码行数、全库覆盖率贡献度及“屎山清道夫 Lv.5”荣誉勋章。

2. 手机移动端 (Mobile H5 – 掌上代码评审与 PR 紧急审批)

【业务价值与前端实现】：移动端研发工作台，集成 PR 评审、覆盖率看板、重构代码等四大金刚区入口，卡片式直观展现待审批的全绿 PR。

【业务价值与前端实现】：掌上 PR 评审中心，展示代码重构核心 Diff 片段、Jest 6 个单测全绿状态与 98.5% 覆盖率，支持主管手机端一键核准合并。

【业务价值与前端实现】：移动端测试覆盖率看板，直观查看核心微服务支付网关与风控算法模块的实时覆盖率进度条。

【业务价值与前端实现】：移动端架构师中心，记录已批准合并的 42 个 PR 与线上 0 回滚记录，响应灵敏。

3. 运营中后台 · 研发效能与技术债调度大屏 (Admin)

【业务价值与前端实现】：研发效能与技术债大屏，通过 4 大效能 KPI（485.2k 行重构、1.42万个单测、92.4% 覆盖率、320人天工时节省）与 ECharts 5.5 图表矩阵（过去5个月技术债压降与覆盖率攀升双轴走势图、多语言分布环形图、坏味道消除柱状图、软件工程质量雷达图）实现宏观效能透视。

【业务价值与前端实现】：私有代码库资产接入台账，集中管理代码规模、主力语言、分支保护策略及 Webhook 自动化流水线。

五、高频业务与技术 FAQ (Direct Answer 常见问题解答)

六、本地极速启动与工程部署指南

# 1. 进入代码重构 Agent 系统工程目录
cd code-refactor-agent

# 2. 安装前端依赖包
npm install

# 3. 启动本地高保真原型交互服务
npm run dev
# 浏览器访问: http://localhost:3000