perf: 🎉 初步支持设置偏好设置的作用域范围

viarotel-org · Oct 19, 2023 · 5dd328c · 5dd328c
1 parent 5d352b7
commit 5dd328c
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 32 deletions.
diff --git a/src/components/Device/index.vue b/src/components/Device/index.vue
@@ -192,9 +192,6 @@ export default {
     scrcpyConfig() {
       return this.$store.scrcpy.config
     },
-    stringScrcpyConfig() {
-      return this.$store.scrcpy.stringConfig
-    },
   },
   async created() {
     this.getDeviceData()
@@ -220,6 +217,9 @@ export default {
     }
   },
   methods: {
+    scrcpyArgs(...args) {
+      return this.$store.scrcpy.getStringConfig(...args)
+    },
     onStdout() {},
     toggleRowExpansion(...params) {
       this.$refs.elTable.toggleRowExpansion(...params)
@@ -243,9 +243,9 @@ export default {
       try {
         const command = `--serial=${row.id} --window-title=${
           row.$remark ? `${row.$remark}-` : ''
-        }${row.name}-${row.id}-🎥录制中... --record=${savePath} ${
-          this.stringScrcpyConfig
-        }`
+        }${row.name}-${
+          row.id
+        }-🎥录制中... --record=${savePath} ${this.scrcpyArgs()}`
 
         console.log('handleRecord.command', command)
 
@@ -279,7 +279,7 @@ export default {
         await this.$scrcpy.shell(
           `--serial=${row.id} --window-title=${
             row.$remark ? `${row.$remark}-` : ''
-          }${row.name}-${row.id} ${this.stringScrcpyConfig}`,
+          }${row.name}-${row.id} ${this.scrcpyArgs()}`,
           { stdout: this.onStdout },
         )
       }
@@ -371,7 +371,7 @@ export default {
 
     async getDeviceData() {
       this.loading = true
-      await sleep()
+      await sleep(500)
       try {
         const data = await this.$adb.getDevices()
         this.deviceList
@@ -387,6 +387,8 @@ export default {
             $remark: this.$store.device.getRemark(item.id),
           })) || []
 
+        this.$store.device.setList(this.deviceList)
+
         console.log('getDeviceData.data', this.deviceList)
       }
       catch (error) {

diff --git a/src/components/Preference/index.vue b/src/components/Preference/index.vue
@@ -1,6 +1,31 @@
 <template>
   <div class="">
-    <div class="pb-4 pr-2 flex items-center">
+    <div class="pb-4 pr-2 flex items-center justify-between">
+      <div label="作用域范围">
+        <el-select
+          v-model="scopeValue"
+          value-key=""
+          title="该选项用于设置偏好设置的作用域范围"
+          placeholder="偏好设置的作用域范围"
+          filterable
+          no-data-text="暂无数据"
+          class="!w-90"
+          @change="onScopeChange"
+        >
+          <template #prefix>
+            <el-icon class="text-primary-300 hover:text-primary-500">
+              <QuestionFilled />
+            </el-icon>
+          </template>
+          <el-option
+            v-for="item in scopeList"
+            :key="item.id"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
       <div class="">
         <el-button type="" plain @click="handleImport">
           导入配置
@@ -180,8 +205,29 @@ export default {
         },
       ],
       scrcpyForm: { ...scrcpyStore.config },
+
+      scopeValue: scrcpyStore.scope,
     }
   },
+  computed: {
+    scopeList() {
+      const value = this.$store.device.list.map(item => ({
+        ...item,
+        label: `${item.id}（${item.name}${
+          item.$remark ? `，${item.$remark}` : ''
+        }）`,
+
+        value: this.$store.device.removeDots(item.id),
+      }))
+
+      value.unshift({
+        label: '全局范围',
+        value: 'global',
+      })
+
+      return value
+    },
+  },
   watch: {
     scrcpyForm: {
       handler() {
@@ -197,6 +243,10 @@ export default {
     })
   },
   methods: {
+    onScopeChange(value) {
+      this.$store.scrcpy.setScope(value)
+      this.scrcpyForm = this.$store.scrcpy.config
+    },
     async handleImport() {
       try {
         await this.$electron.ipcRenderer.invoke('show-open-dialog', {

diff --git a/src/store/device/index.js b/src/store/device/index.js
@@ -2,35 +2,39 @@ import { defineStore } from 'pinia'
 
 const $appStore = window.appStore
 
-const removeDot = value => value.replaceAll('.', '_')
+const removeDots = value => value.replaceAll('.', '_')
 
 export const useDeviceStore = defineStore({
   id: 'app-device',
   state() {
     return {
+      list: [],
       config: {},
     }
   },
   getters: {},
   actions: {
-    removeDot,
+    removeDots,
     init() {
       this.config = {
         ...($appStore.get('device') || {}),
       }
 
       return this.config
     },
+    setList(data) {
+      this.list = data
+    },
     setConfig(value, key = 'device') {
       $appStore.set(key, value)
       this.init()
     },
     setRemark(deviceId, value) {
-      $appStore.set(`device.${removeDot(deviceId)}.remark`, value)
+      $appStore.set(`device.${removeDots(deviceId)}.remark`, value)
       this.init()
     },
     getRemark(deviceId) {
-      const value = $appStore.get(`device.${removeDot(deviceId)}.remark`)
+      const value = $appStore.get(`device.${removeDots(deviceId)}.remark`)
       return value
     },
   },

diff --git a/src/store/scrcpy/index.js b/src/store/scrcpy/index.js
@@ -32,19 +32,36 @@ export const useScrcpyStore = defineStore({
   id: 'app-scrcpy',
   state() {
     return {
+      scope: $appStore.get('scrcpy.scope') || 'global',
       model: scrcpyModel,
       defaultConfig: getDefaultConfig(),
       config: {},
       excludeKeys: ['--record-format', 'savePath', 'adbPath', 'scrcpyPath'],
     }
   },
-  getters: {
-    stringConfig() {
-      if (!this.config) {
+  actions: {
+    getDefaultConfig,
+    init(scope = this.scope) {
+      this.config = {
+        ...this.defaultConfig,
+        ...($appStore.get(`scrcpy.${scope}`) || {}),
+      }
+
+      return this.config
+    },
+    setScope(value) {
+      this.scope = value
+      $appStore.set('scrcpy.scope', value)
+      this.init()
+    },
+    getStringConfig(scope = this.scope) {
+      const scopeConfig = $appStore.get(`scrcpy.${scope}`)
+
+      if (!scopeConfig) {
         return ''
       }
 
-      const value = Object.entries(this.config)
+      const value = Object.entries(scopeConfig)
         .reduce((arr, [key, value]) => {
           if (!value) {
             return arr
@@ -68,25 +85,17 @@ export const useScrcpyStore = defineStore({
 
       return value
     },
-  },
-  actions: {
-    getDefaultConfig,
-    init() {
-      this.config = {
-        ...this.defaultConfig,
-        ...($appStore.get('scrcpy') || {}),
-      }
-
-      return this.config
-    },
-    setConfig(data) {
+    setConfig(data, scope = this.scope) {
       const pickConfig = pickBy(data, value => !!value)
-
       // console.log('pickConfig', pickConfig)
 
-      $appStore.set('scrcpy', pickConfig)
+      $appStore.set(`scrcpy.${scope}`, pickConfig)
 
-      this.init()
+      this.init(scope)
+    },
+    getConfig(scope = this.scope) {
+      const value = $appStore.get(`scrcpy.${scope}`)
+      return value
     },
     getModel(key, params) {
       const handler = scrcpyModel[key]