# terminal-show

**Repository Path**: jasydong/terminal-show

## Basic Information

- **Project Name**: terminal-show
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-18
- **Last Updated**: 2026-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Terminal Show

一个纯静态网页应用，展示终端命令行动画效果。无需构建系统、依赖或服务器。

## 预览

演示真实的终端打字效果，包括：
- 命令输入动画（带提示符和跟随光标）
- 语法高亮（关键词、字符串等）
- 多样式输出（成功、错误、警告、信息、暗淡、粗体）
- 进度条动画
- 播放控制（播放/暂停/重置/速度调节）

## 快速开始

### 运行项目

只需在浏览器中打开 `index.html`：

```bash
# 使用 Python 内置服务器
python3 -m http.server 8000

# 然后访问 http://localhost:8000
```

或直接双击 `index.html` 文件在浏览器中打开。

## 文件结构

- `index.html` - 主入口文件，包含终端 UI 结构
- `terminal.js` - `TerminalAnimator` 类，处理命令输入、输出显示和播放控制
- `terminal.css` - 终端窗口、语法高亮和控制器的样式

## 核心功能

### TerminalAnimator 类

应用核心是 `TerminalAnimator` 类，负责：

1. **脚本数据模型** - 预录制的终端会话定义为脚本对象数组，支持的类型：
   - `command` - 带可选关键词高亮的打字动画
   - `output` - 多行输出，支持多种样式
   - `progress` - 带持续时间的进度条动画
   - `typing` - 自由文本打字效果
   - `pause` - 延迟暂停

2. **动画控制** - 使用 `AbortController` 实现取消、`speedMultiplier` 控制播放速度、维护 `currentAnimation` 索引实现从当前位置暂停/继续

3. **输出元素** - 所有渲染内容动态追加到 `#terminalOutput` DOM 元素

## 扩展脚本

通过修改 `getDefaultScripts()` 或使用 `addScript()` / `setScripts()` 添加新的终端序列：

```javascript
terminal.addScript({
    type: 'command',
    text: 'your-command --flag',
    highlight: ['your-command', '--flag']
});

terminal.addScript({
    type: 'output',
    lines: [
        { text: 'Output message', style: 'success' }
    ],
    delay: 50
});
```

## 自定义主题

颜色通过 CSS 自定义属性定义在 `:root` 中（如 `--terminal-green`、`--terminal-pink`）。修改这些变量即可更改主题。

```css
:root {
    --terminal-green: #50fa7b;
    --terminal-pink: #ff79c6;
    --terminal-blue: #6272a4;
    /* ... 更多颜色 */
}
```

## 脚本类型详解

### command - 命令输入
```javascript
{
    type: 'command',
    text: 'npm install react',
    highlight: ['npm', 'install', 'react']  // 可选：高亮关键词
}
```

### output - 输出显示
```javascript
{
    type: 'output',
    lines: [
        { text: 'Success message', style: 'success' },
        { text: 'Warning message', style: 'warning' },
        { text: 'Error message', style: 'error' },
        { text: 'Info message', style: 'info' },
        { text: 'Dim text', style: 'dim' },
        { text: 'Bold text', style: 'bold' },
        { text: 'Success bold', style: 'success bold' }  // 组合样式
    ],
    delay: 50  // 每行显示间隔（毫秒）
}
```

### progress - 进度条
```javascript
{
    type: 'progress',
    text: 'Building...',
    duration: 3000  // 动画持续时间（毫秒）
}
```

### typing - 自由打字
```javascript
{
    type: 'typing',
    text: 'Typing some text...',
    delay: 50  // 每个字符的延迟（毫秒）
}
```

### pause - 暂停
```javascript
{
    type: 'pause',
    duration: 1000  // 暂停时长（毫秒）
}
```

## 许可证

MIT License