Merge pull request #150 from guanweiwang/main

feat: add a webshell link
chaitin · Aug 15, 2024 · 280db4e · 280db4e
2 parents 9f5dd70 + 6f10f3b
commit 280db4e
Showing 1 changed file with 79 additions and 5 deletions.
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,12 +1,32 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { Box, AppBar, Stack, Link, Button } from '@mui/material';
+import {
+  Box,
+  AppBar,
+  Stack,
+  Link,
+  Button,
+  Menu,
+  MenuItem,
+} from '@mui/material';
 import logoSvg from '@/asset/img/logo.svg';
 import Image from 'next/image';
-
+import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
 import Search from './search';
 
+const MENU = [
+  {
+    title: 'WebShell 检测',
+    href: '/webShell',
+  },
+  {
+    title: '其他工具',
+    href: '/tools',
+    target: '_blank',
+  },
+];
+
 const NAV_LINK = [
   {
     title: '行业百科',
@@ -20,16 +40,17 @@ const NAV_LINK = [
     title: '在线工具',
     href: '/tools',
     target: '_blank',
+    type: 'menu',
   },
   {
     title: '漏洞情报',
     href: '/vuldb',
   },
 ];
-
 const Header = () => {
   const [user, setUser] = useState<any>(null);
-
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
   useEffect(() => {
     fetch('/api/v1/user/profile', {
       credentials: 'include',
@@ -73,12 +94,24 @@ const Header = () => {
                 component={Link}
                 color='#999'
                 underline='none'
+                onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                  if (item.type === 'menu') {
+                    setAnchorEl(e.currentTarget);
+                  }
+                }}
                 onClick={(e) => {
                   e.preventDefault();
-                  window.open(item.href, '_self');
+                  if (item.type === 'menu') {
+                    return;
+                  } else {
+                    window.open(item.href, '_self');
+                  }
                 }}
                 sx={{
+                  display: 'flex',
+                  alignItems: 'center',
                   fontSize: '16px',
+                  gap: 0.5,
                   color: '#041B0F',
                   fontWeight: 700,
                   '&:hover': {
@@ -87,11 +120,52 @@ const Header = () => {
                 }}
               >
                 {item.title}
+                {item.type === 'menu' && (
+                  <PlayArrowRoundedIcon
+                    sx={{
+                      transform: 'rotate(90deg)',
+                      color: '#041B0F',
+                      mt: '-2px',
+                      fontSize: 18,
+                    }}
+                  />
+                )}
               </Box>
             ))}
           </Stack>
         </Stack>
 
+        <Menu
+          anchorEl={anchorEl}
+          open={open}
+          onClose={() => {
+            setAnchorEl(null);
+          }}
+          PaperProps={{
+            sx: { mt: 1.5 },
+          }}
+        >
+          {MENU.map((item) => (
+            <MenuItem
+              component={Link}
+              key={item.title}
+              sx={{
+                width: '180px',
+                fontSize: '14px',
+                '&:hover': {
+                  color: 'primary.main',
+                },
+              }}
+              onClick={() => {
+                setAnchorEl(null);
+                window.open(item.href);
+              }}
+            >
+              {item.title}
+            </MenuItem>
+          ))}
+        </Menu>
+
         <Stack
           direction='row'
           sx={{ position: 'absolute', top: 0, bottom: 0, right: 0 }}