feat: 大部分视图支持消息总线

web/src/views/backup/IndexView.vue

@@ -13,18 +13,12 @@ const createModel = ref({
   target: '',
   path: ''
 })
-const oldTab = ref('')
 
 const handleCreate = () => {
   backup.create(currentTab.value, createModel.value.target, createModel.value.path).then(() => {
     createModal.value = false
     window.$message.success('创建成功')
-    // 有点low，但是没找到更好的办法
-    oldTab.value = currentTab.value
-    currentTab.value = ''
-    setTimeout(() => {
-      currentTab.value = oldTab.value
-    }, 0)
+    window.$bus.emit('backup:refresh')
   })
 }
 </script>

web/src/views/backup/ListView.vue

@@ -145,6 +145,13 @@ const handleDelete = async (file: string) => {
 
 onMounted(() => {
   onPageChange(pagination.page)
+  window.$bus.on('backup:refresh', () => {
+    onPageChange(pagination.page)
+  })
+})
+
+onUnmounted(() => {
+  window.$bus.off('backup:refresh')
 })
 </script>
 

web/src/views/cert/AccountView.vue

@@ -31,7 +31,7 @@ const updateAccountModel = ref<any>({
 const updateAccountModal = ref(false)
 const updateAccount = ref<any>()
 
-const accountColumns: any = [
+const columns: any = [
   {
     title: '邮箱',
     key: 'email',
@@ -100,7 +100,7 @@ const accountColumns: any = [
             onPositiveClick: async () => {
               await cert.accountDelete(row.id)
               window.$message.success('删除成功')
-              onAccountPageChange(1)
+              onPageChange(1)
             }
           },
           {
@@ -126,9 +126,9 @@ const accountColumns: any = [
     }
   }
 ]
-const accountData = ref<Account[]>([] as Account[])
+const data = ref<Account[]>([] as Account[])
 
-const accountPagination = reactive({
+const pagination = reactive({
   page: 1,
   pageCount: 1,
   pageSize: 20,
@@ -138,18 +138,18 @@ const accountPagination = reactive({
   pageSizes: [20, 50, 100, 200]
 })
 
-const onAccountPageChange = (page: number) => {
-  accountPagination.page = page
-  getAccountList(page, accountPagination.pageSize).then((res) => {
-    accountData.value = res.items
-    accountPagination.itemCount = res.total
-    accountPagination.pageCount = res.total / accountPagination.pageSize + 1
+const onPageChange = (page: number) => {
+  pagination.page = page
+  getAccountList(page, pagination.pageSize).then((res) => {
+    data.value = res.items
+    pagination.itemCount = res.total
+    pagination.pageCount = res.total / pagination.pageSize + 1
   })
 }
 
-const onAccountPageSizeChange = (pageSize: number) => {
-  accountPagination.pageSize = pageSize
-  onAccountPageChange(1)
+const onPageSizeChange = (pageSize: number) => {
+  pagination.pageSize = pageSize
+  onPageChange(1)
 }
 
 const getAccountList = async (page: number, limit: number) => {
@@ -165,14 +165,21 @@ const handleUpdateAccount = async () => {
   messageReactive.destroy()
   window.$message.success('更新成功')
   updateAccountModal.value = false
-  onAccountPageChange(1)
+  onPageChange(1)
   updateAccountModel.value.email = ''
   updateAccountModel.value.hmac_encoded = ''
   updateAccountModel.value.kid = ''
 }
 
 onMounted(() => {
-  onAccountPageChange(1)
+  onPageChange(pagination.page)
+  window.$bus.on('cert:refresh-account', () => {
+    onPageChange(pagination.page)
+  })
+})
+
+onUnmounted(() => {
+  window.$bus.off('cert:refresh-account')
 })
 </script>
 
@@ -183,12 +190,12 @@ onMounted(() => {
       remote
       :scroll-x="1000"
       :loading="false"
-      :columns="accountColumns"
-      :data="accountData"
+      :columns="columns"
+      :data="data"
       :row-key="(row: any) => row.id"
-      :pagination="accountPagination"
-      @update:page="onAccountPageChange"
-      @update:page-size="onAccountPageSizeChange"
+      :pagination="pagination"
+      @update:page="onPageChange"
+      @update:page-size="onPageSizeChange"
     />
   </n-space>
   <n-modal

web/src/views/cert/CertView.vue

@@ -37,7 +37,7 @@ const deployCertModel = ref<any>({
   website_id: 0
 })
 
-const certColumns: any = [
+const columns: any = [
   {
     title: '域名',
     key: 'domains',
@@ -221,7 +221,7 @@ const certColumns: any = [
                           .obtain(row.id)
                           .then(() => {
                             window.$message.success('签发成功')
-                            onCertPageChange(1)
+                            onPageChange(1)
                           })
                           .finally(() => {
                             d.loading = false
@@ -234,7 +234,7 @@ const certColumns: any = [
                       .obtain(row.id)
                       .then(() => {
                         window.$message.success('签发成功')
-                        onCertPageChange(1)
+                        onPageChange(1)
                       })
                       .finally(() => {
                         messageReactive.destroy()
@@ -282,7 +282,7 @@ const certColumns: any = [
                   await cert.renew(row.id)
                   messageReactive.destroy()
                   window.$message.success('续签成功')
-                  onCertPageChange(1)
+                  onPageChange(1)
                 }
               },
               {
@@ -335,7 +335,7 @@ const certColumns: any = [
             onPositiveClick: async () => {
               await cert.certDelete(row.id)
               window.$message.success('删除成功')
-              onCertPageChange(1)
+              onPageChange(1)
             }
           },
           {
@@ -361,9 +361,9 @@ const certColumns: any = [
     }
   }
 ]
-const certData = ref<Cert[]>([] as Cert[])
+const data = ref<Cert[]>([] as Cert[])
 
-const certPagination = reactive({
+const pagination = reactive({
   page: 1,
   pageCount: 1,
   pageSize: 20,
@@ -373,18 +373,18 @@ const certPagination = reactive({
   pageSizes: [20, 50, 100, 200]
 })
 
-const onCertPageChange = (page: number) => {
-  certPagination.page = page
-  getCertList(page, certPagination.pageSize).then((res) => {
-    certData.value = res.items
-    certPagination.itemCount = res.total
-    certPagination.pageCount = res.total / certPagination.pageSize + 1
+const onPageChange = (page: number) => {
+  pagination.page = page
+  getCertList(page, pagination.pageSize).then((res) => {
+    data.value = res.items
+    pagination.itemCount = res.total
+    pagination.pageCount = res.total / pagination.pageSize + 1
   })
 }
 
-const onCertPageSizeChange = (pageSize: number) => {
-  certPagination.pageSize = pageSize
-  onCertPageChange(1)
+const onPageSizeChange = (pageSize: number) => {
+  pagination.pageSize = pageSize
+  onPageChange(1)
 }
 
 const getCertList = async (page: number, limit: number) => {
@@ -396,7 +396,7 @@ const handleUpdateCert = async () => {
   await cert.certUpdate(updateCert.value, updateCertModel.value)
   window.$message.success('更新成功')
   updateCertModal.value = false
-  onCertPageChange(1)
+  onPageChange(1)
   updateCertModel.value.domains = []
   updateCertModel.value.dns_id = 0
   updateCertModel.value.type = 'P256'
@@ -411,7 +411,7 @@ const handleDeployCert = async () => {
   deployCertModal.value = false
   deployCertModel.value.id = 0
   deployCertModel.value.website_id = 0
-  onCertPageChange(1)
+  onPageChange(1)
 }
 
 const handleShowModalClose = () => {
@@ -420,7 +420,14 @@ const handleShowModalClose = () => {
 }
 
 onMounted(() => {
-  onCertPageChange(1)
+  onPageChange(pagination.page)
+  window.$bus.on('cert:refresh-cert', () => {
+    onPageChange(pagination.page)
+  })
+})
+
+onUnmounted(() => {
+  window.$bus.off('cert:refresh-cert')
 })
 </script>
 
@@ -431,12 +438,12 @@ onMounted(() => {
       remote
       :scroll-x="1000"
       :loading="false"
-      :columns="certColumns"
-      :data="certData"
+      :columns="columns"
+      :data="data"
       :row-key="(row: any) => row.id"
-      :pagination="certPagination"
-      @update:page="onCertPageChange"
-      @update:page-size="onCertPageSizeChange"
+      :pagination="pagination"
+      @update:page="onPageChange"
+      @update:page-size="onPageSizeChange"
     />
   </n-space>
   <n-modal

web/src/views/cert/CreateAccountModal.vue

@@ -33,6 +33,7 @@ const handleCreateAccount = async () => {
   cert
     .accountCreate(model.value)
     .then(() => {
+      show.value = false
       window.$message.success('创建成功')
       model.value.email = ''
       model.value.hmac_encoded = ''
@@ -40,6 +41,7 @@ const handleCreateAccount = async () => {
     })
     .finally(() => {
       messageReactive?.destroy()
+      window.$bus.emit('cert:refresh-account')
     })
 }
 </script>

web/src/views/cert/CreateCertModal.vue

@@ -24,6 +24,7 @@ const model = ref<any>({
 
 const handleCreateCert = async () => {
   await cert.certCreate(model.value)
+  show.value = false
   window.$message.success('创建成功')
   model.value = false
   model.value.domains = []
@@ -32,6 +33,7 @@ const handleCreateCert = async () => {
   model.value.account_id = 0
   model.value.website_id = 0
   model.value.auto_renew = true
+  window.$bus.emit('cert:refresh-cert')
 }
 </script>
 

web/src/views/cert/CreateDnsModal.vue

@@ -21,11 +21,13 @@ const model = ref<any>({
 
 const handleCreateDNS = async () => {
   await cert.dnsCreate(model.value)
+  show.value = false
   window.$message.success('创建成功')
   show.value = false
   model.value.data.ak = ''
   model.value.data.sk = ''
   model.value.name = ''
+  window.$bus.emit('cert:refresh-dns')
 }
 </script>
 

web/src/views/cert/DnsView.vue

@@ -21,7 +21,7 @@ const updateDNSModel = ref<any>({
 const updateDNSModal = ref(false)
 const updateDNS = ref<any>()
 
-const dnsColumns: any = [
+const columns: any = [
   {
     title: '备注名称',
     key: 'name',
@@ -93,7 +93,7 @@ const dnsColumns: any = [
             onPositiveClick: async () => {
               await cert.dnsDelete(row.id)
               window.$message.success('删除成功')
-              onDnsPageChange(1)
+              onPageChange(1)
             }
           },
           {
@@ -119,9 +119,10 @@ const dnsColumns: any = [
     }
   }
 ]
-const dnsData = ref<DNS[]>([] as DNS[])
 
-const dnsPagination = reactive({
+const data = ref<DNS[]>([] as DNS[])
+
+const pagination = reactive({
   page: 1,
   pageCount: 1,
   pageSize: 20,
@@ -131,18 +132,18 @@ const dnsPagination = reactive({
   pageSizes: [20, 50, 100, 200]
 })
 
-const onDnsPageChange = (page: number) => {
-  dnsPagination.page = page
-  getDnsList(page, dnsPagination.pageSize).then((res) => {
-    dnsData.value = res.items
-    dnsPagination.itemCount = res.total
-    dnsPagination.pageCount = res.total / dnsPagination.pageSize + 1
+const onPageChange = (page: number) => {
+  pagination.page = page
+  getDnsList(page, pagination.pageSize).then((res) => {
+    data.value = res.items
+    pagination.itemCount = res.total
+    pagination.pageCount = res.total / pagination.pageSize + 1
   })
 }
 
-const onDnsPageSizeChange = (pageSize: number) => {
-  dnsPagination.pageSize = pageSize
-  onDnsPageChange(1)
+const onPageSizeChange = (pageSize: number) => {
+  pagination.pageSize = pageSize
+  onPageChange(1)
 }
 
 const getDnsList = async (page: number, limit: number) => {
@@ -154,14 +155,21 @@ const handleUpdateDNS = async () => {
   await cert.dnsUpdate(updateDNS.value, updateDNSModel.value)
   window.$message.success('更新成功')
   updateDNSModal.value = false
-  onDnsPageChange(1)
+  onPageChange(1)
   updateDNSModel.value.data.ak = ''
   updateDNSModel.value.data.sk = ''
   updateDNSModel.value.name = ''
 }
 
 onMounted(async () => {
-  onDnsPageChange(1)
+  onPageChange(pagination.page)
+  window.$bus.on('cert:refresh-dns', () => {
+    onPageChange(pagination.page)
+  })
+})
+
+onUnmounted(() => {
+  window.$bus.off('cert:refresh-dns')
 })
 </script>
 
@@ -172,12 +180,12 @@ onMounted(async () => {
       remote
       :scroll-x="1000"
       :loading="false"
-      :columns="dnsColumns"
-      :data="dnsData"
+      :columns="columns"
+      :data="data"
       :row-key="(row: any) => row.id"
-      :pagination="dnsPagination"
-      @update:page="onDnsPageChange"
-      @update:page-size="onDnsPageSizeChange"
+      :pagination="pagination"
+      @update:page="onPageChange"
+      @update:page-size="onPageSizeChange"
     />
   </n-space>
   <n-modal

web/src/views/ssh/CreateModal.vue

@@ -22,6 +22,7 @@ const handleSubmit = async () => {
     .create(model.value)
     .then(() => {
       window.$message.success('创建成功')
+      window.$bus.emit('ssh:refresh')
       loading.value = false
       show.value = false
       model.value = {

web/src/views/ssh/IndexView.vue

@@ -208,26 +208,17 @@ const onTermWheel = (event: WheelEvent) => {
   }
 }
 
-watch(create, () => {
-  if (!create.value) fetchData()
-})
-
-watch(update, () => {
-  if (!update.value) {
-    fetchData()
-    updateId.value = 0
-  }
-})
-
 onMounted(() => {
   // https://github.com/xtermjs/xterm.js/pull/5178
   document.fonts.ready.then((fontFaceSet: any) =>
     Promise.all(Array.from(fontFaceSet).map((el: any) => el.load())).then(fetchData)
   )
+  window.$bus.on('ssh:refresh', fetchData)
 })
 
 onUnmounted(() => {
   closeSession()
+  window.$bus.off('ssh:refresh')
 })
 </script>
 

web/src/views/ssh/UpdateModal.vue

@@ -23,8 +23,10 @@ const handleSubmit = async () => {
     .update(id.value, model.value)
     .then(() => {
       window.$message.success('更新成功')
+      id.value = 0
       loading.value = false
       show.value = false
+      window.$bus.emit('ssh:refresh')
     })
     .catch(() => {
       loading.value = false

web/src/views/task/CreateModal.vue

@@ -67,6 +67,7 @@ const handleSubmit = async () => {
     .create(createModel.value)
     .then(() => {
       window.$message.success('创建成功')
+      window.$bus.emit('task:refresh-cron')
       loading.value = false
       show.value = false
     })

web/src/views/task/CronView.vue

@@ -232,6 +232,13 @@ const saveTaskEdit = async () => {
 
 onMounted(() => {
   onPageChange(pagination.page)
+  window.$bus.on('task:refresh-cron', () => {
+    onPageChange(pagination.page)
+  })
+})
+
+onUnmounted(() => {
+  window.$bus.off('task:refresh-cron')
 })
 </script>