update user/admin, update data import options

public/test_data.json

@@ -0,0 +1,112 @@
+[
+  {
+    "id": 29,
+    "start_time": "2026-03-10T19:27:26.313545",
+    "end_time": "2026-03-10T19:27:59.454192",
+    "duration_seconds": 33,
+    "focus_score": 0.8848484848484849,
+    "total_frames": 165,
+    "focused_frames": 146,
+    "created_at": "2026-03-10 19:27:26"
+  },
+  {
+    "id": 27,
+    "start_time": "2026-03-10T15:09:42.264889",
+    "end_time": "2026-03-10T15:09:52.066905",
+    "duration_seconds": 9,
+    "focus_score": 0.575,
+    "total_frames": 120,
+    "focused_frames": 69,
+    "created_at": "2026-03-10 15:09:42"
+  },
+  {
+    "id": 20,
+    "start_time": "2026-03-10T12:10:08.838619",
+    "end_time": "2026-03-10T12:10:22.613099",
+    "duration_seconds": 13,
+    "focus_score": 0.3076923076923077,
+    "total_frames": 65,
+    "focused_frames": 20,
+    "created_at": "2026-03-10 12:10:08"
+  },
+  {
+    "id": 19,
+    "start_time": "2026-03-10T12:10:04.664410",
+    "end_time": "2026-03-10T12:21:08.528749",
+    "duration_seconds": 663,
+    "focus_score": 1,
+    "total_frames": 19,
+    "focused_frames": 19,
+    "created_at": "2026-03-10 12:10:04"
+  },
+  {
+    "id": 15,
+    "start_time": "2026-03-10T12:03:07.498863",
+    "end_time": "2026-03-10T12:03:19.454642",
+    "duration_seconds": 11,
+    "focus_score": 0.896551724137931,
+    "total_frames": 58,
+    "focused_frames": 52,
+    "created_at": "2026-03-10 12:03:07"
+  },
+  {
+    "id": 13,
+    "start_time": "2026-03-10T12:02:40.121044",
+    "end_time": "2026-03-10T12:03:03.700510",
+    "duration_seconds": 23,
+    "focus_score": 0.6923076923076923,
+    "total_frames": 117,
+    "focused_frames": 81,
+    "created_at": "2026-03-10 12:02:40"
+  },
+  {
+    "id": 12,
+    "start_time": "2026-03-10T12:02:36.741156",
+    "end_time": "2026-03-10T12:05:59.301680",
+    "duration_seconds": 202,
+    "focus_score": 0.13333333333333333,
+    "total_frames": 15,
+    "focused_frames": 2,
+    "created_at": "2026-03-10 12:02:36"
+  },
+  {
+    "id": 8,
+    "start_time": "2026-03-10T11:35:26.680264",
+    "end_time": "2026-03-10T11:36:07.574547",
+    "duration_seconds": 40,
+    "focus_score": 0.6225490196078431,
+    "total_frames": 204,
+    "focused_frames": 127,
+    "created_at": "2026-03-10 11:35:26"
+  },
+  {
+    "id": 7,
+    "start_time": "2026-03-10T11:35:16.587504",
+    "end_time": "2026-03-10T12:17:35.889266",
+    "duration_seconds": 2539,
+    "focus_score": 0.9387755102040817,
+    "total_frames": 49,
+    "focused_frames": 46,
+    "created_at": "2026-03-10 11:35:16"
+  },
+  {
+    "id": 4,
+    "start_time": "2026-03-10T11:16:31.204287",
+    "end_time": "2026-03-10T11:16:52.632759",
+    "duration_seconds": 21,
+    "focus_score": 0.75,
+    "total_frames": 104,
+    "focused_frames": 78,
+    "created_at": "2026-03-10 11:16:31"
+  },
+  {
+    "id": 2,
+    "start_time": "2026-03-10T11:15:37.543154",
+    "end_time": "2026-03-10T11:17:41.674593",
+    "duration_seconds": 124,
+    "focus_score": 0.9557522123893806,
+    "total_frames": 113,
+    "focused_frames": 108,
+    "created_at": "2026-03-10 11:15:37"
+  }
+]

src/App.css

@@ -797,3 +797,58 @@ details p {
     from { opacity: 0; transform: scale(0.95); }
     to { opacity: 1; transform: scale(1); }
 }
+
+/* ================= 迎宾弹窗样式 ================= */
+.welcome-modal-overlay {
+position: fixed;
+top: 0; left: 0; right: 0; bottom: 0;
+background-color: rgba(0, 0, 0, 0.7);
+display: flex;
+justify-content: center;
+align-items: center;
+z-index: 9999;
+}
+
+.welcome-modal {
+background-color: #1e1e24;
+padding: 40px;
+border-radius: 15px;
+text-align: center;
+box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+border: 1px solid #333;
+}
+
+.welcome-modal h2 { margin-top: 0; color: #fff; }
+.welcome-modal p { margin-bottom: 30px; color: #ccc; }
+.welcome-buttons { display: flex; gap: 20px; justify-content: center; }
+
+/* ================= 左上角头像样式 (修改版) ================= */
+#top-menu {
+position: relative;
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+.avatar-container {
+position: absolute;
+left: 20px;
+cursor: pointer;
+}
+
+.avatar-circle {
+width: 40px;
+height: 40px;
+border-radius: 50%;
+display: flex;
+justify-content: center;
+align-items: center;
+font-weight: bold;
+font-size: 1.2rem;
+color: white;
+transition: all 0.3s ease;
+border: 2px solid transparent;
+}
+
+.avatar-circle.user { background-color: #555; }
+.avatar-circle.admin { background-color: #ffaa00; border-color: #fff; box-shadow: 0 0 10px rgba(255, 170, 0, 0.5); }

src/App.jsx

@@ -2,8 +2,6 @@ import React, { useState, useRef, useEffect } from 'react';
 import './App.css';
 import { VideoManagerLocal } from './utils/VideoManagerLocal';
 
-// 引入我们刚刚拆分好的组件
-// 注意：确保你的文件名和这里 import 的名字完全一致
 import Home from './components/Home';
 import FocusPageLocal from './components/FocusPageLocal';
 import Achievement from './components/Achievement';
@@ -12,108 +10,195 @@ import Customise from './components/Customise';
 import Help from './components/Help';
 
 function App() {
-  // 定义状态：当前显示哪个页面
-  const [activeTab, setActiveTab] = useState('home');
-
-  // 全局VideoManagerLocal实例和session状态
-  const videoManagerRef = useRef(null);
-  const [isSessionActive, setIsSessionActive] = useState(false);
-  const [sessionResult, setSessionResult] = useState(null);
-
-  // 初始化VideoManagerLocal（只创建一次）
-  useEffect(() => {
-    const callbacks = {
-      onSessionStart: () => {
-        setIsSessionActive(true);
-        setSessionResult(null);
-      },
-      onSessionEnd: (summary) => {
-        console.log("App.jsx: onSessionEnd called");
-        console.log("App.jsx: Session Summary:", summary);
-        setIsSessionActive(false);
-        if (summary) {
-          console.log("App.jsx: Setting sessionResult with summary");
-          setSessionResult(summary);
-        } else {
-          console.warn("App.jsx: Summary is null or undefined");
-        }
-      }
-    };
-
-    videoManagerRef.current = new VideoManagerLocal(callbacks);
-
-    // 清理函数：只在整个App卸载时才清理
-    return () => {
-      if (videoManagerRef.current) {
-        videoManagerRef.current.stopStreaming();
-      }
-    };
-  }, []);
-
-  // 页面切换时保持session连接，不自动断开
-
-  return (
-    <div className="app-container">
-      {/* 顶部导航栏 (Top Menu) - 它是全局共用的，所以留在 App.jsx 里 */}
-      <nav id="top-menu">
-        <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 页：我们需要把 setActiveTab 传给它，因为它的 'Start' 按钮要能跳转页面 */}
-      {activeTab === 'home' && <Home setActiveTab={setActiveTab} />}
-
-      {/* FocusPageLocal 保持常驻，避免切页中断视频/连接 - 使用本地处理，不依赖WebRTC */}
-      <FocusPageLocal
-        videoManager={videoManagerRef.current}
-        sessionResult={sessionResult}
-        setSessionResult={setSessionResult}
-        isActive={activeTab === 'focus'}
-      />
-      {activeTab === 'achievement' && <Achievement />}
-      {activeTab === 'records' && <Records />}
-      {activeTab === 'customise' && <Customise />}
-      {activeTab === 'help' && <Help />}
+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>
+        </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>
     </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;
+export default App;

src/components/Customise.jsx

@@ -57,6 +57,9 @@ function Customise() {
       
       // 创建 JSON Blob
       const jsonString = JSON.stringify(data, null, 2);
+      // 在浏览器缓存里存一份
+      localStorage.setItem('focus_magic_backup', jsonString);
+
       const blob = new Blob([jsonString], { type: 'application/json' });
       
       // 创建临时下载链接
@@ -142,7 +145,7 @@ function Customise() {
 
   return (
     <main id="page-e" className="page">
-      <h1 className="page-title">Customise</h1>
+      <h1 className="page-title">Customise</h1>
 
       <div className="settings-container">
         {/* Detection Settings */}
@@ -217,4 +220,4 @@ function Customise() {
   );
 }
 
-export default Customise;
+export default Customise;