保存本地对routes.ts的修改
Change-Id: I4f4dbd8069893d7363e251130791dc0594be44e1
diff --git a/src/components/DiscussionSection.tsx b/src/components/DiscussionSection.tsx
new file mode 100644
index 0000000..7fd39c4
--- /dev/null
+++ b/src/components/DiscussionSection.tsx
@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react';
+import { List, Button, Form, Input, message, Avatar, Typography, Modal, Pagination } from 'antd';
+import { LikeOutlined, MessageOutlined } from '@ant-design/icons';
+import CommentAPI from '../api/commentApi';
+import type { Comment } from '../api/otherType';
+
+const { Text } = Typography;
+const { TextArea } = Input;
+
+interface DiscussionSectionProps {
+ workId: number;
+}
+
+const DiscussionSection: React.FC<DiscussionSectionProps> = ({ workId }) => {
+ const [comments, setComments] = useState<Comment[]>([]);
+ const [loading, setLoading] = useState(false);
+ const [modalVisible, setModalVisible] = useState(false);
+ const [form] = Form.useForm();
+ const [currentPage, setCurrentPage] = useState(1);
+ const [pageSize, setPageSize] = useState(5); // 每页显示5条
+
+ // 加载评论
+ useEffect(() => {
+ const loadComments = async () => {
+ try {
+ setLoading(true);
+ const commentList = await CommentAPI.getCommentsByPostId(workId);
+ setComments(commentList);
+ } catch (error) {
+ message.error('加载评论失败');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ loadComments();
+ }, [workId]);
+
+ // 获取当前页的评论数据
+ const getCurrentPageComments = () => {
+ const startIndex = (currentPage - 1) * pageSize;
+ const endIndex = startIndex + pageSize;
+ return comments.slice(startIndex, endIndex);
+ };
+
+ // 提交新评论
+ const handleSubmit = async (values: { title: string; content: string }) => {
+ try {
+ await CommentAPI.addComment({
+ postId: workId,
+ content: values.content
+ });
+ message.success('评论添加成功');
+ form.resetFields();
+ setModalVisible(false);
+ // 重新加载评论
+ const commentList = await CommentAPI.getCommentsByPostId(workId);
+ setComments(commentList);
+ // 重置到第一页
+ setCurrentPage(1);
+ } catch (error) {
+ message.error('评论添加失败');
+ }
+ };
+
+ // 点赞评论
+ const handleLikeComment = async (commentId: number) => {
+ try {
+ await CommentAPI.likeComment(commentId);
+ setComments(prev => prev.map(comment =>
+ comment.id === commentId
+ ? { ...comment, likes: (comment.likes || 0) + 1 }
+ : comment
+ ));
+ } catch (error) {
+ message.error('点赞失败');
+ }
+ };
+
+ return (
+ <div className="discussion-section">
+ <Button
+ type="primary"
+ icon={<MessageOutlined />}
+ onClick={() => setModalVisible(true)}
+ style={{ marginBottom: 16 }}
+ >
+ 新建讨论
+ </Button>
+
+ <List
+ dataSource={getCurrentPageComments()}
+ loading={loading}
+ renderItem={comment => (
+ <List.Item className="comment-item">
+ <div className="comment-content">
+ <div className="comment-header">
+ <Avatar size="small">
+ {comment.author?.charAt(0) || '?'}
+ </Avatar>
+ <Text strong>{comment.author || '匿名用户'}</Text>
+ <Text type="secondary">
+ {comment.createTime ? new Date(comment.createTime).toLocaleString() : '未知时间'}
+ </Text>
+ </div>
+ <div className="comment-body">
+ <Text>{comment.content}</Text>
+ </div>
+ <div className="comment-actions">
+ <Button
+ type="text"
+ icon={<LikeOutlined />}
+ onClick={() => handleLikeComment(comment.id)}
+ >
+ {comment.likes || 0}
+ </Button>
+ </div>
+ </div>
+ </List.Item>
+ )}
+ />
+
+ <div style={{ textAlign: 'right', marginTop: 16 }}>
+ <Pagination
+ current={currentPage}
+ pageSize={pageSize}
+ total={comments.length}
+ onChange={(page, size) => {
+ setCurrentPage(page);
+ setPageSize(size);
+ }}
+ showSizeChanger
+ showQuickJumper
+ showTotal={total => `共 ${total} 条`}
+ />
+ </div>
+
+ <Modal
+ title={
+ <span>
+ <MessageOutlined style={{ marginRight: 8 }} />
+ 新建讨论
+ </span>
+ }
+ visible={modalVisible}
+ onCancel={() => setModalVisible(false)}
+ footer={[
+ <Button key="cancel" onClick={() => setModalVisible(false)}>
+ 取消
+ </Button>,
+ <Button
+ key="submit"
+ type="primary"
+ onClick={() => {
+ form.validateFields()
+ .then(values => handleSubmit(values))
+ .catch(() => message.error('请填写完整信息'));
+ }}
+ >
+ 创建讨论
+ </Button>,
+ ]}
+ >
+ <Form form={form} layout="vertical">
+ <Form.Item
+ name="title"
+ label="讨论主题"
+ rules={[{ required: true, message: '请输入讨论主题' }]}
+ >
+ <Input placeholder="输入讨论主题" />
+ </Form.Item>
+
+ <Form.Item
+ name="content"
+ label="讨论内容"
+ rules={[{ required: true, message: '请输入讨论内容' }]}
+ >
+ <TextArea
+ rows={6}
+ placeholder="详细描述你想讨论的内容..."
+ />
+ </Form.Item>
+ </Form>
+ </Modal>
+ </div>
+ );
+};
+
+
+export default DiscussionSection;
\ No newline at end of file