|
@@ -1,7 +1,9 @@
|
|
|
-import React, { useEffect } from 'react';
|
|
|
+import React, { useEffect, useState } from 'react';
|
|
|
import styles from './index.less';
|
|
|
|
|
|
-import { useModel, history } from 'umi';
|
|
|
+import { useModel, history, useLocation } from 'umi';
|
|
|
+import useMenuList, { menutype } from '@/hooks/useMenuList';
|
|
|
+import cx from 'classnames';
|
|
|
|
|
|
type PageHeaderProps = {
|
|
|
title: React.ReactNode;
|
|
@@ -10,20 +12,49 @@ type PageHeaderProps = {
|
|
|
const PageHeader: React.FC<PageHeaderProps> = ({ title, action }) => {
|
|
|
//console.log('PageHeader');
|
|
|
|
|
|
+ const { menuList } = useMenuList();
|
|
|
+ const [pathId, setPathId] = useState<string>('');
|
|
|
+ const location = useLocation();
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
- //debugger
|
|
|
const unlisten = history.listen((location, action) => {
|
|
|
- console.log('location,action', location, action);
|
|
|
+ //debugger;
|
|
|
});
|
|
|
+ //debugger;
|
|
|
+ var pathName = location.pathname;
|
|
|
+ pathName = pathName.replace(/\//g, '');
|
|
|
+ pathName = pathName.toLowerCase();
|
|
|
+ console.log('location,action', pathName, location.pathname);
|
|
|
+ setPathId(pathName);
|
|
|
return () => {
|
|
|
- //console.log('un--PageHeader--useEffect');
|
|
|
+ //debugger;
|
|
|
unlisten();
|
|
|
};
|
|
|
- }, []);
|
|
|
+ }, [location]);
|
|
|
+
|
|
|
+ const menuClick = (item: menutype) => {
|
|
|
+ if (item.id == pathId) return;
|
|
|
+ history.push(`/${item.id}`);
|
|
|
+ };
|
|
|
+
|
|
|
return (
|
|
|
<>
|
|
|
<div className={styles.navHeader}>
|
|
|
- <div className={styles.title}>{title}</div>
|
|
|
+ <div className={styles.menuDiv}>
|
|
|
+ {(menuList || []).map((item, index) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ className={cx(styles.ntitle, { [styles.selTitle]: item.id == pathId })}
|
|
|
+ key={index + 'nav'}
|
|
|
+ onClick={() => {
|
|
|
+ menuClick(item);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {item.name}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
{action}
|
|
|
</div>
|
|
|
</>
|