perf: ♻️ Optimize gnirehtet

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

@@ -1,14 +1,12 @@
 <template>
-  <el-dropdown :disabled="loading">
-    <div class="">
-      <slot :loading="loading" />
+  <el-dropdown>
+    <div class="" :title="loadingText" @click="handleStart">
+      <slot :loading="device.$gnirehtetLoading" />
     </div>
-    <template #dropdown>
+
+    <template v-if="device.$gnirehtetLoading" #dropdown>
       <el-dropdown-menu>
-        <el-dropdown-item @click="handleStart(device)">
-          {{ $t("device.control.gnirehtet.start") }}
-        </el-dropdown-item>
-        <el-dropdown-item @click="handleStop(device)">
+        <el-dropdown-item @click="handleStop">
           {{ $t("device.control.gnirehtet.stop") }}
         </el-dropdown-item>
       </el-dropdown-menu>
@@ -28,18 +26,19 @@ export default {
   },
   data() {
     return {
-      loading: false,
+      loadingText: '',
     }
   },
   methods: {
     preferenceData(...args) {
       return this.$store.preference.getData(...args)
     },
-    async handleStart(device) {
-      this.loading = true
+    async handleStart() {
+      this.loadingText = this.$t('device.control.gnirehtet.running')
+      this.device.$gnirehtetLoading = true
 
       try {
-        await this.$gnirehtet.run(device.id)
+        await this.$gnirehtet.run(this.device.id)
         await sleep()
         this.$message.success(
           this.$t('device.control.gnirehtet.start.success'),
@@ -47,12 +46,13 @@ export default {
       }
       catch (error) {
         this.$message.warning(error.message || 'Start service failure')
+        this.device.$gnirehtetLoading = false
+        this.loadingText = ''
       }
-
-      this.loading = false
     },
     async handleStop() {
-      this.loading = true
+      this.loadingText = this.$t('device.control.gnirehtet.stopping')
+
       try {
         await this.$gnirehtet.stop(this.device.id)
         await sleep()
@@ -61,7 +61,9 @@ export default {
       catch (error) {
         this.$message.warning(error.message || 'Stop service failure')
       }
-      this.loading = false
+
+      this.device.$gnirehtetLoading = false
+      this.loadingText = ''
     },
   },
 }

src/components/Device/index.vue

@@ -379,6 +379,7 @@ export default {
             $loading: false,
             $recordLoading: false,
             $stopLoading: false,
+            $gnirehtetLoading: false,
           })) || []
 
         console.log('getDeviceData.data', this.deviceList)

src/locales/languages/en_US.json

@@ -106,6 +106,8 @@
   "device.control.gnirehtet.start.success": "Gnirehtet reverse tethering feature started successfully",
   "device.control.gnirehtet.stop": "Stop Service",
   "device.control.gnirehtet.stop.success": "Service stopped successfully",
+  "device.control.gnirehtet.running": "Service Running",
+  "device.control.gnirehtet.stopping": "Service Stopping",
   "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",

src/locales/languages/zh_CN.json

@@ -104,6 +104,8 @@
   "device.control.gnirehtet.start.success": "Gnirehtet 反向网络共享功能启动成功",
   "device.control.gnirehtet.stop": "停止服务",
   "device.control.gnirehtet.stop.success": "停止服务成功",
+  "device.control.gnirehtet.running": "服务运行中",
+  "device.control.gnirehtet.stopping": "服务停止中",
   "device.control.mirror-group.name": "多屏协同",
   "device.control.mirror-group.tips": "开启后，可以同时镜像多个模拟辅助显示设备，并通过操作各个镜像窗口实现多屏协同功能。请注意，此功能需要手机 ROM 支持，并且必须开启强制使用桌面模式选项。",
   "device.control.mirror-group.open": "开启 {num} 个窗口",