protocol-proxy 2.0.2 → 2.0.6

package/package.json

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

package/public/app.js

@@ -40,16 +40,17 @@ function initProviderDropdown() {
   const dropdown = document.getElementById('provider-dropdown');
   const addNameInput = document.getElementById('provider-add-name');
   const addUrlInput = document.getElementById('provider-add-url');
-  const addKeyInput = document.getElementById('provider-add-key');
   const addBtn = document.getElementById('provider-add-btn');
 
   trigger.addEventListener('click', (e) => {
     e.stopPropagation();
     dropdown.classList.toggle('open');
     if (dropdown.classList.contains('open')) {
+      editingProviderId = null;
       addNameInput.value = '';
       addUrlInput.value = '';
-      addKeyInput.value = '';
+      addUrlInput.disabled = false;
+      addBtn.textContent = '添加';
       renderProviderOptions();
       addNameInput.focus();
     }
@@ -64,28 +65,44 @@ function initProviderDropdown() {
   addBtn.addEventListener('click', async () => {
     const name = addNameInput.value.trim();
     const url = addUrlInput.value.trim();
-    const apiKey = addKeyInput.value.trim();
     if (!name || !url) {
       showToast('请填写供应商名称和地址', true);
       return;
     }
     try {
-      const res = await fetch('/api/providers', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name, url, apiKey }),
-      });
+      let res;
+      if (editingProviderId) {
+        // 更新模式
+        res = await fetch(`/api/providers/${editingProviderId}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name }),
+        });
+      } else {
+        // 新增模式
+        res = await fetch('/api/providers', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name, url }),
+        });
+      }
       if (!res.ok) {
         const err = await res.json();
-        showToast(err.error || '添加失败', true);
+        showToast(err.error || '操作失败', true);
         return;
       }
       const provider = await res.json();
+      editingProviderId = null;
+      addUrlInput.disabled = false;
+      addBtn.textContent = '添加';
+      addNameInput.value = '';
+      addUrlInput.value = '';
+      addKeyInput.value = '';
       await loadProviders();
       selectProvider(provider.id);
-      dropdown.classList.remove('open');
+      renderProviderOptions();
     } catch (err) {
-      showToast('添加失败: ' + err.message, true);
+      showToast('操作失败: ' + err.message, true);
     }
   });
 
@@ -98,6 +115,8 @@ function initProviderDropdown() {
   });
 }
 
+let editingProviderId = null;
+
 function renderProviderOptions() {
   const container = document.getElementById('provider-dropdown-options');
   const currentId = document.getElementById('provider-id').value;
@@ -106,7 +125,10 @@ function renderProviderOptions() {
     <div class="model-option${p.id === currentId ? ' selected' : ''}" data-id="${escapeHtml(p.id)}">
       <span class="model-option-name">${escapeHtml(p.name)}</span>
       ${p.name !== p.url ? `<span style="color:#64748b;font-size:12px;margin-left:4px">${escapeHtml(p.url)}</span>` : ''}
-      <button type="button" class="model-option-delete" data-delete-id="${escapeHtml(p.id)}" title="删除此供应商">&times;</button>
+      <span style="margin-left:auto;display:flex;gap:4px">
+        <button type="button" class="model-option-delete" data-edit-id="${escapeHtml(p.id)}" title="编辑此供应商" style="color:#60a5fa;font-size:14px">&#9998;</button>
+        <button type="button" class="model-option-delete" data-delete-id="${escapeHtml(p.id)}" title="删除此供应商">&times;</button>
+      </span>
     </div>
   `).join('');
 
@@ -122,7 +144,29 @@ function renderProviderOptions() {
     });
   });
 
-  container.querySelectorAll('.model-option-delete').forEach(btn => {
+  // 编辑供应商
+  container.querySelectorAll('[data-edit-id]').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      const id = btn.dataset.editId;
+      try {
+        const res = await fetch(`/api/providers/${id}`);
+        if (!res.ok) throw new Error('加载失败');
+        const p = await res.json();
+        editingProviderId = id;
+        document.getElementById('provider-add-name').value = p.name;
+        document.getElementById('provider-add-url').value = p.url;
+        document.getElementById('provider-add-key').value = p.apiKey || '';
+        document.getElementById('provider-add-url').disabled = true;
+        document.getElementById('provider-add-btn').textContent = '更新';
+      } catch (err) {
+        showToast('加载供应商失败: ' + err.message, true);
+      }
+    });
+  });
+
+  // 删除供应商
+  container.querySelectorAll('[data-delete-id]').forEach(btn => {
     btn.addEventListener('click', async (e) => {
       e.stopPropagation();
       const id = btn.dataset.deleteId;
@@ -157,6 +201,14 @@ function selectProvider(id) {
     : '选择供应商...';
   renderModelOptions();
   updateModelAddState();
+  // 加载供应商的 API Key
+  if (id) {
+    fetch(`/api/providers/${id}`).then(r => r.json()).then(p => {
+      document.getElementById('target-key').value = p.apiKey || '';
+    }).catch(() => {});
+  } else {
+    document.getElementById('target-key').value = '';
+  }
 }
 
 // ==================== Model 下拉框 ====================
@@ -446,6 +498,12 @@ function openModal(id = null) {
     document.getElementById('auth-token-group').style.display = p.requireAuth ? 'block' : 'none';
     selectProvider(p.providerId || '');
     selectModel(p.defaultModel || '');
+    // 加载供应商的 API Key
+    if (p.providerId) {
+      fetch(`/api/providers/${p.providerId}`).then(r => r.json()).then(provider => {
+        document.getElementById('target-key').value = provider.apiKey || '';
+      }).catch(() => {});
+    }
   } else {
     document.getElementById('proxy-id').value = '';
     document.getElementById('auth-token-group').style.display = 'none';
@@ -481,13 +539,32 @@ async function handleSubmit(e) {
     return;
   }
 
+  const apiKey = document.getElementById('target-key').value.trim();
+  const protocol = document.getElementById('target-protocol').value;
+  const defaultModel = document.getElementById('target-model').value.trim() || '';
+
+  // 同步更新供应商配置
+  const providerUpdates = {};
+  if (apiKey) providerUpdates.apiKey = apiKey;
+  if (protocol) providerUpdates.protocol = protocol;
+  if (Object.keys(providerUpdates).length > 0) {
+    try {
+      await fetch(`/api/providers/${providerId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(providerUpdates),
+      });
+      await loadProviders();
+    } catch {}
+  }
+
   const payload = {
     name: document.getElementById('proxy-name').value.trim(),
     port,
     requireAuth: document.getElementById('proxy-auth').value === 'true',
     authToken: document.getElementById('proxy-auth-token').value.trim() || null,
     providerId,
-    defaultModel: document.getElementById('target-model').value.trim() || '',
+    defaultModel,
   };
 
   try {

package/public/index.html

@@ -85,7 +85,6 @@
                       <div class="model-add-section">
                         <input type="text" class="model-add-input" id="provider-add-name" placeholder="供应商名称">
                         <input type="url" class="model-add-input" id="provider-add-url" placeholder="https://api.example.com">
-                        <input type="password" class="model-add-input" id="provider-add-key" placeholder="API Key">
                         <button type="button" class="btn btn-primary btn-sm" id="provider-add-btn">添加</button>
                       </div>
                     </div>
@@ -93,7 +92,10 @@
                 </div>
                 <div class="form-group">
                   <label>协议</label>
-                  <input type="text" id="target-protocol" readonly placeholder="自动识别" style="background:#1e293b;color:#94a3b8;cursor:not-allowed">
+                  <select id="target-protocol">
+                    <option value="openai">OpenAI</option>
+                    <option value="anthropic">Anthropic</option>
+                  </select>
                 </div>
               </div>
               <div class="form-row">

package/server.js

@@ -198,7 +198,7 @@ async function init() {
     if (req.body.name !== undefined) updates.name = req.body.name;
     if (req.body.url !== undefined) updates.url = req.body.url;
     if (req.body.protocol !== undefined) updates.protocol = req.body.protocol;
-    if (req.body.apiKey !== undefined) updates.apiKey = req.body.apiKey;
+    if (req.body.apiKey !== undefined && req.body.apiKey !== '') updates.apiKey = req.body.apiKey;
     if (req.body.models !== undefined) updates.models = req.body.models;
 
     const updated = configStore.updateProvider(req.params.id, updates);