From e1ca2a65e4986741276a880f8a9904b0716c023e Mon Sep 17 00:00:00 2001
From: QLHazyCoder <2825305047@qq.com>
Date: Sat, 11 Apr 2026 02:57:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20CPA=20=E5=9C=B0?=
 =?UTF-8?q?=E5=9D=80=E8=BE=93=E5=85=A5=E6=A1=86=E7=9A=84=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?/=E9=9A=90=E8=97=8F=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sidepanel/sidepanel.html |  5 ++++-
 sidepanel/sidepanel.js   | 31 +++++++++++++++++++++++++++----
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/sidepanel/sidepanel.html b/sidepanel/sidepanel.html
index b7bc20a..98a4d9c 100644
--- a/sidepanel/sidepanel.html
+++ b/sidepanel/sidepanel.html
@@ -46,7 +46,10 @@
     <div class="data-card">
       <div class="data-row">
         <span class="data-label">CPA</span>
-        <input type="password" id="input-vps-url" class="data-input" placeholder="http://ip:port/management.html#/oauth" />
+        <div class="input-with-icon">
+          <input type="password" id="input-vps-url" class="data-input data-input-with-icon" placeholder="http://ip:port/management.html#/oauth" />
+          <button id="btn-toggle-vps-url" class="input-icon-btn" type="button" aria-label="显示 CPA 地址" title="显示 CPA 地址"></button>
+        </div>
       </div>
       <div class="data-row">
         <span class="data-label">管理密钥</span>
diff --git a/sidepanel/sidepanel.js b/sidepanel/sidepanel.js
index 6319445..f9ded6f 100644
--- a/sidepanel/sidepanel.js
+++ b/sidepanel/sidepanel.js
@@ -17,6 +17,7 @@ const displayStatus = document.getElementById('display-status');
 const statusBar = document.getElementById('status-bar');
 const inputEmail = document.getElementById('input-email');
 const inputPassword = document.getElementById('input-password');
+const btnToggleVpsUrl = document.getElementById('btn-toggle-vps-url');
 const btnFetchEmail = document.getElementById('btn-fetch-email');
 const btnTogglePassword = document.getElementById('btn-toggle-password');
 const btnSaveSettings = document.getElementById('btn-save-settings');
@@ -680,11 +681,27 @@ async function fetchDuckEmail(options = {}) {
   }
 }
 
+function syncToggleButtonLabel(button, input, labels) {
+  if (!button || !input) return;
+
+  const isHidden = input.type === 'password';
+  button.innerHTML = isHidden ? EYE_OPEN_ICON : EYE_CLOSED_ICON;
+  button.setAttribute('aria-label', isHidden ? labels.show : labels.hide);
+  button.title = isHidden ? labels.show : labels.hide;
+}
+
 function syncPasswordToggleLabel() {
-  const isHidden = inputPassword.type === 'password';
-  btnTogglePassword.innerHTML = isHidden ? EYE_OPEN_ICON : EYE_CLOSED_ICON;
-  btnTogglePassword.setAttribute('aria-label', isHidden ? '显示密码' : '隐藏密码');
-  btnTogglePassword.title = isHidden ? '显示密码' : '隐藏密码';
+  syncToggleButtonLabel(btnTogglePassword, inputPassword, {
+    show: '显示密码',
+    hide: '隐藏密码',
+  });
+}
+
+function syncVpsUrlToggleLabel() {
+  syncToggleButtonLabel(btnToggleVpsUrl, inputVpsUrl, {
+    show: '显示 CPA 地址',
+    hide: '隐藏 CPA 地址',
+  });
 }
 
 async function maybeTakeoverAutoRun(actionLabel) {
@@ -788,6 +805,11 @@ btnTogglePassword.addEventListener('click', () => {
   syncPasswordToggleLabel();
 });
 
+btnToggleVpsUrl.addEventListener('click', () => {
+  inputVpsUrl.type = inputVpsUrl.type === 'password' ? 'text' : 'password';
+  syncVpsUrlToggleLabel();
+});
+
 btnSaveSettings.addEventListener('click', async () => {
   if (!settingsDirty) {
     showToast('配置已是最新', 'info', 1400);
@@ -1086,6 +1108,7 @@ initTheme();
 updateSaveButtonState();
 restoreState().then(() => {
   syncPasswordToggleLabel();
+  syncVpsUrlToggleLabel();
   updateButtonStates();
   updateStatusDisplay(latestState);
 });