vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
259 Commits 32 Branches 1 Tag
e6315bf92578245dbf8a93637ba28d4da9f721c6
Commit Graph

21 Commits

Author SHA1 Message Date
zdl
e6315bf925 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
d0acc03848 feat: 提取全局错误处理为自定义 Hook 
- 创建 useGlobalErrorHandler Hook (61行)
- 封装 Promise rejection 和全局错误的捕获逻辑
- 统一使用 logger 记录错误信息

优势:
- 错误处理逻辑可复用
- App.js 减少 30+ 行代码
- 便于单独测试和维护

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-30 14:56:30 +08:00
zdl
ff573e4eef 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
60a3a0a063 feat: P1通用功能：4个Hook创建完成（待集成）现在您可以追踪： 
1. 完整的用户旅程
    - 从进入网站 → 浏览内容 → 使用功能 → 遇到付费墙 → 付费转化
  2. 核心业务指标
    - DAU/MAU（活跃用户）
    - 功能使用率（哪些功能最受欢迎）
    - 搜索热度（用户需求洞察）
    - Revenue转化漏斗（付费转化分析）
    - 用户参与度（Profile更新、设置变更）
  3. 产品优化方向
    - 哪些功能需要优化？
    - 用户在哪个环节流失？
    - 哪些内容最受欢迎？
    - 如何提高付费转化率？
 2025-10-29 12:01:26 +08:00
zdl
a59376bbe9 feat: 创建了 4个核心埋点Hook 
- ✅ 覆盖了 45+个追踪事件
  - ✅ 补充了 4个核心功能模块的完整埋点
  - ✅ 提供了 详细的集成指南和示例代码
  - ✅ 提升了 Retention指标覆盖率至90%
  - ✅ 建立了 Revenue转化追踪基础
 2025-10-29 11:40:32 +08:00
zdl
67f415f2d9 feat: 首页登陆事件追踪 2025-10-28 21:45:06 +08:00
zdl
3ba8944b96 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
5344b3cdc8 feat: PostHog 集成\ 
1. ✅ 安装依赖: posthog-js@^1.280.1
  2. ✅ 创建核心文件:
    - src/lib/posthog.js - PostHog SDK 封装（271 行）
    - src/lib/constants.js - 事件常量定义（AARRR 框架）
    - src/hooks/usePostHog.js - PostHog React Hook
    - src/hooks/usePageTracking.js - 页面追踪 Hook
    - src/components/PostHogProvider.js - Provider 组件
  3. ✅ 集成到应用:
    - 修改 src/App.js，在最外层添加 <PostHogProvider>
    - 自动追踪所有页面浏览
  4. ✅ 配置环境变量:
    - 在 .env 添加 PostHog 配置项
    - REACT_APP_POSTHOG_KEY 留空，需要用户填写
  5. ✅ 创建文档: POSTHOG_INTEGRATION.md 包含完整的使用说明
 2025-10-28 20:09:21 +08:00
zdl
a2d54825ba Merge branch 'feature' of https://git.valuefrontier.cn/vf/vf_react into feature 2025-10-27 17:52:39 +08:00
zzlgreat
3e64f40ce3 update ip address to company's 2025-10-27 15:47:04 +08:00
zdl
af012ae8d0 feat:. mockSocketService 添加 connecting 状态 
- 新增 connecting 标志防止重复连接
  - 在 connect() 方法中检查 connected 和 connecting 状态
  - 连接成功或失败后清除 connecting 标志\
2. NotificationContext 调整监听器注册顺序

  - 在 useEffect 中重新排序初始化步骤
  - 第一步：注册所有事件监听器（connect, disconnect, new_event 等）
  - 第二步：获取最大重连次数
  - 第三步：调用 socket.connect()
  - 使用空依赖数组 [] 防止 React 严格模式重复执行\
3. logger 添加日志限流

  - 实现 shouldLog() 函数，1秒内相同日志只输出一次
  - 使用 Map 缓存最近日志，带最大缓存限制（100条）
  - 应用到所有 logger 方法：info, warn, debug, api.request, api.response
  - 错误日志（error, api.error）不做限流，始终输出\
修复 emit 时机确保事件被接收

  - 在 mockSocketService 的 connect() 方法中
  - 使用 setTimeout(0) 延迟 emit(connect) 调用
  - 确保监听器注册完毕后再触发事件\
 2025-10-27 13:13:56 +08:00
zdl
cf71ee111b feat: 优化依赖 2025-10-24 17:10:11 +08:00
zzlgreat
290113d577 调整socket对应的浏览器通知处理逻辑 2025-10-24 14:29:45 +08:00
zzlgreat
7e3f3f66df 调整socket对应的浏览器通知处理逻辑 2025-10-24 14:22:30 +08:00
zzlgreat
d9019c3a91 update /api/events/<int:event_id>/stocks resp format 2025-10-23 10:09:24 +08:00
zzlgreat
990d60166e update /api/events/<int:event_id>/stocks resp format 2025-10-23 08:18:13 +08:00
zdl
34ca3afb82 feat: 权限引导能力测试 2025-10-22 15:23:36 +08:00
zzlgreat
c043c40004 添加socketservice 2025-10-21 15:13:11 +08:00
zdl
e1fe974262 feat: 登陆状态调整 2025-10-20 13:58:07 +08:00
zdl
7181fae958 feat: 日志优化 2025-10-18 17:33:15 +08:00
zzlgreat
8107dee8d3 Initial commit 2025-10-11 12:02:01 +08:00