diff --git a/examples/antdp-base/config/config.js b/examples/antdp-base/config/config.js index f598ad936..d5d5678a8 100644 --- a/examples/antdp-base/config/config.js +++ b/examples/antdp-base/config/config.js @@ -18,8 +18,6 @@ export default config(router, { auth_btn: 'authBtn', auth_check_url: '', }, - ANTD_MENU_TOP_LEFT: false, - ANTD_MENU_SLIDER: true, /** 是否展示搜索菜单 */ ANTD_MENU_SEARCH_IS_SHOW: true, }, diff --git a/examples/antdp-base/config/router.json b/examples/antdp-base/config/router.json index 5f6878c49..a032b052f 100644 --- a/examples/antdp-base/config/router.json +++ b/examples/antdp-base/config/router.json @@ -35,6 +35,7 @@ "name": "组件页", "locale": "components", "icon": "form", + "side": true, "routes": [ { "path": "/components/proform", @@ -67,6 +68,7 @@ "name": "列表页", "icon": "table", "locale": "list", + "side": true, "routes": [ { "path": "/list/tablelist", diff --git a/examples/antdp-base/src/layouts/BasicLayout.jsx b/examples/antdp-base/src/layouts/BasicLayout.jsx index 6f47509ba..6febff798 100644 --- a/examples/antdp-base/src/layouts/BasicLayout.jsx +++ b/examples/antdp-base/src/layouts/BasicLayout.jsx @@ -1,21 +1,15 @@ import { LogoutOutlined, SettingOutlined, - UserOutlined, UnorderedListOutlined, + UserOutlined, } from '@ant-design/icons'; -import { useState } from 'react'; -import { FloatButton } from 'antd'; import Authorized from '@antdp/authorized'; import BasicLayouts from '@antdp/basic-layouts'; -import { - SelectLang, - useIntl, - useDispatch, - useSelector, - history, -} from '@umijs/max'; +import { history, SelectLang, useDispatch, useIntl, useSelector } from '@umijs/max'; +import { FloatButton } from 'antd'; import 'antd/dist/reset.css'; +import { useState } from 'react'; import logo from './logo.svg'; const Layout = () => { @@ -36,19 +30,16 @@ const Layout = () => { style={{ right: 94 }} icon={} > - setDark(!dark)} - /> + setDark(!dark)} /> { export default Demo ``` +## 导航菜单模式 + +```jsx +import React from 'react'; +import BasicLayout from '@antdp/basic-layouts'; +const Demo = (props) => { + return ( + + ) +}; + +export default Demo +``` + + ## 菜单国际化设置 ```jsx @@ -135,6 +153,8 @@ export default () => { | theme | 明或暗 | `dark` | `light` | `light` | | className | 样式 | `string` | - | | configProviderProps | `antd组件全局化配置` | `ConfigProviderProps` | - | +| contentStyle | 自定义内容部分样式 | `React.CSSProperties | undefined` | - | +| layout | 导航菜单模式,slider：右侧导航，topleft：顶部左侧导航 | `LayoutModel | undefined` | mix | ## TopRightMenuProps | 参数 | 说明 | 类型 | 默认值 | @@ -143,4 +163,4 @@ export default () => { | title | 标题 | `React.ReactNode` | - | | link | 链接 | `string` | - | | divider | 是否有下划线 | `boolean` | - | -| onClick | 点击事件 | `IntlShape` | \ No newline at end of file +| onClick | 点击事件 | `IntlShape` | diff --git a/packages/basic-layouts/src/Breadcrumb/index.tsx b/packages/basic-layouts/src/Breadcrumb/index.tsx index 772d89551..b7a128413 100644 --- a/packages/basic-layouts/src/Breadcrumb/index.tsx +++ b/packages/basic-layouts/src/Breadcrumb/index.tsx @@ -2,24 +2,27 @@ import React, { useMemo } from "react"; import { Breadcrumb } from "antd" import { useLocation, Link } from 'react-router-dom'; import { useLayouts } from "./../hooks" +import { LayoutModel } from "../interface"; const Breadcrumbs = () => { const location = useLocation() - const { HandleMenu } = useLayouts() + const { HandleMenu, layout } = useLayouts() + console.log('Breadcrumbs layout: ', layout); const breadcrumbMenu = useMemo(() => { return ( HandleMenu.getBreadcrumb(location.pathname).map((item, index) => { let child: React.ReactNode = item.name - if (item.side && item.path && ANTD_MENU_TOP_LEFT) { + if (item.side && item.path && layout === LayoutModel.SLIDER) { child = {item.name} } return { title: child, key: index } }) ) - }, [location.pathname]) + }, [location.pathname, layout]) + return ( ) } -export default Breadcrumbs \ No newline at end of file +export default Breadcrumbs diff --git a/packages/basic-layouts/src/Header/index.tsx b/packages/basic-layouts/src/Header/index.tsx index b6da17623..e1d02e0fd 100644 --- a/packages/basic-layouts/src/Header/index.tsx +++ b/packages/basic-layouts/src/Header/index.tsx @@ -2,11 +2,15 @@ import React from 'react'; import HeaderMenus from '../HeaderMenus'; import Logo from '../Logo'; import TopRight from '../TopRight'; +import { useLayouts } from '../hooks'; +import { LayoutModel } from '../interface'; const Header = () => { + const { layout } = useLayouts() + return (
- {!ANTD_MENU_SLIDER && } + {layout !== LayoutModel.SLIDER && }
diff --git a/packages/basic-layouts/src/HeaderMenus/index.tsx b/packages/basic-layouts/src/HeaderMenus/index.tsx index eb61d11bb..45ad3f5c3 100644 --- a/packages/basic-layouts/src/HeaderMenus/index.tsx +++ b/packages/basic-layouts/src/HeaderMenus/index.tsx @@ -4,15 +4,16 @@ import { useLocation } from 'react-router-dom'; import { useLayouts } from '../hooks'; import { getSiderMenus } from '../utils'; import Breadcrumbs from './../Breadcrumb'; +import { LayoutModel } from '../interface'; const HeaderMenus = () => { const location = useLocation(); - const { HandleMenu } = useLayouts(); + const { HandleMenu, layout } = useLayouts(); const menus = HandleMenu.parentMenu || []; const items = useMemo(() => { - return getSiderMenus(menus, !!ANTD_MENU_TOP_LEFT); - }, [menus]); + return getSiderMenus(menus, layout === LayoutModel.TOPLEFT); + }, [menus, layout]); const parentPath = HandleMenu.getParentPath(location.pathname); diff --git a/packages/basic-layouts/src/Logo/index.tsx b/packages/basic-layouts/src/Logo/index.tsx index e807af421..aa48bd308 100644 --- a/packages/basic-layouts/src/Logo/index.tsx +++ b/packages/basic-layouts/src/Logo/index.tsx @@ -2,6 +2,7 @@ import React, { useMemo } from 'react'; // @ts-ignore import { Link } from '@umijs/max'; import { useLayouts } from '../hooks'; +import { LayoutModel } from '../interface'; interface LogoProps { logoJumpTo?: string; @@ -10,7 +11,7 @@ interface LogoProps { } const Logo = (props: LogoProps) => { - const { collapsed, logo, projectName, siderWidth = 260 } = useLayouts(); + const { collapsed, logo, projectName, layout, siderWidth = 260 } = useLayouts(); const { logoJumpTo = '/' } = props; const logoRender = useMemo( @@ -19,19 +20,18 @@ const Logo = (props: LogoProps) => { ); const name = useMemo(() => { - if (!!ANTD_MENU_SLIDER && collapsed) { + if (layout === LayoutModel.SLIDER && collapsed) { return null; } return projectName &&

{projectName}

; - }, [projectName,collapsed]); + }, [projectName, collapsed, layout]); return useMemo( () => (
{logoRender} diff --git a/packages/basic-layouts/src/Sider/index.tsx b/packages/basic-layouts/src/Sider/index.tsx index 6cf10e4f4..afe2f3ae0 100644 --- a/packages/basic-layouts/src/Sider/index.tsx +++ b/packages/basic-layouts/src/Sider/index.tsx @@ -3,7 +3,7 @@ import { Layout, Menu, MenuProps } from 'antd'; import React, { useMemo } from 'react'; import { useLocation } from 'react-router-dom'; import { useLayouts } from '../hooks'; -import { RouterMenu } from '../interface'; +import { LayoutModel, RouterMenu } from '../interface'; import { getSiderMenus } from '../utils'; import Logo from './../Logo'; @@ -20,6 +20,7 @@ const Sider = (props: SiderProps) => { collapsed, siderWidth = 260, setCollapsed, + layout } = useLayouts(); const collapsedView = useMemo( @@ -34,11 +35,13 @@ const Sider = (props: SiderProps) => { const menus = HandleMenu.getSiderMenus(location.pathname); const items = useMemo(() => { - return getSiderMenus(menus, !!ANTD_MENU_TOP_LEFT); - }, [menus]); + return getSiderMenus(menus, layout === LayoutModel.TOPLEFT); + }, [menus, layout]); + if (!items.length) { return ; } + return ( {
{collapsedView}
} > - {!!ANTD_MENU_SLIDER && ( + {layout === LayoutModel.SLIDER && (
diff --git a/packages/basic-layouts/src/hooks.ts b/packages/basic-layouts/src/hooks.ts index f3844af64..4068a46ee 100644 --- a/packages/basic-layouts/src/hooks.ts +++ b/packages/basic-layouts/src/hooks.ts @@ -9,7 +9,7 @@ import DocumentTitleDom, { DocumentTitle } from '@antdp/document-title'; import { useLocation } from 'react-router-dom'; // @ts-ignore import { useAppData } from '@umijs/max'; -import { UseLayoutsProps, RouterMenu } from './interface'; +import { UseLayoutsProps, RouterMenu, LayoutModel } from './interface'; import { HandleMenu } from './utils'; export interface LayoutsContextType extends UseLayoutsProps { @@ -22,6 +22,7 @@ export const LayoutsContext = createContext({ HandleMenu: new HandleMenu({ routers: [] }), collapsed: false, setCollapsed: () => null, + layout: LayoutModel.MIX }); export const useLayouts = () => useContext(LayoutsContext); @@ -31,6 +32,7 @@ export const LayoutsProvider = (props: UseLayoutsProps) => { const [collapsed, setCollapsed] = useState(false); const location = useLocation(); const { clientRoutes } = useAppData(); + const layout = props.layout const routes = useMemo(() => { const routes = (clientRoutes as RouterMenu[]).find( @@ -44,9 +46,9 @@ export const LayoutsProvider = (props: UseLayoutsProps) => { routers: routes || [], intlLanguage: intlLanguage, isCheckAuth: !!ANTD_AUTH_CONF, - isTOPLEFT: !!ANTD_MENU_TOP_LEFT, + isTOPLEFT: layout === LayoutModel.TOPLEFT, }); - }, [routes, intlLanguage]); + }, [routes, intlLanguage, layout]); const title = useMemo(() => { const item = Menus.getPathItem(location.pathname); @@ -67,8 +69,12 @@ export const LayoutsProvider = (props: UseLayoutsProps) => { return createElement(DocumentTitleDom, { title: renderTitle, children: createElement(LayoutsContext.Provider, { - value: { HandleMenu: Menus, collapsed, setCollapsed, ...rest }, + value: { + HandleMenu: Menus, collapsed, setCollapsed, layout: LayoutModel.MIX, + ...rest + }, children, }), }); }; + diff --git a/packages/basic-layouts/src/index.tsx b/packages/basic-layouts/src/index.tsx index 259740202..cfba96f3f 100644 --- a/packages/basic-layouts/src/index.tsx +++ b/packages/basic-layouts/src/index.tsx @@ -5,7 +5,7 @@ import WarpContent from './Content'; import Header from './Header'; import { LayoutsProvider } from './hooks'; import './index.css'; -import { BasicLayoutsProps } from './interface'; +import { BasicLayoutsProps, LayoutModel } from './interface'; import SiderMenus from './Sider'; export * from './Breadcrumb'; export { default as Breadcrumb } from './Breadcrumb'; @@ -25,8 +25,11 @@ export * from './utils'; const BasicLayouts = (props: BasicLayoutsProps) => { const { theme = 'light' } = props; + const layout = props.layout + + const render = useMemo(() => { - if (!!ANTD_MENU_TOP_LEFT) { + if (layout === LayoutModel.TOPLEFT) { return ( {ANTD_HEAD_IS_SHOW && ( @@ -44,7 +47,7 @@ const BasicLayouts = (props: BasicLayoutsProps) => { ); - } else if (!!ANTD_MENU_SLIDER) { + } else if (layout === LayoutModel.SLIDER) { return ( {ANTD_MENU_IS_SHOW && } @@ -83,7 +86,8 @@ const BasicLayouts = (props: BasicLayoutsProps) => { ); } - }, [theme]); + }, [theme, layout]); + const newData = useMemo(() => { if (typeof ANTD_AUTH_CONF === 'boolean') { return { @@ -104,6 +108,7 @@ const BasicLayouts = (props: BasicLayoutsProps) => { } return { isCheckAuth: false }; }, [ANTD_AUTH_CONF]); + return ( diff --git a/packages/basic-layouts/src/interface.ts b/packages/basic-layouts/src/interface.ts index 29144dfa4..6e9cd7aa1 100644 --- a/packages/basic-layouts/src/interface.ts +++ b/packages/basic-layouts/src/interface.ts @@ -35,7 +35,18 @@ export interface RouterMenu { parentId?: string; } +export enum LayoutModel { + SLIDER = 'slider', + TOPLEFT = 'topleft', + MIX = 'mix', +} + export interface BasicLayoutsProps { + /** + * layout 的菜单模式 + * @default MIX + * */ + layout?: LayoutModel; /** * 项目logo */ diff --git a/packages/basic-layouts/src/react-app-env.d.ts b/packages/basic-layouts/src/react-app-env.d.ts index 5effa8976..1f42c7eb3 100644 --- a/packages/basic-layouts/src/react-app-env.d.ts +++ b/packages/basic-layouts/src/react-app-env.d.ts @@ -1,5 +1,3 @@ -declare var ANTD_MENU_TOP_LEFT: boolean | undefined; -declare var ANTD_MENU_SLIDER: boolean | undefined; declare var ANTD_AUTH_CONF: boolean | undefined; declare var ANTD_HEAD_IS_SHOW: boolean | undefined; declare var ANTD_MENU_IS_SHOW: boolean | undefined; diff --git a/packages/config/README.md b/packages/config/README.md index cb9a9ceac..d8939b260 100644 --- a/packages/config/README.md +++ b/packages/config/README.md @@ -150,22 +150,6 @@ export default config(router, { ); ``` -### ANTD_MENU_TOP_LEFT - -父级菜单展示顶部 ，子集菜单展示侧边，默认值`false`不显示 - -```diff -import config from '@antdp/config'; -import proxy from './proxy'; -import router from './router.json'; -export default config(router, { - proxy, - define: { -+ ANTD_MENU_TOP_LEFT: true - }, -); -``` - ### ANTD_MENU_SEARCH_IS_SHOW 是否开启菜单栏搜索，默认值`false` diff --git a/packages/config/src/index.ts b/packages/config/src/index.ts index 0c78d01f8..03d18bfc9 100644 --- a/packages/config/src/index.ts +++ b/packages/config/src/index.ts @@ -82,10 +82,6 @@ export default (routes: IRoute[] = [], options: OptionsProps = {}) => { ANTD_MENU_IS_SHOW: true, /** 是否显示 head头部 */ ANTD_HEAD_IS_SHOW: true, - /** 父级菜单展示顶部 ，子集菜单展示侧边 */ - ANTD_MENU_TOP_LEFT: false, - /** 菜单侧边展示 */ - ANTD_MENU_SLIDER: false, /** 是否开启菜单栏搜索 */ ANTD_MENU_SEARCH_IS_SHOW: false, ...(options.define || {}),