Merge branch 'dev'

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

@@ -1,51 +1,50 @@
 <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)"
-    >
-      <div class="h-full overflow-auto -mx-2 pr-2">
-        <PreferenceForm
-          ref="preferenceFormRef"
-          v-model="preferenceData"
-          tag="el-collapse-item"
-          v-bind="{
-            collapseProps: { accordion: true },
-            excludes: ['common'],
-          }"
-        />
-      </div>
+  <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
+    @closed="onClosed"
+  >
+    <div class="h-full overflow-auto -mx-2 pr-2">
+      <PreferenceForm
+        ref="preferenceFormRef"
+        v-model="preferenceData"
+        tag="el-collapse-item"
+        v-bind="{
+          collapseProps: { accordion: true },
+          excludes: ['common'],
+        }"
+      />
+    </div>
 
-      <template #footer>
-        <el-button @click="close(reject)">
-          {{ $t('common.cancel') }}
-        </el-button>
-        <el-button type="primary" @click="submit(resolve)">
-          {{ $t('common.confirm') }}
-        </el-button>
-      </template>
-    </el-dialog>
-  </TemplatePromise>
+    <template #footer>
+      <el-button @click="close">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" :loading @click="submit">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </template>
+  </el-dialog>
 </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) {