options.js

class SettingsManager {
  constructor() {
    this.isRecording = false;
    this.currentKeys = new Set();
    this.init();
  }

  async init() {
    await this.loadSettings();
    this.setupEventListeners();
    this.updateUI();
  }

  async loadSettings() {
    try {
      const result = await chrome.storage.sync.get({
        // 默认设置
        shortcut: 'Ctrl+Shift+T',
        defaultView: 'all',
        popupWidth: '400',
        autoRefresh: true,
        showFavicon: true,
        enableSearch: true
      });
      
      this.settings = result;
      console.log('加载设置:', this.settings);
    } catch (error) {
      console.error('加载设置失败:', error);
      this.settings = {
        shortcut: 'Ctrl+Shift+T',
        defaultView: 'all',
        popupWidth: '400',
        autoRefresh: true,
        showFavicon: true,
        enableSearch: true
      };
    }
  }

  setupEventListeners() {
    // 快捷键输入框
    const shortcutInput = document.getElementById('shortcutInput');
    shortcutInput.addEventListener('click', () => this.startRecording());
    shortcutInput.addEventListener('keydown', (e) => this.handleKeyDown(e));
    shortcutInput.addEventListener('keyup', (e) => this.handleKeyUp(e));
    shortcutInput.addEventListener('blur', () => this.stopRecording());

    // 重置快捷键按钮
    document.getElementById('resetShortcut').addEventListener('click', () => {
      this.settings.shortcut = 'Ctrl+Shift+T';
      this.updateUI();
      this.showStatus('快捷键已重置为默认值', 'success');
    });

    // 保存设置按钮
    document.getElementById('saveSettings').addEventListener('click', () => {
      this.saveSettings();
    });

    // 重置所有设置按钮
    document.getElementById('resetSettings').addEventListener('click', () => {
      if (confirm('确定要重置所有设置吗？此操作不可撤销。')) {
        this.resetAllSettings();
      }
    });

    // 其他设置项
    document.getElementById('defaultView').addEventListener('change', (e) => {
      this.settings.defaultView = e.target.value;
    });

    document.getElementById('popupWidth').addEventListener('change', (e) => {
      this.settings.popupWidth = e.target.value;
    });

    document.getElementById('autoRefresh').addEventListener('change', (e) => {
      this.settings.autoRefresh = e.target.checked;
    });

    document.getElementById('showFavicon').addEventListener('change', (e) => {
      this.settings.showFavicon = e.target.checked;
    });

    document.getElementById('enableSearch').addEventListener('change', (e) => {
      this.settings.enableSearch = e.target.checked;
    });
  }

  startRecording() {
    if (this.isRecording) return;
    
    this.isRecording = true;
    this.currentKeys.clear();
    
    const shortcutInput = document.getElementById('shortcutInput');
    shortcutInput.classList.add('recording');
    shortcutInput.placeholder = '请按下快捷键组合...';
    shortcutInput.focus();
    
    this.showStatus('正在录制快捷键，请按下您想要的组合...', 'info');
  }

  stopRecording() {
    if (!this.isRecording) return;
    
    this.isRecording = false;
    const shortcutInput = document.getElementById('shortcutInput');
    shortcutInput.classList.remove('recording');
    shortcutInput.placeholder = '点击这里设置快捷键';
    
    if (this.currentKeys.size > 0) {
      const shortcut = this.formatShortcut();
      this.settings.shortcut = shortcut;
      this.updateUI();
      this.showStatus(`快捷键已设置为: ${shortcut}`, 'success');
    }
  }

  handleKeyDown(e) {
    if (!this.isRecording) return;
    
    e.preventDefault();
    e.stopPropagation();
    
    const key = this.getKeyName(e);
    if (key) {
      this.currentKeys.add(key);
      this.updateShortcutDisplay();
    }
  }

  handleKeyUp(e) {
    if (!this.isRecording) return;
    
    e.preventDefault();
    e.stopPropagation();
    
    const key = this.getKeyName(e);
    if (key) {
      this.currentKeys.delete(key);
    }
    
    // 如果没有按键了，停止录制
    if (this.currentKeys.size === 0) {
      this.stopRecording();
    }
  }

  getKeyName(e) {
    const key = e.key.toLowerCase();
    const modifiers = [];
    
    if (e.ctrlKey) modifiers.push('Ctrl');
    if (e.metaKey) modifiers.push('Cmd'); // Mac的Command键
    if (e.altKey) modifiers.push('Alt');
    if (e.shiftKey) modifiers.push('Shift');
    
    // 特殊键处理
    let keyName = key;
    if (key === 'control' || key === 'meta' || key === 'alt' || key === 'shift') {
      return null; // 忽略单独的修饰键
    }
    
    // 功能键
    if (key.startsWith('f') && key.length > 1) {
      keyName = key.toUpperCase();
    }
    
    // 其他特殊键
    const specialKeys = {
      'tab': 'Tab',
      'enter': 'Enter',
      'escape': 'Esc',
      'backspace': 'Backspace',
      'delete': 'Delete',
      'arrowup': '↑',
      'arrowdown': '↓',
      'arrowleft': '←',
      'arrowright': '→',
      'pageup': 'PageUp',
      'pagedown': 'PageDown',
      'home': 'Home',
      'end': 'End',
      'insert': 'Insert',
      'space': 'Space'
    };
    
    if (specialKeys[key]) {
      keyName = specialKeys[key];
    }
    
    return [...modifiers, keyName].join('+');
  }

  updateShortcutDisplay() {
    const shortcutInput = document.getElementById('shortcutInput');
    const shortcut = this.formatShortcut();
    shortcutInput.value = shortcut;
  }

  formatShortcut() {
    if (this.currentKeys.size === 0) return '';
    
    const keys = Array.from(this.currentKeys);
    return keys.join(' + ');
  }

  updateUI() {
    // 更新快捷键显示
    document.getElementById('shortcutInput').value = this.settings.shortcut;
    
    // 更新其他设置项
    document.getElementById('defaultView').value = this.settings.defaultView;
    document.getElementById('popupWidth').value = this.settings.popupWidth;
    document.getElementById('autoRefresh').checked = this.settings.autoRefresh;
    document.getElementById('showFavicon').checked = this.settings.showFavicon;
    document.getElementById('enableSearch').checked = this.settings.enableSearch;
  }

  async saveSettings() {
    try {
      await chrome.storage.sync.set(this.settings);
      
      // 更新扩展的快捷键
      await this.updateExtensionShortcut();
      
      this.showStatus('设置已保存！', 'success');
      console.log('设置已保存:', this.settings);
    } catch (error) {
      console.error('保存设置失败:', error);
      this.showStatus('保存设置失败，请重试', 'error');
    }
  }

  async updateExtensionShortcut() {
    try {
      // 这里需要与background script通信来更新快捷键
      // 由于Chrome扩展的限制，快捷键更新需要用户手动在chrome://extensions/shortcuts中设置
      console.log('请手动在chrome://extensions/shortcuts中更新快捷键为:', this.settings.shortcut);
    } catch (error) {
      console.error('更新扩展快捷键失败:', error);
    }
  }

  async resetAllSettings() {
    try {
      await chrome.storage.sync.clear();
      this.settings = {
        shortcut: 'Ctrl+Shift+T',
        defaultView: 'all',
        popupWidth: '400',
        autoRefresh: true,
        showFavicon: true,
        enableSearch: true
      };
      
      this.updateUI();
      this.showStatus('所有设置已重置为默认值', 'success');
    } catch (error) {
      console.error('重置设置失败:', error);
      this.showStatus('重置设置失败，请重试', 'error');
    }
  }

  showStatus(message, type = 'info') {
    const statusElement = document.getElementById('status');
    statusElement.textContent = message;
    statusElement.className = `status ${type}`;
    
    // 3秒后自动隐藏
    setTimeout(() => {
      statusElement.textContent = '';
      statusElement.className = 'status';
    }, 3000);
  }
}

// 初始化设置管理器
document.addEventListener('DOMContentLoaded', () => {
  new SettingsManager();
});