yinzhou/sqllineage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化样式精简html代码

Browse Source
This commit is contained in:
尹舟 2025-02-05 15:57:40 +08:00
parent 812877f45d
commit 7846f32458
3 changed files with 121 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
sqllineage.py
View File

@ -19,16 +19,16 @@ def convert_sql():
log.info("SQL hologres_connection: %s", hologres_connection) log.info("SQL hologres_connection: %s", hologres_connection)
try: try:
parsed_result=parse_create_table_sql(sql_input,hologres_connection) parsed_result=parse_create_table_sql(sql_input,hologres_connection)
print(parsed_result)
result = { result = {
'target_tables': parsed_result, 'parsed_result': parsed_result,
'message': 'SQL processed successfully.' 'message': 'SQL processed successfully.'
} }
except Exception as e: except Exception as e:
result = {'error': str(e)} result = {'error': f'请检查输入sql:\n\n {str(e)}'}
log.info("SQL result: %s", result) log.info("SQL result: %s", result)
return jsonify(result) return jsonify(result)
if __name__ == '__main__': if __name__ == '__main__':
# 指定host和port，这里使用0.0.0.0可以让服务器被外部访问 # 指定host和port，这里使用0.0.0.0可以让服务器被外部访问
app.run(host='0.0.0.0', port=8778, debug=True) app.run(host='0.0.0.0', port=8777, debug=True)

199
templates/index.html
View File

@ -2,115 +2,150 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SQL Processor</title> <title>SQL Processor</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<style> <style>
body { body {
font-family: Arial, sans-serif; font: 1rem 'Roboto', Arial, sans-serif;
margin: 20px; margin: 0;
padding: 0;
background: #f5f5f5;
color: #333;
} }
textarea, input[type="text"] { /* 统一文本区域和输入框样式 */ .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 {
background: #fff;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
textarea, input[type="text"] {
width: 100%; width: 100%;
height: 40px; /* 设置输入框高度 */ height: 40px;
margin-bottom: 10px; margin-bottom: 1rem;
font-family: Arial, sans-serif; /* 确保字体一致 */ font: inherit;
color: #333; /* 设置文本颜色 */ border: 1px solid #ddd;
border: 1px solid #ccc; /* 边框样式 */ border-radius: 6px;
padding: 10px; /* 内边距 */ padding: 0.6rem;
background-color: #f9f9f9; /* 背景颜色 */ background: #f9f9f9;
} resize: none;
textarea {
height: 200px; /* 设置文本区域高度 */
overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
resize: none; /* 禁止用户调整大小 */
} }
textarea { height: 200px; }
button { button {
display: block; display: inline-block;
margin-top: 10px; background: #4a90e2;
padding: 10px; color: #fff;
border: none;
border-radius: 6px;
padding: 0.75rem 1.5rem;
font: 600 1rem 'Roboto', Arial, sans-serif;
cursor: pointer;
transition: background 0.3s ease;
} }
button:hover { background: #357ab8; }
#resultArea { #resultArea {
margin-top: 20px; margin-top: 1rem;
padding: 1rem;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
display: none; display: none;
} }
.output-box { .output-box {
border: 1px solid #ccc; border: 1px solid #ddd;
padding: 10px; padding: 1rem;
background-color: #f9f9f9; margin-bottom: 1rem;
margin-bottom: 10px; border-radius: 6px;
background: #f9f9f9;
} }
h1, h2 { /* 统一处理所有标题样式 */ h2 {
font-family: Arial, sans-serif; font-size: 1.5rem;
color: #333; /* 设置文本颜色 */ color: #4a90e2;
margin-top: 0; /* 移除顶部间距 */ margin: 0 0 0.5rem 0;
font-weight: 500;
}
.output-box textarea {
background: #fff;
border: 1px solid #ddd;
}
.error {
color: #dc3545;
background: #ffebee;
padding: 0.6rem;
border-radius: 6px;
}
.success {
color: #28a745;
background: #d4edda;
padding: 0.6rem;
border-radius: 6px;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>SQL Processor</h1> <div class="container">
<form id="sqlForm"> <header><h1>SQL Processor</h1></header>
<textarea id="sqlInput" placeholder="Enter your SQL here..."></textarea> <form id="sqlForm">
<label for="hologresConnection">Hologres Connection Info:</label> <textarea id="sqlInput" placeholder="Enter your SQL here..."></textarea>
<input type="text" id="hologresConnection" name="hologresConnection" value="hgprecn-cn-i7m2ssubq004-cn-hangzhou-internal.hologres.aliyuncs.com:80" placeholder="Enter Hologres connection info..."> <label for="hologresConnection">Hologres Connection Info:</label>
<button type="submit">Convert</button> <input type="text" id="hologresConnection" name="hologresConnection" value="hgprecn-cn-i7m2ssubq004-cn-hangzhou-internal.hologres.aliyuncs.com:80" placeholder="Enter Hologres connection info...">
</form> <button type="submit">Convert</button>
<div id="resultArea" class="output-box"> </form>
<!-- Processed SQL will be inserted here --> <div id="resultArea" class="output-box"></div>
</div> </div>
<script> <script>
document.getElementById('sqlForm').addEventListener('submit', function(event) { document.getElementById('sqlForm').addEventListener('submit', async (e) => {
event.preventDefault(); e.preventDefault();
const sql = document.getElementById('sqlInput').value; const sql = document.getElementById('sqlInput').value;
const hologresConnection = document.getElementById('hologresConnection').value; const connection = document.getElementById('hologresConnection').value;
const resultArea = document.getElementById('resultArea');
try {
const response = await fetch('/convert', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `sql=${encodeURIComponent(sql)}&hologresConnection=${encodeURIComponent(connection)}`
});
const data = await response.json();
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) { if (data.error) {
// 显示错误信息 resultArea.innerHTML = `<div class="output-box error"><textarea readonly>${data.error}</textarea></div>`;
document.getElementById('resultArea').innerHTML = `<textarea readonly>${replaceNewline(escapeHtml(data.error))}</textarea>`;
} else { } else {
// 构建输出内容，并确保所有字符都被正确转义 const tables = data.parsed_result || '请检查输入建表语句';
let targetTablesString = JSON.stringify(data.target_tables, null, 2); resultArea.innerHTML = `
// 去掉最外层的双引号 <div class="output-box success">
targetTablesString = targetTablesString.replace(/^"|"$/g, ''); <h2>Processed SQL:</h2>
<textarea readonly>${tables}</textarea>
let outputHTML = ` <p>${data.message}</p>
<h2>Processed SQL:</h2> </div>
<textarea readonly>${replaceNewline(escapeHtml(targetTablesString))}</textarea>
<p>${replaceNewline(escapeHtml(data.message))}</p>
`; `;
document.getElementById('resultArea').innerHTML = outputHTML;
} }
// 显示结果区域 } catch (error) {
document.getElementById('resultArea').style.display = 'block'; console.error('Error:', error);
}) resultArea.innerHTML = `<div class="output-box error"><textarea readonly>An unexpected error occurred. Please try again.</textarea></div>`;
.catch(error => console.error('Error:', error)); }
resultArea.style.display = 'block';
}); });
// 转义HTML特殊字符
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
// 替换 \n 为实际的换行符
function replaceNewline(str) {
return str.split('\\n').join('\n');
}
</script> </script>
</body> </body>
</html> </html>

108
templates/index1.html
View File

@ -1,108 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SQL Processor</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
textarea {
width: 100%;
height: 200px; /* 设置默认高度 */
margin-bottom: 10px;
font-family: Arial, sans-serif; /* 确保字体一致 */
color: #333; /* 设置文本颜色 */
resize: none; /* 禁止用户调整大小 */
overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
border: 1px solid #ccc; /* 边框样式 */
padding: 10px; /* 内边距 */
background-color: #f9f9f9; /* 背景颜色 */
}
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>
<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;
fetch('/convert', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
'sql': sql
})
})
.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, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
// 替换 \n 为实际的换行符
function replaceNewline(str) {
return str.split('\\n').join('\n');
}
</script>
</body>
</html>