From abd468bd433e14bdda737f42e748ca7a947b2917 Mon Sep 17 00:00:00 2001
From: viarotel <viarotel@qq.com>
Date: Sun, 14 Jul 2024 16:31:18 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E2=99=BB=EF=B8=8F=20Optimize=20custom?=
 =?UTF-8?q?=20startup=20performance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Custom/components/DeployDialog/index.vue  | 98 ++++++++++---------
 .../MoreDropdown/components/Custom/index.vue  | 18 ++--
 2 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/src/components/Device/components/MoreDropdown/components/Custom/components/DeployDialog/index.vue b/src/components/Device/components/MoreDropdown/components/Custom/components/DeployDialog/index.vue
index 4f014b7..c2d7e73 100644
--- a/src/components/Device/components/MoreDropdown/components/Custom/components/DeployDialog/index.vue
+++ b/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() {
diff --git a/src/components/Device/components/MoreDropdown/components/Custom/index.vue b/src/components/Device/components/MoreDropdown/components/Custom/index.vue
index a92bc14..218faee 100644
--- a/src/components/Device/components/MoreDropdown/components/Custom/index.vue
+++ b/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) {