feat: 生成成功改为 toast 提示

- 使用 sonner toast 显示成功提示
- 简化提示:生成完成 + 数据条数
- 仅在失败或有警告时显示结果面板
- 使用 useRef 记录已触发的 result
- 仅在新 result 时触发 toast
This commit is contained in:
雨霖铃
2026-06-06 10:57:37 +08:00
parent a374bf456d
commit 31b6edf06b
2 changed files with 24 additions and 1 deletions
+8
View File
@@ -1067,6 +1067,14 @@
"message": "生成成功",
"description": "Translation key: testDataGenerator_success"
},
"testDataGenerator_generateSuccess": {
"message": "生成完成",
"description": "Translation key: testDataGenerator_generateSuccess"
},
"testDataGenerator_records": {
"message": "条数据",
"description": "Translation key: testDataGenerator_records"
},
"testDataGenerator_partialSuccess": {
"message": "部分成功",
"description": "Translation key: testDataGenerator_partialSuccess"
+16 -1
View File
@@ -10,6 +10,7 @@ import { useGenerator } from './hooks/useGenerator';
import { getGeneratorById } from '@/lib/generators';
import type { FieldConfig, GenerateResult } from '@/types/testDataGenerator';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { toast } from 'sonner';
// 生成唯一 ID 的辅助函数
function generateId(): string {
@@ -47,6 +48,7 @@ export default function TestDataGeneratorPage() {
// 实时预览(防抖)
const [previewResult, setPreviewResult] = useState<GenerateResult | null>(null);
const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const lastToastResultRef = useRef<GenerateResult | null>(null);
// 配置变更时生成预览数据(防抖 300ms)
useEffect(() => {
@@ -98,6 +100,16 @@ export default function TestDataGeneratorPage() {
};
}, [fields, count]);
// 生成完成时显示 toast 提示(避免重复触发)
useEffect(() => {
if (result?.success && result.stats && result !== lastToastResultRef.current) {
lastToastResultRef.current = result;
toast.success(t('testDataGenerator_generateSuccess'), {
description: `${result.stats.total} ${t('testDataGenerator_records')}`,
});
}
}, [result, t]);
// 添加新字段
const handleAddField = useCallback(() => {
if (fields.length >= MAX_FIELDS) return;
@@ -267,7 +279,10 @@ export default function TestDataGeneratorPage() {
{/* 右侧面板 - 数据预览和结果 */}
<div className="lg:col-span-2 space-y-4">
{/* 结果状态 */}
{(result || error) && (
{/* 仅在失败或有警告时显示结果面板 */}
{((result && !result.success) ||
(result?.warnings && result.warnings.length > 0) ||
error) && (
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
{error ? (
<div className="flex items-center gap-2 text-destructive">