Upload 65 files

App.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect, useRef } from 'react';
 import { Sidebar } from './components/Sidebar';
 import { Header } from './components/Header';
@@ -28,14 +27,10 @@ const lazyLoad = (importFn: () => Promise<any>, name: string) => {
 
     useEffect(() => {
         mountedRef.current = true;
-        // If already loaded in a previous mount (browser cache), this resolves quickly
-        // We log to debug
-        console.log(`[App] 🟢 Fetching: ${name}`);
         
         importFn()
             .then(module => {
                 if (!mountedRef.current) return;
-                console.log(`[App] ✅ Resolved: ${name}`);
                 // Support both named export (priority) and default export
                 const Comp = module[name] || module.default;
                 if (Comp) {
@@ -47,11 +42,11 @@ const lazyLoad = (importFn: () => Promise<any>, name: string) => {
             })
             .catch(err => {
                 if (!mountedRef.current) return;
-                console.error(`[App] ❌ Error loading ${name}:`, err);
+                console.error(`Error loading page ${name}:`, err);
                 setError(err);
                 // Retry logic for chunks could go here, but usually reload is best
                 if (err.message && (err.message.includes('fetch') || err.message.includes('chunk'))) {
-                     console.warn('[App] Chunk load error, suggesting reload.');
+                     console.warn('Chunk load error, suggesting reload.');
                 }
             });
 
@@ -225,7 +220,6 @@ const AppContent: React.FC = () => {
         <Header user={currentUser!} title={viewTitles[currentView] || '智慧校园'} onMenuClick={() => setSidebarOpen(true)}/>
         <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 p-4 md:p-6 w-full">
           <div className="max-w-7xl mx-auto w-full h-full">
-            {/* Suspense is removed because lazyLoad now handles loading state internally */}
             {renderContent()}
           </div>
         </main>
@@ -243,4 +237,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default App;

components/Sidebar.tsx

@@ -1,5 +1,5 @@
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { LayoutDashboard, Users, BookOpen, GraduationCap, Settings, LogOut, FileText, School, UserCog, Palette, X, Building, Gamepad2, CalendarCheck, UserCircle, MessageSquare, Bot, ArrowUp, ArrowDown, Save, UserCheck } from 'lucide-react';
 import { UserRole } from '../types';
 import { api } from '../services/api';
@@ -20,17 +20,11 @@ interface MenuItem {
   roles: UserRole[];
 }
 
-export const Sidebar: React.FC<SidebarProps> = ({ currentView, onChangeView, userRole, onLogout, isOpen, onClose }) => {
-  const currentUser = api.auth.getCurrentUser();
-  const canSeeAI = userRole === UserRole.ADMIN || (userRole === UserRole.TEACHER && currentUser?.aiAccess);
-  const isHomeroom = userRole === UserRole.TEACHER && !!currentUser?.homeroomClass;
-
-  // Default Items Definition
-  // We define this inside render or memoize it, but it needs to react to isHomeroom
-  const defaultItems: MenuItem[] = [
+// Define static items outside component to prevent recreation
+const STATIC_MENU_ITEMS: MenuItem[] = [
     { id: 'dashboard', label: '工作台', icon: LayoutDashboard, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER, UserRole.STUDENT] },
-    { id: 'my-class', label: '我的班级', icon: UserCheck, roles: isHomeroom ? [UserRole.TEACHER] : [] }, 
-    { id: 'ai-assistant', label: 'AI 智能助教', icon: Bot, roles: canSeeAI ? [UserRole.ADMIN, UserRole.TEACHER] : [] }, 
+    { id: 'my-class', label: '我的班级', icon: UserCheck, roles: [UserRole.TEACHER] }, 
+    { id: 'ai-assistant', label: 'AI 智能助教', icon: Bot, roles: [UserRole.ADMIN, UserRole.TEACHER] }, 
     { id: 'attendance', label: '考勤管理', icon: CalendarCheck, roles: [UserRole.TEACHER, UserRole.PRINCIPAL] }, 
     { id: 'games', label: '互动教学', icon: Gamepad2, roles: [UserRole.TEACHER, UserRole.STUDENT] }, 
     { id: 'wishes', label: '心愿与反馈', icon: MessageSquare, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER, UserRole.STUDENT] }, 
@@ -44,31 +38,37 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView, onChangeView, use
     { id: 'users', label: '用户管理', icon: UserCog, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER] }, 
     { id: 'profile', label: '个人中心', icon: UserCircle, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER, UserRole.STUDENT] },
     { id: 'settings', label: '系统设置', icon: Settings, roles: [UserRole.ADMIN, UserRole.PRINCIPAL] },
-  ];
+];
+
+export const Sidebar: React.FC<SidebarProps> = ({ currentView, onChangeView, userRole, onLogout, isOpen, onClose }) => {
+  const currentUser = api.auth.getCurrentUser();
+  const canSeeAI = userRole === UserRole.ADMIN || (userRole === UserRole.TEACHER && currentUser?.aiAccess);
+  const isHomeroom = userRole === UserRole.TEACHER && !!currentUser?.homeroomClass;
 
-  const [menuItems, setMenuItems] = useState<MenuItem[]>(defaultItems);
+  const [menuItems, setMenuItems] = useState<MenuItem[]>(STATIC_MENU_ITEMS);
   const [isEditing, setIsEditing] = useState(false);
 
-  // Sync menu items when currentUser (and thus isHomeroom/permissions) changes
+  // Memoize logic to avoid recalculation loops
   useEffect(() => {
       let ordered: MenuItem[] = [];
-      
-      if (currentUser?.menuOrder && currentUser.menuOrder.length > 0) {
-          const map = new Map(defaultItems.map(i => [i.id, i]));
+      const userOrder = currentUser?.menuOrder || [];
+
+      if (userOrder.length > 0) {
+          const map = new Map(STATIC_MENU_ITEMS.map(i => [i.id, i]));
           // Add saved items in order
-          currentUser.menuOrder.forEach(id => {
+          userOrder.forEach(id => {
               if (map.has(id)) {
                   ordered.push(map.get(id)!);
                   map.delete(id);
               }
           });
-          // Append any new/remaining items (crucial for new features like 'my-class')
+          // Append remaining items
           map.forEach(item => ordered.push(item));
       } else {
-          ordered = defaultItems;
+          ordered = [...STATIC_MENU_ITEMS];
       }
       setMenuItems(ordered);
-  }, [currentUser?.menuOrder, isHomeroom, canSeeAI]); // Re-run if order, homeroom status, or AI access changes
+  }, [currentUser?.menuOrder]); // Only re-run if the order specifically changes
 
   const handleMove = (index: number, direction: -1 | 1) => {
       const newItems = [...menuItems];
@@ -84,10 +84,8 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView, onChangeView, use
       if (currentUser && currentUser._id) {
           try {
               await api.users.saveMenuOrder(currentUser._id, orderIds);
-              // Update local user object
               const updatedUser = { ...currentUser, menuOrder: orderIds };
               localStorage.setItem('user', JSON.stringify(updatedUser));
-              // Force update logic (though App.tsx usually handles user state, this helps local consistency)
           } catch(e) { console.error("Failed to save menu order"); }
       }
   };
@@ -125,11 +123,9 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView, onChangeView, use
           </div>
           <nav className="space-y-1 px-2">
             {menuItems.map((item, idx) => {
-              // Filtering Logic
               if (item.roles.length > 0 && !item.roles.includes(userRole)) return null;
-              
-              // Special feature toggles
               if (item.id === 'ai-assistant' && !canSeeAI) return null;
+              // Specific check for homeroom class feature
               if (item.id === 'my-class' && !isHomeroom) return null;
               
               const Icon = item.icon;

index.html

@@ -2,7 +2,10 @@
 <html lang="zh-CN">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <meta name="theme-color" content="#2563eb" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <title>智慧校园管理系统</title>
     <style>
       /* Critical CSS for immediate loading state */
@@ -34,7 +37,8 @@
     "xlsx": "https://aistudiocdn.com/xlsx@^0.18.5",
     "@google/genai": "https://esm.sh/@google/genai@^1.33.0",
     "react-markdown": "https://esm.sh/react-markdown@^10.1.0",
-    "remark-gfm": "https://esm.sh/remark-gfm@^4.0.1"
+    "remark-gfm": "https://esm.sh/remark-gfm@^4.0.1",
+    "vite-plugin-pwa": "https://esm.sh/vite-plugin-pwa@^1.2.0"
   }
 }
 </script>

metadata.json

@@ -1,5 +1,5 @@
 {
-  "name": "（AI）智慧校园管理系统",
+  "name": "（PWA）（AI）智慧校园管理系统",
   "description": "一个综合性的学生管理系统仪表板，具有基于角色的访问控制、学生档案、课程管理和绩效分析功能。",
   "requestFramePermissions": []
 }

package.json

@@ -1,4 +1,3 @@
-
 {
   "name": "smart-school-system",
   "version": "1.0.0",
@@ -36,6 +35,7 @@
     "postcss": "^8.4.32",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vite-plugin-pwa": "^0.21.1"
   }
-}
+}

pages/MyClass.tsx

@@ -67,14 +67,11 @@ export const MyClass: React.FC = () => {
                 setMyClassInfo(cls);
                 if (cls.seatingConfig) {
                     setRows(cls.seatingConfig.rows || 6);
-                    // Determine visual cols based on data. Default assumption 2 per desk if not saved metadata
-                    // Since backend only stores total cols, we try to infer or default. 
-                    // To keep it simple, we default deskCols based on total cols / 2, but let user adjust.
                     const savedTotalCols = cls.seatingConfig.cols || 8;
-                    // Logic: If saved config exists, we try to approximate. 
-                    // Better approach: Just default to sensible values if we can't persist extra metadata yet.
-                    setDeskCols(Math.ceil(savedTotalCols / 2)); 
-                    setGroupSize(2);
+                    // Try to infer config from saved total columns if we don't have detailed metadata
+                    const inferredGroupSize = 2; // Default reasonable guess
+                    setDeskCols(Math.ceil(savedTotalCols / inferredGroupSize)); 
+                    setGroupSize(inferredGroupSize);
                 }
             }
         } catch (e) { console.error(e); } 
@@ -561,9 +558,9 @@ export const MyClass: React.FC = () => {
 
                         {/* Center: Grid */}
                         <div className="flex-1 p-8 overflow-auto flex flex-col items-center bg-gray-100/50">
-                            {/* Classic Blackboard */}
-                            <div className="w-[60%] h-12 bg-[#2d3748] rounded mb-12 flex items-center justify-center shadow-md border-b-4 border-[#1a202c] shrink-0 select-none">
-                                <span className="text-white/80 font-bold tracking-[0.5em] text-sm">讲台 (TEACHER)</span>
+                            {/* Blackboard / Lectern Area */}
+                            <div className="w-[60%] h-16 bg-gray-700 rounded-b-xl mb-12 flex items-center justify-center shadow-lg text-gray-300 font-bold tracking-[1em] text-lg border-b-4 border-gray-600 shrink-0 select-none">
+                                讲台 ( T E A C H E R )
                             </div>
 
                             <div 

vite.config.ts

@@ -1,11 +1,65 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate', // 核心设置：检测到新内容自动更新 Service Worker
+      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
+      manifest: {
+        name: '智慧校园管理系统',
+        short_name: '智慧校园',
+        description: '一个综合性的学生管理系统仪表板，具有基于角色的访问控制、学生档案、课程管理和绩效分析功能。',
+        theme_color: '#2563eb', // 对应 bg-blue-600
+        background_color: '#f9fafb',
+        display: 'standalone', // 关键设置：像原生 App 一样全屏显示，无浏览器地址栏
+        orientation: 'portrait',
+        icons: [
+          {
+            src: 'https://cdn-icons-png.flaticon.com/512/3135/3135810.png', // 临时使用通用教育图标，实际项目中请替换为本地 public/pwa-192x192.png
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'https://cdn-icons-png.flaticon.com/512/3135/3135810.png', // 临时使用通用教育图标，实际项目中请替换为本地 public/pwa-512x512.png
+            sizes: '512x512',
+            type: 'image/png'
+          },
+          {
+            src: 'https://cdn-icons-png.flaticon.com/512/3135/3135810.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable'
+          }
+        ]
+      },
+      workbox: {
+        // 缓存策略配置，确保 API 请求不被过度缓存，但静态资源被缓存
+        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/api\.dicebear\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'avatar-cache',
+              expiration: {
+                maxEntries: 100,
+                maxAgeSeconds: 60 * 60 * 24 * 30 // 30 Days
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          }
+        ]
+      }
+    })
+  ],
   build: {
-    outDir: 'dist', // 确保编译输出到 dist 目录
+    outDir: 'dist', 
     emptyOutDir: true,
     chunkSizeWarningLimit: 1000,
     rollupOptions: {