From 9a7b889adaa7aa70f69fc385fd68fa3a201768b6 Mon Sep 17 00:00:00 2001 From: Shu Guang <61069967+shuguangnet@users.noreply.github.com> Date: Fri, 16 May 2025 02:17:53 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AE=BA=E5=9D=9B=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E4=BC=98=E5=8C=96=20&=20=E6=96=B0=E5=A2=9E=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=B8=96=E5=AD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Forum/Detail/index.tsx | 174 ++++++++++++++++++++++-------- src/pages/Forum/List/index.tsx | 12 ++- src/pages/Forum/Publish/index.tsx | 43 ++++++-- 3 files changed, 169 insertions(+), 60 deletions(-) diff --git a/src/pages/Forum/Detail/index.tsx b/src/pages/Forum/Detail/index.tsx index 93ead2f..4626a82 100644 --- a/src/pages/Forum/Detail/index.tsx +++ b/src/pages/Forum/Detail/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useParams } from '@umijs/max'; import { Card, @@ -19,44 +19,90 @@ import { StarFilled, ShareAltOutlined, } from '@ant-design/icons'; +import { getPostVoByIdUsingGet } from '@/services/hebi/postController'; +import { doThumbUsingPost } from '@/services/hebi/postThumbController'; +import { doPostFavourUsingPost } from '@/services/hebi/postFavourController'; +import dayjs from 'dayjs'; +import MDEditor from '@uiw/react-md-editor'; +import '@uiw/react-md-editor/markdown-editor.css'; +import '@uiw/react-markdown-preview/markdown.css'; -const { Title, Paragraph } = Typography; +const { Title } = Typography; const { TextArea } = Input; -// Mock comment data -const mockComments = [ - { - id: 1, - author: '张三', - avatar: 'https://joeschmoe.io/api/v1/random', - content: '这个帖子很有帮助，感谢分享！', - createTime: '2024-03-20 10:00', - likes: 5, - }, - { - id: 2, - author: '李四', - avatar: 'https://joeschmoe.io/api/v1/random', - content: '我也有一些补充，大家可以参考一下...', - createTime: '2024-03-20 11:30', - likes: 3, - }, - { - id: 3, - author: '王五', - avatar: 'https://joeschmoe.io/api/v1/random', - content: '学到了很多新知识，期待更多分享！', - createTime: '2024-03-20 14:15', - likes: 2, - }, -]; + + +import { useModel } from '@umijs/max'; // 新增 const ForumDetail: React.FC = () => { + const { initialState } = useModel('@@initialState'); // 获取当前登录用户信息 + const currentUser = initialState?.currentUser; const { id } = useParams(); const [liked, setLiked] = useState(false); const [collected, setCollected] = useState(false); const [comment, setComment] = useState(''); - const [comments, setComments] = useState(mockComments); + // mock 评论数据 + const [comments, setComments] = useState([ + { + id: 1, + author: '小明', + avatar: 'https://joeschmoe.io/api/v1/1', + content: '很棒的分享，受益匪浅！', + createTime: '2025-05-15 10:00:00', + likes: 2, + }, + { + id: 2, + author: 'AI助手', + avatar: 'https://joeschmoe.io/api/v1/2', + content: '请问有完整代码示例吗？', + createTime: '2025-05-15 11:20:00', + likes: 1, + }, + { + id: 3, + author: '匿名用户', + avatar: 'https://joeschmoe.io/api/v1/random', + content: '期待更多相关内容！', + createTime: '2025-05-15 12:45:00', + likes: 0, + }, + ]); + + // 帖子详情状态 + const [post, setPost] = useState(null); + const [loading, setLoading] = useState(true); + + // 拉取帖子详情 + useEffect(() => { + const fetchDetail = async () => { + setLoading(true); + const res = await getPostVoByIdUsingGet({ id }); + console.log('res', res); + if (res && res.code === 0 && res.data) { + setPost(res.data); + setLiked(!!res.data.hasThumb); + setCollected(!!res.data.hasFavour); + } + setLoading(false); + }; + if (id) fetchDetail(); + }, [id]); + + // 点赞处理 + const handleLike = async () => { + try { + const res = await doThumbUsingPost({ postId: id }); // 直接传字符串 id + if (res && res.code === 0) { + setLiked(!liked); + message.success(liked ? '已取消点赞' : '点赞成功'); + } else { + message.error(res?.message || '操作失败'); + } + } catch (e) { + message.error('操作失败'); + } + }; const handleSubmitComment = () => { if (!comment.trim()) { @@ -77,46 +123,80 @@ const ForumDetail: React.FC = () => { setComment(''); }; + // 收藏处理 + const handleFavour = async () => { + try { + const res = await doPostFavourUsingPost({ postId: id }); + if (res && res.code === 0) { + setCollected(!collected); + message.success(collected ? '已取消收藏' : '收藏成功'); + } else { + message.error(res?.message || '操作失败'); + } + } catch (e) { + message.error('操作失败'); + } + }; + + // 判断是否是当前用户的帖子 + const isMyPost = currentUser?.id === post?.userId; + return ( - +
- 帖子标题 + {post?.title || '帖子标题'} }> - - 作者名称 + + {post?.user?.userName || '无'} - 发布时间 - 分类 - 阅读 1000 + + {post?.createTime ? dayjs(post.createTime).format('YYYY-MM-DD HH:mm:ss') : '发布时间'} + + {post?.tagList?.map((tag: string) => ( + {tag} + ))} +
- - 帖子内容 - + {/* Markdown 渲染帖子内容 */} +
+ +
+ {isMyPost && ( + + )}
-
diff --git a/src/pages/Forum/List/index.tsx b/src/pages/Forum/List/index.tsx index e7c392c..678933e 100644 --- a/src/pages/Forum/List/index.tsx +++ b/src/pages/Forum/List/index.tsx @@ -99,9 +99,9 @@ const ForumList: React.FC = () => { className={styles.postItem} actions={[ - + {/* {item.viewNum || 0} - + */} {item.commentNum || 0} @@ -158,7 +158,13 @@ const ForumList: React.FC = () => { } /> -
+
{item.content}
diff --git a/src/pages/Forum/Publish/index.tsx b/src/pages/Forum/Publish/index.tsx index 6bd26c6..15447c9 100644 --- a/src/pages/Forum/Publish/index.tsx +++ b/src/pages/Forum/Publish/index.tsx @@ -1,43 +1,66 @@ -import React, { useState } from 'react'; +import React, { useState,useEffect } from 'react'; import { Card, Form, Input, Button, Select, message, Alert } from 'antd'; import { history } from '@umijs/max'; import styles from './index.less'; import MDEditor from '@uiw/react-md-editor'; // 直接引入，不用 next/dynamic import '@uiw/react-md-editor/markdown-editor.css'; import '@uiw/react-markdown-preview/markdown.css'; -import { addPostUsingPost } from '@/services/hebi/postController'; +import { addPostUsingPost, updatePostUsingPost} from '@/services/hebi/postController'; +import { useSearchParams } from '@umijs/max'; // 新增 +import { getPostVoByIdUsingGet } from '@/services/hebi/postController'; // 新增 const { TextArea } = Input; const ForumPublish: React.FC = () => { + const [searchParams] = useSearchParams(); + const id = searchParams.get('id'); // 获取帖子 ID const [form] = Form.useForm(); const [submitting, setSubmitting] = useState(false); - const [mdContent, setMdContent] = useState(''); // 新增 + const [mdContent, setMdContent] = useState(''); + + // 如果是编辑模式，加载帖子内容 + useEffect(() => { + const loadPost = async () => { + if (id) { + const res = await getPostVoByIdUsingGet({ id }); + if (res?.code === 0 && res.data) { + form.setFieldsValue({ + title: res.data.title, + tags: res.data.tagList, + }); + + setMdContent(res.data.content); + } + } + }; + loadPost(); + }, [id, form]); const handleSubmit = async (values: any) => { setSubmitting(true); try { const postAddRequest = { + id: id || undefined, title: values.title, - content: mdContent, // 使用 Markdown 内容 + content: mdContent, tags: values.tags || [], }; - const res = await addPostUsingPost(postAddRequest); + const res = id ? await updatePostUsingPost(postAddRequest as any): await addPostUsingPost(postAddRequest); if (res && res.code === 0) { - message.success('发布成功'); + message.success(id ? '修改成功' : '发布成功'); history.push('/forum/list'); } else { - message.error(res?.message || '发布失败'); + message.error(res?.message || (id ? '修改失败' : '发布失败')); } } catch (error) { - message.error('发布失败'); + message.error(id ? '修改失败' : '发布失败'); } setSubmitting(false); }; return (
- + { 取消