diff --git a/internal/apps/mysql/service.go b/internal/apps/mysql/service.go
index 3f5be6df..239ab527 100644
--- a/internal/apps/mysql/service.go
+++ b/internal/apps/mysql/service.go
@@ -144,8 +144,7 @@ func (s *Service) Load(w http.ResponseWriter, r *http.Request) {
 
 // ErrorLog 获取错误日志
 func (s *Service) ErrorLog(w http.ResponseWriter, r *http.Request) {
-	log, _ := shell.Execf("tail -n 100 %s/server/mysql/mysql-error.log", app.Root)
-	service.Success(w, log)
+	service.Success(w, fmt.Sprintf("%s/server/mysql/mysql-error.log", app.Root))
 }
 
 // ClearErrorLog 清空错误日志
@@ -160,8 +159,7 @@ func (s *Service) ClearErrorLog(w http.ResponseWriter, r *http.Request) {
 
 // SlowLog 获取慢查询日志
 func (s *Service) SlowLog(w http.ResponseWriter, r *http.Request) {
-	log, _ := shell.Execf("tail -n 100 %s/server/mysql/mysql-slow.log", app.Root)
-	service.Success(w, log)
+	service.Success(w, fmt.Sprintf("%s/server/mysql/mysql-slow.log", app.Root))
 }
 
 // ClearSlowLog 清空慢查询日志
diff --git a/internal/apps/nginx/service.go b/internal/apps/nginx/service.go
index 9347ee53..66ec44d2 100644
--- a/internal/apps/nginx/service.go
+++ b/internal/apps/nginx/service.go
@@ -58,8 +58,7 @@ func (s *Service) SaveConfig(w http.ResponseWriter, r *http.Request) {
 }
 
 func (s *Service) ErrorLog(w http.ResponseWriter, r *http.Request) {
-	out, _ := shell.Execf("tail -n 100 %s/%s", app.Root, "wwwlogs/nginx-error.log")
-	service.Success(w, out)
+	service.Success(w, fmt.Sprintf("%s/%s", app.Root, "wwwlogs/nginx-error.log"))
 }
 
 func (s *Service) ClearErrorLog(w http.ResponseWriter, r *http.Request) {
diff --git a/internal/apps/php/service.go b/internal/apps/php/service.go
index 6ad29142..9d7aebe4 100644
--- a/internal/apps/php/service.go
+++ b/internal/apps/php/service.go
@@ -111,13 +111,11 @@ func (s *Service) Load(w http.ResponseWriter, r *http.Request) {
 }
 
 func (s *Service) ErrorLog(w http.ResponseWriter, r *http.Request) {
-	log, _ := shell.Execf("tail -n 500 %s/server/php/%d/var/log/php-fpm.log", app.Root, s.version)
-	service.Success(w, log)
+	service.Success(w, fmt.Sprintf("%s/server/php/%d/var/log/php-fpm.log", app.Root, s.version))
 }
 
 func (s *Service) SlowLog(w http.ResponseWriter, r *http.Request) {
-	log, _ := shell.Execf("tail -n 500 %s/server/php/%d/var/log/slow.log", app.Root, s.version)
-	service.Success(w, log)
+	service.Success(w, fmt.Sprintf("%s/server/php/%d/var/log/slow.log", app.Root, s.version))
 }
 
 func (s *Service) ClearErrorLog(w http.ResponseWriter, r *http.Request) {
diff --git a/internal/apps/postgresql/service.go b/internal/apps/postgresql/service.go
index 0adbb743..62059c58 100644
--- a/internal/apps/postgresql/service.go
+++ b/internal/apps/postgresql/service.go
@@ -132,8 +132,7 @@ func (s *Service) Load(w http.ResponseWriter, r *http.Request) {
 
 // Log 获取日志
 func (s *Service) Log(w http.ResponseWriter, r *http.Request) {
-	log, _ := shell.Execf("tail -n 100 %s/server/postgresql/logs/postgresql-%s.log", app.Root, time.Now().Format(time.DateOnly))
-	service.Success(w, log)
+	service.Success(w, fmt.Sprintf("%s/server/postgresql/logs/postgresql-%s.log", app.Root, time.Now().Format(time.DateOnly)))
 }
 
 // ClearLog 清空日志
diff --git a/internal/apps/supervisor/init.go b/internal/apps/supervisor/init.go
index 8d8464f6..8a1f1796 100644
--- a/internal/apps/supervisor/init.go
+++ b/internal/apps/supervisor/init.go
@@ -13,7 +13,6 @@ func init() {
 		Route: func(r chi.Router) {
 			service := NewService()
 			r.Get("/service", service.Service)
-			r.Get("/log", service.Log)
 			r.Post("/clearLog", service.ClearLog)
 			r.Get("/config", service.GetConfig)
 			r.Post("/config", service.UpdateConfig)
diff --git a/internal/apps/supervisor/service.go b/internal/apps/supervisor/service.go
index b57eed8a..d301f5be 100644
--- a/internal/apps/supervisor/service.go
+++ b/internal/apps/supervisor/service.go
@@ -36,12 +36,6 @@ func (s *Service) Service(w http.ResponseWriter, r *http.Request) {
 	service.Success(w, s.name)
 }
 
-// Log 日志
-func (s *Service) Log(w http.ResponseWriter, r *http.Request) {
-	log, _ := shell.Execf(`tail -n 200 /var/log/supervisor/supervisord.log`)
-	service.Success(w, log)
-}
-
 // ClearLog 清空日志
 func (s *Service) ClearLog(w http.ResponseWriter, r *http.Request) {
 	if _, err := shell.Execf(`echo "" > /var/log/supervisor/supervisord.log`); err != nil {
@@ -204,8 +198,7 @@ func (s *Service) ProcessLog(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	log, _ := shell.Execf(`tail -n 200 '%s'`, logPath)
-	service.Success(w, log)
+	service.Success(w, logPath)
 }
 
 // ClearProcessLog 清空进程日志
diff --git a/web/src/components/common/RealtimeLog.vue b/web/src/components/common/RealtimeLog.vue
index ae608e2c..67b22b35 100644
--- a/web/src/components/common/RealtimeLog.vue
+++ b/web/src/components/common/RealtimeLog.vue
@@ -11,7 +11,7 @@ const logRef = ref<LogInst | null>(null)
 let logWs: WebSocket | null = null
 
 const init = async () => {
-  const cmd = `tail -n 40 -f ${props.path}`
+  const cmd = `tail -n 40 -f '${props.path}'`
   ws.exec(cmd)
     .then((ws: WebSocket) => {
       logWs = ws
diff --git a/web/src/components/common/RealtimeLogModal.vue b/web/src/components/common/RealtimeLogModal.vue
index 845d44c0..08639928 100644
--- a/web/src/components/common/RealtimeLogModal.vue
+++ b/web/src/components/common/RealtimeLogModal.vue
@@ -12,7 +12,7 @@ const logRef = ref<LogInst | null>(null)
 let logWs: WebSocket | null = null
 
 const init = async () => {
-  const cmd = `tail -n 40 -f ${props.path}`
+  const cmd = `tail -n 40 -f '${props.path}'`
   ws.exec(cmd)
     .then((ws: WebSocket) => {
       logWs = ws
diff --git a/web/src/views/apps/mysql/IndexView.vue b/web/src/views/apps/mysql/IndexView.vue
index 202f0de8..4c78e402 100644
--- a/web/src/views/apps/mysql/IndexView.vue
+++ b/web/src/views/apps/mysql/IndexView.vue
@@ -87,17 +87,11 @@ const handleSaveConfig = async () => {
 
 const handleClearErrorLog = async () => {
   await mysql.clearErrorLog()
-  getErrorLog().then((res) => {
-    errorLog.value = res
-  })
   window.$message.success('清空成功')
 }
 
 const handleClearSlowLog = async () => {
   await mysql.clearSlowLog()
-  getSlowLog().then((res) => {
-    slowLog.value = res
-  })
   window.$message.success('清空成功')
 }
 
@@ -268,34 +262,10 @@ onMounted(() => {
         />
       </n-tab-pane>
       <n-tab-pane name="error-log" tab="错误日志">
-        <Editor
-          v-model:value="errorLog"
-          language="ini"
-          theme="vs-dark"
-          height="60vh"
-          mt-8
-          :options="{
-            automaticLayout: true,
-            formatOnType: true,
-            formatOnPaste: true,
-            readOnly: true
-          }"
-        />
+        <realtime-log :path="errorLog" />
       </n-tab-pane>
       <n-tab-pane name="slow-log" tab="慢查询日志">
-        <Editor
-          v-model:value="slowLog"
-          language="ini"
-          theme="vs-dark"
-          height="60vh"
-          mt-8
-          :options="{
-            automaticLayout: true,
-            formatOnType: true,
-            formatOnPaste: true,
-            readOnly: true
-          }"
-        />
+        <realtime-log :path="slowLog" />
       </n-tab-pane>
     </n-tabs>
   </common-page>
diff --git a/web/src/views/apps/nginx/IndexView.vue b/web/src/views/apps/nginx/IndexView.vue
index 3dce3a77..3f97d997 100644
--- a/web/src/views/apps/nginx/IndexView.vue
+++ b/web/src/views/apps/nginx/IndexView.vue
@@ -75,9 +75,6 @@ const handleSaveConfig = async () => {
 
 const handleClearErrorLog = async () => {
   await nginx.clearErrorLog()
-  getErrorLog().then((res) => {
-    errorLog.value = res
-  })
   window.$message.success('清空成功')
 }
 
@@ -222,19 +219,7 @@ onMounted(() => {
         />
       </n-tab-pane>
       <n-tab-pane name="error-log" tab="错误日志">
-        <Editor
-          v-model:value="errorLog"
-          language="ini"
-          theme="vs-dark"
-          height="60vh"
-          mt-8
-          :options="{
-            automaticLayout: true,
-            formatOnType: true,
-            formatOnPaste: true,
-            readOnly: true
-          }"
-        />
+        <realtime-log :path="errorLog" />
       </n-tab-pane>
     </n-tabs>
   </common-page>
diff --git a/web/src/views/apps/php81/IndexView.vue b/web/src/views/apps/php81/IndexView.vue
index 6686aeb0..e29b1771 100644
--- a/web/src/views/apps/php81/IndexView.vue
+++ b/web/src/views/apps/php81/IndexView.vue
@@ -163,7 +163,6 @@ const getFPMConfig = async () => {
 const handleSaveConfig = async () => {
   await php.saveConfig(version, config.value)
   window.$message.success('保存成功')
-  await getErrorLog()
 }
 
 const handleSaveFPMConfig = async () => {
@@ -174,13 +173,11 @@ const handleSaveFPMConfig = async () => {
 
 const handleClearErrorLog = async () => {
   await php.clearErrorLog(version)
-  await getErrorLog()
   window.$message.success('清空成功')
 }
 
 const handleClearSlowLog = async () => {
   await php.clearSlowLog(version)
-  await getSlowLog()
   window.$message.success('清空成功')
 }
 
@@ -199,28 +196,24 @@ const handleStart = async () => {
   await systemctl.start(`php-fpm-${version}`)
   window.$message.success('启动成功')
   await getStatus()
-  await getErrorLog()
 }
 
 const handleStop = async () => {
   await systemctl.stop(`php-fpm-${version}`)
   window.$message.success('停止成功')
   await getStatus()
-  await getErrorLog()
 }
 
 const handleRestart = async () => {
   await systemctl.restart(`php-fpm-${version}`)
   window.$message.success('重启成功')
   await getStatus()
-  await getErrorLog()
 }
 
 const handleReload = async () => {
   await systemctl.reload(`php-fpm-${version}`)
   window.$message.success('重载成功')
   await getStatus()
-  await getErrorLog()
 }
 
 const handleInstallExtension = async (slug: string) => {
@@ -394,34 +387,10 @@ onMounted(() => {
         />
       </n-tab-pane>
       <n-tab-pane name="error-log" tab="错误日志">
-        <Editor
-          v-model:value="errorLog"
-          language="ini"
-          theme="vs-dark"
-          height="60vh"
-          mt-8
-          :options="{
-            automaticLayout: true,
-            formatOnType: true,
-            formatOnPaste: true,
-            readOnly: true
-          }"
-        />
+        <realtime-log :path="errorLog" />
       </n-tab-pane>
       <n-tab-pane name="slow-log" tab="慢日志">
-        <Editor
-          v-model:value="slowLog"
-          language="ini"
-          theme="vs-dark"
-          height="60vh"
-          mt-8
-          :options="{
-            automaticLayout: true,
-            formatOnType: true,
-            formatOnPaste: true,
-            readOnly: true
-          }"
-        />
+        <realtime-log :path="slowLog" />
       </n-tab-pane>
     </n-tabs>
   </common-page>
diff --git a/web/src/views/apps/php82/IndexView.vue b/web/src/views/apps/php82/IndexView.vue
index 8c185ef6..89965739 100644
--- a/web/src/views/apps/php82/IndexView.vue
+++ b/web/src/views/apps/php82/IndexView.vue
@@ -163,7 +163,6 @@ const getFPMConfig = async () => {
 const handleSaveConfig = async () => {
   await php.saveConfig(version, config.value)
   window.$message.success('保存成功')
-  await getErrorLog()
 }
 
 const handleSaveFPMConfig = async () => {
@@ -174,13 +173,11 @@ const handleSaveFPMConfig = async () => {
 
 const handleClearErrorLog = async () => {
   await php.clearErrorLog(version)
-  await getErrorLog()
   window.$message.success('清空成功')
 }
 
 const handleClearSlowLog = async () => {
   await php.clearSlowLog(version)
-  await getSlowLog()
   window.$message.success('清空成功')
 }
 
@@ -199,28 +196,24 @@ const handleStart = async () => {
   await systemctl.start(`php-fpm-${version}`)
   window.$message.success('启动成功')
   await getStatus()
-  await getErrorLog()
 }
 
 const handleStop = async () => {
   await systemctl.stop(`php-fpm-${version}`)
   window.$message.success('停止成功')
   await getStatus()
-  await getErrorLog()
 }
 
 const handleRestart = async () => {
   await systemctl.restart(`php-fpm-${version}`)
   window.$message.success('重启成功')
   await getStatus()
-  await getErrorLog()
 }
 
 const handleReload = async () => {
   await systemctl.reload(`php-fpm-${version}`)
   window.$message.success('重载成功')
   await getStatus()
-  await getErrorLog()
 }
 
 const handleInstallExtension = async (slug: string) => {
@@ -394,34 +387,10 @@ onMounted(() => {
         />
       </n-tab-pane>
       <n-tab-pane name="error-log" tab="错误日志">
-        <Editor
-          v-model:value="errorLog"
-          language="ini"
-          theme="vs-dark"
-          height="60vh"
-          mt-8
-          :options="{
-            automaticLayout: true,
-            formatOnType: true,
-            formatOnPaste: true,
-            readOnly: true
-          }"
-        />
+        <realtime-log :path="errorLog" />
       </n-tab-pane>
       <n-tab-pane name="slow-log" tab="慢日志">
-        <Editor
-          v-model:value="slowLog"
-          language="ini"
-          theme="vs-dark"
-          height="60vh"
-          mt-8
-          :options="{
-            automaticLayout: true,
-            formatOnType: true,
-            formatOnPaste: true,
-            readOnly: true
-          }"
-        />
+        <realtime-log :path="slowLog" />
       </n-tab-pane>
     </n-tabs>
   </common-page>
diff --git a/web/src/views/apps/php83/IndexView.vue b/web/src/views/apps/php83/IndexView.vue
index 951c380b..dea09c5f 100644
--- a/web/src/views/apps/php83/IndexView.vue
+++ b/web/src/views/apps/php83/IndexView.vue
@@ -163,7 +163,6 @@ const getFPMConfig = async () => {
 const handleSaveConfig = async () => {
   await php.saveConfig(version, config.value)
   window.$message.success('保存成功')
-  await getErrorLog()
 }
 
 const handleSaveFPMConfig = async () => {
@@ -174,13 +173,11 @@ const handleSaveFPMConfig = async () => {
 
 const handleClearErrorLog = async () => {
   await php.clearErrorLog(version)
-  await getErrorLog()
   window.$message.success('清空成功')
 }
 
 const handleClearSlowLog = async () => {
   await php.clearSlowLog(version)
-  await getSlowLog()
   window.$message.success('清空成功')
 }
 
@@ -199,28 +196,24 @@ const handleStart = async () => {
   await systemctl.start(`php-fpm-${version}`)
   window.$message.success('启动成功')
   await getStatus()
-  await getErrorLog()
 }
 
 const handleStop = async () => {
   await systemctl.stop(`php-fpm-${version}`)
   window.$message.success('停止成功')
   await getStatus()
-  await getErrorLog()
 }
 
 const handleRestart = async () => {
   await systemctl.restart(`php-fpm-${version}`)
   window.$message.success('重启成功')
   await getStatus()
-  await getErrorLog()
 }
 
 const handleReload = async () => {
   await systemctl.reload(`php-fpm-${version}`)
   window.$message.success('重载成功')
   await getStatus()
-  await getErrorLog()
 }
 
 const handleInstallExtension = async (slug: string) => {
@@ -394,34 +387,10 @@ onMounted(() => {
         />
       </n-tab-pane>
       <n-tab-pane name="error-log" tab="错误日志">
-        <Editor
-          v-model:value="errorLog"
-          language="ini"
-          theme="vs-dark"
-          height="60vh"
-          mt-8
-          :options="{
-            automaticLayout: true,
-            formatOnType: true,
-            formatOnPaste: true,
-            readOnly: true
-          }"
-        />
+        <realtime-log :path="errorLog" />
       </n-tab-pane>
       <n-tab-pane name="slow-log" tab="慢日志">
-        <Editor
-          v-model:value="slowLog"
-          language="ini"
-          theme="vs-dark"
-          height="60vh"
-          mt-8
-          :options="{
-            automaticLayout: true,
-            formatOnType: true,
-            formatOnPaste: true,
-            readOnly: true
-          }"
-        />
+        <realtime-log :path="slowLog" />
       </n-tab-pane>
     </n-tabs>
   </common-page>
diff --git a/web/src/views/apps/postgresql/IndexView.vue b/web/src/views/apps/postgresql/IndexView.vue
index 3dbd1d45..57d77353 100644
--- a/web/src/views/apps/postgresql/IndexView.vue
+++ b/web/src/views/apps/postgresql/IndexView.vue
@@ -87,9 +87,6 @@ const handleSaveUserConfig = async () => {
 
 const handleClearLog = async () => {
   await postgresql.clearLog()
-  getLog().then((res) => {
-    log.value = res
-  })
   window.$message.success('清空成功')
 }
 
@@ -258,19 +255,7 @@ onMounted(() => {
         />
       </n-tab-pane>
       <n-tab-pane name="log" tab="日志">
-        <Editor
-          v-model:value="log"
-          language="ini"
-          theme="vs-dark"
-          height="60vh"
-          mt-8
-          :options="{
-            automaticLayout: true,
-            formatOnType: true,
-            formatOnPaste: true,
-            readOnly: true
-          }"
-        />
+        <realtime-log :path="log" />
       </n-tab-pane>
     </n-tabs>
   </common-page>
diff --git a/web/src/views/apps/supervisor/IndexView.vue b/web/src/views/apps/supervisor/IndexView.vue
index fed7525e..6ded1594 100644
--- a/web/src/views/apps/supervisor/IndexView.vue
+++ b/web/src/views/apps/supervisor/IndexView.vue
@@ -16,7 +16,6 @@ const serviceName = ref('supervisor')
 const status = ref(false)
 const isEnabled = ref(false)
 const config = ref('')
-const log = ref('')
 const processLog = ref('')
 
 const addProcessModal = ref(false)
@@ -249,12 +248,6 @@ const getIsEnabled = async () => {
   })
 }
 
-const getLog = async () => {
-  supervisor.log().then((res: any) => {
-    log.value = res.data
-  })
-}
-
 const getConfig = async () => {
   supervisor.config().then((res: any) => {
     config.value = res.data
@@ -264,7 +257,6 @@ const getConfig = async () => {
 const handleSaveConfig = async () => {
   await supervisor.saveConfig(config.value)
   window.$message.success('保存成功')
-  await getLog()
 }
 
 const handleClearLog = async () => {
@@ -276,7 +268,6 @@ const handleStart = async () => {
   await systemctl.start(serviceName.value)
   window.$message.success('启动成功')
   await getStatus()
-  await getLog()
 }
 
 const handleIsEnabled = async () => {
@@ -294,21 +285,18 @@ const handleStop = async () => {
   await systemctl.stop(serviceName.value)
   window.$message.success('停止成功')
   await getStatus()
-  await getLog()
 }
 
 const handleRestart = async () => {
   await systemctl.restart(serviceName.value)
   window.$message.success('重启成功')
   await getStatus()
-  await getLog()
 }
 
 const handleReload = async () => {
   await systemctl.reload(serviceName.value)
   window.$message.success('重载成功')
   await getStatus()
-  await getLog()
 }
 
 const handleAddProcess = async () => {
@@ -482,19 +470,7 @@ onUnmounted(() => {
         </n-space>
       </n-tab-pane>
       <n-tab-pane name="log" tab="日志">
-        <Editor
-          v-model:value="log"
-          language="ini"
-          theme="vs-dark"
-          height="60vh"
-          mt-8
-          :options="{
-            automaticLayout: true,
-            formatOnType: true,
-            formatOnPaste: true,
-            readOnly: true
-          }"
-        />
+        <realtime-log path="/var/log/supervisor/supervisord.log" />
       </n-tab-pane>
     </n-tabs>
   </common-page>
@@ -551,29 +527,7 @@ onUnmounted(() => {
       </n-col>
     </n-row>
   </n-modal>
-  <n-modal
-    v-model:show="processLogModal"
-    preset="card"
-    title="进程日志"
-    style="width: 80vw"
-    size="huge"
-    :bordered="false"
-    :segmented="false"
-  >
-    <Editor
-      v-model:value="processLog"
-      language="ini"
-      theme="vs-dark"
-      height="60vh"
-      mt-8
-      :options="{
-        automaticLayout: true,
-        formatOnType: true,
-        formatOnPaste: true,
-        readOnly: true
-      }"
-    />
-  </n-modal>
+  <realtime-log-modal v-model:show="processLogModal" :path="processLog" />
   <n-modal
     v-model:show="editProcessModal"
     preset="card"