feat: 添加 CPA 地址输入框的显示/隐藏功能，优化用户体验

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>

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';
+  syncToggleButtonLabel(btnTogglePassword, inputPassword, {
-  btnTogglePassword.innerHTML = isHidden ? EYE_OPEN_ICON : EYE_CLOSED_ICON;
+    show: '显示密码',
-  btnTogglePassword.setAttribute('aria-label', isHidden ? '显示密码' : '隐藏密码');
+    hide: '隐藏密码',
-  btnTogglePassword.title = isHidden ? '显示密码' : '隐藏密码';
+  });
+}
+
+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);
 });