protocol-proxy 2.1.5 → 2.2.0

package/public/style.css

@@ -843,6 +843,288 @@ form {
   min-width: 90px;
 }
 
+/* Card header actions */
+.card-header-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* Import modal */
+.import-preview {
+  padding: 24px 28px;
+}
+
+.import-stats {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.import-stat {
+  flex: 1;
+  background: rgba(6, 8, 15, 0.4);
+  border: 1px solid rgba(51, 65, 85, 0.3);
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+}
+
+.import-stat-value {
+  display: block;
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #60a5fa;
+  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+}
+
+.import-stat-label {
+  color: #64748b;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.import-mode label {
+  display: block;
+  margin-bottom: 10px;
+  color: #94a3b8;
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.import-mode-options {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.import-mode-option {
+  display: flex;
+  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);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.import-mode-option:hover {
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.import-mode-option input[type="radio"] {
+  margin-top: 3px;
+  accent-color: #3b82f6;
+}
+
+.import-mode-option strong {
+  display: block;
+  color: #e2e8f0;
+  font-size: 0.9rem;
+  margin-bottom: 2px;
+}
+
+.import-mode-option small {
+  color: #64748b;
+  font-size: 0.8rem;
+}
+
+/* Stats Panel */
+.stats-panel .card-header {
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.stats-estimated-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  font-weight: 500;
+  background: rgba(251, 191, 36, 0.15);
+  color: #fbbf24;
+  border: 1px solid rgba(251, 191, 36, 0.2);
+  vertical-align: middle;
+  letter-spacing: 0.02em;
+}
+
+.stats-controls {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.stats-controls .model-dropdown {
+  width: 180px;
+}
+
+.stats-filter-trigger {
+  padding: 7px 14px !important;
+  font-size: 0.85rem !important;
+  background: rgba(51, 65, 85, 0.3) !important;
+}
+
+.stats-range-btns {
+  display: flex;
+  gap: 4px;
+  background: rgba(6, 8, 15, 0.4);
+  border-radius: 10px;
+  padding: 3px;
+  border: 1px solid rgba(51, 65, 85, 0.3);
+}
+
+.stats-range-btn {
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  padding: 6px 16px !important;
+  border-radius: 8px !important;
+  color: #64748b !important;
+  font-size: 0.82rem !important;
+  transition: all 0.2s !important;
+}
+
+.stats-range-btn:hover {
+  color: #94a3b8 !important;
+  background: rgba(51, 65, 85, 0.3) !important;
+}
+
+.stats-range-btn.active {
+  background: rgba(59, 130, 246, 0.2) !important;
+  color: #60a5fa !important;
+  box-shadow: 0 0 8px rgba(59, 130, 246, 0.15) !important;
+}
+
+.stats-summary {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  padding: 0 28px;
+  margin-top: 8px;
+}
+
+.stats-summary-item {
+  background: rgba(6, 8, 15, 0.4);
+  border: 1px solid rgba(51, 65, 85, 0.3);
+  border-radius: 12px;
+  padding: 18px 16px;
+  text-align: center;
+  transition: all 0.25s;
+}
+
+.stats-summary-item:hover {
+  border-color: rgba(59, 130, 246, 0.25);
+  box-shadow: 0 0 16px rgba(59, 130, 246, 0.06);
+}
+
+.stats-summary-value {
+  display: block;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #60a5fa;
+  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  margin-bottom: 4px;
+}
+
+.stats-summary-label {
+  color: #64748b;
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.stats-breakdown {
+  padding: 20px 28px 28px;
+}
+
+.stats-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.85rem;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.stats-table th,
+.stats-table td {
+  text-align: left;
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(30, 41, 59, 0.6);
+}
+
+.stats-table th {
+  color: #475569;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  background: rgba(15, 23, 42, 0.4);
+}
+
+.stats-table td {
+  color: #94a3b8;
+  word-break: break-all;
+}
+
+.stats-table tbody tr {
+  transition: background 0.15s;
+}
+
+.stats-table tbody tr:hover {
+  background: rgba(59, 130, 246, 0.04);
+}
+
+.stats-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.stats-table td.num {
+  text-align: right;
+  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.82rem;
+  color: #7dd3fc;
+}
+
+.stats-table tfoot td {
+  font-weight: 600;
+  color: #e2e8f0;
+  background: rgba(15, 23, 42, 0.3);
+}
+
+.stats-table .provider-cell {
+  color: #a78bfa;
+}
+
+.stats-table .model-cell {
+  color: #94a3b8;
+}
+
+.num-estimated {
+  color: #fbbf24;
+  font-size: 0.75rem;
+  margin-right: 2px;
+  cursor: help;
+}
+
+@media (max-width: 640px) {
+  .stats-summary {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .stats-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .stats-controls .model-dropdown {
+    width: 100%;
+  }
+}
+
 /* Responsive */
 @media (max-width: 640px) {
   .form-row {

package/server.js

@@ -121,6 +121,7 @@ async function init() {
   const cors = require('cors');
   const configStore = require('./lib/config-store');
   const proxyManager = require('./lib/proxy-manager');
+  const statsStore = require('./lib/stats-store');
 
   const app = express();
   const PORT = process.env.ADMIN_PORT || 3000;
@@ -167,6 +168,8 @@ async function init() {
       apiKey: provider.apiKey,
       defaultModel: proxy.defaultModel,
       models: provider.models,
+      azureDeployment: provider.azureDeployment || '',
+      azureApiVersion: provider.azureApiVersion || '',
     };
   }
 
@@ -194,7 +197,7 @@ async function init() {
   });
 
   app.post('/api/providers', (req, res) => {
-    const { name, url, protocol, apiKey, models } = req.body;
+    const { name, url, protocol, apiKey, models, azureDeployment, azureApiVersion } = req.body;
     if (!name || !url) {
       return res.status(400).json({ error: 'name and url are required' });
     }
@@ -203,6 +206,8 @@ async function init() {
       protocol: protocol || (/anthropic/i.test(url) ? 'anthropic' : 'openai'),
       apiKey: apiKey || '',
       models: models || [],
+      azureDeployment: azureDeployment || '',
+      azureApiVersion: azureApiVersion || '',
     });
     res.status(201).json(provider);
   });
@@ -217,6 +222,8 @@ async function init() {
     if (req.body.protocol !== undefined) updates.protocol = req.body.protocol;
     if (req.body.apiKey !== undefined && req.body.apiKey !== '') updates.apiKey = req.body.apiKey;
     if (req.body.models !== undefined) updates.models = req.body.models;
+    if (req.body.azureDeployment !== undefined) updates.azureDeployment = req.body.azureDeployment;
+    if (req.body.azureApiVersion !== undefined) updates.azureApiVersion = req.body.azureApiVersion;
 
     const updated = configStore.updateProvider(req.params.id, updates);
 
@@ -415,6 +422,148 @@ async function init() {
     });
   });
 
+  // Token 用量统计
+  app.get('/api/stats', (req, res) => {
+    const { range, startDate, endDate, proxyId } = req.query;
+    const stats = statsStore.getStats({
+      range: range || 'daily',
+      startDate: startDate || undefined,
+      endDate: endDate || undefined,
+      proxyId: proxyId || undefined,
+    });
+    const proxies = configStore.getProxies().map(p => ({
+      id: p.id,
+      name: p.name,
+      providerName: configStore.getProviderById(p.providerId)?.name || '',
+    }));
+    res.json({ ...stats, proxies });
+  });
+
+  // ==================== 配置导入/导出 ====================
+
+  app.get('/api/config/export', (req, res) => {
+    const providers = configStore.getProviders();
+    const proxies = configStore.getProxies().map(p => {
+      const provider = configStore.getProviderById(p.providerId);
+      return {
+        id: p.id,
+        name: p.name,
+        port: p.port,
+        requireAuth: p.requireAuth,
+        authToken: p.authToken,
+        providerId: p.providerId,
+        defaultModel: p.defaultModel || '',
+        providerName: provider?.name || '',
+      };
+    });
+    res.json({ providers, proxies, exportedAt: new Date().toISOString() });
+  });
+
+  app.post('/api/config/import', async (req, res) => {
+    const { config, mode } = req.body;
+
+    if (!config || !mode || !['overwrite', 'merge'].includes(mode)) {
+      return res.status(400).json({ error: '需要 config 和 mode（overwrite/merge）' });
+    }
+
+    // 校验结构
+    if (!Array.isArray(config.providers) || !Array.isArray(config.proxies)) {
+      return res.status(400).json({ error: '配置格式错误：需要 providers 和 proxies 数组' });
+    }
+
+    for (const p of config.providers) {
+      if (!p.name || !p.url || !p.protocol) {
+        return res.status(400).json({ error: `供应商 "${p.name || '?'}" 缺少必要字段（name/url/protocol）` });
+      }
+    }
+
+    for (const p of config.proxies) {
+      if (!p.name || !p.port || !p.providerId) {
+        return res.status(400).json({ error: `代理 "${p.name || '?'}" 缺少必要字段（name/port/providerId）` });
+      }
+    }
+
+    if (mode === 'overwrite') {
+      // 覆盖模式：直接替换整个配置
+      const newConfig = {
+        providers: config.providers.map(p => ({
+          id: p.id,
+          name: p.name,
+          url: p.url,
+          protocol: p.protocol,
+          apiKey: p.apiKey || '',
+          models: Array.isArray(p.models) ? p.models : [],
+        })),
+        proxies: config.proxies.map(p => ({
+          id: p.id,
+          name: p.name,
+          port: p.port,
+          requireAuth: !!p.requireAuth,
+          authToken: p.authToken || null,
+          providerId: p.providerId,
+          defaultModel: p.defaultModel || '',
+        })),
+      };
+      configStore.saveConfig(newConfig);
+      return res.json({ success: true, mode, providers: newConfig.providers.length, proxies: newConfig.proxies.length });
+    }
+
+    // 合并模式：按 ID 去重
+    const existingProviders = configStore.getProviders();
+    const existingProxies = configStore.getProxies();
+
+    const providerMap = new Map(existingProviders.map(p => [p.id, p]));
+    for (const p of config.providers) {
+      providerMap.set(p.id, {
+        id: p.id,
+        name: p.name,
+        url: p.url,
+        protocol: p.protocol,
+        apiKey: p.apiKey || '',
+        models: Array.isArray(p.models) ? p.models : [],
+      });
+    }
+
+    const proxyMap = new Map(existingProxies.map(p => [p.id, p]));
+    for (const p of config.proxies) {
+      // 检查端口冲突：导入的代理端口不能和现有代理或其他导入代理重复
+      const conflict = proxyMap.get(p.id)
+        ? null // 同 ID 是覆盖，不算冲突
+        : Array.from(proxyMap.values()).find(ep => ep.port === p.port);
+      if (conflict) {
+        return res.status(409).json({
+          error: `端口 ${p.port} 已被代理「${conflict.name}」占用，无法导入代理「${p.name}」`,
+        });
+      }
+      proxyMap.set(p.id, {
+        id: p.id,
+        name: p.name,
+        port: p.port,
+        requireAuth: !!p.requireAuth,
+        authToken: p.authToken || null,
+        providerId: p.providerId,
+        defaultModel: p.defaultModel || '',
+      });
+    }
+
+    const merged = {
+      providers: Array.from(providerMap.values()),
+      proxies: Array.from(proxyMap.values()),
+    };
+    configStore.saveConfig(merged);
+
+    res.json({
+      success: true,
+      mode,
+      providers: merged.providers.length,
+      proxies: merged.proxies.length,
+      added: {
+        providers: merged.providers.length - existingProviders.length,
+        proxies: merged.proxies.length - existingProxies.length,
+      },
+    });
+  });
+
   // 前端首页
   app.get('/', (req, res) => {
     res.sendFile(path.join(__dirname, 'public', 'index.html'));