美化样式精简html代码

2025-02-05 15:57:40 +08:00 · 2025-02-05 15:57:40 +08:00 · 7846f32458
commit 7846f32458
parent 812877f45d
3 changed files with 121 additions and 194 deletions
--- a/sqllineage.py
+++ b/sqllineage.py
@ -19,16 +19,16 @@ def convert_sql():
    log.info("SQL hologres_connection: %s", hologres_connection)
    try:
        parsed_result=parse_create_table_sql(sql_input,hologres_connection)
-
+        print(parsed_result)
        result = {
-            'target_tables': parsed_result,
+            'parsed_result': parsed_result,
            'message': 'SQL processed successfully.'
        }
    except Exception as e:
-        result = {'error': str(e)}
+        result = {'error': f'请检查输入sql:\n\n  {str(e)}'}
    log.info("SQL result: %s", result)
    return jsonify(result)

 if __name__ == '__main__':
    # 指定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)
--- a/templates/index.html
+++ b/templates/index.html
@ -2,115 +2,150 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SQL Processor</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
-            font-family: Arial, sans-serif;
-            margin: 20px;
+            font: 1rem 'Roboto', Arial, sans-serif;
+            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%;
-            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; /* 禁止用户调整大小 */
+            height: 40px;
+            margin-bottom: 1rem;
+            font: inherit;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            padding: 0.6rem;
+            background: #f9f9f9;
+            resize: none;
        }
+        textarea { height: 200px; }
        button {
-            display: block;
-            margin-top: 10px;
-            padding: 10px;
+            display: inline-block;
+            background: #4a90e2;
+            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 {
-            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;
        }
        .output-box {
-            border: 1px solid #ccc;
-            padding: 10px;
-            background-color: #f9f9f9;
-            margin-bottom: 10px;
+            border: 1px solid #ddd;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            border-radius: 6px;
+            background: #f9f9f9;
        }
-        h1, h2 { /* 统一处理所有标题样式 */
-            font-family: Arial, sans-serif;
-            color: #333; /* 设置文本颜色 */
-            margin-top: 0; /* 移除顶部间距 */
+        h2 {
+            font-size: 1.5rem;
+            color: #4a90e2;
+            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>
 </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 class="container">
+        <header><h1>SQL Processor</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"></div>
    </div>

 <script>
-    document.getElementById('sqlForm').addEventListener('submit', function(event) {
-        event.preventDefault();
+    document.getElementById('sqlForm').addEventListener('submit', async (e) => {
+        e.preventDefault();
        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) {
-                // 显示错误信息
-                document.getElementById('resultArea').innerHTML = `<textarea readonly>${replaceNewline(escapeHtml(data.error))}</textarea>`;
+                resultArea.innerHTML = `<div class="output-box error"><textarea readonly>${data.error}</textarea></div>`;
            } 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>
+                const tables = data.parsed_result || '请检查输入建表语句';
+                resultArea.innerHTML = `
+                    <div class="output-box success">
+                        <h2>Processed SQL:</h2>
+                        <textarea readonly>${tables}</textarea>
+                        <p>${data.message}</p>
+                    </div>
                `;
-                document.getElementById('resultArea').innerHTML = outputHTML;
            }
-            // 显示结果区域
-            document.getElementById('resultArea').style.display = 'block';
-        })
-        .catch(error => console.error('Error:', error));
+        } catch (error) {
+            console.error('Error:', error);
+            resultArea.innerHTML = `<div class="output-box error"><textarea readonly>An unexpected error occurred. Please try again.</textarea></div>`;
+        }
+        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>
 </body>
 </html>
--- a/templates/index1.html
+++ b/templates/index1.html
@ -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>