Bläddra i källkod

菜单移动位置

zhaojijng 2 år sedan
förälder
incheckning
212e32106d
3 ändrade filer med 60 tillägg och 12 borttagningar
  1. 6 1
      src/layouts/index.jsx
  2. 16 4
      src/sgcomponents/PageHeader/index.less
  3. 38 7
      src/sgcomponents/PageHeader/index.tsx

+ 6 - 1
src/layouts/index.jsx

@@ -90,6 +90,11 @@ export default (props) => {
     };
   }, []);
 
+  const location = useLocation();
+  useEffect(() => {
+    //debugger;
+    console.log('location', location);
+  }, [location]);
   return (
     <div className={styles.layout}>
       <div className={styles.header}>
@@ -107,7 +112,7 @@ export default (props) => {
           >
             <Icon className={styles.notify} type="notify" style={{ fontSize: 21 }}></Icon>
           </div>
-          <MenuFoldOutlined style={{ fontSize: 24 }} onClick={showMenuClick} />
+          <MenuFoldOutlined style={{ fontSize: 24, display: 'none' }} onClick={showMenuClick} />
         </div>
       </div>
 

+ 16 - 4
src/sgcomponents/PageHeader/index.less

@@ -3,16 +3,28 @@
   align-items: center;
   justify-content: space-between;
   height: 50px;
-  .title {
-    color: #000;
+  .menuDiv {
+    display: flex;
+  }
+  .ntitle {
+    margin-right: 6px;
+    color: #ccc;
     font-weight: 600;
     font-size: 24px;
+    cursor: pointer;
     &::before {
-      margin-right: 10px;
-      color: #f0da21;
+      margin-right: 6px;
+      color: #ccc;
       font-weight: normal;
       font-size: 32px;
       content: '/';
     }
   }
+  .selTitle {
+    color: #000;
+    cursor: default;
+    &::before {
+      color: #f0da21;
+    }
+  }
 }

+ 38 - 7
src/sgcomponents/PageHeader/index.tsx

@@ -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>
     </>