1 | import type { GenerateStyle, ProTokenType } from '@ant-design/pro-provider';
|
2 | import type { BreadcrumbProps as AntdBreadcrumbProps } from 'antd';
|
3 | import type { CSSProperties } from 'react';
|
4 | import React from 'react';
|
5 | import type { HeaderViewProps } from './components/Header';
|
6 | import type { SiderMenuProps } from './components/SiderMenu/SiderMenu';
|
7 | import type { SiderMenuToken } from './components/SiderMenu/style';
|
8 | import type { WaterMarkProps } from './components/WaterMark';
|
9 | import type { GetPageTitleProps } from './getPageTitle';
|
10 | import type { LocaleType } from './locales';
|
11 | import type { MenuDataItem, MessageDescriptor, RouterTypes, WithFalse } from './typing';
|
12 | export type LayoutBreadcrumbProps = {
|
13 | minLength?: number;
|
14 | };
|
15 | type GlobalTypes = Omit<Partial<RouterTypes> & SiderMenuProps & HeaderViewProps & {
|
16 | token?: ProTokenType['layout'];
|
17 | }, 'collapsed'>;
|
18 | export type ProLayoutProps = GlobalTypes & {
|
19 | stylish?: {
|
20 | header?: GenerateStyle<SiderMenuToken>;
|
21 | sider?: GenerateStyle<SiderMenuToken>;
|
22 | };
|
23 | /** Layout 的品牌配置,表现为一张背景图片 */
|
24 | bgLayoutImgList?: {
|
25 | src?: string;
|
26 | width?: string;
|
27 | height?: string;
|
28 | left?: number;
|
29 | top?: number;
|
30 | bottom?: number;
|
31 | right?: number;
|
32 | }[];
|
33 | /**
|
34 | * @name 简约模式,设置了之后不渲染的任何 layout 的东西,但是会有 context,可以获取到当前菜单。
|
35 | *
|
36 | * @example pure={true}
|
37 | */
|
38 | pure?: boolean;
|
39 | /**
|
40 | * @name logo 的配置,可以配置url,React 组件 和 false
|
41 | *
|
42 | * @example 设置 logo 为网络地址 logo="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"
|
43 | * @example 设置 logo 为组件 logo={<img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/>}
|
44 | * @example 设置 logo 为 false 不显示 logo logo={false}
|
45 | * @example 设置 logo 为 方法 logo={()=> <img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/> }
|
46 | * */
|
47 | logo?: React.ReactNode | JSX.Element | WithFalse<() => React.ReactNode | JSX.Element>;
|
48 | /**
|
49 | * @name 页面切换的时候触发
|
50 | *
|
51 | * @example 获取切换的页面地址 onPageChange={(location) => { console.log("切换到:"+location.pathname) }}
|
52 | *
|
53 | * */
|
54 | onPageChange?: (location?: RouterTypes['location']) => void;
|
55 | /**
|
56 | * @name layout 的 loading 效果,设置完成之后只展示一个 loading
|
57 | *
|
58 | * @example loading={true}
|
59 | */
|
60 | loading?: boolean;
|
61 | /**
|
62 | * @name layout
|
63 | *
|
64 | * @description "zh-CN" | "zh-TW" | "en-US" | "it-IT" | "ko-KR"
|
65 | * @example 中文 layout="zh-CN"
|
66 | * @example 英文 layout="en-US"
|
67 | */
|
68 | locale?: LocaleType;
|
69 | /**
|
70 | * @name 是否收起 layout 是严格受控的,可以 设置为 true,一直收起
|
71 | *
|
72 | * @example collapsed={true}
|
73 | */
|
74 | collapsed?: boolean;
|
75 | /**
|
76 | * @name 收起和展开的时候触发事件
|
77 | *
|
78 | * @example onCollapse=(collapsed)=>{ setCollapsed(collapsed) };
|
79 | */
|
80 | onCollapse?: (collapsed: boolean) => void;
|
81 | /**
|
82 | * @name 页脚的配置
|
83 | *
|
84 | * @example 不展示dom footerRender={false}
|
85 | * @example 使用 layout 的 DefaultFooter footerRender={() => (<DefaultFooter copyright="这是一条测试文案"/>}
|
86 | */
|
87 | footerRender?: WithFalse<(props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode>;
|
88 | /**
|
89 | * @name 设置 PageHeader 的面包屑,只能处理数据
|
90 | *
|
91 | * @example 手动设置 breadcrumbRender={(routers = []) => [ { path: '/', breadcrumbName: '主页'} ]
|
92 | * @example 增加一项 breadcrumbRender={(routers = []) => { return [{ path: '/', breadcrumbName: '主页'} ,...routers ]}
|
93 | * @example 删除首页 breadcrumbRender={(routers = []) => { return routers.filter(item => item.path !== '/')}
|
94 | * @example 不显示面包屑 breadcrumbRender={false}
|
95 | */
|
96 | breadcrumbRender?: WithFalse<(routers: AntdBreadcrumbProps['routes']) => AntdBreadcrumbProps['routes']>;
|
97 | /**
|
98 | * @name 设置页面的标题
|
99 | * @example 根据页面的路由设置标题 pageTitleRender={(props) => { return props.location.pathname }}
|
100 | * @example 不显示标题 pageTitleRender={false}
|
101 | * @example 根据默认的标题设置 pageTitleRender={(props,defaultPageTitle) => { return defaultPageTitle + '这是一个测试标题' }}
|
102 | * @example 根据 info 来自己组合标题 pageTitleRender={(props,defaultPageTitle,info) => { return info.title + "-" + info.pageName }
|
103 | */
|
104 | pageTitleRender?: WithFalse<(props: GetPageTitleProps, defaultPageTitle?: string, info?: {
|
105 | title: string;
|
106 | id: string;
|
107 | pageName: string;
|
108 | }) => string>;
|
109 | /**
|
110 | * @name 处理 menuData 的数据,可以动态的控制数据
|
111 | * @see 尽量不要用异步数据来处理,否则可能造成更新不及时,如果异步数据推荐使用 menu.request 和 params。
|
112 | *
|
113 | * @example 删除一些菜单 menuDataRender=((menuData) => { return menuData.filter(item => item.name !== 'test') })
|
114 | * @example 增加一些菜单 menuDataRender={(menuData) => { return menuData.concat({ path: '/test', name: '测试', icon: 'smile' }) }}
|
115 | * @example 修改菜单 menuDataRender={(menuData) => { return menuData.map(item => { if (item.name === 'test') { item.name = '测试' } return item }) }}
|
116 | * @example 打平数据 menuDataRender={(menuData) => { return menuData.reduce((pre, item) => { return pre.concat(item.children || []) }, []) }}
|
117 | */
|
118 | menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[];
|
119 | /**
|
120 | * @name 处理每个面包屑的配置,需要直接返回 dom
|
121 | * @description (route: Route, params: any, routes: Array<Route>, paths: Array<string>) => React.ReactNode
|
122 | *
|
123 | * @example 设置 disabled: itemRender={(route, params, routes, paths) => { return <Button disabled>{route.breadcrumbName}</Button> }}
|
124 | * @example 拼接 path: itemRender={(route, params, routes, paths) => { return <a href={paths.join('/')}>{route.breadcrumbName}</Button> }}
|
125 | */
|
126 | itemRender?: AntdBreadcrumbProps['itemRender'];
|
127 | formatMessage?: (message: MessageDescriptor) => string;
|
128 | /** @name 是否禁用移动端模式
|
129 | *
|
130 | * @see 有的管理系统不需要移动端模式,此属性设置为true即可
|
131 | * @example disableMobile={true}
|
132 | * */
|
133 | disableMobile?: boolean;
|
134 | /**
|
135 | * content 的样式
|
136 | *
|
137 | * @example 背景颜色为红色 contentStyle={{ backgroundColor: 'red '}}
|
138 | */
|
139 | contentStyle?: CSSProperties;
|
140 | className?: string;
|
141 | /** PageHeader 的 BreadcrumbProps 配置,会透传下去 */
|
142 | breadcrumbProps?: AntdBreadcrumbProps & LayoutBreadcrumbProps;
|
143 | /** @name 水印的相关配置 */
|
144 | waterMarkProps?: WaterMarkProps;
|
145 | /**
|
146 | * @name 操作菜单重新刷新
|
147 | *
|
148 | * @example 重新获取菜单 actionRef.current.reload();
|
149 | * */
|
150 | actionRef?: React.MutableRefObject<{
|
151 | reload: () => void;
|
152 | } | undefined>;
|
153 | /**
|
154 | * @name 错误处理组件
|
155 | *
|
156 | * @example ErrorBoundary={<MyErrorBoundary/>}
|
157 | */
|
158 | ErrorBoundary?: any;
|
159 | /**
|
160 | * @name 侧边菜单的类型, menu.type 的快捷方式
|
161 | * @type "sub" | "group"
|
162 | * @example group
|
163 | */
|
164 | siderMenuType?: 'sub' | 'group';
|
165 | isChildrenLayout?: boolean;
|
166 | };
|
167 | export type BasicLayoutContext = {
|
168 | [K in 'location']: ProLayoutProps[K];
|
169 | } & {
|
170 | breadcrumb: Record<string, MenuDataItem>;
|
171 | };
|
172 | declare const ProLayout: React.FC<ProLayoutProps>;
|
173 | export { ProLayout };
|