diff --git a/src/pages/PostCenter/PostCard.module.css b/src/pages/PostCenter/PostCard.module.css
new file mode 100644
index 0000000..3f0623f
--- /dev/null
+++ b/src/pages/PostCenter/PostCard.module.css
@@ -0,0 +1,192 @@
+.postCardWrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.postCard {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  background: white;
+}
+
+.postCard:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.coverContainer {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  position: relative;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.coverImage {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+  transition: transform 0.3s ease;
+  background: #f5f5f5;
+}
+
+.postCard:hover .coverImage {
+  transform: scale(1.02);
+}
+
+.promotionBadge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: linear-gradient(45deg, #ff6b6b, #ffa500);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  z-index: 10;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.cardContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.postTitle {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 0 12px 0;
+  line-height: 1.4;
+  color: #262626;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  height: 44px;
+}
+
+.postMeta {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: #8c8c8c;
+  margin-bottom: 12px;
+  height: 20px;
+}
+
+.authorName {
+  font-weight: 500;
+  color: #595959;
+}
+
+.publishTime {
+  color: #8c8c8c;
+}
+
+.tagsContainer {
+  margin-bottom: 12px;
+  height: 24px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  overflow: hidden;
+}
+
+.tag {
+  font-size: 11px;
+  padding: 2px 6px;
+  margin: 0;
+  border-radius: 4px;
+}
+
+.postSummary {
+  flex: 1;
+  font-size: 13px;
+  color: #595959;
+  line-height: 1.5;
+  margin-bottom: 16px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  height: 60px;
+}
+
+.postFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+  height: 32px;
+}
+
+.stats {
+  display: flex;
+  gap: 16px;
+}
+
+.statItem {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.statItem .anticon {
+  font-size: 12px;
+}
+
+.readMoreBtn {
+  padding: 0;
+  font-size: 12px;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+.readMoreBtn:hover {
+  color: #40a9ff;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .coverContainer {
+    height: 160px;
+  }
+  
+  .postTitle {
+    font-size: 14px;
+    height: 40px;
+  }
+  
+  .postSummary {
+    font-size: 12px;
+    -webkit-line-clamp: 2;
+    height: 36px;
+  }
+  
+  .stats {
+    gap: 12px;
+  }
+  
+  .statItem {
+    font-size: 11px;
+  }
+} 
\ No newline at end of file
diff --git a/src/pages/PostCenter/PostCard.tsx b/src/pages/PostCenter/PostCard.tsx
new file mode 100644
index 0000000..947ecc3
--- /dev/null
+++ b/src/pages/PostCenter/PostCard.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { Card, Tag, Button, Avatar, Badge } from 'antd';
+import { EyeOutlined, CommentOutlined, UserOutlined, ClockCircleOutlined, HeartOutlined, CrownOutlined } from '@ant-design/icons';
+import { history } from 'umi';
+import styles from './PostCard.module.css';
+import { Post } from '../PostCenter/types';
+
+interface PostCardProps {
+  post: Post;
+}
+
+const PostCard: React.FC<PostCardProps> = ({ post }) => {
+  const {
+    id,
+    title,
+    author,
+    publishTime,
+    tags,
+    views,
+    comments,
+    favorites,
+    likes,
+    coverImage,
+    summary,
+    promotionPlanId,
+    isPromoted
+  } = post;
+
+  const goToDetail = () => {
+    history.push(`/post-detail/${id}`);
+  };
+
+  return (
+    <div className={styles.postCardWrapper}>
+      <Card
+        hoverable
+        cover={
+          <div className={styles.coverContainer}>
+            {isPromoted && (
+              <div className={styles.promotionBadge}>
+                <CrownOutlined />
+                <span>推广</span>
+              </div>
+            )}
+            <img 
+              alt={title} 
+              src={coverImage} 
+              className={styles.coverImage}
+              onError={(e) => {
+                e.currentTarget.src = '/images/404.png';
+              }}
+            />
+          </div>
+        }
+        className={styles.postCard}
+        bodyStyle={{ padding: '16px', height: '240px', display: 'flex', flexDirection: 'column' }}
+      >
+        <div className={styles.cardContent}>
+          <h3 className={styles.postTitle} title={title}>{title}</h3>
+          
+          <div className={styles.postMeta}>
+            <Avatar size="small" style={{ marginRight: 6 }} icon={<UserOutlined />}>
+              {author && author[0]}
+            </Avatar>
+            <span className={styles.authorName}>{author}</span>
+            <ClockCircleOutlined style={{ marginLeft: 12, marginRight: 4 }} />
+            <span className={styles.publishTime}>{publishTime}</span>
+          </div>
+          
+          <div className={styles.tagsContainer}>
+            {(Array.isArray(tags) ? tags : []).slice(0, 3).map(tag => (
+              <Tag color="blue" key={tag} className={styles.tag}>{tag}</Tag>
+            ))}
+            {tags && tags.length > 3 && (
+              <Tag color="default" className={styles.tag}>+{tags.length - 3}</Tag>
+            )}
+          </div>
+          
+          <div className={styles.postSummary} title={summary}>{summary}</div>
+          
+          <div className={styles.postFooter}>
+            <div className={styles.stats}>
+              <span className={styles.statItem}>
+                <EyeOutlined /> {views || 0}
+              </span>
+              <span className={styles.statItem}>
+                <CommentOutlined /> {comments || 0}
+              </span>
+              <span className={styles.statItem}>
+                <HeartOutlined /> {favorites || 0}
+              </span>
+            </div>
+            <Button 
+              type="link" 
+              className={styles.readMoreBtn}
+              onClick={goToDetail}
+            >
+              查看更多 »
+            </Button>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default PostCard; 
\ No newline at end of file
diff --git a/src/pages/PostCenter/PostDetail.module.css b/src/pages/PostCenter/PostDetail.module.css
new file mode 100644
index 0000000..da072d1
--- /dev/null
+++ b/src/pages/PostCenter/PostDetail.module.css
@@ -0,0 +1,233 @@
+.postDetailContainer {
+  max-width: 1200px;
+  margin: 0 auto;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.postCoverSection {
+  margin-bottom: 24px;
+  border-radius: 0 0 16px 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.coverImageContainer {
+  position: relative;
+  width: 100%;
+  height: 400px;
+  overflow: hidden;
+  background: #f0f0f0;
+}
+
+.coverImage {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover !important;
+  transition: transform 0.3s ease;
+}
+
+.coverImage:hover {
+  transform: scale(1.02);
+}
+
+.coverOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.coverGradient {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
+}
+
+.previewMask {
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.postDetailHeader {
+  margin: 0 24px 24px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.titleContainer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.titleContainer h2 {
+  margin: 0;
+  flex: 1;
+}
+
+.promotionBadge {
+  background: linear-gradient(45deg, #ff6b6b, #ffa500);
+  color: white;
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+}
+
+.postMeta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin: 16px 0;
+  padding: 16px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.postAuthor,
+.postTime,
+.postViews,
+.postTags {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.postActions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 16px;
+}
+
+.postContent {
+  margin: 0 24px 24px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.postContent img {
+  max-width: 100%;
+  height: auto;
+}
+
+.commentSection {
+  margin: 0 24px 24px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.commentInput {
+  margin-bottom: 24px;
+}
+
+.commentActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.commentList {
+  margin-top: 24px;
+}
+
+.replyList {
+  margin-top: 16px;
+  padding-left: 24px;
+  border-left: 2px solid #f0f0f0;
+}
+
+.relatedPosts {
+  margin: 0 24px 24px;
+  padding: 24px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.recommendHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.recommendHeader h4 {
+  margin: 0;
+}
+
+.postDetailLoading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  color: #666;
+}
+
+.postDetailError {
+  text-align: center;
+  padding: 60px 24px;
+  color: #999;
+  font-size: 16px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .postDetailContainer {
+    margin: 0;
+  }
+  
+  .coverImageContainer {
+    height: 250px;
+  }
+  
+  .postDetailHeader,
+  .postContent,
+  .commentSection,
+  .relatedPosts {
+    margin: 0 12px 16px;
+    border-radius: 8px;
+  }
+  
+  .postMeta {
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .postActions {
+    flex-direction: column;
+  }
+  
+  .postActions button {
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .coverImageContainer {
+    height: 200px;
+  }
+  
+  .postDetailHeader,
+  .postContent,
+  .commentSection,
+  .relatedPosts {
+    margin: 0 8px 12px;
+  }
+} 
\ No newline at end of file
diff --git a/src/pages/PostCenter/PostDetail.tsx b/src/pages/PostCenter/PostDetail.tsx
new file mode 100644
index 0000000..c6aedcc
--- /dev/null
+++ b/src/pages/PostCenter/PostDetail.tsx
@@ -0,0 +1,547 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, Link } from 'umi';
+import { Card, Avatar, Tag, Row, Col, Divider, List, Input, Button, Typography, message, Spin, Image, Modal, Badge, Pagination } from 'antd';
+import { Comment } from '@ant-design/compatible';
+import { 
+  UserOutlined, 
+  ClockCircleOutlined, 
+  EyeOutlined, 
+  TagOutlined,
+  LikeOutlined,
+  DislikeOutlined,
+  ShareAltOutlined,
+  HeartOutlined,
+  HeartFilled,
+  ExclamationCircleOutlined,
+  CrownOutlined
+} from '@ant-design/icons';
+import { getPostDetail, addComment, toggleFavorite, toggleLike, toggleCommentLike, reportPost } from '@/services/post';
+import PostCard from '../PostCenter/PostCard';
+import styles from './PostDetail.module.css';
+import { Post, CommentType } from '../PostCenter/types';
+
+const { TextArea } = Input;
+const { Title, Paragraph, Text } = Typography;
+
+const PostDetail: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const [post, setPost] = useState<Post | null>(null);
+  const [recommendedPosts, setRecommendedPosts] = useState<Post[]>([]);
+  const [currentRecommendPage, setCurrentRecommendPage] = useState<number>(1);
+  const [comments, setComments] = useState<CommentType[]>([]);
+  const [replyTo, setReplyTo] = useState<number | null>(null);
+  const [commentText, setCommentText] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(true);
+  const [favorited, setFavorited] = useState<boolean>(false);
+  const [liked, setLiked] = useState<boolean>(false);
+  const [submittingComment, setSubmittingComment] = useState<boolean>(false);
+  const [commentLikes, setCommentLikes] = useState<Record<number, boolean>>({});
+  const [reportModalVisible, setReportModalVisible] = useState<boolean>(false);
+  const [reportReason, setReportReason] = useState<string>('');
+  const [submittingReport, setSubmittingReport] = useState<boolean>(false);
+
+  const recommendPageSize = 3; // 每页显示3个推荐帖子
+
+  useEffect(() => {
+    if (id) {
+      fetchPostDetail(Number(id));
+    }
+  }, [id]);
+
+  const fetchPostDetail = async (postId: number) => {
+    try {
+      setLoading(true);
+      const response = await getPostDetail(postId);
+      
+      if (response.code === 200 && response.data) {
+        const { post: postData, tags, comments: commentsData, recommendedPosts, favorited: isFavorited } = response.data;
+        
+        // 转换帖子数据格式
+        const formattedPost: Post = {
+          ...postData,
+          id: postData.postId,
+          title: postData.title || '无标题',
+          author: postData.author || '未知作者',
+          publishTime: postData.publishTime || postData.createTime || '',
+          tags: postData.tags ? postData.tags.split(',') : [],
+          views: postData.views || 0,
+          comments: postData.comments || 0,
+          favorites: postData.favorites || 0,
+          likes: postData.likes || 0,
+          coverImage: postData.coverImage || '/images/404.png',
+          summary: postData.summary || '暂无摘要',
+          isPromoted: postData.promotionPlanId != null && postData.promotionPlanId > 0,
+        };
+        setPost(formattedPost);
+        setFavorited(isFavorited);
+
+        // 转换评论数据格式
+        const formattedComments = commentsData.map((commentItem: any) => {
+          const comment = commentItem.comment;
+          const replies = commentItem.replies || [];
+          
+          return {
+            ...comment,
+            id: comment.commentId,
+            author: comment.userName || '匿名用户',
+            avatar: comment.userAvatar || '/images/404.png',
+            datetime: comment.createTime,
+            likes: comment.likes || 0,
+            replies: replies.map((reply: any) => ({
+              ...reply,
+              id: reply.commentId,
+              author: reply.userName || '匿名用户',
+              avatar: reply.userAvatar || '/images/404.png',
+              datetime: reply.createTime,
+              likes: reply.likes || 0,
+              replies: []
+            }))
+          };
+        });
+        setComments(formattedComments);
+
+        // 转换推荐帖子数据格式
+        const formatPosts = (posts: any[]) => posts.map((p: any) => ({
+          ...p,
+          id: p.postId,
+          title: p.title || '无标题',
+          author: p.author || '未知作者',
+          publishTime: p.publishTime || p.createTime || '',
+          tags: p.tags ? p.tags.split(',') : [],
+          views: p.views || 0,
+          comments: p.comments || 0,
+          favorites: p.favorites || 0,
+          likes: p.likes || 0,
+          coverImage: p.coverImage || '/images/404.png',
+          summary: p.summary || '暂无摘要',
+          isPromoted: p.promotionPlanId != null && p.promotionPlanId > 0, // 添加推广标识
+        }));
+
+        // 设置推荐帖子
+        const formattedRecommendedPosts = formatPosts(recommendedPosts || []);
+        setRecommendedPosts(formattedRecommendedPosts);
+      } else {
+        message.error(response.msg || '获取帖子详情失败');
+      }
+    } catch (error) {
+      console.error('获取帖子详情失败:', error);
+      message.error('获取帖子详情失败，请稍后重试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCommentSubmit = async () => {
+    if (!commentText.trim()) {
+      message.warning('评论内容不能为空');
+      return;
+    }
+
+    if (!post) return;
+
+    try {
+      setSubmittingComment(true);
+      const response = await addComment({
+        postId: Number(post.id),
+        content: commentText,
+        parentId: replyTo || 0,
+      });
+
+      if (response.code === 200) {
+        message.success('评论发表成功');
+        setCommentText('');
+        setReplyTo(null);
+        // 重新获取帖子详情以更新评论列表
+        fetchPostDetail(Number(post.id));
+      } else {
+        message.error(response.msg || '评论发表失败');
+      }
+    } catch (error) {
+      console.error('评论发表失败:', error);
+      message.error('评论发表失败，请稍后重试');
+    } finally {
+      setSubmittingComment(false);
+    }
+  };
+
+  const handleFavoriteToggle = async () => {
+    if (!post) return;
+
+    try {
+      const response = await toggleFavorite(Number(post.id), !favorited);
+      
+      if (response.code === 200) {
+        setFavorited(!favorited);
+        message.success(favorited ? '取消收藏成功' : '收藏成功');
+        // 更新帖子收藏数
+        setPost(prev => prev ? {
+          ...prev,
+          favorites: (prev.favorites || 0) + (favorited ? -1 : 1)
+        } : null);
+      } else {
+        message.error(response.msg || '操作失败');
+      }
+    } catch (error) {
+      console.error('收藏操作失败:', error);
+      message.error('操作失败，请稍后重试');
+    }
+  };
+
+  const handleLikeToggle = async () => {
+    if (!post) return;
+
+    try {
+      const response = await toggleLike(Number(post.id), !liked);
+      
+      if (response.code === 200) {
+        setLiked(!liked);
+        message.success(liked ? '取消点赞成功' : '点赞成功');
+        // 更新帖子点赞数
+        setPost(prev => prev ? {
+          ...prev,
+          likes: (prev.likes || 0) + (liked ? -1 : 1)
+        } : null);
+      } else {
+        message.error(response.msg || '操作失败');
+      }
+    } catch (error) {
+      console.error('点赞操作失败:', error);
+      message.error('操作失败，请稍后重试');
+    }
+  };
+
+  const handleReply = (commentId: number) => {
+    setReplyTo(commentId);
+  };
+
+  const cancelReply = () => {
+    setReplyTo(null);
+  };
+
+  const handleCommentLike = async (commentId: number) => {
+    try {
+      const isLiked = commentLikes[commentId] || false;
+      const response = await toggleCommentLike(commentId, !isLiked);
+      
+      if (response.code === 200) {
+        setCommentLikes(prev => ({
+          ...prev,
+          [commentId]: !isLiked
+        }));
+        
+        // 更新评论点赞数
+        setComments(prev => prev.map(comment => {
+          if (comment.id === commentId) {
+            return {
+              ...comment,
+              likes: (comment.likes || 0) + (isLiked ? -1 : 1)
+            };
+          }
+          // 检查回复
+          if (comment.replies) {
+            const updatedReplies = comment.replies.map(reply => {
+              if (reply.id === commentId) {
+                return {
+                  ...reply,
+                  likes: (reply.likes || 0) + (isLiked ? -1 : 1)
+                };
+              }
+              return reply;
+            });
+            return { ...comment, replies: updatedReplies };
+          }
+          return comment;
+        }));
+        
+        message.success(isLiked ? '取消点赞成功' : '点赞成功');
+      } else {
+        message.error(response.msg || '操作失败');
+      }
+    } catch (error) {
+      console.error('评论点赞操作失败:', error);
+      message.error('操作失败，请稍后重试');
+    }
+  };
+
+  const handleReport = async () => {
+    if (!post) return;
+    
+    if (!reportReason.trim()) {
+      message.warning('请填写举报理由');
+      return;
+    }
+
+    try {
+      setSubmittingReport(true);
+      const response = await reportPost(Number(post.id), reportReason);
+      
+      if (response.code === 200) {
+        message.success('举报提交成功，我们会尽快处理');
+        setReportModalVisible(false);
+        setReportReason('');
+      } else {
+        message.error(response.msg || '举报提交失败');
+      }
+    } catch (error) {
+      console.error('举报提交失败:', error);
+      message.error('举报提交失败，请稍后重试');
+    } finally {
+      setSubmittingReport(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className={styles.postDetailLoading}>
+        <Spin size="large" />
+        <div style={{ marginTop: 16 }}>加载中...</div>
+      </div>
+    );
+  }
+
+  if (!post) {
+    return <div className={styles.postDetailError}>帖子不存在或已被删除</div>;
+  }
+
+  return (
+    <div className={styles.postDetailContainer}>
+      {/* 帖子封面图片 */}
+      {post.coverImage && (
+        <div className={styles.postCoverSection}>
+          <div className={styles.coverImageContainer}>
+            <Image
+              src={post.coverImage}
+              alt={post.title}
+              className={styles.coverImage}
+              preview={{
+                mask: <div className={styles.previewMask}>点击预览</div>
+              }}
+              onError={(e) => {
+                e.currentTarget.src = '/images/404.png';
+              }}
+            />
+            <div className={styles.coverOverlay}>
+              <div className={styles.coverGradient}></div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 帖子头部信息 */}
+      <Card className={styles.postDetailHeader}>
+        <div className={styles.titleContainer}>
+        <Title level={2}>{post.title}</Title>
+          {post.isPromoted && (
+            <div className={styles.promotionBadge}>
+              <CrownOutlined />
+              <span>推广</span>
+            </div>
+          )}
+        </div>
+        
+        <div className={styles.postMeta}>
+          <div className={styles.postAuthor}>
+            <Avatar size="small" icon={<UserOutlined />} />
+            <Text strong style={{ marginLeft: 8 }}>{post.author}</Text>
+          </div>
+          
+          <div className={styles.postTime}>
+            <ClockCircleOutlined />
+            <Text type="secondary" style={{ marginLeft: 8 }}>{post.publishTime}</Text>
+          </div>
+          
+          <div className={styles.postViews}>
+            <EyeOutlined />
+            <Text type="secondary" style={{ marginLeft: 8 }}>{post.views} 查看</Text>
+          </div>
+          
+          <div className={styles.postTags}>
+            <TagOutlined />
+            <span style={{ marginLeft: 8 }}>
+              {post.tags.map(tag => (
+                <Tag key={tag} color="blue">{tag}</Tag>
+              ))}
+            </span>
+          </div>
+        </div>
+
+        {/* 操作按钮 */}
+        <div className={styles.postActions}>
+          <Button 
+            type={favorited ? "primary" : "default"}
+            icon={favorited ? <HeartFilled /> : <HeartOutlined />}
+            onClick={handleFavoriteToggle}
+          >
+            {favorited ? '已收藏' : '收藏'} ({post.favorites || 0})
+          </Button>
+          <Button 
+            type={liked ? "primary" : "default"}
+            icon={<LikeOutlined />}
+            onClick={handleLikeToggle}
+          >
+            {liked ? '已点赞' : '点赞'} ({post.likes || 0})
+          </Button>
+          {/* <Button icon={<ShareAltOutlined />}>
+            分享
+          </Button> */}
+          <Button 
+            icon={<ExclamationCircleOutlined />}
+            onClick={() => setReportModalVisible(true)}
+          >
+            举报
+          </Button>
+        </div>
+      </Card>
+
+      {/* 帖子内容 */}
+      <Card className={styles.postContent}>
+        <div dangerouslySetInnerHTML={{ __html: post.content || post.summary || '' }} />
+      </Card>
+
+      {/* 评论区 */}
+      <Card className={styles.commentSection}>
+        <Title level={4}>评论 ({comments.length})</Title>
+        
+        <div className={styles.commentInput}>
+          <TextArea
+            value={commentText}
+            onChange={e => setCommentText(e.target.value)}
+            placeholder={replyTo ? '回复评论...' : '写下你的评论...'}
+            rows={4}
+          />
+          <div className={styles.commentActions}>
+            {replyTo && (
+              <Button onClick={cancelReply}>取消回复</Button>
+            )}
+            <Button 
+              type="primary" 
+              onClick={handleCommentSubmit}
+              loading={submittingComment}
+            >
+              发表{replyTo ? '回复' : '评论'}
+            </Button>
+          </div>
+        </div>
+
+        <List
+          className={styles.commentList}
+          itemLayout="horizontal"
+          dataSource={comments}
+          renderItem={comment => (
+            <li>
+              <Comment
+                author={comment.author}
+                avatar={comment.avatar}
+                content={comment.content}
+                datetime={comment.datetime}
+                actions={[
+                  <span key="like">
+                    <Button 
+                      type={commentLikes[comment.id] ? "primary" : "text"}
+                      size="small" 
+                      icon={<LikeOutlined />}
+                      onClick={() => handleCommentLike(comment.id)}
+                    >
+                      {comment.likes || 0}
+                    </Button>
+                  </span>,
+                  <span key="reply" onClick={() => handleReply(comment.id)}>回复</span>
+                ]}
+              >
+                {comment.replies && comment.replies.length > 0 && (
+                  <List
+                    className={styles.replyList}
+                    itemLayout="horizontal"
+                    dataSource={comment.replies}
+                    renderItem={reply => (
+                      <li>
+                        <Comment
+                          author={reply.author}
+                          avatar={reply.avatar}
+                          content={reply.content}
+                          datetime={reply.datetime}
+                          actions={[
+                            <span key="like">
+                              <Button 
+                                type={commentLikes[reply.id] ? "primary" : "text"}
+                                size="small" 
+                                icon={<LikeOutlined />}
+                                onClick={() => handleCommentLike(reply.id)}
+                              >
+                                {reply.likes || 0}
+                              </Button>
+                            </span>
+                          ]}
+                        />
+                      </li>
+                    )}
+                  />
+                )}
+              </Comment>
+            </li>
+          )}
+        />
+      </Card>
+
+      {/* 举报弹窗 */}
+      <Modal
+        title="举报帖子"
+        open={reportModalVisible}
+        onOk={handleReport}
+        onCancel={() => {
+          setReportModalVisible(false);
+          setReportReason('');
+        }}
+        confirmLoading={submittingReport}
+        okText="提交举报"
+        cancelText="取消"
+      >
+        <div style={{ marginBottom: 16 }}>
+          <strong>帖子：</strong>{post?.title}
+        </div>
+        <div>
+          <strong>举报理由：</strong>
+          <TextArea
+            value={reportReason}
+            onChange={(e) => setReportReason(e.target.value)}
+            placeholder="请详细描述举报理由..."
+            rows={4}
+            style={{ marginTop: 8 }}
+          />
+        </div>
+      </Modal>
+
+      {/* 相关推荐 */}
+      {recommendedPosts.length > 0 && (
+        <div className={styles.relatedPosts}>
+          <div className={styles.recommendHeader}>
+          <Title level={4}>相关推荐</Title>
+            {recommendedPosts.length > recommendPageSize && (
+              <Pagination
+                current={currentRecommendPage}
+                total={recommendedPosts.length}
+                pageSize={recommendPageSize}
+                onChange={(page) => setCurrentRecommendPage(page)}
+                showSizeChanger={false}
+                showQuickJumper={false}
+                showTotal={(total, range) => `${range[0]}-${range[1]} / ${total}`}
+                size="small"
+              />
+            )}
+          </div>
+          <Row gutter={[24, 24]}>
+            {recommendedPosts
+              .slice((currentRecommendPage - 1) * recommendPageSize, currentRecommendPage * recommendPageSize)
+              .map(post => (
+              <Col xs={24} sm={12} md={8} key={post.id}>
+                <PostCard post={post} />
+              </Col>
+            ))}
+          </Row>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PostDetail; 
\ No newline at end of file
diff --git a/src/pages/PostCenter/index.module.css b/src/pages/PostCenter/index.module.css
new file mode 100644
index 0000000..2b262e2
--- /dev/null
+++ b/src/pages/PostCenter/index.module.css
@@ -0,0 +1,189 @@
+.postCenterContainer {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.headerNav {
+  background: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.categoryMenu {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.categoryButton {
+  border: none;
+  box-shadow: none;
+  font-weight: 500;
+  padding: 8px 16px;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+}
+
+.categoryButton:hover {
+  background-color: #f0f0f0;
+}
+
+.searchContainer {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  max-width: 400px;
+  margin: 0 24px;
+}
+
+.userCenter {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.carouselContainer {
+  margin: 24px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.carouselSlide {
+  position: relative;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+}
+
+.carouselOverlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+  color: white;
+  padding: 40px 40px 24px;
+  text-align: left;
+}
+
+.carouselTitle {
+  font-size: 28px;
+  font-weight: bold;
+  margin: 0 0 12px 0;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.carouselSummary {
+  font-size: 16px;
+  margin: 0 0 16px 0;
+  opacity: 0.9;
+  line-height: 1.5;
+}
+
+.carouselMeta {
+  display: flex;
+  gap: 24px;
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.postsSection {
+  padding: 24px;
+}
+
+.categoryTitle {
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.categoryTitle h2 {
+  font-size: 24px;
+  margin: 0 0 8px 0;
+  color: #1890ff;
+}
+
+.categoryTitle p {
+  margin: 0;
+  color: #666;
+  font-size: 14px;
+}
+
+.postsRow {
+  margin-bottom: 32px;
+}
+
+.postCol {
+  display: flex;
+  height: 480px; /* 固定卡片高度 */
+}
+
+.postCol > * {
+  width: 100%;
+}
+
+.emptyState {
+  text-align: center;
+  padding: 60px 0;
+  color: #999;
+  font-size: 16px;
+}
+
+.paginationContainer {
+  display: flex;
+  justify-content: center;
+  margin-top: 32px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .headerNav {
+    flex-direction: column;
+    height: auto;
+    padding: 12px;
+    gap: 12px;
+  }
+  
+  .categoryMenu {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .searchContainer {
+    margin: 0;
+    max-width: 100%;
+  }
+  
+  .carouselContainer {
+    margin: 12px;
+  }
+  
+  .carouselOverlay {
+    padding: 20px;
+  }
+  
+  .carouselTitle {
+    font-size: 20px;
+  }
+  
+  .carouselSummary {
+    font-size: 14px;
+  }
+  
+  .carouselMeta {
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .postsSection {
+    padding: 12px;
+  }
+} 
\ No newline at end of file
diff --git a/src/pages/PostCenter/index.tsx b/src/pages/PostCenter/index.tsx
new file mode 100644
index 0000000..b81efb0
--- /dev/null
+++ b/src/pages/PostCenter/index.tsx
@@ -0,0 +1,301 @@
+import React, { useEffect, useState } from 'react';
+import { Row, Col, Pagination, Input, Carousel, Menu, Card, message, Button } from 'antd';
+import { SearchOutlined, AuditOutlined } from '@ant-design/icons';
+import { getPostList, getPromotionPosts } from '@/services/post';
+import PostCard from '../PostCenter/PostCard';
+import styles from './index.module.css';
+import { Post } from '../PostCenter/types';
+import { useNavigate } from 'react-router-dom';
+import { useModel } from 'umi';
+
+const { Search } = Input;
+
+const PostCenter: React.FC = () => {
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [promotionPosts, setPromotionPosts] = useState<Post[]>([]);
+  const [total, setTotal] = useState<number>(0);
+  const [page, setPage] = useState<number>(1);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+  const [searchKeyword, setSearchKeyword] = useState<string>('');
+  const pageSize = 12;
+  const navigate = useNavigate();
+  const { initialState } = useModel('@@initialState');
+
+  // 检查是否为管理员 - 用户名包含admin
+  const isAdmin = initialState?.currentUser?.userName?.toLowerCase().includes('admin') || false;
+
+  const fetchPosts = async (current: number = 1, category?: string, searchTitle?: string) => {
+    try {
+      setLoading(true);
+      const params: any = {
+        pageNum: current,
+        pageSize: pageSize,
+        status: '1', // 只查询正常状态的帖子
+      };
+
+      // 根据分类筛选
+      if (category && category !== 'all') {
+        params.tags = category;
+      }
+
+      // 搜索关键词
+      if (searchTitle) {
+        params.title = searchTitle;
+      }
+
+      const response = await getPostList(params);
+      
+      if (response.code === 200) {
+        // 确保返回的数据符合 Post 类型
+        const formattedPosts = (response.rows || []).map((post: API.Post.PostInfo) => ({
+          ...post,
+          id: post.postId, // 确保id字段映射正确
+          tags: post.tags ? post.tags.split(',') : [],
+          views: post.views || 0,
+          comments: post.comments || 0,
+          favorites: post.favorites || 0,
+          likes: post.likes || 0,
+          coverImage: post.coverImage || '/images/404.png', // 使用本地默认图片
+          isPromoted: post.promotionPlanId != null && post.promotionPlanId > 0, // 添加推广标识
+        }));
+        setPosts(formattedPosts);
+        setTotal(response.total || 0);
+      } else {
+        message.error(response.msg || '获取帖子列表失败');
+        setPosts([]);
+        setTotal(0);
+      }
+    } catch (error) {
+      console.error('获取帖子失败:', error);
+      message.error('获取帖子列表失败，请稍后重试');
+      setPosts([]);
+      setTotal(0);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchPromotionPosts = async () => {
+    try {
+      const response = await getPromotionPosts();
+      if (response.code === 200) {
+        const formattedPosts = (response.data || []).map((post: API.Post.PostInfo) => ({
+          ...post,
+          id: post.postId,
+          tags: post.tags ? post.tags.split(',') : [],
+          views: post.views || 0,
+          comments: post.comments || 0,
+          favorites: post.favorites || 0,
+          likes: post.likes || 0,
+          coverImage: post.coverImage || '/images/404.png',
+          isPromoted: post.promotionPlanId != null && post.promotionPlanId > 0, // 添加推广标识
+        }));
+        setPromotionPosts(formattedPosts);
+      }
+    } catch (error) {
+      console.error('获取推广帖子失败:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchPosts(page, selectedCategory, searchKeyword);
+    fetchPromotionPosts();
+  }, [page, selectedCategory]);
+
+  const handleSearch = (value: string) => {
+    console.log('搜索:', value);
+    setSearchKeyword(value);
+    setPage(1); // 重置页码
+    fetchPosts(1, selectedCategory, value);
+  };
+
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage);
+    fetchPosts(newPage, selectedCategory, searchKeyword);
+  };
+
+  const handleCategoryChange = (category: string) => {
+    setSelectedCategory(category);
+    setPage(1); // 重置页码
+    setSearchKeyword(''); // 清空搜索
+    fetchPosts(1, category, '');
+  };
+
+  return (
+    <div className={styles.postCenterContainer}>
+      {/* 顶部导航 */}
+      <div className={styles.headerNav}>
+        <div className={styles.categoryMenu}>
+          <Button 
+            type={selectedCategory === 'all' ? 'primary' : 'text'}
+            onClick={() => handleCategoryChange('all')}
+            className={styles.categoryButton}
+          >
+            首页
+          </Button>
+          <Button 
+            type={selectedCategory === '日剧' ? 'primary' : 'text'}
+            onClick={() => handleCategoryChange('日剧')}
+            className={styles.categoryButton}
+          >
+            日剧
+          </Button>
+          <Button 
+            type={selectedCategory === '电影' ? 'primary' : 'text'}
+            onClick={() => handleCategoryChange('电影')}
+            className={styles.categoryButton}
+          >
+            电影
+          </Button>
+          <Button 
+            type={selectedCategory === '音乐' ? 'primary' : 'text'}
+            onClick={() => handleCategoryChange('音乐')}
+            className={styles.categoryButton}
+          >
+            音乐
+          </Button>
+          <Button 
+            type={selectedCategory === '合集' ? 'primary' : 'text'}
+            onClick={() => handleCategoryChange('合集')}
+            className={styles.categoryButton}
+          >
+            合集
+          </Button>
+          <Button 
+            type={selectedCategory === '动漫' ? 'primary' : 'text'}
+            onClick={() => handleCategoryChange('动漫')}
+            className={styles.categoryButton}
+          >
+            动漫
+          </Button>
+          <Button 
+            type={selectedCategory === '游戏' ? 'primary' : 'text'}
+            onClick={() => handleCategoryChange('游戏')}
+            className={styles.categoryButton}
+          >
+            游戏
+          </Button>
+        </div>
+        
+        <div className={styles.searchContainer}>
+          <Search
+            placeholder="搜索帖子..."
+            onSearch={handleSearch}
+            style={{ width: 300 }}
+            enterButton={<SearchOutlined />}
+            value={searchKeyword}
+            onChange={(e) => setSearchKeyword(e.target.value)}
+          />
+        </div>
+        
+        <div className={styles.userCenter}>
+          {isAdmin && (
+            <Button 
+              icon={<AuditOutlined />}
+              onClick={() => navigate('/post-review')}
+              style={{ marginRight: 16 }}
+            >
+              帖子审核
+            </Button>
+          )}
+          <Button 
+            type="primary" 
+            onClick={() => navigate('/user-center')}
+          >
+            个人中心
+          </Button>
+        </div>
+      </div>
+
+      {/* 轮播推荐图 */}
+      <div className={styles.carouselContainer}>
+        <Carousel autoplay>
+          {promotionPosts.length > 0 ? (
+            promotionPosts.map((post) => (
+              <div key={post.id} onClick={() => navigate(`/post-detail/${post.id}`)}>
+                <div 
+                  className={styles.carouselSlide}
+                  style={{
+                    backgroundImage: `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(${post.coverImage})`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    height: '300px',
+                    position: 'relative',
+                    cursor: 'pointer'
+                  }}
+                >
+                  <div className={styles.carouselOverlay}>
+                    <h2 className={styles.carouselTitle}>{post.title}</h2>
+                    <p className={styles.carouselSummary}>{post.summary}</p>
+                    <div className={styles.carouselMeta}>
+                      <span>作者: {post.author}</span>
+                      <span>浏览: {post.views}</span>
+                      <span>点赞: {post.likes}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))
+          ) : (
+            // 默认轮播图
+            <>
+              <div>
+                <div 
+                  className={styles.carouselSlide}
+                  style={{
+                    backgroundImage: `url(/images/flower.jpg)`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    height: '300px',
+                  }}
+                >
+                  <div className={styles.carouselOverlay}>
+                    <h2 className={styles.carouselTitle}>欢迎来到ThunderHub</h2>
+                    <p className={styles.carouselSummary}>发现精彩内容，分享美好时光</p>
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+        </Carousel>
+      </div>
+
+      {/* 卡片帖子区 */}
+      <div className={styles.postsSection}>
+        {selectedCategory !== 'all' && (
+          <div className={styles.categoryTitle}>
+            <h2>{selectedCategory} 分类</h2>
+            <p>共找到 {total} 篇相关帖子</p>
+          </div>
+        )}
+        
+        <Row gutter={[24, 24]} className={styles.postsRow}>
+          {posts.map((post) => (
+            <Col xs={24} sm={12} lg={8} xl={6} key={post.id} className={styles.postCol}>
+              <PostCard post={post} />
+            </Col>
+          ))}
+        </Row>
+
+        {posts.length === 0 && !loading && (
+          <div className={styles.emptyState}>
+            <p>暂无相关帖子</p>
+          </div>
+        )}
+
+        <div className={styles.paginationContainer}>
+          <Pagination
+            current={page}
+            pageSize={pageSize}
+            total={total}
+            onChange={handlePageChange}
+            showTotal={(total) => `共 ${total} 条帖子`}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PostCenter;
\ No newline at end of file
diff --git a/src/pages/PostCenter/types.ts b/src/pages/PostCenter/types.ts
new file mode 100644
index 0000000..4cfe237
--- /dev/null
+++ b/src/pages/PostCenter/types.ts
@@ -0,0 +1,55 @@
+export interface Post {
+  postId?: number;
+  id: string | number;
+  title: string;
+  author: string;
+  publishTime: string;
+  tags: string[];
+  views: number;
+  comments?: number;
+  favorites?: number;
+  likes?: number;
+  coverImage?: string;
+  summary?: string;
+  content?: string;
+  status?: string;
+  authorId?: number;
+  createTime?: string;
+  updateTime?: string;
+  promotionPlanId?: number;
+  isPromoted?: boolean;
+}
+
+export interface CommentType {
+  commentId?: number;
+  id: number;
+  author: string;
+  avatar: string;
+  content: string;
+  datetime: string;
+  replies: CommentType[];
+  likes?: number;
+  parentId?: number;
+  postId?: number;
+  userId?: number;
+  userName?: string;
+  userAvatar?: string;
+  status?: string;
+}
+
+export interface PostTag {
+  tagId: number;
+  tagName: string;
+  tagColor?: string;
+  postCount: number;
+  status?: string;
+}
+
+export interface PostFavorite {
+  favoriteId: number;
+  postId: number;
+  userId: number;
+  postTitle?: string;
+  postCover?: string;
+  status: string;
+} 
\ No newline at end of file
diff --git a/src/pages/PostReview/ReportManagement.tsx b/src/pages/PostReview/ReportManagement.tsx
new file mode 100644
index 0000000..f5c0e99
--- /dev/null
+++ b/src/pages/PostReview/ReportManagement.tsx
@@ -0,0 +1,325 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  Card, 
+  Table, 
+  Button, 
+  Modal, 
+  Tag, 
+  Space, 
+  message, 
+  Typography,
+  Input
+} from 'antd';
+import { 
+  EyeOutlined, 
+  CheckOutlined, 
+  CloseOutlined
+} from '@ant-design/icons';
+import { getReportList, handleReport } from '@/services/post';
+import styles from './index.module.css';
+
+const { Title, Paragraph } = Typography;
+const { TextArea } = Input;
+
+interface ReportInfo {
+  reportId: number;
+  postId: number;
+  postTitle: string;
+  reportUserId: number;
+  reportUserName: string;
+  reportReason: string;
+  status: string;
+  handleResult?: string;
+  handleTime?: string;
+  handleBy?: string;
+  createTime: string;
+}
+
+const ReportManagement: React.FC = () => {
+  const [reports, setReports] = useState<ReportInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [detailModalVisible, setDetailModalVisible] = useState(false);
+  const [handleModalVisible, setHandleModalVisible] = useState(false);
+  const [currentReport, setCurrentReport] = useState<ReportInfo | null>(null);
+  const [currentAction, setCurrentAction] = useState<'approve' | 'reject' | null>(null);
+  const [handleReason, setHandleReason] = useState('');
+
+  useEffect(() => {
+    fetchReports();
+  }, []);
+
+  const fetchReports = async () => {
+    setLoading(true);
+    try {
+      const response = await getReportList({ 
+        pageNum: 1, 
+        pageSize: 100
+      });
+      
+      if (response.code === 200) {
+        setReports(response.rows || []);
+      } else {
+        message.error(response.msg || '获取举报列表失败');
+      }
+    } catch (error) {
+      message.error('获取举报列表失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleReportAction = async (report: ReportInfo, action: 'approve' | 'reject') => {
+    setCurrentReport(report);
+    setCurrentAction(action);
+    setHandleReason('');
+    setHandleModalVisible(true);
+  };
+
+  const submitHandle = async () => {
+    if (!currentReport || !currentAction) return;
+
+    try {
+      const response = await handleReport(
+        currentReport.reportId, 
+        currentAction, 
+        currentReport.postId,
+        handleReason
+      );
+
+      if (response.code === 200) {
+        message.success(currentAction === 'approve' ? '举报处理成功，帖子已下架' : '举报已驳回');
+        fetchReports();
+      } else {
+        message.error(response.msg || '处理失败');
+      }
+    } catch (error) {
+      message.error('处理失败');
+    }
+    
+    setHandleModalVisible(false);
+    setCurrentReport(null);
+    setCurrentAction(null);
+    setHandleReason('');
+  };
+
+  const showDetail = (report: ReportInfo) => {
+    setCurrentReport(report);
+    setDetailModalVisible(true);
+  };
+
+  const columns = [
+    {
+      title: '举报帖子',
+      dataIndex: 'postTitle',
+      key: 'postTitle',
+      width: 180,
+      render: (text: string, record: ReportInfo) => (
+        <a onClick={() => showDetail(record)} style={{ color: '#1890ff' }}>
+          {text}
+        </a>
+      ),
+    },
+    {
+      title: '举报人',
+      dataIndex: 'reportUserName',
+      key: 'reportUserName',
+      width: 100,
+    },
+    {
+      title: '举报时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      width: 140,
+    },
+    {
+      title: '举报理由',
+      dataIndex: 'reportReason',
+      key: 'reportReason',
+      width: 150,
+      ellipsis: true,
+      render: (text: string) => (
+        <span title={text}>{text}</span>
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 80,
+      render: (status: string) => {
+        const statusMap: Record<string, { color: string; text: string }> = {
+          '0': { color: 'orange', text: '待处理' },
+          '1': { color: 'green', text: '已处理' },
+          '2': { color: 'red', text: '已驳回' }
+        };
+        const statusInfo = statusMap[status] || { color: 'gray', text: '未知' };
+        return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
+      },
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 300,
+      fixed: 'right' as const,
+      render: (text: any, record: ReportInfo) => (
+        <Space size="small">
+          <Button 
+            type="link" 
+            icon={<EyeOutlined />} 
+            onClick={() => showDetail(record)}
+            size="small"
+          >
+            查看
+          </Button>
+          {record.status === '0' && (
+            <>
+              <Button 
+                type="link" 
+                icon={<CheckOutlined />} 
+                style={{ color: 'green' }}
+                onClick={() => handleReportAction(record, 'approve')}
+                size="small"
+              >
+                确认下架
+              </Button>
+              <Button 
+                type="link" 
+                danger 
+                icon={<CloseOutlined />}
+                onClick={() => handleReportAction(record, 'reject')}
+                size="small"
+              >
+                驳回举报
+              </Button>
+            </>
+          )}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div className={styles.postReviewContainer}>
+      <Card title="帖子举报管理">
+        <Table
+          columns={columns}
+          dataSource={reports}
+          loading={loading}
+          rowKey="reportId"
+          scroll={{ x: 880 }}
+          pagination={{
+            pageSize: 10,
+            showTotal: (total) => `共 ${total} 条记录`,
+            showSizeChanger: true,
+            showQuickJumper: true,
+          }}
+        />
+      </Card>
+
+      {/* 举报详情弹窗 */}
+      <Modal
+        title="举报详情"
+        open={detailModalVisible}
+        onCancel={() => {
+          setDetailModalVisible(false);
+          setCurrentReport(null);
+        }}
+        footer={null}
+        width={600}
+      >
+        {currentReport && (
+          <div>
+            <div style={{ marginBottom: 16 }}>
+              <strong>举报帖子：</strong>{currentReport.postTitle}
+            </div>
+            <div style={{ marginBottom: 16 }}>
+              <strong>举报人：</strong>{currentReport.reportUserName}
+            </div>
+            <div style={{ marginBottom: 16 }}>
+              <strong>举报时间：</strong>{currentReport.createTime}
+            </div>
+            <div style={{ marginBottom: 16 }}>
+              <strong>举报理由：</strong>
+              <Paragraph>{currentReport.reportReason}</Paragraph>
+            </div>
+            {currentReport.status !== '0' && (
+              <>
+                <div style={{ marginBottom: 16 }}>
+                  <strong>处理结果：</strong>{currentReport.handleResult}
+                </div>
+                <div style={{ marginBottom: 16 }}>
+                  <strong>处理时间：</strong>{currentReport.handleTime}
+                </div>
+                <div style={{ marginBottom: 16 }}>
+                  <strong>处理人：</strong>{currentReport.handleBy}
+                </div>
+              </>
+            )}
+            {currentReport.status === '0' && (
+              <div style={{ marginTop: 16 }}>
+                <Space>
+                  <Button 
+                    type="primary" 
+                    icon={<CheckOutlined />}
+                    onClick={() => {
+                      handleReportAction(currentReport, 'approve');
+                      setDetailModalVisible(false);
+                    }}
+                  >
+                    确认下架
+                  </Button>
+                  <Button 
+                    danger 
+                    icon={<CloseOutlined />}
+                    onClick={() => {
+                      handleReportAction(currentReport, 'reject');
+                      setDetailModalVisible(false);
+                    }}
+                  >
+                    驳回举报
+                  </Button>
+                </Space>
+              </div>
+            )}
+          </div>
+        )}
+      </Modal>
+
+      {/* 处理举报弹窗 */}
+      <Modal
+        title={currentAction === 'approve' ? '确认下架帖子' : '驳回举报'}
+        open={handleModalVisible}
+        onOk={submitHandle}
+        onCancel={() => {
+          setHandleModalVisible(false);
+          setCurrentReport(null);
+          setCurrentAction(null);
+          setHandleReason('');
+        }}
+        okText="确定"
+        cancelText="取消"
+      >
+        <div style={{ marginBottom: 16 }}>
+          <strong>帖子：</strong>{currentReport?.postTitle}
+        </div>
+        <div>
+          <strong>
+            {currentAction === 'approve' ? '下架理由' : '驳回理由'}
+            （可选）：
+          </strong>
+          <TextArea
+            value={handleReason}
+            onChange={(e) => setHandleReason(e.target.value)}
+            placeholder={
+              currentAction === 'approve' ? '请输入下架理由...' : '请输入驳回理由...'
+            }
+            rows={4}
+            style={{ marginTop: 8 }}
+          />
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default ReportManagement; 
\ No newline at end of file
diff --git a/src/pages/PostReview/index.module.css b/src/pages/PostReview/index.module.css
new file mode 100644
index 0000000..887b367
--- /dev/null
+++ b/src/pages/PostReview/index.module.css
@@ -0,0 +1,50 @@
+.postReviewContainer {
+  padding: 24px;
+}
+
+.postDetail {
+  padding: 16px 0;
+}
+
+.postMeta {
+  margin: 16px 0;
+  padding: 16px;
+  background: #f5f5f5;
+  border-radius: 8px;
+}
+
+.postMeta p {
+  margin: 8px 0;
+}
+
+.postCover {
+  margin: 16px 0;
+  text-align: center;
+}
+
+.postTags {
+  margin: 16px 0;
+}
+
+.postSummary {
+  margin: 16px 0;
+  padding: 16px;
+  background: #f9f9f9;
+  border-radius: 8px;
+}
+
+.postContent {
+  margin: 16px 0;
+  padding: 16px;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.postActions {
+  margin-top: 24px;
+  text-align: center;
+  padding-top: 16px;
+  border-top: 1px solid #e8e8e8;
+} 
\ No newline at end of file
diff --git a/src/pages/PostReview/index.tsx b/src/pages/PostReview/index.tsx
new file mode 100644
index 0000000..d3d6036
--- /dev/null
+++ b/src/pages/PostReview/index.tsx
@@ -0,0 +1,394 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  Card, 
+  Table, 
+  Button, 
+  Modal, 
+  Tag, 
+  Space, 
+  message, 
+  Popconfirm,
+  Typography,
+  Image,
+  Row,
+  Col,
+  Input,
+  Tabs
+} from 'antd';
+import { 
+  EyeOutlined, 
+  CheckOutlined, 
+  CloseOutlined,
+  DeleteOutlined
+} from '@ant-design/icons';
+import { getReviewPosts, reviewPost, takeDownPost } from '@/services/post';
+import ReportManagement from './ReportManagement';
+import styles from './index.module.css';
+
+const { Title, Paragraph } = Typography;
+const { TextArea } = Input;
+const { TabPane } = Tabs;
+
+interface PostReviewProps {}
+
+const PostReview: React.FC<PostReviewProps> = () => {
+  const [activeTab, setActiveTab] = useState('review');
+  const [posts, setPosts] = useState<API.Post.PostInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [detailModalVisible, setDetailModalVisible] = useState(false);
+  const [reasonModalVisible, setReasonModalVisible] = useState(false);
+  const [currentPost, setCurrentPost] = useState<API.Post.PostInfo | null>(null);
+  const [currentAction, setCurrentAction] = useState<'approve' | 'reject' | 'takedown' | null>(null);
+  const [reason, setReason] = useState('');
+
+  useEffect(() => {
+    if (activeTab === 'review') {
+      fetchPendingPosts();
+    }
+  }, [activeTab]);
+
+  const fetchPendingPosts = async () => {
+    setLoading(true);
+    try {
+      const response = await getReviewPosts({ 
+        pageNum: 1, 
+        pageSize: 100, 
+        status: '0' // 只查询待审核的帖子
+      });
+      
+      if (response.code === 200) {
+        setPosts(response.rows || []);
+      } else {
+        message.error(response.msg || '获取待审核帖子失败');
+      }
+    } catch (error) {
+      message.error('获取待审核帖子失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAction = async (postId: number, action: 'approve' | 'reject', reason?: string) => {
+    try {
+      const response = await reviewPost(postId, action, reason);
+
+      if (response.code === 200) {
+        message.success(action === 'approve' ? '帖子审核通过' : '帖子已拒绝');
+        fetchPendingPosts();
+      } else {
+        message.error(response.msg || '操作失败');
+      }
+    } catch (error) {
+      message.error('操作失败');
+    }
+  };
+
+  const handleTakeDown = async (postId: number, reason?: string) => {
+    try {
+      const response = await takeDownPost(postId, reason);
+
+      if (response.code === 200) {
+        message.success('帖子已下架');
+        fetchPendingPosts();
+      } else {
+        message.error(response.msg || '操作失败');
+      }
+    } catch (error) {
+      message.error('操作失败');
+    }
+  };
+
+  const showReasonModal = (post: API.Post.PostInfo, action: 'approve' | 'reject' | 'takedown') => {
+    setCurrentPost(post);
+    setCurrentAction(action);
+    setReason('');
+    setReasonModalVisible(true);
+  };
+
+  const handleReasonSubmit = () => {
+    if (!currentPost || !currentAction) return;
+
+    if (currentAction === 'takedown') {
+      handleTakeDown(currentPost.postId || 0, reason);
+    } else {
+      handleAction(currentPost.postId || 0, currentAction, reason);
+    }
+    
+    setReasonModalVisible(false);
+    setCurrentPost(null);
+    setCurrentAction(null);
+    setReason('');
+  };
+
+  const handleViewDetail = (post: API.Post.PostInfo) => {
+    setCurrentPost(post);
+    setDetailModalVisible(true);
+  };
+
+  const columns = [
+    {
+      title: '帖子标题',
+      dataIndex: 'title',
+      key: 'title',
+      width: 200,
+      render: (text: string, record: API.Post.PostInfo) => (
+        <a onClick={() => handleViewDetail(record)}>{text}</a>
+      ),
+    },
+    {
+      title: '作者',
+      dataIndex: 'author',
+      key: 'author',
+      width: 100,
+    },
+    {
+      title: '发布时间',
+      dataIndex: 'publishTime',
+      key: 'publishTime',
+      width: 150,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 100,
+      render: (status: string) => {
+        const statusMap: Record<string, { color: string; text: string }> = {
+          '0': { color: 'orange', text: '待审核' },
+          '1': { color: 'green', text: '已发布' },
+          '2': { color: 'red', text: '已拒绝' },
+          '3': { color: 'gray', text: '已下架' }
+        };
+        const statusInfo = statusMap[status] || { color: 'gray', text: '未知' };
+        return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
+      },
+    },
+    {
+      title: '标签',
+      dataIndex: 'tags',
+      key: 'tags',
+      width: 150,
+      render: (tags: string) => {
+        if (!tags) return '-';
+        return tags.split(',').map(tag => (
+          <Tag key={tag} color="blue">{tag}</Tag>
+        ));
+      },
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 250,
+      render: (text: any, record: API.Post.PostInfo) => (
+        <Space size="small">
+          <Button 
+            type="link" 
+            icon={<EyeOutlined />} 
+            onClick={() => handleViewDetail(record)}
+          >
+            查看
+          </Button>
+          {record.status === '0' && (
+            <>
+              <Button 
+                type="link" 
+                icon={<CheckOutlined />} 
+                style={{ color: 'green' }}
+                onClick={() => showReasonModal(record, 'approve')}
+              >
+                通过
+              </Button>
+              <Button 
+                type="link" 
+                danger 
+                icon={<CloseOutlined />}
+                onClick={() => showReasonModal(record, 'reject')}
+              >
+                拒绝
+              </Button>
+            </>
+          )}
+          {record.status === '1' && (
+            <Button 
+              type="link" 
+              danger 
+              icon={<DeleteOutlined />}
+              onClick={() => showReasonModal(record, 'takedown')}
+            >
+              下架
+            </Button>
+          )}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div className={styles.postReviewContainer}>
+      <Card title="帖子审核管理">
+        <Tabs activeKey={activeTab} onChange={setActiveTab}>
+          <TabPane tab="帖子发布管理" key="review">
+            <Table
+              columns={columns}
+              dataSource={posts}
+              loading={loading}
+              rowKey="postId"
+              pagination={{
+                pageSize: 10,
+                showTotal: (total) => `共 ${total} 条记录`,
+              }}
+            />
+          </TabPane>
+          
+          <TabPane tab="帖子举报管理" key="report">
+            <ReportManagement />
+          </TabPane>
+        </Tabs>
+      </Card>
+
+      {/* 帖子详情弹窗 */}
+      <Modal
+        title="帖子详情"
+        open={detailModalVisible}
+        onCancel={() => {
+          setDetailModalVisible(false);
+          setCurrentPost(null);
+        }}
+        footer={null}
+        width={800}
+      >
+        {currentPost && (
+          <div className={styles.postDetail}>
+            <Title level={3}>{currentPost.title}</Title>
+            
+            <div className={styles.postMeta}>
+              <Row gutter={16}>
+                <Col span={12}>
+                  <p><strong>作者：</strong>{currentPost.author}</p>
+                  <p><strong>发布时间：</strong>{currentPost.publishTime}</p>
+                </Col>
+                <Col span={12}>
+                  <p><strong>浏览量：</strong>{currentPost.views || 0}</p>
+                  <p><strong>点赞数：</strong>{currentPost.likes || 0}</p>
+                </Col>
+              </Row>
+            </div>
+
+            {currentPost.coverImage && (
+              <div className={styles.postCover}>
+                <Image
+                  src={currentPost.coverImage}
+                  alt="封面图片"
+                  style={{ maxWidth: '100%', maxHeight: '200px' }}
+                />
+              </div>
+            )}
+
+            <div className={styles.postTags}>
+              <strong>标签：</strong>
+              {currentPost.tags ? (
+                currentPost.tags.split(',').map(tag => (
+                  <Tag key={tag} color="blue">{tag}</Tag>
+                ))
+              ) : (
+                <span>无标签</span>
+              )}
+            </div>
+
+            <div className={styles.postSummary}>
+              <strong>摘要：</strong>
+              <Paragraph>{currentPost.summary}</Paragraph>
+            </div>
+
+            <div className={styles.postContent}>
+              <strong>内容：</strong>
+              <div dangerouslySetInnerHTML={{ __html: currentPost.content || '' }} />
+            </div>
+
+            <div className={styles.postActions}>
+              <Space>
+                {currentPost.status === '0' && (
+                  <>
+                    <Button 
+                      type="primary" 
+                      icon={<CheckOutlined />}
+                      onClick={() => {
+                        showReasonModal(currentPost, 'approve');
+                        setDetailModalVisible(false);
+                      }}
+                    >
+                      通过审核
+                    </Button>
+                    <Button 
+                      danger 
+                      icon={<CloseOutlined />}
+                      onClick={() => {
+                        showReasonModal(currentPost, 'reject');
+                        setDetailModalVisible(false);
+                      }}
+                    >
+                      拒绝审核
+                    </Button>
+                  </>
+                )}
+                {currentPost.status === '1' && (
+                  <Button 
+                    danger 
+                    icon={<DeleteOutlined />}
+                    onClick={() => {
+                      showReasonModal(currentPost, 'takedown');
+                      setDetailModalVisible(false);
+                    }}
+                  >
+                    强制下架
+                  </Button>
+                )}
+              </Space>
+            </div>
+          </div>
+        )}
+      </Modal>
+
+      {/* 审核理由弹窗 */}
+      <Modal
+        title={
+          currentAction === 'approve' ? '审核通过' :
+          currentAction === 'reject' ? '审核拒绝' : '强制下架'
+        }
+        open={reasonModalVisible}
+        onOk={handleReasonSubmit}
+        onCancel={() => {
+          setReasonModalVisible(false);
+          setCurrentPost(null);
+          setCurrentAction(null);
+          setReason('');
+        }}
+        okText="确定"
+        cancelText="取消"
+      >
+        <div style={{ marginBottom: 16 }}>
+          <strong>帖子：</strong>{currentPost?.title}
+        </div>
+        <div>
+          <strong>
+            {currentAction === 'approve' ? '通过理由' :
+             currentAction === 'reject' ? '拒绝理由' : '下架理由'}
+            （可选）：
+          </strong>
+          <TextArea
+            value={reason}
+            onChange={(e) => setReason(e.target.value)}
+            placeholder={
+              currentAction === 'approve' ? '请输入审核通过的理由...' :
+              currentAction === 'reject' ? '请输入审核拒绝的理由...' : '请输入强制下架的理由...'
+            }
+            rows={4}
+            style={{ marginTop: 8 }}
+          />
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default PostReview; 
\ No newline at end of file
diff --git a/src/pages/UserCenter/index.module.css b/src/pages/UserCenter/index.module.css
new file mode 100644
index 0000000..3728909
--- /dev/null
+++ b/src/pages/UserCenter/index.module.css
@@ -0,0 +1,90 @@
+.userCenterContainer {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.userCenterCard {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.tabContent {
+  padding: 16px 0;
+}
+
+.tabHeader {
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.emptyState {
+  text-align: center;
+  padding: 60px 0;
+  color: #999;
+}
+
+.emptyState p {
+  margin-top: 16px;
+  font-size: 16px;
+}
+
+.paymentModal {
+  text-align: center;
+}
+
+.paymentInfo {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #f9f9f9;
+  border-radius: 8px;
+}
+
+.paymentInfo h3 {
+  margin: 0 0 8px 0;
+  color: #1890ff;
+}
+
+.paymentInfo p {
+  margin: 4px 0;
+  color: #666;
+}
+
+.qrCode {
+  margin: 24px 0;
+}
+
+.qrCodePlaceholder {
+  padding: 24px;
+  border: 2px dashed #d9d9d9;
+  border-radius: 8px;
+  background: #fafafa;
+}
+
+.mockQrCode {
+  width: 120px;
+  height: 120px;
+  margin: 16px auto;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+}
+
+.mockQrCode p {
+  margin: 4px 0;
+  font-size: 12px;
+  color: #666;
+}
+
+.paymentActions {
+  margin-top: 24px;
+} 
\ No newline at end of file
diff --git a/src/pages/UserCenter/index.tsx b/src/pages/UserCenter/index.tsx
new file mode 100644
index 0000000..13de6ad
--- /dev/null
+++ b/src/pages/UserCenter/index.tsx
@@ -0,0 +1,968 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  Card, 
+  Tabs, 
+  Button, 
+  Table, 
+  Modal, 
+  Form, 
+  Input, 
+  Select, 
+  Upload, 
+  message, 
+  Tag, 
+  Space,
+  Popconfirm,
+  Row,
+  Col,
+  Radio,
+  InputNumber,
+  Image
+} from 'antd';
+import { 
+  PlusOutlined, 
+  EditOutlined, 
+  DeleteOutlined, 
+  EyeOutlined,
+  UploadOutlined,
+  HeartOutlined,
+  LoadingOutlined
+} from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import { 
+  getMyPosts, 
+  getMyFavorites, 
+  publishPost, 
+  updatePost, 
+  deletePost,
+  getAvailableTags,
+  uploadImage,
+  deleteImage,
+  getPromotionPlans,
+  createPayment,
+  getPromotionStatus,
+  confirmPayment,
+  cancelPayment
+} from '@/services/post';
+import PostCard from '../PostCenter/PostCard';
+import styles from './index.module.css';
+
+const { TabPane } = Tabs;
+const { TextArea } = Input;
+const { Option } = Select;
+
+interface PostFormData {
+  title: string;
+  content: string;
+  summary: string;
+  tags: string[] | string;
+  promotionPlan?: number;
+  coverImage?: string;
+}
+
+interface PromotionPlan {
+  id: number;
+  name: string;
+  description: string;
+  price: number;
+  duration: number;
+}
+
+interface PaymentRecord {
+  paymentId: number;
+  postId: number;
+  planId: number;
+  userId: number;
+  amount: number;
+  paymentStatus: string;
+  paymentTime: string;
+}
+
+const UserCenter: React.FC = () => {
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState('myPosts');
+  const [publishModalVisible, setPublishModalVisible] = useState(false);
+  const [editModalVisible, setEditModalVisible] = useState(false);
+  const [paymentModalVisible, setPaymentModalVisible] = useState(false);
+  const [myPosts, setMyPosts] = useState<API.Post.PostInfo[]>([]);
+  const [favorites, setFavorites] = useState<API.Post.PostInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  const [editForm] = Form.useForm();
+  const [selectedPromotion, setSelectedPromotion] = useState<PromotionPlan | null>(null);
+  const [currentEditPost, setCurrentEditPost] = useState<API.Post.PostInfo | null>(null);
+  const [availableTags, setAvailableTags] = useState<API.Post.PostTag[]>([]);
+  const [promotionPlans, setPromotionPlans] = useState<PromotionPlan[]>([]);
+  const [uploadLoading, setUploadLoading] = useState(false);
+  const [editUploadLoading, setEditUploadLoading] = useState(false);
+  const [coverImageUrl, setCoverImageUrl] = useState<string>('');
+  const [editCoverImageUrl, setEditCoverImageUrl] = useState<string>('');
+  const [currentPayment, setCurrentPayment] = useState<PaymentRecord | null>(null);
+  const [isEditingPromotion, setIsEditingPromotion] = useState(false);
+
+  useEffect(() => {
+    if (activeTab === 'myPosts') {
+      fetchMyPosts();
+    } else if (activeTab === 'favorites') {
+      fetchFavorites();
+    }
+  }, [activeTab]);
+
+  useEffect(() => {
+    fetchAvailableTags();
+    fetchPromotionPlans();
+  }, []);
+
+  const fetchMyPosts = async () => {
+    setLoading(true);
+    try {
+      const response = await getMyPosts({ pageNum: 1, pageSize: 100 });
+      if (response.code === 200) {
+        setMyPosts(response.rows || []);
+      } else {
+        message.error(response.msg || '获取我的帖子失败');
+      }
+    } catch (error) {
+      message.error('获取我的帖子失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchFavorites = async () => {
+    setLoading(true);
+    try {
+      const response = await getMyFavorites({ pageNum: 1, pageSize: 100 });
+      if (response.code === 200) {
+        setFavorites(response.rows || []);
+      } else {
+        message.error(response.msg || '获取收藏列表失败');
+      }
+    } catch (error) {
+      message.error('获取收藏列表失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchAvailableTags = async () => {
+    try {
+      const response = await getAvailableTags();
+      if (response.code === 200) {
+        setAvailableTags(response.data || []);
+      } else {
+        message.error(response.msg || '获取可用标签失败');
+      }
+    } catch (error) {
+      message.error('获取可用标签失败');
+    }
+  };
+
+  const fetchPromotionPlans = async () => {
+    try {
+      const response = await getPromotionPlans();
+      if (response.code === 200) {
+        setPromotionPlans(response.data || []);
+      }
+    } catch (error) {
+      console.error('获取推广计划失败:', error);
+    }
+  };
+
+  const handlePublishPost = async (values: PostFormData) => {
+    try {
+      if (values.promotionPlan && selectedPromotion) {
+        // 如果选择了推广，创建支付记录
+        const paymentResponse = await createPayment({
+          postId: 0, // 新帖子，暂时设为0，后端会处理
+          planId: selectedPromotion.id,
+          amount: selectedPromotion.price
+        });
+        
+        if (paymentResponse.code === 200) {
+          setCurrentPayment(paymentResponse.data);
+        setPaymentModalVisible(true);
+        return;
+        } else {
+          message.error(paymentResponse.msg || '创建支付记录失败');
+          return;
+        }
+      }
+      
+      // 直接发布帖子
+      await submitPost(values);
+    } catch (error) {
+      message.error('发布帖子失败');
+    }
+  };
+
+  const submitPost = async (values: PostFormData) => {
+    try {
+      // 处理标签格式
+      const tagsString = Array.isArray(values.tags) ? values.tags.join(',') : values.tags;
+      
+      const postData = {
+        title: values.title,
+        content: values.content,
+        summary: values.summary,
+        tags: tagsString,
+        promotionPlan: values.promotionPlan,
+        coverImage: coverImageUrl || undefined
+      };
+      
+      const response = await publishPost(postData);
+      if (response.code === 200) {
+        message.success('帖子发布成功');
+        setPublishModalVisible(false);
+        form.resetFields();
+        setSelectedPromotion(null);
+        setCoverImageUrl('');
+        fetchMyPosts();
+      } else {
+        message.error(response.msg || '发布帖子失败');
+      }
+    } catch (error) {
+      message.error('发布帖子失败');
+    }
+  };
+
+  const handleEditPost = async (post: API.Post.PostInfo) => {
+    setCurrentEditPost(post);
+    const tagsArray = post.tags ? (typeof post.tags === 'string' ? post.tags.split(',') : post.tags) : [];
+    
+    // 检查推广状态
+    try {
+      const promotionResponse = await getPromotionStatus(post.postId || post.id || 0);
+      if (promotionResponse.code === 200) {
+        const { hasPromotion, promotionPlanId } = promotionResponse.data;
+        setIsEditingPromotion(hasPromotion);
+        
+        editForm.setFieldsValue({
+          title: post.title,
+          content: post.content,
+          summary: post.summary,
+          tags: tagsArray,
+          promotionPlan: hasPromotion ? promotionPlanId : undefined
+        });
+      }
+    } catch (error) {
+      console.error('获取推广状态失败:', error);
+    editForm.setFieldsValue({
+      title: post.title,
+      content: post.content,
+      summary: post.summary,
+        tags: tagsArray,
+        promotionPlan: post.promotionPlanId
+    });
+    }
+    
+    setEditCoverImageUrl(post.coverImage || '');
+    setEditModalVisible(true);
+  };
+
+  const handleUpdatePost = async (values: any) => {
+    if (!currentEditPost) return;
+    
+    try {
+      // 处理标签格式
+      const tagsString = Array.isArray(values.tags) ? values.tags.join(',') : values.tags;
+      
+      // 检查是否选择了新的推广计划
+      const hasNewPromotion = values.promotionPlan && !isEditingPromotion;
+      
+      if (hasNewPromotion) {
+        // 如果选择了新的推广计划，需要先创建支付记录
+        const selectedPlan = promotionPlans.find(p => p.id === values.promotionPlan);
+        if (selectedPlan) {
+          setSelectedPromotion(selectedPlan);
+          
+          // 创建支付记录
+          const paymentResponse = await createPayment({
+            postId: currentEditPost.postId || currentEditPost.id || 0,
+            planId: selectedPlan.id,
+            amount: selectedPlan.price
+          });
+          
+          if (paymentResponse.code === 200) {
+            setCurrentPayment(paymentResponse.data);
+            setPaymentModalVisible(true);
+            return; // 等待支付完成后再更新帖子
+          } else {
+            message.error(paymentResponse.msg || '创建支付记录失败');
+            return;
+          }
+        }
+      }
+      
+      // 直接更新帖子（没有新推广或已有推广）
+      await updatePostDirectly(values, tagsString);
+    } catch (error) {
+      message.error('更新帖子失败');
+    }
+  };
+
+  const updatePostDirectly = async (values: any, tagsString: string) => {
+    if (!currentEditPost) return;
+    
+      const updateData = {
+        ...currentEditPost,
+      title: values.title,
+      content: values.content,
+      summary: values.summary,
+      tags: tagsString,
+      coverImage: editCoverImageUrl || currentEditPost.coverImage,
+      promotionPlanId: values.promotionPlan
+    };
+    
+      const response = await updatePost(updateData);
+      if (response.code === 200) {
+        message.success('帖子更新成功');
+        setEditModalVisible(false);
+        editForm.resetFields();
+        setCurrentEditPost(null);
+      setEditCoverImageUrl('');
+      setIsEditingPromotion(false);
+        fetchMyPosts();
+      } else {
+        message.error(response.msg || '更新帖子失败');
+    }
+  };
+
+  const handleDeletePost = async (postId: number) => {
+    try {
+      const response = await deletePost(postId);
+      if (response.code === 200) {
+        message.success('帖子删除成功');
+        fetchMyPosts();
+      } else {
+        message.error(response.msg || '删除帖子失败');
+      }
+    } catch (error) {
+      message.error('删除帖子失败');
+    }
+  };
+
+  const handleViewPost = (postId: number) => {
+    navigate(`/post-detail/${postId}`);
+  };
+
+  const handlePaymentConfirm = async () => {
+    if (!currentPayment) return;
+    
+    try {
+      const response = await confirmPayment(currentPayment.paymentId);
+      if (response.code === 200) {
+        message.success('支付成功，推广已生效');
+    setPaymentModalVisible(false);
+        setCurrentPayment(null);
+        
+        // 如果是编辑模式，完成帖子更新
+        if (editModalVisible && currentEditPost) {
+          const values = editForm.getFieldsValue();
+          const tagsString = Array.isArray(values.tags) ? values.tags.join(',') : values.tags;
+          await updatePostDirectly(values, tagsString);
+        } else {
+          // 如果是发布模式
+    setPublishModalVisible(false);
+    form.resetFields();
+    setSelectedPromotion(null);
+          setCoverImageUrl('');
+    fetchMyPosts();
+        }
+      } else {
+        message.error(response.msg || '支付确认失败');
+      }
+    } catch (error) {
+      message.error('支付确认失败');
+    }
+  };
+
+  const handlePaymentCancel = async () => {
+    if (!currentPayment) return;
+    
+    try {
+      await cancelPayment(currentPayment.paymentId);
+      message.info('支付已取消');
+      setPaymentModalVisible(false);
+      setCurrentPayment(null);
+      setSelectedPromotion(null);
+    } catch (error) {
+      console.error('取消支付失败:', error);
+      setPaymentModalVisible(false);
+      setCurrentPayment(null);
+      setSelectedPromotion(null);
+    }
+  };
+
+  const handleImageUpload = async (file: any) => {
+    setUploadLoading(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      
+      const response = await uploadImage(formData);
+      if (response.code === 200 && response.data) {
+        setCoverImageUrl(response.data.url);
+        message.success('图片上传成功');
+        return false; // 阻止自动上传
+      } else {
+        message.error(response.msg || '图片上传失败');
+      }
+    } catch (error) {
+      message.error('图片上传失败');
+    } finally {
+      setUploadLoading(false);
+    }
+    return false;
+  };
+
+  const handleDeleteImage = async () => {
+    if (coverImageUrl) {
+      try {
+        const filename = coverImageUrl.split('/').pop();
+        if (filename) {
+          await deleteImage(filename);
+        }
+        setCoverImageUrl('');
+        message.success('图片删除成功');
+      } catch (error) {
+        message.error('图片删除失败');
+      }
+    }
+  };
+
+  const handleCancelPublish = async () => {
+    // 如果有上传的图片但没有发布帖子，删除图片
+    if (coverImageUrl) {
+      try {
+        const filename = coverImageUrl.split('/').pop();
+        if (filename) {
+          await deleteImage(filename);
+        }
+      } catch (error) {
+        console.error('删除图片失败:', error);
+      }
+    }
+    
+    setPublishModalVisible(false);
+    form.resetFields();
+    setSelectedPromotion(null);
+    setCoverImageUrl('');
+  };
+
+  const uploadButton = (
+    <div>
+      {uploadLoading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>上传封面</div>
+    </div>
+  );
+
+  const handleEditImageUpload = async (file: any) => {
+    setEditUploadLoading(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      
+      const response = await uploadImage(formData);
+      if (response.code === 200 && response.data) {
+        // 如果有旧图片，删除它
+        if (editCoverImageUrl) {
+          const oldFilename = editCoverImageUrl.split('/').pop();
+          if (oldFilename) {
+            await deleteImage(oldFilename);
+          }
+        }
+        
+        setEditCoverImageUrl(response.data.url);
+        message.success('图片上传成功');
+        return false;
+      } else {
+        message.error(response.msg || '图片上传失败');
+      }
+    } catch (error) {
+      message.error('图片上传失败');
+    } finally {
+      setEditUploadLoading(false);
+    }
+    return false;
+  };
+
+  const handleDeleteEditImage = async () => {
+    if (editCoverImageUrl) {
+      try {
+        const filename = editCoverImageUrl.split('/').pop();
+        if (filename) {
+          await deleteImage(filename);
+        }
+        setEditCoverImageUrl('');
+        message.success('图片删除成功');
+      } catch (error) {
+        message.error('图片删除失败');
+      }
+    }
+  };
+
+  const editUploadButton = (
+    <div>
+      {editUploadLoading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>上传封面</div>
+    </div>
+  );
+
+  const myPostsColumns = [
+    {
+      title: '标题',
+      dataIndex: 'title',
+      key: 'title',
+      render: (text: string, record: API.Post.PostInfo) => (
+        <a onClick={() => handleViewPost(record.postId || record.id || 0)}>{text}</a>
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status: string) => {
+        const statusMap: Record<string, { color: string; text: string }> = {
+          '0': { color: 'orange', text: '待审核' },
+          '1': { color: 'green', text: '已发布' },
+          '2': { color: 'red', text: '已拒绝' },
+          '3': { color: 'gray', text: '已下架' }
+        };
+        const statusInfo = statusMap[status] || { color: 'gray', text: '未知' };
+        return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
+      },
+    },
+    {
+      title: '浏览量',
+      dataIndex: 'views',
+      key: 'views',
+    },
+    {
+      title: '评论数',
+      dataIndex: 'comments',
+      key: 'comments',
+    },
+    {
+      title: '收藏数',
+      dataIndex: 'favorites',
+      key: 'favorites',
+    },
+    {
+      title: '点赞数',
+      dataIndex: 'likes',
+      key: 'likes',
+    },
+    {
+      title: '发布时间',
+      dataIndex: 'publishTime',
+      key: 'publishTime',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (text: any, record: API.Post.PostInfo) => (
+        <Space size="middle">
+          <Button 
+            type="link" 
+            icon={<EyeOutlined />} 
+            onClick={() => handleViewPost(record.postId || record.id || 0)}
+          >
+            查看
+          </Button>
+          <Button 
+            type="link" 
+            icon={<EditOutlined />} 
+            onClick={() => handleEditPost(record)}
+          >
+            编辑
+          </Button>
+          <Popconfirm
+            title="确定要删除这篇帖子吗？"
+            onConfirm={() => handleDeletePost(record.postId || record.id || 0)}
+            okText="确定"
+            cancelText="取消"
+          >
+            <Button type="link" danger icon={<DeleteOutlined />}>
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div className={styles.userCenterContainer}>
+      <Card title="个人中心" className={styles.userCenterCard}>
+        <Tabs activeKey={activeTab} onChange={setActiveTab}>
+          <TabPane tab="我的帖子" key="myPosts">
+            <div className={styles.tabContent}>
+              <div className={styles.tabHeader}>
+                <Button 
+                  type="primary" 
+                  icon={<PlusOutlined />}
+                  onClick={() => setPublishModalVisible(true)}
+                >
+                  发布新帖子
+                </Button>
+              </div>
+              <Table
+                columns={myPostsColumns}
+                dataSource={myPosts}
+                loading={loading}
+                rowKey="id"
+                pagination={{
+                  pageSize: 10,
+                  showTotal: (total) => `共 ${total} 条记录`,
+                }}
+              />
+            </div>
+          </TabPane>
+          
+          <TabPane tab="我的收藏" key="favorites">
+            <div className={styles.tabContent}>
+              <Row gutter={[24, 24]}>
+                {favorites.map((post: any) => {
+                  // 确保post对象有正确的id字段
+                  const formattedPost = {
+                    ...post,
+                    id: post.postId || post.id,
+                    tags: post.tags ? (Array.isArray(post.tags) ? post.tags : post.tags.split(',')) : []
+                  };
+                  return (
+                    <Col xs={24} sm={12} md={8} key={formattedPost.id}>
+                      <PostCard post={formattedPost} />
+                  </Col>
+                  );
+                })}
+              </Row>
+              {favorites.length === 0 && !loading && (
+                <div className={styles.emptyState}>
+                  <HeartOutlined style={{ fontSize: 48, color: '#ccc' }} />
+                  <p>暂无收藏的帖子</p>
+                </div>
+              )}
+            </div>
+          </TabPane>
+        </Tabs>
+      </Card>
+
+      {/* 发布帖子弹窗 */}
+      <Modal
+        title="发布新帖子"
+        open={publishModalVisible}
+        onCancel={handleCancelPublish}
+        footer={null}
+        width={800}
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handlePublishPost}
+        >
+          <Form.Item
+            name="title"
+            label="帖子标题"
+            rules={[{ required: true, message: '请输入帖子标题' }]}
+          >
+            <Input placeholder="请输入帖子标题" />
+          </Form.Item>
+          
+          <Form.Item
+            name="summary"
+            label="帖子摘要"
+            rules={[{ required: true, message: '请输入帖子摘要' }]}
+          >
+            <TextArea rows={3} placeholder="请输入帖子摘要" />
+          </Form.Item>
+          
+          <Form.Item
+            name="content"
+            label="帖子内容"
+            rules={[{ required: true, message: '请输入帖子内容' }]}
+          >
+            <TextArea rows={8} placeholder="请输入帖子内容" />
+          </Form.Item>
+          
+          <Form.Item
+            name="coverImage"
+            label="封面图片（可选）"
+          >
+            <Upload
+              listType="picture-card"
+              showUploadList={false}
+              beforeUpload={handleImageUpload}
+            >
+              {coverImageUrl ? (
+                <Image
+                  src={coverImageUrl}
+                  alt="封面"
+                  width="100%"
+                  height="100%"
+                  style={{ objectFit: 'cover' }}
+                />
+              ) : (
+                uploadButton
+              )}
+            </Upload>
+            {coverImageUrl && (
+              <Button 
+                type="link" 
+                onClick={handleDeleteImage}
+                style={{ padding: 0, marginTop: 8 }}
+              >
+                删除图片
+              </Button>
+            )}
+          </Form.Item>
+          
+          <Form.Item
+            name="tags"
+            label="标签"
+            rules={[{ required: true, message: '请选择标签' }]}
+          >
+            <Select
+              mode="multiple"
+              placeholder="请选择标签"
+              allowClear
+              style={{ width: '100%' }}
+            >
+              {availableTags.map(tag => (
+                <Select.Option key={tag.tagId} value={tag.tagName}>
+                  <Tag color={tag.tagColor}>{tag.tagName}</Tag>
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+          
+          <Form.Item
+            name="promotionPlan"
+            label="推广选项（可选）"
+          >
+            <Radio.Group>
+              <Space direction="vertical">
+                <Radio value={undefined}>不选择推广</Radio>
+                {promotionPlans.map(plan => (
+                  <Radio key={plan.id} value={plan.id}>
+                    <div>
+                      <strong>{plan.name}</strong> - ¥{plan.price} ({plan.duration}天)
+                      <br />
+                      <span style={{ color: '#666', fontSize: '12px' }}>
+                        {plan.description}
+                      </span>
+                    </div>
+                  </Radio>
+                ))}
+              </Space>
+            </Radio.Group>
+          </Form.Item>
+          
+          <Form.Item>
+            <Space>
+              <Button type="primary" htmlType="submit">
+                {selectedPromotion ? '选择支付方式' : '发布帖子'}
+              </Button>
+              <Button onClick={handleCancelPublish}>
+                取消
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      {/* 编辑帖子弹窗 */}
+      <Modal
+        title="编辑帖子"
+        open={editModalVisible}
+        onCancel={() => {
+          setEditModalVisible(false);
+          editForm.resetFields();
+          setCurrentEditPost(null);
+          setEditCoverImageUrl('');
+          setIsEditingPromotion(false);
+        }}
+        footer={null}
+        width={800}
+      >
+        <Form
+          form={editForm}
+          layout="vertical"
+          onFinish={handleUpdatePost}
+        >
+          <Form.Item
+            name="title"
+            label="帖子标题"
+            rules={[{ required: true, message: '请输入帖子标题' }]}
+          >
+            <Input placeholder="请输入帖子标题" />
+          </Form.Item>
+          
+          <Form.Item
+            name="summary"
+            label="帖子摘要"
+            rules={[{ required: true, message: '请输入帖子摘要' }]}
+          >
+            <TextArea rows={3} placeholder="请输入帖子摘要" />
+          </Form.Item>
+          
+          <Form.Item
+            name="content"
+            label="帖子内容"
+            rules={[{ required: true, message: '请输入帖子内容' }]}
+          >
+            <TextArea rows={8} placeholder="请输入帖子内容" />
+          </Form.Item>
+          
+          <Form.Item
+            name="coverImage"
+            label="封面图片"
+          >
+            <Upload
+              listType="picture-card"
+              showUploadList={false}
+              beforeUpload={handleEditImageUpload}
+            >
+              {editCoverImageUrl ? (
+                <Image
+                  src={editCoverImageUrl}
+                  alt="封面"
+                  width="100%"
+                  height="100%"
+                  style={{ objectFit: 'cover' }}
+                />
+              ) : (
+                editUploadButton
+              )}
+            </Upload>
+            {editCoverImageUrl && (
+              <Button 
+                type="link" 
+                onClick={handleDeleteEditImage}
+                style={{ padding: 0, marginTop: 8 }}
+              >
+                删除图片
+              </Button>
+            )}
+          </Form.Item>
+          
+          <Form.Item
+            name="tags"
+            label="标签"
+            rules={[{ required: true, message: '请选择标签' }]}
+          >
+            <Select
+              mode="multiple"
+              placeholder="请选择标签"
+              allowClear
+              style={{ width: '100%' }}
+            >
+              {availableTags.map(tag => (
+                <Select.Option key={tag.tagId} value={tag.tagName}>
+                  <Tag color={tag.tagColor}>{tag.tagName}</Tag>
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+          
+          <Form.Item
+            name="promotionPlan"
+            label="推广选项（可选）"
+          >
+            <Radio.Group disabled={isEditingPromotion}>
+              <Space direction="vertical">
+                <Radio value={undefined}>不选择推广</Radio>
+                {isEditingPromotion && (
+                  <div style={{ color: '#ff4d4f', fontSize: '12px', marginBottom: 8 }}>
+                    该帖子已购买推广，无法更改推广选项
+                  </div>
+                )}
+                {promotionPlans.map(plan => (
+                  <Radio key={plan.id} value={plan.id} disabled={isEditingPromotion}>
+                    <div>
+                      <strong>{plan.name}</strong> - ¥{plan.price} ({plan.duration}天)
+                      <br />
+                      <span style={{ color: '#666', fontSize: '12px' }}>
+                        {plan.description}
+                      </span>
+                    </div>
+                  </Radio>
+                ))}
+              </Space>
+            </Radio.Group>
+          </Form.Item>
+          
+          <Form.Item>
+            <Space>
+              <Button type="primary" htmlType="submit">
+                更新帖子
+              </Button>
+              <Button onClick={() => {
+                setEditModalVisible(false);
+                editForm.resetFields();
+                setCurrentEditPost(null);
+                setEditCoverImageUrl('');
+                setIsEditingPromotion(false);
+              }}>
+                取消
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      {/* 支付弹窗 */}
+      <Modal
+        title="支付推广费用"
+        open={paymentModalVisible}
+        onCancel={handlePaymentCancel}
+        footer={null}
+        width={400}
+      >
+        <div className={styles.paymentModal}>
+          {selectedPromotion && (
+            <>
+              <div className={styles.paymentInfo}>
+                <h3>{selectedPromotion.name}</h3>
+                <p>{selectedPromotion.description}</p>
+                <p>费用: <strong>¥{selectedPromotion.price}</strong></p>
+                <p>时长: {selectedPromotion.duration}天</p>
+              </div>
+              
+              <div className={styles.qrCode}>
+                <div className={styles.qrCodePlaceholder}>
+                  <p>支付二维码</p>
+                  <p style={{ fontSize: '12px', color: '#666' }}>
+                    请使用支付宝扫描二维码支付
+                  </p>
+                  <div className={styles.mockQrCode}>
+                    <p>模拟二维码</p>
+                    <p>¥{selectedPromotion.price}</p>
+                  </div>
+                </div>
+              </div>
+              
+              <div className={styles.paymentActions}>
+                <Button 
+                  type="primary" 
+                  onClick={handlePaymentConfirm}
+                  style={{ width: '100%', marginBottom: 8 }}
+                >
+                  我已完成支付
+                </Button>
+                <Button 
+                  onClick={handlePaymentCancel}
+                  style={{ width: '100%' }}
+                >
+                  取消支付
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default UserCenter; 
\ No newline at end of file