Enhance site navigation by adding JSON Viewer links across all relevant HTML files; update meta tags in index.html for improved SEO and product visibility. Refactor font link formatting for better readability.

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 等）。
+

docs-jsonview/Untitled

@@ -0,0 +1 @@
+docs-jsonview

easyshell.html

@@ -10,7 +10,9 @@
     <link rel="icon" type="image/svg+xml" href="easyshell_icon.svg">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@400;500;600;700;800&display=swap"
+        rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 
@@ -37,9 +39,11 @@
                 <a href="phper.html">PHPer</a>
                 <a href="easyshell.html" class="active">EasyShell</a>
                 <a href="easysql.html">EasySQL</a>
+                <a href="jsonview.html">JSON Viewer</a>
                 <a href="https://github.com/ethanfly/easyshell" target="_blank" class="btn btn-nav btn-nav-cyber">
                     <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                        <path
+                            d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                     </svg>
                     GitHub
                 </a>
@@ -72,7 +76,8 @@
                     <span class="highlight-cyber">Android</span> 多平台运行
                 </p>
                 <div class="hero-actions">
-                    <a href="https://github.com/ethanfly/easyshell/releases" target="_blank" class="btn btn-cyber btn-lg">
+                    <a href="https://github.com/ethanfly/easyshell/releases" target="_blank"
+                        class="btn btn-cyber btn-lg">
                         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                             <polyline points="7 10 12 15 17 10" />
@@ -82,7 +87,8 @@
                     </a>
                     <a href="https://github.com/ethanfly/easyshell" target="_blank" class="btn btn-ghost-cyber btn-lg">
                         <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                            <path
+                                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                         </svg>
                         查看源码
                     </a>
@@ -286,7 +292,8 @@
                 <h2>准备好连接你的服务器了吗？</h2>
                 <p>下载 EasyShell，开启赛博朋克式的远程管理体验</p>
                 <div class="cta-actions">
-                    <a href="https://github.com/ethanfly/easyshell/releases" target="_blank" class="btn btn-cyber btn-lg">
+                    <a href="https://github.com/ethanfly/easyshell/releases" target="_blank"
+                        class="btn btn-cyber btn-lg">
                         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                             <polyline points="7 10 12 15 17 10" />
@@ -294,9 +301,11 @@
                         </svg>
                         免费下载
                     </a>
-                    <a href="https://github.com/ethanfly/easyshell" target="_blank" class="btn btn-outline-cyber btn-lg">
+                    <a href="https://github.com/ethanfly/easyshell" target="_blank"
+                        class="btn btn-outline-cyber btn-lg">
                         <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                            <path
+                                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                         </svg>
                         Star on GitHub
                     </a>
@@ -318,6 +327,7 @@
                     <a href="index.html">首页</a>
                     <a href="phper.html">PHPer</a>
                     <a href="easysql.html">EasySQL</a>
+                    <a href="jsonview.html">JSON Viewer</a>
                     <a href="https://github.com/ethanfly/easyshell" target="_blank">GitHub</a>
                     <a href="https://github.com/ethanfly/easyshell/issues" target="_blank">反馈问题</a>
                 </div>
@@ -330,4 +340,3 @@
 </body>
 
 </html>
-

easysql.html

@@ -10,7 +10,9 @@
     <link rel="icon" type="image/svg+xml" href="easysql_icon.svg">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
+        rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 
@@ -36,9 +38,11 @@
                 <a href="phper.html">PHPer</a>
                 <a href="easyshell.html">EasyShell</a>
                 <a href="easysql.html" class="active">EasySQL</a>
+                <a href="jsonview.html">JSON Viewer</a>
                 <a href="https://github.com/ethanfly/easysql" target="_blank" class="btn btn-nav btn-nav-sql">
                     <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                        <path
+                            d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                     </svg>
                     GitHub
                 </a>
@@ -82,7 +86,8 @@
                     </a>
                     <a href="https://github.com/ethanfly/easysql" target="_blank" class="btn btn-ghost-sql btn-lg">
                         <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                            <path
+                                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                         </svg>
                         查看源码
                     </a>
@@ -359,7 +364,8 @@
                     </a>
                     <a href="https://github.com/ethanfly/easysql" target="_blank" class="btn btn-outline-sql btn-lg">
                         <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                            <path
+                                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                         </svg>
                         Star on GitHub
                     </a>
@@ -381,6 +387,7 @@
                     <a href="index.html">首页</a>
                     <a href="phper.html">PHPer</a>
                     <a href="easyshell.html">EasyShell</a>
+                    <a href="jsonview.html">JSON Viewer</a>
                     <a href="https://github.com/ethanfly/easysql" target="_blank">GitHub</a>
                     <a href="https://github.com/ethanfly/easysql/issues" target="_blank">反馈问题</a>
                 </div>
@@ -393,4 +400,3 @@
 </body>
 
 </html>
-

index.html

@@ -4,9 +4,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ethan的开发工具集 - PHPer & EasyShell</title>
+    <title>Ethan的开发工具集 - PHPer / EasyShell / EasySQL / JSON Viewer</title>
-    <meta name="description" content="Ethan的开发工具集，包含 PHPer Windows PHP 开发环境管理器和 EasyShell 跨平台远程 Shell 管理终端">
+    <meta name="description"
-    <meta name="keywords" content="PHP, Windows, 开发环境, SSH, 终端, SFTP, 开发工具">
+        content="Ethan的开发工具集，包含 PHPer Windows PHP 开发环境管理器、EasyShell 跨平台远程 Shell 管理终端、EasySQL 跨平台数据库管理工具，以及 JSON Viewer 跨平台桌面 JSON 阅读 / 编辑器。">
+    <meta name="keywords" content="PHP, Windows, 开发环境, SSH, 终端, SFTP, 数据库, JSON, Tauri, 开发工具">
     <link rel="icon" type="image/svg+xml" href="phper_icon.svg">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -37,6 +38,7 @@
                 <a href="phper.html">PHPer</a>
                 <a href="easyshell.html">EasyShell</a>
                 <a href="easysql.html">EasySQL</a>
+                <a href="jsonview.html">JSON Viewer</a>
                 <a href="https://github.com/ethanfly" target="_blank" class="btn btn-nav">
                     <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
                         <path
@@ -114,7 +116,7 @@
         <div class="container">
             <div class="section-header">
                 <span class="section-tag">产品</span>
-                <h2 class="section-title">三款精心打造的<span class="gradient-text">开发者工具</span></h2>
+                <h2 class="section-title">多款精心打造的<span class="gradient-text">开发者工具</span></h2>
                 <p class="section-desc">每一款都专注于解决特定的开发痛点</p>
             </div>
 
@@ -324,6 +326,75 @@
                     </div>
                 </div>
             </div>
+
+            <!-- JSON Viewer 产品卡片 -->
+            <div class="product-card product-jsonview reverse">
+                <div class="product-info">
+                    <div class="product-header">
+                        <img src="jsonview_icon.svg" alt="JSON Viewer" class="product-icon-img">
+                        <div class="product-meta">
+                            <h3 class="product-name">JSON Viewer</h3>
+                            <span class="product-badge">跨平台</span>
+                        </div>
+                    </div>
+                    <p class="product-tagline">桌面版 JSON 阅读 / 编辑器</p>
+                    <p class="product-desc">
+                        基于 Tauri 2 + Vue 3 + TypeScript 的轻量级 JSON 工具，
+                        提供树形结构视图、原始文本实时校验、关键字搜索、格式化 / 压缩与就地编辑等能力，
+                        让你在调试接口、排查配置时一眼看懂复杂 JSON。
+                    </p>
+                    <div class="product-features">
+                        <div class="feature-item">
+                            <span class="feature-icon">🌲</span>
+                            <span>树形结构视图</span>
+                        </div>
+                        <div class="feature-item">
+                            <span class="feature-icon">📝</span>
+                            <span>实时语法校验</span>
+                        </div>
+                        <div class="feature-item">
+                            <span class="feature-icon">🔍</span>
+                            <span>Ctrl+F 搜索</span>
+                        </div>
+                        <div class="feature-item">
+                            <span class="feature-icon">💾</span>
+                            <span>打开 / 保存本地文件</span>
+                        </div>
+                    </div>
+                    <div class="product-tech">
+                        <span class="tech-item">Tauri 2</span>
+                        <span class="tech-item">Vue 3</span>
+                        <span class="tech-item">TypeScript</span>
+                    </div>
+                    <div class="product-actions">
+                        <a href="jsonview.html" class="btn btn-primary">
+                            了解更多
+                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M5 12h14M12 5l7 7-7 7" />
+                            </svg>
+                        </a>
+                        <a href="https://github.com/ethanfly/jsonview/releases" target="_blank" class="btn btn-outline">
+                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                                <polyline points="7 10 12 15 17 10" />
+                                <line x1="12" y1="15" x2="12" y2="3" />
+                            </svg>
+                            下载
+                        </a>
+                    </div>
+                </div>
+                <div class="product-preview">
+                    <div class="preview-window">
+                        <div class="window-header">
+                            <div class="window-dots">
+                                <span></span><span></span><span></span>
+                            </div>
+                            <span class="window-title">JSON Viewer</span>
+                        </div>
+                        <img src="docs-jsonview/view.png" alt="JSON Viewer 界面" class="preview-img">
+                    </div>
+                </div>
+            </div>
         </div>
     </section>
 
@@ -349,36 +420,45 @@
                         <img src="easysql_icon.svg" alt="EasySQL" class="comparison-icon">
                         <span>EasySQL</span>
                     </div>
+                    <div class="comparison-cell">
+                        <img src="jsonview_icon.svg" alt="JSON Viewer" class="comparison-icon">
+                        <span>JSON Viewer</span>
+                    </div>
                 </div>
                 <div class="comparison-row comparison-row-4col">
                     <div class="comparison-cell">主要用途</div>
                     <div class="comparison-cell">本地开发环境管理</div>
                     <div class="comparison-cell">远程服务器管理</div>
                     <div class="comparison-cell">数据库管理</div>
+                    <div class="comparison-cell">JSON 文件阅读 / 编辑</div>
                 </div>
                 <div class="comparison-row comparison-row-4col">
                     <div class="comparison-cell">支持平台</div>
                     <div class="comparison-cell">Windows</div>
                     <div class="comparison-cell">Win/Mac/Linux/Android</div>
                     <div class="comparison-cell">Win/Mac/Linux</div>
+                    <div class="comparison-cell">Win/Mac/Linux</div>
                 </div>
                 <div class="comparison-row comparison-row-4col">
                     <div class="comparison-cell">UI 风格</div>
                     <div class="comparison-cell">现代简约</div>
                     <div class="comparison-cell">赛博朋克</div>
                     <div class="comparison-cell">清新浅色</div>
+                    <div class="comparison-cell">深色主题 + 三栏布局</div>
                 </div>
                 <div class="comparison-row comparison-row-4col">
                     <div class="comparison-cell">技术栈</div>
                     <div class="comparison-cell">Vue + Electron</div>
                     <div class="comparison-cell">React + Electron/Capacitor</div>
                     <div class="comparison-cell">React + Electron</div>
+                    <div class="comparison-cell">Tauri + Vue + TypeScript</div>
                 </div>
                 <div class="comparison-row comparison-row-4col">
                     <div class="comparison-cell">适用场景</div>
                     <div class="comparison-cell">PHP/Web 开发者</div>
                     <div class="comparison-cell">运维/全栈开发者</div>
                     <div class="comparison-cell">DBA/后端开发者</div>
+                    <div class="comparison-cell">接口调试 / 日志分析 / 配置排查</div>
                 </div>
             </div>
         </div>
@@ -397,6 +477,7 @@
                     <a href="phper.html">PHPer</a>
                     <a href="easyshell.html">EasyShell</a>
                     <a href="easysql.html">EasySQL</a>
+                    <a href="jsonview.html">JSON Viewer</a>
                     <a href="https://github.com/ethanfly" target="_blank">GitHub</a>
                 </div>
                 <p class="copyright">© 2024 Ethan's DevTools. 基于 MIT 协议开源.</p>

jsonview.html

@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JSON Viewer - 跨平台桌面版 JSON 阅读 / 编辑器</title>
+    <meta name="description"
+        content="JSON Viewer 是一款基于 Tauri 2 + Vue 3 + TypeScript 的跨平台桌面 JSON 阅读 / 编辑工具，支持树形结构查看、格式化 / 压缩、搜索、高亮校验等功能。">
+    <meta name="keywords" content="JSON, JSON Viewer, JSON 编辑器, Tauri, Vue 3, 桌面应用, 跨平台, 开发工具">
+    <link rel="icon" type="image/svg+xml" href="jsonview_icon.svg">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body class="jsonview-page">
+    <!-- 背景装饰 -->
+    <div class="bg-decoration">
+        <div class="gradient-orb orb-1 orb-green"></div>
+        <div class="gradient-orb orb-2 orb-cyan"></div>
+        <div class="noise-overlay"></div>
+    </div>
+
+    <!-- 导航栏 -->
+    <nav class="navbar">
+        <div class="container">
+            <a href="index.html" class="logo">
+                <span class="logo-icon">⚡</span>
+                <span class="logo-text">Ethan's DevTools</span>
+            </a>
+            <div class="nav-links">
+                <a href="index.html">首页</a>
+                <a href="phper.html">PHPer</a>
+                <a href="easyshell.html">EasyShell</a>
+                <a href="easysql.html">EasySQL</a>
+                <a href="jsonview.html" class="active">JSON Viewer</a>
+                <a href="https://github.com/ethanfly/jsonview" target="_blank" class="btn btn-nav">
+                    <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
+                        <path
+                            d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                    </svg>
+                    GitHub
+                </a>
+            </div>
+            <button class="mobile-menu-btn" aria-label="菜单">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Hero 区域 -->
+    <header class="hero detail-hero">
+        <div class="container">
+            <div class="hero-content">
+                <div class="hero-badge hero-badge-green">
+                    <span class="badge-dot"></span>
+                    跨平台 · Tauri 2 · 开源免费
+                </div>
+                <h1 class="hero-title">
+                    <img src="jsonview_icon.svg" alt="JSON Viewer" class="product-logo-img">
+                    <span class="title-line">JSON Viewer</span>
+                </h1>
+                <p class="hero-tagline">桌面版 JSON 阅读 / 编辑器</p>
+                <p class="hero-description">
+                    基于 <span class="highlight">Tauri 2</span> + <span class="highlight">Vue 3</span> +
+                    <span class="highlight">TypeScript</span> 的轻量级 JSON 工具，
+                    专注于「一眼看懂 JSON 结构，快速定位并编辑需要的字段」。
+                </p>
+                <div class="hero-actions">
+                    <a href="https://github.com/ethanfly/jsonview/releases" target="_blank"
+                        class="btn btn-primary btn-lg">
+                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                            <polyline points="7 10 12 15 17 10" />
+                            <line x1="12" y1="15" x2="12" y2="3" />
+                        </svg>
+                        下载最新版本
+                    </a>
+                    <a href="https://github.com/ethanfly/jsonview" target="_blank" class="btn btn-ghost btn-lg">
+                        <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
+                            <path
+                                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                        </svg>
+                        查看源码
+                    </a>
+                </div>
+                <div class="hero-stats">
+                    <div class="stat">
+                        <span class="stat-value">3</span>
+                        <span class="stat-label">支持平台</span>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat">
+                        <span class="stat-value">{ }</span>
+                        <span class="stat-label">结构化视图</span>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat">
+                        <span class="stat-value">Ctrl+F</span>
+                        <span class="stat-label">关键字搜索</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- 界面预览 -->
+    <section id="screenshots" class="section screenshots">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag section-tag-green">界面预览</span>
+                <h2 class="section-title">一眼看懂 JSON 结构的<span class="gradient-text-green">三栏布局</span></h2>
+                <p class="section-desc">左侧树形结构，中间原始文本，右侧节点详情，状态栏实时显示 JSON 是否有效</p>
+            </div>
+            <div class="screenshot-tabs">
+                <button class="tab-btn active" data-tab="main">🧭 主界面</button>
+            </div>
+            <div class="screenshot-container">
+                <div class="screenshot-frame">
+                    <div class="screenshot-window-bar">
+                        <div class="window-buttons">
+                            <span></span><span></span><span></span>
+                        </div>
+                        <span class="window-title">JSON Viewer</span>
+                    </div>
+                    <div class="screenshot-wrapper">
+                        <img src="docs-jsonview/view.png" alt="JSON Viewer 主界面" class="screenshot-img active"
+                            data-tab="main">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 功能特性 -->
+    <section id="features" class="section features">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag section-tag-green">功能特性</span>
+                <h2 class="section-title">为 JSON 而生的<span class="gradient-text-green">阅读 / 编辑体验</span></h2>
+                <p class="section-desc">把 JSON 文件当成项目代码一样顺手地浏览、搜索与修改</p>
+            </div>
+            <div class="features-grid">
+                <div class="feature-card feature-highlight feature-green">
+                    <div class="feature-icon">🌲</div>
+                    <h3>树形结构视图</h3>
+                    <p>按对象 / 数组分层展示 JSON，支持折叠展开、子节点数量提示，并自动滚动到当前选中节点。</p>
+                    <ul class="feature-list">
+                        <li>展开 / 折叠任意层级节点</li>
+                        <li>显示对象 / 数组的子项数量</li>
+                        <li>点击树节点自动同步到文本位置</li>
+                        <li>适配深色 / 浅色主题</li>
+                    </ul>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">📝</div>
+                    <h3>原始文本实时校验</h3>
+                    <p>中间区域提供原始 JSON 文本编辑器，输入时实时解析，高亮错误行列位置。</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">🔍</div>
+                    <h3>关键字搜索与导航</h3>
+                    <p>支持在键名和字符串值中搜索，配合 <code>Ctrl+F</code>、上一条 / 下一条按钮在所有匹配项之间跳转。</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">⚙️</div>
+                    <h3>格式化 / 压缩与缩进切换</h3>
+                    <p>一键在格式化 / 压缩之间切换，并支持 2 空格、4 空格、Tab 等多种缩进风格。</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">✏️</div>
+                    <h3>节点值就地编辑</h3>
+                    <p>在树视图中双击节点值即可编辑字符串、数字、布尔、null，输入非法 JSON 会提示错误并回退。</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">💾</div>
+                    <h3>打开 / 保存本地文件</h3>
+                    <p>支持通过文件对话框、拖拽到窗口、右键“打开方式”等方式打开本地 JSON，并保存 / 另存为。</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 快速上手 -->
+    <section class="section shortcuts">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag section-tag-green">快速上手</span>
+                <h2 class="section-title">几步完成<span class="gradient-text-green">JSON 检查与修改</span></h2>
+            </div>
+            <div class="shortcuts-grid">
+                <div class="shortcut-item">
+                    <kbd>Ctrl</kbd> + <kbd>O</kbd>
+                    <span>打开本地 JSON 文件</span>
+                </div>
+                <div class="shortcut-item">
+                    <kbd>拖拽文件</kbd>
+                    <span>直接将 .json 拖拽到窗口中加载</span>
+                </div>
+                <div class="shortcut-item">
+                    <kbd>Ctrl</kbd> + <kbd>F</kbd>
+                    <span>在键名 / 字符串值中搜索关键字</span>
+                </div>
+                <div class="shortcut-item">
+                    <kbd>双击节点值</kbd>
+                    <span>就地编辑当前节点的值并实时校验</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 平台支持 -->
+    <section class="section platforms">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag section-tag-green">平台支持</span>
+                <h2 class="section-title">一次开发<span class="gradient-text-green">多端运行</span></h2>
+                <p class="section-desc">基于 Tauri 构建，原生窗口 + 轻量体积，适合随手放在开发环境中</p>
+            </div>
+            <div class="platforms-grid">
+                <div class="platform-card">
+                    <div class="platform-icon">🪟</div>
+                    <h3>Windows</h3>
+                    <p>Windows 10 及以上，NSIS 安装包和独立 exe</p>
+                </div>
+                <div class="platform-card">
+                    <div class="platform-icon">🍎</div>
+                    <h3>macOS</h3>
+                    <p>支持 Intel / Apple Silicon，标准 dmg / app 包</p>
+                </div>
+                <div class="platform-card">
+                    <div class="platform-icon">🐧</div>
+                    <h3>Linux</h3>
+                    <p>提供 deb / AppImage 等常见发行版包</p>
+                </div>
+                <div class="platform-card">
+                    <div class="platform-icon">👨‍💻</div>
+                    <h3>开发者友好</h3>
+                    <p>Node.js ≥ 18 + Rust 工具链，clone 即可本地构建</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 技术栈 -->
+    <section class="section tech-stack">
+        <div class="container">
+            <div class="tech-content">
+                <h3>🛠️ 技术栈</h3>
+                <div class="tech-tags">
+                    <span class="tech-tag">Tauri 2</span>
+                    <span class="tech-tag">Vue 3</span>
+                    <span class="tech-tag">TypeScript 5</span>
+                    <span class="tech-tag">Vite</span>
+                    <span class="tech-tag">Pinia</span>
+                    <span class="tech-tag">Rust</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA 区域 -->
+    <section class="section cta cta-green">
+        <div class="container">
+            <div class="cta-content">
+                <h2>想要一个专注于 JSON 的小工具吗？</h2>
+                <p>下载 JSON Viewer，把格式化、校验、搜索、编辑这些碎片操作收拢到一个干净的桌面应用里。</p>
+                <div class="cta-actions">
+                    <a href="https://github.com/ethanfly/jsonview/releases" target="_blank"
+                        class="btn btn-primary btn-lg">
+                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                            <polyline points="7 10 12 15 17 10" />
+                            <line x1="12" y1="15" x2="12" y2="3" />
+                        </svg>
+                        免费下载
+                    </a>
+                    <a href="https://github.com/ethanfly/jsonview" target="_blank" class="btn btn-outline btn-lg">
+                        <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
+                            <path
+                                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                        </svg>
+                        Star on GitHub
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 页脚 -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-brand">
+                    <img src="jsonview_icon.svg" alt="JSON Viewer" class="footer-icon">
+                    <span class="logo-text">JSON Viewer</span>
+                </div>
+                <p class="footer-text">跨平台桌面 JSON 阅读 / 编辑工具</p>
+                <div class="footer-links">
+                    <a href="index.html">首页</a>
+                    <a href="phper.html">PHPer</a>
+                    <a href="easyshell.html">EasyShell</a>
+                    <a href="easysql.html">EasySQL</a>
+                    <a href="https://github.com/ethanfly/jsonview" target="_blank">GitHub</a>
+                    <a href="https://github.com/ethanfly/jsonview/issues" target="_blank">反馈问题</a>
+                </div>
+                <p class="copyright">© 2026 JSON Viewer. 基于 MIT 协议开源.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+
+</html>

jsonview_icon.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#10B981"/>
+      <stop offset="100%" stop-color="#06B6D4"/>
+    </linearGradient>
+  </defs>
+  <rect x="24" y="24" width="208" height="208" rx="56" fill="#020617"/>
+  <rect x="32" y="32" width="192" height="192" rx="48" fill="#020617" stroke="url(#bg)" stroke-width="4"/>
+  <rect x="56" y="72" width="144" height="112" rx="16" fill="#020617" stroke="#1F2937" stroke-width="2"/>
+  <rect x="64" y="80" width="128" height="16" rx="4" fill="#020617" stroke="#111827" stroke-width="2"/>
+  <circle cx="76" cy="88" r="4" fill="#F97316"/>
+  <circle cx="92" cy="88" r="4" fill="#E5E7EB"/>
+  <circle cx="108" cy="88" r="4" fill="#22C55E"/>
+  <path d="M86 124c-6 4-10 10-10 20s4 16 10 20" fill="none" stroke="#FBBF24" stroke-width="6" stroke-linecap="round"/>
+  <path d="M170 124c6 4 10 10 10 20s-4 16-10 20" fill="none" stroke="#A5B4FC" stroke-width="6" stroke-linecap="round"/>
+  <path d="M122 136h12m-12 16h12m-12 16h12" stroke="#38BDF8" stroke-width="6" stroke-linecap="round"/>
+  <text x="50%" y="54%" text-anchor="middle" fill="#6EE7B7" font-size="32" font-family="JetBrains Mono, monospace">{ }</text>
+</svg>
+

phper.html

@@ -10,7 +10,9 @@
     <link rel="icon" type="image/svg+xml" href="phper_icon.svg">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
+        rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 
@@ -34,9 +36,11 @@
                 <a href="phper.html" class="active">PHPer</a>
                 <a href="easyshell.html">EasyShell</a>
                 <a href="easysql.html">EasySQL</a>
+                <a href="jsonview.html">JSON Viewer</a>
                 <a href="https://github.com/ethanfly/php-manager" target="_blank" class="btn btn-nav">
                     <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                        <path
+                            d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                     </svg>
                     GitHub
                 </a>
@@ -72,7 +76,8 @@
                     <span class="highlight">Python</span> 等服务
                 </p>
                 <div class="hero-actions">
-                    <a href="https://github.com/ethanfly/php-manager/releases" target="_blank" class="btn btn-primary btn-lg">
+                    <a href="https://github.com/ethanfly/php-manager/releases" target="_blank"
+                        class="btn btn-primary btn-lg">
                         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                             <polyline points="7 10 12 15 17 10" />
@@ -82,7 +87,8 @@
                     </a>
                     <a href="https://github.com/ethanfly/php-manager" target="_blank" class="btn btn-ghost btn-lg">
                         <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                            <path
+                                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                         </svg>
                         查看源码
                     </a>
@@ -134,7 +140,8 @@
                         <span class="window-title">PHPer</span>
                     </div>
                     <div class="screenshot-wrapper">
-                        <img src="docs-phper/dashboard.png" alt="仪表盘" class="screenshot-img active" data-tab="dashboard">
+                        <img src="docs-phper/dashboard.png" alt="仪表盘" class="screenshot-img active"
+                            data-tab="dashboard">
                         <img src="docs-phper/php.png" alt="PHP管理" class="screenshot-img" data-tab="php">
                         <img src="docs-phper/mysql.png" alt="MySQL管理" class="screenshot-img" data-tab="mysql">
                         <img src="docs-phper/nginx.png" alt="Nginx管理" class="screenshot-img" data-tab="nginx">
@@ -238,7 +245,8 @@
                 </div>
                 <div class="table-row">
                     <span class="service-name"><span class="emoji">🐘</span> PHP</span>
-                    <span class="source"><a href="https://windows.php.net/download/" target="_blank">windows.php.net</a></span>
+                    <span class="source"><a href="https://windows.php.net/download/"
+                            target="_blank">windows.php.net</a></span>
                     <span class="desc">官方 Windows 版</span>
                 </div>
                 <div class="table-row">
@@ -248,12 +256,14 @@
                 </div>
                 <div class="table-row">
                     <span class="service-name"><span class="emoji">🌐</span> Nginx</span>
-                    <span class="source"><a href="https://nginx.org/en/download.html" target="_blank">nginx.org</a></span>
+                    <span class="source"><a href="https://nginx.org/en/download.html"
+                            target="_blank">nginx.org</a></span>
                     <span class="desc">官方 Windows 版</span>
                 </div>
                 <div class="table-row">
                     <span class="service-name"><span class="emoji">🔴</span> Redis</span>
-                    <span class="source"><a href="https://github.com/redis-windows/redis-windows" target="_blank">GitHub</a></span>
+                    <span class="source"><a href="https://github.com/redis-windows/redis-windows"
+                            target="_blank">GitHub</a></span>
                     <span class="desc">Windows 编译版</span>
                 </div>
                 <div class="table-row">
@@ -263,12 +273,14 @@
                 </div>
                 <div class="table-row">
                     <span class="service-name"><span class="emoji">🐍</span> Python</span>
-                    <span class="source"><a href="https://www.python.org/downloads/windows/" target="_blank">python.org</a></span>
+                    <span class="source"><a href="https://www.python.org/downloads/windows/"
+                            target="_blank">python.org</a></span>
                     <span class="desc">嵌入式版本</span>
                 </div>
                 <div class="table-row">
                     <span class="service-name"><span class="emoji">🔧</span> Git</span>
-                    <span class="source"><a href="https://git-scm.com/download/win" target="_blank">git-scm.com</a></span>
+                    <span class="source"><a href="https://git-scm.com/download/win"
+                            target="_blank">git-scm.com</a></span>
                     <span class="desc">官方 Windows 版</span>
                 </div>
             </div>
@@ -294,7 +306,8 @@
                         <ul>
                             <li>Windows 10/11 (64 位)</li>
                             <li>管理员权限</li>
-                            <li><a href="https://aka.ms/vs/17/release/vc_redist.x64.exe" target="_blank">Visual C++ Redistributable 2015-2022</a></li>
+                            <li><a href="https://aka.ms/vs/17/release/vc_redist.x64.exe" target="_blank">Visual C++
+                                    Redistributable 2015-2022</a></li>
                         </ul>
                     </div>
                 </div>
@@ -374,7 +387,8 @@
                 <h2>准备好提升开发效率了吗？</h2>
                 <p>立即下载 PHPer，开启高效的 PHP 开发之旅</p>
                 <div class="cta-actions">
-                    <a href="https://github.com/ethanfly/php-manager/releases" target="_blank" class="btn btn-primary btn-lg">
+                    <a href="https://github.com/ethanfly/php-manager/releases" target="_blank"
+                        class="btn btn-primary btn-lg">
                         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                             <polyline points="7 10 12 15 17 10" />
@@ -384,7 +398,8 @@
                     </a>
                     <a href="https://github.com/ethanfly/php-manager" target="_blank" class="btn btn-outline btn-lg">
                         <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                            <path
+                                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                         </svg>
                         Star on GitHub
                     </a>
@@ -406,6 +421,7 @@
                     <a href="index.html">首页</a>
                     <a href="easyshell.html">EasyShell</a>
                     <a href="easysql.html">EasySQL</a>
+                    <a href="jsonview.html">JSON Viewer</a>
                     <a href="https://github.com/ethanfly/php-manager" target="_blank">GitHub</a>
                     <a href="https://github.com/ethanfly/php-manager/issues" target="_blank">反馈问题</a>
                 </div>
@@ -418,4 +434,3 @@
 </body>
 
 </html>
-