perf: ♻️ Optimize equipment operation

src/components/Device/components/StartDropdown/components/Camera/index.vue

@@ -0,0 +1,76 @@
+<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>
+</template>
+
+<script>
+export default {
+  props: {
+    deviceInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    toggleRowExpansion: {
+      type: Function,
+      default: () => () => false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+    }
+  },
+  methods: {
+    async handleClick() {
+      const row = this.deviceInfo
+
+      this.loading = true
+
+      this.toggleRowExpansion(row, true)
+
+      const args = `--video-source=camera ${this.$store.preference.getScrcpyArgs(
+        row.id,
+        {
+          excludes: ['--video-source', '--mouse', '--keyboard'],
+          isCamera: true,
+        },
+      )}`
+
+      try {
+        await this.$scrcpy.mirror(row.id, {
+          title: this.$store.device.getLabel(row),
+          args,
+          stdout: this.onStdout,
+          stderr: this.onStderr,
+        })
+      }
+      catch (error) {
+        console.warn(error)
+
+        if (error.message) {
+          this.$message.warning(error.message)
+        }
+
+        this.handleReset()
+      }
+
+      this.loading = false
+    },
+    onStdout() {},
+    onStderr() {
+      this.loading = false
+    },
+  },
+}
+</script>
+
+<style></style>

src/components/Device/components/StartDropdown/components/Default/index.vue

@@ -0,0 +1,70 @@
+<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>
+</template>
+
+<script>
+export default {
+  props: {
+    deviceInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    toggleRowExpansion: {
+      type: Function,
+      default: () => () => false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+    }
+  },
+  methods: {
+    async handleClick() {
+      const row = this.deviceInfo
+
+      this.loading = true
+
+      this.toggleRowExpansion(row, true)
+
+      const args = this.$store.preference.getScrcpyArgs(row.id, {
+        excludes: ['--otg', '--mouse=aoa', '--keyboard=aoa'],
+      })
+
+      try {
+        await this.$scrcpy.mirror(row.id, {
+          title: this.$store.device.getLabel(row),
+          args,
+          stdout: this.onStdout,
+          stderr: this.onStderr,
+        })
+      }
+      catch (error) {
+        console.warn(error)
+        if (error.message) {
+          this.$message.warning(error.message)
+        }
+
+        this.handleReset()
+      }
+      this.loading = false
+    },
+    onStdout() {},
+    onStderr() {
+      this.loading = false
+    },
+  },
+}
+</script>
+
+<style></style>

src/components/Device/components/StartDropdown/components/Otg/index.vue

@@ -0,0 +1,73 @@
+<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>
+</template>
+
+<script>
+export default {
+  props: {
+    deviceInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    toggleRowExpansion: {
+      type: Function,
+      default: () => () => false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+    }
+  },
+  methods: {
+    async handleClick() {
+      const row = this.deviceInfo
+
+      this.loading = true
+
+      this.toggleRowExpansion(row, true)
+
+      const args = `--otg ${this.$store.preference.getScrcpyArgs(row.id, {
+        excludes: ['--mouse=uhid', '--keyboard=uhid'],
+        isOtg: true,
+      })}`
+
+      try {
+        await this.$scrcpy.mirror(row.id, {
+          title: this.$store.device.getLabel(row),
+          args,
+          stdout: this.onStdout,
+          stderr: this.onStderr,
+        })
+      }
+      catch (error) {
+        console.warn(error)
+
+        if (error.message) {
+          this.$message.warning(error.message)
+        }
+
+        this.handleReset()
+      }
+
+      this.loading = false
+    },
+    onStdout() {},
+    onStderr() {
+      this.loading = false
+    },
+  },
+}
+</script>
+
+<style></style>

src/components/Device/components/StartDropdown/components/Record/index.vue

@@ -0,0 +1,109 @@
+<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>
+</template>
+
+<script>
+export default {
+  props: {
+    deviceInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    toggleRowExpansion: {
+      type: Function,
+      default: () => () => false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+    }
+  },
+  methods: {
+    async handleClick() {
+      const row = this.deviceInfo
+
+      this.loading = true
+
+      this.toggleRowExpansion(row, true)
+
+      const savePath = this.getRecordPath(row)
+
+      const args = this.$store.preference.getScrcpyArgs(row.id, {
+        isRecord: true,
+        excludes: ['--otg', '--mouse=aoa', '--keyboard=aoa'],
+      })
+
+      try {
+        await this.$scrcpy.record(row.id, {
+          title: this.$store.device.getLabel(row, 'recording'),
+          savePath,
+          args,
+          stdout: this.onStdout,
+          stderr: this.onStderr,
+        })
+        this.onRecordSuccess(savePath)
+      }
+      catch (error) {
+        console.warn(error)
+
+        if (error.message) {
+          this.$message.warning(error.message)
+        }
+      }
+
+      this.loading = false
+    },
+    onStdout() {},
+    onStderr() {
+      this.loading = false
+    },
+    getRecordPath(row) {
+      const config = this.$store.preference.getData(row.id)
+      const basePath = config.savePath
+      const extension = config['--record-format'] || 'mp4'
+
+      const fileName = this.$store.device.getLabel(
+        row,
+        ({ time }) => `record-${time}.${extension}`,
+      )
+
+      const joinValue = this.$path.join(basePath, fileName)
+      const value = this.$path.normalize(joinValue)
+
+      return value
+    },
+    async onRecordSuccess(savePath) {
+      try {
+        await this.$confirm(
+          this.$t('device.record.success.message'),
+          this.$t('device.record.success.title'),
+          {
+            confirmButtonText: this.$t('common.confirm'),
+            cancelButtonText: this.$t('common.cancel'),
+            closeOnClickModal: false,
+            type: 'success',
+          },
+        )
+
+        await this.$electron.ipcRenderer.invoke('show-item-in-folder', savePath)
+      }
+      catch (error) {
+        console.warn(error)
+      }
+    },
+  },
+}
+</script>
+
+<style></style>