Stream Output Utils

一个兼容Vue和React的流式输出工具库，支持字符、单词、行级别的流式文本输出效果。

特性

• 🚀 支持多种输出模式：字符、单词、行
• ⚡ 可调节输出速度
• 🔄 支持循环输出
• 🎯 兼容Vue 3和React 16.8+
• 📱 支持TypeScript
• 🎨 提供多种使用方式：类、Hook、工厂函数

安装

npm install stream-output-utils
# 或
yarn add stream-output-utils

使用方法

1. 基础用法（类方式）

import { StreamOutput } from 'stream-output-utils';

// 创建实例
const stream = new StreamOutput({
  speed: 100,        // 输出速度（毫秒）
  mode: 'char',      // 输出模式：'char' | 'word' | 'line'
  autoStart: false,  // 是否自动开始
  onComplete: () => console.log('输出完成'),
  onProgress: (progress) => console.log(`进度: ${progress * 100}%`)
});

// 设置目标元素
stream.setTarget('#output');

// 设置文本并开始
stream.setText('Hello World!').start();

// 控制输出
stream.pause();  // 暂停
stream.start();  // 继续
stream.stop();   // 停止
stream.reset();  // 重置

2. 工厂函数方式

import { 
  createStreamOutput, 
  createCharStream, 
  createWordStream, 
  createLineStream 
} from 'stream-output-utils';

// 创建字符流
const charStream = createCharStream('Hello World!', '#output', 100);

// 创建单词流
const wordStream = createWordStream('Hello World!', '#output', 200);

// 创建行流
const lineStream = createLineStream('第一行\n第二行\n第三行', '#output', 500);

// 开始输出
charStream.start();

3. React Hook方式

import React from 'react';
import { useReactStreamOutput } from 'stream-output-utils';

function StreamOutputDemo() {
  const {
    currentText,
    isRunning,
    progress,
    start,
    pause,
    stop,
    reset,
    output
  } = useReactStreamOutput({
    speed: 100,
    mode: 'char',
    onComplete: () => console.log('完成')
  });

  return (
    <div>
      <div id="output">{currentText}</div>
      <div>进度: {(progress * 100).toFixed(1)}%</div>
      <button onClick={() => output('Hello World!')}>设置文本</button>
      <button onClick={start} disabled={isRunning}>开始</button>
      <button onClick={pause} disabled={!isRunning}>暂停</button>
      <button onClick={stop}>停止</button>
      <button onClick={reset}>重置</button>
    </div>
  );
}

4. Vue Hook方式

<template>
  <div>
    <div id="output">{{ currentText }}</div>
    <div>进度: {{ (progress * 100).toFixed(1) }}%</div>
    <button @click="output('Hello World!')">设置文本</button>
    <button @click="start" :disabled="isRunning">开始</button>
    <button @click="pause" :disabled="!isRunning">暂停</button>
    <button @click="stop">停止</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script setup lang="ts">
import { useVueStreamOutput } from 'stream-output-utils';

const {
  currentText,
  isRunning,
  progress,
  start,
  pause,
  stop,
  reset,
  output
} = useVueStreamOutput({
  speed: 100,
  mode: 'char',
  onComplete: () => console.log('完成')
});
</script>

API 参考

StreamOutput 类

构造函数选项

interface StreamOutputOptions {
  speed?: number;           // 输出速度（毫秒）
  autoStart?: boolean;      // 是否自动开始
  onComplete?: () => void;  // 完成回调
  onProgress?: (progress: number) => void; // 进度回调
  loop?: boolean;           // 是否循环
  loopInterval?: number;    // 循环间隔（毫秒）
  mode?: 'char' | 'word' | 'line'; // 输出模式
  outputFn?: (text: string, index: number) => void; // 自定义输出函数
}

方法

• setTarget(target: string | HTMLElement): this - 设置输出目标
• setText(text: string): this - 设置输出文本
• setSpeed(speed: number): this - 设置输出速度
• start(): this - 开始输出
• pause(): this - 暂停输出
• stop(): this - 停止输出
• reset(): this - 重置输出
• getState(): StreamOutputState - 获取当前状态
• destroy(): void - 销毁实例

Hook 选项

interface UseStreamOutputOptions {
  initialText?: string;     // 初始文本
  speed?: number;           // 输出速度
  mode?: 'char' | 'word' | 'line'; // 输出模式
  autoStart?: boolean;      // 是否自动开始
  onComplete?: () => void;  // 完成回调
  onProgress?: (progress: number) => void; // 进度回调
  loop?: boolean;           // 是否循环
  loopInterval?: number;    // 循环间隔
}

Hook 返回值

interface StreamOutputHook {
  // 状态
  isRunning: boolean;       // 是否正在运行
  isCompleted: boolean;     // 是否已完成
  progress: number;         // 进度（0-1）
  currentText: string;      // 当前输出文本
  originalText: string;     // 原始文本
  speed: number;            // 输出速度
  
  // 控制方法
  start: () => void;        // 开始
  pause: () => void;        // 暂停
  stop: () => void;         // 停止
  reset: () => void;        // 重置
  setSpeed: (speed: number) => void; // 设置速度
  setText: (text: string) => void;   // 设置文本
  output: (text: string) => void;    // 输出文本
  outputAndStart: (text: string) => void; // 输出并开始
  setTarget: (target: string | HTMLElement) => void; // 设置目标
}

输出模式

字符模式 (char)

逐字符输出，适合打字机效果

单词模式 (word)

逐单词输出，适合阅读体验

行模式 (line)

逐行输出，适合段落展示

示例

打字机效果

const typewriter = createCharStream(
  '这是一个打字机效果示例，文字会逐字显示出来。',
  '#typewriter',
  80
);
typewriter.start();

循环输出

const loopStream = createStreamOutput({
  text: '循环输出的文本',
  target: '#loop',
  speed: 200,
  loop: true,
  loopInterval: 2000
});
loopStream.start();

自定义输出函数

const customStream = new StreamOutput({
  speed: 100,
  outputFn: (text, index) => {
    // 自定义输出逻辑
    console.log(`输出第${index}个字符: ${text}`);
  }
});

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！