[优化] 更新 InlineMessage 组件,支持动态反馈和静态警告显示

This commit is contained in:
ryan
2026-06-01 10:45:19 +08:00
parent 65f899d334
commit fd745d33cb
@@ -2,9 +2,18 @@
import { useEffect } from 'react';
import { toast } from 'sonner';
import { cn } from '@/lib/utils/cn';
type InlineMessageTone = 'info' | 'success' | 'danger';
const toneClasses: Record<InlineMessageTone, string> = {
info: 'border-[var(--status-info-border)] bg-[var(--status-info-soft)] text-[var(--status-info-foreground)]',
success:
'border-[var(--status-success-border)] bg-[var(--status-success-soft)] text-[var(--status-success-foreground)]',
danger:
'border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]',
};
interface InlineMessageProps {
tone?: InlineMessageTone;
message: string;
@@ -15,10 +24,12 @@ interface InlineMessageProps {
export function InlineMessage({
tone = 'info',
message,
className,
onClear,
}: InlineMessageProps) {
useEffect(() => {
if (!message) return;
// Only trigger toast if onClear is provided (dynamic feedback)
if (!onClear || !message) return;
const options = {
position: 'bottom-right' as const,
@@ -32,13 +43,27 @@ export function InlineMessage({
toast(message, options);
}
if (onClear) {
const timer = setTimeout(() => {
onClear();
}, 0);
return () => clearTimeout(timer);
}
const timer = setTimeout(() => {
onClear();
}, 0);
return () => clearTimeout(timer);
}, [tone, message, onClear]);
return null;
// If onClear is provided, this is a toast feedback notice, so render nothing inline
if (onClear) {
return null;
}
// Otherwise, render as a static/persistent inline alert banner (original behavior)
return (
<div
className={cn(
'rounded-2xl border px-4 py-3 text-sm leading-6',
toneClasses[tone],
className,
)}
>
{message}
</div>
);
}