npm - @szc-ft/szcd - Versions diffs - 1.1.7 - Mend

@szc-ft/szcd 1.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1328) hide show

package/dist/8566.032cb1e3.async.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";(self.webpackChunk_szc_ft_szcd=self.webpackChunk_szc_ft_szcd||[]).push([[8566],{78566:function(a,e,d){d.r(e),d.d(e,{texts:function(){return n}});const n=[{value:"ProLayout 可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态，自动生成菜单等功能。与 PageContainer 配合使用可以自动生成面包屑，页面标题，并且提供低成本方案接入页脚工具栏。",paraId:0,tocIndex:0},{value:"页面中需要承载内容时，可以使用 ProLayout 来减少布局成本。",paraId:1,tocIndex:1},{value:"所有以 ",paraId:2,tocIndex:3},{value:"Render",paraId:2,tocIndex:3},{value:" 后缀的方法都可以通过传入 ",paraId:2,tocIndex:3},{value:"false",paraId:2,tocIndex:3},{value:" 来使其不渲染。",paraId:2,tocIndex:3},{value:"参数",paraId:3,tocIndex:3},{value:"说明",paraId:3,tocIndex:3},{value:"类型",paraId:3,tocIndex:3},{value:"默认值",paraId:3,tocIndex:3},{value:"title",paraId:3,tocIndex:3},{value:"layout 的左上角的 title",paraId:3,tocIndex:3},{value:"ReactNode",paraId:3,tocIndex:3},{value:"'Ant Design Pro'",paraId:3,tocIndex:3},{value:"logo",paraId:3,tocIndex:3},{value:"layout 的左上角 logo 的 url",paraId:3,tocIndex:3},{value:"ReactNode",paraId:3,tocIndex:3},{value:" | ",paraId:3,tocIndex:3},{value:"()=> ReactNode",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"pure",paraId:3,tocIndex:3},{value:"是否删除掉所有的自带界面",paraId:3,tocIndex:3},{value:"boolean",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"loading",paraId:3,tocIndex:3},{value:"layout 的加载态",paraId:3,tocIndex:3},{value:"boolean",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"location",paraId:3,tocIndex:3},{value:"当前应用会话的位置信息。如果你的应用创建了自定义的 history，则需要显示指定 location 属性，详见 ",paraId:3,tocIndex:3},{value:"issue",paraId:3,tocIndex:3},{value:"history.location",paraId:3,tocIndex:3},{value:"isBrowser ? window.location : undefined",paraId:3,tocIndex:3},{value:"appList",paraId:3,tocIndex:3},{value:"跨站点导航列表",paraId:3,tocIndex:3},{value:"{ icon, title, desc, url, target, children }[]",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"menuHeaderRender",paraId:3,tocIndex:3},{value:"渲染 logo 和 title, 优先级比 ",paraId:3,tocIndex:3},{value:"headerTitleRender",paraId:3,tocIndex:3},{value:" 更高",paraId:3,tocIndex:3},{value:"ReactNode",paraId:3,tocIndex:3},{value:" | ",paraId:3,tocIndex:3},{value:"(logo,title)=>ReactNode",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"menuFooterRender",paraId:3,tocIndex:3},{value:"在 layout 底部渲染一个块",paraId:3,tocIndex:3},{value:"(menuProps)=>ReactNode",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"onMenuHeaderClick",paraId:3,tocIndex:3},{value:"menu 菜单的头部点击事件",paraId:3,tocIndex:3},{value:"(e: React.MouseEvent<HTMLDivElement>) => void",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"menuExtraRender",paraId:3,tocIndex:3},{value:"在菜单标题的下面渲染一个区域",paraId:3,tocIndex:3},{value:"(menuProps)=>ReactNode",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"onTopMixMenuHeaderClick",paraId:3,tocIndex:3},{value:"mix 模式下顶部栏的头部点击事件",paraId:3,tocIndex:3},{value:"(e: React.MouseEvent<HTMLDivElement>) => void",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"contentStyle",paraId:3,tocIndex:3},{value:"layout 的内容区 style",paraId:3,tocIndex:3},{value:"CSSProperties",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"layout",paraId:3,tocIndex:3},{value:"layout 的菜单模式,side：右侧导航，top：顶部导航",paraId:3,tocIndex:3},{value:"side",paraId:3,tocIndex:3},{value:" | ",paraId:3,tocIndex:3},{value:"top",paraId:3,tocIndex:3},{value:"|",paraId:3,tocIndex:3},{value:"mix",paraId:3,tocIndex:3},{value:"side",paraId:3,tocIndex:3},{value:"contentWidth",paraId:3,tocIndex:3},{value:"layout 的内容模式,Fluid：自适应，Fixed：定宽 1200px",paraId:3,tocIndex:3},{value:"Fluid",paraId:3,tocIndex:3},{value:" | ",paraId:3,tocIndex:3},{value:"Fixed",paraId:3,tocIndex:3},{value:"Fluid",paraId:3,tocIndex:3},{value:"actionRef",paraId:3,tocIndex:3},{value:"layout 的常见的操作，比如刷新菜单",paraId:3,tocIndex:3},{value:"MutableRefObject<ActionType>",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"fixedHeader",paraId:3,tocIndex:3},{value:"是否固定 header 到顶部",paraId:3,tocIndex:3},{value:"boolean",paraId:3,tocIndex:3},{value:"false",paraId:3,tocIndex:3},{value:"fixSiderbar",paraId:3,tocIndex:3},{value:"是否固定导航",paraId:3,tocIndex:3},{value:"boolean",paraId:3,tocIndex:3},{value:"false",paraId:3,tocIndex:3},{value:"breakpoint",paraId:3,tocIndex:3},{value:"触发响应式布局的",paraId:3,tocIndex:3},{value:"断点",paraId:3,tocIndex:3},{value:"Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }",paraId:3,tocIndex:3},{value:"lg",paraId:3,tocIndex:3},{value:"menu",paraId:3,tocIndex:3},{value:"关于 ",paraId:3,tocIndex:3},{value:"menu",paraId:4,tocIndex:3},{value:" 的配置，暂时只有 locale,locale 可以关闭 menu 的自带的全球化",paraId:3,tocIndex:3},{value:"menuConfig",paraId:5,tocIndex:3},{value:"{ locale: true }",paraId:3,tocIndex:3},{value:"iconfontUrl",paraId:3,tocIndex:3},{value:"使用 ",paraId:3,tocIndex:3},{value:"IconFont",paraId:3,tocIndex:3},{value:" 的图标配置",paraId:3,tocIndex:3},{value:"URL",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"locale",paraId:3,tocIndex:3},{value:"当前 layout 的语言设置",paraId:3,tocIndex:3},{value:"zh-CN",paraId:3,tocIndex:3},{value:" | ",paraId:3,tocIndex:3},{value:"zh-TW",paraId:3,tocIndex:3},{value:" | ",paraId:3,tocIndex:3},{value:"en-US",paraId:3,tocIndex:3},{value:"navigator.language",paraId:3,tocIndex:3},{value:"settings",paraId:3,tocIndex:3},{value:"layout 的设置",paraId:3,tocIndex:3},{value:"Settings",paraId:6,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"siderWidth",paraId:3,tocIndex:3},{value:"侧边菜单宽度",paraId:3,tocIndex:3},{value:"number",paraId:3,tocIndex:3},{value:"208",paraId:3,tocIndex:3},{value:"suppressSiderWhenMenuEmpty",paraId:3,tocIndex:3},{value:"在菜单为空时隐藏 Sider",paraId:3,tocIndex:3},{value:"boolean",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"defaultCollapsed",paraId:3,tocIndex:3},{value:"默认的菜单的收起和展开，会受到 ",paraId:3,tocIndex:3},{value:"breakpoint",paraId:3,tocIndex:3},{value:" 的影响，",paraId:3,tocIndex:3},{value:"breakpoint=false",paraId:3,tocIndex:3},{value:" 生效",paraId:3,tocIndex:3},{value:"boolean",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"collapsed",paraId:3,tocIndex:3},{value:"控制菜单的收起和展开",paraId:3,tocIndex:3},{value:"boolean",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"onCollapse",paraId:3,tocIndex:3},{value:"菜单的折叠收起事件",paraId:3,tocIndex:3},{value:"(collapsed: boolean) => void",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"onPageChange",paraId:3,tocIndex:3},{value:"页面切换时触发",paraId:3,tocIndex:3},{value:"(location: Location) => void",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"headerRender",paraId:3,tocIndex:3},{value:"自定义头的 render 方法",paraId:3,tocIndex:3},{value:"(props: ProLayoutProps) => ReactNode",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"headerTitleRender",paraId:3,tocIndex:3},{value:"自定义头标题的方法,mix 模式和 top 模式下生效",paraId:3,tocIndex:3},{value:"(logo,title,props)=>ReactNode",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"headerContentRender",paraId:3,tocIndex:3},{value:"自定义头内容的方法",paraId:3,tocIndex:3},{value:"(props: ProLayoutProps) => ReactNode",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"avatarProps",paraId:3,tocIndex:3},{value:"layout 的头像设置，不同的 layout 放在不同的位置",paraId:3,tocIndex:3},{value:"AvatarProps",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"actionsRender",paraId:3,tocIndex:3},{value:"自定义操作列表",paraId:3,tocIndex:3},{value:"(layoutProps)=>ReactNode[]",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"collapsedButtonRender",paraId:3,tocIndex:3},{value:"自定义 collapsed button 的方法",paraId:3,tocIndex:3},{value:"(collapsed: boolean) => ReactNode",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"footerRender",paraId:3,tocIndex:3},{value:"自定义页脚的 render 方法",paraId:3,tocIndex:3},{value:"(props: ProLayoutProps) => JSX.Element | false",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"pageTitleRender",paraId:3,tocIndex:3},{value:"自定义页面标题的显示方法",paraId:3,tocIndex:3},{value:"(props: ProLayoutProps) => string",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"menuRender",paraId:3,tocIndex:3},{value:"自定义菜单的 render 方法",paraId:3,tocIndex:3},{value:"(props: HeaderViewProps) => ReactNode",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"postMenuData",paraId:3,tocIndex:3},{value:"在显示前对菜单数据进行查看，修改不会触发重新渲染",paraId:3,tocIndex:3},{value:"(menuData: MenuDataItem[]) => MenuDataItem[]",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"menuItemRender",paraId:3,tocIndex:3},{value:"自定义菜单项的 render 方法",paraId:3,tocIndex:3},{value:"(itemProps: MenuDataItem, defaultDom: React.ReactNode, props: BaseMenuProps) => ReactNode",paraId:7,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"subMenuItemRender",paraId:3,tocIndex:3},{value:"自定义拥有子菜单菜单项的 render 方法",paraId:3,tocIndex:3},{value:"(itemProps: MenuDataItem) => ReactNode",paraId:8,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"menuDataRender",paraId:3,tocIndex:3},{value:"menuData 的 render 方法，用来自定义 menuData",paraId:3,tocIndex:3},{value:"(menuData: MenuDataItem[]) => MenuDataItem[]",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"breadcrumbRender",paraId:3,tocIndex:3},{value:"自定义面包屑的数据",paraId:3,tocIndex:3},{value:"(route)=>route",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"breadcrumbProps",paraId:3,tocIndex:3},{value:"传递到 antd Breadcrumb 组件的 props, 参考 (",paraId:3,tocIndex:3},{value:"https://ant.design/components/breadcrumb-cn/",paraId:3,tocIndex:3},{value:")",paraId:3,tocIndex:3},{value:"breadcrumbProps",paraId:3,tocIndex:3},{value:"undefined",paraId:3,tocIndex:3},{value:"route",paraId:3,tocIndex:3},{value:"用于生成菜单和面包屑。umi 的 Layout 会自动带有",paraId:3,tocIndex:3},{value:"route",paraId:9,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"disableMobile",paraId:3,tocIndex:3},{value:"禁止自动切换到移动页面",paraId:3,tocIndex:3},{value:"boolean",paraId:3,tocIndex:3},{value:"false",paraId:3,tocIndex:3},{value:"ErrorBoundary",paraId:3,tocIndex:3},{value:"自带了错误处理功能，防止白屏，",paraId:3,tocIndex:3},{value:"ErrorBoundary=false",paraId:3,tocIndex:3},{value:" 关闭默认错误边界",paraId:3,tocIndex:3},{value:"ReactNode",paraId:3,tocIndex:3},{value:"内置 ErrorBoundary",paraId:3,tocIndex:3},{value:"links",paraId:3,tocIndex:3},{value:"显示在菜单右下角的快捷操作",paraId:3,tocIndex:3},{value:"ReactNode[]",paraId:3,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"menuProps",paraId:3,tocIndex:3},{value:"传递到 antd menu 组件的 props, 参考 (",paraId:3,tocIndex:3},{value:"https://ant.design/components/menu-cn/",paraId:3,tocIndex:3},{value:")",paraId:3,tocIndex:3},{value:"MenuProps",paraId:3,tocIndex:3},{value:"undefined",paraId:3,tocIndex:3},{value:"waterMarkProps",paraId:3,tocIndex:3},{value:"配置水印，水印是 PageContainer 的功能，layout 只是透传给 PageContainer",paraId:3,tocIndex:3},{value:"WaterMarkProps",paraId:10,tocIndex:3},{value:"-",paraId:3,tocIndex:3},{value:"menu 中支持了部分常用的 menu 配置，可以帮助我们更好的管理 menu",paraId:11,tocIndex:4},{value:"参数",paraId:12,tocIndex:4},{value:"说明",paraId:12,tocIndex:4},{value:"类型",paraId:12,tocIndex:4},{value:"默认值",paraId:12,tocIndex:4},{value:"locale",paraId:12,tocIndex:4},{value:"menu 是否使用国际化，还需要 formatMessage 的配合。",paraId:12,tocIndex:4},{value:"boolean",paraId:12,tocIndex:4},{value:"true",paraId:12,tocIndex:4},{value:"defaultOpenAll",paraId:12,tocIndex:4},{value:"默认打开所有的菜单项，要注意只有 layout 挂载之前生效，异步加载菜单是不支持的",paraId:12,tocIndex:4},{value:"boolean",paraId:12,tocIndex:4},{value:"false",paraId:12,tocIndex:4},{value:"ignoreFlatMenu",paraId:12,tocIndex:4},{value:"是否忽略手动折叠过的菜单状态，结合 defaultOpenAll 可实现折叠按钮切换后，同样可以展开所有子菜单",paraId:12,tocIndex:4},{value:"boolean",paraId:12,tocIndex:4},{value:"false",paraId:12,tocIndex:4},{value:"type",paraId:12,tocIndex:4},{value:"菜单的类型",paraId:12,tocIndex:4},{value:"sub",paraId:12,tocIndex:4},{value:" | ",paraId:12,tocIndex:4},{value:"group",paraId:12,tocIndex:4},{value:"group",paraId:12,tocIndex:4},{value:"autoClose",paraId:12,tocIndex:4},{value:"选中菜单是否自动关闭菜单",paraId:12,tocIndex:4},{value:"boolean",paraId:12,tocIndex:4},{value:"true",paraId:12,tocIndex:4},{value:"loading",paraId:12,tocIndex:4},{value:"菜单是否正在加载中",paraId:12,tocIndex:4},{value:"boolean",paraId:12,tocIndex:4},{value:"false",paraId:12,tocIndex:4},{value:"onLoadingChange",paraId:12,tocIndex:4},{value:"菜单的加载状态变更",paraId:12,tocIndex:4},{value:"(loading)=>void",paraId:12,tocIndex:4},{value:"-",paraId:12,tocIndex:4},{value:"request",paraId:12,tocIndex:4},{value:"远程加载菜单的方法，会自动的修改 loading 状态",paraId:12,tocIndex:4},{value:"(params,defaultMenuDat) => Promise<MenuDataItem[]>",paraId:12,tocIndex:4},{value:"-",paraId:12,tocIndex:4},{value:"参数",paraId:13,tocIndex:5},{value:"说明",paraId:13,tocIndex:5},{value:"类型",paraId:13,tocIndex:5},{value:"默认值",paraId:13,tocIndex:5},{value:"collapse",paraId:13,tocIndex:5},{value:"控制 SettingDrawer 的收起和展开",paraId:13,tocIndex:5},{value:"boolean",paraId:13,tocIndex:5},{value:"-",paraId:13,tocIndex:5},{value:"onCollapseChange",paraId:13,tocIndex:5},{value:"SettingDrawer 的折叠收起事件",paraId:13,tocIndex:5},{value:"(collapsed: boolean) => void",paraId:13,tocIndex:5},{value:"-",paraId:13,tocIndex:5},{value:"settings",paraId:13,tocIndex:5},{value:"layout 的设置",paraId:13,tocIndex:5},{value:"Settings",paraId:14,tocIndex:5},{value:" | ",paraId:13,tocIndex:5},{value:"Settings",paraId:15,tocIndex:5},{value:"-",paraId:13,tocIndex:5},{value:"onSettingChange",paraId:13,tocIndex:5},{value:"Settings",paraId:16,tocIndex:5},{value:" 发生更改事件",paraId:13,tocIndex:5},{value:"(settings: [",paraId:13,tocIndex:5},{value:"Settings",paraId:13,tocIndex:5},{value:"](#Settings) ) => void",paraId:13,tocIndex:5},{value:"-",paraId:13,tocIndex:5},{value:"hideHintAlert",paraId:13,tocIndex:5},{value:"删除下方的提示信息",paraId:13,tocIndex:5},{value:"boolean",paraId:13,tocIndex:5},{value:"-",paraId:13,tocIndex:5},{value:"hideCopyButton",paraId:13,tocIndex:5},{value:"不展示 copy 功能",paraId:13,tocIndex:5},{value:"boolean",paraId:13,tocIndex:5},{value:"-",paraId:13,tocIndex:5},{value:"disableUrlParams",paraId:13,tocIndex:5},{value:"禁止同步设置到查询参数",paraId:13,tocIndex:5},{value:"boolean",paraId:13,tocIndex:5},{value:"false",paraId:13,tocIndex:5},{value:"enableDarkTheme",paraId:13,tocIndex:5},{value:"打开黑色主题切换功能｜ ",paraId:13,tocIndex:5},{value:"boolean",paraId:13,tocIndex:5},{value:"false",paraId:13,tocIndex:5},{value:"colorList",paraId:13,tocIndex:5},{value:"自带的颜色切换系统(ColorList 的 title 会作为 Tooltip 显示) ｜ ",paraId:13,tocIndex:5},{value:"{key,color,title?}[]",paraId:13,tocIndex:5},{value:"ColorList",paraId:13,tocIndex:5},{value:"自带的颜色列表",paraId:17,tocIndex:5},{value:"const colorList = [\n { key: 'daybreak', color: '#1890ff' },\n { key: 'dust', color: '#F5222D' },\n { key: 'volcano', color: '#FA541C' },\n { key: 'sunset', color: '#FAAD14' },\n { key: 'cyan', color: '#13C2C2' },\n { key: 'green', color: '#52C41A' },\n { key: 'geekblue', color: '#2F54EB' },\n { key: 'purple', color: '#722ED1' },\n];\n",paraId:18,tocIndex:5},{value:"一个简单的加载页面",paraId:19,tocIndex:6},{value:"参数",paraId:20,tocIndex:6},{value:"说明",paraId:20,tocIndex:6},{value:"类型",paraId:20,tocIndex:6},{value:"默认值",paraId:20,tocIndex:6},{value:"(...)",paraId:20,tocIndex:6},{value:"支持所有的 antd ",paraId:20,tocIndex:6},{value:"Spin",paraId:20,tocIndex:6},{value:" 组件参数",paraId:20,tocIndex:6},{value:"-",paraId:20,tocIndex:6},{value:"-",paraId:20,tocIndex:6},{value:"RouteContext 可以提供 Layout 的内置的数据。例如 isMobile 和 collapsed，你可以消费这些数据来自定义一些行为。",paraId:21,tocIndex:7},{value:"import { RouteContext, RouteContextType } from '@szc-ft/szcd';\n\nconst Page = () => (\n <RouteContext.Consumer>\n {(value: RouteContextType) => {\n return value.title;\n }}\n </RouteContext.Consumer>\n);\n",paraId:22,tocIndex:7},{value:"GridContent 封装了 ",paraId:23,tocIndex:8},{value:"等宽",paraId:23,tocIndex:8},{value:"和 ",paraId:23,tocIndex:8},{value:"流式",paraId:23,tocIndex:8},{value:" 的逻辑。你可以在 ",paraId:23,tocIndex:8},{value:"preview",paraId:23,tocIndex:8},{value:" 中查看预览效果。",paraId:23,tocIndex:8},{value:"参数",paraId:24,tocIndex:8},{value:"说明",paraId:24,tocIndex:8},{value:"类型",paraId:24,tocIndex:8},{value:"默认值",paraId:24,tocIndex:8},{value:"contentWidth",paraId:24,tocIndex:8},{value:"内容模式",paraId:24,tocIndex:8},{value:"Fluid",paraId:24,tocIndex:8},{value:" | ",paraId:24,tocIndex:8},{value:"Fixed",paraId:24,tocIndex:8},{value:"-",paraId:24,tocIndex:8},{value:"根据 router 信息来生成 menuData 和 breadcrumb。",paraId:25,tocIndex:9},{value:"import { getMenuData } from '@szc-ft/szcd';\n\nconst { breadcrumb, menuData } = getMenuData(\n routes,\n menu,\n formatMessage,\n menuDataRender,\n);\n",paraId:26,tocIndex:9},{value:"参数",paraId:27,tocIndex:9},{value:"说明",paraId:27,tocIndex:9},{value:"类型",paraId:27,tocIndex:9},{value:"默认值",paraId:27,tocIndex:9},{value:"routes",paraId:27,tocIndex:9},{value:"路由的配置信息",paraId:27,tocIndex:9},{value:"route[]",paraId:28,tocIndex:9},{value:"-",paraId:27,tocIndex:9},{value:"menu",paraId:27,tocIndex:9},{value:"menu 的配置项，默认 ",paraId:27,tocIndex:9},{value:"{locale: true}",paraId:27,tocIndex:9},{value:"{ locale: boolean }",paraId:27,tocIndex:9},{value:"-",paraId:27,tocIndex:9},{value:"menuDataRender",paraId:27,tocIndex:9},{value:"menuData 的 render 方法，用来自定义 menuData",paraId:27,tocIndex:9},{value:"(menuData: MenuDataItem[]) => MenuDataItem[]",paraId:27,tocIndex:9},{value:"-",paraId:27,tocIndex:9},{value:"formatMessage",paraId:27,tocIndex:9},{value:"react-intl 的 formatMessage 方法",paraId:27,tocIndex:9},{value:"(data: { id: any; defaultMessage?: string }) => string;",paraId:27,tocIndex:9},{value:"-",paraId:27,tocIndex:9},{value:"getPageTitle 封装了根据 menuData 上生成的 title 的逻辑。",paraId:29,tocIndex:10},{value:"import { getPageTitle } from '@szc-ft/szcd';\n\nconst title = getPageTitle({\n pathname,\n breadcrumb,\n menu,\n title,\n formatMessage,\n});\n",paraId:30,tocIndex:10},{value:"参数",paraId:31,tocIndex:10},{value:"说明",paraId:31,tocIndex:10},{value:"类型",paraId:31,tocIndex:10},{value:"默认值",paraId:31,tocIndex:10},{value:"pathname",paraId:31,tocIndex:10},{value:"当前的 pathname",paraId:31,tocIndex:10},{value:"location.pathname",paraId:31,tocIndex:10},{value:"-",paraId:31,tocIndex:10},{value:"breadcrumb",paraId:31,tocIndex:10},{value:"MenuDataItem 的合集",paraId:31,tocIndex:10},{value:"{ [path: string]: MenuDataItem }",paraId:31,tocIndex:10},{value:"-",paraId:31,tocIndex:10},{value:"menu",paraId:31,tocIndex:10},{value:"menu 的配置项，默认 ",paraId:31,tocIndex:10},{value:"{locale: true}",paraId:31,tocIndex:10},{value:"{ locale: boolean }",paraId:31,tocIndex:10},{value:"-",paraId:31,tocIndex:10},{value:"title",paraId:31,tocIndex:10},{value:"title 的类型",paraId:31,tocIndex:10},{value:"string",paraId:31,tocIndex:10},{value:"'Ant Design Pro'",paraId:31,tocIndex:10},{value:"formatMessage",paraId:31,tocIndex:10},{value:"react-intl 的 formatMessage 方法",paraId:31,tocIndex:10},{value:"(data: { id: any; defaultMessage?: string }) => string;",paraId:31,tocIndex:10},{value:"-",paraId:31,tocIndex:10},{value:"// 可以通过 import { Settings } from '@ant-design/pro-layout/defaultSettings'\n// 来获取这个类型\nexport interface Settings {\n /** Primary color of ant design */\n colorPrimary: string;\n /** Nav menu position: `side` or `top` */\n layout: 'side' | 'top';\n /** Layout of content: `Fluid` or `Fixed`, only works when layout is top */\n contentWidth: 'Fluid' | 'Fixed';\n /** Sticky header */\n fixedHeader: boolean;\n /** Sticky siderbar */\n fixSiderbar: boolean;\n menu: { locale: boolean };\n title: string;\n pwa: boolean;\n // Your custom iconfont Symbol script Url\n // eg：//at.alicdn.com/t/font_1039637_btcrd5co4w.js\n // Usage: https://github.com/ant-design/ant-design-pro/pull/3517\n iconfontUrl: string;\n colorWeak: boolean;\n}\n",paraId:32,tocIndex:11},{value:"// 可以通过 import { MenuDataItem } from '@szc-ft/szcd'\n// 来获取这个类型\n\nexport interface MenuDataItem {\n authority?: string[] | string;\n children?: MenuDataItem[];\n hideChildrenInMenu?: boolean;\n hideInMenu?: boolean;\n icon?: string;\n locale?: string;\n name?: string;\n path: string;\n\n [key: string]: any;\n}\n",paraId:33,tocIndex:12},{value:"// 可以通过 import { RouterTypes } from '@ant-design/pro-layout/lib/typings';\n// 来获取这个类型\nexport interface Route {\n path: string;\n children: Array<{\n exact?: boolean;\n emoji: string;\n name: string;\n path: string;\n // 可选二级菜单\n children?: Route['children'];\n }>;\n}\n",paraId:34,tocIndex:13},{value:"页脚一般一般会展示一些公司和版权信息，默认的 ProLayout 不提供 Footer,但是提供了一个 DefaultFooter 组件，支持配置一些超链接和一些版权信息。",paraId:35,tocIndex:14},{value:"import { GithubOutlined } from '@szc-ft/szcd';\nimport { DefaultFooter } from '@szc-ft/szcd';\n\n<DefaultFooter\n copyright=\"@2019 蚂蚁金服体验技术部出品\"\n links={[\n {\n key: 'Ant Design Pro',\n title: 'Ant Design Pro',\n href: 'https://pro.ant.design',\n blankTarget: true,\n },\n {\n key: 'github',\n title: <GithubOutlined />,\n href: 'https://github.com/ant-design/ant-design-pro',\n blankTarget: true,\n },\n {\n key: 'Ant Design',\n title: 'Ant Design',\n href: 'https://ant.design',\n blankTarget: true,\n },\n ]}\n/>;\n",paraId:36,tocIndex:14},{value:"GridContent 是个简单的语法糖，封装了 ProLayout 的 ",paraId:37,tocIndex:15},{value:"contentWidth",paraId:37,tocIndex:15},{value:" 配置，",paraId:37,tocIndex:15},{value:"contentWidth",paraId:37,tocIndex:15},{value:" 如果设置为 ",paraId:37,tocIndex:15},{value:"Fixed",paraId:37,tocIndex:15},{value:" 定宽模式，最宽只有 ",paraId:37,tocIndex:15},{value:"1200px",paraId:37,tocIndex:15},{value:"。",paraId:37,tocIndex:15},{value:"使用方式：",paraId:38,tocIndex:15},{value:"<GridContent>{children}</GridContent>\n",paraId:39,tocIndex:15},{value:"RouteContext 提供一个可以根据 layout 的数据来进行一些操作, PageContainer 和 FooterToolbar 都是依赖 RouteContext 的数据来实现功能。",paraId:40,tocIndex:16},{value:"import { RouteContext, RouteContextType } from '@szc-ft/szcd';\n\nconst Page = () => (\n <RouteContext.Consumer>\n {(value: RouteContextType) => {\n const { isMobile, hasHeader, hasSiderMenu, collapsed } = value;\n // 用户的标题\n return value.title;\n }}\n </RouteContext.Consumer>\n);\n",paraId:41,tocIndex:16},{value:"Token 是一种设计系统的基本元素，可以使用 Token 快速的修改组件库的基础样式。Layout 中可以通过 token 属性来配置这些颜色。",paraId:42,tocIndex:17},{value:"token",paraId:43,tocIndex:18},{value:"说明",paraId:43,tocIndex:18},{value:"默认值",paraId:43,tocIndex:18},{value:"bgLayout",paraId:43,tocIndex:18},{value:"layout 的背景颜色",paraId:43,tocIndex:18},{value:"linear-gradient(${antdToken.colorBgContainer}, ${antdToken.colorBgLayout} 28%)",paraId:43,tocIndex:18},{value:"colorTextAppListIcon",paraId:43,tocIndex:18},{value:"跨站点应用的图标颜色",paraId:43,tocIndex:18},{value:"#666",paraId:43,tocIndex:18},{value:"colorTextAppListIconHover",paraId:43,tocIndex:18},{value:"跨站点应用的图标 hover 颜色",paraId:43,tocIndex:18},{value:"rgba(0, 0, 0, 0.65)",paraId:43,tocIndex:18},{value:"colorBgAppListIconHover",paraId:43,tocIndex:18},{value:"跨站点应用的图标 hover 背景颜色",paraId:43,tocIndex:18},{value:"rgba(0, 0, 0, 0.04)",paraId:43,tocIndex:18},{value:"Sider Token 是侧边菜单的色值，与顶部菜单不同。",paraId:44,tocIndex:19},{value:"token",paraId:45,tocIndex:19},{value:"说明",paraId:45,tocIndex:19},{value:"默认值",paraId:45,tocIndex:19},{value:"colorMenuBackground",paraId:45,tocIndex:19},{value:"menu 的背景颜色",paraId:45,tocIndex:19},{value:"transparent",paraId:45,tocIndex:19},{value:"colorTextMenuTitle",paraId:45,tocIndex:19},{value:"sider 的标题字体颜色",paraId:45,tocIndex:19},{value:"colorTextHeading",paraId:45,tocIndex:19},{value:"colorMenuItemDivider",paraId:45,tocIndex:19},{value:"menuItem 分割线的颜色",paraId:45,tocIndex:19},{value:"colorSplit",paraId:45,tocIndex:19},{value:"colorTextMenu",paraId:45,tocIndex:19},{value:"menuItem 的字体颜色",paraId:45,tocIndex:19},{value:"colorText",paraId:45,tocIndex:19},{value:"colorTextMenuSecondary",paraId:45,tocIndex:19},{value:"menu 的二级字体颜色，比如 footer 和 action 的 icon",paraId:45,tocIndex:19},{value:"colorText",paraId:45,tocIndex:19},{value:"colorTextMenuSelected",paraId:45,tocIndex:19},{value:"menuItem 的选中字体颜色",paraId:45,tocIndex:19},{value:"rgb(0,0,0)",paraId:45,tocIndex:19},{value:"colorTextMenuActive",paraId:45,tocIndex:19},{value:"menuItem hover 的选中字体颜色",paraId:45,tocIndex:19},{value:"rgba(0, 0, 0, 0.85)",paraId:45,tocIndex:19},{value:"colorTextMenuItemHover",paraId:45,tocIndex:19},{value:"menuItem 的 hover 字体颜色",paraId:45,tocIndex:19},{value:"rgba(255,255,255,0.75)",paraId:45,tocIndex:19},{value:"colorBgMenuItemHover",paraId:45,tocIndex:19},{value:"menuItem 的 hover 背景颜色",paraId:45,tocIndex:19},{value:"rgba(90, 75, 75, 0.03)",paraId:45,tocIndex:19},{value:"colorBgMenuItemSelected",paraId:45,tocIndex:19},{value:"menuItem 的选中背景颜色",paraId:45,tocIndex:19},{value:"rgba(0, 0, 0, 0.04)",paraId:45,tocIndex:19},{value:"colorBgMenuItemCollapsedElevated",paraId:45,tocIndex:19},{value:"收起 menuItem 的弹出菜单背景颜色",paraId:45,tocIndex:19},{value:"transparent",paraId:45,tocIndex:19},{value:"colorBgCollapsedButton",paraId:45,tocIndex:19},{value:"展开收起按钮背景颜色",paraId:45,tocIndex:19},{value:"#fff",paraId:45,tocIndex:19},{value:"colorTextCollapsedButton",paraId:45,tocIndex:19},{value:"展开收起按钮字体颜色",paraId:45,tocIndex:19},{value:"colorTextMenuSecondary",paraId:45,tocIndex:19},{value:"colorTextCollapsedButtonHover",paraId:45,tocIndex:19},{value:"展开收起按钮 hover 时字体颜色",paraId:45,tocIndex:19},{value:"colorTextMenu",paraId:45,tocIndex:19},{value:"token",paraId:46,tocIndex:20},{value:"说明",paraId:46,tocIndex:20},{value:"默认值",paraId:46,tocIndex:20},{value:"colorBgHeader",paraId:46,tocIndex:20},{value:"header 的背景颜色",paraId:46,tocIndex:20},{value:"rgba(240, 242, 245, 0.4)",paraId:46,tocIndex:20},{value:"colorHeaderTitle",paraId:46,tocIndex:20},{value:"sider 的标题字体颜色",paraId:46,tocIndex:20},{value:"colorTextHeading",paraId:46,tocIndex:20},{value:"colorTextMenu",paraId:46,tocIndex:20},{value:"menuItem 的字体颜色",paraId:46,tocIndex:20},{value:"colorText",paraId:46,tocIndex:20},{value:"colorTextMenuSecondary",paraId:46,tocIndex:20},{value:"menu 的二级字体颜色，比如 footer 和 action 的 icon",paraId:46,tocIndex:20},{value:"colorText",paraId:46,tocIndex:20},{value:"colorTextMenuSelected",paraId:46,tocIndex:20},{value:"menuItem 的选中字体颜色",paraId:46,tocIndex:20},{value:"rgb(0,0,0)",paraId:46,tocIndex:20},{value:"colorTextMenuActive",paraId:46,tocIndex:20},{value:"menuItem hover 的选中字体颜色",paraId:46,tocIndex:20},{value:"rgba(0, 0, 0, 0.85)",paraId:46,tocIndex:20},{value:"colorBgMenuItemHover",paraId:46,tocIndex:20},{value:"menuItem 的 hover 背景颜色",paraId:46,tocIndex:20},{value:"rgba(90, 75, 75, 0.03)",paraId:46,tocIndex:20},{value:"colorBgMenuItemSelected",paraId:46,tocIndex:20},{value:"menuItem 的选中背景颜色",paraId:46,tocIndex:20},{value:"rgba(0, 0, 0, 0.04)",paraId:46,tocIndex:20},{value:"colorTextRightActionsItem",paraId:46,tocIndex:20},{value:"右上角字体颜色",paraId:46,tocIndex:20},{value:"colorTextSecondary",paraId:46,tocIndex:20},{value:"colorBgRightActionsItemHover",paraId:46,tocIndex:20},{value:"右上角选中的 hover 颜色",paraId:46,tocIndex:20},{value:"rgba(0, 0, 0, 0.03)",paraId:46,tocIndex:20},{value:"heightLayoutHeader",paraId:46,tocIndex:20},{value:"header 高度",paraId:46,tocIndex:20},{value:"56",paraId:46,tocIndex:20},{value:"token",paraId:47,tocIndex:21},{value:"说明",paraId:47,tocIndex:21},{value:"默认值",paraId:47,tocIndex:21},{value:"paddingBlockPageContainerContent",paraId:47,tocIndex:21},{value:"pageContainer 自带的 padding block",paraId:47,tocIndex:21},{value:"24",paraId:47,tocIndex:21},{value:"paddingInlinePageContainerContent",paraId:47,tocIndex:21},{value:"pageContainer 自带的 padding inline",paraId:47,tocIndex:21},{value:"40",paraId:47,tocIndex:21},{value:"colorBgPageContainer",paraId:47,tocIndex:21},{value:"pageContainer 的背景颜色",paraId:47,tocIndex:21},{value:"transparent",paraId:47,tocIndex:21},{value:"colorBgPageContainerFixed",paraId:47,tocIndex:21},{value:"pageContainer 被固定时的背景颜色",paraId:47,tocIndex:21},{value:"#FFF",paraId:47,tocIndex:21},{value:"ProLayout 提供一些 api 删除用户不需要的区域。在 SettingDrawer 也提供一些配置来进行设置。",paraId:48,tocIndex:23},{value:"headerRender",paraId:49,tocIndex:23},{value:" 可以自定义顶栏",paraId:49,tocIndex:23},{value:"footerRender",paraId:49,tocIndex:23},{value:" 可以自定义页脚",paraId:49,tocIndex:23},{value:"menuRender",paraId:49,tocIndex:23},{value:" 可以自定义菜单区域",paraId:49,tocIndex:23},{value:"menuHeaderRender",paraId:49,tocIndex:23},{value:" 自定义的菜单头区域",paraId:49,tocIndex:23},{value:"menuExtraRender",paraId:49,tocIndex:23},{value:" 可以为菜单增加一个额外内容，在菜单头和菜单之间",paraId:49,tocIndex:23},{value:"在 layout 中所有的 xxxRender 都可以传入 false，来关闭渲染。",paraId:50,tocIndex:23},{value:"ProLayout 与 umi 配合使用会有最好的效果，umi 会把 config.ts 中的路由帮我们自动注入到配置的 layout 中，这样我们就可以免去手写菜单的烦恼。",paraId:51,tocIndex:24},{value:"ProLayout 扩展了 umi 的 router 配置，新增了 name，icon，locale,hideInMenu,hideChildrenInMenu 等配置，这样可以更方便的生成菜单，在一个地方配置即可。数据格式如下：",paraId:52,tocIndex:24},{value:"export interface MenuDataItem {\n /** @name 子菜单 */\n children?: MenuDataItem[];\n /** @name 在菜单中隐藏子节点 */\n hideChildrenInMenu?: boolean;\n /** @name 在菜单中隐藏自己和子节点 */\n hideInMenu?: boolean;\n /** @name 在面包屑中隐藏 */\n hideInBreadcrumb?: boolean;\n /** @name 菜单的icon */\n icon?: React.ReactNode;\n /** @name 自定义菜单的国际化 key */\n locale?: string | false;\n /** @name 菜单的名字 */\n name?: string;\n /** @name 用于标定选中的值，默认是 path */\n key?: string;\n /** @name disable 菜单选项 */\n disabled?: boolean;\n /** @name 路径,可以设定为网页链接 */\n path?: string;\n /**\n * @deprecated 当此节点被选中的时候也会选中 parentKeys 的节点\n * @name 自定义父节点\n */\n parentKeys?: string[];\n /** @name 隐藏自己，并且将子节点提升到与自己平级 */\n flatMenu?: boolean;\n /** @name 指定外链打开形式，同a标签 */\n target?: string;\n\n [key: string]: any;\n}\n",paraId:53,tocIndex:24},{value:"ProLayout 会根据 ",paraId:54,tocIndex:24},{value:"location.pathname",paraId:54,tocIndex:24},{value:" 来自动选中菜单，并且自动生成相应的面包屑。如果不想使用可以自己配置 ",paraId:54,tocIndex:24},{value:"selectedKeys",paraId:54,tocIndex:24},{value:" 和 ",paraId:54,tocIndex:24},{value:"openKeys",paraId:54,tocIndex:24},{value:" 来进行受控配置。",paraId:54,tocIndex:24},{value:"一些时候我们会发现 ",paraId:55,tocIndex:25},{value:"collapsed",paraId:55,tocIndex:25},{value:" 和 ",paraId:55,tocIndex:25},{value:"onCollapse",paraId:55,tocIndex:25},{value:" 设置默认收起并不生效，这是因为 ProLayout 中内置了 ",paraId:55,tocIndex:25},{value:"breakpoint",paraId:55,tocIndex:25},{value:" 来触发收起的机制，我们可以设置 ",paraId:55,tocIndex:25},{value:"breakpoint={false}",paraId:55,tocIndex:25},{value:" 来关掉这个机制。",paraId:55,tocIndex:25},{value:"siderWidth 可以自定义菜单的宽度，你可以设置的更短或者更长 FooterToolbar 等组件会自动支持，但是可能需要做一些样式上的处理，不然菜单展示可能会有一些小问题。",paraId:56,tocIndex:26},{value:"菜单收起宽度是无法自定义的，因为涉及到动画和巨量的 css 改动，自定义难度很大。",paraId:57,tocIndex:26},{value:"自动切割菜单是 ",paraId:58,tocIndex:27},{value:"mix",paraId:58,tocIndex:27},{value:" 模式专属的能力，他可以把第一级的菜单放置到顶栏中。我们可以设置 ",paraId:58,tocIndex:27},{value:"splitMenus=true",paraId:58,tocIndex:27},{value:" 来打开它，为了体验良好最好给每个一级菜单都设置一个重定向,这样可以防止切换到白屏页面。",paraId:58,tocIndex:27},{value:"ProLayout 会自动生成菜单，同时根据 pathname 进行自动选中。配合 PageContainer 可以实现自动推算面包屑和页面标题。如果和 umi 配置使用，只需要将 Page 的 props 交给 ProLayout，ProLayout 会根据 config 中的 routers 的配置可以自动生成菜单。",paraId:59,tocIndex:28},{value:"为了提供更多的功能，我们扩展了 routers 配置，增加了几个配置方便自定义，数据结构定义如下:",paraId:60,tocIndex:28},{value:"// 可以通过 import { MenuDataItem } from '@szc-ft/szcd'\n// 来获取这个类型\nexport interface MenuDataItem {\n children?: MenuDataItem[];\n hideChildrenInMenu?: boolean;\n hideInMenu?: boolean;\n icon?: string;\n locale?: string;\n name?: string;\n path: string;\n [key: string]: any;\n}\n",paraId:61,tocIndex:28},{value:"name 用于配置在菜单中的名称，同时会修改为浏览器标签页标题",paraId:62,tocIndex:28},{value:"icon 代表菜单的图标，只 antd 的图标，iconfont 需要自己定义",paraId:62,tocIndex:28},{value:"locale 可以设置菜单名称的国际化表示",paraId:62,tocIndex:28},{value:"hideInMenu 会把这个路由配置在 menu 中隐藏这个路由，name 不填会有相同的效果",paraId:62,tocIndex:28},{value:"hideChildrenInMenu 会把这个路由的子节点在 menu 中隐藏",paraId:62,tocIndex:28},{value:"ProLayout 其实是读取的 props 中的 route 和 location。这两个属性是 umi 默认注入的。",paraId:63,tocIndex:28},{value:"有些时候我们希望服务器来管理我们的路由，所以希望菜单时服务器进行分发的数据。我们提供了 ",paraId:64,tocIndex:29},{value:"menuDataRender",paraId:64,tocIndex:29},{value:" 来进行修改数据，但是要注意 ",paraId:64,tocIndex:29},{value:"menuDataRender",paraId:64,tocIndex:29},{value:" 会触发重新渲染，并且还会支持的国际化和权限的配置，如果你不需要国际化，建议使用 ",paraId:64,tocIndex:29},{value:"postMenuData",paraId:64,tocIndex:29},{value:" 可以显著的提升性能。",paraId:64,tocIndex:29},{value:"服务器需要返回的数据与 ",paraId:65,tocIndex:29},{value:"MenuDataItem",paraId:65,tocIndex:29},{value:" 相同，",paraId:65,tocIndex:29},{value:"menuDataRender",paraId:65,tocIndex:29},{value:" 需要返回一个数组，如果你想拥有更好的性能可以试试使用 props 中的 route 属性，这里有个 ",paraId:65,tocIndex:29},{value:"demo",paraId:66,tocIndex:29},{value:"。",paraId:65,tocIndex:29}]}}]);