feat: alova.js替换axios

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

@@ -1,22 +1,22 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 获取备份列表
   list: (type: string, page: number, limit: number): any =>
-    request.get(`/backup/${type}`, { params: { page, limit } }),
+    http.Get(`/backup/${type}`, { params: { page, limit } }),
   // 创建备份
   create: (type: string, target: string, path: string): any =>
-    request.post(`/backup/${type}`, { target, path }),
+    http.Post(`/backup/${type}`, { target, path }),
   // 上传备份
   upload: (type: string, formData: FormData): any => {
-    return request.post(`/backup/${type}/upload`, formData, {
+    return http.Post(`/backup/${type}/upload`, formData, {
       headers: { 'Content-Type': 'multipart/form-data' }
     })
   },
   // 删除备份
   delete: (type: string, file: string): any =>
-    request.delete(`/backup/${type}/delete`, { data: { file } }),
+    http.Delete(`/backup/${type}/delete`, { data: { file } }),
   // 恢复备份
   restore: (type: string, file: string, target: string): any =>
-    request.post(`/backup/${type}/restore`, { file, target })
+    http.Post(`/backup/${type}/restore`, { file, target })
 }

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

@@ -1,33 +1,25 @@
-import { http, request } from '@/utils'
-
-import type { RequestConfig } from '~/types/axios'
+import { http } from '@/utils'
 
 export default {
   // 面板信息
-  panel: (): Promise<Response> => fetch('/api/dashboard/panel'),
-  // 面板菜单
-  menu: (): any => request.get('/dashboard/menu'),
+  panel: (): any => http.Get('/dashboard/panel'),
   // 首页应用
-  homeApps: (): any => request.get('/dashboard/homeApps'),
+  homeApps: (): any => http.Get('/dashboard/homeApps'),
   // 实时信息
   current: (nets: string[], disks: string[]): any =>
-    request.post('/dashboard/current', { nets, disks }, { noNeedTip: true } as RequestConfig),
+    http.Post('/dashboard/current', { nets, disks }, { meta: { noAlert: true } }),
   // 系统信息
-  systemInfo: (): any => request.get('/dashboard/systemInfo'),
+  systemInfo: (): any => http.Get('/dashboard/systemInfo'),
   // 统计信息
-  countInfo: (): any => request.get('/dashboard/countInfo'),
+  countInfo: (): any => http.Get('/dashboard/countInfo'),
   // 已安装的数据库和PHP
-  installedDbAndPhp: (): any => request.get('/dashboard/installedDbAndPhp'),
+  installedDbAndPhp: (): any => http.Get('/dashboard/installedDbAndPhp'),
   // 检查更新
-  checkUpdate: (): any => request.get('/dashboard/checkUpdate'),
+  checkUpdate: (): any => http.Get('/dashboard/checkUpdate'),
   // 更新日志
-  updateInfo: (): any => request.get('/dashboard/updateInfo'),
+  updateInfo: (): any => http.Get('/dashboard/updateInfo'),
   // 更新面板
-  update: (): any => request.post('/dashboard/update', null),
+  update: (): any => http.Post('/dashboard/update'),
   // 重启面板
-  restart: (): any => request.post('/dashboard/restart')
+  restart: (): any => http.Post('/dashboard/restart')
 }
-
-export const panel = () => http.Get('/dashboard/panel')
-export const current = (nets: string[], disks: string[]) =>
-  http.Post('/dashboard/current', { nets, disks }, { meta: { noAlert: true } })

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

@@ -1,14 +1,13 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 开关
-  setting: (): any => request.get('/monitor/setting'),
+  setting: (): any => http.Get('/monitor/setting'),
   // 保存天数
   updateSetting: (enabled: boolean, days: number): any =>
-    request.post('/monitor/setting', { enabled, days }),
+    http.Post('/monitor/setting', { enabled, days }),
   // 清空监控记录
-  clear: (): any => request.post('/monitor/clear'),
+  clear: (): any => http.Post('/monitor/clear'),
   // 监控记录
-  list: (start: number, end: number): any =>
-    request.get('/monitor/list', { params: { start, end } })
+  list: (start: number, end: number): any => http.Get('/monitor/list', { params: { start, end } })
 }

web/src/main.ts

@@ -13,7 +13,7 @@ import { setupNaiveDiscreteApi } from './utils'
 
 import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'
 
-import { panel } from '@/api/panel/dashboard'
+import dashboard from '@/api/panel/dashboard'
 import CronNaivePlugin from '@vue-js-cron/naive-ui'
 
 async function setupApp() {
@@ -38,7 +38,7 @@ async function setupApp() {
 
 const setupPanel = async () => {
   const themeStore = useThemeStore()
-  useRequest(panel, {
+  useRequest(dashboard.panel, {
     initialData: {
       name: import.meta.env.VITE_APP_TITLE,
       locale: 'zh_CN'

web/src/views/backup/IndexView.vue

@@ -15,10 +15,12 @@ const createModel = ref({
 })
 
 const handleCreate = () => {
-  backup.create(currentTab.value, createModel.value.target, createModel.value.path).then(() => {
+  useRequest(
+    backup.create(currentTab.value, createModel.value.target, createModel.value.path)
+  ).onSuccess(() => {
     createModal.value = false
-    window.$message.success('创建成功')
     window.$bus.emit('backup:refresh')
+    window.$message.success('创建成功')
   })
 }
 </script>

web/src/views/backup/ListView.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import backup from '@/api/panel/backup'
 import { renderIcon } from '@/utils'
-import type { MessageReactive } from 'naive-ui'
-import { NButton, NInput, NPopconfirm } from 'naive-ui'
+import { MessageReactive, NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
 
 import { formatDateTime } from '@/utils'
-import type { Backup } from './types'
 
 const type = defineModel<string>('type', { type: String, required: true })
 
@@ -94,63 +92,42 @@ const columns: any = [
   }
 ]
 
-const data = ref<Backup[]>([])
-
-const pagination = reactive({
-  page: 1,
-  pageCount: 1,
-  pageSize: 20,
-  itemCount: 0,
-  showQuickJumper: true,
-  showSizePicker: true,
-  pageSizes: [20, 50, 100, 200]
-})
-
-const getList = async (page: number, limit: number) => {
-  const { data } = await backup.list(type.value, page, limit)
-  return data
-}
-
-const onPageChange = (page: number) => {
-  pagination.page = page
-  getList(page, pagination.pageSize).then((res) => {
-    data.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
-  })
-}
-
-const onPageSizeChange = (pageSize: number) => {
-  pagination.pageSize = pageSize
-  onPageChange(1)
-}
+const { loading, data, page, total, pageSize, pageCount, refresh } = usePagination(
+  (page, pageSize) => backup.list(type.value, page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    initialPageSize: 20,
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
 const handleRestore = () => {
   messageReactive = window.$message.loading('恢复中...', {
     duration: 0
   })
-  backup
-    .restore(type.value, restoreModel.value.file, restoreModel.value.target)
-    .then(() => {
+
+  useRequest(backup.restore(type.value, restoreModel.value.file, restoreModel.value.target))
+    .onSuccess(() => {
+      refresh()
       window.$message.success('恢复成功')
     })
-    .finally(() => {
+    .onComplete(() => {
       messageReactive?.destroy()
-      onPageChange(pagination.page)
     })
 }
 
 const handleDelete = async (file: string) => {
-  await backup.delete(type.value, file).then(() => {
+  useRequest(backup.delete(type.value, file)).onSuccess(() => {
+    refresh()
     window.$message.success('删除成功')
-    onPageChange(pagination.page)
   })
 }
 
 onMounted(() => {
-  onPageChange(pagination.page)
+  refresh()
   window.$bus.on('backup:refresh', () => {
-    onPageChange(pagination.page)
+    refresh()
   })
 })
 
@@ -164,12 +141,21 @@ onUnmounted(() => {
     striped
     remote
     :scroll-x="1000"
-    :loading="false"
+    :loading="loading"
     :columns="columns"
     :data="data"
     :row-key="(row: any) => row.name"
-    @update:page="onPageChange"
-    @update:page-size="onPageSizeChange"
+    v-model:page="page"
+    v-model:pageSize="pageSize"
+    :pagination="{
+      page: page,
+      pageCount: pageCount,
+      pageSize: pageSize,
+      itemCount: total,
+      showQuickJumper: true,
+      showSizePicker: true,
+      pageSizes: [20, 50, 100, 200]
+    }"
   />
   <n-modal
     v-model:show="restoreModal"

web/src/views/dashboard/IndexView.vue

@@ -22,7 +22,7 @@ import { useTabStore } from '@/store'
 import { formatDateTime, formatDuration, toTimestamp } from '@/utils/common'
 import { formatBytes, formatPercent } from '@/utils/file'
 import VChart from 'vue-echarts'
-import type { CountInfo, HomeApp, Realtime, SystemInfo } from './types'
+import type { Realtime } from './types'
 
 use([
   CanvasRenderer,
@@ -37,14 +37,43 @@ use([
 const { locale } = useI18n()
 const tabStore = useTabStore()
 const realtime = ref<Realtime | null>(null)
-const systemInfo = ref<SystemInfo | null>(null)
-const homeApps = ref<HomeApp[] | null>(null)
-const homeAppsLoading = ref(true)
-const countInfo = ref<CountInfo>({
-  website: 0,
-  database: 0,
-  ftp: 0,
-  cron: 0
+
+const { data: systemInfo } = useRequest(dashboard.systemInfo, {
+  initialData: {
+    procs: 0,
+    hostname: '',
+    panel_version: '',
+    commit_hash: '',
+    build_id: '',
+    build_time: '',
+    build_user: '',
+    build_host: '',
+    go_version: '',
+    kernel_arch: '',
+    kernel_version: '',
+    os_name: '',
+    boot_time: 0,
+    uptime: 0,
+    nets: [],
+    disks: []
+  }
+})
+const { data: homeApps, loading: homeAppsLoading } = useRequest(dashboard.homeApps, {
+  initialData: {
+    description: '',
+    icon: '',
+    name: '',
+    slug: '',
+    version: ''
+  }
+})
+const { data: countInfo } = useRequest(dashboard.countInfo, {
+  initialData: {
+    website: 0,
+    database: 0,
+    ftp: 0,
+    cron: 0
+  }
 })
 
 const nets = ref<Array<string>>([]) // 选择的网卡
@@ -202,9 +231,8 @@ let isFetching = false
 const fetchCurrent = async () => {
   if (isFetching) return
   isFetching = true
-  dashboard
-    .current(nets.value, disks.value)
-    .then(({ data }) => {
+  useRequest(dashboard.current(nets.value, disks.value))
+    .onSuccess(({ data }) => {
       data.percent = formatPercent(data.percent)
       data.mem.usedPercent = formatPercent(data.mem.usedPercent)
       // 计算 CPU 核心数
@@ -283,35 +311,15 @@ const fetchCurrent = async () => {
 
       realtime.value = data
     })
-    .finally(() => {
+    .onComplete(() => {
       isFetching = false
     })
 }
 
-const fetchSystemInfo = async () => {
-  dashboard.systemInfo().then((res) => {
-    systemInfo.value = res.data
-  })
-}
-
-const fetchCountInfo = async () => {
-  dashboard.countInfo().then((res) => {
-    countInfo.value = res.data
-  })
-}
-
-const fetchHomeApps = async () => {
-  homeAppsLoading.value = true
-  dashboard.homeApps().then((res) => {
-    homeApps.value = res.data
-    homeAppsLoading.value = false
-  })
-}
-
 const handleRestartPanel = () => {
   clearInterval(homeInterval)
   window.$message.loading('面板重启中...')
-  dashboard.restart().then(() => {
+  useRequest(dashboard.restart()).onSuccess(() => {
     window.$message.success('面板重启成功')
     setTimeout(() => {
       tabStore.reloadTab(tabStore.active)
@@ -320,8 +328,8 @@ const handleRestartPanel = () => {
 }
 
 const handleUpdate = () => {
-  dashboard.checkUpdate().then((res) => {
-    if (res.data.update) {
+  useRequest(dashboard.checkUpdate()).onSuccess(({ data }) => {
+    if (data.update) {
       router.push({ name: 'dashboard-update' })
     } else {
       window.$message.success('当前已是最新版本')
@@ -375,9 +383,6 @@ let homeInterval: any = null
 
 onMounted(() => {
   fetchCurrent()
-  fetchSystemInfo()
-  fetchCountInfo()
-  fetchHomeApps()
   homeInterval = setInterval(() => {
     fetchCurrent()
   }, 3000)