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

sidepanel/sidepanel.html

@@ -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>