ulthon_admin/extend/base/admin/view/debug/log/index.js

$(function () {
    var init = {
        indexUrl: 'debug.log/index',
    };

    var page = 1,
        limit = 50,
        noMoreData = false;
    var $logContainer = $('#log-container');
    var order = 'desc', sortField = 'uid';
    var lastUid = null;
    var colorIndex = 0;
    var groupColors = ['#FF5733', '#3357FF']; // 定义两种颜色

    function loadLogs() {
        if (noMoreData) {
            return;
        }

        var sort = {};
        sort[sortField] = order;
        if (sortField === 'uid') {
            sort['id'] = 'asc'
        }

        ua.request.get({
            url: ua.url(init.indexUrl),
            data: {
                page: page,
                limit: limit,
                sort: sort
            }
        }, function (res) {
            if (res.data && res.data.length > 0) {
                var html = '';
                var isFirstPage = (page === 1);

                layui.each(res.data, function (index, item) {
                    var style = '';
                    if (sortField === 'uid') {
                        if (lastUid !== null && item.uid !== lastUid) {
                            colorIndex = 1 - colorIndex; // 切换颜色索引
                        }
                        lastUid = item.uid;
                        var color = groupColors[colorIndex];
                        style = 'style="border-left: 3px solid ' + color + '; padding-left: 5px;"';
                    }
                    html += '<span class="log-line log-level-' + item.level.toLowerCase() + '" ' + style + '>';
                    html += '[' + item.uid + '] ';
                    html += '[' + item.id + '] ';
                    html += '[' + item.create_time + '] ';
                    html += '[' + item.level.toUpperCase() + '] ';
                    html += item.content;
                    html += '</span>';
                });

                var oldScrollHeight = $logContainer[0].scrollHeight;

                if (order === 'desc') {
                    $logContainer.prepend(html);
                } else {
                    $logContainer.append(html);
                }

                var newScrollHeight = $logContainer[0].scrollHeight;

                if (isFirstPage) {
                    // 首次加载，倒序滚动到底部，正序滚动到顶部
                    $logContainer.scrollTop(order === 'desc' ? newScrollHeight : 0);
                } else {
                    // 加载更多，保持滚动位置
                    if (order === 'desc') {
                        $logContainer.scrollTop(newScrollHeight - oldScrollHeight);
                    }
                }

                page++;
            } else {
                noMoreData = true;
                var endText = order === 'desc' ? '- The Beginning -' : '- The End -';
                var endHtml = '<div style="text-align:center;color:#888;padding:15px 0;">' + endText + '</div>';
                if (order === 'desc') {
                    $logContainer.prepend(endHtml);
                } else {
                    $logContainer.append(endHtml);
                }
            }
        }, function () {
            // complete
        });
    }

    function reloadLogs() {
        page = 1;
        noMoreData = false;
        $logContainer.empty();
        lastUid = null; // 重置上一个uid
        colorIndex = 0; // 重置颜色索引
        loadLogs();
    }

    // 初始加载
    loadLogs();

    // 监听滚动事件
    $logContainer.on('scroll', function () {
        var $this = $(this);
        // 滚动条到顶部时（倒序）或到底部时（正序）加载更多
        if ((order === 'desc' && $this.scrollTop() === 0) ||
            (order === 'asc' && $this.scrollTop() + $this.innerHeight() >= $this[0].scrollHeight - 1)) {
            loadLogs();
        }
    });

    // 监听排序方式选择
    layui.form.on('select(order-select)', function (data) {
        order = data.value;
        reloadLogs();
    });

    // 监听排序字段选择
    layui.form.on('select(sort-select)', function (data) {
        sortField = data.value;
        reloadLogs();
    });
});