🚸 随机loading

src/components/func/loading.vue

@@ -17,8 +17,8 @@
               {{ data.subtitle }}
             </div>
             <div class="loading-img">
-              <img v-if="!data.empty" alt="loading" src="/source/UI/loading.webp" />
-              <img v-else alt="empty" src="/source/UI/empty.webp" />
+              <img v-if="data.empty" alt="loading" src="/source/UI/empty.webp" />
+              <img v-else :src="iconUrl" alt="empty" />
             </div>
           </div>
         </div>
@@ -27,16 +27,22 @@
   </transition>
 </template>
 <script lang="ts" setup>
+import showSnackbar from "@comp/func/snackbar.js";
+import bbsReq from "@req/bbsReq.js";
 import { onMounted, ref, shallowRef, watch } from "vue";
 
 import { LoadingParams } from "./loading.js";
 
+const defaultIcon = "/source/UI/loading.webp";
+
 const showBox = ref<boolean>(false);
 const showOuter = ref<boolean>(false);
 const showInner = ref<boolean>(false);
 
 const props = defineProps<LoadingParams>();
 const data = shallowRef<LoadingParams>(props);
+const localEmojis = shallowRef<Array<string>>([]);
+const iconUrl = ref<string>(defaultIcon);
 
 watch(
   () => showBox.value,
@@ -56,11 +62,27 @@ watch(
 
 onMounted(async () => await displayBox(props));
 
+async function getRandomEmoji(): Promise<void> {
+  if (localEmojis.value.length === 0) {
+    const resp = await bbsReq.emojis();
+    if ("retcode" in resp) {
+      console.error(resp);
+      showSnackbar.error("获取表情包失败！");
+      iconUrl.value = defaultIcon;
+      return;
+    }
+    localEmojis.value = Object.values(resp);
+    localStorage.setItem("emojis", JSON.stringify(resp));
+  }
+  iconUrl.value = localEmojis.value[Math.floor(Math.random() * localEmojis.value.length)];
+}
+
 async function displayBox(params: LoadingParams): Promise<void> {
   if (!params.show) {
     showBox.value = false;
     await new Promise<void>((resolve) => setTimeout(resolve, 500));
     data.value = { show: false, title: undefined, subtitle: undefined, empty: undefined };
+    await getRandomEmoji();
     return;
   }
   data.value = {
@@ -175,14 +197,15 @@ defineExpose({ displayBox });
 .loading-img {
   display: flex;
   width: 100%;
-  height: 200px;
+  height: 160px;
   align-items: center;
   justify-content: center;
 
   img {
     max-width: 100%;
-    max-height: 200px;
-    border-radius: 5px;
+    max-height: 160px;
+    border-radius: 4px;
+    aspect-ratio: 1;
   }
 }
 

src/pages/common/PageTest.vue

@@ -19,14 +19,12 @@
   </div>
 </template>
 <script lang="ts" setup>
-import useAppStore from "@store/app.js";
-import { tryReadGameVer } from "@utils/TGGame.js";
-import { storeToRefs } from "pinia";
-
-const { gameDir } = storeToRefs(useAppStore());
+import showLoading from "@comp/func/loading.js";
 
 async function test() {
-  await tryReadGameVer(gameDir.value);
+  await showLoading.start("测试");
+  await new Promise<void>((resolve) => setTimeout(resolve, 1000));
+  await showLoading.end();
 }
 </script>
 <style lang="css" scoped>