init
This commit is contained in:
jialin
@@ -0,0 +1,21 @@
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Access, useAccess } from '@umijs/max';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const access = useAccess();
|
||||
return (
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: 'Dashboard',
|
||||
}}
|
||||
>
|
||||
<Access accessible={access.canSeeAdmin}>
|
||||
<Button type="primary">==================</Button>
|
||||
</Access>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
@@ -0,0 +1,38 @@
|
||||
// @ts-nocheck
|
||||
// This file is generated by Umi automatically
|
||||
// DO NOT CHANGE IT MANUALLY!
|
||||
import React from 'react';
|
||||
import { history, type IRoute } from '@umijs/max';
|
||||
import { Result, Button } from 'antd';
|
||||
|
||||
const Exception: React.FC<{
|
||||
children: React.ReactNode;
|
||||
route?: IRoute;
|
||||
notFound?: React.ReactNode;
|
||||
noAccessible?: React.ReactNode;
|
||||
unAccessible?: React.ReactNode;
|
||||
noFound?: React.ReactNode;
|
||||
}> = (props) => (
|
||||
console.log('Exception========', props),
|
||||
// render custom 404
|
||||
(!props.route && (props.noFound || props.notFound)) ||
|
||||
// render custom 403
|
||||
(props.route?.unaccessible && (props.unAccessible || props.noAccessible)) ||
|
||||
// render default exception
|
||||
((!props.route || props.route?.unaccessible) && (
|
||||
<Result
|
||||
status={props.route ? '403' : '404'}
|
||||
title={props.route ? '403' : '404'}
|
||||
subTitle={props.route ? '抱歉，你无权访问该页面' : '抱歉，你访问的页面不存在'}
|
||||
extra={
|
||||
<Button type="primary" onClick={() => history.push('/')}>
|
||||
返回首页
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)) ||
|
||||
// normal render
|
||||
props.children
|
||||
);
|
||||
|
||||
export default Exception;
|
||||
@@ -0,0 +1,50 @@
|
||||
@media screen and (max-width: 480px) {
|
||||
/* 在小屏幕的时候可以有更好的体验 */
|
||||
.umi-plugin-layout-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
.umi-plugin-layout-container > * {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
.umi-plugin-layout-menu .anticon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.umi-plugin-layout-menu .ant-dropdown-menu-item {
|
||||
min-width: 160px;
|
||||
}
|
||||
.umi-plugin-layout-right {
|
||||
display: flex !important;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.umi-plugin-layout-right .umi-plugin-layout-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.umi-plugin-layout-right .umi-plugin-layout-action > i {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.umi-plugin-layout-right .umi-plugin-layout-action:hover {
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
.umi-plugin-layout-right .umi-plugin-layout-action.opened {
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
.umi-plugin-layout-right .umi-plugin-layout-search {
|
||||
padding: 0 12px;
|
||||
}
|
||||
.umi-plugin-layout-right .umi-plugin-layout-search:hover {
|
||||
background: transparent;
|
||||
}
|
||||
.umi-plugin-layout-name {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.umi-plugin-layout-name.umi-plugin-layout-hide-avatar-img {
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
// @ts-nocheck
|
||||
// This file is generated by Umi automatically
|
||||
// DO NOT CHANGE IT MANUALLY!
|
||||
import React from 'react';
|
||||
|
||||
const LogoIcon: React.FC = () => {
|
||||
return (
|
||||
<img
|
||||
src="https://www.seal.io/Public/Uploads/uploadfile/images/20230825/a1logo1244.svg"
|
||||
alt="logo"
|
||||
style={{ height: 24 }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogoIcon;
|
||||
@@ -0,0 +1,3 @@
|
||||
// @ts-nocheck
|
||||
import * as icons from '@ant-design/icons';
|
||||
export default icons
|
||||
@@ -0,0 +1,4 @@
|
||||
// @ts-nocheck
|
||||
// This file is generated by Umi automatically
|
||||
// DO NOT CHANGE IT MANUALLY!
|
||||
export type TempType = string
|
||||
@@ -0,0 +1,224 @@
|
||||
// @ts-nocheck
|
||||
|
||||
/// <reference types="@ant-design/pro-components" />
|
||||
|
||||
import { useAccessMarkedRoutes } from '@@/plugin-access';
|
||||
import { useModel } from '@@/plugin-model';
|
||||
import { ProLayout } from '@ant-design/pro-components';
|
||||
import {
|
||||
Link,
|
||||
Outlet,
|
||||
matchRoutes,
|
||||
useAppData,
|
||||
useLocation,
|
||||
useNavigate,
|
||||
type IRoute,
|
||||
} from '@umijs/max';
|
||||
import { useMemo } from 'react';
|
||||
import Exception from './Exception';
|
||||
import './Layout.css';
|
||||
import Logo from './Logo';
|
||||
import { getRightRenderContent } from './rightRender';
|
||||
import { renderMenuIcon,patchRoutes } from './runtime';
|
||||
|
||||
// 过滤出需要显示的路由, 这里的filterFn 指 不希望显示的层级
|
||||
const filterRoutes = (
|
||||
routes: IRoute[],
|
||||
filterFn: (route: IRoute) => boolean,
|
||||
) => {
|
||||
if (routes.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
let newRoutes = [];
|
||||
for (const route of routes) {
|
||||
const newRoute = { ...route };
|
||||
if (filterFn(route)) {
|
||||
if (Array.isArray(newRoute.routes)) {
|
||||
newRoutes.push(...filterRoutes(newRoute.routes, filterFn));
|
||||
}
|
||||
} else {
|
||||
if (Array.isArray(newRoute.children)) {
|
||||
newRoute.children = filterRoutes(newRoute.children, filterFn);
|
||||
newRoute.routes = newRoute.children;
|
||||
}
|
||||
newRoutes.push(newRoute);
|
||||
}
|
||||
}
|
||||
|
||||
return newRoutes;
|
||||
};
|
||||
|
||||
// 格式化路由 处理因 wrapper 导致的 菜单 path 不一致
|
||||
const mapRoutes = (routes: IRoute[]) => {
|
||||
if (routes.length === 0) {
|
||||
return [];
|
||||
}
|
||||
return routes.map((route) => {
|
||||
// 需要 copy 一份, 否则会污染原始数据
|
||||
const newRoute = { ...route };
|
||||
if (route.originPath) {
|
||||
newRoute.path = route.originPath;
|
||||
}
|
||||
|
||||
if (Array.isArray(route.routes)) {
|
||||
newRoute.routes = mapRoutes(route.routes);
|
||||
}
|
||||
|
||||
if (Array.isArray(route.children)) {
|
||||
newRoute.children = mapRoutes(route.children);
|
||||
}
|
||||
|
||||
return newRoute;
|
||||
});
|
||||
};
|
||||
|
||||
export default (props: any) => {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const { clientRoutes, pluginManager } = useAppData();
|
||||
|
||||
console.log('pluginManager===========', pluginManager);
|
||||
|
||||
const initialInfo = (useModel && useModel('@@initialState')) || {
|
||||
initialState: undefined,
|
||||
loading: false,
|
||||
setInitialState: null,
|
||||
};
|
||||
const { initialState, loading, setInitialState } = initialInfo;
|
||||
|
||||
const userConfig = {
|
||||
title: '',
|
||||
layout: 'mix',
|
||||
};
|
||||
|
||||
const formatMessage = undefined;
|
||||
const runtimeConfig = pluginManager.applyPlugins({
|
||||
key: 'layout',
|
||||
type: 'modify',
|
||||
initialValue: {
|
||||
...initialInfo,
|
||||
notFound: <div>not found</div>
|
||||
},
|
||||
});
|
||||
console.log(
|
||||
'clientRoute===========',
|
||||
clientRoutes,
|
||||
runtimeConfig,
|
||||
initialInfo,
|
||||
);
|
||||
|
||||
// 现在的 layout 及 wrapper 实现是通过父路由的形式实现的, 会导致路由数据多了冗余层级, proLayout 消费时, 无法正确展示菜单, 这里对冗余数据进行过滤操作
|
||||
const newRoutes = filterRoutes(
|
||||
clientRoutes.filter((route) => route.id === '@@/global-layout'),
|
||||
(route) => {
|
||||
return (
|
||||
(!!route.isLayout && route.id !== '@@/global-layout') ||
|
||||
!!route.isWrapper
|
||||
);
|
||||
},
|
||||
);
|
||||
console.log('clientRoutes===========', clientRoutes, newRoutes)
|
||||
const [route] = useAccessMarkedRoutes(mapRoutes(newRoutes));
|
||||
patchRoutes({ routes: route?.children || [] });
|
||||
|
||||
|
||||
const matchedRoute = useMemo(
|
||||
() => matchRoutes(route?.children || [], location.pathname)?.pop?.()?.route,
|
||||
[location.pathname],
|
||||
);
|
||||
console.log('route===========', route)
|
||||
return (
|
||||
<ProLayout
|
||||
route={route}
|
||||
location={location}
|
||||
title={userConfig.title}
|
||||
navTheme="light"
|
||||
siderWidth={270}
|
||||
onMenuHeaderClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
navigate('/');
|
||||
}}
|
||||
onPageChange={(route) => {
|
||||
console.log('onRouteChange', route);
|
||||
}}
|
||||
formatMessage={userConfig.formatMessage || formatMessage}
|
||||
menu={{ locale: userConfig.locale }}
|
||||
logo={Logo}
|
||||
menuItemRender={(menuItemProps, defaultDom) => {
|
||||
console.log('meurender=========',{ defaultDom})
|
||||
if (menuItemProps.isUrl || menuItemProps.children) {
|
||||
return defaultDom;
|
||||
}
|
||||
if (menuItemProps.path && location.pathname !== menuItemProps.path) {
|
||||
return (
|
||||
// handle wildcard route path, for example /slave/* from qiankun
|
||||
<Link
|
||||
to={menuItemProps.path.replace('/*', '')}
|
||||
target={menuItemProps.target}
|
||||
>
|
||||
{defaultDom}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{defaultDom}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
itemRender={(route, _, routes) => {
|
||||
const { breadcrumbName, title, path } = route;
|
||||
const label = title || breadcrumbName;
|
||||
const last = routes[routes.length - 1];
|
||||
if (last) {
|
||||
if (last.path === path || last.linkPath === path) {
|
||||
return <span>{label}</span>;
|
||||
}
|
||||
}
|
||||
return <Link to={path}>{label}</Link>;
|
||||
}}
|
||||
disableContentMargin
|
||||
fixSiderbar
|
||||
fixedHeader
|
||||
{...runtimeConfig}
|
||||
rightContentRender={
|
||||
runtimeConfig.rightContentRender !== false &&
|
||||
((layoutProps) => {
|
||||
const dom = getRightRenderContent({
|
||||
runtimeConfig,
|
||||
loading,
|
||||
initialState,
|
||||
setInitialState,
|
||||
});
|
||||
if (runtimeConfig.rightContentRender) {
|
||||
return runtimeConfig.rightContentRender(layoutProps, dom, {
|
||||
// BREAK CHANGE userConfig > runtimeConfig
|
||||
userConfig,
|
||||
runtimeConfig,
|
||||
loading,
|
||||
initialState,
|
||||
setInitialState,
|
||||
});
|
||||
}
|
||||
return dom;
|
||||
})
|
||||
}
|
||||
>
|
||||
<Exception
|
||||
route={matchedRoute}
|
||||
noFound={runtimeConfig?.noFound}
|
||||
notFound={runtimeConfig?.notFound}
|
||||
unAccessible={runtimeConfig?.unAccessible}
|
||||
noAccessible={runtimeConfig?.noAccessible}
|
||||
>
|
||||
{runtimeConfig.childrenRender ? (
|
||||
runtimeConfig.childrenRender(<Outlet />, props)
|
||||
) : (
|
||||
<Outlet />
|
||||
)}
|
||||
</Exception>
|
||||
</ProLayout>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,110 @@
|
||||
// @ts-nocheck
|
||||
// This file is generated by Umi automatically
|
||||
// DO NOT CHANGE IT MANUALLY!
|
||||
import { LogoutOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Dropdown, Menu, Spin, version } from 'antd';
|
||||
|
||||
export function getRightRenderContent(opts: {
|
||||
runtimeConfig: any;
|
||||
loading: boolean;
|
||||
initialState: any;
|
||||
setInitialState: any;
|
||||
}) {
|
||||
if (opts.runtimeConfig.rightRender) {
|
||||
return opts.runtimeConfig.rightRender(
|
||||
opts.initialState,
|
||||
opts.setInitialState,
|
||||
opts.runtimeConfig,
|
||||
);
|
||||
}
|
||||
|
||||
const showAvatar =
|
||||
opts.initialState?.avatar ||
|
||||
opts.initialState?.name ||
|
||||
opts.runtimeConfig.logout;
|
||||
const disableAvatarImg = opts.initialState?.avatar === false;
|
||||
const nameClassName = disableAvatarImg
|
||||
? 'umi-plugin-layout-name umi-plugin-layout-hide-avatar-img'
|
||||
: 'umi-plugin-layout-name';
|
||||
const avatar = showAvatar ? (
|
||||
<span className="umi-plugin-layout-action">
|
||||
{!disableAvatarImg ? (
|
||||
<Avatar
|
||||
size="small"
|
||||
className="umi-plugin-layout-avatar"
|
||||
src={
|
||||
opts.initialState?.avatar ||
|
||||
'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
|
||||
}
|
||||
alt="avatar"
|
||||
/>
|
||||
) : null}
|
||||
<span className={nameClassName}>{opts.initialState?.name}</span>
|
||||
</span>
|
||||
) : null;
|
||||
|
||||
if (opts.loading) {
|
||||
return (
|
||||
<div className="umi-plugin-layout-right">
|
||||
<Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 如果没有打开Locale，并且头像为空就取消掉这个返回的内容
|
||||
if (!avatar) return null;
|
||||
|
||||
const langMenu = {
|
||||
className: 'umi-plugin-layout-menu',
|
||||
selectedKeys: [],
|
||||
items: [
|
||||
{
|
||||
key: 'logout',
|
||||
label: (
|
||||
<>
|
||||
<LogoutOutlined />
|
||||
退出登录
|
||||
</>
|
||||
),
|
||||
onClick: () => {
|
||||
opts?.runtimeConfig?.logout?.(opts.initialState);
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
// antd@5 和 4.24 之后推荐使用 menu，性能更好
|
||||
let dropdownProps;
|
||||
if (version.startsWith('5.') || version.startsWith('4.24.')) {
|
||||
dropdownProps = { menu: langMenu };
|
||||
} else if (version.startsWith('3.')) {
|
||||
dropdownProps = {
|
||||
overlay: (
|
||||
<Menu>
|
||||
{langMenu.items.map((item) => (
|
||||
<Menu.Item key={item.key} onClick={item.onClick}>
|
||||
{item.label}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
),
|
||||
};
|
||||
} else {
|
||||
// 需要 antd 4.20.0 以上版本
|
||||
dropdownProps = { overlay: <Menu {...langMenu} /> };
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="umi-plugin-layout-right anticon">
|
||||
{opts.runtimeConfig.logout ? (
|
||||
<Dropdown
|
||||
{...dropdownProps}
|
||||
overlayClassName="umi-plugin-layout-container"
|
||||
>
|
||||
{avatar}
|
||||
</Dropdown>
|
||||
) : (
|
||||
avatar
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
// @ts-nocheck
|
||||
// This file is generated by Umi automatically
|
||||
// DO NOT CHANGE IT MANUALLY!
|
||||
import React from 'react';
|
||||
import icons from './icons';
|
||||
|
||||
function formatIcon(name: string) {
|
||||
return name
|
||||
.replace(name[0], name[0].toUpperCase())
|
||||
.replace(/-(w)/g, function(all, letter) {
|
||||
return letter.toUpperCase();
|
||||
});
|
||||
}
|
||||
|
||||
export function patchRoutes({ routes }) {
|
||||
console.log('patchRoutes====',routes)
|
||||
Object.keys(routes).forEach(key => {
|
||||
const { icon } = routes[key];
|
||||
if (icon && typeof icon === 'string') {
|
||||
const upperIcon = formatIcon(icon);
|
||||
if (icons[upperIcon] || icons[upperIcon + 'Outlined']) {
|
||||
routes[key].icon = React.createElement(icons[upperIcon] || icons[upperIcon + 'Outlined']);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function renderMenuIcon (icon: string){
|
||||
|
||||
const upperIcon = formatIcon(icon);
|
||||
console.log('upperIcon',upperIcon)
|
||||
if (icons[upperIcon] || icons[upperIcon + 'Outlined']) {
|
||||
return React.createElement(icons[upperIcon] || icons[upperIcon + 'Outlined']);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
// This file is generated by Umi automatically
|
||||
// DO NOT CHANGE IT MANUALLY!
|
||||
import type { RunTimeLayoutConfig } from './types';
|
||||
export interface IRuntimeConfig {
|
||||
layout?: RunTimeLayoutConfig;
|
||||
}
|
||||
Vendored
+37
@@ -0,0 +1,37 @@
|
||||
// This file is generated by Umi automatically
|
||||
// DO NOT CHANGE IT MANUALLY!
|
||||
/// <reference types="@ant-design/pro-components" />
|
||||
|
||||
import type InitialStateType from '@@/plugin-initialState/@@initialState';
|
||||
import type { HeaderProps, ProLayoutProps } from '@ant-design/pro-components';
|
||||
type InitDataType = ReturnType<typeof InitialStateType>;
|
||||
|
||||
import type { IConfigFromPlugins } from '@@/core/pluginConfig';
|
||||
|
||||
export type RunTimeLayoutConfig = (initData: InitDataType) => Omit<
|
||||
ProLayoutProps,
|
||||
'rightContentRender'
|
||||
> & {
|
||||
childrenRender?: (dom: JSX.Element, props: ProLayoutProps) => React.ReactNode;
|
||||
unAccessible?: JSX.Element;
|
||||
noFound?: JSX.Element;
|
||||
logout?: (initialState: InitDataType['initialState']) => Promise<void> | void;
|
||||
rightContentRender?:
|
||||
| ((
|
||||
headerProps: HeaderProps,
|
||||
dom: JSX.Element,
|
||||
props: {
|
||||
userConfig: IConfigFromPlugins['layout'];
|
||||
runtimeConfig: RunTimeLayoutConfig;
|
||||
loading: InitDataType['loading'];
|
||||
initialState: InitDataType['initialState'];
|
||||
setInitialState: InitDataType['setInitialState'];
|
||||
},
|
||||
) => JSX.Element)
|
||||
| false;
|
||||
rightRender?: (
|
||||
initialState: InitDataType['initialState'],
|
||||
setInitialState: InitDataType['setInitialState'],
|
||||
runtimeConfig: RunTimeLayoutConfig,
|
||||
) => JSX.Element;
|
||||
};
|
||||
Reference in New Issue
Block a user