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

337 Commits

Author SHA1 Message Date
zdl
fc63cc6e8d refactor(HomeNavbar): Phase 7 - 最终组件化优化 
Phase 7 重构完成，实现 HomeNavbar 的最终优化：

新增文件：
- src/components/Navbars/components/SecondaryNav/config.js (111行)
  * 二级导航配置数据
  * 统一管理所有二级菜单结构
- src/components/Navbars/components/SecondaryNav/index.js (138行)
  * 二级导航栏组件
  * 支持动态路由匹配、徽章显示、导航埋点
- src/hooks/useProfileCompleteness.js (127行)
  * 用户资料完整性管理 Hook
  * 封装资料检查逻辑、状态管理、自动检测
- src/components/Navbars/components/ProfileCompletenessAlert/index.js (96行)
  * 资料完整性提醒横幅组件
  * 响应式设计、操作回调
- src/components/Navbars/components/NavbarActions/index.js (82行)
  * 右侧功能区统一组件
  * 集成主题切换、登录按钮、功能菜单、用户菜单
- src/components/Navbars/components/ThemeToggleButton.js (更新)
  * 添加导航埋点支持
  * 支持自定义尺寸和样式

HomeNavbar.js 优化：
- 移除 SecondaryNav 内联组件定义（~148行）
- 移除资料完整性状态和逻辑（~90行）
- 移除资料完整性横幅 JSX（~50行）
- 移除右侧功能区 JSX（~54行）
- 简化 handleLogout，使用 resetCompleteness
- 525 → 215 行（-310行，-59.0%）

Phase 7 成果：
- 创建 1 个配置文件、4 个新组件、1 个自定义 Hook
- 从 HomeNavbar 中提取 ~342 行复杂逻辑和 JSX
- 代码高度模块化，职责清晰分离
- 所有功能保持完整，便于维护和测试

总体成果（Phase 1-7）：
- 原始代码：1623 行
- Phase 1-6 后：525 行（-67.7%）
- Phase 7 后：215 行（-86.8%）
- 总减少：1408 行
- 提取组件总数：18+ 个
- 代码结构从臃肿单体文件转变为清晰的模块化架构

技术亮点：
- 自定义 Hooks 封装复杂状态逻辑
- 配置与组件分离
- 组件高度复用
- React.memo 性能优化
- 完整的 Props 类型注释

注意：存在 Webpack 缓存导致的间歇性编译错误，
代码本身正确，重启开发服务器可解决

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-30 18:07:22 +08:00
zdl
dfe3976f92 refactor(HomeNavbar): Phase 6 - 提取自选股和关注事件功能组件 
Phase 6 重构完成，将自选股和关注事件功能完全组件化：

新增文件：
- src/hooks/useWatchlist.js - 自选股管理 Hook (98行)
  * 管理自选股数据加载、分页和移除逻辑
  * 提供 watchlistQuotes、loadWatchlistQuotes、handleRemoveFromWatchlist
- src/hooks/useFollowingEvents.js - 关注事件管理 Hook (104行)
  * 管理关注事件数据加载、分页和取消关注逻辑
  * 提供 followingEvents、loadFollowingEvents、handleUnfollowEvent
- src/components/Navbars/components/FeatureMenus/WatchlistMenu.js (182行)
  * 自选股下拉菜单组件，显示实时行情
  * 支持分页、价格显示、涨跌幅标记、移除功能
- src/components/Navbars/components/FeatureMenus/FollowingEventsMenu.js (196行)
  * 关注事件下拉菜单组件，显示事件详情
  * 支持分页、事件类型、时间、日均涨幅、周涨幅显示
- src/components/Navbars/components/FeatureMenus/index.js
  * 统一导出 WatchlistMenu 和 FollowingEventsMenu

HomeNavbar.js 优化：
- 移除 287 行旧代码（状态定义 + 4个回调函数）
- 添加 Phase 6 imports 和 Hook 调用
- 替换自选股菜单 JSX (~77行) → <WatchlistMenu />
- 替换关注事件菜单 JSX (~83行) → <FollowingEventsMenu />
- 812 → 525 行（-287行，-35.3%）

Phase 6 成果：
- 创建 2 个自定义 Hooks，5 个新文件
- 从 HomeNavbar 中提取 ~450 行复杂逻辑
- 代码更模块化，易于维护和测试
- 所有功能正常，编译通过

总体成果（Phase 1-6）：
- 原始：1623 行 → 当前：525 行
- 总减少：1098 行（-67.7%）
- 提取组件：13+ 个
- 可维护性大幅提升

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-30 17:54:27 +08:00
zdl
60aa4c5c60 refactor(HomeNavbar): Phase 5 - 提取移动端抽屉菜单组件 
**背景**
继 Phase 1-4 后，进一步优化 HomeNavbar 的移动端菜单结构

**重构内容**
1. **新增组件目录** `src/components/Navbars/components/MobileDrawer/`
   - MobileDrawer.js (314行) - 移动端完整抽屉菜单
     * 用户信息展示
     * 日夜模式切换
     * 完整导航菜单（高频跟踪、行情复盘、AGENT社群、联系我们）
     * 登录/退出登录按钮
   - index.js - 统一导出

2. **HomeNavbar.js 优化**
   - 删除 ~262 行移动端 Drawer JSX 代码
   - 精简 Chakra UI 导入（移除 Drawer、DrawerBody、DrawerHeader 等 12 个组件）
   - 替换为 MobileDrawer 组件调用
   - 1065 → 815 行 (-250行, -23%)

**技术亮点**
- React.memo 优化渲染性能
- 封装导航点击逻辑（handleNavigate）
- 独立管理主题切换状态
- 响应式颜色模式（useColorModeValue）
- 完整的用户状态判断和 UI 展示

**累计成果** (Phase 1-5)
- 原始: 1623 行
- 当前: 815 行
- 减少: 808 行 (-50%)
- 提取: 11 个组件

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-30 17:42:14 +08:00
zdl
89e5e60a6a refactor(HomeNavbar): Phase 4 - 提取导航菜单组件 
**背景**
继 Phase 1-3 后，进一步优化 HomeNavbar 的导航菜单结构

**重构内容**
1. **新增组件目录** `src/components/Navbars/components/Navigation/`
   - DesktopNav.js (200行) - 桌面版完整导航菜单（高频跟踪、行情复盘、AGENT社群、联系我们）
   - MoreMenu.js (135行) - 平板版"更多"下拉菜单（折叠所有导航项）
   - PersonalCenterMenu.js (102行) - 个人中心下拉菜单（用户信息、账户管理、订阅管理、退出登录）
   - index.js - 统一导出

2. **HomeNavbar.js 优化**
   - 删除 MoreNavMenu 组件定义 (~103行)
   - 删除 NavItems 组件定义 (~184行)
   - 删除 PersonalCenterMenu JSX (~40行)
   - 替换为组件调用
   - 1394 → 1065 行 (-329行, -24%)

**技术亮点**
- React.memo 优化渲染性能
- useCallback 缓存导航激活状态判断
- 集成 useNavigationEvents 埋点追踪
- 响应式设计 (Desktop / Tablet / Mobile)
- 组件内聚，降低主文件复杂度

**累计成果** (Phase 1-4)
- 原始: 1623 行
- 当前: 1065 行
- 减少: 558 行 (-34%)
- 提取: 10 个组件

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-30 17:10:31 +08:00
zdl
77440f78a7 refactor(HomeNavbar): Phase 3 - 提取用户菜单组件 
**背景**
继 Phase 1 (静态组件) 和 Phase 2 (Redux订阅) 后，进一步优化 HomeNavbar

**重构内容**
1. **新增组件目录** `src/components/Navbars/components/UserMenu/`
   - UserAvatar.js (101行) - 头像 + 皇冠图标 + 订阅边框
   - DesktopUserMenu.js (93行) - 桌面版 Tooltip + 订阅弹窗
   - TabletUserMenu.js (166行) - 平板版下拉菜单 (含所有功能)
   - index.js - 统一导出

2. **HomeNavbar.js 优化**
   - 删除 ~150 行用户菜单 JSX 代码
   - 移除未使用的 Tooltip 导入
   - 替换为 DesktopUserMenu / TabletUserMenu 组件调用
   - 1533 → 1394 行 (-139行, -9%)

**技术亮点**
- React.memo 优化渲染性能
- 复用 Redux subscriptionSlice (Phase 2)
- 响应式设计 (isDesktop vs isTablet)
- 组件内聚，降低父组件耦合

**累计成果** (Phase 1-3)
- 原始: 1623 行
- 当前: 1394 行
- 减少: 229 行 (-14%)
- 提取: 7 个组件 (4 静态 + 3 用户菜单)

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-30 17:01:01 +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
5387b2d032 refactor(HomeNavbar): Phase 1 - 提取静态组件 (1623行→1573行) 
重构目标: 减少 HomeNavbar 不必要的重新渲染

Phase 1 完成:
✅ 提取 BrandLogo.js (51行) - Logo 和品牌文字
✅ 提取 LoginButton.js (37行) - 登录/注册按钮
✅ 提取 CalendarButton.js (65行) - 投资日历按钮+Modal
✅ 提取 ThemeToggleButton.js (33行) - 主题切换按钮

优化成果:
- HomeNavbar.js: 1623行 → 1573行 (↓ 50行, -3%)
- 4个独立组件使用 React.memo 包裹
- 组件状态内部管理,不影响父组件
- CalendarModal 状态从主组件移除

性能收益:
- 这些组件现在独立渲染,不受父组件影响
- 为后续 Phase 2-6 优化奠定基础

目录结构:
src/components/Navbars/
├── HomeNavbar.js (1573行)
└── components/
    ├── BrandLogo.js
    ├── LoginButton.js
    ├── CalendarButton.js
    └── ThemeToggleButton.js

下一步: Phase 2 - 提取订阅相关组件

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-30 16:40:48 +08:00
zdl
fe5362c4bd perf(HomeNavbar): 减少渲染日志噪音 
问题:
- HomeNavbar 每次渲染都输出 debug 日志
- 通知系统变化导致频繁渲染(每7-8秒一次)
- 日志输出影响控制台可读性

临时方案:
- 注释掉渲染状态 debug 日志
- 创建 ThemeToggleButton 独立组件(为future优化准备)

后续优化:
- TODO: 完整拆分 HomeNavbar 为多个子组件
- TODO: 使用 React.memo 减少不必要渲染
- TODO: 优化 Context 订阅策略

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-30 16:33:32 +08:00
zdl
fffea873c4 feat: 创建 GlobalComponents 统一管理全局组件 
- 创建 src/components/GlobalComponents.js (92行)
- 集中管理 5 个全局组件: ConnectionStatusBar, ScrollToTop, AuthModalManager, NotificationContainer, NotificationTestTool
- 包含 ConnectionStatusBarWrapper 逻辑 (40行)

优势:
- 全局组件统一管理,不再分散
- App.js 减少 50+ 行代码
- 组件职责清晰,易于维护

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-30 15:02:20 +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
3acc00ac8d fix: 修复导航栏 Max 会员订阅信息显示问题 
- 修复 HomeNavbar 中 useEffect 执行顺序导致订阅信息不加载的问题
- 移除 ref 检查逻辑,改为直接根据登录状态加载订阅信息
- 增强订阅相关的调试日志输出(getCurrentUser, API handler, HomeNavbar)
- 优化用户数据获取的日志格式,便于问题排查
 2025-10-30 13:09:41 +08:00
zdl
cb84b0238a Merge branch 'feature_2025/251029_legal_notice' into feature 
* feature_2025/251029_legal_notice: (32 commits)
  feat: API优化
  feat: mock数据添加
  feat: 修改内容：添加风险提示到K线图弹窗
  feat:修复mock数据
  feat:  访问"概念中心"页面      2. 点击任意概念卡片进入概念详情      3. 点击"历史时间轴"按钮（需要Max会员权限）      4. 查看弹窗底部是否显示风险提示 & mock数据处理
  feat: 事件中心股票详情添加风险提示
  feat: 涨停分析/股票详情弹窗 添加风险提示
  feat: 添加mock数据
  feat: 事件中心 事件详情底部添加风险提示
  feat: 添加mock数据
  feat: 核心页面添加风险提示
  feat: 创建风险提示通用组件
  feat: bugfix
  feat: 优化packge.json
  feat: package.json 优化方案
  feat:  任务 1: 集成 TradingSimulation 追踪事件任务 2: 传递 tradingEvents 到子组件
  feat: 统一的Hook架构
  feat: 集成导航上报
  feat: 已完成的工作:   - ✅ 创建了4个P1优先级Hook（搜索、导航、个人资料、订阅）   - ✅ 将其中3个Hook集成到5个组件中   - ✅ 在个人资料、设置、搜索、订阅流程中添加了15+个追踪点   - ✅ 覆盖了完整的收入漏斗（支付发起 → 成功 → 订阅创建）   - ✅ 添加了留存追踪（个人资料更新、设置修改、搜索查询）
  feat: P1通用功能：4个Hook创建完成（待集成）现在您可以追踪：
  ...
 2025-10-30 10:41:24 +08:00
zdl
a049d0365b feat: 修改内容：添加风险提示到K线图弹窗 2025-10-29 19:34:33 +08:00
zdl
77aafd5661 feat: 事件中心股票详情添加风险提示 2025-10-29 19:12:18 +08:00
zdl
d0d8b1ebde feat: 核心页面添加风险提示 2025-10-29 17:49:05 +08:00
zdl
bf8aff9e7e feat: 创建风险提示通用组件 2025-10-29 17:42:24 +08:00
zdl
f3c7e016ac Merge branch '1028_bugfix' into feature 
* 1028_bugfix:
  手机号格式适配-前端修改
  添加微信扫码的几种其他状态
  整合register端口进入login端口
 2025-10-29 16:27:31 +08:00
zdl
173b13bc70 feat: 集成导航上报 2025-10-29 12:52:34 +08:00
zdl
02cd234def feat: 已完成的工作: 
- ✅ 创建了4个P1优先级Hook（搜索、导航、个人资料、订阅）
  - ✅ 将其中3个Hook集成到5个组件中
  - ✅ 在个人资料、设置、搜索、订阅流程中添加了15+个追踪点
  - ✅ 覆盖了完整的收入漏斗（支付发起 → 成功 → 订阅创建）
  - ✅ 添加了留存追踪（个人资料更新、设置修改、搜索查询）

  影响:
  - 完整的用户订阅旅程可见性
  - 个人资料/设置参与度追踪
  - 搜索行为分析
  - 完整的支付漏斗追踪（微信支付）
 2025-10-29 12:29:41 +08:00
zzlgreat
8417ab17be 手机号格式适配-前端修改 2025-10-29 11:20:41 +08:00
zzlgreat
dd59cb6385 添加微信扫码的几种其他状态 2025-10-29 07:33:44 +08:00
zdl
c42a14aa8f feat: 首页登陆事件追踪 2025-10-28 21:45:06 +08:00
zdl
6506cb222b 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
542b20368e Merge branch 'feature_2025/1028_bugfix' into feature 2025-10-28 19:41:20 +08:00
zdl
d456c3cd5f pref: 去除坏味道 2025-10-28 19:06:50 +08:00
zdl
b221c2669c feat: 微信登陆逻辑调整 2025-10-28 19:04:58 +08:00
zzlgreat
71df2b605b 整合register端口进入login端口 2025-10-28 14:54:45 +08:00
zdl
657c446594 feat: 错误logger 不在被error页面捕获 2025-10-27 21:14:51 +08:00
zdl
a92d556486 feat: 调整错误提示 2025-10-24 16:40:26 +08:00
zdl
e91656d332 feat: user 依赖优化 2025-10-24 12:19:37 +08:00
zdl
34a6c402c4 feat: homeNavar 将投资日历从社区页面的右侧导航移到了顶部导航栏 
InvestmentCalendar.js 将 loadEventCounts 函数改为使用 useCallback 包装
  - 修复了 useEffect 的依赖数组，添加了 loadEventCounts
  - 为事件列表 Modal 添加了 zIndex={1500}
  - 为内容详情 Drawer 添加了 zIndex={1500}
  - 为相关股票 Modal 添加了 zIndex={1500}
src/views/Community/components/RightSidebar.js

  修改内容：
  - 已删除此文件
 2025-10-24 10:56:43 +08:00
zdl
1ba8b8fd2f feat: 消息通知能力测试 2025-10-23 15:25:36 +08:00
zdl
45b88309b3 pref: 代码优化 2025-10-23 15:03:39 +08:00
zdl
28975f74e9 feat: 将新闻中心改为事件中心 2025-10-23 14:57:26 +08:00
zdl
d2988d1a33 feat: 增加券商名字段 2025-10-23 11:44:58 +08:00
zdl
43229a21c0 feat: 添加路由保护 2025-10-22 15:41:34 +08:00
zdl
35198aa548 feat: 微信UI调整 2025-10-22 15:40:36 +08:00
zdl
433a982a20 feat: 成功和错误弹窗从顶部弹出 2025-10-22 12:18:53 +08:00
zdl
23188d5690 feat: 修改文件 │ 
│                                                                                           │
     │ 1. src/services/socketService.js - 指数退避 + 无限重试                                    │
     │ 2. src/components/ConnectionStatusBar/index.js - UI 优化 + 自动消失                       │
     │ 3. src/App.js - handleClose 实现 + dismissed 状态管理                                     │
     │ 4. src/contexts/NotificationContext.js - 添加成功状态检测                                 │
     │ 5. NOTIFICATION_SYSTEM.md - v2.11.0 文档更新
 2025-10-21 18:34:38 +08:00
zdl
09c9273190 feat: sockt 弹窗功能添加 2025-10-21 17:50:21 +08:00
zdl
38499ce650 feat: 添加消息推送能力 2025-10-21 15:48:38 +08:00
zdl
98653f042b feat: 导航UI调整 2025-10-21 15:43:35 +08:00
zdl
eef383f56f feat: 导航UI调整 2025-10-21 15:24:23 +08:00
zdl
5a3a3ad42b feat: 添加消息推送能力，添加新闻催化分析页的合规提示 2025-10-21 10:59:52 +08:00
zdl
6c96299b8f feat: 添加合规 2025-10-20 21:25:33 +08:00
zdl
d695f8ff7b feat: 登陆状态调整 2025-10-20 13:58:07 +08:00
zdl
b2681231b0 feat: 删除无用组件 2025-10-20 13:34:19 +08:00
zdl
44f9fea624 feat: 添加导航徽章 2025-10-20 13:28:37 +08:00
zdl
c0aaa5bde1 feat: 删除废弃文件 2025-10-18 22:45:39 +08:00
zdl
47fcb570c0 feat: 日志优化 2025-10-18 17:33:15 +08:00