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

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

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

    function loadLogs() {
        if (noMoreData || isLoading) { // 如果正在加载，则直接返回
            return;
        }
        isLoading = true; // 设置加载锁

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

        var requestData = {
            page: page,
            limit: limit,
            sort: sort,
        };

        var filter = {};
        var op = {};

        var appName = $('#app-select').val();
        if (appName) {
            filter.app_name = appName;
            op.app_name = '=';
        }

        var controllerName = $('#controller-select').val();
        if (controllerName) {
            filter.controller_name = controllerName;
            op.controller_name = '=';
        }

        var actionName = $('#action-select').val();
        if (actionName) {
            filter.action_name = actionName;
            op.action_name = '=';
        }

        var level = $('#level-select').val();
        if (level) {
            filter.level = level;
            op.level = '=';
        }

        if (Object.keys(filter).length > 0) {
            requestData.filter = JSON.stringify(filter);
            requestData.op = JSON.stringify(op);
        }

        ua.request.get({
            url: ua.url(init.indexUrl),
            data: requestData
        }, 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 += ' [' + item.app_name;
                    html += '/' + item.controller_name;
                    html += '/' + item.action_name;
                    html += '] ';
                    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);
                }
            }
        }, null, null, function () {
            // complete
            isLoading = false; // 释放加载锁
        });
    }

    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();
    });

    // 监听筛选条件选择
    layui.form.on('select(filter-select)', function (data) {
        reloadLogs();
    });

    // 监听刷新按钮点击
    $('#refresh-btn').on('click', function () {
        reloadLogs();
    });
});