From 7f301cec583c2ff8994981b0a94b952454ee1858 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <i@haozi.net>
Date: Sat, 19 Oct 2024 20:47:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=9B=BA=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/app/IndexView.vue               |   4 +
 web/src/views/apps/fail2ban/IndexView.vue     |   4 +
 web/src/views/apps/frp/IndexView.vue          |   4 +
 web/src/views/apps/gitea/IndexView.vue        |   4 +
 web/src/views/apps/mysql/IndexView.vue        |   4 +
 web/src/views/apps/nginx/IndexView.vue        |   4 +
 .../views/apps/{php => php81}/IndexView.vue   |   7 +-
 web/src/views/apps/php81/route.ts             |   5 +-
 web/src/views/apps/php82/IndexView.vue        | 428 ++++++++++++++++++
 web/src/views/apps/php82/route.ts             |   5 +-
 web/src/views/apps/php83/IndexView.vue        | 428 ++++++++++++++++++
 web/src/views/apps/php83/route.ts             |   5 +-
 web/src/views/apps/phpmyadmin/IndexView.vue   |   4 +
 web/src/views/apps/podman/IndexView.vue       |   4 +
 web/src/views/apps/postgresql/IndexView.vue   |   4 +
 web/src/views/apps/pureftpd/IndexView.vue     |   4 +
 web/src/views/apps/redis/IndexView.vue        |   4 +
 web/src/views/apps/rsync/IndexView.vue        |   4 +
 web/src/views/apps/s3fs/IndexView.vue         |   4 +
 web/src/views/apps/supervisor/IndexView.vue   |   4 +
 web/src/views/apps/toolbox/IndexView.vue      |   4 +
 web/src/views/backup/IndexView.vue            |   4 +
 web/src/views/cert/IndexView.vue              |   4 +
 web/src/views/container/IndexView.vue         |   4 +
 web/src/views/cron/IndexView.vue              |   4 +
 web/src/views/file/IndexView.vue              |   4 +
 web/src/views/home/IndexView.vue              |   4 +
 web/src/views/home/UpdateView.vue             |   4 +
 web/src/views/monitor/IndexView.vue           |   4 +
 web/src/views/safe/IndexView.vue              |   4 +
 web/src/views/setting/IndexView.vue           |   4 +
 web/src/views/ssh/IndexView.vue               |   4 +
 web/src/views/task/IndexView.vue              |   4 +
 web/src/views/website/IndexView.vue           |   4 +
 34 files changed, 979 insertions(+), 11 deletions(-)
 rename web/src/views/apps/{php => php81}/IndexView.vue (99%)
 create mode 100644 web/src/views/apps/php82/IndexView.vue
 create mode 100644 web/src/views/apps/php83/IndexView.vue

diff --git a/web/src/views/app/IndexView.vue b/web/src/views/app/IndexView.vue
index fec3f0c170..b8582b5d11 100644
--- a/web/src/views/app/IndexView.vue
+++ b/web/src/views/app/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'app-index'
+})
+
 import VersionModal from '@/views/app/VersionModal.vue'
 
 import { NButton, NDataTable, NPopconfirm, NSwitch } from 'naive-ui'
diff --git a/web/src/views/apps/fail2ban/IndexView.vue b/web/src/views/apps/fail2ban/IndexView.vue
index 648ea21566..1f8af87478 100644
--- a/web/src/views/apps/fail2ban/IndexView.vue
+++ b/web/src/views/apps/fail2ban/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-fail2ban-index'
+})
+
 import { NButton, NDataTable, NInput, NPopconfirm, NSwitch } from 'naive-ui'
 
 import fail2ban from '@/api/apps/fail2ban'
diff --git a/web/src/views/apps/frp/IndexView.vue b/web/src/views/apps/frp/IndexView.vue
index c47b525d03..dc5d6f0126 100644
--- a/web/src/views/apps/frp/IndexView.vue
+++ b/web/src/views/apps/frp/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-frp-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton, NPopconfirm } from 'naive-ui'
 
diff --git a/web/src/views/apps/gitea/IndexView.vue b/web/src/views/apps/gitea/IndexView.vue
index 995b047181..60fb595f63 100644
--- a/web/src/views/apps/gitea/IndexView.vue
+++ b/web/src/views/apps/gitea/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-gitea-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton, NPopconfirm } from 'naive-ui'
 
diff --git a/web/src/views/apps/mysql/IndexView.vue b/web/src/views/apps/mysql/IndexView.vue
index 3bf7a8297e..202f0de841 100644
--- a/web/src/views/apps/mysql/IndexView.vue
+++ b/web/src/views/apps/mysql/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-mysql-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
 
diff --git a/web/src/views/apps/nginx/IndexView.vue b/web/src/views/apps/nginx/IndexView.vue
index 92b514eb3f..3dce3a7780 100644
--- a/web/src/views/apps/nginx/IndexView.vue
+++ b/web/src/views/apps/nginx/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-nginx-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
 
diff --git a/web/src/views/apps/php/IndexView.vue b/web/src/views/apps/php81/IndexView.vue
similarity index 99%
rename from web/src/views/apps/php/IndexView.vue
rename to web/src/views/apps/php81/IndexView.vue
index a47a1ab909..6686aeb009 100644
--- a/web/src/views/apps/php/IndexView.vue
+++ b/web/src/views/apps/php81/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-php81-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
 
@@ -6,9 +10,8 @@ import php from '@/api/apps/php'
 import systemctl from '@/api/panel/systemctl'
 import { renderIcon } from '@/utils'
 
-const route = useRoute()
 const currentTab = ref('status')
-const version = Number(route.meta.php)
+const version = Number(81)
 const status = ref(false)
 const isEnabled = ref(false)
 const config = ref('')
diff --git a/web/src/views/apps/php81/route.ts b/web/src/views/apps/php81/route.ts
index 4e1aab8847..06d51c5224 100644
--- a/web/src/views/apps/php81/route.ts
+++ b/web/src/views/apps/php81/route.ts
@@ -11,13 +11,12 @@ export default {
     {
       name: 'apps-php81-index',
       path: '',
-      component: () => import('../php/IndexView.vue'),
+      component: () => import('./IndexView.vue'),
       meta: {
         title: 'PHP 8.1',
         icon: 'logos:php',
         role: ['admin'],
-        requireAuth: true,
-        php: 81
+        requireAuth: true
       }
     }
   ]
diff --git a/web/src/views/apps/php82/IndexView.vue b/web/src/views/apps/php82/IndexView.vue
new file mode 100644
index 0000000000..8c185ef64e
--- /dev/null
+++ b/web/src/views/apps/php82/IndexView.vue
@@ -0,0 +1,428 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'apps-php82-index'
+})
+
+import Editor from '@guolao/vue-monaco-editor'
+import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
+
+import php from '@/api/apps/php'
+import systemctl from '@/api/panel/systemctl'
+import { renderIcon } from '@/utils'
+
+const currentTab = ref('status')
+const version = Number(82)
+const status = ref(false)
+const isEnabled = ref(false)
+const config = ref('')
+const fpmConfig = ref('')
+const errorLog = ref('')
+const slowLog = ref('')
+
+const statusType = computed(() => {
+  return status.value ? 'success' : 'error'
+})
+const statusStr = computed(() => {
+  return status.value ? '正常运行中' : '已停止运行'
+})
+
+const extensionColumns: any = [
+  {
+    title: '拓展名',
+    key: 'name',
+    minWidth: 250,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '描述',
+    key: 'description',
+    resizable: true,
+    minWidth: 250,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 240,
+    align: 'center',
+    hideInExcel: true,
+    render(row: any) {
+      return [
+        !row.installed
+          ? h(
+              NButton,
+              {
+                size: 'small',
+                type: 'primary',
+                secondary: true,
+                onClick: () => handleInstallExtension(row.slug)
+              },
+              {
+                default: () => '安装',
+                icon: renderIcon('material-symbols:download-rounded', { size: 14 })
+              }
+            )
+          : null,
+        row.installed
+          ? h(
+              NPopconfirm,
+              {
+                onPositiveClick: () => handleUninstallExtension(row.slug)
+              },
+              {
+                default: () => {
+                  return '确定卸载' + row.name + '吗？'
+                },
+                trigger: () => {
+                  return h(
+                    NButton,
+                    {
+                      size: 'small',
+                      type: 'error'
+                    },
+                    {
+                      default: () => '删除',
+                      icon: renderIcon('material-symbols:delete-outline', { size: 14 })
+                    }
+                  )
+                }
+              }
+            )
+          : null
+      ]
+    }
+  }
+]
+
+const loadColumns: any = [
+  {
+    title: '属性',
+    key: 'name',
+    minWidth: 200,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '当前值',
+    key: 'value',
+    minWidth: 200,
+    ellipsis: { tooltip: true }
+  }
+]
+
+const extensions = ref<any[]>([])
+const load = ref<any[]>([])
+
+const getLoad = async () => {
+  const { data } = await php.load(version)
+  return data
+}
+
+const getExtensions = async () => {
+  const { data } = await php.extensions(version)
+  return data
+}
+
+const getStatus = async () => {
+  await systemctl.status(`php-fpm-${version}`).then((res: any) => {
+    status.value = res.data
+  })
+}
+
+const getIsEnabled = async () => {
+  await systemctl.isEnabled(`php-fpm-${version}`).then((res: any) => {
+    isEnabled.value = res.data
+  })
+}
+
+const getErrorLog = async () => {
+  php.errorLog(version).then((res: any) => {
+    errorLog.value = res.data
+  })
+}
+
+const getSlowLog = async () => {
+  php.slowLog(version).then((res: any) => {
+    slowLog.value = res.data
+  })
+}
+
+const getConfig = async () => {
+  php.config(version).then((res: any) => {
+    config.value = res.data
+  })
+}
+
+const getFPMConfig = async () => {
+  php.fpmConfig(version).then((res: any) => {
+    fpmConfig.value = res.data
+  })
+}
+
+const handleSaveConfig = async () => {
+  await php.saveConfig(version, config.value)
+  window.$message.success('保存成功')
+  await getErrorLog()
+}
+
+const handleSaveFPMConfig = async () => {
+  await php.saveFPMConfig(version, fpmConfig.value)
+  window.$message.success('保存成功')
+  await getFPMConfig()
+}
+
+const handleClearErrorLog = async () => {
+  await php.clearErrorLog(version)
+  await getErrorLog()
+  window.$message.success('清空成功')
+}
+
+const handleClearSlowLog = async () => {
+  await php.clearSlowLog(version)
+  await getSlowLog()
+  window.$message.success('清空成功')
+}
+
+const handleIsEnabled = async () => {
+  if (isEnabled.value) {
+    await systemctl.enable(`php-fpm-${version}`)
+    window.$message.success('开启自启动成功')
+  } else {
+    await systemctl.disable(`php-fpm-${version}`)
+    window.$message.success('禁用自启动成功')
+  }
+  await getIsEnabled()
+}
+
+const handleStart = async () => {
+  await systemctl.start(`php-fpm-${version}`)
+  window.$message.success('启动成功')
+  await getStatus()
+  await getErrorLog()
+}
+
+const handleStop = async () => {
+  await systemctl.stop(`php-fpm-${version}`)
+  window.$message.success('停止成功')
+  await getStatus()
+  await getErrorLog()
+}
+
+const handleRestart = async () => {
+  await systemctl.restart(`php-fpm-${version}`)
+  window.$message.success('重启成功')
+  await getStatus()
+  await getErrorLog()
+}
+
+const handleReload = async () => {
+  await systemctl.reload(`php-fpm-${version}`)
+  window.$message.success('重载成功')
+  await getStatus()
+  await getErrorLog()
+}
+
+const handleInstallExtension = async (slug: string) => {
+  await php.installExtension(version, slug).then(() => {
+    window.$message.success('任务已提交，请稍后查看任务进度')
+  })
+}
+
+const handleUninstallExtension = async (name: string) => {
+  await php.uninstallExtension(version, name).then(() => {
+    window.$message.success('任务已提交，请稍后查看任务进度')
+  })
+}
+
+onMounted(() => {
+  getStatus()
+  getIsEnabled()
+  getExtensions().then((res) => {
+    extensions.value = res
+  })
+  getLoad().then((res) => {
+    load.value = res
+  })
+  getErrorLog()
+  getSlowLog()
+  getConfig()
+  getFPMConfig()
+})
+</script>
+
+<template>
+  <common-page show-footer>
+    <template #action>
+      <n-button
+        v-if="currentTab == 'config'"
+        class="ml-16"
+        type="primary"
+        @click="handleSaveConfig"
+      >
+        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        保存
+      </n-button>
+      <n-button
+        v-if="currentTab == 'fpm-config'"
+        class="ml-16"
+        type="primary"
+        @click="handleSaveFPMConfig"
+      >
+        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        保存
+      </n-button>
+      <n-button
+        v-if="currentTab == 'error-log'"
+        class="ml-16"
+        type="primary"
+        @click="handleClearErrorLog"
+      >
+        <TheIcon :size="18" icon="material-symbols:delete-outline" />
+        清空错误日志
+      </n-button>
+      <n-button
+        v-if="currentTab == 'slow-log'"
+        class="ml-16"
+        type="primary"
+        @click="handleClearSlowLog"
+      >
+        <TheIcon :size="18" icon="material-symbols:delete-outline" />
+        清空慢日志
+      </n-button>
+    </template>
+    <n-tabs v-model:value="currentTab" type="line" animated>
+      <n-tab-pane name="status" tab="运行状态">
+        <n-space vertical>
+          <n-card title="运行状态" rounded-10>
+            <template #header-extra>
+              <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
+                <template #checked> 自启动开 </template>
+                <template #unchecked> 自启动关 </template>
+              </n-switch>
+            </template>
+            <n-space vertical>
+              <n-alert :type="statusType">
+                {{ statusStr }}
+              </n-alert>
+              <n-space>
+                <n-button type="success" @click="handleStart">
+                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  启动
+                </n-button>
+                <n-popconfirm @positive-click="handleStop">
+                  <template #trigger>
+                    <n-button type="error">
+                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      停止
+                    </n-button>
+                  </template>
+                  停止 PHP {{ version }} 会导致使用 PHP {{ version }} 的网站无法访问，确定要停止吗？
+                </n-popconfirm>
+                <n-button type="warning" @click="handleRestart">
+                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  重启
+                </n-button>
+                <n-button type="primary" @click="handleReload">
+                  <TheIcon :size="20" icon="material-symbols:refresh-rounded" />
+                  重载
+                </n-button>
+              </n-space>
+            </n-space>
+          </n-card>
+        </n-space>
+      </n-tab-pane>
+      <n-tab-pane name="extensions" tab="拓展管理">
+        <n-card title="拓展列表" :segmented="true" rounded-10>
+          <n-data-table
+            striped
+            remote
+            :scroll-x="1000"
+            :loading="false"
+            :columns="extensionColumns"
+            :data="extensions"
+            :row-key="(row: any) => row.slug"
+          />
+        </n-card>
+      </n-tab-pane>
+      <n-tab-pane name="config" tab="主配置">
+        <n-space vertical>
+          <n-alert type="warning">
+            此处修改的是 PHP {{ version }} 主配置文件，如果您不了解各参数的含义，请不要随意修改！
+          </n-alert>
+          <Editor
+            v-model:value="config"
+            language="ini"
+            theme="vs-dark"
+            height="60vh"
+            mt-8
+            :options="{
+              automaticLayout: true,
+              formatOnType: true,
+              formatOnPaste: true
+            }"
+          />
+        </n-space>
+      </n-tab-pane>
+      <n-tab-pane name="fpm-config" tab="FPM 配置">
+        <n-space vertical>
+          <n-alert type="warning">
+            此处修改的是 PHP {{ version }} FPM 配置文件，如果您不了解各参数的含义，请不要随意修改！
+          </n-alert>
+          <Editor
+            v-model:value="fpmConfig"
+            language="ini"
+            theme="vs-dark"
+            height="60vh"
+            mt-8
+            :options="{
+              automaticLayout: true,
+              formatOnType: true,
+              formatOnPaste: true
+            }"
+          />
+        </n-space>
+      </n-tab-pane>
+      <n-tab-pane name="load" tab="负载状态">
+        <n-data-table
+          striped
+          remote
+          :scroll-x="400"
+          :loading="false"
+          :columns="loadColumns"
+          :data="load"
+        />
+      </n-tab-pane>
+      <n-tab-pane name="error-log" tab="错误日志">
+        <Editor
+          v-model:value="errorLog"
+          language="ini"
+          theme="vs-dark"
+          height="60vh"
+          mt-8
+          :options="{
+            automaticLayout: true,
+            formatOnType: true,
+            formatOnPaste: true,
+            readOnly: true
+          }"
+        />
+      </n-tab-pane>
+      <n-tab-pane name="slow-log" tab="慢日志">
+        <Editor
+          v-model:value="slowLog"
+          language="ini"
+          theme="vs-dark"
+          height="60vh"
+          mt-8
+          :options="{
+            automaticLayout: true,
+            formatOnType: true,
+            formatOnPaste: true,
+            readOnly: true
+          }"
+        />
+      </n-tab-pane>
+    </n-tabs>
+  </common-page>
+</template>
diff --git a/web/src/views/apps/php82/route.ts b/web/src/views/apps/php82/route.ts
index 1dac38d0be..151ad33f6a 100644
--- a/web/src/views/apps/php82/route.ts
+++ b/web/src/views/apps/php82/route.ts
@@ -11,13 +11,12 @@ export default {
     {
       name: 'apps-php82-index',
       path: '',
-      component: () => import('../php/IndexView.vue'),
+      component: () => import('./IndexView.vue'),
       meta: {
         title: 'PHP 8.2',
         icon: 'logos:php',
         role: ['admin'],
-        requireAuth: true,
-        php: 82
+        requireAuth: true
       }
     }
   ]
diff --git a/web/src/views/apps/php83/IndexView.vue b/web/src/views/apps/php83/IndexView.vue
new file mode 100644
index 0000000000..951c380b1e
--- /dev/null
+++ b/web/src/views/apps/php83/IndexView.vue
@@ -0,0 +1,428 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'apps-php83-index'
+})
+
+import Editor from '@guolao/vue-monaco-editor'
+import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
+
+import php from '@/api/apps/php'
+import systemctl from '@/api/panel/systemctl'
+import { renderIcon } from '@/utils'
+
+const currentTab = ref('status')
+const version = Number(83)
+const status = ref(false)
+const isEnabled = ref(false)
+const config = ref('')
+const fpmConfig = ref('')
+const errorLog = ref('')
+const slowLog = ref('')
+
+const statusType = computed(() => {
+  return status.value ? 'success' : 'error'
+})
+const statusStr = computed(() => {
+  return status.value ? '正常运行中' : '已停止运行'
+})
+
+const extensionColumns: any = [
+  {
+    title: '拓展名',
+    key: 'name',
+    minWidth: 250,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '描述',
+    key: 'description',
+    resizable: true,
+    minWidth: 250,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 240,
+    align: 'center',
+    hideInExcel: true,
+    render(row: any) {
+      return [
+        !row.installed
+          ? h(
+              NButton,
+              {
+                size: 'small',
+                type: 'primary',
+                secondary: true,
+                onClick: () => handleInstallExtension(row.slug)
+              },
+              {
+                default: () => '安装',
+                icon: renderIcon('material-symbols:download-rounded', { size: 14 })
+              }
+            )
+          : null,
+        row.installed
+          ? h(
+              NPopconfirm,
+              {
+                onPositiveClick: () => handleUninstallExtension(row.slug)
+              },
+              {
+                default: () => {
+                  return '确定卸载' + row.name + '吗？'
+                },
+                trigger: () => {
+                  return h(
+                    NButton,
+                    {
+                      size: 'small',
+                      type: 'error'
+                    },
+                    {
+                      default: () => '删除',
+                      icon: renderIcon('material-symbols:delete-outline', { size: 14 })
+                    }
+                  )
+                }
+              }
+            )
+          : null
+      ]
+    }
+  }
+]
+
+const loadColumns: any = [
+  {
+    title: '属性',
+    key: 'name',
+    minWidth: 200,
+    resizable: true,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '当前值',
+    key: 'value',
+    minWidth: 200,
+    ellipsis: { tooltip: true }
+  }
+]
+
+const extensions = ref<any[]>([])
+const load = ref<any[]>([])
+
+const getLoad = async () => {
+  const { data } = await php.load(version)
+  return data
+}
+
+const getExtensions = async () => {
+  const { data } = await php.extensions(version)
+  return data
+}
+
+const getStatus = async () => {
+  await systemctl.status(`php-fpm-${version}`).then((res: any) => {
+    status.value = res.data
+  })
+}
+
+const getIsEnabled = async () => {
+  await systemctl.isEnabled(`php-fpm-${version}`).then((res: any) => {
+    isEnabled.value = res.data
+  })
+}
+
+const getErrorLog = async () => {
+  php.errorLog(version).then((res: any) => {
+    errorLog.value = res.data
+  })
+}
+
+const getSlowLog = async () => {
+  php.slowLog(version).then((res: any) => {
+    slowLog.value = res.data
+  })
+}
+
+const getConfig = async () => {
+  php.config(version).then((res: any) => {
+    config.value = res.data
+  })
+}
+
+const getFPMConfig = async () => {
+  php.fpmConfig(version).then((res: any) => {
+    fpmConfig.value = res.data
+  })
+}
+
+const handleSaveConfig = async () => {
+  await php.saveConfig(version, config.value)
+  window.$message.success('保存成功')
+  await getErrorLog()
+}
+
+const handleSaveFPMConfig = async () => {
+  await php.saveFPMConfig(version, fpmConfig.value)
+  window.$message.success('保存成功')
+  await getFPMConfig()
+}
+
+const handleClearErrorLog = async () => {
+  await php.clearErrorLog(version)
+  await getErrorLog()
+  window.$message.success('清空成功')
+}
+
+const handleClearSlowLog = async () => {
+  await php.clearSlowLog(version)
+  await getSlowLog()
+  window.$message.success('清空成功')
+}
+
+const handleIsEnabled = async () => {
+  if (isEnabled.value) {
+    await systemctl.enable(`php-fpm-${version}`)
+    window.$message.success('开启自启动成功')
+  } else {
+    await systemctl.disable(`php-fpm-${version}`)
+    window.$message.success('禁用自启动成功')
+  }
+  await getIsEnabled()
+}
+
+const handleStart = async () => {
+  await systemctl.start(`php-fpm-${version}`)
+  window.$message.success('启动成功')
+  await getStatus()
+  await getErrorLog()
+}
+
+const handleStop = async () => {
+  await systemctl.stop(`php-fpm-${version}`)
+  window.$message.success('停止成功')
+  await getStatus()
+  await getErrorLog()
+}
+
+const handleRestart = async () => {
+  await systemctl.restart(`php-fpm-${version}`)
+  window.$message.success('重启成功')
+  await getStatus()
+  await getErrorLog()
+}
+
+const handleReload = async () => {
+  await systemctl.reload(`php-fpm-${version}`)
+  window.$message.success('重载成功')
+  await getStatus()
+  await getErrorLog()
+}
+
+const handleInstallExtension = async (slug: string) => {
+  await php.installExtension(version, slug).then(() => {
+    window.$message.success('任务已提交，请稍后查看任务进度')
+  })
+}
+
+const handleUninstallExtension = async (name: string) => {
+  await php.uninstallExtension(version, name).then(() => {
+    window.$message.success('任务已提交，请稍后查看任务进度')
+  })
+}
+
+onMounted(() => {
+  getStatus()
+  getIsEnabled()
+  getExtensions().then((res) => {
+    extensions.value = res
+  })
+  getLoad().then((res) => {
+    load.value = res
+  })
+  getErrorLog()
+  getSlowLog()
+  getConfig()
+  getFPMConfig()
+})
+</script>
+
+<template>
+  <common-page show-footer>
+    <template #action>
+      <n-button
+        v-if="currentTab == 'config'"
+        class="ml-16"
+        type="primary"
+        @click="handleSaveConfig"
+      >
+        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        保存
+      </n-button>
+      <n-button
+        v-if="currentTab == 'fpm-config'"
+        class="ml-16"
+        type="primary"
+        @click="handleSaveFPMConfig"
+      >
+        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        保存
+      </n-button>
+      <n-button
+        v-if="currentTab == 'error-log'"
+        class="ml-16"
+        type="primary"
+        @click="handleClearErrorLog"
+      >
+        <TheIcon :size="18" icon="material-symbols:delete-outline" />
+        清空错误日志
+      </n-button>
+      <n-button
+        v-if="currentTab == 'slow-log'"
+        class="ml-16"
+        type="primary"
+        @click="handleClearSlowLog"
+      >
+        <TheIcon :size="18" icon="material-symbols:delete-outline" />
+        清空慢日志
+      </n-button>
+    </template>
+    <n-tabs v-model:value="currentTab" type="line" animated>
+      <n-tab-pane name="status" tab="运行状态">
+        <n-space vertical>
+          <n-card title="运行状态" rounded-10>
+            <template #header-extra>
+              <n-switch v-model:value="isEnabled" @update:value="handleIsEnabled">
+                <template #checked> 自启动开 </template>
+                <template #unchecked> 自启动关 </template>
+              </n-switch>
+            </template>
+            <n-space vertical>
+              <n-alert :type="statusType">
+                {{ statusStr }}
+              </n-alert>
+              <n-space>
+                <n-button type="success" @click="handleStart">
+                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  启动
+                </n-button>
+                <n-popconfirm @positive-click="handleStop">
+                  <template #trigger>
+                    <n-button type="error">
+                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      停止
+                    </n-button>
+                  </template>
+                  停止 PHP {{ version }} 会导致使用 PHP {{ version }} 的网站无法访问，确定要停止吗？
+                </n-popconfirm>
+                <n-button type="warning" @click="handleRestart">
+                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  重启
+                </n-button>
+                <n-button type="primary" @click="handleReload">
+                  <TheIcon :size="20" icon="material-symbols:refresh-rounded" />
+                  重载
+                </n-button>
+              </n-space>
+            </n-space>
+          </n-card>
+        </n-space>
+      </n-tab-pane>
+      <n-tab-pane name="extensions" tab="拓展管理">
+        <n-card title="拓展列表" :segmented="true" rounded-10>
+          <n-data-table
+            striped
+            remote
+            :scroll-x="1000"
+            :loading="false"
+            :columns="extensionColumns"
+            :data="extensions"
+            :row-key="(row: any) => row.slug"
+          />
+        </n-card>
+      </n-tab-pane>
+      <n-tab-pane name="config" tab="主配置">
+        <n-space vertical>
+          <n-alert type="warning">
+            此处修改的是 PHP {{ version }} 主配置文件，如果您不了解各参数的含义，请不要随意修改！
+          </n-alert>
+          <Editor
+            v-model:value="config"
+            language="ini"
+            theme="vs-dark"
+            height="60vh"
+            mt-8
+            :options="{
+              automaticLayout: true,
+              formatOnType: true,
+              formatOnPaste: true
+            }"
+          />
+        </n-space>
+      </n-tab-pane>
+      <n-tab-pane name="fpm-config" tab="FPM 配置">
+        <n-space vertical>
+          <n-alert type="warning">
+            此处修改的是 PHP {{ version }} FPM 配置文件，如果您不了解各参数的含义，请不要随意修改！
+          </n-alert>
+          <Editor
+            v-model:value="fpmConfig"
+            language="ini"
+            theme="vs-dark"
+            height="60vh"
+            mt-8
+            :options="{
+              automaticLayout: true,
+              formatOnType: true,
+              formatOnPaste: true
+            }"
+          />
+        </n-space>
+      </n-tab-pane>
+      <n-tab-pane name="load" tab="负载状态">
+        <n-data-table
+          striped
+          remote
+          :scroll-x="400"
+          :loading="false"
+          :columns="loadColumns"
+          :data="load"
+        />
+      </n-tab-pane>
+      <n-tab-pane name="error-log" tab="错误日志">
+        <Editor
+          v-model:value="errorLog"
+          language="ini"
+          theme="vs-dark"
+          height="60vh"
+          mt-8
+          :options="{
+            automaticLayout: true,
+            formatOnType: true,
+            formatOnPaste: true,
+            readOnly: true
+          }"
+        />
+      </n-tab-pane>
+      <n-tab-pane name="slow-log" tab="慢日志">
+        <Editor
+          v-model:value="slowLog"
+          language="ini"
+          theme="vs-dark"
+          height="60vh"
+          mt-8
+          :options="{
+            automaticLayout: true,
+            formatOnType: true,
+            formatOnPaste: true,
+            readOnly: true
+          }"
+        />
+      </n-tab-pane>
+    </n-tabs>
+  </common-page>
+</template>
diff --git a/web/src/views/apps/php83/route.ts b/web/src/views/apps/php83/route.ts
index e4f3e43c62..795a0dc3a5 100644
--- a/web/src/views/apps/php83/route.ts
+++ b/web/src/views/apps/php83/route.ts
@@ -11,13 +11,12 @@ export default {
     {
       name: 'apps-php83-index',
       path: '',
-      component: () => import('../php/IndexView.vue'),
+      component: () => import('./IndexView.vue'),
       meta: {
         title: 'PHP 8.3',
         icon: 'logos:php',
         role: ['admin'],
-        requireAuth: true,
-        php: 83
+        requireAuth: true
       }
     }
   ]
diff --git a/web/src/views/apps/phpmyadmin/IndexView.vue b/web/src/views/apps/phpmyadmin/IndexView.vue
index 7f9c9d07a7..0829f386f5 100644
--- a/web/src/views/apps/phpmyadmin/IndexView.vue
+++ b/web/src/views/apps/phpmyadmin/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-phpmyadmin-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton } from 'naive-ui'
 
diff --git a/web/src/views/apps/podman/IndexView.vue b/web/src/views/apps/podman/IndexView.vue
index 832e071167..ac79cc493e 100644
--- a/web/src/views/apps/podman/IndexView.vue
+++ b/web/src/views/apps/podman/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-podman-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton, NPopconfirm } from 'naive-ui'
 
diff --git a/web/src/views/apps/postgresql/IndexView.vue b/web/src/views/apps/postgresql/IndexView.vue
index 69ebf95f95..3dbd1d45f7 100644
--- a/web/src/views/apps/postgresql/IndexView.vue
+++ b/web/src/views/apps/postgresql/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-postgresql-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
 
diff --git a/web/src/views/apps/pureftpd/IndexView.vue b/web/src/views/apps/pureftpd/IndexView.vue
index f8f638e169..0f92d9f9f6 100644
--- a/web/src/views/apps/pureftpd/IndexView.vue
+++ b/web/src/views/apps/pureftpd/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-pureftpd-index'
+})
+
 import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
 
 import pureftpd from '@/api/apps/pureftpd'
diff --git a/web/src/views/apps/redis/IndexView.vue b/web/src/views/apps/redis/IndexView.vue
index 585dba92be..eb108a569a 100644
--- a/web/src/views/apps/redis/IndexView.vue
+++ b/web/src/views/apps/redis/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-redis-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
 
diff --git a/web/src/views/apps/rsync/IndexView.vue b/web/src/views/apps/rsync/IndexView.vue
index e582b7ac55..6e1bb15a12 100644
--- a/web/src/views/apps/rsync/IndexView.vue
+++ b/web/src/views/apps/rsync/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-rsync-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
 
diff --git a/web/src/views/apps/s3fs/IndexView.vue b/web/src/views/apps/s3fs/IndexView.vue
index a14d4d15e9..c1af140451 100644
--- a/web/src/views/apps/s3fs/IndexView.vue
+++ b/web/src/views/apps/s3fs/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-s3fs-index'
+})
+
 import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
 
 import s3fs from '@/api/apps/s3fs'
diff --git a/web/src/views/apps/supervisor/IndexView.vue b/web/src/views/apps/supervisor/IndexView.vue
index e54838d153..fed7525ec3 100644
--- a/web/src/views/apps/supervisor/IndexView.vue
+++ b/web/src/views/apps/supervisor/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-supervisor-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
 
diff --git a/web/src/views/apps/toolbox/IndexView.vue b/web/src/views/apps/toolbox/IndexView.vue
index 1616981139..fbb1f8e0fe 100644
--- a/web/src/views/apps/toolbox/IndexView.vue
+++ b/web/src/views/apps/toolbox/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'apps-toolbox-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { DateTime } from 'luxon'
 import { NButton } from 'naive-ui'
diff --git a/web/src/views/backup/IndexView.vue b/web/src/views/backup/IndexView.vue
index 131ab06693..a5733c6d19 100644
--- a/web/src/views/backup/IndexView.vue
+++ b/web/src/views/backup/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'backup-index'
+})
+
 import backup from '@/api/panel/backup'
 import ListView from '@/views/backup/ListView.vue'
 import { NButton, NInput } from 'naive-ui'
diff --git a/web/src/views/cert/IndexView.vue b/web/src/views/cert/IndexView.vue
index 6c6d9a3174..cd3e0496cc 100644
--- a/web/src/views/cert/IndexView.vue
+++ b/web/src/views/cert/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'cert-index'
+})
+
 import AccountView from '@/views/cert/AccountView.vue'
 import CertView from '@/views/cert/CertView.vue'
 import DnsView from '@/views/cert/DnsView.vue'
diff --git a/web/src/views/container/IndexView.vue b/web/src/views/container/IndexView.vue
index 7d6b56fe7a..d9798fa55b 100644
--- a/web/src/views/container/IndexView.vue
+++ b/web/src/views/container/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'container-index'
+})
+
 import ContainerView from '@/views/container/ContainerView.vue'
 import ImageView from '@/views/container/ImageView.vue'
 import NetworkView from '@/views/container/NetworkView.vue'
diff --git a/web/src/views/cron/IndexView.vue b/web/src/views/cron/IndexView.vue
index b6b8473068..11daf9e383 100644
--- a/web/src/views/cron/IndexView.vue
+++ b/web/src/views/cron/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'cron-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton, NDataTable, NInput, NPopconfirm, NSwitch } from 'naive-ui'
 
diff --git a/web/src/views/file/IndexView.vue b/web/src/views/file/IndexView.vue
index 20c2ada76b..011ca881e8 100644
--- a/web/src/views/file/IndexView.vue
+++ b/web/src/views/file/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'file-index'
+})
+
 import CompressModal from '@/views/file/CompressModal.vue'
 import ListTable from '@/views/file/ListTable.vue'
 import PathInput from '@/views/file/PathInput.vue'
diff --git a/web/src/views/home/IndexView.vue b/web/src/views/home/IndexView.vue
index 056d02b524..f753d4414b 100644
--- a/web/src/views/home/IndexView.vue
+++ b/web/src/views/home/IndexView.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+defineOptions({
+  name: 'home-index'
+})
+
 import { LineChart } from 'echarts/charts'
 import {
   DataZoomComponent,
diff --git a/web/src/views/home/UpdateView.vue b/web/src/views/home/UpdateView.vue
index a0f6dbf59f..d9043dd0c6 100644
--- a/web/src/views/home/UpdateView.vue
+++ b/web/src/views/home/UpdateView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'home-update'
+})
+
 import { MdPreview } from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 import type { MessageReactive } from 'naive-ui'
diff --git a/web/src/views/monitor/IndexView.vue b/web/src/views/monitor/IndexView.vue
index c4948e418d..6ead5a68c6 100644
--- a/web/src/views/monitor/IndexView.vue
+++ b/web/src/views/monitor/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'monitor-index'
+})
+
 import { LineChart } from 'echarts/charts'
 import {
   DataZoomComponent,
diff --git a/web/src/views/safe/IndexView.vue b/web/src/views/safe/IndexView.vue
index 159c355b71..8eb5ad760d 100644
--- a/web/src/views/safe/IndexView.vue
+++ b/web/src/views/safe/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'safe-index'
+})
+
 import ForwardView from '@/views/safe/ForwardView.vue'
 import IpRuleView from '@/views/safe/IpRuleView.vue'
 import RuleView from '@/views/safe/RuleView.vue'
diff --git a/web/src/views/setting/IndexView.vue b/web/src/views/setting/IndexView.vue
index 0d8569301a..4429ad82b8 100644
--- a/web/src/views/setting/IndexView.vue
+++ b/web/src/views/setting/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'setting-index'
+})
+
 import SettingBase from '@/views/setting/SettingBase.vue'
 import SettingHttps from '@/views/setting/SettingHttps.vue'
 
diff --git a/web/src/views/ssh/IndexView.vue b/web/src/views/ssh/IndexView.vue
index 93dae67414..64216a5ed3 100644
--- a/web/src/views/ssh/IndexView.vue
+++ b/web/src/views/ssh/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'ssh-index'
+})
+
 import { FitAddon } from '@xterm/addon-fit'
 import { Terminal } from '@xterm/xterm'
 import '@xterm/xterm/css/xterm.css'
diff --git a/web/src/views/task/IndexView.vue b/web/src/views/task/IndexView.vue
index b3506049bc..21da1f13cb 100644
--- a/web/src/views/task/IndexView.vue
+++ b/web/src/views/task/IndexView.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'task-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
diff --git a/web/src/views/website/IndexView.vue b/web/src/views/website/IndexView.vue
index 800e4fab86..96d4975707 100644
--- a/web/src/views/website/IndexView.vue
+++ b/web/src/views/website/IndexView.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+defineOptions({
+  name: 'website-index'
+})
+
 import Editor from '@guolao/vue-monaco-editor'
 import {
   NButton,