training_data/apps/web/src/routes/index.tsx

import {
	createBrowserRouter,
	IndexRouteObject,
	Link,
	NonIndexRouteObject,
} from "react-router-dom";
import { RolePerms } from "@nice/common";
import ErrorPage from "../app/error";
import DepartmentAdminPage from "../app/admin/department/page";
import TermAdminPage from "../app/admin/term/page";
import StaffAdminPage from "../app/admin/staff/page";
import RoleAdminPage from "../app/admin/role/page";
import WithAuth from "../components/utils/with-auth";
import LoginPage from "../app/login";
import BaseSettingPage from "../app/admin/base-setting/page";
import { MainLayout } from "../components/layout/main/MainLayout";
import StudentCoursesPage from "../app/main/courses/student/page";
import InstructorCoursesPage from "../app/main/courses/instructor/page";
import HomePage from "../app/main/home/page";
import { CourseDetailPage } from "../app/main/course/detail/page";
import { CourseBasicForm } from "../components/models/course/editor/form/CourseBasicForm";
import CourseContentForm from "../components/models/course/editor/form/CourseContentForm";
import { CourseGoalForm } from "../components/models/course/editor/form/CourseGoalForm";
import CourseSettingForm from "../components/models/course/editor/form/CourseSettingForm";
import CourseEditorLayout from "../components/models/course/editor/layout/CourseEditorLayout";

interface CustomIndexRouteObject extends IndexRouteObject {
	name?: string;
	breadcrumb?: string;
}
interface CustomIndexRouteObject extends IndexRouteObject {
	name?: string;
	breadcrumb?: string;
}

export interface CustomNonIndexRouteObject extends NonIndexRouteObject {
	name?: string;
	children?: CustomRouteObject[];
	breadcrumb?: string;
	handle?: {
		crumb: (data?: any) => void;
	};
}
export type CustomRouteObject =
	| CustomIndexRouteObject
	| CustomNonIndexRouteObject;
export const routes: CustomRouteObject[] = [
	{
		path: "/",
		errorElement: <ErrorPage />,
		handle: {
			crumb() {
				return <Link to={"/"}>主页</Link>;
			},
		},
		children: [
			{
				element: <MainLayout></MainLayout>,
				children: [
					{
						index: true,
						element: <HomePage />,
					},
					{
						path: "courses",
						children: [
							{
								path: "student",
								element: (
									<WithAuth>
										<StudentCoursesPage />
									</WithAuth>
								),
							},
							{
								path: "instructor",
								element: (
									<WithAuth>
										<InstructorCoursesPage />
									</WithAuth>
								),
							},
						],
					},
				],
			},
			{
				path: "course",
				children: [
					{
						path: ":id?/editor",
						element: <CourseEditorLayout></CourseEditorLayout>,
						children: [{
							index: true,
							element: <CourseBasicForm></CourseBasicForm>
						},
						{
							path: 'goal',
							element: <CourseGoalForm></CourseGoalForm>
						},
						{
							path: 'content',
							element: <CourseContentForm></CourseContentForm>
						},
						{
							path: 'setting',
							element: <CourseSettingForm></CourseSettingForm>
						}
						]
					},
					{
						path: ":id?/detail", // 使用 ? 表示 id 参数是可选的
						element: <CourseDetailPage />,
					},
				],
			},
			{
				path: "admin",
				children: [
					{
						path: "base-setting",
						element: (
							<WithAuth
								options={{
									orPermissions: [
										RolePerms.MANAGE_BASE_SETTING,
									],
								}}>
								<BaseSettingPage></BaseSettingPage>
							</WithAuth>
						),
						handle: {
							crumb() {
								return (
									<Link to={"/admin/base-setting"}>
										基本设置
									</Link>
								);
							},
						},
					},
					{
						path: "department",
						breadcrumb: "单位管理",
						element: (
							<WithAuth
								options={{
									orPermissions: [RolePerms.MANAGE_ANY_DEPT],
								}}>
								<DepartmentAdminPage></DepartmentAdminPage>
							</WithAuth>
						),
						handle: {
							crumb() {
								return (
									<Link to={"/admin/department"}>
										组织架构
									</Link>
								);
							},
						},
					},
					{
						path: "staff",
						element: (
							<WithAuth
								options={{
									orPermissions: [
										RolePerms.MANAGE_ANY_STAFF,
										RolePerms.MANAGE_DOM_STAFF,
									],
								}}>
								<StaffAdminPage></StaffAdminPage>
							</WithAuth>
						),
						handle: {
							crumb() {
								return (
									<Link to={"/admin/staff"}>用户管理</Link>
								);
							},
						},
					},
					{
						path: "term",
						breadcrumb: "分类配置",
						element: (
							<WithAuth
								options={{
									orPermissions: [
										RolePerms.MANAGE_ANY_TERM,
										// RolePerms.MANAGE_DOM_TERM
									],
								}}>
								<TermAdminPage></TermAdminPage>
							</WithAuth>
						),
						handle: {
							crumb() {
								return <Link to={"/admin/term"}>分类配置</Link>;
							},
						},
					},
					{
						path: "role",
						breadcrumb: "角色管理",
						element: (
							<WithAuth
								options={{
									orPermissions: [
										RolePerms.MANAGE_ANY_ROLE,
										RolePerms.MANAGE_DOM_ROLE,
									],
								}}>
								<RoleAdminPage></RoleAdminPage>
							</WithAuth>
						),
						handle: {
							crumb() {
								return <Link to={"/admin/role"}>角色管理</Link>;
							},
						},
					},
				],
			},
		],
	},
	{
		path: "/login",
		breadcrumb: "登录",
		element: <LoginPage></LoginPage>,
	},
];

export const router = createBrowserRouter(routes);