42 lines
1.7 KiB
TypeScript
42 lines
1.7 KiB
TypeScript
import { LockKeyhole } from "lucide-react";
|
|
import { Outlet, useLocation, useNavigate } from "react-router";
|
|
|
|
import { Button } from "~/components/ui/button";
|
|
import { Card, CardContent } from "~/components/ui/card";
|
|
import { OperationsDataBoundary, OperationsDataProvider } from "~/features/operations/OperationsDataContext";
|
|
import {
|
|
isOperationsPageVisibleForRole,
|
|
operationsPageFromPath,
|
|
useOperationsRole,
|
|
} from "~/features/operations/operationsRole";
|
|
|
|
export default function OperationsLayout() {
|
|
const role = useOperationsRole();
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const page = operationsPageFromPath(location.pathname);
|
|
|
|
if (!isOperationsPageVisibleForRole(role, page)) {
|
|
return (
|
|
<section className="grid h-full place-items-center bg-bg p-6">
|
|
<Card className="w-full max-w-xl">
|
|
<CardContent className="flex flex-col items-center py-12 text-center">
|
|
<span className="grid size-12 place-items-center rounded-2xl bg-warning-soft text-warning"><LockKeyhole className="size-6" /></span>
|
|
<h2 className="mt-4 text-xl font-bold text-foreground">当前角色不展示该页面</h2>
|
|
<p className="mt-2 text-sm leading-6 text-muted-foreground">运维前端根据登录返回的角色适配界面。该显示规则不替代独立权限模块的服务端授权。</p>
|
|
<Button className="mt-5" onClick={() => navigate("/operations")}>返回运维工作台</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<OperationsDataProvider>
|
|
<OperationsDataBoundary>
|
|
<Outlet />
|
|
</OperationsDataBoundary>
|
|
</OperationsDataProvider>
|
|
);
|
|
}
|