@autional/shared 0.0.0-stage → 0.1.0-rc.33

package/src/branding/brand-color.ts

@@ -0,0 +1,193 @@
+// brand-color.ts — OKLab (Ottosson) 颜色转换 + WCAG 2.x 对比度 + 暗色品牌推导
+// 纯函数，零外部依赖。移植自 butler/requirements/design/brand-contrast.mjs（保留全部常数）
+// 防御 (N3): 非法 hex 输入（非 #rgb/#rrggbb、空串、null/undefined）返回原值/安全默认，不抛错，
+//            避免租户数据异常产生 invalid CSS 变量值。
+
+type Rgb = [number, number, number];
+
+const HEX_RE = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+
+/** 归一化为小写 #rrggbb（支持 #rgb 展开 + 大写 hex）；非法输入返回 null */
+function normalizeHex(hex: unknown): string | null {
+	if (typeof hex !== 'string') return null;
+	const h = hex.trim();
+	if (!HEX_RE.test(h)) return null;
+	let digits = h.slice(1).toLowerCase();
+	if (digits.length === 3)
+		digits = digits
+			.split('')
+			.map((c) => c + c)
+			.join('');
+	return `#${digits}`;
+}
+
+// ── WCAG 2.x 相对亮度 / 对比度（脚本 L4-20）──
+function hexToRgb(hex: string): Rgb {
+	const norm = normalizeHex(hex);
+	if (!norm) return [0, 0, 0];
+	const d = norm.slice(1);
+	return [0, 2, 4].map((i) => parseInt(d.slice(i, i + 2), 16) / 255) as Rgb;
+}
+function lin(c: number): number {
+	return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+function lum(rgb: Rgb): number {
+	const [r, g, b] = rgb.map(lin) as [number, number, number];
+	return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contrast(a: Rgb, b: Rgb): number {
+	const l1 = lum(a);
+	const l2 = lum(b);
+	const [hi, lo] = l1 > l2 ? [l1, l2] : [l2, l1];
+	return (hi + 0.05) / (lo + 0.05);
+}
+
+// ── sRGB ↔ OKLab (Ottosson，脚本 L22-46，含 Math.cbrt 与输出钳位) ──
+function srgbToOklab(rgb: Rgb): [number, number, number] {
+	const [r, g, b] = rgb.map(lin) as [number, number, number];
+	let l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+	let m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+	let s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+	l = Math.cbrt(l);
+	m = Math.cbrt(m);
+	s = Math.cbrt(s);
+	return [
+		0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+		1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+		0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+	];
+}
+function oklabToSrgb([L, a, b]: [number, number, number]): Rgb {
+	const l = Math.pow(L + 0.3963377774 * a + 0.2158037573 * b, 3);
+	const m = Math.pow(L - 0.1055613458 * a - 0.0638541728 * b, 3);
+	const s = Math.pow(L - 0.0894841775 * a - 1.291485548 * b, 3);
+	const r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+	const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+	const b2 = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+	const conv = (c: number): number => {
+		c = Math.min(1, Math.max(0, c)); // 钳位（脚本 L42）
+		return c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+	};
+	return [conv(r), conv(g), conv(b2)];
+}
+function rgbToHex(rgb: Rgb): string {
+	return (
+		'#' +
+		rgb
+			.map((c) =>
+				Math.round(c * 255)
+					.toString(16)
+					.padStart(2, '0'),
+			)
+			.join('')
+	);
+}
+
+/** hex → `r g b` 通道三元组（供 `--color-*-rgb` 伴随变量，Tailwind alpha 路径消费）。
+ *  防御 (N3): 非法输入返回 null（调用方回退，不抛错）。 */
+export function hexToTriplet(hex: string): string | null {
+	const norm = normalizeHex(hex);
+	if (!norm) return null;
+	const d = norm.slice(1);
+	return [0, 2, 4].map((i) => parseInt(d.slice(i, i + 2), 16)).join(' ');
+}
+
+/** hex → OKLCH [L, C, H]（防御: 非法输入返回 [0, 0, 0]，不抛错） */
+export function hexToOklch(hex: string): [number, number, number] {
+	if (normalizeHex(hex) === null) return [0, 0, 0];
+	const [L, a, b] = srgbToOklab(hexToRgb(hex));
+	return [L, Math.hypot(a, b), Math.atan2(b, a)];
+}
+
+/** OKLCH [L, C, H] → hex（防御: 非法输入返回 '#000000'，不抛错） */
+export function oklchToHex(oklch: [number, number, number]): string {
+	if (
+		!Array.isArray(oklch) ||
+		oklch.length < 3 ||
+		oklch.slice(0, 3).some((v) => typeof v !== 'number' || Number.isNaN(v))
+	) {
+		return '#000000';
+	}
+	const [L, C, H] = oklch;
+	return rgbToHex(oklabToSrgb([L, C * Math.cos(H), C * Math.sin(H)]));
+}
+
+/** 向白色混入比例 t: OKLCH[L+(1-L)·t, C·(1-t), H]（保持色相，抬升 L、压降 C，脚本 L58-63） */
+function mixWhite(hex: string, t: number): string {
+	const [L, C, H] = hexToOklch(hex);
+	return oklchToHex([L + (1 - L) * t, C * (1 - t), H]);
+}
+
+/** 向黑色混入比例 t: OKLCH[L·(1-t), C·(1-t), H]（与 mixWhite 镜像：压低 L 与 C，保持色相）。
+ *  供 deriveTextColor——浅底上的品牌文本色需压暗而非抬亮。 */
+function mixBlack(hex: string, t: number): string {
+	const [L, C, H] = hexToOklch(hex);
+	return oklchToHex([L * (1 - t), C * (1 - t), H]);
+}
+
+/** 内部函数（不导出）: 二分 24 迭代求最小 t∈[0,cap]，使 mix(hex,t) 对 refBg 对比度 ≥ target。
+ *  mix 默认 mixWhite（暗底抬亮）；deriveTextColor 传 mixBlack（浅底压暗）。
+ *  供 deriveDarkColor / deriveDarkHover / deriveTextColor 复用，避免二次二分（ADR-003）。 */
+function deriveT(
+	hex: string,
+	refBg: string,
+	target: number,
+	cap: number,
+	mix: (hex: string, t: number) => string = mixWhite,
+): number {
+	let lo = 0;
+	let hi = cap;
+	const bgRgb = hexToRgb(refBg);
+	for (let i = 0; i < 24; i++) {
+		const mid = (lo + hi) / 2;
+		if (contrast(hexToRgb(mix(hex, mid)), bgRgb) >= target) hi = mid;
+		else lo = mid;
+	}
+	return (lo + hi) / 2;
+}
+
+/** 推导暗色品牌变体 = mixWhite(hex, deriveT(...))。
+ *  D3 锁定默认参数: refBg='#0a2940', target=4.55, cap=0.85。
+ *  防御 (N3): 非法 hex → 返回原值不抛错（不产生 invalid CSS 变量值）。 */
+export function deriveDarkColor(hex: string, refBg = '#0a2940', target = 4.55, cap = 0.85): string {
+	if (normalizeHex(hex) === null) return hex;
+	const bg = normalizeHex(refBg) ?? '#0a2940';
+	const tgt = typeof target === 'number' && !Number.isNaN(target) ? target : 4.55;
+	const c = typeof cap === 'number' && !Number.isNaN(cap) ? Math.max(0, Math.min(cap, 1)) : 0.85;
+	return mixWhite(hex, deriveT(hex, bg, tgt, c));
+}
+
+/** 推导浅底（默认白）上的品牌文本色：已达标返回原值，否则沿 mixBlack 压暗至对比度 ≥ target。
+ *  与 deriveDarkColor 方向相反（后者往白里混供暗底）——AUTH-05：品牌填充色直接作文本
+ *  （text-[var(--color-brand)]）对白底对比度随租户色浮动（#003153→13.4:1，#1890ff→3.24:1），
+ *  本函数给出「填充不变、文本另派生」的安全值，运行期写 --color-brand-text-base。
+ *  默认参数: refBg='#ffffff', target=4.55, cap=0.85。
+ *  防御 (N3): 非法 hex → 返回原值不抛错（不产生 invalid CSS 变量值）。 */
+export function deriveTextColor(hex: string, refBg = '#ffffff', target = 4.55, cap = 0.85): string {
+	if (normalizeHex(hex) === null) return hex;
+	const bg = normalizeHex(refBg) ?? '#ffffff';
+	const tgt = typeof target === 'number' && !Number.isNaN(target) ? target : 4.55;
+	const c = typeof cap === 'number' && !Number.isNaN(cap) ? Math.max(0, Math.min(cap, 1)) : 0.85;
+	if (contrast(hexToRgb(hex), hexToRgb(bg)) >= tgt) return hex;
+	return mixBlack(hex, deriveT(hex, bg, tgt, c, mixBlack));
+}
+
+/** on-brand 文本色: 选 '#ffffff' 与 '#0a0f1a' 中对比度更高者（保证 ≥4.5）。
+ *  防御: 非法 fill → '#0a0f1a'（安全默认，不抛错）。 */
+export function pickOnColor(fill: string): '#ffffff' | '#0a0f1a' {
+	if (normalizeHex(fill) === null) return '#0a0f1a';
+	const white: Rgb = [1, 1, 1];
+	const dark = hexToRgb('#0a0f1a');
+	return contrast(white, hexToRgb(fill)) >= contrast(dark, hexToRgb(fill)) ? '#ffffff' : '#0a0f1a';
+}
+
+/** hover 暗色变体 = mixWhite(color, min(t+0.08, 0.92))，t 复用 deriveT（ADR-003/D4）。
+ *  防御 (N3): 非法 hex → 返回原值不抛错。 */
+export function deriveDarkHover(hex: string, refBg = '#0a2940', target = 4.55, cap = 0.85): string {
+	if (normalizeHex(hex) === null) return hex;
+	const bg = normalizeHex(refBg) ?? '#0a2940';
+	const tgt = typeof target === 'number' && !Number.isNaN(target) ? target : 4.55;
+	const c = typeof cap === 'number' && !Number.isNaN(cap) ? Math.max(0, Math.min(cap, 1)) : 0.85;
+	const t = deriveT(hex, bg, tgt, c);
+	return mixWhite(hex, Math.min(t + 0.08, 0.92));
+}

package/src/branding/branding-cache.ts

@@ -0,0 +1,71 @@
+import type { Branding } from './types';
+import { extractBranding } from './extract-branding';
+
+/**
+ * 缓存键。三套前缀都要认——顺序不能改，越靠前越早、越权威。
+ *
+ *   page-init:tenant-branding:  页面内联脚本在 React 之前写入 → 首帧就有缓存色可上
+ *   tenant-branding:            运行时写入（writeCachedBranding）
+ *   page-init:auth-config: / auth-config:   auth-config 里也带 branding 段，作为兜底
+ *
+ * 只认第二套的代价是实测过的：首帧读不到缓存，先闪一次品牌默认色再跳到租户色。
+ * auth 站的同类实现一直读的是 page-init 键，这里把能力并到共享版，避免两套各读各的。
+ */
+export const BRANDING_CACHE_PREFIX = 'tenant-branding:';
+export const PAGE_INIT_BRANDING_PREFIX = 'page-init:tenant-branding:';
+export const AUTH_CONFIG_PREFIX = 'auth-config:';
+export const PAGE_INIT_AUTH_CONFIG_PREFIX = 'page-init:auth-config:';
+
+function get(key: string): string | null {
+	try {
+		return localStorage.getItem(key);
+	} catch {
+		return null;
+	}
+}
+
+/** 兼容 `{data, _ts}` 包装与裸对象两种历史写入形态。 */
+function unwrap(raw: string | null): Branding | null {
+	if (!raw) return null;
+	try {
+		const parsed = JSON.parse(raw) as { data?: Branding } | Branding;
+		return ((parsed as { data?: Branding })?.data ?? parsed) as Branding;
+	} catch {
+		return null;
+	}
+}
+
+/** auth-config 缓存里也带 branding 段——作为最后兜底。 */
+function fromAuthConfig(slug: string): Branding | null {
+	for (const prefix of [PAGE_INIT_AUTH_CONFIG_PREFIX, AUTH_CONFIG_PREFIX]) {
+		const raw = get(prefix + slug);
+		if (!raw) continue;
+		try {
+			const cfg = JSON.parse(raw) as { data?: { branding?: unknown } };
+			const branding = extractBranding(cfg?.data?.branding);
+			if (branding) return branding;
+		} catch {
+			/* 坏数据视为没有 */
+		}
+	}
+	return null;
+}
+
+export function readCachedBranding(slug: string): Branding | null {
+	return (
+		unwrap(get(PAGE_INIT_BRANDING_PREFIX + slug)) ??
+		unwrap(get(BRANDING_CACHE_PREFIX + slug)) ??
+		fromAuthConfig(slug)
+	);
+}
+
+export function writeCachedBranding(slug: string, branding: Branding): void {
+	try {
+		localStorage.setItem(
+			BRANDING_CACHE_PREFIX + slug,
+			JSON.stringify({ data: branding, _ts: Date.now() }),
+		);
+	} catch {
+		/* storage full or unavailable */
+	}
+}

package/src/branding/extract-branding.ts

@@ -0,0 +1,27 @@
+import type { Branding } from './types';
+
+/** 从 public tenant 接口响应里取 branding 段（兼容 snake_case / camelCase，且兼容已解包的对象）。 */
+export function extractBranding(raw: unknown): Branding | null {
+	if (!raw || typeof raw !== 'object') return null;
+	const record = raw as Record<string, unknown>;
+	const source = (record.branding ?? record) as Record<string, string | undefined>;
+	if (!source || typeof source !== 'object') return null;
+
+	const logoUrl = source.logo_url || source.logoUrl || '';
+	const primaryColor = source.primary_color || source.primaryColor || '';
+	if (!logoUrl && !primaryColor) return null;
+
+	return {
+		primaryColor,
+		primaryColorDark: source.primary_color_dark || source.primaryColorDark || undefined,
+		logoUrl,
+		faviconUrl: source.favicon_url || source.faviconUrl || '',
+		customCss: source.custom_css || source.customCss || '',
+		secondaryColor: source.secondary_color || source.secondaryColor || undefined,
+		companyName: source.company_name || source.companyName || undefined,
+		loginPageTitle: source.login_page_title || source.loginPageTitle || undefined,
+		loginPageDescription: source.login_page_description || source.loginPageDescription || undefined,
+		privacyPolicyUrl: source.privacy_policy_url || source.privacyPolicyUrl || undefined,
+		termsOfServiceUrl: source.terms_of_service_url || source.termsOfServiceUrl || undefined,
+	};
+}

package/src/branding/index.ts

@@ -0,0 +1,15 @@
+export { useBranding, applyBrandColors } from './useBranding';
+export { BrandingInitializer } from './BrandingInitializer';
+export type { BrandingInitializerProps } from './BrandingInitializer';
+export { useTenantBrandingStore } from './tenant-store';
+export { extractBranding } from './extract-branding';
+export {
+	readCachedBranding,
+	writeCachedBranding,
+	BRANDING_CACHE_PREFIX,
+	PAGE_INIT_BRANDING_PREFIX,
+	AUTH_CONFIG_PREFIX,
+	PAGE_INIT_AUTH_CONFIG_PREFIX,
+} from './branding-cache';
+export { deriveDarkColor, deriveDarkHover, pickOnColor, hexToTriplet, hexToOklch, oklchToHex } from './brand-color';
+export type { Branding } from './types';

package/src/branding/tenant-store.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+import type { Branding } from './types';
+
+interface TenantBrandingState {
+	branding: Branding | null;
+	setBranding: (branding: Branding | null) => void;
+}
+
+/** 品牌 store —— `BrandingInitializer` 写入，`useBranding` 消费并落到 CSS 变量。 */
+export const useTenantBrandingStore = create<TenantBrandingState>((set) => ({
+	branding: null,
+	setBranding: (branding) => set({ branding }),
+}));

package/src/branding/types.ts

@@ -0,0 +1,14 @@
+/** 租户公开品牌契约（与 tenant-service `GET /tenant/public/tenants/{slug}` 的 branding 段一致）。 */
+export interface Branding {
+	primaryColor: string;
+	primaryColorDark?: string;
+	logoUrl: string;
+	faviconUrl: string;
+	customCss: string;
+	secondaryColor?: string;
+	companyName?: string;
+	loginPageTitle?: string;
+	loginPageDescription?: string;
+	privacyPolicyUrl?: string;
+	termsOfServiceUrl?: string;
+}

package/src/branding/useBranding.ts

@@ -0,0 +1,101 @@
+'use client';
+
+import { useLayoutEffect, useRef } from 'react';
+import { useTenantSlugFromUrl } from '../auth/slug-from-url';
+import { deriveDarkColor, deriveDarkHover, deriveTextColor, hexToTriplet, pickOnColor } from './brand-color';
+import { readCachedBranding } from './branding-cache';
+import { useTenantBrandingStore } from './tenant-store';
+
+/** 品牌注入的 8 个 CSS 变量（与 auth 站同口径，tokens.css 提供缺省值）。 */
+const BRAND_VARS = [
+	'--color-brand-base',
+	'--color-brand-hover-base',
+	'--color-brand-dark',
+	'--color-brand-dark-hover',
+	'--color-brand-text-base',
+	'--color-on-brand-base',
+	'--color-on-brand',
+	'--color-on-brand-dark',
+];
+
+/** 写一个色变量及其 `-rgb` 通道三元组——Tailwind alpha 修饰符（text-brand/60）走
+ *  `rgb(var(--color-X-rgb) / a)`，只写 hex 会让品牌租户的透明度色整条丢失。
+ *  非法非 hex 值：写原值但不写三元组（回落 tokens.css 缺省），避免残留上个租户的通道。 */
+function setColorVar(root: HTMLElement, name: string, value: string): void {
+	root.style.setProperty(name, value);
+	const triplet = hexToTriplet(value);
+	if (triplet) root.style.setProperty(`${name}-rgb`, triplet);
+	else root.style.removeProperty(`${name}-rgb`);
+}
+
+export function applyBrandColors(color: string, darkOverride?: string): void {
+	const root = document.documentElement;
+	if (!color) {
+		BRAND_VARS.forEach((v) => {
+			root.style.removeProperty(v);
+			root.style.removeProperty(`${v}-rgb`);
+		});
+		return;
+	}
+	const dark = darkOverride || deriveDarkColor(color);
+	setColorVar(root, '--color-brand-base', color);
+	setColorVar(root, '--color-brand-hover-base', color);
+	setColorVar(root, '--color-brand-dark', dark);
+	setColorVar(root, '--color-brand-dark-hover', deriveDarkHover(color));
+	// 品牌色作文本的安全派生值（AUTH-05）：text-brand-text 消费——浅底不达标即压暗
+	setColorVar(root, '--color-brand-text-base', deriveTextColor(color));
+	setColorVar(root, '--color-on-brand-base', pickOnColor(color));
+	setColorVar(root, '--color-on-brand-dark', pickOnColor(dark));
+}
+
+/**
+ * 把当前租户品牌落到 DOM（CSS 变量 / favicon / customCss）。
+ * 需与 `<BrandingInitializer/>` 同时挂载：前者负责写 store，这里负责呈现。
+ */
+export function useBranding(): void {
+	const branding = useTenantBrandingStore((s) => s.branding);
+	const slug = useTenantSlugFromUrl();
+	const styleRef = useRef<HTMLStyleElement | null>(null);
+	const primedSlugRef = useRef<string | null>(null);
+
+	// 首帧前用缓存上色，避免默认品牌色闪一下
+	useLayoutEffect(() => {
+		if (!slug || primedSlugRef.current === slug) return;
+		primedSlugRef.current = slug;
+		const cached = readCachedBranding(slug);
+		applyBrandColors(cached?.primaryColor ?? '', cached?.primaryColorDark);
+	}, [slug]);
+
+	useLayoutEffect(() => {
+		if (!branding) {
+			applyBrandColors('');
+			return;
+		}
+
+		applyBrandColors(branding.primaryColor, branding.primaryColorDark);
+
+		if (branding.faviconUrl) {
+			let favicon = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+			if (!favicon) {
+				favicon = document.createElement('link');
+				favicon.rel = 'icon';
+				document.head.appendChild(favicon);
+			}
+			favicon.href = branding.faviconUrl;
+		}
+
+		if (branding.customCss) {
+			if (!styleRef.current) {
+				styleRef.current = document.createElement('style');
+				styleRef.current.setAttribute('data-tenant-css', '');
+				document.head.appendChild(styleRef.current);
+			}
+			styleRef.current.textContent = branding.customCss;
+		}
+
+		return () => {
+			applyBrandColors('');
+			if (styleRef.current) styleRef.current.textContent = '';
+		};
+	}, [branding]);
+}

package/src/components/AuditStatsOnly.tsx

@@ -0,0 +1,65 @@
+/**
+ * AuditStatsOnly — 审计统计摘要组件
+ *
+ * 在 strict sod_mode 下，admin 角色仅能看到聚合统计卡片，
+ * 不能看到审计日志明细行、全文检索、导出等功能。
+ *
+ * 不使用 antd 依赖（shared 包不直接依赖 antd），
+ * 使用纯 Tailwind CSS + HTML 实现轻量提示卡片。
+ *
+ * @see document/architecture/decisions/007-security-dashboard-audit.md §2.2
+ */
+
+'use client';
+
+import React from 'react';
+
+interface AuditStatsOnlyProps {
+	title?: string;
+	description?: string;
+	children?: React.ReactNode;
+}
+
+/**
+ * 审计受限提示组件。
+ * 在 strict 模式下替换完整审计页面内容。
+ *
+ * 可选的 children 用于放置自定义的统计卡片内容。
+ */
+export function AuditStatsOnly({ title, description, children }: AuditStatsOnlyProps) {
+	return (
+		<div className="flex flex-col items-center justify-center min-h-[40vh] p-8">
+			<div className="w-full max-w-2xl bg-white dark:bg-slate-800 rounded-lg shadow-card border border-gray-200 dark:border-slate-700 p-8">
+				<div className="flex flex-col items-center text-center space-y-4">
+					{/* Lock icon via inline SVG (no external dependency) */}
+					<svg
+						className="w-12 h-12 text-gray-400 dark:text-gray-500"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={1.5}
+							d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+						/>
+					</svg>
+					<h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 !mb-1">
+						{title || '统计摘要'}
+					</h4>
+					<p className="text-sm text-gray-500 dark:text-gray-400 max-w-md">
+						{description ||
+							'在当前模式下，您只能查看审计统计摘要。如需查看完整审计日志，请联系您的安全管理员或使用 security-dashboard 的审计员账号登录。'}
+					</p>
+					{children && (
+						<div className="w-full mt-4 pt-4 border-t border-gray-200 dark:border-slate-700">
+							{children}
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/components/OAuthCallbackPage.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import { handleOAuthCallback } from '../auth/oauth-login';
+
+// 这个组件在 9 个站点各存一份，三处用户可见文案此前**三种写法并存**：
+//   admin「正在登录…」 / platform「登录中…」 / 其余 7 站是英文「Signing in...」
+// 也就是说 7 个中文门户在 OAuth 回调时会显示英文文案。
+//
+// 采用与权威 shared/ui/ErrorBoundary.tsx 完全相同的约定：用 <html lang> 判定文案语言，
+// 默认中文——各 portal 的 I18nProvider 都会在 languageChanged 时同步它。
+// （ErrorBoundary 当初就是因为各 portal 的 t() 约定不一致，才改用这个零依赖信号。）
+const TEXT = {
+	zh: {
+		signingIn: '正在登录…',
+		failed: '登录失败',
+		retry: '重试',
+		// AUTH-46②：OAuthCallbackError.code → 本地化文案（英文裸句不再落用户屏）
+		'oauth.provider_error': '身份提供商返回错误，请返回重试',
+		'oauth.missing_code': '授权响应缺少授权码，请返回重试',
+		'oauth.state_mismatch': '登录状态校验失败（可能为安全原因），请重新登录',
+		'oauth.pkce_cleared': '登录页面刷新导致登录凭据丢失，请重新登录',
+		generic: '登录失败，请返回重试',
+	},
+	en: {
+		signingIn: 'Signing in...',
+		failed: 'Login failed',
+		retry: 'Try again',
+		'oauth.provider_error': 'The identity provider returned an error. Please go back and retry.',
+		'oauth.missing_code': 'The authorization response is missing a code. Please retry.',
+		'oauth.state_mismatch': 'Login state verification failed (possibly for security reasons). Please sign in again.',
+		'oauth.pkce_cleared': 'The page reload cleared the login credentials. Please sign in again.',
+		generic: 'Login failed. Please go back and retry.',
+	},
+};
+
+function text(): typeof TEXT.zh {
+	if (typeof document === 'undefined') return TEXT.zh;
+	const lang = (document.documentElement.getAttribute('lang') || '').toLowerCase();
+	return lang.startsWith('zh') ? TEXT.zh : TEXT.en;
+}
+
+/** AUTH-46②：按错误 code 取本地化文案；无 code（未知错误）给通用文案并保留原文到 console。 */
+function errorText(t: typeof TEXT.zh, e: unknown): string {
+	const code = (e as { code?: string })?.code;
+	if (code && (t as Record<string, string>)[code]) return (t as Record<string, string>)[code];
+	console.error('[oauth-callback]', e);
+	return t.generic;
+}
+
+export function OAuthCallbackPage() {
+	const [error, setError] = useState('');
+	const [loading, setLoading] = useState(true);
+	const t = text();
+
+	useEffect(() => {
+		handleOAuthCallback().catch((e) => {
+			setError(errorText(t, e));
+			setLoading(false);
+		});
+	}, []);
+
+	if (loading) {
+		return (
+			<div className="flex h-screen items-center justify-center bg-neutral-50">
+				<div className="flex flex-col items-center gap-3">
+					<div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent" />
+					<p className="text-sm text-neutral-500">{t.signingIn}</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex h-screen items-center justify-center bg-neutral-50">
+			<div className="max-w-sm rounded-lg border border-red-200 bg-red-50 p-6 text-center">
+				<p className="text-sm font-medium text-red-700">{t.failed}</p>
+				<p className="mt-1 text-xs text-red-600">{error}</p>
+				<a href="/" className="mt-4 inline-block text-sm text-blue-600 underline">
+					{t.retry}
+				</a>
+			</div>
+		</div>
+	);
+}