JSON 格式�?- 小睿 AI 工具�?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; } .container { max-width: 900px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #f0f0f0; } .tool-name { font-size: 24px; font-weight: bold; color: #333; } .back-link { color: #667eea; text-decoration: none; } .toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .tool-btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; } .tool-btn.primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; } .tool-btn.success { background: #52c41a; color: #fff; } .tool-btn.warning { background: #faad14; color: #fff; } .tool-btn.danger { background: #ff4d4f; color: #fff; } .editor-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .editor-box { display: flex; flex-direction: column; } .editor-box label { font-weight: 500; margin-bottom: 8px; } .editor-box textarea { flex: 1; min-height: 400px; padding: 15px; border: 2px solid #e0e0e0; border-radius: 10px; font-family: 'Courier New', monospace; font-size: 13px; resize: vertical; } .editor-box textarea:focus { outline: none; border-color: #667eea; } .editor-box textarea.error { border-color: #ff4d4f; background: #fff5f5; } .editor-box textarea.valid { border-color: #52c41a; background: #f6ffed; } .status-bar { margin-top: 10px; padding: 10px; border-radius: 6px; font-size: 14px; } .status-bar.error { background: #fff5f5; color: #ff4d4f; } .status-bar.success { background: #f6ffed; color: #52c41a; } .status-bar.info { background: #f0f0ff; color: #667eea; } @media (max-width: 768px) { .editor-container { grid-template-columns: 1fr; } } </style>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?419d570f333971ceaae9a6e2f8414d02"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "JSON 格式化", "description": "JSON 格式化、验证、压缩", "url": "https://xrdj.club/tool.php?id=35", "applicationCategory": "UtilitiesApplication", "operatingSystem": "All", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "CNY" }, "author": { "@type": "Organization", "name": "小睿 AI 工具箱", "url": "https://xrdj.club" } } </script> </head> <body> <div class="container"> <div class="header"> <div class="tool-name">📄 JSON 格式�?/div> <a href="/" class="back-link">�?返回首页</a> </div> <div class="toolbar"> <button class="tool-btn primary" onclick="formatJSON()">�?格式�?/button> <button class="tool-btn success" onclick="minifyJSON()">🗜�?压缩</button> <button class="tool-btn warning" onclick="validateJSON()">�?验证</button> <button class="tool-btn danger" onclick="clearAll()">🗑�?清空</button> <button class="tool-btn" style="background:#1890ff;color:#fff" onclick="copyResult()">📋 复制结果</button> </div> <div class="editor-container"> <div class="editor-box"> <label>输入 JSON</label> <textarea id="inputJson" placeholder='粘贴 JSON 内容，例如：{"name": "test", "value": 123}'></textarea> <div class="status-bar info" id="inputStatus">等待输入...</div> </div> <div class="editor-box"> <label>格式化结�?/label> <textarea id="outputJson" readonly placeholder="结果将显示在这里..."></textarea> <div class="status-bar info" id="outputStatus">准备就绪</div> </div> </div> </div> <script> function formatJSON() { const input = document.getElementById('inputJson').value.trim(); if (!input) { showStatus('inputStatus', '请输�?JSON 内容', 'info'); return; } try { const parsed = JSON.parse(input); const formatted = JSON.stringify(parsed, null, 4); document.getElementById('outputJson').value = formatted; document.getElementById('inputJson').classList.remove('error'); document.getElementById('inputJson').classList.add('valid'); showStatus('inputStatus', '�?JSON 格式正确', 'success'); showStatus('outputStatus', `格式化成功！�?${countLines(formatted)} 行`, 'success'); } catch (e) { showStatus('inputStatus', '�?格式错误�? + e.message, 'error'); document.getElementById('inputJson').classList.add('error'); document.getElementById('outputJson').value = ''; } } function minifyJSON() { const input = document.getElementById('inputJson').value.trim(); if (!input) return; try { const parsed = JSON.parse(input); document.getElementById('outputJson').value = JSON.stringify(parsed); showStatus('outputStatus', '压缩成功�?, 'success'); } catch (e) { showStatus('outputStatus', '无效 JSON�? + e.message, 'error'); } } function validateJSON() { const input = document.getElementById('inputJson').value.trim(); if (!input) { showStatus('inputStatus', '请输�?JSON 内容', 'info'); return; } try { JSON.parse(input); showStatus('inputStatus', '�?JSON 格式验证通过�?, 'success'); document.getElementById('inputJson').classList.add('valid'); } catch (e) { showStatus('inputStatus', '�?验证失败�? + e.message, 'error'); document.getElementById('inputJson').classList.add('error'); } } function copyResult() { const output = document.getElementById('outputJson'); if (output.value) { output.select(); document.execCommand('copy'); alert('已复制到剪贴板！'); } } function clearAll() { document.getElementById('inputJson').value = ''; document.getElementById('outputJson').value = ''; document.getElementById('inputJson').classList.remove('valid', 'error'); showStatus('inputStatus', '等待输入...', 'info'); showStatus('outputStatus', '准备就绪', 'info'); } function showStatus(id, message, type) { const el = document.getElementById(id); el.textContent = message; el.className = 'status-bar ' + type; } function countLines(text) { return text.split('\n').length; } </script> <div class="ad-container ad-banner" style="text-align: center; padding: 15px; margin: 10px auto; background: #f9f9f9; border-radius: 8px; max-width: 100%; position: relative; z-index: 50;"><script> atOptions = { 'key' : '49db223ddf34a5bd582c6217c9b9fe7f', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script src="https://www.highperformanceformat.com/49db223ddf34a5bd582c6217c9b9fe7f/invoke.js"></script></div><div class="ad-container ad-native" style="margin: 20px auto; padding: 15px; background: #f9f9f9; border-radius: 8px; max-width: 100%;"><script> atOptions = { 'key' : '8c4626e3dac3f00cf12f158eb0bbd5d7', 'format' : 'iframe', 'height' : 250, 'width' : 300, 'params' : {} }; </script> <script src="https://www.highperformanceformat.com/8c4626e3dac3f00cf12f158eb0bbd5d7/invoke.js"></script></div> <style> /* 剩余次数指示器 */ .free-uses-indicator { position: fixed; bottom: 20px; right: 20px; z-index: 9998; background: #fff; border-radius: 20px; padding: 8px 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); font-size: 13px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.3s; border: 1px solid #e8e8e8; } .free-uses-indicator:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0,0,0,0.18); } .free-uses-count { font-weight: 700; font-size: 16px; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .free-uses-exhausted { background: linear-gradient(135deg, #f5576c, #f093fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 付费弹窗 */ .paywall-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center; backdrop-filter: blur(4px); } .paywall-overlay.active { display: flex; } .paywall-modal { background: #fff; border-radius: 20px; padding: 35px 30px; text-align: center; max-width: 400px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: paywallSlideIn 0.3s ease; } @keyframes paywallSlideIn { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .paywall-icon { font-size: 56px; margin-bottom: 15px; } .paywall-title { font-size: 22px; font-weight: 700; color: #333; margin-bottom: 10px; } .paywall-desc { color: #666; font-size: 14px; line-height: 1.6; margin-bottom: 20px; } .paywall-price { font-size: 36px; font-weight: 800; color: #f5576c; margin-bottom: 5px; } .paywall-price-sub { font-size: 13px; color: #999; margin-bottom: 20px; } .paywall-features { text-align: left; margin: 20px 0; padding: 0; list-style: none; } .paywall-features li { padding: 8px 0; font-size: 14px; color: #555; display: flex; align-items: center; gap: 8px; } .paywall-features li::before { content: "✅"; } .btn-unlock { display: block; width: 100%; padding: 14px; margin: 8px 0; background: linear-gradient(135deg, #f5576c, #f093fb); color: #fff; border: none; border-radius: 12px; font-size: 17px; font-weight: 700; cursor: pointer; transition: all 0.3s; text-decoration: none; text-align: center; } .btn-unlock:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(245,87,108,0.4); } .btn-unlock-alipay { background: linear-gradient(135deg, #1677ff, #69b1ff); } .btn-unlock-alipay:hover { box-shadow: 0 6px 25px rgba(22,119,255,0.4); } .btn-close-paywall { background: none; border: none; color: #999; font-size: 14px; cursor: pointer; padding: 8px; margin-top: 5px; } </style>  <div class="free-uses-indicator" id="freeUsesIndicator" onclick="showPaywall()"> <span>🎯</span> <span>剩余免费：</span> <span class="free-uses-count" id="freeUsesCount">3</span> <span>次</span> </div>  <div class="paywall-overlay" id="paywallOverlay"> <div class="paywall-modal"> <div class="paywall-icon">🔒</div> <div class="paywall-title">免费次数已用完</div> <div class="paywall-desc"> 您已用完 3 次免费试用，支付一次即可永久解锁全部 AI 工具 </div> <div class="paywall-price">¥9.9</div> <div class="paywall-price-sub">一次付费，永久使用</div> <ul class="paywall-features"> <li>无限使用所有 AI 工具</li> <li>优先体验新功能</li> <li>无需消耗积分</li> <li>专属客服支持</li> </ul> <a href="/recharge.php?type=premium" class="btn-unlock btn-unlock-alipay">💳 支付宝支付 ¥9.9</a> <button class="btn-unlock" onclick="handleWechatPay()">💚 微信支付 ¥9.9</button> <button class="btn-close-paywall" onclick="closePaywall()">稍后再说</button> </div> </div> <script> // 付费墙逻辑 var _freeRemaining = 3; var _isLoggedIn = ; function updateFreeUsesDisplay(remaining) { _freeRemaining = remaining; var el = document.getElementById('freeUsesCount'); var indicator = document.getElementById('freeUsesIndicator'); if (!el || !indicator) return; if (remaining === -1) { // 付费用户 indicator.innerHTML = '<span>👑</span><span style="color:#f59e0b;font-weight:600;">已解锁全部功能</span>'; indicator.style.background = 'linear-gradient(135deg, #fff9e6, #fff3cd)'; indicator.style.border = '1px solid #f59e0b'; indicator.onclick = null; } else if (remaining === 0) { el.textContent = '0'; el.className = 'free-uses-exhausted'; indicator.style.background = '#fff5f5'; indicator.style.border = '1px solid #f5576c'; } else { el.textContent = remaining; el.className = 'free-uses-count'; indicator.style.background = '#fff'; indicator.style.border = '1px solid #e8e8e8'; } } function showPaywall() { document.getElementById('paywallOverlay').classList.add('active'); } function closePaywall() { document.getElementById('paywallOverlay').classList.remove('active'); } function handleWechatPay() { // 跳转到充值页面，预选 premium 类型 window.location.href = '/recharge.php?type=premium&amount=' + 9.9; } // 拦截 AJAX 响应，检测免费次数耗尽 (function() { var originalFetch = window.fetch; window.fetch = function() { return originalFetch.apply(this, arguments).then(function(response) { var cloned = response.clone(); cloned.json().then(function(data) { if (data && data.free_remaining !== undefined) { updateFreeUsesDisplay(data.free_remaining); if (data.code === 'free_limit_exceeded' || (data.free_remaining === 0 && !data.is_premium)) { showPaywall(); } } }).catch(function() {}); return response; }); }; // 也拦截 XMLHttpRequest var XHR = XMLHttpRequest.prototype; var originalOpen = XHR.open; var originalSend = XHR.send; XHR.open = function(method, url) { this._url = url; return originalOpen.apply(this, arguments); }; XHR.send = function() { var xhr = this; var onload = xhr.onload; xhr.onload = function() { try { var data = JSON.parse(xhr.responseText); if (data && data.free_remaining !== undefined) { updateFreeUsesDisplay(data.free_remaining); if (data.code === 'free_limit_exceeded' || (data.free_remaining === 0 && !data.is_premium)) { showPaywall(); } } } catch(e) {} if (onload) onload.apply(this, arguments); }; return originalSend.apply(this, arguments); }; })(); // 点击遮罩关闭 document.getElementById('paywallOverlay').addEventListener('click', function(e) { if (e.target === this) closePaywall(); }); // 初始状态 updateFreeUsesDisplay(3); </script> </body> </html>