feat: 忘记密码升级为智能分流向导并部署IP/账号双层防扫防轰炸限流保护

resources/js/password-forgot.js

@@ -1,6 +1,7 @@
-// 邮箱找回密码页交互入口，负责 AJAX 发送重置链接和页面提示。
+// 忘记密码页面交互逻辑：智能账号检测与分流引导
 
 let passwordForgotControlsBound = false;
+let currentUsername = "";
 
 /**
  * 读取 CSRF 令牌，供找回密码请求使用。
@@ -30,33 +31,73 @@ function showAlert(message, type) {
 }
 
 /**
- * 提交邮箱找回密码请求。
+ * 隐藏找回密码页面提示。
+ *
+ * @returns {void}
+ */
+function hideAlert() {
+    const alertBox = document.getElementById("alert-box");
+    if (alertBox) {
+        alertBox.style.display = "none";
+    }
+}
+
+/**
+ * 绑定双绑定状态下的选项卡切换事件。
+ *
+ * @returns {void}
+ */
+function bindTabEvents() {
+    const tabsContainer = document.getElementById("channel-tabs");
+    if (!tabsContainer) {
+        return;
+    }
+
+    tabsContainer.addEventListener("click", (event) => {
+        const btn = event.target.closest(".tab-btn");
+        if (!btn) {
+            return;
+        }
+
+        // 清除所有高亮
+        tabsContainer.querySelectorAll(".tab-btn").forEach((b) => b.classList.remove("active"));
+        btn.classList.add("active");
+
+        // 切换显示面板
+        const targetId = btn.getAttribute("data-target");
+        document.querySelectorAll(".channel-pane").forEach((pane) => {
+            if (pane.id === targetId) {
+                pane.style.display = "block";
+            } else {
+                pane.style.display = "none";
+            }
+        });
+    });
+}
+
+/**
+ * 第一步：提交昵称检测账号绑定状态。
  *
  * @param {SubmitEvent} event
  * @returns {Promise<void>}
  */
-async function submitPasswordRecovery(event) {
+async function submitAccountDetect(event) {
     event.preventDefault();
-
     const form = event.target;
-    const submitButton = document.getElementById("submit-btn");
-    const alertBox = document.getElementById("alert-box");
+    const detectBtn = document.getElementById("detect-btn");
     if (!(form instanceof HTMLFormElement)) {
         return;
     }
 
-    if (submitButton instanceof HTMLButtonElement) {
-        submitButton.disabled = true;
-        submitButton.innerText = "发送中...";
-    }
-    if (alertBox) {
-        alertBox.style.display = "none";
+    if (detectBtn instanceof HTMLButtonElement) {
+        detectBtn.disabled = true;
+        detectBtn.innerText = "账号检索中...";
     }
+    hideAlert();
 
     try {
-        const response = await fetch(form.getAttribute("data-password-email-url") ?? form.action, {
+        const response = await fetch(form.action, {
             method: "POST",
-            credentials: "same-origin",
             headers: {
                 "Content-Type": "application/json",
                 "X-CSRF-TOKEN": getCsrfToken(),
@@ -66,16 +107,121 @@ async function submitPasswordRecovery(event) {
         });
         const body = await response.json();
 
-        if (response.status === 200 && body.status === "success") {
-            showAlert(body.message, "success");
-            form.reset();
+        if (response.status === 429) {
+            showAlert(body.message || "请求过于频繁，请稍后再试。", "error");
             return;
         }
 
-        const errorMessage = body.message || (body.errors ? Object.values(body.errors)[0][0] : "邮件发送失败，请稍后重试。");
+        if (body.status === "not_found") {
+            showAlert(body.message, "error");
+            return;
+        }
+
+        if (body.status === "success") {
+            currentUsername = body.username;
+            document.getElementById("step-detect").style.display = "none";
+            document.getElementById("step-result").style.display = "block";
+            document.getElementById("recovery-title").innerText = "密码找回建议";
+            document.getElementById("forgot-footer").style.display = "none";
+
+            const summary = document.getElementById("detect-summary");
+            const tabs = document.getElementById("channel-tabs");
+            const panelWechat = document.getElementById("panel-wechat");
+            const panelEmail = document.getElementById("panel-email");
+            const panelNone = document.getElementById("panel-none");
+
+            // 默认隐藏所有特定面板
+            tabs.style.display = "none";
+            panelWechat.style.display = "none";
+            panelEmail.style.display = "none";
+            panelNone.style.display = "none";
+
+            const hasEmail = body.has_email;
+            const hasWechat = body.has_wechat;
+
+            if (hasEmail && hasWechat) {
+                summary.innerHTML = `检测到账号 <strong style="color:var(--gold);">${currentUsername}</strong> 已同时绑定了微信和邮箱。您可以选择以下任意一种方式找回密码：`;
+                tabs.style.display = "grid";
+                // 默认选中微信面板
+                tabs.querySelectorAll(".tab-btn").forEach((b) => b.classList.remove("active"));
+                const wechatTabBtn = tabs.querySelector('[data-target="panel-wechat"]');
+                if (wechatTabBtn) {
+                    wechatTabBtn.classList.add("active");
+                }
+                panelWechat.style.display = "block";
+            } else if (hasWechat) {
+                summary.innerHTML = `检测到账号 <strong style="color:var(--gold);">${currentUsername}</strong> 仅绑定了微信。系统不支持邮箱找回，建议您使用微信助手进行重置：`;
+                panelWechat.style.display = "block";
+            } else if (hasEmail) {
+                summary.innerHTML = `检测到账号 <strong style="color:var(--gold);">${currentUsername}</strong> 仅绑定了邮箱。建议您使用邮箱发送重置链接找回：`;
+                panelEmail.style.display = "block";
+                const emailInput = document.getElementById("email");
+                if (emailInput instanceof HTMLInputElement) {
+                    emailInput.value = body.masked_email;
+                }
+            } else {
+                summary.innerHTML = `检测到账号 <strong style="color:var(--gold);">${currentUsername}</strong> 尚未绑定微信或邮箱找回途径：`;
+                panelNone.style.display = "block";
+            }
+        }
+    } catch {
+        showAlert("网络或服务器连接异常，请稍后再试。", "error");
+    } finally {
+        if (detectBtn instanceof HTMLButtonElement) {
+            detectBtn.disabled = false;
+            detectBtn.innerText = "下一步 (检测账号)";
+        }
+    }
+}
+
+/**
+ * 第二步：提交发送重置链接邮件请求。
+ *
+ * @param {SubmitEvent} event
+ * @returns {Promise<void>}
+ */
+async function submitPasswordRecovery(event) {
+    event.preventDefault();
+    const form = event.target;
+    const submitButton = document.getElementById("submit-btn");
+    if (!(form instanceof HTMLFormElement)) {
+        return;
+    }
+
+    if (submitButton instanceof HTMLButtonElement) {
+        submitButton.disabled = true;
+        submitButton.innerText = "发送重置链接中...";
+    }
+    hideAlert();
+
+    try {
+        const response = await fetch(form.getAttribute("data-password-email-url") ?? "", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "X-CSRF-TOKEN": getCsrfToken(),
+                Accept: "application/json",
+            },
+            body: JSON.stringify({
+                username: currentUsername,
+            }),
+        });
+        const body = await response.json();
+
+        if (response.status === 429) {
+            showAlert(body.message || "请求发送过于频繁，请稍后再试。", "error");
+            return;
+        }
+
+        if (body.status === "success") {
+            showAlert(body.message, "success");
+            return;
+        }
+
+        const errorMessage = body.message || (body.errors ? Object.values(body.errors)[0][0] : "重置邮件发送失败，请稍后重试。");
         showAlert(errorMessage, "error");
     } catch {
-        showAlert("网络或服务器异常，请稍后再试。", "error");
+        showAlert("网络发送异常，请稍后再试。", "error");
     } finally {
         if (submitButton instanceof HTMLButtonElement) {
             submitButton.disabled = false;
@@ -85,7 +231,7 @@ async function submitPasswordRecovery(event) {
 }
 
 /**
- * 绑定邮箱找回密码页提交事件。
+ * 绑定智能找回向导控制事件。
  *
  * @returns {void}
  */
@@ -93,11 +239,28 @@ function bindPasswordForgotControls() {
     if (passwordForgotControlsBound || typeof document === "undefined") {
         return;
     }
-
     passwordForgotControlsBound = true;
+
+    // 第一步表单提交
+    document.getElementById("account-detect-form")?.addEventListener("submit", (event) => {
+        void submitAccountDetect(event);
+    });
+
+    // 第二步发信表单提交
     document.getElementById("password-recovery-form")?.addEventListener("submit", (event) => {
         void submitPasswordRecovery(event);
     });
+
+    // 返回按钮事件
+    document.getElementById("back-detect-btn")?.addEventListener("click", () => {
+        hideAlert();
+        document.getElementById("step-detect").style.display = "block";
+        document.getElementById("step-result").style.display = "none";
+        document.getElementById("recovery-title").innerText = "忘记密码";
+        document.getElementById("forgot-footer").style.display = "block";
+    });
+
+    bindTabEvents();
 }
 
 bindPasswordForgotControls();

resources/views/password-forgot.blade.php

@@ -182,6 +182,101 @@
             line-height: 1.7;
         }
 
+        /* ── 智能引导 Tab 及微信向导样式 ── */
+        .tabs {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2px;
+            margin-bottom: 20px;
+            border: 1px solid var(--border);
+            background: rgba(255, 248, 236, 0.02);
+            padding: 2px;
+        }
+
+        .tab-btn {
+            height: 46px;
+            background: transparent;
+            border: none;
+            color: var(--text-soft);
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-family: inherit;
+        }
+
+        .tab-btn:hover {
+            color: var(--text);
+            background: rgba(255, 255, 255, 0.02);
+        }
+
+        .tab-btn.active {
+            color: var(--gold);
+            background: rgba(198, 163, 91, 0.08);
+            font-weight: 700;
+        }
+
+        .wechat-guide {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            margin-bottom: 18px;
+        }
+
+        .guide-step {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            background: rgba(255, 248, 236, 0.02);
+            border: 1px solid rgba(198, 163, 91, 0.08);
+            padding: 12px 14px;
+        }
+
+        .step-num {
+            width: 22px;
+            height: 22px;
+            background: var(--gold);
+            color: var(--bg);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 900;
+            font-size: 12px;
+            flex-shrink: 0;
+            box-shadow: 0 0 10px rgba(198, 163, 91, 0.2);
+        }
+
+        .step-desc {
+            font-size: 13.5px;
+            line-height: 1.6;
+            color: var(--text-soft);
+        }
+
+        .step-desc strong {
+            color: var(--text);
+        }
+
+        .cmd-badge {
+            display: inline-block;
+            padding: 2px 8px;
+            background: var(--red);
+            color: #fff;
+            font-weight: 700;
+            font-size: 12px;
+            border-radius: 3px;
+            margin: 0 4px;
+        }
+
+        .wechat-tip {
+            border-left: 3px solid var(--gold);
+            background: rgba(198, 163, 91, 0.03);
+            padding: 12px;
+            font-size: 13px;
+            line-height: 1.6;
+            color: var(--text-soft);
+        }
+
         @media (max-width: 640px) {
             .content {
                 padding: 22px 18px 18px;
@@ -198,41 +293,102 @@
     <main class="card">
         <section class="content">
             <div class="eyebrow">PASSWORD RECOVERY</div>
-            <h1>邮箱找回密码</h1>
-            <p class="lead">请输入账号已绑定的邮箱地址。系统会把重置密码链接发送到邮箱，您再进入独立页面设置新密码。</p>
+            <h1 id="recovery-title">忘记密码</h1>
 
             <div id="alert-box" class="alert" aria-live="polite"></div>
 
-            <form id="password-recovery-form" data-password-email-url="{{ route('password.email') }}">
-                <label for="email">绑定邮箱</label>
-                <input
-                    id="email"
-                    name="email"
-                    type="email"
-                    maxlength="255"
-                    placeholder="请输入账号绑定的邮箱地址"
-                    autocomplete="email"
-                    {{ $smtpEnabled ? '' : 'disabled' }}
-                    required
-                >
-                <div class="tip">仅支持已绑定唯一邮箱的账号自助找回。重置链接默认 60 分钟内有效。</div>
+            <!-- ================== 步骤一：检测账号昵称 ================== -->
+            <div id="step-detect" class="step-panel">
+                <p class="lead">请输入您的聊天室用户昵称，小助手将智能查询并为您提供最安全的重置方案。</p>
+                <form id="account-detect-form" action="{{ route('password.check_account') }}">
+                    <label for="username">账号昵称</label>
+                    <input
+                        id="username"
+                        name="username"
+                        type="text"
+                        maxlength="100"
+                        placeholder="请输入您的聊天室账号昵称"
+                        required
+                    >
+                    <div class="actions">
+                        <button id="detect-btn" type="submit">下一步 (检测账号)</button>
+                        <a class="ghost-link" href="{{ route('home') }}">返回首页</a>
+                    </div>
+                </form>
+            </div>
 
-                <div class="actions">
-                    <button id="submit-btn" type="submit" {{ $smtpEnabled ? '' : 'disabled' }}>发送重置邮件</button>
+            <!-- ================== 步骤二：智能找回分流面板 ================== -->
+            <div id="step-result" class="step-panel" style="display: none;">
+                <!-- 渠道切换 Tab（仅在双绑定时可见） -->
+                <div id="channel-tabs" class="tabs" style="display: none;">
+                    <button type="button" class="tab-btn active" data-target="panel-wechat">💬 微信找回 (推荐)</button>
+                    <button type="button" class="tab-btn" data-target="panel-email">📧 邮箱找回</button>
+                </div>
+
+                <!-- 结果提示横幅 -->
+                <p id="detect-summary" class="lead" style="margin-bottom: 15px; font-weight: 500;"></p>
+
+                <!-- 模块一：微信私聊重置指引 -->
+                <div id="panel-wechat" class="channel-pane" style="display: none;">
+                    <div class="wechat-guide">
+                        <div class="guide-step">
+                            <div class="step-num">1</div>
+                            <div class="step-desc">打开微信，进入与微信助手 <strong>【小小】</strong> 的私发消息窗口。</div>
+                        </div>
+                        <div class="guide-step">
+                            <div class="step-num">2</div>
+                            <div class="step-desc">在对话框中直接输入并发送重置口令：<span class="cmd-badge">重置密码</span></div>
+                        </div>
+                        <div class="guide-step">
+                            <div class="step-num">3</div>
+                            <div class="step-desc">微信小助手将即时为您自动生成 <strong>8位随机新密码</strong> 并直接通过微信回复您！</div>
+                        </div>
+                    </div>
+                    <div class="wechat-tip">
+                        ⚠️ <strong>安全提示：</strong> 该操作直接经由微信私聊分发，密码不泄露在大厅公屏，请放心使用。
+                    </div>
+                </div>
+
+                <!-- 模块二：邮箱重置发送表单 -->
+                <div id="panel-email" class="channel-pane" style="display: none;">
+                    <form id="password-recovery-form" data-password-email-url="{{ route('password.email') }}">
+                        <label for="email">已绑定邮箱</label>
+                        <input
+                            id="email"
+                            name="email"
+                            type="email"
+                            maxlength="255"
+                            placeholder="账号绑定的邮箱地址"
+                            autocomplete="email"
+                            readonly
+                            required
+                        >
+                        <div class="tip" style="margin-bottom: 15px;">出于安全目的，此邮箱仅作脱敏验证。系统将向该邮箱投递密码重置链接。</div>
+
+                        <button id="submit-btn" type="submit" style="width: 100%;" {{ $smtpEnabled ? '' : 'disabled' }}>发送重置邮件</button>
+                    </form>
+                </div>
+
+                <!-- 模块三：均未绑定提示（无法自助找回） -->
+                <div id="panel-none" class="channel-pane" style="display: none;">
+                    <div class="wechat-tip" style="border-color: var(--danger); background: rgba(143, 46, 39, 0.08); color: #f5cbc7;">
+                        ❌ <strong>无法自助找回：</strong><br>
+                        由于您的账号既未绑定邮箱，也未绑定微信，系统无法验证您的持有权。请联系站长或管理员进行人工核验申诉重置。
+                    </div>
+                </div>
+
+                <!-- 底部返回与重试操作 -->
+                <div class="actions" style="margin-top: 20px;">
+                    <button id="back-detect-btn" type="button" class="ghost-link" style="color: var(--gold); border-color: rgba(198,163,91,0.4);">返回重新检测</button>
                     <a class="ghost-link" href="{{ route('home') }}">返回首页</a>
                 </div>
-            </form>
+            </div>
 
-            <div class="footer">
-                @if ($smtpEnabled)
-                    找回成功后，请回到首页使用原昵称和新密码登录聊天室。
-                @else
-                    当前系统尚未开启邮箱发信服务，暂时无法通过邮箱找回密码。
-                @endif
+            <div class="footer" id="forgot-footer">
+                找回密码成功后，请使用账号昵称和新重置的密码登录聊天室。
             </div>
         </section>
     </main>
-
 </body>
 
 </html>