✨ 配置管理工具：底部双操作按钮 + 自适应滚动JSON预览完整版

好的！以下是根据你的需求 **全面优化后的完整 HTML + CSS + JavaScript 版本**，已精准实现以下两点： ✅ **1. “备份文字” 改为 “创建备份”，并移至底部，与“导入备份”水平对齐（左右并排）** ✅ **2. 右侧预览区（JSON 显示区域）改为固定高度 + 垂直滚动（`overflow-y: auto`），字体略小、高度适中，仅显示内容所需高度（最小 120px，最大 300px），不再无限拉长页面** 同时保持整体简洁、响应式、语义清晰，兼容主流浏览器。 --- ### ✅ 完整可运行代码（复制即用） ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>配置管理工具</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; } header h1 { text-align: center; margin-bottom: 24px; color: #2c3e50; font-weight: 600; } .layout { display: flex; gap: 24px; flex-wrap: wrap; } .panel { flex: 1; min-width: 300px; background: white; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); overflow: hidden; } .panel-header { padding: 14px 18px; background: #3498db; color: white; font-weight: 600; font-size: 15px; } .panel-body { padding: 18px; } /* 左侧：表单区 */ .form-group { margin-bottom: 16px; } label { display: block; margin-bottom: 6px; font-weight: 500; color: #444; } input[type="text"], input[type="number"], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; transition: border-color 0.2s; } input:focus, select:focus, textarea:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); } textarea { min-height: 100px; resize: vertical; } /* 右侧：JSON 预览区 */ .json-preview { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 13px; line-height: 1.5; background: #2d2d2d; color: #f8f8f2; padding: 14px; border-radius: 4px; white-space: pre-wrap; word-break: break-word; overflow-x: auto; /* 关键：限制高度 + 滚动 */ max-height: 300px; min-height: 120px; overflow-y: auto; border: 1px solid #444; } /* 底部操作栏 */ .footer-actions { display: flex; justify-content: space-between; margin-top: 24px; gap: 12px; flex-wrap: wrap; } .btn { padding: 10px 18px; border: none; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .btn-primary { background: #3498db; color: white; } .btn-primary:hover { background: #2980b9; } .btn-secondary { background: #2ecc71; color: white; } .btn-secondary:hover { background: #27ae60; } /* 小屏适配 */ @media (max-width: 768px) { .layout { flex-direction: column; } .footer-actions { flex-direction: column; } } </style> </head> <body> <div class="container"> <header> <h1>⚙️ 配置管理工具</h1> </header> <main class="layout">  <section class="panel"> <div class="panel-header">📝 编辑配置</div> <div class="panel-body"> <div class="form-group"> <label for="appName">应用名称</label> <input type="text" id="appName" value="MyApp" /> </div> <div class="form-group"> <label for="version">版本号</label> <input type="text" id="version" value="1.2.0" /> </div> <div class="form-group"> <label for="timeout">超时时间（毫秒）</label> <input type="number" id="timeout" value="5000" min="100" /> </div> <div class="form-group"> <label for="env">运行环境</label> <select id="env"> <option value="dev">开发环境</option> <option value="test">测试环境</option> <option value="prod" selected>生产环境</option> </select> </div> <div class="form-group"> <label for="features">启用特性（JSON 数组）</label> <textarea id="features">["auth", "analytics", "darkMode"]</textarea> </div> </div> </section>  <section class="panel"> <div class="panel-header">🔍 JSON 预览</div> <div class="panel-body"> <pre class="json-preview" id="jsonOutput">{}</pre> </div> </section> </main>  <div class="footer-actions"> <button class="btn btn-secondary" id="createBackup">➕ 创建备份</button> <button class="btn btn-primary" id="importBackup">📤 导入备份</button> </div> </div> <script> // 初始化 JSON 预览 function updateJsonPreview() { const data = { appName: document.getElementById("appName").value || "", version: document.getElementById("version").value || "", timeout: parseInt(document.getElementById("timeout").value) || 0, env: document.getElementById("env").value || "", features: (() => { try { return JSON.parse(document.getElementById("features").value); } catch (e) { return []; } })() }; const jsonStr = JSON.stringify(data, null, 2); document.getElementById("jsonOutput").textContent = jsonStr; } // 绑定输入事件 document.querySelectorAll("input, select, textarea").forEach(el => { el.addEventListener("input", updateJsonPreview); }); // 页面加载时刷新一次 updateJsonPreview(); // 创建备份（示例：下载为文件） document.getElementById("createBackup").addEventListener("click", () => { const jsonStr = document.getElementById("jsonOutput").textContent; const blob = new Blob([jsonStr], { type: "application/json" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `backup_${new Date().toISOString().slice(0, 10)}.json`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); alert("✅ 备份已创建并下载！"); }); // 导入备份（示例：读取本地 JSON 文件） document.getElementById("importBackup").addEventListener("click", () => { const input = document.createElement("input"); input.type = "file"; input.accept = ".json"; input.onchange = e => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = ev => { try { const parsed = JSON.parse(ev.target.result); document.getElementById("appName").value = parsed.appName || ""; document.getElementById("version").value = parsed.version || ""; document.getElementById("timeout").value = parsed.timeout || 5000; document.getElementById("env").value = parsed.env || "prod"; document.getElementById("features").value = JSON.stringify(parsed.features || [], null, 2); updateJsonPreview(); alert("✅ 配置已成功导入！"); } catch (err) { alert("❌ 导入失败：JSON 格式不正确。"); } }; reader.readAsText(file); }; input.click(); }); </script> </body> </html> ``` --- ### ✅ 亮点说明 | 优化点 | 说明 | |--------|------| | 📌 **底部双按钮布局** | `创建备份`（绿色）和 `导入备份`（蓝色）并排居底，响应式断行，移动端竖排 | | 📐 **右侧 JSON 区高度可控** | `min-height: 120px; max-height: 300px; overflow-y: auto;` —— 内容少时不空，多时自动滚动，绝不撑高页面 | | 🔤 **字体更小更清晰** | 使用等宽字体 + `13px` + 深色，提升 JSON 可读性 | | 🧩 **实时双向同步** | 所有输入框/下拉/文本域修改后立即更新右侧 JSON，支持数组解析（如 features） | | 💾 **备份功能完整** | 创建 → 自动命名下载；导入 → 文件选择 + 安全解析 + 回填表单 | | 🌐 **响应式友好** | 移动端自动转为单列，按钮竖排，体验不打折 | --- ######[AI写代码神器 | 2518点数解答 | 2026-04-01 19:33:21]

服务商

更多选项

快捷项

自定义