src/app.tsx

@@ -7,7 +7,7 @@ import { i18nManager } from './i18n/manager';
 // Page components
 import Home from './pages/home';
 import History from './pages/history';
-import Create from './pages/create';
+import FriendsPhoto from './pages/friends-photo';
 import Result from './pages/result';
 
 // Bottom navigation component
@@ -20,7 +20,7 @@ function App() {
   const location = useLocation();
 
   // Pages that don't need to show bottom navigation
-  const hideBottomNavPages = ['/create', '/result'];
+  const hideBottomNavPages = ['/friends-photo', '/result'];
 
   useEffect(() => {
     const initApp = async () => {
@@ -58,11 +58,11 @@ function App() {
           <Route path="/" element={<Navigate to="/home" replace />} />
           <Route path="/home" element={<Home />} />
           <Route path="/history" element={<History />} />
-          <Route path="/create/:templateCode" element={<Create />} />
+          <Route path="/friends-photo" element={<FriendsPhoto />} />
           <Route path="/result" element={<Result />} />
         </Routes>
       </div>
-      {!hideBottomNavPages.some(path => location.pathname.startsWith(path)) && <BottomNavigation />}
+      {!hideBottomNavPages.includes(location.pathname) && <BottomNavigation />}
     </div>
   );
 }

src/pages/friends-photo/components/UploadCard/index.tsx

@@ -1,25 +1,23 @@
-import { authService } from '@/services/auth';
 import { useState } from 'react';
-import { useI18n } from '../../../../hooks/useI18n';
 import { bowongAI } from '../../../../sdk/bowongAISDK';
+import { useI18n } from '../../../../hooks/useI18n';
 import './index.css';
 
 interface UploadCardProps {
   imageUrl: string;
   title: string;
-  onLogin: () => void;
   onUploadSuccess: (imageUrl: string) => void;
   className?: string;
   disabled?: boolean;
 }
 
-export default function UploadCard({ imageUrl, title, onLogin, onUploadSuccess, className = '', disabled = false }: UploadCardProps) {
+export default function UploadCard({ imageUrl, title, onUploadSuccess, className = '', disabled = false }: UploadCardProps) {
   const [uploading, setUploading] = useState<boolean>(false);
   const { t } = useI18n();
 
   const handleUpload = async () => {
     if (disabled) {
-      onLogin();
+      alert('Please login first');
       return;
     }
 

src/pages/friends-photo/index.tsx

@@ -1,6 +1,6 @@
 import { Template } from '@/sdk/sdk-server';
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { useServerSdk } from '../../hooks/index';
 import { useI18n } from '../../hooks/useI18n';
 import { i18nManager } from '../../i18n/manager';
@@ -11,13 +11,12 @@ import UploadCard from './components/UploadCard';
 import './index.css';
 import { authService } from '@/services';
 
-export default function Create() {
+export default function FriendsPhoto() {
-  const { templateCode } = useParams();
+  const [searchParams] = useSearchParams();
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+  const templateCode = searchParams.get('templateCode');
   const [template, setTemplate] = useState<Template | null>(null);
 
-  const [loginRedirecting, setLoginRedirecting] = useState(false);
-
   useEffect(() => {
     const checkLogin = async () => {
       // Check login status, including OAuth 2.0 callback handling
@@ -51,17 +50,16 @@ export default function Create() {
   // 提交处理
   const handleSubmit = async () => {
     if (!isLoggedIn) {
-      setLoginRedirecting(true);
       setLoading(true);
-      await authService.login(window.location.pathname);
+      authService.login('/friends-photo');
       return;
     }
     if (!templateCode) {
-      alert('Template code not set');
+      alert(t('friendsPhoto.templateCodeNotSet'));
       return;
     }
     if (!image1 || !image2) {
-      alert('Upload two images');
+      alert(t('friendsPhoto.uploadTwoImages'));
       return;
     }
 
@@ -89,52 +87,36 @@ export default function Create() {
       // navigate(`/result?taskId=${taskId}&templateCode=${templateCode}`);
     } catch (error) {
       console.error('提交失败:', error);
-      alert('Wait for task completion');
+      alert(t('friendsPhoto.waitForTaskCompletion'));
     } finally {
       setLoading(false);
     }
   };
 
   // // If not authenticated, show login prompt
-
+  // if (isLoggedIn === false) {
-  if (loginRedirecting) {
+  //   return (
-    return (
+  //     <div className="app-loading">
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+  //       <div className="loading-container">
-        <div>Redirecting to login...</div>
+  //         <div className="loading-spinner"></div>
-      </div>
+  //         <div className="loading-text">Redirecting to login page...</div>
-    );
+  //       </div>
-  }
+  //     </div>
+  //   );
+  // }
 
   return (
     <div className="friends-photo">
       {/* 上传区域 */}
       <div className="upload-section">
-        <UploadCard
+        <UploadCard disabled={!isLoggedIn} imageUrl={image1} title={t('friendsPhoto.selectYourPhoto')} onUploadSuccess={setImage1} />
-          disabled={!isLoggedIn}
+        <UploadCard disabled={!isLoggedIn} imageUrl={image2} title={t('friendsPhoto.selectFriendPhoto')} onUploadSuccess={setImage2} />
-          imageUrl={image1}
-          title={t('friendsPhoto.selectYourPhoto')}
-          onUploadSuccess={setImage1}
-          onLogin={() => {
-            setLoginRedirecting(true);
-            authService.login(window.location.pathname);
-          }}
-        />
-        <UploadCard
-          disabled={!isLoggedIn}
-          imageUrl={image2}
-          title={t('friendsPhoto.selectFriendPhoto')}
-          onUploadSuccess={setImage2}
-          onLogin={() => {
-            setLoginRedirecting(true);
-            authService.login(window.location.pathname);
-          }}
-        />
       </div>
 
       {/* 固定底部按钮 */}
       <div className="submit-section">
         <button
-          className={`submit-button ${(!image1 || !image2 || loading) && isLoggedIn ? 'disabled' : ''}`}
+          className={`submit-button ${!image1 || !image2 || loading ? 'disabled' : ''}`}
           disabled={(!image1 || !image2 || loading) && isLoggedIn}
           onClick={handleSubmit}
         >

src/pages/history/index.tsx

@@ -15,8 +15,6 @@ export default function History() {
   const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null);
   const serverSdk = useServerSdk();
 
-  const [loginRedirecting, setLoginRedirecting] = useState(false);
-
   const checkLoginStatus = async () => {
     try {
       const loginStatus = await authService.checkLogin();
@@ -107,21 +105,12 @@ export default function History() {
 
   const handleLogin = async () => {
     try {
-      setLoginRedirecting(true);
       await authService.login('/history');
     } catch (error) {
       console.error('Login failed:', error);
     }
   };
 
-  if (loginRedirecting) {
-    return (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
-        <div>Redirecting to login...</div>
-      </div>
-    );
-  }
-
   return (
     <div className="history">
       {/* Settings area */}

src/pages/home/index.css

@@ -1,5 +1,6 @@
 .home {
   /* background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); */
+  background: #f5f6f8;
   height: 100vh;
   display: flex;
   flex-direction: column;

src/pages/home/index.tsx

@@ -38,7 +38,7 @@ export default function Home() {
   }, [dispatch]);
 
   const handleTemplateClick = async (template: Template) => {
-    navigate(`/create/${template.code}`);
+    navigate(`/friends-photo?templateCode=${template.code}`);
     return;
   };
 

src/services/auth.ts

@@ -46,14 +46,13 @@ export class AuthService {
   /**
    * 跳转到Google OAuth登录页面
    */
-  async login(redirectPath?: string): Promise<void> {
+  async login(redirectUrl?: string): Promise<void> {
     const { hostname, protocol, port } = window.location;
     let baseUrl = `${protocol}//${hostname}`;
     if (hostname === 'localhost') {
       baseUrl = `${protocol}//${hostname}:${port}`;
     }
-    const redirectUrl = `https://mixvideo-workflow.bowong.cc/auth/google/authorize?redirect_url=${baseUrl}${redirectPath || ''}`;
+    window.location.href = `https://mixvideo-workflow.bowong.cc/auth/google/authorize?redirect_url=${baseUrl}${redirectUrl || ''}`;
-    window.location.href = redirectUrl;
   }
 
   /**