kdletters
c5200c7d45
## 变更内容 - 新增基于 shadcn open-code 模式的共享 UI canonical 组件、样式与导出。 - 新增 `/components` 共享组件展示页，并覆盖平台组件、Token、状态和移动端布局。 - 补齐平台展示页的筛选、排序、上传预览、标签、开关和异步状态交互。 - 修复排序导致预览主题变化、筛选弹窗误关闭和入口状态不更新的问题。 - 同步网站与客户端构建别名、依赖、路由测试和项目文档。 ## 验证 - `npm run test -- src/components/shared-components/SharedComponentsShowcasePage.test.tsx` - `npm run typecheck` - `npm run check:encoding` - `npm run build:raw` - `git diff --check` - pre-push 门禁通过 Reviewed-on: http://192.168.35.82/git/GenarrativeAI/Genarrative/pulls/202 Co-authored-by: kdletters <kdletters@qq.com> Co-committed-by: kdletters <kdletters@qq.com>
104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from 'react';
|
|
|
|
export type PlatformRuntimeStatusTone =
|
|
| 'error'
|
|
| 'success'
|
|
| 'info'
|
|
| 'warning'
|
|
| 'neutral';
|
|
export type PlatformRuntimeStatusSurface = 'light' | 'dark' | 'solid';
|
|
export type PlatformRuntimeStatusSize = 'xs' | 'sm' | 'md';
|
|
export type PlatformRuntimeStatusShape = 'pill' | 'rounded';
|
|
|
|
export type PlatformRuntimeStatusToastProps = Omit<
|
|
HTMLAttributes<HTMLDivElement>,
|
|
'children'
|
|
> & {
|
|
tone: PlatformRuntimeStatusTone;
|
|
surface?: PlatformRuntimeStatusSurface;
|
|
size?: PlatformRuntimeStatusSize;
|
|
shape?: PlatformRuntimeStatusShape;
|
|
children: ReactNode;
|
|
};
|
|
|
|
const PLATFORM_RUNTIME_STATUS_SURFACE_CLASS: Record<
|
|
PlatformRuntimeStatusSurface,
|
|
Record<PlatformRuntimeStatusTone, string>
|
|
> = {
|
|
light: {
|
|
error:
|
|
'border-white/70 bg-white/86 text-[var(--platform-button-danger-text)]',
|
|
success: 'border-white/70 bg-white/86 text-[var(--platform-success-text)]',
|
|
info: 'border-white/70 bg-white/86 text-[var(--platform-cool-text)]',
|
|
warning: 'border-white/70 bg-white/86 text-[var(--platform-warm-text)]',
|
|
neutral: 'border-white/70 bg-white/86 text-[var(--platform-text-base)]',
|
|
},
|
|
dark: {
|
|
error: 'border-rose-200/35 bg-rose-400/18 text-rose-50',
|
|
success: 'border-emerald-200/35 bg-emerald-400/18 text-emerald-50',
|
|
info: 'border-sky-200/30 bg-sky-400/16 text-sky-50',
|
|
warning: 'border-amber-200/35 bg-amber-400/18 text-amber-50',
|
|
neutral: 'border-white/15 bg-white/12 text-white/82',
|
|
},
|
|
solid: {
|
|
error: 'border-transparent bg-rose-600 text-white',
|
|
success: 'border-transparent bg-emerald-600 text-white',
|
|
info: 'border-transparent bg-sky-600 text-white',
|
|
warning: 'border-transparent bg-amber-500 text-amber-950',
|
|
neutral: 'border-transparent bg-slate-800 text-white',
|
|
},
|
|
};
|
|
|
|
const PLATFORM_RUNTIME_STATUS_SIZE_CLASS: Record<
|
|
PlatformRuntimeStatusSize,
|
|
string
|
|
> = {
|
|
xs: 'px-3 py-1 text-xs leading-5',
|
|
sm: 'px-3 py-2 text-sm leading-5',
|
|
md: 'px-4 py-3 text-sm leading-6',
|
|
};
|
|
|
|
const PLATFORM_RUNTIME_STATUS_SHAPE_CLASS: Record<
|
|
PlatformRuntimeStatusShape,
|
|
string
|
|
> = {
|
|
pill: 'rounded-full',
|
|
rounded: 'rounded-[1.2rem]',
|
|
};
|
|
|
|
/**
|
|
* 运行态 HUD 状态提示。
|
|
* 收口游戏内短错误、成功和反馈 chip，位置与玩法强品牌视觉仍由调用方控制。
|
|
*/
|
|
export function PlatformRuntimeStatusToast({
|
|
tone,
|
|
surface = 'light',
|
|
size = 'sm',
|
|
shape = 'pill',
|
|
children,
|
|
className,
|
|
role,
|
|
...divProps
|
|
}: PlatformRuntimeStatusToastProps) {
|
|
const ariaLive = divProps['aria-live'];
|
|
|
|
return (
|
|
<div
|
|
{...divProps}
|
|
role={role ?? (tone === 'error' ? 'alert' : 'status')}
|
|
aria-live={ariaLive ?? (tone === 'error' ? 'assertive' : 'polite')}
|
|
className={[
|
|
'platform-runtime-status-toast inline-flex max-w-full items-center justify-center gap-1.5 border text-center font-black shadow-sm backdrop-blur',
|
|
PLATFORM_RUNTIME_STATUS_SIZE_CLASS[size],
|
|
PLATFORM_RUNTIME_STATUS_SHAPE_CLASS[shape],
|
|
PLATFORM_RUNTIME_STATUS_SURFACE_CLASS[surface][tone],
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|