fix: 处理冲突

antdpro · Jun 9, 2023 · 9c52038 · 9c52038
2 parents fe7ec86 + 8341fb8
commit 9c52038
Show file tree

Hide file tree

Showing 16 changed files with 90 additions and 69 deletions.
diff --git 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
@@ -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
@@ -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={<UnorderedListOutlined />}
       >
-        <FloatButton
-          description={dark ? 'light' : 'dark'}
-          onClick={() => setDark(!dark)}
-        />
+        <FloatButton description={dark ? 'light' : 'dark'} onClick={() => setDark(!dark)} />
       </FloatButton.Group>
       <BasicLayouts
+        layout="slider"
         theme={dark ? 'dark' : 'light'}
         className="antdp-basic-layouts"
         projectName="Ant Design"
         profile={{
           name: '埋名',
-          avatar:
-            'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
+          avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
         }}
         siderWidth={208}
         logo={logo}

diff --git a/packages/authorized/src/react-app-env.d.ts b/packages/authorized/src/react-app-env.d.ts
@@ -1,4 +1,3 @@
-declare var ANTD_MENU_TOP_LEFT: 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/basic-layouts/README.md b/packages/basic-layouts/README.md
@@ -29,6 +29,24 @@ const Demo = () => {
 export default Demo
 ```
 
+## 导航菜单模式
+
+```jsx
+import React from 'react';
+import BasicLayout from '@antdp/basic-layouts';
+const Demo = (props) => {
+  return (
+    <BasicLayout
+      {...props}
+      layout="slider"
+    />
+  )
+};
+
+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` |
+| onClick | 点击事件 | `IntlShape` |
diff --git 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 = <Link to={item.path} >{item.name}</Link>
         }
         return { title: child, key: index }
       })
     )
-  }, [location.pathname])
+  }, [location.pathname, layout])
+
   return (
     <Breadcrumb className="antdp-basic-layouts-header-breadcrumb" items={breadcrumbMenu} />
   )
 }
-export default Breadcrumbs
+export default Breadcrumbs
diff --git 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 (
     <div className="antdp-basic-layouts-header-body">
-      {!ANTD_MENU_SLIDER && <Logo />}
+      {layout !== LayoutModel.SLIDER && <Logo />}
       <HeaderMenus />
       <TopRight />
     </div>

diff --git 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
@@ -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 && <h1>{projectName}</h1>;
-  }, [projectName,collapsed]);
+  }, [projectName, collapsed, layout]);
 
   return useMemo(
     () => (
       <div
-        style={{ width: (!!ANTD_MENU_SLIDER && collapsed) ? 80 : siderWidth }}
-        className={`antdp-global-title antdp-global-title-top ${
-          (!!ANTD_MENU_SLIDER && 'antdp-global-title-left') || ''
-        }`}
+        style={{ width: (layout === LayoutModel.SLIDER && collapsed) ? 80 : siderWidth }}
+        className={`antdp-global-title antdp-global-title-top ${(layout === LayoutModel.SLIDER && 'antdp-global-title-left') || ''
+          }`}
       >
         <Link to={logoJumpTo}>
           {logoRender}

diff --git 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 <React.Fragment />;
   }
+
   return (
     <Layout.Sider
       className="antdp-basic-layouts-sider"
@@ -53,7 +56,7 @@ const Sider = (props: SiderProps) => {
         <div className="antdp-basic-layouts-collapsed">{collapsedView}</div>
       }
     >
-      {!!ANTD_MENU_SLIDER && (
+      {layout === LayoutModel.SLIDER && (
         <div>
           <Logo />
         </div>

diff --git 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<LayoutsContextType>({
   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<DocumentTitle>(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
@@ -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 (
         <React.Fragment>
           {ANTD_HEAD_IS_SHOW && (
@@ -44,7 +47,7 @@ const BasicLayouts = (props: BasicLayoutsProps) => {
           </Layout>
         </React.Fragment>
       );
-    } else if (!!ANTD_MENU_SLIDER) {
+    } else if (layout === LayoutModel.SLIDER) {
       return (
         <React.Fragment>
           {ANTD_MENU_IS_SHOW && <SiderMenus theme={theme} />}
@@ -83,7 +86,8 @@ const BasicLayouts = (props: BasicLayoutsProps) => {
         </React.Fragment>
       );
     }
-  }, [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 (
     <AuthorizedConfigProvider {...newData}>
       <LayoutsProvider {...props}>

diff --git 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
@@ -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;