顶部导航

package.json

@@ -9,6 +9,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.4",
+    "@mui/styles": "^5.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.16.4",
@@ -28,6 +29,7 @@
     "browserslist": "^4.18.1",
     "camelcase": "^6.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "classnames": "^2.3.1",
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.2.0",
     "dotenv": "^10.0.0",

src/api/api_manager.ts

 import { BACKEND_API_URI_PREFIX } from './api_prefix'
 
 const RESTAPI = {
-
-    API_USER_FETCH: `${BACKEND_API_URI_PREFIX}/accounts/current`,
-
-
-
+    API_USER_FETCH: `${BACKEND_API_URI_PREFIX}/accounts/current`,//获取账户信息
+    API_PROJECT_LIST: `${BACKEND_API_URI_PREFIX}/cpp/project/list`,//获取产品列表
 }
 
 export default RESTAPI
\ No newline at end of file

src/api/demo_api.ts

@@ -15,4 +15,12 @@ function menu() {
   });
 }
 
-export { current, menu };
+function product() {
+  return request({
+    url: Api.API_PROJECT_LIST + "?name=",
+    method: "get",
+
+  });
+}
+
+export { current, menu, product };

src/assets/img/logo.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="119px" height="27px" viewBox="0 0 119 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>北鲲云logo_</title>
+    <defs>
+        <polygon id="path-1" points="0 0 48.1108878 0 48.1108878 15.686238 0 15.686238"></polygon>
+    </defs>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="项目数据" transform="translate(-22.000000, -126.000000)">
+            <g id="北鲲云logo_" transform="translate(22.000000, 126.000000)">
+                <path d="M39.4160116,16.129697 C39.4160116,16.129697 35.8617144,13.8283505 33.4579761,12.2907723 C28.9557704,9.40936365 23.6308733,7.1439019 18.3225279,8.06213677 C26.4412077,9.70205286 31.7163057,16.3593295 33.7815258,18.3160056 L39.4160116,16.129697 Z" id="Fill-1" fill="#00CCCC"></path>
+                <g id="编组" transform="translate(14.396480, 11.313762)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="Clip-4"></g>
+                    <path d="M48.0952038,2.94059755 C47.9699866,1.52219197 42.7661328,-0.875142368 34.133199,0.326625947 C22.1729422,1.99090819 16.0112489,8.31030749 0,6.18735083 C1.95554711,7.54284743 4.32848486,8.9664216 7.15004559,10.3960504 C19.48984,16.6470768 31.0858156,17.1005826 39.1217368,13.1107354 C47.1700358,9.11409527 48.2650386,4.87054473 48.0952038,2.94059755" id="Fill-3" fill="#0066FF" mask="url(#mask-2)"></path>
+                </g>
+                <path d="M62.4671581,14.1301955 C61.7737139,18.9901359 51.2048072,18.696856 40.3666116,9.85976834 C32.7395892,3.64093481 23.2271126,-1.58789445 14.4590306,0.446310336 C25.6419334,2.01593376 32.3365914,9.37082082 38.7199335,14.9810912 C46.2154059,21.5668938 53.9951356,24.1833758 59.460938,20.439553 C60.4101419,19.6080025 62.9146296,16.8747106 62.4671581,14.1301955" id="Fill-5" fill="#00CCCC"></path>
+                <path d="M7.09564087,13.7262489 C4.47658657,12.8839183 3.05976124,13.7402779 0.197468951,13.2445374 C4.61835546,15.7899884 9.81846712,16.953657 14.3965228,17.5010832 C15.7251204,17.6613092 17.2485962,18.0390584 19.2958253,17.911173 C17.9112398,17.7583308 16.4329573,17.0332531 14.4588435,15.2970537 C11.4244136,12.6275568 6.81541343,8.7833159 0,8.16869809 C3.95369685,9.94698441 4.97615999,12.1334407 7.09564087,13.7262489" id="Fill-7" fill="#0066FF"></path>
+                <polygon id="Fill-9" fill="#383838" points="71.061145 15.6809167 66.4009066 15.6809167 66.4009066 17.4498996 71.061145 17.4498996 71.061145 21.6295074 66.4022019 23.8370811 66.4022019 25.9291739 71.061145 23.7202712 71.061145 26.5542766 72.9264494 26.5542766 72.9264494 10.7614638 71.061145 10.7614638"></polygon>
+                <path d="M77.0271253,18.7894179 C78.638541,18.152206 80.3829461,17.3311404 81.6354058,16.5226271 L81.6354058,14.4321586 C80.2424725,15.2641521 78.6894915,16.0248191 77.0271253,16.6874309 L77.0271253,10.7612865 L75.1593742,10.7612865 L75.1593742,24.7223552 C75.1593742,26.0394566 75.6313134,26.5543947 77.0271253,26.5543947 L81.312,26.5543947 L81.9457142,24.7864455 L77.0271253,24.7864455 L77.0271253,18.7894179 Z" id="Fill-11" fill="#383838"></path>
+                <path d="M119,18.2076574 L119,16.4386746 L103.455797,16.4386746 L103.455797,18.2076574 L107.60394,18.2076574 L104.584623,24.7863717 C104.158308,25.712581 104.774463,26.5233094 105.825568,26.5233094 L110.452271,26.5233094 L112.186458,26.5233094 L116.818198,26.5233094 C117.866137,26.5233094 118.480996,25.712581 118.055978,24.7863717 L116.119141,20.5657106 L114.011606,20.5657106 L115.947723,24.7863717 L112.186458,24.7863717 L110.452271,24.7863717 L106.693453,24.7863717 L109.712051,18.2076574 L119,18.2076574 Z" id="Fill-13" fill="#383838"></path>
+                <polygon id="Fill-15" fill="#383838" points="105.226296 13.0111687 117.227284 13.0111687 117.227284 11.2430719 105.226296 11.2430719"></polygon>
+                <polygon id="Fill-17" fill="#383838" points="84.9240411 26.5543947 91.756438 25.2734733 91.756438 23.6560036 84.9240411 24.9375157"></polygon>
+                <path d="M85.4223047,21.8090786 L85.4223047,23.1721065 L86.8565453,23.1721065 L87.7559502,23.1721065 L89.1582388,23.1721065 L91.5228288,23.1721065 L91.5228288,22.2983214 L91.5228288,21.8090786 L91.5228288,16.9229999 C91.5228288,15.9544083 91.1781217,15.5771021 90.1524921,15.5771021 L90.0053979,15.5771021 C90.5071302,14.5320155 91.0382238,13.1189262 91.0382238,12.6321938 C91.0382238,12.1339428 90.9124309,12.011669 90.3514003,12.011669 L88.0882795,12.011669 C88.1976646,11.597149 88.2833017,11.1795279 88.3218743,10.7611684 L86.7638558,10.7611684 C86.472402,12.2972699 86.0371643,13.4113201 84.8300418,14.7759724 L84.8300418,16.7469729 C85.039025,16.5895528 85.2320322,16.4222385 85.4223047,16.2546289 L85.4223047,21.8090786 Z M86.8565453,18.7082269 L87.7556623,18.7082269 L87.7556623,16.94013 L86.8565453,16.94013 L86.8565453,18.7082269 Z M86.8565453,21.8090786 L87.7556623,21.8090786 L87.7556623,20.0408341 L86.8565453,20.0408341 L86.8565453,21.8090786 Z M89.1582388,21.8090786 L90.0898835,21.8090786 L90.0898835,20.0408341 L89.1582388,20.0408341 L89.1582388,21.8090786 Z M89.1582388,18.7082269 L90.0898835,18.7082269 L90.0898835,16.94013 L89.1582388,16.94013 L89.1582388,18.7082269 Z M87.5797826,13.4073329 L89.4175967,13.4073329 C89.1968115,14.0652191 88.9093876,14.7452563 88.4394634,15.5771021 L87.7559502,15.5771021 L86.8565453,15.5771021 L86.3920903,15.5771021 L86.1148854,15.5771021 C86.7294571,14.9084357 87.2169406,14.1749406 87.5797826,13.4073329 L87.5797826,13.4073329 Z" id="Fill-18" fill="#383838"></path>
+                <path d="M100.016915,17.9521229 L100.016915,17.0775995 L100.016915,16.5896857 L100.016915,12.4161324 C100.016915,11.4485746 99.672784,11.07053 98.6462909,11.07053 L93.7327395,11.07053 L93.2675648,11.07053 L92.2987867,11.07053 L92.2987867,16.5896857 L92.2987867,17.9521229 L93.7327395,17.9521229 L100.016915,17.9521229 Z M93.7327395,13.8296648 L98.5844019,13.8296648 L98.5844019,12.4332626 L93.7327395,12.4332626 L93.7327395,13.8296648 Z M93.7327395,16.5896857 L98.5844019,16.5896857 L98.5844019,15.1929881 L93.7327395,15.1929881 L93.7327395,16.5896857 Z" id="Fill-19" fill="#383838"></path>
+                <polygon id="Fill-20" fill="#383838" points="93.7327971 22.1619743 96.2745621 22.1619743 96.2745621 20.7989464 93.7327971 20.7989464 93.7327971 18.7250174 92.2988443 18.7250174 92.2988443 20.7989464 92.2988443 22.1619743 92.2988443 25.191352 92.2988443 26.5543799 93.7327971 26.5543799 96.0143407 26.5543799 96.5008166 25.191352 93.7327971 25.191352"></polygon>
+                <path d="M98.2526771,22.4462166 C99.1657551,22.1132125 99.9252622,21.7852293 100.735432,21.3871011 L100.735432,19.9441817 C99.9100058,20.3545668 99.1425827,20.6785628 98.2526771,21.0013774 L98.2526771,18.7251355 L96.8180047,18.7251355 L96.8180047,25.2083049 C96.8180047,26.1780779 97.1634315,26.5542027 98.1902124,26.5542027 L100.546023,26.5542027 L101.020553,25.1914701 L98.2526771,25.1914701 L98.2526771,22.4462166 Z" id="Fill-21" fill="#383838"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/MyRouter/useMyRouter.ts

 import { useStores } from "@/store/index";
 import { elements } from "@/router";
-import { current, menu } from "@/api/demo_api";
+import { current, menu, product } from "@/api/demo_api";
 import localStorageKey from "@/utils/localStorageKey";
 import NotFound from "@/views/404";
 import useMyRequest from "@/hooks/useMyRequest";
@@ -10,14 +10,20 @@ const useMyRouter = () => {
   const { permissionStore, menuStore } = useStores();
   const userInfo = useMyRequest(current);
   const menuInfo = useMyRequest(menu);
+  const productInfo = useMyRequest(product);
+
 
   useEffect(() => {
     userInfo.run();
     menuInfo.run();
+    productInfo.run()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
+
+
+
     if (userInfo.res && menuInfo.res) {
       localStorage.setItem(localStorageKey.USER_INFO, JSON.stringify(userInfo.res));
 
@@ -32,8 +38,15 @@ const useMyRouter = () => {
       menuStore.initMenu(menuInfo.res.data);
       permissionStore.initAllRoutes();
     }
+
+
+    if (productInfo.res) {
+      console.log(productInfo, '1111111111111')
+    }
+
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userInfo.data, menuInfo.data]);
+  }, [userInfo.data, menuInfo.data, productInfo.data]);
 
   return permissionStore.allRoutes;
 };

src/components/mui/Button.tsx

+import React, { FC } from "react";
+
+import { Typography, Menu, MenuItem, IconButton, Button } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import cx from "classnames"
+
+type ButtonTagProps = {
+    text: string;
+    variant?: "text" | 'contained' | 'outlined';
+    click: any;
+    select?: any[];
+    fontSize?: string;
+    dropValue?: boolean;
+    drop?: boolean;
+
+}
+
+const useStyles = makeStyles({
+    root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#ffffff  !important" } },
+    ArrowDropDownIconRoot: { color: "#8A9099", transition: "all 0.2s !important", transform: "rotate(0)" },
+    ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
+
+})
+
+const ButtonComponent = (props: ButtonTagProps) => {
+    const classes = useStyles();
+    const [anchorEl, setAnchorEl] = React.useState(null);
+
+    const handleClick = (event: { currentTarget: React.SetStateAction<null>; }) => setAnchorEl(event.currentTarget);
+    const defultClick = (event: { stoppropagation: () => any; }) => event && event.stoppropagation && event.stoppropagation()
+    const handleClose = () => setAnchorEl(null);
+
+    return (
+        <>
+            <Button
+                variant={props.variant || 'contained'}
+                disableRipple={true}
+                disableFocusRipple={true}
+                classes={{
+                    root: classes.root,
+                }}
+
+                sx={{ color: "#565C66" }}//暂定
+
+                onClick={props.select ? handleClick : (props.click || defultClick)}
+            >
+                <Typography style={{ fontSize: props.fontSize || "14px" }}>{props.text}</Typography>
+                {
+                    (props.select && props.select.length > 0 || props.drop) && <ArrowDropDownIcon classes={{
+                        root: cx({
+                            [classes.ArrowDropDownIconRoot]: true,
+                            [classes.ArrowDropDownIconRootOpen]: Boolean(props.dropValue || anchorEl)
+                        })
+                    }} />
+                }
+            </Button>
+            <Menu
+                id="product-menu"
+                keepMounted
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+                MenuListProps={{
+                    "aria-labelledby": "product-button",
+                }}
+            >
+                {
+                    props.select && props.select.length > 0 && props.select.map((item, key) => {
+                        return (
+                            <MenuItem
+                                key={item.path}
+
+
+                                onClick={() => {
+                                    // navigate(item.path);
+                                    handleClose();
+                                }}
+                            >
+                                {item.name}
+                            </MenuItem>
+                        );
+                    })}
+            </Menu>
+        </>
+
+
+    )
+
+
+}
+
+export default ButtonComponent;
\ No newline at end of file

src/hooks/useMyRequest.ts

@@ -53,7 +53,6 @@ const useMyRequest = <TData, TParams>(
     ...defaultOptions,
     onSuccess: () => {},
     onError: (data) => {
-      console.log('data: ', data);
       Message.error(data.message);
     },
     ...options,

src/store/modules/menu.ts

@@ -25,6 +25,7 @@ class Menus {
   }> = [];
 
   initMenu = (list: projectList) => {
+    console.log('list: ', list);
     this.productList = [];
     this.utilityList = [];
     for (let item of list) {

src/views/ConsoleLayout/index.module.css

 .topApp {
-  padding: 8px;
+  height: 56px;
   background-color: white;
-  border-bottom: #2c2c2c 1px solid;
+  border-bottom: #E6E8EB 1px solid;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
+
+.topLeftBox {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  padding: 0px 25px 0px 20px;
+  margin-top: -10px;
+}
+
+.topRightBox {
+  padding-right: 30px;
+}
+
+.ArrowDropDownIconRoot {
+  color: #8A9099;
+  transition: all 0.2s !important;
+  transform: rotate(0)
+}
+
+.ArrowDropDownIconRootOpen {
+  color: #8A9099;
+  transform: rotate(180deg)
+}
+
+.menuPaper {
+  border: 1px solid #F0F2F5;
+  background: #FFFFFF;
+  border-radius: 4px;
+  box-shadow: 4px 4px 20px 0px rgba(0, 24, 57, 0.06) !important;
+}
+
+.menuItemRoot {
+  width: 143px;
+  font-size: 14px !important;
+}
\ No newline at end of file

src/views/ConsoleLayout/index.tsx

-import { Box, Button, Menu, MenuItem, IconButton } from "@mui/material";
+import { Box, Menu, MenuItem, IconButton } from "@mui/material";
 import React, { useEffect } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import style from "./index.module.css";
@@ -7,6 +7,12 @@ import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import useIndex from "./useIndex";
 import { useStores } from "@/store/index";
 import { observer } from "mobx-react-lite";
+import Button from "@/components/mui/Button";
+import logo from '@/assets/img/logo.svg'
+import Avatar from '@mui/material/Avatar';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import cx from "classnames"
+
 
 const ConsoleLayout = observer(() => {
   const {
@@ -30,45 +36,75 @@ const ConsoleLayout = observer(() => {
   return (
     <Box>
       <Box className={style.topApp}>
-        <Box>
-          <Button onClick={() => navigate("/home")}>
-            {globalText.console}
-          </Button>
-          <Button id="product-button" onClick={handleProductClick}>
-            {globalText.product}
-          </Button>
-          <Menu
-            id="product-menu"
-            anchorEl={productAnchorEl}
-            open={productOpen}
-            onClose={handleClose}
-            MenuListProps={{
-              "aria-labelledby": "product-button",
-            }}
-          >
-            {menuStore.productList.map((item) => {
-              return (
-                <MenuItem
-                  key={item.path}
-                  onClick={() => {
-                    navigate(item.path);
-                    handleClose();
-                  }}
-                >
-                  {item.name}
-                </MenuItem>
-              );
-            })}
-          </Menu>
+        <Box className={style.topLeftBox}>
+
+          <img src={logo} alt="" className={style.logo} />
+
+          <Button text={globalText.console} variant={"text"} click={() => navigate("/home")} />
+
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Button text={globalText.product} variant={"text"} click={handleProductClick} dropValue={productOpen} drop={true} />
+
+            {/* <ArrowDropDownIcon classes={{
+              root: cx({
+                [style.ArrowDropDownIconRoot]: true,
+                [style.ArrowDropDownIconRootOpen]: Boolean(productOpen)
+              })
+            }} /> */}
+
+            <Menu
+              id="product-menu"
+              anchorEl={productAnchorEl}
+              open={productOpen}
+              onClose={handleClose}
+              classes={{
+                paper: style.menuPaper
+              }}
+              MenuListProps={{
+                "aria-labelledby": "product-button",
+              }}
+            >
+              {menuStore.productList.map((item) => {
+                return (
+                  <MenuItem
+                    key={item.path}
+
+                    classes={{
+                      root: style.menuItemRoot
+                    }}
+
+                    onClick={() => {
+                      navigate(item.path);
+                      handleClose();
+                    }}
+                  >
+                    {item.name}
+                  </MenuItem>
+                );
+              })}
+            </Menu>
+          </Box>
+
+
+
+
         </Box>
-        <Box>
-          <IconButton
-            id="utility-button"
-            color="primary"
-            onClick={handleUtilityClick}
-          >
-            <AccountCircleIcon></AccountCircleIcon>
-          </IconButton>
+
+        <Box className={style.topRightBox}>
+
+          <Box sx={{ display: 'flex', alignItems: 'center' }} onClick={handleUtilityClick}>
+            <Avatar
+              sx={{ bgcolor: "#1370FF", width: 28, height: 28, fontSize: "14px", cursor: 'pointer' }}
+            >H</Avatar>
+            <ArrowDropDownIcon classes={{
+              root: cx({
+                [style.ArrowDropDownIconRoot]: true,
+                [style.ArrowDropDownIconRootOpen]: Boolean(utilityOpen)
+              })
+            }} />
+          </Box>
+
+
           <Menu
             id="utility-menu"
             anchorEl={utilityAnchorEl}