commit 7ff51f268d792b6895ae813c10fa0297ba364eb8
author 22301009 <22301009@bjtu.edu.cn> Tue Apr 15 21:35:28 2025 +0800
committer 22301009 <22301009@bjtu.edu.cn> Tue Apr 15 21:35:28 2025 +0800
tree 89fda675a8e2667bf17c5a98838e8836b29188b7
parent bcedb11521961a4c5937d271bac9f9f4773449e6

优化个人中心样式

Change-Id: Ifee966f72ccff3cf74ceea3501d9bf477511f73d

src/App.js

diff --git a/src/App.js b/src/App.js
index 13c34db..8a6da3d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,7 @@
 import PublishSeed from './pages/PublishSeed/PublishSeed';
 import SeedDetail from './pages/SeedList/SeedDetail/SeedDetail'; 
 import InterestGroup from './pages/InterestGroup/InterestGroup';
+import UserProfile from './pages/UserCenter/UserProfile';
 
 function App() {
   return (
@@ -23,6 +24,7 @@
         <Route path="/publish-seed" component={PublishSeed} />
         <Route path="/seed/:seed_id" component={SeedDetail} /> {/* 新增路由 */}
         <Route path="/interest-groups" component={InterestGroup}/>
+        <Route path="/user/profile" component={UserProfile}/>
       </>
     </UserProvider>
   );

src/pages/UserCenter/UserNav/UserNav.css

diff --git a/src/pages/UserCenter/UserNav/UserNav.css b/src/pages/UserCenter/UserNav/UserNav.css
index e69de29..783fcdc 100644
--- a/src/pages/UserCenter/UserNav/UserNav.css
+++ b/src/pages/UserCenter/UserNav/UserNav.css
@@ -0,0 +1,43 @@
+/* 竖直导航栏的容器 */
+.user-nav-container {
+    width: 250px;
+    background-color: #f4f4f4;
+    padding-top: 20px;
+    border-right: 1px solid #ccc;
+    height: 100%; /* 让容器填充整个父容器高度 */
+    display: flex;
+    flex-direction: column;
+    align-items: stretch; /* 确保所有导航项都拉伸 */
+  }
+  
+  /* 导航栏样式 */
+  .user-nav {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    flex-grow: 1; /* 使导航栏占据剩余空间 */
+  }
+  
+  /* 每一项导航链接 */
+  .user-nav-item {
+    padding: 15px 20px;
+    text-align: left;
+    text-decoration: none;
+    color: #333;
+    font-size: 16px;
+    border-bottom: 1px solid #e0e0e0;
+    transition: background-color 0.3s ease;
+  }
+  
+  /* 鼠标悬浮时的背景颜色 */
+  .user-nav-item:hover {
+    background-color: #ddd;
+  }
+  
+  /* 激活项的样式 */
+  .user-nav-item.active {
+    background-color: #3b8cff;
+    color: white;
+  }
+  
\ No newline at end of file

src/pages/UserCenter/UserNav/UserNav.jsx

diff --git a/src/pages/UserCenter/UserNav/UserNav.jsx b/src/pages/UserCenter/UserNav/UserNav.jsx
index c4659d6..4bd76db 100644
--- a/src/pages/UserCenter/UserNav/UserNav.jsx
+++ b/src/pages/UserCenter/UserNav/UserNav.jsx
@@ -34,5 +34,4 @@
   );
 };
 
-export default UserNav;
-s
\ No newline at end of file
+export default UserNav;
\ No newline at end of file

src/pages/UserCenter/UserProfile.jsx

diff --git a/src/pages/UserCenter/UserProfile.jsx b/src/pages/UserCenter/UserProfile.jsx
index 475030b..ff9aeff 100644
--- a/src/pages/UserCenter/UserProfile.jsx
+++ b/src/pages/UserCenter/UserProfile.jsx
@@ -6,7 +6,7 @@
 
 const API_BASE = process.env.REACT_APP_API_BASE;
 
-const UserCenter = () => {
+const UserProfile = () => {
   const [userProfile, setUserProfile] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);