From d27a29151efd3de5e89669be0ee6b92a35b0317a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <i@haozi.net>
Date: Thu, 6 Feb 2025 18:18:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20alova.js=E6=9B=BF=E6=8D=A2axios?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/api/panel/backup/index.ts      | 12 ++--
 web/src/api/panel/dashboard/index.ts   | 30 ++++-----
 web/src/api/panel/monitor/index.ts     | 11 ++--
 web/src/main.ts                        |  4 +-
 web/src/views/backup/IndexView.vue     |  6 +-
 web/src/views/backup/ListView.vue      | 76 +++++++++-------------
 web/src/views/backup/types.ts          |  6 --
 web/src/views/dashboard/IndexView.vue  | 83 ++++++++++++------------
 web/src/views/dashboard/UpdateView.vue | 24 ++-----
 web/src/views/dashboard/types.ts       | 49 --------------
 web/src/views/monitor/IndexView.vue    | 88 ++++++++------------------
 web/src/views/monitor/types.ts         | 37 -----------
 web/src/views/task/CreateModal.vue     | 35 +++++-----
 web/src/views/website/EditView.vue     | 39 +++++-------
 web/src/views/website/IndexView.vue    | 34 +++++-----
 15 files changed, 186 insertions(+), 348 deletions(-)
 delete mode 100644 web/src/views/backup/types.ts
 delete mode 100644 web/src/views/monitor/types.ts

diff --git a/web/src/api/panel/backup/index.ts b/web/src/api/panel/backup/index.ts
index 33d05cbe..875a16f4 100644
--- a/web/src/api/panel/backup/index.ts
+++ b/web/src/api/panel/backup/index.ts
@@ -1,22 +1,22 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 获取备份列表
   list: (type: string, page: number, limit: number): any =>
-    request.get(`/backup/${type}`, { params: { page, limit } }),
+    http.Get(`/backup/${type}`, { params: { page, limit } }),
   // 创建备份
   create: (type: string, target: string, path: string): any =>
-    request.post(`/backup/${type}`, { target, path }),
+    http.Post(`/backup/${type}`, { target, path }),
   // 上传备份
   upload: (type: string, formData: FormData): any => {
-    return request.post(`/backup/${type}/upload`, formData, {
+    return http.Post(`/backup/${type}/upload`, formData, {
       headers: { 'Content-Type': 'multipart/form-data' }
     })
   },
   // 删除备份
   delete: (type: string, file: string): any =>
-    request.delete(`/backup/${type}/delete`, { data: { file } }),
+    http.Delete(`/backup/${type}/delete`, { data: { file } }),
   // 恢复备份
   restore: (type: string, file: string, target: string): any =>
-    request.post(`/backup/${type}/restore`, { file, target })
+    http.Post(`/backup/${type}/restore`, { file, target })
 }
diff --git a/web/src/api/panel/dashboard/index.ts b/web/src/api/panel/dashboard/index.ts
index 173a3165..cae8bbd0 100644
--- a/web/src/api/panel/dashboard/index.ts
+++ b/web/src/api/panel/dashboard/index.ts
@@ -1,33 +1,25 @@
-import { http, request } from '@/utils'
-
-import type { RequestConfig } from '~/types/axios'
+import { http } from '@/utils'
 
 export default {
   // 面板信息
-  panel: (): Promise<Response> => fetch('/api/dashboard/panel'),
-  // 面板菜单
-  menu: (): any => request.get('/dashboard/menu'),
+  panel: (): any => http.Get('/dashboard/panel'),
   // 首页应用
-  homeApps: (): any => request.get('/dashboard/homeApps'),
+  homeApps: (): any => http.Get('/dashboard/homeApps'),
   // 实时信息
   current: (nets: string[], disks: string[]): any =>
-    request.post('/dashboard/current', { nets, disks }, { noNeedTip: true } as RequestConfig),
+    http.Post('/dashboard/current', { nets, disks }, { meta: { noAlert: true } }),
   // 系统信息
-  systemInfo: (): any => request.get('/dashboard/systemInfo'),
+  systemInfo: (): any => http.Get('/dashboard/systemInfo'),
   // 统计信息
-  countInfo: (): any => request.get('/dashboard/countInfo'),
+  countInfo: (): any => http.Get('/dashboard/countInfo'),
   // 已安装的数据库和PHP
-  installedDbAndPhp: (): any => request.get('/dashboard/installedDbAndPhp'),
+  installedDbAndPhp: (): any => http.Get('/dashboard/installedDbAndPhp'),
   // 检查更新
-  checkUpdate: (): any => request.get('/dashboard/checkUpdate'),
+  checkUpdate: (): any => http.Get('/dashboard/checkUpdate'),
   // 更新日志
-  updateInfo: (): any => request.get('/dashboard/updateInfo'),
+  updateInfo: (): any => http.Get('/dashboard/updateInfo'),
   // 更新面板
-  update: (): any => request.post('/dashboard/update', null),
+  update: (): any => http.Post('/dashboard/update'),
   // 重启面板
-  restart: (): any => request.post('/dashboard/restart')
+  restart: (): any => http.Post('/dashboard/restart')
 }
-
-export const panel = () => http.Get('/dashboard/panel')
-export const current = (nets: string[], disks: string[]) =>
-  http.Post('/dashboard/current', { nets, disks }, { meta: { noAlert: true } })
diff --git a/web/src/api/panel/monitor/index.ts b/web/src/api/panel/monitor/index.ts
index 07a9e83d..c21c2fdd 100644
--- a/web/src/api/panel/monitor/index.ts
+++ b/web/src/api/panel/monitor/index.ts
@@ -1,14 +1,13 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 开关
-  setting: (): any => request.get('/monitor/setting'),
+  setting: (): any => http.Get('/monitor/setting'),
   // 保存天数
   updateSetting: (enabled: boolean, days: number): any =>
-    request.post('/monitor/setting', { enabled, days }),
+    http.Post('/monitor/setting', { enabled, days }),
   // 清空监控记录
-  clear: (): any => request.post('/monitor/clear'),
+  clear: (): any => http.Post('/monitor/clear'),
   // 监控记录
-  list: (start: number, end: number): any =>
-    request.get('/monitor/list', { params: { start, end } })
+  list: (start: number, end: number): any => http.Get('/monitor/list', { params: { start, end } })
 }
diff --git a/web/src/main.ts b/web/src/main.ts
index 7d7e6747..5bc4b4e4 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -13,7 +13,7 @@ import { setupNaiveDiscreteApi } from './utils'
 
 import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'
 
-import { panel } from '@/api/panel/dashboard'
+import dashboard from '@/api/panel/dashboard'
 import CronNaivePlugin from '@vue-js-cron/naive-ui'
 
 async function setupApp() {
@@ -38,7 +38,7 @@ async function setupApp() {
 
 const setupPanel = async () => {
   const themeStore = useThemeStore()
-  useRequest(panel, {
+  useRequest(dashboard.panel, {
     initialData: {
       name: import.meta.env.VITE_APP_TITLE,
       locale: 'zh_CN'
diff --git a/web/src/views/backup/IndexView.vue b/web/src/views/backup/IndexView.vue
index e490c27f..fdde1845 100644
--- a/web/src/views/backup/IndexView.vue
+++ b/web/src/views/backup/IndexView.vue
@@ -15,10 +15,12 @@ const createModel = ref({
 })
 
 const handleCreate = () => {
-  backup.create(currentTab.value, createModel.value.target, createModel.value.path).then(() => {
+  useRequest(
+    backup.create(currentTab.value, createModel.value.target, createModel.value.path)
+  ).onSuccess(() => {
     createModal.value = false
-    window.$message.success('创建成功')
     window.$bus.emit('backup:refresh')
+    window.$message.success('创建成功')
   })
 }
 </script>
diff --git a/web/src/views/backup/ListView.vue b/web/src/views/backup/ListView.vue
index a2791eb2..b45d594f 100644
--- a/web/src/views/backup/ListView.vue
+++ b/web/src/views/backup/ListView.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import backup from '@/api/panel/backup'
 import { renderIcon } from '@/utils'
-import type { MessageReactive } from 'naive-ui'
-import { NButton, NInput, NPopconfirm } from 'naive-ui'
+import { MessageReactive, NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
 
 import { formatDateTime } from '@/utils'
-import type { Backup } from './types'
 
 const type = defineModel<string>('type', { type: String, required: true })
 
@@ -94,63 +92,42 @@ const columns: any = [
   }
 ]
 
-const data = ref<Backup[]>([])
-
-const pagination = reactive({
-  page: 1,
-  pageCount: 1,
-  pageSize: 20,
-  itemCount: 0,
-  showQuickJumper: true,
-  showSizePicker: true,
-  pageSizes: [20, 50, 100, 200]
-})
-
-const getList = async (page: number, limit: number) => {
-  const { data } = await backup.list(type.value, page, limit)
-  return data
-}
-
-const onPageChange = (page: number) => {
-  pagination.page = page
-  getList(page, pagination.pageSize).then((res) => {
-    data.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
-  })
-}
-
-const onPageSizeChange = (pageSize: number) => {
-  pagination.pageSize = pageSize
-  onPageChange(1)
-}
+const { loading, data, page, total, pageSize, pageCount, refresh } = usePagination(
+  (page, pageSize) => backup.list(type.value, page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    initialPageSize: 20,
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
 const handleRestore = () => {
   messageReactive = window.$message.loading('恢复中...', {
     duration: 0
   })
-  backup
-    .restore(type.value, restoreModel.value.file, restoreModel.value.target)
-    .then(() => {
+
+  useRequest(backup.restore(type.value, restoreModel.value.file, restoreModel.value.target))
+    .onSuccess(() => {
+      refresh()
       window.$message.success('恢复成功')
     })
-    .finally(() => {
+    .onComplete(() => {
       messageReactive?.destroy()
-      onPageChange(pagination.page)
     })
 }
 
 const handleDelete = async (file: string) => {
-  await backup.delete(type.value, file).then(() => {
+  useRequest(backup.delete(type.value, file)).onSuccess(() => {
+    refresh()
     window.$message.success('删除成功')
-    onPageChange(pagination.page)
   })
 }
 
 onMounted(() => {
-  onPageChange(pagination.page)
+  refresh()
   window.$bus.on('backup:refresh', () => {
-    onPageChange(pagination.page)
+    refresh()
   })
 })
 
@@ -164,12 +141,21 @@ onUnmounted(() => {
     striped
     remote
     :scroll-x="1000"
-    :loading="false"
+    :loading="loading"
     :columns="columns"
     :data="data"
     :row-key="(row: any) => row.name"
-    @update:page="onPageChange"
-    @update:page-size="onPageSizeChange"
+    v-model:page="page"
+    v-model:pageSize="pageSize"
+    :pagination="{
+      page: page,
+      pageCount: pageCount,
+      pageSize: pageSize,
+      itemCount: total,
+      showQuickJumper: true,
+      showSizePicker: true,
+      pageSizes: [20, 50, 100, 200]
+    }"
   />
   <n-modal
     v-model:show="restoreModal"
diff --git a/web/src/views/backup/types.ts b/web/src/views/backup/types.ts
deleted file mode 100644
index bd96d89f..00000000
--- a/web/src/views/backup/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface Backup {
-  name: string
-  path: string
-  size: string
-  time: string
-}
diff --git a/web/src/views/dashboard/IndexView.vue b/web/src/views/dashboard/IndexView.vue
index c2f1b79e..fe102f05 100644
--- a/web/src/views/dashboard/IndexView.vue
+++ b/web/src/views/dashboard/IndexView.vue
@@ -22,7 +22,7 @@ import { useTabStore } from '@/store'
 import { formatDateTime, formatDuration, toTimestamp } from '@/utils/common'
 import { formatBytes, formatPercent } from '@/utils/file'
 import VChart from 'vue-echarts'
-import type { CountInfo, HomeApp, Realtime, SystemInfo } from './types'
+import type { Realtime } from './types'
 
 use([
   CanvasRenderer,
@@ -37,14 +37,43 @@ use([
 const { locale } = useI18n()
 const tabStore = useTabStore()
 const realtime = ref<Realtime | null>(null)
-const systemInfo = ref<SystemInfo | null>(null)
-const homeApps = ref<HomeApp[] | null>(null)
-const homeAppsLoading = ref(true)
-const countInfo = ref<CountInfo>({
-  website: 0,
-  database: 0,
-  ftp: 0,
-  cron: 0
+
+const { data: systemInfo } = useRequest(dashboard.systemInfo, {
+  initialData: {
+    procs: 0,
+    hostname: '',
+    panel_version: '',
+    commit_hash: '',
+    build_id: '',
+    build_time: '',
+    build_user: '',
+    build_host: '',
+    go_version: '',
+    kernel_arch: '',
+    kernel_version: '',
+    os_name: '',
+    boot_time: 0,
+    uptime: 0,
+    nets: [],
+    disks: []
+  }
+})
+const { data: homeApps, loading: homeAppsLoading } = useRequest(dashboard.homeApps, {
+  initialData: {
+    description: '',
+    icon: '',
+    name: '',
+    slug: '',
+    version: ''
+  }
+})
+const { data: countInfo } = useRequest(dashboard.countInfo, {
+  initialData: {
+    website: 0,
+    database: 0,
+    ftp: 0,
+    cron: 0
+  }
 })
 
 const nets = ref<Array<string>>([]) // 选择的网卡
@@ -202,9 +231,8 @@ let isFetching = false
 const fetchCurrent = async () => {
   if (isFetching) return
   isFetching = true
-  dashboard
-    .current(nets.value, disks.value)
-    .then(({ data }) => {
+  useRequest(dashboard.current(nets.value, disks.value))
+    .onSuccess(({ data }) => {
       data.percent = formatPercent(data.percent)
       data.mem.usedPercent = formatPercent(data.mem.usedPercent)
       // 计算 CPU 核心数
@@ -283,35 +311,15 @@ const fetchCurrent = async () => {
 
       realtime.value = data
     })
-    .finally(() => {
+    .onComplete(() => {
       isFetching = false
     })
 }
 
-const fetchSystemInfo = async () => {
-  dashboard.systemInfo().then((res) => {
-    systemInfo.value = res.data
-  })
-}
-
-const fetchCountInfo = async () => {
-  dashboard.countInfo().then((res) => {
-    countInfo.value = res.data
-  })
-}
-
-const fetchHomeApps = async () => {
-  homeAppsLoading.value = true
-  dashboard.homeApps().then((res) => {
-    homeApps.value = res.data
-    homeAppsLoading.value = false
-  })
-}
-
 const handleRestartPanel = () => {
   clearInterval(homeInterval)
   window.$message.loading('面板重启中...')
-  dashboard.restart().then(() => {
+  useRequest(dashboard.restart()).onSuccess(() => {
     window.$message.success('面板重启成功')
     setTimeout(() => {
       tabStore.reloadTab(tabStore.active)
@@ -320,8 +328,8 @@ const handleRestartPanel = () => {
 }
 
 const handleUpdate = () => {
-  dashboard.checkUpdate().then((res) => {
-    if (res.data.update) {
+  useRequest(dashboard.checkUpdate()).onSuccess(({ data }) => {
+    if (data.update) {
       router.push({ name: 'dashboard-update' })
     } else {
       window.$message.success('当前已是最新版本')
@@ -375,9 +383,6 @@ let homeInterval: any = null
 
 onMounted(() => {
   fetchCurrent()
-  fetchSystemInfo()
-  fetchCountInfo()
-  fetchHomeApps()
   homeInterval = setInterval(() => {
     fetchCurrent()
   }, 3000)
diff --git a/web/src/views/dashboard/UpdateView.vue b/web/src/views/dashboard/UpdateView.vue
index 24713b1d..a179583c 100644
--- a/web/src/views/dashboard/UpdateView.vue
+++ b/web/src/views/dashboard/UpdateView.vue
@@ -12,18 +12,13 @@ import { useI18n } from 'vue-i18n'
 import dashboard from '@/api/panel/dashboard'
 import { router } from '@/router'
 import { formatDateTime } from '@/utils'
-import type { Version } from '@/views/dashboard/types'
 
 const { t } = useI18n()
-const versions = ref<Version[] | null>(null)
+const { data: versions } = useRequest(dashboard.updateInfo, {
+  initialData: []
+})
 let messageReactive: MessageReactive | null = null
 
-const getVersions = () => {
-  dashboard.updateInfo().then((res: any) => {
-    versions.value = res.data
-  })
-}
-
 const handleUpdate = () => {
   window.$dialog.warning({
     title: t('homeUpdate.confirm.update.title'),
@@ -34,18 +29,17 @@ const handleUpdate = () => {
       messageReactive = window.$message.loading(t('homeUpdate.confirm.update.loading'), {
         duration: 0
       })
-      dashboard
-        .update()
-        .then(() => {
-          window.$message.success(t('homeUpdate.alerts.success'))
+      useRequest(dashboard.update())
+        .onSuccess(() => {
           setTimeout(() => {
             setTimeout(() => {
               window.location.reload()
             }, 400)
             router.push({ name: 'dashboard-index' })
           }, 2500)
+          window.$message.success(t('homeUpdate.alerts.success'))
         })
-        .finally(() => {
+        .onComplete(() => {
           messageReactive?.destroy()
         })
     },
@@ -54,10 +48,6 @@ const handleUpdate = () => {
     }
   })
 }
-
-onMounted(() => {
-  getVersions()
-})
 </script>
 
 <template>
diff --git a/web/src/views/dashboard/types.ts b/web/src/views/dashboard/types.ts
index d301a2c0..660553d2 100644
--- a/web/src/views/dashboard/types.ts
+++ b/web/src/views/dashboard/types.ts
@@ -151,52 +151,3 @@ export interface Realtime {
   disk: PartitionStat[]
   disk_usage: DiskUsageStat[]
 }
-
-export interface SystemInfo {
-  procs: number
-  hostname: string
-  panel_version: string
-  commit_hash: string
-  build_id: string
-  build_time: string
-  build_user: string
-  build_host: string
-  go_version: string
-  kernel_arch: string
-  kernel_version: string
-  os_name: string
-  boot_time: number
-  uptime: number
-  nets: any[]
-  disks: any[]
-}
-
-export interface CountInfo {
-  website: number
-  database: number
-  ftp: number
-  cron: number
-}
-
-export interface HomeApp {
-  description: string
-  icon: string
-  name: string
-  slug: string
-  version: string
-}
-
-export interface VersionDownload {
-  url: string
-  arch: string
-  checksum: string
-}
-
-export interface Version {
-  created_at: string
-  updated_at: string
-  type: string
-  version: string
-  description: string
-  downloads: VersionDownload[]
-}
diff --git a/web/src/views/monitor/IndexView.vue b/web/src/views/monitor/IndexView.vue
index 1172d0c4..5a738caa 100644
--- a/web/src/views/monitor/IndexView.vue
+++ b/web/src/views/monitor/IndexView.vue
@@ -17,7 +17,6 @@ import { NButton } from 'naive-ui'
 import VChart from 'vue-echarts'
 
 import monitor from '@/api/panel/monitor'
-import type { MonitorData } from '@/views/monitor/types'
 
 use([
   CanvasRenderer,
@@ -29,37 +28,27 @@ use([
   DataZoomComponent
 ])
 
-const data = ref<MonitorData>({
-  times: [],
-  load: {
-    load1: [],
-    load5: [],
-    load15: []
-  },
-  cpu: {
-    percent: []
-  },
-  mem: {
-    total: '',
-    used: [],
-    available: []
-  },
-  swap: {
-    total: '',
-    used: [],
-    free: []
-  },
-  net: {
-    sent: [],
-    recv: [],
-    tx: [],
-    rx: []
-  }
-})
-
 const start = ref(Math.floor(new Date(new Date().setHours(0, 0, 0, 0)).getTime()))
 const end = ref(Math.floor(Date.now()))
 
+useRequest(monitor.setting()).onSuccess(({ data }) => {
+  monitorSwitch.value = data.enabled
+  saveDay.value = data.days
+})
+
+const { loading, data } = useWatcher(monitor.list(start.value, end.value), [start, end], {
+  initialData: {
+    times: [],
+    load: {},
+    cpu: {},
+    mem: {},
+    swap: {},
+    net: {}
+  },
+  debounce: [500],
+  immediate: true
+})
+
 const monitorSwitch = ref(false)
 const saveDay = ref(30)
 
@@ -412,27 +401,14 @@ const net = ref<any>({
   ]
 })
 
-const fetchData = async () => {
-  monitor.list(start.value, end.value).then((res) => {
-    data.value = res.data
-  })
-}
-
-const fetchSetting = async () => {
-  monitor.setting().then((res) => {
-    monitorSwitch.value = res.data.enabled
-    saveDay.value = res.data.days
-  })
-}
-
 const handleUpdate = async () => {
-  monitor.updateSetting(monitorSwitch.value, saveDay.value).then(() => {
+  useRequest(monitor.updateSetting(monitorSwitch.value, saveDay.value)).onSuccess(() => {
     window.$message.success('操作成功')
   })
 }
 
 const handleClear = async () => {
-  monitor.clear().then(() => {
+  useRequest(monitor.clear()).onSuccess(() => {
     window.$message.success('操作成功')
   })
 }
@@ -455,21 +431,6 @@ watch(data, () => {
   net.value.series[2].data = data.value.net.tx
   net.value.series[3].data = data.value.net.rx
 })
-
-// 监听时间选择的变化
-watch([start, end], () => {
-  // 开始时间不能大于结束时间
-  if (start.value > end.value) {
-    window.$message.error('开始时间不能大于结束时间')
-    return
-  }
-  fetchData()
-})
-
-onMounted(() => {
-  fetchSetting()
-  fetchData()
-})
 </script>
 
 <template>
@@ -512,7 +473,13 @@ onMounted(() => {
         </n-flex>
       </n-form>
     </n-card>
-    <n-grid cols="1 s:1 m:1 l:2 xl:2 2xl:2" item-responsive responsive="screen" pt-20>
+    <n-grid
+      v-if="!loading"
+      cols="1 s:1 m:1 l:2 xl:2 2xl:2"
+      item-responsive
+      responsive="screen"
+      pt-20
+    >
       <n-gi m-10>
         <n-card :segmented="true" rounded-10 style="height: 40vh">
           <v-chart class="chart" :option="load" autoresize />
@@ -534,6 +501,7 @@ onMounted(() => {
         </n-card>
       </n-gi>
     </n-grid>
+    <n-skeleton v-else text :repeat="40" />
   </common-page>
 </template>
 
diff --git a/web/src/views/monitor/types.ts b/web/src/views/monitor/types.ts
deleted file mode 100644
index 3ab88bf0..00000000
--- a/web/src/views/monitor/types.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-interface Load {
-  load1: number[]
-  load5: number[]
-  load15: number[]
-}
-
-interface Cpu {
-  percent: string[]
-}
-
-interface Mem {
-  total: string
-  available: string[]
-  used: string[]
-}
-
-interface Swap {
-  total: string
-  used: string[]
-  free: string[]
-}
-
-interface Network {
-  sent: string[]
-  recv: string[]
-  tx: string[]
-  rx: string[]
-}
-
-export interface MonitorData {
-  times: string[]
-  load: Load
-  cpu: Cpu
-  mem: Mem
-  swap: Swap
-  net: Network
-}
diff --git a/web/src/views/task/CreateModal.vue b/web/src/views/task/CreateModal.vue
index f11a90fb..91817c21 100644
--- a/web/src/views/task/CreateModal.vue
+++ b/web/src/views/task/CreateModal.vue
@@ -22,19 +22,22 @@ const createModel = ref({
 })
 
 const websites = ref<any>([])
-const installedDbAndPhp = ref({
-  php: [
-    {
-      label: '',
-      value: ''
-    }
-  ],
-  db: [
-    {
-      label: '',
-      value: ''
-    }
-  ]
+
+const { data: installedDbAndPhp } = useRequest(dashboard.installedDbAndPhp, {
+  initialData: {
+    php: [
+      {
+        label: '不使用',
+        value: 0
+      }
+    ],
+    db: [
+      {
+        label: '',
+        value: ''
+      }
+    ]
+  }
 })
 
 const mySQLInstalled = computed(() => {
@@ -56,11 +59,6 @@ const getWebsiteList = async (page: number, limit: number) => {
   createModel.value.target = websites.value[0]?.value
 }
 
-const getPhpAndDb = async () => {
-  const { data } = await dashboard.installedDbAndPhp()
-  installedDbAndPhp.value = data
-}
-
 const handleSubmit = async () => {
   loading.value = true
   await cron
@@ -85,7 +83,6 @@ watch(createModel, (value) => {
 })
 
 onMounted(() => {
-  getPhpAndDb()
   useRequest(app.isInstalled('nginx')).onSuccess(({ data }) => {
     if (data.installed) {
       getWebsiteList(1, 10000)
diff --git a/web/src/views/website/EditView.vue b/web/src/views/website/EditView.vue
index 957c1912..99ab93ee 100644
--- a/web/src/views/website/EditView.vue
+++ b/web/src/views/website/EditView.vue
@@ -11,7 +11,6 @@ import cert from '@/api/panel/cert'
 import dashboard from '@/api/panel/dashboard'
 import website from '@/api/panel/website'
 import type { Cert } from '@/views/cert/types'
-import type { WebsiteListen, WebsiteSetting } from '@/views/website/types'
 
 let messageReactive: MessageReactive | null = null
 
@@ -19,10 +18,10 @@ const current = ref('listen')
 const route = useRoute()
 const { id } = route.params
 
-const setting = ref<WebsiteSetting>({
+const setting = ref<any>({
   id: 0,
   name: '',
-  listens: [] as WebsiteListen[],
+  listens: [],
   domains: [],
   root: '',
   path: '',
@@ -44,19 +43,21 @@ const setting = ref<WebsiteSetting>({
   raw: '',
   log: ''
 })
-const installedDbAndPhp = ref({
-  php: [
-    {
-      label: '不使用',
-      value: 0
-    }
-  ],
-  db: [
-    {
-      label: '',
-      value: ''
-    }
-  ]
+const { data: installedDbAndPhp } = useRequest(dashboard.installedDbAndPhp, {
+  initialData: {
+    php: [
+      {
+        label: '不使用',
+        value: 0
+      }
+    ],
+    db: [
+      {
+        label: '',
+        value: ''
+      }
+    ]
+  }
 })
 const certs = ref<Cert[]>([] as Cert[])
 const { data: rewrites } = useRequest(website.rewrites, {
@@ -84,11 +85,6 @@ const certOptions = computed(() => {
 })
 const selectedCert = ref(null)
 
-const fetchPhpAndDb = async () => {
-  const { data } = await dashboard.installedDbAndPhp()
-  installedDbAndPhp.value = data
-}
-
 const fetchWebsiteSetting = async () => {
   setting.value = await website.config(Number(id))
 }
@@ -172,7 +168,6 @@ const onCreateListen = () => {
 
 onMounted(async () => {
   await fetchWebsiteSetting()
-  await fetchPhpAndDb()
   await fetchCertList()
 })
 </script>
diff --git a/web/src/views/website/IndexView.vue b/web/src/views/website/IndexView.vue
index 10fedfcf..ed9b8d80 100644
--- a/web/src/views/website/IndexView.vue
+++ b/web/src/views/website/IndexView.vue
@@ -204,19 +204,21 @@ const editDefaultPageModel = ref({
   stop: ''
 })
 
-const installedDbAndPhp = ref({
-  php: [
-    {
-      label: '',
-      value: ''
-    }
-  ],
-  db: [
-    {
-      label: '',
-      value: ''
-    }
-  ]
+const { data: installedDbAndPhp } = useRequest(dashboard.installedDbAndPhp, {
+  initialData: {
+    php: [
+      {
+        label: '不使用',
+        value: 0
+      }
+    ],
+    db: [
+      {
+        label: '',
+        value: ''
+      }
+    ]
+  }
 })
 
 const { loading, data, page, total, pageSize, pageCount, refresh } = usePagination(
@@ -229,11 +231,6 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   }
 )
 
-const getPhpAndDb = async () => {
-  const { data } = await dashboard.installedDbAndPhp()
-  installedDbAndPhp.value = data
-}
-
 // 修改运行状态
 const handleStatusChange = (row: any) => {
   if (isNullOrUndef(row.id)) return
@@ -337,7 +334,6 @@ const formatDbValue = (value: string) => {
 
 onMounted(() => {
   refresh()
-  getPhpAndDb()
   getDefaultPage()
 })
 </script>