From 4a7742b991123c7c35ad581debfaa0b2f3376d56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=80=97=E5=AD=90?= Date: Sun, 9 Feb 2025 02:02:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20alova.js=E6=9B=BF=E6=8D=A2axios?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/api/apps/php/index.ts | 2 +- web/src/api/apps/s3fs/index.ts | 2 +- web/src/api/panel/backup/index.ts | 3 +- web/src/api/panel/firewall/index.ts | 24 +++--- web/src/api/panel/website/index.ts | 2 +- web/src/views/firewall/CreateForwardModal.vue | 18 ++--- web/src/views/firewall/CreateIpModal.vue | 19 ++--- web/src/views/firewall/CreateModal.vue | 6 +- web/src/views/firewall/ForwardView.vue | 80 +++++++------------ web/src/views/firewall/IpRuleView.vue | 80 +++++++------------ web/src/views/firewall/RuleView.vue | 78 +++++++----------- web/src/views/firewall/SettingView.vue | 27 +++---- web/src/views/firewall/types.ts | 7 -- 13 files changed, 131 insertions(+), 217 deletions(-) diff --git a/web/src/api/apps/php/index.ts b/web/src/api/apps/php/index.ts index 33e38a9d..5bc92e7d 100644 --- a/web/src/api/apps/php/index.ts +++ b/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 }) } diff --git a/web/src/api/apps/s3fs/index.ts b/web/src/api/apps/s3fs/index.ts index 5c54413d..78c25535 100644 --- a/web/src/api/apps/s3fs/index.ts +++ b/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 }) } diff --git a/web/src/api/panel/backup/index.ts b/web/src/api/panel/backup/index.ts index 875a16f4..b9e459a6 100644 --- a/web/src/api/panel/backup/index.ts +++ b/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 }) diff --git a/web/src/api/panel/firewall/index.ts b/web/src/api/panel/firewall/index.ts index 63594578..febcf161 100644 --- a/web/src/api/panel/firewall/index.ts +++ b/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) } diff --git a/web/src/api/panel/website/index.ts b/web/src/api/panel/website/index.ts index 989dadd0..1100ed65 100644 --- a/web/src/api/panel/website/index.ts +++ b/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`), // 获取默认配置 diff --git a/web/src/views/firewall/CreateForwardModal.vue b/web/src/views/firewall/CreateForwardModal.vue index 1cb0a5b5..b9401c5d 100644 --- a/web/src/views/firewall/CreateForwardModal.vue +++ b/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 } diff --git a/web/src/views/firewall/CreateIpModal.vue b/web/src/views/firewall/CreateIpModal.vue index 4813b438..bde31f51 100644 --- a/web/src/views/firewall/CreateIpModal.vue +++ b/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 } diff --git a/web/src/views/firewall/CreateModal.vue b/web/src/views/firewall/CreateModal.vue index ae2665ea..0dd1e27c 100644 --- a/web/src/views/firewall/CreateModal.vue +++ b/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('创建成功') }) } diff --git a/web/src/views/firewall/ForwardView.vue b/web/src/views/firewall/ForwardView.vue index 8d8d99da..a7c501b8 100644 --- a/web/src/views/firewall/ForwardView.vue +++ b/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([] 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([]) -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() }) @@ -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] + }" /> diff --git a/web/src/views/firewall/IpRuleView.vue b/web/src/views/firewall/IpRuleView.vue index 56b8babc..2513b409 100644 --- a/web/src/views/firewall/IpRuleView.vue +++ b/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([] 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([]) -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() }) @@ -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] + }" /> diff --git a/web/src/views/firewall/RuleView.vue b/web/src/views/firewall/RuleView.vue index 0f88072b..e7856c99 100644 --- a/web/src/views/firewall/RuleView.vue +++ b/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([] 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([]) 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() }) @@ -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] + }" /> diff --git a/web/src/views/firewall/SettingView.vue b/web/src/views/firewall/SettingView.vue index 72b83cb4..b896d422 100644 --- a/web/src/views/firewall/SettingView.vue +++ b/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() -})