<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SQL Processor</title> <style> body { font: 1rem 'Roboto', Arial, sans-serif; margin: 0; padding: 0; background: #f5f5f5; color: #333; } .container { max-width: 1200px; margin: 0 auto; padding: 1rem; } header { text-align: center; padding: 1rem 0; background: #fff; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 1rem; } h1 { font-size: 2.5rem; color: #4a90e2; margin: 0; font-weight: 500; } form, .output-box { background: #fff; padding: 1rem; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } textarea, input[type="text"] { width: 100%; padding: 0.6rem; margin-bottom: 1rem; font: inherit; border: 1px solid #ddd; border-radius: 6px; background: #f9f9f9; resize: none; } textarea { height: 200px; } button { display: inline-block; background: #4a90e2; color: #fff; border: none; border-radius: 6px; padding: 0.75rem 1.5rem; font: 600 1rem 'Roboto'; cursor: pointer; transition: background 0.3s ease; } button:hover { background: #357ab8; } .output-box { margin-bottom: 1rem; border: 1px solid #ddd; border-radius: 6px; background: #f9f9f9; } .error { color: #dc3545; background: #ffebee; padding: 0.6rem; border-radius: 6px; } .success { color: #28a745; background: #d4edda; padding: 0.6rem; border-radius: 6px; } </style> </head> <body> <div class="container"> <!-- 基本结构:图片作为超链接内容 --> <a href="/" > <img src="https://yinzhou.oss-cn-shanghai.aliyuncs.com/image/bianmu.png" width="50" height="50"> </a> <a href="/a" > <img src="https://yinzhou.oss-cn-shanghai.aliyuncs.com/image/buoumao.png" width="50" height="50"> </a> <a href="/b" > <img src="https://yinzhou.oss-cn-shanghai.aliyuncs.com/image/chaiquan.png" width="50" height="50"> </a> <header><h1>SQL格式化工具</h1></header> <form id="sqlForm"> <textarea id="sqlInput" placeholder="Enter your SQL here..."></textarea> <label for="hologresConnection">Hologres Connection Info:</label> <input type="text" id="hologresConnection" name="hologresConnection" value="hgprecn-cn-i7m2ssubq004-cn-hangzhou-internal.hologres.aliyuncs.com:80" placeholder="Enter Hologres connection info..."> <button type="submit">Convert</button> </form> <div id="resultArea" class="output-box" style="display: none;"></div> </div> <script> document.getElementById('sqlForm').addEventListener('submit', async (e) => { e.preventDefault(); const resultArea = document.getElementById('resultArea'); resultArea.style.display = 'block'; resultArea.querySelector('.output-box')?.remove(); const sql = encodeURIComponent(document.getElementById('sqlInput').value); const connection = encodeURIComponent(document.getElementById('hologresConnection').value); try { const response = await fetch('/convert', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `sql=${sql}&hologresConnection=${connection}` }); const data = await response.json(); if (data.error) { const div = document.createElement('div'); div.className = 'output-box error'; div.textContent = data.error; resultArea.appendChild(div); } else { const div = document.createElement('div'); div.className = 'output-box success'; const textarea = document.createElement('textarea'); textarea.readOnly = true; textarea.value = data.parsed_result || '请检查输入建表语句'; div.appendChild(textarea); const messageP = document.createElement('p'); messageP.textContent = data.message; div.appendChild(messageP); resultArea.appendChild(div); } } catch (error) { console.error('Error:', error); const errorDiv = document.createElement('div'); errorDiv.className = 'output-box error'; errorDiv.textContent = 'An unexpected error occurred. Please try again.'; resultArea.appendChild(errorDiv); } }); </script> </body> </html>