diff --git a/backend/app/service/database_common.go b/backend/app/service/database_common.go
index 75d6973e6..d7112803f 100644
--- a/backend/app/service/database_common.go
+++ b/backend/app/service/database_common.go
@@ -50,10 +50,6 @@ func (u *DBCommonService) LoadDatabaseFile(req dto.OperationWithNameAndType) (st
 		filePath = path.Join(global.CONF.System.DataDir, fmt.Sprintf("apps/postgresql/%s/data/postgresql.conf", req.Name))
 	case "redis-conf":
 		filePath = path.Join(global.CONF.System.DataDir, fmt.Sprintf("apps/redis/%s/conf/redis.conf", req.Name))
-	case "mysql-slow-logs":
-		filePath = path.Join(global.CONF.System.DataDir, fmt.Sprintf("apps/mysql/%s/data/1Panel-slow.log", req.Name))
-	case "mariadb-slow-logs":
-		filePath = path.Join(global.CONF.System.DataDir, fmt.Sprintf("apps/mariadb/%s/db/data/1Panel-slow.log", req.Name))
 	}
 	if _, err := os.Stat(filePath); err != nil {
 		return "", buserr.New("ErrHttpReqNotFound")
diff --git a/backend/app/service/file.go b/backend/app/service/file.go
index 854352744..5d186a276 100644
--- a/backend/app/service/file.go
+++ b/backend/app/service/file.go
@@ -481,6 +481,10 @@ func (f *FileService) ReadLogByLine(req request.FileReadByLineReq) (*response.Fi
 		logFilePath = path.Join(global.CONF.System.TmpDir, fmt.Sprintf("docker_logs/%s", req.Name))
 	case "ollama-model":
 		logFilePath = path.Join(global.CONF.System.DataDir, "log", "AITools", req.Name)
+	case "mysql-slow-logs":
+		logFilePath = path.Join(global.CONF.System.DataDir, fmt.Sprintf("apps/mysql/%s/data/1Panel-slow.log", req.Name))
+	case "mariadb-slow-logs":
+		logFilePath = path.Join(global.CONF.System.DataDir, fmt.Sprintf("apps/mariadb/%s/db/data/1Panel-slow.log", req.Name))
 	}
 
 	lines, isEndOfFile, total, err := files.ReadFileByLine(logFilePath, req.Page, req.PageSize, req.Latest)
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 6f70758c9..17659be9a 100644
--- a/frontend/src/views/database/mysql/setting/slow-log/index.vue
+++ b/frontend/src/views/database/mysql/setting/slow-log/index.vue
@@ -16,63 +16,27 @@
                 <el-button style="float: left; margin-left: 10px" @click="changeSlowLogs">
                     {{ $t('commons.button.save') }}
                 </el-button>
-                <div style="float: left; margin-left: 20px">
-                    <el-checkbox style="margin-top: 2px" :disabled="!currentStatus" border v-model="isWatch">
-                        {{ $t('commons.button.watch') }}
-                    </el-checkbox>
-                </div>
-                <el-button :disabled="!currentStatus" style="margin-left: 20px" @click="onDownload" icon="Download">
-                    {{ $t('file.download') }}
-                </el-button>
             </el-form-item>
         </el-form>
-        <codemirror
-            :autofocus="true"
-            :placeholder="$t('database.noData')"
-            :indent-with-tab="true"
-            :tabSize="4"
-            :style="{ height: getDynamicHeight(), width: '100%' }"
-            :lineWrapping="true"
-            :matchBrackets="true"
-            theme="cobalt"
-            :styleActiveLine="true"
-            :extensions="extensions"
-            @ready="handleReady"
-            v-model="slowLogs"
-            :disabled="true"
-        />
+        <LogFile v-if="variables.slow_query_log === 'ON'" :config="config"></LogFile>
 
         <ConfirmDialog @cancel="onCancel" ref="confirmDialogRef" @confirm="onSave"></ConfirmDialog>
     </div>
 </template>
 <script lang="ts" setup>
-import { Codemirror } from 'vue-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
-import { oneDark } from '@codemirror/theme-one-dark';
-import { nextTick, onBeforeUnmount, reactive, ref, shallowRef } from 'vue';
+import { reactive, ref } from 'vue';
 import { Database } from '@/api/interface/database';
+import LogFile from '@/components/log-file/index.vue';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
-import { loadDBFile, updateMysqlVariables } from '@/api/modules/database';
-import { dateFormatForName, downloadWithContent } from '@/utils/util';
+import { updateMysqlVariables } from '@/api/modules/database';
 import i18n from '@/lang';
-import { MsgError, MsgInfo, MsgSuccess } from '@/utils/message';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { MsgError, MsgSuccess } from '@/utils/message';
 
-const extensions = [javascript(), oneDark];
-const slowLogs = ref();
-const view = shallowRef();
-const handleReady = (payload) => {
-    view.value = payload.view;
-};
 const detailShow = ref();
 const currentStatus = ref();
-
+const config = ref();
 const confirmDialogRef = ref();
 
-const isWatch = ref();
-let timer: NodeJS.Timer | null = null;
-
 const variables = reactive({
     slow_query_log: 'OFF',
     long_query_time: 10,
@@ -96,12 +60,11 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
     if (variables.slow_query_log === 'ON') {
         currentStatus.value = true;
         detailShow.value = true;
-        loadMysqlSlowlogs();
-        timer = setInterval(() => {
-            if (variables.slow_query_log === 'ON' && isWatch.value) {
-                loadMysqlSlowlogs();
-            }
-        }, 1000 * 5);
+        config.value = {
+            type: params.type + '-slow-logs',
+            name: params.database,
+            tail: true,
+        };
     } else {
         detailShow.value = false;
     }
@@ -110,6 +73,11 @@ const emit = defineEmits(['loading']);
 
 const handleSlowLogs = async () => {
     if (variables.slow_query_log === 'ON') {
+        config.value = {
+            type: currentDB.type + '-slow-logs',
+            name: currentDB.database,
+            tail: true,
+        };
         detailShow.value = true;
         return;
     }
@@ -121,21 +89,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'));
@@ -179,31 +132,6 @@ const onSave = async () => {
         });
 };
 
-const onDownload = async () => {
-    if (!slowLogs.value) {
-        MsgInfo(i18n.global.t('database.noData'));
-        return;
-    }
-    downloadWithContent(slowLogs.value, currentDB.database + '-slowlogs-' + dateFormatForName(new Date()) + '.log');
-};
-
-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(() => {
-    clearInterval(Number(timer));
-    timer = null;
-});
-
 defineExpose({
     acceptParams,
 });