@autional/ui 0.1.0-rc.53 → 0.1.0-rc.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autional/ui",
-  "version": "0.1.0-rc.53",
+  "version": "0.1.0-rc.55",
   "description": "Autional shared React component library (atoms + molecules) …the canonical home of the component layer",
   "license": "AGPL-3.0",
   "main": "./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.17"
+    "@autional/tokens": "0.1.0-rc.18"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/atoms/Avatar.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * 头像/图标位统一显示件。
+ *
+ * 承载两类资源：用户头像、应用/租户 logo。核心约束只有一条 ——
+ * **URL 打不开时必须回落**，而不是把浏览器的碎图标直接落屏：
+ * - 无 `src` → 直接渲染回落（文本首字母或自定义节点）；
+ * - `<img>` 触发 `onError`（404、DNS 失败、ORB 拦截等）→ 切到回落；
+ * - `src` 变化 → 重置失败标记（换头像后重新尝试）。
+ *
+ * 2026-10-28：此前四处 `<img src={avatarUrl}>` 都没有 onError，
+ * 一条死链（`avatars.autional.tianv.mobi/admin.png`）会在多个门户显示碎图。
+ */
+export interface AvatarProps {
+	/** 图片地址；空值或加载失败时回落 */
+	src?: string | null;
+	/** 回落文本：原样显示（通常已由调用方取好首字母） */
+	fallbackText?: string | null;
+	/** 自定义回落节点，优先于 fallbackText */
+	fallback?: React.ReactNode;
+	/** 像素尺寸，默认 32 */
+	size?: number;
+	/** 形状，默认圆形 */
+	shape?: 'circle' | 'square';
+	/** 图片替代文本；空串表示装饰性图片（同时标记 aria-hidden） */
+	alt?: string;
+	/** 根节点/图片追加类名（回落背景与文字色由调用方给） */
+	className?: string;
+	/** 仅图片追加类名 */
+	imgClassName?: string;
+	/** 图片 referrer 策略；第三方图片（OAuth 客户端图标、租户 Logo）应传 no-referrer */
+	referrerPolicy?: React.HTMLAttributeReferrerPolicy;
+}
+
+export function Avatar({
+	src,
+	fallbackText,
+	fallback,
+	size = 32,
+	shape = 'circle',
+	alt = '',
+	className = '',
+	imgClassName = '',
+	referrerPolicy,
+}: AvatarProps) {
+	const [broken, setBroken] = useState(false);
+
+	useEffect(() => {
+		setBroken(false);
+	}, [src]);
+
+	const radius = shape === 'circle' ? 'rounded-full' : 'rounded-md';
+	const deco = alt ? undefined : true;
+
+	if (src && !broken) {
+		return (
+			<img
+				src={src}
+				alt={alt}
+				aria-hidden={deco}
+				width={size}
+				height={size}
+				loading="lazy"
+				decoding="async"
+				referrerPolicy={referrerPolicy}
+				onError={() => setBroken(true)}
+				className={`shrink-0 object-cover ${radius} ${imgClassName} ${className}`}
+				style={{ width: size, height: size }}
+			/>
+		);
+	}
+
+	const content = fallback ?? (fallbackText ? fallbackText[0]!.toUpperCase() : '?');
+	return (
+		<span
+			aria-hidden={deco}
+			className={`flex shrink-0 items-center justify-center overflow-hidden font-medium ${radius} ${className}`}
+			style={{ width: size, height: size, fontSize: Math.max(10, Math.round(size * 0.4)) }}
+		>
+			{content}
+		</span>
+	);
+}
+
+export default Avatar;

package/src/atoms/index.ts

@@ -1,3 +1,5 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
 export { Button } from './Button';
 export type { ButtonProps } from './Button';
 export { Input } from './Input';

package/src/i18n/resources.ts

@@ -23,6 +23,7 @@ export const uiI18nResources: Record<'zh-CN' | 'en-US', Record<string, string>>
 		'portal.names.developer': '开发者门户',
 		'portal.names.landing': '门户首页',
 		'portal.names.brand': '品牌站',
+		'portal.names.secret': '密钥中心',
 		// 整页占位（控制台的 PageLoading / PageError）。文案与 admin 站点里原有的
 		// pageStatus.* 三键**逐字一致** —— 合并只许改实现，不许顺手改用户看到的字。
 		'modal.close': '关闭',
@@ -57,6 +58,7 @@ export const uiI18nResources: Record<'zh-CN' | 'en-US', Record<string, string>>
 		'portal.names.developer': 'Developer Portal',
 		'portal.names.landing': 'Home',
 		'portal.names.brand': 'Brand Site',
+		'portal.names.secret': 'Secret Center',
 		'modal.close': 'Close',
 		'pageStatus.loading': 'Loading...',
 		'pageStatus.loadError': 'Data loading failed',

package/src/molecules/PortalSwitcher.tsx

@@ -6,6 +6,7 @@ import {
 	Code2,
 	Globe,
 	KeyRound,
+	KeySquare,
 	LayoutGrid,
 	LogIn,
 	Settings,
@@ -53,6 +54,7 @@ const DEFAULT_PORTAL_ICONS: Record<string, React.ComponentType<{ className?: str
 	platform: Settings,
 	developer: Code2,
 	landing: Globe,
+	secret: KeySquare,
 };
 
 export function PortalSwitcher({

package/src/molecules/UserMenu.tsx

@@ -2,6 +2,7 @@ import type React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChevronDown, LogOut, Settings, UserRound } from 'lucide-react';
 import { useMenuButton } from '../internal/use-menu-button';
+import { Avatar } from '../atoms/Avatar';
 
 export interface UserMenuUserInfo {
 	displayName?: string | null;
@@ -93,13 +94,12 @@ export function UserMenu({
 				aria-label={text.userMenu}
 				className={`flex items-center gap-2 rounded-md p-1.5 transition-colors hover:bg-[var(--color-bg-muted)] ${className}`}
 			>
-				{user?.avatarUrl ? (
-					<img src={user.avatarUrl} alt="" className="h-8 w-8 rounded-full object-cover" />
-				) : (
-					<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--color-brand)] text-xs font-medium text-[var(--color-text-inverse)]">
-						{initials}
-					</span>
-				)}
+				<Avatar
+					src={user?.avatarUrl}
+					fallbackText={initials}
+					size={32}
+					className="bg-[var(--color-brand)] text-xs font-medium text-[var(--color-text-inverse)]"
+				/>
 				<span
 					className={`max-w-[10rem] truncate text-sm text-[var(--color-text-primary)] ${nameClassName}`}
 				>