feat(cloudflare): 添加 Cloudflare 临时邮箱部分的展开/收起功能及持久化状态支持

2026-04-28 23:47:50 +08:00
parent 854d726cce
commit 8af9b2b16e
4 changed files with 135 additions and 47 deletions
@@ -812,6 +812,10 @@ header {
  white-space: nowrap;
 }

+#btn-toggle-cloudflare-temp-email-section {
+  white-space: nowrap;
+}
+
 .ip-proxy-fold {
  width: 100%;
  border: none;
@@ -595,60 +595,64 @@
          <span class="data-value">用于生成邮箱或接收转发邮件</span>
        </div>
        <div class="section-mini-actions">
+          <button id="btn-toggle-cloudflare-temp-email-section" class="btn btn-ghost btn-xs" type="button"
+            aria-expanded="false" aria-controls="cloudflare-temp-email-section-body">展开设置</button>
          <button id="btn-cloudflare-temp-email-usage-guide" class="btn btn-ghost btn-xs" type="button">使用教程</button>
          <button id="btn-cloudflare-temp-email-github" class="btn btn-ghost btn-xs" type="button">GitHub</button>
        </div>
      </div>
-      <div class="data-row" id="row-temp-email-base-url" style="display:none;">
-        <span class="data-label">Temp API</span>
-        <input type="text" id="input-temp-email-base-url" class="data-input" placeholder="https://your-worker-domain" />
-      </div>
-      <div class="data-row" id="row-temp-email-admin-auth" style="display:none;">
-        <span class="data-label">Admin Auth</span>
-        <div class="input-with-icon">
-          <input type="password" id="input-temp-email-admin-auth" class="data-input data-input-with-icon"
-            placeholder="Cloudflare Temp Email admin password" />
-          <button id="btn-toggle-temp-email-admin-auth" class="input-icon-btn" type="button"
-            data-password-toggle="input-temp-email-admin-auth" data-show-label="显示 Admin Auth"
-            data-hide-label="隐藏 Admin Auth" aria-label="显示 Admin Auth" title="显示 Admin Auth"></button>
+      <div id="cloudflare-temp-email-section-body" class="section-collapse-body" hidden>
+        <div class="data-row" id="row-temp-email-base-url" style="display:none;">
+          <span class="data-label">Temp API</span>
+          <input type="text" id="input-temp-email-base-url" class="data-input" placeholder="https://your-worker-domain" />
        </div>
-      </div>
-      <div class="data-row" id="row-temp-email-custom-auth" style="display:none;">
-        <span class="data-label">Custom Auth</span>
-        <div class="input-with-icon">
-          <input type="password" id="input-temp-email-custom-auth" class="data-input data-input-with-icon"
-            placeholder="仅当站点启用了访问密码时再填写；这是额外鉴权，不替代 Admin Auth。" />
-          <button id="btn-toggle-temp-email-custom-auth" class="input-icon-btn" type="button"
-            data-password-toggle="input-temp-email-custom-auth" data-show-label="显示 Custom Auth"
-            data-hide-label="隐藏 Custom Auth" aria-label="显示 Custom Auth" title="显示 Custom Auth"></button>
+        <div class="data-row" id="row-temp-email-admin-auth" style="display:none;">
+          <span class="data-label">Admin Auth</span>
+          <div class="input-with-icon">
+            <input type="password" id="input-temp-email-admin-auth" class="data-input data-input-with-icon"
+              placeholder="Cloudflare Temp Email admin password" />
+            <button id="btn-toggle-temp-email-admin-auth" class="input-icon-btn" type="button"
+              data-password-toggle="input-temp-email-admin-auth" data-show-label="显示 Admin Auth"
+              data-hide-label="隐藏 Admin Auth" aria-label="显示 Admin Auth" title="显示 Admin Auth"></button>
+          </div>
        </div>
-      </div>
-      <div class="data-row" id="row-temp-email-receive-mailbox" style="display:none;">
-        <span class="data-label">邮件接收</span>
-        <input type="text" id="input-temp-email-receive-mailbox" class="data-input"
-          placeholder="用于接收转发邮件的邮箱，例如 1@email.example.com" />
-      </div>
-      <div class="data-row" id="row-temp-email-random-subdomain-toggle" style="display:none;">
-        <span class="data-label">随机子域</span>
-        <div class="data-inline">
-          <label class="toggle-switch" for="input-temp-email-use-random-subdomain"
-            title="依赖后端 RANDOM_SUBDOMAIN_DOMAINS 配置">
-            <input type="checkbox" id="input-temp-email-use-random-subdomain" />
-            <span class="toggle-switch-track" aria-hidden="true">
-              <span class="toggle-switch-thumb"></span>
-            </span>
-            <span>启用</span>
-          </label>
-          <span class="setting-caption">依赖后端 RANDOM_SUBDOMAIN_DOMAINS</span>
+        <div class="data-row" id="row-temp-email-custom-auth" style="display:none;">
+          <span class="data-label">Custom Auth</span>
+          <div class="input-with-icon">
+            <input type="password" id="input-temp-email-custom-auth" class="data-input data-input-with-icon"
+              placeholder="仅当站点启用了访问密码时再填写；这是额外鉴权，不替代 Admin Auth。" />
+            <button id="btn-toggle-temp-email-custom-auth" class="input-icon-btn" type="button"
+              data-password-toggle="input-temp-email-custom-auth" data-show-label="显示 Custom Auth"
+              data-hide-label="隐藏 Custom Auth" aria-label="显示 Custom Auth" title="显示 Custom Auth"></button>
+          </div>
        </div>
-      </div>
-      <div class="data-row" id="row-temp-email-domain" style="display:none;">
-        <span class="data-label">Temp 域名</span>
-        <div class="data-inline">
-          <select id="select-temp-email-domain" class="data-select"></select>
-          <input type="text" id="input-temp-email-domain" class="data-input" placeholder="例如 mail.example.com"
-            style="display:none;" />
-          <button id="btn-temp-email-domain-mode" class="btn btn-outline btn-sm" type="button">添加</button>
+        <div class="data-row" id="row-temp-email-receive-mailbox" style="display:none;">
+          <span class="data-label">邮件接收</span>
+          <input type="text" id="input-temp-email-receive-mailbox" class="data-input"
+            placeholder="用于接收转发邮件的邮箱，例如 1@email.example.com" />
+        </div>
+        <div class="data-row" id="row-temp-email-random-subdomain-toggle" style="display:none;">
+          <span class="data-label">随机子域</span>
+          <div class="data-inline">
+            <label class="toggle-switch" for="input-temp-email-use-random-subdomain"
+              title="依赖后端 RANDOM_SUBDOMAIN_DOMAINS 配置">
+              <input type="checkbox" id="input-temp-email-use-random-subdomain" />
+              <span class="toggle-switch-track" aria-hidden="true">
+                <span class="toggle-switch-thumb"></span>
+              </span>
+              <span>启用</span>
+            </label>
+            <span class="setting-caption">依赖后端 RANDOM_SUBDOMAIN_DOMAINS</span>
+          </div>
+        </div>
+        <div class="data-row" id="row-temp-email-domain" style="display:none;">
+          <span class="data-label">Temp 域名</span>
+          <div class="data-inline">
+            <select id="select-temp-email-domain" class="data-select"></select>
+            <input type="text" id="input-temp-email-domain" class="data-input" placeholder="例如 mail.example.com"
+              style="display:none;" />
+            <button id="btn-temp-email-domain-mode" class="btn btn-outline btn-sm" type="button">添加</button>
+          </div>
        </div>
      </div>
    </div>
@@ -187,6 +187,8 @@ const selectTempEmailDomain = document.getElementById('select-temp-email-domain'
 const inputTempEmailDomain = document.getElementById('input-temp-email-domain');
 const btnTempEmailDomainMode = document.getElementById('btn-temp-email-domain-mode');
 const cloudflareTempEmailSection = document.getElementById('cloudflare-temp-email-section');
+const btnToggleCloudflareTempEmailSection = document.getElementById('btn-toggle-cloudflare-temp-email-section');
+const cloudflareTempEmailSectionBody = document.getElementById('cloudflare-temp-email-section-body');
 const btnCloudflareTempEmailUsageGuide = document.getElementById('btn-cloudflare-temp-email-usage-guide');
 const btnCloudflareTempEmailGithub = document.getElementById('btn-cloudflare-temp-email-github');
 const hotmailSection = document.getElementById('hotmail-section');
@@ -372,6 +374,7 @@ const AUTO_RUN_PLUS_RISK_WARNING_MAX_SAFE_RUNS = 3;
 const PLUS_CONTRIBUTION_PROMPT_THRESHOLD = 5;
 const PLUS_CONTRIBUTION_ACCOUNT_CREDIT = 5;
 const PLUS_CONTRIBUTION_DONATION_CREDIT = 20;
+const CLOUDFLARE_TEMP_EMAIL_SECTION_EXPANDED_STORAGE_KEY = 'multipage-cloudflare-temp-email-section-expanded';
 const HOTMAIL_SERVICE_MODE_REMOTE = 'remote';
 const HOTMAIL_SERVICE_MODE_LOCAL = 'local';
 const HOTMAIL_SECTION_EXPANDED_STORAGE_KEY = 'multipage-hotmail-section-expanded';
@@ -652,6 +655,7 @@ let settingsAutoSaveTimer = null;
 let settingsSaveRevision = 0;
 let cloudflareDomainEditMode = false;
 let cloudflareTempEmailDomainEditMode = false;
+let cloudflareTempEmailSectionExpanded = false;
 let hotmailSectionExpanded = false;
 let modalChoiceResolver = null;
 let currentModalActions = [];
@@ -2490,6 +2494,61 @@ function setHotmailServiceMode(mode) {
  });
 }

+function readCloudflareTempEmailSectionExpanded() {
+  try {
+    return localStorage.getItem(CLOUDFLARE_TEMP_EMAIL_SECTION_EXPANDED_STORAGE_KEY) === '1';
+  } catch (err) {
+    return false;
+  }
+}
+
+function persistCloudflareTempEmailSectionExpanded(expanded) {
+  try {
+    if (expanded) {
+      localStorage.setItem(CLOUDFLARE_TEMP_EMAIL_SECTION_EXPANDED_STORAGE_KEY, '1');
+    } else {
+      localStorage.removeItem(CLOUDFLARE_TEMP_EMAIL_SECTION_EXPANDED_STORAGE_KEY);
+    }
+  } catch (err) {
+    // Keep the current session state even if storage is unavailable.
+  }
+}
+
+function isCloudflareTempEmailSectionVisible() {
+  return Boolean(cloudflareTempEmailSection && cloudflareTempEmailSection.style.display !== 'none');
+}
+
+function updateCloudflareTempEmailSectionExpandedUI() {
+  const expanded = isCloudflareTempEmailSectionVisible() && cloudflareTempEmailSectionExpanded;
+  if (cloudflareTempEmailSectionBody) {
+    cloudflareTempEmailSectionBody.hidden = !expanded;
+  }
+  if (btnToggleCloudflareTempEmailSection) {
+    btnToggleCloudflareTempEmailSection.textContent = expanded ? '收起设置' : '展开设置';
+    btnToggleCloudflareTempEmailSection.title = expanded
+      ? '收起 Cloudflare Temp Email 设置'
+      : '展开 Cloudflare Temp Email 设置';
+    btnToggleCloudflareTempEmailSection.setAttribute('aria-expanded', String(expanded));
+  }
+}
+
+function setCloudflareTempEmailSectionExpanded(expanded, options = {}) {
+  const { persist = true } = options;
+  cloudflareTempEmailSectionExpanded = Boolean(expanded);
+  updateCloudflareTempEmailSectionExpandedUI();
+  if (persist) {
+    persistCloudflareTempEmailSectionExpanded(cloudflareTempEmailSectionExpanded);
+  }
+}
+
+function toggleCloudflareTempEmailSectionExpanded() {
+  setCloudflareTempEmailSectionExpanded(!cloudflareTempEmailSectionExpanded);
+}
+
+function initCloudflareTempEmailSectionExpandedState() {
+  setCloudflareTempEmailSectionExpanded(readCloudflareTempEmailSectionExpanded(), { persist: false });
+}
+
 function readHotmailSectionExpanded() {
  try {
    return localStorage.getItem(HOTMAIL_SECTION_EXPANDED_STORAGE_KEY) === '1';
@@ -4031,6 +4090,9 @@ function updateMailProviderUI() {
  if (cloudflareTempEmailSection) {
    cloudflareTempEmailSection.style.display = showCloudflareTempEmailSettings ? '' : 'none';
  }
+  if (typeof updateCloudflareTempEmailSectionExpandedUI === 'function') {
+    updateCloudflareTempEmailSectionExpandedUI();
+  }
  if (icloudSection) {
    const showIcloudSection = (useEmailGenerator && useIcloud) || useIcloudProvider;
    icloudSection.style.display = showIcloudSection ? '' : 'none';
@@ -5274,6 +5336,10 @@ btnToggleIpProxySection?.addEventListener('click', () => {
  }
 });

+btnToggleCloudflareTempEmailSection?.addEventListener('click', () => {
+  toggleCloudflareTempEmailSectionExpanded();
+});
+
 btnToggleHotmailSection?.addEventListener('click', () => {
  toggleHotmailSectionExpanded();
 });
@@ -7109,6 +7175,7 @@ bindPasswordVisibilityToggles();
 initTheme();
 initHotmailListExpandedState();
 initMail2925ListExpandedState();
+initCloudflareTempEmailSectionExpandedState();
 initHotmailSectionExpandedState();
 if (typeof initIpProxySectionExpandedState === 'function') {
  initIpProxySectionExpandedState();
@@ -61,6 +61,9 @@ function createRow(initialDisplay = 'none') {
 test('sidepanel html places cloudflare temp email controls in a standalone section', () => {
  const html = fs.readFileSync('sidepanel/sidepanel.html', 'utf8');
  assert.match(html, /id="cloudflare-temp-email-section"/);
+  assert.match(html, /id="btn-toggle-cloudflare-temp-email-section"/);
+  assert.match(html, /aria-controls="cloudflare-temp-email-section-body"/);
+  assert.match(html, /id="cloudflare-temp-email-section-body" class="section-collapse-body" hidden/);
  assert.match(html, /id="btn-cloudflare-temp-email-usage-guide"/);
  assert.match(html, /id="btn-cloudflare-temp-email-github"/);
  assert.match(html, /id="row-temp-email-random-subdomain-toggle"/);
@@ -68,6 +71,16 @@ test('sidepanel html places cloudflare temp email controls in a standalone secti
  assert.doesNotMatch(html, /id="row-temp-email-random-subdomain-domain"/);
 });

+test('sidepanel persists cloudflare temp email section collapse state', () => {
+  assert.match(source, /CLOUDFLARE_TEMP_EMAIL_SECTION_EXPANDED_STORAGE_KEY = 'multipage-cloudflare-temp-email-section-expanded'/);
+  assert.match(source, /let cloudflareTempEmailSectionExpanded = false/);
+  assert.match(source, /function updateCloudflareTempEmailSectionExpandedUI\(\)/);
+  assert.match(source, /cloudflareTempEmailSectionBody\.hidden = !expanded/);
+  assert.match(source, /btnToggleCloudflareTempEmailSection\.setAttribute\('aria-expanded', String\(expanded\)\)/);
+  assert.match(source, /btnToggleCloudflareTempEmailSection\?\.addEventListener\('click', \(\) => \{\s*toggleCloudflareTempEmailSectionExpanded\(\)/);
+  assert.match(source, /initCloudflareTempEmailSectionExpandedState\(\)/);
+});
+
 test('sidepanel modal message preserves line breaks and supports inline links', () => {
  const css = fs.readFileSync('sidepanel/sidepanel.css', 'utf8');
  assert.match(css, /\.modal-message\s*\{[\s\S]*white-space:\s*pre-line;/);