fix: 留言接入
This commit is contained in:
parent
33ef6e7d20
commit
55c472b840
@ -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 => (
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user