114 lines
5.4 KiB
JavaScript
114 lines
5.4 KiB
JavaScript
import Add from "@mui/icons-material/Add";
|
|
import ShieldOutlined from "@mui/icons-material/ShieldOutlined";
|
|
import SyncOutlined from "@mui/icons-material/SyncOutlined";
|
|
import { DataState } from "@/shared/ui/DataState.jsx";
|
|
import {
|
|
AdminActionIconButton,
|
|
AdminFilterResetButton,
|
|
AdminListBody,
|
|
AdminListPage,
|
|
AdminListToolbar,
|
|
} from "@/shared/ui/AdminListLayout.jsx";
|
|
import { MenuFormDrawer } from "@/features/menus/components/MenuFormDrawer.jsx";
|
|
import { MenuPermissionDetail } from "@/features/menus/components/MenuPermissionDetail.jsx";
|
|
import { MenuTreePanel } from "@/features/menus/components/MenuTreePanel.jsx";
|
|
import { PermissionLibraryDrawer } from "@/features/menus/components/PermissionLibraryDrawer.jsx";
|
|
import { PermissionFormDrawer } from "@/features/menus/components/PermissionFormDrawer.jsx";
|
|
import { useMenusPage } from "@/features/menus/hooks/useMenusPage.js";
|
|
|
|
export function MenuManagementPage() {
|
|
const page = useMenusPage();
|
|
|
|
return (
|
|
<>
|
|
<AdminListPage>
|
|
<AdminListToolbar
|
|
filters={
|
|
<AdminFilterResetButton disabled={!page.hasActiveFilters} onClick={page.resetFilters} />
|
|
}
|
|
actions={
|
|
<>
|
|
{page.abilities.canSyncPermission ? (
|
|
<AdminActionIconButton label="同步权限" onClick={page.syncDefaultPermissions}>
|
|
<SyncOutlined fontSize="small" />
|
|
</AdminActionIconButton>
|
|
) : null}
|
|
{page.abilities.canLoadPermissions ? (
|
|
<AdminActionIconButton label="权限库" onClick={page.openPermissionLibrary}>
|
|
<ShieldOutlined fontSize="small" />
|
|
</AdminActionIconButton>
|
|
) : null}
|
|
{page.abilities.canCreatePermission ? (
|
|
<AdminActionIconButton label="新增权限" onClick={page.openCreatePermission}>
|
|
<Add fontSize="small" />
|
|
</AdminActionIconButton>
|
|
) : null}
|
|
{page.abilities.canCreateMenu ? (
|
|
<AdminActionIconButton label="新增菜单" primary onClick={page.openCreateMenu}>
|
|
<Add fontSize="small" />
|
|
</AdminActionIconButton>
|
|
) : null}
|
|
</>
|
|
}
|
|
/>
|
|
|
|
<DataState error={page.error} loading={page.loading} onRetry={page.reload}>
|
|
<AdminListBody>
|
|
<section className="menu-permission-layout">
|
|
<MenuTreePanel
|
|
abilities={page.abilities}
|
|
menus={page.flatMenus}
|
|
query={page.menuQuery}
|
|
selectedMenuId={page.selectedMenu?.id}
|
|
total={page.menuTotal}
|
|
onQueryChange={page.changeMenuQuery}
|
|
onReorder={page.reorderMenu}
|
|
onSelect={page.selectMenu}
|
|
/>
|
|
<MenuPermissionDetail
|
|
abilities={page.abilities}
|
|
accessPermissionQuery={page.accessPermissionQuery}
|
|
accessPermissions={page.accessPermissions}
|
|
boundPermission={page.selectedPermission}
|
|
menu={page.selectedMenu}
|
|
onAccessPermissionQueryChange={page.changeAccessPermissionQuery}
|
|
onBindPermission={page.bindMenuPermission}
|
|
onEdit={page.openEditMenu}
|
|
onRemove={page.removeMenu}
|
|
onToggleVisible={page.toggleVisible}
|
|
/>
|
|
</section>
|
|
</AdminListBody>
|
|
</DataState>
|
|
</AdminListPage>
|
|
|
|
<MenuFormDrawer
|
|
editingMenu={page.editingMenu}
|
|
form={page.menuForm}
|
|
onClose={page.closeMenuDrawer}
|
|
onSubmit={page.submitMenu}
|
|
open={page.menuDrawerOpen}
|
|
setForm={page.setMenuForm}
|
|
/>
|
|
<PermissionLibraryDrawer
|
|
abilities={page.abilities}
|
|
open={page.permissionLibraryOpen}
|
|
permissions={page.permissions}
|
|
query={page.permissionLibraryQuery}
|
|
onClose={page.closePermissionLibrary}
|
|
onEdit={page.openEditPermission}
|
|
onQueryChange={page.changePermissionLibraryQuery}
|
|
onRemove={page.removePermission}
|
|
/>
|
|
<PermissionFormDrawer
|
|
editingPermission={page.editingPermission}
|
|
form={page.permissionForm}
|
|
onClose={page.closePermissionDrawer}
|
|
onSubmit={page.submitPermission}
|
|
open={page.permissionDrawerOpen}
|
|
setForm={page.setPermissionForm}
|
|
/>
|
|
</>
|
|
);
|
|
}
|