@coderlzw/react-ansi-log

一个用于展示终端输出日志的 React 组件，支持 ANSI 颜色显示和自定义窗口样式。

特性

• 🎨 可定制：支持 macOS 和默认两种窗口样式
• 🌓 主题支持：内置亮色和暗色主题
• 📝 ANSI 支持：完整支持 ANSI 转义序列的颜色和样式
• 📊 行号显示：可选的行号显示功能
• 🎭 平滑动画：优雅的展开/折叠动画
• 📱 响应式：适配各种屏幕尺寸
• 🎯 可访问性：支持键盘操作和屏幕阅读器

安装

npm install @coderlzw/react-ansi-log
# 或
yarn add @coderlzw/react-ansi-log
# 或
pnpm add @coderlzw/react-ansi-log

组件

AnsiLog

一个用于展示终端输出日志的组件，支持 ANSI 颜色显示和自定义窗口样式。

属性

| 属性名 | 类型 | 默认值 | 描述 | |--------|------|--------|------| | content | string | - | 终端输出内容（支持 ANSI 转义序列） | | title | string | 'Log' | 窗口标题 | | defaultCollapsed | boolean | false | 默认是否折叠 | | maxHeight | number | - | 内容区域最大高度 | | variant | 'macos' | 'default' | 'macos' | 窗口样式变体 | | theme | 'light' | 'dark' | 'dark' | 主题样式 | | showLineNumbers | boolean | false | 是否显示行号 | | showHeader | boolean | true | 是否显示窗口标题栏 | | onCollapseChange | (collapsed: boolean) => void | - | 折叠状态改变回调 | | onAnimationStart | () => void | - | 动画开始回调 | | onAnimationEnd | () => void | - | 动画结束回调 |

示例

import { AnsiLog } from '@coderlzw/react-ansi-log';

function App() {
  return (
    <div>
      {/* 基础用法 */}
      <AnsiLog
        content="Hello, World!"
        title="Log Output"
      />

      {/* 带 ANSI 颜色的输出 */}
      <AnsiLog
        content="\x1b[32mSuccess!\x1b[0m\n\x1b[31mError!\x1b[0m"
        variant="macos"
        theme="light"
        showLineNumbers
      />

      {/* 自定义高度和折叠状态 */}
      <AnsiLog
        content="\x1b[33mWarning: This is a test message\x1b[0m"
        maxHeight={300}
        defaultCollapsed={true}
        onCollapseChange={(collapsed) => console.log('Window collapsed:', collapsed)}
      />
    </div>
  );
}

样式

组件使用 CSS 模块进行样式设置，你可以通过自定义类名来覆盖默认样式。

主要样式类

• .ansi-log: 日志窗口容器
• .ansi-log-header: 窗口标题栏
• .ansi-log-content: 内容区域
• .ansi-log-code: 代码显示区域
• .ansi-log-line-numbers: 行号区域

浏览器支持

• Chrome >= 60
• Firefox >= 60
• Safari >= 12
• Edge >= 79

开发

# 克隆仓库
git clone https://github.com/coderlzw/react-ansi-log.git

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

贡献

欢迎提交 Pull Request 或创建 Issue！

许可证

MIT © coderlzw