protocol-proxy 1.1.5 → 2.0.2

package/lib/config-store.js

@@ -21,36 +21,76 @@ migrateOldConfig();
 
 let configCache = null;
 
-function normalizeModels(target) {
-  if (!target) return target;
-  const models = Array.isArray(target.models) ? target.models : [];
-  const normalized = models
-    .filter(model => typeof model === 'string')
-    .map(model => model.trim())
-    .filter(Boolean);
-
-  if (target.defaultModel && !normalized.includes(target.defaultModel)) {
-    normalized.unshift(target.defaultModel);
+// 迁移旧格式：target → providerId
+function migrateTargetToProvider(config) {
+  if (!Array.isArray(config.proxies)) return config;
+  let changed = false;
+
+  for (const proxy of config.proxies) {
+    if (!proxy.target) continue;
+
+    // 有 target 但没有 providerId → 从 target 创建供应商
+    if (!proxy.providerId) {
+      const t = proxy.target;
+      const provider = {
+        id: 'provider-' + Date.now(),
+        name: t.providerName || t.providerUrl,
+        url: t.providerUrl,
+        protocol: t.protocol || 'openai',
+        apiKey: t.apiKey || '',
+        models: Array.isArray(t.models) ? t.models : [],
+      };
+      config.providers = config.providers || [];
+      config.providers.push(provider);
+      proxy.providerId = provider.id;
+      proxy.defaultModel = t.defaultModel || '';
+      delete proxy.target;
+      changed = true;
+    } else {
+      // 有 target 也有 providerId → 迁移 apiKey 到供应商，删除 target
+      const provider = (config.providers || []).find(p => p.id === proxy.providerId);
+      if (provider && proxy.target.apiKey && !provider.apiKey) {
+        provider.apiKey = proxy.target.apiKey;
+        changed = true;
+      }
+      delete proxy.target;
+      changed = true;
+    }
+  }
+
+  if (changed) {
+    configCache = config;
+    saveConfig(config);
   }
+  return config;
+}
 
+function normalizeModels(models) {
+  if (!Array.isArray(models)) return [];
+  return Array.from(new Set(
+    models.filter(m => typeof m === 'string').map(m => m.trim()).filter(Boolean)
+  ));
+}
+
+function normalizeProvider(provider) {
+  if (!provider) return provider;
   return {
-    ...target,
-    models: Array.from(new Set(normalized)),
+    ...provider,
+    models: normalizeModels(provider.models),
   };
 }
 
 function normalizeProxy(proxy) {
   if (!proxy) return proxy;
-  return {
-    ...proxy,
-    target: normalizeModels(proxy.target),
-  };
+  return proxy;
 }
 
 function normalizeConfig(config) {
+  const providers = Array.isArray(config?.providers) ? config.providers : [];
   const proxies = Array.isArray(config?.proxies) ? config.proxies : [];
   return {
     ...config,
+    providers: providers.map(normalizeProvider),
     proxies: proxies.map(normalizeProxy),
   };
 }
@@ -58,15 +98,17 @@ function normalizeConfig(config) {
 function loadConfig() {
   try {
     if (!fs.existsSync(CONFIG_PATH)) {
-      configCache = { proxies: [] };
+      configCache = { providers: [], proxies: [] };
       return configCache;
     }
     const raw = fs.readFileSync(CONFIG_PATH, 'utf-8');
-    configCache = normalizeConfig(JSON.parse(raw));
+    let config = normalizeConfig(JSON.parse(raw));
+    config = migrateTargetToProvider(config);
+    configCache = config;
     return configCache;
   } catch (err) {
     console.error('加载配置失败:', err.message);
-    return configCache || { proxies: [] };
+    return configCache || { providers: [], proxies: [] };
   }
 }
 
@@ -86,6 +128,49 @@ function saveConfig(config) {
   }
 }
 
+// ==================== 供应商 CRUD ====================
+
+function getProviders() {
+  return loadConfig().providers || [];
+}
+
+function getProviderById(id) {
+  return getProviders().find(p => p.id === id);
+}
+
+function addProvider(provider) {
+  const config = loadConfig();
+  config.providers = config.providers || [];
+  provider.id = provider.id || 'provider-' + Date.now();
+  provider.models = normalizeModels(provider.models);
+  config.providers.push(provider);
+  saveConfig(config);
+  return provider;
+}
+
+function updateProvider(id, updates) {
+  const config = loadConfig();
+  const idx = (config.providers || []).findIndex(p => p.id === id);
+  if (idx === -1) return null;
+  if (updates.models !== undefined) {
+    updates.models = normalizeModels(updates.models);
+  }
+  config.providers[idx] = { ...config.providers[idx], ...updates, id };
+  saveConfig(config);
+  return config.providers[idx];
+}
+
+function removeProvider(id) {
+  const config = loadConfig();
+  const idx = (config.providers || []).findIndex(p => p.id === id);
+  if (idx === -1) return null;
+  const removed = config.providers.splice(idx, 1)[0];
+  saveConfig(config);
+  return removed;
+}
+
+// ==================== 代理 CRUD ====================
+
 function getProxies() {
   return loadConfig().proxies || [];
 }
@@ -124,6 +209,11 @@ function removeProxy(id) {
 module.exports = {
   loadConfig,
   saveConfig,
+  getProviders,
+  getProviderById,
+  addProvider,
+  updateProvider,
+  removeProvider,
   getProxies,
   getProxyById,
   addProxy,

package/package.json

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

package/public/app.js

@@ -1,86 +1,46 @@
 let proxies = [];
+let providers = [];
 let editingId = null;
 
-// ==================== 供应商管理（全局共享） ====================
-const PROVIDERS_KEY = 'protocol-proxy-providers';
+// ==================== 数据加载 ====================
 
-function loadProviders() {
+async function loadProxies() {
   try {
-    return JSON.parse(localStorage.getItem(PROVIDERS_KEY)) || [];
-  } catch { return []; }
-}
-
-function saveProviders(providers) {
-  localStorage.setItem(PROVIDERS_KEY, JSON.stringify(providers));
-}
-
-function addProvider(name, url) {
-  const providers = loadProviders();
-  if (providers.some(p => p.url === url)) return;
-  providers.push({ id: 'p-' + Date.now(), name, url, protocol: detectProtocol(url) });
-  saveProviders(providers);
-}
-
-function findProviderByUrl(url) {
-  return loadProviders().find(p => p.url === url);
-}
-
-function getProviderDisplayName(url, serverName) {
-  if (serverName && serverName !== url) return serverName;
-  const p = findProviderByUrl(url);
-  return p ? p.name : url;
-}
-
-function detectProtocol(url) {
-  return /anthropic/i.test(url) ? 'anthropic' : 'openai';
-}
-
-// ==================== Model 管理（按供应商 URL） ====================
-function getModelKey(providerUrl) {
-  return providerUrl ? `protocol-proxy-models-${providerUrl}` : 'protocol-proxy-models-__new';
-}
-
-function loadModelsByProvider(providerUrl) {
-  const saved = localStorage.getItem(getModelKey(providerUrl));
-  if (saved) {
-    try { return JSON.parse(saved); } catch { /* fall through */ }
+    const res = await fetch('/api/proxies');
+    proxies = await res.json();
+    renderProxies();
+    updateStats();
+  } catch (err) {
+    console.error('加载代理失败:', err);
+    document.getElementById('proxy-list').innerHTML =
+      '<div class="empty">加载失败，请刷新重试</div>';
   }
-  return [];
-}
-
-function saveModelsByProvider(providerUrl, models) {
-  const normalized = Array.from(new Set((models || []).map(m => m.trim()).filter(Boolean)));
-  localStorage.setItem(getModelKey(providerUrl), JSON.stringify(normalized));
 }
 
-function addModel(providerUrl, name) {
-  if (!providerUrl) return;
-  const models = loadModelsByProvider(providerUrl);
-  if (!models.includes(name)) {
-    models.push(name);
-    saveModelsByProvider(providerUrl, models);
+async function loadProviders() {
+  try {
+    const res = await fetch('/api/providers');
+    providers = await res.json();
+  } catch (err) {
+    console.error('加载供应商失败:', err);
+    providers = [];
   }
 }
 
-function removeModel(providerUrl, name) {
-  const models = loadModelsByProvider(providerUrl).filter(m => m !== name);
-  saveModelsByProvider(providerUrl, models);
-}
-
-function getCurrentProxyId() {
-  return document.getElementById('modal').dataset.proxyId || null;
-}
-
-function getSelectedProviderUrl() {
-  return document.getElementById('target-url').value || '';
+function updateStats() {
+  document.getElementById('stat-total').textContent = proxies.length;
+  document.getElementById('stat-running').textContent =
+    proxies.filter(p => p.running).length;
 }
 
 // ==================== 供应商下拉框 ====================
+
 function initProviderDropdown() {
   const trigger = document.getElementById('provider-dropdown-trigger');
   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) => {
@@ -89,6 +49,7 @@ function initProviderDropdown() {
     if (dropdown.classList.contains('open')) {
       addNameInput.value = '';
       addUrlInput.value = '';
+      addKeyInput.value = '';
       renderProviderOptions();
       addNameInput.focus();
     }
@@ -100,53 +61,54 @@ function initProviderDropdown() {
     }
   });
 
-  addBtn.addEventListener('click', () => {
+  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;
     }
-    addProvider(name, url);
-    selectProvider(url);
-    dropdown.classList.remove('open');
-  });
-
-  addUrlInput.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      addBtn.click();
-    }
-    if (e.key === 'Escape') {
+    try {
+      const res = await fetch('/api/providers', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, url, apiKey }),
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        showToast(err.error || '添加失败', true);
+        return;
+      }
+      const provider = await res.json();
+      await loadProviders();
+      selectProvider(provider.id);
       dropdown.classList.remove('open');
+    } catch (err) {
+      showToast('添加失败: ' + err.message, true);
     }
   });
 
+  addUrlInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') { e.preventDefault(); addBtn.click(); }
+    if (e.key === 'Escape') dropdown.classList.remove('open');
+  });
   addNameInput.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
-      dropdown.classList.remove('open');
-    }
+    if (e.key === 'Escape') dropdown.classList.remove('open');
   });
 }
 
 function renderProviderOptions() {
   const container = document.getElementById('provider-dropdown-options');
-  const providers = loadProviders();
-  const currentUrl = getSelectedProviderUrl();
-
-  container.innerHTML = providers.map(p => {
-    // 优先从服务端配置取供应商名称
-    const serverProxy = proxies.find(pr => pr.target?.providerUrl === p.url);
-    const displayName = (p.name && p.name !== p.url) ? p.name
-      : (serverProxy?.target?.providerName && serverProxy.target.providerName !== p.url) ? serverProxy.target.providerName
-      : p.url;
-    return `
-    <div class="model-option${p.url === currentUrl ? ' selected' : ''}" data-url="${escapeHtml(p.url)}">
-      <span class="model-option-name">${escapeHtml(displayName)}</span>
-      ${displayName !== 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-url="${escapeHtml(p.url)}" title="删除此供应商">&times;</button>
+  const currentId = document.getElementById('provider-id').value;
+
+  container.innerHTML = providers.map(p => `
+    <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>
     </div>
-  `}).join('');
+  `).join('');
 
   if (providers.length === 0) {
     container.innerHTML = '<div style="padding:8px 12px;color:#64748b;font-size:13px">暂无供应商，请在下方添加</div>';
@@ -155,7 +117,7 @@ function renderProviderOptions() {
   container.querySelectorAll('.model-option').forEach(opt => {
     opt.addEventListener('click', (e) => {
       if (e.target.closest('.model-option-delete')) return;
-      selectProvider(opt.dataset.url);
+      selectProvider(opt.dataset.id);
       document.getElementById('provider-dropdown').classList.remove('open');
     });
   });
@@ -163,40 +125,42 @@ function renderProviderOptions() {
   container.querySelectorAll('.model-option-delete').forEach(btn => {
     btn.addEventListener('click', async (e) => {
       e.stopPropagation();
-      const url = btn.dataset.deleteUrl;
-      const p = findProviderByUrl(url);
-      const ok = await showConfirm(`确定要删除供应商 <strong>${escapeHtml(p?.name || url)}</strong> 吗？`);
+      const id = btn.dataset.deleteId;
+      const p = providers.find(pr => pr.id === id);
+      const ok = await showConfirm(`确定要删除供应商 <strong>${escapeHtml(p?.name || '')}</strong> 吗？`);
       if (!ok) return;
-      const providers = loadProviders().filter(pr => pr.url !== url);
-      saveProviders(providers);
-      localStorage.removeItem(getModelKey(url));
-      if (getSelectedProviderUrl() === url) {
-        selectProvider('');
+      try {
+        const res = await fetch(`/api/providers/${id}`, { method: 'DELETE' });
+        if (!res.ok) {
+          const err = await res.json();
+          showToast(err.error || '删除失败', true);
+          return;
+        }
+        await loadProviders();
+        if (document.getElementById('provider-id').value === id) {
+          selectProvider('');
+        }
+        renderProviderOptions();
+      } catch (err) {
+        showToast('删除失败: ' + err.message, true);
       }
-      renderProviderOptions();
     });
   });
 }
 
-function selectProvider(url) {
-  document.getElementById('target-url').value = url || '';
-  const provider = findProviderByUrl(url);
-  document.getElementById('target-protocol').value = url ? (provider?.protocol || detectProtocol(url)) : '';
-  if (url) {
-    const serverProxy = proxies.find(pr => pr.target?.providerUrl === url);
-    const name = (provider?.name && provider.name !== url) ? provider.name
-      : (serverProxy?.target?.providerName && serverProxy.target.providerName !== url) ? serverProxy.target.providerName
-      : null;
-    document.getElementById('provider-dropdown-value').textContent = name ? `${name} - ${url}` : url;
-  } else {
-    document.getElementById('provider-dropdown-value').textContent = '选择供应商...';
-  }
-  // 切换供应商后刷新模型列表
+function selectProvider(id) {
+  const provider = providers.find(p => p.id === id);
+  document.getElementById('provider-id').value = id || '';
+  document.getElementById('target-protocol').value = provider ? provider.protocol : '';
+  document.getElementById('provider-dropdown-value').textContent = provider
+    ? (provider.name !== provider.url ? `${provider.name} - ${provider.url}` : provider.url)
+    : '选择供应商...';
   renderModelOptions();
   updateModelAddState();
 }
 
 // ==================== Model 下拉框 ====================
+
 function initModelDropdown() {
   const trigger = document.getElementById('model-dropdown-trigger');
   const dropdown = document.getElementById('model-dropdown');
@@ -218,49 +182,57 @@ function initModelDropdown() {
     }
   });
 
-  addBtn.addEventListener('click', () => {
-    const providerUrl = getSelectedProviderUrl();
-    if (!providerUrl) {
-      showToast('请先选择供应商地址', true);
+  addBtn.addEventListener('click', async () => {
+    const providerId = document.getElementById('provider-id').value;
+    if (!providerId) {
+      showToast('请先选择供应商', true);
       return;
     }
     const name = addInput.value.trim();
     if (!name) return;
-    addModel(providerUrl, name);
-    selectModel(name);
-    renderModelOptions();
-    addInput.value = '';
-    addInput.focus();
+    const provider = providers.find(p => p.id === providerId);
+    if (!provider) return;
+    const models = [...(provider.models || []), name];
+    try {
+      await fetch(`/api/providers/${providerId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ models }),
+      });
+      await loadProviders();
+      selectModel(name);
+      renderModelOptions();
+      addInput.value = '';
+      addInput.focus();
+    } catch (err) {
+      showToast('添加模型失败: ' + err.message, true);
+    }
   });
 
   addInput.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      addBtn.click();
-    }
-    if (e.key === 'Escape') {
-      dropdown.classList.remove('open');
-    }
+    if (e.key === 'Enter') { e.preventDefault(); addBtn.click(); }
+    if (e.key === 'Escape') dropdown.classList.remove('open');
   });
 }
 
 function renderModelOptions() {
   const container = document.getElementById('model-dropdown-options');
-  const providerUrl = getSelectedProviderUrl();
-  const models = providerUrl ? loadModelsByProvider(providerUrl) : [];
+  const providerId = document.getElementById('provider-id').value;
+  const provider = providers.find(p => p.id === providerId);
+  const models = provider?.models || [];
   const current = document.getElementById('target-model').value;
 
-  container.innerHTML = models.map(m => `
-    <div class="model-option${m === current ? ' selected' : ''}" data-model="${escapeHtml(m)}">
-      <span class="model-option-name">${escapeHtml(m)}</span>
-      <button type="button" class="model-option-delete" data-delete="${escapeHtml(m)}" title="删除此模型">&times;</button>
-    </div>
-  `).join('');
-
-  if (!providerUrl) {
+  if (!providerId) {
     container.innerHTML = '<div style="padding:8px 12px;color:#64748b;font-size:13px">请先选择供应商</div>';
   } else if (models.length === 0) {
     container.innerHTML = '<div style="padding:8px 12px;color:#64748b;font-size:13px">暂无模型，请在下方添加</div>';
+  } else {
+    container.innerHTML = models.map(m => `
+      <div class="model-option${m === current ? ' selected' : ''}" data-model="${escapeHtml(m)}">
+        <span class="model-option-name">${escapeHtml(m)}</span>
+        <button type="button" class="model-option-delete" data-delete="${escapeHtml(m)}" title="删除此模型">&times;</button>
+      </div>
+    `).join('');
   }
 
   container.querySelectorAll('.model-option').forEach(opt => {
@@ -277,11 +249,23 @@ function renderModelOptions() {
       const name = btn.dataset.delete;
       const ok = await showConfirm(`确定要删除模型 <strong>${escapeHtml(name)}</strong> 吗？`);
       if (!ok) return;
-      removeModel(getSelectedProviderUrl(), name);
-      if (document.getElementById('target-model').value === name) {
-        selectModel('');
+      const provider = providers.find(p => p.id === providerId);
+      if (!provider) return;
+      const models = (provider.models || []).filter(m => m !== name);
+      try {
+        await fetch(`/api/providers/${providerId}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ models }),
+        });
+        await loadProviders();
+        if (document.getElementById('target-model').value === name) {
+          selectModel('');
+        }
+        renderModelOptions();
+      } catch (err) {
+        showToast('删除模型失败: ' + err.message, true);
       }
-      renderModelOptions();
     });
   });
 }
@@ -293,11 +277,10 @@ function selectModel(value) {
 }
 
 function updateModelAddState() {
-  const section = document.getElementById('model-add-section');
-  const providerUrl = getSelectedProviderUrl();
+  const providerId = document.getElementById('provider-id').value;
   const addInput = document.getElementById('model-add-input');
   const addBtn = document.getElementById('model-add-btn');
-  if (providerUrl) {
+  if (providerId) {
     addInput.disabled = false;
     addBtn.disabled = false;
     addInput.placeholder = '输入模型名称';
@@ -308,17 +291,8 @@ function updateModelAddState() {
   }
 }
 
-function getSelectedModels() {
-  const providerUrl = getSelectedProviderUrl();
-  const models = providerUrl ? [...loadModelsByProvider(providerUrl)] : [];
-  const current = document.getElementById('target-model').value.trim();
-  if (current && !models.includes(current)) {
-    models.unshift(current);
-  }
-  return Array.from(new Set(models));
-}
-
 // ==================== 初始化 ====================
+
 function generateToken() {
   const arr = new Uint8Array(24);
   crypto.getRandomValues(arr);
@@ -326,7 +300,7 @@ function generateToken() {
 }
 
 async function init() {
-  await loadProxies();
+  await Promise.all([loadProxies(), loadProviders()]);
   initProviderDropdown();
   initModelDropdown();
   document.getElementById('proxy-auth').addEventListener('change', (e) => {
@@ -338,26 +312,8 @@ async function init() {
   });
 }
 
-async function loadProxies() {
-  try {
-    const res = await fetch('/api/proxies');
-    proxies = await res.json();
-    renderProxies();
-    updateStats();
-  } catch (err) {
-    console.error('加载代理失败:', err);
-    document.getElementById('proxy-list').innerHTML =
-      '<div class="empty">加载失败，请刷新重试</div>';
-  }
-}
-
-function updateStats() {
-  document.getElementById('stat-total').textContent = proxies.length;
-  document.getElementById('stat-running').textContent =
-    proxies.filter(p => p.running).length;
-}
-
 // ==================== 代理地址复制 ====================
+
 function getProxyUrl(port) {
   return `http://localhost:${port}`;
 }
@@ -409,6 +365,7 @@ function showToast(msg, isError) {
 }
 
 // ==================== 渲染代理列表 ====================
+
 function renderProxies() {
   const container = document.getElementById('proxy-list');
   if (proxies.length === 0) {
@@ -417,8 +374,6 @@ function renderProxies() {
   }
 
   container.innerHTML = proxies.map(p => {
-    const t = p.target || {};
-    const providerName = getProviderDisplayName(t.providerUrl || '', t.providerName);
     return `
     <div class="proxy-item">
       <div class="proxy-header">
@@ -450,13 +405,13 @@ function renderProxies() {
         </thead>
         <tbody>
           <tr>
-            <td>${escapeHtml(providerName)}${providerName !== t.providerUrl ? ` <span style="color:#64748b;font-size:12px">(${escapeHtml(t.providerUrl)})</span>` : ''}</td>
+            <td>${escapeHtml(p.providerName || p.providerUrl || '-')}</td>
             <td>
-              <span class="badge" style="background:${t.protocol==='openai'?'#0c4a6e':'#581c87'};color:${t.protocol==='openai'?'#7dd3fc':'#e9d5ff'}">
-                ${t.protocol || '-'}
+              <span class="badge" style="background:${p.protocol==='openai'?'#0c4a6e':'#581c87'};color:${p.protocol==='openai'?'#7dd3fc':'#e9d5ff'}">
+                ${p.protocol || '-'}
               </span>
             </td>
-            <td><code>${escapeHtml(t.defaultModel) || '-'}</code></td>
+            <td><code>${escapeHtml(p.defaultModel) || '-'}</code></td>
           </tr>
         </tbody>
       </table>
@@ -473,6 +428,7 @@ function renderProxies() {
 }
 
 // ==================== 弹窗操作 ====================
+
 function openModal(id = null) {
   editingId = id;
   document.getElementById('modal').dataset.proxyId = id || '';
@@ -482,42 +438,14 @@ function openModal(id = null) {
   if (id) {
     const p = proxies.find(x => x.id === id);
     if (!p) return;
-    const t = p.target || {};
     document.getElementById('proxy-id').value = p.id;
     document.getElementById('proxy-name').value = p.name;
     document.getElementById('proxy-port').value = p.port;
     document.getElementById('proxy-auth').value = p.requireAuth ? 'true' : 'false';
     document.getElementById('proxy-auth-token').value = p.authToken || '';
     document.getElementById('auth-token-group').style.display = p.requireAuth ? 'block' : 'none';
-    document.getElementById('target-key').value = t.apiKey || '';
-
-    // 自动注册供应商到全局列表
-    if (t.providerUrl && !findProviderByUrl(t.providerUrl)) {
-      addProvider(getProviderDisplayName(t.providerUrl), t.providerUrl);
-    }
-
-    // 迁移旧模型数据：从按代理ID存储 → 按供应商URL存储
-    if (t.providerUrl) {
-      const existingByProvider = loadModelsByProvider(t.providerUrl);
-      if (existingByProvider.length === 0) {
-        // 优先用服务端的模型列表
-        let modelsToMigrate = Array.isArray(t.models) ? t.models.filter(Boolean) : [];
-        // 兼容旧版 localStorage（按代理ID存储）
-        if (modelsToMigrate.length === 0) {
-          const legacyKey = `protocol-proxy-models-${id}`;
-          try {
-            const legacy = JSON.parse(localStorage.getItem(legacyKey));
-            if (Array.isArray(legacy)) modelsToMigrate = legacy;
-          } catch {}
-        }
-        if (modelsToMigrate.length > 0) {
-          saveModelsByProvider(t.providerUrl, modelsToMigrate);
-        }
-      }
-    }
-
-    selectProvider(t.providerUrl || '');
-    selectModel(t.defaultModel || '');
+    selectProvider(p.providerId || '');
+    selectModel(p.defaultModel || '');
   } else {
     document.getElementById('proxy-id').value = '';
     document.getElementById('auth-token-group').style.display = 'none';
@@ -539,37 +467,27 @@ function closeModal() {
 async function handleSubmit(e) {
   e.preventDefault();
 
-  const providerUrl = getSelectedProviderUrl();
-  if (!providerUrl) {
-    showToast('请选择供应商地址', true);
+  const providerId = document.getElementById('provider-id').value;
+  if (!providerId) {
+    showToast('请选择供应商', true);
     return;
   }
 
   const port = parseInt(document.getElementById('proxy-port').value);
 
-  // 前端端口冲突校验
   const conflict = proxies.find(p => p.id !== editingId && p.port === port);
   if (conflict) {
     showToast(`端口 ${port} 已被代理「${conflict.name}」占用`, true);
     return;
   }
 
-  const provider = findProviderByUrl(providerUrl);
-  const target = {
-    providerUrl,
-    providerName: provider?.name || providerUrl,
-    protocol: detectProtocol(providerUrl),
-    defaultModel: document.getElementById('target-model').value.trim() || undefined,
-    models: getSelectedModels(),
-    apiKey: document.getElementById('target-key').value.trim(),
-  };
-
   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,
-    target,
+    providerId,
+    defaultModel: document.getElementById('target-model').value.trim() || '',
   };
 
   try {
@@ -598,6 +516,7 @@ async function handleSubmit(e) {
 }
 
 // ==================== 代理操作 ====================
+
 async function startProxy(id) {
   try {
     await fetch(`/api/proxies/${id}/start`, { method: 'POST' });
@@ -642,6 +561,7 @@ async function editProxy(id) {
 }
 
 // ==================== 工具函数 ====================
+
 function escapeHtml(text) {
   if (!text) return '';
   const div = document.createElement('div');

package/public/index.html

@@ -71,10 +71,10 @@
           <div class="target-section">
             <h4>目标供应商配置</h4>
             <div class="target-item">
+              <input type="hidden" id="provider-id">
               <div class="form-row">
                 <div class="form-group">
-                  <label>供应商地址</label>
-                  <input type="hidden" id="target-url">
+                  <label>供应商</label>
                   <div class="model-dropdown" id="provider-dropdown">
                     <div class="model-dropdown-trigger" id="provider-dropdown-trigger">
                       <span id="provider-dropdown-value">选择供应商...</span>
@@ -85,13 +85,14 @@
                       <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>
                   </div>
                 </div>
                 <div class="form-group">
-                  <label>目标协议</label>
+                  <label>协议</label>
                   <input type="text" id="target-protocol" readonly placeholder="自动识别" style="background:#1e293b;color:#94a3b8;cursor:not-allowed">
                 </div>
               </div>

package/server.js

@@ -138,39 +138,145 @@ async function init() {
   app.use(express.json());
   app.use(express.static(path.join(__dirname, 'public')));
 
-  // ==================== 管理 API ====================
+  // ==================== 辅助函数 ====================
+
+  function resolveTarget(proxy) {
+    const provider = configStore.getProviderById(proxy.providerId);
+    if (!provider) return null;
+    return {
+      providerUrl: provider.url,
+      providerName: provider.name,
+      protocol: provider.protocol,
+      apiKey: provider.apiKey,
+      defaultModel: proxy.defaultModel,
+      models: provider.models,
+    };
+  }
 
-  // 获取所有代理配置
-  app.get('/api/proxies', (req, res) => {
-    const proxies = configStore.getProxies().map(p => ({
+  async function startProxyWithProvider(proxy) {
+    const target = resolveTarget(proxy);
+    if (!target) throw new Error(`供应商 ${proxy.providerId} 不存在`);
+    const proxyConfig = { ...proxy, target };
+    return proxyManager.startProxy(proxyConfig);
+  }
+
+  // ==================== 供应商 API ====================
+
+  app.get('/api/providers', (req, res) => {
+    const providers = configStore.getProviders().map(p => ({
       ...p,
-      target: p.target ? {
-        ...p.target,
-        apiKey: p.target.apiKey ? '***' : '',
-      } : null,
-      running: proxyManager.isRunning(p.id),
+      apiKey: p.apiKey ? '***' : '',
     }));
+    res.json(providers);
+  });
+
+  app.get('/api/providers/:id', (req, res) => {
+    const provider = configStore.getProviderById(req.params.id);
+    if (!provider) return res.status(404).json({ error: 'Provider not found' });
+    res.json(provider);
+  });
+
+  app.post('/api/providers', (req, res) => {
+    const { name, url, protocol, apiKey, models } = req.body;
+    if (!name || !url) {
+      return res.status(400).json({ error: 'name and url are required' });
+    }
+    const provider = configStore.addProvider({
+      name, url,
+      protocol: protocol || (/anthropic/i.test(url) ? 'anthropic' : 'openai'),
+      apiKey: apiKey || '',
+      models: models || [],
+    });
+    res.status(201).json(provider);
+  });
+
+  app.put('/api/providers/:id', async (req, res) => {
+    const existing = configStore.getProviderById(req.params.id);
+    if (!existing) return res.status(404).json({ error: 'Provider not found' });
+
+    const updates = {};
+    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.models !== undefined) updates.models = req.body.models;
+
+    const updated = configStore.updateProvider(req.params.id, updates);
+
+    // 同步更新引用此供应商的运行中代理
+    const affectedProxies = configStore.getProxies().filter(p => p.providerId === req.params.id);
+    for (const proxy of affectedProxies) {
+      if (!proxyManager.isRunning(proxy.id)) continue;
+      const target = resolveTarget(proxy);
+      if (target) proxyManager.updateProxyConfig({ ...proxy, target });
+    }
+
+    res.json(updated);
+  });
+
+  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' });
+
+    // 检查是否有代理在使用此供应商
+    const inUse = configStore.getProxies().some(p => p.providerId === req.params.id);
+    if (inUse) {
+      return res.status(409).json({ error: '该供应商正在被代理使用，无法删除' });
+    }
+
+    configStore.removeProvider(req.params.id);
+    res.json({ success: true });
+  });
+
+  // ==================== 代理 API ====================
+
+  // 获取所有代理配置
+  app.get('/api/proxies', (req, res) => {
+    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,
+        providerName: provider?.name || '',
+        providerUrl: provider?.url || '',
+        protocol: provider?.protocol || '',
+        defaultModel: p.defaultModel || '',
+        running: proxyManager.isRunning(p.id),
+      };
+    });
     res.json(proxies);
   });
 
-  // 获取单个代理配置（含敏感信息）
+  // 获取单个代理配置
   app.get('/api/proxies/:id', (req, res) => {
     const proxy = configStore.getProxyById(req.params.id);
     if (!proxy) return res.status(404).json({ error: 'Proxy not found' });
-    res.json(proxy);
+    const provider = configStore.getProviderById(proxy.providerId);
+    res.json({
+      ...proxy,
+      providerName: provider?.name || '',
+      providerUrl: provider?.url || '',
+      protocol: provider?.protocol || '',
+    });
   });
 
   // 创建代理
   app.post('/api/proxies', async (req, res) => {
-    const { name, port, requireAuth, authToken, target } = req.body;
+    const { name, port, requireAuth, authToken, providerId, defaultModel } = req.body;
 
-    if (!name || !port || !target) {
-      return res.status(400).json({ error: 'name, port and target are required' });
+    if (!name || !port || !providerId) {
+      return res.status(400).json({ error: 'name, port and providerId are required' });
     }
 
+    const provider = configStore.getProviderById(providerId);
+    if (!provider) return res.status(400).json({ error: '供应商不存在' });
+
     const parsedPort = parseInt(port);
 
-    // 端口冲突校验
     const existing = configStore.getProxies().find(p => p.port === parsedPort);
     if (existing) {
       return res.status(409).json({
@@ -183,14 +289,14 @@ async function init() {
       port: parsedPort,
       requireAuth: !!requireAuth,
       authToken: authToken || null,
-      target,
+      providerId,
+      defaultModel: defaultModel || '',
     });
 
     try {
-      await proxyManager.startProxy(proxy);
+      await startProxyWithProvider(proxy);
       res.status(201).json({ ...proxy, running: true });
     } catch (err) {
-      // 启动失败，回滚已保存的配置
       configStore.removeProxy(proxy.id);
       res.status(500).json({ error: `代理启动失败: ${err.message}` });
     }
@@ -198,18 +304,22 @@ async function init() {
 
   // 更新代理
   app.put('/api/proxies/:id', async (req, res) => {
-    const { name, port, requireAuth, authToken, target } = req.body;
     const existing = configStore.getProxyById(req.params.id);
     if (!existing) return res.status(404).json({ error: 'Proxy not found' });
 
     const updates = {};
-    if (name !== undefined) updates.name = name;
-    if (port !== undefined) updates.port = parseInt(port);
-    if (requireAuth !== undefined) updates.requireAuth = !!requireAuth;
-    if (authToken !== undefined) updates.authToken = authToken || null;
-    if (target !== undefined) updates.target = target;
+    if (req.body.name !== undefined) updates.name = req.body.name;
+    if (req.body.port !== undefined) updates.port = parseInt(req.body.port);
+    if (req.body.requireAuth !== undefined) updates.requireAuth = !!req.body.requireAuth;
+    if (req.body.authToken !== undefined) updates.authToken = req.body.authToken || null;
+    if (req.body.providerId !== undefined) {
+      if (!configStore.getProviderById(req.body.providerId)) {
+        return res.status(400).json({ error: '供应商不存在' });
+      }
+      updates.providerId = req.body.providerId;
+    }
+    if (req.body.defaultModel !== undefined) updates.defaultModel = req.body.defaultModel;
 
-    // 端口变更时校验冲突
     const needRestart = updates.port !== undefined && updates.port !== existing.port;
     if (needRestart) {
       const conflict = configStore.getProxies().find(p => p.id !== req.params.id && p.port === updates.port);
@@ -224,12 +334,14 @@ async function init() {
 
     if (needRestart) {
       try {
-        await proxyManager.restartProxy(updated);
+        await startProxyWithProvider(updated);
       } catch (err) {
         return res.status(500).json({ error: `代理重启失败: ${err.message}` });
       }
     } else {
-      proxyManager.updateProxyConfig(updated);
+      // 更新供应商配置引用
+      const target = resolveTarget(updated);
+      if (target) proxyManager.updateProxyConfig({ ...updated, target });
     }
 
     res.json({ ...updated, running: proxyManager.isRunning(updated.id) });
@@ -251,7 +363,7 @@ async function init() {
     if (!proxy) return res.status(404).json({ error: 'Proxy not found' });
 
     try {
-      await proxyManager.startProxy(proxy);
+      await startProxyWithProvider(proxy);
       res.json({ success: true, running: true });
     } catch (err) {
       res.status(500).json({ error: 'Failed to start proxy', message: err.message });
@@ -283,7 +395,7 @@ async function init() {
   const proxies = configStore.getProxies();
   for (const proxy of proxies) {
     try {
-      await proxyManager.startProxy(proxy);
+      await startProxyWithProvider(proxy);
     } catch (err) {
       console.error(`[Init] Failed to start proxy ${proxy.name}:`, err.message);
     }