From 6957cf9b6c51326f1bc18a4a369c62f30038d5ca Mon Sep 17 00:00:00 2001
From: Eric Wang <wangx184@chinatelecom.cn>
Date: Tue, 4 Aug 2026 17:31:58 +0800
Subject: [PATCH] feat: enhance mobile call page with animated ripple effect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added a new animation for the "开始通话" button on the mobile call page, providing a visual ripple effect to improve user experience. Adjusted layout for better clarity and responsiveness.
---
 frontend/src/app/globals.css                  | 27 +++++++++++
 .../src/components/pages/MobileCallPage.tsx   | 45 +++++++++++--------
 2 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 9bc0e5c..f67fb51 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -271,4 +271,31 @@
       transparent
     );
   }
+
+  /* 手机通话页「开始通话」引导光晕：柔和向外扩散的涟漪环 */
+  @keyframes mobile-call-ripple {
+    0% {
+      transform: scale(1);
+      opacity: 0.55;
+    }
+    100% {
+      transform: scale(1.85);
+      opacity: 0;
+    }
+  }
+
+  .mobile-call-ripple {
+    animation: mobile-call-ripple 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
+  }
+
+  .mobile-call-ripple-delay {
+    animation-delay: 1.2s;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .mobile-call-ripple,
+    .mobile-call-ripple-delay {
+      animation: none;
+    }
+  }
 }
diff --git a/frontend/src/components/pages/MobileCallPage.tsx b/frontend/src/components/pages/MobileCallPage.tsx
index fb93be0..7b61196 100644
--- a/frontend/src/components/pages/MobileCallPage.tsx
+++ b/frontend/src/components/pages/MobileCallPage.tsx
@@ -543,25 +543,34 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
 
       {!inCall && (
         <div className="absolute inset-0 z-[2] flex items-center justify-center px-8">
-          <div className="flex max-w-sm flex-col items-center gap-5 text-center">
-            <div className="space-y-2">
-              <p className="text-xs tracking-wide text-white/45">AI 助手</p>
-              <h1 className="text-2xl font-medium leading-tight text-white">
-                {assistantName || "助手"}
-              </h1>
+          <div className="flex max-w-sm flex-col items-center text-center">
+            <h1 className="text-2xl font-medium leading-tight text-white">
+              {assistantName || "助手"}
+            </h1>
+            <div className="relative mt-10 inline-flex">
+              <span
+                aria-hidden
+                className="mobile-call-ripple pointer-events-none absolute inset-0 rounded-full bg-white/35"
+              />
+              <span
+                aria-hidden
+                className="mobile-call-ripple mobile-call-ripple-delay pointer-events-none absolute inset-0 rounded-full bg-white/25"
+              />
+              <Button
+                type="button"
+                onClick={() => {
+                  setView("chat");
+                  void startCall();
+                }}
+                className="relative z-10 h-12 gap-2 rounded-full bg-white px-6 text-[#07101a] shadow-[0_0_24px_rgba(255,255,255,0.35)] hover:bg-white/90"
+              >
+                <Phone size={19} />
+                {status === "failed" || callEnded ? "重新开始通话" : "开始通话"}
+              </Button>
             </div>
-            <Button
-              type="button"
-              onClick={() => {
-                setView("chat");
-                void startCall();
-              }}
-              className="h-12 gap-2 rounded-full bg-white px-6 text-[#07101a] shadow-2xl hover:bg-white/90"
-            >
-              <Phone size={19} />
-              {status === "failed" || callEnded ? "重新开始通话" : "开始通话"}
-            </Button>
-            {error && <p className="text-xs leading-5 text-white/65">{error}</p>}
+            {error && (
+              <p className="mt-4 text-xs leading-5 text-white/65">{error}</p>
+            )}
           </div>
         </div>
       )}