update home.jsx app.jsx main.py

main.py

@@ -579,23 +579,23 @@ async def health_check():
 
 # ================ STATIC FILES (SPA SUPPORT) ================
 
-# 1. Mount the assets folder (JS/CSS built by Vite/React)
-if os.path.exists("static/assets"):
-    app.mount("/assets", StaticFiles(directory="static/assets"), name="assets")
+FRONTEND_DIR = "dist" if os.path.exists("dist/index.html") else "static"
+
+assets_path = os.path.join(FRONTEND_DIR, "assets")
+if os.path.exists(assets_path):
+    app.mount("/assets", StaticFiles(directory=assets_path), name="assets")
 
-# 2. Catch-all route for SPA (React Router)
-# This ensures that if you refresh /customise, it serves index.html instead of 404
 @app.get("/{full_path:path}")
 async def serve_react_app(full_path: str, request: Request):
-    # Skip API and WS routes
     if full_path.startswith("api") or full_path.startswith("ws"):
         raise HTTPException(status_code=404, detail="Not Found")
     
     file_path = os.path.join(FRONTEND_DIR, full_path)
     if os.path.isfile(file_path):
         return FileResponse(file_path)
+    
     index_path = os.path.join(FRONTEND_DIR, "index.html")
     if os.path.exists(index_path):
         return FileResponse(index_path)
     else:
-        return {"message": f"React app not found. Please run 'npm run build'."}
+        return {"message": "React app not found. Please run npm run build."}

src/App.jsx

@@ -10,195 +10,87 @@ import Customise from './components/Customise';
 import Help from './components/Help';
 
 function App() {
-const [activeTab, setActiveTab] = useState('home');
-const videoManagerRef = useRef(null);
-const [isSessionActive, setIsSessionActive] = useState(false);
-const [sessionResult, setSessionResult] = useState(null);
-
-// 新增状态：控制身份和弹窗
-const [role, setRole] = useState('user');
-const [showWelcomePopup, setShowWelcomePopup] = useState(false);
-const handleAutoImport = async () => {
-const backup = localStorage.getItem('focus_magic_backup');
-if (backup) {
-try {
-const sessions = JSON.parse(backup);
-const response = await fetch('/api/import', {
-method: 'POST',
-headers: { 'Content-Type': 'application/json' },
-body: JSON.stringify(sessions)
-});
-if (response.ok) {
-alert("Auto-recovery successful! Data restored from local cache.");
-setShowWelcomePopup(false);
-} else {
-alert("Auto-recovery failed on server.");
-}
-} catch (err) {
-alert("Error reading cache: " + err.message);
-}
-} else {
-alert("No previous automatic backup found. Please use 'Manual Import' to select your downloaded JSON file.");
-}
-};
-const fileInputRef = useRef(null);
-
-// 刚进网页时的初始化逻辑：先清空，后弹窗
-useEffect(() => {
-fetch('/api/history', { method: 'DELETE' })
-.then(() => {
-console.log("History cleared for new user.");
-setShowWelcomePopup(true);
-})
-.catch(err => console.error("Failed to clear history on load", err));
-
-const callbacks = {
-  onSessionStart: () => {
-    setIsSessionActive(true);
-    setSessionResult(null);
-  },
-  onSessionEnd: (summary) => {
-    setIsSessionActive(false);
-    if (summary) setSessionResult(summary);
-  }
-};
-videoManagerRef.current = new VideoManagerLocal(callbacks);
-
-return () => {
-  if (videoManagerRef.current) videoManagerRef.current.stopStreaming();
-};
-}, []);
-
-// 手动导入文件的处理逻辑 (借用 Customise 的逻辑)
-const handleFileChange = async (event) => {
-const file = event.target.files[0];
-if (!file) return;
-const reader = new FileReader();
-reader.onload = async (e) => {
-try {
-const sessions = JSON.parse(e.target.result);
-const response = await fetch('/api/import', {
-method: 'POST',
-headers: { 'Content-Type': 'application/json' },
-body: JSON.stringify(sessions)
-});
-if (response.ok) {
-alert("Import successful! You can check your records now.");
-setShowWelcomePopup(false);
-} else {
-alert("Import failed on server side.");
-}
-} catch (err) {
-alert("Error parsing file: " + err.message);
-}
-event.target.value = '';
-};
-reader.readAsText(file);
-};
-
-// 点击左上角头像切换 Admin/User
-const handleAvatarClick = async () => {
-if (role === 'admin') {
-if (window.confirm("Switch back to User mode? This will clear current test data.")) {
-await fetch('/api/history', { method: 'DELETE' });
-setRole('user');
-setShowWelcomePopup(true);
-}
-} else {
-const pwd = window.prompt("Enter Admin Password:");
-if (pwd === "123") { // 这里是你设定的测试密码
-try {
-// 1. 先清空当前数据
-await fetch('/api/history', { method: 'DELETE' });
-// 2. 读取 public 目录下的测试文件
-const res = await fetch('/test_data.json');
-if (!res.ok) throw new Error("test_data.json not found in public folder");
-const testData = await res.json();
-// 3. 导入测试数据
-const importRes = await fetch('/api/import', {
-method: 'POST',
-headers: { 'Content-Type': 'application/json' },
-body: JSON.stringify(testData)
-});
-if (importRes.ok) {
-setRole('admin');
-alert("Admin mode activated! Test data loaded successfully.");
-}
-} catch (error) {
-alert("Admin login failed: " + error.message);
-}
-} else if (pwd !== null) {
-alert("Incorrect password!");
-}
-}
-};
-
-return (
-<div className="app-container">
-
-  {/* 迎宾弹窗 */}
-  {showWelcomePopup && (
-    <div className="welcome-modal-overlay">
-      <div className="welcome-modal">
-        <h2>Welcome to FocusGuard!</h2>
-        <p>Would you like to start fresh or import your previous local records?</p>
-        <div className="welcome-buttons">
-          <button className="btn-main" onClick={() => setShowWelcomePopup(false)}>New Start</button>
-          <button className="btn-main" style={{backgroundColor: '#4CAF50'}} onClick={handleAutoImport}>Auto Import</button>
-          <button className="btn-main yellow" onClick={() => fileInputRef.current.click()}>Manual Import</button>
+  const [activeTab, setActiveTab] = useState('home');
+  const videoManagerRef = useRef(null);
+  const [isSessionActive, setIsSessionActive] = useState(false);
+  const [sessionResult, setSessionResult] = useState(null);
+  const [role, setRole] = useState('user'); 
+
+  // 刚进网页时，静默清空数据库，不弹窗！
+  useEffect(() => {
+    fetch('/api/history', { method: 'DELETE' }).catch(err => console.error(err));
+
+    const callbacks = {
+      onSessionStart: () => {
+        setIsSessionActive(true);
+        setSessionResult(null);
+      },
+      onSessionEnd: (summary) => {
+        setIsSessionActive(false);
+        if (summary) setSessionResult(summary);
+      }
+    };
+    videoManagerRef.current = new VideoManagerLocal(callbacks);
+
+    return () => {
+      if (videoManagerRef.current) videoManagerRef.current.stopStreaming();
+    };
+  }, []);
+
+  // 点击头像，直接跳转到首页(Home)
+  const handleAvatarClick = () => {
+    setActiveTab('home');
+  };
+
+  return (
+    <div className="app-container">
+      <nav id="top-menu">
+        <div className="avatar-container" onClick={handleAvatarClick} title="Back to Home">
+          <div className={`avatar-circle ${role}`}>
+            {role === 'admin' ? 'A' : 'U'}
+          </div>
         </div>
-        {/* 隐藏的上传框 */}
-        <input type="file" ref={fileInputRef} style={{ display: 'none' }} accept=".json" onChange={handleFileChange} />
-      </div>
-    </div>
-  )}
 
-  <nav id="top-menu">
-    {/* 左上角头像区域 */}
-    <div className="avatar-container" onClick={handleAvatarClick} title="Click to switch User/Admin">
-      <div className={`avatar-circle ${role}`}>
-        {role === 'admin' ? 'A' : 'U'}
-      </div>
+        <button className={`menu-btn ${activeTab === 'focus' ? 'active' : ''}`} onClick={() => setActiveTab('focus')}>
+          Start Focus {isSessionActive && <span style={{marginLeft: '8px', color: '#00FF00'}}>●</span>}
+        </button>
+        <div className="separator"></div>
+
+        <button className={`menu-btn ${activeTab === 'achievement' ? 'active' : ''}`} onClick={() => setActiveTab('achievement')}>
+          My Achievement
+        </button>
+        <div className="separator"></div>
+
+        <button className={`menu-btn ${activeTab === 'records' ? 'active' : ''}`} onClick={() => setActiveTab('records')}>
+          My Records
+        </button>
+        <div className="separator"></div>
+
+        <button className={`menu-btn ${activeTab === 'customise' ? 'active' : ''}`} onClick={() => setActiveTab('customise')}>
+          Customise
+        </button>
+        <div className="separator"></div>
+
+        <button className={`menu-btn ${activeTab === 'help' ? 'active' : ''}`} onClick={() => setActiveTab('help')}>
+          Help
+        </button>
+      </nav>
+
+      {/* 把核心状态传给 Home 组件 */}
+      {activeTab === 'home' && <Home setActiveTab={setActiveTab} role={role} setRole={setRole} />}
+      
+      <FocusPageLocal
+        videoManager={videoManagerRef.current}
+        sessionResult={sessionResult}
+        setSessionResult={setSessionResult}
+        isActive={activeTab === 'focus'}
+      />
+      {activeTab === 'achievement' && <Achievement />}
+      {activeTab === 'records' && <Records />}
+      {activeTab === 'customise' && <Customise />}
+      {activeTab === 'help' && <Help />}
     </div>
-
-    <button className={`menu-btn ${activeTab === 'focus' ? 'active' : ''}`} onClick={() => setActiveTab('focus')}>
-      Start Focus {isSessionActive && <span style={{marginLeft: '8px', color: '#00FF00'}}>●</span>}
-    </button>
-    <div className="separator"></div>
-
-    <button className={`menu-btn ${activeTab === 'achievement' ? 'active' : ''}`} onClick={() => setActiveTab('achievement')}>
-      My Achievement
-    </button>
-    <div className="separator"></div>
-
-    <button className={`menu-btn ${activeTab === 'records' ? 'active' : ''}`} onClick={() => setActiveTab('records')}>
-      My Records
-    </button>
-    <div className="separator"></div>
-
-    <button className={`menu-btn ${activeTab === 'customise' ? 'active' : ''}`} onClick={() => setActiveTab('customise')}>
-      Customise
-    </button>
-    <div className="separator"></div>
-
-    <button className={`menu-btn ${activeTab === 'help' ? 'active' : ''}`} onClick={() => setActiveTab('help')}>
-      Help
-    </button>
-  </nav>
-
-  {activeTab === 'home' && <Home setActiveTab={setActiveTab} />}
-  <FocusPageLocal
-    videoManager={videoManagerRef.current}
-    sessionResult={sessionResult}
-    setSessionResult={setSessionResult}
-    isActive={activeTab === 'focus'}
-  />
-  {activeTab === 'achievement' && <Achievement />}
-  {activeTab === 'records' && <Records />}
-  {activeTab === 'customise' && <Customise />}
-  {activeTab === 'help' && <Help />}
-</div>
-);
+  );
 }
 
 export default App;

src/components/Home.jsx

@@ -1,20 +1,122 @@
-import React from 'react';
+import React, { useRef } from 'react';
+
+function Home({ setActiveTab, role, setRole }) {
+  const fileInputRef = useRef(null);
+
+  // 1. 开始新生活
+  const handleNewStart = async () => {
+    await fetch('/api/history', { method: 'DELETE' });
+    setActiveTab('focus');
+  };
+
+  // 2. 自动导入 (使用缓存魔术)
+  const handleAutoImport = async () => {
+    const backup = localStorage.getItem('focus_magic_backup');
+    if (backup) {
+      try {
+        const sessions = JSON.parse(backup);
+        const response = await fetch('/api/import', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(sessions)
+        });
+        if (response.ok) {
+          alert("Auto-recovery successful!");
+        } else {
+          alert("Auto-recovery failed.");
+        }
+      } catch (err) {
+        alert("Error: " + err.message);
+      }
+    } else {
+      alert("No previous backup found. Please use Manual Import.");
+    }
+  };
+
+  // 3. 手动导入
+  const handleFileChange = async (event) => {
+    const file = event.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      try {
+        const sessions = JSON.parse(e.target.result);
+        const response = await fetch('/api/import', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(sessions)
+        });
+        if (response.ok) {
+          alert("Import successful!");
+        }
+      } catch (err) {
+        alert("Error: " + err.message);
+      }
+      event.target.value = '';
+    };
+    reader.readAsText(file);
+  };
+
+  // 4. 切换 Admin/User 模式
+  const handleAdminToggle = async () => {
+    if (role === 'admin') {
+      if (window.confirm("Switch back to User mode? Current data will be cleared.")) {
+        await fetch('/api/history', { method: 'DELETE' });
+        setRole('user');
+        alert("Switched to User mode.");
+      }
+    } else {
+      const pwd = window.prompt("Enter Admin Password:");
+      if (pwd === "admin123") {
+        try {
+          await fetch('/api/history', { method: 'DELETE' });
+          const res = await fetch('/test_data.json');
+          if (!res.ok) throw new Error("test_data.json not found");
+          const testData = await res.json();
+          const importRes = await fetch('/api/import', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(testData)
+          });
+          if (importRes.ok) {
+            setRole('admin');
+            alert("Admin mode activated!");
+          }
+        } catch (error) {
+          alert("Admin login failed: " + error.message);
+        }
+      } else if (pwd !== null) {
+        alert("Incorrect password!");
+      }
+    }
+  };
 
-// receive setActiveTab to change page
-function Home({ setActiveTab }) {
   return (
     <main id="page-a" className="page">
       <h1>FocusGuard</h1>
       <p>Your productivity monitor assistant.</p>
 
-      {/* click button change to 'focus' page */}
-      <button
-        id="start-button"
-        className="btn-main"
-        onClick={() => setActiveTab('focus')}
-      >
-        Start
-      </button>
+      {/* 选项按钮组，全部采用和谐的蓝色按钮 (btn-main) */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '15px', alignItems: 'center', marginTop: '30px' }}>
+        
+        <button className="btn-main" onClick={handleNewStart} style={{ width: '250px' }}>
+          Start Focus
+        </button>
+
+        <button className="btn-main" onClick={handleAutoImport} style={{ width: '250px' }}>
+          Auto Import History
+        </button>
+
+        <button className="btn-main" onClick={() => fileInputRef.current.click()} style={{ width: '250px' }}>
+          Manual Import History
+        </button>
+        <input type="file" ref={fileInputRef} style={{ display: 'none' }} accept=".json" onChange={handleFileChange} />
+
+        <button className="btn-main" onClick={handleAdminToggle} style={{ width: '250px' }}>
+          {role === 'admin' ? 'Switch to User Mode' : 'Admin Login'}
+        </button>
+        
+      </div>
     </main>
   );
 }