perf: ⚡️ Optimize the stability of options that need to dynamically obtain parameters in preference settings

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "1.25.4",
   "private": true,
-  "packageManager": "pnpm@9.4.0+sha1.9217c800d4ab947a7aee520242a7b70d64fc7638",
+  "packageManager": "pnpm@9.12.3",
   "description": "Scrcpy Powered by Electron",
   "author": "viarotel",
   "homepage": "https://github.com/viarotel-org/escrcpy",

src/components/Device/components/MoreDropdown/components/Custom/components/DeployDialog/index.vue

@@ -15,6 +15,7 @@
         v-bind="{
           collapseProps: { accordion: true },
           excludes: ['common'],
+          deviceScope: device.id,
         }"
       />
     </div>

src/components/Preference/components/PreferenceForm/components/SelectAudioCodec/index.vue

@@ -3,6 +3,7 @@
     v-bind="{ clearable: true, ...(data.props || {}) }"
     v-model="selectValue"
     class="!w-full"
+    @click="getDeviceOptions"
   >
     <el-option
       v-for="(item, index) in options"
@@ -15,6 +16,8 @@
 </template>
 
 <script>
+import { getDeviceId } from '../helper.js'
+
 export default {
   props: {
     modelValue: {
@@ -56,21 +59,16 @@ export default {
       },
     },
   },
-  watch: {
-    deviceScope: {
-      handler(value) {
-        if (value === 'global') {
-          this.deviceOptions = []
-          return
-        }
-
-        this.getDeviceOptions()
-      },
-    },
-  },
   methods: {
     async getDeviceOptions() {
-      const res = await this.$scrcpy.getEncoders(this.deviceScope)
+      const deviceId = getDeviceId(this.deviceScope)
+
+      if (!deviceId) {
+        this.deviceOptions = []
+        return false
+      }
+
+      const res = await this.$scrcpy.getEncoders(deviceId)
 
       this.deviceOptions = res?.audio?.map((item) => {
         const value = `${item.decoder} & ${item.encoder}`

src/components/Preference/components/PreferenceForm/components/SelectDisplay/index.vue

@@ -6,6 +6,7 @@
     }"
     v-model="selectValue"
     class="!w-full"
+    @click="getDeviceOptions"
   >
     <el-option
       v-for="(item, index) in options"
@@ -18,6 +19,8 @@
 </template>
 
 <script>
+import { getDeviceId } from '../helper.js'
+
 export default {
   props: {
     modelValue: {
@@ -56,21 +59,16 @@ export default {
       },
     },
   },
-  watch: {
-    deviceScope: {
-      handler(value) {
-        if (value === 'global') {
-          this.deviceOptions = []
-          return
-        }
-
-        this.getDeviceOptions()
-      },
-    },
-  },
   methods: {
     async getDeviceOptions() {
-      const res = await this.$adb.display(this.deviceScope)
+      const deviceId = getDeviceId(this.deviceScope)
+
+      if (!deviceId) {
+        this.deviceOptions = []
+        return false
+      }
+
+      const res = await this.$adb.display(deviceId)
 
       this.deviceOptions
         = res?.map((item) => {

src/components/Preference/components/PreferenceForm/components/SelectVideoCodec/index.vue

@@ -3,6 +3,7 @@
     v-bind="{ clearable: true, ...(data.props || {}) }"
     v-model="selectValue"
     class="!w-full"
+    @click="getDeviceOptions"
   >
     <el-option
       v-for="(item, index) in options"
@@ -15,6 +16,8 @@
 </template>
 
 <script>
+import { getDeviceId } from '../helper.js'
+
 export default {
   props: {
     modelValue: {
@@ -56,21 +59,16 @@ export default {
       },
     },
   },
-  watch: {
-    deviceScope: {
-      handler(value) {
-        if (value === 'global') {
-          this.deviceOptions = []
-          return
-        }
-
-        this.getDeviceOptions()
-      },
-    },
-  },
   methods: {
     async getDeviceOptions() {
-      const res = await this.$scrcpy.getEncoders(this.deviceScope)
+      const deviceId = getDeviceId(this.deviceScope)
+
+      if (!deviceId) {
+        this.deviceOptions = []
+        return false
+      }
+
+      const res = await this.$scrcpy.getEncoders(deviceId)
 
       this.deviceOptions = res?.video?.map((item) => {
         const value = `${item.decoder} & ${item.encoder}`

src/components/Preference/components/PreferenceForm/components/helper.js

@@ -0,0 +1,16 @@
+import { useDeviceStore } from '$/store/device/index.js'
+
+/**
+ * 获取设备ID
+ * @param {*} scope
+ * @returns
+ */
+export function getDeviceId(scope) {
+  let value = scope
+
+  if (value === 'global') {
+    value = useDeviceStore().list[0]?.id
+  }
+
+  return value
+}

src/store/preference/model/video/index.js

@@ -122,8 +122,6 @@ export default {
       placeholder: 'preferences.video.display.placeholder',
       options: [
         { label: '0', value: '0' },
-        { label: '1', value: '1' },
-        { label: '2', value: '2' },
       ],
       props: {
         filterable: true,