321 lines
17 KiB
HTML
321 lines
17 KiB
HTML
<!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> |