diff --git a/README-jsonview.md b/README-jsonview.md new file mode 100644 index 0000000..40f58ec --- /dev/null +++ b/README-jsonview.md @@ -0,0 +1,251 @@ +# JSON Viewer 桌面版 JSON 阅读器(Tauri + Vue 3 + TypeScript) + +一个跨平台桌面端 JSON 阅读 / 编辑工具,基于 **Tauri 2 + Vue 3 + TypeScript** 实现,专注于「**一眼看懂 JSON 结构,快速定位并编辑需要的字段**」。 + +### 界面预览 + +![JSON Viewer 界面预览](docs-jsonview/view.png) + +- 左侧:树形结构视图,按对象 / 数组分层展示,并显示子节点数量 +- 中间:原始文本视图,支持格式化 / 压缩、缩进风格切换(2 空格 / 4 空格 / Tab) +- 右侧:节点详情区(选中树节点后展示更多信息) +- 顶部工具栏:保存、格式化、压缩、缩进、主题切换、搜索(支持 Ctrl+F) +- 底部状态栏:当前文件状态(未打开 / 已修改)与 JSON 是否有效 + +### 主要特性 + +- 加载本地 JSON 文件(文件对话框 / 拖拽到窗口 / 右键“打开方式”) +- 树形结构查看 JSON,支持折叠/展开、子项计数提示,自动滚动到当前选中节点 +- JSON 格式化 / 压缩,一键切换缩进风格(2 空格 / 4 空格 / Tab),并记住用户偏好 +- 节点值编辑(字符串、数字、布尔、null),实时校验并给出报错位置 +- 原始 JSON 文本同步编辑与实时校验(错误行列直接高亮) +- 关键字搜索(键名/值),支持大小写敏感、上一条 / 下一条结果导航 +- 支持保存 / 另存为 JSON 文件,避免破坏原始数据 + +### 快速上手(作为使用者) + +1. 启动应用后,点击窗口左上方的 **“打开”** 按钮,或直接将 `.json` 文件拖拽进窗口 +2. 在左侧树中展开需要关注的节点,或按 `Ctrl+F` 搜索键名 / 值快速定位 +3. 双击节点值即可就地编辑;右侧原始文本和底部状态栏会实时反馈 JSON 是否有效 +4. 编辑完成后,点击工具栏的 **“保存”** 或 **“另存为”** 持久化到本地文件 + +--- + +## 环境要求 + +- Node.js ≥ 18 +- Rust 工具链(stable,支持 Tauri 2) +- 平台支持: + - Windows 10 及以上 + - macOS 10.15 及以上 + - 主流 Linux(如 Ubuntu、Fedora) + +> 如首次使用 Tauri,可参考官方文档安装系统依赖(如 Windows 上的 MSVC、WebView2 等)。 + +--- + +## 安装依赖 + +在项目根目录(`E:\Workspace\jsonview` 或你的克隆目录)执行: + +```bash +npm install +``` + +这会安装前端依赖(Vue / Vite / Pinia / Tauri CLI 等)。 + +--- + +## 开发模式运行(本地调试) + +开发模式会同时启动: + +- Vite 前端开发服务器(热更新) +- Tauri 桌面应用(加载 Vite 开发页面) + +在项目根目录执行: + +```bash +npm run tauri:dev +``` + +运行成功后会自动弹出桌面应用窗口,你可以: + +- 点击顶部工具栏的 **“打开”** 选择本地 `.json` 文件 +- 或直接将 `.json` 文件从资源管理器 / Finder 中拖拽到窗口中 + +> **重要**:必须用 `npm run tauri:dev` 或打包后的 exe 运行,**不要**用 `npm run dev`(仅 Web 预览,无“打开方式”、拖放、快捷键等桌面功能)。工具栏右侧 **“诊断”** 按钮可查看启动参数,用于排查“打开方式”是否传入路径。 + +### 开发时常用操作 + +- 修改 `src/` 下的前端代码会自动热更新(Tauri 窗口会自动刷新内容) +- 修改 `src-tauri/` 下的 Rust 代码后,Tauri 会重新编译并重启应用 + +--- + +## 打包构建(生成安装包 / 可执行文件) + +项目已经在 `src-tauri/tauri.conf.json` 中配置了应用名称、窗口大小和打包目标。 + +### 1. 仅构建前端(生成静态资源) + +如果你只想构建 Web 端静态资源(调试用),可以执行: + +```bash +npm run build:web +``` + +这会在 `dist/` 目录下生成前端打包产物。 + +### 2. 构建桌面应用安装包(推荐) + +标准的 Tauri 打包流程为: + +```bash +npm run build +``` + +该命令会执行: + +1. `vite build`:构建前端,输出到 `dist/` +2. `tauri build`:使用 `dist/` 中的前端资源,打包为桌面应用 + +打包完成后,生成的可执行文件 / 安装包会出现在: + +- **Windows**:`src-tauri/target/release/jsonview.exe`(可直接运行),以及 **NSIS 安装包** `src-tauri/target/release/bundle/nsis/JSON Viewer_0.1.0_x64-setup.exe` +- macOS:`src-tauri/target/release/bundle/dmg/` 或 `.app` +- Linux:`src-tauri/target/release/bundle/deb/`、`AppImage` 等 + +> **Windows 安装包说明**:构建时会先运行 `scripts/ensure-nsis-windows.ps1`,在 `src-tauri/target/.tauri/` 下预下载 NSIS 工具(含重试与较长超时),避免 Tauri 内置下载超时。安装包会生成在 `bundle/nsis/` 目录下。 + +> 如果你只想单独运行 Tauri 构建(已经手动执行过 `vite build`),也可以: +> +> ```bash +> npm run tauri:build +> ``` + +--- + +## 功能一览与使用说明 + +- **打开 JSON 文件** + - 点击工具栏“打开”按钮,选择 `.json` 文件 + - 或将 `.json` 文件拖拽到窗口,即可自动加载 +- **树形浏览与折叠** + - 左侧树视图展示 JSON 对象/数组结构 + - 点击 `+/-` 折叠/展开节点,折叠时会显示子节点数量 `(X 项)` +- **编辑节点值** + - 对字符串/数字/布尔/null 节点:双击值进入编辑模式 + - 输入合法 JSON 片段(如 `"hello"`、`123`、`true`、`null`),回车或失焦保存 + - 非法输入会提示错误并回退 +- **原始文本编辑与验证** + - 右侧“原始文本视图”可以直接编辑完整 JSON 文本 + - 实时使用 JSON 解析校验,错误信息会显示在编辑器头部与状态栏 +- **缩进设置** + - 工具栏提供:`2 空格 / 4 空格 / Tab` + - 切换后会即时重新格式化当前 JSON 显示 + - 用户选择会保存在本地,下一次启动沿用 +- **搜索与导航** + - 工具栏右侧输入搜索词并回车,可在键名和字符串值中匹配 + - “上一条 / 下一条”在所有匹配项之间循环跳转 + - 每次跳转会自动展开相关节点并滚动到可视区域 + +--- + +## 目录结构(简要) + +```text +jsonview/ + package.json # 项目配置与脚本 + tsconfig.json # TypeScript 配置 + vite.config.ts # Vite 配置 + index.html # 前端入口 HTML + + src/ + main.ts # Vue 入口 + App.vue # 页面布局与 Tauri 拖拽处理 + styles.css # 全局样式 + + types/json.ts # JsonValue / JsonNode 等类型定义 + services/ + jsonParser.ts # JSON 解析与验证、树构建 + formatter.ts # 缩进与格式化 + searchService.ts # 搜索逻辑 + fileService.ts # 调用 Tauri 命令操作文件 + store/ + useJsonStore.ts # Pinia Store:文件状态、缩进、验证、搜索等 + components/ + Toolbar.vue + SearchPanel.vue + JsonTreeView.vue + JsonNode.vue + JsonEditorPanel.vue + StatusBar.vue + + src-tauri/ + Cargo.toml # Rust / Tauri 依赖配置 + build.rs # Tauri 构建脚本 + tauri.conf.json # Tauri 应用配置(窗口、打包等) + src/ + main.rs # Tauri 入口,open/save JSON 命令实现 +``` + +--- + +## 创建 GitHub 仓库并启用自动构建 + +### 1. 初始化 Git(若尚未初始化) + +```bash +git init +git add . +git commit -m "Initial commit" +``` + +### 2. 用 GitHub CLI 创建仓库并推送(推荐) + +1. 安装 [GitHub CLI](https://cli.github.com/) 并登录:`gh auth login` +2. 在项目根目录执行(仓库会创建在当前登录的 GitHub 账号下): + +```powershell +# Windows PowerShell(公开仓库,仓库名 jsonview) +.\scripts\create-github-repo.ps1 -RepoName jsonview -IsPrivate $false + +# 或私有仓库 +.\scripts\create-github-repo.ps1 -RepoName jsonview -IsPrivate $true +``` + +Linux/macOS 可用: + +```bash +chmod +x scripts/create-github-repo.sh +./scripts/create-github-repo.sh jsonview # 公开 +./scripts/create-github-repo.sh jsonview private # 私有 +``` + +若不用脚本,可手动执行: + +```bash +gh repo create jsonview --public --source . --remote origin --push --description "JSON Viewer - 跨平台 JSON 桌面阅读/编辑工具 (Tauri + Vue 3)" +``` + +### 3. 启用自动构建(GitHub Actions) + +- 仓库已包含 `.github/workflows/build.yml`,会在以下情况自动构建并生成 **Draft Release**: + - 推送到 `main` 或 `release` 分支 + - 或在 Actions 页手动触发(workflow_dispatch) +- 构建产物:Windows (x64)、macOS (Intel + Apple Silicon)、Linux (x64) 的安装包/可执行文件,会上传到该次运行的 Release 草稿中。 +- 若提示权限不足:在仓库 **Settings → Actions → General** 中,将 **Workflow permissions** 设为 **Read and write permissions**。 + +### 4. 发布版本 + +- 每次自动构建会创建带版本号的 Tag(如 `v0.1.0`)和 Draft Release。 +- 在 **Releases** 页打开对应草稿,检查附件后点击 **Publish release** 即可对外发布。 + +--- + +## 开发建议 + +- 如果你要扩展功能(如:添加/删除节点、虚拟滚动、大文件优化等),推荐从 `src/store/useJsonStore.ts` 和 `src/components/JsonNode.vue` 入手。 +- 如要调整 UI 风格,可以在 `styles.css` 中统一修改样式,或引入你熟悉的 Vue UI 组件库(如 Naive UI、Element Plus 等)。 + diff --git a/docs-jsonview/Untitled b/docs-jsonview/Untitled new file mode 100644 index 0000000..2d45393 --- /dev/null +++ b/docs-jsonview/Untitled @@ -0,0 +1 @@ +docs-jsonview \ No newline at end of file diff --git a/docs-jsonview/view.png b/docs-jsonview/view.png new file mode 100644 index 0000000..1c40b55 Binary files /dev/null and b/docs-jsonview/view.png differ diff --git a/easyshell.html b/easyshell.html index de6639d..5ba917b 100644 --- a/easyshell.html +++ b/easyshell.html @@ -10,7 +10,9 @@ - + @@ -37,9 +39,11 @@ PHPer EasyShell EasySQL + JSON Viewer - + GitHub @@ -66,13 +70,14 @@

赛博朋克风格的跨平台远程 Shell 管理终端

- 支持 Windows · - macOS · - Linux · + 支持 Windows · + macOS · + Linux · Android 多平台运行

- + @@ -82,7 +87,8 @@ - + 查看源码 @@ -286,7 +292,8 @@

准备好连接你的服务器了吗?

下载 EasyShell,开启赛博朋克式的远程管理体验

- + @@ -294,9 +301,11 @@ 免费下载 - + - + Star on GitHub @@ -318,6 +327,7 @@ 首页 PHPer EasySQL + JSON Viewer GitHub 反馈问题
@@ -329,5 +339,4 @@ - - + \ No newline at end of file diff --git a/easysql.html b/easysql.html index 19e6629..ff6a1d2 100644 --- a/easysql.html +++ b/easysql.html @@ -10,7 +10,9 @@ - + @@ -36,9 +38,11 @@ PHPer EasyShell EasySQL + JSON Viewer - + GitHub @@ -65,10 +69,10 @@

简洁高效的数据库管理工具

- 支持 MySQL · - PostgreSQL · - SQLite · - MongoDB · + 支持 MySQL · + PostgreSQL · + SQLite · + MongoDB · Redis 等多种数据库

@@ -82,7 +86,8 @@ - + 查看源码 @@ -359,7 +364,8 @@ - + Star on GitHub @@ -381,6 +387,7 @@ 首页 PHPer EasyShell + JSON Viewer GitHub 反馈问题
@@ -392,5 +399,4 @@ - - + \ No newline at end of file diff --git a/index.html b/index.html index 4f84125..fa9d851 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,10 @@ - Ethan的开发工具集 - PHPer & EasyShell - - + Ethan的开发工具集 - PHPer / EasyShell / EasySQL / JSON Viewer + + @@ -37,6 +38,7 @@ PHPer EasyShell EasySQL + JSON Viewer
-

三款精心打造的开发者工具

+

多款精心打造的开发者工具

每一款都专注于解决特定的开发痛点

@@ -324,6 +326,75 @@
+ + +
+
+
+ JSON Viewer +
+

JSON Viewer

+ 跨平台 +
+
+

桌面版 JSON 阅读 / 编辑器

+

+ 基于 Tauri 2 + Vue 3 + TypeScript 的轻量级 JSON 工具, + 提供树形结构视图、原始文本实时校验、关键字搜索、格式化 / 压缩与就地编辑等能力, + 让你在调试接口、排查配置时一眼看懂复杂 JSON。 +

+
+
+ 🌲 + 树形结构视图 +
+
+ 📝 + 实时语法校验 +
+
+ 🔍 + Ctrl+F 搜索 +
+
+ 💾 + 打开 / 保存本地文件 +
+
+
+ Tauri 2 + Vue 3 + TypeScript +
+
+
+
+
+
+
+ +
+ JSON Viewer +
+ JSON Viewer 界面 +
+
+
@@ -349,36 +420,45 @@ EasySQL EasySQL +
+ JSON Viewer + JSON Viewer +
主要用途
本地开发环境管理
远程服务器管理
数据库管理
+
JSON 文件阅读 / 编辑
支持平台
Windows
Win/Mac/Linux/Android
Win/Mac/Linux
+
Win/Mac/Linux
UI 风格
现代简约
赛博朋克
清新浅色
+
深色主题 + 三栏布局
技术栈
Vue + Electron
React + Electron/Capacitor
React + Electron
+
Tauri + Vue + TypeScript
适用场景
PHP/Web 开发者
运维/全栈开发者
DBA/后端开发者
+
接口调试 / 日志分析 / 配置排查
@@ -397,6 +477,7 @@ PHPer EasyShell EasySQL + JSON Viewer GitHub diff --git a/jsonview.html b/jsonview.html new file mode 100644 index 0000000..e3fa674 --- /dev/null +++ b/jsonview.html @@ -0,0 +1,321 @@ + + + + + + + JSON Viewer - 跨平台桌面版 JSON 阅读 / 编辑器 + + + + + + + + + + + +
+
+
+
+
+ + + + + +
+
+
+
+ + 跨平台 · Tauri 2 · 开源免费 +
+

+ JSON Viewer + JSON Viewer +

+

桌面版 JSON 阅读 / 编辑器

+

+ 基于 Tauri 2 + Vue 3 + + TypeScript 的轻量级 JSON 工具, + 专注于「一眼看懂 JSON 结构,快速定位并编辑需要的字段」。 +

+ +
+
+ 3 + 支持平台 +
+
+
+ { } + 结构化视图 +
+
+
+ Ctrl+F + 关键字搜索 +
+
+
+
+
+ + +
+
+
+ +

一眼看懂 JSON 结构的三栏布局

+

左侧树形结构,中间原始文本,右侧节点详情,状态栏实时显示 JSON 是否有效

+
+
+ +
+
+
+
+
+ +
+ JSON Viewer +
+
+ JSON Viewer 主界面 +
+
+
+
+
+ + +
+
+
+ +

为 JSON 而生的阅读 / 编辑体验

+

把 JSON 文件当成项目代码一样顺手地浏览、搜索与修改

+
+
+
+
🌲
+

树形结构视图

+

按对象 / 数组分层展示 JSON,支持折叠展开、子节点数量提示,并自动滚动到当前选中节点。

+
    +
  • 展开 / 折叠任意层级节点
  • +
  • 显示对象 / 数组的子项数量
  • +
  • 点击树节点自动同步到文本位置
  • +
  • 适配深色 / 浅色主题
  • +
+
+
+
📝
+

原始文本实时校验

+

中间区域提供原始 JSON 文本编辑器,输入时实时解析,高亮错误行列位置。

+
+
+
🔍
+

关键字搜索与导航

+

支持在键名和字符串值中搜索,配合 Ctrl+F、上一条 / 下一条按钮在所有匹配项之间跳转。

+
+
+
⚙️
+

格式化 / 压缩与缩进切换

+

一键在格式化 / 压缩之间切换,并支持 2 空格、4 空格、Tab 等多种缩进风格。

+
+
+
✏️
+

节点值就地编辑

+

在树视图中双击节点值即可编辑字符串、数字、布尔、null,输入非法 JSON 会提示错误并回退。

+
+
+
💾
+

打开 / 保存本地文件

+

支持通过文件对话框、拖拽到窗口、右键“打开方式”等方式打开本地 JSON,并保存 / 另存为。

+
+
+
+
+ + +
+
+
+ +

几步完成JSON 检查与修改

+
+
+
+ Ctrl + O + 打开本地 JSON 文件 +
+
+ 拖拽文件 + 直接将 .json 拖拽到窗口中加载 +
+
+ Ctrl + F + 在键名 / 字符串值中搜索关键字 +
+
+ 双击节点值 + 就地编辑当前节点的值并实时校验 +
+
+
+
+ + +
+
+
+ +

一次开发多端运行

+

基于 Tauri 构建,原生窗口 + 轻量体积,适合随手放在开发环境中

+
+
+
+
🪟
+

Windows

+

Windows 10 及以上,NSIS 安装包和独立 exe

+
+
+
🍎
+

macOS

+

支持 Intel / Apple Silicon,标准 dmg / app 包

+
+
+
🐧
+

Linux

+

提供 deb / AppImage 等常见发行版包

+
+
+
👨‍💻
+

开发者友好

+

Node.js ≥ 18 + Rust 工具链,clone 即可本地构建

+
+
+
+
+ + +
+
+
+

🛠️ 技术栈

+
+ Tauri 2 + Vue 3 + TypeScript 5 + Vite + Pinia + Rust +
+
+
+
+ + +
+
+
+

想要一个专注于 JSON 的小工具吗?

+

下载 JSON Viewer,把格式化、校验、搜索、编辑这些碎片操作收拢到一个干净的桌面应用里。

+ +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/jsonview_icon.svg b/jsonview_icon.svg new file mode 100644 index 0000000..8ef572a --- /dev/null +++ b/jsonview_icon.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + { } + + diff --git a/phper.html b/phper.html index 7b7c5bc..1bf8547 100644 --- a/phper.html +++ b/phper.html @@ -10,7 +10,9 @@ - + @@ -34,9 +36,11 @@ PHPer EasyShell EasySQL + JSON Viewer - + GitHub @@ -63,7 +67,7 @@

功能强大的 Windows PHP 开发环境管理器

- 告别繁琐的手动配置,轻松管理 + 告别繁琐的手动配置,轻松管理 PHPMySQLNginx、 @@ -72,7 +76,8 @@ Python 等服务

- + @@ -82,7 +87,8 @@ - + 查看源码 @@ -134,7 +140,8 @@ PHPer
- 仪表盘 + 仪表盘 PHP管理 MySQL管理 Nginx管理 @@ -238,7 +245,8 @@
🐘 PHP - windows.php.net + windows.php.net 官方 Windows 版
@@ -248,12 +256,14 @@
🌐 Nginx - nginx.org + nginx.org 官方 Windows 版
🔴 Redis - GitHub + GitHub Windows 编译版
@@ -263,12 +273,14 @@
🐍 Python - python.org + python.org 嵌入式版本
🔧 Git - git-scm.com + git-scm.com 官方 Windows 版
@@ -294,7 +306,8 @@ @@ -374,7 +387,8 @@

准备好提升开发效率了吗?

立即下载 PHPer,开启高效的 PHP 开发之旅

- + @@ -384,7 +398,8 @@ - + Star on GitHub @@ -406,6 +421,7 @@ 首页 EasyShell EasySQL + JSON Viewer GitHub 反馈问题
@@ -417,5 +433,4 @@ - - + \ No newline at end of file