protocol-proxy 2.6.0 → 2.7.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.7.0",
   "description": "OpenAI / Anthropic 协议转换透明代理",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -7,6 +7,49 @@ let statsRange = 'daily';
 let statsProxyId = '';
 let providerPoolItems = [];
 
+// ==================== 主题切换 ====================
+
+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');
+  }
+})();
+
 // ==================== 数据加载 ====================
 
 async function loadProxies() {
@@ -1036,6 +1079,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 +1160,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 +1312,34 @@ 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 renderProxies() {
   const container = document.getElementById('proxy-list');
+  const list = getFilteredProxies();
   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 || '-',

package/public/index.html

@@ -8,6 +8,10 @@
 </head>
 <body>
   <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>
@@ -79,9 +83,20 @@
           <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 id="proxy-list" class="proxy-list">
         <div class="empty">加载中...</div>
       </div>
@@ -285,6 +300,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">

package/public/style.css

@@ -1,9 +1,114 @@
+:root {
+  --bg-body: #030712;
+  --bg-card: rgba(15, 23, 42, 0.5);
+  --bg-surface: rgba(6, 8, 15, 0.6);
+  --bg-surface-alt: rgba(15, 23, 42, 0.4);
+  --bg-elevated: rgba(15, 23, 42, 0.7);
+  --bg-dropdown: rgba(15, 23, 42, 0.95);
+  --text-primary: #f1f5f9;
+  --text-secondary: #e2e8f0;
+  --text-muted: #94a3b8;
+  --text-dim: #64748b;
+  --text-faint: #475569;
+  --border-main: rgba(51, 65, 85, 0.4);
+  --border-light: rgba(51, 65, 85, 0.35);
+  --border-input: rgba(51, 65, 85, 0.5);
+  --grid-opacity: 0.03;
+  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+  --accent: #60a5fa;
+  --accent-dim: #3b82f6;
+}
+
+[data-theme="light"] {
+  --bg-body: #f1f5f9;
+  --bg-card: rgba(255, 255, 255, 0.85);
+  --bg-surface: rgba(241, 245, 249, 0.8);
+  --bg-surface-alt: rgba(241, 245, 249, 0.6);
+  --bg-elevated: rgba(255, 255, 255, 0.92);
+  --bg-dropdown: rgba(255, 255, 255, 0.97);
+  --text-primary: #0f172a;
+  --text-secondary: #1e293b;
+  --text-muted: #475569;
+  --text-dim: #64748b;
+  --text-faint: #94a3b8;
+  --border-main: rgba(203, 213, 225, 0.6);
+  --border-light: rgba(203, 213, 225, 0.5);
+  --border-input: rgba(203, 213, 225, 0.7);
+  --grid-opacity: 0.4;
+  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  --accent: #2563eb;
+  --accent-dim: #1d4ed8;
+}
+
+[data-theme="pure-black"] {
+  --bg-body: #000000;
+  --bg-card: rgba(10, 10, 10, 0.7);
+  --bg-surface: rgba(5, 5, 5, 0.8);
+  --bg-surface-alt: rgba(10, 10, 10, 0.5);
+  --bg-elevated: rgba(10, 10, 10, 0.85);
+  --bg-dropdown: rgba(10, 10, 10, 0.97);
+  --text-primary: #e5e5e5;
+  --text-secondary: #d4d4d4;
+  --text-muted: #a3a3a3;
+  --text-dim: #737373;
+  --text-faint: #525252;
+  --border-main: rgba(64, 64, 64, 0.4);
+  --border-light: rgba(64, 64, 64, 0.3);
+  --border-input: rgba(64, 64, 64, 0.5);
+  --grid-opacity: 0.02;
+  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --accent: #a3a3a3;
+  --accent-dim: #737373;
+}
+
+[data-theme="neon"] {
+  --bg-body: #0a0a1a;
+  --bg-card: rgba(10, 10, 30, 0.6);
+  --bg-surface: rgba(10, 10, 30, 0.7);
+  --bg-surface-alt: rgba(15, 15, 40, 0.4);
+  --bg-elevated: rgba(10, 10, 30, 0.8);
+  --bg-dropdown: rgba(10, 10, 30, 0.95);
+  --text-primary: #e0f7ff;
+  --text-secondary: #c5e8f5;
+  --text-muted: #7ec8e8;
+  --text-dim: #4a9ab5;
+  --text-faint: #2d6a80;
+  --border-main: rgba(0, 200, 255, 0.2);
+  --border-light: rgba(0, 200, 255, 0.15);
+  --border-input: rgba(0, 200, 255, 0.25);
+  --grid-opacity: 0.06;
+  --card-shadow: 0 4px 24px rgba(0, 200, 255, 0.08);
+  --accent: #00d4ff;
+  --accent-dim: #0099cc;
+}
+
+[data-theme="amber"] {
+  --bg-body: #0f0a05;
+  --bg-card: rgba(20, 15, 8, 0.6);
+  --bg-surface: rgba(15, 10, 5, 0.7);
+  --bg-surface-alt: rgba(20, 15, 8, 0.45);
+  --bg-elevated: rgba(20, 15, 8, 0.8);
+  --bg-dropdown: rgba(20, 15, 8, 0.95);
+  --text-primary: #fef3c7;
+  --text-secondary: #fde68a;
+  --text-muted: #c8a55a;
+  --text-dim: #92703a;
+  --text-faint: #6b5025;
+  --border-main: rgba(180, 130, 50, 0.25);
+  --border-light: rgba(180, 130, 50, 0.18);
+  --border-input: rgba(180, 130, 50, 0.3);
+  --grid-opacity: 0.04;
+  --card-shadow: 0 4px 24px rgba(180, 130, 50, 0.06);
+  --accent: #f59e0b;
+  --accent-dim: #d97706;
+}
+
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
-  background: #030712;
-  color: #e2e8f0;
+  background: var(--bg-body);
+  color: var(--text-secondary);
   line-height: 1.6;
   min-height: 100vh;
 }
@@ -14,8 +119,8 @@ body::before {
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
   background-image:
-    linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
+    linear-gradient(rgba(59, 130, 246, var(--grid-opacity)) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(59, 130, 246, var(--grid-opacity)) 1px, transparent 1px);
   background-size: 60px 60px;
   pointer-events: none;
   z-index: 0;
@@ -29,6 +134,39 @@ body::before {
   padding: 40px 20px;
 }
 
+/* Theme toggle */
+.theme-toggle {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 100;
+  height: 36px;
+  padding: 0 14px 0 10px;
+  border-radius: 10px;
+  border: 1px solid var(--border-input);
+  background: var(--bg-card);
+  backdrop-filter: blur(12px);
+  color: var(--text-muted);
+  font-size: 1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.25s;
+  white-space: nowrap;
+}
+
+.theme-label {
+  font-size: 0.78rem;
+  font-weight: 500;
+}
+
+.theme-toggle:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
+}
+
 /* Header */
 header {
   text-align: center;
@@ -62,9 +200,9 @@ header p {
 }
 
 .stat-item {
-  background: rgba(15, 23, 42, 0.6);
+  background: var(--bg-surface);
   backdrop-filter: blur(12px);
-  border: 1px solid rgba(51, 65, 85, 0.5);
+  border: 1px solid var(--border-input);
   border-radius: 16px;
   padding: 24px 48px;
   text-align: center;
@@ -93,7 +231,7 @@ header p {
   display: block;
   font-size: 2.2rem;
   font-weight: 700;
-  color: #60a5fa;
+  color: var(--accent);
   font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
 }
 
@@ -107,12 +245,12 @@ header p {
 
 /* Card */
 .card {
-  background: rgba(15, 23, 42, 0.5);
+  background: var(--bg-card);
   backdrop-filter: blur(16px);
-  border: 1px solid rgba(51, 65, 85, 0.4);
+  border: 1px solid var(--border-main);
   border-radius: 20px;
   overflow: hidden;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--card-shadow);
 }
 
 .card-header {
@@ -120,7 +258,7 @@ header p {
   justify-content: space-between;
   align-items: center;
   padding: 24px 28px;
-  border-bottom: 1px solid rgba(51, 65, 85, 0.4);
+  border-bottom: 1px solid var(--border-main);
 }
 
 .card-header h2 {
@@ -152,14 +290,13 @@ header p {
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
   border-color: transparent;
   color: white;
   box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
 }
 
 .btn-primary:hover {
-  background: linear-gradient(135deg, #4b92ff, #3573fb);
   box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
   transform: translateY(-1px);
 }
@@ -193,6 +330,47 @@ header p {
   box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
 }
 
+/* Proxy toolbar */
+.proxy-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 28px;
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-surface-alt);
+}
+
+.proxy-search {
+  flex: 1;
+}
+
+.proxy-search input {
+  width: 100%;
+  padding: 8px 14px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-input);
+  border-radius: 8px;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  transition: all 0.2s;
+}
+
+.proxy-search input::placeholder {
+  color: #475569;
+}
+
+.proxy-search input:focus {
+  outline: none;
+  border-color: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+
+.proxy-toolbar-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
 /* Proxy list */
 .proxy-list {
   padding: 20px;
@@ -201,7 +379,7 @@ header p {
 .empty {
   text-align: center;
   padding: 80px 20px;
-  color: #475569;
+  color: var(--text-faint);
   font-size: 0.95rem;
 }
 
@@ -209,15 +387,15 @@ header p {
   content: '◈';
   display: block;
   font-size: 3rem;
-  color: #334155;
+  color: var(--text-faint);
   margin-bottom: 16px;
 }
 
 /* Proxy Item */
 .proxy-item {
-  background: rgba(6, 8, 15, 0.6);
+  background: var(--bg-surface);
   backdrop-filter: blur(12px);
-  border: 1px solid rgba(51, 65, 85, 0.35);
+  border: 1px solid var(--border-light);
   border-radius: 16px;
   padding: 24px;
   margin-bottom: 16px;
@@ -355,7 +533,7 @@ header p {
   gap: 10px;
   margin-top: 18px;
   padding-top: 18px;
-  border-top: 1px solid rgba(30, 41, 59, 0.5);
+  border-top: 1px solid var(--border-light);
 }
 
 /* Modal */
@@ -380,9 +558,9 @@ header p {
 }
 
 .modal-content {
-  background: rgba(15, 23, 42, 0.7);
+  background: var(--bg-elevated);
   backdrop-filter: blur(24px);
-  border: 1px solid rgba(71, 85, 105, 0.4);
+  border: 1px solid var(--border-main);
   border-radius: 20px;
   width: 100%;
   max-width: 700px;
@@ -401,7 +579,7 @@ header p {
   justify-content: space-between;
   align-items: center;
   padding: 22px 28px;
-  border-bottom: 1px solid rgba(51, 65, 85, 0.4);
+  border-bottom: 1px solid var(--border-main);
 }
 
 .modal-header h3 {
@@ -454,10 +632,10 @@ form {
 .form-group textarea {
   width: 100%;
   padding: 11px 16px;
-  background: rgba(6, 8, 15, 0.6);
-  border: 1px solid rgba(51, 65, 85, 0.5);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-input);
   border-radius: 10px;
-  color: #f1f5f9;
+  color: var(--text-primary);
   font-size: 0.95rem;
   transition: all 0.25s ease;
   appearance: none;
@@ -507,7 +685,7 @@ form {
 .target-section {
   margin-top: 24px;
   padding-top: 24px;
-  border-top: 1px solid rgba(51, 65, 85, 0.4);
+  border-top: 1px solid var(--border-main);
 }
 
 .target-section h4 {
@@ -520,8 +698,8 @@ form {
 }
 
 .target-item {
-  background: rgba(6, 8, 15, 0.5);
-  border: 1px solid rgba(51, 65, 85, 0.35);
+  background: var(--bg-surface-alt);
+  border: 1px solid var(--border-light);
   border-radius: 14px;
   padding: 20px;
   margin-bottom: 12px;
@@ -551,7 +729,7 @@ form {
   gap: 12px;
   padding-top: 20px;
   margin-top: 20px;
-  border-top: 1px solid rgba(51, 65, 85, 0.4);
+  border-top: 1px solid var(--border-main);
 }
 
 /* Proxy address */
@@ -561,8 +739,8 @@ form {
   gap: 10px;
   margin-top: 14px;
   padding: 12px 16px;
-  background: rgba(15, 23, 42, 0.5);
-  border: 1px solid rgba(51, 65, 85, 0.35);
+  background: var(--bg-surface-alt);
+  border: 1px solid var(--border-light);
   border-radius: 12px;
   font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
   transition: all 0.25s;
@@ -576,7 +754,7 @@ form {
 .proxy-address code {
   flex: 1;
   font-size: 0.85rem;
-  color: #7dd3fc;
+  color: var(--accent);
   word-break: break-all;
 }
 
@@ -648,10 +826,10 @@ form {
   justify-content: space-between;
   width: 100%;
   padding: 11px 16px;
-  background: rgba(6, 8, 15, 0.6);
-  border: 1px solid rgba(51, 65, 85, 0.5);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-input);
   border-radius: 10px;
-  color: #f1f5f9;
+  color: var(--text-primary);
   font-size: 0.95rem;
   cursor: pointer;
   transition: all 0.25s ease;
@@ -683,9 +861,9 @@ form {
   top: calc(100% + 6px);
   left: 0;
   right: 0;
-  background: rgba(15, 23, 42, 0.95);
+  background: var(--bg-dropdown);
   backdrop-filter: blur(24px);
-  border: 1px solid rgba(71, 85, 105, 0.5);
+  border: 1px solid var(--border-input);
   border-radius: 12px;
   z-index: 100;
   overflow: hidden;
@@ -772,17 +950,17 @@ form {
   display: flex;
   gap: 8px;
   padding: 10px 16px;
-  border-top: 1px solid rgba(51, 65, 85, 0.4);
-  background: rgba(6, 8, 15, 0.3);
+  border-top: 1px solid var(--border-main);
+  background: var(--bg-surface-alt);
 }
 
 .model-add-input {
   flex: 1;
   padding: 7px 12px;
-  background: rgba(6, 8, 15, 0.5);
-  border: 1px solid rgba(51, 65, 85, 0.5);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-input);
   border-radius: 8px;
-  color: #e2e8f0;
+  color: var(--text-secondary);
   font-size: 0.85rem;
   transition: all 0.2s;
 }
@@ -799,9 +977,9 @@ form {
 }
 
 .confirm-modal .confirm-box {
-  background: rgba(15, 23, 42, 0.8);
+  background: var(--bg-elevated);
   backdrop-filter: blur(24px);
-  border: 1px solid rgba(71, 85, 105, 0.4);
+  border: 1px solid var(--border-main);
   border-radius: 20px;
   padding: 32px 36px;
   max-width: 380px;
@@ -872,8 +1050,8 @@ form {
 
 .import-stat {
   flex: 1;
-  background: rgba(6, 8, 15, 0.4);
-  border: 1px solid rgba(51, 65, 85, 0.3);
+  background: var(--bg-surface-alt);
+  border: 1px solid var(--border-light);
   border-radius: 12px;
   padding: 16px;
   text-align: center;
@@ -883,7 +1061,7 @@ form {
   display: block;
   font-size: 1.8rem;
   font-weight: 700;
-  color: #60a5fa;
+  color: var(--accent);
   font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
 }
 
@@ -913,8 +1091,8 @@ form {
   align-items: flex-start;
   gap: 12px;
   padding: 14px 16px;
-  background: rgba(6, 8, 15, 0.4);
-  border: 1px solid rgba(51, 65, 85, 0.3);
+  background: var(--bg-surface-alt);
+  border: 1px solid var(--border-light);
   border-radius: 10px;
   cursor: pointer;
   transition: all 0.2s;
@@ -974,17 +1152,17 @@ form {
 .stats-filter-trigger {
   padding: 7px 14px !important;
   font-size: 0.85rem !important;
-  background: rgba(51, 65, 85, 0.3) !important;
+  background: var(--bg-surface-alt) !important;
 }
 
 .stats-range-btns {
   display: flex;
   gap: 4px;
   align-items: center;
-  background: rgba(6, 8, 15, 0.4);
+  background: var(--bg-surface-alt);
   border-radius: 10px;
   padding: 3px;
-  border: 1px solid rgba(51, 65, 85, 0.3);
+  border: 1px solid var(--border-light);
 }
 
 .stats-range-btn {
@@ -1015,8 +1193,8 @@ form {
 }
 
 .stats-date-input {
-  background: rgba(15, 23, 42, 0.6);
-  border: 1px solid rgba(51, 65, 85, 0.5);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-input);
   border-radius: 6px;
   color: #e2e8f0;
   padding: 6px 8px;
@@ -1049,8 +1227,8 @@ form {
 }
 
 .stats-summary-item {
-  background: rgba(6, 8, 15, 0.4);
-  border: 1px solid rgba(51, 65, 85, 0.3);
+  background: var(--bg-surface-alt);
+  border: 1px solid var(--border-light);
   border-radius: 12px;
   padding: 18px 16px;
   text-align: center;
@@ -1066,7 +1244,7 @@ form {
   display: block;
   font-size: 1.5rem;
   font-weight: 700;
-  color: #60a5fa;
+  color: var(--accent);
   font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
   margin-bottom: 4px;
 }
@@ -1128,7 +1306,7 @@ form {
   text-align: right;
   font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
   font-size: 0.82rem;
-  color: #7dd3fc;
+  color: var(--accent);
 }
 
 .stats-table tfoot td {
@@ -1276,10 +1454,10 @@ form {
 .api-key-display {
   display: block;
   padding: 11px 16px;
-  background: rgba(6, 8, 15, 0.6);
-  border: 1px solid rgba(51, 65, 85, 0.5);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-input);
   border-radius: 10px;
-  color: #64748b;
+  color: var(--text-dim);
   font-size: 0.9rem;
   letter-spacing: 2px;
   cursor: pointer;
@@ -1343,11 +1521,11 @@ form {
 
 .provider-pool-empty {
   padding: 12px 14px;
-  border: 1px dashed rgba(71, 85, 105, 0.6);
+  border: 1px dashed var(--border-input);
   border-radius: 10px;
-  color: #64748b;
+  color: var(--text-dim);
   font-size: 0.9rem;
-  background: rgba(6, 8, 15, 0.35);
+  background: var(--bg-surface-alt);
 }
 
 .provider-pool-item {
@@ -1356,9 +1534,9 @@ form {
   gap: 12px;
   align-items: center;
   padding: 12px 14px;
-  border: 1px solid rgba(51, 65, 85, 0.5);
+  border: 1px solid var(--border-input);
   border-radius: 12px;
-  background: rgba(6, 8, 15, 0.45);
+  background: var(--bg-surface);
 }
 
 .provider-pool-main {
@@ -1558,3 +1736,138 @@ form {
   background: rgba(71, 85, 105, 0.5);
   border-radius: 3px;
 }
+
+/* Log viewer */
+.log-toolbar {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 14px 28px;
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-surface-alt);
+}
+
+.log-toolbar select {
+  padding: 6px 10px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-input);
+  border-radius: 8px;
+  color: #e2e8f0;
+  font-size: 0.85rem;
+  cursor: pointer;
+  appearance: auto;
+}
+
+.log-toolbar select option {
+  background: #0f172a;
+  color: #e2e8f0;
+}
+
+.log-content {
+  padding: 16px 28px 28px;
+  max-height: 500px;
+  overflow-y: auto;
+  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.78rem;
+  line-height: 1.7;
+  color: var(--text-muted);
+  background: var(--bg-surface-alt);
+}
+
+.log-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.log-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.log-content::-webkit-scrollbar-thumb {
+  background: rgba(71, 85, 105, 0.5);
+  border-radius: 3px;
+}
+
+.log-line {
+  padding: 1px 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.log-line.log-error {
+  color: #fca5a5;
+}
+
+.log-line.log-warn {
+  color: #fbbf24;
+}
+
+/* History viewer */
+.history-content {
+  padding: 20px 28px 28px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.history-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.history-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.history-content::-webkit-scrollbar-thumb {
+  background: rgba(71, 85, 105, 0.5);
+  border-radius: 3px;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: var(--bg-surface-alt);
+  border: 1px solid var(--border-light);
+  border-radius: 10px;
+  transition: border-color 0.2s;
+}
+
+.history-item:hover {
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.history-info {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex: 1;
+  min-width: 0;
+}
+
+.history-time {
+  color: #e2e8f0;
+  font-size: 0.85rem;
+  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  white-space: nowrap;
+}
+
+.history-reason {
+  color: #94a3b8;
+  font-size: 0.82rem;
+  padding: 2px 8px;
+  background: rgba(51, 65, 85, 0.3);
+  border-radius: 6px;
+  white-space: nowrap;
+}
+
+.history-size {
+  color: #64748b;
+  font-size: 0.78rem;
+  white-space: nowrap;
+}

package/server.js

@@ -551,6 +551,7 @@ async function init() {
 
   // 创建代理
   app.post('/api/proxies', async (req, res) => {
+    configStore.saveSnapshot('create-proxy');
     const { name, port, requireAuth, authToken, providerId, defaultModel, routingStrategy, providerPool, providerWeight } = req.body;
 
     if (!name || !port || !providerId) {
@@ -592,6 +593,7 @@ async function init() {
 
   // 更新代理
   app.put('/api/proxies/:id', async (req, res) => {
+    configStore.saveSnapshot('update-proxy');
     const existing = configStore.getProxyById(req.params.id);
     if (!existing) return res.status(404).json({ error: 'Proxy not found' });
 
@@ -640,6 +642,7 @@ async function init() {
 
   // 删除代理
   app.delete('/api/proxies/:id', async (req, res) => {
+    configStore.saveSnapshot('delete-proxy');
     const existing = configStore.getProxyById(req.params.id);
     if (!existing) return res.status(404).json({ error: 'Proxy not found' });
 
@@ -666,6 +669,36 @@ async function init() {
     res.json({ success: true, running: false });
   });
 
+  // 批量启动所有代理
+  app.post('/api/proxies/start-all', async (req, res) => {
+    const proxies = configStore.getProxies();
+    const results = [];
+    for (const proxy of proxies) {
+      if (proxyManager.isRunning(proxy.id)) {
+        results.push({ id: proxy.id, name: proxy.name, skipped: true });
+        continue;
+      }
+      try {
+        await startProxyWithProvider(proxy);
+        results.push({ id: proxy.id, name: proxy.name, success: true });
+      } catch (err) {
+        results.push({ id: proxy.id, name: proxy.name, success: false, error: err.message });
+      }
+    }
+    res.json({ results });
+  });
+
+  // 批量停止所有代理
+  app.post('/api/proxies/stop-all', async (req, res) => {
+    const running = proxyManager.getRunningPorts();
+    const results = [];
+    for (const r of running) {
+      await proxyManager.stopProxy(r.id);
+      results.push({ id: r.id, name: r.name, success: true });
+    }
+    res.json({ results });
+  });
+
   // 获取运行状态
   app.get('/api/status', (req, res) => {
     res.json({
@@ -687,6 +720,22 @@ async function init() {
     });
   });
 
+  // 设置
+  app.get('/api/settings', (req, res) => {
+    res.json(configStore.getSettings());
+  });
+
+  app.put('/api/settings', (req, res) => {
+    const settings = req.body;
+    if (!settings || typeof settings !== 'object') {
+      return res.status(400).json({ error: '需要 settings 对象' });
+    }
+    for (const [key, value] of Object.entries(settings)) {
+      configStore.setSetting(key, value);
+    }
+    res.json(configStore.getSettings());
+  });
+
   // Token 用量统计
   app.get('/api/stats', (req, res) => {
     const { range, startDate, endDate, proxyId } = req.query;
@@ -704,6 +753,22 @@ async function init() {
     res.json({ ...stats, proxies });
   });
 
+  // 日志查看
+  app.get('/api/logs', (req, res) => {
+    const lines = Math.min(parseInt(req.query.lines) || 200, 2000);
+    try {
+      if (!fs.existsSync(logger.LOG_FILE)) {
+        return res.json({ lines: [] });
+      }
+      const content = fs.readFileSync(logger.LOG_FILE, 'utf8');
+      const allLines = content.split('\n').filter(l => l.trim());
+      const tail = allLines.slice(-lines);
+      res.json({ lines: tail, total: allLines.length });
+    } catch (err) {
+      res.json({ lines: [], error: err.message });
+    }
+  });
+
   // ==================== 配置导入/导出 ====================
 
   app.get('/api/config/export', (req, res) => {
@@ -733,6 +798,8 @@ async function init() {
       return res.status(400).json({ error: '需要 config 和 mode（overwrite/merge）' });
     }
 
+    configStore.saveSnapshot('import-' + mode);
+
     // 校验结构
     if (!Array.isArray(config.providers) || !Array.isArray(config.proxies)) {
       return res.status(400).json({ error: '配置格式错误：需要 providers 和 proxies 数组' });
@@ -837,6 +904,21 @@ async function init() {
     });
   });
 
+  // ==================== 配置版本历史 ====================
+
+  app.get('/api/config/history', (req, res) => {
+    const snapshots = configStore.getSnapshots();
+    res.json({ snapshots });
+  });
+
+  app.post('/api/config/rollback', async (req, res) => {
+    const { file } = req.body;
+    if (!file) return res.status(400).json({ error: '需要指定快照文件' });
+    const result = configStore.restoreSnapshot(file);
+    if (result.error) return res.status(400).json({ error: result.error });
+    res.json({ success: true });
+  });
+
   // 前端首页
   app.get('/', (req, res) => {
     res.sendFile(path.join(__dirname, 'public', 'index.html'));