insightflow/chrome-extension/popup.js

// InsightFlow Chrome Extension - Popup Script

document.addEventListener('DOMContentLoaded', async () => {
  const clipBtn = document.getElementById('clipBtn');
  const settingsBtn = document.getElementById('settingsBtn');
  const projectSelect = document.getElementById('projectSelect');
  const statusDot = document.getElementById('statusDot');
  const statusText = document.getElementById('statusText');
  const messageEl = document.getElementById('message');
  const openDashboard = document.getElementById('openDashboard');
  
  // 加载配置和项目列表
  await loadConfig();
  
  // 保存当前页面按钮
  clipBtn.addEventListener('click', async () => {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    // 更新按钮状态
    clipBtn.disabled = true;
    clipBtn.innerHTML = '<span class="loading"></span> 保存中...';
    
    // 保存选中的项目
    const projectId = projectSelect.value;
    if (projectId) {
      const config = await getConfig();
      config.defaultProjectId = projectId;
      await saveConfig(config);
    }
    
    // 发送剪藏请求
    chrome.runtime.sendMessage({
      action: 'clipPage'
    }, (response) => {
      clipBtn.disabled = false;
      clipBtn.innerHTML = `
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 5v14M5 12h14"/>
        </svg>
        保存当前页面
      `;
      
      if (response && response.success) {
        showMessage('保存成功！', 'success');
        updateStats();
      } else {
        showMessage(response?.error || '保存失败', 'error');
      }
    });
  });
  
  // 设置按钮
  settingsBtn.addEventListener('click', () => {
    chrome.runtime.openOptionsPage();
  });
  
  // 打开控制台
  openDashboard.addEventListener('click', async (e) => {
    e.preventDefault();
    const config = await getConfig();
    chrome.tabs.create({ url: config.serverUrl });
  });
});

// 加载配置
async function loadConfig() {
  const config = await getConfig();
  
  // 检查连接状态
  checkConnection(config);
  
  // 加载项目列表
  loadProjects(config);
  
  // 更新统计
  updateStats();
}

// 检查连接状态
async function checkConnection(config) {
  const statusDot = document.getElementById('statusDot');
  const statusText = document.getElementById('statusText');
  
  if (!config.apiKey) {
    statusDot.classList.add('error');
    statusText.textContent = '未配置 API Key';
    return;
  }
  
  try {
    const response = await fetch(`${config.serverUrl}/api/v1/projects`, {
      headers: { 'X-API-Key': config.apiKey }
    });
    
    if (response.ok) {
      statusText.textContent = '已连接';
    } else {
      statusDot.classList.add('error');
      statusText.textContent = '连接失败';
    }
  } catch (error) {
    statusDot.classList.add('error');
    statusText.textContent = '连接错误';
  }
}

// 加载项目列表
async function loadProjects(config) {
  const projectSelect = document.getElementById('projectSelect');
  
  if (!config.apiKey) {
    projectSelect.innerHTML = '<option>请先配置 API Key</option>';
    return;
  }
  
  try {
    const response = await fetch(`${config.serverUrl}/api/v1/projects`, {
      headers: { 'X-API-Key': config.apiKey }
    });
    
    if (response.ok) {
      const data = await response.json();
      const projects = data.projects || [];
      
      // 更新项目数统计
      document.getElementById('projectCount').textContent = projects.length;
      
      // 填充下拉框
      let html = '<option value="">选择保存项目...</option>';
      projects.forEach(project => {
        const selected = project.id === config.defaultProjectId ? 'selected' : '';
        html += `<option value="${project.id}" ${selected}>${escapeHtml(project.name)}</option>`;
      });
      projectSelect.innerHTML = html;
    }
  } catch (error) {
    console.error('Failed to load projects:', error);
  }
}

// 更新统计
async function updateStats() {
  // 从存储中获取统计数据
  const result = await chrome.storage.local.get(['clipStats']);
  const stats = result.clipStats || { total: 0, today: 0, lastDate: null };
  
  // 检查是否需要重置今日计数
  const today = new Date().toDateString();
  if (stats.lastDate !== today) {
    stats.today = 0;
    stats.lastDate = today;
    await chrome.storage.local.set({ clipStats: stats });
  }
  
  document.getElementById('clipCount').textContent = stats.total;
  document.getElementById('todayCount').textContent = stats.today;
}

// 显示消息
function showMessage(text, type) {
  const messageEl = document.getElementById('message');
  messageEl.textContent = text;
  messageEl.className = `message ${type}`;
  
  setTimeout(() => {
    messageEl.className = 'message';
  }, 3000);
}

// 获取配置
function getConfig() {
  return new Promise((resolve) => {
    chrome.storage.sync.get(['insightflowConfig'], (result) => {
      resolve(result.insightflowConfig || {
        serverUrl: 'http://122.51.127.111:18000',
        apiKey: '',
        defaultProjectId: ''
      });
    });
  });
}

// 保存配置
function saveConfig(config) {
  return new Promise((resolve) => {
    chrome.storage.sync.set({ insightflowConfig: config }, resolve);
  });
}

// HTML 转义
function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}