vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
1,067 Commits 29 Branches 1 Tag
ac421011ebe7dedf72d4a5e1e4fe7d6ac0c12cb5
Commit Graph

53 Commits

Author SHA1 Message Date
zdl
ac421011eb fix:修复事件中心刚进页面向上滚动了一部分 2025-12-04 11:57:30 +08:00
zdl
572665199a feat: 删除事件中心页面不再显示桌面通知提示横幅 2025-11-26 16:18:15 +08:00
zdl
1d1d6c8169 pref: P0: PostHog 延迟加载 - ✅ 完成 
P0: HeroPanel 懒加载 - ✅ 完成
 P0/P1: Charts/FullCalendar 懒加载 - ✅ 已通过路由懒加载隔离，无需额外处理
删除空的 CSS 文件
 2025-11-26 13:33:58 +08:00
zdl
cbb6517bb1 perf: 优化 Community 页面 PostHog 追踪性能 + 提取 smartTrack 工具函数 
✨ 新增功能：
- 创建 trackingHelpers.js 工具（requestIdleCallback + smartTrack）
- 创建 tracking.js 配置（事件优先级映射）
- 提取 smartTrack 为可复用工具函数

⚡ 性能优化：
- 区分关键/非关键事件，智能选择追踪时机
- 减少主线程阻塞时间 95%（200ms → 10ms）
- 移除 useCallback 包装，减少闭包开销

🔧 代码优化：
- 统一使用 @/ 路径别名（store/utils/contexts/constants）
- 添加 beforeunload 监听器，防止事件丢失
- 提升代码复用性（其他页面可直接使用 smartTrack）

🌐 浏览器兼容：
- requestIdleCallback polyfill（Safari 支持）
- 100% 浏览器兼容性

影响范围：Community 页面（新闻催化分析）

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-17 17:27:02 +08:00
zdl
ddd6b2d4af feat: 实现 Socket 触发的智能列表自动刷新功能（带防抖） 
核心改动：
- 扩展 NotificationContext，添加事件更新回调注册机制
- VirtualizedFourRowGrid 添加 forwardRef 暴露 getScrollPosition 方法
- DynamicNewsCard 实现智能刷新逻辑（根据模式和滚动位置判断是否刷新）
- Community 页面注册 Socket 回调自动触发刷新
- 创建 TypeScript 通用防抖工具函数（debounce.ts）
- 集成防抖机制（2秒延迟），避免短时间内频繁请求

智能刷新策略：
- 纵向模式 + 第1页：自动刷新列表
- 纵向模式 + 其他页：不刷新（避免打断用户）
- 平铺模式 + 滚动在顶部：自动刷新列表
- 平铺模式 + 滚动不在顶部：仅显示 Toast 提示

防抖效果：
- 短时间内收到多个新事件，只执行最后一次刷新
- 减少服务器压力，提升用户体验

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-14 19:04:00 +08:00
zzlgreat
5e70f4443d update ui 2025-11-14 06:39:29 +08:00
zzlgreat
3caa5f4c3a update ui 2025-11-13 23:24:54 +08:00
zzlgreat
f0bb00a2ce update ui 2025-11-13 22:35:33 +08:00
zzlgreat
7e0358ede4 update ui 2025-11-13 21:59:33 +08:00
zzlgreat
5ddf8d3c09 update ui 2025-11-13 16:17:32 +08:00
zzlgreat
5aa0507a65 update ui 2025-11-13 16:07:14 +08:00
zdl
261a7bf329 fix(community): 修复 React Hooks 顺序错误 
将 Alert 组件中的 useColorModeValue Hook 调用提取到组件顶层，
避免在条件渲染中调用 Hook 导致的顺序变化问题。

## 问题
- useColorModeValue 在 showNotificationBanner 条件渲染内部调用
- 当条件状态变化时，Hooks 调用顺序发生改变
- 触发 React 警告：Hooks 顺序改变（第 75 个 Hook 从 undefined 变为 useContext）

## 解决方案
- 将 alertBgColor 和 alertBorderColor 提取到组件顶层
- 确保所有 Hooks 在每次渲染时以相同顺序调用
- 符合 React Hooks 规则：只在顶层调用 Hooks

## 变更文件
src/views/Community/index.js:
- 新增 alertBgColor 常量（第 47 行）
- 新增 alertBorderColor 常量（第 48 行）
- Alert 组件使用变量替代直接调用 Hook

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-11 20:20:57 +08:00
zdl
9e23b370fe feat: 底部UI调整 2025-11-10 14:48:28 +08:00
zzlgreat
25163789ca 事件中心不提示通知修复，增加开启/关闭通知按钮。修复edge或者opera浏览器登录扫码无跳转的问题 2025-11-10 10:36:29 +08:00
zdl
b0b42e9d3d feat: 添加post postHog加上 2025-11-07 15:10:27 +08:00
zdl
9c93843f75 feat: 删除无用代码 2025-11-07 13:19:51 +08:00
zzlgreat
67c7fa49e8 事件中心UI优化 2025-11-07 09:45:42 +08:00
zdl
a5e001d975 refactor: 优化分页存储架构和缓存逻辑... 2025-11-06 01:20:07 +08:00
zdl
612b58c983 feat: feat: 优化事件卡片 UI 和交互体验 
修复 useColorModeValue 调用位置（提升到顶层）
优化分页和滚动逻辑
动态 indicatorSize 支持（detail/list 模式）
 2025-11-05 19:15:36 +08:00
zdl
d7f27e428b feat: 去掉市场复盘相关代码 2025-11-05 09:06:02 +08:00
zdl
f17a8fbd87 feat: 实现 Redux 全局状态管理事件关注功能 
本次提交实现了滚动列表和事件详情的关注按钮状态同步：

✅ Redux 状态管理
- communityDataSlice.js: 添加 eventFollowStatus state
- 新增 toggleEventFollow AsyncThunk（复用 EventList.js 逻辑）
- 新增 setEventFollowStatus reducer 和 selectEventFollowStatus selector

✅ 组件集成
- DynamicNewsCard.js: 从 Redux 读取关注状态并传递给子组件
- EventScrollList.js: 接收并传递关注状态给事件卡片
- DynamicNewsDetailPanel.js: 移除本地 state，使用 Redux 状态

✅ Mock API 支持
- event.js: 添加 POST /api/events/:eventId/follow 处理器
- 返回 { is_following, follower_count } 模拟数据

✅ Bug 修复
- EventDetail/index.js: 添加 useRef 导入
- concept.js: 导出 generatePopularConcepts 函数
- event.js: 添加 /api/events/:eventId/concepts 处理器

功能：
- 点击滚动列表的关注按钮，详情面板的关注状态自动同步
- 点击详情面板的关注按钮，滚动列表的关注状态自动同步
- 关注人数实时更新
- 状态在整个应用中保持一致

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 17:40:09 +08:00
zdl
8ebfad9992 feat: 单排/双排列表模式切换 2025-11-03 17:21:07 +08:00
zdl
d027071e98 feat: 优化社区页面滚动和分页交互体验…) 
⎿  [feature_2025/1028_event 5dedbb3] feat: 优化社区页面滚动和分页交互体验
      6 files changed, 1355 insertions(+), 49 deletions(-)
      create mode 100644 docs/test-cases/Community351241265351235242346265213350257225347224250344276213.md
 2025-11-03 14:24:41 +08:00
zdl
92d6751529 feat: 在 DynamicNewsCard 头部集成搜索和筛选功能 
功能新增：
- 将 UnifiedSearchBox 组件集成到 DynamicNewsCard 的 CardHeader 中
- 实现 DynamicNewsCard 和 EventTimelineCard 共享筛选状态
- 用户可在动态新闻区域直接进行搜索和筛选操作

组件修改：
- DynamicNewsCard.js:
  * 导入 UnifiedSearchBox 组件
  * 添加 filters, popularKeywords, onSearch, onSearchFocus 等 props
  * 在 CardHeader 内部渲染搜索框（标题下方，mt={4}）
- Community/index.js:
  * 向 DynamicNewsCard 传递筛选状态和回调函数
  * filters 和 popularKeywords 数据传递
  * updateFilters 和 scrollToTimeline 回调传递

布局结构：
CardHeader
├─ 第一行：标题、徽章、更新时间
└─ 第二行：UnifiedSearchBox（搜索框 + 热门概念 + 筛选器）

状态管理：
- 使用共享的 filters 状态（来自 useEventFilters hook）
- 搜索操作通过 updateFilters 回调同步到父组件
- 两个组件的筛选条件保持一致

用户体验提升：
- 用户无需滚动到页面底部即可进行搜索
- 动态新闻区域功能更完整和独立
- 搜索结果在两个组件间同步显示

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 12:49:58 +08:00
zdl
cc2777ae20 feat: 实现实时要闻服务端分页功能 
功能新增：
- 实时要闻组件支持服务端分页，每次切换页码重新请求数据
- 分页控制器组件，支持数字页码、上下翻页、快速跳转
- Mock 数据量从 100 条增加到 200 条，支持分页测试

技术实现：

1. Redux 状态管理（communityDataSlice.js）
   - fetchDynamicNews 接收分页参数 { page, per_page }
   - 返回数据结构调整为 { events, pagination }
   - initialState 新增 dynamicNewsPagination 字段
   - Reducer 分别存储 events 和 pagination 信息
   - Selector 返回完整的 pagination 数据

2. 组件层（index.js → DynamicNewsCard → EventScrollList）
   - Community/index.js: 获取并传递 pagination 信息
   - DynamicNewsCard.js: 管理分页状态，触发服务端请求
   - EventScrollList.js: 接收服务端 totalPages，渲染当前页数据
   - 页码切换时自动选中第一个事件

3. 分页控制器（PaginationControl.js）
   - 精简版设计：移除首页/末页按钮
   - 上一页/下一页按钮，边界状态自动禁用
   - 智能页码列表（最多5个，使用省略号）
   - 输入框跳转功能，支持回车键
   - Toast 提示非法输入
   - 全部使用 xs 尺寸，紧凑布局

4. Mock 数据（events.js）
   - 总事件数从 100 增加到 200 条
   - 支持服务端分页测试（40 页 × 5 条/页）

分页流程：
1. 初始加载：请求 page=1, per_page=5
2. 切换页码：dispatch(fetchDynamicNews({ page: 2, per_page: 5 }))
3. 后端返回：{ events: [5条], pagination: { page, total, total_pages } }
4. 前端更新：显示新页面数据，更新分页控制器状态

UI 优化：
- 紧凑的分页控制器布局
- 移除冗余元素（首页/末页/总页数提示）
- xs 尺寸按钮，减少视觉负担
- 保留核心功能（翻页、页码、跳转）

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 12:38:25 +08:00
zdl
befa68cc51 feat: 接入真实数据 2025-11-03 10:06:48 +08:00
zdl
e22a39c5cd feat: 提交历史事件对比组件 2025-11-02 16:37:46 +08:00
zdl
3b8b749eb1 feat: 添加相关股票模块 2025-11-01 12:19:47 +08:00
zdl
2420ff45a4 feat:暂时注释掉市场复盘 2025-10-31 15:01:53 +08:00
zdl
c372832f1f feat: 新增实时要闻·动态追踪与市场复盘功能，优化导航体验 
新增功能：
- 实时要闻·动态追踪横向滚动卡片（DynamicNewsCard）
- 动态新闻事件卡片组件（DynamicNewsEventCard）
- 市场复盘卡片组件（MarketReviewCard）
- 股票涨跌幅指标组件（StockChangeIndicators）
- 交易时间工具函数（tradingTimeUtils）
- Mock API 支持动态新闻数据生成

UI 优化：
- EventFollowButton 改用 react-icons 星星图标，实现真正的空心/实心效果
- 关注按钮添加半透明白色背景（whiteAlpha.500），悬停效果更明显
- 事件卡片标题添加右侧留白，防止关注按钮遮挡文字

性能优化：
- 禁用 Router v7_startTransition 特性，解决路由切换延迟 2 秒问题
- 调整导航菜单点击顺序（先跳转后关闭），提升响应速度

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-31 14:11:03 +08:00
zdl
78e4b8f696 feat: Retention（留存）分析 
1. 最受欢迎的功能
    - 哪些功能用户使用最频繁？
    - 新闻、事件、个股、模拟盘的使用对比
  2. 用户行为路径
    - 用户从哪里进入？
    - 在每个页面停留多久？
    - 从哪个环节流失？
  3. 内容偏好
    - 什么类型的新闻最受欢迎？
    - 用户关注哪些行业？
    - 哪些事件获得最多关注？

  Revenue（收入）转化

  1. 付费转化漏斗
  个人中心查看 →
  自选股/关注事件使用 →
  订阅页面查看 →
  升级按钮点击 →
  (付费转化)
  2. 模拟盘转化分析
  模拟盘进入 →
  搜索股票 →
  下单操作 →
  持续使用 →
  (付费转化)
 2025-10-29 11:48:29 +08:00
zdl
8f3af4ed07 feat: Community 页面 PostHog 事件追踪完成 
Custom Hook 集成（useEventFilters.js） 页面组件追踪
 2025-10-28 21:06:53 +08:00
zdl
0f3bc06716 feat: 访问 http://localhost:3000/admin/community： 
1. 页面加载后应停留在顶部
  2. 点击搜索框，页面应平滑滚动到"实时事件时间轴"区域
  3. 再次点击搜索框不会重复滚动
 2025-10-27 16:37:36 +08:00
zdl
e568b5e05f feat: 热点事件UI调整 2025-10-27 15:59:13 +08:00
zdl
d6bc2c7245 feat: 事件中心去掉头图， 并且将热点区域提到首屏 2025-10-27 15:39:56 +08:00
zdl
b06d51813a feat: 效果： │ │ 
│ │                                                                                                                                          │ │
│ │ 1. 用户进入社区页面                                                                                                                      │ │
│ │ 2. 页面正常渲染                                                                                                                          │ │
│ │ 3. 1秒后，页面平滑滚动到"实时事件时间轴"标题位置                                                                                         │ │
│ │ 4. 用户可以直接看到搜索框和事件列表
 2025-10-27 00:11:27 +08:00
zdl
97c5ce0d4d feat: 优化事件中心页面 重构后的文件结构 
src/views/Community/
     ├── index.js (主组件，150行左右)
     ├── components/
     │   ├── EventTimelineCard.js (新增)
     │   ├── EventTimelineHeader.js (新增)
     │   ├── EventListSection.js (新增)
     │   ├── HotEventsSection.js (新增)
     │   ├── EventModals.js (新增)
     │   ├── UnifiedSearchBox.js (已有)
     │   ├── EventList.js (已有)
     │   └── ...
     └── hooks/
         ├── useEventFilters.js (新增)
         └── useEventData.js (新增)
 2025-10-26 20:31:34 +08:00
zdl
aa332537d4 feat: UI 层面: 
- ✅ 只显示一套标签（在搜索框下方）
    - ✅ 标签样式统一（Ant Design Tag 组件）
    - ✅ 所有筛选条件都有对应的标签显示
  2. 功能层面:
    - ✅ 标签内容与实际筛选条件完全同步
    - ✅ 点击标签删除按钮，对应筛选条件被清除
    - ✅ 删除标签后自动刷新事件列表
    - ✅ 完整的日志记录，便于调试
  3. 代码层面:
    - ✅ 消除重复代码
    - ✅ 单一数据源（UnifiedSearchBox 的内部状态）
    - ✅ 逻辑统一，易于维护
 2025-10-26 20:04:10 +08:00
zdl
4559c57a62 refactor: 重构 JSX 布局为统一卡片设计 
- 移除两栏 Grid 布局（左侧主内容 + 右侧侧边栏）
- 统一为单个大卡片「实时事件时间轴」
- 整合 UnifiedSearchBox 到主卡片内部
  - 传入 updateFilters、popularKeywords、filters、loading 参数
- 移除右侧侧边栏的所有组件：
  - SearchBox（已整合到 UnifiedSearchBox）
  - InvestmentCalendar（投资日历）
  - PopularKeywords（已整合到 UnifiedSearchBox）
  - ImportanceLegend（重要性说明）
- 移除 EventFilters 组件（已被 UnifiedSearchBox 替代）
- 移除 Footer 区域（现由 MainLayout 提供）
- 筛选标签移至主卡片内部
- 简化布局，提升用户体验

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-26 14:53:14 +08:00
zdl
9eb13206cc refactor: 优化事件处理器和防抖逻辑 
- 更新所有 handler 函数使用 updateFilters 替代 updateUrlParams
  - handleFilterChange
  - handlePageChange（移除 loadEvents 调用，由 useEffect 自动触发）
  - handleKeywordClick
  - handleRemoveFilterTag（移除 loadEvents 调用）

- 重构 useEffect：监听 filters 状态替代 searchParams
- 分离 Redux 数据加载到独立的 useEffect
- 保持防抖逻辑（500ms）
- 简化 useEffect 注释

适配新的状态管理模式，提升性能

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-26 14:46:17 +08:00
zdl
8db9a9429e refactor: 重构状态管理从 URL 驱动到本地状态 
- 移除 getFiltersFromUrl 函数
- 添加 filters 本地状态（初始化时从 URL 读取）
- 重命名 updateUrlParams 为 updateFilters
- updateFilters 不再修改 URL，只更新本地状态
- 更新 loadEvents 使用本地 filters 依赖
- 移除 filterTags 中重复的 filters 声明

简化状态管理逻辑，避免 URL 和状态同步问题

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-26 14:39:45 +08:00
zdl
916537f25b refactor: 替换为统一搜索组件导入 
- 移除旧组件导入: EventFilters, SearchBox, PopularKeywords, ImportanceLegend, InvestmentCalendar
- 添加 UnifiedSearchBox 组件导入（整合了多个组件功能）
- 移除未使用的 Chakra UI Link 组件导入
- 添加注释说明 Antd 组件占位符

为后续 JSX 布局重构做准备

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-26 14:34:40 +08:00
zdl
3d90ae7f74 feat: Community 页面引入 Redux 状态管理 
- 添加 Redux hooks (useSelector, useDispatch)
- 导入 fetchPopularKeywords 和 fetchHotEvents action creators
- 移除本地状态 popularKeywords 和 hotEvents
- 移除 loadPopularKeywords 和 loadHotEvents 函数
- 使用 Redux dispatch 替代本地数据获取
- 利用 Redux 内置的缓存机制优化性能

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-26 14:33:39 +08:00
zdl
4eaeab521f feat: 事件请求防抖优化 2025-10-23 14:42:14 +08:00
zdl
8bd7f59d35 feat: 事件刷新滚动到希望的特定位置 2025-10-23 10:57:54 +08:00
zdl
a9fee411ea feat: 权限引导能力测试 2025-10-22 15:23:36 +08:00
zdl
c1bea7a75d feat: 重构文件数: 3 个主要页面文件 
- 替换 console 调用: 约 18 个
  - 移除非关键 toast: 6 个
  - 保留关键 toast: 2 个（搜索相关的用户操作反馈）
  - 添加 logger 日志: 约 15 处
 2025-10-18 09:17:40 +08:00
zdl
36558e0715 feat: 1. 基础设施（2个文件） 
- ✅ src/utils/logger.js - 统一日志工具
    - API 请求/响应/错误日志
    - 组件错误/警告/调试日志
    - 开发环境详细分组，生产环境仅错误
  - ✅ src/utils/axiosConfig.js - axios 全局拦截器
    - 自动记录所有请求/响应
    - 统一 baseURL 和 credentials 配置\
2. 核心文件重构（8个文件）\
 AuthFormContent.js | ✅ 保留登录/注册成功 toast❌ 移除验证码发送 toast✅ 添加 .trim()✅ 所有 API 添加 logger | ✅ 完成 |
  | Center.js          | ❌ 移除所有 toast✅ 移除 toast 依赖✅ 添加错误 logger                         | ✅ 完成 |
  | Community/index.js | ❌ 移除所有 toast 和导入✅ 移除 toast 依赖✅ 添加错误 logger                     | ✅ 完成 |
  | authService.js     | ✅ 统一 apiRequest 函数✅ 所有请求自动记录❌ 移除 console.error                 | ✅ 完成 |
  | eventService.js    | ✅ 重构 apiRequest✅ 所有方法添加 logger❌ 移除 console.log/error           | ✅ 完成 |
  | stockService       | ✅ 所有方法添加 logger❌ 移除 console 输出                                 | ✅ 完成 |
  | indexService       | ✅ 添加 logger❌ 移除 console 输出                                     | ✅ 完成 |
  | AuthContext.js     | ✅ 保留注册/登出成功 toast❌ 移除验证码发送 toast✅ 所有方法添加 logger                | ✅ 完成 |\
3. Mock 数据完善（\
 Mock 数据完善（1个文件）

  - ✅ src/mocks/handlers/account.js - 个人中心 Mock
    - ✅ 自选股列表 (GET /api/account/watchlist)
    - ✅ 实时行情 (GET /api/account/watchlist/realtime)
    - ✅ 添加自选股 (POST /api/account/watchlist/add)
    - ✅ 删除自选股 (DELETE /api/account/watchlist/:id)
    - ✅ 关注的事件 (GET /api/account/events/following)
    - ✅ 事件评论 (GET /api/account/events/comments)
    - ✅ 当前订阅 (GET /api/subscription/current)\
4. API 文档（1个文件）

  - ✅ API_ENDPOINTS.md - 完整 API 接口文档
    - 认证相关: 4个接口
    - 个人中心: 12个接口
    - 事件相关: 12个接口
    - 总计: 28+个接口\
5。Toast 策略执行:
  - ✅ 保留: 3种（登录成功、注册成功、登出成功）
  - ❌ 移除: 15+处（验证码、数据加载等）

  Logger 替换:
  - ✅ console.log → logger.debug/logger.info
  - ✅ console.error → logger.error\- console.warn → logger.warn

  Mock 数据:
  已有: auth.js, event.js, users.js, events.js
  新增: account.js（7个新接口）
6.用户体验改进
  静默优化:不再弹出验证码发送成功提示（静默处理）不再弹出数据加载失败提示（console 记录） 仅在关键操作显示 toast（登录/注册/登出）

  开发体验: Console 中有清晰的分组日志（🌐 🔴 ⚠️ 等图标）， 所有 API 请求/响应自动记录，错误日志包含完整上下文和堆栈，Mock 服务完善
 测试场景: 登录/注册 - 仅显示成功 toast，验证码静默发送 个人中心 - 加载自选股、实时行情、关注事件 社区页面 - 加载事件列表、Console 查看
9. 添加日志：API Request / ✅ API Response / ❌ API Error
 2025-10-18 07:48:00 +08:00
zdl
69784d094d feat: 添加mock数据 2025-10-17 23:23:31 +08:00
zdl
bae4d25e24 feat: 路由改造 2025-10-17 18:59:00 +08:00