<?php

/**
 * @id 18
 * @name 数据库助手
 * @version 1.0.0
 * @description 用于查看和管理网站数据库表结构及数据的专业工具，支持数据编辑和分页浏览功能
 * @price 0
 * @type 工具
 * @width 875
 * @height 700
 * @thumbnail /img/id18.png
 */


// 处理AJAX请求
if (isset($_SERVER['REQUEST_METHOD']) && $_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['plugin_action'])) {
    try {
        // 包含项目的通用配置文件
        $root_path = realpath(dirname(__DIR__, 2));
        require_once $root_path . '/common.php';

        // 获取数据库连接
        $conn = get_db_connection();

        if (!isset($conn->connect_error)) {
            $action = $_POST['plugin_action'];
            $response = ['success' => false, 'message' => '未知操作'];

            switch ($action) {
                case 'get_tables':
                    // 获取所有表名
                    $tables = [];
                    $result = mysqli_query($conn, "SHOW TABLES");
                    while ($row = mysqli_fetch_row($result)) {
                        $tables[] = $row[0];
                    }
                    mysqli_free_result($result);

                    $response = [
                        'success' => true,
                        'data' => ['tables' => $tables]
                    ];
                    break;

                case 'get_table_data':
                    if (isset($_POST['table_name'])) {
                        $table_name = $_POST['table_name'];
                        $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
                        $pageSize = isset($_POST['page_size']) ? intval($_POST['page_size']) : 10;
                        $offset = ($page - 1) * $pageSize;

                        // 获取总记录数
                        $countResult = mysqli_query($conn, "SELECT COUNT(*) as total FROM `$table_name`");
                        $countRow = mysqli_fetch_assoc($countResult);
                        $total = intval($countRow['total']);
                        mysqli_free_result($countResult);

                        // 获取当前页数据
                        $data = [];
                        $result = mysqli_query($conn, "SELECT * FROM `$table_name` LIMIT $offset, $pageSize");
                        while ($row = mysqli_fetch_assoc($result)) {
                            $data[] = $row;
                        }
                        mysqli_free_result($result);

                        $response = [
                            'success' => true,
                            'data' => [
                                'columns' => [], // 保留空数组以保持前端兼容性
                                'data' => $data,
                                'total' => $total,
                                'page' => $page,
                                'page_size' => $pageSize,
                                'total_pages' => ceil($total / $pageSize)
                            ]
                        ];
                    } else {
                        $response = ['success' => false, 'message' => '缺少表名参数'];
                    }
                    break;

                case 'update_table_data':
                    if (isset($_POST['table_name'], $_POST['id'], $_POST['field'], $_POST['value'])) {
                        $table_name = $_POST['table_name'];
                        $id = intval($_POST['id']);
                        $field = mysqli_real_escape_string($conn, $_POST['field']);
                        $value = mysqli_real_escape_string($conn, $_POST['value']);

                        // 更新数据
                        $sql = "UPDATE `$table_name` SET `$field` = '$value' WHERE `id` = $id";
                        if (mysqli_query($conn, $sql)) {
                            $response = ['success' => true, 'message' => '数据更新成功'];
                        } else {
                            $response = ['success' => false, 'message' => '数据更新失败: ' . mysqli_error($conn)];
                        }
                    } else {
                        $response = ['success' => false, 'message' => '缺少必要参数'];
                    }
                    break;
            }

            mysqli_close($conn);

            // 返回JSON响应
            header('Content-Type: application/json');
            echo json_encode($response, JSON_UNESCAPED_UNICODE);
            exit;
        } else {
            // 数据库连接失败
            $error_message = isset($GLOBALS['db_error']) ? $GLOBALS['db_error'] : '未知数据库连接错误';
            header('Content-Type: application/json');
            echo json_encode(['success' => false, 'message' => $error_message]);
            exit;
        }
    } catch (Exception $e) {
        // 返回错误响应
        header('Content-Type: application/json');
        echo json_encode(['success' => false, 'message' => $e->getMessage()]);
        exit;
    }
}
?>
<?php
$table_name_cn_map_json = json_encode(get_table_name_cn_map(), JSON_UNESCAPED_UNICODE);
if ($table_name_cn_map_json === false) {
    $table_name_cn_map_json = '{}';
}
?>
<div class="db-viewer">
    <div>
        <label for="table-select">选择数据库表</label>
        <select id="table-select" onchange="loadTableData(this.value)">
            <option value="">-- 请选择表 --</option>
        </select>
    </div>
    <br>
    <div id="table-info">请选择数据表查看信息</div>
</div>

<script>
    var tableNameCnMap = <?php echo $table_name_cn_map_json; ?>;

    // 更新数据库状态
    function updateStatus(message, isError) {
        // 根据连接状态更新选择框标签
        var labelElement = document.querySelector('label[for="table-select"]');
        if (labelElement) {
            if (isError) {
                labelElement.innerHTML = '选择数据库表（失败）';
            } else {
                labelElement.innerHTML = '选择数据库表（成功）';
            }
        }

    }

    // 发送AJAX请求
    function ajaxRequest(action, data, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/admin/Plugin.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

        xhr.onload = function() {
            if (xhr.status === 200) {
                try {
                    var response = JSON.parse(xhr.responseText);
                    callback(response);
                } catch (e) {
                    updateStatus('JSON解析错误: ' + xhr.responseText, true);
                }
            } else {
                updateStatus('请求错误: ' + xhr.status, true);
            }
        };

        xhr.onerror = function() {
            updateStatus('网络错误', true);
        };

        // 构建请求参数
        var params = 'plugin=18_dbviewer&plugin_action=' + action;
        for (var key in data) {
            params += '&' + key + '=' + encodeURIComponent(data[key]);
        }

        xhr.send(params);
    }

    // 加载表列表
    function loadTables() {
        ajaxRequest('get_tables', {}, function(response) {
            if (response.success && response.data && response.data.tables) {
                updateStatus('数据库连接成功', false);
                var selectElement = document.getElementById('table-select');
                selectElement.innerHTML = '<option value="">-- 请选择表 --</option>';

                response.data.tables.forEach(function(table) {
                    var option = document.createElement('option');
                    option.value = table;
                    var cn = tableNameCnMap[table] || '';
                    option.textContent = cn ? (cn + '（' + table + '）') : table;
                    selectElement.appendChild(option);
                });

                // 默认选择第一个表并加载数据
                if (response.data.tables.length > 0) {
                    var firstTable = response.data.tables[0];
                    selectElement.value = firstTable;
                    loadTableData(firstTable);
                }
            } else {
                updateStatus('数据库连接失败: ' + (response.message || '未知错误'), true);
            }
        });
    }

    // 加载表数据
    function loadTableData(tableName, page = 1, pageSize = 10) {
        if (!tableName) {
            document.getElementById('table-info').innerHTML = '请选择数据表查看信息';
            return;
        }

        document.getElementById('table-info').innerHTML = '';

        ajaxRequest('get_table_data', {
            table_name: tableName,
            page: page,
            page_size: pageSize
        }, function(response) {
            if (response.success) {
                // 显示表数据
                var totalRecords = response.data.total;
                var currentPage = response.data.page;
                var totalPages = response.data.total_pages;

                // 整个表格区域使用一个统一的容器
                var html = '';

                if (response.data.data.length > 0) {
                    // 添加分页控件（固定在顶部）
                    html += '<div class="table-header">';
                    html += '<span>共 ' + totalPages + ' 页 当前第 ' + currentPage + ' 页</span>';
                    html += '<div class="pagination-container">';

                    // 上一页
                    if (currentPage > 1) {
                        html += '<button onclick="loadTableData(\'' + tableName + '\', ' + (currentPage - 1) + ', ' + pageSize + ')">上一页</button>';
                    } else {
                        html += '<button disabled>上一页</button>';
                    }

                    // 页码按钮（简单实现，只显示当前页前后各2页）
                    var startPage = Math.max(1, currentPage - 2);
                    var endPage = Math.min(totalPages, currentPage + 2);

                    if (startPage > 1) {
                        html += '<button onclick="loadTableData(\'' + tableName + '\', 1, ' + pageSize + ')">1</button>';
                        if (startPage > 2) {
                            html += '<span>...</span>';
                        }
                    }

                    for (var i = startPage; i <= endPage; i++) {
                        if (i === currentPage) {
                            html += '<button class="active" onclick="loadTableData(\'' + tableName + '\', ' + i + ', ' + pageSize + ')">' + i + '</button>';
                        } else {
                            html += '<button onclick="loadTableData(\'' + tableName + '\', ' + i + ', ' + pageSize + ')">' + i + '</button>';
                        }
                    }

                    if (endPage < totalPages) {
                        if (endPage < totalPages - 1) {
                            html += '<span>...</span>';
                        }
                        html += '<button onclick="loadTableData(\'' + tableName + '\', ' + totalPages + ', ' + pageSize + ')">' + totalPages + '</button>';
                    }

                    // 下一页
                    if (currentPage < totalPages) {
                        html += '<button onclick="loadTableData(\'' + tableName + '\', ' + (currentPage + 1) + ', ' + pageSize + ')">下一页</button>';
                    } else {
                        html += '<button disabled>下一页</button>';
                    }

                    html += '</div>';
                    html += '</div>';

                    // 添加表格滚动容器
                    html += '<div class="table-container">';
                    html += '<table>';

                    // 表头
                    html += '<tr>';
                    var index = 0;
                    for (var key in response.data.data[0]) {
                        // 为第一列（ID列）添加特殊类名
                        var thClass = index === 0 ? 'id-column' : '';
                        html += '<th class="' + thClass + '">' + key + '</th>';
                        index++;
                    }
                    html += '</tr>';

                    // 数据行
                    response.data.data.forEach(function(row) {
                        html += '<tr>';
                        var index = 0;
                        for (var key in row) {
                            // 为第一列（ID列）添加特殊类名
                            var tdClass = index === 0 ? 'id-column' : '';
                            var value = row[key];
                            if (value === null) value = 'NULL';

                            // 确保显示纯文本，不解析HTML
                            var textValue = value;
                            if (typeof textValue === 'string') {
                                // 将HTML标签转换为纯文本
                                var tempDiv = document.createElement('div');
                                tempDiv.textContent = textValue;
                                textValue = tempDiv.innerHTML;

                                // 长文本截断
                                if (textValue.length > 100) {
                                    textValue = textValue.substring(0, 100) + '...';
                                }
                            }

                            html += '<td class="' + tdClass + '" data-field="' + key + '" data-id="' + row.id + '">' + textValue + '</td>';
                            index++;
                        }
                        html += '</tr>';
                    });

                    html += '</table>';
                    html += '</div>'; // 闭合表格滚动容器
                } else {
                    // 添加分页控件（空数据时）
                    html += '<div class="table-header">';
                    html += '<span>共 0 页 当前第 0 页</span>';
                    html += '<div class="pagination-container">';
                    html += '<button disabled>上一页</button>';
                    html += '<button disabled>下一页</button>';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="table-container">';
                    html += '<p>该数据表为空</p>';
                    html += '</div>';
                }

                // 移除了原来在表格下方的分页控件，已移至表格右上角

                html += '</div>';

                document.getElementById('table-info').innerHTML = html;
            } else {
                document.getElementById('table-info').innerHTML = '加载失败: ' + (response.message || '未知错误');
            }
        });
    }

    // 页面加载完成后初始化
    // 表头拖动调节列宽功能 - 默认自适应，拖动后固定
    (function() {
        let isResizing = false;
        let currentTh = null;
        let startX = 0;
        let startWidth = 0;

        // 添加鼠标按下事件
        document.addEventListener('mousedown', function(e) {
            // 检查是否点击了表头的调整手柄
            const th = e.target.closest('th');
            if (th && e.offsetX > th.offsetWidth - 10) {
                isResizing = true;
                currentTh = th;
                startX = e.clientX;
                startWidth = th.offsetWidth;
                th.classList.add('dragging');

                // 当开始拖动时，将表格切换为固定布局
                const table = th.closest('table');

                // 在切换到fixed布局前，为所有列设置当前宽度，避免列宽重置
                const ths = table.querySelectorAll('th');
                ths.forEach(function(header) {
                    // 只设置未明确设置宽度的列
                    if (!header.style.width) {
                        header.style.width = header.offsetWidth + 'px';
                        header.style.minWidth = header.offsetWidth + 'px';

                        // 同时设置对应的数据列宽度
                        const index = Array.from(header.parentNode.children).indexOf(header);
                        const tbody = table.querySelector('tbody');
                        if (tbody) {
                            const rows = tbody.querySelectorAll('tr');
                            rows.forEach(row => {
                                const cell = row.children[index];
                                if (cell && !cell.classList.contains('id-column')) {
                                    cell.style.width = header.offsetWidth + 'px';
                                    cell.style.minWidth = header.offsetWidth + 'px';
                                }
                            });
                        }
                    }
                });

                table.classList.add('dragging');
                e.preventDefault();
            }
        });

        // 添加鼠标移动事件
        document.addEventListener('mousemove', function(e) {
            if (isResizing && currentTh) {
                const deltaX = e.clientX - startX;
                const newWidth = Math.max(80, startWidth + deltaX); // 最小宽度80px

                // 设置新宽度
                currentTh.style.width = newWidth + 'px';
                currentTh.style.minWidth = newWidth + 'px';
                currentTh.style.maxWidth = 'none'; // 允许列宽自由调整

                // 更新对应的数据列
                const index = Array.from(currentTh.parentNode.children).indexOf(currentTh);
                const table = currentTh.closest('table');
                const tbody = table.querySelector('tbody');

                if (tbody) {
                    const rows = tbody.querySelectorAll('tr');
                    rows.forEach(row => {
                        const cell = row.children[index];
                        if (cell && !cell.classList.contains('id-column')) { // ID列不允许调整
                            cell.style.width = newWidth + 'px';
                            cell.style.minWidth = newWidth + 'px';
                            cell.style.maxWidth = 'none';
                        }
                    });
                }
            }
        });

        // 添加鼠标释放事件
        document.addEventListener('mouseup', function() {
            if (isResizing && currentTh) {
                isResizing = false;
                currentTh.classList.remove('dragging');

                // 移除表格的拖动类，但保持固定布局
                const table = currentTh.closest('table');
                table.classList.remove('dragging');
                // 强制设置table-layout为fixed，确保拖动后的列宽生效
                table.style.tableLayout = 'fixed';

                currentTh = null;
            }
        });
    })();

    // 表格双击编辑功能
    (function() {
        // 双击单元格进入编辑模式
        document.addEventListener('dblclick', function(e) {
            // 确保点击的是表格单元格，不是表头或其他元素
            if (e.target.tagName === 'TD' && !e.target.classList.contains('editing') && !e.target.classList.contains('id-column')) {
                const td = e.target;
                const table = td.closest('table');
                const row = td.closest('tr');

                // 获取当前单元格的原始值
                const originalValue = td.textContent;

                // 获取字段名
                const columnIndex = Array.from(row.cells).indexOf(td);
                const th = table.querySelectorAll('th')[columnIndex];
                if (!th) return;
                const field = th.textContent;

                // 获取ID值
                const idCell = row.querySelector('.id-column');
                if (!idCell) return;
                const id = idCell.textContent;

                // 获取当前选中的表名
                const tableName = document.getElementById('table-select').value;
                if (!tableName) return;

                // 添加编辑状态类
                td.classList.add('editing');

                // 保存当前单元格的宽度
                const cellWidth = td.offsetWidth;

                // 创建输入框，设置固定宽度以防止列宽变化
                const input = document.createElement('input');
                input.type = 'text';
                input.value = originalValue;
                input.className = 'cell-edit-input';

                // 精确计算输入框宽度，确保不会导致列宽变化
                // 使用getComputedStyle获取实际的内边距值
                const computedStyle = window.getComputedStyle(td);
                const paddingLeft = parseInt(computedStyle.paddingLeft);
                const paddingRight = parseInt(computedStyle.paddingRight);
                const borderLeft = parseInt(computedStyle.borderLeftWidth);
                const borderRight = parseInt(computedStyle.borderRightWidth);

                // 设置输入框宽度，确保不会超出单元格
                input.style.width = (cellWidth - paddingLeft - paddingRight - borderLeft - borderRight) + 'px';
                input.style.height = '100%';
                input.style.border = 'none';
                input.style.padding = computedStyle.padding;
                input.style.boxSizing = 'border-box';
                input.style.fontSize = computedStyle.fontSize;
                input.style.backgroundColor = '#fffbe6';
                input.style.overflow = 'hidden';
                input.style.textOverflow = 'ellipsis';
                input.style.whiteSpace = 'nowrap';

                // 强制单元格保持固定宽度
                td.style.width = cellWidth + 'px';
                td.style.minWidth = cellWidth + 'px';
                td.style.maxWidth = cellWidth + 'px';

                // 清空单元格内容并添加输入框
                td.innerHTML = '';
                td.appendChild(input);

                // 自动聚焦并选择文本
                input.focus();
                input.select();

                // 保存原始值用于取消编辑
                input.dataset.originalValue = originalValue;
                input.dataset.id = id;
                input.dataset.field = field;
                input.dataset.tableName = tableName;
            }
        });

        // 失去焦点时保存数据
        document.addEventListener('blur', function(e) {
            if (e.target.classList.contains('cell-edit-input')) {
                saveData(e.target);
            }
        }, true);

        // 按Enter键保存数据
        document.addEventListener('keydown', function(e) {
            if (e.target.classList.contains('cell-edit-input') && e.key === 'Enter') {
                saveData(e.target);
            } else if (e.target.classList.contains('cell-edit-input') && e.key === 'Escape') {
                // 按Escape键取消编辑
                cancelEdit(e.target);
            }
        });

        // 保存数据函数
        function saveData(input) {
            const td = input.closest('td');
            const id = input.dataset.id;
            const field = input.dataset.field;
            const tableName = input.dataset.tableName;
            const originalValue = input.dataset.originalValue;
            const newValue = input.value;

            // 如果值没有变化，直接取消编辑
            if (newValue === originalValue) {
                cancelEdit(input);
                return;
            }

            // 显示加载状态
            td.classList.add('saving');
            td.innerHTML = '保存中...';

            // 发送AJAX请求保存数据
            ajaxRequest('update_table_data', {
                table_name: tableName,
                id: id,
                field: field,
                value: newValue
            }, function(response) {
                if (response.success) {
                    // 保存成功，更新单元格内容
                    td.classList.remove('editing', 'saving');
                    td.textContent = newValue;
                } else {
                    // 保存失败，恢复原始值
                    td.classList.remove('editing', 'saving');
                    td.textContent = originalValue;
                    alert('保存失败: ' + (response.message || '未知错误'));
                }
            });
        }

        // 取消编辑函数
        function cancelEdit(input) {
            const td = input.closest('td');
            const originalValue = input.dataset.originalValue;
            td.classList.remove('editing');
            td.textContent = originalValue;
        }
    })();

    window.onload = function() {
        loadTables();
    };
</script>

<style>
    h2 {
        color: #212529;
        margin-bottom: 20px;
        font-size: 22px;
        font-weight: 500;
        border-bottom: 1px solid #e9ecef;
        padding-bottom: 10px;
    }

    h3 {
        color: #495057;
        margin: 15px 0 10px 0;
        font-size: 16px;
        font-weight: 500;
    }

    h4 {
        color: #495057;
        margin: 10px 0;
        font-size: 14px;
        font-weight: 500;
    }

    select {
        padding: 8px 10px;
        min-width: 200px;
        border: 1px solid #ced4da;
        border-radius: 2px;
        font-size: 14px;
        background-color: white;
        transition: all 0.2s ease;
        outline: none;
    }

    select:focus {
        border-color: #6c757d;
        box-shadow: 0 0 0 1px rgba(108, 117, 125, 0.25);
    }


    /* 表格容器 - 确保滚动条始终可见并正常工作 */
    .table-container {
        overflow-x: scroll !important;
        /* 始终显示水平滚动条 */
        overflow-y: auto;
        margin: 10px 0;
        border-radius: 2px;
        border: 1px solid #e9ecef;
        /* 确保滚动条始终显示 */
        scrollbar-width: thin;
        scrollbar-color: #adb5bd #f8f9fa;
        display: block;
        /* 确保容器作为块级元素显示，以便滚动 */
        width: 100%;
        /* 设置宽度为100%，确保自适应 */
        min-width: 870px;
        /* 设置最小宽度为870px */

        box-sizing: border-box;
    }

    /* Chrome/Safari滚动条样式 */
    .table-container::-webkit-scrollbar {
        height: 8px;
    }

    .table-container::-webkit-scrollbar-track {
        background: #f8f9fa;
    }

    .table-container::-webkit-scrollbar-thumb {
        background-color: #adb5bd;
        border-radius: 4px;
    }

    .table-container::-webkit-scrollbar-thumb:hover {
        background-color: #6c757d;
    }

    /* 确保表格容器始终显示底部边框作为视觉提示 */
    .table-container:after {
        content: '';
        display: block;
        height: 1px;
        background-color: #e9ecef;
    }

    table {
        font-size: 13px;
        width: 100%;
        /* 表格宽度占满容器 */
        border-collapse: collapse;
        /* 使用collapse合并边框 */
        border-spacing: 0;
        background-color: white;
        table-layout: fixed;
        /* 使用固定表格布局，确保列宽不随内容变化 */
        min-width: 100%;
        /* 确保表格至少占满容器宽度 */
        display: table;
    }

    th,
    td {
        padding: 0 12px;
        /* 调整内边距，配合固定高度 */
        height: 45px;
        /* 固定表项高度为45px */
        line-height: 45px;
        /* 使用行高实现垂直居中 */
        text-align: left;
        border: 1px solid #dee2e6;
        white-space: nowrap;
        /* 不允许内容换行，保持行高一致 */
        overflow: hidden;
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
        vertical-align: middle;
        /* 垂直居中对齐 */
        min-width: 80px;
        /* 设置默认最小列宽 */
        max-width: 300px;
        /* 设置最大列宽，防止列宽无限增长 */
        cursor: default;
        /* 重置光标样式 */
        box-sizing: border-box;
        position: relative;
        /* 为编辑状态提供定位上下文 */
    }

    /* ID列特殊样式 - 固定宽度60px */
    th.id-column,
    td.id-column {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        text-align: center;
    }

    /* 表格标题样式 */
    .table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding: 5px 15px;
    }

    /* 表格容器样式 - 显示需要的滚动条 */
    .table-container {
        width: 100%;
        max-width: 100%;
        /* 确保容器不超出父元素宽度 */
        height: 400px;
        /* 固定容器高度，确保纵向滚动条能显示 */
        overflow-x: auto !important;
        /* 在内容超出时显示横向滚动条 */
        overflow-y: auto !important;
        /* 在内容超出时显示纵向滚动条 */
        box-sizing: border-box;
        scrollbar-width: thin;
        min-width: 870px;
        position: relative;
        display: block;
        border: 1px solid #ddd;
        border-top: none;
        margin-top: -1px;
    }

    /* 优化滚动条样式 */
    .table-container::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important;
        /* 显示横向滚动条 */
    }

    .table-container::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
    }

    .table-container::-webkit-scrollbar-thumb {
        background: #888 !important;
        border-radius: 4px !important;
    }

    /* 确保IE浏览器中滚动条正确显示 */
    .table-container {
        -ms-overflow-style: auto !important;
    }

    /* 基础表格样式 - 默认自适应列宽，拖动后固定 */
    table {
        width: 100%;
        table-layout: auto;
        border-collapse: collapse;
        border-spacing: 0;
        box-sizing: border-box;
        min-width: 870px;
        /* 表格最小宽度为870px */
    }

    /* 拖动时切换为固定布局 */
    table.dragging {
        table-layout: fixed;
    }

    /* 媒体查询：确保表格占满容器宽度 */
    @media (min-width: 870px) {
        table {
            width: 100%;
        }
    }

    /* 确保插件容器的样式正确 */
    #table-info {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
    }

    /* 确保插件整体容器的样式 */
    .qkcms-plugin-container {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* 为整个插件页面添加样式 */
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    /* 左侧页码信息样式 */
    .table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 15px;
        background-color: white;
        border: 1px solid #ddd;
        border-bottom: none;
        position: sticky;
        top: 0;
        z-index: 10;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .table-header span {
        font-size: 13px;
        font-weight: 500;
        color: #495057;
    }

    /* 分页容器样式 */
    .pagination-container {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .pagination-container span {
        font-size: 13px;
        color: #666;
    }

    .pagination-container button {
        padding: 3px 8px;
        margin: 0 2px;
        border: 1px solid #ddd;
        background-color: white;
        color: #495057;
        cursor: pointer;
        border-radius: 3px;
        font-size: 13px;
        transition: all 0.3s;
    }

    .pagination-container button:hover:not(:disabled) {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }

    .pagination-container button.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }

    .pagination-container button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* 分页控件样式 */
    .pagination {
        margin-top: 20px;
        text-align: center;
        padding: 10px;
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
    }

    .pagination span {
        margin: 0 10px;
        font-size: 14px;
        color: #666;
    }

    .pagination button {
        padding: 5px 12px;
        margin: 0 5px;
        border: 1px solid #ddd;
        background-color: white;
        color: #495057;
        cursor: pointer;
        border-radius: 3px;
        font-size: 14px;
        transition: all 0.3s;
    }

    .pagination button:hover:not(:disabled) {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }

    .pagination button.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }

    .pagination button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .pagination .total-records {
        font-weight: bold;
        color: #333;
    }

    /* 编辑模式样式 */
    td.editing {
        padding: 0;
        background-color: #fff3cd;
    }

    /* 编辑输入框样式 */
    .cell-edit-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ffc107;
        border-radius: 2px;
        font-size: 13px;
        box-sizing: border-box;
        outline: none;
    }

    /* 保存中状态样式 */
    td.saving {
        background-color: #e3f2fd;
        color: #1976d2;
        text-align: center;
        padding: 10px 12px;
    }

    /* 表头列宽调整手柄样式 */
    th {
        position: sticky;
        top: 0;
        background-color: #f8f9fa;
        color: #495057;
        font-weight: 500;
        font-size: 12px;
        text-transform: none;
        letter-spacing: normal;
        z-index: 5;
        border-bottom: 2px solid #dee2e6;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
        table-layout: fixed;
    }

    th:hover {
        background-color: #e9ecef;
    }

    /* 列宽调整手柄 */
    th::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 5px;
        height: 100%;
        cursor: col-resize;
        background-color: transparent;
        transition: all 0.2s ease;
    }

    th:hover::after {
        background-color: #6c757d;
    }

    /* 拖动时的样式 */
    th.dragging {
        cursor: col-resize;
    }

    th.dragging::after {
        background-color: #495057;
        opacity: 0.7;
    }

    th {
        background-color: #f8f9fa;
        color: #495057;
        font-weight: 500;
        font-size: 12px;
        text-transform: none;
        letter-spacing: normal;
    }

    tr:nth-child(even) {
        background-color: #f8f9fa;
    }

    tr:hover {
        background-color: #e9ecef;
    }

    p {
        margin: 10px 0;
        color: #6c757d;
        font-size: 13px;
    }
</style>
