From 37ce2457bce9a1b661c6db7162023f53268833f5 Mon Sep 17 00:00:00 2001
From: viarotel <viarotel@qq.com>
Date: Thu, 4 Jul 2024 23:55:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Add=20batch=20installation?=
 =?UTF-8?q?=20application=20function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |  4 +-
 .../BatchActions/AppInstall/index.vue         | 34 +++++++++
 .../Device/components/BatchActions/index.vue  | 71 +++++++++++++++++++
 .../Device/components/ControlBar/index.vue    |  1 -
 src/components/Device/index.vue               | 24 +++++++
 src/locales/languages/en-US.json              |  1 +
 src/locales/languages/zh-CN.json              |  1 +
 src/locales/languages/zh-TW.json              |  1 +
 8 files changed, 135 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Device/components/BatchActions/AppInstall/index.vue
 create mode 100644 src/components/Device/components/BatchActions/index.vue

diff --git a/components.d.ts b/components.d.ts
index 768124d..c6282ce 100644
--- a/components.d.ts
+++ b/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']
diff --git a/src/components/Device/components/BatchActions/AppInstall/index.vue b/src/components/Device/components/BatchActions/AppInstall/index.vue
new file mode 100644
index 0000000..7aeef33
--- /dev/null
+++ b/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>
diff --git a/src/components/Device/components/BatchActions/index.vue b/src/components/Device/components/BatchActions/index.vue
new file mode 100644
index 0000000..8073157
--- /dev/null
+++ b/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>
diff --git a/src/components/Device/components/ControlBar/index.vue b/src/components/Device/components/ControlBar/index.vue
index 46b3c91..fd250ae 100644
--- a/src/components/Device/components/ControlBar/index.vue
+++ b/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',
diff --git a/src/components/Device/index.vue b/src/components/Device/index.vue
index dabbcc9..308af98 100644
--- a/src/components/Device/index.vue
+++ b/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()
diff --git a/src/locales/languages/en-US.json b/src/locales/languages/en-US.json
index c4160a8..3301185 100644
--- a/src/locales/languages/en-US.json
+++ b/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",
diff --git a/src/locales/languages/zh-CN.json b/src/locales/languages/zh-CN.json
index b84fab6..5058636 100644
--- a/src/locales/languages/zh-CN.json
+++ b/src/locales/languages/zh-CN.json
@@ -10,6 +10,7 @@
   "common.progress": "启动中",
   "common.loading": "加载中",
   "common.search": "搜索",
+  "common.batch": "批量",
 
   "common.language.name": "语言",
   "common.language.placeholder": "选择你需要的语言",
diff --git a/src/locales/languages/zh-TW.json b/src/locales/languages/zh-TW.json
index ed7fe9e..6cb4f7d 100644
--- a/src/locales/languages/zh-TW.json
+++ b/src/locales/languages/zh-TW.json
@@ -10,6 +10,7 @@
   "common.progress": "啟動中",
   "common.loading": "載入中",
   "common.search": "搜尋",
+  "common.batch": "批量",
 
   "common.language.name": "語言",
   "common.language.placeholder": "選擇你要的語言",