fix: 留言接入

This commit is contained in:
Shu Guang 2025-05-16 17:53:57 +08:00
parent 33ef6e7d20
commit 55c472b840
4 changed files with 86 additions and 85 deletions

View File

@ -95,6 +95,7 @@ const ForumAdmin: React.FC = () => {
{ {
title: '标签', title: '标签',
dataIndex: 'tagList', dataIndex: 'tagList',
width: 200,
render: (tags: string[]) => ( render: (tags: string[]) => (
<> <>
{tags?.map(tag => ( {tags?.map(tag => (

View File

@ -156,13 +156,7 @@ const UserManage: React.FC = () => {
return <span></span>; return <span></span>;
}, },
}, },
{
title: '简介',
dataIndex: 'userProfile',
width: 200,
align: 'center',
ellipsis: true,
},
{ {
title: '创建时间', title: '创建时间',
dataIndex: 'createTime', dataIndex: 'createTime',
@ -233,9 +227,9 @@ const UserManage: React.FC = () => {
<Form.Item name="userAvatar" label="头像链接"> <Form.Item name="userAvatar" label="头像链接">
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item name="userProfile" label="简介"> {/* <Form.Item name="userProfile" label="">
<Input.TextArea rows={3} /> <Input.TextArea rows={3} />
</Form.Item> </Form.Item> */}
<Form.Item name="userRole" label="角色" rules={[{ required: true, message: '请选择角色' }]}> <Form.Item name="userRole" label="角色" rules={[{ required: true, message: '请选择角色' }]}>
<Select> <Select>
<Option value="user"></Option> <Option value="user"></Option>

View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useParams } from '@umijs/max'; import { useParams, useModel } from '@umijs/max';
import { import {
Card, Card,
Avatar, Avatar,
@ -22,56 +22,37 @@ import {
import { getPostVoByIdUsingGet } from '@/services/hebi/postController'; import { getPostVoByIdUsingGet } from '@/services/hebi/postController';
import { doThumbUsingPost } from '@/services/hebi/postThumbController'; import { doThumbUsingPost } from '@/services/hebi/postThumbController';
import { doPostFavourUsingPost } from '@/services/hebi/postFavourController'; import { doPostFavourUsingPost } from '@/services/hebi/postFavourController';
import dayjs from 'dayjs'; import { getCommentListByPostIdUsingGet, addCommentUsingPost } from '@/services/hebi/commentController';
import MDEditor from '@uiw/react-md-editor'; import dayjs from 'dayjs';
import '@uiw/react-md-editor/markdown-editor.css'; import MDEditor from '@uiw/react-md-editor';
import '@uiw/react-markdown-preview/markdown.css'; import '@uiw/react-md-editor/markdown-editor.css';
import '@uiw/react-markdown-preview/markdown.css';
const { Title } = Typography; const { Title } = Typography;
const { TextArea } = Input; const { TextArea } = Input;
import { useModel } from '@umijs/max'; // 新增
const ForumDetail: React.FC = () => { const ForumDetail: React.FC = () => {
const { initialState } = useModel('@@initialState'); // 获取当前登录用户信息 const { initialState } = useModel('@@initialState');
const currentUser = initialState?.currentUser; const currentUser = initialState?.currentUser;
const { id } = useParams(); const { id } = useParams();
const [liked, setLiked] = useState(false);
const [collected, setCollected] = useState(false); // 帖子相关状态
const [comment, setComment] = useState('');
// 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<any>(null); const [post, setPost] = useState<any>(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [liked, setLiked] = useState(false);
const [collected, setCollected] = useState(false);
// 评论相关状态
const [comments, setComments] = useState<API.CommentVO[]>([]);
const [comment, setComment] = useState('');
const [commentLoading, setCommentLoading] = useState(false);
// 判断是否是当前用户的帖子
const isMyPost = currentUser?.id === post?.userId;
// 拉取帖子详情 // 拉取帖子详情
useEffect(() => { useEffect(() => {
@ -92,7 +73,7 @@ const ForumDetail: React.FC = () => {
// 点赞处理 // 点赞处理
const handleLike = async () => { const handleLike = async () => {
try { try {
const res = await doThumbUsingPost({ postId: id }); // 直接传字符串 id const res = await doThumbUsingPost({ postId: id });
if (res && res.code === 0) { if (res && res.code === 0) {
setLiked(!liked); setLiked(!liked);
message.success(liked ? '已取消点赞' : '点赞成功'); message.success(liked ? '已取消点赞' : '点赞成功');
@ -104,25 +85,6 @@ const ForumDetail: React.FC = () => {
} }
}; };
const handleSubmitComment = () => {
if (!comment.trim()) {
message.warning('请输入评论内容');
return;
}
// 提交评论
const newComment = {
id: comments.length + 1,
author: '当前用户',
avatar: 'https://joeschmoe.io/api/v1/random',
content: comment,
createTime: new Date().toLocaleString(),
likes: 0,
};
setComments([newComment, ...comments]);
message.success('评论成功');
setComment('');
};
// 收藏处理 // 收藏处理
const handleFavour = async () => { const handleFavour = async () => {
try { try {
@ -138,9 +100,59 @@ const ForumDetail: React.FC = () => {
} }
}; };
// 判断是否是当前用户的帖子
const isMyPost = currentUser?.id === post?.userId;
// 添加获取评论列表的 effect
useEffect(() => {
const fetchComments = async () => {
if (!id) return;
try {
const res = await getCommentListByPostIdUsingGet({ postId: id });
if (res && res.code === 0 && res.data) {
setComments(res.data);
}
} catch (error) {
message.error('获取评论失败');
}
};
fetchComments();
}, [id]);
// 修改提交评论的处理函数
const handleSubmitComment = async () => {
if (!comment.trim()) {
message.warning('请输入评论内容');
return;
}
setCommentLoading(true);
try {
const res = await addCommentUsingPost({
content: comment.trim(),
postId: id,
});
if (res && res.code === 0) {
message.success('评论成功');
setComment('');
// 重新获取评论列表
const commentsRes = await getCommentListByPostIdUsingGet({ postId: id });
if (commentsRes && commentsRes.code === 0 && commentsRes.data) {
setComments(commentsRes.data);
// 获取最新的帖子信息(包括评论数等)
const postRes = await getPostVoByIdUsingGet({ id });
if (postRes && postRes.code === 0 && postRes.data) {
setPost(postRes.data);
}
}
} else {
message.error(res?.message || '评论失败');
}
} catch (error) {
message.error('评论失败');
}
setCommentLoading(false);
};
// 在 return 部分修改评论区渲染
return ( return (
<Card loading={loading}> <Card loading={loading}>
<article> <article>
@ -209,7 +221,7 @@ const ForumDetail: React.FC = () => {
placeholder="写下你的评论..." placeholder="写下你的评论..."
style={{ marginBottom: 16 }} style={{ marginBottom: 16 }}
/> />
<Button type="primary" onClick={handleSubmitComment}> <Button type="primary" onClick={handleSubmitComment} loading={commentLoading}>
</Button> </Button>
@ -218,20 +230,14 @@ const ForumDetail: React.FC = () => {
itemLayout="horizontal" itemLayout="horizontal"
dataSource={comments} dataSource={comments}
renderItem={(item) => ( renderItem={(item) => (
<List.Item <List.Item>
actions={[
<Button type="text" icon={<LikeOutlined />} key="list-loadmore-like">
{item.likes}
</Button>,
]}
>
<List.Item.Meta <List.Item.Meta
avatar={<Avatar src={item.avatar} />} avatar={<Avatar src={item.userAvatar || 'https://joeschmoe.io/api/v1/random'} />}
title={ title={
<Space> <Space>
<span>{item.author}</span> <span>{item.userName || '匿名用户'}</span>
<span style={{ color: 'rgba(0, 0, 0, 0.45)', fontSize: '14px' }}> <span style={{ color: 'rgba(0, 0, 0, 0.45)', fontSize: '14px' }}>
{item.createTime} {item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') : ''}
</span> </span>
</Space> </Space>
} }

View File

@ -343,7 +343,7 @@ const HomePage: React.FC = () => {
<Space direction="vertical" style={{ width: '100%' }}> <Space direction="vertical" style={{ width: '100%' }}>
<Statistic <Statistic
title="当前活跃用户" title="当前活跃用户"
value={totalUsers * 0.8} value={Math.ceil(totalUsers * 0.8)}
prefix={<UserOutlined />} prefix={<UserOutlined />}
/> />
<Progress <Progress