refactor: Community 目录结构重组 + 修复导入路径 + 添加 Mock 数据
## 目录重构 - DynamicNewsCard/ → DynamicNews/(含 layouts/, hooks/ 子目录) - EventCard 原子组件 → EventCard/atoms/ - EventDetailModal 独立目录化 - HotEvents 独立目录化(含 CSS) - SearchFilters 独立目录化(CompactSearchBox, TradingTimeFilter) ## 导入路径修复 - EventCard/*.js: 统一使用 @constants/, @utils/, @components/ 别名 - atoms/*.js: 修复移动后的相对路径问题 - DynamicNewsCard.js: 更新 contexts, store, constants 导入 - EventHeaderInfo.js, CompactMetaBar.js: 修复 EventFollowButton 导入 ## Mock Handler 添加 - /api/events/:eventId/expectation-score - 事件超预期得分 - /api/index/:indexCode/realtime - 指数实时行情 ## 警告修复 - CitationMark.js: overlayInnerStyle → styles (Antd 5.x) - CitedContent.js: 移除不支持的 jsx 属性 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
// src/views/Community/components/DynamicNewsCard.js
|
||||
// src/views/Community/components/DynamicNews/DynamicNewsCard.js
|
||||
// 横向滚动事件卡片组件(实时要闻·动态追踪)
|
||||
|
||||
import React, { forwardRef, useState, useEffect, useMemo, useCallback, useRef, useImperativeHandle } from 'react';
|
||||
@@ -30,23 +30,23 @@ import {
|
||||
Icon,
|
||||
} from '@chakra-ui/react';
|
||||
import { TimeIcon, BellIcon } from '@chakra-ui/icons';
|
||||
import { useNotification } from '../../../contexts/NotificationContext';
|
||||
import EventScrollList from './DynamicNewsCard/EventScrollList';
|
||||
import ModeToggleButtons from './DynamicNewsCard/ModeToggleButtons';
|
||||
import PaginationControl from './DynamicNewsCard/PaginationControl';
|
||||
import { useNotification } from '@contexts/NotificationContext';
|
||||
import EventScrollList from './EventScrollList';
|
||||
import ModeToggleButtons from './ModeToggleButtons';
|
||||
import PaginationControl from './PaginationControl';
|
||||
import DynamicNewsDetailPanel from '@components/EventDetailPanel';
|
||||
import CompactSearchBox from './CompactSearchBox';
|
||||
import CompactSearchBox from '../SearchFilters/CompactSearchBox';
|
||||
import {
|
||||
fetchDynamicNews,
|
||||
toggleEventFollow,
|
||||
selectEventFollowStatus,
|
||||
selectVerticalEventsWithLoading,
|
||||
selectFourRowEventsWithLoading
|
||||
} from '../../../store/slices/communityDataSlice';
|
||||
import { usePagination } from './DynamicNewsCard/hooks/usePagination';
|
||||
import { PAGINATION_CONFIG, DISPLAY_MODES, REFRESH_DEBOUNCE_DELAY } from './DynamicNewsCard/constants';
|
||||
import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme';
|
||||
import { debounce } from '../../../utils/debounce';
|
||||
} from '@store/slices/communityDataSlice';
|
||||
import { usePagination } from './hooks/usePagination';
|
||||
import { PAGINATION_CONFIG, DISPLAY_MODES, REFRESH_DEBOUNCE_DELAY } from './constants';
|
||||
import { PROFESSIONAL_COLORS } from '@constants/professionalTheme';
|
||||
import { debounce } from '@utils/debounce';
|
||||
import { useDevice } from '@hooks/useDevice';
|
||||
|
||||
// 🔍 调试:渲染计数器
|
||||
@@ -1,4 +1,4 @@
|
||||
// src/views/Community/components/DynamicNewsCard/EventDetailScrollPanel.js
|
||||
// src/views/Community/components/DynamicNews/EventDetailScrollPanel.js
|
||||
// 事件详情滚动面板组件
|
||||
|
||||
import React from 'react';
|
||||
@@ -1,4 +1,4 @@
|
||||
// src/views/Community/components/DynamicNewsCard/EventScrollList.js
|
||||
// src/views/Community/components/DynamicNews/EventScrollList.js
|
||||
// 横向滚动事件列表组件
|
||||
|
||||
import React, { useRef, useCallback } from 'react';
|
||||
@@ -6,8 +6,8 @@ import {
|
||||
Box,
|
||||
useColorModeValue
|
||||
} from '@chakra-ui/react';
|
||||
import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
|
||||
import VerticalModeLayout from './VerticalModeLayout';
|
||||
import VirtualizedFourRowGrid from './layouts/VirtualizedFourRowGrid';
|
||||
import VerticalModeLayout from './layouts/VerticalModeLayout';
|
||||
|
||||
/**
|
||||
* 事件列表组件 - 支持纵向和平铺两种展示模式
|
||||
@@ -1,4 +1,4 @@
|
||||
// src/views/Community/components/DynamicNewsCard/ModeToggleButtons.js
|
||||
// src/views/Community/components/DynamicNews/ModeToggleButtons.js
|
||||
// 事件列表模式切换按钮组
|
||||
|
||||
import React from 'react';
|
||||
@@ -1,4 +1,4 @@
|
||||
// src/views/Community/components/DynamicNewsCard/PaginationControl.js
|
||||
// src/views/Community/components/DynamicNews/PaginationControl.js
|
||||
// 分页控制器组件
|
||||
|
||||
import React, { useState } from 'react';
|
||||
@@ -1,4 +1,4 @@
|
||||
// src/views/Community/components/DynamicNewsCard/constants.js
|
||||
// src/views/Community/components/DynamicNews/constants.js
|
||||
// 动态新闻卡片组件 - 常量配置
|
||||
|
||||
// ========== 分页配置常量 ==========
|
||||
@@ -0,0 +1,4 @@
|
||||
// src/views/Community/components/DynamicNews/hooks/index.js
|
||||
// Hooks
|
||||
|
||||
export { usePagination } from './usePagination';
|
||||
@@ -1,9 +1,9 @@
|
||||
// src/views/Community/components/DynamicNewsCard/hooks/usePagination.js
|
||||
// src/views/Community/components/DynamicNews/hooks/usePagination.js
|
||||
// 分页逻辑自定义 Hook
|
||||
|
||||
import { useState, useMemo, useCallback, useRef } from 'react';
|
||||
import { fetchDynamicNews, updatePaginationPage } from '../../../../../store/slices/communityDataSlice';
|
||||
import { logger } from '../../../../../utils/logger';
|
||||
import { fetchDynamicNews, updatePaginationPage } from '@store/slices/communityDataSlice';
|
||||
import { logger } from '@utils/logger';
|
||||
import {
|
||||
PAGINATION_CONFIG,
|
||||
DISPLAY_MODES,
|
||||
21
src/views/Community/components/DynamicNews/index.js
Normal file
21
src/views/Community/components/DynamicNews/index.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// src/views/Community/components/DynamicNews/index.js
|
||||
// 动态新闻模块
|
||||
|
||||
// 主组件
|
||||
export { default as DynamicNewsCard } from './DynamicNewsCard';
|
||||
|
||||
// 布局组件
|
||||
export { default as VerticalModeLayout } from './layouts/VerticalModeLayout';
|
||||
export { default as VirtualizedFourRowGrid } from './layouts/VirtualizedFourRowGrid';
|
||||
|
||||
// 子组件
|
||||
export { default as EventScrollList } from './EventScrollList';
|
||||
export { default as EventDetailScrollPanel } from './EventDetailScrollPanel';
|
||||
export { default as ModeToggleButtons } from './ModeToggleButtons';
|
||||
export { default as PaginationControl } from './PaginationControl';
|
||||
|
||||
// Hooks
|
||||
export { usePagination } from './hooks/usePagination';
|
||||
|
||||
// 常量
|
||||
export * from './constants';
|
||||
@@ -1,4 +1,4 @@
|
||||
// src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
|
||||
// src/views/Community/components/DynamicNews/layouts/VerticalModeLayout.js
|
||||
// 纵向分栏模式布局组件
|
||||
|
||||
import React, { useState } from 'react';
|
||||
@@ -12,10 +12,10 @@ import {
|
||||
useDisclosure
|
||||
} from '@chakra-ui/react';
|
||||
import { InfoIcon } from '@chakra-ui/icons';
|
||||
import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
|
||||
import EventDetailScrollPanel from './EventDetailScrollPanel';
|
||||
import EventDetailModal from '../EventDetailModal';
|
||||
import PaginationControl from './PaginationControl';
|
||||
import HorizontalDynamicNewsEventCard from '../../EventCard/HorizontalDynamicNewsEventCard';
|
||||
import EventDetailScrollPanel from '../EventDetailScrollPanel';
|
||||
import EventDetailModal from '../../EventDetailModal';
|
||||
import PaginationControl from '../PaginationControl';
|
||||
|
||||
/**
|
||||
* 纵向分栏模式布局
|
||||
@@ -1,4 +1,4 @@
|
||||
// src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js
|
||||
// src/views/Community/components/DynamicNews/layouts/VirtualizedFourRowGrid.js
|
||||
// 虚拟化网格组件(支持多列布局 + 纵向滚动 + 无限滚动)
|
||||
|
||||
import React, { useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react';
|
||||
@@ -6,7 +6,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { Box, Grid, Spinner, Text, VStack, Center, HStack, IconButton, useBreakpointValue } from '@chakra-ui/react';
|
||||
import { RepeatIcon } from '@chakra-ui/icons';
|
||||
import { useColorModeValue } from '@chakra-ui/react';
|
||||
import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
|
||||
import DynamicNewsEventCard from '../../EventCard/DynamicNewsEventCard';
|
||||
|
||||
/**
|
||||
* 虚拟化网格组件(支持多列布局 + 无限滚动)
|
||||
@@ -0,0 +1,5 @@
|
||||
// src/views/Community/components/DynamicNews/layouts/index.js
|
||||
// 布局组件
|
||||
|
||||
export { default as VerticalModeLayout } from './VerticalModeLayout';
|
||||
export { default as VirtualizedFourRowGrid } from './VirtualizedFourRowGrid';
|
||||
@@ -12,13 +12,15 @@ import {
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import dayjs from 'dayjs';
|
||||
import { getImportanceConfig } from '../../../../constants/importanceLevels';
|
||||
import { getImportanceConfig } from '@constants/importanceLevels';
|
||||
|
||||
// 导入子组件
|
||||
import EventTimeline from './EventTimeline';
|
||||
import EventHeader from './EventHeader';
|
||||
import EventStats from './EventStats';
|
||||
import EventFollowButton from './EventFollowButton';
|
||||
import {
|
||||
EventTimeline,
|
||||
EventHeader,
|
||||
EventStats,
|
||||
EventFollowButton,
|
||||
} from './atoms';
|
||||
|
||||
/**
|
||||
* 紧凑模式事件卡片组件
|
||||
|
||||
@@ -10,15 +10,17 @@ import {
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import dayjs from 'dayjs';
|
||||
import { getImportanceConfig } from '../../../../constants/importanceLevels';
|
||||
import { getImportanceConfig } from '@constants/importanceLevels';
|
||||
|
||||
// 导入子组件
|
||||
import EventTimeline from './EventTimeline';
|
||||
import EventHeader from './EventHeader';
|
||||
import EventStats from './EventStats';
|
||||
import EventFollowButton from './EventFollowButton';
|
||||
import EventPriceDisplay from './EventPriceDisplay';
|
||||
import EventDescription from './EventDescription';
|
||||
import {
|
||||
EventTimeline,
|
||||
EventHeader,
|
||||
EventStats,
|
||||
EventFollowButton,
|
||||
EventPriceDisplay,
|
||||
EventDescription,
|
||||
} from './atoms';
|
||||
|
||||
/**
|
||||
* 详细模式事件卡片组件
|
||||
|
||||
@@ -12,12 +12,12 @@ import {
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import dayjs from 'dayjs';
|
||||
import { getImportanceConfig } from '../../../../constants/importanceLevels';
|
||||
import { getChangeColor } from '../../../../utils/colorUtils';
|
||||
import { getImportanceConfig } from '@constants/importanceLevels';
|
||||
import { getChangeColor } from '@utils/colorUtils';
|
||||
|
||||
// 导入子组件
|
||||
import EventFollowButton from './EventFollowButton';
|
||||
import StockChangeIndicators from '../../../../components/StockChangeIndicators';
|
||||
import { EventFollowButton } from './atoms';
|
||||
import StockChangeIndicators from '@components/StockChangeIndicators';
|
||||
|
||||
/**
|
||||
* 动态新闻事件卡片组件(极简版)
|
||||
|
||||
@@ -13,17 +13,19 @@ import {
|
||||
useColorModeValue,
|
||||
useBreakpointValue,
|
||||
} from '@chakra-ui/react';
|
||||
import { getImportanceConfig } from '../../../../constants/importanceLevels';
|
||||
import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
|
||||
import { getImportanceConfig } from '@constants/importanceLevels';
|
||||
import { PROFESSIONAL_COLORS } from '@constants/professionalTheme';
|
||||
import { useDevice } from '@hooks/useDevice';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
// 导入子组件
|
||||
import ImportanceStamp from './ImportanceStamp';
|
||||
import EventTimeline from './EventTimeline';
|
||||
import EventFollowButton from './EventFollowButton';
|
||||
import StockChangeIndicators from '../../../../components/StockChangeIndicators';
|
||||
import KeywordsCarousel from './KeywordsCarousel';
|
||||
import {
|
||||
ImportanceStamp,
|
||||
EventTimeline,
|
||||
EventFollowButton,
|
||||
KeywordsCarousel,
|
||||
} from './atoms';
|
||||
import StockChangeIndicators from '@components/StockChangeIndicators';
|
||||
|
||||
/**
|
||||
* 横向布局的动态新闻事件卡片组件
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// src/views/Community/components/EventCard/EventFollowButton.js
|
||||
// src/views/Community/components/EventCard/atoms/EventFollowButton.js
|
||||
import React from 'react';
|
||||
import { IconButton, Box } from '@chakra-ui/react';
|
||||
import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
|
||||
@@ -1,8 +1,8 @@
|
||||
// src/views/Community/components/EventCard/EventImportanceBadge.js
|
||||
// src/views/Community/components/EventCard/atoms/EventImportanceBadge.js
|
||||
import React from 'react';
|
||||
import { Badge, Tooltip, VStack, HStack, Text, Divider, Circle } from '@chakra-ui/react';
|
||||
import { InfoIcon } from '@chakra-ui/icons';
|
||||
import { getImportanceConfig, getAllImportanceLevels } from '../../../../constants/importanceLevels';
|
||||
import { getImportanceConfig, getAllImportanceLevels } from '@constants/importanceLevels';
|
||||
|
||||
/**
|
||||
* 事件重要性等级标签组件
|
||||
@@ -1,7 +1,7 @@
|
||||
// src/views/Community/components/EventCard/EventPriceDisplay.js
|
||||
// src/views/Community/components/EventCard/atoms/EventPriceDisplay.js
|
||||
import React, { useState } from 'react';
|
||||
import { HStack, Box, Text, Tooltip, Progress } from '@chakra-ui/react';
|
||||
import { PriceArrow } from '../../../../utils/priceFormatters';
|
||||
import { PriceArrow } from '@utils/priceFormatters';
|
||||
|
||||
/**
|
||||
* 事件价格变动显示组件
|
||||
@@ -1,4 +1,4 @@
|
||||
// src/views/Community/components/EventCard/ImportanceBadge.js
|
||||
// src/views/Community/components/EventCard/atoms/ImportanceBadge.js
|
||||
// 重要性标签通用组件
|
||||
|
||||
import React from 'react';
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
PopoverArrow,
|
||||
Portal,
|
||||
} from '@chakra-ui/react';
|
||||
import { getImportanceConfig, getAllImportanceLevels } from '../../../../constants/importanceLevels';
|
||||
import { getImportanceConfig, getAllImportanceLevels } from '@constants/importanceLevels';
|
||||
|
||||
/**
|
||||
* 重要性标签组件(实心样式)
|
||||
@@ -1,4 +1,4 @@
|
||||
// src/views/Community/components/EventCard/ImportanceStamp.js
|
||||
// src/views/Community/components/EventCard/atoms/ImportanceStamp.js
|
||||
// 重要性印章组件
|
||||
|
||||
import React from 'react';
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import { getImportanceConfig } from '../../../../constants/importanceLevels';
|
||||
import { getImportanceConfig } from '@constants/importanceLevels';
|
||||
|
||||
/**
|
||||
* 重要性印章组件(模拟盖章效果)
|
||||
@@ -1,8 +1,8 @@
|
||||
// src/views/Community/components/EventCard/KeywordsCarousel.js
|
||||
// src/views/Community/components/EventCard/atoms/KeywordsCarousel.js
|
||||
// Keywords标签组件(点击切换)
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Text, Tooltip } from '@chakra-ui/react';
|
||||
import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
|
||||
import { PROFESSIONAL_COLORS } from '@constants/professionalTheme';
|
||||
|
||||
/**
|
||||
* Keywords标签组件(点击切换下一个)
|
||||
13
src/views/Community/components/EventCard/atoms/index.js
Normal file
13
src/views/Community/components/EventCard/atoms/index.js
Normal file
@@ -0,0 +1,13 @@
|
||||
// src/views/Community/components/EventCard/atoms/index.js
|
||||
// 事件卡片原子组件
|
||||
|
||||
export { default as EventDescription } from './EventDescription';
|
||||
export { default as EventFollowButton } from './EventFollowButton';
|
||||
export { default as EventHeader } from './EventHeader';
|
||||
export { default as EventImportanceBadge } from './EventImportanceBadge';
|
||||
export { default as EventPriceDisplay } from './EventPriceDisplay';
|
||||
export { default as EventStats } from './EventStats';
|
||||
export { default as EventTimeline } from './EventTimeline';
|
||||
export { default as ImportanceBadge } from './ImportanceBadge';
|
||||
export { default as ImportanceStamp } from './ImportanceStamp';
|
||||
export { default as KeywordsCarousel } from './KeywordsCarousel';
|
||||
4
src/views/Community/components/EventDetailModal/index.ts
Normal file
4
src/views/Community/components/EventDetailModal/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
// src/views/Community/components/EventDetailModal/index.ts
|
||||
// 事件详情弹窗模块
|
||||
|
||||
export { default } from './EventDetailModal';
|
||||
@@ -27,8 +27,8 @@ import {
|
||||
} from '@chakra-ui/react';
|
||||
import { AlertCircle, Clock, TrendingUp, Info, RefreshCw } from 'lucide-react';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import { logger } from '../../../utils/logger';
|
||||
import { useIndexQuote } from '../../../hooks/useIndexQuote';
|
||||
import { logger } from '@utils/logger';
|
||||
import { useIndexQuote } from '@hooks/useIndexQuote';
|
||||
|
||||
// 定义动画
|
||||
const animations = `
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
// src/views/Community/components/HotEvents.js
|
||||
// src/views/Community/components/HotEvents/HotEvents.js
|
||||
import React, { useState } from 'react';
|
||||
import { Card, Badge, Tag, Empty, Carousel, Tooltip } from 'antd';
|
||||
import { ArrowUpOutlined, ArrowDownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
|
||||
import { useDisclosure, useBreakpointValue } from '@chakra-ui/react';
|
||||
import EventDetailModal from './EventDetailModal';
|
||||
import EventDetailModal from '../EventDetailModal';
|
||||
import dayjs from 'dayjs';
|
||||
import './HotEvents.css';
|
||||
import defaultEventImage from '../../../assets/img/default-event.jpg';
|
||||
import defaultEventImage from '@assets/img/default-event.jpg';
|
||||
|
||||
// 自定义箭头组件
|
||||
const CustomArrow = ({ className, style, onClick, direction }) => {
|
||||
@@ -1,4 +1,4 @@
|
||||
// src/views/Community/components/HotEventsSection.js
|
||||
// src/views/Community/components/HotEvents/HotEventsSection.js
|
||||
// 热点事件区域组件
|
||||
|
||||
import React, { useState } from 'react';
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
useColorModeValue
|
||||
} from '@chakra-ui/react';
|
||||
import HotEvents from './HotEvents';
|
||||
import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme';
|
||||
import { PROFESSIONAL_COLORS } from '@constants/professionalTheme';
|
||||
|
||||
/**
|
||||
* 热点事件区域组件
|
||||
5
src/views/Community/components/HotEvents/index.js
Normal file
5
src/views/Community/components/HotEvents/index.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// src/views/Community/components/HotEvents/index.js
|
||||
// 热点事件模块
|
||||
|
||||
export { default as HotEvents } from './HotEvents';
|
||||
export { default as HotEventsSection } from './HotEventsSection';
|
||||
@@ -1,4 +1,4 @@
|
||||
// src/views/Community/components/CompactSearchBox.js
|
||||
// src/views/Community/components/SearchFilters/CompactSearchBox.js
|
||||
// 紧凑版搜索和筛选组件 - 优化布局
|
||||
|
||||
import React, { useState, useMemo, useEffect, useCallback, useRef } from 'react';
|
||||
5
src/views/Community/components/SearchFilters/index.js
Normal file
5
src/views/Community/components/SearchFilters/index.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// src/views/Community/components/SearchFilters/index.js
|
||||
// 搜索筛选组件模块
|
||||
|
||||
export { default as CompactSearchBox } from './CompactSearchBox';
|
||||
export { default as TradingTimeFilter } from './TradingTimeFilter';
|
||||
Reference in New Issue
Block a user