From 8dfb4854a81ece6de100e569b25ab9a4a06f83b5 Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Wed, 11 Oct 2023 22:46:31 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?=E5=AE=A1=E8=AE=A1-=E7=BD=91=E7=AB=99=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?=E4=B8=8D=E6=98=BE=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98=20(#2520?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/log/website/index.vue      | 76 ++++++++++++++-----
 .../config/basic/site-folder/index.vue        |  1 -
 2 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/frontend/src/views/log/website/index.vue b/frontend/src/views/log/website/index.vue
index c8be3d3c4..0f79fd03a 100644
--- a/frontend/src/views/log/website/index.vue
+++ b/frontend/src/views/log/website/index.vue
@@ -65,7 +65,7 @@
                     theme="cobalt"
                     :styleActiveLine="true"
                     :extensions="extensions"
-                    v-model="data.content"
+                    v-model="content"
                     :disabled="true"
                     @ready="handleReady"
                 />
@@ -90,11 +90,6 @@ const extensions = [javascript(), oneDark];
 
 const loading = ref(false);
 const websites = ref();
-const logReq = reactive({
-    id: undefined,
-    operate: 'get',
-    logType: 'access.log',
-});
 const data = ref({
     enable: false,
     content: '',
@@ -103,6 +98,19 @@ const confirmDialogRef = ref();
 const tailLog = ref(false);
 let timer: NodeJS.Timer | null = null;
 
+const content = ref('');
+const end = ref(false);
+const lastContent = ref('');
+const editorContainer = ref<HTMLDivElement | null>(null);
+
+const logReq = reactive({
+    id: undefined,
+    operate: 'get',
+    logType: 'access.log',
+    page: 0,
+    pageSize: 500,
+});
+
 const getWebsites = async () => {
     loading.value = true;
     await ListWebsites()
@@ -111,6 +119,17 @@ const getWebsites = async () => {
             if (websites.value.length > 0) {
                 logReq.id = websites.value[0].id;
                 search();
+                nextTick(() => {
+                    let editorElement = editorContainer.value.querySelector('.cm-editor');
+                    let scrollerElement = editorElement.querySelector('.cm-scroller') as HTMLElement;
+                    if (scrollerElement) {
+                        scrollerElement.addEventListener('scroll', function () {
+                            if (isScrolledToBottom(scrollerElement)) {
+                                search();
+                            }
+                        });
+                    }
+                });
             }
         })
         .finally(() => {
@@ -121,6 +140,7 @@ const getWebsites = async () => {
 const view = shallowRef();
 const handleReady = (payload) => {
     view.value = payload.view;
+    editorContainer.value = payload.container;
 };
 
 const changeType = (type: string) => {
@@ -131,21 +151,34 @@ const changeType = (type: string) => {
 };
 
 const search = () => {
-    loading.value = true;
-    OpWebsiteLog(logReq)
-        .then((res) => {
-            data.value = res.data;
-            nextTick(() => {
-                const state = view.value.state;
-                view.value.dispatch({
-                    selection: { anchor: state.doc.length, head: state.doc.length },
-                    scrollIntoView: true,
-                });
+    if (!end.value) {
+        logReq.page += 1;
+    }
+    OpWebsiteLog(logReq).then((res) => {
+        if (!end.value && res.data.end) {
+            lastContent.value = content.value;
+        }
+        data.value = res.data;
+        if (res.data.content != '') {
+            if (end.value) {
+                content.value = lastContent.value + '\n' + res.data.content;
+            } else {
+                if (content.value == '') {
+                    content.value = res.data.content;
+                } else {
+                    content.value = content.value + '\n' + res.data.content;
+                }
+            }
+        }
+        end.value = res.data.end;
+        nextTick(() => {
+            const state = view.value.state;
+            view.value.dispatch({
+                selection: { anchor: state.doc.length, head: state.doc.length },
             });
-        })
-        .finally(() => {
-            loading.value = false;
+            view.value.focus();
         });
+    });
 };
 
 const onClean = async () => {
@@ -195,9 +228,12 @@ const onSubmitClean = async () => {
         });
 };
 
+function isScrolledToBottom(element: HTMLElement): boolean {
+    return element.scrollTop + element.clientHeight === element.scrollHeight;
+}
+
 onMounted(() => {
     logReq.logType = 'access.log';
     getWebsites();
-    console.log(logReq.logType);
 });
 </script>
diff --git a/frontend/src/views/website/website/config/basic/site-folder/index.vue b/frontend/src/views/website/website/config/basic/site-folder/index.vue
index c7516363b..f3d5576ce 100644
--- a/frontend/src/views/website/website/config/basic/site-folder/index.vue
+++ b/frontend/src/views/website/website/config/basic/site-folder/index.vue
@@ -174,7 +174,6 @@ const getDirConfig = async () => {
         const res = await GetDirConfig({ id: props.id });
         dirs.value = res.data.dirs;
         dirConfig.value = res.data;
-        console.log(res);
     } catch (error) {}
 };