Develop (#74)
* feat: 生成成功改为 toast 提示 * refactor: 数据预览改为显示示例数据，简化组件逻辑 * fix: 非必填字段预览显示 null * fix: 修复空值率与必填状态的逻辑 * fix: 切换为非必填时默认空值率 100% * feat: 字段编辑弹窗添加「完成」按钮 去除关闭按钮，添加取消按钮 * refactor: 删除未使用的 defaultNullRate 功能 * feat: 优化规则管理功能 * fix: 更新 features 测试断言以匹配新增的 testDataGenerator * refactor: 将 formatFileSize 重命名为 formatBytes 并移至通用工具模块 * refactor: 使用 Label 组件替换原生 label 元素，并在 DecodeResultPaper 中引入 Input 组件 * refactor: 规范化页面组件目录结构 * refactor(JsonTools): 规范化页面组件目录结构 * refactor(StorageCleaner): 规范化页面组件目录结构 * refactor(Timestamp): 规范化页面组件目录结构 * refactor(i18n): 移除 chrome.i18n 国际化，统一使用中文硬编码 * refactor(AppRoot): 移除 RouterProvider 组件，直接渲染子组件 * fix(RouterProvider): 将 goBack 重命名为 goHome，修复跨窗同步 merge 不一致 * fix(ThemeModeProvider): 修复主题快照同步与首屏闪烁问题 * refactor: 将 UI 文案改为中文并优化相关逻辑 * refactor: 清理代码注释并优化组件结构 * feat(Dashboard): 重构仪表板功能组件和逻辑 * refactor: 更新功能键名称并移除 README 文件 * refactor: 重构 TopBar 组件并更新项目结构 * feat(TopBar): 添加搜索功能组件并优化结构 * refactor: 统一使用 Button 组件替换原有 button 元素 * feat: 添加 EmptyPlaceholder 组件并更新相关页面 * feat(TextStatistics): 引入 StatCard 组件以优化统计信息展示 * feat(Timestamp): 重构时间戳转换功能，新增 ConverterForm 组件 * feat(Jwt): 重构 JWT 组件，新增常量和结果视图 * refactor(RightClickRestorer): 用状态配置表简化页面 UI 结构 * fix(business): 修复 skewedRandom 函数中的数学计算错误 * refactor(ImageUploader): 移除预览 URL 相关逻辑并简化粘贴事件处理 * feat(TestDataGenerator): 更新规则编辑提示和警告显示逻辑 * refactor(CopyButton.test): 移除冗余测试用例 * refactor(RouterProvider, chromeStorage, useContextMenuData): 更新存储获取逻辑以移除默认值参数 * refactor(代码重复): 抽取共享工具函数与 UI 组件，消除多处重复实现 * fix(RouterProvider): 修复初始加载状态逻辑，确保在加载前不覆盖 chrome.storage * feat(TopBar): 添加搜索框快捷键提示功能及相关测试 * refactor(StorageCleaner): 移动 isRestrictedUrl 函数到独立模块并更新相关引用 * fix(StorageCleaner): 修复 IndexedDB 清理竞态、部分成功计数与刷新后状态同步 * fix: 修复路由初始化竞态、存储状态静默覆盖与存储清理误删 * refactor: 统一中文文案并简化组件结构，提升代码可读性 * refactor: 更新 Worker 消息类型以支持生成任务 ID * fix: 修复 ruleStorage 写入失败处理与 CopyButton 成功态样式
This commit is contained in:
LingandRX
@@ -0,0 +1,115 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
formatJson,
|
||||
type JsonFormatOptions,
|
||||
type JsonFormatResult,
|
||||
validateJson,
|
||||
} from '@/utils/jsonFormatter';
|
||||
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import JsonResultPanel from './JsonResultPanel';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
export default function JsonFormatSection() {
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
const [indentSize, setIndentSize] = useState<number>(2);
|
||||
const [sortKeys, setSortKeys] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(input);
|
||||
}, 250);
|
||||
return () => clearTimeout(handle);
|
||||
}, [input]);
|
||||
|
||||
const error = useMemo(() => {
|
||||
return validateJson(debouncedInput);
|
||||
}, [debouncedInput]);
|
||||
|
||||
const { result, runtimeError } = useMemo((): {
|
||||
result: JsonFormatResult | null;
|
||||
runtimeError: string | null;
|
||||
} => {
|
||||
const trimmed = debouncedInput.trim();
|
||||
if (!trimmed || error) return { result: null, runtimeError: null };
|
||||
|
||||
try {
|
||||
const options: JsonFormatOptions = { indentSize, sortKeys };
|
||||
return { result: formatJson(debouncedInput, options), runtimeError: null };
|
||||
} catch (e) {
|
||||
return {
|
||||
result: null,
|
||||
runtimeError: e instanceof SyntaxError ? e.message : String(e),
|
||||
};
|
||||
}
|
||||
}, [debouncedInput, error, indentSize, sortKeys]);
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-4">
|
||||
<div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60">
|
||||
<div className="flex gap-4 items-center w-full">
|
||||
<div className="flex gap-2 items-center shrink-0 select-none">
|
||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||
缩进
|
||||
</span>
|
||||
<SwitchButtonGroup
|
||||
value={indentSize}
|
||||
onChange={(v) => setIndentSize(Number(v))}
|
||||
options={[2, 4, 6, 8].map((size) => ({ value: size, label: String(size) }))}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-4 w-px bg-border/60" />
|
||||
|
||||
<div
|
||||
onClick={() => setSortKeys(!sortKeys)}
|
||||
className="flex items-center gap-2 cursor-pointer select-none group py-1"
|
||||
>
|
||||
<Checkbox
|
||||
id="sort-keys-checkbox"
|
||||
checked={sortKeys}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onCheckedChange={(checked) => setSortKeys(checked === true)}
|
||||
className="h-3.5 w-3.5 rounded border-input data-[state=checked]:bg-primary shadow-sm"
|
||||
/>
|
||||
<Label
|
||||
htmlFor="sort-keys-checkbox"
|
||||
className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground"
|
||||
>
|
||||
键名排序
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TextInputArea
|
||||
placeholder="输入需要格式化的 JSON..."
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
externalError={error || runtimeError || undefined}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
minRows={8}
|
||||
maxRows={15}
|
||||
onClear={() => setInput('')}
|
||||
/>
|
||||
|
||||
{result?.formatted ? (
|
||||
<JsonResultPanel
|
||||
title="格式化结果"
|
||||
content={result.formatted}
|
||||
originalBytes={result.originalBytes}
|
||||
outputBytes={result.formattedBytes}
|
||||
/>
|
||||
) : (
|
||||
<EmptyPlaceholder>
|
||||
{error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
|
||||
</EmptyPlaceholder>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user