refactor: 重构 Community 目录，将公共组件迁移到 src/components/

- 迁移 klineDataCache.js 到 src/utils/stock/（被 StockChart 使用）
- 迁移 InvestmentCalendar 到 src/components/InvestmentCalendar/（被 Navbar、Dashboard 使用）
- 迁移 DynamicNewsDetail 到 src/components/EventDetailPanel/（被 EventDetail 使用）
- 更新所有相关导入路径，使用路径别名
- 保持 Community 目录其余结构不变

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/EventDetailPanel/StockListItem.js

@@ -0,0 +1,477 @@
+// src/components/EventDetailPanel/StockListItem.js
+// 股票卡片组件（融合表格功能的卡片样式）
+
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  Box,
+  Flex,
+  VStack,
+  HStack,
+  Text,
+  Button,
+  IconButton,
+  Collapse,
+  Tooltip,
+  Badge,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { StarIcon } from '@chakra-ui/icons';
+import { Tag } from 'antd';
+import { RobotOutlined } from '@ant-design/icons';
+import { selectIsMobile } from '@store/slices/deviceSlice';
+import MiniTimelineChart from '@views/Community/components/StockDetailPanel/components/MiniTimelineChart';
+import MiniKLineChart from './MiniKLineChart';
+import TimelineChartModal from '@components/StockChart/TimelineChartModal';
+import KLineChartModal from '@components/StockChart/KLineChartModal';
+import { getChangeColor } from '@utils/colorUtils';
+import { PROFESSIONAL_COLORS } from '@constants/professionalTheme';
+
+/**
+ * 股票卡片组件
+ * @param {Object} props
+ * @param {Object} props.stock - 股票对象
+ * @param {string} props.stock.stock_name - 股票名称
+ * @param {string} props.stock.stock_code - 股票代码
+ * @param {string} props.stock.relation_desc - 关联描述
+ * @param {Object} props.quote - 股票行情数据（可选）
+ * @param {number} props.quote.change - 涨跌幅
+ * @param {string} props.eventTime - 事件时间（可选）
+ * @param {boolean} props.isInWatchlist - 是否在自选股中
+ * @param {Function} props.onWatchlistToggle - 切换自选股回调
+ * @param {Array} props.timelineData - 预加载的分时图数据（可选，由父组件批量加载后传入）
+ * @param {boolean} props.timelineLoading - 分时图数据加载状态
+ * @param {Array} props.dailyData - 预加载的日K线数据（可选，由父组件批量加载后传入）
+ * @param {boolean} props.dailyLoading - 日K线数据加载状态
+ */
+const StockListItem = ({
+  stock,
+  quote = null,
+  eventTime = null,
+  isInWatchlist = false,
+  onWatchlistToggle,
+  timelineData,
+  timelineLoading = false,
+  dailyData,
+  dailyLoading = false
+}) => {
+  const isMobile = useSelector(selectIsMobile);
+  const cardBg = PROFESSIONAL_COLORS.background.card;
+  const borderColor = PROFESSIONAL_COLORS.border.default;
+  const codeColor = '#3B82F6';
+  const nameColor = PROFESSIONAL_COLORS.text.primary;
+  const descColor = PROFESSIONAL_COLORS.text.secondary;
+  const dividerColor = PROFESSIONAL_COLORS.border.default;
+
+  const [isDescExpanded, setIsDescExpanded] = useState(false);
+  const [isTimelineModalOpen, setIsTimelineModalOpen] = useState(false);
+  const [isKLineModalOpen, setIsKLineModalOpen] = useState(false);
+
+  const handleViewDetail = () => {
+    const stockCode = stock.stock_code.split('.')[0];
+    window.open(`https://valuefrontier.cn/company?scode=${stockCode}`, '_blank');
+  };
+
+  const handleWatchlistClick = (e) => {
+    e.stopPropagation();
+    onWatchlistToggle?.(stock.stock_code, stock.stock_name, isInWatchlist);
+  };
+
+  // 格式化涨跌幅显示
+  const formatChange = (value) => {
+    if (value === null || value === undefined || isNaN(value)) return '--';
+    const prefix = value > 0 ? '+' : '';
+    return `${prefix}${parseFloat(value).toFixed(2)}%`;
+  };
+
+  // 使用工具函数获取涨跌幅颜色（已从 colorUtils 导入）
+
+  // 获取涨跌幅数据（优先使用 quote，fallback 到 stock）
+  const change = quote?.change ?? stock.daily_change ?? null;
+
+  // 处理关联描述
+  const getRelationDesc = () => {
+    const relationDesc = stock.relation_desc;
+
+    if (!relationDesc) return '--';
+
+    if (typeof relationDesc === 'string') {
+      return relationDesc;
+    } else if (typeof relationDesc === 'object' && relationDesc.data && Array.isArray(relationDesc.data)) {
+      // 新格式：{data: [{query_part: "...", sentences: "..."}]}
+      return relationDesc.data
+        .map(item => item.query_part || item.sentences || '')
+        .filter(s => s)
+        .join('；') || '--';
+    }
+
+    return '--';
+  };
+
+  const relationText = getRelationDesc();
+  const maxLength = 50; // 收缩时显示的最大字符数
+  const needTruncate = relationText && relationText !== '--' && relationText.length > maxLength;
+
+  return (
+    <>
+    <Box
+      bg={cardBg}
+      borderWidth="1px"
+      borderColor={borderColor}
+      borderRadius="lg"
+      p={3}
+      position="relative"
+      overflow="visible"
+      _before={{
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: '3px',
+        bgGradient: 'linear(to-r, blue.400, purple.500, pink.500)',
+        borderTopLeftRadius: 'lg',
+        borderTopRightRadius: 'lg',
+      }}
+      _hover={{
+        boxShadow: 'lg',
+        borderColor: 'blue.300',
+      }}
+      transition="all 0.2s"
+    >
+      {/* 单行紧凑布局：名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
+      <HStack spacing={2} align="center" flexWrap={isMobile ? 'wrap' : 'nowrap'}>
+        {/* 左侧：股票信息区 */}
+        <HStack spacing={2} overflow="hidden">
+          {/* 股票代码 + 名称 + 涨跌幅 */}
+          <VStack
+            align="stretch"
+            spacing={1}
+            minW="95px"
+            maxW="110px"
+            justify="center"
+            flexShrink={0}
+          >
+            <Tooltip
+              label="点击查看股票详情"
+              placement="top"
+              hasArrow
+              bg="blue.600"
+              color="white"
+              fontSize="xs"
+            >
+              <VStack spacing={0} align="stretch">
+                <Text
+                  fontSize="xs"
+                  color={codeColor}
+                  noOfLines={1}
+                  cursor="pointer"
+                  onClick={handleViewDetail}
+                  _hover={{ textDecoration: 'underline' }}
+                >
+                  {stock.stock_code}
+                </Text>
+                <Text
+                  fontSize="xs"
+                  fontWeight="bold"
+                  color={nameColor}
+                  noOfLines={1}
+                  cursor="pointer"
+                  onClick={handleViewDetail}
+                  _hover={{ textDecoration: 'underline' }}
+                >
+                  {stock.stock_name}
+                </Text>
+              </VStack>
+            </Tooltip>
+            <HStack spacing={1} align="center">
+              <Text
+                fontSize="md"
+                fontWeight="bold"
+                color={getChangeColor(change)}
+              >
+                {formatChange(change)}
+              </Text>
+              {onWatchlistToggle && (
+                <IconButton
+                  size="xs"
+                  variant={isInWatchlist ? 'solid' : 'outline'}
+                  colorScheme={isInWatchlist ? 'yellow' : 'gray'}
+                  icon={<StarIcon color={isInWatchlist ? undefined : 'gray.400'} />}
+                  onClick={handleWatchlistClick}
+                  aria-label={isInWatchlist ? '已关注' : '加自选'}
+                  borderRadius="full"
+                  borderColor={isInWatchlist ? undefined : 'gray.300'}
+                />
+              )}
+            </HStack>
+          </VStack>
+
+          {/* 分时图 - 自适应 */}
+          <VStack
+            flex={1}
+            minW="80px"
+            maxW="150px"
+            borderWidth="1px"
+            borderColor="rgba(59, 130, 246, 0.3)"
+            borderRadius="md"
+            px={2}
+            py={1.5}
+            bg="rgba(59, 130, 246, 0.1)"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsTimelineModalOpen(true);
+            }}
+            cursor="pointer"
+            align="stretch"
+            spacing={0}
+            _hover={{
+              borderColor: '#3B82F6',
+              boxShadow: '0 0 10px rgba(59, 130, 246, 0.3)',
+              transform: 'translateY(-1px)'
+            }}
+            transition="all 0.2s"
+          >
+            <Text
+              fontSize="10px"
+              color="#3B82F6"
+              fontWeight="semibold"
+              whiteSpace="nowrap"
+              mb={0.5}
+            >
+              📈 分时
+            </Text>
+            <Box h="28px">
+              <MiniTimelineChart
+                stockCode={stock.stock_code}
+                eventTime={eventTime}
+                preloadedData={timelineData}
+                loading={timelineLoading}
+              />
+            </Box>
+          </VStack>
+
+          {/* K线图 - 自适应 */}
+          <VStack
+            flex={1}
+            minW="80px"
+            maxW="150px"
+            borderWidth="1px"
+            borderColor="rgba(168, 85, 247, 0.3)"
+            borderRadius="md"
+            px={2}
+            py={1.5}
+            bg="rgba(168, 85, 247, 0.1)"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsKLineModalOpen(true);
+            }}
+            cursor="pointer"
+            align="stretch"
+            spacing={0}
+            _hover={{
+              borderColor: '#A855F7',
+              boxShadow: '0 0 10px rgba(168, 85, 247, 0.3)',
+              transform: 'translateY(-1px)'
+            }}
+            transition="all 0.2s"
+          >
+            <Text
+              fontSize="10px"
+              color="#A855F7"
+              fontWeight="semibold"
+              whiteSpace="nowrap"
+              mb={0.5}
+            >
+              📊 日线
+            </Text>
+            <Box h="28px">
+              <MiniKLineChart
+                stockCode={stock.stock_code}
+                eventTime={eventTime}
+                preloadedData={dailyData}
+                loading={dailyLoading}
+              />
+            </Box>
+          </VStack>
+        </HStack>
+
+        {/* 关联描述 - 升级和降级处理 */}
+        {stock.relation_desc && (
+          <Box flex={1} minW={0} flexBasis={isMobile ? '100%' : ''}>
+            {Array.isArray(stock.relation_desc?.data) ? (
+              // 升级：带引用来源的版本 - 添加折叠功能
+              <Tooltip
+                label={isDescExpanded ? "点击收起" : "点击展开完整描述"}
+                placement="top"
+                hasArrow
+                bg="rgba(20, 20, 20, 0.95)"
+                color={PROFESSIONAL_COLORS.gold[500]}
+                fontSize="xs"
+              >
+                <Box
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setIsDescExpanded(!isDescExpanded);
+                  }}
+                  cursor="pointer"
+                  bg={PROFESSIONAL_COLORS.background.secondary}
+                  borderRadius="md"
+                  _hover={{
+                    bg: PROFESSIONAL_COLORS.background.cardHover,
+                  }}
+                  transition="background 0.2s"
+                  position="relative"
+                >
+                  <Collapse in={isDescExpanded} startingHeight={56}>
+                    {/* AI 标识 - 行内显示在文字前面 */}
+                    <Tag
+                      icon={<RobotOutlined />}
+                      color="purple"
+                      style={{
+                        fontSize: 12,
+                        padding: '2px 8px',
+                        marginRight: 8,
+                        verticalAlign: 'middle',
+                        display: 'inline-flex',
+                      }}
+                    >
+                      AI合成
+                    </Tag>
+                    {/* 渲染 query_part，每句带来源悬停提示 */}
+                    <Text
+                      as="span"
+                      fontSize="sm"
+                      color={PROFESSIONAL_COLORS.text.primary}
+                      lineHeight="1.8"
+                    >
+                      {Array.isArray(stock.relation_desc?.data) && stock.relation_desc.data.filter(item => item.query_part).map((item, index, arr) => (
+                        <React.Fragment key={index}>
+                          <Tooltip
+                            label={
+                              <Box maxW="400px" p={2}>
+                                {item.sentences && (
+                                  <Text fontSize="xs" mb={2} whiteSpace="pre-wrap">
+                                    {item.sentences}
+                                  </Text>
+                                )}
+                                <Text fontSize="xs" color="gray.300" mt={1}>
+                                  来源：{item.organization || '未知'}{item.author ? ` / ${item.author}` : ''}
+                                </Text>
+                                {item.report_title && (
+                                  <Text fontSize="xs" color="gray.300" noOfLines={2}>
+                                    {item.report_title}
+                                  </Text>
+                                )}
+                                {item.declare_date && (
+                                  <Text fontSize="xs" color="gray.400">
+                                    {new Date(item.declare_date).toLocaleDateString('zh-CN')}
+                                  </Text>
+                                )}
+                              </Box>
+                            }
+                            placement="top"
+                            hasArrow
+                            bg="rgba(20, 20, 20, 0.95)"
+                            color="white"
+                            maxW="420px"
+                          >
+                            <Text
+                              as="span"
+                              cursor="help"
+                              borderBottom="1px dashed"
+                              borderBottomColor="gray.400"
+                              _hover={{
+                                color: PROFESSIONAL_COLORS.gold[500],
+                                borderBottomColor: PROFESSIONAL_COLORS.gold[500],
+                              }}
+                              transition="all 0.2s"
+                            >
+                              {item.query_part}
+                            </Text>
+                          </Tooltip>
+                          {index < arr.length - 1 && '；'}
+                        </React.Fragment>
+                      ))}
+                    </Text>
+                  </Collapse>
+                </Box>
+              </Tooltip>
+            ) : (
+              // 降级：纯文本版本（保留展开/收起功能）
+              <Tooltip
+                label={isDescExpanded ? "点击收起" : "点击展开完整描述"}
+                placement="top"
+                hasArrow
+                bg="rgba(20, 20, 20, 0.95)"
+                color={PROFESSIONAL_COLORS.gold[500]}
+                fontSize="xs"
+              >
+                <Box
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setIsDescExpanded(!isDescExpanded);
+                  }}
+                  cursor="pointer"
+                  bg={PROFESSIONAL_COLORS.background.secondary}
+                  borderRadius="md"
+                  _hover={{
+                    bg: PROFESSIONAL_COLORS.background.cardHover,
+                  }}
+                  transition="background 0.2s"
+                  position="relative"
+                >
+                  {/* 去掉"关联描述"标题 */}
+                  <Collapse in={isDescExpanded} startingHeight={56}>
+                    <Text
+                      fontSize="xs"
+                      color={nameColor}
+                      lineHeight="1.5"
+                    >
+                      {relationText}
+                    </Text>
+                  </Collapse>
+
+                  {/* 提示信息 */}
+                  {isDescExpanded && (
+                    <Text
+                      fontSize="xs"
+                      color="gray.500"
+                      mt={2}
+                      fontStyle="italic"
+                    >
+                      ⚠️ AI生成，仅供参考
+                    </Text>
+                  )}
+                </Box>
+              </Tooltip>
+            )}
+          </Box>
+        )}
+      </HStack>
+    </Box>
+
+    {/* 分时图弹窗 */}
+    {isTimelineModalOpen && (
+      <TimelineChartModal
+        isOpen={isTimelineModalOpen}
+        onClose={() => setIsTimelineModalOpen(false)}
+        stock={stock}
+        eventTime={eventTime}
+      />
+    )}
+
+    {/* K线图弹窗 */}
+    {isKLineModalOpen && (
+      <KLineChartModal
+        isOpen={isKLineModalOpen}
+        onClose={() => setIsKLineModalOpen(false)}
+        stock={stock}
+        eventTime={eventTime}
+      />
+    )}
+    </>
+  );
+};
+
+export default StockListItem;