Compare commits
134 Commits
43229a21c0
...
feature_20
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
433fc4a0f5 | ||
|
|
5bac525147 | ||
|
|
a049d0365b | ||
|
|
fdbb6ceff5 | ||
|
|
35f8b5195a | ||
|
|
77aafd5661 | ||
|
|
ce1bf29270 | ||
|
|
ac7a6991bc | ||
|
|
4435ef9392 | ||
|
|
224c6a12d4 | ||
|
|
d0d8b1ebde | ||
|
|
bf8aff9e7e | ||
|
|
ad21398e1c | ||
|
|
0e1cc11330 | ||
|
|
e9b54ce10d | ||
|
|
e5ab99bae6 | ||
|
|
8632e40c94 | ||
|
|
173b13bc70 | ||
|
|
02cd234def | ||
|
|
e3a953559f | ||
|
|
78e4b8f696 | ||
|
|
1cf6169370 | ||
|
|
e3721b22ff | ||
|
|
357b8bbdd7 | ||
|
|
c6a6444d9a | ||
|
|
c42a14aa8f | ||
|
|
cddd0e860e | ||
|
|
fbe3434521 | ||
|
|
bca2ad4f81 | ||
|
|
8f3af4ed07 | ||
|
|
fb76e442f7 | ||
|
|
6506cb222b | ||
|
|
542b20368e | ||
|
|
d456c3cd5f | ||
|
|
b221c2669c | ||
|
|
356f865f09 | ||
| 71df2b605b | |||
| 5892dc3156 | |||
|
|
e05ea154a2 | ||
| 8787d5ddb7 | |||
|
|
c33181a689 | ||
| 29f035b1cf | |||
| 513134f285 | |||
|
|
7da50aca40 | ||
|
|
72aae585d0 | ||
| 24c6c9e1c6 | |||
|
|
58254d3e8f | ||
|
|
760ce4d5e1 | ||
|
|
95c1eaf97b | ||
|
|
657c446594 | ||
|
|
10f519a764 | ||
|
|
f072256021 | ||
|
|
0e3bdc9b8c | ||
|
|
5e4c4e7cea | ||
|
|
31a7500388 | ||
|
|
03c113fe1b | ||
|
|
0f3bc06716 | ||
|
|
e568b5e05f | ||
| c5aaaabf17 | |||
| 9ede603c9f | |||
|
|
629c63f4ee | ||
|
|
d6bc2c7245 | ||
|
|
dc38199ae6 | ||
|
|
d93b5de319 | ||
|
|
199a54bc12 | ||
|
|
39feae87a6 | ||
|
|
a9dc1191bf | ||
|
|
227e1c9d15 | ||
|
|
b5cdceb92b | ||
|
|
aacbe5c31c | ||
|
|
197c792219 | ||
|
|
794581e429 | ||
|
|
b06d51813a | ||
|
|
5b25136c28 | ||
|
|
97c5ce0d4d | ||
|
|
f1bd9680b6 | ||
|
|
f02d0d0bd0 | ||
|
|
aa332537d4 | ||
|
|
b4b7eae1ba | ||
|
|
4559c57a62 | ||
|
|
9eb13206cc | ||
|
|
8db9a9429e | ||
|
|
916537f25b | ||
|
|
3d90ae7f74 | ||
|
|
3580385967 | ||
|
|
67c3d3a875 | ||
|
|
65d0ec5354 | ||
|
|
05307d6501 | ||
|
|
a5702b631c | ||
|
|
a96f778779 | ||
|
|
0a0d617b20 | ||
|
|
506f89e64e | ||
|
|
094793c022 | ||
|
|
873adda1fd | ||
|
|
b0ae5a2871 | ||
|
|
6f34cab6d1 | ||
|
|
5aebd4b113 | ||
|
|
70f2676c79 | ||
|
|
0b316a5ed8 | ||
|
|
72a009e1ae | ||
|
|
a92d556486 | ||
| 6df66abcb4 | |||
| 16d04a6d28 | |||
|
|
3f881d000b | ||
|
|
801113b7e5 | ||
|
|
e0cd71880b | ||
|
|
10a4dcb5d5 | ||
|
|
9429eb0559 | ||
|
|
e69f822150 | ||
|
|
13c3c74b92 | ||
|
|
bcf81f4d47 | ||
|
|
f0d30244d2 | ||
|
|
f2cdc0756c | ||
|
|
e91656d332 | ||
| 62d6487cbb | |||
| 246adf4538 | |||
| 8dcf643db7 | |||
|
|
5eb4227e29 | ||
|
|
34a6c402c4 | ||
|
|
6ad38594bb | ||
|
|
1ba8b8fd2f | ||
|
|
45b88309b3 | ||
|
|
28975f74e9 | ||
|
|
4eaeab521f | ||
|
|
9dcd4bfbf3 | ||
|
|
d2988d1a33 | ||
|
|
30520542c8 | ||
|
|
035bb9a66d | ||
|
|
8bd7f59d35 | ||
| 37eba48906 | |||
| 9ad2dc7fab | |||
| 0b1591c3dd | |||
| 0a28f235d3 | |||
|
|
db0d0ed269 |
@@ -4,7 +4,15 @@
|
||||
"Read(//Users/qiye/**)",
|
||||
"Bash(npm run lint:check)",
|
||||
"Bash(npm run build)",
|
||||
"Bash(chmod +x /Users/qiye/Desktop/jzqy/vf_react/scripts/*.sh)"
|
||||
"Bash(chmod +x /Users/qiye/Desktop/jzqy/vf_react/scripts/*.sh)",
|
||||
"Bash(node scripts/parseIndustryCSV.js)",
|
||||
"Bash(cat:*)",
|
||||
"Bash(npm cache clean --force)",
|
||||
"Bash(npm install)",
|
||||
"Bash(npm run start:mock)",
|
||||
"Bash(npm install fsevents@latest --save-optional --force)",
|
||||
"Bash(python -m py_compile:*)",
|
||||
"Bash(ps -p 20502,53360 -o pid,command)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
# 开发环境配置(连接真实后端)
|
||||
# 使用方式: npm start
|
||||
# 使用方式: npm run start:dev
|
||||
|
||||
# React 构建优化配置
|
||||
GENERATE_SOURCEMAP=false
|
||||
@@ -18,3 +18,10 @@ REACT_APP_ENABLE_MOCK=false
|
||||
|
||||
# 开发环境标识
|
||||
REACT_APP_ENV=development
|
||||
|
||||
# PostHog 配置(开发环境)
|
||||
# 留空 = 仅控制台 debug
|
||||
# 填入 Key = 控制台 + PostHog Cloud 双模式
|
||||
REACT_APP_POSTHOG_KEY=
|
||||
REACT_APP_POSTHOG_HOST=https://app.posthog.com
|
||||
REACT_APP_ENABLE_SESSION_RECORDING=false
|
||||
|
||||
11
.env.mock
11
.env.mock
@@ -35,3 +35,14 @@ REACT_APP_ENABLE_MOCK=true
|
||||
|
||||
# Mock 环境标识
|
||||
REACT_APP_ENV=mock
|
||||
|
||||
# PostHog 配置(Mock 环境)
|
||||
# 留空 = 仅控制台 debug
|
||||
# 填入 Key = 控制台 + PostHog Cloud 双模式
|
||||
REACT_APP_POSTHOG_KEY=phc_xKlRyG69Bx7hgOdFeCeLUvQWvSjw18ZKFgCwCeYezWF
|
||||
REACT_APP_POSTHOG_HOST=https://app.posthog.com
|
||||
REACT_APP_ENABLE_SESSION_RECORDING=false
|
||||
|
||||
# PostHog Debug 模式(Mock 环境永久启用)
|
||||
# 在浏览器 Console 中打印详细的事件追踪日志
|
||||
REACT_APP_POSTHOG_DEBUG=true
|
||||
|
||||
42
.env.test
Normal file
42
.env.test
Normal file
@@ -0,0 +1,42 @@
|
||||
# ========================================
|
||||
# 本地测试环境(前后端都在本地)
|
||||
# ========================================
|
||||
# 使用方式: npm run start:test
|
||||
#
|
||||
# 工作原理:
|
||||
# 1. concurrently 同时启动前端和后端
|
||||
# 2. 前端: localhost:3000
|
||||
# 3. 后端: localhost:5001 (python app_2.py)
|
||||
# 4. 数据: 本地数据库
|
||||
#
|
||||
# 适用场景:
|
||||
# - 调试后端代码
|
||||
# - 性能测试
|
||||
# - 离线开发
|
||||
# - 数据库调试
|
||||
# ========================================
|
||||
|
||||
# 环境标识
|
||||
REACT_APP_ENV=test
|
||||
NODE_ENV=development
|
||||
|
||||
# Mock 配置(关闭 MSW)
|
||||
REACT_APP_ENABLE_MOCK=false
|
||||
|
||||
# 后端 API 地址(本地后端)
|
||||
REACT_APP_API_URL=http://localhost:5001
|
||||
|
||||
# PostHog 配置(测试环境)
|
||||
# 留空 = 仅控制台 debug
|
||||
# 填入 Key = 控制台 + PostHog Cloud 双模式
|
||||
REACT_APP_POSTHOG_KEY=
|
||||
REACT_APP_POSTHOG_HOST=https://app.posthog.com
|
||||
REACT_APP_ENABLE_SESSION_RECORDING=false
|
||||
|
||||
# React 构建优化配置
|
||||
GENERATE_SOURCEMAP=true # 测试环境保留 sourcemap 便于调试
|
||||
SKIP_PREFLIGHT_CHECK=true
|
||||
DISABLE_ESLINT_PLUGIN=false # 测试环境开启 ESLint
|
||||
TSC_COMPILE_ON_ERROR=true
|
||||
IMAGE_INLINE_SIZE_LIMIT=10000
|
||||
NODE_OPTIONS=--max_old_space_size=4096
|
||||
BIN
__pycache__/app.cpython-310.pyc
Normal file
BIN
__pycache__/app.cpython-310.pyc
Normal file
Binary file not shown.
@@ -1,45 +0,0 @@
|
||||
from flask import Flask
|
||||
from flask_sqlalchemy import SQLAlchemy
|
||||
|
||||
from flask_cors import CORS
|
||||
from datetime import datetime
|
||||
import pytz
|
||||
import os
|
||||
|
||||
# 创建Flask应用
|
||||
app = Flask(__name__)
|
||||
|
||||
# 配置
|
||||
config_name = os.environ.get('FLASK_ENV', 'development')
|
||||
from config import config
|
||||
app.config.from_object(config[config_name])
|
||||
|
||||
# 初始化扩展
|
||||
db = SQLAlchemy(app)
|
||||
CORS(app, resources={r"/api/*": {"origins": "*"}})
|
||||
|
||||
# 时区设置
|
||||
def beijing_now():
|
||||
"""获取北京时间"""
|
||||
tz = pytz.timezone('Asia/Shanghai')
|
||||
return datetime.now(tz)
|
||||
|
||||
# 导入模型
|
||||
from app.models import *
|
||||
|
||||
# 创建数据库表
|
||||
with app.app_context():
|
||||
db.create_all()
|
||||
|
||||
# 注册路由
|
||||
from app.routes import events, stocks, limitanalyse, calendar, industries
|
||||
|
||||
app.register_blueprint(events.bp)
|
||||
app.register_blueprint(stocks.bp)
|
||||
app.register_blueprint(limitanalyse.bp)
|
||||
app.register_blueprint(calendar.bp)
|
||||
app.register_blueprint(industries.bp)
|
||||
|
||||
if __name__ == '__main__':
|
||||
print("=== Value Frontier React 架构启动 ===")
|
||||
app.run(host='0.0.0.0', port=5001, debug=True)
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,30 +0,0 @@
|
||||
# app/extensions.py
|
||||
from flask_sqlalchemy import SQLAlchemy
|
||||
from flask_login import LoginManager
|
||||
from flask_compress import Compress
|
||||
from flask_cors import CORS
|
||||
from clickhouse_driver import Client as Cclient
|
||||
from sqlalchemy import create_engine
|
||||
|
||||
# Database instances
|
||||
db = SQLAlchemy()
|
||||
|
||||
# Other extensions
|
||||
login_manager = LoginManager()
|
||||
compress = Compress()
|
||||
cors = CORS()
|
||||
|
||||
# Database engines (如果仍然需要直接使用 engine)
|
||||
engine = create_engine("mysql+pymysql://root:Zzl33818!@111.198.58.126:33060/stock", echo=False)
|
||||
engine_med = create_engine("mysql+pymysql://root:Zzl33818!@111.198.58.126:33060/med", echo=False)
|
||||
engine_2 = create_engine("mysql+pymysql://root:Zzl33818!@111.198.58.126:33060/valuefrontier", echo=False)
|
||||
|
||||
# ClickHouse client factory
|
||||
def get_clickhouse_client():
|
||||
return Cclient(
|
||||
host='111.198.58.126',
|
||||
port=18778,
|
||||
user='default',
|
||||
password='Zzl5588161!',
|
||||
database='stock'
|
||||
)
|
||||
504
app/models.py
504
app/models.py
@@ -1,504 +0,0 @@
|
||||
from app import db
|
||||
from datetime import datetime
|
||||
import pytz
|
||||
import json
|
||||
|
||||
def beijing_now():
|
||||
"""获取北京时间"""
|
||||
tz = pytz.timezone('Asia/Shanghai')
|
||||
return datetime.now(tz)
|
||||
|
||||
class Post(db.Model):
|
||||
"""帖子模型"""
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
event_id = db.Column(db.Integer, db.ForeignKey('event.id'), nullable=False)
|
||||
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
|
||||
|
||||
# 内容
|
||||
title = db.Column(db.String(200)) # 标题(可选)
|
||||
content = db.Column(db.Text, nullable=False) # 内容
|
||||
content_type = db.Column(db.String(20), default='text') # 内容类型:text/rich_text/link
|
||||
|
||||
# 时间
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
updated_at = db.Column(db.DateTime, default=beijing_now, onupdate=beijing_now)
|
||||
|
||||
# 统计
|
||||
likes_count = db.Column(db.Integer, default=0)
|
||||
comments_count = db.Column(db.Integer, default=0)
|
||||
view_count = db.Column(db.Integer, default=0)
|
||||
|
||||
# 状态
|
||||
status = db.Column(db.String(20), default='active') # active/hidden/deleted
|
||||
is_top = db.Column(db.Boolean, default=False) # 是否置顶
|
||||
|
||||
# 关系
|
||||
user = db.relationship('User', backref='posts')
|
||||
likes = db.relationship('PostLike', backref='post', lazy='dynamic')
|
||||
comments = db.relationship('Comment', backref='post', lazy='dynamic')
|
||||
|
||||
class User(db.Model):
|
||||
"""用户模型"""
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
|
||||
# 基础账号信息(注册时必填)
|
||||
username = db.Column(db.String(80), unique=True, nullable=False) # 用户名
|
||||
email = db.Column(db.String(120), unique=True, nullable=False) # 邮箱
|
||||
password_hash = db.Column(db.String(128), nullable=False) # 密码哈希
|
||||
email_confirmed = db.Column(db.Boolean, default=False) # 邮箱是否验证
|
||||
|
||||
# 账号状态
|
||||
created_at = db.Column(db.DateTime, default=beijing_now) # 注册时间
|
||||
last_seen = db.Column(db.DateTime, default=beijing_now) # 最后活跃时间
|
||||
status = db.Column(db.String(20), default='active') # 账号状态 active/banned/deleted
|
||||
|
||||
# 个人资料(可选,后续在个人中心完善)
|
||||
nickname = db.Column(db.String(30)) # 社区昵称
|
||||
avatar_url = db.Column(db.String(200)) # 头像URL
|
||||
banner_url = db.Column(db.String(200)) # 个人主页背景图
|
||||
bio = db.Column(db.String(200)) # 个人简介
|
||||
gender = db.Column(db.String(10)) # 性别
|
||||
birth_date = db.Column(db.Date) # 生日
|
||||
location = db.Column(db.String(100)) # 所在地
|
||||
|
||||
# 联系方式(可选)
|
||||
phone = db.Column(db.String(20)) # 手机号
|
||||
wechat_id = db.Column(db.String(80)) # 微信号
|
||||
|
||||
# 实名认证信息(可选)
|
||||
real_name = db.Column(db.String(30)) # 真实姓名
|
||||
id_number = db.Column(db.String(18)) # 身份证号(加密存储)
|
||||
is_verified = db.Column(db.Boolean, default=False) # 是否实名认证
|
||||
verify_time = db.Column(db.DateTime) # 实名认证时间
|
||||
|
||||
# 投资相关信息(可选)
|
||||
trading_experience = db.Column(db.Integer) # 炒股年限
|
||||
investment_style = db.Column(db.String(50)) # 投资风格
|
||||
risk_preference = db.Column(db.String(20)) # 风险偏好
|
||||
investment_amount = db.Column(db.String(20)) # 投资规模
|
||||
preferred_markets = db.Column(db.String(200), default='[]') # 偏好市场 JSON
|
||||
|
||||
# 社区信息(系统自动更新)
|
||||
user_level = db.Column(db.Integer, default=1) # 用户等级
|
||||
reputation_score = db.Column(db.Integer, default=0) # 信用积分
|
||||
contribution_point = db.Column(db.Integer, default=0) # 贡献点数
|
||||
post_count = db.Column(db.Integer, default=0) # 发帖数
|
||||
comment_count = db.Column(db.Integer, default=0) # 评论数
|
||||
follower_count = db.Column(db.Integer, default=0) # 粉丝数
|
||||
following_count = db.Column(db.Integer, default=0) # 关注数
|
||||
|
||||
# 创作者信息(可选)
|
||||
is_creator = db.Column(db.Boolean, default=False) # 是否创作者
|
||||
creator_type = db.Column(db.String(20)) # 创作者类型
|
||||
creator_tags = db.Column(db.String(200), default='[]') # 创作者标签 JSON
|
||||
|
||||
# 系统设置
|
||||
email_notifications = db.Column(db.Boolean, default=True) # 邮件通知
|
||||
sms_notifications = db.Column(db.Boolean, default=False) # 短信通知
|
||||
wechat_notifications = db.Column(db.Boolean, default=False) # 微信通知
|
||||
notification_preferences = db.Column(db.String(500), default='{}') # 通知偏好 JSON
|
||||
privacy_level = db.Column(db.String(20), default='public') # 隐私级别
|
||||
theme_preference = db.Column(db.String(20), default='light') # 主题偏好
|
||||
blocked_keywords = db.Column(db.String(500), default='[]') # 屏蔽关键词 JSON
|
||||
# 手机号验证
|
||||
phone_confirmed = db.Column(db.Boolean, default=False) # 手机是否验证
|
||||
phone_confirm_time = db.Column(db.DateTime) # 手机验证时间
|
||||
|
||||
def __init__(self, username, email=None, password=None, phone=None):
|
||||
self.username = username
|
||||
if email:
|
||||
self.email = email
|
||||
if password:
|
||||
self.set_password(password)
|
||||
if phone:
|
||||
self.phone = phone
|
||||
|
||||
def set_password(self, password):
|
||||
from werkzeug.security import generate_password_hash
|
||||
self.password_hash = generate_password_hash(password)
|
||||
|
||||
def check_password(self, password):
|
||||
from werkzeug.security import check_password_hash
|
||||
return check_password_hash(self.password_hash, password)
|
||||
|
||||
def update_last_seen(self):
|
||||
self.last_seen = beijing_now()
|
||||
db.session.commit()
|
||||
|
||||
def get_preferred_markets(self):
|
||||
try:
|
||||
return json.loads(self.preferred_markets)
|
||||
except (json.JSONDecodeError, TypeError):
|
||||
return []
|
||||
|
||||
def get_blocked_keywords(self):
|
||||
try:
|
||||
return json.loads(self.blocked_keywords)
|
||||
except (json.JSONDecodeError, TypeError):
|
||||
return []
|
||||
|
||||
def get_notification_preferences(self):
|
||||
try:
|
||||
return json.loads(self.notification_preferences)
|
||||
except (json.JSONDecodeError, TypeError):
|
||||
return {}
|
||||
|
||||
def get_creator_tags(self):
|
||||
try:
|
||||
return json.loads(self.creator_tags)
|
||||
except (json.JSONDecodeError, TypeError):
|
||||
return []
|
||||
|
||||
def set_preferred_markets(self, markets):
|
||||
self.preferred_markets = json.dumps(markets)
|
||||
|
||||
def set_blocked_keywords(self, keywords):
|
||||
self.blocked_keywords = json.dumps(keywords)
|
||||
|
||||
def set_notification_preferences(self, preferences):
|
||||
self.notification_preferences = json.dumps(preferences)
|
||||
|
||||
def set_creator_tags(self, tags):
|
||||
self.creator_tags = json.dumps(tags)
|
||||
|
||||
def to_dict(self):
|
||||
return {
|
||||
'id': self.id,
|
||||
'username': self.username,
|
||||
'email': self.email,
|
||||
'nickname': self.nickname,
|
||||
'avatar_url': self.avatar_url,
|
||||
'bio': self.bio,
|
||||
'created_at': self.created_at.isoformat() if self.created_at else None,
|
||||
'last_seen': self.last_seen.isoformat() if self.last_seen else None,
|
||||
'status': self.status,
|
||||
'user_level': self.user_level,
|
||||
'reputation_score': self.reputation_score,
|
||||
'post_count': self.post_count,
|
||||
'follower_count': self.follower_count,
|
||||
'following_count': self.following_count
|
||||
}
|
||||
|
||||
def __repr__(self):
|
||||
return f'<User {self.username}>'
|
||||
|
||||
class Comment(db.Model):
|
||||
"""评论"""
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
post_id = db.Column(db.Integer, db.ForeignKey('post.id'), nullable=False)
|
||||
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
|
||||
content = db.Column(db.Text, nullable=False)
|
||||
parent_id = db.Column(db.Integer, db.ForeignKey('comment.id')) # 父评论ID,用于回复
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
status = db.Column(db.String(20), default='active')
|
||||
|
||||
user = db.relationship('User', backref='comments')
|
||||
replies = db.relationship('Comment', backref=db.backref('parent', remote_side=[id]))
|
||||
|
||||
|
||||
class CommentLike(db.Model):
|
||||
"""评论点赞记录(基于session_id以兼容匿名点赞)"""
|
||||
__tablename__ = 'comment_like'
|
||||
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
comment_id = db.Column(db.Integer, db.ForeignKey('comment.id'), nullable=False)
|
||||
session_id = db.Column(db.String(100), nullable=False)
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
|
||||
__table_args__ = (db.UniqueConstraint('comment_id', 'session_id'),)
|
||||
|
||||
class EventFollow(db.Model):
|
||||
"""事件关注"""
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
|
||||
event_id = db.Column(db.Integer, db.ForeignKey('event.id'), nullable=False)
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
|
||||
user = db.relationship('User', backref='event_follows')
|
||||
|
||||
__table_args__ = (db.UniqueConstraint('user_id', 'event_id'),)
|
||||
|
||||
class PostLike(db.Model):
|
||||
"""帖子点赞"""
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
|
||||
post_id = db.Column(db.Integer, db.ForeignKey('post.id'), nullable=False)
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
|
||||
user = db.relationship('User', backref='post_likes')
|
||||
|
||||
__table_args__ = (db.UniqueConstraint('user_id', 'post_id'),)
|
||||
|
||||
class Event(db.Model):
|
||||
"""事件模型"""
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
title = db.Column(db.String(200), nullable=False)
|
||||
description = db.Column(db.Text)
|
||||
|
||||
# 事件类型与状态
|
||||
event_type = db.Column(db.String(50))
|
||||
status = db.Column(db.String(20), default='active')
|
||||
|
||||
# 时间相关
|
||||
start_time = db.Column(db.DateTime, default=beijing_now)
|
||||
end_time = db.Column(db.DateTime)
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
updated_at = db.Column(db.DateTime, default=beijing_now)
|
||||
|
||||
# 热度与统计
|
||||
hot_score = db.Column(db.Float, default=0)
|
||||
view_count = db.Column(db.Integer, default=0)
|
||||
trending_score = db.Column(db.Float, default=0)
|
||||
post_count = db.Column(db.Integer, default=0)
|
||||
follower_count = db.Column(db.Integer, default=0)
|
||||
|
||||
# 关联信息
|
||||
related_industries = db.Column(db.JSON)
|
||||
keywords = db.Column(db.JSON)
|
||||
files = db.Column(db.JSON)
|
||||
importance = db.Column(db.String(20))
|
||||
related_avg_chg = db.Column(db.Float, default=0)
|
||||
related_max_chg = db.Column(db.Float, default=0)
|
||||
related_week_chg = db.Column(db.Float, default=0)
|
||||
|
||||
# 新增字段
|
||||
invest_score = db.Column(db.Integer) # 超预期得分
|
||||
expectation_surprise_score = db.Column(db.Integer)
|
||||
# 创建者信息
|
||||
creator_id = db.Column(db.Integer, db.ForeignKey('user.id'))
|
||||
creator = db.relationship('User', backref='created_events')
|
||||
|
||||
# 关系
|
||||
posts = db.relationship('Post', backref='event', lazy='dynamic')
|
||||
followers = db.relationship('EventFollow', backref='event', lazy='dynamic')
|
||||
related_stocks = db.relationship('RelatedStock', backref='event', lazy='dynamic')
|
||||
historical_events = db.relationship('HistoricalEvent', backref='event', lazy='dynamic')
|
||||
related_data = db.relationship('RelatedData', backref='event', lazy='dynamic')
|
||||
related_concepts = db.relationship('RelatedConcepts', backref='event', lazy='dynamic')
|
||||
|
||||
@property
|
||||
def keywords_list(self):
|
||||
if isinstance(self.keywords, list):
|
||||
return self.keywords
|
||||
elif isinstance(self.keywords, str):
|
||||
try:
|
||||
return json.loads(self.keywords)
|
||||
except (json.JSONDecodeError, TypeError):
|
||||
return []
|
||||
return []
|
||||
|
||||
def set_keywords(self, keywords):
|
||||
if isinstance(keywords, list):
|
||||
self.keywords = keywords
|
||||
elif isinstance(keywords, str):
|
||||
try:
|
||||
self.keywords = json.loads(keywords)
|
||||
except json.JSONDecodeError:
|
||||
self.keywords = [keywords]
|
||||
else:
|
||||
self.keywords = []
|
||||
|
||||
class RelatedStock(db.Model):
|
||||
"""相关标的模型"""
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
event_id = db.Column(db.Integer, db.ForeignKey('event.id'))
|
||||
stock_code = db.Column(db.String(20)) # 股票代码
|
||||
stock_name = db.Column(db.String(100)) # 股票名称
|
||||
sector = db.Column(db.String(100)) # 关联类型
|
||||
relation_desc = db.Column(db.String(1024)) # 关联原因描述
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
updated_at = db.Column(db.DateTime, default=beijing_now, onupdate=beijing_now)
|
||||
correlation = db.Column(db.Float())
|
||||
momentum = db.Column(db.String(1024)) #动量
|
||||
|
||||
class RelatedData(db.Model):
|
||||
"""关联数据模型"""
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
event_id = db.Column(db.Integer, db.ForeignKey('event.id'))
|
||||
title = db.Column(db.String(200)) # 数据标题
|
||||
data_type = db.Column(db.String(50)) # 数据类型
|
||||
data_content = db.Column(db.JSON) # 数据内容(JSON格式)
|
||||
description = db.Column(db.Text) # 数据描述
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
|
||||
class RelatedConcepts(db.Model):
|
||||
"""关联数据模型"""
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
event_id = db.Column(db.Integer, db.ForeignKey('event.id'))
|
||||
concept_code = db.Column(db.String(20)) # 数据标题
|
||||
concept = db.Column(db.String(100)) # 数据类型
|
||||
reason = db.Column(db.Text) # 数据描述
|
||||
image_paths = db.Column(db.JSON) # 数据内容(JSON格式)
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
|
||||
@property
|
||||
def image_paths_list(self):
|
||||
if isinstance(self.image_paths, list):
|
||||
return self.image_paths
|
||||
elif isinstance(self.image_paths, str):
|
||||
try:
|
||||
return json.loads(self.image_paths)
|
||||
except (json.JSONDecodeError, TypeError):
|
||||
return []
|
||||
return []
|
||||
|
||||
def set_image_paths(self, image_paths):
|
||||
if isinstance(image_paths, list):
|
||||
self.image_paths = image_paths
|
||||
elif isinstance(image_paths, str):
|
||||
try:
|
||||
self.image_paths = json.loads(image_paths)
|
||||
except json.JSONDecodeError:
|
||||
self.image_paths = [image_paths]
|
||||
else:
|
||||
self.image_paths = []
|
||||
|
||||
def get_first_image_path(self):
|
||||
paths = self.image_paths_list
|
||||
return paths[0] if paths else None
|
||||
|
||||
class EventHotHistory(db.Model):
|
||||
"""事件热度历史记录"""
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
event_id = db.Column(db.Integer, db.ForeignKey('event.id'))
|
||||
score = db.Column(db.Float) # 总分
|
||||
interaction_score = db.Column(db.Float) # 互动分数
|
||||
follow_score = db.Column(db.Float) # 关注度分数
|
||||
view_score = db.Column(db.Float) # 浏览量分数
|
||||
recent_activity_score = db.Column(db.Float) # 最近活跃度分数
|
||||
time_decay = db.Column(db.Float) # 时间衰减因子
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
|
||||
event = db.relationship('Event', backref='hot_history')
|
||||
|
||||
class EventTransmissionNode(db.Model):
|
||||
"""事件传导节点模型"""
|
||||
__tablename__ = 'event_transmission_nodes'
|
||||
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
event_id = db.Column(db.Integer, db.ForeignKey('event.id'), nullable=False)
|
||||
node_type = db.Column(db.Enum('company', 'industry', 'policy', 'technology',
|
||||
'market', 'event', 'other'), nullable=False)
|
||||
node_name = db.Column(db.String(200), nullable=False)
|
||||
node_description = db.Column(db.Text)
|
||||
importance_score = db.Column(db.Integer, default=50)
|
||||
stock_code = db.Column(db.String(20))
|
||||
is_main_event = db.Column(db.Boolean, default=False)
|
||||
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
updated_at = db.Column(db.DateTime, default=beijing_now, onupdate=beijing_now)
|
||||
|
||||
# Relationships
|
||||
event = db.relationship('Event', backref='transmission_nodes')
|
||||
outgoing_edges = db.relationship('EventTransmissionEdge',
|
||||
foreign_keys='EventTransmissionEdge.from_node_id',
|
||||
backref='from_node', cascade='all, delete-orphan')
|
||||
incoming_edges = db.relationship('EventTransmissionEdge',
|
||||
foreign_keys='EventTransmissionEdge.to_node_id',
|
||||
backref='to_node', cascade='all, delete-orphan')
|
||||
|
||||
__table_args__ = (
|
||||
db.Index('idx_event_node_type', 'event_id', 'node_type'),
|
||||
db.Index('idx_node_name', 'node_name'),
|
||||
)
|
||||
|
||||
class EventTransmissionEdge(db.Model):
|
||||
"""事件传导边模型"""
|
||||
__tablename__ = 'event_transmission_edges'
|
||||
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
event_id = db.Column(db.Integer, db.ForeignKey('event.id'), nullable=False)
|
||||
from_node_id = db.Column(db.Integer, db.ForeignKey('event_transmission_nodes.id'), nullable=False)
|
||||
to_node_id = db.Column(db.Integer, db.ForeignKey('event_transmission_nodes.id'), nullable=False)
|
||||
|
||||
transmission_type = db.Column(db.Enum('supply_chain', 'competition', 'policy',
|
||||
'technology', 'capital_flow', 'expectation',
|
||||
'cyclic_effect', 'other'), nullable=False)
|
||||
transmission_mechanism = db.Column(db.Text)
|
||||
direction = db.Column(db.Enum('positive', 'negative', 'neutral', 'mixed'), default='neutral')
|
||||
strength = db.Column(db.Integer, default=50)
|
||||
impact = db.Column(db.Text)
|
||||
is_circular = db.Column(db.Boolean, default=False)
|
||||
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
updated_at = db.Column(db.DateTime, default=beijing_now, onupdate=beijing_now)
|
||||
|
||||
# Relationship
|
||||
event = db.relationship('Event', backref='transmission_edges')
|
||||
|
||||
__table_args__ = (
|
||||
db.Index('idx_event_edge_type', 'event_id', 'transmission_type'),
|
||||
db.Index('idx_from_to_nodes', 'from_node_id', 'to_node_id'),
|
||||
)
|
||||
|
||||
class EventSankeyFlow(db.Model):
|
||||
"""事件桑基流模型"""
|
||||
__tablename__ = 'event_sankey_flows'
|
||||
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
event_id = db.Column(db.Integer, db.ForeignKey('event.id'), nullable=False)
|
||||
|
||||
# 流的基本信息
|
||||
source_node = db.Column(db.String(200), nullable=False)
|
||||
source_type = db.Column(db.Enum('event', 'policy', 'technology', 'industry',
|
||||
'company', 'product'), nullable=False)
|
||||
source_level = db.Column(db.Integer, nullable=False, default=0)
|
||||
|
||||
target_node = db.Column(db.String(200), nullable=False)
|
||||
target_type = db.Column(db.Enum('policy', 'technology', 'industry',
|
||||
'company', 'product'), nullable=False)
|
||||
target_level = db.Column(db.Integer, nullable=False, default=1)
|
||||
|
||||
# 流量信息
|
||||
flow_value = db.Column(db.Numeric(10, 2), nullable=False)
|
||||
flow_ratio = db.Column(db.Numeric(5, 4), nullable=False)
|
||||
|
||||
# 传导机制
|
||||
transmission_path = db.Column(db.String(500))
|
||||
impact_description = db.Column(db.Text)
|
||||
evidence_strength = db.Column(db.Integer, default=50)
|
||||
|
||||
# 时间戳
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
updated_at = db.Column(db.DateTime, default=beijing_now, onupdate=beijing_now)
|
||||
|
||||
# 关系
|
||||
event = db.relationship('Event', backref='sankey_flows')
|
||||
|
||||
__table_args__ = (
|
||||
db.Index('idx_event_flow', 'event_id'),
|
||||
db.Index('idx_source_target', 'source_node', 'target_node'),
|
||||
)
|
||||
|
||||
class HistoricalEvent(db.Model):
|
||||
"""历史事件模型"""
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
event_id = db.Column(db.Integer, db.ForeignKey('event.id'))
|
||||
title = db.Column(db.String(200))
|
||||
content = db.Column(db.Text)
|
||||
event_date = db.Column(db.DateTime)
|
||||
relevance = db.Column(db.Integer) # 相关性
|
||||
importance = db.Column(db.Integer) # 重要程度
|
||||
related_stock = db.Column(db.JSON) # 保留JSON字段
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
|
||||
# 新增关系
|
||||
stocks = db.relationship('HistoricalEventStock', backref='historical_event', lazy='dynamic',
|
||||
cascade='all, delete-orphan')
|
||||
|
||||
class HistoricalEventStock(db.Model):
|
||||
"""历史事件相关股票模型"""
|
||||
__tablename__ = 'historical_event_stocks'
|
||||
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
historical_event_id = db.Column(db.Integer, db.ForeignKey('historical_event.id'), nullable=False)
|
||||
stock_code = db.Column(db.String(20), nullable=False)
|
||||
stock_name = db.Column(db.String(50))
|
||||
relation_desc = db.Column(db.Text)
|
||||
correlation = db.Column(db.Float, default=0.5)
|
||||
sector = db.Column(db.String(100))
|
||||
created_at = db.Column(db.DateTime, default=beijing_now)
|
||||
|
||||
__table_args__ = (
|
||||
db.Index('idx_historical_event_stock', 'historical_event_id', 'stock_code'),
|
||||
)
|
||||
@@ -1 +0,0 @@
|
||||
# 路由包初始化文件
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,121 +0,0 @@
|
||||
from flask import Blueprint, request, jsonify
|
||||
from datetime import datetime, timedelta
|
||||
import json
|
||||
|
||||
bp = Blueprint('calendar', __name__, url_prefix='/api/v1/calendar')
|
||||
|
||||
@bp.route('/event-counts', methods=['GET'])
|
||||
def get_event_counts():
|
||||
"""获取事件数量统计"""
|
||||
try:
|
||||
year = request.args.get('year', '2027')
|
||||
month = request.args.get('month', '10')
|
||||
|
||||
# 模拟事件数量数据
|
||||
event_counts = []
|
||||
for day in range(1, 32):
|
||||
count = (day % 7) + 1 # 模拟每天1-7个事件
|
||||
event_counts.append({
|
||||
'date': f'{year}-{month.zfill(2)}-{day:02d}',
|
||||
'count': count
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': event_counts
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting event counts: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/events', methods=['GET'])
|
||||
def get_calendar_events():
|
||||
"""获取日历事件"""
|
||||
try:
|
||||
year = request.args.get('year', '2027')
|
||||
month = request.args.get('month', '10')
|
||||
event_type = request.args.get('type', 'all')
|
||||
|
||||
# 模拟日历事件数据
|
||||
events = []
|
||||
for day in range(1, 32):
|
||||
for i in range((day % 7) + 1):
|
||||
event = {
|
||||
'id': f'{year}{month.zfill(2)}{day:02d}{i}',
|
||||
'title': f'事件{day}-{i+1}',
|
||||
'date': f'{year}-{month.zfill(2)}-{day:02d}',
|
||||
'type': ['政策', '技术', '产业', '公司'][i % 4],
|
||||
'importance': ['高', '中', '低'][i % 3],
|
||||
'status': 'active'
|
||||
}
|
||||
events.append(event)
|
||||
|
||||
# 根据类型过滤
|
||||
if event_type != 'all':
|
||||
events = [e for e in events if e['type'] == event_type]
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': events
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting calendar events: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/events/<int:event_id>', methods=['GET'])
|
||||
def get_calendar_event_detail(event_id):
|
||||
"""获取日历事件详情"""
|
||||
try:
|
||||
# 模拟事件详情
|
||||
event_detail = {
|
||||
'id': event_id,
|
||||
'title': f'事件{event_id}详情',
|
||||
'description': f'这是事件{event_id}的详细描述',
|
||||
'date': '2027-10-15',
|
||||
'type': '政策',
|
||||
'importance': '高',
|
||||
'status': 'active',
|
||||
'related_stocks': [
|
||||
{'code': '000001', 'name': '股票A'},
|
||||
{'code': '000002', 'name': '股票B'}
|
||||
],
|
||||
'keywords': ['政策', '改革', '创新'],
|
||||
'files': [
|
||||
{'name': '报告.pdf', 'url': '/files/report.pdf'},
|
||||
{'name': '数据.xlsx', 'url': '/files/data.xlsx'}
|
||||
]
|
||||
}
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': event_detail
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting calendar event detail: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
def get_event_class(count):
|
||||
"""根据事件数量获取CSS类"""
|
||||
if count == 0:
|
||||
return 'no-events'
|
||||
elif count <= 3:
|
||||
return 'few-events'
|
||||
elif count <= 6:
|
||||
return 'medium-events'
|
||||
else:
|
||||
return 'many-events'
|
||||
|
||||
def parse_json_field(field_value):
|
||||
"""解析JSON字段"""
|
||||
if isinstance(field_value, str):
|
||||
try:
|
||||
return json.loads(field_value)
|
||||
except (json.JSONDecodeError, TypeError):
|
||||
return []
|
||||
elif isinstance(field_value, (list, dict)):
|
||||
return field_value
|
||||
else:
|
||||
return []
|
||||
@@ -1,385 +0,0 @@
|
||||
from flask import Blueprint, request, jsonify
|
||||
from app import db
|
||||
from app.models import Event, RelatedStock, RelatedConcepts, HistoricalEvent, EventTransmissionNode, EventTransmissionEdge, EventSankeyFlow
|
||||
from datetime import datetime
|
||||
import json
|
||||
|
||||
bp = Blueprint('events', __name__, url_prefix='/api/events')
|
||||
|
||||
|
||||
|
||||
@bp.route('/<int:event_id>', methods=['GET'])
|
||||
def get_event_detail(event_id):
|
||||
"""获取事件详情"""
|
||||
try:
|
||||
event = Event.query.get(event_id)
|
||||
if not event:
|
||||
return jsonify({'success': False, 'error': '事件不存在'}), 404
|
||||
|
||||
# 获取相关股票
|
||||
related_stocks = RelatedStock.query.filter_by(event_id=event_id).all()
|
||||
stocks_data = []
|
||||
for stock in related_stocks:
|
||||
stocks_data.append({
|
||||
'id': stock.id,
|
||||
'stock_code': stock.stock_code,
|
||||
'stock_name': stock.stock_name,
|
||||
'sector': stock.sector,
|
||||
'relation_desc': stock.relation_desc,
|
||||
'correlation': stock.correlation,
|
||||
'momentum': stock.momentum,
|
||||
'created_at': stock.created_at.isoformat() if stock.created_at else None
|
||||
})
|
||||
|
||||
# 获取相关概念
|
||||
related_concepts = RelatedConcepts.query.filter_by(event_id=event_id).all()
|
||||
concepts_data = []
|
||||
for concept in related_concepts:
|
||||
concepts_data.append({
|
||||
'id': concept.id,
|
||||
'concept_code': concept.concept_code,
|
||||
'concept': concept.concept,
|
||||
'reason': concept.reason,
|
||||
'image_paths': concept.image_paths_list,
|
||||
'created_at': concept.created_at.isoformat() if concept.created_at else None
|
||||
})
|
||||
|
||||
event_data = {
|
||||
'id': event.id,
|
||||
'title': event.title,
|
||||
'description': event.description,
|
||||
'event_type': event.event_type,
|
||||
'status': event.status,
|
||||
'start_time': event.start_time.isoformat() if event.start_time else None,
|
||||
'end_time': event.end_time.isoformat() if event.end_time else None,
|
||||
'created_at': event.created_at.isoformat() if event.created_at else None,
|
||||
'updated_at': event.updated_at.isoformat() if event.updated_at else None,
|
||||
'hot_score': event.hot_score,
|
||||
'view_count': event.view_count,
|
||||
'trending_score': event.trending_score,
|
||||
'post_count': event.post_count,
|
||||
'follower_count': event.follower_count,
|
||||
'related_industries': event.related_industries,
|
||||
'keywords': event.keywords_list,
|
||||
'files': event.files,
|
||||
'importance': event.importance,
|
||||
'related_avg_chg': event.related_avg_chg,
|
||||
'related_max_chg': event.related_max_chg,
|
||||
'related_week_chg': event.related_week_chg,
|
||||
'invest_score': event.invest_score,
|
||||
'expectation_surprise_score': event.expectation_surprise_score,
|
||||
'related_stocks': stocks_data,
|
||||
'related_concepts': concepts_data
|
||||
}
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': event_data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting event detail: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/<int:event_id>/stocks', methods=['GET'])
|
||||
def get_related_stocks(event_id):
|
||||
"""获取事件相关股票"""
|
||||
try:
|
||||
stocks = RelatedStock.query.filter_by(event_id=event_id).all()
|
||||
stocks_data = []
|
||||
for stock in stocks:
|
||||
stocks_data.append({
|
||||
'id': stock.id,
|
||||
'stock_code': stock.stock_code,
|
||||
'stock_name': stock.stock_name,
|
||||
'sector': stock.sector,
|
||||
'relation_desc': stock.relation_desc,
|
||||
'correlation': stock.correlation,
|
||||
'momentum': stock.momentum,
|
||||
'created_at': stock.created_at.isoformat() if stock.created_at else None
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': stocks_data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting related stocks: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/<int:event_id>/stocks', methods=['POST'])
|
||||
def add_related_stock(event_id):
|
||||
"""添加相关股票"""
|
||||
try:
|
||||
data = request.get_json()
|
||||
if not data:
|
||||
return jsonify({'success': False, 'error': '请提供数据'}), 400
|
||||
|
||||
# 检查事件是否存在
|
||||
event = Event.query.get(event_id)
|
||||
if not event:
|
||||
return jsonify({'success': False, 'error': '事件不存在'}), 404
|
||||
|
||||
# 创建新的相关股票记录
|
||||
new_stock = RelatedStock(
|
||||
event_id=event_id,
|
||||
stock_code=data['stock_code'],
|
||||
stock_name=data.get('stock_name', ''),
|
||||
sector=data.get('sector', ''),
|
||||
relation_desc=data['relation_desc'],
|
||||
correlation=data.get('correlation', 0.5),
|
||||
momentum=data.get('momentum', '')
|
||||
)
|
||||
|
||||
db.session.add(new_stock)
|
||||
db.session.commit()
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'message': '相关股票添加成功',
|
||||
'data': {
|
||||
'id': new_stock.id,
|
||||
'stock_code': new_stock.stock_code,
|
||||
'stock_name': new_stock.stock_name,
|
||||
'sector': new_stock.sector,
|
||||
'relation_desc': new_stock.relation_desc,
|
||||
'correlation': new_stock.correlation,
|
||||
'momentum': new_stock.momentum
|
||||
}
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
db.session.rollback()
|
||||
print(f"Error adding related stock: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/stocks/<int:stock_id>', methods=['DELETE'])
|
||||
def delete_related_stock(stock_id):
|
||||
"""删除相关股票"""
|
||||
try:
|
||||
stock = RelatedStock.query.get(stock_id)
|
||||
if not stock:
|
||||
return jsonify({'success': False, 'error': '相关股票不存在'}), 404
|
||||
|
||||
db.session.delete(stock)
|
||||
db.session.commit()
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'message': '相关股票删除成功'
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
db.session.rollback()
|
||||
print(f"Error deleting related stock: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/<int:event_id>/concepts', methods=['GET'])
|
||||
def get_related_concepts(event_id):
|
||||
"""获取事件相关概念"""
|
||||
try:
|
||||
concepts = RelatedConcepts.query.filter_by(event_id=event_id).all()
|
||||
concepts_data = []
|
||||
for concept in concepts:
|
||||
concepts_data.append({
|
||||
'id': concept.id,
|
||||
'concept_code': concept.concept_code,
|
||||
'concept': concept.concept,
|
||||
'reason': concept.reason,
|
||||
'image_paths': concept.image_paths_list,
|
||||
'created_at': concept.created_at.isoformat() if concept.created_at else None
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': concepts_data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting related concepts: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/<int:event_id>/historical', methods=['GET'])
|
||||
def get_historical_events(event_id):
|
||||
"""获取历史事件"""
|
||||
try:
|
||||
historical_events = HistoricalEvent.query.filter_by(event_id=event_id).all()
|
||||
events_data = []
|
||||
for event in historical_events:
|
||||
events_data.append({
|
||||
'id': event.id,
|
||||
'title': event.title,
|
||||
'content': event.content,
|
||||
'event_date': event.event_date.isoformat() if event.event_date else None,
|
||||
'relevance': event.relevance,
|
||||
'importance': event.importance,
|
||||
'related_stock': event.related_stock,
|
||||
'created_at': event.created_at.isoformat() if event.created_at else None
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': events_data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting historical events: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/<int:event_id>/expectation-score', methods=['GET'])
|
||||
def get_expectation_score(event_id):
|
||||
"""获取超预期得分"""
|
||||
try:
|
||||
event = Event.query.get(event_id)
|
||||
if not event:
|
||||
return jsonify({'success': False, 'error': '事件不存在'}), 404
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': {
|
||||
'invest_score': event.invest_score,
|
||||
'expectation_surprise_score': event.expectation_surprise_score
|
||||
}
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting expectation score: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/<int:event_id>/follow', methods=['POST'])
|
||||
def toggle_event_follow(event_id):
|
||||
"""关注/取消关注事件"""
|
||||
try:
|
||||
# 这里需要用户认证,暂时返回成功
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'message': '关注状态更新成功'
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error toggling event follow: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/<int:event_id>/transmission', methods=['GET'])
|
||||
def get_transmission_chain(event_id):
|
||||
"""获取事件传导链"""
|
||||
try:
|
||||
# 获取传导节点
|
||||
nodes = EventTransmissionNode.query.filter_by(event_id=event_id).all()
|
||||
nodes_data = []
|
||||
for node in nodes:
|
||||
nodes_data.append({
|
||||
'id': node.id,
|
||||
'node_type': node.node_type,
|
||||
'node_name': node.node_name,
|
||||
'node_description': node.node_description,
|
||||
'importance_score': node.importance_score,
|
||||
'stock_code': node.stock_code,
|
||||
'is_main_event': node.is_main_event
|
||||
})
|
||||
|
||||
# 获取传导边
|
||||
edges = EventTransmissionEdge.query.filter_by(event_id=event_id).all()
|
||||
edges_data = []
|
||||
for edge in edges:
|
||||
edges_data.append({
|
||||
'id': edge.id,
|
||||
'from_node_id': edge.from_node_id,
|
||||
'to_node_id': edge.to_node_id,
|
||||
'transmission_type': edge.transmission_type,
|
||||
'transmission_mechanism': edge.transmission_mechanism,
|
||||
'direction': edge.direction,
|
||||
'strength': edge.strength,
|
||||
'impact': edge.impact,
|
||||
'is_circular': edge.is_circular
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': {
|
||||
'nodes': nodes_data,
|
||||
'edges': edges_data
|
||||
}
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting transmission chain: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/<int:event_id>/sankey-data')
|
||||
def get_event_sankey_data(event_id):
|
||||
"""获取事件桑基图数据"""
|
||||
try:
|
||||
flows = EventSankeyFlow.query.filter_by(event_id=event_id).all()
|
||||
flows_data = []
|
||||
for flow in flows:
|
||||
flows_data.append({
|
||||
'id': flow.id,
|
||||
'source_node': flow.source_node,
|
||||
'source_type': flow.source_type,
|
||||
'source_level': flow.source_level,
|
||||
'target_node': flow.target_node,
|
||||
'target_type': flow.target_type,
|
||||
'target_level': flow.target_level,
|
||||
'flow_value': float(flow.flow_value),
|
||||
'flow_ratio': float(flow.flow_ratio),
|
||||
'transmission_path': flow.transmission_path,
|
||||
'impact_description': flow.impact_description,
|
||||
'evidence_strength': flow.evidence_strength
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': flows_data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting sankey data: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/<int:event_id>/chain-analysis')
|
||||
def get_event_chain_analysis(event_id):
|
||||
"""获取事件链分析"""
|
||||
try:
|
||||
# 这里可以添加更复杂的链分析逻辑
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': {
|
||||
'event_id': event_id,
|
||||
'analysis': '链分析数据'
|
||||
}
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting chain analysis: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/<int:event_id>/chain-node/<int:node_id>', methods=['GET'])
|
||||
def get_chain_node_detail(event_id, node_id):
|
||||
"""获取链节点详情"""
|
||||
try:
|
||||
node = EventTransmissionNode.query.filter_by(
|
||||
event_id=event_id,
|
||||
id=node_id
|
||||
).first()
|
||||
|
||||
if not node:
|
||||
return jsonify({'success': False, 'error': '节点不存在'}), 404
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': {
|
||||
'id': node.id,
|
||||
'node_type': node.node_type,
|
||||
'node_name': node.node_name,
|
||||
'node_description': node.node_description,
|
||||
'importance_score': node.importance_score,
|
||||
'stock_code': node.stock_code,
|
||||
'is_main_event': node.is_main_event
|
||||
}
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting chain node detail: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
@@ -1,511 +0,0 @@
|
||||
from flask import Blueprint, request, jsonify
|
||||
import json
|
||||
|
||||
bp = Blueprint('industries', __name__, url_prefix='/api')
|
||||
|
||||
@bp.route('/classifications', methods=['GET'])
|
||||
def get_classifications():
|
||||
"""获取行业分类"""
|
||||
try:
|
||||
# 模拟行业分类数据
|
||||
classifications = [
|
||||
{
|
||||
'id': 1,
|
||||
'name': '申万一级行业',
|
||||
'description': '申万一级行业分类标准',
|
||||
'levels': [
|
||||
{'id': 1, 'name': '农林牧渔'},
|
||||
{'id': 2, 'name': '采掘'},
|
||||
{'id': 3, 'name': '化工'},
|
||||
{'id': 4, 'name': '钢铁'},
|
||||
{'id': 5, 'name': '有色金属'},
|
||||
{'id': 6, 'name': '建筑材料'},
|
||||
{'id': 7, 'name': '建筑装饰'},
|
||||
{'id': 8, 'name': '电气设备'},
|
||||
{'id': 9, 'name': '国防军工'},
|
||||
{'id': 10, 'name': '汽车'},
|
||||
{'id': 11, 'name': '家用电器'},
|
||||
{'id': 12, 'name': '纺织服装'},
|
||||
{'id': 13, 'name': '轻工制造'},
|
||||
{'id': 14, 'name': '医药生物'},
|
||||
{'id': 15, 'name': '公用事业'},
|
||||
{'id': 16, 'name': '交通运输'},
|
||||
{'id': 17, 'name': '房地产'},
|
||||
{'id': 18, 'name': '商业贸易'},
|
||||
{'id': 19, 'name': '休闲服务'},
|
||||
{'id': 20, 'name': '银行'},
|
||||
{'id': 21, 'name': '非银金融'},
|
||||
{'id': 22, 'name': '综合'},
|
||||
{'id': 23, 'name': '计算机'},
|
||||
{'id': 24, 'name': '传媒'},
|
||||
{'id': 25, 'name': '通信'},
|
||||
{'id': 26, 'name': '电子'},
|
||||
{'id': 27, 'name': '机械设备'},
|
||||
{'id': 28, 'name': '食品饮料'}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': classifications
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting classifications: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/levels', methods=['GET'])
|
||||
def get_industry_levels():
|
||||
"""获取行业层级"""
|
||||
try:
|
||||
classification_id = request.args.get('classification_id', '1')
|
||||
|
||||
# 模拟行业层级数据
|
||||
levels = [
|
||||
{
|
||||
'id': 1,
|
||||
'name': '农林牧渔',
|
||||
'code': '801010',
|
||||
'description': '农业、林业、畜牧业、渔业',
|
||||
'stock_count': 45,
|
||||
'avg_change': 1.2,
|
||||
'total_market_cap': 500000000000,
|
||||
'sub_industries': [
|
||||
{'id': 101, 'name': '种植业', 'stock_count': 20},
|
||||
{'id': 102, 'name': '林业', 'stock_count': 8},
|
||||
{'id': 103, 'name': '畜牧业', 'stock_count': 12},
|
||||
{'id': 104, 'name': '渔业', 'stock_count': 5}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 2,
|
||||
'name': '采掘',
|
||||
'code': '801020',
|
||||
'description': '煤炭、石油、天然气、有色金属矿采选',
|
||||
'stock_count': 38,
|
||||
'avg_change': 0.8,
|
||||
'total_market_cap': 800000000000,
|
||||
'sub_industries': [
|
||||
{'id': 201, 'name': '煤炭开采', 'stock_count': 15},
|
||||
{'id': 202, 'name': '石油开采', 'stock_count': 8},
|
||||
{'id': 203, 'name': '有色金属矿采选', 'stock_count': 15}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 3,
|
||||
'name': '化工',
|
||||
'code': '801030',
|
||||
'description': '化学原料、化学制品、化学纤维',
|
||||
'stock_count': 156,
|
||||
'avg_change': 1.5,
|
||||
'total_market_cap': 1200000000000,
|
||||
'sub_industries': [
|
||||
{'id': 301, 'name': '化学原料', 'stock_count': 45},
|
||||
{'id': 302, 'name': '化学制品', 'stock_count': 78},
|
||||
{'id': 303, 'name': '化学纤维', 'stock_count': 33}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 4,
|
||||
'name': '钢铁',
|
||||
'code': '801040',
|
||||
'description': '钢铁冶炼、钢铁制品',
|
||||
'stock_count': 32,
|
||||
'avg_change': 0.6,
|
||||
'total_market_cap': 600000000000,
|
||||
'sub_industries': [
|
||||
{'id': 401, 'name': '钢铁冶炼', 'stock_count': 18},
|
||||
{'id': 402, 'name': '钢铁制品', 'stock_count': 14}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 5,
|
||||
'name': '有色金属',
|
||||
'code': '801050',
|
||||
'description': '有色金属冶炼、有色金属制品',
|
||||
'stock_count': 67,
|
||||
'avg_change': 1.8,
|
||||
'total_market_cap': 900000000000,
|
||||
'sub_industries': [
|
||||
{'id': 501, 'name': '有色金属冶炼', 'stock_count': 35},
|
||||
{'id': 502, 'name': '有色金属制品', 'stock_count': 32}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 6,
|
||||
'name': '建筑材料',
|
||||
'code': '801060',
|
||||
'description': '水泥、玻璃、陶瓷、其他建材',
|
||||
'stock_count': 89,
|
||||
'avg_change': 1.1,
|
||||
'total_market_cap': 700000000000,
|
||||
'sub_industries': [
|
||||
{'id': 601, 'name': '水泥', 'stock_count': 25},
|
||||
{'id': 602, 'name': '玻璃', 'stock_count': 18},
|
||||
{'id': 603, 'name': '陶瓷', 'stock_count': 12},
|
||||
{'id': 604, 'name': '其他建材', 'stock_count': 34}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 7,
|
||||
'name': '建筑装饰',
|
||||
'code': '801070',
|
||||
'description': '房屋建设、装修装饰、园林工程',
|
||||
'stock_count': 45,
|
||||
'avg_change': 0.9,
|
||||
'total_market_cap': 400000000000,
|
||||
'sub_industries': [
|
||||
{'id': 701, 'name': '房屋建设', 'stock_count': 15},
|
||||
{'id': 702, 'name': '装修装饰', 'stock_count': 20},
|
||||
{'id': 703, 'name': '园林工程', 'stock_count': 10}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 8,
|
||||
'name': '电气设备',
|
||||
'code': '801080',
|
||||
'description': '电机、电气自动化设备、电源设备',
|
||||
'stock_count': 134,
|
||||
'avg_change': 2.1,
|
||||
'total_market_cap': 1500000000000,
|
||||
'sub_industries': [
|
||||
{'id': 801, 'name': '电机', 'stock_count': 25},
|
||||
{'id': 802, 'name': '电气自动化设备', 'stock_count': 45},
|
||||
{'id': 803, 'name': '电源设备', 'stock_count': 64}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 9,
|
||||
'name': '国防军工',
|
||||
'code': '801090',
|
||||
'description': '航天装备、航空装备、地面兵装',
|
||||
'stock_count': 28,
|
||||
'avg_change': 1.6,
|
||||
'total_market_cap': 300000000000,
|
||||
'sub_industries': [
|
||||
{'id': 901, 'name': '航天装备', 'stock_count': 8},
|
||||
{'id': 902, 'name': '航空装备', 'stock_count': 12},
|
||||
{'id': 903, 'name': '地面兵装', 'stock_count': 8}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 10,
|
||||
'name': '汽车',
|
||||
'code': '801100',
|
||||
'description': '汽车整车、汽车零部件',
|
||||
'stock_count': 78,
|
||||
'avg_change': 1.3,
|
||||
'total_market_cap': 1100000000000,
|
||||
'sub_industries': [
|
||||
{'id': 1001, 'name': '汽车整车', 'stock_count': 25},
|
||||
{'id': 1002, 'name': '汽车零部件', 'stock_count': 53}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 11,
|
||||
'name': '家用电器',
|
||||
'code': '801110',
|
||||
'description': '白色家电、小家电、家电零部件',
|
||||
'stock_count': 56,
|
||||
'avg_change': 1.0,
|
||||
'total_market_cap': 800000000000,
|
||||
'sub_industries': [
|
||||
{'id': 1101, 'name': '白色家电', 'stock_count': 20},
|
||||
{'id': 1102, 'name': '小家电', 'stock_count': 18},
|
||||
{'id': 1103, 'name': '家电零部件', 'stock_count': 18}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 12,
|
||||
'name': '纺织服装',
|
||||
'code': '801120',
|
||||
'description': '纺织制造、服装家纺',
|
||||
'stock_count': 67,
|
||||
'avg_change': 0.7,
|
||||
'total_market_cap': 500000000000,
|
||||
'sub_industries': [
|
||||
{'id': 1201, 'name': '纺织制造', 'stock_count': 35},
|
||||
{'id': 1202, 'name': '服装家纺', 'stock_count': 32}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 13,
|
||||
'name': '轻工制造',
|
||||
'code': '801130',
|
||||
'description': '造纸、包装印刷、家用轻工',
|
||||
'stock_count': 89,
|
||||
'avg_change': 0.9,
|
||||
'total_market_cap': 600000000000,
|
||||
'sub_industries': [
|
||||
{'id': 1301, 'name': '造纸', 'stock_count': 25},
|
||||
{'id': 1302, 'name': '包装印刷', 'stock_count': 30},
|
||||
{'id': 1303, 'name': '家用轻工', 'stock_count': 34}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 14,
|
||||
'name': '医药生物',
|
||||
'code': '801140',
|
||||
'description': '化学制药、中药、生物制品、医疗器械',
|
||||
'stock_count': 234,
|
||||
'avg_change': 1.9,
|
||||
'total_market_cap': 2500000000000,
|
||||
'sub_industries': [
|
||||
{'id': 1401, 'name': '化学制药', 'stock_count': 78},
|
||||
{'id': 1402, 'name': '中药', 'stock_count': 45},
|
||||
{'id': 1403, 'name': '生物制品', 'stock_count': 56},
|
||||
{'id': 1404, 'name': '医疗器械', 'stock_count': 55}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 15,
|
||||
'name': '公用事业',
|
||||
'code': '801150',
|
||||
'description': '电力、燃气、水务',
|
||||
'stock_count': 78,
|
||||
'avg_change': 0.5,
|
||||
'total_market_cap': 900000000000,
|
||||
'sub_industries': [
|
||||
{'id': 1501, 'name': '电力', 'stock_count': 45},
|
||||
{'id': 1502, 'name': '燃气', 'stock_count': 18},
|
||||
{'id': 1503, 'name': '水务', 'stock_count': 15}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 16,
|
||||
'name': '交通运输',
|
||||
'code': '801160',
|
||||
'description': '港口、公路、铁路、航空',
|
||||
'stock_count': 67,
|
||||
'avg_change': 0.8,
|
||||
'total_market_cap': 800000000000,
|
||||
'sub_industries': [
|
||||
{'id': 1601, 'name': '港口', 'stock_count': 15},
|
||||
{'id': 1602, 'name': '公路', 'stock_count': 20},
|
||||
{'id': 1603, 'name': '铁路', 'stock_count': 12},
|
||||
{'id': 1604, 'name': '航空', 'stock_count': 20}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 17,
|
||||
'name': '房地产',
|
||||
'code': '801170',
|
||||
'description': '房地产开发、房地产服务',
|
||||
'stock_count': 89,
|
||||
'avg_change': 0.6,
|
||||
'total_market_cap': 1200000000000,
|
||||
'sub_industries': [
|
||||
{'id': 1701, 'name': '房地产开发', 'stock_count': 65},
|
||||
{'id': 1702, 'name': '房地产服务', 'stock_count': 24}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 18,
|
||||
'name': '商业贸易',
|
||||
'code': '801180',
|
||||
'description': '贸易、零售',
|
||||
'stock_count': 78,
|
||||
'avg_change': 0.7,
|
||||
'total_market_cap': 600000000000,
|
||||
'sub_industries': [
|
||||
{'id': 1801, 'name': '贸易', 'stock_count': 35},
|
||||
{'id': 1802, 'name': '零售', 'stock_count': 43}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 19,
|
||||
'name': '休闲服务',
|
||||
'code': '801190',
|
||||
'description': '景点、酒店、旅游综合',
|
||||
'stock_count': 34,
|
||||
'avg_change': 1.2,
|
||||
'total_market_cap': 300000000000,
|
||||
'sub_industries': [
|
||||
{'id': 1901, 'name': '景点', 'stock_count': 12},
|
||||
{'id': 1902, 'name': '酒店', 'stock_count': 15},
|
||||
{'id': 1903, 'name': '旅游综合', 'stock_count': 7}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 20,
|
||||
'name': '银行',
|
||||
'code': '801200',
|
||||
'description': '银行',
|
||||
'stock_count': 28,
|
||||
'avg_change': 0.4,
|
||||
'total_market_cap': 8000000000000,
|
||||
'sub_industries': [
|
||||
{'id': 2001, 'name': '银行', 'stock_count': 28}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 21,
|
||||
'name': '非银金融',
|
||||
'code': '801210',
|
||||
'description': '保险、证券、多元金融',
|
||||
'stock_count': 45,
|
||||
'avg_change': 0.8,
|
||||
'total_market_cap': 2000000000000,
|
||||
'sub_industries': [
|
||||
{'id': 2101, 'name': '保险', 'stock_count': 8},
|
||||
{'id': 2102, 'name': '证券', 'stock_count': 25},
|
||||
{'id': 2103, 'name': '多元金融', 'stock_count': 12}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 22,
|
||||
'name': '综合',
|
||||
'code': '801220',
|
||||
'description': '综合',
|
||||
'stock_count': 23,
|
||||
'avg_change': 0.6,
|
||||
'total_market_cap': 200000000000,
|
||||
'sub_industries': [
|
||||
{'id': 2201, 'name': '综合', 'stock_count': 23}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 23,
|
||||
'name': '计算机',
|
||||
'code': '801230',
|
||||
'description': '计算机设备、计算机应用',
|
||||
'stock_count': 156,
|
||||
'avg_change': 2.3,
|
||||
'total_market_cap': 1800000000000,
|
||||
'sub_industries': [
|
||||
{'id': 2301, 'name': '计算机设备', 'stock_count': 45},
|
||||
{'id': 2302, 'name': '计算机应用', 'stock_count': 111}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 24,
|
||||
'name': '传媒',
|
||||
'code': '801240',
|
||||
'description': '文化传媒、营销传播',
|
||||
'stock_count': 78,
|
||||
'avg_change': 1.4,
|
||||
'total_market_cap': 700000000000,
|
||||
'sub_industries': [
|
||||
{'id': 2401, 'name': '文化传媒', 'stock_count': 45},
|
||||
{'id': 2402, 'name': '营销传播', 'stock_count': 33}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 25,
|
||||
'name': '通信',
|
||||
'code': '801250',
|
||||
'description': '通信设备、通信运营',
|
||||
'stock_count': 45,
|
||||
'avg_change': 1.7,
|
||||
'total_market_cap': 600000000000,
|
||||
'sub_industries': [
|
||||
{'id': 2501, 'name': '通信设备', 'stock_count': 30},
|
||||
{'id': 2502, 'name': '通信运营', 'stock_count': 15}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 26,
|
||||
'name': '电子',
|
||||
'code': '801260',
|
||||
'description': '半导体、电子制造、光学光电子',
|
||||
'stock_count': 178,
|
||||
'avg_change': 2.0,
|
||||
'total_market_cap': 2000000000000,
|
||||
'sub_industries': [
|
||||
{'id': 2601, 'name': '半导体', 'stock_count': 45},
|
||||
{'id': 2602, 'name': '电子制造', 'stock_count': 78},
|
||||
{'id': 2603, 'name': '光学光电子', 'stock_count': 55}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 27,
|
||||
'name': '机械设备',
|
||||
'code': '801270',
|
||||
'description': '通用机械、专用设备、仪器仪表',
|
||||
'stock_count': 234,
|
||||
'avg_change': 1.1,
|
||||
'total_market_cap': 1500000000000,
|
||||
'sub_industries': [
|
||||
{'id': 2701, 'name': '通用机械', 'stock_count': 89},
|
||||
{'id': 2702, 'name': '专用设备', 'stock_count': 98},
|
||||
{'id': 2703, 'name': '仪器仪表', 'stock_count': 47}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 28,
|
||||
'name': '食品饮料',
|
||||
'code': '801280',
|
||||
'description': '食品加工、饮料制造',
|
||||
'stock_count': 67,
|
||||
'avg_change': 1.3,
|
||||
'total_market_cap': 1000000000000,
|
||||
'sub_industries': [
|
||||
{'id': 2801, 'name': '食品加工', 'stock_count': 35},
|
||||
{'id': 2802, 'name': '饮料制造', 'stock_count': 32}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': levels
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting industry levels: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/info', methods=['GET'])
|
||||
def get_industry_info():
|
||||
"""获取行业信息"""
|
||||
try:
|
||||
industry_id = request.args.get('industry_id')
|
||||
|
||||
if not industry_id:
|
||||
return jsonify({'success': False, 'error': '请提供行业ID'}), 400
|
||||
|
||||
# 模拟行业信息
|
||||
industry_info = {
|
||||
'id': industry_id,
|
||||
'name': f'行业{industry_id}',
|
||||
'code': f'801{industry_id.zfill(3)}',
|
||||
'description': f'这是行业{industry_id}的详细描述',
|
||||
'stock_count': 50,
|
||||
'avg_change': 1.5,
|
||||
'total_market_cap': 800000000000,
|
||||
'pe_ratio': 15.6,
|
||||
'pb_ratio': 2.3,
|
||||
'roe': 8.5,
|
||||
'top_stocks': [
|
||||
{'code': '000001', 'name': '龙头股A', 'weight': 0.15},
|
||||
{'code': '000002', 'name': '龙头股B', 'weight': 0.12},
|
||||
{'code': '000003', 'name': '龙头股C', 'weight': 0.10}
|
||||
],
|
||||
'sub_industries': [
|
||||
{'id': 1, 'name': '子行业A', 'stock_count': 20},
|
||||
{'id': 2, 'name': '子行业B', 'stock_count': 18},
|
||||
{'id': 3, 'name': '子行业C', 'stock_count': 12}
|
||||
],
|
||||
'performance': {
|
||||
'daily': 1.5,
|
||||
'weekly': 3.2,
|
||||
'monthly': 8.5,
|
||||
'quarterly': 12.3,
|
||||
'yearly': 25.6
|
||||
},
|
||||
'trend': {
|
||||
'direction': 'up',
|
||||
'strength': 'medium',
|
||||
'duration': '3 months'
|
||||
}
|
||||
}
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': industry_info
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting industry info: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
@@ -1,469 +0,0 @@
|
||||
from flask import Blueprint, request, jsonify
|
||||
import pandas as pd
|
||||
import json
|
||||
from datetime import datetime
|
||||
|
||||
bp = Blueprint('limitanalyse', __name__, url_prefix='/api/limit-analyse')
|
||||
|
||||
@bp.route('/available-dates', methods=['GET'])
|
||||
def get_available_dates():
|
||||
"""获取可用日期列表"""
|
||||
try:
|
||||
# 模拟可用日期
|
||||
dates = [
|
||||
'2025-07-16',
|
||||
'2025-07-15',
|
||||
'2025-07-14',
|
||||
'2025-07-11',
|
||||
'2025-07-10'
|
||||
]
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': dates
|
||||
})
|
||||
except Exception as e:
|
||||
print(f"Error getting available dates: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
def load_stock_data(datestr):
|
||||
"""加载股票数据"""
|
||||
try:
|
||||
# 模拟股票数据
|
||||
data = []
|
||||
for i in range(100):
|
||||
data.append({
|
||||
'code': f'00000{i:03d}',
|
||||
'name': f'股票{i}',
|
||||
'price': 10.0 + i * 0.1,
|
||||
'change': (i % 10 - 5) * 0.5,
|
||||
'sector': f'板块{i % 5}',
|
||||
'limit_type': '涨停' if i % 10 == 0 else '正常',
|
||||
'volume': 1000000 + i * 50000,
|
||||
'amount': 10000000 + i * 500000
|
||||
})
|
||||
|
||||
return pd.DataFrame(data)
|
||||
except Exception as e:
|
||||
print(f"Error loading stock data: {e}")
|
||||
return pd.DataFrame()
|
||||
|
||||
@bp.route('/data', methods=['GET'])
|
||||
def get_analysis_data():
|
||||
"""获取分析数据"""
|
||||
try:
|
||||
date = request.args.get('date', '2025-07-16')
|
||||
|
||||
# 加载数据
|
||||
df = load_stock_data(date)
|
||||
if df.empty:
|
||||
return jsonify({'success': False, 'error': '数据加载失败'}), 500
|
||||
|
||||
# 统计信息
|
||||
total_stocks = len(df)
|
||||
limit_up_stocks = len(df[df['limit_type'] == '涨停'])
|
||||
limit_down_stocks = len(df[df['limit_type'] == '跌停'])
|
||||
|
||||
# 板块统计
|
||||
sector_stats = df.groupby('sector').agg({
|
||||
'code': 'count',
|
||||
'change': 'mean',
|
||||
'volume': 'sum'
|
||||
}).reset_index()
|
||||
|
||||
sector_data = []
|
||||
for _, row in sector_stats.iterrows():
|
||||
sector_data.append({
|
||||
'sector': row['sector'],
|
||||
'stock_count': int(row['code']),
|
||||
'avg_change': round(row['change'], 2),
|
||||
'total_volume': int(row['volume'])
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': {
|
||||
'date': date,
|
||||
'total_stocks': total_stocks,
|
||||
'limit_up_stocks': limit_up_stocks,
|
||||
'limit_down_stocks': limit_down_stocks,
|
||||
'sector_stats': sector_data
|
||||
}
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting analysis data: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/sector-data', methods=['GET'])
|
||||
def get_sector_data():
|
||||
"""获取板块数据"""
|
||||
try:
|
||||
date = request.args.get('date', '2025-07-16')
|
||||
|
||||
# 加载数据
|
||||
df = load_stock_data(date)
|
||||
if df.empty:
|
||||
return jsonify({'success': False, 'error': '数据加载失败'}), 500
|
||||
|
||||
# 板块统计
|
||||
sector_stats = df.groupby('sector').agg({
|
||||
'code': 'count',
|
||||
'change': 'mean',
|
||||
'volume': 'sum',
|
||||
'amount': 'sum'
|
||||
}).reset_index()
|
||||
|
||||
sector_data = []
|
||||
for _, row in sector_stats.iterrows():
|
||||
sector_data.append({
|
||||
'sector': row['sector'],
|
||||
'stock_count': int(row['code']),
|
||||
'avg_change': round(row['change'], 2),
|
||||
'total_volume': int(row['volume']),
|
||||
'total_amount': int(row['amount'])
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': sector_data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting sector data: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/word-cloud', methods=['GET'])
|
||||
def get_word_cloud_data():
|
||||
"""获取词云数据"""
|
||||
try:
|
||||
date = request.args.get('date', '2025-07-16')
|
||||
|
||||
# 模拟词云数据
|
||||
word_data = [
|
||||
{'word': '科技', 'value': 100},
|
||||
{'word': '新能源', 'value': 85},
|
||||
{'word': '医药', 'value': 70},
|
||||
{'word': '消费', 'value': 65},
|
||||
{'word': '金融', 'value': 50},
|
||||
{'word': '地产', 'value': 45},
|
||||
{'word': '制造', 'value': 40},
|
||||
{'word': '农业', 'value': 35},
|
||||
{'word': '传媒', 'value': 30},
|
||||
{'word': '环保', 'value': 25}
|
||||
]
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': word_data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting word cloud data: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/chart-data', methods=['GET'])
|
||||
def get_chart_data():
|
||||
"""获取图表数据"""
|
||||
try:
|
||||
date = request.args.get('date', '2025-07-16')
|
||||
|
||||
# 模拟图表数据
|
||||
chart_data = {
|
||||
'limit_up_distribution': [
|
||||
{'sector': '科技', 'count': 15},
|
||||
{'sector': '新能源', 'count': 12},
|
||||
{'sector': '医药', 'count': 10},
|
||||
{'sector': '消费', 'count': 8},
|
||||
{'sector': '金融', 'count': 6}
|
||||
],
|
||||
'sector_performance': [
|
||||
{'sector': '科技', 'change': 2.5},
|
||||
{'sector': '新能源', 'change': 1.8},
|
||||
{'sector': '医药', 'change': 1.2},
|
||||
{'sector': '消费', 'change': 0.8},
|
||||
{'sector': '金融', 'change': 0.5}
|
||||
]
|
||||
}
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': chart_data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting chart data: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/stock-details', methods=['GET'])
|
||||
def get_stock_details():
|
||||
"""获取股票详情"""
|
||||
try:
|
||||
code = request.args.get('code')
|
||||
date = request.args.get('date', '2025-07-16')
|
||||
|
||||
if not code:
|
||||
return jsonify({'success': False, 'error': '请提供股票代码'}), 400
|
||||
|
||||
# 模拟股票详情
|
||||
stock_detail = {
|
||||
'code': code,
|
||||
'name': f'股票{code}',
|
||||
'price': 15.50,
|
||||
'change': 2.5,
|
||||
'sector': '科技',
|
||||
'volume': 1500000,
|
||||
'amount': 23250000,
|
||||
'limit_type': '涨停',
|
||||
'turnover_rate': 3.2,
|
||||
'market_cap': 15500000000
|
||||
}
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': stock_detail
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting stock details: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/sector-analysis', methods=['GET'])
|
||||
def get_sector_analysis():
|
||||
"""获取板块分析"""
|
||||
try:
|
||||
sector = request.args.get('sector')
|
||||
date = request.args.get('date', '2025-07-16')
|
||||
|
||||
if not sector:
|
||||
return jsonify({'success': False, 'error': '请提供板块名称'}), 400
|
||||
|
||||
# 模拟板块分析数据
|
||||
sector_analysis = {
|
||||
'sector': sector,
|
||||
'stock_count': 25,
|
||||
'avg_change': 1.8,
|
||||
'limit_up_count': 8,
|
||||
'limit_down_count': 2,
|
||||
'total_volume': 50000000,
|
||||
'total_amount': 750000000,
|
||||
'top_stocks': [
|
||||
{'code': '000001', 'name': '股票A', 'change': 10.0},
|
||||
{'code': '000002', 'name': '股票B', 'change': 9.5},
|
||||
{'code': '000003', 'name': '股票C', 'change': 8.8}
|
||||
]
|
||||
}
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': sector_analysis
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting sector analysis: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/trend-analysis', methods=['GET'])
|
||||
def get_trend_analysis():
|
||||
"""获取趋势分析"""
|
||||
try:
|
||||
date = request.args.get('date', '2025-07-16')
|
||||
|
||||
# 模拟趋势分析数据
|
||||
trend_data = {
|
||||
'limit_up_trend': [
|
||||
{'date': '2025-07-10', 'count': 45},
|
||||
{'date': '2025-07-11', 'count': 52},
|
||||
{'date': '2025-07-14', 'count': 48},
|
||||
{'date': '2025-07-15', 'count': 55},
|
||||
{'date': '2025-07-16', 'count': 51}
|
||||
],
|
||||
'sector_trend': [
|
||||
{'sector': '科技', 'trend': 'up'},
|
||||
{'sector': '新能源', 'trend': 'up'},
|
||||
{'sector': '医药', 'trend': 'stable'},
|
||||
{'sector': '消费', 'trend': 'down'},
|
||||
{'sector': '金融', 'trend': 'stable'}
|
||||
]
|
||||
}
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': trend_data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting trend analysis: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/heat-map', methods=['GET'])
|
||||
def get_heat_map_data():
|
||||
"""获取热力图数据"""
|
||||
try:
|
||||
date = request.args.get('date', '2025-07-16')
|
||||
|
||||
# 模拟热力图数据
|
||||
heat_map_data = []
|
||||
sectors = ['科技', '新能源', '医药', '消费', '金融', '地产', '制造', '农业']
|
||||
|
||||
for i, sector in enumerate(sectors):
|
||||
for j in range(8):
|
||||
heat_map_data.append({
|
||||
'sector': sector,
|
||||
'metric': f'指标{j+1}',
|
||||
'value': (i + j) % 10 + 1
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': heat_map_data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting heat map data: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/correlation-analysis', methods=['GET'])
|
||||
def get_correlation_analysis():
|
||||
"""获取相关性分析"""
|
||||
try:
|
||||
date = request.args.get('date', '2025-07-16')
|
||||
|
||||
# 模拟相关性分析数据
|
||||
correlation_data = {
|
||||
'sector_correlations': [
|
||||
{'sector1': '科技', 'sector2': '新能源', 'correlation': 0.85},
|
||||
{'sector1': '医药', 'sector2': '消费', 'correlation': 0.72},
|
||||
{'sector1': '金融', 'sector2': '地产', 'correlation': 0.68},
|
||||
{'sector1': '科技', 'sector2': '医药', 'correlation': 0.45},
|
||||
{'sector1': '新能源', 'sector2': '制造', 'correlation': 0.78}
|
||||
],
|
||||
'stock_correlations': [
|
||||
{'stock1': '000001', 'stock2': '000002', 'correlation': 0.92},
|
||||
{'stock1': '000003', 'stock2': '000004', 'correlation': 0.88},
|
||||
{'stock1': '000005', 'stock2': '000006', 'correlation': 0.76}
|
||||
]
|
||||
}
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': correlation_data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting correlation analysis: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/export-data', methods=['POST'])
|
||||
def export_data():
|
||||
"""导出数据"""
|
||||
try:
|
||||
data = request.get_json()
|
||||
date = data.get('date', '2025-07-16')
|
||||
export_type = data.get('type', 'excel')
|
||||
|
||||
# 模拟导出
|
||||
filename = f'limit_analyse_{date}.{export_type}'
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'message': '数据导出成功',
|
||||
'data': {
|
||||
'filename': filename,
|
||||
'download_url': f'/downloads/{filename}'
|
||||
}
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error exporting data: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/high-position-stocks', methods=['GET'])
|
||||
def get_high_position_stocks():
|
||||
"""获取高位股统计数据"""
|
||||
try:
|
||||
date = request.args.get('date', datetime.now().strftime('%Y%m%d'))
|
||||
|
||||
# 模拟高位股数据 - 实际使用时需要连接真实的数据库
|
||||
# 根据用户提供的表结构,查询连续涨停天数较多的股票
|
||||
high_position_stocks = [
|
||||
{
|
||||
'stock_code': '000001',
|
||||
'stock_name': '平安银行',
|
||||
'price': 15.68,
|
||||
'increase_rate': 10.02,
|
||||
'limit_up_days': 5,
|
||||
'continuous_limit_up': 3,
|
||||
'industry': '银行',
|
||||
'turnover_rate': 3.45,
|
||||
'market_cap': 32000000000
|
||||
},
|
||||
{
|
||||
'stock_code': '000002',
|
||||
'stock_name': '万科A',
|
||||
'price': 18.92,
|
||||
'increase_rate': 9.98,
|
||||
'limit_up_days': 4,
|
||||
'continuous_limit_up': 2,
|
||||
'industry': '房地产',
|
||||
'turnover_rate': 5.67,
|
||||
'market_cap': 21000000000
|
||||
},
|
||||
{
|
||||
'stock_code': '600036',
|
||||
'stock_name': '招商银行',
|
||||
'price': 42.15,
|
||||
'increase_rate': 8.45,
|
||||
'limit_up_days': 6,
|
||||
'continuous_limit_up': 4,
|
||||
'industry': '银行',
|
||||
'turnover_rate': 2.89,
|
||||
'market_cap': 105000000000
|
||||
},
|
||||
{
|
||||
'stock_code': '000858',
|
||||
'stock_name': '五粮液',
|
||||
'price': 168.50,
|
||||
'increase_rate': 7.23,
|
||||
'limit_up_days': 3,
|
||||
'continuous_limit_up': 2,
|
||||
'industry': '白酒',
|
||||
'turnover_rate': 1.56,
|
||||
'market_cap': 650000000000
|
||||
},
|
||||
{
|
||||
'stock_code': '002415',
|
||||
'stock_name': '海康威视',
|
||||
'price': 35.68,
|
||||
'increase_rate': 6.89,
|
||||
'limit_up_days': 4,
|
||||
'continuous_limit_up': 3,
|
||||
'industry': '安防',
|
||||
'turnover_rate': 4.12,
|
||||
'market_cap': 33000000000
|
||||
}
|
||||
]
|
||||
|
||||
# 统计信息
|
||||
total_count = len(high_position_stocks)
|
||||
avg_continuous_days = sum(stock['continuous_limit_up'] for stock in high_position_stocks) / total_count if total_count > 0 else 0
|
||||
|
||||
# 按连续涨停天数排序
|
||||
high_position_stocks.sort(key=lambda x: x['continuous_limit_up'], reverse=True)
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': {
|
||||
'stocks': high_position_stocks,
|
||||
'statistics': {
|
||||
'total_count': total_count,
|
||||
'avg_continuous_days': round(avg_continuous_days, 2),
|
||||
'max_continuous_days': max([stock['continuous_limit_up'] for stock in high_position_stocks], default=0),
|
||||
'industry_distribution': {}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting high position stocks: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
@@ -1,241 +0,0 @@
|
||||
from flask import Blueprint, request, jsonify
|
||||
from app import db
|
||||
from clickhouse_driver import Client
|
||||
import pandas as pd
|
||||
from datetime import datetime, timedelta
|
||||
import pytz
|
||||
|
||||
bp = Blueprint('stocks', __name__, url_prefix='/api/stock')
|
||||
|
||||
def get_clickhouse_client():
|
||||
"""获取ClickHouse客户端"""
|
||||
return Client('localhost', port=9000, user='default', password='', database='default')
|
||||
|
||||
@bp.route('/quotes', methods=['GET', 'POST'])
|
||||
def get_stock_quotes():
|
||||
"""获取股票实时报价"""
|
||||
try:
|
||||
if request.method == 'GET':
|
||||
# GET 请求从 URL 参数获取数据
|
||||
codes = request.args.get('codes', '').split(',')
|
||||
event_time_str = request.args.get('event_time')
|
||||
else:
|
||||
# POST 请求从 JSON 获取数据
|
||||
codes = request.json.get('codes', [])
|
||||
event_time_str = request.json.get('event_time')
|
||||
|
||||
if not codes:
|
||||
return jsonify({'success': False, 'error': '请提供股票代码'}), 400
|
||||
|
||||
# 过滤空字符串
|
||||
codes = [code.strip() for code in codes if code.strip()]
|
||||
|
||||
if not codes:
|
||||
return jsonify({'success': False, 'error': '请提供有效的股票代码'}), 400
|
||||
|
||||
# 解析事件时间
|
||||
event_time = None
|
||||
if event_time_str:
|
||||
try:
|
||||
event_time = datetime.fromisoformat(event_time_str.replace('Z', '+00:00'))
|
||||
except ValueError:
|
||||
return jsonify({'success': False, 'error': '事件时间格式错误'}), 400
|
||||
|
||||
# 获取当前时间
|
||||
now = datetime.now(pytz.timezone('Asia/Shanghai'))
|
||||
|
||||
# 如果提供了事件时间,使用事件时间;否则使用当前时间
|
||||
target_time = event_time if event_time else now
|
||||
|
||||
# 获取交易日和交易时间
|
||||
def get_trading_day_and_times(event_datetime):
|
||||
"""获取交易日和交易时间列表"""
|
||||
# 这里简化处理,实际应该查询交易日历
|
||||
trading_day = event_datetime.strftime('%Y-%m-%d')
|
||||
|
||||
# 生成交易时间列表 (9:30-11:30, 13:00-15:00)
|
||||
morning_times = [f"{trading_day} {hour:02d}:{minute:02d}"
|
||||
for hour in range(9, 12)
|
||||
for minute in range(0, 60, 1)
|
||||
if not (hour == 9 and minute < 30) and not (hour == 11 and minute > 30)]
|
||||
|
||||
afternoon_times = [f"{trading_day} {hour:02d}:{minute:02d}"
|
||||
for hour in range(13, 16)
|
||||
for minute in range(0, 60, 1)]
|
||||
|
||||
return trading_day, morning_times + afternoon_times
|
||||
|
||||
trading_day, trading_times = get_trading_day_and_times(target_time)
|
||||
|
||||
# 模拟股票数据
|
||||
results = {}
|
||||
for code in codes:
|
||||
# 这里应该从ClickHouse或其他数据源获取真实数据
|
||||
# 现在使用模拟数据
|
||||
import random
|
||||
base_price = 10.0 + random.random() * 20.0
|
||||
change = (random.random() - 0.5) * 2.0
|
||||
|
||||
results[code] = {
|
||||
'price': round(base_price, 2),
|
||||
'change': round(change, 2),
|
||||
'name': f'股票{code}'
|
||||
}
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'data': results
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting stock quotes: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
@bp.route('/<stock_code>/kline')
|
||||
def get_stock_kline(stock_code):
|
||||
"""获取股票K线数据"""
|
||||
try:
|
||||
chart_type = request.args.get('type', 'daily')
|
||||
event_time_str = request.args.get('event_time')
|
||||
|
||||
if not event_time_str:
|
||||
return jsonify({'success': False, 'error': '请提供事件时间'}), 400
|
||||
|
||||
try:
|
||||
event_datetime = datetime.fromisoformat(event_time_str.replace('Z', '+00:00'))
|
||||
except ValueError:
|
||||
return jsonify({'success': False, 'error': '事件时间格式错误'}), 400
|
||||
|
||||
# 获取股票名称(这里简化处理)
|
||||
stock_name = f'股票{stock_code}'
|
||||
|
||||
if chart_type == 'daily':
|
||||
return get_daily_kline(stock_code, event_datetime, stock_name)
|
||||
elif chart_type == 'minute':
|
||||
return get_minute_kline(stock_code, event_datetime, stock_name)
|
||||
elif chart_type == 'timeline':
|
||||
return get_timeline_data(stock_code, event_datetime, stock_name)
|
||||
else:
|
||||
return jsonify({'error': f'Unsupported chart type: {chart_type}'}), 400
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting stock kline: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
def get_daily_kline(stock_code, event_datetime, stock_name):
|
||||
"""获取日K线数据"""
|
||||
try:
|
||||
# 模拟日K线数据
|
||||
data = []
|
||||
base_price = 10.0
|
||||
for i in range(30):
|
||||
date = (event_datetime - timedelta(days=30-i)).strftime('%Y-%m-%d')
|
||||
open_price = base_price + (i * 0.1) + (i % 3 - 1) * 0.5
|
||||
close_price = open_price + (i % 5 - 2) * 0.3
|
||||
high_price = max(open_price, close_price) + 0.2
|
||||
low_price = min(open_price, close_price) - 0.2
|
||||
volume = 1000000 + i * 50000
|
||||
|
||||
data.append({
|
||||
'date': date,
|
||||
'open': round(open_price, 2),
|
||||
'close': round(close_price, 2),
|
||||
'high': round(high_price, 2),
|
||||
'low': round(low_price, 2),
|
||||
'volume': volume
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'code': stock_code,
|
||||
'name': stock_name,
|
||||
'trade_date': event_datetime.strftime('%Y-%m-%d'),
|
||||
'data': data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting daily kline: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
def get_minute_kline(stock_code, event_datetime, stock_name):
|
||||
"""获取分钟K线数据"""
|
||||
try:
|
||||
# 模拟分钟K线数据
|
||||
data = []
|
||||
base_price = 10.0
|
||||
trading_times = []
|
||||
|
||||
# 生成交易时间
|
||||
for hour in range(9, 16):
|
||||
if hour == 12:
|
||||
continue
|
||||
for minute in range(0, 60):
|
||||
if (hour == 9 and minute < 30) or (hour == 11 and minute > 30):
|
||||
continue
|
||||
trading_times.append(f"{hour:02d}:{minute:02d}")
|
||||
|
||||
for i, time in enumerate(trading_times):
|
||||
open_price = base_price + (i * 0.01) + (i % 10 - 5) * 0.02
|
||||
close_price = open_price + (i % 7 - 3) * 0.01
|
||||
high_price = max(open_price, close_price) + 0.01
|
||||
low_price = min(open_price, close_price) - 0.01
|
||||
volume = 50000 + i * 1000
|
||||
|
||||
data.append({
|
||||
'time': time,
|
||||
'open': round(open_price, 2),
|
||||
'close': round(close_price, 2),
|
||||
'high': round(high_price, 2),
|
||||
'low': round(low_price, 2),
|
||||
'volume': volume
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'code': stock_code,
|
||||
'name': stock_name,
|
||||
'trade_date': event_datetime.strftime('%Y-%m-%d'),
|
||||
'data': data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting minute kline: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
|
||||
def get_timeline_data(stock_code, event_datetime, stock_name):
|
||||
"""获取分时图数据"""
|
||||
try:
|
||||
# 模拟分时图数据
|
||||
data = []
|
||||
base_price = 10.0
|
||||
trading_times = []
|
||||
|
||||
# 生成交易时间
|
||||
for hour in range(9, 16):
|
||||
if hour == 12:
|
||||
continue
|
||||
for minute in range(0, 60):
|
||||
if (hour == 9 and minute < 30) or (hour == 11 and minute > 30):
|
||||
continue
|
||||
trading_times.append(f"{hour:02d}:{minute:02d}")
|
||||
|
||||
for i, time in enumerate(trading_times):
|
||||
price = base_price + (i * 0.01) + (i % 10 - 5) * 0.02
|
||||
avg_price = price + (i % 5 - 2) * 0.01
|
||||
volume = 50000 + i * 1000
|
||||
|
||||
data.append({
|
||||
'time': time,
|
||||
'price': round(price, 2),
|
||||
'avg_price': round(avg_price, 2),
|
||||
'volume': volume
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'code': stock_code,
|
||||
'name': stock_name,
|
||||
'trade_date': event_datetime.strftime('%Y-%m-%d'),
|
||||
'data': data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error getting timeline data: {e}")
|
||||
return jsonify({'success': False, 'error': str(e)}), 500
|
||||
20
package.json
20
package.json
@@ -20,6 +20,7 @@
|
||||
"@fullcalendar/react": "^5.9.0",
|
||||
"@react-three/drei": "^9.11.3",
|
||||
"@react-three/fiber": "^8.0.27",
|
||||
"@reduxjs/toolkit": "^2.9.2",
|
||||
"@splidejs/react-splide": "^0.7.12",
|
||||
"@tippyjs/react": "^4.2.6",
|
||||
"@visx/visx": "^3.12.0",
|
||||
@@ -42,6 +43,7 @@
|
||||
"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",
|
||||
@@ -59,6 +61,7 @@
|
||||
"react-leaflet": "^3.2.5",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-quill": "^2.0.0-beta.4",
|
||||
"react-redux": "^9.2.0",
|
||||
"react-responsive": "^10.0.1",
|
||||
"react-responsive-masonry": "^2.7.1",
|
||||
"react-router-dom": "^6.30.1",
|
||||
@@ -90,9 +93,14 @@
|
||||
"uuid": "^9.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' craco start",
|
||||
"start:mock": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.mock craco start",
|
||||
"prestart": "kill-port 3000",
|
||||
"start": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.mock craco start",
|
||||
"start:real": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.local craco start",
|
||||
"start:dev": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.development craco start",
|
||||
"start:test": "concurrently \"python app_2.py\" \"npm run frontend:test\" --names \"backend,frontend\" --prefix-colors \"blue,green\"",
|
||||
"frontend:test": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.test craco start",
|
||||
"dev": "npm start",
|
||||
"backend": "python app_2.py",
|
||||
"build": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' craco build && gulp licenses",
|
||||
"build:analyze": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' ANALYZE=true craco build",
|
||||
"test": "craco test --env=jsdom",
|
||||
@@ -102,12 +110,14 @@
|
||||
"rollback": "bash scripts/rollback-from-local.sh",
|
||||
"lint:check": "eslint . --ext=js,jsx; exit 0",
|
||||
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
|
||||
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
|
||||
"clean": "rm -rf node_modules/ package-lock.json",
|
||||
"reinstall": "npm run clean && npm install"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@craco/craco": "^7.1.0",
|
||||
"ajv": "^8.17.1",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"concurrently": "^8.2.2",
|
||||
"env-cmd": "^11.0.0",
|
||||
"eslint-config-prettier": "8.3.0",
|
||||
"eslint-plugin-prettier": "3.4.0",
|
||||
@@ -116,6 +126,7 @@
|
||||
"imagemin": "^9.0.1",
|
||||
"imagemin-mozjpeg": "^10.0.0",
|
||||
"imagemin-pngquant": "^10.0.0",
|
||||
"kill-port": "^2.0.1",
|
||||
"msw": "^2.11.5",
|
||||
"postcss": "^8.5.6",
|
||||
"prettier": "2.2.1",
|
||||
@@ -142,5 +153,8 @@
|
||||
"workerDirectory": [
|
||||
"public"
|
||||
]
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "^2.3.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
* - Please do NOT modify this file.
|
||||
*/
|
||||
|
||||
const PACKAGE_VERSION = '2.11.5'
|
||||
const PACKAGE_VERSION = '2.11.6'
|
||||
const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
|
||||
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
|
||||
const activeClientIds = new Set()
|
||||
|
||||
62
src/App.js
62
src/App.js
@@ -40,10 +40,15 @@ const StockOverview = React.lazy(() => import("views/StockOverview"));
|
||||
const EventDetail = React.lazy(() => import("views/EventDetail"));
|
||||
const TradingSimulation = React.lazy(() => import("views/TradingSimulation"));
|
||||
|
||||
// Redux
|
||||
import { Provider as ReduxProvider } from 'react-redux';
|
||||
import { store } from './store';
|
||||
|
||||
// Contexts
|
||||
import { AuthProvider } from "contexts/AuthContext";
|
||||
import { AuthModalProvider } from "contexts/AuthModalContext";
|
||||
import { NotificationProvider, useNotification } from "contexts/NotificationContext";
|
||||
import { IndustryProvider } from "contexts/IndustryContext";
|
||||
|
||||
// Components
|
||||
import ProtectedRoute from "components/ProtectedRoute";
|
||||
@@ -56,6 +61,10 @@ 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 内部使用,所以单独提取
|
||||
@@ -103,6 +112,13 @@ 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'}>
|
||||
@@ -290,28 +306,32 @@ export default function App() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ChakraProvider
|
||||
theme={theme}
|
||||
toastOptions={{
|
||||
defaultOptions: {
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ErrorBoundary>
|
||||
<AuthProvider>
|
||||
<AuthModalProvider>
|
||||
<NotificationProvider>
|
||||
<AppContent />
|
||||
<AuthModalManager />
|
||||
<NotificationContainer />
|
||||
<NotificationTestTool />
|
||||
</NotificationProvider>
|
||||
</AuthModalProvider>
|
||||
</AuthProvider>
|
||||
<ReduxProvider store={store}>
|
||||
<ChakraProvider
|
||||
theme={theme}
|
||||
toastOptions={{
|
||||
defaultOptions: {
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ErrorBoundary>
|
||||
<NotificationProvider>
|
||||
<AuthProvider>
|
||||
<AuthModalProvider>
|
||||
<IndustryProvider>
|
||||
<AppContent />
|
||||
<AuthModalManager />
|
||||
<NotificationContainer />
|
||||
<NotificationTestTool />
|
||||
</IndustryProvider>
|
||||
</AuthModalProvider>
|
||||
</AuthProvider>
|
||||
</NotificationProvider>
|
||||
</ErrorBoundary>
|
||||
</ChakraProvider>
|
||||
</ReduxProvider>
|
||||
);
|
||||
}
|
||||
@@ -37,6 +37,7 @@ 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 = {
|
||||
@@ -86,6 +87,12 @@ 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,更紧凑
|
||||
|
||||
@@ -107,6 +114,16 @@ 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);
|
||||
}
|
||||
};
|
||||
|
||||
// 倒计时逻辑
|
||||
@@ -144,6 +161,10 @@ export default function AuthFormContent() {
|
||||
}
|
||||
|
||||
if (!/^1[3-9]\d{9}$/.test(credential)) {
|
||||
// 追踪手机号验证失败
|
||||
authEvents.trackPhoneNumberValidated(credential, false, 'invalid_format');
|
||||
authEvents.trackFormValidationError('phone', 'invalid_format', '请输入有效的手机号');
|
||||
|
||||
toast({
|
||||
title: "请输入有效的手机号",
|
||||
status: "warning",
|
||||
@@ -152,6 +173,9 @@ export default function AuthFormContent() {
|
||||
return;
|
||||
}
|
||||
|
||||
// 追踪手机号验证通过
|
||||
authEvents.trackPhoneNumberValidated(credential, true);
|
||||
|
||||
try {
|
||||
setSendingCode(true);
|
||||
|
||||
@@ -187,6 +211,14 @@ 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),
|
||||
@@ -204,6 +236,13 @@ 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)
|
||||
});
|
||||
@@ -256,6 +295,9 @@ export default function AuthFormContent() {
|
||||
return;
|
||||
}
|
||||
|
||||
// 追踪验证码提交
|
||||
authEvents.trackVerificationCodeSubmitted(phone);
|
||||
|
||||
// 构建请求体
|
||||
const requestBody = {
|
||||
credential: phone.trim(), // 添加 trim() 防止空格
|
||||
@@ -310,6 +352,9 @@ export default function AuthFormContent() {
|
||||
// 更新session
|
||||
await checkSession();
|
||||
|
||||
// 追踪登录成功并识别用户
|
||||
authEvents.trackLoginSuccess(data.user, 'phone', data.isNewUser);
|
||||
|
||||
// ✅ 保留登录成功 toast(关键操作提示)
|
||||
toast({
|
||||
title: data.isNewUser ? '注册成功' : '登录成功',
|
||||
@@ -329,6 +374,8 @@ export default function AuthFormContent() {
|
||||
setTimeout(() => {
|
||||
setCurrentPhone(phone);
|
||||
setShowNicknamePrompt(true);
|
||||
// 追踪昵称设置引导显示
|
||||
authEvents.trackNicknamePromptShown(phone);
|
||||
}, config.features.successDelay);
|
||||
} else {
|
||||
// 已有用户,直接登录成功
|
||||
@@ -349,6 +396,15 @@ 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
|
||||
@@ -376,6 +432,9 @@ export default function AuthFormContent() {
|
||||
|
||||
// 微信H5登录处理
|
||||
const handleWechatH5Login = async () => {
|
||||
// 追踪用户选择微信登录
|
||||
authEvents.trackWechatLoginInitiated('icon_button');
|
||||
|
||||
try {
|
||||
// 1. 构建回调URL
|
||||
const redirectUrl = `${window.location.origin}/home/wechat-callback`;
|
||||
@@ -396,11 +455,19 @@ 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: "跳转失败",
|
||||
@@ -412,14 +479,17 @@ export default function AuthFormContent() {
|
||||
}
|
||||
};
|
||||
|
||||
// 组件卸载时清理
|
||||
// 组件挂载时追踪页面浏览
|
||||
useEffect(() => {
|
||||
isMountedRef.current = true;
|
||||
|
||||
// 追踪登录页面浏览
|
||||
authEvents.trackLoginPageViewed();
|
||||
|
||||
return () => {
|
||||
isMountedRef.current = false;
|
||||
};
|
||||
}, []);
|
||||
}, [authEvents]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -479,6 +549,7 @@ export default function AuthFormContent() {
|
||||
color="blue.500"
|
||||
textDecoration="underline"
|
||||
_hover={{ color: "blue.600" }}
|
||||
onClick={authEvents.trackUserAgreementClicked}
|
||||
>
|
||||
《用户协议》
|
||||
</ChakraLink>
|
||||
@@ -491,6 +562,7 @@ export default function AuthFormContent() {
|
||||
color="blue.500"
|
||||
textDecoration="underline"
|
||||
_hover={{ color: "blue.600" }}
|
||||
onClick={authEvents.trackPrivacyPolicyClicked}
|
||||
>
|
||||
《隐私政策》
|
||||
</ChakraLink>
|
||||
@@ -518,8 +590,30 @@ export default function AuthFormContent() {
|
||||
<AlertDialogHeader fontSize="lg" fontWeight="bold">完善个人信息</AlertDialogHeader>
|
||||
<AlertDialogBody>您已成功注册!是否前往个人资料设置昵称和其他信息?</AlertDialogBody>
|
||||
<AlertDialogFooter>
|
||||
<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>
|
||||
<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>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialogOverlay>
|
||||
|
||||
@@ -15,7 +15,10 @@ import { FaQrcode } from "react-icons/fa";
|
||||
import { FiAlertCircle } from "react-icons/fi";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { authService, WECHAT_STATUS, STATUS_MESSAGES } from "../../services/authService";
|
||||
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秒
|
||||
@@ -45,6 +48,16 @@ const getStatusText = (status) => {
|
||||
};
|
||||
|
||||
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("");
|
||||
@@ -58,6 +71,7 @@ export default function WechatRegister() {
|
||||
const timeoutRef = useRef(null);
|
||||
const isMountedRef = useRef(true); // 追踪组件挂载状态
|
||||
const containerRef = useRef(null); // 容器DOM引用
|
||||
const sessionIdRef = useRef(null); // 存储最新的 sessionId,避免闭包陷阱
|
||||
|
||||
const navigate = useNavigate();
|
||||
const toast = useToast();
|
||||
@@ -90,6 +104,7 @@ export default function WechatRegister() {
|
||||
|
||||
/**
|
||||
* 清理所有定时器
|
||||
* 注意:不清理 sessionIdRef,因为 startPolling 时也会调用此函数
|
||||
*/
|
||||
const clearTimers = useCallback(() => {
|
||||
if (pollIntervalRef.current) {
|
||||
@@ -111,9 +126,20 @@ 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) {
|
||||
@@ -124,32 +150,48 @@ export default function WechatRegister() {
|
||||
}
|
||||
|
||||
showSuccess(
|
||||
status === WECHAT_STATUS.LOGIN_SUCCESS ? "登录成功" : "注册成功",
|
||||
"正在跳转..."
|
||||
status === WECHAT_STATUS.LOGIN_SUCCESS ? "登录成功" : "欢迎回来!"
|
||||
);
|
||||
|
||||
// 延迟跳转,让用户看到成功提示
|
||||
setTimeout(() => {
|
||||
navigate("/home");
|
||||
}, 1000);
|
||||
// 刷新 AuthContext 状态
|
||||
await refreshSession();
|
||||
|
||||
// 关闭认证弹窗,留在当前页面
|
||||
closeModal();
|
||||
} else {
|
||||
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 || "请重试");
|
||||
}
|
||||
}, [navigate, showSuccess, showError]);
|
||||
}, [showSuccess, showError, closeModal, refreshSession, authEvents]);
|
||||
|
||||
/**
|
||||
* 检查微信扫码状态
|
||||
* 使用 sessionIdRef.current 避免闭包陷阱
|
||||
*/
|
||||
const checkWechatStatus = useCallback(async () => {
|
||||
// 检查组件是否已卸载
|
||||
if (!isMountedRef.current || !wechatSessionId) return;
|
||||
// 检查组件是否已卸载,使用 ref 获取最新的 sessionId
|
||||
if (!isMountedRef.current || !sessionIdRef.current) {
|
||||
logger.debug('WechatRegister', 'checkWechatStatus 跳过', {
|
||||
isMounted: isMountedRef.current,
|
||||
hasSessionId: !!sessionIdRef.current
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const currentSessionId = sessionIdRef.current;
|
||||
logger.debug('WechatRegister', '检查微信状态', { sessionId: currentSessionId });
|
||||
|
||||
try {
|
||||
const response = await authService.checkWechatStatus(wechatSessionId);
|
||||
const response = await authService.checkWechatStatus(currentSessionId);
|
||||
|
||||
// 安全检查:确保 response 存在且包含 status
|
||||
if (!response || typeof response.status === 'undefined') {
|
||||
@@ -158,32 +200,44 @@ 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
|
||||
|
||||
// 显示"扫码成功,登录中"提示
|
||||
if (isMountedRef.current) {
|
||||
toast({
|
||||
title: "扫码成功",
|
||||
description: "正在登录,请稍候...",
|
||||
status: "info",
|
||||
duration: 2000,
|
||||
isClosable: false,
|
||||
});
|
||||
}
|
||||
|
||||
await handleLoginSuccess(wechatSessionId, status);
|
||||
await handleLoginSuccess(currentSessionId, status);
|
||||
}
|
||||
// 处理过期状态
|
||||
else if (status === WECHAT_STATUS.EXPIRED) {
|
||||
// 追踪二维码过期
|
||||
authEvents.trackWechatQRExpired(currentSessionId, QR_CODE_TIMEOUT / 1000);
|
||||
|
||||
clearTimers();
|
||||
sessionIdRef.current = null; // 清理 sessionId
|
||||
if (isMountedRef.current) {
|
||||
toast({
|
||||
title: "授权已过期",
|
||||
@@ -195,11 +249,12 @@ export default function WechatRegister() {
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('WechatRegister', 'checkWechatStatus', error, { sessionId: wechatSessionId });
|
||||
logger.error('WechatRegister', 'checkWechatStatus', error, { sessionId: currentSessionId });
|
||||
// 轮询过程中的错误不显示给用户,避免频繁提示
|
||||
// 但如果错误持续发生,停止轮询避免无限重试
|
||||
if (error.message.includes('网络连接失败')) {
|
||||
clearTimers();
|
||||
sessionIdRef.current = null; // 清理 sessionId
|
||||
if (isMountedRef.current) {
|
||||
toast({
|
||||
title: "网络连接失败",
|
||||
@@ -211,12 +266,17 @@ export default function WechatRegister() {
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [wechatSessionId, handleLoginSuccess, clearTimers, toast]);
|
||||
}, [handleLoginSuccess, clearTimers, toast]);
|
||||
|
||||
/**
|
||||
* 启动轮询
|
||||
*/
|
||||
const startPolling = useCallback(() => {
|
||||
logger.debug('WechatRegister', '启动轮询', {
|
||||
sessionId: sessionIdRef.current,
|
||||
interval: POLL_INTERVAL
|
||||
});
|
||||
|
||||
// 清理旧的定时器
|
||||
clearTimers();
|
||||
|
||||
@@ -227,7 +287,9 @@ export default function WechatRegister() {
|
||||
|
||||
// 设置超时
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
logger.debug('WechatRegister', '二维码超时');
|
||||
clearTimers();
|
||||
sessionIdRef.current = null; // 清理 sessionId
|
||||
setWechatStatus(WECHAT_STATUS.EXPIRED);
|
||||
}, QR_CODE_TIMEOUT);
|
||||
}, [checkWechatStatus, clearTimers]);
|
||||
@@ -239,6 +301,16 @@ 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();
|
||||
|
||||
@@ -254,13 +326,32 @@ 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);
|
||||
setWechatSessionId(response.data.session_id);
|
||||
setWechatStatus(WECHAT_STATUS.WAITING);
|
||||
|
||||
logger.debug('WechatRegister', '获取二维码成功', {
|
||||
sessionId: response.data.session_id,
|
||||
authUrl: response.data.auth_url
|
||||
});
|
||||
|
||||
// 启动轮询检查扫码状态
|
||||
startPolling();
|
||||
} catch (error) {
|
||||
// 追踪获取二维码失败
|
||||
authEvents.trackError('api', error.message || '获取二维码失败', {
|
||||
context: 'get_wechat_qrcode'
|
||||
});
|
||||
|
||||
logger.error('WechatRegister', 'getWechatQRCode', error);
|
||||
if (isMountedRef.current) {
|
||||
showError("获取微信授权失败", error.message || "请稍后重试");
|
||||
@@ -270,7 +361,7 @@ export default function WechatRegister() {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
}, [startPolling, showError]);
|
||||
}, [startPolling, showError, wechatSessionId, authEvents]);
|
||||
|
||||
/**
|
||||
* 安全的按钮点击处理,确保所有错误都被捕获,防止被 ErrorBoundary 捕获
|
||||
@@ -293,43 +384,10 @@ export default function WechatRegister() {
|
||||
return () => {
|
||||
isMountedRef.current = false;
|
||||
clearTimers();
|
||||
sessionIdRef.current = null; // 清理 sessionId
|
||||
};
|
||||
}, [clearTimers]);
|
||||
|
||||
/**
|
||||
* 备用轮询机制 - 防止丢失状态
|
||||
* 每3秒检查一次,仅在获取到二维码URL且状态为waiting时执行
|
||||
*/
|
||||
useEffect(() => {
|
||||
// 只在有auth_url、session_id且状态为waiting时启动备用轮询
|
||||
if (wechatAuthUrl && wechatSessionId && wechatStatus === WECHAT_STATUS.WAITING) {
|
||||
logger.debug('WechatRegister', '备用轮询:启动备用轮询机制');
|
||||
|
||||
backupPollIntervalRef.current = setInterval(() => {
|
||||
try {
|
||||
if (wechatStatus === WECHAT_STATUS.WAITING && isMountedRef.current) {
|
||||
logger.debug('WechatRegister', '备用轮询:检查微信状态');
|
||||
// 添加 .catch() 静默处理异步错误,防止被 ErrorBoundary 捕获
|
||||
checkWechatStatus().catch(error => {
|
||||
logger.warn('WechatRegister', '备用轮询检查失败(静默处理)', { error: error.message });
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
// 捕获所有同步错误,防止被 ErrorBoundary 捕获
|
||||
logger.warn('WechatRegister', '备用轮询执行出错(静默处理)', { error: error.message });
|
||||
}
|
||||
}, BACKUP_POLL_INTERVAL);
|
||||
}
|
||||
|
||||
// 清理备用轮询
|
||||
return () => {
|
||||
if (backupPollIntervalRef.current) {
|
||||
clearInterval(backupPollIntervalRef.current);
|
||||
backupPollIntervalRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [wechatAuthUrl, wechatSessionId, wechatStatus, checkWechatStatus]);
|
||||
|
||||
/**
|
||||
* 测量容器尺寸并计算缩放比例
|
||||
*/
|
||||
@@ -397,7 +455,7 @@ export default function WechatRegister() {
|
||||
textAlign="center"
|
||||
mb={3} // 12px底部间距
|
||||
>
|
||||
微信扫码
|
||||
微信登陆
|
||||
</Heading>
|
||||
|
||||
{/* ========== 二维码区域 ========== */}
|
||||
@@ -414,19 +472,26 @@ export default function WechatRegister() {
|
||||
bg="gray.50"
|
||||
boxShadow="sm" // ✅ 添加轻微阴影
|
||||
>
|
||||
{wechatStatus === WECHAT_STATUS.WAITING ? (
|
||||
{wechatStatus !== WECHAT_STATUS.NONE ? (
|
||||
/* 已获取二维码:显示iframe */
|
||||
<iframe
|
||||
src={wechatAuthUrl}
|
||||
title="微信扫码登录"
|
||||
width="300"
|
||||
height="350"
|
||||
scrolling="no" // ✅ 新增:禁止滚动
|
||||
style={{
|
||||
border: 'none',
|
||||
transform: 'scale(0.77) translateY(-20px)', // ✅ 裁剪顶部logo
|
||||
transform: 'scale(0.77) translateY(-35px)', // ✅ 裁剪顶部logo
|
||||
transformOrigin: 'top left',
|
||||
marginLeft: '-5px'
|
||||
marginLeft: '-5px',
|
||||
pointerEvents: 'auto', // 允许点击 │ │
|
||||
overflow: 'hidden', // 尝试隐藏滚动条(可能不起作用)
|
||||
}}
|
||||
// 使用 onWheel 事件阻止滚动 │ │
|
||||
onWheel={(e) => e.preventDefault()} // ✅ 在父容器上阻止滚动
|
||||
onTouchMove={(e) => e.preventDefault()} // ✅ 移动端也阻止
|
||||
|
||||
/>
|
||||
) : (
|
||||
/* 未获取:显示占位符 */
|
||||
|
||||
@@ -53,10 +53,18 @@ const CitationMark = ({ citationId, citation }) => {
|
||||
paddingBottom: 8,
|
||||
borderBottom: '1px solid #f0f0f0'
|
||||
}}>
|
||||
{/* 左侧:作者 */}
|
||||
{/* 左侧:券商 · 作者(或仅作者) */}
|
||||
<Space size={4}>
|
||||
<UserOutlined style={{ color: '#1890ff', fontSize: 12 }} />
|
||||
<Text style={{ fontSize: 12, color: '#595959' }}>
|
||||
{citation.organization && (
|
||||
<>
|
||||
<Text strong style={{ fontSize: 12, color: '#262626' }}>
|
||||
{citation.organization}
|
||||
</Text>
|
||||
<Text style={{ margin: '0 4px', color: '#bfbfbf' }}> · </Text>
|
||||
</>
|
||||
)}
|
||||
{citation.author}
|
||||
</Text>
|
||||
</Space>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Alert,
|
||||
AlertIcon,
|
||||
AlertTitle,
|
||||
AlertDescription,
|
||||
Button,
|
||||
VStack,
|
||||
Container
|
||||
} from '@chakra-ui/react';
|
||||
// import {
|
||||
// Box,
|
||||
// Alert,
|
||||
// AlertIcon,
|
||||
// AlertTitle,
|
||||
// AlertDescription,
|
||||
// Button,
|
||||
// VStack,
|
||||
// Container
|
||||
// } from '@chakra-ui/react';
|
||||
import { logger } from '../utils/logger';
|
||||
|
||||
class ErrorBoundary extends React.Component {
|
||||
@@ -18,31 +18,21 @@ class ErrorBoundary extends React.Component {
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error) {
|
||||
// 开发环境:不拦截错误,让 React DevTools 显示完整堆栈
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
return { hasError: false };
|
||||
}
|
||||
// 生产环境:拦截错误,显示友好界面
|
||||
// 所有环境都捕获错误,避免无限重渲染
|
||||
return { hasError: true };
|
||||
}
|
||||
|
||||
componentDidCatch(error, errorInfo) {
|
||||
// 开发环境:打印错误到控制台,但不显示错误边界
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
logger.error('ErrorBoundary', 'componentDidCatch', error, {
|
||||
componentStack: errorInfo.componentStack,
|
||||
developmentMode: true
|
||||
});
|
||||
// 不更新 state,让错误继续抛出
|
||||
return;
|
||||
}
|
||||
|
||||
// 生产环境:保存错误信息到 state
|
||||
logger.error('ErrorBoundary', 'componentDidCatch', error, {
|
||||
// 记录详细的错误日志
|
||||
logger.error('ErrorBoundary', 'Component Error Caught', error, {
|
||||
componentStack: errorInfo.componentStack,
|
||||
productionMode: true
|
||||
errorName: error.name,
|
||||
errorMessage: error.message,
|
||||
environment: process.env.NODE_ENV,
|
||||
stack: error.stack
|
||||
});
|
||||
|
||||
// 保存错误信息到 state
|
||||
this.setState({
|
||||
error: error,
|
||||
errorInfo: errorInfo
|
||||
@@ -50,57 +40,68 @@ class ErrorBoundary extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
// 开发环境:直接渲染子组件,不显示错误边界
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
return this.props.children;
|
||||
}
|
||||
// 静默模式:捕获错误并记录日志(已在 componentDidCatch 中完成)
|
||||
// 但继续渲染子组件,不显示错误页面
|
||||
// 注意:如果组件因错误无法渲染,该区域可能显示为空白
|
||||
// // 如果有错误,显示错误边界(所有环境)
|
||||
// if (this.state.hasError) {
|
||||
// return (
|
||||
// <Container maxW="lg" py={20}>
|
||||
// <VStack spacing={6}>
|
||||
// <Alert status="error" borderRadius="lg" p={6}>
|
||||
// <AlertIcon boxSize="24px" />
|
||||
// <Box>
|
||||
// <AlertTitle fontSize="lg" mb={2}>
|
||||
// 页面出现错误!
|
||||
// </AlertTitle>
|
||||
// <AlertDescription>
|
||||
// {process.env.NODE_ENV === 'development'
|
||||
// ? '组件渲染时发生错误,请查看下方详情和控制台日志。'
|
||||
// : '页面加载时发生了未预期的错误,请尝试刷新页面。'}
|
||||
// </AlertDescription>
|
||||
// </Box>
|
||||
// </Alert>
|
||||
|
||||
// 生产环境:如果有错误,显示错误边界
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<Container maxW="lg" py={20}>
|
||||
<VStack spacing={6}>
|
||||
<Alert status="error" borderRadius="lg" p={6}>
|
||||
<AlertIcon boxSize="24px" />
|
||||
<Box>
|
||||
<AlertTitle fontSize="lg" mb={2}>
|
||||
页面出现错误!
|
||||
</AlertTitle>
|
||||
<AlertDescription>
|
||||
页面加载时发生了未预期的错误,请尝试刷新页面。
|
||||
</AlertDescription>
|
||||
</Box>
|
||||
</Alert>
|
||||
|
||||
{process.env.NODE_ENV === 'development' && (
|
||||
<Box
|
||||
w="100%"
|
||||
bg="gray.50"
|
||||
p={4}
|
||||
borderRadius="lg"
|
||||
fontSize="sm"
|
||||
overflow="auto"
|
||||
maxH="200px"
|
||||
>
|
||||
<Box fontWeight="bold" mb={2}>错误详情:</Box>
|
||||
<Box as="pre" whiteSpace="pre-wrap">
|
||||
{this.state.error && this.state.error.toString()}
|
||||
{this.state.errorInfo && this.state.errorInfo.componentStack}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
onClick={() => window.location.reload()}
|
||||
>
|
||||
重新加载页面
|
||||
</Button>
|
||||
</VStack>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
// {/* 开发环境显示详细错误信息 */}
|
||||
// {process.env.NODE_ENV === 'development' && this.state.error && (
|
||||
// <Box
|
||||
// w="100%"
|
||||
// bg="red.50"
|
||||
// p={4}
|
||||
// borderRadius="lg"
|
||||
// fontSize="sm"
|
||||
// overflow="auto"
|
||||
// maxH="400px"
|
||||
// border="1px"
|
||||
// borderColor="red.200"
|
||||
// >
|
||||
// <Box fontWeight="bold" mb={2} color="red.700">错误详情:</Box>
|
||||
// <Box as="pre" whiteSpace="pre-wrap" color="red.900" fontSize="xs">
|
||||
// <Box fontWeight="bold" mb={1}>{this.state.error.name}: {this.state.error.message}</Box>
|
||||
// {this.state.error.stack && (
|
||||
// <Box mt={2} color="gray.700">{this.state.error.stack}</Box>
|
||||
// )}
|
||||
// {this.state.errorInfo && this.state.errorInfo.componentStack && (
|
||||
// <>
|
||||
// <Box fontWeight="bold" mt={3} mb={1} color="red.700">组件堆栈:</Box>
|
||||
// <Box color="gray.700">{this.state.errorInfo.componentStack}</Box>
|
||||
// </>
|
||||
// )}
|
||||
// </Box>
|
||||
// </Box>
|
||||
// )}
|
||||
|
||||
// <Button
|
||||
// colorScheme="blue"
|
||||
// size="lg"
|
||||
// onClick={() => window.location.reload()}
|
||||
// >
|
||||
// 重新加载页面
|
||||
// </Button>
|
||||
// </VStack>
|
||||
// </Container>
|
||||
// );
|
||||
// }
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,6 +32,12 @@ import {
|
||||
useColorModeValue,
|
||||
useToast,
|
||||
Tooltip,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
} from '@chakra-ui/react';
|
||||
import { ChevronDownIcon, HamburgerIcon, SunIcon, MoonIcon } from '@chakra-ui/icons';
|
||||
import { FiStar, FiCalendar, FiUser, FiSettings, FiHome, FiLogOut } from 'react-icons/fi';
|
||||
@@ -44,6 +50,8 @@ import { getApiBase } from '../../utils/apiConfig';
|
||||
import SubscriptionButton from '../Subscription/SubscriptionButton';
|
||||
import SubscriptionModal from '../Subscription/SubscriptionModal';
|
||||
import { CrownIcon, TooltipContent } from '../Subscription/CrownTooltip';
|
||||
import InvestmentCalendar from '../../views/Community/components/InvestmentCalendar';
|
||||
import { useNavigationEvents } from '../../hooks/useNavigationEvents';
|
||||
|
||||
/** 二级导航栏组件 - 显示当前一级菜单下的所有二级菜单项 */
|
||||
const SecondaryNav = ({ showCompletenessAlert }) => {
|
||||
@@ -51,20 +59,25 @@ const SecondaryNav = ({ showCompletenessAlert }) => {
|
||||
const location = useLocation();
|
||||
const navbarBg = useColorModeValue('gray.50', 'gray.700');
|
||||
const itemHoverBg = useColorModeValue('white', 'gray.600');
|
||||
// ⚠️ 必须在组件顶层调用所有Hooks(不能在JSX中调用)
|
||||
const borderColorValue = useColorModeValue('gray.200', 'gray.600');
|
||||
|
||||
// 🎯 初始化导航埋点Hook
|
||||
const navEvents = useNavigationEvents({ component: 'secondary_nav' });
|
||||
|
||||
// 定义二级导航结构
|
||||
const secondaryNavConfig = {
|
||||
'/community': {
|
||||
title: '高频跟踪',
|
||||
items: [
|
||||
{ path: '/community', label: '新闻催化分析', badges: [{ text: 'HOT', colorScheme: 'green' }, { text: 'NEW', colorScheme: 'red' }] },
|
||||
{ path: '/community', label: '事件中心', badges: [{ text: 'HOT', colorScheme: 'green' }, { text: 'NEW', colorScheme: 'red' }] },
|
||||
{ path: '/concepts', label: '概念中心', badges: [{ text: 'NEW', colorScheme: 'red' }] }
|
||||
]
|
||||
},
|
||||
'/concepts': {
|
||||
title: '高频跟踪',
|
||||
items: [
|
||||
{ path: '/community', label: '新闻催化分析', badges: [{ text: 'HOT', colorScheme: 'green' }, { text: 'NEW', colorScheme: 'red' }] },
|
||||
{ path: '/community', label: '事件中心', badges: [{ text: 'HOT', colorScheme: 'green' }, { text: 'NEW', colorScheme: 'red' }] },
|
||||
{ path: '/concepts', label: '概念中心', badges: [{ text: 'NEW', colorScheme: 'red' }] }
|
||||
]
|
||||
},
|
||||
@@ -108,7 +121,7 @@ const SecondaryNav = ({ showCompletenessAlert }) => {
|
||||
<Box
|
||||
bg={navbarBg}
|
||||
borderBottom="1px"
|
||||
borderColor={useColorModeValue('gray.200', 'gray.600')}
|
||||
borderColor={borderColorValue}
|
||||
py={2}
|
||||
position="sticky"
|
||||
top={showCompletenessAlert ? "120px" : "60px"}
|
||||
@@ -153,7 +166,11 @@ const SecondaryNav = ({ showCompletenessAlert }) => {
|
||||
) : (
|
||||
<Button
|
||||
key={index}
|
||||
onClick={() => navigate(item.path)}
|
||||
onClick={() => {
|
||||
// 🎯 追踪侧边栏菜单点击
|
||||
navEvents.trackSidebarMenuClicked(item.label, item.path, 2, false);
|
||||
navigate(item.path);
|
||||
}}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
bg={isActive ? 'blue.50' : 'transparent'}
|
||||
@@ -217,7 +234,7 @@ const MoreNavMenu = ({ isAuthenticated, user }) => {
|
||||
bg={location.pathname.includes('/community') ? 'blue.50' : 'transparent'}
|
||||
>
|
||||
<Flex justify="space-between" align="center" w="100%">
|
||||
<Text fontSize="sm">新闻催化分析</Text>
|
||||
<Text fontSize="sm">事件中心</Text>
|
||||
<HStack spacing={1}>
|
||||
<Badge size="sm" colorScheme="green">HOT</Badge>
|
||||
<Badge size="sm" colorScheme="red">NEW</Badge>
|
||||
@@ -301,6 +318,12 @@ const NavItems = ({ isAuthenticated, user }) => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
// ⚠️ 必须在组件顶层调用所有Hooks(不能在JSX中调用)
|
||||
const contactTextColor = useColorModeValue('gray.500', 'gray.300');
|
||||
|
||||
// 🎯 初始化导航埋点Hook
|
||||
const navEvents = useNavigationEvents({ component: 'top_nav' });
|
||||
|
||||
// 辅助函数:判断导航项是否激活
|
||||
const isActive = useCallback((paths) => {
|
||||
return paths.some(path => location.pathname.includes(path));
|
||||
@@ -325,7 +348,11 @@ const NavItems = ({ isAuthenticated, user }) => {
|
||||
</MenuButton>
|
||||
<MenuList minW="260px" p={2}>
|
||||
<MenuItem
|
||||
onClick={() => navigate('/community')}
|
||||
onClick={() => {
|
||||
// 🎯 追踪菜单项点击
|
||||
navEvents.trackMenuItemClicked('事件中心', 'dropdown', '/community');
|
||||
navigate('/community');
|
||||
}}
|
||||
borderRadius="md"
|
||||
bg={location.pathname.includes('/community') ? 'blue.50' : 'transparent'}
|
||||
borderLeft={location.pathname.includes('/community') ? '3px solid' : 'none'}
|
||||
@@ -333,7 +360,7 @@ const NavItems = ({ isAuthenticated, user }) => {
|
||||
fontWeight={location.pathname.includes('/community') ? 'bold' : 'normal'}
|
||||
>
|
||||
<Flex justify="space-between" align="center" w="100%">
|
||||
<Text fontSize="sm">新闻催化分析</Text>
|
||||
<Text fontSize="sm">事件中心</Text>
|
||||
<HStack spacing={1}>
|
||||
<Badge size="sm" colorScheme="green">HOT</Badge>
|
||||
<Badge size="sm" colorScheme="red">NEW</Badge>
|
||||
@@ -341,7 +368,11 @@ const NavItems = ({ isAuthenticated, user }) => {
|
||||
</Flex>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => navigate('/concepts')}
|
||||
onClick={() => {
|
||||
// 🎯 追踪菜单项点击
|
||||
navEvents.trackMenuItemClicked('概念中心', 'dropdown', '/concepts');
|
||||
navigate('/concepts');
|
||||
}}
|
||||
borderRadius="md"
|
||||
bg={location.pathname.includes('/concepts') ? 'blue.50' : 'transparent'}
|
||||
borderLeft={location.pathname.includes('/concepts') ? '3px solid' : 'none'}
|
||||
@@ -452,7 +483,7 @@ const NavItems = ({ isAuthenticated, user }) => {
|
||||
联系我们
|
||||
</MenuButton>
|
||||
<MenuList minW="260px" p={4}>
|
||||
<Text fontSize="sm" color={useColorModeValue('gray.500', 'gray.300')}>敬请期待</Text>
|
||||
<Text fontSize="sm" color={contactTextColor}>敬请期待</Text>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</HStack>
|
||||
@@ -477,6 +508,14 @@ export default function HomeNavbar() {
|
||||
const brandHover = useColorModeValue('blue.600', 'blue.300');
|
||||
const toast = useToast();
|
||||
|
||||
// 🎯 初始化导航埋点Hook
|
||||
const navEvents = useNavigationEvents({ component: 'main_navbar' });
|
||||
|
||||
// ⚡ 提取 userId 为独立变量,避免 user 对象引用变化导致无限循环
|
||||
const userId = user?.id;
|
||||
const prevUserIdRef = React.useRef(userId);
|
||||
const prevIsAuthenticatedRef = React.useRef(isAuthenticated);
|
||||
|
||||
// 添加调试信息
|
||||
logger.debug('HomeNavbar', '组件渲染状态', {
|
||||
hasUser: !!user,
|
||||
@@ -521,6 +560,9 @@ export default function HomeNavbar() {
|
||||
const WATCHLIST_PAGE_SIZE = 10;
|
||||
const EVENTS_PAGE_SIZE = 8;
|
||||
|
||||
// 投资日历 Modal 状态
|
||||
const [calendarModalOpen, setCalendarModalOpen] = useState(false);
|
||||
|
||||
// 用户信息完整性状态
|
||||
const [profileCompleteness, setProfileCompleteness] = useState(null);
|
||||
const [showCompletenessAlert, setShowCompletenessAlert] = useState(false);
|
||||
@@ -712,65 +754,81 @@ export default function HomeNavbar() {
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}, [isAuthenticated, user?.id]); // 只依赖 user.id,避免 user 对象变化导致无限循环
|
||||
}, [isAuthenticated, userId]); // ⚡ 使用 userId 而不是 user?.id
|
||||
|
||||
// 监听用户变化,重置检查标志(用户切换或退出登录时)
|
||||
React.useEffect(() => {
|
||||
if (!isAuthenticated || !user) {
|
||||
// 用户退出登录,重置标志
|
||||
hasCheckedCompleteness.current = false;
|
||||
setProfileCompleteness(null);
|
||||
setShowCompletenessAlert(false);
|
||||
const userIdChanged = prevUserIdRef.current !== userId;
|
||||
const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
|
||||
|
||||
if (userIdChanged || authChanged) {
|
||||
prevUserIdRef.current = userId;
|
||||
prevIsAuthenticatedRef.current = isAuthenticated;
|
||||
|
||||
if (!isAuthenticated || !user) {
|
||||
// 用户退出登录,重置标志
|
||||
hasCheckedCompleteness.current = false;
|
||||
setProfileCompleteness(null);
|
||||
setShowCompletenessAlert(false);
|
||||
}
|
||||
}
|
||||
}, [isAuthenticated, user?.id]); // 监听用户 ID 变化
|
||||
}, [isAuthenticated, userId, user]); // ⚡ 使用 userId
|
||||
|
||||
// 用户登录后检查资料完整性
|
||||
React.useEffect(() => {
|
||||
if (isAuthenticated && user) {
|
||||
const userIdChanged = prevUserIdRef.current !== userId;
|
||||
const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
|
||||
|
||||
if ((userIdChanged || authChanged) && isAuthenticated && user) {
|
||||
// 延迟检查,避免过于频繁
|
||||
const timer = setTimeout(checkProfileCompleteness, 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [isAuthenticated, user?.id, checkProfileCompleteness]); // 只依赖 user.id,避免无限循环
|
||||
}, [isAuthenticated, userId, checkProfileCompleteness, user]); // ⚡ 使用 userId
|
||||
|
||||
// 加载订阅信息
|
||||
React.useEffect(() => {
|
||||
if (isAuthenticated && user) {
|
||||
const loadSubscriptionInfo = async () => {
|
||||
try {
|
||||
const base = getApiBase();
|
||||
const response = await fetch(base + '/api/subscription/current', {
|
||||
credentials: 'include',
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data.success && data.data) {
|
||||
// 数据标准化处理:确保type字段是小写的 'free', 'pro', 或 'max'
|
||||
const normalizedData = {
|
||||
type: (data.data.type || data.data.subscription_type || 'free').toLowerCase(),
|
||||
status: data.data.status || 'active',
|
||||
days_left: data.data.days_left || 0,
|
||||
is_active: data.data.is_active !== false,
|
||||
end_date: data.data.end_date || null
|
||||
};
|
||||
setSubscriptionInfo(normalizedData);
|
||||
const userIdChanged = prevUserIdRef.current !== userId;
|
||||
const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
|
||||
|
||||
if (userIdChanged || authChanged) {
|
||||
if (isAuthenticated && user) {
|
||||
const loadSubscriptionInfo = async () => {
|
||||
try {
|
||||
const base = getApiBase();
|
||||
const response = await fetch(base + '/api/subscription/current', {
|
||||
credentials: 'include',
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data.success && data.data) {
|
||||
// 数据标准化处理:确保type字段是小写的 'free', 'pro', 或 'max'
|
||||
const normalizedData = {
|
||||
type: (data.data.type || data.data.subscription_type || 'free').toLowerCase(),
|
||||
status: data.data.status || 'active',
|
||||
days_left: data.data.days_left || 0,
|
||||
is_active: data.data.is_active !== false,
|
||||
end_date: data.data.end_date || null
|
||||
};
|
||||
setSubscriptionInfo(normalizedData);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('HomeNavbar', '加载订阅信息失败', error);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('HomeNavbar', '加载订阅信息失败', error);
|
||||
}
|
||||
};
|
||||
loadSubscriptionInfo();
|
||||
} else {
|
||||
// 用户未登录时,重置为免费版
|
||||
setSubscriptionInfo({
|
||||
type: 'free',
|
||||
status: 'active',
|
||||
days_left: 0,
|
||||
is_active: true
|
||||
});
|
||||
};
|
||||
loadSubscriptionInfo();
|
||||
} else {
|
||||
// 用户未登录时,重置为免费版
|
||||
setSubscriptionInfo({
|
||||
type: 'free',
|
||||
status: 'active',
|
||||
days_left: 0,
|
||||
is_active: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [isAuthenticated, user?.id]); // 只依赖 user.id 而不是整个 user 对象
|
||||
}, [isAuthenticated, userId, user]); // ⚡ 使用 userId,防重复通过 ref 判断
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -846,7 +904,11 @@ export default function HomeNavbar() {
|
||||
color={brandText}
|
||||
cursor="pointer"
|
||||
_hover={{ color: brandHover }}
|
||||
onClick={() => navigate('/home')}
|
||||
onClick={() => {
|
||||
// 🎯 追踪Logo点击
|
||||
navEvents.trackLogoClicked();
|
||||
navigate('/home');
|
||||
}}
|
||||
style={{ minWidth: isMobile ? '100px' : '140px' }}
|
||||
noOfLines={1}
|
||||
>
|
||||
@@ -876,7 +938,13 @@ export default function HomeNavbar() {
|
||||
<IconButton
|
||||
aria-label="切换主题"
|
||||
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
|
||||
onClick={toggleColorMode}
|
||||
onClick={() => {
|
||||
// 🎯 追踪主题切换
|
||||
const fromTheme = colorMode;
|
||||
const toTheme = colorMode === 'light' ? 'dark' : 'light';
|
||||
navEvents.trackThemeChanged(fromTheme, toTheme);
|
||||
toggleColorMode();
|
||||
}}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
minW={{ base: '36px', md: '40px' }}
|
||||
@@ -889,6 +957,20 @@ export default function HomeNavbar() {
|
||||
) : isAuthenticated && user ? (
|
||||
// 已登录状态 - 用户菜单 + 功能菜单排列
|
||||
<HStack spacing={{ base: 2, md: 3 }}>
|
||||
{/* 投资日历 - 仅大屏显示 */}
|
||||
{isDesktop && (
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="orange"
|
||||
variant="solid"
|
||||
borderRadius="full"
|
||||
leftIcon={<FiCalendar />}
|
||||
onClick={() => setCalendarModalOpen(true)}
|
||||
>
|
||||
投资日历
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* 自选股 - 仅大屏显示 */}
|
||||
{isDesktop && (
|
||||
<Menu onOpen={loadWatchlistQuotes}>
|
||||
@@ -1155,6 +1237,11 @@ export default function HomeNavbar() {
|
||||
|
||||
<MenuDivider />
|
||||
|
||||
{/* 投资日历 */}
|
||||
<MenuItem icon={<FiCalendar />} onClick={() => navigate('/community')}>
|
||||
<Text>投资日历</Text>
|
||||
</MenuItem>
|
||||
|
||||
{/* 自选股 */}
|
||||
<MenuItem icon={<FiStar />} onClick={() => navigate('/home/center')}>
|
||||
<Flex justify="space-between" align="center" w="100%">
|
||||
@@ -1352,7 +1439,7 @@ export default function HomeNavbar() {
|
||||
fontWeight={location.pathname.includes('/community') ? 'bold' : 'normal'}
|
||||
>
|
||||
<HStack justify="space-between">
|
||||
<Text fontSize="sm">新闻催化分析</Text>
|
||||
<Text fontSize="sm">事件中心</Text>
|
||||
<HStack spacing={1}>
|
||||
<Badge size="xs" colorScheme="green">HOT</Badge>
|
||||
<Badge size="xs" colorScheme="red">NEW</Badge>
|
||||
@@ -1516,6 +1603,22 @@ export default function HomeNavbar() {
|
||||
|
||||
{/* 二级导航栏 - 显示当前页面所属的二级菜单 */}
|
||||
{!isMobile && <SecondaryNav showCompletenessAlert={showCompletenessAlert} />}
|
||||
|
||||
{/* 投资日历 Modal */}
|
||||
<Modal
|
||||
isOpen={calendarModalOpen}
|
||||
onClose={() => setCalendarModalOpen(false)}
|
||||
size="6xl"
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent maxW="1200px">
|
||||
<ModalHeader>投资日历</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb={6}>
|
||||
<InvestmentCalendar />
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -299,8 +299,8 @@ const NotificationItem = React.memo(({ notification, onClose, isNewest = false }
|
||||
const isDark = useColorModeValue(false, true);
|
||||
const priorityBgOpacity = getPriorityBgOpacity(priority, isDark);
|
||||
|
||||
// 根据优先级调整背景色深度
|
||||
const getPriorityBgColor = () => {
|
||||
// 根据优先级调整背景色深度(使用 useMemo 缓存计算结果)
|
||||
const priorityBgColor = useMemo(() => {
|
||||
const colorScheme = typeConfig.colorScheme;
|
||||
// 亮色模式:根据优先级使用不同深度的颜色
|
||||
if (!isDark) {
|
||||
@@ -323,31 +323,41 @@ const NotificationItem = React.memo(({ notification, onClose, isNewest = false }
|
||||
return 'gray.800';
|
||||
}
|
||||
}
|
||||
};
|
||||
}, [isDark, priority, typeConfig]);
|
||||
|
||||
// 颜色配置 - 支持亮色/暗色模式(使用 useMemo 优化)
|
||||
// 颜色配置 - 支持亮色/暗色模式
|
||||
// ⚠️ 必须在组件顶层调用 useColorModeValue,不能在 useMemo 内部调用
|
||||
const borderColor = useColorModeValue(
|
||||
typeConfig.borderColor,
|
||||
typeConfig.darkBorderColor || `${typeConfig.colorScheme}.400`
|
||||
);
|
||||
const iconColor = useColorModeValue(
|
||||
typeConfig.iconColor,
|
||||
typeConfig.darkIconColor || `${typeConfig.colorScheme}.300`
|
||||
);
|
||||
const textColor = useColorModeValue('gray.800', 'gray.100');
|
||||
const subTextColor = useColorModeValue('gray.600', 'gray.300');
|
||||
const metaTextColor = useColorModeValue('gray.500', 'gray.500');
|
||||
const hoverBgColor = useColorModeValue(
|
||||
typeConfig.hoverBg,
|
||||
typeConfig.darkHoverBg || `${typeConfig.colorScheme}.700`
|
||||
);
|
||||
const closeButtonHoverBgColor = useColorModeValue(
|
||||
`${typeConfig.colorScheme}.200`,
|
||||
`${typeConfig.colorScheme}.700`
|
||||
);
|
||||
|
||||
// 使用 useMemo 缓存颜色对象(避免不必要的重新创建)
|
||||
const colors = useMemo(() => ({
|
||||
bg: getPriorityBgColor(),
|
||||
border: useColorModeValue(
|
||||
typeConfig.borderColor,
|
||||
typeConfig.darkBorderColor || `${typeConfig.colorScheme}.400`
|
||||
),
|
||||
icon: useColorModeValue(
|
||||
typeConfig.iconColor,
|
||||
typeConfig.darkIconColor || `${typeConfig.colorScheme}.300`
|
||||
),
|
||||
text: useColorModeValue('gray.800', 'gray.100'),
|
||||
subText: useColorModeValue('gray.600', 'gray.300'),
|
||||
metaText: useColorModeValue('gray.500', 'gray.500'),
|
||||
hoverBg: useColorModeValue(
|
||||
typeConfig.hoverBg,
|
||||
typeConfig.darkHoverBg || `${typeConfig.colorScheme}.700`
|
||||
),
|
||||
closeButtonHoverBg: useColorModeValue(
|
||||
`${typeConfig.colorScheme}.200`,
|
||||
`${typeConfig.colorScheme}.700`
|
||||
),
|
||||
}), [isDark, priority, typeConfig]);
|
||||
bg: priorityBgColor,
|
||||
border: borderColor,
|
||||
icon: iconColor,
|
||||
text: textColor,
|
||||
subText: subTextColor,
|
||||
metaText: metaTextColor,
|
||||
hoverBg: hoverBgColor,
|
||||
closeButtonHoverBg: closeButtonHoverBgColor,
|
||||
}), [priorityBgColor, borderColor, iconColor, textColor, subTextColor, metaTextColor, hoverBgColor, closeButtonHoverBgColor]);
|
||||
|
||||
// 点击处理(只有真正可点击时才执行)- 使用 useCallback 优化
|
||||
const handleClick = useCallback(() => {
|
||||
@@ -636,6 +646,11 @@ const NotificationContainer = () => {
|
||||
}
|
||||
}, [notifications]);
|
||||
|
||||
// ⚠️ 颜色配置 - 必须在条件return之前调用所有Hooks
|
||||
const collapseBg = useColorModeValue('gray.100', 'gray.700');
|
||||
const collapseHoverBg = useColorModeValue('gray.200', 'gray.600');
|
||||
const collapseTextColor = useColorModeValue('gray.700', 'gray.200');
|
||||
|
||||
// 如果没有通知,不渲染
|
||||
if (notifications.length === 0) {
|
||||
return null;
|
||||
@@ -647,11 +662,6 @@ const NotificationContainer = () => {
|
||||
const visibleNotifications = isExpanded ? notifications : notifications.slice(0, maxVisible);
|
||||
const hiddenCount = notifications.length - maxVisible;
|
||||
|
||||
// 颜色配置
|
||||
const collapseBg = useColorModeValue('gray.100', 'gray.700');
|
||||
const collapseHoverBg = useColorModeValue('gray.200', 'gray.600');
|
||||
const collapseTextColor = useColorModeValue('gray.700', 'gray.200');
|
||||
|
||||
// 构建无障碍描述
|
||||
const containerAriaLabel = hasMore
|
||||
? `通知中心,共有 ${notifications.length} 条通知,当前显示 ${visibleNotifications.length} 条,${isExpanded ? '已展开全部' : `还有 ${hiddenCount} 条折叠`}。使用Tab键导航,Enter键或空格键查看详情。`
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
* 用于手动测试4种通知类型
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@@ -16,8 +16,15 @@ import {
|
||||
useDisclosure,
|
||||
Badge,
|
||||
Divider,
|
||||
Alert,
|
||||
AlertIcon,
|
||||
AlertTitle,
|
||||
AlertDescription,
|
||||
Code,
|
||||
UnorderedList,
|
||||
ListItem,
|
||||
} from '@chakra-ui/react';
|
||||
import { MdNotifications, MdClose, MdVolumeOff, MdVolumeUp, MdCampaign, MdTrendingUp, MdArticle, MdAssessment } from 'react-icons/md';
|
||||
import { MdNotifications, MdClose, MdVolumeOff, MdVolumeUp, MdCampaign, MdTrendingUp, MdArticle, MdAssessment, MdWarning } from 'react-icons/md';
|
||||
import { useNotification } from '../../contexts/NotificationContext';
|
||||
import { SOCKET_TYPE } from '../../services/socket';
|
||||
import { NOTIFICATION_TYPES, PRIORITY_LEVELS } from '../../constants/notificationTypes';
|
||||
@@ -27,6 +34,62 @@ const NotificationTestTool = () => {
|
||||
const { addNotification, soundEnabled, toggleSound, isConnected, clearAllNotifications, notifications, browserPermission, requestBrowserPermission } = useNotification();
|
||||
const [testCount, setTestCount] = useState(0);
|
||||
|
||||
// 测试状态
|
||||
const [isTestingNotification, setIsTestingNotification] = useState(false);
|
||||
const [testCountdown, setTestCountdown] = useState(0);
|
||||
const [notificationShown, setNotificationShown] = useState(null); // null | true | false
|
||||
|
||||
// 系统环境检测
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const [isMacOS, setIsMacOS] = useState(false);
|
||||
|
||||
// 故障排查面板
|
||||
const { isOpen: isTroubleshootOpen, onToggle: onTroubleshootToggle } = useDisclosure();
|
||||
|
||||
// 检测系统环境
|
||||
useEffect(() => {
|
||||
// 检测是否为 macOS
|
||||
const platform = navigator.platform.toLowerCase();
|
||||
setIsMacOS(platform.includes('mac'));
|
||||
|
||||
// 检测全屏状态
|
||||
const checkFullscreen = () => {
|
||||
setIsFullscreen(!!document.fullscreenElement);
|
||||
};
|
||||
document.addEventListener('fullscreenchange', checkFullscreen);
|
||||
checkFullscreen();
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('fullscreenchange', checkFullscreen);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 倒计时逻辑
|
||||
useEffect(() => {
|
||||
if (testCountdown > 0) {
|
||||
const timer = setTimeout(() => {
|
||||
setTestCountdown(testCountdown - 1);
|
||||
}, 1000);
|
||||
return () => clearTimeout(timer);
|
||||
} else if (testCountdown === 0 && isTestingNotification) {
|
||||
// 倒计时结束,询问用户
|
||||
setIsTestingNotification(false);
|
||||
|
||||
// 延迟一下再询问,确保用户有时间看到通知
|
||||
setTimeout(() => {
|
||||
const sawNotification = window.confirm('您是否看到了浏览器桌面通知?\n\n点击"确定"表示看到了\n点击"取消"表示没看到');
|
||||
setNotificationShown(sawNotification);
|
||||
|
||||
if (!sawNotification) {
|
||||
// 没看到通知,展开故障排查面板
|
||||
if (!isTroubleshootOpen) {
|
||||
onTroubleshootToggle();
|
||||
}
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
}, [testCountdown, isTestingNotification, isTroubleshootOpen, onTroubleshootToggle]);
|
||||
|
||||
// 浏览器权限状态标签
|
||||
const getPermissionLabel = () => {
|
||||
switch (browserPermission) {
|
||||
@@ -86,51 +149,6 @@ const NotificationTestTool = () => {
|
||||
setTestCount(prev => prev + 1);
|
||||
};
|
||||
|
||||
// 股票动向测试数据(涨)
|
||||
const testStockAlertUp = () => {
|
||||
addNotification({
|
||||
type: NOTIFICATION_TYPES.STOCK_ALERT,
|
||||
priority: PRIORITY_LEVELS.URGENT,
|
||||
title: '【测试】您关注的股票触发预警',
|
||||
content: '宁德时代(300750) 当前价格 ¥245.50,盘中涨幅达 +5.2%,已触达您设置的目标价位',
|
||||
publishTime: Date.now(),
|
||||
pushTime: Date.now(),
|
||||
isAIGenerated: false,
|
||||
clickable: true,
|
||||
link: '/stock-overview?code=300750',
|
||||
extra: {
|
||||
stockCode: '300750',
|
||||
stockName: '宁德时代',
|
||||
priceChange: '+5.2%',
|
||||
currentPrice: '245.50',
|
||||
},
|
||||
autoClose: 10000,
|
||||
});
|
||||
setTestCount(prev => prev + 1);
|
||||
};
|
||||
|
||||
// 股票动向测试数据(跌)
|
||||
const testStockAlertDown = () => {
|
||||
addNotification({
|
||||
type: NOTIFICATION_TYPES.STOCK_ALERT,
|
||||
priority: PRIORITY_LEVELS.IMPORTANT,
|
||||
title: '【测试】您关注的股票异常波动',
|
||||
content: '比亚迪(002594) 5分钟内跌幅达 -3.8%,当前价格 ¥198.20,建议关注',
|
||||
publishTime: Date.now(),
|
||||
pushTime: Date.now(),
|
||||
isAIGenerated: false,
|
||||
clickable: true,
|
||||
link: '/stock-overview?code=002594',
|
||||
extra: {
|
||||
stockCode: '002594',
|
||||
stockName: '比亚迪',
|
||||
priceChange: '-3.8%',
|
||||
currentPrice: '198.20',
|
||||
},
|
||||
autoClose: 10000,
|
||||
});
|
||||
setTestCount(prev => prev + 1);
|
||||
};
|
||||
|
||||
// 事件动向测试数据
|
||||
const testEventAlert = () => {
|
||||
@@ -179,30 +197,6 @@ const NotificationTestTool = () => {
|
||||
setTestCount(prev => prev + 1);
|
||||
};
|
||||
|
||||
// AI分析报告测试数据
|
||||
const testAIReport = () => {
|
||||
addNotification({
|
||||
type: NOTIFICATION_TYPES.ANALYSIS_REPORT,
|
||||
priority: PRIORITY_LEVELS.NORMAL,
|
||||
title: '【测试】AI产业链投资机会分析',
|
||||
content: '随着大模型应用加速落地,算力、数据、应用三大方向均存在投资机会,重点关注海光信息、寒武纪',
|
||||
publishTime: Date.now(),
|
||||
pushTime: Date.now(),
|
||||
author: {
|
||||
name: 'AI分析师',
|
||||
organization: '价值前沿',
|
||||
},
|
||||
isAIGenerated: true,
|
||||
clickable: true,
|
||||
link: '/forecast-report?id=test005',
|
||||
extra: {
|
||||
reportType: '策略报告',
|
||||
industry: '人工智能',
|
||||
},
|
||||
autoClose: 12000,
|
||||
});
|
||||
setTestCount(prev => prev + 1);
|
||||
};
|
||||
|
||||
// 预测通知测试数据(不可跳转)
|
||||
const testPrediction = () => {
|
||||
@@ -272,42 +266,11 @@ const NotificationTestTool = () => {
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
// 测试全部类型(层叠效果)
|
||||
const testAllTypes = () => {
|
||||
const tests = [testAnnouncement, testStockAlertUp, testEventAlert, testAnalysisReport];
|
||||
tests.forEach((test, index) => {
|
||||
setTimeout(() => test(), index * 600);
|
||||
});
|
||||
};
|
||||
|
||||
// 测试优先级
|
||||
const testPriority = () => {
|
||||
[
|
||||
{ priority: PRIORITY_LEVELS.URGENT, label: '紧急' },
|
||||
{ priority: PRIORITY_LEVELS.IMPORTANT, label: '重要' },
|
||||
{ priority: PRIORITY_LEVELS.NORMAL, label: '普通' },
|
||||
].forEach((item, index) => {
|
||||
setTimeout(() => {
|
||||
addNotification({
|
||||
type: NOTIFICATION_TYPES.ANNOUNCEMENT,
|
||||
priority: item.priority,
|
||||
title: `【测试】${item.label}优先级通知`,
|
||||
content: `这是一条${item.label}优先级的测试通知,用于验证优先级标签显示`,
|
||||
publishTime: Date.now(),
|
||||
pushTime: Date.now(),
|
||||
isAIGenerated: false,
|
||||
clickable: false,
|
||||
autoClose: 10000,
|
||||
});
|
||||
setTestCount(prev => prev + 1);
|
||||
}, index * 600);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
position="fixed"
|
||||
top="316px"
|
||||
top="116px"
|
||||
right={4}
|
||||
zIndex={9998}
|
||||
bg="white"
|
||||
@@ -363,28 +326,6 @@ const NotificationTestTool = () => {
|
||||
公告通知
|
||||
</Button>
|
||||
|
||||
{/* 股票动向 */}
|
||||
<HStack spacing={2}>
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="red"
|
||||
leftIcon={<MdTrendingUp />}
|
||||
onClick={testStockAlertUp}
|
||||
flex={1}
|
||||
>
|
||||
股票上涨
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="green"
|
||||
leftIcon={<MdTrendingUp style={{ transform: 'rotate(180deg)' }} />}
|
||||
onClick={testStockAlertDown}
|
||||
flex={1}
|
||||
>
|
||||
股票下跌
|
||||
</Button>
|
||||
</HStack>
|
||||
|
||||
{/* 事件动向 */}
|
||||
<Button
|
||||
size="sm"
|
||||
@@ -396,27 +337,14 @@ const NotificationTestTool = () => {
|
||||
</Button>
|
||||
|
||||
{/* 分析报告 */}
|
||||
<HStack spacing={2}>
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="purple"
|
||||
leftIcon={<MdAssessment />}
|
||||
onClick={testAnalysisReport}
|
||||
flex={1}
|
||||
>
|
||||
分析报告
|
||||
</Button>
|
||||
<Badge colorScheme="purple" alignSelf="center">AI</Badge>
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="purple"
|
||||
variant="outline"
|
||||
onClick={testAIReport}
|
||||
flex={1}
|
||||
>
|
||||
AI报告
|
||||
</Button>
|
||||
</HStack>
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="purple"
|
||||
leftIcon={<MdAssessment />}
|
||||
onClick={testAnalysisReport}
|
||||
>
|
||||
分析报告
|
||||
</Button>
|
||||
|
||||
{/* 预测通知 */}
|
||||
<Button
|
||||
@@ -434,24 +362,6 @@ const NotificationTestTool = () => {
|
||||
组合测试
|
||||
</Text>
|
||||
|
||||
{/* 层叠测试 */}
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="teal"
|
||||
onClick={testAllTypes}
|
||||
>
|
||||
层叠测试(4种类型)
|
||||
</Button>
|
||||
|
||||
{/* 优先级测试 */}
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="pink"
|
||||
onClick={testPriority}
|
||||
>
|
||||
优先级测试(3个级别)
|
||||
</Button>
|
||||
|
||||
{/* 预测→详情流程测试 */}
|
||||
<Button
|
||||
size="sm"
|
||||
@@ -479,6 +389,93 @@ const NotificationTestTool = () => {
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* 测试浏览器通知按钮 */}
|
||||
{browserPermission === 'granted' && (
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="green"
|
||||
leftIcon={<MdNotifications />}
|
||||
onClick={() => {
|
||||
console.log('测试浏览器通知按钮被点击');
|
||||
console.log('Notification support:', 'Notification' in window);
|
||||
console.log('Notification permission:', Notification?.permission);
|
||||
console.log('Platform:', navigator.platform);
|
||||
console.log('Fullscreen:', !!document.fullscreenElement);
|
||||
|
||||
// 直接使用原生 Notification API 测试
|
||||
if (!('Notification' in window)) {
|
||||
alert('您的浏览器不支持桌面通知');
|
||||
return;
|
||||
}
|
||||
|
||||
if (Notification.permission !== 'granted') {
|
||||
alert('浏览器通知权限未授予\n当前权限状态:' + Notification.permission);
|
||||
return;
|
||||
}
|
||||
|
||||
// 重置状态
|
||||
setNotificationShown(null);
|
||||
setIsTestingNotification(true);
|
||||
setTestCountdown(8); // 8秒倒计时
|
||||
|
||||
try {
|
||||
console.log('正在创建浏览器通知...');
|
||||
const notification = new Notification('【测试】浏览器通知测试', {
|
||||
body: '如果您看到这条系统级通知,说明浏览器通知功能正常工作',
|
||||
icon: '/logo192.png',
|
||||
badge: '/badge.png',
|
||||
tag: 'test_notification_' + Date.now(),
|
||||
requireInteraction: false,
|
||||
});
|
||||
|
||||
console.log('浏览器通知创建成功:', notification);
|
||||
|
||||
// 监听通知显示(成功显示)
|
||||
notification.onshow = () => {
|
||||
console.log('✅ 浏览器通知已显示(onshow 事件触发)');
|
||||
setNotificationShown(true);
|
||||
};
|
||||
|
||||
// 监听通知错误
|
||||
notification.onerror = (error) => {
|
||||
console.error('❌ 浏览器通知错误:', error);
|
||||
setNotificationShown(false);
|
||||
};
|
||||
|
||||
// 监听通知关闭
|
||||
notification.onclose = () => {
|
||||
console.log('浏览器通知已关闭');
|
||||
};
|
||||
|
||||
// 8秒后自动关闭
|
||||
setTimeout(() => {
|
||||
notification.close();
|
||||
console.log('浏览器通知已自动关闭');
|
||||
}, 8000);
|
||||
|
||||
// 点击通知时聚焦窗口
|
||||
notification.onclick = () => {
|
||||
console.log('浏览器通知被点击');
|
||||
window.focus();
|
||||
notification.close();
|
||||
setNotificationShown(true);
|
||||
};
|
||||
|
||||
setTestCount(prev => prev + 1);
|
||||
} catch (error) {
|
||||
console.error('创建浏览器通知失败:', error);
|
||||
alert('创建浏览器通知失败:' + error.message);
|
||||
setIsTestingNotification(false);
|
||||
setNotificationShown(false);
|
||||
}
|
||||
}}
|
||||
isLoading={isTestingNotification}
|
||||
loadingText={`等待通知... ${testCountdown}s`}
|
||||
>
|
||||
{isTestingNotification ? `等待通知... ${testCountdown}s` : '测试浏览器通知(直接)'}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* 浏览器通知状态说明 */}
|
||||
{browserPermission === 'granted' && (
|
||||
<Text fontSize="xs" color="green.500">
|
||||
@@ -491,6 +488,136 @@ const NotificationTestTool = () => {
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{/* 实时权限状态 */}
|
||||
<HStack spacing={2} justify="center">
|
||||
<Text fontSize="xs" color="gray.500">
|
||||
实际权限:
|
||||
</Text>
|
||||
<Badge
|
||||
colorScheme={
|
||||
('Notification' in window && Notification.permission === 'granted') ? 'green' :
|
||||
('Notification' in window && Notification.permission === 'denied') ? 'red' : 'gray'
|
||||
}
|
||||
>
|
||||
{('Notification' in window) ? Notification.permission : '不支持'}
|
||||
</Badge>
|
||||
</HStack>
|
||||
|
||||
{/* 环境警告 */}
|
||||
{isFullscreen && (
|
||||
<Alert status="warning" size="sm" borderRadius="md">
|
||||
<AlertIcon />
|
||||
<Box fontSize="xs">
|
||||
<Text fontWeight="bold">全屏模式</Text>
|
||||
<Text>某些浏览器在全屏模式下不显示通知</Text>
|
||||
</Box>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{isMacOS && notificationShown === false && (
|
||||
<Alert status="error" size="sm" borderRadius="md">
|
||||
<AlertIcon />
|
||||
<Box fontSize="xs">
|
||||
<Text fontWeight="bold">未检测到通知显示</Text>
|
||||
<Text>可能是专注模式阻止了通知</Text>
|
||||
</Box>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* 故障排查面板 */}
|
||||
<VStack spacing={2} align="stretch">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
colorScheme="orange"
|
||||
leftIcon={<MdWarning />}
|
||||
onClick={onTroubleshootToggle}
|
||||
>
|
||||
{isTroubleshootOpen ? '收起' : '故障排查指南'}
|
||||
</Button>
|
||||
|
||||
<Collapse in={isTroubleshootOpen} animateOpacity>
|
||||
<VStack spacing={3} align="stretch" p={3} bg="orange.50" borderRadius="md">
|
||||
<Text fontSize="xs" fontWeight="bold" color="orange.800">
|
||||
如果看不到浏览器通知,请检查:
|
||||
</Text>
|
||||
|
||||
{/* macOS 专注模式 */}
|
||||
{isMacOS && (
|
||||
<Alert status="warning" size="sm">
|
||||
<AlertIcon />
|
||||
<Box fontSize="xs">
|
||||
<AlertTitle fontSize="xs">macOS 专注模式</AlertTitle>
|
||||
<AlertDescription>
|
||||
<UnorderedList spacing={1} mt={1}>
|
||||
<ListItem>点击右上角控制中心</ListItem>
|
||||
<ListItem>关闭「专注模式」或「勿扰模式」</ListItem>
|
||||
<ListItem>或者:系统设置 → 专注模式 → 关闭</ListItem>
|
||||
</UnorderedList>
|
||||
</AlertDescription>
|
||||
</Box>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* macOS 系统通知设置 */}
|
||||
{isMacOS && (
|
||||
<Alert status="info" size="sm">
|
||||
<AlertIcon />
|
||||
<Box fontSize="xs">
|
||||
<AlertTitle fontSize="xs">macOS 系统通知设置</AlertTitle>
|
||||
<AlertDescription>
|
||||
<UnorderedList spacing={1} mt={1}>
|
||||
<ListItem>系统设置 → 通知</ListItem>
|
||||
<ListItem>找到 <Code fontSize="xs">Google Chrome</Code> 或 <Code fontSize="xs">Microsoft Edge</Code></ListItem>
|
||||
<ListItem>确保「允许通知」已开启</ListItem>
|
||||
<ListItem>通知样式设置为「横幅」或「提醒」</ListItem>
|
||||
</UnorderedList>
|
||||
</AlertDescription>
|
||||
</Box>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Chrome 浏览器设置 */}
|
||||
<Alert status="info" size="sm">
|
||||
<AlertIcon />
|
||||
<Box fontSize="xs">
|
||||
<AlertTitle fontSize="xs">Chrome 浏览器设置</AlertTitle>
|
||||
<AlertDescription>
|
||||
<UnorderedList spacing={1} mt={1}>
|
||||
<ListItem>地址栏输入: <Code fontSize="xs">chrome://settings/content/notifications</Code></ListItem>
|
||||
<ListItem>确保「网站可以请求发送通知」已开启</ListItem>
|
||||
<ListItem>检查本站点是否在「允许」列表中</ListItem>
|
||||
</UnorderedList>
|
||||
</AlertDescription>
|
||||
</Box>
|
||||
</Alert>
|
||||
|
||||
{/* 全屏模式提示 */}
|
||||
{isFullscreen && (
|
||||
<Alert status="warning" size="sm">
|
||||
<AlertIcon />
|
||||
<Box fontSize="xs">
|
||||
<AlertTitle fontSize="xs">退出全屏模式</AlertTitle>
|
||||
<AlertDescription>
|
||||
按 <Code fontSize="xs">ESC</Code> 键退出全屏,然后重新测试
|
||||
</AlertDescription>
|
||||
</Box>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* 测试结果反馈 */}
|
||||
{notificationShown === true && (
|
||||
<Alert status="success" size="sm">
|
||||
<AlertIcon />
|
||||
<Text fontSize="xs">✅ 通知功能正常!</Text>
|
||||
</Alert>
|
||||
)}
|
||||
</VStack>
|
||||
</Collapse>
|
||||
</VStack>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* 功能按钮 */}
|
||||
|
||||
83
src/components/PostHogProvider.js
Normal file
83
src/components/PostHogProvider.js
Normal file
@@ -0,0 +1,83 @@
|
||||
// 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;
|
||||
@@ -1,5 +1,5 @@
|
||||
// src/components/ProtectedRoute.js - 弹窗拦截版本
|
||||
import React, { useEffect } from 'react';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Box, VStack, Spinner, Text } from '@chakra-ui/react';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { useAuthModal } from '../contexts/AuthModalContext';
|
||||
@@ -8,15 +8,17 @@ const ProtectedRoute = ({ children }) => {
|
||||
const { isAuthenticated, isLoading, user } = useAuth();
|
||||
const { openAuthModal, isAuthModalOpen } = useAuthModal();
|
||||
|
||||
// 记录当前路径,登录成功后可以跳转回来
|
||||
const currentPath = window.location.pathname + window.location.search;
|
||||
// ⚡ 使用 useRef 保存当前路径,避免每次渲染创建新字符串导致 useEffect 无限循环
|
||||
const currentPathRef = useRef(window.location.pathname + window.location.search);
|
||||
|
||||
// 未登录时自动弹出认证窗口
|
||||
useEffect(() => {
|
||||
if (!isLoading && !isAuthenticated && !user && !isAuthModalOpen) {
|
||||
openAuthModal(currentPath);
|
||||
openAuthModal(currentPathRef.current);
|
||||
}
|
||||
}, [isAuthenticated, user, isLoading, isAuthModalOpen, currentPath, openAuthModal]);
|
||||
// ⚠️ 移除 user 依赖,因为 user 对象每次从 API 返回都是新引用,会导致无限循环
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isAuthenticated, isLoading, isAuthModalOpen, openAuthModal]);
|
||||
|
||||
// 显示加载状态
|
||||
if (isLoading) {
|
||||
|
||||
60
src/components/RiskDisclaimer/RiskDisclaimer.js
Normal file
60
src/components/RiskDisclaimer/RiskDisclaimer.js
Normal file
@@ -0,0 +1,60 @@
|
||||
// src/components/RiskDisclaimer/RiskDisclaimer.js
|
||||
import React from 'react';
|
||||
import { Box, Text, HStack, Icon, useColorModeValue } from '@chakra-ui/react';
|
||||
|
||||
/**
|
||||
* 风险提示组件
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {string} props.text - 风险提示文本内容
|
||||
* @param {string} props.variant - 文本变体类型 ('default', 'homepage', 'section')
|
||||
* @param {Object} props.sx - 额外的样式对象
|
||||
*/
|
||||
const RiskDisclaimer = ({
|
||||
text,
|
||||
variant = 'default',
|
||||
sx = {},
|
||||
mt = 0,
|
||||
mb = 0,
|
||||
...rest
|
||||
}) => {
|
||||
// 极简风格 - 透明背景,固定灰色文字
|
||||
const textColor = '#999999'; // 固定中性灰,不受主题影响
|
||||
|
||||
// 预定义的文本变体
|
||||
const textVariants = {
|
||||
homepage: '风险提示:解析内容由价值前沿人工采集整理自新闻、公告、研报等公开信息,团队辛苦编写,未经许可严禁转载。站内所有文章均不构成投资建议,请投资者注意风险,独立审慎决策。',
|
||||
default: '风险提示:解析内容由价值前沿人工采集整理自新闻、公告、研报等公开信息,团队辛苦编写,未经许可严禁转载。本产品内容均不构成投资建议,请投资者注意风险,独立审慎决策。',
|
||||
section: '风险提示:解析内容由价值前沿人工采集整理自新闻、公告、研报等公开信息,团队辛苦编写,未经许可严禁转载。本部分产品内容均不构成投资建议,请投资者注意风险,独立审慎决策。'
|
||||
};
|
||||
|
||||
// 使用传入的text或预定义的variant
|
||||
const displayText = text || textVariants[variant] || textVariants.default;
|
||||
|
||||
return (
|
||||
<Box
|
||||
bg="transparent"
|
||||
p={0}
|
||||
mt={mt}
|
||||
mb={mb}
|
||||
width="100%"
|
||||
sx={sx}
|
||||
{...rest}
|
||||
>
|
||||
<HStack spacing={0} align="flex-start">
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={textColor}
|
||||
lineHeight="1.6"
|
||||
fontWeight="normal"
|
||||
textAlign="center"
|
||||
width="100%"
|
||||
>
|
||||
{displayText}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default RiskDisclaimer;
|
||||
2
src/components/RiskDisclaimer/index.js
Normal file
2
src/components/RiskDisclaimer/index.js
Normal file
@@ -0,0 +1,2 @@
|
||||
// src/components/RiskDisclaimer/index.js
|
||||
export { default } from './RiskDisclaimer';
|
||||
@@ -7,6 +7,7 @@ import moment from 'moment';
|
||||
import { stockService } from '../../services/eventService';
|
||||
import CitedContent from '../Citation/CitedContent';
|
||||
import { logger } from '../../utils/logger';
|
||||
import RiskDisclaimer from '../RiskDisclaimer';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
@@ -563,19 +564,8 @@ const StockChartAntdModal = ({
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* 调试信息 */}
|
||||
{process.env.NODE_ENV === 'development' && chartData && (
|
||||
<div style={{ marginTop: 16, padding: 12, backgroundColor: '#f0f0f0', borderRadius: 6, fontSize: '12px' }}>
|
||||
<Text strong style={{ display: 'block', marginBottom: 4 }}>调试信息:</Text>
|
||||
<Text>数据条数: {chartData.data ? chartData.data.length : 0}</Text>
|
||||
<br />
|
||||
<Text>交易日期: {chartData.trade_date}</Text>
|
||||
<br />
|
||||
<Text>图表类型: {activeChartType}</Text>
|
||||
<br />
|
||||
<Text>原始事件时间: {eventTime}</Text>
|
||||
</div>
|
||||
)}
|
||||
{/* 风险提示 */}
|
||||
<RiskDisclaimer variant="default" />
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
@@ -6,6 +6,7 @@ import * as echarts from 'echarts';
|
||||
import moment from 'moment';
|
||||
import { stockService } from '../../services/eventService';
|
||||
import { logger } from '../../utils/logger';
|
||||
import RiskDisclaimer from '../RiskDisclaimer';
|
||||
|
||||
const StockChartModal = ({
|
||||
isOpen,
|
||||
@@ -545,6 +546,11 @@ const StockChartModal = ({
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* 风险提示 */}
|
||||
<Box px={4} pb={4}>
|
||||
<RiskDisclaimer variant="default" />
|
||||
</Box>
|
||||
|
||||
{process.env.NODE_ENV === 'development' && chartData && (
|
||||
<Box p={4} bg="gray.50" fontSize="xs" color="gray.600">
|
||||
<Text fontWeight="bold">调试信息:</Text>
|
||||
|
||||
@@ -33,6 +33,7 @@ import {
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { logger } from '../../utils/logger';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { useSubscriptionEvents } from '../../hooks/useSubscriptionEvents';
|
||||
|
||||
// Icons
|
||||
import {
|
||||
@@ -54,6 +55,14 @@ export default function SubscriptionContent() {
|
||||
// Auth context
|
||||
const { user } = useAuth();
|
||||
|
||||
// 🎯 初始化订阅埋点Hook(传入当前订阅信息)
|
||||
const subscriptionEvents = useSubscriptionEvents({
|
||||
currentSubscription: {
|
||||
plan: user?.subscription_plan || 'free',
|
||||
status: user?.subscription_status || 'none'
|
||||
}
|
||||
});
|
||||
|
||||
// Chakra color mode
|
||||
const textColor = useColorModeValue('gray.700', 'white');
|
||||
const borderColor = useColorModeValue('gray.200', 'gray.600');
|
||||
@@ -161,6 +170,13 @@ export default function SubscriptionContent() {
|
||||
return;
|
||||
}
|
||||
|
||||
// 🎯 追踪定价方案选择
|
||||
subscriptionEvents.trackPricingPlanSelected(
|
||||
plan.name,
|
||||
selectedCycle,
|
||||
selectedCycle === 'monthly' ? plan.monthly_price : plan.yearly_price
|
||||
);
|
||||
|
||||
setSelectedPlan(plan);
|
||||
onPaymentModalOpen();
|
||||
};
|
||||
@@ -170,6 +186,17 @@ export default function SubscriptionContent() {
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const price = selectedCycle === 'monthly' ? selectedPlan.monthly_price : selectedPlan.yearly_price;
|
||||
|
||||
// 🎯 追踪支付发起
|
||||
subscriptionEvents.trackPaymentInitiated({
|
||||
planName: selectedPlan.name,
|
||||
paymentMethod: 'wechat_pay',
|
||||
amount: price,
|
||||
billingCycle: selectedCycle,
|
||||
orderId: null // Will be set after order creation
|
||||
});
|
||||
|
||||
const response = await fetch('/api/payment/create-order', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -204,6 +231,13 @@ export default function SubscriptionContent() {
|
||||
throw new Error('网络错误');
|
||||
}
|
||||
} catch (error) {
|
||||
// 🎯 追踪支付失败
|
||||
subscriptionEvents.trackPaymentFailed({
|
||||
planName: selectedPlan.name,
|
||||
paymentMethod: 'wechat_pay',
|
||||
amount: selectedCycle === 'monthly' ? selectedPlan.monthly_price : selectedPlan.yearly_price
|
||||
}, error.message);
|
||||
|
||||
toast({
|
||||
title: '创建订单失败',
|
||||
description: error.message,
|
||||
@@ -251,6 +285,26 @@ export default function SubscriptionContent() {
|
||||
setAutoCheckInterval(null);
|
||||
|
||||
logger.info('SubscriptionContent', '自动检测到支付成功', { orderId });
|
||||
|
||||
// 🎯 追踪支付成功
|
||||
subscriptionEvents.trackPaymentSuccessful({
|
||||
planName: selectedPlan?.name,
|
||||
paymentMethod: 'wechat_pay',
|
||||
amount: paymentOrder?.amount,
|
||||
billingCycle: selectedCycle,
|
||||
orderId: orderId,
|
||||
transactionId: data.transaction_id
|
||||
});
|
||||
|
||||
// 🎯 追踪订阅创建
|
||||
subscriptionEvents.trackSubscriptionCreated({
|
||||
plan: selectedPlan?.name,
|
||||
billingCycle: selectedCycle,
|
||||
amount: paymentOrder?.amount,
|
||||
startDate: new Date().toISOString(),
|
||||
endDate: null // Will be calculated by backend
|
||||
});
|
||||
|
||||
toast({
|
||||
title: '支付成功!',
|
||||
description: '订阅已激活,正在跳转...',
|
||||
|
||||
77
src/constants/importanceLevels.js
Normal file
77
src/constants/importanceLevels.js
Normal file
@@ -0,0 +1,77 @@
|
||||
// src/constants/importanceLevels.js
|
||||
// 事件重要性等级配置
|
||||
|
||||
import {
|
||||
WarningIcon,
|
||||
WarningTwoIcon,
|
||||
InfoIcon,
|
||||
CheckCircleIcon,
|
||||
} from '@chakra-ui/icons';
|
||||
|
||||
/**
|
||||
* 重要性等级配置
|
||||
* 用于事件列表展示和重要性说明
|
||||
*/
|
||||
export const IMPORTANCE_LEVELS = {
|
||||
'S': {
|
||||
level: 'S',
|
||||
color: 'purple.600',
|
||||
bgColor: 'purple.50',
|
||||
borderColor: 'purple.200',
|
||||
icon: WarningIcon,
|
||||
label: '极高',
|
||||
dotBg: 'purple.500',
|
||||
description: '重大事件,市场影响深远',
|
||||
antdColor: '#722ed1', // 对应 Ant Design 的紫色
|
||||
},
|
||||
'A': {
|
||||
level: 'A',
|
||||
color: 'red.600',
|
||||
bgColor: 'red.50',
|
||||
borderColor: 'red.200',
|
||||
icon: WarningTwoIcon,
|
||||
label: '高',
|
||||
dotBg: 'red.500',
|
||||
description: '重要事件,影响较大',
|
||||
antdColor: '#ff4d4f', // 对应 Ant Design 的红色
|
||||
},
|
||||
'B': {
|
||||
level: 'B',
|
||||
color: 'orange.600',
|
||||
bgColor: 'orange.50',
|
||||
borderColor: 'orange.200',
|
||||
icon: InfoIcon,
|
||||
label: '中',
|
||||
dotBg: 'orange.500',
|
||||
description: '普通事件,有一定影响',
|
||||
antdColor: '#faad14', // 对应 Ant Design 的橙色
|
||||
},
|
||||
'C': {
|
||||
level: 'C',
|
||||
color: 'green.600',
|
||||
bgColor: 'green.50',
|
||||
borderColor: 'green.200',
|
||||
icon: CheckCircleIcon,
|
||||
label: '低',
|
||||
dotBg: 'green.500',
|
||||
description: '参考事件,影响有限',
|
||||
antdColor: '#52c41a', // 对应 Ant Design 的绿色
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取重要性等级配置
|
||||
* @param {string} importance - 重要性等级 (S/A/B/C)
|
||||
* @returns {Object} 重要性配置对象
|
||||
*/
|
||||
export const getImportanceConfig = (importance) => {
|
||||
return IMPORTANCE_LEVELS[importance] || IMPORTANCE_LEVELS['C'];
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取所有等级配置(用于说明列表)
|
||||
* @returns {Array} 所有等级配置数组
|
||||
*/
|
||||
export const getAllImportanceLevels = () => {
|
||||
return Object.values(IMPORTANCE_LEVELS);
|
||||
};
|
||||
@@ -3,6 +3,7 @@ import React, { createContext, useContext, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useToast } from '@chakra-ui/react';
|
||||
import { logger } from '../utils/logger';
|
||||
import { useNotification } from '../contexts/NotificationContext';
|
||||
|
||||
// 创建认证上下文
|
||||
const AuthContext = createContext();
|
||||
@@ -23,11 +24,37 @@ export const AuthProvider = ({ children }) => {
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const toast = useToast();
|
||||
const { showWelcomeGuide } = useNotification();
|
||||
|
||||
// ⚡ 使用 ref 保存最新的 isAuthenticated 值,避免事件监听器重复注册
|
||||
const isAuthenticatedRef = React.useRef(isAuthenticated);
|
||||
|
||||
// ⚡ 请求节流:记录上次请求时间,防止短时间内重复请求
|
||||
const lastCheckTimeRef = React.useRef(0);
|
||||
const MIN_CHECK_INTERVAL = 1000; // 最少间隔1秒
|
||||
|
||||
// 检查Session状态
|
||||
const checkSession = async () => {
|
||||
// 节流检查
|
||||
const now = Date.now();
|
||||
const timeSinceLastCheck = now - lastCheckTimeRef.current;
|
||||
|
||||
if (timeSinceLastCheck < MIN_CHECK_INTERVAL) {
|
||||
logger.warn('AuthContext', 'checkSession 请求被节流(防止频繁请求)', {
|
||||
timeSinceLastCheck: `${timeSinceLastCheck}ms`,
|
||||
minInterval: `${MIN_CHECK_INTERVAL}ms`,
|
||||
reason: '距离上次请求间隔太短'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
lastCheckTimeRef.current = now;
|
||||
|
||||
try {
|
||||
logger.debug('AuthContext', '检查Session状态');
|
||||
logger.debug('AuthContext', '开始检查Session状态', {
|
||||
timestamp: new Date().toISOString(),
|
||||
timeSinceLastCheck: timeSinceLastCheck > 0 ? `${timeSinceLastCheck}ms` : '首次请求'
|
||||
});
|
||||
|
||||
// 创建超时控制器
|
||||
const controller = new AbortController();
|
||||
@@ -55,19 +82,27 @@ export const AuthProvider = ({ children }) => {
|
||||
});
|
||||
|
||||
if (data.isAuthenticated && data.user) {
|
||||
setUser(data.user);
|
||||
setIsAuthenticated(true);
|
||||
// ⚡ 只在 user 数据真正变化时才更新状态,避免无限循环
|
||||
setUser((prevUser) => {
|
||||
// 比较用户 ID,如果相同则不更新
|
||||
if (prevUser && prevUser.id === data.user.id) {
|
||||
return prevUser;
|
||||
}
|
||||
return data.user;
|
||||
});
|
||||
setIsAuthenticated((prev) => prev === true ? prev : true);
|
||||
} else {
|
||||
setUser(null);
|
||||
setIsAuthenticated(false);
|
||||
setUser((prev) => prev === null ? prev : null);
|
||||
setIsAuthenticated((prev) => prev === false ? prev : false);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('AuthContext', 'checkSession', error);
|
||||
// 网络错误或超时,设置为未登录状态
|
||||
setUser(null);
|
||||
setIsAuthenticated(false);
|
||||
setUser((prev) => prev === null ? prev : null);
|
||||
setIsAuthenticated((prev) => prev === false ? prev : false);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
// ⚡ 只在 isLoading 为 true 时才设置为 false,避免不必要的状态更新
|
||||
setIsLoading((prev) => prev === false ? prev : false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -77,11 +112,17 @@ export const AuthProvider = ({ children }) => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// ⚡ 同步 isAuthenticated 到 ref
|
||||
useEffect(() => {
|
||||
isAuthenticatedRef.current = isAuthenticated;
|
||||
}, [isAuthenticated]);
|
||||
|
||||
// 监听路由变化,检查session(处理微信登录回调)
|
||||
// ⚡ 移除 isAuthenticated 依赖,使用 ref 避免重复注册事件监听器
|
||||
useEffect(() => {
|
||||
const handleRouteChange = () => {
|
||||
// 如果是从微信回调返回的,重新检查session
|
||||
if (window.location.pathname === '/home' && !isAuthenticated) {
|
||||
// 使用 ref 获取最新的认证状态
|
||||
if (window.location.pathname === '/home' && !isAuthenticatedRef.current) {
|
||||
checkSession();
|
||||
}
|
||||
};
|
||||
@@ -89,7 +130,7 @@ export const AuthProvider = ({ children }) => {
|
||||
window.addEventListener('popstate', handleRouteChange);
|
||||
return () => window.removeEventListener('popstate', handleRouteChange);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isAuthenticated]);
|
||||
}, []); // ✅ 空依赖数组,只注册一次事件监听器
|
||||
|
||||
// 更新本地用户的便捷方法
|
||||
const updateUser = (partial) => {
|
||||
@@ -156,6 +197,11 @@ export const AuthProvider = ({ children }) => {
|
||||
// isClosable: true,
|
||||
// });
|
||||
|
||||
// ⚡ 登录成功后显示欢迎引导(延迟2秒,避免与登录Toast冲突)
|
||||
setTimeout(() => {
|
||||
showWelcomeGuide();
|
||||
}, 2000);
|
||||
|
||||
return { success: true };
|
||||
|
||||
} catch (error) {
|
||||
@@ -166,54 +212,6 @@ export const AuthProvider = ({ children }) => {
|
||||
}
|
||||
};
|
||||
|
||||
// 注册方法
|
||||
const register = async (username, email, password) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
const formData = new URLSearchParams();
|
||||
formData.append('username', username);
|
||||
formData.append('email', email);
|
||||
formData.append('password', password);
|
||||
|
||||
const response = await fetch(`/api/auth/register`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
credentials: 'include',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok || !data.success) {
|
||||
throw new Error(data.error || '注册失败');
|
||||
}
|
||||
|
||||
// 注册成功后自动登录
|
||||
setUser(data.user);
|
||||
setIsAuthenticated(true);
|
||||
|
||||
toast({
|
||||
title: "注册成功",
|
||||
description: "欢迎加入价值前沿!",
|
||||
status: "success",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
|
||||
return { success: true };
|
||||
|
||||
} catch (error) {
|
||||
logger.error('AuthContext', 'register', error);
|
||||
|
||||
// ❌ 移除错误 toast,静默失败
|
||||
return { success: false, error: error.message };
|
||||
} finally{
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 手机号注册
|
||||
const registerWithPhone = async (phone, code, username, password) => {
|
||||
@@ -252,6 +250,11 @@ export const AuthProvider = ({ children }) => {
|
||||
isClosable: true,
|
||||
});
|
||||
|
||||
// ⚡ 注册成功后显示欢迎引导(延迟2秒)
|
||||
setTimeout(() => {
|
||||
showWelcomeGuide();
|
||||
}, 2000);
|
||||
|
||||
return { success: true };
|
||||
|
||||
} catch (error) {
|
||||
@@ -299,6 +302,11 @@ export const AuthProvider = ({ children }) => {
|
||||
isClosable: true,
|
||||
});
|
||||
|
||||
// ⚡ 注册成功后显示欢迎引导(延迟2秒)
|
||||
setTimeout(() => {
|
||||
showWelcomeGuide();
|
||||
}, 2000);
|
||||
|
||||
return { success: true };
|
||||
|
||||
} catch (error) {
|
||||
@@ -414,7 +422,6 @@ export const AuthProvider = ({ children }) => {
|
||||
isLoading,
|
||||
updateUser,
|
||||
login,
|
||||
register,
|
||||
registerWithPhone,
|
||||
registerWithEmail,
|
||||
sendSmsCode,
|
||||
|
||||
176
src/contexts/IndustryContext.js
Normal file
176
src/contexts/IndustryContext.js
Normal file
@@ -0,0 +1,176 @@
|
||||
// src/contexts/IndustryContext.js
|
||||
// 行业分类数据全局上下文 - 使用API获取 + 缓存机制
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect, useRef } from 'react';
|
||||
import { industryData as staticIndustryData } from '../data/industryData';
|
||||
import { industryService } from '../services/industryService';
|
||||
import { logger } from '../utils/logger';
|
||||
|
||||
const IndustryContext = createContext();
|
||||
|
||||
// 缓存配置
|
||||
const CACHE_KEY = 'industry_classifications_cache';
|
||||
const CACHE_DURATION = 24 * 60 * 60 * 1000; // 1天(24小时)
|
||||
|
||||
/**
|
||||
* useIndustry Hook
|
||||
* 在任何组件中使用行业数据
|
||||
*/
|
||||
export const useIndustry = () => {
|
||||
const context = useContext(IndustryContext);
|
||||
if (!context) {
|
||||
throw new Error('useIndustry must be used within IndustryProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
/**
|
||||
* 从 localStorage 读取缓存
|
||||
*/
|
||||
const loadFromCache = () => {
|
||||
try {
|
||||
const cached = localStorage.getItem(CACHE_KEY);
|
||||
if (!cached) return null;
|
||||
|
||||
const { data, timestamp } = JSON.parse(cached);
|
||||
const now = Date.now();
|
||||
|
||||
// 检查缓存是否过期(1天)
|
||||
if (now - timestamp > CACHE_DURATION) {
|
||||
localStorage.removeItem(CACHE_KEY);
|
||||
logger.debug('IndustryContext', '缓存已过期,清除缓存');
|
||||
return null;
|
||||
}
|
||||
|
||||
logger.debug('IndustryContext', '从缓存加载行业数据', {
|
||||
count: data?.length || 0,
|
||||
age: Math.round((now - timestamp) / 1000 / 60) + ' 分钟前'
|
||||
});
|
||||
return data;
|
||||
} catch (error) {
|
||||
logger.error('IndustryContext', 'loadFromCache', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 保存到 localStorage
|
||||
*/
|
||||
const saveToCache = (data) => {
|
||||
try {
|
||||
localStorage.setItem(CACHE_KEY, JSON.stringify({
|
||||
data,
|
||||
timestamp: Date.now()
|
||||
}));
|
||||
logger.debug('IndustryContext', '行业数据已缓存', {
|
||||
count: data?.length || 0
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('IndustryContext', 'saveToCache', error);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* IndustryProvider 组件
|
||||
* 提供全局行业数据管理 - 使用API获取 + 缓存机制
|
||||
*/
|
||||
export const IndustryProvider = ({ children }) => {
|
||||
const [industryData, setIndustryData] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const hasLoadedRef = useRef(false);
|
||||
const isLoadingRef = useRef(false);
|
||||
|
||||
/**
|
||||
* 加载行业数据
|
||||
*/
|
||||
const loadIndustryData = async () => {
|
||||
// 防止重复加载(处理 StrictMode 双重调用)
|
||||
if (hasLoadedRef.current || isLoadingRef.current) {
|
||||
logger.debug('IndustryContext', '跳过重复加载', {
|
||||
hasLoaded: hasLoadedRef.current,
|
||||
isLoading: isLoadingRef.current
|
||||
});
|
||||
return industryData;
|
||||
}
|
||||
|
||||
try {
|
||||
isLoadingRef.current = true;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
logger.debug('IndustryContext', '开始加载行业数据');
|
||||
|
||||
// 1. 先尝试从缓存加载
|
||||
const cachedData = loadFromCache();
|
||||
if (cachedData && cachedData.length > 0) {
|
||||
setIndustryData(cachedData);
|
||||
hasLoadedRef.current = true;
|
||||
return cachedData;
|
||||
}
|
||||
|
||||
// 2. 缓存不存在或过期,调用 API
|
||||
logger.debug('IndustryContext', '缓存无效,调用API获取数据');
|
||||
const response = await industryService.getClassifications();
|
||||
|
||||
if (response.success && response.data && response.data.length > 0) {
|
||||
setIndustryData(response.data);
|
||||
saveToCache(response.data);
|
||||
hasLoadedRef.current = true;
|
||||
|
||||
logger.debug('IndustryContext', 'API数据加载成功', {
|
||||
count: response.data.length
|
||||
});
|
||||
|
||||
return response.data;
|
||||
} else {
|
||||
throw new Error('API返回数据为空');
|
||||
}
|
||||
} catch (err) {
|
||||
// 3. API 失败,回退到静态数据
|
||||
logger.warn('IndustryContext', 'API加载失败,使用静态数据', {
|
||||
error: err.message
|
||||
});
|
||||
|
||||
setError(err.message);
|
||||
setIndustryData(staticIndustryData);
|
||||
hasLoadedRef.current = true;
|
||||
|
||||
return staticIndustryData;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
isLoadingRef.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 刷新行业数据(清除缓存并重新加载)
|
||||
*/
|
||||
const refreshIndustryData = async () => {
|
||||
logger.debug('IndustryContext', '刷新行业数据,清除缓存');
|
||||
localStorage.removeItem(CACHE_KEY);
|
||||
hasLoadedRef.current = false;
|
||||
isLoadingRef.current = false;
|
||||
return loadIndustryData();
|
||||
};
|
||||
|
||||
// 组件挂载时自动加载数据
|
||||
useEffect(() => {
|
||||
loadIndustryData();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const value = {
|
||||
industryData,
|
||||
loading,
|
||||
error,
|
||||
loadIndustryData,
|
||||
refreshIndustryData
|
||||
};
|
||||
|
||||
return (
|
||||
<IndustryContext.Provider value={value}>
|
||||
{children}
|
||||
</IndustryContext.Provider>
|
||||
);
|
||||
};
|
||||
@@ -60,6 +60,8 @@ export const NotificationProvider = ({ children }) => {
|
||||
const [maxReconnectAttempts, setMaxReconnectAttempts] = useState(Infinity);
|
||||
const audioRef = useRef(null);
|
||||
const reconnectedTimerRef = useRef(null); // 用于自动消失 RECONNECTED 状态
|
||||
const processedEventIds = useRef(new Set()); // 用于Socket层去重,记录已处理的事件ID
|
||||
const MAX_PROCESSED_IDS = 1000; // 最多保留1000个ID,避免内存泄漏
|
||||
|
||||
// ⚡ 使用权限引导管理 Hook
|
||||
const { shouldShowGuide, markGuideAsShown } = usePermissionGuide();
|
||||
@@ -435,12 +437,23 @@ export const NotificationProvider = ({ children }) => {
|
||||
* @param {object} notification - 通知对象
|
||||
*/
|
||||
const addNotification = useCallback(async (notification) => {
|
||||
// ========== 显示层去重检查 ==========
|
||||
const notificationId = notification.id || `notif_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
||||
|
||||
// 检查当前显示队列中是否已存在该通知
|
||||
const isDuplicate = notifications.some(n => n.id === notificationId);
|
||||
if (isDuplicate) {
|
||||
logger.debug('NotificationContext', 'Duplicate notification ignored at display level', { id: notificationId });
|
||||
return notificationId; // 返回ID但不显示
|
||||
}
|
||||
// ========== 显示层去重检查结束 ==========
|
||||
|
||||
// 根据优先级获取自动关闭时长
|
||||
const priority = notification.priority || PRIORITY_LEVELS.NORMAL;
|
||||
const defaultAutoClose = NOTIFICATION_CONFIG.autoCloseDuration[priority];
|
||||
|
||||
const newNotification = {
|
||||
id: notification.id || `notif_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
|
||||
id: notificationId, // 使用预先生成的ID
|
||||
type: notification.type || 'info',
|
||||
severity: notification.severity || 'info',
|
||||
title: notification.title || '通知',
|
||||
@@ -453,106 +466,116 @@ export const NotificationProvider = ({ children }) => {
|
||||
|
||||
logger.info('NotificationContext', 'Adding notification', newNotification);
|
||||
|
||||
// ========== 智能权限请求策略 ==========
|
||||
// 首次收到重要/紧急通知时,自动请求桌面通知权限
|
||||
if (priority === PRIORITY_LEVELS.URGENT || priority === PRIORITY_LEVELS.IMPORTANT) {
|
||||
if (browserPermission === 'default' && !hasRequestedPermission) {
|
||||
logger.info('NotificationContext', 'First important notification, requesting browser permission');
|
||||
await requestBrowserPermission();
|
||||
}
|
||||
// 如果权限被拒绝,提示用户可以开启
|
||||
else if (browserPermission === 'denied' && hasRequestedPermission) {
|
||||
// 显示带"开启"按钮的 Toast(仅重要/紧急通知)
|
||||
const toastId = 'enable-notification-toast';
|
||||
if (!toast.isActive(toastId)) {
|
||||
toast({
|
||||
id: toastId,
|
||||
title: newNotification.title,
|
||||
description: '💡 开启桌面通知以便后台接收',
|
||||
status: 'warning',
|
||||
duration: 10000,
|
||||
isClosable: true,
|
||||
position: 'top',
|
||||
render: ({ onClose }) => (
|
||||
<Box
|
||||
p={4}
|
||||
bg="orange.500"
|
||||
color="white"
|
||||
borderRadius="md"
|
||||
boxShadow="lg"
|
||||
>
|
||||
<HStack spacing={3} align="start">
|
||||
<Box flex={1}>
|
||||
<Text fontWeight="bold" mb={1}>
|
||||
{newNotification.title}
|
||||
</Text>
|
||||
<Text fontSize="sm" opacity={0.9}>
|
||||
💡 开启桌面通知以便后台接收
|
||||
</Text>
|
||||
</Box>
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="whiteAlpha"
|
||||
onClick={() => {
|
||||
requestBrowserPermission();
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
开启
|
||||
</Button>
|
||||
<CloseButton onClick={onClose} />
|
||||
// ========== 增强权限请求策略 ==========
|
||||
// 只要收到通知,就检查并提示用户授权
|
||||
|
||||
// 如果权限是default(未授权),自动请求
|
||||
if (browserPermission === 'default' && !hasRequestedPermission) {
|
||||
logger.info('NotificationContext', 'Auto-requesting browser permission on notification');
|
||||
await requestBrowserPermission();
|
||||
}
|
||||
// 如果权限是denied(已拒绝),提供设置指引
|
||||
else if (browserPermission === 'denied') {
|
||||
const toastId = 'browser-permission-denied-guide';
|
||||
if (!toast.isActive(toastId)) {
|
||||
toast({
|
||||
id: toastId,
|
||||
duration: 12000,
|
||||
isClosable: true,
|
||||
position: 'top',
|
||||
render: ({ onClose }) => (
|
||||
<Box
|
||||
p={4}
|
||||
bg="orange.500"
|
||||
color="white"
|
||||
borderRadius="md"
|
||||
boxShadow="lg"
|
||||
maxW="400px"
|
||||
>
|
||||
<VStack spacing={3} align="stretch">
|
||||
<HStack spacing={2}>
|
||||
<Icon as={BellIcon} boxSize={5} />
|
||||
<Text fontWeight="bold" fontSize="md">
|
||||
浏览器通知已被拒绝
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
),
|
||||
});
|
||||
}
|
||||
<Text fontSize="sm" opacity={0.9}>
|
||||
{newNotification.title}
|
||||
</Text>
|
||||
<Text fontSize="xs" opacity={0.8}>
|
||||
💡 如需接收桌面通知,请在浏览器设置中允许通知权限
|
||||
</Text>
|
||||
<VStack spacing={1} align="start" fontSize="xs" opacity={0.7}>
|
||||
<Text>Chrome: 地址栏左侧 🔒 → 网站设置 → 通知</Text>
|
||||
<Text>Safari: 偏好设置 → 网站 → 通知</Text>
|
||||
<Text>Edge: 地址栏右侧 ⋯ → 网站权限 → 通知</Text>
|
||||
</VStack>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
colorScheme="whiteAlpha"
|
||||
onClick={onClose}
|
||||
alignSelf="flex-end"
|
||||
>
|
||||
知道了
|
||||
</Button>
|
||||
</VStack>
|
||||
</Box>
|
||||
),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const isPageHidden = document.hidden; // 页面是否在后台
|
||||
|
||||
// ========== 智能分发策略 ==========
|
||||
|
||||
// ========== 原分发策略(按优先级区分)- 已废弃 ==========
|
||||
// 策略 1: 紧急通知 - 双重保障(浏览器 + 网页)
|
||||
if (priority === PRIORITY_LEVELS.URGENT) {
|
||||
logger.info('NotificationContext', 'Urgent notification: sending browser + web');
|
||||
// 总是发送浏览器通知
|
||||
sendBrowserNotification(newNotification);
|
||||
// 如果在前台,也显示网页通知
|
||||
if (!isPageHidden) {
|
||||
addWebNotification(newNotification);
|
||||
}
|
||||
}
|
||||
// if (priority === PRIORITY_LEVELS.URGENT) {
|
||||
// logger.info('NotificationContext', 'Urgent notification: sending browser + web');
|
||||
// // 总是发送浏览器通知
|
||||
// sendBrowserNotification(newNotification);
|
||||
// // 如果在前台,也显示网页通知
|
||||
// if (!isPageHidden) {
|
||||
// addWebNotification(newNotification);
|
||||
// }
|
||||
// }
|
||||
// 策略 2: 重要通知 - 智能切换(后台=浏览器,前台=网页)
|
||||
else if (priority === PRIORITY_LEVELS.IMPORTANT) {
|
||||
if (isPageHidden) {
|
||||
logger.info('NotificationContext', 'Important notification (background): sending browser');
|
||||
sendBrowserNotification(newNotification);
|
||||
} else {
|
||||
logger.info('NotificationContext', 'Important notification (foreground): sending web');
|
||||
addWebNotification(newNotification);
|
||||
}
|
||||
}
|
||||
// else if (priority === PRIORITY_LEVELS.IMPORTANT) {
|
||||
// if (isPageHidden) {
|
||||
// logger.info('NotificationContext', 'Important notification (background): sending browser');
|
||||
// sendBrowserNotification(newNotification);
|
||||
// } else {
|
||||
// logger.info('NotificationContext', 'Important notification (foreground): sending web');
|
||||
// addWebNotification(newNotification);
|
||||
// }
|
||||
// }
|
||||
// 策略 3: 普通通知 - 仅网页通知
|
||||
else {
|
||||
logger.info('NotificationContext', 'Normal notification: sending web only');
|
||||
// else {
|
||||
// logger.info('NotificationContext', 'Normal notification: sending web only');
|
||||
// addWebNotification(newNotification);
|
||||
// }
|
||||
|
||||
// ========== 新分发策略(仅区分前后台) ==========
|
||||
if (isPageHidden) {
|
||||
// 页面在后台:发送浏览器通知
|
||||
logger.info('NotificationContext', 'Page hidden: sending browser notification');
|
||||
sendBrowserNotification(newNotification);
|
||||
} else {
|
||||
// 页面在前台:发送网页通知
|
||||
logger.info('NotificationContext', 'Page visible: sending web notification');
|
||||
addWebNotification(newNotification);
|
||||
}
|
||||
|
||||
return newNotification.id;
|
||||
}, [sendBrowserNotification, addWebNotification, browserPermission, hasRequestedPermission, requestBrowserPermission]);
|
||||
}, [notifications, toast, sendBrowserNotification, addWebNotification, browserPermission, hasRequestedPermission, requestBrowserPermission]);
|
||||
|
||||
// 连接到 Socket 服务
|
||||
useEffect(() => {
|
||||
logger.info('NotificationContext', 'Initializing socket connection...');
|
||||
console.log(`%c[NotificationContext] Initializing socket (type: ${SOCKET_TYPE})`, 'color: #673AB7; font-weight: bold;');
|
||||
|
||||
// 连接 socket
|
||||
socket.connect();
|
||||
|
||||
// 获取并保存最大重连次数
|
||||
const maxAttempts = socket.getMaxReconnectAttempts?.() || Infinity;
|
||||
setMaxReconnectAttempts(maxAttempts);
|
||||
logger.info('NotificationContext', 'Max reconnect attempts', { maxAttempts });
|
||||
// ✅ 第一步: 注册所有事件监听器
|
||||
console.log('%c[NotificationContext] Step 1: Registering event listeners...', 'color: #673AB7;');
|
||||
|
||||
// 监听连接状态
|
||||
socket.on('connect', () => {
|
||||
@@ -560,6 +583,7 @@ export const NotificationProvider = ({ children }) => {
|
||||
setIsConnected(true);
|
||||
setReconnectAttempt(0);
|
||||
logger.info('NotificationContext', 'Socket connected', { wasDisconnected });
|
||||
console.log('%c[NotificationContext] ✅ Received connect event, updating state to connected', 'color: #4CAF50; font-weight: bold;');
|
||||
|
||||
// 如果之前断开过,显示 RECONNECTED 状态2秒后自动消失
|
||||
if (wasDisconnected) {
|
||||
@@ -624,6 +648,27 @@ export const NotificationProvider = ({ children }) => {
|
||||
socket.on('new_event', (data) => {
|
||||
logger.info('NotificationContext', 'Received new event', data);
|
||||
|
||||
// ========== Socket层去重检查 ==========
|
||||
const eventId = data.id || `${data.type}_${data.publishTime}`;
|
||||
|
||||
if (processedEventIds.current.has(eventId)) {
|
||||
logger.debug('NotificationContext', 'Duplicate event ignored at socket level', { eventId });
|
||||
return; // 重复事件,直接忽略
|
||||
}
|
||||
|
||||
// 记录已处理的事件ID
|
||||
processedEventIds.current.add(eventId);
|
||||
|
||||
// 限制Set大小,避免内存泄漏
|
||||
if (processedEventIds.current.size > MAX_PROCESSED_IDS) {
|
||||
const idsArray = Array.from(processedEventIds.current);
|
||||
processedEventIds.current = new Set(idsArray.slice(-MAX_PROCESSED_IDS));
|
||||
logger.debug('NotificationContext', 'Cleaned up old processed event IDs', {
|
||||
kept: MAX_PROCESSED_IDS
|
||||
});
|
||||
}
|
||||
// ========== Socket层去重检查结束 ==========
|
||||
|
||||
// 使用适配器转换事件格式
|
||||
const notification = adaptEventToNotification(data);
|
||||
addNotification(notification);
|
||||
@@ -635,6 +680,18 @@ export const NotificationProvider = ({ children }) => {
|
||||
addNotification(data);
|
||||
});
|
||||
|
||||
console.log('%c[NotificationContext] ✅ All event listeners registered', 'color: #4CAF50; font-weight: bold;');
|
||||
|
||||
// ✅ 第二步: 获取最大重连次数
|
||||
const maxAttempts = socket.getMaxReconnectAttempts?.() || Infinity;
|
||||
setMaxReconnectAttempts(maxAttempts);
|
||||
logger.info('NotificationContext', 'Max reconnect attempts', { maxAttempts });
|
||||
|
||||
// ✅ 第三步: 调用 socket.connect()
|
||||
console.log('%c[NotificationContext] Step 2: Calling socket.connect()...', 'color: #673AB7; font-weight: bold;');
|
||||
socket.connect();
|
||||
console.log('%c[NotificationContext] socket.connect() completed', 'color: #673AB7;');
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
logger.info('NotificationContext', 'Cleaning up socket connection');
|
||||
@@ -652,7 +709,7 @@ export const NotificationProvider = ({ children }) => {
|
||||
socket.off('system_notification');
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [adaptEventToNotification, connectionStatus, toast]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
}, []); // ✅ 空依赖数组,确保只执行一次,避免 React 严格模式重复执行
|
||||
|
||||
// ==================== 智能自动重试 ====================
|
||||
|
||||
|
||||
4340
src/data/industryData.js
Normal file
4340
src/data/industryData.js
Normal file
File diff suppressed because it is too large
Load Diff
463
src/hooks/useAuthEvents.js
Normal file
463
src/hooks/useAuthEvents.js
Normal file
@@ -0,0 +1,463 @@
|
||||
// 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;
|
||||
325
src/hooks/useDashboardEvents.js
Normal file
325
src/hooks/useDashboardEvents.js
Normal file
@@ -0,0 +1,325 @@
|
||||
// src/hooks/useDashboardEvents.js
|
||||
// 个人中心(Dashboard/Center)事件追踪 Hook
|
||||
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { usePostHogTrack } from './usePostHogRedux';
|
||||
import { RETENTION_EVENTS } from '../lib/constants';
|
||||
import { logger } from '../utils/logger';
|
||||
|
||||
/**
|
||||
* 个人中心事件追踪 Hook
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {string} options.pageType - 页面类型 ('center' | 'profile' | 'settings')
|
||||
* @param {Function} options.navigate - 路由导航函数
|
||||
* @returns {Object} 事件追踪处理函数集合
|
||||
*/
|
||||
export const useDashboardEvents = ({ pageType = 'center', navigate } = {}) => {
|
||||
const { track } = usePostHogTrack();
|
||||
|
||||
// 🎯 页面浏览事件 - 页面加载时触发
|
||||
useEffect(() => {
|
||||
const eventMap = {
|
||||
'center': RETENTION_EVENTS.DASHBOARD_CENTER_VIEWED,
|
||||
'profile': RETENTION_EVENTS.PROFILE_PAGE_VIEWED,
|
||||
'settings': RETENTION_EVENTS.SETTINGS_PAGE_VIEWED,
|
||||
};
|
||||
|
||||
const eventName = eventMap[pageType] || RETENTION_EVENTS.DASHBOARD_VIEWED;
|
||||
|
||||
track(eventName, {
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useDashboardEvents', `📊 Dashboard Page Viewed: ${pageType}`);
|
||||
}, [track, pageType]);
|
||||
|
||||
/**
|
||||
* 追踪功能卡片点击
|
||||
* @param {string} cardName - 卡片名称 ('watchlist' | 'following_events' | 'comments' | 'subscription')
|
||||
* @param {Object} cardData - 卡片数据
|
||||
*/
|
||||
const trackFunctionCardClicked = useCallback((cardName, cardData = {}) => {
|
||||
if (!cardName) {
|
||||
logger.warn('useDashboardEvents', 'Card name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(RETENTION_EVENTS.FUNCTION_CARD_CLICKED, {
|
||||
card_name: cardName,
|
||||
data_count: cardData.count || 0,
|
||||
has_data: Boolean(cardData.count && cardData.count > 0),
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useDashboardEvents', '🎴 Function Card Clicked', {
|
||||
cardName,
|
||||
count: cardData.count,
|
||||
});
|
||||
}, [track]);
|
||||
|
||||
/**
|
||||
* 追踪自选股列表查看
|
||||
* @param {number} stockCount - 自选股数量
|
||||
* @param {boolean} hasRealtime - 是否有实时行情
|
||||
*/
|
||||
const trackWatchlistViewed = useCallback((stockCount = 0, hasRealtime = false) => {
|
||||
track('Watchlist Viewed', {
|
||||
stock_count: stockCount,
|
||||
has_realtime: hasRealtime,
|
||||
is_empty: stockCount === 0,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useDashboardEvents', '⭐ Watchlist Viewed', {
|
||||
stockCount,
|
||||
hasRealtime,
|
||||
});
|
||||
}, [track]);
|
||||
|
||||
/**
|
||||
* 追踪自选股点击
|
||||
* @param {Object} stock - 股票对象
|
||||
* @param {string} stock.code - 股票代码
|
||||
* @param {string} stock.name - 股票名称
|
||||
* @param {number} position - 在列表中的位置
|
||||
*/
|
||||
const trackWatchlistStockClicked = useCallback((stock, position = 0) => {
|
||||
if (!stock || !stock.code) {
|
||||
logger.warn('useDashboardEvents', 'Stock object is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(RETENTION_EVENTS.STOCK_CLICKED, {
|
||||
stock_code: stock.code,
|
||||
stock_name: stock.name || '',
|
||||
source: 'watchlist',
|
||||
position,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useDashboardEvents', '🎯 Watchlist Stock Clicked', {
|
||||
stockCode: stock.code,
|
||||
position,
|
||||
});
|
||||
}, [track]);
|
||||
|
||||
/**
|
||||
* 追踪自选股添加
|
||||
* @param {Object} stock - 股票对象
|
||||
* @param {string} stock.code - 股票代码
|
||||
* @param {string} stock.name - 股票名称
|
||||
* @param {string} source - 来源 ('search' | 'stock_detail' | 'manual')
|
||||
*/
|
||||
const trackWatchlistStockAdded = useCallback((stock, source = 'manual') => {
|
||||
if (!stock || !stock.code) {
|
||||
logger.warn('useDashboardEvents', 'Stock object is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Watchlist Stock Added', {
|
||||
stock_code: stock.code,
|
||||
stock_name: stock.name || '',
|
||||
source,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useDashboardEvents', '➕ Watchlist Stock Added', {
|
||||
stockCode: stock.code,
|
||||
source,
|
||||
});
|
||||
}, [track]);
|
||||
|
||||
/**
|
||||
* 追踪自选股移除
|
||||
* @param {Object} stock - 股票对象
|
||||
* @param {string} stock.code - 股票代码
|
||||
* @param {string} stock.name - 股票名称
|
||||
*/
|
||||
const trackWatchlistStockRemoved = useCallback((stock) => {
|
||||
if (!stock || !stock.code) {
|
||||
logger.warn('useDashboardEvents', 'Stock object is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Watchlist Stock Removed', {
|
||||
stock_code: stock.code,
|
||||
stock_name: stock.name || '',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useDashboardEvents', '➖ Watchlist Stock Removed', {
|
||||
stockCode: stock.code,
|
||||
});
|
||||
}, [track]);
|
||||
|
||||
/**
|
||||
* 追踪关注的事件列表查看
|
||||
* @param {number} eventCount - 关注的事件数量
|
||||
*/
|
||||
const trackFollowingEventsViewed = useCallback((eventCount = 0) => {
|
||||
track('Following Events Viewed', {
|
||||
event_count: eventCount,
|
||||
is_empty: eventCount === 0,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useDashboardEvents', '📌 Following Events Viewed', {
|
||||
eventCount,
|
||||
});
|
||||
}, [track]);
|
||||
|
||||
/**
|
||||
* 追踪关注的事件点击
|
||||
* @param {Object} event - 事件对象
|
||||
* @param {number} event.id - 事件ID
|
||||
* @param {string} event.title - 事件标题
|
||||
* @param {number} position - 在列表中的位置
|
||||
*/
|
||||
const trackFollowingEventClicked = useCallback((event, position = 0) => {
|
||||
if (!event || !event.id) {
|
||||
logger.warn('useDashboardEvents', 'Event object is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(RETENTION_EVENTS.NEWS_ARTICLE_CLICKED, {
|
||||
news_id: event.id,
|
||||
news_title: event.title || '',
|
||||
source: 'following_events',
|
||||
position,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useDashboardEvents', '📰 Following Event Clicked', {
|
||||
eventId: event.id,
|
||||
position,
|
||||
});
|
||||
}, [track]);
|
||||
|
||||
/**
|
||||
* 追踪事件评论列表查看
|
||||
* @param {number} commentCount - 评论数量
|
||||
*/
|
||||
const trackCommentsViewed = useCallback((commentCount = 0) => {
|
||||
track('Event Comments Viewed', {
|
||||
comment_count: commentCount,
|
||||
is_empty: commentCount === 0,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useDashboardEvents', '💬 Comments Viewed', {
|
||||
commentCount,
|
||||
});
|
||||
}, [track]);
|
||||
|
||||
/**
|
||||
* 追踪订阅信息查看
|
||||
* @param {Object} subscription - 订阅信息
|
||||
* @param {string} subscription.plan - 订阅计划 ('free' | 'pro' | 'enterprise')
|
||||
* @param {string} subscription.status - 订阅状态 ('active' | 'expired' | 'cancelled')
|
||||
*/
|
||||
const trackSubscriptionViewed = useCallback((subscription = {}) => {
|
||||
track(RETENTION_EVENTS.SUBSCRIPTION_PAGE_VIEWED, {
|
||||
subscription_plan: subscription.plan || 'free',
|
||||
subscription_status: subscription.status || 'unknown',
|
||||
is_paid_user: subscription.plan !== 'free',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useDashboardEvents', '💳 Subscription Viewed', {
|
||||
plan: subscription.plan,
|
||||
status: subscription.status,
|
||||
});
|
||||
}, [track]);
|
||||
|
||||
/**
|
||||
* 追踪升级按钮点击
|
||||
* @param {string} currentPlan - 当前计划
|
||||
* @param {string} targetPlan - 目标计划
|
||||
* @param {string} source - 来源位置
|
||||
*/
|
||||
const trackUpgradePlanClicked = useCallback((currentPlan = 'free', targetPlan = 'pro', source = 'dashboard') => {
|
||||
track(RETENTION_EVENTS.UPGRADE_PLAN_CLICKED, {
|
||||
current_plan: currentPlan,
|
||||
target_plan: targetPlan,
|
||||
source,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useDashboardEvents', '⬆️ Upgrade Plan Clicked', {
|
||||
currentPlan,
|
||||
targetPlan,
|
||||
source,
|
||||
});
|
||||
}, [track]);
|
||||
|
||||
/**
|
||||
* 追踪个人资料更新
|
||||
* @param {Array<string>} updatedFields - 更新的字段列表
|
||||
*/
|
||||
const trackProfileUpdated = useCallback((updatedFields = []) => {
|
||||
track(RETENTION_EVENTS.PROFILE_UPDATED, {
|
||||
updated_fields: updatedFields,
|
||||
field_count: updatedFields.length,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useDashboardEvents', '✏️ Profile Updated', {
|
||||
updatedFields,
|
||||
});
|
||||
}, [track]);
|
||||
|
||||
/**
|
||||
* 追踪设置更改
|
||||
* @param {string} settingName - 设置名称
|
||||
* @param {any} oldValue - 旧值
|
||||
* @param {any} newValue - 新值
|
||||
*/
|
||||
const trackSettingChanged = useCallback((settingName, oldValue, newValue) => {
|
||||
if (!settingName) {
|
||||
logger.warn('useDashboardEvents', 'Setting name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(RETENTION_EVENTS.SETTINGS_CHANGED, {
|
||||
setting_name: settingName,
|
||||
old_value: String(oldValue),
|
||||
new_value: String(newValue),
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useDashboardEvents', '⚙️ Setting Changed', {
|
||||
settingName,
|
||||
oldValue,
|
||||
newValue,
|
||||
});
|
||||
}, [track]);
|
||||
|
||||
return {
|
||||
// 功能卡片事件
|
||||
trackFunctionCardClicked,
|
||||
|
||||
// 自选股相关事件
|
||||
trackWatchlistViewed,
|
||||
trackWatchlistStockClicked,
|
||||
trackWatchlistStockAdded,
|
||||
trackWatchlistStockRemoved,
|
||||
|
||||
// 关注事件相关
|
||||
trackFollowingEventsViewed,
|
||||
trackFollowingEventClicked,
|
||||
|
||||
// 评论相关
|
||||
trackCommentsViewed,
|
||||
|
||||
// 订阅相关
|
||||
trackSubscriptionViewed,
|
||||
trackUpgradePlanClicked,
|
||||
|
||||
// 个人资料和设置
|
||||
trackProfileUpdated,
|
||||
trackSettingChanged,
|
||||
};
|
||||
};
|
||||
|
||||
export default useDashboardEvents;
|
||||
@@ -22,7 +22,8 @@
|
||||
*/
|
||||
|
||||
import { useEffect, useState, useRef } from 'react';
|
||||
import { socketService } from '../services/socketService';
|
||||
import socket from '../services/socket';
|
||||
import { logger } from '../utils/logger';
|
||||
|
||||
export const useEventNotifications = (options = {}) => {
|
||||
const {
|
||||
@@ -37,78 +38,158 @@ export const useEventNotifications = (options = {}) => {
|
||||
const [error, setError] = useState(null);
|
||||
const unsubscribeRef = useRef(null);
|
||||
|
||||
// 使用 ref 存储 onNewEvent 回调,避免因回调函数引用改变导致重新连接
|
||||
const onNewEventRef = useRef(onNewEvent);
|
||||
|
||||
// 每次 onNewEvent 改变时更新 ref
|
||||
useEffect(() => {
|
||||
onNewEventRef.current = onNewEvent;
|
||||
}, [onNewEvent]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('[useEventNotifications DEBUG] ========== useEffect 执行 ==========');
|
||||
console.log('[useEventNotifications DEBUG] enabled:', enabled);
|
||||
console.log('[useEventNotifications DEBUG] eventType:', eventType);
|
||||
console.log('[useEventNotifications DEBUG] importance:', importance);
|
||||
|
||||
// 如果禁用,则不订阅
|
||||
if (!enabled) {
|
||||
console.log('[useEventNotifications DEBUG] ⚠️ 订阅已禁用,跳过');
|
||||
return;
|
||||
}
|
||||
|
||||
// 连接状态监听
|
||||
const handleConnect = () => {
|
||||
console.log('[useEventNotifications DEBUG] ✓ WebSocket 已连接');
|
||||
logger.info('useEventNotifications', 'WebSocket connected');
|
||||
setIsConnected(true);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const handleDisconnect = () => {
|
||||
console.log('[useEventNotifications DEBUG] ⚠️ WebSocket 已断开');
|
||||
logger.warn('useEventNotifications', 'WebSocket disconnected');
|
||||
setIsConnected(false);
|
||||
};
|
||||
|
||||
const handleConnectError = (err) => {
|
||||
console.error('[useEventNotifications ERROR] WebSocket 连接错误:', err);
|
||||
logger.error('useEventNotifications', 'WebSocket connect error', err);
|
||||
setError(err);
|
||||
setIsConnected(false);
|
||||
};
|
||||
|
||||
// 监听连接事件(必须在connect之前设置,否则可能错过事件)
|
||||
socket.on('connect', handleConnect);
|
||||
socket.on('disconnect', handleDisconnect);
|
||||
socket.on('connect_error', handleConnectError);
|
||||
|
||||
// 连接 WebSocket
|
||||
socketService.connect();
|
||||
console.log('[useEventNotifications DEBUG] 准备连接 WebSocket...');
|
||||
logger.info('useEventNotifications', 'Initializing WebSocket connection');
|
||||
|
||||
// 监听连接事件
|
||||
socketService.on('connect', handleConnect);
|
||||
socketService.on('disconnect', handleDisconnect);
|
||||
socketService.on('connect_error', handleConnectError);
|
||||
// 先检查是否已经连接
|
||||
const alreadyConnected = socket.connected || false;
|
||||
console.log('[useEventNotifications DEBUG] 当前连接状态:', alreadyConnected);
|
||||
logger.info('useEventNotifications', 'Pre-connection check', { isConnected: alreadyConnected });
|
||||
|
||||
// 新事件处理函数
|
||||
if (alreadyConnected) {
|
||||
// 如果已经连接,直接更新状态
|
||||
console.log('[useEventNotifications DEBUG] Socket已连接,直接更新状态');
|
||||
logger.info('useEventNotifications', 'Socket already connected, updating state immediately');
|
||||
setIsConnected(true);
|
||||
// 验证状态更新
|
||||
setTimeout(() => {
|
||||
console.log('[useEventNotifications DEBUG] 1秒后验证状态更新 - isConnected应该为true');
|
||||
}, 1000);
|
||||
} else {
|
||||
// 否则建立新连接
|
||||
socket.connect();
|
||||
}
|
||||
|
||||
// 新事件处理函数 - 使用 ref 中的回调
|
||||
const handleNewEvent = (eventData) => {
|
||||
setNewEvent(eventData);
|
||||
console.log('\n[useEventNotifications DEBUG] ========== Hook 收到新事件 ==========');
|
||||
console.log('[useEventNotifications DEBUG] 事件数据:', eventData);
|
||||
console.log('[useEventNotifications DEBUG] 事件 ID:', eventData?.id);
|
||||
console.log('[useEventNotifications DEBUG] 事件标题:', eventData?.title);
|
||||
|
||||
// 调用外部回调
|
||||
if (onNewEvent) {
|
||||
onNewEvent(eventData);
|
||||
console.log('[useEventNotifications DEBUG] 设置 newEvent 状态');
|
||||
setNewEvent(eventData);
|
||||
console.log('[useEventNotifications DEBUG] ✓ newEvent 状态已更新');
|
||||
|
||||
// 调用外部回调(从 ref 中获取最新的回调)
|
||||
if (onNewEventRef.current) {
|
||||
console.log('[useEventNotifications DEBUG] 准备调用外部 onNewEvent 回调');
|
||||
onNewEventRef.current(eventData);
|
||||
console.log('[useEventNotifications DEBUG] ✓ 外部 onNewEvent 回调已调用');
|
||||
} else {
|
||||
console.log('[useEventNotifications DEBUG] ⚠️ 没有外部 onNewEvent 回调');
|
||||
}
|
||||
|
||||
console.log('[useEventNotifications DEBUG] ========== Hook 事件处理完成 ==========\n');
|
||||
};
|
||||
|
||||
// 订阅事件推送
|
||||
socketService.subscribeToEvents({
|
||||
eventType,
|
||||
importance,
|
||||
onNewEvent: handleNewEvent,
|
||||
onSubscribed: (data) => {
|
||||
console.log('订阅成功:', data);
|
||||
},
|
||||
});
|
||||
console.log('\n[useEventNotifications DEBUG] ========== 开始订阅事件 ==========');
|
||||
console.log('[useEventNotifications DEBUG] eventType:', eventType);
|
||||
console.log('[useEventNotifications DEBUG] importance:', importance);
|
||||
console.log('[useEventNotifications DEBUG] enabled:', enabled);
|
||||
|
||||
// 检查 socket 是否有 subscribeToEvents 方法(mockSocketService 和 socketService 都有)
|
||||
if (socket.subscribeToEvents) {
|
||||
socket.subscribeToEvents({
|
||||
eventType,
|
||||
importance,
|
||||
onNewEvent: handleNewEvent,
|
||||
onSubscribed: (data) => {
|
||||
console.log('\n[useEventNotifications DEBUG] ========== 订阅成功回调 ==========');
|
||||
console.log('[useEventNotifications DEBUG] 订阅数据:', data);
|
||||
console.log('[useEventNotifications DEBUG] ========== 订阅成功处理完成 ==========\n');
|
||||
},
|
||||
});
|
||||
console.log('[useEventNotifications DEBUG] ========== 订阅请求已发送 ==========\n');
|
||||
} else {
|
||||
console.warn('[useEventNotifications] socket.subscribeToEvents 方法不存在');
|
||||
}
|
||||
|
||||
// 保存取消订阅函数
|
||||
unsubscribeRef.current = () => {
|
||||
socketService.unsubscribeFromEvents({ eventType });
|
||||
if (socket.unsubscribeFromEvents) {
|
||||
socket.unsubscribeFromEvents({ eventType });
|
||||
}
|
||||
};
|
||||
|
||||
// 组件卸载时清理
|
||||
return () => {
|
||||
console.log('清理 WebSocket 订阅');
|
||||
console.log('\n[useEventNotifications DEBUG] ========== 清理 WebSocket 订阅 ==========');
|
||||
|
||||
// 取消订阅
|
||||
if (unsubscribeRef.current) {
|
||||
console.log('[useEventNotifications DEBUG] 取消订阅...');
|
||||
unsubscribeRef.current();
|
||||
}
|
||||
|
||||
// 移除监听器
|
||||
socketService.off('connect', handleConnect);
|
||||
socketService.off('disconnect', handleDisconnect);
|
||||
socketService.off('connect_error', handleConnectError);
|
||||
console.log('[useEventNotifications DEBUG] 移除事件监听器...');
|
||||
socket.off('connect', handleConnect);
|
||||
socket.off('disconnect', handleDisconnect);
|
||||
socket.off('connect_error', handleConnectError);
|
||||
|
||||
// 断开连接
|
||||
socketService.disconnect();
|
||||
// 注意:不断开连接,因为 socket 是全局共享的
|
||||
// 由 NotificationContext 统一管理连接生命周期
|
||||
console.log('[useEventNotifications DEBUG] ========== 清理完成 ==========\n');
|
||||
};
|
||||
}, [eventType, importance, enabled, onNewEvent]);
|
||||
}, [eventType, importance, enabled]); // 移除 onNewEvent 依赖
|
||||
|
||||
// 监控 isConnected 状态变化(调试用)
|
||||
useEffect(() => {
|
||||
console.log('[useEventNotifications DEBUG] ========== isConnected 状态变化 ==========');
|
||||
console.log('[useEventNotifications DEBUG] isConnected:', isConnected);
|
||||
console.log('[useEventNotifications DEBUG] ===========================================');
|
||||
}, [isConnected]);
|
||||
|
||||
console.log('[useEventNotifications DEBUG] Hook返回值 - isConnected:', isConnected);
|
||||
|
||||
return {
|
||||
newEvent, // 最新收到的事件
|
||||
|
||||
293
src/hooks/useNavigationEvents.js
Normal file
293
src/hooks/useNavigationEvents.js
Normal file
@@ -0,0 +1,293 @@
|
||||
// src/hooks/useNavigationEvents.js
|
||||
// 导航和菜单事件追踪 Hook
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import { usePostHogTrack } from './usePostHogRedux';
|
||||
import { RETENTION_EVENTS } from '../lib/constants';
|
||||
import { logger } from '../utils/logger';
|
||||
|
||||
/**
|
||||
* 导航事件追踪 Hook
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {string} options.component - 组件名称 ('top_nav' | 'sidebar' | 'breadcrumb' | 'footer')
|
||||
* @returns {Object} 事件追踪处理函数集合
|
||||
*/
|
||||
export const useNavigationEvents = ({ component = 'navigation' } = {}) => {
|
||||
const { track } = usePostHogTrack();
|
||||
|
||||
/**
|
||||
* 追踪顶部导航点击
|
||||
* @param {string} itemName - 导航项名称
|
||||
* @param {string} path - 导航目标路径
|
||||
* @param {string} category - 导航分类 ('main' | 'user' | 'utility')
|
||||
*/
|
||||
const trackTopNavClicked = useCallback((itemName, path = '', category = 'main') => {
|
||||
if (!itemName) {
|
||||
logger.warn('useNavigationEvents', 'trackTopNavClicked: itemName is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(RETENTION_EVENTS.TOP_NAV_CLICKED, {
|
||||
item_name: itemName,
|
||||
path,
|
||||
category,
|
||||
component,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useNavigationEvents', '🔝 Top Navigation Clicked', {
|
||||
itemName,
|
||||
path,
|
||||
category,
|
||||
});
|
||||
}, [track, component]);
|
||||
|
||||
/**
|
||||
* 追踪侧边栏菜单点击
|
||||
* @param {string} itemName - 菜单项名称
|
||||
* @param {string} path - 目标路径
|
||||
* @param {number} level - 菜单层级 (1=主菜单, 2=子菜单)
|
||||
* @param {boolean} isExpanded - 是否展开状态
|
||||
*/
|
||||
const trackSidebarMenuClicked = useCallback((itemName, path = '', level = 1, isExpanded = false) => {
|
||||
if (!itemName) {
|
||||
logger.warn('useNavigationEvents', 'trackSidebarMenuClicked: itemName is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(RETENTION_EVENTS.SIDEBAR_MENU_CLICKED, {
|
||||
item_name: itemName,
|
||||
path,
|
||||
level,
|
||||
is_expanded: isExpanded,
|
||||
component,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useNavigationEvents', '📂 Sidebar Menu Clicked', {
|
||||
itemName,
|
||||
path,
|
||||
level,
|
||||
isExpanded,
|
||||
});
|
||||
}, [track, component]);
|
||||
|
||||
/**
|
||||
* 追踪通用菜单项点击
|
||||
* @param {string} itemName - 菜单项名称
|
||||
* @param {string} menuType - 菜单类型 ('dropdown' | 'context' | 'tab')
|
||||
* @param {string} path - 目标路径
|
||||
*/
|
||||
const trackMenuItemClicked = useCallback((itemName, menuType = 'dropdown', path = '') => {
|
||||
if (!itemName) {
|
||||
logger.warn('useNavigationEvents', 'trackMenuItemClicked: itemName is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(RETENTION_EVENTS.MENU_ITEM_CLICKED, {
|
||||
item_name: itemName,
|
||||
menu_type: menuType,
|
||||
path,
|
||||
component,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useNavigationEvents', '📋 Menu Item Clicked', {
|
||||
itemName,
|
||||
menuType,
|
||||
path,
|
||||
});
|
||||
}, [track, component]);
|
||||
|
||||
/**
|
||||
* 追踪面包屑导航点击
|
||||
* @param {string} itemName - 面包屑项名称
|
||||
* @param {string} path - 目标路径
|
||||
* @param {number} position - 在面包屑中的位置
|
||||
* @param {number} totalItems - 面包屑总项数
|
||||
*/
|
||||
const trackBreadcrumbClicked = useCallback((itemName, path = '', position = 0, totalItems = 0) => {
|
||||
if (!itemName) {
|
||||
logger.warn('useNavigationEvents', 'trackBreadcrumbClicked: itemName is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(RETENTION_EVENTS.BREADCRUMB_CLICKED, {
|
||||
item_name: itemName,
|
||||
path,
|
||||
position,
|
||||
total_items: totalItems,
|
||||
is_last: position === totalItems - 1,
|
||||
component,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useNavigationEvents', '🍞 Breadcrumb Clicked', {
|
||||
itemName,
|
||||
position,
|
||||
totalItems,
|
||||
});
|
||||
}, [track, component]);
|
||||
|
||||
/**
|
||||
* 追踪Logo点击(返回首页)
|
||||
*/
|
||||
const trackLogoClicked = useCallback(() => {
|
||||
track('Logo Clicked', {
|
||||
component,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useNavigationEvents', '🏠 Logo Clicked');
|
||||
}, [track, component]);
|
||||
|
||||
/**
|
||||
* 追踪用户菜单展开
|
||||
* @param {Object} user - 用户对象
|
||||
* @param {number} menuItemCount - 菜单项数量
|
||||
*/
|
||||
const trackUserMenuOpened = useCallback((user = {}, menuItemCount = 0) => {
|
||||
track('User Menu Opened', {
|
||||
user_id: user.id || null,
|
||||
menu_item_count: menuItemCount,
|
||||
component,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useNavigationEvents', '👤 User Menu Opened', {
|
||||
userId: user.id,
|
||||
menuItemCount,
|
||||
});
|
||||
}, [track, component]);
|
||||
|
||||
/**
|
||||
* 追踪通知中心打开
|
||||
* @param {number} unreadCount - 未读通知数量
|
||||
*/
|
||||
const trackNotificationCenterOpened = useCallback((unreadCount = 0) => {
|
||||
track('Notification Center Opened', {
|
||||
unread_count: unreadCount,
|
||||
has_unread: unreadCount > 0,
|
||||
component,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useNavigationEvents', '🔔 Notification Center Opened', {
|
||||
unreadCount,
|
||||
});
|
||||
}, [track, component]);
|
||||
|
||||
/**
|
||||
* 追踪语言切换
|
||||
* @param {string} fromLanguage - 原语言
|
||||
* @param {string} toLanguage - 目标语言
|
||||
*/
|
||||
const trackLanguageChanged = useCallback((fromLanguage, toLanguage) => {
|
||||
if (!fromLanguage || !toLanguage) {
|
||||
logger.warn('useNavigationEvents', 'trackLanguageChanged: both languages are required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Language Changed', {
|
||||
from_language: fromLanguage,
|
||||
to_language: toLanguage,
|
||||
component,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useNavigationEvents', '🌐 Language Changed', {
|
||||
fromLanguage,
|
||||
toLanguage,
|
||||
});
|
||||
}, [track, component]);
|
||||
|
||||
/**
|
||||
* 追踪主题切换(深色/浅色模式)
|
||||
* @param {string} fromTheme - 原主题
|
||||
* @param {string} toTheme - 目标主题
|
||||
*/
|
||||
const trackThemeChanged = useCallback((fromTheme, toTheme) => {
|
||||
if (!fromTheme || !toTheme) {
|
||||
logger.warn('useNavigationEvents', 'trackThemeChanged: both themes are required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Theme Changed', {
|
||||
from_theme: fromTheme,
|
||||
to_theme: toTheme,
|
||||
component,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useNavigationEvents', '🎨 Theme Changed', {
|
||||
fromTheme,
|
||||
toTheme,
|
||||
});
|
||||
}, [track, component]);
|
||||
|
||||
/**
|
||||
* 追踪快捷键使用
|
||||
* @param {string} shortcut - 快捷键组合 (如 'Ctrl+K', 'Cmd+/')
|
||||
* @param {string} action - 触发的动作
|
||||
*/
|
||||
const trackShortcutUsed = useCallback((shortcut, action = '') => {
|
||||
if (!shortcut) {
|
||||
logger.warn('useNavigationEvents', 'trackShortcutUsed: shortcut is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Keyboard Shortcut Used', {
|
||||
shortcut,
|
||||
action,
|
||||
component,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useNavigationEvents', '⌨️ Keyboard Shortcut Used', {
|
||||
shortcut,
|
||||
action,
|
||||
});
|
||||
}, [track, component]);
|
||||
|
||||
/**
|
||||
* 追踪返回按钮点击
|
||||
* @param {string} fromPage - 当前页面
|
||||
* @param {string} toPage - 返回到的页面
|
||||
*/
|
||||
const trackBackButtonClicked = useCallback((fromPage = '', toPage = '') => {
|
||||
track('Back Button Clicked', {
|
||||
from_page: fromPage,
|
||||
to_page: toPage,
|
||||
component,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useNavigationEvents', '◀️ Back Button Clicked', {
|
||||
fromPage,
|
||||
toPage,
|
||||
});
|
||||
}, [track, component]);
|
||||
|
||||
return {
|
||||
// 导航点击事件
|
||||
trackTopNavClicked,
|
||||
trackSidebarMenuClicked,
|
||||
trackMenuItemClicked,
|
||||
trackBreadcrumbClicked,
|
||||
trackLogoClicked,
|
||||
|
||||
// 用户交互事件
|
||||
trackUserMenuOpened,
|
||||
trackNotificationCenterOpened,
|
||||
|
||||
// 设置变更事件
|
||||
trackLanguageChanged,
|
||||
trackThemeChanged,
|
||||
|
||||
// 其他交互
|
||||
trackShortcutUsed,
|
||||
trackBackButtonClicked,
|
||||
};
|
||||
};
|
||||
|
||||
export default useNavigationEvents;
|
||||
55
src/hooks/usePageTracking.js
Normal file
55
src/hooks/usePageTracking.js
Normal file
@@ -0,0 +1,55 @@
|
||||
// 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;
|
||||
101
src/hooks/usePostHog.js
Normal file
101
src/hooks/usePostHog.js
Normal file
@@ -0,0 +1,101 @@
|
||||
// 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;
|
||||
272
src/hooks/usePostHogRedux.js
Normal file
272
src/hooks/usePostHogRedux.js
Normal file
@@ -0,0 +1,272 @@
|
||||
// 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;
|
||||
334
src/hooks/useProfileEvents.js
Normal file
334
src/hooks/useProfileEvents.js
Normal file
@@ -0,0 +1,334 @@
|
||||
// src/hooks/useProfileEvents.js
|
||||
// 个人资料和设置事件追踪 Hook
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import { usePostHogTrack } from './usePostHogRedux';
|
||||
import { RETENTION_EVENTS } from '../lib/constants';
|
||||
import { logger } from '../utils/logger';
|
||||
|
||||
/**
|
||||
* 个人资料和设置事件追踪 Hook
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {string} options.pageType - 页面类型 ('profile' | 'settings' | 'security')
|
||||
* @returns {Object} 事件追踪处理函数集合
|
||||
*/
|
||||
export const useProfileEvents = ({ pageType = 'profile' } = {}) => {
|
||||
const { track } = usePostHogTrack();
|
||||
|
||||
/**
|
||||
* 追踪个人资料字段编辑开始
|
||||
* @param {string} fieldName - 字段名称 ('nickname' | 'email' | 'phone' | 'avatar' | 'bio')
|
||||
*/
|
||||
const trackProfileFieldEditStarted = useCallback((fieldName) => {
|
||||
if (!fieldName) {
|
||||
logger.warn('useProfileEvents', 'trackProfileFieldEditStarted: fieldName is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Profile Field Edit Started', {
|
||||
field_name: fieldName,
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useProfileEvents', '✏️ Profile Field Edit Started', {
|
||||
fieldName,
|
||||
pageType,
|
||||
});
|
||||
}, [track, pageType]);
|
||||
|
||||
/**
|
||||
* 追踪个人资料更新成功
|
||||
* @param {Array<string>} updatedFields - 更新的字段列表
|
||||
* @param {Object} changes - 变更详情
|
||||
*/
|
||||
const trackProfileUpdated = useCallback((updatedFields = [], changes = {}) => {
|
||||
if (!updatedFields || updatedFields.length === 0) {
|
||||
logger.warn('useProfileEvents', 'trackProfileUpdated: updatedFields array is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(RETENTION_EVENTS.PROFILE_UPDATED, {
|
||||
updated_fields: updatedFields,
|
||||
field_count: updatedFields.length,
|
||||
changes: changes,
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useProfileEvents', '✅ Profile Updated', {
|
||||
updatedFields,
|
||||
fieldCount: updatedFields.length,
|
||||
pageType,
|
||||
});
|
||||
}, [track, pageType]);
|
||||
|
||||
/**
|
||||
* 追踪个人资料更新失败
|
||||
* @param {Array<string>} attemptedFields - 尝试更新的字段
|
||||
* @param {string} errorMessage - 错误信息
|
||||
*/
|
||||
const trackProfileUpdateFailed = useCallback((attemptedFields = [], errorMessage = '') => {
|
||||
track('Profile Update Failed', {
|
||||
attempted_fields: attemptedFields,
|
||||
error_message: errorMessage,
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useProfileEvents', '❌ Profile Update Failed', {
|
||||
attemptedFields,
|
||||
errorMessage,
|
||||
pageType,
|
||||
});
|
||||
}, [track, pageType]);
|
||||
|
||||
/**
|
||||
* 追踪头像上传
|
||||
* @param {string} uploadMethod - 上传方式 ('file_upload' | 'url' | 'camera' | 'default_avatar')
|
||||
* @param {number} fileSize - 文件大小(bytes)
|
||||
*/
|
||||
const trackAvatarUploaded = useCallback((uploadMethod = 'file_upload', fileSize = 0) => {
|
||||
track('Avatar Uploaded', {
|
||||
upload_method: uploadMethod,
|
||||
file_size: fileSize,
|
||||
file_size_mb: (fileSize / (1024 * 1024)).toFixed(2),
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useProfileEvents', '🖼️ Avatar Uploaded', {
|
||||
uploadMethod,
|
||||
fileSize,
|
||||
pageType,
|
||||
});
|
||||
}, [track, pageType]);
|
||||
|
||||
/**
|
||||
* 追踪密码更改
|
||||
* @param {boolean} success - 是否成功
|
||||
* @param {string} errorReason - 失败原因
|
||||
*/
|
||||
const trackPasswordChanged = useCallback((success = true, errorReason = '') => {
|
||||
track('Password Changed', {
|
||||
success,
|
||||
error_reason: errorReason || null,
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useProfileEvents', success ? '🔒 Password Changed Successfully' : '❌ Password Change Failed', {
|
||||
success,
|
||||
errorReason,
|
||||
pageType,
|
||||
});
|
||||
}, [track, pageType]);
|
||||
|
||||
/**
|
||||
* 追踪邮箱验证发起
|
||||
* @param {string} email - 邮箱地址
|
||||
*/
|
||||
const trackEmailVerificationSent = useCallback((email = '') => {
|
||||
track('Email Verification Sent', {
|
||||
email_provided: Boolean(email),
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useProfileEvents', '📧 Email Verification Sent', {
|
||||
emailProvided: Boolean(email),
|
||||
pageType,
|
||||
});
|
||||
}, [track, pageType]);
|
||||
|
||||
/**
|
||||
* 追踪手机号验证发起
|
||||
* @param {string} phone - 手机号
|
||||
*/
|
||||
const trackPhoneVerificationSent = useCallback((phone = '') => {
|
||||
track('Phone Verification Sent', {
|
||||
phone_provided: Boolean(phone),
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useProfileEvents', '📱 Phone Verification Sent', {
|
||||
phoneProvided: Boolean(phone),
|
||||
pageType,
|
||||
});
|
||||
}, [track, pageType]);
|
||||
|
||||
/**
|
||||
* 追踪账号绑定(微信、邮箱、手机等)
|
||||
* @param {string} accountType - 账号类型 ('wechat' | 'email' | 'phone')
|
||||
* @param {boolean} success - 是否成功
|
||||
*/
|
||||
const trackAccountBound = useCallback((accountType, success = true) => {
|
||||
if (!accountType) {
|
||||
logger.warn('useProfileEvents', 'trackAccountBound: accountType is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Account Bound', {
|
||||
account_type: accountType,
|
||||
success,
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useProfileEvents', success ? '🔗 Account Bound' : '❌ Account Bind Failed', {
|
||||
accountType,
|
||||
success,
|
||||
pageType,
|
||||
});
|
||||
}, [track, pageType]);
|
||||
|
||||
/**
|
||||
* 追踪账号解绑
|
||||
* @param {string} accountType - 账号类型
|
||||
* @param {boolean} success - 是否成功
|
||||
*/
|
||||
const trackAccountUnbound = useCallback((accountType, success = true) => {
|
||||
if (!accountType) {
|
||||
logger.warn('useProfileEvents', 'trackAccountUnbound: accountType is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Account Unbound', {
|
||||
account_type: accountType,
|
||||
success,
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useProfileEvents', success ? '🔓 Account Unbound' : '❌ Account Unbind Failed', {
|
||||
accountType,
|
||||
success,
|
||||
pageType,
|
||||
});
|
||||
}, [track, pageType]);
|
||||
|
||||
/**
|
||||
* 追踪设置项更改
|
||||
* @param {string} settingName - 设置名称
|
||||
* @param {any} oldValue - 旧值
|
||||
* @param {any} newValue - 新值
|
||||
* @param {string} category - 设置分类 ('notification' | 'privacy' | 'display' | 'advanced')
|
||||
*/
|
||||
const trackSettingChanged = useCallback((settingName, oldValue, newValue, category = 'general') => {
|
||||
if (!settingName) {
|
||||
logger.warn('useProfileEvents', 'trackSettingChanged: settingName is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(RETENTION_EVENTS.SETTINGS_CHANGED, {
|
||||
setting_name: settingName,
|
||||
old_value: String(oldValue),
|
||||
new_value: String(newValue),
|
||||
category,
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useProfileEvents', '⚙️ Setting Changed', {
|
||||
settingName,
|
||||
oldValue,
|
||||
newValue,
|
||||
category,
|
||||
pageType,
|
||||
});
|
||||
}, [track, pageType]);
|
||||
|
||||
/**
|
||||
* 追踪通知偏好更改
|
||||
* @param {Object} preferences - 通知偏好设置
|
||||
* @param {boolean} preferences.email - 邮件通知
|
||||
* @param {boolean} preferences.push - 推送通知
|
||||
* @param {boolean} preferences.sms - 短信通知
|
||||
*/
|
||||
const trackNotificationPreferencesChanged = useCallback((preferences = {}) => {
|
||||
track('Notification Preferences Changed', {
|
||||
email_enabled: preferences.email || false,
|
||||
push_enabled: preferences.push || false,
|
||||
sms_enabled: preferences.sms || false,
|
||||
total_enabled: Object.values(preferences).filter(Boolean).length,
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useProfileEvents', '🔔 Notification Preferences Changed', {
|
||||
preferences,
|
||||
pageType,
|
||||
});
|
||||
}, [track, pageType]);
|
||||
|
||||
/**
|
||||
* 追踪隐私设置更改
|
||||
* @param {string} privacySetting - 隐私设置名称
|
||||
* @param {boolean} isPublic - 是否公开
|
||||
*/
|
||||
const trackPrivacySettingChanged = useCallback((privacySetting, isPublic = false) => {
|
||||
if (!privacySetting) {
|
||||
logger.warn('useProfileEvents', 'trackPrivacySettingChanged: privacySetting is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Privacy Setting Changed', {
|
||||
privacy_setting: privacySetting,
|
||||
is_public: isPublic,
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useProfileEvents', '🔐 Privacy Setting Changed', {
|
||||
privacySetting,
|
||||
isPublic,
|
||||
pageType,
|
||||
});
|
||||
}, [track, pageType]);
|
||||
|
||||
/**
|
||||
* 追踪账号删除请求
|
||||
* @param {string} reason - 删除原因
|
||||
*/
|
||||
const trackAccountDeletionRequested = useCallback((reason = '') => {
|
||||
track('Account Deletion Requested', {
|
||||
reason,
|
||||
has_reason: Boolean(reason),
|
||||
page_type: pageType,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useProfileEvents', '🗑️ Account Deletion Requested', {
|
||||
reason,
|
||||
pageType,
|
||||
});
|
||||
}, [track, pageType]);
|
||||
|
||||
return {
|
||||
// 个人资料编辑
|
||||
trackProfileFieldEditStarted,
|
||||
trackProfileUpdated,
|
||||
trackProfileUpdateFailed,
|
||||
trackAvatarUploaded,
|
||||
|
||||
// 安全和验证
|
||||
trackPasswordChanged,
|
||||
trackEmailVerificationSent,
|
||||
trackPhoneVerificationSent,
|
||||
|
||||
// 账号绑定
|
||||
trackAccountBound,
|
||||
trackAccountUnbound,
|
||||
|
||||
// 设置更改
|
||||
trackSettingChanged,
|
||||
trackNotificationPreferencesChanged,
|
||||
trackPrivacySettingChanged,
|
||||
|
||||
// 账号管理
|
||||
trackAccountDeletionRequested,
|
||||
};
|
||||
};
|
||||
|
||||
export default useProfileEvents;
|
||||
244
src/hooks/useSearchEvents.js
Normal file
244
src/hooks/useSearchEvents.js
Normal file
@@ -0,0 +1,244 @@
|
||||
// src/hooks/useSearchEvents.js
|
||||
// 全局搜索功能事件追踪 Hook
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import { usePostHogTrack } from './usePostHogRedux';
|
||||
import { RETENTION_EVENTS } from '../lib/constants';
|
||||
import { logger } from '../utils/logger';
|
||||
|
||||
/**
|
||||
* 全局搜索事件追踪 Hook
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {string} options.context - 搜索上下文 ('global' | 'stock' | 'news' | 'concept' | 'simulation')
|
||||
* @returns {Object} 事件追踪处理函数集合
|
||||
*/
|
||||
export const useSearchEvents = ({ context = 'global' } = {}) => {
|
||||
const { track } = usePostHogTrack();
|
||||
|
||||
/**
|
||||
* 追踪搜索开始(聚焦搜索框)
|
||||
* @param {string} placeholder - 搜索框提示文本
|
||||
*/
|
||||
const trackSearchInitiated = useCallback((placeholder = '') => {
|
||||
track(RETENTION_EVENTS.SEARCH_INITIATED, {
|
||||
context,
|
||||
placeholder,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSearchEvents', '🔍 Search Initiated', {
|
||||
context,
|
||||
placeholder,
|
||||
});
|
||||
}, [track, context]);
|
||||
|
||||
/**
|
||||
* 追踪搜索查询提交
|
||||
* @param {string} query - 搜索查询词
|
||||
* @param {number} resultCount - 搜索结果数量
|
||||
* @param {Object} filters - 应用的筛选条件
|
||||
*/
|
||||
const trackSearchQuerySubmitted = useCallback((query, resultCount = 0, filters = {}) => {
|
||||
if (!query) {
|
||||
logger.warn('useSearchEvents', 'trackSearchQuerySubmitted: query is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(RETENTION_EVENTS.SEARCH_QUERY_SUBMITTED, {
|
||||
query,
|
||||
query_length: query.length,
|
||||
result_count: resultCount,
|
||||
has_results: resultCount > 0,
|
||||
context,
|
||||
filters: filters,
|
||||
filter_count: Object.keys(filters).length,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
// 如果没有搜索结果,额外追踪
|
||||
if (resultCount === 0) {
|
||||
track(RETENTION_EVENTS.SEARCH_NO_RESULTS, {
|
||||
query,
|
||||
context,
|
||||
filters,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSearchEvents', '❌ Search No Results', {
|
||||
query,
|
||||
context,
|
||||
});
|
||||
} else {
|
||||
logger.debug('useSearchEvents', '✅ Search Query Submitted', {
|
||||
query,
|
||||
resultCount,
|
||||
context,
|
||||
});
|
||||
}
|
||||
}, [track, context]);
|
||||
|
||||
/**
|
||||
* 追踪搜索结果点击
|
||||
* @param {Object} result - 被点击的搜索结果
|
||||
* @param {string} result.type - 结果类型 ('stock' | 'news' | 'concept' | 'event')
|
||||
* @param {string} result.id - 结果ID
|
||||
* @param {string} result.title - 结果标题
|
||||
* @param {number} position - 在搜索结果中的位置
|
||||
* @param {string} query - 搜索查询词
|
||||
*/
|
||||
const trackSearchResultClicked = useCallback((result, position = 0, query = '') => {
|
||||
if (!result || !result.type) {
|
||||
logger.warn('useSearchEvents', 'trackSearchResultClicked: result object with type is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(RETENTION_EVENTS.SEARCH_RESULT_CLICKED, {
|
||||
result_type: result.type,
|
||||
result_id: result.id || result.code || '',
|
||||
result_title: result.title || result.name || '',
|
||||
position,
|
||||
query,
|
||||
context,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSearchEvents', '🎯 Search Result Clicked', {
|
||||
type: result.type,
|
||||
id: result.id || result.code,
|
||||
position,
|
||||
context,
|
||||
});
|
||||
}, [track, context]);
|
||||
|
||||
/**
|
||||
* 追踪搜索筛选应用
|
||||
* @param {Object} filters - 应用的筛选条件
|
||||
* @param {string} filterType - 筛选类型 ('sort' | 'category' | 'date_range' | 'price_range')
|
||||
* @param {any} filterValue - 筛选值
|
||||
*/
|
||||
const trackSearchFilterApplied = useCallback((filterType, filterValue, filters = {}) => {
|
||||
if (!filterType) {
|
||||
logger.warn('useSearchEvents', 'trackSearchFilterApplied: filterType is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
|
||||
filter_type: filterType,
|
||||
filter_value: String(filterValue),
|
||||
all_filters: filters,
|
||||
context,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSearchEvents', '🔍 Search Filter Applied', {
|
||||
filterType,
|
||||
filterValue,
|
||||
context,
|
||||
});
|
||||
}, [track, context]);
|
||||
|
||||
/**
|
||||
* 追踪搜索建议点击(自动完成)
|
||||
* @param {string} suggestion - 被点击的搜索建议
|
||||
* @param {number} position - 在建议列表中的位置
|
||||
* @param {string} source - 建议来源 ('history' | 'popular' | 'related')
|
||||
*/
|
||||
const trackSearchSuggestionClicked = useCallback((suggestion, position = 0, source = 'popular') => {
|
||||
if (!suggestion) {
|
||||
logger.warn('useSearchEvents', 'trackSearchSuggestionClicked: suggestion is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Search Suggestion Clicked', {
|
||||
suggestion,
|
||||
position,
|
||||
source,
|
||||
context,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSearchEvents', '💡 Search Suggestion Clicked', {
|
||||
suggestion,
|
||||
position,
|
||||
source,
|
||||
context,
|
||||
});
|
||||
}, [track, context]);
|
||||
|
||||
/**
|
||||
* 追踪搜索历史查看
|
||||
* @param {number} historyCount - 历史记录数量
|
||||
*/
|
||||
const trackSearchHistoryViewed = useCallback((historyCount = 0) => {
|
||||
track('Search History Viewed', {
|
||||
history_count: historyCount,
|
||||
has_history: historyCount > 0,
|
||||
context,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSearchEvents', '📜 Search History Viewed', {
|
||||
historyCount,
|
||||
context,
|
||||
});
|
||||
}, [track, context]);
|
||||
|
||||
/**
|
||||
* 追踪搜索历史清除
|
||||
*/
|
||||
const trackSearchHistoryCleared = useCallback(() => {
|
||||
track('Search History Cleared', {
|
||||
context,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSearchEvents', '🗑️ Search History Cleared', {
|
||||
context,
|
||||
});
|
||||
}, [track, context]);
|
||||
|
||||
/**
|
||||
* 追踪热门搜索词点击
|
||||
* @param {string} keyword - 被点击的热门关键词
|
||||
* @param {number} position - 在列表中的位置
|
||||
* @param {number} heatScore - 热度分数
|
||||
*/
|
||||
const trackPopularKeywordClicked = useCallback((keyword, position = 0, heatScore = 0) => {
|
||||
if (!keyword) {
|
||||
logger.warn('useSearchEvents', 'trackPopularKeywordClicked: keyword is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Popular Keyword Clicked', {
|
||||
keyword,
|
||||
position,
|
||||
heat_score: heatScore,
|
||||
context,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSearchEvents', '🔥 Popular Keyword Clicked', {
|
||||
keyword,
|
||||
position,
|
||||
context,
|
||||
});
|
||||
}, [track, context]);
|
||||
|
||||
return {
|
||||
// 搜索流程事件
|
||||
trackSearchInitiated,
|
||||
trackSearchQuerySubmitted,
|
||||
trackSearchResultClicked,
|
||||
|
||||
// 筛选和建议
|
||||
trackSearchFilterApplied,
|
||||
trackSearchSuggestionClicked,
|
||||
|
||||
// 历史和热门
|
||||
trackSearchHistoryViewed,
|
||||
trackSearchHistoryCleared,
|
||||
trackPopularKeywordClicked,
|
||||
};
|
||||
};
|
||||
|
||||
export default useSearchEvents;
|
||||
@@ -1,5 +1,5 @@
|
||||
// src/hooks/useSubscription.js
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { logger } from '../utils/logger';
|
||||
|
||||
@@ -104,10 +104,32 @@ export const useSubscription = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// ⚡ 提取 userId 为独立变量,避免 user 对象引用变化导致无限循环
|
||||
const userId = user?.id;
|
||||
const prevUserIdRef = useRef(userId);
|
||||
const prevIsAuthenticatedRef = useRef(isAuthenticated);
|
||||
|
||||
useEffect(() => {
|
||||
fetchSubscriptionInfo();
|
||||
// ⚡ 只在 userId 或 isAuthenticated 真正变化时才请求
|
||||
const userIdChanged = prevUserIdRef.current !== userId;
|
||||
const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
|
||||
|
||||
if (userIdChanged || authChanged) {
|
||||
logger.debug('useSubscription', 'fetchSubscriptionInfo 触发', {
|
||||
userIdChanged,
|
||||
authChanged,
|
||||
prevUserId: prevUserIdRef.current,
|
||||
currentUserId: userId,
|
||||
prevAuth: prevIsAuthenticatedRef.current,
|
||||
currentAuth: isAuthenticated
|
||||
});
|
||||
|
||||
prevUserIdRef.current = userId;
|
||||
prevIsAuthenticatedRef.current = isAuthenticated;
|
||||
fetchSubscriptionInfo();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isAuthenticated, user?.id]); // 只依赖 user.id,避免 user 对象变化导致无限循环
|
||||
}, [isAuthenticated, userId]); // 使用 userId 原始值,而不是 user?.id 表达式
|
||||
|
||||
// 获取订阅级别数值
|
||||
const getSubscriptionLevel = (type = null) => {
|
||||
|
||||
394
src/hooks/useSubscriptionEvents.js
Normal file
394
src/hooks/useSubscriptionEvents.js
Normal file
@@ -0,0 +1,394 @@
|
||||
// src/hooks/useSubscriptionEvents.js
|
||||
// 订阅和支付事件追踪 Hook
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import { usePostHogTrack } from './usePostHogRedux';
|
||||
import { RETENTION_EVENTS, REVENUE_EVENTS } from '../lib/constants';
|
||||
import { logger } from '../utils/logger';
|
||||
|
||||
/**
|
||||
* 订阅和支付事件追踪 Hook
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {Object} options.currentSubscription - 当前订阅信息
|
||||
* @returns {Object} 事件追踪处理函数集合
|
||||
*/
|
||||
export const useSubscriptionEvents = ({ currentSubscription = null } = {}) => {
|
||||
const { track } = usePostHogTrack();
|
||||
|
||||
/**
|
||||
* 追踪付费墙展示
|
||||
* @param {string} feature - 被限制的功能名称
|
||||
* @param {string} requiredPlan - 需要的订阅计划
|
||||
* @param {string} triggerLocation - 触发位置
|
||||
*/
|
||||
const trackPaywallShown = useCallback((feature, requiredPlan = 'pro', triggerLocation = '') => {
|
||||
if (!feature) {
|
||||
logger.warn('useSubscriptionEvents', 'trackPaywallShown: feature is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(REVENUE_EVENTS.PAYWALL_SHOWN, {
|
||||
feature,
|
||||
required_plan: requiredPlan,
|
||||
current_plan: currentSubscription?.plan || 'free',
|
||||
trigger_location: triggerLocation,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '🚧 Paywall Shown', {
|
||||
feature,
|
||||
requiredPlan,
|
||||
triggerLocation,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
/**
|
||||
* 追踪付费墙关闭
|
||||
* @param {string} feature - 功能名称
|
||||
* @param {string} closeMethod - 关闭方式 ('dismiss' | 'upgrade_clicked' | 'back_button')
|
||||
*/
|
||||
const trackPaywallDismissed = useCallback((feature, closeMethod = 'dismiss') => {
|
||||
if (!feature) {
|
||||
logger.warn('useSubscriptionEvents', 'trackPaywallDismissed: feature is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(REVENUE_EVENTS.PAYWALL_DISMISSED, {
|
||||
feature,
|
||||
close_method: closeMethod,
|
||||
current_plan: currentSubscription?.plan || 'free',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '❌ Paywall Dismissed', {
|
||||
feature,
|
||||
closeMethod,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
/**
|
||||
* 追踪升级按钮点击
|
||||
* @param {string} targetPlan - 目标订阅计划
|
||||
* @param {string} source - 来源位置
|
||||
* @param {string} feature - 关联的功能(如果从付费墙点击)
|
||||
*/
|
||||
const trackUpgradePlanClicked = useCallback((targetPlan = 'pro', source = '', feature = '') => {
|
||||
track(REVENUE_EVENTS.PAYWALL_UPGRADE_CLICKED, {
|
||||
current_plan: currentSubscription?.plan || 'free',
|
||||
target_plan: targetPlan,
|
||||
source,
|
||||
feature: feature || null,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '⬆️ Upgrade Plan Clicked', {
|
||||
currentPlan: currentSubscription?.plan,
|
||||
targetPlan,
|
||||
source,
|
||||
feature,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
/**
|
||||
* 追踪订阅页面查看
|
||||
* @param {string} source - 来源
|
||||
*/
|
||||
const trackSubscriptionPageViewed = useCallback((source = '') => {
|
||||
track(RETENTION_EVENTS.SUBSCRIPTION_PAGE_VIEWED, {
|
||||
current_plan: currentSubscription?.plan || 'free',
|
||||
subscription_status: currentSubscription?.status || 'unknown',
|
||||
is_paid_user: currentSubscription?.plan && currentSubscription.plan !== 'free',
|
||||
source,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '💳 Subscription Page Viewed', {
|
||||
currentPlan: currentSubscription?.plan,
|
||||
source,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
/**
|
||||
* 追踪定价计划查看
|
||||
* @param {string} planName - 计划名称 ('free' | 'pro' | 'enterprise')
|
||||
* @param {number} price - 价格
|
||||
*/
|
||||
const trackPricingPlanViewed = useCallback((planName, price = 0) => {
|
||||
if (!planName) {
|
||||
logger.warn('useSubscriptionEvents', 'trackPricingPlanViewed: planName is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Pricing Plan Viewed', {
|
||||
plan_name: planName,
|
||||
price,
|
||||
current_plan: currentSubscription?.plan || 'free',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '👀 Pricing Plan Viewed', {
|
||||
planName,
|
||||
price,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
/**
|
||||
* 追踪定价计划选择
|
||||
* @param {string} planName - 选择的计划名称
|
||||
* @param {string} billingCycle - 计费周期 ('monthly' | 'yearly')
|
||||
* @param {number} price - 价格
|
||||
*/
|
||||
const trackPricingPlanSelected = useCallback((planName, billingCycle = 'monthly', price = 0) => {
|
||||
if (!planName) {
|
||||
logger.warn('useSubscriptionEvents', 'trackPricingPlanSelected: planName is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Pricing Plan Selected', {
|
||||
plan_name: planName,
|
||||
billing_cycle: billingCycle,
|
||||
price,
|
||||
current_plan: currentSubscription?.plan || 'free',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '✅ Pricing Plan Selected', {
|
||||
planName,
|
||||
billingCycle,
|
||||
price,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
/**
|
||||
* 追踪支付页面查看
|
||||
* @param {string} planName - 购买的计划
|
||||
* @param {number} amount - 支付金额
|
||||
*/
|
||||
const trackPaymentPageViewed = useCallback((planName, amount = 0) => {
|
||||
track(REVENUE_EVENTS.PAYMENT_PAGE_VIEWED, {
|
||||
plan_name: planName,
|
||||
amount,
|
||||
current_plan: currentSubscription?.plan || 'free',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '💰 Payment Page Viewed', {
|
||||
planName,
|
||||
amount,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
/**
|
||||
* 追踪支付方式选择
|
||||
* @param {string} paymentMethod - 支付方式 ('wechat_pay' | 'alipay' | 'credit_card')
|
||||
* @param {number} amount - 支付金额
|
||||
*/
|
||||
const trackPaymentMethodSelected = useCallback((paymentMethod, amount = 0) => {
|
||||
if (!paymentMethod) {
|
||||
logger.warn('useSubscriptionEvents', 'trackPaymentMethodSelected: paymentMethod is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track(REVENUE_EVENTS.PAYMENT_METHOD_SELECTED, {
|
||||
payment_method: paymentMethod,
|
||||
amount,
|
||||
current_plan: currentSubscription?.plan || 'free',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '💳 Payment Method Selected', {
|
||||
paymentMethod,
|
||||
amount,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
/**
|
||||
* 追踪支付发起
|
||||
* @param {Object} paymentInfo - 支付信息
|
||||
* @param {string} paymentInfo.planName - 计划名称
|
||||
* @param {string} paymentInfo.paymentMethod - 支付方式
|
||||
* @param {number} paymentInfo.amount - 金额
|
||||
* @param {string} paymentInfo.billingCycle - 计费周期
|
||||
* @param {string} paymentInfo.orderId - 订单ID
|
||||
*/
|
||||
const trackPaymentInitiated = useCallback((paymentInfo = {}) => {
|
||||
track(REVENUE_EVENTS.PAYMENT_INITIATED, {
|
||||
plan_name: paymentInfo.planName,
|
||||
payment_method: paymentInfo.paymentMethod,
|
||||
amount: paymentInfo.amount,
|
||||
billing_cycle: paymentInfo.billingCycle,
|
||||
order_id: paymentInfo.orderId,
|
||||
current_plan: currentSubscription?.plan || 'free',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '🚀 Payment Initiated', {
|
||||
planName: paymentInfo.planName,
|
||||
amount: paymentInfo.amount,
|
||||
paymentMethod: paymentInfo.paymentMethod,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
/**
|
||||
* 追踪支付成功
|
||||
* @param {Object} paymentInfo - 支付信息
|
||||
*/
|
||||
const trackPaymentSuccessful = useCallback((paymentInfo = {}) => {
|
||||
track(REVENUE_EVENTS.PAYMENT_SUCCESSFUL, {
|
||||
plan_name: paymentInfo.planName,
|
||||
payment_method: paymentInfo.paymentMethod,
|
||||
amount: paymentInfo.amount,
|
||||
billing_cycle: paymentInfo.billingCycle,
|
||||
order_id: paymentInfo.orderId,
|
||||
transaction_id: paymentInfo.transactionId,
|
||||
previous_plan: currentSubscription?.plan || 'free',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '✅ Payment Successful', {
|
||||
planName: paymentInfo.planName,
|
||||
amount: paymentInfo.amount,
|
||||
orderId: paymentInfo.orderId,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
/**
|
||||
* 追踪支付失败
|
||||
* @param {Object} paymentInfo - 支付信息
|
||||
* @param {string} errorReason - 失败原因
|
||||
*/
|
||||
const trackPaymentFailed = useCallback((paymentInfo = {}, errorReason = '') => {
|
||||
track(REVENUE_EVENTS.PAYMENT_FAILED, {
|
||||
plan_name: paymentInfo.planName,
|
||||
payment_method: paymentInfo.paymentMethod,
|
||||
amount: paymentInfo.amount,
|
||||
error_reason: errorReason,
|
||||
order_id: paymentInfo.orderId,
|
||||
current_plan: currentSubscription?.plan || 'free',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '❌ Payment Failed', {
|
||||
planName: paymentInfo.planName,
|
||||
errorReason,
|
||||
orderId: paymentInfo.orderId,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
/**
|
||||
* 追踪订阅创建成功
|
||||
* @param {Object} subscription - 订阅信息
|
||||
*/
|
||||
const trackSubscriptionCreated = useCallback((subscription = {}) => {
|
||||
track(REVENUE_EVENTS.SUBSCRIPTION_CREATED, {
|
||||
plan_name: subscription.plan,
|
||||
billing_cycle: subscription.billingCycle,
|
||||
amount: subscription.amount,
|
||||
start_date: subscription.startDate,
|
||||
end_date: subscription.endDate,
|
||||
previous_plan: currentSubscription?.plan || 'free',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '🎉 Subscription Created', {
|
||||
plan: subscription.plan,
|
||||
billingCycle: subscription.billingCycle,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
/**
|
||||
* 追踪订阅续费
|
||||
* @param {Object} subscription - 订阅信息
|
||||
*/
|
||||
const trackSubscriptionRenewed = useCallback((subscription = {}) => {
|
||||
track(REVENUE_EVENTS.SUBSCRIPTION_RENEWED, {
|
||||
plan_name: subscription.plan,
|
||||
amount: subscription.amount,
|
||||
previous_end_date: subscription.previousEndDate,
|
||||
new_end_date: subscription.newEndDate,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '🔄 Subscription Renewed', {
|
||||
plan: subscription.plan,
|
||||
amount: subscription.amount,
|
||||
});
|
||||
}, [track]);
|
||||
|
||||
/**
|
||||
* 追踪订阅取消
|
||||
* @param {string} reason - 取消原因
|
||||
* @param {boolean} cancelImmediately - 是否立即取消
|
||||
*/
|
||||
const trackSubscriptionCancelled = useCallback((reason = '', cancelImmediately = false) => {
|
||||
track(REVENUE_EVENTS.SUBSCRIPTION_CANCELLED, {
|
||||
plan_name: currentSubscription?.plan,
|
||||
reason,
|
||||
has_reason: Boolean(reason),
|
||||
cancel_immediately: cancelImmediately,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', '🚫 Subscription Cancelled', {
|
||||
plan: currentSubscription?.plan,
|
||||
reason,
|
||||
cancelImmediately,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
/**
|
||||
* 追踪优惠券应用
|
||||
* @param {string} couponCode - 优惠券代码
|
||||
* @param {number} discountAmount - 折扣金额
|
||||
* @param {boolean} success - 是否成功
|
||||
*/
|
||||
const trackCouponApplied = useCallback((couponCode, discountAmount = 0, success = true) => {
|
||||
if (!couponCode) {
|
||||
logger.warn('useSubscriptionEvents', 'trackCouponApplied: couponCode is required');
|
||||
return;
|
||||
}
|
||||
|
||||
track('Coupon Applied', {
|
||||
coupon_code: couponCode,
|
||||
discount_amount: discountAmount,
|
||||
success,
|
||||
current_plan: currentSubscription?.plan || 'free',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
logger.debug('useSubscriptionEvents', success ? '🎟️ Coupon Applied' : '❌ Coupon Failed', {
|
||||
couponCode,
|
||||
discountAmount,
|
||||
success,
|
||||
});
|
||||
}, [track, currentSubscription]);
|
||||
|
||||
return {
|
||||
// 付费墙事件
|
||||
trackPaywallShown,
|
||||
trackPaywallDismissed,
|
||||
trackUpgradePlanClicked,
|
||||
|
||||
// 订阅页面事件
|
||||
trackSubscriptionPageViewed,
|
||||
trackPricingPlanViewed,
|
||||
trackPricingPlanSelected,
|
||||
|
||||
// 支付流程事件
|
||||
trackPaymentPageViewed,
|
||||
trackPaymentMethodSelected,
|
||||
trackPaymentInitiated,
|
||||
trackPaymentSuccessful,
|
||||
trackPaymentFailed,
|
||||
|
||||
// 订阅管理事件
|
||||
trackSubscriptionCreated,
|
||||
trackSubscriptionRenewed,
|
||||
trackSubscriptionCancelled,
|
||||
|
||||
// 优惠券事件
|
||||
trackCouponApplied,
|
||||
};
|
||||
};
|
||||
|
||||
export default useSubscriptionEvents;
|
||||
34
src/layouts/AppFooter.js
Normal file
34
src/layouts/AppFooter.js
Normal file
@@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
import { Box, Container, VStack, HStack, Text, Link, useColorModeValue } from '@chakra-ui/react';
|
||||
import RiskDisclaimer from '../components/RiskDisclaimer';
|
||||
|
||||
/**
|
||||
* 应用通用页脚组件
|
||||
* 包含版权信息、备案号等
|
||||
*/
|
||||
const AppFooter = () => {
|
||||
return (
|
||||
<Box bg={useColorModeValue('gray.100', 'gray.800')} py={6} mt={8}>
|
||||
<Container maxW="container.xl">
|
||||
<VStack spacing={2}>
|
||||
<RiskDisclaimer />
|
||||
<Text color="gray.500" fontSize="sm">
|
||||
© 2024 价值前沿. 保留所有权利.
|
||||
</Text>
|
||||
<HStack spacing={4} fontSize="xs" color="gray.400">
|
||||
<Link
|
||||
href="https://beian.mps.gov.cn/#/query/webSearch?code=11010802046286"
|
||||
isExternal
|
||||
_hover={{ color: 'gray.600' }}
|
||||
>
|
||||
京公网安备11010802046286号
|
||||
</Link>
|
||||
<Text>京ICP备2025107343号-1</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppFooter;
|
||||
@@ -32,7 +32,6 @@ export default function Home() {
|
||||
<Routes>
|
||||
{/* 首页默认路由 */}
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/dashboard" element={<HomePage />} />
|
||||
<Route
|
||||
path="/center"
|
||||
element={
|
||||
|
||||
@@ -5,6 +5,7 @@ import { Outlet } from "react-router-dom";
|
||||
import { Box } from '@chakra-ui/react';
|
||||
import HomeNavbar from "../components/Navbars/HomeNavbar";
|
||||
import PageLoader from "../components/Loading/PageLoader";
|
||||
import AppFooter from "./AppFooter";
|
||||
|
||||
/**
|
||||
* MainLayout - 带导航栏的主布局
|
||||
@@ -15,17 +16,20 @@ import PageLoader from "../components/Loading/PageLoader";
|
||||
*/
|
||||
export default function MainLayout() {
|
||||
return (
|
||||
<Box minH="100vh">
|
||||
<Box minH="100vh" display="flex" flexDirection="column">
|
||||
{/* 导航栏 - 在所有页面间共享,不会重新渲染 */}
|
||||
<HomeNavbar />
|
||||
|
||||
{/* 页面内容区域 - 通过 Outlet 渲染当前路由对应的组件 */}
|
||||
{/* Suspense 只包裹内容区域,导航栏保持可见 */}
|
||||
<Box>
|
||||
<Box flex="1">
|
||||
<Suspense fallback={<PageLoader message="页面加载中..." />}>
|
||||
<Outlet />
|
||||
</Suspense>
|
||||
</Box>
|
||||
|
||||
{/* 页脚 - 在所有页面间共享 */}
|
||||
<AppFooter />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
381
src/lib/constants.js
Normal file
381
src/lib/constants.js
Normal file
@@ -0,0 +1,381 @@
|
||||
// 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);
|
||||
};
|
||||
271
src/lib/posthog.js
Normal file
271
src/lib/posthog.js
Normal file
@@ -0,0 +1,271 @@
|
||||
// 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;
|
||||
@@ -19,7 +19,10 @@ export async function startMockServiceWorker() {
|
||||
|
||||
try {
|
||||
await worker.start({
|
||||
// 不显示未拦截的请求警告(可选)
|
||||
// 🎯 智能穿透模式(关键配置)
|
||||
// 'bypass': 未定义 Mock 的请求自动转发到真实后端
|
||||
// 'warn': 未定义的请求会显示警告(调试用)
|
||||
// 'error': 未定义的请求会抛出错误(严格模式)
|
||||
onUnhandledRequest: 'bypass',
|
||||
|
||||
// 自定义 Service Worker URL(如果需要)
|
||||
@@ -27,7 +30,7 @@ export async function startMockServiceWorker() {
|
||||
url: '/mockServiceWorker.js',
|
||||
},
|
||||
|
||||
// 静默模式(不在控制台打印启动消息)
|
||||
// 是否在控制台显示启动日志和拦截日志 静默模式(不在控制台打印启动消息)
|
||||
quiet: false,
|
||||
});
|
||||
|
||||
@@ -36,11 +39,11 @@ export async function startMockServiceWorker() {
|
||||
'color: #4CAF50; font-weight: bold; font-size: 14px;'
|
||||
);
|
||||
console.log(
|
||||
'%c提示: 所有 API 请求将使用本地 Mock 数据',
|
||||
'%c智能穿透模式:已定义 Mock → 返回假数据 | 未定义 Mock → 转发到 ' + (process.env.REACT_APP_API_URL || '真实后端'),
|
||||
'color: #FF9800; font-size: 12px;'
|
||||
);
|
||||
console.log(
|
||||
'%c要禁用 Mock,请设置 REACT_APP_ENABLE_MOCK=false',
|
||||
'%c查看 src/mocks/handlers/ 目录管理 Mock 接口',
|
||||
'color: #2196F3; font-size: 12px;'
|
||||
);
|
||||
} catch (error) {
|
||||
|
||||
535
src/mocks/data/company.js
Normal file
535
src/mocks/data/company.js
Normal file
@@ -0,0 +1,535 @@
|
||||
// src/mocks/data/company.js
|
||||
// 公司相关的 Mock 数据
|
||||
|
||||
// 平安银行 (000001) 的完整数据
|
||||
export const PINGAN_BANK_DATA = {
|
||||
stockCode: '000001',
|
||||
stockName: '平安银行',
|
||||
|
||||
// 基本信息
|
||||
basicInfo: {
|
||||
code: '000001',
|
||||
name: '平安银行',
|
||||
english_name: 'Ping An Bank Co., Ltd.',
|
||||
registered_capital: 1940642.3, // 万元
|
||||
registered_capital_unit: '万元',
|
||||
legal_representative: '谢永林',
|
||||
general_manager: '谢永林',
|
||||
secretary: '周强',
|
||||
registered_address: '深圳市深南东路5047号',
|
||||
office_address: '深圳市深南东路5047号',
|
||||
zipcode: '518001',
|
||||
phone: '0755-82080387',
|
||||
fax: '0755-82080386',
|
||||
email: 'ir@bank.pingan.com',
|
||||
website: 'http://bank.pingan.com',
|
||||
business_scope: '吸收公众存款;发放短期、中期和长期贷款;办理国内外结算;办理票据承兑与贴现;发行金融债券;代理发行、代理兑付、承销政府债券;买卖政府债券、金融债券;从事同业拆借;买卖、代理买卖外汇;从事银行卡业务;提供信用证服务及担保;代理收付款项及代理保险业务;提供保管箱服务;经有关监管机构批准的其他业务。',
|
||||
employees: 36542,
|
||||
introduction: '平安银行股份有限公司是中国平安保险(集团)股份有限公司控股的一家跨区域经营的股份制商业银行,为中国大陆12家全国性股份制商业银行之一。注册资本为人民币51.2335亿元,总资产近1.37万亿元,总部位于深圳。平安银行拥有全国性银行经营资质,主要经营商业银行业务。',
|
||||
list_date: '1991-04-03',
|
||||
establish_date: '1987-12-22',
|
||||
province: '广东省',
|
||||
city: '深圳市',
|
||||
industry: '银行',
|
||||
main_business: '商业银行业务',
|
||||
},
|
||||
|
||||
// 实际控制人信息
|
||||
actualControl: {
|
||||
controller_name: '中国平安保险(集团)股份有限公司',
|
||||
controller_type: '企业',
|
||||
shareholding_ratio: 52.38,
|
||||
control_chain: '中国平安保险(集团)股份有限公司 -> 平安银行股份有限公司',
|
||||
is_listed: true,
|
||||
change_date: '2023-12-31',
|
||||
remark: '中国平安通过直接和间接方式控股平安银行',
|
||||
},
|
||||
|
||||
// 股权集中度
|
||||
concentration: {
|
||||
top1_ratio: 52.38,
|
||||
top3_ratio: 58.42,
|
||||
top5_ratio: 60.15,
|
||||
top10_ratio: 63.28,
|
||||
update_date: '2024-09-30',
|
||||
concentration_level: '高度集中',
|
||||
herfindahl_index: 0.2845,
|
||||
},
|
||||
|
||||
// 高管信息
|
||||
management: [
|
||||
{
|
||||
name: '谢永林',
|
||||
position: '董事长、执行董事、行长',
|
||||
gender: '男',
|
||||
age: 56,
|
||||
education: '硕士',
|
||||
appointment_date: '2019-01-01',
|
||||
annual_compensation: 723.8,
|
||||
shareholding: 0,
|
||||
background: '中国平安保险(集团)股份有限公司副总经理兼首席保险业务执行官'
|
||||
},
|
||||
{
|
||||
name: '周强',
|
||||
position: '执行董事、副行长、董事会秘书',
|
||||
gender: '男',
|
||||
age: 54,
|
||||
education: '硕士',
|
||||
appointment_date: '2016-06-01',
|
||||
annual_compensation: 542.3,
|
||||
shareholding: 0.002,
|
||||
background: '历任平安银行深圳分行行长'
|
||||
},
|
||||
{
|
||||
name: '郭世邦',
|
||||
position: '执行董事、副行长、首席财务官',
|
||||
gender: '男',
|
||||
age: 52,
|
||||
education: '博士',
|
||||
appointment_date: '2018-03-01',
|
||||
annual_compensation: 498.6,
|
||||
shareholding: 0.001,
|
||||
background: '历任中国平安集团财务负责人'
|
||||
},
|
||||
{
|
||||
name: '蔡新发',
|
||||
position: '副行长、首席风险官',
|
||||
gender: '男',
|
||||
age: 51,
|
||||
education: '硕士',
|
||||
appointment_date: '2017-05-01',
|
||||
annual_compensation: 467.2,
|
||||
shareholding: 0.0008,
|
||||
background: '历任平安银行风险管理部总经理'
|
||||
},
|
||||
{
|
||||
name: '项有志',
|
||||
position: '副行长、首席信息官',
|
||||
gender: '男',
|
||||
age: 49,
|
||||
education: '硕士',
|
||||
appointment_date: '2019-09-01',
|
||||
annual_compensation: 425.1,
|
||||
shareholding: 0,
|
||||
background: '历任中国平安科技公司总经理'
|
||||
}
|
||||
],
|
||||
|
||||
// 十大流通股东
|
||||
topCirculationShareholders: [
|
||||
{ shareholder_name: '中国平安保险(集团)股份有限公司', shares: 10168542300, ratio: 52.38, change: 0, shareholder_type: '企业' },
|
||||
{ shareholder_name: '香港中央结算有限公司', shares: 542138600, ratio: 2.79, change: 12450000, shareholder_type: '境外法人' },
|
||||
{ shareholder_name: '深圳市投资控股有限公司', shares: 382456100, ratio: 1.97, change: 0, shareholder_type: '国有企业' },
|
||||
{ shareholder_name: '中国证券金融股份有限公司', shares: 298654200, ratio: 1.54, change: -5000000, shareholder_type: '证金公司' },
|
||||
{ shareholder_name: '中央汇金资产管理有限责任公司', shares: 267842100, ratio: 1.38, change: 0, shareholder_type: '中央汇金' },
|
||||
{ shareholder_name: '全国社保基金一零三组合', shares: 156234500, ratio: 0.80, change: 23400000, shareholder_type: '社保基金' },
|
||||
{ shareholder_name: '全国社保基金一零一组合', shares: 142356700, ratio: 0.73, change: 15600000, shareholder_type: '社保基金' },
|
||||
{ shareholder_name: '中国人寿保险股份有限公司', shares: 128945600, ratio: 0.66, change: 0, shareholder_type: '保险公司' },
|
||||
{ shareholder_name: 'GIC PRIVATE LIMITED', shares: 98765400, ratio: 0.51, change: -8900000, shareholder_type: '境外法人' },
|
||||
{ shareholder_name: '挪威中央银行', shares: 87654300, ratio: 0.45, change: 5600000, shareholder_type: '境外法人' }
|
||||
],
|
||||
|
||||
// 十大股东(与流通股东相同,因为平安银行全流通)
|
||||
topShareholders: [
|
||||
{ shareholder_name: '中国平安保险(集团)股份有限公司', shares: 10168542300, ratio: 52.38, change: 0, shareholder_type: '企业', is_restricted: false },
|
||||
{ shareholder_name: '香港中央结算有限公司', shares: 542138600, ratio: 2.79, change: 12450000, shareholder_type: '境外法人', is_restricted: false },
|
||||
{ shareholder_name: '深圳市投资控股有限公司', shares: 382456100, ratio: 1.97, change: 0, shareholder_type: '国有企业', is_restricted: false },
|
||||
{ shareholder_name: '中国证券金融股份有限公司', shares: 298654200, ratio: 1.54, change: -5000000, shareholder_type: '证金公司', is_restricted: false },
|
||||
{ shareholder_name: '中央汇金资产管理有限责任公司', shares: 267842100, ratio: 1.38, change: 0, shareholder_type: '中央汇金', is_restricted: false },
|
||||
{ shareholder_name: '全国社保基金一零三组合', shares: 156234500, ratio: 0.80, change: 23400000, shareholder_type: '社保基金', is_restricted: false },
|
||||
{ shareholder_name: '全国社保基金一零一组合', shares: 142356700, ratio: 0.73, change: 15600000, shareholder_type: '社保基金', is_restricted: false },
|
||||
{ shareholder_name: '中国人寿保险股份有限公司', shares: 128945600, ratio: 0.66, change: 0, shareholder_type: '保险公司', is_restricted: false },
|
||||
{ shareholder_name: 'GIC PRIVATE LIMITED', shares: 98765400, ratio: 0.51, change: -8900000, shareholder_type: '境外法人', is_restricted: false },
|
||||
{ shareholder_name: '挪威中央银行', shares: 87654300, ratio: 0.45, change: 5600000, shareholder_type: '境外法人', is_restricted: false }
|
||||
],
|
||||
|
||||
// 分支机构
|
||||
branches: [
|
||||
{ name: '北京分行', address: '北京市朝阳区建国路88号SOHO现代城', phone: '010-85806888', type: '一级分行', establish_date: '2007-03-15' },
|
||||
{ name: '上海分行', address: '上海市浦东新区陆家嘴环路1366号', phone: '021-38637777', type: '一级分行', establish_date: '2007-05-20' },
|
||||
{ name: '广州分行', address: '广州市天河区珠江新城珠江东路32号', phone: '020-38390888', type: '一级分行', establish_date: '2007-06-10' },
|
||||
{ name: '深圳分行', address: '深圳市福田区益田路5033号', phone: '0755-82538888', type: '一级分行', establish_date: '1995-01-01' },
|
||||
{ name: '杭州分行', address: '杭州市江干区钱江路1366号', phone: '0571-87028888', type: '一级分行', establish_date: '2008-09-12' },
|
||||
{ name: '成都分行', address: '成都市武侯区人民南路四段13号', phone: '028-85266888', type: '一级分行', establish_date: '2009-04-25' },
|
||||
{ name: '南京分行', address: '南京市建邺区江东中路359号', phone: '025-86625888', type: '一级分行', establish_date: '2010-06-30' },
|
||||
{ name: '武汉分行', address: '武汉市江汉区建设大道568号', phone: '027-85712888', type: '一级分行', establish_date: '2011-08-15' },
|
||||
{ name: '西安分行', address: '西安市高新区唐延路35号', phone: '029-88313888', type: '一级分行', establish_date: '2012-10-20' },
|
||||
{ name: '天津分行', address: '天津市和平区南京路189号', phone: '022-23399888', type: '一级分行', establish_date: '2013-03-18' }
|
||||
],
|
||||
|
||||
// 公告列表
|
||||
announcements: [
|
||||
{
|
||||
title: '平安银行股份有限公司2024年第三季度报告',
|
||||
publish_date: '2024-10-28',
|
||||
type: '定期报告',
|
||||
summary: '2024年前三季度实现营业收入1245.6亿元,同比增长8.2%;净利润402.3亿元,同比增长12.5%',
|
||||
url: '/announcement/detail/ann_20241028_001'
|
||||
},
|
||||
{
|
||||
title: '关于召开2024年第一次临时股东大会的通知',
|
||||
publish_date: '2024-10-15',
|
||||
type: '临时公告',
|
||||
summary: '定于2024年11月5日召开2024年第一次临时股东大会,审议关于调整董事会成员等议案',
|
||||
url: '/announcement/detail/ann_20241015_001'
|
||||
},
|
||||
{
|
||||
title: '平安银行股份有限公司关于完成注册资本变更登记的公告',
|
||||
publish_date: '2024-09-20',
|
||||
type: '临时公告',
|
||||
summary: '公司已完成注册资本由人民币194.06亿元变更为194.06亿元的工商变更登记手续',
|
||||
url: '/announcement/detail/ann_20240920_001'
|
||||
},
|
||||
{
|
||||
title: '平安银行股份有限公司2024年半年度报告',
|
||||
publish_date: '2024-08-28',
|
||||
type: '定期报告',
|
||||
summary: '2024年上半年实现营业收入828.5亿元,同比增长7.8%;净利润265.4亿元,同比增长11.2%',
|
||||
url: '/announcement/detail/ann_20240828_001'
|
||||
},
|
||||
{
|
||||
title: '关于2024年上半年利润分配预案的公告',
|
||||
publish_date: '2024-08-20',
|
||||
type: '分配方案',
|
||||
summary: '拟以总股本194.06亿股为基数,向全体股东每10股派发现金红利2.8元(含税)',
|
||||
url: '/announcement/detail/ann_20240820_001'
|
||||
}
|
||||
],
|
||||
|
||||
// 披露时间表
|
||||
disclosureSchedule: [
|
||||
{ report_type: '2024年年度报告', planned_date: '2025-04-30', status: '未披露' },
|
||||
{ report_type: '2024年第四季度报告', planned_date: '2025-01-31', status: '未披露' },
|
||||
{ report_type: '2024年第三季度报告', planned_date: '2024-10-31', status: '已披露' },
|
||||
{ report_type: '2024年半年度报告', planned_date: '2024-08-31', status: '已披露' },
|
||||
{ report_type: '2024年第一季度报告', planned_date: '2024-04-30', status: '已披露' }
|
||||
],
|
||||
|
||||
// 综合分析
|
||||
comprehensiveAnalysis: {
|
||||
overview: {
|
||||
company_name: '平安银行股份有限公司',
|
||||
stock_code: '000001',
|
||||
industry: '银行',
|
||||
established_date: '1987-12-22',
|
||||
listing_date: '1991-04-03',
|
||||
total_assets: 50245.6, // 亿元
|
||||
net_assets: 3256.8,
|
||||
registered_capital: 194.06,
|
||||
employee_count: 36542
|
||||
},
|
||||
financial_highlights: {
|
||||
revenue: 1623.5,
|
||||
revenue_growth: 8.5,
|
||||
net_profit: 528.6,
|
||||
profit_growth: 12.3,
|
||||
roe: 16.23,
|
||||
roa: 1.05,
|
||||
asset_quality_ratio: 1.02,
|
||||
capital_adequacy_ratio: 13.45,
|
||||
core_tier1_ratio: 10.82
|
||||
},
|
||||
business_structure: [
|
||||
{ business: '对公业务', revenue: 685.4, ratio: 42.2, growth: 6.8 },
|
||||
{ business: '零售业务', revenue: 812.3, ratio: 50.1, growth: 11.2 },
|
||||
{ business: '金融市场业务', revenue: 125.8, ratio: 7.7, growth: 3.5 }
|
||||
],
|
||||
competitive_advantages: [
|
||||
'背靠中国平安集团,综合金融优势明显',
|
||||
'零售业务转型成效显著,客户基础雄厚',
|
||||
'金融科技创新能力强,数字化银行建设领先',
|
||||
'风险管理体系完善,资产质量稳定',
|
||||
'管理团队经验丰富,执行力强'
|
||||
],
|
||||
risk_factors: [
|
||||
'宏观经济下行压力影响信贷质量',
|
||||
'利率市场化导致息差收窄',
|
||||
'金融监管趋严,合规成本上升',
|
||||
'同业竞争激烈,市场份额面临挑战',
|
||||
'金融科技发展带来的技术和运营风险'
|
||||
],
|
||||
development_strategy: '坚持"科技引领、零售突破、对公做精"战略,加快数字化转型,提升综合金融服务能力',
|
||||
analyst_rating: {
|
||||
buy: 18,
|
||||
hold: 12,
|
||||
sell: 2,
|
||||
target_price: 15.8,
|
||||
current_price: 13.2
|
||||
}
|
||||
},
|
||||
|
||||
// 价值链分析
|
||||
valueChainAnalysis: {
|
||||
upstream: [
|
||||
{ name: '央行及监管机构', relationship: '政策与监管', importance: '高', description: '接受货币政策调控和监管指导' },
|
||||
{ name: '同业资金市场', relationship: '资金来源', importance: '高', description: '开展同业拆借、债券回购等业务' },
|
||||
{ name: '金融科技公司', relationship: '技术支持', importance: '中', description: '提供金融科技解决方案和技术服务' }
|
||||
],
|
||||
core_business: {
|
||||
deposit_business: { scale: 33256.8, market_share: 2.8, growth_rate: 9.2 },
|
||||
loan_business: { scale: 28945.3, market_share: 2.5, growth_rate: 12.5 },
|
||||
intermediary_business: { scale: 425.6, market_share: 3.2, growth_rate: 15.8 },
|
||||
digital_banking: { user_count: 11256, app_mau: 4235, growth_rate: 28.5 }
|
||||
},
|
||||
downstream: [
|
||||
{ name: '个人客户', scale: '1.12亿户', contribution: '50.1%', description: '零售银行业务主体' },
|
||||
{ name: '企业客户', scale: '85.6万户', contribution: '42.2%', description: '对公业务主体' },
|
||||
{ name: '政府机构', scale: '2.3万户', contribution: '7.7%', description: '公共事业及政府业务' }
|
||||
],
|
||||
ecosystem_partners: [
|
||||
{ name: '中国平安集团', type: '关联方', cooperation: '综合金融服务、客户共享' },
|
||||
{ name: '平安科技', type: '科技支持', cooperation: '金融科技研发、系统建设' },
|
||||
{ name: '平安普惠', type: '业务协同', cooperation: '普惠金融、小微贷款' },
|
||||
{ name: '平安证券', type: '业务协同', cooperation: '投资银行、资产管理' }
|
||||
]
|
||||
},
|
||||
|
||||
// 关键因素时间线
|
||||
keyFactorsTimeline: [
|
||||
{
|
||||
date: '2024-10-28',
|
||||
event: '发布2024年三季报',
|
||||
type: '业绩公告',
|
||||
importance: 'high',
|
||||
impact: '前三季度净利润同比增长12.5%,超市场预期',
|
||||
change: '+5.2%'
|
||||
},
|
||||
{
|
||||
date: '2024-09-15',
|
||||
event: '推出AI智能客服系统',
|
||||
type: '科技创新',
|
||||
importance: 'medium',
|
||||
impact: '提升客户服务效率,降低运营成本',
|
||||
change: '+2.1%'
|
||||
},
|
||||
{
|
||||
date: '2024-08-28',
|
||||
event: '发布2024年中报',
|
||||
type: '业绩公告',
|
||||
importance: 'high',
|
||||
impact: '上半年净利润增长11.2%,资产质量保持稳定',
|
||||
change: '+3.8%'
|
||||
},
|
||||
{
|
||||
date: '2024-07-20',
|
||||
event: '获批设立理财子公司',
|
||||
type: '业务拓展',
|
||||
importance: 'high',
|
||||
impact: '完善财富管理业务布局,拓展收入来源',
|
||||
change: '+4.5%'
|
||||
},
|
||||
{
|
||||
date: '2024-06-10',
|
||||
event: '完成300亿元二级资本债发行',
|
||||
type: '融资事件',
|
||||
importance: 'medium',
|
||||
impact: '补充资本实力,支持业务扩张',
|
||||
change: '+1.8%'
|
||||
},
|
||||
{
|
||||
date: '2024-04-30',
|
||||
event: '发布2024年一季报',
|
||||
type: '业绩公告',
|
||||
importance: 'high',
|
||||
impact: '一季度净利润增长10.8%,开门红表现优异',
|
||||
change: '+4.2%'
|
||||
},
|
||||
{
|
||||
date: '2024-03-15',
|
||||
event: '零售客户突破1.1亿户',
|
||||
type: '业务里程碑',
|
||||
importance: 'medium',
|
||||
impact: '零售转型成效显著,客户基础进一步夯实',
|
||||
change: '+2.5%'
|
||||
},
|
||||
{
|
||||
date: '2024-01-20',
|
||||
event: '获评"2023年度最佳零售银行"',
|
||||
type: '荣誉奖项',
|
||||
importance: 'low',
|
||||
impact: '品牌影响力提升',
|
||||
change: '+0.8%'
|
||||
}
|
||||
],
|
||||
|
||||
// 盈利预测报告
|
||||
forecastReport: {
|
||||
// 营收与利润趋势
|
||||
income_profit_trend: {
|
||||
years: ['2020', '2021', '2022', '2023', '2024E', '2025E', '2026E'],
|
||||
income: [116524, 134632, 148956, 162350, 175280, 189450, 204120], // 营业总收入(百万元)
|
||||
profit: [34562, 39845, 43218, 52860, 58420, 64680, 71250] // 归母净利润(百万元)
|
||||
},
|
||||
// 增长率分析
|
||||
growth_bars: {
|
||||
years: ['2021', '2022', '2023', '2024E', '2025E', '2026E'],
|
||||
revenue_growth_pct: [15.5, 10.6, 8.9, 8.0, 8.1, 7.7] // 营收增长率(%)
|
||||
},
|
||||
// EPS趋势
|
||||
eps_trend: {
|
||||
years: ['2020', '2021', '2022', '2023', '2024E', '2025E', '2026E'],
|
||||
eps: [1.78, 2.05, 2.23, 2.72, 3.01, 3.33, 3.67] // EPS(稀释,元/股)
|
||||
},
|
||||
// PE与PEG分析
|
||||
pe_peg_axes: {
|
||||
years: ['2020', '2021', '2022', '2023', '2024E', '2025E', '2026E'],
|
||||
pe: [7.4, 6.9, 7.2, 4.9, 4.4, 4.0, 3.6], // PE(倍)
|
||||
peg: [0.48, 0.65, 0.81, 0.55, 0.55, 0.49, 0.47] // PEG
|
||||
},
|
||||
// 详细数据表格
|
||||
detail_table: {
|
||||
years: ['2020', '2021', '2022', '2023', '2024E', '2025E', '2026E'],
|
||||
rows: [
|
||||
{ '指标': '营业总收入(百万元)', '2020': 116524, '2021': 134632, '2022': 148956, '2023': 162350, '2024E': 175280, '2025E': 189450, '2026E': 204120 },
|
||||
{ '指标': '营收增长率(%)', '2020': '-', '2021': 15.5, '2022': 10.6, '2023': 8.9, '2024E': 8.0, '2025E': 8.1, '2026E': 7.7 },
|
||||
{ '指标': '归母净利润(百万元)', '2020': 34562, '2021': 39845, '2022': 43218, '2023': 52860, '2024E': 58420, '2025E': 64680, '2026E': 71250 },
|
||||
{ '指标': '净利润增长率(%)', '2020': '-', '2021': 15.3, '2022': 8.5, '2023': 22.3, '2024E': 10.5, '2025E': 10.7, '2026E': 10.2 },
|
||||
{ '指标': 'EPS(稀释,元)', '2020': 1.78, '2021': 2.05, '2022': 2.23, '2023': 2.72, '2024E': 3.01, '2025E': 3.33, '2026E': 3.67 },
|
||||
{ '指标': 'ROE(%)', '2020': 14.2, '2021': 15.8, '2022': 15.5, '2023': 16.2, '2024E': 16.5, '2025E': 16.8, '2026E': 17.0 },
|
||||
{ '指标': '总资产(百万元)', '2020': 4512360, '2021': 4856230, '2022': 4923150, '2023': 5024560, '2024E': 5230480, '2025E': 5445200, '2026E': 5668340 },
|
||||
{ '指标': '净资产(百万元)', '2020': 293540, '2021': 312680, '2022': 318920, '2023': 325680, '2024E': 338560, '2025E': 352480, '2026E': 367820 },
|
||||
{ '指标': '资产负债率(%)', '2020': 93.5, '2021': 93.6, '2022': 93.5, '2023': 93.5, '2024E': 93.5, '2025E': 93.5, '2026E': 93.5 },
|
||||
{ '指标': 'PE(倍)', '2020': 7.4, '2021': 6.9, '2022': 7.2, '2023': 4.9, '2024E': 4.4, '2025E': 4.0, '2026E': 3.6 },
|
||||
{ '指标': 'PB(倍)', '2020': 1.05, '2021': 1.09, '2022': 1.12, '2023': 0.79, '2024E': 0.72, '2025E': 0.67, '2026E': 0.61 }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 生成通用公司数据的工具函数
|
||||
export const generateCompanyData = (stockCode, stockName) => {
|
||||
// 如果是平安银行,直接返回详细数据
|
||||
if (stockCode === '000001') {
|
||||
return PINGAN_BANK_DATA;
|
||||
}
|
||||
|
||||
// 否则生成通用数据
|
||||
return {
|
||||
stockCode,
|
||||
stockName,
|
||||
basicInfo: {
|
||||
code: stockCode,
|
||||
name: stockName,
|
||||
registered_capital: Math.floor(Math.random() * 500000) + 10000,
|
||||
registered_capital_unit: '万元',
|
||||
legal_representative: '张三',
|
||||
general_manager: '李四',
|
||||
secretary: '王五',
|
||||
registered_address: '中国某省某市某区某路123号',
|
||||
office_address: '中国某省某市某区某路123号',
|
||||
phone: '021-12345678',
|
||||
email: 'ir@company.com',
|
||||
website: 'http://www.company.com',
|
||||
employees: Math.floor(Math.random() * 10000) + 1000,
|
||||
list_date: '2010-01-01',
|
||||
industry: '制造业',
|
||||
},
|
||||
actualControl: {
|
||||
controller_name: '某控股集团有限公司',
|
||||
controller_type: '企业',
|
||||
shareholding_ratio: 35.5,
|
||||
control_chain: '某控股集团有限公司 -> ' + stockName,
|
||||
},
|
||||
concentration: {
|
||||
top1_ratio: 35.5,
|
||||
top3_ratio: 52.3,
|
||||
top5_ratio: 61.8,
|
||||
top10_ratio: 72.5,
|
||||
concentration_level: '适度集中',
|
||||
},
|
||||
management: [
|
||||
{ name: '张三', position: '董事长', gender: '男', age: 55, education: '硕士', annual_compensation: 320.5 },
|
||||
{ name: '李四', position: '总经理', gender: '男', age: 50, education: '硕士', annual_compensation: 280.3 },
|
||||
{ name: '王五', position: '董事会秘书', gender: '女', age: 45, education: '本科', annual_compensation: 180.2 },
|
||||
],
|
||||
topCirculationShareholders: Array(10).fill(null).map((_, i) => ({
|
||||
shareholder_name: `股东${i + 1}`,
|
||||
shares: Math.floor(Math.random() * 100000000),
|
||||
ratio: (10 - i) * 0.8,
|
||||
change: Math.floor(Math.random() * 10000000) - 5000000,
|
||||
shareholder_type: '企业'
|
||||
})),
|
||||
topShareholders: Array(10).fill(null).map((_, i) => ({
|
||||
shareholder_name: `股东${i + 1}`,
|
||||
shares: Math.floor(Math.random() * 100000000),
|
||||
ratio: (10 - i) * 0.8,
|
||||
change: Math.floor(Math.random() * 10000000) - 5000000,
|
||||
shareholder_type: '企业',
|
||||
is_restricted: false
|
||||
})),
|
||||
branches: [
|
||||
{ name: '北京分公司', address: '北京市朝阳区某路123号', phone: '010-12345678', type: '分公司' },
|
||||
{ name: '上海分公司', address: '上海市浦东新区某路456号', phone: '021-12345678', type: '分公司' },
|
||||
],
|
||||
announcements: [
|
||||
{ title: stockName + '2024年第三季度报告', publish_date: '2024-10-28', type: '定期报告', summary: '业绩稳步增长' },
|
||||
{ title: stockName + '2024年半年度报告', publish_date: '2024-08-28', type: '定期报告', summary: '经营情况良好' },
|
||||
],
|
||||
disclosureSchedule: [
|
||||
{ report_type: '2024年年度报告', planned_date: '2025-04-30', status: '未披露' },
|
||||
{ report_type: '2024年第三季度报告', planned_date: '2024-10-31', status: '已披露' },
|
||||
],
|
||||
comprehensiveAnalysis: {
|
||||
overview: {
|
||||
company_name: stockName,
|
||||
stock_code: stockCode,
|
||||
industry: '制造业',
|
||||
total_assets: Math.floor(Math.random() * 10000) + 100,
|
||||
},
|
||||
financial_highlights: {
|
||||
revenue: Math.floor(Math.random() * 1000) + 50,
|
||||
revenue_growth: (Math.random() * 20 - 5).toFixed(2),
|
||||
net_profit: Math.floor(Math.random() * 100) + 10,
|
||||
profit_growth: (Math.random() * 20 - 5).toFixed(2),
|
||||
},
|
||||
competitive_advantages: ['技术领先', '品牌优势', '管理团队优秀'],
|
||||
risk_factors: ['市场竞争激烈', '原材料价格波动'],
|
||||
},
|
||||
valueChainAnalysis: {
|
||||
upstream: [
|
||||
{ name: '原材料供应商A', relationship: '供应商', importance: '高' },
|
||||
{ name: '原材料供应商B', relationship: '供应商', importance: '中' },
|
||||
],
|
||||
downstream: [
|
||||
{ name: '经销商网络', scale: '1000家', contribution: '60%' },
|
||||
{ name: '直营渠道', scale: '100家', contribution: '40%' },
|
||||
],
|
||||
},
|
||||
keyFactorsTimeline: [
|
||||
{ date: '2024-10-28', event: '发布三季报', type: '业绩公告', importance: 'high', impact: '业绩超预期' },
|
||||
{ date: '2024-08-28', event: '发布中报', type: '业绩公告', importance: 'high', impact: '业绩稳定增长' },
|
||||
],
|
||||
// 通用预测报告数据
|
||||
forecastReport: {
|
||||
income_profit_trend: {
|
||||
years: ['2020', '2021', '2022', '2023', '2024E', '2025E', '2026E'],
|
||||
income: [5000, 5800, 6500, 7200, 7900, 8600, 9400],
|
||||
profit: [450, 520, 580, 650, 720, 800, 890]
|
||||
},
|
||||
growth_bars: {
|
||||
years: ['2021', '2022', '2023', '2024E', '2025E', '2026E'],
|
||||
revenue_growth_pct: [16.0, 12.1, 10.8, 9.7, 8.9, 9.3]
|
||||
},
|
||||
eps_trend: {
|
||||
years: ['2020', '2021', '2022', '2023', '2024E', '2025E', '2026E'],
|
||||
eps: [0.45, 0.52, 0.58, 0.65, 0.72, 0.80, 0.89]
|
||||
},
|
||||
pe_peg_axes: {
|
||||
years: ['2020', '2021', '2022', '2023', '2024E', '2025E', '2026E'],
|
||||
pe: [22.2, 19.2, 17.2, 15.4, 13.9, 12.5, 11.2],
|
||||
peg: [1.39, 1.59, 1.59, 1.42, 1.43, 1.40, 1.20]
|
||||
},
|
||||
detail_table: {
|
||||
years: ['2020', '2021', '2022', '2023', '2024E', '2025E', '2026E'],
|
||||
rows: [
|
||||
{ '指标': '营业总收入(百万元)', '2020': 5000, '2021': 5800, '2022': 6500, '2023': 7200, '2024E': 7900, '2025E': 8600, '2026E': 9400 },
|
||||
{ '指标': '营收增长率(%)', '2020': '-', '2021': 16.0, '2022': 12.1, '2023': 10.8, '2024E': 9.7, '2025E': 8.9, '2026E': 9.3 },
|
||||
{ '指标': '归母净利润(百万元)', '2020': 450, '2021': 520, '2022': 580, '2023': 650, '2024E': 720, '2025E': 800, '2026E': 890 },
|
||||
{ '指标': 'EPS(稀释,元)', '2020': 0.45, '2021': 0.52, '2022': 0.58, '2023': 0.65, '2024E': 0.72, '2025E': 0.80, '2026E': 0.89 },
|
||||
{ '指标': 'ROE(%)', '2020': 12.5, '2021': 13.2, '2022': 13.8, '2023': 14.2, '2024E': 14.5, '2025E': 14.8, '2026E': 15.0 },
|
||||
{ '指标': 'PE(倍)', '2020': 22.2, '2021': 19.2, '2022': 17.2, '2023': 15.4, '2024E': 13.9, '2025E': 12.5, '2026E': 11.2 }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
@@ -545,3 +545,274 @@ export function getEventRelatedStocks(eventId) {
|
||||
const count = 3 + (parseInt(eventId) % 4);
|
||||
return generateRelatedStocks(eventId, count);
|
||||
}
|
||||
|
||||
// ==================== Mock 事件列表数据 ====================
|
||||
|
||||
// 事件类型池
|
||||
const eventTypes = ['政策发布', '行业动向', '公司公告', '市场研判', '技术突破', '财报发布', '投融资', '高管变动'];
|
||||
|
||||
// 行业池
|
||||
const industries = ['半导体', '新能源', '人工智能', '医药', '消费', '金融', '房地产', '通信', '互联网', '军工', '化工', '机械'];
|
||||
|
||||
// 事件标题模板
|
||||
const eventTitleTemplates = [
|
||||
'{industry}行业迎来重大政策利好',
|
||||
'{company}发布{quarter}财报,业绩超预期',
|
||||
'{industry}板块集体大涨,{company}涨停',
|
||||
'央行宣布{policy},影响{industry}行业',
|
||||
'{company}与{partner}达成战略合作',
|
||||
'{industry}技术取得重大突破',
|
||||
'{company}拟投资{amount}亿元布局{industry}',
|
||||
'国家发改委:支持{industry}产业发展',
|
||||
'{industry}龙头{company}涨价{percent}%',
|
||||
'{company}回购股份,彰显信心',
|
||||
];
|
||||
|
||||
// 生成随机公司名
|
||||
function generateCompanyName(industry) {
|
||||
const prefixes = ['华为', '中兴', '阿里', '腾讯', '比亚迪', '宁德时代', '隆基', '恒瑞', '茅台', '五粮液', '海康', '中芯'];
|
||||
const suffixes = ['科技', '集团', '股份', '控股', '实业', ''];
|
||||
const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];
|
||||
const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];
|
||||
return `${prefix}${suffix}`;
|
||||
}
|
||||
|
||||
// 生成事件标题
|
||||
function generateEventTitle(industry, seed) {
|
||||
const template = eventTitleTemplates[seed % eventTitleTemplates.length];
|
||||
return template
|
||||
.replace('{industry}', industry)
|
||||
.replace('{company}', generateCompanyName(industry))
|
||||
.replace('{partner}', generateCompanyName(industry))
|
||||
.replace('{quarter}', ['一季度', '半年度', '三季度', '年度'][seed % 4])
|
||||
.replace('{policy}', ['降准0.5%', '降息25BP', 'MLF下调', '提高赤字率'][seed % 4])
|
||||
.replace('{amount}', [50, 100, 200, 500][seed % 4])
|
||||
.replace('{percent}', [5, 10, 15, 20][seed % 4]);
|
||||
}
|
||||
|
||||
// 生成事件描述
|
||||
function generateEventDescription(industry, importance, seed) {
|
||||
const impacts = {
|
||||
S: '重大利好,预计将对行业格局产生深远影响,相关概念股有望持续受益。机构预计该事件将带动行业整体估值提升15-20%,龙头企业市值增长空间广阔。',
|
||||
A: '重要利好,市场情绪积极,短期内资金流入明显。分析师普遍认为该事件将推动行业景气度上行,相关公司业绩有望超预期增长。',
|
||||
B: '中性偏好,对部分细分领域有一定促进作用。虽然不是行业性机会,但优质标的仍有结构性行情,建议关注业绩确定性强的公司。',
|
||||
C: '影响有限,市场反应平淡,但长期来看仍有积极意义。事件对行业发展方向有指引作用,关注后续政策跟进和落地情况。',
|
||||
};
|
||||
|
||||
const details = [
|
||||
`根据最新消息,${industry}领域将获得新一轮政策支持,产业链相关企业订单饱满。`,
|
||||
`${industry}板块近期表现活跃,多只个股创出年内新高,资金持续流入。`,
|
||||
`行业专家指出,${industry}产业正处于高速发展期,市场空间广阔,龙头企业优势明显。`,
|
||||
`券商研报显示,${industry}行业估值处于历史低位,当前具备较高配置价值。`,
|
||||
];
|
||||
|
||||
return impacts[importance] + details[seed % details.length];
|
||||
}
|
||||
|
||||
// 生成关键词
|
||||
function generateKeywords(industry, seed) {
|
||||
const commonKeywords = ['政策', '利好', '业绩', '涨停', '龙头', '突破', '合作', '投资'];
|
||||
const industryKeywords = {
|
||||
'半导体': ['芯片', '晶圆', '封测', 'AI芯片', '国产替代'],
|
||||
'新能源': ['电池', '光伏', '储能', '新能源车', '锂电'],
|
||||
'人工智能': ['大模型', 'AI应用', '算力', '数据', '机器学习'],
|
||||
'医药': ['创新药', 'CRO', '医疗器械', '生物制药', '仿制药'],
|
||||
'消费': ['白酒', '食品', '家电', '零售', '免税'],
|
||||
};
|
||||
|
||||
const keywords = [
|
||||
...commonKeywords.slice(seed % 3, seed % 3 + 3),
|
||||
...(industryKeywords[industry] || []).slice(0, 2)
|
||||
];
|
||||
|
||||
return keywords.slice(0, 5);
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成 Mock 事件列表
|
||||
* @param {Object} params - 查询参数
|
||||
* @returns {Object} - {events: [], pagination: {}}
|
||||
*/
|
||||
export function generateMockEvents(params = {}) {
|
||||
const {
|
||||
page = 1,
|
||||
per_page = 10,
|
||||
sort = 'new',
|
||||
importance = 'all',
|
||||
date_range = '',
|
||||
q = '',
|
||||
industry_code = '',
|
||||
stock_code = '',
|
||||
} = params;
|
||||
|
||||
// 生成100个事件用于测试
|
||||
const totalEvents = 100;
|
||||
const allEvents = [];
|
||||
|
||||
const importanceLevels = ['S', 'A', 'B', 'C'];
|
||||
const baseDate = new Date('2025-01-15');
|
||||
|
||||
for (let i = 0; i < totalEvents; i++) {
|
||||
const industry = industries[i % industries.length];
|
||||
const imp = importanceLevels[i % importanceLevels.length];
|
||||
const eventType = eventTypes[i % eventTypes.length];
|
||||
|
||||
// 生成随机日期(最近30天内)
|
||||
const createdAt = new Date(baseDate);
|
||||
createdAt.setDate(createdAt.getDate() - (i % 30));
|
||||
|
||||
// 生成随机热度和收益率
|
||||
const hotScore = Math.max(50, 100 - i);
|
||||
const relatedAvgChg = (Math.random() * 20 - 5).toFixed(2); // -5% 到 15%
|
||||
const relatedMaxChg = (Math.random() * 30).toFixed(2); // 0% 到 30%
|
||||
|
||||
// 为每个事件随机选择2-5个相关股票
|
||||
const relatedStockCount = 2 + (i % 4); // 2-5个股票
|
||||
const relatedStocks = [];
|
||||
const industryStocks = stockPool.filter(s => s.industry === industry);
|
||||
|
||||
// 优先选择同行业股票
|
||||
if (industryStocks.length > 0) {
|
||||
for (let j = 0; j < Math.min(relatedStockCount, industryStocks.length); j++) {
|
||||
relatedStocks.push(industryStocks[j % industryStocks.length].stock_code);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果同行业股票不够,从整个 stockPool 中补充
|
||||
while (relatedStocks.length < relatedStockCount && relatedStocks.length < stockPool.length) {
|
||||
const randomStock = stockPool[relatedStocks.length % stockPool.length];
|
||||
if (!relatedStocks.includes(randomStock.stock_code)) {
|
||||
relatedStocks.push(randomStock.stock_code);
|
||||
}
|
||||
}
|
||||
|
||||
allEvents.push({
|
||||
id: i + 1,
|
||||
title: generateEventTitle(industry, i),
|
||||
description: generateEventDescription(industry, imp, i),
|
||||
content: generateEventDescription(industry, imp, i),
|
||||
event_type: eventType,
|
||||
importance: imp,
|
||||
status: 'published',
|
||||
created_at: createdAt.toISOString(),
|
||||
updated_at: createdAt.toISOString(),
|
||||
hot_score: hotScore,
|
||||
view_count: Math.floor(Math.random() * 10000),
|
||||
related_avg_chg: parseFloat(relatedAvgChg),
|
||||
related_max_chg: parseFloat(relatedMaxChg),
|
||||
keywords: generateKeywords(industry, i),
|
||||
is_ai_generated: i % 4 === 0, // 25% 的事件是AI生成
|
||||
industry: industry,
|
||||
related_stocks: relatedStocks, // 添加相关股票列表
|
||||
});
|
||||
}
|
||||
|
||||
// 筛选
|
||||
let filteredEvents = allEvents;
|
||||
|
||||
// 重要性筛选
|
||||
if (importance && importance !== 'all') {
|
||||
filteredEvents = filteredEvents.filter(e => e.importance === importance);
|
||||
}
|
||||
|
||||
// 关键词搜索
|
||||
if (q) {
|
||||
const query = q.toLowerCase();
|
||||
filteredEvents = filteredEvents.filter(e =>
|
||||
e.title.toLowerCase().includes(query) ||
|
||||
e.description.toLowerCase().includes(query) ||
|
||||
e.keywords.some(k => k.toLowerCase().includes(query))
|
||||
);
|
||||
}
|
||||
|
||||
// 行业筛选
|
||||
if (industry_code) {
|
||||
filteredEvents = filteredEvents.filter(e =>
|
||||
e.industry.includes(industry_code) || e.keywords.includes(industry_code)
|
||||
);
|
||||
}
|
||||
|
||||
// 股票代码筛选
|
||||
if (stock_code) {
|
||||
// 移除可能的后缀 (.SH, .SZ)
|
||||
const cleanStockCode = stock_code.replace(/\.(SH|SZ)$/, '');
|
||||
filteredEvents = filteredEvents.filter(e => {
|
||||
if (!e.related_stocks || e.related_stocks.length === 0) {
|
||||
return false;
|
||||
}
|
||||
// 检查事件的 related_stocks 中是否包含该股票代码
|
||||
return e.related_stocks.some(code => {
|
||||
const cleanCode = code.replace(/\.(SH|SZ)$/, '');
|
||||
return cleanCode === cleanStockCode || code === stock_code;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 日期范围筛选
|
||||
if (date_range) {
|
||||
const [startStr, endStr] = date_range.split(' 至 ');
|
||||
if (startStr && endStr) {
|
||||
const start = new Date(startStr);
|
||||
const end = new Date(endStr);
|
||||
filteredEvents = filteredEvents.filter(e => {
|
||||
const eventDate = new Date(e.created_at);
|
||||
return eventDate >= start && eventDate <= end;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 排序
|
||||
if (sort === 'hot') {
|
||||
filteredEvents.sort((a, b) => b.hot_score - a.hot_score);
|
||||
} else if (sort === 'returns') {
|
||||
filteredEvents.sort((a, b) => b.related_avg_chg - a.related_avg_chg);
|
||||
} else {
|
||||
// 默认按时间排序 (new)
|
||||
filteredEvents.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
|
||||
}
|
||||
|
||||
// 分页
|
||||
const start = (page - 1) * per_page;
|
||||
const end = start + per_page;
|
||||
const paginatedEvents = filteredEvents.slice(start, end);
|
||||
|
||||
return {
|
||||
events: paginatedEvents,
|
||||
pagination: {
|
||||
page: page,
|
||||
per_page: per_page,
|
||||
total: filteredEvents.length,
|
||||
total_pages: Math.ceil(filteredEvents.length / per_page),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成热点事件
|
||||
* @param {number} limit - 返回数量
|
||||
* @returns {Array} - 热点事件列表
|
||||
*/
|
||||
export function generateHotEvents(limit = 5) {
|
||||
const { events } = generateMockEvents({ sort: 'hot', per_page: limit });
|
||||
return events;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成热门关键词
|
||||
* @param {number} limit - 返回数量
|
||||
* @returns {Array} - 热门关键词列表
|
||||
*/
|
||||
export function generatePopularKeywords(limit = 20) {
|
||||
const allKeywords = [
|
||||
'人工智能', '芯片', '新能源', '锂电池', '光伏', '储能',
|
||||
'消费', '白酒', '医药', 'CRO', '半导体', '国产替代',
|
||||
'军工', '航空', '5G', '通信', '互联网', '云计算',
|
||||
'大数据', '区块链', '元宇宙', '新基建', '数字经济',
|
||||
];
|
||||
|
||||
return allKeywords.slice(0, limit).map((keyword, index) => ({
|
||||
keyword,
|
||||
count: Math.max(10, 100 - index * 3),
|
||||
trend: index % 3 === 0 ? 'up' : index % 3 === 1 ? 'down' : 'stable',
|
||||
}));
|
||||
}
|
||||
|
||||
139
src/mocks/data/financial.js
Normal file
139
src/mocks/data/financial.js
Normal file
@@ -0,0 +1,139 @@
|
||||
// src/mocks/data/financial.js
|
||||
// 财务数据相关的 Mock 数据
|
||||
|
||||
// 生成财务数据
|
||||
export const generateFinancialData = (stockCode) => {
|
||||
const periods = ['2024-09-30', '2024-06-30', '2024-03-31', '2023-12-31'];
|
||||
|
||||
return {
|
||||
stockCode,
|
||||
|
||||
// 股票基本信息
|
||||
stockInfo: {
|
||||
code: stockCode,
|
||||
name: stockCode === '000001' ? '平安银行' : '示例公司',
|
||||
industry: stockCode === '000001' ? '银行' : '制造业',
|
||||
list_date: '1991-04-03',
|
||||
market: 'SZ'
|
||||
},
|
||||
|
||||
// 资产负债表
|
||||
balanceSheet: periods.map((period, i) => ({
|
||||
period,
|
||||
total_assets: 5024560 - i * 50000, // 百万元
|
||||
total_liabilities: 4698880 - i * 48000,
|
||||
shareholders_equity: 325680 - i * 2000,
|
||||
current_assets: 2512300 - i * 25000,
|
||||
non_current_assets: 2512260 - i * 25000,
|
||||
current_liabilities: 3456780 - i * 35000,
|
||||
non_current_liabilities: 1242100 - i * 13000
|
||||
})),
|
||||
|
||||
// 利润表
|
||||
incomeStatement: periods.map((period, i) => ({
|
||||
period,
|
||||
revenue: 162350 - i * 4000, // 百万元
|
||||
operating_cost: 45620 - i * 1200,
|
||||
gross_profit: 116730 - i * 2800,
|
||||
operating_profit: 68450 - i * 1500,
|
||||
net_profit: 52860 - i * 1200,
|
||||
eps: 2.72 - i * 0.06
|
||||
})),
|
||||
|
||||
// 现金流量表
|
||||
cashflow: periods.map((period, i) => ({
|
||||
period,
|
||||
operating_cashflow: 125600 - i * 3000, // 百万元
|
||||
investing_cashflow: -45300 - i * 1000,
|
||||
financing_cashflow: -38200 + i * 500,
|
||||
net_cashflow: 42100 - i * 1500,
|
||||
cash_ending: 456780 - i * 10000
|
||||
})),
|
||||
|
||||
// 财务指标
|
||||
financialMetrics: periods.map((period, i) => ({
|
||||
period,
|
||||
roe: 16.23 - i * 0.3, // %
|
||||
roa: 1.05 - i * 0.02,
|
||||
gross_margin: 71.92 - i * 0.5,
|
||||
net_margin: 32.56 - i * 0.3,
|
||||
current_ratio: 0.73 + i * 0.01,
|
||||
quick_ratio: 0.71 + i * 0.01,
|
||||
debt_ratio: 93.52 + i * 0.05,
|
||||
asset_turnover: 0.41 - i * 0.01,
|
||||
inventory_turnover: 0, // 银行无库存
|
||||
receivable_turnover: 0 // 银行特殊
|
||||
})),
|
||||
|
||||
// 主营业务
|
||||
mainBusiness: {
|
||||
by_product: [
|
||||
{ name: '对公业务', revenue: 68540, ratio: 42.2, yoy_growth: 6.8 },
|
||||
{ name: '零售业务', revenue: 81320, ratio: 50.1, yoy_growth: 11.2 },
|
||||
{ name: '金融市场业务', revenue: 12490, ratio: 7.7, yoy_growth: 3.5 }
|
||||
],
|
||||
by_region: [
|
||||
{ name: '华南地区', revenue: 56800, ratio: 35.0, yoy_growth: 9.2 },
|
||||
{ name: '华东地区', revenue: 48705, ratio: 30.0, yoy_growth: 8.5 },
|
||||
{ name: '华北地区', revenue: 32470, ratio: 20.0, yoy_growth: 7.8 },
|
||||
{ name: '其他地区', revenue: 24375, ratio: 15.0, yoy_growth: 6.5 }
|
||||
]
|
||||
},
|
||||
|
||||
// 业绩预告
|
||||
forecast: {
|
||||
period: '2024',
|
||||
forecast_net_profit_min: 580000, // 百万元
|
||||
forecast_net_profit_max: 620000,
|
||||
yoy_growth_min: 10.0, // %
|
||||
yoy_growth_max: 17.0,
|
||||
forecast_type: '预增',
|
||||
reason: '受益于零售业务快速增长及资产质量改善,预计全年业绩保持稳定增长',
|
||||
publish_date: '2024-10-15'
|
||||
},
|
||||
|
||||
// 行业排名
|
||||
industryRank: {
|
||||
industry: '银行',
|
||||
total_companies: 42,
|
||||
rankings: [
|
||||
{ metric: '总资产', rank: 8, value: 5024560, percentile: 19 },
|
||||
{ metric: '营业收入', rank: 9, value: 162350, percentile: 21 },
|
||||
{ metric: '净利润', rank: 8, value: 52860, percentile: 19 },
|
||||
{ metric: 'ROE', rank: 12, value: 16.23, percentile: 29 },
|
||||
{ metric: '不良贷款率', rank: 18, value: 1.02, percentile: 43 }
|
||||
]
|
||||
},
|
||||
|
||||
// 期间对比
|
||||
periodComparison: {
|
||||
periods: ['Q3-2024', 'Q2-2024', 'Q1-2024', 'Q4-2023'],
|
||||
metrics: [
|
||||
{
|
||||
name: '营业收入',
|
||||
unit: '百万元',
|
||||
values: [41500, 40800, 40200, 40850],
|
||||
yoy: [8.2, 7.8, 8.5, 9.2]
|
||||
},
|
||||
{
|
||||
name: '净利润',
|
||||
unit: '百万元',
|
||||
values: [13420, 13180, 13050, 13210],
|
||||
yoy: [12.5, 11.2, 10.8, 12.3]
|
||||
},
|
||||
{
|
||||
name: 'ROE',
|
||||
unit: '%',
|
||||
values: [16.23, 15.98, 15.75, 16.02],
|
||||
yoy: [1.2, 0.8, 0.5, 1.0]
|
||||
},
|
||||
{
|
||||
name: 'EPS',
|
||||
unit: '元',
|
||||
values: [0.69, 0.68, 0.67, 0.68],
|
||||
yoy: [12.3, 11.5, 10.5, 12.0]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
};
|
||||
554
src/mocks/data/industries.js
Normal file
554
src/mocks/data/industries.js
Normal file
@@ -0,0 +1,554 @@
|
||||
// src/mocks/data/industries.js
|
||||
// 行业分类完整树形数据 Mock
|
||||
|
||||
/**
|
||||
* 完整的行业分类树形结构
|
||||
* 包含 5 个分类体系,层级深度 2-4 层不等
|
||||
*/
|
||||
export const industryTreeData = [
|
||||
{
|
||||
value: "新财富行业分类",
|
||||
label: "新财富行业分类",
|
||||
children: [
|
||||
{
|
||||
value: "XCF001",
|
||||
label: "传播与文化",
|
||||
children: [
|
||||
{
|
||||
value: "XCF001001",
|
||||
label: "互联网传媒",
|
||||
children: [
|
||||
{ value: "XCF001001001", label: "数字媒体" },
|
||||
{ value: "XCF001001002", label: "社交平台" },
|
||||
{ value: "XCF001001003", label: "短视频平台" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "XCF001002",
|
||||
label: "影视娱乐",
|
||||
children: [
|
||||
{ value: "XCF001002001", label: "电影制作" },
|
||||
{ value: "XCF001002002", label: "网络视频" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "XCF001003",
|
||||
label: "出版发行"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "XCF002",
|
||||
label: "交通运输仓储",
|
||||
children: [
|
||||
{
|
||||
value: "XCF002001",
|
||||
label: "航空运输",
|
||||
children: [
|
||||
{ value: "XCF002001001", label: "航空客运" },
|
||||
{ value: "XCF002001002", label: "航空货运" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "XCF002002",
|
||||
label: "铁路运输"
|
||||
},
|
||||
{
|
||||
value: "XCF002003",
|
||||
label: "公路运输",
|
||||
children: [
|
||||
{ value: "XCF002003001", label: "公路客运" },
|
||||
{ value: "XCF002003002", label: "公路货运" },
|
||||
{ value: "XCF002003003", label: "快递物流" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "XCF003",
|
||||
label: "农林牧渔",
|
||||
children: [
|
||||
{ value: "XCF003001", label: "种植业" },
|
||||
{ value: "XCF003002", label: "林业" },
|
||||
{ value: "XCF003003", label: "畜牧业" },
|
||||
{ value: "XCF003004", label: "渔业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "XCF004",
|
||||
label: "医药生物",
|
||||
children: [
|
||||
{
|
||||
value: "XCF004001",
|
||||
label: "化学制药",
|
||||
children: [
|
||||
{ value: "XCF004001001", label: "化学原料药" },
|
||||
{ value: "XCF004001002", label: "化学制剂" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "XCF004002",
|
||||
label: "生物制品",
|
||||
children: [
|
||||
{ value: "XCF004002001", label: "疫苗" },
|
||||
{ value: "XCF004002002", label: "血液制品" },
|
||||
{ value: "XCF004002003", label: "诊断试剂" }
|
||||
]
|
||||
},
|
||||
{ value: "XCF004003", label: "中药" },
|
||||
{ value: "XCF004004", label: "医疗器械" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "XCF005",
|
||||
label: "基础化工",
|
||||
children: [
|
||||
{ value: "XCF005001", label: "化学原料" },
|
||||
{ value: "XCF005002", label: "化学制品" },
|
||||
{ value: "XCF005003", label: "塑料" },
|
||||
{ value: "XCF005004", label: "橡胶" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "XCF006",
|
||||
label: "家电",
|
||||
children: [
|
||||
{ value: "XCF006001", label: "白色家电" },
|
||||
{ value: "XCF006002", label: "黑色家电" },
|
||||
{ value: "XCF006003", label: "小家电" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "XCF007",
|
||||
label: "电子",
|
||||
children: [
|
||||
{
|
||||
value: "XCF007001",
|
||||
label: "半导体",
|
||||
children: [
|
||||
{ value: "XCF007001001", label: "芯片设计" },
|
||||
{ value: "XCF007001002", label: "芯片制造" },
|
||||
{ value: "XCF007001003", label: "封装测试" }
|
||||
]
|
||||
},
|
||||
{ value: "XCF007002", label: "元件" },
|
||||
{ value: "XCF007003", label: "光学光电子" },
|
||||
{ value: "XCF007004", label: "消费电子" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "XCF008",
|
||||
label: "计算机",
|
||||
children: [
|
||||
{
|
||||
value: "XCF008001",
|
||||
label: "计算机设备",
|
||||
children: [
|
||||
{ value: "XCF008001001", label: "PC" },
|
||||
{ value: "XCF008001002", label: "服务器" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "XCF008002",
|
||||
label: "软件开发",
|
||||
children: [
|
||||
{ value: "XCF008002001", label: "应用软件" },
|
||||
{ value: "XCF008002002", label: "系统软件" }
|
||||
]
|
||||
},
|
||||
{ value: "XCF008003", label: "IT服务" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "申银万国行业分类",
|
||||
label: "申银万国行业分类",
|
||||
children: [
|
||||
{
|
||||
value: "SW001",
|
||||
label: "电子",
|
||||
children: [
|
||||
{
|
||||
value: "SW001001",
|
||||
label: "半导体",
|
||||
children: [
|
||||
{ value: "SW001001001", label: "半导体材料" },
|
||||
{ value: "SW001001002", label: "半导体设备" },
|
||||
{ value: "SW001001003", label: "集成电路" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "SW001002",
|
||||
label: "电子制造",
|
||||
children: [
|
||||
{ value: "SW001002001", label: "PCB" },
|
||||
{ value: "SW001002002", label: "被动元件" }
|
||||
]
|
||||
},
|
||||
{ value: "SW001003", label: "光学光电子" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "SW002",
|
||||
label: "计算机",
|
||||
children: [
|
||||
{ value: "SW002001", label: "计算机设备" },
|
||||
{ value: "SW002002", label: "计算机应用" },
|
||||
{ value: "SW002003", label: "通信设备" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "SW003",
|
||||
label: "传媒",
|
||||
children: [
|
||||
{ value: "SW003001", label: "互联网传媒" },
|
||||
{ value: "SW003002", label: "营销传播" },
|
||||
{ value: "SW003003", label: "文化传媒" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "SW004",
|
||||
label: "医药生物",
|
||||
children: [
|
||||
{ value: "SW004001", label: "化学制药" },
|
||||
{ value: "SW004002", label: "中药" },
|
||||
{ value: "SW004003", label: "生物制品" },
|
||||
{ value: "SW004004", label: "医疗器械" },
|
||||
{ value: "SW004005", label: "医药商业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "SW005",
|
||||
label: "汽车",
|
||||
children: [
|
||||
{
|
||||
value: "SW005001",
|
||||
label: "乘用车",
|
||||
children: [
|
||||
{ value: "SW005001001", label: "燃油车" },
|
||||
{ value: "SW005001002", label: "新能源车" }
|
||||
]
|
||||
},
|
||||
{ value: "SW005002", label: "商用车" },
|
||||
{ value: "SW005003", label: "汽车零部件" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "SW006",
|
||||
label: "机械设备",
|
||||
children: [
|
||||
{ value: "SW006001", label: "通用设备" },
|
||||
{ value: "SW006002", label: "专用设备" },
|
||||
{ value: "SW006003", label: "仪器仪表" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "SW007",
|
||||
label: "食品饮料",
|
||||
children: [
|
||||
{ value: "SW007001", label: "白酒" },
|
||||
{ value: "SW007002", label: "啤酒" },
|
||||
{ value: "SW007003", label: "软饮料" },
|
||||
{ value: "SW007004", label: "食品加工" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "SW008",
|
||||
label: "银行",
|
||||
children: [
|
||||
{ value: "SW008001", label: "国有银行" },
|
||||
{ value: "SW008002", label: "股份制银行" },
|
||||
{ value: "SW008003", label: "城商行" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "SW009",
|
||||
label: "非银金融",
|
||||
children: [
|
||||
{ value: "SW009001", label: "证券" },
|
||||
{ value: "SW009002", label: "保险" },
|
||||
{ value: "SW009003", label: "多元金融" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "SW010",
|
||||
label: "房地产",
|
||||
children: [
|
||||
{ value: "SW010001", label: "房地产开发" },
|
||||
{ value: "SW010002", label: "房地产服务" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "证监会行业分类(2001)",
|
||||
label: "证监会行业分类(2001)",
|
||||
children: [
|
||||
{
|
||||
value: "CSRC_A",
|
||||
label: "A 农、林、牧、渔业",
|
||||
children: [
|
||||
{ value: "CSRC_A01", label: "A01 农业" },
|
||||
{ value: "CSRC_A02", label: "A02 林业" },
|
||||
{ value: "CSRC_A03", label: "A03 畜牧业" },
|
||||
{ value: "CSRC_A04", label: "A04 渔业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "CSRC_B",
|
||||
label: "B 采矿业",
|
||||
children: [
|
||||
{ value: "CSRC_B06", label: "B06 煤炭开采和洗选业" },
|
||||
{ value: "CSRC_B07", label: "B07 石油和天然气开采业" },
|
||||
{ value: "CSRC_B08", label: "B08 黑色金属矿采选业" },
|
||||
{ value: "CSRC_B09", label: "B09 有色金属矿采选业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "CSRC_C",
|
||||
label: "C 制造业",
|
||||
children: [
|
||||
{
|
||||
value: "CSRC_C13",
|
||||
label: "C13 农副食品加工业",
|
||||
children: [
|
||||
{ value: "CSRC_C1310", label: "C1310 肉制品加工" },
|
||||
{ value: "CSRC_C1320", label: "C1320 水产品加工" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "CSRC_C27",
|
||||
label: "C27 医药制造业",
|
||||
children: [
|
||||
{ value: "CSRC_C2710", label: "C2710 化学药品原料药制造" },
|
||||
{ value: "CSRC_C2720", label: "C2720 化学药品制剂制造" },
|
||||
{ value: "CSRC_C2730", label: "C2730 中药饮片加工" }
|
||||
]
|
||||
},
|
||||
{ value: "CSRC_C35", label: "C35 专用设备制造业" },
|
||||
{ value: "CSRC_C39", label: "C39 计算机、通信和其他电子设备制造业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "CSRC_I",
|
||||
label: "I 信息传输、软件和信息技术服务业",
|
||||
children: [
|
||||
{ value: "CSRC_I63", label: "I63 电信、广播电视和卫星传输服务" },
|
||||
{ value: "CSRC_I64", label: "I64 互联网和相关服务" },
|
||||
{ value: "CSRC_I65", label: "I65 软件和信息技术服务业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "CSRC_J",
|
||||
label: "J 金融业",
|
||||
children: [
|
||||
{ value: "CSRC_J66", label: "J66 货币金融服务" },
|
||||
{ value: "CSRC_J67", label: "J67 资本市场服务" },
|
||||
{ value: "CSRC_J68", label: "J68 保险业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "CSRC_K",
|
||||
label: "K 房地产业",
|
||||
children: [
|
||||
{ value: "CSRC_K70", label: "K70 房地产业" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "中银国际行业分类",
|
||||
label: "中银国际行业分类",
|
||||
children: [
|
||||
{
|
||||
value: "BOC001",
|
||||
label: "能源",
|
||||
children: [
|
||||
{ value: "BOC001001", label: "石油天然气" },
|
||||
{ value: "BOC001002", label: "煤炭" },
|
||||
{ value: "BOC001003", label: "新能源" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "BOC002",
|
||||
label: "原材料",
|
||||
children: [
|
||||
{ value: "BOC002001", label: "化工" },
|
||||
{ value: "BOC002002", label: "钢铁" },
|
||||
{ value: "BOC002003", label: "有色金属" },
|
||||
{ value: "BOC002004", label: "建材" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "BOC003",
|
||||
label: "工业",
|
||||
children: [
|
||||
{ value: "BOC003001", label: "机械" },
|
||||
{ value: "BOC003002", label: "电气设备" },
|
||||
{ value: "BOC003003", label: "国防军工" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "BOC004",
|
||||
label: "消费",
|
||||
children: [
|
||||
{
|
||||
value: "BOC004001",
|
||||
label: "可选消费",
|
||||
children: [
|
||||
{ value: "BOC004001001", label: "汽车" },
|
||||
{ value: "BOC004001002", label: "家电" },
|
||||
{ value: "BOC004001003", label: "纺织服装" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "BOC004002",
|
||||
label: "必需消费",
|
||||
children: [
|
||||
{ value: "BOC004002001", label: "食品饮料" },
|
||||
{ value: "BOC004002002", label: "农林牧渔" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "BOC005",
|
||||
label: "医疗保健",
|
||||
children: [
|
||||
{ value: "BOC005001", label: "医药" },
|
||||
{ value: "BOC005002", label: "医疗器械" },
|
||||
{ value: "BOC005003", label: "医疗服务" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "BOC006",
|
||||
label: "金融",
|
||||
children: [
|
||||
{ value: "BOC006001", label: "银行" },
|
||||
{ value: "BOC006002", label: "非银金融" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "BOC007",
|
||||
label: "科技",
|
||||
children: [
|
||||
{
|
||||
value: "BOC007001",
|
||||
label: "信息技术",
|
||||
children: [
|
||||
{ value: "BOC007001001", label: "半导体" },
|
||||
{ value: "BOC007001002", label: "电子" },
|
||||
{ value: "BOC007001003", label: "计算机" },
|
||||
{ value: "BOC007001004", label: "通信" }
|
||||
]
|
||||
},
|
||||
{ value: "BOC007002", label: "传媒" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "巨潮行业分类",
|
||||
label: "巨潮行业分类",
|
||||
children: [
|
||||
{
|
||||
value: "JC01",
|
||||
label: "制造业",
|
||||
children: [
|
||||
{
|
||||
value: "JC0101",
|
||||
label: "电气机械及器材制造业",
|
||||
children: [
|
||||
{ value: "JC010101", label: "电机制造" },
|
||||
{ value: "JC010102", label: "输配电及控制设备制造" },
|
||||
{ value: "JC010103", label: "电池制造" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "JC0102",
|
||||
label: "医药制造业",
|
||||
children: [
|
||||
{ value: "JC010201", label: "化学药品原药制造" },
|
||||
{ value: "JC010202", label: "化学药品制剂制造" },
|
||||
{ value: "JC010203", label: "中成药制造" },
|
||||
{ value: "JC010204", label: "生物、生化制品制造" }
|
||||
]
|
||||
},
|
||||
{ value: "JC0103", label: "食品制造业" },
|
||||
{ value: "JC0104", label: "纺织业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "JC02",
|
||||
label: "信息传输、软件和信息技术服务业",
|
||||
children: [
|
||||
{ value: "JC0201", label: "互联网和相关服务" },
|
||||
{ value: "JC0202", label: "软件和信息技术服务业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "JC03",
|
||||
label: "批发和零售业",
|
||||
children: [
|
||||
{ value: "JC0301", label: "批发业" },
|
||||
{ value: "JC0302", label: "零售业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "JC04",
|
||||
label: "房地产业",
|
||||
children: [
|
||||
{ value: "JC0401", label: "房地产开发经营" },
|
||||
{ value: "JC0402", label: "物业管理" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "JC05",
|
||||
label: "金融业",
|
||||
children: [
|
||||
{ value: "JC0501", label: "货币金融服务" },
|
||||
{ value: "JC0502", label: "资本市场服务" },
|
||||
{ value: "JC0503", label: "保险业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "JC06",
|
||||
label: "交通运输、仓储和邮政业",
|
||||
children: [
|
||||
{ value: "JC0601", label: "道路运输业" },
|
||||
{ value: "JC0602", label: "航空运输业" },
|
||||
{ value: "JC0603", label: "水上运输业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "JC07",
|
||||
label: "采矿业",
|
||||
children: [
|
||||
{ value: "JC0701", label: "煤炭开采和洗选业" },
|
||||
{ value: "JC0702", label: "石油和天然气开采业" },
|
||||
{ value: "JC0703", label: "有色金属矿采选业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "JC08",
|
||||
label: "农、林、牧、渔业",
|
||||
children: [
|
||||
{ value: "JC0801", label: "农业" },
|
||||
{ value: "JC0802", label: "林业" },
|
||||
{ value: "JC0803", label: "畜牧业" },
|
||||
{ value: "JC0804", label: "渔业" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "JC09",
|
||||
label: "建筑业",
|
||||
children: [
|
||||
{ value: "JC0901", label: "房屋建筑业" },
|
||||
{ value: "JC0902", label: "土木工程建筑业" },
|
||||
{ value: "JC0903", label: "建筑装饰和其他建筑业" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
124
src/mocks/data/kline.js
Normal file
124
src/mocks/data/kline.js
Normal file
@@ -0,0 +1,124 @@
|
||||
// src/mocks/data/kline.js
|
||||
// K线数据生成函数
|
||||
|
||||
/**
|
||||
* 生成分时数据 (timeline)
|
||||
* 用于展示当日分钟级别的价格走势
|
||||
*/
|
||||
export const generateTimelineData = (indexCode) => {
|
||||
const data = [];
|
||||
const basePrice = getBasePrice(indexCode);
|
||||
const today = new Date();
|
||||
|
||||
// 生成早盘数据 (09:30 - 11:30)
|
||||
const morningStart = new Date(today.setHours(9, 30, 0, 0));
|
||||
const morningEnd = new Date(today.setHours(11, 30, 0, 0));
|
||||
generateTimeRange(data, morningStart, morningEnd, basePrice, 'morning');
|
||||
|
||||
// 生成午盘数据 (13:00 - 15:00)
|
||||
const afternoonStart = new Date(today.setHours(13, 0, 0, 0));
|
||||
const afternoonEnd = new Date(today.setHours(15, 0, 0, 0));
|
||||
generateTimeRange(data, afternoonStart, afternoonEnd, basePrice, 'afternoon');
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成日线数据 (daily)
|
||||
* 用于获取历史收盘价等数据
|
||||
*/
|
||||
export const generateDailyData = (indexCode, days = 30) => {
|
||||
const data = [];
|
||||
const basePrice = getBasePrice(indexCode);
|
||||
const today = new Date();
|
||||
|
||||
for (let i = days - 1; i >= 0; i--) {
|
||||
const date = new Date(today);
|
||||
date.setDate(date.getDate() - i);
|
||||
|
||||
// 跳过周末
|
||||
const dayOfWeek = date.getDay();
|
||||
if (dayOfWeek === 0 || dayOfWeek === 6) continue;
|
||||
|
||||
const open = basePrice * (1 + (Math.random() * 0.04 - 0.02));
|
||||
const close = open * (1 + (Math.random() * 0.03 - 0.015));
|
||||
const high = Math.max(open, close) * (1 + Math.random() * 0.015);
|
||||
const low = Math.min(open, close) * (1 - Math.random() * 0.015);
|
||||
const volume = Math.floor(Math.random() * 50000000000 + 10000000000);
|
||||
|
||||
data.push({
|
||||
date: formatDate(date),
|
||||
time: formatDate(date),
|
||||
open: parseFloat(open.toFixed(2)),
|
||||
close: parseFloat(close.toFixed(2)),
|
||||
high: parseFloat(high.toFixed(2)),
|
||||
low: parseFloat(low.toFixed(2)),
|
||||
volume: volume,
|
||||
prev_close: i === 0 ? parseFloat((basePrice * 0.99).toFixed(2)) : data[data.length - 1]?.close
|
||||
});
|
||||
}
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成时间范围内的数据
|
||||
*/
|
||||
function generateTimeRange(data, startTime, endTime, basePrice, session) {
|
||||
const current = new Date(startTime);
|
||||
let price = basePrice;
|
||||
|
||||
// 波动趋势(早盘和午盘可能有不同的走势)
|
||||
const trend = session === 'morning' ? Math.random() * 0.02 - 0.01 : Math.random() * 0.015 - 0.005;
|
||||
|
||||
while (current <= endTime) {
|
||||
// 添加随机波动
|
||||
const volatility = (Math.random() - 0.5) * 0.005;
|
||||
price = price * (1 + trend / 120 + volatility); // 每分钟微小变化
|
||||
|
||||
const volume = Math.floor(Math.random() * 500000000 + 100000000);
|
||||
|
||||
data.push({
|
||||
time: formatTime(current),
|
||||
price: parseFloat(price.toFixed(2)),
|
||||
close: parseFloat(price.toFixed(2)),
|
||||
volume: volume,
|
||||
prev_close: basePrice
|
||||
});
|
||||
|
||||
// 增加1分钟
|
||||
current.setMinutes(current.getMinutes() + 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取不同指数的基准价格
|
||||
*/
|
||||
function getBasePrice(indexCode) {
|
||||
const basePrices = {
|
||||
'000001.SH': 3200, // 上证指数
|
||||
'399001.SZ': 10500, // 深证成指
|
||||
'399006.SZ': 2100 // 创业板指
|
||||
};
|
||||
|
||||
return basePrices[indexCode] || 3000;
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化时间为 HH:mm
|
||||
*/
|
||||
function formatTime(date) {
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化日期为 YYYY-MM-DD
|
||||
*/
|
||||
function formatDate(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
150
src/mocks/data/market.js
Normal file
150
src/mocks/data/market.js
Normal file
@@ -0,0 +1,150 @@
|
||||
// src/mocks/data/market.js
|
||||
// 市场行情相关的 Mock 数据
|
||||
|
||||
// 生成市场数据
|
||||
export const generateMarketData = (stockCode) => {
|
||||
const basePrice = 13.50; // 基准价格(平安银行约13.5元)
|
||||
|
||||
return {
|
||||
stockCode,
|
||||
|
||||
// 成交数据 - 必须包含K线所需的字段
|
||||
tradeData: {
|
||||
success: true,
|
||||
data: Array(30).fill(null).map((_, i) => {
|
||||
const open = basePrice + (Math.random() - 0.5) * 0.5;
|
||||
const close = basePrice + (Math.random() - 0.5) * 0.5;
|
||||
const high = Math.max(open, close) + Math.random() * 0.3;
|
||||
const low = Math.min(open, close) - Math.random() * 0.3;
|
||||
return {
|
||||
date: new Date(Date.now() - (29 - i) * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
|
||||
open: parseFloat(open.toFixed(2)),
|
||||
close: parseFloat(close.toFixed(2)),
|
||||
high: parseFloat(high.toFixed(2)),
|
||||
low: parseFloat(low.toFixed(2)),
|
||||
volume: Math.floor(Math.random() * 500000000) + 100000000, // 1-6亿股
|
||||
amount: Math.floor(Math.random() * 7000000000) + 1300000000, // 13-80亿元
|
||||
turnover_rate: (Math.random() * 2 + 0.5).toFixed(2), // 0.5-2.5%
|
||||
change_pct: (Math.random() * 6 - 3).toFixed(2) // -3% to +3%
|
||||
};
|
||||
})
|
||||
},
|
||||
|
||||
// 资金流向 - 融资融券数据数组
|
||||
fundingData: {
|
||||
success: true,
|
||||
data: Array(30).fill(null).map((_, i) => ({
|
||||
date: new Date(Date.now() - (29 - i) * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
|
||||
financing: {
|
||||
balance: Math.floor(Math.random() * 5000000000) + 10000000000, // 融资余额
|
||||
buy: Math.floor(Math.random() * 500000000) + 100000000, // 融资买入
|
||||
repay: Math.floor(Math.random() * 500000000) + 80000000 // 融资偿还
|
||||
},
|
||||
securities: {
|
||||
balance: Math.floor(Math.random() * 100000000) + 50000000, // 融券余额
|
||||
sell: Math.floor(Math.random() * 10000000) + 5000000, // 融券卖出
|
||||
repay: Math.floor(Math.random() * 10000000) + 3000000 // 融券偿还
|
||||
}
|
||||
}))
|
||||
},
|
||||
|
||||
// 大单统计 - 包含 daily_stats 数组
|
||||
bigDealData: {
|
||||
success: true,
|
||||
data: [],
|
||||
daily_stats: Array(10).fill(null).map((_, i) => ({
|
||||
date: new Date(Date.now() - (9 - i) * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
|
||||
big_buy: Math.floor(Math.random() * 300000000) + 100000000,
|
||||
big_sell: Math.floor(Math.random() * 300000000) + 80000000,
|
||||
medium_buy: Math.floor(Math.random() * 200000000) + 60000000,
|
||||
medium_sell: Math.floor(Math.random() * 200000000) + 50000000,
|
||||
small_buy: Math.floor(Math.random() * 100000000) + 30000000,
|
||||
small_sell: Math.floor(Math.random() * 100000000) + 25000000
|
||||
}))
|
||||
},
|
||||
|
||||
// 异动分析 - 包含 grouped_data 数组
|
||||
unusualData: {
|
||||
success: true,
|
||||
data: [],
|
||||
grouped_data: Array(5).fill(null).map((_, i) => ({
|
||||
date: new Date(Date.now() - (4 - i) * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
|
||||
events: [
|
||||
{ time: '14:35:22', type: '快速拉升', change: '+2.3%', description: '5分钟内上涨2.3%' },
|
||||
{ time: '11:28:45', type: '大单买入', amount: '5680万', description: '单笔大单买入' },
|
||||
{ time: '10:15:30', type: '量比异动', ratio: '3.2', description: '量比达到3.2倍' }
|
||||
],
|
||||
count: 3
|
||||
}))
|
||||
},
|
||||
|
||||
// 股权质押
|
||||
pledgeData: {
|
||||
success: true,
|
||||
data: {
|
||||
total_pledged: 25.6, // 质押比例%
|
||||
major_shareholders: [
|
||||
{ name: '中国平安保险集团', pledged_shares: 0, total_shares: 10168542300, pledge_ratio: 0 },
|
||||
{ name: '深圳市投资控股', pledged_shares: 50000000, total_shares: 382456100, pledge_ratio: 13.08 }
|
||||
],
|
||||
update_date: '2024-09-30'
|
||||
}
|
||||
},
|
||||
|
||||
// 市场摘要
|
||||
summaryData: {
|
||||
success: true,
|
||||
data: {
|
||||
current_price: basePrice,
|
||||
change: 0.25,
|
||||
change_pct: 1.89,
|
||||
open: 13.35,
|
||||
high: 13.68,
|
||||
low: 13.28,
|
||||
volume: 345678900,
|
||||
amount: 4678900000,
|
||||
turnover_rate: 1.78,
|
||||
pe_ratio: 4.96,
|
||||
pb_ratio: 0.72,
|
||||
total_market_cap: 262300000000,
|
||||
circulating_market_cap: 262300000000
|
||||
}
|
||||
},
|
||||
|
||||
// 涨停分析
|
||||
riseAnalysisData: {
|
||||
success: true,
|
||||
data: {
|
||||
is_limit_up: false,
|
||||
limit_up_price: basePrice * 1.10,
|
||||
current_price: basePrice,
|
||||
distance_to_limit: 8.92, // %
|
||||
consecutive_days: 0,
|
||||
reason: '',
|
||||
concept_tags: ['银行', '深圳国资', 'MSCI', '沪深300']
|
||||
}
|
||||
},
|
||||
|
||||
// 最新分时数据
|
||||
latestMinuteData: {
|
||||
success: true,
|
||||
data: Array(240).fill(null).map((_, i) => {
|
||||
const minute = 9 * 60 + 30 + i; // 从9:30开始
|
||||
const hour = Math.floor(minute / 60);
|
||||
const min = minute % 60;
|
||||
const time = `${hour.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}`;
|
||||
const randomChange = (Math.random() - 0.5) * 0.1;
|
||||
return {
|
||||
time,
|
||||
price: (basePrice + randomChange).toFixed(2),
|
||||
volume: Math.floor(Math.random() * 2000000) + 500000,
|
||||
avg_price: (basePrice + randomChange * 0.8).toFixed(2)
|
||||
};
|
||||
}),
|
||||
code: stockCode,
|
||||
name: stockCode === '000001' ? '平安银行' : '示例股票',
|
||||
trade_date: new Date().toISOString().split('T')[0],
|
||||
type: 'minute'
|
||||
}
|
||||
};
|
||||
};
|
||||
@@ -136,7 +136,9 @@ export const authHandlers = [
|
||||
});
|
||||
|
||||
// 模拟微信授权 URL(实际是微信的 URL)
|
||||
const authUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=mock&redirect_uri=&response_type=code&scope=snsapi_login&state=${sessionId}#wechat_redirect`;
|
||||
// 使用真实的微信 AppID 和真实的授权回调地址(必须与微信开放平台配置的域名一致)
|
||||
const mockRedirectUri = encodeURIComponent('http://valuefrontier.cn/api/auth/wechat/callback');
|
||||
const authUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=wxa8d74c47041b5f87&redirect_uri=${mockRedirectUri}&response_type=code&scope=snsapi_login&state=${sessionId}#wechat_redirect`;
|
||||
|
||||
console.log('[Mock] 生成微信二维码:', { sessionId, authUrl });
|
||||
|
||||
@@ -147,16 +149,16 @@ export const authHandlers = [
|
||||
session.status = 'scanned';
|
||||
console.log(`[Mock] 模拟用户扫码: ${sessionId}`);
|
||||
|
||||
// 再过2秒自动确认登录
|
||||
// 再过5秒自动确认登录(延长时间让用户看到 scanned 状态)
|
||||
setTimeout(() => {
|
||||
const session2 = mockWechatSessions.get(sessionId);
|
||||
if (session2 && session2.status === 'scanned') {
|
||||
session2.status = 'confirmed';
|
||||
session2.status = 'authorized'; // ✅ 使用 'authorized' 状态,与后端保持一致
|
||||
session2.user = {
|
||||
id: 999,
|
||||
nickname: '微信用户',
|
||||
wechat_openid: 'mock_openid_' + sessionId,
|
||||
avatar_url: 'https://i.pravatar.cc/150?img=99',
|
||||
avatar_url: 'https://ui-avatars.com/api/?name=微信用户&size=150&background=4299e1&color=fff',
|
||||
phone: null,
|
||||
email: null,
|
||||
has_wechat: true,
|
||||
@@ -168,6 +170,7 @@ export const authHandlers = [
|
||||
is_subscription_active: true,
|
||||
subscription_days_left: 0
|
||||
};
|
||||
session2.user_info = { user_id: session2.user.id }; // ✅ 添加 user_info 字段
|
||||
console.log(`[Mock] 模拟用户确认登录: ${sessionId}`, session2.user);
|
||||
}
|
||||
}, 2000);
|
||||
@@ -185,7 +188,7 @@ export const authHandlers = [
|
||||
}),
|
||||
|
||||
// 4. 检查微信扫码状态
|
||||
http.post('/api/auth/wechat/check-status', async ({ request }) => {
|
||||
http.post('/api/auth/wechat/check', async ({ request }) => {
|
||||
await delay(200); // 轮询请求,延迟短一些
|
||||
|
||||
const body = await request.json();
|
||||
@@ -209,18 +212,16 @@ export const authHandlers = [
|
||||
|
||||
console.log('[Mock] 检查微信状态:', { session_id, status: session.status });
|
||||
|
||||
// ✅ 返回与后端真实 API 一致的扁平化数据结构
|
||||
return HttpResponse.json({
|
||||
code: 0,
|
||||
message: '成功',
|
||||
data: {
|
||||
status: session.status,
|
||||
user: session.user
|
||||
}
|
||||
status: session.status,
|
||||
user_info: session.user_info,
|
||||
expires_in: Math.floor((session.createdAt + 5 * 60 * 1000 - Date.now()) / 1000)
|
||||
});
|
||||
}),
|
||||
|
||||
// 5. 微信登录确认
|
||||
http.post('/api/auth/wechat/login', async ({ request }) => {
|
||||
http.post('/api/auth/login/wechat', async ({ request }) => {
|
||||
await delay(NETWORK_DELAY);
|
||||
|
||||
const body = await request.json();
|
||||
@@ -228,7 +229,7 @@ export const authHandlers = [
|
||||
|
||||
const session = mockWechatSessions.get(session_id);
|
||||
|
||||
if (!session || session.status !== 'confirmed') {
|
||||
if (!session || session.status !== 'authorized') { // ✅ 使用 'authorized' 状态,与前端保持一致
|
||||
return HttpResponse.json({
|
||||
success: false,
|
||||
error: '微信登录未确认或已过期'
|
||||
@@ -386,12 +387,12 @@ if (process.env.NODE_ENV === 'development' || process.env.REACT_APP_ENABLE_MOCK
|
||||
setTimeout(() => {
|
||||
const session2 = mockWechatSessions.get(targetSessionId);
|
||||
if (session2 && session2.status === 'scanned') {
|
||||
session2.status = 'confirmed';
|
||||
session2.status = 'authorized'; // ✅ 使用 'authorized' 状态,与自动扫码流程保持一致
|
||||
session2.user = {
|
||||
id: 999,
|
||||
nickname: '微信测试用户',
|
||||
wechat_openid: 'mock_openid_' + targetSessionId,
|
||||
avatar_url: 'https://i.pravatar.cc/150?img=99',
|
||||
avatar_url: 'https://ui-avatars.com/api/?name=微信测试用户&size=150&background=4299e1&color=fff',
|
||||
phone: null,
|
||||
email: null,
|
||||
has_wechat: true,
|
||||
@@ -402,6 +403,7 @@ if (process.env.NODE_ENV === 'development' || process.env.REACT_APP_ENABLE_MOCK
|
||||
is_subscription_active: true,
|
||||
subscription_days_left: 0
|
||||
};
|
||||
session2.user_info = { user_id: session2.user.id }; // ✅ 添加 user_info 字段
|
||||
console.log(`[Mock API] ✅ 模拟确认登录: ${targetSessionId}`, session2.user);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
215
src/mocks/handlers/company.js
Normal file
215
src/mocks/handlers/company.js
Normal file
@@ -0,0 +1,215 @@
|
||||
// src/mocks/handlers/company.js
|
||||
// 公司相关的 Mock Handlers
|
||||
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { PINGAN_BANK_DATA, generateCompanyData } from '../data/company';
|
||||
|
||||
// 模拟延迟
|
||||
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
// 获取公司数据的辅助函数
|
||||
const getCompanyData = (stockCode) => {
|
||||
return stockCode === '000001' ? PINGAN_BANK_DATA : generateCompanyData(stockCode, '示例公司');
|
||||
};
|
||||
|
||||
export const companyHandlers = [
|
||||
// 1. 综合分析
|
||||
http.get('/api/company/comprehensive-analysis/:stockCode', async ({ params }) => {
|
||||
await delay(300);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.comprehensiveAnalysis
|
||||
});
|
||||
}),
|
||||
|
||||
// 2. 价值链分析
|
||||
http.get('/api/company/value-chain-analysis/:stockCode', async ({ params }) => {
|
||||
await delay(250);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.valueChainAnalysis
|
||||
});
|
||||
}),
|
||||
|
||||
// 3. 关键因素时间线
|
||||
http.get('/api/company/key-factors-timeline/:stockCode', async ({ params }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: {
|
||||
timeline: data.keyFactorsTimeline,
|
||||
total: data.keyFactorsTimeline.length
|
||||
}
|
||||
});
|
||||
}),
|
||||
|
||||
// 4. 基本信息
|
||||
http.get('/api/stock/:stockCode/basic-info', async ({ params }) => {
|
||||
await delay(150);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.basicInfo
|
||||
});
|
||||
}),
|
||||
|
||||
// 5. 实际控制人
|
||||
http.get('/api/stock/:stockCode/actual-control', async ({ params }) => {
|
||||
await delay(150);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.actualControl
|
||||
});
|
||||
}),
|
||||
|
||||
// 6. 股权集中度
|
||||
http.get('/api/stock/:stockCode/concentration', async ({ params }) => {
|
||||
await delay(150);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.concentration
|
||||
});
|
||||
}),
|
||||
|
||||
// 7. 高管信息
|
||||
http.get('/api/stock/:stockCode/management', async ({ params, request }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
|
||||
// 解析查询参数
|
||||
const url = new URL(request.url);
|
||||
const activeOnly = url.searchParams.get('active_only') === 'true';
|
||||
|
||||
let management = data.management || [];
|
||||
|
||||
// 如果需要只返回在职高管(mock 数据中默认都是在职)
|
||||
if (activeOnly) {
|
||||
management = management.filter(m => m.status !== 'resigned');
|
||||
}
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: management // 直接返回数组
|
||||
});
|
||||
}),
|
||||
|
||||
// 8. 十大流通股东
|
||||
http.get('/api/stock/:stockCode/top-circulation-shareholders', async ({ params, request }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
|
||||
// 解析查询参数
|
||||
const url = new URL(request.url);
|
||||
const limit = parseInt(url.searchParams.get('limit') || '10', 10);
|
||||
|
||||
const shareholders = (data.topCirculationShareholders || []).slice(0, limit);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: shareholders // 直接返回数组
|
||||
});
|
||||
}),
|
||||
|
||||
// 9. 十大股东
|
||||
http.get('/api/stock/:stockCode/top-shareholders', async ({ params, request }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
|
||||
// 解析查询参数
|
||||
const url = new URL(request.url);
|
||||
const limit = parseInt(url.searchParams.get('limit') || '10', 10);
|
||||
|
||||
const shareholders = (data.topShareholders || []).slice(0, limit);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: shareholders // 直接返回数组
|
||||
});
|
||||
}),
|
||||
|
||||
// 10. 分支机构
|
||||
http.get('/api/stock/:stockCode/branches', async ({ params }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.branches || [] // 直接返回数组
|
||||
});
|
||||
}),
|
||||
|
||||
// 11. 公告列表
|
||||
http.get('/api/stock/:stockCode/announcements', async ({ params, request }) => {
|
||||
await delay(250);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
|
||||
// 解析查询参数
|
||||
const url = new URL(request.url);
|
||||
const limit = parseInt(url.searchParams.get('limit') || '20', 10);
|
||||
const page = parseInt(url.searchParams.get('page') || '1', 10);
|
||||
const type = url.searchParams.get('type');
|
||||
|
||||
let announcements = data.announcements || [];
|
||||
|
||||
// 类型筛选
|
||||
if (type) {
|
||||
announcements = announcements.filter(a => a.type === type);
|
||||
}
|
||||
|
||||
// 分页
|
||||
const start = (page - 1) * limit;
|
||||
const end = start + limit;
|
||||
const paginatedAnnouncements = announcements.slice(start, end);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: paginatedAnnouncements // 直接返回数组
|
||||
});
|
||||
}),
|
||||
|
||||
// 12. 披露时间表
|
||||
http.get('/api/stock/:stockCode/disclosure-schedule', async ({ params }) => {
|
||||
await delay(150);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.disclosureSchedule || [] // 直接返回数组
|
||||
});
|
||||
}),
|
||||
|
||||
// 13. 盈利预测报告
|
||||
http.get('/api/stock/:stockCode/forecast-report', async ({ params }) => {
|
||||
await delay(300);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.forecastReport || null
|
||||
});
|
||||
}),
|
||||
];
|
||||
376
src/mocks/handlers/concept.js
Normal file
376
src/mocks/handlers/concept.js
Normal file
@@ -0,0 +1,376 @@
|
||||
// src/mocks/handlers/concept.js
|
||||
// 概念相关的 Mock Handlers
|
||||
|
||||
import { http, HttpResponse } from 'msw';
|
||||
|
||||
// 模拟延迟
|
||||
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
// 生成热门概念数据
|
||||
const generatePopularConcepts = (size = 20) => {
|
||||
const concepts = [
|
||||
'人工智能', '新能源汽车', '半导体', '光伏', '锂电池',
|
||||
'储能', '氢能源', '风电', '特高压', '工业母机',
|
||||
'军工', '航空航天', '卫星导航', '量子科技', '数字货币',
|
||||
'云计算', '大数据', '物联网', '5G', '6G',
|
||||
'元宇宙', '虚拟现实', 'AIGC', 'ChatGPT', '算力',
|
||||
'芯片设计', '芯片制造', '半导体设备', '半导体材料', 'EDA',
|
||||
'新能源', '风光储', '充电桩', '智能电网', '特斯拉',
|
||||
'比亚迪', '宁德时代', '华为', '苹果产业链', '鸿蒙',
|
||||
'国产软件', '信创', '网络安全', '数据安全', '量子通信',
|
||||
'医疗器械', '创新药', '医美', 'CXO', '生物医药',
|
||||
'疫苗', '中药', '医疗信息化', '智慧医疗', '基因测序'
|
||||
];
|
||||
|
||||
const results = [];
|
||||
for (let i = 0; i < Math.min(size, concepts.length); i++) {
|
||||
const changePct = (Math.random() * 12 - 2).toFixed(2); // -2% 到 +10%
|
||||
const stockCount = Math.floor(Math.random() * 50) + 10; // 10-60 只股票
|
||||
|
||||
results.push({
|
||||
concept: concepts[i],
|
||||
concept_id: `CONCEPT_${1000 + i}`,
|
||||
stock_count: stockCount,
|
||||
price_info: {
|
||||
avg_change_pct: parseFloat(changePct),
|
||||
avg_price: (Math.random() * 100 + 10).toFixed(2),
|
||||
total_market_cap: (Math.random() * 1000 + 100).toFixed(2)
|
||||
},
|
||||
description: `${concepts[i]}相关概念股`,
|
||||
hot_score: Math.floor(Math.random() * 100)
|
||||
});
|
||||
}
|
||||
|
||||
// 按涨跌幅降序排序
|
||||
results.sort((a, b) => b.price_info.avg_change_pct - a.price_info.avg_change_pct);
|
||||
|
||||
return results;
|
||||
};
|
||||
|
||||
// 概念相关的 Handlers
|
||||
export const conceptHandlers = [
|
||||
// 搜索概念(热门概念)
|
||||
http.post('/concept-api/search', async ({ request }) => {
|
||||
await delay(300);
|
||||
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { query = '', size = 20, page = 1, sort_by = 'change_pct' } = body;
|
||||
|
||||
console.log('[Mock Concept] 搜索概念:', { query, size, page, sort_by });
|
||||
|
||||
// 生成数据
|
||||
let results = generatePopularConcepts(size);
|
||||
|
||||
// 如果有查询关键词,过滤结果
|
||||
if (query) {
|
||||
results = results.filter(item =>
|
||||
item.concept.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
// 根据排序字段排序
|
||||
if (sort_by === 'change_pct') {
|
||||
results.sort((a, b) => b.price_info.avg_change_pct - a.price_info.avg_change_pct);
|
||||
} else if (sort_by === 'stock_count') {
|
||||
results.sort((a, b) => b.stock_count - a.stock_count);
|
||||
} else if (sort_by === 'hot_score') {
|
||||
results.sort((a, b) => b.hot_score - a.hot_score);
|
||||
}
|
||||
|
||||
return HttpResponse.json({
|
||||
results,
|
||||
total: results.length,
|
||||
page,
|
||||
size,
|
||||
message: '搜索成功'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[Mock Concept] 搜索概念失败:', error);
|
||||
return HttpResponse.json(
|
||||
{
|
||||
results: [],
|
||||
total: 0,
|
||||
error: '搜索失败'
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}),
|
||||
|
||||
// 获取单个概念详情
|
||||
http.get('/concept-api/concepts/:conceptId', async ({ params }) => {
|
||||
await delay(300);
|
||||
|
||||
const { conceptId } = params;
|
||||
console.log('[Mock Concept] 获取概念详情:', conceptId);
|
||||
|
||||
const concepts = generatePopularConcepts(50);
|
||||
const concept = concepts.find(c => c.concept_id === conceptId || c.concept === conceptId);
|
||||
|
||||
if (concept) {
|
||||
return HttpResponse.json({
|
||||
...concept,
|
||||
related_stocks: [
|
||||
{ stock_code: '600519', stock_name: '贵州茅台', change_pct: 2.34 },
|
||||
{ stock_code: '000858', stock_name: '五粮液', change_pct: 1.89 },
|
||||
{ stock_code: '000568', stock_name: '泸州老窖', change_pct: 3.12 }
|
||||
],
|
||||
news: [
|
||||
{ title: `${concept.concept}板块异动`, date: '2024-10-24', source: '财经新闻' }
|
||||
]
|
||||
});
|
||||
} else {
|
||||
return HttpResponse.json(
|
||||
{ error: '概念不存在' },
|
||||
{ status: 404 }
|
||||
);
|
||||
}
|
||||
}),
|
||||
|
||||
// 获取概念相关股票
|
||||
http.get('/concept-api/concepts/:conceptId/stocks', async ({ params, request }) => {
|
||||
await delay(300);
|
||||
|
||||
const { conceptId } = params;
|
||||
const url = new URL(request.url);
|
||||
const limit = parseInt(url.searchParams.get('limit') || '20');
|
||||
|
||||
console.log('[Mock Concept] 获取概念相关股票:', { conceptId, limit });
|
||||
|
||||
// 生成模拟股票数据
|
||||
const stocks = [];
|
||||
for (let i = 0; i < limit; i++) {
|
||||
stocks.push({
|
||||
stock_code: `${600000 + i}`,
|
||||
stock_name: `股票${i + 1}`,
|
||||
change_pct: (Math.random() * 10 - 2).toFixed(2),
|
||||
price: (Math.random() * 100 + 10).toFixed(2),
|
||||
market_cap: (Math.random() * 1000 + 100).toFixed(2)
|
||||
});
|
||||
}
|
||||
|
||||
return HttpResponse.json({
|
||||
stocks,
|
||||
total: stocks.length,
|
||||
concept_id: conceptId
|
||||
});
|
||||
}),
|
||||
|
||||
// 获取最新交易日期
|
||||
http.get('http://111.198.58.126:16801/price/latest', async () => {
|
||||
await delay(200);
|
||||
|
||||
const today = new Date();
|
||||
const dateStr = today.toISOString().split('T')[0].replace(/-/g, '');
|
||||
|
||||
console.log('[Mock Concept] 获取最新交易日期:', dateStr);
|
||||
|
||||
return HttpResponse.json({
|
||||
latest_date: dateStr,
|
||||
timestamp: today.toISOString()
|
||||
});
|
||||
}),
|
||||
|
||||
// 搜索概念(硬编码 URL)
|
||||
http.post('http://111.198.58.126:16801/search', async ({ request }) => {
|
||||
await delay(300);
|
||||
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { query = '', size = 20, page = 1, sort_by = 'change_pct' } = body;
|
||||
|
||||
console.log('[Mock Concept] 搜索概念 (硬编码URL):', { query, size, page, sort_by });
|
||||
|
||||
let results = generatePopularConcepts(size);
|
||||
|
||||
if (query) {
|
||||
results = results.filter(item =>
|
||||
item.concept.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
if (sort_by === 'change_pct') {
|
||||
results.sort((a, b) => b.price_info.avg_change_pct - a.price_info.avg_change_pct);
|
||||
} else if (sort_by === 'stock_count') {
|
||||
results.sort((a, b) => b.stock_count - a.stock_count);
|
||||
} else if (sort_by === 'hot_score') {
|
||||
results.sort((a, b) => b.hot_score - a.hot_score);
|
||||
}
|
||||
|
||||
return HttpResponse.json({
|
||||
results,
|
||||
total: results.length,
|
||||
page,
|
||||
size,
|
||||
message: '搜索成功'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[Mock Concept] 搜索失败:', error);
|
||||
return HttpResponse.json(
|
||||
{ results: [], total: 0, error: '搜索失败' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}),
|
||||
|
||||
// 获取统计数据
|
||||
http.get('http://111.198.58.126:16801/statistics', async ({ request }) => {
|
||||
await delay(300);
|
||||
|
||||
const url = new URL(request.url);
|
||||
const minStockCount = parseInt(url.searchParams.get('min_stock_count') || '3');
|
||||
const days = parseInt(url.searchParams.get('days') || '7');
|
||||
|
||||
console.log('[Mock Concept] 获取统计数据:', { minStockCount, days });
|
||||
|
||||
return HttpResponse.json({
|
||||
total_concepts: 150,
|
||||
active_concepts: 120,
|
||||
avg_stock_count: 25,
|
||||
top_concepts: generatePopularConcepts(10),
|
||||
min_stock_count: minStockCount,
|
||||
days: days,
|
||||
updated_at: new Date().toISOString()
|
||||
});
|
||||
}),
|
||||
|
||||
// 获取概念价格时间序列
|
||||
http.get('http://111.198.58.126:16801/concept/:conceptId/price-timeseries', async ({ params, request }) => {
|
||||
await delay(300);
|
||||
|
||||
const { conceptId } = params;
|
||||
const url = new URL(request.url);
|
||||
const startDate = url.searchParams.get('start_date');
|
||||
const endDate = url.searchParams.get('end_date');
|
||||
|
||||
console.log('[Mock Concept] 获取价格时间序列:', { conceptId, startDate, endDate });
|
||||
|
||||
// 生成时间序列数据
|
||||
const timeseries = [];
|
||||
const start = new Date(startDate || '2024-01-01');
|
||||
const end = new Date(endDate || new Date());
|
||||
const daysDiff = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
|
||||
|
||||
for (let i = 0; i <= daysDiff; i++) {
|
||||
const date = new Date(start);
|
||||
date.setDate(date.getDate() + i);
|
||||
|
||||
// 跳过周末
|
||||
if (date.getDay() !== 0 && date.getDay() !== 6) {
|
||||
timeseries.push({
|
||||
trade_date: date.toISOString().split('T')[0], // 改为 trade_date
|
||||
avg_change_pct: parseFloat((Math.random() * 8 - 2).toFixed(2)), // 转为数值
|
||||
stock_count: Math.floor(Math.random() * 30) + 10,
|
||||
volume: Math.floor(Math.random() * 1000000000)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return HttpResponse.json({
|
||||
concept_id: conceptId,
|
||||
timeseries: timeseries,
|
||||
start_date: startDate,
|
||||
end_date: endDate
|
||||
});
|
||||
}),
|
||||
|
||||
// 获取概念相关新闻 (search_china_news)
|
||||
http.get('http://111.198.58.126:21891/search_china_news', async ({ request }) => {
|
||||
await delay(300);
|
||||
|
||||
const url = new URL(request.url);
|
||||
const query = url.searchParams.get('query');
|
||||
const exactMatch = url.searchParams.get('exact_match');
|
||||
const startDate = url.searchParams.get('start_date');
|
||||
const endDate = url.searchParams.get('end_date');
|
||||
const topK = parseInt(url.searchParams.get('top_k') || '100');
|
||||
|
||||
console.log('[Mock Concept] 搜索中国新闻:', { query, exactMatch, startDate, endDate, topK });
|
||||
|
||||
// 生成新闻数据
|
||||
const news = [];
|
||||
const newsCount = Math.min(topK, Math.floor(Math.random() * 15) + 5); // 5-20 条新闻
|
||||
|
||||
for (let i = 0; i < newsCount; i++) {
|
||||
const daysAgo = Math.floor(Math.random() * 100); // 0-100 天前
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() - daysAgo);
|
||||
|
||||
const hour = Math.floor(Math.random() * 24);
|
||||
const minute = Math.floor(Math.random() * 60);
|
||||
const publishedTime = `${date.toISOString().split('T')[0]} ${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:00`;
|
||||
|
||||
news.push({
|
||||
id: `news_${i}`,
|
||||
title: `${query || '概念'}板块动态:${['利好政策发布', '行业景气度提升', '龙头企业业绩超预期', '技术突破进展', '市场需求旺盛'][i % 5]}`,
|
||||
detail: `${query || '概念'}相关新闻详细内容。近期${query || '概念'}板块表现活跃,市场关注度持续上升。多家券商研报指出,${query || '概念'}行业前景广阔,建议重点关注龙头企业投资机会。`,
|
||||
description: `${query || '概念'}板块最新动态摘要...`,
|
||||
source: ['新浪财经', '东方财富网', '财联社', '证券时报', '中国证券报', '上海证券报'][Math.floor(Math.random() * 6)],
|
||||
published_time: publishedTime,
|
||||
url: `https://finance.sina.com.cn/stock/news/${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}/news_${i}.html`
|
||||
});
|
||||
}
|
||||
|
||||
// 按时间降序排序
|
||||
news.sort((a, b) => new Date(b.published_time) - new Date(a.published_time));
|
||||
|
||||
// 返回数组(不是对象)
|
||||
return HttpResponse.json(news);
|
||||
}),
|
||||
|
||||
// 获取概念相关研报 (search)
|
||||
http.get('http://111.198.58.126:8811/search', async ({ request }) => {
|
||||
await delay(300);
|
||||
|
||||
const url = new URL(request.url);
|
||||
const query = url.searchParams.get('query');
|
||||
const mode = url.searchParams.get('mode');
|
||||
const exactMatch = url.searchParams.get('exact_match');
|
||||
const size = parseInt(url.searchParams.get('size') || '30');
|
||||
const startDate = url.searchParams.get('start_date');
|
||||
|
||||
console.log('[Mock Concept] 搜索研报:', { query, mode, exactMatch, size, startDate });
|
||||
|
||||
// 生成研报数据
|
||||
const reports = [];
|
||||
const reportCount = Math.min(size, Math.floor(Math.random() * 10) + 3); // 3-12 份研报
|
||||
|
||||
const publishers = ['中信证券', '国泰君安', '华泰证券', '招商证券', '海通证券', '广发证券', '申万宏源', '兴业证券'];
|
||||
const authors = ['张明', '李华', '王强', '刘洋', '陈杰', '赵敏'];
|
||||
const ratings = ['买入', '增持', '中性', '减持', '强烈推荐'];
|
||||
const securityNames = ['行业研究', '公司研究', '策略研究', '宏观研究', '固收研究'];
|
||||
|
||||
for (let i = 0; i < reportCount; i++) {
|
||||
const daysAgo = Math.floor(Math.random() * 100); // 0-100 天前
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() - daysAgo);
|
||||
|
||||
const declareDate = `${date.toISOString().split('T')[0]} ${String(Math.floor(Math.random() * 24)).padStart(2, '0')}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}:00`;
|
||||
|
||||
reports.push({
|
||||
id: `report_${i}`,
|
||||
report_title: `${query || '概念'}行业${['深度研究报告', '投资策略分析', '行业景气度跟踪', '估值分析报告', '竞争格局研究'][i % 5]}`,
|
||||
content: `${query || '概念'}行业研究报告内容摘要。\n\n核心观点:\n1. ${query || '概念'}行业景气度持续向好,市场规模预计将保持高速增长。\n2. 龙头企业凭借技术优势和规模效应,市场份额有望进一步提升。\n3. 政策支持力度加大,为行业发展提供有力保障。\n\n投资建议:建议重点关注行业龙头企业,给予"${ratings[Math.floor(Math.random() * ratings.length)]}"评级。`,
|
||||
abstract: `本报告深入分析了${query || '概念'}行业的发展趋势、竞争格局和投资机会,认为行业具备良好的成长性...`,
|
||||
publisher: publishers[Math.floor(Math.random() * publishers.length)],
|
||||
author: authors[Math.floor(Math.random() * authors.length)],
|
||||
declare_date: declareDate,
|
||||
rating: ratings[Math.floor(Math.random() * ratings.length)],
|
||||
security_name: securityNames[Math.floor(Math.random() * securityNames.length)],
|
||||
content_url: `https://pdf.dfcfw.com/pdf/H3_${1000000 + i}_1_${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}.pdf`
|
||||
});
|
||||
}
|
||||
|
||||
// 按时间降序排序
|
||||
reports.sort((a, b) => new Date(b.declare_date) - new Date(a.declare_date));
|
||||
|
||||
// 返回符合组件期望的格式
|
||||
return HttpResponse.json({
|
||||
results: reports,
|
||||
total: reports.length,
|
||||
query: query,
|
||||
mode: mode
|
||||
});
|
||||
})
|
||||
];
|
||||
@@ -2,13 +2,117 @@
|
||||
// 事件相关的 Mock API Handlers
|
||||
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { getEventRelatedStocks } from '../data/events';
|
||||
import { getEventRelatedStocks, generateMockEvents, generateHotEvents, generatePopularKeywords } from '../data/events';
|
||||
import { getMockFutureEvents, getMockEventCountsForMonth } from '../data/account';
|
||||
|
||||
// 模拟网络延迟
|
||||
const delay = (ms = 300) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
export const eventHandlers = [
|
||||
// ==================== 事件列表相关 ====================
|
||||
|
||||
// 获取事件列表
|
||||
http.get('/api/events/', async ({ request }) => {
|
||||
await delay(500);
|
||||
|
||||
const url = new URL(request.url);
|
||||
const params = {
|
||||
page: parseInt(url.searchParams.get('page') || '1'),
|
||||
per_page: parseInt(url.searchParams.get('per_page') || '10'),
|
||||
sort: url.searchParams.get('sort') || 'new',
|
||||
importance: url.searchParams.get('importance') || 'all',
|
||||
date_range: url.searchParams.get('date_range') || '',
|
||||
q: url.searchParams.get('q') || '',
|
||||
industry_code: url.searchParams.get('industry_code') || '',
|
||||
industry_classification: url.searchParams.get('industry_classification') || '',
|
||||
stock_code: url.searchParams.get('stock_code') || '',
|
||||
};
|
||||
|
||||
console.log('[Mock] 获取事件列表:', params);
|
||||
|
||||
try {
|
||||
const result = generateMockEvents(params);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: result,
|
||||
message: '获取成功'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[Mock] 获取事件列表失败:', error);
|
||||
return HttpResponse.json(
|
||||
{
|
||||
success: false,
|
||||
error: '获取事件列表失败',
|
||||
data: { events: [], pagination: {} }
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}),
|
||||
|
||||
// 获取热点事件
|
||||
http.get('/api/events/hot', async ({ request }) => {
|
||||
await delay(300);
|
||||
|
||||
const url = new URL(request.url);
|
||||
const limit = parseInt(url.searchParams.get('limit') || '5');
|
||||
|
||||
console.log('[Mock] 获取热点事件, limit:', limit);
|
||||
|
||||
try {
|
||||
const hotEvents = generateHotEvents(limit);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: hotEvents,
|
||||
message: '获取成功'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[Mock] 获取热点事件失败:', error);
|
||||
return HttpResponse.json(
|
||||
{
|
||||
success: false,
|
||||
error: '获取热点事件失败',
|
||||
data: []
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}),
|
||||
|
||||
// 获取热门关键词
|
||||
http.get('/api/events/keywords/popular', async ({ request }) => {
|
||||
await delay(300);
|
||||
|
||||
const url = new URL(request.url);
|
||||
const limit = parseInt(url.searchParams.get('limit') || '20');
|
||||
|
||||
console.log('[Mock] 获取热门关键词, limit:', limit);
|
||||
|
||||
try {
|
||||
const keywords = generatePopularKeywords(limit);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: keywords,
|
||||
message: '获取成功'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[Mock] 获取热门关键词失败:', error);
|
||||
return HttpResponse.json(
|
||||
{
|
||||
success: false,
|
||||
error: '获取热门关键词失败',
|
||||
data: []
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}),
|
||||
|
||||
// ==================== 事件详情相关 ====================
|
||||
|
||||
// 获取事件相关股票
|
||||
http.get('/api/events/:eventId/stocks', async ({ params }) => {
|
||||
await delay(300);
|
||||
@@ -317,7 +421,8 @@ export const eventHandlers = [
|
||||
transmission_mechanism: {
|
||||
data: [
|
||||
{
|
||||
author: "中国电子信息产业发展研究院",
|
||||
author: "李明",
|
||||
organization: "中国电子信息产业发展研究院",
|
||||
sentences: "在技术突破和应用场景快速扩张的双重驱动下,国内半导体市场呈现爆发式增长态势。据统计,2024年上半年半导体市场规模达到1.2万亿元,同比增长32%,其中新能源汽车和AI算力芯片需求贡献了超过60%的增量",
|
||||
query_part: "技术突破和需求激增推动半导体市场增长32%",
|
||||
match_score: "好",
|
||||
@@ -336,7 +441,8 @@ export const eventHandlers = [
|
||||
transmission_mechanism: {
|
||||
data: [
|
||||
{
|
||||
author: "经济观察报",
|
||||
author: "张华",
|
||||
organization: "经济观察报",
|
||||
sentences: "随着半导体等高科技产业获得大量政策和资金支持,传统制造业面临融资难、用工成本上升等多重压力。部分劳动密集型企业利润率下降15%,行业整体投资意愿降低",
|
||||
query_part: "资源向高科技倾斜导致传统制造业承压",
|
||||
match_score: "好",
|
||||
@@ -355,7 +461,8 @@ export const eventHandlers = [
|
||||
transmission_mechanism: {
|
||||
data: [
|
||||
{
|
||||
author: "能源研究所",
|
||||
author: "王刚",
|
||||
organization: "能源研究所",
|
||||
sentences: "半导体产业扩张带来电力需求增长约8%,但同时推动节能技术应用,整体能源消费结构趋于优化。新建芯片工厂虽增加用电负荷,但智能电网技术应用使能源利用效率提升12%",
|
||||
query_part: "半导体产业对能源行业影响相对中性",
|
||||
match_score: "中",
|
||||
@@ -374,7 +481,8 @@ export const eventHandlers = [
|
||||
transmission_mechanism: {
|
||||
data: [
|
||||
{
|
||||
author: "教育部职业教育司",
|
||||
author: "赵敏",
|
||||
organization: "教育部职业教育司",
|
||||
sentences: "半导体产业快速发展催生大量专业人才需求,各类培训机构、职业院校纷纷开设相关课程。预计未来三年将新增半导体专业学员超过50万人,带动职业教育市场规模扩大",
|
||||
query_part: "半导体产业推动职业教育发展",
|
||||
match_score: "好",
|
||||
@@ -409,7 +517,8 @@ export const eventHandlers = [
|
||||
transmission_mechanism: {
|
||||
data: [
|
||||
{
|
||||
author: "中国半导体行业协会",
|
||||
author: "刘洋",
|
||||
organization: "中国半导体行业协会",
|
||||
sentences: "受益于新能源汽车、5G通信等新兴应用领域的爆发式增长,国内半导体市场需求持续旺盛,2024年Q1市场规模同比增长28%,创历史新高",
|
||||
query_part: "新兴应用推动半导体需求增长28%",
|
||||
match_score: "好",
|
||||
@@ -417,7 +526,8 @@ export const eventHandlers = [
|
||||
report_title: "2024年Q1中国半导体行业景气度报告"
|
||||
},
|
||||
{
|
||||
author: "中国半导体行业协会",
|
||||
author: "刘洋",
|
||||
organization: "中国半导体行业协会",
|
||||
sentences: "受益于新能源汽车、5G通信等新兴应用领域的爆发式增长,国内半导体市场需求持续旺盛,2024年Q1市场规模同比增长28%,创历史新高",
|
||||
query_part: "新兴应用推动半导体需求增长28%",
|
||||
match_score: "好",
|
||||
@@ -458,6 +568,7 @@ export const eventHandlers = [
|
||||
data: [
|
||||
{
|
||||
author: "张明",
|
||||
organization: "中信证券",
|
||||
sentences: "在半导体行业景气度持续提升的背景下,下游芯片制造企业订单饱满,产能利用率达到历史新高,预计2024年产能扩张将达到30%以上,技术工艺也将从28nm向14nm升级",
|
||||
query_part: "半导体行业繁荣带动芯片制造产能扩张30%",
|
||||
match_score: "好",
|
||||
@@ -466,6 +577,7 @@ export const eventHandlers = [
|
||||
},
|
||||
{
|
||||
author: "李华",
|
||||
organization: "海通证券",
|
||||
sentences: "芯片制造环节作为半导体产业链核心,受益于上游材料供应稳定和下游应用需求旺盛,技术迭代速度明显加快,先进制程占比持续提升",
|
||||
query_part: "技术迭代加快,先进制程占比提升",
|
||||
match_score: "好",
|
||||
@@ -531,6 +643,7 @@ export const eventHandlers = [
|
||||
data: [
|
||||
{
|
||||
author: "王芳",
|
||||
organization: "国泰君安",
|
||||
sentences: "A公司作为国内芯片制造龙头企业,在手订单已排至2024年Q4,预计全年营收增长45%,净利润增长60%以上。公司28nm及以下先进制程产能占比已达到40%,技术实力行业领先",
|
||||
query_part: "A公司在手订单充足,预计营收增长45%",
|
||||
match_score: "好",
|
||||
@@ -550,6 +663,7 @@ export const eventHandlers = [
|
||||
data: [
|
||||
{
|
||||
author: "赵强",
|
||||
organization: "华泰证券",
|
||||
sentences: "随着芯片制造产能的大规模扩张,上游设备和材料供应商迎来历史性机遇。B公司作为核心配套企业,订单量同比增长55%,产品供不应求,预计2024年营收将突破百亿大关。公司在封装测试领域的市场份额已提升至国内第二位",
|
||||
query_part: "B公司订单增长55%,营收将破百亿",
|
||||
match_score: "好",
|
||||
@@ -557,7 +671,8 @@ export const eventHandlers = [
|
||||
report_title: "B公司跟踪报告:芯片产业链配套龙头崛起"
|
||||
},
|
||||
{
|
||||
author: "国信证券",
|
||||
author: "陈彤",
|
||||
organization: "国信证券",
|
||||
sentences: "B公司深度受益于芯片制造产业链的景气度传导。公司凭借先进的封装技术和完善的产能布局,成功绑定多家头部芯片制造企业,形成稳定的供应关系。随着下游客户产能持续扩张,公司业绩增长确定性强",
|
||||
query_part: "B公司受益产业链景气度,业绩增长确定性强",
|
||||
match_score: "好",
|
||||
@@ -633,6 +748,7 @@ export const eventHandlers = [
|
||||
data: [
|
||||
{
|
||||
author: "赵强",
|
||||
organization: "华泰证券",
|
||||
sentences: "随着芯片制造产能的大规模扩张,上游设备和材料供应商迎来历史性机遇。B公司作为核心配套企业,订单量同比增长55%,产品供不应求,预计2024年营收将突破百亿大关",
|
||||
query_part: "B公司订单增长55%,营收将破百亿",
|
||||
match_score: "好",
|
||||
@@ -807,4 +923,157 @@ export const eventHandlers = [
|
||||
}
|
||||
});
|
||||
}),
|
||||
|
||||
// ==================== 历史事件对比相关 ====================
|
||||
|
||||
// 获取历史事件列表
|
||||
http.get('/api/events/:eventId/historical', async ({ params }) => {
|
||||
await delay(400);
|
||||
|
||||
const { eventId } = params;
|
||||
|
||||
console.log('[Mock] 获取历史事件列表, eventId:', eventId);
|
||||
|
||||
// 生成历史事件数据
|
||||
const generateHistoricalEvents = (count = 5) => {
|
||||
const events = [];
|
||||
const eventTitles = [
|
||||
'芯片产业链政策扶持升级',
|
||||
'新能源汽车销量创历史新高',
|
||||
'人工智能大模型技术突破',
|
||||
'半导体设备国产化加速',
|
||||
'数字经济政策利好发布',
|
||||
'新能源产业链整合提速',
|
||||
'医药创新药获批上市',
|
||||
'5G应用场景扩展',
|
||||
'智能驾驶技术迭代升级',
|
||||
'储能行业景气度上行'
|
||||
];
|
||||
|
||||
const importanceLevels = [1, 2, 3, 4, 5];
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const daysAgo = Math.floor(Math.random() * 180) + 30; // 30-210 天前
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() - daysAgo);
|
||||
|
||||
const importance = importanceLevels[Math.floor(Math.random() * importanceLevels.length)];
|
||||
|
||||
events.push({
|
||||
id: `hist_event_${i + 1}`,
|
||||
title: eventTitles[i % eventTitles.length],
|
||||
description: `${eventTitles[i % eventTitles.length]}的详细描述。该事件对相关产业链产生重要影响,市场关注度高,相关概念股表现活跃。`,
|
||||
date: date.toISOString().split('T')[0],
|
||||
importance: importance,
|
||||
similarity: parseFloat((Math.random() * 0.3 + 0.7).toFixed(2)), // 0.7-1.0
|
||||
impact_sectors: [
|
||||
['半导体', '芯片设计', 'EDA'],
|
||||
['新能源汽车', '锂电池', '充电桩'],
|
||||
['人工智能', '算力', '大模型'],
|
||||
['半导体设备', '国产替代', '集成电路'],
|
||||
['数字经济', '云计算', '大数据']
|
||||
][i % 5],
|
||||
affected_stocks_count: Math.floor(Math.random() * 30) + 10, // 10-40 只股票
|
||||
avg_change_pct: parseFloat((Math.random() * 10 - 2).toFixed(2)), // -2% to +8%
|
||||
created_at: date.toISOString()
|
||||
});
|
||||
}
|
||||
|
||||
// 按日期降序排序
|
||||
return events.sort((a, b) => new Date(b.date) - new Date(a.date));
|
||||
};
|
||||
|
||||
try {
|
||||
const historicalEvents = generateHistoricalEvents(5);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: historicalEvents,
|
||||
total: historicalEvents.length,
|
||||
message: '获取历史事件列表成功'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[Mock] 获取历史事件列表失败:', error);
|
||||
return HttpResponse.json(
|
||||
{
|
||||
success: false,
|
||||
error: '获取历史事件列表失败',
|
||||
data: []
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}),
|
||||
|
||||
// 获取历史事件相关股票
|
||||
http.get('/api/historical-events/:eventId/stocks', async ({ params }) => {
|
||||
await delay(500);
|
||||
|
||||
const { eventId } = params;
|
||||
|
||||
console.log('[Mock] 获取历史事件相关股票, eventId:', eventId);
|
||||
|
||||
// 生成历史事件相关股票数据
|
||||
const generateHistoricalEventStocks = (count = 10) => {
|
||||
const stocks = [];
|
||||
const sectors = ['半导体', '新能源', '医药', '消费电子', '人工智能', '5G通信'];
|
||||
const stockNames = [
|
||||
'中芯国际', '长江存储', '华为海思', '紫光国微', '兆易创新',
|
||||
'宁德时代', '比亚迪', '隆基绿能', '阳光电源', '亿纬锂能',
|
||||
'恒瑞医药', '迈瑞医疗', '药明康德', '泰格医药', '康龙化成',
|
||||
'立讯精密', '歌尔声学', '京东方A', 'TCL科技', '海康威视',
|
||||
'科大讯飞', '商汤科技', '寒武纪', '海光信息', '中兴通讯'
|
||||
];
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const stockCode = `${Math.random() > 0.5 ? '6' : '0'}${String(Math.floor(Math.random() * 100000)).padStart(5, '0')}`;
|
||||
const changePct = (Math.random() * 15 - 3).toFixed(2); // -3% ~ +12%
|
||||
const correlation = (Math.random() * 0.4 + 0.6).toFixed(2); // 0.6 ~ 1.0
|
||||
|
||||
stocks.push({
|
||||
id: `stock_${i}`,
|
||||
stock_code: `${stockCode}.${Math.random() > 0.5 ? 'SH' : 'SZ'}`,
|
||||
stock_name: stockNames[i % stockNames.length],
|
||||
sector: sectors[Math.floor(Math.random() * sectors.length)],
|
||||
correlation: parseFloat(correlation),
|
||||
event_day_change_pct: parseFloat(changePct),
|
||||
relation_desc: {
|
||||
data: [
|
||||
{
|
||||
query_part: `该公司是${sectors[Math.floor(Math.random() * sectors.length)]}行业龙头,受事件影响显著,市场关注度高,订单量同比增长${Math.floor(Math.random() * 50 + 20)}%`,
|
||||
sentences: `根据行业研究报告,该公司在${sectors[Math.floor(Math.random() * sectors.length)]}领域具有核心技术优势,产能利用率达到${Math.floor(Math.random() * 20 + 80)}%,随着事件的深入发展,公司业绩有望持续受益。机构预测未来三年复合增长率将达到${Math.floor(Math.random() * 30 + 15)}%以上`,
|
||||
match_score: correlation > 0.8 ? '好' : (correlation > 0.6 ? '中' : '一般'),
|
||||
author: ['中信证券', '国泰君安', '华泰证券', '招商证券'][Math.floor(Math.random() * 4)],
|
||||
declare_date: new Date(Date.now() - Math.floor(Math.random() * 90) * 24 * 60 * 60 * 1000).toISOString(),
|
||||
report_title: `${stockNames[i % stockNames.length]}深度研究报告`
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 按相关度降序排序
|
||||
return stocks.sort((a, b) => b.correlation - a.correlation);
|
||||
};
|
||||
|
||||
try {
|
||||
const stocks = generateHistoricalEventStocks(15);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: stocks,
|
||||
message: '获取历史事件相关股票成功'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[Mock] 获取历史事件相关股票失败:', error);
|
||||
return HttpResponse.json(
|
||||
{
|
||||
success: false,
|
||||
error: '获取历史事件相关股票失败',
|
||||
data: []
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}),
|
||||
];
|
||||
|
||||
121
src/mocks/handlers/financial.js
Normal file
121
src/mocks/handlers/financial.js
Normal file
@@ -0,0 +1,121 @@
|
||||
// src/mocks/handlers/financial.js
|
||||
// 财务数据相关的 Mock Handlers
|
||||
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { generateFinancialData } from '../data/financial';
|
||||
|
||||
// 模拟延迟
|
||||
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
export const financialHandlers = [
|
||||
// 1. 股票基本信息
|
||||
http.get('/api/financial/stock-info/:stockCode', async ({ params }) => {
|
||||
await delay(150);
|
||||
const { stockCode } = params;
|
||||
const data = generateFinancialData(stockCode);
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.stockInfo
|
||||
});
|
||||
}),
|
||||
|
||||
// 2. 资产负债表
|
||||
http.get('/api/financial/balance-sheet/:stockCode', async ({ params, request }) => {
|
||||
await delay(250);
|
||||
const { stockCode } = params;
|
||||
const url = new URL(request.url);
|
||||
const limit = parseInt(url.searchParams.get('limit') || '4', 10);
|
||||
|
||||
const data = generateFinancialData(stockCode);
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.balanceSheet.slice(0, limit)
|
||||
});
|
||||
}),
|
||||
|
||||
// 3. 利润表
|
||||
http.get('/api/financial/income-statement/:stockCode', async ({ params, request }) => {
|
||||
await delay(250);
|
||||
const { stockCode } = params;
|
||||
const url = new URL(request.url);
|
||||
const limit = parseInt(url.searchParams.get('limit') || '4', 10);
|
||||
|
||||
const data = generateFinancialData(stockCode);
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.incomeStatement.slice(0, limit)
|
||||
});
|
||||
}),
|
||||
|
||||
// 4. 现金流量表
|
||||
http.get('/api/financial/cashflow/:stockCode', async ({ params, request }) => {
|
||||
await delay(250);
|
||||
const { stockCode } = params;
|
||||
const url = new URL(request.url);
|
||||
const limit = parseInt(url.searchParams.get('limit') || '4', 10);
|
||||
|
||||
const data = generateFinancialData(stockCode);
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.cashflow.slice(0, limit)
|
||||
});
|
||||
}),
|
||||
|
||||
// 5. 财务指标
|
||||
http.get('/api/financial/financial-metrics/:stockCode', async ({ params, request }) => {
|
||||
await delay(250);
|
||||
const { stockCode } = params;
|
||||
const url = new URL(request.url);
|
||||
const limit = parseInt(url.searchParams.get('limit') || '4', 10);
|
||||
|
||||
const data = generateFinancialData(stockCode);
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.financialMetrics.slice(0, limit)
|
||||
});
|
||||
}),
|
||||
|
||||
// 6. 主营业务
|
||||
http.get('/api/financial/main-business/:stockCode', async ({ params }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = generateFinancialData(stockCode);
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.mainBusiness
|
||||
});
|
||||
}),
|
||||
|
||||
// 7. 业绩预告
|
||||
http.get('/api/financial/forecast/:stockCode', async ({ params }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = generateFinancialData(stockCode);
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.forecast
|
||||
});
|
||||
}),
|
||||
|
||||
// 8. 行业排名
|
||||
http.get('/api/financial/industry-rank/:stockCode', async ({ params }) => {
|
||||
await delay(250);
|
||||
const { stockCode } = params;
|
||||
const data = generateFinancialData(stockCode);
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.industryRank
|
||||
});
|
||||
}),
|
||||
|
||||
// 9. 期间对比
|
||||
http.get('/api/financial/comparison/:stockCode', async ({ params }) => {
|
||||
await delay(250);
|
||||
const { stockCode } = params;
|
||||
const data = generateFinancialData(stockCode);
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.periodComparison
|
||||
});
|
||||
}),
|
||||
];
|
||||
@@ -6,6 +6,13 @@ import { accountHandlers } from './account';
|
||||
import { simulationHandlers } from './simulation';
|
||||
import { eventHandlers } from './event';
|
||||
import { paymentHandlers } from './payment';
|
||||
import { industryHandlers } from './industry';
|
||||
import { conceptHandlers } from './concept';
|
||||
import { stockHandlers } from './stock';
|
||||
import { companyHandlers } from './company';
|
||||
import { marketHandlers } from './market';
|
||||
import { financialHandlers } from './financial';
|
||||
import { limitAnalyseHandlers } from './limitAnalyse';
|
||||
|
||||
// 可以在这里添加更多的 handlers
|
||||
// import { userHandlers } from './user';
|
||||
@@ -16,5 +23,12 @@ export const handlers = [
|
||||
...simulationHandlers,
|
||||
...eventHandlers,
|
||||
...paymentHandlers,
|
||||
...industryHandlers,
|
||||
...conceptHandlers,
|
||||
...stockHandlers,
|
||||
...companyHandlers,
|
||||
...marketHandlers,
|
||||
...financialHandlers,
|
||||
...limitAnalyseHandlers,
|
||||
// ...userHandlers,
|
||||
];
|
||||
|
||||
44
src/mocks/handlers/industry.js
Normal file
44
src/mocks/handlers/industry.js
Normal file
@@ -0,0 +1,44 @@
|
||||
// src/mocks/handlers/industry.js
|
||||
// 行业分类相关的 Mock API Handlers
|
||||
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { industryData } from '../../data/industryData';
|
||||
|
||||
// 模拟网络延迟
|
||||
const delay = (ms = 300) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
export const industryHandlers = [
|
||||
// 获取行业分类完整树形结构
|
||||
http.get('/api/classifications', async ({ request }) => {
|
||||
await delay(500);
|
||||
|
||||
const url = new URL(request.url);
|
||||
const classification = url.searchParams.get('classification');
|
||||
|
||||
console.log('[Mock] 获取行业分类树形数据(真实数据)', { classification });
|
||||
|
||||
try {
|
||||
let data = industryData;
|
||||
|
||||
// 如果指定了分类体系,只返回该体系的数据
|
||||
if (classification) {
|
||||
data = industryData.filter(item => item.value === classification);
|
||||
}
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[Mock] 获取行业分类失败:', error);
|
||||
return HttpResponse.json(
|
||||
{
|
||||
success: false,
|
||||
error: '获取行业分类失败',
|
||||
data: []
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
})
|
||||
];
|
||||
344
src/mocks/handlers/limitAnalyse.js
Normal file
344
src/mocks/handlers/limitAnalyse.js
Normal file
@@ -0,0 +1,344 @@
|
||||
// src/mocks/handlers/limitAnalyse.js
|
||||
// 涨停分析相关的 Mock Handlers
|
||||
|
||||
import { http, HttpResponse } from 'msw';
|
||||
|
||||
// 模拟延迟
|
||||
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
// 生成可用日期列表(最近30个交易日)
|
||||
const generateAvailableDates = () => {
|
||||
const dates = [];
|
||||
const today = new Date();
|
||||
let count = 0;
|
||||
|
||||
for (let i = 0; i < 60 && count < 30; i++) {
|
||||
const date = new Date(today);
|
||||
date.setDate(date.getDate() - i);
|
||||
const dayOfWeek = date.getDay();
|
||||
|
||||
// 跳过周末
|
||||
if (dayOfWeek !== 0 && dayOfWeek !== 6) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const dateStr = `${year}${month}${day}`;
|
||||
|
||||
// 返回包含 date 和 count 字段的对象
|
||||
dates.push({
|
||||
date: dateStr,
|
||||
count: Math.floor(Math.random() * 80) + 30 // 30-110 只涨停股票
|
||||
});
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
||||
return dates;
|
||||
};
|
||||
|
||||
// 生成板块数据
|
||||
const generateSectors = (count = 8) => {
|
||||
const sectorNames = [
|
||||
'人工智能', 'ChatGPT', '数字经济',
|
||||
'新能源汽车', '光伏', '锂电池',
|
||||
'半导体', '芯片', '5G通信',
|
||||
'医疗器械', '创新药', '中药',
|
||||
'白酒', '食品饮料', '消费电子',
|
||||
'军工', '航空航天', '新材料'
|
||||
];
|
||||
|
||||
const sectors = [];
|
||||
for (let i = 0; i < Math.min(count, sectorNames.length); i++) {
|
||||
const stockCount = Math.floor(Math.random() * 15) + 5;
|
||||
const stocks = [];
|
||||
|
||||
for (let j = 0; j < stockCount; j++) {
|
||||
stocks.push({
|
||||
code: `${Math.random() > 0.5 ? '6' : '0'}${String(Math.floor(Math.random() * 100000)).padStart(5, '0')}`,
|
||||
name: `${sectorNames[i]}股票${j + 1}`,
|
||||
latest_limit_time: `${Math.floor(Math.random() * 4) + 9}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`,
|
||||
limit_up_count: Math.floor(Math.random() * 3) + 1,
|
||||
price: (Math.random() * 100 + 10).toFixed(2),
|
||||
change_pct: (Math.random() * 5 + 5).toFixed(2),
|
||||
turnover_rate: (Math.random() * 30 + 5).toFixed(2),
|
||||
volume: Math.floor(Math.random() * 100000000 + 10000000),
|
||||
amount: (Math.random() * 1000000000 + 100000000).toFixed(2),
|
||||
limit_type: Math.random() > 0.7 ? '一字板' : (Math.random() > 0.5 ? 'T字板' : '普通涨停'),
|
||||
封单金额: (Math.random() * 500000000).toFixed(2),
|
||||
});
|
||||
}
|
||||
|
||||
sectors.push({
|
||||
sector_name: sectorNames[i],
|
||||
stock_count: stockCount,
|
||||
avg_limit_time: `${Math.floor(Math.random() * 2) + 10}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`,
|
||||
stocks: stocks,
|
||||
});
|
||||
}
|
||||
|
||||
return sectors;
|
||||
};
|
||||
|
||||
// 生成高位股数据(用于 HighPositionStocks 组件)
|
||||
const generateHighPositionStocks = () => {
|
||||
const stocks = [];
|
||||
const stockNames = [
|
||||
'宁德时代', '比亚迪', '隆基绿能', '东方财富', '中际旭创',
|
||||
'京东方A', '海康威视', '立讯精密', '三一重工', '恒瑞医药',
|
||||
'三六零', '东方通信', '贵州茅台', '五粮液', '中国平安'
|
||||
];
|
||||
const industries = [
|
||||
'锂电池', '新能源汽车', '光伏', '金融科技', '通信设备',
|
||||
'显示器件', '安防设备', '电子元件', '工程机械', '医药制造',
|
||||
'网络安全', '通信服务', '白酒', '食品饮料', '保险'
|
||||
];
|
||||
|
||||
for (let i = 0; i < stockNames.length; i++) {
|
||||
const code = `${Math.random() > 0.5 ? '6' : '0'}${String(Math.floor(Math.random() * 100000)).padStart(5, '0')}`;
|
||||
const continuousDays = Math.floor(Math.random() * 8) + 2; // 2-9连板
|
||||
const price = parseFloat((Math.random() * 100 + 20).toFixed(2));
|
||||
const increaseRate = parseFloat((Math.random() * 3 + 8).toFixed(2)); // 8%-11%
|
||||
const turnoverRate = parseFloat((Math.random() * 20 + 5).toFixed(2)); // 5%-25%
|
||||
|
||||
stocks.push({
|
||||
stock_code: code,
|
||||
stock_name: stockNames[i],
|
||||
price: price,
|
||||
increase_rate: increaseRate,
|
||||
continuous_limit_up: continuousDays,
|
||||
industry: industries[i],
|
||||
turnover_rate: turnoverRate,
|
||||
});
|
||||
}
|
||||
|
||||
// 按连板天数降序排序
|
||||
stocks.sort((a, b) => b.continuous_limit_up - a.continuous_limit_up);
|
||||
|
||||
return stocks;
|
||||
};
|
||||
|
||||
// 生成高位股统计数据
|
||||
const generateHighPositionStatistics = (stocks) => {
|
||||
if (!stocks || stocks.length === 0) {
|
||||
return {
|
||||
total_count: 0,
|
||||
avg_continuous_days: 0,
|
||||
max_continuous_days: 0,
|
||||
};
|
||||
}
|
||||
|
||||
const totalCount = stocks.length;
|
||||
const sumDays = stocks.reduce((sum, stock) => sum + stock.continuous_limit_up, 0);
|
||||
const maxDays = Math.max(...stocks.map(s => s.continuous_limit_up));
|
||||
|
||||
return {
|
||||
total_count: totalCount,
|
||||
avg_continuous_days: parseFloat((sumDays / totalCount).toFixed(1)),
|
||||
max_continuous_days: maxDays,
|
||||
};
|
||||
};
|
||||
|
||||
// 生成词云数据
|
||||
const generateWordCloudData = () => {
|
||||
const keywords = [
|
||||
'人工智能', 'ChatGPT', 'AI芯片', '大模型', '算力',
|
||||
'新能源', '光伏', '锂电池', '储能', '充电桩',
|
||||
'半导体', '芯片', 'EDA', '国产替代', '集成电路',
|
||||
'医疗', '创新药', 'CXO', '医疗器械', '生物医药',
|
||||
'消费', '白酒', '食品', '零售', '餐饮',
|
||||
'金融', '券商', '保险', '银行', '金融科技'
|
||||
];
|
||||
|
||||
return keywords.map(keyword => ({
|
||||
text: keyword,
|
||||
value: Math.floor(Math.random() * 50) + 10,
|
||||
category: ['科技', '新能源', '医疗', '消费', '金融'][Math.floor(Math.random() * 5)],
|
||||
}));
|
||||
};
|
||||
|
||||
// 生成每日分析数据
|
||||
const generateDailyAnalysis = (date) => {
|
||||
const sectorNames = [
|
||||
'公告', '人工智能', 'ChatGPT', '数字经济',
|
||||
'新能源汽车', '光伏', '锂电池',
|
||||
'半导体', '芯片', '5G通信',
|
||||
'医疗器械', '创新药', '其他'
|
||||
];
|
||||
|
||||
const stockNameTemplates = [
|
||||
'龙头', '科技', '新能源', '智能', '数字', '云计算', '创新',
|
||||
'生物', '医疗', '通信', '电子', '材料', '能源', '互联'
|
||||
];
|
||||
|
||||
// 生成 sector_data(SectorDetails 组件需要的格式)
|
||||
const sectorData = {};
|
||||
let totalStocks = 0;
|
||||
|
||||
sectorNames.forEach((sectorName, sectorIdx) => {
|
||||
const stockCount = Math.floor(Math.random() * 12) + 3; // 每个板块 3-15 只股票
|
||||
const stocks = [];
|
||||
|
||||
for (let i = 0; i < stockCount; i++) {
|
||||
const code = `${Math.random() > 0.5 ? '6' : '0'}${String(Math.floor(Math.random() * 100000)).padStart(5, '0')}`;
|
||||
const continuousDays = Math.floor(Math.random() * 6) + 1; // 1-6连板
|
||||
const ztHour = Math.floor(Math.random() * 5) + 9; // 9-13点
|
||||
const ztMinute = Math.floor(Math.random() * 60);
|
||||
const ztSecond = Math.floor(Math.random() * 60);
|
||||
const ztTime = `2024-10-28 ${String(ztHour).padStart(2, '0')}:${String(ztMinute).padStart(2, '0')}:${String(ztSecond).padStart(2, '0')}`;
|
||||
|
||||
const stockName = `${stockNameTemplates[i % stockNameTemplates.length]}${sectorName === '公告' ? '公告' : ''}股份${i + 1}`;
|
||||
|
||||
stocks.push({
|
||||
scode: code,
|
||||
sname: stockName,
|
||||
zt_time: ztTime,
|
||||
formatted_time: `${String(ztHour).padStart(2, '0')}:${String(ztMinute).padStart(2, '0')}`,
|
||||
continuous_days: continuousDays === 1 ? '首板' : `${continuousDays}连板`,
|
||||
brief: `${sectorName}板块异动,${stockName}因${sectorName === '公告' ? '重大公告利好' : '板块热点'}涨停。公司是${sectorName}行业龙头企业之一。`,
|
||||
summary: `${sectorName}概念持续活跃`,
|
||||
first_time: `2024-10-${String(28 - (continuousDays - 1)).padStart(2, '0')}`,
|
||||
change_pct: parseFloat((Math.random() * 2 + 9).toFixed(2)), // 9%-11%
|
||||
core_sectors: [
|
||||
sectorName,
|
||||
sectorNames[Math.floor(Math.random() * sectorNames.length)],
|
||||
sectorNames[Math.floor(Math.random() * sectorNames.length)]
|
||||
].filter((v, i, a) => a.indexOf(v) === i) // 去重
|
||||
});
|
||||
}
|
||||
|
||||
sectorData[sectorName] = {
|
||||
count: stockCount,
|
||||
stocks: stocks.sort((a, b) => a.zt_time.localeCompare(b.zt_time)) // 按涨停时间排序
|
||||
};
|
||||
|
||||
totalStocks += stockCount;
|
||||
});
|
||||
|
||||
// 统计数据
|
||||
const morningCount = Math.floor(totalStocks * 0.35); // 早盘涨停
|
||||
const announcementCount = sectorData['公告']?.count || 0;
|
||||
const topSector = sectorNames.filter(s => s !== '公告' && s !== '其他')
|
||||
.reduce((max, name) =>
|
||||
(sectorData[name]?.count || 0) > (sectorData[max]?.count || 0) ? name : max
|
||||
, '人工智能');
|
||||
|
||||
return {
|
||||
date: date,
|
||||
total_stocks: totalStocks,
|
||||
total_sectors: Object.keys(sectorData).length,
|
||||
sector_data: sectorData, // 👈 SectorDetails 组件需要的数据
|
||||
summary: {
|
||||
top_sector: topSector,
|
||||
top_sector_count: sectorData[topSector]?.count || 0,
|
||||
announcement_stocks: announcementCount,
|
||||
zt_time_distribution: {
|
||||
morning: morningCount,
|
||||
afternoon: totalStocks - morningCount,
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// Mock Handlers
|
||||
export const limitAnalyseHandlers = [
|
||||
// 1. 获取可用日期列表
|
||||
http.get('http://111.198.58.126:5001/api/v1/dates/available', async () => {
|
||||
await delay(300);
|
||||
|
||||
const availableDates = generateAvailableDates();
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
events: availableDates,
|
||||
message: '可用日期列表获取成功',
|
||||
});
|
||||
}),
|
||||
|
||||
// 2. 获取每日分析数据
|
||||
http.get('http://111.198.58.126:5001/api/v1/analysis/daily/:date', async ({ params }) => {
|
||||
await delay(500);
|
||||
|
||||
const { date } = params;
|
||||
const data = generateDailyAnalysis(date);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data,
|
||||
message: `${date} 每日分析数据获取成功`,
|
||||
});
|
||||
}),
|
||||
|
||||
// 3. 获取词云数据
|
||||
http.get('http://111.198.58.126:5001/api/v1/analysis/wordcloud/:date', async ({ params }) => {
|
||||
await delay(300);
|
||||
|
||||
const { date } = params;
|
||||
const wordCloudData = generateWordCloudData();
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: wordCloudData,
|
||||
message: `${date} 词云数据获取成功`,
|
||||
});
|
||||
}),
|
||||
|
||||
// 4. 混合搜索(POST)
|
||||
http.post('http://111.198.58.126:5001/api/v1/stocks/search/hybrid', async ({ request }) => {
|
||||
await delay(400);
|
||||
|
||||
const body = await request.json();
|
||||
const { query, type = 'all', mode = 'hybrid' } = body;
|
||||
|
||||
// 生成模拟搜索结果
|
||||
const results = [];
|
||||
const count = Math.floor(Math.random() * 10) + 5;
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
results.push({
|
||||
code: `${Math.random() > 0.5 ? '6' : '0'}${String(Math.floor(Math.random() * 100000)).padStart(5, '0')}`,
|
||||
name: `${query || '搜索'}相关股票${i + 1}`,
|
||||
sector: ['人工智能', 'ChatGPT', '新能源'][Math.floor(Math.random() * 3)],
|
||||
limit_date: new Date().toISOString().split('T')[0].replace(/-/g, ''),
|
||||
limit_time: `${Math.floor(Math.random() * 4) + 9}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`,
|
||||
price: (Math.random() * 100 + 10).toFixed(2),
|
||||
change_pct: (Math.random() * 10).toFixed(2),
|
||||
match_score: (Math.random() * 0.5 + 0.5).toFixed(2),
|
||||
});
|
||||
}
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: {
|
||||
query: query,
|
||||
type: type,
|
||||
mode: mode,
|
||||
results: results,
|
||||
total: results.length,
|
||||
},
|
||||
message: '搜索完成',
|
||||
});
|
||||
}),
|
||||
|
||||
// 5. 获取高位股列表(涨停股票列表)
|
||||
http.get('http://111.198.58.126:5001/api/limit-analyse/high-position-stocks', async ({ request }) => {
|
||||
await delay(400);
|
||||
|
||||
const url = new URL(request.url);
|
||||
const date = url.searchParams.get('date');
|
||||
|
||||
console.log('[Mock LimitAnalyse] 获取高位股列表:', { date });
|
||||
|
||||
const stocks = generateHighPositionStocks();
|
||||
const statistics = generateHighPositionStatistics(stocks);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: {
|
||||
stocks: stocks,
|
||||
statistics: statistics,
|
||||
date: date,
|
||||
},
|
||||
message: '高位股数据获取成功',
|
||||
});
|
||||
}),
|
||||
];
|
||||
74
src/mocks/handlers/market.js
Normal file
74
src/mocks/handlers/market.js
Normal file
@@ -0,0 +1,74 @@
|
||||
// src/mocks/handlers/market.js
|
||||
// 市场行情相关的 Mock Handlers
|
||||
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { generateMarketData } from '../data/market';
|
||||
|
||||
// 模拟延迟
|
||||
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
export const marketHandlers = [
|
||||
// 1. 成交数据
|
||||
http.get('/api/market/trade/:stockCode', async ({ params, request }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = generateMarketData(stockCode);
|
||||
return HttpResponse.json(data.tradeData);
|
||||
}),
|
||||
|
||||
// 2. 资金流向
|
||||
http.get('/api/market/funding/:stockCode', async ({ params }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = generateMarketData(stockCode);
|
||||
return HttpResponse.json(data.fundingData);
|
||||
}),
|
||||
|
||||
// 3. 大单统计
|
||||
http.get('/api/market/bigdeal/:stockCode', async ({ params }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = generateMarketData(stockCode);
|
||||
return HttpResponse.json(data.bigDealData);
|
||||
}),
|
||||
|
||||
// 4. 异动分析
|
||||
http.get('/api/market/unusual/:stockCode', async ({ params }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = generateMarketData(stockCode);
|
||||
return HttpResponse.json(data.unusualData);
|
||||
}),
|
||||
|
||||
// 5. 股权质押
|
||||
http.get('/api/market/pledge/:stockCode', async ({ params }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = generateMarketData(stockCode);
|
||||
return HttpResponse.json(data.pledgeData);
|
||||
}),
|
||||
|
||||
// 6. 市场摘要
|
||||
http.get('/api/market/summary/:stockCode', async ({ params }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = generateMarketData(stockCode);
|
||||
return HttpResponse.json(data.summaryData);
|
||||
}),
|
||||
|
||||
// 7. 涨停分析
|
||||
http.get('/api/market/rise-analysis/:stockCode', async ({ params }) => {
|
||||
await delay(200);
|
||||
const { stockCode } = params;
|
||||
const data = generateMarketData(stockCode);
|
||||
return HttpResponse.json(data.riseAnalysisData);
|
||||
}),
|
||||
|
||||
// 8. 最新分时数据
|
||||
http.get('/api/stock/:stockCode/latest-minute', async ({ params }) => {
|
||||
await delay(300);
|
||||
const { stockCode } = params;
|
||||
const data = generateMarketData(stockCode);
|
||||
return HttpResponse.json(data.latestMinuteData);
|
||||
}),
|
||||
];
|
||||
227
src/mocks/handlers/stock.js
Normal file
227
src/mocks/handlers/stock.js
Normal file
@@ -0,0 +1,227 @@
|
||||
// src/mocks/handlers/stock.js
|
||||
// 股票相关的 Mock Handlers
|
||||
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { generateTimelineData, generateDailyData } from '../data/kline';
|
||||
|
||||
// 模拟延迟
|
||||
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
// 生成A股主要股票数据(包含各大指数成分股)
|
||||
const generateStockList = () => {
|
||||
const stocks = [
|
||||
// 银行
|
||||
{ code: '000001', name: '平安银行' },
|
||||
{ code: '600000', name: '浦发银行' },
|
||||
{ code: '600036', name: '招商银行' },
|
||||
{ code: '601166', name: '兴业银行' },
|
||||
{ code: '601169', name: '北京银行' },
|
||||
{ code: '601288', name: '农业银行' },
|
||||
{ code: '601328', name: '交通银行' },
|
||||
{ code: '601398', name: '工商银行' },
|
||||
{ code: '601818', name: '光大银行' },
|
||||
{ code: '601939', name: '建设银行' },
|
||||
{ code: '601998', name: '中信银行' },
|
||||
|
||||
// 证券
|
||||
{ code: '600030', name: '中信证券' },
|
||||
{ code: '600109', name: '国金证券' },
|
||||
{ code: '600837', name: '海通证券' },
|
||||
{ code: '600999', name: '招商证券' },
|
||||
{ code: '601688', name: '华泰证券' },
|
||||
{ code: '601901', name: '方正证券' },
|
||||
|
||||
// 保险
|
||||
{ code: '601318', name: '中国平安' },
|
||||
{ code: '601336', name: '新华保险' },
|
||||
{ code: '601601', name: '中国太保' },
|
||||
{ code: '601628', name: '中国人寿' },
|
||||
|
||||
// 白酒/食品饮料
|
||||
{ code: '000568', name: '泸州老窖' },
|
||||
{ code: '000596', name: '古井贡酒' },
|
||||
{ code: '000858', name: '五粮液' },
|
||||
{ code: '600519', name: '贵州茅台' },
|
||||
{ code: '600600', name: '青岛啤酒' },
|
||||
{ code: '600779', name: '水井坊' },
|
||||
{ code: '603369', name: '今世缘' },
|
||||
|
||||
// 医药
|
||||
{ code: '000538', name: '云南白药' },
|
||||
{ code: '000661', name: '长春高新' },
|
||||
{ code: '002422', name: '科伦药业' },
|
||||
{ code: '002594', name: '比亚迪' },
|
||||
{ code: '600276', name: '恒瑞医药' },
|
||||
{ code: '600436', name: '片仔癀' },
|
||||
{ code: '603259', name: '药明康德' },
|
||||
|
||||
// 科技/半导体
|
||||
{ code: '000063', name: '中兴通讯' },
|
||||
{ code: '000725', name: '京东方A' },
|
||||
{ code: '002049', name: '紫光国微' },
|
||||
{ code: '002415', name: '海康威视' },
|
||||
{ code: '002475', name: '立讯精密' },
|
||||
{ code: '600584', name: '长电科技' },
|
||||
{ code: '600893', name: '航发动力' },
|
||||
{ code: '603501', name: '韦尔股份' },
|
||||
|
||||
// 新能源/电力
|
||||
{ code: '000002', name: '万科A' },
|
||||
{ code: '002460', name: '赣锋锂业' },
|
||||
{ code: '300750', name: '宁德时代' },
|
||||
{ code: '600438', name: '通威股份' },
|
||||
{ code: '601012', name: '隆基绿能' },
|
||||
{ code: '601668', name: '中国建筑' },
|
||||
|
||||
// 汽车
|
||||
{ code: '000625', name: '长安汽车' },
|
||||
{ code: '600066', name: '宇通客车' },
|
||||
{ code: '600104', name: '上汽集团' },
|
||||
{ code: '601238', name: '广汽集团' },
|
||||
{ code: '601633', name: '长城汽车' },
|
||||
|
||||
// 地产
|
||||
{ code: '000002', name: '万科A' },
|
||||
{ code: '000069', name: '华侨城A' },
|
||||
{ code: '600340', name: '华夏幸福' },
|
||||
{ code: '600606', name: '绿地控股' },
|
||||
|
||||
// 家电
|
||||
{ code: '000333', name: '美的集团' },
|
||||
{ code: '000651', name: '格力电器' },
|
||||
{ code: '002032', name: '苏泊尔' },
|
||||
{ code: '600690', name: '海尔智家' },
|
||||
|
||||
// 互联网/电商
|
||||
{ code: '002024', name: '苏宁易购' },
|
||||
{ code: '002074', name: '国轩高科' },
|
||||
{ code: '300059', name: '东方财富' },
|
||||
|
||||
// 能源/化工
|
||||
{ code: '600028', name: '中国石化' },
|
||||
{ code: '600309', name: '万华化学' },
|
||||
{ code: '600547', name: '山东黄金' },
|
||||
{ code: '600585', name: '海螺水泥' },
|
||||
{ code: '601088', name: '中国神华' },
|
||||
{ code: '601857', name: '中国石油' },
|
||||
|
||||
// 电信/运营商
|
||||
{ code: '600050', name: '中国联通' },
|
||||
{ code: '600941', name: '中国移动' },
|
||||
{ code: '601728', name: '中国电信' },
|
||||
|
||||
// 其他蓝筹
|
||||
{ code: '600887', name: '伊利股份' },
|
||||
{ code: '601111', name: '中国国航' },
|
||||
{ code: '601390', name: '中国中铁' },
|
||||
{ code: '601899', name: '紫金矿业' },
|
||||
{ code: '603288', name: '海天味业' },
|
||||
];
|
||||
|
||||
return stocks;
|
||||
};
|
||||
|
||||
// 股票相关的 Handlers
|
||||
export const stockHandlers = [
|
||||
// 获取所有股票列表
|
||||
http.get('/api/stocklist', async () => {
|
||||
await delay(200);
|
||||
|
||||
try {
|
||||
const stocks = generateStockList();
|
||||
|
||||
console.log('[Mock Stock] 获取股票列表成功:', { count: stocks.length });
|
||||
|
||||
return HttpResponse.json(stocks);
|
||||
} catch (error) {
|
||||
console.error('[Mock Stock] 获取股票列表失败:', error);
|
||||
return HttpResponse.json(
|
||||
{ error: '获取股票列表失败' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}),
|
||||
|
||||
// 获取指数K线数据
|
||||
http.get('/api/index/:indexCode/kline', async ({ params, request }) => {
|
||||
await delay(300);
|
||||
|
||||
const { indexCode } = params;
|
||||
const url = new URL(request.url);
|
||||
const type = url.searchParams.get('type') || 'timeline';
|
||||
const eventTime = url.searchParams.get('event_time');
|
||||
|
||||
console.log('[Mock Stock] 获取指数K线数据:', { indexCode, type, eventTime });
|
||||
|
||||
try {
|
||||
let data;
|
||||
|
||||
if (type === 'timeline') {
|
||||
data = generateTimelineData(indexCode);
|
||||
} else if (type === 'daily') {
|
||||
data = generateDailyData(indexCode, 30);
|
||||
} else {
|
||||
return HttpResponse.json(
|
||||
{ error: '不支持的类型' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data,
|
||||
index_code: indexCode,
|
||||
type: type,
|
||||
message: '获取成功'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[Mock Stock] 获取K线数据失败:', error);
|
||||
return HttpResponse.json(
|
||||
{ error: '获取K线数据失败' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}),
|
||||
|
||||
// 获取股票K线数据
|
||||
http.get('/api/stock/:stockCode/kline', async ({ params, request }) => {
|
||||
await delay(300);
|
||||
|
||||
const { stockCode } = params;
|
||||
const url = new URL(request.url);
|
||||
const type = url.searchParams.get('type') || 'timeline';
|
||||
const eventTime = url.searchParams.get('event_time');
|
||||
|
||||
console.log('[Mock Stock] 获取股票K线数据:', { stockCode, type, eventTime });
|
||||
|
||||
try {
|
||||
let data;
|
||||
|
||||
if (type === 'timeline') {
|
||||
// 股票使用指数的数据生成逻辑,但价格基数不同
|
||||
data = generateTimelineData('000001.SH'); // 可以根据股票代码调整
|
||||
} else if (type === 'daily') {
|
||||
data = generateDailyData('000001.SH', 30);
|
||||
} else {
|
||||
return HttpResponse.json(
|
||||
{ error: '不支持的类型' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data,
|
||||
stock_code: stockCode,
|
||||
type: type,
|
||||
message: '获取成功'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[Mock Stock] 获取股票K线数据失败:', error);
|
||||
return HttpResponse.json(
|
||||
{ error: '获取K线数据失败' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}),
|
||||
];
|
||||
@@ -144,8 +144,8 @@ export const WECHAT_STATUS = {
|
||||
WAITING: 'waiting',
|
||||
SCANNED: 'scanned',
|
||||
AUTHORIZED: 'authorized',
|
||||
LOGIN_SUCCESS: 'login_success',
|
||||
REGISTER_SUCCESS: 'register_success',
|
||||
LOGIN_SUCCESS: 'authorized', // ✅ 与后端保持一致,统一使用 'authorized'
|
||||
REGISTER_SUCCESS: 'authorized', // ✅ 与后端保持一致,统一使用 'authorized'
|
||||
EXPIRED: 'expired',
|
||||
};
|
||||
|
||||
@@ -153,7 +153,7 @@ export const WECHAT_STATUS = {
|
||||
* 状态提示信息映射
|
||||
*/
|
||||
export const STATUS_MESSAGES = {
|
||||
[WECHAT_STATUS.WAITING]: '请使用微信扫码',
|
||||
[WECHAT_STATUS.WAITING]: '使用微信扫一扫登陆',
|
||||
[WECHAT_STATUS.SCANNED]: '扫码成功,请在手机上确认',
|
||||
[WECHAT_STATUS.AUTHORIZED]: '授权成功,正在登录...',
|
||||
[WECHAT_STATUS.EXPIRED]: '二维码已过期',
|
||||
|
||||
@@ -5,25 +5,25 @@ import axios from 'axios';
|
||||
// 判断当前是否是生产环境
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
|
||||
|
||||
const API_BASE_URL = getApiBase();
|
||||
|
||||
// 配置 axios 默认包含 credentials
|
||||
axios.defaults.withCredentials = true;
|
||||
|
||||
export const industryService = {
|
||||
// 获取所有行业分类体系
|
||||
async getClassifications() {
|
||||
const res = await axios.get(`${API_BASE_URL}/api/classifications`);
|
||||
return res.data;
|
||||
},
|
||||
// 获取指定体系下的多级行业
|
||||
async getLevels({ classification, level = 1, level1_name, level2_name, level3_name }) {
|
||||
let url = `${API_BASE_URL}/api/levels?classification=${encodeURIComponent(classification)}&level=${level}`;
|
||||
if (level1_name) url += `&level1_name=${encodeURIComponent(level1_name)}`;
|
||||
if (level2_name) url += `&level2_name=${encodeURIComponent(level2_name)}`;
|
||||
if (level3_name) url += `&level3_name=${encodeURIComponent(level3_name)}`;
|
||||
/**
|
||||
* 获取行业分类完整树形结构
|
||||
* @param {string} classification - 可选,指定分类体系名称,不传则返回所有
|
||||
* @returns {Promise} 返回树形结构数据
|
||||
*/
|
||||
async getClassifications(classification) {
|
||||
let url = `${API_BASE_URL}/api/classifications`;
|
||||
if (classification) {
|
||||
url += `?classification=${encodeURIComponent(classification)}`;
|
||||
}
|
||||
const res = await axios.get(url);
|
||||
return res.data;
|
||||
}
|
||||
|
||||
// 注意:getLevels 接口已废弃,使用 getClassifications 替代
|
||||
};
|
||||
@@ -303,6 +303,7 @@ const mockFinancialNews = [
|
||||
class MockSocketService {
|
||||
constructor() {
|
||||
this.connected = false;
|
||||
this.connecting = false; // 新增:正在连接标志,防止重复连接
|
||||
this.listeners = new Map();
|
||||
this.intervals = [];
|
||||
this.messageQueue = [];
|
||||
@@ -325,18 +326,30 @@ class MockSocketService {
|
||||
* 连接到 mock socket
|
||||
*/
|
||||
connect() {
|
||||
// ✅ 防止重复连接
|
||||
if (this.connected) {
|
||||
logger.warn('mockSocketService', 'Already connected');
|
||||
console.log('%c[Mock Socket] Already connected, skipping', 'color: #FF9800; font-weight: bold;');
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.connecting) {
|
||||
logger.warn('mockSocketService', 'Connection in progress');
|
||||
console.log('%c[Mock Socket] Connection already in progress, skipping', 'color: #FF9800; font-weight: bold;');
|
||||
return;
|
||||
}
|
||||
|
||||
this.connecting = true; // 标记为连接中
|
||||
logger.info('mockSocketService', 'Connecting to mock socket service...');
|
||||
console.log('%c[Mock Socket] 🔌 Connecting...', 'color: #2196F3; font-weight: bold;');
|
||||
|
||||
// 模拟连接延迟
|
||||
setTimeout(() => {
|
||||
// 检查是否应该模拟连接失败
|
||||
if (this.failConnection) {
|
||||
this.connecting = false; // 清除连接中标志
|
||||
logger.warn('mockSocketService', 'Simulated connection failure');
|
||||
console.log('%c[Mock Socket] ❌ Connection failed (simulated)', 'color: #F44336; font-weight: bold;');
|
||||
|
||||
// 触发连接错误事件
|
||||
this.emit('connect_error', {
|
||||
@@ -351,6 +364,7 @@ class MockSocketService {
|
||||
|
||||
// 正常连接成功
|
||||
this.connected = true;
|
||||
this.connecting = false; // 清除连接中标志
|
||||
this.reconnectAttempts = 0;
|
||||
|
||||
// 清除自定义重连定时器
|
||||
@@ -360,9 +374,15 @@ class MockSocketService {
|
||||
}
|
||||
|
||||
logger.info('mockSocketService', 'Mock socket connected successfully');
|
||||
console.log('%c[Mock Socket] ✅ Connected successfully!', 'color: #4CAF50; font-weight: bold; font-size: 14px;');
|
||||
console.log(`%c[Mock Socket] Status: connected=${this.connected}, connecting=${this.connecting}`, 'color: #4CAF50;');
|
||||
|
||||
// 触发连接成功事件
|
||||
this.emit('connect', { timestamp: Date.now() });
|
||||
// ✅ 使用 setTimeout(0) 确保监听器已注册后再触发事件
|
||||
setTimeout(() => {
|
||||
console.log('%c[Mock Socket] Emitting connect event...', 'color: #9C27B0;');
|
||||
this.emit('connect', { timestamp: Date.now() });
|
||||
console.log('%c[Mock Socket] Connect event emitted', 'color: #9C27B0;');
|
||||
}, 0);
|
||||
|
||||
// 在连接后3秒发送欢迎消息
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -25,4 +25,73 @@ console.log(
|
||||
`color: ${useMock ? '#FF9800' : '#4CAF50'}; font-weight: bold; font-size: 12px;`
|
||||
);
|
||||
|
||||
// ========== 暴露调试 API 到全局 ==========
|
||||
if (typeof window !== 'undefined') {
|
||||
// 暴露 Socket 类型到全局
|
||||
window.SOCKET_TYPE = SOCKET_TYPE;
|
||||
|
||||
// 暴露调试 API
|
||||
window.__SOCKET_DEBUG__ = {
|
||||
// 获取当前连接状态
|
||||
getStatus: () => {
|
||||
const isConnected = socket.connected || false;
|
||||
return {
|
||||
type: SOCKET_TYPE,
|
||||
connected: isConnected,
|
||||
reconnectAttempts: socket.getReconnectAttempts?.() || 0,
|
||||
maxReconnectAttempts: socket.getMaxReconnectAttempts?.() || Infinity,
|
||||
service: useMock ? 'mockSocketService' : 'socketService',
|
||||
};
|
||||
},
|
||||
|
||||
// 手动重连
|
||||
reconnect: () => {
|
||||
console.log('[Socket Debug] Manual reconnect triggered');
|
||||
if (socket.reconnect) {
|
||||
socket.reconnect();
|
||||
} else {
|
||||
socket.disconnect();
|
||||
socket.connect();
|
||||
}
|
||||
},
|
||||
|
||||
// 断开连接
|
||||
disconnect: () => {
|
||||
console.log('[Socket Debug] Manual disconnect triggered');
|
||||
socket.disconnect();
|
||||
},
|
||||
|
||||
// 连接
|
||||
connect: () => {
|
||||
console.log('[Socket Debug] Manual connect triggered');
|
||||
socket.connect();
|
||||
},
|
||||
|
||||
// 获取服务实例 (仅用于调试)
|
||||
getService: () => socket,
|
||||
|
||||
// 导出诊断信息
|
||||
exportDiagnostics: () => {
|
||||
const status = window.__SOCKET_DEBUG__.getStatus();
|
||||
const diagnostics = {
|
||||
...status,
|
||||
timestamp: new Date().toISOString(),
|
||||
userAgent: navigator.userAgent,
|
||||
url: window.location.href,
|
||||
};
|
||||
console.log('[Socket Diagnostics]', diagnostics);
|
||||
return diagnostics;
|
||||
}
|
||||
};
|
||||
|
||||
console.log(
|
||||
'%c[Socket Debug] Debug API available at window.__SOCKET_DEBUG__',
|
||||
'color: #2196F3; font-weight: bold;'
|
||||
);
|
||||
console.log(
|
||||
'%cTry: window.__SOCKET_DEBUG__.getStatus()',
|
||||
'color: #2196F3;'
|
||||
);
|
||||
}
|
||||
|
||||
export default socket;
|
||||
|
||||
@@ -301,35 +301,64 @@ class SocketService {
|
||||
* 执行订阅操作(内部方法)
|
||||
*/
|
||||
_doSubscribe(eventType, importance, onNewEvent, onSubscribed) {
|
||||
console.log('\n========== [SocketService DEBUG] 开始订阅 ==========');
|
||||
console.log('[SocketService DEBUG] 事件类型:', eventType);
|
||||
console.log('[SocketService DEBUG] 重要性:', importance);
|
||||
console.log('[SocketService DEBUG] Socket 连接状态:', this.connected);
|
||||
console.log('[SocketService DEBUG] Socket ID:', this.socket?.id);
|
||||
|
||||
// 发送订阅请求
|
||||
this.emit('subscribe_events', {
|
||||
const subscribeData = {
|
||||
event_type: eventType,
|
||||
importance: importance,
|
||||
});
|
||||
};
|
||||
console.log('[SocketService DEBUG] 准备发送 subscribe_events:', subscribeData);
|
||||
this.emit('subscribe_events', subscribeData);
|
||||
console.log('[SocketService DEBUG] ✓ 已发送 subscribe_events');
|
||||
|
||||
// 监听订阅确认
|
||||
this.socket.once('subscription_confirmed', (data) => {
|
||||
console.log('\n[SocketService DEBUG] ========== 收到订阅确认 ==========');
|
||||
console.log('[SocketService DEBUG] 订阅确认数据:', data);
|
||||
logger.info('socketService', 'Subscription confirmed', data);
|
||||
if (onSubscribed) {
|
||||
console.log('[SocketService DEBUG] 调用 onSubscribed 回调');
|
||||
onSubscribed(data);
|
||||
}
|
||||
console.log('[SocketService DEBUG] ========== 订阅确认处理完成 ==========\n');
|
||||
});
|
||||
|
||||
// 监听订阅错误
|
||||
this.socket.once('subscription_error', (error) => {
|
||||
console.error('\n[SocketService ERROR] ========== 订阅错误 ==========');
|
||||
console.error('[SocketService ERROR] 错误信息:', error);
|
||||
logger.error('socketService', 'Subscription error', error);
|
||||
console.error('[SocketService ERROR] ========== 订阅错误处理完成 ==========\n');
|
||||
});
|
||||
|
||||
// 监听新事件推送
|
||||
if (onNewEvent) {
|
||||
console.log('[SocketService DEBUG] 设置 new_event 监听器');
|
||||
// 先移除之前的监听器(避免重复)
|
||||
this.socket.off('new_event');
|
||||
console.log('[SocketService DEBUG] ✓ 已移除旧的 new_event 监听器');
|
||||
|
||||
// 添加新的监听器
|
||||
this.socket.on('new_event', (eventData) => {
|
||||
console.log('\n[SocketService DEBUG] ========== 收到新事件推送 ==========');
|
||||
console.log('[SocketService DEBUG] 事件数据:', eventData);
|
||||
console.log('[SocketService DEBUG] 事件 ID:', eventData?.id);
|
||||
console.log('[SocketService DEBUG] 事件标题:', eventData?.title);
|
||||
logger.info('socketService', 'New event received', eventData);
|
||||
console.log('[SocketService DEBUG] 准备调用 onNewEvent 回调');
|
||||
onNewEvent(eventData);
|
||||
console.log('[SocketService DEBUG] ✓ onNewEvent 回调已调用');
|
||||
console.log('[SocketService DEBUG] ========== 新事件处理完成 ==========\n');
|
||||
});
|
||||
console.log('[SocketService DEBUG] ✓ new_event 监听器已设置');
|
||||
}
|
||||
|
||||
console.log('[SocketService DEBUG] ========== 订阅完成 ==========\n');
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
101
src/services/stockService.js
Normal file
101
src/services/stockService.js
Normal file
@@ -0,0 +1,101 @@
|
||||
// src/services/stockService.js
|
||||
// 股票数据服务
|
||||
|
||||
import { logger } from '../utils/logger';
|
||||
|
||||
const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || '';
|
||||
|
||||
/**
|
||||
* 股票数据服务
|
||||
*/
|
||||
export const stockService = {
|
||||
/**
|
||||
* 获取所有股票列表
|
||||
* @returns {Promise<{success: boolean, data: Array<{code: string, name: string}>}>}
|
||||
*/
|
||||
async getAllStocks() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/stocklist`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
logger.debug('stockService', 'getAllStocks 成功', {
|
||||
count: data?.length || 0
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: data || []
|
||||
};
|
||||
} catch (error) {
|
||||
logger.error('stockService', 'getAllStocks', error);
|
||||
return {
|
||||
success: false,
|
||||
data: [],
|
||||
error: error.message
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 模糊搜索股票(匹配 code 或 name)
|
||||
* @param {string} query - 搜索关键词
|
||||
* @param {Array<{code: string, name: string}>} stockList - 股票列表
|
||||
* @param {number} limit - 返回结果数量限制
|
||||
* @returns {Array<{code: string, name: string}>}
|
||||
*/
|
||||
fuzzySearch(query, stockList, limit = 10) {
|
||||
if (!query || !stockList || stockList.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const lowerQuery = query.toLowerCase();
|
||||
|
||||
// 模糊匹配 code 或 name
|
||||
const results = stockList.filter(stock => {
|
||||
const code = (stock.code || '').toString().toLowerCase();
|
||||
const name = (stock.name || '').toLowerCase();
|
||||
return code.includes(lowerQuery) || name.includes(lowerQuery);
|
||||
});
|
||||
|
||||
// 优先级排序:
|
||||
// 1. code 精确匹配
|
||||
// 2. name 精确匹配
|
||||
// 3. code 开头匹配
|
||||
// 4. name 开头匹配
|
||||
// 5. 其他包含匹配
|
||||
results.sort((a, b) => {
|
||||
const aCode = (a.code || '').toString().toLowerCase();
|
||||
const aName = (a.name || '').toLowerCase();
|
||||
const bCode = (b.code || '').toString().toLowerCase();
|
||||
const bName = (b.name || '').toLowerCase();
|
||||
|
||||
// 精确匹配
|
||||
if (aCode === lowerQuery) return -1;
|
||||
if (bCode === lowerQuery) return 1;
|
||||
if (aName === lowerQuery) return -1;
|
||||
if (bName === lowerQuery) return 1;
|
||||
|
||||
// 开头匹配
|
||||
if (aCode.startsWith(lowerQuery) && !bCode.startsWith(lowerQuery)) return -1;
|
||||
if (!aCode.startsWith(lowerQuery) && bCode.startsWith(lowerQuery)) return 1;
|
||||
if (aName.startsWith(lowerQuery) && !bName.startsWith(lowerQuery)) return -1;
|
||||
if (!aName.startsWith(lowerQuery) && bName.startsWith(lowerQuery)) return 1;
|
||||
|
||||
// 字母顺序
|
||||
return aCode.localeCompare(bCode);
|
||||
});
|
||||
|
||||
return results.slice(0, limit);
|
||||
}
|
||||
};
|
||||
25
src/store/index.js
Normal file
25
src/store/index.js
Normal file
@@ -0,0 +1,25 @@
|
||||
// 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 状态管理
|
||||
},
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware({
|
||||
serializableCheck: {
|
||||
// 忽略这些 action types 的序列化检查
|
||||
ignoredActions: [
|
||||
'communityData/fetchPopularKeywords/fulfilled',
|
||||
'communityData/fetchHotEvents/fulfilled',
|
||||
'posthog/trackEvent/fulfilled', // ✅ PostHog 事件追踪
|
||||
],
|
||||
},
|
||||
}).concat(posthogMiddleware), // ✅ PostHog 自动追踪中间件
|
||||
});
|
||||
|
||||
export default store;
|
||||
281
src/store/middleware/posthogMiddleware.js
Normal file
281
src/store/middleware/posthogMiddleware.js
Normal file
@@ -0,0 +1,281 @@
|
||||
// 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;
|
||||
274
src/store/slices/communityDataSlice.js
Normal file
274
src/store/slices/communityDataSlice.js
Normal file
@@ -0,0 +1,274 @@
|
||||
// src/store/slices/communityDataSlice.js
|
||||
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
|
||||
import { eventService } from '../../services/eventService';
|
||||
import { logger } from '../../utils/logger';
|
||||
import { localCacheManager, CACHE_EXPIRY_STRATEGY } from '../../utils/CacheManager';
|
||||
|
||||
// ==================== 常量定义 ====================
|
||||
|
||||
// 缓存键名
|
||||
const CACHE_KEYS = {
|
||||
POPULAR_KEYWORDS: 'community_popular_keywords',
|
||||
HOT_EVENTS: 'community_hot_events'
|
||||
};
|
||||
|
||||
// 请求去重:缓存正在进行的请求
|
||||
const pendingRequests = new Map();
|
||||
|
||||
// ==================== 通用数据获取逻辑 ====================
|
||||
|
||||
/**
|
||||
* 通用的数据获取函数(支持三级缓存 + 请求去重)
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {string} options.cacheKey - 缓存键名
|
||||
* @param {Function} options.fetchFn - API 获取函数
|
||||
* @param {Function} options.getState - Redux getState 函数
|
||||
* @param {string} options.stateKey - Redux state 中的键名
|
||||
* @param {boolean} options.forceRefresh - 是否强制刷新
|
||||
* @returns {Promise<any>} 获取的数据
|
||||
*/
|
||||
const fetchWithCache = async ({
|
||||
cacheKey,
|
||||
fetchFn,
|
||||
getState,
|
||||
stateKey,
|
||||
forceRefresh = false
|
||||
}) => {
|
||||
// 请求去重:如果有正在进行的相同请求,直接返回该 Promise
|
||||
if (!forceRefresh && pendingRequests.has(cacheKey)) {
|
||||
logger.debug('CommunityData', `复用进行中的请求: ${stateKey}`);
|
||||
return pendingRequests.get(cacheKey);
|
||||
}
|
||||
|
||||
const requestPromise = (async () => {
|
||||
try {
|
||||
// 第一级缓存:检查 Redux 状态(除非强制刷新)
|
||||
if (!forceRefresh) {
|
||||
const stateData = getState().communityData[stateKey];
|
||||
if (stateData && stateData.length > 0) {
|
||||
logger.debug('CommunityData', `Redux 状态中已有${stateKey}数据`);
|
||||
return stateData;
|
||||
}
|
||||
|
||||
// 第二级缓存:检查 localStorage
|
||||
const cachedData = localCacheManager.get(cacheKey);
|
||||
if (cachedData) {
|
||||
return cachedData;
|
||||
}
|
||||
}
|
||||
|
||||
// 第三级:从 API 获取
|
||||
logger.debug('CommunityData', `从 API 获取${stateKey}`, { forceRefresh });
|
||||
const response = await fetchFn();
|
||||
|
||||
if (response.success && response.data) {
|
||||
// 保存到 localStorage(午夜过期)
|
||||
localCacheManager.set(cacheKey, response.data, CACHE_EXPIRY_STRATEGY.MIDNIGHT);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
logger.warn('CommunityData', `API 返回数据为空:${stateKey}`);
|
||||
return [];
|
||||
} catch (error) {
|
||||
logger.error('CommunityData', `获取${stateKey}失败`, error);
|
||||
throw error;
|
||||
} finally {
|
||||
// 请求完成后清除缓存
|
||||
pendingRequests.delete(cacheKey);
|
||||
}
|
||||
})();
|
||||
|
||||
// 缓存请求 Promise
|
||||
if (!forceRefresh) {
|
||||
pendingRequests.set(cacheKey, requestPromise);
|
||||
}
|
||||
|
||||
return requestPromise;
|
||||
};
|
||||
|
||||
// ==================== Reducer 工厂函数 ====================
|
||||
|
||||
/**
|
||||
* 创建通用的 reducer cases
|
||||
* @param {Object} builder - Redux Toolkit builder
|
||||
* @param {Object} asyncThunk - createAsyncThunk 返回的对象
|
||||
* @param {string} dataKey - state 中的数据键名(如 'popularKeywords')
|
||||
*/
|
||||
const createDataReducers = (builder, asyncThunk, dataKey) => {
|
||||
builder
|
||||
.addCase(asyncThunk.pending, (state) => {
|
||||
state.loading[dataKey] = true;
|
||||
state.error[dataKey] = null;
|
||||
})
|
||||
.addCase(asyncThunk.fulfilled, (state, action) => {
|
||||
state.loading[dataKey] = false;
|
||||
state[dataKey] = action.payload;
|
||||
state.lastUpdated[dataKey] = new Date().toISOString();
|
||||
})
|
||||
.addCase(asyncThunk.rejected, (state, action) => {
|
||||
state.loading[dataKey] = false;
|
||||
state.error[dataKey] = action.payload;
|
||||
logger.error('CommunityData', `${dataKey} 加载失败`, new Error(action.payload));
|
||||
});
|
||||
};
|
||||
|
||||
// ==================== Async Thunks ====================
|
||||
|
||||
/**
|
||||
* 获取热门关键词
|
||||
* @param {boolean} forceRefresh - 是否强制刷新(跳过缓存)
|
||||
*/
|
||||
export const fetchPopularKeywords = createAsyncThunk(
|
||||
'communityData/fetchPopularKeywords',
|
||||
async (forceRefresh = false, { getState, rejectWithValue }) => {
|
||||
try {
|
||||
return await fetchWithCache({
|
||||
cacheKey: CACHE_KEYS.POPULAR_KEYWORDS,
|
||||
fetchFn: () => eventService.getPopularKeywords(20),
|
||||
getState,
|
||||
stateKey: 'popularKeywords',
|
||||
forceRefresh
|
||||
});
|
||||
} catch (error) {
|
||||
return rejectWithValue(error.message || '获取热门关键词失败');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 获取热点事件
|
||||
* @param {boolean} forceRefresh - 是否强制刷新(跳过缓存)
|
||||
*/
|
||||
export const fetchHotEvents = createAsyncThunk(
|
||||
'communityData/fetchHotEvents',
|
||||
async (forceRefresh = false, { getState, rejectWithValue }) => {
|
||||
try {
|
||||
return await fetchWithCache({
|
||||
cacheKey: CACHE_KEYS.HOT_EVENTS,
|
||||
fetchFn: () => eventService.getHotEvents({ days: 5, limit: 20 }),
|
||||
getState,
|
||||
stateKey: 'hotEvents',
|
||||
forceRefresh
|
||||
});
|
||||
} catch (error) {
|
||||
return rejectWithValue(error.message || '获取热点事件失败');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// ==================== Slice 定义 ====================
|
||||
|
||||
const communityDataSlice = createSlice({
|
||||
name: 'communityData',
|
||||
initialState: {
|
||||
// 数据
|
||||
popularKeywords: [],
|
||||
hotEvents: [],
|
||||
|
||||
// 加载状态
|
||||
loading: {
|
||||
popularKeywords: false,
|
||||
hotEvents: false
|
||||
},
|
||||
|
||||
// 错误信息
|
||||
error: {
|
||||
popularKeywords: null,
|
||||
hotEvents: null
|
||||
},
|
||||
|
||||
// 最后更新时间
|
||||
lastUpdated: {
|
||||
popularKeywords: null,
|
||||
hotEvents: null
|
||||
}
|
||||
},
|
||||
|
||||
reducers: {
|
||||
/**
|
||||
* 清除所有缓存(Redux + localStorage)
|
||||
*/
|
||||
clearCache: (state) => {
|
||||
// 清除 localStorage
|
||||
localCacheManager.removeMultiple(Object.values(CACHE_KEYS));
|
||||
|
||||
// 清除 Redux 状态
|
||||
state.popularKeywords = [];
|
||||
state.hotEvents = [];
|
||||
state.lastUpdated.popularKeywords = null;
|
||||
state.lastUpdated.hotEvents = null;
|
||||
|
||||
logger.info('CommunityData', '所有缓存已清除');
|
||||
},
|
||||
|
||||
/**
|
||||
* 清除指定类型的缓存
|
||||
* @param {string} payload - 缓存类型 ('popularKeywords' | 'hotEvents')
|
||||
*/
|
||||
clearSpecificCache: (state, action) => {
|
||||
const type = action.payload;
|
||||
|
||||
if (type === 'popularKeywords') {
|
||||
localCacheManager.remove(CACHE_KEYS.POPULAR_KEYWORDS);
|
||||
state.popularKeywords = [];
|
||||
state.lastUpdated.popularKeywords = null;
|
||||
logger.info('CommunityData', '热门关键词缓存已清除');
|
||||
} else if (type === 'hotEvents') {
|
||||
localCacheManager.remove(CACHE_KEYS.HOT_EVENTS);
|
||||
state.hotEvents = [];
|
||||
state.lastUpdated.hotEvents = null;
|
||||
logger.info('CommunityData', '热点事件缓存已清除');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 预加载数据(用于应用启动时)
|
||||
* 注意:这不是异步 action,只是触发标记
|
||||
*/
|
||||
preloadData: (state) => {
|
||||
logger.info('CommunityData', '准备预加载数据');
|
||||
// 实际的预加载逻辑在组件中调用 dispatch(fetchPopularKeywords()) 等
|
||||
}
|
||||
},
|
||||
|
||||
extraReducers: (builder) => {
|
||||
// 使用工厂函数创建 reducers,消除重复代码
|
||||
createDataReducers(builder, fetchPopularKeywords, 'popularKeywords');
|
||||
createDataReducers(builder, fetchHotEvents, 'hotEvents');
|
||||
}
|
||||
});
|
||||
|
||||
// ==================== 导出 ====================
|
||||
|
||||
export const { clearCache, clearSpecificCache, preloadData } = communityDataSlice.actions;
|
||||
|
||||
// 基础选择器(Selectors)
|
||||
export const selectPopularKeywords = (state) => state.communityData.popularKeywords;
|
||||
export const selectHotEvents = (state) => state.communityData.hotEvents;
|
||||
export const selectLoading = (state) => state.communityData.loading;
|
||||
export const selectError = (state) => state.communityData.error;
|
||||
export const selectLastUpdated = (state) => state.communityData.lastUpdated;
|
||||
|
||||
// 组合选择器
|
||||
export const selectPopularKeywordsWithLoading = (state) => ({
|
||||
data: state.communityData.popularKeywords,
|
||||
loading: state.communityData.loading.popularKeywords,
|
||||
error: state.communityData.error.popularKeywords,
|
||||
lastUpdated: state.communityData.lastUpdated.popularKeywords
|
||||
});
|
||||
|
||||
export const selectHotEventsWithLoading = (state) => ({
|
||||
data: state.communityData.hotEvents,
|
||||
loading: state.communityData.loading.hotEvents,
|
||||
error: state.communityData.error.hotEvents,
|
||||
lastUpdated: state.communityData.lastUpdated.hotEvents
|
||||
});
|
||||
|
||||
// 工具函数:检查数据是否需要刷新(超过指定时间)
|
||||
export const shouldRefresh = (lastUpdated, thresholdMinutes = 30) => {
|
||||
if (!lastUpdated) return true;
|
||||
const elapsed = Date.now() - new Date(lastUpdated).getTime();
|
||||
return elapsed > thresholdMinutes * 60 * 1000;
|
||||
};
|
||||
|
||||
export default communityDataSlice.reducer;
|
||||
299
src/store/slices/posthogSlice.js
Normal file
299
src/store/slices/posthogSlice.js
Normal file
@@ -0,0 +1,299 @@
|
||||
// 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;
|
||||
313
src/utils/CacheManager.js
Normal file
313
src/utils/CacheManager.js
Normal file
@@ -0,0 +1,313 @@
|
||||
// src/utils/CacheManager.js
|
||||
import { logger } from './logger';
|
||||
|
||||
/**
|
||||
* 缓存过期策略
|
||||
*/
|
||||
export const CACHE_EXPIRY_STRATEGY = {
|
||||
MIDNIGHT: 'midnight', // 当天午夜过期
|
||||
HOURS: 'hours', // 指定小时后过期
|
||||
NEVER: 'never' // 永不过期
|
||||
};
|
||||
|
||||
/**
|
||||
* 缓存管理器类
|
||||
* 提供统一的缓存操作接口,支持多种过期策略
|
||||
*/
|
||||
class CacheManager {
|
||||
constructor(storage = localStorage, logContext = 'CacheManager') {
|
||||
this.storage = storage;
|
||||
this.logContext = logContext;
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算过期时间
|
||||
* @param {string} strategy - 过期策略
|
||||
* @param {number} hours - 小时数(当策略为 HOURS 时使用)
|
||||
* @returns {string|null} ISO 格式的过期时间,或 null(永不过期)
|
||||
*/
|
||||
_calculateExpireTime(strategy = CACHE_EXPIRY_STRATEGY.MIDNIGHT, hours = 24) {
|
||||
if (strategy === CACHE_EXPIRY_STRATEGY.NEVER) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const expireDate = new Date();
|
||||
|
||||
if (strategy === CACHE_EXPIRY_STRATEGY.MIDNIGHT) {
|
||||
// 设置为明天凌晨 0 点
|
||||
expireDate.setDate(expireDate.getDate() + 1);
|
||||
expireDate.setHours(0, 0, 0, 0);
|
||||
} else if (strategy === CACHE_EXPIRY_STRATEGY.HOURS) {
|
||||
// 设置为指定小时后
|
||||
expireDate.setHours(expireDate.getHours() + hours);
|
||||
}
|
||||
|
||||
return expireDate.toISOString();
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查缓存是否过期
|
||||
* @param {string|null} expireAt - 过期时间(ISO 格式)
|
||||
* @returns {boolean} 是否过期
|
||||
*/
|
||||
_isExpired(expireAt) {
|
||||
if (!expireAt) return false; // null 表示永不过期
|
||||
return new Date() > new Date(expireAt);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取缓存数据
|
||||
* @param {string} key - 缓存键名
|
||||
* @returns {any|null} 缓存的数据,如果不存在或已过期返回 null
|
||||
*/
|
||||
get(key) {
|
||||
try {
|
||||
const cached = this.storage.getItem(key);
|
||||
if (!cached) return null;
|
||||
|
||||
const { data, expireAt, cachedAt } = JSON.parse(cached);
|
||||
|
||||
// 检查是否过期
|
||||
if (this._isExpired(expireAt)) {
|
||||
this.remove(key);
|
||||
logger.debug(this.logContext, '缓存已过期', { key, expireAt });
|
||||
return null;
|
||||
}
|
||||
|
||||
logger.debug(this.logContext, '使用缓存数据', {
|
||||
key,
|
||||
dataLength: Array.isArray(data) ? data.length : typeof data,
|
||||
expireAt,
|
||||
cachedAt
|
||||
});
|
||||
|
||||
return data;
|
||||
} catch (error) {
|
||||
logger.error(this.logContext, 'get 缓存失败', error, { key });
|
||||
// 清除损坏的缓存
|
||||
this.remove(key);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置缓存数据
|
||||
* @param {string} key - 缓存键名
|
||||
* @param {any} data - 要缓存的数据
|
||||
* @param {string} strategy - 过期策略
|
||||
* @param {number} hours - 小时数(当策略为 HOURS 时使用)
|
||||
* @returns {boolean} 是否设置成功
|
||||
*/
|
||||
set(key, data, strategy = CACHE_EXPIRY_STRATEGY.MIDNIGHT, hours = 24) {
|
||||
try {
|
||||
const cacheData = {
|
||||
data,
|
||||
expireAt: this._calculateExpireTime(strategy, hours),
|
||||
cachedAt: new Date().toISOString(),
|
||||
strategy
|
||||
};
|
||||
|
||||
this.storage.setItem(key, JSON.stringify(cacheData));
|
||||
|
||||
logger.debug(this.logContext, '数据已缓存', {
|
||||
key,
|
||||
dataLength: Array.isArray(data) ? data.length : typeof data,
|
||||
expireAt: cacheData.expireAt,
|
||||
strategy
|
||||
});
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
logger.error(this.logContext, 'set 缓存失败', error, { key });
|
||||
|
||||
// 处理 localStorage 配额已满
|
||||
if (error.name === 'QuotaExceededError') {
|
||||
logger.warn(this.logContext, 'Storage 配额已满,尝试清理部分缓存');
|
||||
this._handleQuotaExceeded();
|
||||
// 清理后重试一次
|
||||
try {
|
||||
this.storage.setItem(key, JSON.stringify({
|
||||
data,
|
||||
expireAt: this._calculateExpireTime(strategy, hours),
|
||||
cachedAt: new Date().toISOString(),
|
||||
strategy
|
||||
}));
|
||||
return true;
|
||||
} catch (retryError) {
|
||||
logger.error(this.logContext, '重试 set 缓存仍失败', retryError, { key });
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除指定缓存
|
||||
* @param {string} key - 缓存键名
|
||||
*/
|
||||
remove(key) {
|
||||
try {
|
||||
this.storage.removeItem(key);
|
||||
logger.debug(this.logContext, '缓存已删除', { key });
|
||||
} catch (error) {
|
||||
logger.error(this.logContext, 'remove 缓存失败', error, { key });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除缓存
|
||||
* @param {string[]} keys - 缓存键名数组
|
||||
*/
|
||||
removeMultiple(keys) {
|
||||
keys.forEach(key => this.remove(key));
|
||||
logger.info(this.logContext, '批量删除缓存完成', { count: keys.length });
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除所有缓存
|
||||
*/
|
||||
clear() {
|
||||
try {
|
||||
this.storage.clear();
|
||||
logger.info(this.logContext, '所有缓存已清除');
|
||||
} catch (error) {
|
||||
logger.error(this.logContext, 'clear 缓存失败', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查缓存是否存在且有效
|
||||
* @param {string} key - 缓存键名
|
||||
* @returns {boolean} 是否存在有效缓存
|
||||
*/
|
||||
has(key) {
|
||||
return this.get(key) !== null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取缓存元数据(不包含数据本身)
|
||||
* @param {string} key - 缓存键名
|
||||
* @returns {Object|null} 元数据对象 { expireAt, cachedAt, strategy }
|
||||
*/
|
||||
getMetadata(key) {
|
||||
try {
|
||||
const cached = this.storage.getItem(key);
|
||||
if (!cached) return null;
|
||||
|
||||
const { expireAt, cachedAt, strategy } = JSON.parse(cached);
|
||||
return { expireAt, cachedAt, strategy, isExpired: this._isExpired(expireAt) };
|
||||
} catch (error) {
|
||||
logger.error(this.logContext, 'getMetadata 失败', error, { key });
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理存储配额已满的情况
|
||||
* 优先删除最旧的或已过期的缓存
|
||||
* @private
|
||||
*/
|
||||
_handleQuotaExceeded() {
|
||||
try {
|
||||
const cacheItems = [];
|
||||
|
||||
// 收集所有缓存项
|
||||
for (let i = 0; i < this.storage.length; i++) {
|
||||
const key = this.storage.key(i);
|
||||
if (!key) continue;
|
||||
|
||||
try {
|
||||
const cached = this.storage.getItem(key);
|
||||
const { cachedAt, expireAt } = JSON.parse(cached);
|
||||
cacheItems.push({
|
||||
key,
|
||||
cachedAt: new Date(cachedAt),
|
||||
expireAt: expireAt ? new Date(expireAt) : null,
|
||||
isExpired: this._isExpired(expireAt)
|
||||
});
|
||||
} catch (e) {
|
||||
// 解析失败的项直接删除
|
||||
this.storage.removeItem(key);
|
||||
}
|
||||
}
|
||||
|
||||
// 按优先级排序:已过期 > 最旧的
|
||||
cacheItems.sort((a, b) => {
|
||||
if (a.isExpired && !b.isExpired) return -1;
|
||||
if (!a.isExpired && b.isExpired) return 1;
|
||||
return a.cachedAt - b.cachedAt;
|
||||
});
|
||||
|
||||
// 删除前 20% 的缓存
|
||||
const deleteCount = Math.max(1, Math.floor(cacheItems.length * 0.2));
|
||||
for (let i = 0; i < deleteCount; i++) {
|
||||
this.storage.removeItem(cacheItems[i].key);
|
||||
}
|
||||
|
||||
logger.info(this.logContext, `已清理 ${deleteCount} 个缓存项`);
|
||||
} catch (error) {
|
||||
logger.error(this.logContext, '_handleQuotaExceeded 失败', error);
|
||||
// 最后手段:清除所有缓存
|
||||
this.clear();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有缓存键名
|
||||
* @returns {string[]} 键名数组
|
||||
*/
|
||||
keys() {
|
||||
const keys = [];
|
||||
try {
|
||||
for (let i = 0; i < this.storage.length; i++) {
|
||||
const key = this.storage.key(i);
|
||||
if (key) keys.push(key);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(this.logContext, 'keys 获取失败', error);
|
||||
}
|
||||
return keys;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取存储使用情况(仅支持 localStorage/sessionStorage)
|
||||
* @returns {Object} { used, total, percentage }
|
||||
*/
|
||||
getStorageInfo() {
|
||||
try {
|
||||
let used = 0;
|
||||
for (let i = 0; i < this.storage.length; i++) {
|
||||
const key = this.storage.key(i);
|
||||
if (key) {
|
||||
used += (key.length + (this.storage.getItem(key)?.length || 0)) * 2; // UTF-16
|
||||
}
|
||||
}
|
||||
|
||||
// 大多数浏览器 localStorage 限制为 5-10MB
|
||||
const total = 5 * 1024 * 1024; // 5MB
|
||||
const percentage = (used / total * 100).toFixed(2);
|
||||
|
||||
return {
|
||||
used,
|
||||
total,
|
||||
percentage: parseFloat(percentage),
|
||||
usedMB: (used / 1024 / 1024).toFixed(2),
|
||||
totalMB: (total / 1024 / 1024).toFixed(2)
|
||||
};
|
||||
} catch (error) {
|
||||
logger.error(this.logContext, 'getStorageInfo 失败', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 导出单例实例(使用 localStorage)
|
||||
export const localCacheManager = new CacheManager(localStorage, 'LocalCache');
|
||||
|
||||
// 导出单例实例(使用 sessionStorage)
|
||||
export const sessionCacheManager = new CacheManager(sessionStorage, 'SessionCache');
|
||||
|
||||
// 导出类本身,供自定义实例化
|
||||
export default CacheManager;
|
||||
@@ -82,6 +82,7 @@ export const processCitationData = (rawData) => {
|
||||
// 构建引用信息映射
|
||||
citations[citationId] = {
|
||||
author: item.author || '未知作者',
|
||||
organization: item.organization || '', // 券商名/机构名,可选字段
|
||||
report_title: item.report_title || '未知报告',
|
||||
declare_date: formatDate(item.declare_date),
|
||||
sentences: item.sentences,
|
||||
|
||||
@@ -3,6 +3,43 @@
|
||||
|
||||
const isDevelopment = process.env.NODE_ENV === 'development';
|
||||
|
||||
// ========== 日志限流配置 ==========
|
||||
const LOG_THROTTLE_TIME = 1000; // 1秒内相同日志只输出一次
|
||||
const recentLogs = new Map(); // 日志缓存,用于去重
|
||||
const MAX_CACHE_SIZE = 100; // 最大缓存数量
|
||||
|
||||
/**
|
||||
* 生成日志的唯一键
|
||||
*/
|
||||
function getLogKey(component, message) {
|
||||
return `${component}:${message}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查是否应该输出日志(限流检查)
|
||||
*/
|
||||
function shouldLog(component, message) {
|
||||
const key = getLogKey(component, message);
|
||||
const now = Date.now();
|
||||
const lastLog = recentLogs.get(key);
|
||||
|
||||
// 如果1秒内已经输出过相同日志,跳过
|
||||
if (lastLog && now - lastLog < LOG_THROTTLE_TIME) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 记录日志时间
|
||||
recentLogs.set(key, now);
|
||||
|
||||
// 限制缓存大小,避免内存泄漏
|
||||
if (recentLogs.size > MAX_CACHE_SIZE) {
|
||||
const oldestKey = recentLogs.keys().next().value;
|
||||
recentLogs.delete(oldestKey);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 统一日志工具
|
||||
* 开发环境:输出详细日志
|
||||
@@ -20,7 +57,7 @@ export const logger = {
|
||||
* @param {object} data - 请求参数/body
|
||||
*/
|
||||
request: (method, url, data = null) => {
|
||||
if (isDevelopment) {
|
||||
if (isDevelopment && shouldLog('API', `${method} ${url}`)) {
|
||||
console.group(`🌐 API Request: ${method} ${url}`);
|
||||
console.log('Timestamp:', new Date().toISOString());
|
||||
if (data) console.log('Data:', data);
|
||||
@@ -36,7 +73,7 @@ export const logger = {
|
||||
* @param {any} data - 响应数据
|
||||
*/
|
||||
response: (method, url, status, data) => {
|
||||
if (isDevelopment) {
|
||||
if (isDevelopment && shouldLog('API', `${method} ${url} ${status}`)) {
|
||||
console.group(`✅ API Response: ${method} ${url}`);
|
||||
console.log('Status:', status);
|
||||
console.log('Data:', data);
|
||||
@@ -53,6 +90,7 @@ export const logger = {
|
||||
* @param {object} requestData - 请求参数(可选)
|
||||
*/
|
||||
error: (method, url, error, requestData = null) => {
|
||||
// API 错误始终输出,不做限流
|
||||
console.group(`❌ API Error: ${method} ${url}`);
|
||||
console.error('Error:', error);
|
||||
console.error('Message:', error?.message || error);
|
||||
@@ -75,6 +113,7 @@ export const logger = {
|
||||
* @param {object} context - 上下文信息(可选)
|
||||
*/
|
||||
error: (component, method, error, context = {}) => {
|
||||
// 错误日志始终输出,不做限流
|
||||
console.group(`🔴 Error in ${component}.${method}`);
|
||||
console.error('Error:', error);
|
||||
console.error('Message:', error?.message || error);
|
||||
@@ -93,7 +132,7 @@ export const logger = {
|
||||
* @param {object} data - 相关数据(可选)
|
||||
*/
|
||||
warn: (component, message, data = {}) => {
|
||||
if (isDevelopment) {
|
||||
if (isDevelopment && shouldLog(component, message)) {
|
||||
console.group(`⚠️ Warning: ${component}`);
|
||||
console.warn('Message:', message);
|
||||
if (Object.keys(data).length > 0) {
|
||||
@@ -111,7 +150,7 @@ export const logger = {
|
||||
* @param {object} data - 相关数据(可选)
|
||||
*/
|
||||
debug: (component, message, data = {}) => {
|
||||
if (isDevelopment) {
|
||||
if (isDevelopment && shouldLog(component, message)) {
|
||||
console.group(`🐛 Debug: ${component}`);
|
||||
console.log('Message:', message);
|
||||
if (Object.keys(data).length > 0) {
|
||||
@@ -129,7 +168,7 @@ export const logger = {
|
||||
* @param {object} data - 相关数据(可选)
|
||||
*/
|
||||
info: (component, message, data = {}) => {
|
||||
if (isDevelopment) {
|
||||
if (isDevelopment && shouldLog(component, message)) {
|
||||
console.group(`ℹ️ Info: ${component}`);
|
||||
console.log('Message:', message);
|
||||
if (Object.keys(data).length > 0) {
|
||||
|
||||
@@ -1,256 +0,0 @@
|
||||
// src/views/Community/components/EventFilters.js
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Row, Col, DatePicker, Button, Select, Form, Input } from 'antd';
|
||||
import { FilterOutlined } from '@ant-design/icons';
|
||||
import moment from 'moment';
|
||||
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
import { industryService } from '../../../services/industryService';
|
||||
import { logger } from '../../../utils/logger';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
const { Option } = Select;
|
||||
|
||||
const EventFilters = ({ filters, onFilterChange, loading }) => {
|
||||
const [form] = Form.useForm();
|
||||
const [industryData, setIndustryData] = useState({
|
||||
classifications: [],
|
||||
level1: [],
|
||||
level2: [],
|
||||
level3: [],
|
||||
level4: []
|
||||
});
|
||||
|
||||
// 初始化表单值
|
||||
useEffect(() => {
|
||||
const initialValues = {
|
||||
date_range: filters.date_range ? filters.date_range.split(' 至 ').map(d => moment(d)) : null,
|
||||
sort: filters.sort,
|
||||
importance: filters.importance,
|
||||
industry_classification: filters.industry_classification,
|
||||
industry_code: filters.industry_code
|
||||
};
|
||||
form.setFieldsValue(initialValues);
|
||||
}, [filters, form]);
|
||||
|
||||
// 加载行业分类数据
|
||||
const loadIndustryClassifications = async () => {
|
||||
try {
|
||||
const response = await industryService.getClassifications();
|
||||
setIndustryData(prev => ({ ...prev, classifications: response.data }));
|
||||
logger.debug('EventFilters', '行业分类加载成功', {
|
||||
count: response.data?.length || 0
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('EventFilters', 'loadIndustryClassifications', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载行业层级数据
|
||||
const loadIndustryLevels = async (level, params) => {
|
||||
try {
|
||||
const response = await industryService.getLevels(params);
|
||||
setIndustryData(prev => ({ ...prev, [`level${level}`]: response.data }));
|
||||
// 清空下级
|
||||
for (let l = level + 1; l <= 4; l++) {
|
||||
setIndustryData(prev => ({ ...prev, [`level${l}`]: [] }));
|
||||
}
|
||||
logger.debug('EventFilters', '行业层级数据加载成功', {
|
||||
level,
|
||||
count: response.data?.length || 0
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('EventFilters', 'loadIndustryLevels', error, { level, params });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadIndustryClassifications();
|
||||
}, []);
|
||||
|
||||
const handleDateRangeChange = (dates) => {
|
||||
if (dates && dates.length === 2) {
|
||||
const dateRange = `${dates[0].format('YYYY-MM-DD')} 至 ${dates[1].format('YYYY-MM-DD')}`;
|
||||
onFilterChange('date_range', dateRange);
|
||||
} else {
|
||||
onFilterChange('date_range', '');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSortChange = (value) => {
|
||||
onFilterChange('sort', value);
|
||||
};
|
||||
|
||||
const handleImportanceChange = (value) => {
|
||||
onFilterChange('importance', value);
|
||||
};
|
||||
|
||||
// 行业分类体系变化时,加载一级行业
|
||||
const handleIndustryClassificationChange = (value) => {
|
||||
form.setFieldsValue({ industry_code: '' });
|
||||
onFilterChange('industry_classification', value);
|
||||
setIndustryData(prev => ({ ...prev, level1: [], level2: [], level3: [], level4: [] }));
|
||||
if (value) {
|
||||
loadIndustryLevels(1, { classification: value, level: 1 });
|
||||
}
|
||||
};
|
||||
|
||||
// 级联选择行业
|
||||
const handleLevelChange = (level, value) => {
|
||||
// 直接从state里查找name
|
||||
let name = '';
|
||||
if (level === 1) {
|
||||
const found = industryData.level1.find(item => item.code === value);
|
||||
name = found ? found.name : '';
|
||||
} else if (level === 2) {
|
||||
const found = industryData.level2.find(item => item.code === value);
|
||||
name = found ? found.name : '';
|
||||
} else if (level === 3) {
|
||||
const found = industryData.level3.find(item => item.code === value);
|
||||
name = found ? found.name : '';
|
||||
} else if (level === 4) {
|
||||
const found = industryData.level4.find(item => item.code === value);
|
||||
name = found ? found.name : '';
|
||||
}
|
||||
form.setFieldsValue({ [`level${level}`]: value });
|
||||
form.setFieldsValue({ industry_code: value });
|
||||
onFilterChange('industry_code', value);
|
||||
for (let l = level + 1; l <= 4; l++) {
|
||||
form.setFieldsValue({ [`level${l}`]: undefined });
|
||||
}
|
||||
const params = { classification: form.getFieldValue('industry_classification'), level: level + 1 };
|
||||
if (level === 1) params.level1_name = name;
|
||||
if (level === 2) {
|
||||
params.level1_name = form.getFieldValue('level1_name');
|
||||
params.level2_name = name;
|
||||
}
|
||||
if (level === 3) {
|
||||
params.level1_name = form.getFieldValue('level1_name');
|
||||
params.level2_name = form.getFieldValue('level2_name');
|
||||
params.level3_name = name;
|
||||
}
|
||||
if (level < 4 && name) {
|
||||
loadIndustryLevels(level + 1, params);
|
||||
}
|
||||
form.setFieldsValue({ [`level${level}_name`]: name });
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="event-filters" title="事件筛选" style={{ marginBottom: 16 }}>
|
||||
<Form form={form} layout="vertical">
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item label="日期范围" name="date_range">
|
||||
<RangePicker
|
||||
style={{ width: '100%' }}
|
||||
locale={locale}
|
||||
placeholder={['开始日期', '结束日期']}
|
||||
onChange={handleDateRangeChange}
|
||||
disabled={loading}
|
||||
allowEmpty={[true, true]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Row gutter={8}>
|
||||
<Col span={12}>
|
||||
<Form.Item label="排序方式" name="sort">
|
||||
<Select onChange={handleSortChange} disabled={loading}>
|
||||
<Option value="new">最新</Option>
|
||||
<Option value="hot">热门</Option>
|
||||
<Option value="returns">收益率</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label="重要性" name="importance">
|
||||
<Select onChange={handleImportanceChange} disabled={loading}>
|
||||
<Option value="all">全部</Option>
|
||||
<Option value="S">S级</Option>
|
||||
<Option value="A">A级</Option>
|
||||
<Option value="B">B级</Option>
|
||||
<Option value="C">C级</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={6}>
|
||||
<Form.Item label="行业分类" name="industry_classification">
|
||||
<Select
|
||||
placeholder="选择行业分类体系"
|
||||
onChange={handleIndustryClassificationChange}
|
||||
disabled={loading}
|
||||
allowClear
|
||||
>
|
||||
{industryData.classifications.map(item => (
|
||||
<Option key={item.name} value={item.name}>{item.name}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item label="一级行业" name="level1">
|
||||
<Select
|
||||
placeholder="选择一级行业"
|
||||
onChange={value => handleLevelChange(1, value)}
|
||||
disabled={loading || !form.getFieldValue('industry_classification')}
|
||||
allowClear
|
||||
>
|
||||
{industryData.level1.map(item => (
|
||||
<Option key={item.code} value={item.code} data-name={item.name}>{item.name}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item label="二级行业" name="level2">
|
||||
<Select
|
||||
placeholder="选择二级行业"
|
||||
onChange={value => handleLevelChange(2, value)}
|
||||
disabled={loading || !form.getFieldValue('level1')}
|
||||
allowClear
|
||||
>
|
||||
{industryData.level2.map(item => (
|
||||
<Option key={item.code} value={item.code} data-name={item.name}>{item.name}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item label="三级行业" name="level3">
|
||||
<Select
|
||||
placeholder="选择三级行业"
|
||||
onChange={value => handleLevelChange(3, value)}
|
||||
disabled={loading || !form.getFieldValue('level2')}
|
||||
allowClear
|
||||
>
|
||||
{industryData.level3.map(item => (
|
||||
<Option key={item.code} value={item.code} data-name={item.name}>{item.name}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item label="四级行业" name="level4">
|
||||
<Select
|
||||
placeholder="选择四级行业"
|
||||
onChange={value => handleLevelChange(4, value)}
|
||||
disabled={loading || !form.getFieldValue('level3')}
|
||||
allowClear
|
||||
>
|
||||
{industryData.level4.map(item => (
|
||||
<Option key={item.code} value={item.code} data-name={item.name}>{item.name}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventFilters;
|
||||
File diff suppressed because it is too large
Load Diff
75
src/views/Community/components/EventListSection.js
Normal file
75
src/views/Community/components/EventListSection.js
Normal file
@@ -0,0 +1,75 @@
|
||||
// src/views/Community/components/EventListSection.js
|
||||
// 事件列表区域组件(包含Loading、Empty、List三种状态)
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Center,
|
||||
VStack,
|
||||
Spinner,
|
||||
Text
|
||||
} from '@chakra-ui/react';
|
||||
import EventList from './EventList';
|
||||
|
||||
/**
|
||||
* 事件列表区域组件
|
||||
* @param {boolean} loading - 加载状态
|
||||
* @param {Array} events - 事件列表
|
||||
* @param {Object} pagination - 分页信息
|
||||
* @param {Function} onPageChange - 分页变化回调
|
||||
* @param {Function} onEventClick - 事件点击回调
|
||||
* @param {Function} onViewDetail - 查看详情回调
|
||||
*/
|
||||
const EventListSection = ({
|
||||
loading,
|
||||
events,
|
||||
pagination,
|
||||
onPageChange,
|
||||
onEventClick,
|
||||
onViewDetail
|
||||
}) => {
|
||||
// ✅ 最小高度,避免加载后高度突变
|
||||
const minHeight = '600px';
|
||||
|
||||
// Loading 状态
|
||||
if (loading) {
|
||||
return (
|
||||
<Box minH={minHeight}>
|
||||
<Center py={10}>
|
||||
<VStack>
|
||||
<Spinner size="xl" color="blue.500" thickness="4px" />
|
||||
<Text color="gray.500">正在加载最新事件...</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Empty 状态
|
||||
if (!events || events.length === 0) {
|
||||
return (
|
||||
<Box minH={minHeight}>
|
||||
<Center py={10}>
|
||||
<VStack>
|
||||
<Text fontSize="lg" color="gray.500">暂无事件数据</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// List 状态
|
||||
return (
|
||||
<Box minH={minHeight}>
|
||||
<EventList
|
||||
events={events}
|
||||
pagination={pagination}
|
||||
onPageChange={onPageChange}
|
||||
onEventClick={onEventClick}
|
||||
onViewDetail={onViewDetail}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventListSection;
|
||||
63
src/views/Community/components/EventModals.js
Normal file
63
src/views/Community/components/EventModals.js
Normal file
@@ -0,0 +1,63 @@
|
||||
// src/views/Community/components/EventModals.js
|
||||
// 事件弹窗组合组件(包含详情Modal和股票Drawer)
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalCloseButton
|
||||
} from '@chakra-ui/react';
|
||||
import EventDetailModal from './EventDetailModal';
|
||||
import StockDetailPanel from './StockDetailPanel';
|
||||
|
||||
/**
|
||||
* 事件弹窗组合组件
|
||||
* @param {Object} eventModalState - 事件详情Modal状态
|
||||
* @param {boolean} eventModalState.isOpen - 是否打开
|
||||
* @param {Function} eventModalState.onClose - 关闭回调
|
||||
* @param {Object} eventModalState.event - 事件对象
|
||||
* @param {Function} eventModalState.onEventClose - 事件关闭回调(清除状态)
|
||||
* @param {Object} stockDrawerState - 股票详情Drawer状态
|
||||
* @param {boolean} stockDrawerState.visible - 是否显示
|
||||
* @param {Object} stockDrawerState.event - 事件对象
|
||||
* @param {Function} stockDrawerState.onClose - 关闭回调
|
||||
*/
|
||||
const EventModals = ({
|
||||
eventModalState,
|
||||
stockDrawerState
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
{/* 事件详情模态框 - 使用Chakra UI Modal */}
|
||||
<Modal
|
||||
isOpen={eventModalState.isOpen}
|
||||
onClose={eventModalState.onClose}
|
||||
size="xl"
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>事件详情</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb={6}>
|
||||
<EventDetailModal
|
||||
event={eventModalState.event}
|
||||
onClose={eventModalState.onEventClose}
|
||||
/>
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
{/* 股票详情抽屉 - 使用原组件自带的 Antd Drawer */}
|
||||
<StockDetailPanel
|
||||
visible={stockDrawerState.visible}
|
||||
event={stockDrawerState.event}
|
||||
onClose={stockDrawerState.onClose}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventModals;
|
||||
83
src/views/Community/components/EventTimelineCard.js
Normal file
83
src/views/Community/components/EventTimelineCard.js
Normal file
@@ -0,0 +1,83 @@
|
||||
// src/views/Community/components/EventTimelineCard.js
|
||||
// 事件时间轴卡片组件(整合Header + Search + List)
|
||||
|
||||
import React, { forwardRef } from 'react';
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
Box,
|
||||
useColorModeValue
|
||||
} from '@chakra-ui/react';
|
||||
import EventTimelineHeader from './EventTimelineHeader';
|
||||
import UnifiedSearchBox from './UnifiedSearchBox';
|
||||
import EventListSection from './EventListSection';
|
||||
|
||||
/**
|
||||
* 事件时间轴卡片组件
|
||||
* @param {Array} events - 事件列表
|
||||
* @param {boolean} loading - 加载状态
|
||||
* @param {Object} pagination - 分页信息
|
||||
* @param {Object} filters - 筛选条件
|
||||
* @param {Array} popularKeywords - 热门关键词
|
||||
* @param {Date} lastUpdateTime - 最后更新时间
|
||||
* @param {Function} onSearch - 搜索回调
|
||||
* @param {Function} onSearchFocus - 搜索框获得焦点回调
|
||||
* @param {Function} onPageChange - 分页变化回调
|
||||
* @param {Function} onEventClick - 事件点击回调
|
||||
* @param {Function} onViewDetail - 查看详情回调
|
||||
* @param {Object} ref - 用于滚动的ref
|
||||
*/
|
||||
const EventTimelineCard = forwardRef(({
|
||||
events,
|
||||
loading,
|
||||
pagination,
|
||||
filters,
|
||||
popularKeywords,
|
||||
lastUpdateTime,
|
||||
onSearch,
|
||||
onSearchFocus,
|
||||
onPageChange,
|
||||
onEventClick,
|
||||
onViewDetail,
|
||||
...rest
|
||||
}, ref) => {
|
||||
const cardBg = useColorModeValue('white', 'gray.800');
|
||||
const borderColor = useColorModeValue('gray.200', 'gray.700');
|
||||
|
||||
return (
|
||||
<Card ref={ref} {...rest} bg={cardBg} borderColor={borderColor} mb={4}>
|
||||
{/* 标题部分 */}
|
||||
<CardHeader>
|
||||
<EventTimelineHeader lastUpdateTime={lastUpdateTime} />
|
||||
</CardHeader>
|
||||
|
||||
{/* 主体内容 */}
|
||||
<CardBody>
|
||||
{/* 统一搜索组件(整合了话题、股票、行业、日期、排序、重要性、热门概念、筛选标签) */}
|
||||
<Box mb={4}>
|
||||
<UnifiedSearchBox
|
||||
onSearch={onSearch}
|
||||
onSearchFocus={onSearchFocus}
|
||||
popularKeywords={popularKeywords}
|
||||
filters={filters}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* 事件列表(包含Loading、Empty、List三种状态) */}
|
||||
<EventListSection
|
||||
loading={loading}
|
||||
events={events}
|
||||
pagination={pagination}
|
||||
onPageChange={onPageChange}
|
||||
onEventClick={onEventClick}
|
||||
onViewDetail={onViewDetail}
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
});
|
||||
|
||||
EventTimelineCard.displayName = 'EventTimelineCard';
|
||||
|
||||
export default EventTimelineCard;
|
||||
42
src/views/Community/components/EventTimelineHeader.js
Normal file
42
src/views/Community/components/EventTimelineHeader.js
Normal file
@@ -0,0 +1,42 @@
|
||||
// src/views/Community/components/EventTimelineHeader.js
|
||||
// 事件时间轴标题组件
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Flex,
|
||||
VStack,
|
||||
HStack,
|
||||
Heading,
|
||||
Text,
|
||||
Badge
|
||||
} from '@chakra-ui/react';
|
||||
import { TimeIcon } from '@chakra-ui/icons';
|
||||
|
||||
/**
|
||||
* 事件时间轴标题组件
|
||||
* @param {Date} lastUpdateTime - 最后更新时间
|
||||
*/
|
||||
const EventTimelineHeader = ({ lastUpdateTime }) => {
|
||||
return (
|
||||
<Flex justify="space-between" align="center">
|
||||
<VStack align="start" spacing={1}>
|
||||
<Heading size="md">
|
||||
<HStack>
|
||||
<TimeIcon />
|
||||
<Text>实时事件</Text>
|
||||
</HStack>
|
||||
</Heading>
|
||||
<HStack fontSize="sm" color="gray.500">
|
||||
<Badge colorScheme="green">全网监控</Badge>
|
||||
<Badge colorScheme="orange">智能捕获</Badge>
|
||||
<Badge colorScheme="purple">深度分析</Badge>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Text fontSize="xs" color="gray.500">
|
||||
最后更新: {lastUpdateTime.toLocaleTimeString()}
|
||||
</Text>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventTimelineHeader;
|
||||
@@ -1,8 +1,7 @@
|
||||
/* Hot Events Section */
|
||||
.hot-events-section {
|
||||
padding: 24px 0;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -17,11 +16,76 @@
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* Carousel */
|
||||
.carousel-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel-counter {
|
||||
position: absolute;
|
||||
top: 8px; /* 容器内部顶部 */
|
||||
right: 48px; /* 避开右侧箭头 */
|
||||
z-index: 100; /* 确保在卡片和箭头上方 */
|
||||
background: rgba(24, 144, 255, 0.95);
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
pointer-events: none; /* 不阻挡鼠标事件 */
|
||||
}
|
||||
|
||||
.hot-events-carousel {
|
||||
padding: 0 40px; /* 增加左右padding为箭头留出空间 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hot-events-carousel .carousel-item {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* 自定义箭头样式 */
|
||||
.custom-carousel-arrow {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
background: rgba(255, 255, 255, 0.9) !important;
|
||||
border-radius: 50% !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
.custom-carousel-arrow:hover {
|
||||
background: rgba(255, 255, 255, 1) !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
.custom-carousel-arrow:hover .anticon {
|
||||
color: #096dd9 !important;
|
||||
}
|
||||
|
||||
/* 箭头位置 */
|
||||
.hot-events-carousel .slick-prev.custom-carousel-arrow {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.hot-events-carousel .slick-next.custom-carousel-arrow {
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
/* 禁用状态 */
|
||||
.custom-carousel-arrow.slick-disabled {
|
||||
opacity: 0.3 !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.hot-event-card {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hot-event-card:hover {
|
||||
@@ -29,11 +93,16 @@
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* Cover image */
|
||||
/* Card body padding */
|
||||
.hot-event-card .ant-card-body {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* Cover image - 高度减半 */
|
||||
.event-cover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
height: 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -55,28 +124,53 @@
|
||||
|
||||
/* Card content */
|
||||
.event-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.event-header .ant-tag {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
flex: 1;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* 标题文字 - inline显示,可以换行 */
|
||||
.event-title {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 标签紧跟标题后面 */
|
||||
.event-tag {
|
||||
display: inline;
|
||||
margin-left: 4px;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.event-tag .ant-tag {
|
||||
font-size: 11px;
|
||||
padding: 0 6px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
transform: scale(0.9);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 详情描述 - 三行省略 */
|
||||
.event-description {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #595959;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 4.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.event-footer {
|
||||
@@ -84,6 +178,7 @@
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.creator {
|
||||
@@ -93,6 +188,19 @@
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
/* 时间样式 - 年月日高亮 */
|
||||
.time {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.time-date {
|
||||
color: #1890ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.time-hour {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,34 @@
|
||||
// src/views/Community/components/HotEvents.js
|
||||
import React from 'react';
|
||||
import { Card, Row, Col, Badge, Tag, Empty } from 'antd';
|
||||
import { ArrowUpOutlined, ArrowDownOutlined, FireOutlined } from '@ant-design/icons';
|
||||
import React, { useState } from 'react';
|
||||
import { Card, Badge, Tag, Empty, Carousel, Tooltip } from 'antd';
|
||||
import { ArrowUpOutlined, ArrowDownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import moment from 'moment';
|
||||
import './HotEvents.css';
|
||||
import defaultEventImage from '../../../assets/img/default-event.jpg'
|
||||
const HotEvents = ({ events }) => {
|
||||
|
||||
// 自定义箭头组件
|
||||
const CustomArrow = ({ className, style, onClick, direction }) => {
|
||||
const Icon = direction === 'left' ? LeftOutlined : RightOutlined;
|
||||
return (
|
||||
<div
|
||||
className={`${className} custom-carousel-arrow`}
|
||||
style={{
|
||||
...style,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Icon style={{ fontSize: '20px', color: '#1890ff' }} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const HotEvents = ({ events, onPageChange }) => {
|
||||
const navigate = useNavigate();
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
const renderPriceChange = (value) => {
|
||||
if (value === null || value === undefined) {
|
||||
@@ -39,18 +60,60 @@ const HotEvents = ({ events }) => {
|
||||
navigate(`/event-detail/${eventId}`);
|
||||
};
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = Math.ceil((events?.length || 0) / 4);
|
||||
|
||||
// Carousel 配置
|
||||
const carouselSettings = {
|
||||
dots: false, // 隐藏圆点导航
|
||||
infinite: true, // 始终启用无限循环,确保箭头显示
|
||||
speed: 500,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
arrows: true, // 保留左右箭头
|
||||
prevArrow: <CustomArrow direction="left" />,
|
||||
nextArrow: <CustomArrow direction="right" />,
|
||||
autoplay: false,
|
||||
beforeChange: (_current, next) => {
|
||||
// 计算实际页码(考虑无限循环)
|
||||
const actualPage = next % totalPages;
|
||||
setCurrentSlide(actualPage);
|
||||
// 通知父组件页码变化
|
||||
if (onPageChange) {
|
||||
onPageChange(actualPage + 1, totalPages);
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="hot-events-section">
|
||||
<h2 className="section-title">
|
||||
<FireOutlined style={{ marginRight: 8, color: '#ff4d4f' }} />
|
||||
近期热点信息
|
||||
</h2>
|
||||
<p className="section-subtitle">展示最近5天内涨幅最高的事件,助您把握市场热点</p>
|
||||
|
||||
{events && events.length > 0 ? (
|
||||
<Row gutter={[16, 16]}>
|
||||
<Carousel {...carouselSettings} className="hot-events-carousel">
|
||||
{events.map((event, index) => (
|
||||
<Col lg={6} md={12} sm={24} key={event.id}>
|
||||
<div key={event.id} className="carousel-item">
|
||||
<Card
|
||||
hoverable
|
||||
className="hot-event-card"
|
||||
@@ -75,33 +138,36 @@ const HotEvents = ({ events }) => {
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Card.Meta
|
||||
title={
|
||||
<div className="event-header">
|
||||
{renderPriceChange(event.related_avg_chg)}
|
||||
<span className="event-title">
|
||||
{event.title}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
description={
|
||||
<>
|
||||
<p className="event-description">
|
||||
{event.description && event.description.length > 80
|
||||
? `${event.description.substring(0, 80)}...`
|
||||
: event.description}
|
||||
</p>
|
||||
<div className="event-footer">
|
||||
<span className="creator">{event.creator?.username || 'Anonymous'}</span>
|
||||
<span className="time">{moment(event.created_at).format('MM-DD HH:mm')}</span>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
{/* Custom layout without Card.Meta */}
|
||||
<div className="event-header">
|
||||
<Tooltip title={event.title}>
|
||||
<span className="event-title">
|
||||
{event.title}
|
||||
</span>
|
||||
</Tooltip>
|
||||
<span className="event-tag">
|
||||
{renderPriceChange(event.related_avg_chg)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Tooltip title={event.description}>
|
||||
<div className="event-description">
|
||||
{event.description}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<div className="event-footer">
|
||||
<span className="creator">{event.creator?.username || 'Anonymous'}</span>
|
||||
<span className="time">
|
||||
<span className="time-date">{moment(event.created_at).format('YYYY-MM-DD')}</span>
|
||||
{' '}
|
||||
<span className="time-hour">{moment(event.created_at).format('HH:mm')}</span>
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</div>
|
||||
))}
|
||||
</Row>
|
||||
</Carousel>
|
||||
) : (
|
||||
<Card>
|
||||
<Empty description="暂无热点信息" />
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user