From 660dc62f3c91c7e9229d69b0d851bd0b7e77ba5e Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Mon, 3 Mar 2025 17:35:29 +0800
Subject: [PATCH] fix:  Standardize logging component (#8054)

---
 frontend/src/components/backup/index.vue      |  2 +-
 frontend/src/components/log-dialog/index.vue  | 40 ---------
 .../{compose-log => log/compose}/index.vue    |  2 +-
 .../log/container-drawer}/index.vue           |  1 +
 .../container}/index.vue                      | 42 +++++----
 .../custom-hightlight}/index.vue              |  0
 frontend/src/components/log/drawer/index.vue  | 85 +++++++++++++++++++
 .../{log-file => log/file}/index.vue          | 11 ++-
 .../{log-pro => log/hightlight-log}/index.vue |  0
 .../{task-log => log/task}/index.vue          |  0
 .../task}/log-without-dialog.vue              |  0
 frontend/src/components/task-list/index.vue   |  2 +-
 frontend/src/components/upload/index.vue      |  2 +-
 frontend/src/views/ai/model/index.vue         |  2 +-
 frontend/src/views/app-store/apps/index.vue   |  2 +-
 .../views/app-store/detail/install/index.vue  |  2 +-
 .../app-store/installed/delete/index.vue      |  2 +-
 .../src/views/app-store/installed/index.vue   |  4 +-
 .../app-store/installed/upgrade/index.vue     |  2 +-
 .../views/container/compose/create/index.vue  |  2 +-
 .../views/container/compose/detail/index.vue  |  2 +-
 .../container/container/command/index.vue     |  2 +-
 .../src/views/container/container/index.vue   |  2 +-
 .../container/container/operate/index.vue     |  2 +-
 .../src/views/container/image/build/index.vue |  2 +-
 .../src/views/container/image/pull/index.vue  |  2 +-
 .../src/views/container/image/push/index.vue  |  2 +-
 frontend/src/views/cronjob/record/index.vue   |  2 +-
 .../views/database/mysql/setting/index.vue    |  2 +-
 .../database/mysql/setting/slow-log/index.vue | 26 +-----
 .../database/postgresql/setting/index.vue     |  2 +-
 frontend/src/views/log/system/index.vue       |  2 +-
 frontend/src/views/log/task/index.vue         |  2 +-
 frontend/src/views/log/website/index.vue      |  2 +-
 .../views/setting/snapshot/create/index.vue   |  2 +-
 frontend/src/views/setting/snapshot/index.vue |  2 +-
 .../views/setting/snapshot/recover/index.vue  |  2 +-
 .../views/terminal/terminal/host-create.vue   |  1 -
 .../toolbox/supervisor/config/log/index.vue   |  4 +-
 .../views/website/runtime/dotnet/index.vue    |  2 +-
 .../src/views/website/runtime/go/index.vue    |  2 +-
 .../src/views/website/runtime/java/index.vue  |  2 +-
 .../src/views/website/runtime/node/index.vue  |  2 +-
 .../src/views/website/runtime/php/index.vue   |  4 +-
 .../views/website/runtime/python/index.vue    |  2 +-
 frontend/src/views/website/ssl/index.vue      |  4 +-
 .../website/config/log/log-fiile/index.vue    |  2 +-
 .../views/website/website/create/index.vue    |  3 +-
 .../src/views/website/website/nginx/index.vue |  2 +-
 .../website/nginx/module/build/index.vue      |  2 +-
 50 files changed, 163 insertions(+), 130 deletions(-)
 delete mode 100644 frontend/src/components/log-dialog/index.vue
 rename frontend/src/components/{compose-log => log/compose}/index.vue (96%)
 rename frontend/src/{views/container/container/log => components/log/container-drawer}/index.vue (97%)
 rename frontend/src/components/{container-log => log/container}/index.vue (86%)
 rename frontend/src/components/{hightlight => log/custom-hightlight}/index.vue (100%)
 create mode 100644 frontend/src/components/log/drawer/index.vue
 rename frontend/src/components/{log-file => log/file}/index.vue (97%)
 rename frontend/src/components/{log-pro => log/hightlight-log}/index.vue (100%)
 rename frontend/src/components/{task-log => log/task}/index.vue (100%)
 rename frontend/src/components/{task-log => log/task}/log-without-dialog.vue (100%)

diff --git a/frontend/src/components/backup/index.vue b/frontend/src/components/backup/index.vue
index 8f858825d..c24892cef 100644
--- a/frontend/src/components/backup/index.vue
+++ b/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();
 
diff --git a/frontend/src/components/log-dialog/index.vue b/frontend/src/components/log-dialog/index.vue
deleted file mode 100644
index c2b7e9e2e..000000000
--- a/frontend/src/components/log-dialog/index.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-    <DrawerPro v-model="open" :header="$t('commons.button.log')" size="large" @close="handleClose">
-        <LogFile :config="config" :height-diff="config.heightDiff"></LogFile>
-    </DrawerPro>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-import LogFile from '@/components/log-file/index.vue';
-
-interface LogProps {
-    id: number;
-    type: string;
-    style: string;
-    name: string;
-    tail: boolean;
-    heightDiff: number;
-}
-
-const open = ref(false);
-const config = ref();
-const em = defineEmits(['close']);
-
-const handleClose = () => {
-    open.value = false;
-    em('close', false);
-};
-
-const acceptParams = (props: LogProps) => {
-    config.value = props;
-    open.value = true;
-};
-
-defineExpose({ acceptParams });
-</script>
-
-<style lang="scss">
-.fullScreen {
-    border: none;
-}
-</style>
diff --git a/frontend/src/components/compose-log/index.vue b/frontend/src/components/log/compose/index.vue
similarity index 96%
rename from frontend/src/components/compose-log/index.vue
rename to frontend/src/components/log/compose/index.vue
index 1a7c4b907..3d5c4a484 100644
--- a/frontend/src/components/compose-log/index.vue
+++ b/frontend/src/components/log/compose/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('');
diff --git a/frontend/src/views/container/container/log/index.vue b/frontend/src/components/log/container-drawer/index.vue
similarity index 97%
rename from frontend/src/views/container/container/log/index.vue
rename to frontend/src/components/log/container-drawer/index.vue
index fb0e6b78c..706b8429f 100644
--- a/frontend/src/views/container/container/log/index.vue
+++ b/frontend/src/components/log/container-drawer/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(() => {
diff --git a/frontend/src/components/container-log/index.vue b/frontend/src/components/log/container/index.vue
similarity index 86%
rename from frontend/src/components/container-log/index.vue
rename to frontend/src/components/log/container/index.vue
index 1edd45d92..71e018d21 100644
--- a/frontend/src/components/container-log/index.vue
+++ b/frontend/src/components/log/container/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;
diff --git a/frontend/src/components/hightlight/index.vue b/frontend/src/components/log/custom-hightlight/index.vue
similarity index 100%
rename from frontend/src/components/hightlight/index.vue
rename to frontend/src/components/log/custom-hightlight/index.vue
diff --git a/frontend/src/components/log/drawer/index.vue b/frontend/src/components/log/drawer/index.vue
new file mode 100644
index 000000000..8d2bcbb2d
--- /dev/null
+++ b/frontend/src/components/log/drawer/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>
diff --git a/frontend/src/components/log-file/index.vue b/frontend/src/components/log/file/index.vue
similarity index 97%
rename from frontend/src/components/log-file/index.vue
rename to frontend/src/components/log/file/index.vue
index 3cf1d563f..df8f4e802 100644
--- a/frontend/src/components/log-file/index.vue
+++ b/frontend/src/components/log/file/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;
diff --git a/frontend/src/components/log-pro/index.vue b/frontend/src/components/log/hightlight-log/index.vue
similarity index 100%
rename from frontend/src/components/log-pro/index.vue
rename to frontend/src/components/log/hightlight-log/index.vue
diff --git a/frontend/src/components/task-log/index.vue b/frontend/src/components/log/task/index.vue
similarity index 100%
rename from frontend/src/components/task-log/index.vue
rename to frontend/src/components/log/task/index.vue
diff --git a/frontend/src/components/task-log/log-without-dialog.vue b/frontend/src/components/log/task/log-without-dialog.vue
similarity index 100%
rename from frontend/src/components/task-log/log-without-dialog.vue
rename to frontend/src/components/log/task/log-without-dialog.vue
diff --git a/frontend/src/components/task-list/index.vue b/frontend/src/components/task-list/index.vue
index 984a6fae1..ddde4ed5c 100644
--- a/frontend/src/components/task-list/index.vue
+++ b/frontend/src/components/task-list/index.vue
@@ -49,7 +49,7 @@ import { dateFormat } from '@/utils/util';
 import { searchTasks } from '@/api/modules/log';
 import { reactive, ref } from '@vue/runtime-core';
 import { Log } from '@/api/interface/log';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 
 const open = ref(false);
 const handleClose = () => {
diff --git a/frontend/src/components/upload/index.vue b/frontend/src/components/upload/index.vue
index afc8c2127..370ec9e92 100644
--- a/frontend/src/components/upload/index.vue
+++ b/frontend/src/components/upload/index.vue
@@ -145,7 +145,7 @@ import { batchDeleteFile, checkFile, chunkUploadFileData, getUploadList } from '
 import { loadBaseDir } from '@/api/modules/setting';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { handleRecoverByUpload } from '@/api/modules/backup';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 
 interface DialogProps {
     type: string;
diff --git a/frontend/src/views/ai/model/index.vue b/frontend/src/views/ai/model/index.vue
index f94a88496..299ebe646 100644
--- a/frontend/src/views/ai/model/index.vue
+++ b/frontend/src/views/ai/model/index.vue
@@ -183,7 +183,7 @@
 import AppStatus from '@/components/app-status/index.vue';
 import AddDialog from '@/views/ai/model/add/index.vue';
 import Conn from '@/views/ai/model/conn/index.vue';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import Terminal from '@/views/ai/model/terminal/index.vue';
 import Del from '@/views/ai/model/del/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index 2fbdd31a3..147eb7e21 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -187,7 +187,7 @@ import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
 import { newUUID } from '@/utils/util';
 import Detail from '../detail/index.vue';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { storeToRefs } from 'pinia';
 
 const globalStore = GlobalStore();
diff --git a/frontend/src/views/app-store/detail/install/index.vue b/frontend/src/views/app-store/detail/install/index.vue
index 64bced847..1985b89d6 100644
--- a/frontend/src/views/app-store/detail/install/index.vue
+++ b/frontend/src/views/app-store/detail/install/index.vue
@@ -132,7 +132,7 @@ import { MsgError } from '@/utils/message';
 import { Container } from '@/api/interface/container';
 import { loadResourceLimit } from '@/api/modules/container';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { newUUID } from '@/utils/util';
 import { computeSizeFromMB } from '@/utils/util';
 
diff --git a/frontend/src/views/app-store/installed/delete/index.vue b/frontend/src/views/app-store/installed/delete/index.vue
index 906c81c7e..2149ef3ee 100644
--- a/frontend/src/views/app-store/installed/delete/index.vue
+++ b/frontend/src/views/app-store/installed/delete/index.vue
@@ -50,7 +50,7 @@ import { App } from '@/api/interface/app';
 import { installedOp } from '@/api/modules/app';
 import i18n from '@/lang';
 import bus from '@/global/bus';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { v4 as uuidv4 } from 'uuid';
 
 const deleteReq = ref({
diff --git a/frontend/src/views/app-store/installed/index.vue b/frontend/src/views/app-store/installed/index.vue
index 0cd1f457e..94ed8275a 100644
--- a/frontend/src/views/app-store/installed/index.vue
+++ b/frontend/src/views/app-store/installed/index.vue
@@ -376,14 +376,14 @@ import AppDelete from './delete/index.vue';
 import AppParams from './detail/index.vue';
 import AppUpgrade from './upgrade/index.vue';
 import AppIgnore from './ignore/index.vue';
-import ComposeLogs from '@/components/compose-log/index.vue';
+import ComposeLogs from '@/components/log/compose/index.vue';
 import { App } from '@/api/interface/app';
 import Status from '@/components/status/index.vue';
 import { getAge } from '@/utils/util';
 import { useRouter } from 'vue-router';
 import { MsgSuccess } from '@/utils/message';
 import { toFolder } from '@/global/business';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 
 const data = ref<any>();
 const loading = ref(false);
diff --git a/frontend/src/views/app-store/installed/upgrade/index.vue b/frontend/src/views/app-store/installed/upgrade/index.vue
index c75c5db13..1b84a1701 100644
--- a/frontend/src/views/app-store/installed/upgrade/index.vue
+++ b/frontend/src/views/app-store/installed/upgrade/index.vue
@@ -89,7 +89,7 @@ import { Rules } from '@/global/form-rules';
 import Diff from './diff/index.vue';
 import bus from '@/global/bus';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { v4 as uuidv4 } from 'uuid';
 
 const composeDiffRef = ref();
diff --git a/frontend/src/views/container/compose/create/index.vue b/frontend/src/views/container/compose/create/index.vue
index 2cf095d1b..e2948e4fa 100644
--- a/frontend/src/views/container/compose/create/index.vue
+++ b/frontend/src/views/container/compose/create/index.vue
@@ -74,7 +74,7 @@ import { ElForm, ElMessageBox } from 'element-plus';
 import { loadBaseDir } from '@/api/modules/setting';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { listComposeTemplate, testCompose, upCompose } from '@/api/modules/container';
 import { newUUID } from '@/utils/util';
 
diff --git a/frontend/src/views/container/compose/detail/index.vue b/frontend/src/views/container/compose/detail/index.vue
index 31a50b3eb..b78ac89e4 100644
--- a/frontend/src/views/container/compose/detail/index.vue
+++ b/frontend/src/views/container/compose/detail/index.vue
@@ -123,7 +123,7 @@
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import MonitorDialog from '@/views/container/container/monitor/index.vue';
-import ContainerLogDialog from '@/views/container/container/log/index.vue';
+import ContainerLogDialog from '@/components/log/container-drawer/index.vue';
 import TerminalDialog from '@/views/container/container/terminal/index.vue';
 import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
 import Status from '@/components/status/index.vue';
diff --git a/frontend/src/views/container/container/command/index.vue b/frontend/src/views/container/container/command/index.vue
index b45985bb2..5e270c95d 100644
--- a/frontend/src/views/container/container/command/index.vue
+++ b/frontend/src/views/container/container/command/index.vue
@@ -39,7 +39,7 @@
 import { reactive, ref } from 'vue';
 import { ElForm } from 'element-plus';
 import i18n from '@/lang';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { createContainerByCommand } from '@/api/modules/container';
 import { MsgSuccess } from '@/utils/message';
 import { newUUID } from '@/utils/util';
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index 4d62e1c8a..910bd8c61 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -406,11 +406,11 @@ import RenameDialog from '@/views/container/container/rename/index.vue';
 import UpgradeDialog from '@/views/container/container/upgrade/index.vue';
 import CommitDialog from '@/views/container/container/commit/index.vue';
 import MonitorDialog from '@/views/container/container/monitor/index.vue';
-import ContainerLogDialog from '@/views/container/container/log/index.vue';
 import TerminalDialog from '@/views/container/container/terminal/index.vue';
 import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import DockerStatus from '@/views/container/docker-status/index.vue';
+import ContainerLogDialog from '@/components/log/container-drawer/index.vue';
 import Status from '@/components/status/index.vue';
 import { reactive, onMounted, ref, computed } from 'vue';
 import {
diff --git a/frontend/src/views/container/container/operate/index.vue b/frontend/src/views/container/container/operate/index.vue
index 09b24b7b3..e2839d881 100644
--- a/frontend/src/views/container/container/operate/index.vue
+++ b/frontend/src/views/container/container/operate/index.vue
@@ -448,7 +448,7 @@ import {
 } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 import { MsgError } from '@/utils/message';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { checkIpV4V6, checkPort, newUUID } from '@/utils/util';
 import router from '@/routers';
 
diff --git a/frontend/src/views/container/image/build/index.vue b/frontend/src/views/container/image/build/index.vue
index 6c4b21c99..64af67373 100644
--- a/frontend/src/views/container/image/build/index.vue
+++ b/frontend/src/views/container/image/build/index.vue
@@ -48,7 +48,7 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { imageBuild } from '@/api/modules/container';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { newUUID } from '@/utils/util';
 import { MsgSuccess } from '@/utils/message';
 
diff --git a/frontend/src/views/container/image/pull/index.vue b/frontend/src/views/container/image/pull/index.vue
index 594acbc5e..6f349ece9 100644
--- a/frontend/src/views/container/image/pull/index.vue
+++ b/frontend/src/views/container/image/pull/index.vue
@@ -43,7 +43,7 @@ import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { imagePull } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { newUUID } from '@/utils/util';
 
diff --git a/frontend/src/views/container/image/push/index.vue b/frontend/src/views/container/image/push/index.vue
index 71ccc6e36..b157d104b 100644
--- a/frontend/src/views/container/image/push/index.vue
+++ b/frontend/src/views/container/image/push/index.vue
@@ -40,7 +40,7 @@ import { ElForm } from 'element-plus';
 import { imagePush } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 import { MsgSuccess } from '@/utils/message';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { newUUID } from '@/utils/util';
 
 const drawerVisible = ref(false);
diff --git a/frontend/src/views/cronjob/record/index.vue b/frontend/src/views/cronjob/record/index.vue
index 119bc7592..883141545 100644
--- a/frontend/src/views/cronjob/record/index.vue
+++ b/frontend/src/views/cronjob/record/index.vue
@@ -229,7 +229,7 @@ import { MsgSuccess } from '@/utils/message';
 import { listDbItems } from '@/api/modules/database';
 import { listAppInstalled } from '@/api/modules/app';
 import { shortcuts } from '@/utils/shortcuts';
-import TaskLog from '@/components/task-log/log-without-dialog.vue';
+import TaskLog from '@/components/log/task/log-without-dialog.vue';
 
 const loading = ref();
 const refresh = ref(false);
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index a9e3974e4..a80c04e9f 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -116,7 +116,7 @@
 
 <script lang="ts" setup>
 import { FormInstance } from 'element-plus';
-import ContainerLog from '@/components/container-log/index.vue';
+import ContainerLog from '@/components/log/container/index.vue';
 import Status from '@/views/database/mysql/setting/status/index.vue';
 import Variables from '@/views/database/mysql/setting/variables/index.vue';
 import SlowLog from '@/views/database/mysql/setting/slow-log/index.vue';
diff --git a/frontend/src/views/database/mysql/setting/slow-log/index.vue b/frontend/src/views/database/mysql/setting/slow-log/index.vue
index 08d735dc4..0ba9bfb05 100644
--- a/frontend/src/views/database/mysql/setting/slow-log/index.vue
+++ b/frontend/src/views/database/mysql/setting/slow-log/index.vue
@@ -26,7 +26,7 @@
                 </el-button>
             </el-form-item>
         </el-form>
-        <LogPro v-model="slowLogs"></LogPro>
+        <HighlightLog v-model="slowLogs" />
         <ConfirmDialog @cancel="onCancel" ref="confirmDialogRef" @confirm="onSave"></ConfirmDialog>
     </div>
 </template>
@@ -38,7 +38,7 @@ import { loadDBFile, updateMysqlVariables } from '@/api/modules/database';
 import { dateFormatForName, downloadWithContent } from '@/utils/util';
 import i18n from '@/lang';
 import { MsgError, MsgInfo, MsgSuccess } from '@/utils/message';
-import LogPro from '@/components/log-pro/index.vue';
+import HighlightLog from '@/components/log/hightlight-log/index.vue';
 
 const slowLogs = ref();
 const detailShow = ref();
@@ -97,21 +97,6 @@ const handleSlowLogs = async () => {
     confirmDialogRef.value!.acceptParams(params);
 };
 
-// const getDynamicHeight = () => {
-//     if (variables.slow_query_log === 'ON') {
-//         if (globalStore.openMenuTabs) {
-//             return `calc(100vh - 467px)`;
-//         } else {
-//             return `calc(100vh - 437px)`;
-//         }
-//     }
-//     if (globalStore.openMenuTabs) {
-//         return `calc(100vh - 413px)`;
-//     } else {
-//         return `calc(100vh - 383px)`;
-//     }
-// };
-
 const changeSlowLogs = () => {
     if (!(variables.long_query_time > 0 && variables.long_query_time <= 600)) {
         MsgError(i18n.global.t('database.thresholdRangeHelper'));
@@ -166,13 +151,6 @@ const onDownload = async () => {
 const loadMysqlSlowlogs = async () => {
     const res = await loadDBFile(currentDB.type + '-slow-logs', currentDB.database);
     slowLogs.value = res.data || '';
-    // nextTick(() => {
-    //     const state = view.value.state;
-    //     view.value.dispatch({
-    //         selection: { anchor: state.doc.length, head: state.doc.length },
-    //         scrollIntoView: true,
-    //     });
-    // });
 };
 
 onBeforeUnmount(() => {
diff --git a/frontend/src/views/database/postgresql/setting/index.vue b/frontend/src/views/database/postgresql/setting/index.vue
index 8bac98976..c13ec3d70 100644
--- a/frontend/src/views/database/postgresql/setting/index.vue
+++ b/frontend/src/views/database/postgresql/setting/index.vue
@@ -70,7 +70,7 @@
 
 <script lang="ts" setup>
 import { FormInstance } from 'element-plus';
-import ContainerLog from '@/components/container-log/index.vue';
+import ContainerLog from '@/components/log/container/index.vue';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { onMounted, reactive, ref } from 'vue';
 import { loadDBFile, loadDBBaseInfo, updateDBFile } from '@/api/modules/database';
diff --git a/frontend/src/views/log/system/index.vue b/frontend/src/views/log/system/index.vue
index 10c88770c..d70a82760 100644
--- a/frontend/src/views/log/system/index.vue
+++ b/frontend/src/views/log/system/index.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import LogFile from '@/components/log-file/index.vue';
+import LogFile from '@/components/log/file/index.vue';
 import LogRouter from '@/views/log/router/index.vue';
 import { nextTick, onMounted, reactive, ref } from 'vue';
 import { getSystemFiles } from '@/api/modules/log';
diff --git a/frontend/src/views/log/task/index.vue b/frontend/src/views/log/task/index.vue
index 2de767c87..e88b89287 100644
--- a/frontend/src/views/log/task/index.vue
+++ b/frontend/src/views/log/task/index.vue
@@ -51,7 +51,7 @@ import { dateFormat } from '@/utils/util';
 import { searchTasks } from '@/api/modules/log';
 import { onMounted, reactive, ref } from '@vue/runtime-core';
 import { Log } from '@/api/interface/log';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 
 const loading = ref();
 const data = ref();
diff --git a/frontend/src/views/log/website/index.vue b/frontend/src/views/log/website/index.vue
index a2e343ecf..37ac016a4 100644
--- a/frontend/src/views/log/website/index.vue
+++ b/frontend/src/views/log/website/index.vue
@@ -64,7 +64,7 @@ import { onMounted } from 'vue';
 import { ref, nextTick } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import LogFile from '@/components/log-file/index.vue';
+import LogFile from '@/components/log/file/index.vue';
 
 const logConfig = reactive({
     type: 'website',
diff --git a/frontend/src/views/setting/snapshot/create/index.vue b/frontend/src/views/setting/snapshot/create/index.vue
index bb32b22af..fb7abaca1 100644
--- a/frontend/src/views/setting/snapshot/create/index.vue
+++ b/frontend/src/views/setting/snapshot/create/index.vue
@@ -162,7 +162,7 @@ import { ref } from 'vue';
 import { loadSnapshotInfo, snapshotCreate } from '@/api/modules/setting';
 import { computeSize, newUUID } from '@/utils/util';
 import i18n from '@/lang';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { listBackupOptions } from '@/api/modules/backup';
 import { Rules } from '@/global/form-rules';
 import { ElForm } from 'element-plus';
diff --git a/frontend/src/views/setting/snapshot/index.vue b/frontend/src/views/setting/snapshot/index.vue
index 396b7d111..03a2f712b 100644
--- a/frontend/src/views/setting/snapshot/index.vue
+++ b/frontend/src/views/setting/snapshot/index.vue
@@ -192,7 +192,7 @@ import { ElForm } from 'element-plus';
 import IgnoreRule from '@/views/setting/snapshot/ignore-rule/index.vue';
 import i18n from '@/lang';
 import { Setting } from '@/api/interface/setting';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import RecoverStatus from '@/views/setting/snapshot/status/index.vue';
 import SnapshotImport from '@/views/setting/snapshot/import/index.vue';
 import SnapshotCreate from '@/views/setting/snapshot/create/index.vue';
diff --git a/frontend/src/views/setting/snapshot/recover/index.vue b/frontend/src/views/setting/snapshot/recover/index.vue
index f32a1bfcd..5a920363e 100644
--- a/frontend/src/views/setting/snapshot/recover/index.vue
+++ b/frontend/src/views/setting/snapshot/recover/index.vue
@@ -61,7 +61,7 @@ import { ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { snapshotRecover, snapshotRollback } from '@/api/modules/setting';
 import { computeSize, newUUID } from '@/utils/util';
 
diff --git a/frontend/src/views/terminal/terminal/host-create.vue b/frontend/src/views/terminal/terminal/host-create.vue
index 3069012de..d9648c02f 100644
--- a/frontend/src/views/terminal/terminal/host-create.vue
+++ b/frontend/src/views/terminal/terminal/host-create.vue
@@ -165,7 +165,6 @@ const loadLocal = async () => {
 };
 
 const setDefault = () => {
-    console.log('123');
     hostInfo.addr = '';
     hostInfo.name = 'local';
     hostInfo.groupID = defaultGroup.value;
diff --git a/frontend/src/views/toolbox/supervisor/config/log/index.vue b/frontend/src/views/toolbox/supervisor/config/log/index.vue
index 4198d1402..396f79478 100644
--- a/frontend/src/views/toolbox/supervisor/config/log/index.vue
+++ b/frontend/src/views/toolbox/supervisor/config/log/index.vue
@@ -1,12 +1,12 @@
 <template>
     <div v-loading="loading">
-        <LogPro v-model="content" :heightDiff="320"></LogPro>
+        <HighlightLog v-model="content" :heightDiff="320" />
     </div>
 </template>
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { getSupervisorLog } from '@/api/modules/host-tool';
-import LogPro from '@/components/log-pro/index.vue';
+import HighlightLog from '@/components/log/hightlight-log/index.vue';
 
 let content = ref('');
 let loading = ref(false);
diff --git a/frontend/src/views/website/runtime/dotnet/index.vue b/frontend/src/views/website/runtime/dotnet/index.vue
index 70b25cbcf..9a9743cba 100644
--- a/frontend/src/views/website/runtime/dotnet/index.vue
+++ b/frontend/src/views/website/runtime/dotnet/index.vue
@@ -103,7 +103,7 @@ import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
 import RouterMenu from '../index.vue';
 import router from '@/routers/router';
-import ComposeLogs from '@/components/compose-log/index.vue';
+import ComposeLogs from '@/components/log/compose/index.vue';
 import { Promotion } from '@element-plus/icons-vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import AppResources from '@/views/website/runtime/php/check/index.vue';
diff --git a/frontend/src/views/website/runtime/go/index.vue b/frontend/src/views/website/runtime/go/index.vue
index 3fdf41ed0..656906892 100644
--- a/frontend/src/views/website/runtime/go/index.vue
+++ b/frontend/src/views/website/runtime/go/index.vue
@@ -101,7 +101,7 @@ import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
 import RouterMenu from '../index.vue';
 import router from '@/routers/router';
-import ComposeLogs from '@/components/compose-log/index.vue';
+import ComposeLogs from '@/components/log/compose/index.vue';
 import { Promotion } from '@element-plus/icons-vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import AppResources from '@/views/website/runtime/php/check/index.vue';
diff --git a/frontend/src/views/website/runtime/java/index.vue b/frontend/src/views/website/runtime/java/index.vue
index 88407cacc..60958061d 100644
--- a/frontend/src/views/website/runtime/java/index.vue
+++ b/frontend/src/views/website/runtime/java/index.vue
@@ -101,7 +101,7 @@ import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
 import RouterMenu from '../index.vue';
 import router from '@/routers/router';
-import ComposeLogs from '@/components/compose-log/index.vue';
+import ComposeLogs from '@/components/log/compose/index.vue';
 import { Promotion } from '@element-plus/icons-vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import AppResources from '@/views/website/runtime/php/check/index.vue';
diff --git a/frontend/src/views/website/runtime/node/index.vue b/frontend/src/views/website/runtime/node/index.vue
index a5fac4a7f..dda2d9788 100644
--- a/frontend/src/views/website/runtime/node/index.vue
+++ b/frontend/src/views/website/runtime/node/index.vue
@@ -103,7 +103,7 @@ import i18n from '@/lang';
 import RouterMenu from '../index.vue';
 import Modules from '@/views/website/runtime/node/module/index.vue';
 import router from '@/routers/router';
-import ComposeLogs from '@/components/compose-log/index.vue';
+import ComposeLogs from '@/components/log/compose/index.vue';
 import { Promotion } from '@element-plus/icons-vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import AppResources from '@/views/website/runtime/php/check/index.vue';
diff --git a/frontend/src/views/website/runtime/php/index.vue b/frontend/src/views/website/runtime/php/index.vue
index 1f71bc5b6..0a80c6775 100644
--- a/frontend/src/views/website/runtime/php/index.vue
+++ b/frontend/src/views/website/runtime/php/index.vue
@@ -122,8 +122,8 @@ import Extensions from './extension-template/index.vue';
 import AppResources from '@/views/website/runtime/php/check/index.vue';
 import CreateRuntime from '@/views/website/runtime/php/create/index.vue';
 import RouterMenu from '../index.vue';
-import Log from '@/components/log-dialog/index.vue';
-import ComposeLogs from '@/components/compose-log/index.vue';
+import Log from '@/components/log/drawer/index.vue';
+import ComposeLogs from '@/components/log/compose/index.vue';
 import Config from '@/views/website/runtime/php/config/index.vue';
 import Supervisor from '@/views/website/runtime/php/supervisor/index.vue';
 import RuntimeStatus from '@/views/website/runtime/components/runtime-status.vue';
diff --git a/frontend/src/views/website/runtime/python/index.vue b/frontend/src/views/website/runtime/python/index.vue
index 4050a1b33..6e207dd03 100644
--- a/frontend/src/views/website/runtime/python/index.vue
+++ b/frontend/src/views/website/runtime/python/index.vue
@@ -101,7 +101,7 @@ import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
 import RouterMenu from '../index.vue';
 import router from '@/routers/router';
-import ComposeLogs from '@/components/compose-log/index.vue';
+import ComposeLogs from '@/components/log/composeindex.vue';
 import { Promotion } from '@element-plus/icons-vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import AppResources from '@/views/website/runtime/php/check/index.vue';
diff --git a/frontend/src/views/website/ssl/index.vue b/frontend/src/views/website/ssl/index.vue
index 0e7c44a80..2a2d6a991 100644
--- a/frontend/src/views/website/ssl/index.vue
+++ b/frontend/src/views/website/ssl/index.vue
@@ -149,7 +149,7 @@
             <SSLUpload ref="sslUploadRef" @close="search()" />
             <Apply ref="applyRef" @search="search" @submit="openLog" />
             <OpDialog ref="opRef" @search="search" @cancel="search" />
-            <Log ref="logRef" @close="search()" />
+            <Log ref="logRef" @close="search()" :heightDiff="220" />
             <CA ref="caRef" @close="search()" />
             <Obtain ref="obtainRef" @close="search()" @submit="openLog" />
         </LayoutContent>
@@ -171,7 +171,7 @@ import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
 import SSLUpload from './upload/index.vue';
 import Apply from './apply/index.vue';
-import Log from '@/components/log-dialog/index.vue';
+import Log from '@/components/log/drawer/index.vue';
 import Obtain from './obtain/index.vue';
 import MsgInfo from '@/components/msg-info/index.vue';
 
diff --git a/frontend/src/views/website/website/config/log/log-fiile/index.vue b/frontend/src/views/website/website/config/log/log-fiile/index.vue
index b86b8983d..f850acced 100644
--- a/frontend/src/views/website/website/config/log/log-fiile/index.vue
+++ b/frontend/src/views/website/website/config/log/log-fiile/index.vue
@@ -19,7 +19,7 @@
 import { computed, onMounted, ref } from 'vue';
 import { getWebsite, opWebsiteLog } from '@/api/modules/website';
 import i18n from '@/lang';
-import LogFile from '@/components/log-file/index.vue';
+import LogFile from '@/components/log/file/index.vue';
 import { MsgSuccess } from '@/utils/message';
 
 const props = defineProps({
diff --git a/frontend/src/views/website/website/create/index.vue b/frontend/src/views/website/website/create/index.vue
index a611b41d2..204cb6faa 100644
--- a/frontend/src/views/website/website/create/index.vue
+++ b/frontend/src/views/website/website/create/index.vue
@@ -548,7 +548,7 @@ import { Group } from '@/api/interface/group';
 import { SearchRuntimes } from '@/api/modules/runtime';
 import { Runtime } from '@/api/interface/runtime';
 import { getRandomStr, getRuntimeLabel } from '@/utils/util';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { getAppService } from '@/api/modules/app';
 import { v4 as uuidv4 } from 'uuid';
 import { dateFormatSimple, getProvider, getAccountName } from '@/utils/util';
@@ -807,7 +807,6 @@ const getRuntimes = async () => {
         if (runtimes.value.length > 0) {
             const first = runtimes.value[0];
             website.value.runtimeID = first.id;
-            console.log('runtimeID', first.id);
             runtimeResource.value = first.resource;
             runtimePorts.value = first.port.split(',').map((port: string) => parseInt(port.trim(), 10));
             if (runtimePorts.value.length > 1) {
diff --git a/frontend/src/views/website/website/nginx/index.vue b/frontend/src/views/website/website/nginx/index.vue
index f44d02ab1..b57d23a2e 100644
--- a/frontend/src/views/website/website/nginx/index.vue
+++ b/frontend/src/views/website/website/nginx/index.vue
@@ -40,7 +40,7 @@
 <script lang="ts" setup>
 import Source from './source/index.vue';
 import { ref } from 'vue';
-import ContainerLog from '@/components/container-log/index.vue';
+import ContainerLog from '@/components/log/container/index.vue';
 import NginxPer from './performance/index.vue';
 import Status from './status/index.vue';
 import Module from './module/index.vue';
diff --git a/frontend/src/views/website/website/nginx/module/build/index.vue b/frontend/src/views/website/website/nginx/module/build/index.vue
index 1ff6f1b16..646ac06fe 100644
--- a/frontend/src/views/website/website/nginx/module/build/index.vue
+++ b/frontend/src/views/website/website/nginx/module/build/index.vue
@@ -37,7 +37,7 @@ import { FormInstance } from 'element-plus';
 import { getNginxModules, buildNginx } from '@/api/modules/nginx';
 import i18n from '@/lang';
 import { newUUID } from '@/utils/util';
-import TaskLog from '@/components/task-log/index.vue';
+import TaskLog from '@/components/log/task/index.vue';
 import { Rules } from '@/global/form-rules';
 
 const open = ref(false);