创作中心模块包含首页展示、个人中心、帖子审核。
“首页展示”支持广告轮播展示、推广帖子优先展示、分页显示所有帖子、导航栏便捷标签筛选帖子、全局标题模糊搜索帖子、点击帖子“查看更多”进入帖子详情页。帖子详情页展示帖子封面图片、作者时间、详细内容(可以插入种子链接对种子进行介绍与推广)等基本信息、对帖子点赞收藏举报评论回复、查看相关推荐帖子。相关推荐会推荐当前帖子作者的其他帖子(最多推荐5篇),还会推荐具有相似标签的其他帖子,两者总共最多推荐9篇帖子。
“个人中心”包含“我的中心”和“我的收藏”。
“我的中心”中可以管理已经成功发布的帖子(编辑、删除帖子),还可以发布新帖子。发布新帖子时除了填写帖子基本信息以外,帖子标签支持下拉多项选择,用户还可以选择帖子推广项目并进行支付。设置了多种推广项目,包含广告轮播推广、帖子置顶展示、限时优先展示、分类页首条展示。系统后台执行自动定时任务,每小时对帖子的推广时效性进行检查,如超出推广时限,则取消帖子的推广显示特权。用户点击发布帖子后帖子处于待审核状态,需要管理员审核通过才能正常发布在首页展示页面。编辑帖子时用户可以追加帖子推广,但如果帖子处于推广状态,则禁止修改推广项目。
“我的收藏”中可以便捷查看所有已收藏的帖子。
“帖子审核”包含“帖子发布管理”和“帖子举报管理”。“帖子审核”板块具有权限管理,只有管理员界面能够进入。
“帖子发布管理”对所有待审核帖子进行处理,支持预览待审核帖子详细内容,批准通过和拒绝通过选项。
“帖子举报管理”对所有用户的举报请求进行人工审核,如果举报内容属实,则将帖子下架处理,如果举报内容不属实,驳回举报请求。所有举报请求的处理结果均留存显示,方便后续再次审查。
Change-Id: If822351183e9d55a5a56ff5cf1e13b313fdbe231
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