diff --git a/web/src/api/panel/app/index.ts b/web/src/api/panel/app/index.ts
index 62e23a30..65ecb795 100644
--- a/web/src/api/panel/app/index.ts
+++ b/web/src/api/panel/app/index.ts
@@ -1,19 +1,19 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 获取应用列表
-  list: (page: number, limit: number): any => request.get('/app/list', { params: { page, limit } }),
+  list: (page: number, limit: number): any => http.Get('/app/list', { params: { page, limit } }),
   // 安装应用
   install: (slug: string, channel: string | null): any =>
-    request.post('/app/install', { slug, channel }),
+    http.Post('/app/install', { slug, channel }),
   // 卸载应用
-  uninstall: (slug: string): any => request.post('/app/uninstall', { slug }),
+  uninstall: (slug: string): any => http.Post('/app/uninstall', { slug }),
   // 更新应用
-  update: (slug: string): any => request.post('/app/update', { slug }),
+  update: (slug: string): any => http.Post('/app/update', { slug }),
   // 设置首页显示
-  updateShow: (slug: string, show: boolean): any => request.post('/app/updateShow', { slug, show }),
+  updateShow: (slug: string, show: boolean): any => http.Post('/app/updateShow', { slug, show }),
   // 应用是否已安装
-  isInstalled: (slug: string): any => request.get('/app/isInstalled', { params: { slug } }),
+  isInstalled: (slug: string): any => http.Get('/app/isInstalled', { params: { slug } }),
   // 更新缓存
-  updateCache: (): any => request.get('/app/updateCache')
+  updateCache: (): any => http.Get('/app/updateCache')
 }
diff --git a/web/src/api/panel/safe/index.ts b/web/src/api/panel/safe/index.ts
index 25544030..031f609a 100644
--- a/web/src/api/panel/safe/index.ts
+++ b/web/src/api/panel/safe/index.ts
@@ -1,12 +1,8 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
-  // 获取SSH
-  ssh: (): any => request.get('/safe/ssh'),
-  // 设置SSH
-  setSsh: (status: boolean, port: number): any => request.post('/safe/ssh', { status, port }),
-  // 获取Ping状态
-  pingStatus: (): any => request.get('/safe/ping'),
-  // 设置Ping状态
-  setPingStatus: (status: boolean): any => request.post('/safe/ping', { status })
+  ssh: (): any => http.Get('/safe/ssh'),
+  updateSsh: (status: boolean, port: number): any => http.Post('/safe/ssh', { status, port }),
+  pingStatus: (): any => http.Get('/safe/ping'),
+  updatePingStatus: (status: boolean): any => http.Post('/safe/ping', { status })
 }
diff --git a/web/src/api/panel/setting/index.ts b/web/src/api/panel/setting/index.ts
index 64a181cb..d491458a 100644
--- a/web/src/api/panel/setting/index.ts
+++ b/web/src/api/panel/setting/index.ts
@@ -1,12 +1,8 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 获取设置
-  list: (): any => request.get('/setting'),
+  list: (): any => http.Get('/setting'),
   // 保存设置
-  update: (settings: any): any => request.post('/setting', settings),
-  // 获取HTTPS设置
-  getHttps: (): any => request.get('/setting/https'),
-  // 保存HTTPS设置
-  updateHttps: (https: any): any => request.post('/setting/https', https)
+  update: (settings: any): any => http.Post('/setting', settings)
 }
diff --git a/web/src/api/panel/ssh/index.ts b/web/src/api/panel/ssh/index.ts
index b1b0262c..e23998fa 100644
--- a/web/src/api/panel/ssh/index.ts
+++ b/web/src/api/panel/ssh/index.ts
@@ -1,14 +1,14 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 获取主机列表
-  list: (page: number, limit: number): any => request.get('/ssh', { params: { page, limit } }),
+  list: (page: number, limit: number): any => http.Get('/ssh', { params: { page, limit } }),
   // 获取主机信息
-  get: (id: number): any => request.get(`/ssh/${id}`),
+  get: (id: number): any => http.Get(`/ssh/${id}`),
   // 创建主机
-  create: (req: any): any => request.post('/ssh', req),
+  create: (req: any): any => http.Post('/ssh', req),
   // 修改主机
-  update: (id: number, req: any): any => request.put(`/ssh/${id}`, req),
+  update: (id: number, req: any): any => http.Put(`/ssh/${id}`, req),
   // 删除主机
-  delete: (id: number): any => request.delete(`/ssh/${id}`)
+  delete: (id: number): any => http.Delete(`/ssh/${id}`)
 }
diff --git a/web/src/api/panel/task/index.ts b/web/src/api/panel/task/index.ts
index 371fe343..e84fee17 100644
--- a/web/src/api/panel/task/index.ts
+++ b/web/src/api/panel/task/index.ts
@@ -1,12 +1,12 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 获取状态
-  status: (): any => request.get('/task/status'),
+  status: (): any => http.Get('/task/status'),
   // 获取任务列表
-  list: (page: number, limit: number): any => request.get('/task', { params: { page, limit } }),
+  list: (page: number, limit: number): any => http.Get('/task', { params: { page, limit } }),
   // 获取任务
-  get: (id: number): any => request.get('/task/' + id),
+  get: (id: number): any => http.Get(`/task/${id}`),
   // 删除任务
-  delete: (id: number): any => request.delete('/task/' + id)
+  delete: (id: number): any => http.Delete(`/task/${id}`)
 }
diff --git a/web/src/router/guard/app-install-guard.ts b/web/src/router/guard/app-install-guard.ts
index e16b421a..a5631169 100644
--- a/web/src/router/guard/app-install-guard.ts
+++ b/web/src/router/guard/app-install-guard.ts
@@ -5,9 +5,9 @@ export function createAppInstallGuard(router: Router) {
   router.beforeEach(async (to) => {
     const slug = to.path.split('/').pop()
     if (to.path.startsWith('/apps/') && slug) {
-      await app.isInstalled(slug).then((res) => {
-        if (!res.data.installed) {
-          window.$message.error(`应用 ${res.data.name} 未安装`)
+      useRequest(app.isInstalled(slug)).onSuccess(({ data }) => {
+        if (!data.installed) {
+          window.$message.error(`应用 ${data.name} 未安装`)
           return router.push({ name: 'app-index' })
         }
       })
@@ -15,32 +15,26 @@ export function createAppInstallGuard(router: Router) {
 
     // 网站
     if (to.path.startsWith('/website')) {
-      await app.isInstalled('nginx').then((res) => {
-        if (!res.data.installed) {
-          window.$message.error(`Web 服务器 ${res.data.name} 未安装`)
+      useRequest(app.isInstalled('nginx')).onSuccess(({ data }) => {
+        if (!data.installed) {
+          window.$message.error(`Web 服务器 ${data.name} 未安装`)
           return router.push({ name: 'app-index' })
         }
       })
     }
+
     // 容器
     if (to.path.startsWith('/container')) {
-      let flag = false
-      await app.isInstalled('docker').then((res) => {
-        if (res.data.installed) {
-          flag = true
+      useRequest(app.isInstalled('docker')).onSuccess(({ data }) => {
+        if (!data.installed) {
+          useRequest(app.isInstalled('podman')).onSuccess(({ data }) => {
+            if (!data.installed) {
+              window.$message.error(`容器引擎 Docker / Podman 未安装`)
+              return router.push({ name: 'app-index' })
+            }
+          })
         }
       })
-      if (!flag) {
-        await app.isInstalled('podman').then((res) => {
-          if (res.data.installed) {
-            flag = true
-          }
-        })
-      }
-      if (!flag) {
-        window.$message.error(`容器引擎 Docker / Podman 未安装`)
-        return router.push({ name: 'app-index' })
-      }
     }
   })
 }
diff --git a/web/src/views/app/IndexView.vue b/web/src/views/app/IndexView.vue
index 09ace032..ecff4670 100644
--- a/web/src/views/app/IndexView.vue
+++ b/web/src/views/app/IndexView.vue
@@ -8,17 +8,16 @@ import VersionModal from '@/views/app/VersionModal.vue'
 import { NButton, NDataTable, NFlex, NPopconfirm, NSwitch } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 
+import app from '@/api/panel/app'
 import TheIcon from '@/components/custom/TheIcon.vue'
 import { router } from '@/router'
 import { renderIcon } from '@/utils'
-import type { App } from '@/views/app/types'
-import app from '../../api/panel/app'
 
 const { t } = useI18n()
 
 const versionModalShow = ref(false)
 const versionModalOperation = ref('安装')
-const versionModalInfo = ref<App>({} as App)
+const versionModalInfo = ref<any>({})
 
 const columns: any = [
   {
@@ -174,35 +173,31 @@ const columns: any = [
   }
 ]
 
-const apps = ref<App[]>([] as App[])
-
-const selectedRowKeys = ref<any>([])
-
-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) => app.list(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    initialPageSize: 20,
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
 const handleShowChange = (row: any) => {
-  app.updateShow(row.slug, !row.show).then(() => {
-    window.$message.success(t('appIndex.alerts.setup'))
+  useRequest(app.updateShow(row.slug, !row.show)).onSuccess(() => {
     row.show = !row.show
+    window.$message.success(t('appIndex.alerts.setup'))
   })
 }
 
 const handleUpdate = (slug: string) => {
-  app.update(slug).then(() => {
+  useRequest(app.update(slug)).onSuccess(() => {
     window.$message.success(t('appIndex.alerts.update'))
   })
 }
 
 const handleUninstall = (slug: string) => {
-  app.uninstall(slug).then(() => {
+  useRequest(app.uninstall(slug)).onSuccess(() => {
     window.$message.success(t('appIndex.alerts.uninstall'))
   })
 }
@@ -212,37 +207,14 @@ const handleManage = (slug: string) => {
 }
 
 const handleUpdateCache = () => {
-  app.updateCache().then(() => {
+  useRequest(app.updateCache()).onSuccess(() => {
+    refresh()
     window.$message.success(t('appIndex.alerts.cache'))
-    onPageChange(1)
   })
 }
 
-const getAppList = async (page: number, limit: number) => {
-  const { data } = await app.list(page, limit)
-  return data
-}
-
-const onChecked = (rowKeys: any) => {
-  selectedRowKeys.value = rowKeys
-}
-
-const onPageChange = (page: number) => {
-  pagination.page = page
-  getAppList(page, pagination.pageSize).then((res) => {
-    apps.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
-  })
-}
-
-const onPageSizeChange = (pageSize: number) => {
-  pagination.pageSize = pageSize
-  onPageChange(1)
-}
-
 onMounted(() => {
-  onPageChange(pagination.page)
+  refresh()
 })
 </script>
 
@@ -260,14 +232,21 @@ onMounted(() => {
         striped
         remote
         :scroll-x="1200"
-        :loading="false"
+        :loading="loading"
         :columns="columns"
-        :data="apps"
+        :data="data"
         :row-key="(row: any) => row.slug"
-        :pagination="pagination"
-        @update:checked-row-keys="onChecked"
-        @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]
+        }"
       />
       <version-modal
         v-model:show="versionModalShow"
diff --git a/web/src/views/app/VersionModal.vue b/web/src/views/app/VersionModal.vue
index 322a25b5..12ea8c98 100644
--- a/web/src/views/app/VersionModal.vue
+++ b/web/src/views/app/VersionModal.vue
@@ -26,12 +26,11 @@ const options = computed(() => {
 })
 
 const handleSubmit = () => {
-  app
-    .install(info.value.slug, model.value.channel)
-    .then(() => {
+  useRequest(app.install(info.value.slug, model.value.channel))
+    .onSuccess(() => {
       window.$message.success(t('appIndex.alerts.install'))
     })
-    .finally(() => {
+    .onComplete(() => {
       doSubmit.value = false
       show.value = false
       model.value = {
diff --git a/web/src/views/apps/fail2ban/IndexView.vue b/web/src/views/apps/fail2ban/IndexView.vue
index 6745a68c..ce1313ef 100644
--- a/web/src/views/apps/fail2ban/IndexView.vue
+++ b/web/src/views/apps/fail2ban/IndexView.vue
@@ -189,6 +189,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   (page, pageSize) => fail2ban.jails(page, pageSize),
   {
     initialData: { total: 0, list: [] },
+    initialPageSize: 20,
     total: (res: any) => res.total,
     data: (res: any) => res.items
   }
@@ -271,8 +272,8 @@ onMounted(() => {
   getStatus()
   getIsEnabled()
   getWhiteList()
-  app.isInstalled('nginx').then((res) => {
-    if (res.data.installed) {
+  useRequest(app.isInstalled('nginx')).onSuccess(({ data }) => {
+    if (data.installed) {
       getWebsiteList(1, 10000)
     }
   })
diff --git a/web/src/views/apps/pureftpd/IndexView.vue b/web/src/views/apps/pureftpd/IndexView.vue
index 460d8485..b84e7de6 100644
--- a/web/src/views/apps/pureftpd/IndexView.vue
+++ b/web/src/views/apps/pureftpd/IndexView.vue
@@ -108,6 +108,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   (page, pageSize) => pureftpd.list(page, pageSize),
   {
     initialData: { total: 0, list: [] },
+    initialPageSize: 20,
     total: (res: any) => res.total,
     data: (res: any) => res.items
   }
diff --git a/web/src/views/apps/rsync/IndexView.vue b/web/src/views/apps/rsync/IndexView.vue
index f7e12d06..22bc57e7 100644
--- a/web/src/views/apps/rsync/IndexView.vue
+++ b/web/src/views/apps/rsync/IndexView.vue
@@ -126,6 +126,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   (page, pageSize) => rsync.modules(page, pageSize),
   {
     initialData: { total: 0, list: [] },
+    initialPageSize: 20,
     total: (res: any) => res.total,
     data: (res: any) => res.items
   }
diff --git a/web/src/views/apps/s3fs/IndexView.vue b/web/src/views/apps/s3fs/IndexView.vue
index b32761b6..0773060a 100644
--- a/web/src/views/apps/s3fs/IndexView.vue
+++ b/web/src/views/apps/s3fs/IndexView.vue
@@ -68,6 +68,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   (page, pageSize) => s3fs.mounts(page, pageSize),
   {
     initialData: { total: 0, list: [] },
+    initialPageSize: 20,
     total: (res: any) => res.total,
     data: (res: any) => res.items
   }
diff --git a/web/src/views/apps/supervisor/IndexView.vue b/web/src/views/apps/supervisor/IndexView.vue
index f0245023..105d5167 100644
--- a/web/src/views/apps/supervisor/IndexView.vue
+++ b/web/src/views/apps/supervisor/IndexView.vue
@@ -219,6 +219,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   (page, pageSize) => supervisor.processes(page, pageSize),
   {
     initialData: { total: 0, list: [] },
+    initialPageSize: 20,
     total: (res: any) => res.total,
     data: (res: any) => res.items
   }
diff --git a/web/src/views/cert/IndexView.vue b/web/src/views/cert/IndexView.vue
index 94febd39..3a675f3b 100644
--- a/web/src/views/cert/IndexView.vue
+++ b/web/src/views/cert/IndexView.vue
@@ -36,15 +36,16 @@ const getAsyncData = async () => {
   algorithms.value = algorithmData
 
   websites.value = []
-  app.isInstalled('nginx').then(async (res) => {
-    if (res.data.installed) {
-      const websiteData = await website.list(1, 10000)
-      for (const item of websiteData.items) {
-        websites.value.push({
-          label: item.name,
-          value: item.id
-        })
-      }
+  useRequest(app.isInstalled('nginx')).onSuccess(({ data }) => {
+    if (data.installed) {
+      useRequest(website.list(1, 10000)).onSuccess(({ data }) => {
+        for (const item of data.items) {
+          websites.value.push({
+            label: item.name,
+            value: item.id
+          })
+        }
+      })
     }
   })
 
diff --git a/web/src/views/database/DatabaseList.vue b/web/src/views/database/DatabaseList.vue
index b683a1ef..aefc5217 100644
--- a/web/src/views/database/DatabaseList.vue
+++ b/web/src/views/database/DatabaseList.vue
@@ -109,6 +109,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   (page, pageSize) => database.list(page, pageSize),
   {
     initialData: { total: 0, list: [] },
+    initialPageSize: 20,
     total: (res: any) => res.total,
     data: (res: any) => res.items
   }
diff --git a/web/src/views/database/ServerList.vue b/web/src/views/database/ServerList.vue
index b4963a43..26026303 100644
--- a/web/src/views/database/ServerList.vue
+++ b/web/src/views/database/ServerList.vue
@@ -221,6 +221,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   (page, pageSize) => database.serverList(page, pageSize),
   {
     initialData: { total: 0, list: [] },
+    initialPageSize: 20,
     total: (res: any) => res.total,
     data: (res: any) => res.items
   }
diff --git a/web/src/views/database/UserList.vue b/web/src/views/database/UserList.vue
index 06f9c9fe..69de8945 100644
--- a/web/src/views/database/UserList.vue
+++ b/web/src/views/database/UserList.vue
@@ -201,6 +201,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   (page, pageSize) => database.userList(page, pageSize),
   {
     initialData: { total: 0, list: [] },
+    initialPageSize: 20,
     total: (res: any) => res.total,
     data: (res: any) => res.items
   }
diff --git a/web/src/views/firewall/SettingView.vue b/web/src/views/firewall/SettingView.vue
index 0e5fe30e..72b83cb4 100644
--- a/web/src/views/firewall/SettingView.vue
+++ b/web/src/views/firewall/SettingView.vue
@@ -13,13 +13,12 @@ const fetchSetting = async () => {
   firewall.status().then((res) => {
     model.value.firewallStatus = res.data
   })
-  safe.ssh().then((res) => {
-    model.value.sshStatus = res.data.status
-    model.value.sshPort = res.data.port
-  })
-  safe.pingStatus().then((res) => {
-    model.value.pingStatus = res.data
-  })
+
+  const ssh = await safe.ssh()
+  model.value.sshStatus = ssh.status
+  model.value.sshPort = ssh.port
+
+  model.value.pingStatus = await safe.pingStatus()
 }
 
 const handleFirewallStatus = () => {
@@ -29,13 +28,13 @@ const handleFirewallStatus = () => {
 }
 
 const handleSsh = () => {
-  safe.setSsh(model.value.sshStatus, model.value.sshPort).then(() => {
+  useRequest(safe.updateSsh(model.value.sshStatus, model.value.sshPort)).onSuccess(() => {
     window.$message.success('设置成功')
   })
 }
 
 const handlePingStatus = () => {
-  safe.setPingStatus(model.value.pingStatus).then(() => {
+  useRequest(safe.updatePingStatus(model.value.pingStatus)).onSuccess(() => {
     window.$message.success('设置成功')
   })
 }
diff --git a/web/src/views/login/IndexView.vue b/web/src/views/login/IndexView.vue
index 11911196..2c5fb3d3 100644
--- a/web/src/views/login/IndexView.vue
+++ b/web/src/views/login/IndexView.vue
@@ -48,37 +48,33 @@ async function handleLogin() {
     window.$message.warning('获取加密公钥失败，请刷新页面重试')
     return
   }
-  try {
-    user
-      .login(
-        rsaEncrypt(username, String(unref(key))),
-        rsaEncrypt(password, String(unref(key))),
-        safe_login
-      )
-      .then(async () => {
-        loging.value = true
-        window.$notification?.success({ title: '登录成功！', duration: 2500 })
-        if (isRemember.value) {
-          setLocal('loginInfo', { username, password })
-        } else {
-          removeLocal('loginInfo')
-        }
+  useRequest(
+    user.login(
+      rsaEncrypt(username, String(unref(key))),
+      rsaEncrypt(password, String(unref(key))),
+      safe_login
+    )
+  ).onSuccess(async () => {
+    loging.value = true
+    window.$notification?.success({ title: '登录成功！', duration: 2500 })
+    if (isRemember.value) {
+      setLocal('loginInfo', { username, password })
+    } else {
+      removeLocal('loginInfo')
+    }
 
-        await addDynamicRoutes()
-        await user.info().then((data: any) => {
-          userStore.set(data)
-        })
-        if (query.redirect) {
-          const path = query.redirect as string
-          Reflect.deleteProperty(query, 'redirect')
-          await router.push({ path, query })
-        } else {
-          await router.push('/')
-        }
-      })
-  } catch (error) {
-    console.error(error)
-  }
+    await addDynamicRoutes()
+    await user.info().then((data: any) => {
+      userStore.set(data)
+    })
+    if (query.redirect) {
+      const path = query.redirect as string
+      Reflect.deleteProperty(query, 'redirect')
+      await router.push({ path, query })
+    } else {
+      await router.push('/')
+    }
+  })
   loging.value = false
 }
 
diff --git a/web/src/views/setting/SettingBase.vue b/web/src/views/setting/SettingBase.vue
index 780ff3fa..86d77cfe 100644
--- a/web/src/views/setting/SettingBase.vue
+++ b/web/src/views/setting/SettingBase.vue
@@ -3,26 +3,26 @@ import { useI18n } from 'vue-i18n'
 
 import setting from '@/api/panel/setting'
 import { useThemeStore } from '@/store'
-import type { Setting } from '@/views/setting/types'
 
 const { t } = useI18n()
 const themeStore = useThemeStore()
 
-const model = ref<Setting>({
-  name: '',
-  locale: '',
-  username: '',
-  password: '',
-  email: '',
-  port: 8888,
-  entrance: '',
-  offline_mode: false,
-  auto_update: false,
-  website_path: '',
-  backup_path: '',
-  https: false,
-  cert: '',
-  key: ''
+const { data: model } = useRequest(setting.list, {
+  initialData: {
+    name: '',
+    locale: '',
+    username: '',
+    password: '',
+    email: '',
+    port: 8888,
+    entrance: '',
+    offline_mode: false,
+    website_path: '',
+    backup_path: '',
+    https: false,
+    cert: '',
+    key: ''
+  }
 })
 
 const locales = [
@@ -30,14 +30,8 @@ const locales = [
   { label: 'English', value: 'en' }
 ]
 
-const getSetting = () => {
-  setting.list().then((res) => {
-    model.value = res.data
-  })
-}
-
 const handleSave = () => {
-  setting.update(model.value).then(() => {
+  useRequest(setting.update(model.value)).onSuccess(() => {
     window.$message.success(t('settingIndex.edit.toasts.success'))
     setTimeout(() => {
       maybeHardReload()
@@ -50,10 +44,6 @@ const maybeHardReload = () => {
     window.location.reload()
   }
 }
-
-onMounted(() => {
-  getSetting()
-})
 </script>
 
 <template>
diff --git a/web/src/views/setting/SettingHttps.vue b/web/src/views/setting/SettingHttps.vue
index 9a3aeffa..26785072 100644
--- a/web/src/views/setting/SettingHttps.vue
+++ b/web/src/views/setting/SettingHttps.vue
@@ -2,40 +2,32 @@
 import { useI18n } from 'vue-i18n'
 
 import setting from '@/api/panel/setting'
-import type { Setting } from '@/views/setting/types'
 
 const { t } = useI18n()
-const model = ref<Setting>({
-  name: '',
-  locale: '',
-  username: '',
-  password: '',
-  email: '',
-  port: 8888,
-  entrance: '',
-  offline_mode: false,
-  website_path: '',
-  backup_path: '',
-  https: false,
-  cert: '',
-  key: ''
+
+const { data: model } = useRequest(setting.list, {
+  initialData: {
+    name: '',
+    locale: '',
+    username: '',
+    password: '',
+    email: '',
+    port: 8888,
+    entrance: '',
+    offline_mode: false,
+    website_path: '',
+    backup_path: '',
+    https: false,
+    cert: '',
+    key: ''
+  }
 })
 
-const getSetting = () => {
-  setting.list().then((res) => {
-    model.value = res.data
-  })
-}
-
 const handleSave = () => {
-  setting.update(model.value).then(() => {
+  useRequest(setting.update(model.value)).onSuccess(() => {
     window.$message.success(t('settingIndex.edit.toasts.success'))
   })
 }
-
-onMounted(() => {
-  getSetting()
-})
 </script>
 
 <template>
diff --git a/web/src/views/ssh/CreateModal.vue b/web/src/views/ssh/CreateModal.vue
index a9f377f6..62130d3e 100644
--- a/web/src/views/ssh/CreateModal.vue
+++ b/web/src/views/ssh/CreateModal.vue
@@ -18,11 +18,8 @@ const model = ref({
 
 const handleSubmit = async () => {
   loading.value = true
-  await ssh
-    .create(model.value)
-    .then(() => {
-      window.$message.success('创建成功')
-      window.$bus.emit('ssh:refresh')
+  useRequest(ssh.create(model.value))
+    .onSuccess(() => {
       loading.value = false
       show.value = false
       model.value = {
@@ -35,8 +32,10 @@ const handleSubmit = async () => {
         key: '',
         remark: ''
       }
+      window.$bus.emit('ssh:refresh')
+      window.$message.success('创建成功')
     })
-    .catch(() => {
+    .onComplete(() => {
       loading.value = false
     })
 }
diff --git a/web/src/views/ssh/IndexView.vue b/web/src/views/ssh/IndexView.vue
index 9e858ed8..d66dea62 100644
--- a/web/src/views/ssh/IndexView.vue
+++ b/web/src/views/ssh/IndexView.vue
@@ -36,7 +36,7 @@ const list = ref<any[]>([])
 
 const fetchData = async () => {
   list.value = []
-  const { data } = await ssh.list(1, 10000)
+  const data = await ssh.list(1, 10000)
   if (data.items.length === 0) {
     window.$message.info('请先创建主机')
     return
@@ -105,18 +105,19 @@ const fetchData = async () => {
 }
 
 const handleDelete = async (id: number) => {
-  await ssh.delete(id)
-  list.value = list.value.filter((item: any) => item.key !== id)
-  if (current.value === id) {
-    if (list.value.length > 0) {
-      await openSession(Number(list.value[0].key))
-    } else {
-      term.value.dispose()
+  useRequest(ssh.delete(id)).onSuccess(() => {
+    list.value = list.value.filter((item: any) => item.key !== id)
+    if (current.value === id) {
+      if (list.value.length > 0) {
+        openSession(Number(list.value[0].key))
+      } else {
+        term.value.dispose()
+      }
+      if (list.value.length === 0) {
+        create.value = true
+      }
     }
-    if (list.value.length === 0) {
-      create.value = true
-    }
-  }
+  })
 }
 
 const handleChange = (key: number) => {
diff --git a/web/src/views/ssh/UpdateModal.vue b/web/src/views/ssh/UpdateModal.vue
index 41b54289..87e98d8c 100644
--- a/web/src/views/ssh/UpdateModal.vue
+++ b/web/src/views/ssh/UpdateModal.vue
@@ -19,32 +19,30 @@ const model = ref({
 
 const handleSubmit = async () => {
   loading.value = true
-  await ssh
-    .update(id.value, model.value)
-    .then(() => {
-      window.$message.success('更新成功')
+  useRequest(ssh.update(id.value, model.value))
+    .onSuccess(() => {
       id.value = 0
       loading.value = false
       show.value = false
       window.$bus.emit('ssh:refresh')
+      window.$message.success('更新成功')
     })
-    .catch(() => {
+    .onComplete(() => {
       loading.value = false
     })
 }
 
-watch(show, () => {
+watch(show, async () => {
   if (id.value > 0) {
-    ssh.get(id.value).then((res) => {
-      model.value.name = res.data.name
-      model.value.host = res.data.host
-      model.value.port = res.data.port
-      model.value.auth_method = res.data.config.auth_method
-      model.value.user = res.data.config.user
-      model.value.password = res.data.config.password
-      model.value.key = res.data.config.key
-      model.value.remark = res.data.remark
-    })
+    const data = await ssh.get(id.value)
+    model.value.name = data.name
+    model.value.host = data.host
+    model.value.port = data.port
+    model.value.auth_method = data.config.auth_method
+    model.value.user = data.config.user
+    model.value.password = data.config.password
+    model.value.key = data.config.key
+    model.value.remark = data.remark
   }
 })
 </script>
diff --git a/web/src/views/task/CreateModal.vue b/web/src/views/task/CreateModal.vue
index c356d4de..f11a90fb 100644
--- a/web/src/views/task/CreateModal.vue
+++ b/web/src/views/task/CreateModal.vue
@@ -86,8 +86,8 @@ watch(createModel, (value) => {
 
 onMounted(() => {
   getPhpAndDb()
-  app.isInstalled('nginx').then((res) => {
-    if (res.data.installed) {
+  useRequest(app.isInstalled('nginx')).onSuccess(({ data }) => {
+    if (data.installed) {
       getWebsiteList(1, 10000)
     }
   })
diff --git a/web/src/views/task/SystemView.vue b/web/src/views/task/SystemView.vue
index a5682615..a411e596 100644
--- a/web/src/views/task/SystemView.vue
+++ b/web/src/views/task/SystemView.vue
@@ -132,6 +132,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   (page, pageSize) => process.list(page, pageSize),
   {
     initialData: { total: 0, list: [] },
+    initialPageSize: 20,
     total: (res: any) => res.total,
     data: (res: any) => res.items
   }
diff --git a/web/src/views/task/TaskView.vue b/web/src/views/task/TaskView.vue
index bbb40d7b..258dde61 100644
--- a/web/src/views/task/TaskView.vue
+++ b/web/src/views/task/TaskView.vue
@@ -4,13 +4,11 @@ import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
 import task from '@/api/panel/task'
 import RealtimeLogModal from '@/components/common/RealtimeLogModal.vue'
 import { formatDateTime, renderIcon } from '@/utils'
-import type { Task } from '@/views/task/types'
 
 const logModal = ref(false)
 const logPath = ref('')
 
 const columns: any = [
-  { type: 'selection', fixed: 'left' },
   {
     title: '任务名',
     key: 'name',
@@ -109,52 +107,25 @@ const columns: any = [
   }
 ]
 
-const tasks = ref<Task[]>([] as Task[])
-
-const selectedRowKeys = ref<any>([])
-
-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) => task.list(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    initialPageSize: 20,
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
 const handleDelete = (id: number) => {
-  task.delete(id).then(() => {
+  useRequest(task.delete(id)).onSuccess(() => {
+    refresh()
     window.$message.success('删除成功')
-    onPageChange(pagination.page)
   })
 }
 
-const fetchTaskList = async (page: number, limit: number) => {
-  const { data } = await task.list(page, limit)
-  return data
-}
-
-const onChecked = (rowKeys: any) => {
-  selectedRowKeys.value = rowKeys
-}
-
-const onPageChange = (page: number) => {
-  pagination.page = page
-  fetchTaskList(page, pagination.pageSize).then((res) => {
-    tasks.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
-  })
-}
-
-const onPageSizeChange = (pageSize: number) => {
-  pagination.pageSize = pageSize
-  onPageChange(1)
-}
-
 onMounted(() => {
-  onPageChange(pagination.page)
+  refresh()
 })
 </script>
 
@@ -165,14 +136,21 @@ onMounted(() => {
       striped
       remote
       :scroll-x="1000"
-      :loading="false"
+      :loading="loading"
       :columns="columns"
-      :data="tasks"
+      :data="data"
       :row-key="(row: any) => row.id"
-      :pagination="pagination"
-      @update:checked-row-keys="onChecked"
-      @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-flex>
   <realtime-log-modal v-model:show="logModal" :path="logPath" />
diff --git a/web/src/views/task/types.ts b/web/src/views/task/types.ts
index 041b1336..e0181975 100644
--- a/web/src/views/task/types.ts
+++ b/web/src/views/task/types.ts
@@ -1,13 +1,3 @@
-export interface Task {
-  id: number
-  name: string
-  status: string
-  shell: string
-  log: string
-  created_at: string
-  updated_at: string
-}
-
 export interface CronTask {
   id: number
   name: string
diff --git a/web/src/views/website/IndexView.vue b/web/src/views/website/IndexView.vue
index bb3f1a9c..10fedfcf 100644
--- a/web/src/views/website/IndexView.vue
+++ b/web/src/views/website/IndexView.vue
@@ -223,6 +223,7 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
   (page, pageSize) => website.list(page, pageSize),
   {
     initialData: { total: 0, list: [] },
+    initialPageSize: 20,
     total: (res: any) => res.total,
     data: (res: any) => res.items
   }