feat: alova.js替换axios

web/src/api/apps/mysql/index.ts

@@ -1,22 +1,20 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 负载状态
-  load: (): any => request.get('/apps/mysql/load'),
+  load: (): any => http.Get('/apps/mysql/load'),
   // 获取配置
-  config: (): any => request.get('/apps/mysql/config'),
+  config: (): any => http.Get('/apps/mysql/config'),
   // 保存配置
-  saveConfig: (config: string): any => request.post('/apps/mysql/config', { config }),
-  // 获取错误日志
-  errorLog: (): any => request.get('/apps/mysql/errorLog'),
+  saveConfig: (config: string): any => http.Post('/apps/mysql/config', { config }),
   // 清空错误日志
-  clearErrorLog: (): any => request.post('/apps/mysql/clearErrorLog'),
+  clearErrorLog: (): any => http.Post('/apps/mysql/clearErrorLog'),
   // 获取慢查询日志
-  slowLog: (): any => request.get('/apps/mysql/slowLog'),
+  slowLog: (): any => http.Get('/apps/mysql/slowLog'),
   // 清空慢查询日志
-  clearSlowLog: (): any => request.post('/apps/mysql/clearSlowLog'),
+  clearSlowLog: (): any => http.Post('/apps/mysql/clearSlowLog'),
   // 获取 root 密码
-  rootPassword: (): any => request.get('/apps/mysql/rootPassword'),
+  rootPassword: (): any => http.Get('/apps/mysql/rootPassword'),
   // 修改 root 密码
-  setRootPassword: (password: string): any => request.post('/apps/mysql/rootPassword', { password })
+  setRootPassword: (password: string): any => http.Post('/apps/mysql/rootPassword', { password })
 }

web/src/api/apps/nginx/index.ts

@@ -1,14 +1,14 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 负载状态
-  load: (): any => request.get('/apps/nginx/load'),
+  load: (): any => http.Get('/apps/nginx/load'),
   // 获取配置
-  config: (): any => request.get('/apps/nginx/config'),
+  config: (): any => http.Get('/apps/nginx/config'),
   // 保存配置
-  saveConfig: (config: string): any => request.post('/apps/nginx/config', { config }),
+  saveConfig: (config: string): any => http.Post('/apps/nginx/config', { config }),
   // 获取错误日志
-  errorLog: (): any => request.get('/apps/nginx/errorLog'),
+  errorLog: (): any => http.Get('/apps/nginx/errorLog'),
   // 清空错误日志
-  clearErrorLog: (): any => request.post('/apps/nginx/clearErrorLog')
+  clearErrorLog: (): any => http.Post('/apps/nginx/clearErrorLog')
 }

web/src/api/apps/php/index.ts

@@ -1,34 +1,34 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 设为 CLI 版本
-  setCli: (version: number): any => request.post(`/apps/php${version}/setCli`),
+  setCli: (version: number): any => http.Post(`/apps/php${version}/setCli`),
   // 获取配置
-  config: (version: number): any => request.get(`/apps/php${version}/config`),
+  config: (version: number): any => http.Get(`/apps/php${version}/config`),
   // 保存配置
   saveConfig: (version: number, config: string): any =>
-    request.post(`/apps/php${version}/config`, { config }),
+    http.Post(`/apps/php${version}/config`, { config }),
   // 获取FPM配置
-  fpmConfig: (version: number): any => request.get(`/apps/php${version}/fpmConfig`),
+  fpmConfig: (version: number): any => http.Get(`/apps/php${version}/fpmConfig`),
   // 保存FPM配置
   saveFPMConfig: (version: number, config: string): any =>
-    request.post(`/apps/php${version}/fpmConfig`, { config }),
+    http.Post(`/apps/php${version}/fpmConfig`, { config }),
   // 负载状态
-  load: (version: number): any => request.get(`/apps/php${version}/load`),
+  load: (version: number): any => http.Get(`/apps/php${version}/load`),
   // 获取错误日志
-  errorLog: (version: number): any => request.get(`/apps/php${version}/errorLog`),
+  errorLog: (version: number): any => http.Get(`/apps/php${version}/errorLog`),
   // 清空错误日志
-  clearErrorLog: (version: number): any => request.post(`/apps/php${version}/clearErrorLog`),
+  clearErrorLog: (version: number): any => http.Post(`/apps/php${version}/clearErrorLog`),
   // 获取慢日志
-  slowLog: (version: number): any => request.get(`/apps/php${version}/slowLog`),
+  slowLog: (version: number): any => http.Get(`/apps/php${version}/slowLog`),
   // 清空慢日志
-  clearSlowLog: (version: number): any => request.post(`/apps/php${version}/clearSlowLog`),
+  clearSlowLog: (version: number): any => http.Post(`/apps/php${version}/clearSlowLog`),
   // 拓展列表
-  extensions: (version: number): any => request.get(`/apps/php${version}/extensions`),
+  extensions: (version: number): any => http.Get(`/apps/php${version}/extensions`),
   // 安装拓展
   installExtension: (version: number, slug: string): any =>
-    request.post(`/apps/php${version}/extensions`, { slug }),
+    http.Post(`/apps/php${version}/extensions`, { slug }),
   // 卸载拓展
   uninstallExtension: (version: number, slug: string): any =>
-    request.delete(`/apps/php${version}/extensions`, { data: { slug } })
+    http.Delete(`/apps/php${version}/extensions`, { data: { slug } })
 }

web/src/api/apps/phpmyadmin/index.ts

@@ -1,12 +1,12 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 获取信息
-  info: (): any => request.get('/apps/phpmyadmin/info'),
+  info: (): any => http.Get('/apps/phpmyadmin/info'),
   // 设置端口
-  port: (port: number): any => request.post('/apps/phpmyadmin/port', { port }),
+  port: (port: number): any => http.Post('/apps/phpmyadmin/port', { port }),
   // 获取配置
-  getConfig: (): any => request.get('/apps/phpmyadmin/config'),
+  getConfig: (): any => http.Get('/apps/phpmyadmin/config'),
   // 保存配置
-  saveConfig: (config: string): any => request.post('/apps/phpmyadmin/config', { config })
+  saveConfig: (config: string): any => http.Post('/apps/phpmyadmin/config', { config })
 }

web/src/api/apps/podman/index.ts

@@ -1,13 +1,12 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 获取注册表配置
-  registryConfig: (): any => request.get('/apps/podman/registryConfig'),
+  registryConfig: (): any => http.Get('/apps/podman/registryConfig'),
   // 保存注册表配置
-  saveRegistryConfig: (config: string): any =>
-    request.post('/apps/podman/registryConfig', { config }),
+  saveRegistryConfig: (config: string): any => http.Post('/apps/podman/registryConfig', { config }),
   // 获取存储配置
-  storageConfig: (): any => request.get('/apps/podman/storageConfig'),
+  storageConfig: (): any => http.Get('/apps/podman/storageConfig'),
   // 保存存储配置
-  saveStorageConfig: (config: string): any => request.post('/apps/podman/storageConfig', { config })
+  saveStorageConfig: (config: string): any => http.Post('/apps/podman/storageConfig', { config })
 }

web/src/api/apps/postgresql/index.ts

@@ -1,18 +1,18 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 负载状态
-  load: (): any => request.get('/apps/postgresql/load'),
+  load: (): any => http.Get('/apps/postgresql/load'),
   // 获取配置
-  config: (): any => request.get('/apps/postgresql/config'),
+  config: (): any => http.Get('/apps/postgresql/config'),
   // 保存配置
-  saveConfig: (config: string): any => request.post('/apps/postgresql/config', { config }),
+  saveConfig: (config: string): any => http.Post('/apps/postgresql/config', { config }),
   // 获取用户配置
-  userConfig: (): any => request.get('/apps/postgresql/userConfig'),
+  userConfig: (): any => http.Get('/apps/postgresql/userConfig'),
   // 保存配置
-  saveUserConfig: (config: string): any => request.post('/apps/postgresql/userConfig', { config }),
+  saveUserConfig: (config: string): any => http.Post('/apps/postgresql/userConfig', { config }),
   // 获取日志
-  log: (): any => request.get('/apps/postgresql/log'),
+  log: (): any => http.Get('/apps/postgresql/log'),
   // 清空错误日志
-  clearLog: (): any => request.post('/apps/postgresql/clearLog')
+  clearLog: (): any => http.Post('/apps/postgresql/clearLog')
 }

web/src/api/apps/pureftpd/index.ts

@@ -1,19 +1,19 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 列表
   list: (page: number, limit: number): any =>
-    request.get('/apps/pureftpd/users', { params: { page, limit } }),
+    http.Get('/apps/pureftpd/users', { params: { page, limit } }),
   // 添加
   add: (username: string, password: string, path: string): any =>
-    request.post('/apps/pureftpd/users', { username, password, path }),
+    http.Post('/apps/pureftpd/users', { username, password, path }),
   // 删除
-  delete: (username: string): any => request.delete(`/apps/pureftpd/users/${username}`),
+  delete: (username: string): any => http.Delete(`/apps/pureftpd/users/${username}`),
   // 修改密码
   changePassword: (username: string, password: string): any =>
-    request.post(`/apps/pureftpd/users/${username}/password`, { password }),
+    http.Post(`/apps/pureftpd/users/${username}/password`, { password }),
   // 获取端口
-  port: (): any => request.get('/apps/pureftpd/port'),
+  port: (): any => http.Get('/apps/pureftpd/port'),
   // 修改端口
-  setPort: (port: number): any => request.post('/apps/pureftpd/port', { port })
+  updatePort: (port: number): any => http.Post('/apps/pureftpd/port', { port })
 }

web/src/api/apps/redis/index.ts

@@ -1,10 +1,10 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 负载状态
-  load: (): any => request.get('/apps/redis/load'),
+  load: (): any => http.Get('/apps/redis/load'),
   // 获取配置
-  config: (): any => request.get('/apps/redis/config'),
+  config: (): any => http.Get('/apps/redis/config'),
   // 保存配置
-  saveConfig: (config: string): any => request.post('/apps/redis/config', { config })
+  saveConfig: (config: string): any => http.Post('/apps/redis/config', { config })
 }

web/src/api/apps/rsync/index.ts

@@ -1,18 +1,17 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 获取配置
-  config: (): any => request.get('/apps/rsync/config'),
+  config: (): any => http.Get('/apps/rsync/config'),
   // 保存配置
-  saveConfig: (config: string): any => request.post('/apps/rsync/config', { config }),
+  saveConfig: (config: string): any => http.Post('/apps/rsync/config', { config }),
   // 模块列表
   modules: (page: number, limit: number): any =>
-    request.get('/apps/rsync/modules', { params: { page, limit } }),
+    http.Get('/apps/rsync/modules', { params: { page, limit } }),
   // 添加模块
-  addModule: (module: any): any => request.post('/apps/rsync/modules', module),
+  addModule: (module: any): any => http.Post('/apps/rsync/modules', module),
   // 删除模块
-  deleteModule: (name: string): any => request.delete('/apps/rsync/modules/' + name),
+  deleteModule: (name: string): any => http.Delete(`/apps/rsync/modules/${name}`),
   // 更新模块
-  updateModule: (name: string, module: any): any =>
-    request.post('/apps/rsync/modules/' + name, module)
+  updateModule: (name: string, module: any): any => http.Post(`/apps/rsync/modules/${name}`, module)
 }

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

@@ -42,8 +42,7 @@ const loadColumns: any = [
 const load = ref<any[]>([])
 
 const getLoad = async () => {
-  const { data } = await mysql.load()
-  return data
+  return await mysql.load()
 }
 
 const getStatus = async () => {
@@ -61,8 +60,7 @@ const getRootPassword = async () => {
 }
 
 const getSlowLog = async () => {
-  const { data } = await mysql.slowLog()
-  return data
+  return await mysql.slowLog()
 }
 
 const getConfig = async () => {

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

@@ -42,8 +42,7 @@ const columns: any = [
 const load = ref<any[]>([])
 
 const getLoad = async () => {
-  const { data } = await nginx.load()
-  return data
+  return await nginx.load()
 }
 
 const getStatus = async () => {
@@ -55,13 +54,11 @@ const getIsEnabled = async () => {
 }
 
 const getErrorLog = async () => {
-  const { data } = await nginx.errorLog()
-  return data
+  return await nginx.errorLog()
 }
 
 const getConfig = async () => {
-  const { data } = await nginx.config()
-  return data
+  return await nginx.config()
 }
 
 const handleSaveConfig = async () => {

web/src/views/apps/php/PhpView.vue

@@ -130,13 +130,11 @@ const extensions = ref<any[]>([])
 const load = ref<any[]>([])
 
 const getLoad = async () => {
-  const { data } = await php.load(version.value)
-  return data
+  return await php.load(version.value)
 }
 
 const getExtensions = async () => {
-  const { data } = await php.extensions(version.value)
-  return data
+  return await php.extensions(version.value)
 }
 
 const getStatus = async () => {
@@ -148,27 +146,19 @@ const getIsEnabled = async () => {
 }
 
 const getErrorLog = async () => {
-  php.errorLog(version.value).then((res: any) => {
-    errorLog.value = res.data
-  })
+  errorLog.value = await php.errorLog(version.value)
 }
 
 const getSlowLog = async () => {
-  php.slowLog(version.value).then((res: any) => {
-    slowLog.value = res.data
-  })
+  slowLog.value = await php.slowLog(version.value)
 }
 
 const getConfig = async () => {
-  php.config(version.value).then((res: any) => {
-    config.value = res.data
-  })
+  config.value = await php.config(version.value)
 }
 
 const getFPMConfig = async () => {
-  php.fpmConfig(version.value).then((res: any) => {
-    fpmConfig.value = res.data
-  })
+  fpmConfig.value = await php.fpmConfig(version.value)
 }
 
 const handleSetCli = async () => {

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

@@ -19,11 +19,10 @@ const url = computed(() => {
 const config = ref('')
 
 const getInfo = async () => {
-  phpmyadmin.info().then((res: any) => {
-    path.value = res.data.path
-    port.value = res.data.port
-    newPort.value = res.data.port
-  })
+  const data = await phpmyadmin.info()
+  path.value = data.path
+  port.value = data.port
+  newPort.value = data.port
 }
 
 const handleSave = async () => {
@@ -33,8 +32,7 @@ const handleSave = async () => {
 }
 
 const getConfig = async () => {
-  const { data } = await phpmyadmin.getConfig()
-  return data
+  return await phpmyadmin.getConfig()
 }
 
 const handleSaveConfig = async () => {

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

@@ -28,12 +28,8 @@ const getIsEnabled = async () => {
 }
 
 const getConfig = async () => {
-  podman.registryConfig().then((res: any) => {
-    registryConfig.value = res.data
-  })
-  podman.storageConfig().then((res: any) => {
-    storageConfig.value = res.data
-  })
+  registryConfig.value = await podman.registryConfig()
+  storageConfig.value = await podman.storageConfig()
 }
 
 const handleSaveRegistryConfig = async () => {

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

@@ -42,8 +42,7 @@ const loadColumns: any = [
 const load = ref<any[]>([])
 
 const getLoad = async () => {
-  const { data } = await postgresql.load()
-  return data
+  return await postgresql.load()
 }
 
 const getStatus = async () => {
@@ -55,20 +54,15 @@ const getIsEnabled = async () => {
 }
 
 const getLog = async () => {
-  const { data } = await postgresql.log()
-  return data
+  return await postgresql.log()
 }
 
 const getConfig = async () => {
-  postgresql.config().then((res: any) => {
-    config.value = res.data
-  })
+  config.value = await postgresql.config()
 }
 
 const getUserConfig = async () => {
-  postgresql.userConfig().then((res: any) => {
-    userConfig.value = res.data
-  })
+  userConfig.value = await postgresql.userConfig()
 }
 
 const handleSaveConfig = async () => {

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

@@ -8,7 +8,6 @@ import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
 import pureftpd from '@/api/apps/pureftpd'
 import systemctl from '@/api/panel/systemctl'
 import { generateRandomString, renderIcon } from '@/utils'
-import type { User } from '@/views/apps/pureftpd/types'
 
 const currentTab = ref('status')
 const status = ref(false)
@@ -35,16 +34,6 @@ const changePasswordModel = ref({
   password: generateRandomString(16)
 })
 
-const pagination = reactive({
-  page: 1,
-  pageCount: 1,
-  pageSize: 20,
-  itemCount: 0,
-  showQuickJumper: true,
-  showSizePicker: true,
-  pageSizes: [20, 50, 100, 200]
-})
-
 const userColumns: any = [
   {
     title: '用户名',
@@ -115,7 +104,14 @@ const userColumns: any = [
   }
 ]
 
-const users = ref<User[]>([] as User[])
+const { loading, data, page, total, pageSize, pageCount, refresh } = usePagination(
+  (page, pageSize) => pureftpd.list(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
 const getStatus = async () => {
   status.value = await systemctl.status('pure-ftpd')
@@ -126,13 +122,11 @@ const getIsEnabled = async () => {
 }
 
 const getPort = async () => {
-  await pureftpd.port().then((res: any) => {
-    port.value = res.data
-  })
+  port.value = await pureftpd.port()
 }
 
 const handleSavePort = async () => {
-  await pureftpd.setPort(port.value)
+  await pureftpd.updatePort(port.value)
   window.$message.success('保存成功')
 }
 
@@ -165,60 +159,41 @@ const handleRestart = async () => {
   await getStatus()
 }
 
-const getUsers = async (page: number, limit: number) => {
-  const { data } = await pureftpd.list(page, limit)
-  return data
-}
-
-const onPageChange = (page: number) => {
-  pagination.page = page
-  getUsers(page, pagination.pageSize).then((res) => {
-    users.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
+const handleAddUser = async () => {
+  useRequest(
+    pureftpd.add(addUserModel.value.username, addUserModel.value.password, addUserModel.value.path)
+  ).onSuccess(() => {
+    refresh()
+    addUserModal.value = false
+    addUserModel.value.username = ''
+    addUserModel.value.password = generateRandomString(16)
+    addUserModel.value.path = ''
+    window.$message.success('添加成功')
   })
 }
 
-const onPageSizeChange = (pageSize: number) => {
-  pagination.pageSize = pageSize
-  onPageChange(1)
-}
-
-const handleAddUser = async () => {
-  await pureftpd.add(
-    addUserModel.value.username,
-    addUserModel.value.password,
-    addUserModel.value.path
-  )
-  window.$message.success('添加成功')
-  onPageChange(1)
-  addUserModal.value = false
-  addUserModel.value.username = ''
-  addUserModel.value.password = generateRandomString(16)
-  addUserModel.value.path = ''
-}
-
 const handleChangePassword = async () => {
-  await pureftpd.changePassword(
-    changePasswordModel.value.username,
-    changePasswordModel.value.password
-  )
-  window.$message.success('修改成功')
-  onPageChange(1)
-  changePasswordModal.value = false
+  useRequest(
+    pureftpd.changePassword(changePasswordModel.value.username, changePasswordModel.value.password)
+  ).onSuccess(() => {
+    refresh()
+    changePasswordModal.value = false
+    window.$message.success('修改成功')
+  })
 }
 
 const handleDeleteUser = async (username: string) => {
-  await pureftpd.delete(username)
-  window.$message.success('删除成功')
-  onPageChange(1)
+  useRequest(pureftpd.delete(username)).onSuccess(() => {
+    refresh()
+    window.$message.success('删除成功')
+  })
 }
 
 onMounted(() => {
+  refresh()
   getStatus()
   getIsEnabled()
   getPort()
-  onPageChange(1)
 })
 </script>
 
@@ -286,12 +261,21 @@ onMounted(() => {
             striped
             remote
             :scroll-x="1000"
-            :loading="false"
+            :loading="loading"
             :columns="userColumns"
-            :data="users"
+            :data="data"
             :row-key="(row: any) => row.username"
-            @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>

web/src/views/apps/pureftpd/types.ts

@@ -1,4 +0,0 @@
-export interface User {
-  username: string
-  path: string
-}

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

@@ -40,8 +40,7 @@ const loadColumns: any = [
 const load = ref<any[]>([])
 
 const getLoad = async () => {
-  const { data } = await redis.load()
-  return data
+  return await redis.load()
 }
 
 const getStatus = async () => {
@@ -53,9 +52,7 @@ const getIsEnabled = async () => {
 }
 
 const getConfig = async () => {
-  redis.config().then((res: any) => {
-    config.value = res.data
-  })
+  config.value = await redis.config()
 }
 
 const handleSaveConfig = async () => {

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

@@ -9,7 +9,6 @@ import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
 import rsync from '@/api/apps/rsync'
 import systemctl from '@/api/panel/systemctl'
 import { generateRandomString, renderIcon } from '@/utils'
-import type { Module } from '@/views/apps/rsync/types'
 
 const currentTab = ref('status')
 const status = ref(false)
@@ -123,36 +122,14 @@ const processColumns: any = [
   }
 ]
 
-const modules = ref<Module[]>([])
-
-const pagination = reactive({
-  page: 1,
-  pageCount: 1,
-  pageSize: 20,
-  itemCount: 0,
-  showQuickJumper: true,
-  showSizePicker: true,
-  pageSizes: [20, 50, 100, 200]
-})
-
-const getModules = async (page: number, limit: number) => {
-  const { data } = await rsync.modules(page, limit)
-  return data
-}
-
-const onPageChange = (page: number) => {
-  pagination.page = page
-  getModules(page, pagination.pageSize).then((res) => {
-    modules.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) => rsync.modules(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
 const getStatus = async () => {
   status.value = await systemctl.status('rsyncd')
@@ -163,15 +140,14 @@ const getIsEnabled = async () => {
 }
 
 const getConfig = async () => {
-  rsync.config().then((res: any) => {
-    config.value = res.data
-  })
+  config.value = await rsync.config()
 }
 
 const handleSaveConfig = async () => {
-  await rsync.saveConfig(config.value)
-  window.$message.success('保存成功')
-  onPageChange(1)
+  useRequest(rsync.saveConfig(config.value)).onSuccess(() => {
+    refresh()
+    window.$message.success('保存成功')
+  })
 }
 
 const handleStart = async () => {
@@ -204,26 +180,28 @@ const handleRestart = async () => {
 }
 
 const handleModelAdd = async () => {
-  await rsync.addModule(addModuleModel.value)
-  await getConfig()
-  window.$message.success('添加成功')
-  addModuleModal.value = false
-  addModuleModel.value = {
-    name: '',
-    path: '/www',
-    comment: '',
-    auth_user: '',
-    secret: generateRandomString(16),
-    hosts_allow: '0.0.0.0/0'
-  }
-  onPageChange(1)
+  useRequest(rsync.addModule(addModuleModel.value)).onSuccess(() => {
+    refresh()
+    getConfig()
+    addModuleModal.value = false
+    addModuleModel.value = {
+      name: '',
+      path: '/www',
+      comment: '',
+      auth_user: '',
+      secret: generateRandomString(16),
+      hosts_allow: '0.0.0.0/0'
+    }
+    window.$message.success('添加成功')
+  })
 }
 
 const handleModelDelete = async (name: string) => {
-  await rsync.deleteModule(name)
-  await getConfig()
-  window.$message.success('删除成功')
-  onPageChange(1)
+  useRequest(rsync.deleteModule(name)).onSuccess(() => {
+    refresh()
+    getConfig()
+    window.$message.success('删除成功')
+  })
 }
 
 const handleModelEdit = async (row: any) => {
@@ -237,16 +215,19 @@ const handleModelEdit = async (row: any) => {
 }
 
 const handleSaveModuleConfig = async () => {
-  await rsync.updateModule(editModuleModel.value.name, editModuleModel.value)
-  await getConfig()
-  window.$message.success('保存成功')
-  onPageChange(1)
+  useRequest(rsync.updateModule(editModuleModel.value.name, editModuleModel.value)).onSuccess(
+    () => {
+      refresh()
+      getConfig()
+      window.$message.success('保存成功')
+    }
+  )
 }
 
 onMounted(() => {
+  refresh()
   getStatus()
   getIsEnabled()
-  onPageChange(1)
   getConfig()
 })
 </script>
@@ -316,12 +297,21 @@ onMounted(() => {
             striped
             remote
             :scroll-x="1000"
-            :loading="false"
+            :loading="loading"
             :columns="processColumns"
-            :data="modules"
+            :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>

web/src/views/apps/rsync/types.ts

@@ -1,9 +0,0 @@
-export interface Module {
-  name: string
-  path: string
-  comment: string
-  read_only: boolean
-  auth_user: string
-  secret: string
-  hosts_allow: string
-}