feat: 完成基本的日志展示

extend/base/admin/controller/debug/LogClass.php

@@ -1,27 +0,0 @@
-<?php
-
-namespace base\admin\controller\debug;
-
-use app\admin\service\annotation\ControllerAnnotation;
-use app\common\controller\AdminController;
-use think\App;
-
-/**
- * @ControllerAnnotation(title="debug_log")
- */
-class LogBase extends AdminController
-{
-    protected $sort = [
-        'uid' => 'desc',
-        'id' => 'asc',
-    ];
-
-    use \app\admin\traits\Curd;
-
-    public function __construct(App $app)
-    {
-        parent::__construct($app);
-
-        $this->model = new \app\admin\model\DebugLog();
-    }
-}

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

@@ -1,25 +1,34 @@
 <div class="layuimini-container">
     <div class="layuimini-main">
-        <table id="currentTable" class="layui-table layui-hide" data-auth-add="{:auth('debug.log/add')}" data-auth-edit="{:auth('debug.log/edit')}" data-auth-delete="{:auth('debug.log/delete')}" lay-filter="currentTable">
+        <div id="log-container" class="log-container"></div>
-        </table>
     </div>
 </div>
 <style>
-    [data-field="content"] .layui-table-cell {
+    .log-container {
-        white-space: normal !important;
+        background-color: #2d2d2d;
-        height: auto !important;
+        color: #cccccc;
-        color: #333;
+        font-family: "Consolas", "Monaco", "Menlo", "Courier New", "monospace";
+        font-size: 13px;
+        padding: 15px;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        height: calc(100vh - 120px);
+        overflow-y: auto;
     }
 
-    .log-group-0 {
+    .log-line {
-        background-color: #e6e6e6;
+        display: block;
+        padding: 2px 0;
+        border-bottom: 1px solid #444;
     }
 
-    .log-group-1 {
+    .log-line:last-child {
-        background-color: #f9f9f9;
+        border-bottom: none;
     }
 
-    .layui-table-view .layui-table td {
+    .log-level-info { color: #909399; }
-        padding: 0
+    .log-level-debug { color: #409eff; }
-    }
+    .log-level-notice { color: #67c23a; }
+    .log-level-warning { color: #e6a23c; }
+    .log-level-error { color: #f56c6c; }
 </style>

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

@@ -1,51 +1,79 @@
 $(function () {
     var init = {
-        tableElem: '#currentTable',
-        tableRenderId: 'currentTableRenderId',
         indexUrl: 'debug.log/index',
-        addUrl: 'debug.log/add',
-        editUrl: 'debug.log/edit',
-        deleteUrl: 'debug.log/delete',
-        exportUrl: 'debug.log/export',
-        modifyUrl: 'debug.log/modify',
     };
 
-    var uidList = [];
+    var page = 1,
-    ua.table.render({
+        limit = 50,
-        init: init,
+        noMoreData = false;
-        size: 'sm',
+    var $logContainer = $('#log-container');
-        limit: 50,
-        cols: [[
-            { type: 'checkbox' },
-            { field: 'id', title: 'id', search: 'number_limit' },
-            { field: 'id', title: 'id模糊匹配', trueHide: true, fieldAlias: '[id]like' },
-            { field: 'id', title: '最大id', trueHide: true, fieldAlias: '[id]max', searchOp: 'max' },
-            {
-                field: 'uid', title: 'uid', minWidth: 120,
-            },
-            { field: 'level', title: 'level', minWidth: 70 },
-            {
-                field: 'content', title: '日志内容', minWidth: 450, align: 'left', templet: function (data) {
 
-                    if (uidList.indexOf(data.uid) < 0) {
+    function loadLogs() {
-                        uidList.push(data.uid);
+        if (noMoreData) {
-                    }
+            return;
-                    var currentUidIndex = uidList.indexOf(data.uid);
+        }
 
-                    var className = 'log-group log-group-' + (currentUidIndex % 2);
+        ua.request.get({
-                    return '<div class="' + className + '">' + data.content + '</div>';
+            url: ua.url(init.indexUrl),
+            data: {
+                page: page,
+                limit: limit,
+                sort:{
+                    id:'desc'
                 }
-            },
+            }
-            { field: 'create_time', title: '记录时间', minWidth: 160, search: 'time_limit', defaultSearchValue: ua.getQueryVariable('create_time') },
+        }, function (res) {
-            { field: 'app_name', title: 'app_name' },
+            if (res.data && res.data.length > 0) {
-            { field: 'controller_name', title: 'controller_name', },
+                var html = '';
-            { field: 'action_name', title: 'action_name' },
+                var isFirstPage = (page === 1);
-        ]],
+                layui.each(res.data, function (index, item) {
-        toolbar: [
+                    html += '<span class="log-line log-level-' + item.level.toLowerCase() + '">';
-            'refresh',
+                    html += '[' + item.uid + '] ';
-            'export'
+                    html += '[' + item.create_time + '] ';
-        ]
+                    html += '[' + item.level.toUpperCase() + '] ';
+                    html += item.content;
+                    html += '</span>';
+                });
+
+                var oldScrollHeight = $logContainer[0].scrollHeight;
+                $logContainer.prepend(html);
+                var newScrollHeight = $logContainer[0].scrollHeight;
+
+                if (isFirstPage) {
+                    // 首次加载，滚动到底部
+                    $logContainer.scrollTop(newScrollHeight);
+                } else {
+                    // 加载更多，保持滚动位置
+                    $logContainer.scrollTop(newScrollHeight - oldScrollHeight);
+                }
+
+                page++;
+            } else {
+                noMoreData = true;
+                $logContainer.prepend('<div style="text-align:center;color:#888;padding-bottom:15px;">- The Beginning -</div>');
+            }
+        }, function () {
+            // complete
+        });
+    }
+
+    // 初始加载
+    loadLogs();
+
+    // 监听滚动事件
+    $logContainer.on('scroll', function () {
+        var $this = $(this);
+        // 滚动条到顶部时加载更多
+        if ($this.scrollTop() === 0) {
+            loadLogs();
+        }
     });
 
-    ua.listen();
+    // 监听刷新按钮
+    ua.listen.refresh(function () {
+        page = 1;
+        noMoreData = false;
+        $logContainer.empty();
+        loadLogs();
+    });
 });