Merge branch 'dev'

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

@@ -1,12 +1,11 @@
 <template>
-  <TemplatePromise v-slot="{ resolve, reject }">
   <el-dialog
     v-model="visible"
     :title="$t('device.actions.more.custom.name')"
     class="!w-[98%] el-dialog-flex el-dialog-beautify"
     append-to-body
     destroy-on-close
-      @close="close(reject)"
+    @closed="onClosed"
   >
     <div class="h-full overflow-auto -mx-2 pr-2">
       <PreferenceForm
@@ -21,31 +20,31 @@
     </div>
 
     <template #footer>
-        <el-button @click="close(reject)">
+      <el-button @click="close">
         {{ $t('common.cancel') }}
       </el-button>
-        <el-button type="primary" @click="submit(resolve)">
+      <el-button type="primary" :loading @click="submit">
         {{ $t('common.confirm') }}
       </el-button>
     </template>
   </el-dialog>
-  </TemplatePromise>
 </template>
 
 <script setup>
-import { createTemplatePromise } from '@vueuse/core'
-
-import { nextTick } from 'vue'
 import { usePreferenceStore } from '$/store/index.js'
 
 import PreferenceForm from '$/components/Preference/components/PreferenceForm/index.vue'
 
-const TemplatePromise = createTemplatePromise()
+import { sleep } from '$/utils'
+
+const emit = defineEmits(['success'])
 
 const preferenceStore = usePreferenceStore()
 
 const visible = ref(false)
 
+const loading = ref(false)
+
 const preferenceFormRef = ref(null)
 
 const preferenceData = ref({
@@ -56,29 +55,32 @@ const collapseValue = ref([])
 
 const device = ref(null)
 
-async function open(row) {
-  device.value = row
+async function open(args = {}) {
+  device.value = args.row
+
   visible.value = true
-
-  return TemplatePromise.start()
 }
 
-async function submit(resolve) {
-  const data = await preferenceFormRef.value.generateCommand()
-
+async function close() {
   visible.value = false
-
-  resolve(data)
 }
 
-async function close(reject) {
+async function submit() {
+  loading.value = true
+
+  const command = await preferenceFormRef.value.generateCommand()
+
+  emit('success', command)
+
+  await sleep()
+
+  loading.value = false
+
   visible.value = false
+}
 
-  await nextTick()
-
+function onClosed() {
   preferenceData.value = { ...getDefaultData() }
-
-  reject(new Error('User cancel operation'))
 }
 
 function getDefaultData() {

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

@@ -1,7 +1,7 @@
 <template>
   <slot :loading="loading" :trigger="handleClick" />
 
-  <DeployDialog ref="deployDialogRef" />
+  <DeployDialog ref="deployDialogRef" @success="handleScrcpy" />
 </template>
 
 <script>
@@ -31,19 +31,13 @@ export default {
     async handleClick() {
       const row = this.row
 
+      this.$refs.deployDialogRef.open({ row })
+    },
+    async handleScrcpy(args) {
+      const row = this.row
+
       this.loading = true
 
-      let args = ''
-
-      try {
-        args = await this.$refs.deployDialogRef.open(row)
-      }
-      catch (error) {
-        this.loading = false
-        this.$message.warning(error.message)
-        return false
-      }
-
       /** TODO */
       const isCamera = ['--camera-facing'].some(key => args.includes(key))
       if (isCamera) {