vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
584 Commits 29 Branches 1 Tag
2753fbc37f5f4b8326e21349b5da3913292d98b3
Commit Graph

20 Commits

Author SHA1 Message Date
zdl
319a78d34c fix: 修复分页、筛选和模式切换相关问题 
主要修复：
1. 修复模式切换时 per_page 参数错误
   - 在 useEffect 内直接根据 mode 计算 per_page
   - 避免使用可能过时的 pageSize prop

2. 修复 DISPLAY_MODES 未定义错误
   - 在 DynamicNewsCard.js 中导入 DISPLAY_MODES 常量

3. 添加空状态显示
   - VerticalModeLayout 添加无数据时的友好提示
   - 显示图标和提示文字，引导用户调整筛选条件

4. 修复无限请求循环问题
   - 移除模式切换 useEffect 中的 filters 依赖
   - 避免筛选和模式切换 useEffect 互相触发

5. 修复筛选参数传递问题
   - usePagination 使用 useRef 存储最新 filters
   - 避免 useCallback 闭包捕获旧值
   - 修复时间筛选参数丢失问题

6. 修复分页竞态条件
   - 允许用户在加载时切换到不同页面
   - 只阻止相同页面的重复请求

涉及文件：
- src/views/Community/components/DynamicNewsCard.js
- src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
- src/views/Community/components/DynamicNewsCard/hooks/usePagination.js
- src/views/Community/hooks/useEventFilters.js
- src/store/slices/communityDataSlice.js
- src/views/Community/components/UnifiedSearchBox.js

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 17:39:03 +08:00
zdl
31e5a4ee48 feat: 添加 RTK Query 集成用于事件数据获取（实验性）... 2025-11-06 01:25:44 +08:00
zdl
a5e001d975 refactor: 优化分页存储架构和缓存逻辑... 2025-11-06 01:20:07 +08:00
zdl
6930878ff6 refactor: 删除未使用的 lastUpdated 和 cachedCount 状态 
- 删除 initialState 中的 lastUpdated 和 cachedCount
  - 删除所有 reducer 中相关的设置代码
  - 更新 selectors 使用 .length 替代 cachedCount
  - 删除 shouldRefresh 工具函数

  简化理由：
  - lastUpdated 未被使用
  - cachedCount 可以通过 events.length 直接获取
 2025-11-05 22:33:25 +08:00
zdl
27b68e928e feat: bugfix 2025-11-05 19:06:18 +08:00
zdl
2355004dfb fix: refactor: 简化 Redux 数据管理逻辑并修复 bug 
修复 clearCache/clearSpecificCache 引用不存在的 state.dynamicNews bug
简化数据插入逻辑，移除复杂的 Append/Replace/Jump 模式（虚拟滚动接管）
添加空数据边界处理和 toast 提示
添加 mode 参数支持（vertical/four-row）
修复默认值解构避免 undefined 错误
修复 Redux slice 未使用参数的 TS 警告 仅 preloadData 和 toggleEventFollow.rejected 的参数修改 将未使用的 state 参数改为 _state 前缀，消除 TS6133 警告
 2025-11-05 19:00:53 +08:00
zdl
188783a8d2 feat: 实现动态新闻筛选功能并优化虚拟滚动 
## 主要改进

### 1. 修复筛选功能
- **问题**: 筛选触发了 API 请求但列表未更新
- **根因**: fetchDynamicNews 硬编码 sort: 'new'，未支持筛选参数
- **解决**:
  - Redux action 添加筛选参数支持 (sort, importance, q, date_range, industry_code)
  - DynamicNewsCard 监听 filters 变化并重新请求数据
  - 筛选时清空缓存并从第1页开始加载

### 2. 虚拟滚动优化
- 改造 VirtualizedFourRowGrid 支持多列布局
  - 添加 columnsPerRow prop (默认4列，传1实现单列)
  - 添加 CardComponent prop (支持不同卡片组件)
  - 单列模式使用更小的 gap 间距
- 纵向模式使用虚拟滚动 + 无限滚动
  - 左侧事件列表使用 VirtualizedFourRowGrid (columnsPerRow=1)
  - 使用 HorizontalDynamicNewsEventCard 横向卡片
  - 支持滚动到底部自动加载

### 3. UI 交互优化
- 默认模式改为纵向模式 (左侧列表 + 右侧详情)
- 四排/纵向模式不显示全局 loading 遮罩
- 四排模式弹窗在关闭时不渲染 (性能优化)
- 注释掉单排/双排按钮，只保留纵向和平铺模式

## 技术细节

**数据流**:
```
用户筛选 → updateFilters → filters state 更新
→ DynamicNewsCard useEffect 监听
→ dispatch(fetchDynamicNews({ ...filters, clearCache: true }))
→ API 请求（带筛选参数）
→ Redux state 更新 → 列表重新渲染
```

**虚拟滚动**:
- @tanstack/react-virtual 动态高度测量
- 80% 滚动深度触发无限加载
- 底部 loading 指示器（绝对定位）

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 09:09:03 +08:00
zdl
ce46820105 feat: 优化社区动态新闻分页和预加载策略 
## 主要改动

### 1. 修复分页显示问题
- 修复总页数计算错误（使用服务端 total 而非缓存 cachedCount）
- 修复目标页数据检查逻辑（排除 null 占位符）

### 2. 实现请求拆分策略 (Critical Fix)
- 将合并请求（per_page: 15）拆分为单页循环请求（per_page: 5）
- 解决后端无法处理动态 per_page 导致返回空数据的问题
- 后台预加载和显示 loading 两个场景均已拆分

### 3. 优化智能预加载逻辑
- 连续翻页（上/下页）：预加载前后各 2 页
- 跳转翻页（点页码）：只加载当前页
- 目标页已缓存时立即切换，后台静默预加载其他页

### 4. Redux 状态管理优化
- 添加 pageSize 参数用于正确计算索引
- 重写 reducer 插入逻辑（append/replace/jump 三种模式）
- 只在 append 模式去重，避免替换和跳页时数据丢失
- 修复 selector 计算有效数量（排除 null）

### 5. 修复 React Hook 规则违规
- 将所有 useColorModeValue 移至组件顶层
- 添加缺失的 HStack 导入

## 影响范围
- 仅影响社区页面动态新闻分页功能
- 无后端变更，向后兼容

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-04 11:43:54 +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
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
39a2ccd53b refactor(stockSlice): 移除 LocalStorage 缓存层，简化为两级缓存架构 2025-11-03 11:58:39 +08:00
zdl
befa68cc51 feat: 接入真实数据 2025-11-03 10:06:48 +08:00
zdl
e5205ce097 refactor(subscription): Phase 2 - 迁移到 Redux 状态管理 
重构目标: 使用 Redux 管理订阅数据,替代本地状态

Phase 2 完成:
✅ 创建 subscriptionSlice.js (143行)
  - Redux Toolkit createSlice + createAsyncThunk
  - 管理订阅信息、loading、error、Modal 状态
  - fetchSubscriptionInfo 异步 thunk
  - resetToFree reducer (登出时调用)

✅ 注册到 Redux Store
  - 添加 subscriptionReducer 到 store

✅ 重构 useSubscription Hook (182行)
  - 从本地状态迁移到 Redux (useSelector + useDispatch)
  - 保留所有权限检查逻辑
  - 新增: isSubscriptionModalOpen, open/closeSubscriptionModal
  - 自动加载订阅数据 (登录时)

✅ 重构 HomeNavbar 使用 Redux
  - 替换 useSubscriptionData → useSubscription
  - 删除 ./hooks/useSubscriptionData.js

架构优势:
✅ 全局状态共享 - 多组件可访问订阅数据
✅ Redux DevTools 可调试
✅ 异步逻辑统一管理 (createAsyncThunk)
✅ 与现有架构一致 (authModalSlice 等)

性能优化:
✅ Redux 状态优化,减少不必要渲染
✅ useSelector 精确订阅,只在相关数据变化时更新

累计优化:
- 原始: 1623行
- Phase 1后: 1573行 (↓ 50行)
- Phase 2后: 1533行 (↓ 90行, -5.5%)
- 新增 Redux 逻辑: subscriptionSlice (143行) + Hook (182行)

下一步: Phase 3+ 继续拆分组件

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-30 16:50:10 +08:00
zdl
d5881462d2 feat: 将 AuthModalProvider 迁移到 Redux 
## 主要改动

### 新增
- 创建 `store/slices/authModalSlice.js` - Redux Slice 管理认证弹窗状态
- 创建 `hooks/useAuthModal.js` - 自定义 Hook，组合 Redux 状态和业务逻辑

### 修改
- 更新 `store/index.js` - 添加 authModal reducer
- 更新 `App.js` - 移除 AuthModalProvider 包裹层
- 更新 5 个组件的 import 路径：
  - AuthFormContent.js
  - AuthModalManager.js
  - WechatRegister.js
  - HomeNavbar.js
  - ProtectedRoute.js

### 删除
- 删除 `contexts/AuthModalContext.js` - 旧的 Context 实现

## 迁移效果

- ✅ 减少 Provider 嵌套层级（4层 → 3层）
- ✅ 统一状态管理架构（Redux）
- ✅ 更好的调试体验（Redux DevTools）
- ✅ 保持 API 兼容性（无破坏性修改）

## 技术细节

- 使用 `useRef` 存储 `onSuccessCallback`（函数不可序列化）
- 保持与 AuthContext 的依赖关系（AuthProvider 暂未迁移）
- 所有业务逻辑保持不变，仅改变状态管理方式

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-30 13:22:45 +08:00
zdl
3472d267af feat: 提交 Redux Slice 2025-10-30 13:03:31 +08:00
zdl
c77061f36d feat: 将 IndustryProvider (176行) 完整迁移到 Redux 2025-10-30 12:54:32 +08:00
zdl
fb76e442f7 feat: 从 React Context 迁移到 Redux，实现了： 
1. ✅ 集中式状态管理 - PostHog 状态与应用状态统一管理
  2. ✅ 自动追踪机制 - Middleware 自动拦截 Redux actions 进行追踪
  3. ✅ Redux DevTools 支持 - 可视化调试所有 PostHog 事件
  4. ✅ 离线事件缓存 - 网络恢复时自动刷新缓存事件
  5. ✅ 性能优化 Hooks - 提供轻量级 Hook 避免不必要的重渲染
 2025-10-28 20:51:10 +08:00
zdl
31a7500388 feat: 热点事件UI调整成轮播图 2025-10-27 17:22:03 +08:00
zdl
a96f778779 feat: 主要优化点： 
1. 消除 extraReducers 重复代码
       - 创建通用的 createDataReducers 工厂函数
       - 自动生成 pending/fulfilled/rejected cases
       - 减少约 30 行重复代码
     2. 创建独立的 CacheManager 类
       - 封装所有缓存操作（get/set/clear/isExpired）
       - 支持多种存储方式（localStorage/sessionStorage）
       - 更易于单元测试和 mock
     3. 添加请求去重机制
       - 使用 Promise 缓存防止重复请求
       - 同一时间多次调用只发起一次 API 请求
       - 提高性能，减少服务器负担
     4. 优化 Selectors（使用 reselect）
       - 添加 memoized selectors
       - 避免不必要的组件重新渲染
       - 提升性能
     5. 添加缓存预热功能
       - 应用启动时自动加载常用数据
       - 改善用户体验
 2025-10-25 18:32:29 +08:00
zdl
094793c022 feat: 热门关键词UI调整 数据获取逻辑调整 接入redux 2025-10-25 18:22:41 +08:00