diff --git a/css/pages/facilities.css b/css/pages/facilities.css index 0ec20a8..1f165fd 100644 --- a/css/pages/facilities.css +++ b/css/pages/facilities.css @@ -313,7 +313,7 @@ .modal-title { font-size: 32px; font-weight: 700; - margin-bottom: 16px; + margin-bottom: 0; line-height: 1.2; } @@ -491,3 +491,643 @@ padding: 60px 24px 20px; } } + +/* ========== Editor Modal ========== */ + +.title-with-action { + display: flex; + align-items: center; + gap: 16px; +} + +.btn-add-facility { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 8px 18px; + background: var(--accent-color); + color: #fff; + border: none; + border-radius: 20px; + font-size: 13px; + font-weight: 600; + cursor: pointer; + transition: var(--transition); + white-space: nowrap; +} + +.btn-add-facility:hover { + background: #005bb5; + transform: translateY(-1px); +} + +.modal-title-row { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 16px; + margin-bottom: 16px; +} + +.btn-edit-facility { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 16px; + background: transparent; + color: var(--accent-color); + border: 1.5px solid var(--accent-color); + border-radius: 18px; + font-size: 13px; + font-weight: 600; + cursor: pointer; + transition: var(--transition); + white-space: nowrap; + flex-shrink: 0; +} + +.btn-edit-facility:hover { + background: var(--accent-color); + color: #fff; +} + +/* Editor Modal Layout */ +.editor-modal-content { + background-color: #fff; + margin: 20px auto; + border-radius: var(--radius-large); + max-width: 1280px; + width: 95%; + padding: 0; + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); + position: relative; + max-height: calc(100vh - 40px); + overflow: hidden; + display: flex; + flex-direction: column; +} + +.close-editor-modal, +.close-json-modal { + position: absolute; + top: 16px; + right: 20px; + font-size: 24px; + color: var(--text-secondary); + cursor: pointer; + transition: 0.2s; + z-index: 10; + background: rgba(255,255,255,0.9); + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; +} + +.close-editor-modal:hover, +.close-json-modal:hover { + background: #f0f0f0; + color: var(--text-primary); +} + +.editor-modal-header { + padding: 20px 28px; + border-bottom: 1px solid rgba(0,0,0,0.08); + background: linear-gradient(to bottom, #fff, #fafafa); + border-radius: var(--radius-large) var(--radius-large) 0 0; + flex-shrink: 0; +} + +.editor-modal-header h3 { + font-size: 22px; + font-weight: 700; + display: flex; + align-items: center; + gap: 10px; +} + +.editor-layout { + display: flex; + flex: 1; + overflow: hidden; + min-height: 0; +} + +.editor-preview { + flex: 0 0 45%; + display: flex; + flex-direction: column; + border-right: 1px solid rgba(0,0,0,0.08); + background: #f5f5f7; +} + +.editor-panel-title { + font-size: 12px; + font-weight: 700; + color: var(--text-secondary); + padding: 14px 24px; + border-bottom: 1px solid rgba(0,0,0,0.05); + display: flex; + align-items: center; + gap: 8px; + text-transform: uppercase; + letter-spacing: 0.6px; + flex-shrink: 0; + background: rgba(255,255,255,0.6); +} + +.editor-preview-content { + flex: 1; + overflow-y: auto; + padding: 20px; +} + +.editor-preview-content::-webkit-scrollbar, +.editor-form-scroll::-webkit-scrollbar { + width: 5px; +} + +.editor-preview-content::-webkit-scrollbar-track, +.editor-form-scroll::-webkit-scrollbar-track { + background: transparent; +} + +.editor-preview-content::-webkit-scrollbar-thumb, +.editor-form-scroll::-webkit-scrollbar-thumb { + background: rgba(0,0,0,0.12); + border-radius: 10px; +} + +/* Preview Card */ +.preview-facility { + background: #fff; + border-radius: 16px; + box-shadow: 0 2px 12px rgba(0,0,0,0.06); + overflow: hidden; +} + +.preview-header { + padding: 24px 24px 16px; + background: linear-gradient(to bottom, #fff, #fafafa); + border-bottom: 1px solid rgba(0,0,0,0.05); +} + +.preview-title { + font-size: 22px; + font-weight: 700; + margin-bottom: 12px; + line-height: 1.2; +} + +.preview-body { + padding: 20px 24px 24px; +} + +.preview-body .modal-section { + margin-top: 20px; +} + +.preview-body .modal-section-title { + font-size: 14px; +} + +.preview-intro { + font-size: 15px; + line-height: 1.6; + color: var(--text-primary); + margin-bottom: 20px; +} + +.text-secondary { + color: var(--text-secondary); +} + +/* Editor Form */ +.editor-form { + flex: 0 0 55%; + display: flex; + flex-direction: column; + min-width: 0; +} + +.editor-form-scroll { + flex: 1; + overflow-y: auto; + padding: 24px 28px 40px; +} + +.form-group { + margin-bottom: 22px; +} + +.form-group > label { + display: block; + font-size: 12px; + font-weight: 700; + color: var(--text-secondary); + margin-bottom: 8px; + text-transform: uppercase; + letter-spacing: 0.4px; +} + +.form-group input[type="text"], +.form-group input[type="number"], +.form-group textarea, +.form-group select { + width: 100%; + padding: 10px 14px; + border: 1.5px solid rgba(0,0,0,0.1); + border-radius: 12px; + font-size: 14px; + font-family: inherit; + background: #f9f9fa; + transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; + color: var(--text-primary); +} + +.form-group input:focus, +.form-group textarea:focus, +.form-group select:focus { + outline: none; + border-color: var(--accent-color); + background: #fff; + box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1); +} + +.form-group textarea { + resize: vertical; + min-height: 60px; +} + +.form-row { + display: flex; + gap: 14px; +} + +.form-row .form-group { + flex: 1; +} + +/* Tags Input */ +.tags-input-wrapper { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; + padding: 8px 12px; + border: 1.5px solid rgba(0,0,0,0.1); + border-radius: 12px; + background: #f9f9fa; + transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; + cursor: text; +} + +.tags-input-wrapper:focus-within { + border-color: var(--accent-color); + background: #fff; + box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1); +} + +.tags-list { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.editor-tag { + display: inline-flex; + align-items: center; + gap: 6px; + background: var(--accent-color); + color: #fff; + padding: 4px 10px; + border-radius: 14px; + font-size: 12px; + font-weight: 600; +} + +.editor-tag-remove { + cursor: pointer; + opacity: 0.7; + transition: 0.2s; + font-size: 10px; +} + +.editor-tag-remove:hover { + opacity: 1; +} + +.tags-input-wrapper input { + border: none !important; + background: transparent !important; + padding: 4px 0 !important; + font-size: 13px; + flex: 1; + min-width: 140px; + box-shadow: none !important; +} + +.tags-input-wrapper input:focus { + outline: none; +} + +/* Sortable List */ +.sortable-list { + min-height: 8px; + margin-bottom: 10px; +} + +.sortable-item { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 10px 12px; + margin-bottom: 8px; + background: #fff; + border: 1.5px solid rgba(0,0,0,0.08); + border-radius: 12px; + transition: box-shadow 0.2s, border-color 0.2s, opacity 0.2s; +} + +.sortable-item:last-child { + margin-bottom: 0; +} + +.sortable-item:hover { + border-color: rgba(0,0,0,0.15); + box-shadow: 0 2px 8px rgba(0,0,0,0.04); +} + +.sortable-item.dragging { + opacity: 0.4; + border-color: var(--accent-color); +} + +.sortable-item.drag-over { + border-color: var(--accent-color); + box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.15); +} + +.drag-handle { + cursor: grab; + color: var(--text-secondary); + padding: 6px 2px; + font-size: 14px; + opacity: 0.35; + transition: 0.2s; + flex-shrink: 0; +} + +.drag-handle:active { + cursor: grabbing; +} + +.sortable-item:hover .drag-handle { + opacity: 0.7; +} + +.item-type-badge { + font-size: 10px; + font-weight: 700; + padding: 3px 8px; + border-radius: 6px; + white-space: nowrap; + flex-shrink: 0; + margin-top: 6px; + text-transform: uppercase; + letter-spacing: 0.3px; +} + +.badge-text { + background: #e8f5e9; + color: #2e7d32; +} + +.badge-image { + background: #e3f2fd; + color: #1565c0; +} + +.sortable-item .item-content { + flex: 1; + border: 1px solid rgba(0,0,0,0.06) !important; + border-radius: 8px !important; + padding: 8px 10px !important; + font-size: 13px !important; + background: #fafafa !important; + min-height: unset; + font-family: inherit; + resize: vertical; +} + +.sortable-item .item-content:focus { + border-color: var(--accent-color) !important; + background: #fff !important; + box-shadow: none !important; +} + +.remove-item-btn { + background: none; + border: none; + color: #ccc; + cursor: pointer; + padding: 6px; + border-radius: 8px; + transition: 0.2s; + flex-shrink: 0; + margin-top: 3px; + font-size: 13px; +} + +.remove-item-btn:hover { + color: #ef4444; + background: #fef2f2; +} + +.add-item-row { + display: flex; + gap: 8px; +} + +.add-item-btn { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 8px 14px; + background: #f5f5f7; + border: 1.5px dashed rgba(0,0,0,0.12); + border-radius: 10px; + font-size: 12px; + font-weight: 600; + color: var(--text-secondary); + cursor: pointer; + transition: var(--transition); +} + +.add-item-btn:hover { + border-color: var(--accent-color); + color: var(--accent-color); + background: #f0f7ff; +} + +/* Editor Actions */ +.editor-actions { + margin-top: 28px; + padding-top: 20px; + border-top: 1px solid rgba(0,0,0,0.08); + display: flex; + justify-content: flex-end; +} + +.btn-save-facility { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 12px 28px; + background: var(--brand-green); + color: #fff; + border: none; + border-radius: 14px; + font-size: 15px; + font-weight: 700; + cursor: pointer; + transition: var(--transition); +} + +.btn-save-facility:hover { + background: #2db84d; + transform: translateY(-1px); + box-shadow: 0 4px 16px rgba(52, 199, 89, 0.3); +} + +/* JSON Output Modal */ +.json-output-content { + background-color: #fff; + margin: 60px auto; + border-radius: var(--radius-large); + max-width: 640px; + width: 90%; + padding: 36px; + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); + position: relative; +} + +.json-output-content h3 { + font-size: 20px; + font-weight: 700; + margin-bottom: 8px; + display: flex; + align-items: center; + gap: 10px; +} + +.json-output-hint { + font-size: 14px; + color: var(--text-secondary); + margin-bottom: 20px; + line-height: 1.5; +} + +#json-output { + width: 100%; + height: 300px; + padding: 16px; + border: 1.5px solid rgba(0,0,0,0.1); + border-radius: 12px; + font-family: 'Courier New', Courier, monospace; + font-size: 12px; + background: #f5f5f7; + color: var(--text-primary); + resize: vertical; + margin-bottom: 16px; +} + +#json-output:focus { + outline: none; + border-color: var(--accent-color); +} + +.btn-copy-json { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 24px; + background: var(--accent-color); + color: #fff; + border: none; + border-radius: 12px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: var(--transition); + width: 100%; + justify-content: center; +} + +.btn-copy-json:hover { + background: #005bb5; +} + +/* ========== Editor Responsive ========== */ + +@media (max-width: 900px) { + .editor-modal-content { + margin: 0; + width: 100%; + max-width: 100%; + max-height: 100%; + height: 100%; + border-radius: 0; + } + + .editor-layout { + flex-direction: column; + } + + .editor-preview { + flex: none; + max-height: 35vh; + border-right: none; + border-bottom: 1px solid rgba(0,0,0,0.08); + } + + .editor-form { + flex: 1; + min-height: 0; + } + + .form-row { + flex-direction: column; + gap: 0; + } + + .close-editor-modal { + top: 12px; + right: 14px; + } +} + +@media (max-width: 768px) { + .title-with-action { + flex-wrap: wrap; + gap: 10px; + } + + .json-output-content { + margin: 0; + width: 100%; + height: 100%; + max-height: 100%; + border-radius: 0; + } + + .editor-modal-header { + padding: 16px 20px; + } + + .editor-form-scroll { + padding: 20px; + } +} diff --git a/facilities.html b/facilities.html index a476df1..6e64c24 100644 --- a/facilities.html +++ b/facilities.html @@ -26,7 +26,12 @@
-

设施列表

+
+

设施列表

+ +
@@ -71,7 +76,12 @@
×
- +
+ + +
@@ -115,6 +125,126 @@
+ + + + + + diff --git a/js/facilities_script.js b/js/facilities_script.js index 4b8cfd6..60db63d 100644 --- a/js/facilities_script.js +++ b/js/facilities_script.js @@ -17,6 +17,8 @@ document.addEventListener('DOMContentLoaded', () => { search: '' }; + let currentDetailItem = null; + // 1. Fetch Data fetch('data/facilities.json') .then(response => response.json()) @@ -120,6 +122,7 @@ document.addEventListener('DOMContentLoaded', () => { } function openModal(item) { + currentDetailItem = item; // Populate specific fields document.getElementById('modal-title').innerText = item.title; document.getElementById('modal-intro').innerText = item.intro; @@ -250,4 +253,390 @@ document.addEventListener('DOMContentLoaded', () => { }; return map[dim] || 'world'; } + + // ========== Editor Modal Logic ========== + + const editorModal = document.getElementById('editor-modal'); + const jsonOutputModal = document.getElementById('json-output-modal'); + const closeEditorModal = document.querySelector('.close-editor-modal'); + const closeJsonModal = document.querySelector('.close-json-modal'); + + // Open empty editor for new facility + document.getElementById('btn-add-facility').addEventListener('click', () => { + openEditor(null); + }); + + // Open editor from detail modal + document.getElementById('btn-edit-facility').addEventListener('click', () => { + if (currentDetailItem) { + modal.style.display = 'none'; + document.body.style.overflow = 'auto'; + openEditor(currentDetailItem); + } + }); + + // Close editor modal + closeEditorModal.addEventListener('click', () => { + editorModal.style.display = 'none'; + document.body.style.overflow = 'auto'; + }); + window.addEventListener('click', (e) => { + if (e.target === editorModal) { + editorModal.style.display = 'none'; + document.body.style.overflow = 'auto'; + } + if (e.target === jsonOutputModal) { + jsonOutputModal.style.display = 'none'; + } + }); + closeJsonModal.addEventListener('click', () => { + jsonOutputModal.style.display = 'none'; + }); + + // State for editor + let editorContributors = []; + let editorInstructions = []; + let editorNotes = []; + + function openEditor(item) { + // Reset state + editorContributors = item ? [...item.contributors] : []; + editorInstructions = item ? item.instructions.map(i => ({...i})) : []; + editorNotes = item ? item.notes.map(n => ({...n})) : []; + + // Populate form fields + document.getElementById('editor-title').value = item ? item.title : ''; + document.getElementById('editor-intro').value = item ? item.intro : ''; + document.getElementById('editor-type').value = item ? item.type : 'resource'; + document.getElementById('editor-status').value = item ? item.status : 'online'; + document.getElementById('editor-dimension').value = item ? item.dimension : 'overworld'; + document.getElementById('editor-x').value = item ? item.coordinates.x : ''; + document.getElementById('editor-y').value = item ? item.coordinates.y : ''; + document.getElementById('editor-z').value = item ? item.coordinates.z : ''; + + renderContributorTags(); + renderSortableList('editor-instructions-list', editorInstructions); + renderSortableList('editor-notes-list', editorNotes); + updatePreview(); + + editorModal.style.display = 'block'; + document.body.style.overflow = 'hidden'; + } + + // --- Contributors tags --- + function renderContributorTags() { + const container = document.getElementById('editor-contributors-tags'); + container.innerHTML = ''; + editorContributors.forEach((name, idx) => { + const tag = document.createElement('span'); + tag.className = 'editor-tag'; + tag.innerHTML = `${name} `; + container.appendChild(tag); + }); + } + + document.getElementById('editor-contributors-tags').addEventListener('click', (e) => { + const removeBtn = e.target.closest('.editor-tag-remove'); + if (removeBtn) { + const idx = parseInt(removeBtn.dataset.idx); + editorContributors.splice(idx, 1); + renderContributorTags(); + updatePreview(); + } + }); + + document.getElementById('editor-contributor-input').addEventListener('keydown', (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + const val = e.target.value.trim(); + if (val && !editorContributors.includes(val)) { + editorContributors.push(val); + renderContributorTags(); + updatePreview(); + } + e.target.value = ''; + } + }); + + // Click on wrapper focuses input + document.getElementById('editor-contributors-wrapper').addEventListener('click', () => { + document.getElementById('editor-contributor-input').focus(); + }); + + // --- Sortable Lists (drag-and-drop) --- + let dragState = { listId: null, fromIdx: null }; + + function renderSortableList(listId, items) { + const container = document.getElementById(listId); + container.innerHTML = ''; + items.forEach((item, idx) => { + const div = document.createElement('div'); + div.className = 'sortable-item'; + div.draggable = true; + div.dataset.idx = idx; + div.dataset.listId = listId; + + const isText = item.type === 'text'; + div.innerHTML = ` + + ${isText ? '文字' : '图片'} + ${isText + ? `` + : `` + } + + `; + container.appendChild(div); + + // Drag events + div.addEventListener('dragstart', onDragStart); + div.addEventListener('dragover', onDragOver); + div.addEventListener('dragenter', onDragEnter); + div.addEventListener('dragleave', onDragLeave); + div.addEventListener('drop', onDrop); + div.addEventListener('dragend', onDragEnd); + + // Content change + const contentEl = div.querySelector('.item-content'); + contentEl.addEventListener('input', () => { + items[idx].content = contentEl.value; + updatePreview(); + }); + + // Remove + div.querySelector('.remove-item-btn').addEventListener('click', () => { + items.splice(idx, 1); + renderSortableList(listId, items); + updatePreview(); + }); + }); + } + + function onDragStart(e) { + const item = e.target.closest('.sortable-item'); + if (!item) return; + dragState.listId = item.dataset.listId; + dragState.fromIdx = parseInt(item.dataset.idx); + item.classList.add('dragging'); + e.dataTransfer.effectAllowed = 'move'; + e.dataTransfer.setData('text/plain', ''); // required for Firefox + } + + function onDragOver(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'move'; + } + + function onDragEnter(e) { + const item = e.target.closest('.sortable-item'); + if (item && item.dataset.listId === dragState.listId) { + item.classList.add('drag-over'); + } + } + + function onDragLeave(e) { + const item = e.target.closest('.sortable-item'); + if (item) { + item.classList.remove('drag-over'); + } + } + + function onDrop(e) { + e.preventDefault(); + const item = e.target.closest('.sortable-item'); + if (!item || item.dataset.listId !== dragState.listId) return; + const toIdx = parseInt(item.dataset.idx); + const fromIdx = dragState.fromIdx; + if (fromIdx === toIdx) return; + + const listId = dragState.listId; + const items = listId === 'editor-instructions-list' ? editorInstructions : editorNotes; + + // Reorder + const [moved] = items.splice(fromIdx, 1); + items.splice(toIdx, 0, moved); + + renderSortableList(listId, items); + updatePreview(); + } + + function onDragEnd(e) { + document.querySelectorAll('.sortable-item').forEach(el => { + el.classList.remove('dragging', 'drag-over'); + }); + dragState = { listId: null, fromIdx: null }; + } + + // --- Add item buttons --- + document.querySelectorAll('.add-item-btn').forEach(btn => { + btn.addEventListener('click', () => { + const target = btn.dataset.target; // 'instructions' or 'notes' + const type = btn.dataset.type; // 'text' or 'image' + const newItem = { type: type, content: '' }; + + if (target === 'instructions') { + editorInstructions.push(newItem); + renderSortableList('editor-instructions-list', editorInstructions); + } else { + editorNotes.push(newItem); + renderSortableList('editor-notes-list', editorNotes); + } + updatePreview(); + }); + }); + + // --- Live Preview --- + // Listen for form field changes to update preview + ['editor-title', 'editor-intro', 'editor-type', 'editor-status', + 'editor-dimension', 'editor-x', 'editor-y', 'editor-z'].forEach(id => { + document.getElementById(id).addEventListener('input', updatePreview); + document.getElementById(id).addEventListener('change', updatePreview); + }); + + function updatePreview() { + const preview = document.getElementById('editor-preview-area'); + const title = document.getElementById('editor-title').value || '未命名设施'; + const intro = document.getElementById('editor-intro').value || '暂无简介'; + const type = document.getElementById('editor-type').value; + const status = document.getElementById('editor-status').value; + const dimension = document.getElementById('editor-dimension').value; + const x = document.getElementById('editor-x').value || '0'; + const y = document.getElementById('editor-y').value || '64'; + const z = document.getElementById('editor-z').value || '0'; + + const statusText = getStatusText(status); + const statusIcon = getStatusIcon(status); + const typeText = getTypeText(type); + const dimensionText = getDimensionText(dimension); + + let html = `
`; + html += `
`; + html += `
${escapeHtml(title)}
`; + html += `
`; + html += ` ${statusText}`; + html += ` ${typeText}`; + html += `
`; + html += `
`; + + html += `
`; + html += `

${escapeHtml(intro)}

`; + + // Location + html += `
`; + html += `

位置信息

`; + html += `

${dimensionText}: X: ${escapeHtml(x)}, Y: ${escapeHtml(y)}, Z: ${escapeHtml(z)}

`; + html += `
`; + + // Contributors + html += `
`; + html += `

贡献/维护人员

`; + if (editorContributors.length > 0) { + html += `
`; + editorContributors.forEach(name => { + html += `
${escapeHtml(name)}${escapeHtml(name)}
`; + }); + html += `
`; + } else { + html += `暂无记录`; + } + html += `
`; + + // Instructions + html += `
`; + html += `

使用说明

`; + html += `
`; + if (editorInstructions.length > 0) { + editorInstructions.forEach(block => { + if (block.type === 'text') { + html += `

${escapeHtml(block.content) || '空文字'}

`; + } else { + html += block.content ? `` : '

空图片

'; + } + }); + } else { + html += `

无

`; + } + html += `
`; + + // Notes + html += `
`; + html += `

注意事项

`; + html += `
`; + if (editorNotes.length > 0) { + editorNotes.forEach(block => { + if (block.type === 'text') { + html += `

${escapeHtml(block.content) || '空文字'}

`; + } else { + html += block.content ? `` : '

空图片

'; + } + }); + } else { + html += `

无

`; + } + html += `
`; + + html += `
`; + preview.innerHTML = html; + } + + // --- Save / Generate JSON --- + document.getElementById('btn-save-facility').addEventListener('click', () => { + const title = document.getElementById('editor-title').value.trim(); + if (!title) { + alert('请填写设施名称'); + document.getElementById('editor-title').focus(); + return; + } + + const facilityObj = { + title: title, + intro: document.getElementById('editor-intro').value.trim(), + type: document.getElementById('editor-type').value, + dimension: document.getElementById('editor-dimension').value, + status: document.getElementById('editor-status').value, + coordinates: { + x: parseInt(document.getElementById('editor-x').value) || 0, + y: parseInt(document.getElementById('editor-y').value) || 64, + z: parseInt(document.getElementById('editor-z').value) || 0 + }, + contributors: [...editorContributors], + instructions: editorInstructions.filter(i => i.content.trim() !== ''), + notes: editorNotes.filter(n => n.content.trim() !== '') + }; + + const jsonStr = JSON.stringify(facilityObj, null, 4); + document.getElementById('json-output').value = jsonStr; + + jsonOutputModal.style.display = 'block'; + }); + + // --- Copy JSON --- + document.getElementById('btn-copy-json').addEventListener('click', () => { + const textArea = document.getElementById('json-output'); + textArea.select(); + textArea.setSelectionRange(0, 99999); + + navigator.clipboard.writeText(textArea.value).then(() => { + const btn = document.getElementById('btn-copy-json'); + const originalHTML = btn.innerHTML; + btn.innerHTML = ' 已复制！'; + btn.style.background = '#34c759'; + setTimeout(() => { + btn.innerHTML = originalHTML; + btn.style.background = ''; + }, 2000); + }).catch(() => { + // Fallback + document.execCommand('copy'); + alert('已复制到剪贴板'); + }); + }); + + // --- Utility --- + function escapeHtml(text) { + if (!text) return ''; + const div = document.createElement('div'); + div.appendChild(document.createTextNode(text)); + return div.innerHTML; + } });