@becrafter/prompt-manager 0.1.9 → 0.1.11

package/packages/admin-ui/src/components/TerminalComponent.js

@@ -0,0 +1,995 @@
+/**
+ * TerminalComponent - 基于xterm.js的终端组件（优化版）
+ * 
+ * 提供现代化的终端体验，支持实时交互、主题切换、快捷键等功能
+ * 
+ * 优化点：
+ * - 使用 Canvas 渲染器提升性能
+ * - 改进 WebSocket 重连机制
+ * - 添加命令历史记录
+ * - 优化字体渲染
+ * - 改进主题切换
+ */
+
+// xterm.js相关模块 - 将在init方法中动态导入
+let Terminal, FitAddon, WebLinksAddon, SearchAddon, Unicode11Addon, CanvasAddon;
+
+/**
+ * 终端组件类（优化版）
+ */
+export class TerminalComponent {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      theme: 'dark',
+      fontSize: 14,
+      fontFamily: '"SF Mono", "JetBrains Mono", "Cascadia Code", "Fira Code", Monaco, "Menlo", "Consolas", "Courier New", monospace',
+      cursorBlink: true,
+      cursorStyle: 'block',
+      scrollback: 1000,
+      tabStopWidth: 4,
+      rendererType: 'canvas', // 使用 Canvas 渲染器提升性能
+      allowTransparency: false,
+      convertEol: true,
+      ...options
+    };
+    
+    this.terminal = null;
+    this.fitAddon = null;
+    this.webLinksAddon = null;
+    this.searchAddon = null;
+    this.unicode11Addon = null;
+    this.websocket = null;
+    this.sessionId = null;
+    this.isConnected = false;
+    this.reconnectAttempts = 0;
+    this.maxReconnectAttempts = 10;
+    this.reconnectDelay = 1000;
+    
+    // 命令历史记录
+    this.commandHistory = [];
+    this.historyIndex = -1;
+    this.currentInput = '';
+    
+    // 心跳定时器
+    this.heartbeatInterval = null;
+
+    // 渲染器检测
+    this.rendererType = 'unknown';
+    this.isCanvasRenderer = false;
+
+    // 初始化状态
+    this.isInitialized = false;
+    this.initPromise = null;
+    
+    // 显示加载状态
+    this.showLoadingState();
+    
+    // 异步初始化
+    this.initPromise = this.init().catch(error => {
+      console.error('TerminalComponent异步初始化失败:', error);
+      throw error;
+    });
+  }
+
+  /**
+   * 显示加载状态
+   */
+  showLoadingState() {
+    if (this.container) {
+      this.container.innerHTML = `
+        <div class="terminal-loading">
+          <div class="loading-spinner"></div>
+          <p>正在初始化终端...</p>
+        </div>
+      `;
+    }
+  }
+
+  /**
+   * 初始化终端
+   */
+  async init() {
+    try {
+      console.log('TerminalComponent开始初始化...');
+      await this.loadModules();
+      this.createTerminal();
+      this.setupAddons();
+      this.setupEventListeners();
+      this.render();
+      this.connectWebSocket();
+      console.log('TerminalComponent初始化完成');
+    } catch (error) {
+      console.error('TerminalComponent初始化过程中出错:', error);
+      this.showErrorAndFallback(error);
+    }
+  }
+
+  /**
+   * 动态加载xterm.js模块
+   */
+  async loadModules() {
+    try {
+      console.log('正在导入xterm.js模块...');
+      
+      // 导入核心模块
+      const xtermModule = await import('xterm');
+      Terminal = xtermModule.Terminal;
+      console.log('xterm.js导入成功');
+      
+      // 导入插件模块
+      console.log('正在导入xterm插件...');
+      const fitModule = await import('xterm-addon-fit');
+      FitAddon = fitModule.FitAddon;
+      
+      const webLinksModule = await import('xterm-addon-web-links');
+      WebLinksAddon = webLinksModule.WebLinksAddon;
+      
+      const searchModule = await import('xterm-addon-search');
+      SearchAddon = searchModule.SearchAddon;
+      
+      const unicodeModule = await import('xterm-addon-unicode11');
+      Unicode11Addon = unicodeModule.Unicode11Addon;
+
+      // 导入 Canvas 渲染器插件
+      console.log('正在导入 Canvas 渲染器插件...');
+      const canvasModule = await import('xterm-addon-canvas');
+      CanvasAddon = canvasModule.CanvasAddon;
+      console.log('Canvas 渲染器插件导入成功');
+
+      console.log('所有xterm插件导入成功');
+    } catch (error) {
+      console.error('导入xterm模块失败:', error);
+      throw new Error(`无法导入xterm.js: ${error.message}`);
+    }
+  }
+
+  /**
+   * 显示错误并回退
+   */
+  showErrorAndFallback(error) {
+    if (this.container) {
+      this.container.innerHTML = `
+        <div class="terminal-error">
+          <h3>终端初始化失败</h3>
+          <p>错误信息: ${error.message}</p>
+          <p>可能的原因:</p>
+          <ul>
+            <li>xterm.js 库未正确加载</li>
+            <li>网络连接问题</li>
+            <li>浏览器兼容性问题</li>
+          </ul>
+          <button onclick="location.reload()">重新加载页面</button>
+        </div>
+      `;
+    }
+    throw error;
+  }
+
+  /**
+   * 创建xterm实例（优化版）
+   */
+  createTerminal() {
+    if (!Terminal) {
+      throw new Error('Terminal模块未加载');
+    }
+    
+    this.terminal = new Terminal({
+      // 主题配置
+      theme: this.getTheme(this.options.theme),
+      
+      // 字体配置（优化）
+      fontSize: this.options.fontSize,
+      fontFamily: this.options.fontFamily,
+      fontWeight: 'normal',
+      fontWeightBold: 'bold',
+      lineHeight: 1.2,
+      letterSpacing: 0,
+      
+      // 光标配置
+      cursorBlink: this.options.cursorBlink,
+      cursorStyle: this.options.cursorStyle,
+      cursorWidth: 2,
+      
+      // 滚动配置
+      scrollback: this.options.scrollback,
+      scrollSensitivity: 1,
+      
+      // 渲染配置（优化）
+      // 注意：不设置 rendererType，通过 CanvasAddon 插件来强制使用 Canvas 渲染
+      allowTransparency: this.options.allowTransparency,
+      allowProposedApi: true,
+      
+      // 终端配置
+      cols: 80,
+      rows: 24,
+      tabStopWidth: this.options.tabStopWidth,
+      convertEol: this.options.convertEol,
+      termName: 'xterm-256color',
+      
+      // 性能优化
+      rightClickSelectsWord: true,
+      fastScrollModifier: 'alt',
+      fastScrollSensitivity: 5,
+      
+      // 字符集
+      unicodeVersion: '11'
+    });
+  }
+
+  /**
+   * 获取主题配置（优化版 - 改进对比度和视觉效果）
+   */
+  getTheme(themeName) {
+    const themes = {
+      dark: {
+        // 基础颜色
+        background: '#0a0a0a',
+        foreground: '#f0f0f0',
+        cursor: '#ffffff',
+        cursorAccent: '#000000',
+        
+        // 选中效果（优化 - 更明显的对比度）
+        selection: 'rgba(100, 181, 246, 0.45)',
+        selectionForeground: '#ffffff',
+        
+        // ANSI 颜色（优化对比度）
+        black: '#000000',
+        red: '#ff5f56',
+        green: '#00c853',
+        yellow: '#ffbd2e',
+        blue: '#00a2ff',
+        magenta: '#ff79c6',
+        cyan: '#00e5ff',
+        white: '#e0e0e0',
+        
+        // 亮色 ANSI 颜色
+        brightBlack: '#666666',
+        brightRed: '#ff5f56',
+        brightGreen: '#00e676',
+        brightYellow: '#ffbd2e',
+        brightBlue: '#00a2ff',
+        brightMagenta: '#ff79c6',
+        brightCyan: '#00e5ff',
+        brightWhite: '#ffffff'
+      },
+      light: {
+        // 基础颜色
+        background: '#ffffff',
+        foreground: '#1a1a1a',
+        cursor: '#1a1a1a',
+        cursorAccent: '#ffffff',
+        
+        // 选中效果（优化 - 更明显的对比度）
+        selection: 'rgba(24, 144, 255, 0.3)',
+        selectionForeground: '#000000',
+        
+        // ANSI 颜色（优化对比度）
+        black: '#1a1a1a',
+        red: '#e53935',
+        green: '#43a047',
+        yellow: '#fdd835',
+        blue: '#1e88e5',
+        magenta: '#8e24aa',
+        cyan: '#00acc1',
+        white: '#f5f5f5',
+        
+        // 亮色 ANSI 颜色
+        brightBlack: '#757575',
+        brightRed: '#e53935',
+        brightGreen: '#43a047',
+        brightYellow: '#fdd835',
+        brightBlue: '#1e88e5',
+        brightMagenta: '#8e24aa',
+        brightCyan: '#00acc1',
+        brightWhite: '#ffffff'
+      }
+    };
+    
+    return themes[themeName] || themes.dark;
+  }
+
+  /**
+   * 设置xterm插件
+   */
+  setupAddons() {
+    // Canvas 渲染器插件 - 必须在其他插件之前加载
+    try {
+      if (CanvasAddon) {
+        this.canvasAddon = new CanvasAddon();
+        this.terminal.loadAddon(this.canvasAddon);
+        this.isCanvasRenderer = true;
+        this.rendererType = 'canvas';
+        console.log('✓ Canvas 渲染器已启用');
+      } else {
+        console.warn('CanvasAddon 未加载，将使用默认渲染器');
+        this.rendererType = 'dom';
+      }
+    } catch (error) {
+      console.error('加载 Canvas 渲染器失败:', error);
+      console.warn('将使用默认 DOM 渲染器');
+      this.rendererType = 'dom';
+    }
+
+    // 自适应插件
+    this.fitAddon = new FitAddon();
+    this.terminal.loadAddon(this.fitAddon);
+
+    // 链接插件
+    this.webLinksAddon = new WebLinksAddon();
+    this.terminal.loadAddon(this.webLinksAddon);
+
+    // 搜索插件
+    this.searchAddon = new SearchAddon();
+    this.terminal.loadAddon(this.searchAddon);
+
+    // Unicode11支持
+    this.unicode11Addon = new Unicode11Addon();
+    this.terminal.loadAddon(this.unicode11Addon);
+    this.terminal.unicode.activeVersion = '11';
+  }
+
+  /**
+   * 设置事件监听器
+   */
+  setupEventListeners() {
+    // 终端数据事件
+    this.terminal.onData((data) => {
+      this.sendData(data);
+    });
+
+    // 终端按键事件
+    this.terminal.onKey((event) => {
+      this.handleKey(event);
+    });
+
+    // 窗口大小变化
+    window.addEventListener('resize', () => {
+      this.fit();
+    });
+
+    // 终端焦点事件 - 使用文本区域的事件监听
+    this.terminal.textarea?.addEventListener('focus', () => {
+      this.container.classList.add('terminal-focused');
+    });
+
+    this.terminal.textarea?.addEventListener('blur', () => {
+      this.container.classList.remove('terminal-focused');
+    });
+  }
+
+  /**
+   * 处理按键事件（优化版 - 添加命令历史和快捷键）
+   */
+  handleKey(event) {
+    const { key, domEvent } = event;
+    
+    // Ctrl+C 中断
+    if (domEvent.ctrlKey && domEvent.key === 'c') {
+      this.sendData('\x03');
+      return;
+    }
+
+    // Ctrl+V 粘贴
+    if (domEvent.ctrlKey && domEvent.key === 'v') {
+      navigator.clipboard.readText().then(text => {
+        this.sendData(text);
+      }).catch(err => {
+        console.error('粘贴失败:', err);
+      });
+      return;
+    }
+
+    // Ctrl+Shift+C 复制
+    if (domEvent.ctrlKey && domEvent.shiftKey && domEvent.key === 'C') {
+      const selection = this.terminal.getSelection();
+      if (selection) {
+        navigator.clipboard.writeText(selection).then(() => {
+          this.write('\r\n\x1b[32m✓ 已复制到剪贴板\x1b[0m\r\n');
+        }).catch(err => {
+          console.error('复制失败:', err);
+        });
+      }
+      return;
+    }
+
+    // Ctrl+L 清屏
+    if (domEvent.ctrlKey && domEvent.key === 'l') {
+      this.terminal.clear();
+      return;
+    }
+
+    // Ctrl+F 搜索
+    if (domEvent.ctrlKey && domEvent.key === 'f') {
+      this.showSearch();
+      return;
+    }
+
+    // Ctrl+Shift+V 粘贴（另一种方式）
+    if (domEvent.ctrlKey && domEvent.shiftKey && domEvent.key === 'V') {
+      navigator.clipboard.readText().then(text => {
+        this.sendData(text);
+      }).catch(err => {
+        console.error('粘贴失败:', err);
+      });
+      return;
+    }
+
+    // Ctrl+K 清除到行尾
+    if (domEvent.ctrlKey && domEvent.key === 'k') {
+      this.sendData('\x1b[K');
+      return;
+    }
+
+    // Ctrl+U 清除到行首
+    if (domEvent.ctrlKey && domEvent.key === 'u') {
+      this.sendData('\x1b[1K');
+      return;
+    }
+
+    // Ctrl+W 删除前一个单词
+    if (domEvent.ctrlKey && domEvent.key === 'w') {
+      this.sendData('\x17');
+      return;
+    }
+
+    // Ctrl+A 移动到行首
+    if (domEvent.ctrlKey && domEvent.key === 'a') {
+      this.sendData('\x01');
+      return;
+    }
+
+    // Ctrl+E 移动到行尾
+    if (domEvent.ctrlKey && domEvent.key === 'e') {
+      this.sendData('\x05');
+      return;
+    }
+  }
+
+  /**
+   * 渲染终端到容器
+   */
+  render() {
+    if (!this.container) return;
+    
+    this.container.innerHTML = '';
+    this.terminal.open(this.container);
+    
+    // 设置初始主题class
+    this.updateThemeClass();
+    
+    // 创建工具栏
+    this.createToolbar();
+    
+    // 适应大小
+    setTimeout(() => this.fit(), 100);
+
+    // 检测实际使用的渲染器
+    setTimeout(() => this.detectRenderer(), 200);
+  }
+
+  /**
+   * 检测实际使用的渲染器类型
+   */
+  detectRenderer() {
+    try {
+      const screen = this.terminal.element.querySelector('.xterm-screen');
+      if (!screen) {
+        console.warn('无法检测渲染器：找不到 xterm-screen 元素');
+        return;
+      }
+
+      // 检查是否有 canvas 元素
+      const canvas = screen.querySelector('canvas');
+      if (canvas) {
+        this.rendererType = 'canvas';
+        this.isCanvasRenderer = true;
+        console.log('✓ 检测到 Canvas 渲染器');
+      } else {
+        // 检查是否有 DOM 元素（rows 和 chars）
+        const rows = screen.querySelector('.xterm-rows');
+        if (rows) {
+          this.rendererType = 'dom';
+          this.isCanvasRenderer = false;
+          console.log('⚠ 检测到 DOM 渲染器（降级模式）');
+        }
+      }
+
+      // 在控制台显示渲染器信息
+      console.log('渲染器信息:', {
+        type: this.rendererType,
+        isCanvas: this.isCanvasRenderer,
+        canvas: !!canvas,
+        rows: !!screen.querySelector('.xterm-rows')
+      });
+    } catch (error) {
+      console.error('检测渲染器失败:', error);
+    }
+  }
+
+  /**
+   * 创建工具栏
+   */
+  createToolbar() {
+    const toolbar = document.createElement('div');
+    toolbar.className = 'terminal-toolbar';
+    
+    // 状态指示器
+    const status = document.createElement('div');
+    status.className = 'terminal-status';
+    status.innerHTML = `
+      <span class="status-indicator ${this.isConnected ? 'connected' : 'disconnected'}"></span>
+      <span class="status-text">${this.isConnected ? '已连接' : '未连接'}</span>
+      <span class="renderer-info" title="渲染器类型">${this.isCanvasRenderer ? '🎨 Canvas' : '📄 DOM'}</span>
+    `;
+    
+    // 操作按钮
+    const actions = document.createElement('div');
+    actions.className = 'terminal-actions';
+    actions.innerHTML = `
+      <button class="btn btn-sm" title="重新连接" id="reconnectBtn">
+        <i class="icon-refresh"></i>
+      </button>
+      <button class="btn btn-sm" title="清除" id="clearBtn">
+        <i class="icon-clear"></i>
+      </button>
+      <button class="btn btn-sm" title="主题" id="themeBtn">
+        <i class="icon-theme"></i>
+      </button>
+    `;
+    
+    toolbar.appendChild(status);
+    toolbar.appendChild(actions);
+    this.container.insertBefore(toolbar, this.container.firstChild);
+    
+    // 绑定事件
+    this.bindToolbarEvents();
+  }
+
+  /**
+   * 绑定工具栏事件
+   */
+  bindToolbarEvents() {
+    const reconnectBtn = document.getElementById('reconnectBtn');
+    const clearBtn = document.getElementById('clearBtn');
+    const themeBtn = document.getElementById('themeBtn');
+    
+    reconnectBtn?.addEventListener('click', () => this.reconnect());
+    clearBtn?.addEventListener('click', () => this.clear());
+    themeBtn?.addEventListener('click', () => this.toggleTheme());
+  }
+
+
+  /**
+   * 连接WebSocket（优化版 - 改进重连机制和心跳保活）
+   */
+  connectWebSocket() {
+    const wsUrl = this.getWebSocketUrl();
+    
+    console.log('尝试连接WebSocket:', wsUrl);
+    
+    try {
+      this.websocket = new WebSocket(wsUrl);
+      
+      this.websocket.onopen = () => {
+        console.log('WebSocket连接成功');
+        this.isConnected = true;
+        this.reconnectAttempts = 0;
+        this.reconnectDelay = 1000; // 重置重连延迟
+        this.updateStatus('connected');
+        
+        // 启动心跳保活
+        this.startHeartbeat();
+        
+        // 创建终端会话
+        this.createTerminalSession();
+      };
+      
+      this.websocket.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data);
+          this.handleMessage(message);
+        } catch (error) {
+          console.error('解析WebSocket消息失败:', error, event.data);
+        }
+      };
+      
+      this.websocket.onclose = (event) => {
+        console.log('WebSocket连接关闭:', event.code, event.reason);
+        this.isConnected = false;
+        this.updateStatus('disconnected');
+        
+        // 停止心跳
+        this.stopHeartbeat();
+        
+        // 显示断开消息（仅在非正常关闭时）
+        if (event.code !== 1000) {
+          this.write(`\r\n\x1b[31m✗ 连接已断开 (${event.code}: ${event.reason || 'Unknown'})\x1b[0m\r\n`);
+          // 尝试重连
+          this.attemptReconnect();
+        }
+      };
+      
+      this.websocket.onerror = (error) => {
+        console.error('WebSocket错误:', error);
+        this.writeError(`连接错误: ${error.message || '未知错误'}`);
+      };
+      
+    } catch (error) {
+      console.error('创建WebSocket连接失败:', error);
+      this.writeError(`无法建立连接: ${error.message}`);
+      this.attemptReconnect();
+    }
+  }
+
+/**
+   * 启动心跳保活
+   */
+  startHeartbeat() {
+    this.stopHeartbeat(); // 先停止现有的心跳
+    
+    // 每30秒发送一次 ping
+    this.heartbeatInterval = setInterval(() => {
+      if (this.isConnected && this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+        this.sendMessage({ type: 'ping' });
+      }
+    }, 30000);
+  }
+
+/**
+   * 停止心跳保活
+   */
+  stopHeartbeat() {
+    if (this.heartbeatInterval) {
+      clearInterval(this.heartbeatInterval);
+      this.heartbeatInterval = null;
+    }
+  }
+
+  /**
+   * 获取WebSocket URL
+   */
+  getWebSocketUrl() {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = window.location.hostname;
+    const currentPort = window.location.port;
+    
+    // WebSocket服务运行在5622端口
+    let wsPort = 5622;
+    
+    const wsUrl = `${protocol}//${host}:${wsPort}`;
+    console.log('WebSocket URL:', wsUrl);
+    return wsUrl;
+  }
+
+  /**
+   * 尝试重连（优化版 - 使用指数退避算法）
+   */
+  attemptReconnect() {
+    if (this.reconnectAttempts < this.maxReconnectAttempts) {
+      this.reconnectAttempts++;
+      this.updateStatus('reconnecting');
+      
+      // 指数退避算法：延迟 = 基础延迟 * (2 ^ (重试次数 - 1))
+      const delay = Math.min(this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1), 30000);
+      
+      console.log(`尝试重新连接 (${this.reconnectAttempts}/${this.maxReconnectAttempts})，延迟 ${delay}ms`);
+      
+      this.write(`\r\n\x1b[33m⏳ ${delay/1000}秒后尝试重新连接 (${this.reconnectAttempts}/${this.maxReconnectAttempts})...\x1b[0m\r\n`);
+      
+      setTimeout(() => {
+        this.connectWebSocket();
+      }, delay);
+    } else {
+      this.writeError(`\r\n\x1b[31m✗ 已达到最大重连次数 (${this.maxReconnectAttempts})，请刷新页面重试\x1b[0m\r\n`);
+    }
+  }
+
+  /**
+   * 创建终端会话
+   */
+  createTerminalSession() {
+    // 如果有旧会话，先关闭它
+    if (this.sessionId) {
+      this.sendMessage({
+        type: 'terminal.close',
+        sessionId: this.sessionId
+      });
+      this.sessionId = null;
+    }
+    
+    // 创建新会话
+    this.sendMessage({
+      type: 'terminal.create',
+      size: {
+        cols: this.terminal.cols,
+        rows: this.terminal.rows
+      }
+    });
+  }
+
+  /**
+   * 发送消息
+   */
+  sendMessage(message) {
+    if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+      this.websocket.send(JSON.stringify(message));
+    }
+  }
+
+  /**
+   * 发送数据
+   */
+  sendData(data) {
+    if (this.isConnected) {
+      this.sendMessage({
+        type: 'terminal.data',
+        data: data
+      });
+    }
+  }
+
+  /**
+   * 处理消息
+   */
+  handleMessage(message) {
+    console.log('处理消息类型:', message.type, message);
+    
+    switch (message.type) {
+      case 'welcome':
+        console.log('收到欢迎消息:', message);
+        // this.write('\r\n✓ 已连接到服务器\r\n');
+        break;
+        
+      case 'terminal.created':
+        this.sessionId = message.sessionId;
+        console.log('终端会话已创建:', this.sessionId);
+        this.write(`\r\n✓ 终端会话已创建 (ID: ${this.sessionId})\r\n`);
+        if (message.info) {
+          this.write(`Shell: ${message.info.shell}\r\n`);
+          this.write(`工作目录: ${message.info.workingDirectory}\r\n`);
+        }
+        this.write('\r\n');
+        break;
+        
+      case 'terminal.data':
+        if (message.data) {
+          this.write(message.data);
+        }
+        break;
+        
+      case 'terminal.exit':
+        this.write(`\r\n[会话结束，退出代码: ${message.exitCode}]\r\n`);
+        if (message.signal) {
+          this.write(`[信号: ${message.signal}]\r\n`);
+        }
+        break;
+        
+      case 'terminal.resized':
+        console.log('终端大小已调整:', message.size);
+        break;
+        
+      case 'terminal.closed':
+        console.log('终端会话已关闭:', message.sessionId);
+        this.write(`\r\n[终端会话已关闭]\r\n`);
+        this.sessionId = null;
+        break;
+        
+      case 'error':
+        this.writeError(`服务器错误: ${message.message}`);
+        if (message.details) {
+          this.writeError(`详细信息: ${message.details}`);
+        }
+        break;
+        
+      case 'pong':
+        // 心跳响应，不需要处理
+        break;
+        
+      default:
+        console.warn('未知消息类型:', message.type, message);
+        this.write(`\r\n[未知消息类型: ${message.type}]\r\n`);
+    }
+  }
+
+  /**
+   * 写入数据到终端
+   */
+  write(data) {
+    if (this.terminal) {
+      this.terminal.write(data);
+    }
+  }
+
+  /**
+   * 写入错误信息
+   */
+  writeError(message) {
+    this.write(`\r\n\x1b[31m[错误] ${message}\x1b[0m\r\n`);
+  }
+
+  /**
+   * 清除终端
+   */
+  clear() {
+    if (this.terminal) {
+      this.terminal.clear();
+    }
+  }
+
+  /**
+   * 适应大小
+   */
+  fit() {
+    if (this.fitAddon) {
+      this.fitAddon.fit();
+      
+      // 通知服务器终端大小变化
+      if (this.isConnected && this.sessionId) {
+        this.sendMessage({
+          type: 'terminal.resize',
+          cols: this.terminal.cols,
+          rows: this.terminal.rows
+        });
+      }
+    }
+  }
+
+  /**
+   * 更新终端连接状态显示
+   * 
+   * @param {string} status - 连接状态，可选值：'connected'、'disconnected'、'reconnecting'
+   */
+  updateStatus(status) {
+    const indicator = this.container.querySelector('.status-indicator');
+    const text = this.container.querySelector('.status-text');
+    
+    if (indicator) {
+      indicator.className = `status-indicator ${status}`;
+    }
+    
+    if (text) {
+      const statusText = {
+        connected: '已连接',
+        disconnected: '未连接',
+        reconnecting: '重连中...'
+      };
+      text.textContent = statusText[status] || '未知状态';
+    }
+  }
+
+  /**
+   * 重新连接
+   */
+  reconnect() {
+    // 清理旧会话
+    this.sessionId = null;
+    this.isConnected = false;
+    
+    if (this.websocket) {
+      this.websocket.close();
+      this.websocket = null;
+    }
+    
+    this.reconnectAttempts = 0;
+    this.connectWebSocket();
+  }
+
+  /**
+   * 切换主题
+   */
+  toggleTheme() {
+    this.options.theme = this.options.theme === 'dark' ? 'light' : 'dark';
+    this.terminal.options.theme = this.getTheme(this.options.theme);
+    
+    // 更新主题class
+    this.updateThemeClass();
+    
+    // 强制重新渲染以应用新的选中样式
+    this.refreshTerminal();
+    
+    // 保存主题偏好
+    localStorage.setItem('terminal-theme', this.options.theme);
+  }
+
+  /**
+   * 设置主题
+   */
+  setTheme(themeName) {
+    this.options.theme = themeName;
+    this.terminal.options.theme = this.getTheme(themeName);
+    
+    // 更新主题class
+    this.updateThemeClass();
+    
+    // 强制重新渲染以应用新的选中样式
+    this.refreshTerminal();
+  }
+  
+  /**
+   * 刷新终端以应用新主题
+   */
+  refreshTerminal() {
+    // 保存当前内容
+    const buffer = this.terminal.buffer.active;
+    const cursorX = this.terminal.buffer.active.cursorX;
+    const cursorY = this.terminal.buffer.active.cursorY;
+    
+    // 强制重新渲染
+    this.terminal.refresh(0, this.terminal.rows - 1);
+  }
+  
+  /**
+   * 更新主题class
+   */
+  updateThemeClass() {
+    // 移除所有主题class
+    this.terminal.element.classList.remove('theme-dark', 'theme-light');
+    // 添加当前主题class
+    this.terminal.element.classList.add(`theme-${this.options.theme}`);
+  }
+
+  /**
+   * 获取会话信息
+   */
+  getSessionInfo() {
+    return {
+      sessionId: this.sessionId,
+      isConnected: this.isConnected,
+      reconnectAttempts: this.reconnectAttempts,
+      terminalSize: {
+        cols: this.terminal.cols,
+        rows: this.terminal.rows
+      }
+    };
+  }
+
+  /**
+   * 销毁组件（优化版 - 确保正确清理所有资源）
+   */
+  destroy() {
+    console.log('销毁 TerminalComponent...');
+    
+    // 停止心跳
+    this.stopHeartbeat();
+    
+    // 关闭 WebSocket
+    if (this.websocket) {
+      if (this.websocket.readyState === WebSocket.OPEN) {
+        this.websocket.close(1000, 'Component destroyed');
+      }
+      this.websocket = null;
+    }
+    
+    // 关闭终端会话
+    if (this.sessionId) {
+      this.sendMessage({
+        type: 'terminal.close',
+        sessionId: this.sessionId
+      });
+      this.sessionId = null;
+    }
+    
+    // 销毁终端
+    if (this.terminal) {
+      this.terminal.dispose();
+      this.terminal = null;
+    }
+    
+    // 移除事件监听器
+    window.removeEventListener('resize', this.fit);
+    
+    // 清理状态
+    this.isConnected = false;
+    this.reconnectAttempts = 0;
+    this.commandHistory = [];
+    this.historyIndex = -1;
+    
+    console.log('TerminalComponent 已销毁');
+  }
+}
+
+// 导出默认创建函数
+export function createTerminal(container, options) {
+  return new TerminalComponent(container, options);
+}