first runnable version

2026-03-14 12:28:46 +08:00
parent 8db2fa2aab
commit 6cff15f8dc
35 changed files with 2118 additions and 256 deletions
--- a/front/src/auth/AuthProvider.tsx
+++ b/front/src/auth/AuthProvider.tsx
@@ -0,0 +1,168 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+import { apiRequest } from '@/src/lib/api';
+import {
+  clearStoredSession,
+  readStoredSession,
+  saveStoredSession,
+  SESSION_EVENT_NAME,
+} from '@/src/lib/session';
+import type { AuthResponse, AuthSession, UserProfile } from '@/src/lib/types';
+
+interface LoginPayload {
+  username: string;
+  password: string;
+}
+
+interface AuthContextValue {
+  ready: boolean;
+  session: AuthSession | null;
+  user: UserProfile | null;
+  login: (payload: LoginPayload) => Promise<void>;
+  devLogin: (username?: string) => Promise<void>;
+  logout: () => void;
+  refreshProfile: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+function buildSession(auth: AuthResponse): AuthSession {
+  return {
+    token: auth.token,
+    user: auth.user,
+  };
+}
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [session, setSession] = useState<AuthSession | null>(() => readStoredSession());
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    const syncSession = () => {
+      setSession(readStoredSession());
+    };
+
+    window.addEventListener('storage', syncSession);
+    window.addEventListener(SESSION_EVENT_NAME, syncSession);
+
+    return () => {
+      window.removeEventListener('storage', syncSession);
+      window.removeEventListener(SESSION_EVENT_NAME, syncSession);
+    };
+  }, []);
+
+  useEffect(() => {
+    let active = true;
+
+    async function hydrate() {
+      const storedSession = readStoredSession();
+      if (!storedSession) {
+        if (active) {
+          setSession(null);
+          setReady(true);
+        }
+        return;
+      }
+
+      try {
+        const user = await apiRequest<UserProfile>('/user/profile');
+        if (!active) {
+          return;
+        }
+
+        const nextSession = {
+          ...storedSession,
+          user,
+        };
+        saveStoredSession(nextSession);
+        setSession(nextSession);
+      } catch {
+        clearStoredSession();
+        if (active) {
+          setSession(null);
+        }
+      } finally {
+        if (active) {
+          setReady(true);
+        }
+      }
+    }
+
+    hydrate();
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  async function refreshProfile() {
+    const currentSession = readStoredSession();
+    if (!currentSession) {
+      return;
+    }
+
+    const user = await apiRequest<UserProfile>('/user/profile');
+    const nextSession = {
+      ...currentSession,
+      user,
+    };
+    saveStoredSession(nextSession);
+    setSession(nextSession);
+  }
+
+  async function login(payload: LoginPayload) {
+    const auth = await apiRequest<AuthResponse>('/auth/login', {
+      method: 'POST',
+      body: payload,
+    });
+    const nextSession = buildSession(auth);
+    saveStoredSession(nextSession);
+    setSession(nextSession);
+  }
+
+  async function devLogin(username?: string) {
+    const params = new URLSearchParams();
+    if (username?.trim()) {
+      params.set('username', username.trim());
+    }
+
+    const auth = await apiRequest<AuthResponse>(
+      `/auth/dev-login${params.size ? `?${params.toString()}` : ''}`,
+      {
+        method: 'POST',
+      },
+    );
+    const nextSession = buildSession(auth);
+    saveStoredSession(nextSession);
+    setSession(nextSession);
+  }
+
+  function logout() {
+    clearStoredSession();
+    setSession(null);
+  }
+
+  return (
+    <AuthContext.Provider
+      value={{
+        ready,
+        session,
+        user: session?.user || null,
+        login,
+        devLogin,
+        logout,
+        refreshProfile,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used inside AuthProvider');
+  }
+  return context;
+}
--- a/front/src/components/layout/Layout.tsx
+++ b/front/src/components/layout/Layout.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import { NavLink, Outlet, useNavigate } from 'react-router-dom';
-import { cn } from '@/src/lib/utils';
 import { LayoutDashboard, FolderOpen, GraduationCap, Gamepad2, LogOut } from 'lucide-react';

+import { clearStoredSession } from '@/src/lib/session';
+import { cn } from '@/src/lib/utils';
+
 const NAV_ITEMS = [
  { name: '总览', path: '/overview', icon: LayoutDashboard },
  { name: '网盘', path: '/files', icon: FolderOpen },
@@ -14,6 +16,7 @@ export function Layout() {
  const navigate = useNavigate();

  const handleLogout = () => {
+    clearStoredSession();
    navigate('/login');
  };

@@ -88,4 +91,3 @@ export function Layout() {
    </div>
  );
 }
-
--- a/front/src/lib/api.test.ts
+++ b/front/src/lib/api.test.ts
@@ -0,0 +1,111 @@
+import assert from 'node:assert/strict';
+import { afterEach, beforeEach, test } from 'node:test';
+
+import { apiRequest } from './api';
+import { clearStoredSession, saveStoredSession } from './session';
+
+class MemoryStorage implements Storage {
+  private store = new Map<string, string>();
+
+  get length() {
+    return this.store.size;
+  }
+
+  clear() {
+    this.store.clear();
+  }
+
+  getItem(key: string) {
+    return this.store.has(key) ? this.store.get(key)! : null;
+  }
+
+  key(index: number) {
+    return Array.from(this.store.keys())[index] ?? null;
+  }
+
+  removeItem(key: string) {
+    this.store.delete(key);
+  }
+
+  setItem(key: string, value: string) {
+    this.store.set(key, value);
+  }
+}
+
+const originalFetch = globalThis.fetch;
+const originalStorage = globalThis.localStorage;
+
+beforeEach(() => {
+  Object.defineProperty(globalThis, 'localStorage', {
+    configurable: true,
+    value: new MemoryStorage(),
+  });
+  clearStoredSession();
+});
+
+afterEach(() => {
+  globalThis.fetch = originalFetch;
+  Object.defineProperty(globalThis, 'localStorage', {
+    configurable: true,
+    value: originalStorage,
+  });
+});
+
+test('apiRequest attaches bearer token and unwraps response payload', async () => {
+  let request: Request | URL | string | undefined;
+  saveStoredSession({
+    token: 'token-123',
+    user: {
+      id: 1,
+      username: 'tester',
+      email: 'tester@example.com',
+      createdAt: '2026-03-14T10:00:00',
+    },
+  });
+
+  globalThis.fetch = async (input, init) => {
+    request =
+      input instanceof Request
+        ? input
+        : new Request(new URL(String(input), 'http://localhost'), init);
+    return new Response(
+      JSON.stringify({
+        code: 0,
+        msg: 'success',
+        data: {
+          ok: true,
+        },
+      }),
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+  };
+
+  const payload = await apiRequest<{ok: boolean}>('/files/recent');
+
+  assert.deepEqual(payload, {ok: true});
+  assert.ok(request instanceof Request);
+  assert.equal(request.headers.get('Authorization'), 'Bearer token-123');
+  assert.equal(request.url, 'http://localhost/api/files/recent');
+});
+
+test('apiRequest throws backend message on business error', async () => {
+  globalThis.fetch = async () =>
+    new Response(
+      JSON.stringify({
+        code: 40101,
+        msg: 'login required',
+        data: null,
+      }),
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+
+  await assert.rejects(() => apiRequest('/user/profile'), /login required/);
+});
--- a/front/src/lib/api.ts
+++ b/front/src/lib/api.ts
@@ -0,0 +1,126 @@
+import { clearStoredSession, readStoredSession } from './session';
+
+interface ApiEnvelope<T> {
+  code: number;
+  msg: string;
+  data: T;
+}
+
+interface ApiRequestInit extends Omit<RequestInit, 'body'> {
+  body?: unknown;
+}
+
+const API_BASE_URL = (import.meta.env?.VITE_API_BASE_URL || '/api').replace(/\/$/, '');
+
+export class ApiError extends Error {
+  code?: number;
+  status: number;
+
+  constructor(message: string, status = 500, code?: number) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+    this.code = code;
+  }
+}
+
+function resolveUrl(path: string) {
+  if (/^https?:\/\//.test(path)) {
+    return path;
+  }
+
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  return `${API_BASE_URL}${normalizedPath}`;
+}
+
+function buildRequestBody(body: ApiRequestInit['body']) {
+  if (body == null) {
+    return undefined;
+  }
+
+  if (
+    body instanceof FormData ||
+    body instanceof Blob ||
+    body instanceof URLSearchParams ||
+    typeof body === 'string' ||
+    body instanceof ArrayBuffer
+  ) {
+    return body;
+  }
+
+  return JSON.stringify(body);
+}
+
+async function parseApiError(response: Response) {
+  const contentType = response.headers.get('content-type') || '';
+  if (!contentType.includes('application/json')) {
+    return new ApiError(`请求失败 (${response.status})`, response.status);
+  }
+
+  const payload = (await response.json()) as ApiEnvelope<null>;
+  return new ApiError(payload.msg || `请求失败 (${response.status})`, response.status, payload.code);
+}
+
+async function performRequest(path: string, init: ApiRequestInit = {}) {
+  const session = readStoredSession();
+  const headers = new Headers(init.headers);
+  const requestBody = buildRequestBody(init.body);
+
+  if (session?.token) {
+    headers.set('Authorization', `Bearer ${session.token}`);
+  }
+  if (requestBody && !(requestBody instanceof FormData) && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json');
+  }
+  if (!headers.has('Accept')) {
+    headers.set('Accept', 'application/json');
+  }
+
+  const response = await fetch(resolveUrl(path), {
+    ...init,
+    headers,
+    body: requestBody,
+  });
+
+  if (response.status === 401 || response.status === 403) {
+    clearStoredSession();
+  }
+
+  return response;
+}
+
+export async function apiRequest<T>(path: string, init?: ApiRequestInit) {
+  const response = await performRequest(path, init);
+  const contentType = response.headers.get('content-type') || '';
+
+  if (!contentType.includes('application/json')) {
+    if (!response.ok) {
+      throw new ApiError(`请求失败 (${response.status})`, response.status);
+    }
+    return undefined as T;
+  }
+
+  const payload = (await response.json()) as ApiEnvelope<T>;
+  if (!response.ok || payload.code !== 0) {
+    if (response.status === 401 || payload.code === 401) {
+      clearStoredSession();
+    }
+    throw new ApiError(payload.msg || `请求失败 (${response.status})`, response.status, payload.code);
+  }
+
+  return payload.data;
+}
+
+export async function apiDownload(path: string) {
+  const response = await performRequest(path, {
+    headers: {
+      Accept: '*/*',
+    },
+  });
+
+  if (!response.ok) {
+    throw await parseApiError(response);
+  }
+
+  return response;
+}
--- a/front/src/lib/cache.test.ts
+++ b/front/src/lib/cache.test.ts
@@ -0,0 +1,99 @@
+import assert from 'node:assert/strict';
+import { afterEach, beforeEach, test } from 'node:test';
+
+import { clearStoredSession, saveStoredSession } from './session';
+import { buildScopedCacheKey, readCachedValue, writeCachedValue } from './cache';
+
+class MemoryStorage implements Storage {
+  private store = new Map<string, string>();
+
+  get length() {
+    return this.store.size;
+  }
+
+  clear() {
+    this.store.clear();
+  }
+
+  getItem(key: string) {
+    return this.store.has(key) ? this.store.get(key)! : null;
+  }
+
+  key(index: number) {
+    return Array.from(this.store.keys())[index] ?? null;
+  }
+
+  removeItem(key: string) {
+    this.store.delete(key);
+  }
+
+  setItem(key: string, value: string) {
+    this.store.set(key, value);
+  }
+}
+
+const originalStorage = globalThis.localStorage;
+
+beforeEach(() => {
+  Object.defineProperty(globalThis, 'localStorage', {
+    configurable: true,
+    value: new MemoryStorage(),
+  });
+  clearStoredSession();
+});
+
+afterEach(() => {
+  Object.defineProperty(globalThis, 'localStorage', {
+    configurable: true,
+    value: originalStorage,
+  });
+});
+
+test('scoped cache key includes current user identity', () => {
+  saveStoredSession({
+    token: 'token-1',
+    user: {
+      id: 7,
+      username: 'alice',
+      email: 'alice@example.com',
+      createdAt: '2026-03-14T12:00:00',
+    },
+  });
+
+  assert.equal(buildScopedCacheKey('school', '2023123456', '2025-spring'), 'portal-cache:user:7:school:2023123456:2025-spring');
+});
+
+test('cached values are isolated between users', () => {
+  saveStoredSession({
+    token: 'token-1',
+    user: {
+      id: 7,
+      username: 'alice',
+      email: 'alice@example.com',
+      createdAt: '2026-03-14T12:00:00',
+    },
+  });
+  writeCachedValue(buildScopedCacheKey('school', '2023123456', '2025-spring'), {
+    queried: true,
+    grades: [95],
+  });
+
+  saveStoredSession({
+    token: 'token-2',
+    user: {
+      id: 8,
+      username: 'bob',
+      email: 'bob@example.com',
+      createdAt: '2026-03-14T12:00:00',
+    },
+  });
+
+  assert.equal(readCachedValue(buildScopedCacheKey('school', '2023123456', '2025-spring')), null);
+});
+
+test('invalid cached json is ignored safely', () => {
+  localStorage.setItem('portal-cache:user:7:school:2023123456:2025-spring', '{broken-json');
+
+  assert.equal(readCachedValue('portal-cache:user:7:school:2023123456:2025-spring'), null);
+  assert.equal(localStorage.getItem('portal-cache:user:7:school:2023123456:2025-spring'), null);
+});
--- a/front/src/lib/cache.ts
+++ b/front/src/lib/cache.ts
@@ -0,0 +1,61 @@
+import { readStoredSession } from './session';
+
+interface CacheEnvelope<T> {
+  value: T;
+  updatedAt: number;
+}
+
+const CACHE_PREFIX = 'portal-cache';
+
+function getCacheScope() {
+  const session = readStoredSession();
+  if (session?.user?.id != null) {
+    return `user:${session.user.id}`;
+  }
+
+  return 'guest';
+}
+
+export function buildScopedCacheKey(namespace: string, ...parts: Array<string | number>) {
+  const normalizedParts = parts.map((part) => String(part).replace(/:/g, '_'));
+  return [CACHE_PREFIX, getCacheScope(), namespace, ...normalizedParts].join(':');
+}
+
+export function readCachedValue<T>(key: string): T | null {
+  if (typeof localStorage === 'undefined') {
+    return null;
+  }
+
+  const rawValue = localStorage.getItem(key);
+  if (!rawValue) {
+    return null;
+  }
+
+  try {
+    const parsed = JSON.parse(rawValue) as CacheEnvelope<T>;
+    return parsed.value;
+  } catch {
+    localStorage.removeItem(key);
+    return null;
+  }
+}
+
+export function writeCachedValue<T>(key: string, value: T) {
+  if (typeof localStorage === 'undefined') {
+    return;
+  }
+
+  const payload: CacheEnvelope<T> = {
+    value,
+    updatedAt: Date.now(),
+  };
+  localStorage.setItem(key, JSON.stringify(payload));
+}
+
+export function removeCachedValue(key: string) {
+  if (typeof localStorage === 'undefined') {
+    return;
+  }
+
+  localStorage.removeItem(key);
+}
--- a/front/src/lib/page-cache.ts
+++ b/front/src/lib/page-cache.ts
@@ -0,0 +1,51 @@
+import { buildScopedCacheKey, readCachedValue, writeCachedValue } from './cache';
+import type { CourseResponse, FileMetadata, GradeResponse, UserProfile } from './types';
+
+export interface SchoolQueryCache {
+  studentId: string;
+  semester: string;
+}
+
+export interface SchoolResultsCache {
+  queried: boolean;
+  schedule: CourseResponse[];
+  grades: GradeResponse[];
+  studentId: string;
+  semester: string;
+}
+
+export interface OverviewCache {
+  profile: UserProfile | null;
+  recentFiles: FileMetadata[];
+  rootFiles: FileMetadata[];
+  schedule: CourseResponse[];
+  grades: GradeResponse[];
+}
+
+function getSchoolQueryCacheKey() {
+  return buildScopedCacheKey('school-query');
+}
+
+export function readStoredSchoolQuery() {
+  return readCachedValue<SchoolQueryCache>(getSchoolQueryCacheKey());
+}
+
+export function writeStoredSchoolQuery(query: SchoolQueryCache) {
+  writeCachedValue(getSchoolQueryCacheKey(), query);
+}
+
+export function getSchoolResultsCacheKey(studentId: string, semester: string) {
+  return buildScopedCacheKey('school-results', studentId, semester);
+}
+
+export function getOverviewCacheKey() {
+  return buildScopedCacheKey('overview');
+}
+
+export function getFilesLastPathCacheKey() {
+  return buildScopedCacheKey('files-last-path');
+}
+
+export function getFilesListCacheKey(path: string) {
+  return buildScopedCacheKey('files-list', path || 'root');
+}
--- a/front/src/lib/session.ts
+++ b/front/src/lib/session.ts
@@ -0,0 +1,46 @@
+import type { AuthSession } from './types';
+
+const SESSION_STORAGE_KEY = 'portal-session';
+export const SESSION_EVENT_NAME = 'portal-session-change';
+
+function notifySessionChanged() {
+  if (typeof window !== 'undefined') {
+    window.dispatchEvent(new Event(SESSION_EVENT_NAME));
+  }
+}
+
+export function readStoredSession(): AuthSession | null {
+  if (typeof localStorage === 'undefined') {
+    return null;
+  }
+
+  const rawValue = localStorage.getItem(SESSION_STORAGE_KEY);
+  if (!rawValue) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(rawValue) as AuthSession;
+  } catch {
+    localStorage.removeItem(SESSION_STORAGE_KEY);
+    return null;
+  }
+}
+
+export function saveStoredSession(session: AuthSession) {
+  if (typeof localStorage === 'undefined') {
+    return;
+  }
+
+  localStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(session));
+  notifySessionChanged();
+}
+
+export function clearStoredSession() {
+  if (typeof localStorage === 'undefined') {
+    return;
+  }
+
+  localStorage.removeItem(SESSION_STORAGE_KEY);
+  notifySessionChanged();
+}
--- a/front/src/lib/types.ts
+++ b/front/src/lib/types.ts
@@ -0,0 +1,48 @@
+export interface UserProfile {
+  id: number;
+  username: string;
+  email: string;
+  createdAt: string;
+}
+
+export interface AuthSession {
+  token: string;
+  user: UserProfile;
+}
+
+export interface AuthResponse {
+  token: string;
+  user: UserProfile;
+}
+
+export interface PageResponse<T> {
+  items: T[];
+  total: number;
+  page: number;
+  size: number;
+}
+
+export interface FileMetadata {
+  id: number;
+  filename: string;
+  path: string;
+  size: number;
+  contentType: string | null;
+  directory: boolean;
+  createdAt: string;
+}
+
+export interface CourseResponse {
+  courseName: string;
+  teacher: string | null;
+  classroom: string | null;
+  dayOfWeek: number | null;
+  startTime: number | null;
+  endTime: number | null;
+}
+
+export interface GradeResponse {
+  courseName: string;
+  grade: number | null;
+  semester: string | null;
+}
--- a/front/src/pages/Files.tsx
+++ b/front/src/pages/Files.tsx
@@ -1,69 +1,120 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { motion } from 'motion/react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/src/components/ui/card';
-import { Button } from '@/src/components/ui/button';
-import { 
-  Folder, FileText, Image as ImageIcon, Download, Monitor, 
-  Star, ChevronRight, Upload, Plus, LayoutGrid, List, File,
-  MoreVertical
+import {
+  Folder,
+  FileText,
+  Image as ImageIcon,
+  Download,
+  Monitor,
+  ChevronRight,
+  Upload,
+  Plus,
+  LayoutGrid,
+  List,
+  MoreVertical,
 } from 'lucide-react';
+
+import { Button } from '@/src/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/src/components/ui/card';
+import { apiDownload, apiRequest } from '@/src/lib/api';
+import { readCachedValue, writeCachedValue } from '@/src/lib/cache';
+import { getFilesLastPathCacheKey, getFilesListCacheKey } from '@/src/lib/page-cache';
+import type { FileMetadata, PageResponse } from '@/src/lib/types';
 import { cn } from '@/src/lib/utils';

 const QUICK_ACCESS = [
-  { name: '桌面', icon: Monitor },
-  { name: '下载', icon: Download },
-  { name: '文档', icon: FileText },
-  { name: '图片', icon: ImageIcon },
+  { name: '桌面', icon: Monitor, path: [] as string[] },
+  { name: '下载', icon: Download, path: ['下载'] },
+  { name: '文档', icon: FileText, path: ['文档'] },
+  { name: '图片', icon: ImageIcon, path: ['图片'] },
 ];

 const DIRECTORIES = [
-  { name: '我的文件', icon: Folder },
-  { name: '课程资料', icon: Folder },
-  { name: '项目归档', icon: Folder },
-  { name: '收藏夹', icon: Star },
+  { name: '下载', icon: Folder },
+  { name: '文档', icon: Folder },
+  { name: '图片', icon: Folder },
 ];

-const MOCK_FILES_DB: Record<string, any[]> = {
-  '我的文件': [
-    { id: 1, name: '软件工程期末复习资料.pdf', type: 'pdf', size: '2.4 MB', modified: '2025-01-15 14:30' },
-    { id: 2, name: '2025春季学期课表.xlsx', type: 'excel', size: '156 KB', modified: '2025-02-28 09:15' },
-    { id: 3, name: '项目架构设计图.png', type: 'image', size: '4.1 MB', modified: '2025-03-01 16:45' },
-    { id: 4, name: '实验报告模板.docx', type: 'word', size: '45 KB', modified: '2025-03-05 10:20' },
-    { id: 5, name: '前端学习笔记', type: 'folder', size: '—', modified: '2025-03-10 11:00' },
-  ],
-  '课程资料': [
-    { id: 6, name: '高等数学', type: 'folder', size: '—', modified: '2025-02-20 10:00' },
-    { id: 7, name: '大学物理', type: 'folder', size: '—', modified: '2025-02-21 11:00' },
-    { id: 8, name: '软件工程', type: 'folder', size: '—', modified: '2025-02-22 14:00' },
-  ],
-  '项目归档': [
-    { id: 9, name: '2024秋季学期项目', type: 'folder', size: '—', modified: '2024-12-20 15:30' },
-    { id: 10, name: '个人博客源码.zip', type: 'archive', size: '15.2 MB', modified: '2025-01-05 09:45' },
-  ],
-  '收藏夹': [
-    { id: 11, name: '常用工具网站.txt', type: 'document', size: '2 KB', modified: '2025-03-01 10:00' },
-  ],
-  '我的文件/前端学习笔记': [
-    { id: 12, name: 'React Hooks 详解.md', type: 'document', size: '12 KB', modified: '2025-03-08 09:00' },
-    { id: 13, name: 'Tailwind 技巧.md', type: 'document', size: '8 KB', modified: '2025-03-09 14:20' },
-    { id: 14, name: '示例代码', type: 'folder', size: '—', modified: '2025-03-10 10:00' },
-  ],
-  '课程资料/软件工程': [
-    { id: 15, name: '需求规格说明书.pdf', type: 'pdf', size: '1.2 MB', modified: '2025-03-05 16:00' },
-    { id: 16, name: '系统设计文档.docx', type: 'word', size: '850 KB', modified: '2025-03-06 11:30' },
-  ]
-};
+function toBackendPath(pathParts: string[]) {
+  return pathParts.length === 0 ? '/' : `/${pathParts.join('/')}`;
+}
+
+function formatFileSize(size: number) {
+  if (size <= 0) {
+    return '—';
+  }
+
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const index = Math.min(Math.floor(Math.log(size) / Math.log(1024)), units.length - 1);
+  const value = size / 1024 ** index;
+  return `${value.toFixed(value >= 10 || index === 0 ? 0 : 1)} ${units[index]}`;
+}
+
+function formatDateTime(value: string) {
+  return new Intl.DateTimeFormat('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(new Date(value));
+}
+
+function toUiFile(file: FileMetadata) {
+  const extension = file.filename.includes('.') ? file.filename.split('.').pop()?.toLowerCase() : '';
+  let type = extension || 'document';
+
+  if (file.directory) {
+    type = 'folder';
+  } else if (file.contentType?.startsWith('image/')) {
+    type = 'image';
+  } else if (file.contentType?.includes('pdf')) {
+    type = 'pdf';
+  }
+
+  return {
+    id: file.id,
+    name: file.filename,
+    type,
+    size: file.directory ? '—' : formatFileSize(file.size),
+    modified: formatDateTime(file.createdAt),
+  };
+}

 export default function Files() {
-  const [currentPath, setCurrentPath] = useState<string[]>(['我的文件']);
+  const initialPath = readCachedValue<string[]>(getFilesLastPathCacheKey()) ?? [];
+  const initialCachedFiles = readCachedValue<FileMetadata[]>(getFilesListCacheKey(toBackendPath(initialPath))) ?? [];
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [currentPath, setCurrentPath] = useState<string[]>(initialPath);
  const [selectedFile, setSelectedFile] = useState<any | null>(null);
+  const [currentFiles, setCurrentFiles] = useState<any[]>(initialCachedFiles.map(toUiFile));

-  const activeDir = currentPath[currentPath.length - 1];
-  const pathKey = currentPath.join('/');
-  const currentFiles = MOCK_FILES_DB[pathKey] || [];
+  const loadCurrentPath = async (pathParts: string[]) => {
+    const response = await apiRequest<PageResponse<FileMetadata>>(
+      `/files/list?path=${encodeURIComponent(toBackendPath(pathParts))}&page=0&size=100`
+    );
+    writeCachedValue(getFilesListCacheKey(toBackendPath(pathParts)), response.items);
+    writeCachedValue(getFilesLastPathCacheKey(), pathParts);
+    setCurrentFiles(response.items.map(toUiFile));
+  };

-  const handleSidebarClick = (name: string) => {
-    setCurrentPath([name]);
+  useEffect(() => {
+    const cachedFiles = readCachedValue<FileMetadata[]>(getFilesListCacheKey(toBackendPath(currentPath)));
+    writeCachedValue(getFilesLastPathCacheKey(), currentPath);
+
+    if (cachedFiles) {
+      setCurrentFiles(cachedFiles.map(toUiFile));
+    }
+
+    loadCurrentPath(currentPath).catch(() => {
+      if (!cachedFiles) {
+        setCurrentFiles([]);
+      }
+    });
+  }, [currentPath]);
+
+  const handleSidebarClick = (pathParts: string[]) => {
+    setCurrentPath(pathParts);
    setSelectedFile(null);
  };

@@ -79,6 +130,65 @@ export default function Files() {
    setSelectedFile(null);
  };

+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) {
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    await apiRequest(`/files/upload?path=${encodeURIComponent(toBackendPath(currentPath))}`, {
+      method: 'POST',
+      body: formData,
+    });
+
+    await loadCurrentPath(currentPath);
+    event.target.value = '';
+  };
+
+  const handleCreateFolder = async () => {
+    const folderName = window.prompt('请输入新文件夹名称');
+    if (!folderName?.trim()) {
+      return;
+    }
+
+    const basePath = toBackendPath(currentPath).replace(/\/$/, '');
+    const fullPath = `${basePath}/${folderName.trim()}` || '/';
+
+    await apiRequest('/files/mkdir', {
+      method: 'POST',
+      body: new URLSearchParams({
+        path: fullPath.startsWith('/') ? fullPath : `/${fullPath}`,
+      }),
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+    });
+
+    await loadCurrentPath(currentPath);
+  };
+
+  const handleDownload = async () => {
+    if (!selectedFile || selectedFile.type === 'folder') {
+      return;
+    }
+
+    const response = await apiDownload(`/files/download/${selectedFile.id}`);
+    const blob = await response.blob();
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = selectedFile.name;
+    link.click();
+    window.URL.revokeObjectURL(url);
+  };
+
  return (
    <div className="flex flex-col lg:flex-row gap-6 h-[calc(100vh-8rem)]">
      {/* Left Sidebar */}
@@ -89,9 +199,15 @@ export default function Files() {
            {QUICK_ACCESS.map((item) => (
              <button
                key={item.name}
-                className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-slate-300 hover:text-white hover:bg-white/5 transition-colors"
+                onClick={() => handleSidebarClick(item.path)}
+                className={cn(
+                  'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
+                  currentPath.join('/') === item.path.join('/')
+                    ? 'bg-[#336EFF]/20 text-[#336EFF]'
+                    : 'text-slate-300 hover:text-white hover:bg-white/5'
+                )}
              >
-                <item.icon className="w-4 h-4 text-slate-400" />
+                <item.icon className={cn('w-4 h-4', currentPath.join('/') === item.path.join('/') ? 'text-[#336EFF]' : 'text-slate-400')} />
                {item.name}
              </button>
            ))}
@@ -102,15 +218,15 @@ export default function Files() {
            {DIRECTORIES.map((item) => (
              <button
                key={item.name}
-                onClick={() => handleSidebarClick(item.name)}
+                onClick={() => handleSidebarClick([item.name])}
                className={cn(
-                  "w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
-                  currentPath.length === 1 && currentPath[0] === item.name 
-                    ? "bg-[#336EFF]/20 text-[#336EFF]" 
-                    : "text-slate-300 hover:text-white hover:bg-white/5"
+                  'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
+                  currentPath.length === 1 && currentPath[0] === item.name
+                    ? 'bg-[#336EFF]/20 text-[#336EFF]'
+                    : 'text-slate-300 hover:text-white hover:bg-white/5'
                )}
              >
-                <item.icon className={cn("w-4 h-4", currentPath.length === 1 && currentPath[0] === item.name ? "text-[#336EFF]" : "text-slate-400")} />
+                <item.icon className={cn('w-4 h-4', currentPath.length === 1 && currentPath[0] === item.name ? 'text-[#336EFF]' : 'text-slate-400')} />
                {item.name}
              </button>
            ))}
@@ -123,13 +239,15 @@ export default function Files() {
        {/* Header / Breadcrumbs */}
        <div className="p-4 border-b border-white/10 flex items-center justify-between shrink-0">
          <div className="flex items-center text-sm text-slate-400">
-            <button className="hover:text-white transition-colors">网盘</button>
+            <button className="hover:text-white transition-colors" onClick={() => handleSidebarClick([])}>
+              网盘
+            </button>
            {currentPath.map((pathItem, index) => (
              <React.Fragment key={index}>
                <ChevronRight className="w-4 h-4 mx-1" />
-                <button 
+                <button
                  onClick={() => handleBreadcrumbClick(index)}
-                  className={cn("transition-colors", index === currentPath.length - 1 ? "text-white font-medium" : "hover:text-white")}
+                  className={cn('transition-colors', index === currentPath.length - 1 ? 'text-white font-medium' : 'hover:text-white')}
                >
                  {pathItem}
                </button>
@@ -157,13 +275,13 @@ export default function Files() {
            <tbody>
              {currentFiles.length > 0 ? (
                currentFiles.map((file) => (
-                  <tr 
+                  <tr
                    key={file.id}
                    onClick={() => setSelectedFile(file)}
                    onDoubleClick={() => handleFolderDoubleClick(file)}
                    className={cn(
-                      "group cursor-pointer transition-colors border-b border-white/5 last:border-0",
-                      selectedFile?.id === file.id ? "bg-[#336EFF]/10" : "hover:bg-white/[0.02]"
+                      'group cursor-pointer transition-colors border-b border-white/5 last:border-0',
+                      selectedFile?.id === file.id ? 'bg-[#336EFF]/10' : 'hover:bg-white/[0.02]'
                    )}
                  >
                    <td className="py-3 pl-4">
@@ -175,7 +293,7 @@ export default function Files() {
                        ) : (
                          <FileText className="w-5 h-5 text-blue-400" />
                        )}
-                        <span className={cn("text-sm font-medium", selectedFile?.id === file.id ? "text-[#336EFF]" : "text-slate-200")}>
+                        <span className={cn('text-sm font-medium', selectedFile?.id === file.id ? 'text-[#336EFF]' : 'text-slate-200')}>
                          {file.name}
                        </span>
                      </div>
@@ -206,18 +324,19 @@ export default function Files() {

        {/* Bottom Actions */}
        <div className="p-4 border-t border-white/10 flex items-center gap-3 shrink-0 bg-white/[0.01]">
-          <Button variant="default" className="gap-2">
+          <Button variant="default" className="gap-2" onClick={handleUploadClick}>
            <Upload className="w-4 h-4" /> 上传文件
          </Button>
-          <Button variant="outline" className="gap-2">
+          <Button variant="outline" className="gap-2" onClick={handleCreateFolder}>
            <Plus className="w-4 h-4" /> 新建文件夹
          </Button>
+          <input ref={fileInputRef} type="file" className="hidden" onChange={handleFileChange} />
        </div>
      </Card>

      {/* Right Sidebar (Details) */}
      {selectedFile && (
-        <motion.div 
+        <motion.div
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          className="w-full lg:w-72 shrink-0"
@@ -241,14 +360,14 @@ export default function Files() {
              </div>

              <div className="space-y-4">
-                <DetailItem label="位置" value={`网盘 > ${currentPath.join(' > ')}`} />
+                <DetailItem label="位置" value={`网盘 > ${currentPath.length === 0 ? '根目录' : currentPath.join(' > ')}`} />
                <DetailItem label="大小" value={selectedFile.size} />
                <DetailItem label="修改时间" value={selectedFile.modified} />
                <DetailItem label="类型" value={selectedFile.type.toUpperCase()} />
              </div>

              {selectedFile.type !== 'folder' && (
-                <Button variant="outline" className="w-full gap-2 mt-4">
+                <Button variant="outline" className="w-full gap-2 mt-4" onClick={handleDownload}>
                  <Download className="w-4 h-4" /> 下载文件
                </Button>
              )}
@@ -265,7 +384,7 @@ export default function Files() {
  );
 }

-function DetailItem({ label, value }: { label: string, value: string }) {
+function DetailItem({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <p className="text-xs font-medium text-slate-500 mb-1">{label}</p>
--- a/front/src/pages/Login.tsx
+++ b/front/src/pages/Login.tsx
@@ -1,26 +1,63 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'motion/react';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/src/components/ui/card';
-import { Button } from '@/src/components/ui/button';
-import { Input } from '@/src/components/ui/input';
 import { LogIn, User, Lock } from 'lucide-react';

+import { Button } from '@/src/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/src/components/ui/card';
+import { Input } from '@/src/components/ui/input';
+import { apiRequest, ApiError } from '@/src/lib/api';
+import { saveStoredSession } from '@/src/lib/session';
+import type { AuthResponse } from '@/src/lib/types';
+
+const DEV_LOGIN_ENABLED = import.meta.env.DEV || import.meta.env.VITE_ENABLE_DEV_LOGIN === 'true';
+
 export default function Login() {
  const navigate = useNavigate();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

-  const handleLogin = (e: React.FormEvent) => {
+  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');

-    // Simulate login
-    setTimeout(() => {
+    try {
+      let auth: AuthResponse;
+
+      try {
+        auth = await apiRequest<AuthResponse>('/auth/login', {
+          method: 'POST',
+          body: { username, password },
+        });
+      } catch (requestError) {
+        if (
+          DEV_LOGIN_ENABLED &&
+          username.trim() &&
+          requestError instanceof ApiError &&
+          requestError.status === 401
+        ) {
+          auth = await apiRequest<AuthResponse>(
+            `/auth/dev-login?username=${encodeURIComponent(username.trim())}`,
+            { method: 'POST' }
+          );
+        } else {
+          throw requestError;
+        }
+      }
+
+      saveStoredSession({
+        token: auth.token,
+        user: auth.user,
+      });
      setLoading(false);
      navigate('/overview');
-    }, 1000);
+    } catch (requestError) {
+      setLoading(false);
+      setError(requestError instanceof Error ? requestError.message : '登录失败，请稍后重试');
+    }
  };

  return (
@@ -41,14 +78,16 @@ export default function Login() {
            <span className="w-2 h-2 rounded-full bg-[#336EFF] animate-pulse" />
            <span className="text-sm text-slate-300 font-medium tracking-wide uppercase">Access Portal</span>
          </div>
-          
+
          <div className="space-y-2">
            <h2 className="text-xl text-[#336EFF] font-bold tracking-widest uppercase">YOYUZH.XYZ</h2>
            <h1 className="text-5xl md:text-6xl font-bold text-white leading-tight">
-              个人网站<br />统一入口
+              个人网站
+              <br />
+              统一入口
            </h1>
          </div>
-          
+
          <p className="text-lg text-slate-400 leading-relaxed">
            欢迎来到 YOYUZH 的个人门户。在这里，你可以集中管理个人网盘文件、查询教务成绩课表，以及体验轻量级小游戏。
          </p>
@@ -82,6 +121,8 @@ export default function Login() {
                        type="text"
                        placeholder="账号 / 用户名 / 学号"
                        className="pl-10 bg-black/20 border-white/10 focus-visible:ring-[#336EFF]"
+                        value={username}
+                        onChange={(event) => setUsername(event.target.value)}
                        required
                      />
                    </div>
@@ -94,6 +135,8 @@ export default function Login() {
                        type="password"
                        placeholder="••••••••"
                        className="pl-10 bg-black/20 border-white/10 focus-visible:ring-[#336EFF]"
+                        value={password}
+                        onChange={(event) => setPassword(event.target.value)}
                        required
                      />
                    </div>
--- a/front/src/pages/Overview.tsx
+++ b/front/src/pages/Overview.tsx
@@ -1,16 +1,76 @@
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { motion } from 'motion/react';
 import { useNavigate } from 'react-router-dom';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/src/components/ui/card';
-import { Button } from '@/src/components/ui/button';
-import { 
-  FileText, Upload, FolderPlus, Database, 
-  GraduationCap, BookOpen, Clock, HardDrive,
-  User, Mail, ChevronRight
+import {
+  FileText,
+  Upload,
+  FolderPlus,
+  Database,
+  GraduationCap,
+  BookOpen,
+  Clock,
+  User,
+  Mail,
+  ChevronRight,
 } from 'lucide-react';

+import { Button } from '@/src/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/src/components/ui/card';
+import { apiRequest } from '@/src/lib/api';
+import { readCachedValue, writeCachedValue } from '@/src/lib/cache';
+import { getOverviewCacheKey, getSchoolResultsCacheKey, readStoredSchoolQuery } from '@/src/lib/page-cache';
+import { readStoredSession } from '@/src/lib/session';
+import type { CourseResponse, FileMetadata, GradeResponse, PageResponse, UserProfile } from '@/src/lib/types';
+
+function formatFileSize(size: number) {
+  if (size <= 0) {
+    return '0 B';
+  }
+
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const index = Math.min(Math.floor(Math.log(size) / Math.log(1024)), units.length - 1);
+  const value = size / 1024 ** index;
+  return `${value.toFixed(value >= 10 || index === 0 ? 0 : 1)} ${units[index]}`;
+}
+
+function formatRecentTime(value: string) {
+  const date = new Date(value);
+  const diffHours = Math.floor((Date.now() - date.getTime()) / (1000 * 60 * 60));
+  if (diffHours < 24) {
+    return `${Math.max(diffHours, 0)}小时前`;
+  }
+
+  return new Intl.DateTimeFormat('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+}
+
 export default function Overview() {
  const navigate = useNavigate();
+  const storedSchoolQuery = readStoredSchoolQuery();
+  const cachedSchoolResults =
+    storedSchoolQuery?.studentId && storedSchoolQuery?.semester
+      ? readCachedValue<{
+          schedule: CourseResponse[];
+          grades: GradeResponse[];
+        }>(getSchoolResultsCacheKey(storedSchoolQuery.studentId, storedSchoolQuery.semester))
+      : null;
+  const cachedOverview = readCachedValue<{
+    profile: UserProfile | null;
+    recentFiles: FileMetadata[];
+    rootFiles: FileMetadata[];
+    schedule: CourseResponse[];
+    grades: GradeResponse[];
+  }>(getOverviewCacheKey());
+  const [profile, setProfile] = useState<UserProfile | null>(cachedOverview?.profile ?? readStoredSession()?.user ?? null);
+  const [recentFiles, setRecentFiles] = useState<FileMetadata[]>(cachedOverview?.recentFiles ?? []);
+  const [rootFiles, setRootFiles] = useState<FileMetadata[]>(cachedOverview?.rootFiles ?? []);
+  const [schedule, setSchedule] = useState<CourseResponse[]>(cachedOverview?.schedule ?? cachedSchoolResults?.schedule ?? []);
+  const [grades, setGrades] = useState<GradeResponse[]>(cachedOverview?.grades ?? cachedSchoolResults?.grades ?? []);
+
  const currentHour = new Date().getHours();
  let greeting = '晚上好';
  if (currentHour < 6) greeting = '凌晨好';
@@ -18,18 +78,106 @@ export default function Overview() {
  else if (currentHour < 18) greeting = '下午好';

  const currentTime = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+  const recentWeekUploads = recentFiles.filter(
+    (file) => Date.now() - new Date(file.createdAt).getTime() <= 7 * 24 * 60 * 60 * 1000
+  ).length;
+  const usedBytes = useMemo(
+    () => rootFiles.filter((file) => !file.directory).reduce((sum, file) => sum + file.size, 0),
+    [rootFiles]
+  );
+  const usedGb = usedBytes / 1024 / 1024 / 1024;
+  const storagePercent = Math.min((usedGb / 50) * 100, 100);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadOverview() {
+      try {
+        const [user, filesRecent, filesRoot] = await Promise.all([
+          apiRequest<UserProfile>('/user/profile'),
+          apiRequest<FileMetadata[]>('/files/recent'),
+          apiRequest<PageResponse<FileMetadata>>('/files/list?path=%2F&page=0&size=100'),
+        ]);
+
+        if (cancelled) {
+          return;
+        }
+
+        setProfile(user);
+        setRecentFiles(filesRecent);
+        setRootFiles(filesRoot.items);
+
+        const schoolQuery = readStoredSchoolQuery();
+        if (!schoolQuery?.studentId || !schoolQuery?.semester) {
+          writeCachedValue(getOverviewCacheKey(), {
+            profile: user,
+            recentFiles: filesRecent,
+            rootFiles: filesRoot.items,
+            schedule: [],
+            grades: [],
+          });
+          return;
+        }
+
+        const queryString = new URLSearchParams({
+          studentId: schoolQuery.studentId,
+          semester: schoolQuery.semester,
+        }).toString();
+
+        const [scheduleData, gradesData] = await Promise.all([
+          apiRequest<CourseResponse[]>(`/cqu/schedule?${queryString}`),
+          apiRequest<GradeResponse[]>(`/cqu/grades?${queryString}`),
+        ]);
+
+        if (!cancelled) {
+          setSchedule(scheduleData);
+          setGrades(gradesData);
+          writeCachedValue(getOverviewCacheKey(), {
+            profile: user,
+            recentFiles: filesRecent,
+            rootFiles: filesRoot.items,
+            schedule: scheduleData,
+            grades: gradesData,
+          });
+        }
+      } catch {
+        const schoolQuery = readStoredSchoolQuery();
+        if (!cancelled && schoolQuery?.studentId && schoolQuery?.semester) {
+          const cachedSchoolResults = readCachedValue<{
+            schedule: CourseResponse[];
+            grades: GradeResponse[];
+          }>(getSchoolResultsCacheKey(schoolQuery.studentId, schoolQuery.semester));
+
+          if (cachedSchoolResults) {
+            setSchedule(cachedSchoolResults.schedule);
+            setGrades(cachedSchoolResults.grades);
+          }
+        }
+      }
+    }
+
+    loadOverview();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const latestSemester = grades[0]?.semester ?? '--';
+  const previewCourses = schedule.slice(0, 3);

  return (
    <div className="space-y-6">
      {/* Hero Section */}
-      <motion.div 
+      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="glass-panel rounded-3xl p-8 relative overflow-hidden"
      >
        <div className="absolute top-0 right-0 w-64 h-64 bg-[#336EFF] rounded-full mix-blend-screen filter blur-[100px] opacity-20" />
        <div className="relative z-10 space-y-2">
-          <h1 className="text-3xl md:text-4xl font-bold text-white tracking-tight">欢迎回来，tester5595</h1>
+          <h1 className="text-3xl md:text-4xl font-bold text-white tracking-tight">
+            欢迎回来，{profile?.username ?? '访客'}
+          </h1>
          <p className="text-[#336EFF] font-medium">现在时间 {currentTime} · {greeting}</p>
          <p className="text-sm text-slate-400 mt-4 max-w-xl leading-relaxed">
            这是您的个人门户总览。在这里您可以快速查看网盘文件状态、近期课程安排以及教务成绩摘要。
@@ -39,10 +187,28 @@ export default function Overview() {

      {/* Metrics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        <MetricCard title="网盘文件总数" value="128" desc="包含 4 个分类" icon={FileText} delay={0.1} />
-        <MetricCard title="最近 7 天上传" value="6" desc="最新更新于 2 小时前" icon={Upload} delay={0.2} />
-        <MetricCard title="本周课程" value="18" desc="今日还有 2 节课" icon={BookOpen} delay={0.3} />
-        <MetricCard title="已录入成绩" value="42" desc="最近学期：2025 秋" icon={GraduationCap} delay={0.4} />
+        <MetricCard title="网盘文件总数" value={`${rootFiles.length}`} desc="当前根目录统计" icon={FileText} delay={0.1} />
+        <MetricCard
+          title="最近 7 天上传"
+          value={`${recentWeekUploads}`}
+          desc={recentFiles[0] ? `最新更新于 ${formatRecentTime(recentFiles[0].createdAt)}` : '暂无最近上传'}
+          icon={Upload}
+          delay={0.2}
+        />
+        <MetricCard
+          title="本周课程"
+          value={`${schedule.length}`}
+          desc={schedule.length > 0 ? `当前已同步 ${schedule.length} 节课` : '请先前往教务页查询'}
+          icon={BookOpen}
+          delay={0.3}
+        />
+        <MetricCard
+          title="已录入成绩"
+          value={`${grades.length}`}
+          desc={`最近学期：${latestSemester}`}
+          icon={GraduationCap}
+          delay={0.4}
+        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
@@ -58,24 +224,25 @@ export default function Overview() {
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
-                {[
-                  { name: '软件工程期末复习资料.pdf', size: '2.4 MB', time: '2小时前' },
-                  { name: '2025春季学期课表.xlsx', size: '156 KB', time: '昨天 14:30' },
-                  { name: '项目架构设计图.png', size: '4.1 MB', time: '3天前' },
-                ].map((file, i) => (
+                {recentFiles.slice(0, 3).map((file, i) => (
                  <div key={i} className="flex items-center justify-between p-3 rounded-xl hover:bg-white/5 transition-colors cursor-pointer group" onClick={() => navigate('/files')}>
                    <div className="flex items-center gap-4 overflow-hidden">
                      <div className="w-10 h-10 rounded-xl bg-[#336EFF]/10 flex items-center justify-center shrink-0 group-hover:bg-[#336EFF]/20 transition-colors">
                        <FileText className="w-5 h-5 text-[#336EFF]" />
                      </div>
                      <div className="truncate">
-                        <p className="text-sm font-medium text-white truncate">{file.name}</p>
-                        <p className="text-xs text-slate-400 mt-0.5">{file.time}</p>
+                        <p className="text-sm font-medium text-white truncate">{file.filename}</p>
+                        <p className="text-xs text-slate-400 mt-0.5">{formatRecentTime(file.createdAt)}</p>
                      </div>
                    </div>
-                    <span className="text-xs text-slate-500 font-mono shrink-0 ml-4">{file.size}</span>
+                    <span className="text-xs text-slate-500 font-mono shrink-0 ml-4">{formatFileSize(file.size)}</span>
                  </div>
                ))}
+                {recentFiles.length === 0 && (
+                  <div className="p-3 rounded-xl border border-dashed border-white/10 text-sm text-slate-500">
+                    暂无最近文件
+                  </div>
+                )}
              </div>
            </CardContent>
          </Card>
@@ -91,21 +258,24 @@ export default function Overview() {
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
-                {[
-                  { time: '08:00 - 09:35', name: '高等数学 (下)', room: '教1-204' },
-                  { time: '10:00 - 11:35', name: '大学物理', room: '教2-101' },
-                  { time: '14:00 - 15:35', name: '软件工程', room: '计科楼 302' },
-                ].map((course, i) => (
+                {previewCourses.map((course, i) => (
                  <div key={i} className="flex items-center gap-4 p-4 rounded-xl border border-white/5 bg-white/[0.02] hover:bg-white/[0.04] transition-colors">
-                    <div className="w-28 shrink-0 text-sm font-mono text-[#336EFF] bg-[#336EFF]/10 px-2 py-1 rounded-md text-center">{course.time}</div>
+                    <div className="w-28 shrink-0 text-sm font-mono text-[#336EFF] bg-[#336EFF]/10 px-2 py-1 rounded-md text-center">
+                      第 {course.startTime ?? '--'} - {course.endTime ?? '--'} 节
+                    </div>
                    <div className="flex-1 truncate">
-                      <p className="text-sm font-medium text-white truncate">{course.name}</p>
+                      <p className="text-sm font-medium text-white truncate">{course.courseName}</p>
                      <p className="text-xs text-slate-400 flex items-center gap-1.5 mt-1">
-                        <Clock className="w-3.5 h-3.5" /> {course.room}
+                        <Clock className="w-3.5 h-3.5" /> {course.classroom ?? '教室待定'}
                      </p>
                    </div>
                  </div>
                ))}
+                {previewCourses.length === 0 && (
+                  <div className="p-4 rounded-xl border border-dashed border-white/10 text-sm text-slate-500">
+                    暂无课程数据，请先前往教务页查询
+                  </div>
+                )}
              </div>
            </CardContent>
          </Card>
@@ -136,13 +306,15 @@ export default function Overview() {
            <CardContent className="space-y-5">
              <div className="flex justify-between items-end">
                <div className="space-y-1">
-                  <p className="text-3xl font-bold text-white tracking-tight">12.6 <span className="text-sm text-slate-400 font-normal">GB</span></p>
+                  <p className="text-3xl font-bold text-white tracking-tight">
+                    {usedGb.toFixed(2)} <span className="text-sm text-slate-400 font-normal">GB</span>
+                  </p>
                  <p className="text-xs text-slate-500 uppercase tracking-wider">已使用 / 共 50 GB</p>
                </div>
-                <span className="text-xl font-mono text-[#336EFF] font-medium">25%</span>
+                <span className="text-xl font-mono text-[#336EFF] font-medium">{storagePercent.toFixed(1)}%</span>
              </div>
              <div className="h-2.5 w-full bg-black/40 rounded-full overflow-hidden shadow-inner">
-                <div className="h-full bg-gradient-to-r from-[#336EFF] to-blue-400 rounded-full" style={{ width: '25%' }} />
+                <div className="h-full bg-gradient-to-r from-[#336EFF] to-blue-400 rounded-full" style={{ width: `${storagePercent}%` }} />
              </div>
            </CardContent>
          </Card>
@@ -155,11 +327,11 @@ export default function Overview() {
            <CardContent>
              <div className="flex items-center gap-4 p-4 rounded-xl bg-white/[0.02] border border-white/5">
                <div className="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center text-white font-bold text-xl shadow-lg">
-                  T
+                  {(profile?.username?.[0] ?? 'T').toUpperCase()}
                </div>
                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-semibold text-white truncate">tester5595</p>
-                  <p className="text-xs text-slate-400 truncate mt-0.5">tester5595@example.com</p>
+                  <p className="text-sm font-semibold text-white truncate">{profile?.username ?? '未登录'}</p>
+                  <p className="text-xs text-slate-400 truncate mt-0.5">{profile?.email ?? '暂无邮箱'}</p>
                </div>
              </div>
            </CardContent>
--- a/front/src/pages/School.tsx
+++ b/front/src/pages/School.tsx
@@ -1,23 +1,119 @@
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { motion } from 'motion/react';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/src/components/ui/card';
-import { Button } from '@/src/components/ui/button';
-import { Input } from '@/src/components/ui/input';
 import { GraduationCap, Calendar, User, Lock, Search, BookOpen, ChevronRight, Award } from 'lucide-react';
+
+import { Button } from '@/src/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/src/components/ui/card';
+import { Input } from '@/src/components/ui/input';
+import { apiRequest } from '@/src/lib/api';
+import { readCachedValue, writeCachedValue } from '@/src/lib/cache';
+import { getSchoolResultsCacheKey, readStoredSchoolQuery, writeStoredSchoolQuery } from '@/src/lib/page-cache';
+import type { CourseResponse, GradeResponse } from '@/src/lib/types';
 import { cn } from '@/src/lib/utils';

-export default function School() {
-  const [activeTab, setActiveTab] = useState<'schedule' | 'grades'>('schedule');
-  const [loading, setLoading] = useState(false);
-  const [queried, setQueried] = useState(false);
+function formatSections(startTime?: number | null, endTime?: number | null) {
+  if (!startTime || !endTime) {
+    return '节次待定';
+  }
+
+  return `第 ${startTime}-${endTime} 节`;
+}
+
+export default function School() {
+  const storedQuery = readStoredSchoolQuery();
+  const initialStudentId = storedQuery?.studentId ?? '2023123456';
+  const initialSemester = storedQuery?.semester ?? '2025-spring';
+  const initialCachedResults = readCachedValue<{
+    queried: boolean;
+    schedule: CourseResponse[];
+    grades: GradeResponse[];
+  }>(getSchoolResultsCacheKey(initialStudentId, initialSemester));
+  const [activeTab, setActiveTab] = useState<'schedule' | 'grades'>('schedule');
+  const [studentId, setStudentId] = useState(initialStudentId);
+  const [password, setPassword] = useState('password123');
+  const [semester, setSemester] = useState(initialSemester);
+  const [loading, setLoading] = useState(false);
+  const [queried, setQueried] = useState(initialCachedResults?.queried ?? false);
+  const [schedule, setSchedule] = useState<CourseResponse[]>(initialCachedResults?.schedule ?? []);
+  const [grades, setGrades] = useState<GradeResponse[]>(initialCachedResults?.grades ?? []);
+
+  const averageGrade = useMemo(() => {
+    if (grades.length === 0) {
+      return '0.0';
+    }
+
+    const sum = grades.reduce((total, item) => total + (item.grade ?? 0), 0);
+    return (sum / grades.length).toFixed(1);
+  }, [grades]);
+
+  const loadSchoolData = async (
+    nextStudentId: string,
+    nextSemester: string,
+    options: { background?: boolean } = {}
+  ) => {
+    const cacheKey = getSchoolResultsCacheKey(nextStudentId, nextSemester);
+    const cachedResults = readCachedValue<{
+      queried: boolean;
+      schedule: CourseResponse[];
+      grades: GradeResponse[];
+    }>(cacheKey);
+
+    if (!options.background) {
+      setLoading(true);
+    }
+
+    writeStoredSchoolQuery({
+      studentId: nextStudentId,
+      semester: nextSemester,
+    });
+
+    try {
+      const queryString = new URLSearchParams({
+        studentId: nextStudentId,
+        semester: nextSemester,
+      }).toString();
+
+      const [scheduleData, gradeData] = await Promise.all([
+        apiRequest<CourseResponse[]>(`/cqu/schedule?${queryString}`),
+        apiRequest<GradeResponse[]>(`/cqu/grades?${queryString}`),
+      ]);

-  const handleQuery = (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setTimeout(() => {
-      setLoading(false);
      setQueried(true);
-    }, 1500);
+      setSchedule(scheduleData);
+      setGrades(gradeData);
+      writeCachedValue(cacheKey, {
+        queried: true,
+        studentId: nextStudentId,
+        semester: nextSemester,
+        schedule: scheduleData,
+        grades: gradeData,
+      });
+    } catch {
+      if (!cachedResults) {
+        setQueried(false);
+        setSchedule([]);
+        setGrades([]);
+      }
+    } finally {
+      if (!options.background) {
+        setLoading(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (!storedQuery) {
+      return;
+    }
+
+    loadSchoolData(storedQuery.studentId, storedQuery.semester, {
+      background: true,
+    }).catch(() => undefined);
+  }, []);
+
+  const handleQuery = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await loadSchoolData(studentId, semester);
  };

  return (
@@ -38,19 +134,19 @@ export default function School() {
                <label className="text-xs font-medium text-slate-400 ml-1">学号</label>
                <div className="relative">
                  <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
-                  <Input defaultValue="2023123456" className="pl-9 bg-black/20" required />
+                  <Input value={studentId} onChange={(event) => setStudentId(event.target.value)} className="pl-9 bg-black/20" required />
                </div>
              </div>
              <div className="space-y-2">
                <label className="text-xs font-medium text-slate-400 ml-1">密码</label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
-                  <Input type="password" defaultValue="password123" className="pl-9 bg-black/20" required />
+                  <Input type="password" value={password} onChange={(event) => setPassword(event.target.value)} className="pl-9 bg-black/20" required />
                </div>
              </div>
              <div className="space-y-2">
                <label className="text-xs font-medium text-slate-400 ml-1">学期</label>
-                <select className="flex h-11 w-full rounded-xl border border-white/10 bg-black/20 px-3 py-2 text-sm text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#336EFF]">
+                <select value={semester} onChange={(event) => setSemester(event.target.value)} className="flex h-11 w-full rounded-xl border border-white/10 bg-black/20 px-3 py-2 text-sm text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#336EFF]">
                  <option value="2025-spring">2025 春</option>
                  <option value="2024-fall">2024 秋</option>
                  <option value="2024-spring">2024 春</option>
@@ -81,9 +177,9 @@ export default function School() {
          <CardContent>
            {queried ? (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <SummaryItem label="当前缓存账号" value="2023123456" icon={User} />
-                <SummaryItem label="已保存课表学期" value="2025 春" icon={Calendar} />
-                <SummaryItem label="已保存成绩" value="3 个学期" icon={Award} />
+                <SummaryItem label="当前缓存账号" value={studentId} icon={User} />
+                <SummaryItem label="已保存课表学期" value={semester} icon={Calendar} />
+                <SummaryItem label="已保存成绩" value={`${averageGrade} 分`} icon={Award} />
              </div>
            ) : (
              <div className="h-40 flex flex-col items-center justify-center text-slate-500 space-y-3 border border-dashed border-white/10 rounded-xl bg-white/[0.01]">
@@ -100,8 +196,8 @@ export default function School() {
        <button
          onClick={() => setActiveTab('schedule')}
          className={cn(
-            "px-6 py-2 text-sm font-medium rounded-lg transition-all",
-            activeTab === 'schedule' ? "bg-[#336EFF] text-white shadow-md" : "text-slate-400 hover:text-white"
+            'px-6 py-2 text-sm font-medium rounded-lg transition-all',
+            activeTab === 'schedule' ? 'bg-[#336EFF] text-white shadow-md' : 'text-slate-400 hover:text-white'
          )}
        >
          课表抽屉
@@ -109,8 +205,8 @@ export default function School() {
        <button
          onClick={() => setActiveTab('grades')}
          className={cn(
-            "px-6 py-2 text-sm font-medium rounded-lg transition-all",
-            activeTab === 'grades' ? "bg-[#336EFF] text-white shadow-md" : "text-slate-400 hover:text-white"
+            'px-6 py-2 text-sm font-medium rounded-lg transition-all',
+            activeTab === 'grades' ? 'bg-[#336EFF] text-white shadow-md' : 'text-slate-400 hover:text-white'
          )}
        >
          成绩热力图
@@ -124,7 +220,7 @@ export default function School() {
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3 }}
      >
-        {activeTab === 'schedule' ? <ScheduleView queried={queried} /> : <GradesView queried={queried} />}
+        {activeTab === 'schedule' ? <ScheduleView queried={queried} schedule={schedule} /> : <GradesView queried={queried} grades={grades} />}
      </motion.div>
    </div>
  );
@@ -165,7 +261,7 @@ function SummaryItem({ label, value, icon: Icon }: any) {
  );
 }

-function ScheduleView({ queried }: { queried: boolean }) {
+function ScheduleView({ queried, schedule }: { queried: boolean; schedule: CourseResponse[] }) {
  if (!queried) {
    return (
      <Card>
@@ -178,14 +274,6 @@ function ScheduleView({ queried }: { queried: boolean }) {
  }

  const days = ['周一', '周二', '周三', '周四', '周五'];
-  const mockSchedule = [
-    { day: 0, time: '08:00 - 09:35', name: '高等数学 (下)', room: '教1-204' },
-    { day: 0, time: '10:00 - 11:35', name: '大学物理', room: '教2-101' },
-    { day: 1, time: '14:00 - 15:35', name: '软件工程', room: '计科楼 302' },
-    { day: 2, time: '08:00 - 09:35', name: '数据结构', room: '教1-105' },
-    { day: 3, time: '16:00 - 17:35', name: '计算机网络', room: '计科楼 401' },
-    { day: 4, time: '10:00 - 11:35', name: '操作系统', room: '教3-202' },
-  ];

  return (
    <Card>
@@ -194,36 +282,39 @@ function ScheduleView({ queried }: { queried: boolean }) {
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
-          {days.map((day, index) => (
-            <div key={day} className="space-y-3">
-              <div className="text-center py-2 bg-white/5 rounded-lg text-sm font-medium text-slate-300">
-                {day}
+          {days.map((day, index) => {
+            const dayCourses = schedule.filter((item) => (item.dayOfWeek ?? 0) - 1 === index);
+            return (
+              <div key={day} className="space-y-3">
+                <div className="text-center py-2 bg-white/5 rounded-lg text-sm font-medium text-slate-300">
+                  {day}
+                </div>
+                <div className="space-y-2">
+                  {dayCourses.map((course, i) => (
+                    <div key={i} className="p-3 rounded-xl bg-[#336EFF]/10 border border-[#336EFF]/20 hover:bg-[#336EFF]/20 transition-colors">
+                      <p className="text-xs font-mono text-[#336EFF] mb-1">{formatSections(course.startTime, course.endTime)}</p>
+                      <p className="text-sm font-medium text-white leading-tight mb-2">{course.courseName}</p>
+                      <p className="text-xs text-slate-400 flex items-center gap-1">
+                        <ChevronRight className="w-3 h-3" /> {course.classroom ?? '教室待定'}
+                      </p>
+                    </div>
+                  ))}
+                  {dayCourses.length === 0 && (
+                    <div className="h-24 rounded-xl border border-dashed border-white/10 flex items-center justify-center text-xs text-slate-500">
+                      无课程
+                    </div>
+                  )}
+                </div>
              </div>
-              <div className="space-y-2">
-                {mockSchedule.filter(s => s.day === index).map((course, i) => (
-                  <div key={i} className="p-3 rounded-xl bg-[#336EFF]/10 border border-[#336EFF]/20 hover:bg-[#336EFF]/20 transition-colors">
-                    <p className="text-xs font-mono text-[#336EFF] mb-1">{course.time}</p>
-                    <p className="text-sm font-medium text-white leading-tight mb-2">{course.name}</p>
-                    <p className="text-xs text-slate-400 flex items-center gap-1">
-                      <ChevronRight className="w-3 h-3" /> {course.room}
-                    </p>
-                  </div>
-                ))}
-                {mockSchedule.filter(s => s.day === index).length === 0 && (
-                  <div className="h-24 rounded-xl border border-dashed border-white/10 flex items-center justify-center text-xs text-slate-500">
-                    无课程
-                  </div>
-                )}
-              </div>
-            </div>
-          ))}
+            );
+          })}
        </div>
      </CardContent>
    </Card>
  );
 }

-function GradesView({ queried }: { queried: boolean }) {
+function GradesView({ queried, grades }: { queried: boolean; grades: GradeResponse[] }) {
  if (!queried) {
    return (
      <Card>
@@ -235,20 +326,14 @@ function GradesView({ queried }: { queried: boolean }) {
    );
  }

-  const terms = [
-    {
-      name: '2024 秋',
-      grades: [75, 78, 80, 83, 85, 88, 89, 96]
-    },
-    {
-      name: '2025 春',
-      grades: [70, 78, 82, 84, 85, 85, 86, 88, 93]
-    },
-    {
-      name: '2025 秋',
-      grades: [68, 70, 76, 80, 85, 86, 90, 94, 97]
+  const terms = grades.reduce<Record<string, number[]>>((accumulator, grade) => {
+    const semester = grade.semester ?? '未分类';
+    if (!accumulator[semester]) {
+      accumulator[semester] = [];
    }
-  ];
+    accumulator[semester].push(grade.grade ?? 0);
+    return accumulator;
+  }, {});

  const getScoreStyle = (score: number) => {
    if (score >= 95) return 'bg-[#336EFF]/50 text-white';
@@ -266,15 +351,15 @@ function GradesView({ queried }: { queried: boolean }) {
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {terms.map((term, i) => (
+          {Object.entries(terms).map(([term, scores], i) => (
            <div key={i} className="flex flex-col">
-              <h3 className="text-sm font-bold text-white border-b border-white/5 pb-3 mb-4">{term.name}</h3>
+              <h3 className="text-sm font-bold text-white border-b border-white/5 pb-3 mb-4">{term}</h3>
              <div className="flex flex-col gap-2">
-                {term.grades.map((score, j) => (
-                  <div 
-                    key={j} 
+                {scores.map((score, j) => (
+                  <div
+                    key={j}
                    className={cn(
-                      "w-full py-1.5 rounded-full text-xs font-mono font-medium text-center transition-colors",
+                      'w-full py-1.5 rounded-full text-xs font-mono font-medium text-center transition-colors',
                      getScoreStyle(score)
                    )}
                  >
@@ -284,6 +369,7 @@ function GradesView({ queried }: { queried: boolean }) {
              </div>
            </div>
          ))}
+          {Object.keys(terms).length === 0 && <div className="text-sm text-slate-500">暂无成绩数据</div>}
        </div>
      </CardContent>
    </Card>
--- a/front/src/vite-env.d.ts
+++ b/front/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />