diff --git a/Merge/back_ljc/app.py b/Merge/back_ljc/app.py
index f672fc3..182a6e5 100644
--- a/Merge/back_ljc/app.py
+++ b/Merge/back_ljc/app.py
@@ -1,6 +1,7 @@
 from flask import Flask, jsonify, request, session
 from flask_sqlalchemy import SQLAlchemy
 from flask_cors import CORS
+from flask_jwt_extended import jwt_required, get_jwt_identity
 
 app = Flask(__name__)
 app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:123456@10.126.59.25/redbook'
@@ -230,9 +231,9 @@
 # 更新用户信息
 @app.route('/api/user/<int:user_id>', methods=['PUT'])
 def update_user(user_id):
-    current_user_id = session.get('user_id', 1)
-    if current_user_id != user_id:
-        return jsonify({'error': 'Unauthorized'}), 403
+    # current_user_id = session.get('user_id', 1)
+    # if current_user_id != user_id:
+    #     return jsonify({'error': 'Unauthorized'}), 403
     
     user = User.query.get(user_id)
     if not user:
@@ -265,9 +266,9 @@
     if 'user_id' not in session:
         return jsonify({'error': '未登录'}), 401
     
-    # 验证请求的用户ID与登录用户ID是否一致
-    if session['user_id'] != user_id:
-        return jsonify({'error': '无权访问其他用户的收藏'}), 403
+    # # 验证请求的用户ID与登录用户ID是否一致
+    # if session['user_id'] != user_id:
+    #     return jsonify({'error': '无权访问其他用户的收藏'}), 403
     
     try:
         # 获取收藏行为及其关联的帖子
@@ -351,9 +352,10 @@
     return jsonify(following_list)
 
 # 关注/取消关注用户
-@app.route('/api/follow/<int:followee_id>', methods=['POST', 'DELETE'])
-def follow_user(followee_id):
-    follower_id = session.get('user_id', 1)
+@app.route('/api/follow/<int:follower_id>/<int:followee_id>', methods=['POST', 'DELETE'])
+def follow_user(follower_id,followee_id):
+    # follower_id = session.get('user_id', 1)
+    print(follower_id)
     if follower_id == followee_id:
         return jsonify({'error': 'Cannot follow yourself'}), 400
     
@@ -449,13 +451,13 @@
     try:
         # 计算用户的获赞总数（所有帖子的点赞数）
         like_count = db.session.query(db.func.sum(Behavior.value)).filter(
-            Behavior.post.has(user_id=user_id),
+            Behavior.user_id==user_id,
             Behavior.type == 'like'
         ).scalar() or 0
         
         # 计算用户的收藏总数（所有帖子的收藏数）
         favorite_count = db.session.query(db.func.sum(Behavior.value)).filter(
-            Behavior.post.has(user_id=user_id),
+            Behavior.user_id==user_id,
             Behavior.type == 'favorite'
         ).scalar() or 0
         
@@ -468,6 +470,130 @@
         app.logger.error(f"获取用户互动数据失败: {str(e)}")
         return jsonify({'error': '获取互动数据失败'}), 500
 
+# 点赞/取消点赞路由 - 修改为包含用户ID
+@app.route('/api/users/<int:user_id>/posts/<int:post_id>/like', methods=['POST', 'DELETE'])
+def handle_like(user_id, post_id):
+    # 检查用户是否登录
+    if 'user_id' not in session:
+        return jsonify({'error': '未登录'}), 401
+    
+    # 验证请求用户ID与登录用户ID是否一致
+    if session['user_id'] != user_id:
+        return jsonify({'error': '无权限操作'}), 403
+    
+    post = Post.query.get(post_id)
+    
+    if not post:
+        return jsonify({'error': '帖子不存在'}), 404
+    
+    # 检查行为类型
+    behavior = Behavior.query.filter_by(
+        user_id=user_id,
+        post_id=post_id,
+        type='like'
+    ).first()
+    
+    if request.method == 'POST':
+        # 点赞
+        if not behavior:
+            new_behavior = Behavior(
+                user_id=user_id,
+                post_id=post_id,
+                type='like',
+                value=1
+            )
+            db.session.add(new_behavior)
+            db.session.commit()
+            return jsonify({'message': '点赞成功', 'liked': True})
+        return jsonify({'message': '已点赞', 'liked': True})
+    
+    elif request.method == 'DELETE':
+        # 取消点赞
+        if behavior:
+            db.session.delete(behavior)
+            db.session.commit()
+            return jsonify({'message': '已取消点赞', 'liked': False})
+        return jsonify({'message': '未点赞', 'liked': False})
+
+# 收藏/取消收藏路由 - 修改为包含用户ID
+@app.route('/api/users/<int:user_id>/posts/<int:post_id>/favorite', methods=['POST', 'DELETE'])
+def handle_favorite(user_id, post_id):
+    # 检查用户是否登录
+    if 'user_id' not in session:
+        return jsonify({'error': '未登录'}), 401
+    
+    # 验证请求用户ID与登录用户ID是否一致
+    if session['user_id'] != user_id:
+        return jsonify({'error': '无权限操作'}), 403
+    
+    post = Post.query.get(post_id)
+    
+    if not post:
+        return jsonify({'error': '帖子不存在'}), 404
+    
+    # 检查行为类型
+    behavior = Behavior.query.filter_by(
+        user_id=user_id,
+        post_id=post_id,
+        type='favorite'
+    ).first()
+    
+    if request.method == 'POST':
+        # 收藏
+        if not behavior:
+            new_behavior = Behavior(
+                user_id=user_id,
+                post_id=post_id,
+                type='favorite',
+                value=1
+            )
+            db.session.add(new_behavior)
+            db.session.commit()
+            return jsonify({'message': '收藏成功', 'favorited': True})
+        return jsonify({'message': '已收藏', 'favorited': True})
+    
+    elif request.method == 'DELETE':
+        # 取消收藏
+        if behavior:
+            db.session.delete(behavior)
+            db.session.commit()
+            return jsonify({'message': '已取消收藏', 'favorited': False})
+        return jsonify({'message': '未收藏', 'favorited': False})
+
+# 获取帖子互动状态（是否点赞/收藏） - 修改为包含用户ID
+@app.route('/api/users/<int:user_id>/posts/<int:post_id>/interaction-status')
+def get_post_interaction_status(user_id, post_id):
+    # 检查用户是否登录
+    if 'user_id' not in session:
+        return jsonify({
+            'liked': False,
+            'favorited': False
+        })
+    
+    # 验证请求用户ID与登录用户ID是否一致
+    if session['user_id'] != user_id:
+        return jsonify({
+            'liked': False,
+            'favorited': False
+        })
+    
+    liked = Behavior.query.filter_by(
+        user_id=user_id,
+        post_id=post_id,
+        type='like'
+    ).first() is not None
+    
+    favorited = Behavior.query.filter_by(
+        user_id=user_id,
+        post_id=post_id,
+        type='favorite'
+    ).first() is not None
+    
+    return jsonify({
+        'liked': liked,
+        'favorited': favorited
+    })
+
 
 if __name__ == '__main__':
     app.run(debug=True,port='5715',host='0.0.0.0')
\ No newline at end of file
diff --git a/Merge/back_wzy/__pycache__/config.cpython-310.pyc b/Merge/back_wzy/__pycache__/config.cpython-310.pyc
index bd938d3..f508f8f 100644
--- a/Merge/back_wzy/__pycache__/config.cpython-310.pyc
+++ b/Merge/back_wzy/__pycache__/config.cpython-310.pyc
Binary files differ
diff --git a/Merge/back_wzy/config.py b/Merge/back_wzy/config.py
index 6a9bf8c..0200846 100644
--- a/Merge/back_wzy/config.py
+++ b/Merge/back_wzy/config.py
@@ -9,4 +9,6 @@
         'SQLURL'
     )
     SQLALCHEMY_TRACK_MODIFICATIONS = False
-    SQLURL = os.getenv('SQLURL')
\ No newline at end of file
+    SQLURL = os.getenv('SQLURL')
+    # 文件上传配置
+    MAX_CONTENT_LENGTH = 2 * 1024 * 1024 * 1024  # 2GB，支持视频上传
\ No newline at end of file
diff --git a/Merge/back_wzy/utils/Fpost.py b/Merge/back_wzy/utils/Fpost.py
index 2ffffbc..2ed295f 100644
--- a/Merge/back_wzy/utils/Fpost.py
+++ b/Merge/back_wzy/utils/Fpost.py
@@ -177,19 +177,39 @@
         """
         media_urls = []
         
+        # 支持的文件类型
+        ALLOWED_IMAGE_EXTENSIONS = {'.jpg', '.jpeg', '.png', '.webp'}
+        ALLOWED_VIDEO_EXTENSIONS = {'.mp4', '.mov', '.avi'}
+        ALLOWED_EXTENSIONS = ALLOWED_IMAGE_EXTENSIONS | ALLOWED_VIDEO_EXTENSIONS
+        
         for file in files:
             if file and file.filename:
                 # 生成安全的文件名
                 original_filename = secure_filename(file.filename)
                 # 生成唯一文件名避免冲突
                 unique_id = str(uuid.uuid4())
-                file_extension = os.path.splitext(original_filename)[1]
+                file_extension = os.path.splitext(original_filename)[1].lower()
+                
+                # 验证文件类型
+                if file_extension not in ALLOWED_EXTENSIONS:
+                    raise Exception(f"不支持的文件类型: {file_extension}")
+                
                 unique_filename = f"{unique_id}{file_extension}"
                 
-                # 读取文件内容
+                # 读取文件内容（对于大文件，分块读取）
                 file_content = file.read()
                 file.seek(0)  # 重置文件指针
                 
+                # 验证文件大小
+                file_size = len(file_content)
+                max_image_size = 32 * 1024 * 1024  # 32MB
+                max_video_size = 2 * 1024 * 1024 * 1024  # 2GB
+                
+                if file_extension in ALLOWED_IMAGE_EXTENSIONS and file_size > max_image_size:
+                    raise Exception(f"图片文件过大: {file_size / (1024*1024):.1f}MB，最大支持32MB")
+                elif file_extension in ALLOWED_VIDEO_EXTENSIONS and file_size > max_video_size:
+                    raise Exception(f"视频文件过大: {file_size / (1024*1024*1024):.1f}GB，最大支持2GB")
+                
                 # 保存到所有存储节点
                 success_count = 0
                 for node_path in self.storage_nodes:
diff --git a/Merge/back_wzy/utils/__pycache__/Fpost.cpython-310.pyc b/Merge/back_wzy/utils/__pycache__/Fpost.cpython-310.pyc
index c4b0fad..75ed484 100644
--- a/Merge/back_wzy/utils/__pycache__/Fpost.cpython-310.pyc
+++ b/Merge/back_wzy/utils/__pycache__/Fpost.cpython-310.pyc
Binary files differ
diff --git a/Merge/front/src/api/api_ljc.js b/Merge/front/src/api/api_ljc.js
index 1adea99..8c16245 100644
--- a/Merge/front/src/api/api_ljc.js
+++ b/Merge/front/src/api/api_ljc.js
@@ -3,6 +3,7 @@
 
 const api = axios.create({
   baseURL: 'http://10.126.59.25:5715/api/',
+  // baseURL: 'http://127.0.0.1:5715/api/',
   withCredentials: true
 });
 
@@ -15,11 +16,11 @@
 export const getFavorites = (userId) => api.get(`/user/${userId}/favorites`);
 
 // 关注相关API
-export const followUser = (followeeId) => {
-  return api.post(`/follow/${followeeId}`);
+export const followUser = (followerId,followeeId) => {
+  return api.post(`/follow/${followerId}/${followeeId}`);
 };
-export const unfollowUser = (followeeId) => {
-  return api.delete(`/follow/${followeeId}`);
+export const unfollowUser = (followerId,followeeId) => {
+  return api.delete(`/follow/${followerId}/${followeeId}`);
 };
 
 // 帖子相关API
@@ -32,5 +33,56 @@
 export const getUserInteractions = (userId) => api.get(`/user/${userId}/interactions`);
 // 获取粉丝
 export const getUserFollowers = (userId) => api.get(`/user/${userId}/followers`);
+// ================= 帖子互动API =================
+
+/**
+ * 点赞帖子
+ * @param {number} userId 用户ID
+ * @param {number} postId 帖子ID
+ * @returns 操作结果
+ */
+export const likePost = (userId, postId) => {
+  return api.post(`/users/${userId}/posts/${postId}/like`);
+};
+
+/**
+ * 取消点赞
+ * @param {number} userId 用户ID
+ * @param {number} postId 帖子ID
+ * @returns 操作结果
+ */
+export const unlikePost = (userId, postId) => {
+  return api.delete(`/users/${userId}/posts/${postId}/like`);
+};
+
+/**
+ * 收藏帖子
+ * @param {number} userId 用户ID
+ * @param {number} postId 帖子ID
+ * @returns 操作结果
+ */
+export const favoritePost = (userId, postId) => {
+  return api.post(`/users/${userId}/posts/${postId}/favorite`);
+};
+
+/**
+ * 取消收藏
+ * @param {number} userId 用户ID
+ * @param {number} postId 帖子ID
+ * @returns 操作结果
+ */
+export const unfavoritePost = (userId, postId) => {
+  return api.delete(`/users/${userId}/posts/${postId}/favorite`);
+};
+
+/**
+ * 获取当前用户对帖子的互动状态
+ * @param {number} userId 用户ID
+ * @param {number} postId 帖子ID
+ * @returns {object} { liked: boolean, favorited: boolean }
+ */
+export const getPostInteractionStatus = (userId, postId) => {
+  return api.get(`/users/${userId}/posts/${postId}/interaction-status`);
+};
 
 export default api;
\ No newline at end of file
diff --git a/Merge/front/src/components/HomeFeed.jsx b/Merge/front/src/components/HomeFeed.jsx
index 82e027a..0f3c0fe 100644
--- a/Merge/front/src/components/HomeFeed.jsx
+++ b/Merge/front/src/components/HomeFeed.jsx
@@ -8,6 +8,7 @@
 import { getUserInfo } from '../utils/auth'
 import { deepRecommend } from '../api/recommend_rhj'
 import postsAPI from '../api/posts_api'
+import MediaPreview from './MediaPreview'
 import '../style/HomeFeed.css'
 
 const categories = [
@@ -59,9 +60,10 @@
               title:  d.title,
               author: `作者 ${d.user_id}`,
               avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
-              img:    d.media_urls?.[0] || '',
+              media:  d.media_urls?.[0] || '', // 改为 media，支持图片和视频
               likes:  d.heat,
-              content: d.content || ''
+              content: d.content || '',
+              mediaUrls: d.media_urls || [] // 保存所有媒体URL
             }
           } catch {
             return {
@@ -69,9 +71,10 @@
               title: item.title,
               author: item.author || '佚名',
               avatar: `https://i.pravatar.cc/40?img=${item.id}`,
-              img: item.img || '',
+              media: item.img || '',
               likes: item.heat || 0,
-              content: item.content || ''
+              content: item.content || '',
+              mediaUrls: []
             }
           }
         })
@@ -101,9 +104,10 @@
               title:  d.title,
               author: `作者 ${d.user_id}`,
               avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
-              img:    d.media_urls?.[0] || '',
+              media:  d.media_urls?.[0] || '', // 改为 media，支持图片和视频
               likes:  d.heat,
-              content: d.content || ''
+              content: d.content || '',
+              mediaUrls: d.media_urls || [] // 保存所有媒体URL
             }
           } catch {
             // 拉详情失败时兜底
@@ -112,9 +116,10 @@
               title: item.title,
               author: item.author || '佚名',
               avatar: `https://i.pravatar.cc/40?img=${item.id}`,
-              img: item.img || '',
+              media: item.img || '',
               likes: item.heat || 0,
-              content: item.content || ''
+              content: item.content || '',
+              mediaUrls: []
             }
           }
         })
@@ -144,9 +149,10 @@
               title:  d.title,
               author: `作者 ${d.user_id}`,
               avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
-              img:    d.media_urls?.[0] || '',
+              media:  d.media_urls?.[0] || '', // 改为 media，支持图片和视频
               likes:  d.heat,
-              content: d.content || ''
+              content: d.content || '',
+              mediaUrls: d.media_urls || [] // 保存所有媒体URL
             }
           } catch {
             // 拉详情失败时兜底
@@ -155,9 +161,10 @@
               title: item.title,
               author: item.author || '佚名',
               avatar: `https://i.pravatar.cc/40?img=${item.id}`,
-              img: item.img || '',
+              media: item.img || '',
               likes: item.heat || 0,
-              content: item.content || ''
+              content: item.content || '',
+              mediaUrls: []
             }
           }
         })
@@ -187,9 +194,10 @@
               title:  d.title,
               author: `作者 ${d.user_id}`,
               avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
-              img:    d.media_urls?.[0] || '',
+              media:  d.media_urls?.[0] || '', // 改为 media，支持图片和视频
               likes:  d.heat,
-              content: d.content || ''
+              content: d.content || '',
+              mediaUrls: d.media_urls || [] // 保存所有媒体URL
             }
           } catch {
             return {
@@ -197,9 +205,10 @@
               title: item.title,
               author: item.author || '佚名',
               avatar: `https://i.pravatar.cc/40?img=${item.id}`,
-              img: item.img || '',
+              media: item.img || '',
               likes: item.heat || 0,
-              content: item.content || ''
+              content: item.content || '',
+              mediaUrls: []
             }
           }
         })
@@ -260,9 +269,11 @@
               id:     d.id,
               title:  d.title,
               author: `作者 ${d.user_id}`,
-              // avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
-              img:    d.media_urls?.[0] || '', // 用第一张媒体作为封面
-              likes:  d.heat
+              authorId: d.user_id,
+              avatar: `http://192.168.5.200:8080/static/profile.webp`,
+              media:  d.media_urls?.[0] || '', // 改为 media，支持图片和视频
+              likes:  d.heat,
+              mediaUrls: d.media_urls || [] // 保存所有媒体URL
             }
           })
         )
@@ -304,6 +315,8 @@
     }
   }
 
+  const [previewImg, setPreviewImg] = useState(null)
+
   const handlePostClick = (postId) => {
     navigate(`/post/${postId}`)
   }
@@ -431,7 +444,20 @@
           ) : (
             items.map(item => (
               <div key={item.id} className="feed-card" onClick={() => handlePostClick(item.id)}>
-                {item.img && <img className="card-img" src={item.img} alt={item.title} />}
+                {item.media && (
+                  <MediaPreview
+                    url={item.media}
+                    alt={item.title}
+                    className="card-img"
+                    onClick={(url) => {
+                      // 对于图片，显示预览
+                      if (!url.toLowerCase().includes('video') && !url.includes('.mp4') && !url.includes('.webm')) {
+                        setPreviewImg(url)
+                      }
+                    }}
+                    style={{ cursor: 'pointer' }}
+                  />
+                )}
                 <h3 className="card-title">{item.title}</h3>
                 {item.content && <div className="card-content">{item.content.slice(0, 60) || ''}</div>}
                 <div className="card-footer">
@@ -449,6 +475,37 @@
           )}
         </div>
       )}
+
+      {/* 图片预览弹窗 */}
+      {previewImg && (
+        <div 
+          className="img-preview-mask" 
+          style={{
+            position: 'fixed',
+            zIndex: 9999,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: 'rgba(0,0,0,0.7)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }} 
+          onClick={() => setPreviewImg(null)}
+        >
+          <img 
+            src={previewImg} 
+            alt="大图预览" 
+            style={{
+              maxWidth: '90vw',
+              maxHeight: '90vh',
+              borderRadius: 12,
+              boxShadow: '0 4px 24px #0008'
+            }} 
+          />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/Merge/front/src/components/MediaPreview.jsx b/Merge/front/src/components/MediaPreview.jsx
new file mode 100644
index 0000000..3f0c6e2
--- /dev/null
+++ b/Merge/front/src/components/MediaPreview.jsx
@@ -0,0 +1,119 @@
+import React, { useState } from 'react'
+import VideoPreview from './VideoPreview'
+import { Play } from 'lucide-react'
+
+// 判断文件是否为视频
+const isVideoFile = (url) => {
+  if (!url) return false
+  const videoExtensions = ['.mp4', '.webm', '.ogg', '.avi', '.mov', '.wmv', '.flv', '.mkv']
+  const lowerUrl = url.toLowerCase()
+  return videoExtensions.some(ext => lowerUrl.includes(ext)) || lowerUrl.includes('video')
+}
+
+// 媒体预览组件（支持图片和视频）
+const MediaPreview = ({ 
+  url, 
+  alt = '', 
+  className = '', 
+  style = {}, 
+  onClick = null,
+  showPlayIcon = true,
+  maxWidth = 220,
+  maxHeight = 220 
+}) => {
+  const [showVideoPreview, setShowVideoPreview] = useState(false)
+  
+  const handleMediaClick = () => {
+    if (isVideoFile(url)) {
+      setShowVideoPreview(true)
+    } else if (onClick) {
+      onClick(url)
+    }
+  }
+
+  const defaultStyle = {
+    maxWidth,
+    maxHeight,
+    borderRadius: 8,
+    objectFit: 'cover',
+    cursor: 'pointer',
+    ...style
+  }
+
+  if (isVideoFile(url)) {
+    return (
+      <>
+        <div style={{ position: 'relative', ...defaultStyle }} onClick={handleMediaClick}>
+          <video
+            src={url}
+            style={defaultStyle}
+            preload="metadata"
+            muted
+          />
+          {showPlayIcon && (
+            <div style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              background: 'rgba(0,0,0,0.6)',
+              borderRadius: '50%',
+              padding: 12,
+              color: 'white'
+            }}>
+              <Play size={24} fill="white" />
+            </div>
+          )}
+        </div>
+        
+        {/* 视频预览弹窗 */}
+        {showVideoPreview && (
+          <div 
+            style={{
+              position: 'fixed',
+              zIndex: 9999,
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: 'rgba(0,0,0,0.8)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: 20
+            }}
+            onClick={() => setShowVideoPreview(false)}
+          >
+            <div 
+              style={{ 
+                maxWidth: '90vw', 
+                maxHeight: '90vh', 
+                width: 'auto', 
+                height: 'auto' 
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <VideoPreview
+                src={url}
+                onClose={() => setShowVideoPreview(false)}
+                style={{ borderRadius: 12, overflow: 'hidden' }}
+              />
+            </div>
+          </div>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <img
+      src={url}
+      alt={alt}
+      className={className}
+      style={defaultStyle}
+      onClick={handleMediaClick}
+    />
+  )
+}
+
+export default MediaPreview
diff --git a/Merge/front/src/components/PostDetailJWLLL.jsx b/Merge/front/src/components/PostDetailJWLLL.jsx
index d598a72..01f64b5 100644
--- a/Merge/front/src/components/PostDetailJWLLL.jsx
+++ b/Merge/front/src/components/PostDetailJWLLL.jsx
@@ -5,6 +5,7 @@
 import { getUserInfo } from '../utils/auth'
 import FollowButton from './FollowButton'
 import postsAPI from '../api/posts_api'
+import MediaPreview from './MediaPreview'
 import '../style/PostDetail.css'
 import dayjs from 'dayjs'
 
@@ -314,11 +315,24 @@
           </div>
         )}
 
-        {/* 帖子图片（支持多图） */}
+        {/* 帖子媒体（支持多图/多视频） */}
         {Array.isArray(post.media_urls) && post.media_urls.length > 0 && (
-          <div className="post-images" style={{display:'flex',gap:8,marginBottom:16}}>
+          <div className="post-media" style={{display:'flex',gap:8,marginBottom:16,flexWrap:'wrap'}}>
             {post.media_urls.map((url, idx) => (
-              <img key={idx} src={url} alt={`图片${idx+1}`} style={{maxWidth:220,maxHeight:220,borderRadius:8,objectFit:'cover',cursor:'pointer'}} onClick={() => setPreviewImg(url)} />
+              <MediaPreview
+                key={idx}
+                url={url}
+                alt={`媒体${idx+1}`}
+                onClick={(mediaUrl) => {
+                  // 对于图片，显示预览
+                  if (!mediaUrl.toLowerCase().includes('video') && !mediaUrl.includes('.mp4') && !mediaUrl.includes('.webm')) {
+                    setPreviewImg(mediaUrl)
+                  }
+                }}
+                style={{ cursor: 'pointer' }}
+                maxWidth={320}
+                maxHeight={320}
+              />
             ))}
           </div>
         )}
diff --git a/Merge/front/src/components/UploadPage.jsx b/Merge/front/src/components/UploadPage.jsx
index 817a210..405aeb8 100644
--- a/Merge/front/src/components/UploadPage.jsx
+++ b/Merge/front/src/components/UploadPage.jsx
@@ -170,6 +170,17 @@
                   <div className="file-thumbnail">
                     <img src={URL.createObjectURL(file)} alt={file.name} />
                   </div>
+                ) : file.type.startsWith('video/') ? (
+                  <div className="file-thumbnail video-thumbnail">
+                    <video 
+                      src={URL.createObjectURL(file)} 
+                      muted 
+                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                    />
+                    <div className="video-overlay">
+                      <Video size={24} />
+                    </div>
+                  </div>
                 ) : (
                   <div className="file-thumbnail video-thumbnail">
                     <Video size={24} />
diff --git a/Merge/front/src/components/UserProfile.jsx b/Merge/front/src/components/UserProfile.jsx
index c957473..2e54fac 100644
--- a/Merge/front/src/components/UserProfile.jsx
+++ b/Merge/front/src/components/UserProfile.jsx
@@ -53,7 +53,10 @@
   Collections,
   ChevronLeft,
   ChevronRight,
-  Close
+  Close,
+  Bookmark,
+  Group,
+  People
 } from '@mui/icons-material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { Link, useNavigate } from 'react-router-dom';
@@ -66,7 +69,10 @@
   followUser as followUserApi,
   unfollowUser as unfollowUserApi,
   getUserPosts,
-  getUserInteractions
+  getUserInteractions,
+  getUserFollowers,
+  getFavorites,
+  getUserFollowing
 } from '../api/api_ljc';
 import { fetchPost } from '../api/posts_wzy';
 
@@ -119,6 +125,10 @@
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState(0);
   const [isEditing, setIsEditing] = useState(false);
+  const [favorites, setFavorites] = useState([]);
+  const [following, setFollowing] = useState([]);
+  const [followers, setFollowers] = useState([]);
+  const [follower, setFollower] = useState([]);
   const [snackbar, setSnackbar] = useState({ open: false, message: '', severity: 'success' });
   const [anchorEl, setAnchorEl] = useState(null);
   
@@ -199,35 +209,13 @@
   
   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();
+        const currentUserRes = await getUser(userId);
         setCurrentUser(currentUserRes.data);
         
         // 获取目标用户信息
@@ -241,6 +229,22 @@
           birthday: profileUserRes.data.birthday || '',
           location: profileUserRes.data.location || ''
         });
+
+        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("following",followingRes.data)
+                }  else if (activeTab === 3) {
+                  // 加载粉丝列表
+                  const followersRes = await getUserFollowers(userId);
+                  // 
+                  setFollowers(followersRes.data.data);
+                }
         
         // 获取用户帖子
         const postsRes = await getUserPosts(userId);
@@ -283,7 +287,7 @@
     };
     
     fetchData();
-  }, [userId]);
+  }, [activeTab,userId]);
 
   // 根据标签页加载数据
   useEffect(() => {
@@ -314,18 +318,40 @@
     }
   };
 
-  const handleFollowUser = async (followeeId) => {
+  const handleFollowUser = async (userId,followeeId) => {
     try {
-      await followUserApi(followeeId);
+      await followUserApi(userId,followeeId);
       showSnackbar('关注成功');
       
-      // 更新当前用户关注数
-      if (currentUser) {
-        setCurrentUser(prev => ({
-          ...prev,
-          following_count: prev.following_count + 1
-        }));
-      }
+      // 更新粉丝列表中的关注状态
+    setFollowers(prevFollowers => 
+      prevFollowers.map(follower => 
+        follower.id === followeeId 
+          ? { ...follower, is_following: true } 
+          : follower
+      )
+    );
+    
+    // 更新当前用户的关注数
+    if (currentUser) {
+      setCurrentUser(prev => ({
+        ...prev,
+        following_count: prev.following_count + 1
+      }));
+    }
+    
+    // 如果被关注的用户是当前用户的粉丝，更新粉丝数
+    setFollowers(prevFollowers => 
+      prevFollowers.map(follower => 
+        follower.id === followeeId 
+          ? { 
+              ...follower, 
+              followers_count: follower.followers_count + 1 
+            } 
+          : follower
+      )
+    );
+    
       
     } catch (error) {
       console.error('关注操作失败:', error);
@@ -333,13 +359,27 @@
     }
   };
 
-  const handleUnfollow = async (followeeId, e) => {
-    e.stopPropagation(); // 阻止事件冒泡
+  const handleUnfollow = async (userId,followeeId, e) => {
+    // e.stopPropagation(); // 阻止事件冒泡
     
     try {
-      await unfollowUserApi(followeeId);
+      await unfollowUserApi(userId,followeeId);
       showSnackbar('已取消关注');
       
+      // 更新关注列表 - 移除取消关注的用户
+    setFollowing(prevFollowing => 
+      prevFollowing.filter(user => user.id !== followeeId)
+    );
+    
+    // 更新粉丝列表 - 更新关注状态
+    setFollowers(prevFollowers => 
+      prevFollowers.map(follower => 
+        follower.id === followeeId 
+          ? { ...follower, is_following: false } 
+          : follower
+      )
+    );
+      
       // 更新当前用户关注数
       if (currentUser) {
         setCurrentUser(prev => ({
@@ -441,6 +481,7 @@
     );
   }
 
+  console.log(currentUser.id)
   const isOwnProfile = currentUser && currentUser.id === parseInt(userId);
 
   return (
@@ -616,52 +657,32 @@
               }}
             >
               <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 }}>
-            {/* 只保留笔记标签页 */}
-            <Grid container spacing={3}>
-              {tabLoading ? (
-                <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
-                  <CircularProgress />
-                </Grid>
-              ) : allPosts.length === 0 ? (
-                <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.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'
-                    }}>
-                      {/* 只有当帖子有 media_urls 时才显示图片 */}
+            
+            {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'
+                      }}>
+                        {/* 只有当帖子有 media_urls 时才显示图片 */}
                       {post.media_urls && post.media_urls.length > 0 && (
                         <CardMedia
                           component="img"
@@ -670,63 +691,322 @@
                           alt={post.title}
                         />
                       )}
-                      <CardContent sx={{ flexGrow: 1 }}>
-                        <Typography gutterBottom variant="h6" component="div">
-                          {post.title}
-                        </Typography>
-                        <Typography variant="body2" color="text.secondary">
-                          {post.content ? 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>
+                        <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>
-                ))
-              )}
-              
-              {/* 分页组件 */}
-              {allPosts.length > postsPerPage && (
-                <Grid item xs={12}>
-                  <Stack spacing={2} alignItems="center" sx={{ mt: 4 }}>
-                    <Typography variant="body2" color="textSecondary">
-                      共 {allPosts.length} 篇笔记，第 {currentPage} 页，共 {totalPages} 页
-                    </Typography>
-                    <Pagination 
-                      count={totalPages}
-                      page={currentPage}
-                      onChange={(event, page) => handlePageChange(page)}
-                      color="primary"
-                      size={isMobile ? "small" : "medium"}
-                      showFirstButton 
-                      showLastButton
-                      sx={{
-                        '& .MuiPaginationItem-root': {
-                          borderRadius: 2,
+                )}
+                
+                {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
                         }
-                      }}
-                    />
-                  </Stack>
-                </Grid>
-              )}
-            </Grid>
+                      }}>
+                        <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) => {
+                  e.stopPropagation();
+                  handleUnfollow(userId,follow.id);
+                }}
+              >
+                已关注
+              </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>
+                          <Typography variant="body2" color="textSecondary">
+                            {follower.followers_count} 粉丝
+                          </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(userId,follower.id);
+                              } else {
+                                handleFollowUser(userId,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>
 
diff --git a/Merge/front/src/components/VideoPreview.jsx b/Merge/front/src/components/VideoPreview.jsx
new file mode 100644
index 0000000..9183c11
--- /dev/null
+++ b/Merge/front/src/components/VideoPreview.jsx
@@ -0,0 +1,199 @@
+import React, { useState, useRef } from 'react'
+import { Play, Pause, Volume2, VolumeX, Maximize2, X } from 'lucide-react'
+
+const VideoPreview = ({ src, poster, onClose, className = '', style = {} }) => {
+  const videoRef = useRef(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [isMuted, setIsMuted] = useState(false)
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [duration, setDuration] = useState(0)
+  const [currentTime, setCurrentTime] = useState(0)
+
+  const togglePlay = () => {
+    if (videoRef.current) {
+      if (isPlaying) {
+        videoRef.current.pause()
+      } else {
+        videoRef.current.play()
+      }
+      setIsPlaying(!isPlaying)
+    }
+  }
+
+  const toggleMute = () => {
+    if (videoRef.current) {
+      videoRef.current.muted = !isMuted
+      setIsMuted(!isMuted)
+    }
+  }
+
+  const toggleFullscreen = () => {
+    if (videoRef.current) {
+      if (!isFullscreen) {
+        if (videoRef.current.requestFullscreen) {
+          videoRef.current.requestFullscreen()
+        }
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        }
+      }
+      setIsFullscreen(!isFullscreen)
+    }
+  }
+
+  const handleTimeUpdate = () => {
+    if (videoRef.current) {
+      setCurrentTime(videoRef.current.currentTime)
+    }
+  }
+
+  const handleLoadedMetadata = () => {
+    if (videoRef.current) {
+      setDuration(videoRef.current.duration)
+    }
+  }
+
+  const handleSeek = (e) => {
+    if (videoRef.current) {
+      const rect = e.currentTarget.getBoundingClientRect()
+      const clickX = e.clientX - rect.left
+      const newTime = (clickX / rect.width) * duration
+      videoRef.current.currentTime = newTime
+      setCurrentTime(newTime)
+    }
+  }
+
+  const formatTime = (time) => {
+    const minutes = Math.floor(time / 60)
+    const seconds = Math.floor(time % 60)
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`
+  }
+
+  return (
+    <div className={`video-preview ${className}`} style={style}>
+      <div className="video-container" style={{ position: 'relative', borderRadius: 8, overflow: 'hidden' }}>
+        <video
+          ref={videoRef}
+          src={src}
+          poster={poster}
+          onTimeUpdate={handleTimeUpdate}
+          onLoadedMetadata={handleLoadedMetadata}
+          onPlay={() => setIsPlaying(true)}
+          onPause={() => setIsPlaying(false)}
+          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+          preload="metadata"
+        />
+        
+        {/* 视频控制层 */}
+        <div 
+          className="video-controls" 
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
+            padding: '20px 12px 12px',
+            opacity: 1,
+            transition: 'opacity 0.3s'
+          }}
+        >
+          {/* 进度条 */}
+          <div 
+            className="progress-bar" 
+            style={{
+              height: 4,
+              background: 'rgba(255,255,255,0.3)',
+              borderRadius: 2,
+              marginBottom: 8,
+              cursor: 'pointer'
+            }}
+            onClick={handleSeek}
+          >
+            <div 
+              style={{
+                height: '100%',
+                background: '#fff',
+                borderRadius: 2,
+                width: `${duration ? (currentTime / duration) * 100 : 0}%`,
+                transition: 'width 0.1s'
+              }}
+            />
+          </div>
+
+          {/* 控制按钮 */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <button
+                onClick={togglePlay}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: 'white',
+                  cursor: 'pointer',
+                  padding: 4,
+                  borderRadius: 4
+                }}
+              >
+                {isPlaying ? <Pause size={20} /> : <Play size={20} />}
+              </button>
+              
+              <button
+                onClick={toggleMute}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: 'white',
+                  cursor: 'pointer',
+                  padding: 4,
+                  borderRadius: 4
+                }}
+              >
+                {isMuted ? <VolumeX size={18} /> : <Volume2 size={18} />}
+              </button>
+
+              <span style={{ color: 'white', fontSize: 12 }}>
+                {formatTime(currentTime)} / {formatTime(duration)}
+              </span>
+            </div>
+
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <button
+                onClick={toggleFullscreen}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: 'white',
+                  cursor: 'pointer',
+                  padding: 4,
+                  borderRadius: 4
+                }}
+              >
+                <Maximize2 size={18} />
+              </button>
+
+              {onClose && (
+                <button
+                  onClick={onClose}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    color: 'white',
+                    cursor: 'pointer',
+                    padding: 4,
+                    borderRadius: 4
+                  }}
+                >
+                  <X size={18} />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default VideoPreview
diff --git a/Merge/front/src/style/UploadPage.css b/Merge/front/src/style/UploadPage.css
index 138b0c1..70a9aea 100644
--- a/Merge/front/src/style/UploadPage.css
+++ b/Merge/front/src/style/UploadPage.css
@@ -68,3 +68,216 @@
 .upload-table th {
   background: #f5f5f5;
 }
+
+/* 文件预览区域 */
+.file-preview-area {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 40px;
+  border: 1px solid #e8eaed;
+}
+
+.preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.preview-title {
+  font-size: 16px;
+  color: #333;
+  margin: 0;
+  font-weight: 500;
+}
+
+.clear-files-btn {
+  background: #ff4757;
+  color: white;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.clear-files-btn:hover {
+  background: #ff3742;
+}
+
+.file-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 16px;
+}
+
+.file-item {
+  position: relative;
+  background: #fff;
+  border: 1px solid #e8eaed;
+  border-radius: 8px;
+  padding: 12px;
+  text-align: center;
+  transition: all 0.2s;
+}
+
+.file-item:hover {
+  border-color: #1890ff;
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
+}
+
+.file-item:hover .remove-file-btn {
+  opacity: 1;
+}
+
+.remove-file-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: rgba(255, 71, 87, 0.8);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: bold;
+  opacity: 0;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.file-thumbnail {
+  width: 80px;
+  height: 80px;
+  border-radius: 6px;
+  overflow: hidden;
+  margin: 0 auto 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f8f9fa;
+  position: relative;
+}
+
+.file-thumbnail img,
+.file-thumbnail video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.video-thumbnail {
+  color: #666;
+  position: relative;
+}
+
+.video-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  pointer-events: none;
+}
+
+.file-info {
+  text-align: center;
+  width: 100%;
+}
+
+.file-name {
+  font-size: 12px;
+  color: #333;
+  margin-bottom: 4px;
+  font-weight: 500;
+  word-break: break-all;
+}
+
+.file-size {
+  font-size: 11px;
+  color: #999;
+}
+
+/* 进度条 */
+.progress-container {
+  margin-top: 20px;
+  width: 100%;
+  max-width: 400px;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #1890ff, #40a9ff);
+  transition: width 0.3s ease;
+}
+
+.progress-text {
+  text-align: center;
+  font-size: 12px;
+  color: #666;
+}
+
+/* 上传信息区域 */
+.upload-info {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-top: 40px;
+}
+
+.info-item {
+  background: #f8f9fa;
+  padding: 16px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.info-title {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.info-desc {
+  font-size: 12px;
+  color: #666;
+  margin: 0;
+}
+
+.fade-in {
+  animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}