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
@@ -1,6 +1,7 @@
import React, { useEffect, useMemo, useState } from 'react';
import { formatBytes } from '@/utils/format';
import { CopyButton } from '@/components/CopyButton';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import TextInputArea from '@/components/TextInputArea';
import { validateJson } from '@/utils/jsonFormatter';
import { cn } from '@/lib/utils';
@@ -132,11 +133,9 @@ export default function JsonConvertSection({
</div>
</div>
) : (
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
{error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
</p>
</div>
<EmptyPlaceholder>
{error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
</EmptyPlaceholder>
)}
</div>
);
@@ -7,6 +7,7 @@ import {
} from '@/utils/jsonFormatter';
import { formatBytes } from '@/utils/format';
import { CopyButton } from '@/components/CopyButton';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
import TextInputArea from '@/components/TextInputArea';
import { Checkbox } from '@/components/ui/checkbox';
@@ -148,12 +149,9 @@ export default function JsonFormatSection() {
</div>
</div>
) : (
/* 空状态指示引导区 */
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
{error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
</p>
</div>
<EmptyPlaceholder>
{error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
</EmptyPlaceholder>
)}
</div>
);
+6 -7
View File
@@ -4,6 +4,7 @@ import DiffNavigator from './components/DiffNavigator';
import JsonFormatSection from './components/JsonFormatSection';
import JsonConvertSection from './components/JsonConvertSection';
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import { useJsonTools } from './useJsonTools';
import type { JsonToolsPageMode } from '@/types/storage';
import type { ViewMode } from './types';
@@ -95,13 +96,11 @@ export default function Index() {
<DiffResult result={diffResult} viewMode={viewMode} activePath={activePath} />
</div>
) : (
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[140px]">
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[260px] leading-relaxed">
{leftError || rightError
? '请修正上方 JSON 的语法错误以开启实时流式比对'
: '输入两侧 JSON 后点击比较'}
</p>
</div>
<EmptyPlaceholder className="min-h-[140px]" messageClassName="max-w-[260px]">
{leftError || rightError
? '请修正上方 JSON 的语法错误以开启实时流式比对'
: '输入两侧 JSON 后点击比较'}
</EmptyPlaceholder>
)}
</div>
) : pageMode === 'format' ? (