protocol-proxy 2.5.0 → 2.5.1

package/package.json

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

package/public/app.js

@@ -380,6 +380,42 @@ function renderProviderOptions() {
   });
 }
 
+function attachMaskedKeyClick(span) {
+  span.style.cursor = 'pointer';
+  span.title = '点击修改 API Key';
+  span.addEventListener('click', () => {
+    const row = span.closest('.api-key-entry');
+    const group = span.parentElement;
+    const input = document.createElement('input');
+    input.type = 'password';
+    input.className = 'api-key-input';
+    input.placeholder = '输入新的 API Key...';
+    group.replaceChild(input, span);
+    input.focus();
+    input.addEventListener('blur', async () => {
+      const val = input.value.trim();
+      if (!val) {
+        restoreMaskedSpan(group, input, row);
+        return;
+      }
+      if (await showConfirm('确认修改此 API Key？<br>取消将恢复为 ****', '确认修改')) {
+        row.dataset.masked = 'false';
+      } else {
+        row.dataset.masked = 'true';
+        restoreMaskedSpan(group, input, row);
+      }
+    });
+  });
+}
+
+function restoreMaskedSpan(group, input, row) {
+  const restored = document.createElement('span');
+  restored.className = 'api-key-display';
+  restored.textContent = '****';
+  group.replaceChild(restored, input);
+  attachMaskedKeyClick(restored);
+}
+
 function renderApiKeys(provider) {
   const container = document.getElementById('api-keys-list');
   if (!container) return;
@@ -407,6 +443,10 @@ function renderApiKeys(provider) {
     </div>
   `).join('');
 
+  container.querySelectorAll('.api-key-display').forEach(span => {
+    attachMaskedKeyClick(span);
+  });
+
   container.querySelectorAll('.api-key-remove').forEach(btn => {
     btn.addEventListener('click', () => {
       btn.closest('.api-key-entry').remove();
@@ -453,7 +493,12 @@ function initApiKeyAddBtn() {
   });
 }
 
-function selectProvider(id) {
+function hasUnsavedMaskedKeyEdits() {
+  return !!document.querySelector('#api-keys-list .api-key-entry[data-index][data-masked="false"]');
+}
+
+async function selectProvider(id) {
+  if (hasUnsavedMaskedKeyEdits() && !await showConfirm('当前有未保存的 API Key 修改，切换供应商将丢失，确认切换？', '确认切换')) return;
   const provider = providers.find(p => p.id === id);
   document.getElementById('provider-id').value = id || '';
   const protocol = provider ? provider.protocol : '';
@@ -958,14 +1003,14 @@ function copyProxyUrl(port, btn) {
   });
 }
 
-function showConfirm(text) {
+function showConfirm(text, okText = '删除') {
   return new Promise(resolve => {
     const modal = document.getElementById('confirm-modal');
     document.getElementById('confirm-text').innerHTML = text;
-    modal.classList.add('active');
-
     const okBtn = document.getElementById('confirm-ok');
     const cancelBtn = document.getElementById('confirm-cancel');
+    okBtn.textContent = okText;
+    modal.classList.add('active');
 
     function cleanup(result) {
       modal.classList.remove('active');

package/public/style.css

@@ -793,6 +793,10 @@ form {
 }
 
 /* Confirm modal */
+.confirm-modal {
+  align-items: center;
+}
+
 .confirm-modal .confirm-box {
   background: rgba(15, 23, 42, 0.8);
   backdrop-filter: blur(24px);
@@ -1277,6 +1281,13 @@ form {
   color: #64748b;
   font-size: 0.9rem;
   letter-spacing: 2px;
+  cursor: pointer;
+  transition: border-color 0.2s, color 0.2s;
+}
+
+.api-key-display:hover {
+  border-color: rgba(99, 102, 241, 0.5);
+  color: #94a3b8;
 }
 
 .api-key-remove {