feat: alova.js替换axios

2026-02-04 11:27:17 +08:00 · 2025-02-06 00:01:22 +08:00
parent 9a81c77167
commit 0b6eed5fed
15 changed files with 262 additions and 386 deletions
--- a/web/src/api/apps/s3fs/index.ts
+++ b/web/src/api/apps/s3fs/index.ts
@@ -1,11 +1,11 @@
-import { request } from '@/utils'
+import { http } from '@/utils'

 export default {
  // 列表
-  list: (page: number, limit: number): any =>
-    request.get('/apps/s3fs/mounts', { params: { page, limit } }),
+  mounts: (page: number, limit: number): any =>
+    http.Get('/apps/s3fs/mounts', { params: { page, limit } }),
  // 添加
-  add: (data: any): any => request.post('/apps/s3fs/mounts', data),
+  add: (data: any): any => http.Post('/apps/s3fs/mounts', data),
  // 删除
-  delete: (id: number): any => request.delete('/apps/s3fs/mounts', { data: { id } })
+  delete: (id: number): any => http.Delete('/apps/s3fs/mounts', { data: { id } })
 }
--- a/web/src/api/apps/supervisor/index.ts
+++ b/web/src/api/apps/supervisor/index.ts
@@ -1,39 +1,38 @@
-import { request } from '@/utils'
+import { http } from '@/utils'

 export default {
  // 服务名称
-  service: (): any => request.get('/apps/supervisor/service'),
+  service: (): any => http.Get('/apps/supervisor/service'),
  // 获取错误日志
-  log: (): any => request.get('/apps/supervisor/log'),
+  log: (): any => http.Get('/apps/supervisor/log'),
  // 清空错误日志
-  clearLog: (): any => request.post('/apps/supervisor/clearLog'),
+  clearLog: (): any => http.Post('/apps/supervisor/clearLog'),
  // 获取配置
-  config: (): any => request.get('/apps/supervisor/config'),
+  config: (): any => http.Get('/apps/supervisor/config'),
  // 保存配置
-  saveConfig: (config: string): any => request.post('/apps/supervisor/config', { config }),
+  saveConfig: (config: string): any => http.Post('/apps/supervisor/config', { config }),
  // 进程列表
  processes: (page: number, limit: number): any =>
-    request.get('/apps/supervisor/processes', { params: { page, limit } }),
+    http.Get('/apps/supervisor/processes', { params: { page, limit } }),
  // 进程启动
-  startProcess: (process: string): any =>
-    request.post(`/apps/supervisor/processes/${process}/start`),
+  startProcess: (process: string): any => http.Post(`/apps/supervisor/processes/${process}/start`),
  // 进程停止
-  stopProcess: (process: string): any => request.post(`/apps/supervisor/processes/${process}/stop`),
+  stopProcess: (process: string): any => http.Post(`/apps/supervisor/processes/${process}/stop`),
  // 进程重启
  restartProcess: (process: string): any =>
-    request.post(`/apps/supervisor/processes/${process}/restart`),
+    http.Post(`/apps/supervisor/processes/${process}/restart`),
  // 进程日志
-  processLog: (process: string): any => request.get(`/apps/supervisor/processes/${process}/log`),
+  processLog: (process: string): any => http.Get(`/apps/supervisor/processes/${process}/log`),
  // 清空进程日志
  clearProcessLog: (process: string): any =>
-    request.post(`/apps/supervisor/processes/${process}/clearLog`),
+    http.Post(`/apps/supervisor/processes/${process}/clearLog`),
  // 进程配置
-  processConfig: (process: string): any => request.get(`/apps/supervisor/processes/${process}`),
+  processConfig: (process: string): any => http.Get(`/apps/supervisor/processes/${process}`),
  // 保存进程配置
  saveProcessConfig: (process: string, config: string): any =>
-    request.post(`/apps/supervisor/processes/${process}`, { config }),
+    http.Post(`/apps/supervisor/processes/${process}`, { config }),
  // 创建进程
-  createProcess: (process: any): any => request.post('/apps/supervisor/processes', process),
+  createProcess: (process: any): any => http.Post('/apps/supervisor/processes', process),
  // 删除进程
-  deleteProcess: (process: string): any => request.delete(`/apps/supervisor/processes/${process}`)
+  deleteProcess: (process: string): any => http.Delete(`/apps/supervisor/processes/${process}`)
 }
--- a/web/src/api/apps/toolbox/index.ts
+++ b/web/src/api/apps/toolbox/index.ts
@@ -1,31 +1,31 @@
-import { request } from '@/utils'
+import { http } from '@/utils'

 export default {
  // DNS
-  dns: (): any => request.get('/apps/toolbox/dns'),
+  dns: (): any => http.Get('/apps/toolbox/dns'),
  // 设置 DNS
-  updateDns: (dns1: string, dns2: string): any => request.post('/apps/toolbox/dns', { dns1, dns2 }),
+  updateDns: (dns1: string, dns2: string): any => http.Post('/apps/toolbox/dns', { dns1, dns2 }),
  // SWAP
-  swap: (): any => request.get('/apps/toolbox/swap'),
+  swap: (): any => http.Get('/apps/toolbox/swap'),
  // 设置 SWAP
-  updateSwap: (size: number): any => request.post('/apps/toolbox/swap', { size }),
+  updateSwap: (size: number): any => http.Post('/apps/toolbox/swap', { size }),
  // 时区
-  timezone: (): any => request.get('/apps/toolbox/timezone'),
+  timezone: (): any => http.Get('/apps/toolbox/timezone'),
  // 设置时区
-  updateTimezone: (timezone: string): any => request.post('/apps/toolbox/timezone', { timezone }),
+  updateTimezone: (timezone: string): any => http.Post('/apps/toolbox/timezone', { timezone }),
  // 设置时间
-  updateTime: (time: string): any => request.post('/apps/toolbox/time', { time }),
+  updateTime: (time: string): any => http.Post('/apps/toolbox/time', { time }),
  // 同步时间
-  syncTime: (): any => request.post('/apps/toolbox/syncTime'),
+  syncTime: (): any => http.Post('/apps/toolbox/syncTime'),
  // 主机名
-  hostname: (): any => request.get('/apps/toolbox/hostname'),
+  hostname: (): any => http.Get('/apps/toolbox/hostname'),
  // Hosts
-  hosts: (): any => request.get('/apps/toolbox/hosts'),
+  hosts: (): any => http.Get('/apps/toolbox/hosts'),
  // 设置主机名
-  updateHostname: (hostname: string): any => request.post('/apps/toolbox/hostname', { hostname }),
+  updateHostname: (hostname: string): any => http.Post('/apps/toolbox/hostname', { hostname }),
  // 设置 Hosts
-  updateHosts: (hosts: string): any => request.post('/apps/toolbox/hosts', { hosts }),
+  updateHosts: (hosts: string): any => http.Post('/apps/toolbox/hosts', { hosts }),
  // 设置 Root 密码
  updateRootPassword: (password: string): any =>
-    request.post('/apps/toolbox/rootPassword', { password })
+    http.Post('/apps/toolbox/rootPassword', { password })
 }
--- a/web/src/api/panel/website/index.ts
+++ b/web/src/api/panel/website/index.ts
@@ -1,33 +1,33 @@
-import { http, request } from '@/utils'
+import { http } from '@/utils'

 export default {
  // 列表
-  list: (page: number, limit: number): any => request.get('/website', { params: { page, limit } }),
+  list: (page: number, limit: number): any => http.Get('/website', { params: { page, limit } }),
  // 创建
-  create: (data: any): any => request.post('/website', data),
+  create: (data: any): any => http.Post('/website', data),
  // 删除
  delete: (id: number, path: boolean, db: boolean): any =>
-    request.delete(`/website/${id}`, { data: { path, db } }),
+    http.Delete(`/website/${id}`, { data: { path, db } }),
  // 伪静态
-  rewrites: () => http.Get(`/website/rewrites`),
+  rewrites: (): any => http.Get(`/website/rewrites`),
  // 获取默认配置
-  defaultConfig: (): any => request.get('/website/defaultConfig'),
+  defaultConfig: (): any => http.Get('/website/defaultConfig'),
  // 保存默认配置
  saveDefaultConfig: (index: string, stop: string): any =>
-    request.post('/website/defaultConfig', { index, stop }),
+    http.Post('/website/defaultConfig', { index, stop }),
  // 网站配置
-  config: (id: number): any => request.get('/website/' + id),
+  config: (id: number): any => http.Get('/website/' + id),
  // 保存网站配置
-  saveConfig: (id: number, data: any): any => request.put(`/website/${id}`, data),
+  saveConfig: (id: number, data: any): any => http.Put(`/website/${id}`, data),
  // 清空日志
-  clearLog: (id: number): any => request.delete('/website/' + id + '/log'),
+  clearLog: (id: number): any => http.Delete('/website/' + id + '/log'),
  // 更新备注
  updateRemark: (id: number, remark: string): any =>
-    request.post(`/website/${id}` + '/updateRemark', { remark }),
+    http.Post(`/website/${id}` + '/updateRemark', { remark }),
  // 重置配置
-  resetConfig: (id: number): any => request.post(`/website/${id}/resetConfig`),
+  resetConfig: (id: number): any => http.Post(`/website/${id}/resetConfig`),
  // 修改状态
-  status: (id: number, status: boolean): any => request.post(`/website/${id}/status`, { status }),
+  status: (id: number, status: boolean): any => http.Post(`/website/${id}/status`, { status }),
  // 签发证书
-  obtainCert: (id: number): any => request.post(`/website/${id}/obtainCert`)
+  obtainCert: (id: number): any => http.Post(`/website/${id}/obtainCert`)
 }
--- a/web/src/views/apps/fail2ban/IndexView.vue
+++ b/web/src/views/apps/fail2ban/IndexView.vue
@@ -175,7 +175,7 @@ const handleSaveWhiteList = async () => {
 }

 const getWebsiteList = async (page: number, limit: number) => {
-  const { data } = await website.list(page, limit)
+  const data = await website.list(page, limit)
  for (const item of data.items) {
    websites.value.push({
      label: item.name,
--- a/web/src/views/apps/s3fs/IndexView.vue
+++ b/web/src/views/apps/s3fs/IndexView.vue
@@ -7,7 +7,6 @@ import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'

 import s3fs from '@/api/apps/s3fs'
 import { renderIcon } from '@/utils'
-import type { S3fs } from '@/views/apps/s3fs/types'

 const addMountModal = ref(false)

@@ -19,16 +18,6 @@ const addMountModel = ref({
  path: ''
 })

-const pagination = reactive({
-  page: 1,
-  pageCount: 1,
-  pageSize: 20,
-  itemCount: 0,
-  showQuickJumper: true,
-  showSizePicker: true,
-  pageSizes: [20, 50, 100, 200]
-})
-
 const columns: any = [
  {
    title: '挂载路径',
@@ -75,42 +64,32 @@ const columns: any = [
  }
 ]

-const mounts = ref<S3fs[]>([] as S3fs[])
+const { loading, data, page, total, pageSize, pageCount, refresh } = usePagination(
+  (page, pageSize) => s3fs.mounts(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)

-const getMounts = async (page: number, limit: number) => {
-  const { data } = await s3fs.list(page, limit)
-  return data
-}
-
-const onPageChange = (page: number) => {
-  pagination.page = page
-  getMounts(page, pagination.pageSize).then((res) => {
-    mounts.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
+const handleAddMount = async () => {
+  useRequest(s3fs.add(addMountModel.value)).onSuccess(() => {
+    refresh()
+    addMountModal.value = false
+    window.$message.success('添加成功')
  })
 }

-const onPageSizeChange = (pageSize: number) => {
-  pagination.pageSize = pageSize
-  onPageChange(1)
-}
-
-const handleAddMount = async () => {
-  await s3fs.add(addMountModel.value)
-  window.$message.success('添加成功')
-  onPageChange(1)
-  addMountModal.value = false
-}
-
 const handleDeleteMount = async (id: number) => {
-  await s3fs.delete(id)
-  window.$message.success('删除成功')
-  onPageChange(1)
+  useRequest(s3fs.delete(id)).onSuccess(() => {
+    refresh()
+    window.$message.success('删除成功')
+  })
 }

 onMounted(() => {
-  onPageChange(1)
+  refresh()
 })
 </script>

@@ -127,12 +106,21 @@ onMounted(() => {
        striped
        remote
        :scroll-x="1000"
-        :loading="false"
+        :loading="loading"
        :columns="columns"
-        :data="mounts"
+        :data="data"
        :row-key="(row: any) => row.id"
-        @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-card>
  </common-page>
--- a/web/src/views/apps/s3fs/types.ts
+++ b/web/src/views/apps/s3fs/types.ts
@@ -1,6 +0,0 @@
-export interface S3fs {
-  id: number
-  path: string
-  bucket: string
-  url: string
-}
--- a/web/src/views/apps/supervisor/IndexView.vue
+++ b/web/src/views/apps/supervisor/IndexView.vue
@@ -9,15 +9,25 @@ import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
 import supervisor from '@/api/apps/supervisor'
 import systemctl from '@/api/panel/systemctl'
 import { renderIcon } from '@/utils'
-import type { Process } from '@/views/apps/supervisor/types'

 const currentTab = ref('status')
-const serviceName = ref('supervisor')
 const status = ref(false)
 const isEnabled = ref(false)
-const config = ref('')
 const processLog = ref('')

+const { data: serviceName } = useRequest(supervisor.service, {
+  initialData: 'supervisor'
+}).onSuccess(() => {
+  refresh()
+  getStatus()
+  getIsEnabled()
+  config.value = supervisor.config()
+})
+
+const { data: config } = useRequest(supervisor.config, {
+  initialData: ''
+})
+
 const createProcessModal = ref(false)
 const createProcessModel = ref({
  name: '',
@@ -205,36 +215,14 @@ const processColumns: any = [
  }
 ]

-const processes = ref<Process[]>([])
-
-const pagination = reactive({
-  page: 1,
-  pageCount: 1,
-  pageSize: 20,
-  itemCount: 0,
-  showQuickJumper: true,
-  showSizePicker: true,
-  pageSizes: [20, 50, 100, 200]
-})
-
-const getProcesses = async (page: number, limit: number) => {
-  const { data } = await supervisor.processes(page, limit)
-  return data
-}
-
-const onPageChange = (page: number) => {
-  pagination.page = page
-  getProcesses(page, pagination.pageSize).then((res) => {
-    processes.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) => supervisor.processes(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)

 const getStatus = async () => {
  status.value = await systemctl.status(serviceName.value)
@@ -244,84 +232,93 @@ const getIsEnabled = async () => {
  isEnabled.value = await systemctl.isEnabled(serviceName.value)
 }

-const getConfig = async () => {
-  supervisor.config().then((res: any) => {
-    config.value = res.data
+const handleSaveConfig = async () => {
+  useRequest(supervisor.saveConfig(config.value)).onSuccess(() => {
+    refresh()
+    window.$message.success('保存成功')
  })
 }

-const handleSaveConfig = async () => {
-  await supervisor.saveConfig(config.value)
-  window.$message.success('保存成功')
-}
-
 const handleClearLog = async () => {
-  await supervisor.clearLog()
-  window.$message.success('清空成功')
-}
-
-const handleStart = async () => {
-  await systemctl.start(serviceName.value)
-  window.$message.success('启动成功')
-  await getStatus()
+  useRequest(supervisor.clearLog()).onSuccess(() => {
+    window.$message.success('清空成功')
+  })
 }

 const handleIsEnabled = async () => {
  if (isEnabled.value) {
-    await systemctl.enable(serviceName.value)
-    window.$message.success('开启自启动成功')
+    useRequest(systemctl.enable(serviceName.value)).onSuccess(() => {
+      getIsEnabled()
+      window.$message.success('开启自启动成功')
+    })
  } else {
-    await systemctl.disable(serviceName.value)
-    window.$message.success('禁用自启动成功')
+    useRequest(systemctl.disable(serviceName.value)).onSuccess(() => {
+      getIsEnabled()
+      window.$message.success('禁用自启动成功')
+    })
  }
-  await getIsEnabled()
+}
+
+const handleStart = async () => {
+  useRequest(systemctl.start(serviceName.value)).onSuccess(() => {
+    getStatus()
+    window.$message.success('启动成功')
+  })
 }

 const handleStop = async () => {
-  await systemctl.stop(serviceName.value)
-  window.$message.success('停止成功')
-  await getStatus()
+  useRequest(systemctl.stop(serviceName.value)).onSuccess(() => {
+    getStatus()
+    window.$message.success('停止成功')
+  })
 }

 const handleRestart = async () => {
-  await systemctl.restart(serviceName.value)
-  window.$message.success('重启成功')
-  await getStatus()
+  useRequest(systemctl.restart(serviceName.value)).onSuccess(() => {
+    getStatus()
+    window.$message.success('重启成功')
+  })
 }

 const handleCreateProcess = async () => {
-  await supervisor.createProcess(createProcessModel.value)
-  window.$message.success('添加成功')
-  createProcessModal.value = false
-  onPageChange(1)
+  useRequest(supervisor.createProcess(createProcessModel.value)).onSuccess(() => {
+    refresh()
+    createProcessModal.value = false
+    window.$message.success('添加成功')
+  })
 }

 const handleProcessStart = async (name: string) => {
-  await supervisor.startProcess(name)
-  window.$message.success('启动成功')
+  useRequest(supervisor.startProcess(name)).onSuccess(() => {
+    refresh()
+    window.$message.success('启动成功')
+  })
 }

 const handleProcessStop = async (name: string) => {
-  await supervisor.stopProcess(name)
-  window.$message.success('停止成功')
+  useRequest(supervisor.stopProcess(name)).onSuccess(() => {
+    refresh()
+    window.$message.success('停止成功')
+  })
 }

 const handleProcessRestart = async (name: string) => {
-  await supervisor.restartProcess(name)
-  window.$message.success('重启成功')
+  useRequest(supervisor.restartProcess(name)).onSuccess(() => {
+    refresh()
+    window.$message.success('重启成功')
+  })
 }

 const handleProcessDelete = async (name: string) => {
-  await supervisor.deleteProcess(name)
-  window.$message.success('删除成功')
-  onPageChange(1)
+  useRequest(supervisor.deleteProcess(name)).onSuccess(() => {
+    refresh()
+    window.$message.success('删除成功')
+  })
 }

-const handleShowProcessLog = (row: any) => {
-  supervisor.processLog(row.name).then((res) => {
-    processLogModal.value = true
-    processLog.value = res.data
-  })
+const handleShowProcessLog = async (row: any) => {
+  processLog.value = await supervisor.processLog(row.name)
+  processLogModal.value = true
 }

 const handleEditProcess = async (name: string) => {
@@ -331,28 +328,19 @@ const handleEditProcess = async (name: string) => {

 const getProcessConfig = async (name: string) => {
  editProcessModel.value.process = name
-  await supervisor.processConfig(name).then((res: any) => {
-    editProcessModel.value.config = res.data
-  })
+  editProcessModel.value.config = await supervisor.processConfig(name)
 }

 const handleSaveProcessConfig = async () => {
-  await supervisor.saveProcessConfig(editProcessModel.value.process, editProcessModel.value.config)
-  window.$message.success('保存成功')
+  useRequest(
+    supervisor.saveProcessConfig(editProcessModel.value.process, editProcessModel.value.config)
+  ).onSuccess(() => {
+    window.$message.success('保存成功')
+  })
 }

 const timer: any = null

-onMounted(async () => {
-  await supervisor.service().then((res: any) => {
-    serviceName.value = res.data
-  })
-  await getStatus()
-  await getIsEnabled()
-  await getConfig()
-  onPageChange(1)
-})
-
 onUnmounted(() => {
  clearInterval(timer)
 })
@@ -427,12 +415,21 @@ onUnmounted(() => {
            striped
            remote
            :scroll-x="1000"
-            :loading="false"
+            :loading="loading"
            :columns="processColumns"
-            :data="processes"
+            :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-card>
      </n-tab-pane>
--- a/web/src/views/apps/supervisor/types.ts
+++ b/web/src/views/apps/supervisor/types.ts
@@ -1,6 +0,0 @@
-export interface Process {
-  name: string
-  status: string
-  pid: string
-  uptime: string
-}
--- a/web/src/views/apps/toolbox/IndexView.vue
+++ b/web/src/views/apps/toolbox/IndexView.vue
@@ -24,35 +24,28 @@ const time = ref(DateTime.now().toMillis())
 const rootPassword = ref('')

 const fetchDNS = async () => {
-  await toolbox.dns().then((res: any) => {
-    dns1.value = res.data[0]
-    dns2.value = res.data[1]
-  })
+  const data = await toolbox.dns()
+  dns1.value = data[0]
+  dns2.value = data[1]
 }

 const fetchSwap = async () => {
-  await toolbox.swap().then((res: any) => {
-    swap.value = res.data.size
-    swapFree.value = res.data.free
-    swapUsed.value = res.data.used
-    swapTotal.value = res.data.total
-  })
+  const data = await toolbox.swap()
+  swap.value = data.size
+  swapFree.value = data.free
+  swapUsed.value = data.used
+  swapTotal.value = data.total
 }

 const fetchHost = async () => {
-  toolbox.hostname().then((res: any) => {
-    hostname.value = res.data
-  })
-  toolbox.hosts().then((res: any) => {
-    hosts.value = res.data
-  })
+  hostname.value = await toolbox.hostname()
+  hosts.value = await toolbox.hosts()
 }

 const fetchTimezone = async () => {
-  toolbox.timezone().then((res: any) => {
-    timezone.value = res.data.timezone
-    timezones.value = res.data.timezones
-  })
+  const data = toolbox.timezone()
+  timezone.value = data.timezone
+  timezones.value = data.timezones
 }

 const handleUpdateDNS = async () => {
@@ -182,7 +175,7 @@ onMounted(() => {
            <n-form-item label="修改时间">
              <n-date-picker v-model:value="time" type="datetime" clearable />
            </n-form-item>
-            <n-form-item label="NTP同步时间">
+            <n-form-item label="NTP 同步时间">
              <n-button type="info" @click="handleSyncTime">同步时间</n-button>
            </n-form-item>
          </n-form>
--- a/web/src/views/cert/IndexView.vue
+++ b/web/src/views/cert/IndexView.vue
@@ -38,7 +38,7 @@ const getAsyncData = async () => {
  websites.value = []
  app.isInstalled('nginx').then(async (res) => {
    if (res.data.installed) {
-      const { data: websiteData } = await website.list(1, 10000)
+      const websiteData = await website.list(1, 10000)
      for (const item of websiteData.items) {
        websites.value.push({
          label: item.name,
--- a/web/src/views/task/CreateModal.vue
+++ b/web/src/views/task/CreateModal.vue
@@ -46,7 +46,7 @@ const postgreSQLInstalled = computed(() => {
 })

 const getWebsiteList = async (page: number, limit: number) => {
-  const { data } = await website.list(page, limit)
+  const data = await website.list(page, limit)
  for (const item of data.items) {
    websites.value.push({
      label: item.name,
--- a/web/src/views/website/EditView.vue
+++ b/web/src/views/website/EditView.vue
@@ -59,7 +59,7 @@ const installedDbAndPhp = ref({
  ]
 })
 const certs = ref<Cert[]>([] as Cert[])
-const { data: rewrites }: { data: any } = useRequest(website.rewrites, {
+const { data: rewrites } = useRequest(website.rewrites, {
  initialData: {}
 })
 const rewriteOptions = computed(() => {
@@ -90,9 +90,7 @@ const fetchPhpAndDb = async () => {
 }

 const fetchWebsiteSetting = async () => {
-  await website.config(Number(id)).then((res) => {
-    setting.value = res.data
-  })
+  setting.value = await website.config(Number(id))
 }

 const fetchCertList = async () => {
@@ -100,9 +98,9 @@ const fetchCertList = async () => {
  certs.value = data.items
 }

-const handleSave = async () => {
+const handleSave = () => {
  // 如果没有任何监听地址设置了https，则自动添加443
-  if (setting.value.https && !setting.value.listens.some((item) => item.https)) {
+  if (setting.value.https && !setting.value.listens.some((item: any) => item.https)) {
    setting.value.listens.push({
      address: '443',
      https: true,
@@ -111,21 +109,21 @@ const handleSave = async () => {
  }
  // 如果关闭了https，自动禁用所有https和quic
  if (!setting.value.https) {
-    setting.value.listens = setting.value.listens.filter((item) => item.address !== '443') // 443直接删掉
-    setting.value.listens.forEach((item) => {
+    setting.value.listens = setting.value.listens.filter((item: any) => item.address !== '443') // 443直接删掉
+    setting.value.listens.forEach((item: any) => {
      item.https = false
      item.quic = false
    })
  }

-  await website.saveConfig(Number(id), setting.value).then(() => {
+  useRequest(website.saveConfig(Number(id), setting.value)).onSuccess(() => {
    fetchWebsiteSetting()
    window.$message.success('保存成功')
  })
 }

-const handleReset = async () => {
-  await website.resetConfig(Number(id)).then(() => {
+const handleReset = () => {
+  useRequest(website.resetConfig(Number(id))).onSuccess(() => {
    fetchWebsiteSetting()
    window.$message.success('重置成功')
  })
@@ -139,13 +137,12 @@ const handleObtainCert = async () => {
  messageReactive = window.$message.loading('请稍后...', {
    duration: 0
  })
-  await website
-    .obtainCert(Number(id))
-    .then(() => {
+  useRequest(website.obtainCert(Number(id)))
+    .onSuccess(() => {
      fetchWebsiteSetting()
      window.$message.success('签发成功')
    })
-    .finally(() => {
+    .onComplete(() => {
      messageReactive?.destroy()
    })
 }
@@ -159,7 +156,7 @@ const handleSelectCert = (value: number) => {
 }

 const clearLog = async () => {
-  await website.clearLog(Number(id)).then(() => {
+  useRequest(website.clearLog(Number(id))).onSuccess(() => {
    fetchWebsiteSetting()
    window.$message.success('清空成功')
  })
--- a/web/src/views/website/IndexView.vue
+++ b/web/src/views/website/IndexView.vue
@@ -21,7 +21,6 @@ import dashboard from '@/api/panel/dashboard'
 import website from '@/api/panel/website'
 import { useFileStore } from '@/store'
 import { generateRandomString, isNullOrUndef, renderIcon } from '@/utils'
-import type { Website } from './types'

 const fileStore = useFileStore()
 const { t } = useI18n()
@@ -180,23 +179,9 @@ const columns: any = [
  }
 ]

-const data = ref<Website[]>([] as Website[])
-
-const pagination = reactive({
-  page: 1,
-  pageCount: 1,
-  pageSize: 20,
-  itemCount: 0,
-  showQuickJumper: true,
-  showSizePicker: true,
-  pageSizes: [20, 50, 100, 200]
-})
-
 const createModal = ref(false)
 const editDefaultPageModal = ref(false)

-const buttonLoading = ref(false)
-const buttonDisabled = ref(false)
 const createModel = ref({
  name: '',
  listens: [] as Array<string>,
@@ -234,51 +219,36 @@ const installedDbAndPhp = ref({
  ]
 })

+const { loading, data, page, total, pageSize, pageCount, refresh } = usePagination(
+  (page, pageSize) => website.list(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
+
 const getPhpAndDb = async () => {
  const { data } = await dashboard.installedDbAndPhp()
  installedDbAndPhp.value = data
 }

-const onChecked = (rowKeys: any) => {
-  selectedRowKeys.value = rowKeys
-}
-
 // 修改运行状态
 const handleStatusChange = (row: any) => {
  if (isNullOrUndef(row.id)) return

-  website.status(row.id, !row.status).then(() => {
+  useRequest(website.status(row.id, !row.status)).onSuccess(() => {
    row.status = !row.status
    window.$message.success('已' + (row.status ? '启动' : '停止'))
  })
 }

-const getWebsiteList = async (page: number, limit: number) => {
-  const { data } = await website.list(page, limit)
-  return data
-}
-
 const getDefaultPage = async () => {
-  const { data } = await website.defaultConfig()
-  editDefaultPageModel.value = data
-}
-
-const onPageChange = (page: number) => {
-  pagination.page = page
-  getWebsiteList(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)
+  editDefaultPageModel.value = await website.defaultConfig()
 }

 const handleRemark = (row: any) => {
-  website.updateRemark(row.id, row.remark).then(() => {
+  useRequest(website.updateRemark(row.id, row.remark)).onSuccess(() => {
    window.$message.success('修改成功')
  })
 }
@@ -292,26 +262,24 @@ const handleEdit = (row: any) => {
  })
 }

-const handleDelete = async (id: number) => {
-  await website.delete(id, deleteModel.value.path, deleteModel.value.db).then(() => {
+const handleDelete = (id: number) => {
+  useRequest(website.delete(id, deleteModel.value.path, deleteModel.value.db)).onSuccess(() => {
+    refresh()
+    deleteModel.value.path = true
    window.$message.success('删除成功')
-    onPageChange(pagination.page)
  })
-  deleteModel.value.path = true
 }

 const handleSaveDefaultPage = () => {
-  website
-    .saveDefaultConfig(editDefaultPageModel.value.index, editDefaultPageModel.value.stop)
-    .then(() => {
-      window.$message.success('修改成功')
-      editDefaultPageModal.value = false
-    })
+  useRequest(
+    website.saveDefaultConfig(editDefaultPageModel.value.index, editDefaultPageModel.value.stop)
+  ).onSuccess(() => {
+    editDefaultPageModal.value = false
+    window.$message.success('修改成功')
+  })
 }

 const handleCreate = async () => {
-  buttonLoading.value = true
-  buttonDisabled.value = true
  // 去除空的域名和端口
  createModel.value.domains = createModel.value.domains.filter((item) => item !== '')
  createModel.value.listens = createModel.value.listens.filter((item) => item !== '')
@@ -321,36 +289,24 @@ const handleCreate = async () => {
  }
  // 端口中去掉 443 端口，nginx 不允许在未配置证书下监听 443 端口
  createModel.value.listens = createModel.value.listens.filter((item) => item !== '443')
-  await website
-    .create(createModel.value)
-    .then(() => {
-      window.$message.success('创建成功')
-      getWebsiteList(pagination.page, pagination.pageSize).then((res) => {
-        data.value = res.items
-        pagination.itemCount = res.total
-        pagination.pageCount = res.total / pagination.pageSize + 1
-      })
-      createModal.value = false
-      createModel.value = {
-        name: '',
-        domains: [] as Array<string>,
-        listens: [] as Array<string>,
-        php: 0,
-        db: false,
-        db_type: '0',
-        db_name: '',
-        db_user: '',
-        db_password: '',
-        path: '',
-        remark: ''
-      }
-      buttonLoading.value = false
-      buttonDisabled.value = false
-    })
-    .catch(() => {
-      buttonLoading.value = false
-      buttonDisabled.value = false
-    })
+  useRequest(website.create(createModel.value)).onSuccess(() => {
+    refresh()
+    createModal.value = false
+    createModel.value = {
+      name: '',
+      domains: [] as Array<string>,
+      listens: [] as Array<string>,
+      php: 0,
+      db: false,
+      db_type: '0',
+      db_name: '',
+      db_user: '',
+      db_password: '',
+      path: '',
+      remark: ''
+    }
+    window.$message.success('创建成功')
+  })
 }

 const batchDelete = async () => {
@@ -360,13 +316,12 @@ const batchDelete = async () => {
  }

  for (const id of selectedRowKeys.value) {
-    await website.delete(id, true, false).then(() => {
-      const site = data.value.find((item) => item.id === id)
+    useRequest(website.delete(id, true, false)).onSuccess(() => {
+      refresh()
+      const site = data.value.find((item: any) => item.id === id)
      window.$message.success('网站 ' + site?.name + ' 删除成功')
    })
  }
-
-  onPageChange(pagination.page)
 }

 const formatDbValue = (value: string) => {
@@ -380,7 +335,7 @@ const formatDbValue = (value: string) => {
 }

 onMounted(() => {
-  onPageChange(pagination.page)
+  refresh()
  getPhpAndDb()
  getDefaultPage()
 })
@@ -408,15 +363,23 @@ onMounted(() => {
      <n-data-table
        striped
        remote
-        :loading="false"
+        :loading="loading"
        :scroll-x="1200"
        :columns="columns"
        :data="data"
        :row-key="(row: any) => row.id"
-        :pagination="pagination"
-        @update:checked-row-keys="onChecked"
-        @update:page="onPageChange"
-        @update:page-size="onPageSizeChange"
+        v-model:checked-row-keys="selectedRowKeys"
+        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-flex>
  </common-page>
@@ -558,13 +521,7 @@ onMounted(() => {
        />
      </n-form-item>
    </n-form>
-    <n-button
-      type="info"
-      block
-      :loading="buttonLoading"
-      :disabled="buttonDisabled"
-      @click="handleCreate"
-    >
+    <n-button type="info" block @click="handleCreate">
      {{ $t('websiteIndex.create.actions.submit') }}
    </n-button>
  </n-modal>
--- a/web/src/views/website/types.ts
+++ b/web/src/views/website/types.ts
@@ -1,43 +0,0 @@
-export interface Website {
-  id: number
-  name: string
-  status: boolean
-  path: string
-  php: number
-  ssl: boolean
-  remark: string
-  created_at: string
-  updated_at: string
-}
-
-export interface WebsiteListen {
-  address: string
-  https: boolean
-  quic: boolean
-}
-
-export interface WebsiteSetting {
-  id: number
-  name: string
-  listens: WebsiteListen[]
-  domains: string[]
-  root: string
-  path: string
-  index: string[]
-  php: number
-  open_basedir: boolean
-  https: boolean
-  ssl_certificate: string
-  ssl_certificate_key: string
-  ssl_not_before: string
-  ssl_not_after: string
-  ssl_dns_names: string[]
-  ssl_issuer: string
-  ssl_ocsp_server: string[]
-  http_redirect: boolean
-  hsts: boolean
-  ocsp: boolean
-  rewrite: string
-  raw: string
-  log: string
-}