fix: 界面载入就加载定时器的问题

MaaAssistantArknights · May 24, 2023 · 0a866a2 · 0a866a2
1 parent 48fcb60
commit 0a866a2
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 95 deletions.
diff --git a/packages/main/componentManager/installer.ts b/packages/main/componentManager/installer.ts
@@ -70,8 +70,7 @@ export default abstract class InstallerBase implements Installer {
               this.status = 'exception'
               this.notifier.onException()
             },
-          }
-          ).then(() => {
+          }).then(() => {
             this.status = 'downloading'
           })
         }

diff --git a/packages/main/componentManager/types.ts b/packages/main/componentManager/types.ts
@@ -9,15 +9,15 @@ export interface UnzipHandle {
 
 export type UpdateStatus =
   | {
-    msg: 'failedAccessLatest'
-  }
+      msg: 'failedAccessLatest'
+    }
   | {
-    msg: 'alreadyLatest'
-  }
+      msg: 'alreadyLatest'
+    }
   | {
-    msg: 'haveUpdate'
-    update: Update
-  }
+      msg: 'haveUpdate'
+      update: Update
+    }
 
 export interface Installer {
   readonly sources: SourceMirror[]

diff --git a/packages/renderer/src/components/Device/DeviceCard.vue b/packages/renderer/src/components/Device/DeviceCard.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import IconDisconnect from '@/assets/icons/disconnect.svg?component'
 import DeviceDetailPopover from '@/components/Device/DeviceDetailPopover.vue'
 import IconLink from '@/assets/icons/link.svg?component'
-import { NButton, NTooltip, NIcon, NSpace, NPopconfirm, useThemeVars } from 'naive-ui'
+import { NButton, NTooltip, NIcon, NSpace, NPopconfirm, useThemeVars, NPopover } from 'naive-ui'
 
 import useDeviceStore from '@/store/devices'
 import router from '@/router'
@@ -18,6 +18,8 @@ const props = defineProps<{
   device: Device
 }>()
 
+const showDetail = ref(false)
+
 const themeVars = useThemeVars()
 const deviceStore = useDeviceStore()
 const taskStore = useTaskStore()
@@ -142,11 +144,16 @@ async function handleDeviceConnect() {
           })()
         }}
       </NTooltip>
-      <DeviceDetailPopover :device="props.device">
-        <div class="device-name">
-          {{ deviceDisplayName }}
-        </div>
-      </DeviceDetailPopover>
+      <NPopover v-model:show="showDetail" :duration="500">
+        <template #trigger>
+          <div class="device-name">
+            {{ deviceDisplayName }}
+          </div>
+        </template>
+        <template #default>
+          <DeviceDetailPopover :device="props.device" />
+        </template>
+      </NPopover>
     </NButton>
     <NSpace :align="'center'">
       <NPopconfirm

diff --git a/packages/renderer/src/components/Device/DeviceDetailPopover.vue b/packages/renderer/src/components/Device/DeviceDetailPopover.vue
@@ -1,17 +1,15 @@
 <script lang="ts" setup>
 import {
-  NPopover,
   NImage,
-  NInput,
-  NIcon,
   NDescriptions,
   NDescriptionsItem,
   NDivider,
   NTooltip,
   NText,
 } from 'naive-ui'
+import { useIntervalFn } from '@vueuse/core'
 import useDeviceStore from '@/store/devices'
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import logger from '@/hooks/caller/logger'
 import IconPencilAlt from '@/assets/icons/pencil-alt.svg?component'
 import type { Device } from '@type/device'
@@ -23,11 +21,15 @@ const props = defineProps<{
   device: Device
 }>()
 
-// const emit = defineEmits(['update:show'])
-const show = ref(false)
-
 const screenshot = ref('')
-let timer: number | null = null
+const interval = useIntervalFn(requestScreenshot, 3000, { immediate: false })
+
+async function requestScreenshot() {
+  logger.info('send asyncScreencap')
+  await window.ipcRenderer.invoke('main.CoreLoader:asyncScreencap', {
+    uuid: props.device.uuid,
+  })
+}
 
 async function gotScreenshot(event: Electron.IpcRendererEvent, data: { uuid: string }) {
   if (data.uuid === props.device.uuid) {
@@ -50,85 +52,75 @@ onMounted(() => {
   // register event
   window.ipcRenderer.on('renderer.Device:getScreenshot', gotScreenshot)
   // start timer
-  timer = window.setInterval(async () => {
-    logger.info('send asyncScreencap')
-    await window.ipcRenderer.invoke('main.CoreLoader:asyncScreencap', {
-      uuid: props.device.uuid,
-    })
-  }, 3000)
+  interval.resume()
 })
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   // unregister event
   window.ipcRenderer.off('renderer.Device:getScreenshot', gotScreenshot)
   // stop timer
-  if (timer) window.clearInterval(timer)
+  interval.pause()
 })
 </script>
 
 <template>
-  <NPopover v-model:show="show" :duration="500">
-    <template #trigger>
-      <slot />
-    </template>
-    <template #default>
-      <NDescriptions
-        label-placement="top"
-        label-align="left"
-        :column="0"
-        :bordered="false"
-        style="min-width: 100%; max-width: 320px"
-      >
-        <NDescriptionsItem>
-          <template #label>
-            <NText type="info"> 备注: （双击可编辑）</NText>
-          </template>
+  <div>
+  <NDescriptions
+    label-placement="top"
+    label-align="left"
+    :column="0"
+    :bordered="false"
+    style="min-width: 100%; max-width: 320px"
+  >
+    <NDescriptionsItem>
+      <template #label>
+        <NText type="info"> 备注: （双击可编辑）</NText>
+      </template>
+      <ClickToEdit
+        :value="props.device.displayName ?? ''"
+        @update:value="updateDisplayName"
+        spellcheck="false"
+      />
+    </NDescriptionsItem>
+    <NDescriptionsItem>
+      <template #label>
+        <NText type="info"> 设备标识符: </NText>
+      </template>
+      <template #default>
+        {{ props.device.uuid }}
+      </template>
+    </NDescriptionsItem>
+    <NDescriptionsItem>
+      <template #label>
+        <NText type="info"> 连接地址: </NText>
+      </template>
+      <template #default>
+        {{ props.device.address.length > 0 ? props.device.address : '刷新以查看' }}
+      </template>
+    </NDescriptionsItem>
+    <NDescriptionsItem>
+      <template #label>
+        <NText type="info"> 启动命令: （双击可编辑）</NText>
+      </template>
+      <NTooltip trigger="hover">
+        <template #trigger>
           <ClickToEdit
-            :value="props.device.displayName ?? ''"
-            @update:value="updateDisplayName"
+            :value="props.device.commandLine ?? ''"
+            @update:value="updateCommandLine"
+            type="textarea"
+            placeholder="未设置启动命令"
+            :autosize="{ minRows: 1 }"
+            style="min-width: 100%; padding: 0 4px"
             spellcheck="false"
           />
-        </NDescriptionsItem>
-        <NDescriptionsItem>
-          <template #label>
-            <NText type="info"> 设备标识符: </NText>
-          </template>
-          <template #default>
-            {{ props.device.uuid }}
-          </template>
-        </NDescriptionsItem>
-        <NDescriptionsItem>
-          <template #label>
-            <NText type="info"> 连接地址: </NText>
-          </template>
-          <template #default>
-            {{ props.device.address.length > 0 ? props.device.address : '刷新以查看' }}
-          </template>
-        </NDescriptionsItem>
-        <NDescriptionsItem>
-          <template #label>
-            <NText type="info"> 启动命令: （双击可编辑）</NText>
-          </template>
-          <NTooltip trigger="hover">
-            <template #trigger>
-              <ClickToEdit
-                :value="props.device.commandLine ?? ''"
-                @update:value="updateCommandLine"
-                type="textarea"
-                placeholder="未设置启动命令"
-                :autosize="{ minRows: 1 }"
-                style="min-width: 100%; padding: 0 4px"
-                spellcheck="false"
-              />
-            </template>
-            <template #default>
-              模拟器自动启动命令, 非必要请不要修改这里的内容, 留空将会在下一次链接时尝试自动获取
-            </template>
-          </NTooltip>
-        </NDescriptionsItem>
-      </NDescriptions>
-      <NDivider />
-      <NImage width="320" height="180" src="screenshot" />
-    </template>
-  </NPopover>
+        </template>
+        <template #default>
+          模拟器自动启动命令, 非必要请不要修改这里的内容, 留空将会在下一次链接时尝试自动获取
+        </template>
+      </NTooltip>
+    </NDescriptionsItem>
+  </NDescriptions>
+  <NDivider />
+  <NImage width="320" height="180" src="screenshot" />
+</div>
 </template>
diff --git a/packages/renderer/src/components/Task/NewTask.vue b/packages/renderer/src/components/Task/NewTask.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NCollapse, NCollapseItem, NScrollbar, NSpace, useThemeVars, NDropdown } from 'naive-ui'
+import { NCollapse, NCollapseItem, NScrollbar, NSpace, useThemeVars, NDropdown, NText } from 'naive-ui'
 import { ref, nextTick } from 'vue'
 import router from '@/router'
 import useThemeStore from '@/store/theme'

diff --git a/packages/renderer/src/components/Task/configurations/Fighting.vue b/packages/renderer/src/components/Task/configurations/Fighting.vue
@@ -175,7 +175,9 @@ onMounted(async () => {
               :value="drops.times"
               :min="0"
               :max="999"
-              @update:value="value => handleDropUpdate({ item_id: drops.item_id, times: value ?? undefined })"
+              @update:value="
+                value => handleDropUpdate({ item_id: drops.item_id, times: value ?? undefined })
+              "
             />
           </NInputGroup>
         </NFormItem>