添加音频loading页面

src/audioManager.js

@@ -123,6 +123,8 @@ class AudioManager {
     // 网络状态相关
     this.networkOnline = true;
     this.pendingPlayKey = null;
+    // 新增：就绪状态映射
+    this.readyMap = new Map();
     try {
       uni.onNetworkStatusChange(({ isConnected }) => {
         this.networkOnline = !!isConnected;
@@ -224,6 +226,8 @@ class AudioManager {
         } catch (_) {}
       }
       clearTimeout(loadTimeout);
+      // 标记为已就绪
+      this.readyMap.set(key, true);
       debugLog(`音频 ${key} 已加载完成`);
       uni.$emit("audioLoaded", key);
       const loadedAudioKeys = uni.getStorageSync("loadedAudioKeys") || {};
@@ -237,6 +241,8 @@ class AudioManager {
       clearTimeout(loadTimeout);
       debugLog(`音频 ${key} 加载失败：`, res.errMsg);
       this.allowPlayMap.set(key, false);
+      // 标记为未就绪
+      this.readyMap.set(key, false);
       this.handleAudioError(key);
       if (callback) callback();
     });
@@ -476,6 +482,7 @@ class AudioManager {
       this.allowPlayMap.delete(k);
       this.retryCount.delete(k);
       this.audioMap.delete(k);
+      this.readyMap.delete(k);
     }
     this.audioKeys = [];
     this.currentLoadingIndex = 0;
@@ -573,6 +580,22 @@ class AudioManager {
     }
     debugLog(`静音状态已设置为: ${this.isMuted}`);
   }
+
+  // 新增：返回音频加载进度（0~1）
+  getLoadProgress() {
+    // 总数优先使用已初始化的 audioKeys，未初始化则回退到 audioFils
+    const keys =
+      this.audioKeys && this.audioKeys.length > 0
+        ? this.audioKeys
+        : Object.keys(audioFils);
+    const total = keys.length;
+    if (total === 0) return 0;
+    let loaded = 0;
+    for (const k of keys) {
+      if (this.readyMap.get(k)) loaded++;
+    }
+    return loaded / total;
+  }
 }
 
 // 导出单例

src/pages.json

@@ -1,5 +1,8 @@
 {
   "pages": [
+    {
+      "path": "pages/load-resources"
+    },
     {
       "path": "pages/index"
     },

src/pages/load-resources.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import AudioManager from "@/audioManager";
+
+const timer = ref(null);
+const progress = ref(0);
+
+onMounted(() => {
+  timer.value = setInterval(() => {
+    const result = AudioManager.getLoadProgress();
+    if (result > progress.value) {
+      progress.value = result;
+    }
+    if (progress.value === 1) {
+      clearInterval(timer.value);
+      uni.redirectTo({
+        url: "/pages/index",
+      });
+    }
+  }, 200);
+});
+
+onBeforeUnmount(() => {
+  if (timer.value) clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <view class="container">
+    <image
+      src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91bppqmq1mwf3f.png"
+      mode="aspectFill"
+    />
+    <image
+      src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a4hjot4ulumg.png"
+      mode="widthFix"
+    />
+    <view>
+      <view :style="{ width: `${progress * 100}%` }">
+        <image
+          src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a7si77sg9jqv.png"
+          mode="widthFix"
+        />
+      </view>
+      <text>资源加载中...</text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  display: flex;
+}
+.container > image:first-child {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.container > image:nth-child(2) {
+  width: 300rpx;
+  height: 420rpx;
+  position: fixed;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.container > view:nth-child(3) {
+  width: 380rpx;
+  height: 6rpx;
+  background: #000000;
+  border-radius: 4rpx;
+  position: fixed;
+  top: 80%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.container > view:nth-child(3) > view {
+  background: #ffe431;
+  min-height: 6rpx;
+  border-radius: 4rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  transition: width 0.5s ease;
+}
+.container > view:nth-child(3) > view > image {
+  width: 46rpx;
+  height: 26rpx;
+}
+.container > view:nth-child(3) > text {
+  width: 100%;
+  opacity: 0.5;
+  font-size: 22rpx;
+  color: #ffffff;
+  text-align: center;
+  margin-top: 20rpx;
+}
+</style>