diff --git a/src/main/java/com/mini/capi/sys/controller/dataController.java b/src/main/java/com/mini/capi/sys/controller/dataController.java
index e662ac7..6e5cd57 100644
--- a/src/main/java/com/mini/capi/sys/controller/dataController.java
+++ b/src/main/java/com/mini/capi/sys/controller/dataController.java
@@ -94,7 +94,7 @@ public class dataController {
                 .append(quote(table.getTableName()))
                 .append(" -- ")
                 .append(nullToEmpty(table.getTableDesc()))
-                .append(";\n");
+                .append("\n;");
         return sb.toString();
     }
 
diff --git a/src/main/resources/templates/views/data/detail.html b/src/main/resources/templates/views/data/detail.html
index dd75271..1b9504b 100644
--- a/src/main/resources/templates/views/data/detail.html
+++ b/src/main/resources/templates/views/data/detail.html
@@ -2,264 +2,58 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>市区信息表结构</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <title>表结构信息</title>
     <style>
+        /* ===== 全局 & 布局（沿用原样式，略） ===== */
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
         }
 
         body {
-            background: linear-gradient(135deg, #e6f7ff 0%, #f0f7ff 100%);
+            padding-bottom: 10px;
             min-height: 100vh;
-            padding: 10px; /* 核心：距离页面两边10px */
-            color: #2c3e50;
-            overflow: hidden;
         }
 
         .container {
-            max-width: 100%;
-            margin: 0 auto; /* 水平居中，同时借助body的10px padding实现边缘距离 */
             display: flex;
+            padding: 16px;
+            gap: 16px;
+            min-height: calc(100vh - 10px);
+        }
+
+        .left-column {
+            flex: 0 0 520px;
+            display: flex;
+            flex-direction: column;
             gap: 15px;
-            height: calc(100vh - 20px); /* 减去body上下10px padding，占满垂直空间 */
         }
 
-        .panel {
-            background: white;
-            border-radius: 16px;
-            box-shadow: 0 4px 20px rgba(0, 120, 255, 0.08);
-            overflow: hidden;
-            transition: transform 0.3s ease;
-            display: flex;
-            flex-direction: column;
-            height: 100%; /* 面板高度铺满容器，避免内容溢出 */
+        .card {
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            padding: 15px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
+            background: #fff;
         }
 
-        .panel:hover {
-            transform: translateY(-3px);
-        }
-
-        .panel-header {
-            background: linear-gradient(135deg, #4096ff 0%, #165dff 100%);
-            color: white;
-            padding: 16px 20px;
-            font-size: 1.2rem;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            flex-shrink: 0; /* 表头不压缩 */
-        }
-
-        .panel-content {
-            padding: 20px;
-            flex: 1; /* 内容区占据剩余高度 */
-            display: flex;
-            flex-direction: column;
-            overflow: hidden; /* 关键：父容器隐藏溢出，确保子滚动容器生效 */
-        }
-
-        .left-panel {
-            flex: 1;
-        }
-
-        .right-panel {
-            flex: 2;
-        }
-
-        .info-card {
-            background: #eef7ff;
-            border-radius: 12px;
-            padding: 18px;
-            margin-bottom: 18px;
-            border-left: 4px solid #4096ff;
-            flex-shrink: 0; /* 信息卡片不压缩 */
-        }
-
-        .info-row {
-            display: flex;
+        .card-header {
+            font-weight: bold;
             margin-bottom: 12px;
-            align-items: center;
-            line-height: 1.5;
+            font-size: 16px;
+            color: #333;
         }
 
-        .info-label {
-            font-weight: 600;
-            color: #165dff;
-            width: 110px;
-            position: relative;
+        .detail {
+            margin-bottom: 8px;
+            color: #555;
         }
 
-        .info-label::after {
-            content: ":";
-            position: absolute;
-            right: 8px;
-        }
-
-        .info-value {
-            flex: 1;
-            color: #343a40;
-        }
-
-        .button-panel {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 15px;
-            border-bottom: 1px solid #e6f0ff;
-            padding-bottom: 12px;
-            flex-shrink: 0; /* 按钮区不压缩，固定高度 */
-            flex-wrap: wrap; /* 小屏幕按钮换行 */
-        }
-
-        .button {
-            background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
-            padding: 9px 18px;
-            border-radius: 8px;
-            font-weight: 600;
-            color: #165dff;
-            cursor: pointer;
-            border: 1px solid #d1e0ff;
-            transition: all 0.25s ease;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .button:hover {
-            background: linear-gradient(135deg, #e6f0ff 0%, #d1e0ff 100%);
-            box-shadow: 0 3px 6px rgba(64, 150, 255, 0.1);
-        }
-
-        .button.active {
-            background: linear-gradient(135deg, #4096ff 0%, #165dff 100%);
-            color: white;
-            border-color: #165dff;
-        }
-
-        /* 1. 字段信息面板：滚动容器修复（确保滚动条必现） */
-        .table-scroll-container {
-            flex: 1; /* 占据内容区剩余高度 */
-            overflow-y: auto; /* 内容溢出时显示垂直滚动条 */
-            overflow-x: auto; /* 小屏幕列宽不足时显示水平滚动条 */
-            border-radius: 12px;
-            margin-bottom: 10px;
-            box-shadow: 0 3px 12px rgba(0, 120, 255, 0.05);
-            min-height: 100px; /* 最小高度，避免内容过少时容器塌陷 */
-        }
-
-        table {
-            width: 100%;
-            border-collapse: separate;
-            border-spacing: 0;
-            border-radius: 12px;
-            overflow: hidden;
-            background: white;
-            table-layout: fixed; /* 固定列宽，避免表头错位 */
-            min-width: 600px; /* 表格最小宽度，确保小屏幕触发水平滚动 */
-        }
-
-        th {
-            background: linear-gradient(135deg, #4096ff 0%, #165dff 100%);
-            color: white;
-            font-weight: 600;
-            padding: 14px 15px;
-            text-align: left;
-            border-right: 1px solid rgba(255, 255, 255, 0.15);
-            position: sticky;
-            top: 0;
-            z-index: 20;
-            background-clip: padding-box; /* 防止背景透色 */
-            /* 列宽分配：适配内容优先级 */
-            width: 100px;
-        }
-
-        th:nth-child(1) {
-            width: 80px;
-        }
-
-        /* 序号 */
-        th:nth-child(2) {
-            width: 180px;
-        }
-
-        /* 字段名称 */
-        th:nth-child(3) {
-            width: 150px;
-        }
-
-        /* 字段类型 */
-        th:nth-child(4) {
-            width: 200px;
-        }
-
-        /* 描述（增加宽度，减少换行） */
-        th:nth-child(5) {
-            width: 120px;
-        }
-
-        /* 键类型 */
-
-        th:last-child {
-            border-right: none;
-        }
-
-        td {
-            padding: 12px 15px;
-            border-bottom: 1px solid #e6f0ff;
-            color: #495057;
-            width: 100px;
-            word-wrap: break-word; /* 长文本换行，避免列宽异常 */
-            word-break: break-all;
-        }
-
-        td:nth-child(1) {
-            width: 80px;
-        }
-
-        td:nth-child(2) {
-            width: 180px;
-        }
-
-        td:nth-child(3) {
-            width: 150px;
-        }
-
-        td:nth-child(4) {
-            width: 200px;
-        }
-
-        td:nth-child(5) {
-            width: 120px;
-        }
-
-        tr:nth-child(even) {
-            background-color: #f7fbff;
-        }
-
-        tr:hover td {
-            background-color: rgba(64, 150, 255, 0.08);
-        }
-
-        .primary-key {
-            background-color: #e6f4ff;
-            color: #165dff;
-            font-weight: 600;
-            padding: 2px 8px;
-            border-radius: 50px;
-            font-size: 0.8rem;
-        }
-
-        .index-key {
-            background-color: #e8f5e9;
-            color: #00864e;
-            padding: 2px 8px;
-            border-radius: 50px;
-            font-size: 0.8rem;
+        .time-info p {
+            margin-bottom: 4px;
+            color: #555;
         }
 
         .stats-row {
@@ -267,8 +61,8 @@
             gap: 15px;
             margin-top: 12px;
             color: #6c757d;
-            font-size: 0.85rem;
-            flex-shrink: 0; /* 统计行不压缩 */
+            font-size: .85rem;
+            flex-shrink: 0;
         }
 
         .stat-item {
@@ -277,341 +71,324 @@
             gap: 5px;
         }
 
-        .time-ago {
-            color: #ff4d4f;
-            font-weight: 500;
-            font-size: 0.85rem;
-        }
-
-        /* 2. SQL面板：滚动容器修复（同字段面板逻辑） */
-        .sql-container {
-            flex: 1; /* 占据剩余高度 */
+        .right-column {
+            flex: 1;
             display: flex;
             flex-direction: column;
-            margin-bottom: 10px;
-            border-radius: 12px;
-            box-shadow: 0 3px 12px rgba(0, 120, 255, 0.05);
-            overflow: hidden;
-            min-height: 100px; /* 最小高度，避免塌陷 */
+            gap: 15px;
         }
 
-        .sql-toolbar {
-            background: #f0f7ff;
-            padding: 8px 15px;
-            border-bottom: 1px solid #e6f0ff;
+        /* ===== 标签栏 ===== */
+        .tabs {
             display: flex;
-            justify-content: flex-end;
-            gap: 8px;
-            flex-shrink: 0; /* 工具条不压缩 */
+            border-bottom: 1px solid #dadce0;
+            padding: 0 8px;
+            background: #f8f9fa;
+            border-radius: 8px 8px 0 0;
         }
 
-        .sql-copy-btn {
-            background: #4096ff;
-            color: white;
+        .tab {
+            padding: 10px 24px;
+            cursor: pointer;
             border: none;
-            border-radius: 6px;
+            background: none;
+            font-size: 14px;
+            font-weight: 500;
+            color: #5f6368;
+            position: relative;
+            transition: .2s;
+            border-radius: 4px;
+            margin: 0 4px;
+        }
+
+        .tab:hover {
+            background: rgba(60, 64, 67, .08);
+            color: #202124;
+        }
+
+        .tab.active {
+            background: #e8f0fe;
+            color: #1967d2;
+        }
+
+        .tab.active::after {
+            content: "";
+            position: absolute;
+            bottom: -1px;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: #1967d2;
+            border-radius: 3px 3px 0 0;
+        }
+
+        /* ===== 内容区 ===== */
+        .tab-content {
+            border: 1px solid #dadce0;
+            border-radius: 0 0 8px 8px;
+            padding: 16px;
+            height: calc(100vh - 120px);
+            display: none;
+            flex-direction: column;
+            background: #fff;
+        }
+
+        .tab-content.active {
+            display: flex;
+        }
+
+        .content-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid #eee;
+        }
+
+        .content-title {
+            font-weight: 500;
+            font-size: 16px;
+            color: #202124;
+        }
+
+        .action-btn {
             padding: 6px 12px;
-            font-size: 0.85rem;
+            background: #1967d2;
+            color: #fff;
+            border: none;
+            border-radius: 4px;
             cursor: pointer;
             display: flex;
             align-items: center;
-            gap: 5px;
-            transition: background 0.2s ease;
+            gap: 4px;
+            font-size: 14px;
+            font-weight: 500;
+            transition: .2s;
         }
 
-        .sql-copy-btn:hover {
-            background: #165dff;
+        .action-btn:hover {
+            background: #1557b0;
         }
 
-        /* SQL输入框：确保滚动条生效 */
-        .sql-input {
-            flex: 1; /* 占据SQL容器剩余高度 */
-            background: white;
-            padding: 15px;
-            font-family: 'Consolas', 'Monaco', monospace;
-            font-size: 0.9rem;
-            color: #333;
-            white-space: pre-wrap;
-            line-height: 1.6;
-            overflow-y: auto; /* 垂直滚动 */
-            overflow-x: auto; /* 水平滚动（长SQL语句） */
-            outline: none;
-            border: none;
-            contenteditable: true;
-            min-height: 80px; /* 输入框最小高度 */
-        }
-
-
-        /* 移除pre标签默认样式干扰（适配动态SQL） */
-        .sql-input pre {
-            margin: 0;
-            padding: 0;
-            border: none;
-            background: transparent;
-            font-family: inherit;
-            font-size: inherit;
-            line-height: inherit;
-            white-space: inherit; /* 继承sql-input的换行规则 */
-        }
-
-        /* SQL高亮样式（不破坏格式） */
-        .sql-keyword {
-            color: #d73a49;
-            font-weight: 600;
-        }
-
-        .sql-table {
-            color: #005cc5;
-        }
-
-        .sql-column {
-            color: #6f42c1;
-        }
-
-        .sql-comment {
-            color: #6a737d;
-        }
-
-        /* 复制提示 */
-        .copy-toast {
-            position: fixed;
-            bottom: 30px;
-            right: 30px;
-            background: rgba(0, 120, 255, 0.9);
-            color: white;
-            padding: 8px 16px;
-            border-radius: 6px;
-            font-size: 0.85rem;
-            opacity: 0;
-            transition: opacity 0.3s ease;
-            z-index: 100;
-        }
-
-        .copy-toast.show {
-            opacity: 1;
-        }
-
-        /* 统一滚动条样式（确保所有滚动容器外观一致） */
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: #4096ff;
-            border-radius: 4px;
-            transition: background 0.2s ease;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: #165dff;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: rgba(64, 150, 255, 0.1);
-            border-radius: 4px;
-        }
-
-        /* 内容面板切换基础样式 */
-        .content-panel {
-            display: none;
+        .content-body {
             flex: 1;
-            flex-direction: column;
-            overflow: hidden; /* 子容器溢出控制 */
+            overflow: hidden;
         }
 
-        .content-panel.active {
+        /* ===== 字段表格：行边框、无列边框 ===== */
+        .table-container {
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+        }
+
+        .field-table {
+            width: 100%;
+            border-collapse: collapse;
+            min-width: 600px;
+        }
+
+        .field-table thead {
+            position: sticky;
+            top: 0;
+            z-index: 1;
+        }
+
+        .field-table th, .field-table td {
+            padding: 12px 16px;
+            text-align: left;
+            border-bottom: 1px solid #e0e0e0;
+            border-left: none;
+            border-right: none;
+        }
+
+        .field-table thead tr:first-child th {
+            border-top: none;
+        }
+
+        .field-table th {
+            background: #e3f2fd;
+            color: #1565c0;
+            font-weight: 500;
+            white-space: nowrap;
+        }
+
+        .field-table tr:nth-child(even) {
+            background: #f8f9fa;
+        }
+
+        .field-table tr:hover {
+            background: #e8f5e9;
+        }
+
+        .col-name{
+            display: inline-block;
+            font-family: "JetBrains Mono",SFMono-Regular,Consolas,monospace;
+            font-weight: 600;
+            font-size: 0.875rem;
+            color: #0c4a6e;                   /* 深蓝字 */
+            padding: 3px 8px 4px;
+            border-radius: 4px;
+            background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 100%); /* 浅蓝渐变 */
+            box-shadow: 0 1px 2px rgba(14,165,233,.15);
+            transition: box-shadow .2s;
+        }
+        .col-name:hover{
+            box-shadow: 0 2px 6px rgba(14,165,233,.25);
+        }
+
+
+        /* ===== 代码块 ===== */
+        .code-block {
+            background: #f8f9fa;
+            border: 1px solid #e0e0e0;
+            border-radius: 4px;
+            padding: 16px;
+            font-family: monospace;
+            white-space: pre-wrap;
+            height: 100%;
+            overflow: auto;
+            color: #202124;
+            line-height: 1.5;
+        }
+
+        /* ===== 对话框 ===== */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, .5);
             display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: .3s;
         }
 
-        /* 3. 小屏幕/页面缩小适配（确保滚动条正常触发） */
-        @media (max-width: 1200px) {
-            .container {
-                gap: 10px;
-            }
-
-            .panel-content {
-                padding: 15px;
-            }
-
-            th, td {
-                padding: 12px 10px;
-                font-size: 0.85rem;
-            }
-
-            th:nth-child(4) {
-                width: 180px;
-            }
-
-            /* 小屏幕压缩描述列宽 */
-            td:nth-child(4) {
-                width: 180px;
-            }
+        .modal-overlay.active {
+            opacity: 1;
+            visibility: visible;
         }
 
-        @media (max-width: 1000px) {
-            .container {
-                flex-direction: column;
-                height: auto; /* 垂直布局时容器高度自适应 */
-                max-height: calc(100vh - 20px); /* 但不超过屏幕高度 */
-                overflow: hidden;
-            }
-
-            .table-scroll-container,
-            .sql-container {
-                max-height: 300px; /* 移动端限制最大高度，确保滚动 */
-            }
-
-            /* 移动端表格列宽进一步压缩 */
-            th:nth-child(2) {
-                width: 150px;
-            }
-
-            th:nth-child(3) {
-                width: 120px;
-            }
-
-            th:nth-child(4) {
-                width: 150px;
-            }
-
-            td:nth-child(2) {
-                width: 150px;
-            }
-
-            td:nth-child(3) {
-                width: 120px;
-            }
-
-            td:nth-child(4) {
-                width: 150px;
-            }
+        .modal {
+            background: #fff;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
+            width: 350px;
+            max-width: 90%;
+            padding: 24px;
+            transform: translateY(-20px);
+            transition: .3s;
         }
 
-        @media (max-width: 600px) {
-            .button {
-                padding: 8px 12px;
-                font-size: 0.85rem;
-            }
+        .modal-overlay.active .modal {
+            transform: translateY(0);
+        }
 
-            .info-label {
-                width: 90px;
-            }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid #eee;
+        }
 
-            /* 超小屏幕表格列宽最小化 */
-            th {
-                padding: 10px 8px;
-            }
+        .modal-title {
+            font-size: 18px;
+            font-weight: 500;
+            color: #202124;
+        }
 
-            td {
-                padding: 10px 8px;
-            }
+        .modal-close {
+            background: none;
+            border: none;
+            font-size: 20px;
+            cursor: pointer;
+            color: #5f6368;
+            transition: .2s;
+        }
 
-            th:nth-child(2) {
-                width: 120px;
-            }
+        .modal-close:hover {
+            color: #202124;
+        }
 
-            th:nth-child(4) {
-                width: 120px;
-            }
+        .modal-body {
+            margin-bottom: 24px;
+            color: #3c4043;
+            font-size: 14px;
+            line-height: 1.5;
+        }
 
-            td:nth-child(2) {
-                width: 120px;
-            }
+        .modal-footer {
+            display: flex;
+            justify-content: flex-end;
+        }
 
-            td:nth-child(4) {
-                width: 120px;
-            }
+        .modal-btn {
+            padding: 8px 16px;
+            background: #1967d2;
+            color: #fff;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+            transition: .2s;
+        }
+
+        .modal-btn:hover {
+            background: #1557b0;
         }
     </style>
 </head>
 <body>
 <div class="container">
-    <!-- 左侧面板：表基础信息 -->
-    <div class="panel left-panel">
-        <div class="panel-header">
-            <i class="fas fa-database"></i>
-            <span>表基础信息</span>
+    <!-- 左侧 -->
+    <div class="left-column" th:each="t : ${data}">
+        <div class="card table-info">
+            <div class="card-header">表基础信息</div>
+            <div class="detail">数据库: <span th:text="${t.dbName}"></span></div>
+            <div class="detail">表名称: <strong th:text="${t.tableName}"></strong></div>
+            <div class="detail">表描述: <span th:text="${t.tableDesc}"></span></div>
+            <div class="detail">存储量: <span th:text="${t.dataLength}"></span></div>
         </div>
-        <div class="panel-content" th:each="t : ${data}">
-            <div class="info-card">
-                <div class="info-row">
-                    <div class="info-label">数据库</div>
-                    <div class="info-value"><p th:text="${t.dbName}"></p></div>
-                </div>
-                <div class="info-row">
-                    <div class="info-label">表名称</div>
-                    <div class="info-value" th:text="${t.tableName}"><strong></strong></div>
-                </div>
-                <div class="info-row">
-                    <div class="info-label">表描述</div>
-                    <div class="info-value"><p th:text="${t.tableDesc}"></p></div>
-                </div>
-                <div class="info-row">
-                    <div class="info-label">存储量</div>
-                    <div class="info-value"><p th:text="${t.dataLength}"></p></div>
-                </div>
-            </div>
-
-            <div class="info-card">
-                <div class="info-row">
-                    <div class="info-label">创建时间</div>
-                    <div class="info-value">
-                        <p th:text="${t.createTime}"></p>
-                    </div>
-                </div>
-                <div class="info-row">
-                    <div class="info-label">更新时间</div>
-                    <div class="info-value">
-                        <p th:text="${t.updateTime}"></p>
-                    </div>
-                </div>
-            </div>
-
-            <div class="stats-row">
-                <div class="stat-item">
-                    <i class="fas fa-key" style="color: #165dff;"></i>
-                    <p>主键：<span th:text="${pkCnt}">0</span> 个</p>
-                </div>
-                <div class="stat-item">
-                    <i class="fas fa-sitemap" style="color: #00864e;"></i>
-                    <p>索引：<span th:text="${idxCnt}">0</span> 个</p>
-                </div>
-                <div class="stat-item">
-                    <i class="fas fa-list" style="color: #4096ff;"></i>
-                    <p>字段：<span th:text="${colCnt}">0</span> 个</p>
-                </div>
-            </div>
+        <div class="card time-info">
+            <div>创建时间: <p th:text="${t.createTime}"></p></div>
+            <div>更新时间: <p th:text="${t.updateTime}"></p></div>
+        </div>
+        <div class="stats-row">
+            <div class="stat-item"><i class="fas fa-key" style="color:#165dff;"></i>
+                <p>主键：<span th:text="${pkCnt}">0</span> 个</p></div>
+            <div class="stat-item"><i class="fas fa-sitemap" style="color:#00864e;"></i>
+                <p>索引：<span th:text="${idxCnt}">0</span> 个</p></div>
+            <div class="stat-item"><i class="fas fa-list" style="color:#4096ff;"></i>
+                <p>字段：<span th:text="${colCnt}">0</span> 个</p></div>
         </div>
     </div>
 
-    <!-- 右侧面板：功能切换区 -->
-    <div class="panel right-panel">
-        <div class="panel-header">
-            <i class="fas fa-columns"></i>
-            <span>表结构操作</span>
+    <!-- 右侧 -->
+    <div class="right-column">
+        <div class="tabs">
+            <div class="tab active" data-tab="field">字段信息</div>
+            <div class="tab" data-tab="select">生成SELECT</div>
+            <div class="tab" data-tab="ddl">生成DDL</div>
         </div>
-        <div class="panel-content">
-            <!-- 切换按钮 -->
-            <div class="button-panel">
-                <div class="button active" data-target="field-info">
-                    <i class="fas fa-list-ul"></i>
-                    <span>字段信息</span>
-                </div>
-                <div class="button" data-target="generate-select">
-                    <i class="fas fa-code"></i>
-                    <span>生成SELECT</span>
-                </div>
-                <div class="button" data-target="generate-ddl">
-                    <i class="fas fa-database"></i>
-                    <span>生成DDL</span>
-                </div>
-            </div>
 
-            <!-- 1. 字段信息面板（滚动条修复） -->
-            <div id="field-info" class="content-panel active">
-                <div class="table-scroll-container">
-                    <table>
+        <!-- 字段信息 -->
+        <div class="tab-content active" id="field-content">
+            <div class="content-header">
+                <div class="content-title">字段信息</div>
+                <button class="action-btn" id="export-field">导出 ↓</button>
+            </div>
+            <div class="content-body">
+                <div class="table-container">
+                    <table class="field-table">
                         <thead>
                         <tr>
                             <th>序号</th>
@@ -624,157 +401,106 @@
                         <tbody th:each="c : ${columns}">
                         <tr>
                             <td th:text="${c.sort}"></td>
-                            <td><strong th:text="${c.colName}"></strong></td>
+                            <td><span class="col-name" th:text="${c.colName}">f_user_name</span></td>
                             <td th:text="${c.colType}"></td>
                             <td th:text="${c.colDesc}"></td>
-                            <td><span class="primary-key" th:text="${c.keyType}"></span></td>
+                            <td th:text="${c.keyType}"></td>
                         </tr>
+
                         </tbody>
                     </table>
                 </div>
             </div>
+        </div>
 
-            <!-- 2. 生成SELECT语句面板（滚动条修复） -->
-            <div id="generate-select" class="content-panel">
-                <div class="sql-container">
-                    <div class="sql-toolbar">
-                        <button class="sql-copy-btn" data-target="select-sql">
-                            <i class="fas fa-copy"></i> 复制SQL
-                        </button>
-                    </div>
-                    <div id="select-sql" class="sql-input" th:text="${selectSql}">
-                    </div>
-                </div>
+        <!-- SELECT -->
+        <div class="tab-content" id="select-content">
+            <div class="content-header">
+                <div class="content-title">SELECT语句</div>
+                <button class="action-btn" id="copy-select">复制SQL</button>
             </div>
+            <div class="content-body">
+                <pre class="code-block" th:text="${selectSql}"></pre>
+            </div>
+        </div>
 
-            <!-- 3. 生成DDL语句面板（滚动条修复） -->
-            <div id="generate-ddl" class="content-panel">
-                <div class="sql-container">
-                    <div class="sql-toolbar">
-                        <button class="sql-copy-btn" data-target="ddl-sql">
-                            <i class="fas fa-copy"></i> 复制SQL
-                        </button>
-                    </div>
-                    <div id="ddl-sql" class="sql-input" th:text="${ddlSql}">
-                    </div>
-                </div>
+        <!-- DDL -->
+        <div class="tab-content" id="ddl-content">
+            <div class="content-header">
+                <div class="content-title">DDL语句</div>
+                <button class="action-btn" id="copy-ddl">复制DDL</button>
+            </div>
+            <div class="content-body">
+                <pre class="code-block" th:text="${ddlSql}"></pre>
             </div>
         </div>
     </div>
 </div>
 
-<!-- 复制成功提示框 -->
-<div class="copy-toast" id="copyToast">复制成功！</div>
+<!-- 对话框 -->
+<div class="modal-overlay" id="modal">
+    <div class="modal">
+        <div class="modal-header">
+            <div class="modal-title" id="modal-title">提示</div>
+            <button class="modal-close" id="modal-close">&times;</button>
+        </div>
+        <div class="modal-body" id="modal-message">这是一条提示信息</div>
+        <div class="modal-footer">
+            <button class="modal-btn" id="modal-confirm">确定</button>
+        </div>
+    </div>
+</div>
 
 <script>
-    // 1. 功能切换逻辑
-    const buttons = document.querySelectorAll('.button');
-    const contentPanels = document.querySelectorAll('.content-panel');
+    /* 对话框 */
+    const modal = document.getElementById('modal');
+    const modalTitle = document.getElementById('modal-title');
+    const modalMessage = document.getElementById('modal-message');
+    const modalClose = document.getElementById('modal-close');
+    const modalConfirm = document.getElementById('modal-confirm');
 
-    buttons.forEach(button => {
-        button.addEventListener('click', () => {
-            buttons.forEach(btn => btn.classList.remove('active'));
-            button.classList.add('active');
-
-            const targetId = button.getAttribute('data-target');
-            contentPanels.forEach(panel => panel.classList.remove('active'));
-            const activePanel = document.getElementById(targetId);
-            activePanel.classList.add('active');
-            // 切换后重置滚动条位置（可选，提升体验）
-            const scrollContainer = activePanel.querySelector('.table-scroll-container, .sql-input');
-            if (scrollContainer) scrollContainer.scrollTop = 0;
-        });
-    });
-
-    // 2. SQL复制功能
-    const copyButtons = document.querySelectorAll('.sql-copy-btn');
-    const copyToast = document.getElementById('copyToast');
-
-    copyButtons.forEach(btn => {
-        btn.addEventListener('click', () => {
-            const targetId = btn.getAttribute('data-target');
-            const sqlInput = document.getElementById(targetId);
-
-            // 适配contenteditable复制
-            const range = document.createRange();
-            range.selectNodeContents(sqlInput);
-            const selection = window.getSelection();
-            selection.removeAllRanges();
-            selection.addRange(range);
-            document.execCommand('copy');
-            selection.removeAllRanges();
-
-            // 显示提示
-            copyToast.classList.add('show');
-            setTimeout(() => copyToast.classList.remove('show'), 2000);
-        });
-    });
-
-    // 3. SQL编辑高亮逻辑
-    const sqlInputs = document.querySelectorAll('.sql-input');
-    const sqlKeywords = ['SELECT', 'FROM', 'WHERE', 'ORDER BY', 'GROUP BY', 'LIMIT', 'JOIN', 'LEFT JOIN', 'RIGHT JOIN', 'ON', 'AND', 'OR', 'NOT', 'IN', 'NOT IN', 'BETWEEN', 'LIKE', 'CREATE TABLE', 'PRIMARY KEY', 'KEY', 'ENGINE', 'DEFAULT', 'CHARSET', 'COMMENT', 'NOT NULL', 'NULL', 'INT', 'VARCHAR', 'DATETIME', 'DECIMAL', 'TEXT', 'TINYINT', 'BIGINT'];
-    const sqlTables = ['work.biz_cities', 'idx_province_code', 'idx_f_flow_id', 'idx_tenant_delete'];
-
-    function highlightSQL(inputElement) {
-        let sqlText = inputElement.innerText;
-
-        // 高亮关键字（按长度排序，避免短关键字覆盖长关键字）
-        const sortedKeywords = [...sqlKeywords].sort((a, b) => b.length - a.length);
-        sortedKeywords.forEach(keyword => {
-            const regex = new RegExp(`\\b(${keyword})\\b`, 'gi');
-            sqlText = sqlText.replace(regex, '<span class="sql-keyword">$1</span>');
-        });
-
-        // 高亮表名
-        sqlTables.forEach(table => {
-            const regex = new RegExp(`\\b(${table})\\b`, 'g');
-            sqlText = sqlText.replace(regex, '<span class="sql-table">$1</span>');
-        });
-
-        // 高亮字段名（排除已高亮内容）
-        const originalText = inputElement.innerText;
-        const columnMatches = originalText.match(/\b([a-z_]+)\b/g) || [];
-        const validColumns = columnMatches.filter(col =>
-            !sqlKeywords.some(key => key.toUpperCase() === col.toUpperCase()) &&
-            !sqlTables.includes(col)
-        );
-
-        validColumns.forEach(column => {
-            const regex = new RegExp(`(?<!<span class="[^"]+">)\\b(${column})\\b(?!<\/span>)`, 'g');
-            sqlText = sqlText.replace(regex, '<span class="sql-column">$1</span>');
-        });
-
-        // 高亮注释
-        sqlText = sqlText.replace(/(-- .*)/g, '<span class="sql-comment">$1</span>');
-
-        // 保留光标位置
-        const selection = window.getSelection();
-        const range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
-        const startOffset = range ? range.startOffset : 0;
-
-        inputElement.innerHTML = sqlText;
-
-        // 恢复光标
-        if (range && inputElement.firstChild) {
-            const newRange = document.createRange();
-            newRange.setStart(inputElement.firstChild, Math.min(startOffset, inputElement.firstChild.length));
-            newRange.setEnd(inputElement.firstChild, Math.min(startOffset, inputElement.firstChild.length));
-            selection.removeAllRanges();
-            selection.addRange(newRange);
-        }
+    function showModal(title, message) {
+        modalTitle.textContent = title;
+        modalMessage.textContent = message;
+        modal.classList.add('active');
+        document.body.style.overflow = 'hidden';
     }
 
-    // 初始化高亮
-    sqlInputs.forEach(input => highlightSQL(input));
+    function hideModal() {
+        modal.classList.remove('active');
+        document.body.style.overflow = '';
+    }
 
-    // 编辑实时高亮
-    let highlightTimer;
-    sqlInputs.forEach(input => {
-        input.addEventListener('input', () => {
-            clearTimeout(highlightTimer);
-            highlightTimer = setTimeout(() => highlightSQL(input), 300);
+    modalClose.addEventListener('click', hideModal);
+    modalConfirm.addEventListener('click', hideModal);
+    modal.addEventListener('click', e => {
+        if (e.target === modal) hideModal();
+    });
+
+    /* 标签切换 */
+    const tabs = document.querySelectorAll('.tab');
+    const tabContents = document.querySelectorAll('.tab-content');
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            tabs.forEach(t => t.classList.remove('active'));
+            tabContents.forEach(c => c.classList.remove('active'));
+            tab.classList.add('active');
+            document.getElementById(`${tab.dataset.tab}-content`).classList.add('active');
         });
     });
+
+    /* 复制/导出 */
+    document.getElementById('export-field').addEventListener('click', () => showModal('提示', '导出功能待实现'));
+    document.getElementById('copy-select').addEventListener('click', () => {
+        navigator.clipboard.writeText(document.querySelector('#select-content .code-block').textContent)
+            .then(() => showModal('复制成功', 'SQL已复制到剪贴板'))
+            .catch(err => showModal('复制失败', '无法访问剪贴板: ' + err));
+    });
+    document.getElementById('copy-ddl').addEventListener('click', () => {
+        navigator.clipboard.writeText(document.querySelector('#ddl-content .code-block').textContent)
+            .then(() => showModal('复制成功', 'DDL已复制到剪贴板'))
+            .catch(err => showModal('复制失败', '无法访问剪贴板: ' + err));
+    });
 </script>
 </body>
 </html>
\ No newline at end of file
