|
|
|
|
import type { MenuTheme } from 'ant-design-vue/es/menu'
|
|
|
|
|
import type { PropType } from 'vue'
|
|
|
|
|
|
|
|
|
|
export interface MenuDataItem {
|
|
|
|
|
children?: MenuDataItem[]
|
|
|
|
|
hideChildrenInMenu?: boolean
|
|
|
|
|
hideInMenu?: boolean
|
|
|
|
|
icon?: any
|
|
|
|
|
locale?: string | false
|
|
|
|
|
name?: string
|
|
|
|
|
key?: string
|
|
|
|
|
pro_layout_parentKeys?: string[]
|
|
|
|
|
path?: string
|
|
|
|
|
parentKeys?: string[]
|
|
|
|
|
|
|
|
|
|
[key: string]: any
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 内容宽度
|
|
|
|
|
* @type 'Fluid' | 'Fixed'
|
|
|
|
|
*/
|
|
|
|
|
export type ContentWidth = 'Fluid' | 'Fixed'
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* layout 的布局方式
|
|
|
|
|
* @type 'side' | 'top' | 'mix'
|
|
|
|
|
*/
|
|
|
|
|
export type LayoutMode = 'side' | 'top' | 'mix'
|
|
|
|
|
|
|
|
|
|
export type RenderSetting = {
|
|
|
|
|
headerRender?: false
|
|
|
|
|
footerRender?: false
|
|
|
|
|
menuRender?: false
|
|
|
|
|
menuHeaderRender?: false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export type PureSettings = {
|
|
|
|
|
/**
|
|
|
|
|
* theme for nav menu
|
|
|
|
|
*
|
|
|
|
|
* @type "light" | "dark" | "realDark"
|
|
|
|
|
*/
|
|
|
|
|
navTheme?: MenuTheme | 'realDark' | undefined
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 顶部菜单的颜色,mix 模式下生效
|
|
|
|
|
* @type "light" | "dark"
|
|
|
|
|
*/
|
|
|
|
|
headerTheme?: MenuTheme
|
|
|
|
|
/**
|
|
|
|
|
* customize header height
|
|
|
|
|
* @example 顶栏高度修改为64 headerHeight={64}
|
|
|
|
|
*/
|
|
|
|
|
headerHeight?: number
|
|
|
|
|
/**
|
|
|
|
|
* layout 的布局方式
|
|
|
|
|
* @type 'side' | 'top' | 'mix'
|
|
|
|
|
*
|
|
|
|
|
* @example 顶部菜单 layout="top"
|
|
|
|
|
* @example 侧边菜单 layout="side"
|
|
|
|
|
* @example 混合布局 既有顶部也有侧边 layout="mix"
|
|
|
|
|
*/
|
|
|
|
|
layout?: LayoutMode
|
|
|
|
|
/** layout of content: `Fluid` or `Fixed`, only works when layout is top */
|
|
|
|
|
contentWidth?: ContentWidth
|
|
|
|
|
/** sticky header */
|
|
|
|
|
fixedHeader?: boolean
|
|
|
|
|
/** sticky siderbar */
|
|
|
|
|
fixSiderbar?: boolean
|
|
|
|
|
/**
|
|
|
|
|
* menu 相关的一些配置,可以配置菜单的行为
|
|
|
|
|
*
|
|
|
|
|
* @example 关闭菜单国际化 menu={{ locale: false }}
|
|
|
|
|
* @example 默认打开所有的菜单 menu={{ defaultOpenAll:true }}
|
|
|
|
|
* @example 让菜单处于loading 状态 menu={{ loading: true }}
|
|
|
|
|
* @example 异步加载菜单数据 menu={{params:{ pathname } request: async (params) => { return [{name:"主页",path=params.pathname}]} }}
|
|
|
|
|
* @example 使用 MenuGroup 来聚合菜单 menu={{ mode: 'group' }}
|
|
|
|
|
* @example 取消自动关闭菜单 menu={{ autoClose: false }}
|
|
|
|
|
* @example 忽略收起时自动关闭菜单 menu={{ ignoreFlatMenu: true }}
|
|
|
|
|
*/
|
|
|
|
|
menu?: {
|
|
|
|
|
/**
|
|
|
|
|
* 菜单国际化的配置
|
|
|
|
|
*/
|
|
|
|
|
locale?: boolean
|
|
|
|
|
/**
|
|
|
|
|
* 默认打开所有的菜单
|
|
|
|
|
*/
|
|
|
|
|
defaultOpenAll?: boolean
|
|
|
|
|
/**
|
|
|
|
|
* 是否忽略用户手动折叠过的菜单状态,如选择忽略,折叠按钮切换之后也可实现展开所有菜单
|
|
|
|
|
*/
|
|
|
|
|
ignoreFlatMenu?: boolean
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 菜单的 loading 配置
|
|
|
|
|
*/
|
|
|
|
|
loading?: boolean
|
|
|
|
|
/**
|
|
|
|
|
* 菜单的 loading 发生改变
|
|
|
|
|
*/
|
|
|
|
|
onLoadingChange?: (loading?: boolean) => void
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 菜单远程请求时用的参数,只有 params 变化才会重新触发 request
|
|
|
|
|
*
|
|
|
|
|
*/
|
|
|
|
|
params?: Record<string, any>
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 菜单远程请求的方法,只有 params 变化才会重新触发 request
|
|
|
|
|
*/
|
|
|
|
|
request?: (
|
|
|
|
|
params: Record<string, any>,
|
|
|
|
|
defaultMenuData: MenuDataItem[]
|
|
|
|
|
) => Promise<MenuDataItem[]>
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 菜单聚合的模式
|
|
|
|
|
*/
|
|
|
|
|
type?: 'sub' | 'group'
|
|
|
|
|
/**
|
|
|
|
|
* 取消自动关闭菜单
|
|
|
|
|
*/
|
|
|
|
|
autoClose?: false
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
* 设置为 false,在 layout 中只展示 pageName,而不是 pageName - title
|
|
|
|
|
*
|
|
|
|
|
* Layout 的 title,也会显示在浏览器标签上
|
|
|
|
|
*/
|
|
|
|
|
title?: string | false
|
|
|
|
|
/**
|
|
|
|
|
* Your custom iconfont Symbol script Url eg://at.alicdn.com/t/font_1039637_btcrd5co4w.js
|
|
|
|
|
* 注意:如果需要图标多色,Iconfont 图标项目里要进行批量去色处理 Usage: https://github.com/ant-design/ant-design-pro/pull/3517
|
|
|
|
|
*/
|
|
|
|
|
iconfontUrl?: string
|
|
|
|
|
/** 主色,需要配合 umi 使用 */
|
|
|
|
|
primaryColor?: string
|
|
|
|
|
/** 全局增加滤镜 */
|
|
|
|
|
colorWeak?: boolean
|
|
|
|
|
/**
|
|
|
|
|
* 只在 mix 模式下生效
|
|
|
|
|
*
|
|
|
|
|
* 切割菜单
|
|
|
|
|
*/
|
|
|
|
|
splitMenus?: boolean
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export type ProSettings = PureSettings & RenderSetting
|
|
|
|
|
|
|
|
|
|
export const defaultSettings: ProSettings = {
|
|
|
|
|
navTheme: 'dark',
|
|
|
|
|
headerTheme: 'dark',
|
|
|
|
|
layout: 'side',
|
|
|
|
|
contentWidth: 'Fluid',
|
|
|
|
|
fixedHeader: false,
|
|
|
|
|
fixSiderbar: false,
|
|
|
|
|
headerHeight: 48,
|
|
|
|
|
iconfontUrl: '',
|
|
|
|
|
primaryColor: '#1890ff',
|
|
|
|
|
splitMenus: false,
|
|
|
|
|
|
|
|
|
|
// 布局内容默认都渲染
|
|
|
|
|
headerRender: undefined,
|
|
|
|
|
footerRender: undefined,
|
|
|
|
|
menuRender: undefined,
|
|
|
|
|
menuHeaderRender: undefined
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const pureSettingsProps = {
|
|
|
|
|
navTheme: {
|
|
|
|
|
type: String as PropType<PureSettings['navTheme']>,
|
|
|
|
|
default: defaultSettings.navTheme
|
|
|
|
|
},
|
|
|
|
|
headerTheme: {
|
|
|
|
|
type: String as PropType<PureSettings['headerTheme']>,
|
|
|
|
|
default: defaultSettings.headerTheme
|
|
|
|
|
},
|
|
|
|
|
headerHeight: {
|
|
|
|
|
type: Number as PropType<PureSettings['headerHeight']>,
|
|
|
|
|
default: defaultSettings.headerHeight
|
|
|
|
|
},
|
|
|
|
|
layout: {
|
|
|
|
|
type: String as PropType<PureSettings['layout']>,
|
|
|
|
|
default: defaultSettings.layout
|
|
|
|
|
},
|
|
|
|
|
contentWidth: {
|
|
|
|
|
type: String as PropType<PureSettings['contentWidth']>,
|
|
|
|
|
default: defaultSettings.contentWidth
|
|
|
|
|
},
|
|
|
|
|
fixedHeader: {
|
|
|
|
|
type: Boolean as PropType<PureSettings['fixedHeader']>,
|
|
|
|
|
default: defaultSettings.fixedHeader
|
|
|
|
|
},
|
|
|
|
|
fixSiderbar: {
|
|
|
|
|
type: Boolean as PropType<PureSettings['fixSiderbar']>,
|
|
|
|
|
default: defaultSettings.fixSiderbar
|
|
|
|
|
},
|
|
|
|
|
menu: {
|
|
|
|
|
type: Object as PropType<PureSettings['menu']>,
|
|
|
|
|
default: () => {
|
|
|
|
|
return {
|
|
|
|
|
locale: false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
title: {
|
|
|
|
|
type: String as PropType<PureSettings['title']>,
|
|
|
|
|
default: () => defaultSettings.title
|
|
|
|
|
},
|
|
|
|
|
iconfontUrl: {
|
|
|
|
|
type: String as PropType<PureSettings['iconfontUrl']>,
|
|
|
|
|
default: () => defaultSettings.iconfontUrl
|
|
|
|
|
},
|
|
|
|
|
primaryColor: {
|
|
|
|
|
type: String as PropType<PureSettings['primaryColor']>,
|
|
|
|
|
default: () => defaultSettings.primaryColor
|
|
|
|
|
},
|
|
|
|
|
colorWeak: {
|
|
|
|
|
type: Boolean as PropType<PureSettings['colorWeak']>,
|
|
|
|
|
default: () => defaultSettings.colorWeak
|
|
|
|
|
},
|
|
|
|
|
splitMenus: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false
|
|
|
|
|
}
|
|
|
|
|
}
|