12 lines
1.3 KiB
TypeScript
12 lines
1.3 KiB
TypeScript
import { ArrowRight, FileText } from "lucide-react";
|
||
import { useQuery } from "@tanstack/react-query";
|
||
import { Link } from "react-router";
|
||
import { catalogApi, queryKeys } from "../../api";
|
||
import { useStudentSession } from "../StudentSession";
|
||
|
||
export default function HandbookPage() {
|
||
const { profile } = useStudentSession();
|
||
const query = useQuery({ queryKey: queryKeys.handbookSubjects(profile?.regionId), queryFn: () => catalogApi.handbookSubjects(profile?.regionId) });
|
||
return <div className="catalog-learning-page"><header className="page-heading"><div><p className="eyebrow">KNOWLEDGE HANDBOOK</p><h1>知识手册</h1><p>按科目梳理知识体系，考前快速定位重点内容。</p></div></header>{query.isLoading ? <div className="skeleton-grid"><i /><i /><i /></div> : query.isError ? <div className="error-panel"><p>知识手册加载失败。</p><button onClick={() => void query.refetch()}>重新加载</button></div> : query.data?.items.length ? <section className="learning-catalog-grid">{query.data.items.map((item) => <Link to={`/handbook/subject/${item.id}`} key={item.id}><span><FileText /></span><div><small>HANDBOOK SUBJECT</small><h2>{item.name}</h2><p>{item.description || "查看章节和知识条目。"}</p></div><ArrowRight /></Link>)}</section> : <div className="empty-panel">当前地区还没有发布知识手册。</div>}</div>;
|
||
}
|