import { LitElement, html, css } from 'lit'; import { I18nProvider } from '@/components'; import { useMeta } from '@/utils'; const $t = new I18nProvider(); export default class extends LitElement { static properties = { inputValue: { type: String }, outputValue: { type: String }, rows: { type: Array }, error: { type: String }, mode: { type: String }, hasProcessed: { type: Boolean }, buffer: { type: Number }, isProcessing: { type: Boolean } }; static LINE_HEIGHT = 18; static VIEWPORT_HEIGHT = 400; static EXPAND_NODE_LIMIT = 2000; static styles = css` .page { min-height: calc(100vh - 140px); padding: 10px; display: flex; align-items: flex-start; justify-content: center; } .main { width: 100%; max-width: 90vw; } .title { text-align: center; font-size: 1.6rem; font-weight: 600; margin-bottom: 4px; color: var(--ro-primary); } .sub-title { text-align: center; font-size: 0.9rem; color: #6b7280; margin-bottom: 16px; } .field-block { width: 100%; } textarea { min-height: 260px; width: 100%; border-radius: 18px; border: 1px solid #d1d5db; padding: 12px 14px; font-size: 0.85rem; box-sizing: border-box; resize: vertical; display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre; } textarea:focus { outline: none; box-shadow: 0 0 0 1px var(--ro-primary); } .controls-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; } .controls-left { flex: 1 1 auto; max-width: 180px; } .controls-right { margin-left: auto; flex: 0 0 auto; } select { width: 100%; border-radius: 999px; padding: 6px 12px; border: 1px solid #d1d5db; font-size: 0.85rem; } select:focus { outline: none; border-color: var(--ro-primary); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3); } .btn { padding: 8px 20px; border-radius: 999px; cursor: pointer; font-size: 0.85rem; border: none; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-primary { background: var(--ro-primary); color: #ffffff; font-size: 1.2rem; transition: transform 0.08s ease, opacity 0.08s ease; } .btn-primary:hover { transform: translateY(-1px); } .btn-primary.loading { opacity: 0.7; cursor: default; transform: none; } .btn-secondary { padding: 0; border-radius: 999px; background: #ffffff; color: var(--ro-primary); border: 1px solid var(--ro-primary); font-weight: 500; font-size: 1.1rem; } .btn-secondary:hover { background: #f3f4f6; } .btn-icon { padding: 0; min-width: 32px; min-height: 32px; } hr { margin: 24px 0; } .error { color: #b91c1c; font-size: 0.85rem; padding: 10px 12px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; white-space: pre-wrap; word-break: break-word; } .result-area { margin: 16px 0; } .result-header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 8px; gap: 6px; } .result-view { border-radius: 12px; border: 1px solid #d1d5de; background: #ffffff; } .json-scroll { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.85rem; padding: 10px 12px; box-sizing: border-box; } .json-line { line-height: 18px; min-height: 18px; user-select: text; } .json-key { color: #005cc5; font-weight: 500; } .json-string { color: #e36209; } .json-number { color: #005cc5; } .json-boolean { color: #e36209; font-weight: 500; } .json-null { color: #6a737d; font-style: italic; } .json-punct { color: #24292e; } `; constructor() { super(); this.inputValue = ""; this.outputValue = ""; this.rows = []; this.error = ""; this.mode = "2"; this.hasProcessed = false; this.buffer = 10; this.isProcessing = false; this._scrollTop = 0; this._viewportHeight = this.constructor.VIEWPORT_HEIGHT; this._lineHeight = this.constructor.LINE_HEIGHT; this._viewportMeasured = false; this._lineHeightMeasured = false; this._idCounter = 0; this.rootId = null; this.nodesById = {}; this.expandedById = {}; this._rowsCache = []; } updated() { if (!this.hasProcessed || !this.rows.length) return; const container = this.renderRoot.querySelector('.json-scroll'); if (!container) return; const nextHeight = container.clientHeight || this.constructor.VIEWPORT_HEIGHT; if (nextHeight !== this._viewportHeight) { this._viewportHeight = nextHeight; this.requestUpdate(); } const sample = container.querySelector('.json-line'); if (sample) { const rect = sample.getBoundingClientRect(); if (rect && rect.height && rect.height !== this._lineHeight) { this._lineHeight = rect.height; this.requestUpdate(); } } } generateId() { this._idCounter += 1; return `n${this._idCounter}`; } onInputChange(e) { this.inputValue = e.target.value; } onModeChange(e) { this.mode = e.target.value || "2"; this.resetResultState(); this.requestUpdate(); } onScroll(e) { this._scrollTop = e.target.scrollTop || 0; this._viewportHeight = e.target.clientHeight || this._viewportHeight; this.requestUpdate(); } copyResult() { const sel = window.getSelection ? window.getSelection() : document.getSelection && document.getSelection(); if (sel && !sel.isCollapsed && sel.toString().length > 0) { const cleaned = sel.toString().replace(/^[▾▸]\s*/gm, ""); navigator.clipboard.writeText(cleaned); return; } if (this.outputValue) navigator.clipboard.writeText(this.outputValue); } resetResultState() { this.hasProcessed = false; this.outputValue = ""; this.rows = []; this.error = ""; this._scrollTop = 0; this._viewportMeasured = false; this._lineHeightMeasured = false; this.rootId = null; this.nodesById = {}; this.expandedById = {}; this._idCounter = 0; this._rowsCache = []; } process() { if (this.isProcessing) return; this.isProcessing = true; this.resetResultState(); const raw = (this.inputValue || "").trim(); if (!raw) { this.error = $t("jsonViewer_inputRequired"); this.isProcessing = false; return; } setTimeout(() => { try { const parsed = JSON.parse(raw); const n = parseInt(this.mode, 10); const indent = Number.isNaN(n) ? 2 : n || 2; this.outputValue = JSON.stringify(parsed, null, indent); this.rootId = this.buildTree(parsed, null, null, false); this.initializeExpandState(); this.rebuildRows(); this.hasProcessed = true; } catch (err) { this.error = err?.message || "Invalid JSON"; } finally { this.isProcessing = false; } }, 0); } buildTree(value, parentId, key, parentIsArray) { const id = this.generateId(); const isArray = Array.isArray(value); const isObject = !isArray && value !== null && typeof value === "object"; const type = isArray ? "array" : isObject ? "object" : "value"; const valueType = value === null ? "null" : typeof value; const node = { id, parentId, key: parentIsArray ? null : key, type, valueType, value: type === "value" ? value : null, childrenIds: [] }; this.nodesById[id] = node; if (type === "object") { const entries = Object.entries(value || {}); for (let i = 0; i < entries.length; i += 1) { const [childKey, childVal] = entries[i]; node.childrenIds.push(this.buildTree(childVal, id, childKey, false)); } } else if (type === "array") { const arr = value || []; for (let i = 0; i < arr.length; i += 1) { node.childrenIds.push(this.buildTree(arr[i], id, null, true)); } } return id; } initializeExpandState() { if (!this.rootId) return; this.expandedById[this.rootId] = true; const root = this.nodesById[this.rootId]; const kids = root?.childrenIds || []; const nodeCount = Object.keys(this.nodesById).length; if (nodeCount <= this.constructor.EXPAND_NODE_LIMIT) { for (let i = 0; i < kids.length; i += 1) { const id = kids[i]; const n = this.nodesById[id]; if (n && (n.type === "object" || n.type === "array")) { this.expandedById[id] = true; } } } if (root?.type === "array") { this.expandedById[root.id] = true; const firstItemId = root.childrenIds?.[0]; const firstItem = firstItemId ? this.nodesById[firstItemId] : null; if (firstItem && (firstItem.type === "object" || firstItem.type === "array")) { this.expandedById[firstItem.id] = true; } } else { for (let i = 0; i < kids.length; i += 1) { const child = this.nodesById[kids[i]]; if (!child || child.type !== "array") continue; this.expandedById[child.id] = true; const firstItemId = child.childrenIds?.[0]; const firstItem = firstItemId ? this.nodesById[firstItemId] : null; if (firstItem && (firstItem.type === "object" || firstItem.type === "array")) { this.expandedById[firstItem.id] = true; } } } } formatNodeText(node, isExpanded) { const hasKey = node.key !== null && node.key !== undefined; const keyPart = hasKey ? JSON.stringify(node.key) + ": " : ""; if (node.type === "object") { if (!node.childrenIds.length) return keyPart + "{}"; return keyPart + (isExpanded ? "{" : "{...}"); } if (node.type === "array") { if (!node.childrenIds.length) return keyPart + "[]"; return keyPart + (isExpanded ? "[" : "[...]"); } if (node.valueType === "string") return keyPart + JSON.stringify(node.value); if (node.valueType === "number" || node.valueType === "boolean") return keyPart + String(node.value); if (node.valueType === "null") return keyPart + "null"; return keyPart + JSON.stringify(node.value); } rebuildRows() { if (!this.rootId) { this._rowsCache = []; this.rows = []; return; } const rows = []; const stack = [{ id: this.rootId, depth: 0, isLastSibling: true, phase: "open" }]; while (stack.length) { const frame = stack.pop(); const node = this.nodesById[frame.id]; if (!node) continue; if (frame.phase === "close") { rows.push({ id: `${frame.id}_close`, depth: frame.depth, text: node.type === "object" ? "}" : "]", isExpandable: false, isExpanded: false, isClosing: true, trailingComma: !frame.isLastSibling, tokens: [{ cls: "json-punct", text: node.type === "object" ? "}" : "]" }] }); continue; } const isExpandable = node.type === "object" || node.type === "array"; const isExpanded = !!this.expandedById[frame.id]; const hasChildren = !!node.childrenIds.length; const text = this.formatNodeText(node, isExpanded); rows.push({ id: frame.id, depth: frame.depth, text, isExpandable, isExpanded, isClosing: false, trailingComma: !frame.isLastSibling && (!isExpandable || !isExpanded), tokens: this.parseTokens(text) }); if (isExpandable && isExpanded && hasChildren) { stack.push({ id: frame.id, depth: frame.depth, isLastSibling: frame.isLastSibling, phase: "close" }); for (let i = node.childrenIds.length - 1; i >= 0; i -= 1) { stack.push({ id: node.childrenIds[i], depth: frame.depth + 1, isLastSibling: i === node.childrenIds.length - 1, phase: "open" }); } } } this._rowsCache = rows; this.rows = rows; } onRowClick(row) { if (!row.isExpandable || row.isClosing) return; this.expandedById[row.id] = !this.expandedById[row.id]; this.rebuildRows(); this.requestUpdate(); } getVisibleRowsInfo() { const total = this.rows ? this.rows.length : 0; if (!total) return { start: 0, end: 0, top: 0, bottom: 0 }; const lh = this._lineHeight || this.constructor.LINE_HEIGHT; const st = this._scrollTop; const vh = this._viewportHeight || this.constructor.VIEWPORT_HEIGHT; const buf = this.buffer || 0; let start = Math.floor(st / lh) - buf; if (start < 0) start = 0; let end = Math.ceil((st + vh) / lh) + buf; if (end > total) end = total; return { start, end, top: start * lh, bottom: (total - end) * lh }; } parseTokens(text) { const tokens = []; let rest = text; const keyMatch = rest.match(/^(".*?")(:\s*)(.*)$/); if (keyMatch) { tokens.push({ cls: "json-key", text: keyMatch[1] }); tokens.push({ cls: "json-punct", text: keyMatch[2] }); rest = keyMatch[3]; } while (rest.length) { const ch = rest[0]; if (/\s/.test(ch)) { let i = 1; while (i < rest.length && /\s/.test(rest[i])) i += 1; tokens.push({ cls: null, text: rest.slice(0, i) }); rest = rest.slice(i); continue; } if (ch === '"') { let i = 1; let str = '"'; while (i < rest.length) { const c = rest[i]; str += c; if (c === '"' && rest[i - 1] !== "\\") { i += 1; break; } i += 1; } tokens.push({ cls: "json-string", text: str }); rest = rest.slice(i); continue; } if (/[{}\[\],]/.test(ch)) { tokens.push({ cls: "json-punct", text: ch }); rest = rest.slice(1); continue; } let i = 1; while (i < rest.length && /[^\s{}\[\],]/.test(rest[i])) i += 1; const word = rest.slice(0, i); if (word === "true" || word === "false") tokens.push({ cls: "json-boolean", text: word }); else if (word === "null") tokens.push({ cls: "json-null", text: word }); else if (/^-?\d+(\.\d+)?([eE][+-]?\d+)?$/.test(word)) tokens.push({ cls: "json-number", text: word }); else tokens.push({ cls: null, text: word }); rest = rest.slice(i); } return tokens; } renderRow(row) { const indentSpaces = parseInt(this.mode, 10) || 2; const pxPerDepth = indentSpaces * 8; const indent = row.depth * pxPerDepth; const marker = row.isExpandable ? (row.isExpanded ? "▾ " : "▸ ") : ""; const cursor = row.isExpandable && !row.isClosing ? "pointer" : "default"; return html`

this.onRowClick(row)}> ${marker}${row.tokens.map((t) => (t.cls ? html`${t.text}` : t.text))}${row.trailingComma ? html`,` : ""}

`; } renderTreeResult() { if (!this.hasProcessed || !this.rows.length) return null; const info = this.getVisibleRowsInfo(); const visibleRows = this.rows.slice(info.start, info.end); return html`

${visibleRows.map((row) => this.renderRow(row))}

`; } selectAllOutputText() { const box = this.renderRoot.querySelector('.json-scroll'); if (!box) return; const sel = window.getSelection ? window.getSelection() : null; if (!sel) return; const range = document.createRange(); range.selectNodeContents(box); sel.removeAllRanges(); sel.addRange(range); } onOutputKeydown(e) { const withMeta = e.ctrlKey || e.metaKey; if (!withMeta) return; const key = (e.key || '').toLowerCase(); if (key === 'a') { e.preventDefault(); this.selectAllOutputText(); } } renderResult() { if (this.error) return html`

${this.error}

`; return this.renderTreeResult(); } render() { useMeta({ title: $t("jsonViewer_title"), meta: { description: { name: 'description', content: $t('jsonViewer_subtitle') }, } }) const processBtnClass = "btn btn-primary" + (this.isProcessing ? " loading" : ""); const processLabel = this.isProcessing ? $t("jsonViewer_processing") : $t("jsonViewer_process"); return html`

${$t("jsonViewer_title")}

${$t("jsonViewer_subtitle")}

${this.hasProcessed || this.error ? html`

${this.renderResult()}` : ""}

`; } };