{"id":"c7226189-deca-46f1-93b4-bcdcadb21005","name":"json查看器","type":"window","programmingType":"text","description":"json简约查看器，可折叠，高亮显示","matches":[],"exclude":[],"include":[],"code":"// JSON Viewer\nconst jsonViewer = (function() {\n  const container = document.createElement('div');\n  container.style.fontFamily = 'Arial, sans-serif';\n  container.style.maxWidth = '800px';\n  container.style.margin = '20px auto';\n  container.style.padding = '20px';\n  container.style.border = '1px solid #ddd';\n  container.style.borderRadius = '5px';\n  document.body.appendChild(container);\n\n  // Create textarea for JSON input\n  const textarea = document.createElement('textarea');\n  textarea.style.width = '100%';\n  textarea.style.height = '150px';\n  textarea.style.marginBottom = '15px';\n  textarea.style.padding = '10px';\n  textarea.style.border = '1px solid #ccc';\n  textarea.style.borderRadius = '4px';\n  textarea.placeholder = '将json字符粘贴到此...';\n  container.appendChild(textarea);\n\n  // Create parse button\n  const button = document.createElement('button');\n  button.textContent = '解析JSON';\n  button.style.padding = '8px 15px';\n  button.style.backgroundColor = '#4CAF50';\n  button.style.color = 'white';\n  button.style.border = 'none';\n  button.style.borderRadius = '4px';\n  button.style.cursor = 'pointer';\n  container.appendChild(button);\n\n  // Create result container\n  const resultDiv = document.createElement('div');\n  resultDiv.style.marginTop = '20px';\n  resultDiv.style.padding = '15px';\n  resultDiv.style.backgroundColor = '#f9f9f9';\n  resultDiv.style.borderRadius = '4px';\n  resultDiv.style.overflowX = 'auto';\n  container.appendChild(resultDiv);\n\n  // Function to render JSON\n  function renderJSON(data, parentEl) {\n    if (typeof data !== 'object' || data === null) {\n      const span = document.createElement('span');\n      if (typeof data === 'string') {\n        span.textContent = `\"${data}\"`;\n        span.style.color = '#d14';\n      } else if (typeof data === 'number') {\n        span.textContent = data;\n        span.style.color = '#099';\n      } else if (typeof data === 'boolean') {\n        span.textContent = data ? 'true' : 'false';\n        span.style.color = '#099';\n      } else if (data === null) {\n        span.textContent = 'null';\n        span.style.color = '#099';\n      }\n      parentEl.appendChild(span);\n      return;\n    }\n\n    const isArray = Array.isArray(data);\n    const wrapper = document.createElement('div');\n    wrapper.style.marginLeft = '20px';\n\n    const header = document.createElement('div');\n    header.style.cursor = 'pointer';\n    header.style.userSelect = 'none';\n    header.style.display = 'flex';\n    header.style.alignItems = 'center';\n\n    const toggle = document.createElement('span');\n    toggle.textContent = '▼';\n    toggle.style.marginRight = '5px';\n    toggle.style.fontSize = '12px';\n\n    const typeSpan = document.createElement('span');\n    typeSpan.textContent = isArray ? '[' : '{';\n    typeSpan.style.color = '#999';\n\n    header.appendChild(toggle);\n    header.appendChild(typeSpan);\n\n    const countSpan = document.createElement('span');\n    countSpan.textContent = ` ${Object.keys(data).length} ${isArray ? 'items' : 'keys'} `;\n    countSpan.style.color = '#999';\n    countSpan.style.fontSize = '0.9em';\n    countSpan.style.marginLeft = '5px';\n    header.appendChild(countSpan);\n\n    const closingBrace = document.createElement('span');\n    closingBrace.textContent = isArray ? ']' : '}';\n    closingBrace.style.color = '#999';\n    header.appendChild(closingBrace);\n\n    wrapper.appendChild(header);\n\n    const content = document.createElement('div');\n    content.style.display = 'block';\n\n    Object.entries(data).forEach(([key, value]) => {\n      const item = document.createElement('div');\n      item.style.marginTop = '5px';\n\n      const keySpan = document.createElement('span');\n      keySpan.textContent = isArray ? '' : `\"${key}\": `;\n      if (!isArray) {\n        keySpan.style.color = '#0086b3';\n      }\n      item.appendChild(keySpan);\n\n      renderJSON(value, item);\n      content.appendChild(item);\n    });\n\n    wrapper.appendChild(content);\n    parentEl.appendChild(wrapper);\n\n    // Toggle functionality\n    header.addEventListener('click', () => {\n      if (content.style.display === 'none') {\n        content.style.display = 'block';\n        toggle.textContent = '▼';\n      } else {\n        content.style.display = 'none';\n        toggle.textContent = '▶';\n      }\n    });\n  }\n\n  // Parse button click handler\n  button.addEventListener('click', () => {\n    try {\n      const json = JSON.parse(textarea.value);\n      resultDiv.innerHTML = '';\n      renderJSON(json, resultDiv);\n    } catch (e) {\n      resultDiv.innerHTML = `<div style=\"color: red;\">解析错误: ${e.message}</div>`;\n    }\n  });\n\n  return {\n    container,\n    textarea,\n    button,\n    resultDiv\n  };\n})();","installTime":1752732460020,"author":"script dog","version":"1.0.0","enabled":true,"source":"","runAt":"document_idle","useDog":true,"templates":{},"requires":[],"resources":[],"window":{"icon":"","width":"666","height":"555"},"size":4685,"loading":false,"updateTime":1791620136454}