perf: 🚀 Optimize batch operation interaction

src/components/Device/components/BatchActions/Application/index.vue

@@ -50,10 +50,23 @@ export default {
 
       this.loading = true
 
+      const closeMessage = this.$message.loading(
+        this.$t('device.control.install.progress', {
+          deviceName: window.t('common.device'),
+        }),
+      ).close
+
       await allSettledWrapper(this.devices, (item) => {
-        return this.$refs.applicationProxyRef.invoke(item, { files })
+        return this.$refs.applicationProxyRef.invoke(item, {
+          files,
+          silent: true,
+        })
       })
 
+      closeMessage()
+
+      ElMessage.success(window.t('common.success.batch'))
+
       this.loading = false
     },
   },

src/components/Device/components/BatchActions/FileManage/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dropdown :hide-on-click="false">
+  <el-dropdown :hide-on-click="false" :disabled="loading">
     <div class="">
       <slot :loading="loading" />
       <FileManageProxy ref="fileManageProxyRef" />
@@ -58,10 +58,16 @@ async function handlePush(devices) {
 
   loading.value = true
 
+  const closeMessage = ElMessage.loading(
+    window.t('device.control.file.push.loading'),
+  ).close
+
   await allSettledWrapper(devices, (item) => {
-    return fileManageProxyRef.value.handlePush(item, { files })
+    return fileManageProxyRef.value.handlePush(item, { files, silent: true })
   })
 
+  closeMessage()
+
   ElMessage.success(window.t('common.success.batch'))
 
   loading.value = false

src/components/Device/components/BatchActions/Screenshot/index.vue

@@ -28,10 +28,20 @@ export default {
     async handleClick() {
       this.loading = true
 
+      const closeMessage = this.$message.loading(
+        window.t('device.control.capture.progress', {
+          deviceName: window.t('common.device'),
+        }),
+      ).close
+
       await allSettledWrapper(this.devices, (item) => {
-        return this.$refs.screenshotProxyRef.invoke(item)
+        return this.$refs.screenshotProxyRef.invoke(item, { silent: true })
       })
 
+      closeMessage()
+
+      ElMessage.success(window.t('common.success.batch'))
+
       this.loading = false
     },
   },

src/components/Device/components/BatchActions/Shell/index.vue

@@ -42,13 +42,16 @@ async function handleClick(devices) {
 
   loading.value = true
 
+  const closeLoading = ElMessage.loading(
+    window.t('device.control.shell.push.loading'),
+  ).close
+
   const failFiles = []
 
   await allSettledWrapper(devices, async (device) => {
     const successFiles = await selectAndSendFileToDevice(device.id, {
       files,
-      loadingText: window.t('device.control.shell.push.loading'),
-      successText: window.t('device.control.shell.push.success'),
+      silent: true,
     }).catch((e) => {
       console.warn(e.message)
       failFiles.push(e.message)
@@ -74,6 +77,8 @@ async function handleClick(devices) {
     return false
   }
 
+  closeLoading()
+
   await ElMessage.success(window.t('device.control.shell.success'))
 
   loading.value = false

src/components/Device/components/ControlBar/Application/index.vue

@@ -24,7 +24,7 @@ export default {
     preferenceData(...args) {
       return this.$store.preference.getData(...args)
     },
-    async handleInstall(device, { files } = {}) {
+    async handleInstall(device, { files, silent = false } = {}) {
       if (!files) {
         try {
           files = await this.$electron.ipcRenderer.invoke('show-open-dialog', {
@@ -47,11 +47,14 @@ export default {
         }
       }
 
-      const messageEl = this.$message.loading(
-        this.$t('device.control.install.progress', {
-          deviceName: this.$store.device.getLabel(device),
-        }),
-      )
+      let closeLoading = null
+      if (!silent) {
+        closeLoading = this.$message.loading(
+          this.$t('device.control.install.progress', {
+            deviceName: this.$store.device.getLabel(device),
+          }),
+        ).close
+      }
 
       let failCount = 0
 
@@ -62,7 +65,11 @@ export default {
         })
       })
 
-      messageEl.close()
+      if (silent) {
+        return false
+      }
+
+      closeLoading()
 
       const totalCount = files.length
       const successCount = totalCount - failCount

src/components/Device/components/ControlBar/FileManage/index.vue

@@ -32,7 +32,7 @@ const deviceStore = useDeviceStore()
 
 const loading = ref(false)
 
-async function handlePush(device, { files } = {}) {
+async function handlePush(device, { files, silent = false } = {}) {
   if (!files) {
     try {
       files = await window.electron.ipcRenderer.invoke('show-open-dialog', {
@@ -58,10 +58,15 @@ async function handlePush(device, { files } = {}) {
 
   loading.value = true
 
-  const closeMessage = ElMessage.loading(
-    window.t('device.control.file.push.loading'),
-    { grouping: true },
-  ).close
+  let closeLoading
+
+  if (!silent) {
+    closeLoading = ElMessage.loading(
+      `${deviceStore.getLabel(device)}: ${window.t(
+        'device.control.file.push.loading',
+      )}`,
+    ).close
+  }
 
   let failCount = 0
 
@@ -73,11 +78,15 @@ async function handlePush(device, { files } = {}) {
 
   loading.value = false
 
+  if (silent) {
+    return false
+  }
+
   const totalCount = files.length
   const successCount = totalCount - failCount
 
   if (successCount) {
-    closeMessage()
+    closeLoading()
 
     if (totalCount > 1) {
       ElMessage.success(
@@ -100,7 +109,7 @@ async function handlePush(device, { files } = {}) {
     return false
   }
 
-  closeMessage()
+  closeLoading()
   ElMessage.warning(window.t('device.control.file.push.error'))
 }
 

src/components/Device/components/ControlBar/Screenshot/index.vue

@@ -22,12 +22,15 @@ export default {
     preferenceData(...args) {
       return this.$store.preference.getData(...args)
     },
-    async handleCapture(device) {
-      const messageEl = this.$message.loading(
-        this.$t('device.control.capture.progress', {
-          deviceName: this.$store.device.getLabel(device),
-        }),
-      )
+    async handleCapture(device, { silent = false } = {}) {
+      let closeLoading
+      if (!silent) {
+        closeLoading = this.$message.loading(
+          this.$t('device.control.capture.progress', {
+            deviceName: this.$store.device.getLabel(device),
+          }),
+        ).close
+      }
 
       const fileName = this.$store.device.getLabel(
         device,
@@ -39,18 +42,21 @@ export default {
 
       try {
         await this.$adb.screencap(device.id, { savePath })
-        await this.handleSuccess(savePath)
       }
       catch (error) {
         if (error.message) {
           this.$message.warning(error.message)
         }
+        return false
       }
 
-      messageEl.close()
-    },
-    async handleSuccess(savePath) {
-      return this.$message.success(
+      if (silent) {
+        return false
+      }
+
+      closeLoading()
+
+      this.$message.success(
         `${this.$t(
           'device.control.capture.success.message.title',
         )}: ${savePath}`,

src/locales/languages/en-US.json

@@ -12,6 +12,7 @@
   "common.loading": "Loading",
   "common.search": "Search",
   "common.batch": "Batch",
+  "common.device": "Device",
 
   "common.language.name": "Language",
   "common.language.placeholder": "Select language",
@@ -100,15 +101,15 @@
   "device.control.file.name": "File Manager",
   "device.control.file.push": "Push File",
   "device.control.file.push.placeholder": "Please select the file to push",
-  "device.control.file.push.loading": "Push file",
+  "device.control.file.push.loading": "Push file...",
   "device.control.file.push.success.name": "Push files successfully",
   "device.control.file.push.success": "Successfully pushed {totalCount} files to the /sdcard/Download/ directory of {deviceName}, {successCount} succeeded, and {failCount} failed",
   "device.control.file.push.success.single": "Files successfully pushed to the /sdcard/Download/ directory of {deviceName}",
   "device.control.file.push.error": "Failed to push the file, please check the file and try again",
   "device.control.shell.name": "Execute Script",
   "device.control.shell.tips": "Perform custom script through the ADB command",
   "device.control.shell.select": "Please select the script you want to execute",
-  "device.control.shell.push.loading": "Push script",
+  "device.control.shell.push.loading": "Push script...",
   "device.control.shell.push.success": "Push script success",
   "device.control.shell.enter": "Please enter the Enter key to confirm the execution of the script",
   "device.control.shell.success": "Script execution successfully",

src/locales/languages/zh-CN.json

@@ -12,6 +12,7 @@
   "common.loading": "加载中",
   "common.search": "搜索",
   "common.batch": "批量",
+  "common.device": "设备",
 
   "common.language.name": "语言",
   "common.language.placeholder": "选择你需要的语言",
@@ -100,15 +101,15 @@
   "device.control.file.name": "文件管理",
   "device.control.file.push": "推送文件",
   "device.control.file.push.placeholder": "请选择要推送的文件",
-  "device.control.file.push.loading": "推送文件中",
+  "device.control.file.push.loading": "推送文件中...",
   "device.control.file.push.success.name": "推送文件成功",
   "device.control.file.push.success": "已成功将 {totalCount} 个文件推送到 {deviceName} 的 /sdcard/Download/ 目录，{successCount} 成功，{failCount} 失败。",
   "device.control.file.push.success.single": "文件已成功推送到 {deviceName} 的 /sdcard/Download/ 目录",
   "device.control.file.push.error": "推送文件失败，请检查文件后重试",
   "device.control.shell.name": "执行脚本",
   "device.control.shell.tips": "通过 ADB 命令执行自定义脚本",
   "device.control.shell.select": "请选择要执行的脚本",
-  "device.control.shell.push.loading": "推送脚本中",
+  "device.control.shell.push.loading": "推送脚本中...",
   "device.control.shell.push.success": "推送脚本成功",
   "device.control.shell.enter": "请输入回车键确认执行该脚本",
   "device.control.shell.success": "脚本执行成功",

src/locales/languages/zh-TW.json

@@ -12,6 +12,7 @@
   "common.loading": "載入中",
   "common.search": "搜尋",
   "common.batch": "批量",
+  "common.device": "裝置",
 
   "common.language.name": "語言",
   "common.language.placeholder": "選擇你要的語言",
@@ -100,15 +101,15 @@
   "device.control.file.name": "檔案管理",
   "device.control.file.push": "推送檔案",
   "device.control.file.push.placeholder": "請選擇要推送的檔案",
-  "device.control.file.push.loading": "推送檔案中",
+  "device.control.file.push.loading": "推送檔案中...",
   "device.control.file.push.success.name": "推送檔案成功",
   "device.control.file.push.success": "已成功將 {totalCount} 個檔案推送到 {deviceName} 的 /sdcard/Download/ 目錄，{successCount} 成功，{failCount} 失敗。",
   "device.control.file.push.success.single": "檔案已成功推送到 {deviceName} 的 /sdcard/Download/ 目錄",
   "device.control.file.push.error": "推送檔案失敗，請檢查檔案後重試",
   "device.control.shell.name": "執行腳本",
   "device.control.shell.tips": "透過 ADB 命令執行自訂腳本",
   "device.control.shell.select": "請選擇要執行的腳本",
-  "device.control.shell.push.loading": "推送腳本中",
+  "device.control.shell.push.loading": "推送腳本中...",
   "device.control.shell.push.success": "推送腳本成功",
   "device.control.shell.enter": "請輸入回車鍵確認執行該腳本",
   "device.control.shell.success": "腳本執行成功",

src/utils/device/index.js

@@ -1,5 +1,5 @@
 import { ElMessage } from 'element-plus'
-import { allSettledWrapper } from '$/utils'
+import { allSettledWrapper, sleep } from '$/utils'
 /**
  * 选择并将文件发送到设备
  */
@@ -8,6 +8,7 @@ export async function selectAndSendFileToDevice(
   {
     files,
     multiSelections = false,
+    silent = false,
     extensions = ['*'],
     selectText = window.t('device.control.file.push.placeholder'),
     loadingText = window.t('device.control.file.push.loading'),
@@ -37,7 +38,10 @@ export async function selectAndSendFileToDevice(
     }
   }
 
-  const closeMessage = ElMessage.loading(loadingText).close
+  let closeLoading
+  if (!silent) {
+    closeLoading = ElMessage.loading(`${deviceId}: ${loadingText}`).close
+  }
 
   const successFiles = []
   const failFiles = []
@@ -53,14 +57,18 @@ export async function selectAndSendFileToDevice(
     }
   })
 
+  await sleep()
+
   if (failFiles.length) {
-    closeMessage()
+    closeLoading?.()
     throw new Error(`Push file failed: ${failFiles.join(',')}`)
   }
 
-  closeMessage()
+  closeLoading?.()
 
-  ElMessage.success({ message: successText, grouping: true })
+  if (!silent) {
+    ElMessage.success({ message: successText, grouping: true })
+  }
 
   return successFiles
 }