✨ 優化用戶體驗與界面設計

🔧 功能優化：
- 修復 STT 文字未送入意圖分析的問題
- 優化輸入框寬度，提升視覺平衡性

🎨 界面優化：
- 縮小輸入框容器寬度 (680px → 520px)
- 調整內距與圓角，增強精緻感
- 優化手機版響應式設計

🌸 動畫體驗：
- 新增登入頁到聊天室的流暢過渡動畫
- 實現蓮花綻放載入動畫
- 添加頁面淡入淡出效果
- 優化視覺連貫性與用戶體驗

📱 響應式設計：
- 完善手機版動畫適配
- 優化觸控友好性
- 提升整體視覺一致性

app.py

@@ -1331,6 +1331,7 @@ async def websocket_endpoint_with_jwt(websocket: WebSocket, token: str = Query(N
                                                 "message": str(response),
                                                 "timestamp": time.time()
                                             })
+                                    await _process_voice_chat()
 
                         except Exception as e:
                             logger.error(f"語音對話流程失敗: {e}")

static/frontend/index.html

@@ -19,6 +19,19 @@
       color: #1A1A1A;
       overflow: hidden;
       -webkit-font-smoothing: antialiased;
+      /* 頁面載入淡入動畫 */
+      animation: pageEnter 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    }
+
+    @keyframes pageEnter {
+      from {
+        opacity: 0;
+        transform: scale(1.02);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
     }
 
     /* === 控制面板 === */
@@ -118,6 +131,17 @@
       align-items: center;
       justify-content: center;
       background: #F5F1ED;
+      /* 初始載入動畫 */
+      animation: overlayEnter 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
+    }
+
+    @keyframes overlayEnter {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
     }
 
     /* === 動態漸變背景（移除光暈，改用極淺色情緒底色）=== */
@@ -206,6 +230,19 @@
       gap: clamp(36px, 6vh, 72px);
       width: min(88vw, 640px);
       padding: clamp(12px, 3vh, 28px) 0;
+      /* 元素依序淡入動畫 */
+      animation: containerEnter 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
+    }
+
+    @keyframes containerEnter {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
     }
 
     /* === 波形與麥克風容器 === */
@@ -216,6 +253,19 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      /* 蓮花綻放入場動畫 */
+      animation: lotusBloom 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards;
+    }
+
+    @keyframes lotusBloom {
+      from {
+        opacity: 0;
+        transform: scale(0.8) rotate(-10deg);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1) rotate(0deg);
+      }
     }
 
     /* Canvas 波形 */
@@ -979,9 +1029,9 @@
     .voice-transcript-wrapper {
       position: relative;
       width: 100%;
-      max-width: 680px; /* 限制最大寬度（從 100% 改為固定上限）*/
+      max-width: 520px; /* 優化：縮小最大寬度（680px → 520px，減少約 24%）*/
       margin: 0 auto; /* 置中對齊 */
-      padding: 0 20px; /* 左右留白 */
+      padding: 0 16px; /* 優化：減少左右留白（20px → 16px）*/
       display: flex;
       justify-content: center;
     }
@@ -989,18 +1039,18 @@
     .voice-transcript {
       width: 100%; /* 填滿 wrapper（受 max-width 限制）*/
       flex-shrink: 0;
-      padding: 20px 28px; /* 減少內距（原 24px 32px）*/
+      padding: 18px 24px; /* 優化：進一步減少內距（20px 28px → 18px 24px）*/
       background: rgba(255, 255, 255, 0.96);
       border: 1.5px solid rgba(0, 0, 0, 0.06); /* 更細的邊框 */
-      border-radius: 14px; /* 稍微減少圓角（原 16px）*/
+      border-radius: 12px; /* 優化：減少圓角（14px → 12px）*/
       backdrop-filter: blur(24px) saturate(180%);
-      font-size: 18px; /* 減小字體（原 20px）*/
+      font-size: 17px; /* 優化：稍微縮小字體（18px → 17px）*/
       font-weight: 400;
       color: #1A1A1A;
       text-align: center;
       line-height: 1.5; /* 稍微緊湊（原 1.6）*/
-      min-height: 72px; /* 減少最小高度（原 80px）*/
-      max-height: 140px; /* 減少最大高度（原 160px）*/
+      min-height: 68px; /* 優化：減少最小高度（72px → 68px）*/
+      max-height: 130px; /* 優化：減少最大高度（140px → 130px）*/
       display: flex;
       align-items: center;
       justify-content: center;
@@ -1031,7 +1081,7 @@
       background: rgba(255, 255, 255, 0.98);
       white-space: pre-wrap;
       word-break: break-word;
-      max-height: 140px; /* 與基礎樣式保持一致 */
+      max-height: 130px; /* 優化：與基礎樣式保持一致 */
     }
 
     .voice-transcript.text-input-mode:focus {
@@ -1077,15 +1127,15 @@
     @media (max-width: 768px) {
       .voice-transcript-wrapper {
         max-width: 100%; /* 手機版全寬 */
-        padding: 0 16px; /* 減少左右留白 */
+        padding: 0 14px; /* 優化：減少左右留白（16px → 14px）*/
       }
 
       .voice-transcript {
         font-size: 16px; /* 手機版縮小字體 */
-        padding: 16px 20px; /* 減少內距 */
-        min-height: 64px; /* 減少最小高度 */
-        max-height: 120px; /* 減少最大高度 */
-        border-radius: 12px; /* 減少圓角 */
+        padding: 15px 18px; /* 優化：減少內距（16px 20px → 15px 18px）*/
+        min-height: 62px; /* 優化：減少最小高度（64px → 62px）*/
+        max-height: 115px; /* 優化：減少最大高度（120px → 115px）*/
+        border-radius: 11px; /* 優化：減少圓角（12px → 11px）*/
       }
 
       .input-mode-hint {

static/frontend/js/login.js

@@ -9,6 +9,27 @@
   }
 })();
 
+/**
+ * 平滑跳轉到聊天室（帶過渡動畫）
+ */
+function smoothTransitionToChatRoom(delay = 800) {
+  console.log('🌸 開始平滑過渡到聊天室...');
+  
+  // 顯示載入覆蓋層
+  const loadingOverlay = document.getElementById('loadingOverlay');
+  if (loadingOverlay) {
+    loadingOverlay.classList.add('active');
+  }
+
+  // 觸發頁面淡出動畫
+  document.body.classList.add('page-transitioning');
+
+  // 延遲跳轉，讓動畫完成
+  setTimeout(() => {
+    window.location.href = '/static/index.html';
+  }, delay);
+}
+
 // ========== Google OAuth PKCE 登入流程 ==========
 
 /**
@@ -168,8 +189,8 @@ async function handleOAuthCallback() {
       console.log('✅ 登入成功！導向聊天室...');
       console.log('🔑 JWT Token 已存儲，長度:', data.access_token.length);
 
-      // 導向聊天室
-      window.location.href = '/static/index.html';
+      // 使用平滑過渡
+      smoothTransitionToChatRoom(600);
     } else {
       throw new Error('Token 交換失敗');
     }
@@ -338,11 +359,20 @@ const iosPermissionManager = new IOSPermissionManager();
 
 // ========== 頁面初始化 ==========
 
+// 頁面載入時的淡入動畫
+window.addEventListener('load', () => {
+  // 移除淡入動畫類別（避免重複觸發）
+  setTimeout(() => {
+    document.body.classList.remove('page-entering');
+  }, 500);
+});
+
 // 檢查是否已登入
 const token = localStorage.getItem('jwt_token');
 if (token && !window.location.search.includes('code=')) {
-  // 已登入，直接導向聊天室
-  window.location.href = '/static/index.html';
+  // 已登入，使用平滑過渡導向聊天室
+  console.log('✅ 已登入，自動跳轉到聊天室');
+  smoothTransitionToChatRoom(400);
 }
 
 // 檢查是否為 OAuth callback
@@ -458,10 +488,8 @@ class VoiceLoginManager {
       try { this.ws && this.ws.readyState === WebSocket.OPEN && this.ws.close(1000, 'voice login done'); } catch(_) {}
       this.cleanup();
 
-      // 快速跳轉到聊天室（縮短等待體感更順）
-      setTimeout(() => {
-        window.location.href = '/static/index.html';
-      }, 800);
+      // 使用平滑過渡到聊天室
+      smoothTransitionToChatRoom(800);
 
     } else {
       console.error('❌ 語音登入失敗:', data.error);

static/frontend/login.html

@@ -222,9 +222,211 @@
     .voice-status.active {
       display: block;
     }
+
+    /* === 頁面過渡動畫 === */
+    @keyframes fadeOut {
+      from {
+        opacity: 1;
+        transform: scale(1);
+      }
+      to {
+        opacity: 0;
+        transform: scale(0.98);
+      }
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: scale(1.02);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    /* 頁面淡出狀態 */
+    body.page-transitioning {
+      animation: fadeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    }
+
+    /* 頁面淡入狀態 */
+    body.page-entering {
+      animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    }
+
+    /* 載入覆蓋層 */
+    .loading-overlay {
+      position: fixed;
+      inset: 0;
+      background: linear-gradient(135deg, #FFF8E7 0%, #F5F1ED 100%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
+                  visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .loading-overlay.active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    /* 蓮花載入動畫 */
+    .loading-lotus {
+      width: 80px;
+      height: 80px;
+      position: relative;
+      margin-bottom: 2rem;
+    }
+
+    .lotus-petal {
+      position: absolute;
+      width: 24px;
+      height: 40px;
+      background: linear-gradient(180deg, 
+        rgba(255, 255, 255, 0.95) 0%,
+        rgba(249, 250, 251, 0.9) 100%
+      );
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+      top: 50%;
+      left: 50%;
+      transform-origin: 50% 100%;
+      animation: petalPulse 1.6s ease-in-out infinite;
+    }
+
+    .lotus-petal:nth-child(1) {
+      transform: translate(-50%, -50%) rotate(0deg);
+      animation-delay: 0s;
+    }
+
+    .lotus-petal:nth-child(2) {
+      transform: translate(-50%, -50%) rotate(45deg);
+      animation-delay: 0.2s;
+    }
+
+    .lotus-petal:nth-child(3) {
+      transform: translate(-50%, -50%) rotate(90deg);
+      animation-delay: 0.4s;
+    }
+
+    .lotus-petal:nth-child(4) {
+      transform: translate(-50%, -50%) rotate(135deg);
+      animation-delay: 0.6s;
+    }
+
+    .lotus-petal:nth-child(5) {
+      transform: translate(-50%, -50%) rotate(180deg);
+      animation-delay: 0.8s;
+    }
+
+    .lotus-petal:nth-child(6) {
+      transform: translate(-50%, -50%) rotate(225deg);
+      animation-delay: 1.0s;
+    }
+
+    .lotus-petal:nth-child(7) {
+      transform: translate(-50%, -50%) rotate(270deg);
+      animation-delay: 1.2s;
+    }
+
+    .lotus-petal:nth-child(8) {
+      transform: translate(-50%, -50%) rotate(315deg);
+      animation-delay: 1.4s;
+    }
+
+    /* 花蕊 */
+    .lotus-core {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: radial-gradient(circle at 30% 30%,
+        #FEF9E7 0%,
+        #FCD34D 50%,
+        #F59E0B 100%
+      );
+      box-shadow: 
+        0 2px 8px rgba(245, 158, 11, 0.4),
+        inset 0 1px 4px rgba(255, 255, 255, 0.6);
+      animation: coreBreath 1.6s ease-in-out infinite;
+    }
+
+    @keyframes petalPulse {
+      0%, 100% {
+        opacity: 0.7;
+        transform: translate(-50%, -50%) rotate(var(--rotate, 0deg)) translateY(-5px);
+      }
+      50% {
+        opacity: 1;
+        transform: translate(-50%, -50%) rotate(var(--rotate, 0deg)) translateY(-8px);
+      }
+    }
+
+    @keyframes coreBreath {
+      0%, 100% {
+        transform: translate(-50%, -50%) scale(1);
+        box-shadow: 
+          0 2px 8px rgba(245, 158, 11, 0.4),
+          inset 0 1px 4px rgba(255, 255, 255, 0.6);
+      }
+      50% {
+        transform: translate(-50%, -50%) scale(1.1);
+        box-shadow: 
+          0 3px 12px rgba(245, 158, 11, 0.6),
+          inset 0 1px 6px rgba(255, 255, 255, 0.8);
+      }
+    }
+
+    /* 載入文字 */
+    .loading-text {
+      font-family: 'Playfair Display', Georgia, serif;
+      font-size: 1.5rem;
+      color: #2C2C2C;
+      letter-spacing: 0.05em;
+      margin-bottom: 0.5rem;
+      animation: textFade 1.6s ease-in-out infinite;
+    }
+
+    .loading-subtext {
+      font-size: 0.875rem;
+      color: rgba(0, 0, 0, 0.5);
+      letter-spacing: 0.1em;
+    }
+
+    @keyframes textFade {
+      0%, 100% { opacity: 0.6; }
+      50% { opacity: 1; }
+    }
   </style>
 </head>
-<body>
+<body class="page-entering">
+  <!-- 載入覆蓋層 -->
+  <div class="loading-overlay" id="loadingOverlay">
+    <div class="loading-lotus">
+      <div class="lotus-petal" style="--rotate: 0deg;"></div>
+      <div class="lotus-petal" style="--rotate: 45deg;"></div>
+      <div class="lotus-petal" style="--rotate: 90deg;"></div>
+      <div class="lotus-petal" style="--rotate: 135deg;"></div>
+      <div class="lotus-petal" style="--rotate: 180deg;"></div>
+      <div class="lotus-petal" style="--rotate: 225deg;"></div>
+      <div class="lotus-petal" style="--rotate: 270deg;"></div>
+      <div class="lotus-petal" style="--rotate: 315deg;"></div>
+      <div class="lotus-core"></div>
+    </div>
+    <div class="loading-text">Bloom Ware</div>
+    <div class="loading-subtext">正在進入...</div>
+  </div>
+
   <!-- 背景裝飾鬱金香 -->
   <div class="tulip-decoration top-left">
     <svg viewBox="0 0 180 240" fill="none" xmlns="http://www.w3.org/2000/svg" width="80" height="100">