<!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>/*全局重置*/* {margin: 0;padding: 0;box-sizing: border-box;}body, html {width: 100%;height: 100%;overflow: hidden;;font-family: 'Segoe UI', sans-serif;background-color: #f4f6f9;}/*容器：占满屏幕*/.container {width: 100%;height: 100vh;display: flex;flex-direction: column;background-color: #fff;border-radius: 0;box-shadow: 0 0 0 transparent;}/*Tab 标签栏*/.tabs {display: flex;border-bottom: 1px solid #ddd;background-color: #f1f1f1;padding: 0;margin: 0;gap: 10px;align-items: center;}.tab {padding: 12px 20px;cursor: pointer;font-weight: 500;border: 1px solid transparent;border-bottom: none;border-radius: 5px 5px 0 0;transition: all 0.3s ease;white-space: nowrap;min-width: 80px;text-align: center;}.tab.active {background-color: #007bff;color: white;border-color: #007bff;border-bottom: 1px solid #fff;}.tab:hover {background-color: #e0e0e0;}/*内容区域：自适应高度*/.tab-content {display: none;flex: 1;overflow: hidden;border: 1px solid #ddd;border-top: none;background-color: #fafafa;position: relative;}.tab-content:active {display: block;}/*iframe：占满整个内容区域*/iframe {width: 100%;height: 100%;border: none;background-color: #fff;display: block;}/*适配移动端*/@media (max-width: 768px) {.tabs {flex-wrap: wrap;padding: 5px;}.tab {padding: 8px 12px;font-size: 14px;}}</style></head><body><div class="container"><!-- Tab 标签--><div class="tabs"><div class="tab active" data-tab="home"> DDL</div><div class="tab" data-tab="excel"> XXX</div></div><!--内容区域--><div id="home" class="tab-content active"><iframe src="pages/DDL.html" frameborder="0" ></iframe></div><div id="excel" class="tab-content"><iframe src="pages/excel.html" frameborder="0"></iframe></div></div><script>const STORAGE_PREFIX = 'form_data_';function saveFormData(tabId) {const iframe = document.querySelector(`#`+tabId + ` iframe`);if (!iframe) return;const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;const inputs = iframeDoc.querySelectorAll('input, textarea, select');const data = {};inputs.forEach(input => {const name = input.name || input.id;if (name) {data[name] = input.value;}});localStorage.setItem(STORAGE_PREFIX + tabId, JSON.stringify(data));}function restoreFormData(tabId) {const iframe = document.querySelector(`#`+tabId + ` iframe`);if (!iframe) return;const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;const saved = localStorage.getItem(STORAGE_PREFIX + tabId);if (!saved) return;try {const data = JSON.parse(saved);const inputs = iframeDoc.querySelectorAll('input, textarea, select');inputs.forEach(input => {const name = input.name || input.id;if (name && data[name] !== undefined) {input.value = data[name];}});} catch (e) {console.warn('恢复表单数据失败：',e);}}document.querySelectorAll('.tab').forEach(tab => {tab.addEventListener('click',() => {const tabId = tab.getAttribute('data-tab');document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));tab.classList.add('active');document.getElementById(tabId).classList.add('active');const currentTabId = document.querySelector('.tab.active').getAttribute('data-tab');saveFormData(currentTabId);const iframe = document.querySelector(`#`+tabId+ ` iframe`);iframe.onload = () => {restoreFormData(tabId);};if (iframe.contentDocument) {restoreFormData(tabId);}});});document.addEventListener('DOMContentLoaded', ()=>{const initialTab = new URLSearchParams(window.location.hash.slice(1)).get('tab') || 'home';const tabElement = document.querySelector(`.tab[data-tab="${initialTab}"]`);if (tabElement) {tabElement.click();}else {document.querySelector('.tab').click();}document.addEventListener('input', function (e) {if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT'){const currentTab = document.querySelector('.tab.active').getAttribute('data-tab');saveFormData(currentTab);}});});window.addEventListener('hashchange', ()=>{const tab = new URLSearchParams(window.location.hash.slice(1)).get('tab');if (tab && document.querySelector(`.tab[data-tab="${tab}"]`)) {const tabElement = document.querySelector(`.tab[data-tab="${tab}"]`);if (!tabElement.classList.contains('active')) {tabElement.click();}}});</script></body>
</html>
