diff --git a/web/src/api/apps/s3fs/index.ts b/web/src/api/apps/s3fs/index.ts
index 749846ec..5c54413d 100644
--- 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 } })
 }
diff --git a/web/src/api/apps/supervisor/index.ts b/web/src/api/apps/supervisor/index.ts
index 9128c9a1..179b8b9d 100644
--- 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}`)
 }
diff --git a/web/src/api/apps/toolbox/index.ts b/web/src/api/apps/toolbox/index.ts
index 0239cc4d..9ae7ddde 100644
--- 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 })
 }
diff --git a/web/src/api/panel/website/index.ts b/web/src/api/panel/website/index.ts
index baf4b13e..989dadd0 100644
--- 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`)
 }
diff --git a/web/src/views/apps/fail2ban/IndexView.vue b/web/src/views/apps/fail2ban/IndexView.vue
index e8bf784c..6745a68c 100644
--- 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,
diff --git a/web/src/views/apps/s3fs/IndexView.vue b/web/src/views/apps/s3fs/IndexView.vue
index 573efb81..b32761b6 100644
--- 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>
diff --git a/web/src/views/apps/s3fs/types.ts b/web/src/views/apps/s3fs/types.ts
deleted file mode 100644
index ed96d296..00000000
--- a/web/src/views/apps/s3fs/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface S3fs {
-  id: number
-  path: string
-  bucket: string
-  url: string
-}
diff --git a/web/src/views/apps/supervisor/IndexView.vue b/web/src/views/apps/supervisor/IndexView.vue
index fd8717cb..f0245023 100644
--- 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>
diff --git a/web/src/views/apps/supervisor/types.ts b/web/src/views/apps/supervisor/types.ts
deleted file mode 100644
index 41832467..00000000
--- a/web/src/views/apps/supervisor/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface Process {
-  name: string
-  status: string
-  pid: string
-  uptime: string
-}
diff --git a/web/src/views/apps/toolbox/IndexView.vue b/web/src/views/apps/toolbox/IndexView.vue
index 7d69c636..945564f9 100644
--- 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>
diff --git a/web/src/views/cert/IndexView.vue b/web/src/views/cert/IndexView.vue
index 18fb5fdc..94febd39 100644
--- 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,
diff --git a/web/src/views/task/CreateModal.vue b/web/src/views/task/CreateModal.vue
index cdda41d0..c356d4de 100644
--- 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,
diff --git a/web/src/views/website/EditView.vue b/web/src/views/website/EditView.vue
index a6a35c09..957c1912 100644
--- 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('清空成功')
   })
diff --git a/web/src/views/website/IndexView.vue b/web/src/views/website/IndexView.vue
index 0f019117..bb3f1a9c 100644
--- 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>
diff --git a/web/src/views/website/types.ts b/web/src/views/website/types.ts
deleted file mode 100644
index e6ba2c5d..00000000
--- a/web/src/views/website/types.ts
+++ /dev/null
@@ -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
-}