修改课表模块

.history/front/src/pages/School_20260314124227.tsx

@@ -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>
+  );
+}

.history/front/src/pages/School_20260314213832.tsx

@@ -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>
+  );
+}

.history/front/src/pages/School_20260314213920.tsx

@@ -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>
+  );
+}

.history/front/src/pages/School_20260314213942.tsx

@@ -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>
+  );
+}

.history/开发测试账号_20260314122451.md

@@ -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 数据。为避免混淆，直接填表中的教务密码即可。

.history/开发测试账号_20260314225231.md

@@ -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 数据。为避免混淆，直接填表中的教务密码即可。

.history/开发测试账号_20260314225233.md

@@ -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 数据。为避免混淆，直接填表中的教务密码即可。

backend/src/main/java/com/yoyuzh/auth/User.java

@@ -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;
+    }
 }

backend/src/main/java/com/yoyuzh/cqu/CourseRepository.java

@@ -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);
 }

backend/src/main/java/com/yoyuzh/cqu/CquController.java

@@ -26,16 +26,24 @@ public class CquController {
     @GetMapping("/schedule")
     public ApiResponse<List<CourseResponse>> schedule(@AuthenticationPrincipal UserDetails userDetails,
                                                       @RequestParam String semester,
-                                                      @RequestParam String studentId) {
+                                                      @RequestParam String studentId,
-        return ApiResponse.success(cquDataService.getSchedule(resolveUser(userDetails), semester, 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) {
+                                                   @RequestParam String studentId,
-        return ApiResponse.success(cquDataService.getGrades(resolveUser(userDetails), semester, 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) {

backend/src/main/java/com/yoyuzh/cqu/CquDataService.java

@@ -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(
+            rememberLastSchoolQuery(user, studentId, semester);
-                            user.getId(), studentId, semester)
+            return readSavedSchedule(user.getId(), studentId, semester);
-                    .stream()
-                    .map(item -> new CourseResponse(
-                            item.getCourseName(),
-                            item.getTeacher(),
-                            item.getClassroom(),
-                            item.getDayOfWeek(),
-                            item.getStartTime(),
-                            item.getEndTime()))
-                    .toList();
         }
         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)
+            rememberLastSchoolQuery(user, studentId, semester);
-                    .stream()
+            return readSavedGrades(user.getId(), studentId);
-                    .map(item -> new GradeResponse(item.getCourseName(), item.getGrade(), item.getSemester()))
-                    .toList();
         }
         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) {
+    }
 }

backend/src/main/java/com/yoyuzh/cqu/GradeRepository.java

@@ -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);
 }

backend/src/main/java/com/yoyuzh/cqu/LatestSchoolDataResponse.java

@@ -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
+) {
+}

backend/src/test/java/com/yoyuzh/cqu/CquDataServiceTest.java

@@ -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");
+    }
 }

backend/src/test/java/com/yoyuzh/cqu/CquDataServiceTransactionTest.java

@@ -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");
     }
 }

front/src/components/layout/Layout.tsx

@@ -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>

front/src/lib/schedule-table.test.ts

@@ -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]);
+});

front/src/lib/schedule-table.ts

@@ -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,
+  );
+}

front/src/lib/school.ts

@@ -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,
+  });
+}

front/src/lib/types.ts

@@ -46,3 +46,10 @@ export interface GradeResponse {
   grade: number | null;
   semester: string | null;
 }
+
+export interface LatestSchoolDataResponse {
+  studentId: string;
+  semester: string;
+  schedule: CourseResponse[];
+  grades: GradeResponse[];
+}

front/src/pages/Overview.tsx

@@ -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,28 +108,33 @@ 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(), {
+        if (schoolQuery?.studentId && schoolQuery?.semester) {
-            profile: user,
+          const queryString = new URLSearchParams({
-            recentFiles: filesRecent,
+            studentId: schoolQuery.studentId,
-            rootFiles: filesRoot.items,
+            semester: schoolQuery.semester,
-            schedule: [],
+          }).toString();
-            grades: [],
+
-          });
+          [scheduleData, gradesData] = await Promise.all([
-          return;
+            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;
+          }
         }
 
-        const queryString = new URLSearchParams({
-          studentId: schoolQuery.studentId,
-          semester: schoolQuery.semester,
-        }).toString();
-
-        const [scheduleData, gradesData] = await Promise.all([
-          apiRequest<CourseResponse[]>(`/cqu/schedule?${queryString}`),
-          apiRequest<GradeResponse[]>(`/cqu/grades?${queryString}`),
-        ]);
-
         if (!cancelled) {
           setSchedule(scheduleData);
           setGrades(gradesData);

front/src/pages/School.tsx

@@ -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;
-      return;
+
+    async function loadInitialSchoolData() {
+      if (storedQuery) {
+        await loadSchoolData(storedQuery.studentId, storedQuery.semester, {
+          background: true,
+        });
+        return;
+      }
+
+      const latest = await fetchLatestSchoolData();
+      if (!latest || cancelled) {
+        return;
+      }
+      applySchoolResults(latest);
     }
 
-    loadSchoolData(storedQuery.studentId, storedQuery.semester, {
+    loadInitialSchoolData().catch(() => undefined);
-      background: true,
+
-    }).catch(() => undefined);
+    return () => {
+      cancelled = true;
+    };
   }, []);
 
-  const handleQuery = async (e: React.FormEvent) => {
+  const handleQuery = async (event: React.FormEvent) => {
-    e.preventDefault();
+    event.preventDefault();
-    await loadSchoolData(studentId, semester);
+    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={studentId} icon={User} />
-                <SummaryItem label="已保存课表学期" value={semester} icon={Calendar} />
+                <SummaryItem label="当前学期" value={semester} icon={Calendar} />
-                <SummaryItem label="已保存成绩" value={`${averageGrade} 分`} icon={Award} />
+                <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">
+        <CardContent className="flex h-64 flex-col items-center justify-center text-slate-500">
-          <BookOpen className="w-12 h-12 mb-4 opacity-20" />
+          <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>
+    <Card className="overflow-hidden border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.9),rgba(15,23,42,0.72))]">
-      <CardHeader>
+      <CardHeader className="border-b border-white/8 bg-white/[0.02]">
-        <CardTitle>本周课表</CardTitle>
+        <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>
+      <CardContent className="p-4 md:p-5">
-        <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
+        <div className="overflow-x-auto">
-          {days.map((day, index) => {
+          <div
-            const dayCourses = schedule.filter((item) => (item.dayOfWeek ?? 0) - 1 === index);
+            className="grid min-w-[1180px] gap-2"
-            return (
+            style={{
-              <div key={day} className="space-y-3">
+              gridTemplateColumns: '88px 96px repeat(7, minmax(138px, 1fr))',
-                <div className="text-center py-2 bg-white/5 rounded-lg text-sm font-medium text-slate-300">
+              gridTemplateRows: '48px repeat(12, 96px)',
-                  {day}
+            }}
-                </div>
+          >
-                <div className="space-y-2">
+            <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">
-                  {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">
+            </div>
-                      <p className="text-xs font-mono text-[#336EFF] mb-1">{formatSections(course.startTime, course.endTime)}</p>
+            <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">
-                      <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">
+            </div>
-                        <ChevronRight className="w-3 h-3" /> {course.classroom ?? '教室待定'}
+            {days.map((day) => (
-                      </p>
+              <div key={day} className="rounded-2xl bg-white/[0.04] px-3 py-3 text-center text-sm font-medium text-slate-200">
-                    </div>
+                {day}
-                  ))}
+              </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">
+
-                      无课程
+            {periodOrder.map((period, index) => (
-                    </div>
+              <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>
-            );
+            ))}
-          })}
+
+            {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">
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
-          {Object.entries(terms).map(([term, scores], i) => (
+          {Object.entries(terms).map(([term, scores]) => (
-            <div key={i} className="flex flex-col">
+            <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>
+              <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',
+                      'w-full rounded-full py-1.5 text-center text-xs font-mono font-medium transition-colors',
-                      getScoreStyle(score)
+                      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>
   );
 }
+
+