feat: alova.js替换axios

web/src/api/panel/cert/index.ts

@@ -1,57 +1,56 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // CA 供应商列表
-  caProviders: (): any => request.get('/cert/caProviders'),
+  caProviders: (): any => http.Get('/cert/caProviders'),
   // DNS 供应商列表
-  dnsProviders: (): any => request.get('/cert/dnsProviders'),
+  dnsProviders: (): any => http.Get('/cert/dnsProviders'),
   // 证书算法列表
-  algorithms: (): any => request.get('/cert/algorithms'),
+  algorithms: (): any => http.Get('/cert/algorithms'),
   // ACME 账号列表
   accounts: (page: number, limit: number): any =>
-    request.get('/cert/account', { params: { page, limit } }),
+    http.Get('/cert/account', { params: { page, limit } }),
   // ACME 账号详情
-  accountInfo: (id: number): any => request.get(`/cert/account/${id}`),
+  accountInfo: (id: number): any => http.Get(`/cert/account/${id}`),
   // ACME 账号添加
-  accountCreate: (data: any): any => request.post('/cert/account', data),
+  accountCreate: (data: any): any => http.Post('/cert/account', data),
   // ACME 账号更新
-  accountUpdate: (id: number, data: any): any => request.put(`/cert/account/${id}`, data),
+  accountUpdate: (id: number, data: any): any => http.Put(`/cert/account/${id}`, data),
   // ACME 账号删除
-  accountDelete: (id: number): any => request.delete(`/cert/account/${id}`),
+  accountDelete: (id: number): any => http.Delete(`/cert/account/${id}`),
   // DNS 记录列表
-  dns: (page: number, limit: number): any => request.get('/cert/dns', { params: { page, limit } }),
+  dns: (page: number, limit: number): any => http.Get('/cert/dns', { params: { page, limit } }),
   // DNS 记录详情
-  dnsInfo: (id: number): any => request.get(`/cert/dns/${id}`),
+  dnsInfo: (id: number): any => http.Get(`/cert/dns/${id}`),
   // DNS 记录添加
-  dnsCreate: (data: any): any => request.post('/cert/dns', data),
+  dnsCreate: (data: any): any => http.Post('/cert/dns', data),
   // DNS 记录更新
-  dnsUpdate: (id: number, data: any): any => request.put(`/cert/dns/${id}`, data),
+  dnsUpdate: (id: number, data: any): any => http.Put(`/cert/dns/${id}`, data),
   // DNS 记录删除
-  dnsDelete: (id: number): any => request.delete(`/cert/dns/${id}`),
+  dnsDelete: (id: number): any => http.Delete(`/cert/dns/${id}`),
   // 证书列表
-  certs: (page: number, limit: number): any =>
-    request.get('/cert/cert', { params: { page, limit } }),
+  certs: (page: number, limit: number): any => http.Get('/cert/cert', { params: { page, limit } }),
   // 证书详情
-  certInfo: (id: number): any => request.get(`/cert/cert/${id}`),
+  certInfo: (id: number): any => http.Get(`/cert/cert/${id}`),
   // 证书上传
-  certUpload: (data: any): any => request.post('/cert/cert/upload', data),
+  certUpload: (data: any): any => http.Post('/cert/cert/upload', data),
   // 证书添加
-  certCreate: (data: any): any => request.post('/cert/cert', data),
+  certCreate: (data: any): any => http.Post('/cert/cert', data),
   // 证书更新
-  certUpdate: (id: number, data: any): any => request.put(`/cert/cert/${id}`, data),
+  certUpdate: (id: number, data: any): any => http.Put(`/cert/cert/${id}`, data),
   // 证书删除
-  certDelete: (id: number): any => request.delete(`/cert/cert/${id}`),
+  certDelete: (id: number): any => http.Delete(`/cert/cert/${id}`),
   // 证书自动签发
-  obtainAuto: (id: number): any => request.post(`/cert/cert/${id}/obtainAuto`, { id }),
+  obtainAuto: (id: number): any => http.Post(`/cert/cert/${id}/obtainAuto`, { id }),
   // 证书手动签发
-  obtainManual: (id: number): any => request.post(`/cert/cert/${id}/obtainManual`, { id }),
+  obtainManual: (id: number): any => http.Post(`/cert/cert/${id}/obtainManual`, { id }),
   // 证书自签名签发
-  obtainSelfSigned: (id: number): any => request.post(`/cert/cert/${id}/obtainSelfSigned`, { id }),
+  obtainSelfSigned: (id: number): any => http.Post(`/cert/cert/${id}/obtainSelfSigned`, { id }),
   // 续签
-  renew: (id: number): any => request.post(`/cert/cert/${id}/renew`, { id }),
+  renew: (id: number): any => http.Post(`/cert/cert/${id}/renew`, { id }),
   // 获取 DNS 记录
-  manualDNS: (id: number): any => request.post(`/cert/cert/${id}/manualDNS`, { id }),
+  manualDNS: (id: number): any => http.Post(`/cert/cert/${id}/manualDNS`, { id }),
   // 部署
   deploy: (id: number, website_id: number): any =>
-    request.post(`/cert/cert/${id}/deploy`, { id, website_id })
+    http.Post(`/cert/cert/${id}/deploy`, { id, website_id })
 }

web/src/utils/http/index.ts

@@ -47,14 +47,18 @@ export const http = createAlova({
       const { meta } = method
       if (status !== 200) {
         const code = json?.code ?? status
-        const message = resolveResError(code, json?.message ?? statusText)
+        console.log(json)
+        const message = resolveResError(
+          code,
+          json?.message && json.message.trim() !== '' ? json.message : statusText
+        )
         const noAlert = meta?.noAlert
         if (!noAlert) {
           if (code === 422) {
             window.$message.error(message)
           } else if (code !== 401) {
             window.$dialog.error({
-              title: '接口响应异常',
+              title: '错误',
               content: message,
               maskClosable: false
             })

web/src/views/apps/benchmark/IndexView.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import benchmark from '@/api/apps/benchmark'
-import TheIcon from '@/components/custom/TheIcon.vue'
-
 defineOptions({
   name: 'apps-benchmark-index'
 })
 
+import benchmark from '@/api/apps/benchmark'
+import TheIcon from '@/components/custom/TheIcon.vue'
+
 const inTest = ref(false)
 const current = ref('CPU')
 const progress = ref(0)

web/src/views/apps/php74/IndexView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import PhpView from '@/views/apps/php/PhpView.vue'
-
 defineOptions({
   name: 'apps-php74-index'
 })
+
+import PhpView from '@/views/apps/php/PhpView.vue'
 </script>
 
 <template>

web/src/views/apps/php80/IndexView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import PhpView from '@/views/apps/php/PhpView.vue'
-
 defineOptions({
   name: 'apps-php80-index'
 })
+
+import PhpView from '@/views/apps/php/PhpView.vue'
 </script>
 
 <template>

web/src/views/apps/php81/IndexView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import PhpView from '@/views/apps/php/PhpView.vue'
-
 defineOptions({
   name: 'apps-php81-index'
 })
+
+import PhpView from '@/views/apps/php/PhpView.vue'
 </script>
 
 <template>

web/src/views/apps/php82/IndexView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import PhpView from '@/views/apps/php/PhpView.vue'
-
 defineOptions({
   name: 'apps-php82-index'
 })
+
+import PhpView from '@/views/apps/php/PhpView.vue'
 </script>
 
 <template>

web/src/views/apps/php83/IndexView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import PhpView from '@/views/apps/php/PhpView.vue'
-
 defineOptions({
   name: 'apps-php83-index'
 })
+
+import PhpView from '@/views/apps/php/PhpView.vue'
 </script>
 
 <template>

web/src/views/apps/php84/IndexView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import PhpView from '@/views/apps/php/PhpView.vue'
-
 defineOptions({
   name: 'apps-php84-index'
 })
+
+import PhpView from '@/views/apps/php/PhpView.vue'
 </script>
 
 <template>

web/src/views/apps/toolbox/IndexView.vue

@@ -23,69 +23,68 @@ const timezones = ref<any[]>([])
 const time = ref(DateTime.now().toMillis())
 const rootPassword = ref('')
 
-const fetchDNS = async () => {
-  const data = await toolbox.dns()
+useRequest(toolbox.dns()).onSuccess(({ data }) => {
   dns1.value = data[0]
   dns2.value = data[1]
-}
-
-const fetchSwap = async () => {
-  const data = await toolbox.swap()
+})
+useRequest(toolbox.swap()).onSuccess(({ data }) => {
   swap.value = data.size
   swapFree.value = data.free
   swapUsed.value = data.used
   swapTotal.value = data.total
-}
-
-const fetchHost = async () => {
-  hostname.value = await toolbox.hostname()
-  hosts.value = await toolbox.hosts()
-}
-
-const fetchTimezone = async () => {
-  const data = toolbox.timezone()
+})
+useRequest(toolbox.hostname()).onSuccess(({ data }) => {
+  hostname.value = data
+})
+useRequest(toolbox.hosts()).onSuccess(({ data }) => {
+  hosts.value = data
+})
+useRequest(toolbox.timezone()).onSuccess(({ data }) => {
   timezone.value = data.timezone
   timezones.value = data.timezones
+})
+
+const handleUpdateDNS = () => {
+  useRequest(toolbox.updateDns(dns1.value, dns2.value)).onSuccess(() => {
+    window.$message.success('保存成功')
+  })
 }
 
-const handleUpdateDNS = async () => {
-  await toolbox.updateDns(dns1.value, dns2.value)
-  window.$message.success('保存成功')
-}
-
-const handleUpdateSwap = async () => {
-  await toolbox.updateSwap(swap.value)
-  window.$message.success('保存成功')
+const handleUpdateSwap = () => {
+  useRequest(toolbox.updateSwap(swap.value)).onSuccess(() => {
+    window.$message.success('保存成功')
+  })
 }
 
 const handleUpdateHost = async () => {
-  await toolbox.updateHostname(hostname.value)
-  await toolbox.updateHosts(hosts.value)
-  window.$message.success('保存成功')
+  await Promise.all([
+    useRequest(toolbox.updateHostname(hostname.value)),
+    useRequest(toolbox.updateHosts(hosts.value))
+  ]).then(() => {
+    window.$message.success('保存成功')
+  })
 }
 
 const handleUpdateRootPassword = async () => {
-  await toolbox.updateRootPassword(rootPassword.value)
-  window.$message.success('保存成功')
+  useRequest(toolbox.updateRootPassword(rootPassword.value)).onSuccess(() => {
+    window.$message.success('保存成功')
+  })
 }
 
 const handleUpdateTime = async () => {
-  await toolbox.updateTime(String(DateTime.fromMillis(time.value).toISO()))
-  await toolbox.updateTimezone(timezone.value)
-  window.$message.success('保存成功')
+  await Promise.all([
+    useRequest(toolbox.updateTime(String(DateTime.fromMillis(time.value).toISO()))),
+    useRequest(toolbox.updateTimezone(timezone.value))
+  ]).then(() => {
+    window.$message.success('保存成功')
+  })
 }
 
-const handleSyncTime = async () => {
-  await toolbox.syncTime()
-  window.$message.success('同步成功')
+const handleSyncTime = () => {
+  useRequest(toolbox.syncTime()).onSuccess(() => {
+    window.$message.success('同步成功')
+  })
 }
-
-onMounted(() => {
-  fetchDNS()
-  fetchSwap()
-  fetchHost()
-  fetchTimezone()
-})
 </script>
 
 <template>

web/src/views/cert/AccountView.vue

@@ -10,7 +10,6 @@ import {
 } from 'naive-ui'
 
 import cert from '@/api/panel/cert'
-import type { Account } from '@/views/cert/types'
 
 const props = defineProps({
   caProviders: {
@@ -104,9 +103,10 @@ const columns: any = [
           NPopconfirm,
           {
             onPositiveClick: async () => {
-              await cert.accountDelete(row.id)
-              window.$message.success('删除成功')
-              onPageChange(1)
+              useRequest(cert.accountDelete(row.id)).onSuccess(() => {
+                window.$message.success('删除成功')
+                refresh()
+              })
             }
           },
           {
@@ -132,55 +132,39 @@ const columns: any = [
     }
   }
 ]
-const data = ref<Account[]>([] as Account[])
 
-const pagination = reactive({
-  page: 1,
-  pageCount: 1,
-  pageSize: 20,
-  itemCount: 0,
-  showQuickJumper: true,
-  showSizePicker: true,
-  pageSizes: [20, 50, 100, 200]
-})
-
-const onPageChange = (page: number) => {
-  pagination.page = page
-  getAccountList(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 getAccountList = async (page: number, limit: number) => {
-  const { data } = await cert.accounts(page, limit)
-  return data
-}
+const { loading, data, page, total, pageSize, pageCount, refresh } = usePagination(
+  (page, pageSize) => cert.accounts(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    initialPageSize: 20,
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
 const handleUpdateAccount = async () => {
   messageReactive = window.$message.loading('正在向 CA 注册账号，请耐心等待', {
     duration: 0
   })
-  await cert.accountUpdate(updateAccount.value, updateAccountModel.value)
-  messageReactive.destroy()
-  window.$message.success('更新成功')
-  updateAccountModal.value = false
-  onPageChange(1)
-  updateAccountModel.value.email = ''
-  updateAccountModel.value.hmac_encoded = ''
-  updateAccountModel.value.kid = ''
+  useRequest(cert.accountUpdate(updateAccount.value, updateAccountModel.value))
+    .onSuccess(() => {
+      refresh()
+      updateAccountModal.value = false
+      updateAccountModel.value.email = ''
+      updateAccountModel.value.hmac_encoded = ''
+      updateAccountModel.value.kid = ''
+      window.$message.success('更新成功')
+    })
+    .onComplete(() => {
+      messageReactive?.destroy()
+    })
 }
 
 onMounted(() => {
-  onPageChange(pagination.page)
+  refresh()
   window.$bus.on('cert:refresh-account', () => {
-    onPageChange(pagination.page)
+    refresh()
   })
 })
 
@@ -195,13 +179,21 @@ onUnmounted(() => {
       striped
       remote
       :scroll-x="1000"
-      :loading="false"
+      :loading="loading"
       :columns="columns"
       :data="data"
       :row-key="(row: any) => row.id"
-      :pagination="pagination"
-      @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-space>
   <n-modal

web/src/views/cert/CertView.vue

@@ -6,7 +6,6 @@ import { NButton, NDataTable, NFlex, NPopconfirm, NSpace, NSwitch, NTag } from '
 import cert from '@/api/panel/cert'
 import { formatDateTime } from '@/utils'
 import ObtainModal from '@/views/cert/ObtainModal.vue'
-import type { Cert } from '@/views/cert/types'
 
 const props = defineProps({
   algorithms: {
@@ -239,10 +238,14 @@ const columns: any = [
                   messageReactive = window.$message.loading('请稍后...', {
                     duration: 0
                   })
-                  await cert.renew(row.id)
-                  messageReactive.destroy()
-                  window.$message.success('续签成功')
-                  onPageChange(1)
+                  useRequest(cert.renew(row.id))
+                    .onSuccess(() => {
+                      refresh()
+                      window.$message.success('续签成功')
+                    })
+                    .onComplete(() => {
+                      messageReactive?.destroy()
+                    })
                 }
               },
               {
@@ -295,9 +298,10 @@ const columns: any = [
           NPopconfirm,
           {
             onPositiveClick: async () => {
-              await cert.certDelete(row.id)
-              window.$message.success('删除成功')
-              onPageChange(1)
+              useRequest(cert.certDelete(row.id)).onSuccess(() => {
+                refresh()
+                window.$message.success('删除成功')
+              })
             }
           },
           {
@@ -323,57 +327,42 @@ const columns: any = [
     }
   }
 ]
-const data = ref<Cert[]>([] as Cert[])
 
-const pagination = reactive({
-  page: 1,
-  pageCount: 1,
-  pageSize: 20,
-  itemCount: 0,
-  showQuickJumper: true,
-  showSizePicker: true,
-  pageSizes: [20, 50, 100, 200]
-})
+const { loading, data, page, total, pageSize, pageCount, refresh } = usePagination(
+  (page, pageSize) => cert.certs(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    initialPageSize: 20,
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
-const onPageChange = (page: number) => {
-  pagination.page = page
-  getCertList(page, pagination.pageSize).then((res) => {
-    data.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
+const handleUpdateCert = async () => {
+  useRequest(cert.certUpdate(updateCert.value, updateModel.value)).onSuccess(() => {
+    refresh()
+    updateModal.value = false
+    updateModel.value.domains = []
+    updateModel.value.type = 'P256'
+    updateModel.value.dns_id = null
+    updateModel.value.account_id = null
+    updateModel.value.website_id = null
+    updateModel.value.auto_renew = true
+    updateModel.value.cert = ''
+    updateModel.value.key = ''
+    window.$message.success('更新成功')
   })
 }
 
-const onPageSizeChange = (pageSize: number) => {
-  pagination.pageSize = pageSize
-  onPageChange(1)
-}
-
-const getCertList = async (page: number, limit: number) => {
-  const { data } = await cert.certs(page, limit)
-  return data
-}
-
-const handleUpdateCert = async () => {
-  await cert.certUpdate(updateCert.value, updateModel.value)
-  window.$message.success('更新成功')
-  updateModal.value = false
-  onPageChange(1)
-  updateModel.value.domains = []
-  updateModel.value.type = 'P256'
-  updateModel.value.dns_id = null
-  updateModel.value.account_id = null
-  updateModel.value.website_id = null
-  updateModel.value.auto_renew = true
-  updateModel.value.cert = ''
-  updateModel.value.key = ''
-}
-
 const handleDeployCert = async () => {
-  for (const website of deployModel.value.websites) {
-    await cert.deploy(deployModel.value.id, website)
-  }
-  window.$message.success('部署成功')
+  const promises = deployModel.value.websites.map((website: any) =>
+    useRequest(cert.deploy(deployModel.value.id, website)).onSuccess(() => {
+      window.$message.success(`部署网站 ${website.name} 成功`)
+    })
+  )
+
+  await Promise.all(promises)
+
   deployModal.value = false
   deployModel.value.id = null
   deployModel.value.websites = []
@@ -385,9 +374,9 @@ const handleShowModalClose = () => {
 }
 
 onMounted(() => {
-  onPageChange(pagination.page)
+  refresh()
   window.$bus.on('cert:refresh-cert', () => {
-    onPageChange(pagination.page)
+    refresh()
   })
 })
 
@@ -402,13 +391,21 @@ onUnmounted(() => {
       striped
       remote
       :scroll-x="1600"
-      :loading="false"
+      :loading="loading"
       :columns="columns"
       :data="data"
       :row-key="(row: any) => row.id"
-      :pagination="pagination"
-      @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-space>
   <n-modal

web/src/views/cert/CreateAccountModal.vue

@@ -32,23 +32,22 @@ const showEAB = computed(() => {
   return model.value.ca === 'google' || model.value.ca === 'sslcom'
 })
 
-const handleCreateAccount = async () => {
+const handleCreateAccount = () => {
   messageReactive = window.$message.loading('正在向 CA 注册账号，请耐心等待', {
     duration: 0
   })
-  cert
-    .accountCreate(model.value)
-    .then(() => {
+  useRequest(cert.accountCreate(model.value))
+    .onSuccess(() => {
+      window.$bus.emit('cert:refresh-account')
+      window.$bus.emit('cert:refresh-async')
       show.value = false
-      window.$message.success('创建成功')
       model.value.email = ''
       model.value.hmac_encoded = ''
       model.value.kid = ''
+      window.$message.success('创建成功')
     })
-    .finally(() => {
+    .onComplete(() => {
       messageReactive?.destroy()
-      window.$bus.emit('cert:refresh-account')
-      window.$bus.emit('cert:refresh-async')
     })
 }
 </script>

web/src/views/cert/CreateCertModal.vue

@@ -34,18 +34,19 @@ const model = ref<any>({
   auto_renew: true
 })
 
-const handleCreateCert = async () => {
-  await cert.certCreate(model.value)
-  show.value = false
-  window.$message.success('创建成功')
-  model.value.domains = []
-  model.value.dns_id = 0
-  model.value.type = 'P256'
-  model.value.account_id = null
-  model.value.website_id = null
-  model.value.auto_renew = true
-  window.$bus.emit('cert:refresh-cert')
-  window.$bus.emit('cert:refresh-async')
+const handleCreateCert = () => {
+  useRequest(cert.certCreate(model.value)).onSuccess(() => {
+    window.$bus.emit('cert:refresh-cert')
+    window.$bus.emit('cert:refresh-async')
+    show.value = false
+    model.value.domains = []
+    model.value.dns_id = 0
+    model.value.type = 'P256'
+    model.value.account_id = null
+    model.value.website_id = null
+    model.value.auto_renew = true
+    window.$message.success('创建成功')
+  })
 }
 </script>
 

web/src/views/cert/CreateDnsModal.vue

@@ -23,15 +23,15 @@ const model = ref<any>({
 })
 
 const handleCreateDNS = async () => {
-  await cert.dnsCreate(model.value)
-  show.value = false
-  window.$message.success('创建成功')
-  show.value = false
-  model.value.data.ak = ''
-  model.value.data.sk = ''
-  model.value.name = ''
-  window.$bus.emit('cert:refresh-dns')
-  window.$bus.emit('cert:refresh-async')
+  useRequest(cert.dnsCreate(model.value)).onSuccess(() => {
+    window.$bus.emit('cert:refresh-dns')
+    window.$bus.emit('cert:refresh-async')
+    show.value = false
+    model.value.data.ak = ''
+    model.value.data.sk = ''
+    model.value.name = ''
+    window.$message.success('创建成功')
+  })
 }
 </script>
 

web/src/views/cert/DnsView.vue

@@ -2,7 +2,6 @@
 import { NButton, NDataTable, NInput, NPopconfirm, NSpace, NTag } from 'naive-ui'
 
 import cert from '@/api/panel/cert'
-import type { DNS } from '@/views/cert/types'
 
 const props = defineProps({
   dnsProviders: {
@@ -94,9 +93,10 @@ const columns: any = [
           NPopconfirm,
           {
             onPositiveClick: async () => {
-              await cert.dnsDelete(row.id)
-              window.$message.success('删除成功')
-              onPageChange(1)
+              useRequest(cert.dnsDelete(row.id)).onSuccess(() => {
+                refresh()
+                window.$message.success('删除成功')
+              })
             }
           },
           {
@@ -123,51 +123,31 @@ const columns: any = [
   }
 ]
 
-const data = ref<DNS[]>([] as DNS[])
+const { loading, data, page, total, pageSize, pageCount, refresh } = usePagination(
+  (page, pageSize) => cert.dns(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    initialPageSize: 20,
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
-const pagination = reactive({
-  page: 1,
-  pageCount: 1,
-  pageSize: 20,
-  itemCount: 0,
-  showQuickJumper: true,
-  showSizePicker: true,
-  pageSizes: [20, 50, 100, 200]
-})
-
-const onPageChange = (page: number) => {
-  pagination.page = page
-  getDnsList(page, pagination.pageSize).then((res) => {
-    data.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
+const handleUpdateDNS = () => {
+  useRequest(cert.dnsUpdate(updateDNS.value, updateDNSModel.value)).onSuccess(() => {
+    refresh()
+    updateDNSModal.value = false
+    updateDNSModel.value.data.ak = ''
+    updateDNSModel.value.data.sk = ''
+    updateDNSModel.value.name = ''
+    window.$message.success('更新成功')
   })
 }
 
-const onPageSizeChange = (pageSize: number) => {
-  pagination.pageSize = pageSize
-  onPageChange(1)
-}
-
-const getDnsList = async (page: number, limit: number) => {
-  const { data } = await cert.dns(page, limit)
-  return data
-}
-
-const handleUpdateDNS = async () => {
-  await cert.dnsUpdate(updateDNS.value, updateDNSModel.value)
-  window.$message.success('更新成功')
-  updateDNSModal.value = false
-  onPageChange(1)
-  updateDNSModel.value.data.ak = ''
-  updateDNSModel.value.data.sk = ''
-  updateDNSModel.value.name = ''
-}
-
-onMounted(async () => {
-  onPageChange(pagination.page)
+onMounted(() => {
+  refresh()
   window.$bus.on('cert:refresh-dns', () => {
-    onPageChange(pagination.page)
+    refresh()
   })
 })
 
@@ -182,13 +162,21 @@ onUnmounted(() => {
       striped
       remote
       :scroll-x="1000"
-      :loading="false"
+      :loading="loading"
       :columns="columns"
       :data="data"
       :row-key="(row: any) => row.id"
-      :pagination="pagination"
-      @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-space>
   <n-modal

web/src/views/cert/IndexView.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import UploadCertModal from '@/views/cert/UploadCertModal.vue'
-
 defineOptions({
   name: 'cert-index'
 })
@@ -16,6 +14,7 @@ import CreateAccountModal from '@/views/cert/CreateAccountModal.vue'
 import CreateCertModal from '@/views/cert/CreateCertModal.vue'
 import CreateDnsModal from '@/views/cert/CreateDnsModal.vue'
 import DnsView from '@/views/cert/DnsView.vue'
+import UploadCertModal from '@/views/cert/UploadCertModal.vue'
 
 const currentTab = ref('cert')
 
@@ -32,8 +31,9 @@ const dnsProviders = ref<any>([])
 const caProviders = ref<any>([])
 
 const getAsyncData = async () => {
-  const { data: algorithmData } = await cert.algorithms()
-  algorithms.value = algorithmData
+  useRequest(cert.algorithms()).onSuccess(({ data }) => {
+    algorithms.value = data
+  })
 
   websites.value = []
   useRequest(app.isInstalled('nginx')).onSuccess(({ data }) => {
@@ -49,29 +49,32 @@ const getAsyncData = async () => {
     }
   })
 
-  const { data: dnsData } = await cert.dns(1, 10000)
   dns.value = []
-  for (const item of dnsData.items) {
-    dns.value.push({
-      label: item.name,
-      value: item.id
-    })
-  }
+  useRequest(cert.dns(1, 10000)).onSuccess(({ data }) => {
+    for (const item of data.items) {
+      dns.value.push({
+        label: item.name,
+        value: item.id
+      })
+    }
+  })
 
-  const { data: accountData } = await cert.accounts(1, 10000)
   accounts.value = []
-  for (const item of accountData.items) {
-    accounts.value.push({
-      label: item.email,
-      value: item.id
-    })
-  }
+  useRequest(cert.accounts(1, 10000)).onSuccess(({ data }) => {
+    for (const item of data.items) {
+      accounts.value.push({
+        label: item.email,
+        value: item.id
+      })
+    }
+  })
 
-  const { data: dnsProviderData } = await cert.dnsProviders()
-  dnsProviders.value = dnsProviderData
-
-  const { data: caProviderData } = await cert.caProviders()
-  caProviders.value = caProviderData
+  useRequest(cert.dnsProviders()).onSuccess(({ data }) => {
+    dnsProviders.value = data
+  })
+  useRequest(cert.caProviders()).onSuccess(({ data }) => {
+    caProviders.value = data
+  })
 }
 
 onMounted(() => {

web/src/views/cert/ObtainModal.vue

@@ -18,24 +18,23 @@ const options = [
   { label: '自签名', value: 'self-signed' }
 ]
 
-const handleSubmit = async () => {
+const handleSubmit = () => {
   messageReactive = window.$message.loading('请稍后...', {
     duration: 0
   })
   if (model.value.type == 'auto') {
-    await cert
-      .obtainAuto(id.value)
-      .then(() => {
-        window.$message.success('签发成功')
-        show.value = false
-      })
-      .finally(() => {
-        messageReactive?.destroy()
+    useRequest(cert.obtainAuto(id.value))
+      .onSuccess(() => {
         window.$bus.emit('cert:refresh-cert')
         window.$bus.emit('cert:refresh-async')
+        show.value = false
+        window.$message.success('签发成功')
+      })
+      .onComplete(() => {
+        messageReactive?.destroy()
       })
   } else if (model.value.type == 'manual') {
-    const { data } = await cert.manualDNS(id.value)
+    const { data } = useRequest(cert.manualDNS(id.value))
     messageReactive.destroy()
     window.$message.info('请先前往域名处设置 DNS 解析，再继续签发')
     const d = window.$dialog.info({
@@ -65,31 +64,29 @@ const handleSubmit = async () => {
         messageReactive = window.$message.loading('请稍后...', {
           duration: 0
         })
-        await cert
-          .obtainManual(id.value)
-          .then(() => {
-            window.$message.success('签发成功')
-            show.value = false
-          })
-          .finally(() => {
-            d.loading = false
-            messageReactive?.destroy()
+        useRequest(cert.obtainManual(id.value))
+          .onSuccess(() => {
             window.$bus.emit('cert:refresh-cert')
             window.$bus.emit('cert:refresh-async')
+            show.value = false
+            window.$message.success('签发成功')
+          })
+          .onComplete(() => {
+            d.loading = false
+            messageReactive?.destroy()
           })
       }
     })
   } else {
-    await cert
-      .obtainSelfSigned(id.value)
-      .then(() => {
-        window.$message.success('签发成功')
-        show.value = false
-      })
-      .finally(() => {
-        messageReactive?.destroy()
+    useRequest(cert.obtainSelfSigned(id.value))
+      .onSuccess(() => {
         window.$bus.emit('cert:refresh-cert')
         window.$bus.emit('cert:refresh-async')
+        show.value = false
+        window.$message.success('签发成功')
+      })
+      .onComplete(() => {
+        messageReactive?.destroy()
       })
   }
 }

web/src/views/cert/UploadCertModal.vue

@@ -9,14 +9,15 @@ const model = ref<any>({
   key: ''
 })
 
-const handleSubmit = async () => {
-  await cert.certUpload(model.value)
-  show.value = false
-  window.$message.success('创建成功')
-  model.value.cert = ''
-  model.value.key = ''
-  window.$bus.emit('cert:refresh-cert')
-  window.$bus.emit('cert:refresh-async')
+const handleSubmit = () => {
+  useRequest(cert.certUpload(model.value)).onSuccess(() => {
+    window.$bus.emit('cert:refresh-cert')
+    window.$bus.emit('cert:refresh-async')
+    show.value = false
+    model.value.cert = ''
+    model.value.key = ''
+    window.$message.success('创建成功')
+  })
 }
 </script>
 

web/src/views/cert/types.ts

@@ -1,53 +0,0 @@
-export interface Cert {
-  id: number
-  account_id: number
-  website_id: number
-  dns_id: number
-  type: string
-  domains: string[]
-  auto_renew: boolean
-  cert_url: string
-  cert: string
-  key: string
-  created_at: string
-  updated_at: string
-  website: Website
-  dns: DNS
-  account: Account
-}
-
-export interface Website {
-  id: number
-  name: string
-  status: boolean
-  path: string
-  php: string
-  ssl: boolean
-  remark: string
-  created_at: string
-  updated_at: string
-}
-
-export interface DNS {
-  id: number
-  type: string
-  name: string
-  data: {
-    ak: string
-    sk: string
-  }
-  created_at: string
-  updated_at: string
-}
-
-export interface Account {
-  id: number
-  email: string
-  ca: string
-  kid: string
-  hmac_encoded: string
-  private_key: string
-  key_type: string
-  created_at: string
-  updated_at: string
-}

web/src/views/dashboard/IndexView.vue

@@ -228,7 +228,7 @@ const chartOptions = computed(() => {
 
 let isFetching = false
 
-const fetchCurrent = async () => {
+const fetchCurrent = () => {
   if (isFetching) return
   isFetching = true
   useRequest(dashboard.current(nets.value, disks.value))

web/src/views/database/CreateDatabaseModal.vue

@@ -32,7 +32,7 @@ watch(
   () => show.value,
   (value) => {
     if (value) {
-      database.serverList(1, 10000).then((data: any) => {
+      useRequest(database.serverList(1, 10000)).onSuccess(({ data }) => {
         for (const server of data.items) {
           servers.value.push({
             label: server.name,

web/src/views/database/CreateUserModal.vue

@@ -32,7 +32,7 @@ watch(
   () => show.value,
   (value) => {
     if (value) {
-      database.serverList(1, 10000).then((data: any) => {
+      useRequest(database.serverList(1, 10000)).onSuccess(({ data }) => {
         for (const server of data.items) {
           servers.value.push({
             label: server.name,

web/src/views/database/DatabaseList.vue

@@ -115,7 +115,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   }
 )
 
-const handleDelete = async (serverID: number, name: string) => {
+const handleDelete = (serverID: number, name: string) => {
   useRequest(database.delete(serverID, name)).onSuccess(() => {
     refresh()
     window.$message.success('删除成功')

web/src/views/database/ServerList.vue

@@ -138,10 +138,10 @@ const columns: any = [
         h(
           NPopconfirm,
           {
-            onPositiveClick: async () => {
-              await database.serverSync(row.id).then(() => {
-                window.$message.success('同步成功')
+            onPositiveClick: () => {
+              useRequest(database.serverSync(row.id)).onSuccess(() => {
                 refresh()
+                window.$message.success('同步成功')
               })
             }
           },
@@ -227,7 +227,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   }
 )
 
-const handleDelete = async (id: number) => {
+const handleDelete = (id: number) => {
   useRequest(database.serverDelete(id)).onSuccess(() => {
     refresh()
     window.$message.success('删除成功')

web/src/views/database/UpdateServerModal.vue

@@ -25,7 +25,7 @@ watch(
   () => show.value,
   (value) => {
     if (value && id.value) {
-      database.serverGet(id.value).then((data: any) => {
+      useRequest(database.serverGet(id.value)).onSuccess(({ data }) => {
         updateModel.value.name = data.name
         updateModel.value.host = data.host
         updateModel.value.port = data.port

web/src/views/database/UpdateUserModal.vue

@@ -22,7 +22,7 @@ watch(
   () => show.value,
   (value) => {
     if (value && id.value) {
-      database.userGet(id.value).then((data: any) => {
+      useRequest(database.userGet(id.value)).onSuccess(({ data }) => {
         updateModel.value.password = data.password
         updateModel.value.privileges = data.privileges
         updateModel.value.remark = data.remark

web/src/views/database/UserList.vue

@@ -207,7 +207,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   }
 )
 
-const handleDelete = async (id: number) => {
+const handleDelete = (id: number) => {
   useRequest(database.userDelete(id)).onSuccess(() => {
     refresh()
     window.$message.success('删除成功')

web/src/views/file/ListTable.vue

@@ -374,7 +374,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   (page, pageSize) => file.list(path.value, page, pageSize, sort.value),
   {
     initialData: { total: 0, list: [] },
-    initialPageSize: 20,
+    initialPageSize: 100,
     total: (res: any) => res.total,
     data: (res: any) => res.items
   }

web/src/views/file/SearchModal.vue

@@ -126,15 +126,13 @@ const handlePageChange = (page: number) => {
 
 const search = async (page: number) => {
   loading.value = true
-  useRequest(file.search(path.value, keyword.value, sub.value, page, pagination.pageSize!))
-    .then(({ data }) => {
-      data.value = data.items
-      pagination.itemCount = data.total
-      pagination.pageCount = data.total / pagination.pageSize! + 1
-    })
-    .catch(() => {
-      window.$message.error('搜索失败')
-    })
+  useRequest(
+    file.search(path.value, keyword.value, sub.value, page, pagination.pageSize!)
+  ).onSuccess(({ data }) => {
+    data.value = data.items
+    pagination.itemCount = data.total
+    pagination.pageCount = data.total / pagination.pageSize! + 1
+  })
   loading.value = false
 }
 

web/src/views/firewall/ForwardView.vue

@@ -139,7 +139,7 @@ const batchDelete = async () => {
 
   const promises = selectedRowKeys.value.map((key: any) => {
     const rule = JSON.parse(key)
-    return useRequest(firewall.deleteForward(rule)).then(() => {
+    return useRequest(firewall.deleteForward(rule)).onSuccess(() => {
       window.$message.success(`${rule.protocol} ${rule.target_ip}:${rule.target_port} 删除成功`)
     })
   })

web/src/views/firewall/IpRuleView.vue

@@ -181,7 +181,7 @@ const batchDelete = async () => {
 
   const promises = selectedRowKeys.value.map((key: any) => {
     const rule = JSON.parse(key)
-    return useRequest(firewall.deleteIpRule(rule)).then(() => {
+    return useRequest(firewall.deleteIpRule(rule)).onSuccess(() => {
       window.$message.success(`${rule.address} 删除成功`)
     })
   })

web/src/views/firewall/RuleView.vue

@@ -218,7 +218,7 @@ const batchDelete = async () => {
 
   const promises = selectedRowKeys.value.map((key: any) => {
     const rule = JSON.parse(key)
-    return useRequest(firewall.deleteRule(rule)).then(() => {
+    return useRequest(firewall.deleteRule(rule)).onSuccess(() => {
       const port =
         rule.port_start == rule.port_end ? rule.port_start : `${rule.port_start}-${rule.port_end}`
       window.$message.success(`${rule.family} 规则 ${port}/${rule.protocol} 删除成功`)

web/src/views/login/IndexView.vue

@@ -64,7 +64,7 @@ async function handleLogin() {
     }
 
     await addDynamicRoutes()
-    await user.info().then((data: any) => {
+    useRequest(user.info()).onSuccess(({ data }) => {
       userStore.set(data)
     })
     if (query.redirect) {
@@ -84,7 +84,7 @@ watch(
     if (isLogin) {
       console.log(isLogin)
       await addDynamicRoutes()
-      await user.info().then((data: any) => {
+      useRequest(user.info()).onSuccess(({ data }) => {
         userStore.set(data)
       })
       if (query.redirect) {

web/src/views/ssh/CreateModal.vue

@@ -16,7 +16,7 @@ const model = ref({
   remark: ''
 })
 
-const handleSubmit = async () => {
+const handleSubmit = () => {
   loading.value = true
   useRequest(ssh.create(model.value))
     .onSuccess(() => {

web/src/views/ssh/IndexView.vue

@@ -104,7 +104,7 @@ const fetchData = async () => {
   await openSession(updateId.value === 0 ? Number(list.value[0].key) : updateId.value)
 }
 
-const handleDelete = async (id: number) => {
+const handleDelete = (id: number) => {
   useRequest(ssh.delete(id)).onSuccess(() => {
     list.value = list.value.filter((item: any) => item.key !== id)
     if (current.value === id) {

web/src/views/ssh/UpdateModal.vue

@@ -17,7 +17,7 @@ const model = ref({
   remark: ''
 })
 
-const handleSubmit = async () => {
+const handleSubmit = () => {
   loading.value = true
   useRequest(ssh.update(id.value, model.value))
     .onSuccess(() => {

web/src/views/task/IndexView.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { NButton } from 'naive-ui'
-
 defineOptions({
   name: 'task-index'
 })
@@ -10,6 +8,7 @@ import CreateModal from '@/views/task/CreateModal.vue'
 import CronView from '@/views/task/CronView.vue'
 import SystemView from '@/views/task/SystemView.vue'
 import TaskView from '@/views/task/TaskView.vue'
+import { NButton } from 'naive-ui'
 
 const current = ref('cron')
 

web/src/views/task/SystemView.vue

@@ -99,10 +99,11 @@ const columns: any = [
       return h(
         NPopconfirm,
         {
-          onPositiveClick: async () => {
-            await process.kill(row.pid)
-            await refresh()
-            window.$message.success(`进程 ${row.pid} 已终止`)
+          onPositiveClick: () => {
+            useRequest(process.kill(row.pid)).onSuccess(() => {
+              refresh()
+              window.$message.success(`进程 ${row.pid} 已终止`)
+            })
           }
         },
         {

web/src/views/website/EditView.vue

@@ -10,38 +10,38 @@ import { NButton } from 'naive-ui'
 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'
 
 let messageReactive: MessageReactive | null = null
 
 const current = ref('listen')
 const route = useRoute()
 const { id } = route.params
-
-const setting = ref<any>({
-  id: 0,
-  name: '',
-  listens: [],
-  domains: [],
-  root: '',
-  path: '',
-  index: [],
-  php: 0,
-  open_basedir: false,
-  https: false,
-  ssl_certificate: '',
-  ssl_certificate_key: '',
-  ssl_not_before: '',
-  ssl_not_after: '',
-  ssl_dns_names: [],
-  ssl_issuer: '',
-  ssl_ocsp_server: [],
-  http_redirect: false,
-  hsts: false,
-  ocsp: false,
-  rewrite: '',
-  raw: '',
-  log: ''
+const { data: setting, send: fetchSetting } = useRequest(website.config(Number(id)), {
+  initialData: {
+    id: 0,
+    name: '',
+    listens: [],
+    domains: [],
+    root: '',
+    path: '',
+    index: [],
+    php: 0,
+    open_basedir: false,
+    https: false,
+    ssl_certificate: '',
+    ssl_certificate_key: '',
+    ssl_not_before: '',
+    ssl_not_after: '',
+    ssl_dns_names: [],
+    ssl_issuer: '',
+    ssl_ocsp_server: [],
+    http_redirect: false,
+    hsts: false,
+    ocsp: false,
+    rewrite: '',
+    raw: '',
+    log: ''
+  }
 })
 const { data: installedDbAndPhp } = useRequest(dashboard.installedDbAndPhp, {
   initialData: {
@@ -59,7 +59,10 @@ const { data: installedDbAndPhp } = useRequest(dashboard.installedDbAndPhp, {
     ]
   }
 })
-const certs = ref<Cert[]>([] as Cert[])
+const certs = ref<any>([])
+useRequest(cert.certs(1, 10000)).onSuccess(({ data }) => {
+  certs.value = data.items
+})
 const { data: rewrites } = useRequest(website.rewrites, {
   initialData: {}
 })
@@ -70,7 +73,6 @@ const rewriteOptions = computed(() => {
   }))
 })
 const rewriteValue = ref(null)
-
 const title = computed(() => {
   if (setting.value) {
     return `编辑网站 - ${setting.value.name}`
@@ -78,22 +80,13 @@ const title = computed(() => {
   return '编辑网站 - 加载中...'
 })
 const certOptions = computed(() => {
-  return certs.value.map((item) => ({
+  return certs.value.map((item: any) => ({
     label: item.domains.join(', '),
     value: item.id
   }))
 })
 const selectedCert = ref(null)
 
-const fetchWebsiteSetting = async () => {
-  setting.value = await website.config(Number(id))
-}
-
-const fetchCertList = async () => {
-  const { data } = await cert.certs(1, 10000)
-  certs.value = data.items
-}
-
 const handleSave = () => {
   // 如果没有任何监听地址设置了https，则自动添加443
   if (setting.value.https && !setting.value.listens.some((item: any) => item.https)) {
@@ -113,14 +106,14 @@ const handleSave = () => {
   }
 
   useRequest(website.saveConfig(Number(id), setting.value)).onSuccess(() => {
-    fetchWebsiteSetting()
+    fetchSetting()
     window.$message.success('保存成功')
   })
 }
 
 const handleReset = () => {
   useRequest(website.resetConfig(Number(id))).onSuccess(() => {
-    fetchWebsiteSetting()
+    fetchSetting()
     window.$message.success('重置成功')
   })
 }
@@ -135,7 +128,7 @@ const handleObtainCert = async () => {
   })
   useRequest(website.obtainCert(Number(id)))
     .onSuccess(() => {
-      fetchWebsiteSetting()
+      fetchSetting()
       window.$message.success('签发成功')
     })
     .onComplete(() => {
@@ -144,7 +137,7 @@ const handleObtainCert = async () => {
 }
 
 const handleSelectCert = (value: number) => {
-  const cert = certs.value.find((item) => item.id === value)
+  const cert = certs.value.find((item: any) => item.id === value)
   if (cert) {
     setting.value.ssl_certificate = cert.cert
     setting.value.ssl_certificate_key = cert.key
@@ -153,7 +146,7 @@ const handleSelectCert = (value: number) => {
 
 const clearLog = async () => {
   useRequest(website.clearLog(Number(id))).onSuccess(() => {
-    fetchWebsiteSetting()
+    fetchSetting()
     window.$message.success('清空成功')
   })
 }
@@ -165,11 +158,6 @@ const onCreateListen = () => {
     quic: false
   }
 }
-
-onMounted(async () => {
-  await fetchWebsiteSetting()
-  await fetchCertList()
-})
 </script>
 
 <template>

web/src/views/website/IndexView.vue

@@ -315,7 +315,7 @@ const bulkDelete = async () => {
 
   const promises = selectedRowKeys.value.map((id: any) => {
     const site = data.value.find((item: any) => item.id === id)
-    return useRequest(website.delete(id, true, false)).then(() => {
+    return useRequest(website.delete(id, true, false)).onSuccess(() => {
       window.$message.success('网站 ' + site?.name + ' 删除成功')
     })
   })