mozzie/monorepo-microservice-rbac
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: login

Browse Source
This commit is contained in:
mozzie 2023-08-28 11:17:33 +08:00
parent 60c1d9165d
commit 2822f338dc
6 changed files with 100 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
apps/dmp/src/components/Layout/Menu/index.tsx
View File

@ -1,10 +1,28 @@
import { MenuItem, roleMenusMapping } from "./roleMenu.config";
import { UserService } from "@@/domain/User/UserService";
import { useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
import { useNavigate } from "react-router";
import { Menu, Spin } from "antd";
import { ROLE_NAME } from "@/constant";
import { Menu, MenuProps } from "antd";
export type MenuItem = Required<MenuProps>["items"][number];
type RoleMenusType = {
menuItems: MenuItem[];
};
export const getItem = (
label: React.ReactNode,
key: React.Key,
icon?: React.ReactNode,
children?: MenuItem[],
type?: "group"
): MenuItem => {
return {
key,
icon,
children,
label,
type,
} as MenuItem;
};
export const useMenu = () => {
const navigate = useNavigate();
@ -12,17 +30,9 @@ export const useMenu = () => {
useEffect(() => setSelectedKeys([location.pathname]), []);
const RoleMenu: React.FC<{ domainService: UserService }> = observer(
({ domainService }) => {
const { user } = domainService;
console.log(user);
const roleNames = user.getRolesName();
if (roleNames) {
let menuItems: MenuItem[] = [];
for (const key in roleMenusMapping)
if (roleNames.includes(key))
menuItems = roleMenusMapping[key as ROLE_NAME];
return (
const LeftMenu = (props: RoleMenusType) => {
const { menuItems } = props;
return menuItems.length > 0 ? (
<Menu
onClick={(e) => navigate(e.key)}
style={{ width: "100%", height: "100%" }}
@ -31,16 +41,10 @@ export const useMenu = () => {
mode="inline"
items={menuItems}
/>
) : (
<span></span>
);
} else {
return (
<div style={{ textAlign: "center" }}>
<Spin />
</div>
);
}
}
);
return { RoleMenu };
};
return { LeftMenu };
};

2
apps/dmp/src/components/Layout/Menu/roleMenu.config.tsx
View File

@ -33,7 +33,7 @@ const adminMenuItems: MenuItem[] = [
const annotatorMenuItems: MenuItem[] = [
getItem("影像", "dicom", <DatabaseOutlined />, [
getItem("标注", "/annotator/list", <CloudUploadOutlined />),
getItem("标注", "/list", <CloudUploadOutlined />),
]),
];

11
apps/dmp/src/components/Layout/index.tsx
View File

@ -1,23 +1,20 @@
import { Outlet, useLocation } from "react-router";
import { useDomain } from "@/hook/useDomain";
import { useMenu } from "./Menu";
import { ReactNode } from "react";
import "./index.less";
interface LayoutProps {
children?: JSX.Element;
leftMenus?: ReactNode;
}
export const Layout = (props: LayoutProps) => {
const location = useLocation();
const { userDomainService } = useDomain();
const { RoleMenu } = useMenu();
return (
<div className="layout-container">
<header> {location.pathname}</header>
<div>
<aside>
<RoleMenu domainService={userDomainService} />
</aside>
<aside>{props.leftMenus}</aside>
<main>
<Outlet />
</main>

23
apps/dmp/src/modules/Admin/index.tsx
View File

@ -1,14 +1,31 @@
import { getItem, useMenu } from "@/components/Layout/Menu";
import { Layout } from "@/components/Layout";
import {
CloudUploadOutlined,
DatabaseOutlined,
UnorderedListOutlined,
} from "@ant-design/icons";
import { Outlet } from "react-router";
import { MenuProps } from "antd";
interface AdminDashboardProps {
children?: JSX.Element;
}
export type MenuItem = Required<MenuProps>["items"][number];
const adminMenuItems: MenuItem[] = [
getItem("影像", "dicom", <DatabaseOutlined />, [
getItem("上传", "/upload", <CloudUploadOutlined />),
getItem("列表", "/list", <UnorderedListOutlined />),
]),
];
export const AdminDashboard = (props: AdminDashboardProps) => {
const { LeftMenu } = useMenu();
return (
<div>
<p>AdminDashboard</p>
<Layout leftMenus={<LeftMenu menuItems={adminMenuItems} />}>
<Outlet />
</div>
</Layout>
);
};

15
apps/dmp/src/modules/Annotator/index.tsx
View File

@ -1,14 +1,23 @@
import { CloudUploadOutlined, DatabaseOutlined } from "@ant-design/icons";
import { MenuItem, getItem, useMenu } from "@/components/Layout/Menu";
import { Layout } from "@/components/Layout";
import { Outlet } from "react-router";
interface AnnotatorDashBoardProps {
children?: JSX.Element;
}
const annotatorMenuItems: MenuItem[] = [
getItem("影像", "dicom", <DatabaseOutlined />, [
getItem("标注", "/list", <CloudUploadOutlined />),
]),
];
export const AnnotatorDashBoard = (props: AnnotatorDashBoardProps) => {
const { LeftMenu } = useMenu();
return (
<div>
<p>AnnotatorDashBoard</p>
<Layout leftMenus={<LeftMenu menuItems={annotatorMenuItems} />}>
<Outlet />
</div>
</Layout>
);
};

31
apps/dmp/src/router/roleRoutes.tsx
View File

@ -16,7 +16,6 @@ export const roleRoutes: Record<ROLE_NAME, (RouteObject & ExpandRouteProps)[]> =
{
path: "/",
element: <AdminDashboard />,
title: "管理员",
children: [
{
path: "/",
@ -26,33 +25,41 @@ export const roleRoutes: Record<ROLE_NAME, (RouteObject & ExpandRouteProps)[]> =
path: "/list",
element: <DicomList />,
},
],
},
{
path: "/list",
element: <DicomList />,
title: "管理员",
},
{
path: "/upload",
element: <DicomUpload />,
title: "管理员",
},
],
},
// {
// path: "/list",
// element: <DicomList />,
// title: "管理员",
// },
// {
// path: "/upload",
// element: <DicomUpload />,
// title: "管理员",
// },
],
/**
* 标注
*/
[ROLE_NAME.ANNOTATOR]: [
{
path: "/",
// element: <Navigate to="/annotator/list" replace />,
element: <AnnotatorDashBoard />,
title: "标注",
children: [
{
path: "/",
element: <Navigate to="/list" replace />,
},
{
path: "/annotator/list",
path: "/list",
element: <AnnotatorList />,
title: "标注",
},
],
},
],
};