Skip to content

REPL 交互界面

概述

REPL (Read-Eval-Print Loop) 是 Claude Code 的核心交互界面。它是一个 React/Ink 组件,处理用户输入、消息显示、工具权限审批和键盘快捷键。

Source: src/screens/REPL.tsx (3000+ 行)

组件结构

核心 Hooks

REPL 使用了大量自定义 Hooks:

typescript
// Source: src/screens/REPL.tsx (顶部)
useInput(...)                // 键盘输入
useSearchInput(...)          // 搜索编辑
useTerminalSize(...)         // 响应式尺寸
useSearchHighlight(...)      // 搜索高亮
useAppState(selector)        // 全局状态读取
useSetAppState()             // 全局状态写入
useGlobalKeybindings(...)    // 全局快捷键
useCommandKeybindings(...)   // 命令快捷键

输入处理流程

搜索功能

/ 进入搜索模式:

typescript
// Source: src/screens/REPL.tsx:369-473
const TranscriptSearchBar = () => {
  // 增量搜索索引预热
  // 上/下箭头导航匹配结果
  // Esc 退出搜索
  // 高亮匹配文本(反转)
  // 当前匹配项(黄色)
};

搜索使用 WeakMap 缓存小写化文本,避免每次按键都重新分配:

typescript
// Source: src/components/VirtualMessageList.tsx:24-30
const fallbackLowerCache: WeakMap<RenderableMessage, string> = new WeakMap();
// WeakMap 在消息被压缩替换后自动 GC

键盘快捷键

快捷键功能
Enter提交输入
Ctrl+C中断当前操作 / 退出
Ctrl+L清屏
Ctrl+O切换详细/简洁模式
Shift+A切换 Fast 模式
Shift+T切换思考模式
Ctrl+M循环权限模式
/进入搜索
Esc退出搜索 / 取消
↑/↓历史导航 / 搜索结果导航

动画终端标题

typescript
// Source: src/screens/REPL.tsx:485+
const AnimatedTerminalTitle = () => {
  // 查询进行中时显示旋转动画
  // "⠂⠐" 样式的微动画
  // 空闲时显示静态标题
};

下一步