# magictool

**Repository Path**: blake365/magictool

## Basic Information

- **Project Name**: magictool
- **Description**: Made in AI 小工具：JSON 格式化，json中的数组转表格，可下载excel
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-15
- **Last Updated**: 2025-06-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JSON格式化工具

一个基于Electron开发的JSON格式化和数组数据表格显示工具。

## 原始需求
1. 使用electron 开发，本机已安装相关依赖
2. 实现一个本地窗口程序
3. 程序的功能如下：
	- 提供一个文本框，输入JSON格式的数据
	- 另外一个文本框，对上面输入的JSON做实时的格式化，使用树状结构，可以用加减号打开和收起
	- 格式化的json中，如果有有数组，可以被选中，选中后，在一个表格中显示这个数组的内容
	- 表格内容可以被下载成excel

## 功能特性

- **JSON输入与实时格式化**: 在左侧文本框输入JSON数据，右侧实时显示格式化的树状结构
- **树状结构显示**: JSON数据以可折叠的树状结构显示，支持展开/收起操作
- **数组数据表格化**: 点击树状结构中的数组，可在底部表格中查看数组内容
- **Excel导出功能**: 表格数据可一键导出为Excel文件
- **美观的现代化界面**: 采用渐变背景和毛玻璃效果，提供优秀的用户体验

## 安装和运行

### 前提条件
- Node.js (建议版本 16 或以上)
- npm 或 yarn

### 安装依赖
```bash
npm install
```

### 运行应用程序
```bash
# 开发模式运行 (会打开开发者工具)
npm run dev

# 正常模式运行
npm start
```

### 构建应用程序
```bash
npm run build
```

## 使用方法

1. **输入JSON数据**: 在左侧文本框中输入或粘贴JSON格式的数据
2. **查看树状结构**: 右侧会实时显示格式化后的JSON树状结构
3. **折叠/展开节点**: 点击树状结构中的+/-按钮来折叠或展开节点
4. **选择数组数据**: 点击绿色高亮的数组项，底部会显示该数组的表格视图
5. **导出Excel**: 在表格视图中点击"导出Excel"按钮，将数据保存为Excel文件

## 快捷键

- `Ctrl + Enter`: 格式化JSON输入

## 示例JSON数据

```json
{
  "users": [
    {
      "name": "张三",
      "age": 25,
      "email": "zhangsan@example.com",
      "skills": ["JavaScript", "Python", "React"]
    },
    {
      "name": "李四",
      "age": 30,
      "email": "lisi@example.com",
      "skills": ["Java", "Spring", "MySQL"]
    }
  ],
  "products": [
    {
      "id": 1,
      "name": "笔记本电脑",
      "price": 5999.99,
      "inStock": true
    },
    {
      "id": 2,
      "name": "无线鼠标",
      "price": 199.99,
      "inStock": false
    }
  ]
}
```

## 技术栈

- **Electron**: 跨平台桌面应用程序框架
- **HTML/CSS/JavaScript**: 前端技术
- **SheetJS (xlsx)**: Excel文件处理库
- **Font Awesome**: 图标库

## 项目结构

```
├── main.js          # Electron主进程文件
├── index.html       # 应用程序主页面
├── styles.css       # 样式文件
├── app.js          # 应用程序逻辑
├── package.json    # 项目配置和依赖
└── README.md       # 项目说明文档
```

## 开发说明

- 应用程序使用ES6+语法编写
- 支持响应式设计，适配不同屏幕尺寸
- 使用防抖技术优化实时格式化性能
- 支持深层嵌套的JSON结构

## 许可证

MIT License