Compare commits

..

4 Commits

Author SHA1 Message Date
zdl
b2380c420c Merge branch '1028_bugfix' into feature_2025/1028_bugfix
* 1028_bugfix:
  手机号格式适配-前端修改
  添加微信扫码的几种其他状态
  整合register端口进入login端口
2025-10-29 16:26:02 +08:00
8417ab17be 手机号格式适配-前端修改 2025-10-29 11:20:41 +08:00
dd59cb6385 添加微信扫码的几种其他状态 2025-10-29 07:33:44 +08:00
512aca16d8 整合register端口进入login端口 2025-10-28 15:47:50 +08:00
27 changed files with 280 additions and 3335 deletions

272
app.py
View File

@@ -1849,6 +1849,15 @@ def send_verification_code():
if not credential or not code_type:
return jsonify({'success': False, 'error': '缺少必要参数'}), 400
# 清理格式字符(空格、横线、括号等)
if code_type == 'phone':
# 移除手机号中的空格、横线、括号、加号等格式字符
credential = re.sub(r'[\s\-\(\)\+]', '', credential)
print(f"📱 清理后的手机号: {credential}")
elif code_type == 'email':
# 邮箱只移除空格
credential = credential.strip()
# 生成验证码
verification_code = generate_verification_code()
@@ -1907,6 +1916,17 @@ def login_with_verification_code():
if not credential or not verification_code or not login_type:
return jsonify({'success': False, 'error': '缺少必要参数'}), 400
# 清理格式字符(空格、横线、括号等)
if login_type == 'phone':
# 移除手机号中的空格、横线、括号、加号等格式字符
original_credential = credential
credential = re.sub(r'[\s\-\(\)\+]', '', credential)
if original_credential != credential:
print(f"📱 登录时清理手机号: {original_credential} -> {credential}")
elif login_type == 'email':
# 邮箱只移除前后空格
credential = credential.strip()
# 检查验证码
session_key = f'verification_code_{login_type}_{credential}_login'
stored_code_info = session.get(session_key)
@@ -1968,12 +1988,51 @@ def login_with_verification_code():
username = f"{base_username}_{counter}"
counter += 1
# 如果用户不存在,自动创建新用户
if not user:
try:
# 生成用户名
if login_type == 'phone':
# 使用手机号生成用户名
base_username = f"用户{credential[-4:]}"
elif login_type == 'email':
# 使用邮箱前缀生成用户名
base_username = credential.split('@')[0]
else:
base_username = "新用户"
# 确保用户名唯一
username = base_username
counter = 1
while User.is_username_taken(username):
username = f"{base_username}_{counter}"
counter += 1
# 创建新用户
user = User(username=username, email=credential)
user.email_confirmed = True
user = User(username=username)
# 设置手机号或邮箱
if login_type == 'phone':
user.phone = credential
elif login_type == 'email':
user.email = credential
# 设置默认密码(使用随机密码,用户后续可以修改)
user.set_password(uuid.uuid4().hex)
user.status = 'active'
user.nickname = username
db.session.add(user)
db.session.commit()
is_new_user = True
print(f"✅ 自动创建新用户: {username}, {login_type}: {credential}")
except Exception as e:
print(f"❌ 创建用户失败: {e}")
db.session.rollback()
return jsonify({'success': False, 'error': '创建用户失败'}), 500
# 清除验证码
session.pop(session_key, None)
@@ -1989,10 +2048,13 @@ def login_with_verification_code():
# 更新最后登录时间
user.update_last_seen()
# 根据是否为新用户返回不同的消息
message = '注册成功,欢迎加入!' if is_new_user else '登录成功'
return jsonify({
'success': True,
'message': '注册成功' if is_new_user else '登录成功',
'isNewUser': is_new_user,
'message': message,
'is_new_user': is_new_user,
'user': {
'id': user.id,
'username': user.username,
@@ -2004,6 +2066,59 @@ def login_with_verification_code():
}
})
except Exception as e:
print(f"验证码登录错误: {e}")
db.session.rollback()
return jsonify({'success': False, 'error': '登录失败'}), 500
@app.route('/api/auth/register', methods=['POST'])
def register():
"""用户注册 - 使用Session"""
username = request.form.get('username')
email = request.form.get('email')
password = request.form.get('password')
# 验证输入
if not all([username, email, password]):
return jsonify({'success': False, 'error': '所有字段都是必填的'}), 400
# 检查用户名和邮箱是否已存在
if User.is_username_taken(username):
return jsonify({'success': False, 'error': '用户名已存在'}), 400
if User.is_email_taken(email):
return jsonify({'success': False, 'error': '邮箱已被使用'}), 400
try:
# 创建新用户
user = User(username=username, email=email)
user.set_password(password)
user.email_confirmed = True # 暂时默认已确认
db.session.add(user)
db.session.commit()
# 自动登录
session.permanent = True
session['user_id'] = user.id
session['username'] = user.username
session['logged_in'] = True
# Flask-Login 登录
login_user(user, remember=True)
return jsonify({
'success': True,
'message': '注册成功',
'user': {
'id': user.id,
'username': user.username,
'nickname': user.nickname or user.username,
'email': user.email
}
}), 201
except Exception as e:
db.session.rollback()
print(f"验证码登录/注册错误: {e}")
@@ -2487,13 +2602,9 @@ def get_wechat_qrcode():
# 生成唯一state参数
state = uuid.uuid4().hex
print(f"🆕 [QRCODE] 生成新的微信二维码, state={state[:8]}...")
# URL编码回调地址
redirect_uri = urllib.parse.quote_plus(WECHAT_REDIRECT_URI)
print(f"🔗 [QRCODE] 回调地址: {WECHAT_REDIRECT_URI}")
# 构建微信授权URL
wechat_auth_url = (
f"https://open.weixin.qq.com/connect/qrconnect?"
@@ -2511,8 +2622,6 @@ def get_wechat_qrcode():
'wechat_unionid': None
}
print(f"✅ [QRCODE] session 已存储, 当前总数: {len(wechat_qr_sessions)}")
return jsonify({"code":0,
"data":
{
@@ -2576,8 +2685,6 @@ def check_wechat_scan():
del wechat_qr_sessions[session_id]
return jsonify({'status': 'expired'}), 200
print(f"📡 [CHECK] session_id: {session_id[:8]}..., status: {session['status']}, user_info: {session.get('user_info')}")
return jsonify({
'status': session['status'],
'user_info': session.get('user_info'),
@@ -2619,48 +2726,57 @@ def wechat_callback():
state = request.args.get('state')
error = request.args.get('error')
print(f"🎯 [CALLBACK] 微信回调被调用code={code[:10] if code else None}..., state={state[:8] if state else None}..., error={error}")
# 错误处理:用户拒绝授权
if error:
if state in wechat_qr_sessions:
wechat_qr_sessions[state]['status'] = 'auth_denied'
wechat_qr_sessions[state]['error'] = '用户拒绝授权'
print(f"❌ 用户拒绝授权: state={state}")
return redirect('/auth/signin?error=wechat_auth_denied')
# 错误处理
if error or not code or not state:
print(f"❌ [CALLBACK] 参数错误: error={error}, has_code={bool(code)}, has_state={bool(state)}")
# 参数验证
if not code or not state:
if state in wechat_qr_sessions:
wechat_qr_sessions[state]['status'] = 'auth_failed'
wechat_qr_sessions[state]['error'] = '授权参数缺失'
return redirect('/auth/signin?error=wechat_auth_failed')
# 验证state
if state not in wechat_qr_sessions:
print(f"❌ [CALLBACK] state 不在 wechat_qr_sessions 中: {state[:8]}...")
print(f" 当前 sessions: {list(wechat_qr_sessions.keys())}")
return redirect('/auth/signin?error=session_expired')
session_data = wechat_qr_sessions[state]
print(f"✅ [CALLBACK] 找到 session_data, mode={session_data.get('mode')}")
# 检查过期
if time.time() > session_data['expires']:
print(f"❌ [CALLBACK] session 已过期")
del wechat_qr_sessions[state]
return redirect('/auth/signin?error=session_expired')
try:
# 获取access_token
print(f"🔑 [CALLBACK] 开始获取 access_token...")
# 步骤1: 用户已扫码并授权(微信回调过来说明用户已完成扫码+授权)
session_data['status'] = 'scanned'
print(f"✅ 微信扫码回调: state={state}, code={code[:10]}...")
# 步骤2: 获取access_token
token_data = get_wechat_access_token(code)
if not token_data:
print(f"❌ [CALLBACK] 获取 access_token 失败")
session_data['status'] = 'auth_failed'
session_data['error'] = '获取访问令牌失败'
print(f"❌ 获取微信access_token失败: state={state}")
return redirect('/auth/signin?error=token_failed')
print(f"✅ [CALLBACK] 获取 access_token 成功, openid={token_data.get('openid', '')[:8]}...")
# 步骤3: Token获取成功标记为已授权
session_data['status'] = 'authorized'
print(f"✅ 微信授权成功: openid={token_data['openid']}")
# 获取用户信息
print(f"👤 [CALLBACK] 开始获取用户信息...")
# 步骤4: 获取用户信息
user_info = get_wechat_userinfo(token_data['access_token'], token_data['openid'])
if not user_info:
print(f"❌ [CALLBACK] 获取用户信息失败")
session_data['status'] = 'auth_failed'
session_data['error'] = '获取用户信息失败'
print(f"❌ 获取微信用户信息失败: openid={token_data['openid']}")
return redirect('/auth/signin?error=userinfo_failed')
print(f"✅ [CALLBACK] 获取用户信息成功, nickname={user_info.get('nickname', 'N/A')}")
# 查找或创建用户 / 或处理绑定
openid = token_data['openid']
unionid = user_info.get('unionid') or token_data.get('unionid')
@@ -2711,8 +2827,7 @@ def wechat_callback():
user = User.query.filter_by(wechat_open_id=openid).first()
if not user:
# 创建新用户(自动注册)
is_new_user = True
# 创建新用户
# 先清理微信昵称
raw_nickname = user_info.get('nickname', '微信用户')
# 创建临时用户实例以使用清理方法
@@ -2736,46 +2851,46 @@ def wechat_callback():
db.session.add(user)
db.session.commit()
# 更新 wechat_qr_sessions 状态,供前端轮询检测
print(f"🔍 [DEBUG] state={state}, state in wechat_qr_sessions: {state in wechat_qr_sessions}")
is_new_user = True
print(f"✅ 微信扫码自动创建新用户: {username}, openid: {openid}")
# 更新最后登录时间
user.update_last_seen()
# 设置session
session.permanent = True
session['user_id'] = user.id
session['username'] = user.username
session['logged_in'] = True
session['wechat_login'] = True # 标记是微信登录
# Flask-Login 登录
login_user(user, remember=True)
# 更新微信session状态供前端轮询检测
if state in wechat_qr_sessions:
session_item = wechat_qr_sessions[state]
mode = session_item.get('mode')
print(f"🔍 [DEBUG] session_item mode: {mode}, is_new_user: {is_new_user}")
# 不是绑定模式才更新为登录状态
if not mode:
new_status = 'register_success' if is_new_user else 'login_success'
session_item['status'] = new_status
session_item['user_info'] = {
'user_id': user.id,
'is_new_user': is_new_user
}
print(f"✅ [DEBUG] 更新 wechat_qr_sessions 状态: {new_status}, user_id: {user.id}")
else:
print(f"⚠️ [DEBUG] 跳过状态更新,因为 mode={mode}")
# 仅处理登录/注册流程,不处理绑定流程
if not session_item.get('mode'):
# 更新状态和用户信息
session_item['status'] = 'register_ready' if is_new_user else 'login_ready'
session_item['user_info'] = {'user_id': user.id}
print(f"✅ 微信扫码状态已更新: {session_item['status']}, user_id: {user.id}")
# 返回一个简单的成功页面(前端轮询会检测到状态变化)
return '''
<html>
<head><title>授权成功</title></head>
<body>
<h2>微信授权成功</h2>
<p>请返回原页面继续操作...</p>
<script>
// 尝试关闭窗口(如果是弹窗的话)
setTimeout(function() {
window.close();
}, 1000);
</script>
</body>
</html>
''', 200
# 直接跳转到首页
return redirect('/home')
except Exception as e:
print(f" [CALLBACK] 微信登录失败: {e}")
print(f"❌ 微信登录失败: {e}")
import traceback
print(f"❌ [CALLBACK] 错误堆栈:\n{traceback.format_exc()}")
traceback.print_exc()
db.session.rollback()
# 更新session状态为失败
if state in wechat_qr_sessions:
wechat_qr_sessions[state]['status'] = 'auth_failed'
wechat_qr_sessions[state]['error'] = str(e)
return redirect('/auth/signin?error=login_failed')
@@ -2789,16 +2904,16 @@ def login_with_wechat():
return jsonify({'success': False, 'error': 'session_id不能为空'}), 400
# 验证session
wechat_session = wechat_qr_sessions.get(session_id)
if not wechat_session:
session = wechat_qr_sessions.get(session_id)
if not session:
return jsonify({'success': False, 'error': '会话不存在或已过期'}), 400
# 检查session状态
if wechat_session['status'] not in ['login_success', 'register_success']:
if session['status'] not in ['login_ready', 'register_ready']:
return jsonify({'success': False, 'error': '会话状态无效'}), 400
# 检查是否有用户信息
user_info = wechat_session.get('user_info')
user_info = session.get('user_info')
if not user_info or not user_info.get('user_id'):
return jsonify({'success': False, 'error': '用户信息不完整'}), 400
@@ -2810,33 +2925,18 @@ def login_with_wechat():
# 更新最后登录时间
user.update_last_seen()
# 设置 Flask session
session.permanent = True
session['user_id'] = user.id
session['username'] = user.username
session['logged_in'] = True
session['wechat_login'] = True # 标记是微信登录
# Flask-Login 登录
login_user(user, remember=True)
# 判断是否为新用户
is_new_user = user_info.get('is_new_user', False)
# 清除 wechat_qr_sessions
# 清除session
del wechat_qr_sessions[session_id]
# 生成登录响应
response_data = {
'success': True,
'message': '注册成功' if is_new_user else '登录成功',
'isNewUser': is_new_user,
'message': '登录成功' if session['status'] == 'login_ready' else '注册并登录成功',
'user': {
'id': user.id,
'username': user.username,
'nickname': user.nickname or user.username,
'email': user.email,
'phone': user.phone,
'avatar_url': user.avatar_url,
'has_wechat': True,
'wechat_open_id': user.wechat_open_id,

View File

@@ -43,7 +43,6 @@
"match-sorter": "6.3.0",
"moment": "^2.29.1",
"nouislider": "15.0.0",
"posthog-js": "^1.281.0",
"react": "18.3.1",
"react-apexcharts": "^1.3.9",
"react-big-calendar": "^0.33.2",

View File

@@ -61,10 +61,6 @@ import NotificationTestTool from "components/NotificationTestTool";
import ScrollToTop from "components/ScrollToTop";
import { logger } from "utils/logger";
// PostHog Redux 集成
import { useDispatch } from 'react-redux';
import { initializePostHog } from "store/slices/posthogSlice";
/**
* ConnectionStatusBar 包装组件
* 需要在 NotificationProvider 内部使用,所以单独提取
@@ -112,13 +108,6 @@ function ConnectionStatusBarWrapper() {
function AppContent() {
const { colorMode } = useColorMode();
const dispatch = useDispatch();
// 🎯 PostHog Redux 初始化
useEffect(() => {
dispatch(initializePostHog());
logger.info('App', 'PostHog Redux 初始化已触发');
}, [dispatch]);
return (
<Box minH="100vh" bg={colorMode === 'dark' ? 'gray.800' : 'white'}>

View File

@@ -37,7 +37,6 @@ import VerificationCodeInput from './VerificationCodeInput';
import WechatRegister from './WechatRegister';
import { setCurrentUser } from '../../mocks/data/users';
import { logger } from '../../utils/logger';
import { useAuthEvents } from '../../hooks/useAuthEvents';
// 统一配置对象
const AUTH_CONFIG = {
@@ -87,12 +86,6 @@ export default function AuthFormContent() {
// 响应式布局配置
const isMobile = useBreakpointValue({ base: true, md: false });
// 事件追踪
const authEvents = useAuthEvents({
component: 'AuthFormContent',
isMobile: isMobile
});
const stackDirection = useBreakpointValue({ base: "column", md: "row" });
const stackSpacing = useBreakpointValue({ base: 4, md: 2 }); // ✅ 桌面端从32px减至8px更紧凑
@@ -114,16 +107,6 @@ export default function AuthFormContent() {
...prev,
[name]: value
}));
// 追踪用户开始填写手机号 (判断用户选择了手机登录方式)
if (name === 'phone' && value.length === 1 && !formData.phone) {
authEvents.trackPhoneLoginInitiated(value);
}
// 追踪验证码输入变化
if (name === 'verificationCode') {
authEvents.trackVerificationCodeInputChanged(value.length);
}
};
// 倒计时逻辑
@@ -160,11 +143,10 @@ export default function AuthFormContent() {
return;
}
if (!/^1[3-9]\d{9}$/.test(credential)) {
// 追踪手机号验证失败
authEvents.trackPhoneNumberValidated(credential, false, 'invalid_format');
authEvents.trackFormValidationError('phone', 'invalid_format', '请输入有效的手机号');
// 清理手机号格式字符(空格、横线、括号等)
const cleanedCredential = credential.replace(/[\s\-\(\)\+]/g, '');
if (!/^1[3-9]\d{9}$/.test(cleanedCredential)) {
toast({
title: "请输入有效的手机号",
status: "warning",
@@ -173,14 +155,11 @@ export default function AuthFormContent() {
return;
}
// 追踪手机号验证通过
authEvents.trackPhoneNumberValidated(credential, true);
try {
setSendingCode(true);
const requestData = {
credential: credential.trim(), // 添加 trim() 防止空格
credential: cleanedCredential, // 使用清理后的手机号
type: 'phone',
purpose: config.api.purpose
};
@@ -211,23 +190,15 @@ export default function AuthFormContent() {
}
if (response.ok && data.success) {
// 追踪验证码发送成功 (或重发)
const isResend = verificationCodeSent;
if (isResend) {
authEvents.trackVerificationCodeResent(credential, countdown > 0 ? 2 : 1);
} else {
authEvents.trackVerificationCodeSent(credential, config.api.purpose);
}
// ❌ 移除成功 toast静默处理
logger.info('AuthFormContent', '验证码发送成功', {
credential: credential.substring(0, 3) + '****' + credential.substring(7),
credential: cleanedCredential.substring(0, 3) + '****' + cleanedCredential.substring(7),
dev_code: data.dev_code
});
// ✅ 开发环境下在控制台显示验证码
if (data.dev_code) {
console.log(`%c✅ [验证码] ${credential} -> ${data.dev_code}`, 'color: #16a34a; font-weight: bold; font-size: 14px;');
console.log(`%c✅ [验证码] ${cleanedCredential} -> ${data.dev_code}`, 'color: #16a34a; font-weight: bold; font-size: 14px;');
}
setVerificationCodeSent(true);
@@ -236,15 +207,8 @@ export default function AuthFormContent() {
throw new Error(data.error || '发送验证码失败');
}
} catch (error) {
// 追踪验证码发送失败
authEvents.trackVerificationCodeSendFailed(credential, error);
authEvents.trackError('api', error.message || '发送验证码失败', {
endpoint: '/api/auth/send-verification-code',
phone_masked: credential.substring(0, 3) + '****' + credential.substring(7)
});
logger.api.error('POST', '/api/auth/send-verification-code', error, {
credential: credential.substring(0, 3) + '****' + credential.substring(7)
credential: cleanedCredential.substring(0, 3) + '****' + cleanedCredential.substring(7)
});
// ✅ 显示错误提示给用户
@@ -286,7 +250,10 @@ export default function AuthFormContent() {
return;
}
if (!/^1[3-9]\d{9}$/.test(phone)) {
// 清理手机号格式字符(空格、横线、括号等)
const cleanedPhone = phone.replace(/[\s\-\(\)\+]/g, '');
if (!/^1[3-9]\d{9}$/.test(cleanedPhone)) {
toast({
title: "请输入有效的手机号",
status: "warning",
@@ -295,18 +262,15 @@ export default function AuthFormContent() {
return;
}
// 追踪验证码提交
authEvents.trackVerificationCodeSubmitted(phone);
// 构建请求体
const requestBody = {
credential: phone.trim(), // 添加 trim() 防止空格
credential: cleanedPhone, // 使用清理后的手机号
verification_code: verificationCode.trim(), // 添加 trim() 防止空格
login_type: 'phone',
};
logger.api.request('POST', '/api/auth/login-with-code', {
credential: phone.substring(0, 3) + '****' + phone.substring(7),
credential: cleanedPhone.substring(0, 3) + '****' + cleanedPhone.substring(7),
verification_code: verificationCode.substring(0, 2) + '****',
login_type: 'phone'
});
@@ -352,9 +316,6 @@ export default function AuthFormContent() {
// 更新session
await checkSession();
// 追踪登录成功并识别用户
authEvents.trackLoginSuccess(data.user, 'phone', data.isNewUser);
// ✅ 保留登录成功 toast关键操作提示
toast({
title: data.isNewUser ? '注册成功' : '登录成功',
@@ -374,8 +335,6 @@ export default function AuthFormContent() {
setTimeout(() => {
setCurrentPhone(phone);
setShowNicknamePrompt(true);
// 追踪昵称设置引导显示
authEvents.trackNicknamePromptShown(phone);
}, config.features.successDelay);
} else {
// 已有用户,直接登录成功
@@ -396,15 +355,6 @@ export default function AuthFormContent() {
}
} catch (error) {
const { phone, verificationCode } = formData;
// 追踪登录失败
const errorType = error.message.includes('网络') ? 'network' :
error.message.includes('服务器') ? 'api' : 'validation';
authEvents.trackLoginFailed('phone', errorType, error.message, {
phone_masked: phone ? phone.substring(0, 3) + '****' + phone.substring(7) : 'N/A',
has_verification_code: !!verificationCode
});
logger.error('AuthFormContent', 'handleSubmit', error, {
phone: phone ? phone.substring(0, 3) + '****' + phone.substring(7) : 'N/A',
hasVerificationCode: !!verificationCode
@@ -432,9 +382,6 @@ export default function AuthFormContent() {
// 微信H5登录处理
const handleWechatH5Login = async () => {
// 追踪用户选择微信登录
authEvents.trackWechatLoginInitiated('icon_button');
try {
// 1. 构建回调URL
const redirectUrl = `${window.location.origin}/home/wechat-callback`;
@@ -455,19 +402,11 @@ export default function AuthFormContent() {
throw new Error('获取授权链接失败');
}
// 追踪微信H5跳转
authEvents.trackWechatH5Redirect();
// 4. 延迟跳转,让用户看到提示
setTimeout(() => {
window.location.href = response.auth_url;
}, 500);
} catch (error) {
// 追踪跳转失败
authEvents.trackError('api', error.message || '获取微信授权链接失败', {
context: 'wechat_h5_redirect'
});
logger.error('AuthFormContent', 'handleWechatH5Login', error);
toast({
title: "跳转失败",
@@ -479,17 +418,14 @@ export default function AuthFormContent() {
}
};
// 组件载时追踪页面浏览
// 组件载时清理
useEffect(() => {
isMountedRef.current = true;
// 追踪登录页面浏览
authEvents.trackLoginPageViewed();
return () => {
isMountedRef.current = false;
};
}, [authEvents]);
}, []);
return (
<>
@@ -549,7 +485,6 @@ export default function AuthFormContent() {
color="blue.500"
textDecoration="underline"
_hover={{ color: "blue.600" }}
onClick={authEvents.trackUserAgreementClicked}
>
用户协议
</ChakraLink>
@@ -562,7 +497,6 @@ export default function AuthFormContent() {
color="blue.500"
textDecoration="underline"
_hover={{ color: "blue.600" }}
onClick={authEvents.trackPrivacyPolicyClicked}
>
隐私政策
</ChakraLink>
@@ -590,30 +524,8 @@ export default function AuthFormContent() {
<AlertDialogHeader fontSize="lg" fontWeight="bold">完善个人信息</AlertDialogHeader>
<AlertDialogBody>您已成功注册是否前往个人资料设置昵称和其他信息</AlertDialogBody>
<AlertDialogFooter>
<Button
ref={cancelRef}
onClick={() => {
authEvents.trackNicknamePromptSkipped();
setShowNicknamePrompt(false);
handleLoginSuccess({ phone: currentPhone });
}}
>
稍后再说
</Button>
<Button
colorScheme="green"
onClick={() => {
authEvents.trackNicknamePromptAccepted();
setShowNicknamePrompt(false);
handleLoginSuccess({ phone: currentPhone });
setTimeout(() => {
navigate('/home/profile');
}, 300);
}}
ml={3}
>
去设置
</Button>
<Button ref={cancelRef} onClick={() => { setShowNicknamePrompt(false); handleLoginSuccess({ phone: currentPhone }); }}>稍后再说</Button>
<Button colorScheme="green" onClick={() => { setShowNicknamePrompt(false); handleLoginSuccess({ phone: currentPhone }); setTimeout(() => { navigate('/home/profile'); }, 300); }} ml={3}>去设置</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>

View File

@@ -18,7 +18,6 @@ import { authService, WECHAT_STATUS, STATUS_MESSAGES } from "../../services/auth
import { useAuthModal } from "../../contexts/AuthModalContext";
import { useAuth } from "../../contexts/AuthContext";
import { logger } from "../../utils/logger";
import { useAuthEvents } from "../../hooks/useAuthEvents";
// 配置常量
const POLL_INTERVAL = 2000; // 轮询间隔2秒
@@ -36,6 +35,8 @@ const getStatusColor = (status) => {
case WECHAT_STATUS.EXPIRED: return "orange.600"; // ✅ 橙色文字
case WECHAT_STATUS.LOGIN_SUCCESS: return "green.600"; // ✅ 绿色文字
case WECHAT_STATUS.REGISTER_SUCCESS: return "green.600";
case WECHAT_STATUS.AUTH_DENIED: return "red.600"; // ✅ 红色文字
case WECHAT_STATUS.AUTH_FAILED: return "red.600"; // ✅ 红色文字
default: return "gray.600";
}
};
@@ -52,12 +53,6 @@ export default function WechatRegister() {
const { closeModal } = useAuthModal();
const { refreshSession } = useAuth();
// 事件追踪
const authEvents = useAuthEvents({
component: 'WechatRegister',
isMobile: false // WechatRegister 只在桌面端显示
});
// 状态管理
const [wechatAuthUrl, setWechatAuthUrl] = useState("");
const [wechatSessionId, setWechatSessionId] = useState("");
@@ -126,20 +121,9 @@ export default function WechatRegister() {
*/
const handleLoginSuccess = useCallback(async (sessionId, status) => {
try {
logger.info('WechatRegister', '开始调用登录接口', { sessionId: sessionId.substring(0, 8) + '...', status });
const response = await authService.loginWithWechat(sessionId);
logger.info('WechatRegister', '登录接口返回', { success: response?.success, hasUser: !!response?.user });
if (response?.success) {
// 追踪微信登录成功
authEvents.trackLoginSuccess(
response.user,
'wechat',
response.isNewUser || false
);
// Session cookie 会自动管理,不需要手动存储
// 如果后端返回了 token可以选择性存储兼容旧方式
if (response.token) {
@@ -162,16 +146,10 @@ export default function WechatRegister() {
throw new Error(response?.error || '登录失败');
}
} catch (error) {
// 追踪微信登录失败
authEvents.trackLoginFailed('wechat', 'api', error.message || '登录失败', {
session_id: sessionId?.substring(0, 8) + '...',
status: status
});
logger.error('WechatRegister', 'handleLoginSuccess', error, { sessionId });
showError("登录失败", error.message || "请重试");
}
}, [showSuccess, showError, closeModal, refreshSession, authEvents]);
}, [showSuccess, showError, closeModal, refreshSession]);
/**
* 检查微信扫码状态
@@ -202,30 +180,13 @@ export default function WechatRegister() {
const { status } = response;
logger.debug('WechatRegister', '微信状态', { status });
logger.debug('WechatRegister', '检测到微信状态', {
sessionId: wechatSessionId.substring(0, 8) + '...',
status,
userInfo: response.user_info
});
// 组件卸载后不再更新状态
if (!isMountedRef.current) return;
// 追踪状态变化
if (wechatStatus !== status) {
authEvents.trackWechatStatusChanged(currentSessionId, wechatStatus, status);
// 特别追踪扫码事件
if (status === WECHAT_STATUS.SCANNED) {
authEvents.trackWechatQRScanned(currentSessionId);
}
}
setWechatStatus(status);
// 处理成功状态
if (status === WECHAT_STATUS.LOGIN_SUCCESS || status === WECHAT_STATUS.REGISTER_SUCCESS) {
logger.info('WechatRegister', '检测到登录成功状态,停止轮询', { status });
clearTimers(); // 停止轮询
sessionIdRef.current = null; // 清理 sessionId
@@ -233,9 +194,6 @@ export default function WechatRegister() {
}
// 处理过期状态
else if (status === WECHAT_STATUS.EXPIRED) {
// 追踪二维码过期
authEvents.trackWechatQRExpired(currentSessionId, QR_CODE_TIMEOUT / 1000);
clearTimers();
sessionIdRef.current = null; // 清理 sessionId
if (isMountedRef.current) {
@@ -248,6 +206,33 @@ export default function WechatRegister() {
});
}
}
// 处理用户拒绝授权
else if (status === WECHAT_STATUS.AUTH_DENIED) {
clearTimers();
if (isMountedRef.current) {
toast({
title: "授权已取消",
description: "您已取消微信授权登录",
status: "warning",
duration: 3000,
isClosable: true,
});
}
}
// 处理授权失败
else if (status === WECHAT_STATUS.AUTH_FAILED) {
clearTimers();
if (isMountedRef.current) {
const errorMsg = response.error || "授权过程出现错误";
toast({
title: "授权失败",
description: errorMsg,
status: "error",
duration: 5000,
isClosable: true,
});
}
}
} catch (error) {
logger.error('WechatRegister', 'checkWechatStatus', error, { sessionId: currentSessionId });
// 轮询过程中的错误不显示给用户,避免频繁提示
@@ -301,16 +286,6 @@ export default function WechatRegister() {
try {
setIsLoading(true);
// 追踪用户选择微信登录(首次或刷新)
const isRefresh = Boolean(wechatSessionId);
if (isRefresh) {
const oldSessionId = wechatSessionId;
authEvents.trackWechatLoginInitiated('qr_refresh');
// 稍后会在成功时追踪刷新事件
} else {
authEvents.trackWechatLoginInitiated('qr_area');
}
// 生产环境:调用真实 API
const response = await authService.getWechatQRCode();
@@ -326,13 +301,6 @@ export default function WechatRegister() {
throw new Error(response.message || '获取二维码失败');
}
// 追踪二维码显示 (首次或刷新)
if (isRefresh) {
authEvents.trackWechatQRRefreshed(wechatSessionId, response.data.session_id);
} else {
authEvents.trackWechatQRDisplayed(response.data.session_id, response.data.auth_url);
}
// 同时更新 ref 和 state确保轮询能立即读取到最新值
sessionIdRef.current = response.data.session_id;
setWechatAuthUrl(response.data.auth_url);
@@ -347,11 +315,6 @@ export default function WechatRegister() {
// 启动轮询检查扫码状态
startPolling();
} catch (error) {
// 追踪获取二维码失败
authEvents.trackError('api', error.message || '获取二维码失败', {
context: 'get_wechat_qrcode'
});
logger.error('WechatRegister', 'getWechatQRCode', error);
if (isMountedRef.current) {
showError("获取微信授权失败", error.message || "请稍后重试");
@@ -361,7 +324,7 @@ export default function WechatRegister() {
setIsLoading(false);
}
}
}, [startPolling, showError, wechatSessionId, authEvents]);
}, [startPolling, showError]);
/**
* 安全的按钮点击处理,确保所有错误都被捕获,防止被 ErrorBoundary 捕获

View File

@@ -1,83 +0,0 @@
// src/components/PostHogProvider.js
import React, { useEffect, useState } from 'react';
import { initPostHog } from '../lib/posthog';
import { usePageTracking } from '../hooks/usePageTracking';
/**
* PostHog Provider Component
* Initializes PostHog SDK and provides automatic page view tracking
*
* Usage:
* <PostHogProvider>
* <App />
* </PostHogProvider>
*/
export const PostHogProvider = ({ children }) => {
const [isInitialized, setIsInitialized] = useState(false);
// Initialize PostHog once when component mounts
useEffect(() => {
// Only run in browser
if (typeof window === 'undefined') return;
// Initialize PostHog
initPostHog();
setIsInitialized(true);
// Log initialization
if (process.env.NODE_ENV === 'development') {
console.log('✅ PostHogProvider initialized');
}
}, []);
// Automatically track page views
usePageTracking({
enabled: isInitialized,
getProperties: (location) => {
// Add custom properties based on route
const properties = {};
// Identify page type based on path
if (location.pathname === '/home' || location.pathname === '/home/') {
properties.page_type = 'landing';
} else if (location.pathname.startsWith('/home/center')) {
properties.page_type = 'dashboard';
} else if (location.pathname.startsWith('/auth/')) {
properties.page_type = 'auth';
} else if (location.pathname.startsWith('/community')) {
properties.page_type = 'feature';
properties.feature_name = 'community';
} else if (location.pathname.startsWith('/concepts')) {
properties.page_type = 'feature';
properties.feature_name = 'concepts';
} else if (location.pathname.startsWith('/stocks')) {
properties.page_type = 'feature';
properties.feature_name = 'stocks';
} else if (location.pathname.startsWith('/limit-analyse')) {
properties.page_type = 'feature';
properties.feature_name = 'limit_analyse';
} else if (location.pathname.startsWith('/trading-simulation')) {
properties.page_type = 'feature';
properties.feature_name = 'trading_simulation';
} else if (location.pathname.startsWith('/company')) {
properties.page_type = 'detail';
properties.content_type = 'company';
} else if (location.pathname.startsWith('/event-detail')) {
properties.page_type = 'detail';
properties.content_type = 'event';
}
return properties;
},
});
// Don't render children until PostHog is initialized
// This prevents tracking events before SDK is ready
if (!isInitialized) {
return children; // Or return a loading spinner
}
return <>{children}</>;
};
export default PostHogProvider;

View File

@@ -1,463 +0,0 @@
// src/hooks/useAuthEvents.js
// 认证事件追踪 Hook
import { useCallback } from 'react';
import { usePostHogTrack, usePostHogUser } from './usePostHogRedux';
import { ACTIVATION_EVENTS } from '../lib/constants';
import { logger } from '../utils/logger';
/**
* 认证事件追踪 Hook
* 提供登录/注册流程中所有关键节点的事件追踪功能
*
* 用法示例:
*
* ```jsx
* import { useAuthEvents } from 'hooks/useAuthEvents';
*
* function AuthComponent() {
* const {
* trackLoginPageViewed,
* trackPhoneLoginInitiated,
* trackVerificationCodeSent,
* trackLoginSuccess
* } = useAuthEvents();
*
* useEffect(() => {
* trackLoginPageViewed();
* }, [trackLoginPageViewed]);
*
* const handlePhoneFocus = () => {
* trackPhoneLoginInitiated(formData.phone);
* };
* }
* ```
*
* @param {Object} options - 配置选项
* @param {string} options.component - 组件名称 ('AuthFormContent' | 'WechatRegister')
* @param {boolean} options.isMobile - 是否为移动设备
* @returns {Object} 事件追踪处理函数集合
*/
export const useAuthEvents = ({ component = 'AuthFormContent', isMobile = false } = {}) => {
const { track } = usePostHogTrack();
const { identify } = usePostHogUser();
// 通用事件属性
const getBaseProperties = useCallback(() => ({
component,
device: isMobile ? 'mobile' : 'desktop',
timestamp: new Date().toISOString(),
}), [component, isMobile]);
// ==================== 页面浏览事件 ====================
/**
* 追踪登录页面浏览
*/
const trackLoginPageViewed = useCallback(() => {
track(ACTIVATION_EVENTS.LOGIN_PAGE_VIEWED, getBaseProperties());
logger.debug('useAuthEvents', '📄 Login Page Viewed', { component });
}, [track, getBaseProperties, component]);
// ==================== 登录方式选择 ====================
/**
* 追踪用户开始手机号登录
* @param {string} phone - 手机号(可选,用于判断是否已填写)
*/
const trackPhoneLoginInitiated = useCallback((phone = '') => {
track(ACTIVATION_EVENTS.PHONE_LOGIN_INITIATED, {
...getBaseProperties(),
has_phone: Boolean(phone),
});
logger.debug('useAuthEvents', '📱 Phone Login Initiated', { hasPhone: Boolean(phone) });
}, [track, getBaseProperties]);
/**
* 追踪用户选择微信登录
* @param {string} source - 触发来源 ('qr_area' | 'icon_button' | 'h5_redirect')
*/
const trackWechatLoginInitiated = useCallback((source = 'qr_area') => {
track(ACTIVATION_EVENTS.WECHAT_LOGIN_INITIATED, {
...getBaseProperties(),
source,
});
logger.debug('useAuthEvents', '💬 WeChat Login Initiated', { source });
}, [track, getBaseProperties]);
// ==================== 手机验证码流程 ====================
/**
* 追踪验证码发送成功
* @param {string} phone - 手机号
* @param {string} purpose - 发送目的 ('login' | 'register')
*/
const trackVerificationCodeSent = useCallback((phone, purpose = 'login') => {
track(ACTIVATION_EVENTS.VERIFICATION_CODE_SENT, {
...getBaseProperties(),
phone_masked: phone ? phone.substring(0, 3) + '****' + phone.substring(7) : '',
purpose,
});
logger.debug('useAuthEvents', '✉️ Verification Code Sent', { phone: phone?.substring(0, 3) + '****', purpose });
}, [track, getBaseProperties]);
/**
* 追踪验证码发送失败
* @param {string} phone - 手机号
* @param {Error|string} error - 错误对象或错误消息
*/
const trackVerificationCodeSendFailed = useCallback((phone, error) => {
const errorMessage = typeof error === 'string' ? error : error?.message || 'Unknown error';
track(ACTIVATION_EVENTS.VERIFICATION_CODE_SEND_FAILED, {
...getBaseProperties(),
phone_masked: phone ? phone.substring(0, 3) + '****' + phone.substring(7) : '',
error_message: errorMessage,
error_type: 'send_code_failed',
});
logger.debug('useAuthEvents', '❌ Verification Code Send Failed', { error: errorMessage });
}, [track, getBaseProperties]);
/**
* 追踪用户输入验证码
* @param {number} codeLength - 当前输入的验证码长度
*/
const trackVerificationCodeInputChanged = useCallback((codeLength) => {
track(ACTIVATION_EVENTS.VERIFICATION_CODE_INPUT_CHANGED, {
...getBaseProperties(),
code_length: codeLength,
is_complete: codeLength >= 6,
});
logger.debug('useAuthEvents', '⌨️ Verification Code Input Changed', { codeLength });
}, [track, getBaseProperties]);
/**
* 追踪重新发送验证码
* @param {string} phone - 手机号
* @param {number} attemptCount - 第几次重发(可选)
*/
const trackVerificationCodeResent = useCallback((phone, attemptCount = 1) => {
track(ACTIVATION_EVENTS.VERIFICATION_CODE_RESENT, {
...getBaseProperties(),
phone_masked: phone ? phone.substring(0, 3) + '****' + phone.substring(7) : '',
attempt_count: attemptCount,
});
logger.debug('useAuthEvents', '🔄 Verification Code Resent', { attempt: attemptCount });
}, [track, getBaseProperties]);
/**
* 追踪手机号验证结果
* @param {string} phone - 手机号
* @param {boolean} isValid - 是否有效
* @param {string} errorType - 错误类型(可选)
*/
const trackPhoneNumberValidated = useCallback((phone, isValid, errorType = '') => {
track(ACTIVATION_EVENTS.PHONE_NUMBER_VALIDATED, {
...getBaseProperties(),
phone_masked: phone ? phone.substring(0, 3) + '****' + phone.substring(7) : '',
is_valid: isValid,
error_type: errorType,
});
logger.debug('useAuthEvents', '✓ Phone Number Validated', { isValid, errorType });
}, [track, getBaseProperties]);
/**
* 追踪验证码提交
* @param {string} phone - 手机号
*/
const trackVerificationCodeSubmitted = useCallback((phone) => {
track(ACTIVATION_EVENTS.VERIFICATION_CODE_SUBMITTED, {
...getBaseProperties(),
phone_masked: phone ? phone.substring(0, 3) + '****' + phone.substring(7) : '',
});
logger.debug('useAuthEvents', '📤 Verification Code Submitted');
}, [track, getBaseProperties]);
// ==================== 微信登录流程 ====================
/**
* 追踪微信二维码显示
* @param {string} sessionId - 会话ID
* @param {string} authUrl - 授权URL
*/
const trackWechatQRDisplayed = useCallback((sessionId, authUrl = '') => {
track(ACTIVATION_EVENTS.WECHAT_QR_DISPLAYED, {
...getBaseProperties(),
session_id: sessionId?.substring(0, 8) + '...',
has_auth_url: Boolean(authUrl),
});
logger.debug('useAuthEvents', '🔲 WeChat QR Code Displayed', { sessionId: sessionId?.substring(0, 8) });
}, [track, getBaseProperties]);
/**
* 追踪微信二维码被扫描
* @param {string} sessionId - 会话ID
*/
const trackWechatQRScanned = useCallback((sessionId) => {
track(ACTIVATION_EVENTS.WECHAT_QR_SCANNED, {
...getBaseProperties(),
session_id: sessionId?.substring(0, 8) + '...',
});
logger.debug('useAuthEvents', '📱 WeChat QR Code Scanned', { sessionId: sessionId?.substring(0, 8) });
}, [track, getBaseProperties]);
/**
* 追踪微信二维码过期
* @param {string} sessionId - 会话ID
* @param {number} timeElapsed - 经过时间(秒)
*/
const trackWechatQRExpired = useCallback((sessionId, timeElapsed = 0) => {
track(ACTIVATION_EVENTS.WECHAT_QR_EXPIRED, {
...getBaseProperties(),
session_id: sessionId?.substring(0, 8) + '...',
time_elapsed: timeElapsed,
});
logger.debug('useAuthEvents', '⏰ WeChat QR Code Expired', { sessionId: sessionId?.substring(0, 8), timeElapsed });
}, [track, getBaseProperties]);
/**
* 追踪刷新微信二维码
* @param {string} oldSessionId - 旧会话ID
* @param {string} newSessionId - 新会话ID
*/
const trackWechatQRRefreshed = useCallback((oldSessionId, newSessionId) => {
track(ACTIVATION_EVENTS.WECHAT_QR_REFRESHED, {
...getBaseProperties(),
old_session_id: oldSessionId?.substring(0, 8) + '...',
new_session_id: newSessionId?.substring(0, 8) + '...',
});
logger.debug('useAuthEvents', '🔄 WeChat QR Code Refreshed');
}, [track, getBaseProperties]);
/**
* 追踪微信登录状态变化
* @param {string} sessionId - 会话ID
* @param {string} oldStatus - 旧状态
* @param {string} newStatus - 新状态
*/
const trackWechatStatusChanged = useCallback((sessionId, oldStatus, newStatus) => {
track(ACTIVATION_EVENTS.WECHAT_STATUS_CHANGED, {
...getBaseProperties(),
session_id: sessionId?.substring(0, 8) + '...',
old_status: oldStatus,
new_status: newStatus,
});
logger.debug('useAuthEvents', '🔄 WeChat Status Changed', { oldStatus, newStatus });
}, [track, getBaseProperties]);
/**
* 追踪移动端跳转微信H5授权
*/
const trackWechatH5Redirect = useCallback(() => {
track(ACTIVATION_EVENTS.WECHAT_H5_REDIRECT, getBaseProperties());
logger.debug('useAuthEvents', '🔗 WeChat H5 Redirect');
}, [track, getBaseProperties]);
// ==================== 登录/注册结果 ====================
/**
* 追踪登录成功并识别用户
* @param {Object} user - 用户对象
* @param {string} loginMethod - 登录方式 ('wechat' | 'phone')
* @param {boolean} isNewUser - 是否为新注册用户
*/
const trackLoginSuccess = useCallback((user, loginMethod, isNewUser = false) => {
// 追踪登录成功事件
const eventName = isNewUser ? ACTIVATION_EVENTS.USER_SIGNED_UP : ACTIVATION_EVENTS.USER_LOGGED_IN;
track(eventName, {
...getBaseProperties(),
user_id: user.id,
login_method: loginMethod,
is_new_user: isNewUser,
has_nickname: Boolean(user.nickname),
has_email: Boolean(user.email),
has_wechat: Boolean(user.wechat_open_id),
});
// 识别用户(关联 PostHog 用户)
identify(user.id.toString(), {
phone: user.phone,
username: user.username,
nickname: user.nickname,
email: user.email,
login_method: loginMethod,
is_new_user: isNewUser,
registration_date: user.created_at,
last_login: new Date().toISOString(),
has_wechat: Boolean(user.wechat_open_id),
wechat_open_id: user.wechat_open_id,
wechat_union_id: user.wechat_union_id,
});
logger.debug('useAuthEvents', `${isNewUser ? 'User Signed Up' : 'User Logged In'}`, {
userId: user.id,
method: loginMethod,
isNewUser,
});
}, [track, identify, getBaseProperties]);
/**
* 追踪登录失败
* @param {string} loginMethod - 登录方式 ('wechat' | 'phone')
* @param {string} errorType - 错误类型
* @param {string} errorMessage - 错误消息
* @param {Object} context - 额外上下文信息
*/
const trackLoginFailed = useCallback((loginMethod, errorType, errorMessage, context = {}) => {
track(ACTIVATION_EVENTS.LOGIN_FAILED, {
...getBaseProperties(),
login_method: loginMethod,
error_type: errorType,
error_message: errorMessage,
...context,
});
logger.debug('useAuthEvents', '❌ Login Failed', { method: loginMethod, errorType, errorMessage });
}, [track, getBaseProperties]);
// ==================== 用户行为细节 ====================
/**
* 追踪表单字段聚焦
* @param {string} fieldName - 字段名称 ('phone' | 'verificationCode')
*/
const trackFormFocused = useCallback((fieldName) => {
track(ACTIVATION_EVENTS.AUTH_FORM_FOCUSED, {
...getBaseProperties(),
field_name: fieldName,
});
logger.debug('useAuthEvents', '🎯 Form Field Focused', { fieldName });
}, [track, getBaseProperties]);
/**
* 追踪表单验证错误
* @param {string} fieldName - 字段名称
* @param {string} errorType - 错误类型
* @param {string} errorMessage - 错误消息
*/
const trackFormValidationError = useCallback((fieldName, errorType, errorMessage) => {
track(ACTIVATION_EVENTS.AUTH_FORM_VALIDATION_ERROR, {
...getBaseProperties(),
field_name: fieldName,
error_type: errorType,
error_message: errorMessage,
});
logger.debug('useAuthEvents', '⚠️ Form Validation Error', { fieldName, errorType });
}, [track, getBaseProperties]);
/**
* 追踪昵称设置引导弹窗显示
* @param {string} phone - 手机号
*/
const trackNicknamePromptShown = useCallback((phone) => {
track(ACTIVATION_EVENTS.NICKNAME_PROMPT_SHOWN, {
...getBaseProperties(),
phone_masked: phone ? phone.substring(0, 3) + '****' + phone.substring(7) : '',
});
logger.debug('useAuthEvents', '💬 Nickname Prompt Shown');
}, [track, getBaseProperties]);
/**
* 追踪用户接受设置昵称
*/
const trackNicknamePromptAccepted = useCallback(() => {
track(ACTIVATION_EVENTS.NICKNAME_PROMPT_ACCEPTED, getBaseProperties());
logger.debug('useAuthEvents', '✅ Nickname Prompt Accepted');
}, [track, getBaseProperties]);
/**
* 追踪用户跳过设置昵称
*/
const trackNicknamePromptSkipped = useCallback(() => {
track(ACTIVATION_EVENTS.NICKNAME_PROMPT_SKIPPED, getBaseProperties());
logger.debug('useAuthEvents', '⏭️ Nickname Prompt Skipped');
}, [track, getBaseProperties]);
/**
* 追踪用户点击用户协议链接
*/
const trackUserAgreementClicked = useCallback(() => {
track(ACTIVATION_EVENTS.USER_AGREEMENT_LINK_CLICKED, getBaseProperties());
logger.debug('useAuthEvents', '📄 User Agreement Link Clicked');
}, [track, getBaseProperties]);
/**
* 追踪用户点击隐私政策链接
*/
const trackPrivacyPolicyClicked = useCallback(() => {
track(ACTIVATION_EVENTS.PRIVACY_POLICY_LINK_CLICKED, getBaseProperties());
logger.debug('useAuthEvents', '📄 Privacy Policy Link Clicked');
}, [track, getBaseProperties]);
// ==================== 错误追踪 ====================
/**
* 追踪通用错误
* @param {string} errorType - 错误类型 ('network' | 'api' | 'validation' | 'session')
* @param {string} errorMessage - 错误消息
* @param {Object} context - 错误上下文
*/
const trackError = useCallback((errorType, errorMessage, context = {}) => {
const eventMap = {
network: ACTIVATION_EVENTS.NETWORK_ERROR_OCCURRED,
api: ACTIVATION_EVENTS.API_ERROR_OCCURRED,
session: ACTIVATION_EVENTS.SESSION_EXPIRED,
default: ACTIVATION_EVENTS.LOGIN_ERROR_OCCURRED,
};
const eventName = eventMap[errorType] || eventMap.default;
track(eventName, {
...getBaseProperties(),
error_type: errorType,
error_message: errorMessage,
...context,
});
logger.error('useAuthEvents', `${errorType} Error`, { errorMessage, context });
}, [track, getBaseProperties]);
// ==================== 返回接口 ====================
return {
// 页面浏览
trackLoginPageViewed,
// 登录方式选择
trackPhoneLoginInitiated,
trackWechatLoginInitiated,
// 手机验证码流程
trackVerificationCodeSent,
trackVerificationCodeSendFailed,
trackVerificationCodeInputChanged,
trackVerificationCodeResent,
trackPhoneNumberValidated,
trackVerificationCodeSubmitted,
// 微信登录流程
trackWechatQRDisplayed,
trackWechatQRScanned,
trackWechatQRExpired,
trackWechatQRRefreshed,
trackWechatStatusChanged,
trackWechatH5Redirect,
// 登录/注册结果
trackLoginSuccess,
trackLoginFailed,
// 用户行为
trackFormFocused,
trackFormValidationError,
trackNicknamePromptShown,
trackNicknamePromptAccepted,
trackNicknamePromptSkipped,
trackUserAgreementClicked,
trackPrivacyPolicyClicked,
// 错误追踪
trackError,
};
};
export default useAuthEvents;

View File

@@ -1,55 +0,0 @@
// src/hooks/usePageTracking.js
import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';
import posthog from 'posthog-js';
/**
* Custom hook for automatic page view tracking with PostHog
*
* @param {Object} options - Configuration options
* @param {boolean} options.enabled - Whether tracking is enabled
* @param {Function} options.getProperties - Function to get custom properties for each page view
*/
export const usePageTracking = ({ enabled = true, getProperties } = {}) => {
const location = useLocation();
const previousPathRef = useRef('');
useEffect(() => {
if (!enabled) return;
// Get the current path
const currentPath = location.pathname + location.search;
// Skip if it's the same page (prevents duplicate tracking)
if (previousPathRef.current === currentPath) {
return;
}
// Update the previous path
previousPathRef.current = currentPath;
// Get custom properties if function provided
const customProperties = getProperties ? getProperties(location) : {};
// Track page view with PostHog
if (posthog && posthog.__loaded) {
posthog.capture('$pageview', {
$current_url: window.location.href,
path: location.pathname,
search: location.search,
hash: location.hash,
...customProperties,
});
// Log in development
if (process.env.NODE_ENV === 'development') {
console.log('📊 PostHog $pageview:', {
path: location.pathname,
...customProperties,
});
}
}
}, [location, enabled, getProperties]);
};
export default usePageTracking;

View File

@@ -1,101 +0,0 @@
// src/hooks/usePostHog.js
import { useCallback } from 'react';
import {
getPostHog,
trackEvent,
trackPageView,
identifyUser,
setUserProperties,
resetUser,
optIn,
optOut,
hasOptedOut,
getFeatureFlag,
isFeatureEnabled,
} from '../lib/posthog';
/**
* Custom hook to access PostHog functionality
* Provides convenient methods for tracking events and managing user sessions
*
* @returns {object} PostHog methods
*/
export const usePostHog = () => {
// Get PostHog instance
const posthog = getPostHog();
// Track custom event
const track = useCallback((eventName, properties = {}) => {
trackEvent(eventName, properties);
}, []);
// Track page view
const trackPage = useCallback((pagePath, properties = {}) => {
trackPageView(pagePath, properties);
}, []);
// Identify user
const identify = useCallback((userId, userProperties = {}) => {
identifyUser(userId, userProperties);
}, []);
// Set user properties
const setProperties = useCallback((properties) => {
setUserProperties(properties);
}, []);
// Reset user session (logout)
const reset = useCallback(() => {
resetUser();
}, []);
// Opt out of tracking
const optOutTracking = useCallback(() => {
optOut();
}, []);
// Opt in to tracking
const optInTracking = useCallback(() => {
optIn();
}, []);
// Check if user has opted out
const isOptedOut = useCallback(() => {
return hasOptedOut();
}, []);
// Get feature flag value
const getFlag = useCallback((flagKey, defaultValue = false) => {
return getFeatureFlag(flagKey, defaultValue);
}, []);
// Check if feature is enabled
const isEnabled = useCallback((flagKey) => {
return isFeatureEnabled(flagKey);
}, []);
return {
// Core PostHog instance
posthog,
// Tracking methods
track,
trackPage,
// User management
identify,
setProperties,
reset,
// Privacy controls
optOut: optOutTracking,
optIn: optInTracking,
isOptedOut,
// Feature flags
getFlag,
isEnabled,
};
};
export default usePostHog;

View File

@@ -1,272 +0,0 @@
// src/hooks/usePostHogRedux.js
import { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
trackEvent,
identifyUser,
resetUser,
optIn,
optOut,
selectPostHog,
selectIsInitialized,
selectUser,
selectFeatureFlags,
selectFeatureFlag,
selectIsOptedOut,
selectStats,
flushCachedEvents,
} from '../store/slices/posthogSlice';
import { trackPageView } from '../lib/posthog';
/**
* PostHog Redux Hook
* 提供便捷的 PostHog 功能访问接口
*
* 用法示例:
*
* ```jsx
* import { usePostHogRedux } from 'hooks/usePostHogRedux';
* import { RETENTION_EVENTS } from 'lib/constants';
*
* function MyComponent() {
* const { track, identify, user, isInitialized } = usePostHogRedux();
*
* const handleClick = () => {
* track(RETENTION_EVENTS.NEWS_ARTICLE_CLICKED, {
* article_id: '123',
* article_title: '标题',
* });
* };
*
* if (!isInitialized) {
* return <div>正在加载...</div>;
* }
*
* return (
* <div>
* <button onClick={handleClick}>点击追踪</button>
* {user && <p>当前用户: {user.userId}</p>}
* </div>
* );
* }
* ```
*/
export const usePostHogRedux = () => {
const dispatch = useDispatch();
// Selectors
const posthog = useSelector(selectPostHog);
const isInitialized = useSelector(selectIsInitialized);
const user = useSelector(selectUser);
const featureFlags = useSelector(selectFeatureFlags);
const stats = useSelector(selectStats);
// ==================== 追踪事件 ====================
/**
* 追踪自定义事件
* @param {string} eventName - 事件名称(建议使用 constants.js 中的常量)
* @param {object} properties - 事件属性
*/
const track = useCallback(
(eventName, properties = {}) => {
dispatch(trackEvent({ eventName, properties }));
},
[dispatch]
);
/**
* 追踪页面浏览
* @param {string} pagePath - 页面路径
* @param {object} properties - 页面属性
*/
const trackPage = useCallback(
(pagePath, properties = {}) => {
trackPageView(pagePath, properties);
},
[]
);
// ==================== 用户管理 ====================
/**
* 识别用户(登录后调用)
* @param {string} userId - 用户 ID
* @param {object} userProperties - 用户属性
*/
const identify = useCallback(
(userId, userProperties = {}) => {
dispatch(identifyUser({ userId, userProperties }));
},
[dispatch]
);
/**
* 重置用户会话(登出时调用)
*/
const reset = useCallback(() => {
dispatch(resetUser());
}, [dispatch]);
// ==================== 隐私控制 ====================
/**
* 用户选择退出追踪
*/
const optOutTracking = useCallback(() => {
dispatch(optOut());
}, [dispatch]);
/**
* 用户选择加入追踪
*/
const optInTracking = useCallback(() => {
dispatch(optIn());
}, [dispatch]);
/**
* 检查用户是否已退出追踪
*/
const isOptedOut = selectIsOptedOut();
// ==================== Feature Flags ====================
/**
* 获取特定 Feature Flag 的值
* @param {string} flagKey - Flag 键名
* @returns {any} Flag 值
*/
const getFlag = useCallback(
(flagKey) => {
return selectFeatureFlag(flagKey)({ posthog });
},
[posthog]
);
/**
* 检查 Feature Flag 是否启用
* @param {string} flagKey - Flag 键名
* @returns {boolean}
*/
const isEnabled = useCallback(
(flagKey) => {
const value = getFlag(flagKey);
return Boolean(value);
},
[getFlag]
);
// ==================== 离线事件管理 ====================
/**
* 刷新缓存的离线事件
*/
const flushEvents = useCallback(() => {
dispatch(flushCachedEvents());
}, [dispatch]);
// ==================== 返回接口 ====================
return {
// 状态
isInitialized,
user,
featureFlags,
stats,
posthog, // 完整的 PostHog 状态
// 追踪方法
track,
trackPage,
// 用户管理
identify,
reset,
// 隐私控制
optOut: optOutTracking,
optIn: optInTracking,
isOptedOut,
// Feature Flags
getFlag,
isEnabled,
// 离线事件
flushEvents,
};
};
// ==================== 便捷 Hooks ====================
/**
* 仅获取追踪功能的 Hook性能优化
*/
export const usePostHogTrack = () => {
const dispatch = useDispatch();
const track = useCallback(
(eventName, properties = {}) => {
dispatch(trackEvent({ eventName, properties }));
},
[dispatch]
);
return { track };
};
/**
* 仅获取 Feature Flags 的 Hook性能优化
*/
export const usePostHogFlags = () => {
const featureFlags = useSelector(selectFeatureFlags);
const posthog = useSelector(selectPostHog);
const getFlag = useCallback(
(flagKey) => {
return selectFeatureFlag(flagKey)({ posthog });
},
[posthog]
);
const isEnabled = useCallback(
(flagKey) => {
const value = getFlag(flagKey);
return Boolean(value);
},
[getFlag]
);
return {
featureFlags,
getFlag,
isEnabled,
};
};
/**
* 获取用户信息的 Hook性能优化
*/
export const usePostHogUser = () => {
const user = useSelector(selectUser);
const dispatch = useDispatch();
const identify = useCallback(
(userId, userProperties = {}) => {
dispatch(identifyUser({ userId, userProperties }));
},
[dispatch]
);
const reset = useCallback(() => {
dispatch(resetUser());
}, [dispatch]);
return {
user,
identify,
reset,
};
};
export default usePostHogRedux;

View File

@@ -1,381 +0,0 @@
// src/lib/constants.js
// PostHog Event Names and Constants
// Organized by AARRR Framework (Acquisition, Activation, Retention, Referral, Revenue)
// ============================================================================
// ACQUISITION (获客) - Landing page, marketing website events
// ============================================================================
export const ACQUISITION_EVENTS = {
// Landing page
LANDING_PAGE_VIEWED: 'Landing Page Viewed',
CTA_BUTTON_CLICKED: 'CTA Button Clicked',
FEATURE_CARD_VIEWED: 'Feature Card Viewed',
FEATURE_VIDEO_PLAYED: 'Feature Video Played',
// Pricing page
PRICING_PAGE_VIEWED: 'Pricing Page Viewed',
PRICING_PLAN_VIEWED: 'Pricing Plan Viewed',
PRICING_PLAN_SELECTED: 'Pricing Plan Selected',
// How to use page
HOW_TO_USE_PAGE_VIEWED: 'How To Use Page Viewed',
TUTORIAL_STEP_VIEWED: 'Tutorial Step Viewed',
// Roadmap page
ROADMAP_PAGE_VIEWED: 'Roadmap Page Viewed',
ROADMAP_ITEM_CLICKED: 'Roadmap Item Clicked',
};
// ============================================================================
// ACTIVATION (激活) - Sign up, login, onboarding
// ============================================================================
export const ACTIVATION_EVENTS = {
// Auth pages
LOGIN_PAGE_VIEWED: 'Login Page Viewed',
SIGNUP_PAGE_VIEWED: 'Signup Page Viewed',
// Login method selection
PHONE_LOGIN_INITIATED: 'Phone Login Initiated', // 用户开始填写手机号
WECHAT_LOGIN_INITIATED: 'WeChat Login Initiated', // 用户选择微信登录
// Phone verification code flow
VERIFICATION_CODE_SENT: 'Verification Code Sent',
VERIFICATION_CODE_SEND_FAILED: 'Verification Code Send Failed',
VERIFICATION_CODE_INPUT_CHANGED: 'Verification Code Input Changed',
VERIFICATION_CODE_RESENT: 'Verification Code Resent',
VERIFICATION_CODE_SUBMITTED: 'Verification Code Submitted',
PHONE_NUMBER_VALIDATED: 'Phone Number Validated',
// WeChat login flow
WECHAT_QR_DISPLAYED: 'WeChat QR Code Displayed',
WECHAT_QR_SCANNED: 'WeChat QR Code Scanned',
WECHAT_QR_EXPIRED: 'WeChat QR Code Expired',
WECHAT_QR_REFRESHED: 'WeChat QR Code Refreshed',
WECHAT_STATUS_CHANGED: 'WeChat Status Changed',
WECHAT_H5_REDIRECT: 'WeChat H5 Redirect', // 移动端跳转微信H5
// Login/Signup results
USER_LOGGED_IN: 'User Logged In',
USER_SIGNED_UP: 'User Signed Up',
LOGIN_FAILED: 'Login Failed',
SIGNUP_FAILED: 'Signup Failed',
// User behavior details
AUTH_FORM_FOCUSED: 'Auth Form Field Focused',
AUTH_FORM_VALIDATION_ERROR: 'Auth Form Validation Error',
NICKNAME_PROMPT_SHOWN: 'Nickname Prompt Shown',
NICKNAME_PROMPT_ACCEPTED: 'Nickname Prompt Accepted',
NICKNAME_PROMPT_SKIPPED: 'Nickname Prompt Skipped',
USER_AGREEMENT_LINK_CLICKED: 'User Agreement Link Clicked',
PRIVACY_POLICY_LINK_CLICKED: 'Privacy Policy Link Clicked',
// Error tracking
LOGIN_ERROR_OCCURRED: 'Login Error Occurred',
NETWORK_ERROR_OCCURRED: 'Network Error Occurred',
SESSION_EXPIRED: 'Session Expired',
API_ERROR_OCCURRED: 'API Error Occurred',
// Onboarding
ONBOARDING_STARTED: 'Onboarding Started',
ONBOARDING_STEP_COMPLETED: 'Onboarding Step Completed',
ONBOARDING_COMPLETED: 'Onboarding Completed',
ONBOARDING_SKIPPED: 'Onboarding Skipped',
// User agreement (deprecated, use link clicked events instead)
USER_AGREEMENT_VIEWED: 'User Agreement Viewed',
USER_AGREEMENT_ACCEPTED: 'User Agreement Accepted',
PRIVACY_POLICY_VIEWED: 'Privacy Policy Viewed',
PRIVACY_POLICY_ACCEPTED: 'Privacy Policy Accepted',
};
// ============================================================================
// RETENTION (留存) - Core product usage, feature engagement
// ============================================================================
export const RETENTION_EVENTS = {
// Dashboard
DASHBOARD_VIEWED: 'Dashboard Viewed',
DASHBOARD_CENTER_VIEWED: 'Dashboard Center Viewed',
FUNCTION_CARD_CLICKED: 'Function Card Clicked', // Core功能卡片点击
// Navigation
TOP_NAV_CLICKED: 'Top Navigation Clicked',
SIDEBAR_MENU_CLICKED: 'Sidebar Menu Clicked',
MENU_ITEM_CLICKED: 'Menu Item Clicked',
BREADCRUMB_CLICKED: 'Breadcrumb Clicked',
// Search
SEARCH_INITIATED: 'Search Initiated',
SEARCH_QUERY_SUBMITTED: 'Search Query Submitted',
SEARCH_RESULT_CLICKED: 'Search Result Clicked',
SEARCH_NO_RESULTS: 'Search No Results',
SEARCH_FILTER_APPLIED: 'Search Filter Applied',
// News/Community (新闻催化分析)
COMMUNITY_PAGE_VIEWED: 'Community Page Viewed',
NEWS_LIST_VIEWED: 'News List Viewed',
NEWS_ARTICLE_CLICKED: 'News Article Clicked',
NEWS_DETAIL_OPENED: 'News Detail Opened',
NEWS_TAB_CLICKED: 'News Tab Clicked', // 相关标的, 相关概念, etc.
NEWS_FILTER_APPLIED: 'News Filter Applied',
NEWS_SORTED: 'News Sorted',
// Concept Center (概念中心)
CONCEPT_PAGE_VIEWED: 'Concept Page Viewed',
CONCEPT_LIST_VIEWED: 'Concept List Viewed',
CONCEPT_CLICKED: 'Concept Clicked',
CONCEPT_DETAIL_VIEWED: 'Concept Detail Viewed',
CONCEPT_STOCK_CLICKED: 'Concept Stock Clicked',
// Stock Center (个股中心)
STOCK_OVERVIEW_VIEWED: 'Stock Overview Page Viewed',
STOCK_LIST_VIEWED: 'Stock List Viewed',
STOCK_SEARCHED: 'Stock Searched',
STOCK_CLICKED: 'Stock Clicked',
STOCK_DETAIL_VIEWED: 'Stock Detail Viewed',
STOCK_TAB_CLICKED: 'Stock Tab Clicked', // 公司概览, 股票行情, 财务全景, 盈利预测
// Company Details
COMPANY_OVERVIEW_VIEWED: 'Company Overview Viewed',
COMPANY_FINANCIALS_VIEWED: 'Company Financials Viewed',
COMPANY_FORECAST_VIEWED: 'Company Forecast Viewed',
COMPANY_MARKET_DATA_VIEWED: 'Company Market Data Viewed',
// Limit Analysis (涨停分析)
LIMIT_ANALYSE_PAGE_VIEWED: 'Limit Analyse Page Viewed',
LIMIT_BOARD_CLICKED: 'Limit Board Clicked',
LIMIT_SECTOR_EXPANDED: 'Limit Sector Expanded',
LIMIT_SECTOR_ANALYSIS_VIEWED: 'Limit Sector Analysis Viewed',
LIMIT_STOCK_CLICKED: 'Limit Stock Clicked',
// Trading Simulation (模拟盘交易)
TRADING_SIMULATION_ENTERED: 'Trading Simulation Entered',
SIMULATION_ORDER_PLACED: 'Simulation Order Placed',
SIMULATION_HOLDINGS_VIEWED: 'Simulation Holdings Viewed',
SIMULATION_HISTORY_VIEWED: 'Simulation History Viewed',
SIMULATION_STOCK_SEARCHED: 'Simulation Stock Searched',
// Event Details
EVENT_DETAIL_VIEWED: 'Event Detail Viewed',
EVENT_ANALYSIS_VIEWED: 'Event Analysis Viewed',
EVENT_TIMELINE_CLICKED: 'Event Timeline Clicked',
// Profile & Settings
PROFILE_PAGE_VIEWED: 'Profile Page Viewed',
PROFILE_UPDATED: 'Profile Updated',
SETTINGS_PAGE_VIEWED: 'Settings Page Viewed',
SETTINGS_CHANGED: 'Settings Changed',
// Subscription Management
SUBSCRIPTION_PAGE_VIEWED: 'Subscription Page Viewed',
UPGRADE_PLAN_CLICKED: 'Upgrade Plan Clicked',
};
// ============================================================================
// REFERRAL (推荐) - Sharing, inviting
// ============================================================================
export const REFERRAL_EVENTS = {
// Sharing
SHARE_BUTTON_CLICKED: 'Share Button Clicked',
CONTENT_SHARED: 'Content Shared',
SHARE_LINK_GENERATED: 'Share Link Generated',
SHARE_MODAL_OPENED: 'Share Modal Opened',
SHARE_MODAL_CLOSED: 'Share Modal Closed',
// Referral
REFERRAL_PAGE_VIEWED: 'Referral Page Viewed',
REFERRAL_LINK_COPIED: 'Referral Link Copied',
REFERRAL_INVITE_SENT: 'Referral Invite Sent',
};
// ============================================================================
// REVENUE (收入) - Payment, subscription, monetization
// ============================================================================
export const REVENUE_EVENTS = {
// Paywall
PAYWALL_SHOWN: 'Paywall Shown',
PAYWALL_DISMISSED: 'Paywall Dismissed',
PAYWALL_UPGRADE_CLICKED: 'Paywall Upgrade Clicked',
// Payment
PAYMENT_PAGE_VIEWED: 'Payment Page Viewed',
PAYMENT_METHOD_SELECTED: 'Payment Method Selected',
PAYMENT_INITIATED: 'Payment Initiated',
PAYMENT_SUCCESSFUL: 'Payment Successful',
PAYMENT_FAILED: 'Payment Failed',
// Subscription
SUBSCRIPTION_CREATED: 'Subscription Created',
SUBSCRIPTION_RENEWED: 'Subscription Renewed',
SUBSCRIPTION_UPGRADED: 'Subscription Upgraded',
SUBSCRIPTION_DOWNGRADED: 'Subscription Downgraded',
SUBSCRIPTION_CANCELLED: 'Subscription Cancelled',
SUBSCRIPTION_EXPIRED: 'Subscription Expired',
// Refund
REFUND_REQUESTED: 'Refund Requested',
REFUND_PROCESSED: 'Refund Processed',
};
// ============================================================================
// SPECIAL EVENTS (特殊事件) - Errors, performance, chatbot
// ============================================================================
export const SPECIAL_EVENTS = {
// Errors
ERROR_OCCURRED: 'Error Occurred',
API_ERROR: 'API Error',
NOT_FOUND_404: '404 Not Found',
// Performance
PAGE_LOAD_TIME: 'Page Load Time',
API_RESPONSE_TIME: 'API Response Time',
// Chatbot (Dify)
CHATBOT_OPENED: 'Chatbot Opened',
CHATBOT_CLOSED: 'Chatbot Closed',
CHATBOT_MESSAGE_SENT: 'Chatbot Message Sent',
CHATBOT_MESSAGE_RECEIVED: 'Chatbot Message Received',
CHATBOT_FEEDBACK_PROVIDED: 'Chatbot Feedback Provided',
// Scroll depth
SCROLL_DEPTH_25: 'Scroll Depth 25%',
SCROLL_DEPTH_50: 'Scroll Depth 50%',
SCROLL_DEPTH_75: 'Scroll Depth 75%',
SCROLL_DEPTH_100: 'Scroll Depth 100%',
// Session
SESSION_STARTED: 'Session Started',
SESSION_ENDED: 'Session Ended',
USER_IDLE: 'User Idle',
USER_RETURNED: 'User Returned',
// Logout
USER_LOGGED_OUT: 'User Logged Out',
};
// ============================================================================
// USER PROPERTIES (用户属性)
// ============================================================================
export const USER_PROPERTIES = {
// Identity
EMAIL: 'email',
USERNAME: 'username',
USER_ID: 'user_id',
PHONE: 'phone',
// Subscription
SUBSCRIPTION_TIER: 'subscription_tier', // 'free', 'pro', 'enterprise'
SUBSCRIPTION_STATUS: 'subscription_status', // 'active', 'expired', 'cancelled'
SUBSCRIPTION_START_DATE: 'subscription_start_date',
SUBSCRIPTION_END_DATE: 'subscription_end_date',
// Engagement
REGISTRATION_DATE: 'registration_date',
LAST_LOGIN: 'last_login',
LOGIN_COUNT: 'login_count',
DAYS_SINCE_REGISTRATION: 'days_since_registration',
LIFETIME_VALUE: 'lifetime_value',
// Preferences
PREFERRED_LANGUAGE: 'preferred_language',
THEME_PREFERENCE: 'theme_preference', // 'light', 'dark'
NOTIFICATION_ENABLED: 'notification_enabled',
// Attribution
UTM_SOURCE: 'utm_source',
UTM_MEDIUM: 'utm_medium',
UTM_CAMPAIGN: 'utm_campaign',
REFERRER: 'referrer',
// Behavioral
FAVORITE_FEATURES: 'favorite_features',
MOST_VISITED_PAGES: 'most_visited_pages',
TOTAL_SESSIONS: 'total_sessions',
AVERAGE_SESSION_DURATION: 'average_session_duration',
};
// ============================================================================
// SUBSCRIPTION TIERS (订阅等级)
// ============================================================================
export const SUBSCRIPTION_TIERS = {
FREE: 'free',
PRO: 'pro',
ENTERPRISE: 'enterprise',
};
// ============================================================================
// PAGE TYPES (页面类型)
// ============================================================================
export const PAGE_TYPES = {
LANDING: 'landing',
DASHBOARD: 'dashboard',
FEATURE: 'feature',
DETAIL: 'detail',
AUTH: 'auth',
SETTINGS: 'settings',
PAYMENT: 'payment',
ERROR: 'error',
};
// ============================================================================
// CONTENT TYPES (内容类型)
// ============================================================================
export const CONTENT_TYPES = {
NEWS: 'news',
STOCK: 'stock',
CONCEPT: 'concept',
ANALYSIS: 'analysis',
EVENT: 'event',
COMPANY: 'company',
};
// ============================================================================
// SHARE CHANNELS (分享渠道)
// ============================================================================
export const SHARE_CHANNELS = {
WECHAT: 'wechat',
LINK: 'link',
QRCODE: 'qrcode',
EMAIL: 'email',
COPY: 'copy',
};
// ============================================================================
// LOGIN METHODS (登录方式)
// ============================================================================
export const LOGIN_METHODS = {
WECHAT: 'wechat',
EMAIL: 'email',
PHONE: 'phone',
USERNAME: 'username',
};
// ============================================================================
// PAYMENT METHODS (支付方式)
// ============================================================================
export const PAYMENT_METHODS = {
WECHAT_PAY: 'wechat_pay',
ALIPAY: 'alipay',
CREDIT_CARD: 'credit_card',
};
// ============================================================================
// Helper function to get all events
// ============================================================================
export const getAllEvents = () => {
return {
...ACQUISITION_EVENTS,
...ACTIVATION_EVENTS,
...RETENTION_EVENTS,
...REFERRAL_EVENTS,
...REVENUE_EVENTS,
...SPECIAL_EVENTS,
};
};
// ============================================================================
// Helper function to validate event name
// ============================================================================
export const isValidEvent = (eventName) => {
const allEvents = getAllEvents();
return Object.values(allEvents).includes(eventName);
};

View File

@@ -1,271 +0,0 @@
// src/lib/posthog.js
import posthog from 'posthog-js';
/**
* Initialize PostHog SDK
* Should be called once when the app starts
*/
export const initPostHog = () => {
// Only run in browser environment
if (typeof window === 'undefined') return;
const apiKey = process.env.REACT_APP_POSTHOG_KEY;
const apiHost = process.env.REACT_APP_POSTHOG_HOST || 'https://app.posthog.com';
if (!apiKey) {
console.warn('⚠️ PostHog API key not found. Analytics will be disabled.');
return;
}
try {
posthog.init(apiKey, {
api_host: apiHost,
// Pageview tracking - manual control for better accuracy
capture_pageview: false, // We'll manually capture with custom properties
capture_pageleave: true, // Auto-capture when user leaves page
// Session Recording Configuration
session_recording: {
enabled: process.env.REACT_APP_ENABLE_SESSION_RECORDING === 'true',
// Privacy: Mask sensitive input fields
maskInputOptions: {
password: true,
email: true,
phone: true,
'data-sensitive': true, // Custom attribute for sensitive fields
},
// Record canvas for charts/graphs
recordCanvas: true,
// Network payload capture (useful for debugging API issues)
networkPayloadCapture: {
recordHeaders: true,
recordBody: true,
// Don't record sensitive endpoints
urlBlocklist: [
'/api/auth/session',
'/api/auth/login',
'/api/auth/register',
'/api/payment',
],
},
},
// Performance optimization
batch_size: 10, // Send events in batches of 10
batch_interval_ms: 3000, // Or every 3 seconds
// Privacy settings
respect_dnt: true, // Respect Do Not Track browser setting
persistence: 'localStorage+cookie', // Use both for reliability
// Feature flags (for A/B testing)
bootstrap: {
featureFlags: {},
},
// Autocapture settings
autocapture: {
// Automatically capture clicks on buttons, links, etc.
dom_event_allowlist: ['click', 'submit', 'change'],
// Capture additional element properties
capture_copied_text: false, // Don't capture copied text (privacy)
},
// Development debugging
loaded: (posthogInstance) => {
if (process.env.NODE_ENV === 'development') {
console.log('✅ PostHog initialized successfully');
posthogInstance.debug(); // Enable debug mode in development
}
},
});
console.log('📊 PostHog Analytics initialized');
} catch (error) {
console.error('❌ PostHog initialization failed:', error);
}
};
/**
* Get PostHog instance
* @returns {object} PostHog instance
*/
export const getPostHog = () => {
return posthog;
};
/**
* Identify user with PostHog
* Call this after successful login/registration
*
* @param {string} userId - Unique user identifier
* @param {object} userProperties - User properties (email, name, subscription_tier, etc.)
*/
export const identifyUser = (userId, userProperties = {}) => {
if (!userId) {
console.warn('⚠️ Cannot identify user: userId is required');
return;
}
try {
posthog.identify(userId, {
email: userProperties.email,
username: userProperties.username,
subscription_tier: userProperties.subscription_tier || 'free',
role: userProperties.role,
registration_date: userProperties.registration_date,
last_login: new Date().toISOString(),
...userProperties,
});
console.log('👤 User identified:', userId);
} catch (error) {
console.error('❌ User identification failed:', error);
}
};
/**
* Update user properties
* Use this to update user attributes without re-identifying
*
* @param {object} properties - Properties to update
*/
export const setUserProperties = (properties) => {
try {
posthog.people.set(properties);
console.log('📝 User properties updated');
} catch (error) {
console.error('❌ Failed to update user properties:', error);
}
};
/**
* Track custom event
*
* @param {string} eventName - Name of the event
* @param {object} properties - Event properties
*/
export const trackEvent = (eventName, properties = {}) => {
try {
posthog.capture(eventName, {
...properties,
timestamp: new Date().toISOString(),
});
if (process.env.NODE_ENV === 'development') {
console.log('📍 Event tracked:', eventName, properties);
}
} catch (error) {
console.error('❌ Event tracking failed:', error);
}
};
/**
* Track page view
*
* @param {string} pagePath - Current page path
* @param {object} properties - Additional properties
*/
export const trackPageView = (pagePath, properties = {}) => {
try {
posthog.capture('$pageview', {
$current_url: window.location.href,
page_path: pagePath,
page_title: document.title,
referrer: document.referrer,
...properties,
});
if (process.env.NODE_ENV === 'development') {
console.log('📄 Page view tracked:', pagePath);
}
} catch (error) {
console.error('❌ Page view tracking failed:', error);
}
};
/**
* Reset user session
* Call this on logout
*/
export const resetUser = () => {
try {
posthog.reset();
console.log('🔄 User session reset');
} catch (error) {
console.error('❌ Session reset failed:', error);
}
};
/**
* User opt-out from tracking
*/
export const optOut = () => {
try {
posthog.opt_out_capturing();
console.log('🚫 User opted out of tracking');
} catch (error) {
console.error('❌ Opt-out failed:', error);
}
};
/**
* User opt-in to tracking
*/
export const optIn = () => {
try {
posthog.opt_in_capturing();
console.log('✅ User opted in to tracking');
} catch (error) {
console.error('❌ Opt-in failed:', error);
}
};
/**
* Check if user has opted out
* @returns {boolean}
*/
export const hasOptedOut = () => {
try {
return posthog.has_opted_out_capturing();
} catch (error) {
console.error('❌ Failed to check opt-out status:', error);
return false;
}
};
/**
* Get feature flag value
* @param {string} flagKey - Feature flag key
* @param {any} defaultValue - Default value if flag not found
* @returns {any} Feature flag value
*/
export const getFeatureFlag = (flagKey, defaultValue = false) => {
try {
return posthog.getFeatureFlag(flagKey) || defaultValue;
} catch (error) {
console.error('❌ Failed to get feature flag:', error);
return defaultValue;
}
};
/**
* Check if feature flag is enabled
* @param {string} flagKey - Feature flag key
* @returns {boolean}
*/
export const isFeatureEnabled = (flagKey) => {
try {
return posthog.isFeatureEnabled(flagKey);
} catch (error) {
console.error('❌ Failed to check feature flag:', error);
return false;
}
};
export default posthog;

View File

@@ -147,6 +147,8 @@ export const WECHAT_STATUS = {
LOGIN_SUCCESS: 'authorized', // ✅ 与后端保持一致,统一使用 'authorized'
REGISTER_SUCCESS: 'authorized', // ✅ 与后端保持一致,统一使用 'authorized'
EXPIRED: 'expired',
AUTH_DENIED: 'auth_denied', // 用户拒绝授权
AUTH_FAILED: 'auth_failed', // 授权失败
};
/**
@@ -157,6 +159,8 @@ export const STATUS_MESSAGES = {
[WECHAT_STATUS.SCANNED]: '扫码成功,请在手机上确认',
[WECHAT_STATUS.AUTHORIZED]: '授权成功,正在登录...',
[WECHAT_STATUS.EXPIRED]: '二维码已过期',
[WECHAT_STATUS.AUTH_DENIED]: '用户取消授权',
[WECHAT_STATUS.AUTH_FAILED]: '授权失败,请重试',
};
export default authService;

View File

@@ -1,25 +1,18 @@
// src/store/index.js
import { configureStore } from '@reduxjs/toolkit';
import communityDataReducer from './slices/communityDataSlice';
import posthogReducer from './slices/posthogSlice';
import posthogMiddleware from './middleware/posthogMiddleware';
export const store = configureStore({
reducer: {
communityData: communityDataReducer,
posthog: posthogReducer, // ✅ PostHog Redux 状态管理
communityData: communityDataReducer
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
// 忽略这些 action types 的序列化检查
ignoredActions: [
'communityData/fetchPopularKeywords/fulfilled',
'communityData/fetchHotEvents/fulfilled',
'posthog/trackEvent/fulfilled', // ✅ PostHog 事件追踪
],
ignoredActions: ['communityData/fetchPopularKeywords/fulfilled', 'communityData/fetchHotEvents/fulfilled'],
},
}).concat(posthogMiddleware), // ✅ PostHog 自动追踪中间件
}),
});
export default store;

View File

@@ -1,281 +0,0 @@
// src/store/middleware/posthogMiddleware.js
import { trackPageView } from '../../lib/posthog';
import { trackEvent } from '../slices/posthogSlice';
import { logger } from '../../utils/logger';
import {
ACTIVATION_EVENTS,
RETENTION_EVENTS,
SPECIAL_EVENTS,
REVENUE_EVENTS,
} from '../../lib/constants';
// ==================== 自动追踪规则配置 ====================
/**
* Action 到 PostHog 事件的映射
* 当这些 Redux actions 被 dispatch 时,自动追踪对应的 PostHog 事件
*/
const ACTION_TO_EVENT_MAP = {
// ==================== 登录/登出 ====================
'auth/login/fulfilled': {
event: ACTIVATION_EVENTS.USER_LOGGED_IN,
getProperties: (action) => ({
login_method: action.payload?.login_method || 'unknown',
user_id: action.payload?.user?.id,
}),
},
'auth/logout': {
event: SPECIAL_EVENTS.USER_LOGGED_OUT,
getProperties: () => ({}),
},
'auth/wechatLogin/fulfilled': {
event: ACTIVATION_EVENTS.USER_LOGGED_IN,
getProperties: (action) => ({
login_method: 'wechat',
user_id: action.payload?.user?.id,
}),
},
// ==================== Community/新闻模块 ====================
'communityData/fetchHotEvents/fulfilled': {
event: RETENTION_EVENTS.NEWS_LIST_VIEWED,
getProperties: (action) => ({
event_count: action.payload?.length || 0,
source: 'community_page',
}),
},
'communityData/fetchPopularKeywords/fulfilled': {
event: RETENTION_EVENTS.COMMUNITY_PAGE_VIEWED,
getProperties: () => ({
feature: 'popular_keywords',
}),
},
// ==================== 搜索 ====================
'search/submit': {
event: RETENTION_EVENTS.SEARCH_QUERY_SUBMITTED,
getProperties: (action) => ({
query: action.payload?.query,
category: action.payload?.category,
}),
},
'search/filterApplied': {
event: RETENTION_EVENTS.SEARCH_FILTER_APPLIED,
getProperties: (action) => ({
filter_type: action.payload?.filterType,
filter_value: action.payload?.filterValue,
}),
},
// ==================== 支付/订阅 ====================
'payment/initiated': {
event: REVENUE_EVENTS.PAYMENT_INITIATED,
getProperties: (action) => ({
amount: action.payload?.amount,
payment_method: action.payload?.method,
subscription_tier: action.payload?.tier,
}),
},
'payment/success': {
event: REVENUE_EVENTS.PAYMENT_SUCCESSFUL,
getProperties: (action) => ({
amount: action.payload?.amount,
transaction_id: action.payload?.transactionId,
subscription_tier: action.payload?.tier,
}),
},
'subscription/upgraded': {
event: REVENUE_EVENTS.SUBSCRIPTION_UPGRADED,
getProperties: (action) => ({
from_tier: action.payload?.fromTier,
to_tier: action.payload?.toTier,
}),
},
// ==================== 错误追踪 ====================
'error/occurred': {
event: SPECIAL_EVENTS.ERROR_OCCURRED,
getProperties: (action) => ({
error_type: action.payload?.errorType,
error_message: action.payload?.message,
stack_trace: action.payload?.stack,
}),
},
'api/error': {
event: SPECIAL_EVENTS.API_ERROR,
getProperties: (action) => ({
endpoint: action.payload?.endpoint,
status_code: action.payload?.statusCode,
error_message: action.payload?.message,
}),
},
};
// ==================== 页面路由追踪配置 ====================
/**
* 路由变化的 action type根据不同路由库调整
*/
const LOCATION_CHANGE_ACTIONS = [
'@@router/LOCATION_CHANGE', // Redux-first router
'router/navigate', // 自定义路由 action
];
/**
* 根据路径识别页面类型
*/
const getPageTypeFromPath = (pathname) => {
if (pathname === '/home' || pathname === '/') {
return { page_type: 'landing' };
} else if (pathname.startsWith('/auth/')) {
return { page_type: 'auth' };
} else if (pathname.startsWith('/community')) {
return { page_type: 'feature', feature_name: 'community' };
} else if (pathname.startsWith('/concepts')) {
return { page_type: 'feature', feature_name: 'concepts' };
} else if (pathname.startsWith('/stocks')) {
return { page_type: 'feature', feature_name: 'stocks' };
} else if (pathname.startsWith('/limit-analyse')) {
return { page_type: 'feature', feature_name: 'limit_analyse' };
} else if (pathname.startsWith('/trading-simulation')) {
return { page_type: 'feature', feature_name: 'trading_simulation' };
} else if (pathname.startsWith('/company')) {
return { page_type: 'detail', content_type: 'company' };
} else if (pathname.startsWith('/event-detail')) {
return { page_type: 'detail', content_type: 'event' };
}
return { page_type: 'other' };
};
// ==================== 中间件实现 ====================
/**
* PostHog Middleware
* 自动拦截 Redux actions 并追踪对应的 PostHog 事件
*/
const posthogMiddleware = (store) => (next) => (action) => {
// 先执行 action
const result = next(action);
// 获取当前 PostHog 状态
const state = store.getState();
const posthogState = state.posthog;
// 如果 PostHog 未初始化,不追踪(事件会被缓存到 eventQueue
if (!posthogState?.isInitialized) {
return result;
}
try {
// ==================== 1. 自动追踪特定 actions ====================
if (ACTION_TO_EVENT_MAP[action.type]) {
const { event, getProperties } = ACTION_TO_EVENT_MAP[action.type];
const properties = getProperties(action);
// 通过 dispatch 追踪事件(会走 Redux 状态管理)
store.dispatch(trackEvent({ eventName: event, properties }));
logger.debug('PostHog Middleware', `自动追踪事件: ${event}`, properties);
}
// ==================== 2. 路由变化追踪 ====================
if (LOCATION_CHANGE_ACTIONS.includes(action.type)) {
const location = action.payload?.location || action.payload;
const pathname = location?.pathname || window.location.pathname;
const search = location?.search || window.location.search;
// 识别页面类型
const pageProperties = getPageTypeFromPath(pathname);
// 追踪页面浏览
trackPageView(pathname, {
...pageProperties,
page_path: pathname,
page_search: search,
page_title: document.title,
referrer: document.referrer,
});
logger.debug('PostHog Middleware', `页面浏览追踪: ${pathname}`, pageProperties);
}
// ==================== 3. 离线事件处理 ====================
// 检测网络状态变化
if (action.type === 'network/online') {
// 恢复在线时,刷新缓存的事件
const { eventQueue } = posthogState;
if (eventQueue && eventQueue.length > 0) {
logger.info('PostHog Middleware', `网络恢复,刷新 ${eventQueue.length} 个缓存事件`);
// 这里可以 dispatch flushCachedEvents但为了避免循环依赖直接在 slice 中处理
}
}
// ==================== 4. 性能追踪(可选) ====================
// 追踪耗时较长的 actions
const startTime = action.meta?.startTime;
if (startTime) {
const duration = Date.now() - startTime;
if (duration > 1000) {
// 超过 1 秒的操作
store.dispatch(trackEvent({
eventName: SPECIAL_EVENTS.PAGE_LOAD_TIME,
properties: {
action_type: action.type,
duration_ms: duration,
is_slow: true,
},
}));
}
}
} catch (error) {
logger.error('PostHog Middleware', '追踪失败', error, { actionType: action.type });
}
return result;
};
// ==================== 工具函数 ====================
/**
* 创建带性能追踪的 action creator
* 用法: dispatch(withTiming(someAction(payload)))
*/
export const withTiming = (action) => ({
...action,
meta: {
...action.meta,
startTime: Date.now(),
},
});
/**
* 手动触发页面浏览追踪
* 用于非路由跳转的场景(如 Modal、Tab 切换)
*/
export const trackModalView = (modalName, properties = {}) => (dispatch) => {
dispatch(trackEvent({
eventName: '$pageview',
properties: {
modal_name: modalName,
page_type: 'modal',
...properties,
},
}));
};
/**
* 追踪 Tab 切换
*/
export const trackTabChange = (tabName, properties = {}) => (dispatch) => {
dispatch(trackEvent({
eventName: RETENTION_EVENTS.NEWS_TAB_CLICKED,
properties: {
tab_name: tabName,
...properties,
},
}));
};
// ==================== Export ====================
export default posthogMiddleware;

View File

@@ -1,299 +0,0 @@
// src/store/slices/posthogSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import {
initPostHog,
identifyUser as posthogIdentifyUser,
resetUser as posthogResetUser,
trackEvent as posthogTrackEvent,
getFeatureFlag as posthogGetFeatureFlag,
optIn as posthogOptIn,
optOut as posthogOptOut,
hasOptedOut as posthogHasOptedOut
} from '../../lib/posthog';
import { logger } from '../../utils/logger';
// ==================== Initial State ====================
const initialState = {
// 初始化状态
isInitialized: false,
initError: null,
// 用户信息
user: null,
// 事件队列(用于离线缓存)
eventQueue: [],
// Feature Flags
featureFlags: {},
// 配置
config: {
apiKey: process.env.REACT_APP_POSTHOG_KEY || null,
apiHost: process.env.REACT_APP_POSTHOG_HOST || 'https://app.posthog.com',
sessionRecording: process.env.REACT_APP_ENABLE_SESSION_RECORDING === 'true',
},
// 统计
stats: {
totalEvents: 0,
lastEventTime: null,
},
};
// ==================== Async Thunks ====================
/**
* 初始化 PostHog SDK
*/
export const initializePostHog = createAsyncThunk(
'posthog/initialize',
async (_, { getState, rejectWithValue }) => {
try {
const { config } = getState().posthog;
if (!config.apiKey) {
logger.warn('PostHog', '未配置 API Key分析功能将被禁用');
return { isInitialized: false, warning: 'No API Key' };
}
// 调用 PostHog SDK 初始化
initPostHog();
logger.info('PostHog', 'Redux 初始化成功');
return { isInitialized: true };
} catch (error) {
logger.error('PostHog', '初始化失败', error);
return rejectWithValue(error.message);
}
}
);
/**
* 识别用户
*/
export const identifyUser = createAsyncThunk(
'posthog/identifyUser',
async ({ userId, userProperties }, { rejectWithValue }) => {
try {
posthogIdentifyUser(userId, userProperties);
logger.info('PostHog', '用户已识别', { userId });
return { userId, userProperties };
} catch (error) {
logger.error('PostHog', '用户识别失败', error);
return rejectWithValue(error.message);
}
}
);
/**
* 重置用户会话(登出)
*/
export const resetUser = createAsyncThunk(
'posthog/resetUser',
async (_, { rejectWithValue }) => {
try {
posthogResetUser();
logger.info('PostHog', '用户会话已重置');
return {};
} catch (error) {
logger.error('PostHog', '重置用户会话失败', error);
return rejectWithValue(error.message);
}
}
);
/**
* 追踪事件
*/
export const trackEvent = createAsyncThunk(
'posthog/trackEvent',
async ({ eventName, properties = {} }, { getState, rejectWithValue }) => {
try {
const { isInitialized } = getState().posthog;
if (!isInitialized) {
logger.warn('PostHog', 'PostHog 未初始化,事件将被缓存', { eventName });
return { eventName, properties, cached: true };
}
posthogTrackEvent(eventName, properties);
return {
eventName,
properties,
timestamp: new Date().toISOString(),
cached: false
};
} catch (error) {
logger.error('PostHog', '追踪事件失败', error, { eventName });
return rejectWithValue(error.message);
}
}
);
/**
* 获取所有 Feature Flags
*/
export const fetchFeatureFlags = createAsyncThunk(
'posthog/fetchFeatureFlags',
async (_, { rejectWithValue }) => {
try {
// PostHog SDK 会在初始化时自动获取 feature flags
// 这里只是读取缓存的值
const flags = {};
logger.info('PostHog', 'Feature Flags 已更新');
return flags;
} catch (error) {
logger.error('PostHog', '获取 Feature Flags 失败', error);
return rejectWithValue(error.message);
}
}
);
/**
* 刷新缓存的离线事件
*/
export const flushCachedEvents = createAsyncThunk(
'posthog/flushCachedEvents',
async (_, { getState, dispatch }) => {
try {
const { eventQueue, isInitialized } = getState().posthog;
if (!isInitialized || eventQueue.length === 0) {
return { flushed: 0 };
}
logger.info('PostHog', `刷新 ${eventQueue.length} 个缓存事件`);
// 批量发送缓存的事件
for (const { eventName, properties } of eventQueue) {
dispatch(trackEvent({ eventName, properties }));
}
return { flushed: eventQueue.length };
} catch (error) {
logger.error('PostHog', '刷新缓存事件失败', error);
return { flushed: 0, error: error.message };
}
}
);
// ==================== Slice ====================
const posthogSlice = createSlice({
name: 'posthog',
initialState,
reducers: {
// 设置 Feature Flag
setFeatureFlag: (state, action) => {
const { flagKey, value } = action.payload;
state.featureFlags[flagKey] = value;
},
// 清空事件队列
clearEventQueue: (state) => {
state.eventQueue = [];
},
// 更新配置
updateConfig: (state, action) => {
state.config = { ...state.config, ...action.payload };
},
// 用户 Opt-in
optIn: (state) => {
posthogOptIn();
logger.info('PostHog', '用户已选择加入追踪');
},
// 用户 Opt-out
optOut: (state) => {
posthogOptOut();
logger.info('PostHog', '用户已选择退出追踪');
},
},
extraReducers: (builder) => {
// 初始化
builder.addCase(initializePostHog.fulfilled, (state, action) => {
state.isInitialized = action.payload.isInitialized;
state.initError = null;
});
builder.addCase(initializePostHog.rejected, (state, action) => {
state.isInitialized = false;
state.initError = action.payload;
});
// 识别用户
builder.addCase(identifyUser.fulfilled, (state, action) => {
state.user = {
userId: action.payload.userId,
...action.payload.userProperties,
};
});
// 重置用户
builder.addCase(resetUser.fulfilled, (state) => {
state.user = null;
state.featureFlags = {};
});
// 追踪事件
builder.addCase(trackEvent.fulfilled, (state, action) => {
const { eventName, properties, timestamp, cached } = action.payload;
// 如果事件被缓存,添加到队列
if (cached) {
state.eventQueue.push({ eventName, properties, timestamp });
} else {
// 更新统计
state.stats.totalEvents += 1;
state.stats.lastEventTime = timestamp;
}
});
// 刷新缓存事件
builder.addCase(flushCachedEvents.fulfilled, (state, action) => {
if (action.payload.flushed > 0) {
state.eventQueue = [];
state.stats.totalEvents += action.payload.flushed;
}
});
// 获取 Feature Flags
builder.addCase(fetchFeatureFlags.fulfilled, (state, action) => {
state.featureFlags = action.payload;
});
},
});
// ==================== Actions ====================
export const {
setFeatureFlag,
clearEventQueue,
updateConfig,
optIn,
optOut,
} = posthogSlice.actions;
// ==================== Selectors ====================
export const selectPostHog = (state) => state.posthog;
export const selectIsInitialized = (state) => state.posthog.isInitialized;
export const selectUser = (state) => state.posthog.user;
export const selectFeatureFlags = (state) => state.posthog.featureFlags;
export const selectEventQueue = (state) => state.posthog.eventQueue;
export const selectStats = (state) => state.posthog.stats;
export const selectFeatureFlag = (flagKey) => (state) => {
return state.posthog.featureFlags[flagKey] || posthogGetFeatureFlag(flagKey);
};
export const selectIsOptedOut = () => posthogHasOptedOut();
// ==================== Export ====================
export default posthogSlice.reducer;

View File

@@ -4,8 +4,6 @@
import { useState, useCallback } from 'react';
import { useSearchParams } from 'react-router-dom';
import { logger } from '../../../utils/logger';
import { usePostHogTrack } from '../../../hooks/usePostHogRedux';
import { RETENTION_EVENTS } from '../../../lib/constants';
/**
* 事件筛选逻辑 Hook
@@ -17,7 +15,6 @@ import { RETENTION_EVENTS } from '../../../lib/constants';
*/
export const useEventFilters = ({ navigate, onEventClick, eventTimelineRef } = {}) => {
const [searchParams] = useSearchParams();
const { track } = usePostHogTrack(); // PostHog 追踪
// 筛选参数状态 - 初始化时从URL读取之后只用本地状态
const [filters, setFilters] = useState(() => {
@@ -38,68 +35,12 @@ export const useEventFilters = ({ navigate, onEventClick, eventTimelineRef } = {
oldFilters: filters,
timestamp: new Date().toISOString()
});
// 🎯 PostHog 追踪:搜索查询
if (newFilters.q !== filters.q && newFilters.q) {
track(RETENTION_EVENTS.SEARCH_QUERY_SUBMITTED, {
query: newFilters.q,
category: 'news',
previous_query: filters.q || null,
});
}
// 🎯 PostHog 追踪:排序变化
if (newFilters.sort !== filters.sort) {
track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
filter_type: 'sort',
filter_value: newFilters.sort,
previous_value: filters.sort,
});
}
// 🎯 PostHog 追踪:重要性筛选
if (newFilters.importance !== filters.importance) {
track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
filter_type: 'importance',
filter_value: newFilters.importance,
previous_value: filters.importance,
});
}
// 🎯 PostHog 追踪:时间范围筛选
if (newFilters.date_range !== filters.date_range && newFilters.date_range) {
track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
filter_type: 'date_range',
filter_value: newFilters.date_range,
previous_value: filters.date_range || null,
});
}
// 🎯 PostHog 追踪:行业筛选
if (newFilters.industry_code !== filters.industry_code && newFilters.industry_code) {
track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
filter_type: 'industry',
filter_value: newFilters.industry_code,
previous_value: filters.industry_code || null,
});
}
setFilters(newFilters);
logger.debug('useEventFilters', '✅ setFilters 已调用 (React异步更新中...)');
}, [filters, track]);
}, [filters]);
// 处理分页变化
const handlePageChange = useCallback((page) => {
// 🎯 PostHog 追踪:翻页
track(RETENTION_EVENTS.NEWS_LIST_VIEWED, {
page,
filters: {
sort: filters.sort,
importance: filters.importance,
has_query: !!filters.q,
},
});
// 保持现有筛选条件,只更新页码
updateFilters({ ...filters, page });
@@ -112,37 +53,21 @@ export const useEventFilters = ({ navigate, onEventClick, eventTimelineRef } = {
});
}, 100); // 延迟100ms确保DOM更新
}
}, [filters, updateFilters, eventTimelineRef, track]);
}, [filters, updateFilters, eventTimelineRef]);
// 处理事件点击
const handleEventClick = useCallback((event) => {
// 🎯 PostHog 追踪:新闻事件点击
track(RETENTION_EVENTS.NEWS_ARTICLE_CLICKED, {
event_id: event.id || event.event_id,
event_title: event.title,
importance: event.importance,
source: 'community_page',
has_stocks: !!(event.related_stocks && event.related_stocks.length > 0),
has_concepts: !!(event.related_concepts && event.related_concepts.length > 0),
});
if (onEventClick) {
onEventClick(event);
}
}, [onEventClick, track]);
}, [onEventClick]);
// 处理查看详情
const handleViewDetail = useCallback((eventId) => {
// 🎯 PostHog 追踪:查看详情
track(RETENTION_EVENTS.NEWS_DETAIL_OPENED, {
event_id: eventId,
source: 'community_page',
});
if (navigate) {
navigate(`/event-detail/${eventId}`);
}
}, [navigate, track]);
}, [navigate]);
return {
filters,

View File

@@ -20,15 +20,12 @@ import { useEventFilters } from './hooks/useEventFilters';
import { logger } from '../../utils/logger';
import { useNotification } from '../../contexts/NotificationContext';
import { usePostHogTrack } from '../../hooks/usePostHogRedux';
import { RETENTION_EVENTS } from '../../lib/constants';
// 导航栏已由 MainLayout 提供,无需在此导入
const Community = () => {
const navigate = useNavigate();
const dispatch = useDispatch();
const { track } = usePostHogTrack(); // PostHog 追踪
// Redux状态
const { popularKeywords, hotEvents } = useSelector(state => state.communityData);
@@ -62,15 +59,6 @@ const Community = () => {
dispatch(fetchHotEvents());
}, [dispatch]);
// 🎯 PostHog 追踪:页面浏览
useEffect(() => {
track(RETENTION_EVENTS.COMMUNITY_PAGE_VIEWED, {
timestamp: new Date().toISOString(),
has_hot_events: hotEvents && hotEvents.length > 0,
has_keywords: popularKeywords && popularKeywords.length > 0,
});
}, [track]); // 只在组件挂载时执行一次
// ⚡ 首次访问社区时,延迟显示权限引导
useEffect(() => {
if (showCommunityGuide) {

View File

@@ -1,6 +1,5 @@
import React, { useState, useEffect } from 'react';
import { logger } from '../../utils/logger';
import { useConceptTimelineEvents } from './hooks/useConceptTimelineEvents';
import {
Modal,
ModalOverlay,
@@ -65,17 +64,6 @@ const ConceptTimelineModal = ({
conceptId
}) => {
const toast = useToast();
// 🎯 PostHog 事件追踪
const {
trackDateToggled,
trackNewsClicked,
trackNewsDetailOpened,
trackReportClicked,
trackReportDetailOpened,
trackModalClosed,
} = useConceptTimelineEvents({ conceptName, conceptId, isOpen });
const [timelineData, setTimelineData] = useState([]);
const [loading, setLoading] = useState(true);
const [expandedDates, setExpandedDates] = useState({});
@@ -330,11 +318,6 @@ const ConceptTimelineModal = ({
// 切换日期展开状态
const toggleDateExpand = (date) => {
const willExpand = !expandedDates[date];
// 🎯 追踪日期展开/折叠
trackDateToggled(date, willExpand);
setExpandedDates(prev => ({
...prev,
[date]: !prev[date]
@@ -745,10 +728,6 @@ const ConceptTimelineModal = ({
leftIcon={<ViewIcon />}
onClick={() => {
if (event.type === 'news') {
// 🎯 追踪新闻点击和详情打开
trackNewsClicked(event, date);
trackNewsDetailOpened(event);
setSelectedNews({
title: event.title,
content: event.content,
@@ -758,10 +737,6 @@ const ConceptTimelineModal = ({
});
setIsNewsModalOpen(true);
} else if (event.type === 'report') {
// 🎯 追踪研报点击和详情打开
trackReportClicked(event, date);
trackReportDetailOpened(event);
setSelectedReport({
title: event.title,
content: event.content,

View File

@@ -1,6 +1,5 @@
import React, { useState, useEffect } from 'react';
import { logger } from '../../../utils/logger';
import { useConceptStatsEvents } from '../hooks/useConceptStatsEvents';
import {
Box,
SimpleGrid,
@@ -55,15 +54,6 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
? '/concept-api'
: 'http://111.198.58.126:16801';
// 🎯 PostHog 事件追踪
const {
trackTabChanged,
trackTimeRangeChanged,
trackCustomDateRangeSet,
trackRankItemClicked,
trackDataRefreshed,
} = useConceptStatsEvents();
const [statsData, setStatsData] = useState({});
const [loading, setLoading] = useState(true);
const [activeTab, setActiveTab] = useState(0);
@@ -190,18 +180,10 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
setCustomEndDate(today.toISOString().split('T')[0]);
setCustomStartDate(weekAgo.toISOString().split('T')[0]);
// 🎯 追踪切换到自定义范围
trackTimeRangeChanged(0, true);
} else {
setUseCustomRange(false);
const days = parseInt(newRange);
setTimeRange(days);
// 🎯 追踪时间范围变化
trackTimeRangeChanged(days, false);
fetchStatsData(days);
setTimeRange(parseInt(newRange));
fetchStatsData(parseInt(newRange));
}
};
@@ -217,10 +199,6 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
});
return;
}
// 🎯 追踪自定义日期范围设置
trackCustomDateRangeSet(customStartDate, customEndDate);
fetchStatsData(null, customStartDate, customEndDate);
}
};
@@ -870,17 +848,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
{/* 主内容卡片 */}
<Box bg={bg} borderRadius="xl" border="1px" borderColor={borderColor} shadow="sm" overflow="hidden">
<Tabs
index={activeTab}
onChange={(index) => {
const tabNames = ['涨幅榜', '跌幅榜', '活跃榜', '波动榜', '连涨榜'];
// 🎯 追踪Tab切换
trackTabChanged(index, tabNames[index]);
setActiveTab(index);
}}
variant="unstyled"
size="sm"
>
<Tabs index={activeTab} onChange={setActiveTab} variant="unstyled" size="sm">
<TabList
bg="gray.50"
borderBottom="1px"

View File

@@ -1,292 +0,0 @@
// src/views/Concept/hooks/useConceptEvents.js
// 概念中心页面事件追踪 Hook
import { useCallback, useEffect } from 'react';
import { usePostHogTrack } from '../../../hooks/usePostHogRedux';
import { RETENTION_EVENTS, REVENUE_EVENTS } from '../../../lib/constants';
import { logger } from '../../../utils/logger';
/**
* 概念中心事件追踪 Hook
* @param {Object} options - 配置选项
* @param {Function} options.navigate - 路由导航函数
* @returns {Object} 事件追踪处理函数集合
*/
export const useConceptEvents = ({ navigate } = {}) => {
const { track } = usePostHogTrack();
// 🎯 页面浏览事件 - 页面加载时触发
useEffect(() => {
track(RETENTION_EVENTS.CONCEPT_PAGE_VIEWED, {
timestamp: new Date().toISOString(),
});
logger.debug('useConceptEvents', '📊 Concept Page Viewed');
}, [track]);
/**
* 追踪概念列表数据查看
* @param {Array} concepts - 概念列表
* @param {Object} filters - 当前筛选条件
*/
const trackConceptListViewed = useCallback((concepts, filters = {}) => {
track(RETENTION_EVENTS.CONCEPT_LIST_VIEWED, {
concept_count: concepts.length,
sort_by: filters.sortBy,
view_mode: filters.viewMode,
has_search_query: !!filters.searchQuery,
selected_date: filters.selectedDate,
page: filters.page,
});
logger.debug('useConceptEvents', '📋 Concept List Viewed', {
count: concepts.length,
filters,
});
}, [track]);
/**
* 追踪搜索开始
*/
const trackSearchInitiated = useCallback(() => {
track(RETENTION_EVENTS.SEARCH_INITIATED, {
context: 'concept_center',
});
logger.debug('useConceptEvents', '🔍 Search Initiated');
}, [track]);
/**
* 追踪搜索查询提交
* @param {string} query - 搜索查询词
* @param {number} resultCount - 搜索结果数量
*/
const trackSearchQuerySubmitted = useCallback((query, resultCount = 0) => {
if (!query) return;
track(RETENTION_EVENTS.SEARCH_QUERY_SUBMITTED, {
query,
category: 'concept',
result_count: resultCount,
has_results: resultCount > 0,
});
// 如果没有搜索结果,额外追踪
if (resultCount === 0) {
track(RETENTION_EVENTS.SEARCH_NO_RESULTS, {
query,
context: 'concept_center',
});
}
logger.debug('useConceptEvents', '🔍 Search Query Submitted', {
query,
resultCount,
});
}, [track]);
/**
* 追踪排序方式变化
* @param {string} sortBy - 新的排序方式
* @param {string} previousSortBy - 之前的排序方式
*/
const trackSortChanged = useCallback((sortBy, previousSortBy = null) => {
track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
filter_type: 'sort',
filter_value: sortBy,
previous_value: previousSortBy,
context: 'concept_center',
});
logger.debug('useConceptEvents', '🔄 Sort Changed', {
sortBy,
previousSortBy,
});
}, [track]);
/**
* 追踪视图模式切换
* @param {string} viewMode - 新的视图模式 (grid/list)
* @param {string} previousViewMode - 之前的视图模式
*/
const trackViewModeChanged = useCallback((viewMode, previousViewMode = null) => {
track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
filter_type: 'view_mode',
filter_value: viewMode,
previous_value: previousViewMode,
context: 'concept_center',
});
logger.debug('useConceptEvents', '👁️ View Mode Changed', {
viewMode,
previousViewMode,
});
}, [track]);
/**
* 追踪日期选择变化
* @param {string} newDate - 新选择的日期
* @param {string} previousDate - 之前的日期
* @param {string} selectionMethod - 选择方式 (today/yesterday/week_ago/month_ago/custom)
*/
const trackDateChanged = useCallback((newDate, previousDate = null, selectionMethod = 'custom') => {
track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
filter_type: 'date',
filter_value: newDate,
previous_value: previousDate,
selection_method: selectionMethod,
context: 'concept_center',
});
logger.debug('useConceptEvents', '📅 Date Changed', {
newDate,
previousDate,
selectionMethod,
});
}, [track]);
/**
* 追踪分页变化
* @param {number} page - 新的页码
* @param {Object} filters - 当前筛选条件
*/
const trackPageChanged = useCallback((page, filters = {}) => {
track(RETENTION_EVENTS.CONCEPT_LIST_VIEWED, {
page,
sort_by: filters.sortBy,
view_mode: filters.viewMode,
has_search_query: !!filters.searchQuery,
});
logger.debug('useConceptEvents', '📄 Page Changed', { page, filters });
}, [track]);
/**
* 追踪概念卡片点击
* @param {Object} concept - 概念对象
* @param {number} position - 在列表中的位置
* @param {string} source - 来源 (list/stats_panel)
*/
const trackConceptClicked = useCallback((concept, position = 0, source = 'list') => {
track(RETENTION_EVENTS.CONCEPT_CLICKED, {
concept_name: concept.concept_name || concept.name,
concept_code: concept.concept_code || concept.code,
change_percent: concept.change_pct || concept.change_percent,
stock_count: concept.stock_count,
position,
source,
});
logger.debug('useConceptEvents', '🎯 Concept Clicked', {
concept: concept.concept_name || concept.name,
position,
source,
});
}, [track]);
/**
* 追踪概念下的股票标签点击
* @param {Object} stock - 股票对象
* @param {string} conceptName - 所属概念名称
*/
const trackConceptStockClicked = useCallback((stock, conceptName) => {
track(RETENTION_EVENTS.CONCEPT_STOCK_CLICKED, {
stock_code: stock.code || stock.stock_code,
stock_name: stock.name || stock.stock_name,
concept_name: conceptName,
source: 'concept_center_tag',
});
logger.debug('useConceptEvents', '🏷️ Concept Stock Tag Clicked', {
stock: stock.code || stock.stock_code,
concept: conceptName,
});
}, [track]);
/**
* 追踪概念详情查看时间轴Modal
* @param {string} conceptName - 概念名称
* @param {string} conceptId - 概念ID
*/
const trackConceptDetailViewed = useCallback((conceptName, conceptId) => {
track(RETENTION_EVENTS.CONCEPT_DETAIL_VIEWED, {
concept_name: conceptName,
concept_id: conceptId,
source: 'concept_center',
});
logger.debug('useConceptEvents', '📊 Concept Detail Viewed', {
conceptName,
conceptId,
});
}, [track]);
/**
* 追踪股票详情Modal打开
* @param {string} stockCode - 股票代码
* @param {string} stockName - 股票名称
*/
const trackStockDetailViewed = useCallback((stockCode, stockName) => {
track(RETENTION_EVENTS.STOCK_DETAIL_VIEWED, {
stock_code: stockCode,
stock_name: stockName,
source: 'concept_center_modal',
});
logger.debug('useConceptEvents', '👁️ Stock Detail Modal Opened', {
stockCode,
stockName,
});
}, [track]);
/**
* 追踪付费墙展示
* @param {string} feature - 需要付费的功能
* @param {string} requiredTier - 需要的订阅等级
*/
const trackPaywallShown = useCallback((feature, requiredTier = 'pro') => {
track(REVENUE_EVENTS.PAYWALL_SHOWN, {
feature,
required_tier: requiredTier,
page: 'concept_center',
});
logger.debug('useConceptEvents', '🔒 Paywall Shown', {
feature,
requiredTier,
});
}, [track]);
/**
* 追踪升级按钮点击
* @param {string} feature - 触发升级的功能
* @param {string} targetTier - 目标订阅等级
*/
const trackUpgradeClicked = useCallback((feature, targetTier = 'pro') => {
track(REVENUE_EVENTS.PAYWALL_UPGRADE_CLICKED, {
feature,
target_tier: targetTier,
source_page: 'concept_center',
});
logger.debug('useConceptEvents', '⬆️ Upgrade Button Clicked', {
feature,
targetTier,
});
}, [track]);
return {
trackConceptListViewed,
trackSearchInitiated,
trackSearchQuerySubmitted,
trackSortChanged,
trackViewModeChanged,
trackDateChanged,
trackPageChanged,
trackConceptClicked,
trackConceptStockClicked,
trackConceptDetailViewed,
trackStockDetailViewed,
trackPaywallShown,
trackUpgradeClicked,
};
};

View File

@@ -90,8 +90,6 @@ import { useSubscription } from '../../hooks/useSubscription';
import SubscriptionUpgradeModal from '../../components/SubscriptionUpgradeModal';
// 导入市场服务
import { marketService } from '../../services/marketService';
// 导入 PostHog 追踪 Hook
import { useConceptEvents } from './hooks/useConceptEvents';
const API_BASE_URL = process.env.NODE_ENV === 'production'
? '/concept-api'
@@ -131,18 +129,6 @@ const ConceptCenter = () => {
const navigate = useNavigate();
const toast = useToast();
// 🎯 PostHog 事件追踪
const {
trackConceptSearched,
trackFilterApplied,
trackConceptClicked,
trackConceptStocksViewed,
trackConceptStockClicked,
trackConceptTimelineViewed,
trackPageChange,
trackViewModeChanged,
} = useConceptEvents({ navigate });
// 订阅权限管理
const { hasFeatureAccess, getUpgradeRecommendation } = useSubscription();
const [upgradeModalOpen, setUpgradeModalOpen] = useState(false);
@@ -206,9 +192,6 @@ const ConceptCenter = () => {
return;
}
// 🎯 追踪历史时间轴查看
trackConceptTimelineViewed(conceptName, conceptId);
setSelectedConceptForContent(conceptName);
setSelectedConceptId(conceptId);
setIsTimelineModalOpen(true);
@@ -335,14 +318,8 @@ const ConceptCenter = () => {
setSortBy('change_pct');
}
// 🎯 追踪搜索查询在fetchConcepts后追踪结果数量
updateUrlParams({ q: searchQuery, page: 1, sort: newSortBy });
fetchConcepts(searchQuery, 1, selectedDate, newSortBy).then(() => {
if (searchQuery && searchQuery.trim() !== '') {
// 使用当前 concepts.length 作为结果数量
setTimeout(() => trackConceptSearched(searchQuery, concepts.length), 100);
}
});
fetchConcepts(searchQuery, 1, selectedDate, newSortBy);
};
// 处理Enter键搜索
@@ -354,11 +331,6 @@ const ConceptCenter = () => {
// 处理排序变化
const handleSortChange = (value) => {
const previousSort = sortBy;
// 🎯 追踪排序变化
trackFilterApplied('sort', value, previousSort);
setSortBy(value);
setCurrentPage(1);
updateUrlParams({ sort: value, page: 1 });
@@ -368,11 +340,6 @@ const ConceptCenter = () => {
// 处理日期变化
const handleDateChange = (e) => {
const date = new Date(e.target.value);
const previousDate = selectedDate ? selectedDate.toISOString().split('T')[0] : null;
// 🎯 追踪日期变化
trackFilterApplied('date', e.target.value, previousDate);
setSelectedDate(date);
setCurrentPage(1);
updateUrlParams({ date: e.target.value, page: 1 });
@@ -392,9 +359,6 @@ const ConceptCenter = () => {
// 处理页码变化
const handlePageChange = (page) => {
// 🎯 追踪翻页
trackPageChange(page, { sort: sortBy, q: searchQuery, date: selectedDate?.toISOString().split('T')[0] });
setCurrentPage(page);
updateUrlParams({ page });
fetchConcepts(searchQuery, page, selectedDate, sortBy);
@@ -402,12 +366,7 @@ const ConceptCenter = () => {
};
// 处理概念点击
const handleConceptClick = (conceptId, conceptName, concept = null, position = 0) => {
// 🎯 追踪概念点击
if (concept) {
trackConceptClicked(concept, position);
}
const handleConceptClick = (conceptId, conceptName) => {
const htmlPath = `https://valuefrontier.cn/htmls/${encodeURIComponent(conceptName)}.html`;
window.open(htmlPath, '_blank');
};
@@ -474,9 +433,6 @@ const ConceptCenter = () => {
return;
}
// 🎯 追踪查看个股
trackConceptStocksViewed(concept.concept, concept.stocks?.length || 0);
setSelectedConceptStocks(concept.stocks || []);
setSelectedConceptName(concept.concept);
setStockMarketData({}); // 清空之前的数据
@@ -693,7 +649,7 @@ const ConceptCenter = () => {
}, []);
// 概念卡片组件 - 优化版
const ConceptCard = ({ concept, position = 0 }) => {
const ConceptCard = ({ concept }) => {
const changePercent = concept.price_info?.avg_change_pct;
const changeColor = getChangeColor(changePercent);
const hasChange = changePercent !== null && changePercent !== undefined;
@@ -701,7 +657,7 @@ const ConceptCenter = () => {
return (
<Card
cursor="pointer"
onClick={() => handleConceptClick(concept.concept_id, concept.concept, concept, position)}
onClick={() => handleConceptClick(concept.concept_id, concept.concept)}
bg="white"
borderWidth="1px"
borderColor="gray.200"
@@ -901,7 +857,7 @@ const ConceptCenter = () => {
};
// 概念列表项组件 - 列表视图
const ConceptListItem = ({ concept, position = 0 }) => {
const ConceptListItem = ({ concept }) => {
const changePercent = concept.price_info?.avg_change_pct;
const changeColor = getChangeColor(changePercent);
const hasChange = changePercent !== null && changePercent !== undefined;
@@ -909,7 +865,7 @@ const ConceptCenter = () => {
return (
<Card
cursor="pointer"
onClick={() => handleConceptClick(concept.concept_id, concept.concept, concept, position)}
onClick={() => handleConceptClick(concept.concept_id, concept.concept)}
bg="white"
borderWidth="1px"
borderColor="gray.200"
@@ -1405,12 +1361,7 @@ const ConceptCenter = () => {
<ButtonGroup size="sm" isAttached variant="outline">
<IconButton
icon={<FaThLarge />}
onClick={() => {
if (viewMode !== 'grid') {
trackViewModeChanged('grid', viewMode);
setViewMode('grid');
}
}}
onClick={() => setViewMode('grid')}
bg={viewMode === 'grid' ? 'purple.500' : 'transparent'}
color={viewMode === 'grid' ? 'white' : 'purple.500'}
borderColor="purple.500"
@@ -1419,12 +1370,7 @@ const ConceptCenter = () => {
/>
<IconButton
icon={<FaList />}
onClick={() => {
if (viewMode !== 'list') {
trackViewModeChanged('list', viewMode);
setViewMode('list');
}
}}
onClick={() => setViewMode('list')}
bg={viewMode === 'list' ? 'purple.500' : 'transparent'}
color={viewMode === 'list' ? 'white' : 'purple.500'}
borderColor="purple.500"
@@ -1458,16 +1404,16 @@ const ConceptCenter = () => {
<>
{viewMode === 'grid' ? (
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6} className="concept-grid">
{concepts.map((concept, index) => (
{concepts.map((concept) => (
<Box key={concept.concept_id} className="concept-item" role="group">
<ConceptCard concept={concept} position={index} />
<ConceptCard concept={concept} />
</Box>
))}
</SimpleGrid>
) : (
<VStack spacing={4} align="stretch" className="concept-list">
{concepts.map((concept, index) => (
<ConceptListItem key={concept.concept_id} concept={concept} position={index} />
{concepts.map((concept) => (
<ConceptListItem key={concept.concept_id} concept={concept} />
))}
</VStack>
)}

View File

@@ -1,5 +1,5 @@
// src/views/Home/HomePage.js - 专业投资分析平台
import React, { useEffect, useCallback } from 'react';
import React, { useEffect } from 'react';
import {
Box,
Container,
@@ -21,13 +21,10 @@ import heroBg from '../../assets/img/BackgroundCard1.png';
import '../../styles/home-animations.css';
import { logger } from '../../utils/logger';
import MidjourneyHeroSection from '../Community/components/MidjourneyHeroSection';
import { usePostHogTrack } from '../../hooks/usePostHogRedux';
import { ACQUISITION_EVENTS } from '../../lib/constants';
export default function HomePage() {
const { user, isAuthenticated } = useAuth(); // ⚡ 移除 isLoading不再依赖它
const navigate = useNavigate();
const { track } = usePostHogTrack(); // PostHog 追踪
const [imageLoaded, setImageLoaded] = React.useState(false);
// 响应式配置
@@ -49,15 +46,6 @@ export default function HomePage() {
});
}, [user?.id, isAuthenticated]); // 只依赖 user.id,避免无限循环
// 🎯 PostHog 追踪:页面浏览
useEffect(() => {
track(ACQUISITION_EVENTS.LANDING_PAGE_VIEWED, {
timestamp: new Date().toISOString(),
is_authenticated: isAuthenticated,
user_id: user?.id || null,
});
}, [track, isAuthenticated, user?.id]);
// 核心功能配置 - 5个主要功能
const coreFeatures = [
{
@@ -118,25 +106,15 @@ export default function HomePage() {
];
// @TODO 如何区分内部链接和外部链接?
const handleProductClick = useCallback((feature) => {
// 🎯 PostHog 追踪:功能卡片点击
track(ACQUISITION_EVENTS.FEATURE_CARD_CLICKED, {
feature_id: feature.id,
feature_title: feature.title,
feature_url: feature.url,
is_featured: feature.featured || false,
link_type: feature.url.startsWith('http') ? 'external' : 'internal',
});
// 原有导航逻辑
if (feature.url.startsWith('http')) {
const handleProductClick = (url) => {
if (url.startsWith('http')) {
// 外部链接,直接打开
window.open(feature.url, '_blank');
window.open(url, '_blank');
} else {
// 内部路由
navigate(feature.url);
navigate(url);
}
}, [track, navigate]);
};
return (
<Box>
@@ -295,7 +273,7 @@ export default function HomePage() {
borderRadius="full"
fontWeight="bold"
w={{ base: '100%', md: 'auto' }}
onClick={() => handleProductClick(coreFeatures[0])}
onClick={() => handleProductClick(coreFeatures[0].url)}
minH="44px"
flexShrink={0}
>
@@ -327,7 +305,7 @@ export default function HomePage() {
borderColor: `${feature.color}.400`,
transform: 'translateY(-2px)'
}}
onClick={() => handleProductClick(feature)}
onClick={() => handleProductClick(feature.url)}
minH={{ base: 'auto', md: '180px' }}
>
<CardBody p={{ base: 5, md: 6 }}>
@@ -365,7 +343,7 @@ export default function HomePage() {
minH="44px"
onClick={(e) => {
e.stopPropagation();
handleProductClick(feature);
handleProductClick(feature.url);
}}
>
使用

View File

@@ -1,236 +0,0 @@
// src/views/StockOverview/hooks/useStockOverviewEvents.js
// 个股中心页面事件追踪 Hook
import { useCallback, useEffect } from 'react';
import { usePostHogTrack } from '../../../hooks/usePostHogRedux';
import { RETENTION_EVENTS } from '../../../lib/constants';
import { logger } from '../../../utils/logger';
/**
* 个股中心事件追踪 Hook
* @param {Object} options - 配置选项
* @param {Function} options.navigate - 路由导航函数
* @returns {Object} 事件追踪处理函数集合
*/
export const useStockOverviewEvents = ({ navigate } = {}) => {
const { track } = usePostHogTrack();
// 🎯 页面浏览事件 - 页面加载时触发
useEffect(() => {
track(RETENTION_EVENTS.STOCK_OVERVIEW_VIEWED, {
timestamp: new Date().toISOString(),
});
logger.debug('useStockOverviewEvents', '📊 Stock Overview Page Viewed');
}, [track]);
/**
* 追踪市场统计数据查看
* @param {Object} stats - 市场统计数据
*/
const trackMarketStatsViewed = useCallback((stats) => {
if (!stats) return;
track(RETENTION_EVENTS.STOCK_LIST_VIEWED, {
total_market_cap: stats.total_market_cap,
total_volume: stats.total_volume,
rising_stocks: stats.rising_count,
falling_stocks: stats.falling_count,
data_date: stats.date,
});
logger.debug('useStockOverviewEvents', '📈 Market Statistics Viewed', stats);
}, [track]);
/**
* 追踪股票搜索开始
*/
const trackSearchInitiated = useCallback(() => {
track(RETENTION_EVENTS.SEARCH_INITIATED, {
context: 'stock_overview',
});
logger.debug('useStockOverviewEvents', '🔍 Search Initiated');
}, [track]);
/**
* 追踪股票搜索查询
* @param {string} query - 搜索查询词
* @param {number} resultCount - 搜索结果数量
*/
const trackStockSearched = useCallback((query, resultCount = 0) => {
if (!query) return;
track(RETENTION_EVENTS.STOCK_SEARCHED, {
query,
result_count: resultCount,
has_results: resultCount > 0,
});
// 如果没有搜索结果,额外追踪
if (resultCount === 0) {
track(RETENTION_EVENTS.SEARCH_NO_RESULTS, {
query,
context: 'stock_overview',
});
}
logger.debug('useStockOverviewEvents', '🔍 Stock Searched', {
query,
resultCount,
});
}, [track]);
/**
* 追踪搜索结果点击
* @param {Object} stock - 被点击的股票对象
* @param {number} position - 在搜索结果中的位置
*/
const trackSearchResultClicked = useCallback((stock, position = 0) => {
track(RETENTION_EVENTS.SEARCH_RESULT_CLICKED, {
stock_code: stock.code,
stock_name: stock.name,
exchange: stock.exchange,
position,
context: 'stock_overview',
});
logger.debug('useStockOverviewEvents', '🎯 Search Result Clicked', {
stock: stock.code,
position,
});
}, [track]);
/**
* 追踪概念卡片点击
* @param {Object} concept - 概念对象
* @param {number} rank - 在列表中的排名
*/
const trackConceptClicked = useCallback((concept, rank = 0) => {
track(RETENTION_EVENTS.CONCEPT_CLICKED, {
concept_name: concept.name,
concept_code: concept.code,
change_percent: concept.change_percent,
stock_count: concept.stock_count,
rank,
source: 'daily_hot_concepts',
});
logger.debug('useStockOverviewEvents', '🔥 Concept Clicked', {
concept: concept.name,
rank,
});
}, [track]);
/**
* 追踪概念下的股票标签点击
* @param {Object} stock - 股票对象
* @param {string} conceptName - 所属概念名称
*/
const trackConceptStockClicked = useCallback((stock, conceptName) => {
track(RETENTION_EVENTS.CONCEPT_STOCK_CLICKED, {
stock_code: stock.code,
stock_name: stock.name,
concept_name: conceptName,
source: 'daily_hot_concepts_tag',
});
logger.debug('useStockOverviewEvents', '🏷️ Concept Stock Tag Clicked', {
stock: stock.code,
concept: conceptName,
});
}, [track]);
/**
* 追踪热力图中股票点击
* @param {Object} stock - 被点击的股票对象
* @param {string} marketCapRange - 市值区间
*/
const trackHeatmapStockClicked = useCallback((stock, marketCapRange = '') => {
track(RETENTION_EVENTS.STOCK_CLICKED, {
stock_code: stock.code,
stock_name: stock.name,
change_percent: stock.change_percent,
market_cap_range: marketCapRange,
source: 'market_heatmap',
});
logger.debug('useStockOverviewEvents', '📊 Heatmap Stock Clicked', {
stock: stock.code,
marketCapRange,
});
}, [track]);
/**
* 追踪股票详情查看
* @param {string} stockCode - 股票代码
* @param {string} source - 来源search/concept/heatmap
*/
const trackStockDetailViewed = useCallback((stockCode, source = 'unknown') => {
track(RETENTION_EVENTS.STOCK_DETAIL_VIEWED, {
stock_code: stockCode,
source: `stock_overview_${source}`,
});
logger.debug('useStockOverviewEvents', '👁️ Stock Detail Viewed', {
stockCode,
source,
});
// 导航到公司详情页
if (navigate) {
navigate(`/company/${stockCode}`);
}
}, [track, navigate]);
/**
* 追踪概念详情查看
* @param {string} conceptCode - 概念代码
*/
const trackConceptDetailViewed = useCallback((conceptCode) => {
track(RETENTION_EVENTS.CONCEPT_DETAIL_VIEWED, {
concept_code: conceptCode,
source: 'stock_overview_daily_hot',
});
logger.debug('useStockOverviewEvents', '🎯 Concept Detail Viewed', {
conceptCode,
});
// 导航到概念详情页
if (navigate) {
navigate(`/concept-detail/${conceptCode}`);
}
}, [track, navigate]);
/**
* 追踪日期选择变化
* @param {string} newDate - 新选择的日期
* @param {string} previousDate - 之前的日期
*/
const trackDateChanged = useCallback((newDate, previousDate = null) => {
track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
filter_type: 'date',
filter_value: newDate,
previous_value: previousDate,
context: 'stock_overview',
});
logger.debug('useStockOverviewEvents', '📅 Date Changed', {
newDate,
previousDate,
});
}, [track]);
return {
trackMarketStatsViewed,
trackSearchInitiated,
trackStockSearched,
trackSearchResultClicked,
trackConceptClicked,
trackConceptStockClicked,
trackHeatmapStockClicked,
trackStockDetailViewed,
trackConceptDetailViewed,
trackDateChanged,
};
};

View File

@@ -61,7 +61,6 @@ import { BsGraphUp, BsLightningFill } from 'react-icons/bs';
import { keyframes } from '@emotion/react';
import * as echarts from 'echarts';
import { logger } from '../../utils/logger';
import { useStockOverviewEvents } from './hooks/useStockOverviewEvents';
// Navigation bar now provided by MainLayout
// import HomeNavbar from '../../components/Navbars/HomeNavbar';
@@ -84,20 +83,6 @@ const StockOverview = () => {
const heatmapRef = useRef(null);
const heatmapChart = useRef(null);
// 🎯 事件追踪 Hook
const {
trackMarketStatsViewed,
trackSearchInitiated,
trackStockSearched,
trackSearchResultClicked,
trackConceptClicked,
trackConceptStockClicked,
trackHeatmapStockClicked,
trackStockDetailViewed,
trackConceptDetailViewed,
trackDateChanged,
} = useStockOverviewEvents({ navigate });
// 状态管理
const [searchQuery, setSearchQuery] = useState('');
const [searchResults, setSearchResults] = useState([]);
@@ -156,18 +141,11 @@ const StockOverview = () => {
});
if (data.success) {
const results = data.data || [];
setSearchResults(results);
setSearchResults(data.data || []);
setShowResults(true);
// 🎯 追踪搜索查询
trackStockSearched(query, results.length);
} else {
logger.warn('StockOverview', '搜索失败', data.error || '请稍后重试', { query });
// ❌ 移除搜索失败 toast非关键操作
// 🎯 追踪搜索无结果
trackStockSearched(query, 0);
}
} catch (error) {
logger.error('StockOverview', 'searchStocks', error, { query });
@@ -241,23 +219,18 @@ const StockOverview = () => {
const data = await response.json();
if (data.success) {
const newStats = {
setMarketStats(prevStats => ({
...data.summary,
// 保留之前从 heatmap 接口获取的上涨/下跌家数
rising_count: prevStats?.rising_count,
falling_count: prevStats?.falling_count,
date: data.trade_date
};
setMarketStats(newStats);
falling_count: prevStats?.falling_count
}));
setAvailableDates(data.available_dates || []);
if (!selectedDate) setSelectedDate(data.trade_date);
logger.debug('StockOverview', '市场统计数据加载成功', {
date: data.trade_date,
availableDatesCount: data.available_dates?.length || 0
});
// 🎯 追踪市场统计数据查看
trackMarketStatsViewed(newStats);
}
} catch (error) {
logger.error('StockOverview', 'fetchMarketStats', error, { date });
@@ -430,16 +403,6 @@ const StockOverview = () => {
heatmapChart.current.on('click', function(params) {
// 只有点击个股有code的节点才跳转
if (params.data && params.data.code && !params.data.children) {
const stock = {
code: params.data.code,
name: params.data.name,
change_percent: params.data.change
};
const marketCapRange = getMarketCapRange(params.data.value);
// 🎯 追踪热力图股票点击
trackHeatmapStockClicked(stock, marketCapRange);
navigate(`/company?scode=${params.data.code}`);
}
});
@@ -449,7 +412,7 @@ const StockOverview = () => {
});
// ❌ 移除热力图渲染失败 toast非关键操作
}
}, [colorMode, goldColor, navigate, trackHeatmapStockClicked]); // ✅ 添加追踪函数依赖
}, [colorMode, goldColor, navigate]); // ✅ 移除 toast 依赖
// 获取市值区间
const getMarketCapRange = (cap) => {
@@ -464,12 +427,6 @@ const StockOverview = () => {
const handleSearchChange = (e) => {
const value = e.target.value;
setSearchQuery(value);
// 🎯 追踪搜索开始(首次输入时)
if (value && !searchQuery) {
trackSearchInitiated();
}
debounceSearch(value);
};
@@ -481,30 +438,19 @@ const StockOverview = () => {
};
// 选择股票
const handleSelectStock = (stock, index = 0) => {
// 🎯 追踪搜索结果点击
trackSearchResultClicked(stock, index);
const handleSelectStock = (stock) => {
navigate(`/company?scode=${stock.stock_code}`);
handleClearSearch();
};
// 查看概念详情模仿概念中心打开对应HTML页
const handleConceptClick = (concept, rank = 0) => {
// 🎯 追踪概念点击
trackConceptClicked(concept, rank);
const htmlPath = `/htmls/${concept.concept_name}.html`;
const handleConceptClick = (conceptId, conceptName) => {
const htmlPath = `/htmls/${conceptName}.html`;
window.open(htmlPath, '_blank');
};
// 处理日期选择
const handleDateChange = (date) => {
const previousDate = selectedDate;
// 🎯 追踪日期变化
trackDateChanged(date, previousDate);
setSelectedDate(date);
setIsCalendarOpen(false);
// 重新获取数据
@@ -715,7 +661,7 @@ const StockOverview = () => {
p={4}
cursor="pointer"
_hover={{ bg: hoverBg }}
onClick={() => handleSelectStock(stock, index)}
onClick={() => handleSelectStock(stock)}
borderBottomWidth={index < searchResults.length - 1 ? "1px" : "0"}
borderColor={borderColor}
>
@@ -934,7 +880,7 @@ const StockOverview = () => {
}}
transition="all 0.3s"
cursor="pointer"
onClick={() => handleConceptClick(concept, index)}
onClick={() => handleConceptClick(concept.concept_id, concept.concept_name)}
position="relative"
overflow="hidden"
>
@@ -1005,13 +951,6 @@ const StockOverview = () => {
cursor="pointer"
onClick={(e) => {
e.stopPropagation();
// 🎯 追踪概念下的股票标签点击
trackConceptStockClicked({
code: stock.stock_code,
name: stock.stock_name
}, concept.concept_name);
navigate(`/company?scode=${stock.stock_code}`);
}}
>
@@ -1030,7 +969,7 @@ const StockOverview = () => {
rightIcon={<FaChevronRight />}
onClick={(e) => {
e.stopPropagation();
handleConceptClick(concept, index);
handleConceptClick(concept.concept_id, concept.concept_name);
}}
>
查看详情