refactor(component): messageBox componentization, and unified style

src/composables/config/useDeleteDriver.ts

@@ -1,5 +1,6 @@
 import { useI18n } from 'vue-i18n'
-import { EmqxMessageBox, EmqxMessage } from '@emqx/emqx-ui'
+import { EmqxMessage } from '@emqx/emqx-ui'
+import { MessageBoxConfirm } from '@/utils/element'
 import { deleteDriver } from '@/api/config'
 import type { DriverItemInList } from '@/types/config'
 import { PluginKind, NodeCatogery } from '@/types/enums'
@@ -8,12 +9,7 @@ export default () => {
   const { t } = useI18n()
   const delDriver = async ({ name }: DriverItemInList) => {
     try {
-      await EmqxMessageBox({
-        title: t('common.operateConfirm'),
-        message: t('common.confirmDelete'),
-        type: 'warning',
-        confirmButtonText: t('common.confirmButtonText'),
-      })
+      await MessageBoxConfirm()
       await deleteDriver(name)
       EmqxMessage.success(t('common.operateSuccessfully'))
       return Promise.resolve()

src/composables/config/useGroupList.ts

@@ -2,7 +2,8 @@ import type { Ref } from 'vue'
 import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
-import { EmqxMessageBox, EmqxMessage } from '@emqx/emqx-ui'
+import { EmqxMessage } from '@emqx/emqx-ui'
+import { MessageBoxConfirm } from '@/utils/element'
 import { queryGroupList, deleteGroup, queryTagList } from '@/api/config'
 import type { GroupData } from '@/types/config'
 import { OmitArrayFields } from '@/utils/utils'
@@ -53,11 +54,8 @@ export default () => {
   }
 
   const delGroup = async ({ name }: GroupDataInTable) => {
-    await EmqxMessageBox({
-      title: t('common.operateConfirm'),
-      message: t('common.confirmDelete'),
-      confirmButtonText: t('common.confirmButtonText'),
-    })
+    await MessageBoxConfirm()
+
     await deleteGroup(node.value, name)
     EmqxMessage.success(t('common.operateSuccessfully'))
     getGroupList()
@@ -70,20 +68,14 @@ export default () => {
   }
 
   const batchDeleteGroup = async () => {
-    await EmqxMessageBox({
-      title: t('common.operateConfirm'),
-      message: t('common.confirmDelete'),
-      confirmButtonText: t('common.confirmButtonText'),
-    })
+    await MessageBoxConfirm()
+
     delGroupList(groupCheckedList.value)
   }
 
   const clearGroup = async () => {
-    await EmqxMessageBox({
-      title: t('common.operateConfirm'),
-      message: t('common.confirmClear'),
-      confirmButtonText: t('common.confirmButtonText'),
-    })
+    await MessageBoxConfirm(t('common.confirmClear'))
+
     delGroupList(groupList.value)
   }
 

src/composables/config/usePlugin.ts

@@ -1,7 +1,8 @@
 import { ref } from 'vue'
 import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { EmqxMessage, EmqxMessageBox } from '@emqx/emqx-ui'
+import { EmqxMessage } from '@emqx/emqx-ui'
+import { MessageBoxConfirm } from '@/utils/element'
 import { addPlugin, deletePlugin, queryPluginList } from '@/api/config'
 import { createCommonErrorMessage } from '@/utils/utils'
 // import { PluginType } from '@/types/enums'
@@ -131,12 +132,8 @@ export const useDeletePlugin = () => {
   const { t } = useI18n()
   const delPlugin = async ({ name }: CreatedPlugin) => {
     try {
-      await EmqxMessageBox({
-        title: t('common.operateConfirm'),
-        message: t('common.confirmDelete'),
-        type: 'warning',
-        confirmButtonText: t('common.confirmButtonText'),
-      })
+      await MessageBoxConfirm()
+
       await deletePlugin(name)
       EmqxMessage.success(t('common.operateSuccessfully'))
       return Promise.resolve()

src/composables/config/useSubscription.ts

@@ -2,7 +2,8 @@ import { addSubscription, deleteSubscription, queryGroupList, querySubscription
 import type { GroupData, SubscriptionData, SubscriptionDataForm } from '@/types/config'
 import type { Ref } from 'vue'
 import { ref, computed, nextTick } from 'vue'
-import { EmqxMessageBox, EmqxMessage } from '@emqx/emqx-ui'
+import { EmqxMessage } from '@emqx/emqx-ui'
+import { MessageBoxConfirm } from '@/utils/element'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import useSouthDriver from './useSouthDriver'
@@ -51,10 +52,8 @@ export const useSubscriptionList = () => {
 
   const unsubscribe = async (confirmText: string, data: SubscriptionData | Array<SubscriptionData>) => {
     try {
-      await EmqxMessageBox.confirm(confirmText, t('common.operateConfirm'), {
-        confirmButtonText: t('common.confirmButtonText'),
-        cancelButtonText: t('common.cancelButtonText'),
-      })
+      await MessageBoxConfirm(confirmText)
+
       if (Array.isArray(data)) {
         const requestList = data.map((groupItem: SubscriptionData) => deleteSubscription(groupItem))
         await Promise.all(requestList)

src/composables/config/useTagList.ts

@@ -4,7 +4,8 @@ import type { Ref } from 'vue'
 import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
-import { EmqxMessage, EmqxMessageBox } from '@emqx/emqx-ui'
+import { EmqxMessage } from '@emqx/emqx-ui'
+import { MessageBoxConfirm } from '@/utils/element'
 import usePaging from '@/composables/usePaging'
 import { OmitArrayFields } from '@/utils/utils'
 import { debounce } from 'lodash'
@@ -105,19 +106,15 @@ export default () => {
   }
 
   const delTag = async (item: TagDataInTable) => {
-    await EmqxMessageBox.confirm(t('common.confirmDelete'), t('common.operateConfirm'), {
-      confirmButtonText: t('common.confirmButtonText'),
-      cancelButtonText: t('common.cancelButtonText'),
-    })
+    await MessageBoxConfirm()
+
     const delList = OmitArrayFields([item], ['checked'])
     deleteTagList(delList)
   }
 
   const batchDeleteTag = async () => {
-    await EmqxMessageBox.confirm(t('common.confirmDelete'), t('common.operateConfirm'), {
-      confirmButtonText: t('common.confirmButtonText'),
-      cancelButtonText: t('common.cancelButtonText'),
-    })
+    await MessageBoxConfirm()
+
     deleteTagList(tagCheckedList.value)
   }
 
@@ -127,11 +124,8 @@ export default () => {
   }
 
   const clearTag = async () => {
-    await EmqxMessageBox({
-      title: t('common.operateConfirm'),
-      message: t('common.confirmClear'),
-      confirmButtonText: t('common.confirmButtonText'),
-    })
+    await MessageBoxConfirm(t('common.confirmClear'))
+
     deleteTagList(totalData.value)
   }
 

src/utils/element.ts

@@ -0,0 +1,15 @@
+import { ElMessageBox } from 'element-plus'
+import i18n from '@/i18n/index'
+import type { MessageType } from 'element-plus/lib/el-message-box/src/message-box.type'
+
+export const MessageBoxConfirm = (
+  content: string = i18n.global.t('common.confirmDelete'),
+  title: string = i18n.global.t('common.operateConfirm'),
+  type: MessageType = 'warning',
+) => {
+  return ElMessageBox.confirm(content, title, {
+    confirmButtonText: i18n.global.t('common.confirmButtonText'),
+    cancelButtonText: i18n.global.t('common.cancelButtonText'),
+    type,
+  })
+}