feat: ✨ Add batch installation application function

components.d.ts

@@ -8,9 +8,10 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     About: typeof import('./src/components/About/index.vue')['default']
-    AppInstall: typeof import('./src/components/Device/components/ControlBar/AppInstall/index.vue')['default']
+    AppInstall: typeof import('./src/components/Device/components/BatchActions/AppInstall/index.vue')['default']
     AppSearch: typeof import('./src/components/AppSearch/index.vue')['default']
     AudioCodecSelect: typeof import('./src/components/Preference/components/AudioCodecSelect/index.vue')['default']
+    BatchActions: typeof import('./src/components/Device/components/BatchActions/index.vue')['default']
     Camera: typeof import('./src/components/Device/components/MoreDropdown/components/Camera/index.vue')['default']
     ControlBar: typeof import('./src/components/Device/components/ControlBar/index.vue')['default']
     Device: typeof import('./src/components/Device/index.vue')['default']
@@ -20,6 +21,7 @@ declare module 'vue' {
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']

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

@@ -0,0 +1,34 @@
+<template>
+  <div class="" @click="handleClick">
+    <slot />
+    <AppInstallProxy ref="appInstallProxyRef" />
+  </div>
+</template>
+
+<script>
+import AppInstallProxy from '$/components/Device/components/ControlBar/AppInstall/index.vue'
+import { sleep } from '$/utils'
+
+export default {
+  components: {
+    AppInstallProxy,
+  },
+  props: {
+    devices: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    async handleClick() {
+      for (let index = 0; index < this.devices.length; index++) {
+        const item = this.devices[index]
+        await this.$refs.appInstallProxyRef.handleInstall(item)
+        await sleep(2 * 1000)
+      }
+    },
+  },
+}
+</script>
+
+<style></style>

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

@@ -0,0 +1,71 @@
+<template>
+  <div class="flex items-center">
+    <component
+      :is="item.component || 'div'"
+      v-for="(item, index) in actionModel"
+      :key="index"
+      class="flex-none"
+      v-bind="{
+        devices,
+        ...(item.command
+          ? {
+            onClick: () => handleShell(item),
+          }
+          : {}),
+      }"
+    >
+      <template #default="{ loading = false } = {}">
+        <el-button
+          type="primary"
+          plain
+          :title="$t(item.tips || item.label)"
+          :loading="loading"
+        >
+          <template #icon>
+            <svg-icon
+              v-if="item.svgIcon"
+              :name="item.svgIcon"
+              :class="item.iconClass"
+            ></svg-icon>
+            <el-icon v-else-if="item.elIcon" :class="item.iconClass">
+              <component :is="item.elIcon" />
+            </el-icon>
+          </template>
+          {{ $t('common.batch') }}{{ $t(item.label) }}
+        </el-button>
+      </template>
+    </component>
+  </div>
+</template>
+
+<script>
+import AppInstall from './AppInstall/index.vue'
+
+export default {
+  components: {
+    AppInstall,
+  },
+  props: {
+    devices: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      actionModel: [
+        {
+          label: 'device.control.install',
+          svgIcon: 'install',
+          component: 'AppInstall',
+        },
+      ],
+    }
+  },
+  methods: {
+    handleShell() {},
+  },
+}
+</script>
+
+<style></style>

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

@@ -119,7 +119,6 @@ export default {
           command: 'input keyevent 26',
           tips: 'device.control.power.tips',
         },
-
         {
           label: 'device.control.rotation.name',
           svgIcon: 'rotation',

src/components/Device/index.vue

@@ -30,6 +30,13 @@
 
       <TerminalAction />
     </div>
+
+    <BatchActions
+      class="overflow-hidden transition-all"
+      :class="isMultipleRow ? 'h-12 opacity-100 mt-4' : 'h-0 opacity-0 mt-0'"
+      :devices="selectionRows"
+    />
+
     <div class="pt-4 flex-1 h-0 overflow-hidden">
       <el-table
         ref="elTable"
@@ -40,19 +47,25 @@
         border
         height="100%"
         row-key="id"
+        @selection-change="onSelectionChange"
       >
         <template #empty>
           <el-empty :description="$t('device.list.empty')" />
         </template>
+
+        <el-table-column type="selection"></el-table-column>
+
         <el-table-column
           prop="id"
           :label="$t('device.id')"
+          sortable
           show-overflow-tooltip
           align="left"
           width="200"
         />
         <el-table-column
           :label="$t('device.name')"
+          sortable
           show-overflow-tooltip
           align="left"
         >
@@ -119,6 +132,7 @@ import TerminalAction from './components/TerminalAction/index.vue'
 import MirrorAction from './components/MirrorAction/index.vue'
 import MoreDropdown from './components/MoreDropdown/index.vue'
 import WirelessAction from './components/WirelessAction/index.vue'
+import BatchActions from './components/BatchActions/index.vue'
 
 import { isIPWithPort, sleep } from '$/utils/index.js'
 
@@ -131,14 +145,21 @@ export default {
     MirrorAction,
     MoreDropdown,
     WirelessAction,
+    BatchActions,
   },
   data() {
     return {
       loading: false,
       deviceList: [],
       mirrorActionRefs: [],
+      selectionRows: [],
     }
   },
+  computed: {
+    isMultipleRow() {
+      return this.selectionRows.length > 0
+    },
+  },
   async created() {
     this.getDeviceData()
     this.unAdbWatch = await this.$adb.watch(this.onAdbWatch)
@@ -147,6 +168,9 @@ export default {
     this?.unAdbWatch?.()
   },
   methods: {
+    onSelectionChange(rows) {
+      this.selectionRows = rows
+    },
     async onAdbWatch(type, ret) {
       if (ret && ret.id) {
         this.getDeviceData()

src/locales/languages/en-US.json

@@ -10,6 +10,7 @@
   "common.progress": "Starting",
   "common.loading": "Loading",
   "common.search": "Search",
+  "common.batch": "Batch",
 
   "common.language.name": "Language",
   "common.language.placeholder": "Select language",

src/locales/languages/zh-CN.json

@@ -10,6 +10,7 @@
   "common.progress": "启动中",
   "common.loading": "加载中",
   "common.search": "搜索",
+  "common.batch": "批量",
 
   "common.language.name": "语言",
   "common.language.placeholder": "选择你需要的语言",

src/locales/languages/zh-TW.json

@@ -10,6 +10,7 @@
   "common.progress": "啟動中",
   "common.loading": "載入中",
   "common.search": "搜尋",
+  "common.batch": "批量",
 
   "common.language.name": "語言",
   "common.language.placeholder": "選擇你要的語言",