PrettyTree 是一个用于美化和可视化 JSON、CSS、XML、HTML 等压缩信息的 Web 应用程序。它使用 React、TypeScript 和 Tailwind CSS 构建，提供了一个用户友好的界面，将压缩的数据转换为格式化的结构，并支持以树形视图进行可视化展示。

1. 多种格式支持：支持 JSON、CSS、XML/HTML 等格式的格式化
2. 可视化展示：提供结构图（Graph View）和代码视图（Code View）
3. 多语言界面：支持中文和英文界面切换
4. 搜索功能：在结构化数据中搜索特定节点
5. 编辑模式：允许直接编辑输出内容
6. 可配置选项：提供格式化选项（缩进、属性排序等）
7. 双击复制：在图形视图中双击节点复制内容

• 前端框架: React 19
• 语言: TypeScript
• 样式: Tailwind CSS, CSS
• 构建工具: Vite
• 开发服务器: Vite

• src/main.tsx：主要的 React 应用程序组件，包含所有核心功能
• 解析引擎：包含 JSON、CSS、XML 的解析和格式化逻辑
• 图形引擎：使用 SVG 实现结构图可视化
• 搜索系统：支持在结构化数据中进行搜索

1. 输入面板：左侧用于输入原始内容
2. 输出/可视化面板：右侧显示格式化后的内容或结构图
3. 设置侧边栏：可配置格式化选项
4. 搜索栏：用于在数据结构中搜索

• npm run dev - 启动开发服务器
• npm run build - 构建生产版本
• npm run preview - 预览生产构建

• 使用 TypeScript 进行类型检查
• 使用 Tailwind CSS 进行样式设计
• 使用 Prettier 和 ESLint 维护代码格式

1. 使用 TypeScript 编写类型安全的代码
2. 遵循 React 最佳实践
3. 在 TRANSLATIONS 对象中添加新的国际化文本
4. 保持代码的可读性和可维护性