feat: 优化2925账号池表单，修复步骤7无法识别重试页面bug

2026-04-21 16:39:37 +08:00
parent 5c75d2e3aa
commit 9228c7080e
11 changed files with 532 additions and 51 deletions
@@ -16,6 +16,7 @@
    let actionInFlight = false;
    let listExpanded = false;
    let editingAccountId = '';
+    let formVisible = false;

    function getMail2925Accounts(currentState = state.getLatestState()) {
      return helpers.getMail2925Accounts(currentState);
@@ -118,13 +119,39 @@
      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?.();
+      }
+    }
+
    function syncEditUi() {
      if (dom.btnAddMail2925Account) {
        dom.btnAddMail2925Account.textContent = editingAccountId ? '保存修改' : '添加账号';
      }
-      if (dom.btnCancelMail2925Edit) {
-        dom.btnCancelMail2925Edit.style.display = editingAccountId ? '' : 'none';
-      }
    }

    function startEditingAccount(account) {
@@ -132,6 +159,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 });
      syncEditUi();
    }

@@ -234,7 +262,7 @@
        }

        applyMail2925AccountMutation(response.account);
-        stopEditingAccount();
+        setMail2925FormVisible(false, { clearForm: true });
        helpers.showToast(
          updatingExisting
            ? `已更新 2925 账号 ${email}`
@@ -332,7 +360,7 @@
        mail2925Accounts: [],
        currentMail2925AccountId: null,
      });
-      stopEditingAccount();
+      setMail2925FormVisible(false, { clearForm: true });
      refreshManagedAliasBaseEmail();
      renderMail2925Accounts();
      helpers.showToast(`已删除全部 ${response.deletedCount || 0} 个 2925 账号`, 'success', 2200);
@@ -460,7 +488,7 @@
          }
          state.syncLatestState(nextState);
          if (editingAccountId === accountId) {
-            stopEditingAccount();
+            setMail2925FormVisible(false, { clearForm: true });
          }
          refreshManagedAliasBaseEmail();
          renderMail2925Accounts();
@@ -479,6 +507,14 @@
        setMail2925ListExpanded(!listExpanded);
      });

+      dom.btnToggleMail2925Form?.addEventListener('click', () => {
+        if (formVisible) {
+          setMail2925FormVisible(false, { clearForm: true });
+          return;
+        }
+        setMail2925FormVisible(true, { clearForm: !editingAccountId, focusField: true });
+      });
+
      dom.btnDeleteAllMail2925Accounts?.addEventListener('click', async () => {
        if (actionInFlight) return;
        actionInFlight = true;
@@ -493,12 +529,10 @@
      });

      dom.btnAddMail2925Account?.addEventListener('click', handleAddMail2925Account);
-      dom.btnCancelMail2925Edit?.addEventListener('click', () => {
-        stopEditingAccount();
-      });
      dom.btnImportMail2925Accounts?.addEventListener('click', handleImportMail2925Accounts);
      dom.mail2925AccountsList?.addEventListener('click', handleAccountListClick);
      syncEditUi();
+      syncMail2925FormUi();
    }

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

+.mail2925-form-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mail2925-actions-inline {
+  width: 100%;
+}
+
+.mail2925-import-action {
+  margin-left: auto;
+}
+
 .hotmail-import-row {
  align-items: flex-start;
 }
@@ -450,31 +450,33 @@
          <span class="section-label">2925 账号池</span>
        </div>
        <div class="section-mini-actions">
+          <button id="btn-toggle-mail2925-form" class="btn btn-outline btn-xs" type="button" aria-expanded="false">添加账号</button>
          <button id="btn-delete-all-mail2925-accounts" class="btn btn-ghost btn-xs" type="button">全部删除</button>
          <button id="btn-toggle-mail2925-list" class="btn btn-ghost btn-xs" type="button" aria-expanded="false">展开列表</button>
        </div>
      </div>
-      <div class="data-row">
-        <span class="data-label">邮箱</span>
-        <input type="text" id="input-mail2925-email" class="data-input" placeholder="name@2925.com" />
-      </div>
-      <div class="data-row">
-        <span class="data-label">密码</span>
-        <input type="password" id="input-mail2925-password" class="data-input" placeholder="2925 登录密码" />
-      </div>
-      <div class="data-row hotmail-actions-row">
-        <span class="data-label"></span>
-        <div class="data-inline">
-          <button id="btn-add-mail2925-account" class="btn btn-primary btn-sm" type="button">添加账号</button>
-          <button id="btn-cancel-mail2925-edit" class="btn btn-outline btn-sm" type="button" style="display:none;">取消编辑</button>
+      <div id="mail2925-form-shell" class="mail2925-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" />
        </div>
-      </div>
-      <div class="data-row hotmail-import-row">
-        <span class="data-label">批量导入</span>
-        <div class="hotmail-import-box">
-          <textarea id="input-mail2925-import" class="data-textarea mono"
-            placeholder="邮箱----密码&#10;name@2925.com----password"></textarea>
-          <button id="btn-import-mail2925-accounts" class="btn btn-outline btn-sm" type="button">导入</button>
+        <div class="data-row">
+          <span class="data-label">密码</span>
+          <input type="password" id="input-mail2925-password" class="data-input" placeholder="2925 登录密码" />
+        </div>
+        <div class="data-row hotmail-actions-row">
+          <span class="data-label"></span>
+          <div class="data-inline mail2925-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>
+          </div>
+        </div>
+        <div class="data-row hotmail-import-row">
+          <span class="data-label">批量导入</span>
+          <div class="hotmail-import-box">
+            <textarea id="input-mail2925-import" class="data-textarea mono"
+              placeholder="邮箱----密码&#10;name@2925.com----password"></textarea>
+          </div>
        </div>
      </div>
      <div id="mail2925-list-shell" class="hotmail-list-shell is-collapsed">
@@ -158,10 +158,11 @@ const inputMail2925Email = document.getElementById('input-mail2925-email');
 const inputMail2925Password = document.getElementById('input-mail2925-password');
 const inputMail2925Import = document.getElementById('input-mail2925-import');
 const btnAddMail2925Account = document.getElementById('btn-add-mail2925-account');
-const btnCancelMail2925Edit = document.getElementById('btn-cancel-mail2925-edit');
+const btnToggleMail2925Form = document.getElementById('btn-toggle-mail2925-form');
 const btnImportMail2925Accounts = document.getElementById('btn-import-mail2925-accounts');
 const btnDeleteAllMail2925Accounts = document.getElementById('btn-delete-all-mail2925-accounts');
 const btnToggleMail2925List = document.getElementById('btn-toggle-mail2925-list');
+const mail2925FormShell = document.getElementById('mail2925-form-shell');
 const mail2925ListShell = document.getElementById('mail2925-list-shell');
 const mail2925AccountsList = document.getElementById('mail2925-accounts-list');
 const inputLuckmailApiKey = document.getElementById('input-luckmail-api-key');
@@ -3136,14 +3137,15 @@ const mail2925Manager = window.SidepanelMail2925Manager?.createMail2925Manager({
  },
  dom: {
    btnAddMail2925Account,
-    btnCancelMail2925Edit,
    btnDeleteAllMail2925Accounts,
    btnImportMail2925Accounts,
+    btnToggleMail2925Form,
    btnToggleMail2925List,
    inputMail2925Email,
    inputMail2925Import,
    inputMail2925Password,
    mail2925AccountsList,
+    mail2925FormShell,
    mail2925ListShell,
  },
  helpers: {