feat: 重构首页对话

utils/TypewriterManager.js

@@ -0,0 +1,172 @@
+/**
+ * 打字机效果管理器
+ * 负责管理打字机效果的启动、停止、重置等功能
+ */
+class TypewriterManager {
+  constructor(options = {}) {
+    // 配置选项
+    this.options = {
+      typingSpeed: 50, // 打字速度（毫秒）
+      cursorText: '<text class="typing-cursor">|</text>', // 光标样式
+      ...options
+    };
+
+    // 状态变量
+    this.currentMessageContent = ""; // 当前消息的完整内容
+    this.displayedContent = ""; // 已显示的内容
+    this.typewriterTimer = null; // 打字机定时器
+    this.isTyping = false; // 是否正在打字
+
+    // 回调函数
+    this.onCharacterTyped = null; // 每个字符打字时的回调
+    this.onTypingComplete = null; // 打字完成时的回调
+    this.onContentUpdate = null; // 内容更新时的回调
+  }
+
+  /**
+   * 设置回调函数
+   * @param {Object} callbacks - 回调函数对象
+   * @param {Function} callbacks.onCharacterTyped - 每个字符打字时的回调
+   * @param {Function} callbacks.onTypingComplete - 打字完成时的回调
+   * @param {Function} callbacks.onContentUpdate - 内容更新时的回调
+   */
+  setCallbacks(callbacks) {
+    this.onCharacterTyped = callbacks.onCharacterTyped || null;
+    this.onTypingComplete = callbacks.onTypingComplete || null;
+    this.onContentUpdate = callbacks.onContentUpdate || null;
+  }
+
+  /**
+   * 添加内容到当前消息
+   * @param {string} content - 要添加的内容
+   */
+  addContent(content) {
+    if (typeof content !== 'string') {
+      content = String(content);
+    }
+    this.currentMessageContent += content;
+    
+    // 如果没有在打字，启动打字机效果
+    if (!this.isTyping) {
+      this.startTypewriter();
+    }
+  }
+
+  /**
+   * 启动打字机效果
+   */
+  startTypewriter() {
+    if (this.isTyping) return;
+
+    this.isTyping = true;
+    this.displayedContent = "";
+
+    this._typeNextChar();
+  }
+
+  /**
+   * 打字下一个字符（私有方法）
+   */
+  _typeNextChar() {
+    // 如果已显示内容长度小于完整内容长度，继续打字
+    if (this.displayedContent.length < this.currentMessageContent.length) {
+      this.displayedContent = this.currentMessageContent.substring(
+        0,
+        this.displayedContent.length + 1
+      );
+      
+      const displayContent = this.displayedContent + this.options.cursorText;
+      
+      // 调用内容更新回调
+      if (this.onContentUpdate) {
+        this.onContentUpdate(displayContent);
+      }
+      
+      // 调用字符打字回调
+      if (this.onCharacterTyped) {
+        this.onCharacterTyped(this.displayedContent);
+      }
+
+      // 继续下一个字符
+      this.typewriterTimer = setTimeout(() => {
+        this._typeNextChar();
+      }, this.options.typingSpeed);
+    } else {
+      // 打字完成，移除光标
+      if (this.onContentUpdate) {
+        this.onContentUpdate(this.currentMessageContent);
+      }
+      
+      // 调用打字完成回调
+      if (this.onTypingComplete) {
+        this.onTypingComplete(this.currentMessageContent);
+      }
+      
+      this.stopTypewriter();
+    }
+  }
+
+  /**
+   * 停止打字机效果
+   */
+  stopTypewriter() {
+    if (this.typewriterTimer) {
+      clearTimeout(this.typewriterTimer);
+      this.typewriterTimer = null;
+    }
+    this.isTyping = false;
+  }
+
+  /**
+   * 重置打字机状态
+   */
+  reset() {
+    this.currentMessageContent = "";
+    this.displayedContent = "";
+    this.stopTypewriter();
+  }
+
+  /**
+   * 获取当前状态
+   * @returns {Object} 当前状态对象
+   */
+  getStatus() {
+    return {
+      isTyping: this.isTyping,
+      currentContent: this.currentMessageContent,
+      displayedContent: this.displayedContent,
+      progress: this.currentMessageContent.length > 0 
+        ? this.displayedContent.length / this.currentMessageContent.length 
+        : 0
+    };
+  }
+
+  /**
+   * 立即完成打字（跳过动画）
+   */
+  completeImmediately() {
+    this.stopTypewriter();
+    this.displayedContent = this.currentMessageContent;
+    
+    if (this.onContentUpdate) {
+      this.onContentUpdate(this.currentMessageContent);
+    }
+    
+    if (this.onTypingComplete) {
+      this.onTypingComplete(this.currentMessageContent);
+    }
+  }
+
+  /**
+   * 销毁打字机管理器
+   */
+  destroy() {
+    this.stopTypewriter();
+    this.reset();
+    this.onCharacterTyped = null;
+    this.onTypingComplete = null;
+    this.onContentUpdate = null;
+  }
+}
+
+export default TypewriterManager;