vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
85fd94b67671c75ce150050c45827e667b7779ca
vf_react/src/views/Community
History

README.md

Community 模块说明

本目录包含社区页面的所有组件，按功能模块进行组织。

目录结构

src/views/Community/
├── index.js                     # 页面入口
├── components/                  # 组件目录
│   ├── SearchFilters/           # 搜索筛选模块
│   │   ├── CompactSearchBox.js
│   │   ├── TradingTimeFilter.js
│   │   └── index.js
│   ├── EventCard/               # 事件卡片模块
│   │   ├── atoms/               # 原子组件
│   │   │   ├── EventDescription.js
│   │   │   ├── EventEngagement.js
│   │   │   ├── EventFollowButton.js
│   │   │   ├── EventHeader.js
│   │   │   ├── EventImportanceBadge.js
│   │   │   ├── EventPriceDisplay.js
│   │   │   ├── EventStats.js
│   │   │   ├── EventTimeline.js
│   │   │   ├── ImportanceBadge.js
│   │   │   ├── ImportanceStamp.js
│   │   │   ├── KeywordsCarousel.js
│   │   │   └── index.js
│   │   ├── CompactEventCard.js
│   │   ├── DetailedEventCard.js
│   │   ├── DynamicNewsEventCard.js
│   │   ├── HorizontalDynamicNewsEventCard.js
│   │   ├── MiniEventCard.js
│   │   └── index.js
│   ├── DynamicNews/             # 动态新闻模块
│   │   ├── hooks/
│   │   │   ├── usePagination.js
│   │   │   └── index.js
│   │   ├── layouts/
│   │   │   ├── MainlineTimelineView.js
│   │   │   ├── VerticalModeLayout.js
│   │   │   └── index.js
│   │   ├── constants.js
│   │   ├── DynamicNewsCard.js
│   │   ├── EventDetailScrollPanel.js
│   │   ├── EventScrollList.js
│   │   ├── ModeToggleButtons.js
│   │   ├── PaginationControl.js
│   │   └── index.js
│   ├── EventDetailModal/        # 事件详情弹窗模块
│   │   ├── EventDetailModal.tsx
│   │   └── index.ts
│   ├── HeroPanel/               # 英雄面板模块（重构版）
│   │   ├── columns/             # 表格列定义
│   │   │   ├── index.js         # 统一导出
│   │   │   ├── renderers.js     # 通用渲染器
│   │   │   ├── stockColumns.js  # 事件关联股票列
│   │   │   ├── sectorColumns.js # 涨停板块列
│   │   │   ├── ztStockColumns.js # 涨停个股列
│   │   │   └── eventColumns.js  # 未来事件列
│   │   ├── components/          # 子组件
│   │   │   ├── DetailModal/     # 详情弹窗子模块
│   │   │   │   ├── EventsTabView.js
│   │   │   │   ├── RelatedEventsModal.js
│   │   │   │   ├── SectorStocksModal.js
│   │   │   │   ├── ZTSectorView.js
│   │   │   │   ├── ZTStockListView.js
│   │   │   │   └── index.js
│   │   │   ├── CalendarCell.js      # 日历单元格
│   │   │   ├── CombinedCalendar.js  # 组合日历视图
│   │   │   ├── InfoModal.js         # 信息弹窗
│   │   │   ├── HotKeywordsCloud.js  # 热门关键词云
│   │   │   ├── ZTStatsCards.js      # 涨停统计卡片
│   │   │   └── index.js
│   │   ├── constants/           # 常量定义
│   │   │   └── index.js
│   │   ├── hooks/               # 自定义 Hooks
│   │   │   ├── useDetailModalState.js
│   │   │   └── index.js
│   │   ├── styles/              # 样式文件
│   │   │   └── animations.css
│   │   ├── utils/               # 工具函数
│   │   │   └── index.js
│   │   └── index.js
│   ├── EventDailyStats.js       # 事件每日统计
│   ├── HeroPanel.js             # 英雄面板（主入口）
│   ├── MarketOverviewBanner.js  # 市场概览横幅
│   └── ThemeCometChart.js       # 主题彗星图
└── hooks/                       # 页面级 Hooks
    ├── useCommunityEvents.js
    ├── useEventData.js
    └── useEventFilters.js

1. SearchFilters 模块（搜索筛选）

路径：components/SearchFilters/

文件 功能
CompactSearchBox.js 紧凑搜索框，集成关键词搜索、概念/行业筛选
TradingTimeFilter.js 交易时间筛选器，被 CompactSearchBox 引用

使用方式：

import { CompactSearchBox } from './components/SearchFilters';

2. EventCard 模块（事件卡片）

路径：components/EventCard/

主卡片组件

文件 功能
CompactEventCard.js 紧凑事件卡片（列表模式）
DetailedEventCard.js 详细事件卡片（展开模式）
DynamicNewsEventCard.js 动态新闻事件卡片
HorizontalDynamicNewsEventCard.js 水平布局新闻卡片
MiniEventCard.js 迷你事件卡片

原子组件（atoms/）

文件 功能
EventHeader.js 事件标题头部
EventDescription.js 事件描述文本
EventStats.js 事件统计数据
EventPriceDisplay.js 股价显示
EventTimeline.js 事件时间线
EventFollowButton.js 关注按钮
EventEngagement.js 事件互动数据
EventImportanceBadge.js 重要性徽章
ImportanceBadge.js 通用重要性徽章
ImportanceStamp.js 重要性印章
KeywordsCarousel.js 关键词轮播

使用方式：

// 使用主卡片组件
import EventCard from './components/EventCard';

// 使用原子组件
import { EventHeader, EventTimeline } from './components/EventCard/atoms';

3. DynamicNews 模块（动态新闻）

路径：components/DynamicNews/

主组件

文件 功能
DynamicNewsCard.js 主列表容器
EventScrollList.js 事件滚动列表
EventDetailScrollPanel.js 事件详情滚动面板
ModeToggleButtons.js 模式切换按钮
PaginationControl.js 分页控制器
constants.js 常量配置

布局组件（layouts/）

文件 功能
VerticalModeLayout.js 垂直布局模式
MainlineTimelineView.js 主线时间线视图

Hooks（hooks/）

文件 功能
usePagination.js 分页逻辑 Hook

使用方式：

import { DynamicNewsCard } from './components/DynamicNews';
import { usePagination } from './components/DynamicNews/hooks';

4. EventDetailModal 模块（事件详情弹窗）

路径：components/EventDetailModal/

文件 功能
EventDetailModal.tsx 事件详情弹窗（TypeScript）

使用方式：

import EventDetailModal from './components/EventDetailModal';

5. HeroPanel 模块（英雄面板）

路径：components/HeroPanel/ + components/HeroPanel.js

主入口

  • HeroPanel.js - 英雄面板主组件（首页指数K线 + 概念词云 + 日历）

子模块结构

目录 功能
columns/ 表格列定义（工厂函数模式）
components/ 子组件集合
constants/ 常量定义（颜色、热度等级等）
hooks/ 自定义 Hooks
styles/ 样式文件（动画 CSS）
utils/ 工具函数（日期、股票代码处理等）

columns/ 表格列定义

文件 功能
stockColumns.js 事件关联股票表格列（现价、涨跌幅、关联理由、研报引用）
sectorColumns.js 涨停板块表格列（排名、板块名称、涨停数、涨停股票、涨停归因）
ztStockColumns.js 涨停个股表格列（股票信息、涨停时间、连板、核心板块、涨停简报）
eventColumns.js 未来事件表格列（时间、重要度、标题、背景、未来推演、相关股票）
renderers.js 通用列渲染器

components/ 子组件

文件 功能
CalendarCell.js 日历单元格（显示涨停数/事件数热度）
CombinedCalendar.js 组合日历视图（FullCalendar 封装）
InfoModal.js 信息弹窗
HotKeywordsCloud.js 热门关键词云（今日热词展示）
ZTStatsCards.js 涨停统计卡片（连板分布、封板时间、公告驱动）
DetailModal/ 详情弹窗子模块

DetailModal/ 详情弹窗

文件 功能
EventsTabView.js 事件标签页视图
RelatedEventsModal.js 相关事件弹窗（涨停归因详情）
SectorStocksModal.js 板块股票弹窗
ZTSectorView.js 涨停板块视图
ZTStockListView.js 涨停股票列表视图

hooks/ 自定义 Hooks

文件 功能
useDetailModalState.js 详情弹窗状态管理（整合 17 个状态）

使用方式：

// 使用主组件
import HeroPanel from './components/HeroPanel';

// 使用列定义工厂函数
import { createStockColumns, createSectorColumns } from './components/HeroPanel/columns';

// 使用子组件
import { HotKeywordsCloud, ZTStatsCards } from './components/HeroPanel/components';

6. 独立组件

路径：components/

文件 功能
MarketOverviewBanner.js 市场概览横幅，展示指数行情
ThemeCometChart.js 主题彗星图，可视化概念热度
EventDailyStats.js 事件每日统计面板

页面级 Hooks

路径：hooks/

文件 功能
useCommunityEvents.js 社区事件数据获取与管理
useEventData.js 事件数据处理
useEventFilters.js 事件筛选逻辑

更新日志

  • 2026-01-13: HeroPanel 模块重构优化

    • 新增 columns/ 表格列定义文件（stockColumns、sectorColumns、ztStockColumns、eventColumns）
    • 新增 HotKeywordsCloud.js 热门关键词云组件
    • 新增 ZTStatsCards.js 涨停统计卡片组件
    • HeroPanel.js 从 2,299 行优化至 1,257 行（减少 45%）
    • 采用工厂函数模式提取列定义，支持 useMemo 缓存

  • 2026-01-13: 目录结构同步更新

    • 移除已删除的 HotEvents/ 模块
    • 新增 HeroPanel/ 模块结构说明
    • 新增独立组件说明（MarketOverviewBanner、ThemeCometChart、EventDailyStats）
    • 删除未引用组件 EventEffectivenessStats.js
    • 完善 EventCard/atoms/ 原子组件列表

  • 2024-12-09: 目录结构重组

    • 创建 SearchFilters/ 模块（含 CSS）
    • 创建 EventCard/atoms/ 原子组件目录
    • 创建 HotEvents/ 模块（含 CSS）
    • 重组 DynamicNews/ 模块（含 layouts/ 和 hooks/）
    • 创建 EventDetailModal/ 模块