AI 代码生成

┌──────────┐   ┌──────────┐   ┌──────────┐   ┌──────────┐
│ 关键字   │ → │ 代码     │ → │ 上下文   │ → │ 自主     │
│ 补全     │   │ 片段生成 │   │ 感知生成 │   │ 编码代理 │
└──────────┘   └──────────┘   └──────────┘   └──────────┘
  2010s         2021            2023            2025
  IDE 自动      Copilot         Cursor          Claude Code
  感知          整行补全        多文件理解      端到端自主完成

问题：重复性编码消耗大量时间

传统流程：
  开发者 → 查文档 → 查 Stack Overflow → 手写样板代码 → 调试
  一个 CRUD 接口可能需要 2 小时

AI 辅助流程：
  开发者描述意图 → AI 生成代码 → 开发者审查修改 → 提交
  同样的 CRUD 接口可能只需 20 分钟

┌─────────────────────────────────────────────────┐
│              用户输入（Prompt / 代码上下文）        │  ← 当前文件 + 光标位置 + 项目上下文
└────────────────────────┬────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────┐
│              上下文构建层                          │  ← 文件树索引 + 类型定义 + Git 历史
│  收集相关文件、类型信息、依赖关系，拼接成 prompt    │
└────────────────────────┬────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────┐
│              LLM 推理层                           │  ← GPT-4 / Claude / Codex
│  基于 Transformer 架构，预测下一个 token 序列      │
└────────────────────────┬────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────┐
│              后处理层                              │  ← 格式化 + 语法检查 + 类型检查
│  过滤不合法代码、对齐缩进、插入到编辑器             │
└─────────────────────────────────────────────────┘

// 简化版：AI 代码补全的核心流程（伪代码）
async function generateCode(context) {
  // 1. 构建上下文：收集当前文件、相关文件、类型定义
  const prompt = buildPrompt({
    currentFile: context.file, // 当前打开的文件
    cursorPosition: context.cursor, // 光标位置
    relatedFiles: context.getRelatedFiles(), // import 链上的相关文件
    typeDefinitions: context.getTypes(), // TypeScript 类型定义
    gitHistory: context.getRecentChanges(), // 最近的 Git 提交
  });

  // 2. 调用 LLM 生成代码
  const completion = await llm.predict(prompt, {
    temperature: 0.2, // 低温度 = 更确定性的输出
    maxTokens: 512,
    stopSequences: ["\n\n"], // 遇到空行停止
  });

  // 3. 后处理：语法检查、格式化
  const validCode = validateSyntax(completion);
  return formatCode(validCode);
}

// Cursor 策略：预先索引 + 向量检索
const cursorApproach = {
  // 1. 项目打开时，预先 Embedding 所有文件
  async onProjectOpen(project) {
    const files = await project.getAllFiles();
    const embeddings = await embed(files); // 预计算向量
    this.vectorStore.add(embeddings);
  },
  // 2. 用户提问时，向量检索相关文件
  async onUserQuery(query) {
    const relevantFiles = await this.vectorStore.search(query, { topK: 5 });
    return buildPrompt(query, relevantFiles);
  },
  // 优势：响应快（检索 < 100ms），适合实时补全
  // 劣势：可能漏掉语义相关但关键词不匹配的文件
};

// Claude Code 策略：工具调用 + 渐进探索
const claudeCodeApproach = {
  // 1. 不预先索引，通过工具按需探索
  async onUserQuery(query) {
    // 第一步：看目录结构
    const tree = await this.tools.glob("**/*.{ts,tsx}");
    // 第二步：读取可能相关的文件
    const files = await this.tools.readFile(tree.suspectedFiles);
    // 第三步：基于理解再深入
    const deeperFiles = await this.tools.grep("UserList", { include: "*.ts" });
    return buildPrompt(query, [...files, ...deeperFiles]);
  },
  // 优势：理解更深（像人一样逐步探索），适合复杂重构
  // 劣势：延迟更高（多次工具调用），成本更高
};

// ❌ 模糊 Prompt：AI 只能猜你的意图
// Prompt: "帮我写一个用户列表组件"
// AI 生成的结果：可能用 class 组件、可能没有分页、可能没有类型定义
function UserList() {
  // AI 自行决定的技术选型，可能不符合项目规范
  const [users, setUsers] = useState([]);
  // ... 省略，AI 生成的代码可能有 200 行
}

// ✅ 精确 Prompt：AI 知道你的具体要求
// Prompt: "用 React + TypeScript 写一个用户列表组件。
//   - 使用函数组件 + Hooks
//   - 支持搜索（防抖 300ms）和分页（每页 20 条）
//   - 使用项目已有的 useRequest hook 发请求
//   - 遵循 Ant Design 的 Table 组件规范
//   - 添加 loading 和空状态处理"
function UserList() {
  const [keyword, setKeyword] = useState("");
  const [page, setPage] = useState(1);
  const { data, loading } = useRequest(() => fetchUsers({ keyword, page }));
  // ... AI 生成的代码完全符合项目规范
}

┌─────────────────────────────────────────────────┐
│           有效上下文的金字塔结构                    │
├─────────────────────────────────────────────────┤
│  Level 3: CLAUDE.md / AGENT.md 配置文件          │  ← 项目架构、编码规范、禁止行为
│  Level 2: 相关文件（import 链、类型定义、测试）     │  ← 直接相关的代码文件
│  Level 1: 当前文件 + 光标位置                     │  ← 基础上下文
└─────────────────────────────────────────────────┘

// ❌ 低效的错误反馈
// "这段代码有问题，帮我修一下"

// ✅ 高效的错误反馈
// "这段代码在运行时报错：TypeError: Cannot read property 'map' of undefined。
//   原因是 data 在第一次渲染时是 undefined。
//   期望行为：在 data 加载完成前显示 loading 状态。
//   请使用可选链操作符和条件渲染修复。"

// AI 生成的代码：看起来正确，但有隐蔽的 XSS 漏洞
function UserProfile({ user }) {
  // ❌ AI 没有转义用户输入，直接渲染 HTML
  return <div dangerouslySetInnerHTML={{ __html: user.bio }} />;
}

// ✅ 正确做法：使用 React 的自动转义或显式转义
function UserProfile({ user }) {
  return <div>{user.bio}</div>; // React 自动转义
}

// ❌ 过时或不存在的 API：groupBy 提案最终改名，不能直接调用
const grouped = users.groupBy((u) => u.role);

// ✅ 安全做法：使用标准 API 或确认 polyfill
const grouped = Object.groupBy(users, (u) => u.role); // ES2024，需确认兼容性
// 或使用 lodash
const grouped = _.groupBy(users, "role");

// ❌ AI 生成的低效代码：每次渲染都创建新函数
function UserList({ users }) {
  return users.map((user) => (
    <UserCard
      key={user.id}
      user={user}
      onClick={() => handleClick(user.id)} // 每次渲染创建新函数
    />
  ));
}

// ✅ 优化后：使用 useCallback 避免不必要的重渲染
function UserList({ users }) {
  const handleClick = useCallback((id) => {
    // 处理点击
  }, []);

  return users.map((user) => (
    <UserCard key={user.id} user={user} onClick={handleClick} />
  ));
}

用户指令 → Claude 模型 → 决定调用工具 → 执行工具 → 返回结果 → Claude 模型 → ...
   │                          │                          │
   │    "重构 UserList 组件"   │  read_file("UserList.tsx") │  文件内容
   │                          │                          │
   │                          │  read_file("types.ts")   │  类型定义
   │                          │                          │
   │                          │  write_file(...)          │  修改后的文件
   │                          │                          │
   │                          │  bash("npm test")         │  测试结果

[文件 A 原始内容] + [文件 B 原始内容] + [用户指令]
                        │
                        ▼
              LLM 生成完整修改后的文件
                        │
                        ▼
           Diff 算法计算逐行变更
                        │
                        ▼
        交互式 diff 视图（用户审查）