Create components/SensitiveContentProtection.tsx

components/SensitiveContentProtection.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { useSecurity } from '../contexts/SecurityContext';
+import { api } from '../services/api';
+import { Lock, Loader2, Eye, EyeOff } from 'lucide-react';
+
+interface Props {
+  children: React.ReactNode;
+  enabled?: boolean; // Whether protection is enabled for this user role
+}
+
+export const SensitiveContentProtection: React.FC<Props> = ({ children, enabled = true }) => {
+  const { isSensitiveUnlocked, unlockSensitiveContent } = useSecurity();
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+
+  // If protection is disabled (e.g. for Students/Admins if configured), just show content
+  if (!enabled || isSensitiveUnlocked) {
+    return <>{children}</>;
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!password) return;
+    
+    setLoading(true);
+    setError('');
+
+    try {
+      const isValid = await api.auth.verifyPassword(password);
+      if (isValid) {
+        unlockSensitiveContent();
+      } else {
+        setError('密码错误，请重试');
+      }
+    } catch (err) {
+      setError('验证失败，请稍后重试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="relative w-full h-full min-h-[calc(100vh-100px)]">
+      {/* Blurred Content Background */}
+      {/* We render children to create the visual "content behind blur" effect. 
+          Pointer events are disabled to prevent interaction. 
+          A heavy blur and opacity layer is applied. */}
+      <div 
+        className="absolute inset-0 filter blur-lg opacity-40 pointer-events-none select-none overflow-hidden bg-white" 
+        aria-hidden="true"
+      >
+          {children}
+      </div>
+
+      {/* Overlay */}
+      <div className="absolute inset-0 z-50 flex items-center justify-center bg-white/40 backdrop-blur-md">
+        <div className="bg-white p-8 rounded-2xl shadow-2xl w-full max-w-md border border-gray-100 mx-4">
+          <div className="flex flex-col items-center mb-6">
+            <div className="p-4 bg-blue-50 rounded-full mb-4 ring-4 ring-blue-50/50">
+              <Lock className="w-8 h-8 text-blue-600" />
+            </div>
+            <h2 className="text-xl font-bold text-gray-900">敏感内容保护</h2>
+            <p className="text-gray-500 text-sm mt-2 text-center leading-relaxed">
+              为了保护学生隐私与数据安全<br/>
+              查看 <span className="font-medium text-gray-700">成绩管理</span> 与 <span className="font-medium text-gray-700">报表统计</span> 需验证身份
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div className="space-y-1">
+                <label className="text-xs font-medium text-gray-500 ml-1">登录密码</label>
+                <div className="relative">
+                <input
+                    type={showPassword ? "text" : "password"}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all bg-gray-50 focus:bg-white text-gray-800"
+                    placeholder="请输入当前账号密码"
+                    autoFocus
+                />
+                <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 p-1 rounded-md hover:bg-gray-100 transition-colors"
+                >
+                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                </button>
+                </div>
+            </div>
+
+            {error && (
+              <div className="text-red-500 text-sm bg-red-50 p-3 rounded-lg flex items-center justify-center font-medium animate-in fade-in slide-in-from-top-1">
+                {error}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading || !password}
+              className="w-full py-3.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-medium transition-all shadow-lg shadow-blue-600/20 hover:shadow-blue-600/30 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none active:scale-[0.98]"
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="w-5 h-5 animate-spin mr-2" />
+                  验证中...
+                </>
+              ) : (
+                '验证并解锁'
+              )}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};