fix: 🐛 Recording prompt and file format errors

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

@@ -48,7 +48,7 @@ export default {
 
       const messageEl = this.$message({
         message: this.$t('device.control.install.progress', {
-          deviceName: device.$name,
+          deviceName: this.$store.device.getLabel(device),
         }),
         icon: LoadingIcon,
         duration: 0,
@@ -73,7 +73,7 @@ export default {
         if (totalCount > 1) {
           this.$message.success(
             this.$t('device.control.install.success', {
-              deviceName: device.$name,
+              deviceName: this.$store.device.getLabel(device),
               totalCount,
               successCount,
               failCount,
@@ -83,7 +83,7 @@ export default {
         else {
           this.$message.success(
             this.$t('device.control.install.success.single', {
-              deviceName: device.$name,
+              deviceName: this.$store.device.getLabel(device),
             }),
           )
         }

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

@@ -6,7 +6,9 @@
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item @click="handlePush">
-          {{ $t("device.control.file.push") }}
+          <span class="" title="/sdcard/Download/">
+            {{ $t("device.control.file.push") }}
+          </span>
         </el-dropdown-item>
       </el-dropdown-menu>
     </template>
@@ -73,7 +75,7 @@ export default {
         if (totalCount > 1) {
           this.$message.success(
             this.$t('device.control.file.push.success', {
-              deviceName: this.device.$name,
+              deviceName: this.$store.device.getLabel(this.device),
               totalCount,
               successCount,
               failCount,
@@ -83,7 +85,7 @@ export default {
         else {
           this.$message.success(
             this.$t('device.control.file.push.success.single', {
-              deviceName: this.device.$name,
+              deviceName: this.$store.device.getLabel(this.device),
             }),
           )
         }

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

@@ -25,7 +25,14 @@ export default {
     },
   },
   data() {
-    return {
+    return {}
+  },
+  created() {
+    if (!Object.hasOwnProperty.call(this.device, '$gnirehtetLoading')) {
+      Object.assign(this.device, {
+        $gnirehtetLoading: false,
+        $gnirehtetLoadingText: '',
+      })
     }
   },
   methods: {
@@ -33,7 +40,9 @@ export default {
       return this.$store.preference.getData(...args)
     },
     async handleStart() {
-      this.device.$gnirehtetLoadingText = this.$t('device.control.gnirehtet.running')
+      this.device.$gnirehtetLoadingText = this.$t(
+        'device.control.gnirehtet.running',
+      )
       this.device.$gnirehtetLoading = true
 
       try {
@@ -50,7 +59,9 @@ export default {
       }
     },
     async handleStop() {
-      this.device.$gnirehtetLoadingText = this.$t('device.control.gnirehtet.stopping')
+      this.device.$gnirehtetLoadingText = this.$t(
+        'device.control.gnirehtet.stopping',
+      )
 
       try {
         await this.$gnirehtet.stop(this.device.id)

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

@@ -42,9 +42,9 @@ export default {
         const res = await this.$scrcpy.mirrorGroup(this.device.id, {
           open,
           title: ({ displayId }) =>
-            `${this.device.$remark ? `${this.device.$remark}-` : ''}${
-              this.device.$name
-            }-${this.device.id}-display-${displayId}`,
+            `${this.$store.device.getLabel(
+              this.device,
+            )}-displayId-${displayId}`,
           args: this.scrcpyArgs(this.device.id),
         })
 

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

@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import dayjs from 'dayjs'
 import LoadingIcon from '@/components/Device/components/LoadingIcon/index.vue'
 
 export default {
@@ -25,17 +24,16 @@ export default {
     async handleScreenCap(device) {
       const messageEl = this.$message({
         message: this.$t('device.control.capture.progress', {
-          deviceName: device.$name,
+          deviceName: this.$store.device.getLabel(device),
         }),
         icon: LoadingIcon,
         duration: 0,
       })
 
-      const fileName = `${device.$remark ? `${device.$remark}-` : ''}${
-        device.$name
-      }-${this.$replaceIP(device.id)}-screencap-${dayjs().format(
-        'YYYY-MM-DD-HH-mm-ss',
-      )}.png`
+      const fileName = this.$store.device.getLabel(
+        device,
+        ({ time }) => `screenshot-${time}.png`,
+      )
 
       const deviceConfig = this.preferenceData(device.id)
       const savePath = this.$path.resolve(deviceConfig.savePath, fileName)

src/components/Device/index.vue

@@ -154,7 +154,6 @@
 </template>
 
 <script>
-import dayjs from 'dayjs'
 import ControlBar from './components/ControlBar/index.vue'
 import Remark from './components/Remark/index.vue'
 import Wireless from './components/Wireless/index.vue'
@@ -242,14 +241,14 @@ export default {
       this.$refs.elTable.toggleRowExpansion(...params)
     },
     getRecordPath(row) {
-      const rowConfig = this.preferenceData(row.id)
-      const basePath = rowConfig.savePath
+      const config = this.preferenceData(row.id)
+      const basePath = config.savePath
+      const ext = config['--record-format'] || 'mp4'
 
-      const fileName = `${row.$remark ? `${row.$remark}-` : ''}${
-        row.$name
-      }-${this.$replaceIP(row.id)}-recording-${dayjs().format(
-        'YYYY-MM-DD-HH-mm-ss',
-      )}`
+      const fileName = this.$store.device.getLabel(
+        row,
+        ({ time }) => `record-${time}.${ext}`,
+      )
 
       const joinValue = this.$path.join(basePath, fileName)
       const value = this.$path.normalize(joinValue)
@@ -265,14 +264,21 @@ export default {
 
       try {
         await this.$scrcpy.record(row.id, {
-          title: `${row.$remark ? `${row.$remark}-` : ''}${row.$name}-${
-            row.id
-          }-🎥${this.$t('device.record.progress')}...`,
+          title: this.$store.device.getLabel(row, 'recording'),
           savePath,
           args: this.scrcpyArgs(row.id, { isRecord: true }),
           stdout: this.onStdout,
         })
+      }
+      catch (error) {
+        console.warn(error)
+        if (error.message) {
+          this.$message.warning(error.message)
+        }
+        this.handleReset()
+      }
 
+      try {
         await this.$confirm(
           this.$t('device.record.success.message'),
           this.$t('device.record.success.title'),
@@ -290,11 +296,9 @@ export default {
         )
       }
       catch (error) {
-        if (error.message) {
-          this.$message.warning(error.message)
-        }
-        this.handleReset()
+        console.warn(error)
       }
+
       row.$recordLoading = false
     },
     async handleMirror(row) {
@@ -304,17 +308,17 @@ export default {
 
       try {
         await this.$scrcpy.mirror(row.id, {
-          title: `${row.$remark ? `${row.$remark}-` : ''}${row.$name}-${
-            row.id
-          }`,
+          title: this.$store.device.getLabel(row),
           args: this.scrcpyArgs(row.id),
           stdout: this.onStdout,
         })
       }
       catch (error) {
+        console.warn(error)
         if (error.message) {
           this.$message.warning(error.message)
         }
+
         this.handleReset()
       }
       row.$loading = false
@@ -379,8 +383,6 @@ export default {
             $loading: false,
             $recordLoading: false,
             $stopLoading: false,
-            $gnirehtetLoading: false,
-            $gnirehtetLoadingText: '',
           })) || []
 
         console.log('getDeviceData.data', this.deviceList)

src/store/device/index.js

@@ -1,5 +1,7 @@
 import { defineStore } from 'pinia'
+import dayjs from 'dayjs'
 
+import { t } from '@/locales/index.js'
 import { isIPWithPort, replaceIP } from '@/utils/index.js'
 
 const $appStore = window.appStore
@@ -25,6 +27,33 @@ export const useDeviceStore = defineStore({
     setList(data) {
       this.list = data
     },
+    getLabel(device, param) {
+      if (!device) {
+        return ''
+      }
+
+      const data = device?.id
+        ? device
+        : this.list.find(item => item.id === device)
+
+      const labels = [data.$remark, data.$name, replaceIP(data.id)]
+
+      const model = {
+        recording: `🎥${t('device.record.progress')}...`,
+        time: dayjs().format('YYYY_MM_DD_HH_mm_ss'),
+      }
+
+      if (typeof param === 'function') {
+        labels.push(param(model))
+      }
+      else if (param && typeof param === 'string') {
+        labels.push(model[param])
+      }
+
+      const value = labels.filter(item => !!item).join('-')
+
+      return value
+    },
     async getList() {
       const res = await window.adbkit.getDevices()