fix(mail2925): 修复验证码轮询与登录态复用逻辑并清理中文文案，重构 sidepanel：统一 Hotmail 和 2925 号池表单交互

- 抽出共享 account-pool-ui helper - 统一添加账号、取消添加、批量导入交互 - 调整号池列表收起高度与按钮布局 - 补充测试并同步更新项目文档
2026-04-21 18:02:59 +08:00
parent 9228c7080e
commit 7c20405685
22 changed files with 1014 additions and 341 deletions
@@ -0,0 +1,58 @@
+(function attachSidepanelAccountPoolUi(globalScope) {
+  function createAccountPoolFormController(options = {}) {
+    const {
+      formShell = null,
+      toggleButton = null,
+      hiddenLabel = '添加账号',
+      visibleLabel = '取消添加',
+      onClear = null,
+      onFocus = null,
+    } = options;
+
+    let visible = false;
+
+    function sync() {
+      if (formShell) {
+        formShell.hidden = !visible;
+      }
+      if (toggleButton) {
+        toggleButton.textContent = visible ? visibleLabel : hiddenLabel;
+        toggleButton.setAttribute('aria-expanded', String(visible));
+      }
+    }
+
+    function setVisible(nextVisible, controlOptions = {}) {
+      const {
+        clearForm = false,
+        focusField = false,
+      } = controlOptions;
+
+      visible = Boolean(nextVisible);
+      if (clearForm && typeof onClear === 'function') {
+        onClear();
+      }
+
+      sync();
+
+      if (visible && focusField && typeof onFocus === 'function') {
+        onFocus();
+      }
+    }
+
+    function isVisible() {
+      return visible;
+    }
+
+    sync();
+
+    return {
+      isVisible,
+      setVisible,
+      sync,
+    };
+  }
+
+  globalScope.SidepanelAccountPoolUi = {
+    createAccountPoolFormController,
+  };
+})(window);
@@ -12,6 +12,7 @@
    const expandedStorageKey = constants.expandedStorageKey || 'multipage-hotmail-list-expanded';
    const displayTimeZone = constants.displayTimeZone || 'Asia/Shanghai';
    const copyIcon = constants.copyIcon || '';
+    const createAccountPoolFormController = globalScope.SidepanelAccountPoolUi?.createAccountPoolFormController;

    let actionInFlight = false;
    let listExpanded = false;
@@ -177,6 +178,25 @@
      dom.inputHotmailRefreshToken.value = '';
    }

+    const formController = typeof createAccountPoolFormController === 'function'
+      ? createAccountPoolFormController({
+        formShell: dom.hotmailFormShell,
+        toggleButton: dom.btnToggleHotmailForm,
+        hiddenLabel: '添加账号',
+        visibleLabel: '取消添加',
+        onClear: () => {
+          clearHotmailForm();
+        },
+        onFocus: () => {
+          dom.inputHotmailEmail?.focus?.();
+        },
+      })
+      : {
+        isVisible: () => false,
+        setVisible() {},
+        sync() {},
+      };
+
    function renderHotmailAccounts() {
      if (!dom.hotmailAccountsList) return;
      const latestState = state.getLatestState();
@@ -318,7 +338,7 @@
        }

        helpers.showToast(`已保存 Hotmail 账号 ${email}`, 'success', 1800);
-        clearHotmailForm();
+        formController.setVisible(false, { clearForm: true });
      } catch (err) {
        helpers.showToast(`保存 Hotmail 账号失败：${err.message}`, 'error');
      } finally {
@@ -474,6 +494,14 @@
        setHotmailListExpanded(!listExpanded);
      });

+      dom.btnToggleHotmailForm?.addEventListener('click', () => {
+        if (formController.isVisible()) {
+          formController.setVisible(false, { clearForm: true });
+          return;
+        }
+        formController.setVisible(true, { focusField: true });
+      });
+
      dom.btnHotmailUsageGuide?.addEventListener('click', async () => {
        await helpers.openConfirmModal({
          title: '使用教程',
@@ -514,6 +542,7 @@
      dom.btnAddHotmailAccount?.addEventListener('click', handleAddHotmailAccount);
      dom.btnImportHotmailAccounts?.addEventListener('click', handleImportHotmailAccounts);
      dom.hotmailAccountsList?.addEventListener('click', handleAccountListClick);
+      formController.sync();
    }

    return {
@@ -12,11 +12,11 @@
    const expandedStorageKey = constants.expandedStorageKey || 'multipage-mail2925-list-expanded';
    const displayTimeZone = constants.displayTimeZone || 'Asia/Shanghai';
    const copyIcon = constants.copyIcon || '';
+    const createAccountPoolFormController = globalScope.SidepanelAccountPoolUi?.createAccountPoolFormController;

    let actionInFlight = false;
    let listExpanded = false;
    let editingAccountId = '';
-    let formVisible = false;

    function getMail2925Accounts(currentState = state.getLatestState()) {
      return helpers.getMail2925Accounts(currentState);
@@ -119,34 +119,24 @@
      if (dom.inputMail2925Password) dom.inputMail2925Password.value = '';
    }

-    function syncMail2925FormUi() {
-      if (dom.mail2925FormShell) {
-        dom.mail2925FormShell.hidden = !formVisible;
-      }
-      if (dom.btnToggleMail2925Form) {
-        dom.btnToggleMail2925Form.textContent = formVisible ? '取消添加' : '添加账号';
-        dom.btnToggleMail2925Form.setAttribute('aria-expanded', String(formVisible));
-      }
-    }
-
-    function setMail2925FormVisible(visible, options = {}) {
-      const {
-        clearForm = false,
-        focusField = false,
-      } = options;
-
-      formVisible = Boolean(visible);
-      if (!formVisible && clearForm) {
-        stopEditingAccount({ clearForm: true });
-      } else if (clearForm) {
-        clearMail2925Form();
-      }
-
-      syncMail2925FormUi();
-      if (formVisible && focusField) {
-        dom.inputMail2925Email?.focus?.();
-      }
-    }
+    const formController = typeof createAccountPoolFormController === 'function'
+      ? createAccountPoolFormController({
+        formShell: dom.mail2925FormShell,
+        toggleButton: dom.btnToggleMail2925Form,
+        hiddenLabel: '添加账号',
+        visibleLabel: '取消添加',
+        onClear: () => {
+          stopEditingAccount({ clearForm: true });
+        },
+        onFocus: () => {
+          dom.inputMail2925Email?.focus?.();
+        },
+      })
+      : {
+        isVisible: () => false,
+        setVisible() {},
+        sync() {},
+      };

    function syncEditUi() {
      if (dom.btnAddMail2925Account) {
@@ -159,7 +149,7 @@
      editingAccountId = account.id;
      if (dom.inputMail2925Email) dom.inputMail2925Email.value = String(account.email || '').trim();
      if (dom.inputMail2925Password) dom.inputMail2925Password.value = String(account.password || '');
-      setMail2925FormVisible(true, { focusField: false });
+      formController.setVisible(true, { focusField: false });
      syncEditUi();
    }

@@ -262,7 +252,7 @@
        }

        applyMail2925AccountMutation(response.account);
-        setMail2925FormVisible(false, { clearForm: true });
+        formController.setVisible(false, { clearForm: true });
        helpers.showToast(
          updatingExisting
            ? `已更新 2925 账号 ${email}`
@@ -360,7 +350,7 @@
        mail2925Accounts: [],
        currentMail2925AccountId: null,
      });
-      setMail2925FormVisible(false, { clearForm: true });
+      formController.setVisible(false, { clearForm: true });
      refreshManagedAliasBaseEmail();
      renderMail2925Accounts();
      helpers.showToast(`已删除全部 ${response.deletedCount || 0} 个 2925 账号`, 'success', 2200);
@@ -488,7 +478,7 @@
          }
          state.syncLatestState(nextState);
          if (editingAccountId === accountId) {
-            setMail2925FormVisible(false, { clearForm: true });
+            formController.setVisible(false, { clearForm: true });
          }
          refreshManagedAliasBaseEmail();
          renderMail2925Accounts();
@@ -508,11 +498,11 @@
      });

      dom.btnToggleMail2925Form?.addEventListener('click', () => {
-        if (formVisible) {
-          setMail2925FormVisible(false, { clearForm: true });
+        if (formController.isVisible()) {
+          formController.setVisible(false, { clearForm: true });
          return;
        }
-        setMail2925FormVisible(true, { clearForm: !editingAccountId, focusField: true });
+        formController.setVisible(true, { clearForm: !editingAccountId, focusField: true });
      });

      dom.btnDeleteAllMail2925Accounts?.addEventListener('click', async () => {
@@ -532,7 +522,7 @@
      dom.btnImportMail2925Accounts?.addEventListener('click', handleImportMail2925Accounts);
      dom.mail2925AccountsList?.addEventListener('click', handleAccountListClick);
      syncEditUi();
-      syncMail2925FormUi();
+      formController.sync();
    }

    return {
@@ -1112,17 +1112,17 @@ header {
  visibility: hidden;
 }

-.mail2925-form-shell {
+.account-pool-form-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
 }

-.mail2925-actions-inline {
+.account-pool-actions-inline {
  width: 100%;
 }

-.mail2925-import-action {
+.account-pool-import-action {
  margin-left: auto;
 }

@@ -1148,7 +1148,7 @@ header {
 }

 .hotmail-list-shell.is-collapsed {
-  max-height: 236px;
+  max-height: 176px;
 }

 .hotmail-list-shell.is-expanded {
@@ -389,6 +389,7 @@
          <span class="section-label">Hotmail 账号池</span>
        </div>
        <div class="section-mini-actions">
+          <button id="btn-toggle-hotmail-form" class="btn btn-outline btn-xs" type="button" aria-expanded="false">添加账号</button>
          <button id="btn-hotmail-usage-guide" class="btn btn-ghost btn-xs" type="button">使用教程</button>
          <button id="btn-clear-used-hotmail-accounts" class="btn btn-ghost btn-xs" type="button">清空已用</button>
          <button id="btn-delete-all-hotmail-accounts" class="btn btn-ghost btn-xs" type="button">全部删除</button>
@@ -411,33 +412,37 @@
        <span class="data-label">本地助手</span>
        <input type="text" id="input-hotmail-local-base-url" class="data-input mono" placeholder="http://127.0.0.1:17373" />
      </div>
-      <div class="data-row">
-        <span class="data-label">邮箱</span>
-        <input type="text" id="input-hotmail-email" class="data-input" placeholder="name@hotmail.com" />
-      </div>
-      <div class="data-row">
-        <span class="data-label">客户端 ID</span>
-        <input type="text" id="input-hotmail-client-id" class="data-input mono" placeholder="微软应用客户端 ID" />
-      </div>
-      <div class="data-row">
-        <span class="data-label">邮箱密码</span>
-        <input type="password" id="input-hotmail-password" class="data-input" placeholder="可选，仅用于记录" />
-      </div>
-      <div class="data-row">
-        <span class="data-label">刷新令牌</span>
-        <input type="password" id="input-hotmail-refresh-token" class="data-input mono"
-          placeholder="必填，粘贴刷新令牌（refresh token）" />
-      </div>
-      <div class="data-row hotmail-actions-row">
-        <span class="data-label"></span>
-        <button id="btn-add-hotmail-account" class="btn btn-primary btn-sm" type="button">添加账号</button>
-      </div>
-      <div class="data-row hotmail-import-row">
-        <span class="data-label">批量导入</span>
-        <div class="hotmail-import-box">
-          <textarea id="input-hotmail-import" class="data-textarea mono"
-            placeholder="账号----密码----客户端ID----刷新令牌&#10;name@hotmail.com----password----client-id----refresh-token"></textarea>
-          <button id="btn-import-hotmail-accounts" class="btn btn-outline btn-sm" type="button">导入</button>
+      <div id="hotmail-form-shell" class="account-pool-form-shell" hidden>
+        <div class="data-row">
+          <span class="data-label">邮箱</span>
+          <input type="text" id="input-hotmail-email" class="data-input" placeholder="name@hotmail.com" />
+        </div>
+        <div class="data-row">
+          <span class="data-label">客户端 ID</span>
+          <input type="text" id="input-hotmail-client-id" class="data-input mono" placeholder="微软应用客户端 ID" />
+        </div>
+        <div class="data-row">
+          <span class="data-label">邮箱密码</span>
+          <input type="password" id="input-hotmail-password" class="data-input" placeholder="可选，仅用于记录" />
+        </div>
+        <div class="data-row">
+          <span class="data-label">刷新令牌</span>
+          <input type="password" id="input-hotmail-refresh-token" class="data-input mono"
+            placeholder="必填，粘贴刷新令牌（refresh token）" />
+        </div>
+        <div class="data-row hotmail-actions-row">
+          <span class="data-label"></span>
+          <div class="data-inline account-pool-actions-inline">
+            <button id="btn-add-hotmail-account" class="btn btn-primary btn-sm" type="button">添加账号</button>
+            <button id="btn-import-hotmail-accounts" class="btn btn-outline btn-sm account-pool-import-action" type="button">批量导入</button>
+          </div>
+        </div>
+        <div class="data-row hotmail-import-row">
+          <span class="data-label">批量导入</span>
+          <div class="hotmail-import-box">
+            <textarea id="input-hotmail-import" class="data-textarea mono"
+              placeholder="账号----密码----客户端ID----刷新令牌&#10;name@hotmail.com----password----client-id----refresh-token"></textarea>
+          </div>
        </div>
      </div>
      <div id="hotmail-list-shell" class="hotmail-list-shell is-collapsed">
@@ -455,7 +460,7 @@
          <button id="btn-toggle-mail2925-list" class="btn btn-ghost btn-xs" type="button" aria-expanded="false">展开列表</button>
        </div>
      </div>
-      <div id="mail2925-form-shell" class="mail2925-form-shell" hidden>
+      <div id="mail2925-form-shell" class="account-pool-form-shell" hidden>
        <div class="data-row">
          <span class="data-label">邮箱</span>
          <input type="text" id="input-mail2925-email" class="data-input" placeholder="name@2925.com" />
@@ -466,9 +471,9 @@
        </div>
        <div class="data-row hotmail-actions-row">
          <span class="data-label"></span>
-          <div class="data-inline mail2925-actions-inline">
+          <div class="data-inline account-pool-actions-inline">
            <button id="btn-add-mail2925-account" class="btn btn-primary btn-sm" type="button">添加账号</button>
-            <button id="btn-import-mail2925-accounts" class="btn btn-outline btn-sm mail2925-import-action" type="button">批量导入</button>
+            <button id="btn-import-mail2925-accounts" class="btn btn-outline btn-sm account-pool-import-action" type="button">批量导入</button>
          </div>
        </div>
        <div class="data-row hotmail-import-row">
@@ -722,6 +727,7 @@
  <script src="../data/step-definitions.js"></script>
  <script src="update-service.js"></script>
  <script src="contribution-content-update-service.js"></script>
+  <script src="account-pool-ui.js"></script>
  <script src="hotmail-manager.js"></script>
  <script src="mail-2925-manager.js"></script>
  <script src="icloud-manager.js"></script>
@@ -148,10 +148,12 @@ const inputHotmailRefreshToken = document.getElementById('input-hotmail-refresh-
 const inputHotmailImport = document.getElementById('input-hotmail-import');
 const btnAddHotmailAccount = document.getElementById('btn-add-hotmail-account');
 const btnImportHotmailAccounts = document.getElementById('btn-import-hotmail-accounts');
+const btnToggleHotmailForm = document.getElementById('btn-toggle-hotmail-form');
 const btnHotmailUsageGuide = document.getElementById('btn-hotmail-usage-guide');
 const btnClearUsedHotmailAccounts = document.getElementById('btn-clear-used-hotmail-accounts');
 const btnDeleteAllHotmailAccounts = document.getElementById('btn-delete-all-hotmail-accounts');
 const btnToggleHotmailList = document.getElementById('btn-toggle-hotmail-list');
+const hotmailFormShell = document.getElementById('hotmail-form-shell');
 const hotmailListShell = document.getElementById('hotmail-list-shell');
 const hotmailAccountsList = document.getElementById('hotmail-accounts-list');
 const inputMail2925Email = document.getElementById('input-mail2925-email');
@@ -3086,7 +3088,9 @@ const hotmailManager = window.SidepanelHotmailManager?.createHotmailManager({
    btnDeleteAllHotmailAccounts,
    btnHotmailUsageGuide,
    btnImportHotmailAccounts,
+    btnToggleHotmailForm,
    btnToggleHotmailList,
+    hotmailFormShell,
    hotmailAccountsList,
    hotmailListShell,
    inputEmail,