feat: 添加 EmptyPlaceholder 组件并更新相关页面

- 新增 EmptyPlaceholder 组件,用于统一处理空状态提示,提升用户体验。
- 更新多个页面(JsonTools、Jwt、QrCode、Timestamp)以使用 EmptyPlaceholder 组件,简化空状态的实现。
- 更新 README.md,添加 EmptyPlaceholder 组件的说明。
This commit is contained in:
雨霖铃
2026-06-19 10:16:59 +08:00
parent 3ab7194501
commit ca0143f3bd
11 changed files with 115 additions and 42 deletions
+30
View File
@@ -0,0 +1,30 @@
import React from 'react';
import { cn } from '@/lib/utils';
export interface EmptyPlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
messageClassName?: string;
}
const CONTAINER_CLASSES =
'rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center select-none p-8 min-h-[120px]';
const MESSAGE_CLASSES =
'text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed';
export default function EmptyPlaceholder({
children,
className,
messageClassName,
...props
}: EmptyPlaceholderProps) {
return (
<div className={cn(CONTAINER_CLASSES, className)} {...props}>
{typeof children === 'string' || typeof children === 'number' ? (
<p className={cn(MESSAGE_CLASSES, messageClassName)}>{children}</p>
) : (
children
)}
</div>
);
}