@autional/ui 0.1.0-rc.47 → 0.1.0-rc.49

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@autional/ui",
-  "version": "0.1.0-rc.47",
-  "description": "Autional shared React component library (atoms + molecules) �?the canonical home of the component layer",
+  "version": "0.1.0-rc.49",
+  "description": "Autional shared React component library (atoms + molecules) …the canonical home of the component layer",
   "license": "AGPL-3.0",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -82,7 +82,7 @@
     "react-i18next": "17.0.7",
     "typescript": "5.8.3",
     "vitest": "3.2.0",
-    "@autional/tokens": "0.1.0-rc.15"
+    "@autional/tokens": "0.1.0-rc.17"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/i18n/resources.ts

@@ -32,6 +32,14 @@ export const uiI18nResources: Record<'zh-CN' | 'en-US', Record<string, string>>
 		// ThemeToggle 默认文案（UP-04：原为组件内硬编码中文，EN 站点顶栏出现中文标签）
 		'theme.toggleDark': '切换到深色模式',
 		'theme.toggleLight': '切换到浅色模式',
+		// 组件默认文案（语言问题审计 2026-10-13）：原为组件内硬编码中文默认 ——
+		// EN 站裸露中文（trust 加载态「加载中...」线上实测）。文案逐字保留原硬编码值。
+		'loadingScreen.message': '加载中...',
+		'emptyState.title': '暂无数据',
+		'emptyState.description': '当前没有可显示的内容。',
+		'confirmDialog.confirm': '确认',
+		'confirmDialog.cancel': '取消',
+		'alert.close': '关闭',
 	},
 	'en-US': {
 		'portal.switcher': 'Switch portal',
@@ -52,5 +60,12 @@ export const uiI18nResources: Record<'zh-CN' | 'en-US', Record<string, string>>
 		'pageStatus.retry': 'Retry',
 		'theme.toggleDark': 'Switch to dark mode',
 		'theme.toggleLight': 'Switch to light mode',
+		// EN 词汇对齐舰队既有口径（Loading... / No data / Confirm / Cancel / Close）
+		'loadingScreen.message': 'Loading...',
+		'emptyState.title': 'No data',
+		'emptyState.description': 'Nothing to display yet.',
+		'confirmDialog.confirm': 'Confirm',
+		'confirmDialog.cancel': 'Cancel',
+		'alert.close': 'Close',
 	},
 };

package/src/molecules/Alert.tsx

@@ -2,7 +2,9 @@
 
 import React from 'react';
 import { AlertTriangle, CheckCircle2, Info, X, XCircle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { SOFT_BORDER, SOFT_TEXT, type SemanticVariant } from '../internal/semantic-styles';
+import { UI_I18N_NS, uiText } from '../i18n';
 
 // Alert —— 区块级提示（着色块）。
 //
@@ -67,9 +69,14 @@ export const Alert = React.memo(function Alert({
 	action,
 	closable = false,
 	onClose,
-	closeLabel = '关闭',
+	closeLabel,
 	className = ''
 }: AlertProps) {
+	const { t, i18n } = useTranslation();
+	// 文案解析链与 Modal / ThemeToggle 同构（语言问题审计 2026-10-13）：原为硬编码中文默认。
+	const closeLabelText =
+		closeLabel ??
+		t('alert.close', { ns: UI_I18N_NS, defaultValue: uiText(i18n.language, 'alert.close') ?? '关闭' });
 	const glyph = icon === null ? null : (icon ?? DEFAULT_ICONS[variant]);
 	return (
 		// role="alert" 与 antd 的 Alert 一致：这些块绝大多数是**动作之后**才出现的（结果/失败原因），
@@ -89,7 +96,7 @@ export const Alert = React.memo(function Alert({
 				<button
 					type="button"
 					onClick={onClose}
-					aria-label={closeLabel}
+					aria-label={closeLabelText}
 					className="-mr-1 -mt-1 shrink-0 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100 focus-visible:outline focus-visible:outline-2"
 				>
 					<X className="h-4 w-4" />

package/src/molecules/AppShell.tsx

@@ -69,7 +69,7 @@ export const AppShell = React.memo(function AppShell({
 			{/* 移动端遮罩：点它关闭抽屉。桌面端不渲染（lg:hidden）。 */}
 			{mobileOpen && (
 				<div
-					className="fixed inset-0 z-40 bg-black/30 lg:hidden"
+					className="fixed inset-0 z-40 bg-scrim/30 lg:hidden"
 					onClick={onMobileClose}
 					aria-hidden="true"
 				/>

package/src/molecules/ConfirmDialog.tsx

@@ -1,5 +1,8 @@
 import React, { useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { AlertTriangle, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { UI_I18N_NS, uiText } from '../i18n';
 
 interface ConfirmDialogProps {
 	open: boolean;
@@ -31,12 +34,22 @@ export const ConfirmDialog = React.memo(function ConfirmDialog({
 	open,
 	title,
 	description,
-	confirmText = '确认',
-	cancelText = '取消',
+	confirmText,
+	cancelText,
 	variant = 'neutral',
 	onConfirm,
 	onCancel,
 }: ConfirmDialogProps) {
+	const { t, i18n } = useTranslation();
+	// 文案解析链与 Modal / ThemeToggle 同构（语言问题审计 2026-10-13）：原为硬编码
+	// 中文默认（'确认' / '取消' / X 按钮 '关闭'）—— user 门户 5 处裸调用 EN 站裸露中文。
+	const resolve = (key: string, fallback: string): string =>
+		t(key, { ns: UI_I18N_NS, defaultValue: uiText(i18n.language, key) ?? fallback });
+	const confirmLabel = confirmText ?? resolve('confirmDialog.confirm', '确认');
+	const cancelLabel = cancelText ?? resolve('confirmDialog.cancel', '取消');
+	// X 按钮与 Modal 同键（同为对话框关闭，文案一致）
+	const closeLabel = resolve('modal.close', '关闭');
+
 	const handleKeyDown = useCallback(
 		(e: KeyboardEvent) => {
 			if (e.key === 'Escape') onCancel();
@@ -59,14 +72,16 @@ export const ConfirmDialog = React.memo(function ConfirmDialog({
 
 	const style = variantStyles[variant];
 
-	return (
+	// 与 Modal 同因同解（第 63 轮补·四）：portal 到 body，否则「有 backdrop-filter 的祖先」
+	// 会成为 fixed 后代的包含块，遮罩只覆盖那一小块。
+	const content = (
 		<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-			<div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onCancel} />
+			<div className="absolute inset-0 bg-scrim/50 backdrop-blur-sm" onClick={onCancel} />
 			<div className="relative w-full max-w-md rounded-xl border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] p-6 shadow-brand">
 				<button
 					onClick={onCancel}
 					className="absolute right-4 top-4 text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"
-					aria-label="关闭"
+					aria-label={closeLabel}
 				>
 					<X className="h-4 w-4" />
 				</button>
@@ -86,16 +101,19 @@ export const ConfirmDialog = React.memo(function ConfirmDialog({
 						onClick={onCancel}
 						className="rounded-md border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] px-4 py-2 text-sm font-medium text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-muted)]"
 					>
-						{cancelText}
+						{cancelLabel}
 					</button>
 					<button
 						onClick={onConfirm}
 						className={`rounded-md px-4 py-2 text-sm font-medium transition-colors ${style.confirm}`}
 					>
-						{confirmText}
+						{confirmLabel}
 					</button>
 				</div>
 			</div>
 		</div>
 	);
+
+	if (typeof document === 'undefined') return content;
+	return createPortal(content, document.body);
 });

package/src/molecules/EmptyState.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Inbox } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { UI_I18N_NS, uiText } from '../i18n';
 
 interface EmptyStateProps {
 	title?: string;
@@ -8,17 +10,24 @@ interface EmptyStateProps {
 }
 
 export const EmptyState = React.memo(function EmptyState({
-	title = '暂无数据',
-	description = '当前没有可显示的内容。',
+	title,
+	description,
 	icon,
 }: EmptyStateProps) {
+	const { t, i18n } = useTranslation();
+	// 文案解析链与 Modal / ThemeToggle 同构（语言问题审计 2026-10-13）：原为硬编码中文默认。
+	const resolve = (key: string, fallback: string): string =>
+		t(key, { ns: UI_I18N_NS, defaultValue: uiText(i18n.language, key) ?? fallback });
+	const titleText = title ?? resolve('emptyState.title', '暂无数据');
+	const descriptionText = description ?? resolve('emptyState.description', '当前没有可显示的内容。');
+
 	return (
 		<div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-[var(--color-border-subtle)] bg-[var(--color-bg-muted)] px-4 py-12 text-center">
 			<div className="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--color-bg-muted)] text-[var(--color-text-muted)]">
 				{icon ?? <Inbox className="h-6 w-6" />}
 			</div>
-			<h3 className="mt-4 text-base font-semibold text-[var(--color-text-primary)]">{title}</h3>
-			<p className="mt-1 text-sm text-[var(--color-text-secondary)]">{description}</p>
+			<h3 className="mt-4 text-base font-semibold text-[var(--color-text-primary)]">{titleText}</h3>
+			<p className="mt-1 text-sm text-[var(--color-text-secondary)]">{descriptionText}</p>
 		</div>
 	);
 });

package/src/molecules/LoadingScreen.tsx

@@ -1,4 +1,6 @@
 import { Loader2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { UI_I18N_NS, uiText } from '../i18n';
 
 export interface LoadingScreenProps {
 	message?: string;
@@ -7,14 +9,24 @@ export interface LoadingScreenProps {
 }
 
 export function LoadingScreen({
-	message = '加载中...',
+	message,
 	fullScreen = false,
 	className = '',
 }: LoadingScreenProps) {
+	const { t, i18n } = useTranslation();
+	// 文案解析链与 Modal / ThemeToggle 同构（语言问题审计 2026-10-13）：
+	// 原为硬编码中文默认，EN 站加载态裸露「加载中...」（trust 线上实测）。
+	const text =
+		message ??
+		t('loadingScreen.message', {
+			ns: UI_I18N_NS,
+			defaultValue: uiText(i18n.language, 'loadingScreen.message') ?? '加载中...',
+		});
+
 	const content = (
 		<div className="flex flex-col items-center justify-center gap-3">
 			<Loader2 size={fullScreen ? 32 : 24} className="animate-spin text-[var(--color-brand)]" />
-			<p className="text-sm text-[var(--color-text-secondary)]">{message}</p>
+			<p className="text-sm text-[var(--color-text-secondary)]">{text}</p>
 		</div>
 	);
 

package/src/molecules/Modal.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useId, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { UI_I18N_NS, uiText } from '../i18n';
@@ -128,8 +129,14 @@ export const Modal = React.memo(function Modal({
 
 	if (!open) return null;
 
-	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+	// ⚠ 必须 portal 到 document.body（第 63 轮补·四实测）：
+	// `position: fixed` 的包含块**不是视口**，而是最近的「有 transform / filter / backdrop-filter /
+	// will-change / contain」的祖先。站点的顶栏内层写了 `backdrop-blur-xl`，于是**在顶栏里打开的浮层**
+	// 的 inset-0 只覆盖顶栏那一小块 —— 实测 www.autional.cn 的搜索面板：遮罩是 976x135 的一条，
+	// 而不是整屏（用户的原话是「弹出一个黑色遮罩，怪怪的」）。
+	// 浮层属于顶层，不属于触发它的那棵子树；portal 是这条规则的结构性实现。
+	const content = (
+		<div className="fixed inset-0 z-50 flex items-center justify-center bg-scrim/50 p-4">
 			<div className="absolute inset-0" onClick={onClose} />
 			<div
 				ref={panelRef}
@@ -175,4 +182,8 @@ export const Modal = React.memo(function Modal({
 			</div>
 		</div>
 	);
+
+	// SSR / 测试环境没有 document 时退回就地渲染（portal 的目标不存在）
+	if (typeof document === 'undefined') return content;
+	return createPortal(content, document.body);
 });

package/src/molecules/Toast.tsx

@@ -8,6 +8,7 @@ import {
 	type ReactNode,
 } from 'react';
 import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+import { SOFT_BORDER, SOFT_TEXT } from '../internal/semantic-styles';
 
 export type ToastType = 'success' | 'error' | 'warning' | 'info';
 
@@ -42,11 +43,18 @@ const ICONS: Record<ToastType, typeof CheckCircle> = {
 	info: Info,
 };
 
+// 第 63 轮补·四：改用与 Alert / StatusBadge **同一份**语义配对（internal/semantic-styles.ts 的 SOFT_TEXT）。
+// 此前是「实底 + 白字」，实测对白字的对比度 ≈ success 2.6 / error 3.4 / warning 2.2 : 1 —— 三档都不达 AA 4.5:1，
+// 而 Toast 不在任何对比度目标页里，所以这条判据从未扫到它（「不是判据错了，是判据没扫到」）。
+// 换成 -soft / -text 配对后，对比度是设计系统建这一份配对时就验过的：
+// success 5.51 / warning 4.85 / danger 4.65 / info 6.70 —— 与 Alert 同一个来源，不再有第二套。
+// 底 + 字 + 边框三件都取自那一份配对（Alert / StatusBadge 同源）：软底若不带边框，
+// 贴在白卡上分不出边界 —— Alert 早就是这么做的，Toast 直接跟它对齐。
 const STYLES: Record<ToastType, string> = {
-	success: 'bg-success text-white',
-	error: 'bg-danger text-white',
-	warning: 'bg-warning text-white',
-	info: 'bg-[var(--color-brand)] text-white',
+	success: SOFT_TEXT.success + ' ' + SOFT_BORDER.success,
+	error: SOFT_TEXT.danger + ' ' + SOFT_BORDER.danger,
+	warning: SOFT_TEXT.warning + ' ' + SOFT_BORDER.warning,
+	info: SOFT_TEXT.info + ' ' + SOFT_BORDER.info,
 };
 
 export function ToastProvider({ children }: { children: ReactNode }) {
@@ -87,13 +95,13 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 					return (
 						<div
 							key={toast.id}
-							className={`pointer-events-auto flex items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium shadow-brand ${STYLES[toast.type]}`}
+							className={`pointer-events-auto flex items-center gap-2 rounded-xl border px-4 py-2.5 text-sm font-medium shadow-card ${STYLES[toast.type]}`}
 						>
 							<Icon className="h-4 w-4 shrink-0" />
 							<span className="flex-1">{toast.message}</span>
 							<button
 								onClick={() => removeToast(toast.id)}
-								className="ml-1 shrink-0 rounded-xs p-0.5 opacity-70 hover:bg-white/20 hover:opacity-100"
+								className="ml-1 shrink-0 rounded-xs p-0.5 opacity-70 hover:opacity-100"
 							>
 								<X className="h-3.5 w-3.5" />
 							</button>