{"_id":"@coderlzw/react-ansi-terminal","name":"@coderlzw/react-ansi-terminal","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@coderlzw/react-ansi-terminal","version":"0.0.1","description":"A React component for displaying terminal output logs with ANSI color support and customizable window styles","type":"module","main":"./dist/index.js","publishConfig":{"access":"public"},"scripts":{"build":"tsup","dev":"tsup --watch","lint":"eslint --fix src/**/*.ts","lint:check":"eslint src/**/*.ts","format":"prettier --write src/**/*.ts","format:check":"prettier --check src/**/*.ts"},"repository":{"type":"git","url":"git+https://github.com/coderlzw/react-ansi-log.git"},"bugs":{"url":"https://github.com/coderlzw/react-ansi-log/issues"},"homepage":"https://github.com/coderlzw/react-ansi-log#readme","keywords":["react","ansi","log","terminal","output","component","ui","theme"],"author":{"name":"coderlzw"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"dependencies":{"ansi-to-html":"^0.7.2"},"devDependencies":{"@eslint/js":"^9.25.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","eslint":"^9.25.0","eslint-config-prettier":"^10.1.5","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.19","globals":"^16.1.0","prettier":"3.5.3","tsup":"^8.5.0","typescript":"^5.0.0","typescript-eslint":"^8.32.1"},"packageManager":"pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977","_id":"@coderlzw/react-ansi-terminal@0.0.1","gitHead":"6645cf88bd60f5940addd099ba98c03914c755b6","types":"./dist/index.d.ts","_nodeVersion":"20.19.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-kv7WDdP/qixlIvGBP04hHHPQr6mZR5hkxPaKcJpLwIZGSaD5roZ2Hph9GAMmi7gSkXiOvzG+fW8xg2wXRBLZBQ==","shasum":"84bb50ecf3195bcd4cb8ce2e4dcc6231bd073a4c","tarball":"https://registry.npmjs.org/@coderlzw/react-ansi-terminal/-/react-ansi-terminal-0.0.1.tgz","fileCount":5,"unpackedSize":24971,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICun+xunpjaaT8raOXyuBoEmlZgBMBG9OKsztsDJaTIlAiBeEYMxirw3YoQWjV4s+T8bUHke9y/clmt4fFjx4Zs4mQ=="}]},"_npmUser":{"name":"coderlzw","email":"314607329@qq.com"},"directories":{},"maintainers":[{"name":"coderlzw","email":"314607329@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-ansi-terminal_0.0.1_1747898250657_0.24637096914409007"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-22T07:17:30.545Z","0.0.1":"2025-05-22T07:17:30.871Z","modified":"2025-05-22T07:17:31.136Z"},"maintainers":[{"name":"coderlzw","email":"314607329@qq.com"}],"description":"A React component for displaying terminal output logs with ANSI color support and customizable window styles","homepage":"https://github.com/coderlzw/react-ansi-log#readme","keywords":["react","ansi","log","terminal","output","component","ui","theme"],"repository":{"type":"git","url":"git+https://github.com/coderlzw/react-ansi-log.git"},"author":{"name":"coderlzw"},"bugs":{"url":"https://github.com/coderlzw/react-ansi-log/issues"},"license":"MIT","readme":"# @coderlzw/react-ansi-log\n\n一个用于展示终端输出日志的 React 组件，支持 ANSI 颜色显示和自定义窗口样式。\n\n[![npm version](https://img.shields.io/npm/v/@coderlzw/react-ansi-log.svg)](https://www.npmjs.com/package/@coderlzw/react-ansi-log)\n[![npm downloads](https://img.shields.io/npm/dm/@coderlzw/react-ansi-log.svg)](https://www.npmjs.com/package/@coderlzw/react-ansi-log)\n[![license](https://img.shields.io/npm/l/@coderlzw/react-ansi-log.svg)](https://github.com/coderlzw/react-ansi-log/blob/main/LICENSE)\n\n## 特性\n\n- 🎨 可定制：支持 macOS 和默认两种窗口样式\n- 🌓 主题支持：内置亮色和暗色主题\n- 📝 ANSI 支持：完整支持 ANSI 转义序列的颜色和样式\n- 📊 行号显示：可选的行号显示功能\n- 🎭 平滑动画：优雅的展开/折叠动画\n- 📱 响应式：适配各种屏幕尺寸\n- 🎯 可访问性：支持键盘操作和屏幕阅读器\n\n## 安装\n\n```bash\nnpm install @coderlzw/react-ansi-log\n# 或\nyarn add @coderlzw/react-ansi-log\n# 或\npnpm add @coderlzw/react-ansi-log\n```\n\n## 组件\n\n### AnsiLog\n\n一个用于展示终端输出日志的组件，支持 ANSI 颜色显示和自定义窗口样式。\n\n#### 属性\n\n| 属性名 | 类型 | 默认值 | 描述 |\n|--------|------|--------|------|\n| content | string | - | 终端输出内容（支持 ANSI 转义序列） |\n| title | string | 'Log' | 窗口标题 |\n| defaultCollapsed | boolean | false | 默认是否折叠 |\n| maxHeight | number | - | 内容区域最大高度 |\n| variant | 'macos' \\| 'default' | 'macos' | 窗口样式变体 |\n| theme | 'light' \\| 'dark' | 'dark' | 主题样式 |\n| showLineNumbers | boolean | false | 是否显示行号 |\n| showHeader | boolean | true | 是否显示窗口标题栏 |\n| onCollapseChange | (collapsed: boolean) => void | - | 折叠状态改变回调 |\n| onAnimationStart | () => void | - | 动画开始回调 |\n| onAnimationEnd | () => void | - | 动画结束回调 |\n\n#### 示例\n\n```tsx\nimport { AnsiLog } from '@coderlzw/react-ansi-log';\n\nfunction App() {\n  return (\n    <div>\n      {/* 基础用法 */}\n      <AnsiLog\n        content=\"Hello, World!\"\n        title=\"Log Output\"\n      />\n\n      {/* 带 ANSI 颜色的输出 */}\n      <AnsiLog\n        content=\"\\x1b[32mSuccess!\\x1b[0m\\n\\x1b[31mError!\\x1b[0m\"\n        variant=\"macos\"\n        theme=\"light\"\n        showLineNumbers\n      />\n\n      {/* 自定义高度和折叠状态 */}\n      <AnsiLog\n        content=\"\\x1b[33mWarning: This is a test message\\x1b[0m\"\n        maxHeight={300}\n        defaultCollapsed={true}\n        onCollapseChange={(collapsed) => console.log('Window collapsed:', collapsed)}\n      />\n    </div>\n  );\n}\n```\n\n## 样式\n\n组件使用 CSS 模块进行样式设置，你可以通过自定义类名来覆盖默认样式。\n\n### 主要样式类\n\n- `.ansi-log`: 日志窗口容器\n- `.ansi-log-header`: 窗口标题栏\n- `.ansi-log-content`: 内容区域\n- `.ansi-log-code`: 代码显示区域\n- `.ansi-log-line-numbers`: 行号区域\n\n## 浏览器支持\n\n- Chrome >= 60\n- Firefox >= 60\n- Safari >= 12\n- Edge >= 79\n\n## 开发\n\n```bash\n# 克隆仓库\ngit clone https://github.com/coderlzw/react-ansi-log.git\n\n# 安装依赖\nnpm install\n\n# 开发模式\nnpm run dev\n\n# 构建\nnpm run build\n```\n\n## 贡献\n\n欢迎提交 Pull Request 或创建 Issue！\n\n## 许可证\n\nMIT © [coderlzw](https://github.com/coderlzw)\n","readmeFilename":"README.md","_rev":"1-e82b81d149182dd78394ae646a0f00eb"}