@@ -1,7 +1,8 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
+import { useSearchParams } from "next/navigation";
 
 type LinkedIdentity = {
   provider: string;
@@ -15,41 +16,84 @@ function getToken(): string | null {
   return localStorage.getItem("satoken");
 }
 
+// 只是展示名。后端 /identities/providers 才是"有哪些登录方式"的真相源，
+// 这里查不到就回退显示原始 key，保证新接入的 provider 不会静默消失。
 const PROVIDER_LABEL: Record<string, string> = {
   github: "GitHub",
   discord: "Discord",
 };
 
+function labelOf(provider: string): string {
+  return Object.hasOwn(PROVIDER_LABEL, provider)
+    ? PROVIDER_LABEL[provider]!
+    : provider;
+}
+
+// 后端绑定回调会跳回 /settings?bind=ok 或 ?bind_error=<code>
+const BIND_ERROR_KEYS: Record<string, string> = {
+  bind_taken: "bindTaken",
+  bind_duplicate: "bindDuplicate",
+  bind_already_yours: "bindAlreadyYours",
+  bind_session: "bindSession",
+  oauth_state: "bindFailed",
+  oauth_provider: "bindFailed",
+  oauth_failed: "bindFailed",
+};
+
 /**
- * 已绑定登录方式的查看 + 解绑（后端 M2a）。绑定新 provider 走 OAuth 流程，
- * 待绑定流程（M2b）上线后再加"连接"按钮——现在加会把用户登成新账号（分叉）。
+ * 已绑定登录方式的查看 / 绑定（M2b） / 解绑（M2a）。
+ *
+ * 绑定必须走 /oauth/bind/{provider} 而不是普通登录入口：后者会把用户登成新账号
+ * （分叉），而分叉之后那个第三方身份就被新账号占住，本尊再也补绑不回来。
  */
 export function LinkedAccounts() {
   const t = useTranslations("settings.linked");
   const [items, setItems] = useState<LinkedIdentity[] | null>(null);
+  const [supported, setSupported] = useState<string[]>([]);
   const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
   const [busy, setBusy] = useState<string | null>(null);
+  const params = useSearchParams();
 
-  async function load() {
+  const load = useCallback(async () => {
     const token = getToken();
     if (!token) return;
     try {
-      const res = await fetch("/api/user-center/identities", {
-        headers: { satoken: token },
-      });
-      if (!res.ok) throw new Error();
-      const body = await res.json();
-      setItems(body.data ?? []);
+      const [identities, providers] = await Promise.all([
+        fetch("/api/user-center/identities", { headers: { satoken: token } }),
+        fetch("/api/user-center/identities/providers", {
+          headers: { satoken: token },
+        }),
+      ]);
+      if (!identities.ok) throw new Error();
+      setItems((await identities.json()).data ?? []);
+      if (providers.ok) setSupported((await providers.json()).data ?? []);
       setError(null);
     } catch {
       setError(t("loadFail"));
     }
-  }
+  }, [t]);
 
   useEffect(() => {
     load();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [load]);
+
+  // 绑定回调结果：成功给提示，失败给出可区分的原因（"已被别的账号占用"等）
+  useEffect(() => {
+    if (params.get("bind") === "ok") {
+      setNotice(t("bindOk"));
+      return;
+    }
+    const code = params.get("bind_error");
+    if (!code) return;
+    setError(
+      t(
+        Object.hasOwn(BIND_ERROR_KEYS, code)
+          ? BIND_ERROR_KEYS[code]!
+          : "bindFailed",
+      ),
+    );
+  }, [params, t]);
 
   async function unbind(provider: string) {
     const token = getToken();
@@ -77,36 +121,58 @@ export function LinkedAccounts() {
 
   if (items === null && !error) return null; // 未登录或加载中，保持安静
 
+  const bound = items ?? [];
+  const boundKeys = new Set(bound.map((i) => i.provider));
+  const bindable = supported.filter((p) => !boundKeys.has(p));
+
   return (
     <section className="mt-10">
       <label className="block font-serif font-bold text-lg mb-3">
         {t("label")}
       </label>
+      {notice && (
+        <p className="font-mono text-xs text-green-700 dark:text-green-400 mb-3">
+          {notice}
+        </p>
+      )}
       {error && (
         <p className="font-mono text-xs text-[#CC0000] mb-3">{error}</p>
       )}
       <ul className="border border-[var(--foreground)] divide-y divide-[var(--foreground)]/20">
-        {(items ?? []).map((it) => (
+        {bound.map((it) => (
           <li
             key={it.provider}
             className="flex items-center justify-between px-4 py-3"
           >
             <span className="font-mono text-sm text-[var(--foreground)]">
-              {PROVIDER_LABEL[it.provider] ?? it.provider}
+              {labelOf(it.provider)}
               {it.displayNameAtLink ? ` · ${it.displayNameAtLink}` : ""}
             </span>
             <button
               type="button"
               onClick={() => unbind(it.provider)}
-              disabled={busy === it.provider || (items ?? []).length <= 1}
-              title={(items ?? []).length <= 1 ? t("lastHint") : undefined}
+              disabled={busy === it.provider || bound.length <= 1}
+              title={bound.length <= 1 ? t("lastHint") : undefined}
               className="font-mono text-xs uppercase tracking-widest text-[var(--foreground)]/70 hover:text-[#CC0000] transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
             >
               {busy === it.provider ? "…" : t("unbind")}
             </button>
           </li>
         ))}
-        {(items ?? []).length === 0 && (
+        {bindable.map((p) => (
+          <li key={p} className="flex items-center justify-between px-4 py-3">
+            <span className="font-mono text-sm text-[var(--foreground)]/50">
+              {labelOf(p)}
+            </span>
+            <a
+              href={`/oauth/bind/${p}`}
+              className="font-mono text-xs uppercase tracking-widest text-[var(--foreground)]/70 hover:text-[var(--foreground)] transition-colors"
+            >
+              {t("connect")}
+            </a>
+          </li>
+        ))}
+        {bound.length === 0 && bindable.length === 0 && (
           <li className="px-4 py-3 font-mono text-sm text-neutral-500">
             {t("empty")}
           </li>
 
@@ -2,6 +2,7 @@
 // 登录态由客户端 SettingsForm 内部的 useAuth 处理：token 存在 localStorage，服务端无法读取，
 // 所以这里不做服务端鉴权，仅负责渲染页面壳。未登录 → 客户端 router.replace 到 /login?redirect=/settings。
 import type { Metadata } from "next";
+import { Suspense } from "react";
 import { Header } from "@/app/components/Header";
 import { Footer } from "@/app/components/Footer";
 import { SettingsForm } from "./SettingsForm";
@@ -30,7 +31,11 @@ export default function SettingsPage() {
             </p>
           </div>
           <SettingsForm />
-          <LinkedAccounts />
+          {/* LinkedAccounts 用 useSearchParams 读绑定回调结果（?bind=ok / ?bind_error=），
+              必须有 Suspense 边界，否则整页会被拖成动态渲染 */}
+          <Suspense fallback={null}>
+            <LinkedAccounts />
+          </Suspense>
         </div>
       </main>
       <Footer />
 
@@ -106,7 +106,14 @@
       "empty": "No linked sign-in methods",
       "loadFail": "Failed to load sign-in methods",
       "unbindFail": "Unlink failed",
-      "lastHint": "This is your only sign-in method and can't be unlinked"
+      "lastHint": "This is your only sign-in method and can't be unlinked",
+      "connect": "Connect",
+      "bindOk": "Linked successfully",
+      "bindTaken": "That account is already linked to a different user. Unlink it there first, then come back.",
+      "bindDuplicate": "You've already linked this sign-in method — one per account.",
+      "bindAlreadyYours": "This sign-in method is already on your account.",
+      "bindSession": "Your session changed during linking. Please click Connect again.",
+      "bindFailed": "Linking failed. Please try again."
     }
   },
   "signIn": {
 
@@ -106,7 +106,14 @@
       "empty": "暂无绑定的第三方登录",
       "loadFail": "加载登录方式失败",
       "unbindFail": "解绑失败",
-      "lastHint": "这是你唯一的登录方式，不能解绑"
+      "lastHint": "这是你唯一的登录方式，不能解绑",
+      "connect": "连接",
+      "bindOk": "绑定成功",
+      "bindTaken": "该第三方账号已经绑定到另一个账号了。请先登录那个账号解绑，再回来绑定。",
+      "bindDuplicate": "你已经绑定过这种登录方式了，一个账号同一登录方式只能绑一个。",
+      "bindAlreadyYours": "这个登录方式已经在你的账号上了，无需重复绑定。",
+      "bindSession": "绑定过程中登录状态发生了变化，请重新点一次连接。",
+      "bindFailed": "绑定失败，请重试。"
     }
   },
   "signIn": {