feat: 添加评论功能

src/components/EventCommentSection/CommentInput.js

@@ -0,0 +1,77 @@
+// src/components/EventCommentSection/CommentInput.js
+/**
+ * 评论输入框组件
+ * 功能：输入评论内容、字数限制、发布按钮
+ */
+
+import React from 'react';
+import {
+  Box,
+  Textarea,
+  Button,
+  HStack,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+const CommentInput = ({
+  value,
+  onChange,
+  onSubmit,
+  isSubmitting,
+  maxLength = 500,
+  placeholder = '说点什么...',
+}) => {
+  const bgColor = useColorModeValue('white', 'gray.800');
+  const borderColor = useColorModeValue('gray.200', 'gray.600');
+  const textColor = useColorModeValue('gray.600', 'gray.400');
+  const countColor = useColorModeValue('gray.500', 'gray.500');
+
+  const handleKeyDown = (e) => {
+    // Ctrl/Cmd + Enter 快捷键提交
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      onSubmit();
+    }
+  };
+
+  return (
+    <Box>
+      <Textarea
+        value={value}
+        onChange={onChange}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        bg={bgColor}
+        borderColor={borderColor}
+        color={textColor}
+        rows={3}
+        maxLength={maxLength}
+        resize="vertical"
+        _hover={{
+          borderColor: 'blue.300',
+        }}
+        _focus={{
+          borderColor: 'blue.500',
+          boxShadow: '0 0 0 1px var(--chakra-colors-blue-500)',
+        }}
+      />
+      <HStack justify="space-between" mt={2}>
+        <Text fontSize="sm" color={countColor}>
+          {value.length}/{maxLength}
+          {value.length === 0 && ' · Ctrl+Enter 快速发布'}
+        </Text>
+        <Button
+          colorScheme="blue"
+          size="sm"
+          onClick={onSubmit}
+          isLoading={isSubmitting}
+          isDisabled={!value.trim() || isSubmitting}
+        >
+          发布
+        </Button>
+      </HStack>
+    </Box>
+  );
+};
+
+export default CommentInput;

src/components/EventCommentSection/CommentItem.js

@@ -0,0 +1,89 @@
+// src/components/EventCommentSection/CommentItem.js
+/**
+ * 单条评论组件
+ * 功能：显示用户头像、昵称、时间、评论内容
+ */
+
+import React from 'react';
+import {
+  Box,
+  HStack,
+  VStack,
+  Avatar,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+
+moment.locale('zh-cn');
+
+const CommentItem = ({ comment }) => {
+  const itemBg = useColorModeValue('gray.50', 'gray.700');
+  const usernameColor = useColorModeValue('gray.800', 'gray.100');
+  const timeColor = useColorModeValue('gray.500', 'gray.400');
+  const contentColor = useColorModeValue('gray.700', 'gray.300');
+
+  // 格式化时间
+  const formatTime = (timestamp) => {
+    const now = moment();
+    const time = moment(timestamp);
+    const diffMinutes = now.diff(time, 'minutes');
+    const diffHours = now.diff(time, 'hours');
+    const diffDays = now.diff(time, 'days');
+
+    if (diffMinutes < 1) {
+      return '刚刚';
+    } else if (diffMinutes < 60) {
+      return `${diffMinutes}分钟前`;
+    } else if (diffHours < 24) {
+      return `${diffHours}小时前`;
+    } else if (diffDays < 7) {
+      return `${diffDays}天前`;
+    } else {
+      return time.format('MM-DD HH:mm');
+    }
+  };
+
+  return (
+    <Box
+      p={3}
+      bg={itemBg}
+      borderRadius="md"
+      transition="all 0.2s"
+      _hover={{
+        transform: 'translateY(-2px)',
+        boxShadow: 'sm',
+      }}
+    >
+      <HStack align="start" spacing={3}>
+        {/* 用户头像 */}
+        <Avatar
+          size="sm"
+          name={comment.author?.username || 'Anonymous'}
+          src={comment.author?.avatar}
+        />
+
+        {/* 评论内容区 */}
+        <VStack align="stretch" flex={1} spacing={1}>
+          {/* 用户名和时间 */}
+          <HStack spacing={2}>
+            <Text fontSize="sm" fontWeight="bold" color={usernameColor}>
+              {comment.author?.username || 'Anonymous'}
+            </Text>
+            <Text fontSize="xs" color={timeColor}>
+              {formatTime(comment.created_at)}
+            </Text>
+          </HStack>
+
+          {/* 评论内容 */}
+          <Text fontSize="sm" color={contentColor} lineHeight="1.6">
+            {comment.content}
+          </Text>
+        </VStack>
+      </HStack>
+    </Box>
+  );
+};
+
+export default CommentItem;

src/components/EventCommentSection/CommentList.js

@@ -0,0 +1,67 @@
+// src/components/EventCommentSection/CommentList.js
+/**
+ * 评论列表组件
+ * 功能：展示评论列表、加载状态、空状态
+ */
+
+import React from 'react';
+import {
+  VStack,
+  Spinner,
+  Center,
+  Text,
+  Box,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { ChatIcon } from '@chakra-ui/icons';
+import CommentItem from './CommentItem';
+
+const CommentList = ({ comments, loading }) => {
+  const emptyTextColor = useColorModeValue('gray.500', 'gray.400');
+  const emptyBgColor = useColorModeValue('gray.50', 'gray.700');
+
+  // 加载状态
+  if (loading) {
+    return (
+      <Center py={8}>
+        <VStack spacing={3}>
+          <Spinner size="md" color="blue.500" thickness="3px" />
+          <Text fontSize="sm" color={emptyTextColor}>
+            加载评论中...
+          </Text>
+        </VStack>
+      </Center>
+    );
+  }
+
+  // 空状态
+  if (!comments || comments.length === 0) {
+    return (
+      <Center py={8}>
+        <VStack spacing={3}>
+          <Box
+            p={4}
+            bg={emptyBgColor}
+            borderRadius="full"
+          >
+            <ChatIcon boxSize={6} color={emptyTextColor} />
+          </Box>
+          <Text fontSize="sm" color={emptyTextColor}>
+            还没有评论，快来发表第一条吧~
+          </Text>
+        </VStack>
+      </Center>
+    );
+  }
+
+  // 评论列表
+  return (
+    <VStack align="stretch" spacing={3}>
+      {comments.map((comment) => (
+        <CommentItem key={comment.id} comment={comment} />
+      ))}
+    </VStack>
+  );
+};
+
+export default CommentList;

src/components/EventCommentSection/EventCommentSection.js

@@ -0,0 +1,194 @@
+// src/components/EventCommentSection/EventCommentSection.js
+/**
+ * 事件评论区主组件
+ * 功能：整合评论列表 + 评论输入框，管理评论数据
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Box,
+  VStack,
+  Heading,
+  Badge,
+  HStack,
+  Divider,
+  useColorModeValue,
+  useToast,
+} from '@chakra-ui/react';
+import { useAuth } from '../../contexts/AuthContext';
+import { eventService } from '../../services/eventService';
+import { logger } from '../../utils/logger';
+import CommentList from './CommentList';
+import CommentInput from './CommentInput';
+
+/**
+ * 事件评论区组件
+ * @param {Object} props
+ * @param {number} props.eventId - 事件 ID
+ */
+const EventCommentSection = ({ eventId }) => {
+  const { user } = useAuth();
+  const toast = useToast();
+  const dividerColor = useColorModeValue('gray.200', 'gray.600');
+  const headingColor = useColorModeValue('gray.700', 'gray.200');
+  const sectionBg = useColorModeValue('gray.50', 'gray.750');
+
+  // 状态管理
+  const [comments, setComments] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [commentText, setCommentText] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [totalCount, setTotalCount] = useState(0); // 总评论数（从后端获取）
+
+  // 加载评论列表
+  const loadComments = useCallback(async () => {
+    if (!eventId) return;
+
+    setLoading(true);
+    try {
+      // 加载第1页，每页5条评论
+      const result = await eventService.getPosts(eventId, 'latest', 1, 5);
+      if (result.success) {
+        setComments(result.data || []);
+        // 保存总评论数（从 pagination.total 读取）
+        setTotalCount(result.pagination?.total || result.data?.length || 0);
+        logger.info('EventCommentSection', '评论加载成功', {
+          eventId,
+          count: result.data?.length || 0,
+          total: result.pagination?.total || 0,
+        });
+      }
+    } catch (error) {
+      logger.error('EventCommentSection', 'loadComments', error, { eventId });
+      toast({
+        title: '加载评论失败',
+        description: error.message || '请稍后重试',
+        status: 'error',
+        duration: 3000,
+        isClosable: true,
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, [eventId, toast]);
+
+  // 发表评论
+  const handleSubmitComment = useCallback(async () => {
+    if (!commentText.trim()) {
+      toast({
+        title: '请输入评论内容',
+        status: 'warning',
+        duration: 2000,
+        isClosable: true,
+      });
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const result = await eventService.createPost(eventId, {
+        content: commentText.trim(),
+        content_type: 'text',
+      });
+
+      if (result.success) {
+        // 乐观更新：立即将新评论添加到本地 state，避免重新加载导致的闪烁
+        const newComment = {
+          id: result.data?.id || `comment_optimistic_${Date.now()}`,
+          content: commentText.trim(),
+          content_type: 'text',
+          author: {
+            id: user?.id || 'current_user',
+            username: user?.username || '当前用户',
+            avatar: user?.avatar || null,
+          },
+          created_at: new Date().toISOString(),
+          likes_count: 0,
+          is_liked: false,
+        };
+
+        // 将新评论追加到列表末尾（最新评论在底部）
+        setComments([...comments, newComment]);
+        // 总评论数 +1
+        setTotalCount(totalCount + 1);
+
+        toast({
+          title: '评论发布成功',
+          status: 'success',
+          duration: 2000,
+          isClosable: true,
+        });
+        setCommentText(''); // 清空输入框
+        // ✅ 不再调用 loadComments()，避免 loading 状态导致高度闪烁
+
+        logger.info('EventCommentSection', '评论发布成功（乐观更新）', {
+          eventId,
+          content: commentText.trim(),
+          commentId: newComment.id,
+        });
+      } else {
+        throw new Error(result.message || '评论发布失败');
+      }
+    } catch (error) {
+      logger.error('EventCommentSection', 'handleSubmitComment', error, { eventId });
+      toast({
+        title: '评论发布失败',
+        description: error.message || '请稍后重试',
+        status: 'error',
+        duration: 3000,
+        isClosable: true,
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  }, [eventId, commentText, toast, comments, user, totalCount]);
+
+  // 初始加载评论
+  useEffect(() => {
+    loadComments();
+  }, [loadComments]);
+
+  return (
+    <Box>
+      {/* 标题栏 */}
+      <HStack
+        spacing={3}
+        mb={4}
+        p={3}
+        bg={sectionBg}
+        borderRadius="md"
+      >
+        <Heading size="sm" color={headingColor}>
+          讨论区
+        </Heading>
+        <Badge colorScheme="blue" fontSize="sm" borderRadius="full" px={2}>
+          {totalCount} 条评论
+        </Badge>
+      </HStack>
+
+      <Divider borderColor={dividerColor} mb={4} />
+
+      {/* 评论列表 */}
+      <Box mb={4}>
+        <CommentList comments={comments} loading={loading} />
+      </Box>
+
+      {/* 评论输入框（仅登录用户显示） */}
+      {user && (
+        <Box>
+          <Divider borderColor={dividerColor} mb={4} />
+          <CommentInput
+            value={commentText}
+            onChange={(e) => setCommentText(e.target.value)}
+            onSubmit={handleSubmitComment}
+            isSubmitting={submitting}
+            maxLength={500}
+            placeholder="说点什么..."
+          />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default EventCommentSection;

src/components/EventCommentSection/index.js

@@ -0,0 +1,10 @@
+// src/components/EventCommentSection/index.js
+/**
+ * 事件评论区组件统一导出
+ */
+
+export { default } from './EventCommentSection';
+export { default as EventCommentSection } from './EventCommentSection';
+export { default as CommentList } from './CommentList';
+export { default as CommentItem } from './CommentItem';
+export { default as CommentInput } from './CommentInput';

src/mocks/handlers/event.js

@@ -9,6 +9,77 @@ import { generatePopularConcepts } from './concept';
 // 模拟网络延迟
 const delay = (ms = 300) => new Promise(resolve => setTimeout(resolve, ms));
 
+// ==================== 评论内存存储 ====================
+// 用于在 Mock 环境下持久化评论数据（按 eventId 分组）
+const commentsStore = new Map();
+
+/**
+ * 初始化某个事件的 mock 评论列表
+ * @param {string} eventId - 事件 ID
+ * @returns {Array} 初始的 8 条 mock 评论
+ */
+const initializeMockComments = (eventId) => {
+    const comments = [];
+    const users = [
+        { username: '张三', avatar: null },
+        { username: '李四', avatar: null },
+        { username: '王五', avatar: null },
+        { username: '赵六', avatar: null },
+        { username: '投资达人', avatar: null },
+        { username: '价值投资者', avatar: null },
+        { username: '技术分析师', avatar: null },
+        { username: '基本面研究员', avatar: null },
+    ];
+
+    const commentTemplates = [
+        '这个事件对相关板块影响很大，值得关注后续发展',
+        '相关概念股已经开始异动了，市场反应很快',
+        '感谢分享，这个事件我之前没注意到',
+        '从基本面来看，这个事件会带来实质性利好',
+        '需要观察后续政策落地情况，现在下结论还太早',
+        '相关产业链的龙头企业值得重点关注',
+        '这类事件一般都是短期刺激，长期影响有限',
+        '建议大家理性对待，不要盲目追高',
+    ];
+
+    for (let i = 0; i < 5; i++) {
+        const hoursAgo = Math.floor(Math.random() * 48) + 1; // 1-48 小时前
+        const createdAt = new Date(Date.now() - hoursAgo * 60 * 60 * 1000);
+        const user = users[i % users.length];
+
+        comments.push({
+            id: `comment_${eventId}_${i + 1}`,
+            content: commentTemplates[i % commentTemplates.length],
+            content_type: 'text',
+            author: {
+                id: `user_${i + 1}`,
+                username: user.username,
+                avatar: user.avatar,
+            },
+            created_at: createdAt.toISOString(),
+            likes_count: Math.floor(Math.random() * 20),
+            is_liked: false,
+        });
+    }
+
+    // 按时间升序排序（最旧的在前）
+    comments.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+
+    return comments;
+};
+
+/**
+ * 获取或初始化评论列表
+ * @param {string} eventId - 事件 ID
+ * @returns {Array} 评论列表
+ */
+const getOrInitComments = (eventId) => {
+    if (!commentsStore.has(eventId)) {
+        commentsStore.set(eventId, initializeMockComments(eventId));
+    }
+    return commentsStore.get(eventId);
+};
+
 export const eventHandlers = [
     // ==================== 事件列表相关 ====================
 
@@ -1249,4 +1320,111 @@ export const eventHandlers = [
             );
         }
     }),
+
+    // ==================== 评论相关 ====================
+
+    // 获取事件评论列表
+    http.get('/api/events/:eventId/posts', async ({ params, request }) => {
+        await delay(300);
+
+        const { eventId } = params;
+        const url = new URL(request.url);
+        const sort = url.searchParams.get('sort') || 'latest';
+        const page = parseInt(url.searchParams.get('page') || '1');
+        const perPage = parseInt(url.searchParams.get('per_page') || '20');
+
+        console.log('[Mock] 获取评论列表, eventId:', eventId, 'sort:', sort);
+
+        try {
+            // 从内存存储获取评论列表
+            const allComments = getOrInitComments(eventId);
+
+            // ✅ 创建副本并排序（避免直接修改原数组）
+            let sortedComments = [...allComments];
+            if (sort === 'hot') {
+                sortedComments.sort((a, b) => b.likes_count - a.likes_count);
+            } else {
+                // 默认按时间升序（oldest first）- 最旧评论在前，最新在后
+                sortedComments.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+            }
+
+            // 分页处理（使用排序后的副本）
+            const startIndex = (page - 1) * perPage;
+            const endIndex = startIndex + perPage;
+            const paginatedComments = sortedComments.slice(startIndex, endIndex);
+
+            return HttpResponse.json({
+                success: true,
+                data: paginatedComments,
+                pagination: {
+                    page: page,
+                    per_page: perPage,
+                    total: allComments.length,
+                    pages: Math.ceil(allComments.length / perPage),
+                    has_prev: page > 1,
+                    has_next: endIndex < allComments.length,
+                },
+                message: '获取评论成功',
+            });
+        } catch (error) {
+            console.error('[Mock] 获取评论列表失败:', error);
+            return HttpResponse.json(
+                {
+                    success: false,
+                    error: '获取评论失败',
+                    data: [],
+                },
+                { status: 500 }
+            );
+        }
+    }),
+
+    // 发表评论
+    http.post('/api/events/:eventId/posts', async ({ params, request }) => {
+        await delay(500);
+
+        const { eventId } = params;
+        const body = await request.json();
+
+        console.log('[Mock] 发表评论, eventId:', eventId, 'content:', body.content);
+
+        try {
+            // 模拟创建新评论
+            const newComment = {
+                id: `comment_${eventId}_${Date.now()}`,
+                content: body.content,
+                content_type: body.content_type || 'text',
+                author: {
+                    id: 'current_user',
+                    username: '当前用户',
+                    avatar: null,
+                },
+                created_at: new Date().toISOString(),
+                likes_count: 0,
+                is_liked: false,
+            };
+
+            // 将新评论添加到内存存储（插入到列表开头）
+            const comments = getOrInitComments(eventId);
+            comments.unshift(newComment);
+
+            console.log('[Mock] 评论已添加到内存存储, 当前评论总数:', comments.length);
+
+            return HttpResponse.json({
+                success: true,
+                data: newComment,
+                message: '评论发布成功',
+            });
+        } catch (error) {
+            console.error('[Mock] 发表评论失败:', error);
+            return HttpResponse.json(
+                {
+                    success: false,
+                    error: '评论发布失败',
+                    message: '系统错误，请稍后重试',
+                },
+                { status: 500 }
+            );
+        }
+    }),
 ];

src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js

@@ -4,6 +4,7 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
+  Box,
   Card,
   CardBody,
   VStack,
@@ -32,6 +33,7 @@ import TransmissionChainAnalysis from '../../../EventDetail/components/Transmiss
 import SubscriptionBadge from '../../../../components/SubscriptionBadge';
 import SubscriptionUpgradeModal from '../../../../components/SubscriptionUpgradeModal';
 import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
+import EventCommentSection from '../../../../components/EventCommentSection';
 
 /**
  * 动态新闻详情面板主组件
@@ -414,6 +416,11 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
               eventService={eventService}
             />
           </CollapsibleSection>
+
+          {/* 讨论区（评论区） - 所有登录用户可用 */}
+          <Box mt={4}>
+            <EventCommentSection eventId={event.id} />
+          </Box>
         </VStack>
       </CardBody>
 

src/views/Community/components/EventCard/KeywordsCarousel.js

@@ -74,7 +74,9 @@ const KeywordsCarousel = ({
                     whiteSpace="nowrap"
                     textShadow="0 0 20px rgba(255, 195, 0, 0.3)"
                 >
-                    {currentKeyword}
+                    {typeof currentKeyword === 'string'
+                        ? currentKeyword
+                        : currentKeyword?.concept || '未知标签'}
                 </Text>
             </Box>
         </Tooltip>