Compare commits

...

2 Commits

Author SHA1 Message Date
zdl
ce495ed6fa feat: bugfix 2025-11-03 19:45:32 +08:00
zdl
0e66bb471f fix: 修复 PostHog 生产环境配置问题
## 问题描述
生产环境部署后,PostHog 只收到 localhost:3000 的错误报告,而不是生产环境的真实 URL。

## 根本原因
构建脚本未显式加载生产环境配置文件,导致 PostHog API Key 和 Host 配置未正确嵌入到打包文件中。

## 解决方案
1. 新增 `.env.production` 生产环境专用配置文件
   - 包含正确的 PostHog API Key 和 Host
   - 设置 REACT_APP_ENV=production
   - 禁用 Mock 数据 (REACT_APP_ENABLE_MOCK=false)
   - 配置生产 API 地址

2. 修改 package.json 构建脚本
   - 使用 env-cmd 显式加载 .env.production
   - 确保构建时环境变量正确嵌入

## 影响范围
-  生产环境构建: 现在会正确加载配置
-  PostHog 功能: 将使用正确的配置初始化
-  开发环境: 无影响,仍使用各自的环境文件
-  部署流程: 服务器构建时自动使用新配置

## 测试计划
1. 本地执行 npm run build 验证构建成功
2. 部署到生产环境
3. 验证 PostHog 后台收到正确的生产 URL

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-03 18:42:58 +08:00
6 changed files with 260 additions and 45 deletions

42
.env.production Normal file
View File

@@ -0,0 +1,42 @@
# ========================================
# 生产环境配置
# ========================================
# 使用方式: npm run build
#
# 工作原理:
# 1. 此文件专门用于生产环境构建
# 2. 构建时会将环境变量嵌入到打包文件中
# 3. 确保 PostHog 等服务使用正确的生产配置
# ========================================
# 环境标识
REACT_APP_ENV=production
NODE_ENV=production
# Mock 配置(生产环境禁用 Mock
REACT_APP_ENABLE_MOCK=false
# 后端 API 地址(生产环境)
REACT_APP_API_URL=http://49.232.185.254:5001
# PostHog 分析配置(生产环境)
# PostHog API Key从 PostHog 项目设置中获取)
REACT_APP_POSTHOG_KEY=phc_xKlRyG69Bx7hgOdFeCeLUvQWvSjw18ZKFgCwCeYezWF
# PostHog API Host使用 PostHog Cloud
REACT_APP_POSTHOG_HOST=https://app.posthog.com
# 启用会话录制Session Recording用于回放用户操作、排查问题
REACT_APP_ENABLE_SESSION_RECORDING=true
# React 构建优化配置
# 禁用 source map 生成(生产环境不需要,提升打包速度和安全性)
GENERATE_SOURCEMAP=false
# 跳过预检查(加快启动速度)
SKIP_PREFLIGHT_CHECK=true
# 禁用 ESLint 检查(生产构建时不需要)
DISABLE_ESLINT_PLUGIN=true
# TypeScript 编译错误时继续
TSC_COMPILE_ON_ERROR=true
# 图片内联大小限制
IMAGE_INLINE_SIZE_LIMIT=10000
# Node.js 内存限制(适用于大型项目)
NODE_OPTIONS=--max_old_space_size=4096

View File

@@ -101,7 +101,7 @@
"frontend:test": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.test craco start",
"dev": "npm start",
"backend": "python app_2.py",
"build": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' craco build && gulp licenses",
"build": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.production craco build && gulp licenses",
"build:analyze": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' ANALYZE=true craco build",
"test": "craco test --env=jsdom",
"eject": "react-scripts eject",

View File

@@ -508,19 +508,20 @@ export default function WechatRegister() {
title="微信扫码登录"
width="300"
height="350"
scrolling="no" // ✅ 新增:禁止滚动
scrolling="no" // ✅ 新增:禁止滚动
sandbox="allow-scripts allow-same-origin allow-forms" // ✅ 阻止iframe跳转父页面
style={{
border: 'none',
transform: 'scale(0.77) translateY(-35px)', // ✅ 裁剪顶部logo
transformOrigin: 'top left',
marginLeft: '-5px',
pointerEvents: 'auto', // 允许点击 │ │
overflow: 'hidden', // 尝试隐藏滚动条(可能不起作用)
overflow: 'hidden', // 尝试隐藏滚动条(可能不起作用)
}}
// 使用 onWheel 事件阻止滚动 │ │
onWheel={(e) => e.preventDefault()} // ✅ 在父容器上阻止滚动
onTouchMove={(e) => e.preventDefault()} // ✅ 移动端也阻止
/>
) : (
/* 未获取:显示占位符 */

View File

@@ -12,12 +12,12 @@ import {
Text,
Flex,
Badge,
useColorModeValue,
useDisclosure
useColorModeValue
} from '@chakra-ui/react';
import { ChevronDownIcon } from '@chakra-ui/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import { useNavigationEvents } from '../../../../hooks/useNavigationEvents';
import { useDelayedMenu } from '../../../../hooks/useDelayedMenu';
/**
* 桌面版主导航菜单组件
@@ -37,11 +37,11 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
// 🎯 初始化导航埋点Hook
const navEvents = useNavigationEvents({ component: 'top_nav' });
// 🎯 为每个菜单创建独立的 useDisclosure Hook
const { isOpen: isHighFreqOpen, onOpen: onHighFreqOpen, onClose: onHighFreqClose } = useDisclosure();
const { isOpen: isMarketReviewOpen, onOpen: onMarketReviewOpen, onClose: onMarketReviewClose } = useDisclosure();
const { isOpen: isAgentCommunityOpen, onOpen: onAgentCommunityOpen, onClose: onAgentCommunityClose } = useDisclosure();
const { isOpen: isContactUsOpen, onOpen: onContactUsOpen, onClose: onContactUsClose } = useDisclosure();
// 🎯 为每个菜单创建延迟关闭控制200ms 延迟)
const highFreqMenu = useDelayedMenu({ closeDelay: 200 });
const marketReviewMenu = useDelayedMenu({ closeDelay: 200 });
const agentCommunityMenu = useDelayedMenu({ closeDelay: 200 });
const contactUsMenu = useDelayedMenu({ closeDelay: 200 });
// 辅助函数:判断导航项是否激活
const isActive = useCallback((paths) => {
@@ -53,7 +53,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
return (
<HStack spacing={8}>
{/* 高频跟踪 */}
<Menu isOpen={isHighFreqOpen} onClose={onHighFreqClose}>
<Menu isOpen={highFreqMenu.isOpen} onClose={highFreqMenu.onClose}>
<MenuButton
as={Button}
variant="ghost"
@@ -64,18 +64,24 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
borderBottom={isActive(['/community', '/concepts']) ? '2px solid' : 'none'}
borderColor="blue.600"
_hover={{ bg: isActive(['/community', '/concepts']) ? 'blue.100' : 'gray.50' }}
onMouseEnter={onHighFreqOpen}
onMouseLeave={onHighFreqClose}
onMouseEnter={highFreqMenu.handleMouseEnter}
onMouseLeave={highFreqMenu.handleMouseLeave}
onClick={highFreqMenu.handleClick}
>
高频跟踪
</MenuButton>
<MenuList minW="260px" p={2} onMouseEnter={onHighFreqOpen}>
<MenuList
minW="260px"
p={2}
onMouseEnter={highFreqMenu.handleMouseEnter}
onMouseLeave={highFreqMenu.handleMouseLeave}
>
<MenuItem
onClick={() => {
// 🎯 追踪菜单项点击
navEvents.trackMenuItemClicked('事件中心', 'dropdown', '/community');
navigate('/community');
onHighFreqClose(); // 跳转后关闭菜单
highFreqMenu.onClose(); // 跳转后关闭菜单
}}
borderRadius="md"
bg={location.pathname.includes('/community') ? 'blue.50' : 'transparent'}
@@ -96,7 +102,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
// 🎯 追踪菜单项点击
navEvents.trackMenuItemClicked('概念中心', 'dropdown', '/concepts');
navigate('/concepts');
onHighFreqClose(); // 跳转后关闭菜单
highFreqMenu.onClose(); // 跳转后关闭菜单
}}
borderRadius="md"
bg={location.pathname.includes('/concepts') ? 'blue.50' : 'transparent'}
@@ -113,7 +119,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
</Menu>
{/* 行情复盘 */}
<Menu isOpen={isMarketReviewOpen} onClose={onMarketReviewClose}>
<Menu isOpen={marketReviewMenu.isOpen} onClose={marketReviewMenu.onClose}>
<MenuButton
as={Button}
variant="ghost"
@@ -124,16 +130,22 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
borderBottom={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? '2px solid' : 'none'}
borderColor="blue.600"
_hover={{ bg: isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.100' : 'gray.50' }}
onMouseEnter={onMarketReviewOpen}
onMouseLeave={onMarketReviewClose}
onMouseEnter={marketReviewMenu.handleMouseEnter}
onMouseLeave={marketReviewMenu.handleMouseLeave}
onClick={marketReviewMenu.handleClick}
>
行情复盘
</MenuButton>
<MenuList minW="260px" p={2} onMouseEnter={onMarketReviewOpen}>
<MenuList
minW="260px"
p={2}
onMouseEnter={marketReviewMenu.handleMouseEnter}
onMouseLeave={marketReviewMenu.handleMouseLeave}
>
<MenuItem
onClick={() => {
navigate('/limit-analyse');
onMarketReviewClose(); // 跳转后关闭菜单
marketReviewMenu.onClose(); // 跳转后关闭菜单
}}
borderRadius="md"
bg={location.pathname.includes('/limit-analyse') ? 'blue.50' : 'transparent'}
@@ -149,7 +161,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
<MenuItem
onClick={() => {
navigate('/stocks');
onMarketReviewClose(); // 跳转后关闭菜单
marketReviewMenu.onClose(); // 跳转后关闭菜单
}}
borderRadius="md"
bg={location.pathname.includes('/stocks') ? 'blue.50' : 'transparent'}
@@ -165,7 +177,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
<MenuItem
onClick={() => {
navigate('/trading-simulation');
onMarketReviewClose(); // 跳转后关闭菜单
marketReviewMenu.onClose(); // 跳转后关闭菜单
}}
borderRadius="md"
bg={location.pathname.includes('/trading-simulation') ? 'blue.50' : 'transparent'}
@@ -182,17 +194,23 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
</Menu>
{/* AGENT社群 */}
<Menu isOpen={isAgentCommunityOpen} onClose={onAgentCommunityClose}>
<Menu isOpen={agentCommunityMenu.isOpen} onClose={agentCommunityMenu.onClose}>
<MenuButton
as={Button}
variant="ghost"
rightIcon={<ChevronDownIcon />}
onMouseEnter={onAgentCommunityOpen}
onMouseLeave={onAgentCommunityClose}
onMouseEnter={agentCommunityMenu.handleMouseEnter}
onMouseLeave={agentCommunityMenu.handleMouseLeave}
onClick={agentCommunityMenu.handleClick}
>
AGENT社群
</MenuButton>
<MenuList minW="300px" p={4} onMouseEnter={onAgentCommunityOpen}>
<MenuList
minW="300px"
p={4}
onMouseEnter={agentCommunityMenu.handleMouseEnter}
onMouseLeave={agentCommunityMenu.handleMouseLeave}
>
<MenuItem
isDisabled
cursor="not-allowed"
@@ -211,17 +229,23 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
</Menu>
{/* 联系我们 */}
<Menu isOpen={isContactUsOpen} onClose={onContactUsClose}>
<Menu isOpen={contactUsMenu.isOpen} onClose={contactUsMenu.onClose}>
<MenuButton
as={Button}
variant="ghost"
rightIcon={<ChevronDownIcon />}
onMouseEnter={onContactUsOpen}
onMouseLeave={onContactUsClose}
onMouseEnter={contactUsMenu.handleMouseEnter}
onMouseLeave={contactUsMenu.handleMouseLeave}
onClick={contactUsMenu.handleClick}
>
联系我们
</MenuButton>
<MenuList minW="260px" p={4} onMouseEnter={onContactUsOpen}>
<MenuList
minW="260px"
p={4}
onMouseEnter={contactUsMenu.handleMouseEnter}
onMouseLeave={contactUsMenu.handleMouseLeave}
>
<Text fontSize="sm" color={contactTextColor}>敬请期待</Text>
</MenuList>
</Menu>

View File

@@ -12,11 +12,11 @@ import {
Text,
Flex,
HStack,
Badge,
useDisclosure
Badge
} from '@chakra-ui/react';
import { ChevronDownIcon } from '@chakra-ui/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import { useDelayedMenu } from '../../../../hooks/useDelayedMenu';
/**
* 平板版"更多"下拉菜单组件
@@ -30,8 +30,8 @@ const MoreMenu = memo(({ isAuthenticated, user }) => {
const navigate = useNavigate();
const location = useLocation();
// 🎯 为"更多"菜单创建 useDisclosure Hook
const { isOpen, onOpen, onClose } = useDisclosure();
// 🎯 使用延迟关闭菜单控制
const moreMenu = useDelayedMenu({ closeDelay: 200 });
// 辅助函数:判断导航项是否激活
const isActive = useCallback((paths) => {
@@ -41,23 +41,29 @@ const MoreMenu = memo(({ isAuthenticated, user }) => {
if (!isAuthenticated || !user) return null;
return (
<Menu isOpen={isOpen} onClose={onClose}>
<Menu isOpen={moreMenu.isOpen} onClose={moreMenu.onClose}>
<MenuButton
as={Button}
variant="ghost"
rightIcon={<ChevronDownIcon />}
fontWeight="medium"
onMouseEnter={onOpen}
onMouseLeave={onClose}
onMouseEnter={moreMenu.handleMouseEnter}
onMouseLeave={moreMenu.handleMouseLeave}
onClick={moreMenu.handleClick}
>
更多
</MenuButton>
<MenuList minW="300px" p={2} onMouseEnter={onOpen}>
<MenuList
minW="300px"
p={2}
onMouseEnter={moreMenu.handleMouseEnter}
onMouseLeave={moreMenu.handleMouseLeave}
>
{/* 高频跟踪组 */}
<Text fontSize="xs" fontWeight="bold" px={3} py={2} color="gray.500">高频跟踪</Text>
<MenuItem
onClick={() => {
onClose(); // 先关闭菜单
moreMenu.onClose(); // 先关闭菜单
navigate('/community');
}}
borderRadius="md"
@@ -73,7 +79,7 @@ const MoreMenu = memo(({ isAuthenticated, user }) => {
</MenuItem>
<MenuItem
onClick={() => {
onClose(); // 先关闭菜单
moreMenu.onClose(); // 先关闭菜单
navigate('/concepts');
}}
borderRadius="md"
@@ -91,7 +97,7 @@ const MoreMenu = memo(({ isAuthenticated, user }) => {
<Text fontSize="xs" fontWeight="bold" px={3} py={2} color="gray.500">行情复盘</Text>
<MenuItem
onClick={() => {
onClose(); // 先关闭菜单
moreMenu.onClose(); // 先关闭菜单
navigate('/limit-analyse');
}}
borderRadius="md"
@@ -104,7 +110,7 @@ const MoreMenu = memo(({ isAuthenticated, user }) => {
</MenuItem>
<MenuItem
onClick={() => {
onClose(); // 先关闭菜单
moreMenu.onClose(); // 先关闭菜单
navigate('/stocks');
}}
borderRadius="md"
@@ -117,7 +123,7 @@ const MoreMenu = memo(({ isAuthenticated, user }) => {
</MenuItem>
<MenuItem
onClick={() => {
onClose(); // 先关闭菜单
moreMenu.onClose(); // 先关闭菜单
navigate('/trading-simulation');
}}
borderRadius="md"

142
src/hooks/useDelayedMenu.js Normal file
View File

@@ -0,0 +1,142 @@
// src/hooks/useDelayedMenu.js
// 导航菜单延迟关闭 Hook - 优化 hover 和 click 交互体验
import { useState, useRef, useCallback } from 'react';
/**
* 自定义 Hook提供带延迟关闭功能的菜单控制
*
* 解决问题:
* 1. 用户快速移动鼠标导致菜单意外关闭
* 2. Hover 和 Click 状态冲突
* 3. 从 MenuButton 移动到 MenuList 时菜单闪烁
*
* 功能特性:
* - ✅ Hover 进入:立即打开菜单
* - ✅ Hover 离开:延迟关闭(默认 200ms
* - ✅ Click 切换:支持点击切换打开/关闭状态
* - ✅ 智能取消:再次 hover 进入时取消关闭定时器
*
* @param {Object} options - 配置选项
* @param {number} options.closeDelay - 延迟关闭时间(毫秒),默认 200ms
* @returns {Object} 菜单控制对象
*/
export function useDelayedMenu({ closeDelay = 200 } = {}) {
const [isOpen, setIsOpen] = useState(false);
const closeTimerRef = useRef(null);
const isClickedRef = useRef(false); // 追踪是否通过点击打开
/**
* 打开菜单
* - 立即打开,无延迟
* - 清除任何待执行的关闭定时器
*/
const onOpen = useCallback(() => {
// 清除待执行的关闭定时器
if (closeTimerRef.current) {
clearTimeout(closeTimerRef.current);
closeTimerRef.current = null;
}
setIsOpen(true);
}, []);
/**
* 延迟关闭菜单
* - 设置定时器,延迟后关闭
* - 如果在延迟期间再次 hover 进入,会被 onOpen 取消
*/
const onDelayedClose = useCallback(() => {
// 如果是点击打开的hover 离开时不自动关闭
if (isClickedRef.current) {
return;
}
// 清除之前的定时器(防止重复设置)
if (closeTimerRef.current) {
clearTimeout(closeTimerRef.current);
}
// 设置延迟关闭定时器
closeTimerRef.current = setTimeout(() => {
setIsOpen(false);
closeTimerRef.current = null;
}, closeDelay);
}, [closeDelay]);
/**
* 立即关闭菜单
* - 无延迟,立即关闭
* - 清除所有定时器和状态标记
*/
const onClose = useCallback(() => {
// 清除定时器
if (closeTimerRef.current) {
clearTimeout(closeTimerRef.current);
closeTimerRef.current = null;
}
setIsOpen(false);
isClickedRef.current = false;
}, []);
/**
* 切换菜单状态(用于点击)
* - 如果关闭 → 打开,并标记为点击打开
* - 如果打开 → 关闭,并清除点击标记
*/
const onToggle = useCallback(() => {
if (isOpen) {
// 当前已打开 → 关闭
onClose();
} else {
// 当前已关闭 → 打开
onOpen();
isClickedRef.current = true; // 标记为点击打开
}
}, [isOpen, onOpen, onClose]);
/**
* Hover 进入处理
* - 打开菜单
* - 清除点击标记(允许 hover 离开时自动关闭)
*/
const handleMouseEnter = useCallback(() => {
onOpen();
isClickedRef.current = false; // 清除点击标记,允许 hover 控制
}, [onOpen]);
/**
* Hover 离开处理
* - 延迟关闭菜单
*/
const handleMouseLeave = useCallback(() => {
onDelayedClose();
}, [onDelayedClose]);
/**
* 点击处理
* - 切换菜单状态
*/
const handleClick = useCallback(() => {
onToggle();
}, [onToggle]);
// 组件卸载时清理定时器
const cleanup = useCallback(() => {
if (closeTimerRef.current) {
clearTimeout(closeTimerRef.current);
closeTimerRef.current = null;
}
}, []);
return {
isOpen,
onOpen,
onClose,
onDelayedClose,
onToggle,
handleMouseEnter,
handleMouseLeave,
handleClick,
cleanup
};
}