yoyuz/my_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first runnable version

Browse Source
This commit is contained in:
yoyuzh
2026-03-14 12:28:46 +08:00
parent 8db2fa2aab
commit 6cff15f8dc
35 changed files with 2118 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
front/src/pages/Files.tsx
View File

@@ -1,69 +1,120 @@
import React, { useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { motion } from 'motion/react';
import { Card, CardContent, CardHeader, CardTitle } from '@/src/components/ui/card';
import { Button } from '@/src/components/ui/button';
import {
Folder, FileText, Image as ImageIcon, Download, Monitor,
Star, ChevronRight, Upload, Plus, LayoutGrid, List, File,
MoreVertical
import {
Folder,
FileText,
Image as ImageIcon,
Download,
Monitor,
ChevronRight,
Upload,
Plus,
LayoutGrid,
List,
MoreVertical,
} from 'lucide-react';
import { Button } from '@/src/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/src/components/ui/card';
import { apiDownload, apiRequest } from '@/src/lib/api';
import { readCachedValue, writeCachedValue } from '@/src/lib/cache';
import { getFilesLastPathCacheKey, getFilesListCacheKey } from '@/src/lib/page-cache';
import type { FileMetadata, PageResponse } from '@/src/lib/types';
import { cn } from '@/src/lib/utils';
const QUICK_ACCESS = [
{ name: '桌面', icon: Monitor },
{ name: '下载', icon: Download },
{ name: '文档', icon: FileText },
{ name: '图片', icon: ImageIcon },
{ name: '桌面', icon: Monitor, path: [] as string[] },
{ name: '下载', icon: Download, path: ['下载'] },
{ name: '文档', icon: FileText, path: ['文档'] },
{ name: '图片', icon: ImageIcon, path: ['图片'] },
];
const DIRECTORIES = [
{ name: '我的文件', icon: Folder },
{ name: '课程资料', icon: Folder },
{ name: '项目归档', icon: Folder },
{ name: '收藏夹', icon: Star },
{ name: '下载', icon: Folder },
{ name: '文档', icon: Folder },
{ name: '图片', icon: Folder },
];
const MOCK_FILES_DB: Record<string, any[]> = {
'我的文件': [
{ id: 1, name: '软件工程期末复习资料.pdf', type: 'pdf', size: '2.4 MB', modified: '2025-01-15 14:30' },
{ id: 2, name: '2025春季学期课表.xlsx', type: 'excel', size: '156 KB', modified: '2025-02-28 09:15' },
{ id: 3, name: '项目架构设计图.png', type: 'image', size: '4.1 MB', modified: '2025-03-01 16:45' },
{ id: 4, name: '实验报告模板.docx', type: 'word', size: '45 KB', modified: '2025-03-05 10:20' },
{ id: 5, name: '前端学习笔记', type: 'folder', size: '—', modified: '2025-03-10 11:00' },
],
'课程资料': [
{ id: 6, name: '高等数学', type: 'folder', size: '—', modified: '2025-02-20 10:00' },
{ id: 7, name: '大学物理', type: 'folder', size: '—', modified: '2025-02-21 11:00' },
{ id: 8, name: '软件工程', type: 'folder', size: '—', modified: '2025-02-22 14:00' },
],
'项目归档': [
{ id: 9, name: '2024秋季学期项目', type: 'folder', size: '—', modified: '2024-12-20 15:30' },
{ id: 10, name: '个人博客源码.zip', type: 'archive', size: '15.2 MB', modified: '2025-01-05 09:45' },
],
'收藏夹': [
{ id: 11, name: '常用工具网站.txt', type: 'document', size: '2 KB', modified: '2025-03-01 10:00' },
],
'我的文件/前端学习笔记': [
{ id: 12, name: 'React Hooks 详解.md', type: 'document', size: '12 KB', modified: '2025-03-08 09:00' },
{ id: 13, name: 'Tailwind 技巧.md', type: 'document', size: '8 KB', modified: '2025-03-09 14:20' },
{ id: 14, name: '示例代码', type: 'folder', size: '—', modified: '2025-03-10 10:00' },
],
'课程资料/软件工程': [
{ id: 15, name: '需求规格说明书.pdf', type: 'pdf', size: '1.2 MB', modified: '2025-03-05 16:00' },
{ id: 16, name: '系统设计文档.docx', type: 'word', size: '850 KB', modified: '2025-03-06 11:30' },
]
};
function toBackendPath(pathParts: string[]) {
return pathParts.length === 0 ? '/' : `/${pathParts.join('/')}`;
}
function formatFileSize(size: number) {
if (size <= 0) {
return '—';
}
const units = ['B', 'KB', 'MB', 'GB'];
const index = Math.min(Math.floor(Math.log(size) / Math.log(1024)), units.length - 1);
const value = size / 1024 ** index;
return `${value.toFixed(value >= 10 || index === 0 ? 0 : 1)} ${units[index]}`;
}
function formatDateTime(value: string) {
return new Intl.DateTimeFormat('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
}).format(new Date(value));
}
function toUiFile(file: FileMetadata) {
const extension = file.filename.includes('.') ? file.filename.split('.').pop()?.toLowerCase() : '';
let type = extension || 'document';
if (file.directory) {
type = 'folder';
} else if (file.contentType?.startsWith('image/')) {
type = 'image';
} else if (file.contentType?.includes('pdf')) {
type = 'pdf';
}
return {
id: file.id,
name: file.filename,
type,
size: file.directory ? '—' : formatFileSize(file.size),
modified: formatDateTime(file.createdAt),
};
}
export default function Files() {
const [currentPath, setCurrentPath] = useState<string[]>(['我的文件']);
const initialPath = readCachedValue<string[]>(getFilesLastPathCacheKey()) ?? [];
const initialCachedFiles = readCachedValue<FileMetadata[]>(getFilesListCacheKey(toBackendPath(initialPath))) ?? [];
const fileInputRef = useRef<HTMLInputElement | null>(null);
const [currentPath, setCurrentPath] = useState<string[]>(initialPath);
const [selectedFile, setSelectedFile] = useState<any | null>(null);
const [currentFiles, setCurrentFiles] = useState<any[]>(initialCachedFiles.map(toUiFile));
const activeDir = currentPath[currentPath.length - 1];
const pathKey = currentPath.join('/');
const currentFiles = MOCK_FILES_DB[pathKey] || [];
const loadCurrentPath = async (pathParts: string[]) => {
const response = await apiRequest<PageResponse<FileMetadata>>(
`/files/list?path=${encodeURIComponent(toBackendPath(pathParts))}&page=0&size=100`
);
writeCachedValue(getFilesListCacheKey(toBackendPath(pathParts)), response.items);
writeCachedValue(getFilesLastPathCacheKey(), pathParts);
setCurrentFiles(response.items.map(toUiFile));
};
const handleSidebarClick = (name: string) => {
setCurrentPath([name]);
useEffect(() => {
const cachedFiles = readCachedValue<FileMetadata[]>(getFilesListCacheKey(toBackendPath(currentPath)));
writeCachedValue(getFilesLastPathCacheKey(), currentPath);
if (cachedFiles) {
setCurrentFiles(cachedFiles.map(toUiFile));
}
loadCurrentPath(currentPath).catch(() => {
if (!cachedFiles) {
setCurrentFiles([]);
}
});
}, [currentPath]);
const handleSidebarClick = (pathParts: string[]) => {
setCurrentPath(pathParts);
setSelectedFile(null);
};
@@ -79,6 +130,65 @@ export default function Files() {
setSelectedFile(null);
};
const handleUploadClick = () => {
fileInputRef.current?.click();
};
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (!file) {
return;
}
const formData = new FormData();
formData.append('file', file);
await apiRequest(`/files/upload?path=${encodeURIComponent(toBackendPath(currentPath))}`, {
method: 'POST',
body: formData,
});
await loadCurrentPath(currentPath);
event.target.value = '';
};
const handleCreateFolder = async () => {
const folderName = window.prompt('请输入新文件夹名称');
if (!folderName?.trim()) {
return;
}
const basePath = toBackendPath(currentPath).replace(/\/$/, '');
const fullPath = `${basePath}/${folderName.trim()}` || '/';
await apiRequest('/files/mkdir', {
method: 'POST',
body: new URLSearchParams({
path: fullPath.startsWith('/') ? fullPath : `/${fullPath}`,
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
},
});
await loadCurrentPath(currentPath);
};
const handleDownload = async () => {
if (!selectedFile || selectedFile.type === 'folder') {
return;
}
const response = await apiDownload(`/files/download/${selectedFile.id}`);
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = selectedFile.name;
link.click();
window.URL.revokeObjectURL(url);
};
return (
<div className="flex flex-col lg:flex-row gap-6 h-[calc(100vh-8rem)]">
{/* Left Sidebar */}
@@ -89,9 +199,15 @@ export default function Files() {
{QUICK_ACCESS.map((item) => (
<button
key={item.name}
className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-slate-300 hover:text-white hover:bg-white/5 transition-colors"
onClick={() => handleSidebarClick(item.path)}
className={cn(
'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
currentPath.join('/') === item.path.join('/')
? 'bg-[#336EFF]/20 text-[#336EFF]'
: 'text-slate-300 hover:text-white hover:bg-white/5'
)}
>
<item.icon className="w-4 h-4 text-slate-400" />
<item.icon className={cn('w-4 h-4', currentPath.join('/') === item.path.join('/') ? 'text-[#336EFF]' : 'text-slate-400')} />
{item.name}
</button>
))}
@@ -102,15 +218,15 @@ export default function Files() {
{DIRECTORIES.map((item) => (
<button
key={item.name}
onClick={() => handleSidebarClick(item.name)}
onClick={() => handleSidebarClick([item.name])}
className={cn(
"w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
currentPath.length === 1 && currentPath[0] === item.name
? "bg-[#336EFF]/20 text-[#336EFF]"
: "text-slate-300 hover:text-white hover:bg-white/5"
'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
currentPath.length === 1 && currentPath[0] === item.name
? 'bg-[#336EFF]/20 text-[#336EFF]'
: 'text-slate-300 hover:text-white hover:bg-white/5'
)}
>
<item.icon className={cn("w-4 h-4", currentPath.length === 1 && currentPath[0] === item.name ? "text-[#336EFF]" : "text-slate-400")} />
<item.icon className={cn('w-4 h-4', currentPath.length === 1 && currentPath[0] === item.name ? 'text-[#336EFF]' : 'text-slate-400')} />
{item.name}
</button>
))}
@@ -123,13 +239,15 @@ export default function Files() {
{/* Header / Breadcrumbs */}
<div className="p-4 border-b border-white/10 flex items-center justify-between shrink-0">
<div className="flex items-center text-sm text-slate-400">
<button className="hover:text-white transition-colors">网盘</button>
<button className="hover:text-white transition-colors" onClick={() => handleSidebarClick([])}>
网盘
</button>
{currentPath.map((pathItem, index) => (
<React.Fragment key={index}>
<ChevronRight className="w-4 h-4 mx-1" />
<button
<button
onClick={() => handleBreadcrumbClick(index)}
className={cn("transition-colors", index === currentPath.length - 1 ? "text-white font-medium" : "hover:text-white")}
className={cn('transition-colors', index === currentPath.length - 1 ? 'text-white font-medium' : 'hover:text-white')}
>
{pathItem}
</button>
@@ -157,13 +275,13 @@ export default function Files() {
<tbody>
{currentFiles.length > 0 ? (
currentFiles.map((file) => (
<tr
<tr
key={file.id}
onClick={() => setSelectedFile(file)}
onDoubleClick={() => handleFolderDoubleClick(file)}
className={cn(
"group cursor-pointer transition-colors border-b border-white/5 last:border-0",
selectedFile?.id === file.id ? "bg-[#336EFF]/10" : "hover:bg-white/[0.02]"
'group cursor-pointer transition-colors border-b border-white/5 last:border-0',
selectedFile?.id === file.id ? 'bg-[#336EFF]/10' : 'hover:bg-white/[0.02]'
)}
>
<td className="py-3 pl-4">
@@ -175,7 +293,7 @@ export default function Files() {
) : (
<FileText className="w-5 h-5 text-blue-400" />
)}
<span className={cn("text-sm font-medium", selectedFile?.id === file.id ? "text-[#336EFF]" : "text-slate-200")}>
<span className={cn('text-sm font-medium', selectedFile?.id === file.id ? 'text-[#336EFF]' : 'text-slate-200')}>
{file.name}
</span>
</div>
@@ -206,18 +324,19 @@ export default function Files() {
{/* Bottom Actions */}
<div className="p-4 border-t border-white/10 flex items-center gap-3 shrink-0 bg-white/[0.01]">
<Button variant="default" className="gap-2">
<Button variant="default" className="gap-2" onClick={handleUploadClick}>
<Upload className="w-4 h-4" /> 上传文件
</Button>
<Button variant="outline" className="gap-2">
<Button variant="outline" className="gap-2" onClick={handleCreateFolder}>
<Plus className="w-4 h-4" /> 新建文件夹
</Button>
<input ref={fileInputRef} type="file" className="hidden" onChange={handleFileChange} />
</div>
</Card>
{/* Right Sidebar (Details) */}
{selectedFile && (
<motion.div
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
className="w-full lg:w-72 shrink-0"
@@ -241,14 +360,14 @@ export default function Files() {
</div>
<div className="space-y-4">
<DetailItem label="位置" value={`网盘 > ${currentPath.join(' > ')}`} />
<DetailItem label="位置" value={`网盘 > ${currentPath.length === 0 ? '根目录' : currentPath.join(' > ')}`} />
<DetailItem label="大小" value={selectedFile.size} />
<DetailItem label="修改时间" value={selectedFile.modified} />
<DetailItem label="类型" value={selectedFile.type.toUpperCase()} />
</div>
{selectedFile.type !== 'folder' && (
<Button variant="outline" className="w-full gap-2 mt-4">
<Button variant="outline" className="w-full gap-2 mt-4" onClick={handleDownload}>
<Download className="w-4 h-4" /> 下载文件
</Button>
)}
@@ -265,7 +384,7 @@ export default function Files() {
);
}
function DetailItem({ label, value }: { label: string, value: string }) {
function DetailItem({ label, value }: { label: string; value: string }) {
return (
<div>
<p className="text-xs font-medium text-slate-500 mb-1">{label}</p>

63
front/src/pages/Login.tsx
View File

@@ -1,26 +1,63 @@
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion } from 'motion/react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/src/components/ui/card';
import { Button } from '@/src/components/ui/button';
import { Input } from '@/src/components/ui/input';
import { LogIn, User, Lock } from 'lucide-react';
import { Button } from '@/src/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/src/components/ui/card';
import { Input } from '@/src/components/ui/input';
import { apiRequest, ApiError } from '@/src/lib/api';
import { saveStoredSession } from '@/src/lib/session';
import type { AuthResponse } from '@/src/lib/types';
const DEV_LOGIN_ENABLED = import.meta.env.DEV || import.meta.env.VITE_ENABLE_DEV_LOGIN === 'true';
export default function Login() {
const navigate = useNavigate();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleLogin = (e: React.FormEvent) => {
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
// Simulate login
setTimeout(() => {
try {
let auth: AuthResponse;
try {
auth = await apiRequest<AuthResponse>('/auth/login', {
method: 'POST',
body: { username, password },
});
} catch (requestError) {
if (
DEV_LOGIN_ENABLED &&
username.trim() &&
requestError instanceof ApiError &&
requestError.status === 401
) {
auth = await apiRequest<AuthResponse>(
`/auth/dev-login?username=${encodeURIComponent(username.trim())}`,
{ method: 'POST' }
);
} else {
throw requestError;
}
}
saveStoredSession({
token: auth.token,
user: auth.user,
});
setLoading(false);
navigate('/overview');
}, 1000);
} catch (requestError) {
setLoading(false);
setError(requestError instanceof Error ? requestError.message : '登录失败，请稍后重试');
}
};
return (
@@ -41,14 +78,16 @@ export default function Login() {
<span className="w-2 h-2 rounded-full bg-[#336EFF] animate-pulse" />
<span className="text-sm text-slate-300 font-medium tracking-wide uppercase">Access Portal</span>
</div>
<div className="space-y-2">
<h2 className="text-xl text-[#336EFF] font-bold tracking-widest uppercase">YOYUZH.XYZ</h2>
<h1 className="text-5xl md:text-6xl font-bold text-white leading-tight">
个人网站<br />统一入口
个人网站
<br />
统一入口
</h1>
</div>
<p className="text-lg text-slate-400 leading-relaxed">
欢迎来到 YOYUZH 的个人门户。在这里，你可以集中管理个人网盘文件、查询教务成绩课表，以及体验轻量级小游戏。
</p>
@@ -82,6 +121,8 @@ export default function Login() {
type="text"
placeholder="账号 / 用户名 / 学号"
className="pl-10 bg-black/20 border-white/10 focus-visible:ring-[#336EFF]"
value={username}
onChange={(event) => setUsername(event.target.value)}
required
/>
</div>
@@ -94,6 +135,8 @@ export default function Login() {
type="password"
placeholder="••••••••"
className="pl-10 bg-black/20 border-white/10 focus-visible:ring-[#336EFF]"
value={password}
onChange={(event) => setPassword(event.target.value)}
required
/>
</div>

242
front/src/pages/Overview.tsx
View File

@@ -1,16 +1,76 @@
import React from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { motion } from 'motion/react';
import { useNavigate } from 'react-router-dom';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/src/components/ui/card';
import { Button } from '@/src/components/ui/button';
import {
FileText, Upload, FolderPlus, Database,
GraduationCap, BookOpen, Clock, HardDrive,
User, Mail, ChevronRight
import {
FileText,
Upload,
FolderPlus,
Database,
GraduationCap,
BookOpen,
Clock,
User,
Mail,
ChevronRight,
} from 'lucide-react';
import { Button } from '@/src/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/src/components/ui/card';
import { apiRequest } from '@/src/lib/api';
import { readCachedValue, writeCachedValue } from '@/src/lib/cache';
import { getOverviewCacheKey, getSchoolResultsCacheKey, readStoredSchoolQuery } from '@/src/lib/page-cache';
import { readStoredSession } from '@/src/lib/session';
import type { CourseResponse, FileMetadata, GradeResponse, PageResponse, UserProfile } from '@/src/lib/types';
function formatFileSize(size: number) {
if (size <= 0) {
return '0 B';
}
const units = ['B', 'KB', 'MB', 'GB'];
const index = Math.min(Math.floor(Math.log(size) / Math.log(1024)), units.length - 1);
const value = size / 1024 ** index;
return `${value.toFixed(value >= 10 || index === 0 ? 0 : 1)} ${units[index]}`;
}
function formatRecentTime(value: string) {
const date = new Date(value);
const diffHours = Math.floor((Date.now() - date.getTime()) / (1000 * 60 * 60));
if (diffHours < 24) {
return `${Math.max(diffHours, 0)}小时前`;
}
return new Intl.DateTimeFormat('zh-CN', {
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
}).format(date);
}
export default function Overview() {
const navigate = useNavigate();
const storedSchoolQuery = readStoredSchoolQuery();
const cachedSchoolResults =
storedSchoolQuery?.studentId && storedSchoolQuery?.semester
? readCachedValue<{
schedule: CourseResponse[];
grades: GradeResponse[];
}>(getSchoolResultsCacheKey(storedSchoolQuery.studentId, storedSchoolQuery.semester))
: null;
const cachedOverview = readCachedValue<{
profile: UserProfile | null;
recentFiles: FileMetadata[];
rootFiles: FileMetadata[];
schedule: CourseResponse[];
grades: GradeResponse[];
}>(getOverviewCacheKey());
const [profile, setProfile] = useState<UserProfile | null>(cachedOverview?.profile ?? readStoredSession()?.user ?? null);
const [recentFiles, setRecentFiles] = useState<FileMetadata[]>(cachedOverview?.recentFiles ?? []);
const [rootFiles, setRootFiles] = useState<FileMetadata[]>(cachedOverview?.rootFiles ?? []);
const [schedule, setSchedule] = useState<CourseResponse[]>(cachedOverview?.schedule ?? cachedSchoolResults?.schedule ?? []);
const [grades, setGrades] = useState<GradeResponse[]>(cachedOverview?.grades ?? cachedSchoolResults?.grades ?? []);
const currentHour = new Date().getHours();
let greeting = '晚上好';
if (currentHour < 6) greeting = '凌晨好';
@@ -18,18 +78,106 @@ export default function Overview() {
else if (currentHour < 18) greeting = '下午好';
const currentTime = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
const recentWeekUploads = recentFiles.filter(
(file) => Date.now() - new Date(file.createdAt).getTime() <= 7 * 24 * 60 * 60 * 1000
).length;
const usedBytes = useMemo(
() => rootFiles.filter((file) => !file.directory).reduce((sum, file) => sum + file.size, 0),
[rootFiles]
);
const usedGb = usedBytes / 1024 / 1024 / 1024;
const storagePercent = Math.min((usedGb / 50) * 100, 100);
useEffect(() => {
let cancelled = false;
async function loadOverview() {
try {
const [user, filesRecent, filesRoot] = await Promise.all([
apiRequest<UserProfile>('/user/profile'),
apiRequest<FileMetadata[]>('/files/recent'),
apiRequest<PageResponse<FileMetadata>>('/files/list?path=%2F&page=0&size=100'),
]);
if (cancelled) {
return;
}
setProfile(user);
setRecentFiles(filesRecent);
setRootFiles(filesRoot.items);
const schoolQuery = readStoredSchoolQuery();
if (!schoolQuery?.studentId || !schoolQuery?.semester) {
writeCachedValue(getOverviewCacheKey(), {
profile: user,
recentFiles: filesRecent,
rootFiles: filesRoot.items,
schedule: [],
grades: [],
});
return;
}
const queryString = new URLSearchParams({
studentId: schoolQuery.studentId,
semester: schoolQuery.semester,
}).toString();
const [scheduleData, gradesData] = await Promise.all([
apiRequest<CourseResponse[]>(`/cqu/schedule?${queryString}`),
apiRequest<GradeResponse[]>(`/cqu/grades?${queryString}`),
]);
if (!cancelled) {
setSchedule(scheduleData);
setGrades(gradesData);
writeCachedValue(getOverviewCacheKey(), {
profile: user,
recentFiles: filesRecent,
rootFiles: filesRoot.items,
schedule: scheduleData,
grades: gradesData,
});
}
} catch {
const schoolQuery = readStoredSchoolQuery();
if (!cancelled && schoolQuery?.studentId && schoolQuery?.semester) {
const cachedSchoolResults = readCachedValue<{
schedule: CourseResponse[];
grades: GradeResponse[];
}>(getSchoolResultsCacheKey(schoolQuery.studentId, schoolQuery.semester));
if (cachedSchoolResults) {
setSchedule(cachedSchoolResults.schedule);
setGrades(cachedSchoolResults.grades);
}
}
}
}
loadOverview();
return () => {
cancelled = true;
};
}, []);
const latestSemester = grades[0]?.semester ?? '--';
const previewCourses = schedule.slice(0, 3);
return (
<div className="space-y-6">
{/* Hero Section */}
<motion.div
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="glass-panel rounded-3xl p-8 relative overflow-hidden"
>
<div className="absolute top-0 right-0 w-64 h-64 bg-[#336EFF] rounded-full mix-blend-screen filter blur-[100px] opacity-20" />
<div className="relative z-10 space-y-2">
<h1 className="text-3xl md:text-4xl font-bold text-white tracking-tight">欢迎回来，tester5595</h1>
<h1 className="text-3xl md:text-4xl font-bold text-white tracking-tight">
欢迎回来，{profile?.username ?? '访客'}
</h1>
<p className="text-[#336EFF] font-medium">现在时间 {currentTime} · {greeting}</p>
<p className="text-sm text-slate-400 mt-4 max-w-xl leading-relaxed">
这是您的个人门户总览。在这里您可以快速查看网盘文件状态、近期课程安排以及教务成绩摘要。
@@ -39,10 +187,28 @@ export default function Overview() {
{/* Metrics Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<MetricCard title="网盘文件总数" value="128" desc="包含 4 个分类" icon={FileText} delay={0.1} />
<MetricCard title="最近 7 天上传" value="6" desc="最新更新于 2 小时前" icon={Upload} delay={0.2} />
<MetricCard title="本周课程" value="18" desc="今日还有 2 节课" icon={BookOpen} delay={0.3} />
<MetricCard title="已录入成绩" value="42" desc="最近学期：2025 秋" icon={GraduationCap} delay={0.4} />
<MetricCard title="网盘文件总数" value={`${rootFiles.length}`} desc="当前根目录统计" icon={FileText} delay={0.1} />
<MetricCard
title="最近 7 天上传"
value={`${recentWeekUploads}`}
desc={recentFiles[0] ? `最新更新于 ${formatRecentTime(recentFiles[0].createdAt)}` : '暂无最近上传'}
icon={Upload}
delay={0.2}
/>
<MetricCard
title="本周课程"
value={`${schedule.length}`}
desc={schedule.length > 0 ? `当前已同步 ${schedule.length} 节课` : '请先前往教务页查询'}
icon={BookOpen}
delay={0.3}
/>
<MetricCard
title="已录入成绩"
value={`${grades.length}`}
desc={`最近学期：${latestSemester}`}
icon={GraduationCap}
delay={0.4}
/>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
@@ -58,24 +224,25 @@ export default function Overview() {
</CardHeader>
<CardContent>
<div className="space-y-2">
{[
{ name: '软件工程期末复习资料.pdf', size: '2.4 MB', time: '2小时前' },
{ name: '2025春季学期课表.xlsx', size: '156 KB', time: '昨天 14:30' },
{ name: '项目架构设计图.png', size: '4.1 MB', time: '3天前' },
].map((file, i) => (
{recentFiles.slice(0, 3).map((file, i) => (
<div key={i} className="flex items-center justify-between p-3 rounded-xl hover:bg-white/5 transition-colors cursor-pointer group" onClick={() => navigate('/files')}>
<div className="flex items-center gap-4 overflow-hidden">
<div className="w-10 h-10 rounded-xl bg-[#336EFF]/10 flex items-center justify-center shrink-0 group-hover:bg-[#336EFF]/20 transition-colors">
<FileText className="w-5 h-5 text-[#336EFF]" />
</div>
<div className="truncate">
<p className="text-sm font-medium text-white truncate">{file.name}</p>
<p className="text-xs text-slate-400 mt-0.5">{file.time}</p>
<p className="text-sm font-medium text-white truncate">{file.filename}</p>
<p className="text-xs text-slate-400 mt-0.5">{formatRecentTime(file.createdAt)}</p>
</div>
</div>
<span className="text-xs text-slate-500 font-mono shrink-0 ml-4">{file.size}</span>
<span className="text-xs text-slate-500 font-mono shrink-0 ml-4">{formatFileSize(file.size)}</span>
</div>
))}
{recentFiles.length === 0 && (
<div className="p-3 rounded-xl border border-dashed border-white/10 text-sm text-slate-500">
暂无最近文件
</div>
)}
</div>
</CardContent>
</Card>
@@ -91,21 +258,24 @@ export default function Overview() {
</CardHeader>
<CardContent>
<div className="space-y-3">
{[
{ time: '08:00 - 09:35', name: '高等数学 (下)', room: '教1-204' },
{ time: '10:00 - 11:35', name: '大学物理', room: '教2-101' },
{ time: '14:00 - 15:35', name: '软件工程', room: '计科楼 302' },
].map((course, i) => (
{previewCourses.map((course, i) => (
<div key={i} className="flex items-center gap-4 p-4 rounded-xl border border-white/5 bg-white/[0.02] hover:bg-white/[0.04] transition-colors">
<div className="w-28 shrink-0 text-sm font-mono text-[#336EFF] bg-[#336EFF]/10 px-2 py-1 rounded-md text-center">{course.time}</div>
<div className="w-28 shrink-0 text-sm font-mono text-[#336EFF] bg-[#336EFF]/10 px-2 py-1 rounded-md text-center">
第 {course.startTime ?? '--'} - {course.endTime ?? '--'} 节
</div>
<div className="flex-1 truncate">
<p className="text-sm font-medium text-white truncate">{course.name}</p>
<p className="text-sm font-medium text-white truncate">{course.courseName}</p>
<p className="text-xs text-slate-400 flex items-center gap-1.5 mt-1">
<Clock className="w-3.5 h-3.5" /> {course.room}
<Clock className="w-3.5 h-3.5" /> {course.classroom ?? '教室待定'}
</p>
</div>
</div>
))}
{previewCourses.length === 0 && (
<div className="p-4 rounded-xl border border-dashed border-white/10 text-sm text-slate-500">
暂无课程数据，请先前往教务页查询
</div>
)}
</div>
</CardContent>
</Card>
@@ -136,13 +306,15 @@ export default function Overview() {
<CardContent className="space-y-5">
<div className="flex justify-between items-end">
<div className="space-y-1">
<p className="text-3xl font-bold text-white tracking-tight">12.6 <span className="text-sm text-slate-400 font-normal">GB</span></p>
<p className="text-3xl font-bold text-white tracking-tight">
{usedGb.toFixed(2)} <span className="text-sm text-slate-400 font-normal">GB</span>
</p>
<p className="text-xs text-slate-500 uppercase tracking-wider">已使用 / 共 50 GB</p>
</div>
<span className="text-xl font-mono text-[#336EFF] font-medium">25%</span>
<span className="text-xl font-mono text-[#336EFF] font-medium">{storagePercent.toFixed(1)}%</span>
</div>
<div className="h-2.5 w-full bg-black/40 rounded-full overflow-hidden shadow-inner">
<div className="h-full bg-gradient-to-r from-[#336EFF] to-blue-400 rounded-full" style={{ width: '25%' }} />
<div className="h-full bg-gradient-to-r from-[#336EFF] to-blue-400 rounded-full" style={{ width: `${storagePercent}%` }} />
</div>
</CardContent>
</Card>
@@ -155,11 +327,11 @@ export default function Overview() {
<CardContent>
<div className="flex items-center gap-4 p-4 rounded-xl bg-white/[0.02] border border-white/5">
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center text-white font-bold text-xl shadow-lg">
T
{(profile?.username?.[0] ?? 'T').toUpperCase()}
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-semibold text-white truncate">tester5595</p>
<p className="text-xs text-slate-400 truncate mt-0.5">tester5595@example.com</p>
<p className="text-sm font-semibold text-white truncate">{profile?.username ?? '未登录'}</p>
<p className="text-xs text-slate-400 truncate mt-0.5">{profile?.email ?? '暂无邮箱'}</p>
</div>
</div>
</CardContent>

238
front/src/pages/School.tsx
View File

@@ -1,23 +1,119 @@
import React, { useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { motion } from 'motion/react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/src/components/ui/card';
import { Button } from '@/src/components/ui/button';
import { Input } from '@/src/components/ui/input';
import { GraduationCap, Calendar, User, Lock, Search, BookOpen, ChevronRight, Award } from 'lucide-react';
import { Button } from '@/src/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/src/components/ui/card';
import { Input } from '@/src/components/ui/input';
import { apiRequest } from '@/src/lib/api';
import { readCachedValue, writeCachedValue } from '@/src/lib/cache';
import { getSchoolResultsCacheKey, readStoredSchoolQuery, writeStoredSchoolQuery } from '@/src/lib/page-cache';
import type { CourseResponse, GradeResponse } from '@/src/lib/types';
import { cn } from '@/src/lib/utils';
export default function School() {
const [activeTab, setActiveTab] = useState<'schedule' | 'grades'>('schedule');
const [loading, setLoading] = useState(false);
const [queried, setQueried] = useState(false);
function formatSections(startTime?: number | null, endTime?: number | null) {
if (!startTime || !endTime) {
return '节次待定';
}
return `第 ${startTime}-${endTime} 节`;
}
export default function School() {
const storedQuery = readStoredSchoolQuery();
const initialStudentId = storedQuery?.studentId ?? '2023123456';
const initialSemester = storedQuery?.semester ?? '2025-spring';
const initialCachedResults = readCachedValue<{
queried: boolean;
schedule: CourseResponse[];
grades: GradeResponse[];
}>(getSchoolResultsCacheKey(initialStudentId, initialSemester));
const [activeTab, setActiveTab] = useState<'schedule' | 'grades'>('schedule');
const [studentId, setStudentId] = useState(initialStudentId);
const [password, setPassword] = useState('password123');
const [semester, setSemester] = useState(initialSemester);
const [loading, setLoading] = useState(false);
const [queried, setQueried] = useState(initialCachedResults?.queried ?? false);
const [schedule, setSchedule] = useState<CourseResponse[]>(initialCachedResults?.schedule ?? []);
const [grades, setGrades] = useState<GradeResponse[]>(initialCachedResults?.grades ?? []);
const averageGrade = useMemo(() => {
if (grades.length === 0) {
return '0.0';
}
const sum = grades.reduce((total, item) => total + (item.grade ?? 0), 0);
return (sum / grades.length).toFixed(1);
}, [grades]);
const loadSchoolData = async (
nextStudentId: string,
nextSemester: string,
options: { background?: boolean } = {}
) => {
const cacheKey = getSchoolResultsCacheKey(nextStudentId, nextSemester);
const cachedResults = readCachedValue<{
queried: boolean;
schedule: CourseResponse[];
grades: GradeResponse[];
}>(cacheKey);
if (!options.background) {
setLoading(true);
}
writeStoredSchoolQuery({
studentId: nextStudentId,
semester: nextSemester,
});
try {
const queryString = new URLSearchParams({
studentId: nextStudentId,
semester: nextSemester,
}).toString();
const [scheduleData, gradeData] = await Promise.all([
apiRequest<CourseResponse[]>(`/cqu/schedule?${queryString}`),
apiRequest<GradeResponse[]>(`/cqu/grades?${queryString}`),
]);
const handleQuery = (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setTimeout(() => {
setLoading(false);
setQueried(true);
}, 1500);
setSchedule(scheduleData);
setGrades(gradeData);
writeCachedValue(cacheKey, {
queried: true,
studentId: nextStudentId,
semester: nextSemester,
schedule: scheduleData,
grades: gradeData,
});
} catch {
if (!cachedResults) {
setQueried(false);
setSchedule([]);
setGrades([]);
}
} finally {
if (!options.background) {
setLoading(false);
}
}
};
useEffect(() => {
if (!storedQuery) {
return;
}
loadSchoolData(storedQuery.studentId, storedQuery.semester, {
background: true,
}).catch(() => undefined);
}, []);
const handleQuery = async (e: React.FormEvent) => {
e.preventDefault();
await loadSchoolData(studentId, semester);
};
return (
@@ -38,19 +134,19 @@ export default function School() {
<label className="text-xs font-medium text-slate-400 ml-1">学号</label>
<div className="relative">
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
<Input defaultValue="2023123456" className="pl-9 bg-black/20" required />
<Input value={studentId} onChange={(event) => setStudentId(event.target.value)} className="pl-9 bg-black/20" required />
</div>
</div>
<div className="space-y-2">
<label className="text-xs font-medium text-slate-400 ml-1">密码</label>
<div className="relative">
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
<Input type="password" defaultValue="password123" className="pl-9 bg-black/20" required />
<Input type="password" value={password} onChange={(event) => setPassword(event.target.value)} className="pl-9 bg-black/20" required />
</div>
</div>
<div className="space-y-2">
<label className="text-xs font-medium text-slate-400 ml-1">学期</label>
<select className="flex h-11 w-full rounded-xl border border-white/10 bg-black/20 px-3 py-2 text-sm text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#336EFF]">
<select value={semester} onChange={(event) => setSemester(event.target.value)} className="flex h-11 w-full rounded-xl border border-white/10 bg-black/20 px-3 py-2 text-sm text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#336EFF]">
<option value="2025-spring">2025 春</option>
<option value="2024-fall">2024 秋</option>
<option value="2024-spring">2024 春</option>
@@ -81,9 +177,9 @@ export default function School() {
<CardContent>
{queried ? (
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<SummaryItem label="当前缓存账号" value="2023123456" icon={User} />
<SummaryItem label="已保存课表学期" value="2025 春" icon={Calendar} />
<SummaryItem label="已保存成绩" value="3 个学期" icon={Award} />
<SummaryItem label="当前缓存账号" value={studentId} icon={User} />
<SummaryItem label="已保存课表学期" value={semester} icon={Calendar} />
<SummaryItem label="已保存成绩" value={`${averageGrade} 分`} icon={Award} />
</div>
) : (
<div className="h-40 flex flex-col items-center justify-center text-slate-500 space-y-3 border border-dashed border-white/10 rounded-xl bg-white/[0.01]">
@@ -100,8 +196,8 @@ export default function School() {
<button
onClick={() => setActiveTab('schedule')}
className={cn(
"px-6 py-2 text-sm font-medium rounded-lg transition-all",
activeTab === 'schedule' ? "bg-[#336EFF] text-white shadow-md" : "text-slate-400 hover:text-white"
'px-6 py-2 text-sm font-medium rounded-lg transition-all',
activeTab === 'schedule' ? 'bg-[#336EFF] text-white shadow-md' : 'text-slate-400 hover:text-white'
)}
>
课表抽屉
@@ -109,8 +205,8 @@ export default function School() {
<button
onClick={() => setActiveTab('grades')}
className={cn(
"px-6 py-2 text-sm font-medium rounded-lg transition-all",
activeTab === 'grades' ? "bg-[#336EFF] text-white shadow-md" : "text-slate-400 hover:text-white"
'px-6 py-2 text-sm font-medium rounded-lg transition-all',
activeTab === 'grades' ? 'bg-[#336EFF] text-white shadow-md' : 'text-slate-400 hover:text-white'
)}
>
成绩热力图
@@ -124,7 +220,7 @@ export default function School() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
{activeTab === 'schedule' ? <ScheduleView queried={queried} /> : <GradesView queried={queried} />}
{activeTab === 'schedule' ? <ScheduleView queried={queried} schedule={schedule} /> : <GradesView queried={queried} grades={grades} />}
</motion.div>
</div>
);
@@ -165,7 +261,7 @@ function SummaryItem({ label, value, icon: Icon }: any) {
);
}
function ScheduleView({ queried }: { queried: boolean }) {
function ScheduleView({ queried, schedule }: { queried: boolean; schedule: CourseResponse[] }) {
if (!queried) {
return (
<Card>
@@ -178,14 +274,6 @@ function ScheduleView({ queried }: { queried: boolean }) {
}
const days = ['周一', '周二', '周三', '周四', '周五'];
const mockSchedule = [
{ day: 0, time: '08:00 - 09:35', name: '高等数学 (下)', room: '教1-204' },
{ day: 0, time: '10:00 - 11:35', name: '大学物理', room: '教2-101' },
{ day: 1, time: '14:00 - 15:35', name: '软件工程', room: '计科楼 302' },
{ day: 2, time: '08:00 - 09:35', name: '数据结构', room: '教1-105' },
{ day: 3, time: '16:00 - 17:35', name: '计算机网络', room: '计科楼 401' },
{ day: 4, time: '10:00 - 11:35', name: '操作系统', room: '教3-202' },
];
return (
<Card>
@@ -194,36 +282,39 @@ function ScheduleView({ queried }: { queried: boolean }) {
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
{days.map((day, index) => (
<div key={day} className="space-y-3">
<div className="text-center py-2 bg-white/5 rounded-lg text-sm font-medium text-slate-300">
{day}
{days.map((day, index) => {
const dayCourses = schedule.filter((item) => (item.dayOfWeek ?? 0) - 1 === index);
return (
<div key={day} className="space-y-3">
<div className="text-center py-2 bg-white/5 rounded-lg text-sm font-medium text-slate-300">
{day}
</div>
<div className="space-y-2">
{dayCourses.map((course, i) => (
<div key={i} className="p-3 rounded-xl bg-[#336EFF]/10 border border-[#336EFF]/20 hover:bg-[#336EFF]/20 transition-colors">
<p className="text-xs font-mono text-[#336EFF] mb-1">{formatSections(course.startTime, course.endTime)}</p>
<p className="text-sm font-medium text-white leading-tight mb-2">{course.courseName}</p>
<p className="text-xs text-slate-400 flex items-center gap-1">
<ChevronRight className="w-3 h-3" /> {course.classroom ?? '教室待定'}
</p>
</div>
))}
{dayCourses.length === 0 && (
<div className="h-24 rounded-xl border border-dashed border-white/10 flex items-center justify-center text-xs text-slate-500">
无课程
</div>
)}
</div>
</div>
<div className="space-y-2">
{mockSchedule.filter(s => s.day === index).map((course, i) => (
<div key={i} className="p-3 rounded-xl bg-[#336EFF]/10 border border-[#336EFF]/20 hover:bg-[#336EFF]/20 transition-colors">
<p className="text-xs font-mono text-[#336EFF] mb-1">{course.time}</p>
<p className="text-sm font-medium text-white leading-tight mb-2">{course.name}</p>
<p className="text-xs text-slate-400 flex items-center gap-1">
<ChevronRight className="w-3 h-3" /> {course.room}
</p>
</div>
))}
{mockSchedule.filter(s => s.day === index).length === 0 && (
<div className="h-24 rounded-xl border border-dashed border-white/10 flex items-center justify-center text-xs text-slate-500">
无课程
</div>
)}
</div>
</div>
))}
);
})}
</div>
</CardContent>
</Card>
);
}
function GradesView({ queried }: { queried: boolean }) {
function GradesView({ queried, grades }: { queried: boolean; grades: GradeResponse[] }) {
if (!queried) {
return (
<Card>
@@ -235,20 +326,14 @@ function GradesView({ queried }: { queried: boolean }) {
);
}
const terms = [
{
name: '2024 秋',
grades: [75, 78, 80, 83, 85, 88, 89, 96]
},
{
name: '2025 春',
grades: [70, 78, 82, 84, 85, 85, 86, 88, 93]
},
{
name: '2025 秋',
grades: [68, 70, 76, 80, 85, 86, 90, 94, 97]
const terms = grades.reduce<Record<string, number[]>>((accumulator, grade) => {
const semester = grade.semester ?? '未分类';
if (!accumulator[semester]) {
accumulator[semester] = [];
}
];
accumulator[semester].push(grade.grade ?? 0);
return accumulator;
}, {});
const getScoreStyle = (score: number) => {
if (score >= 95) return 'bg-[#336EFF]/50 text-white';
@@ -266,15 +351,15 @@ function GradesView({ queried }: { queried: boolean }) {
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{terms.map((term, i) => (
{Object.entries(terms).map(([term, scores], i) => (
<div key={i} className="flex flex-col">
<h3 className="text-sm font-bold text-white border-b border-white/5 pb-3 mb-4">{term.name}</h3>
<h3 className="text-sm font-bold text-white border-b border-white/5 pb-3 mb-4">{term}</h3>
<div className="flex flex-col gap-2">
{term.grades.map((score, j) => (
<div
key={j}
{scores.map((score, j) => (
<div
key={j}
className={cn(
"w-full py-1.5 rounded-full text-xs font-mono font-medium text-center transition-colors",
'w-full py-1.5 rounded-full text-xs font-mono font-medium text-center transition-colors',
getScoreStyle(score)
)}
>
@@ -284,6 +369,7 @@ function GradesView({ queried }: { queried: boolean }) {
</div>
</div>
))}
{Object.keys(terms).length === 0 && <div className="text-sm text-slate-500">暂无成绩数据</div>}
</div>
</CardContent>
</Card>