feat(app): 添加电子木鱼页面和导航栏

- 新增电子木鱼页面组件，包含点击动画效果
- 实现导航栏组件，支持路由切换高亮显示
- 更新App.js引入新的页面和导航组件
- 修改DatetimeToTimestamp组件样式布局
- 替换原navbar样式为新的nav导航样式
- 添加NavLink实现路由链接激活状态样式

src/App.css

@@ -7,12 +7,33 @@
     height: 100vh;
 }
 
-.navbar {
+.nav {
-    background: #2196f3;
+    height: 48px;
-    color: white;
+    border-bottom: 1px solid #e5e5e5;
-    padding: 15px;
+    display: flex;
-    border-radius: 4px;
+    align-items: center;
-    margin-bottom: 20px;
+    padding: 0 16px;
+}
+
+.nav-list {
+    list-style: none;
+    display: flex;
+    gap: 16px;
+    padding: 0;
+    margin: 0;
+}
+
+.nav-link {
+    text-decoration: none;
+    color: #666;
+    font-size: 14px;
+}
+
+.nav-link.active {
+    color: #1677ff;
+    font-weight: 600;
+    border-bottom: 2px solid #1677ff;
+    padding-bottom: 4px;
 }
 
 .page {

src/App.js

@@ -1,18 +1,26 @@
-import {HashRouter as Router, Routes, Route} from 'react-router-dom';
+import {HashRouter as Router, Routes, Route, NavLink} from 'react-router-dom';
 import TimestampPage from './pages/TimestampPage';
+import ElectronicWoodenFishPage from "./pages/ElectronicWoodenFishPage";
 import './App.css';
 
 function App() {
-  return (
+  return (<Router>
-    <Router>
+    
-      <div className="app">
+    <div className="app">
-        <Routes>
+      <nav className="nav">
-          <Route path="/" element={<TimestampPage/>}/>
+        <ul className="nav-list">
-          <Route path="/timestamp" element={<TimestampPage/>}/>
+          <li><NavLink to="/" className={({isActive}) => isActive ? "nav-link active" : "nav-link"}>Timestamp</NavLink></li>
-        </Routes>
+          <li><NavLink to="/dzmy" className={({isActive}) => isActive ? "nav-link active" : "nav-link"}>电子木鱼</NavLink></li>
-      </div>
+        </ul>
-    </Router>
+      </nav>
-  );
+      
+      <Routes>
+        <Route path="/" element={<TimestampPage/>}/>
+        <Route path="/timestamp" element={<TimestampPage/>}/>
+        <Route path="/dzmy" element={<ElectronicWoodenFishPage/>}/>
+      </Routes>
+    </div>
+  </Router>);
 }
 
 export default App;

src/components/DatetimeToTimestamp.js

@@ -16,11 +16,12 @@ export function DatetimeToTimestamp() {
   return (<div>
     <h2>日期时间转时间戳</h2>
     <div>
-      <div>
+      <div style={{display: 'flex', gap: '8px', alignItems: 'center'}}>
         <input
           type="text"
           placeholder="输入日期时间"
           value={dateValue}
+          style={{minWidth: '200px'}}
           onChange={(e) => setDateValue(e.target.value)}/>
         <select
           value={selectedZone}
@@ -39,11 +40,12 @@ export function DatetimeToTimestamp() {
         </button>
       </div>
       
-      <div>
+      <div style={{display: 'flex', gap: '8px', alignItems: 'center'}}>
         <input
           type="text"
           placeholder="转换结果"
           value={result}
+          style={{minWidth: '200px'}}
           readOnly
         />
         <select
@@ -56,5 +58,6 @@ export function DatetimeToTimestamp() {
         </select>
       </div>
     </div>
-  </div>)
+  </div>);
+  
 }

src/pages/ElectronicWoodenFishPage.js

@@ -0,0 +1,32 @@
+import dzmyImg from '../assets/images/dzmy.png';
+import {useState} from "react";
+
+const ElectronicWoodenFishPage = () => {
+  const [active, setActive] = useState(false);
+  
+  const clickAnimation = () => {
+    setActive(true);
+    setTimeout(() => {
+      setActive(false);
+    }, 120);
+  };
+  
+  return (<div>
+    电子木鱼
+    <img
+      alt={'电子木鱼'}
+      src={dzmyImg}
+      style={{
+        backgroundColor: 'black',
+        width: '80%',
+        height: '80%',
+        cursor: 'pointer',
+        transition: 'transform 0.12s ease',
+        transform: active ? 'scale(0.92)' : 'scale(1)',
+      }}
+      onClick={clickAnimation}
+    />
+  </div>);
+};
+
+export default ElectronicWoodenFishPage;