protocol-proxy 2.6.0 → 2.8.0

package/lib/config-store.js

@@ -154,20 +154,35 @@ function normalizeConfig(config) {
 function loadConfig() {
   try {
     if (!fs.existsSync(CONFIG_PATH)) {
-      configCache = { providers: [], proxies: [] };
+      configCache = { providers: [], proxies: [], settings: {} };
       return configCache;
     }
     const raw = fs.readFileSync(CONFIG_PATH, 'utf-8');
     let config = normalizeConfig(JSON.parse(raw));
     config = migrateTargetToProvider(config);
+    if (!config.settings) config.settings = {};
     configCache = config;
     return configCache;
   } catch (err) {
     console.error('加载配置失败:', err.message);
-    return configCache || { providers: [], proxies: [] };
+    return configCache || { providers: [], proxies: [], settings: {} };
   }
 }
 
+function getSettings() {
+  return loadConfig().settings || {};
+}
+
+function setSetting(key, value) {
+  const config = loadConfig();
+  if (!config.settings) config.settings = {};
+  config.settings[key] = value;
+  saveConfig(config);
+}
+
+const SNAPSHOT_DIR = path.join(os.homedir(), '.protocol-proxy', 'snapshots');
+const MAX_SNAPSHOTS = 30;
+
 function saveConfig(config) {
   try {
     const normalizedConfig = normalizeConfig(config);
@@ -186,6 +201,67 @@ function saveConfig(config) {
   }
 }
 
+function saveSnapshot(reason) {
+  try {
+    if (!fs.existsSync(CONFIG_PATH)) return;
+    if (!fs.existsSync(SNAPSHOT_DIR)) fs.mkdirSync(SNAPSHOT_DIR, { recursive: true });
+    const ts = new Date().toISOString().replace(/[:.]/g, '-');
+    const name = `${ts}_${reason || 'save'}.json`;
+    fs.copyFileSync(CONFIG_PATH, path.join(SNAPSHOT_DIR, name));
+    // 清理旧快照
+    const files = fs.readdirSync(SNAPSHOT_DIR)
+      .filter(f => f.endsWith('.json'))
+      .sort();
+    while (files.length > MAX_SNAPSHOTS) {
+      const oldest = files.shift();
+      fs.unlinkSync(path.join(SNAPSHOT_DIR, oldest));
+    }
+  } catch (err) {
+    console.error('[Snapshot] 保存快照失败:', err.message);
+  }
+}
+
+function getSnapshots() {
+  try {
+    if (!fs.existsSync(SNAPSHOT_DIR)) return [];
+    return fs.readdirSync(SNAPSHOT_DIR)
+      .filter(f => f.endsWith('.json'))
+      .sort().reverse()
+      .map(f => {
+        const fullPath = path.join(SNAPSHOT_DIR, f);
+        const stat = fs.statSync(fullPath);
+        const name = f.replace('.json', '');
+        const [ts, ...reasonParts] = name.split('_');
+        return {
+          file: f,
+          timestamp: stat.mtime.toISOString(),
+          reason: reasonParts.join('_') || 'save',
+          size: stat.size,
+        };
+      });
+  } catch (err) {
+    console.error('[Snapshot] 读取快照列表失败:', err.message);
+    return [];
+  }
+}
+
+function restoreSnapshot(file) {
+  try {
+    if (!/^[\w\-]+\.json$/.test(file)) return { error: '非法文件名' };
+    const snapshotPath = path.join(SNAPSHOT_DIR, file);
+    if (!fs.existsSync(snapshotPath)) return { error: '快照不存在' };
+    const content = fs.readFileSync(snapshotPath, 'utf-8');
+    const config = JSON.parse(content);
+    // 先对当前配置做快照，以便回滚本次操作
+    saveSnapshot('before-rollback');
+    saveConfig(config);
+    return { success: true };
+  } catch (err) {
+    console.error('[Snapshot] 恢复快照失败:', err.message);
+    return { error: err.message };
+  }
+}
+
 // ==================== 供应商 CRUD ====================
 
 function getProviders() {
@@ -280,6 +356,11 @@ function removeProxy(id) {
 module.exports = {
   loadConfig,
   saveConfig,
+  saveSnapshot,
+  getSnapshots,
+  restoreSnapshot,
+  getSettings,
+  setSetting,
   getProviders,
   getProviderById,
   addProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "protocol-proxy",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "OpenAI / Anthropic 协议转换透明代理",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -6,6 +6,51 @@ let importData = null;
 let statsRange = 'daily';
 let statsProxyId = '';
 let providerPoolItems = [];
+let keyHealth = {};
+let statsAutoRefreshTimer = null;
+
+// ==================== 主题切换 ====================
+
+const THEMES = [
+  { id: 'dark',       icon: '☾',  label: '深色' },
+  { id: 'light',      icon: '☀',  label: '浅色' },
+  { id: 'pure-black', icon: '●',  label: '纯黑' },
+  { id: 'neon',       icon: '⚡',  label: '霓虹' },
+  { id: 'amber',      icon: '◈',  label: '琥珀' },
+];
+
+function applyTheme(theme) {
+  const t = THEMES.find(t => t.id === theme) || THEMES[0];
+  document.documentElement.setAttribute('data-theme', t.id);
+  const icon = document.getElementById('theme-icon');
+  const label = document.getElementById('theme-label');
+  if (icon) icon.textContent = t.icon;
+  if (label) label.textContent = t.label;
+  localStorage.setItem('theme', t.id);
+}
+
+function toggleTheme() {
+  const current = document.documentElement.getAttribute('data-theme') || 'dark';
+  const idx = THEMES.findIndex(t => t.id === current);
+  const next = THEMES[(idx + 1) % THEMES.length];
+  applyTheme(next.id);
+  fetch('/api/settings', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ theme: next.id }),
+  }).catch(() => {});
+}
+
+// 初始化主题：优先服务端，fallback 到 localStorage
+(async () => {
+  try {
+    const res = await fetch('/api/settings');
+    const settings = await res.json();
+    applyTheme(settings.theme || localStorage.getItem('theme') || 'dark');
+  } catch {
+    applyTheme(localStorage.getItem('theme') || 'dark');
+  }
+})();
 
 // ==================== 数据加载 ====================
 
@@ -38,6 +83,30 @@ function updateStats() {
     proxies.filter(p => p.running).length;
 }
 
+async function loadKeyHealth() {
+  try {
+    const res = await fetch('/api/key-health');
+    keyHealth = await res.json();
+    refreshHealthUI();
+  } catch (err) {
+    console.error('加载 Key 健康状态失败:', err);
+  }
+}
+
+function refreshHealthUI() {
+  // 更新每个代理卡片上的健康点
+  document.querySelectorAll('.health-dot[data-provider]').forEach(dot => {
+    const h = keyHealth[dot.dataset.provider];
+    dot.className = 'health-dot';
+    if (!h || h.status === 'unknown') { dot.classList.add('health-unknown'); dot.title = '未检测'; }
+    else if (h.status === 'healthy') { dot.classList.add('health-ok'); dot.title = 'Key 正常'; }
+    else if (h.status === 'partial') { dot.classList.add('health-warn'); dot.title = '部分 Key 异常'; }
+    else { dot.classList.add('health-error'); dot.title = 'Key 全部异常'; }
+  });
+  // 更新汇总卡片
+  renderProviderHealthSummary();
+}
+
 function parseProviderPool(value) {
   const text = (value || '').trim();
   if (!text) return [];
@@ -948,9 +1017,18 @@ function initStatsRangeBtns() {
       document.querySelectorAll('.stats-range-btn').forEach(b => b.classList.remove('active'));
       btn.classList.add('active');
       statsRange = btn.dataset.range;
-      // 清空日期选择器，显示全部数据
-      document.getElementById('stats-start-date').value = '';
-      document.getElementById('stats-end-date').value = '';
+      // 清除自动刷新
+      if (statsAutoRefreshTimer) { clearInterval(statsAutoRefreshTimer); statsAutoRefreshTimer = null; }
+      if (statsRange === 'hourly') {
+        // 实时模式：设为今天 + 30 秒自动刷新
+        const today = new Date().toISOString().slice(0, 10);
+        document.getElementById('stats-start-date').value = today;
+        document.getElementById('stats-end-date').value = today;
+        statsAutoRefreshTimer = setInterval(loadStats, 30000);
+      } else {
+        document.getElementById('stats-start-date').value = '';
+        document.getElementById('stats-end-date').value = '';
+      }
       loadStats();
     });
   });
@@ -1011,7 +1089,16 @@ function initProviderPoolDropdown() {
 }
 
 async function init() {
+  // 默认统计范围：当天（HTML 内联脚本已优先设置，此处兜底）
+  const today = new Date().toISOString().slice(0, 10);
+  const sd = document.getElementById('stats-start-date');
+  const ed = document.getElementById('stats-end-date');
+  if (!sd.value) sd.value = today;
+  if (!ed.value) ed.value = today;
   await Promise.all([loadProxies(), loadProviders(), loadStats()]);
+  // 延迟加载 health（等后端启动检测完成），之后每 5 分钟刷新
+  setTimeout(() => loadKeyHealth(), 6000);
+  setInterval(() => loadKeyHealth(), 5 * 60 * 1000);
   renderProxies();
   initProviderDropdown();
   initModelDropdown();
@@ -1036,6 +1123,33 @@ async function init() {
   // 初始状态：根据当前协议值决定 Azure 字段显示
   const initProto = document.getElementById('target-protocol').value;
   document.getElementById('azure-fields').style.display = initProto === 'openai' ? '' : 'none';
+
+  // 快捷键
+  document.addEventListener('keydown', (e) => {
+    // Esc 关闭最上层弹窗
+    if (e.key === 'Escape') {
+      if (document.getElementById('confirm-modal').classList.contains('active')) return;
+      if (document.getElementById('log-modal').classList.contains('active')) { closeLogViewer(); return; }
+      if (document.getElementById('history-modal').classList.contains('active')) { closeHistoryViewer(); return; }
+      if (document.getElementById('test-result-modal').classList.contains('active')) { document.getElementById('test-result-modal').classList.remove('active'); return; }
+      if (document.getElementById('import-modal').classList.contains('active')) { closeImportModal(); return; }
+      if (document.getElementById('modal').classList.contains('active')) { closeModal(); return; }
+    }
+    // Ctrl+S 保存表单
+    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+      if (document.getElementById('modal').classList.contains('active')) {
+        e.preventDefault();
+        document.getElementById('proxy-form').requestSubmit();
+      }
+    }
+    // Ctrl+N 新建代理
+    if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
+      if (!document.getElementById('modal').classList.contains('active')) {
+        e.preventDefault();
+        openModal();
+      }
+    }
+  });
 }
 
 // ==================== 代理地址复制 ====================
@@ -1090,6 +1204,149 @@ function showToast(msg, isError) {
   setTimeout(() => toast.remove(), 2000);
 }
 
+// ==================== 批量操作 ====================
+
+async function startAllProxies() {
+  try {
+    const res = await fetch('/api/proxies/start-all', { method: 'POST' });
+    const data = await res.json();
+    await loadProxies();
+    const started = data.results.filter(r => r.success).length;
+    const skipped = data.results.filter(r => r.skipped).length;
+    const failed = data.results.filter(r => !r.success && !r.skipped).length;
+    let msg = `启动完成：${started} 个启动`;
+    if (skipped > 0) msg += `，${skipped} 个已在运行`;
+    if (failed > 0) msg += `，${failed} 个失败`;
+    showToast(msg, failed > 0);
+  } catch (err) {
+    showToast('批量启动失败: ' + err.message, true);
+  }
+}
+
+async function stopAllProxies() {
+  const ok = await showConfirm('确定要停止所有运行中的代理吗？', '全部停止');
+  if (!ok) return;
+  try {
+    const res = await fetch('/api/proxies/stop-all', { method: 'POST' });
+    const data = await res.json();
+    await loadProxies();
+    showToast(`已停止 ${data.results.length} 个代理`);
+  } catch (err) {
+    showToast('批量停止失败: ' + err.message, true);
+  }
+}
+
+// ==================== 日志查看 ====================
+
+async function openLogViewer() {
+  document.getElementById('log-modal').classList.add('active');
+  await loadLogs();
+}
+
+function closeLogViewer() {
+  document.getElementById('log-modal').classList.remove('active');
+}
+
+async function loadLogs() {
+  const container = document.getElementById('log-content');
+  const lines = document.getElementById('log-lines-select').value;
+  container.textContent = '加载中...';
+  try {
+    const res = await fetch(`/api/logs?lines=${lines}`);
+    const data = await res.json();
+    document.getElementById('log-total').textContent = data.total ? `(共 ${data.total} 行)` : '';
+    if (!data.lines || data.lines.length === 0) {
+      container.textContent = '暂无日志';
+      return;
+    }
+    container.innerHTML = data.lines.map(line => {
+      let cls = 'log-line';
+      if (/error|fail|失败/i.test(line)) cls += ' log-error';
+      else if (/warn|警告/i.test(line)) cls += ' log-warn';
+      return `<div class="${cls}">${escapeHtml(line)}</div>`;
+    }).join('');
+    container.scrollTop = container.scrollHeight;
+  } catch (err) {
+    container.textContent = '加载失败: ' + err.message;
+  }
+}
+
+// ==================== 版本历史 ====================
+
+async function openHistoryViewer() {
+  document.getElementById('history-modal').classList.add('active');
+  await loadHistory();
+}
+
+function closeHistoryViewer() {
+  document.getElementById('history-modal').classList.remove('active');
+}
+
+async function loadHistory() {
+  const container = document.getElementById('history-content');
+  container.textContent = '加载中...';
+  try {
+    const res = await fetch('/api/config/history');
+    const data = await res.json();
+    if (!data.snapshots || data.snapshots.length === 0) {
+      container.innerHTML = '<div class="empty">暂无历史版本</div>';
+      return;
+    }
+    const REASON_LABELS = {
+      'create-proxy': '创建代理',
+      'update-proxy': '更新代理',
+      'delete-proxy': '删除代理',
+      'import-merge': '导入配置（合并）',
+      'import-overwrite': '导入配置（覆盖）',
+      'before-rollback': '回滚前备份',
+      'save': '保存',
+    };
+    container.innerHTML = `<div class="history-list">` + data.snapshots.map(s => {
+      const date = new Date(s.timestamp);
+      const timeStr = date.toLocaleString('zh-CN', { hour12: false });
+      const label = REASON_LABELS[s.reason] || s.reason;
+      const sizeStr = s.size > 1024 ? `${(s.size / 1024).toFixed(1)} KB` : `${s.size} B`;
+      return `
+        <div class="history-item">
+          <div class="history-info">
+            <span class="history-time">${timeStr}</span>
+            <span class="history-reason">${escapeHtml(label)}</span>
+            <span class="history-size">${sizeStr}</span>
+          </div>
+          <button class="btn btn-sm history-rollback-btn" data-file="${escapeHtml(s.file)}">恢复</button>
+        </div>
+      `;
+    }).join('') + '</div>';
+    container.querySelectorAll('.history-rollback-btn').forEach(btn => {
+      btn.addEventListener('click', () => rollbackToSnapshot(btn.dataset.file));
+    });
+  } catch (err) {
+    container.textContent = '加载失败: ' + err.message;
+  }
+}
+
+async function rollbackToSnapshot(file) {
+  const ok = await showConfirm('确认恢复到此版本？<br>当前配置会先自动备份。', '确认恢复');
+  if (!ok) return;
+  try {
+    const res = await fetch('/api/config/rollback', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ file }),
+    });
+    const data = await res.json();
+    if (!res.ok) {
+      showToast(data.error || '恢复失败', true);
+      return;
+    }
+    closeHistoryViewer();
+    await Promise.all([loadProxies(), loadProviders()]);
+    showToast('已恢复到历史版本');
+  } catch (err) {
+    showToast('恢复失败: ' + err.message, true);
+  }
+}
+
 // ==================== 渲染代理列表 ====================
 
 const ROUTING_LABELS = {
@@ -1099,14 +1356,89 @@ const ROUTING_LABELS = {
   fastest: '最快优先',
 };
 
+function getFilteredProxies() {
+  const q = (document.getElementById('proxy-search-input')?.value || '').trim().toLowerCase();
+  if (!q) return proxies;
+  return proxies.filter(p => {
+    const name = (p.name || '').toLowerCase();
+    const port = String(p.port || '');
+    const provider = (p.providerName || '').toLowerCase();
+    return name.includes(q) || port.includes(q) || provider.includes(q);
+  });
+}
+
+function filterProxies() {
+  renderProxies();
+}
+
+function healthDot(providerId) {
+  const h = keyHealth[providerId];
+  const cls = !h || h.status === 'unknown' ? 'health-unknown'
+    : h.status === 'healthy' ? 'health-ok'
+    : h.status === 'partial' ? 'health-warn' : 'health-error';
+  const title = !h || h.status === 'unknown' ? '未检测'
+    : h.status === 'healthy' ? 'Key 正常'
+    : h.status === 'partial' ? '部分 Key 异常' : 'Key 全部异常';
+  return `<span class="health-dot ${cls}" data-provider="${escapeHtml(providerId)}" title="${title}"></span>`;
+}
+
+function renderProviderHealthSummary() {
+  const el = document.getElementById('provider-health-summary');
+  if (!el) return;
+  const allProviders = proxies.map(p => p.providerId).filter(Boolean);
+  const unique = [...new Set(allProviders)];
+  if (unique.length === 0) { el.style.display = 'none'; return; }
+  let healthy = 0, partial = 0, unhealthy = 0, unknown = 0;
+  for (const id of unique) {
+    const h = keyHealth[id];
+    if (!h || h.status === 'unknown') unknown++;
+    else if (h.status === 'healthy') healthy++;
+    else if (h.status === 'partial') partial++;
+    else unhealthy++;
+  }
+  el.style.display = '';
+  el.innerHTML = `
+    <div class="health-stat"><span class="health-dot health-ok"></span><span>正常 ${healthy}</span></div>
+    <div class="health-stat"><span class="health-dot health-warn"></span><span>部分异常 ${partial}</span></div>
+    <div class="health-stat"><span class="health-dot health-error"></span><span>异常 ${unhealthy}</span></div>
+    <div class="health-stat"><span class="health-dot health-unknown"></span><span>未检测 ${unknown}</span></div>
+    <button class="btn btn-sm" onclick="recheckKeys()">重新检测</button>
+  `;
+}
+
+let rechecking = false;
+async function recheckKeys() {
+  if (rechecking) return;
+  rechecking = true;
+  const btn = document.querySelector('.provider-health-summary .btn');
+  if (btn) { btn.disabled = true; btn.textContent = '检测中...'; }
+  showToast('正在检测...');
+  try {
+    await fetch('/api/key-health/check', { method: 'POST' });
+    await loadKeyHealth();
+    showToast('检测完成');
+  } catch (err) {
+    showToast('检测失败: ' + err.message, true);
+  } finally {
+    rechecking = false;
+    if (btn) { btn.disabled = false; btn.textContent = '重新检测'; }
+  }
+}
+
 function renderProxies() {
   const container = document.getElementById('proxy-list');
+  const list = getFilteredProxies();
+  renderProviderHealthSummary();
   if (proxies.length === 0) {
     container.innerHTML = '<div class="empty">暂无代理配置，点击右上角创建</div>';
     return;
   }
+  if (list.length === 0) {
+    container.innerHTML = '<div class="empty">没有匹配的代理</div>';
+    return;
+  }
 
-  container.innerHTML = proxies.map(p => {
+  container.innerHTML = list.map(p => {
     // Build unified provider rows: primary first, then pool entries
     const primaryRow = {
       name: p.providerName || p.providerUrl || '-',
@@ -1141,6 +1473,7 @@ function renderProxies() {
       </div>
       <div class="proxy-meta">
         <span>端口: <strong>${p.port}</strong></span>
+        <span>供应商: ${healthDot(p.providerId)} ${escapeHtml(p.providerName || '-')}</span>
         <span>认证: ${p.requireAuth ? '已启用' : '未启用'}</span>
       </div>
       <div class="proxy-address">

package/public/index.html

@@ -7,7 +7,21 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <script>
+    // 尽早设置统计日期默认值，避免 init() 时序问题
+    document.addEventListener('DOMContentLoaded', function() {
+      var today = new Date().toISOString().slice(0, 10);
+      var sd = document.getElementById('stats-start-date');
+      var ed = document.getElementById('stats-end-date');
+      if (sd && !sd.value) sd.value = today;
+      if (ed && !ed.value) ed.value = today;
+    });
+  </script>
   <div class="container">
+    <button class="theme-toggle" id="theme-toggle" onclick="toggleTheme()" title="切换主题">
+      <span id="theme-icon">&#9790;</span>
+      <span id="theme-label" class="theme-label">深色</span>
+    </button>
     <header>
       <h1>Protocol Proxy</h1>
       <p>OpenAI / Anthropic 协议转换透明代理</p>
@@ -39,6 +53,7 @@
             </div>
           </div>
           <div class="stats-range-btns">
+            <button class="btn btn-sm stats-range-btn" data-range="hourly">实时</button>
             <button class="btn btn-sm stats-range-btn active" data-range="daily">每日</button>
             <button class="btn btn-sm stats-range-btn" data-range="monthly">每月</button>
             <button class="btn btn-sm stats-range-btn" data-range="yearly">每年</button>
@@ -79,9 +94,21 @@
           <button class="btn" onclick="exportConfig()">导出配置</button>
           <button class="btn" onclick="document.getElementById('import-file').click()">导入配置</button>
           <input type="file" id="import-file" accept=".json" style="display:none" onchange="handleImportFile(event)">
+          <button class="btn" onclick="openHistoryViewer()">版本历史</button>
           <button class="btn btn-primary" onclick="openModal()">+ 新建代理</button>
         </div>
       </div>
+      <div class="proxy-toolbar">
+        <div class="proxy-search">
+          <input type="text" id="proxy-search-input" placeholder="搜索代理名称、端口、供应商..." oninput="filterProxies()">
+        </div>
+        <div class="proxy-toolbar-actions">
+          <button class="btn btn-sm" onclick="startAllProxies()">全部启动</button>
+          <button class="btn btn-sm" onclick="stopAllProxies()">全部停止</button>
+          <button class="btn btn-sm" onclick="openLogViewer()">日志</button>
+        </div>
+      </div>
+      <div class="provider-health-summary" id="provider-health-summary" style="display:none"></div>
       <div id="proxy-list" class="proxy-list">
         <div class="empty">加载中...</div>
       </div>
@@ -285,6 +312,37 @@
     </div>
   </div>
 
+  <!-- 日志查看弹窗 -->
+  <div class="modal" id="log-modal">
+    <div class="modal-content" style="max-width:800px">
+      <div class="modal-header">
+        <h3>运行日志 <span id="log-total" style="color:#64748b;font-size:0.8rem;font-weight:400"></span></h3>
+        <button class="btn-close" onclick="closeLogViewer()">&times;</button>
+      </div>
+      <div class="log-toolbar">
+        <select id="log-lines-select" onchange="loadLogs()">
+          <option value="100">最近 100 行</option>
+          <option value="200" selected>最近 200 行</option>
+          <option value="500">最近 500 行</option>
+          <option value="1000">最近 1000 行</option>
+        </select>
+        <button class="btn btn-sm" onclick="loadLogs()">刷新</button>
+      </div>
+      <div class="log-content" id="log-content">加载中...</div>
+    </div>
+  </div>
+
+  <!-- 版本历史弹窗 -->
+  <div class="modal" id="history-modal">
+    <div class="modal-content" style="max-width:600px">
+      <div class="modal-header">
+        <h3>配置版本历史</h3>
+        <button class="btn-close" onclick="closeHistoryViewer()">&times;</button>
+      </div>
+      <div class="history-content" id="history-content">加载中...</div>
+    </div>
+  </div>
+
   <!-- 导入预览弹窗 -->
   <div class="modal" id="import-modal">
     <div class="modal-content" style="max-width:500px">