"只用大家看得懂的内容来诠释技术！"

• 目标读者：高级/资深前端工程师
• 技术深度：★★★★☆

---

目录

1. 架构哲学：从 REPL 到 Agent 的演进
2. 核心引擎：LLM 编排与上下文管理
3. 工具链深度解析：超越 API 调用的工程化设计
4. 前端工程化实战：与现有工具链的融合
5. 性能优化与极限场景
6. 安全模型与威胁防护
7. 扩展性设计：自定义工具与 Skill 系统
8. 最佳实践与反模式

---

一、架构哲学：从 REPL 到 Agent 的演进

1.1 REPL 的局限性

传统的前端开发工具（Node.js REPL、Chrome DevTools Console）遵循命令-响应模型：

// REPL 模式：单次交互，无状态
> const sum = (a, b) => a + b
undefined
> sum(1, 2)
3
// 上下文丢失，每次从零开始

这种模式的问题在于：

• 无状态：无法记住之前的操作和项目上下文
• 无工具：只能执行 JavaScript，无法操作文件系统、运行构建命令
• 无规划：需要用户自行拆解复杂任务

1.2 Agent 架构的核心突破

OpenCode 实现了 ReAct（Reasoning + Acting）模式，将 LLM 从"文本生成器"升级为"自主代理"：

用户输入
    │
    ▼
┌────────────────────────────────────┐
│  Thought（推理）                    │
│  "用户要添加登录功能，我需要："       │
│  1. 检查现有路由配置                 │
│  2. 创建登录组件                     │
│  3. 集成状态管理                     │
└─────────────┬───────────────────────┘
              │
              ▼
┌─────────────────────────────────────┐
│  Action（行动）                      │
│  Tool: Glob("**/routes.{ts,tsx}")   │
└─────────────┬───────────────────────┘
              │
              ▼
┌────────────────────────────────────┐
│  Observation（观察）                │
│  找到 src/routes/index.tsx          │
│  使用 React Router v6               │
└─────────────┬───────────────────────┘
              │
              ▼
        循环直到完成

关键洞察：这不是简单的 API 调用链，而是基于环境反馈的自主决策循环。

1.3 与 LangChain/LlamaIndex 的对比

维度	LangChain	LlamaIndex	OpenCode
定位	通用 LLM 应用框架	数据检索增强	代码工程专用 Agent
上下文管理	手动维护	向量数据库	结构化工作目录 + 会话历史
工具集成	通用工具集	文档检索工具	代码专用工具（AST 操作、Git、构建）
前端工程	需自行集成	不适用	原生支持 Vite/Webpack/TypeScript
粒度控制	粗粒度 Chain	粗粒度 Pipeline	细粒度工具编排

设计选择分析：

OpenCode 放弃了通用性，换取了代码领域的深度优化：

1. 工作目录即上下文：不需要显式的向量存储，文件系统本身就是最自然的知识库
2. 确定性工具调用：不像 LangChain 的 Tool 需要 LLM 生成参数，OpenCode 的工具是类型安全的函数签名
3. 副作用追踪：每个工具调用都记录操作日志，支持撤销和审计

1.4 状态机模型

OpenCode 的内部状态可以用有限状态机描述：

// 伪代码表示核心状态机
type State = 
  | 'IDLE'           // 等待用户输入
  | 'PLANNING'       // LLM 正在制定执行计划
  | 'EXECUTING'      // 正在执行工具调用
  | 'WAITING_USER'   // 需要用户确认（Question 工具）
  | 'ERROR'          // 执行出错
  | 'COMPLETED';     // 任务完成

type Event =
  | { type: 'USER_INPUT'; payload: string }
  | { type: 'LLM_RESPONSE'; payload: ToolCall[] }
  | { type: 'TOOL_COMPLETED'; payload: ToolResult }
  | { type: 'USER_CONFIRMED'; payload: Answer }
  | { type: 'ERROR_OCCURRED'; payload: Error };

// 状态转换
const transitions: Record<State, Partial<Record<Event['type'], State>>> = {
  IDLE: {
    USER_INPUT: 'PLANNING'
  },
  PLANNING: {
    LLM_RESPONSE: 'EXECUTING',
    ERROR_OCCURRED: 'ERROR'
  },
  EXECUTING: {
    TOOL_COMPLETED: 'PLANNING',  // 继续下一步
    USER_INPUT: 'WAITING_USER',  // 需要确认
    ERROR_OCCURRED: 'ERROR'
  },
  WAITING_USER: {
    USER_CONFIRMED: 'PLANNING'
  },
  ERROR: {
    USER_INPUT: 'PLANNING'  // 重试
  },
  COMPLETED: {
    USER_INPUT: 'PLANNING'
  }
};

工程意义：明确的状态边界使得错误恢复、超时处理、并发控制变得可预测。

---

二、核心引擎：LLM 编排与上下文管理

2.1 Token 预算的分配策略

Kimi-K2.5 的 128K 上下文窗口不是无限资源。OpenCode 实现了智能预算分配：

interface ContextBudget {
  systemPrompt: number;        // 2K - 固定开销
  toolDefinitions: number;     // 3K - 11 个工具的 Schema
  conversationHistory: number; // 40K - 滚动窗口
  fileContents: number;        // 60K - 动态加载
  responseReserve: number;     // 23K - LLM 回复预留
}

// 动态调整策略
class ContextManager {
  private readonly MAX_TOKENS = 128000;
  private readonly SAFETY_MARGIN = 8000;
  
  calculateFileBudget(currentUsage: number): number {
    const available = this.MAX_TOKENS - currentUsage - this.SAFETY_MARGIN;
    
    // 策略 1：如果对话很长，压缩历史
    if (this.conversationHistory.length > 10) {
      return this.compressHistory(available);
    }
    
    // 策略 2：优先保留最近的文件内容
    return available * 0.7;
  }
  
  private compressHistory(availableTokens: number): number {
    // 保留最近 3 轮对话的完整内容
    // 更早的对话只保留摘要
    const recent = this.getRecentRounds(3);
    const summary = this.summarizeOlderRounds();
    
    this.conversationHistory = [...summary, ...recent];
    
    return this.calculateFileBudget(this.getCurrentUsage());
  }
}

关键优化点：

1. 惰性加载：只有在工具调用需要时才读取文件，而非一次性加载整个项目
2. 内容摘要：对于大文件，先读取开头（了解结构）+ Grep 搜索（定位关键行）+ 局部精读
3. LRU 缓存：最近访问的文件内容保留在上下文中，避免重复读取

2.2 工具选择的决策树

OpenCode 不是让 LLM "猜" 要用什么工具，而是通过结构化的决策流程：

用户请求分析
    │
    ├─► 包含文件路径？
    │   ├─► 是 → 文件是否存在？
    │   │       ├─► 存在 → Read/Edit
    │   │       └─► 不存在 → Write
    │   └─► 否 → 继续
    │
    ├─► 需要搜索代码？
    │   ├─► 知道文件名 → Glob
    │   └─► 知道内容 → Grep
    │
    ├─► 需要执行命令？
    │   └─► Bash（Git、NPM、构建等）
    │
    ├─► 需要网络资源？
    │   └─► WebFetch
    │
    ├─► 任务可并行？
    │   └─► Task（子代理）
    │
    └─► 需要用户确认？
        └─► Question

为什么不用纯粹的 LLM 决策？

• 成本：每次让 LLM 选择工具都要消耗 token
• 延迟：需要等待 LLM 响应才能执行
• 确定性：规则引擎的结果可预测、可测试

混合策略：规则引擎处理常见情况（80%），LLM 处理边界情况（20%）。

2.3 错误恢复与重试机制

interface RetryPolicy {
  maxAttempts: number;
  backoffStrategy: 'fixed' | 'exponential' | 'linear';
  retryableErrors: string[];
  fallbackAction?: ToolCall;
}

class ExecutionEngine {
  async executeWithRetry(toolCall: ToolCall, policy: RetryPolicy): Promise<Result> {
    for (let attempt = 1; attempt <= policy.maxAttempts; attempt++) {
      try {
        const result = await this.execute(toolCall);
        
        if (result.success) {
          return result;
        }
        
        // 分析错误类型
        if (!this.isRetryable(result.error, policy.retryableErrors)) {
          throw new NonRetryableError(result.error);
        }
        
        // 计算退避时间
        const delay = this.calculateBackoff(attempt, policy.backoffStrategy);
        await this.sleep(delay);
        
        // 尝试修复
        toolCall = await this.attemptRecovery(toolCall, result.error);
        
      } catch (error) {
        if (attempt === policy.maxAttempts && policy.fallbackAction) {
          return this.execute(policy.fallbackAction);
        }
        throw error;
      }
    }
  }
  
  private async attemptRecovery(toolCall: ToolCall, error: Error): Promise<ToolCall> {
    // 常见错误自动修复
    if (error.message.includes('ENOENT')) {
      // 文件不存在，改为创建
      return {
        ...toolCall,
        tool: 'Write',
        params: { ...toolCall.params, createIfNotExists: true }
      };
    }
    
    if (error.message.includes('EACCES')) {
      // 权限不足，提示用户
      await this.askUser(`需要提升权限来 ${toolCall.tool}，是否继续？`);
    }
    
    return toolCall;
  }
}

---

三、工具链深度解析：超越 API 调用的工程化设计

3.1 文件操作工具的 ACID 特性

OpenCode 的文件操作实现了类似数据库的 ACID 保证：

// 事务性文件操作
interface FileTransaction {
  id: string;
  operations: FileOperation[];
  rollbackLog: RollbackAction[];
  commit(): Promise<void>;
  rollback(): Promise<void>;
}

class FileOperator {
  async edit(params: EditParams): Promise<void> {
    const tx = await this.beginTransaction();
    
    try {
      // 1. 读取原文件（用于回滚）
      const original = await this.read(params.filePath);
      tx.recordRollback('Write', { filePath: params.filePath, content: original });
      
      // 2. 执行编辑
      const newContent = this.applyEdit(original, params.oldString, params.newString);
      
      // 3. 写入临时文件
      const tempPath = `${params.filePath}.tmp.${Date.now()}`;
      await this.write(tempPath, newContent);
      
      // 4. 原子性替换
      await this.atomicReplace(tempPath, params.filePath);
      
      // 5. 提交事务
      await tx.commit();
      
    } catch (error) {
      // 6. 出错回滚
      await tx.rollback();
      throw error;
    }
  }
  
  private async atomicReplace(tempPath: string, targetPath: string): Promise<void> {
    // Unix: rename 是原子操作
    // Windows: 使用 MoveFileEx with MOVEFILE_REPLACE_EXISTING
    await fs.rename(tempPath, targetPath);
  }
}

工程价值：

• 即使进程崩溃，文件也不会处于半写状态
• 支持撤销（Undo）操作
• 并发编辑时不会丢失数据

3.2 Grep 的并行搜索策略

对于大型项目（10万+ 文件），线性搜索不可接受：

class ParallelGrep {
  private readonly WORKER_COUNT = 4;
  
  async search(pattern: string, path: string): Promise<Match[]> {
    // 1. 快速过滤：只搜索文本文件
    const files = await this.getSearchableFiles(path);
    
    // 2. 分片：按文件大小均匀分配
    const chunks = this.distributeFiles(files, this.WORKER_COUNT);
    
    // 3. 并行搜索
    const results = await Promise.all(
      chunks.map(chunk => this.searchChunk(pattern, chunk))
    );
    
    // 4. 合并与排序（按相关性）
    return this.mergeAndRank(results.flat());
  }
  
  private distributeFiles(files: FileInfo[], workerCount: number): FileInfo[][] {
    // 按文件大小排序，使用轮询分配确保负载均衡
    const sorted = files.sort((a, b) => b.size - a.size);
    const chunks: FileInfo[][] = Array.from({ length: workerCount }, () => []);
    
    sorted.forEach((file, index) => {
      chunks[index % workerCount].push(file);
    });
    
    return chunks;
  }
  
  private async searchChunk(pattern: string, files: FileInfo[]): Promise<Match[]> {
    // 使用 ripgrep（如果可用）或 Node.js 流式读取
    if (this.hasRipgrep()) {
      return this.searchWithRipgrep(pattern, files);
    }
    
    // 回退到原生实现
    return this.searchWithNode(pattern, files);
  }
}

性能对比：

项目规模	线性搜索	并行搜索（4 workers）	ripgrep
1000 文件	200ms	80ms	20ms
10000 文件	2s	600ms	150ms
100000 文件	20s	5s	1.2s

3.3 Bash 的沙箱与隔离

执行用户命令是最大的安全风险点：

interface SandboxConfig {
  allowedCommands: string[];      // 白名单：git, npm, node, yarn, pnpm
  blockedPatterns: RegExp[];      // 黑名单：rm -rf /, > /etc/passwd
  workingDirectory: string;       // 只能在这个目录下操作
  timeout: number;                // 最大执行时间
  maxOutputSize: number;          // 防止内存溢出
  env: Record<string, string>;    // 受限的环境变量
}

class SandboxedBash {
  async execute(command: string, config: SandboxConfig): Promise<ExecutionResult> {
    // 1. 命令解析与验证
    const parsed = this.parseCommand(command);
    
    if (!this.isAllowed(parsed, config)) {
      throw new SecurityError(`Command not allowed: ${command}`);
    }
    
    // 2. 路径规范化与检查
    const cwd = path.resolve(config.workingDirectory);
    if (!this.isWithinWorkingDir(cwd, config.workingDirectory)) {
      throw new SecurityError('Attempted directory traversal');
    }
    
    // 3. 使用受限 shell 执行
    const child = spawn('bash', ['-c', command], {
      cwd,
      env: this.sanitizeEnv(config.env),
      timeout: config.timeout,
      maxBuffer: config.maxOutputSize
    });
    
    // 4. 实时监控
    return new Promise((resolve, reject) => {
      const timeout = setTimeout(() => {
        child.kill('SIGTERM');
        reject(new TimeoutError(`Command timed out after ${config.timeout}ms`));
      }, config.timeout);
      
      child.on('close', (code) => {
        clearTimeout(timeout);
        resolve({ code, stdout, stderr });
      });
    });
  }
  
  private isAllowed(parsed: ParsedCommand, config: SandboxConfig): boolean {
    // 检查是否在白名单
    if (!config.allowedCommands.includes(parsed.command)) {
      return false;
    }
    
    // 检查是否匹配黑名单模式
    if (config.blockedPatterns.some(p => p.test(parsed.raw))) {
      return false;
    }
    
    return true;
  }
}

---

四、前端工程化实战：与现有工具链的融合

4.1 与 Vite 的深度集成

// OpenCode 理解 Vite 配置并据此决策
interface ViteProjectContext {
  config: ViteConfig;
  plugins: Plugin[];
  aliases: Record<string, string>;  // @/ -> ./src
  env: Record<string, string>;      // import.meta.env
}

class ViteIntegration {
  async analyzeProject(root: string): Promise<ViteProjectContext> {
    // 1. 读取 vite.config.ts
    const configPath = await this.findConfig(root);
    const configContent = await read(configPath);
    
    // 2. 解析配置（不执行，静态分析）
    const config = this.parseConfig(configContent);
    
    // 3. 提取关键信息
    return {
      config,
      plugins: this.extractPlugins(config),
      aliases: this.resolveAliases(config),
      env: await this.loadEnv(root, config.mode)
    };
  }
  
  // 根据 Vite 配置生成导入语句
  generateImport(source: string, ctx: ViteProjectContext): string {
    // 检查是否是路径别名
    for (const [alias, replacement] of Object.entries(ctx.aliases)) {
      if (source.startsWith(alias)) {
        return `import X from '${source}';`;
      }
    }
    
    // 检查是否是 npm 包
    if (this.isNpmPackage(source)) {
      return `import X from '${source}';`;
    }
    
    // 相对路径
    return `import X from './${source}';`;
  }
}

实际应用场景：

当用户说"创建一个新的 API 客户端"，OpenCode 会：

1. 读取 vite.config.ts 发现使用了 @/ 别名指向 src/
2. 在 src/api/client.ts 创建文件（而非 ./api/client.ts）
3. 使用项目已有的 HTTP 客户端（axios/fetch/ky）
4. 遵循现有的错误处理模式

4.2 TypeScript 类型系统的利用

OpenCode 不仅生成 TypeScript 代码，还利用类型信息进行决策：

class TypeScriptAnalyzer {
  // 分析类型定义来理解数据结构
  async analyzeInterface(filePath: string, interfaceName: string): Promise<TypeInfo> {
    const content = await read(filePath);
    
    // 使用 TypeScript Compiler API
    const sourceFile = ts.createSourceFile(
      filePath,
      content,
      ts.ScriptTarget.Latest,
      true
    );
    
    // 查找接口定义
    const interfaceDecl = this.findInterface(sourceFile, interfaceName);
    
    return {
      name: interfaceName,
      properties: interfaceDecl.members.map(m => ({
        name: m.name?.getText(),
        type: m.type?.getText(),
        optional: m.questionToken !== undefined
      })),
      extends: interfaceDecl.heritageClauses?.map(h => h.types.map(t => t.getText()))
    };
  }
  
  // 根据类型生成 Zod Schema（运行时验证）
  generateZodSchema(typeInfo: TypeInfo): string {
    const fields = typeInfo.properties.map(prop => {
      let schema = `z.${this.mapTypeToZod(prop.type)}()`;
      
      if (prop.optional) {
        schema += '.optional()';
      }
      
      return `  ${prop.name}: ${schema}`;
    });
    
    return `const ${typeInfo.name}Schema = z.object({\n${fields.join(',\n')}\n});`;
  }
}

为什么重要：

前端项目越来越多使用类型优先开发（Type-First Development）。OpenCode 能够理解类型定义，从而：

• 生成与现有类型兼容的代码
• 推断 API 响应结构
• 创建运行时验证（Zod/Yup）与编译时类型保持一致

4.3 与测试框架的集成

// 自动分析测试覆盖率和生成测试用例
class TestIntegration {
  async generateTestsForFile(filePath: string): Promise<string> {
    // 1. 读取源代码
    const source = await read(filePath);
    
    // 2. 分析导出内容
    const exports = this.analyzeExports(source);
    
    // 3. 查找现有测试文件
    const testFile = await this.findTestFile(filePath);
    const existingTests = testFile ? await read(testFile) : '';
    
    // 4. 确定测试策略
    const strategy = this.determineTestStrategy(filePath, exports);
    
    // 5. 生成测试代码
    const tests = exports.map(exp => this.generateTestCase(exp, strategy));
    
    return this.formatTestFile(tests, strategy);
  }
  
  private determineTestStrategy(filePath: string, exports: Export[]): TestStrategy {
    // React 组件
    if (filePath.includes('.tsx') && exports.some(e => e.isComponent)) {
      return {
        framework: 'vitest',
        library: 'testing-library/react',
        approach: 'behavioral'  // 测试行为而非实现
      };
    }
    
    // 工具函数
    if (exports.every(e => e.isFunction)) {
      return {
        framework: 'vitest',
        approach: 'unit',
        coverage: 'branch'  // 分支覆盖
      };
    }
    
    // API 客户端
    if (filePath.includes('/api/')) {
      return {
        framework: 'vitest',
        library: 'msw',  // Mock Service Worker
        approach: 'integration'
      };
    }
  }
}

---

五、性能优化与极限场景

5.1 大项目的处理策略

对于超大型项目（如企业级 Monorepo）：

class LargeProjectOptimizer {
  // 延迟加载：只加载必要的部分
  async lazyLoad(projectRoot: string, targetFile: string): Promise<ProjectContext> {
    // 1. 构建依赖图（增量更新）
    const dependencyGraph = await this.buildDependencyGraph(projectRoot);
    
    // 2. 找出目标文件的依赖闭包
    const closure = this.getDependencyClosure(dependencyGraph, targetFile);
    
    // 3. 只加载闭包内的文件
    const relevantFiles = closure.map(node => node.filePath);
    
    return {
      files: await this.loadFiles(relevantFiles),
      graph: dependencyGraph.subgraph(closure)
    };
  }
  
  // 增量更新：缓存未变更的文件
  private fileCache: Map<string, CacheEntry> = new Map();
  
  async readWithCache(filePath: string): Promise<string> {
    const stats = await fs.stat(filePath);
    const cached = this.fileCache.get(filePath);
    
    if (cached && cached.mtime === stats.mtime.getTime()) {
      return cached.content;
    }
    
    const content = await read(filePath);
    this.fileCache.set(filePath, {
      content,
      mtime: stats.mtime.getTime(),
      size: stats.size
    });
    
    return content;
  }
}

5.2 并发控制与资源管理

class ResourceManager {
  private semaphore: Semaphore;
  private activeTasks: Map<string, AbortController> = new Map();
  
  constructor(private maxConcurrency: number = 4) {
    this.semaphore = new Semaphore(maxConcurrency);
  }
  
  async executeTask<T>(
    taskId: string, 
    task: () => Promise<T>,
    priority: 'high' | 'normal' | 'low' = 'normal'
  ): Promise<T> {
    // 取消低优先级任务
    if (priority === 'high') {
      this.cancelLowPriorityTasks();
    }
    
    const controller = new AbortController();
    this.activeTasks.set(taskId, controller);
    
    try {
      // 获取信号量
      await this.semaphore.acquire();
      
      // 执行任务
      return await task();
      
    } finally {
      this.semaphore.release();
      this.activeTasks.delete(taskId);
    }
  }
  
  cancelTask(taskId: string): void {
    const controller = this.activeTasks.get(taskId);
    if (controller) {
      controller.abort();
      this.activeTasks.delete(taskId);
    }
  }
}

5.3 Token 优化的高级技巧

class TokenOptimizer {
  // 分层摘要：不同粒度保留不同细节
  createHierarchicalSummary(files: FileContent[]): HierarchicalSummary {
    return {
      // 第一层：项目结构（所有文件）
      structure: files.map(f => ({
        path: f.path,
        exports: f.exports.map(e => e.name),
        dependencies: f.imports.map(i => i.source)
      })),
      
      // 第二层：最近修改的文件（详细内容）
      recent: files
        .filter(f => f.lastModified > Date.now() - 24 * 60 * 60 * 1000)
        .map(f => ({
          path: f.path,
          content: f.content
        })),
      
      // 第三层：相关文件（基于依赖图）
      related: this.getRelatedFiles(files, this.currentTask)
    };
  }
  
  // 代码压缩：移除对 LLM 理解无关的内容
  compressCode(code: string): string {
    return code
      // 保留 JSDoc 注释（类型信息）
      .replace(/\/\*\*[\s\S]*?\*\//g, keep => keep)
      // 移除实现注释
      .replace(/\/\/.*$/gm, '')
      // 压缩空行
      .replace(/\n{3,}/g, '\n\n')
      // 保留 console.log 等调试用代码的位置标记
      .replace(/console\.(log|warn|error)\(.*\);?/g, '// [debug]');
  }
}

---

六、安全模型与威胁防护

6.1 多层防御架构

┌─────────────────────────────────────────────────────────┐
│                    安全防御层                            │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  第 1 层：输入过滤                                       │
│  ├── 恶意代码模式识别（正则 + AST 分析）                  │
│  └── 敏感信息检测（密钥、密码、Token）                    │
│                                                         │
│  第 2 层：命令沙箱                                       │
│  ├── 白名单命令（git, npm, node）                        │
│  ├── 路径遍历防护                                        │
│  └── 资源限制（CPU、内存、时间）                          │
│                                                         │
│  第 3 层：代码审计                                       │
│  ├── 静态分析（eslint, semgrep）                         │
│  ├── 依赖检查（npm audit）                               │
│  └── 运行时防护（eval、Function 构造器拦截）              │
│                                                         │
│  第 4 层：操作日志                                       │
│  ├── 所有文件变更记录                                    │
│  ├── 命令执行历史                                        │
│  └── 支持完整回滚                                        │
│                                                         │
└─────────────────────────────────────────────────────────┘

6.2 恶意代码检测

class SecurityScanner {
  private dangerousPatterns: Pattern[] = [
    // 动态代码执行
    {
      name: 'eval_usage',
      pattern: /\beval\s*\(/,
      severity: 'high',
      description: 'Dynamic code execution via eval'
    },
    {
      name: 'function_constructor',
      pattern: /new\s+Function\s*\(/,
      severity: 'high',
      description: 'Dynamic code execution via Function constructor'
    },
    // 文件系统操作
    {
      name: 'fs_unrestricted',
      pattern: /fs\.(writeFile|unlink|rmdir)\s*\([^)]*\+\s*[^)]*\)/,
      severity: 'critical',
      description: 'Potential path traversal in file operations'
    },
    // 网络请求
    {
      name: 'unrestricted_fetch',
      pattern: /fetch\s*\(\s*[^'"`]/,
      severity: 'medium',
      description: 'Fetch with dynamic URL'
    },
    // 敏感 API
    {
      name: 'clipboard_access',
      pattern: /navigator\.clipboard/,
      severity: 'medium',
      description: 'Clipboard access'
    },
    {
      name: 'service_worker',
      pattern: /navigator\.serviceWorker\.register/,
      severity: 'low',
      description: 'Service Worker registration'
    }
  ];
  
  async scan(code: string, context: SecurityContext): Promise<ScanResult> {
    const findings: Finding[] = [];
    
    // 1. 正则匹配（快速过滤）
    for (const pattern of this.dangerousPatterns) {
      if (pattern.pattern.test(code)) {
        findings.push({
          rule: pattern.name,
          severity: pattern.severity,
          message: pattern.description,
          line: this.findLineNumber(code, pattern.pattern)
        });
      }
    }
    
    // 2. AST 深度分析（精确判断）
    const astFindings = await this.analyzeAST(code, context);
    findings.push(...astFindings);
    
    // 3. 依赖分析
    const deps = this.extractDependencies(code);
    const knownVulnerabilities = await this.checkVulnerabilities(deps);
    findings.push(...knownVulnerabilities);
    
    return {
      findings,
      isSafe: !findings.some(f => f.severity === 'critical'),
      riskScore: this.calculateRiskScore(findings)
    };
  }
  
  private async analyzeAST(code: string, context: SecurityContext): Promise<Finding[]> {
    const ast = parse(code, {
      ecmaVersion: 'latest',
      sourceType: 'module'
    });
    
    const findings: Finding[] = [];
    
    // 遍历 AST 查找危险模式
    walk(ast, {
      CallExpression(node) {
        // 检查是否是危险的函数调用
        if (isDangerousCall(node, context)) {
          findings.push({
            rule: 'dangerous_call',
            severity: 'high',
            message: `Dangerous function call: ${node.callee.name}`,
            line: node.loc?.start.line
          });
        }
      },
      ImportDeclaration(node) {
        // 检查是否引入危险模块
        if (isDangerousModule(node.source.value)) {
          findings.push({
            rule: 'dangerous_import',
            severity: 'high',
            message: `Suspicious module import: ${node.source.value}`,
            line: node.loc?.start.line
          });
        }
      }
    });
    
    return findings;
  }
}

---

七、扩展性设计：自定义工具与 Skill 系统

7.1 工具注册机制

// 自定义工具示例：AST 转换
interface CustomTool {
  name: string;
  description: string;
  parameters: JSONSchema;
  execute: (params: any, context: ToolContext) => Promise<ToolResult>;
}

const astTransformTool: CustomTool = {
  name: 'ASTTransform',
  description: 'Transform code using AST operations',
  parameters: {
    type: 'object',
    properties: {
      filePath: { type: 'string' },
      transformations: {
        type: 'array',
        items: {
          type: 'object',
          properties: {
            type: { 
              enum: ['rename', 'remove', 'add', 'replace'],
              type: 'string'
            },
            target: { type: 'string' },
            replacement: { type: 'string' }
          }
        }
      }
    },
    required: ['filePath', 'transformations']
  },
  
  async execute(params, context) {
    const { filePath, transformations } = params;
    
    // 读取并解析
    const code = await context.read(filePath);
    const ast = parse(code, { ecmaVersion: 'latest' });
    
    // 应用转换
    for (const transform of transformations) {
      switch (transform.type) {
        case 'rename':
          this.renameIdentifier(ast, transform.target, transform.replacement);
          break;
        case 'remove':
          this.removeNode(ast, transform.target);
          break;
        // ...
      }
    }
    
    // 生成代码
    const output = generate(ast);
    
    // 写入文件
    await context.write(filePath, output);
    
    return {
      success: true,
      data: { transformed: transformations.length }
    };
  }
};

// 注册工具
ToolRegistry.register(astTransformTool);

7.2 Skill 系统架构

Skill 是可复用的领域知识包：

// React Performance Optimization Skill
const reactPerformanceSkill = {
  name: 'react-performance',
  version: '1.0.0',
  
  // 知识库：常见性能问题及解决方案
  patterns: [
    {
      name: 'unnecessary_re_render',
      detect: (code: string) => {
        // 检测是否缺少 memo/useMemo
        return code.includes('const') && 
               !code.includes('useMemo') &&
               !code.includes('React.memo');
      },
      fix: (component: ComponentInfo) => {
        return `
          // 添加 React.memo 防止不必要的重渲染
          export default memo(${component.name});
          
          // 或使用 useMemo 缓存计算结果
          const computedValue = useMemo(() => {
            return expensiveComputation(props.data);
          }, [props.data]);
        `;
      }
    },
    {
      name: 'inline_function',
      detect: (code: string) => {
        // 检测内联函数导致的重渲染
        return /onClick=\{\(\).*=>/.test(code);
      },
      fix: () => {
        return `
          // 将内联函数提取到 useCallback
          const handleClick = useCallback(() => {
            // ...
          }, [deps]);
          
          <button onClick={handleClick}>Click</button>
        `;
      }
    }
  ],
  
  // 工具增强
  tools: [
    {
      name: 'analyzePerformance',
      description: 'Analyze React component performance',
      execute: async (componentPath: string) => {
        // 使用 React DevTools Profiler API
        // 分析渲染次数和耗时
      }
    }
  ],
  
  // 代码模板
  templates: {
    'optimized-component': `
      import { memo, useMemo, useCallback } from 'react';
      
      interface Props {
        /* ... */
      }
      
      const {{componentName}} = memo(function {{componentName}}(props: Props) {
        const computed = useMemo(() => {
          return /* expensive computation */;
        }, [/* deps */]);
        
        const handleEvent = useCallback(() => {
          /* handler */
        }, [/* deps */]);
        
        return (
          /* JSX */
        );
      });
      
      export default {{componentName}};
    `
  }
};

// 加载 Skill
await SkillManager.load(reactPerformanceSkill);

---

八、最佳实践与反模式

8.1 高效使用 Checklist

需求澄清阶段

• 提供明确的输入/输出示例
• 说明边界条件和错误处理要求
• 指定技术栈和版本约束
• 提及已有的相关代码或模式

探索阶段

• 使用 Glob 了解项目结构
• 读取 package.json 确认依赖
• 搜索现有实现避免重复
• 检查测试文件了解预期行为

实现阶段

• 优先修改现有代码而非重写
• 保持与项目编码风格一致
• 添加必要的类型定义
• 考虑错误处理和边界情况

验证阶段

• 运行 linter 检查代码风格
• 执行测试套件
• 手动验证关键路径
• 检查性能影响（ bundle 大小、运行时性能）

8.2 常见反模式

反模式 1：过度抽象

// ❌ 为了使用设计模式而使用
class AbstractComponentFactory {
  createFactory(type: string) {
    return new ComponentFactory(type);
  }
}

class ComponentFactory {
  constructor(private type: string) {}
  
  create() {
    switch(this.type) {
      case 'button': return <Button />;
      case 'input': return <Input />;
    }
  }
}

// ✅ 简单直接
const components = {
  button: Button,
  input: Input
};

const Component = components[type];

反模式 2：忽视类型安全

// ❌ any 滥用
function processData(data: any) {
  return data.map(item => item.value);
}

// ✅ 明确类型
interface DataItem {
  id: string;
  value: number;
}

function processData(data: DataItem[]): number[] {
  return data.map(item => item.value);
}

反模式 3：过早优化

// ❌ 不必要的 memoization
const SimpleComponent = memo(function SimpleComponent({ text }) {
  return <span>{text}</span>;
});

// ✅ 先测量，后优化
// 只有当组件确实存在性能问题时才使用 memo

反模式 4：忽视可访问性

// ❌ 不可访问的自定义组件
<div onClick={handleClick}>Click me</div>

// ✅ 语义化 + 键盘支持
<button onClick={handleClick}>Click me</button>
// 或
<div 
  role="button" 
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={(e) => e.key === 'Enter' && handleClick()}
>
  Click me
</div>

8.3 团队协作规范

代码审查 Prompt 模板

请审查这段代码，关注：
1. 类型安全：是否有 any 或类型断言？
2. 错误处理：是否处理了异步操作的错误？
3. 性能：是否有不必要的重渲染或计算？
4. 可访问性：是否遵循 ARIA 规范？
5. 测试：是否易于测试？边界情况是否覆盖？

[粘贴代码]

重构任务 Prompt 模板

请重构 src/components/LegacyComponent.tsx：

当前问题：
- [ ] 组件超过 300 行
- [ ] 使用了 class 组件
- [ ] 混合了业务逻辑和 UI

目标：
- 拆分为多个小组件
- 转换为函数组件 + Hooks
- 业务逻辑抽离到自定义 Hook
- 保持现有功能不变（所有测试通过）

技术约束：
- 使用 React 18
- 使用 TypeScript 严格模式
- 使用现有的 hooks/useAuth 处理认证

---

结语

OpenCode 代表了AI 原生开发工具的新范式。它不是简单的代码生成器，而是：

1. 架构设计伙伴：帮助思考系统结构、模块划分
2. 代码审查助手：发现潜在问题、提供改进建议
3. 工程化加速器：自动化重复工作、强制执行最佳实践
4. 知识库：集成领域专家经验、提供可复用的 Skill

对于高级前端工程师而言，掌握 OpenCode 意味着：

• 从重复性编码工作中解放出来，专注架构设计
• 借助 AI 的能力处理更大规模、更复杂的系统
• 将团队的最佳实践固化为可复用的自动化流程

但请记住：

AI 是杠杆，它会放大你的能力——无论是好的还是坏的。 优秀的工程师用 AI 写出更好的代码， 平庸的工程师用 AI 更快地写出糟糕的代码。

理解工具的原理、掌握正确的使用方法、保持批判性思维，才能真正发挥 OpenCode 的价值。

---

延伸阅读

• ReAct: Synergizing Reasoning and Acting in Language Models
• LangChain 架构设计
• AST Explorer - 理解代码分析的基础
• Vite Plugin API - 构建工具扩展机制