# JSONL文件阅读器

**Repository Path**: moewang0321/json-file-reader

## Basic Information

- **Project Name**: JSONL文件阅读器
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-02
- **Last Updated**: 2026-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# JSON 文件阅读器

一个基于 React + TypeScript + Vite 开发的 JSON 文件可视化阅读器，支持以树形结构展示 JSON 数据，并提供筛选、展开层级选择等功能。

## 功能特性

- **树形结构展示**：以可折叠的树形结构直观展示 JSON 数据
- **多层级展开控制**：支持设置默认展开层级（1-5层）
- **实时筛选**：支持根据关键词筛选 JSON 数据
- **值选择**：支持点击选择具体的值并查看其路径
- **Web Worker 解析**：使用 Web Worker 进行 JSON 解析，避免阻塞主线程
- **响应式设计**：基于 Tailwind CSS 的响应式布局

## 技术栈

- React 18
- TypeScript
- Vite
- Tailwind CSS
- Web Workers

## 快速开始

### 安装依赖

```bash
npm install
# 或
pnpm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

## 使用方法

1. 将 JSON 数据粘贴到应用中的输入区域
2. 使用筛选框输入关键词实时过滤数据
3. 通过展开层级选择器控制树的展开深度
4. 点击任意值可以查看其在 JSON 中的完整路径

## 项目结构

```
├── src/
│   ├── App.tsx          # 主应用组件，包含树形组件
│   ├── main.tsx         # 入口文件
│   ├── parser.worker.js # JSON 解析 Worker
│   └── index.css        # 全局样式
├── index.html           # HTML 入口
├── vite.config.ts       # Vite 配置
├── tailwind.config.js   # Tailwind 配置
└── package.json         # 项目依赖
```

## 许可证

MIT License