feat: 添加导航栏组件，优化路由持久化逻辑，更新存储工具类

entrypoints/popup/App.tsx

@@ -1,9 +1,12 @@
-import { HashRouter as Router, Routes, Route, NavLink } from 'react-router-dom';
-import { useState, useEffect } from 'react';
+// App.js
+import { HashRouter as Router, Routes, Route } from 'react-router-dom';
 import TimestampPage from './pages/TimestampPage';
 import RecordeReplayPage from './pages/RecordeReplayPage';
+import Navbar from './components/Navbar';
+import RoutePersistence from './components/RoutePersistence';
 import './App.css';
 
+// 路由配置数据
 const navItems = [
   { path: '/', label: '时间戳', element: <TimestampPage /> },
   // {path: '/dzmy', label: '电子木鱼', element: <ElectronicWoodenFishPage/>},
@@ -11,86 +14,11 @@ const navItems = [
 ];
 
 function App() {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
-  const [visibleItems, setVisibleItems] = useState(navItems.length);
-
-  // 检测屏幕尺寸变化
-  useEffect(() => {
-    const handleResize = () => {
-      const width = window.innerWidth;
-      setIsMobile(width < 768);
-
-      // 根据屏幕宽度决定显示多少个导航项
-      if (width >= 768) {
-        setVisibleItems(navItems.length); // 大屏幕显示所有
-      } else if (width >= 480) {
-        // 中等屏幕：如果导航项超过3个，显示3个，否则显示全部
-        setVisibleItems(Math.min(3, navItems.length));
-      } else {
-        // 小屏幕：如果导航项超过2个，显示2个，否则显示全部
-        setVisibleItems(Math.min(2, navItems.length));
-      }
-    };
-
-    handleResize(); // 初始调用
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  // 计算哪些导航项应该显示，哪些应该折叠
-  const visibleNavItems = navItems.slice(0, visibleItems);
-  const collapsedNavItems = navItems.slice(visibleItems);
-
   return (
     <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+      <RoutePersistence />
       <div className="app">
-        <nav className="nav">
-          <div className="nav-content">
-            <ul className={`nav-list ${isMenuOpen ? 'open' : ''}`}>
-              {visibleNavItems.map((item) => (
-                <li key={item.path}>
-                  <NavLink
-                    to={item.path}
-                    className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')}
-                    onClick={() => isMobile && setIsMenuOpen(false)}
-                  >
-                    {item.label}
-                  </NavLink>
-                </li>
-              ))}
-
-              {/* 折叠的导航项 */}
-              {collapsedNavItems.length > 0 && (
-                <li className="nav-collapse-item">
-                  <div className={`nav-collapse-content ${isMenuOpen ? 'show' : ''}`}>
-                    {isMenuOpen &&
-                      collapsedNavItems.map((item) => (
-                        <NavLink
-                          key={item.path}
-                          to={item.path}
-                          className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')}
-                          onClick={() => setIsMenuOpen(false)}
-                        >
-                          {item.label}
-                        </NavLink>
-                      ))}
-                  </div>
-                  <button
-                    className="nav-toggle"
-                    onClick={() => setIsMenuOpen(!isMenuOpen)}
-                    aria-label={isMenuOpen ? '收起菜单' : '展开菜单'}
-                  >
-                    <span className="nav-toggle-icon">{isMenuOpen ? '×' : '☰'}</span>
-                    {collapsedNavItems.length > 0 && !isMenuOpen && (
-                      <span className="nav-collapse-count">+{collapsedNavItems.length}</span>
-                    )}
-                  </button>
-                </li>
-              )}
-            </ul>
-          </div>
-        </nav>
+        <Navbar items={navItems} />
 
         <Routes>
           {navItems.map((item) => (