03 - UI 组件系统（components/）

概述

基于 React + Ink 构建的终端 UI 组件（389 个文件）。

源码位置：src/components/

组件分类

核心 UI 组件

组件	功能
Spinner.tsx	加载旋转器
Message.tsx	消息渲染
ToolOutput.tsx	工具输出显示
PermissionDialog.tsx	权限确认对话框

输入组件

组件	功能
TextInput.tsx	文本输入
InputBuffer.tsx	输入缓冲

布局组件

• 终端尺寸适配
• 虚拟滚动（useVirtualScroll）
• 分屏布局

渲染系统

• 终端颜色和样式
• Markdown 渲染
• 代码高亮
• 进度条显示

渲染架构

main.tsx
  └── App 组件
      ├── 消息列表（虚拟滚动）
      │   ├── UserMessage
      │   ├── AssistantMessage
      │   └── ToolMessage
      ├── 输入区域
      └── 状态栏

与 Ink 框架的关系

Ink 提供 React 到终端的渲染桥梁：

• <Box> → 终端布局
• <Text> → 终端文本输出
• Yoga 布局引擎 → Flexbox 布局