feat: 添加内置回放界面和错误修复

components/Navbar.tsx

@@ -1,17 +1,11 @@
 import { NavLink, useLocation } from 'react-router-dom';
-import { useState, ReactNode, MouseEvent } from 'react';
+import { ReactNode } from 'react';
 import {
   AppBar,
-  Box,
-  IconButton,
-  Menu,
-  MenuItem,
   Tab,
   Tabs,
   Toolbar,
-  useMediaQuery,
 } from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
 
 interface RouteItem {
   path: string;
@@ -24,40 +18,11 @@ interface NavbarProps {
 }
 
 function Navbar({ items = [] }: NavbarProps) {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const isMenuOpen = Boolean(anchorEl);
   const location = useLocation();
 
-  // Replicating the screen size logic from original component
-  const isLargeScreen = useMediaQuery('(min-width:768px)');
-  const isMediumScreen = useMediaQuery('(min-width:480px)');
-
-  let visibleItemsCount: number;
-  if (isLargeScreen) {
-    visibleItemsCount = items.length;
-  } else if (isMediumScreen) {
-    visibleItemsCount = Math.min(3, items.length);
-  } else {
-    // Small screen
-    visibleItemsCount = Math.min(2, items.length);
-  }
-
-  const visibleNavItems = items.slice(0, visibleItemsCount);
-  const collapsedNavItems = items.slice(visibleItemsCount);
-
-  const handleMenuOpen = (event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleMenuClose = () => {
-    setAnchorEl(null);
-  };
-
-  // Find the current active tab index for the Tabs value
-  // Using startsWith to handle nested routes correctly.
-  const activeTabIndex = visibleNavItems.findIndex((item) =>
-    location.pathname.startsWith(item.path),
-  );
+  // Chrome 扩展 popup 固定尺寸，全部显示在滚动标签中
+  // 精确匹配路由
+  const activeTabIndex = items.findIndex((item) => location.pathname === item.path);
 
   return (
     <AppBar
@@ -68,49 +33,26 @@ function Navbar({ items = [] }: NavbarProps) {
     >
       <Toolbar sx={{ justifyContent: 'center', position: 'relative' }}>
         <Tabs
-          value={activeTabIndex === -1 ? false : activeTabIndex}
+          value={activeTabIndex === -1 ? 0 : activeTabIndex}
           variant="scrollable"
           scrollButtons="auto"
           allowScrollButtonsMobile
           aria-label="navigation tabs"
+          sx={{ minHeight: 48 }}
         >
-          {visibleNavItems.map((item) => (
-            <Tab key={item.path} label={item.label} component={NavLink} to={item.path} />
+          {items.map((item) => (
+            <Tab
+              key={item.path}
+              label={item.label}
+              component={NavLink}
+              to={item.path}
+              sx={{
+                minWidth: 80,
+                fontSize: '0.875rem',
+              }}
+            />
           ))}
         </Tabs>
-
-        {collapsedNavItems.length > 0 && (
-          <Box sx={{ position: 'absolute', right: 8 }}>
-            <IconButton color="inherit" aria-label="open menu" edge="end" onClick={handleMenuOpen}>
-              <MenuIcon />
-            </IconButton>
-            <Menu
-              anchorEl={anchorEl}
-              open={isMenuOpen}
-              onClose={handleMenuClose}
-              slotProps={{
-                paper: {
-                  style: {
-                    maxHeight: 48 * 4.5,
-                    width: '20ch',
-                  },
-                },
-              }}
-            >
-              {collapsedNavItems.map((item) => (
-                <MenuItem
-                  key={item.path}
-                  component={NavLink}
-                  to={item.path}
-                  onClick={handleMenuClose}
-                  selected={location.pathname.startsWith(item.path)}
-                >
-                  {item.label}
-                </MenuItem>
-              ))}
-            </Menu>
-          </Box>
-        )}
       </Toolbar>
     </AppBar>
   );