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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@autional/ui",
-  "version": "0.1.0-rc.48",
-  "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.16"
+    "@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/ConfirmDialog.tsx

@@ -1,6 +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;
@@ -32,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();
@@ -69,7 +81,7 @@ export const ConfirmDialog = React.memo(function ConfirmDialog({
 				<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>
@@ -89,13 +101,13 @@ 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>

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>
 	);