feat: 优化日志显示

extend/base/admin/view/debug/log/index.html

@@ -1,5 +1,27 @@
 <div class="layuimini-container">
     <div class="layuimini-main">
+        <form class="layui-form" style="margin-bottom: 10px;">
+            <div class="layui-form-item">
+                <div class="layui-inline">
+                    <label class="layui-form-label" style="width: auto; padding: 9px 10px;">排序方式</label>
+                    <div class="layui-input-inline" style="width: 120px;">
+                        <select id="order-select" lay-filter="order-select">
+                            <option value="desc" selected>倒序</option>
+                            <option value="asc">正序</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="layui-inline">
+                    <label class="layui-form-label" style="width: auto; padding: 9px 10px;">排序字段</label>
+                    <div class="layui-input-inline" style="width: 180px;">
+                        <select id="sort-select" lay-filter="sort-select">
+                            <option value="uid" selected>按请求分组 (uid排序)</option>
+                            <option value="id" >实时记录 (id排序)</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </form>
         <div id="log-container" class="log-container"></div>
     </div>
 </div>
@@ -12,7 +34,7 @@
         padding: 15px;
         white-space: pre-wrap;
         word-wrap: break-word;
-        height: calc(100vh - 120px);
+        height: calc(100vh - 170px);
         overflow-y: auto;
     }
 

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

@@ -7,28 +7,35 @@ $(function () {
         limit = 50,
         noMoreData = false;
     var $logContainer = $('#log-container');
+    var order = 'desc', sortField = 'uid';
 
     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: sort
-                    id:'desc'
-                }
             }
         }, function (res) {
             if (res.data && res.data.length > 0) {
                 var html = '';
                 var isFirstPage = (page === 1);
+
                 layui.each(res.data, function (index, item) {
                     html += '<span class="log-line log-level-' + item.level.toLowerCase() + '">';
                     html += '[' + item.uid + '] ';
+                    html += '[' + item.id + '] ';
                     html += '[' + item.create_time + '] ';
                     html += '[' + item.level.toUpperCase() + '] ';
                     html += item.content;
@@ -36,44 +43,75 @@ $(function () {
                 });
 
                 var oldScrollHeight = $logContainer[0].scrollHeight;
-                $logContainer.prepend(html);
+
+                if (order === 'desc') {
+                    $logContainer.prepend(html);
+                } else {
+                    $logContainer.append(html);
+                }
+
                 var newScrollHeight = $logContainer[0].scrollHeight;
 
                 if (isFirstPage) {
-                    // 首次加载，滚动到底部
+                    // 首次加载，倒序滚动到底部，正序滚动到顶部
-                    $logContainer.scrollTop(newScrollHeight);
+                    $logContainer.scrollTop(order === 'desc' ? newScrollHeight : 0);
                 } else {
                     // 加载更多，保持滚动位置
-                    $logContainer.scrollTop(newScrollHeight - oldScrollHeight);
+                    if (order === 'desc') {
+                        $logContainer.scrollTop(newScrollHeight - oldScrollHeight);
+                    }
                 }
 
                 page++;
             } else {
                 noMoreData = true;
-                $logContainer.prepend('<div style="text-align:center;color:#888;padding-bottom:15px;">- The Beginning -</div>');
+                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();
+        loadLogs();
+    }
+
     // 初始加载
     loadLogs();
 
     // 监听滚动事件
     $logContainer.on('scroll', function () {
         var $this = $(this);
-        // 滚动条到顶部时加载更多
+        // 滚动条到顶部时（倒序）或到底部时（正序）加载更多
-        if ($this.scrollTop() === 0) {
+        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();
+    });
+
     // 监听刷新按钮
     ua.listen.refresh(function () {
-        page = 1;
+        reloadLogs();
-        noMoreData = false;
-        $logContainer.empty();
-        loadLogs();
     });
 });