protocol-proxy 2.5.1 → 2.6.0

package/package.json

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

package/public/app.js

@@ -587,6 +587,59 @@ function initModelDropdown() {
   });
 }
 
+async function importModels() {
+  const providerId = document.getElementById('provider-id').value;
+  if (!providerId) {
+    showToast('请先选择供应商', true);
+    return;
+  }
+  const btn = document.getElementById('model-import-btn');
+  btn.disabled = true;
+  btn.textContent = '导入中...';
+  try {
+    const apiKeys = collectApiKeys();
+    const res = await fetch(`/api/providers/${providerId}/available-models`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ apiKeys }),
+    });
+    const data = await res.json();
+    if (!data.models || data.models.length === 0) {
+      showToast(data.message || '未获取到模型', true);
+      return;
+    }
+    const provider = providers.find(p => p.id === providerId);
+    const existing = new Set(provider?.models || []);
+    const newModels = data.models.filter(m => !existing.has(m));
+    if (newModels.length === 0) {
+      showToast(`已全部存在，共 ${data.models.length} 个模型`);
+      // 即使没有新模型，也尝试自动选择第一个
+      if (!document.getElementById('target-model').value && data.models.length > 0) {
+        selectModel(data.models[0]);
+      }
+      return;
+    }
+    const merged = [...(provider?.models || []), ...newModels];
+    await fetch(`/api/providers/${providerId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ models: merged }),
+    });
+    await loadProviders();
+    renderModelOptions();
+    // 自动选择默认模型
+    if (!document.getElementById('target-model').value) {
+      selectModel(newModels[0] || data.models[0]);
+    }
+    showToast(`已导入 ${newModels.length} 个新模型（共 ${data.models.length} 个）`);
+  } catch (err) {
+    showToast('导入失败: ' + err.message, true);
+  } finally {
+    btn.disabled = false;
+    btn.textContent = '自动导入';
+  }
+}
+
 function renderModelOptions() {
   const container = document.getElementById('model-dropdown-options');
   const providerId = document.getElementById('provider-id').value;
@@ -1201,6 +1254,140 @@ function closeModal() {
   editingProviderId = null;
 }
 
+function showTestResultModal(data) {
+  const modal = document.getElementById('test-result-modal');
+  const icon = document.getElementById('test-result-icon');
+  const summary = document.getElementById('test-result-summary');
+  const list = document.getElementById('test-result-list');
+  const closeBtn = document.getElementById('test-result-close');
+
+  if (data.failed === 0) {
+    icon.textContent = '✓';
+    icon.style.background = 'rgba(6, 78, 59, 0.4)';
+    icon.style.color = '#34d399';
+    icon.style.borderColor = 'rgba(52, 211, 153, 0.15)';
+    summary.innerHTML = `<strong>${data.total}</strong> 条 API Key 全部测试通过`;
+  } else if (data.passed === 0) {
+    icon.textContent = '✗';
+    icon.style.background = 'rgba(127, 29, 29, 0.4)';
+    icon.style.color = '#f87171';
+    icon.style.borderColor = 'rgba(248, 113, 113, 0.15)';
+    summary.innerHTML = `<strong>${data.total}</strong> 条 API Key 全部测试失败`;
+  } else {
+    icon.textContent = '!';
+    icon.style.background = 'rgba(69, 26, 3, 0.4)';
+    icon.style.color = '#fbbf24';
+    icon.style.borderColor = 'rgba(251, 191, 36, 0.15)';
+    summary.innerHTML = `<strong>${data.passed}</strong> 条通过，<strong>${data.failed}</strong> 条失败`;
+  }
+
+  list.innerHTML = data.results.map(r => `
+    <div class="test-result-item ${r.ok ? 'test-ok' : 'test-fail'}">
+      <div class="test-result-row">
+        <span class="test-result-status">${r.ok ? '✓' : '✗'}</span>
+        <span class="test-result-alias">${escapeHtml(r.alias || `Key #${r.index + 1}`)}</span>
+        ${r.latencyMs != null ? `<span class="test-result-latency">${r.latencyMs}ms</span>` : ''}
+      </div>
+      ${r.message ? `<div class="test-result-error">${escapeHtml(r.message)}</div>` : ''}
+    </div>
+  `).join('');
+
+  modal.classList.add('active');
+  closeBtn.onclick = () => modal.classList.remove('active');
+}
+
+function clearKeyErrors() {
+  document.querySelectorAll('#api-keys-list .api-key-entry').forEach(row => {
+    row.querySelector('.api-key-input')?.style.removeProperty('border-color');
+    row.querySelector('.api-key-display')?.style.removeProperty('border-color');
+    row.querySelector('.api-key-error')?.remove();
+  });
+}
+
+function markKeyErrors(data) {
+  const rows = document.querySelectorAll('#api-keys-list .api-key-entry');
+  for (const r of data.results) {
+    if (!r.ok) {
+      const row = rows[r.index];
+      if (row) {
+        const el = row.querySelector('.api-key-input') || row.querySelector('.api-key-display');
+        if (el) el.style.borderColor = '#ef4444';
+        if (r.message) {
+          const errDiv = document.createElement('div');
+          errDiv.className = 'api-key-error';
+          errDiv.textContent = r.message;
+          // Insert after the API Key form-group
+          const keyGroup = row.querySelectorAll('.form-group')[1];
+          if (keyGroup) keyGroup.appendChild(errDiv);
+        }
+      }
+    }
+  }
+}
+
+async function testConnection() {
+  const providerId = document.getElementById('provider-id').value;
+  if (!providerId) {
+    showToast('请先选择供应商', true);
+    return;
+  }
+  const protocol = document.getElementById('target-protocol').value;
+  const apiKeys = collectApiKeys();
+  const model = document.getElementById('target-model').value.trim() || '';
+  const btn = document.getElementById('test-connection-btn');
+  btn.disabled = true;
+  btn.textContent = '测试中...';
+  clearKeyErrors();
+  try {
+    const res = await fetch(`/api/providers/${providerId}/test`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ protocol, apiKeys, model }),
+    });
+    const data = await res.json();
+    if (!data.results || data.results.length === 0) {
+      showToast(data.message || '没有可用的 API Key', true);
+      return;
+    }
+    markKeyErrors(data);
+    showTestResultModal(data);
+  } catch (err) {
+    showToast('测试请求失败: ' + err.message, true);
+  } finally {
+    btn.disabled = false;
+    btn.textContent = '测试连接';
+  }
+}
+
+async function autoTestForSave() {
+  const providerId = document.getElementById('provider-id').value;
+  if (!providerId) return true;
+  const protocol = document.getElementById('target-protocol').value;
+  const apiKeys = collectApiKeys();
+  const model = document.getElementById('target-model').value.trim() || '';
+  clearKeyErrors();
+  try {
+    const res = await fetch(`/api/providers/${providerId}/test`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ protocol, apiKeys, model }),
+    });
+    const data = await res.json();
+    if (!data.results || data.results.length === 0) return true;
+    if (data.failed === 0) {
+      showToast(`${data.total} 条 API Key 测试通过`);
+      return true;
+    }
+    markKeyErrors(data);
+    return await showConfirm(
+      `${data.passed} 条通过，${data.failed} 条失败。<br><br>是否仍然保存？`,
+      '仍然保存'
+    );
+  } catch (err) {
+    return true;
+  }
+}
+
 async function handleSubmit(e) {
   e.preventDefault();
 
@@ -1210,6 +1397,21 @@ async function handleSubmit(e) {
     return;
   }
 
+  // 保存前自动测试：如果有 API Key 被修改，先测试连接
+  const hasModifiedKeys = !!document.querySelector('#api-keys-list .api-key-entry[data-masked="false"], #api-keys-list .api-key-entry[data-new="true"]');
+  if (hasModifiedKeys) {
+    const saveBtn = document.querySelector('.modal-footer .btn-primary');
+    saveBtn.disabled = true;
+    saveBtn.textContent = '测试中...';
+    try {
+      const canProceed = await autoTestForSave();
+      if (!canProceed) return;
+    } finally {
+      saveBtn.disabled = false;
+      saveBtn.textContent = '保存';
+    }
+  }
+
   const port = parseInt(document.getElementById('proxy-port').value);
 
   const conflict = proxies.find(p => p.id !== editingId && p.port === port);

package/public/index.html

@@ -184,6 +184,7 @@
                       <div class="model-add-section" id="model-add-section">
                         <input type="text" class="model-add-input" id="model-add-input" placeholder="输入模型名称">
                         <button type="button" class="btn btn-primary btn-sm" id="model-add-btn">添加</button>
+                        <button type="button" class="btn btn-sm" id="model-import-btn" onclick="importModels()">自动导入</button>
                       </div>
                     </div>
                   </div>
@@ -252,6 +253,7 @@
 
           <div class="modal-footer">
             <button type="button" class="btn" onclick="closeModal()">取消</button>
+            <button type="button" class="btn" id="test-connection-btn" onclick="testConnection()">测试连接</button>
             <button type="submit" class="btn btn-primary">保存</button>
           </div>
         </form>
@@ -271,6 +273,18 @@
     </div>
   </div>
 
+  <!-- 测试结果弹窗 -->
+  <div class="modal confirm-modal" id="test-result-modal">
+    <div class="confirm-box test-result-box">
+      <div class="confirm-icon" id="test-result-icon">!</div>
+      <p class="confirm-text" id="test-result-summary"></p>
+      <div class="test-result-list" id="test-result-list"></div>
+      <div class="confirm-actions">
+        <button class="btn btn-primary" id="test-result-close">知道了</button>
+      </div>
+    </div>
+  </div>
+
   <!-- 导入预览弹窗 -->
   <div class="modal" id="import-modal">
     <div class="modal-content" style="max-width:500px">

package/public/style.css

@@ -611,8 +611,9 @@ form {
 /* Toast */
 .toast {
   position: fixed;
-  bottom: 28px;
-  right: 28px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   padding: 12px 24px;
   background: linear-gradient(135deg, #22c55e, #16a34a);
   color: white;
@@ -626,8 +627,8 @@ form {
 }
 
 @keyframes toast-in {
-  from { opacity: 0; transform: translateY(16px) scale(0.95); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
+  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
+  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
 }
 
 @keyframes toast-out {
@@ -1457,3 +1458,103 @@ form {
   background: rgba(127, 29, 29, 0.35);
   border-color: rgba(248, 113, 113, 0.8);
 }
+
+/* Inline API Key error */
+.api-key-error {
+  margin-top: 6px;
+  padding: 6px 10px;
+  background: rgba(127, 29, 29, 0.15);
+  border: 1px solid rgba(248, 113, 113, 0.2);
+  border-radius: 6px;
+  color: #fca5a5;
+  font-size: 0.78rem;
+  line-height: 1.4;
+}
+
+/* Test result modal items */
+.test-result-box {
+  max-width: 460px !important;
+}
+
+.test-result-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 20px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.test-result-item {
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: rgba(6, 8, 15, 0.4);
+  border: 1px solid rgba(51, 65, 85, 0.3);
+}
+
+.test-result-item.test-ok {
+  border-color: rgba(52, 211, 153, 0.2);
+}
+
+.test-result-item.test-fail {
+  border-color: rgba(248, 113, 113, 0.3);
+  background: rgba(127, 29, 29, 0.1);
+}
+
+.test-result-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.test-result-status {
+  font-size: 1rem;
+  font-weight: 700;
+  width: 20px;
+  text-align: center;
+}
+
+.test-ok .test-result-status {
+  color: #34d399;
+}
+
+.test-fail .test-result-status {
+  color: #f87171;
+}
+
+.test-result-alias {
+  flex: 1;
+  color: #e2e8f0;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.test-result-latency {
+  color: #60a5fa;
+  font-size: 0.82rem;
+  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+}
+
+.test-result-error {
+  margin-top: 6px;
+  padding: 5px 10px;
+  color: #fca5a5;
+  font-size: 0.78rem;
+  background: rgba(127, 29, 29, 0.15);
+  border-radius: 6px;
+  border: 1px solid rgba(248, 113, 113, 0.1);
+}
+
+/* test-result-list scrollbar */
+.test-result-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.test-result-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.test-result-list::-webkit-scrollbar-thumb {
+  background: rgba(71, 85, 105, 0.5);
+  border-radius: 3px;
+}

package/server.js

@@ -329,6 +329,169 @@ async function init() {
     res.json(updated);
   });
 
+  app.post('/api/providers/:id/test', async (req, res) => {
+    const provider = configStore.getProviderById(req.params.id);
+    if (!provider) return res.status(404).json({ error: 'Provider not found' });
+
+    const existingKeys = provider.apiKeys || [];
+    const reqKeys = Array.isArray(req.body.apiKeys) ? req.body.apiKeys : [];
+    const resolved = reqKeys
+      .map((k, i) => {
+        if (k && typeof k === 'object' && k.masked && typeof k.index === 'number') {
+          const ex = existingKeys[k.index];
+          return ex ? { key: ex.key, alias: k.alias || ex.alias || '', domIndex: i } : null;
+        }
+        if (k && typeof k === 'object' && typeof k.key === 'string' && k.key.trim()) {
+          return { key: k.key.trim(), alias: k.alias || '', domIndex: i };
+        }
+        if (typeof k === 'string' && k.trim()) return { key: k.trim(), alias: '', domIndex: i };
+        return null;
+      })
+      .filter(Boolean);
+
+    if (resolved.length === 0) {
+      return res.json({ ok: false, message: '没有可用的 API Key', results: [] });
+    }
+
+    const protocol = req.body.protocol || provider.protocol || 'openai';
+    const base = provider.url.replace(/\/$/, '');
+    const hasV1Suffix = base.endsWith('/v1');
+    const isAzure = protocol === 'openai' && !!provider.azureDeployment;
+
+    function buildTestOpts(key) {
+      if (protocol === 'openai') {
+        if (isAzure) {
+          const ver = provider.azureApiVersion || '2024-02-01';
+          return {
+            url: `${base}/openai/deployments/${provider.azureDeployment}/models?api-version=${ver}`,
+            opts: { headers: { 'api-key': key } },
+          };
+        }
+        return {
+          url: hasV1Suffix ? `${base}/models` : `${base}/v1/models`,
+          opts: { headers: { 'Authorization': `Bearer ${key}` } },
+        };
+      }
+      if (protocol === 'anthropic') {
+        const testModel = req.body.model || 'claude-3-haiku-20240307';
+        return {
+          url: hasV1Suffix ? `${base}/messages` : `${base}/v1/messages`,
+          opts: {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'x-api-key': key, 'anthropic-version': '2023-06-01' },
+            body: JSON.stringify({ model: testModel, max_tokens: 1, messages: [{ role: 'user', content: 'hi' }] }),
+          },
+        };
+      }
+      if (protocol === 'gemini') {
+        return { url: `${base}/v1beta/models?key=${key}`, opts: {} };
+      }
+      return null;
+    }
+
+    if (protocol !== 'openai' && protocol !== 'anthropic' && protocol !== 'gemini') {
+      return res.json({ ok: false, message: `不支持的协议: ${protocol}`, results: [] });
+    }
+
+    const results = await Promise.all(resolved.map(async entry => {
+      const { url: testUrl, opts: fetchOpts } = buildTestOpts(entry.key);
+      try {
+        const startedAt = Date.now();
+        const fetchRes = await fetch(testUrl, { ...fetchOpts, signal: AbortSignal.timeout(15000) });
+        const latencyMs = Date.now() - startedAt;
+        if (!fetchRes.ok) {
+          const errText = await fetchRes.text().catch(() => '');
+          const hint = fetchRes.status === 401 || fetchRes.status === 403
+            ? 'API Key 无效或无权限'
+            : `HTTP ${fetchRes.status}: ${errText.slice(0, 200) || '未知错误'}`;
+          return { ok: false, alias: entry.alias, index: entry.domIndex, message: hint, latencyMs };
+        }
+        return { ok: true, alias: entry.alias, index: entry.domIndex, latencyMs };
+      } catch (err) {
+        const msg = err.name === 'TimeoutError' ? '连接超时 (15s)' : `连接失败: ${err.message}`;
+        return { ok: false, alias: entry.alias, index: entry.domIndex, message: msg };
+      }
+    }));
+
+    const passed = results.filter(r => r.ok).length;
+    const failed = results.length - passed;
+    res.json({ ok: failed === 0, passed, failed, total: results.length, results });
+  });
+
+  app.post('/api/providers/:id/available-models', async (req, res) => {
+    const provider = configStore.getProviderById(req.params.id);
+    if (!provider) return res.status(404).json({ error: 'Provider not found' });
+
+    // Support unsaved API keys from form
+    let keys;
+    const reqKeys = Array.isArray(req.body?.apiKeys) ? req.body.apiKeys : [];
+    if (reqKeys.length > 0) {
+      const existingKeys = provider.apiKeys || [];
+      keys = reqKeys
+        .map(k => {
+          if (k && typeof k === 'object' && k.masked && typeof k.index === 'number') {
+            return existingKeys[k.index]?.key || null;
+          }
+          if (k && typeof k === 'object' && typeof k.key === 'string' && k.key.trim()) {
+            return k.key.trim();
+          }
+          return null;
+        })
+        .filter(Boolean);
+    } else {
+      keys = (provider.apiKeys || []).map(k => k.key).filter(Boolean);
+    }
+    if (keys.length === 0) return res.json({ models: [], message: '没有可用的 API Key' });
+
+    const protocol = provider.protocol || 'openai';
+    const base = provider.url.replace(/\/$/, '');
+    const hasV1Suffix = base.endsWith('/v1');
+    const key = keys[0];
+    const isAzure = protocol === 'openai' && !!provider.azureDeployment;
+
+    try {
+      let fetchUrl, fetchOpts;
+      if (protocol === 'openai') {
+        if (isAzure) {
+          const ver = provider.azureApiVersion || '2024-02-01';
+          fetchUrl = `${base}/openai/deployments/${provider.azureDeployment}/models?api-version=${ver}`;
+          fetchOpts = { headers: { 'api-key': key } };
+        } else {
+          fetchUrl = hasV1Suffix ? `${base}/models` : `${base}/v1/models`;
+          fetchOpts = { headers: { 'Authorization': `Bearer ${key}` } };
+        }
+      } else if (protocol === 'gemini') {
+        fetchUrl = `${base}/v1beta/models?key=${key}`;
+        fetchOpts = {};
+      } else if (protocol === 'anthropic') {
+        fetchUrl = hasV1Suffix ? `${base}/models` : `${base}/v1/models`;
+        fetchOpts = { headers: { 'x-api-key': key, 'anthropic-version': '2023-06-01' } };
+      } else {
+        return res.json({ models: [], message: `不支持的协议: ${protocol}` });
+      }
+
+      const fetchRes = await fetch(fetchUrl, { ...fetchOpts, signal: AbortSignal.timeout(15000) });
+      if (!fetchRes.ok) {
+        const hint = fetchRes.status === 404 ? '该供应商不支持模型列表接口' : `获取失败: HTTP ${fetchRes.status}`;
+        return res.json({ models: [], message: hint });
+      }
+
+      const data = await fetchRes.json().catch(() => null);
+      let models = [];
+      if (Array.isArray(data?.data)) {
+        // OpenAI 格式（含第三方 Anthropic 兼容供应商）
+        models = data.data.map(m => m.id || m.name).filter(Boolean).sort();
+      } else if (Array.isArray(data?.models)) {
+        // Gemini 格式
+        models = data.models.map(m => (m.name || m.id)?.replace('models/', '')).filter(Boolean).sort();
+      }
+
+      res.json({ models });
+    } catch (err) {
+      res.json({ models: [], message: `获取失败: ${err.message}` });
+    }
+  });
+
   app.delete('/api/providers/:id', (req, res) => {
     const existing = configStore.getProviderById(req.params.id);
     if (!existing) return res.status(404).json({ error: 'Provider not found' });