fix: Standardize logging component (#8054)

Author: zhengkunwang223

frontend/src/components/backup/index.vue

@@ -119,7 +119,7 @@ import i18n from '@/lang';
 import { Backup } from '@/api/interface/backup';
 import router from '@/routers';
 import { MsgSuccess } from '@/utils/message';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
 

frontend/src/components/log-dialog/index.vue

@@ -22,7 +22,7 @@ import i18n from '@/lang';
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { GlobalStore } from '@/store';
 import screenfull from 'screenfull';
-import ContainerLog from '@/components/container-log/index.vue';
+import ContainerLog from '@/components/log/container/index.vue';
 
 const open = ref(false);
 const resource = ref('');

…end/src/components/compose-log/index.vue …end/src/components/log/compose/index.vuefrontend/src/components/compose-log/index.vue renamed to frontend/src/components/log/compose/index.vue frontend/src/components/compose-log/index.vue renamed to frontend/src/components/log/compose/index.vue

@@ -27,6 +27,7 @@ import i18n from '@/lang';
 import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
 import screenfull from 'screenfull';
 import { GlobalStore } from '@/store';
+import ContainerLog from '@/components/log/container/index.vue';
 
 const logVisible = ref(false);
 const mobile = computed(() => {

…/views/container/container/log/index.vue …omponents/log/container-drawer/index.vuefrontend/src/views/container/container/log/index.vue renamed to frontend/src/components/log/container-drawer/index.vue frontend/src/views/container/container/log/index.vue renamed to frontend/src/components/log/container-drawer/index.vue

@@ -24,16 +24,6 @@
             {{ $t('commons.button.clean') }}
         </el-button>
     </div>
-    <!-- <div class="log-container" ref="logContainer">
-        <DynamicScroller :items="logs" :min-item-size="32" v-if="logs.length">
-            <template #default="{ item, active }">
-                <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item]" :data-index="item">
-                    <hightlight :log="item" type="container"></hightlight>
-                </DynamicScrollerItem>
-            </template>
-        </DynamicScroller>
-    </div> -->
-
     <div class="log-container" ref="logContainer">
         <div class="log-spacer" :style="{ height: `${totalHeight}px` }"></div>
         <div
@@ -54,7 +44,7 @@ import { dateFormatForName } from '@/utils/util';
 import { onUnmounted, reactive, ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
 import { MsgError, MsgSuccess } from '@/utils/message';
-import hightlight from '@/components/hightlight/index.vue';
+import hightlight from '@/components/log/custom-hightlight/index.vue';
 
 const props = defineProps({
     container: {
@@ -79,13 +69,15 @@ const logSearch = reactive({
     compose: '',
 });
 const logHeight = 20;
-const logCount = ref(0);
+const logCount = computed(() => logs.value.length);
 const totalHeight = computed(() => logHeight * logCount.value);
 const startIndex = ref(0);
 const containerHeight = ref(500);
-const visibleCount = computed(() => Math.ceil(containerHeight.value / logHeight));
+const visibleCount = computed(() => Math.ceil(containerHeight.value / logHeight) + 2);
 const visibleLogs = computed(() => {
-    return logs.value.slice(startIndex.value, startIndex.value + visibleCount.value);
+    const start = Math.max(0, startIndex.value - 1);
+    const end = startIndex.value + visibleCount.value + 1;
+    return logs.value.slice(start, end);
 });
 
 const timeOptions = ref([
@@ -185,10 +177,22 @@ const onClean = async () => {
     });
 };
 
+const handleScroll = () => {
+    if (logContainer.value) {
+        const scrollTop = logContainer.value.scrollTop;
+        startIndex.value = Math.max(0, Math.floor(scrollTop / logHeight) - 1);
+    }
+};
+
 onUnmounted(() => {
     handleClose();
+    if (logContainer.value) {
+        logContainer.value.removeEventListener('scroll', handleScroll);
+    }
 });
 
+const resizeObserver = ref<ResizeObserver | null>(null);
+
 onMounted(() => {
     logSearch.container = props.container;
     logSearch.compose = props.compose;
@@ -200,8 +204,12 @@ onMounted(() => {
 
     nextTick(() => {
         if (logContainer.value) {
-            logContainer.value.scrollTop = totalHeight.value;
-            containerHeight.value = logContainer.value.getBoundingClientRect().height;
+            containerHeight.value = logContainer.value.clientHeight;
+            logContainer.value.addEventListener('scroll', handleScroll);
+            resizeObserver.value = new ResizeObserver((entries) => {
+                containerHeight.value = entries[0].contentRect.height;
+            });
+            resizeObserver.value.observe(logContainer.value);
         }
     });
 
@@ -227,7 +235,7 @@ onMounted(() => {
 }
 
 .log-container {
-    height: calc(100vh - 405px);
+    height: calc(100vh - 320px);
     overflow-y: auto;
     overflow-x: auto;
     position: relative;

…d/src/components/container-log/index.vue …d/src/components/log/container/index.vuefrontend/src/components/container-log/index.vue renamed to frontend/src/components/log/container/index.vue frontend/src/components/container-log/index.vue renamed to frontend/src/components/log/container/index.vue

@@ -0,0 +1,85 @@
+<template>
+    <DrawerPro
+        v-model="open"
+        :header="$t('commons.button.log')"
+        @close="handleClose"
+        :size="globalStore.isFullScreen ? 'full' : 'large'"
+    >
+        <template #extra v-if="!mobile">
+            <el-tooltip :content="loadTooltip()" placement="top">
+                <el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
+            </el-tooltip>
+        </template>
+        <template #content>
+            <LogFile :config="config" :height-diff="props.heightDiff"></LogFile>
+        </template>
+    </DrawerPro>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import LogFile from '@/components/log/file/index.vue';
+import { GlobalStore } from '@/store';
+import i18n from '@/lang';
+import screenfull from 'screenfull';
+
+const globalStore = GlobalStore();
+interface LogProps {
+    id: number;
+    type: string;
+    name: string;
+    tail: boolean;
+}
+
+const props = defineProps({
+    heightDiff: {
+        type: Number,
+        default: 0,
+    },
+    style: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+
+const open = ref(false);
+const config = ref();
+const em = defineEmits(['close']);
+
+const handleClose = () => {
+    open.value = false;
+    globalStore.isFullScreen = false;
+    em('close', false);
+};
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
+
+function toggleFullscreen() {
+    globalStore.isFullScreen = !globalStore.isFullScreen;
+}
+const loadTooltip = () => {
+    return i18n.global.t('commons.button.' + (globalStore.isFullScreen ? 'quitFullscreen' : 'fullscreen'));
+};
+
+watch(open, (val) => {
+    if (screenfull.isEnabled && !val && !mobile.value) screenfull.exit();
+});
+
+const acceptParams = (logProps: LogProps) => {
+    config.value = logProps;
+    open.value = true;
+};
+
+onBeforeUnmount(() => {
+    handleClose();
+});
+
+defineExpose({ acceptParams });
+</script>
+
+<style lang="scss">
+.fullScreen {
+    border: none;
+}
+</style>

…tend/src/components/hightlight/index.vue …mponents/log/custom-hightlight/index.vuefrontend/src/components/hightlight/index.vue renamed to frontend/src/components/log/custom-hightlight/index.vue frontend/src/components/hightlight/index.vue renamed to frontend/src/components/log/custom-hightlight/index.vue

@@ -17,7 +17,7 @@
                 <slot name="button"></slot>
             </span>
         </div>
-        <div class="log-container" ref="logContainer" @scroll="onScroll">
+        <div class="log-container" ref="logContainer" @scroll="onScroll" :style="containerStyle">
             <div class="log-spacer" :style="{ height: `${totalHeight}px` }"></div>
             <div
                 v-for="(log, index) in visibleLogs"
@@ -36,7 +36,7 @@ import { downloadFile } from '@/utils/util';
 import { readByLine } from '@/api/modules/files';
 import { GlobalStore } from '@/store';
 import bus from '@/global/bus';
-import hightlight from '@/components/hightlight/index.vue';
+import hightlight from '@/components/log/custom-hightlight/index.vue';
 const globalStore = GlobalStore();
 
 interface LogProps {
@@ -79,7 +79,7 @@ const props = defineProps({
     },
     heightDiff: {
         type: Number,
-        default: 500,
+        default: 420,
     },
     showTail: {
         type: Boolean,
@@ -311,6 +311,10 @@ const init = async () => {
     await getContent(false);
 };
 
+const containerStyle = computed(() => ({
+    height: `calc(100vh - ${props.heightDiff}px)`,
+}));
+
 onMounted(async () => {
     firstLoading.value = true;
     await init();
@@ -330,7 +334,6 @@ defineExpose({ changeTail, onDownload, clearLog });
 </script>
 <style lang="scss" scoped>
 .log-container {
-    height: calc(100vh - 420px);
     overflow-y: auto;
     overflow-x: auto;
     position: relative;