复制项目

yearning

12 小时以前 3f96c9c6502243b06efd4bb34a189e72e3a5557c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { Breadcrumb, Button } from "antd";
import { ArrowLeftOutlined, HomeOutlined } from "@ant-design/icons";
import { Link, matchPath, useLocation, useNavigate } from "react-router-dom";
import type { ReactNode } from "react";
import { readScoreListQuery, scoresListPath } from "../scoreQueryParams";
 
type Crumb = { title: ReactNode; key: string };
 
function buildCrumbs(pathname: string, search: string): Crumb[] {
  const home: Crumb = {
    key: "home",
    title: (
      <Link to="/scores">
        <HomeOutlined style={{ marginRight: 4 }} />
        首页
      </Link>
    ),
  };
 
  if (matchPath("/scores", pathname)) {
    return [home, { key: "scores", title: "成绩查询" }];
  }
 
  if (matchPath("/attempts/:attemptId", pathname)) {
    const scoresTo = scoresListPath(readScoreListQuery(search));
    return [
      home,
      { key: "scores", title: <Link to={scoresTo}>成绩查询</Link> },
      { key: "attempt", title: "答卷详情" },
    ];
  }
 
  if (matchPath("/admin/import", pathname)) {
    return [home, { key: "admin-import", title: "数据导入" }];
  }
 
  if (matchPath("/admin/graders", pathname)) {
    return [home, { key: "admin-graders", title: "考评员管理" }];
  }
 
  if (matchPath("/admin/settings", pathname)) {
    return [home, { key: "admin-settings", title: "系统设置" }];
  }
 
  return [home];
}
 
export default function AppBreadcrumb() {
  const { pathname, search } = useLocation();
  const navigate = useNavigate();
  const crumbs = buildCrumbs(pathname, search);
  const onAttempt = Boolean(matchPath("/attempts/:attemptId", pathname));
 
  return (
    <div className="app-breadcrumb-row">
      {onAttempt && (
        <Button
          type="link"
          className="app-breadcrumb__back"
          icon={<ArrowLeftOutlined />}
          onClick={() => navigate(scoresListPath(readScoreListQuery(search)))}
        >
          返回
        </Button>
      )}
      <Breadcrumb
        className="app-breadcrumb"
        items={crumbs.map((c) => ({ key: c.key, title: c.title }))}
      />
    </div>
  );
}