feat: alova.js替换axios

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

@@ -30,5 +30,5 @@ export default {
     http.Post(`/apps/php${version}/extensions`, { slug }),
   // 卸载拓展
   uninstallExtension: (version: number, slug: string): any =>
-    http.Delete(`/apps/php${version}/extensions`, { data: { slug } })
+    http.Delete(`/apps/php${version}/extensions`, { slug })
 }

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

@@ -7,5 +7,5 @@ export default {
   // 添加
   add: (data: any): any => http.Post('/apps/s3fs/mounts', data),
   // 删除
-  delete: (id: number): any => http.Delete('/apps/s3fs/mounts', { data: { id } })
+  delete: (id: number): any => http.Delete('/apps/s3fs/mounts', { id })
 }

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

@@ -14,8 +14,7 @@ export default {
     })
   },
   // 删除备份
-  delete: (type: string, file: string): any =>
-    http.Delete(`/backup/${type}/delete`, { data: { file } }),
+  delete: (type: string, file: string): any => http.Delete(`/backup/${type}/delete`, { file }),
   // 恢复备份
   restore: (type: string, file: string, target: string): any =>
     http.Post(`/backup/${type}/restore`, { file, target })

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

@@ -1,29 +1,29 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 获取防火墙状态
-  status: (): any => request.get('/firewall/status'),
+  status: (): any => http.Get('/firewall/status'),
   // 设置防火墙状态
-  updateStatus: (status: boolean): any => request.post('/firewall/status', { status }),
+  updateStatus: (status: boolean): any => http.Post('/firewall/status', { status }),
   // 获取防火墙规则
   rules: (page: number, limit: number): any =>
-    request.get('/firewall/rule', { params: { page, limit } }),
+    http.Get('/firewall/rule', { params: { page, limit } }),
   // 创建防火墙规则
-  createRule: (rule: any): any => request.post('/firewall/rule', rule),
+  createRule: (rule: any): any => http.Post('/firewall/rule', rule),
   // 删除防火墙规则
-  deleteRule: (rule: any): any => request.delete('/firewall/rule', { data: rule }),
+  deleteRule: (rule: any): any => http.Delete('/firewall/rule', rule),
   // 获取防火墙IP规则
   ipRules: (page: number, limit: number): any =>
-    request.get('/firewall/ipRule', { params: { page, limit } }),
+    http.Get('/firewall/ipRule', { params: { page, limit } }),
   // 创建防火墙IP规则
-  createIpRule: (rule: any): any => request.post('/firewall/ipRule', rule),
+  createIpRule: (rule: any): any => http.Post('/firewall/ipRule', rule),
   // 删除防火墙IP规则
-  deleteIpRule: (rule: any): any => request.delete('/firewall/ipRule', { data: rule }),
+  deleteIpRule: (rule: any): any => http.Delete('/firewall/ipRule', rule),
   // 获取防火墙转发规则
   forwards: (page: number, limit: number): any =>
-    request.get('/firewall/forward', { params: { page, limit } }),
+    http.Get('/firewall/forward', { params: { page, limit } }),
   // 创建防火墙转发规则
-  createForward: (rule: any): any => request.post('/firewall/forward', rule),
+  createForward: (rule: any): any => http.Post('/firewall/forward', rule),
   // 删除防火墙转发规则
-  deleteForward: (rule: any): any => request.delete('/firewall/forward', { data: rule })
+  deleteForward: (rule: any): any => http.Delete('/firewall/forward', rule)
 }

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

@@ -7,7 +7,7 @@ export default {
   create: (data: any): any => http.Post('/website', data),
   // 删除
   delete: (id: number, path: boolean, db: boolean): any =>
-    http.Delete(`/website/${id}`, { data: { path, db } }),
+    http.Delete(`/website/${id}`, { path, db }),
   // 伪静态
   rewrites: (): any => http.Get(`/website/rewrites`),
   // 获取默认配置

web/src/views/firewall/CreateForwardModal.vue

@@ -27,17 +27,17 @@ const createModel = ref({
   target_port: 80
 })
 
-const handleCreate = async () => {
-  await firewall.createForward(createModel.value).then(() => {
+const handleCreate = () => {
+  useRequest(firewall.createForward(createModel.value)).onSuccess(() => {
+    show.value = false
+    createModel.value = {
+      protocol: 'tcp',
+      port: 8080,
+      target_ip: '127.0.0.1',
+      target_port: 80
+    }
     window.$message.success(`创建成功`)
   })
-  createModel.value = {
-    protocol: 'tcp',
-    port: 8080,
-    target_ip: '127.0.0.1',
-    target_port: 80
-  }
-  show.value = false
 }
 </script>
 

web/src/views/firewall/CreateIpModal.vue

@@ -67,23 +67,16 @@ const createModel = ref({
 
 const handleCreate = async () => {
   for (const address of createModel.value.address) {
-    await firewall
-      .createIpRule({
+    useRequest(
+      firewall.createIpRule({
         ...createModel.value,
         address
       })
-      .then(() => {
-        window.$message.success(`${address} 创建成功`)
-      })
+    ).onSuccess(() => {
+      window.$message.success(`${address} 创建成功`)
+      show.value = false
+    })
   }
-  createModel.value = {
-    family: 'ipv4',
-    protocol: 'tcp',
-    address: [],
-    strategy: 'accept',
-    direction: 'in'
-  }
-  show.value = false
 }
 </script>
 

web/src/views/firewall/CreateModal.vue

@@ -68,8 +68,8 @@ const createModel = ref({
 })
 
 const handleCreate = async () => {
-  await firewall.createRule(createModel.value).then(() => {
-    window.$message.success('创建成功')
+  useRequest(firewall.createRule(createModel.value)).onSuccess(() => {
+    show.value = false
     createModel.value = {
       family: 'ipv4',
       protocol: 'tcp',
@@ -79,7 +79,7 @@ const handleCreate = async () => {
       strategy: 'accept',
       direction: 'in'
     }
-    show.value = false
+    window.$message.success('创建成功')
   })
 }
 </script>

web/src/views/firewall/ForwardView.vue

@@ -4,7 +4,6 @@ import { NButton, NDataTable, NPopconfirm, NTag } from 'naive-ui'
 import firewall from '@/api/panel/firewall'
 import { renderIcon } from '@/utils'
 import CreateForwardModal from '@/views/firewall/CreateForwardModal.vue'
-import type { FirewallRule } from '@/views/firewall/types'
 
 const createModalShow = ref(false)
 
@@ -113,37 +112,26 @@ const columns: any = [
   }
 ]
 
-const data = ref<FirewallRule[]>([] as FirewallRule[])
-
-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) => firewall.forwards(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    initialPageSize: 20,
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
 const selectedRowKeys = ref<any>([])
 
-const handleDelete = async (row: any) => {
-  await firewall.deleteForward(row).then(() => {
+const handleDelete = (row: any) => {
+  useRequest(firewall.deleteForward(row)).onSuccess(() => {
+    refresh()
     window.$message.success('删除成功')
   })
-  fetchFirewallForwards(pagination.page, pagination.pageSize).then((res) => {
-    data.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
-  })
 }
 
-const fetchFirewallForwards = async (page: number, limit: number) => {
-  const { data } = await firewall.forwards(page, limit)
-  return data
-}
-
-const batchDelete = async () => {
+const batchDelete = () => {
   if (selectedRowKeys.value.length === 0) {
     window.$message.info('请选择要删除的规则')
     return
@@ -152,42 +140,24 @@ const batchDelete = async () => {
   for (const key of selectedRowKeys.value) {
     // 解析json
     const rule = JSON.parse(key)
-    await firewall.deleteForward(rule).then(() => {
+    useRequest(firewall.deleteForward(rule)).onSuccess(() => {
       window.$message.success(`${rule.protocol} ${rule.target_ip}:${rule.target_port} 删除成功`)
     })
   }
 
-  fetchFirewallForwards(pagination.page, pagination.pageSize).then((res) => {
-    data.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
-  })
+  refresh()
 }
 
 const onChecked = (rowKeys: any) => {
   selectedRowKeys.value = rowKeys
 }
 
-const onPageChange = (page: number) => {
-  pagination.page = page
-  fetchFirewallForwards(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)
-}
-
 watch(createModalShow, () => {
-  onPageChange(1)
+  refresh()
 })
 
 onMounted(() => {
-  onPageChange(1)
+  refresh()
 })
 </script>
 
@@ -214,14 +184,22 @@ onMounted(() => {
       striped
       remote
       :scroll-x="1000"
-      :loading="false"
+      :loading="loading"
       :columns="columns"
       :data="data"
       :row-key="(row: any) => JSON.stringify(row)"
-      :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>
   <create-forward-modal v-model:show="createModalShow" />

web/src/views/firewall/IpRuleView.vue

@@ -4,7 +4,6 @@ import { NButton, NDataTable, NPopconfirm, NTag } from 'naive-ui'
 import firewall from '@/api/panel/firewall'
 import { renderIcon } from '@/utils'
 import CreateIpModal from '@/views/firewall/CreateIpModal.vue'
-import type { FirewallRule } from '@/views/firewall/types'
 
 const createModalShow = ref(false)
 
@@ -155,37 +154,26 @@ const columns: any = [
   }
 ]
 
-const data = ref<FirewallRule[]>([] as FirewallRule[])
-
-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) => firewall.ipRules(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    initialPageSize: 20,
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
 const selectedRowKeys = ref<any>([])
 
-const handleDelete = async (row: any) => {
-  await firewall.deleteIpRule(row).then(() => {
+const handleDelete = (row: any) => {
+  useRequest(firewall.deleteIpRule(row)).onSuccess(() => {
+    refresh()
     window.$message.success('删除成功')
   })
-  fetchFirewallRules(pagination.page, pagination.pageSize).then((res) => {
-    data.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
-  })
 }
 
-const fetchFirewallRules = async (page: number, limit: number) => {
-  const { data } = await firewall.ipRules(page, limit)
-  return data
-}
-
-const batchDelete = async () => {
+const batchDelete = () => {
   if (selectedRowKeys.value.length === 0) {
     window.$message.info('请选择要删除的规则')
     return
@@ -194,42 +182,24 @@ const batchDelete = async () => {
   for (const key of selectedRowKeys.value) {
     // 解析json
     const rule = JSON.parse(key)
-    await firewall.deleteIpRule(rule).then(() => {
+    useRequest(firewall.deleteIpRule(rule)).onSuccess(() => {
       window.$message.success(`${rule.address} 删除成功`)
     })
   }
 
-  fetchFirewallRules(pagination.page, pagination.pageSize).then((res) => {
-    data.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
-  })
+  refresh()
 }
 
 const onChecked = (rowKeys: any) => {
   selectedRowKeys.value = rowKeys
 }
 
-const onPageChange = (page: number) => {
-  pagination.page = page
-  fetchFirewallRules(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)
-}
-
 watch(createModalShow, () => {
-  onPageChange(1)
+  refresh()
 })
 
 onMounted(() => {
-  onPageChange(1)
+  refresh()
 })
 </script>
 
@@ -256,14 +226,22 @@ onMounted(() => {
       striped
       remote
       :scroll-x="1000"
-      :loading="false"
+      :loading="loading"
       :columns="columns"
       :data="data"
       :row-key="(row: any) => JSON.stringify(row)"
-      :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>
   <create-ip-modal v-model:show="createModalShow" />

web/src/views/firewall/RuleView.vue

@@ -4,7 +4,6 @@ import { NButton, NDataTable, NPopconfirm, NTag } from 'naive-ui'
 import firewall from '@/api/panel/firewall'
 import { renderIcon } from '@/utils'
 import CreateModal from '@/views/firewall/CreateModal.vue'
-import type { FirewallRule } from '@/views/firewall/types'
 
 const createModalShow = ref(false)
 
@@ -192,37 +191,26 @@ const columns: any = [
   }
 ]
 
-const data = ref<FirewallRule[]>([] as FirewallRule[])
-
-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) => firewall.rules(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    initialPageSize: 20,
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
 const selectedRowKeys = ref<any>([])
 
 const handleDelete = async (row: any) => {
-  await firewall.deleteRule(row).then(() => {
+  useRequest(firewall.deleteRule(row)).onSuccess(() => {
+    refresh()
     window.$message.success('删除成功')
   })
-  fetchFirewallRules(pagination.page, pagination.pageSize).then((res) => {
-    data.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
-  })
 }
 
-const fetchFirewallRules = async (page: number, limit: number) => {
-  const { data } = await firewall.rules(page, limit)
-  return data
-}
-
-const batchDelete = async () => {
+const batchDelete = () => {
   if (selectedRowKeys.value.length === 0) {
     window.$message.info('请选择要删除的规则')
     return
@@ -231,44 +219,26 @@ const batchDelete = async () => {
   for (const key of selectedRowKeys.value) {
     // 解析json
     const rule = JSON.parse(key)
-    await firewall.deleteRule(rule).then(() => {
+    useRequest(firewall.deleteRule(rule)).onSuccess(() => {
       const port =
         rule.port_start == rule.port_end ? rule.port_start : `${rule.port_start}-${rule.port_end}`
       window.$message.success(`${rule.family} 规则 ${port}/${rule.protocol} 删除成功`)
     })
   }
 
-  fetchFirewallRules(pagination.page, pagination.pageSize).then((res) => {
-    data.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
-  })
+  refresh()
 }
 
 const onChecked = (rowKeys: any) => {
   selectedRowKeys.value = rowKeys
 }
 
-const onPageChange = (page: number) => {
-  pagination.page = page
-  fetchFirewallRules(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)
-}
-
 watch(createModalShow, () => {
-  onPageChange(1)
+  refresh()
 })
 
 onMounted(() => {
-  onPageChange(1)
+  refresh()
 })
 </script>
 
@@ -295,14 +265,22 @@ onMounted(() => {
       striped
       remote
       :scroll-x="1400"
-      :loading="false"
+      :loading="loading"
       :columns="columns"
       :data="data"
       :row-key="(row: any) => JSON.stringify(row)"
-      :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>
   <create-modal v-model:show="createModalShow" />

web/src/views/firewall/SettingView.vue

@@ -9,20 +9,19 @@ const model = ref({
   sshPort: 22
 })
 
-const fetchSetting = async () => {
-  firewall.status().then((res) => {
-    model.value.firewallStatus = res.data
-  })
-
-  const ssh = await safe.ssh()
-  model.value.sshStatus = ssh.status
-  model.value.sshPort = ssh.port
-
-  model.value.pingStatus = await safe.pingStatus()
-}
+useRequest(firewall.status).onSuccess(({ data }) => {
+  model.value.firewallStatus = data
+})
+useRequest(safe.ssh).onSuccess(({ data }) => {
+  model.value.sshStatus = data.status
+  model.value.sshPort = data.port
+})
+useRequest(safe.pingStatus).onSuccess(({ data }) => {
+  model.value.pingStatus = data
+})
 
 const handleFirewallStatus = () => {
-  firewall.updateStatus(model.value.firewallStatus).then(() => {
+  useRequest(firewall.updateStatus(model.value.firewallStatus)).onSuccess(() => {
     window.$message.success('设置成功')
   })
 }
@@ -38,10 +37,6 @@ const handlePingStatus = () => {
     window.$message.success('设置成功')
   })
 }
-
-onMounted(() => {
-  fetchSetting()
-})
 </script>
 
 <template>

web/src/views/firewall/types.ts

@@ -1,7 +0,0 @@
-export interface FirewallRule {
-  port_start: number
-  port_end: number
-  protocols: string[]
-  address: string
-  strategy: string
-}