Skip to content

Commit 401baf3

Browse files
authored
Enhance README with project details and instructions
Added project introduction, features, usage instructions, and technology stack to README.
1 parent 5d3fb25 commit 401baf3

1 file changed

Lines changed: 51 additions & 1 deletion

File tree

README.md

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,51 @@
1-
# JSON-Tree-Viewer
1+
# JSON Tree Viewer - JSON 树形结构解析器
2+
3+
## 项目介绍
4+
一个轻量级、美观且功能完善的 JSON 树形结构解析器,支持文件上传、URL 拉取和直接输入三种方式导入 JSON 数据,并以可视化的树形结构展示,支持节点折叠/展开、路径复制和关键词搜索,适配移动端和桌面端。
5+
6+
## 功能特点
7+
- 📥 **多源导入**:支持文件上传、URL 拉取、直接输入三种 JSON 导入方式
8+
- 🌳 **树形可视化**:以层级树形结构展示 JSON 数据,清晰直观
9+
- 🔍 **实时搜索**:支持关键词搜索并高亮匹配节点
10+
- 📋 **路径复制**:一键复制任意节点的完整路径
11+
- 📱 **响应式设计**:完美适配桌面端和移动端
12+
- 🎨 **美观界面**:渐变风格 UI,优雅的交互动画
13+
- 🚀 **零依赖**:纯原生 HTML/CSS/JS 实现,无需任何框架
14+
15+
## 快速开始
16+
### 方式 1:直接使用
17+
1. 克隆本仓库
18+
```bash
19+
git clone https://github.com/EndlessPixel/JSON-Tree-Viewer.git
20+
```
21+
2. 打开 `index.html` 文件即可使用
22+
23+
### 方式 2:URL 自动加载(进阶)
24+
可以通过 URL 参数自动加载指定的 JSON 接口:
25+
```
26+
?url=https://api.example.com/data.json
27+
```
28+
29+
## 使用说明
30+
1. **选择导入方式**:文件上传 / URL 拉取 / 直接输入
31+
2. **导入 JSON 数据**
32+
- 文件上传:选择 `.json` 格式文件
33+
- URL 拉取:输入有效的 JSON 接口地址(需支持跨域)
34+
- 直接输入:粘贴或输入标准 JSON 文本
35+
3. **点击「导入并解析」** 按钮
36+
4. **交互操作**
37+
- 点击节点前的 `+/-` 按钮折叠/展开子节点
38+
- 悬停节点显示「复制」按钮,点击复制节点路径
39+
- 使用搜索框实时搜索关键词,匹配节点会高亮显示
40+
41+
## 截图展示
42+
<img width="1300" height="5643" alt="image" src="https://github.com/user-attachments/assets/2a1893e3-7cc6-44b9-be13-54bf973d385f" />
43+
44+
## 技术栈
45+
- HTML5 (语义化标签、响应式布局)
46+
- CSS3 (Flex 布局、渐变、动画、媒体查询)
47+
- Vanilla JavaScript (原生 JS,无框架依赖)
48+
49+
## 许可证
50+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
51+
本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

0 commit comments

Comments
 (0)