🚸 优化加载

src/components/viewPost/tp-vod.vue

@@ -6,7 +6,7 @@
       :id="`tp-vod-${props.data.insert.vod.id}`"
     ></div>
     <div class="tp-vod-share">
-      <img alt="cover" :src="props.data.insert.vod.cover" class="tp-vod-cover" />
+      <img alt="cover" :src="coverUrl" class="tp-vod-cover" />
       <img src="/source/UI/video_play.svg" alt="icon" class="tp-vod-icon" />
       <div class="tp-vod-time">
         <v-icon size="12">mdi-clock-time-four-outline</v-icon>
@@ -20,6 +20,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+import showLoading from "@comp/func/loading.js";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import Artplayer from "artplayer";
 import type { Option } from "artplayer/types/option.js";
@@ -79,7 +80,7 @@ onMounted(async () => {
     id: props.data.insert.vod.id,
     container: `#tp-vod-${props.data.insert.vod.id}`,
     url: highestResolution.url,
-    poster: props.data.insert.vod.cover,
+    poster: coverUrl.value,
     type: highestResolution.format,
     playbackRate: true,
     aspectRatio: true,
@@ -110,10 +111,12 @@ onMounted(async () => {
         html: `<i class="mdi mdi-download"></i>`,
         tooltip: "下载封面",
         click: async () => {
+          await showLoading.start("正在下载封面");
           if (!coverBuffer.value) {
             coverBuffer.value = await getImageBuffer(props.data.insert.vod.cover);
           }
           await saveCanvasImg(coverBuffer.value, `vod-cover-${props.data.insert.vod.id}`);
+          await showLoading.end();
         },
       },
     ],

src/components/viewPost/vp-overlay-image.vue

@@ -24,6 +24,7 @@
 </template>
 <script setup lang="ts">
 import TOverlay from "@comp/app/t-overlay.vue";
+import showLoading from "@comp/func/loading.js";
 import showSnackbar from "@comp/func/snackbar.js";
 import { computed, onMounted, onUnmounted, ref, shallowRef } from "vue";
 
@@ -70,23 +71,25 @@ async function onCopy(): Promise<void> {
     showSnackbar.warn("GIF 图片不支持复制到剪贴板");
     return;
   }
+  await showLoading.start("正在复制图片到剪贴板");
   const image = props.image.insert.image;
   if (buffer.value === null) buffer.value = await getImageBuffer(image);
   const size = bytesToSize(buffer.value.byteLength);
   await copyToClipboard(buffer.value);
+  await showLoading.end();
   showSnackbar.success(`图片已复制到剪贴板，大小：${size}`);
 }
 
 async function onDownload(): Promise<void> {
+  await showLoading.start("正在下载图片到本地");
   const image = props.image.insert.image;
   if (buffer.value === null) buffer.value = await getImageBuffer(image);
-  const size = bytesToSize(buffer.value.byteLength);
   if (buffer.value.byteLength > 80000000) {
     showSnackbar.warn("图片过大，无法下载到本地");
     return;
   }
   await saveCanvasImg(buffer.value, Date.now().toString(), format.value);
-  showSnackbar.success(`图片已下载到本地，大小：${size}`);
+  await showLoading.end();
 }
 </script>
 <style lang="css" scoped>