perf: 💄 Optimize volume control and gnirehtet

package.json

@@ -37,7 +37,7 @@
     "electron-log": "^5.0.0",
     "electron-store": "^8.1.0",
     "electron-updater": "^6.1.4",
-    "element-plus": "^2.4.1",
+    "element-plus": "^2.4.2",
     "fix-path": "^4.0.0",
     "fs-extra": "^11.1.1",
     "husky": "^8.0.0",

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

@@ -1,11 +1,23 @@
 <template>
-  <div class="" @click="handleGnirehtet(device)">
-    <slot />
-  </div>
+  <el-dropdown :disabled="loading">
+    <div class="">
+      <slot :loading="loading" />
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item @click="handleStart(device)">
+          {{ $t("device.control.gnirehtet.start") }}
+        </el-dropdown-item>
+        <el-dropdown-item @click="handleStop(device)">
+          {{ $t("device.control.gnirehtet.stop") }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
 </template>
 
 <script>
-import LoadingIcon from '@/components/Device/components/LoadingIcon/index.vue'
+import { sleep } from '@/utils'
 
 export default {
   props: {
@@ -15,32 +27,39 @@ export default {
     },
   },
   data() {
-    return {}
+    return {
+      loading: false,
+    }
   },
   methods: {
     preferenceData(...args) {
       return this.$store.preference.getData(...args)
     },
-    async handleGnirehtet(device) {
-      const messageEl = this.$message({
-        message: this.$t('device.control.gnirehtet.progress', {
-          deviceName: device.$name,
-        }),
-        icon: LoadingIcon,
-        duration: 0,
-      })
+    async handleStart(device) {
+      this.loading = true
 
       try {
         await this.$gnirehtet.run(device.id)
+        await sleep()
         this.$message.success(this.$t('device.control.gnirehtet.success'))
       }
       catch (error) {
-        if (error.message) {
-          this.$message.warning(error.message)
-        }
+        this.$message.warning(error.message || 'Start service failure')
       }
 
-      messageEl.close()
+      this.loading = false
+    },
+    async handleStop() {
+      this.loading = true
+      try {
+        await this.$gnirehtet.stop(this.device.id)
+        await sleep()
+        this.$message.success(this.$t('common.success'))
+      }
+      catch (error) {
+        this.$message.warning(error.message || 'Stop service failure')
+      }
+      this.loading = false
     },
   },
 }

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

@@ -0,0 +1,66 @@
+<template>
+  <el-dropdown :hide-on-click="false" @command="handleCommand">
+    <div class="">
+      <slot :loading="loading" />
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+          v-for="item of options"
+          :key="item.value"
+          :command="item.value"
+        >
+          {{ $t(item.label) }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  props: {
+    device: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      commandMap: {
+        'volume-down': 'input keyevent KEYCODE_VOLUME_DOWN',
+        'volume-up': 'input keyevent KEYCODE_VOLUME_UP',
+        'volume-mute': 'input keyevent KEYCODE_VOLUME_MUTE',
+      },
+      options: [
+        {
+          label: 'device.control.volume-up.name',
+          value: 'volume-up',
+        },
+        {
+          label: 'device.control.volume-down.name',
+          value: 'volume-down',
+        },
+        {
+          label: 'device.control.volume-mute.name',
+          value: 'volume-mute',
+        },
+      ],
+    }
+  },
+  methods: {
+    async handleCommand(value) {
+      this.loading = true
+
+      const command = this.commandMap[value]
+
+      this.$adb.deviceShell(this.device.id, command)
+
+      this.loading = false
+    },
+  },
+}
+</script>
+
+<style></style>

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

@@ -51,6 +51,7 @@ import AppInstall from './AppInstall/index.vue'
 import Gnirehtet from './Gnirehtet/index.vue'
 import MirrorGroup from './MirrorGroup/index.vue'
 import Rotation from './Rotation/index.vue'
+import Volume from './Volume/index.vue'
 
 export default {
   components: {
@@ -59,6 +60,7 @@ export default {
     Gnirehtet,
     MirrorGroup,
     Rotation,
+    Volume,
   },
   props: {
     device: {
@@ -72,17 +74,17 @@ export default {
         {
           label: 'device.control.switch',
           elIcon: 'Switch',
-          command: 'input keyevent KEYCODE_APP_SWITCH',
+          command: 'input keyevent 187',
         },
         {
           label: 'device.control.home',
           svgIcon: 'home',
-          command: 'input keyevent KEYCODE_HOME',
+          command: 'input keyevent 3',
         },
         {
           label: 'device.control.return',
           elIcon: 'Back',
-          command: 'input keyevent KEYCODE_BACK',
+          command: 'input keyevent 4',
         },
         {
           label: 'device.control.notification',
@@ -93,33 +95,19 @@ export default {
         {
           label: 'device.control.power',
           elIcon: 'SwitchButton',
-          command: 'input keyevent KEYCODE_POWER',
+          command: 'input keyevent 26',
           tips: 'device.control.power.tips',
         },
-        {
-          label: 'device.control.reboot',
-          elIcon: 'RefreshLeft',
-          command: 'reboot',
-        },
+
         {
           label: 'device.control.rotation.name',
           svgIcon: 'rotation',
           component: 'Rotation',
         },
         {
-          label: 'device.control.volume-down.name',
-          svgIcon: 'volume-down',
-          command: 'input keyevent KEYCODE_VOLUME_DOWN',
-        },
-        {
-          label: 'device.control.volume-up.name',
+          label: 'device.control.volume.name',
           svgIcon: 'volume-up',
-          command: 'input keyevent KEYCODE_VOLUME_UP',
-        },
-        {
-          label: 'device.control.volume-mute.name',
-          svgIcon: 'volume-mute',
-          command: 'input keyevent KEYCODE_VOLUME_MUTE',
+          component: 'Volume',
         },
         {
           label: 'device.control.capture',
@@ -127,6 +115,11 @@ export default {
           component: 'Screenshot',
           tips: '',
         },
+        {
+          label: 'device.control.reboot',
+          elIcon: 'RefreshLeft',
+          command: 'reboot',
+        },
         {
           label: 'device.control.install',
           svgIcon: 'install',

src/icons/components/SvgIcon.vue

@@ -13,15 +13,22 @@ export default {
       SvgComponent: null,
     }
   },
-  created() {
-    this.getSvgComponent()
+
+  watch: {
+    name: {
+      handler(value) {
+        if (!value) {
+          return false
+        }
+
+        this.SvgComponent = null
+        this.getSvgComponent()
+      },
+      immediate: true,
+    },
   },
   methods: {
     async getSvgComponent() {
-      if (!this.name) {
-        return
-      }
-
       const module = await import(`../svg/${this.name}.svg?component`)
       this.SvgComponent = module.default.render()
       // console.log('this.SvgComponent', this.SvgComponent)

src/locales/languages/en_US.json

@@ -100,6 +100,7 @@
   "device.control.mirror-group.name": "Mirror Group",
   "device.control.mirror-group.tips": "When enabled, can mirror multiple simulated secondary displays and achieve multi-screen collaboration by operating each mirrored window. Note this requires ROM support and desktop mode enabled.",
   "device.control.mirror-group.open": "Open {num} windows",
+  "device.control.volume.name": "Volume",
   "device.control.volume-up.name": "Volume Up",
   "device.control.volume-down.name": "Volume Down",
   "device.control.volume-mute.name": "Mute",

src/locales/languages/zh_CN.json

@@ -9,6 +9,7 @@
   "common.tips": "提示",
   "common.open": "打开",
   "common.input.placeholder": "请填写",
+  "common.success": "操作成功",
 
   "close.quit": "退出",
   "close.quit.cancel": "取消退出",
@@ -95,12 +96,16 @@
   "device.control.gnirehtet.tips": "使用 Gnirehtet 为 Android 提供反向网络共享；注意：首次连接需要在设备上进行授权",
   "device.control.gnirehtet.progress": "正在启动 Gnirehtet 反向供网服务中...",
   "device.control.gnirehtet.success": "Gnirehtet 反向网络共享功能启动成功",
+  "device.control.gnirehtet.start": "启动服务",
+  "device.control.gnirehtet.stop": "停止服务",
+  "device.control.gnirehtet.stop.success": "停止服务成功",
   "device.control.mirror-group.name": "多屏协同",
   "device.control.mirror-group.tips": "开启后，可以同时镜像多个模拟辅助显示设备，并通过操作各个镜像窗口实现多屏协同功能。请注意，此功能需要手机 ROM 支持，并且必须开启强制使用桌面模式选项。",
   "device.control.mirror-group.open": "开启 {num} 个窗口",
+  "device.control.volume.name": "音量控制",
   "device.control.volume-up.name": "增加音量",
   "device.control.volume-down.name": "减小音量",
-  "device.control.volume-mute.name": "静音",
+  "device.control.volume-mute.name": "关闭音量",
   "device.control.rotation.name": "旋转屏幕",
   "device.control.rotation.vertically": "纵向旋转",
   "device.control.rotation.horizontally": "横向旋转",