From 74b12fec259ff1d49d162f708a97684f35a74209 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sun, 26 Jul 2026 12:04:40 +0000 Subject: [PATCH 1/8] =?UTF-8?q?feat(settings):=20=E7=99=BB=E5=BD=95?= =?UTF-8?q?=E6=96=B9=E5=BC=8F=E5=8A=A0"=E8=BF=9E=E6=8E=A5"=E6=8C=89?= =?UTF-8?q?=E9=92=AE=EF=BC=88M2b=20=E7=BB=91=E5=AE=9A=E5=85=A5=E5=8F=A3?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 配套后端的 /oauth/bind/{provider}。此前设置页只有"解绑"，没有绑定入口—— 组件注释自己也写着"现在加会把用户登成新账号（分叉）"，因为绑定流程还没做。 现在绑定走 /oauth/bind/{provider}（后端要求已登录，把身份挂到当前账号， 不建号、不换会话），所以按钮可以放出来了。 可绑列表来自新端点 GET /api/user-center/identities/providers，返回后端已注册的 provider——前端不再维护"有哪些登录方式"的写死列表，接入新 provider 时按钮会自动 出现。PROVIDER_LABEL 退化成纯展示名，查不到就显示原始 key，保证新 provider 不会 静默消失（顺带用 Object.hasOwn 查表，避免原型链键）。 绑定回调结果 ?bind=ok / ?bind_error= 给出可区分文案，其中 bind_taken （该第三方账号已绑到别人）必须说清楚"先去那个账号解绑"，否则用户只会看到 一个无法自助解决的失败。 用 Suspense 包裹（新增 useSearchParams）。settings 页改动前后均为 ƒ 动态， 非本次引入。72 测试通过 / typecheck / lint 0 error / build 通过。 --- app/[locale]/settings/LinkedAccounts.tsx | 102 +++++++++++++++++++---- app/[locale]/settings/page.tsx | 7 +- messages/en.json | 9 +- messages/zh.json | 9 +- 4 files changed, 106 insertions(+), 21 deletions(-) diff --git a/app/[locale]/settings/LinkedAccounts.tsx b/app/[locale]/settings/LinkedAccounts.tsx index 1558bc60..ab64c779 100644 --- a/app/[locale]/settings/LinkedAccounts.tsx +++ b/app/[locale]/settings/LinkedAccounts.tsx @@ -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 = { github: "GitHub", discord: "Discord", }; +function labelOf(provider: string): string { + return Object.hasOwn(PROVIDER_LABEL, provider) + ? PROVIDER_LABEL[provider]! + : provider; +} + +// 后端绑定回调会跳回 /settings?bind=ok 或 ?bind_error= +const BIND_ERROR_KEYS: Record = { + 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(null); + const [supported, setSupported] = useState([]); const [error, setError] = useState(null); + const [notice, setNotice] = useState(null); const [busy, setBusy] = useState(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 (
+ {notice && ( +

+ {notice} +

+ )} {error && (

{error}

)}
    - {(items ?? []).map((it) => ( + {bound.map((it) => (
  • - {PROVIDER_LABEL[it.provider] ?? it.provider} + {labelOf(it.provider)} {it.displayNameAtLink ? ` · ${it.displayNameAtLink}` : ""}
    • ))} - {(items ?? []).length === 0 && ( + {bindable.map((p) => ( +
  • + + {labelOf(p)} + + + {t("connect")} + +
    • + ))} + {bound.length === 0 && bindable.length === 0 && (
  • {t("empty")}
    • diff --git a/app/[locale]/settings/page.tsx b/app/[locale]/settings/page.tsx index 7294d24a..5b7965a4 100644 --- a/app/[locale]/settings/page.tsx +++ b/app/[locale]/settings/page.tsx @@ -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() {

    - + {/* LinkedAccounts 用 useSearchParams 读绑定回调结果（?bind=ok / ?bind_error=）， + 必须有 Suspense 边界，否则整页会被拖成动态渲染 */} + + +