修改课表模块
This commit is contained in:
yoyuzh
430
.history/front/src/pages/School_20260314124227.tsx
Normal file
430
.history/front/src/pages/School_20260314124227.tsx
Normal file
@@ -0,0 +1,430 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { Award, BookOpen, Calendar, ChevronRight, GraduationCap, Lock, Search, User } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/src/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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 { buildScheduleTable } from '@/src/lib/schedule-table';
|
||||
import type { CourseResponse, GradeResponse } from '@/src/lib/types';
|
||||
import { cn } from '@/src/lib/utils';
|
||||
|
||||
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}`),
|
||||
]);
|
||||
|
||||
setQueried(true);
|
||||
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 (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
await loadSchoolData(studentId, semester);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<Card className="lg:col-span-1">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Search className="w-5 h-5 text-[#336EFF]" />
|
||||
教务查询
|
||||
</CardTitle>
|
||||
<CardDescription>输入学号、密码和学期后同步课表与成绩。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleQuery} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<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 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" 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
|
||||
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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 pt-2">
|
||||
<Button type="submit" disabled={loading} className="w-full">
|
||||
{loading ? '查询中...' : '查询课表'}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="outline"
|
||||
disabled={loading}
|
||||
className="w-full"
|
||||
onClick={() => setActiveTab('grades')}
|
||||
>
|
||||
{loading ? '查询中...' : '查询成绩'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<DatabaseIcon className="w-5 h-5 text-[#336EFF]" />
|
||||
数据摘要
|
||||
</CardTitle>
|
||||
<CardDescription>展示当前缓存或最近一次查询结果。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{queried ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<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]">
|
||||
<Search className="w-8 h-8 opacity-50" />
|
||||
<p className="text-sm">暂无缓存数据，请先执行查询。</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="flex bg-black/20 p-1 rounded-xl w-fit">
|
||||
<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',
|
||||
)}
|
||||
>
|
||||
课表视图
|
||||
</button>
|
||||
<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',
|
||||
)}
|
||||
>
|
||||
成绩热力图
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{activeTab === 'schedule' ? <ScheduleView queried={queried} schedule={schedule} /> : <GradesView queried={queried} grades={grades} />}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DatabaseIcon(props: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||
<path d="M3 5V19A9 3 0 0 0 21 19V5" />
|
||||
<path d="M3 12A9 3 0 0 0 21 12" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryItem({
|
||||
label,
|
||||
value,
|
||||
icon: Icon,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
}) {
|
||||
return (
|
||||
<div className="p-4 rounded-xl bg-white/[0.02] border border-white/5 flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-[#336EFF]/10 flex items-center justify-center shrink-0">
|
||||
<Icon className="w-5 h-5 text-[#336EFF]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-400 mb-0.5">{label}</p>
|
||||
<p className="text-sm font-medium text-white">{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ScheduleView({ queried, schedule }: { queried: boolean; schedule: CourseResponse[] }) {
|
||||
if (!queried) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="h-64 flex flex-col items-center justify-center text-slate-500">
|
||||
<BookOpen className="w-12 h-12 mb-4 opacity-20" />
|
||||
<p>请先查询课表</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const days = ['周一', '周二', '周三', '周四', '周五'];
|
||||
const periodLabels: Record<'morning' | 'afternoon' | 'evening', string> = {
|
||||
morning: '上午',
|
||||
afternoon: '下午',
|
||||
evening: '晚上',
|
||||
};
|
||||
const rows = buildScheduleTable(schedule);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>本周课表</CardTitle>
|
||||
<CardDescription>上午 4 节、下午 4 节、晚上 4 节。没有课的格子保持为空。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[920px] border-separate border-spacing-2 text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="w-24 rounded-xl bg-white/5 px-3 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-400">
|
||||
节次
|
||||
</th>
|
||||
{days.map((day) => (
|
||||
<th key={day} className="rounded-xl bg-white/5 px-3 py-3 text-center text-sm font-medium text-slate-200">
|
||||
{day}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row) => (
|
||||
<tr key={row.section}>
|
||||
<td className="align-top">
|
||||
<div className="rounded-xl border border-white/5 bg-white/[0.02] px-3 py-3">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wider text-slate-500">{periodLabels[row.period]}</p>
|
||||
<p className="mt-1 text-base font-semibold text-white">第 {row.section} 节</p>
|
||||
</div>
|
||||
</td>
|
||||
{row.slots.map((slot, index) => {
|
||||
if (slot.type === 'covered') {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (slot.type === 'empty') {
|
||||
return (
|
||||
<td key={`${row.section}-${index}`} className="h-24 rounded-xl border border-dashed border-white/10 bg-white/[0.01]" />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<td key={`${row.section}-${index}`} rowSpan={slot.rowSpan} className="min-w-[145px] align-top">
|
||||
<div className="h-full min-h-24 rounded-xl border border-[#336EFF]/20 bg-[#336EFF]/10 p-3 transition-colors hover:bg-[#336EFF]/20">
|
||||
<p className="text-xs font-mono text-[#336EFF] mb-1">
|
||||
{formatSections(slot.course?.startTime, slot.course?.endTime)}
|
||||
</p>
|
||||
<p className="text-sm font-medium text-white leading-tight mb-2">
|
||||
{slot.course?.courseName}
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 flex items-center gap-1">
|
||||
<ChevronRight className="w-3 h-3" /> {slot.course?.classroom ?? '教室待定'}
|
||||
</p>
|
||||
<p className="mt-2 text-[11px] text-slate-500">
|
||||
{slot.course?.teacher ?? '任课教师待定'}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function GradesView({ queried, grades }: { queried: boolean; grades: GradeResponse[] }) {
|
||||
if (!queried) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="h-64 flex flex-col items-center justify-center text-slate-500">
|
||||
<Award className="w-12 h-12 mb-4 opacity-20" />
|
||||
<p>请先查询成绩</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const terms = grades.reduce<Record<string, number[]>>((accumulator, grade) => {
|
||||
const term = grade.semester ?? '未分类';
|
||||
if (!accumulator[term]) {
|
||||
accumulator[term] = [];
|
||||
}
|
||||
accumulator[term].push(grade.grade ?? 0);
|
||||
return accumulator;
|
||||
}, {});
|
||||
|
||||
const getScoreStyle = (score: number) => {
|
||||
if (score >= 95) return 'bg-[#336EFF]/50 text-white';
|
||||
if (score >= 90) return 'bg-[#336EFF]/40 text-white/90';
|
||||
if (score >= 85) return 'bg-[#336EFF]/30 text-white/80';
|
||||
if (score >= 80) return 'bg-slate-700/60 text-white/70';
|
||||
if (score >= 75) return 'bg-slate-700/40 text-white/60';
|
||||
return 'bg-slate-800/60 text-white/50';
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-[#0f172a]/80 backdrop-blur-sm border-slate-800/50">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-lg font-medium text-white">成绩热力图</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{Object.entries(terms).map(([term, scores]) => (
|
||||
<div key={term} className="flex flex-col">
|
||||
<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">
|
||||
{scores.map((score, index) => (
|
||||
<div
|
||||
key={`${term}-${index}`}
|
||||
className={cn(
|
||||
'w-full py-1.5 rounded-full text-xs font-mono font-medium text-center transition-colors',
|
||||
getScoreStyle(score),
|
||||
)}
|
||||
>
|
||||
{score}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{Object.keys(terms).length === 0 && <div className="text-sm text-slate-500">暂无成绩数据</div>}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
430
.history/front/src/pages/School_20260314213832.tsx
Normal file
430
.history/front/src/pages/School_20260314213832.tsx
Normal file
@@ -0,0 +1,430 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { Award, BookOpen, Calendar, ChevronRight, GraduationCap, Lock, MapPin, Search, User } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/src/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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 { buildScheduleTable } from '@/src/lib/schedule-table';
|
||||
import type { CourseResponse, GradeResponse } from '@/src/lib/types';
|
||||
import { cn } from '@/src/lib/utils';
|
||||
|
||||
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}`),
|
||||
]);
|
||||
|
||||
setQueried(true);
|
||||
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 (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
await loadSchoolData(studentId, semester);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<Card className="lg:col-span-1">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Search className="w-5 h-5 text-[#336EFF]" />
|
||||
教务查询
|
||||
</CardTitle>
|
||||
<CardDescription>输入学号、密码和学期后同步课表与成绩。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleQuery} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<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 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" 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
|
||||
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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 pt-2">
|
||||
<Button type="submit" disabled={loading} className="w-full">
|
||||
{loading ? '查询中...' : '查询课表'}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="outline"
|
||||
disabled={loading}
|
||||
className="w-full"
|
||||
onClick={() => setActiveTab('grades')}
|
||||
>
|
||||
{loading ? '查询中...' : '查询成绩'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<DatabaseIcon className="w-5 h-5 text-[#336EFF]" />
|
||||
数据摘要
|
||||
</CardTitle>
|
||||
<CardDescription>展示当前缓存或最近一次查询结果。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{queried ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<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]">
|
||||
<Search className="w-8 h-8 opacity-50" />
|
||||
<p className="text-sm">暂无缓存数据，请先执行查询。</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="flex bg-black/20 p-1 rounded-xl w-fit">
|
||||
<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',
|
||||
)}
|
||||
>
|
||||
课表视图
|
||||
</button>
|
||||
<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',
|
||||
)}
|
||||
>
|
||||
成绩热力图
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{activeTab === 'schedule' ? <ScheduleView queried={queried} schedule={schedule} /> : <GradesView queried={queried} grades={grades} />}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DatabaseIcon(props: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||
<path d="M3 5V19A9 3 0 0 0 21 19V5" />
|
||||
<path d="M3 12A9 3 0 0 0 21 12" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryItem({
|
||||
label,
|
||||
value,
|
||||
icon: Icon,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
}) {
|
||||
return (
|
||||
<div className="p-4 rounded-xl bg-white/[0.02] border border-white/5 flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-[#336EFF]/10 flex items-center justify-center shrink-0">
|
||||
<Icon className="w-5 h-5 text-[#336EFF]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-400 mb-0.5">{label}</p>
|
||||
<p className="text-sm font-medium text-white">{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ScheduleView({ queried, schedule }: { queried: boolean; schedule: CourseResponse[] }) {
|
||||
if (!queried) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="h-64 flex flex-col items-center justify-center text-slate-500">
|
||||
<BookOpen className="w-12 h-12 mb-4 opacity-20" />
|
||||
<p>请先查询课表</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const days = ['周一', '周二', '周三', '周四', '周五'];
|
||||
const periodLabels: Record<'morning' | 'afternoon' | 'evening', string> = {
|
||||
morning: '上午',
|
||||
afternoon: '下午',
|
||||
evening: '晚上',
|
||||
};
|
||||
const rows = buildScheduleTable(schedule);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>本周课表</CardTitle>
|
||||
<CardDescription>上午 4 节、下午 4 节、晚上 4 节。没有课的格子保持为空。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[920px] border-separate border-spacing-2 text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="w-24 rounded-xl bg-white/5 px-3 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-400">
|
||||
节次
|
||||
</th>
|
||||
{days.map((day) => (
|
||||
<th key={day} className="rounded-xl bg-white/5 px-3 py-3 text-center text-sm font-medium text-slate-200">
|
||||
{day}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row) => (
|
||||
<tr key={row.section}>
|
||||
<td className="align-top">
|
||||
<div className="rounded-xl border border-white/5 bg-white/[0.02] px-3 py-3">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wider text-slate-500">{periodLabels[row.period]}</p>
|
||||
<p className="mt-1 text-base font-semibold text-white">第 {row.section} 节</p>
|
||||
</div>
|
||||
</td>
|
||||
{row.slots.map((slot, index) => {
|
||||
if (slot.type === 'covered') {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (slot.type === 'empty') {
|
||||
return (
|
||||
<td key={`${row.section}-${index}`} className="h-24 rounded-xl border border-dashed border-white/10 bg-white/[0.01]" />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<td key={`${row.section}-${index}`} rowSpan={slot.rowSpan} className="min-w-[145px] align-top">
|
||||
<div className="h-full min-h-24 rounded-xl border border-[#336EFF]/20 bg-[#336EFF]/10 p-3 transition-colors hover:bg-[#336EFF]/20">
|
||||
<p className="text-xs font-mono text-[#336EFF] mb-1">
|
||||
{formatSections(slot.course?.startTime, slot.course?.endTime)}
|
||||
</p>
|
||||
<p className="text-sm font-medium text-white leading-tight mb-2">
|
||||
{slot.course?.courseName}
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 flex items-center gap-1">
|
||||
<ChevronRight className="w-3 h-3" /> {slot.course?.classroom ?? '教室待定'}
|
||||
</p>
|
||||
<p className="mt-2 text-[11px] text-slate-500">
|
||||
{slot.course?.teacher ?? '任课教师待定'}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function GradesView({ queried, grades }: { queried: boolean; grades: GradeResponse[] }) {
|
||||
if (!queried) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="h-64 flex flex-col items-center justify-center text-slate-500">
|
||||
<Award className="w-12 h-12 mb-4 opacity-20" />
|
||||
<p>请先查询成绩</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const terms = grades.reduce<Record<string, number[]>>((accumulator, grade) => {
|
||||
const term = grade.semester ?? '未分类';
|
||||
if (!accumulator[term]) {
|
||||
accumulator[term] = [];
|
||||
}
|
||||
accumulator[term].push(grade.grade ?? 0);
|
||||
return accumulator;
|
||||
}, {});
|
||||
|
||||
const getScoreStyle = (score: number) => {
|
||||
if (score >= 95) return 'bg-[#336EFF]/50 text-white';
|
||||
if (score >= 90) return 'bg-[#336EFF]/40 text-white/90';
|
||||
if (score >= 85) return 'bg-[#336EFF]/30 text-white/80';
|
||||
if (score >= 80) return 'bg-slate-700/60 text-white/70';
|
||||
if (score >= 75) return 'bg-slate-700/40 text-white/60';
|
||||
return 'bg-slate-800/60 text-white/50';
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-[#0f172a]/80 backdrop-blur-sm border-slate-800/50">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-lg font-medium text-white">成绩热力图</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{Object.entries(terms).map(([term, scores]) => (
|
||||
<div key={term} className="flex flex-col">
|
||||
<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">
|
||||
{scores.map((score, index) => (
|
||||
<div
|
||||
key={`${term}-${index}`}
|
||||
className={cn(
|
||||
'w-full py-1.5 rounded-full text-xs font-mono font-medium text-center transition-colors',
|
||||
getScoreStyle(score),
|
||||
)}
|
||||
>
|
||||
{score}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{Object.keys(terms).length === 0 && <div className="text-sm text-slate-500">暂无成绩数据</div>}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
512
.history/front/src/pages/School_20260314213920.tsx
Normal file
512
.history/front/src/pages/School_20260314213920.tsx
Normal file
@@ -0,0 +1,512 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { Award, BookOpen, Calendar, ChevronRight, GraduationCap, Lock, MapPin, Search, User } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/src/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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 { buildScheduleTable } from '@/src/lib/schedule-table';
|
||||
import type { CourseResponse, GradeResponse } from '@/src/lib/types';
|
||||
import { cn } from '@/src/lib/utils';
|
||||
|
||||
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}`),
|
||||
]);
|
||||
|
||||
setQueried(true);
|
||||
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 (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
await loadSchoolData(studentId, semester);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<Card className="lg:col-span-1">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Search className="w-5 h-5 text-[#336EFF]" />
|
||||
教务查询
|
||||
</CardTitle>
|
||||
<CardDescription>输入学号、密码和学期后同步课表与成绩。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleQuery} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<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 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" 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
|
||||
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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 pt-2">
|
||||
<Button type="submit" disabled={loading} className="w-full">
|
||||
{loading ? '查询中...' : '查询课表'}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="outline"
|
||||
disabled={loading}
|
||||
className="w-full"
|
||||
onClick={() => setActiveTab('grades')}
|
||||
>
|
||||
{loading ? '查询中...' : '查询成绩'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<DatabaseIcon className="w-5 h-5 text-[#336EFF]" />
|
||||
数据摘要
|
||||
</CardTitle>
|
||||
<CardDescription>展示当前缓存或最近一次查询结果。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{queried ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<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]">
|
||||
<Search className="w-8 h-8 opacity-50" />
|
||||
<p className="text-sm">暂无缓存数据，请先执行查询。</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="flex bg-black/20 p-1 rounded-xl w-fit">
|
||||
<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',
|
||||
)}
|
||||
>
|
||||
课表视图
|
||||
</button>
|
||||
<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',
|
||||
)}
|
||||
>
|
||||
成绩热力图
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{activeTab === 'schedule' ? <ScheduleView queried={queried} schedule={schedule} /> : <GradesView queried={queried} grades={grades} />}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DatabaseIcon(props: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||
<path d="M3 5V19A9 3 0 0 0 21 19V5" />
|
||||
<path d="M3 12A9 3 0 0 0 21 12" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryItem({
|
||||
label,
|
||||
value,
|
||||
icon: Icon,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
}) {
|
||||
return (
|
||||
<div className="p-4 rounded-xl bg-white/[0.02] border border-white/5 flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-[#336EFF]/10 flex items-center justify-center shrink-0">
|
||||
<Icon className="w-5 h-5 text-[#336EFF]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-400 mb-0.5">{label}</p>
|
||||
<p className="text-sm font-medium text-white">{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getCourseTheme(courseName?: string) {
|
||||
if (!courseName) {
|
||||
return {
|
||||
bg: 'bg-slate-500/10',
|
||||
border: 'border-slate-500/20',
|
||||
text: 'text-slate-300',
|
||||
};
|
||||
}
|
||||
|
||||
const themes = [
|
||||
{
|
||||
bg: 'bg-blue-500/20 hover:bg-blue-500/30',
|
||||
border: 'border-blue-400/30',
|
||||
text: 'text-blue-100',
|
||||
},
|
||||
{
|
||||
bg: 'bg-indigo-500/20 hover:bg-indigo-500/30',
|
||||
border: 'border-indigo-400/30',
|
||||
text: 'text-indigo-100',
|
||||
},
|
||||
{
|
||||
bg: 'bg-cyan-500/20 hover:bg-cyan-500/30',
|
||||
border: 'border-cyan-400/30',
|
||||
text: 'text-cyan-100',
|
||||
},
|
||||
{
|
||||
bg: 'bg-sky-500/20 hover:bg-sky-500/30',
|
||||
border: 'border-sky-400/30',
|
||||
text: 'text-sky-100',
|
||||
},
|
||||
{
|
||||
bg: 'bg-violet-500/20 hover:bg-violet-500/30',
|
||||
border: 'border-violet-400/30',
|
||||
text: 'text-violet-100',
|
||||
},
|
||||
{
|
||||
bg: 'bg-teal-500/20 hover:bg-teal-500/30',
|
||||
border: 'border-teal-400/30',
|
||||
text: 'text-teal-100',
|
||||
},
|
||||
];
|
||||
|
||||
let hash = 0;
|
||||
for (let i = 0; i < courseName.length; i += 1) {
|
||||
hash = courseName.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
return themes[Math.abs(hash) % themes.length];
|
||||
}
|
||||
|
||||
function ScheduleView({ queried, schedule }: { queried: boolean; schedule: CourseResponse[] }) {
|
||||
if (!queried) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="h-64 flex flex-col items-center justify-center text-slate-500">
|
||||
<BookOpen className="w-12 h-12 mb-4 opacity-20" />
|
||||
<p>请先查询课表</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const days = ['周一', '周二', '周三', '周四', '周五'];
|
||||
const rows = buildScheduleTable(schedule);
|
||||
|
||||
return (
|
||||
<Card className="border-none bg-transparent shadow-none">
|
||||
<CardHeader className="px-0 pt-0">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div>
|
||||
<CardTitle className="text-xl">我的课表</CardTitle>
|
||||
<CardDescription>2025 春季学期</CardDescription>
|
||||
</div>
|
||||
<div className="flex gap-2 text-xs text-slate-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-2 h-2 rounded-full bg-blue-500" />
|
||||
{' '}
|
||||
必修
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-2 h-2 rounded-full bg-cyan-500" />
|
||||
{' '}
|
||||
选修
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto pb-2 -mx-1 px-1">
|
||||
<div className="min-w-[800px]">
|
||||
<table className="w-full border-separate border-spacing-2">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="w-10" aria-label="时段" />
|
||||
<th className="w-8" aria-label="节次" />
|
||||
{days.map((d) => (
|
||||
<th key={d} className="pb-2 text-center text-sm font-medium text-slate-400">
|
||||
{d}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row, index) => (
|
||||
<tr key={row.section}>
|
||||
{/* Morning/Afternoon label */}
|
||||
{index % 4 === 0 && (
|
||||
<td rowSpan={4} className="align-top pt-2">
|
||||
<div className="py-3 rounded-lg bg-white/5 text-center text-xs font-bold text-slate-400 [writing-mode:vertical-lr] h-full flex items-center justify-center tracking-widest border border-white/5">
|
||||
{row.section <= 4 ? '上午' : row.section <= 8 ? '下午' : '晚上'}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
|
||||
{/* Section Number */}
|
||||
<td className="align-middle text-center">
|
||||
<div className="text-sm font-mono text-slate-600 font-bold">{row.section}</div>
|
||||
</td>
|
||||
|
||||
{/* Cells */}
|
||||
{row.slots.map((slot, colIdx) => {
|
||||
if (slot.type === 'covered') return null;
|
||||
if (slot.type === 'empty') {
|
||||
return (
|
||||
<td key={`${row.section}-${colIdx}`} className="h-20 bg-white/[0.02] rounded-xl border border-white/5" />
|
||||
);
|
||||
}
|
||||
|
||||
const theme = getCourseTheme(slot.course?.courseName ?? '');
|
||||
return (
|
||||
<td key={`${row.section}-${colIdx}`} rowSpan={slot.rowSpan} className="h-20 align-top">
|
||||
<div
|
||||
className={cn(
|
||||
'w-full h-full p-3 rounded-xl border backdrop-blur-md transition-all hover:scale-[1.02] hover:shadow-lg flex flex-col justify-between group cursor-pointer',
|
||||
theme.bg,
|
||||
theme.border,
|
||||
)}
|
||||
>
|
||||
<div>
|
||||
<h3 className={cn('font-bold text-sm line-clamp-2 leading-tight mb-2', theme.text)}>
|
||||
{slot.course?.courseName}
|
||||
</h3>
|
||||
<p className={cn('text-xs flex items-center gap-1 opacity-80', theme.text)}>
|
||||
<MapPin className="w-3 h-3 opacity-70" />
|
||||
{' '}
|
||||
{slot.course?.classroom ?? '未知'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
<span
|
||||
className={cn(
|
||||
'text-[10px] px-1.5 py-0.5 rounded opacity-80 font-medium bg-black/10',
|
||||
theme.text,
|
||||
)}
|
||||
>
|
||||
{slot.course?.teacher ?? '老师'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function GradesView({ queried, grades }: { queried: boolean; grades: GradeResponse[] }) {
|
||||
if (!queried) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="h-64 flex flex-col items-center justify-center text-slate-500">
|
||||
<Award className="w-12 h-12 mb-4 opacity-20" />
|
||||
<p>请先查询成绩</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const terms = grades.reduce<Record<string, number[]>>((accumulator, grade) => {
|
||||
const term = grade.semester ?? '未分类';
|
||||
if (!accumulator[term]) {
|
||||
accumulator[term] = [];
|
||||
}
|
||||
accumulator[term].push(grade.grade ?? 0);
|
||||
return accumulator;
|
||||
}, {});
|
||||
|
||||
const getScoreStyle = (score: number) => {
|
||||
if (score >= 95) return 'bg-[#336EFF]/50 text-white';
|
||||
if (score >= 90) return 'bg-[#336EFF]/40 text-white/90';
|
||||
if (score >= 85) return 'bg-[#336EFF]/30 text-white/80';
|
||||
if (score >= 80) return 'bg-slate-700/60 text-white/70';
|
||||
if (score >= 75) return 'bg-slate-700/40 text-white/60';
|
||||
return 'bg-slate-800/60 text-white/50';
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-[#0f172a]/80 backdrop-blur-sm border-slate-800/50">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-lg font-medium text-white">成绩热力图</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{Object.entries(terms).map(([term, scores]) => (
|
||||
<div key={term} className="flex flex-col">
|
||||
<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">
|
||||
{scores.map((score, index) => (
|
||||
<div
|
||||
key={`${term}-${index}`}
|
||||
className={cn(
|
||||
'w-full py-1.5 rounded-full text-xs font-mono font-medium text-center transition-colors',
|
||||
getScoreStyle(score),
|
||||
)}
|
||||
>
|
||||
{score}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{Object.keys(terms).length === 0 && <div className="text-sm text-slate-500">暂无成绩数据</div>}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
504
.history/front/src/pages/School_20260314213942.tsx
Normal file
504
.history/front/src/pages/School_20260314213942.tsx
Normal file
@@ -0,0 +1,504 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { Award, BookOpen, Calendar, Lock, MapPin, Search, User } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/src/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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 { buildScheduleTable } from '@/src/lib/schedule-table';
|
||||
import type { CourseResponse, GradeResponse } from '@/src/lib/types';
|
||||
import { cn } from '@/src/lib/utils';
|
||||
|
||||
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}`),
|
||||
]);
|
||||
|
||||
setQueried(true);
|
||||
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 (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
await loadSchoolData(studentId, semester);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<Card className="lg:col-span-1">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Search className="w-5 h-5 text-[#336EFF]" />
|
||||
教务查询
|
||||
</CardTitle>
|
||||
<CardDescription>输入学号、密码和学期后同步课表与成绩。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleQuery} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<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 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" 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
|
||||
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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 pt-2">
|
||||
<Button type="submit" disabled={loading} className="w-full">
|
||||
{loading ? '查询中...' : '查询课表'}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="outline"
|
||||
disabled={loading}
|
||||
className="w-full"
|
||||
onClick={() => setActiveTab('grades')}
|
||||
>
|
||||
{loading ? '查询中...' : '查询成绩'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<DatabaseIcon className="w-5 h-5 text-[#336EFF]" />
|
||||
数据摘要
|
||||
</CardTitle>
|
||||
<CardDescription>展示当前缓存或最近一次查询结果。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{queried ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<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]">
|
||||
<Search className="w-8 h-8 opacity-50" />
|
||||
<p className="text-sm">暂无缓存数据，请先执行查询。</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="flex bg-black/20 p-1 rounded-xl w-fit">
|
||||
<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',
|
||||
)}
|
||||
>
|
||||
课表视图
|
||||
</button>
|
||||
<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',
|
||||
)}
|
||||
>
|
||||
成绩热力图
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{activeTab === 'schedule' ? <ScheduleView queried={queried} schedule={schedule} /> : <GradesView queried={queried} grades={grades} />}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DatabaseIcon(props: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||
<path d="M3 5V19A9 3 0 0 0 21 19V5" />
|
||||
<path d="M3 12A9 3 0 0 0 21 12" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryItem({
|
||||
label,
|
||||
value,
|
||||
icon: Icon,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
}) {
|
||||
return (
|
||||
<div className="p-4 rounded-xl bg-white/[0.02] border border-white/5 flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-[#336EFF]/10 flex items-center justify-center shrink-0">
|
||||
<Icon className="w-5 h-5 text-[#336EFF]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-400 mb-0.5">{label}</p>
|
||||
<p className="text-sm font-medium text-white">{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getCourseTheme(courseName?: string) {
|
||||
if (!courseName) {
|
||||
return {
|
||||
bg: 'bg-slate-500/10',
|
||||
border: 'border-slate-500/20',
|
||||
text: 'text-slate-300',
|
||||
};
|
||||
}
|
||||
|
||||
const themes = [
|
||||
{
|
||||
bg: 'bg-blue-500/20 hover:bg-blue-500/30',
|
||||
border: 'border-blue-400/30',
|
||||
text: 'text-blue-100',
|
||||
},
|
||||
{
|
||||
bg: 'bg-indigo-500/20 hover:bg-indigo-500/30',
|
||||
border: 'border-indigo-400/30',
|
||||
text: 'text-indigo-100',
|
||||
},
|
||||
{
|
||||
bg: 'bg-cyan-500/20 hover:bg-cyan-500/30',
|
||||
border: 'border-cyan-400/30',
|
||||
text: 'text-cyan-100',
|
||||
},
|
||||
{
|
||||
bg: 'bg-sky-500/20 hover:bg-sky-500/30',
|
||||
border: 'border-sky-400/30',
|
||||
text: 'text-sky-100',
|
||||
},
|
||||
{
|
||||
bg: 'bg-violet-500/20 hover:bg-violet-500/30',
|
||||
border: 'border-violet-400/30',
|
||||
text: 'text-violet-100',
|
||||
},
|
||||
{
|
||||
bg: 'bg-teal-500/20 hover:bg-teal-500/30',
|
||||
border: 'border-teal-400/30',
|
||||
text: 'text-teal-100',
|
||||
},
|
||||
];
|
||||
|
||||
let hash = 0;
|
||||
for (let i = 0; i < courseName.length; i += 1) {
|
||||
hash = courseName.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
return themes[Math.abs(hash) % themes.length];
|
||||
}
|
||||
|
||||
function ScheduleView({ queried, schedule }: { queried: boolean; schedule: CourseResponse[] }) {
|
||||
if (!queried) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="h-64 flex flex-col items-center justify-center text-slate-500">
|
||||
<BookOpen className="w-12 h-12 mb-4 opacity-20" />
|
||||
<p>请先查询课表</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const days = ['周一', '周二', '周三', '周四', '周五'];
|
||||
const rows = buildScheduleTable(schedule);
|
||||
|
||||
return (
|
||||
<Card className="border-none bg-transparent shadow-none">
|
||||
<CardHeader className="px-0 pt-0">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div>
|
||||
<CardTitle className="text-xl">我的课表</CardTitle>
|
||||
<CardDescription>2025 春季学期</CardDescription>
|
||||
</div>
|
||||
<div className="flex gap-2 text-xs text-slate-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-2 h-2 rounded-full bg-blue-500" />
|
||||
{' '}
|
||||
必修
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-2 h-2 rounded-full bg-cyan-500" />
|
||||
{' '}
|
||||
选修
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto pb-2 -mx-1 px-1">
|
||||
<div className="min-w-[800px]">
|
||||
<table className="w-full border-separate border-spacing-2">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="w-10" aria-label="时段" />
|
||||
<th className="w-8" aria-label="节次" />
|
||||
{days.map((d) => (
|
||||
<th key={d} className="pb-2 text-center text-sm font-medium text-slate-400">
|
||||
{d}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row, index) => (
|
||||
<tr key={row.section}>
|
||||
{/* Morning/Afternoon label */}
|
||||
{index % 4 === 0 && (
|
||||
<td rowSpan={4} className="align-top pt-2">
|
||||
<div className="py-3 rounded-lg bg-white/5 text-center text-xs font-bold text-slate-400 [writing-mode:vertical-lr] h-full flex items-center justify-center tracking-widest border border-white/5">
|
||||
{row.section <= 4 ? '上午' : row.section <= 8 ? '下午' : '晚上'}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
|
||||
{/* Section Number */}
|
||||
<td className="align-middle text-center">
|
||||
<div className="text-sm font-mono text-slate-600 font-bold">{row.section}</div>
|
||||
</td>
|
||||
|
||||
{/* Cells */}
|
||||
{row.slots.map((slot, colIdx) => {
|
||||
if (slot.type === 'covered') return null;
|
||||
if (slot.type === 'empty') {
|
||||
return (
|
||||
<td key={`${row.section}-${colIdx}`} className="h-20 bg-white/[0.02] rounded-xl border border-white/5" />
|
||||
);
|
||||
}
|
||||
|
||||
const theme = getCourseTheme(slot.course?.courseName ?? '');
|
||||
return (
|
||||
<td key={`${row.section}-${colIdx}`} rowSpan={slot.rowSpan} className="h-20 align-top">
|
||||
<div
|
||||
className={cn(
|
||||
'w-full h-full p-3 rounded-xl border backdrop-blur-md transition-all hover:scale-[1.02] hover:shadow-lg flex flex-col justify-between group cursor-pointer',
|
||||
theme.bg,
|
||||
theme.border,
|
||||
)}
|
||||
>
|
||||
<div>
|
||||
<h3 className={cn('font-bold text-sm line-clamp-2 leading-tight mb-2', theme.text)}>
|
||||
{slot.course?.courseName}
|
||||
</h3>
|
||||
<p className={cn('text-xs flex items-center gap-1 opacity-80', theme.text)}>
|
||||
<MapPin className="w-3 h-3 opacity-70" />
|
||||
{' '}
|
||||
{slot.course?.classroom ?? '未知'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
<span
|
||||
className={cn(
|
||||
'text-[10px] px-1.5 py-0.5 rounded opacity-80 font-medium bg-black/10',
|
||||
theme.text,
|
||||
)}
|
||||
>
|
||||
{slot.course?.teacher ?? '老师'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function GradesView({ queried, grades }: { queried: boolean; grades: GradeResponse[] }) {
|
||||
if (!queried) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="h-64 flex flex-col items-center justify-center text-slate-500">
|
||||
<Award className="w-12 h-12 mb-4 opacity-20" />
|
||||
<p>请先查询成绩</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const terms = grades.reduce<Record<string, number[]>>((accumulator, grade) => {
|
||||
const term = grade.semester ?? '未分类';
|
||||
if (!accumulator[term]) {
|
||||
accumulator[term] = [];
|
||||
}
|
||||
accumulator[term].push(grade.grade ?? 0);
|
||||
return accumulator;
|
||||
}, {});
|
||||
|
||||
const getScoreStyle = (score: number) => {
|
||||
if (score >= 95) return 'bg-[#336EFF]/50 text-white';
|
||||
if (score >= 90) return 'bg-[#336EFF]/40 text-white/90';
|
||||
if (score >= 85) return 'bg-[#336EFF]/30 text-white/80';
|
||||
if (score >= 80) return 'bg-slate-700/60 text-white/70';
|
||||
if (score >= 75) return 'bg-slate-700/40 text-white/60';
|
||||
return 'bg-slate-800/60 text-white/50';
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-[#0f172a]/80 backdrop-blur-sm border-slate-800/50">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-lg font-medium text-white">成绩热力图</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{Object.entries(terms).map(([term, scores]) => (
|
||||
<div key={term} className="flex flex-col">
|
||||
<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">
|
||||
{scores.map((score, index) => (
|
||||
<div
|
||||
key={`${term}-${index}`}
|
||||
className={cn(
|
||||
'w-full py-1.5 rounded-full text-xs font-mono font-medium text-center transition-colors',
|
||||
getScoreStyle(score),
|
||||
)}
|
||||
>
|
||||
{score}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{Object.keys(terms).length === 0 && <div className="text-sm text-slate-500">暂无成绩数据</div>}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
18
.history/开发测试账号_20260314122451.md
Normal file
18
.history/开发测试账号_20260314122451.md
Normal file
@@ -0,0 +1,18 @@
|
||||
# 开发测试账号
|
||||
|
||||
以下账号会在后端以 `dev` profile 启动时自动初始化。
|
||||
|
||||
## 门户账号
|
||||
|
||||
| 门户用户名 | 门户密码 | 教务学号 | 教务密码 | 查询学期 | 网盘示例文件 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| `portal-demo` | `portal123456` | `2023123456` | `portal123456` | `2025-spring` | `迎新资料.txt`、`课程规划.md`、`campus-shot.png` |
|
||||
| `portal-study` | `study123456` | `2022456789` | `study123456` | `2024-fall` | `实验数据.csv`、`论文草稿.md`、`data-chart.png` |
|
||||
| `portal-design` | `design123456` | `2021789012` | `design123456` | `2024-spring` | `素材清单.txt`、`作品说明.md`、`ui-mockup.png` |
|
||||
|
||||
## 使用说明
|
||||
|
||||
- 先用上表中的“门户用户名 / 门户密码”登录站点。
|
||||
- 登录后进入网盘页，每个用户都会看到自己的 `下载 / 文档 / 图片` 目录，以及各自不同的样例文件。
|
||||
- 进入教务页后，填入对应的“教务学号 / 教务密码 / 查询学期”即可看到该用户对应的 mock 教务数据。
|
||||
- 当前开发环境的教务密码字段仅用于前端占位，后端主要依据登录态、学号和学期返回该用户的 mock 数据。为避免混淆，直接填表中的教务密码即可。
|
||||
18
.history/开发测试账号_20260314225231.md
Normal file
18
.history/开发测试账号_20260314225231.md
Normal file
@@ -0,0 +1,18 @@
|
||||
# 开发测试账号
|
||||
|
||||
以下账号会在后端以 `dev` profile 启动时自动初始化。
|
||||
|
||||
## 门户账号
|
||||
|
||||
| 门户用户名 | 门户密码 | 教务学号 | 教务密码 | 查询学期 | 网盘示例文件 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| `CCC` | `portal123456` | `2023123456` | `portal123456` | `2025-spring` | `迎新资料.txt`、`课程规划.md`、`campus-shot.png` |
|
||||
| `portal-study` | `study123456` | `2022456789` | `study123456` | `2024-fall` | `实验数据.csv`、`论文草稿.md`、`data-chart.png` |
|
||||
| `portal-design` | `design123456` | `2021789012` | `design123456` | `2024-spring` | `素材清单.txt`、`作品说明.md`、`ui-mockup.png` |
|
||||
|
||||
## 使用说明
|
||||
|
||||
- 先用上表中的“门户用户名 / 门户密码”登录站点。
|
||||
- 登录后进入网盘页，每个用户都会看到自己的 `下载 / 文档 / 图片` 目录，以及各自不同的样例文件。
|
||||
- 进入教务页后，填入对应的“教务学号 / 教务密码 / 查询学期”即可看到该用户对应的 mock 教务数据。
|
||||
- 当前开发环境的教务密码字段仅用于前端占位，后端主要依据登录态、学号和学期返回该用户的 mock 数据。为避免混淆，直接填表中的教务密码即可。
|
||||
18
.history/开发测试账号_20260314225233.md
Normal file
18
.history/开发测试账号_20260314225233.md
Normal file
@@ -0,0 +1,18 @@
|
||||
# 开发测试账号
|
||||
|
||||
以下账号会在后端以 `dev` profile 启动时自动初始化。
|
||||
|
||||
## 门户账号
|
||||
|
||||
| 门户用户名 | 门户密码 | 教务学号 | 教务密码 | 查询学期 | 网盘示例文件 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| `portal-demo` | `portal123456` | `2023123456` | `portal123456` | `2025-spring` | `迎新资料.txt`、`课程规划.md`、`campus-shot.png` |
|
||||
| `portal-study` | `study123456` | `2022456789` | `study123456` | `2024-fall` | `实验数据.csv`、`论文草稿.md`、`data-chart.png` |
|
||||
| `portal-design` | `design123456` | `2021789012` | `design123456` | `2024-spring` | `素材清单.txt`、`作品说明.md`、`ui-mockup.png` |
|
||||
|
||||
## 使用说明
|
||||
|
||||
- 先用上表中的“门户用户名 / 门户密码”登录站点。
|
||||
- 登录后进入网盘页，每个用户都会看到自己的 `下载 / 文档 / 图片` 目录，以及各自不同的样例文件。
|
||||
- 进入教务页后，填入对应的“教务学号 / 教务密码 / 查询学期”即可看到该用户对应的 mock 教务数据。
|
||||
- 当前开发环境的教务密码字段仅用于前端占位，后端主要依据登录态、学号和学期返回该用户的 mock 数据。为避免混淆，直接填表中的教务密码即可。
|
||||
@@ -35,6 +35,12 @@ public class User {
|
||||
@Column(name = "created_at", nullable = false)
|
||||
private LocalDateTime createdAt;
|
||||
|
||||
@Column(name = "last_school_student_id", length = 64)
|
||||
private String lastSchoolStudentId;
|
||||
|
||||
@Column(name = "last_school_semester", length = 64)
|
||||
private String lastSchoolSemester;
|
||||
|
||||
@PrePersist
|
||||
public void prePersist() {
|
||||
if (createdAt == null) {
|
||||
@@ -81,4 +87,20 @@ public class User {
|
||||
public void setCreatedAt(LocalDateTime createdAt) {
|
||||
this.createdAt = createdAt;
|
||||
}
|
||||
|
||||
public String getLastSchoolStudentId() {
|
||||
return lastSchoolStudentId;
|
||||
}
|
||||
|
||||
public void setLastSchoolStudentId(String lastSchoolStudentId) {
|
||||
this.lastSchoolStudentId = lastSchoolStudentId;
|
||||
}
|
||||
|
||||
public String getLastSchoolSemester() {
|
||||
return lastSchoolSemester;
|
||||
}
|
||||
|
||||
public void setLastSchoolSemester(String lastSchoolSemester) {
|
||||
this.lastSchoolSemester = lastSchoolSemester;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,9 +3,12 @@ package com.yoyuzh.cqu;
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Optional;
|
||||
|
||||
public interface CourseRepository extends JpaRepository<Course, Long> {
|
||||
List<Course> findByUserIdAndStudentIdAndSemesterOrderByDayOfWeekAscStartTimeAsc(Long userId, String studentId, String semester);
|
||||
|
||||
Optional<Course> findTopByUserIdOrderByCreatedAtDesc(Long userId);
|
||||
|
||||
void deleteByUserIdAndStudentIdAndSemester(Long userId, String studentId, String semester);
|
||||
}
|
||||
|
||||
@@ -26,16 +26,24 @@ public class CquController {
|
||||
@GetMapping("/schedule")
|
||||
public ApiResponse<List<CourseResponse>> schedule(@AuthenticationPrincipal UserDetails userDetails,
|
||||
@RequestParam String semester,
|
||||
@RequestParam String studentId) {
|
||||
return ApiResponse.success(cquDataService.getSchedule(resolveUser(userDetails), semester, studentId));
|
||||
@RequestParam String studentId,
|
||||
@RequestParam(defaultValue = "false") boolean refresh) {
|
||||
return ApiResponse.success(cquDataService.getSchedule(resolveUser(userDetails), semester, studentId, refresh));
|
||||
}
|
||||
|
||||
@Operation(summary = "获取成绩")
|
||||
@GetMapping("/grades")
|
||||
public ApiResponse<List<GradeResponse>> grades(@AuthenticationPrincipal UserDetails userDetails,
|
||||
@RequestParam String semester,
|
||||
@RequestParam String studentId) {
|
||||
return ApiResponse.success(cquDataService.getGrades(resolveUser(userDetails), semester, studentId));
|
||||
@RequestParam String studentId,
|
||||
@RequestParam(defaultValue = "false") boolean refresh) {
|
||||
return ApiResponse.success(cquDataService.getGrades(resolveUser(userDetails), semester, studentId, refresh));
|
||||
}
|
||||
|
||||
@Operation(summary = "获取最近一次教务数据")
|
||||
@GetMapping("/latest")
|
||||
public ApiResponse<LatestSchoolDataResponse> latest(@AuthenticationPrincipal UserDetails userDetails) {
|
||||
return ApiResponse.success(cquDataService.getLatest(resolveUser(userDetails)));
|
||||
}
|
||||
|
||||
private User resolveUser(UserDetails userDetails) {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
package com.yoyuzh.cqu;
|
||||
|
||||
import com.yoyuzh.auth.UserRepository;
|
||||
import com.yoyuzh.auth.User;
|
||||
import com.yoyuzh.common.BusinessException;
|
||||
import com.yoyuzh.common.ErrorCode;
|
||||
@@ -10,6 +11,7 @@ import org.springframework.transaction.annotation.Transactional;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.Optional;
|
||||
|
||||
@Service
|
||||
@RequiredArgsConstructor
|
||||
@@ -18,47 +20,82 @@ public class CquDataService {
|
||||
private final CquApiClient cquApiClient;
|
||||
private final CourseRepository courseRepository;
|
||||
private final GradeRepository gradeRepository;
|
||||
private final UserRepository userRepository;
|
||||
private final CquApiProperties cquApiProperties;
|
||||
|
||||
@Transactional
|
||||
public List<CourseResponse> getSchedule(User user, String semester, String studentId) {
|
||||
return getSchedule(user, semester, studentId, false);
|
||||
}
|
||||
|
||||
@Transactional
|
||||
public List<CourseResponse> getSchedule(User user, String semester, String studentId, boolean refresh) {
|
||||
requireLoginIfNecessary(user);
|
||||
if (user != null && !refresh) {
|
||||
List<CourseResponse> stored = readSavedSchedule(user.getId(), studentId, semester);
|
||||
if (!stored.isEmpty()) {
|
||||
rememberLastSchoolQuery(user, studentId, semester);
|
||||
return stored;
|
||||
}
|
||||
}
|
||||
|
||||
List<CourseResponse> responses = cquApiClient.fetchSchedule(semester, studentId).stream()
|
||||
.map(this::toCourseResponse)
|
||||
.toList();
|
||||
if (user != null) {
|
||||
saveCourses(user, semester, studentId, responses);
|
||||
return courseRepository.findByUserIdAndStudentIdAndSemesterOrderByDayOfWeekAscStartTimeAsc(
|
||||
user.getId(), studentId, semester)
|
||||
.stream()
|
||||
.map(item -> new CourseResponse(
|
||||
item.getCourseName(),
|
||||
item.getTeacher(),
|
||||
item.getClassroom(),
|
||||
item.getDayOfWeek(),
|
||||
item.getStartTime(),
|
||||
item.getEndTime()))
|
||||
.toList();
|
||||
rememberLastSchoolQuery(user, studentId, semester);
|
||||
return readSavedSchedule(user.getId(), studentId, semester);
|
||||
}
|
||||
return responses;
|
||||
}
|
||||
|
||||
@Transactional
|
||||
public List<GradeResponse> getGrades(User user, String semester, String studentId) {
|
||||
return getGrades(user, semester, studentId, false);
|
||||
}
|
||||
|
||||
@Transactional
|
||||
public List<GradeResponse> getGrades(User user, String semester, String studentId, boolean refresh) {
|
||||
requireLoginIfNecessary(user);
|
||||
if (user != null && !refresh
|
||||
&& gradeRepository.existsByUserIdAndStudentIdAndSemester(user.getId(), studentId, semester)) {
|
||||
rememberLastSchoolQuery(user, studentId, semester);
|
||||
return readSavedGrades(user.getId(), studentId);
|
||||
}
|
||||
|
||||
List<GradeResponse> responses = cquApiClient.fetchGrades(semester, studentId).stream()
|
||||
.map(this::toGradeResponse)
|
||||
.toList();
|
||||
if (user != null) {
|
||||
saveGrades(user, semester, studentId, responses);
|
||||
return gradeRepository.findByUserIdAndStudentIdOrderBySemesterAscGradeDesc(user.getId(), studentId)
|
||||
.stream()
|
||||
.map(item -> new GradeResponse(item.getCourseName(), item.getGrade(), item.getSemester()))
|
||||
.toList();
|
||||
rememberLastSchoolQuery(user, studentId, semester);
|
||||
return readSavedGrades(user.getId(), studentId);
|
||||
}
|
||||
return responses;
|
||||
}
|
||||
|
||||
@Transactional
|
||||
public LatestSchoolDataResponse getLatest(User user) {
|
||||
requireLoginIfNecessary(user);
|
||||
if (user == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
QueryContext context = resolveLatestContext(user);
|
||||
if (context == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
List<CourseResponse> schedule = readSavedSchedule(user.getId(), context.studentId(), context.semester());
|
||||
List<GradeResponse> grades = readSavedGrades(user.getId(), context.studentId());
|
||||
if (schedule.isEmpty() && grades.isEmpty()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return new LatestSchoolDataResponse(context.studentId(), context.semester(), schedule, grades);
|
||||
}
|
||||
|
||||
private void requireLoginIfNecessary(User user) {
|
||||
if (cquApiProperties.isRequireLogin() && user == null) {
|
||||
throw new BusinessException(ErrorCode.NOT_LOGGED_IN, "该接口需要登录后访问");
|
||||
@@ -97,6 +134,77 @@ public class CquDataService {
|
||||
}).toList());
|
||||
}
|
||||
|
||||
private List<CourseResponse> readSavedSchedule(Long userId, String studentId, String semester) {
|
||||
return courseRepository.findByUserIdAndStudentIdAndSemesterOrderByDayOfWeekAscStartTimeAsc(
|
||||
userId, studentId, semester)
|
||||
.stream()
|
||||
.map(item -> new CourseResponse(
|
||||
item.getCourseName(),
|
||||
item.getTeacher(),
|
||||
item.getClassroom(),
|
||||
item.getDayOfWeek(),
|
||||
item.getStartTime(),
|
||||
item.getEndTime()))
|
||||
.toList();
|
||||
}
|
||||
|
||||
private List<GradeResponse> readSavedGrades(Long userId, String studentId) {
|
||||
return gradeRepository.findByUserIdAndStudentIdOrderBySemesterAscGradeDesc(userId, studentId)
|
||||
.stream()
|
||||
.map(item -> new GradeResponse(item.getCourseName(), item.getGrade(), item.getSemester()))
|
||||
.toList();
|
||||
}
|
||||
|
||||
private void rememberLastSchoolQuery(User user, String studentId, String semester) {
|
||||
boolean changed = false;
|
||||
if (!semester.equals(user.getLastSchoolSemester())) {
|
||||
user.setLastSchoolSemester(semester);
|
||||
changed = true;
|
||||
}
|
||||
if (!studentId.equals(user.getLastSchoolStudentId())) {
|
||||
user.setLastSchoolStudentId(studentId);
|
||||
changed = true;
|
||||
}
|
||||
if (changed) {
|
||||
userRepository.save(user);
|
||||
}
|
||||
}
|
||||
|
||||
private QueryContext resolveLatestContext(User user) {
|
||||
if (hasText(user.getLastSchoolStudentId()) && hasText(user.getLastSchoolSemester())) {
|
||||
return new QueryContext(user.getLastSchoolStudentId(), user.getLastSchoolSemester());
|
||||
}
|
||||
|
||||
Optional<Course> latestCourse = courseRepository.findTopByUserIdOrderByCreatedAtDesc(user.getId());
|
||||
Optional<Grade> latestGrade = gradeRepository.findTopByUserIdOrderByCreatedAtDesc(user.getId());
|
||||
if (latestCourse.isEmpty() && latestGrade.isEmpty()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
QueryContext context;
|
||||
if (latestGrade.isEmpty()) {
|
||||
context = new QueryContext(latestCourse.get().getStudentId(), latestCourse.get().getSemester());
|
||||
} else if (latestCourse.isEmpty()) {
|
||||
context = new QueryContext(latestGrade.get().getStudentId(), latestGrade.get().getSemester());
|
||||
} else if (latestCourse.get().getCreatedAt().isAfter(latestGrade.get().getCreatedAt())) {
|
||||
context = new QueryContext(latestCourse.get().getStudentId(), latestCourse.get().getSemester());
|
||||
} else {
|
||||
context = new QueryContext(latestGrade.get().getStudentId(), latestGrade.get().getSemester());
|
||||
}
|
||||
|
||||
if (hasText(context.studentId()) && hasText(context.semester())) {
|
||||
user.setLastSchoolStudentId(context.studentId());
|
||||
user.setLastSchoolSemester(context.semester());
|
||||
userRepository.save(user);
|
||||
return context;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
private boolean hasText(String value) {
|
||||
return value != null && !value.isBlank();
|
||||
}
|
||||
|
||||
private CourseResponse toCourseResponse(Map<String, Object> source) {
|
||||
return new CourseResponse(
|
||||
stringValue(source, "courseName"),
|
||||
@@ -128,4 +236,7 @@ public class CquDataService {
|
||||
Object value = source.get(key);
|
||||
return value == null ? null : Double.parseDouble(value.toString());
|
||||
}
|
||||
|
||||
private record QueryContext(String studentId, String semester) {
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,9 +3,14 @@ package com.yoyuzh.cqu;
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Optional;
|
||||
|
||||
public interface GradeRepository extends JpaRepository<Grade, Long> {
|
||||
List<Grade> findByUserIdAndStudentIdOrderBySemesterAscGradeDesc(Long userId, String studentId);
|
||||
|
||||
boolean existsByUserIdAndStudentIdAndSemester(Long userId, String studentId, String semester);
|
||||
|
||||
Optional<Grade> findTopByUserIdOrderByCreatedAtDesc(Long userId);
|
||||
|
||||
void deleteByUserIdAndStudentIdAndSemester(Long userId, String studentId, String semester);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
package com.yoyuzh.cqu;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
public record LatestSchoolDataResponse(
|
||||
String studentId,
|
||||
String semester,
|
||||
List<CourseResponse> schedule,
|
||||
List<GradeResponse> grades
|
||||
) {
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
package com.yoyuzh.cqu;
|
||||
|
||||
import com.yoyuzh.auth.User;
|
||||
import com.yoyuzh.auth.UserRepository;
|
||||
import com.yoyuzh.config.CquApiProperties;
|
||||
import org.junit.jupiter.api.Test;
|
||||
import org.junit.jupiter.api.extension.ExtendWith;
|
||||
@@ -11,9 +12,11 @@ import org.mockito.junit.jupiter.MockitoExtension;
|
||||
import java.time.LocalDateTime;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.Optional;
|
||||
|
||||
import static org.assertj.core.api.Assertions.assertThat;
|
||||
import static org.mockito.ArgumentMatchers.anyList;
|
||||
import static org.mockito.Mockito.verifyNoInteractions;
|
||||
import static org.mockito.Mockito.when;
|
||||
|
||||
@ExtendWith(MockitoExtension.class)
|
||||
@@ -28,6 +31,9 @@ class CquDataServiceTest {
|
||||
@Mock
|
||||
private GradeRepository gradeRepository;
|
||||
|
||||
@Mock
|
||||
private UserRepository userRepository;
|
||||
|
||||
@InjectMocks
|
||||
private CquDataService cquDataService;
|
||||
|
||||
@@ -35,7 +41,7 @@ class CquDataServiceTest {
|
||||
void shouldNormalizeScheduleFromRemoteApi() {
|
||||
CquApiProperties properties = new CquApiProperties();
|
||||
properties.setRequireLogin(false);
|
||||
cquDataService = new CquDataService(cquApiClient, courseRepository, gradeRepository, properties);
|
||||
cquDataService = new CquDataService(cquApiClient, courseRepository, gradeRepository, userRepository, properties);
|
||||
when(cquApiClient.fetchSchedule("2025-2026-1", "20230001")).thenReturn(List.of(Map.of(
|
||||
"courseName", "Java",
|
||||
"teacher", "Zhang",
|
||||
@@ -56,7 +62,7 @@ class CquDataServiceTest {
|
||||
void shouldPersistGradesForLoggedInUserWhenAvailable() {
|
||||
CquApiProperties properties = new CquApiProperties();
|
||||
properties.setRequireLogin(true);
|
||||
cquDataService = new CquDataService(cquApiClient, courseRepository, gradeRepository, properties);
|
||||
cquDataService = new CquDataService(cquApiClient, courseRepository, gradeRepository, userRepository, properties);
|
||||
User user = new User();
|
||||
user.setId(1L);
|
||||
user.setUsername("alice");
|
||||
@@ -83,4 +89,114 @@ class CquDataServiceTest {
|
||||
assertThat(response).hasSize(1);
|
||||
assertThat(response.get(0).grade()).isEqualTo(95D);
|
||||
}
|
||||
|
||||
@Test
|
||||
void shouldReturnPersistedScheduleWithoutCallingRemoteApiWhenRefreshIsDisabled() {
|
||||
CquApiProperties properties = new CquApiProperties();
|
||||
properties.setRequireLogin(true);
|
||||
cquDataService = new CquDataService(cquApiClient, courseRepository, gradeRepository, userRepository, properties);
|
||||
|
||||
User user = new User();
|
||||
user.setId(1L);
|
||||
user.setUsername("alice");
|
||||
|
||||
Course persisted = new Course();
|
||||
persisted.setUser(user);
|
||||
persisted.setCourseName("Java");
|
||||
persisted.setTeacher("Zhang");
|
||||
persisted.setClassroom("A101");
|
||||
persisted.setDayOfWeek(1);
|
||||
persisted.setStartTime(1);
|
||||
persisted.setEndTime(2);
|
||||
persisted.setSemester("2025-spring");
|
||||
persisted.setStudentId("20230001");
|
||||
|
||||
when(courseRepository.findByUserIdAndStudentIdAndSemesterOrderByDayOfWeekAscStartTimeAsc(1L, "20230001", "2025-spring"))
|
||||
.thenReturn(List.of(persisted));
|
||||
|
||||
List<CourseResponse> response = cquDataService.getSchedule(user, "2025-spring", "20230001", false);
|
||||
|
||||
assertThat(response).extracting(CourseResponse::courseName).containsExactly("Java");
|
||||
verifyNoInteractions(cquApiClient);
|
||||
}
|
||||
|
||||
@Test
|
||||
void shouldReturnLatestStoredSchoolDataFromPersistedUserContext() {
|
||||
CquApiProperties properties = new CquApiProperties();
|
||||
properties.setRequireLogin(true);
|
||||
cquDataService = new CquDataService(cquApiClient, courseRepository, gradeRepository, userRepository, properties);
|
||||
|
||||
User user = new User();
|
||||
user.setId(1L);
|
||||
user.setUsername("alice");
|
||||
user.setLastSchoolStudentId("20230001");
|
||||
user.setLastSchoolSemester("2025-spring");
|
||||
|
||||
Course course = new Course();
|
||||
course.setUser(user);
|
||||
course.setCourseName("Java");
|
||||
course.setTeacher("Zhang");
|
||||
course.setClassroom("A101");
|
||||
course.setDayOfWeek(1);
|
||||
course.setStartTime(1);
|
||||
course.setEndTime(2);
|
||||
course.setSemester("2025-spring");
|
||||
course.setStudentId("20230001");
|
||||
|
||||
Grade grade = new Grade();
|
||||
grade.setUser(user);
|
||||
grade.setCourseName("Java");
|
||||
grade.setGrade(95D);
|
||||
grade.setSemester("2025-spring");
|
||||
grade.setStudentId("20230001");
|
||||
|
||||
when(courseRepository.findByUserIdAndStudentIdAndSemesterOrderByDayOfWeekAscStartTimeAsc(1L, "20230001", "2025-spring"))
|
||||
.thenReturn(List.of(course));
|
||||
when(gradeRepository.findByUserIdAndStudentIdOrderBySemesterAscGradeDesc(1L, "20230001"))
|
||||
.thenReturn(List.of(grade));
|
||||
|
||||
LatestSchoolDataResponse response = cquDataService.getLatest(user);
|
||||
|
||||
assertThat(response.studentId()).isEqualTo("20230001");
|
||||
assertThat(response.semester()).isEqualTo("2025-spring");
|
||||
assertThat(response.schedule()).extracting(CourseResponse::courseName).containsExactly("Java");
|
||||
assertThat(response.grades()).extracting(GradeResponse::courseName).containsExactly("Java");
|
||||
}
|
||||
|
||||
@Test
|
||||
void shouldFallbackToMostRecentStoredSchoolDataWhenUserContextIsEmpty() {
|
||||
CquApiProperties properties = new CquApiProperties();
|
||||
properties.setRequireLogin(true);
|
||||
cquDataService = new CquDataService(cquApiClient, courseRepository, gradeRepository, userRepository, properties);
|
||||
|
||||
User user = new User();
|
||||
user.setId(1L);
|
||||
user.setUsername("alice");
|
||||
|
||||
Course latestCourse = new Course();
|
||||
latestCourse.setUser(user);
|
||||
latestCourse.setCourseName("Java");
|
||||
latestCourse.setTeacher("Zhang");
|
||||
latestCourse.setClassroom("A101");
|
||||
latestCourse.setDayOfWeek(1);
|
||||
latestCourse.setStartTime(1);
|
||||
latestCourse.setEndTime(2);
|
||||
latestCourse.setSemester("2025-spring");
|
||||
latestCourse.setStudentId("20230001");
|
||||
latestCourse.setCreatedAt(LocalDateTime.now());
|
||||
|
||||
when(courseRepository.findTopByUserIdOrderByCreatedAtDesc(1L)).thenReturn(Optional.of(latestCourse));
|
||||
when(gradeRepository.findTopByUserIdOrderByCreatedAtDesc(1L)).thenReturn(Optional.empty());
|
||||
when(courseRepository.findByUserIdAndStudentIdAndSemesterOrderByDayOfWeekAscStartTimeAsc(1L, "20230001", "2025-spring"))
|
||||
.thenReturn(List.of(latestCourse));
|
||||
when(gradeRepository.findByUserIdAndStudentIdOrderBySemesterAscGradeDesc(1L, "20230001"))
|
||||
.thenReturn(List.of());
|
||||
|
||||
LatestSchoolDataResponse response = cquDataService.getLatest(user);
|
||||
|
||||
assertThat(response.studentId()).isEqualTo("20230001");
|
||||
assertThat(response.semester()).isEqualTo("2025-spring");
|
||||
assertThat(user.getLastSchoolStudentId()).isEqualTo("20230001");
|
||||
assertThat(user.getLastSchoolSemester()).isEqualTo("2025-spring");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@ class CquDataServiceTransactionTest {
|
||||
)
|
||||
));
|
||||
|
||||
List<GradeResponse> response = cquDataService.getGrades(user, "2025-spring", "2023123456");
|
||||
List<GradeResponse> response = cquDataService.getGrades(user, "2025-spring", "2023123456", true);
|
||||
|
||||
assertThat(response).hasSize(1);
|
||||
assertThat(response.get(0).courseName()).isEqualTo("Java");
|
||||
@@ -74,5 +74,9 @@ class CquDataServiceTransactionTest {
|
||||
.first()
|
||||
.extracting(Grade::getCourseName)
|
||||
.isEqualTo("Java");
|
||||
assertThat(userRepository.findById(user.getId()))
|
||||
.get()
|
||||
.extracting(User::getLastSchoolStudentId, User::getLastSchoolSemester)
|
||||
.containsExactly("2023123456", "2025-spring");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@ export function Layout() {
|
||||
</div>
|
||||
|
||||
{/* Top Navigation */}
|
||||
<header className="sticky top-0 z-50 w-full glass-panel border-b border-white/10 bg-[#07101D]/60 backdrop-blur-xl">
|
||||
<header className="fixed inset-x-0 top-0 z-50 w-full glass-panel border-b border-white/10 bg-[#07101D]/60 backdrop-blur-xl">
|
||||
<div className="container mx-auto px-4 h-16 flex items-center justify-between">
|
||||
{/* Brand */}
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -85,7 +85,7 @@ export function Layout() {
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 container mx-auto px-4 py-8 relative z-10">
|
||||
<main className="relative z-10 flex-1 container mx-auto px-4 pb-8 pt-24">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
74
front/src/lib/schedule-table.test.ts
Normal file
74
front/src/lib/schedule-table.test.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import { test } from 'node:test';
|
||||
|
||||
import type { CourseResponse } from './types';
|
||||
import { buildScheduleTable, getScheduleCellHeight, getScheduleDividerOffsets } from './schedule-table';
|
||||
|
||||
test('buildScheduleTable creates 12 sections with empty slots preserved', () => {
|
||||
const schedule: CourseResponse[] = [
|
||||
{
|
||||
courseName: 'Advanced Java',
|
||||
teacher: 'Li',
|
||||
classroom: 'A101',
|
||||
dayOfWeek: 1,
|
||||
startTime: 1,
|
||||
endTime: 2,
|
||||
},
|
||||
{
|
||||
courseName: 'Networks',
|
||||
teacher: 'Wang',
|
||||
classroom: 'B202',
|
||||
dayOfWeek: 3,
|
||||
startTime: 5,
|
||||
endTime: 6,
|
||||
},
|
||||
];
|
||||
|
||||
const table = buildScheduleTable(schedule);
|
||||
|
||||
assert.equal(table.length, 12);
|
||||
assert.equal(table[0].slots.length, 7);
|
||||
assert.equal(table[0].section, 1);
|
||||
assert.equal(table[11].section, 12);
|
||||
assert.equal(table[0].period, 'morning');
|
||||
assert.equal(table[4].period, 'noon');
|
||||
assert.equal(table[5].period, 'afternoon');
|
||||
assert.equal(table[9].period, 'evening');
|
||||
assert.equal(table[0].slots[0]?.course?.courseName, 'Advanced Java');
|
||||
assert.equal(table[1].slots[0]?.type, 'covered');
|
||||
assert.equal(table[2].slots[0]?.type, 'empty');
|
||||
assert.equal(table[4].slots[2]?.course?.courseName, 'Networks');
|
||||
assert.equal(table[5].slots[2]?.type, 'covered');
|
||||
assert.equal(table[8].slots[4]?.type, 'empty');
|
||||
assert.equal(table[8].slots[6]?.type, 'empty');
|
||||
});
|
||||
|
||||
test('buildScheduleTable clamps invalid section ranges safely', () => {
|
||||
const schedule: CourseResponse[] = [
|
||||
{
|
||||
courseName: 'Night Studio',
|
||||
teacher: 'Xu',
|
||||
classroom: 'C303',
|
||||
dayOfWeek: 5,
|
||||
startTime: 11,
|
||||
endTime: 14,
|
||||
},
|
||||
];
|
||||
|
||||
const table = buildScheduleTable(schedule);
|
||||
|
||||
assert.equal(table[10].slots[4]?.rowSpan, 2);
|
||||
assert.equal(table[11].slots[4]?.type, 'covered');
|
||||
});
|
||||
|
||||
test('getScheduleCellHeight returns merged visual height for rowspan cells', () => {
|
||||
assert.equal(getScheduleCellHeight(1), 96);
|
||||
assert.equal(getScheduleCellHeight(2), 200);
|
||||
assert.equal(getScheduleCellHeight(4), 408);
|
||||
});
|
||||
|
||||
test('getScheduleDividerOffsets returns internal section boundaries for merged cells', () => {
|
||||
assert.deepEqual(getScheduleDividerOffsets(1), []);
|
||||
assert.deepEqual(getScheduleDividerOffsets(2), [100]);
|
||||
assert.deepEqual(getScheduleDividerOffsets(4), [100, 204, 308]);
|
||||
});
|
||||
77
front/src/lib/schedule-table.ts
Normal file
77
front/src/lib/schedule-table.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
import type { CourseResponse } from './types';
|
||||
|
||||
export interface ScheduleSlot {
|
||||
type: 'empty' | 'course' | 'covered';
|
||||
course?: CourseResponse;
|
||||
rowSpan?: number;
|
||||
}
|
||||
|
||||
export interface ScheduleRow {
|
||||
section: number;
|
||||
period: 'morning' | 'noon' | 'afternoon' | 'evening';
|
||||
slots: ScheduleSlot[];
|
||||
}
|
||||
|
||||
const SECTION_COUNT = 12;
|
||||
const WEEKDAY_COUNT = 7;
|
||||
const SECTION_CELL_HEIGHT = 96;
|
||||
const SECTION_CELL_GAP = 8;
|
||||
|
||||
function getPeriod(section: number): ScheduleRow['period'] {
|
||||
if (section <= 4) {
|
||||
return 'morning';
|
||||
}
|
||||
if (section === 5) {
|
||||
return 'noon';
|
||||
}
|
||||
if (section <= 8) {
|
||||
return 'afternoon';
|
||||
}
|
||||
return 'evening';
|
||||
}
|
||||
|
||||
export function buildScheduleTable(schedule: CourseResponse[]) {
|
||||
const rows: ScheduleRow[] = Array.from({ length: SECTION_COUNT }, (_, index) => ({
|
||||
section: index + 1,
|
||||
period: getPeriod(index + 1),
|
||||
slots: Array.from({ length: WEEKDAY_COUNT }, () => ({ type: 'empty' as const })),
|
||||
}));
|
||||
|
||||
for (const course of schedule) {
|
||||
const dayIndex = (course.dayOfWeek ?? 0) - 1;
|
||||
if (dayIndex < 0 || dayIndex >= WEEKDAY_COUNT) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const startSection = Math.max(1, Math.min(SECTION_COUNT, course.startTime ?? 1));
|
||||
const endSection = Math.max(startSection, Math.min(SECTION_COUNT, course.endTime ?? startSection));
|
||||
const rowSpan = endSection - startSection + 1;
|
||||
const startRowIndex = startSection - 1;
|
||||
|
||||
rows[startRowIndex].slots[dayIndex] = {
|
||||
type: 'course',
|
||||
course,
|
||||
rowSpan,
|
||||
};
|
||||
|
||||
for (let section = startSection + 1; section <= endSection; section += 1) {
|
||||
rows[section - 1].slots[dayIndex] = {
|
||||
type: 'covered',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return rows;
|
||||
}
|
||||
|
||||
export function getScheduleCellHeight(rowSpan: number) {
|
||||
const safeRowSpan = Math.max(1, rowSpan);
|
||||
return safeRowSpan * SECTION_CELL_HEIGHT + (safeRowSpan - 1) * SECTION_CELL_GAP;
|
||||
}
|
||||
|
||||
export function getScheduleDividerOffsets(rowSpan: number) {
|
||||
const safeRowSpan = Math.max(1, rowSpan);
|
||||
return Array.from({ length: safeRowSpan - 1 }, (_, index) =>
|
||||
(index + 1) * SECTION_CELL_HEIGHT + index * SECTION_CELL_GAP + SECTION_CELL_GAP / 2,
|
||||
);
|
||||
}
|
||||
22
front/src/lib/school.ts
Normal file
22
front/src/lib/school.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { apiRequest } from './api';
|
||||
import { writeCachedValue } from './cache';
|
||||
import { getSchoolResultsCacheKey, writeStoredSchoolQuery } from './page-cache';
|
||||
import type { LatestSchoolDataResponse } from './types';
|
||||
|
||||
export async function fetchLatestSchoolData() {
|
||||
return apiRequest<LatestSchoolDataResponse | null>('/cqu/latest');
|
||||
}
|
||||
|
||||
export function cacheLatestSchoolData(latest: LatestSchoolDataResponse) {
|
||||
writeStoredSchoolQuery({
|
||||
studentId: latest.studentId,
|
||||
semester: latest.semester,
|
||||
});
|
||||
writeCachedValue(getSchoolResultsCacheKey(latest.studentId, latest.semester), {
|
||||
queried: true,
|
||||
studentId: latest.studentId,
|
||||
semester: latest.semester,
|
||||
schedule: latest.schedule,
|
||||
grades: latest.grades,
|
||||
});
|
||||
}
|
||||
@@ -46,3 +46,10 @@ export interface GradeResponse {
|
||||
grade: number | null;
|
||||
semester: string | null;
|
||||
}
|
||||
|
||||
export interface LatestSchoolDataResponse {
|
||||
studentId: string;
|
||||
semester: string;
|
||||
schedule: CourseResponse[];
|
||||
grades: GradeResponse[];
|
||||
}
|
||||
|
||||
@@ -18,7 +18,8 @@ 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 { getOverviewCacheKey, getSchoolResultsCacheKey, readStoredSchoolQuery, writeStoredSchoolQuery } from '@/src/lib/page-cache';
|
||||
import { cacheLatestSchoolData, fetchLatestSchoolData } from '@/src/lib/school';
|
||||
import { readStoredSession } from '@/src/lib/session';
|
||||
import type { CourseResponse, FileMetadata, GradeResponse, PageResponse, UserProfile } from '@/src/lib/types';
|
||||
|
||||
@@ -107,27 +108,32 @@ export default function Overview() {
|
||||
setRecentFiles(filesRecent);
|
||||
setRootFiles(filesRoot.items);
|
||||
|
||||
let scheduleData: CourseResponse[] = [];
|
||||
let gradesData: GradeResponse[] = [];
|
||||
const schoolQuery = readStoredSchoolQuery();
|
||||
if (!schoolQuery?.studentId || !schoolQuery?.semester) {
|
||||
writeCachedValue(getOverviewCacheKey(), {
|
||||
profile: user,
|
||||
recentFiles: filesRecent,
|
||||
rootFiles: filesRoot.items,
|
||||
schedule: [],
|
||||
grades: [],
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (schoolQuery?.studentId && schoolQuery?.semester) {
|
||||
const queryString = new URLSearchParams({
|
||||
studentId: schoolQuery.studentId,
|
||||
semester: schoolQuery.semester,
|
||||
}).toString();
|
||||
|
||||
const [scheduleData, gradesData] = await Promise.all([
|
||||
[scheduleData, gradesData] = await Promise.all([
|
||||
apiRequest<CourseResponse[]>(`/cqu/schedule?${queryString}`),
|
||||
apiRequest<GradeResponse[]>(`/cqu/grades?${queryString}`),
|
||||
]);
|
||||
} else {
|
||||
const latest = await fetchLatestSchoolData();
|
||||
if (latest) {
|
||||
cacheLatestSchoolData(latest);
|
||||
writeStoredSchoolQuery({
|
||||
studentId: latest.studentId,
|
||||
semester: latest.semester,
|
||||
});
|
||||
scheduleData = latest.schedule;
|
||||
gradesData = latest.grades;
|
||||
}
|
||||
}
|
||||
|
||||
if (!cancelled) {
|
||||
setSchedule(scheduleData);
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { GraduationCap, Calendar, User, Lock, Search, BookOpen, ChevronRight, Award } from 'lucide-react';
|
||||
import { Award, BookOpen, Calendar, Lock, MapPin, Search, User } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/src/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/src/components/ui/card';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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 { cacheLatestSchoolData, fetchLatestSchoolData } from '@/src/lib/school';
|
||||
import { buildScheduleTable } from '@/src/lib/schedule-table';
|
||||
import type { CourseResponse, GradeResponse, LatestSchoolDataResponse } from '@/src/lib/types';
|
||||
import { cn } from '@/src/lib/utils';
|
||||
|
||||
function formatSections(startTime?: number | null, endTime?: number | null) {
|
||||
@@ -19,6 +21,76 @@ function formatSections(startTime?: number | null, endTime?: number | null) {
|
||||
return `第 ${startTime}-${endTime} 节`;
|
||||
}
|
||||
|
||||
function getCourseTheme(courseName?: string) {
|
||||
const themes = [
|
||||
{
|
||||
panel: 'bg-gradient-to-br from-[#336EFF]/26 via-[#4D7FFF]/18 to-[#7AA2FF]/12',
|
||||
border: 'border-[#5E88FF]/45',
|
||||
accent: 'bg-[#5D8BFF]',
|
||||
title: 'text-blue-50',
|
||||
meta: 'text-blue-100/80',
|
||||
badge: 'bg-[#336EFF]/22 text-blue-100',
|
||||
shadow: 'shadow-[0_10px_30px_rgba(51,110,255,0.18)]',
|
||||
},
|
||||
{
|
||||
panel: 'bg-gradient-to-br from-cyan-500/24 via-sky-500/18 to-blue-500/10',
|
||||
border: 'border-cyan-400/40',
|
||||
accent: 'bg-cyan-400',
|
||||
title: 'text-cyan-50',
|
||||
meta: 'text-cyan-100/80',
|
||||
badge: 'bg-cyan-500/18 text-cyan-100',
|
||||
shadow: 'shadow-[0_10px_30px_rgba(34,211,238,0.16)]',
|
||||
},
|
||||
{
|
||||
panel: 'bg-gradient-to-br from-indigo-500/24 via-blue-500/18 to-slate-500/8',
|
||||
border: 'border-indigo-400/40',
|
||||
accent: 'bg-indigo-400',
|
||||
title: 'text-indigo-50',
|
||||
meta: 'text-indigo-100/80',
|
||||
badge: 'bg-indigo-500/18 text-indigo-100',
|
||||
shadow: 'shadow-[0_10px_30px_rgba(99,102,241,0.16)]',
|
||||
},
|
||||
{
|
||||
panel: 'bg-gradient-to-br from-sky-500/24 via-blue-500/16 to-violet-500/10',
|
||||
border: 'border-sky-400/40',
|
||||
accent: 'bg-sky-400',
|
||||
title: 'text-sky-50',
|
||||
meta: 'text-sky-100/80',
|
||||
badge: 'bg-sky-500/18 text-sky-100',
|
||||
shadow: 'shadow-[0_10px_30px_rgba(14,165,233,0.16)]',
|
||||
},
|
||||
{
|
||||
panel: 'bg-gradient-to-br from-violet-500/22 via-indigo-500/16 to-blue-500/10',
|
||||
border: 'border-violet-400/38',
|
||||
accent: 'bg-violet-400',
|
||||
title: 'text-violet-50',
|
||||
meta: 'text-violet-100/80',
|
||||
badge: 'bg-violet-500/18 text-violet-100',
|
||||
shadow: 'shadow-[0_10px_30px_rgba(139,92,246,0.14)]',
|
||||
},
|
||||
{
|
||||
panel: 'bg-gradient-to-br from-teal-500/22 via-cyan-500/16 to-sky-500/10',
|
||||
border: 'border-teal-400/38',
|
||||
accent: 'bg-teal-400',
|
||||
title: 'text-teal-50',
|
||||
meta: 'text-teal-100/80',
|
||||
badge: 'bg-teal-500/18 text-teal-100',
|
||||
shadow: 'shadow-[0_10px_30px_rgba(45,212,191,0.14)]',
|
||||
},
|
||||
];
|
||||
|
||||
if (!courseName) {
|
||||
return themes[0];
|
||||
}
|
||||
|
||||
let hash = 0;
|
||||
for (let index = 0; index < courseName.length; index += 1) {
|
||||
hash = courseName.charCodeAt(index) + ((hash << 5) - hash);
|
||||
}
|
||||
|
||||
return themes[Math.abs(hash) % themes.length];
|
||||
}
|
||||
|
||||
export default function School() {
|
||||
const storedQuery = readStoredSchoolQuery();
|
||||
const initialStudentId = storedQuery?.studentId ?? '2023123456';
|
||||
@@ -28,6 +100,7 @@ export default function School() {
|
||||
schedule: CourseResponse[];
|
||||
grades: GradeResponse[];
|
||||
}>(getSchoolResultsCacheKey(initialStudentId, initialSemester));
|
||||
|
||||
const [activeTab, setActiveTab] = useState<'schedule' | 'grades'>('schedule');
|
||||
const [studentId, setStudentId] = useState(initialStudentId);
|
||||
const [password, setPassword] = useState('password123');
|
||||
@@ -37,6 +110,15 @@ export default function School() {
|
||||
const [schedule, setSchedule] = useState<CourseResponse[]>(initialCachedResults?.schedule ?? []);
|
||||
const [grades, setGrades] = useState<GradeResponse[]>(initialCachedResults?.grades ?? []);
|
||||
|
||||
const applySchoolResults = (results: LatestSchoolDataResponse) => {
|
||||
setStudentId(results.studentId);
|
||||
setSemester(results.semester);
|
||||
setQueried(true);
|
||||
setSchedule(results.schedule);
|
||||
setGrades(results.grades);
|
||||
cacheLatestSchoolData(results);
|
||||
};
|
||||
|
||||
const averageGrade = useMemo(() => {
|
||||
if (grades.length === 0) {
|
||||
return '0.0';
|
||||
@@ -49,7 +131,7 @@ export default function School() {
|
||||
const loadSchoolData = async (
|
||||
nextStudentId: string,
|
||||
nextSemester: string,
|
||||
options: { background?: boolean } = {}
|
||||
options: { background?: boolean; refresh?: boolean } = {},
|
||||
) => {
|
||||
const cacheKey = getSchoolResultsCacheKey(nextStudentId, nextSemester);
|
||||
const cachedResults = readCachedValue<{
|
||||
@@ -71,6 +153,7 @@ export default function School() {
|
||||
const queryString = new URLSearchParams({
|
||||
studentId: nextStudentId,
|
||||
semester: nextSemester,
|
||||
refresh: options.refresh ? 'true' : 'false',
|
||||
}).toString();
|
||||
|
||||
const [scheduleData, gradeData] = await Promise.all([
|
||||
@@ -102,31 +185,45 @@ export default function School() {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!storedQuery) {
|
||||
let cancelled = false;
|
||||
|
||||
async function loadInitialSchoolData() {
|
||||
if (storedQuery) {
|
||||
await loadSchoolData(storedQuery.studentId, storedQuery.semester, {
|
||||
background: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
loadSchoolData(storedQuery.studentId, storedQuery.semester, {
|
||||
background: true,
|
||||
}).catch(() => undefined);
|
||||
const latest = await fetchLatestSchoolData();
|
||||
if (!latest || cancelled) {
|
||||
return;
|
||||
}
|
||||
applySchoolResults(latest);
|
||||
}
|
||||
|
||||
loadInitialSchoolData().catch(() => undefined);
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleQuery = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
await loadSchoolData(studentId, semester);
|
||||
const handleQuery = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
await loadSchoolData(studentId, semester, { refresh: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Query Form */}
|
||||
<Card className="lg:col-span-1">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Search className="w-5 h-5 text-[#336EFF]" />
|
||||
教务查询
|
||||
</CardTitle>
|
||||
<CardDescription>输入教务系统账号密码以同步数据</CardDescription>
|
||||
<CardDescription>输入学号、密码和学期后同步课表与成绩。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleQuery} className="space-y-4">
|
||||
@@ -146,7 +243,11 @@ export default function School() {
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 ml-1">学期</label>
|
||||
<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]">
|
||||
<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>
|
||||
@@ -157,7 +258,13 @@ export default function School() {
|
||||
<Button type="submit" disabled={loading} className="w-full">
|
||||
{loading ? '查询中...' : '查询课表'}
|
||||
</Button>
|
||||
<Button type="submit" variant="outline" disabled={loading} className="w-full" onClick={() => setActiveTab('grades')}>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="outline"
|
||||
disabled={loading}
|
||||
className="w-full"
|
||||
onClick={() => setActiveTab('grades')}
|
||||
>
|
||||
{loading ? '查询中...' : '查询成绩'}
|
||||
</Button>
|
||||
</div>
|
||||
@@ -165,55 +272,52 @@ export default function School() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Data Summary */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<DatabaseIcon className="w-5 h-5 text-[#336EFF]" />
|
||||
数据摘要
|
||||
</CardTitle>
|
||||
<CardDescription>当前缓存或最近一次查询结果</CardDescription>
|
||||
<CardDescription>展示当前缓存或最近一次查询结果。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{queried ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<SummaryItem label="当前缓存账号" value={studentId} icon={User} />
|
||||
<SummaryItem label="已保存课表学期" value={semester} icon={Calendar} />
|
||||
<SummaryItem label="已保存成绩" value={`${averageGrade} 分`} 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]">
|
||||
<Search className="w-8 h-8 opacity-50" />
|
||||
<p className="text-sm">暂无缓存数据，请先执行查询</p>
|
||||
<p className="text-sm">暂无缓存数据，请先执行查询。</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* View Toggle */}
|
||||
<div className="flex bg-black/20 p-1 rounded-xl w-fit">
|
||||
<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'
|
||||
activeTab === 'schedule' ? 'bg-[#336EFF] text-white shadow-md' : 'text-slate-400 hover:text-white',
|
||||
)}
|
||||
>
|
||||
课表抽屉
|
||||
课表视图
|
||||
</button>
|
||||
<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'
|
||||
activeTab === 'grades' ? 'bg-[#336EFF] text-white shadow-md' : 'text-slate-400 hover:text-white',
|
||||
)}
|
||||
>
|
||||
成绩热力图
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
@@ -226,7 +330,7 @@ export default function School() {
|
||||
);
|
||||
}
|
||||
|
||||
function DatabaseIcon(props: any) {
|
||||
function DatabaseIcon(props: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
@@ -247,7 +351,15 @@ function DatabaseIcon(props: any) {
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryItem({ label, value, icon: Icon }: any) {
|
||||
function SummaryItem({
|
||||
label,
|
||||
value,
|
||||
icon: Icon,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
}) {
|
||||
return (
|
||||
<div className="p-4 rounded-xl bg-white/[0.02] border border-white/5 flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-[#336EFF]/10 flex items-center justify-center shrink-0">
|
||||
@@ -265,49 +377,154 @@ function ScheduleView({ queried, schedule }: { queried: boolean; schedule: Cours
|
||||
if (!queried) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="h-64 flex flex-col items-center justify-center text-slate-500">
|
||||
<BookOpen className="w-12 h-12 mb-4 opacity-20" />
|
||||
<CardContent className="flex h-64 flex-col items-center justify-center text-slate-500">
|
||||
<BookOpen className="mb-4 h-12 w-12 opacity-20" />
|
||||
<p>请先查询课表</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const days = ['周一', '周二', '周三', '周四', '周五'];
|
||||
const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
||||
const periodLabels: Record<'morning' | 'noon' | 'afternoon' | 'evening', string> = {
|
||||
morning: '上午',
|
||||
noon: '中午',
|
||||
afternoon: '下午',
|
||||
evening: '晚上',
|
||||
};
|
||||
const periodOrder = ['morning', 'noon', 'afternoon', 'evening'] as const;
|
||||
const rows = buildScheduleTable(schedule);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>本周课表</CardTitle>
|
||||
<Card className="overflow-hidden border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.9),rgba(15,23,42,0.72))]">
|
||||
<CardHeader className="border-b border-white/8 bg-white/[0.02]">
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-xl">本周课表</CardTitle>
|
||||
<CardDescription>周一到周日完整展示，空白节次保持固定格子，跨节课程会按节数占满网格。</CardDescription>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 text-xs text-slate-300">
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1">上午 1-4 节</span>
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1">中午 5 节</span>
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1">下午 6-9 节</span>
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1">晚上 10-12 节</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
||||
{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">
|
||||
<CardContent className="p-4 md:p-5">
|
||||
<div className="overflow-x-auto">
|
||||
<div
|
||||
className="grid min-w-[1180px] gap-2"
|
||||
style={{
|
||||
gridTemplateColumns: '88px 96px repeat(7, minmax(138px, 1fr))',
|
||||
gridTemplateRows: '48px repeat(12, 96px)',
|
||||
}}
|
||||
>
|
||||
<div className="rounded-2xl bg-white/[0.04] px-3 py-3 text-left text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
|
||||
时段
|
||||
</div>
|
||||
<div className="rounded-2xl bg-white/[0.04] px-3 py-3 text-left text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
|
||||
节次
|
||||
</div>
|
||||
{days.map((day) => (
|
||||
<div key={day} className="rounded-2xl bg-white/[0.04] px-3 py-3 text-center text-sm font-medium text-slate-200">
|
||||
{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>
|
||||
))}
|
||||
|
||||
{periodOrder.map((period, index) => (
|
||||
<div
|
||||
key={period}
|
||||
style={{
|
||||
gridColumn: 1,
|
||||
gridRow:
|
||||
period === 'morning'
|
||||
? '2 / span 4'
|
||||
: period === 'noon'
|
||||
? '6 / span 1'
|
||||
: period === 'afternoon'
|
||||
? '7 / span 4'
|
||||
: '11 / span 3',
|
||||
}}
|
||||
className="flex h-full rounded-2xl border border-white/8 bg-white/[0.03] px-3 py-4"
|
||||
>
|
||||
<div className="flex flex-1 items-center justify-center rounded-xl bg-black/20 text-sm font-semibold tracking-[0.25em] text-slate-300 [writing-mode:vertical-rl]">
|
||||
{periodLabels[period]}
|
||||
</div>
|
||||
</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">
|
||||
无课程
|
||||
|
||||
{rows.map((row) => (
|
||||
<div
|
||||
key={`section-${row.section}`}
|
||||
style={{ gridColumn: 2, gridRow: row.section + 1 }}
|
||||
className="flex h-full flex-col justify-center rounded-2xl border border-white/8 bg-white/[0.03] px-3"
|
||||
>
|
||||
<span className="text-[11px] uppercase tracking-[0.22em] text-slate-500">Section</span>
|
||||
<span className="mt-1 text-lg font-semibold text-white">{row.section}</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{rows.flatMap((row) =>
|
||||
row.slots.map((slot, columnIndex) => {
|
||||
if (slot.type !== 'empty') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`empty-${row.section}-${columnIndex}`}
|
||||
style={{ gridColumn: columnIndex + 3, gridRow: row.section + 1 }}
|
||||
className="rounded-2xl border border-dashed border-white/8 bg-white/[0.015]"
|
||||
/>
|
||||
);
|
||||
}),
|
||||
)}
|
||||
|
||||
{rows.flatMap((row) =>
|
||||
row.slots.map((slot, columnIndex) => {
|
||||
if (slot.type !== 'course') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const theme = getCourseTheme(slot.course?.courseName);
|
||||
const rowSpan = slot.rowSpan ?? 1;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`course-${row.section}-${columnIndex}`}
|
||||
style={{ gridColumn: columnIndex + 3, gridRow: `${row.section + 1} / span ${rowSpan}` }}
|
||||
className={cn(
|
||||
'group relative z-10 flex h-full min-h-0 flex-col overflow-hidden rounded-2xl border p-3 transition duration-200 hover:-translate-y-0.5 hover:brightness-110',
|
||||
theme.panel,
|
||||
theme.border,
|
||||
theme.shadow,
|
||||
)}
|
||||
>
|
||||
<div className={cn('absolute inset-x-0 top-0 h-1.5', theme.accent)} />
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className={cn('text-sm font-semibold leading-5', theme.title)}>
|
||||
{slot.course?.courseName}
|
||||
</p>
|
||||
<span className={cn('shrink-0 rounded-full px-2 py-1 text-[10px] font-medium', theme.badge)}>
|
||||
{formatSections(slot.course?.startTime, slot.course?.endTime)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-3 space-y-2">
|
||||
<p className={cn('flex items-center gap-1.5 text-xs', theme.meta)}>
|
||||
<MapPin className="h-3.5 w-3.5" />
|
||||
<span>{slot.course?.classroom ?? '教室待定'}</span>
|
||||
</p>
|
||||
<p className={cn('flex items-center gap-1.5 text-xs', theme.meta)}>
|
||||
<User className="h-3.5 w-3.5" />
|
||||
<span>{slot.course?.teacher ?? '教师待定'}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
}),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -350,17 +567,17 @@ function GradesView({ queried, grades }: { queried: boolean; grades: GradeRespon
|
||||
<CardTitle className="text-lg font-medium text-white">成绩热力图</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{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}</h3>
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{Object.entries(terms).map(([term, scores]) => (
|
||||
<div key={term} className="flex flex-col">
|
||||
<h3 className="mb-4 border-b border-white/5 pb-3 text-sm font-bold text-white">{term}</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{scores.map((score, j) => (
|
||||
{scores.map((score, index) => (
|
||||
<div
|
||||
key={j}
|
||||
key={`${term}-${index}`}
|
||||
className={cn(
|
||||
'w-full py-1.5 rounded-full text-xs font-mono font-medium text-center transition-colors',
|
||||
getScoreStyle(score)
|
||||
'w-full rounded-full py-1.5 text-center text-xs font-mono font-medium transition-colors',
|
||||
getScoreStyle(score),
|
||||
)}
|
||||
>
|
||||
{score}
|
||||
@@ -369,9 +586,11 @@ function GradesView({ queried, grades }: { queried: boolean; grades: GradeRespon
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{Object.keys(terms).length === 0 && <div className="text-sm text-slate-500">暂无成绩数据</div>}
|
||||
{Object.keys(terms).length === 0 ? <div className="text-sm text-slate-500">暂无成绩数据</div> : null}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user