feat: 增加加载动画

src/app/App.tsx

@@ -1,11 +1,14 @@
-import { lazy } from "react";
+import { Loading } from "@/components/Loading";
+import { lazy, Suspense } from "react";
 
 const MainArea = lazy(() => import("@/app/MainArea/index"));
 
 function App() {
   return (
     <div className="h-full bg-[#F4F6FA]">
+      <Suspense fallback={<Loading/>}>
         <MainArea />
+      </Suspense>
     </div>
   );
 }

src/components/Loading/index.css

@@ -0,0 +1,26 @@
+.custom-animation {
+    height: calc(100% - 12px);
+    will-change: width;
+    animation: moveBackAndForth 2s infinite linear;
+}
+
+@keyframes moveBackAndForth {
+    0% {
+        transform: translateX(0);
+    }
+    25% {
+        width: calc(40%);
+        transform: translateX(calc(50% - 12px));
+    }
+    50% {
+        width: calc(20%);
+        transform: translateX(calc(400% - 12px));
+    }
+    75% {
+        width: calc(40%);
+        transform: translateX(calc(50% - 12px));
+    }
+    100% {
+        transform: translateX(0);
+    }
+}

src/components/Loading/index.tsx

@@ -0,0 +1,15 @@
+import "./index.css";
+import LogoSvg from "/icons/logo.png";
+
+export const Loading = () => {
+  return (
+    <div className="h-screen w-full flex items-center justify-center">
+      <div className="flex mx-[12vw] rounded-full border-[3px] border-solid border-[#000] h-[54px] p-[6px] relative flex-1">
+        <div className="w-[calc(20%)] bg-black rounded-full custom-animation absolute left-0"></div>
+        <div className="w-full h-full flex items-center justify-center mix-blend-difference">
+          <img src={LogoSvg} className="w-[115px] h-[18px]" />
+        </div>
+      </div>
+    </div>
+  );
+};

src/hooks/useAudioTest.ts

@@ -1,75 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export function useTtsPlayer() {
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-
-  // 第一次挂载时，创建一个隐藏的 <audio> 并追加到 body
-  useEffect(() => {
-    const audio = document.createElement('audio');
-    audio.style.display = 'none';
-    document.body.appendChild(audio);
-    audioRef.current = audio;
-
-    return () => {
-      // 卸载时清理
-      document.body.removeChild(audio);
-      audioRef.current = null;
-    };
-  }, []);
-
-  /**
-   * 播放指定 URL 的 TTS，返回一个 Promise，在播放成功时 resolve
-   */
-  function playTts(url: string): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const audio = audioRef.current;
-      if (!audio) {
-        reject(new Error('Audio element not initialized'));
-        return;
-      }
-
-      audio.src = url;
-      let resolved = false;
-
-      // 真正触发播放的逻辑
-      const tryPlay = () => {
-        audio.play()
-          .then(() => {
-            if (!resolved) {
-              resolved = true;
-              resolve();
-            }
-          })
-          .catch(() => {
-            // 如果因为缺少用户手势被阻止，就交给后面两个事件
-          });
-      };
-
-      // 1⃣️ 立即尝试一次
-      tryPlay();
-
-      // 2⃣️ 在微信 JSBridgeReady 后再试一次（仅触发一次）
-      const onBridge = () => {
-        tryPlay();
-        document.removeEventListener('WeixinJSBridgeReady', onBridge);
-      };
-      document.addEventListener('WeixinJSBridgeReady', onBridge);
-
-      // 3⃣️ 绑定一次性的 touchstart 保底，用户首次触摸时一定能播放
-      const onTouch = () => {
-        tryPlay();
-        document.body.removeEventListener('touchstart', onTouch);
-      };
-      document.body.addEventListener('touchstart', onTouch, { once: true });
-
-      // 可选：加个超时，播放一直没成功就 reject
-      setTimeout(() => {
-        if (!resolved) {
-          reject(new Error('TTS play timeout'));
-        }
-      }, 5000);
-    });
-  }
-
-  return { playTts };
-}