116 lines
4.2 KiB
HTML
116 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SQL Processor</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
}
|
|
textarea, input[type="text"] { /* 统一文本区域和输入框样式 */
|
|
width: 100%;
|
|
height: 40px; /* 设置输入框高度 */
|
|
margin-bottom: 10px;
|
|
font-family: Arial, sans-serif; /* 确保字体一致 */
|
|
color: #333; /* 设置文本颜色 */
|
|
border: 1px solid #ccc; /* 边框样式 */
|
|
padding: 10px; /* 内边距 */
|
|
background-color: #f9f9f9; /* 背景颜色 */
|
|
}
|
|
textarea {
|
|
height: 200px; /* 设置文本区域高度 */
|
|
overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
|
|
resize: none; /* 禁止用户调整大小 */
|
|
}
|
|
button {
|
|
display: block;
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
}
|
|
#resultArea {
|
|
margin-top: 20px;
|
|
display: none;
|
|
}
|
|
.output-box {
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
background-color: #f9f9f9;
|
|
margin-bottom: 10px;
|
|
}
|
|
h1, h2 { /* 统一处理所有标题样式 */
|
|
font-family: Arial, sans-serif;
|
|
color: #333; /* 设置文本颜色 */
|
|
margin-top: 0; /* 移除顶部间距 */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>SQL Processor</h1>
|
|
<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">
|
|
<!-- Processed SQL will be inserted here -->
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('sqlForm').addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
const sql = document.getElementById('sqlInput').value;
|
|
const hologresConnection = document.getElementById('hologresConnection').value;
|
|
|
|
fetch('/convert', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: new URLSearchParams({
|
|
'sql': sql,
|
|
'hologresConnection': hologresConnection // 添加到请求体中
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
// 显示错误信息
|
|
document.getElementById('resultArea').innerHTML = `<textarea readonly>${replaceNewline(escapeHtml(data.error))}</textarea>`;
|
|
} else {
|
|
// 构建输出内容，并确保所有字符都被正确转义
|
|
let targetTablesString = JSON.stringify(data.target_tables, null, 2);
|
|
// 去掉最外层的双引号
|
|
targetTablesString = targetTablesString.replace(/^"|"$/g, '');
|
|
|
|
let outputHTML = `
|
|
<h2>Processed SQL:</h2>
|
|
<textarea readonly>${replaceNewline(escapeHtml(targetTablesString))}</textarea>
|
|
<p>${replaceNewline(escapeHtml(data.message))}</p>
|
|
`;
|
|
document.getElementById('resultArea').innerHTML = outputHTML;
|
|
}
|
|
// 显示结果区域
|
|
document.getElementById('resultArea').style.display = 'block';
|
|
})
|
|
.catch(error => console.error('Error:', error));
|
|
});
|
|
|
|
// 转义HTML特殊字符
|
|
function escapeHtml(unsafe) {
|
|
return unsafe
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
// 替换 \n 为实际的换行符
|
|
function replaceNewline(str) {
|
|
return str.split('\\n').join('\n');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |