From 242c1223645eca18387280074c297df301e0af97 Mon Sep 17 00:00:00 2001
From: Shigma <shigma10826@gmail.com>
Date: Fri, 24 Nov 2023 00:43:52 +0800
Subject: [PATCH] =?UTF-8?q?=EF=BC=8Cfeat(logger):=20virtual=20scroll=20for?=
 =?UTF-8?q?=20logger,=20fix=20#2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/client/virtual/list.vue |  3 +-
 plugins/logger/client/logs.vue              | 44 +++++++--------------
 2 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/packages/components/client/virtual/list.vue b/packages/components/client/virtual/list.vue
index 13897449..23ca7e97 100644
--- a/packages/components/client/virtual/list.vue
+++ b/packages/components/client/virtual/list.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-scrollbar ref="root" @scroll="onScroll">
+  <el-scrollbar ref="root" @scroll="onScroll" :max-height="maxHeight">
     <virtual-item v-if="$slots.header" @resize="virtual.saveSize('header', $event)">
       <div><slot name="header"></slot></div>
     </virtual-item>
@@ -34,6 +34,7 @@ const props = defineProps({
   pinned: Boolean,
   activeKey: { default: '' },
   threshold: { default: 0 },
+  maxHeight: String,
 })
 
 const dataShown = computed<any[]>(() => props.data.slice(range.start, range.end))
diff --git a/plugins/logger/client/logs.vue b/plugins/logger/client/logs.vue
index 746609ae..bddba0c0 100644
--- a/plugins/logger/client/logs.vue
+++ b/plugins/logger/client/logs.vue
@@ -1,10 +1,7 @@
 <template>
-  <el-scrollbar class="container" :max-height="maxHeight">
-    <div ref="root" class="logs k-text-selectable">
-      <div
-        v-for="(record, index) in logs"
-        :key="record.id"
-        class="line" :class="{ start: index && logs[index - 1].id > record.id && record.name === 'app' }">
+  <virtual-list class="log-list k-text-selectable" :data="logs" :count="300" :max-height="maxHeight">
+    <template #="record">
+      <div :class="{ line: true, start: isStart(record) }">
         <code v-html="renderLine(record)"></code>
         <router-link
           class="log-link"
@@ -14,14 +11,13 @@
           <k-icon name="arrow-right"/>
         </router-link>
       </div>
-    </div>
-  </el-scrollbar>
+    </template>
+  </virtual-list>
 </template>
 
 <script lang="ts" setup>
 
-import { ref, onActivated, watch, nextTick } from 'vue'
-import { Time, store } from '@koishijs/client'
+import { Time, store, VirtualList } from '@koishijs/client'
 import {} from '@koishijs/plugin-config'
 import Logger from 'reggol'
 import ansi from 'ansi_up'
@@ -32,8 +28,6 @@ const props = defineProps<{
   maxHeight?: string,
 }>()
 
-const root = ref<HTMLElement>()
-
 // this package does not have consistent exports in different environments
 const converter = new (ansi['default'] || ansi)()
 
@@ -43,6 +37,10 @@ function renderColor(code: number, value: any, decoration = '') {
 
 const showTime = 'yyyy-MM-dd hh:mm:ss'
 
+function isStart(record: Logger.Record & { index: number }) {
+  return record.index && props.logs[record.index - 1].id > record.id && record.name === 'app'
+}
+
 function renderLine(record: Logger.Record) {
   const prefix = `[${record.type[0].toUpperCase()}]`
   const space = ' '
@@ -57,33 +55,19 @@ function renderLine(record: Logger.Record) {
   return converter.ansi_to_html(output)
 }
 
-onActivated(() => {
-  const wrapper = root.value.parentElement.parentElement
-  wrapper.scrollTop = wrapper.scrollHeight
-})
-
-watch(() => props.logs.length, async () => {
-  const wrapper = root.value.parentElement.parentElement
-  const { scrollTop, clientHeight, scrollHeight } = wrapper
-  if (Math.abs(scrollTop + clientHeight - scrollHeight) < 1) {
-    await nextTick()
-    wrapper.scrollTop = scrollHeight
-  }
-})
-
 </script>
 
 <style lang="scss" scoped>
 
-.container {
+.log-list {
   color: var(--terminal-fg);
   background-color: var(--terminal-bg);
 
-  .logs {
+  :deep(.el-scrollbar__view) {
     padding: 1rem 1rem;
   }
 
-  .logs .line.start {
+  .line.start {
     margin-top: 1rem;
 
     &::before {
@@ -96,7 +80,7 @@ watch(() => props.logs.length, async () => {
     }
   }
 
-  .logs:first-child .line:first-child {
+  .line:first-child {
     margin-top: 0;
 
     &::before {