feat: 添加邮箱服务登录按钮并更新状态管理

sidepanel/sidepanel.html

@@ -129,13 +129,16 @@
       </div>
       <div class="data-row">
         <span class="data-label">邮箱服务</span>
-        <select id="select-mail-provider" class="data-select">
-          <option value="hotmail-api">Hotmail（微软 Graph）</option>
-          <option value="163">163 邮箱 (mail.163.com)</option>
-          <option value="163-vip">163 VIP 邮箱 (webmail.vip.163.com)</option>
-          <option value="qq">QQ 邮箱 (wx.mail.qq.com)</option>
-          <option value="inbucket">Inbucket（自定义主机）</option>
-        </select>
+        <div class="data-inline">
+          <select id="select-mail-provider" class="data-select">
+            <option value="hotmail-api">Hotmail（微软 Graph）</option>
+            <option value="163">163 邮箱 (mail.163.com)</option>
+            <option value="163-vip">163 VIP 邮箱 (webmail.vip.163.com)</option>
+            <option value="qq">QQ 邮箱 (wx.mail.qq.com)</option>
+            <option value="inbucket">Inbucket（自定义主机）</option>
+          </select>
+          <button id="btn-mail-login" class="btn btn-outline btn-sm" type="button" disabled>登录</button>
+        </div>
       </div>
       <div class="data-row" id="row-email-generator">
         <span class="data-label">邮箱生成</span>

sidepanel/sidepanel.js

@@ -57,6 +57,7 @@ const inputSub2ApiPassword = document.getElementById('input-sub2api-password');
 const rowSub2ApiGroup = document.getElementById('row-sub2api-group');
 const inputSub2ApiGroup = document.getElementById('input-sub2api-group');
 const selectMailProvider = document.getElementById('select-mail-provider');
+const btnMailLogin = document.getElementById('btn-mail-login');
 const rowEmailGenerator = document.getElementById('row-email-generator');
 const selectEmailGenerator = document.getElementById('select-email-generator');
 const hotmailSection = document.getElementById('hotmail-section');
@@ -140,6 +141,20 @@ const filterHotmailAccountsByUsage = window.HotmailUtils?.filterHotmailAccountsB
 const getHotmailBulkActionLabel = window.HotmailUtils?.getHotmailBulkActionLabel;
 const getHotmailListToggleLabel = window.HotmailUtils?.getHotmailListToggleLabel;
 const HOTMAIL_LIST_EXPANDED_STORAGE_KEY = 'multipage-hotmail-list-expanded';
+const MAIL_PROVIDER_LOGIN_CONFIGS = {
+  '163': {
+    label: '163 邮箱',
+    url: 'https://mail.163.com/',
+  },
+  '163-vip': {
+    label: '163 VIP 邮箱',
+    url: 'https://webmail.vip.163.com/',
+  },
+  qq: {
+    label: 'QQ 邮箱',
+    url: 'https://wx.mail.qq.com/',
+  },
+};
 
 // ============================================================
 // Toast Notifications
@@ -926,6 +941,10 @@ function getCurrentHotmailEmail(state = latestState) {
   return String(getCurrentHotmailAccount(state)?.email || '').trim();
 }
 
+function getMailProviderLoginConfig(provider = selectMailProvider.value) {
+  return MAIL_PROVIDER_LOGIN_CONFIGS[String(provider || '').trim()] || null;
+}
+
 function isCurrentEmailManagedByHotmail(state = latestState) {
   const hotmailEmail = getCurrentHotmailEmail(state);
   if (!hotmailEmail) {
@@ -937,6 +956,16 @@ function isCurrentEmailManagedByHotmail(state = latestState) {
   return inputEmailValue === hotmailEmail || stateEmailValue === hotmailEmail;
 }
 
+function updateMailLoginButtonState() {
+  if (!btnMailLogin) {
+    return;
+  }
+
+  const config = getMailProviderLoginConfig();
+  btnMailLogin.disabled = !config;
+  btnMailLogin.title = config ? `打开 ${config.label} 登录页` : '当前邮箱服务无需网页登录';
+}
+
 function getHotmailAccountsByUsage(mode = 'all', state = latestState) {
   const accounts = getHotmailAccounts(state);
   if (typeof filterHotmailAccountsByUsage === 'function') {
@@ -1145,6 +1174,7 @@ function updateMailProviderUI() {
   const useInbucket = selectMailProvider.value === 'inbucket';
   const useHotmail = selectMailProvider.value === 'hotmail-api';
   const useEmailGenerator = !useHotmail;
+  updateMailLoginButtonState();
   rowInbucketHost.style.display = useInbucket ? '' : 'none';
   rowInbucketMailbox.style.display = useInbucket ? '' : 'none';
   const useCloudflare = selectEmailGenerator.value === 'cloudflare';
@@ -1975,6 +2005,19 @@ btnToggleVpsPassword.addEventListener('click', () => {
   syncVpsPasswordToggleLabel();
 });
 
+btnMailLogin?.addEventListener('click', async () => {
+  const config = getMailProviderLoginConfig();
+  if (!config) {
+    return;
+  }
+
+  try {
+    await chrome.tabs.create({ url: config.url, active: true });
+  } catch (err) {
+    showToast(`打开${config.label}失败：${err.message}`, 'error');
+  }
+});
+
 localCpaStep9ModeButtons.forEach((button) => {
   button.addEventListener('click', () => {
     const nextMode = button.dataset.localCpaStep9Mode;