# JSON Workbench

**Repository Path**: 9658065/json-workbench

## Basic Information

- **Project Name**: JSON Workbench
- **Description**: json转表格
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-25
- **Last Updated**: 2026-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JSON Workbench

基于浏览器的 JSON 数据工作台，提供树形结构浏览、JSONPath 查询、表格展示与多格式导出功能。

## Features

- **JSON 导入** - 支持粘贴 JSON 文本、拖拽文件或点击选择文件导入
- **树形结构浏览** - 使用虚拟滚动树组件展示 JSON 层级，支持对象、数组、基本类型节点
- **点击节点查看表格** - 点击树节点后，以表格形式展示该节点内容
- **JSONPath-Plus 查询** - 支持标准 JSONPath 语法筛选数据，例如 `$.users[?(@.score > 90)]`
- **表格导出** - 支持将当前表格数据导出为 CSV、XLSX、JSON 三种格式
- **虚拟滚动** - 使用 Element Plus V2 组件（el-tree-v2 / el-table-v2），轻松应对大数据量
- **现代简约 UI** - 基于 Element Plus + UnoCSS，响应式布局

## Tech Stack

- [Nuxt 4](https://nuxt.com/) - SSR、文件路由、组件自动导入
- [Vue 3](https://vuejs.org/) + TypeScript - `<script setup>` 语法
- [Element Plus](https://element-plus.org/) - UI 组件库
- [jsonpath-plus](https://github.com/JSONPath-Plus/JSONPath) - JSONPath 查询
- [xlsx](https://github.com/SheetJS/sheetjs) - Excel 导出
- [UnoCSS](https://unocss.dev/) - 原子 CSS 引擎
- [VueUse](https://vueuse.org/) - 组合式工具集

## Development

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 类型检查
pnpm typecheck

# 代码检查
pnpm lint
```

## Usage

1. 在左侧 JSON Source 区域粘贴 JSON 文本，或拖拽 JSON 文件到输入框
2. 点击 **Parse JSON** 解析，左侧 Structure 树将展示 JSON 层级
3. 点击树节点，右侧表格会展示该节点内容
4. 在 Query Rule 输入框中使用 JSONPath-Plus 语法筛选数据，点击 Apply 应用
5. 点击右上角 Export 按钮，可将当前表格导出为 CSV、XLSX 或 JSON

## License

MIT