perf: ♻️ Interactive logic optimization

viarotel-org · Mar 5, 2024 · 193f80a · 193f80a
1 parent 389ac33
commit 193f80a
Show file tree

Hide file tree

Showing 18 changed files with 241 additions and 707 deletions.
diff --git a/README-CN.md b/README-CN.md
@@ -71,7 +71,16 @@ Windows 及 Linux 端内部集成了 Gnirehtet， 用于提供 PC 到安卓设
 
 请参阅 [scrcpy/doc/shortcuts](https://github.com/Genymobile/scrcpy/blob/master/doc/shortcuts.md)
 
-## 设备交互栏
+## 设备操作
+
+### 控制模式
+
+- 镜像
+- 录制
+- OTG
+- 摄像
+
+### 设备交互栏
 
 - 切换键
 - 主屏幕
@@ -160,12 +169,6 @@ Windows 及 Linux 端内部集成了 Gnirehtet， 用于提供 PC 到安卓设
 - 键盘模式
 - 键盘注入方式
 
-### OTG
-
-- 启用 OTG
-- 仅键盘
-- 仅鼠标
-
 ### 摄像控制
 
 - 启用摄像

diff --git a/README.md b/README.md
@@ -69,7 +69,16 @@ Gnirehtet is built into the Windows and Linux apps to provide reverse tethering
 
 Refer to [scrcpy/doc/shortcuts](https://github.com/Genymobile/scrcpy/blob/master/doc/shortcuts.md)
 
-## Device Interaction Bar
+## Device Operation
+
+### Control Model
+
+- Mirror
+- Recording
+- OTG
+- Camera
+
+### Device Interaction Bar
 
 - Switch
 - Home
@@ -158,12 +167,6 @@ Refer to [scrcpy/doc/shortcuts](https://github.com/Genymobile/scrcpy/blob/master
 - Keyboard mode
 - Keyboard injection method
 
-### OTG
-
-- Enable OTG
-- Keyboard only
-- Mouse only
-
 ### Camera Control
 
 - Enable camera

diff --git a/src/App.vue b/src/App.vue
@@ -117,4 +117,10 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="postcss" scoped>
+:deep() {
+  .el-tabs__header {
+    @apply !mb-3;
+  }
+}
+</style>
diff --git a/...tartDropdown/components/Default/index.vue → .../Device/components/MirrorAction/index.vue b/...tartDropdown/components/Default/index.vue → .../Device/components/MirrorAction/index.vue
@@ -1,21 +1,22 @@
 <template>
-  <el-dropdown-item class="" :disabled="loading" @click="handleClick">
-    <template v-if="loading">
-      <el-icon class="is-loading">
-        <Loading />
-      </el-icon>
-      运行中
-    </template>
-    <template v-else>
-      默认模式
-    </template>
-  </el-dropdown-item>
+  <el-button
+    type="primary"
+    text
+    :disabled="row.$unauthorized"
+    :loading="loading"
+    :icon="loading ? '' : 'Monitor'"
+    @click="handleClick(row)"
+  >
+    {{ loading ? $t('common.progress') : $t('device.mirror.start') }}
+  </el-button>
 </template>
 
 <script>
+import { sleep } from '@/utils'
+
 export default {
   props: {
-    deviceInfo: {
+    row: {
       type: Object,
       default: () => ({}),
     },
@@ -30,9 +31,7 @@ export default {
     }
   },
   methods: {
-    async handleClick() {
-      const row = this.deviceInfo
-
+    async handleClick(row) {
       this.loading = true
 
       this.toggleRowExpansion(row, true)
@@ -42,12 +41,18 @@ export default {
       })
 
       try {
-        await this.$scrcpy.mirror(row.id, {
+        const mirroring = this.$scrcpy.mirror(row.id, {
           title: this.$store.device.getLabel(row),
           args,
           stdout: this.onStdout,
           stderr: this.onStderr,
         })
+
+        await sleep(1 * 1000)
+
+        this.loading = false
+
+        await mirroring
       }
       catch (error) {
         console.warn(error)
@@ -57,7 +62,6 @@ export default {
 
         this.handleReset()
       }
-      this.loading = false
     },
     onStdout() {},
     onStderr() {

diff --git a/...StartDropdown/components/Camera/index.vue → .../MoreDropdown/components/Camera/index.vue b/...StartDropdown/components/Camera/index.vue → .../MoreDropdown/components/Camera/index.vue
@@ -1,21 +1,13 @@
 <template>
-  <el-dropdown-item class="" :disabled="loading" @click="handleClick">
-    <template v-if="loading">
-      <el-icon class="is-loading">
-        <Loading />
-      </el-icon>
-      摄像中
-    </template>
-    <template v-else>
-      摄像模式
-    </template>
-  </el-dropdown-item>
+  <slot :loading="loading" :trigger="handleClick" />
 </template>
 
 <script>
+import { sleep } from '@/utils'
+
 export default {
   props: {
-    deviceInfo: {
+    row: {
       type: Object,
       default: () => ({}),
     },
@@ -31,7 +23,7 @@ export default {
   },
   methods: {
     async handleClick() {
-      const row = this.deviceInfo
+      const row = this.row
 
       this.loading = true
 
@@ -46,12 +38,18 @@ export default {
       )}`
 
       try {
-        await this.$scrcpy.mirror(row.id, {
+        const mirroring = this.$scrcpy.mirror(row.id, {
           title: this.$store.device.getLabel(row),
           args,
           stdout: this.onStdout,
           stderr: this.onStderr,
         })
+
+        await sleep(1 * 1000)
+
+        this.loading = false
+
+        await mirroring
       }
       catch (error) {
         console.warn(error)
@@ -62,8 +60,6 @@ export default {
 
         this.handleReset()
       }
-
-      this.loading = false
     },
     onStdout() {},
     onStderr() {

diff --git a/...ts/StartDropdown/components/Otg/index.vue → ...nts/MoreDropdown/components/Otg/index.vue b/...ts/StartDropdown/components/Otg/index.vue → ...nts/MoreDropdown/components/Otg/index.vue
@@ -1,21 +1,13 @@
 <template>
-  <el-dropdown-item class="" :disabled="loading" @click="handleClick">
-    <template v-if="loading">
-      <el-icon class="is-loading">
-        <Loading />
-      </el-icon>
-      控制中
-    </template>
-    <template v-else>
-      OTG模式
-    </template>
-  </el-dropdown-item>
+  <slot :loading="loading" :trigger="handleClick" />
 </template>
 
 <script>
+import { sleep } from '@/utils'
+
 export default {
   props: {
-    deviceInfo: {
+    row: {
       type: Object,
       default: () => ({}),
     },
@@ -31,7 +23,7 @@ export default {
   },
   methods: {
     async handleClick() {
-      const row = this.deviceInfo
+      const row = this.row
 
       this.loading = true
 
@@ -43,12 +35,18 @@ export default {
       })}`
 
       try {
-        await this.$scrcpy.mirror(row.id, {
+        const mirroring = this.$scrcpy.mirror(row.id, {
           title: this.$store.device.getLabel(row),
           args,
           stdout: this.onStdout,
           stderr: this.onStderr,
         })
+
+        await sleep(1 * 1000)
+
+        this.loading = false
+
+        await mirroring
       }
       catch (error) {
         console.warn(error)
@@ -59,8 +57,6 @@ export default {
 
         this.handleReset()
       }
-
-      this.loading = false
     },
     onStdout() {},
     onStderr() {

diff --git a/...StartDropdown/components/Record/index.vue → .../MoreDropdown/components/Record/index.vue b/...StartDropdown/components/Record/index.vue → .../MoreDropdown/components/Record/index.vue
@@ -1,21 +1,13 @@
 <template>
-  <el-dropdown-item class="" :disabled="loading" @click="handleClick">
-    <template v-if="loading">
-      <el-icon class="is-loading">
-        <Loading />
-      </el-icon>
-      录制中
-    </template>
-    <template v-else>
-      录制模式
-    </template>
-  </el-dropdown-item>
+  <slot :loading="loading" :trigger="handleClick" />
 </template>
 
 <script>
+import { sleep } from '@/utils'
+
 export default {
   props: {
-    deviceInfo: {
+    row: {
       type: Object,
       default: () => ({}),
     },
@@ -31,7 +23,7 @@ export default {
   },
   methods: {
     async handleClick() {
-      const row = this.deviceInfo
+      const row = this.row
 
       this.loading = true
 
@@ -45,13 +37,20 @@ export default {
       })
 
       try {
-        await this.$scrcpy.record(row.id, {
+        const recording = this.$scrcpy.record(row.id, {
           title: this.$store.device.getLabel(row, 'recording'),
           savePath,
           args,
           stdout: this.onStdout,
           stderr: this.onStderr,
         })
+
+        await sleep(1 * 1000)
+
+        this.loading = false
+
+        await recording
+
         this.onRecordSuccess(savePath)
       }
       catch (error) {
@@ -61,8 +60,6 @@ export default {
           this.$message.warning(error.message)
         }
       }
-
-      this.loading = false
     },
     onStdout() {},
     onStderr() {