Merge UI Manually (expect main)

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,93 @@ 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); }
+/* ================= 首页按钮 2x2 响应式网格 (终极修正版) ================= */
+.home-button-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr; /* 强行平分两列，绝不妥协 */
+  gap: 20px; /* 按钮之间的间距 */
+  width: 100%;
+  max-width: 500px; /* 限制最大宽度，宽屏下也不会显得傻大黑粗 */
+  margin: 40px auto 0 auto; /* 上边距40px，左右auto保证绝对居中！ */
+}
+
+.home-button-grid .btn-main {
+  width: 100%;
+  height: 60px; /* 统一高度，像一块块整齐的砖头 */
+  margin: 0; /* 清除默认外边距 */
+  padding: 10px;
+  font-size: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  box-sizing: border-box; /* 保证边框和内边距不会撑破格子 */
+}
+
+/* 📱 手机端专属适配 (屏幕宽度小于 600px 时自动缩放) */
+@media (max-width: 600px) {
+  .home-button-grid {
+    gap: 15px; 
+    max-width: 90%; 
+  }
+  
+  .home-button-grid .btn-main {
+    height: 50px;
+    font-size: 0.85rem; 
+  }
+}

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,96 +10,75 @@ 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);
+  const [role, setRole] = useState('user'); 
 
-  // 初始化VideoManagerLocal（只创建一次）
+  // 刚进网页时，静默清空数据库，不弹窗！
   useEffect(() => {
+    fetch('/api/history', { method: 'DELETE' }).catch(err => console.error(err));
+
     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");
-        }
+        if (summary) setSessionResult(summary);
       }
     };
-
     videoManagerRef.current = new VideoManagerLocal(callbacks);
 
-    // 清理函数：只在整个App卸载时才清理
     return () => {
-      if (videoManagerRef.current) {
-        videoManagerRef.current.stopStreaming();
-      }
+      if (videoManagerRef.current) videoManagerRef.current.stopStreaming();
     };
   }, []);
 
-  // 页面切换时保持session连接，不自动断开
+  // 点击头像，直接跳转到首页(Home)
+  const handleAvatarClick = () => {
+    setActiveTab('home');
+  };
 
   return (
     <div className="app-container">
-      {/* 顶部导航栏 (Top Menu) - 它是全局共用的，所以留在 App.jsx 里 */}
       <nav id="top-menu">
-        <button
-          className={`menu-btn ${activeTab === 'focus' ? 'active' : ''}`}
-          onClick={() => setActiveTab('focus')}
-        >
+        <div className="avatar-container" onClick={handleAvatarClick} title="Back to Home">
+          <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')}
-        >
+        <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')}
-        >
+        <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')}
-        >
+        <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')}
-        >
+        <button className={`menu-btn ${activeTab === 'help' ? 'active' : ''}`} onClick={() => setActiveTab('help')}>
           Help
         </button>
       </nav>
 
-      {/* 页面内容区域：根据 activeTab 的值，渲染对应的组件 */}
-
-      {/* Home 页：我们需要把 setActiveTab 传给它，因为它的 'Start' 按钮要能跳转页面 */}
-      {activeTab === 'home' && <Home setActiveTab={setActiveTab} />}
-
-      {/* FocusPageLocal 保持常驻，避免切页中断视频/连接 - 使用本地处理，不依赖WebRTC */}
+      {/* 把核心状态传给 Home 组件 */}
+      {activeTab === 'home' && <Home setActiveTab={setActiveTab} role={role} setRole={setRole} />}
+      
       <FocusPageLocal
         videoManager={videoManagerRef.current}
         sessionResult={sessionResult}
@@ -116,4 +93,4 @@ function App() {
   );
 }
 
-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' });
       
       // 创建临时下载链接

src/components/Home.jsx

@@ -1,20 +1,124 @@
-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 === "123") {
+        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>
+      {/* 🔪 把隐藏的上传框放在网格外面，绝对不让它占格子！ */}
+      <input type="file" ref={fileInputRef} style={{ display: 'none' }} accept=".json" onChange={handleFileChange} />
+
+      {/* 使用全新的 2x2 网格容器，里面只放 4 个纯净的按钮 */}
+      <div className="home-button-grid">
+        
+        <button className="btn-main" onClick={handleNewStart}>
+          Start Focus
+        </button>
+
+        <button className="btn-main" onClick={handleAutoImport}>
+          Auto Import History
+        </button>
+
+        <button className="btn-main" onClick={() => fileInputRef.current.click()}>
+          Manual Import History
+        </button>
+
+        <button className="btn-main" onClick={handleAdminToggle}>
+          {role === 'admin' ? 'Switch to User Mode' : 'Admin Login'}
+        </button>
+        
+      </div>
     </main>
   );
 }