🎨 优化逻辑，将 loading 暴露出来

src/components/main/t-shareBtn.vue

@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" title="正在生成分享图片" :subtitle="`${props.title}.png`" />
   <div class="share-box">
     <div class="share-btn" @click="shareContent()">
       <v-icon style="color: var(--theme-switch-icon)"> mdi-share-variant </v-icon>
@@ -7,28 +6,24 @@
   </div>
 </template>
 <script lang="ts" setup>
-// vue
-import { ref, onMounted } from "vue";
-import ToLoading from "../overlay/to-loading.vue";
 // utils
 import { generateShareImg } from "../../utils/TGShare";
 
-// loading
-const loading = ref<boolean>();
-
 interface TShareBtnProps {
   modelValue: HTMLElement;
   title: string;
+  loading: boolean;
 }
 
+type TShareBtnEmits = (e: "update:loading", value: boolean) => void;
+
 const props = defineProps<TShareBtnProps>();
+const emit = defineEmits<TShareBtnEmits>();
 
-onMounted(() => (loading.value = false));
+async function shareContent(): Promise<void> {
-
+  emit("update:loading", true);
-async function shareContent() {
-  loading.value = true;
   await generateShareImg(props.title, props.modelValue);
-  loading.value = false;
+  emit("update:loading", false);
 }
 </script>
 <style lang="css" scoped>

src/views/t-anno.vue

@@ -1,8 +1,13 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <TSwitchTheme />
-  <TShareBtn v-show="!loadingEmpty" v-model="annoRef" :title="annoTitle" />
+  <TShareBtn
-  <TOLoading v-model="loading" :title="loadingTitle" :empty="loadingEmpty" />
+    v-show="!loadingEmpty"
+    v-model="annoRef"
+    v-model:loading="loadShare"
+    :title="annoTitle"
+  />
+  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" :empty="loadingEmpty" />
   <div class="anno-body">
     <div class="anno-title">
       {{ annoData.title }}
@@ -16,32 +21,34 @@
 </template>
 <script lang="ts" setup>
 // vue
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRoute } from "vue-router";
-import TOLoading from "../components/overlay/to-loading.vue";
+import ToLoading from "../components/overlay/to-loading.vue";
 import TSwitchTheme from "../components/main/t-switchTheme.vue";
 import TShareBtn from "../components/main/t-shareBtn.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
-// plugins
+// utils
 import TGRequest from "../web/request/TGRequest";
 import TGUtils from "../web/utils/TGUtils";
 import { saveImgLocal } from "../utils/TGShare";
 
 // loading
-const loading = ref(true as boolean);
+const loading = ref<boolean>(true);
-const loadingTitle = ref("正在加载");
+const loadShare = ref<boolean>(false);
-const loadingEmpty = ref(false as boolean);
+const loadingTitle = ref<string>("正在加载");
+const loadingSub = ref<string>();
+const loadingEmpty = ref<boolean>(false);
 
 // share
-const annoRef = ref({} as HTMLElement);
+const annoRef = ref<HTMLElement>(<HTMLElement>{});
-const annoTitle = ref("");
+const annoTitle = ref<string>("");
 
 // 数据
 const annoId = Number(useRoute().params.anno_id);
-const annoData = ref({} as TGApp.BBS.Announcement.ContentItem);
+const annoData = ref<TGApp.BBS.Announcement.ContentItem>(<TGApp.BBS.Announcement.ContentItem>{});
-const annoHtml = ref("");
+const annoHtml = ref<string>();
-const annoBanner = ref("");
+const annoBanner = ref<string>();
 
 onMounted(async () => {
   await appWindow.show();
@@ -61,7 +68,7 @@ onMounted(async () => {
     annoBanner.value = await saveImgLocal(annoData.value.banner);
     annoTitle.value = `【公告】${annoId}-${annoData.value.title}`;
     await appWindow.setTitle(annoTitle.value);
-    annoRef.value = document.querySelector(".anno-body") as HTMLElement;
+    annoRef.value = <HTMLElement>document.querySelector(".anno-body");
   } catch (error) {
     console.error(error);
     loadingEmpty.value = true;
@@ -69,7 +76,20 @@ onMounted(async () => {
     await appWindow.setTitle(`【公告】${annoId}-公告不存在或解析失败`);
     return;
   }
+  setTimeout(() => {
     loading.value = false;
+  }, 200);
+});
+
+watch(loadShare, (value) => {
+  if (value) {
+    loadingTitle.value = "正在生成分享图片";
+    loadingSub.value = `${annoTitle.value}.png`;
+    loading.value = true;
+  } else {
+    loadingSub.value = "";
+    loading.value = false;
+  }
 });
 </script>
-<style lang="css" src="../assets/css/anno-parser.css" scoped />
+<style lang="css" src="../assets/css/anno-parser.css" scoped></style>

src/views/t-post.vue

@@ -1,8 +1,13 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <TSwitchTheme />
-  <TShareBtn v-show="!loadingEmpty" v-model="postRef" :title="shareTitle" />
+  <TShareBtn
-  <ToLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
+    v-show="!loadingEmpty"
+    v-model="postRef"
+    v-model:loading="loadShare"
+    :title="shareTitle"
+  />
+  <ToLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" :subtitle="loadingSub" />
   <div class="mys-post-body">
     <div class="mys-post-title">
       {{ postRender.title }}
@@ -16,7 +21,7 @@
 </template>
 <script lang="ts" setup>
 // vue
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRoute } from "vue-router";
 import ToLoading from "../components/overlay/to-loading.vue";
 import TSwitchTheme from "../components/main/t-switchTheme.vue";
@@ -28,11 +33,13 @@ import Mys from "../plugins/Mys";
 
 // loading
 const loading = ref<boolean>(true);
+const loadShare = ref<boolean>(false);
 const loadingTitle = ref<string>("正在加载");
+const loadingSub = ref<string>();
 const loadingEmpty = ref<boolean>(false);
 
 // share
-const postRef = ref<HTMLElement>({} as HTMLElement);
+const postRef = ref<HTMLElement>(<HTMLElement>{});
 const shareTitle = ref<string>("");
 
 // 数据
@@ -65,7 +72,7 @@ onMounted(async () => {
       updated: new Date(postData.post.updated_at * 1000).toLocaleString().replace(/\//g, "-"),
     };
     shareTitle.value = `【帖子】${postId}-${postData.post.subject}`;
-    postRef.value = document.querySelector(".mys-post-body") as HTMLElement;
+    postRef.value = <HTMLElement>document.querySelector(".mys-post-body");
     await appWindow.setTitle(shareTitle.value);
   } catch (error) {
     console.error(error);
@@ -78,5 +85,16 @@ onMounted(async () => {
     loading.value = false;
   }, 200);
 });
+
+watch(loadShare, (value) => {
+  if (value) {
+    loadingTitle.value = "正在生成分享图片";
+    loadingSub.value = `${shareTitle.value}.png`;
+    loading.value = true;
+  } else {
+    loadingSub.value = "";
+    loading.value = false;
+  }
+});
 </script>
 <style lang="css" scoped src="../assets/css/post-parser.css"></style>