diff --git a/LJC/personalpage/.gitignore b/LJC/personalpage/.gitignore
new file mode 100644
index 0000000..4d29575
--- /dev/null
+++ b/LJC/personalpage/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/LJC/personalpage/README.md b/LJC/personalpage/README.md
new file mode 100644
index 0000000..58beeac
--- /dev/null
+++ b/LJC/personalpage/README.md
@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
diff --git a/LJC/personalpage/package.json b/LJC/personalpage/package.json
new file mode 100644
index 0000000..9cd7e67
--- /dev/null
+++ b/LJC/personalpage/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "personalpage",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.1",
+    "@mui/material": "^7.1.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "ajv": "^8.0.0",
+    "ajv-keywords": "^5.0.0",
+    "axios": "^1.9.0",
+    "mui": "^0.0.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^6.30.1",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/LJC/personalpage/public/favicon.ico b/LJC/personalpage/public/favicon.ico
new file mode 100644
index 0000000..a11777c
--- /dev/null
+++ b/LJC/personalpage/public/favicon.ico
Binary files differ
diff --git a/LJC/personalpage/public/index.html b/LJC/personalpage/public/index.html
new file mode 100644
index 0000000..aa069f2
--- /dev/null
+++ b/LJC/personalpage/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/LJC/personalpage/public/logo192.png b/LJC/personalpage/public/logo192.png
new file mode 100644
index 0000000..fc44b0a
--- /dev/null
+++ b/LJC/personalpage/public/logo192.png
Binary files differ
diff --git a/LJC/personalpage/public/logo512.png b/LJC/personalpage/public/logo512.png
new file mode 100644
index 0000000..a4e47a6
--- /dev/null
+++ b/LJC/personalpage/public/logo512.png
Binary files differ
diff --git a/LJC/personalpage/public/manifest.json b/LJC/personalpage/public/manifest.json
new file mode 100644
index 0000000..080d6c7
--- /dev/null
+++ b/LJC/personalpage/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/LJC/personalpage/public/robots.txt b/LJC/personalpage/public/robots.txt
new file mode 100644
index 0000000..e9e57dc
--- /dev/null
+++ b/LJC/personalpage/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/LJC/personalpage/src/App.css b/LJC/personalpage/src/App.css
new file mode 100644
index 0000000..74b5e05
--- /dev/null
+++ b/LJC/personalpage/src/App.css
@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/LJC/personalpage/src/App.js b/LJC/personalpage/src/App.js
new file mode 100644
index 0000000..ed241f4
--- /dev/null
+++ b/LJC/personalpage/src/App.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route, Navigate, useParams } from 'react-router-dom';
+import UserProfile from './components/UserProfile';
+import { FaHome, FaSearch, FaPlus, FaHeart, FaUser } from 'react-icons/fa';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <div className="min-h-screen bg-gray-50">
+        {/* 顶部导航栏 */}
+        <header className="bg-white shadow-sm sticky top-0 z-10">
+          <div className="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
+            <div className="flex items-center">
+              <div className="text-2xl font-bold text-red-500 mr-2">小红书</div>
+              <div className="hidden md:block text-sm text-gray-500">发现美好生活</div>
+            </div>
+            <div className="flex space-x-4">
+              <a href="/user/11" className="text-gray-600 hover:text-red-500">
+                用户11
+              </a>
+              <a href="/user/2" className="text-gray-600 hover:text-red-500">
+                用户2
+              </a>
+              <a href="/user/3" className="text-gray-600 hover:text-red-500">
+                用户3
+              </a>
+            </div>
+          </div>
+        </header>
+
+        <main className="py-5">
+          <div className="max-w-6xl mx-auto">
+            <Routes>
+              <Route path="/" element={<Navigate to="/user/11" replace />} />
+              <Route path="/user/:userId" element={<UserProfileRoute />} />
+            </Routes>
+          </div>
+        </main>
+
+        {/* 小红书风格底部导航栏 */}
+        <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-2 z-10">
+          <div className="max-w-md mx-auto grid grid-cols-5">
+            <button className="flex flex-col items-center text-red-500">
+              <FaHome className="text-xl" />
+              <span className="text-xs mt-1">首页</span>
+            </button>
+            <button className="flex flex-col items-center text-gray-500">
+              <FaSearch className="text-xl" />
+              <span className="text-xs mt-1">发现</span>
+            </button>
+            <button className="flex flex-col items-center text-gray-500">
+              <div className="bg-red-500 rounded-full p-2 -mt-3">
+                <FaPlus className="text-white text-lg" />
+              </div>
+              <span className="text-xs mt-2">发布</span>
+            </button>
+            <button className="flex flex-col items-center text-gray-500">
+              <FaHeart className="text-xl" />
+              <span className="text-xs mt-1">消息</span>
+            </button>
+            <button className="flex flex-col items-center text-gray-500">
+              <FaUser className="text-xl" />
+              <span className="text-xs mt-1">我</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </BrowserRouter>
+  );
+}
+
+function UserProfileRoute() {
+  const { userId } = useParams();
+  return <UserProfile userId={parseInt(userId)} />;
+}
+
+export default App;
\ No newline at end of file
diff --git a/LJC/personalpage/src/App.test.js b/LJC/personalpage/src/App.test.js
new file mode 100644
index 0000000..1f03afe
--- /dev/null
+++ b/LJC/personalpage/src/App.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
diff --git a/LJC/personalpage/src/components/EditProfileForm.jsx b/LJC/personalpage/src/components/EditProfileForm.jsx
new file mode 100644
index 0000000..d33cbcb
--- /dev/null
+++ b/LJC/personalpage/src/components/EditProfileForm.jsx
@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { FaCamera, FaTimes } from 'react-icons/fa';
+
+const EditProfileForm = ({ user, onSave, onCancel }) => {
+  const [avatar, setAvatar] = useState(user.avatar || '');
+  const [bio, setBio] = useState(user.bio || '');
+  const [gender, setGender] = useState('secret');
+  const [birthday, setBirthday] = useState('');
+  const [location, setLocation] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSave({ avatar, bio });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-2">头像</label>
+        <div className="flex items-center">
+          <div className="relative">
+            <div className="w-20 h-20 rounded-full bg-gradient-to-r from-pink-300 to-orange-300 flex items-center justify-center">
+              {avatar ? (
+                <img src={avatar} alt="Avatar" className="w-full h-full rounded-full" />
+              ) : (
+                <div className="text-white text-2xl">{user.username.charAt(0)}</div>
+              )}
+            </div>
+            <button 
+              type="button"
+              className="absolute bottom-0 right-0 bg-white rounded-full p-1 shadow-md"
+            >
+              <FaCamera className="text-gray-700 text-sm" />
+            </button>
+          </div>
+          <div className="ml-4">
+            <input
+              type="text"
+              value={avatar}
+              onChange={(e) => setAvatar(e.target.value)}
+              placeholder="输入头像URL"
+              className="w-full rounded-md border-gray-300 shadow-sm text-sm"
+            />
+          </div>
+        </div>
+      </div>
+      
+      <div className="mb-4">
+        <label className="block text-sm font-medium text-gray-700 mb-2">个人简介</label>
+        <textarea
+          value={bio}
+          onChange={(e) => setBio(e.target.value)}
+          rows="3"
+          maxLength="100"
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-sm"
+          placeholder="介绍一下自己吧～"
+        />
+        <div className="text-right text-xs text-gray-500 mt-1">{bio.length}/100</div>
+      </div>
+      
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">性别</label>
+          <select
+            value={gender}
+            onChange={(e) => setGender(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-sm"
+          >
+            <option value="secret">保密</option>
+            <option value="male">男</option>
+            <option value="female">女</option>
+          </select>
+        </div>
+        
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">生日</label>
+          <input
+            type="date"
+            value={birthday}
+            onChange={(e) => setBirthday(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-sm"
+          />
+        </div>
+      </div>
+      
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-2">地区</label>
+        <input
+          type="text"
+          value={location}
+          onChange={(e) => setLocation(e.target.value)}
+          placeholder="填写你所在的城市"
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-sm"
+        />
+      </div>
+      
+      <div className="flex justify-end space-x-3">
+        <button 
+          type="button"
+          onClick={onCancel}
+          className="px-5 py-2 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200"
+        >
+          取消
+        </button>
+        <button 
+          type="submit"
+          className="px-5 py-2 bg-red-500 text-white rounded-full text-sm hover:bg-red-600"
+        >
+          保存
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default EditProfileForm;
\ No newline at end of file
diff --git a/LJC/personalpage/src/components/FavoritePosts.jsx b/LJC/personalpage/src/components/FavoritePosts.jsx
new file mode 100644
index 0000000..4033d7b
--- /dev/null
+++ b/LJC/personalpage/src/components/FavoritePosts.jsx
@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+import { getFavorites } from '../services/api';
+import { FaHeart } from 'react-icons/fa';
+
+const FavoritePosts = ({ userId }) => {
+  const [favorites, setFavorites] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchFavorites = async () => {
+      try {
+        setLoading(true);
+        const response = await getFavorites(userId);
+        setFavorites(response.data);
+      } catch (error) {
+        console.error('Failed to fetch favorites:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    
+    if (userId) {
+      fetchFavorites();
+    }
+  }, [userId]);
+
+  if (loading) {
+    return (
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+        {[1, 2, 3, 4, 5, 6].map(item => (
+          <div key={item} className="bg-gray-100 rounded-xl aspect-square animate-pulse"></div>
+        ))}
+      </div>
+    );
+  }
+
+  if (favorites.length === 0) {
+    return (
+      <div className="text-center py-16">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 text-red-500 mb-4">
+          <FaHeart className="text-2xl" />
+        </div>
+        <h3 className="text-lg font-medium text-gray-900">暂无收藏内容</h3>
+        <p className="mt-1 text-gray-500">你还没有收藏任何笔记</p>
+      </div>
+    );
+  }
+
+  // 模拟瀑布流布局数据
+  const waterfallData = favorites.map(post => ({
+    ...post,
+    height: Math.floor(Math.random() * 100) + 200 // 随机高度
+  }));
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+      {waterfallData.map(post => (
+        <div 
+          key={post.id} 
+          className="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
+        >
+          <div 
+            className="relative bg-gray-200" 
+            style={{ height: `${post.height}px` }}
+          >
+            {/* 占位图片 */}
+            <div className="absolute inset-0 bg-gradient-to-br from-pink-100 to-orange-100"></div>
+            
+            {/* 类型标签 */}
+            <div className="absolute top-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full">
+              {post.type === 'image' ? '图文' : 
+               post.type === 'video' ? '视频' : '文档'}
+            </div>
+            
+            {/* 收藏标记 */}
+            <div className="absolute bottom-2 right-2 bg-red-500 rounded-full p-1">
+              <FaHeart className="text-white text-xs" />
+            </div>
+          </div>
+          
+          <div className="p-3">
+            <h3 className="font-medium line-clamp-2">{post.title}</h3>
+            <div className="flex items-center mt-2 text-xs text-gray-500">
+              <span>❤️ 2.5k</span>
+              <span className="mx-2">•</span>
+              <span>⭐ 156</span>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FavoritePosts;
\ No newline at end of file
diff --git a/LJC/personalpage/src/components/FollowButton.jsx b/LJC/personalpage/src/components/FollowButton.jsx
new file mode 100644
index 0000000..9e738d4
--- /dev/null
+++ b/LJC/personalpage/src/components/FollowButton.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { followUser, unfollowUser } from '../services/api';
+
+const FollowButton = ({ userId, isFollowing, onFollowChange }) => {
+  const handleFollow = async () => {
+    try {
+      if (isFollowing) {
+        await unfollowUser(userId);
+        onFollowChange(false);
+      } else {
+        await followUser(userId);
+        onFollowChange(true);
+      }
+    } catch (error) {
+      console.error('关注操作失败:', error);
+    }
+  };
+
+  return (
+    <button 
+      onClick={handleFollow}
+      className={`px-6 py-2 rounded-full text-sm font-medium transition-all ${
+        isFollowing 
+          ? 'bg-gray-100 text-gray-800 hover:bg-gray-200' 
+          : 'bg-red-500 text-white hover:bg-red-600'
+      }`}
+    >
+      {isFollowing ? '已关注' : '关注'}
+    </button>
+  );
+};
+
+export default FollowButton;
\ No newline at end of file
diff --git a/LJC/personalpage/src/components/UserProfile.jsx b/LJC/personalpage/src/components/UserProfile.jsx
new file mode 100644
index 0000000..fe02fa0
--- /dev/null
+++ b/LJC/personalpage/src/components/UserProfile.jsx
@@ -0,0 +1,1149 @@
+import React, { useState, useEffect, Profiler } from 'react';
+import { 
+  Box, 
+  Grid, 
+  Typography, 
+  Avatar, 
+  Button, 
+  Tabs, 
+  Tab, 
+  Card, 
+  CardMedia, 
+  CardContent, 
+  CardActions, 
+  IconButton, 
+  Divider,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  TextField,
+  InputAdornment,
+  Chip,
+  Badge,
+  Fab,
+  Paper,
+  MenuItem,
+  Container,
+  useMediaQuery,
+  useTheme,
+  CircularProgress,
+  Snackbar,
+  Alert
+} from '@mui/material';
+import { 
+  CameraAlt, 
+  Edit, 
+  Favorite, 
+  Bookmark, 
+  Share, 
+  MoreVert, 
+  LocationOn, 
+  Cake, 
+  Female, 
+  Male, 
+  Public, 
+  Add,
+  Search,
+  Notifications,
+  Person,
+  Collections,
+  Group,
+  ChevronLeft,
+  ChevronRight,
+  Close,
+  People
+} from '@mui/icons-material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { Link, useNavigate } from 'react-router-dom';
+
+// 导入API服务
+import { 
+  getCurrentUser, 
+  getUser, 
+  updateUser as updateUserApi,
+  getFavorites,
+  followUser as followUserApi,
+  unfollowUser as unfollowUserApi,
+  getUserPosts,
+  getUserFollowing,
+  getUserInteractions,
+  getUserFollowers
+} from '../services/api';
+
+// 创建小红书主题
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#ff4081',
+    },
+    secondary: {
+      main: '#f50057',
+    },
+    background: {
+      default: '#f5f5f5',
+    },
+  },
+  typography: {
+    fontFamily: '"PingFang SC", "Helvetica Neue", Arial, sans-serif',
+    h5: {
+      fontWeight: 600,
+    },
+    subtitle1: {
+      color: 'rgba(0, 0, 0, 0.6)',
+    },
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 20,
+          textTransform: 'none',
+          fontWeight: 500,
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 16,
+        },
+      },
+    },
+  },
+});
+
+const UserProfile = ({ userId }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState(0);
+  const [isEditing, setIsEditing] = useState(false);
+  const [followers, setFollowers] = useState([]);
+  const [snackbar, setSnackbar] = useState({ open: false, message: '', severity: 'success' });
+  
+  // 用户数据状态
+  const [currentUser, setCurrentUser] = useState(null);
+  const [profileUser, setProfileUser] = useState(null);
+  const [favorites, setFavorites] = useState([]);
+  const [following, setFollowing] = useState([]);
+  const [posts, setPosts] = useState([]);
+  const [interactions, setInteractions] = useState({ 
+    likes_count: 0, 
+    favorites_count: 0 
+  });
+  
+  // 加载状态
+  const [loading, setLoading] = useState(true);
+  const [updating, setUpdating] = useState(false);
+  const [tabLoading, setTabLoading] = useState(false);
+  
+  // 表单状态
+  const [formData, setFormData] = useState({
+    avatar: '',
+    bio: '',
+    gender: '',
+    birthday: '',
+    location: ''
+  });
+
+  // 显示提示信息
+  const showSnackbar = (message, severity = 'success') => {
+    setSnackbar({ open: true, message, severity });
+  };
+
+  // 加载用户数据
+  useEffect(() => {
+    const fetchInteractions = async () => {
+    try {
+      const response = await getUserInteractions(userId);
+      if (response.data.success) {
+        setInteractions(response.data.data);
+      } else {
+        console.error(response.data.error);
+      }
+    } catch (error) {
+      console.error('获取互动数据失败:', error);
+    }
+  };
+  
+  fetchInteractions();
+
+    const handleFollowUser = async (followeeId) => {
+    try {
+      await followUserApi(followeeId);
+      showSnackbar('关注成功');
+      
+      // 更新粉丝列表状态（将刚关注的用户标记为已关注）
+      setFollowers(prev => prev.map(user => 
+        user.id === followeeId ? { ...user, is_following: true } : user
+      ));
+      
+      // 更新当前用户关注数
+      if (currentUser) {
+        setCurrentUser(prev => ({
+          ...prev,
+          following_count: prev.following_count + 1
+        }));
+      }
+      
+    } catch (error) {
+      console.error('关注操作失败:', error);
+      showSnackbar('关注失败，请重试', 'error');
+    }
+  };
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        
+        // 获取当前登录用户
+        const currentUserRes = await getCurrentUser();
+        setCurrentUser(currentUserRes.data);
+        
+        // 获取目标用户信息
+        const profileUserRes = await getUser(userId);
+        setProfileUser(profileUserRes.data);
+        setFormData({
+          avatar: profileUserRes.data.avatar || '',
+          bio: profileUserRes.data.bio || '',
+          gender: profileUserRes.data.gender || '',
+          birthday: profileUserRes.data.birthday || '',
+          location: profileUserRes.data.location || ''
+        });
+        
+        // 获取用户帖子
+        const postsRes = await getUserPosts(userId);
+        setPosts(postsRes.data);
+        
+        // 获取用户互动数据（获赞和收藏数量）
+        const interactionsRes = await getUserInteractions(userId);
+        setInteractions(interactionsRes.data);
+        
+      } catch (error) {
+        console.error('获取用户数据失败:', error);
+        showSnackbar('获取用户数据失败，请重试', 'error');
+      } finally {
+        setLoading(false);
+      }
+    };
+    
+    fetchData();
+  }, [userId]);
+
+  // 根据标签页加载数据
+  useEffect(() => {
+    const fetchTabData = async () => {
+      if (!profileUser) return;
+      
+      try {
+        setTabLoading(true);
+        
+        if (activeTab === 1) {
+          // 加载收藏数据
+          const favoritesRes = await getFavorites(userId);
+          setFavorites(favoritesRes.data);
+        } else if (activeTab === 2) {
+          // 加载关注列表
+          const followingRes = await getUserFollowing(userId);
+          setFollowing(followingRes.data);
+          console.log(followingRes.data)
+        }  else if (activeTab === 3) {
+          // 加载粉丝列表
+          const followersRes = await getUserFollowers(userId);
+          // 
+          setFollowers(followersRes.data.data);
+          console.log(followersRes.data.data)
+        }
+        
+      } catch (error) {
+        console.error('加载数据失败:', error);
+        showSnackbar('加载数据失败，请重试', 'error');
+      } finally {
+        setTabLoading(false);
+      }
+    };
+    
+    fetchTabData();
+  }, [activeTab, userId, profileUser]);
+
+  const handleTabChange = (event, newValue) => {
+    setActiveTab(newValue);
+  };
+
+  const handleFollowToggle = async () => {
+    if (!currentUser || !profileUser) return;
+    
+    try {
+      if (profileUser.is_following) {
+        await unfollowUserApi(profileUser.id);
+        showSnackbar('已取消关注');
+      } else {
+        await followUserApi(profileUser.id);
+        showSnackbar('关注成功');
+      }
+      
+      // 更新用户信息
+      const updatedUser = await getUser(userId);
+      setProfileUser(updatedUser.data);
+      
+    } catch (error) {
+      console.error('关注操作失败:', error);
+      showSnackbar('操作失败，请重试', 'error');
+    }
+  };
+
+  const handleFollowUser = async (followeeId) => {
+    try {
+      await followUserApi(followeeId);
+      showSnackbar('关注成功');
+      
+      // 更新粉丝列表状态
+      setFollowers(prev => prev.map(user => 
+        user.id === followeeId ? {...user, is_following: true} : user
+      ));
+      
+      // 更新当前用户关注数
+      if (currentUser) {
+        setCurrentUser(prev => ({
+          ...prev,
+          following_count: prev.following_count + 1
+        }));
+      }
+      
+    } catch (error) {
+      console.error('关注操作失败:', error);
+      showSnackbar('关注失败，请重试', 'error');
+    }
+  };
+
+  const handleUnfollow = async (followeeId, e) => {
+    e.stopPropagation(); // 阻止事件冒泡
+    
+    try {
+      await unfollowUserApi(followeeId);
+      showSnackbar('已取消关注');
+      
+      // 更新关注列表
+      setFollowing(prev => prev.filter(user => user.id !== followeeId));
+      
+      // 更新当前用户关注数
+      if (currentUser) {
+        setCurrentUser(prev => ({
+          ...prev,
+          following_count: prev.following_count - 1
+        }));
+      }
+      
+      // 更新目标用户粉丝数
+      setProfileUser(prev => ({
+        ...prev,
+        followers_count: prev.followers_count - 1
+      }));
+      
+    } catch (error) {
+      console.error('取消关注失败:', error);
+      showSnackbar('操作失败，请重试', 'error');
+    }
+  };
+
+  const handleFormChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleUpdateProfile = async () => {
+    if (!profileUser) return;
+    
+    try {
+      setUpdating(true);
+      const data = { 
+        avatar: formData.avatar,
+        bio: formData.bio,
+        gender: formData.gender,
+        birthday: formData.birthday,
+        location: formData.location
+      };
+      
+      // 调用更新API
+      const updatedUser = await updateUserApi(profileUser.id, data);
+      
+      // 更新本地状态
+      setProfileUser({ ...profileUser, ...updatedUser.data });
+      setFormData({ ...formData, ...data });
+      
+
+      showSnackbar('个人资料更新成功');
+      setIsEditing(false);
+      
+    } catch (error) {
+      console.error('更新个人资料失败:', error);
+      showSnackbar('更新失败，请重试', 'error');
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  const navigateToUserProfile = (userId) => {
+    navigate(`/user/${userId}`);
+  };
+
+  if (loading) {
+    return (
+      <Box sx={{ 
+        display: 'flex', 
+        justifyContent: 'center', 
+        alignItems: 'center', 
+        height: '100vh' 
+      }}>
+        <CircularProgress size={60} />
+      </Box>
+    );
+  }
+
+  if (!profileUser) {
+    return (
+      <Box sx={{ 
+        display: 'flex', 
+        justifyContent: 'center', 
+        alignItems: 'center', 
+        height: '100vh',
+        flexDirection: 'column'
+      }}>
+        <Typography variant="h6" sx={{ mb: 2 }}>用户不存在</Typography>
+        <Button variant="outlined" onClick={() => window.location.reload()}>
+          重新加载
+        </Button>
+      </Box>
+    );
+  }
+
+  const isOwnProfile = currentUser && currentUser.id === parseInt(userId);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Box sx={{ 
+        bgcolor: 'background.default', 
+        minHeight: '100vh', 
+        pb: isMobile ? 8 : 4 
+      }}>
+        {/* 顶部横幅 */}
+        <Box sx={{
+          height: isMobile ? 200 : 250,
+          background: 'linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)',
+          position: 'relative',
+          borderBottomLeftRadius: 24,
+          borderBottomRightRadius: 24,
+          boxShadow: 1
+        }}>
+          <Fab 
+            color="primary" 
+            size="small" 
+            sx={{ 
+              position: 'absolute', 
+              bottom: -20, 
+              right: 16 
+            }}
+          >
+            <CameraAlt />
+          </Fab>
+        </Box>
+
+        <Container maxWidth="lg">
+          {/* 用户信息区域 */}
+          <Box sx={{ px: isMobile ? 3 : 0, mt: -8, position: 'relative' }}>
+            <Grid container spacing={3}>
+              <Grid item xs={12} sm="auto">
+                <Badge
+                  overlap="circular"
+                  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+                  badgeContent={
+                    <IconButton 
+                      size="small" 
+                      sx={{ 
+                        bgcolor: 'grey.200', 
+                        '&:hover': { bgcolor: 'grey.300' } 
+                      }}
+                      onClick={() => setIsEditing(true)}
+                      disabled={!isOwnProfile}
+                    >
+                      <Edit fontSize="small" />
+                    </IconButton>
+                  }
+                >
+                  <Avatar
+                    sx={{ 
+                      width: 120, 
+                      height: 120, 
+                      border: '4px solid white',
+                      boxShadow: 3
+                    }}
+                    src={profileUser.avatar || 'https://www.8848seo.cn/zb_users/upload/2023/02/20230210092856_68763.jpeg'}
+                  />
+                </Badge>
+              </Grid>
+              
+              <Grid item xs={12} sm>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between', flexDirection: isMobile ? 'column' : 'row' }}>
+                  <Box>
+                    <Typography variant="h5" fontWeight="bold">
+                      {profileUser.username}
+                    </Typography>
+                    <Typography variant="subtitle1" sx={{ mt: 0.5, maxWidth: 600 }}>
+                      {profileUser.bio || '这个人很懒，还没有写简介～'}
+                    </Typography>
+                    <Box sx={{ display: 'flex', mt: 1, gap: 1, flexWrap: 'wrap' }}>
+                      <Chip 
+                        icon={<LocationOn fontSize="small" />} 
+                        label={formData.location}
+                        size="small" 
+                        variant="outlined" 
+                      />
+                      <Chip 
+                        icon={<Cake fontSize="small" />} 
+                        label={formData.birthday}
+                        size="small" 
+                        variant="outlined" 
+                      />
+                      <Chip 
+                        icon={<Female fontSize="small" />} 
+                        label={formData.gender}
+                        size="small" 
+                        variant="outlined" 
+                      />
+                    </Box>
+                  </Box>
+                  
+                  <Box sx={{ mt: isMobile ? 2 : 0, alignSelf: 'flex-start' }}>
+                    {!isOwnProfile && currentUser && (
+                      <>
+                        <Button
+                          variant={profileUser.is_following ? "outlined" : "contained"}
+                          color="primary"
+                          onClick={handleFollowToggle}
+                          sx={{ 
+                            borderRadius: 20, 
+                            px: 3, 
+                            fontWeight: 'bold' 
+                          }}
+                        >
+                          {profileUser.is_following ? '已关注' : '关注'}
+                        </Button>
+                        <IconButton sx={{ ml: 1 }}>
+                          <MoreVert />
+                        </IconButton>
+                      </>
+                    )}
+                  </Box>
+                </Box>
+                
+                <Grid container spacing={2} sx={{ mt: 2 }}>
+                  <Grid item>
+                    <Box textAlign="center">
+                      <Typography variant="h6">{posts.length}</Typography>
+                      <Typography variant="body2" color="textSecondary">笔记</Typography>
+                    </Box>
+                  </Grid>
+                  <Grid item>
+                    <Box textAlign="center">
+                      <Typography variant="h6">{profileUser.followers_count || 0}</Typography>
+                      <Typography variant="body2" color="textSecondary">粉丝</Typography>
+                    </Box>
+                  </Grid>
+                  <Grid item>
+                    <Box textAlign="center">
+                      <Typography variant="h6">{profileUser.following_count || 0}</Typography>
+                      <Typography variant="body2" color="textSecondary">关注</Typography>
+                    </Box>
+                  </Grid>
+                  <Grid item>
+                    <Box textAlign="center">
+                      {/* 使用真实数据：获赞与收藏总数 */}
+                      <Typography variant="h6">
+                        {(interactions.likes_count + interactions.favorites_count).toLocaleString()}
+                      </Typography>
+                      <Typography variant="body2" color="textSecondary">获赞与收藏</Typography>
+                    </Box>
+                  </Grid>
+                </Grid>
+              </Grid>
+            </Grid>
+          </Box>
+
+          {/* 标签栏 */}
+          <Box sx={{ mt: 4 }}>
+            <Tabs 
+              value={activeTab} 
+              onChange={handleTabChange}
+              variant={isMobile ? "fullWidth" : "standard"}
+              indicatorColor="primary"
+              textColor="primary"
+              sx={{
+                borderBottom: 1,
+                borderColor: 'divider'
+              }}
+            >
+              <Tab icon={isMobile ? <Collections /> : null} label="笔记" />
+              <Tab icon={isMobile ? <Bookmark /> : null} label="收藏" />
+              <Tab icon={isMobile ? <Group /> : null} label="关注" />
+              <Tab icon={isMobile ? <People /> : null} label="粉丝" />
+            </Tabs>
+          </Box>
+
+          {/* 内容区域 */}
+          <Box sx={{ mt: 3 }}>
+            {activeTab === 0 && (
+              <Grid container spacing={3}>
+                {tabLoading ? (
+                  <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+                    <CircularProgress />
+                  </Grid>
+                ) : posts.length > 0 ? (
+                  posts.map((post, index) => (
+                    <Grid item xs={12} sm={6} lg={3} key={post.id}>
+                      <Card elevation={0} sx={{ 
+                        bgcolor: 'white', 
+                        borderRadius: 3,
+                        height: '100%',
+                        display: 'flex',
+                        flexDirection: 'column'
+                      }}>
+                        <CardMedia
+                          component="img"
+                          height="180"
+                          image={`https://source.unsplash.com/random/400x300?${index + 1}`}
+                          alt={post.title}
+                        />
+                        <CardContent sx={{ flexGrow: 1 }}>
+                          <Typography gutterBottom variant="h6" component="div">
+                            {post.title}
+                          </Typography>
+                          <Typography variant="body2" color="text.secondary">
+                            {post.content.substring(0, 60)}...
+                          </Typography>
+                        </CardContent>
+                        <CardActions sx={{ justifyContent: 'space-between', px: 2, pb: 2 }}>
+                          <Box>
+                            <IconButton aria-label="add to favorites">
+                              <Favorite />
+                              <Typography variant="body2" sx={{ ml: 1 }}>
+                                {post.heat || Math.floor(Math.random() * 1000) + 1000}
+                              </Typography>
+                            </IconButton>
+                            <IconButton aria-label="share">
+                              <Share />
+                            </IconButton>
+                          </Box>
+                          <Chip 
+                            label={post.type === 'image' ? '图文' : post.type === 'video' ? '视频' : '文档'} 
+                            size="small" 
+                            color="primary" 
+                            variant="outlined" 
+                          />
+                        </CardActions>
+                      </Card>
+                    </Grid>
+                  ))
+                ) : (
+                  <Grid item xs={12}>
+                    <Box sx={{ 
+                      display: 'flex', 
+                      flexDirection: 'column', 
+                      alignItems: 'center', 
+                      py: 8,
+                      textAlign: 'center'
+                    }}>
+                      <Collections sx={{ fontSize: 60, color: 'grey.300', mb: 2 }} />
+                      <Typography variant="h6" sx={{ mb: 1 }}>
+                        还没有发布笔记
+                      </Typography>
+                      <Typography variant="body1" color="textSecondary" sx={{ mb: 3 }}>
+                        {isOwnProfile ? '分享你的生活点滴吧～' : '该用户还没有发布任何笔记'}
+                      </Typography>
+                      {isOwnProfile && (
+                        <Button variant="contained" color="primary">
+                          发布第一篇笔记
+                        </Button>
+                      )}
+                    </Box>
+                  </Grid>
+                )}
+                
+                {posts.length > 0 && (
+                  <Grid item xs={12}>
+                    <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
+                      <Button 
+                        variant="outlined" 
+                        sx={{ 
+                          borderRadius: 20, 
+                          px: 4,
+                          display: 'flex',
+                          alignItems: 'center'
+                        }}
+                      >
+                        <ChevronLeft sx={{ mr: 1 }} />
+                        上一页
+                        <ChevronRight sx={{ ml: 2 }} />
+                      </Button>
+                    </Box>
+                  </Grid>
+                )}
+              </Grid>
+            )}
+            
+            {activeTab === 1 && (
+              <Grid container spacing={3}>
+                {tabLoading ? (
+                  <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+                    <CircularProgress />
+                  </Grid>
+                ) : favorites.length > 0 ? (
+                  favorites.map((favorite) => (
+                    <Grid item xs={12} sm={6} md={4} lg={3} key={favorite.id}>
+                      <Card elevation={0} sx={{ 
+                        bgcolor: 'white', 
+                        borderRadius: 3,
+                        transition: 'transform 0.3s, box-shadow 0.3s',
+                        '&:hover': {
+                          transform: 'translateY(-5px)',
+                          boxShadow: 3
+                        }
+                      }}>
+                        <Box sx={{ 
+                          height: 160, 
+                          position: 'relative',
+                          borderTopLeftRadius: 16,
+                          borderTopRightRadius: 16,
+                          overflow: 'hidden'
+                        }}>
+                          <CardMedia
+                            component="img"
+                            height="160"
+                            image={`https://source.unsplash.com/random/400x300?${favorite.id}`}
+                            alt={favorite.title}
+                          />
+                          <Box sx={{
+                            position: 'absolute',
+                            top: 8,
+                            right: 8,
+                            bgcolor: 'rgba(0,0,0,0.6)',
+                            color: 'white',
+                            px: 1,
+                            py: 0.5,
+                            borderRadius: 4,
+                            fontSize: 12
+                          }}>
+                            {favorite.type === 'image' ? '图文' : favorite.type === 'video' ? '视频' : '文档'}
+                          </Box>
+                        </Box>
+                        <CardContent>
+                          <Typography gutterBottom variant="subtitle1" fontWeight="medium">
+                            {favorite.title}
+                          </Typography>
+                          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                              <Favorite fontSize="small" color="error" />
+                              <Typography variant="body2" sx={{ ml: 0.5 }}>
+                                {favorite.heat || Math.floor(Math.random() * 1000) + 1000}
+                              </Typography>
+                            </Box>
+                            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                              <Bookmark fontSize="small" color="primary" />
+                              <Typography variant="body2" sx={{ ml: 0.5 }}>
+                                {Math.floor(Math.random() * 500) + 100}
+                              </Typography>
+                            </Box>
+                          </Box>
+                        </CardContent>
+                      </Card>
+                    </Grid>
+                  ))
+                ) : (
+                  <Grid item xs={12}>
+                    <Box sx={{ 
+                      display: 'flex', 
+                      flexDirection: 'column', 
+                      alignItems: 'center', 
+                      py: 8,
+                      textAlign: 'center'
+                    }}>
+                      <Bookmark sx={{ fontSize: 60, color: 'grey.300', mb: 2 }} />
+                      <Typography variant="h6" sx={{ mb: 1 }}>
+                        {isOwnProfile ? '你还没有收藏内容' : '该用户没有收藏内容'}
+                      </Typography>
+                      <Typography variant="body1" color="textSecondary">
+                        {isOwnProfile ? '看到喜欢的笔记可以收藏起来哦～' : ''}
+                      </Typography>
+                    </Box>
+                  </Grid>
+                )}
+              </Grid>
+            )}
+            
+            {activeTab === 2 && (
+              <Grid container spacing={3}>
+                {tabLoading ? (
+                  <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+                    <CircularProgress />
+                  </Grid>
+                ) : following.length > 0 ? (
+                  following.map((follow) => (
+                    <Grid item xs={12} sm={6} md={4} key={follow.id}>
+                      <Paper 
+                        elevation={0} 
+                        sx={{ 
+                          bgcolor: 'white', 
+                          borderRadius: 3,
+                          p: 2,
+                          display: 'flex',
+                          alignItems: 'center',
+                          cursor: 'pointer',
+                          '&:hover': {
+                            boxShadow: 1
+                          }
+                        }}
+                        onClick={() => navigateToUserProfile(follow.id)}
+                      >
+                        <Avatar 
+                          src={follow.avatar || 'https://randomuser.me/api/portraits/men/22.jpg'} 
+                          sx={{ width: 60, height: 60 }} 
+                        />
+                        <Box sx={{ ml: 2, flexGrow: 1 }}>
+                          <Typography fontWeight="medium">{follow.username}</Typography>
+                          <Typography variant="body2" color="textSecondary">
+                            {follow.followers_count || Math.floor(Math.random() * 100) + 10} 粉丝
+                          </Typography>
+                        </Box>
+                        {isOwnProfile && (
+                          <Button 
+                            variant="outlined" 
+                            size="small"
+                            sx={{ borderRadius: 20 }}
+                            onClick={(e) => handleUnfollow(follow.id, e)}
+                          >
+                            已关注
+                          </Button>
+                        )}
+                      </Paper>
+                    </Grid>
+                  ))
+                ) : (
+                  <Grid item xs={12}>
+                    <Box sx={{ 
+                      display: 'flex', 
+                      flexDirection: 'column', 
+                      alignItems: 'center', 
+                      py: 8,
+                      textAlign: 'center'
+                    }}>
+                      <Group sx={{ fontSize: 60, color: 'grey.300', mb: 2 }} />
+                      <Typography variant="h6" sx={{ mb: 1 }}>
+                        {isOwnProfile ? '你还没有关注任何人' : '该用户还没有关注任何人'}
+                      </Typography>
+                      <Typography variant="body1" color="textSecondary">
+                        {isOwnProfile ? '发现有趣的人并关注他们吧～' : ''}
+                      </Typography>
+                    </Box>
+                  </Grid>
+                )}
+              </Grid>
+            )}
+            {activeTab === 3 && (
+              <Grid container spacing={3}>
+                {tabLoading ? (
+                  <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+                    <CircularProgress />
+                  </Grid>
+                ) : followers.length > 0 ? (
+                  followers.map((follower) => (
+                    <Grid item xs={12} sm={6} md={4} key={follower.id}>
+                      <Paper 
+                        elevation={0} 
+                        sx={{ 
+                          bgcolor: 'white', 
+                          borderRadius: 3,
+                          p: 2,
+                          display: 'flex',
+                          alignItems: 'center',
+                          cursor: 'pointer',
+                          '&:hover': {
+                            boxShadow: 1
+                          }
+                        }}
+                        onClick={() => navigateToUserProfile(follower.id)}
+                      >
+                        <Avatar 
+                          src={follower.avatar || 'https://randomuser.me/api/portraits/men/22.jpg'} 
+                          sx={{ width: 60, height: 60 }} 
+                        />
+                        <Box sx={{ ml: 2, flexGrow: 1 }}>
+                          <Typography fontWeight="medium">{follower.username}</Typography>
+                          <Typography variant="body2" color="textSecondary">
+                            {follower.bio || '暂无简介'}
+                          </Typography>
+                        </Box>
+                        {currentUser && currentUser.id !== follower.id && (
+                          <Button 
+                            variant={follower.is_following ? "outlined" : "contained"}
+                            color="primary"
+                            size="small"
+                            sx={{ borderRadius: 20 }}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              if (follower.is_following) {
+                                handleUnfollow(follower.id, e);
+                              } else {
+                                handleFollowUser(follower.id);
+                              }
+                            }}
+                          >
+                            {follower.is_following ? '已关注' : '关注'}
+                          </Button>
+                        )}
+                      </Paper>
+                    </Grid>
+                  ))
+                ) : (
+                  <Grid item xs={12}>
+                    <Box sx={{ 
+                      display: 'flex', 
+                      flexDirection: 'column', 
+                      alignItems: 'center', 
+                      py: 8,
+                      textAlign: 'center'
+                    }}>
+                      <People sx={{ fontSize: 60, color: 'grey.300', mb: 2 }} />
+                      <Typography variant="h6" sx={{ mb: 1 }}>
+                        {isOwnProfile ? '你还没有粉丝' : '该用户还没有粉丝'}
+                      </Typography>
+                      <Typography variant="body1" color="textSecondary">
+                        {isOwnProfile ? '分享更多内容来吸引粉丝吧～' : ''}
+                      </Typography>
+                    </Box>
+                  </Grid>
+                )}
+              </Grid>
+            )}
+          </Box>
+        </Container>
+
+        {/* 底部导航栏 - 仅移动端显示 */}
+        {isMobile && (
+          <Box sx={{
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            bgcolor: 'white',
+            boxShadow: 3,
+            py: 1,
+            display: 'flex',
+            justifyContent: 'space-around'
+          }}>
+            <IconButton color="primary">
+              <Search fontSize="large" />
+            </IconButton>
+            <IconButton>
+              <Collections fontSize="large" />
+            </IconButton>
+            <Fab color="primary" size="medium" sx={{ mt: -2 }}>
+              <Add />
+            </Fab>
+            <IconButton>
+              <Notifications fontSize="large" />
+            </IconButton>
+            <IconButton>
+              <Person fontSize="large" />
+            </IconButton>
+          </Box>
+        )}
+
+        {/* 编辑资料模态框 */}
+        {isEditing && (
+          <Box sx={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            bgcolor: 'rgba(0,0,0,0.5)',
+            zIndex: 1300,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            px: 2
+          }}>
+            <Paper sx={{ 
+              width: '100%', 
+              maxWidth: 600, 
+              borderRadius: 4,
+              overflow: 'hidden'
+            }}>
+              <Box sx={{ 
+                bgcolor: 'primary.main', 
+                color: 'white', 
+                p: 2,
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center'
+              }}>
+                <Typography variant="h6">编辑资料</Typography>
+                <IconButton color="inherit" onClick={() => setIsEditing(false)}>
+                  <Close />
+                </IconButton>
+              </Box>
+              
+              <Box sx={{ p: 3 }}>
+                <Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
+                  <Badge
+                    overlap="circular"
+                    anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+                    badgeContent={
+                      <IconButton 
+                        size="small" 
+                        sx={{ 
+                          bgcolor: 'grey.200',
+                          '&:hover': { bgcolor: 'grey.300' }
+                        }}
+                      >
+                        <CameraAlt fontSize="small" />
+                      </IconButton>
+                    }
+                  >
+                    <Avatar
+                      sx={{ width: 100, height: 100 }}
+                      src={formData.avatar || 'https://www.8848seo.cn/zb_users/upload/2023/02/20230210092856_68763.jpeg'}
+                    />
+                  </Badge>
+                </Box>
+                
+                <TextField
+                  fullWidth
+                  label="用户名"
+                  value={profileUser.username}
+                  margin="normal"
+                  disabled
+                />
+                
+                <TextField
+                  fullWidth
+                  name="avatar"
+                  label="头像URL"
+                  value={formData.avatar}
+                  onChange={handleFormChange}
+                  margin="normal"
+                />
+                
+                <TextField
+                  fullWidth
+                  name="bio"
+                  label="个人简介"
+                  value={formData.bio}
+                  onChange={handleFormChange}
+                  margin="normal"
+                  multiline
+                  rows={3}
+                />
+                
+                <Grid container spacing={2} sx={{ mt: 1 }}>
+                  <Grid item xs={6}>
+                    <TextField
+                      select
+                      fullWidth
+                      name="gender"
+                      label="性别"
+                      value={formData.gender}
+                      onChange={handleFormChange}
+                      margin="normal"
+                    >
+                      <MenuItem value="female">
+                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                          <Female sx={{ mr: 1 }} /> 女
+                        </Box>
+                      </MenuItem>
+                      <MenuItem value="male">
+                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                          <Male sx={{ mr: 1 }} /> 男
+                        </Box>
+                      </MenuItem>
+                      <MenuItem value="other">
+                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                          <Public sx={{ mr: 1 }} /> 其他
+                        </Box>
+                      </MenuItem>
+                    </TextField>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <TextField
+                      fullWidth
+                      name="birthday"
+                      label="生日"
+                      type="date"
+                      value={formData.birthday}
+                      onChange={handleFormChange}
+                      margin="normal"
+                      InputLabelProps={{ shrink: true }}
+                    />
+                  </Grid>
+                </Grid>
+                
+                <TextField
+                  fullWidth
+                  name="location"
+                  label="地区"
+                  value={formData.location}
+                  onChange={handleFormChange}
+                  margin="normal"
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <LocationOn />
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+                
+                <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 3 }}>
+                  <Button 
+                    variant="outlined" 
+                    sx={{ width: '48%' }}
+                    onClick={() => setIsEditing(false)}
+                    disabled={updating}
+                  >
+                    取消
+                  </Button>
+                  <Button 
+                    variant="contained" 
+                    color="primary" 
+                    sx={{ width: '48%' }}
+                    onClick={handleUpdateProfile}
+                    disabled={updating}
+                  >
+                    {updating ? <CircularProgress size={24} /> : '保存'}
+                  </Button>
+                </Box>
+              </Box>
+            </Paper>
+          </Box>
+        )}
+
+        {/* 提示信息 */}
+        <Snackbar
+          open={snackbar.open}
+          autoHideDuration={3000}
+          onClose={() => setSnackbar({ ...snackbar, open: false })}
+          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        >
+          <Alert 
+            severity={snackbar.severity} 
+            sx={{ width: '100%' }}
+            onClose={() => setSnackbar({ ...snackbar, open: false })}
+          >
+            {snackbar.message}
+          </Alert>
+        </Snackbar>
+      </Box>
+    </ThemeProvider>
+  );
+};
+
+export default UserProfile;
\ No newline at end of file
diff --git a/LJC/personalpage/src/index.css b/LJC/personalpage/src/index.css
new file mode 100644
index 0000000..ec2585e
--- /dev/null
+++ b/LJC/personalpage/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/LJC/personalpage/src/index.js b/LJC/personalpage/src/index.js
new file mode 100644
index 0000000..d563c0f
--- /dev/null
+++ b/LJC/personalpage/src/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/LJC/personalpage/src/logo.svg b/LJC/personalpage/src/logo.svg
new file mode 100644
index 0000000..9dfc1c0
--- /dev/null
+++ b/LJC/personalpage/src/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/LJC/personalpage/src/reportWebVitals.js b/LJC/personalpage/src/reportWebVitals.js
new file mode 100644
index 0000000..5253d3a
--- /dev/null
+++ b/LJC/personalpage/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
diff --git a/LJC/personalpage/src/services/api.js b/LJC/personalpage/src/services/api.js
new file mode 100644
index 0000000..a3ca1d1
--- /dev/null
+++ b/LJC/personalpage/src/services/api.js
@@ -0,0 +1,31 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: 'http://localhost:5000/api',
+  withCredentials: true
+});
+
+// 用户相关API
+export const getCurrentUser = () => api.get('/current-user');
+export const getUser = (userId) => api.get(`/user/${userId}`);
+export const updateUser = (userId, data) => api.put(`/user/${userId}`, data);
+
+// 收藏相关API
+export const getFavorites = (userId) => api.get(`/user/${userId}/favorites`);
+
+// 关注相关API
+export const followUser = (followeeId) => api.post(`/follow/${followeeId}`);
+export const unfollowUser = (followeeId) => api.delete(`/follow/${followeeId}`);
+
+// 帖子相关API
+export const getUserPosts = (userId) => api.get(`/user/${userId}/posts`);
+
+// 关注列表API
+export const getUserFollowing = (userId) => api.get(`/user/${userId}/following`);
+
+// 用户互动数据API
+export const getUserInteractions = (userId) => api.get(`/user/${userId}/interactions`);
+// 获取粉丝
+export const getUserFollowers = (userId) => api.get(`/user/${userId}/followers`);
+
+export default api;
\ No newline at end of file
diff --git a/LJC/personalpage/src/setupTests.js b/LJC/personalpage/src/setupTests.js
new file mode 100644
index 0000000..8f2609b
--- /dev/null
+++ b/LJC/personalpage/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';