Compare commits

..

125 Commits

Author SHA1 Message Date
06beeeaee4 update pay ui 2025-12-02 14:30:27 +08:00
d1a222d9e9 update pay ui 2025-12-02 12:22:49 +08:00
bd86ccce85 update pay ui 2025-12-02 12:01:59 +08:00
ed14031d65 update pay ui 2025-12-02 11:07:45 +08:00
9b16d9d162 update pay ui 2025-12-02 10:49:50 +08:00
7708cb1a69 update pay ui 2025-12-02 10:33:55 +08:00
2395d92b17 update pay ui 2025-12-02 08:07:46 +08:00
02d5311005 update pay function 2025-12-01 14:28:46 +08:00
7fa3d26470 update pay function 2025-12-01 14:16:11 +08:00
21eb1783e9 update pay function 2025-12-01 14:01:14 +08:00
ec31801ccd update pay function 2025-12-01 07:48:03 +08:00
ff9c68295b update pay function 2025-11-30 23:58:06 +08:00
a72978c200 update pay function 2025-11-30 23:39:48 +08:00
2c4f5152e4 update pay function 2025-11-30 22:54:15 +08:00
846e66fecb update pay function 2025-11-30 22:51:24 +08:00
ef6c58b247 update pay function 2025-11-30 21:45:18 +08:00
b753d29dbf update pay function 2025-11-30 21:14:27 +08:00
455e1c1d32 update pay function 2025-11-30 18:55:35 +08:00
7b65cac358 update pay function 2025-11-30 18:45:36 +08:00
8843c81d8b update pay function 2025-11-30 18:31:13 +08:00
6763151c57 update pay function 2025-11-30 17:41:55 +08:00
9d9d3430b7 update pay function 2025-11-30 17:18:05 +08:00
25c3d9d828 update pay function 2025-11-30 17:06:34 +08:00
41368f82a7 update pay function 2025-11-30 16:39:24 +08:00
608ac4a962 update pay function 2025-11-30 16:33:34 +08:00
5a24cb9eec update pay function 2025-11-30 16:16:48 +08:00
33a3c16421 update pay function 2025-11-30 15:36:20 +08:00
2f8388ba41 update pay function 2025-11-30 13:57:39 +08:00
4127e4c816 update pay function 2025-11-30 13:47:47 +08:00
05aa0c89f0 update pay function 2025-11-30 13:38:29 +08:00
14ab2f62f3 update pay function 2025-11-30 09:15:24 +08:00
fc738dc639 update pay function 2025-11-29 18:43:43 +08:00
059275d1a2 update pay function 2025-11-29 18:28:32 +08:00
d14be2081d update pay function 2025-11-29 14:07:55 +08:00
1676d69917 update pay function 2025-11-29 13:47:18 +08:00
20b3d624f0 update pay function 2025-11-29 10:05:57 +08:00
34323cc63d update pay function 2025-11-29 09:42:41 +08:00
42fdb7d754 update pay function 2025-11-29 08:16:41 +08:00
5526705254 update pay function 2025-11-28 17:57:10 +08:00
f6e8d673a8 update pay function 2025-11-28 17:00:02 +08:00
547424fff6 update pay function 2025-11-28 16:51:28 +08:00
ec2978026a update pay function 2025-11-28 16:32:27 +08:00
250d585b87 update pay function 2025-11-28 16:08:31 +08:00
8cf2850660 update pay function 2025-11-28 15:32:03 +08:00
9b7a221315 update pay function 2025-11-28 14:49:16 +08:00
18f8f75116 update pay function 2025-11-28 14:09:47 +08:00
56a7ca7eb3 update pay function 2025-11-28 14:00:36 +08:00
c1937b9e31 update pay function 2025-11-28 12:37:01 +08:00
9c5900c7f5 update pay function 2025-11-28 12:27:30 +08:00
007de2d76d update pay function 2025-11-28 09:45:36 +08:00
49656e6e88 update pay function 2025-11-28 09:17:44 +08:00
bc6e993dec update pay function 2025-11-28 08:59:36 +08:00
72a490c789 update pay function 2025-11-28 08:52:09 +08:00
zdl
b88bfebcef Merge branch 'feature_2025/251121_h5UI' into feature_2025/251117_pref
* feature_2025/251121_h5UI:
  feat: 传导练UI调整
  fix: UI调试
  fix: 调整相关概念卡片UI
  fix: 文案调整
  fix: AI合成h5换行,pc一行,评论标题上方margin去掉
  fix: 调整AI合成UI
  fix: 分时图UI调整
  fix:事件详情弹窗UI
  fix:调整客服UI
  fix: 事件详情弹窗UI调整
  fix: 事件详情弹窗UI调整 重要性h5不展示 事件列表卡片间距调整
  fix: h5 去掉通知弹窗引导
  fix: 关注按钮UI调整
2025-11-28 07:15:11 +08:00
zdl
cf4fdf6a68 feat: 传导练UI调整 2025-11-28 07:14:52 +08:00
zdl
34338373cd fix: UI调试 2025-11-27 18:27:44 +08:00
zdl
589e1c20f9 fix: 调整相关概念卡片UI 2025-11-27 17:22:49 +08:00
zdl
60e9a40a1f fix: 文案调整 2025-11-27 17:03:35 +08:00
zdl
b8b24643fe fix: AI合成h5换行,pc一行,评论标题上方margin去掉 2025-11-27 16:55:25 +08:00
zdl
e9e9ec9051 fix: 调整AI合成UI 2025-11-27 16:40:35 +08:00
zdl
5b0e420770 fix: 分时图UI调整 2025-11-27 16:20:15 +08:00
zdl
93f43054fd fix:事件详情弹窗UI 2025-11-27 15:35:48 +08:00
zdl
101d042b0e fix:调整客服UI 2025-11-27 15:31:07 +08:00
zdl
a1aa6718e6 fix: 事件详情弹窗UI调整 2025-11-27 15:08:14 +08:00
zdl
753727c1c0 fix: 事件详情弹窗UI调整
重要性h5不展示
事件列表卡片间距调整
2025-11-27 14:40:38 +08:00
zdl
afc92ee583 fix: h5 去掉通知弹窗引导 2025-11-27 13:37:01 +08:00
900aff17df update pay function 2025-11-27 11:28:57 +08:00
zdl
d825e4fe59 fix: 关注按钮UI调整 2025-11-27 11:19:20 +08:00
zdl
62cf0a6c7d feat: 修改小程序跳转链接 2025-11-27 10:46:14 +08:00
zdl
805d446775 feat: 调整搜索框UI 2025-11-26 19:33:00 +08:00
zdl
24ddfcd4b5 feat: 新增:H5 时左右 padding 改为 8px 2025-11-26 19:31:12 +08:00
zdl
a90158239b feat: 模式切花移动到标题恻,通知UI调整 2025-11-26 19:11:33 +08:00
zdl
a8d4245595 pref: 文案调整 2025-11-26 17:49:39 +08:00
zdl
5aedde7528 feat:H5 移动端已隐藏整个顶部控制栏 2025-11-26 16:51:52 +08:00
zdl
f5f89a1c72 feat:箭头绝对定位
移除左右 padding
隐藏重复箭头
2025-11-26 16:50:46 +08:00
zdl
e0b7f8c59d feat: 调整事件列表h5模式调整 2025-11-26 16:44:53 +08:00
zdl
d22d75e761 pref: h5 分页UI调整 2025-11-26 16:35:49 +08:00
zdl
30fc156474 fix: 移动端事件中心事件列表添加时间 2025-11-26 16:23:28 +08:00
zdl
572665199a feat: 删除事件中心页面不再显示桌面通知提示横幅 2025-11-26 16:18:15 +08:00
zdl
a2831c82a8 feat: 移动端不显示政策标签 2025-11-26 16:02:59 +08:00
zdl
217551b6ab feat: H5 移动端将隐藏"开启通知"组件,桌面端保持正常显示 2025-11-26 16:01:58 +08:00
zdl
022271947a fix: 移动端抽屉菜单不再显示深色模式切换按钮 2025-11-26 15:47:26 +08:00
zdl
cd6ffdbe68 fix: 修复hooks报错 2025-11-26 15:45:46 +08:00
zdl
9df725b748 feat: 精简日志 2025-11-26 15:34:11 +08:00
zdl
64f8914951 feat: logger.js - 添加日志级别控制 2025-11-26 15:30:31 +08:00
zdl
506e5a448c feat: 本地优先启动服务拦截 2025-11-26 15:23:37 +08:00
zdl
e277352133 src/contexts/NotificationContext.js
- 添加 selectIsMobile 导入 在 NotificationProvider 组件开头添加移动端检测 移动端返回空壳 Provider
  - 桌面端保持原有完整功能
  移除 ConnectionStatusBar 组件和 ConnectionStatusBarWrapper(所有端)
  - 移除了不再使用的 useNotification、useLocation、logger 导入
  - 添加了 Redux selectIsMobile 检测
  - 移动端不渲染 NotificationContainer
2025-11-26 15:15:20 +08:00
zdl
87437ed229 feat: 增加 wechat_login=success 参数处理 2025-11-26 14:52:49 +08:00
zdl
037471d880 feat: 修复 Mock 路径从 h5-auth-url → h5-auth 2025-11-26 14:52:05 +08:00
zdl
0c482bc72c feat: 回调处理增加 H5 模式判断,重定向到前端回调页 2025-11-26 14:51:51 +08:00
zdl
4aebb3bf4b feat: 调整导航栏高度 2025-11-26 14:10:09 +08:00
zdl
ed241bd9c5 pref: 导航选中高亮 2025-11-26 14:01:58 +08:00
zdl
e6ede81c78 feat: 修复动态 reducer 注入导致的运行时错误 2025-11-26 13:59:26 +08:00
zdl
a0b688da80 feat: 移除 PerformanceMonitor 调试日志 2025-11-26 13:42:42 +08:00
zdl
6bd09b797d feat: PostHog 加载策略优化计划
目标

     改进 PostHog 延迟加载策略,平衡首屏性能和数据完整性:
     1. 使用 requestIdleCallback 替代固定 2 秒延迟
     2. 保留关键事件(first_visit)的同步追踪,确保数据不丢失
2025-11-26 13:41:09 +08:00
zdl
9c532b5f18 pref: 删除微信登陆日志 2025-11-26 13:38:26 +08:00
zdl
1d1d6c8169 pref: P0: PostHog 延迟加载 - 完成
P0: HeroPanel 懒加载 -  完成
 P0/P1: Charts/FullCalendar 懒加载 -  已通过路由懒加载隔离,无需额外处理
删除空的 CSS 文件
2025-11-26 13:33:58 +08:00
zdl
3507cfe9f7 pref: 删除调试工具 2025-11-26 13:16:30 +08:00
zdl
cc520893f8 fix: 添加 wechatStatusRef 用于跟踪最新状态
使用 wechatStatusRef.current 替代 wechatStatus
添加 AUTHORIZED 状态处理逻辑
添加 useEffect 同步 wechatStatusRef
2025-11-26 13:07:46 +08:00
zdl
dabedc1c0b feat: 之前的防重复逻辑 !subscriptionInfo.type 永远为 false(因为初始值是 free),导致订阅 API 从不被调用 2025-11-26 11:49:12 +08:00
zdl
7b4c4be7bf pref:点击手机登陆后日志优化 2025-11-26 11:43:16 +08:00
zdl
7a2c73f3ca :pref: 首屏优化 2025-11-26 11:30:12 +08:00
zdl
105a0b02ea fix:移除日志 2025-11-26 11:17:03 +08:00
zdl
d8a4c20565 fix: Login Page Viewed 事件仅在模态框首次打开时触发 1 次
- 验证码倒计时期间不再重复触发
     - 不影响其他事件追踪功能\
2025-11-26 11:15:04 +08:00
zdl
5f959fb44f feat: 添加 认证检查 和 首页渲染 的性能标记 2025-11-26 11:10:50 +08:00
zdl
ee78e00d3b feat: 添加设备检测功能 2025-11-26 11:03:13 +08:00
zdl
2fcc341213 feat: 修复通知初始化问题 2025-11-26 10:55:38 +08:00
zdl
1090a2fc67 feat: 客服接口mock添加 2025-11-26 10:55:18 +08:00
zdl
77f3949fe2 feat: 首页添加性能监控 2025-11-26 10:54:57 +08:00
zdl
742ab337dc feat: 更新测试用例 2025-11-26 10:54:20 +08:00
zdl
d2b6904a4a pref: 删除无用组件 2025-11-26 10:40:14 +08:00
zdl
789a6229a7 feat: 添加设备类型 2025-11-26 10:39:33 +08:00
zdl
6886a649f5 perf: Socket 连接异步化,使用 requestIdleCallback 不阻塞首屏
- NotificationContext: 将 Socket 初始化包裹在 requestIdleCallback 中
- 设置 3 秒超时保护,确保连接不会被无限延迟
- 不支持 requestIdleCallback 的浏览器自动降级到 setTimeout(0)
- socket/index.js: 移除模块加载时的 console.log,减少首屏阻塞感知
- 所有页面的首屏渲染都不再被 Socket 连接阻塞

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 10:34:45 +08:00
zdl
581e874b0d fix:修复类型提示错误 2025-11-26 10:11:02 +08:00
zdl
b23ed93020 Merge branch 'feature_2025/251117_pref' into feature_2025/251121_h5UI
* feature_2025/251117_pref:
  update pay function
  update pay function
  update pay function
2025-11-26 09:59:01 +08:00
zdl
84f70f3329 pref: 权限校验中 - 显示占位骨架,不显示登录按钮或用户菜单,/home页面添加骨架屏逻辑 2025-11-26 09:57:20 +08:00
zdl
601b06d79e fix: 修复 AgentChat hooks 中的 logger 调用 2025-11-26 09:47:54 +08:00
zdl
0818a7bff7 fix: 修复 logger 函数签名问题 2025-11-26 09:44:21 +08:00
ce19881181 update pay function 2025-11-26 09:06:02 +08:00
bef3e86f60 update pay function 2025-11-26 09:00:38 +08:00
65deea43e2 update pay function 2025-11-26 08:44:22 +08:00
c7a881c965 update pay function 2025-11-25 20:22:45 +08:00
6932796b00 update pay function 2025-11-25 19:38:50 +08:00
zdl
03f1331202 feat: homets 化 创建类型定义文件
创建常量配置文件
 创建自定义 Hook

 创建组件目录
创建 HeroHeader 组件
创建 FeaturedFeatureCard 组件
创建 FeatureCard 组件
创建新的 HomePage.tsx
2025-11-25 17:58:53 +08:00
zdl
c771f7cae6 feat: 首页删除ME-Agent 实时分析系统 2025-11-25 17:58:36 +08:00
180 changed files with 24691 additions and 6680 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

824
app.py
View File

@@ -26,6 +26,7 @@ import re
import string
from datetime import datetime, timedelta, time as dt_time, date
from clickhouse_driver import Client as Cclient
from elasticsearch import Elasticsearch
from flask_cors import CORS
from collections import defaultdict
@@ -138,6 +139,15 @@ engine_2 = create_engine(
pool_timeout=30,
max_overflow=10
)
# Elasticsearch 客户端初始化
es_client = Elasticsearch(
hosts=["http://222.128.1.157:19200"],
request_timeout=30,
max_retries=3,
retry_on_timeout=True
)
app = Flask(__name__)
# 存储验证码的临时字典生产环境应使用Redis
verification_codes = {}
@@ -1500,8 +1510,8 @@ def initialize_subscription_plans_safe():
pro_plan = SubscriptionPlan(
name='pro',
display_name='Pro版',
description='适合个人投资者的基础功能套餐',
display_name='Pro 专业',
description='事件关联股票深度分析 | 历史事件智能对比复盘 | 事件概念关联与挖掘 | 概念板块个股追踪 | 概念深度研报与解读 | 个股异动实时预警',
monthly_price=0.01,
yearly_price=0.08,
features=json.dumps([
@@ -1516,8 +1526,8 @@ def initialize_subscription_plans_safe():
max_plan = SubscriptionPlan(
name='max',
display_name='Max版',
description='适合专业投资者的全功能套餐',
display_name='Max 旗舰',
description='包含Pro版全部功能 | 事件传导链路智能分析 | 概念演变时间轴追溯 | 个股全方位深度研究 | 价小前投研助手无限使用 | 新功能优先体验权 | 专属客服一对一服务',
monthly_price=0.1,
yearly_price=0.8,
features=json.dumps([
@@ -3465,6 +3475,46 @@ def get_wechat_qrcode():
}}), 200
@app.route('/api/auth/wechat/h5-auth', methods=['POST'])
def get_wechat_h5_auth_url():
"""
获取微信 H5 网页授权 URL
用于手机浏览器跳转微信 App 授权
"""
data = request.get_json() or {}
frontend_redirect = data.get('redirect_url', '/home')
# 生成唯一 state
state = uuid.uuid4().hex
# 编码回调地址
redirect_uri = urllib.parse.quote_plus(WECHAT_REDIRECT_URI)
# 构建授权 URL使用 snsapi_userinfo 获取用户信息,仅限微信内 H5 使用)
auth_url = (
f"https://open.weixin.qq.com/connect/oauth2/authorize?"
f"appid={WECHAT_APPID}&redirect_uri={redirect_uri}"
f"&response_type=code&scope=snsapi_userinfo&state={state}"
"#wechat_redirect"
)
# 存储 session 信息
wechat_qr_sessions[state] = {
'status': 'waiting',
'expires': time.time() + 300,
'mode': 'h5', # 标记为 H5 模式
'frontend_redirect': frontend_redirect,
'user_info': None,
'wechat_openid': None,
'wechat_unionid': None
}
return jsonify({
'auth_url': auth_url,
'state': state
}), 200
@app.route('/api/account/wechat/qrcode', methods=['GET'])
def get_wechat_bind_qrcode():
"""发起微信绑定二维码,会话标记为绑定模式"""
@@ -3704,14 +3754,23 @@ def wechat_callback():
# 更新微信session状态供前端轮询检测
if state in wechat_qr_sessions:
session_item = wechat_qr_sessions[state]
# 仅处理登录/注册流程,不处理绑定流程
if not session_item.get('mode'):
# 更新状态和用户信息
mode = session_item.get('mode')
# H5 模式:重定向到前端回调页面
if mode == 'h5':
frontend_redirect = session_item.get('frontend_redirect', '/home/wechat-callback')
# 清理 session
del wechat_qr_sessions[state]
print(f"✅ H5 微信登录成功,重定向到: {frontend_redirect}")
return redirect(f"{frontend_redirect}?wechat_login=success")
# PC 扫码模式:更新状态供前端轮询
if not mode:
session_item['status'] = 'register_ready' if is_new_user else 'login_ready'
session_item['user_info'] = {'user_id': user.id}
print(f"✅ 微信扫码状态已更新: {session_item['status']}, user_id: {user.id}")
# 直接跳转到首页
# PC 模式直接跳转到首页
return redirect('/home')
except Exception as e:
@@ -4550,20 +4609,10 @@ def get_my_following_future_events():
)
events = []
# 所有返回的事件都是已关注的
following_ids = set(future_event_ids)
for row in result:
event_data = {
'id': row.data_id,
'title': row.title,
'type': row.type,
'calendar_time': row.calendar_time.isoformat(),
'star': row.star,
'former': row.former,
'forecast': row.forecast,
'fact': row.fact,
'is_following': True, # 这些都是已关注的
'related_stocks': parse_json_field(row.related_stocks),
'concepts': parse_json_field(row.concepts)
}
event_data = process_future_event_row(row, following_ids)
events.append(event_data)
return jsonify({'success': True, 'data': events})
@@ -5369,31 +5418,26 @@ def get_related_stocks(event_id):
stocks_data = []
for stock in stocks:
if stock.retrieved_sources is not None:
stocks_data.append({
'id': stock.id,
'stock_code': stock.stock_code,
'stock_name': stock.stock_name,
'sector': stock.sector,
'relation_desc': {"data":stock.retrieved_sources},
'retrieved_sources': stock.retrieved_sources,
'correlation': stock.correlation,
'momentum': stock.momentum,
'created_at': stock.created_at.isoformat() if stock.created_at else None,
'updated_at': stock.updated_at.isoformat() if stock.updated_at else None
})
# 处理 relation_desc只有当 retrieved_sources 是数组时才使用新格式
if stock.retrieved_sources is not None and isinstance(stock.retrieved_sources, list):
# retrieved_sources 是有效数组,使用新格式
relation_desc_value = {"data": stock.retrieved_sources}
else:
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,
'updated_at': stock.updated_at.isoformat() if stock.updated_at else None
})
# retrieved_sources 不是数组(可能是 {"raw": "..."} 等异常格式),回退到原始文本
relation_desc_value = stock.relation_desc
stocks_data.append({
'id': stock.id,
'stock_code': stock.stock_code,
'stock_name': stock.stock_name,
'sector': stock.sector,
'relation_desc': relation_desc_value,
'retrieved_sources': stock.retrieved_sources,
'correlation': stock.correlation,
'momentum': stock.momentum,
'created_at': stock.created_at.isoformat() if stock.created_at else None,
'updated_at': stock.updated_at.isoformat() if stock.updated_at else None
})
return jsonify({
'success': True,
@@ -5769,18 +5813,29 @@ def get_stock_quotes():
current_time = datetime.now()
client = get_clickhouse_client()
# Get stock names from MySQL
# Get stock names from MySQL(批量查询优化)
stock_names = {}
with engine.connect() as conn:
for code in codes:
codez = code.split('.')[0]
# 提取不带后缀的股票代码
base_codes = list(set([code.split('.')[0] for code in codes]))
if base_codes:
# 批量查询所有股票名称
placeholders = ','.join([f':code{i}' for i in range(len(base_codes))])
params = {f'code{i}': code for i, code in enumerate(base_codes)}
result = conn.execute(text(
"SELECT SECNAME FROM ea_stocklist WHERE SECCODE = :code"
), {"code": codez}).fetchone()
if result:
stock_names[code] = result[0]
else:
stock_names[code] = f"股票{codez}"
f"SELECT SECCODE, SECNAME FROM ea_stocklist WHERE SECCODE IN ({placeholders})"
), params).fetchall()
# 构建代码到名称的映射
base_name_map = {row[0]: row[1] for row in result}
# 为每个完整代码(带后缀)分配名称
for code in codes:
base_code = code.split('.')[0]
if base_code in base_name_map:
stock_names[code] = base_name_map[base_code]
else:
stock_names[code] = f"股票{base_code}"
def get_trading_day_and_times(event_datetime):
event_date = event_datetime.date()
@@ -5852,65 +5907,111 @@ def get_stock_quotes():
})
results = {}
print(f"处理股票代码: {codes}, 交易日: {trading_day}, 时间范围: {start_datetime} - {end_datetime}")
print(f"批量处理 {len(codes)} 只股票: {codes[:5]}{'...' if len(codes) > 5 else ''}, 交易日: {trading_day}, 时间范围: {start_datetime} - {end_datetime}")
for code in codes:
try:
print(f"正在查询股票 {code} 的价格数据...")
# Get the first price and last price for the trading period
data = client.execute("""
WITH first_price AS (SELECT close
FROM stock_minute
WHERE code = %(code)s
AND timestamp >= %(start)s
AND timestamp <= %(end)s
ORDER BY timestamp
LIMIT 1
),
last_price AS (
SELECT close
FROM stock_minute
WHERE code = %(code)s
AND timestamp >= %(start)s
AND timestamp <= %(end)s
ORDER BY timestamp DESC
LIMIT 1
)
SELECT last_price.close as last_price,
(last_price.close - first_price.close) / first_price.close * 100 as change
FROM last_price
CROSS JOIN first_price
WHERE EXISTS (SELECT 1 FROM first_price)
AND EXISTS (SELECT 1 FROM last_price)
""", {
'code': code,
'start': start_datetime,
'end': end_datetime
})
# ==================== 性能优化:批量查询所有股票数据 ====================
# 使用 IN 子句一次查询所有股票,避免逐只循环查询
try:
# 批量查询价格和涨跌幅数据(使用窗口函数)
batch_price_query = """
WITH first_prices AS (
SELECT
code,
close as first_price,
ROW_NUMBER() OVER (PARTITION BY code ORDER BY timestamp ASC) as rn
FROM stock_minute
WHERE code IN %(codes)s
AND timestamp >= %(start)s
AND timestamp <= %(end)s
),
last_prices AS (
SELECT
code,
close as last_price,
ROW_NUMBER() OVER (PARTITION BY code ORDER BY timestamp DESC) as rn
FROM stock_minute
WHERE code IN %(codes)s
AND timestamp >= %(start)s
AND timestamp <= %(end)s
)
SELECT
fp.code,
lp.last_price,
(lp.last_price - fp.first_price) / fp.first_price * 100 as change_pct
FROM first_prices fp
INNER JOIN last_prices lp ON fp.code = lp.code
WHERE fp.rn = 1 AND lp.rn = 1
"""
print(f"股票 {code} 查询结果: {data}")
if data and data[0] and data[0][0] is not None:
price = float(data[0][0]) if data[0][0] is not None else None
change = float(data[0][1]) if data[0][1] is not None else None
batch_data = client.execute(batch_price_query, {
'codes': codes,
'start': start_datetime,
'end': end_datetime
})
print(f"批量查询返回 {len(batch_data)} 条价格数据")
# 解析批量查询结果
price_data_map = {}
for row in batch_data:
code = row[0]
last_price = float(row[1]) if row[1] is not None else None
change_pct = float(row[2]) if row[2] is not None else None
price_data_map[code] = {
'price': last_price,
'change': change_pct
}
# 组装结果(所有股票)
for code in codes:
price_info = price_data_map.get(code)
if price_info:
results[code] = {
'price': price,
'change': change,
'price': price_info['price'],
'change': price_info['change'],
'name': stock_names.get(code, f'股票{code.split(".")[0]}')
}
else:
# 批量查询没有返回的股票
results[code] = {
'price': None,
'change': None,
'name': stock_names.get(code, f'股票{code.split(".")[0]}')
}
except Exception as e:
print(f"Error processing stock {code}: {e}")
results[code] = {
'price': None,
'change': None,
'name': stock_names.get(code, f'股票{code.split(".")[0]}')
}
except Exception as e:
print(f"批量查询 ClickHouse 失败: {e},回退到逐只查询")
# 降级方案:逐只股票查询(保持向后兼容)
for code in codes:
try:
data = client.execute("""
WITH first_price AS (
SELECT close FROM stock_minute
WHERE code = %(code)s AND timestamp >= %(start)s AND timestamp <= %(end)s
ORDER BY timestamp LIMIT 1
),
last_price AS (
SELECT close FROM stock_minute
WHERE code = %(code)s AND timestamp >= %(start)s AND timestamp <= %(end)s
ORDER BY timestamp DESC LIMIT 1
)
SELECT last_price.close as last_price,
(last_price.close - first_price.close) / first_price.close * 100 as change
FROM last_price CROSS JOIN first_price
WHERE EXISTS (SELECT 1 FROM first_price) AND EXISTS (SELECT 1 FROM last_price)
""", {'code': code, 'start': start_datetime, 'end': end_datetime})
if data and data[0] and data[0][0] is not None:
results[code] = {
'price': float(data[0][0]) if data[0][0] is not None else None,
'change': float(data[0][1]) if data[0][1] is not None else None,
'name': stock_names.get(code, f'股票{code.split(".")[0]}')
}
else:
results[code] = {'price': None, 'change': None, 'name': stock_names.get(code, f'股票{code.split(".")[0]}')}
except Exception as inner_e:
print(f"Error processing stock {code}: {inner_e}")
results[code] = {'price': None, 'change': None, 'name': stock_names.get(code, f'股票{code.split(".")[0]}')}
# 返回标准格式
return jsonify({'success': True, 'data': results})
@@ -6035,17 +6136,9 @@ def account_calendar_events():
future_events = []
if future_event_ids:
# 使用 SELECT * 以便获取所有字段(包括新字段)
base_sql = """
SELECT data_id, \
title, \
type, \
calendar_time, \
star, \
former, \
forecast, \
fact, \
related_stocks, \
concepts
SELECT *
FROM future_events
WHERE data_id IN :event_ids \
"""
@@ -6063,12 +6156,24 @@ def account_calendar_events():
result = db.session.execute(text(base_sql), params)
for row in result:
# related_stocks 形如 [[code,name,reason,score], ...]
rs = parse_json_field(row.related_stocks)
# 使用新字段回退逻辑获取 former
former_value = get_future_event_field(row, 'second_modified_text', 'former')
# 获取 related_stocks优先使用 best_matches
best_matches = getattr(row, 'best_matches', None) if hasattr(row, 'best_matches') else None
if best_matches and str(best_matches).strip():
rs = parse_best_matches(best_matches)
else:
rs = parse_json_field(getattr(row, 'related_stocks', None))
# 生成股票标签列表
stock_tags = []
try:
for it in rs:
if isinstance(it, (list, tuple)) and len(it) >= 2:
if isinstance(it, dict):
# 新结构
stock_tags.append(f"{it.get('code', '')} {it.get('name', '')}")
elif isinstance(it, (list, tuple)) and len(it) >= 2:
stock_tags.append(f"{it[0]} {it[1]}")
elif isinstance(it, str):
stock_tags.append(it)
@@ -6081,7 +6186,7 @@ def account_calendar_events():
'event_date': (row.calendar_time.date().isoformat() if row.calendar_time else None),
'type': 'future_event',
'importance': int(row.star) if getattr(row, 'star', None) is not None else 3,
'description': row.former or '',
'description': former_value or '',
'stocks': stock_tags,
'is_following': True,
'source': 'future'
@@ -7184,6 +7289,135 @@ def get_timeline_data(stock_code, event_datetime, stock_name):
# ==================== 指数行情API与股票逻辑一致数据表为 index_minute ====================
@app.route('/api/index/<index_code>/realtime')
def get_index_realtime(index_code):
"""
获取指数实时行情(用于交易时间内的行情更新)
从 index_minute 表获取最新的分钟数据
返回: 最新价、涨跌幅、涨跌额、开盘价、最高价、最低价、昨收价
"""
# 确保指数代码包含后缀ClickHouse 中存储的是带后缀的代码)
# 上证指数: 000xxx.SH, 深证指数: 399xxx.SZ
if '.' not in index_code:
if index_code.startswith('399'):
index_code = f"{index_code}.SZ"
else:
# 000开头的上证指数以及其他指数默认上海
index_code = f"{index_code}.SH"
client = get_clickhouse_client()
today = date.today()
# 判断今天是否是交易日
if today not in trading_days_set:
# 非交易日,获取最近一个交易日的收盘数据
target_date = get_trading_day_near_date(today)
if not target_date:
return jsonify({
'success': False,
'error': 'No trading day found',
'data': None
})
is_trading = False
else:
target_date = today
# 判断是否在交易时间内
now = datetime.now()
current_minutes = now.hour * 60 + now.minute
# 9:30-11:30 = 570-690, 13:00-15:00 = 780-900
is_trading = (570 <= current_minutes <= 690) or (780 <= current_minutes <= 900)
try:
# 获取当天/最近交易日的第一条数据(开盘价)和最后一条数据(最新价)
# 同时获取最高价和最低价
data = client.execute(
"""
SELECT
min(open) as first_open,
max(high) as day_high,
min(low) as day_low,
argMax(close, timestamp) as latest_close,
argMax(timestamp, timestamp) as latest_time
FROM index_minute
WHERE code = %(code)s
AND toDate(timestamp) = %(date)s
""",
{
'code': index_code,
'date': target_date,
}
)
if not data or not data[0] or data[0][3] is None:
return jsonify({
'success': False,
'error': 'No data available',
'data': None
})
row = data[0]
first_open = float(row[0]) if row[0] else None
day_high = float(row[1]) if row[1] else None
day_low = float(row[2]) if row[2] else None
latest_close = float(row[3]) if row[3] else None
latest_time = row[4]
# 获取昨收价(从 MySQL ea_exchangetrade 表)
code_no_suffix = index_code.split('.')[0]
prev_close = None
with engine.connect() as conn:
# 获取前一个交易日的收盘价
prev_result = conn.execute(text(
"""
SELECT F006N
FROM ea_exchangetrade
WHERE INDEXCODE = :code
AND TRADEDATE < :today
ORDER BY TRADEDATE DESC LIMIT 1
"""
), {
'code': code_no_suffix,
'today': datetime.combine(target_date, dt_time(0, 0, 0))
}).fetchone()
if prev_result and prev_result[0]:
prev_close = float(prev_result[0])
# 计算涨跌额和涨跌幅
change_amount = None
change_pct = None
if latest_close is not None and prev_close is not None and prev_close > 0:
change_amount = latest_close - prev_close
change_pct = (change_amount / prev_close) * 100
return jsonify({
'success': True,
'data': {
'code': index_code,
'price': latest_close,
'open': first_open,
'high': day_high,
'low': day_low,
'prev_close': prev_close,
'change': change_amount,
'change_pct': change_pct,
'update_time': latest_time.strftime('%H:%M:%S') if latest_time else None,
'trade_date': target_date.strftime('%Y-%m-%d'),
'is_trading': is_trading,
}
})
except Exception as e:
logger.error(f"获取指数实时行情失败: {index_code}, 错误: {str(e)}")
return jsonify({
'success': False,
'error': str(e),
'data': None
}), 500
@app.route('/api/index/<index_code>/kline')
def get_index_kline(index_code):
chart_type = request.args.get('type', 'minute')
@@ -7489,47 +7723,8 @@ def get_calendar_events():
user_following_ids = {f.future_event_id for f in follows}
for row in result:
event_data = {
'id': row.data_id,
'title': row.title,
'type': row.type,
'calendar_time': row.calendar_time.isoformat(),
'star': row.star,
'former': row.former,
'forecast': row.forecast,
'fact': row.fact,
'is_following': row.data_id in user_following_ids
}
# 解析相关股票和概念
if row.related_stocks:
try:
if isinstance(row.related_stocks, str):
if row.related_stocks.startswith('['):
event_data['related_stocks'] = json.loads(row.related_stocks)
else:
event_data['related_stocks'] = row.related_stocks.split(',')
else:
event_data['related_stocks'] = row.related_stocks
except:
event_data['related_stocks'] = []
else:
event_data['related_stocks'] = []
if row.concepts:
try:
if isinstance(row.concepts, str):
if row.concepts.startswith('['):
event_data['concepts'] = json.loads(row.concepts)
else:
event_data['concepts'] = row.concepts.split(',')
else:
event_data['concepts'] = row.concepts
except:
event_data['concepts'] = []
else:
event_data['concepts'] = []
# 使用统一的处理函数,支持新字段回退和 best_matches 解析
event_data = process_future_event_row(row, user_following_ids)
events.append(event_data)
return jsonify({
@@ -7555,28 +7750,18 @@ def get_calendar_event_detail(event_id):
'error': 'Event not found'
}), 404
event_data = {
'id': result.data_id,
'title': result.title,
'type': result.type,
'calendar_time': result.calendar_time.isoformat(),
'star': result.star,
'former': result.former,
'forecast': result.forecast,
'fact': result.fact,
'related_stocks': parse_json_field(result.related_stocks),
'concepts': parse_json_field(result.concepts)
}
# 检查当前用户是否关注了该未来事件
user_following_ids = set()
if 'user_id' in session:
is_following = FutureEventFollow.query.filter_by(
user_id=session['user_id'],
future_event_id=event_id
).first() is not None
event_data['is_following'] = is_following
else:
event_data['is_following'] = False
if is_following:
user_following_ids.add(event_id)
# 使用统一的处理函数,支持新字段回退和 best_matches 解析
event_data = process_future_event_row(result, user_following_ids)
return jsonify({
'success': True,
@@ -7668,6 +7853,147 @@ def parse_json_field(field_value):
return []
def get_future_event_field(row, new_field, old_field):
"""
获取 future_events 表字段值,支持新旧字段回退
如果新字段存在且不为空,使用新字段;否则使用旧字段
"""
new_value = getattr(row, new_field, None) if hasattr(row, new_field) else None
old_value = getattr(row, old_field, None) if hasattr(row, old_field) else None
# 如果新字段有值(不为空字符串),使用新字段
if new_value is not None and str(new_value).strip():
return new_value
return old_value
def parse_best_matches(best_matches_value):
"""
解析新的 best_matches 数据结构(含研报引用信息)
新结构示例:
[
{
"stock_code": "300451.SZ",
"company_name": "创业慧康",
"original_description": "核心标的,医疗信息化...",
"best_report_title": "报告标题",
"best_report_author": "作者",
"best_report_sentences": "相关内容",
"best_report_match_score": "",
"best_report_match_ratio": 0.9285714285714286,
"best_report_declare_date": "2023-04-25T00:00:00",
"total_reports": 9,
"high_score_reports": 6
},
...
]
返回统一格式的股票列表,兼容旧格式
"""
if not best_matches_value:
return []
try:
# 解析 JSON
if isinstance(best_matches_value, str):
data = json.loads(best_matches_value)
else:
data = best_matches_value
if not isinstance(data, list):
return []
result = []
for item in data:
if isinstance(item, dict):
# 新结构:包含研报信息的字典
stock_info = {
'code': item.get('stock_code', ''),
'name': item.get('company_name', ''),
'description': item.get('original_description', ''),
'score': item.get('best_report_match_ratio', 0),
# 研报引用信息
'report': {
'title': item.get('best_report_title', ''),
'author': item.get('best_report_author', ''),
'sentences': item.get('best_report_sentences', ''),
'match_score': item.get('best_report_match_score', ''),
'match_ratio': item.get('best_report_match_ratio', 0),
'declare_date': item.get('best_report_declare_date', ''),
'total_reports': item.get('total_reports', 0),
'high_score_reports': item.get('high_score_reports', 0)
} if item.get('best_report_title') else None
}
result.append(stock_info)
elif isinstance(item, (list, tuple)) and len(item) >= 2:
# 旧结构:[code, name, description, score]
result.append({
'code': item[0],
'name': item[1],
'description': item[2] if len(item) > 2 else '',
'score': item[3] if len(item) > 3 else 0,
'report': None
})
return result
except Exception as e:
print(f"parse_best_matches error: {e}")
return []
def process_future_event_row(row, user_following_ids=None):
"""
统一处理 future_events 表的行数据
支持新字段回退和 best_matches 解析
"""
if user_following_ids is None:
user_following_ids = set()
# 获取字段值,支持新旧回退
# second_modified_text -> former
# second_modified_text.1 -> forecast (MySQL 中用反引号)
former_value = get_future_event_field(row, 'second_modified_text', 'former')
# 处理 second_modified_text.1 字段(特殊字段名)
forecast_new = None
if hasattr(row, 'second_modified_text.1'):
forecast_new = getattr(row, 'second_modified_text.1', None)
# 尝试其他可能的属性名
for attr_name in ['second_modified_text.1', 'second_modified_text_1']:
if hasattr(row, attr_name):
val = getattr(row, attr_name, None)
if val and str(val).strip():
forecast_new = val
break
forecast_value = forecast_new if (forecast_new and str(forecast_new).strip()) else getattr(row, 'forecast', None)
# best_matches -> related_stocks
best_matches = getattr(row, 'best_matches', None) if hasattr(row, 'best_matches') else None
if best_matches and str(best_matches).strip():
related_stocks = parse_best_matches(best_matches)
else:
related_stocks = parse_json_field(getattr(row, 'related_stocks', None))
# 构建事件数据
event_data = {
'id': row.data_id,
'title': row.title,
'type': getattr(row, 'type', None),
'calendar_time': row.calendar_time.isoformat() if row.calendar_time else None,
'star': row.star,
'former': former_value,
'forecast': forecast_value,
'fact': getattr(row, 'fact', None),
'is_following': row.data_id in user_following_ids,
'related_stocks': related_stocks,
'concepts': parse_json_field(getattr(row, 'concepts', None)),
'update_time': getattr(row, 'update_time', None).isoformat() if getattr(row, 'update_time', None) else None
}
return event_data
# ==================== 行业API ====================
@app.route('/api/classifications', methods=['GET'])
def get_classifications():
@@ -11688,108 +12014,98 @@ def get_daily_top_concepts():
@app.route('/api/market/rise-analysis/<seccode>', methods=['GET'])
def get_rise_analysis(seccode):
"""获取股票涨幅分析数据"""
"""获取股票涨幅分析数据(从 Elasticsearch 获取)"""
try:
# 获取日期范围参数
start_date = request.args.get('start_date')
end_date = request.args.get('end_date')
limit = request.args.get('limit', 100, type=int)
query = text("""
SELECT stock_code,
stock_name,
trade_date,
rise_rate,
close_price,
volume,
amount,
main_business,
rise_reason_brief,
rise_reason_detail,
news_summary,
announcements,
guba_sentiment,
analysis_time
FROM stock_rise_analysis
WHERE stock_code = :stock_code
""")
# 构建 ES 查询
must_conditions = [
{"term": {"stock_code": seccode}}
]
params = {'stock_code': seccode}
# 添加日期筛选
# 添加日期范围筛选
if start_date and end_date:
query = text("""
SELECT stock_code,
stock_name,
trade_date,
rise_rate,
close_price,
volume,
amount,
main_business,
rise_reason_brief,
rise_reason_detail,
news_summary,
announcements,
guba_sentiment,
analysis_time
FROM stock_rise_analysis
WHERE stock_code = :stock_code
AND trade_date BETWEEN :start_date AND :end_date
ORDER BY trade_date DESC
""")
params['start_date'] = start_date
params['end_date'] = end_date
else:
query = text("""
SELECT stock_code,
stock_name,
trade_date,
rise_rate,
close_price,
volume,
amount,
main_business,
rise_reason_brief,
rise_reason_detail,
news_summary,
announcements,
guba_sentiment,
analysis_time
FROM stock_rise_analysis
WHERE stock_code = :stock_code
ORDER BY trade_date DESC LIMIT 100
""")
must_conditions.append({
"range": {
"trade_date": {
"gte": start_date,
"lte": end_date,
"format": "yyyy-MM-dd"
}
}
})
with engine.connect() as conn:
result = conn.execute(query, params).fetchall()
es_query = {
"query": {
"bool": {
"must": must_conditions
}
},
"sort": [
{"trade_date": {"order": "desc"}}
],
"size": limit,
"_source": {
"excludes": ["rise_reason_detail_embedding"] # 排除向量字段
}
}
# 执行 ES 查询
response = es_client.search(index="stock_rise_analysis", body=es_query)
# 格式化数据
rise_analysis_data = []
for row in result:
for hit in response['hits']['hits']:
source = hit['_source']
# 处理研报引用数据
verification_reports = []
if source.get('has_verification_info') and source.get('verification_info'):
v_info = source['verification_info']
processed_results = v_info.get('processed_result', [])
for report in processed_results:
verification_reports.append({
'publisher': report.get('publisher', ''),
'report_title': report.get('report_title', ''),
'author': report.get('author', ''),
'declare_date': report.get('declare_date', ''),
'content': report.get('content', ''),
'verification_item': report.get('verification_item', ''),
'match_ratio': report.get('match_ratio', 0),
'match_score': report.get('match_score', '')
})
rise_analysis_data.append({
'stock_code': row.stock_code,
'stock_name': row.stock_name,
'trade_date': format_date(row.trade_date),
'rise_rate': format_decimal(row.rise_rate),
'close_price': format_decimal(row.close_price),
'volume': format_decimal(row.volume),
'amount': format_decimal(row.amount),
'main_business': row.main_business,
'rise_reason_brief': row.rise_reason_brief,
'rise_reason_detail': row.rise_reason_detail,
'news_summary': row.news_summary,
'announcements': row.announcements,
'guba_sentiment': row.guba_sentiment,
'analysis_time': row.analysis_time.strftime('%Y-%m-%d %H:%M:%S') if row.analysis_time else None
'stock_code': source.get('stock_code', ''),
'stock_name': source.get('stock_name', ''),
'trade_date': source.get('trade_date', ''),
'rise_rate': source.get('rise_rate', 0),
'close_price': source.get('close_price', 0),
'volume': source.get('volume', 0),
'amount': source.get('amount', 0),
'main_business': source.get('main_business', ''),
'rise_reason_brief': source.get('rise_reason_brief', ''),
'rise_reason_detail': source.get('rise_reason_detail', ''),
'announcements': source.get('announcements', ''),
'verification_reports': verification_reports,
'has_verification_info': source.get('has_verification_info', False),
'create_time': source.get('create_time', ''),
'update_time': source.get('update_time', '')
})
return jsonify({
'success': True,
'data': rise_analysis_data,
'count': len(rise_analysis_data)
'count': len(rise_analysis_data),
'total': response['hits']['total']['value']
})
except Exception as e:
import traceback
print(f"ES查询错误: {traceback.format_exc()}")
return jsonify({
'success': False,
'error': str(e)

1244
app_vx.py

File diff suppressed because it is too large Load Diff

1096
concept_api_openapi.json Normal file

File diff suppressed because it is too large Load Diff

1176
concept_hierarchy.json Normal file

File diff suppressed because it is too large Load Diff

166
gunicorn_config.py Normal file
View File

@@ -0,0 +1,166 @@
# -*- coding: utf-8 -*-
"""
Gunicorn 配置文件 - app_vx.py 生产环境配置
使用方式:
# 方式1: 使用 gevent 异步模式(推荐,支持高并发)
gunicorn -c gunicorn_config.py -k gevent app_vx:app
# 方式2: 使用同步多进程模式(更稳定)
gunicorn -c gunicorn_config.py app_vx:app
# 方式3: 使用 systemd 管理(见文件末尾 systemd 配置示例)
"""
import os
import multiprocessing
# ==================== 基础配置 ====================
# 绑定地址和端口
bind = '0.0.0.0:5002'
# Worker 进程数(建议 2-4 个,不要太多以避免连接池竞争)
workers = 4
# Worker 类型 - 默认使用 sync 模式,更稳定
# 如果需要 gevent在命令行添加 -k gevent
worker_class = 'sync'
# 每个 worker 处理的最大请求数,超过后重启(防止内存泄漏)
max_requests = 5000
max_requests_jitter = 500 # 随机抖动,避免所有 worker 同时重启
# ==================== 超时配置 ====================
# Worker 超时时间(秒),超过后 worker 会被杀死重启
timeout = 120
# 优雅关闭超时时间(秒)
graceful_timeout = 30
# 保持连接超时时间(秒)
keepalive = 5
# ==================== SSL 配置 ====================
# SSL 证书路径(生产环境需要配置)
cert_file = '/etc/letsencrypt/live/api.valuefrontier.cn/fullchain.pem'
key_file = '/etc/letsencrypt/live/api.valuefrontier.cn/privkey.pem'
if os.path.exists(cert_file) and os.path.exists(key_file):
certfile = cert_file
keyfile = key_file
# ==================== 日志配置 ====================
# 访问日志文件路径(- 表示输出到 stdout
accesslog = '-'
# 错误日志文件路径(- 表示输出到 stderr
errorlog = '-'
# 日志级别debug, info, warning, error, critical
loglevel = 'info'
# 访问日志格式
access_log_format = '%(h)s %(l)s %(u)s %(t)s "%(r)s" %(s)s %(b)s "%(f)s" "%(a)s" %(D)s'
# ==================== 进程管理 ====================
# 是否在后台运行daemon 模式)
daemon = False
# PID 文件路径
pidfile = '/tmp/gunicorn_app_vx.pid'
# 进程名称
proc_name = 'app_vx'
# ==================== 预加载配置 ====================
# 是否预加载应用代码
# 重要:设为 False 以确保每个 worker 有独立的连接池实例
# 否则多个 worker 共享同一个连接池会导致竞争和超时
preload_app = False
# ==================== Hook 函数 ====================
def on_starting(server):
"""服务器启动时调用"""
print(f"Gunicorn 服务器正在启动...")
print(f" Workers: {server.app.cfg.workers}")
print(f" Worker Class: {server.app.cfg.worker_class}")
print(f" Bind: {server.app.cfg.bind}")
def when_ready(server):
"""服务准备就绪时调用"""
print("Gunicorn 服务准备就绪!")
print("注意: 缓存将在首次请求时懒加载初始化")
def on_reload(server):
"""服务器重载时调用"""
print("Gunicorn 服务器正在重载...")
def worker_int(worker):
"""Worker 收到 INT 或 QUIT 信号时调用"""
print(f"Worker {worker.pid} 收到中断信号")
def worker_abort(worker):
"""Worker 收到 SIGABRT 信号时调用(超时)"""
print(f"Worker {worker.pid} 超时被终止")
def post_fork(server, worker):
"""Worker 进程 fork 之后调用"""
print(f"Worker {worker.pid} 已启动")
def worker_exit(server, worker):
"""Worker 退出时调用"""
print(f"Worker {worker.pid} 已退出")
def on_exit(server):
"""服务器退出时调用"""
print("Gunicorn 服务器已关闭")
# ==================== systemd 配置示例 ====================
"""
将以下内容保存为 /etc/systemd/system/app_vx.service:
[Unit]
Description=Gunicorn instance to serve app_vx
After=network.target
[Service]
User=www-data
Group=www-data
WorkingDirectory=/path/to/vf_react
Environment="PATH=/path/to/venv/bin"
Environment="USE_GEVENT=true"
ExecStart=/path/to/venv/bin/gunicorn -c gunicorn_config.py app_vx:app
ExecReload=/bin/kill -s HUP $MAINPID
KillMode=mixed
TimeoutStopSec=5
PrivateTmp=true
Restart=always
RestartSec=10
[Install]
WantedBy=multi-user.target
启用服务:
sudo systemctl daemon-reload
sudo systemctl enable app_vx
sudo systemctl start app_vx
sudo systemctl status app_vx
查看日志:
sudo journalctl -u app_vx -f
"""

View File

@@ -781,3 +781,252 @@ async def remove_favorite_event(user_id: str, event_id: int) -> Dict[str, Any]:
return {"success": True, "message": "删除自选事件成功"}
else:
return {"success": False, "message": "未找到该自选事件"}
# ==================== ClickHouse 分钟频数据查询 ====================
from clickhouse_driver import Client as ClickHouseClient
# ClickHouse 连接配置
CLICKHOUSE_CONFIG = {
'host': '222.128.1.157',
'port': 18000,
'user': 'default',
'password': 'Zzl33818!',
'database': 'stock'
}
# ClickHouse 客户端(懒加载)
_clickhouse_client = None
def get_clickhouse_client():
"""获取 ClickHouse 客户端(单例模式)"""
global _clickhouse_client
if _clickhouse_client is None:
_clickhouse_client = ClickHouseClient(
host=CLICKHOUSE_CONFIG['host'],
port=CLICKHOUSE_CONFIG['port'],
user=CLICKHOUSE_CONFIG['user'],
password=CLICKHOUSE_CONFIG['password'],
database=CLICKHOUSE_CONFIG['database']
)
logger.info("ClickHouse client created")
return _clickhouse_client
async def get_stock_minute_data(
code: str,
start_time: Optional[str] = None,
end_time: Optional[str] = None,
limit: int = 240
) -> List[Dict[str, Any]]:
"""
获取股票分钟频数据
Args:
code: 股票代码(例如:'600519''600519.SH'
start_time: 开始时间格式YYYY-MM-DD HH:MM:SS 或 YYYY-MM-DD
end_time: 结束时间格式YYYY-MM-DD HH:MM:SS 或 YYYY-MM-DD
limit: 返回条数默认240一个交易日的分钟数据
Returns:
分钟频数据列表
"""
try:
client = get_clickhouse_client()
# 标准化股票代码ClickHouse 分钟数据使用带后缀格式
# 6开头 -> .SH (上海), 0/3开头 -> .SZ (深圳), 其他 -> .BJ (北京)
if '.' in code:
# 已经有后缀,直接使用
stock_code = code
else:
# 需要添加后缀
if code.startswith('6'):
stock_code = f"{code}.SH"
elif code.startswith('0') or code.startswith('3'):
stock_code = f"{code}.SZ"
else:
stock_code = f"{code}.BJ"
# 构建查询 - 使用字符串格式化ClickHouse 参数化语法兼容性问题)
query = f"""
SELECT
code,
timestamp,
open,
high,
low,
close,
volume,
amt
FROM stock_minute
WHERE code = '{stock_code}'
"""
if start_time:
query += f" AND timestamp >= '{start_time}'"
if end_time:
query += f" AND timestamp <= '{end_time}'"
query += f" ORDER BY timestamp DESC LIMIT {limit}"
# 执行查询
result = client.execute(query, with_column_types=True)
rows = result[0]
columns = [col[0] for col in result[1]]
# 转换为字典列表
data = []
for row in rows:
record = {}
for i, col in enumerate(columns):
value = row[i]
# 处理 datetime 类型
if hasattr(value, 'isoformat'):
record[col] = value.isoformat()
else:
record[col] = value
data.append(record)
logger.info(f"[ClickHouse] 查询分钟数据: code={stock_code}, 返回 {len(data)} 条记录")
return data
except Exception as e:
logger.error(f"[ClickHouse] 查询分钟数据失败: {e}", exc_info=True)
return []
async def get_stock_minute_aggregation(
code: str,
date: str,
interval: int = 5
) -> List[Dict[str, Any]]:
"""
获取股票分钟频数据的聚合(按指定分钟间隔)
Args:
code: 股票代码
date: 日期格式YYYY-MM-DD
interval: 聚合间隔分钟默认5分钟
Returns:
聚合后的K线数据
"""
try:
client = get_clickhouse_client()
# 标准化股票代码
stock_code = code.split('.')[0] if '.' in code else code
# 使用 ClickHouse 的时间函数进行聚合
query = f"""
SELECT
code,
toStartOfInterval(timestamp, INTERVAL {interval} MINUTE) as interval_start,
argMin(open, timestamp) as open,
max(high) as high,
min(low) as low,
argMax(close, timestamp) as close,
sum(volume) as volume,
sum(amt) as amt
FROM stock_minute
WHERE code = %(code)s
AND toDate(timestamp) = %(date)s
GROUP BY code, interval_start
ORDER BY interval_start
"""
params = {'code': stock_code, 'date': date}
result = client.execute(query, params, with_column_types=True)
rows = result[0]
columns = [col[0] for col in result[1]]
data = []
for row in rows:
record = {}
for i, col in enumerate(columns):
value = row[i]
if hasattr(value, 'isoformat'):
record[col] = value.isoformat()
else:
record[col] = value
data.append(record)
logger.info(f"[ClickHouse] 聚合分钟数据: code={stock_code}, date={date}, interval={interval}min, 返回 {len(data)} 条记录")
return data
except Exception as e:
logger.error(f"[ClickHouse] 聚合分钟数据失败: {e}", exc_info=True)
return []
async def get_stock_intraday_statistics(
code: str,
date: str
) -> Dict[str, Any]:
"""
获取股票日内统计数据
Args:
code: 股票代码
date: 日期格式YYYY-MM-DD
Returns:
日内统计数据(开盘价、最高价、最低价、收盘价、成交量、成交额、波动率等)
"""
try:
client = get_clickhouse_client()
stock_code = code.split('.')[0] if '.' in code else code
query = """
SELECT
code,
toDate(timestamp) as trade_date,
argMin(open, timestamp) as open,
max(high) as high,
min(low) as low,
argMax(close, timestamp) as close,
sum(volume) as total_volume,
sum(amt) as total_amount,
count(*) as data_points,
min(timestamp) as first_time,
max(timestamp) as last_time,
(max(high) - min(low)) / min(low) * 100 as intraday_range_pct,
stddevPop(close) as price_volatility
FROM stock_minute
WHERE code = %(code)s
AND toDate(timestamp) = %(date)s
GROUP BY code, trade_date
"""
params = {'code': stock_code, 'date': date}
result = client.execute(query, params, with_column_types=True)
if not result[0]:
return {"success": False, "error": f"未找到 {stock_code}{date} 的分钟数据"}
row = result[0][0]
columns = [col[0] for col in result[1]]
data = {}
for i, col in enumerate(columns):
value = row[i]
if hasattr(value, 'isoformat'):
data[col] = value.isoformat()
else:
data[col] = float(value) if isinstance(value, (int, float)) else value
logger.info(f"[ClickHouse] 日内统计: code={stock_code}, date={date}")
return {"success": True, "data": data}
except Exception as e:
logger.error(f"[ClickHouse] 日内统计失败: {e}", exc_info=True)
return {"success": False, "error": str(e)}

View File

@@ -69,6 +69,8 @@ class ESClient:
},
"plan": {"type": "text"}, # 执行计划(仅 assistant
"steps": {"type": "text"}, # 执行步骤(仅 assistant
"session_title": {"type": "text"}, # 会话标题/概述(新增)
"is_first_message": {"type": "boolean"}, # 是否是会话首条消息(新增)
"timestamp": {"type": "date"}, # 时间戳
"created_at": {"type": "date"}, # 创建时间
}
@@ -105,6 +107,8 @@ class ESClient:
message: str,
plan: Optional[str] = None,
steps: Optional[str] = None,
session_title: Optional[str] = None,
is_first_message: bool = False,
) -> str:
"""
保存聊天消息
@@ -118,6 +122,8 @@ class ESClient:
message: 消息内容
plan: 执行计划(可选)
steps: 执行步骤(可选)
session_title: 会话标题(可选,通常在首条消息时设置)
is_first_message: 是否是会话首条消息
Returns:
文档ID
@@ -136,6 +142,8 @@ class ESClient:
"message_embedding": embedding if embedding else None,
"plan": plan,
"steps": steps,
"session_title": session_title,
"is_first_message": is_first_message,
"timestamp": datetime.now(),
"created_at": datetime.now(),
}
@@ -157,10 +165,10 @@ class ESClient:
limit: 返回数量
Returns:
会话列表每个会话包含session_id, last_message, last_timestamp
会话列表每个会话包含session_id, title, last_message, last_timestamp
"""
try:
# 聚合查询:按 session_id 分组,获取每个会话的最后一条消息
# 聚合查询:按 session_id 分组,获取每个会话的最后一条消息和标题
query = {
"query": {
"term": {"user_id": user_id}
@@ -180,7 +188,15 @@ class ESClient:
"top_hits": {
"size": 1,
"sort": [{"timestamp": {"order": "desc"}}],
"_source": ["message", "timestamp", "message_type"]
"_source": ["message", "timestamp", "message_type", "session_title"]
}
},
# 获取首条消息(包含标题)
"first_message": {
"top_hits": {
"size": 1,
"sort": [{"timestamp": {"order": "asc"}}],
"_source": ["session_title", "message"]
}
}
}
@@ -193,11 +209,21 @@ class ESClient:
sessions = []
for bucket in result["aggregations"]["sessions"]["buckets"]:
session_data = bucket["last_message_content"]["hits"]["hits"][0]["_source"]
last_msg = bucket["last_message_content"]["hits"]["hits"][0]["_source"]
first_msg = bucket["first_message"]["hits"]["hits"][0]["_source"]
# 优先使用 session_title否则使用首条消息的前30字符
title = (
last_msg.get("session_title") or
first_msg.get("session_title") or
first_msg.get("message", "")[:30]
)
sessions.append({
"session_id": bucket["key"],
"last_message": session_data["message"],
"last_timestamp": session_data["timestamp"],
"title": title,
"last_message": last_msg["message"],
"last_timestamp": last_msg["timestamp"],
"message_count": bucket["doc_count"],
})

2780
mcp_quant.py Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -70,6 +70,7 @@
"react-to-print": "^3.0.3",
"react-tsparticles": "^2.12.2",
"recharts": "^3.1.2",
"remark-gfm": "^4.0.1",
"sass": "^1.49.9",
"socket.io-client": "^4.7.4",
"styled-components": "^5.3.11",

553
public/htmls/TPU芯片.html Normal file
View File

@@ -0,0 +1,553 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TPU芯片 - AI算力的架构革命</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.timeline-dot {
position: relative;
z-index: 1;
}
.timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, transparent, #667eea, #764ba2, transparent);
transform: translateX(-50%);
}
.stat-card {
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.table-responsive {
overflow-x: auto;
}
.table-responsive::-webkit-scrollbar {
height: 8px;
}
.table-responsive::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.table-responsive::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
background: #555;
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
</style>
</head>
<body>
<!-- Hero Section -->
<div class="relative min-h-screen flex items-center justify-center text-white">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
<h1 class="text-5xl md:text-7xl font-bold mb-6" data-aos="fade-up">
TPU芯片
</h1>
<p class="text-xl md:text-3xl mb-8" data-aos="fade-up" data-aos-delay="200">
AI算力的架构革命
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12" data-aos="fade-up" data-aos-delay="400">
<div class="glass-effect p-6 rounded-2xl">
<div class="text-4xl font-bold mb-2">4614</div>
<div class="text-lg">TFLOPS算力</div>
<div class="text-sm mt-2 opacity-80">TPU v7 (Ironwood)</div>
</div>
<div class="glass-effect p-6 rounded-2xl">
<div class="text-4xl font-bold mb-2">980万亿</div>
<div class="text-lg">Tokens调用量</div>
<div class="text-sm mt-2 opacity-80">2025年7月预期</div>
</div>
<div class="glass-effect p-6 rounded-2xl">
<div class="text-4xl font-bold mb-2">3-5倍</div>
<div class="text-lg">性价比优势</div>
<div class="text-sm mt-2 opacity-80">对比GPU</div>
</div>
</div>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>
</div>
</div>
<!-- Timeline Section -->
<div class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">发展时间轴</h2>
<div class="relative">
<div class="timeline-line hidden md:block"></div>
<div class="space-y-12">
<div class="flex flex-col md:flex-row items-center" data-aos="fade-right">
<div class="md:w-1/2 md:pr-8 text-right">
<div class="glass-effect p-6 rounded-xl inline-block">
<h3 class="text-2xl font-bold mb-2">2023年12月</h3>
<p class="text-gray-600">发布TPU v5p性能较v4提升2.8倍</p>
</div>
</div>
<div class="timeline-dot w-4 h-4 bg-purple-600 rounded-full mx-4 my-4"></div>
<div class="md:w-1/2 md:pl-8"></div>
</div>
<div class="flex flex-col md:flex-row items-center" data-aos="fade-left">
<div class="md:w-1/2 md:pr-8"></div>
<div class="timeline-dot w-4 h-4 bg-purple-600 rounded-full mx-4 my-4"></div>
<div class="md:w-1/2 md:pl-8">
<div class="glass-effect p-6 rounded-xl inline-block">
<h3 class="text-2xl font-bold mb-2">2024年8月</h3>
<p class="text-gray-600">苹果使用8192颗TPU v4训练AI模型</p>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row items-center" data-aos="fade-right">
<div class="md:w-1/2 md:pr-8 text-right">
<div class="glass-effect p-6 rounded-xl inline-block pulse-animation">
<h3 class="text-2xl font-bold mb-2">2025年4月9日</h3>
<p class="text-gray-600">TPU v7 (Ironwood)正式发布</p>
<p class="text-sm text-purple-600 mt-2">4614 TFLOPS算力 · 192GB HBM3e</p>
</div>
</div>
<div class="timeline-dot w-4 h-4 bg-purple-600 rounded-full mx-4 my-4"></div>
<div class="md:w-1/2 md:pl-8"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Core Logic Section -->
<div class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">核心驱动力</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="stat-card bg-white p-8 rounded-2xl shadow-xl" data-aos="zoom-in" data-aos-delay="100">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
</svg>
</div>
<h3 class="text-xl font-bold mb-4">硬件架构颠覆</h3>
<p class="text-gray-600 mb-4">脉动阵列 + 3D Torus网络拓扑</p>
<div class="text-sm text-purple-600 font-semibold">
利用率: 50%+ (GPU仅20-40%)
</div>
</div>
<div class="stat-card bg-white p-8 rounded-2xl shadow-xl" data-aos="zoom-in" data-aos-delay="200">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-xl font-bold mb-4">TCO碾压优势</h3>
<p class="text-gray-600 mb-4">租赁成本仅为H100的1/4</p>
<div class="text-sm text-purple-600 font-semibold">
H100: 7万美元/月 → TPU: 3万美元/月
</div>
</div>
<div class="stat-card bg-white p-8 rounded-2xl shadow-xl" data-aos="zoom-in" data-aos-delay="300">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-xl font-bold mb-4">生态开放拐点</h3>
<p class="text-gray-600 mb-4">TPU+XLA对标GPU+CUDA</p>
<div class="text-sm text-purple-600 font-semibold">
Meta、OpenAI等外部客户接入
</div>
</div>
</div>
</div>
</div>
<!-- Industry Chain Section -->
<div class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">产业链价值分布</h2>
<div class="mb-12">
<canvas id="valueChart" width="400" height="200"></canvas>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div class="p-4 bg-purple-50 rounded-lg">
<div class="text-2xl font-bold text-purple-600">30-35%</div>
<div class="text-gray-600">PCB</div>
</div>
<div class="p-4 bg-blue-50 rounded-lg">
<div class="text-2xl font-bold text-blue-600">20-25%</div>
<div class="text-gray-600">HBM</div>
</div>
<div class="p-4 bg-green-50 rounded-lg">
<div class="text-2xl font-bold text-green-600">15-20%</div>
<div class="text-gray-600">电源模块</div>
</div>
<div class="p-4 bg-yellow-50 rounded-lg">
<div class="text-2xl font-bold text-yellow-600">10-15%</div>
<div class="text-gray-600">OCS光交换</div>
</div>
</div>
</div>
</div>
<!-- Stocks Table Section -->
<div class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">相关标的</h2>
<div class="table-responsive bg-white rounded-2xl shadow-xl overflow-hidden">
<table class="w-full">
<thead class="bg-gradient-to-r from-purple-600 to-purple-800 text-white">
<tr>
<th class="px-6 py-4 text-left">股票名称</th>
<th class="px-6 py-4 text-left">分类</th>
<th class="px-6 py-4 text-left">相关性</th>
<th class="px-6 py-4 text-left">信源</th>
<th class="px-6 py-4 text-center">优先级</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">光库科技</td>
<td class="px-6 py-4"><span class="badge badge-primary">OCS光交换</span></td>
<td class="px-6 py-4">谷歌OCS独家代工厂单台3万美元</td>
<td class="px-6 py-4">网传纪要</td>
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐⭐⭐</span></td>
</tr>
<tr class="border-b hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">新雷能</td>
<td class="px-6 py-4"><span class="badge badge-secondary">电源</span></td>
<td class="px-6 py-4">意向订单超5亿美元国产替代</td>
<td class="px-6 py-4">网传纪要</td>
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐⭐⭐</span></td>
</tr>
<tr class="border-b hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">胜宏科技</td>
<td class="px-6 py-4"><span class="badge badge-accent">PCB</span></td>
<td class="px-6 py-4">V7大份额一供价值量翻倍</td>
<td class="px-6 py-4">网传纪要</td>
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐⭐</span></td>
</tr>
<tr class="border-b hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">沪电股份</td>
<td class="px-6 py-4"><span class="badge badge-accent">PCB</span></td>
<td class="px-6 py-4">供应份额30-40%主导30-40层板</td>
<td class="px-6 py-4">网传纪要</td>
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐⭐</span></td>
</tr>
<tr class="border-b hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">中际旭创</td>
<td class="px-6 py-4"><span class="badge badge-info">光模块</span></td>
<td class="px-6 py-4">谷歌份额60%+,确定性最高</td>
<td class="px-6 py-4">网传纪要</td>
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐⭐</span></td>
</tr>
<tr class="border-b hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">东材科技</td>
<td class="px-6 py-4"><span class="badge badge-warning">M9材料</span></td>
<td class="px-6 py-4">台光核心高速树脂主力供应商</td>
<td class="px-6 py-4">网传纪要</td>
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐</span></td>
</tr>
<tr class="border-b hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">天普股份</td>
<td class="px-6 py-4"><span class="badge badge-error">国产TPU</span></td>
<td class="px-6 py-4">中昊芯英拟要约收购</td>
<td class="px-6 py-4">公告</td>
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐</span></td>
</tr>
<tr class="hover:bg-purple-50 transition-colors">
<td class="px-6 py-4 font-semibold">深南电路</td>
<td class="px-6 py-4"><span class="badge badge-accent">PCB</span></td>
<td class="px-6 py-4">供应V7 44层板份额10-15%</td>
<td class="px-6 py-4">网传纪要</td>
<td class="px-6 py-4 text-center"><span class="text-2xl">⭐⭐⭐</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Risks Section -->
<div class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">潜在风险</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="alert alert-warning shadow-lg" data-aos="fade-up">
<svg class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
<div>
<h3 class="font-bold">软件生态成熟度</h3>
<div class="text-xs">TPU+XLA生态仍落后CUDA 5年以上</div>
</div>
</div>
<div class="alert alert-error shadow-lg" data-aos="fade-up" data-aos-delay="100">
<svg class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="font-bold">HBM供应瓶颈</h3>
<div class="text-xs">2025年HBM产能被英伟达抢占</div>
</div>
</div>
<div class="alert alert-info shadow-lg" data-aos="fade-up" data-aos-delay="200">
<svg class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="font-bold">客户集中度风险</h3>
<div class="text-xs">85%需求来自谷歌内部</div>
</div>
</div>
<div class="alert alert-warning shadow-lg" data-aos="fade-up" data-aos-delay="300">
<svg class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
<div>
<h3 class="font-bold">架构专利壁垒</h3>
<div class="text-xs">国产TPU面临侵权风险</div>
</div>
</div>
<div class="alert alert-error shadow-lg" data-aos="fade-up" data-aos-delay="400">
<svg class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="font-bold">同业追赶</h3>
<div class="text-xs">Meta、AWS ASIC 2026年量产</div>
</div>
</div>
<div class="alert alert-info shadow-lg" data-aos="fade-up" data-aos-delay="500">
<svg class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="font-bold">应用场景局限</h3>
<div class="text-xs">新兴架构(Mamba)适配性差</div>
</div>
</div>
</div>
</div>
</div>
<!-- Catalysts Section -->
<div class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">关键催化剂</h2>
<div class="timeline">
<div class="timeline-item" data-aos="fade-up">
<div class="timeline-marker bg-purple-600"></div>
<div class="timeline-content">
<h3 class="text-xl font-bold mb-2">近期 (2025Q2-Q4)</h3>
<ul class="list-disc list-inside text-gray-600 space-y-1">
<li>Ironwood量产验证与正式上架</li>
<li>Anthropic 100万颗TPU订单交付</li>
<li>供应链订单落地胜宏、光库Q2财报</li>
<li>国产TPU产业化突破</li>
</ul>
</div>
</div>
<div class="timeline-item" data-aos="fade-up" data-aos-delay="200">
<div class="timeline-marker bg-blue-600"></div>
<div class="timeline-content">
<h3 class="text-xl font-bold mb-2">中期 (2025-2026)</h3>
<ul class="list-disc list-inside text-gray-600 space-y-1">
<li>JAX XLA生态开放给第三方开发者</li>
<li>产业链进入量价齐升阶段</li>
<li>国产TPU在特定领域落地</li>
</ul>
</div>
</div>
<div class="timeline-item" data-aos="fade-up" data-aos-delay="400">
<div class="timeline-marker bg-green-600"></div>
<div class="timeline-content">
<h3 class="text-xl font-bold mb-2">长期 (2025-2027)</h3>
<ul class="list-disc list-inside text-gray-600 space-y-1">
<li>AI ASIC市场750亿美元三分天下</li>
<li>TPU推理市场份额超40%</li>
<li>HDI技术替代高多层PCB</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Conclusion Section -->
<div class="py-20 bg-gradient-to-r from-purple-600 to-purple-800 text-white">
<div class="max-w-4xl mx-auto px-4 text-center">
<h2 class="text-4xl font-bold mb-8" data-aos="fade-up">投资启示</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
<div class="glass-effect p-6 rounded-2xl" data-aos="fade-up" data-aos-delay="100">
<h3 class="text-2xl font-bold mb-4">💡 核心策略</h3>
<p class="text-lg">"抓两头,放中间"</p>
<ul class="text-left mt-4 space-y-2">
<li>• 抓"增量"OCS、电源0到1机会</li>
<li>• 抓"龙头"PCB量价齐升</li>
<li>• 避开"伪主题"国产TPU专利风险</li>
</ul>
</div>
<div class="glass-effect p-6 rounded-2xl" data-aos="fade-up" data-aos-delay="200">
<h3 class="text-2xl font-bold mb-4">🎯 最具价值环节</h3>
<div class="space-y-3 text-left">
<div class="flex justify-between items-center">
<span>光库科技(OCS)</span>
<span class="text-yellow-300">★★★★★</span>
</div>
<div class="flex justify-between items-center">
<span>新雷能(电源)</span>
<span class="text-yellow-300">★★★★★</span>
</div>
<div class="flex justify-between items-center">
<span>胜宏/沪电(PCB)</span>
<span class="text-yellow-300">★★★★</span>
</div>
</div>
</div>
</div>
<div class="text-xl italic" data-aos="fade-up" data-aos-delay="300">
"TPU不是GPU的简单替代而是AI算力架构的重新定义"
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8">
<div class="max-w-7xl mx-auto px-4 text-center">
<p class="text-sm opacity-75">数据来源新闻、路演、Insight分析 | 更新时间2025年</p>
<p class="text-xs mt-2 opacity-50">注:投资有风险,本文仅供参考</p>
</div>
</footer>
<script>
// Initialize AOS
AOS.init({
duration: 1000,
once: true
});
// Chart.js for value distribution
const ctx = document.getElementById('valueChart').getContext('2d');
const valueChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['PCB', 'HBM', '电源模块', 'OCS光交换', '光模块', '其他'],
datasets: [{
data: [32.5, 22.5, 17.5, 12.5, 7.5, 7.5],
backgroundColor: [
'rgba(147, 51, 234, 0.8)',
'rgba(59, 130, 246, 0.8)',
'rgba(34, 197, 94, 0.8)',
'rgba(250, 204, 21, 0.8)',
'rgba(239, 68, 68, 0.8)',
'rgba(107, 114, 128, 0.8)'
],
borderColor: [
'rgba(147, 51, 234, 1)',
'rgba(59, 130, 246, 1)',
'rgba(34, 197, 94, 1)',
'rgba(250, 204, 21, 1)',
'rgba(239, 68, 68, 1)',
'rgba(107, 114, 128, 1)'
],
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 20,
font: {
size: 14
}
}
},
tooltip: {
callbacks: {
label: function(context) {
return context.label + ': ' + context.parsed + '%';
}
}
}
}
}
});
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>

876
public/htmls/海军.html Normal file
View File

@@ -0,0 +1,876 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>海军装备产业链深度分析 - 投资洞察</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.24/dist/full.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
width: 3px;
position: absolute;
left: 20px;
top: 0;
bottom: 0;
}
.timeline-dot {
width: 16px;
height: 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 3px solid #1e293b;
border-radius: 50%;
position: absolute;
left: 14px;
}
.progress-ring {
transform: rotate(-90deg);
}
.navy-blue {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}
.glass-effect {
background: rgba(30, 41, 59, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-scroll::-webkit-scrollbar {
height: 8px;
}
.table-scroll::-webkit-scrollbar-track {
background: #1e293b;
}
.table-scroll::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 4px;
}
.badge-glow {
animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 5px rgba(102, 126, 234, 0.5); }
50% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.8); }
}
.metric-card {
background: linear-gradient(135deg, rgba(30, 58, 138, 0.5) 0%, rgba(30, 64, 175, 0.5) 100%);
border: 1px solid rgba(147, 197, 253, 0.3);
}
.stock-table {
font-size: 0.875rem;
}
.stock-table th {
background: rgba(30, 58, 138, 0.9);
position: sticky;
top: 0;
z-index: 10;
}
.stock-table td {
border-bottom: 1px solid rgba(71, 85, 105, 0.5);
}
.stock-table tr:hover {
background: rgba(51, 65, 85, 0.3);
}
.section-divider {
height: 2px;
background: linear-gradient(90deg, transparent, #667eea, transparent);
margin: 3rem 0;
}
</style>
</head>
<body class="bg-slate-950 text-slate-100">
<!-- Navigation -->
<div class="navbar glass-effect fixed top-0 z-50 px-4">
<div class="navbar-start">
<a href="#" class="btn btn-ghost text-xl font-bold">
<i class="fas fa-ship mr-2"></i>海军装备分析
</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="#overview">核心观点</a></li>
<li><a href="#timeline">事件时间线</a></li>
<li><a href="#logic">投资逻辑</a></li>
<li><a href="#industry">产业链</a></li>
<li><a href="#stocks">标的池</a></li>
</ul>
</div>
<div class="navbar-end">
<div class="badge badge-accent badge-glow">深度研究</div>
</div>
</div>
<!-- Hero Section -->
<section class="hero min-h-screen hero-gradient flex items-center">
<div class="hero-content text-center">
<div class="max-w-5xl">
<h1 class="text-5xl font-bold mb-6 text-white">
<i class="fas fa-anchor mr-3"></i>海军装备产业链
</h1>
<p class="text-2xl mb-8 text-slate-200">战略需求刚性化 · 装备结构拐点化 · 业绩兑现初期化</p>
<div class="stats shadow-2xl bg-slate-900/80 backdrop-blur rounded-box w-full">
<div class="stat">
<div class="stat-figure text-primary">
<svg width="48" height="48" fill="currentColor"><path d="M24 2l5.453 11.146 12.298 1.787-8.876 8.654 2.095 12.224L24 30.077 13.13 35.811l2.095-12.224-8.876-8.654 12.298-1.787L24 2z"/></svg>
</div>
<div class="stat-title">优先级</div>
<div class="stat-value text-primary">极高</div>
<div class="stat-desc">十四五重点建设方向</div>
</div>
<div class="stat">
<div class="stat-figure text-secondary">
<svg class="progress-ring" width="48" height="48" viewBox="0 0 36 36">
<path class="text-slate-700" stroke="currentColor" stroke-width="3" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
<path class="text-slate-100" stroke="currentColor" stroke-width="3" stroke-dasharray="75, 100" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
</svg>
</div>
<div class="stat-title">发展阶段</div>
<div class="stat-value text-secondary">初期</div>
<div class="stat-desc">0-1的蓝海市场</div>
</div>
<div class="stat">
<div class="stat-figure text-accent">
<i class="fas fa-chart-line text-4xl"></i>
</div>
<div class="stat-title">业绩弹性</div>
<div class="stat-value text-accent">25%+</div>
<div class="stat-desc">2025年预期增速</div>
</div>
</div>
<div class="mt-8 flex justify-center gap-4">
<button class="btn btn-primary btn-lg">
<i class="fas fa-download mr-2"></i>下载研报
</button>
<button class="btn btn-secondary btn-lg">
<i class="fas fa-play-circle mr-2"></i>观看路演
</button>
</div>
</div>
</div>
</section>
<!-- Key Metrics -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12" id="overview">核心数据洞察</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="metric-card rounded-xl p-6 card-hover">
<div class="flex items-center justify-between">
<div>
<p class="text-slate-400">水下装备市场空间</p>
<p class="text-3xl font-bold text-blue-400">近千亿</p>
</div>
<i class="fas fa-water text-4xl text-blue-400/30"></i>
</div>
<div class="mt-4">
<div class="text-sm text-slate-500">未来10年需求</div>
</div>
</div>
<div class="metric-card rounded-xl p-6 card-hover">
<div class="flex items-center justify-between">
<div>
<p class="text-slate-400">电磁弹射弹性</p>
<p class="text-3xl font-bold text-purple-400">5-8亿</p>
</div>
<i class="fas fa-bolt text-4xl text-purple-400/30"></i>
</div>
<div class="mt-4">
<div class="text-sm text-slate-500">2025年增量收入</div>
</div>
</div>
<div class="metric-card rounded-xl p-6 card-hover">
<div class="flex items-center justify-between">
<div>
<p class="text-slate-400">市占率龙头</p>
<p class="text-3xl font-bold text-green-400">70-80%</p>
</div>
<i class="fas fa-crown text-4xl text-green-400/30"></i>
</div>
<div class="mt-4">
<div class="text-sm text-slate-500">中国海防水声业务</div>
</div>
</div>
<div class="metric-card rounded-xl p-6 card-hover">
<div class="flex items-center justify-between">
<div>
<p class="text-slate-400">装备增速</p>
<p class="text-3xl font-bold text-orange-400">20-30%</p>
</div>
<i class="fas fa-rocket text-4xl text-orange-400/30"></i>
</div>
<div class="mt-4">
<div class="text-sm text-slate-500">十四五后期预期</div>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline -->
<section class="py-16 px-4" id="timeline">
<div class="max-w-4xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12">重要事件时间线</h2>
<div class="relative">
<div class="timeline-line"></div>
<div class="relative mb-8 ml-12">
<div class="timeline-dot" style="top: 8px;"></div>
<div class="card glass-effect rounded-lg p-4 card-hover">
<div class="flex justify-between items-start">
<div>
<span class="badge badge-primary">2024年8月</span>
<h3 class="text-xl font-semibold mt-2">伊朗海军演习</h3>
<p class="text-slate-400 mt-1">在阿曼海举行"力量1404"导弹演习,展示反舰能力</p>
</div>
</div>
</div>
</div>
<div class="relative mb-8 ml-12">
<div class="timeline-dot" style="top: 8px;"></div>
<div class="card glass-effect rounded-lg p-4 card-hover">
<div class="flex justify-between items-start">
<div>
<span class="badge badge-primary">2024年9月</span>
<h3 class="text-xl font-semibold mt-2">以色列军事行动</h3>
<p class="text-slate-400 mt-1">摧毁叙利亚舰队,地区紧张局势升级</p>
</div>
</div>
</div>
</div>
<div class="relative mb-8 ml-12">
<div class="timeline-dot" style="top: 8px;"></div>
<div class="card glass-effect rounded-lg p-4 card-hover">
<div class="flex justify-between items-start">
<div>
<span class="badge badge-secondary">2024年12月</span>
<h3 class="text-xl font-semibold mt-2">076型四川舰出坞</h3>
<p class="text-slate-400 mt-1">首创双舰岛+电磁弹射技术排水量4万余吨</p>
</div>
</div>
</div>
</div>
<div class="relative mb-8 ml-12">
<div class="timeline-dot" style="top: 8px;"></div>
<div class="card glass-effect rounded-lg p-4 card-hover">
<div class="flex justify-between items-start">
<div>
<span class="badge badge-accent">2024年12月</span>
<h3 class="text-xl font-semibold mt-2">国防部长任命</h3>
<p class="text-slate-400 mt-1">董军(原海军首长)任国防部长,海军重点建设预期强化</p>
</div>
</div>
</div>
</div>
<div class="relative mb-8 ml-12">
<div class="timeline-dot" style="top: 8px;"></div>
<div class="card glass-effect rounded-lg p-4 card-hover">
<div class="flex justify-between items-start">
<div>
<span class="badge badge-info">2025年3月</span>
<h3 class="text-xl font-semibold mt-2">俄罗斯海军战略</h3>
<p class="text-slate-400 mt-1">普京批准《2050年前俄罗斯海军发展战略》</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Investment Logic -->
<section class="py-16 px-4" id="logic">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12">投资逻辑分析</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="card navy-blue rounded-xl p-6">
<div class="card-title">
<i class="fas fa-globe-americas text-3xl mr-3"></i>
<span>地缘政治倒逼</span>
</div>
<div class="card-body">
<p>美军"印太战略"持续施压弗吉尼亚级潜艇年产目标从1.3艘提升至2.5艘,直接刺激中国水下攻防体系建设</p>
<div class="mt-4">
<span class="badge badge-error">高优先级</span>
<span class="badge badge-warning">紧迫性强</span>
</div>
</div>
</div>
<div class="card navy-blue rounded-xl p-6">
<div class="card-title">
<i class="fas fa-exchange-alt text-3xl mr-3"></i>
<span>战略范式转型</span>
</div>
<div class="card-body">
<p>从"黄水海军"到"蓝水海军"质变水面防御向水下进攻转变10年潜艇改造市场近千亿</p>
<div class="mt-4">
<span class="badge badge-success">结构性机会</span>
<span class="badge badge-info">长期趋势</span>
</div>
</div>
</div>
<div class="card navy-blue rounded-xl p-6">
<div class="card-title">
<i class="fas fa-microchip text-3xl mr-3"></i>
<span>技术代际突破</span>
</div>
<div class="card-body">
<p>076型电磁弹射平台型创新光纤水听器替代压电水听器技术壁垒高市场空间巨大</p>
<div class="mt-4">
<span class="badge badge-primary">核心技术</span>
<span class="badge badge-accent">高壁垒</span>
</div>
</div>
</div>
</div>
<div class="section-divider"></div>
<h3 class="text-2xl font-bold mb-6">预期差分析</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="alert alert-info">
<i class="fas fa-info-circle"></i>
<div>
<h4 class="font-bold">业绩兑现节奏</h4>
<p>潜艇改造周期18-24个月远快于新造5-7年</p>
</div>
</div>
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle"></i>
<div>
<h4 class="font-bold">民用市场空间</h4>
<p>电磁弹射技术可延伸至海上风电等民用领域</p>
</div>
</div>
<div class="alert alert-success">
<i class="fas fa-shield-alt"></i>
<div>
<h4 class="font-bold">竞争壁垒</h4>
<p>设计锁定+耗材更换的双重护城河</p>
</div>
</div>
</div>
</div>
</section>
<!-- Industry Chain -->
<section class="py-16 px-4" id="industry">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12">产业链图谱</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="card glass-effect rounded-xl p-6">
<h3 class="text-2xl font-bold mb-4 text-blue-400">
<i class="fas fa-anchor mr-2"></i>水面舰艇产业链
</h3>
<div class="space-y-3">
<div class="flex justify-between items-center p-3 bg-slate-800/50 rounded-lg">
<span class="font-medium">上游材料</span>
<div class="flex gap-2">
<span class="badge badge-outline">西部材料</span>
<span class="badge badge-outline">亚星锚链</span>
</div>
</div>
<div class="flex justify-between items-center p-3 bg-slate-800/50 rounded-lg">
<span class="font-medium">中游设备</span>
<div class="flex gap-2">
<span class="badge badge-primary">湘电股份</span>
<span class="badge badge-primary">王子新材</span>
</div>
</div>
<div class="flex justify-between items-center p-3 bg-slate-800/50 rounded-lg">
<span class="font-medium">下游总装</span>
<div class="flex gap-2">
<span class="badge badge-secondary">中国船舶</span>
<span class="badge badge-secondary">中船防务</span>
</div>
</div>
</div>
</div>
<div class="card glass-effect rounded-xl p-6">
<h3 class="text-2xl font-bold mb-4 text-purple-400">
<i class="fas fa-water mr-2"></i>水下攻防产业链
</h3>
<div class="space-y-3">
<div class="flex justify-between items-center p-3 bg-slate-800/50 rounded-lg">
<span class="font-medium">上游材料</span>
<div class="flex gap-2">
<span class="badge badge-outline">西部材料</span>
<span class="badge badge-outline">宝钛股份</span>
</div>
</div>
<div class="flex justify-between items-center p-3 bg-slate-800/50 rounded-lg">
<span class="font-medium">中游核心系统</span>
<div class="flex gap-2">
<span class="badge badge-accent">中国海防</span>
<span class="badge badge-accent">中科海讯</span>
</div>
</div>
<div class="flex justify-between items-center p-3 bg-slate-800/50 rounded-lg">
<span class="font-medium">下游平台</span>
<div class="flex gap-2">
<span class="badge badge-info">中国重工</span>
<span class="badge badge-info">天海防务</span>
</div>
</div>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="text-2xl font-bold mb-6">核心玩家对比</h3>
<div class="table-scroll">
<table class="table w-full stock-table">
<thead>
<tr>
<th>公司</th>
<th>核心逻辑</th>
<th>竞争优势</th>
<th>业绩弹性</th>
<th>关键风险</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-bold text-primary">中国海防</td>
<td>水下攻防装备龙头</td>
<td>70-80%市占率</td>
<td>⭐⭐⭐⭐⭐</td>
<td>订单验证周期长</td>
</tr>
<tr>
<td class="font-bold text-primary">湘电股份</td>
<td>电磁弹射平台技术</td>
<td>综合电力系统垄断</td>
<td>⭐⭐⭐⭐</td>
<td>技术可靠性待检验</td>
</tr>
<tr>
<td class="font-bold text-primary">西部材料</td>
<td>水下装备材料</td>
<td>钛合金核心供应商</td>
<td>⭐⭐⭐</td>
<td>军品占比低</td>
</tr>
<tr>
<td class="font-bold text-primary">中国船舶</td>
<td>海军装备总装</td>
<td>航母唯一建造商</td>
<td>⭐⭐</td>
<td>弹性相对较小</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Stock Pool -->
<section class="py-16 px-4" id="stocks">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12">海军概念股票池</h2>
<div class="table-scroll">
<table class="table w-full stock-table">
<thead>
<tr>
<th class="sticky left-0 bg-slate-900">股票名称</th>
<th>所属行业</th>
<th>核心项目</th>
<th>产业链环节</th>
<th>投资逻辑</th>
<th>数据来源</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">中国船舶</td>
<td>船舶制造</td>
<td>航母、核潜艇、大型驱逐舰</td>
<td>海军装备研发生产</td>
<td>民用商用船舶制造营收第一,承担海军主战装备科研生产任务</td>
<td><span class="badge badge-outline">公开资料</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">中船防务</td>
<td>船舶制造</td>
<td>055型驱逐舰</td>
<td>护卫舰市场</td>
<td>在护卫舰市场占据领先地位,参与多个重点型号建造</td>
<td><span class="badge badge-outline">公开资料</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">中国海防</td>
<td>海洋防务</td>
<td>声纳装备</td>
<td>水声电子系统</td>
<td>国内海洋防务声纳装备核心供应商市占率70-80%</td>
<td><span class="badge badge-outline">互动</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">湘电股份</td>
<td>船舶动力</td>
<td>电磁弹射系统</td>
<td>舰船电力推进</td>
<td>国内唯一舰船综合电力系统供应商,电磁弹射核心分包商</td>
<td><span class="badge badge-outline">路演数据</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">西部材料</td>
<td>金属材料</td>
<td>钛合金结构件</td>
<td>特种材料</td>
<td>钛合金用于核潜艇壳体、声纳结构件单艘价值量5-6亿</td>
<td><span class="badge badge-outline">路演数据</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">中国动力</td>
<td>船舶动力</td>
<td>海军舰船动力</td>
<td>动力系统</td>
<td>海军作战舰艇动力系统排名第一,主要供应商</td>
<td><span class="badge badge-outline">互动</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">中国重工</td>
<td>船舶制造</td>
<td>核潜艇</td>
<td>水下装备总装</td>
<td>承担核潜艇建造任务,水下装备核心总装单位</td>
<td><span class="badge badge-outline">公开资料</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">中科海讯</td>
<td>声纳装备</td>
<td>水声目标探测</td>
<td>水声电子</td>
<td>产品应用于声纳装备领域,最终用户为国家特种部门</td>
<td><span class="badge badge-outline">互动</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">天海防务</td>
<td>特种无人船</td>
<td>无人潜航器</td>
<td>无人装备平台</td>
<td>子公司金海运研发多类型特种无人船,无人装备标的</td>
<td><span class="badge badge-outline">互动</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">久之洋</td>
<td>光电设备</td>
<td>红外、激光、光学产品</td>
<td>舰载光电系统</td>
<td>中船集团旗下光电上市公司,产品涵盖四大类光电设备</td>
<td><span class="badge badge-outline">互动</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">亚光科技</td>
<td>军用小艇</td>
<td>冲锋舟、指挥艇</td>
<td>特种舰艇</td>
<td>军用冲锋舟、指挥艇等特种小艇市占率领先</td>
<td><span class="badge badge-outline">公开资料</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">亚星锚链</td>
<td>链条生产</td>
<td>船用锚链</td>
<td>船舶配套</td>
<td>全球最大链条生产企业船用锚链市占率超70%</td>
<td><span class="badge badge-outline">公开资料</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">中船科技</td>
<td>船舶设计</td>
<td>船舶工业规划设计</td>
<td>设计研发</td>
<td>全资子公司中船九院为中国船舶工业规划设计国家队</td>
<td><span class="badge badge-outline">公开资料</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">海兰信</td>
<td>船舶电子</td>
<td>首艘航母辽宁舰</td>
<td>舰船电子系统</td>
<td>产品已应用于包括辽宁舰在内的各类舰船</td>
<td><span class="badge badge-outline">公告</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">国瑞科技</td>
<td>船舶电子</td>
<td>雷达、电子战系统</td>
<td>军工电子信息系统</td>
<td>参股公司中电华瑞产品涵盖雷达、电子战系统</td>
<td><span class="badge badge-outline">网传纪要</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">泰豪科技</td>
<td>舰载作战辅助系统</td>
<td>航母及海军舰艇</td>
<td>作战支持系统</td>
<td>相关产品已应用于航母及海军舰艇</td>
<td><span class="badge badge-outline">互动</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">潍柴重机</td>
<td>船舶动力</td>
<td>船舶动力系统</td>
<td>动力设备</td>
<td>开发销售船舶动力和发电设备,市场覆盖广泛</td>
<td><span class="badge badge-outline">互动</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">江龙船艇</td>
<td>公务执法船艇</td>
<td>海事海警装备</td>
<td>特种船艇</td>
<td>产品广泛应用于海事、海关、海警等维护海洋主权领域</td>
<td><span class="badge badge-outline">互动</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">王子新材</td>
<td>船舶电子</td>
<td>舰船电子信息系统</td>
<td>电子配套</td>
<td>全资子公司中电华瑞从事舰船电子信息系统领域</td>
<td><span class="badge badge-outline">互动</span></td>
</tr>
<tr>
<td class="sticky left-0 font-bold bg-slate-800">*ST宝实</td>
<td>船舶电器</td>
<td>船舶消磁器</td>
<td>船舶配套</td>
<td>船舶消磁器业务市场占有率居首位</td>
<td><span class="badge badge-outline">年报</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Investment Strategy -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12">投资策略建议</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="card bg-gradient-to-r from-green-900/50 to-green-800/30 rounded-xl p-6">
<h3 class="text-2xl font-bold mb-4 text-green-400">
<i class="fas fa-thumbs-up mr-2"></i>重点配置
</h3>
<div class="space-y-3">
<div class="p-3 bg-slate-800/50 rounded-lg">
<div class="flex items-center justify-between">
<span class="font-bold">中国海防</span>
<span class="badge badge-success">首选标的</span>
</div>
<p class="text-sm text-slate-400 mt-1">70%市占率+资产注入预期+业绩拐点三重逻辑</p>
</div>
<div class="p-3 bg-slate-800/50 rounded-lg">
<div class="flex items-center justify-between">
<span class="font-bold">湘电股份</span>
<span class="badge badge-success">弹性标的</span>
</div>
<p class="text-sm text-slate-400 mt-1">电磁弹射0到1突破2025年收入确认高峰</p>
</div>
<div class="p-3 bg-slate-800/50 rounded-lg">
<div class="flex items-center justify-between">
<span class="font-bold">西部材料</span>
<span class="badge badge-success">稳健标的</span>
</div>
<p class="text-sm text-slate-400 mt-1">钛合金刚需,不受军品定价机制约束</p>
</div>
</div>
</div>
<div class="card bg-gradient-to-r from-red-900/50 to-red-800/30 rounded-xl p-6">
<h3 class="text-2xl font-bold mb-4 text-red-400">
<i class="fas fa-exclamation-triangle mr-2"></i>规避标的
</h3>
<div class="space-y-3">
<div class="p-3 bg-slate-800/50 rounded-lg">
<div class="flex items-center justify-between">
<span class="font-bold">王子新材</span>
<span class="badge badge-error">伪概念</span>
</div>
<p class="text-sm text-slate-400 mt-1">军品占比不足5%,与电磁弹射无技术关联</p>
</div>
<div class="p-3 bg-slate-800/50 rounded-lg">
<div class="flex items-center justify-between">
<span class="font-bold">久之洋</span>
<span class="badge badge-error">业绩下滑</span>
</div>
<p class="text-sm text-slate-400 mt-1">民用海监设备为主2024H1收入同比-22%</p>
</div>
<div class="p-3 bg-slate-800/50 rounded-lg">
<div class="flex items-center justify-between">
<span class="font-bold">海兰信</span>
<span class="badge badge-error">ST风险</span>
</div>
<p class="text-sm text-slate-400 mt-1">军品资质不全2024年亏损1.2亿</p>
</div>
</div>
</div>
</div>
<div class="section-divider"></div>
<div class="alert alert-info">
<i class="fas fa-info-circle text-2xl"></i>
<div>
<h4 class="font-bold text-lg">关键验证指标</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div>
<span class="font-semibold">订单指标:</span>
<p>全军装备采购信息网海军装备招标金额</p>
</div>
<div>
<span class="font-semibold">财务指标:</span>
<p>中国海防合同负债环比增速需持续增长30%+</p>
</div>
<div>
<span class="font-semibold">技术节点:</span>
<p>076型舰海试进度与电磁弹射测试结果</p>
</div>
<div>
<span class="font-semibold">政策信号:</span>
<p>2025年国防预算海军科目增速需超20%</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer footer-center p-10 bg-slate-900 text-base-content">
<div>
<p class="font-bold text-2xl">
<i class="fas fa-ship mr-2"></i>海军装备产业链深度分析
</p>
<p class="text-slate-400">专业投资研究 · 数据驱动决策</p>
</div>
<div>
<div class="grid grid-flow-col gap-4">
<a class="btn btn-ghost btn-circle">
<i class="fab fa-twitter"></i>
</a>
<a class="btn btn-ghost btn-circle">
<i class="fab fa-github"></i>
</a>
<a class="btn btn-ghost btn-circle">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
<div>
<p>Copyright © 2025 - 保留所有权利</p>
</div>
</footer>
<script>
// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Add scroll effect to navbar
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 100) {
navbar.classList.add('shadow-xl');
} else {
navbar.classList.remove('shadow-xl');
}
});
// Animate elements on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe all cards
document.querySelectorAll('.card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
observer.observe(card);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,648 @@
# 谷歌概念深度解析:技术霸权与算力革命
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>谷歌概念AI技术霸权与算力革命</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.hover-lift {
transition: all 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.timeline-dot {
position: relative;
}
.timeline-dot::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
top: 100%;
left: 50%;
transform: translateX(-50%);
}
.timeline-dot:last-child::after {
display: none;
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.scroll-smooth {
scroll-behavior: smooth;
}
.table-scroll {
overflow-x: auto;
}
.table-scroll::-webkit-scrollbar {
height: 8px;
}
.table-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}
.table-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.badge-glow {
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
box-shadow: 0 0 5px #667eea;
}
to {
box-shadow: 0 0 20px #667eea, 0 0 30px #667eea;
}
}
</style>
</head>
<body class="bg-gray-50 scroll-smooth">
<!-- Hero Section -->
<section class="relative bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 text-white overflow-hidden">
<div class="absolute inset-0 bg-black opacity-40"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
<div class="text-center">
<div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full mb-6 pulse-animation">
<i class="fab fa-google text-3xl"></i>
</div>
<h1 class="text-5xl md:text-7xl font-bold mb-6">
<span class="gradient-text bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 text-transparent bg-clip-text">
谷歌概念
</span>
</h1>
<p class="text-xl md:text-2xl mb-8 text-gray-200">
AI技术霸权 × 算力基建革命 × Token经济范式
</p>
<div class="flex flex-wrap justify-center gap-4">
<span class="px-4 py-2 bg-green-500 bg-opacity-20 border border-green-400 rounded-full text-sm">
<i class="fas fa-rocket mr-2"></i>Gemini 3 Pro 登顶
</span>
<span class="px-4 py-2 bg-blue-500 bg-opacity-20 border border-blue-400 rounded-full text-sm">
<i class="fas fa-microchip mr-2"></i>930亿美金 CAPEX
</span>
<span class="px-4 py-2 bg-purple-500 bg-opacity-20 border border-purple-400 rounded-full text-sm">
<i class="fas fa-bolt mr-2"></i>480万亿 Token/月
</span>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0">
<svg class="w-full h-20" viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="#F9FAFB"/>
</svg>
</div>
</section>
<!-- 核心数据指标 -->
<section class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-8 text-gray-800">核心数据指标</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="text-center p-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl hover-lift">
<div class="text-4xl font-bold text-purple-600 mb-2">1501</div>
<div class="text-gray-600">LMArena 评分</div>
</div>
<div class="text-center p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl hover-lift">
<div class="text-4xl font-bold text-blue-600 mb-2">930亿</div>
<div class="text-gray-600">2025 CAPEX</div>
</div>
<div class="text-center p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl hover-lift">
<div class="text-4xl font-bold text-green-600 mb-2">480万亿</div>
<div class="text-gray-600">月Token消耗</div>
</div>
<div class="text-center p-6 bg-gradient-to-br from-yellow-50 to-orange-50 rounded-xl hover-l">
<div class="text-4xl font-bold text-yellow-600 mb-2">15亿</div>
<div class="text-gray-600">AI搜索月活</div>
</div>
</div>
</div>
</section>
<!-- 事件时间轴 -->
<section class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">概念事件时间轴</h2>
<div class="relative">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="timeline-dot">
<div class="bg-white p-6 rounded-xl shadow-lg hover-lift">
<div class="flex items-center mb-4">
<span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-semibold">2024年2月</span>
</div>
<h3 class="text-lg font-bold mb-2">产品发布</h3>
<p class="text-gray-600">推出ImageFX图像工具、Bard文生图功能基于Imagen 2模型</p>
</div>
</div>
<div class="timeline-dot">
<div class="bg-white p-6 rounded-xl shadow-lg hover-lift">
<div class="flex items-center mb-4">
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-semibold">2024年4月</span>
</div>
<h3 class="text-lg font-bold mb-2">战略发布</h3>
<p class="text-gray-600">Cloud Next大会发布Axion Arm CPU、TPU v5p</p>
</div>
</div>
<div class="timeline-dot">
<div class="bg-white p-6 rounded-xl shadow-lg hover-lift">
<div class="flex items-center mb-4">
<span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-semibold">2024年8月</span>
</div>
<h3 class="text-lg font-bold mb-2">产品发布</h3>
<p class="text-gray-600">Pixel 9系列Gemini Live语音助手端侧AI商业化</p>
</div>
</div>
<div class="timeline-dot">
<div class="bg-white p-6 rounded-xl shadow-lg hover-lift">
<div class="flex items-center mb-4">
<span class="px-3 py-1 bg-red-100 text-red-700 rounded-full text-sm font-semibold">2024年11月</span>
</div>
<h3 class="text-lg font-bold mb-2 badge-glow">技术突破</h3>
<p class="text-gray-600">Gemini 3 Pro登顶LMArena 1501分Nano Banana 2发布</p>
</div>
</div>
<div class="timeline-dot">
<div class="bg-white p-6 rounded-xl shadow-lg hover-lift">
<div class="flex items-center mb-4">
<span class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-sm font-semibold">2025年1月</span>
</div>
<h3 class="text-lg font-bold mb-2">业绩验证</h3>
<p class="text-gray-600">Q1营收902亿美元资本开支172亿美元</p>
</div>
</div>
<div class="timeline-dot">
<div class="bg-white p-6 rounded-xl shadow-lg hover-lift">
<div class="flex items-center mb-4">
<span class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm font-semibold">2025年10月</span>
</div>
<h3 class="text-lg font-bold mb-2">资本扩张</h3>
<p class="text-gray-600">CAPEX指引上调至910-930亿美元</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心逻辑 -->
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">核心逻辑</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gradient-to-br from-purple-600 to-purple-800 text-white p-8 rounded-2xl">
<div class="text-4xl mb-4">👑</div>
<h3 class="text-2xl font-bold mb-4">技术霸权确立</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
<span>Gemini 3 Pro LMArena 1501分历史最高</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
<span>Nano Banana 2图像生成顶尖</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
<span>TPU v7算力4610 TOPS持平H100</span>
</li>
</ul>
</div>
<div class="bg-gradient-to-br from-blue-600 to-blue-800 text-white p-8 rounded-2xl">
<div class="text-4xl mb-4">💰</div>
<h3 class="text-2xl font-bold mb-4">资本开支暴力扩张</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
<span>2025 CAPEX 910-930亿美元</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
<span>TPU电源单卡价值量1000+元</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
<span>2026年500万颗对应50亿市场</span>
</li>
</ul>
</div>
<div class="bg-gradient-to-br from-green-600 to-green-800 text-white p-8 rounded-2xl">
<div class="text-4xl mb-4">🚀</div>
<h3 class="text-2xl font-bold mb-4">商业化闭环验证</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
<span>月Token消耗480万亿</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
<span>Q3搜索增速创15%新高</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle mt-1 mr-2 text-green-300"></i>
<span>云业务积压订单1550亿美元</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 产业链图谱 -->
<section class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">产业链图谱</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-white p-8 rounded-xl shadow-lg">
<h3 class="text-xl font-bold mb-6 text-purple-600">上游(芯片/元器件)</h3>
<div class="space-y-3">
<div class="flex items-center p-3 bg-purple-50 rounded-lg">
<i class="fas fa-microchip text-purple-600 text-xl mr-3"></i>
<span>TPU芯片谷歌自研</span>
</div>
<div class="flex items-center p-3 bg-purple-50 rounded-lg">
<i class="fas fa-bolt text-purple-600 text-xl mr-3"></i>
<span>电源模块(新雷能、中富电路)</span>
</div>
<div class="flex items-center p-3 bg-purple-50 rounded-lg">
<i class="fas fa-network-wired text-purple-600 text-xl mr-3"></i>
<span>光器件(赛微电子、腾景科技)</span>
</div>
<div class="flex items-center p-3 bg-purple-50 rounded-lg">
<i class="fas fa-wind text-purple-600 text-xl mr-3"></i>
<span>液冷散热(英维克、博杰股份)</span>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-xl shadow-lg">
<h3 class="text-xl font-bold mb-6 text-blue-600">下游(应用/服务)</h3>
<div class="space-y-3">
<div class="flex items-center p-3 bg-blue-50 rounded-lg">
<i class="fas fa-search text-blue-600 text-xl mr-3"></i>
<span>AI搜索15亿月活</span>
</div>
<div class="flex items-center p-3 bg-blue-50 rounded-lg">
<i class="fas fa-cloud text-blue-600 text-xl mr-3"></i>
<span>云计算GCP+Gemini API</span>
</div>
<div class="flex items-center p-3 bg-blue-50 rounded-lg">
<i class="fas fa-ad text-blue-600 text-xl mr-3"></i>
<span>AI营销易点天下、蓝色光标</span>
</div>
<div class="flex items-center p-3 bg-blue-50 rounded-lg">
<i class="fas fa-paint-brush text-blue-600 text-xl mr-3"></i>
<span>内容创作(万兴科技、视觉中国)</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 股票池表格 -->
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">谷歌概念核心股票池</h2>
<div class="table-scroll">
<table class="w-full bg-white rounded-xl shadow-lg overflow-hidden">
<thead class="bg-gradient-to-r from-purple-600 to-blue-600 text-white">
<tr>
<th class="px-6 py-4 text-left">股票代码</th>
<th class="px-6 py-4 text-left">股票名称</th>
<th class="px-6 py-4 text-left">分类</th>
<th class="px-6 py-4 text-left">关联项目</th>
<th class="px-6 py-4 text-left">合作原因</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">300058.SZ</td>
<td class="px-6 py-4">
<div class="flex items-center">
<span class="mr-2">蓝色光标</span>
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs">核心</span>
</div>
</td>
<td class="px-6 py-4">AI营销</td>
<td class="px-6 py-4">谷歌合作伙伴</td>
<td class="px-6 py-4">通过运用谷歌营销产品实现出海价值</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">301171.SZ</td>
<td class="px-6 py-4">
<div class="flex items-center">
<span class="mr-2">易点天下</span>
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">高弹性</span>
</div>
</td>
<td class="px-6 py-4">AI营销</td>
<td class="px-6 py-4">Google一级代理</td>
<td class="px-6 py-4">Google广告在国内的一级代理提供H5广告变现方案</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">300624.SZ</td>
<td class="px-6 py-4">
<div class="flex items-center">
<span class="mr-2">万兴科技</span>
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs">应用</span>
</div>
</td>
<td class="px-6 py-4">AI应用</td>
<td class="px-6 py-4">接入谷歌Gemini</td>
<td class="px-6 py-4">已接入谷歌Gemini、Veo3、Nano banana等模型</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">300456.SZ</td>
<td class="px-6 py-4">
<div class="flex items-center">
<span class="mr-2">赛微电子</span>
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs">核心</span>
</div>
</td>
<td class="px-6 py-4">OCS</td>
<td class="px-6 py-4">MEMS-OCS量产</td>
<td class="px-6 py-4">2023年并表后获谷歌批量采购订单</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">300308.SZ</td>
<td class="px-6 py-4">
<div class="flex items-center">
<span class="mr-2">中际旭创</span>
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">龙头</span>
</div>
</td>
<td class="px-6 py-4">光模块</td>
<td class="px-6 py-4">800G光模块</td>
<td class="px-6 py-4">2025年谷歌光模块采购量350万只占70%份额</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">002463.SZ</td>
<td class="px-6 py-4">
<div class="flex items-center">
<span class="mr-2">沪电股份</span>
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs">PCB</span>
</div>
</td>
<td class="px-6 py-4">PCB</td>
<td class="px-6 py-4">TPU PCB核心供应商</td>
<td class="px-6 py-4">谷歌TPU PCB核心供应商占TPU供应链约30%份额</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">301183.SZ</td>
<td class="px-6 py-4">
<div class="flex items-center">
<span class="mr-2">东田微</span>
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs">核心</span>
</div>
</td>
<td class="px-6 py-4">OCS</td>
<td class="px-6 py-4">OCS光学方案</td>
<td class="px-6 py-4">为谷歌OCS光学引擎提供核心光学元件解决方案</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">300676.SZ</td>
<td class="px-6 py-4">
<div class="flex items-center">
<span class="mr-2">华大九天</span>
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs">EDA</span>
</div>
</td>
<td class="px-6 py-4">芯片设计</td>
<td class="px-6 py-4">EDA工具支持</td>
<td class="px-6 py-4">为谷歌TPU芯片设计提供EDA工具链支持</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">603803.SH</td>
<td class="px-6 py-4">
<div class="flex items-center">
<span class="mr-2">瑞松科技</span>
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">精密制造</span>
</div>
</td>
<td class="px-6 py-4">精密制造</td>
<td class="px-6 py-4">AI服务器制造</td>
<td class="px-6 py-4">参与谷歌AI服务器精密结构件制造</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-semibold">301387.SZ</td>
<td class="px-6 py-4">
<div class="flex items-center">
<span class="mr-2">新雷能</span>
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs">电源</span>
</div>
</td>
<td class="px-6 py-4">电源</td>
<td class="px-6 py-4">TPU电源模块</td>
<td class="px-6 py-4">为谷歌TPU提供二次和三次电源模块单瓦价格比台系低20%</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 投资建议 -->
<section class="py-16 bg-gradient-to-br from-purple-50 to-blue-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">投资建议与策略</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white p-8 rounded-xl shadow-lg">
<h3 class="text-2xl font-bold mb-6 text-green-600">最具投资价值方向</h3>
<div class="space-y-4">
<div class="flex items-start">
<span class="flex-shrink-0 w-8 h-8 bg-green-100 text-green-600 rounded-full flex items-center justify-center font-bold mr-3">1</span>
<div>
<h4 class="font-semibold mb-1">TPU电源产业链最高优先级</h4>
<p class="text-gray-600 text-sm">电源是TPU扩产最大瓶颈26年50亿市场新雷能15亿收入弹性</p>
</div>
</div>
<div class="flex items-start">
<span class="flex-shrink-0 w-8 h-8 bg-green-100 text-green-600 rounded-full flex items-center justify-center font-bold mr-3">2</span>
<div>
<h4 class="font-semibold mb-1">OCS光交换产业链次高优先级</h4>
<p class="text-gray-600 text-sm">LightCounting预测2029年5万台15% CAGR国产供应商已获订单</p>
</div>
</div>
<div class="flex items-start">
<span class="flex-shrink-0 w-8 h-8 bg-green-100 text-green-600 rounded-full flex items-center justify-center font-bold mr-3">3</span>
<div>
<h4 class="font-semibold mb-1">AI搜索营销产业链中优先级</h4>
<p class="text-gray-600 text-sm">一级代理商受益于谷歌减少中间环节毛利率提升2-3pct</p>
</div>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-xl shadow-lg">
<h3 class="text-2xl font-bold mb-6 text-red-600">需规避的方向</h3>
<div class="space-y-4">
<div class="flex items-start">
<span class="flex-shrink-0 w-8 h-8 bg-red-100 text-red-600 rounded-full flex items-center justify-center font-bold mr-3">×</span>
<div>
<h4 class="font-semibold mb-1">纯模型接入方</h4>
<p class="text-gray-600 text-sm">Nano Banana中文生成不稳定API成本高毛利率承压</p>
</div>
</div>
<div class="flex items-start">
<span class="flex-shrink-0 w-8 h-8 bg-red-100 text-red-600 rounded-full flex items-center justify-center font-bold mr-3">×</span>
<div>
<h4 class="font-semibold mb-1">广告联盟依赖方</h4>
<p class="text-gray-600 text-sm">谷歌联盟广告持续萎缩,收入端受损</p>
</div>
</div>
<div class="flex items-start">
<span class="flex-shrink-0 w-8 h-8 bg-red-100 text-red-600 rounded-full flex items-center justify-center font-bold mr-3">×</span>
<div>
<h4 class="font-semibold mb-1">硬件代工</h4>
<p class="text-gray-600 text-sm">Pixel手机份额仅4.6%,硬件逻辑不纯</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 风险提示 -->
<section class="py-16 bg-gray-900 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">风险提示</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="glass-effect p-6 rounded-xl">
<i class="fas fa-exclamation-triangle text-yellow-400 text-3xl mb-4"></i>
<h3 class="text-xl font-bold mb-3">技术风险</h3>
<ul class="space-y-2 text-gray-300">
<li>• 与GPT-4o应用差距</li>
<li>• 多模态生成稳定性</li>
<li>• 算力瓶颈制约</li>
</ul>
</div>
<div class="glass-effect p-6 rounded-xl">
<i class="fas fa-chart-line text-red-400 text-3xl mb-4"></i>
<h3 class="text-xl font-bold mb-3">商业化风险</h3>
<ul class="space-y-2 text-gray-300">
<li>• 广告联盟萎缩</li>
<li>• 订阅变现不及预期</li>
<li>• Agent协议推广困难</li>
</ul>
</div>
<div class="glass-effect p-6 rounded-xl">
<i class="fas fa-gavel text-blue-400 text-3xl mb-4"></i>
<h3 class="text-xl font-bold mb-3">政策风险</h3>
<ul class="space-y-2 text-gray-300">
<li>• 反垄断最终判决</li>
<li>• OpenAI竞争冲击</li>
<li>• 中国应用适配不足</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<p class="text-gray-400">© 2024 谷歌概念深度解析 | 数据来源:公开研究报告、路演记录、新闻资讯</p>
<p class="text-gray-500 text-sm mt-2">投资有风险,入市需谨慎 | 本报告仅供参考,不构成投资建议</p>
</div>
</footer>
<script>
// 添加滚动动画
window.addEventListener('scroll', function() {
const elements = document.querySelectorAll('.hover-lift');
elements.forEach(element => {
const elementTop = element.getBoundingClientRect().top;
const elementBottom = element.getBoundingClientRect().bottom;
if (elementTop < window.innerHeight && elementBottom > 0) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
});
// 初始化动画
document.addEventListener('DOMContentLoaded', function() {
const elements = document.querySelectorAll('.hover-lift');
elements.forEach(element => {
element.style.opacity = '0';
element.style.transform = 'translateY(20px)';
element.style.transition = 'all 0.6s ease';
});
});
// 表格行点击高亮
document.querySelectorAll('tbody tr').forEach(row => {
row.addEventListener('click', function() {
// 移除其他行的高亮
document.querySelectorAll('tbody tr').forEach(r => r.classList.remove('bg-blue-50'));
// 添加当前行高亮
this.classList.add('bg-blue-50');
});
});
// 平滑滚动到锚点
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,824 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>远程火力 - 概念深度解析</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-morphism {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.hover-lift {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.timeline-item {
position: relative;
padding-left: 40px;
}
.timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 12px;
height: 12px;
background: #667eea;
border-radius: 50%;
}
.timeline-item::after {
content: '';
position: absolute;
left: 5px;
top: 20px;
width: 2px;
height: calc(100% + 10px);
background: #e5e7eb;
}
.timeline-item:last-child::after {
display: none;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
.stock-table {
font-size: 12px;
}
.stock-table th {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: sticky;
top: 0;
z-index: 10;
}
.stock-table tr:nth-child(even) {
background-color: #f9fafb;
}
.stock-table tr:hover {
background-color: #f3f4f6;
transform: scale(1.01);
transition: all 0.2s;
}
.badge-gradient {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.chain-arrow {
display: inline-block;
margin: 0 10px;
color: #9ca3af;
}
.floating {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.risk-high { border-left: 4px solid #ef4444; }
.risk-medium { border-left: 4px solid #f59e0b; }
.risk-low { border-left: 4px solid #10b981; }
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section -->
<div class="gradient-bg text-white py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center fade-in-up">
<h1 class="text-5xl md:text-6xl font-bold mb-4 floating">
<i class="fas fa-rocket mr-4"></i>远程火力
</h1>
<p class="text-xl md:text-2xl opacity-90 mb-8">现代陆军第四代核心骨干装备 · 高效费比战争撒手锏</p>
<div class="flex flex-wrap justify-center gap-4">
<span class="glass-morphism px-4 py-2 rounded-full">
<i class="fas fa-crosshairs mr-2"></i>射程 70-500km
</span>
<span class="glass-morphism px-4 py-2 rounded-full">
<i class="fas fa-bullseye mr-2"></i>CEP精度 30m
</span>
<span class="glass-morphism px-4 py-2 rounded-full">
<i class="fas fa-dollar-sign mr-2"></i>成本仅为导弹1/10
</span>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="max-w-7xl mx-auto px-4 py-12">
<!-- 概念定义与背景 -->
<section class="mb-12 fade-in-up">
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-info-circle text-purple-600 mr-3"></i>概念定义与背景
</h2>
<div class="prose max-w-none text-gray-600">
<p class="text-lg leading-relaxed mb-4">
<strong>远程火力</strong>(简称"远火")在军事领域特指远程火箭炮武器系统,是现代陆军第四代核心骨干装备。该系统通过远程火箭弹实现<strong>70-500公里射程</strong>的精确打击能力有效填补传统身管火炮20-50公里与战术弹道导弹千公里级之间的火力空白。
</p>
<div class="grid md:grid-cols-3 gap-6 mt-6">
<div class="bg-gradient-to-br from-blue-50 to-purple-50 p-6 rounded-xl">
<h3 class="font-bold text-lg mb-3 text-blue-800"><i class="fas fa-bolt mr-2"></i>核心特征</h3>
<ul class="space-y-2 text-sm">
<li>• 低成本高效费比</li>
<li>• 模块化设计</li>
<li>• 精准制导能力</li>
<li>• 快速部署机动</li>
</ul>
</div>
<div class="bg-gradient-to-br from-green-50 to-teal-50 p-6 rounded-xl">
<h3 class="font-bold text-lg mb-3 text-green-800"><i class="fas fa-shield-alt mr-2"></i>战略地位</h3>
<ul class="space-y-2 text-sm">
<li>• 填补火力空白</li>
<li>• 战争消耗主力</li>
<li>• 精打要害利器</li>
<li>• 破击体系关键</li>
</ul>
</div>
<div class="bg-gradient-to-br from-orange-50 to-red-50 p-6 rounded-xl">
<h3 class="font-bold text-lg mb-3 text-orange-800"><i class="fas fa-globe mr-2"></i>国际形势</h3>
<ul class="space-y-2 text-sm">
<li>• 美军扩编500套</li>
<li>• 欧盟2030战备计划</li>
<li>• 俄乌冲突验证价值</li>
<li>• 全球军贸需求爆发</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 核心观点 -->
<section class="mb-12 fade-in-up">
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-lightbulb text-yellow-500 mr-3"></i>核心观点
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="border-l-4 border-purple-500 pl-6">
<h3 class="font-bold text-lg mb-3">三大驱动力共振</h3>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span><strong>军事战略重构</strong>美军将其与高超音速导弹并列为优先事项预算300亿美元</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span><strong>技术成熟度突破</strong>模块化装填效率提升6倍精度达30米级</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span><strong>实战验证需求</strong>单套海马斯消耗500-625枚弹药储备严重不足</span>
</li>
</ul>
</div>
<div class="border-l-4 border-blue-500 pl-6">
<h3 class="font-bold text-lg mb-3">三大预期差</h3>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i>
<span><strong>市场空间VS订单节奏</strong>:研报"万台"预期 vs 实际年产20套</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i>
<span><strong>垄断VS竞争</strong>:北方导航"独供"仅限大口径型号</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i>
<span><strong>成本优势VS价格风险</strong>:军采阶梯降价或冲击毛利率</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 催化事件时间轴 -->
<section class="mb-12 fade-in-up">
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-timeline text-indigo-600 mr-3"></i>催化事件时间轴
</h2>
<div class="space-y-6">
<div class="timeline-item">
<div class="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-lg">
<span class="text-sm font-semibold text-purple-600">2024年7月-10月</span>
<h3 class="font-bold mt-1">研究机构密集发布深度研报</h3>
<p class="text-gray-600 text-sm mt-2">长江军工、东兴证券等7-10份报告系统构建分析框架将远火定位为新时期陆军"战争之神"</p>
</div>
</div>
<div class="timeline-item">
<div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-4 rounded-lg">
<span class="text-sm font-semibold text-blue-600">2024年9月</span>
<h3 class="font-bold mt-1">美军扩编计划曝光</h3>
<p class="text-gray-600 text-sm mt-2">将远程火力战略地位提升至与高超音速导弹同级采购量从105套增至500套</p>
</div>
</div>
<div class="timeline-item">
<div class="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-lg">
<span class="text-sm font-semibold text-green-600">2025年2月</span>
<h3 class="font-bold mt-1">技术路线明确</h3>
<p class="text-gray-600 text-sm mt-2">确立固体火箭发动机、多脉冲发动机、碳纤维壳体为技术核心</p>
</div>
</div>
<div class="timeline-item">
<div class="bg-gradient-to-r from-orange-50 to-red-50 p-4 rounded-lg">
<span class="text-sm font-semibold text-orange-600">2025年5月</span>
<h3 class="font-bold mt-1">军贸订单实证</h3>
<p class="text-gray-600 text-sm mt-2">巴基斯坦采购中国远程火箭弹及自行加榴炮,获得实战验证</p>
</div>
</div>
</div>
</div>
</section>
<!-- 产业链图谱 -->
<section class="mb-12 fade-in-up">
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-sitemap text-teal-600 mr-3"></i>产业链图谱
</h2>
<div class="overflow-x-auto">
<div class="min-w-max">
<div class="flex items-center justify-between mb-4">
<div class="text-center bg-gray-100 p-3 rounded-lg">
<h3 class="font-bold">上游材料及元器件</h3>
<p class="text-sm text-gray-600">价值占比15-20%</p>
</div>
<i class="fas fa-arrow-right text-2xl text-gray-400"></i>
<div class="text-center bg-purple-100 p-3 rounded-lg">
<h3 class="font-bold">中游核心系统</h3>
<p class="text-sm text-gray-600">价值占比60-70%</p>
<span class="badge-gradient text-white text-xs px-2 py-1 rounded-full">战略制高点</span>
</div>
<i class="fas fa-arrow-right text-2xl text-gray-400"></i>
<div class="text-center bg-gray-100 p-3 rounded-lg">
<h3 class="font-bold">下游总装及平台</h3>
<p class="text-sm text-gray-600">价值占比15-20%</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
<div class="space-y-2">
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>碳纤维:光威复材</div>
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>MLCC电容鸿远电子</div>
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>连接器:航天电器</div>
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>火工品:北化股份</div>
</div>
<div class="space-y-2">
<div class="flex items-center"><span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>制导系统:北方导航</div>
<div class="flex items-center"><span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>动力模块:国科军工</div>
<div class="flex items-center"><span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>光纤环:长盈通</div>
</div>
<div class="space-y-2">
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>火箭炮总装:中兵红箭</div>
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>系统总体:航天彩虹</div>
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>外贸出口:北方工业</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心公司对比 -->
<section class="mb-12 fade-in-up">
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-crown text-yellow-500 mr-3"></i>核心公司对比分析
</h2>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead class="bg-gradient-to-r from-purple-600 to-blue-600 text-white">
<tr>
<th class="px-4 py-3 text-left">公司</th>
<th class="px-4 py-3 text-left">卡位环节</th>
<th class="px-4 py-3 text-left">核心优势</th>
<th class="px-4 py-3 text-left">潜在风险</th>
<th class="px-4 py-3 text-center">投资评级</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">北方导航</td>
<td class="px-4 py-3">制导舱(中段+末段)</td>
<td class="px-4 py-3">独供制导舱280/500km射程核心供应商</td>
<td class="px-4 py-3">订单节奏不确定,价格承压</td>
<td class="px-4 py-3 text-center"><span class="bg-green-100 text-green-800 px-3 py-1 rounded-full">超配</span></td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">国科军工</td>
<td class="px-4 py-3">动力模块(固体发动机)</td>
<td class="px-4 py-3">稀缺军工牌照弹载动力模块CAGR 35.56%</td>
<td class="px-4 py-3">产能扩张慢,军品交付不及预期</td>
<td class="px-4 py-3 text-center"><span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full">标配</span></td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold">长盈通</td>
<td class="px-4 py-3">光纤环(陀螺仪核心)</td>
<td class="px-4 py-3">军用光纤环龙头军民两用占比90%</td>
<td class="px-4 py-3">MEMS技术替代风险民品波动</td>
<td class="px-4 py-3 text-center"><span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full">标配</span></td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 font-bold">中兵红箭</td>
<td class="px-4 py-3">整弹总装</td>
<td class="px-4 py-3">兵器集团唯一弹药平台特种装备占比50%+</td>
<td class="px-4 py-3">传统弹药拖累估值,转型进度慢</td>
<td class="px-4 py-3 text-center"><span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full">观望</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 股票数据表格 -->
<section class="mb-12 fade-in-up">
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-table text-indigo-600 mr-3"></i>远程火力概念股票全览
</h2>
<div class="overflow-x-auto">
<table class="stock-table w-full">
<thead>
<tr>
<th class="px-2 py-2 text-left">股票名称</th>
<th class="px-2 py-2 text-left">分类</th>
<th class="px-2 py-2 text-left">产业链</th>
<th class="px-2 py-2 text-left">项目</th>
<th class="px-2 py-2 text-left">关联逻辑</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-2 py-2 font-semibold">航天电子</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">总装</td>
<td class="px-2 py-2">精确制导导弹</td>
<td class="px-2 py-2">稀缺主机厂</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">中兵红箭</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">总装</td>
<td class="px-2 py-2">弹药总装</td>
<td class="px-2 py-2">唯一弹药平台</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">航天彩虹</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">总装</td>
<td class="px-2 py-2">多用途模块化导弹</td>
<td class="px-2 py-2">填补国内空白</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">洪都航空</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">总装</td>
<td class="px-2 py-2">导弹业务</td>
<td class="px-2 py-2">厂所合一平台</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">高德红外</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">导引头</td>
<td class="px-2 py-2">多款型号产品</td>
<td class="px-2 py-2">精确制导优势</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">菲利华</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">材料</td>
<td class="px-2 py-2">军工配套</td>
<td class="px-2 py-2">军工蓝宝石球罩</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">铂力特</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">金属3D打印</td>
<td class="px-2 py-2">3D打印零件</td>
<td class="px-2 py-2">导弹型号应用</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">派克新材</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">锻造</td>
<td class="px-2 py-2">导弹配套</td>
<td class="px-2 py-2">型号研制配套</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">航宇科技</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">锻造</td>
<td class="px-2 py-2">导弹配套</td>
<td class="px-2 py-2">锻件应用</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">钢研高纳</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">材料</td>
<td class="px-2 py-2">高温合金</td>
<td class="px-2 py-2">导弹应用</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">光威复材</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">材料</td>
<td class="px-2 py-2">碳纤维</td>
<td class="px-2 py-2">发动机壳体</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">抚顺特钢</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">材料</td>
<td class="px-2 py-2">高强度钢</td>
<td class="px-2 py-2">关键材料</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">甘化科工</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">钨合金</td>
<td class="px-2 py-2">钨合金预制破片</td>
<td class="px-2 py-2">导弹配套</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">国泰集团</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">钨合金</td>
<td class="px-2 py-2">军用钨基材料</td>
<td class="px-2 py-2">毁伤材料</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">北方长龙</td>
<td class="px-2 py-2">导弹</td>
<td class="px-2 py-2">其他</td>
<td class="px-2 py-2">弹药装备</td>
<td class="px-2 py-2">复合材料弹药箱</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">北化股份</td>
<td class="px-2 py-2">战斗部系统</td>
<td class="px-2 py-2">发射药</td>
<td class="px-2 py-2">硝化棉</td>
<td class="px-2 py-2">硝化棉龙头</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">长城军工</td>
<td class="px-2 py-2">战斗部系统</td>
<td class="px-2 py-2">弹药</td>
<td class="px-2 py-2">传统弹药</td>
<td class="px-2 py-2">老牌弹药公司</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">新余国科</td>
<td class="px-2 py-2">战斗部系统</td>
<td class="px-2 py-2">火工品</td>
<td class="px-2 py-2">军用火工品</td>
<td class="px-2 py-2">火工元件</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">国科军工</td>
<td class="px-2 py-2">战斗部系统</td>
<td class="px-2 py-2">火工品</td>
<td class="px-2 py-2">导弹配套</td>
<td class="px-2 py-2">二三级配套</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">北方导航</td>
<td class="px-2 py-2">惯性制导(中段)</td>
<td class="px-2 py-2">导航</td>
<td class="px-2 py-2">惯性导航系统</td>
<td class="px-2 py-2">成本竞争优势</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">星网宇达</td>
<td class="px-2 py-2">惯性制导(中段)</td>
<td class="px-2 py-2">导航</td>
<td class="px-2 py-2">惯性导航系统</td>
<td class="px-2 py-2">远程制导炸弹</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">理工导航</td>
<td class="px-2 py-2">惯性制导(中段)</td>
<td class="px-2 py-2">导航</td>
<td class="px-2 py-2">惯性导航系统</td>
<td class="px-2 py-2">制导炸弹配套</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">长盈通</td>
<td class="px-2 py-2">卫星制导(中段)</td>
<td class="px-2 py-2">光纤</td>
<td class="px-2 py-2">军用光纤陀螺</td>
<td class="px-2 py-2">光纤环供应商</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">芯动联科</td>
<td class="px-2 py-2">卫星制导(中段)</td>
<td class="px-2 py-2">MEMS惯性传感器</td>
<td class="px-2 py-2">MEMS惯性传感器</td>
<td class="px-2 py-2">高性能传感器</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">盟升电子</td>
<td class="px-2 py-2">卫星制导(中段)</td>
<td class="px-2 py-2">卫星导航</td>
<td class="px-2 py-2">卫星导航系统</td>
<td class="px-2 py-2">导航系统</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">振芯科技</td>
<td class="px-2 py-2">卫星制导(中段)</td>
<td class="px-2 py-2">卫星导航</td>
<td class="px-2 py-2">卫星导航系统</td>
<td class="px-2 py-2">导航系统</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">亚光科技</td>
<td class="px-2 py-2">卫星制导(中段)</td>
<td class="px-2 py-2">微波电子</td>
<td class="px-2 py-2">微波电子元器件</td>
<td class="px-2 py-2">导弹导引头</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">天箭科技</td>
<td class="px-2 py-2">制导系统</td>
<td class="px-2 py-2">微波/毫米波</td>
<td class="px-2 py-2">微波固态发射机</td>
<td class="px-2 py-2">推进稀布阵</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">雷电微力</td>
<td class="px-2 py-2">制导系统</td>
<td class="px-2 py-2">微波/毫米波</td>
<td class="px-2 py-2">毫米波有源相控阵</td>
<td class="px-2 py-2">相控阵</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">臻镭科技</td>
<td class="px-2 py-2">制导系统</td>
<td class="px-2 py-2">微波/毫米波</td>
<td class="px-2 py-2">射频芯片</td>
<td class="px-2 py-2">射频前端</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">国博电子</td>
<td class="px-2 py-2">制导系统</td>
<td class="px-2 py-2">微波/毫米波</td>
<td class="px-2 py-2">射频模块</td>
<td class="px-2 py-2">射频模块</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">高德红外</td>
<td class="px-2 py-2">红外制导(末段)</td>
<td class="px-2 py-2">红外</td>
<td class="px-2 py-2">制冷探测器</td>
<td class="px-2 py-2">批量应用</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">睿创微纳</td>
<td class="px-2 py-2">红外制导(末段)</td>
<td class="px-2 py-2">红外</td>
<td class="px-2 py-2">非制冷红外热成像</td>
<td class="px-2 py-2">MEMS芯片</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">光谱股份</td>
<td class="px-2 py-2">光学制导(末段)</td>
<td class="px-2 py-2">光学</td>
<td class="px-2 py-2">光学制导</td>
<td class="px-2 py-2">导引头</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">新光光电</td>
<td class="px-2 py-2">光学制导(末段)</td>
<td class="px-2 py-2">光学</td>
<td class="px-2 py-2">光学制导</td>
<td class="px-2 py-2">导弹型号</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">智明达</td>
<td class="px-2 py-2">嵌入式计算机</td>
<td class="px-2 py-2">计算机</td>
<td class="px-2 py-2">嵌入式计算机</td>
<td class="px-2 py-2">弹载应用</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">雷科防务</td>
<td class="px-2 py-2">嵌入式计算机</td>
<td class="px-2 py-2">计算机</td>
<td class="px-2 py-2">嵌入式计算机</td>
<td class="px-2 py-2">国防应用</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">鸿远电子</td>
<td class="px-2 py-2">元器件及部件</td>
<td class="px-2 py-2">电容</td>
<td class="px-2 py-2">军用MLCC</td>
<td class="px-2 py-2">高可靠MLCC</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">宏达电子</td>
<td class="px-2 py-2">元器件及部件</td>
<td class="px-2 py-2">电容</td>
<td class="px-2 py-2">军用钽电容器</td>
<td class="px-2 py-2">钽电容龙头</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">航天电器</td>
<td class="px-2 py-2">元器件及部件</td>
<td class="px-2 py-2">连接器</td>
<td class="px-2 py-2">高端连接器</td>
<td class="px-2 py-2">导弹配套</td>
</tr>
<tr>
<td class="px-2 py-2 font-semibold">中航光电</td>
<td class="px-2 py-2">元器件及部件</td>
<td class="px-2 py-2">连接器</td>
<td class="px-2 py-2">连接器</td>
<td class="px-2 py-2">导弹应用</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 风险提示 -->
<section class="mb-12 fade-in-up">
<div class="bg-white rounded-2xl shadow-xl p-8 hover-lift">
<h2 class="text-3xl font-bold mb-6 text-gray-800">
<i class="fas fa-exclamation-triangle text-red-500 mr-3"></i>风险提示
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="risk-high p-4 rounded-lg">
<h3 class="font-bold text-lg mb-3 text-red-700">技术风险</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li>• MEMS陀螺仪军品认证未通过</li>
<li>• 卫星导航抗干扰能力存疑</li>
<li>• 高端制导器件仍有卡脖子环节</li>
</ul>
</div>
<div class="risk-medium p-4 rounded-lg">
<h3 class="font-bold text-lg mb-3 text-yellow-700">商业化风险</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li>• 军采阶梯降价冲击毛利</li>
<li>• 订单能见度极低</li>
<li>• 订单空窗期可能长达18个月</li>
</ul>
</div>
<div class="risk-low p-4 rounded-lg">
<h3 class="font-bold text-lg mb-3 text-green-700">政策风险</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li>• 军贸审批不确定性</li>
<li>• 军工央企内部竞争</li>
<li>• 和平谈判导致需求降温</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 投资启示 -->
<section class="mb-12 fade-in-up">
<div class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-2xl shadow-xl p-8">
<h2 class="text-3xl font-bold mb-6">
<i class="fas fa-chart-line mr-3"></i>投资启示
</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">概念阶段判断</h3>
<p class="mb-4">远程火力正处于从<strong>主题炒作向基本面驱动</strong>过渡的"阵痛期",长期逻辑坚实但短期面临验证挑战。</p>
<div class="bg-white/10 backdrop-blur p-4 rounded-lg">
<p class="text-sm">当前市场过度关注宏大叙事忽视微观订单。建议降低仓位至标配待Q3催化剂落地后再决策。</p>
</div>
</div>
<div>
<h3 class="text-xl font-bold mb-4">配置建议</h3>
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-arrow-up text-green-400 mr-3"></i>
<span><strong>超配:</strong>北方导航(制导系统龙头)</span>
</li>
<li class="flex items-center">
<i class="fas fa-minus text-yellow-400 mr-3"></i>
<span><strong>标配:</strong>国科军工、长盈通</span>
</li>
<li class="flex items-center">
<i class="fas fa-arrow-down text-red-400 mr-3"></i>
<span><strong>规避:</strong>间接受益标的(航亚科技等)</span>
</li>
</ul>
</div>
</div>
<div class="mt-8 text-center">
<div class="inline-flex items-center bg-white/20 backdrop-blur px-6 py-3 rounded-full">
<span class="pulse-dot w-3 h-3 bg-green-400 rounded-full mr-3"></span>
<span class="font-semibold">一句话总结:值得长期跟踪,但当前处于"证伪窗口期",不见订单不撒鹰</span>
</div>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="max-w-7xl mx-auto px-4 text-center">
<p class="text-sm opacity-75">本页面信息仅供参考,不构成投资建议</p>
<p class="text-xs mt-2 opacity-50">数据来源:研报、路演、公告等公开信息</p>
</div>
</footer>
<script>
// 添加滚动动画
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in-up');
}
});
}, observerOptions);
document.querySelectorAll('section').forEach(section => {
observer.observe(section);
});
// 表格行高亮
document.querySelectorAll('.stock-table tr').forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.01)';
});
row.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,643 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿里AI千问、灵光 - 概念深度分析</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.timeline-dot::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #3b82f6;
top: 50%;
left: -8px;
transform: translateY(-50%);
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
.table-responsive {
font-size: 12px;
}
.table-responsive th,
.table-responsive td {
padding: 4px;
}
}
</style>
</head>
<body class="bg-base-300 text-base-content">
<!-- Hero Section -->
<section class="hero min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
<div class="hero-content text-center text-neutral-content">
<div class="max-w-4xl">
<h1 class="text-6xl font-bold mb-4 gradient-text">阿里AI千问、灵光</h1>
<p class="text-xl mb-8 opacity-90">从B端技术输出到C端生态入口的历史性拐点</p>
<div class="stats shadow-lg glass-effect">
<div class="stat">
<div class="stat-title">下载量</div>
<div class="stat-value text-primary">1000万+</div>
<div class="stat-desc">千问APP公测一周</div>
</div>
<div class="stat">
<div class="stat-title">App Store排名</div>
<div class="stat-value text-secondary">Top 3</div>
<div class="stat-desc">2天冲榜</div>
</div>
<div class="stat">
<div class="stat-title">开源模型</div>
<div class="stat-value">200+</div>
<div class="stat-desc">全球下载量超3亿次</div>
</div>
</div>
</div>
</div>
</section>
<!-- Core Insights -->
<section class="py-16 bg-base-200">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-lightbulb-flash-line text-yellow-500"></i> 核心观点摘要
</h2>
<div class="alert alert-warning glass-effect shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z" />
</svg>
<div>
<h3 class="font-bold text-lg">核心观点</h3>
<div class="text-sm mt-2">阿里AI战略正经历从B端技术输出到C端生态入口的历史性拐点千问APP的爆发式增长验证了其"开源技术+场景垄断+免费策略"的独特路径有效性。然而当前市场高度聚焦于用户数据和下载量却可能忽视两个关键预期差一是AI收入占比仍处个位数商业化路径尚未跑通二是技术层面虽在开源生态占据第一但推理能力与DeepSeek等竞品仍存在差距。</div>
</div>
</div>
</div>
</section>
<!-- Timeline -->
<section class="py-16 bg-base-300">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-time-line text-blue-500"></i> 关键时间轴
</h2>
<div class="relative">
<div class="absolute left-8 top-0 bottom-0 w-0.5 bg-base-content/20"></div>
<!-- 2024年4月 -->
<div class="mb-8 ml-16 relative timeline-dot">
<div class="timeline-date text-primary font-bold text-lg">2024年4月</div>
<div class="card glass-effect shadow-xl">
<div class="card-body">
<h3 class="card-title">技术基建期</h3>
<ul class="list-disc list-inside space-y-2 text-sm">
<li>阿里云发布通义千问2.5性能追平GPT-4 Turbo</li>
<li>Qwen2.5系列开源,奠定全球第一开源模型族地位</li>
<li>衍生模型超10万下载量突破700万次</li>
</ul>
</div>
</div>
</div>
<!-- 2025年4月 -->
<div class="mb-8 ml-16 relative timeline-dot">
<div class="timeline-date text-primary font-bold text-lg">2025年4月</div>
<div class="card glass-effect shadow-xl">
<div class="card-body">
<h3 class="card-title">Qwen3重磅发布</h3>
<ul class="list-disc list-inside space-y-2 text-sm">
<li>Qwen3-235B-A22B在编程、数学基准测试中超越DeepSeek-R1、GPT-4.1</li>
<li>登顶Hugging Face趋势榜</li>
<li>Qwen3 Coder编程能力达全球SOTAAPI调用量突破千亿级Tokens</li>
</ul>
</div>
</div>
</div>
<!-- 2025年11月 -->
<div class="mb-8 ml-16 relative timeline-dot">
<div class="timeline-date text-error font-bold text-lg">2025年11月 - C端产品爆发期</div>
<div class="card glass-effect shadow-xl">
<div class="card-body">
<h3 class="card-title">里程碑时刻</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
<div class="badge badge-info p-4">
<div class="font-bold">11月14日</div>
<div>通义App升级为千问App</div>
</div>
<div class="badge badge-success p-4">
<div class="font-bold">11月17日</div>
<div>千问App公测版上线</div>
<div>2天冲榜Top 3</div>
</div>
<div class="badge badge-warning p-4">
<div class="font-bold">11月18日</div>
<div>灵光App发布</div>
<div>4天下载破100万</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Core Logic -->
<section class="py-16 bg-base-200">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-mind-map text-purple-500"></i> 核心驱动力分析
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- 技术开源 -->
<div class="card glass-effect shadow-xl hover:shadow-2xl transition-all">
<div class="card-body">
<div class="card-title flex items-center gap-2">
<i class="ri-code-s-slash-line text-2xl text-blue-500"></i>
<span>技术开源战略</span>
<div class="badge badge-info">★★★★☆</div>
</div>
<div class="text-sm space-y-2">
<p>开源200+模型全球下载量超3亿次</p>
<p>衍生模型数量超10万稳居Hugging Face第一</p>
<p>区域性语言处理优势(印尼语、泰语)</p>
<p class="text-warning">短板推理能力与DeepSeek存在差距</p>
</div>
</div>
</div>
<!-- 生态整合 -->
<div class="card glass-effect shadow-xl hover:shadow-2xl transition-all">
<div class="card-body">
<div class="card-title flex items-center gap-2">
<i class="ri-landscape-line text-2xl text-green-500"></i>
<span>C端生态整合</span>
<div class="badge badge-success">★★★★★</div>
</div>
<div class="text-sm space-y-2">
<p>淘宝、高德、支付宝、飞猪全场景覆盖</p>
<p>从聊天到办事的能力闭环</p>
<p>石基信息打通酒店预订系统</p>
<p class="text-success">护城河:竞品无法复制的场景垄断</p>
</div>
</div>
</div>
<!-- 战略投入 -->
<div class="card glass-effect shadow-xl hover:shadow-2xl transition-all">
<div class="card-body">
<div class="card-title flex items-center gap-2">
<i class="ri-rocket-line text-2xl text-red-500"></i>
<span>战略资源投入</span>
<div class="badge badge-error">★★★★★</div>
</div>
<div class="text-sm space-y-2">
<p>3800亿AI基础设施投入三年</p>
<p>吴泳铭定义"AI时代的未来之战"</p>
<p>资本开支2025年预计增长超50%</p>
<p class="text-error">风险ROI压力巨大</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Market Sentiment -->
<section class="py-16 bg-base-300">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-bar-chart-line text-yellow-500"></i> 市场热度与预期差
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="card glass-effect shadow-xl">
<div class="card-body">
<h3 class="card-title">
<i class="ri-fire-line text-orange-500"></i> 市场热度
</h3>
<div class="space-y-3 text-sm">
<div class="flex justify-between items-center">
<span>研报覆盖密度</span>
<div class="badge badge-warning">峰值</div>
</div>
<div class="flex justify-between items-center">
<span>概念板块涨幅</span>
<progress class="progress progress-warning w-56" value="85" max="100"></progress>
</div>
<div class="flex justify-between items-center">
<span>乐观情绪占比</span>
<progress class="progress progress-success w-56" value="90" max="100"></progress>
</div>
</div>
</div>
</div>
<div class="card glass-effect shadow-xl">
<div class="card-body">
<h3 class="card-title">
<i class="ri-alert-line text-red-500"></i> 关键预期差
</h3>
<div class="space-y-3 text-sm">
<div class="alert alert-error">
<i class="ri-money-dollar-circle-line"></i>
<div>C端爆发 ≠ 商业化兑现</div>
<div class="text-xs">AI收入占比仍处个位数</div>
</div>
<div class="alert alert-warning">
<i class="ri-git-branch-line"></i>
<div>开源第一 ≠ 性能无敌</div>
<div class="text-xs">Agent能力低于DeepSeek</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Industry Chain -->
<section class="py-16 bg-base-200">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-links-line text-indigo-500"></i> 产业链图谱
</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- 上游 -->
<div class="card glass-effect shadow-xl">
<div class="card-body">
<h3 class="card-title text-primary">上游:算力基础设施</h3>
<div class="text-sm space-y-2">
<p class="font-bold">价值占比: 40%</p>
<ul class="list-disc list-inside">
<li>IDC/智算中心: 数据港、杭钢股份、科华数据</li>
<li>AI芯片: 寒武纪、海光信息、平头哥</li>
<li>服务器: 浪潮信息、中科曙光、工业富联</li>
<li>光模块: 中际旭创、新易盛</li>
</ul>
</div>
</div>
</div>
<!-- 中游 -->
<div class="card glass-effect shadow-xl">
<div class="card-body">
<h3 class="card-title text-secondary">中游:模型与平台</h3>
<div class="text-sm space-y-2">
<p class="font-bold">价值占比: 30%(阿里主导)</p>
<ul class="list-disc list-inside">
<li>大模型: 通义千问已开源200+模型)</li>
<li>MaaS平台: 百炼29万企业用户</li>
<li>工具链: 通义灵码(已开始收费)</li>
</ul>
</div>
</div>
</div>
<!-- 下游 -->
<div class="card glass-effect shadow-xl">
<div class="card-body">
<h3 class="card-title text-success">下游:应用与场景</h3>
<div class="text-sm space-y-2">
<p class="font-bold">价值占比: 30%</p>
<ul class="list-disc list-inside">
<li>电商/消费: 光云科技、丽人丽妆</li>
<li>旅游/酒店: 石基信息(核心标的)</li>
<li>交通/物流: 千方科技</li>
<li>数据服务: 值得买</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Tables -->
<section class="py-16 bg-base-300">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-stock-line text-green-500"></i> 核心关联股票
</h2>
<!-- Table 1 -->
<div class="mb-12">
<h3 class="text-2xl font-bold mb-4 text-center">阿里系参股企业</h3>
<div class="table-responsive">
<table class="table table-xs sm:table-md glass-effect">
<thead>
<tr>
<th>股票名称</th>
<th>分类</th>
<th>行业</th>
<th>相关性</th>
<th>持股比例</th>
</tr>
</thead>
<tbody>
<tr class="hover">
<td class="font-bold">石基信息</td>
<td><span class="badge badge-info">参股消费</span></td>
<td>信息技术</td>
<td>酒店直连核心</td>
<td><span class="badge badge-warning">13.02%</span></td>
</tr>
<tr class="hover">
<td class="font-bold">朗新集团</td>
<td><span class="badge badge-info">参股TMT</span></td>
<td>信息技术</td>
<td>能源数字化</td>
<td><span class="badge badge-warning">16.63%</span></td>
</tr>
<tr class="hover">
<td class="font-bold">千方科技</td>
<td><span class="badge badge-info">参股TMT</span></td>
<td>信息技术</td>
<td>交通领域唯一伙伴</td>
<td><span class="badge badge-warning">14.11%</span></td>
</tr>
<tr class="hover">
<td class="font-bold">分众传媒</td>
<td><span class="badge badge-info">参股TMT</span></td>
<td>传媒</td>
<td>营销合作</td>
<td><span class="badge badge-secondary">6.13%</span></td>
</tr>
<tr class="hover">
<td class="font-bold">三江购物</td>
<td><span class="badge badge-info">参股消费</span></td>
<td>零售</td>
<td>新零售布局</td>
<td><span class="badge badge-warning">30%</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Table 2 -->
<div class="mb-12">
<h3 class="text-2xl font-bold mb-4 text-center">业务合作企业</h3>
<div class="table-responsive">
<table class="table table-xs sm:table-md glass-effect">
<thead>
<tr>
<th>股票名称</th>
<th>项目/业务</th>
<th>原因</th>
<th>相关性</th>
</tr>
</thead>
<tbody>
<tr class="hover">
<td class="font-bold">恒银科技</td>
<td>灵光</td>
<td>接入千问大模型及灵光</td>
<td><span class="badge badge-success">直接合作</span></td>
</tr>
<tr class="hover">
<td class="font-bold">华策影视</td>
<td>内容制作</td>
<td>已接入千问大模型</td>
<td><span class="badge badge-info">应用合作</span></td>
</tr>
<tr class="hover">
<td class="font-bold">润建股份</td>
<td>智算云业务</td>
<td>与阿里云共同投资智算中心</td>
<td><span class="badge badge-success">基础设施</span></td>
</tr>
<tr class="hover">
<td class="font-bold">数据港</td>
<td>ZH13数据中心</td>
<td>阿里核心数据中心供应商</td>
<td><span class="badge badge-error">核心标的</span></td>
</tr>
<tr class="hover">
<td class="font-bold">杭钢股份</td>
<td>B栋数据中心</td>
<td>已上电机柜1069个</td>
<td><span class="badge badge-warning">算力需求</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Table 3 -->
<div class="mb-12">
<h3 class="text-2xl font-bold mb-4 text-center">技术供应商</h3>
<div class="table-responsive">
<table class="table table-xs sm:table-md glass-effect">
<thead>
<tr>
<th>股票名称</th>
<th>产品/服务</th>
<th>合作内容</th>
<th>类别</th>
</tr>
</thead>
<tbody>
<tr class="hover">
<td class="font-bold">浪潮信息</td>
<td>服务器</td>
<td>阿里服务器采购份额最高</td>
<td><span class="badge badge-primary">硬件</span></td>
</tr>
<tr class="hover">
<td class="font-bold">中际旭创</td>
<td>光模块</td>
<td>阿里云主要供应商</td>
<td><span class="badge badge-primary">硬件</span></td>
</tr>
<tr class="hover">
<td class="font-bold">紫光股份</td>
<td>交换机</td>
<td>400G交换机大份额</td>
<td><span class="badge badge-primary">硬件</span></td>
</tr>
<tr class="hover">
<td class="font-bold">寒武纪</td>
<td>GPU</td>
<td>云端产品线合作</td>
<td><span class="badge badge-warning">芯片</span></td>
</tr>
<tr class="hover">
<td class="font-bold">英维克</td>
<td>液冷温控</td>
<td>阿里数据中心制冷</td>
<td><span class="badge badge-info">配套</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Risk Analysis -->
<section class="py-16 bg-base-200">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-error-warning-line text-red-500"></i> 风险提示
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="card glass-effect shadow-xl bg-red-900/20">
<div class="card-body text-center">
<i class="ri-code-box-line text-4xl text-red-400 mb-2"></i>
<h3 class="card-title justify-center">技术风险</h3>
<p class="text-xs">推理能力瓶颈</p>
<p class="text-xs">多模态整合瑕疵</p>
<p class="text-xs">自研芯片性能差距</p>
</div>
</div>
<div class="card glass-effect shadow-xl bg-orange-900/20">
<div class="card-body text-center">
<i class="ri-money-cny-circle-line text-4xl text-orange-400 mb-2"></i>
<h3 class="card-title justify-center">商业化风险</h3>
<p class="text-xs">变现模式不清晰</p>
<p class="text-xs">ROI压力巨大</p>
<p class="text-xs">用户留存不确定</p>
</div>
</div>
<div class="card glass-effect shadow-xl bg-yellow-900/20">
<div class="card-body text-center">
<i class="ri-shield-line text-4xl text-yellow-400 mb-2"></i>
<h3 class="card-title justify-center">政策风险</h3>
<p class="text-xs">数据安全监管</p>
<p class="text-xs">跨境数据限制</p>
<p class="text-xs">反垄断压力</p>
</div>
</div>
<div class="card glass-effect shadow-xl bg-purple-900/20">
<div class="card-body text-center">
<i class="ri-team-line text-4xl text-purple-400 mb-2"></i>
<h3 class="card-title justify-center">竞争风险</h3>
<p class="text-xs">字节豆包竞争</p>
<p class="text-xs">价格战内卷</p>
<p class="text-xs">同质化严重</p>
</div>
</div>
</div>
</div>
</section>
<!-- Investment Insights -->
<section class="py-16 bg-base-300">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12">
<i class="ri-lightbulb-line text-yellow-400"></i> 投资启示
</h2>
<div class="alert alert-info shadow-lg glass-effect">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="font-bold">投资策略建议</h3>
<ul class="list-disc list-inside space-y-2 mt-2 text-sm">
<li><strong>首选标的:</strong>石基信息002153.SZ- 阿里二股东+酒店场景独占50-70%上行空间</li>
<li><strong>次选标的:</strong>数据港603881.SH- 算力需求直接受益PS 4倍存重估空间</li>
<li><strong>防御配置:</strong>值得买300785.SZ- 稳定数据服务10-15%仓位</li>
<li><strong>关键跟踪指标:</strong>千问DAU、AI收入占比、Agent任务完成率</li>
<li><strong>仓位建议:</strong>总体控制在10-15%设置15%止损线</li>
</ul>
</div>
</div>
<div class="mt-8 text-center text-sm opacity-70">
<p>⚠️ 风险提示:本概念当前市梦率成分较重,请谨慎投资</p>
<p>核心观测期2025年4月Q1财报+Qwen4发布</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer footer-center p-10 bg-base-300 text-base-content">
<div>
<p class="font-bold">阿里AI千问、灵光 - 概念深度分析</p>
<p>数据来源:公开信息、路演纪要、研究报告</p>
</div>
<div>
<div class="grid grid-flow-col gap-4">
<a><i class="ri-github-fill text-2xl"></i></a>
<a><i class="ri-twitter-fill text-2xl"></i></a>
<a><i class="ri-wechat-fill text-2xl"></i></a>
</div>
</div>
<div>
<p>© 2025 AI概念分析平台</p>
</div>
</footer>
<script>
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add animation on scroll
const observerOptions = {
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.card, .alert, .timeline-dot').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.5s, transform 0.5s';
observer.observe(el);
});
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 380 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 562 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 279 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 918 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 795 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1017 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 251 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 640 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 315 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 479 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 553 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 556 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 443 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 607 KiB

2089
report_zt_api.py Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -6,6 +6,8 @@ Flask-Compress==1.14
Flask-SocketIO==5.3.6
Flask-Mail==0.9.1
Flask-Migrate==4.0.5
Flask-Session==0.5.0
redis==5.0.1
pandas==2.0.3
numpy==1.24.3
requests==2.31.0
@@ -20,4 +22,5 @@ gevent-websocket==0.10.1
psutil==5.9.6
Pillow==10.1.0
itsdangerous==2.1.2
APScheduler==3.10.4
APScheduler==3.10.4
elasticsearch==8.15.0

View File

@@ -27,17 +27,66 @@ import { PerformancePanel } from './components/PerformancePanel';
import { useGlobalErrorHandler } from './hooks/useGlobalErrorHandler';
// Redux
import { initializePostHog } from './store/slices/posthogSlice';
// ⚡ PostHog 延迟加载:移除同步导入,首屏减少 ~180KB
// import { initializePostHog } from './store/slices/posthogSlice';
import { updateScreenSize } from './store/slices/deviceSlice';
import { injectReducer } from './store';
// Utils
import { logger } from './utils/logger';
import { performanceMonitor } from './utils/performanceMonitor';
// PostHog 追踪
import { trackEvent, trackEventAsync } from '@lib/posthog';
// PostHog 延迟加载:移除同步导入
// import { trackEvent, trackEventAsync } from '@lib/posthog';
// Contexts
import { useAuth } from '@contexts/AuthContext';
// ⚡ PostHog 延迟加载模块(动态导入后缓存)
let posthogModule = null;
let posthogSliceModule = null;
/**
* ⚡ 延迟加载 PostHog 模块
* 返回 { trackEvent, trackEventAsync, initializePostHog, posthogReducer }
*/
const loadPostHogModules = async () => {
if (posthogModule && posthogSliceModule) {
return { posthogModule, posthogSliceModule };
}
try {
const [posthog, posthogSlice] = await Promise.all([
import('@lib/posthog'),
import('./store/slices/posthogSlice'),
]);
posthogModule = posthog;
posthogSliceModule = posthogSlice;
return { posthogModule, posthogSliceModule };
} catch (error) {
logger.error('App', 'PostHog 模块加载失败', error);
return null;
}
};
/**
* ⚡ 异步追踪事件(延迟加载 PostHog 后调用)
* @param {string} eventName - 事件名称
* @param {object} properties - 事件属性
*/
const trackEventLazy = async (eventName, properties = {}) => {
// 等待模块加载完成
if (!posthogModule) {
const modules = await loadPostHogModules();
if (!modules) return;
}
// 使用异步追踪,不阻塞主线程
posthogModule.trackEventAsync(eventName, properties);
};
/**
* AppContent - 应用核心内容
* 负责 PostHog 初始化和渲染路由
@@ -51,28 +100,98 @@ function AppContent() {
const pageEnterTimeRef = useRef(Date.now());
const currentPathRef = useRef(location.pathname);
// 🎯 PostHog Redux 初始化
// 🎯 PostHog 空闲时加载 + Redux 初始化(首屏不加载 ~180KB
useEffect(() => {
dispatch(initializePostHog());
logger.info('App', 'PostHog Redux 初始化已触发');
const initPostHogRedux = async () => {
try {
const modules = await loadPostHogModules();
if (!modules) return;
const { posthogSliceModule } = modules;
// 动态注入 PostHog reducer
injectReducer('posthog', posthogSliceModule.default);
// 初始化 PostHog
dispatch(posthogSliceModule.initializePostHog());
// ⚡ 刷新注入前缓存的事件(避免丢失)
const pendingEvents = posthogSliceModule.flushPendingEventsBeforeInjection();
if (pendingEvents.length > 0) {
logger.info('App', `刷新 ${pendingEvents.length} 个注入前缓存的事件`);
pendingEvents.forEach(({ eventName, properties }) => {
posthogModule.trackEventAsync(eventName, properties);
});
}
logger.info('App', 'PostHog 模块空闲时加载完成Redux 初始化已触发');
} catch (error) {
logger.error('App', 'PostHog 加载失败', error);
}
};
// ⚡ 使用 requestIdleCallback 在浏览器空闲时加载,最长等待 3 秒
if ('requestIdleCallback' in window) {
const idleId = requestIdleCallback(initPostHogRedux, { timeout: 3000 });
return () => cancelIdleCallback(idleId);
} else {
// 降级Safari 等不支持 requestIdleCallback 的浏览器使用 setTimeout
const timer = setTimeout(initPostHogRedux, 1000);
return () => clearTimeout(timer);
}
}, [dispatch]);
// ✅ 首次访问追踪
// ⚡ 性能监控:标记 React 初始化完成
useEffect(() => {
performanceMonitor.mark('react-ready');
}, []);
// 📱 设备检测:监听窗口尺寸变化
useEffect(() => {
let resizeTimer;
const handleResize = () => {
// 防抖:避免频繁触发
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
dispatch(updateScreenSize());
}, 150);
};
window.addEventListener('resize', handleResize);
window.addEventListener('orientationchange', handleResize);
return () => {
clearTimeout(resizeTimer);
window.removeEventListener('resize', handleResize);
window.removeEventListener('orientationchange', handleResize);
};
}, [dispatch]);
// ✅ 首次访问追踪(🔴 关键事件:立即加载模块,确保数据不丢失)
useEffect(() => {
const hasVisited = localStorage.getItem('has_visited');
if (!hasVisited) {
const urlParams = new URLSearchParams(location.search);
// ⚡ 使用异步追踪,不阻塞页面渲染
trackEventAsync('first_visit', {
const eventData = {
referrer: document.referrer || 'direct',
utm_source: urlParams.get('utm_source'),
utm_medium: urlParams.get('utm_medium'),
utm_campaign: urlParams.get('utm_campaign'),
landing_page: location.pathname,
timestamp: new Date().toISOString()
});
};
// 🔴 关键事件:立即加载 PostHog 模块并同步追踪(不使用 trackEventLazy
// 确保首次访问数据不会因用户快速离开而丢失
(async () => {
const modules = await loadPostHogModules();
if (modules) {
// 使用同步追踪trackEvent而非异步追踪trackEventAsync
modules.posthogModule.trackEvent('first_visit', eventData);
logger.info('App', '首次访问事件已同步追踪', eventData);
}
})();
localStorage.setItem('has_visited', 'true');
}
@@ -87,8 +206,8 @@ function AppContent() {
// 只追踪停留时间 > 1 秒的页面(过滤快速跳转)
if (duration > 1) {
// ⚡ 使用异步追踪,不阻塞页面切换
trackEventAsync('page_view_duration', {
// ⚡ 使用延迟加载的异步追踪,不阻塞页面切换
trackEventLazy('page_view_duration', {
path: currentPathRef.current,
duration_seconds: duration,
is_authenticated: isAuthenticated,

View File

@@ -15,6 +15,10 @@
import { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
// ⚡ 模块级变量:防止 React StrictMode 双重初始化
let widgetInitialized = false;
let idleCallbackId = null;
const BytedeskWidget = ({
config,
autoLoad = true,
@@ -27,110 +31,151 @@ const BytedeskWidget = ({
useEffect(() => {
// 如果不自动加载或配置未设置,跳过
if (!autoLoad || !config) {
if (!config) {
console.warn('[Bytedesk] 配置未设置,客服组件未加载');
}
return;
}
console.log('[Bytedesk] 开始加载客服Widget...', config);
// ⚡ 防止重复初始化React StrictMode 会双重调用 useEffect
if (widgetInitialized) {
return;
}
// 加载Bytedesk Widget脚本
const script = document.createElement('script');
script.src = 'https://www.weiyuai.cn/embed/bytedesk-web.js';
script.async = true;
script.id = 'bytedesk-web-script';
// ⚡ 使用 requestIdleCallback 延迟加载,不阻塞首屏
const loadWidget = () => {
// 再次检查,防止竞态条件
if (widgetInitialized) return;
widgetInitialized = true;
script.onload = () => {
console.log('[Bytedesk] Widget脚本加载成功');
// 检查脚本是否已存在
if (document.getElementById('bytedesk-web-script')) {
return;
}
try {
if (window.BytedeskWeb) {
console.log('[Bytedesk] 初始化Widget');
const bytedesk = new window.BytedeskWeb(config);
bytedesk.init();
// 加载Bytedesk Widget脚本
const script = document.createElement('script');
script.src = 'https://www.weiyuai.cn/embed/bytedesk-web.js';
script.async = true;
script.id = 'bytedesk-web-script';
widgetRef.current = bytedesk;
console.log('[Bytedesk] Widget初始化成功');
script.onload = () => {
try {
if (window.BytedeskWeb) {
const bytedesk = new window.BytedeskWeb(config);
bytedesk.init();
widgetRef.current = bytedesk;
// ⚡ 屏蔽 STOMP WebSocket 错误日志(不影响功能
// Bytedesk SDK 内部的 /stomp WebSocket 连接失败不影响核心客服功能
// SDK 会自动降级使用 HTTP 轮询
const originalConsoleError = console.error;
console.error = function(...args) {
const errorMsg = args.join(' ');
// 忽略 /stomp 和 STOMP 相关错误
if (errorMsg.includes('/stomp') ||
errorMsg.includes('stomp onWebSocketError') ||
(errorMsg.includes('WebSocket connection to') && errorMsg.includes('/stomp'))) {
return; // 不输出日志
// ⚡ H5 端样式适配:使用 MutationObserver 立即应用样式(避免闪烁
const isMobile = window.innerWidth <= 768;
const applyBytedeskStyles = () => {
const allElements = document.querySelectorAll('body > div');
allElements.forEach(el => {
const style = window.getComputedStyle(el);
// 检查是否是右下角固定定位的元素Bytedesk 按钮)
if (style.position === 'fixed' && style.right && style.bottom) {
const rightVal = parseInt(style.right);
const bottomVal = parseInt(style.bottom);
if (rightVal >= 0 && rightVal < 100 && bottomVal >= 0 && bottomVal < 100) {
// H5 端设置按钮尺寸为 48x48只执行一次
if (isMobile && !el.dataset.bytedeskStyled) {
el.dataset.bytedeskStyled = 'true';
const button = el.querySelector('button');
if (button) {
button.style.width = '48px';
button.style.height = '48px';
button.style.minWidth = '48px';
button.style.minHeight = '48px';
}
}
// 提示框 3 秒后隐藏(查找白色气泡框)
const children = el.querySelectorAll('div');
children.forEach(child => {
if (child.dataset.bytedeskTooltip) return; // 已处理过
const childStyle = window.getComputedStyle(child);
// 白色背景的提示框
if (childStyle.backgroundColor === 'rgb(255, 255, 255)') {
child.dataset.bytedeskTooltip = 'true';
setTimeout(() => {
child.style.transition = 'opacity 0.3s';
child.style.opacity = '0';
setTimeout(() => child.remove(), 300);
}, 3000);
}
});
}
}
});
};
// 立即执行一次
applyBytedeskStyles();
// 监听 DOM 变化,新元素出现时立即应用样式
const observer = new MutationObserver(applyBytedeskStyles);
observer.observe(document.body, { childList: true, subtree: true });
// 5 秒后停止监听(避免性能问题)
setTimeout(() => observer.disconnect(), 5000);
// ⚡ 屏蔽 STOMP WebSocket 错误日志(不影响功能)
const originalConsoleError = console.error;
console.error = function(...args) {
const errorMsg = args.join(' ');
if (errorMsg.includes('/stomp') ||
errorMsg.includes('stomp onWebSocketError') ||
(errorMsg.includes('WebSocket connection to') && errorMsg.includes('/stomp'))) {
return;
}
originalConsoleError.apply(console, args);
};
if (onLoad) {
onLoad(bytedesk);
}
originalConsoleError.apply(console, args);
};
if (onLoad) {
onLoad(bytedesk);
} else {
throw new Error('BytedeskWeb对象未定义');
}
} catch (error) {
console.error('[Bytedesk] 初始化失败:', error);
if (onError) {
onError(error);
}
} else {
throw new Error('BytedeskWeb对象未定义');
}
} catch (error) {
console.error('[Bytedesk] Widget初始化失败:', error);
};
script.onerror = (error) => {
console.error('[Bytedesk] 脚本加载失败:', error);
widgetInitialized = false; // 允许重试
if (onError) {
onError(error);
}
}
};
document.body.appendChild(script);
scriptRef.current = script;
};
script.onerror = (error) => {
console.error('[Bytedesk] Widget脚本加载失败:', error);
if (onError) {
onError(error);
}
};
// ⚡ 使用 requestIdleCallback 在浏览器空闲时加载
if ('requestIdleCallback' in window) {
idleCallbackId = requestIdleCallback(loadWidget, { timeout: 3000 });
} else {
// 降级:使用 setTimeout
idleCallbackId = setTimeout(loadWidget, 100);
}
// 添加脚本到页面
document.body.appendChild(script);
scriptRef.current = script;
// 清理函数 - 增强错误处理,防止 React 18 StrictMode 双重清理报错
// 清理函数
return () => {
console.log('[Bytedesk] 清理Widget');
// 移除脚本
try {
if (scriptRef.current && scriptRef.current.parentNode) {
scriptRef.current.parentNode.removeChild(scriptRef.current);
// 取消待执行的 idle callback
if (idleCallbackId) {
if ('cancelIdleCallback' in window) {
cancelIdleCallback(idleCallbackId);
} else {
clearTimeout(idleCallbackId);
}
scriptRef.current = null;
} catch (error) {
console.warn('[Bytedesk] 移除脚本失败(可能已被移除):', error.message);
idleCallbackId = null;
}
// 移除Widget DOM元素
try {
const widgetElements = document.querySelectorAll('[class*="bytedesk"], [id*="bytedesk"]');
widgetElements.forEach(el => {
try {
if (el && el.parentNode && el.parentNode.contains(el)) {
el.parentNode.removeChild(el);
}
} catch (err) {
// 忽略单个元素移除失败(可能已被移除)
}
});
} catch (error) {
console.warn('[Bytedesk] 清理Widget DOM元素失败:', error.message);
}
// 清理全局对象
try {
if (window.BytedeskWeb) {
delete window.BytedeskWeb;
}
} catch (error) {
console.warn('[Bytedesk] 清理全局对象失败:', error.message);
}
// ⚠️ 不重置 widgetInitialized保持单例
// 不清理 DOM因为客服 Widget 应该持久存在
};
}, [config, autoLoad, onLoad, onError]);

View File

@@ -216,12 +216,6 @@ export default function AuthFormContent() {
authEvents.trackVerificationCodeSent(credential, config.api.purpose);
}
// ❌ 移除成功 toast静默处理
logger.info('AuthFormContent', '验证码发送成功', {
credential: cleanedCredential.substring(0, 3) + '****' + cleanedCredential.substring(7),
dev_code: data.dev_code
});
// ✅ 开发环境下在控制台显示验证码
if (data.dev_code) {
console.log(`%c✅ [验证码] ${cleanedCredential} -> ${data.dev_code}`, 'color: #16a34a; font-weight: bold; font-size: 14px;');
@@ -328,16 +322,6 @@ export default function AuthFormContent() {
}
if (response.ok && data.success) {
// ⚡ Mock 模式:先在前端侧写入 localStorage确保时序正确
if (process.env.REACT_APP_ENABLE_MOCK === 'true' && data.user) {
setCurrentUser(data.user);
logger.debug('AuthFormContent', '前端侧设置当前用户(Mock模式)', {
userId: data.user?.id,
phone: data.user?.phone,
mockMode: true
});
}
// 更新session
await checkSession();
@@ -476,7 +460,8 @@ export default function AuthFormContent() {
return () => {
isMountedRef.current = false;
};
}, [authEvents]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // 仅在挂载时执行一次,避免 countdown 倒计时导致重复触发
return (
<>

View File

@@ -74,6 +74,7 @@ export default function WechatRegister() {
const isMountedRef = useRef(true); // 追踪组件挂载状态
const containerRef = useRef(null); // 容器DOM引用
const sessionIdRef = useRef(null); // 存储最新的 sessionId避免闭包陷阱
const wechatStatusRef = useRef(WECHAT_STATUS.NONE); // 存储最新的 wechatStatus避免闭包陷阱
const navigate = useNavigate();
const toast = useToast();
@@ -128,12 +129,8 @@ 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(
@@ -182,40 +179,28 @@ export default function WechatRegister() {
const checkWechatStatus = useCallback(async () => {
// 检查组件是否已卸载,使用 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(currentSessionId);
// 安全检查:确保 response 存在且包含 status
if (!response || typeof response.status === 'undefined') {
logger.warn('WechatRegister', '微信状态检查返回无效数据', { response });
return;
}
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);
// 追踪状态变化(使用 ref 获取最新状态,避免闭包陷阱)
const previousStatus = wechatStatusRef.current;
if (previousStatus !== status) {
authEvents.trackWechatStatusChanged(currentSessionId, previousStatus, status);
// 特别追踪扫码事件
if (status === WECHAT_STATUS.SCANNED) {
@@ -227,7 +212,6 @@ export default function WechatRegister() {
// 处理成功状态
if (status === WECHAT_STATUS.LOGIN_SUCCESS || status === WECHAT_STATUS.REGISTER_SUCCESS) {
logger.info('WechatRegister', '检测到登录成功状态,停止轮询', { status });
clearTimers(); // 停止轮询
sessionIdRef.current = null; // 清理 sessionId
@@ -277,6 +261,12 @@ export default function WechatRegister() {
});
}
}
// 处理授权成功AUTHORIZED- 用户已在微信端确认授权,调用登录 API
else if (status === WECHAT_STATUS.AUTHORIZED) {
clearTimers();
sessionIdRef.current = null; // 清理 sessionId
await handleLoginSuccess(currentSessionId, status);
}
} catch (error) {
logger.error('WechatRegister', 'checkWechatStatus', error, { sessionId: currentSessionId });
// 轮询过程中的错误不显示给用户,避免频繁提示
@@ -301,11 +291,6 @@ export default function WechatRegister() {
* 启动轮询
*/
const startPolling = useCallback(() => {
logger.debug('WechatRegister', '启动轮询', {
sessionId: sessionIdRef.current,
interval: POLL_INTERVAL
});
// 清理旧的定时器
clearTimers();
@@ -316,7 +301,6 @@ export default function WechatRegister() {
// 设置超时
timeoutRef.current = setTimeout(() => {
logger.debug('WechatRegister', '二维码超时');
clearTimers();
sessionIdRef.current = null; // 清理 sessionId
setWechatStatus(WECHAT_STATUS.EXPIRED);
@@ -368,11 +352,6 @@ export default function WechatRegister() {
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) {
@@ -404,6 +383,14 @@ export default function WechatRegister() {
}
}, [getWechatQRCode]);
/**
* 同步 wechatStatusRef 与 wechatStatus state
* 确保 checkWechatStatus 回调中能获取到最新状态
*/
useEffect(() => {
wechatStatusRef.current = wechatStatus;
}, [wechatStatus]);
/**
* 组件卸载时清理定时器和标记组件状态
*/

View File

@@ -1,40 +1,52 @@
import { Link } from "react-router-dom";
import { svgs } from "./svgs";
import React from 'react';
import { Link } from 'react-router-dom';
import { svgs } from './svgs';
const Button = ({
className,
href,
onClick,
children,
px,
white,
interface ButtonProps {
className?: string;
href?: string;
onClick?: () => void;
children?: React.ReactNode;
px?: string;
white?: boolean;
isPrimary?: boolean;
isSecondary?: boolean;
}
const Button: React.FC<ButtonProps> = ({
className,
href,
onClick,
children,
px,
white,
}) => {
const classes = `button relative inline-flex items-center justify-center h-11 ${
px || "px-7"
} ${white ? "text-n-8" : "text-n-1"} transition-colors hover:text-color-1 ${
className || ""
}`;
const classes = `button relative inline-flex items-center justify-center h-11 ${
px || 'px-7'
} ${white ? 'text-n-8' : 'text-n-1'} transition-colors hover:text-color-1 ${
className || ''
}`;
const spanClasses = `relative z-10`;
const spanClasses = `relative z-10`;
return href ? (
href.startsWith("mailto:") ? (
<a href={href} className={classes}>
<span className={spanClasses}>{children}</span>
{svgs(white)}
</a>
) : (
<Link href={href} className={classes}>
<span className={spanClasses}>{children}</span>
{svgs(white)}
</Link>
)
return href ? (
href.startsWith('mailto:') ? (
<a href={href} className={classes}>
<span className={spanClasses}>{children}</span>
{svgs(white)}
</a>
) : (
<button className={classes} onClick={onClick}>
<span className={spanClasses}>{children}</span>
{svgs(white)}
</button>
);
<Link to={href} className={classes}>
<span className={spanClasses}>{children}</span>
{svgs(white)}
</Link>
)
) : (
<button className={classes} onClick={onClick}>
<span className={spanClasses}>{children}</span>
{svgs(white)}
</button>
);
};
export default Button;

View File

@@ -1,53 +0,0 @@
import React from "react";
import Link, { LinkProps } from "next/link";
type CommonProps = {
className?: string;
children?: React.ReactNode;
isPrimary?: boolean;
isSecondary?: boolean;
};
type ButtonAsButton = {
as?: "button";
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
type ButtonAsAnchor = {
as: "a";
} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
type ButtonAsLink = {
as: "link";
} & LinkProps;
type ButtonProps = CommonProps &
(ButtonAsButton | ButtonAsAnchor | ButtonAsLink);
const Button: React.FC<ButtonProps> = ({
className,
children,
isPrimary,
isSecondary,
as = "button",
...props
}) => {
const isLink = as === "link";
const Component: React.ElementType = isLink ? Link : as;
return (
<Component
className={`relative inline-flex justify-center items-center h-10 px-3.5 rounded-lg text-title-5 cursor-pointer transition-all ${
isPrimary ? "bg-white text-black hover:bg-white/90" : ""
} ${
isSecondary
? "shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.10)_inset] text-white after:absolute after:inset-0 after:border after:border-line after:rounded-lg after:pointer-events-none after:transition-colors hover:after:border-white"
: ""
} ${className || ""}`}
{...(isLink ? (props as LinkProps) : props)}
>
{children}
</Component>
);
};
export default Button;

View File

@@ -9,55 +9,80 @@ import * as echarts from 'echarts';
* ECharts 图表渲染组件
* @param {Object} option - ECharts 配置对象
* @param {number} height - 图表高度(默认 400px
* @param {string} variant - 主题变体: 'light' | 'dark' | 'auto' (默认 auto)
*/
export const EChartsRenderer = ({ option, height = 400 }) => {
export const EChartsRenderer = ({ option, height = 400, variant = 'auto' }) => {
const chartRef = useRef(null);
const chartInstance = useRef(null);
const bgColor = useColorModeValue('white', 'gray.800');
// 系统颜色模式
const systemBgColor = useColorModeValue('white', 'transparent');
const systemIsDark = useColorModeValue(false, true);
// 根据 variant 决定实际使用的模式
const isDarkMode = variant === 'dark' ? true : variant === 'light' ? false : systemIsDark;
const bgColor = variant === 'dark' ? 'transparent' : variant === 'light' ? 'white' : systemBgColor;
useEffect(() => {
if (!chartRef.current || !option) return;
// 初始化图表
if (!chartInstance.current) {
chartInstance.current = echarts.init(chartRef.current);
if (!chartRef.current || !option) {
console.warn('[EChartsRenderer] Missing chartRef or option');
return;
}
// 设置默认主题配置
const defaultOption = {
backgroundColor: 'transparent',
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
...option,
};
// 延迟初始化,确保 DOM 已渲染
const timer = setTimeout(() => {
try {
// 如果已有实例,先销毁
if (chartInstance.current) {
chartInstance.current.dispose();
}
// 设置图表配置
chartInstance.current.setOption(defaultOption, true);
// 初始化图表
chartInstance.current = echarts.init(chartRef.current, isDarkMode ? 'dark' : null);
// 响应式调整大小
// 深色模式下的样式调整
const darkModeStyle = isDarkMode ? {
backgroundColor: 'transparent',
textStyle: { color: '#e5e7eb' },
} : {};
// 合并配置
const finalOption = {
backgroundColor: 'transparent',
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
...darkModeStyle,
...option,
};
// 设置配置
chartInstance.current.setOption(finalOption);
console.log('[EChartsRenderer] Chart rendered successfully');
} catch (error) {
console.error('[EChartsRenderer] Failed to render chart:', error);
}
}, 100);
// 窗口 resize 处理
const handleResize = () => {
chartInstance.current?.resize();
};
window.addEventListener('resize', handleResize);
return () => {
clearTimeout(timer);
window.removeEventListener('resize', handleResize);
// chartInstance.current?.dispose(); // 不要销毁,避免重新渲染时闪烁
if (chartInstance.current) {
chartInstance.current.dispose();
chartInstance.current = null;
}
};
}, [option]);
// 组件卸载时销毁图表
useEffect(() => {
return () => {
chartInstance.current?.dispose();
chartInstance.current = null;
};
}, []);
}, [option, isDarkMode]);
return (
<Box
@@ -66,7 +91,6 @@ export const EChartsRenderer = ({ option, height = 400 }) => {
height={`${height}px`}
bg={bgColor}
borderRadius="md"
boxShadow="sm"
/>
);
};

View File

@@ -1,52 +1,161 @@
// src/components/ChatBot/MarkdownWithCharts.js
// 支持 ECharts 图表的 Markdown 渲染组件
import React from 'react';
import { Box, Alert, AlertIcon, Text, VStack, Code } from '@chakra-ui/react';
import React, { useMemo } from 'react';
import { Box, Alert, AlertIcon, Text, VStack, Code, useColorModeValue, Table, Thead, Tbody, Tr, Th, Td, TableContainer } from '@chakra-ui/react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { EChartsRenderer } from './EChartsRenderer';
import { logger } from '@utils/logger';
/**
* 稳定的图表组件包装器
* 使用 useMemo 避免 option 对象引用变化导致的重复渲染
*/
const StableChart = React.memo(({ jsonString, height, variant }) => {
const chartOption = useMemo(() => {
try {
return JSON.parse(jsonString);
} catch (e) {
console.error('[StableChart] JSON parse error:', e);
return null;
}
}, [jsonString]);
if (!chartOption) {
return (
<Alert status="warning" borderRadius="md">
<AlertIcon />
<Text fontSize="sm">图表配置解析失败</Text>
</Alert>
);
}
return <EChartsRenderer option={chartOption} height={height} variant={variant} />;
});
/**
* 解析 Markdown 内容,提取 ECharts 代码块
* 支持处理:
* 1. 正常的换行符 \n
* 2. 转义的换行符 \\n后端 JSON 序列化产生)
* 3. 不完整的代码块LLM 输出被截断)
*
* @param {string} markdown - Markdown 文本
* @returns {Array} - 包含文本和图表的数组
*/
const parseMarkdownWithCharts = (markdown) => {
if (!markdown) return [];
let content = markdown;
// 处理转义的换行符(后端返回的 JSON 字符串可能包含 \\n
// 只处理代码块标记周围的换行符,不破坏 JSON 内部结构
// 将 ```echarts\\n 转换为 ```echarts\n
content = content.replace(/```echarts\\n/g, '```echarts\n');
// 将 \\n``` 转换为 \n```
content = content.replace(/\\n```/g, '\n```');
// 如果整个内容都是转义的换行符格式,进行全局替换
// 检测:如果内容中没有真正的换行符但有 \\n则进行全局替换
if (!content.includes('\n') && content.includes('\\n')) {
content = content.replace(/\\n/g, '\n');
}
const parts = [];
const echartsRegex = /```echarts\s*\n([\s\S]*?)```/g;
// 匹配 echarts 代码块的正则表达式
// 支持多种格式:
// 1. ```echarts\n{...}\n```
// 2. ```echarts\n{...}```(末尾无换行)
// 3. ```echarts {...}```(同一行开始,虽不推荐但兼容)
const echartsBlockRegex = /```echarts\s*\n?([\s\S]*?)```/g;
let lastIndex = 0;
let match;
while ((match = echartsRegex.exec(markdown)) !== null) {
// 匹配所有 echarts 代码块
while ((match = echartsBlockRegex.exec(content)) !== null) {
// 添加代码块前的文本
if (match.index > lastIndex) {
const textBefore = markdown.substring(lastIndex, match.index).trim();
const textBefore = content.substring(lastIndex, match.index).trim();
if (textBefore) {
parts.push({ type: 'text', content: textBefore });
}
}
// 添加 ECharts 配置
const chartConfig = match[1].trim();
parts.push({ type: 'chart', content: chartConfig });
// 提取 ECharts 配置内容
let chartConfig = match[1].trim();
// 处理 JSON 内部的转义换行符(恢复为真正的换行,便于后续解析)
// 注意:这里的 \\n 在 JSON 内部应该保持为 \n换行符不是字面量
if (chartConfig.includes('\\n')) {
chartConfig = chartConfig.replace(/\\n/g, '\n');
}
if (chartConfig.includes('\\t')) {
chartConfig = chartConfig.replace(/\\t/g, '\t');
}
if (chartConfig) {
parts.push({ type: 'chart', content: chartConfig });
}
lastIndex = match.index + match[0].length;
}
// 添加剩余文本
if (lastIndex < markdown.length) {
const textAfter = markdown.substring(lastIndex).trim();
if (textAfter) {
parts.push({ type: 'text', content: textAfter });
// 检查剩余内容
if (lastIndex < content.length) {
const remainingText = content.substring(lastIndex);
// 检查是否有不完整的 echarts 代码块(没有结束的 ```
const incompleteMatch = remainingText.match(/```echarts\s*\n?([\s\S]*?)$/);
if (incompleteMatch) {
// 提取不完整代码块之前的文本
const textBeforeIncomplete = remainingText.substring(0, incompleteMatch.index).trim();
if (textBeforeIncomplete) {
parts.push({ type: 'text', content: textBeforeIncomplete });
}
// 提取不完整的 echarts 内容
let incompleteChartConfig = incompleteMatch[1].trim();
// 同样处理转义换行符
if (incompleteChartConfig.includes('\\n')) {
incompleteChartConfig = incompleteChartConfig.replace(/\\n/g, '\n');
}
if (incompleteChartConfig) {
logger.warn('[MarkdownWithCharts] 检测到不完整的 echarts 代码块', {
contentPreview: incompleteChartConfig.substring(0, 100),
});
parts.push({ type: 'chart', content: incompleteChartConfig });
}
} else {
// 普通剩余文本
const textAfter = remainingText.trim();
if (textAfter) {
parts.push({ type: 'text', content: textAfter });
}
}
}
// 如果没有找到图表,返回整个 markdown 作为文本
// 如果没有找到任何部分,返回整个 markdown 作为文本
if (parts.length === 0) {
parts.push({ type: 'text', content: markdown });
parts.push({ type: 'text', content: content });
}
// 开发环境调试
if (process.env.NODE_ENV === 'development') {
const chartParts = parts.filter(p => p.type === 'chart');
if (chartParts.length > 0 || content.includes('echarts')) {
logger.info('[MarkdownWithCharts] 解析结果', {
inputLength: markdown?.length,
hasEchartsKeyword: content.includes('echarts'),
hasCodeBlock: content.includes('```'),
partsCount: parts.length,
partTypes: parts.map(p => p.type),
});
}
}
return parts;
@@ -55,10 +164,26 @@ const parseMarkdownWithCharts = (markdown) => {
/**
* 支持 ECharts 图表的 Markdown 渲染组件
* @param {string} content - Markdown 文本
* @param {string} variant - 主题变体: 'light' | 'dark' | 'auto' (默认 auto跟随系统)
*/
export const MarkdownWithCharts = ({ content }) => {
export const MarkdownWithCharts = ({ content, variant = 'auto' }) => {
const parts = parseMarkdownWithCharts(content);
// 系统颜色模式
const systemTextColor = useColorModeValue('gray.700', 'gray.100');
const systemHeadingColor = useColorModeValue('gray.800', 'gray.50');
const systemBlockquoteColor = useColorModeValue('gray.600', 'gray.300');
const systemCodeBg = useColorModeValue('gray.100', 'rgba(255, 255, 255, 0.1)');
// 根据 variant 选择颜色
const isDark = variant === 'dark';
const isLight = variant === 'light';
const textColor = isDark ? 'gray.100' : isLight ? 'gray.700' : systemTextColor;
const headingColor = isDark ? 'gray.50' : isLight ? 'gray.800' : systemHeadingColor;
const blockquoteColor = isDark ? 'gray.300' : isLight ? 'gray.600' : systemBlockquoteColor;
const codeBg = isDark ? 'rgba(255, 255, 255, 0.1)' : isLight ? 'gray.100' : systemCodeBg;
return (
<VStack align="stretch" spacing={4}>
{parts.map((part, index) => {
@@ -67,25 +192,26 @@ export const MarkdownWithCharts = ({ content }) => {
return (
<Box key={index}>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{
// 自定义渲染样式
p: ({ children }) => (
<Text mb={2} fontSize="sm">
<Text mb={2} fontSize="sm" color={textColor}>
{children}
</Text>
),
h1: ({ children }) => (
<Text fontSize="xl" fontWeight="bold" mb={3}>
<Text fontSize="xl" fontWeight="bold" mb={3} color={headingColor}>
{children}
</Text>
),
h2: ({ children }) => (
<Text fontSize="lg" fontWeight="bold" mb={2}>
<Text fontSize="lg" fontWeight="bold" mb={2} color={headingColor}>
{children}
</Text>
),
h3: ({ children }) => (
<Text fontSize="md" fontWeight="bold" mb={2}>
<Text fontSize="md" fontWeight="bold" mb={2} color={headingColor}>
{children}
</Text>
),
@@ -100,20 +226,46 @@ export const MarkdownWithCharts = ({ content }) => {
</Box>
),
li: ({ children }) => (
<Box as="li" fontSize="sm" mb={1}>
<Box as="li" fontSize="sm" mb={1} color={textColor}>
{children}
</Box>
),
code: ({ inline, children }) =>
inline ? (
<Code fontSize="sm" px={1}>
// 处理代码块和行内代码
code: ({ node, inline, className, children, ...props }) => {
// 检查是否是代码块(通过父元素是否为 pre 或通过 className 判断)
const isCodeBlock = !inline && (className || (node?.position?.start?.line !== node?.position?.end?.line));
if (isCodeBlock) {
// 代码块样式
return (
<Code
display="block"
p={3}
borderRadius="md"
fontSize="sm"
whiteSpace="pre-wrap"
bg={codeBg}
overflowX="auto"
maxW="100%"
{...props}
>
{children}
</Code>
);
}
// 行内代码样式
return (
<Code fontSize="sm" px={1} bg={codeBg} {...props}>
{children}
</Code>
) : (
<Code display="block" p={3} borderRadius="md" fontSize="sm" whiteSpace="pre-wrap">
{children}
</Code>
),
);
},
// 处理 pre 元素,防止嵌套问题
pre: ({ children }) => (
<Box as="pre" my={2} overflow="hidden" borderRadius="md">
{children}
</Box>
),
blockquote: ({ children }) => (
<Box
borderLeftWidth="4px"
@@ -121,11 +273,60 @@ export const MarkdownWithCharts = ({ content }) => {
pl={4}
py={2}
fontStyle="italic"
color="gray.600"
color={blockquoteColor}
>
{children}
</Box>
),
// 表格渲染
table: ({ children }) => (
<TableContainer
mb={4}
borderRadius="md"
border="1px solid"
borderColor={isDark ? 'rgba(255, 255, 255, 0.1)' : 'gray.200'}
overflowX="auto"
>
<Table size="sm" variant="simple">
{children}
</Table>
</TableContainer>
),
thead: ({ children }) => (
<Thead bg={isDark ? 'rgba(255, 255, 255, 0.05)' : 'gray.50'}>
{children}
</Thead>
),
tbody: ({ children }) => <Tbody>{children}</Tbody>,
tr: ({ children }) => (
<Tr
_hover={{
bg: isDark ? 'rgba(255, 255, 255, 0.03)' : 'gray.50'
}}
>
{children}
</Tr>
),
th: ({ children }) => (
<Th
fontSize="xs"
color={headingColor}
borderColor={isDark ? 'rgba(255, 255, 255, 0.1)' : 'gray.200'}
py={2}
>
{children}
</Th>
),
td: ({ children }) => (
<Td
fontSize="sm"
color={textColor}
borderColor={isDark ? 'rgba(255, 255, 255, 0.1)' : 'gray.200'}
py={2}
>
{children}
</Td>
),
}}
>
{part.content}
@@ -134,34 +335,21 @@ export const MarkdownWithCharts = ({ content }) => {
);
} else if (part.type === 'chart') {
// 渲染 ECharts 图表
// 清理可能的残留字符
let cleanContent = part.content.trim();
cleanContent = cleanContent.replace(/```\s*$/g, '').trim();
// 调试日志
console.log('[MarkdownWithCharts] Rendering chart, content length:', cleanContent.length);
console.log('[MarkdownWithCharts] Content preview:', cleanContent.substring(0, 100));
// 验证 JSON 是否可以解析
try {
// 清理可能的 Markdown 残留符号
let cleanContent = part.content.trim();
// 移除可能的前后空白和不可见字符
cleanContent = cleanContent.replace(/^\s+|\s+$/g, '');
// 尝试解析 JSON
const chartOption = JSON.parse(cleanContent);
// 验证是否是有效的 ECharts 配置
if (!chartOption || typeof chartOption !== 'object') {
throw new Error('Invalid chart configuration: not an object');
}
return (
<Box key={index}>
<EChartsRenderer option={chartOption} height={350} />
</Box>
);
} catch (error) {
// 记录详细的错误信息
logger.error('解析 ECharts 配置失败', {
error: error.message,
contentLength: part.content.length,
contentPreview: part.content.substring(0, 200),
errorStack: error.stack
});
const testParse = JSON.parse(cleanContent);
console.log('[MarkdownWithCharts] JSON valid, has series:', !!testParse.series);
} catch (e) {
console.error('[MarkdownWithCharts] JSON parse error:', e.message);
console.log('[MarkdownWithCharts] Problematic content:', cleanContent.substring(0, 300));
return (
<Alert status="warning" key={index} borderRadius="md">
@@ -171,16 +359,29 @@ export const MarkdownWithCharts = ({ content }) => {
图表配置解析失败
</Text>
<Text fontSize="xs" color="gray.600">
错误: {error.message}
错误: {e.message}
</Text>
<Code fontSize="xs" maxW="100%" overflow="auto" whiteSpace="pre-wrap">
{part.content.substring(0, 300)}
{part.content.length > 300 ? '...' : ''}
{cleanContent.substring(0, 300)}
{cleanContent.length > 300 ? '...' : ''}
</Code>
</VStack>
</Alert>
);
}
return (
<Box
key={index}
w="100%"
minW="300px"
my={3}
borderRadius="md"
overflow="hidden"
>
<StableChart jsonString={cleanContent} height={350} variant={variant} />
</Box>
);
}
return null;
})}

View File

@@ -82,29 +82,9 @@ const CitedContent = ({
...containerStyle
}}
>
{/* AI 标识 - 固定在右上角 */}
{showAIBadge && (
<Tag
icon={<RobotOutlined />}
color="purple"
style={{
position: 'absolute',
top: 12,
right: 12,
margin: 0,
zIndex: 10,
fontSize: 12,
padding: '2px 8px'
}}
className="ai-badge-responsive"
>
AI合成
</Tag>
)}
{/* 标题栏 */}
{title && (
<div style={{ marginBottom: 12, paddingRight: 80 }}>
<div style={{ marginBottom: 12 }}>
<Text strong style={{ fontSize: 14, color: finalTitleColor }}>
{title}
</Text>
@@ -112,10 +92,24 @@ const CitedContent = ({
)}
{/* 带引用的文本内容 */}
<div style={{
lineHeight: 1.8,
paddingRight: title ? 0 : (showAIBadge ? 80 : 0)
}}>
<div style={{ lineHeight: 1.8 }}>
{/* AI 标识 - 行内显示在文字前面 */}
{showAIBadge && (
<Tag
icon={<RobotOutlined />}
color="purple"
style={{
fontSize: 12,
padding: '2px 8px',
marginRight: 8,
verticalAlign: 'middle',
display: 'inline-flex',
}}
className="ai-badge-responsive"
>
AI合成
</Tag>
)}
{/* 前缀标签(如果有) */}
{prefix && (
<Text style={{

View File

@@ -1,20 +1,25 @@
import Image from "../Image";
import React from 'react';
import Image from '../Image';
const Generating = ({ className }) => (
<div
className={`flex items-center h-[3.375rem] px-6 bg-n-8/80 rounded-[1.6875rem] ${
className || ""
} text-base`}
>
<Image
className="w-5 h-5 mr-4"
src="/images/loading.png"
width={20}
height={20}
alt="Loading"
/>
AI is generating|
</div>
interface GeneratingProps {
className?: string;
}
const Generating: React.FC<GeneratingProps> = ({ className }) => (
<div
className={`flex items-center h-[3.375rem] px-6 bg-n-8/80 rounded-[1.6875rem] ${
className || ''
} text-base`}
>
<Image
className="w-5 h-5 mr-4"
src="/images/loading.png"
width={20}
height={20}
alt="Loading"
/>
AI is generating|
</div>
);
export default Generating;

View File

@@ -2,95 +2,48 @@
// 集中管理应用的全局组件
import React, { useMemo } from 'react';
import { useLocation } from 'react-router-dom';
import { useNotification } from '../contexts/NotificationContext';
import { logger } from '../utils/logger';
import { useSelector } from 'react-redux';
import { selectIsMobile } from '@/store/slices/deviceSlice';
// Global Components
import AuthModalManager from './Auth/AuthModalManager';
import NotificationContainer from './NotificationContainer';
import ConnectionStatusBar from './ConnectionStatusBar';
import ScrollToTop from './ScrollToTop';
// Bytedesk客服组件
import BytedeskWidget from '../bytedesk-integration/components/BytedeskWidget';
import { getBytedeskConfig } from '../bytedesk-integration/config/bytedesk.config';
/**
* ConnectionStatusBar 包装组件
* 需要在 NotificationProvider 内部使用,所以在这里包装
*/
function ConnectionStatusBarWrapper() {
const { connectionStatus, reconnectAttempt, maxReconnectAttempts, retryConnection } = useNotification();
const [isDismissed, setIsDismissed] = React.useState(false);
// 监听连接状态变化
React.useEffect(() => {
// 重连成功后,清除 dismissed 状态
if (connectionStatus === 'connected' && isDismissed) {
setIsDismissed(false);
// 从 localStorage 清除 dismissed 标记
localStorage.removeItem('connection_status_dismissed');
}
// 从 localStorage 恢复 dismissed 状态
if (connectionStatus !== 'connected' && !isDismissed) {
const dismissed = localStorage.getItem('connection_status_dismissed');
if (dismissed === 'true') {
setIsDismissed(true);
}
}
}, [connectionStatus, isDismissed]);
const handleClose = () => {
// 用户手动关闭,保存到 localStorage
setIsDismissed(true);
localStorage.setItem('connection_status_dismissed', 'true');
logger.info('App', 'Connection status bar dismissed by user');
};
return (
<ConnectionStatusBar
status={connectionStatus}
reconnectAttempt={reconnectAttempt}
maxReconnectAttempts={maxReconnectAttempts}
onRetry={retryConnection}
onClose={handleClose}
isDismissed={isDismissed}
/>
);
}
/**
* GlobalComponents - 全局组件容器
* 集中管理所有全局级别的组件,如弹窗、通知、状态栏等
*
* 包含的组件:
* - ConnectionStatusBarWrapper: Socket 连接状态条
* - ScrollToTop: 路由切换时自动滚动到顶部
* - AuthModalManager: 认证弹窗管理器
* - NotificationContainer: 通知容器
* - BytedeskWidget: Bytedesk在线客服 (条件性显示,在/和/home页隐藏)
* - NotificationContainer: 通知容器(仅桌面端渲染)
* - BytedeskWidget: Bytedesk在线客服
*
* 注意:
* - ConnectionStatusBar 已移除(所有端)
* - NotificationContainer 在移动端不渲染(通知功能已在 NotificationContext 层禁用)
*/
export function GlobalComponents() {
const location = useLocation();
const isMobile = useSelector(selectIsMobile);
// ✅ 缓存 Bytedesk 配置对象,避免每次渲染都创建新引用导致重新加载
const bytedeskConfigMemo = useMemo(() => getBytedeskConfig(), []);
return (
<>
{/* Socket 连接状态条 */}
<ConnectionStatusBarWrapper />
{/* 路由切换时自动滚动到顶部 */}
<ScrollToTop />
{/* 认证弹窗管理器 */}
<AuthModalManager />
{/* 通知容器 */}
<NotificationContainer />
{/* 通知容器(仅桌面端渲染) */}
{!isMobile && <NotificationContainer />}
{/* Bytedesk在线客服 - 使用缓存的配置对象 */}
<BytedeskWidget

View File

@@ -1,17 +1,21 @@
import { useState } from "react";
import React, { useState } from 'react';
const Image = ({ className, ...props }) => {
const [loaded, setLoaded] = useState(false);
interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
className?: string;
}
return (
<img
className={`inline-block align-top opacity-0 transition-opacity ${
loaded && "opacity-100"
} ${className}`}
onLoad={() => setLoaded(true)}
{...props}
/>
);
const Image: React.FC<ImageProps> = ({ className, ...props }) => {
const [loaded, setLoaded] = useState(false);
return (
<img
className={`inline-block align-top opacity-0 transition-opacity ${
loaded && 'opacity-100'
} ${className || ''}`}
onLoad={() => setLoaded(true)}
{...props}
/>
);
};
export default Image;

View File

@@ -1,73 +0,0 @@
import Section from "@/components/Section";
import Image from "@/components/Image";
import Button from "@/components/Button";
type JoinProps = {};
const Join = ({}: JoinProps) => (
<Section crosses>
<div className="container">
<div className="relative max-w-[43.125rem] mx-auto py-8 md:py-14 xl:py-0">
<div className="relative z-1 text-center">
<h1 className="h1 mb-6">
Be part of the future of{" "}
<span className="inline-block relative">
Brainwave
<Image
className="absolute top-full left-0 w-full"
src="/images/curve.png"
width={624}
height={28}
alt="Curve"
/>
</span>
</h1>
<p className="body-1 mb-8 text-n-4">
Unleash the power of AI within Brainwave. Upgrade your
productivity with Brainwave, the open AI chat app.
</p>
<Button href="/pricing" white>
Get started
</Button>
</div>
<div className="absolute top-1/2 left-1/2 w-[46.5rem] h-[46.5rem] border border-n-2/5 rounded-full -translate-x-1/2 -translate-y-1/2 pointer-events-none">
<div className="absolute top-1/2 left-1/2 w-[39.25rem] h-[39.25rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
<div className="absolute top-1/2 left-1/2 w-[30.625rem] h-[30.625rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
<div className="absolute top-1/2 left-1/2 w-[21.5rem] h-[21.5rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
<div className="absolute top-1/2 left-1/2 w-[13.75rem] h-[13.75rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
</div>
<div className="absolute top-1/2 left-1/2 w-[46.5rem] h-[46.5rem] border border-n-2/5 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-60 mix-blend-color-dodge pointer-events-none">
<div className="absolute top-1/2 left-1/2 w-[58.85rem] h-[58.85rem] -translate-x-3/4 -translate-y-1/2">
<Image
className="w-full"
src="/images/gradient.png"
width={942}
height={942}
alt="Gradient"
/>
</div>
</div>
</div>
</div>
<div className="absolute -top-[5.75rem] left-[18.5rem] -z-1 w-[19.8125rem] pointer-events-none lg:-top-15 lg:left-[5.5rem]">
<Image
className="w-full"
src="/images/join/shapes-1.svg"
width={317}
height={293}
alt="Shapes 1"
/>
</div>
<div className="absolute right-[15rem] -bottom-[7rem] -z-1 w-[28.1875rem] pointer-events-none lg:right-7 lg:-bottom-[5rem]">
<Image
className="w-full"
src="/images/join/shapes-2.svg"
width={451}
height={266}
alt="Shapes 2"
/>
</div>
</Section>
);
export default Join;

View File

@@ -1,73 +0,0 @@
import Section from "@/components/Section";
import Image from "@/components/Image";
import Button from "@/components/Button";
type JoinProps = {};
const Join = ({}: JoinProps) => (
<Section crosses>
<div className="container">
<div className="relative max-w-[43.125rem] mx-auto py-8 md:py-14 xl:py-0">
<div className="relative z-1 text-center">
<h1 className="h1 mb-6">
Be part of the future of{" "}
<span className="inline-block relative">
Brainwave
<Image
className="absolute top-full left-0 w-full"
src="/images/curve.png"
width={624}
height={28}
alt="Curve"
/>
</span>
</h1>
<p className="body-1 mb-8 text-n-4">
Unleash the power of AI within Brainwave. Upgrade your
productivity with Brainwave, the open AI chat app.
</p>
<Button href="/pricing" white>
Get started
</Button>
</div>
<div className="absolute top-1/2 left-1/2 w-[46.5rem] h-[46.5rem] border border-n-2/5 rounded-full -translate-x-1/2 -translate-y-1/2 pointer-events-none">
<div className="absolute top-1/2 left-1/2 w-[39.25rem] h-[39.25rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
<div className="absolute top-1/2 left-1/2 w-[30.625rem] h-[30.625rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
<div className="absolute top-1/2 left-1/2 w-[21.5rem] h-[21.5rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
<div className="absolute top-1/2 left-1/2 w-[13.75rem] h-[13.75rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
</div>
<div className="absolute top-1/2 left-1/2 w-[46.5rem] h-[46.5rem] border border-n-2/5 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-60 mix-blend-color-dodge pointer-events-none">
<div className="absolute top-1/2 left-1/2 w-[58.85rem] h-[58.85rem] -translate-x-3/4 -translate-y-1/2">
<Image
className="w-full"
src="/images/gradient.png"
width={942}
height={942}
alt="Gradient"
/>
</div>
</div>
</div>
</div>
<div className="absolute -top-[5.75rem] left-[18.5rem] -z-1 w-[19.8125rem] pointer-events-none lg:-top-15 lg:left-[5.5rem]">
<Image
className="w-full"
src="/images/join/shapes-1.svg"
width={317}
height={293}
alt="Shapes 1"
/>
</div>
<div className="absolute right-[15rem] -bottom-[7rem] -z-1 w-[28.1875rem] pointer-events-none lg:right-7 lg:-bottom-[5rem]">
<Image
className="w-full"
src="/images/join/shapes-2.svg"
width={451}
height={266}
alt="Shapes 2"
/>
</div>
</Section>
);
export default Join;

View File

@@ -1,53 +0,0 @@
import Image from "../Image";
const Logos = ({ className }) => (
<div className={className}>
<h5 className="tagline mb-6 text-center text-n-1/50">
Helping people create beautiful content at
</h5>
<ul className="flex">
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
<Image
src="/images/yourlogo.svg"
width={134}
height={28}
alt="Logo 3"
/>
</li>
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
<Image
src="/images/yourlogo.svg"
width={134}
height={28}
alt="Logo 3"
/>
</li>
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
<Image
src="/images/yourlogo.svg"
width={134}
height={28}
alt="Logo 3"
/>
</li>
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
<Image
src="/images/yourlogo.svg"
width={134}
height={28}
alt="Logo 3"
/>
</li>
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
<Image
src="/images/yourlogo.svg"
width={134}
height={28}
alt="Logo 3"
/>
</li>
</ul>
</div>
);
export default Logos;

View File

@@ -1,53 +0,0 @@
import Image from "../Image";
const Logos = ({ className }) => (
<div className={className}>
<h5 className="tagline mb-6 text-center text-n-1/50">
Helping people create beautiful content at
</h5>
<ul className="flex">
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
<Image
src="/images/yourlogo.svg"
width={134}
height={28}
alt="Logo 3"
/>
</li>
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
<Image
src="/images/yourlogo.svg"
width={134}
height={28}
alt="Logo 3"
/>
</li>
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
<Image
src="/images/yourlogo.svg"
width={134}
height={28}
alt="Logo 3"
/>
</li>
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
<Image
src="/images/yourlogo.svg"
width={134}
height={28}
alt="Logo 3"
/>
</li>
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
<Image
src="/images/yourlogo.svg"
width={134}
height={28}
alt="Logo 3"
/>
</li>
</ul>
</div>
);
export default Logos;

View File

@@ -18,10 +18,8 @@ import {
Link,
Divider,
Avatar,
useColorMode,
useColorModeValue
} from '@chakra-ui/react';
import { SunIcon, MoonIcon } from '@chakra-ui/icons';
import { useNavigate, useLocation } from 'react-router-dom';
/**
@@ -46,7 +44,6 @@ const MobileDrawer = memo(({
}) => {
const navigate = useNavigate();
const location = useLocation();
const { colorMode, toggleColorMode } = useColorMode();
const userBgColor = useColorModeValue('gray.50', 'whiteAlpha.100');
const contactTextColor = useColorModeValue('gray.500', 'gray.300');
const emailTextColor = useColorModeValue('gray.500', 'gray.300');
@@ -82,17 +79,6 @@ const MobileDrawer = memo(({
</DrawerHeader>
<DrawerBody>
<VStack spacing={4} align="stretch">
{/* 移动端:日夜模式切换 */}
<Button
leftIcon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
variant="ghost"
justifyContent="flex-start"
onClick={toggleColorMode}
size="sm"
>
切换到{colorMode === 'light' ? '深色' : '浅色'}模式
</Button>
{/* 移动端用户信息 */}
{isAuthenticated && user && (
<>

View File

@@ -2,7 +2,7 @@
// Navbar 右侧功能区组件
import React, { memo } from 'react';
import { HStack, Spinner, IconButton, Box } from '@chakra-ui/react';
import { HStack, IconButton, Box } from '@chakra-ui/react';
import { HamburgerIcon } from '@chakra-ui/icons';
// import ThemeToggleButton from '../ThemeToggleButton'; // ❌ 已删除 - 不再支持深色模式切换
import LoginButton from '../LoginButton';
@@ -41,9 +41,15 @@ const NavbarActions = memo(({
}) => {
return (
<HStack spacing={{ base: 2, md: 4 }}>
{/* 显示加载状态 */}
{/* 权限校验中 - 显示占位骨架,不显示登录按钮或用户菜单 */}
{isLoading ? (
<Spinner size="sm" color="blue.500" />
<Box
w={{ base: '80px', md: '120px' }}
h="36px"
borderRadius="md"
bg="whiteAlpha.100"
opacity={0.6}
/>
) : isAuthenticated && user ? (
// 已登录状态 - 用户菜单 + 功能菜单排列
<HStack spacing={{ base: 2, md: 3 }}>

View File

@@ -57,13 +57,14 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
<MenuButton
as={Button}
variant="ghost"
rightIcon={<ChevronDownIcon />}
bg={isActive(['/community', '/concepts']) ? 'blue.50' : 'transparent'}
color={isActive(['/community', '/concepts']) ? 'blue.600' : 'inherit'}
rightIcon={<ChevronDownIcon color={isActive(['/community', '/concepts']) ? 'white' : 'inherit'} />}
bg={isActive(['/community', '/concepts']) ? 'blue.600' : 'transparent'}
color={isActive(['/community', '/concepts']) ? 'white' : 'inherit'}
fontWeight={isActive(['/community', '/concepts']) ? 'bold' : 'normal'}
borderBottom={isActive(['/community', '/concepts']) ? '2px solid' : 'none'}
borderColor="blue.600"
_hover={{ bg: isActive(['/community', '/concepts']) ? 'blue.100' : 'gray.50' }}
borderLeft={isActive(['/community', '/concepts']) ? '3px solid' : 'none'}
borderColor="white"
borderRadius="md"
_hover={{ bg: isActive(['/community', '/concepts']) ? 'blue.700' : 'gray.50' }}
onMouseEnter={highFreqMenu.handleMouseEnter}
onMouseLeave={highFreqMenu.handleMouseLeave}
onClick={highFreqMenu.handleClick}
@@ -123,13 +124,14 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
<MenuButton
as={Button}
variant="ghost"
rightIcon={<ChevronDownIcon />}
bg={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.50' : 'transparent'}
color={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.600' : 'inherit'}
rightIcon={<ChevronDownIcon color={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'white' : 'inherit'} />}
bg={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.600' : 'transparent'}
color={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'white' : 'inherit'}
fontWeight={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'bold' : 'normal'}
borderBottom={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? '2px solid' : 'none'}
borderColor="blue.600"
_hover={{ bg: isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.100' : 'gray.50' }}
borderLeft={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? '3px solid' : 'none'}
borderColor="white"
borderRadius="md"
_hover={{ bg: isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.700' : 'gray.50' }}
onMouseEnter={marketReviewMenu.handleMouseEnter}
onMouseLeave={marketReviewMenu.handleMouseLeave}
onClick={marketReviewMenu.handleClick}
@@ -198,13 +200,14 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
<MenuButton
as={Button}
variant="ghost"
rightIcon={<ChevronDownIcon />}
bg={isActive(['/agent-chat']) ? 'blue.50' : 'transparent'}
color={isActive(['/agent-chat']) ? 'blue.600' : 'inherit'}
fontWeight={isActive(['/agent-chat']) ? 'bold' : 'normal'}
borderBottom={isActive(['/agent-chat']) ? '2px solid' : 'none'}
borderColor="blue.600"
_hover={{ bg: isActive(['/agent-chat']) ? 'blue.100' : 'gray.50' }}
rightIcon={<ChevronDownIcon color={isActive(['/agent-chat', '/value-forum']) ? 'white' : 'inherit'} />}
bg={isActive(['/agent-chat', '/value-forum']) ? 'blue.600' : 'transparent'}
color={isActive(['/agent-chat', '/value-forum']) ? 'white' : 'inherit'}
fontWeight={isActive(['/agent-chat', '/value-forum']) ? 'bold' : 'normal'}
borderLeft={isActive(['/agent-chat', '/value-forum']) ? '3px solid' : 'none'}
borderColor="white"
borderRadius="md"
_hover={{ bg: isActive(['/agent-chat', '/value-forum']) ? 'blue.700' : 'gray.50' }}
onMouseEnter={agentCommunityMenu.handleMouseEnter}
onMouseLeave={agentCommunityMenu.handleMouseLeave}
onClick={agentCommunityMenu.handleClick}

View File

@@ -18,7 +18,6 @@ import { FiStar, FiCalendar, FiUser, FiSettings, FiHome, FiLogOut } from 'react-
import { FaCrown } from 'react-icons/fa';
import { useNavigate } from 'react-router-dom';
import UserAvatar from './UserAvatar';
import SubscriptionModal from '../../../Subscription/SubscriptionModal';
import { useSubscription } from '../../../../hooks/useSubscription';
/**
@@ -38,12 +37,7 @@ const TabletUserMenu = memo(({
followingEvents
}) => {
const navigate = useNavigate();
const {
subscriptionInfo,
isSubscriptionModalOpen,
openSubscriptionModal,
closeSubscriptionModal
} = useSubscription();
const { subscriptionInfo } = useSubscription();
const borderColor = useColorModeValue('gray.200', 'gray.600');
@@ -90,8 +84,8 @@ const TabletUserMenu = memo(({
)}
</Box>
{/* 订阅管理 */}
<MenuItem icon={<FaCrown />} onClick={openSubscriptionModal}>
{/* 订阅管理 - 移动端导航到订阅页面 */}
<MenuItem icon={<FaCrown />} onClick={() => navigate('/home/pages/account/subscription')}>
<Flex justify="space-between" align="center" w="100%">
<Text>订阅管理</Text>
<Badge colorScheme={getSubscriptionBadgeColor()}>
@@ -149,14 +143,6 @@ const TabletUserMenu = memo(({
</MenuList>
</Menu>
{/* 订阅弹窗 */}
{isSubscriptionModalOpen && (
<SubscriptionModal
isOpen={isSubscriptionModalOpen}
onClose={closeSubscriptionModal}
subscriptionInfo={subscriptionInfo}
/>
)}
</>
);
});

View File

@@ -1,49 +0,0 @@
import Image from "../Image";
const Notification = ({ className, title }) => (
<div
className={`flex items-center p-4 pr-6 bg-[#474060]/40 backdrop-blur border border-n-1/10 rounded-2xl ${
className || ""
}`}
>
<div className="mr-5">
<Image
className="w-full rounded-xl"
src="/images/notification/image-1.png"
width={52}
height={52}
alt="Image"
/>
</div>
<div className="flex-1">
<h6 className="mb-1 font-semibold text-base">{title}</h6>
<div className="flex items-center justify-between">
<ul className="flex -m-0.5">
{[
"/images/notification/image-4.png",
"/images/notification/image-3.png",
"/images/notification/image-2.png",
].map((item, index) => (
<li
className={`flex w-6 h-6 border-2 border-[#2E2A41] rounded-full overflow-hidden ${
index !== 0 ? "-ml-2" : ""
}`}
key={index}
>
<Image
className="w-full"
src={item}
width={20}
height={20}
alt={item}
/>
</li>
))}
</ul>
<div className="body-2 text-[#6C7275]">1m ago</div>
</div>
</div>
</div>
);
export default Notification;

View File

@@ -1,49 +0,0 @@
import Image from "../Image";
const Notification = ({ className, title }) => (
<div
className={`flex items-center p-4 pr-6 bg-[#474060]/40 backdrop-blur border border-n-1/10 rounded-2xl ${
className || ""
}`}
>
<div className="mr-5">
<Image
className="w-full rounded-xl"
src="/images/notification/image-1.png"
width={52}
height={52}
alt="Image"
/>
</div>
<div className="flex-1">
<h6 className="mb-1 font-semibold text-base">{title}</h6>
<div className="flex items-center justify-between">
<ul className="flex -m-0.5">
{[
"/images/notification/image-4.png",
"/images/notification/image-3.png",
"/images/notification/image-2.png",
].map((item, index) => (
<li
className={`flex w-6 h-6 border-2 border-[#2E2A41] rounded-full overflow-hidden ${
index !== 0 ? "-ml-2" : ""
}`}
key={index}
>
<Image
className="w-full"
src={item}
width={20}
height={20}
alt={item}
/>
</li>
))}
</ul>
<div className="body-2 text-[#6C7275]">1m ago</div>
</div>
</div>
</div>
);
export default Notification;

View File

@@ -1,57 +1,67 @@
const Section = ({
className,
crosses,
crossesOffset,
customPaddings,
children,
import React from 'react';
interface SectionProps {
className?: string;
crosses?: boolean;
crossesOffset?: string;
customPaddings?: string;
children?: React.ReactNode;
}
const Section: React.FC<SectionProps> = ({
className,
crosses,
crossesOffset,
customPaddings,
children,
}) => (
<div
className={`relative ${
customPaddings ||
`py-10 lg:py-16 xl:py-20 ${crosses ? "lg:py-32 xl:py-40" : ""}`
} ${className || ""}`}
>
{children}
<div className="hidden absolute top-0 left-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:left-7.5 xl:left-10"></div>
<div className="hidden absolute top-0 right-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:right-7.5 xl:right-10"></div>
{crosses && (
<>
<div
className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-stroke-1 ${
crossesOffset && crossesOffset
} pointer-events-none lg:block xl:left-10 right-10`}
></div>
<svg
className={`hidden absolute -top-[0.3125rem] left-[1.5625rem] ${
crossesOffset && crossesOffset
} pointer-events-none lg:block xl:left-[2.1875rem]`}
xmlns="http://www.w3.org/2000/svg"
width="11"
height="11"
fill="none"
>
<path
d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z"
fill="#ada8c4"
/>
</svg>
<svg
className={`hidden absolute -top-[0.3125rem] right-[1.5625rem] ${
crossesOffset && crossesOffset
} pointer-events-none lg:block xl:right-[2.1875rem]`}
xmlns="http://www.w3.org/2000/svg"
width="11"
height="11"
fill="none"
>
<path
d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z"
fill="#ada8c4"
/>
</svg>
</>
)}
</div>
<div
className={`relative ${
customPaddings ||
`py-10 lg:py-16 xl:py-20 ${crosses ? 'lg:py-32 xl:py-40' : ''}`
} ${className || ''}`}
>
{children}
<div className="hidden absolute top-0 left-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:left-7.5 xl:left-10"></div>
<div className="hidden absolute top-0 right-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:right-7.5 xl:right-10"></div>
{crosses && (
<>
<div
className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-stroke-1 ${
crossesOffset && crossesOffset
} pointer-events-none lg:block xl:left-10 right-10`}
></div>
<svg
className={`hidden absolute -top-[0.3125rem] left-[1.5625rem] ${
crossesOffset && crossesOffset
} pointer-events-none lg:block xl:left-[2.1875rem]`}
xmlns="http://www.w3.org/2000/svg"
width="11"
height="11"
fill="none"
>
<path
d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z"
fill="#ada8c4"
/>
</svg>
<svg
className={`hidden absolute -top-[0.3125rem] right-[1.5625rem] ${
crossesOffset && crossesOffset
} pointer-events-none lg:block xl:right-[2.1875rem]`}
xmlns="http://www.w3.org/2000/svg"
width="11"
height="11"
fill="none"
>
<path
d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z"
fill="#ada8c4"
/>
</svg>
</>
)}
</div>
);
export default Section;

View File

@@ -1,195 +0,0 @@
import Section from "@/components/Section";
import Generating from "@/components/Generating";
import Image from "@/components/Image";
import Heading from "@/components/Heading";
type ServicesProps = {
containerClassName?: string;
};
const Services = ({ containerClassName }: ServicesProps) => (
<Section>
<div className={`container ${containerClassName || ""}`}>
<Heading
title="Generative AI made for creators."
text="Brainwave unlocks the potential of AI-powered applications"
/>
<div className="relative">
<div className="relative z-1 flex items-center h-[38.75rem] mb-5 p-8 border border-n-1/10 rounded-3xl overflow-hidden lg:h-[38.75rem] lg:p-20 xl:h-[45.75rem]">
<div className="absolute top-0 left-0 w-full h-full pointer-events-none md:w-3/5 xl:w-auto">
<Image
className="w-full h-full object-cover md:object-right"
src="/images/services/service-1.png"
width={797}
height={733}
alt="Smartest AI"
/>
</div>
<div className="relative z-1 max-w-[17rem] ml-auto">
<h4 className="h4 mb-4">Smartest AI</h4>
<p className="bpdy-2 mb-[3.125rem] text-n-3">
Brainwave unlocks the potential of AI-powered
applications
</p>
<ul className="body-2">
{[
"Photo generating",
"Photo enhance",
"Seamless Integration",
].map((item, index) => (
<li
className="flex items-start py-4 border-t border-n-6"
key={index}
>
<Image
src="/images/check.svg"
width={24}
height={24}
alt="Check"
/>
<p className="ml-4">{item}</p>
</li>
))}
</ul>
</div>
<Generating className="absolute left-4 right-4 bottom-4 border border-n-1/10 lg:left-1/2 lg-right-auto lg:bottom-8 lg:-translate-x-1/2" />
</div>
<div className="relative z-1 grid gap-5 lg:grid-cols-2">
<div className="relative min-h-[38.75rem] border border-n-1/10 rounded-3xl overflow-hidden">
<div className="absolute inset-0">
<Image
className="w-full h-full object-cover"
src="/images/services/service-2.png"
width={630}
height={748}
alt="Smartest AI"
/>
</div>
<div className="absolute inset-0 flex flex-col justify-end p-8 bg-gradient-to-b from-n-8/0 to-n-8/90 lg:p-15">
<h4 className="h4 mb-4">Photo editing</h4>
<p className="body-2 text-n-3">
{`Automatically enhance your photos using our AI app's
photo editing feature. Try it now!`}
</p>
</div>
<div className="absolute top-8 right-8 max-w-[17.5rem] py-6 px-8 bg-black rounded-t-xl rounded-bl-xl font-code text-base lg:top-16 lg:right-[8.75rem] lg:max-w-[17.5rem]">
Hey Brainwave, enhance this photo
<svg
className="absolute left-full bottom-0"
xmlns="http://www.w3.org/2000/svg"
width="26"
height="37"
>
<path d="M21.843 37.001c3.564 0 5.348-4.309 2.829-6.828L3.515 9.015A12 12 0 0 1 0 .53v36.471h21.843z" />
</svg>
</div>
</div>
<div className="p-4 bg-n-7 rounded-3xl overflow-hidden lg:min-h-[45.75rem]">
<div className="py-12 px-4 xl:px-8">
<h4 className="h4 mb-4">Video generation</h4>
<p className="body-2 mb-[2.25rem] text-n-3">
The worlds most powerful AI photo and video art
generation engine.What will you create?
</p>
<ul className="flex items-center justify-between">
{[
"/images/icons/recording-03.svg",
"/images/icons/recording-01.svg",
"/images/icons/disc-02.svg",
"/images/icons/chrome-cast.svg",
"/images/icons/sliders-04.svg",
].map((item, index) => (
<li
className={`flex items-center justify-center ${
index === 2
? "w-[3rem] h-[3rem] p-0.25 bg-conic-gradient rounded-2xl md:w-[4.5rem] md:h-[4.5rem]"
: "flex w-10 h-10 bg-n-6 rounded-2xl md:w-15 md:h-15"
}`}
key={index}
>
<div
className={
index === 2
? "flex items-center justify-center w-full h-full bg-n-7 rounded-[0.9375rem]"
: ""
}
>
<Image
src={item}
width={24}
height={24}
alt={item}
/>
</div>
</li>
))}
</ul>
</div>
<div className="relative h-[20.5rem] bg-n-8 rounded-xl overflow-hidden md:h-[25rem]">
<Image
className="w-full h-full object-cover"
src="/images/services/service-3.png"
width={517}
height={400}
alt="Smartest AI"
/>
<div className="absolute top-8 left-[3.125rem] w-full max-w-[14rem] pt-2.5 pr-2.5 pb-7 pl-5 bg-n-6 rounded-t-xl rounded-br-xl font-code text-base md:max-w-[17.5rem]">
Video generated!
<div className="absolute left-5 -bottom-[1.125rem] flex items-center justify-center w-[2.25rem] h-[2.25rem] bg-color-1 rounded-[0.75rem]">
<Image
src="/images/brainwave-symbol-white.svg"
width={26}
height={26}
alt="Brainwave"
/>
</div>
<div className="tagline absolute right-2.5 bottom-1 text-[0.625rem] text-n-3 uppercase">
just now
</div>
<svg
className="absolute right-full bottom-0 -scale-x-100"
xmlns="http://www.w3.org/2000/svg"
width="26"
height="37"
>
<path
className="fill-n-6"
d="M21.843 37.001c3.564 0 5.348-4.309 2.829-6.828L3.515 9.015A12 12 0 0 1 0 .53v36.471h21.843z"
/>
</svg>
</div>
<div className="absolute left-0 bottom-0 w-full flex items-center p-6">
<svg
className="mr-3"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
>
<path
d="M8.006 2.802l.036.024 10.549 7.032.805.567c.227.183.494.437.648.808a2 2 0 0 1 0 1.532c-.154.371-.421.625-.648.808-.217.175-.5.364-.805.567L8.006 21.198l-.993.627c-.285.154-.676.331-1.132.303a2 2 0 0 1-1.476-.79c-.276-.365-.346-.788-.375-1.111S4 19.502 4 19.054V4.99v-.043l.029-1.174c.03-.323.1-.746.375-1.11a2 2 0 0 1 1.476-.79c.456-.027.847.149 1.132.304s.62.378.993.627z"
fill="#fff"
/>
</svg>
<div className="flex-1 bg-[#D9D9D9]">
<div className="w-1/2 h-0.5 bg-color-1"></div>
</div>
</div>
</div>
</div>
</div>
<div className="absolute top-0 -left-[10rem] w-[56.625rem] h-[56.625rem] opacity-50 mix-blend-color-dodge pointer-events-none">
<Image
className="absolute top-1/2 left-1/2 w-[79.5625rem] max-w-[79.5625rem] h-[88.5625rem] -translate-x-1/2 -translate-y-1/2"
src="/images/gradient.png"
width={1417}
height={1417}
alt="Gradient"
/>
</div>
</div>
</div>
</Section>
);
export default Services;

View File

@@ -1,195 +0,0 @@
import Section from "@/components/Section";
import Generating from "@/components/Generating";
import Image from "@/components/Image";
import Heading from "@/components/Heading";
type ServicesProps = {
containerClassName?: string;
};
const Services = ({ containerClassName }: ServicesProps) => (
<Section>
<div className={`container ${containerClassName || ""}`}>
<Heading
title="Generative AI made for creators."
text="Brainwave unlocks the potential of AI-powered applications"
/>
<div className="relative">
<div className="relative z-1 flex items-center h-[38.75rem] mb-5 p-8 border border-n-1/10 rounded-3xl overflow-hidden lg:h-[38.75rem] lg:p-20 xl:h-[45.75rem]">
<div className="absolute top-0 left-0 w-full h-full pointer-events-none md:w-3/5 xl:w-auto">
<Image
className="w-full h-full object-cover md:object-right"
src="/images/services/service-1.png"
width={797}
height={733}
alt="Smartest AI"
/>
</div>
<div className="relative z-1 max-w-[17rem] ml-auto">
<h4 className="h4 mb-4">Smartest AI</h4>
<p className="bpdy-2 mb-[3.125rem] text-n-3">
Brainwave unlocks the potential of AI-powered
applications
</p>
<ul className="body-2">
{[
"Photo generating",
"Photo enhance",
"Seamless Integration",
].map((item, index) => (
<li
className="flex items-start py-4 border-t border-n-6"
key={index}
>
<Image
src="/images/check.svg"
width={24}
height={24}
alt="Check"
/>
<p className="ml-4">{item}</p>
</li>
))}
</ul>
</div>
<Generating className="absolute left-4 right-4 bottom-4 border border-n-1/10 lg:left-1/2 lg-right-auto lg:bottom-8 lg:-translate-x-1/2" />
</div>
<div className="relative z-1 grid gap-5 lg:grid-cols-2">
<div className="relative min-h-[38.75rem] border border-n-1/10 rounded-3xl overflow-hidden">
<div className="absolute inset-0">
<Image
className="w-full h-full object-cover"
src="/images/services/service-2.png"
width={630}
height={748}
alt="Smartest AI"
/>
</div>
<div className="absolute inset-0 flex flex-col justify-end p-8 bg-gradient-to-b from-n-8/0 to-n-8/90 lg:p-15">
<h4 className="h4 mb-4">Photo editing</h4>
<p className="body-2 text-n-3">
{`Automatically enhance your photos using our AI app's
photo editing feature. Try it now!`}
</p>
</div>
<div className="absolute top-8 right-8 max-w-[17.5rem] py-6 px-8 bg-black rounded-t-xl rounded-bl-xl font-code text-base lg:top-16 lg:right-[8.75rem] lg:max-w-[17.5rem]">
Hey Brainwave, enhance this photo
<svg
className="absolute left-full bottom-0"
xmlns="http://www.w3.org/2000/svg"
width="26"
height="37"
>
<path d="M21.843 37.001c3.564 0 5.348-4.309 2.829-6.828L3.515 9.015A12 12 0 0 1 0 .53v36.471h21.843z" />
</svg>
</div>
</div>
<div className="p-4 bg-n-7 rounded-3xl overflow-hidden lg:min-h-[45.75rem]">
<div className="py-12 px-4 xl:px-8">
<h4 className="h4 mb-4">Video generation</h4>
<p className="body-2 mb-[2.25rem] text-n-3">
The worlds most powerful AI photo and video art
generation engine.What will you create?
</p>
<ul className="flex items-center justify-between">
{[
"/images/icons/recording-03.svg",
"/images/icons/recording-01.svg",
"/images/icons/disc-02.svg",
"/images/icons/chrome-cast.svg",
"/images/icons/sliders-04.svg",
].map((item, index) => (
<li
className={`flex items-center justify-center ${
index === 2
? "w-[3rem] h-[3rem] p-0.25 bg-conic-gradient rounded-2xl md:w-[4.5rem] md:h-[4.5rem]"
: "flex w-10 h-10 bg-n-6 rounded-2xl md:w-15 md:h-15"
}`}
key={index}
>
<div
className={
index === 2
? "flex items-center justify-center w-full h-full bg-n-7 rounded-[0.9375rem]"
: ""
}
>
<Image
src={item}
width={24}
height={24}
alt={item}
/>
</div>
</li>
))}
</ul>
</div>
<div className="relative h-[20.5rem] bg-n-8 rounded-xl overflow-hidden md:h-[25rem]">
<Image
className="w-full h-full object-cover"
src="/images/services/service-3.png"
width={517}
height={400}
alt="Smartest AI"
/>
<div className="absolute top-8 left-[3.125rem] w-full max-w-[14rem] pt-2.5 pr-2.5 pb-7 pl-5 bg-n-6 rounded-t-xl rounded-br-xl font-code text-base md:max-w-[17.5rem]">
Video generated!
<div className="absolute left-5 -bottom-[1.125rem] flex items-center justify-center w-[2.25rem] h-[2.25rem] bg-color-1 rounded-[0.75rem]">
<Image
src="/images/brainwave-symbol-white.svg"
width={26}
height={26}
alt="Brainwave"
/>
</div>
<div className="tagline absolute right-2.5 bottom-1 text-[0.625rem] text-n-3 uppercase">
just now
</div>
<svg
className="absolute right-full bottom-0 -scale-x-100"
xmlns="http://www.w3.org/2000/svg"
width="26"
height="37"
>
<path
className="fill-n-6"
d="M21.843 37.001c3.564 0 5.348-4.309 2.829-6.828L3.515 9.015A12 12 0 0 1 0 .53v36.471h21.843z"
/>
</svg>
</div>
<div className="absolute left-0 bottom-0 w-full flex items-center p-6">
<svg
className="mr-3"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
>
<path
d="M8.006 2.802l.036.024 10.549 7.032.805.567c.227.183.494.437.648.808a2 2 0 0 1 0 1.532c-.154.371-.421.625-.648.808-.217.175-.5.364-.805.567L8.006 21.198l-.993.627c-.285.154-.676.331-1.132.303a2 2 0 0 1-1.476-.79c-.276-.365-.346-.788-.375-1.111S4 19.502 4 19.054V4.99v-.043l.029-1.174c.03-.323.1-.746.375-1.11a2 2 0 0 1 1.476-.79c.456-.027.847.149 1.132.304s.62.378.993.627z"
fill="#fff"
/>
</svg>
<div className="flex-1 bg-[#D9D9D9]">
<div className="w-1/2 h-0.5 bg-color-1"></div>
</div>
</div>
</div>
</div>
</div>
<div className="absolute top-0 -left-[10rem] w-[56.625rem] h-[56.625rem] opacity-50 mix-blend-color-dodge pointer-events-none">
<Image
className="absolute top-1/2 left-1/2 w-[79.5625rem] max-w-[79.5625rem] h-[88.5625rem] -translate-x-1/2 -translate-y-1/2"
src="/images/gradient.png"
width={1417}
height={1417}
alt="Gradient"
/>
</div>
</div>
</div>
</Section>
);
export default Services;

View File

@@ -3,7 +3,6 @@ import React, { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import * as echarts from 'echarts';
import { stockService } from '@services/eventService';
import { logger } from '@utils/logger';
/**
* 股票信息
@@ -72,11 +71,6 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
setError(null);
try {
logger.debug('KLineChartModal', 'loadData', '开始加载K线数据', {
stockCode: stock.stock_code,
eventTime,
});
const response = await stockService.getKlineData(
stock.stock_code,
'daily',
@@ -91,12 +85,8 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
console.log('[KLineChartModal] 数据条数:', response.data.length);
setData(response.data);
logger.info('KLineChartModal', 'loadData', 'K线数据加载成功', {
dataCount: response.data.length,
});
} catch (err) {
const errorMsg = err instanceof Error ? err.message : '数据加载失败';
logger.error('KLineChartModal', 'loadData', err as Error);
setError(errorMsg);
} finally {
setLoading(false);

View File

@@ -33,9 +33,6 @@ import {
// 工具函数
import { createSubIndicators } from './utils';
// 日志
import { logger } from '@utils/logger';
// ==================== 组件 Props ====================
export interface StockChartKLineModalProps {
@@ -110,10 +107,6 @@ const StockChartKLineModal: React.FC<StockChartKLineModalProps> = ({
const handleChartTypeChange = useCallback((e: RadioChangeEvent) => {
const newType = e.target.value as ChartType;
setChartType(newType);
logger.debug('StockChartKLineModal', 'handleChartTypeChange', '切换图表类型', {
newType,
});
}, []);
/**
@@ -130,10 +123,6 @@ const StockChartKLineModal: React.FC<StockChartKLineModalProps> = ({
// 先移除所有副图指标KLineChart 会自动移除)
// 然后创建新的指标
createSubIndicators(chart, values);
logger.debug('StockChartKLineModal', 'handleIndicatorChange', '切换副图指标', {
indicators: values,
});
},
[chart]
);
@@ -143,7 +132,6 @@ const StockChartKLineModal: React.FC<StockChartKLineModalProps> = ({
*/
const handleRefresh = useCallback(() => {
loadData();
logger.debug('StockChartKLineModal', 'handleRefresh', '刷新数据');
}, [loadData]);
// ==================== 计算属性 ====================

View File

@@ -18,7 +18,6 @@ import {
} from '@chakra-ui/react';
import * as echarts from 'echarts';
import { stockService } from '@services/eventService';
import { logger } from '@utils/logger';
/**
* 股票信息
@@ -76,11 +75,6 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
setError(null);
try {
logger.debug('TimelineChartModal', 'loadData', '开始加载分时图数据', {
stockCode: stock.stock_code,
eventTime,
});
const response = await stockService.getKlineData(
stock.stock_code,
'timeline',
@@ -95,12 +89,8 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
console.log('[TimelineChartModal] 数据条数:', response.data.length);
setData(response.data);
logger.info('TimelineChartModal', 'loadData', '分时图数据加载成功', {
dataCount: response.data.length,
});
} catch (err) {
const errorMsg = err instanceof Error ? err.message : '数据加载失败';
logger.error('TimelineChartModal', 'loadData', err as Error);
setError(errorMsg);
} finally {
setLoading(false);

View File

@@ -13,7 +13,6 @@ import {
createEventHighlightOverlay,
removeAllEventMarkers,
} from '../utils/eventMarkerUtils';
import { logger } from '@utils/logger';
export interface UseEventMarkerOptions {
/** KLineChart 实例 */
@@ -77,10 +76,6 @@ export const useEventMarker = (
const createMarker = useCallback(
(time: string, label: string, color?: string) => {
if (!chart || !data || data.length === 0) {
logger.warn('useEventMarker', 'createMarker', '图表或数据未准备好', {
hasChart: !!chart,
dataLength: data?.length || 0,
});
return;
}
@@ -93,9 +88,6 @@ export const useEventMarker = (
const overlay = createEventMarkerOverlay(eventMarker, data);
if (!overlay) {
logger.warn('useEventMarker', 'createMarker', 'Overlay 创建失败', {
eventMarker,
});
return;
}
@@ -103,9 +95,6 @@ export const useEventMarker = (
const id = chart.createOverlay(overlay);
if (!id || (Array.isArray(id) && id.length === 0)) {
logger.warn('useEventMarker', 'createMarker', '标记添加失败', {
overlay,
});
return;
}
@@ -118,23 +107,9 @@ export const useEventMarker = (
const highlightResult = chart.createOverlay(highlightOverlay);
const actualHighlightId = Array.isArray(highlightResult) ? highlightResult[0] : highlightResult;
setHighlightId(actualHighlightId as string);
logger.info('useEventMarker', 'createMarker', '事件高亮背景创建成功', {
highlightId: actualHighlightId,
});
}
logger.info('useEventMarker', 'createMarker', '事件标记创建成功', {
markerId: actualId,
label,
time,
chartId: chart.id,
});
} catch (err) {
logger.error('useEventMarker', 'createMarker', err as Error, {
time,
label,
});
// 忽略创建标记时的错误
}
},
[chart, data]
@@ -150,26 +125,17 @@ export const useEventMarker = (
try {
if (markerId) {
chart.removeOverlay(markerId);
chart.removeOverlay({ id: markerId });
}
if (highlightId) {
chart.removeOverlay(highlightId);
chart.removeOverlay({ id: highlightId });
}
setMarker(null);
setMarkerId(null);
setHighlightId(null);
logger.debug('useEventMarker', 'removeMarker', '移除事件标记和高亮', {
markerId,
highlightId,
chartId: chart.id,
});
} catch (err) {
logger.error('useEventMarker', 'removeMarker', err as Error, {
markerId,
highlightId,
});
// 忽略移除标记时的错误
}
}, [chart, markerId, highlightId]);
@@ -186,12 +152,8 @@ export const useEventMarker = (
setMarker(null);
setMarkerId(null);
setHighlightId(null);
logger.debug('useEventMarker', 'removeAllMarkers', '移除所有事件标记和高亮', {
chartId: chart.id,
});
} catch (err) {
logger.error('useEventMarker', 'removeAllMarkers', err as Error);
// 忽略移除所有标记时的错误
}
}, [chart]);
@@ -216,10 +178,10 @@ export const useEventMarker = (
if (chart) {
try {
if (markerId) {
chart.removeOverlay(markerId);
chart.removeOverlay({ id: markerId });
}
if (highlightId) {
chart.removeOverlay(highlightId);
chart.removeOverlay({ id: highlightId });
}
} catch (err) {
// 忽略清理时的错误

View File

@@ -10,7 +10,6 @@ import type { Chart } from 'klinecharts';
// import { useColorMode } from '@chakra-ui/react'; // ❌ 已移除深色模式支持
import { getTheme, getTimelineTheme } from '../config/klineTheme';
import { CHART_INIT_OPTIONS } from '../config';
import { logger } from '@utils/logger';
import { avgPriceIndicator } from '../indicators/avgPriceIndicator';
export interface UseKLineChartOptions {
@@ -65,11 +64,9 @@ export const useKLineChart = (
// 全局注册自定义均价线指标(只执行一次)
useEffect(() => {
try {
registerIndicator(avgPriceIndicator);
logger.debug('useKLineChart', '✅ 自定义均价线指标(AVG)注册成功');
registerIndicator(avgPriceIndicator as any);
} catch (err) {
// 如果已注册会报错,忽略即可
logger.debug('useKLineChart', 'AVG指标已注册或注册失败', err);
}
}, []);
@@ -78,16 +75,10 @@ export const useKLineChart = (
// 图表初始化函数
const initChart = (): boolean => {
if (!chartRef.current) {
logger.warn('useKLineChart', 'init', '图表容器未挂载,将在 50ms 后重试', { containerId });
return false;
}
try {
logger.debug('useKLineChart', 'init', '开始初始化图表', {
containerId,
height,
colorMode,
});
// 初始化图表实例KLineChart 10.0 API
// ✅ 根据 chartType 选择主题
@@ -112,29 +103,16 @@ export const useKLineChart = (
// ✅ 新增:创建成交量指标窗格
try {
const volumePaneId = chartInstance.createIndicator('VOL', false, {
chartInstance.createIndicator('VOL', false, {
height: 100, // 固定高度 100px约占整体的 20-25%
});
logger.debug('useKLineChart', 'init', '成交量窗格创建成功', {
volumePaneId,
});
} catch (err) {
logger.warn('useKLineChart', 'init', '成交量窗格创建失败', {
error: err,
});
// 不阻塞主流程,继续执行
}
logger.info('useKLineChart', 'init', '✅ 图表初始化成功', {
containerId,
chartId: chartInstance.id,
});
return true;
} catch (err) {
const error = err as Error;
logger.error('useKLineChart', 'init', error, { containerId });
setError(error);
setIsInitialized(false);
return false;
@@ -146,11 +124,6 @@ export const useKLineChart = (
// 成功,直接返回清理函数
return () => {
if (chartInstanceRef.current) {
logger.debug('useKLineChart', 'dispose', '销毁图表实例', {
containerId,
chartId: chartInstanceRef.current.id,
});
dispose(chartInstanceRef.current);
chartInstanceRef.current = null;
setChartInstance(null); // ✅ 新增:清空 state
@@ -161,7 +134,6 @@ export const useKLineChart = (
// 失败则延迟重试(处理 Modal 动画延迟导致的 DOM 未挂载)
const timer = setTimeout(() => {
logger.debug('useKLineChart', 'init', '执行延迟重试', { containerId });
initChart();
}, 50);
@@ -169,11 +141,6 @@ export const useKLineChart = (
return () => {
clearTimeout(timer);
if (chartInstanceRef.current) {
logger.debug('useKLineChart', 'dispose', '销毁图表实例', {
containerId,
chartId: chartInstanceRef.current.id,
});
dispose(chartInstanceRef.current);
chartInstanceRef.current = null;
setChartInstance(null); // ✅ 新增:清空 state
@@ -195,14 +162,8 @@ export const useKLineChart = (
? getTimelineTheme(colorMode)
: getTheme(colorMode);
chartInstanceRef.current.setStyles(newTheme);
logger.debug('useKLineChart', 'updateTheme', '更新图表主题', {
colorMode,
chartType,
chartId: chartInstanceRef.current.id,
});
} catch (err) {
logger.error('useKLineChart', 'updateTheme', err as Error, { colorMode, chartType });
// 忽略主题更新错误
}
}, [colorMode, chartType, isInitialized]);
@@ -215,7 +176,6 @@ export const useKLineChart = (
const handleResize = () => {
if (chartInstanceRef.current) {
chartInstanceRef.current.resize();
logger.debug('useKLineChart', 'resize', '调整图表大小');
}
};

View File

@@ -8,7 +8,6 @@ import { useEffect, useState, useCallback } from 'react';
import type { Chart } from 'klinecharts';
import type { ChartType, KLineDataPoint, RawDataPoint } from '../types';
import { processChartData } from '../utils/dataAdapter';
import { logger } from '@utils/logger';
import { stockService } from '@services/eventService';
import { klineDataCache, getCacheKey } from '@views/Community/components/StockDetailPanel/utils/klineDataCache';
@@ -78,7 +77,6 @@ export const useKLineData = (
*/
const loadData = useCallback(async () => {
if (!stockCode) {
logger.warn('useKLineData', 'loadData', '股票代码为空', { chartType });
return;
}
@@ -86,11 +84,6 @@ export const useKLineData = (
setError(null);
try {
logger.debug('useKLineData', 'loadData', '开始加载数据', {
stockCode,
chartType,
eventTime,
});
// 1. 先检查缓存
const cacheKey = getCacheKey(stockCode, eventTime, chartType);
@@ -125,19 +118,8 @@ export const useKLineData = (
const processedData = processChartData(rawDataList, chartType, eventTime);
setData(processedData);
logger.info('useKLineData', 'loadData', '数据加载成功', {
stockCode,
chartType,
rawCount: rawDataList.length,
processedCount: processedData.length,
});
} catch (err) {
const error = err as Error;
logger.error('useKLineData', 'loadData', error, {
stockCode,
chartType,
});
setError(error);
setData([]);
setRawData([]);
@@ -207,9 +189,7 @@ export const useKLineData = (
(chart as any).setOffsetRightDistance(50);
}
} catch (err) {
logger.error('useKLineData', 'updateChartData', err as Error, {
step: '调整可见范围失败',
});
// 忽略调整可见范围时的错误
}
}, 100); // 延迟 100ms 确保数据已加载和渲染
@@ -259,14 +239,8 @@ export const useKLineData = (
}, 200); // 延迟 200ms确保均价线创建完成后再添加
}
logger.debug(
'useKLineData',
`updateChartData - ${stockCode} (${chartType}) - ${klineData.length}条数据加载成功`
);
} catch (err) {
logger.error('useKLineData', 'updateChartData', err as Error, {
dataCount: klineData.length,
});
// 忽略更新图表数据时的错误
}
},
[chart, stockCode, chartType]
@@ -279,11 +253,6 @@ export const useKLineData = (
(newData: KLineDataPoint[]) => {
setData(newData);
updateChartData(newData);
logger.debug(
'useKLineData',
`updateData - ${stockCode} (${chartType}) - ${newData.length}条数据手动更新`
);
},
[updateChartData]
);
@@ -298,7 +267,6 @@ export const useKLineData = (
if (chart) {
chart.resetData();
logger.debug('useKLineData', `clearData - chartId: ${(chart as any).id}`);
}
}, [chart]);

View File

@@ -5,17 +5,18 @@
* 计算公式:累计成交额 / 累计成交量
*/
import type { Indicator, KLineData } from 'klinecharts';
import type { KLineData } from 'klinecharts';
export const avgPriceIndicator: Indicator = {
// 使用部分类型定义,因为 Indicator 类型很复杂
export const avgPriceIndicator = {
name: 'AVG',
shortName: 'AVG',
calcParams: [],
calcParams: [] as number[],
shouldOhlc: false, // 不显示 OHLC 信息
shouldFormatBigNumber: false,
precision: 2,
minValue: null,
maxValue: null,
minValue: null as number | null,
maxValue: null as number | null,
figures: [
{
@@ -61,33 +62,27 @@ export const avgPriceIndicator: Indicator = {
},
/**
* Tooltip 格式化(显示均价 + 涨跌幅)
* 自定义 Tooltip 数据源
* 符合 IndicatorTooltipData 接口要求
*/
createTooltipDataSource: ({ kLineData, indicator, defaultStyles }: any) => {
if (!indicator?.avg) {
return {
title: { text: '均价', color: defaultStyles.tooltip.text.color },
value: { text: '--', color: '#FF9800' },
};
}
const avgPrice = indicator.avg;
const prevClose = kLineData?.prev_close;
// 计算均价涨跌幅
let changeText = `¥${avgPrice.toFixed(2)}`;
if (prevClose && prevClose > 0) {
const changePercent = ((avgPrice - prevClose) / prevClose * 100).toFixed(2);
const changeValue = (avgPrice - prevClose).toFixed(2);
changeText = `¥${avgPrice.toFixed(2)} (${changeValue}, ${changePercent}%)`;
}
const avgValue = kLineData?.avg;
const lineColor = defaultStyles?.lines?.[0]?.color || '#FF9800';
return {
title: { text: '均价', color: defaultStyles.tooltip.text.color },
value: {
text: changeText,
color: '#FF9800',
},
name: 'AVG',
calcParamsText: '',
features: [] as any[],
legends: [
{
title: { text: '均价: ', color: lineColor },
value: {
text: avgValue !== undefined ? avgValue.toFixed(2) : '--',
color: lineColor,
},
},
],
};
},
};

View File

@@ -4,8 +4,7 @@
* 包含图表初始化、技术指标管理等通用逻辑
*/
import type { Chart } from 'klinecharts';
import { logger } from '@utils/logger';
import type { Chart, ActionType } from 'klinecharts';
/**
* 安全地执行图表操作(捕获异常)
@@ -21,7 +20,6 @@ export const safeChartOperation = <T>(
try {
return fn();
} catch (error) {
logger.error('chartUtils', operation, error as Error);
return null;
}
};
@@ -50,13 +48,6 @@ export const createIndicator = (
isStack
);
logger.debug('chartUtils', 'createIndicator', '创建技术指标', {
indicatorName,
params,
isStack,
indicatorId,
});
return indicatorId;
});
};
@@ -69,8 +60,11 @@ export const createIndicator = (
*/
export const removeIndicator = (chart: Chart, indicatorId?: string): void => {
safeChartOperation('removeIndicator', () => {
chart.removeIndicator(indicatorId);
logger.debug('chartUtils', 'removeIndicator', '移除技术指标', { indicatorId });
if (indicatorId) {
chart.removeIndicator({ id: indicatorId });
} else {
chart.removeIndicator({});
}
});
};
@@ -94,11 +88,6 @@ export const createSubIndicators = (
}
});
logger.debug('chartUtils', 'createSubIndicators', '批量创建副图指标', {
indicators,
createdIds: ids,
});
return ids;
};
@@ -130,10 +119,6 @@ export const setChartZoom = (chart: Chart, zoom: number): void => {
},
});
logger.debug('chartUtils', 'setChartZoom', '设置图表缩放', {
zoom,
newBarSpace,
});
});
};
@@ -147,8 +132,6 @@ export const scrollToTimestamp = (chart: Chart, timestamp: number): void => {
safeChartOperation('scrollToTimestamp', () => {
// KLineChart 10.0: 使用 scrollToTimestamp 方法
chart.scrollToTimestamp(timestamp);
logger.debug('chartUtils', 'scrollToTimestamp', '滚动到指定时间', { timestamp });
});
};
@@ -160,7 +143,6 @@ export const scrollToTimestamp = (chart: Chart, timestamp: number): void => {
export const resizeChart = (chart: Chart): void => {
safeChartOperation('resizeChart', () => {
chart.resize();
logger.debug('chartUtils', 'resizeChart', '调整图表大小');
});
};
@@ -194,7 +176,6 @@ export const getVisibleRange = (chart: Chart): { from: number; to: number } | nu
export const clearChartData = (chart: Chart): void => {
safeChartOperation('clearChartData', () => {
chart.resetData();
logger.debug('chartUtils', 'clearChartData', '清空图表数据');
});
};
@@ -213,11 +194,6 @@ export const exportChartImage = (
// KLineChart 10.0: 使用 getConvertPictureUrl 方法
const imageData = chart.getConvertPictureUrl(includeOverlay, 'png', '#ffffff');
logger.debug('chartUtils', 'exportChartImage', '导出图表图片', {
includeOverlay,
hasData: !!imageData,
});
return imageData;
});
};
@@ -235,8 +211,6 @@ export const toggleCrosshair = (chart: Chart, show: boolean): void => {
show,
},
});
logger.debug('chartUtils', 'toggleCrosshair', '切换十字光标', { show });
});
};
@@ -253,8 +227,6 @@ export const toggleGrid = (chart: Chart, show: boolean): void => {
show,
},
});
logger.debug('chartUtils', 'toggleGrid', '切换网格', { show });
});
};
@@ -267,12 +239,11 @@ export const toggleGrid = (chart: Chart, show: boolean): void => {
*/
export const subscribeChartEvent = (
chart: Chart,
eventName: string,
eventName: ActionType,
handler: (...args: any[]) => void
): void => {
safeChartOperation(`subscribeChartEvent:${eventName}`, () => {
chart.subscribeAction(eventName, handler);
logger.debug('chartUtils', 'subscribeChartEvent', '订阅图表事件', { eventName });
});
};
@@ -285,11 +256,10 @@ export const subscribeChartEvent = (
*/
export const unsubscribeChartEvent = (
chart: Chart,
eventName: string,
eventName: ActionType,
handler: (...args: any[]) => void
): void => {
safeChartOperation(`unsubscribeChartEvent:${eventName}`, () => {
chart.unsubscribeAction(eventName, handler);
logger.debug('chartUtils', 'unsubscribeChartEvent', '取消订阅图表事件', { eventName });
});
};

View File

@@ -6,7 +6,6 @@
import dayjs from 'dayjs';
import type { KLineDataPoint, RawDataPoint, ChartType } from '../types';
import { logger } from '@utils/logger';
/**
* 将后端原始数据转换为 KLineChart 标准格式
@@ -22,7 +21,6 @@ export const convertToKLineData = (
eventTime?: string
): KLineDataPoint[] => {
if (!rawData || !Array.isArray(rawData) || rawData.length === 0) {
logger.warn('dataAdapter', 'convertToKLineData', '原始数据为空', { chartType });
return [];
}
@@ -37,15 +35,11 @@ export const convertToKLineData = (
low: Number(item.low) || 0,
close: Number(item.close) || 0,
volume: Number(item.volume) || 0,
turnover: item.turnover ? Number(item.turnover) : undefined,
turnover: (item as any).turnover ? Number((item as any).turnover) : undefined,
prev_close: item.prev_close ? Number(item.prev_close) : undefined, // ✅ 新增:昨收价(用于百分比计算和基准线)
};
});
} catch (error) {
logger.error('dataAdapter', 'convertToKLineData', error as Error, {
chartType,
dataLength: rawData.length,
});
return [];
}
};
@@ -90,7 +84,6 @@ const parseTimestamp = (
}
// 默认返回当前时间(避免图表崩溃)
logger.warn('dataAdapter', 'parseTimestamp', '无法解析时间戳,使用当前时间', { item });
return Date.now();
};
@@ -109,7 +102,6 @@ const parseTimelineTimestamp = (time: string, eventTime: string): number => {
const eventDate = dayjs(eventTime).startOf('day');
return eventDate.hour(hours).minute(minutes).second(0).valueOf();
} catch (error) {
logger.error('dataAdapter', 'parseTimelineTimestamp', error as Error, { time, eventTime });
return dayjs(eventTime).valueOf();
}
};
@@ -126,19 +118,16 @@ export const validateAndCleanData = (data: KLineDataPoint[]): KLineDataPoint[] =
return data.filter((item) => {
// 移除价格为 0 或负数的数据
if (item.open <= 0 || item.high <= 0 || item.low <= 0 || item.close <= 0) {
logger.warn('dataAdapter', 'validateAndCleanData', '价格异常,已移除', { item });
return false;
}
// 移除 high < low 的数据(数据错误)
if (item.high < item.low) {
logger.warn('dataAdapter', 'validateAndCleanData', '最高价 < 最低价,已移除', { item });
return false;
}
// 移除成交量为负数的数据
if (item.volume < 0) {
logger.warn('dataAdapter', 'validateAndCleanData', '成交量异常,已移除', { item });
return false;
}
@@ -213,17 +202,8 @@ export const trimDataByEventTime = (
return item.timestamp >= startTime && item.timestamp <= endTime;
});
logger.debug('dataAdapter', 'trimDataByEventTime', '数据时间范围裁剪完成', {
originalLength: data.length,
trimmedLength: trimmedData.length,
eventTime,
chartType,
dateRange: `${dayjs(startTime).format('YYYY-MM-DD')} ~ ${dayjs(endTime).format('YYYY-MM-DD')}`,
});
return trimmedData;
} catch (error) {
logger.error('dataAdapter', 'trimDataByEventTime', error as Error, { eventTime });
return data; // 出错时返回原始数据
}
};
@@ -260,13 +240,6 @@ export const processChartData = (
data = trimDataByEventTime(data, eventTime, chartType);
}
logger.debug('dataAdapter', 'processChartData', '数据处理完成', {
rawLength: rawData.length,
processedLength: data.length,
chartType,
hasEventTime: !!eventTime,
});
return data;
};

View File

@@ -9,7 +9,6 @@ import type { OverlayCreate } from 'klinecharts';
import type { EventMarker, KLineDataPoint } from '../types';
import { EVENT_MARKER_CONFIG } from '../config';
import { findClosestDataPoint } from './dataAdapter';
import { logger } from '@utils/logger';
/**
* 创建事件标记 OverlayKLineChart 10.0 格式)
@@ -27,10 +26,6 @@ export const createEventMarkerOverlay = (
const closestPoint = findClosestDataPoint(data, marker.timestamp);
if (!closestPoint) {
logger.warn('eventMarkerUtils', 'createEventMarkerOverlay', '未找到匹配的数据点', {
markerId: marker.id,
timestamp: marker.timestamp,
});
return null;
}
@@ -64,10 +59,6 @@ export const createEventMarkerOverlay = (
style: 'fill',
color: marker.color,
borderRadius: EVENT_MARKER_CONFIG.text.borderRadius,
paddingLeft: EVENT_MARKER_CONFIG.text.padding,
paddingRight: EVENT_MARKER_CONFIG.text.padding,
paddingTop: EVENT_MARKER_CONFIG.text.padding,
paddingBottom: EVENT_MARKER_CONFIG.text.padding,
},
},
// 标记文本内容
@@ -77,17 +68,8 @@ export const createEventMarkerOverlay = (
},
};
logger.debug('eventMarkerUtils', 'createEventMarkerOverlay', '创建事件标记', {
markerId: marker.id,
timestamp: closestPoint.timestamp,
label: marker.label,
});
return overlay;
} catch (error) {
logger.error('eventMarkerUtils', 'createEventMarkerOverlay', error as Error, {
markerId: marker.id,
});
return null;
}
};
@@ -108,7 +90,6 @@ export const createEventHighlightOverlay = (
const closestPoint = findClosestDataPoint(data, eventTimestamp);
if (!closestPoint) {
logger.warn('eventMarkerUtils', 'createEventHighlightOverlay', '未找到匹配的数据点');
return null;
}
@@ -135,14 +116,8 @@ export const createEventHighlightOverlay = (
},
};
logger.debug('eventMarkerUtils', 'createEventHighlightOverlay', '创建事件高亮覆盖层', {
timestamp: closestPoint.timestamp,
eventTime,
});
return overlay;
} catch (error) {
logger.error('eventMarkerUtils', 'createEventHighlightOverlay', error as Error);
return null;
}
};
@@ -219,11 +194,6 @@ export const createEventMarkerOverlays = (
}
});
logger.debug('eventMarkerUtils', 'createEventMarkerOverlays', '批量创建事件标记', {
totalMarkers: markers.length,
createdOverlays: overlays.length,
});
return overlays;
};
@@ -235,10 +205,9 @@ export const createEventMarkerOverlays = (
*/
export const removeEventMarker = (chart: any, markerId: string): void => {
try {
chart.removeOverlay(markerId);
logger.debug('eventMarkerUtils', 'removeEventMarker', '移除事件标记', { markerId });
chart.removeOverlay({ id: markerId });
} catch (error) {
logger.error('eventMarkerUtils', 'removeEventMarker', error as Error, { markerId });
// 忽略移除标记时的错误
}
};
@@ -251,9 +220,8 @@ export const removeAllEventMarkers = (chart: any): void => {
try {
// KLineChart 10.0 API: removeOverlay() 不传参数时移除所有 overlays
chart.removeOverlay();
logger.debug('eventMarkerUtils', 'removeAllEventMarkers', '移除所有事件标记');
} catch (error) {
logger.error('eventMarkerUtils', 'removeAllEventMarkers', error as Error);
// 忽略移除所有标记时的错误
}
};
@@ -275,13 +243,8 @@ export const updateEventMarker = (
// 重新创建标记KLineChart 10.0 不支持直接更新 overlay
// 注意:需要在调用方重新创建并添加 overlay
logger.debug('eventMarkerUtils', 'updateEventMarker', '更新事件标记', {
markerId,
updates,
});
} catch (error) {
logger.error('eventMarkerUtils', 'updateEventMarker', error as Error, { markerId });
// 忽略更新标记时的错误
}
};
@@ -309,12 +272,8 @@ export const highlightEventMarker = (
},
});
logger.debug('eventMarkerUtils', 'highlightEventMarker', '高亮事件标记', {
markerId,
highlight,
});
} catch (error) {
logger.error('eventMarkerUtils', 'highlightEventMarker', error as Error, { markerId });
// 忽略高亮标记时的错误
}
};

View File

@@ -4,6 +4,7 @@
* 用于显示股票与事件的关联描述信息
* 固定标题为"关联描述:"
* 自动处理多种数据格式(字符串、对象数组)
* 支持悬停显示来源信息
*
* @example
* ```tsx
@@ -20,7 +21,20 @@
*/
import React, { useMemo } from 'react';
import { Box, Text, BoxProps } from '@chakra-ui/react';
import { Box, Text, BoxProps, Tooltip } from '@chakra-ui/react';
/**
* 关联描述数据项类型
*/
export interface RelationDescItem {
query_part?: string;
sentences?: string;
organization?: string;
report_title?: string;
declare_date?: string;
author?: string;
match_score?: string;
}
/**
* 关联描述数据类型
@@ -30,10 +44,7 @@ import { Box, Text, BoxProps } from '@chakra-ui/react';
export type RelationDescType =
| string
| {
data: Array<{
query_part?: string;
sentences?: string;
}>;
data: Array<RelationDescItem>;
}
| null
| undefined;
@@ -66,33 +77,45 @@ export const RelationDescription: React.FC<RelationDescriptionProps> = ({
lineHeight = '1.7',
containerProps = {}
}) => {
// 处理关联描述(兼容对象和字符串格式
const processedDesc = useMemo(() => {
// 判断是否为对象格式(带来源信息
const isObjectFormat = useMemo(() => {
return typeof relationDesc === 'object' && relationDesc?.data && Array.isArray(relationDesc.data);
}, [relationDesc]);
// 处理关联描述数据
const descData = useMemo(() => {
if (!relationDesc) return null;
// 字符串格式:直接返回
if (typeof relationDesc === 'string') {
return relationDesc;
return { type: 'string' as const, content: relationDesc };
}
// 对象格式:提取并拼接文本
if (typeof relationDesc === 'object' && relationDesc.data && Array.isArray(relationDesc.data)) {
return (
relationDesc.data
.map((item) => item.query_part || item.sentences || '')
.filter((s) => s)
.join('') || null
);
// 对象格式:返回数据数组
if (isObjectFormat && relationDesc && typeof relationDesc === 'object') {
const items = relationDesc.data.filter((item) => item.query_part);
if (items.length === 0) return null;
return { type: 'array' as const, items };
}
return null;
}, [relationDesc]);
}, [relationDesc, isObjectFormat]);
// 如果没有有效的描述内容,不渲染组件
if (!processedDesc) {
if (!descData) {
return null;
}
// 格式化日期
const formatDate = (dateStr?: string) => {
if (!dateStr) return '';
try {
return new Date(dateStr).toLocaleDateString('zh-CN');
} catch {
return dateStr;
}
};
return (
<Box
p={4}
@@ -108,14 +131,70 @@ export const RelationDescription: React.FC<RelationDescriptionProps> = ({
>
:
</Text>
<Text
fontSize={fontSize}
color={textColor}
lineHeight={lineHeight}
whiteSpace="pre-wrap"
>
{processedDesc}
</Text>
{descData.type === 'string' ? (
<Text
fontSize={fontSize}
color={textColor}
lineHeight={lineHeight}
whiteSpace="pre-wrap"
>
{descData.content}
</Text>
) : (
<Text
fontSize={fontSize}
color={textColor}
lineHeight={lineHeight}
>
{descData.items.map((item, index, arr) => (
<React.Fragment key={index}>
<Tooltip
label={
<Box maxW="400px" p={2}>
{item.sentences && (
<Text fontSize="xs" mb={2} whiteSpace="pre-wrap">
{item.sentences}
</Text>
)}
<Text fontSize="xs" color="gray.300" mt={1}>
{item.organization || '未知'}{item.author ? ` / ${item.author}` : ''}
</Text>
{item.report_title && (
<Text fontSize="xs" color="gray.300" noOfLines={2}>
{item.report_title}
</Text>
)}
{item.declare_date && (
<Text fontSize="xs" color="gray.400">
{formatDate(item.declare_date)}
</Text>
)}
</Box>
}
placement="top"
hasArrow
bg="rgba(20, 20, 20, 0.95)"
maxW="420px"
>
<Text
as="span"
cursor="help"
borderBottom="1px dashed"
borderBottomColor="gray.400"
_hover={{
color: 'blue.500',
borderBottomColor: 'blue.500',
}}
transition="all 0.2s"
>
{item.query_part}
</Text>
</Tooltip>
{index < arr.length - 1 && ''}
</React.Fragment>
))}
</Text>
)}
</Box>
);
};

View File

@@ -1049,10 +1049,26 @@ export default function SubscriptionContent() {
</Text>
</HStack>
</Flex>
<Flex justify="space-between" align="center" flexWrap="wrap" gap={2}>
<Text fontSize="xs" color={secondaryText} pl={11} flex={1}>
{plan.description}
</Text>
<Flex justify="space-between" align="flex-start" flexWrap="wrap" gap={2}>
<VStack align="start" spacing={0.5} pl={11} flex={1}>
{plan.description && plan.description.includes('|') ? (
plan.description.split('|').map((item, idx) => (
<Text
key={idx}
fontSize="sm"
color={plan.name === 'max' ? 'purple.600' : 'blue.600'}
lineHeight="1.5"
fontWeight="medium"
>
{item.trim()}
</Text>
))
) : (
<Text fontSize="xs" color={secondaryText}>
{plan.description}
</Text>
)}
</VStack>
{(() => {
// 获取当前选中的周期信息
if (plan.pricing_options) {

View File

@@ -22,6 +22,7 @@ import {
Input,
Icon,
Container,
useBreakpointValue,
} from '@chakra-ui/react';
import {
FaWeixin,
@@ -42,6 +43,87 @@ import { useAuth } from '../../contexts/AuthContext';
import { useSubscriptionEvents } from '../../hooks/useSubscriptionEvents';
import { subscriptionConfig, themeColors } from '../../views/Pages/Account/subscription-content';
// 计费周期选择器组件 - 移动端垂直布局(年付在上),桌面端水平布局
interface CycleSelectorProps {
options: any[];
selectedCycle: string;
onSelectCycle: (cycle: string) => void;
}
function CycleSelector({ options, selectedCycle, onSelectCycle }: CycleSelectorProps) {
// 使用 useBreakpointValue 动态获取是否是移动端
const isMobile = useBreakpointValue({ base: true, md: false });
// 移动端倒序显示(年付在上),桌面端正常顺序
const displayOptions = isMobile ? [...options].reverse() : options;
return (
<Flex
direction={{ base: 'column', md: 'row' }}
gap={3}
p={2}
bg="rgba(255, 255, 255, 0.03)"
borderRadius="xl"
border="1px solid"
borderColor="rgba(255, 255, 255, 0.1)"
backdropFilter="blur(10px)"
justify="center"
align="center"
w={{ base: 'full', md: 'auto' }}
maxW={{ base: '320px', md: 'none' }}
mx="auto"
>
{displayOptions.map((option: any) => (
<Box key={option.cycleKey} position="relative" w={{ base: 'full', md: 'auto' }}>
{option.discountPercent > 0 && (
<Badge
position="absolute"
top={{ base: '50%', md: '-10px' }}
right={{ base: '10px', md: '-10px' }}
transform={{ base: 'translateY(-50%)', md: 'none' }}
colorScheme="red"
fontSize="xs"
px={2}
py={1}
borderRadius="full"
fontWeight="bold"
zIndex={1}
>
{option.discountPercent}%
</Badge>
)}
<Button
size="lg"
w={{ base: 'full', md: 'auto' }}
px={6}
py={6}
borderRadius="lg"
bg={selectedCycle === option.cycleKey ? 'linear-gradient(135deg, #D4AF37, #B8941F)' : 'transparent'}
color={selectedCycle === option.cycleKey ? '#000' : '#fff'}
border="1px solid"
borderColor={selectedCycle === option.cycleKey ? 'rgba(212, 175, 55, 0.3)' : 'rgba(255, 255, 255, 0.1)'}
onClick={() => onSelectCycle(option.cycleKey)}
_hover={{
transform: 'translateY(-2px)',
borderColor: 'rgba(212, 175, 55, 0.5)',
shadow: selectedCycle === option.cycleKey
? '0 0 20px rgba(212, 175, 55, 0.3)'
: '0 4px 12px rgba(0, 0, 0, 0.5)',
}}
transition="all 0.3s"
fontWeight="bold"
justifyContent={{ base: 'flex-start', md: 'center' }}
pl={{ base: 6, md: 6 }}
>
{option.label}
</Button>
</Box>
))}
</Flex>
);
}
export default function SubscriptionContentNew() {
const { user } = useAuth();
const subscriptionEvents = useSubscriptionEvents({
@@ -751,61 +833,11 @@ export default function SubscriptionContentNew() {
·
</Text>
<HStack
spacing={3}
p={2}
bg="rgba(255, 255, 255, 0.03)"
borderRadius="xl"
border="1px solid"
borderColor="rgba(255, 255, 255, 0.1)"
backdropFilter="blur(10px)"
flexWrap="wrap"
justify="center"
>
{getMergedPlans()[1]?.pricingOptions?.map((option: any, index: number) => (
<Box key={index} position="relative">
{option.discountPercent > 0 && (
<Badge
position="absolute"
top="-10px"
right="-10px"
colorScheme="red"
fontSize="xs"
px={2}
py={1}
borderRadius="full"
fontWeight="bold"
zIndex={1}
>
{option.discountPercent}%
</Badge>
)}
<Button
size="lg"
px={6}
py={6}
borderRadius="lg"
bg={selectedCycle === option.cycleKey ? 'linear-gradient(135deg, #D4AF37, #B8941F)' : 'transparent'}
color={selectedCycle === option.cycleKey ? '#000' : '#fff'}
border="1px solid"
borderColor={selectedCycle === option.cycleKey ? 'rgba(212, 175, 55, 0.3)' : 'rgba(255, 255, 255, 0.1)'}
onClick={() => setSelectedCycle(option.cycleKey)}
_hover={{
transform: 'translateY(-2px)',
borderColor: 'rgba(212, 175, 55, 0.5)',
shadow: selectedCycle === option.cycleKey
? '0 0 20px rgba(212, 175, 55, 0.3)'
: '0 4px 12px rgba(0, 0, 0, 0.5)',
}}
transition="all 0.3s"
fontWeight="bold"
>
{option.label}
</Button>
</Box>
))}
</HStack>
<CycleSelector
options={getMergedPlans()[1]?.pricingOptions || []}
selectedCycle={selectedCycle}
onSelectCycle={setSelectedCycle}
/>
{(() => {
const currentOption = getMergedPlans()[1]?.pricingOptions?.find(

View File

@@ -0,0 +1,66 @@
// src/constants/homeFeatures.ts
// 首页功能特性配置
import type { Feature } from '@/types/home';
/**
* 核心功能特性列表
* 第一个功能为特色功能,会以突出样式显示
*/
export const CORE_FEATURES: Feature[] = [
{
id: 'news-catalyst',
title: '新闻中心',
description: '实时新闻事件分析,捕捉市场催化因子',
icon: '📊',
color: 'yellow',
url: '/community',
badge: '核心',
featured: true
},
{
id: 'concepts',
title: '概念中心',
description: '热门概念与主题投资分析追踪',
icon: '🎯',
color: 'purple',
url: '/concepts',
badge: '热门'
},
{
id: 'stocks',
title: '个股信息汇总',
description: '全面的个股基本面信息整合',
icon: '📈',
color: 'blue',
url: '/stocks',
badge: '全面'
},
{
id: 'limit-analyse',
title: '涨停板块分析',
description: '涨停板数据深度分析与规律挖掘',
icon: '🚀',
color: 'green',
url: '/limit-analyse',
badge: '精准'
},
{
id: 'company',
title: '个股罗盘',
description: '个股全方位分析与投资决策支持',
icon: '🧭',
color: 'orange',
url: '/company?scode=688256',
badge: '专业'
},
{
id: 'trading-simulation',
title: '模拟盘交易',
description: '100万起始资金,体验真实交易环境',
icon: '💰',
color: 'teal',
url: '/trading-simulation',
badge: '实战'
}
];

View File

@@ -2,11 +2,61 @@
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';
import { identifyUser, resetUser, trackEvent } from '@lib/posthog';
import { logger } from '@utils/logger';
import { performanceMonitor } from '@utils/performanceMonitor';
import { useNotification } from '@contexts/NotificationContext';
// ⚡ PostHog 延迟加载:移除同步导入,首屏减少 ~180KB
// import { identifyUser, resetUser, trackEvent } from '@lib/posthog';
import { SPECIAL_EVENTS } from '@lib/constants';
// ⚡ PostHog 延迟加载模块(动态导入后缓存)
let posthogModule = null;
/**
* ⚡ 延迟加载 PostHog 模块
*/
const loadPostHogModule = async () => {
if (posthogModule) return posthogModule;
try {
posthogModule = await import('@lib/posthog');
return posthogModule;
} catch (error) {
logger.error('AuthContext', 'PostHog 模块加载失败', error);
return null;
}
};
/**
* ⚡ 延迟调用 identifyUser
*/
const identifyUserLazy = async (userId, userProperties) => {
const module = await loadPostHogModule();
if (module) {
module.identifyUser(userId, userProperties);
}
};
/**
* ⚡ 延迟调用 resetUser
*/
const resetUserLazy = async () => {
const module = await loadPostHogModule();
if (module) {
module.resetUser();
}
};
/**
* ⚡ 延迟调用 trackEvent使用异步版本
*/
const trackEventLazy = async (eventName, properties) => {
const module = await loadPostHogModule();
if (module) {
module.trackEventAsync(eventName, properties);
}
};
// 创建认证上下文
const AuthContext = createContext();
@@ -37,6 +87,9 @@ export const AuthProvider = ({ children }) => {
// 检查Session状态
const checkSession = async () => {
// ⚡ 性能标记:认证检查开始
performanceMonitor.mark('auth-check-start');
// 节流检查
const now = Date.now();
const timeSinceLastCheck = now - lastCheckTimeRef.current;
@@ -47,6 +100,8 @@ export const AuthProvider = ({ children }) => {
minInterval: `${MIN_CHECK_INTERVAL}ms`,
reason: '距离上次请求间隔太短'
});
// ⚡ 性能标记:认证检查结束(节流情况)
performanceMonitor.mark('auth-check-end');
return;
}
@@ -93,8 +148,8 @@ export const AuthProvider = ({ children }) => {
return prevUser;
}
// ✅ 识别用户身份到 PostHog
identifyUser(data.user.id, {
// ✅ 识别用户身份到 PostHog(延迟加载)
identifyUserLazy(data.user.id, {
email: data.user.email,
username: data.user.username,
subscription_tier: data.user.subscription_tier,
@@ -125,6 +180,8 @@ export const AuthProvider = ({ children }) => {
setUser((prev) => prev === null ? prev : null);
setIsAuthenticated((prev) => prev === false ? prev : false);
} finally {
// ⚡ 性能标记:认证检查结束
performanceMonitor.mark('auth-check-end');
// ⚡ 只在 isLoading 为 true 时才设置为 false避免不必要的状态更新
setIsLoading((prev) => prev === false ? prev : false);
}
@@ -346,8 +403,8 @@ export const AuthProvider = ({ children }) => {
credentials: 'include'
});
// ✅ 追踪登出事件(必须在 resetUser() 之前,否则会丢失用户身份
trackEvent(SPECIAL_EVENTS.USER_LOGGED_OUT, {
// ✅ 追踪登出事件(延迟加载,必须在 resetUser() 之前)
trackEventLazy(SPECIAL_EVENTS.USER_LOGGED_OUT, {
timestamp: new Date().toISOString(),
user_id: user?.id || null,
session_duration_minutes: user?.session_start
@@ -355,8 +412,8 @@ export const AuthProvider = ({ children }) => {
: null,
});
// ✅ 重置 PostHog 用户会话
resetUser();
// ✅ 重置 PostHog 用户会话(延迟加载)
resetUserLazy();
// 清除本地状态
setUser(null);

View File

@@ -9,6 +9,8 @@
import React, { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
import { useToast, Box, HStack, Text, Button, CloseButton, VStack, Icon } from '@chakra-ui/react';
import { BellIcon } from '@chakra-ui/icons';
import { useSelector } from 'react-redux';
import { selectIsMobile } from '@/store/slices/deviceSlice';
import { logger } from '../utils/logger';
import socket from '../services/socket';
import notificationSound from '../assets/sounds/notification.wav';
@@ -27,6 +29,9 @@ const CONNECTION_STATUS = {
RECONNECTED: 'reconnected', // 重连成功显示2秒后自动变回 CONNECTED
};
// ⚡ 模块级变量:防止 React Strict Mode 导致的重复初始化
let socketInitialized = false;
// 创建通知上下文
const NotificationContext = createContext();
@@ -41,6 +46,10 @@ export const useNotification = () => {
// 通知提供者组件
export const NotificationProvider = ({ children }) => {
// ⚡ 移动端检测(使用 Redux 状态)
const isMobile = useSelector(selectIsMobile);
// ========== 所有 Hooks 必须在条件判断之前调用React 规则) ==========
const toast = useToast();
const [notifications, setNotifications] = useState([]);
const [isConnected, setIsConnected] = useState(false);
@@ -562,8 +571,8 @@ export const NotificationProvider = ({ children }) => {
logger.info('NotificationContext', 'Auto-requesting browser permission on notification');
await requestBrowserPermission();
}
// 如果权限是denied已拒绝提供设置指引
else if (browserPermission === 'denied') {
// 如果权限是denied已拒绝提供设置指引(仅 PC 端显示)
else if (browserPermission === 'denied' && !isMobile) {
const toastId = 'browser-permission-denied-guide';
if (!toast.isActive(toastId)) {
toast({
@@ -649,183 +658,223 @@ export const NotificationProvider = ({ children }) => {
}, [adaptEventToNotification]);
// ========== 连接到 Socket 服务(⚡ 方案2: 只执行一次 ==========
// ========== 连接到 Socket 服务(⚡ 异步初始化,不阻塞首屏 ==========
useEffect(() => {
logger.info('NotificationContext', '初始化 Socket 连接方案2只注册一次');
// ⚡ 防止 React Strict Mode 导致的重复初始化
if (socketInitialized) {
logger.debug('NotificationContext', 'Socket 已初始化跳过重复执行Strict Mode 保护)');
return;
}
// ========== 监听连接成功(首次连接 + 重连) ==========
socket.on('connect', () => {
setIsConnected(true);
setReconnectAttempt(0);
let cleanupCalled = false;
let idleCallbackId;
let timeoutId;
// 判断是首次连接还是重连
if (isFirstConnect.current) {
logger.info('NotificationContext', '首次连接成功', {
socketId: socket.getSocketId?.()
});
setConnectionStatus(CONNECTION_STATUS.CONNECTED);
isFirstConnect.current = false;
} else {
logger.info('NotificationContext', '重连成功');
setConnectionStatus(CONNECTION_STATUS.RECONNECTED);
// ⚡ Socket 初始化函数(将在浏览器空闲时执行)
const initSocketConnection = () => {
if (cleanupCalled || socketInitialized) return; // 防止组件卸载后执行或重复初始化
// 清除之前的定时器
if (reconnectedTimerRef.current) {
clearTimeout(reconnectedTimerRef.current);
socketInitialized = true; // 标记已初始化
logger.info('NotificationContext', '初始化 Socket 连接(异步执行,不阻塞首屏)');
// ========== 监听连接成功(首次连接 + 重连) ==========
socket.on('connect', () => {
setIsConnected(true);
setReconnectAttempt(0);
// 判断是首次连接还是重连
if (isFirstConnect.current) {
logger.info('NotificationContext', '首次连接成功', {
socketId: socket.getSocketId?.()
});
setConnectionStatus(CONNECTION_STATUS.CONNECTED);
isFirstConnect.current = false;
} else {
logger.info('NotificationContext', '重连成功');
setConnectionStatus(CONNECTION_STATUS.RECONNECTED);
// 清除之前的定时器
if (reconnectedTimerRef.current) {
clearTimeout(reconnectedTimerRef.current);
}
// 2秒后自动变回 CONNECTED
reconnectedTimerRef.current = setTimeout(() => {
setConnectionStatus(CONNECTION_STATUS.CONNECTED);
logger.info('NotificationContext', 'Auto-dismissed RECONNECTED status');
}, 2000);
}
// 2秒后自动变回 CONNECTED
reconnectedTimerRef.current = setTimeout(() => {
setConnectionStatus(CONNECTION_STATUS.CONNECTED);
logger.info('NotificationContext', 'Auto-dismissed RECONNECTED status');
}, 2000);
}
// ⚡ 重连后只需重新订阅,不需要重新注册监听器
// 使用 setTimeout(0) 确保 socketService 内部状态已同步
setTimeout(() => {
logger.info('NotificationContext', '重新订阅事件推送');
// ⚡ 重连后只需重新订阅,不需要重新注册监听器
logger.info('NotificationContext', '重新订阅事件推送');
if (socket.subscribeToEvents) {
socket.subscribeToEvents({
eventType: 'all',
importance: 'all',
onSubscribed: (data) => {
logger.info('NotificationContext', '订阅成功', data);
},
});
} else {
logger.error('NotificationContext', 'socket.subscribeToEvents 方法不可用');
}
});
// ========== 监听断开连接 ==========
socket.on('disconnect', (reason) => {
setIsConnected(false);
setConnectionStatus(CONNECTION_STATUS.DISCONNECTED);
logger.warn('NotificationContext', 'Socket 已断开', { reason });
});
// ========== 监听连接错误 ==========
socket.on('connect_error', (error) => {
logger.error('NotificationContext', 'Socket connect_error', error);
setConnectionStatus(CONNECTION_STATUS.RECONNECTING);
const attempts = socket.getReconnectAttempts?.() || 0;
setReconnectAttempt(attempts);
logger.info('NotificationContext', `重连中... (第 ${attempts} 次尝试)`);
});
// ========== 监听重连失败 ==========
socket.on('reconnect_failed', () => {
logger.error('NotificationContext', '重连失败');
setConnectionStatus(CONNECTION_STATUS.FAILED);
toast({
title: '连接失败',
description: '无法连接到服务器,请检查网络连接',
status: 'error',
duration: null,
isClosable: true,
});
});
// ========== 监听新事件推送(⚡ 只注册一次,使用 ref 访问最新函数) ==========
socket.on('new_event', (data) => {
logger.info('NotificationContext', '收到 new_event 事件', {
id: data?.id,
title: data?.title,
eventType: data?.event_type || data?.type,
importance: data?.importance
});
logger.debug('NotificationContext', '原始事件数据', data);
// ⚠️ 防御性检查:确保 ref 已初始化
if (!addNotificationRef.current || !adaptEventToNotificationRef.current) {
logger.error('NotificationContext', 'Ref 未初始化,跳过处理', {
addNotificationRef: !!addNotificationRef.current,
adaptEventToNotificationRef: !!adaptEventToNotificationRef.current,
});
return;
}
// ========== Socket层去重检查 ==========
const eventId = data.id || `${data.type || 'unknown'}_${data.publishTime || Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
if (!data.id) {
logger.warn('NotificationContext', 'Event missing ID, generated fallback', {
eventId,
eventType: data.type,
title: data.title,
});
}
if (processedEventIds.current.has(eventId)) {
logger.warn('NotificationContext', '重复事件已忽略', { eventId });
return;
}
processedEventIds.current.add(eventId);
logger.debug('NotificationContext', '事件已记录,防止重复处理', { 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层去重检查结束 ==========
// ✅ 使用 ref.current 访问最新的适配器函数(避免闭包陷阱)
logger.debug('NotificationContext', '正在转换事件格式');
const notification = adaptEventToNotificationRef.current(data);
logger.debug('NotificationContext', '转换后的通知对象', notification);
// ✅ 使用 ref.current 访问最新的 addNotification 函数
logger.debug('NotificationContext', '准备添加通知到队列');
addNotificationRef.current(notification);
logger.info('NotificationContext', '通知已添加到队列');
// ⚡ 调用所有注册的事件更新回调(用于通知其他组件刷新数据)
if (eventUpdateCallbacks.current.size > 0) {
logger.debug('NotificationContext', `触发 ${eventUpdateCallbacks.current.size} 个事件更新回调`);
eventUpdateCallbacks.current.forEach(callback => {
try {
callback(data);
} catch (error) {
logger.error('NotificationContext', '事件更新回调执行失败', error);
if (socket.subscribeToEvents) {
socket.subscribeToEvents({
eventType: 'all',
importance: 'all',
onSubscribed: (data) => {
logger.info('NotificationContext', '订阅成功', data);
},
});
} else {
logger.error('NotificationContext', 'socket.subscribeToEvents 方法不可用');
}
}, 0);
});
// ========== 监听断开连接 ==========
socket.on('disconnect', (reason) => {
setIsConnected(false);
setConnectionStatus(CONNECTION_STATUS.DISCONNECTED);
logger.warn('NotificationContext', 'Socket 已断开', { reason });
});
// ========== 监听连接错误 ==========
socket.on('connect_error', (error) => {
logger.error('NotificationContext', 'Socket connect_error', error);
setConnectionStatus(CONNECTION_STATUS.RECONNECTING);
const attempts = socket.getReconnectAttempts?.() || 0;
setReconnectAttempt(attempts);
logger.info('NotificationContext', `重连中... (第 ${attempts} 次尝试)`);
});
// ========== 监听重连失败 ==========
socket.on('reconnect_failed', () => {
logger.error('NotificationContext', '重连失败');
setConnectionStatus(CONNECTION_STATUS.FAILED);
toast({
title: '连接失败',
description: '无法连接到服务器,请检查网络连接',
status: 'error',
duration: null,
isClosable: true,
});
logger.debug('NotificationContext', '所有事件更新回调已触发');
}
});
});
// ========== 监听系统通知(兼容性 ==========
socket.on('system_notification', (data) => {
logger.info('NotificationContext', '收到系统通知', data);
// ========== 监听新事件推送(⚡ 只注册一次,使用 ref 访问最新函数 ==========
socket.on('new_event', (data) => {
logger.info('NotificationContext', '收到 new_event 事件', {
id: data?.id,
title: data?.title,
eventType: data?.event_type || data?.type,
importance: data?.importance
});
logger.debug('NotificationContext', '原始事件数据', data);
if (addNotificationRef.current) {
addNotificationRef.current(data);
} else {
logger.error('NotificationContext', 'addNotificationRef 未初始化');
}
});
// ⚠️ 防御性检查:确保 ref 已初始化
if (!addNotificationRef.current || !adaptEventToNotificationRef.current) {
logger.error('NotificationContext', 'Ref 未初始化,跳过处理', {
addNotificationRef: !!addNotificationRef.current,
adaptEventToNotificationRef: !!adaptEventToNotificationRef.current,
});
return;
}
logger.info('NotificationContext', '所有监听器已注册(只注册一次)');
// ========== Socket层去重检查 ==========
const eventId = data.id || `${data.type || 'unknown'}_${data.publishTime || Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
// ========== 获取最大重连次数 ==========
const maxAttempts = socket.getMaxReconnectAttempts?.() || Infinity;
setMaxReconnectAttempts(maxAttempts);
logger.info('NotificationContext', 'Max reconnect attempts', { maxAttempts });
if (!data.id) {
logger.warn('NotificationContext', 'Event missing ID, generated fallback', {
eventId,
eventType: data.type,
title: data.title,
});
}
// ========== 启动连接 ==========
logger.info('NotificationContext', '调用 socket.connect()');
socket.connect();
if (processedEventIds.current.has(eventId)) {
logger.warn('NotificationContext', '重复事件已忽略', { eventId });
return;
}
processedEventIds.current.add(eventId);
logger.debug('NotificationContext', '事件已记录,防止重复处理', { 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层去重检查结束 ==========
// ✅ 使用 ref.current 访问最新的适配器函数(避免闭包陷阱)
logger.debug('NotificationContext', '正在转换事件格式');
const notification = adaptEventToNotificationRef.current(data);
logger.debug('NotificationContext', '转换后的通知对象', notification);
// ✅ 使用 ref.current 访问最新的 addNotification 函数
logger.debug('NotificationContext', '准备添加通知到队列');
addNotificationRef.current(notification);
logger.info('NotificationContext', '通知已添加到队列');
// ⚡ 调用所有注册的事件更新回调(用于通知其他组件刷新数据)
if (eventUpdateCallbacks.current.size > 0) {
logger.debug('NotificationContext', `触发 ${eventUpdateCallbacks.current.size} 个事件更新回调`);
eventUpdateCallbacks.current.forEach(callback => {
try {
callback(data);
} catch (error) {
logger.error('NotificationContext', '事件更新回调执行失败', error);
}
});
logger.debug('NotificationContext', '所有事件更新回调已触发');
}
});
// ========== 监听系统通知(兼容性) ==========
socket.on('system_notification', (data) => {
logger.info('NotificationContext', '收到系统通知', data);
if (addNotificationRef.current) {
addNotificationRef.current(data);
} else {
logger.error('NotificationContext', 'addNotificationRef 未初始化');
}
});
logger.info('NotificationContext', '所有监听器已注册');
// ========== 获取最大重连次数 ==========
const maxAttempts = socket.getMaxReconnectAttempts?.() || Infinity;
setMaxReconnectAttempts(maxAttempts);
logger.info('NotificationContext', 'Max reconnect attempts', { maxAttempts });
// ========== 启动连接 ==========
logger.info('NotificationContext', '调用 socket.connect()');
socket.connect();
};
// ⚡ 使用 requestIdleCallback 在浏览器空闲时初始化 Socket
// 降级到 setTimeout(0) 以兼容不支持的浏览器(如 Safari
if ('requestIdleCallback' in window) {
idleCallbackId = window.requestIdleCallback(initSocketConnection, {
timeout: 3000 // 最多等待 3 秒,确保连接不会延迟太久
});
logger.debug('NotificationContext', 'Socket 初始化已排入 requestIdleCallback');
} else {
timeoutId = setTimeout(initSocketConnection, 0);
logger.debug('NotificationContext', 'Socket 初始化已排入 setTimeout(0)(降级模式)');
}
// ========== 清理函数(组件卸载时) ==========
return () => {
cleanupCalled = true;
logger.info('NotificationContext', '清理 Socket 连接');
// 取消待执行的初始化
if (idleCallbackId && 'cancelIdleCallback' in window) {
window.cancelIdleCallback(idleCallbackId);
}
if (timeoutId) {
clearTimeout(timeoutId);
}
// 清理 reconnected 状态定时器
if (reconnectedTimerRef.current) {
clearTimeout(reconnectedTimerRef.current);
@@ -966,6 +1015,39 @@ export const NotificationProvider = ({ children }) => {
};
}, [browserPermission, toast]);
// ⚡ 移动端禁用完整通知能力:返回空壳 Provider
// 注意:此判断必须在所有 Hooks 之后React 规则要求 Hooks 调用顺序一致)
if (isMobile) {
const emptyValue = {
notifications: [],
isConnected: false,
soundEnabled: false,
browserPermission: 'default',
connectionStatus: CONNECTION_STATUS.DISCONNECTED,
reconnectAttempt: 0,
maxReconnectAttempts: 0,
addNotification: () => null,
removeNotification: () => {},
clearAllNotifications: () => {},
toggleSound: () => {},
requestBrowserPermission: () => Promise.resolve('default'),
trackNotificationClick: () => {},
retryConnection: () => {},
showWelcomeGuide: () => {},
showCommunityGuide: () => {},
showFirstFollowGuide: () => {},
registerEventUpdateCallback: () => () => {},
unregisterEventUpdateCallback: () => {},
};
return (
<NotificationContext.Provider value={emptyValue}>
{children}
</NotificationContext.Provider>
);
}
// ========== 桌面端:完整通知功能 ==========
const value = {
notifications,
isConnected,

View File

@@ -82,7 +82,6 @@ export const useAuthEvents = ({ component = 'AuthFormContent', isMobile = false
...getBaseProperties(),
source,
});
logger.debug('useAuthEvents', '💬 WeChat Login Initiated', { source });
}, [track, getBaseProperties]);
// ==================== 手机验证码流程 ====================
@@ -186,7 +185,6 @@ export const useAuthEvents = ({ component = 'AuthFormContent', isMobile = false
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]);
/**
@@ -198,7 +196,6 @@ export const useAuthEvents = ({ component = 'AuthFormContent', isMobile = false
...getBaseProperties(),
session_id: sessionId?.substring(0, 8) + '...',
});
logger.debug('useAuthEvents', '📱 WeChat QR Code Scanned', { sessionId: sessionId?.substring(0, 8) });
}, [track, getBaseProperties]);
/**
@@ -212,7 +209,6 @@ export const useAuthEvents = ({ component = 'AuthFormContent', isMobile = false
session_id: sessionId?.substring(0, 8) + '...',
time_elapsed: timeElapsed,
});
logger.debug('useAuthEvents', '⏰ WeChat QR Code Expired', { sessionId: sessionId?.substring(0, 8), timeElapsed });
}, [track, getBaseProperties]);
/**
@@ -226,7 +222,6 @@ export const useAuthEvents = ({ component = 'AuthFormContent', isMobile = false
old_session_id: oldSessionId?.substring(0, 8) + '...',
new_session_id: newSessionId?.substring(0, 8) + '...',
});
logger.debug('useAuthEvents', '🔄 WeChat QR Code Refreshed');
}, [track, getBaseProperties]);
/**
@@ -242,7 +237,6 @@ export const useAuthEvents = ({ component = 'AuthFormContent', isMobile = false
old_status: oldStatus,
new_status: newStatus,
});
logger.debug('useAuthEvents', '🔄 WeChat Status Changed', { oldStatus, newStatus });
}, [track, getBaseProperties]);
/**
@@ -250,7 +244,6 @@ export const useAuthEvents = ({ component = 'AuthFormContent', isMobile = false
*/
const trackWechatH5Redirect = useCallback(() => {
track(ACTIVATION_EVENTS.WECHAT_H5_REDIRECT, getBaseProperties());
logger.debug('useAuthEvents', '🔗 WeChat H5 Redirect');
}, [track, getBaseProperties]);
// ==================== 登录/注册结果 ====================

35
src/hooks/useDevice.js Normal file
View File

@@ -0,0 +1,35 @@
/**
* useDevice Hook
*
* 封装设备类型检测,提供简洁的 API 供组件使用
*
* @example
* const { isMobile, isTablet, isDesktop, deviceType } = useDevice();
*
* if (isMobile) return <MobileView />;
* if (isTablet) return <TabletView />;
* return <DesktopView />;
*/
import { useSelector } from 'react-redux';
import {
selectIsMobile,
selectIsTablet,
selectIsDesktop,
selectDeviceType,
} from '@/store/slices/deviceSlice';
export const useDevice = () => {
const isMobile = useSelector(selectIsMobile);
const isTablet = useSelector(selectIsTablet);
const isDesktop = useSelector(selectIsDesktop);
const deviceType = useSelector(selectDeviceType);
return {
isMobile,
isTablet,
isDesktop,
deviceType,
};
};
export default useDevice;

View File

@@ -0,0 +1,57 @@
// src/hooks/useHomeResponsive.ts
// 首页响应式配置 Hook
import { useBreakpointValue } from '@chakra-ui/react';
import type { ResponsiveConfig } from '@/types/home';
/**
* 首页响应式配置 Hook
* 集中管理所有响应式断点值
*
* @returns 响应式配置对象
*/
export const useHomeResponsive = (): ResponsiveConfig => {
const heroHeight = useBreakpointValue({
base: '60vh',
md: '80vh',
lg: '100vh'
});
const headingSize = useBreakpointValue({
base: 'xl',
md: '3xl',
lg: '4xl'
});
const headingLetterSpacing = useBreakpointValue({
base: '-1px',
md: '-1.5px',
lg: '-2px'
});
const heroTextSize = useBreakpointValue({
base: 'md',
md: 'lg',
lg: 'xl'
});
const containerPx = useBreakpointValue({
base: 10,
md: 10,
lg: 10
});
const showDecorations = useBreakpointValue({
base: false,
md: true
});
return {
heroHeight,
headingSize,
headingLetterSpacing,
heroTextSize,
containerPx,
showDecorations
};
};

261
src/hooks/useIndexQuote.js Normal file
View File

@@ -0,0 +1,261 @@
// src/hooks/useIndexQuote.js
// 指数实时行情 Hook - 交易时间内每分钟自动更新
import { useState, useEffect, useCallback, useRef } from 'react';
import { logger } from '../utils/logger';
// 交易日数据会从后端获取,这里只做时间判断
const TRADING_SESSIONS = [
{ start: { hour: 9, minute: 30 }, end: { hour: 11, minute: 30 } },
{ start: { hour: 13, minute: 0 }, end: { hour: 15, minute: 0 } },
];
/**
* 判断当前时间是否在交易时段内
*/
const isInTradingSession = () => {
const now = new Date();
const currentMinutes = now.getHours() * 60 + now.getMinutes();
return TRADING_SESSIONS.some(session => {
const startMinutes = session.start.hour * 60 + session.start.minute;
const endMinutes = session.end.hour * 60 + session.end.minute;
return currentMinutes >= startMinutes && currentMinutes <= endMinutes;
});
};
/**
* 获取指数实时行情
*/
const fetchIndexRealtime = async (indexCode) => {
try {
const response = await fetch(`/api/index/${indexCode}/realtime`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result.success && result.data) {
return result.data;
}
return null;
} catch (error) {
logger.error('useIndexQuote', 'fetchIndexRealtime error', { indexCode, error: error.message });
return null;
}
};
/**
* 指数实时行情 Hook
*
* @param {string} indexCode - 指数代码,如 '000001' (上证指数) 或 '399001' (深证成指)
* @param {Object} options - 配置选项
* @param {number} options.refreshInterval - 刷新间隔(毫秒),默认 600001分钟
* @param {boolean} options.autoRefresh - 是否自动刷新,默认 true
*
* @returns {Object} { quote, loading, error, isTrading, refresh }
*/
export const useIndexQuote = (indexCode, options = {}) => {
const {
refreshInterval = 60000, // 默认1分钟
autoRefresh = true,
} = options;
const [quote, setQuote] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [isTrading, setIsTrading] = useState(false);
const intervalRef = useRef(null);
const isMountedRef = useRef(true);
// 加载数据
const loadQuote = useCallback(async () => {
if (!indexCode) return;
try {
const data = await fetchIndexRealtime(indexCode);
if (!isMountedRef.current) return;
if (data) {
setQuote(data);
setIsTrading(data.is_trading);
setError(null);
} else {
setError('无法获取行情数据');
}
} catch (err) {
if (isMountedRef.current) {
setError(err.message);
}
} finally {
if (isMountedRef.current) {
setLoading(false);
}
}
}, [indexCode]);
// 手动刷新
const refresh = useCallback(() => {
setLoading(true);
loadQuote();
}, [loadQuote]);
// 初始加载
useEffect(() => {
isMountedRef.current = true;
loadQuote();
return () => {
isMountedRef.current = false;
};
}, [loadQuote]);
// 自动刷新逻辑
useEffect(() => {
if (!autoRefresh || !indexCode) return;
// 清除旧的定时器
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
// 设置定时器,检查是否在交易时间内
const checkAndRefresh = () => {
const inSession = isInTradingSession();
setIsTrading(inSession);
if (inSession) {
loadQuote();
}
};
// 立即检查一次
checkAndRefresh();
// 设置定时刷新
intervalRef.current = setInterval(checkAndRefresh, refreshInterval);
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
};
}, [autoRefresh, indexCode, refreshInterval, loadQuote]);
return {
quote,
loading,
error,
isTrading,
refresh,
};
};
/**
* 批量获取多个指数的实时行情
*
* @param {string[]} indexCodes - 指数代码数组
* @param {Object} options - 配置选项
*/
export const useMultiIndexQuotes = (indexCodes = [], options = {}) => {
const {
refreshInterval = 60000,
autoRefresh = true,
} = options;
const [quotes, setQuotes] = useState({});
const [loading, setLoading] = useState(true);
const [isTrading, setIsTrading] = useState(false);
const intervalRef = useRef(null);
const isMountedRef = useRef(true);
// 批量加载数据
const loadQuotes = useCallback(async () => {
if (!indexCodes || indexCodes.length === 0) return;
try {
const results = await Promise.all(
indexCodes.map(code => fetchIndexRealtime(code))
);
if (!isMountedRef.current) return;
const newQuotes = {};
let hasTrading = false;
results.forEach((data, idx) => {
if (data) {
newQuotes[indexCodes[idx]] = data;
if (data.is_trading) hasTrading = true;
}
});
setQuotes(newQuotes);
setIsTrading(hasTrading);
} catch (err) {
logger.error('useMultiIndexQuotes', 'loadQuotes error', err);
} finally {
if (isMountedRef.current) {
setLoading(false);
}
}
}, [indexCodes]);
// 手动刷新
const refresh = useCallback(() => {
setLoading(true);
loadQuotes();
}, [loadQuotes]);
// 初始加载
useEffect(() => {
isMountedRef.current = true;
loadQuotes();
return () => {
isMountedRef.current = false;
};
}, [loadQuotes]);
// 自动刷新逻辑
useEffect(() => {
if (!autoRefresh || indexCodes.length === 0) return;
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
const checkAndRefresh = () => {
const inSession = isInTradingSession();
setIsTrading(inSession);
if (inSession) {
loadQuotes();
}
};
checkAndRefresh();
intervalRef.current = setInterval(checkAndRefresh, refreshInterval);
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
};
}, [autoRefresh, indexCodes, refreshInterval, loadQuotes]);
return {
quotes,
loading,
isTrading,
refresh,
};
};
export default useIndexQuote;

View File

@@ -12,6 +12,7 @@ import {
resetToFree,
selectSubscriptionInfo,
selectSubscriptionLoading,
selectSubscriptionLoaded,
selectSubscriptionError,
selectSubscriptionModalOpen
} from '../store/slices/subscriptionSlice';
@@ -66,21 +67,24 @@ export const useSubscription = () => {
// Redux 状态
const subscriptionInfo = useSelector(selectSubscriptionInfo);
const loading = useSelector(selectSubscriptionLoading);
const loaded = useSelector(selectSubscriptionLoaded);
const error = useSelector(selectSubscriptionError);
const isSubscriptionModalOpen = useSelector(selectSubscriptionModalOpen);
// 自动加载订阅信息
// 自动加载订阅信息(带防重复逻辑)
useEffect(() => {
if (isAuthenticated && user) {
// 用户已登录,加载订阅信息
dispatch(fetchSubscriptionInfo());
logger.debug('useSubscription', '加载订阅信息', { userId: user.id });
// 只在未加载且未在加载中时才请求,避免多个组件重复调用
if (!loaded && !loading) {
dispatch(fetchSubscriptionInfo());
logger.debug('useSubscription', '加载订阅信息', { userId: user.id });
}
} else {
// 用户未登录,重置为免费版
dispatch(resetToFree());
logger.debug('useSubscription', '用户未登录,重置为免费版');
}
}, [isAuthenticated, user, dispatch]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isAuthenticated, user?.id, dispatch, loaded, loading]);
// 获取订阅级别数值
const getSubscriptionLevel = (type = null) => {

View File

@@ -1,394 +0,0 @@
// 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;

View File

@@ -0,0 +1,382 @@
// src/hooks/useSubscriptionEvents.ts
// 订阅和支付事件追踪 Hook
import { useCallback } from 'react';
import { usePostHogTrack } from './usePostHogRedux';
import { RETENTION_EVENTS, REVENUE_EVENTS } from '../lib/constants';
/**
* 当前订阅信息
*/
interface SubscriptionInfo {
plan?: string;
status?: string;
}
/**
* useSubscriptionEvents Hook 配置选项
*/
interface UseSubscriptionEventsOptions {
currentSubscription?: SubscriptionInfo | null;
}
/**
* 支付信息
*/
interface PaymentInfo {
planName?: string;
paymentMethod?: string;
amount?: number;
billingCycle?: string;
orderId?: string;
transactionId?: string;
}
/**
* 订阅信息
*/
interface SubscriptionData {
plan?: string;
billingCycle?: string;
amount?: number;
startDate?: string;
endDate?: string;
previousEndDate?: string;
newEndDate?: string;
}
/**
* useSubscriptionEvents Hook 返回值
*/
interface UseSubscriptionEventsReturn {
trackPaywallShown: (feature: string, requiredPlan?: string, triggerLocation?: string) => void;
trackPaywallDismissed: (feature: string, closeMethod?: string) => void;
trackUpgradePlanClicked: (targetPlan?: string, source?: string, feature?: string) => void;
trackSubscriptionPageViewed: (source?: string) => void;
trackPricingPlanViewed: (planName: string, price?: number) => void;
trackPricingPlanSelected: (planName: string, billingCycle?: string, price?: number) => void;
trackPaymentPageViewed: (planName: string, amount?: number) => void;
trackPaymentMethodSelected: (paymentMethod: string, amount?: number) => void;
trackPaymentInitiated: (paymentInfo?: PaymentInfo) => void;
trackPaymentSuccessful: (paymentInfo?: PaymentInfo) => void;
trackPaymentFailed: (paymentInfo?: PaymentInfo, errorReason?: string) => void;
trackSubscriptionCreated: (subscription?: SubscriptionData) => void;
trackSubscriptionRenewed: (subscription?: SubscriptionData) => void;
trackSubscriptionCancelled: (reason?: string, cancelImmediately?: boolean) => void;
trackCouponApplied: (couponCode: string, discountAmount?: number, success?: boolean) => void;
}
/**
* 订阅和支付事件追踪 Hook
* @param options - 配置选项
* @returns 事件追踪处理函数集合
*/
export const useSubscriptionEvents = ({
currentSubscription = null,
}: UseSubscriptionEventsOptions = {}): UseSubscriptionEventsReturn => {
const { track } = usePostHogTrack();
/**
* 追踪付费墙展示
*/
const trackPaywallShown = useCallback(
(feature: string, requiredPlan: string = 'pro', triggerLocation: string = '') => {
if (!feature) {
console.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(),
});
},
[track, currentSubscription]
);
/**
* 追踪付费墙关闭
*/
const trackPaywallDismissed = useCallback(
(feature: string, closeMethod: string = 'dismiss') => {
if (!feature) {
console.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(),
});
},
[track, currentSubscription]
);
/**
* 追踪升级按钮点击
*/
const trackUpgradePlanClicked = useCallback(
(targetPlan: string = 'pro', source: string = '', feature: string = '') => {
track(REVENUE_EVENTS.PAYWALL_UPGRADE_CLICKED, {
current_plan: currentSubscription?.plan || 'free',
target_plan: targetPlan,
source,
feature: feature || null,
timestamp: new Date().toISOString(),
});
},
[track, currentSubscription]
);
/**
* 追踪订阅页面查看
*/
const trackSubscriptionPageViewed = useCallback(
(source: string = '') => {
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(),
});
},
[track, currentSubscription]
);
/**
* 追踪定价计划查看
*/
const trackPricingPlanViewed = useCallback(
(planName: string, price: number = 0) => {
if (!planName) {
console.warn('useSubscriptionEvents: trackPricingPlanViewed - planName is required');
return;
}
track('Pricing Plan Viewed', {
plan_name: planName,
price,
current_plan: currentSubscription?.plan || 'free',
timestamp: new Date().toISOString(),
});
},
[track, currentSubscription]
);
/**
* 追踪定价计划选择
*/
const trackPricingPlanSelected = useCallback(
(planName: string, billingCycle: string = 'monthly', price: number = 0) => {
if (!planName) {
console.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(),
});
},
[track, currentSubscription]
);
/**
* 追踪支付页面查看
*/
const trackPaymentPageViewed = useCallback(
(planName: string, amount: number = 0) => {
track(REVENUE_EVENTS.PAYMENT_PAGE_VIEWED, {
plan_name: planName,
amount,
current_plan: currentSubscription?.plan || 'free',
timestamp: new Date().toISOString(),
});
},
[track, currentSubscription]
);
/**
* 追踪支付方式选择
*/
const trackPaymentMethodSelected = useCallback(
(paymentMethod: string, amount: number = 0) => {
if (!paymentMethod) {
console.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(),
});
},
[track, currentSubscription]
);
/**
* 追踪支付发起
*/
const trackPaymentInitiated = useCallback(
(paymentInfo: 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(),
});
},
[track, currentSubscription]
);
/**
* 追踪支付成功
*/
const trackPaymentSuccessful = useCallback(
(paymentInfo: 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(),
});
},
[track, currentSubscription]
);
/**
* 追踪支付失败
*/
const trackPaymentFailed = useCallback(
(paymentInfo: PaymentInfo = {}, errorReason: string = '') => {
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(),
});
},
[track, currentSubscription]
);
/**
* 追踪订阅创建成功
*/
const trackSubscriptionCreated = useCallback(
(subscription: SubscriptionData = {}) => {
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(),
});
},
[track, currentSubscription]
);
/**
* 追踪订阅续费
*/
const trackSubscriptionRenewed = useCallback(
(subscription: SubscriptionData = {}) => {
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(),
});
},
[track]
);
/**
* 追踪订阅取消
*/
const trackSubscriptionCancelled = useCallback(
(reason: string = '', cancelImmediately: boolean = false) => {
track(REVENUE_EVENTS.SUBSCRIPTION_CANCELLED, {
plan_name: currentSubscription?.plan,
reason,
has_reason: Boolean(reason),
cancel_immediately: cancelImmediately,
timestamp: new Date().toISOString(),
});
},
[track, currentSubscription]
);
/**
* 追踪优惠券应用
*/
const trackCouponApplied = useCallback(
(couponCode: string, discountAmount: number = 0, success: boolean = true) => {
if (!couponCode) {
console.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(),
});
},
[track, currentSubscription]
);
return {
// 付费墙事件
trackPaywallShown,
trackPaywallDismissed,
trackUpgradePlanClicked,
// 订阅页面事件
trackSubscriptionPageViewed,
trackPricingPlanViewed,
trackPricingPlanSelected,
// 支付流程事件
trackPaymentPageViewed,
trackPaymentMethodSelected,
trackPaymentInitiated,
trackPaymentSuccessful,
trackPaymentFailed,
// 订阅管理事件
trackSubscriptionCreated,
trackSubscriptionRenewed,
trackSubscriptionCancelled,
// 优惠券事件
trackCouponApplied,
};
};
export default useSubscriptionEvents;

View File

@@ -3,8 +3,12 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
// 导入 Brainwave 样式(空文件,保留以避免错误)
import './styles/brainwave.css';
// ⚡ 性能监控:在应用启动时尽早标记
import { performanceMonitor } from './utils/performanceMonitor';
performanceMonitor.mark('app-start');
// ⚡ 已删除 brainwave.css项目未安装 Tailwind CSS该文件无效
// import './styles/brainwave.css';
// 导入 Select 下拉框颜色修复样式
import './styles/select-fix.css';
@@ -36,98 +40,26 @@ if (process.env.REACT_APP_ENABLE_DEBUG === 'true') {
function registerServiceWorker() {
// ⚠️ Mock 模式下跳过 Service Worker 注册(避免与 MSW 冲突)
if (process.env.REACT_APP_ENABLE_MOCK === 'true') {
console.log(
'%c[App] Mock 模式已启用,跳过通知 Service Worker 注册(避免与 MSW 冲突)',
'color: #FF9800; font-weight: bold;'
);
return;
}
// 仅在支持 Service Worker 的浏览器中注册
if ('serviceWorker' in navigator) {
// 在页面加载完成后注册
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/service-worker.js')
.then((registration) => {
console.log('[App] ✅ Service Worker 注册成功');
console.log('[App] Scope:', registration.scope);
// 检查当前激活状态
if (navigator.serviceWorker.controller) {
console.log('[App] ✅ Service Worker 已激活并控制页面');
} else {
console.log('[App] ⏳ Service Worker 已注册,等待激活...');
console.log('[App] 💡 刷新页面以激活 Service Worker');
// 监听 controller 变化Service Worker 激活后触发)
navigator.serviceWorker.addEventListener('controllerchange', () => {
console.log('[App] ✅ Service Worker 控制器已更新');
});
}
// 监听 Service Worker 更新
registration.addEventListener('updatefound', () => {
const newWorker = registration.installing;
console.log('[App] 🔄 发现 Service Worker 更新');
if (newWorker) {
newWorker.addEventListener('statechange', () => {
console.log(`[App] Service Worker 状态: ${newWorker.state}`);
if (newWorker.state === 'activated') {
console.log('[App] ✅ Service Worker 已激活');
// 如果有旧的 Service Worker 在控制页面,提示用户刷新
if (navigator.serviceWorker.controller) {
console.log('[App] 💡 Service Worker 已更新,建议刷新页面');
}
}
});
}
});
})
.catch((error) => {
console.error('[App] Service Worker 注册失败');
console.error('[App] 错误类型:', error.name);
console.error('[App] 错误信息:', error.message);
console.error('[App] 完整错误:', error);
// 额外检查:验证文件是否可访问
fetch('/service-worker.js', { method: 'HEAD' })
.then(response => {
if (response.ok) {
console.error('[App] Service Worker 文件存在但注册失败');
console.error('[App] 💡 可能的原因:');
console.error('[App] 1. Service Worker 文件有语法错误');
console.error('[App] 2. 浏览器不支持某些 Service Worker 特性');
console.error('[App] 3. HTTPS 证书问题Service Worker 需要 HTTPS');
} else {
console.error('[App] Service Worker 文件不存在HTTP', response.status, '');
}
})
.catch(fetchError => {
console.error('[App] 无法访问 Service Worker 文件:', fetchError.message);
});
console.error('[App] Service Worker 注册失败:', error.message);
});
});
} else {
console.warn('[App] Service Worker is not supported in this browser');
}
}
// 启动 Mock Service Worker如果启用
async function startApp() {
// 只在开发环境启动 MSW
if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_ENABLE_MOCK === 'true') {
const { startMockServiceWorker } = await import('./mocks/browser');
await startMockServiceWorker();
}
// Create root
// 渲染应用
function renderApp() {
const root = ReactDOM.createRoot(document.getElementById('root'));
// Render the app with Router wrapper
// ✅ StrictMode 已启用Chakra UI 2.10.9+ 已修复兼容性问题)
// StrictMode 已启用Chakra UI 2.10.9+ 已修复兼容性问题)
root.render(
<React.StrictMode>
<Router
@@ -141,9 +73,26 @@ async function startApp() {
</React.StrictMode>
);
// 注册 Service Worker
// 注册 Service Worker(非 Mock 模式)
registerServiceWorker();
}
// 启动应用
async function startApp() {
// ✅ 开发环境 Mock 模式:先启动 MSW再渲染应用
// 确保所有 API 请求(包括 AuthContext.checkSession都被正确拦截
if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_ENABLE_MOCK === 'true') {
try {
const { startMockServiceWorker } = await import('./mocks/browser');
await startMockServiceWorker();
} catch (error) {
console.error('[MSW] 启动失败:', error);
}
}
// 渲染应用
renderApp();
}
// 启动应用
startApp();

View File

@@ -35,7 +35,7 @@ export default function MainLayout() {
<MemoizedHomeNavbar />
{/* 页面内容区域 - flex: 1 占据剩余空间,包含错误边界、懒加载 */}
<Box flex="1" pt="72px">
<Box flex="1" pt="60px">
<ErrorBoundary>
<Suspense fallback={<PageLoader message="页面加载中..." />}>
<Outlet />

View File

@@ -47,18 +47,8 @@ export async function startMockServiceWorker() {
});
isStarted = true;
console.log(
'%c[MSW] Mock Service Worker 已启动 🎭 (警告模式)',
'color: #4CAF50; font-weight: bold; font-size: 14px;'
);
console.log(
'%c警告模式已定义 Mock → 返回假数据 | 未定义 Mock → 显示警告 ⚠️ | 允许 passthrough',
'color: #FF9800; font-weight: bold; font-size: 12px;'
);
console.log(
'%c查看 src/mocks/handlers/ 目录管理 Mock 接口',
'color: #2196F3; font-size: 12px;'
);
// 精简日志:只保留一行启动提示
console.log('%c[MSW] Mock 已启用 🎭', 'color: #4CAF50; font-weight: bold;');
} catch (error) {
console.error('[MSW] 启动失败:', error);
} finally {

View File

@@ -102,7 +102,6 @@ export function setCurrentUser(user) {
subscription_days_left: user.subscription_days_left || 0
};
localStorage.setItem('mock_current_user', JSON.stringify(normalizedUser));
console.log('[Mock State] 设置当前登录用户:', normalizedUser);
}
}

View File

@@ -613,14 +613,6 @@ export const accountHandlers = [
end_date: currentUser.subscription_end_date || null
};
console.log('[Mock API] 获取当前订阅详情:', {
user_id: currentUser.id,
phone: currentUser.phone,
subscription_type: userSubscriptionType,
subscription_status: subscriptionDetails.status,
days_left: subscriptionDetails.days_left
});
return HttpResponse.json({
success: true,
data: subscriptionDetails
@@ -704,4 +696,81 @@ export const accountHandlers = [
}
});
}),
// 21. 获取订阅套餐列表
http.get('/api/subscription/plans', async () => {
await delay(NETWORK_DELAY);
const plans = [
{
id: 1,
name: 'pro',
display_name: 'Pro 专业版',
description: '事件关联股票深度分析 | 历史事件智能对比复盘 | 事件概念关联与挖掘 | 概念板块个股追踪 | 概念深度研报与解读 | 个股异动实时预警',
monthly_price: 299,
yearly_price: 2699,
pricing_options: [
{ cycle_key: 'monthly', label: '月付', months: 1, price: 299, original_price: null, discount_percent: 0 },
{ cycle_key: 'quarterly', label: '季付', months: 3, price: 799, original_price: 897, discount_percent: 11 },
{ cycle_key: 'semiannual', label: '半年付', months: 6, price: 1499, original_price: 1794, discount_percent: 16 },
{ cycle_key: 'yearly', label: '年付', months: 12, price: 2699, original_price: 3588, discount_percent: 25 }
],
features: [
'新闻信息流',
'历史事件对比',
'事件传导链分析(AI)',
'事件-相关标的分析',
'相关概念展示',
'AI复盘功能',
'企业概览',
'个股深度分析(AI) - 50家/月',
'高效数据筛选工具',
'概念中心(548大概念)',
'历史时间轴查询 - 100天',
'涨停板块数据分析',
'个股涨停分析'
],
sort_order: 1
},
{
id: 2,
name: 'max',
display_name: 'Max 旗舰版',
description: '包含Pro版全部功能 | 事件传导链路智能分析 | 概念演变时间轴追溯 | 个股全方位深度研究 | 价小前投研助手无限使用 | 新功能优先体验权 | 专属客服一对一服务',
monthly_price: 599,
yearly_price: 5399,
pricing_options: [
{ cycle_key: 'monthly', label: '月付', months: 1, price: 599, original_price: null, discount_percent: 0 },
{ cycle_key: 'quarterly', label: '季付', months: 3, price: 1599, original_price: 1797, discount_percent: 11 },
{ cycle_key: 'semiannual', label: '半年付', months: 6, price: 2999, original_price: 3594, discount_percent: 17 },
{ cycle_key: 'yearly', label: '年付', months: 12, price: 5399, original_price: 7188, discount_percent: 25 }
],
features: [
'新闻信息流',
'历史事件对比',
'事件传导链分析(AI)',
'事件-相关标的分析',
'相关概念展示',
'板块深度分析(AI)',
'AI复盘功能',
'企业概览',
'个股深度分析(AI) - 无限制',
'高效数据筛选工具',
'概念中心(548大概念)',
'历史时间轴查询 - 无限制',
'概念高频更新',
'涨停板块数据分析',
'个股涨停分析'
],
sort_order: 2
}
];
console.log('[Mock] 获取订阅套餐列表:', plans.length, '个套餐');
return HttpResponse.json({
success: true,
data: plans
});
}),
];

View File

@@ -230,4 +230,377 @@ export const agentHandlers = [
count: history.length,
});
}),
// ==================== 投研会议室 API Handlers ====================
// GET /mcp/agent/meeting/roles - 获取会议角色配置
http.get('/mcp/agent/meeting/roles', async () => {
await delay(200);
return HttpResponse.json({
success: true,
roles: [
{
id: 'buffett',
name: '巴菲特',
nickname: '唱多者',
role_type: 'bull',
avatar: '/avatars/buffett.png',
color: '#10B981',
description: '主观多头,善于分析事件的潜在利好和长期价值',
},
{
id: 'big_short',
name: '大空头',
nickname: '大空头',
role_type: 'bear',
avatar: '/avatars/big_short.png',
color: '#EF4444',
description: '善于分析事件和财报中的风险因素,帮助投资者避雷',
},
{
id: 'simons',
name: '量化分析员',
nickname: '西蒙斯',
role_type: 'quant',
avatar: '/avatars/simons.png',
color: '#3B82F6',
description: '中性立场,使用量化分析工具分析技术指标',
},
{
id: 'leek',
name: '韭菜',
nickname: '牢大',
role_type: 'retail',
avatar: '/avatars/leek.png',
color: '#F59E0B',
description: '贪婪又讨厌亏损,热爱追涨杀跌的典型散户',
},
{
id: 'fund_manager',
name: '基金经理',
nickname: '决策者',
role_type: 'manager',
avatar: '/avatars/fund_manager.png',
color: '#8B5CF6',
description: '总结其他人的发言做出最终决策',
},
],
});
}),
// POST /mcp/agent/meeting/start - 启动投研会议
http.post('/mcp/agent/meeting/start', async ({ request }) => {
await delay(2000); // 模拟多角色讨论耗时
const body = await request.json();
const { topic, user_id } = body;
const sessionId = `meeting-${Date.now()}`;
const timestamp = new Date().toISOString();
// 生成模拟的多角色讨论消息
const messages = [
{
role_id: 'buffett',
role_name: '巴菲特',
nickname: '唱多者',
avatar: '/avatars/buffett.png',
color: '#10B981',
content: `关于「${topic}」,我认为这里存在显著的投资机会。从价值投资的角度看,我们应该关注以下几点:\n\n1. **长期价值**:该标的具有较强的护城河\n2. **盈利能力**ROE持续保持在较高水平\n3. **管理层质量**:管理团队稳定且执行力强\n\n我的观点是**看多**,建议逢低布局。`,
timestamp,
round_number: 1,
},
{
role_id: 'big_short',
role_name: '大空头',
nickname: '大空头',
avatar: '/avatars/big_short.png',
color: '#EF4444',
content: `等等,让我泼点冷水。关于「${topic}」,市场似乎过于乐观了:\n\n⚠️ **风险提示**\n1. 当前估值处于历史高位,安全边际不足\n2. 行业竞争加剧,利润率面临压力\n3. 宏观环境不确定性增加\n\n建议投资者**保持谨慎**,不要追高。`,
timestamp: new Date(Date.now() + 1000).toISOString(),
round_number: 1,
},
{
role_id: 'simons',
role_name: '量化分析员',
nickname: '西蒙斯',
avatar: '/avatars/simons.png',
color: '#3B82F6',
content: `从量化角度分析「${topic}」:\n\n📊 **技术指标**\n- MACD金叉形态动能向上\n- RSI58处于中性区域\n- 均线5日>10日>20日多头排列\n\n📈 **资金面**\n- 主力资金近5日净流入2.3亿\n- 北向资金:持续加仓\n\n**结论**短期技术面偏多但需关注60日均线支撑。`,
timestamp: new Date(Date.now() + 2000).toISOString(),
round_number: 1,
},
{
role_id: 'leek',
role_name: '韭菜',
nickname: '牢大',
avatar: '/avatars/leek.png',
color: '#F59E0B',
content: `哇!「${topic}」看起来要涨啊!\n\n🚀 我觉得必须满仓干!隔壁老王都赚翻了!\n\n不过话说回来...万一跌了怎么办?会不会套住?\n\n算了不管了,先冲一把再说!错过这村就没这店了!\n\n内心OS希望别当接盘侠...`,
timestamp: new Date(Date.now() + 3000).toISOString(),
round_number: 1,
},
{
role_id: 'fund_manager',
role_name: '基金经理',
nickname: '决策者',
avatar: '/avatars/fund_manager.png',
color: '#8B5CF6',
content: `## 投资建议总结\n\n综合各方观点,对于「${topic}」,我的判断如下:\n\n### 综合评估\n多空双方都提出了有价值的观点。技术面短期偏多,但估值确实需要关注。\n\n### 关键观点\n- ✅ 基本面优质,长期价值明确\n- ⚠️ 短期估值偏高,需要耐心等待\n- 📊 技术面处于上升趋势\n\n### 风险提示\n注意仓位控制,避免追高\n\n### 操作建议\n**观望为主**,等待回调至支撑位再考虑建仓\n\n### 信心指数7/10`,
timestamp: new Date(Date.now() + 4000).toISOString(),
round_number: 1,
is_conclusion: true,
},
];
return HttpResponse.json({
success: true,
session_id: sessionId,
messages,
round_number: 1,
is_concluded: true,
conclusion: messages[messages.length - 1],
});
}),
// POST /mcp/agent/meeting/continue - 继续会议讨论
http.post('/mcp/agent/meeting/continue', async ({ request }) => {
await delay(1500);
const body = await request.json();
const { topic, user_message, conversation_history } = body;
const roundNumber = Math.floor(conversation_history.length / 5) + 2;
const timestamp = new Date().toISOString();
const messages = [];
// 如果用户有插话,添加用户消息
if (user_message) {
messages.push({
role_id: 'user',
role_name: '用户',
nickname: '你',
avatar: '',
color: '#6366F1',
content: user_message,
timestamp,
round_number: roundNumber,
});
}
// 生成新一轮讨论
messages.push(
{
role_id: 'buffett',
role_name: '巴菲特',
nickname: '唱多者',
avatar: '/avatars/buffett.png',
color: '#10B981',
content: `感谢用户的补充。${user_message ? `关于"${user_message}"` : ''}我依然坚持看多的观点。从更长远的角度看,短期波动不影响长期价值。`,
timestamp: new Date(Date.now() + 1000).toISOString(),
round_number: roundNumber,
},
{
role_id: 'big_short',
role_name: '大空头',
nickname: '大空头',
avatar: '/avatars/big_short.png',
color: '#EF4444',
content: `用户提出了很好的问题。我要再次强调风险控制的重要性。当前市场情绪过热,建议保持警惕。`,
timestamp: new Date(Date.now() + 2000).toISOString(),
round_number: roundNumber,
},
{
role_id: 'fund_manager',
role_name: '基金经理',
nickname: '决策者',
avatar: '/avatars/fund_manager.png',
color: '#8B5CF6',
content: `## 第${roundNumber}轮讨论总结\n\n经过进一步讨论,我维持之前的判断:\n\n- 短期观望为主\n- 中长期可以考虑分批建仓\n- 严格控制仓位,设好止损\n\n**信心指数7.5/10**\n\n会议到此结束,感谢各位的参与!`,
timestamp: new Date(Date.now() + 3000).toISOString(),
round_number: roundNumber,
is_conclusion: true,
}
);
return HttpResponse.json({
success: true,
session_id: body.session_id,
messages,
round_number: roundNumber,
is_concluded: true,
conclusion: messages[messages.length - 1],
});
}),
// POST /mcp/agent/meeting/stream - 流式会议接口V2
http.post('/mcp/agent/meeting/stream', async ({ request }) => {
const body = await request.json();
const { topic, user_id } = body;
const sessionId = `meeting-${Date.now()}`;
// 定义会议角色和他们的消息
const roleMessages = [
{
role_id: 'buffett',
role_name: '巴菲特',
content: `关于「${topic}」,我认为这里存在显著的投资机会。从价值投资的角度看,我们应该关注以下几点:\n\n1. **长期价值**:该标的具有较强的护城河\n2. **盈利能力**ROE持续保持在较高水平\n3. **管理层质量**:管理团队稳定且执行力强\n\n我的观点是**看多**,建议逢低布局。`,
tools: [
{ name: 'search_china_news', result: { articles: [{ title: '相关新闻1' }, { title: '相关新闻2' }] } },
{ name: 'get_stock_basic_info', result: { pe: 25.6, pb: 3.2, roe: 18.5 } },
],
},
{
role_id: 'big_short',
role_name: '大空头',
content: `等等,让我泼点冷水。关于「${topic}」,市场似乎过于乐观了:\n\n⚠️ **风险提示**\n1. 当前估值处于历史高位,安全边际不足\n2. 行业竞争加剧,利润率面临压力\n3. 宏观环境不确定性增加\n\n建议投资者**保持谨慎**,不要追高。`,
tools: [
{ name: 'get_stock_financial_index', result: { debt_ratio: 45.2, current_ratio: 1.8 } },
],
},
{
role_id: 'simons',
role_name: '量化分析员',
content: `从量化角度分析「${topic}」:\n\n📊 **技术指标**\n- MACD金叉形态动能向上\n- RSI58处于中性区域\n- 均线5日>10日>20日多头排列\n\n📈 **资金面**\n- 主力资金近5日净流入2.3亿\n- 北向资金:持续加仓\n\n**结论**短期技术面偏多但需关注60日均线支撑。`,
tools: [
{ name: 'get_stock_trade_data', result: { volume: 1234567, turnover: 5.2 } },
{ name: 'get_concept_statistics', result: { concepts: ['AI概念', '半导体'], avg_change: 2.3 } },
],
},
{
role_id: 'leek',
role_name: '韭菜',
content: `哇!「${topic}」看起来要涨啊!\n\n🚀 我觉得必须满仓干!隔壁老王都赚翻了!\n\n不过话说回来...万一跌了怎么办?会不会套住?\n\n算了不管了,先冲一把再说!错过这村就没这店了!\n\n内心OS希望别当接盘侠...`,
tools: [], // 韭菜不用工具
},
{
role_id: 'fund_manager',
role_name: '基金经理',
content: `## 投资建议总结\n\n综合各方观点,对于「${topic}」,我的判断如下:\n\n### 综合评估\n多空双方都提出了有价值的观点。技术面短期偏多,但估值确实需要关注。\n\n### 关键观点\n- ✅ 基本面优质,长期价值明确\n- ⚠️ 短期估值偏高,需要耐心等待\n- 📊 技术面处于上升趋势\n\n### 风险提示\n注意仓位控制,避免追高\n\n### 操作建议\n**观望为主**,等待回调至支撑位再考虑建仓\n\n### 信心指数7/10`,
tools: [
{ name: 'search_research_reports', result: { reports: [{ title: '深度研报1' }] } },
],
is_conclusion: true,
},
];
// 创建 SSE 流
const encoder = new TextEncoder();
const stream = new ReadableStream({
async start(controller) {
// 发送 session_start
controller.enqueue(encoder.encode(`data: ${JSON.stringify({
type: 'session_start',
session_id: sessionId,
})}\n\n`));
await delay(300);
// 发送 order_decided
controller.enqueue(encoder.encode(`data: ${JSON.stringify({
type: 'order_decided',
order: roleMessages.map(r => r.role_id),
})}\n\n`));
await delay(300);
// 依次发送每个角色的消息
for (const role of roleMessages) {
// speaking_start
controller.enqueue(encoder.encode(`data: ${JSON.stringify({
type: 'speaking_start',
role_id: role.role_id,
role_name: role.role_name,
})}\n\n`));
await delay(200);
// 发送工具调用
const toolCallResults = [];
for (const tool of role.tools) {
const toolCallId = `tc-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
const execTime = 0.5 + Math.random() * 0.5;
// tool_call_start
controller.enqueue(encoder.encode(`data: ${JSON.stringify({
type: 'tool_call_start',
role_id: role.role_id,
tool_call_id: toolCallId,
tool_name: tool.name,
arguments: {},
})}\n\n`));
await delay(500);
// tool_call_result
controller.enqueue(encoder.encode(`data: ${JSON.stringify({
type: 'tool_call_result',
role_id: role.role_id,
tool_call_id: toolCallId,
tool_name: tool.name,
result: { success: true, data: tool.result },
status: 'success',
execution_time: execTime,
})}\n\n`));
toolCallResults.push({
tool_call_id: toolCallId,
tool_name: tool.name,
result: { success: true, data: tool.result },
status: 'success',
execution_time: execTime,
});
await delay(200);
}
// 流式发送内容
const chunks = role.content.match(/.{1,20}/g) || [];
for (const chunk of chunks) {
controller.enqueue(encoder.encode(`data: ${JSON.stringify({
type: 'content_delta',
role_id: role.role_id,
content: chunk,
})}\n\n`));
await delay(30);
}
// message_complete
controller.enqueue(encoder.encode(`data: ${JSON.stringify({
type: 'message_complete',
role_id: role.role_id,
message: {
role_id: role.role_id,
role_name: role.role_name,
content: role.content,
tool_calls: toolCallResults,
is_conclusion: role.is_conclusion || false,
},
})}\n\n`));
await delay(500);
}
// round_end
controller.enqueue(encoder.encode(`data: ${JSON.stringify({
type: 'round_end',
round_number: 1,
is_concluded: false,
})}\n\n`));
controller.close();
},
});
return new Response(stream, {
headers: {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
},
});
}),
];

View File

@@ -12,7 +12,8 @@ import {
} from '../data/users';
// 模拟网络延迟(毫秒)
const NETWORK_DELAY = 500;
// ⚡ 开发环境使用较短延迟,加快首屏加载速度
const NETWORK_DELAY = 50;
export const authHandlers = [
// ==================== 手机验证码登录 ====================
@@ -31,21 +32,6 @@ export const authHandlers = [
expiresAt: Date.now() + 5 * 60 * 1000 // 5分钟后过期
});
// 超醒目的验证码提示 - 方便开发调试
console.log(
`%c\n` +
`╔════════════════════════════════════════════╗\n` +
`║ 验证码: ${code.padEnd(22)}\n` +
`╚════════════════════════════════════════════╝\n`,
'color: #ffffff; background: #16a34a; font-weight: bold; font-size: 16px; padding: 20px; line-height: 1.8;'
);
// 额外的高亮提示
console.log(
`%c 验证码: ${code} `,
'color: #ffffff; background: #dc2626; font-weight: bold; font-size: 24px; padding: 15px 30px; border-radius: 8px; margin: 10px 0;'
);
return HttpResponse.json({
success: true,
message: `验证码已发送到 ${credential}Mock: ${code}`,
@@ -141,8 +127,6 @@ export const authHandlers = [
const body = await request.json();
const { credential, verification_code, login_type } = body;
console.log('[Mock] 验证码登录:', { credential, verification_code, login_type });
// 验证验证码
const storedCode = mockVerificationCodes.get(credential);
if (!storedCode) {
@@ -194,11 +178,8 @@ export const authHandlers = [
subscription_days_left: 0
};
mockUsers[credential] = user;
console.log('[Mock] 创建新用户:', user);
}
console.log('[Mock] 登录成功:', user);
// 设置当前登录用户
setCurrentUser(user);
@@ -345,25 +326,22 @@ export const authHandlers = [
});
}),
// 6. 获取微信 H5 授权 URL
http.post('/api/auth/wechat/h5-auth-url', async ({ request }) => {
// 6. 获取微信 H5 授权 URL(手机浏览器用)
http.post('/api/auth/wechat/h5-auth', async ({ request }) => {
await delay(NETWORK_DELAY);
const body = await request.json();
const { redirect_url } = body;
const state = generateWechatSessionId();
const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=mock&redirect_uri=${encodeURIComponent(redirect_url)}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;
// Mock 模式下直接返回前端回调地址(模拟授权成功)
const authUrl = `${redirect_url}?wechat_login=success&state=${state}`;
console.log('[Mock] 生成微信 H5 授权 URL:', authUrl);
return HttpResponse.json({
code: 0,
message: '成功',
data: {
auth_url: authUrl,
state
}
auth_url: authUrl,
state
});
}),
@@ -371,13 +349,11 @@ export const authHandlers = [
// 7. 检查 SessionAuthContext 使用的正确端点)
http.get('/api/auth/session', async () => {
await delay(300);
await delay(NETWORK_DELAY); // ⚡ 使用统一延迟配置
// 获取当前登录用户
const currentUser = getCurrentUser();
console.log('[Mock] 检查 Session:', currentUser);
if (currentUser) {
return HttpResponse.json({
success: true,
@@ -395,13 +371,11 @@ export const authHandlers = [
// 8. 检查 Session旧端点保留兼容
http.get('/api/auth/check-session', async () => {
await delay(300);
await delay(NETWORK_DELAY); // ⚡ 使用统一延迟配置
// 获取当前登录用户
const currentUser = getCurrentUser();
console.log('[Mock] 检查 Session (旧端点):', currentUser);
if (currentUser) {
return HttpResponse.json({
success: true,
@@ -432,91 +406,3 @@ export const authHandlers = [
});
})
];
// ==================== Mock 调试工具(仅开发环境) ====================
/**
* 暴露全局API方便手动触发微信扫码模拟
* 使用方式:
* 1. 浏览器控制台输入window.mockWechatScan()
* 2. 或者在组件中调用window.mockWechatScan(sessionId)
*/
if (process.env.NODE_ENV === 'development' || process.env.REACT_APP_ENABLE_MOCK === 'true') {
window.mockWechatScan = (sessionId) => {
// 如果没有传入sessionId尝试获取最新的session
let targetSessionId = sessionId;
if (!targetSessionId) {
// 获取最新创建的session
const sessions = Array.from(mockWechatSessions.entries());
if (sessions.length === 0) {
console.warn('[Mock API] 没有活跃的微信session请先获取二维码');
return false;
}
// 按创建时间排序,获取最新的
const latestSession = sessions.sort((a, b) => b[1].createdAt - a[1].createdAt)[0];
targetSessionId = latestSession[0];
}
const session = mockWechatSessions.get(targetSessionId);
if (!session) {
console.error('[Mock API] Session不存在:', targetSessionId);
return false;
}
if (session.status !== 'waiting') {
console.warn('[Mock API] Session状态不是waiting当前状态:', session.status);
return false;
}
// 立即触发扫码
session.status = 'scanned';
console.log(`[Mock API] ✅ 模拟扫码成功: ${targetSessionId}`);
// 1秒后自动确认登录
setTimeout(() => {
const session2 = mockWechatSessions.get(targetSessionId);
if (session2 && session2.status === 'scanned') {
session2.status = 'authorized'; // ✅ 使用 'authorized' 状态,与自动扫码流程保持一致
session2.user = {
id: 999,
nickname: '微信测试用户',
wechat_openid: 'mock_openid_' + targetSessionId,
avatar_url: 'https://ui-avatars.com/api/?name=微信测试用户&size=150&background=4299e1&color=fff',
phone: null,
email: null,
has_wechat: true,
created_at: new Date().toISOString(),
subscription_type: 'free',
subscription_status: 'active',
subscription_end_date: null,
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);
return true;
};
// 暴露获取当前sessions的方法调试用
window.getMockWechatSessions = () => {
const sessions = Array.from(mockWechatSessions.entries()).map(([id, session]) => ({
sessionId: id,
status: session.status,
createdAt: new Date(session.createdAt).toLocaleString(),
hasUser: !!session.user
}));
console.table(sessions);
return sessions;
};
console.log('%c[Mock API] 微信登录调试工具已加载', 'color: #00D084; font-weight: bold');
console.log('%c使用方法:', 'color: #666');
console.log(' window.mockWechatScan() - 触发最新session的扫码');
console.log(' window.mockWechatScan(sessionId) - 触发指定session的扫码');
console.log(' window.getMockWechatSessions() - 查看所有活跃的sessions');
}

View File

@@ -0,0 +1,22 @@
// src/mocks/handlers/bytedesk.js
/**
* Bytedesk 客服 Widget MSW Handler
* 使用 passthrough 让请求通过到真实服务器,消除 MSW 警告
*/
import { http, passthrough } from 'msw';
export const bytedeskHandlers = [
// Bytedesk API 请求 - 直接 passthrough
// 匹配 /bytedesk/* 路径(通过代理访问后端)
http.all('/bytedesk/*', () => {
return passthrough();
}),
// Bytedesk 外部 CDN/服务请求
http.all('https://www.weiyuai.cn/*', () => {
return passthrough();
}),
];
export default bytedeskHandlers;

View File

@@ -16,6 +16,7 @@ import { limitAnalyseHandlers } from './limitAnalyse';
import { posthogHandlers } from './posthog';
import { externalHandlers } from './external';
import { agentHandlers } from './agent';
import { bytedeskHandlers } from './bytedesk';
// 可以在这里添加更多的 handlers
// import { userHandlers } from './user';
@@ -36,5 +37,6 @@ export const handlers = [
...posthogHandlers,
...externalHandlers,
...agentHandlers,
...bytedeskHandlers, // ⚡ Bytedesk 客服 Widget passthrough
// ...userHandlers,
];

View File

@@ -188,46 +188,3 @@ export const paymentHandlers = [
});
})
];
// ==================== Mock 调试工具(仅开发环境) ====================
/**
* 暴露全局API方便手动触发支付成功
* 使用方式window.mockPaymentSuccess(orderId)
*/
if (process.env.NODE_ENV === 'development' || process.env.REACT_APP_ENABLE_MOCK === 'true') {
window.mockPaymentSuccess = (orderId) => {
const order = mockOrders.get(orderId);
if (!order) {
console.error('[Mock Payment] 订单不存在:', orderId);
return false;
}
if (order.status !== 'pending') {
console.warn('[Mock Payment] 订单状态不是待支付:', order.status);
return false;
}
order.status = 'paid';
order.paid_at = new Date().toISOString();
console.log('[Mock Payment] ✅ 支付成功:', orderId);
return true;
};
window.getMockOrders = () => {
const orders = Array.from(mockOrders.entries()).map(([id, order]) => ({
orderId: id,
status: order.status,
amount: order.amount,
plan: `${order.plan_name} - ${order.billing_cycle}`,
createdAt: new Date(order.created_at).toLocaleString()
}));
console.table(orders);
return orders;
};
console.log('%c[Mock Payment] 支付调试工具已加载', 'color: #00D084; font-weight: bold');
console.log('%c使用方法:', 'color: #666');
console.log(' window.mockPaymentSuccess(orderId) - 手动触发订单支付成功');
console.log(' window.getMockOrders() - 查看所有模拟订单');
}

View File

@@ -9,43 +9,44 @@ import React from 'react';
*/
export const lazyComponents = {
// Home 模块
HomePage: React.lazy(() => import('../views/Home/HomePage')),
CenterDashboard: React.lazy(() => import('../views/Dashboard/Center')),
ProfilePage: React.lazy(() => import('../views/Profile')),
SettingsPage: React.lazy(() => import('../views/Settings/SettingsPage')),
Subscription: React.lazy(() => import('../views/Pages/Account/Subscription')),
PrivacyPolicy: React.lazy(() => import('../views/Pages/PrivacyPolicy')),
UserAgreement: React.lazy(() => import('../views/Pages/UserAgreement')),
WechatCallback: React.lazy(() => import('../views/Pages/WechatCallback')),
// ⚡ 直接引用 HomePage无需中间层静态页面不需要骨架屏
HomePage: React.lazy(() => import('@views/Home/HomePage')),
CenterDashboard: React.lazy(() => import('@views/Dashboard/Center')),
ProfilePage: React.lazy(() => import('@views/Profile')),
SettingsPage: React.lazy(() => import('@views/Settings/SettingsPage')),
Subscription: React.lazy(() => import('@views/Pages/Account/Subscription')),
PrivacyPolicy: React.lazy(() => import('@views/Pages/PrivacyPolicy')),
UserAgreement: React.lazy(() => import('@views/Pages/UserAgreement')),
WechatCallback: React.lazy(() => import('@views/Pages/WechatCallback')),
// 社区/内容模块
Community: React.lazy(() => import('../views/Community')),
ConceptCenter: React.lazy(() => import('../views/Concept')),
StockOverview: React.lazy(() => import('../views/StockOverview')),
LimitAnalyse: React.lazy(() => import('../views/LimitAnalyse')),
Community: React.lazy(() => import('@views/Community')),
ConceptCenter: React.lazy(() => import('@views/Concept')),
StockOverview: React.lazy(() => import('@views/StockOverview')),
LimitAnalyse: React.lazy(() => import('@views/LimitAnalyse')),
// 交易模块
TradingSimulation: React.lazy(() => import('../views/TradingSimulation')),
TradingSimulation: React.lazy(() => import('@views/TradingSimulation')),
// 事件模块
EventDetail: React.lazy(() => import('../views/EventDetail')),
EventDetail: React.lazy(() => import('@views/EventDetail')),
// 公司相关模块
CompanyIndex: React.lazy(() => import('../views/Company')),
ForecastReport: React.lazy(() => import('../views/Company/ForecastReport')),
FinancialPanorama: React.lazy(() => import('../views/Company/FinancialPanorama')),
MarketDataView: React.lazy(() => import('../views/Company/MarketDataView')),
CompanyIndex: React.lazy(() => import('@views/Company')),
ForecastReport: React.lazy(() => import('@views/Company/ForecastReport')),
FinancialPanorama: React.lazy(() => import('@views/Company/FinancialPanorama')),
MarketDataView: React.lazy(() => import('@views/Company/MarketDataView')),
// Agent模块
AgentChat: React.lazy(() => import('../views/AgentChat')),
AgentChat: React.lazy(() => import('@views/AgentChat')),
// 价值论坛模块
ValueForum: React.lazy(() => import('../views/ValueForum')),
ForumPostDetail: React.lazy(() => import('../views/ValueForum/PostDetail')),
PredictionTopicDetail: React.lazy(() => import('../views/ValueForum/PredictionTopicDetail')),
ValueForum: React.lazy(() => import('@views/ValueForum')),
ForumPostDetail: React.lazy(() => import('@views/ValueForum/PostDetail')),
PredictionTopicDetail: React.lazy(() => import('@views/ValueForum/PredictionTopicDetail')),
// 数据浏览器模块
DataBrowser: React.lazy(() => import('../views/DataBrowser')),
DataBrowser: React.lazy(() => import('@views/DataBrowser')),
};
/**

View File

@@ -10,25 +10,12 @@ import { socketService } from '../socketService';
export const socket = socketService;
export { socketService };
// ⚡ 新增:暴露 Socket 实例到 window用于调试和验证
// ⚡ 暴露 Socket 实例到 window用于调试和验证
// 注意:移除首屏加载时的日志,避免阻塞感知
if (typeof window !== 'undefined') {
window.socket = socketService;
window.socketService = socketService;
console.log(
'%c[Socket Service] ✅ Socket instance exposed to window',
'color: #4CAF50; font-weight: bold; font-size: 14px;'
);
console.log(' 📍 window.socket:', window.socket);
console.log(' 📍 window.socketService:', window.socketService);
console.log(' 📍 Socket.IO instance:', window.socket?.socket);
console.log(' 📍 Connection status:', window.socket?.connected ? '✅ Connected' : '❌ Disconnected');
// 日志已移除,如需调试可在控制台执行: console.log(window.socket)
}
// 打印当前使用的服务类型
console.log(
'%c[Socket Service] Using REAL Socket Service',
'color: #4CAF50; font-weight: bold; font-size: 12px;'
);
export default socket;

View File

@@ -56,17 +56,8 @@ class SocketService {
// 注册所有暂存的事件监听器(保留 pendingListeners不清空
if (this.pendingListeners.length > 0) {
console.log(`[socketService] 📦 注册 ${this.pendingListeners.length} 个暂存的事件监听器`);
this.pendingListeners.forEach(({ event, callback }) => {
// 直接在 Socket.IO 实例上注册(避免递归调用 this.on()
const wrappedCallback = (...args) => {
console.log(`%c[socketService] 🔔 收到原始事件: ${event}`, 'color: #2196F3; font-weight: bold;');
console.log(`[socketService] 事件数据 (${event}):`, ...args);
callback(...args);
};
this.socket.on(event, wrappedCallback);
console.log(`[socketService] ✓ 已注册事件监听器: ${event}`);
this.socket.on(event, callback);
});
// ⚠️ 重要:不清空 pendingListeners保留用于重连
}
@@ -82,15 +73,8 @@ class SocketService {
this.customReconnectTimer = null;
}
logger.info('socketService', 'Socket.IO connected successfully', {
socketId: this.socket.id,
});
console.log(`%c[socketService] ✅ WebSocket 已连接`, 'color: #4CAF50; font-weight: bold;');
console.log('[socketService] Socket ID:', this.socket.id);
logger.info('socketService', 'Socket.IO connected', { socketId: this.socket.id });
// ⚠️ 已移除自动订阅,让 NotificationContext 负责订阅
// this.subscribeToAllEvents();
});
// 监听断开连接
@@ -174,25 +158,12 @@ class SocketService {
);
if (!exists) {
logger.info('socketService', 'Socket not ready, queuing listener', { event });
console.log(`[socketService] 📦 Socket 未初始化,暂存事件监听器: ${event}`);
this.pendingListeners.push({ event, callback });
} else {
console.log(`[socketService] ⚠️ 监听器已存在,跳过: ${event}`);
}
return;
}
// 包装回调函数,添加日志
const wrappedCallback = (...args) => {
console.log(`%c[socketService] 🔔 收到原始事件: ${event}`, 'color: #2196F3; font-weight: bold;');
console.log(`[socketService] 事件数据 (${event}):`, ...args);
callback(...args);
};
this.socket.on(event, wrappedCallback);
logger.info('socketService', `Event listener added: ${event}`);
console.log(`[socketService] ✓ 已注册事件监听器: ${event}`);
this.socket.on(event, callback);
}
/**
@@ -210,8 +181,6 @@ class SocketService {
} else {
this.socket.off(event);
}
logger.info('socketService', `Event listener removed: ${event}`);
}
/**
@@ -231,8 +200,6 @@ class SocketService {
} else {
this.socket.emit(event, data);
}
logger.info('socketService', `Event emitted: ${event}`, data);
}
/**
@@ -329,10 +296,18 @@ class SocketService {
onSubscribed,
} = options;
if (!this.socket || !this.connected) {
logger.warn('socketService', 'Cannot subscribe: socket not connected');
// 自动连接
this.connect();
// ⚡ 改进状态检查:同时检查 this.connected 和 socket.connected
// 解决 connect 回调中 this.connected 尚未更新的竞争条件
const isReady = this.socket && (this.socket.connected || this.connected);
if (!isReady) {
logger.debug('socketService', 'Socket 尚未就绪,等待连接后订阅');
if (!this.socket) {
// 自动连接
this.connect();
}
// 等待连接成功后再订阅
this.socket.once('connect', () => {
this._doSubscribe(eventType, importance, onNewEvent, onSubscribed);
@@ -347,65 +322,31 @@ 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);
// 发送订阅请求
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');
});
// 监听新事件推送
// ⚠️ 注意:不要移除其他地方注册的 new_event 监听器(如 NotificationContext
// 多个监听器可以共存,都会被触发
if (onNewEvent) {
console.log('[SocketService DEBUG] 设置 new_event 监听器');
// ⚠️ 已移除 this.socket.off('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');
}
/**
@@ -432,11 +373,7 @@ class SocketService {
// 监听取消订阅确认
this.socket.once('unsubscription_confirmed', (data) => {
logger.info('socketService', 'Unsubscription confirmed', data);
// 移除新事件监听器
this.socket.off('new_event');
if (onUnsubscribed) {
onUnsubscribed(data);
}
@@ -454,22 +391,10 @@ class SocketService {
* @returns {Function} 取消订阅的函数
*/
subscribeToAllEvents(onNewEvent) {
console.log('%c[socketService] 🔔 自动订阅所有事件...', 'color: #FF9800; font-weight: bold;');
// 如果没有提供回调,添加一个默认的日志回调
const defaultCallback = (event) => {
console.log('%c[socketService] 📨 收到新事件(默认回调)', 'color: #4CAF50; font-weight: bold;');
console.log('[socketService] 事件数据:', event);
};
this.subscribeToEvents({
eventType: 'all',
importance: 'all',
onNewEvent: onNewEvent || defaultCallback,
onSubscribed: (data) => {
console.log('%c[socketService] ✅ 订阅成功!', 'color: #4CAF50; font-weight: bold;');
console.log('[socketService] 订阅确认:', data);
},
onNewEvent: onNewEvent || (() => {}),
});
// 返回取消订阅的清理函数

Some files were not shown because too many files have changed in this diff Show More