mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-09-30 14:26:36 +08:00
[优化] 更新 InlineMessage 组件,支持动态反馈和静态警告显示
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user