diff --git a/src/pages/Comment/index.tsx b/src/pages/Comment/index.tsx index 157d7ff..fda20da 100644 --- a/src/pages/Comment/index.tsx +++ b/src/pages/Comment/index.tsx @@ -10,6 +10,7 @@ import { Comment, FilterForm } from '@/types/app/comment' import { useWebStore } from '@/stores' import dayjs from 'dayjs'; +import TextArea from 'antd/es/input/TextArea'; const CommentPage = () => { const store = useWebStore() @@ -18,7 +19,7 @@ const CommentPage = () => { const [comment, setComment] = useState(); const [list, setList] = useState([]); - const [isModalOpen, setIsModalOpen] = useState(false); + const [isCommentModalOpen, setIsCommentModalOpen] = useState(false); const getCommentList = async () => { const { data } = await getCommentListAPI(); @@ -59,7 +60,7 @@ const CommentPage = () => { width: 400, render: (text: string, record) => { setComment(record) - setIsModalOpen(true) + setIsCommentModalOpen(true) }}>{text} }, { @@ -95,8 +96,8 @@ const CommentPage = () => {
+ setIsReplyModalOpen(true) + }}>回复 delCommentData(record.id)}> @@ -120,6 +121,13 @@ const CommentPage = () => { setList(data) } + // 回复内容 + const [replyInfo, setReplyInfo] = useState("") + const [isReplyModalOpen, setIsReplyModalOpen] = useState(false); + const handleReply = () => { + + } + return ( <> @@ -159,7 +167,7 @@ const CommentPage = () => { /> </Card> - <Modal title='评论详情' open={isModalOpen} onCancel={() => setIsModalOpen(false)} footer={null}> + <Modal title='评论详情' open={isCommentModalOpen} onCancel={() => setIsCommentModalOpen(false)} footer={null}> <div className='pt-2 space-y-2'> <div><b>所属文章:</b> {comment?.articleTitle}</div> <div><b>评论时间:</b> {dayjs(comment?.createTime).format("YYYY-MM-DD HH:mm:ss")}</div> @@ -169,6 +177,20 @@ const CommentPage = () => { <div><b>内容:</b> {comment?.content}</div> </div> </Modal> + + <Modal title="回复评论" open={isReplyModalOpen} footer={null} onCancel={() => setIsReplyModalOpen(false)}> + <TextArea + value={replyInfo} + onChange={(e) => setReplyInfo(e.target.value)} + placeholder="请输入回复内容" + autoSize={{ minRows: 3, maxRows: 5 }} + /> + + <div className="flex space-x-4"> + <Button className="w-full mt-2" onClick={() => setIsReplyModalOpen(false)}>取消</Button> + <Button type="primary" className="w-full mt-2" onClick={handleReply}>确定</Button> + </div> + </Modal> </> ); };