From c5ec454b2619bd2ac2e22ba7d24d70a4add54c09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <haozi@loli.email>
Date: Sat, 17 May 2025 18:21:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 internal/apps/mysql/app.go                  |   2 +-
 pkg/systemctl/service.go                    |  71 ++++----
 web/src/api/apps/docker/index.ts            |   2 +-
 web/src/api/apps/memcached/index.ts         |   4 +-
 web/src/api/apps/phpmyadmin/index.ts        |   4 +-
 web/src/components/common/ServiceStatus.vue | 181 ++++++++++++++++++++
 web/src/views/apps/codeserver/IndexView.vue |  93 +---------
 web/src/views/apps/docker/IndexView.vue     |  92 +---------
 web/src/views/apps/fail2ban/IndexView.vue   | 101 +----------
 web/src/views/apps/frp/IndexView.vue        | 134 +--------------
 web/src/views/apps/gitea/IndexView.vue      |  91 +---------
 web/src/views/apps/memcached/IndexView.vue  |  98 +----------
 web/src/views/apps/minio/IndexView.vue      |  91 +---------
 web/src/views/apps/mysql/IndexView.vue      | 104 +----------
 web/src/views/apps/nginx/IndexView.vue      | 103 +----------
 web/src/views/apps/php/PhpView.vue          | 103 +----------
 web/src/views/apps/phpmyadmin/IndexView.vue |   4 +-
 web/src/views/apps/podman/IndexView.vue     |  95 +---------
 web/src/views/apps/postgresql/IndexView.vue | 104 +----------
 web/src/views/apps/pureftpd/IndexView.vue   |  91 +---------
 web/src/views/apps/redis/IndexView.vue      |  94 +---------
 web/src/views/apps/rsync/IndexView.vue      |  89 +---------
 web/src/views/apps/supervisor/IndexView.vue |  97 +----------
 23 files changed, 296 insertions(+), 1552 deletions(-)
 create mode 100644 web/src/components/common/ServiceStatus.vue

diff --git a/internal/apps/mysql/app.go b/internal/apps/mysql/app.go
index 43a76877..b45ba79f 100644
--- a/internal/apps/mysql/app.go
+++ b/internal/apps/mysql/app.go
@@ -158,7 +158,7 @@ func (s *App) Load(w http.ResponseWriter, r *http.Request) {
 
 // ClearErrorLog 清空错误日志
 func (s *App) ClearErrorLog(w http.ResponseWriter, r *http.Request) {
-	if err := systemctl.LogsClear("mysqld"); err != nil {
+	if err := systemctl.LogClear("mysqld"); err != nil {
 		service.Error(w, http.StatusInternalServerError, "%v", err)
 		return
 	}
diff --git a/pkg/systemctl/service.go b/pkg/systemctl/service.go
index 19992258..08e1b2b7 100644
--- a/pkg/systemctl/service.go
+++ b/pkg/systemctl/service.go
@@ -1,8 +1,6 @@
 package systemctl
 
 import (
-	"errors"
-	"fmt"
 	"time"
 
 	"github.com/tnb-labs/panel/pkg/shell"
@@ -10,84 +8,79 @@ import (
 
 // Status 获取服务状态
 func Status(name string) (bool, error) {
-	output, err := shell.Execf("systemctl status %s | grep Active | grep -v grep | awk '{print $2}'", name)
-	return output == "active", err
+	output, _ := shell.Execf("systemctl is-active '%s'", name) // 不判断错误，因为 is-active 在服务未启用时会返回 3
+	return output == "active", nil
 }
 
 // IsEnabled 服务是否启用
 func IsEnabled(name string) (bool, error) {
-	out, err := shell.Execf("systemctl is-enabled '%s'", name)
-	if err != nil {
-		return false, fmt.Errorf("failed to check service status: %w", err)
-	}
-
-	switch out {
-	case "enabled":
-		return true, nil
-	case "disabled":
-		return false, nil
-	case "masked":
-		return false, errors.New("service is masked")
-	case "static":
-		return false, errors.New("service is statically enabled")
-	case "indirect":
-		return false, errors.New("service is indirectly enabled")
-	default:
-		return false, errors.New("unknown service status")
-	}
+	out, _ := shell.Execf("systemctl is-enabled '%s'", name) // 不判断错误，因为 is-enabled 在服务禁用时会返回 1
+	return out == "enabled" || out == "static" || out == "indirect", nil
 }
 
 // Start 启动服务
 func Start(name string) error {
-	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl start %s", name)
+	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl start '%s'", name)
 	return err
 }
 
 // Stop 停止服务
 func Stop(name string) error {
-	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl stop %s", name)
+	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl stop '%s'", name)
 	return err
 }
 
 // Restart 重启服务
 func Restart(name string) error {
-	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl restart %s", name)
+	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl restart '%s'", name)
 	return err
 }
 
 // Reload 重载服务
 func Reload(name string) error {
-	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl reload %s", name)
+	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl reload '%s'", name)
 	return err
 }
 
 // Enable 启用服务
 func Enable(name string) error {
-	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl enable %s", name)
+	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl enable '%s'", name)
 	return err
 }
 
 // Disable 禁用服务
 func Disable(name string) error {
-	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl disable %s", name)
+	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl disable '%s'", name)
 	return err
 }
 
-// Logs 获取服务日志
-func Logs(name string) (string, error) {
-	return shell.ExecfWithTimeout(2*time.Minute, "journalctl -u %s", name)
+// Mask 屏蔽服务
+func Mask(name string) error {
+	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl mask '%s'", name)
+	return err
 }
 
-// LogsTail 获取服务日志
-func LogsTail(name string, lines int) (string, error) {
-	return shell.ExecfWithTimeout(2*time.Minute, "journalctl -u %s --lines %d", name, lines)
+// Unmask 解除屏蔽服务
+func Unmask(name string) error {
+	_, err := shell.ExecfWithTimeout(2*time.Minute, "systemctl unmask '%s'", name)
+	return err
 }
 
-// LogsClear 清空服务日志
-func LogsClear(name string) error {
-	if _, err := shell.Execf("journalctl --rotate -u %s", name); err != nil {
+// Log 获取服务日志
+func Log(name string) (string, error) {
+	return shell.ExecfWithTimeout(2*time.Minute, "journalctl -u '%s'", name)
+}
+
+// LogTail 获取服务日志
+func LogTail(name string, lines int) (string, error) {
+	return shell.ExecfWithTimeout(2*time.Minute, "journalctl -u '%s' --lines '%d'", name, lines)
+}
+
+// LogClear 清空服务日志
+func LogClear(name string) error {
+	if _, err := shell.Execf("journalctl --rotate -u '%s'", name); err != nil {
 		return err
 	}
-	_, err := shell.Execf("journalctl --vacuum-time=1s -u %s", name)
+	_, err := shell.Execf("journalctl --vacuum-time=1s -u '%s'", name)
 	return err
 }
diff --git a/web/src/api/apps/docker/index.ts b/web/src/api/apps/docker/index.ts
index 7ecb5788..75a6e4f6 100644
--- a/web/src/api/apps/docker/index.ts
+++ b/web/src/api/apps/docker/index.ts
@@ -1,6 +1,6 @@
 import { http } from '@/utils'
 
 export default {
-  getConfig: (): any => http.Get('/apps/docker/config'),
+  config: (): any => http.Get('/apps/docker/config'),
   updateConfig: (config: string): any => http.Post('/apps/docker/config', { config })
 }
diff --git a/web/src/api/apps/memcached/index.ts b/web/src/api/apps/memcached/index.ts
index 02a9125f..ed5d20ee 100644
--- a/web/src/api/apps/memcached/index.ts
+++ b/web/src/api/apps/memcached/index.ts
@@ -1,7 +1,7 @@
 import { http } from '@/utils'
 
 export default {
-  getLoad: (): any => http.Get('/apps/memcached/load'),
-  getConfig: (): any => http.Get('/apps/memcached/config'),
+  load: (): any => http.Get('/apps/memcached/load'),
+  config: (): any => http.Get('/apps/memcached/config'),
   updateConfig: (config: string): any => http.Post('/apps/memcached/config', { config })
 }
diff --git a/web/src/api/apps/phpmyadmin/index.ts b/web/src/api/apps/phpmyadmin/index.ts
index 1199911a..0bc17d76 100644
--- a/web/src/api/apps/phpmyadmin/index.ts
+++ b/web/src/api/apps/phpmyadmin/index.ts
@@ -6,7 +6,7 @@ export default {
   // 设置端口
   port: (port: number): any => http.Post('/apps/phpmyadmin/port', { port }),
   // 获取配置
-  getConfig: (): any => http.Get('/apps/phpmyadmin/config'),
+  config: (): any => http.Get('/apps/phpmyadmin/config'),
   // 保存配置
-  saveConfig: (config: string): any => http.Post('/apps/phpmyadmin/config', { config })
+  updateConfig: (config: string): any => http.Post('/apps/phpmyadmin/config', { config })
 }
diff --git a/web/src/components/common/ServiceStatus.vue b/web/src/components/common/ServiceStatus.vue
new file mode 100644
index 00000000..ee6ec44a
--- /dev/null
+++ b/web/src/components/common/ServiceStatus.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { NButton, NPopconfirm } from 'naive-ui'
+import { useGettext } from 'vue3-gettext'
+
+import systemctl from '@/api/panel/systemctl'
+
+const { $gettext } = useGettext()
+const props = defineProps({
+  service: {
+    type: String,
+    required: true
+  },
+  showReload: {
+    type: Boolean,
+    required: false
+  }
+})
+
+const fetchingStatus = ref(true)
+const fetchingIsEnabled = ref(true)
+const status = ref(false)
+const isEnabled = ref(false)
+
+const statusStr = computed(() => {
+  if (fetchingStatus.value) return $gettext('Loading...')
+  return status.value ? $gettext('Running') : $gettext('Stopped')
+})
+
+const fetchStatus = async () => {
+  fetchingStatus.value = true
+  status.value = await systemctl.status(props.service)
+  fetchingStatus.value = false
+}
+
+const fetchIsEnabled = async () => {
+  fetchingIsEnabled.value = true
+  isEnabled.value = await systemctl.isEnabled(props.service)
+  fetchingIsEnabled.value = false
+}
+
+const handleStart = () => {
+  const messageReactive = window.$message.loading($gettext('Starting...'), {
+    duration: 0
+  })
+  fetchingStatus.value = true
+  useRequest(systemctl.start(props.service))
+    .onSuccess(() => {
+      window.$message.success($gettext('Started successfully'))
+      fetchStatus()
+    })
+    .onComplete(() => {
+      messageReactive?.destroy()
+    })
+}
+
+const handleStop = () => {
+  const messageReactive = window.$message.loading($gettext('Stopping...'), {
+    duration: 0
+  })
+  fetchingStatus.value = true
+  useRequest(systemctl.stop(props.service))
+    .onSuccess(() => {
+      window.$message.success($gettext('Stopped successfully'))
+      fetchStatus()
+    })
+    .onComplete(() => {
+      messageReactive?.destroy()
+    })
+}
+
+const handleRestart = () => {
+  const messageReactive = window.$message.loading($gettext('Restarting...'), {
+    duration: 0
+  })
+  fetchingStatus.value = true
+  useRequest(systemctl.restart(props.service))
+    .onSuccess(() => {
+      window.$message.success($gettext('Restarted successfully'))
+      fetchStatus()
+    })
+    .onComplete(() => {
+      messageReactive?.destroy()
+    })
+}
+
+const handleReload = () => {
+  const messageReactive = window.$message.loading($gettext('Reloading...'), {
+    duration: 0
+  })
+  fetchingStatus.value = true
+  useRequest(systemctl.reload(props.service))
+    .onSuccess(() => {
+      window.$message.success($gettext('Reloaded successfully'))
+      fetchStatus()
+    })
+    .onComplete(() => {
+      messageReactive?.destroy()
+    })
+}
+
+const handleIsEnabled = async () => {
+  const messageReactive = window.$message.loading($gettext('Setting autostart...'), {
+    duration: 0
+  })
+  fetchingIsEnabled.value = true
+  if (isEnabled.value) {
+    useRequest(systemctl.enable(props.service))
+      .onSuccess(() => {
+        window.$message.success($gettext('Autostart enabled successfully'))
+      })
+      .onComplete(() => {
+        messageReactive?.destroy()
+        fetchIsEnabled()
+      })
+  } else {
+    useRequest(systemctl.disable(props.service))
+      .onSuccess(() => {
+        window.$message.success($gettext('Autostart enabled successfully'))
+      })
+      .onComplete(() => {
+        messageReactive?.destroy()
+        fetchIsEnabled()
+      })
+  }
+}
+
+onMounted(() => {
+  fetchStatus()
+  fetchIsEnabled()
+})
+</script>
+
+<template>
+  <n-card :title="$gettext('Running Status')">
+    <template #header-extra>
+      <n-switch
+        v-model:disabled="fetchingIsEnabled"
+        v-model:value="isEnabled"
+        @update:value="handleIsEnabled"
+      >
+        <template #checked> {{ $gettext('Autostart On') }} </template>
+        <template #unchecked> {{ $gettext('Autostart Off') }} </template>
+      </n-switch>
+    </template>
+    <n-flex vertical>
+      <n-alert :type="fetchingStatus ? 'info' : status ? 'success' : 'error'">
+        {{ statusStr }}
+      </n-alert>
+      <n-flex>
+        <n-button type="success" v-model:disabled="fetchingStatus" @click="handleStart">
+          <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+          {{ $gettext('Start') }}
+        </n-button>
+        <n-popconfirm @positive-click="handleStop">
+          <template #trigger>
+            <n-button type="error" v-model:disabled="fetchingStatus">
+              <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
+              {{ $gettext('Stop') }}
+            </n-button>
+          </template>
+          {{ $gettext('Are you sure you want to stop %{ service }?', { service: props.service }) }}
+        </n-popconfirm>
+        <n-button type="warning" v-model:disabled="fetchingStatus" @click="handleRestart">
+          <the-icon :size="18" icon="material-symbols:replay-rounded" />
+          {{ $gettext('Restart') }}
+        </n-button>
+        <n-button
+          v-if="showReload"
+          type="primary"
+          v-model:disabled="fetchingStatus"
+          @click="handleReload"
+        >
+          <the-icon :size="20" icon="material-symbols:refresh-rounded" />
+          {{ $gettext('Reload') }}
+        </n-button>
+      </n-flex>
+    </n-flex>
+  </n-card>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/views/apps/codeserver/IndexView.vue b/web/src/views/apps/codeserver/IndexView.vue
index 4dd6903f..11862441 100644
--- a/web/src/views/apps/codeserver/IndexView.vue
+++ b/web/src/views/apps/codeserver/IndexView.vue
@@ -4,74 +4,26 @@ defineOptions({
 })
 
 import Editor from '@guolao/vue-monaco-editor'
-import { NButton, NPopconfirm } from 'naive-ui'
+import { NButton } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import codeserver from '@/api/apps/codeserver'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
-const config = ref('')
 
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
+const { data: config } = useRequest(codeserver.config, {
+  initialData: {
+    config: ''
+  }
 })
 
-const getStatus = async () => {
-  status.value = await systemctl.status('code-server')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled('code-server')
-}
-
-const getConfig = async () => {
-  config.value = await codeserver.config()
-}
-
 const handleSaveConfig = () => {
   useRequest(codeserver.saveConfig(config.value)).onSuccess(() => {
     window.$message.success($gettext('Saved successfully'))
   })
 }
-
-const handleStart = async () => {
-  await systemctl.start('code-server')
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleStop = async () => {
-  await systemctl.stop('code-server')
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async () => {
-  await systemctl.restart('code-server')
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable('code-server')
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable('code-server')
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-onMounted(() => {
-  getStatus()
-  getIsEnabled()
-  getConfig()
-})
 </script>
 
 <template>
@@ -89,38 +41,7 @@ onMounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-card :title="$gettext('Running Status')">
-          <template #header-extra>
-            <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-              <template #checked> {{ $gettext('Autostart On') }} </template>
-              <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-            </n-switch>
-          </template>
-          <n-space vertical>
-            <n-alert :type="status ? 'success' : 'error'">
-              {{ statusStr }}
-            </n-alert>
-            <n-space>
-              <n-button type="success" @click="handleStart">
-                <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                {{ $gettext('Start') }}
-              </n-button>
-              <n-popconfirm @positive-click="handleStop">
-                <template #trigger>
-                  <n-button type="error">
-                    <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                    {{ $gettext('Stop') }}
-                  </n-button>
-                </template>
-                {{ $gettext('Are you sure you want to stop Code Server?') }}
-              </n-popconfirm>
-              <n-button type="warning" @click="handleRestart">
-                <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                {{ $gettext('Restart') }}
-              </n-button>
-            </n-space>
-          </n-space>
-        </n-card>
+        <service-status service="code-server" />
       </n-tab-pane>
       <n-tab-pane name="config" :tab="$gettext('Modify Configuration')">
         <n-space vertical>
diff --git a/web/src/views/apps/docker/IndexView.vue b/web/src/views/apps/docker/IndexView.vue
index 123d55ee..c895c18c 100644
--- a/web/src/views/apps/docker/IndexView.vue
+++ b/web/src/views/apps/docker/IndexView.vue
@@ -4,77 +4,26 @@ defineOptions({
 })
 
 import Editor from '@guolao/vue-monaco-editor'
-import { NButton, NPopconfirm } from 'naive-ui'
+import { NButton } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import docker from '@/api/apps/docker'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
 
-const { data: config } = useRequest(docker.getConfig, {
+const { data: config } = useRequest(docker.config, {
   initialData: {
     config: ''
   }
 })
 
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
-})
-
-const getStatus = async () => {
-  status.value = await systemctl.status('docker')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled('docker')
-}
-
 const handleSaveConfig = () => {
   useRequest(docker.updateConfig(config.value)).onSuccess(() => {
     window.$message.success($gettext('Saved successfully'))
   })
 }
-
-const handleStart = () => {
-  useRequest(systemctl.start('docker')).onSuccess(() => {
-    window.$message.success($gettext('Started successfully'))
-    getStatus()
-  })
-}
-
-const handleStop = () => {
-  useRequest(systemctl.stop('docker')).onSuccess(() => {
-    window.$message.success($gettext('Stopped successfully'))
-    getStatus()
-  })
-}
-
-const handleRestart = () => {
-  useRequest(systemctl.restart('docker')).onSuccess(() => {
-    window.$message.success($gettext('Restarted successfully'))
-    getStatus()
-  })
-}
-
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable('docker')
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable('docker')
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-onMounted(() => {
-  getStatus()
-  getIsEnabled()
-})
 </script>
 
 <template>
@@ -92,40 +41,7 @@ onMounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-flex vertical>
-          <n-card :title="$gettext('Running Status')">
-            <template #header-extra>
-              <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-                <template #checked> {{ $gettext('Autostart On') }} </template>
-                <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-              </n-switch>
-            </template>
-            <n-space vertical>
-              <n-alert :type="status ? 'success' : 'error'">
-                {{ statusStr }}
-              </n-alert>
-              <n-space>
-                <n-button type="success" @click="handleStart">
-                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                  {{ $gettext('Start') }}
-                </n-button>
-                <n-popconfirm @positive-click="handleStop">
-                  <template #trigger>
-                    <n-button type="error">
-                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                      {{ $gettext('Stop') }}
-                    </n-button>
-                  </template>
-                  {{ $gettext('Are you sure you want to stop Docker?') }}
-                </n-popconfirm>
-                <n-button type="warning" @click="handleRestart">
-                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                  {{ $gettext('Restart') }}
-                </n-button>
-              </n-space>
-            </n-space>
-          </n-card>
-        </n-flex>
+        <service-status service="docker" />
       </n-tab-pane>
       <n-tab-pane name="config" :tab="$gettext('Configuration')">
         <n-space vertical>
diff --git a/web/src/views/apps/fail2ban/IndexView.vue b/web/src/views/apps/fail2ban/IndexView.vue
index c361cac8..d1fd19c4 100644
--- a/web/src/views/apps/fail2ban/IndexView.vue
+++ b/web/src/views/apps/fail2ban/IndexView.vue
@@ -8,14 +8,12 @@ import { useGettext } from 'vue3-gettext'
 
 import fail2ban from '@/api/apps/fail2ban'
 import app from '@/api/panel/app'
-import systemctl from '@/api/panel/systemctl'
 import website from '@/api/panel/website'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 import { renderIcon } from '@/utils'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
 const white = ref('')
 
 const addJailModal = ref(false)
@@ -35,13 +33,6 @@ const jailCurrentlyBan = ref(0)
 const jailTotalBan = ref(0)
 const jailBanedList = ref<any[]>([])
 
-const statusType = computed(() => {
-  return status.value ? 'success' : 'error'
-})
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
-})
-
 const jailsColumns: any = [
   {
     title: $gettext('Name'),
@@ -195,49 +186,6 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   }
 )
 
-const getStatus = async () => {
-  status.value = await systemctl.status('fail2ban')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled('fail2ban')
-}
-
-const handleStart = async () => {
-  await systemctl.start('fail2ban')
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable('fail2ban')
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable('fail2ban')
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-const handleStop = async () => {
-  await systemctl.stop('fail2ban')
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async () => {
-  await systemctl.restart('fail2ban')
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
-const handleReload = async () => {
-  await systemctl.reload('fail2ban')
-  window.$message.success($gettext('Reloaded successfully'))
-  await getStatus()
-}
-
 const handleAddJail = () => {
   useRequest(fail2ban.add(addJailModel.value)).onSuccess(() => {
     refresh()
@@ -269,8 +217,6 @@ const handleUnBan = (name: string, ip: string) => {
 
 onMounted(() => {
   refresh()
-  getStatus()
-  getIsEnabled()
   getWhiteList()
   useRequest(app.isInstalled('nginx')).onSuccess(({ data }) => {
     if (data.installed) {
@@ -304,47 +250,8 @@ onMounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-space vertical>
-          <n-card :title="$gettext('Running Status')">
-            <template #header-extra>
-              <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-                <template #checked> {{ $gettext('Autostart On') }} </template>
-                <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-              </n-switch>
-            </template>
-            <n-space vertical>
-              <n-alert :type="statusType">
-                {{ statusStr }}
-              </n-alert>
-              <n-space>
-                <n-button type="success" @click="handleStart">
-                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                  {{ $gettext('Start') }}
-                </n-button>
-                <n-popconfirm @positive-click="handleStop">
-                  <template #trigger>
-                    <n-button type="error">
-                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                      {{ $gettext('Stop') }}
-                    </n-button>
-                  </template>
-                  {{
-                    $gettext(
-                      'Stopping Fail2ban will disable all rules. Are you sure you want to stop?'
-                    )
-                  }}
-                </n-popconfirm>
-                <n-button type="warning" @click="handleRestart">
-                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                  {{ $gettext('Restart') }}
-                </n-button>
-                <n-button type="primary" @click="handleReload">
-                  <the-icon :size="20" icon="material-symbols:refresh-rounded" />
-                  {{ $gettext('Reload') }}
-                </n-button>
-              </n-space>
-            </n-space>
-          </n-card>
+        <n-flex vertical>
+          <service-status service="fail2ban" show-reload />
           <n-card :title="$gettext('IP Whitelist')">
             <n-input
               v-model:value="white"
@@ -353,7 +260,7 @@ onMounted(() => {
               :placeholder="$gettext('IP whitelist, separated by commas')"
             />
           </n-card>
-        </n-space>
+        </n-flex>
       </n-tab-pane>
       <n-tab-pane name="jails" :tab="$gettext('Rule Management')">
         <n-card :title="$gettext('Rule List')" :segmented="true">
diff --git a/web/src/views/apps/frp/IndexView.vue b/web/src/views/apps/frp/IndexView.vue
index 3cbc5ad3..88e18904 100644
--- a/web/src/views/apps/frp/IndexView.vue
+++ b/web/src/views/apps/frp/IndexView.vue
@@ -4,44 +4,19 @@ defineOptions({
 })
 
 import Editor from '@guolao/vue-monaco-editor'
-import { NButton, NPopconfirm } from 'naive-ui'
+import { NButton } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import frp from '@/api/apps/frp'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 
 const { $gettext } = useGettext()
 const currentTab = ref('frps')
-const status = ref({
-  frpc: false,
-  frps: false
-})
-const isEnabled = ref({
-  frpc: false,
-  frps: false
-})
 const config = ref({
   frpc: '',
   frps: ''
 })
 
-const statusStr = computed(() => {
-  return {
-    frpc: status.value.frpc ? $gettext('Running') : $gettext('Stopped'),
-    frps: status.value.frps ? $gettext('Running') : $gettext('Stopped')
-  }
-})
-
-const getStatus = async () => {
-  status.value.frps = await systemctl.status('frps')
-  status.value.frpc = await systemctl.status('frpc')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value.frps = await systemctl.isEnabled('frps')
-  isEnabled.value.frpc = await systemctl.isEnabled('frpc')
-}
-
 const getConfig = async () => {
   config.value.frps = await frp.config('frps')
   config.value.frpc = await frp.config('frpc')
@@ -55,38 +30,7 @@ const handleSaveConfig = (service: string) => {
   )
 }
 
-const handleStart = async (name: string) => {
-  await systemctl.start(name)
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleStop = async (name: string) => {
-  await systemctl.stop(name)
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async (name: string) => {
-  await systemctl.restart(name)
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
-const handleIsEnabled = async (name: string) => {
-  if (isEnabled.value[name as keyof typeof isEnabled.value]) {
-    await systemctl.enable(name)
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable(name)
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
 onMounted(() => {
-  getStatus()
-  getIsEnabled()
   getConfig()
 })
 </script>
@@ -95,39 +39,8 @@ onMounted(() => {
   <common-page show-footer>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="frps" tab="Frps">
-        <n-space vertical>
-          <n-card :title="$gettext('Running Status')">
-            <template #header-extra>
-              <n-switch v-model:value="isEnabled.frps" @update:value="handleIsEnabled('frps')">
-                <template #checked> {{ $gettext('Autostart On') }} </template>
-                <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-              </n-switch>
-            </template>
-            <n-space vertical>
-              <n-alert :type="status.frps ? 'success' : 'error'">
-                {{ statusStr.frps }}
-              </n-alert>
-              <n-space>
-                <n-button type="success" @click="handleStart('frps')">
-                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                  {{ $gettext('Start') }}
-                </n-button>
-                <n-popconfirm @positive-click="handleStop('frps')">
-                  <template #trigger>
-                    <n-button type="error">
-                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                      {{ $gettext('Stop') }}
-                    </n-button>
-                  </template>
-                  {{ $gettext('Are you sure you want to stop Frps?') }}
-                </n-popconfirm>
-                <n-button type="warning" @click="handleRestart('frps')">
-                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                  {{ $gettext('Restart') }}
-                </n-button>
-              </n-space>
-            </n-space>
-          </n-card>
+        <n-flex vertical>
+          <service-status service="frps" />
           <n-card :title="$gettext('Modify Configuration')">
             <template #header-extra>
               <n-button type="primary" @click="handleSaveConfig('frps')">
@@ -148,42 +61,11 @@ onMounted(() => {
               }"
             />
           </n-card>
-        </n-space>
+        </n-flex>
       </n-tab-pane>
       <n-tab-pane name="frpc" tab="Frpc">
-        <n-space vertical>
-          <n-card :title="$gettext('Running Status')">
-            <template #header-extra>
-              <n-switch v-model:value="isEnabled.frpc" @update:value="handleIsEnabled('frpc')">
-                <template #checked> {{ $gettext('Autostart On') }} </template>
-                <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-              </n-switch>
-            </template>
-            <n-space vertical>
-              <n-alert :type="status.frpc ? 'success' : 'error'">
-                {{ statusStr.frpc }}
-              </n-alert>
-              <n-space>
-                <n-button type="success" @click="handleStart('frpc')">
-                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                  {{ $gettext('Start') }}
-                </n-button>
-                <n-popconfirm @positive-click="handleStop('frpc')">
-                  <template #trigger>
-                    <n-button type="error">
-                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                      {{ $gettext('Stop') }}
-                    </n-button>
-                  </template>
-                  {{ $gettext('Are you sure you want to stop Frpc?') }}
-                </n-popconfirm>
-                <n-button type="warning" @click="handleRestart('frpc')">
-                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                  {{ $gettext('Restart') }}
-                </n-button>
-              </n-space>
-            </n-space>
-          </n-card>
+        <n-flex vertical>
+          <service-status service="frpc" />
           <n-card :title="$gettext('Modify Configuration')">
             <template #header-extra>
               <n-button type="primary" @click="handleSaveConfig('frpc')">
@@ -204,7 +86,7 @@ onMounted(() => {
               }"
             />
           </n-card>
-        </n-space>
+        </n-flex>
       </n-tab-pane>
     </n-tabs>
   </common-page>
diff --git a/web/src/views/apps/gitea/IndexView.vue b/web/src/views/apps/gitea/IndexView.vue
index d8702d44..69fd9866 100644
--- a/web/src/views/apps/gitea/IndexView.vue
+++ b/web/src/views/apps/gitea/IndexView.vue
@@ -4,74 +4,24 @@ defineOptions({
 })
 
 import Editor from '@guolao/vue-monaco-editor'
-import { NButton, NPopconfirm } from 'naive-ui'
+import { NButton } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import gitea from '@/api/apps/gitea'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
-const config = ref('')
 
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
+const { data: config } = useRequest(gitea.config, {
+  initialData: ''
 })
 
-const getStatus = async () => {
-  status.value = await systemctl.status('gitea')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled('gitea')
-}
-
-const getConfig = async () => {
-  config.value = await gitea.config()
-}
-
 const handleSaveConfig = () => {
   useRequest(gitea.saveConfig(config.value)).onSuccess(() => {
     window.$message.success($gettext('Saved successfully'))
   })
 }
-
-const handleStart = async () => {
-  await systemctl.start('gitea')
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleStop = async () => {
-  await systemctl.stop('gitea')
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async () => {
-  await systemctl.restart('gitea')
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable('gitea')
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable('gitea')
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-onMounted(() => {
-  getStatus()
-  getIsEnabled()
-  getConfig()
-})
 </script>
 
 <template>
@@ -89,38 +39,7 @@ onMounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-card :title="$gettext('Running Status')">
-          <template #header-extra>
-            <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-              <template #checked> {{ $gettext('Autostart On') }} </template>
-              <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-            </n-switch>
-          </template>
-          <n-space vertical>
-            <n-alert :type="status ? 'success' : 'error'">
-              {{ statusStr }}
-            </n-alert>
-            <n-space>
-              <n-button type="success" @click="handleStart">
-                <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                {{ $gettext('Start') }}
-              </n-button>
-              <n-popconfirm @positive-click="handleStop">
-                <template #trigger>
-                  <n-button type="error">
-                    <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                    {{ $gettext('Stop') }}
-                  </n-button>
-                </template>
-                {{ $gettext('Are you sure you want to stop Gitea?') }}
-              </n-popconfirm>
-              <n-button type="warning" @click="handleRestart">
-                <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                {{ $gettext('Restart') }}
-              </n-button>
-            </n-space>
-          </n-space>
-        </n-card>
+        <service-status service="gitea" />
       </n-tab-pane>
       <n-tab-pane name="config" :tab="$gettext('Modify Configuration')">
         <n-space vertical>
diff --git a/web/src/views/apps/memcached/IndexView.vue b/web/src/views/apps/memcached/IndexView.vue
index 1bd876e6..f5d5e340 100644
--- a/web/src/views/apps/memcached/IndexView.vue
+++ b/web/src/views/apps/memcached/IndexView.vue
@@ -4,23 +4,14 @@ defineOptions({
 })
 
 import Editor from '@guolao/vue-monaco-editor'
-import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
+import { NButton, NDataTable } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import memcached from '@/api/apps/memcached'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
-
-const statusType = computed(() => {
-  return status.value ? 'success' : 'error'
-})
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
-})
 
 const loadColumns: any = [
   {
@@ -38,19 +29,11 @@ const loadColumns: any = [
   }
 ]
 
-const { data: load } = useRequest(memcached.getLoad, {
+const { data: load } = useRequest(memcached.load, {
   initialData: []
 })
 
-const getStatus = async () => {
-  status.value = await systemctl.status('memcached')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled('memcached')
-}
-
-const { data: config } = useRequest(memcached.getConfig, {
+const { data: config } = useRequest(memcached.config, {
   initialData: {
     config: ''
   }
@@ -61,40 +44,6 @@ const handleSaveConfig = () => {
     window.$message.success($gettext('Saved successfully'))
   })
 }
-
-const handleStart = async () => {
-  await systemctl.start('memcached')
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable('memcached')
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable('memcached')
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-const handleStop = async () => {
-  await systemctl.stop('memcached')
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async () => {
-  await systemctl.restart('memcached')
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
-onMounted(() => {
-  getStatus()
-  getIsEnabled()
-})
 </script>
 
 <template>
@@ -112,44 +61,7 @@ onMounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-space vertical>
-          <n-card :title="$gettext('Running Status')">
-            <template #header-extra>
-              <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-                <template #checked> {{ $gettext('Autostart On') }} </template>
-                <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-              </n-switch>
-            </template>
-            <n-space vertical>
-              <n-alert :type="statusType">
-                {{ statusStr }}
-              </n-alert>
-              <n-space>
-                <n-button type="success" @click="handleStart">
-                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                  {{ $gettext('Start') }}
-                </n-button>
-                <n-popconfirm @positive-click="handleStop">
-                  <template #trigger>
-                    <n-button type="error">
-                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                      {{ $gettext('Stop') }}
-                    </n-button>
-                  </template>
-                  {{
-                    $gettext(
-                      'Stopping Memcached will cause websites using Memcached to become inaccessible. Are you sure you want to stop?'
-                    )
-                  }}
-                </n-popconfirm>
-                <n-button type="warning" @click="handleRestart">
-                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                  {{ $gettext('Restart') }}
-                </n-button>
-              </n-space>
-            </n-space>
-          </n-card>
-        </n-space>
+        <service-status service="memcached" />
       </n-tab-pane>
       <n-tab-pane name="config" :tab="$gettext('Service Configuration')">
         <n-space vertical>
diff --git a/web/src/views/apps/minio/IndexView.vue b/web/src/views/apps/minio/IndexView.vue
index fa65d220..e472295b 100644
--- a/web/src/views/apps/minio/IndexView.vue
+++ b/web/src/views/apps/minio/IndexView.vue
@@ -4,74 +4,24 @@ defineOptions({
 })
 
 import Editor from '@guolao/vue-monaco-editor'
-import { NButton, NPopconfirm } from 'naive-ui'
+import { NButton } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import minio from '@/api/apps/minio'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
-const env = ref('')
 
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
+const { data: env } = useRequest(minio.env, {
+  initialData: ''
 })
 
-const getStatus = async () => {
-  status.value = await systemctl.status('minio')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled('minio')
-}
-
-const getEnv = async () => {
-  env.value = await minio.env()
-}
-
 const handleSaveEnv = () => {
   useRequest(minio.saveEnv(env.value)).onSuccess(() => {
     window.$message.success($gettext('Saved successfully'))
   })
 }
-
-const handleStart = async () => {
-  await systemctl.start('minio')
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleStop = async () => {
-  await systemctl.stop('minio')
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async () => {
-  await systemctl.restart('minio')
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable('minio')
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable('minio')
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-onMounted(() => {
-  getStatus()
-  getIsEnabled()
-  getEnv()
-})
 </script>
 
 <template>
@@ -84,38 +34,7 @@ onMounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-card :title="$gettext('Running Status')">
-          <template #header-extra>
-            <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-              <template #checked> {{ $gettext('Autostart On') }} </template>
-              <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-            </n-switch>
-          </template>
-          <n-space vertical>
-            <n-alert :type="status ? 'success' : 'error'">
-              {{ statusStr }}
-            </n-alert>
-            <n-space>
-              <n-button type="success" @click="handleStart">
-                <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                {{ $gettext('Start') }}
-              </n-button>
-              <n-popconfirm @positive-click="handleStop">
-                <template #trigger>
-                  <n-button type="error">
-                    <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                    {{ $gettext('Stop') }}
-                  </n-button>
-                </template>
-                {{ $gettext('Are you sure you want to stop Minio?') }}
-              </n-popconfirm>
-              <n-button type="warning" @click="handleRestart">
-                <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                {{ $gettext('Restart') }}
-              </n-button>
-            </n-space>
-          </n-space>
-        </n-card>
+        <service-status service="minio" />
       </n-tab-pane>
       <n-tab-pane name="env" :tab="$gettext('Environment Variables')">
         <n-space vertical>
diff --git a/web/src/views/apps/mysql/IndexView.vue b/web/src/views/apps/mysql/IndexView.vue
index b00f36b8..3ac4b1b2 100644
--- a/web/src/views/apps/mysql/IndexView.vue
+++ b/web/src/views/apps/mysql/IndexView.vue
@@ -4,16 +4,14 @@ defineOptions({
 })
 
 import Editor from '@guolao/vue-monaco-editor'
-import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
+import { NButton, NDataTable, NInput } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import mysql from '@/api/apps/mysql'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
 
 const { data: rootPassword } = useRequest(mysql.rootPassword, {
   initialData: ''
@@ -28,13 +26,6 @@ const { data: load } = useRequest(mysql.load, {
   initialData: []
 })
 
-const statusType = computed(() => {
-  return status.value ? 'success' : 'error'
-})
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
-})
-
 const loadColumns: any = [
   {
     title: $gettext('Property'),
@@ -51,14 +42,6 @@ const loadColumns: any = [
   }
 ]
 
-const getStatus = async () => {
-  status.value = await systemctl.status('mysqld')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled('mysqld')
-}
-
 const handleSaveConfig = () => {
   useRequest(mysql.saveConfig(config.value)).onSuccess(() => {
     window.$message.success($gettext('Saved successfully'))
@@ -77,44 +60,10 @@ const handleClearSlowLog = () => {
   })
 }
 
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable('mysqld')
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable('mysqld')
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-const handleStart = async () => {
-  await systemctl.start('mysqld')
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleStop = async () => {
-  await systemctl.stop('mysqld')
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async () => {
-  await systemctl.restart('mysqld')
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
 const handleSetRootPassword = async () => {
   await mysql.setRootPassword(rootPassword.value)
   window.$message.success($gettext('Modified successfully'))
 }
-
-onMounted(() => {
-  getStatus()
-  getIsEnabled()
-})
 </script>
 
 <template>
@@ -150,45 +99,10 @@ onMounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-space vertical>
-          <n-card :title="$gettext('Running Status')">
-            <template #header-extra>
-              <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-                <template #checked> {{ $gettext('Autostart On') }} </template>
-                <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-              </n-switch>
-            </template>
-            <n-space vertical>
-              <n-alert :type="statusType">
-                {{ statusStr }}
-              </n-alert>
-              <n-space>
-                <n-button type="success" @click="handleStart">
-                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                  {{ $gettext('Start') }}
-                </n-button>
-                <n-popconfirm @positive-click="handleStop">
-                  <template #trigger>
-                    <n-button type="error">
-                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                      {{ $gettext('Stop') }}
-                    </n-button>
-                  </template>
-                  {{
-                    $gettext(
-                      'Stopping MySQL will cause websites using MySQL to become inaccessible. Are you sure you want to stop?'
-                    )
-                  }}
-                </n-popconfirm>
-                <n-button type="warning" @click="handleRestart">
-                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                  {{ $gettext('Restart') }}
-                </n-button>
-              </n-space>
-            </n-space>
-          </n-card>
+        <n-flex vertical>
+          <service-status service="mysqld" />
           <n-card :title="$gettext('Root Password')">
-            <n-space vertical>
+            <n-flex vertical>
               <n-input
                 v-model:value="rootPassword"
                 type="password"
@@ -197,12 +111,12 @@ onMounted(() => {
               <n-button type="primary" @click="handleSetRootPassword">{{
                 $gettext('Save Changes')
               }}</n-button>
-            </n-space>
+            </n-flex>
           </n-card>
-        </n-space>
+        </n-flex>
       </n-tab-pane>
       <n-tab-pane name="config" :tab="$gettext('Modify Configuration')">
-        <n-space vertical>
+        <n-flex vertical>
           <n-alert type="warning">
             {{
               $gettext(
@@ -222,7 +136,7 @@ onMounted(() => {
               formatOnPaste: true
             }"
           />
-        </n-space>
+        </n-flex>
       </n-tab-pane>
       <n-tab-pane name="load" :tab="$gettext('Load Status')">
         <n-data-table
diff --git a/web/src/views/apps/nginx/IndexView.vue b/web/src/views/apps/nginx/IndexView.vue
index 459f8674..ec2cba71 100644
--- a/web/src/views/apps/nginx/IndexView.vue
+++ b/web/src/views/apps/nginx/IndexView.vue
@@ -4,16 +4,14 @@ defineOptions({
 })
 
 import Editor from '@guolao/vue-monaco-editor'
-import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
+import { NButton, NDataTable } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import nginx from '@/api/apps/nginx'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
 
 const { data: config } = useRequest(nginx.config, {
   initialData: ''
@@ -25,14 +23,6 @@ const { data: load } = useRequest(nginx.load, {
   initialData: []
 })
 
-const statusType = computed(() => {
-  return status.value ? 'success' : 'error'
-})
-
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
-})
-
 const columns: any = [
   {
     title: $gettext('Property'),
@@ -49,14 +39,6 @@ const columns: any = [
   }
 ]
 
-const getStatus = async () => {
-  status.value = await systemctl.status('nginx')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled('nginx')
-}
-
 const handleSaveConfig = () => {
   useRequest(nginx.saveConfig(config.value)).onSuccess(() => {
     window.$message.success($gettext('Saved successfully'))
@@ -68,46 +50,6 @@ const handleClearErrorLog = () => {
     window.$message.success($gettext('Cleared successfully'))
   })
 }
-
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable('nginx')
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable('nginx')
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-const handleStart = async () => {
-  await systemctl.start('nginx')
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleStop = async () => {
-  await systemctl.stop('nginx')
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async () => {
-  await systemctl.restart('nginx')
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
-const handleReload = async () => {
-  await systemctl.reload('nginx')
-  window.$message.success($gettext('Reloaded successfully'))
-  await getStatus()
-}
-
-onMounted(() => {
-  getStatus()
-  getIsEnabled()
-})
 </script>
 
 <template>
@@ -134,46 +76,7 @@ onMounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-card :title="$gettext('Running Status')">
-          <template #header-extra>
-            <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-              <template #checked> {{ $gettext('Autostart On') }} </template>
-              <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-            </n-switch>
-          </template>
-          <n-space vertical>
-            <n-alert :type="statusType">
-              {{ statusStr }}
-            </n-alert>
-            <n-space>
-              <n-button type="success" @click="handleStart">
-                <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                {{ $gettext('Start') }}
-              </n-button>
-              <n-popconfirm @positive-click="handleStop">
-                <template #trigger>
-                  <n-button type="error">
-                    <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                    {{ $gettext('Stop') }}
-                  </n-button>
-                </template>
-                {{
-                  $gettext(
-                    'Stopping OpenResty will cause all websites to become inaccessible. Are you sure you want to stop?'
-                  )
-                }}
-              </n-popconfirm>
-              <n-button type="warning" @click="handleRestart">
-                <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                {{ $gettext('Restart') }}
-              </n-button>
-              <n-button type="primary" @click="handleReload">
-                <the-icon :size="20" icon="material-symbols:refresh-rounded" />
-                {{ $gettext('Reload') }}
-              </n-button>
-            </n-space>
-          </n-space>
-        </n-card>
+        <service-status service="nginx" show-reload />
       </n-tab-pane>
       <n-tab-pane name="config" :tab="$gettext('Modify Configuration')">
         <n-space vertical>
diff --git a/web/src/views/apps/php/PhpView.vue b/web/src/views/apps/php/PhpView.vue
index 51837d0d..d4f7fe48 100644
--- a/web/src/views/apps/php/PhpView.vue
+++ b/web/src/views/apps/php/PhpView.vue
@@ -4,7 +4,7 @@ import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import php from '@/api/apps/php'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 import { renderIcon } from '@/utils'
 
 const { $gettext } = useGettext()
@@ -18,8 +18,6 @@ const props = defineProps({
 const { version } = toRefs(props)
 
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
 
 const { data: config } = useRequest(php.config(version.value), {
   initialData: ''
@@ -40,13 +38,6 @@ const { data: extensions } = useRequest(php.extensions(version.value), {
   initialData: []
 })
 
-const statusType = computed(() => {
-  return status.value ? 'success' : 'error'
-})
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
-})
-
 const extensionColumns: any = [
   {
     title: $gettext('Extension Name'),
@@ -144,14 +135,6 @@ const loadColumns: any = [
   }
 ]
 
-const getStatus = async () => {
-  status.value = await systemctl.status(`php-fpm-${version.value}`)
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled(`php-fpm-${version.value}`)
-}
-
 const handleSetCli = async () => {
   useRequest(php.setCli(version.value)).onSuccess(() => {
     window.$message.success($gettext('Set successfully'))
@@ -182,41 +165,6 @@ const handleClearSlowLog = async () => {
   })
 }
 
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable(`php-fpm-${version.value}`)
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable(`php-fpm-${version.value}`)
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-const handleStart = async () => {
-  await systemctl.start(`php-fpm-${version.value}`)
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleStop = async () => {
-  await systemctl.stop(`php-fpm-${version.value}`)
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async () => {
-  await systemctl.restart(`php-fpm-${version.value}`)
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
-const handleReload = async () => {
-  await systemctl.reload(`php-fpm-${version.value}`)
-  window.$message.success($gettext('Reloaded successfully'))
-  await getStatus()
-}
-
 const handleInstallExtension = async (slug: string) => {
   useRequest(php.installExtension(version.value, slug)).onSuccess(() => {
     window.$message.success($gettext('Task submitted, please check progress in background tasks'))
@@ -228,11 +176,6 @@ const handleUninstallExtension = async (name: string) => {
     window.$message.success($gettext('Task submitted, please check progress in background tasks'))
   })
 }
-
-onMounted(() => {
-  getStatus()
-  getIsEnabled()
-})
 </script>
 
 <template>
@@ -280,49 +223,7 @@ onMounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-space vertical>
-          <n-card :title="$gettext('Running Status')">
-            <template #header-extra>
-              <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-                <template #checked> {{ $gettext('Autostart On') }} </template>
-                <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-              </n-switch>
-            </template>
-            <n-space vertical>
-              <n-alert :type="statusType">
-                {{ statusStr }}
-              </n-alert>
-              <n-space>
-                <n-button type="success" @click="handleStart">
-                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                  {{ $gettext('Start') }}
-                </n-button>
-                <n-popconfirm @positive-click="handleStop">
-                  <template #trigger>
-                    <n-button type="error">
-                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                      {{ $gettext('Stop') }}
-                    </n-button>
-                  </template>
-                  {{
-                    $gettext(
-                      'Stopping PHP %{ version } will cause websites using PHP %{ version } to become inaccessible. Are you sure you want to stop?',
-                      { version: version }
-                    )
-                  }}
-                </n-popconfirm>
-                <n-button type="warning" @click="handleRestart">
-                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                  {{ $gettext('Restart') }}
-                </n-button>
-                <n-button type="primary" @click="handleReload">
-                  <the-icon :size="20" icon="material-symbols:refresh-rounded" />
-                  {{ $gettext('Reload') }}
-                </n-button>
-              </n-space>
-            </n-space>
-          </n-card>
-        </n-space>
+        <service-status :service="`php-fpm-${version}`" show-reload />
       </n-tab-pane>
       <n-tab-pane name="extensions" :tab="$gettext('Extension Management')">
         <n-flex vertical>
diff --git a/web/src/views/apps/phpmyadmin/IndexView.vue b/web/src/views/apps/phpmyadmin/IndexView.vue
index afed8892..69c4a046 100644
--- a/web/src/views/apps/phpmyadmin/IndexView.vue
+++ b/web/src/views/apps/phpmyadmin/IndexView.vue
@@ -19,7 +19,7 @@ const url = computed(() => {
   return `http://${hostname.value}:${port.value}/${path.value}`
 })
 
-const { data: config } = useRequest(phpmyadmin.getConfig, {
+const { data: config } = useRequest(phpmyadmin.config, {
   initialData: {
     config: ''
   }
@@ -40,7 +40,7 @@ const handleSave = () => {
 }
 
 const handleSaveConfig = () => {
-  useRequest(phpmyadmin.saveConfig(config.value)).onSuccess(() => {
+  useRequest(phpmyadmin.updateConfig(config.value)).onSuccess(() => {
     window.$message.success($gettext('Saved successfully'))
   })
 }
diff --git a/web/src/views/apps/podman/IndexView.vue b/web/src/views/apps/podman/IndexView.vue
index ca2800ce..441c4d38 100644
--- a/web/src/views/apps/podman/IndexView.vue
+++ b/web/src/views/apps/podman/IndexView.vue
@@ -4,35 +4,22 @@ defineOptions({
 })
 
 import Editor from '@guolao/vue-monaco-editor'
-import { NButton, NPopconfirm } from 'naive-ui'
+import { NButton } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import podman from '@/api/apps/podman'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
-const registryConfig = ref('')
-const storageConfig = ref('')
 
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
+const { data: registryConfig } = useRequest(podman.registryConfig, {
+  initialData: ''
 })
 
-const getStatus = async () => {
-  status.value = await systemctl.status('podman')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled('podman')
-}
-
-const getConfig = async () => {
-  registryConfig.value = await podman.registryConfig()
-  storageConfig.value = await podman.storageConfig()
-}
+const { data: storageConfig } = useRequest(podman.storageConfig, {
+  initialData: ''
+})
 
 const handleSaveRegistryConfig = () => {
   useRequest(podman.saveRegistryConfig(registryConfig.value)).onSuccess(() => {
@@ -45,41 +32,6 @@ const handleSaveStorageConfig = () => {
     window.$message.success($gettext('Saved successfully'))
   })
 }
-
-const handleStart = async () => {
-  await systemctl.start('podman')
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleStop = async () => {
-  await systemctl.stop('podman')
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async () => {
-  await systemctl.restart('podman')
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable('podman')
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable('podman')
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-onMounted(() => {
-  getStatus()
-  getIsEnabled()
-  getConfig()
-})
 </script>
 
 <template>
@@ -114,38 +66,7 @@ onMounted(() => {
               )
             }}
           </n-alert>
-          <n-card :title="$gettext('Running Status')">
-            <template #header-extra>
-              <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-                <template #checked> {{ $gettext('Autostart On') }} </template>
-                <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-              </n-switch>
-            </template>
-            <n-space vertical>
-              <n-alert :type="status ? 'success' : 'error'">
-                {{ statusStr }}
-              </n-alert>
-              <n-space>
-                <n-button type="success" @click="handleStart">
-                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                  {{ $gettext('Start') }}
-                </n-button>
-                <n-popconfirm @positive-click="handleStop">
-                  <template #trigger>
-                    <n-button type="error">
-                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                      {{ $gettext('Stop') }}
-                    </n-button>
-                  </template>
-                  {{ $gettext('Are you sure you want to stop Podman?') }}
-                </n-popconfirm>
-                <n-button type="warning" @click="handleRestart">
-                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                  {{ $gettext('Restart') }}
-                </n-button>
-              </n-space>
-            </n-space>
-          </n-card>
+          <service-status service="podman" />
         </n-flex>
       </n-tab-pane>
       <n-tab-pane name="registryConfig" :tab="$gettext('Registry Configuration')">
diff --git a/web/src/views/apps/postgresql/IndexView.vue b/web/src/views/apps/postgresql/IndexView.vue
index d9f83586..1659a509 100644
--- a/web/src/views/apps/postgresql/IndexView.vue
+++ b/web/src/views/apps/postgresql/IndexView.vue
@@ -4,16 +4,14 @@ defineOptions({
 })
 
 import Editor from '@guolao/vue-monaco-editor'
-import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
+import { NButton, NDataTable } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import postgresql from '@/api/apps/postgresql'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
 
 const { data: log } = useRequest(postgresql.log, {
   initialData: ''
@@ -28,13 +26,6 @@ const { data: load } = useRequest(postgresql.load, {
   initialData: []
 })
 
-const statusType = computed(() => {
-  return status.value ? 'success' : 'error'
-})
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
-})
-
 const loadColumns: any = [
   {
     title: $gettext('Property'),
@@ -51,14 +42,6 @@ const loadColumns: any = [
   }
 ]
 
-const getStatus = async () => {
-  status.value = await systemctl.status('postgresql')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled('postgresql')
-}
-
 const handleSaveConfig = async () => {
   await postgresql.saveConfig(config.value)
   window.$message.success($gettext('Saved successfully'))
@@ -73,46 +56,6 @@ const handleClearLog = async () => {
   await postgresql.clearLog()
   window.$message.success($gettext('Cleared successfully'))
 }
-
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable('postgresql')
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable('postgresql')
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-const handleStart = async () => {
-  await systemctl.start('postgresql')
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleStop = async () => {
-  await systemctl.stop('postgresql')
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async () => {
-  await systemctl.restart('postgresql')
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
-const handleReload = async () => {
-  await systemctl.reload('postgresql')
-  window.$message.success($gettext('Reloaded successfully'))
-  await getStatus()
-}
-
-onMounted(() => {
-  getStatus()
-  getIsEnabled()
-})
 </script>
 
 <template>
@@ -143,48 +86,7 @@ onMounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-space vertical>
-          <n-card :title="$gettext('Running Status')">
-            <template #header-extra>
-              <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-                <template #checked> {{ $gettext('Autostart On') }} </template>
-                <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-              </n-switch>
-            </template>
-            <n-space vertical>
-              <n-alert :type="statusType">
-                {{ statusStr }}
-              </n-alert>
-              <n-space>
-                <n-button type="success" @click="handleStart">
-                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                  {{ $gettext('Start') }}
-                </n-button>
-                <n-popconfirm @positive-click="handleStop">
-                  <template #trigger>
-                    <n-button type="error">
-                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                      {{ $gettext('Stop') }}
-                    </n-button>
-                  </template>
-                  {{
-                    $gettext(
-                      'Stopping PostgreSQL will cause websites using PostgreSQL to become inaccessible. Are you sure you want to stop?'
-                    )
-                  }}
-                </n-popconfirm>
-                <n-button type="warning" @click="handleRestart">
-                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                  {{ $gettext('Restart') }}
-                </n-button>
-                <n-button type="primary" @click="handleReload">
-                  <the-icon :size="20" icon="material-symbols:refresh-rounded" />
-                  {{ $gettext('Reload') }}
-                </n-button>
-              </n-space>
-            </n-space>
-          </n-card>
-        </n-space>
+        <service-status service="postgresql" show-reload />
       </n-tab-pane>
       <n-tab-pane name="config" :tab="$gettext('Main Configuration')">
         <n-space vertical>
diff --git a/web/src/views/apps/pureftpd/IndexView.vue b/web/src/views/apps/pureftpd/IndexView.vue
index 68a5eb96..bb8d18dd 100644
--- a/web/src/views/apps/pureftpd/IndexView.vue
+++ b/web/src/views/apps/pureftpd/IndexView.vue
@@ -7,24 +7,15 @@ import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import pureftpd from '@/api/apps/pureftpd'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 import { generateRandomString, renderIcon } from '@/utils'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
 const port = ref(0)
 const addUserModal = ref(false)
 const changePasswordModal = ref(false)
 
-const statusType = computed(() => {
-  return status.value ? 'success' : 'error'
-})
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
-})
-
 const addUserModel = ref({
   username: '',
   password: generateRandomString(16),
@@ -117,14 +108,6 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   }
 )
 
-const getStatus = async () => {
-  status.value = await systemctl.status('pure-ftpd')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled('pure-ftpd')
-}
-
 const getPort = async () => {
   port.value = await pureftpd.port()
 }
@@ -135,35 +118,6 @@ const handleSavePort = async () => {
   })
 }
 
-const handleStart = async () => {
-  await systemctl.start('pure-ftpd')
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable('pure-ftpd')
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable('pure-ftpd')
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-const handleStop = async () => {
-  await systemctl.stop('pure-ftpd')
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async () => {
-  await systemctl.restart('pure-ftpd')
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
 const handleAddUser = async () => {
   useRequest(
     pureftpd.add(addUserModel.value.username, addUserModel.value.password, addUserModel.value.path)
@@ -196,8 +150,6 @@ const handleDeleteUser = async (username: string) => {
 
 onMounted(() => {
   refresh()
-  getStatus()
-  getIsEnabled()
   getPort()
 })
 </script>
@@ -221,48 +173,13 @@ onMounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-space vertical>
-          <n-card :title="$gettext('Running Status')">
-            <template #header-extra>
-              <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-                <template #checked> {{ $gettext('Autostart On') }} </template>
-                <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-              </n-switch>
-            </template>
-            <n-space vertical>
-              <n-alert :type="statusType">
-                {{ statusStr }}
-              </n-alert>
-              <n-space>
-                <n-button type="success" @click="handleStart">
-                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                  {{ $gettext('Start') }}
-                </n-button>
-                <n-popconfirm @positive-click="handleStop">
-                  <template #trigger>
-                    <n-button type="error">
-                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                      {{ $gettext('Stop') }}
-                    </n-button>
-                  </template>
-                  {{
-                    $gettext(
-                      'Stopping Pure-Ftpd will cause FTP service to be unavailable. Are you sure you want to stop it?'
-                    )
-                  }}
-                </n-popconfirm>
-                <n-button type="warning" @click="handleRestart">
-                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                  {{ $gettext('Restart') }}
-                </n-button>
-              </n-space>
-            </n-space>
-          </n-card>
+        <n-flex vertical>
+          <service-status service="pure-ftpd" />
           <n-card :title="$gettext('Port Settings')">
             <n-input-number v-model:value="port" :min="1" :max="65535" />
             {{ $gettext('Modify Pure-Ftpd listening port') }}
           </n-card>
-        </n-space>
+        </n-flex>
       </n-tab-pane>
       <n-tab-pane name="users" :tab="$gettext('User Management')">
         <n-flex vertical>
diff --git a/web/src/views/apps/redis/IndexView.vue b/web/src/views/apps/redis/IndexView.vue
index d9474a97..26186dd5 100644
--- a/web/src/views/apps/redis/IndexView.vue
+++ b/web/src/views/apps/redis/IndexView.vue
@@ -4,16 +4,14 @@ defineOptions({
 })
 
 import Editor from '@guolao/vue-monaco-editor'
-import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
+import { NButton, NDataTable } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import redis from '@/api/apps/redis'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
 
 const { data: config } = useRequest(redis.config, {
   initialData: ''
@@ -22,13 +20,6 @@ const { data: load } = useRequest(redis.load, {
   initialData: []
 })
 
-const statusType = computed(() => {
-  return status.value ? 'success' : 'error'
-})
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
-})
-
 const loadColumns: any = [
   {
     title: $gettext('Property'),
@@ -45,53 +36,11 @@ const loadColumns: any = [
   }
 ]
 
-const getStatus = async () => {
-  status.value = await systemctl.status('redis')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled('redis')
-}
-
 const handleSaveConfig = () => {
   useRequest(redis.saveConfig(config.value)).onSuccess(() => {
     window.$message.success($gettext('Saved successfully'))
   })
 }
-
-const handleStart = async () => {
-  await systemctl.start('redis')
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable('redis')
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable('redis')
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-const handleStop = async () => {
-  await systemctl.stop('redis')
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async () => {
-  await systemctl.restart('redis')
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
-onMounted(() => {
-  getStatus()
-  getIsEnabled()
-})
 </script>
 
 <template>
@@ -109,44 +58,7 @@ onMounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-space vertical>
-          <n-card :title="$gettext('Running Status')">
-            <template #header-extra>
-              <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-                <template #checked> {{ $gettext('Autostart On') }} </template>
-                <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-              </n-switch>
-            </template>
-            <n-space vertical>
-              <n-alert :type="statusType">
-                {{ statusStr }}
-              </n-alert>
-              <n-space>
-                <n-button type="success" @click="handleStart">
-                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                  {{ $gettext('Start') }}
-                </n-button>
-                <n-popconfirm @positive-click="handleStop">
-                  <template #trigger>
-                    <n-button type="error">
-                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                      {{ $gettext('Stop') }}
-                    </n-button>
-                  </template>
-                  {{
-                    $gettext(
-                      'Stopping Redis will cause websites using Redis to become inaccessible. Are you sure you want to stop?'
-                    )
-                  }}
-                </n-popconfirm>
-                <n-button type="warning" @click="handleRestart">
-                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                  {{ $gettext('Restart') }}
-                </n-button>
-              </n-space>
-            </n-space>
-          </n-card>
-        </n-space>
+        <service-status service="redis" />
       </n-tab-pane>
       <n-tab-pane name="config" :tab="$gettext('Main Configuration')">
         <n-space vertical>
diff --git a/web/src/views/apps/rsync/IndexView.vue b/web/src/views/apps/rsync/IndexView.vue
index 5dcdc5c5..9a88fb72 100644
--- a/web/src/views/apps/rsync/IndexView.vue
+++ b/web/src/views/apps/rsync/IndexView.vue
@@ -8,13 +8,11 @@ import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import rsync from '@/api/apps/rsync'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 import { generateRandomString, renderIcon } from '@/utils'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
 const config = ref('')
 
 const addModuleModal = ref(false)
@@ -37,13 +35,6 @@ const editModuleModel = ref({
   hosts_allow: ''
 })
 
-const statusType = computed(() => {
-  return status.value ? 'success' : 'error'
-})
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running normally') : $gettext('Stopped')
-})
-
 const processColumns: any = [
   {
     title: $gettext('Name'),
@@ -135,14 +126,6 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   }
 )
 
-const getStatus = async () => {
-  status.value = await systemctl.status('rsyncd')
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled('rsyncd')
-}
-
 const getConfig = async () => {
   config.value = await rsync.config()
 }
@@ -154,35 +137,6 @@ const handleSaveConfig = async () => {
   })
 }
 
-const handleStart = async () => {
-  await systemctl.start('rsyncd')
-  window.$message.success($gettext('Started successfully'))
-  await getStatus()
-}
-
-const handleIsEnabled = async () => {
-  if (isEnabled.value) {
-    await systemctl.enable('rsyncd')
-    window.$message.success($gettext('Autostart enabled successfully'))
-  } else {
-    await systemctl.disable('rsyncd')
-    window.$message.success($gettext('Autostart disabled successfully'))
-  }
-  await getIsEnabled()
-}
-
-const handleStop = async () => {
-  await systemctl.stop('rsyncd')
-  window.$message.success($gettext('Stopped successfully'))
-  await getStatus()
-}
-
-const handleRestart = async () => {
-  await systemctl.restart('rsyncd')
-  window.$message.success($gettext('Restarted successfully'))
-  await getStatus()
-}
-
 const handleModelAdd = async () => {
   useRequest(rsync.addModule(addModuleModel.value)).onSuccess(() => {
     refresh()
@@ -230,8 +184,6 @@ const handleSaveModuleConfig = async () => {
 
 onMounted(() => {
   refresh()
-  getStatus()
-  getIsEnabled()
   getConfig()
 })
 </script>
@@ -260,44 +212,7 @@ onMounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-space vertical>
-          <n-card :title="$gettext('Running Status')">
-            <template #header-extra>
-              <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-                <template #checked> {{ $gettext('Autostart On') }} </template>
-                <template #unchecked> {{ $gettext('Autostart Off') }} </template>
-              </n-switch>
-            </template>
-            <n-space vertical>
-              <n-alert :type="statusType">
-                {{ statusStr }}
-              </n-alert>
-              <n-space>
-                <n-button type="success" @click="handleStart">
-                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                  {{ $gettext('Start') }}
-                </n-button>
-                <n-popconfirm @positive-click="handleStop">
-                  <template #trigger>
-                    <n-button type="error">
-                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                      {{ $gettext('Stop') }}
-                    </n-button>
-                  </template>
-                  {{
-                    $gettext(
-                      'After stopping the Rsync service, you will not be able to use the Rsync functionality. Are you sure you want to stop?'
-                    )
-                  }}
-                </n-popconfirm>
-                <n-button type="warning" @click="handleRestart">
-                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                  {{ $gettext('Restart') }}
-                </n-button>
-              </n-space>
-            </n-space>
-          </n-card>
-        </n-space>
+        <service-status service="rsyncd" />
       </n-tab-pane>
       <n-tab-pane name="modules" :tab="$gettext('Module Management')">
         <n-flex vertical>
diff --git a/web/src/views/apps/supervisor/IndexView.vue b/web/src/views/apps/supervisor/IndexView.vue
index 0d769a12..422f5731 100644
--- a/web/src/views/apps/supervisor/IndexView.vue
+++ b/web/src/views/apps/supervisor/IndexView.vue
@@ -8,21 +8,17 @@ import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import supervisor from '@/api/apps/supervisor'
-import systemctl from '@/api/panel/systemctl'
+import ServiceStatus from '@/components/common/ServiceStatus.vue'
 import { renderIcon } from '@/utils'
 
 const { $gettext } = useGettext()
 const currentTab = ref('status')
-const status = ref(false)
-const isEnabled = ref(false)
 const processLog = ref('')
 
 const { data: serviceName } = useRequest(supervisor.service, {
-  initialData: 'supervisor'
+  initialData: ''
 }).onSuccess(() => {
   refresh()
-  getStatus()
-  getIsEnabled()
   config.value = supervisor.config()
 })
 
@@ -47,13 +43,6 @@ const editProcessModel = ref({
 
 const processLogModal = ref(false)
 
-const statusType = computed(() => {
-  return status.value ? 'success' : 'error'
-})
-const statusStr = computed(() => {
-  return status.value ? $gettext('Running') : $gettext('Stopped')
-})
-
 const processColumns: any = [
   {
     title: $gettext('Name'),
@@ -232,14 +221,6 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   }
 )
 
-const getStatus = async () => {
-  status.value = await systemctl.status(serviceName.value)
-}
-
-const getIsEnabled = async () => {
-  isEnabled.value = await systemctl.isEnabled(serviceName.value)
-}
-
 const handleSaveConfig = () => {
   useRequest(supervisor.saveConfig(config.value)).onSuccess(() => {
     refresh()
@@ -253,41 +234,6 @@ const handleClearLog = () => {
   })
 }
 
-const handleIsEnabled = () => {
-  if (isEnabled.value) {
-    useRequest(systemctl.enable(serviceName.value)).onSuccess(() => {
-      getIsEnabled()
-      window.$message.success($gettext('Autostart enabled successfully'))
-    })
-  } else {
-    useRequest(systemctl.disable(serviceName.value)).onSuccess(() => {
-      getIsEnabled()
-      window.$message.success($gettext('Autostart disabled successfully'))
-    })
-  }
-}
-
-const handleStart = () => {
-  useRequest(systemctl.start(serviceName.value)).onSuccess(() => {
-    getStatus()
-    window.$message.success($gettext('Started successfully'))
-  })
-}
-
-const handleStop = () => {
-  useRequest(systemctl.stop(serviceName.value)).onSuccess(() => {
-    getStatus()
-    window.$message.success($gettext('Stopped successfully'))
-  })
-}
-
-const handleRestart = () => {
-  useRequest(systemctl.restart(serviceName.value)).onSuccess(() => {
-    getStatus()
-    window.$message.success($gettext('Restarted successfully'))
-  })
-}
-
 const handleCreateProcess = () => {
   useRequest(supervisor.createProcess(createProcessModel.value)).onSuccess(() => {
     refresh()
@@ -382,44 +328,7 @@ onUnmounted(() => {
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated>
       <n-tab-pane name="status" :tab="$gettext('Running Status')">
-        <n-space vertical>
-          <n-card :title="$gettext('Running Status')">
-            <template #header-extra>
-              <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
-                <template #checked>{{ $gettext('Autostart On') }}</template>
-                <template #unchecked>{{ $gettext('Autostart Off') }}</template>
-              </n-switch>
-            </template>
-            <n-space vertical>
-              <n-alert :type="statusType">
-                {{ statusStr }}
-              </n-alert>
-              <n-space>
-                <n-button type="success" @click="handleStart">
-                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
-                  {{ $gettext('Start') }}
-                </n-button>
-                <n-popconfirm @positive-click="handleStop">
-                  <template #trigger>
-                    <n-button type="error">
-                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
-                      {{ $gettext('Stop') }}
-                    </n-button>
-                  </template>
-                  {{
-                    $gettext(
-                      'Stopping Supervisor will cause all processes managed by Supervisor to be killed. Are you sure you want to stop?'
-                    )
-                  }}
-                </n-popconfirm>
-                <n-button type="warning" @click="handleRestart">
-                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
-                  {{ $gettext('Restart') }}
-                </n-button>
-              </n-space>
-            </n-space>
-          </n-card>
-        </n-space>
+        <service-status v-if="serviceName != ''" :service="serviceName" />
       </n-tab-pane>
       <n-tab-pane name="processes" :tab="$gettext('Process Management')">
         <n-flex vertical>