Merge branch 'feature' into develop

* feature: (33 commits)
  修改总结
  feat: API优化
  feat: mock数据添加
  feat: 修改内容：添加风险提示到K线图弹窗
  feat:修复mock数据
  feat:  访问"概念中心"页面      2. 点击任意概念卡片进入概念详情      3. 点击"历史时间轴"按钮（需要Max会员权限）      4. 查看弹窗底部是否显示风险提示 & mock数据处理
  feat: 事件中心股票详情添加风险提示
  feat: 涨停分析/股票详情弹窗 添加风险提示
  feat: 添加mock数据
  feat: 事件中心 事件详情底部添加风险提示
  feat: 添加mock数据
  feat: 核心页面添加风险提示
  feat: 创建风险提示通用组件
  feat: bugfix
  feat: 优化packge.json
  feat: package.json 优化方案
  feat:  任务 1: 集成 TradingSimulation 追踪事件任务 2: 传递 tradingEvents 到子组件
  feat: 统一的Hook架构
  feat: 集成导航上报
  feat: 已完成的工作:   - ✅ 创建了4个P1优先级Hook（搜索、导航、个人资料、订阅）   - ✅ 将其中3个Hook集成到5个组件中   - ✅ 在个人资料、设置、搜索、订阅流程中添加了15+个追踪点   - ✅ 覆盖了完整的收入漏斗（支付发起 → 成功 → 订阅创建）   - ✅ 添加了留存追踪（个人资料更新、设置修改、搜索查询）
  ...

.claude/settings.local.json

@@ -0,0 +1,20 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(//Users/qiye/**)",
+      "Bash(npm run lint:check)",
+      "Bash(npm run build)",
+      "Bash(chmod +x /Users/qiye/Desktop/jzqy/vf_react/scripts/*.sh)",
+      "Bash(node scripts/parseIndustryCSV.js)",
+      "Bash(cat:*)",
+      "Bash(npm cache clean --force)",
+      "Bash(npm install)",
+      "Bash(npm run start:mock)",
+      "Bash(npm install fsevents@latest --save-optional --force)",
+      "Bash(python -m py_compile:*)",
+      "Bash(ps -p 20502,53360 -o pid,command)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.env.production

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

.gitignore

@@ -35,9 +35,6 @@ pnpm-debug.log*
 *.swo
 *~
 
-# Claude Code 配置
-.claude/settings.local.json
-
 # macOS
 .DS_Store
 
@@ -48,6 +45,5 @@ Thumbs.db
 *.md
 !README.md
 !CLAUDE.md
-!docs/**/*.md
 
 src/assets/img/original-backup/

README.md

@@ -1,198 +1,3 @@
 # vf_react
 
 前端
-
----
-
-## 📚 重构记录
-
-### 2025-10-30: EventList.js 组件化重构
-
-#### 🎯 重构目标
-将 Community 社区页面的 `EventList.js` 组件（1095行）拆分为多个可复用的子组件，提高代码可维护性和复用性。
-
-#### 📊 重构成果
-- **重构前**: 1095 行
-- **重构后**: 497 行
-- **减少**: 598 行 (-54.6%)
-
----
-
-### 📁 新增目录结构
-
-```
-src/views/Community/components/EventCard/
-├── index.js                      (60行)  - EventCard 统一入口，智能路由紧凑/详细模式
-│
-├── ──────────────────────────────────────────────────────────
-│   原子组件 (Atoms) - 7个基础UI组件
-├── ──────────────────────────────────────────────────────────
-│
-├── EventTimeline.js              (60行)  - 时间轴显示组件
-│   └── Props: createdAt, timelineStyle, borderColor, minHeight
-│
-├── EventImportanceBadge.js       (100行) - 重要性等级标签 (S/A/B/C/D)
-│   └── Props: importance, showTooltip, showIcon, size
-│
-├── EventStats.js                 (60行)  - 统计信息 (浏览/帖子/关注)
-│   └── Props: viewCount, postCount, followerCount, size, spacing
-│
-├── EventFollowButton.js          (40行)  - 关注按钮
-│   └── Props: isFollowing, followerCount, onToggle, size, showCount
-│
-├── EventPriceDisplay.js          (130行) - 价格变动显示 (平均/最大/周)
-│   └── Props: avgChange, maxChange, weekChange, compact, inline
-│
-├── EventDescription.js           (60行)  - 描述文本 (支持展开/收起)
-│   └── Props: description, textColor, minLength, noOfLines
-│
-├── EventHeader.js                (100行) - 事件标题头部
-│   └── Props: title, importance, onTitleClick, linkColor, compact
-│
-├── ──────────────────────────────────────────────────────────
-│   组合组件 (Molecules) - 2个卡片组件
-├── ──────────────────────────────────────────────────────────
-│
-├── CompactEventCard.js           (160行) - 紧凑模式事件卡片
-│   ├── 使用: EventTimeline, EventHeader, EventStats, EventFollowButton
-│   └── Props: event, index, isFollowing, followerCount, callbacks...
-│
-└── DetailedEventCard.js          (170行) - 详细模式事件卡片
-    ├── 使用: EventTimeline, EventHeader, EventStats, EventFollowButton,
-    │        EventPriceDisplay, EventDescription
-    └── Props: event, isFollowing, followerCount, callbacks...
-```
-
-**总计**: 10个文件，940行代码
-
----
-
-### 🔧 重构的文件
-
-#### `src/views/Community/components/EventList.js`
-
-**移除的内容**:
-- ❌ `renderPriceChange` 函数 (~60行)
-- ❌ `renderCompactEvent` 函数 (~200行)
-- ❌ `renderDetailedEvent` 函数 (~300行)
-- ❌ `expandedDescriptions` state（展开状态管理移至子组件）
-- ❌ 冗余的 Chakra UI 导入
-
-**保留的功能**:
-- ✅ WebSocket 实时推送
-- ✅ 浏览器原生通知
-- ✅ 关注状态管理 (followingMap, followCountMap)
-- ✅ 分页控制
-- ✅ 视图模式切换（紧凑/详细）
-- ✅ 推送权限管理
-
-**新增引入**:
-```javascript
-import EventCard from './EventCard';
-```
-
----
-
-### 🏗️ 架构改进
-
-#### 重构前（单体架构）
-```
-EventList.js (1095行)
-├── 业务逻辑 (WebSocket, 关注, 通知)
-├── renderCompactEvent (200行)
-│   └── 所有UI代码内联
-├── renderDetailedEvent (300行)
-│   └── 所有UI代码内联
-└── renderPriceChange (60行)
-```
-
-#### 重构后（组件化架构）
-```
-EventList.js (497行) - 容器组件
-├── 业务逻辑 (WebSocket, 关注, 通知)
-└── 渲染逻辑
-    └── EventCard (智能路由)
-        ├── CompactEventCard (紧凑模式)
-        │   ├── EventTimeline
-        │   ├── EventHeader (compact)
-        │   ├── EventStats
-        │   └── EventFollowButton
-        └── DetailedEventCard (详细模式)
-            ├── EventTimeline
-            ├── EventHeader (detailed)
-            ├── EventStats
-            ├── EventFollowButton
-            ├── EventPriceDisplay
-            └── EventDescription
-```
-
----
-
-### ✨ 优势
-
-1. **可维护性** ⬆️
-   - 每个组件职责单一（单一职责原则）
-   - 代码行数减少 54.6%
-   - 组件边界清晰，易于理解
-
-2. **可复用性** ⬆️
-   - 原子组件可在其他页面复用
-   - 例如：EventImportanceBadge 可用于任何需要显示事件等级的地方
-
-3. **可测试性** ⬆️
-   - 小组件更容易编写单元测试
-   - 可独立测试每个组件的渲染和交互
-
-4. **性能优化** ⬆️
-   - React 可以更精确地追踪变化
-   - 减少不必要的重渲染
-   - 每个子组件可独立优化（useMemo, React.memo）
-
-5. **开发效率** ⬆️
-   - 新增功能时只需修改对应的子组件
-   - 代码审查更高效
-   - 降低了代码冲突的概率
-
----
-
-### 📦 依赖工具函数
-
-本次重构使用了之前提取的工具函数：
-
-```
-src/utils/priceFormatters.js          (105行)
-├── getPriceChangeColor(value)        - 获取价格变化文字颜色
-├── getPriceChangeBg(value)           - 获取价格变化背景颜色
-├── getPriceChangeBorderColor(value)  - 获取价格变化边框颜色
-├── formatPriceChange(value)          - 格式化价格为字符串
-└── PriceArrow({ value })             - 价格涨跌箭头组件
-
-src/constants/animations.js           (72行)
-├── pulseAnimation                    - 脉冲动画（S/A级标签）
-├── fadeIn                            - 渐入动画
-├── slideInUp                         - 从下往上滑入
-├── scaleIn                           - 缩放进入
-└── spin                              - 旋转动画（Loading）
-```
-
----
-
-### 🚀 下一步优化计划
-
-Phase 1 已完成，后续可继续优化：
-
-- **Phase 2**: 拆分 StockDetailPanel.js (1067行 → ~250行)
-- **Phase 3**: 拆分 InvestmentCalendar.js (827行 → ~200行)
-- **Phase 4**: 拆分 MidjourneyHeroSection.js (813行 → ~200行)
-- **Phase 5**: 拆分 UnifiedSearchBox.js (679行 → ~180行)
-
----
-
-### 🔗 相关提交
-
-- `feat: 拆分 EventList.js/提取价格相关工具函数到 utils/priceFormatters.js`
-- `feat(EventList): 创建事件卡片原子组件`
-- `feat(EventList): 创建事件卡片组合组件`
-- `refactor(EventList): 使用组件化架构替换内联渲染函数`
-
----

app.py

@@ -97,6 +97,38 @@ def get_trading_day_near_date(target_date):
     return trading_days[-1] if trading_days else None
 
 
+def get_previous_trading_day(target_date):
+    """
+    获取指定日期的上一个交易日
+    如果目标日期不是交易日，先找到对应的交易日，然后返回前一个交易日
+    """
+    if not trading_days:
+        load_trading_days()
+
+    if not trading_days:
+        return None
+
+    # 如果目标日期是datetime，转换为date
+    if isinstance(target_date, datetime):
+        target_date = target_date.date()
+
+    # 确保目标日期是交易日
+    if target_date not in trading_days_set:
+        target_date = get_trading_day_near_date(target_date)
+        if not target_date:
+            return None
+
+    # 查找上一个交易日
+    try:
+        index = trading_days.index(target_date)
+        if index > 0:
+            return trading_days[index - 1]
+        else:
+            return None  # 没有上一个交易日
+    except ValueError:
+        return None
+
+
 # 应用启动时加载交易日数据
 load_trading_days()
 
@@ -2602,9 +2634,13 @@ def get_wechat_qrcode():
     # 生成唯一state参数
     state = uuid.uuid4().hex
 
+    print(f"🆕 [QRCODE] 生成新的微信二维码, state={state[:8]}...")
+
     # URL编码回调地址
     redirect_uri = urllib.parse.quote_plus(WECHAT_REDIRECT_URI)
 
+    print(f"🔗 [QRCODE] 回调地址: {WECHAT_REDIRECT_URI}")
+
     # 构建微信授权URL
     wechat_auth_url = (
         f"https://open.weixin.qq.com/connect/qrconnect?"
@@ -2622,6 +2658,8 @@ def get_wechat_qrcode():
         'wechat_unionid': None
     }
 
+    print(f"✅ [QRCODE] session 已存储, 当前总数: {len(wechat_qr_sessions)}")
+
     return jsonify({"code":0,
                     "data":
     {
@@ -2685,6 +2723,8 @@ def check_wechat_scan():
         del wechat_qr_sessions[session_id]
         return jsonify({'status': 'expired'}), 200
 
+    print(f"📡 [CHECK] session_id: {session_id[:8]}..., status: {session['status']}, user_info: {session.get('user_info')}")
+
     return jsonify({
         'status': session['status'],
         'user_info': session.get('user_info'),
@@ -2743,12 +2783,17 @@ def wechat_callback():
 
     # 验证state
     if state not in wechat_qr_sessions:
+        print(f"❌ [CALLBACK] state 不在 wechat_qr_sessions 中: {state[:8]}...")
+        print(f"   当前 sessions: {list(wechat_qr_sessions.keys())}")
         return redirect('/auth/signin?error=session_expired')
 
     session_data = wechat_qr_sessions[state]
 
+    print(f"✅ [CALLBACK] 找到 session_data, mode={session_data.get('mode')}")
+
     # 检查过期
     if time.time() > session_data['expires']:
+        print(f"❌ [CALLBACK] session 已过期")
         del wechat_qr_sessions[state]
         return redirect('/auth/signin?error=session_expired')
 
@@ -2777,6 +2822,8 @@ def wechat_callback():
             print(f"❌ 获取微信用户信息失败: openid={token_data['openid']}")
             return redirect('/auth/signin?error=userinfo_failed')
 
+        print(f"✅ [CALLBACK] 获取用户信息成功, nickname={user_info.get('nickname', 'N/A')}")
+
         # 查找或创建用户 / 或处理绑定
         openid = token_data['openid']
         unionid = user_info.get('unionid') or token_data.get('unionid')
@@ -2827,7 +2874,8 @@ def wechat_callback():
             user = User.query.filter_by(wechat_open_id=openid).first()
 
         if not user:
-            # 创建新用户
+            # 创建新用户（自动注册）
+            is_new_user = True
             # 先清理微信昵称
             raw_nickname = user_info.get('nickname', '微信用户')
             # 创建临时用户实例以使用清理方法
@@ -2877,8 +2925,22 @@ def wechat_callback():
                 session_item['user_info'] = {'user_id': user.id}
                 print(f"✅ 微信扫码状态已更新: {session_item['status']}, user_id: {user.id}")
 
-        # 直接跳转到首页
+        # 返回一个简单的成功页面（前端轮询会检测到状态变化）
-        return redirect('/home')
+        return '''
+        <html>
+        <head><title>授权成功</title></head>
+        <body>
+            <h2>微信授权成功</h2>
+            <p>请返回原页面继续操作...</p>
+            <script>
+                // 尝试关闭窗口（如果是弹窗的话）
+                setTimeout(function() {
+                    window.close();
+                }, 1000);
+            </script>
+        </body>
+        </html>
+        ''', 200
 
     except Exception as e:
         print(f"❌ 微信登录失败: {e}")
@@ -2904,16 +2966,16 @@ def login_with_wechat():
         return jsonify({'success': False, 'error': 'session_id不能为空'}), 400
 
     # 验证session
-    session = wechat_qr_sessions.get(session_id)
+    wechat_session = wechat_qr_sessions.get(session_id)
-    if not session:
+    if not wechat_session:
         return jsonify({'success': False, 'error': '会话不存在或已过期'}), 400
 
     # 检查session状态
-    if session['status'] not in ['login_ready', 'register_ready']:
+    if wechat_session['status'] not in ['login_success', 'register_success']:
         return jsonify({'success': False, 'error': '会话状态无效'}), 400
 
     # 检查是否有用户信息
-    user_info = session.get('user_info')
+    user_info = wechat_session.get('user_info')
     if not user_info or not user_info.get('user_id'):
         return jsonify({'success': False, 'error': '用户信息不完整'}), 400
 
@@ -2925,18 +2987,33 @@ def login_with_wechat():
         # 更新最后登录时间
         user.update_last_seen()
 
-        # 清除session
+        # 设置 Flask session
+        session.permanent = True
+        session['user_id'] = user.id
+        session['username'] = user.username
+        session['logged_in'] = True
+        session['wechat_login'] = True  # 标记是微信登录
+
+        # Flask-Login 登录
+        login_user(user, remember=True)
+
+        # 判断是否为新用户
+        is_new_user = user_info.get('is_new_user', False)
+
+        # 清除 wechat_qr_sessions
         del wechat_qr_sessions[session_id]
 
         # 生成登录响应
         response_data = {
             'success': True,
-            'message': '登录成功' if session['status'] == 'login_ready' else '注册并登录成功',
+            'message': '注册成功' if is_new_user else '登录成功',
+            'isNewUser': is_new_user,
             'user': {
                 'id': user.id,
                 'username': user.username,
                 'nickname': user.nickname or user.username,
                 'email': user.email,
+                'phone': user.phone,
                 'avatar_url': user.avatar_url,
                 'has_wechat': True,
                 'wechat_open_id': user.wechat_open_id,
@@ -6550,6 +6627,9 @@ def api_get_events():
         event_status = request.args.get('status', 'active')
         importance = request.args.get('importance', 'all')
 
+        # 交易日筛选参数
+        tday = request.args.get('tday')  # 交易日，格式：YYYY-MM-DD 或 YYYY/M/D
+
         # 日期筛选参数
         start_date = request.args.get('start_date')
         end_date = request.args.get('end_date')
@@ -6599,14 +6679,7 @@ def api_get_events():
             query = query.filter_by(status=event_status)
         if event_type != 'all':
             query = query.filter_by(event_type=event_type)
-        # 支持多个重要性级别筛选，用逗号分隔（如 importance=S,A）
         if importance != 'all':
-            if ',' in importance:
-                # 多个重要性级别
-                importance_list = [imp.strip() for imp in importance.split(',') if imp.strip()]
-                query = query.filter(Event.importance.in_(importance_list))
-            else:
-                # 单个重要性级别
             query = query.filter_by(importance=importance)
         if creator_id:
             query = query.filter_by(creator_id=creator_id)
@@ -6642,7 +6715,41 @@ def api_get_events():
                     text(f"JSON_SEARCH(keywords, 'one', '%{search_query}%') IS NOT NULL")
                 )
             )
-        if recent_days:
+
+        # 交易日筛选逻辑
+        if tday:
+            from datetime import datetime, timedelta, time
+            try:
+                # 解析交易日参数，支持 YYYY-MM-DD 和 YYYY/M/D 格式
+                if '/' in tday:
+                    target_tday = datetime.strptime(tday, '%Y/%m/%d').date()
+                else:
+                    target_tday = datetime.strptime(tday, '%Y-%m-%d').date()
+
+                # 获取该交易日的上一个交易日
+                prev_tday = get_previous_trading_day(target_tday)
+
+                if prev_tday:
+                    # 计算时间范围：[前一个交易日 15:00, 当前交易日 15:00]
+                    start_datetime = datetime.combine(prev_tday, time(15, 0, 0))
+                    end_datetime = datetime.combine(target_tday, time(15, 0, 0))
+
+                    query = query.filter(
+                        Event.created_at >= start_datetime,
+                        Event.created_at <= end_datetime
+                    )
+                else:
+                    # 如果没有上一个交易日，则筛选当天的事件
+                    start_datetime = datetime.combine(target_tday, time(0, 0, 0))
+                    end_datetime = datetime.combine(target_tday, time(15, 0, 0))
+                    query = query.filter(
+                        Event.created_at >= start_datetime,
+                        Event.created_at <= end_datetime
+                    )
+            except (ValueError, TypeError) as e:
+                # 日期格式错误，忽略该参数
+                app.logger.warning(f"无效的交易日参数: {tday}, 错误: {e}")
+        elif recent_days:
             from datetime import datetime, timedelta
             cutoff_date = datetime.now() - timedelta(days=recent_days)
             query = query.filter(Event.created_at >= cutoff_date)
@@ -6748,6 +6855,8 @@ def api_get_events():
             applied_filters['type'] = event_type
         if importance != 'all':
             applied_filters['importance'] = importance
+        if tday:
+            applied_filters['tday'] = tday
         if start_date:
             applied_filters['start_date'] = start_date
         if end_date:

craco.config.js

@@ -107,28 +107,11 @@ module.exports = {
         ...webpackConfig.resolve,
         alias: {
           ...webpackConfig.resolve.alias,
-          // 根目录别名
           '@': path.resolve(__dirname, 'src'),
-
-          // 功能模块别名（按字母顺序）
-          '@assets': path.resolve(__dirname, 'src/assets'),
           '@components': path.resolve(__dirname, 'src/components'),
-          '@constants': path.resolve(__dirname, 'src/constants'),
-          '@contexts': path.resolve(__dirname, 'src/contexts'),
-          '@data': path.resolve(__dirname, 'src/data'),
-          '@hooks': path.resolve(__dirname, 'src/hooks'),
-          '@layouts': path.resolve(__dirname, 'src/layouts'),
-          '@lib': path.resolve(__dirname, 'src/lib'),
-          '@mocks': path.resolve(__dirname, 'src/mocks'),
-          '@providers': path.resolve(__dirname, 'src/providers'),
-          '@routes': path.resolve(__dirname, 'src/routes'),
-          '@services': path.resolve(__dirname, 'src/services'),
-          '@store': path.resolve(__dirname, 'src/store'),
-          '@styles': path.resolve(__dirname, 'src/styles'),
-          '@theme': path.resolve(__dirname, 'src/theme'),
-          '@utils': path.resolve(__dirname, 'src/utils'),
-          '@variables': path.resolve(__dirname, 'src/variables'),
           '@views': path.resolve(__dirname, 'src/views'),
+          '@assets': path.resolve(__dirname, 'src/assets'),
+          '@contexts': path.resolve(__dirname, 'src/contexts'),
         },
         // 减少文件扩展名搜索
         extensions: ['.js', '.jsx', '.json'],
@@ -244,13 +227,6 @@ module.exports = {
         secure: false,
         logLevel: 'debug',
       },
-      '/concept-api': {
-        target: 'http://49.232.185.254:6801',
-        changeOrigin: true,
-        secure: false,
-        logLevel: 'debug',
-        pathRewrite: { '^/concept-api': '' },
-      },
     },
   },
 };

docs/DEPLOYMENT.md

@@ -1,648 +0,0 @@
-# VF React 自动化部署指南
-
-## 📋 目录
-
-- [概述](#概述)
-- [快速开始](#快速开始)
-- [详细使用说明](#详细使用说明)
-- [配置说明](#配置说明)
-- [故障排查](#故障排查)
-- [FAQ](#faq)
-
----
-
-## 概述
-
-本项目提供了完整的自动化部署方案，让您可以在本地电脑一键部署到生产环境，无需登录服务器。
-
-### 核心特性
-
-- ✅ **本地一键部署** - 运行 `npm run deploy` 即可完成部署
-- ✅ **智能备份** - 每次部署前自动备份，保留最近 5 个版本
-- ✅ **快速回滚** - 10 秒内回滚到任意历史版本
-- ✅ **企业微信通知** - 部署成功/失败实时推送消息
-- ✅ **安全可靠** - 部署前确认，失败自动回滚
-- ✅ **详细日志** - 完整记录每次部署过程
-
----
-
-## 快速开始
-
-### 1. 首次配置（5 分钟）
-
-运行配置向导，按提示输入配置信息：
-
-```bash
-npm run deploy:setup
-```
-
-配置向导会询问：
-- 服务器地址和 SSH 信息
-- 部署路径配置
-- 企业微信通知配置（可选）
-
-配置完成后会自动初始化服务器环境。
-
-### 2. 日常部署（2-3 分钟）
-
-```bash
-npm run deploy
-```
-
-执行后会：
-1. 检查本地代码状态
-2. 显示部署预览，需要输入 `yes` 确认
-3. 自动连接服务器
-4. 拉取代码、构建、部署
-5. 发送企业微信通知
-
-### 3. 回滚版本（10 秒）
-
-回滚到上一个版本：
-```bash
-npm run rollback
-```
-
-回滚到指定版本：
-```bash
-npm run rollback -- 2  # 回滚到前 2 个版本
-```
-
-查看可回滚的版本列表：
-```bash
-npm run rollback -- list
-```
-
----
-
-## 详细使用说明
-
-### 首次配置
-
-#### 运行配置向导
-
-```bash
-npm run deploy:setup
-```
-
-#### 配置过程
-
-**1. 服务器配置**
-```
-请输入服务器 IP 或域名: your-server.com
-请输入 SSH 用户名 [ubuntu]: ubuntu
-请输入 SSH 端口 [22]: 22
-检测到 SSH 密钥: ~/.ssh/id_rsa
-是否使用该密钥? (y/n) [y]: y
-
-正在测试 SSH 连接...
-✓ SSH 连接测试成功
-```
-
-**2. 部署路径配置**
-```
-Git 仓库路径 [/home/ubuntu/vf_react]:
-生产环境路径 [/var/www/valuefrontier.cn]:
-备份目录 [/home/ubuntu/deployments]:
-日志目录 [/home/ubuntu/deploy-logs]:
-部署分支 [feature]:
-保留备份数量 [5]:
-```
-
-**3. 企业微信通知配置**
-```
-是否启用企业微信通知? (y/n) [n]: y
-请输入企业微信 Webhook URL: https://qyapi.weixin.qq.com/...
-
-正在测试企业微信通知...
-✓ 企业微信通知测试成功
-```
-
-**4. 初始化服务器**
-```
-正在创建服务器目录...
-✓ 服务器目录创建完成
-设置脚本执行权限...
-✓ 服务器环境初始化完成
-```
-
-### 部署到生产环境
-
-#### 执行部署
-
-```bash
-npm run deploy
-```
-
-#### 部署流程
-
-**步骤 1: 检查本地代码**
-```
-[1/8] 检查本地代码
-当前分支: feature
-最新提交: c93f689 - feat: 添加消息推送能力
-提交作者: qiye
-✓ 本地代码检查完成
-```
-
-**步骤 2: 显示部署预览**
-```
-[2/8] 部署预览
-
-╔════════════════════════════════════════════════════════════════╗
-║                         部署预览                                ║
-╚════════════════════════════════════════════════════════════════╝
-
-项目信息:
-  项目名称: vf_react
-  部署环境: 生产环境
-  目标服务器: ubuntu@your-server.com
-
-代码信息:
-  当前分支: feature
-  提交版本: c93f689
-  提交信息: feat: 添加消息推送能力
-  提交作者: qiye
-
-部署路径:
-  Git 仓库: /home/ubuntu/vf_react
-  生产目录: /var/www/valuefrontier.cn
-
-════════════════════════════════════════════════════════════════
-
-确认部署到生产环境? (yes/no): yes
-```
-
-**步骤 3-7: 自动执行部署**
-```
-[3/8] 测试 SSH 连接
-✓ SSH 连接成功
-
-[4/8] 上传部署脚本
-✓ 部署脚本上传完成
-
-[5/8] 执行远程部署
-
-========================================
-  服务器端部署脚本
-========================================
-
-[INFO] 创建必要的目录...
-[SUCCESS] 目录创建完成
-[INFO] 检查 Git 仓库...
-[SUCCESS] Git 仓库检查通过
-[INFO] 切换到 feature 分支...
-[SUCCESS] 已在 feature 分支
-[INFO] 拉取最新代码...
-[SUCCESS] 代码更新完成
-[INFO] 安装依赖...
-[SUCCESS] 依赖检查完成
-[INFO] 构建项目...
-[SUCCESS] 构建完成
-[INFO] 备份当前版本...
-[SUCCESS] 备份完成: /home/ubuntu/deployments/backup-20250121-143020
-[INFO] 部署到生产环境...
-[SUCCESS] 部署完成
-[INFO] 清理旧备份...
-[SUCCESS] 旧备份清理完成
-
-========================================
-  部署成功！
-========================================
-提交: c93f689 - feat: 添加消息推送能力
-备份: /home/ubuntu/deployments/backup-20250121-143020
-耗时: 2分15秒
-
-✓ 远程部署完成
-
-[6/8] 发送部署通知
-✓ 企业微信通知已发送
-
-[7/8] 清理临时文件
-✓ 清理完成
-
-[8/8] 部署完成
-
-╔════════════════════════════════════════════════════════════════╗
-║                      🎉 部署成功！                              ║
-╚════════════════════════════════════════════════════════════════╝
-
-部署信息:
-  版本: c93f689
-  分支: feature
-  提交: feat: 添加消息推送能力
-  作者: qiye
-  时间: 2025-01-21 14:33:45
-  耗时: 2分15秒
-
-访问地址:
-  https://valuefrontier.cn
-```
-
-### 版本回滚
-
-#### 查看可回滚的版本
-
-```bash
-npm run rollback -- list
-```
-
-输出：
-```
-可用的备份版本：
-
-  1. backup-20250121-153045 (2025-01-21 15:30:45) [当前版本]
-  2. backup-20250121-150030 (2025-01-21 15:00:30)
-  3. backup-20250121-143020 (2025-01-21 14:30:20)
-  4. backup-20250121-140010 (2025-01-21 14:00:10)
-  5. backup-20250121-133000 (2025-01-21 13:30:00)
-```
-
-#### 回滚到上一个版本
-
-```bash
-npm run rollback
-```
-
-或指定版本：
-```bash
-npm run rollback -- 2  # 回滚到第 2 个版本
-```
-
-#### 回滚流程
-
-```
-╔════════════════════════════════════════════════════════════════╗
-║                       版本回滚工具                              ║
-╚════════════════════════════════════════════════════════════════╝
-
-可用的备份版本：
-  1. backup-20250121-153045 (2025-01-21 15:30:45) [当前版本]
-  2. backup-20250121-150030 (2025-01-21 15:00:30)
-  3. backup-20250121-143020 (2025-01-21 14:30:20)
-
-确认回滚到版本 #2? (yes/no): yes
-
-[INFO] 正在执行回滚...
-
-========================================
-  服务器端回滚脚本
-========================================
-
-[INFO] 开始回滚到版本 #2...
-[INFO] 目标版本: backup-20250121-150030
-[INFO] 清空生产目录: /var/www/valuefrontier.cn
-[INFO] 恢复备份文件...
-[SUCCESS] 回滚完成
-
-========================================
-  回滚成功！
-========================================
-目标版本: backup-20250121-150030
-
-╔════════════════════════════════════════════════════════════════╗
-║                     🎉 回滚成功！                               ║
-╚════════════════════════════════════════════════════════════════╝
-
-回滚信息:
-  目标版本: backup-20250121-150030
-  回滚时间: 2025-01-21 15:35:20
-
-访问地址:
-  https://valuefrontier.cn
-```
-
----
-
-## 配置说明
-
-### 配置文件位置
-
-```
-.env.deploy          # 部署配置文件（不提交到 Git）
-.env.deploy.example  # 配置文件示例
-```
-
-### 配置项说明
-
-#### 服务器配置
-
-```bash
-# 服务器 IP 或域名
-SERVER_HOST=your-server.com
-
-# SSH 用户名
-SERVER_USER=ubuntu
-
-# SSH 端口（默认 22）
-SERVER_PORT=22
-
-# SSH 密钥路径（留空使用默认 ~/.ssh/id_rsa）
-SSH_KEY_PATH=
-```
-
-#### 路径配置
-
-```bash
-# 服务器上的 Git 仓库路径
-REMOTE_PROJECT_PATH=/home/ubuntu/vf_react
-
-# 生产环境部署路径
-PRODUCTION_PATH=/var/www/valuefrontier.cn
-
-# 部署备份目录
-BACKUP_DIR=/home/ubuntu/deployments
-
-# 部署日志目录
-LOG_DIR=/home/ubuntu/deploy-logs
-```
-
-#### Git 配置
-
-```bash
-# 部署分支
-DEPLOY_BRANCH=feature
-```
-
-#### 备份配置
-
-```bash
-# 保留备份数量（超过会自动删除最旧的）
-KEEP_BACKUPS=5
-```
-
-#### 企业微信通知配置
-
-```bash
-# 是否启用企业微信通知
-ENABLE_WECHAT_NOTIFY=true
-
-# 企业微信机器人 Webhook URL
-WECHAT_WEBHOOK_URL=https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=xxxxx
-
-# 通知提及的用户（@all 或手机号/userid，逗号分隔）
-WECHAT_MENTIONED_LIST=@all
-```
-
-#### 部署配置
-
-```bash
-# 是否在部署前运行 npm install
-RUN_NPM_INSTALL=true
-
-# 是否在部署前运行 npm test
-RUN_NPM_TEST=false
-
-# 构建命令
-BUILD_COMMAND=npm run build
-```
-
-### 修改配置
-
-编辑配置文件：
-```bash
-vim .env.deploy
-```
-
-或使用编辑器打开 `.env.deploy` 文件。
-
----
-
-## 企业微信通知
-
-### 配置企业微信机器人
-
-1. **打开企业微信群聊**
-2. **添加群机器人**
-   - 点击群设置（右上角 ···）
-   - 选择"群机器人"
-   - 点击"添加机器人"
-3. **设置机器人信息**
-   - 输入机器人名称（如：部署通知机器人）
-   - 复制 Webhook URL
-4. **配置到项目**
-   - 将 Webhook URL 粘贴到 `.env.deploy` 文件的 `WECHAT_WEBHOOK_URL` 字段
-
-### 通知内容
-
-#### 部署成功通知
-```
-【生产环境部署成功】
-项目：vf_react
-环境：生产环境
-分支：feature
-版本：c93f689
-提交信息：feat: 添加消息推送能力
-部署时间：2025-01-21 14:33:45
-部署耗时：2分15秒
-操作人：qiye
-访问地址：https://valuefrontier.cn
-```
-
-#### 部署失败通知
-```
-【⚠️ 生产环境部署失败】
-项目：vf_react
-环境：生产环境
-分支：feature
-失败原因：构建失败
-失败时间：2025-01-21 14:35:20
-操作人：qiye
-已自动回滚到上一版本
-```
-
-#### 回滚成功通知
-```
-【版本回滚成功】
-项目：vf_react
-环境：生产环境
-回滚版本：backup-20250121-150030
-回滚时间：2025-01-21 15:35:20
-操作人：qiye
-```
-
----
-
-## 故障排查
-
-### 常见问题
-
-#### 1. SSH 连接失败
-
-**错误信息**：
-```
-[✗] SSH 连接失败
-```
-
-**可能原因**：
-- 服务器地址、用户名或端口配置错误
-- SSH 密钥未配置或路径错误
-- 服务器防火墙阻止连接
-
-**解决方法**：
-1. 检查配置文件 `.env.deploy` 中的服务器信息
-2. 测试 SSH 连接：
-   ```bash
-   ssh ubuntu@your-server.com
-   ```
-3. 确认 SSH 密钥已添加到服务器：
-   ```bash
-   ssh-copy-id ubuntu@your-server.com
-   ```
-
-#### 2. 构建失败
-
-**错误信息**：
-```
-[ERROR] 构建失败
-npm run build exited with code 1
-```
-
-**可能原因**：
-- 代码存在语法错误
-- 依赖包版本不兼容
-- Node.js 版本不匹配
-
-**解决方法**：
-1. 在本地先运行构建测试：
-   ```bash
-   npm run build
-   ```
-2. 检查并修复错误
-3. 确认服务器 Node.js 版本：
-   ```bash
-   ssh ubuntu@your-server.com "node -v"
-   ```
-
-#### 3. 权限不足
-
-**错误信息**：
-```
-[ERROR] 复制文件失败
-Permission denied
-```
-
-**可能原因**：
-- 对生产目录没有写权限
-- 需要 sudo 权限
-
-**解决方法**：
-1. 检查生产目录权限：
-   ```bash
-   ssh ubuntu@your-server.com "ls -ld /var/www/valuefrontier.cn"
-   ```
-2. 修改目录所有者：
-   ```bash
-   ssh ubuntu@your-server.com "sudo chown -R ubuntu:ubuntu /var/www/valuefrontier.cn"
-   ```
-
-#### 4. 企业微信通知发送失败
-
-**错误信息**：
-```
-[⚠] 企业微信通知发送失败
-```
-
-**可能原因**：
-- Webhook URL 错误
-- 网络问题
-
-**解决方法**：
-1. 检查 Webhook URL 是否正确
-2. 手动测试通知：
-   ```bash
-   bash scripts/notify-wechat.sh test
-   ```
-
----
-
-## FAQ
-
-### Q1: 部署会影响正在访问网站的用户吗？
-
-A: 部署过程中会有短暂的服务中断（约 1-2 秒），建议在流量较低时进行部署。
-
-### Q2: 如果部署过程中网络断开怎么办？
-
-A: 脚本会自动检测错误并停止部署。由于有自动备份，可以安全地重新运行部署或执行回滚。
-
-### Q3: 可以同时部署多个项目吗？
-
-A: 不建议。请等待当前部署完成后再部署其他项目。
-
-### Q4: 备份文件占用空间过大怎么办？
-
-A: 可以修改 `.env.deploy` 中的 `KEEP_BACKUPS` 配置，减少保留的备份数量。
-
-### Q5: 如何查看详细的部署日志？
-
-A: 部署日志保存在服务器上：
-```bash
-ssh ubuntu@your-server.com "cat /home/ubuntu/deploy-logs/deploy-YYYYMMDD-HHMMSS.log"
-```
-
-### Q6: 可以在 Windows 上使用吗？
-
-A: 可以。脚本使用标准的 Bash 命令，在 Git Bash 或 WSL 中都可以正常运行。
-
-### Q7: 如何禁用企业微信通知？
-
-A: 编辑 `.env.deploy` 文件，将 `ENABLE_WECHAT_NOTIFY` 设置为 `false`。
-
-### Q8: 部署失败后是否需要手动回滚？
-
-A: 不需要。如果构建失败，脚本会自动回滚到上一个版本。
-
----
-
-## 目录结构
-
-```
-vf_react/
-├── scripts/                          # 部署脚本目录
-│   ├── setup-deployment.sh          # 配置向导
-│   ├── deploy-from-local.sh         # 本地部署脚本
-│   ├── deploy-on-server.sh          # 服务器部署脚本
-│   ├── rollback-from-local.sh       # 本地回滚脚本
-│   ├── rollback-on-server.sh        # 服务器回滚脚本
-│   └── notify-wechat.sh             # 企业微信通知脚本
-├── .env.deploy.example              # 配置文件示例
-├── .env.deploy                      # 配置文件（不提交到 Git）
-├── DEPLOYMENT.md                    # 本文档
-└── package.json                     # 包含部署命令
-```
-
-**服务器目录结构**：
-```
-/home/ubuntu/
-├── vf_react/                        # Git 仓库
-│   └── build/                       # 构建产物
-├── deployments/                     # 版本备份
-│   ├── backup-20250121-143020/
-│   ├── backup-20250121-150030/
-│   └── current -> backup-20250121-150030
-└── deploy-logs/                     # 部署日志
-    └── deploy-20250121-143020.log
-```
-
----
-
-## 命令速查表
-
-| 命令 | 说明 |
-|------|------|
-| `npm run deploy:setup` | 首次配置部署环境 |
-| `npm run deploy` | 部署到生产环境 |
-| `npm run rollback` | 回滚到上一个版本 |
-| `npm run rollback -- 2` | 回滚到前 2 个版本 |
-| `npm run rollback -- list` | 查看可回滚的版本列表 |
-
----
-
-## 支持
-
-如有问题，请联系开发团队或提交 Issue。
-
----
-
-**祝部署顺利！** 🎉

docs/DEPLOYMENT_QUICKSTART.md

@@ -1,70 +0,0 @@
-# 🚀 部署快速上手指南
-
-## 首次使用（5 分钟）
-
-### 步骤 1: 运行配置向导
-```bash
-npm run deploy:setup
-```
-
-按提示输入以下信息：
-- 服务器地址：`你的服务器IP或域名`
-- SSH 用户名：`ubuntu`
-- SSH 端口：`22`
-- SSH 密钥：按 `y` 使用默认密钥
-- 企业微信通知：按 `y` 启用（或按 `n` 跳过）
-
-配置完成！✅
-
----
-
-## 日常部署（2 分钟）
-
-### 步骤 1: 部署到生产环境
-```bash
-npm run deploy
-```
-
-### 步骤 2: 确认部署
-看到部署预览后，输入 `yes` 确认
-
-等待 2-3 分钟，部署完成！🎉
-
----
-
-## 如果出问题了
-
-### 立即回滚
-```bash
-npm run rollback
-```
-
-输入 `yes` 确认，10 秒内恢复！
-
----
-
-## 常用命令
-
-```bash
-# 部署
-npm run deploy
-
-# 回滚
-npm run rollback
-
-# 查看可回滚的版本
-npm run rollback -- list
-
-# 重新配置
-npm run deploy:setup
-```
-
----
-
-## 需要帮助？
-
-查看完整文档：[DEPLOYMENT.md](./DEPLOYMENT.md)
-
----
-
-**就这么简单！** ✨

docs/ENVIRONMENT_SETUP.md

@@ -1,376 +0,0 @@
-# 环境配置指南
-
-本文档详细说明项目的环境配置和启动方式。
-
-## 📊 环境模式总览
-
-| 模式 | 命令 | Mock | 后端位置 | PostHog | 适用场景 |
-|------|------|------|---------|---------|---------|
-| **本地混合** | `npm start` | ✅ 智能穿透 | 远程 | 可选双模式 | 日常前端开发（推荐） |
-| **本地全栈** | `npm run start:test` | ❌ | 本地 | 可选双模式 | 后端调试、性能测试 |
-| **远程开发** | `npm run start:dev` | ❌ | 远程 | 可选双模式 | 联调真实后端 |
-| **纯 Mock** | `npm run start:mock` | ✅ 完全拦截 | 无 | 可选双模式 | 前端完全独立开发 |
-| **生产构建** | `npm run build` | ❌ | 生产服务器 | ✅ 仅上报 | 部署上线 |
-
----
-
-## 1️⃣ 本地混合模式（推荐）
-
-### 启动命令
-```bash
-npm start
-# 或
-npm run start:local
-```
-
-### 配置文件
-`.env.local`
-
-### 特点
-- 🎯 **MSW 智能拦截**：
-  - 已定义 Mock 的接口 → 返回 Mock 数据
-  - 未定义 Mock 的接口 → 自动转发到远程后端
-- 💡 **最佳效率**：前端独立开发，部分依赖真实数据
-- 🚀 **快速迭代**：无需等待后端，无需本地运行后端
-- 🔄 **自动端口清理**：启动前自动清理 3000 端口
-
-### 适用场景
-- ✅ 日常前端 UI 开发
-- ✅ 页面布局调整
-- ✅ 组件开发测试
-- ✅ 样式优化
-
-### 工作流程
-```bash
-# 1. 启动项目
-npm start
-
-# 2. 观察控制台
-# ✅ MSW 启动成功
-# ✅ PostHog 初始化
-# ✅ 拦截日志显示
-
-# 3. 开发测试
-# - Mock 接口：立即返回假数据
-# - 真实接口：请求远程后端
-```
-
-### PostHog 配置
-编辑 `.env.local`：
-```env
-# 仅控制台 debug（初期开发）
-REACT_APP_POSTHOG_KEY=
-
-# 控制台 + PostHog Cloud（完整测试）
-REACT_APP_POSTHOG_KEY=phc_your_test_key_here
-```
-
----
-
-## 2️⃣ 本地全栈模式
-
-### 启动命令
-```bash
-npm run start:test
-```
-
-### 配置文件
-`.env.test`
-
-### 特点
-- 🖥️ **前后端都在本地**：
-  - 前端：localhost:3000
-  - 后端：localhost:5001
-- 🗄️ **本地数据库**：数据隔离，不影响团队
-- 🔍 **完整调试**：可以打断点调试后端代码
-- 📊 **性能分析**：测试数据库查询、接口性能
-
-### 适用场景
-- ✅ 调试后端 Python 代码
-- ✅ 测试数据库查询优化
-- ✅ 性能测试和压力测试
-- ✅ 离线开发（无网络）
-- ✅ 数据迁移脚本测试
-
-### 工作流程
-```bash
-# 1. 启动全栈（自动启动前后端）
-npm run start:test
-
-# 观察日志：
-# [backend] Flask 服务器启动在 5001 端口
-# [frontend] React 启动在 3000 端口
-
-# 2. 或手动分别启动
-# 终端 1
-python app_2.py
-
-# 终端 2
-npm run frontend:test
-```
-
-### 注意事项
-- ⚠️ 确保本地安装了 Python 环境
-- ⚠️ 确保安装了 requirements.txt 中的依赖
-- ⚠️ 确保本地数据库已配置
-
----
-
-## 3️⃣ 远程开发模式
-
-### 启动命令
-```bash
-npm run start:dev
-```
-
-### 配置文件
-`.env.development`
-
-### 特点
-- 🌐 **连接远程后端**：http://49.232.185.254:5001
-- 📡 **真实数据**：远程开发数据库
-- 🤝 **团队协作**：与后端团队联调
-- ⚡ **无需本地后端**：专注前端开发
-
-### 适用场景
-- ✅ 联调后端最新代码
-- ✅ 测试真实数据表现
-- ✅ 验证接口文档
-- ✅ 跨服务功能测试
-
-### 工作流程
-```bash
-# 1. 启动前端（连接远程后端）
-npm run start:dev
-
-# 2. 观察控制台
-# ✅ 所有请求发送到远程服务器
-# ✅ 无 MSW 拦截
-
-# 3. 联调测试
-# - 测试最新后端接口
-# - 反馈问题给后端团队
-```
-
----
-
-## 4️⃣ 纯 Mock 模式
-
-### 启动命令
-```bash
-npm run start:mock
-```
-
-### 配置文件
-`.env.mock`
-
-### 特点
-- 📦 **完全 Mock**：所有请求都被 MSW 拦截
-- ⚡ **完全离线**：无需任何后端服务
-- 🎨 **纯前端**：专注 UI/UX 开发
-
-### 适用场景
-- ✅ 后端接口未开发完成
-- ✅ 完全独立的前端开发
-- ✅ UI 原型展示
-
----
-
-## 🔧 PostHog 配置说明
-
-### 双模式运行
-
-PostHog 支持两种模式：
-
-#### 模式 1：仅控制台 Debug（推荐初期）
-```env
-REACT_APP_POSTHOG_KEY=  # 留空
-```
-
-**效果：**
-- ✅ 控制台打印所有事件日志
-- ✅ 验证事件触发逻辑
-- ✅ 检查事件属性
-- ❌ 不实际发送到 PostHog 服务器
-
-**控制台输出示例：**
-```javascript
-✅ PostHog initialized successfully
-📊 PostHog Analytics initialized
-📍 Event tracked: community_page_viewed { ... }
-```
-
-#### 模式 2：控制台 + PostHog Cloud（完整测试）
-```env
-REACT_APP_POSTHOG_KEY=phc_your_test_key_here
-```
-
-**效果：**
-- ✅ 控制台打印所有事件日志
-- ✅ 同时发送到 PostHog Cloud
-- ✅ 在 PostHog Dashboard 查看 Live Events
-- ✅ 测试完整的分析功能
-
-### 获取 PostHog API Key
-
-1. 登录 PostHog：https://app.posthog.com
-2. 创建项目（建议创建独立的测试项目）
-3. 进入项目设置 → Project API Key
-4. 复制 API Key（格式：`phc_xxxxxxxxxxxxxx`）
-5. 填入对应环境的 `.env` 文件
-
-### 推荐配置
-
-```bash
-# 本地开发（.env.local）
-REACT_APP_POSTHOG_KEY=  # 留空，仅控制台
-
-# 测试环境（.env.test）
-REACT_APP_POSTHOG_KEY=phc_test_key  # 测试项目 Key
-
-# 开发环境（.env.development）
-REACT_APP_POSTHOG_KEY=phc_dev_key  # 开发项目 Key
-
-# 生产环境（.env）
-REACT_APP_POSTHOG_KEY=phc_prod_key  # 生产项目 Key
-```
-
----
-
-## 🛠️ 端口管理
-
-### 自动清理 3000 端口
-
-所有 `npm start` 命令会自动执行 `prestart` 钩子，清理 3000 端口：
-
-```bash
-# 自动执行
-npm start
-# → 先执行 kill-port 3000
-# → 再执行 craco start
-```
-
-### 手动清理端口
-
-```bash
-npm run kill-port
-```
-
----
-
-## 📁 环境变量文件说明
-
-| 文件 | 提交Git | 用途 | 优先级 |
-|------|--------|------|--------|
-| `.env` | ✅ | 生产环境 | 低 |
-| `.env.local` | ✅ | 本地混合模式 | 高 |
-| `.env.test` | ✅ | 本地测试环境 | 高 |
-| `.env.development` | ✅ | 远程开发环境 | 中 |
-| `.env.mock` | ✅ | 纯 Mock 模式 | 中 |
-
----
-
-## 🐛 常见问题
-
-### Q1: 端口 3000 被占用
-
-**解决方案：**
-```bash
-# 方案 1：自动清理（推荐）
-npm start  # 会自动清理
-
-# 方案 2：手动清理
-npm run kill-port
-```
-
-### Q2: PostHog 事件没有上报
-
-**检查清单：**
-1. 检查 `REACT_APP_POSTHOG_KEY` 是否填写
-2. 打开浏览器控制台，查看是否有初始化日志
-3. 检查网络面板，是否有请求发送到 PostHog
-4. 登录 PostHog Dashboard → Live Events 查看
-
-### Q3: Mock 数据没有生效
-
-**检查清单：**
-1. 确认 `REACT_APP_ENABLE_MOCK=true`
-2. 检查控制台是否显示 "MSW enabled"
-3. 检查 `src/mocks/handlers/` 中是否定义了对应接口
-4. 查看浏览器控制台的 MSW 拦截日志
-
-### Q4: 本地全栈模式启动失败
-
-**可能原因：**
-1. Python 环境未安装
-2. 后端依赖未安装：`pip install -r requirements.txt`
-3. 数据库未配置
-4. 端口 5001 被占用：`lsof -ti:5001 | xargs kill -9`
-
-### Q5: 环境变量不生效
-
-**解决方案：**
-1. 重启开发服务器（React 不会热更新环境变量）
-2. 检查环境变量名称是否以 `REACT_APP_` 开头
-3. 确认使用了正确的 `.env` 文件
-
----
-
-## 🚀 快速开始
-
-### 新成员入职
-
-```bash
-# 1. 克隆项目
-git clone <repository>
-cd vf_react
-
-# 2. 安装依赖
-npm install
-
-# 3. 启动项目（默认本地混合模式）
-npm start
-
-# 4. 浏览器访问
-# http://localhost:3000
-```
-
-### 日常开发流程
-
-```bash
-# 早上启动
-npm start
-
-# 开发中...
-# - 修改代码
-# - 热更新自动生效
-# - 查看控制台日志
-
-# 需要调试后端时
-npm run start:test
-
-# 需要联调时
-npm run start:dev
-```
-
----
-
-## 📚 相关文档
-
-- [PostHog 集成文档](./POSTHOG_INTEGRATION.md)
-- [PostHog 事件追踪文档](./POSTHOG_EVENT_TRACKING.md)
-- [项目配置说明](./CLAUDE.md)
-
----
-
-## 🤝 团队协作建议
-
-1. **统一环境**：团队成员使用相同的启动命令
-2. **独立测试**：测试新功能时使用 `start:test` 隔离数据
-3. **及时反馈**：发现接口问题及时在群里反馈
-4. **代码审查**：提交前检查是否误提交 API Key
-
----
-
-**最后更新：** 2025-01-15
-**维护者：** 前端团队

docs/MOCK_API_DOCS.md

@@ -1,322 +0,0 @@
-# Mock API 接口文档
-
-本文档说明 Community 页面（`/community`）加载时请求的所有 Mock API 接口。
-
-## 📊 接口总览
-
-Community 页面加载时会并发请求以下接口：
-
-| 序号 | 接口路径 | 调用时机 | 用途 | Mock 状态 |
-|------|---------|---------|------|-----------|
-| 1 | `/concept-api/search` | PopularKeywords 组件挂载 | 获取热门概念 | ✅ 已实现 |
-| 2 | `/api/events/` | Community 组件挂载 | 获取事件列表 | ✅ 已实现 |
-| 3-8 | `/api/index/{code}/kline` (6个) | MidjourneyHeroSection 组件挂载 | 获取三大指数K线数据 | ✅ 已实现 |
-
----
-
-## 1. 概念搜索接口
-
-### `/concept-api/search`
-
-**请求方式**: `POST`
-
-**调用位置**: `src/views/Community/components/PopularKeywords.js:25`
-
-**调用时机**: PopularKeywords 组件挂载时（`useEffect`, 空依赖数组）
-
-**请求参数**:
-```json
-{
-  "query": "",              // 空字符串表示获取所有概念
-  "size": 20,               // 获取数量
-  "page": 1,                // 页码
-  "sort_by": "change_pct"   // 排序方式：按涨跌幅排序
-}
-```
-
-**响应数据**:
-```json
-{
-  "results": [
-    {
-      "concept": "人工智能",
-      "concept_id": "CONCEPT_1000",
-      "stock_count": 45,
-      "price_info": {
-        "avg_change_pct": 5.23,
-        "avg_price": "45.67",
-        "total_market_cap": "567.89"
-      },
-      "description": "人工智能相关概念股",
-      "hot_score": 89
-    }
-    // ... 更多概念数据
-  ],
-  "total": 20,
-  "page": 1,
-  "size": 20,
-  "message": "搜索成功"
-}
-```
-
-**Mock Handler**: `src/mocks/handlers/concept.js`
-
----
-
-## 2. 事件列表接口
-
-### `/api/events/`
-
-**请求方式**: `GET`
-
-**调用位置**: `src/views/Community/index.js:147` → `eventService.getEvents()`
-
-**调用时机**: Community 页面加载时，由 `loadEvents()` 函数调用
-
-**请求参数** (Query Parameters):
-- `page`: 页码（默认: 1）
-- `per_page`: 每页数量（默认: 10）
-- `sort`: 排序方式（默认: "new"）
-- `importance`: 重要性（默认: "all"）
-- `search_type`: 搜索类型（默认: "topic"）
-- `q`: 搜索关键词（可选）
-- `industry_code`: 行业代码（可选）
-- `industry_classification`: 行业分类（可选）
-
-**示例请求**:
-```
-GET /api/events/?sort=new&importance=all&search_type=topic&page=1&per_page=10
-```
-
-**响应数据**:
-```json
-{
-  "success": true,
-  "data": {
-    "events": [
-      {
-        "event_id": "evt_001",
-        "title": "某公司发布新产品",
-        "content": "详细内容...",
-        "importance": "S",
-        "created_at": "2024-10-26T10:30:00Z",
-        "related_stocks": ["600519", "000858"]
-      }
-      // ... 更多事件
-    ],
-    "pagination": {
-      "page": 1,
-      "per_page": 10,
-      "total": 100,
-      "total_pages": 10
-    }
-  },
-  "message": "获取成功"
-}
-```
-
-**Mock Handler**: `src/mocks/handlers/event.js`
-
----
-
-## 3. 指数K线数据接口
-
-### `/api/index/:indexCode/kline`
-
-**请求方式**: `GET`
-
-**调用位置**: `src/views/Community/components/MidjourneyHeroSection.js:315-323`
-
-**调用时机**: MidjourneyHeroSection 组件挂载时（`useEffect`, 空依赖数组）
-
-### 3.1 分时数据 (timeline)
-
-用于展示当日分钟级别的价格走势图。
-
-**请求参数** (Query Parameters):
-- `type`: "timeline"
-- `event_time`: 可选，事件时间
-
-**六个并发请求**:
-1. `GET /api/index/000001.SH/kline?type=timeline` - 上证指数分时
-2. `GET /api/index/399001.SZ/kline?type=timeline` - 深证成指分时
-3. `GET /api/index/399006.SZ/kline?type=timeline` - 创业板指分时
-4. `GET /api/index/000001.SH/kline?type=daily` - 上证指数日线
-5. `GET /api/index/399001.SZ/kline?type=daily` - 深证成指日线
-6. `GET /api/index/399006.SZ/kline?type=daily` - 创业板指日线
-
-**timeline 响应数据**:
-```json
-{
-  "success": true,
-  "data": [
-    {
-      "time": "09:30",
-      "price": 3215.67,
-      "close": 3215.67,
-      "volume": 235678900,
-      "prev_close": 3200.00
-    },
-    {
-      "time": "09:31",
-      "price": 3216.23,
-      "close": 3216.23,
-      "volume": 245789000,
-      "prev_close": 3200.00
-    }
-    // ... 每分钟一条数据，从 09:30 到 15:00
-  ],
-  "index_code": "000001.SH",
-  "type": "timeline",
-  "message": "获取成功"
-}
-```
-
-### 3.2 日线数据 (daily)
-
-用于获取历史收盘价，计算涨跌幅百分比。
-
-**daily 响应数据**:
-```json
-{
-  "success": true,
-  "data": [
-    {
-      "date": "2024-10-01",
-      "time": "2024-10-01",
-      "open": 3198.45,
-      "close": 3205.67,
-      "high": 3212.34,
-      "low": 3195.12,
-      "volume": 45678900000,
-      "prev_close": 3195.23
-    }
-    // ... 最近30个交易日的数据
-  ],
-  "index_code": "000001.SH",
-  "type": "daily",
-  "message": "获取成功"
-}
-```
-
-**Mock Handler**: `src/mocks/handlers/stock.js`
-**数据生成函数**: `src/mocks/data/kline.js`
-
----
-
-## 🔍 重复请求问题分析
-
-### 问题原因
-
-1. **PopularKeywords 组件重复渲染**
-   - `UnifiedSearchBox` 内部包含 `<PopularKeywords />` (line 276)
-   - `PopularKeywords` 组件自己会在 `useEffect` 中发起 `/concept-api/search` 请求
-   - Community 页面同时还通过 Redux `fetchPopularKeywords()` 获取数据（但未使用）
-
-2. **React Strict Mode**
-   - 开发环境下，React 18 的 Strict Mode 会故意双倍调用 useEffect
-   - 这会导致所有组件挂载时的请求被执行两次
-   - 生产环境不受影响
-
-3. **MidjourneyHeroSection 的 6 个K线请求**
-   - 这是设计行为，一次性并发请求 6 个接口
-   - 3 个分时数据 + 3 个日线数据
-   - 用于展示三大指数的实时行情图表
-
-### 解决方案
-
-**方案 1**: 移除冗余的数据获取
-```javascript
-// Community/index.js 中移除未使用的 fetchPopularKeywords
-// 删除或注释掉 line 256
-// dispatch(fetchPopularKeywords());
-```
-
-**方案 2**: 使用缓存机制
-- 在 `PopularKeywords` 组件中添加数据缓存
-- 短时间内（如 5 分钟）重复请求直接返回缓存数据
-
-**方案 3**: 提升数据到父组件
-- 在 Community 页面统一管理数据获取
-- 通过 props 传递给 `PopularKeywords` 组件
-- `PopularKeywords` 不再自己发起请求
-
----
-
-## 📝 其他接口
-
-### `/api/conversations`
-**状态**: ❌ 未在前端代码中找到
-**可能来源**: 浏览器插件、其他应用、或外部系统
-
-### `/api/parameters`
-**状态**: ❌ 未在前端代码中找到
-**可能来源**: 浏览器插件、其他应用、或外部系统
-
----
-
-## 🚀 Mock 服务启动
-
-```bash
-# 启动 Mock 开发服务器
-npm run start:mock
-```
-
-Mock 服务使用 [MSW (Mock Service Worker)](https://mswjs.io/) 实现，会拦截所有匹配的 API 请求并返回模拟数据。
-
-### Mock 文件结构
-
-```
-src/mocks/
-├── handlers/
-│   ├── index.js         # 汇总所有 handlers
-│   ├── concept.js       # 概念相关接口
-│   ├── event.js         # 事件相关接口
-│   └── stock.js         # 股票/指数K线接口
-├── data/
-│   ├── kline.js         # K线数据生成函数
-│   ├── events.js        # 事件数据
-│   └── industries.js    # 行业数据
-└── browser.js           # MSW 浏览器配置
-```
-
----
-
-## 🐛 调试建议
-
-### 1. 查看 Mock 请求日志
-
-打开浏览器控制台，所有 Mock 请求都会输出日志：
-
-```
-[Mock Concept] 搜索概念: {query: "", size: 20, page: 1, sort_by: "change_pct"}
-[Mock Stock] 获取指数K线数据: {indexCode: "000001.SH", type: "timeline", eventTime: null}
-[Mock] 获取事件列表: {page: 1, per_page: 10, sort: "new", ...}
-```
-
-### 2. 检查网络请求
-
-在浏览器 Network 面板中：
-- 筛选 XHR/Fetch 请求
-- 查看请求的 URL、参数、响应数据
-- Mock 请求的响应时间会比真实 API 更快（200-500ms）
-
-### 3. 验证数据格式
-
-确保 Mock 数据格式与前端期望的格式一致：
-- 检查字段名称（如 `concept` vs `name`）
-- 检查数据类型（字符串 vs 数字）
-- 检查嵌套结构（如 `price_info.avg_change_pct`）
-
----
-
-## 📚 相关文档
-
-- [MSW 官方文档](https://mswjs.io/)
-- [React Query 缓存策略](https://tanstack.com/query/latest)
-- [前端数据获取最佳实践](https://kentcdodds.com/blog/data-fetching)
-
----
-
-**更新日期**: 2024-10-26
-**维护者**: Claude Code Assistant

docs/POSTHOG_DASHBOARD_GUIDE.md

@@ -1,614 +0,0 @@
-# PostHog Dashboard 配置指南
-
-## 📊 目的
-
-本指南帮助你在PostHog中配置关键的分析Dashboard和Insights，快速获得有价值的用户行为洞察。
-
----
-
-## 🎯 推荐Dashboard列表
-
-### 1. 📈 核心指标Dashboard
-**用途**: 监控产品整体健康度
-
-### 2. 🔄 用户留存Dashboard
-**用途**: 分析用户留存和流失
-
-### 3. 💰 收入转化Dashboard
-**用途**: 监控付费转化漏斗
-
-### 4. 🎨 功能使用Dashboard
-**用途**: 了解功能受欢迎程度
-
-### 5. 🔍 搜索行为Dashboard
-**用途**: 优化搜索体验
-
----
-
-## 📈 Dashboard 1: 核心指标
-
-### Insight 1.1: 每日活跃用户（DAU）
-**类型**: Trends
-**事件**: `$pageview`
-**时间范围**: 过去30天
-**分组**: 按日
-**配置**:
-```
-Event: $pageview
-Unique users
-Date range: Last 30 days
-Interval: Day
-```
-
-### Insight 1.2: 新用户注册趋势
-**类型**: Trends
-**事件**: `USER_SIGNED_UP`
-**时间范围**: 过去30天
-**配置**:
-```
-Event: USER_SIGNED_UP
-Count of events
-Date range: Last 30 days
-Interval: Day
-Breakdown: signup_method
-```
-
-### Insight 1.3: 用户登录方式分布
-**类型**: Pie Chart
-**事件**: `USER_LOGGED_IN`
-**时间范围**: 过去7天
-**配置**:
-```
-Event: USER_LOGGED_IN
-Count of events
-Date range: Last 7 days
-Breakdown: login_method
-Visualization: Pie
-```
-
-### Insight 1.4: 最受欢迎的页面
-**类型**: Table
-**事件**: `$pageview`
-**时间范围**: 过去7天
-**配置**:
-```
-Event: $pageview
-Count of events
-Date range: Last 7 days
-Breakdown: $current_url
-Order: Descending
-Limit: Top 10
-```
-
-### Insight 1.5: 平台分布
-**类型**: Bar Chart
-**事件**: `$pageview`
-**时间范围**: 过去30天
-**配置**:
-```
-Event: $pageview
-Unique users
-Date range: Last 30 days
-Breakdown: $os
-Visualization: Bar
-```
-
----
-
-## 🔄 Dashboard 2: 用户留存
-
-### Insight 2.1: 用户留存曲线
-**类型**: Retention
-**初始事件**: `USER_SIGNED_UP`
-**返回事件**: `$pageview`
-**配置**:
-```
-Cohort defining event: USER_SIGNED_UP
-Returning event: $pageview
-Period: Daily
-Date range: Last 8 weeks
-```
-
-### Insight 2.2: 功能留存率
-**类型**: Retention
-**初始事件**: 各功能首次使用事件
-**返回事件**: 各功能再次使用
-**配置**:
-```
-Cohort defining event: TRADING_SIMULATION_ENTERED
-Returning event: TRADING_SIMULATION_ENTERED
-Period: Weekly
-Date range: Last 12 weeks
-```
-
-### Insight 2.3: 社区互动留存
-**类型**: Retention
-**初始事件**: `Community Page Viewed`
-**返回事件**: `NEWS_ARTICLE_CLICKED`
-**配置**:
-```
-Cohort defining event: Community Page Viewed
-Returning event: NEWS_ARTICLE_CLICKED
-Period: Daily
-Date range: Last 30 days
-```
-
-### Insight 2.4: 活跃用户分层
-**类型**: Trends
-**多个事件**: 按活跃度分类
-**配置**:
-```
-Event 1: $pageview (filter: >= 20 events in last 7 days)
-Event 2: $pageview (filter: 10-19 events in last 7 days)
-Event 3: $pageview (filter: 3-9 events in last 7 days)
-Event 4: $pageview (filter: 1-2 events in last 7 days)
-Date range: Last 30 days
-Unique users
-```
-
----
-
-## 💰 Dashboard 3: 收入转化
-
-### Insight 3.1: 付费转化漏斗
-**类型**: Funnel
-**步骤**:
-1. SUBSCRIPTION_PAGE_VIEWED
-2. Pricing Plan Selected
-3. PAYMENT_INITIATED
-4. PAYMENT_SUCCESSFUL
-5. SUBSCRIPTION_CREATED
-
-**配置**:
-```
-Funnel step 1: SUBSCRIPTION_PAGE_VIEWED
-Funnel step 2: Pricing Plan Selected
-Funnel step 3: PAYMENT_INITIATED
-Funnel step 4: PAYMENT_SUCCESSFUL
-Funnel step 5: SUBSCRIPTION_CREATED
-Conversion window: 1 hour
-Date range: Last 30 days
-```
-
-### Insight 3.2: 付费墙转化率
-**类型**: Funnel
-**步骤**:
-1. PAYWALL_SHOWN
-2. PAYWALL_UPGRADE_CLICKED
-3. SUBSCRIPTION_PAGE_VIEWED
-4. PAYMENT_SUCCESSFUL
-
-**配置**:
-```
-Funnel step 1: PAYWALL_SHOWN
-Funnel step 2: PAYWALL_UPGRADE_CLICKED
-Funnel step 3: SUBSCRIPTION_PAGE_VIEWED
-Funnel step 4: PAYMENT_SUCCESSFUL
-Breakdown: feature (付费墙触发功能)
-Date range: Last 30 days
-```
-
-### Insight 3.3: 定价方案选择分布
-**类型**: Pie Chart
-**事件**: `Pricing Plan Selected`
-**配置**:
-```
-Event: Pricing Plan Selected
-Count of events
-Breakdown: plan_name
-Date range: Last 30 days
-Visualization: Pie
-```
-
-### Insight 3.4: 计费周期偏好
-**类型**: Bar Chart
-**事件**: `Pricing Plan Selected`
-**配置**:
-```
-Event: Pricing Plan Selected
-Count of events
-Breakdown: billing_cycle
-Date range: Last 30 days
-Visualization: Bar
-```
-
-### Insight 3.5: 支付成功率
-**类型**: Trends (Formula)
-**计算**: (PAYMENT_SUCCESSFUL / PAYMENT_INITIATED) * 100
-**配置**:
-```
-Series A: PAYMENT_SUCCESSFUL (Count)
-Series B: PAYMENT_INITIATED (Count)
-Formula: (A / B) * 100
-Date range: Last 30 days
-Interval: Day
-```
-
-### Insight 3.6: 订阅收入趋势
-**类型**: Trends
-**事件**: `SUBSCRIPTION_CREATED`
-**配置**:
-```
-Event: SUBSCRIPTION_CREATED
-Sum of property: amount
-Date range: Last 90 days
-Interval: Week
-```
-
-### Insight 3.7: 支付失败原因分析
-**类型**: Table
-**事件**: `PAYMENT_FAILED`
-**配置**:
-```
-Event: PAYMENT_FAILED
-Count of events
-Breakdown: error_reason
-Date range: Last 30 days
-Order: Descending
-```
-
----
-
-## 🎨 Dashboard 4: 功能使用
-
-### Insight 4.1: 功能使用频率排名
-**类型**: Table
-**多个事件**: 各功能的关键事件
-**配置**:
-```
-Events:
-  - Community Page Viewed
-  - EVENT_DETAIL_VIEWED
-  - DASHBOARD_CENTER_VIEWED
-  - TRADING_SIMULATION_ENTERED
-  - STOCK_OVERVIEW_VIEWED
-Count of events
-Date range: Last 7 days
-Order: Descending
-```
-
-### Insight 4.2: 新闻浏览趋势
-**类型**: Trends
-**事件**: `NEWS_ARTICLE_CLICKED`
-**配置**:
-```
-Event: NEWS_ARTICLE_CLICKED
-Count of events
-Date range: Last 30 days
-Interval: Day
-Breakdown: importance (按重要性分组)
-```
-
-### Insight 4.3: 搜索使用趋势
-**类型**: Trends
-**事件**: `SEARCH_QUERY_SUBMITTED`
-**配置**:
-```
-Event: SEARCH_QUERY_SUBMITTED
-Count of events
-Date range: Last 30 days
-Interval: Day
-Breakdown: context
-```
-
-### Insight 4.4: 模拟盘交易活跃度
-**类型**: Trends
-**事件**: `Simulation Order Placed`
-**配置**:
-```
-Event: Simulation Order Placed
-Count of events
-Date range: Last 30 days
-Interval: Day
-Breakdown: order_type (买入/卖出)
-```
-
-### Insight 4.5: 社交互动参与度
-**类型**: Trends (Stacked)
-**多个事件**:
-- Comment Added
-- Comment Liked
-- CONTENT_SHARED
-
-**配置**:
-```
-Event 1: Comment Added
-Event 2: Comment Liked
-Event 3: CONTENT_SHARED
-Count of events
-Date range: Last 30 days
-Interval: Day
-Visualization: Area (Stacked)
-```
-
-### Insight 4.6: 个人资料完善度
-**类型**: Funnel
-**步骤**:
-1. USER_SIGNED_UP
-2. PROFILE_UPDATED
-3. Avatar Uploaded
-4. Account Bound
-
-**配置**:
-```
-Funnel step 1: USER_SIGNED_UP
-Funnel step 2: PROFILE_UPDATED
-Funnel step 3: Avatar Uploaded
-Funnel step 4: Account Bound
-Date range: Last 30 days
-```
-
----
-
-## 🔍 Dashboard 5: 搜索行为
-
-### Insight 5.1: 搜索量趋势
-**类型**: Trends
-**事件**: `SEARCH_QUERY_SUBMITTED`
-**配置**:
-```
-Event: SEARCH_QUERY_SUBMITTED
-Count of events
-Date range: Last 30 days
-Interval: Day
-```
-
-### Insight 5.2: 搜索无结果率
-**类型**: Trends (Formula)
-**计算**: (SEARCH_NO_RESULTS / SEARCH_QUERY_SUBMITTED) * 100
-**配置**:
-```
-Series A: SEARCH_NO_RESULTS (Count)
-Series B: SEARCH_QUERY_SUBMITTED (Count)
-Formula: (A / B) * 100
-Date range: Last 30 days
-Interval: Day
-```
-
-### Insight 5.3: 热门搜索词
-**类型**: Table
-**事件**: `SEARCH_QUERY_SUBMITTED`
-**配置**:
-```
-Event: SEARCH_QUERY_SUBMITTED
-Count of events
-Breakdown: query
-Date range: Last 7 days
-Order: Descending
-Limit: Top 20
-```
-
-### Insight 5.4: 搜索结果点击率
-**类型**: Funnel
-**步骤**:
-1. SEARCH_QUERY_SUBMITTED
-2. SEARCH_RESULT_CLICKED
-
-**配置**:
-```
-Funnel step 1: SEARCH_QUERY_SUBMITTED
-Funnel step 2: SEARCH_RESULT_CLICKED
-Breakdown: context
-Date range: Last 30 days
-```
-
-### Insight 5.5: 搜索筛选使用
-**类型**: Table
-**事件**: `SEARCH_FILTER_APPLIED`
-**配置**:
-```
-Event: SEARCH_FILTER_APPLIED
-Count of events
-Breakdown: filter_type
-Date range: Last 30 days
-Order: Descending
-```
-
----
-
-## 👥 推荐Cohorts（用户分组）
-
-### Cohort 1: 活跃用户
-**条件**:
-```
-用户在过去7天内执行了：
-  $pageview (至少5次)
-```
-
-### Cohort 2: 付费用户
-**条件**:
-```
-用户执行过：
-  SUBSCRIPTION_CREATED
-并且
-  subscription_tier 不等于 'free'
-```
-
-### Cohort 3: 社区活跃用户
-**条件**:
-```
-用户在过去30天内执行了：
-  Comment Added (至少1次)
-或
-  Comment Liked (至少3次)
-```
-
-### Cohort 4: 流失风险用户
-**条件**:
-```
-用户满足：
-  上次访问时间 > 7天前
-并且
-  历史访问次数 >= 5次
-```
-
-### Cohort 5: 高价值潜在用户
-**条件**:
-```
-用户在过去30天内：
-  PAYWALL_SHOWN (至少2次)
-并且
-  未执行过 SUBSCRIPTION_CREATED
-并且
-  $pageview (至少10次)
-```
-
-### Cohort 6: 新用户（激活中）
-**条件**:
-```
-用户执行过：
-  USER_SIGNED_UP (在过去7天内)
-```
-
----
-
-## 🎯 推荐Actions（动作定义）
-
-### Action 1: 深度参与
-**定义**: 用户在单次会话中执行了多个关键操作
-**包含事件**:
-- NEWS_ARTICLE_CLICKED (至少2次)
-- EVENT_DETAIL_VIEWED (至少1次)
-- Comment Added 或 Comment Liked (至少1次)
-
-### Action 2: 付费意向
-**定义**: 用户展现付费兴趣
-**包含事件**:
-- PAYWALL_SHOWN
-- PAYWALL_UPGRADE_CLICKED
-- SUBSCRIPTION_PAGE_VIEWED
-
-### Action 3: 模拟盘活跃
-**定义**: 用户积极使用模拟盘
-**包含事件**:
-- TRADING_SIMULATION_ENTERED
-- Simulation Order Placed (至少1次)
-- Simulation Holdings Viewed
-
----
-
-## 📱 配置步骤
-
-### 创建Dashboard
-1. 登录PostHog
-2. 左侧菜单选择 "Dashboards"
-3. 点击 "New dashboard"
-4. 输入Dashboard名称（如"核心指标Dashboard"）
-5. 点击 "Create"
-
-### 添加Insight
-1. 在Dashboard页面，点击 "Add insight"
-2. 选择Insight类型（Trends/Funnel/Retention等）
-3. 配置事件和参数
-4. 点击 "Save & add to dashboard"
-
-### 配置Cohort
-1. 左侧菜单选择 "Cohorts"
-2. 点击 "New cohort"
-3. 设置Cohort名称
-4. 添加筛选条件
-5. 点击 "Save"
-
-### 配置Action
-1. 左侧菜单选择 "Data management" -> "Actions"
-2. 点击 "New action"
-3. 选择 "From event or pageview"
-4. 添加匹配条件
-5. 点击 "Save"
-
----
-
-## 🔔 推荐Alerts（告警配置）
-
-### Alert 1: 支付成功率下降
-**条件**: 支付成功率 < 80%
-**检查频率**: 每小时
-**通知方式**: Email + Slack
-
-### Alert 2: 搜索无结果率过高
-**条件**: 搜索无结果率 > 30%
-**检查频率**: 每天
-**通知方式**: Email
-
-### Alert 3: 新用户注册激增
-**条件**: 新注册用户数 > 正常值的2倍
-**检查频率**: 每小时
-**通知方式**: Slack
-
-### Alert 4: 系统异常
-**条件**: 错误事件数 > 100/小时
-**检查频率**: 每15分钟
-**通知方式**: Email + Slack + PagerDuty
-
----
-
-## 💡 使用建议
-
-### 日常监控
-**建议查看频率**: 每天
-**关注Dashboard**:
-- 核心指标Dashboard
-- 收入转化Dashboard
-
-### 周度回顾
-**建议查看频率**: 每周一
-**关注Dashboard**:
-- 用户留存Dashboard
-- 功能使用Dashboard
-
-### 月度分析
-**建议查看频率**: 每月初
-**关注Dashboard**:
-- 所有Dashboard
-- Cohorts分析
-- Retention详细报告
-
-### 决策支持
-**使用场景**:
-- 功能优先级排序 → 查看功能使用Dashboard
-- 转化率优化 → 查看收入转化Dashboard
-- 用户流失分析 → 查看用户留存Dashboard
-- 搜索体验优化 → 查看搜索行为Dashboard
-
----
-
-## 📊 高级分析技巧
-
-### 1. Funnel分解分析
-在漏斗的每一步添加Breakdown，分析不同用户群的转化差异：
-- 按 subscription_tier 分解
-- 按 signup_method 分解
-- 按 $os 分解
-
-### 2. Cohort对比
-创建多个Cohort，在Insights中对比不同群体的行为：
-- 付费用户 vs 免费用户
-- 新用户 vs 老用户
-- 活跃用户 vs 流失用户
-
-### 3. Path Analysis
-使用Paths功能分析用户旅程：
-- 从注册到首次付费的路径
-- 从首页到核心功能的路径
-- 流失用户的最后操作路径
-
-### 4. 时间对比
-使用 "Compare to previous period" 功能：
-- 本周 vs 上周
-- 本月 vs 上月
-- 节假日 vs 平常
-
----
-
-## 🔗 相关资源
-
-- [PostHog Dashboard文档](https://posthog.com/docs/user-guides/dashboards)
-- [PostHog Insights文档](https://posthog.com/docs/user-guides/insights)
-- [PostHog Cohorts文档](https://posthog.com/docs/user-guides/cohorts)
-- [TRACKING_VALIDATION_CHECKLIST.md](./TRACKING_VALIDATION_CHECKLIST.md) - 验证清单
-
----
-
-**文档版本**: v1.0
-**最后更新**: 2025-10-29
-**维护者**: 数据分析团队

docs/POSTHOG_EVENT_TRACKING.md

@@ -1,841 +0,0 @@
-# PostHog 事件追踪实施总结
-
-## ✅ 已完成的追踪
-
-### 1. Home 页面（首页/落地页）
-
-**已实施的追踪事件**:
-
-#### 📄 页面浏览
-- **事件**: `LANDING_PAGE_VIEWED`
-- **触发时机**: 页面加载
-- **属性**:
-  - `timestamp` - 访问时间
-  - `is_authenticated` - 是否已登录
-  - `user_id` - 用户ID（如果已登录）
-
-#### 🎯 功能卡片点击
-- **事件**: `FEATURE_CARD_CLICKED`
-- **触发时机**: 用户点击任何功能卡片
-- **属性**:
-  - `feature_id` - 功能ID（news-catalyst, concepts, stocks, etc.）
-  - `feature_title` - 功能标题
-  - `feature_url` - 目标URL
-  - `is_featured` - 是否为推荐功能（新闻中心为 true）
-  - `link_type` - 链接类型（internal/external）
-
-**追踪的6个核心功能**:
-1. **新闻中心** (`news-catalyst`) - 推荐功能，黄色边框
-2. **概念中心** (`concepts`)
-3. **个股信息汇总** (`stocks`)
-4. **涨停板块分析** (`limit-analyse`)
-5. **个股罗盘** (`company`)
-6. **模拟盘交易** (`trading-simulation`)
-
----
-
-### 2. StockOverview 页面（个股中心）✅ 已完成
-
-**注意**：个股中心页面已完全实现 PostHog 追踪，通过 `src/views/StockOverview/hooks/useStockOverviewEvents.js` Hook。
-
-**已实施的追踪事件**:
-
-#### 📄 页面浏览
-- **事件**: `STOCK_OVERVIEW_VIEWED`
-- **触发时机**: 页面加载
-- **属性**:
-  - `timestamp` - 访问时间
-
-#### 📊 市场统计数据查看
-- **事件**: `STOCK_LIST_VIEWED`
-- **触发时机**: 加载市场统计数据
-- **属性**:
-  - `total_market_cap` - 总市值
-  - `total_volume` - 总成交量
-  - `rising_stocks` - 上涨股票数
-  - `falling_stocks` - 下跌股票数
-  - `data_date` - 数据日期
-
-#### 🔍 搜索追踪
-- **事件**: `SEARCH_INITIATED` / `STOCK_SEARCHED`
-- **触发时机**: 用户输入搜索、完成搜索
-- **属性**:
-  - `query` - 搜索关键词
-  - `result_count` - 搜索结果数量
-  - `has_results` - 是否有结果
-  - `context` - 固定为 'stock_overview'
-
-#### 🎯 搜索结果点击
-- **事件**: `SEARCH_RESULT_CLICKED`
-- **触发时机**: 用户点击搜索结果
-- **属性**:
-  - `stock_code` - 股票代码
-  - `stock_name` - 股票名称
-  - `exchange` - 交易所
-  - `position` - 在搜索结果中的位置
-  - `context` - 固定为 'stock_overview'
-
-#### 🔥 概念卡片点击
-- **事件**: `CONCEPT_CLICKED`
-- **触发时机**: 用户点击热门概念卡片
-- **属性**:
-  - `concept_name` - 概念名称
-  - `concept_code` - 概念代码
-  - `change_percent` - 涨跌幅
-  - `stock_count` - 股票数量
-  - `rank` - 排名
-  - `source` - 固定为 'daily_hot_concepts'
-
-#### 🏷️ 概念股票标签点击
-- **事件**: `CONCEPT_STOCK_CLICKED`
-- **触发时机**: 点击概念下的股票标签
-- **属性**:
-  - `stock_code` - 股票代码
-  - `stock_name` - 股票名称
-  - `concept_name` - 所属概念
-  - `source` - 固定为 'daily_hot_concepts_tag'
-
-#### 📊 热力图股票点击
-- **事件**: `STOCK_CLICKED`
-- **触发时机**: 点击热力图中的股票
-- **属性**:
-  - `stock_code` - 股票代码
-  - `stock_name` - 股票名称
-  - `change_percent` - 涨跌幅
-  - `market_cap_range` - 市值区间
-  - `source` - 固定为 'market_heatmap'
-
-#### 📅 日期选择变化
-- **事件**: `SEARCH_FILTER_APPLIED`
-- **触发时机**: 用户选择不同的交易日期
-- **属性**:
-  - `filter_type` - 固定为 'date'
-  - `filter_value` - 新选择的日期
-  - `previous_value` - 之前的日期
-  - `context` - 固定为 'stock_overview'
-
-**实施方式**: Custom Hook (`useStockOverviewEvents.js`) 已集成
-
----
-
-### 3. Concept 页面（概念中心）
-
-**已实施的追踪事件**:
-
-#### 📄 页面浏览
-- **事件**: `CONCEPT_CENTER_VIEWED`
-- **触发时机**: 页面加载
-- **属性**:
-  - `timestamp` - 访问时间
-
-#### 🔍 搜索查询
-- **事件**: `SEARCH_QUERY_SUBMITTED`
-- **触发时机**: 用户搜索概念
-- **属性**:
-  - `query` - 搜索关键词
-  - `category` - 固定为 'concept'
-  - `result_count` - 搜索结果数量
-  - `has_results` - 是否有结果
-
-#### 🎚️ 筛选追踪
-- **事件**: `SEARCH_FILTER_APPLIED`
-- **触发时机**: 用户更改筛选条件
-- **属性**:
-  - `filter_type` - 筛选类型（sort/date）
-  - `filter_value` - 筛选值
-  - `previous_value` - 之前的值
-  - `context` - 固定为 'concept_center'
-
-**支持的筛选类型**:
-1. **排序** (`sort`): 涨跌幅/相关度/股票数量/概念名称
-2. **日期范围** (`date`): 选择交易日期
-
-#### 🎯 概念卡片点击
-- **事件**: `CONCEPT_CLICKED`
-- **触发时机**: 用户点击概念卡片
-- **属性**:
-  - `concept_id` - 概念ID
-  - `concept_name` - 概念名称
-  - `change_percent` - 涨跌幅
-  - `stock_count` - 股票数量
-  - `position` - 在列表中的位置
-  - `source` - 固定为 'concept_center_list'
-
-#### 👀 查看个股
-- **事件**: `CONCEPT_STOCKS_VIEWED`
-- **触发时机**: 用户点击"查看个股"按钮
-- **属性**:
-  - `concept_name` - 概念名称
-  - `stock_count` - 股票数量
-  - `source` - 固定为 'concept_center'
-
-#### 🏷️ 概念股票点击
-- **事件**: `CONCEPT_STOCK_CLICKED`
-- **触发时机**: 点击概念股票表格中的股票
-- **属性**:
-  - `stock_code` - 股票代码
-  - `stock_name` - 股票名称
-  - `concept_name` - 所属概念
-  - `source` - 固定为 'concept_center_stock_table'
-
-#### 📊 历史时间轴查看
-- **事件**: `CONCEPT_TIMELINE_VIEWED`
-- **触发时机**: 用户点击"历史时间轴"按钮
-- **属性**:
-  - `concept_id` - 概念ID
-  - `concept_name` - 概念名称
-  - `source` - 固定为 'concept_center'
-
-#### 📄 翻页追踪
-- **事件**: `NEWS_LIST_VIEWED`
-- **触发时机**: 用户翻页
-- **属性**:
-  - `page` - 页码
-  - `filters` - 当前筛选条件
-    - `sort` - 排序方式
-    - `has_query` - 是否有搜索词
-    - `date` - 日期
-  - `context` - 固定为 'concept_center'
-
-#### 🔄 视图模式切换
-- **事件**: `VIEW_MODE_CHANGED`
-- **触发时机**: 用户切换网格/列表视图
-- **属性**:
-  - `view_mode` - 新视图模式（grid/list）
-  - `previous_mode` - 之前的模式
-  - `context` - 固定为 'concept_center'
-
----
-
-### 4. Company 页面（公司详情/个股罗盘）
-
-**已实施的追踪事件**:
-
-#### 📄 页面浏览
-- **事件**: `COMPANY_PAGE_VIEWED`
-- **触发时机**: 页面加载
-- **属性**:
-  - `timestamp` - 访问时间
-  - `stock_code` - 当前查看的股票代码
-
-#### 🔍 股票搜索
-- **事件**: `STOCK_SEARCHED`
-- **触发时机**: 用户输入股票代码并查询
-- **属性**:
-  - `query` - 搜索的股票代码
-  - `stock_code` - 股票代码
-  - `previous_stock_code` - 之前查看的股票代码
-  - `context` - 固定为 'company_page'
-
-#### 🔄 Tab 切换
-- **事件**: `TAB_CHANGED`
-- **触发时机**: 用户切换不同的 Tab
-- **属性**:
-  - `tab_index` - Tab 索引（0-3）
-  - `tab_name` - Tab 名称（公司概览/股票行情/财务全景/盈利预测）
-  - `previous_tab_index` - 之前的 Tab 索引
-  - `stock_code` - 当前股票代码
-  - `context` - 固定为 'company_page'
-
-**支持的 Tab**:
-1. **公司概览** (index 0): 公司基本信息
-2. **股票行情** (index 1): 实时行情数据
-3. **财务全景** (index 2): 财务报表分析
-4. **盈利预测** (index 3): 盈利预测数据
-
-#### ⭐ 自选股管理
-- **事件**: `WATCHLIST_ADDED` / `WATCHLIST_REMOVED`
-- **触发时机**: 用户添加/移除自选股
-- **属性**:
-  - `stock_code` - 股票代码
-  - `source` - 固定为 'company_page'
-
----
-
-### 5. Community 页面（新闻催化分析）
-
-**已实施的追踪事件**:
-
-#### 📄 页面浏览
-- **事件**: `COMMUNITY_PAGE_VIEWED`
-- **触发时机**: 页面加载
-- **属性**:
-  - `timestamp` - 访问时间
-  - `has_hot_events` - 是否有热点事件
-  - `has_keywords` - 是否有热门关键词
-
-#### 🔍 搜索追踪
-- **事件**: `SEARCH_QUERY_SUBMITTED`
-- **触发时机**: 用户输入搜索关键词
-- **属性**:
-  - `query` - 搜索关键词
-  - `category` - 分类（固定为 'news'）
-  - `previous_query` - 上一次搜索词
-
-#### 🎚️ 筛选追踪
-- **事件**: `SEARCH_FILTER_APPLIED`
-- **触发时机**: 用户更改筛选条件
-- **属性**:
-  - `filter_type` - 筛选类型（sort/importance/date_range/industry）
-  - `filter_value` - 筛选值
-  - `previous_value` - 上一次的值
-
-**支持的筛选类型**:
-1. **排序** (`sort`): 最新/最热/重要性
-2. **重要性** (`importance`): 全部/高/中/低
-3. **时间范围** (`date_range`): 今天/近7天/近30天
-4. **行业** (`industry`): 各行业代码
-
-#### 🗞️ 新闻点击追踪
-- **事件**: `NEWS_ARTICLE_CLICKED`
-- **触发时机**: 用户点击新闻事件
-- **属性**:
-  - `event_id` - 事件ID
-  - `event_title` - 事件标题
-  - `importance` - 重要性等级
-  - `source` - 来源（固定为 'community_page'）
-  - `has_stocks` - 是否包含相关股票
-  - `has_concepts` - 是否包含相关概念
-
-#### 📖 详情查看追踪
-- **事件**: `NEWS_DETAIL_OPENED`
-- **触发时机**: 用户点击"查看详情"
-- **属性**:
-  - `event_id` - 事件ID
-  - `source` - 来源（固定为 'community_page'）
-
-#### 📄 翻页追踪
-- **事件**: `NEWS_LIST_VIEWED`
-- **触发时机**: 用户翻页
-- **属性**:
-  - `page` - 页码
-  - `filters` - 当前筛选条件
-    - `sort` - 排序方式
-    - `importance` - 重要性
-    - `has_query` - 是否有搜索词
-
----
-
-## 🛠️ 实施方式
-
-### 方案：Custom Hook 集成（推荐）
-
-**优势**:
-- ✅ 集中管理，易于维护
-- ✅ 自动追踪，无需修改组件
-- ✅ 符合关注点分离原则
-- ✅ 便于测试和调试
-
-### 修改的文件
-
-#### 0. `src/views/StockOverview/hooks/useStockOverviewEvents.js` ✅
-
-**文件已存在**，无需修改。已完整实现个股中心的所有追踪事件。
-
-#### 1. `src/views/Concept/hooks/useConceptEvents.js`
-
-**新建 Hook 文件**:
-```javascript
-import { usePostHogTrack } from '../../../hooks/usePostHogRedux';
-import { RETENTION_EVENTS } from '../../../lib/constants';
-```
-
-**提供的追踪函数**:
-- `trackConceptSearched()` - 搜索概念
-- `trackFilterApplied()` - 筛选变化
-- `trackConceptClicked()` - 概念点击
-- `trackConceptStocksViewed()` - 查看个股
-- `trackConceptStockClicked()` - 点击概念股票
-- `trackConceptTimelineViewed()` - 历史时间轴
-- `trackPageChange()` - 翻页
-- `trackViewModeChanged()` - 视图切换
-
-#### 2. `src/views/Company/hooks/useCompanyEvents.js`
-
-**新建 Hook 文件**:
-```javascript
-import { usePostHogTrack } from '../../../hooks/usePostHogRedux';
-import { RETENTION_EVENTS } from '../../../lib/constants';
-```
-
-**提供的追踪函数**:
-- `trackStockSearched()` - 股票搜索
-- `trackTabChanged()` - Tab 切换
-- `trackWatchlistAdded()` - 加入自选
-- `trackWatchlistRemoved()` - 移除自选
-
-#### 3. `src/views/Company/index.js`
-
-**添加的导入**:
-```javascript
-import { useCompanyEvents } from './hooks/useCompanyEvents';
-```
-
-**添加的 Hook**:
-```javascript
-const {
-  trackStockSearched,
-  trackTabChanged,
-  trackWatchlistAdded,
-  trackWatchlistRemoved,
-} = useCompanyEvents({ stockCode });
-```
-
-**添加的 State**:
-```javascript
-const [currentTabIndex, setCurrentTabIndex] = useState(0);
-```
-
-**修改的函数**:
-1. **`handleSearch`**: 追踪股票搜索
-2. **`handleWatchlistToggle`**: 追踪自选股添加/移除
-3. **Tabs `onChange`**: 追踪 Tab 切换
-
-#### 4. `src/views/Concept/index.js`
-
-**添加的导入**:
-```javascript
-import { useConceptEvents } from './hooks/useConceptEvents';
-```
-
-**添加的 Hook**:
-```javascript
-const {
-  trackConceptSearched,
-  trackFilterApplied,
-  trackConceptClicked,
-  trackConceptStocksViewed,
-  trackConceptStockClicked,
-  trackConceptTimelineViewed,
-  trackPageChange,
-  trackViewModeChanged,
-} = useConceptEvents({ navigate });
-```
-
-**修改的函数**:
-1. **`handleSearch`**: 追踪搜索查询
-2. **`handleSortChange`**: 追踪排序变化
-3. **`handleDateChange`**: 追踪日期变化
-4. **`handlePageChange`**: 追踪翻页
-5. **`handleConceptClick`**: 追踪概念点击
-6. **`handleViewStocks`**: 追踪查看个股
-7. **`handleViewContent`**: 追踪历史时间轴
-8. **视图切换按钮**: 追踪网格/列表切换
-
-#### 3. `src/views/Home/HomePage.js`
-
-**添加的导入**:
-```javascript
-import { usePostHogTrack } from '../../hooks/usePostHogRedux';
-import { ACQUISITION_EVENTS } from '../../lib/constants';
-```
-
-**添加的 Hook**:
-```javascript
-const { track } = usePostHogTrack();
-```
-
-**添加的 useEffect**（页面浏览追踪）:
-```javascript
-useEffect(() => {
-  track(ACQUISITION_EVENTS.LANDING_PAGE_VIEWED, {
-    timestamp: new Date().toISOString(),
-    is_authenticated: isAuthenticated,
-    user_id: user?.id || null,
-  });
-}, [track, isAuthenticated, user?.id]);
-```
-
-**修改的函数**:
-- **`handleProductClick`**: 从接收 URL 改为接收完整 feature 对象，添加追踪逻辑
-
-**修改后的代码**:
-```javascript
-const handleProductClick = useCallback((feature) => {
-  // 🎯 PostHog 追踪：功能卡片点击
-  track(ACQUISITION_EVENTS.FEATURE_CARD_CLICKED, {
-    feature_id: feature.id,
-    feature_title: feature.title,
-    feature_url: feature.url,
-    is_featured: feature.featured || false,
-    link_type: feature.url.startsWith('http') ? 'external' : 'internal',
-  });
-
-  // 原有导航逻辑
-  if (feature.url.startsWith('http')) {
-    window.open(feature.url, '_blank');
-  } else {
-    navigate(feature.url);
-  }
-}, [track, navigate]);
-```
-
-**更新的 onClick 事件**:
-```javascript
-// 从
-onClick={() => handleProductClick(coreFeatures[0].url)}
-
-// 改为
-onClick={() => handleProductClick(coreFeatures[0])}
-```
-
-#### 1. `src/views/Community/hooks/useEventFilters.js`
-
-**添加的导入**:
-```javascript
-import { usePostHogTrack } from '../../../hooks/usePostHogRedux';
-import { RETENTION_EVENTS } from '../../../lib/constants';
-```
-
-**添加的Hook**:
-```javascript
-const { track } = usePostHogTrack();
-```
-
-**修改的函数**:
-1. **`updateFilters`**: 追踪搜索和筛选
-2. **`handlePageChange`**: 追踪翻页
-3. **`handleEventClick`**: 追踪新闻点击
-4. **`handleViewDetail`**: 追踪详情查看
-
-#### 2. `src/views/Community/index.js`
-
-**添加的导入**:
-```javascript
-import { usePostHogTrack } from '../../hooks/usePostHogRedux';
-import { RETENTION_EVENTS } from '../../lib/constants';
-```
-
-**添加的Hook**:
-```javascript
-const { track } = usePostHogTrack();
-```
-
-**添加的useEffect**:
-```javascript
-useEffect(() => {
-  track(RETENTION_EVENTS.COMMUNITY_PAGE_VIEWED, {
-    timestamp: new Date().toISOString(),
-    has_hot_events: hotEvents && hotEvents.length > 0,
-    has_keywords: popularKeywords && popularKeywords.length > 0,
-  });
-}, [track]);
-```
-
----
-
-## 📊 追踪效果示例
-
-### 用户行为路径示例
-
-**首页转化路径**:
-```
-1. 游客访问首页
-   → 触发: LANDING_PAGE_VIEWED
-   → 属性: { is_authenticated: false, user_id: null }
-
-2. 点击"新闻中心"功能卡片
-   → 触发: FEATURE_CARD_CLICKED
-   → 属性: { feature_id: "news-catalyst", feature_title: "新闻中心", is_featured: true, link_type: "internal" }
-
-3. 进入 Community 页面
-   → 触发: COMMUNITY_PAGE_VIEWED
-```
-
-**Community 页面行为路径**:
-```
-1. 用户进入 Community 页面
-   → 触发: COMMUNITY_PAGE_VIEWED
-
-2. 用户搜索 "人工智能"
-   → 触发: SEARCH_QUERY_SUBMITTED
-   → 属性: { query: "人工智能", category: "news" }
-
-3. 用户筛选 "重要性：高"
-   → 触发: SEARCH_FILTER_APPLIED
-   → 属性: { filter_type: "importance", filter_value: "high" }
-
-4. 用户点击第一条新闻
-   → 触发: NEWS_ARTICLE_CLICKED
-   → 属性: { event_id: "123", event_title: "...", importance: "high", source: "community_page" }
-
-5. 用户翻到第2页
-   → 触发: NEWS_LIST_VIEWED
-   → 属性: { page: 2, filters: { sort: "new", importance: "high", has_query: true } }
-
-6. 用户点击"查看详情"
-   → 触发: NEWS_DETAIL_OPENED
-   → 属性: { event_id: "456", source: "community_page" }
-```
-
----
-
-## 🧪 测试方法
-
-### 1. 使用 Redux DevTools
-
-1. 打开应用：`npm start`
-2. 打开浏览器 Redux DevTools
-3. 筛选 `posthog/trackEvent` actions
-4. 执行各种操作
-5. 查看追踪的事件和属性
-
-### 2. 控制台日志
-
-开发环境下，PostHog 会自动输出日志：
-
-```
-📍 Event tracked: Community Page Viewed { timestamp: "...", has_hot_events: true }
-📍 Event tracked: Search Query Submitted { query: "人工智能", category: "news" }
-📍 Event tracked: Search Filter Applied { filter_type: "importance", filter_value: "high" }
-```
-
-### 3. PostHog Dashboard
-
-1. 登录 PostHog 后台
-2. 查看 "Events" 页面
-3. 筛选 Community 相关事件：
-   - `Community Page Viewed`
-   - `Search Query Submitted`
-   - `Search Filter Applied`
-   - `News Article Clicked`
-   - `News List Viewed`
-
----
-
-## 📈 数据分析建议
-
-### 1. 搜索行为分析
-
-**问题**: 用户最常搜索什么？
-
-**方法**:
-- 筛选 `SEARCH_QUERY_SUBMITTED` 事件
-- 按 `query` 属性分组
-- 查看 Top 关键词
-
-### 2. 筛选偏好分析
-
-**问题**: 用户更喜欢什么排序方式？
-
-**方法**:
-- 筛选 `SEARCH_FILTER_APPLIED` 事件
-- 按 `filter_type: "sort"` 筛选
-- 按 `filter_value` 分组统计
-
-### 3. 新闻热度分析
-
-**问题**: 哪些新闻最受欢迎？
-
-**方法**:
-- 筛选 `NEWS_ARTICLE_CLICKED` 事件
-- 按 `event_id` 分组
-- 统计点击次数
-
-### 4. 用户旅程分析
-
-**问题**: 用户从搜索到点击的转化率？
-
-**方法**:
-- 创建漏斗：
-  1. `COMMUNITY_PAGE_VIEWED`
-  2. `SEARCH_QUERY_SUBMITTED`
-  3. `NEWS_ARTICLE_CLICKED`
-- 分析每一步的流失率
-
----
-
-## 🔧 扩展计划
-
-### 下一步：其他页面追踪
-
-按优先级排序：
-
-1. **Concept（概念中心）** ⭐⭐⭐
-   - 搜索概念
-   - 点击概念卡片
-   - 查看概念详情
-   - 点击概念内股票
-
-2. **StockOverview（个股中心）** ⭐⭐⭐
-   - 搜索股票
-   - 点击股票卡片
-   - 查看股票详情
-   - 切换 Tab
-
-3. **LimitAnalyse（涨停分析）** ⭐⭐
-   - 进入页面
-   - 点击涨停板块
-   - 展开板块详情
-   - 点击涨停个股
-
-4. **TradingSimulation（模拟盘）** ⭐⭐
-   - 进入模拟盘
-   - 下单操作
-   - 查看持仓
-   - 查看历史
-
-5. **Company（公司详情）** ⭐
-   - 查看公司概览
-   - 查看财务全景
-   - 查看盈利预测
-   - Tab 切换
-
----
-
-## 💡 最佳实践
-
-### 1. 属性命名规范
-
-- 使用 **snake_case** 命名（与 PostHog 推荐一致）
-- 属性名要 **描述性强**，易于理解
-- 使用 **布尔值** 表示是/否（has_xxx, is_xxx）
-- 使用 **枚举值** 表示类别（filter_type: "sort"）
-
-### 2. 事件追踪原则
-
-- **追踪用户意图**，而不仅仅是点击
-- **添加上下文**，帮助分析（previous_value, source）
-- **保持一致性**，相似事件使用相似属性
-- **避免敏感信息**，不追踪用户隐私数据
-
-### 3. 性能优化
-
-- 使用 **`usePostHogTrack`** 而不是 `usePostHogRedux`
-  - 更轻量，只订阅追踪功能
-  - 避免不必要的重渲染
-- 在 **Custom Hooks** 中集成，而不是每个组件
-  - 集中管理，易于维护
-  - 减少重复代码
-
----
-
-## ⚠️ 注意事项
-
-### 1. 依赖管理
-
-确保 `useCallback` 的依赖数组包含 `track`：
-
-```javascript
-// ✅ 正确
-const handleClick = useCallback(() => {
-  track(EVENT_NAME, { ... });
-}, [track]);
-
-// ❌ 错误（缺少 track）
-const handleClick = useCallback(() => {
-  track(EVENT_NAME, { ... });
-}, []);
-```
-
-### 2. 事件去重
-
-避免重复追踪相同事件：
-
-```javascript
-// ✅ 正确（只在值变化时追踪）
-if (newFilters.sort !== filters.sort) {
-  track(SEARCH_FILTER_APPLIED, { ... });
-}
-
-// ❌ 错误（每次都追踪）
-track(SEARCH_FILTER_APPLIED, { ... });
-```
-
-### 3. 空值处理
-
-使用安全的属性访问：
-
-```javascript
-// ✅ 正确
-has_stocks: !!(event.related_stocks && event.related_stocks.length > 0)
-
-// ❌ 错误（可能报错）
-has_stocks: event.related_stocks.length > 0
-```
-
----
-
-## 📚 参考资料
-
-- **PostHog Events 文档**: https://posthog.com/docs/data/events
-- **PostHog Properties 文档**: https://posthog.com/docs/data/properties
-- **Redux PostHog 集成**: `POSTHOG_REDUX_INTEGRATION.md`
-- **事件常量定义**: `src/lib/constants.js`
-
----
-
-## 🎉 总结
-
-### 已实现的功能
-
-- ✅ Home 页面追踪（2个事件）
-- ✅ StockOverview 页面完整追踪（10个事件）✨ 已完成
-- ✅ Concept 页面完整追踪（9个事件）
-- ✅ Company 页面完整追踪（5个事件）
-- ✅ Community 页面完整追踪（7个事件）
-- ✅ Custom Hook 集成方案
-- ✅ Redux DevTools 调试支持
-- ✅ 详细的事件属性
-
-### 追踪的用户行为
-
-**Home 页面**:
-1. **页面访问** - 了解流量来源、登录转化率
-2. **功能卡片点击** - 识别最受欢迎的功能
-3. **推荐功能效果** - 分析特色功能（新闻中心）的点击率
-
-**StockOverview 页面** ✨:
-1. **页面访问** - 了解个股中心流量
-2. **搜索行为** - 股票搜索、搜索结果点击
-3. **概念交互** - 热门概念点击、概念股票标签点击
-4. **热力图交互** - 热力图中股票点击
-5. **数据筛选** - 日期选择变化
-6. **市场统计** - 市场数据查看
-
-**Concept 页面**:
-1. **页面访问** - 了解概念中心流量
-2. **搜索行为** - 概念搜索、搜索结果数量
-3. **筛选偏好** - 排序方式、日期选择
-4. **概念交互** - 概念点击、位置追踪
-5. **个股查看** - 查看个股、股票点击
-6. **时间轴查看** - 历史时间轴
-7. **翻页行为** - 优化分页逻辑
-8. **视图切换** - 网格/列表偏好
-
-**Company 页面**:
-1. **页面访问** - 了解公司详情页流量
-2. **股票搜索** - 用户查询哪些股票
-3. **Tab 切换** - 用户最关注哪个 Tab（概览/行情/财务/预测）
-4. **自选股管理** - 自选股添加/移除行为
-5. **股票切换** - 分析用户查看股票的路径
-
-**Community 页面**:
-1. **页面访问** - 了解流量来源
-2. **搜索行为** - 了解用户需求
-3. **筛选偏好** - 优化默认设置
-4. **内容点击** - 识别热门内容
-5. **详情查看** - 分析用户兴趣
-6. **翻页行为** - 优化分页逻辑
-
-### 下一步计划
-
-1. ~~在关键页面实施追踪（Home, StockOverview, Concept, Company, Community）~~ ✅ 已完成
-2. **下一步**：其他页面追踪
-   - LimitAnalyse（涨停分析）⭐⭐
-   - TradingSimulation（模拟盘）⭐⭐
-3. 创建 PostHog Dashboard 和 Insights
-4. 设置用户行为漏斗分析
-5. 配置 Feature Flags 进行 A/B 测试
-
----
-
-**Home, StockOverview, Concept, Company, Community 页面追踪全部完成！** 🚀
-
-现在你可以在 PostHog 后台看到完整的用户行为数据：
-- **首页** → **个股中心/概念中心/公司详情/新闻中心** 的完整转化路径
-- **搜索行为**、**筛选偏好**、**内容点击** 的详细数据
-- **Tab 切换**、**视图切换**、**翻页行为** 的用户习惯分析
-- **自选股管理** 的用户行为追踪
-
-共追踪 **33个事件**，覆盖 **5个核心页面**。

docs/POSTHOG_INTEGRATION.md

@@ -1,255 +0,0 @@
-# PostHog 集成完成总结
-
-## ✅ 已完成的工作
-
-### 1. 安装依赖
-```bash
-npm install posthog-js@^1.280.1
-```
-
-### 2. 创建核心文件
-
-#### 📦 PostHog SDK 封装 (`src/lib/posthog.js`)
-- 提供完整的 PostHog API 封装
-- 包含函数：
-  - `initPostHog()` - 初始化 SDK
-  - `identifyUser()` - 识别用户
-  - `trackEvent()` - 追踪自定义事件
-  - `trackPageView()` - 追踪页面浏览
-  - `resetUser()` - 重置用户会话（登出时调用）
-  - `optIn()` / `optOut()` - 用户隐私控制
-  - `getFeatureFlag()` - 获取 Feature Flag（A/B 测试）
-
-#### 📊 事件常量定义 (`src/lib/constants.js`)
-基于 AARRR 框架的完整事件体系：
-- **Acquisition（获客）**: Landing Page, CTA, Pricing
-- **Activation（激活）**: Login, Signup, WeChat QR
-- **Retention（留存）**: Dashboard, News, Concept, Stock, Company
-- **Referral（推荐）**: Share, Invite
-- **Revenue（收入）**: Payment, Subscription
-
-#### 🪝 React Hooks
-- `usePostHog` (`src/hooks/usePostHog.js`) - 在组件中使用 PostHog
-- `usePageTracking` (`src/hooks/usePageTracking.js`) - 自动页面浏览追踪
-
-#### 🎁 Provider 组件 (`src/components/PostHogProvider.js`)
-- 全局初始化 PostHog
-- 自动追踪页面浏览
-- 根据路由自动识别页面类型
-
-### 3. 集成到应用
-
-#### App.js 修改
-在最外层添加了 `PostHogProvider`：
-```jsx
-<PostHogProvider>
-  <ReduxProvider store={store}>
-    <ChakraProvider theme={theme}>
-      {/* 其他 Providers */}
-    </ChakraProvider>
-  </ReduxProvider>
-</PostHogProvider>
-```
-
-### 4. 环境变量配置
-
-`.env` 文件中添加了：
-```bash
-# PostHog API Key（需要填写你的 PostHog 项目 Key）
-REACT_APP_POSTHOG_KEY=
-
-# PostHog API Host
-REACT_APP_POSTHOG_HOST=https://app.posthog.com
-
-# Session Recording 开关
-REACT_APP_ENABLE_SESSION_RECORDING=false
-```
-
----
-
-## 🎯 如何使用
-
-### 1. 配置 PostHog API Key
-
-1. 登录 [PostHog](https://app.posthog.com)
-2. 创建项目（或使用现有项目）
-3. 在项目设置中找到 **API Key**
-4. 复制 API Key 并填入 `.env` 文件：
-   ```bash
-   REACT_APP_POSTHOG_KEY=phc_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-   ```
-
-### 2. 自动追踪页面浏览
-
-✅ **无需额外配置**，PostHogProvider 会自动追踪所有路由变化和页面浏览。
-
-### 3. 追踪自定义事件
-
-在任意组件中使用 `usePostHog` Hook：
-
-```jsx
-import { usePostHog } from 'hooks/usePostHog';
-import { RETENTION_EVENTS } from 'lib/constants';
-
-function MyComponent() {
-  const { track } = usePostHog();
-
-  const handleClick = () => {
-    track(RETENTION_EVENTS.NEWS_ARTICLE_CLICKED, {
-      article_id: '12345',
-      article_title: '市场分析报告',
-      source: 'community_page',
-    });
-  };
-
-  return <button onClick={handleClick}>阅读文章</button>;
-}
-```
-
-### 4. 用户识别（登录时）
-
-在 `AuthContext` 中，登录成功后调用：
-
-```jsx
-import { identifyUser } from 'lib/posthog';
-
-// 登录成功后
-identifyUser(user.id, {
-  email: user.email,
-  username: user.username,
-  subscription_tier: user.subscription_type || 'free',
-  registration_date: user.created_at,
-});
-```
-
-### 5. 重置用户会话（登出时）
-
-在 `AuthContext` 中，登出时调用：
-
-```jsx
-import { resetUser } from 'lib/posthog';
-
-// 登出时
-resetUser();
-```
-
----
-
-## 📊 PostHog 功能
-
-### 1. 页面浏览分析
-- 自动追踪所有页面访问
-- 分析用户访问路径
-- 识别热门页面
-
-### 2. 用户行为分析
-- 追踪用户点击、搜索、筛选等行为
-- 分析功能使用频率
-- 了解用户偏好
-
-### 3. 漏斗分析
-- 分析用户转化路径
-- 识别流失点
-- 优化用户体验
-
-### 4. 队列分析（Cohort Analysis）
-- 按注册时间、订阅类型等分组用户
-- 分析不同用户群体的行为差异
-
-### 5. Session Recording（可选）
-- 录制用户操作视频
-- 可视化用户体验问题
-- 需要在 `.env` 中开启：`REACT_APP_ENABLE_SESSION_RECORDING=true`
-
-### 6. Feature Flags（A/B 测试）
-```jsx
-const { getFlag, isEnabled } = usePostHog();
-
-// 检查功能开关
-if (isEnabled('new_dashboard_design')) {
-  return <NewDashboard />;
-} else {
-  return <OldDashboard />;
-}
-```
-
----
-
-## 🔒 隐私和安全
-
-### 自动隐私保护
-- 自动屏蔽密码、邮箱、手机号输入框
-- 不追踪敏感 API 端点（`/api/auth/login`, `/api/payment` 等）
-- 尊重浏览器 Do Not Track 设置
-
-### 用户隐私控制
-用户可选择退出追踪：
-```jsx
-const { optOut, optIn, isOptedOut } = usePostHog();
-
-// 退出追踪
-optOut();
-
-// 重新加入
-optIn();
-
-// 检查状态
-if (isOptedOut()) {
-  console.log('用户已退出追踪');
-}
-```
-
----
-
-## 🚀 下一步建议
-
-### 1. 在关键页面添加事件追踪
-
-例如在 **Community**、**Concept**、**Stock** 等页面添加：
-- 搜索事件
-- 点击事件
-- 筛选事件
-
-### 2. 在 AuthContext 中集成用户识别
-
-登录成功时调用 `identifyUser()`，登出时调用 `resetUser()`
-
-### 3. 设置 Feature Flags
-
-在 PostHog 后台创建 Feature Flags，用于 A/B 测试新功能
-
-### 4. 配置 Dashboard 和 Insights
-
-在 PostHog 后台创建：
-- 用户活跃度 Dashboard
-- 功能使用频率 Insights
-- 转化漏斗分析
-
----
-
-## 📚 参考资料
-
-- [PostHog 官方文档](https://posthog.com/docs)
-- [PostHog React 集成](https://posthog.com/docs/libraries/react)
-- [PostHog Feature Flags](https://posthog.com/docs/feature-flags)
-- [PostHog Session Recording](https://posthog.com/docs/session-replay)
-
----
-
-## ⚠️ 注意事项
-
-1. **开发环境下会自动启用调试模式**，控制台会输出详细的追踪日志
-2. **PostHog API Key 为空时**，SDK 会发出警告但不会影响应用运行
-3. **Session Recording 默认关闭**，需要时再开启以节省资源
-4. **所有事件常量已定义**在 `src/lib/constants.js`，使用时直接导入
-
----
-
-**集成完成！** 🎉
-
-现在你可以：
-1. 填写 PostHog API Key
-2. 启动应用：`npm start`
-3. 在 PostHog 后台查看实时数据
-
-如有问题，请参考 PostHog 官方文档或联系技术支持。

docs/POSTHOG_REDUX_INTEGRATION.md

@@ -1,439 +0,0 @@
-# PostHog Redux 集成完成总结
-
-## ✅ 已完成的工作
-
-PostHog 已成功从 **React Context** 迁移到 **Redux** 进行全局状态管理！
-
-### 1. 创建的核心文件
-
-#### 📦 Redux Slice (`src/store/slices/posthogSlice.js`)
-完整的 PostHog 状态管理：
-- **State 管理**: 初始化状态、用户信息、事件队列、Feature Flags
-- **Async Thunks**:
-  - `initializePostHog()` - 初始化 SDK
-  - `identifyUser()` - 识别用户
-  - `resetUser()` - 重置会话
-  - `trackEvent()` - 追踪事件
-  - `flushCachedEvents()` - 刷新离线事件
-- **Selectors**: 提供便捷的状态选择器
-
-#### ⚡ Redux Middleware (`src/store/middleware/posthogMiddleware.js`)
-自动追踪中间件：
-- **自动拦截 Actions**: 当特定 Redux actions 被 dispatch 时自动追踪
-- **路由追踪**: 自动识别页面类型并追踪浏览
-- **离线事件缓存**: 网络恢复时自动刷新缓存事件
-- **性能追踪**: 追踪耗时较长的操作
-
-**自动追踪的 Actions**:
-```javascript
-'auth/login/fulfilled' → USER_LOGGED_IN
-'auth/logout' → USER_LOGGED_OUT
-'communityData/fetchHotEvents/fulfilled' → NEWS_LIST_VIEWED
-'payment/success' → PAYMENT_SUCCESSFUL
-// ... 更多
-```
-
-#### 🪝 React Hooks (`src/hooks/usePostHogRedux.js`)
-提供便捷的 API：
-- `usePostHogRedux()` - 完整功能 Hook
-- `usePostHogTrack()` - 仅追踪功能（性能优化）
-- `usePostHogFlags()` - 仅 Feature Flags（性能优化）
-- `usePostHogUser()` - 仅用户管理（性能优化）
-
-### 2. 修改的文件
-
-#### Redux Store (`src/store/index.js`)
-```javascript
-import posthogReducer from './slices/posthogSlice';
-import posthogMiddleware from './middleware/posthogMiddleware';
-
-export const store = configureStore({
-  reducer: {
-    communityData: communityDataReducer,
-    posthog: posthogReducer, // ✅ 新增
-  },
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware({...})
-      .concat(posthogMiddleware), // ✅ 新增
-});
-```
-
-#### App.js
-- ❌ 移除了 `<PostHogProvider>` 包装
-- ✅ 在 `AppContent` 中添加 Redux 初始化：
-```javascript
-useEffect(() => {
-  dispatch(initializePostHog());
-}, [dispatch]);
-```
-
-### 3. 保留的文件（仍然需要）
-
-- ✅ `src/lib/posthog.js` - PostHog SDK 封装
-- ✅ `src/lib/constants.js` - 事件常量（AARRR 框架）
-- ✅ `src/hooks/usePostHog.js` - 原 Hook（可选保留，兼容旧代码）
-
-### 4. 可以删除的文件（不再需要）
-
-- ❌ `src/components/PostHogProvider.js` - 改用 Redux 管理
-- ❌ `src/hooks/usePageTracking.js` - 改由 Middleware 处理
-
----
-
-## 🎯 Redux 方案的优势
-
-### 1. **集中式状态管理**
-PostHog 状态与其他应用状态统一管理，便于维护和调试。
-
-### 2. **自动追踪**
-通过 Middleware 自动拦截 Redux actions，无需手动调用追踪。
-
-```javascript
-// 旧方案（手动追踪）
-const handleLogin = () => {
-  // ... 登录逻辑
-  track(ACTIVATION_EVENTS.USER_LOGGED_IN, { ... });
-};
-
-// 新方案（自动追踪）
-const handleLogin = () => {
-  dispatch(loginUser({ ... })); // ✅ Middleware 自动追踪
-};
-```
-
-### 3. **Redux DevTools 集成**
-可以在 Redux DevTools 中查看所有 PostHog 事件：
-
-```
-Action: posthog/trackEvent/fulfilled
-Payload: {
-  eventName: "News Article Clicked",
-  properties: { article_id: "123" }
-}
-```
-
-### 4. **离线事件缓存**
-自动缓存离线时的事件，网络恢复后批量发送。
-
-### 5. **时间旅行调试**
-可以回放和调试用户行为，定位问题更容易。
-
----
-
-## 📚 使用指南
-
-### 1. 基础用法 - 追踪自定义事件
-
-```jsx
-import { usePostHogRedux } from 'hooks/usePostHogRedux';
-import { RETENTION_EVENTS } from 'lib/constants';
-
-function NewsArticle({ article }) {
-  const { track } = usePostHogRedux();
-
-  const handleClick = () => {
-    track(RETENTION_EVENTS.NEWS_ARTICLE_CLICKED, {
-      article_id: article.id,
-      article_title: article.title,
-      source: 'community_page',
-    });
-  };
-
-  return <div onClick={handleClick}>{article.title}</div>;
-}
-```
-
-### 2. 用户识别（登录时）
-
-在 `AuthContext` 或登录成功回调中：
-
-```jsx
-import { usePostHogRedux } from 'hooks/usePostHogRedux';
-
-function AuthContext() {
-  const { identify, reset } = usePostHogRedux();
-
-  const handleLoginSuccess = (user) => {
-    // 识别用户
-    identify(user.id, {
-      email: user.email,
-      username: user.username,
-      subscription_tier: user.subscription_type || 'free',
-      registration_date: user.created_at,
-    });
-  };
-
-  const handleLogout = () => {
-    // 重置用户会话
-    reset();
-  };
-
-  return { handleLoginSuccess, handleLogout };
-}
-```
-
-### 3. Feature Flags（A/B 测试）
-
-```jsx
-import { usePostHogFlags } from 'hooks/usePostHogRedux';
-
-function Dashboard() {
-  const { isEnabled } = usePostHogFlags();
-
-  if (isEnabled('new_dashboard_design')) {
-    return <NewDashboard />;
-  }
-
-  return <OldDashboard />;
-}
-```
-
-### 4. 自动追踪（推荐）
-
-**无需手动追踪**，只需 dispatch Redux action，Middleware 会自动处理：
-
-```jsx
-// ✅ 登录时自动追踪
-dispatch(loginUser({ email, password }));
-// → Middleware 自动追踪 USER_LOGGED_IN
-
-// ✅ 获取新闻时自动追踪
-dispatch(fetchHotEvents());
-// → Middleware 自动追踪 NEWS_LIST_VIEWED
-
-// ✅ 支付成功时自动追踪
-dispatch(paymentSuccess({ amount, transactionId }));
-// → Middleware 自动追踪 PAYMENT_SUCCESSFUL
-```
-
-### 5. 性能优化 Hook
-
-如果只需要追踪功能，使用轻量级 Hook：
-
-```jsx
-import { usePostHogTrack } from 'hooks/usePostHogRedux';
-
-function MyComponent() {
-  const { track } = usePostHogTrack(); // ✅ 只订阅追踪功能
-
-  // 不会因为 PostHog 状态变化而重新渲染
-  return <button onClick={() => track('Button Clicked')}>Click</button>;
-}
-```
-
----
-
-## 🔧 配置自动追踪规则
-
-在 `src/store/middleware/posthogMiddleware.js` 中添加新规则：
-
-```javascript
-const ACTION_TO_EVENT_MAP = {
-  // 添加你的 action
-  'myFeature/actionName': {
-    event: RETENTION_EVENTS.MY_EVENT,
-    getProperties: (action) => ({
-      property1: action.payload?.value1,
-      property2: action.payload?.value2,
-    }),
-  },
-};
-```
-
----
-
-## 🧪 调试技巧
-
-### 1. Redux DevTools
-
-打开 Redux DevTools，筛选 `posthog/` actions：
-
-```
-posthog/initializePostHog/fulfilled
-posthog/identifyUser/fulfilled
-posthog/trackEvent/fulfilled
-```
-
-### 2. 查看 PostHog 状态
-
-```jsx
-import { useSelector } from 'react-redux';
-import { selectPostHog } from 'store/slices/posthogSlice';
-
-function DebugPanel() {
-  const posthog = useSelector(selectPostHog);
-
-  return (
-    <pre>{JSON.stringify(posthog, null, 2)}</pre>
-  );
-}
-```
-
-### 3. 控制台日志
-
-开发环境下会自动输出日志：
-
-```
-[PostHog Middleware] 自动追踪事件: User Logged In { user_id: 123 }
-[PostHog] 📍 Event tracked: News Article Clicked
-```
-
----
-
-## 📊 State 结构
-
-```javascript
-{
-  posthog: {
-    // 初始化状态
-    isInitialized: true,
-    initError: null,
-
-    // 用户信息
-    user: {
-      userId: "123",
-      email: "user@example.com",
-      subscription_tier: "pro"
-    },
-
-    // 事件队列（离线缓存）
-    eventQueue: [
-      { eventName: "...", properties: {...}, timestamp: "..." }
-    ],
-
-    // Feature Flags
-    featureFlags: {
-      new_dashboard_design: true,
-      beta_feature: false
-    },
-
-    // 配置
-    config: {
-      apiKey: "phc_...",
-      apiHost: "https://app.posthog.com",
-      sessionRecording: false
-    },
-
-    // 统计
-    stats: {
-      totalEvents: 150,
-      lastEventTime: "2025-10-28T12:00:00Z"
-    }
-  }
-}
-```
-
----
-
-## 🚀 高级功能
-
-### 1. 手动触发页面浏览
-
-```jsx
-import { trackModalView, trackTabChange } from 'store/middleware/posthogMiddleware';
-
-// Modal 打开时
-dispatch(trackModalView('User Settings Modal', { source: 'nav_bar' }));
-
-// Tab 切换时
-dispatch(trackTabChange('Related Stocks', { from_tab: 'Overview' }));
-```
-
-### 2. 刷新离线事件
-
-```jsx
-import { flushCachedEvents } from 'store/slices/posthogSlice';
-
-// 网络恢复时自动触发，也可以手动触发
-dispatch(flushCachedEvents());
-```
-
-### 3. 性能追踪
-
-给 action 添加时间戳：
-
-```jsx
-import { withTiming } from 'store/middleware/posthogMiddleware';
-
-// 追踪耗时操作
-dispatch(withTiming(fetchBigData()));
-// → 如果超过 1 秒，会自动追踪性能事件
-```
-
----
-
-## ⚠️ 注意事项
-
-### 1. **环境变量**
-
-确保 `.env` 文件中配置了 PostHog API Key：
-
-```bash
-REACT_APP_POSTHOG_KEY=phc_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-REACT_APP_POSTHOG_HOST=https://app.posthog.com
-REACT_APP_ENABLE_SESSION_RECORDING=false
-```
-
-### 2. **Redux Middleware 顺序**
-
-PostHog Middleware 应该在其他 middleware 之后：
-
-```javascript
-.concat(otherMiddleware)
-.concat(posthogMiddleware) // ✅ 最后添加
-```
-
-### 3. **避免循环依赖**
-
-不要在 Middleware 中 dispatch 会触发 Middleware 的 action。
-
-### 4. **序列化检查**
-
-已经在 store 配置中忽略了 PostHog actions 的序列化检查。
-
----
-
-## 🔄 从旧版本迁移
-
-如果你的代码中使用了旧的 `usePostHog` Hook：
-
-```jsx
-// 旧代码
-import { usePostHog } from 'hooks/usePostHog';
-const { track } = usePostHog();
-
-// 新代码（推荐）
-import { usePostHogRedux } from 'hooks/usePostHogRedux';
-const { track } = usePostHogRedux();
-```
-
-**兼容性**: 旧的 `usePostHog` Hook 仍然可用，但推荐迁移到 Redux 版本。
-
----
-
-## 📚 参考资料
-
-- [PostHog 官方文档](https://posthog.com/docs)
-- [Redux Toolkit 文档](https://redux-toolkit.js.org/)
-- [Redux Middleware 文档](https://redux.js.org/tutorials/fundamentals/part-4-store#middleware)
-- [AARRR 框架](https://www.productplan.com/glossary/aarrr-framework/)
-
----
-
-## 🎉 总结
-
-PostHog 已成功集成到 Redux！主要优势：
-
-1. ✅ **自动追踪**: Middleware 自动拦截 actions
-2. ✅ **集中管理**: 统一的 Redux 状态管理
-3. ✅ **调试友好**: Redux DevTools 支持
-4. ✅ **离线支持**: 自动缓存和刷新事件
-5. ✅ **性能优化**: 提供多个轻量级 Hooks
-
-现在你可以：
-1. 启动应用：`npm start`
-2. 打开 Redux DevTools 查看 PostHog 状态
-3. 执行操作（登录、浏览页面、点击按钮）
-4. 观察自动追踪的事件
-
-Have fun tracking! 🚀

docs/POSTHOG_TESTING_GUIDE.md

@@ -1,476 +0,0 @@
-# PostHog 本地上报能力测试指南
-
-本文档指导您完成 PostHog 事件追踪功能的完整测试。
-
----
-
-## 📋 准备工作
-
-### 步骤 1：获取 PostHog API Key
-
-#### 1.1 登录 PostHog
-
-打开浏览器，访问：
-```
-https://app.posthog.com
-```
-
-使用您的账号登录。
-
-#### 1.2 创建测试项目（如果还没有）
-
-1. 点击页面左上角的项目切换器
-2. 点击 "+ Create Project"
-3. 填写项目信息：
-   - **Project name**: `vf_react_dev`（推荐）或自定义名称
-   - **Organization**: 选择您的组织
-4. 点击 "Create Project"
-
-#### 1.3 获取 API Key
-
-1. 进入项目设置：
-   - 点击左侧边栏底部的 **"Settings"** ⚙️
-   - 选择 **"Project"** 标签
-
-2. 找到 "Project API Key" 部分
-   - 您会看到一个以 `phc_` 开头的长字符串
-   - 例如：`phc_abcdefghijklmnopqrstuvwxyz1234567890`
-
-3. 复制 API Key
-   - 点击 API Key 右侧的复制按钮 📋
-   - 或手动选中并复制
-
----
-
-## 🔧 配置本地环境
-
-### 步骤 2：配置 .env.local
-
-打开项目根目录的 `.env.local` 文件，找到以下行：
-
-```env
-REACT_APP_POSTHOG_KEY=
-```
-
-将您刚才复制的 API Key 粘贴进去：
-
-```env
-REACT_APP_POSTHOG_KEY=phc_your_actual_key_here
-```
-
-**完整示例：**
-```env
-# PostHog 配置（本地开发）
-REACT_APP_POSTHOG_KEY=phc_abcdefghijklmnopqrstuvwxyz1234567890
-REACT_APP_POSTHOG_HOST=https://app.posthog.com
-REACT_APP_ENABLE_SESSION_RECORDING=false
-```
-
-⚠️ **重要**：保存文件后必须重启应用才能生效！
-
----
-
-## 🚀 启动应用
-
-### 步骤 3：重启开发服务器
-
-如果应用正在运行，先停止它：
-
-```bash
-# 方式 1：使用命令
-npm run kill-port
-
-# 方式 2：在终端按 Ctrl+C
-```
-
-然后重新启动：
-
-```bash
-npm start
-```
-
-### 步骤 4：验证初始化
-
-应用启动后，打开浏览器：
-
-```
-http://localhost:3000
-```
-
-**立即按 F12 打开浏览器控制台**，您应该看到以下日志：
-
-```javascript
-✅ PostHog initialized successfully
-📊 PostHog Analytics initialized
-👤 User identified: user_xxx (如果已登录)
-```
-
-✅ **如果看到以上日志，说明 PostHog 初始化成功！**
-
----
-
-## 🧪 测试事件追踪
-
-### 测试 1：页面浏览事件
-
-#### 操作步骤：
-1. 访问首页：http://localhost:3000
-2. 导航到社区页面：点击导航栏 "社区"
-3. 导航到个股中心：点击导航栏 "个股中心"
-4. 导航到概念中心：点击导航栏 "概念中心"
-5. 导航到涨停分析：点击导航栏 "涨停分析"
-
-#### 期待结果：
-
-**控制台输出：**
-```javascript
-[PostHog] Event: $pageview
-  Properties: {
-    $current_url: "http://localhost:3000/community",
-    page_path: "/community",
-    page_type: "feature",
-    feature_name: "community"
-  }
-```
-
-**验证方法：**
-1. 打开 PostHog Dashboard
-2. 进入 **"Activity" → "Live Events"**
-3. 观察实时事件流（延迟 1-2 秒）
-4. 应该看到 `$pageview` 事件，每次页面切换一个
-
----
-
-### 测试 2：社区页面交互事件
-
-#### 操作步骤：
-
-1. **搜索功能**
-   - 点击搜索框
-   - 输入 "科技"
-   - 按回车搜索
-
-2. **筛选功能**
-   - 点击 "筛选" 按钮
-   - 选择某个筛选条件
-   - 应用筛选
-
-3. **内容交互**
-   - 点击任意帖子卡片
-   - 点击用户头像
-
-#### 期待结果：
-
-**控制台输出：**
-```javascript
-📍 Event tracked: search_initiated
-  context: "community"
-
-📍 Event tracked: search_query_submitted
-  query: "科技"
-  category: "community"
-
-📍 Event tracked: filter_applied
-  filter_type: "category"
-  filter_value: "tech"
-
-📍 Event tracked: post_clicked
-  post_id: "123"
-  post_title: "标题"
-```
-
-**PostHog Live Events：**
-```
-🔴 search_initiated
-🔴 search_query_submitted
-🔴 filter_applied
-🔴 post_clicked
-```
-
----
-
-### 测试 3：个股中心交互事件
-
-#### 操作步骤：
-
-1. **搜索股票**
-   - 进入个股中心页面
-   - 点击搜索框
-   - 输入股票名称或代码
-
-2. **概念交互**
-   - 点击某个概念板块
-   - 点击概念下的股票
-
-3. **热力图交互**
-   - 点击热力图中的股票方块
-   - 查看股票详情
-
-#### 期待结果：
-
-**控制台输出：**
-```javascript
-📍 Event tracked: stock_overview_page_viewed
-
-📍 Event tracked: stock_searched
-  query: "科技股"
-
-📍 Event tracked: concept_clicked
-  concept_name: "人工智能"
-
-📍 Event tracked: concept_stock_clicked
-  stock_code: "000001"
-  stock_name: "平安银行"
-```
-
----
-
-### 测试 4：概念中心交互事件
-
-#### 操作步骤：
-
-1. **列表浏览**
-   - 进入概念中心
-   - 切换排序方式
-
-2. **时间线查看**
-   - 点击某个概念卡片
-   - 打开时间线 Modal
-   - 展开某个日期
-   - 点击新闻/报告
-
-#### 期待结果：
-
-**控制台输出：**
-```javascript
-📍 Event tracked: concept_list_viewed
-  sort_by: "change_percent_desc"
-
-📍 Event tracked: concept_clicked
-  concept_name: "芯片"
-
-📍 Event tracked: concept_detail_viewed
-  concept_name: "芯片"
-  view_type: "timeline_modal"
-
-📍 Event tracked: timeline_date_toggled
-  date: "2025-01-15"
-  action: "expand"
-```
-
----
-
-### 测试 5：涨停分析交互事件
-
-#### 操作步骤：
-
-1. **日期选择**
-   - 进入涨停分析页面
-   - 选择不同日期
-
-2. **板块交互**
-   - 展开某个板块
-   - 点击板块名称
-
-3. **股票交互**
-   - 点击涨停股票
-   - 查看详情
-
-#### 期待结果：
-
-**控制台输出：**
-```javascript
-📍 Event tracked: limit_analyse_page_viewed
-
-📍 Event tracked: date_selected
-  date: "20250115"
-
-📍 Event tracked: sector_toggled
-  sector_name: "科技"
-  action: "expand"
-
-📍 Event tracked: limit_stock_clicked
-  stock_code: "000001"
-  stock_name: "平安银行"
-```
-
----
-
-## 📊 验证上报结果
-
-### 在 PostHog Dashboard 验证
-
-#### 步骤 1：打开 Live Events
-
-1. 登录 PostHog Dashboard
-2. 选择您的测试项目
-3. 点击左侧菜单 **"Activity"**
-4. 选择 **"Live Events"**
-
-#### 步骤 2：观察实时事件流
-
-您应该看到实时的事件流，格式类似：
-
-```
-🔴 LIVE  $pageview                    1s ago
-        page_path: /community
-        user_id: anonymous_abc123
-
-🔴 LIVE  search_initiated             2s ago
-        context: community
-
-🔴 LIVE  search_query_submitted       3s ago
-        query: "科技"
-        category: "community"
-```
-
-#### 步骤 3：检查事件属性
-
-点击任意事件，展开详情，验证：
-- ✅ 事件名称正确
-- ✅ 所有属性完整
-- ✅ 时间戳准确
-- ✅ 用户信息正确
-
----
-
-## 📋 测试清单
-
-使用以下清单记录测试结果：
-
-### 页面浏览事件（5项）
-
-- [ ] 首页浏览 - `$pageview`
-- [ ] 社区页面浏览 - `community_page_viewed`
-- [ ] 个股中心浏览 - `stock_overview_page_viewed`
-- [ ] 概念中心浏览 - `concept_page_viewed`
-- [ ] 涨停分析浏览 - `limit_analyse_page_viewed`
-
-### 社区页面事件（6项）
-
-- [ ] 搜索初始化 - `search_initiated`
-- [ ] 搜索查询提交 - `search_query_submitted`
-- [ ] 筛选器应用 - `filter_applied`
-- [ ] 帖子点击 - `post_clicked`
-- [ ] 评论点击 - `comment_clicked`
-- [ ] 用户资料查看 - `user_profile_viewed`
-
-### 个股中心事件（4项）
-
-- [ ] 股票搜索 - `stock_searched`
-- [ ] 概念点击 - `concept_clicked`
-- [ ] 概念股票点击 - `concept_stock_clicked`
-- [ ] 热力图股票点击 - `heatmap_stock_clicked`
-
-### 概念中心事件（5项）
-
-- [ ] 概念列表查看 - `concept_list_viewed`
-- [ ] 排序更改 - `sort_changed`
-- [ ] 概念点击 - `concept_clicked`
-- [ ] 概念详情查看 - `concept_detail_viewed`
-- [ ] 新闻/报告点击 - `news_clicked` / `report_clicked`
-
-### 涨停分析事件（6项）
-
-- [ ] 页面查看 - `limit_analyse_page_viewed`
-- [ ] 日期选择 - `date_selected`
-- [ ] 每日统计查看 - `daily_stats_viewed`
-- [ ] 板块展开/收起 - `sector_toggled`
-- [ ] 板块点击 - `sector_clicked`
-- [ ] 涨停股票点击 - `limit_stock_clicked`
-
----
-
-## ⚠️ 常见问题
-
-### 问题 1：控制台没有看到 PostHog 日志
-
-**可能原因：**
-- API Key 配置错误
-- 应用没有重启
-- 浏览器控制台过滤了日志
-
-**解决方案：**
-1. 检查 `.env.local` 中的 API Key 是否正确
-2. 确保重启了应用：`npm run kill-port && npm start`
-3. 打开控制台，清除所有过滤器
-4. 刷新页面
-
----
-
-### 问题 2：PostHog Live Events 没有数据
-
-**可能原因：**
-- 网络问题
-- API Key 错误
-- 项目选择错误
-
-**解决方案：**
-1. 打开浏览器网络面板（Network）
-2. 筛选 XHR 请求，查找 `posthog.com` 的请求
-3. 检查请求状态码：
-   - `200 OK` → 正常
-   - `401 Unauthorized` → API Key 错误
-   - `404 Not Found` → 项目不存在
-4. 确认 PostHog Dashboard 选择了正确的项目
-
----
-
-### 问题 3：事件上报了，但属性不完整
-
-**可能原因：**
-- 代码中传递的参数不完整
-- 某些状态未正确初始化
-
-**解决方案：**
-1. 查看控制台的详细日志
-2. 对比 PostHog Live Events 中的数据
-3. 检查对应的事件追踪代码
-4. 提供反馈给开发团队
-
----
-
-## 📸 测试截图建议
-
-为了完整记录测试结果，建议截图：
-
-1. **PostHog 初始化成功**
-   - 浏览器控制台初始化日志
-
-2. **Live Events 实时流**
-   - PostHog Dashboard Live Events 页面
-
-3. **典型事件详情**
-   - 展开某个事件，显示所有属性
-
-4. **事件统计**
-   - PostHog Insights 或 Trends 页面
-
----
-
-## ✅ 测试完成后
-
-测试完成后，您可以：
-
-1. **保持配置**
-   - 保留 API Key 在 `.env.local` 中
-   - 继续使用控制台 + PostHog Cloud 双模式
-
-2. **切换回仅控制台模式**
-   - 清空 `.env.local` 中的 `REACT_APP_POSTHOG_KEY`
-   - 重启应用
-   - 仅在控制台查看事件（不上报）
-
-3. **配置生产环境**
-   - 创建生产环境的 PostHog 项目
-   - 将生产 API Key 填入 `.env` 文件
-   - 部署时使用生产配置
-
----
-
-**祝测试顺利！** 🎉
-
-如有任何问题，请查阅：
-- [PostHog 官方文档](https://posthog.com/docs)
-- [ENVIRONMENT_SETUP.md](./ENVIRONMENT_SETUP.md)
-- [POSTHOG_INTEGRATION.md](./POSTHOG_INTEGRATION.md)

docs/POSTHOG_TRACKING_GUIDE.md

@@ -1,561 +0,0 @@
-# PostHog 事件追踪开发者指南
-
-## 📚 目录
-
-1. [快速开始](#快速开始)
-2. [Hook使用指南](#hook使用指南)
-3. [添加新的追踪Hook](#添加新的追踪hook)
-4. [集成追踪到组件](#集成追踪到组件)
-5. [最佳实践](#最佳实践)
-6. [常见问题](#常见问题)
-
----
-
-## 🚀 快速开始
-
-### 当前已有的追踪Hooks
-
-| Hook名称 | 用途 | 适用场景 |
-|---------|------|---------|
-| `useAuthEvents` | 认证事件 | 注册、登录、登出、微信授权 |
-| `useStockOverviewEvents` | 个股分析 | 个股页面浏览、图表查看、指标分析 |
-| `useConceptEvents` | 概念追踪 | 概念浏览、搜索、相关股票查看 |
-| `useCompanyEvents` | 公司分析 | 公司详情、财务数据、行业对比 |
-| `useLimitAnalyseEvents` | 涨停分析 | 涨停榜单、筛选、个股详情 |
-| `useCommunityEvents` | 社区事件 | 新闻浏览、事件追踪、评论互动 |
-| `useEventDetailEvents` | 事件详情 | 事件分析、时间线、影响评估 |
-| `useDashboardEvents` | 仪表板 | 自选股、关注事件、评论管理 |
-| `useTradingSimulationEvents` | 模拟盘 | 下单、持仓、收益追踪 |
-| `useSearchEvents` | 搜索行为 | 搜索查询、结果点击、筛选 |
-| `useNavigationEvents` | 导航交互 | 菜单点击、主题切换、Logo点击 |
-| `useProfileEvents` | 个人资料 | 资料更新、密码修改、账号绑定 |
-| `useSubscriptionEvents` | 订阅支付 | 定价选择、支付流程、订阅管理 |
-
----
-
-## 📖 Hook使用指南
-
-### 1. 基础用法
-
-```javascript
-// 第一步：导入Hook
-import { useSearchEvents } from '../../hooks/useSearchEvents';
-
-// 第二步：在组件中初始化
-function SearchComponent() {
-  const searchEvents = useSearchEvents({ context: 'global' });
-
-  // 第三步：在事件处理函数中调用追踪方法
-  const handleSearch = (query) => {
-    searchEvents.trackSearchQuerySubmitted(query, resultCount);
-    // ... 执行搜索逻辑
-  };
-}
-```
-
-### 2. 带参数的Hook初始化
-
-大多数Hook支持配置参数，用于区分不同的使用场景：
-
-```javascript
-// 搜索Hook - 指定搜索上下文
-const searchEvents = useSearchEvents({
-  context: 'community'  // 或 'stock', 'news', 'concept'
-});
-
-// 个人资料Hook - 指定页面类型
-const profileEvents = useProfileEvents({
-  pageType: 'settings'  // 或 'profile', 'security'
-});
-
-// 导航Hook - 指定组件位置
-const navEvents = useNavigationEvents({
-  component: 'top_nav'  // 或 'sidebar', 'footer'
-});
-
-// 订阅Hook - 传入当前订阅信息
-const subscriptionEvents = useSubscriptionEvents({
-  currentSubscription: {
-    plan: user?.subscription_plan || 'free',
-    status: user?.subscription_status || 'none'
-  }
-});
-```
-
-### 3. 常见追踪模式
-
-#### 模式A：简单事件追踪
-```javascript
-// 点击事件
-<Button onClick={() => {
-  navEvents.trackMenuItemClicked('概念中心', 'dropdown', '/concepts');
-  navigate('/concepts');
-}}>
-  概念中心
-</Button>
-```
-
-#### 模式B：成功/失败双向追踪
-```javascript
-const handleSave = async () => {
-  try {
-    await saveData();
-    profileEvents.trackProfileUpdated(updatedFields, data);
-    toast({ title: "保存成功" });
-  } catch (error) {
-    profileEvents.trackProfileUpdateFailed(attemptedFields, error.message);
-    toast({ title: "保存失败" });
-  }
-};
-```
-
-#### 模式C：条件追踪
-```javascript
-const handleSearch = (query, resultCount) => {
-  // 只在有查询词时追踪
-  if (query) {
-    searchEvents.trackSearchQuerySubmitted(query, resultCount);
-  }
-
-  // 无结果时自动触发额外追踪
-  if (resultCount === 0) {
-    // Hook内部已自动追踪 SEARCH_NO_RESULTS
-  }
-};
-```
-
----
-
-## 🔨 添加新的追踪Hook
-
-### 步骤1：创建Hook文件
-
-在 `/src/hooks/` 目录下创建新文件，例如 `useYourFeatureEvents.js`：
-
-```javascript
-// src/hooks/useYourFeatureEvents.js
-import { useCallback } from 'react';
-import { usePostHogTrack } from './usePostHogRedux';
-import { RETENTION_EVENTS } from '../lib/constants';
-import { logger } from '../utils/logger';
-
-/**
- * 你的功能事件追踪 Hook
- * @param {Object} options - 配置选项
- * @param {string} options.context - 使用上下文
- * @returns {Object} 事件追踪处理函数集合
- */
-export const useYourFeatureEvents = ({ context = 'default' } = {}) => {
-  const { track } = usePostHogTrack();
-
-  /**
-   * 追踪功能操作
-   * @param {string} actionName - 操作名称
-   * @param {Object} details - 操作详情
-   */
-  const trackFeatureAction = useCallback((actionName, details = {}) => {
-    if (!actionName) {
-      logger.warn('useYourFeatureEvents', 'trackFeatureAction: actionName is required');
-      return;
-    }
-
-    track(RETENTION_EVENTS.FEATURE_USED, {
-      feature_name: 'your_feature',
-      action_name: actionName,
-      context,
-      ...details,
-      timestamp: new Date().toISOString(),
-    });
-
-    logger.debug('useYourFeatureEvents', '📊 Feature Action Tracked', {
-      actionName,
-      context,
-    });
-  }, [track, context]);
-
-  return {
-    trackFeatureAction,
-    // ... 更多追踪方法
-  };
-};
-
-export default useYourFeatureEvents;
-```
-
-### 步骤2：定义事件常量（如需要）
-
-在 `/src/lib/constants.js` 中添加新事件：
-
-```javascript
-export const RETENTION_EVENTS = {
-  // ... 现有事件
-  YOUR_FEATURE_VIEWED: 'Your Feature Viewed',
-  YOUR_FEATURE_ACTION: 'Your Feature Action',
-};
-```
-
-### 步骤3：在组件中集成
-
-```javascript
-import { useYourFeatureEvents } from '../../hooks/useYourFeatureEvents';
-
-function YourComponent() {
-  const featureEvents = useYourFeatureEvents({ context: 'main_page' });
-
-  const handleAction = () => {
-    featureEvents.trackFeatureAction('button_clicked', {
-      button_name: 'submit',
-      user_role: user?.role
-    });
-  };
-
-  return <Button onClick={handleAction}>Submit</Button>;
-}
-```
-
----
-
-## 🎯 集成追踪到组件
-
-### 完整集成示例
-
-```javascript
-// src/views/YourFeature/YourComponent.js
-import React, { useState, useEffect } from 'react';
-import { useYourFeatureEvents } from '../../hooks/useYourFeatureEvents';
-
-export default function YourComponent() {
-  const [data, setData] = useState([]);
-
-  // 🎯 初始化追踪Hook
-  const featureEvents = useYourFeatureEvents({
-    context: 'your_feature'
-  });
-
-  // 🎯 页面加载时自动追踪
-  useEffect(() => {
-    featureEvents.trackPageViewed();
-  }, [featureEvents]);
-
-  // 🎯 用户操作追踪
-  const handleItemClick = (item) => {
-    featureEvents.trackItemClicked(item.id, item.name);
-    // ... 业务逻辑
-  };
-
-  // 🎯 表单提交追踪（成功/失败）
-  const handleSubmit = async (formData) => {
-    try {
-      const result = await submitData(formData);
-      featureEvents.trackSubmitSuccess(formData, result);
-      toast({ title: '提交成功' });
-    } catch (error) {
-      featureEvents.trackSubmitFailed(formData, error.message);
-      toast({ title: '提交失败' });
-    }
-  };
-
-  return (
-    <div>
-      {data.map(item => (
-        <div key={item.id} onClick={() => handleItemClick(item)}>
-          {item.name}
-        </div>
-      ))}
-      <form onSubmit={handleSubmit}>
-        {/* 表单内容 */}
-      </form>
-    </div>
-  );
-}
-```
-
----
-
-## ✅ 最佳实践
-
-### 1. 命名规范
-
-#### Hook命名
-- 使用 `use` 前缀：`useFeatureEvents`
-- 描述性名称：`useSubscriptionEvents` 而非 `useSubEvents`
-
-#### 追踪方法命名
-- 使用 `track` 前缀：`trackButtonClicked`
-- 动词+名词结构：`trackSearchSubmitted`, `trackProfileUpdated`
-- 明确动作：`trackPaymentSuccessful` 而非 `trackPayment`
-
-#### 事件常量命名
-- 大写+下划线：`SEARCH_QUERY_SUBMITTED`
-- 名词+动词结构：`PROFILE_UPDATED`, `PAYMENT_INITIATED`
-
-### 2. 参数设计
-
-#### 必填参数前置
-```javascript
-// ✅ 好的设计
-trackSearchSubmitted(query, resultCount, filters)
-
-// ❌ 不好的设计
-trackSearchSubmitted(filters, resultCount, query)
-```
-
-#### 使用对象参数处理复杂数据
-```javascript
-// ✅ 好的设计
-trackPaymentInitiated({
-  planName: 'pro',
-  amount: 99,
-  currency: 'CNY',
-  paymentMethod: 'wechat_pay'
-})
-
-// ❌ 不好的设计
-trackPaymentInitiated(planName, amount, currency, paymentMethod)
-```
-
-#### 提供默认值
-```javascript
-const trackAction = useCallback((name, details = {}) => {
-  track(EVENT_NAME, {
-    action_name: name,
-    context: context || 'default',
-    timestamp: new Date().toISOString(),
-    ...details
-  });
-}, [track, context]);
-```
-
-### 3. 错误处理
-
-#### 参数验证
-```javascript
-const trackFeature = useCallback((featureName) => {
-  if (!featureName) {
-    logger.warn('useFeatureEvents', 'trackFeature: featureName is required');
-    return;
-  }
-
-  track(EVENTS.FEATURE_USED, { feature_name: featureName });
-}, [track]);
-```
-
-#### 避免追踪崩溃影响业务
-```javascript
-const handleAction = async () => {
-  try {
-    // 业务逻辑
-    const result = await doSomething();
-
-    // 追踪放在业务逻辑之后，不影响核心功能
-    try {
-      featureEvents.trackActionSuccess(result);
-    } catch (trackError) {
-      logger.error('Tracking failed', trackError);
-      // 不抛出错误，不影响用户体验
-    }
-  } catch (error) {
-    // 业务逻辑错误处理
-    toast({ title: '操作失败' });
-  }
-};
-```
-
-### 4. 性能优化
-
-#### 使用 useCallback 包装追踪函数
-```javascript
-const trackAction = useCallback((actionName) => {
-  track(EVENTS.ACTION, { action_name: actionName });
-}, [track]);
-```
-
-#### 避免在循环中追踪
-```javascript
-// ❌ 不好的做法
-items.forEach(item => {
-  trackItemViewed(item.id);
-});
-
-// ✅ 好的做法
-trackItemsViewed(items.length, items.map(i => i.id));
-```
-
-#### 批量追踪
-```javascript
-// 一次追踪包含所有信息
-trackBatchAction({
-  action_type: 'bulk_delete',
-  item_count: selectedItems.length,
-  item_ids: selectedItems.map(i => i.id)
-});
-```
-
-### 5. 调试支持
-
-#### 使用 logger.debug
-```javascript
-const trackAction = useCallback((actionName) => {
-  track(EVENTS.ACTION, { action_name: actionName });
-
-  logger.debug('useFeatureEvents', '📊 Action Tracked', {
-    actionName,
-    context,
-    timestamp: new Date().toISOString()
-  });
-}, [track, context]);
-```
-
-#### 在开发环境显示追踪信息
-```javascript
-if (process.env.NODE_ENV === 'development') {
-  console.log('[PostHog Track]', eventName, properties);
-}
-```
-
----
-
-## 🐛 常见问题
-
-### Q1: Hook 内的 useCallback 依赖项应该包含哪些？
-
-**A:** 只包含函数内部使用的外部变量：
-
-```javascript
-const trackAction = useCallback((name) => {
-  // ✅ track 和 context 被使用，需要在依赖项中
-  track(EVENTS.ACTION, {
-    name,
-    context
-  });
-}, [track, context]); // 正确的依赖项
-```
-
-### Q2: 何时使用自动追踪 vs 手动追踪？
-
-**A:**
-- **自动追踪**：页面浏览、组件挂载时的事件
-  ```javascript
-  useEffect(() => {
-    featureEvents.trackPageViewed();
-  }, [featureEvents]);
-  ```
-
-- **手动追踪**：用户主动操作的事件
-  ```javascript
-  <Button onClick={() => {
-    featureEvents.trackButtonClicked();
-    handleAction();
-  }}>
-  ```
-
-### Q3: 如何追踪异步操作的完整流程？
-
-**A:** 分别追踪开始、成功、失败：
-
-```javascript
-const handleAsyncAction = async () => {
-  // 1. 追踪开始
-  featureEvents.trackActionStarted();
-
-  try {
-    const result = await doAsyncWork();
-
-    // 2. 追踪成功
-    featureEvents.trackActionSuccess(result);
-  } catch (error) {
-    // 3. 追踪失败
-    featureEvents.trackActionFailed(error.message);
-  }
-};
-```
-
-### Q4: 追踪中应该包含哪些用户信息？
-
-**A:**
-- ✅ **可以包含**：用户ID、角色、订阅状态、使用偏好
-- ❌ **不应包含**：密码、完整邮箱、手机号、支付信息
-
-```javascript
-// ✅ 正确
-track(EVENT, {
-  user_id: user.id,
-  user_role: user.role,
-  subscription_tier: user.subscription_tier
-});
-
-// ❌ 错误
-track(EVENT, {
-  password: user.password,  // 绝对不要追踪密码
-  email: user.email,        // 避免完整邮箱
-  credit_card: '****1234'   // 不追踪支付信息
-});
-```
-
-### Q5: 如何在多个组件间共享追踪逻辑？
-
-**A:** 使用自定义Hook：
-
-```javascript
-// hooks/useCommonTracking.js
-export const useCommonTracking = () => {
-  const { track } = usePostHogTrack();
-
-  const trackError = useCallback((errorMessage, errorCode) => {
-    track('Error Occurred', {
-      error_message: errorMessage,
-      error_code: errorCode,
-      timestamp: new Date().toISOString()
-    });
-  }, [track]);
-
-  return { trackError };
-};
-
-// 在多个组件中使用
-function ComponentA() {
-  const { trackError } = useCommonTracking();
-  // ...
-}
-
-function ComponentB() {
-  const { trackError } = useCommonTracking();
-  // ...
-}
-```
-
----
-
-## 📊 追踪检查清单
-
-在添加新功能时，确保追踪以下关键点：
-
-- [ ] **页面/组件加载** - 用户到达这个页面
-- [ ] **主要操作** - 用户执行的核心功能
-- [ ] **成功状态** - 操作成功完成
-- [ ] **失败状态** - 操作失败及原因
-- [ ] **用户输入** - 搜索、筛选、表单提交（不包含敏感信息）
-- [ ] **导航行为** - 点击链接、返回、跳转
-- [ ] **关键决策点** - 用户做出选择的时刻
-- [ ] **转化漏斗** - 从意向到完成的关键步骤
-
----
-
-## 🔗 相关资源
-
-- [PostHog 官方文档](https://posthog.com/docs)
-- [POSTHOG_INTEGRATION.md](./POSTHOG_INTEGRATION.md) - 集成总体说明
-- [constants.js](./src/lib/constants.js) - 所有事件常量定义
-- [usePostHogRedux.js](./src/hooks/usePostHogRedux.js) - 核心追踪Hook
-
----
-
-## 📝 版本历史
-
-- **v1.0** (2025-10-29): 初始版本，包含13个追踪Hook的完整使用指南
-- **v1.1** (待定): 计划添加P2功能追踪指南
-
----
-
-**维护者**: 开发团队
-**最后更新**: 2025-10-29

docs/QUICK_TEST_CHECKLIST.md

@@ -1,149 +0,0 @@
-# PostHog 快速测试清单
-
-**测试模式：** 控制台 Debug 模式（暂无 Cloud 上报）
-
-**应用地址：** http://localhost:3000
-
-**控制台：** 按 F12 打开
-
----
-
-## ✅ 初始化检查
-
-启动应用后，控制台应显示：
-
-```
-✅ PostHog initialized successfully
-📊 PostHog Analytics initialized
-⚠️ PostHog API key not found. Analytics will be disabled.
-```
-
-✅ **状态：** 正常（仅控制台模式）
-
----
-
-## 📋 事件测试清单
-
-### 1. 页面浏览事件（5项）
-
-| 操作 | 预期事件 | 状态 |
-|------|---------|------|
-| 访问首页 | `$pageview` | [ ] |
-| 访问社区页面 | `community_page_viewed` | [ ] |
-| 访问个股中心 | `stock_overview_page_viewed` | [ ] |
-| 访问概念中心 | `concept_page_viewed` | [ ] |
-| 访问涨停分析 | `limit_analyse_page_viewed` | [ ] |
-
-**控制台输出示例：**
-```javascript
-📍 Event tracked: community_page_viewed
-  timestamp: "2025-01-15T10:30:00.000Z"
-  page_path: "/community"
-```
-
----
-
-### 2. 社区页面事件（6项）
-
-| 操作 | 预期事件 | 状态 |
-|------|---------|------|
-| 点击搜索框 | `search_initiated` | [ ] |
-| 输入关键词搜索 | `search_query_submitted` | [ ] |
-| 应用筛选器 | `filter_applied` | [ ] |
-| 点击帖子 | `post_clicked` | [ ] |
-| 点击评论 | `comment_clicked` | [ ] |
-| 查看用户资料 | `user_profile_viewed` | [ ] |
-
-**控制台输出示例：**
-```javascript
-📍 Event tracked: search_initiated
-  context: "community"
-
-📍 Event tracked: search_query_submitted
-  query: "科技"
-  category: "community"
-```
-
----
-
-### 3. 个股中心事件（4项）
-
-| 操作 | 预期事件 | 状态 |
-|------|---------|------|
-| 搜索股票 | `stock_searched` | [ ] |
-| 点击概念 | `concept_clicked` | [ ] |
-| 点击概念下的股票 | `concept_stock_clicked` | [ ] |
-| 点击热力图股票 | `heatmap_stock_clicked` | [ ] |
-
----
-
-### 4. 概念中心事件（5项）
-
-| 操作 | 预期事件 | 状态 |
-|------|---------|------|
-| 查看概念列表 | `concept_list_viewed` | [ ] |
-| 切换排序 | `sort_changed` | [ ] |
-| 点击概念 | `concept_clicked` | [ ] |
-| 打开时间线 Modal | `concept_detail_viewed` | [ ] |
-| 点击新闻/报告 | `news_clicked` / `report_clicked` | [ ] |
-
----
-
-### 5. 涨停分析事件（6项）
-
-| 操作 | 预期事件 | 状态 |
-|------|---------|------|
-| 进入页面 | `limit_analyse_page_viewed` | [ ] |
-| 选择日期 | `date_selected` | [ ] |
-| 查看每日统计 | `daily_stats_viewed` | [ ] |
-| 展开/收起板块 | `sector_toggled` | [ ] |
-| 点击板块 | `sector_clicked` | [ ] |
-| 点击涨停股票 | `limit_stock_clicked` | [ ] |
-
----
-
-## 🎯 测试技巧
-
-### 控制台过滤
-
-如果日志太多，可以过滤：
-1. 在控制台顶部的过滤框输入：`Event tracked`
-2. 只显示事件追踪日志
-
-### 查看详细信息
-
-每个事件日志都可以展开：
-1. 点击日志左侧的箭头 ▶️
-2. 查看完整的事件属性
-
-### 清除日志
-
-- 点击控制台左上角的 🚫 图标清除所有日志
-
----
-
-## ✅ 测试完成后
-
-### 记录结果
-
-- 通过的测试项：___/26
-- 失败的测试项：___
-- 发现的问题：___
-
-### 下一步
-
-1. **等待真实 API Key**
-   - 管理员提供 PostHog API Key
-   - 配置到 `.env.local`
-   - 重启应用
-
-2. **测试 Cloud 上报**
-   - 重复上述测试
-   - 在 PostHog Dashboard 查看 Live Events
-   - 验证数据完整性
-
----
-
-**测试日期：** _________
-**测试人：** _________
-**环境：** 本地开发（控制台模式）

docs/StockDetailPanel_BUSINESS_LOGIC.md

@@ -1,825 +0,0 @@
-# StockDetailPanel 原始业务逻辑文档
-
-> **文档版本**: 1.0
-> **组件文件**: `src/views/Community/components/StockDetailPanel.js`
-> **原始行数**: 1067 行
-> **创建日期**: 2025-10-30
-> **重构前快照**: 用于记录重构前的完整业务逻辑
-
----
-
-## 📋 目录
-
-1. [组件概述](#1-组件概述)
-2. [权限控制系统](#2-权限控制系统)
-3. [数据加载流程](#3-数据加载流程)
-4. [K线数据缓存机制](#4-k线数据缓存机制)
-5. [自选股管理](#5-自选股管理)
-6. [实时监控功能](#6-实时监控功能)
-7. [搜索和过滤](#7-搜索和过滤)
-8. [UI 交互逻辑](#8-ui-交互逻辑)
-9. [状态管理](#9-状态管理)
-10. [API 端点清单](#10-api-端点清单)
-
----
-
-## 1. 组件概述
-
-### 1.1 功能描述
-
-StockDetailPanel 是一个 Ant Design Drawer 组件，用于展示事件相关的详细信息，包括：
-
-- **相关标的**: 事件关联的股票列表、实时行情、分时图
-- **相关概念**: 事件涉及的概念板块
-- **历史事件对比**: 类似历史事件的表现分析
-- **传导链分析**: 事件的传导路径和影响链（Max 会员功能）
-
-### 1.2 组件属性
-
-```javascript
-StockDetailPanel({
-  visible,    // boolean - 是否显示 Drawer
-  event,      // Object - 事件对象 {id, title, start_time, created_at, ...}
-  onClose     // Function - 关闭回调
-})
-```
-
-### 1.3 核心依赖
-
-- **useSubscription**: 订阅权限管理 hook
-- **eventService**: 事件数据 API 服务
-- **stockService**: 股票数据 API 服务
-- **logger**: 日志工具
-
----
-
-## 2. 权限控制系统
-
-### 2.1 权限层级
-
-系统采用三层订阅模型：
-
-| 功能 | 权限标识 | 所需版本 | 图标 |
-|------|---------|---------|------|
-| 相关标的 | `related_stocks` | Pro | 🔒 |
-| 相关概念 | `related_concepts` | Pro | 🔒 |
-| 历史事件对比 | `historical_events_full` | Pro | 🔒 |
-| 传导链分析 | `transmission_chain` | Max | 👑 |
-
-### 2.2 权限检查流程
-
-```javascript
-// Hook 初始化
-const { hasFeatureAccess, getRequiredLevel, getUpgradeRecommendation } = useSubscription();
-
-// Tab 渲染时检查
-hasFeatureAccess('related_stocks') ? (
-  // 渲染完整功能
-) : (
-  // 渲染锁定提示 UI
-  renderLockedContent('related_stocks', '相关标的')
-)
-```
-
-### 2.3 权限拦截机制
-
-**Tab 点击拦截**（已注释，未使用）:
-```javascript
-const handleTabAccess = (featureName, tabKey) => {
-  if (!hasFeatureAccess(featureName)) {
-    const recommendation = getUpgradeRecommendation(featureName);
-    setUpgradeFeature(recommendation?.required || 'pro');
-    setUpgradeModalOpen(true);
-    return false; // 阻止 Tab 切换
-  }
-  setActiveTab(tabKey);
-  return true;
-};
-```
-
-### 2.4 锁定 UI 渲染
-
-```javascript
-const renderLockedContent = (featureName, description) => {
-  const recommendation = getUpgradeRecommendation(featureName);
-  const isProRequired = recommendation?.required === 'pro';
-
-  return (
-    <div>
-      {/* 图标: Pro版显示🔒, Max版显示👑 */}
-      <LockOutlined /> or <CrownOutlined />
-
-      {/* 提示消息 */}
-      <Alert message={`${description}功能已锁定`} />
-
-      {/* 升级按钮 */}
-      <Button onClick={() => setUpgradeModalOpen(true)}>
-        升级到 {isProRequired ? 'Pro版' : 'Max版'}
-      </Button>
-    </div>
-  );
-};
-```
-
-### 2.5 升级模态框
-
-```javascript
-<SubscriptionUpgradeModal
-  isOpen={upgradeModalOpen}
-  onClose={() => setUpgradeModalOpen(false)}
-  requiredLevel={upgradeFeature}  // 'pro' | 'max'
-  featureName={upgradeFeature === 'pro' ? '相关分析功能' : '传导链分析'}
-/>
-```
-
----
-
-## 3. 数据加载流程
-
-### 3.1 加载时机
-
-```javascript
-useEffect(() => {
-  if (visible && event) {
-    setActiveTab('stocks');
-    loadAllData();
-  }
-}, [visible, event]);
-```
-
-**触发条件**: Drawer 可见 `visible=true` 且 `event` 对象存在
-
-### 3.2 并发加载策略
-
-`loadAllData()` 函数同时发起 **5 个独立 API 请求**:
-
-```javascript
-const loadAllData = () => {
-  // 1. 加载用户自选股列表 (独立调用)
-  loadWatchlist();
-
-  // 2. 加载相关标的 → 连锁加载行情数据
-  eventService.getRelatedStocks(event.id)
-    .then(res => {
-      setRelatedStocks(res.data);
-
-      // 2.1 如果有股票，立即加载行情
-      if (res.data.length > 0) {
-        const codes = res.data.map(s => s.stock_code);
-        stockService.getQuotes(codes, event.created_at)
-          .then(quotes => setStockQuotes(quotes));
-      }
-    });
-
-  // 3. 加载事件详情
-  eventService.getEventDetail(event.id)
-    .then(res => setEventDetail(res.data));
-
-  // 4. 加载历史事件
-  eventService.getHistoricalEvents(event.id)
-    .then(res => setHistoricalEvents(res.data));
-
-  // 5. 加载传导链分析
-  eventService.getTransmissionChainAnalysis(event.id)
-    .then(res => setChainAnalysis(res.data));
-
-  // 6. 加载超预期得分
-  eventService.getExpectationScore(event.id)
-    .then(res => setExpectationScore(res.data));
-};
-```
-
-### 3.3 数据依赖关系
-
-```mermaid
-graph TD
-    A[loadAllData] --> B[getRelatedStocks]
-    A --> C[getEventDetail]
-    A --> D[getHistoricalEvents]
-    A --> E[getTransmissionChainAnalysis]
-    A --> F[getExpectationScore]
-    A --> G[loadWatchlist]
-
-    B -->|成功且有数据| H[getQuotes]
-
-    B --> I[setRelatedStocks]
-    H --> J[setStockQuotes]
-    C --> K[setEventDetail]
-    D --> L[setHistoricalEvents]
-    E --> M[setChainAnalysis]
-    F --> N[setExpectationScore]
-    G --> O[setWatchlistStocks]
-```
-
-### 3.4 加载状态管理
-
-```javascript
-// 主加载状态
-const [loading, setLoading] = useState(false);  // 相关标的加载中
-const [detailLoading, setDetailLoading] = useState(false);  // 事件详情加载中
-
-// 使用示例
-setLoading(true);
-eventService.getRelatedStocks(event.id)
-  .finally(() => setLoading(false));
-```
-
-### 3.5 错误处理
-
-```javascript
-// 使用 logger 记录错误
-stockService.getQuotes(codes, event.created_at)
-  .catch(error => logger.error('StockDetailPanel', 'getQuotes', error, {
-    stockCodes: codes,
-    eventTime: event.created_at
-  }));
-```
-
----
-
-## 4. K线数据缓存机制
-
-### 4.1 缓存架构
-
-**三层 Map 缓存**:
-
-```javascript
-// 全局缓存（组件级别，不跨实例）
-const klineDataCache = new Map();     // 数据缓存: key → data[]
-const pendingRequests = new Map();    // 请求去重: key → Promise
-const lastRequestTime = new Map();    // 时间戳: key → timestamp
-```
-
-### 4.2 缓存键生成
-
-```javascript
-const getCacheKey = (stockCode, eventTime) => {
-  const date = eventTime
-    ? moment(eventTime).format('YYYY-MM-DD')
-    : moment().format('YYYY-MM-DD');
-  return `${stockCode}|${date}`;
-};
-
-// 示例: "600000.SH|2024-10-30"
-```
-
-### 4.3 智能刷新策略
-
-```javascript
-const shouldRefreshData = (cacheKey) => {
-  const lastTime = lastRequestTime.get(cacheKey);
-  if (!lastTime) return true;  // 无缓存，需要刷新
-
-  const now = Date.now();
-  const elapsed = now - lastTime;
-
-  // 检测是否为当日交易时段
-  const today = moment().format('YYYY-MM-DD');
-  const isToday = cacheKey.includes(today);
-  const currentHour = new Date().getHours();
-  const isTradingHours = currentHour >= 9 && currentHour < 16;
-
-  if (isToday && isTradingHours) {
-    return elapsed > 30000;  // 交易时段: 30秒刷新
-  }
-
-  return elapsed > 3600000;  // 非交易时段/历史数据: 1小时刷新
-};
-```
-
-| 场景 | 刷新间隔 | 原因 |
-|------|---------|------|
-| 当日 + 交易时段 (9:00-16:00) | 30 秒 | 实时性要求高 |
-| 当日 + 非交易时段 | 1 小时 | 数据不会变化 |
-| 历史日期 | 1 小时 | 数据固定不变 |
-
-### 4.4 请求去重机制
-
-```javascript
-const fetchKlineData = async (stockCode, eventTime) => {
-  const cacheKey = getCacheKey(stockCode, eventTime);
-
-  // 1️⃣ 检查缓存
-  if (klineDataCache.has(cacheKey) && !shouldRefreshData(cacheKey)) {
-    return klineDataCache.get(cacheKey);  // 直接返回缓存
-  }
-
-  // 2️⃣ 检查是否有进行中的请求（防止重复请求）
-  if (pendingRequests.has(cacheKey)) {
-    return pendingRequests.get(cacheKey);  // 返回同一个 Promise
-  }
-
-  // 3️⃣ 发起新请求
-  const requestPromise = stockService
-    .getKlineData(stockCode, 'timeline', eventTime)
-    .then((res) => {
-      const data = Array.isArray(res?.data) ? res.data : [];
-      // 更新缓存
-      klineDataCache.set(cacheKey, data);
-      lastRequestTime.set(cacheKey, Date.now());
-      // 清除 pending 状态
-      pendingRequests.delete(cacheKey);
-      return data;
-    })
-    .catch((error) => {
-      pendingRequests.delete(cacheKey);
-      // 如果有旧缓存，返回旧数据
-      if (klineDataCache.has(cacheKey)) {
-        return klineDataCache.get(cacheKey);
-      }
-      return [];
-    });
-
-  // 保存到 pending
-  pendingRequests.set(cacheKey, requestPromise);
-  return requestPromise;
-};
-```
-
-**去重效果**:
-- 同时有 10 个组件请求同一只股票的同一天数据
-- 实际只会发出 **1 个 API 请求**
-- 其他 9 个请求共享同一个 Promise
-
-### 4.5 MiniTimelineChart 使用缓存
-
-```javascript
-const MiniTimelineChart = ({ stockCode, eventTime }) => {
-  useEffect(() => {
-    // 检查缓存
-    const cacheKey = getCacheKey(stockCode, eventTime);
-    const cachedData = klineDataCache.get(cacheKey);
-
-    if (cachedData && cachedData.length > 0) {
-      setData(cachedData);  // 使用缓存
-      return;
-    }
-
-    // 无缓存，发起请求
-    fetchKlineData(stockCode, eventTime)
-      .then(result => setData(result));
-  }, [stockCode, eventTime]);
-};
-```
-
----
-
-## 5. 自选股管理
-
-### 5.1 加载自选股列表
-
-```javascript
-const loadWatchlist = async () => {
-  const apiBase = getApiBase();  // 根据环境获取 API base URL
-
-  const response = await fetch(`${apiBase}/api/account/watchlist`, {
-    credentials: 'include'  // ⚠️ 关键: 发送 cookies 进行认证
-  });
-
-  const data = await response.json();
-
-  if (data.success && data.data) {
-    // 转换为 Set 数据结构，便于快速查找
-    const watchlistSet = new Set(data.data.map(item => item.stock_code));
-    setWatchlistStocks(watchlistSet);
-  }
-};
-```
-
-**API 响应格式**:
-```json
-{
-  "success": true,
-  "data": [
-    {"stock_code": "600000.SH", "stock_name": "浦发银行"},
-    {"stock_code": "000001.SZ", "stock_name": "平安银行"}
-  ]
-}
-```
-
-### 5.2 添加/移除自选股
-
-```javascript
-const handleWatchlistToggle = async (stockCode, isInWatchlist) => {
-  const apiBase = getApiBase();
-
-  let response;
-
-  if (isInWatchlist) {
-    // 🗑️ 删除操作
-    response = await fetch(`${apiBase}/api/account/watchlist/${stockCode}`, {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
-      credentials: 'include'
-    });
-  } else {
-    // ➕ 添加操作
-    const stockInfo = relatedStocks.find(s => s.stock_code === stockCode);
-
-    response = await fetch(`${apiBase}/api/account/watchlist`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      credentials: 'include',
-      body: JSON.stringify({
-        stock_code: stockCode,
-        stock_name: stockInfo?.stock_name || stockCode
-      })
-    });
-  }
-
-  const data = await response.json();
-
-  if (data.success) {
-    message.success(isInWatchlist ? '已从自选股移除' : '已加入自选股');
-
-    // 更新本地状态（乐观更新）
-    setWatchlistStocks(prev => {
-      const newSet = new Set(prev);
-      isInWatchlist ? newSet.delete(stockCode) : newSet.add(stockCode);
-      return newSet;
-    });
-  } else {
-    message.error(data.error || '操作失败');
-  }
-};
-```
-
-### 5.3 UI 集成
-
-```javascript
-// 在 StockTable 的"操作"列中
-{
-  title: '操作',
-  render: (_, record) => {
-    const isInWatchlist = watchlistStocks.has(record.stock_code);
-
-    return (
-      <Button
-        type={isInWatchlist ? 'default' : 'primary'}
-        icon={isInWatchlist ? <StarFilled /> : <StarOutlined />}
-        onClick={(e) => {
-          e.stopPropagation();  // 防止触发行点击
-          handleWatchlistToggle(record.stock_code, isInWatchlist);
-        }}
-      >
-        {isInWatchlist ? '已关注' : '加自选'}
-      </Button>
-    );
-  }
-}
-```
-
----
-
-## 6. 实时监控功能
-
-### 6.1 监控机制
-
-```javascript
-const [isMonitoring, setIsMonitoring] = useState(false);
-const monitoringIntervalRef = useRef(null);
-
-useEffect(() => {
-  // 清理旧定时器
-  if (monitoringIntervalRef.current) {
-    clearInterval(monitoringIntervalRef.current);
-    monitoringIntervalRef.current = null;
-  }
-
-  if (isMonitoring && relatedStocks.length > 0) {
-    // 定义更新函数
-    const updateQuotes = () => {
-      const codes = relatedStocks.map(s => s.stock_code);
-      stockService.getQuotes(codes, event?.created_at)
-        .then(quotes => setStockQuotes(quotes))
-        .catch(error => logger.error('...', error));
-    };
-
-    // 立即执行一次
-    updateQuotes();
-
-    // 设置定时器: 每 5 秒刷新
-    monitoringIntervalRef.current = setInterval(updateQuotes, 5000);
-  }
-
-  // 清理函数
-  return () => {
-    if (monitoringIntervalRef.current) {
-      clearInterval(monitoringIntervalRef.current);
-      monitoringIntervalRef.current = null;
-    }
-  };
-}, [isMonitoring, relatedStocks, event]);
-```
-
-### 6.2 监控控制
-
-```javascript
-const handleMonitoringToggle = () => {
-  setIsMonitoring(prev => !prev);
-};
-```
-
-**UI 表现**:
-```javascript
-<Button
-  className={`monitoring-button ${isMonitoring ? 'monitoring' : ''}`}
-  onClick={handleMonitoringToggle}
->
-  {isMonitoring ? '停止监控' : '实时监控'}
-</Button>
-<div>每5秒自动更新行情数据</div>
-```
-
-### 6.3 组件卸载清理
-
-```javascript
-useEffect(() => {
-  return () => {
-    // 组件卸载时清理定时器，防止内存泄漏
-    if (monitoringIntervalRef.current) {
-      clearInterval(monitoringIntervalRef.current);
-    }
-  };
-}, []);
-```
-
----
-
-## 7. 搜索和过滤
-
-### 7.1 搜索状态
-
-```javascript
-const [searchText, setSearchText] = useState('');
-const [filteredStocks, setFilteredStocks] = useState([]);
-```
-
-### 7.2 过滤逻辑
-
-```javascript
-useEffect(() => {
-  if (!searchText.trim()) {
-    setFilteredStocks(relatedStocks);  // 无搜索词，显示全部
-  } else {
-    const filtered = relatedStocks.filter(stock =>
-      stock.stock_code.toLowerCase().includes(searchText.toLowerCase()) ||
-      stock.stock_name.toLowerCase().includes(searchText.toLowerCase())
-    );
-    setFilteredStocks(filtered);
-  }
-}, [searchText, relatedStocks]);
-```
-
-**搜索特性**:
-- 不区分大小写
-- 同时匹配股票代码和股票名称
-- 实时过滤（每次输入都触发）
-
-### 7.3 搜索 UI
-
-```javascript
-<Input
-  placeholder="搜索股票代码或名称..."
-  value={searchText}
-  onChange={(e) => setSearchText(e.target.value)}
-  allowClear  // 显示清除按钮
-/>
-```
-
----
-
-## 8. UI 交互逻辑
-
-### 8.1 Tab 切换
-
-```javascript
-const [activeTab, setActiveTab] = useState('stocks');
-
-<AntdTabs
-  activeKey={activeTab}
-  onChange={setActiveTab}  // 直接设置，无拦截
-  items={tabItems}
-/>
-```
-
-**Tab 列表**:
-```javascript
-const tabItems = [
-  { key: 'stocks', label: '相关标的', children: ... },
-  { key: 'concepts', label: '相关概念', children: ... },
-  { key: 'historical', label: '历史事件对比', children: ... },
-  { key: 'chain', label: '传导链分析', children: ... }
-];
-```
-
-### 8.2 固定图表管理
-
-**添加固定图表** (行点击):
-```javascript
-const handleRowEvents = (record) => ({
-  onClick: () => {
-    setFixedCharts((prev) => {
-      // 防止重复添加
-      if (prev.find(item => item.stock.stock_code === record.stock_code)) {
-        return prev;
-      }
-      return [...prev, { stock: record, chartType: 'timeline' }];
-    });
-  },
-  style: { cursor: 'pointer' }
-});
-```
-
-**移除固定图表**:
-```javascript
-const handleUnfixChart = (stock) => {
-  setFixedCharts((prev) =>
-    prev.filter(item => item.stock.stock_code !== stock.stock_code)
-  );
-};
-```
-
-**渲染固定图表**:
-```javascript
-{fixedCharts.map(({ stock }, index) => (
-  <StockChartAntdModal
-    key={`fixed-chart-${stock.stock_code}-${index}`}
-    open={true}
-    onCancel={() => handleUnfixChart(stock)}
-    stock={stock}
-    eventTime={formattedEventTime}
-    fixed={true}
-  />
-))}
-```
-
-### 8.3 行展开/收起逻辑
-
-```javascript
-const [expandedRows, setExpandedRows] = useState(new Set());
-
-const toggleRowExpand = (stockCode) => {
-  setExpandedRows(prev => {
-    const newSet = new Set(prev);
-    newSet.has(stockCode) ? newSet.delete(stockCode) : newSet.add(stockCode);
-    return newSet;
-  });
-};
-```
-
-**应用场景**: 关联描述文本过长时的展开/收起
-
-### 8.4 讨论模态框
-
-```javascript
-const [discussionModalVisible, setDiscussionModalVisible] = useState(false);
-const [discussionType, setDiscussionType] = useState('事件讨论');
-
-<Button onClick={() => {
-  setDiscussionType('事件讨论');
-  setDiscussionModalVisible(true);
-}}>
-  查看事件讨论
-</Button>
-
-<EventDiscussionModal
-  isOpen={discussionModalVisible}
-  onClose={() => setDiscussionModalVisible(false)}
-  eventId={event?.id}
-  eventTitle={event?.title}
-  discussionType={discussionType}
-/>
-```
-
----
-
-## 9. 状态管理
-
-### 9.1 状态清单
-
-| 状态名 | 类型 | 初始值 | 用途 |
-|--------|------|--------|------|
-| `activeTab` | string | `'stocks'` | 当前激活的 Tab |
-| `loading` | boolean | `false` | 相关标的加载状态 |
-| `detailLoading` | boolean | `false` | 事件详情加载状态 |
-| `relatedStocks` | Array | `[]` | 相关股票列表 |
-| `stockQuotes` | Object | `{}` | 股票行情字典 |
-| `selectedStock` | Object | `null` | 当前选中的股票（未使用） |
-| `chartData` | Object | `null` | 图表数据（未使用） |
-| `eventDetail` | Object | `null` | 事件详情 |
-| `historicalEvents` | Array | `[]` | 历史事件列表 |
-| `chainAnalysis` | Object | `null` | 传导链分析数据 |
-| `posts` | Array | `[]` | 讨论帖子（未使用） |
-| `fixedCharts` | Array | `[]` | 固定图表列表 |
-| `searchText` | string | `''` | 搜索文本 |
-| `isMonitoring` | boolean | `false` | 实时监控开关 |
-| `filteredStocks` | Array | `[]` | 过滤后的股票列表 |
-| `expectationScore` | Object | `null` | 超预期得分 |
-| `watchlistStocks` | Set | `new Set()` | 自选股集合 |
-| `discussionModalVisible` | boolean | `false` | 讨论模态框可见性 |
-| `discussionType` | string | `'事件讨论'` | 讨论类型 |
-| `upgradeModalOpen` | boolean | `false` | 升级模态框可见性 |
-| `upgradeFeature` | string | `''` | 需要升级的功能 |
-
-### 9.2 Ref 引用
-
-| Ref 名 | 用途 |
-|--------|------|
-| `monitoringIntervalRef` | 存储监控定时器 ID |
-| `tableRef` | Table 组件引用（未使用） |
-
----
-
-## 10. API 端点清单
-
-### 10.1 事件相关 API
-
-| API | 方法 | 参数 | 返回数据 | 用途 |
-|-----|------|------|---------|------|
-| `eventService.getRelatedStocks(eventId)` | GET | 事件ID | `{ success, data: Stock[] }` | 获取相关股票 |
-| `eventService.getEventDetail(eventId)` | GET | 事件ID | `{ success, data: EventDetail }` | 获取事件详情 |
-| `eventService.getHistoricalEvents(eventId)` | GET | 事件ID | `{ success, data: Event[] }` | 获取历史事件 |
-| `eventService.getTransmissionChainAnalysis(eventId)` | GET | 事件ID | `{ success, data: ChainAnalysis }` | 获取传导链分析 |
-| `eventService.getExpectationScore(eventId)` | GET | 事件ID | `{ success, data: Score }` | 获取超预期得分 |
-
-### 10.2 股票相关 API
-
-| API | 方法 | 参数 | 返回数据 | 用途 |
-|-----|------|------|---------|------|
-| `stockService.getQuotes(codes[], eventTime)` | GET | 股票代码数组, 事件时间 | `{ [code]: Quote }` | 批量获取行情 |
-| `stockService.getKlineData(code, type, eventTime)` | GET | 股票代码, K线类型, 事件时间 | `{ success, data: Kline[] }` | 获取K线数据 |
-
-**K线类型**: `'timeline'` (分时), `'daily'` (日K), `'weekly'` (周K), `'monthly'` (月K)
-
-### 10.3 自选股 API
-
-| API | 方法 | 请求体 | 返回数据 | 用途 |
-|-----|------|--------|---------|------|
-| `GET /api/account/watchlist` | GET | - | `{ success, data: Watchlist[] }` | 获取自选股列表 |
-| `POST /api/account/watchlist` | POST | `{ stock_code, stock_name }` | `{ success }` | 添加自选股 |
-| `DELETE /api/account/watchlist/:code` | DELETE | - | `{ success }` | 移除自选股 |
-
-**认证方式**: 所有 API 都使用 `credentials: 'include'` 携带 cookies
-
----
-
-## 📝 附录
-
-### A. 数据结构定义
-
-#### Stock (股票)
-```typescript
-interface Stock {
-  stock_code: string;        // 股票代码, 如 "600000.SH"
-  stock_name: string;        // 股票名称, 如 "浦发银行"
-  relation_desc: string | {  // 关联描述
-    data: Array<{
-      query_part?: string;
-      sentences?: string;
-    }>
-  };
-}
-```
-
-#### Quote (行情)
-```typescript
-interface Quote {
-  change: number;       // 涨跌幅 (百分比)
-  price: number;        // 当前价格
-  volume: number;       // 成交量
-  // ... 其他字段
-}
-```
-
-#### Event (事件)
-```typescript
-interface Event {
-  id: string;           // 事件 ID
-  title: string;        // 事件标题
-  start_time: string;   // 事件开始时间 (ISO 8601)
-  created_at: string;   // 创建时间
-  // ... 其他字段
-}
-```
-
-### B. 性能优化要点
-
-1. **请求去重**: 使用 `pendingRequests` Map 防止重复请求
-2. **智能缓存**: 根据交易时段动态调整刷新策略
-3. **并发加载**: 5 个 API 请求并发执行
-4. **乐观更新**: 自选股操作立即更新 UI，无需等待后端响应
-5. **定时器清理**: 组件卸载时清理定时器，防止内存泄漏
-
-### C. 安全要点
-
-1. **认证**: 所有 API 请求携带 credentials: 'include'
-2. **权限检查**: 每个 Tab 渲染前检查用户权限
-3. **错误处理**: 所有 API 调用都有 catch 错误处理
-4. **日志记录**: 使用 logger 记录关键操作和错误
-
----
-
-**文档结束**
-
-> 该文档记录了重构前 StockDetailPanel.js 的完整业务逻辑，可作为重构验证的参考基准。

docs/StockDetailPanel_REFACTORING_COMPARISON.md

@@ -1,740 +0,0 @@
-# StockDetailPanel 重构前后对比文档
-
-> **重构日期**: 2025-10-30
-> **重构目标**: 从 1067 行单体组件优化到模块化架构
-> **架构模式**: Redux + Custom Hooks + Atomic Components
-
----
-
-## 📊 核心指标对比
-
-| 指标 | 重构前 | 重构后 | 改进 |
-|------|--------|--------|------|
-| **主文件行数** | 1067 行 | 347 行 | ⬇️ **67.5%** (减少 720 行) |
-| **文件数量** | 1 个 | 12 个 | ➕ 11 个新文件 |
-| **组件复杂度** | 超高 | 低 | ✅ 单一职责 |
-| **状态管理** | 20+ 本地 state | 8 个 Redux + 8 个本地 | ✅ 分层清晰 |
-| **代码复用性** | 无 | 高 | ✅ 可复用组件 |
-| **可测试性** | 困难 | 容易 | ✅ 独立模块 |
-| **可维护性** | 低 | 高 | ✅ 关注点分离 |
-
----
-
-## 🏗️ 架构对比
-
-### 重构前：单体架构
-
-```
-StockDetailPanel.js (1067 行)
-├── 全局工具函数 (25-113 行)
-│   ├── getCacheKey
-│   ├── shouldRefreshData
-│   └── fetchKlineData
-├── MiniTimelineChart 组件 (115-274 行)
-├── StockDetailModal 组件 (276-290 行)
-├── 主组件 StockDetailPanel (292-1066 行)
-│   ├── 20+ 个 useState
-│   ├── 8+ 个 useEffect
-│   ├── 15+ 个事件处理函数
-│   ├── stockColumns 表格列定义 (150+ 行)
-│   ├── tabItems 配置 (200+ 行)
-│   └── JSX 渲染 (100+ 行)
-```
-
-**问题**:
-- ❌ 单文件超过 1000 行，难以维护
-- ❌ 所有逻辑耦合在一起
-- ❌ 组件无法复用
-- ❌ 难以单元测试
-- ❌ 协作开发容易冲突
-
-### 重构后：模块化架构
-
-```
-StockDetailPanel/
-├── StockDetailPanel.js (347 行) ← 主组件
-│   └── 使用 Redux Hooks + Custom Hooks + UI 组件
-│
-├── store/slices/
-│   └── stockSlice.js (450 行) ← Redux 状态管理
-│       ├── 8 个 AsyncThunks
-│       ├── 三层缓存策略
-│       └── 请求去重机制
-│
-├── hooks/ ← 业务逻辑层
-│   ├── useEventStocks.js (130 行)
-│   │   └── 统一数据加载，自动合并行情
-│   ├── useWatchlist.js (110 行)
-│   │   └── 自选股 CRUD，批量操作
-│   └── useStockMonitoring.js (150 行)
-│       └── 实时监控，自动清理
-│
-├── utils/ ← 工具层
-│   └── klineDataCache.js (160 行)
-│       └── K 线缓存，智能刷新
-│
-└── components/ ← UI 组件层
-    ├── index.js (6 行)
-    ├── MiniTimelineChart.js (175 行)
-    ├── StockSearchBar.js (50 行)
-    ├── StockTable.js (230 行)
-    ├── LockedContent.js (50 行)
-    └── RelatedStocksTab.js (110 行)
-```
-
-**优势**:
-- ✅ 关注点分离（UI / 业务逻辑 / 数据管理）
-- ✅ 组件可独立开发和测试
-- ✅ 代码复用性高
-- ✅ 便于协作开发
-- ✅ 易于扩展新功能
-
----
-
-## 🔄 状态管理对比
-
-### 重构前：20+ 本地 State
-
-```javascript
-// 全部在 StockDetailPanel 组件内
-const [activeTab, setActiveTab] = useState('stocks');
-const [loading, setLoading] = useState(false);
-const [detailLoading, setDetailLoading] = useState(false);
-const [relatedStocks, setRelatedStocks] = useState([]);
-const [stockQuotes, setStockQuotes] = useState({});
-const [selectedStock, setSelectedStock] = useState(null);
-const [chartData, setChartData] = useState(null);
-const [eventDetail, setEventDetail] = useState(null);
-const [historicalEvents, setHistoricalEvents] = useState([]);
-const [chainAnalysis, setChainAnalysis] = useState(null);
-const [posts, setPosts] = useState([]);
-const [fixedCharts, setFixedCharts] = useState([]);
-const [searchText, setSearchText] = useState('');
-const [isMonitoring, setIsMonitoring] = useState(false);
-const [filteredStocks, setFilteredStocks] = useState([]);
-const [expectationScore, setExpectationScore] = useState(null);
-const [watchlistStocks, setWatchlistStocks] = useState(new Set());
-const [discussionModalVisible, setDiscussionModalVisible] = useState(false);
-const [discussionType, setDiscussionType] = useState('事件讨论');
-const [upgradeModalOpen, setUpgradeModalOpen] = useState(false);
-const [upgradeFeature, setUpgradeFeature] = useState('');
-```
-
-**问题**:
-- ❌ 状态分散，难以追踪
-- ❌ 数据跨组件共享困难
-- ❌ 没有持久化机制
-- ❌ 每次重新加载都需要重新请求
-
-### 重构后：分层状态管理
-
-#### 1️⃣ Redux State (全局共享数据)
-
-```javascript
-// store/slices/stockSlice.js
-{
-  eventStocksCache: {},      // { [eventId]: stocks[] }
-  quotes: {},                // { [stockCode]: quote }
-  eventDetailsCache: {},     // { [eventId]: detail }
-  historicalEventsCache: {}, // { [eventId]: events[] }
-  chainAnalysisCache: {},    // { [eventId]: analysis }
-  expectationScores: {},     // { [eventId]: score }
-  watchlist: [],             // 自选股列表
-  loading: { ... }           // 细粒度加载状态
-}
-```
-
-**优势**:
-- ✅ 三层缓存：Redux → LocalStorage → API
-- ✅ 跨组件共享，无需 prop drilling
-- ✅ 数据持久化到 LocalStorage
-- ✅ 请求去重，避免重复调用
-
-#### 2️⃣ Custom Hooks (封装业务逻辑)
-
-```javascript
-// hooks/useEventStocks.js
-const {
-  stocks,              // 从 Redux 获取
-  stocksWithQuotes,    // 自动合并行情
-  quotes,
-  eventDetail,
-  loading,
-  refreshAllData       // 强制刷新
-} = useEventStocks(eventId, eventTime);
-
-// hooks/useWatchlist.js
-const {
-  watchlistSet,        // Set 结构，O(1) 查询
-  toggleWatchlist,     // 一键切换
-  isInWatchlist        // 快速检查
-} = useWatchlist();
-
-// hooks/useStockMonitoring.js
-const {
-  isMonitoring,
-  toggleMonitoring,    // 自动管理定时器
-  manualRefresh
-} = useStockMonitoring(stocks, eventTime);
-```
-
-**优势**:
-- ✅ 业务逻辑可复用
-- ✅ 自动清理副作用
-- ✅ 易于单元测试
-
-#### 3️⃣ Local State (UI 临时状态)
-
-```javascript
-// StockDetailPanel.js - 仅 8 个本地状态
-const [activeTab, setActiveTab] = useState('stocks');
-const [searchText, setSearchText] = useState('');
-const [filteredStocks, setFilteredStocks] = useState([]);
-const [fixedCharts, setFixedCharts] = useState([]);
-const [discussionModalVisible, setDiscussionModalVisible] = useState(false);
-const [discussionType, setDiscussionType] = useState('事件讨论');
-const [upgradeModalOpen, setUpgradeModalOpen] = useState(false);
-const [upgradeFeature, setUpgradeFeature] = useState('');
-```
-
-**特点**:
-- ✅ 仅存储 UI 临时状态
-- ✅ 不需要持久化
-- ✅ 组件卸载即销毁
-
----
-
-## 🔌 数据流对比
-
-### 重构前：组件内部直接调用 API
-
-```javascript
-// 所有逻辑都在组件内
-const loadAllData = () => {
-  setLoading(true);
-
-  // API 调用 1
-  eventService.getRelatedStocks(event.id)
-    .then(res => {
-      setRelatedStocks(res.data);
-
-      // 连锁调用 API 2
-      stockService.getQuotes(codes, event.created_at)
-        .then(quotes => setStockQuotes(quotes));
-    })
-    .finally(() => setLoading(false));
-
-  // API 调用 3
-  eventService.getEventDetail(event.id)
-    .then(res => setEventDetail(res.data));
-
-  // API 调用 4
-  eventService.getHistoricalEvents(event.id)
-    .then(res => setHistoricalEvents(res.data));
-
-  // API 调用 5
-  eventService.getTransmissionChainAnalysis(event.id)
-    .then(res => setChainAnalysis(res.data));
-
-  // API 调用 6
-  eventService.getExpectationScore(event.id)
-    .then(res => setExpectationScore(res.data));
-};
-```
-
-**问题**:
-- ❌ 没有缓存，每次切换都重新请求
-- ❌ 没有去重，可能重复请求
-- ❌ 错误处理分散
-- ❌ 加载状态管理复杂
-
-### 重构后：Redux + Hooks 统一管理
-
-```javascript
-// 1️⃣ 组件层：简洁的 Hook 调用
-const {
-  stocks,
-  quotes,
-  eventDetail,
-  loading,
-  refreshAllData
-} = useEventStocks(eventId, eventTime);
-
-// 2️⃣ Hook 层：自动加载和合并
-useEffect(() => {
-  if (eventId) {
-    dispatch(fetchEventStocks({ eventId }));
-    dispatch(fetchStockQuotes({ codes, eventTime }));
-    dispatch(fetchEventDetail({ eventId }));
-    // ...
-  }
-}, [eventId]);
-
-// 3️⃣ Redux 层：三层缓存 + 去重
-export const fetchEventStocks = createAsyncThunk(
-  'stock/fetchEventStocks',
-  async ({ eventId, forceRefresh }, { getState }) => {
-    // 检查 Redux 缓存
-    if (!forceRefresh && getState().stock.eventStocksCache[eventId]) {
-      return { eventId, stocks: cached };
-    }
-
-    // 检查 LocalStorage 缓存
-    const localCached = localCacheManager.get(key);
-    if (!forceRefresh && localCached) {
-      return { eventId, stocks: localCached };
-    }
-
-    // 发起 API 请求
-    const res = await eventService.getRelatedStocks(eventId);
-    localCacheManager.set(key, res.data);
-    return { eventId, stocks: res.data };
-  }
-);
-```
-
-**优势**:
-- ✅ 自动缓存，切换 Tab 无需重新请求
-- ✅ 请求去重，pendingRequests Map
-- ✅ 统一错误处理
-- ✅ 细粒度 loading 状态
-
----
-
-## 📦 组件复用性对比
-
-### 重构前：无复用性
-
-```javascript
-// MiniTimelineChart 内嵌在 StockDetailPanel.js 中
-// 无法在其他组件中使用
-// 表格列定义、Tab 配置都耦合在主组件
-```
-
-### 重构后：高度可复用
-
-```javascript
-// 1️⃣ MiniTimelineChart - 可在任何地方使用
-import { MiniTimelineChart } from './components';
-
-<MiniTimelineChart
-  stockCode="600000.SH"
-  eventTime="2024-10-30 14:30"
-/>
-
-// 2️⃣ StockTable - 可独立使用
-import { StockTable } from './components';
-
-<StockTable
-  stocks={stocks}
-  quotes={quotes}
-  watchlistSet={watchlistSet}
-  onWatchlistToggle={handleToggle}
-/>
-
-// 3️⃣ StockSearchBar - 通用搜索组件
-import { StockSearchBar } from './components';
-
-<StockSearchBar
-  searchText={searchText}
-  onSearch={setSearchText}
-  onRefresh={refresh}
-/>
-
-// 4️⃣ LockedContent - 权限锁定 UI
-import { LockedContent } from './components';
-
-<LockedContent
-  description="高级功能"
-  isProRequired={false}
-  onUpgradeClick={handleUpgrade}
-/>
-```
-
-**应用场景**:
-- ✅ 可用于公司详情页
-- ✅ 可用于自选股页面
-- ✅ 可用于行业分析页面
-- ✅ 可用于其他需要股票列表的地方
-
----
-
-## 🧪 可测试性对比
-
-### 重构前：难以测试
-
-```javascript
-// 无法单独测试业务逻辑
-// 必须挂载整个 1067 行的组件
-// Mock 复杂度高
-
-describe('StockDetailPanel', () => {
-  it('should load stocks', () => {
-    // 需要 mock 所有依赖
-    const wrapper = mount(
-      <Provider store={store}>
-        <StockDetailPanel
-          visible={true}
-          event={mockEvent}
-          onClose={mockClose}
-        />
-      </Provider>
-    );
-
-    // 测试逻辑深埋在组件内部，难以验证
-  });
-});
-```
-
-### 重构后：易于测试
-
-```javascript
-// ✅ 测试 Hook
-describe('useEventStocks', () => {
-  it('should fetch stocks on mount', () => {
-    const { result } = renderHook(() =>
-      useEventStocks('event-123', '2024-10-30')
-    );
-
-    expect(result.current.loading.stocks).toBe(true);
-    // ...
-  });
-
-  it('should merge stocks with quotes', () => {
-    // ...
-  });
-});
-
-// ✅ 测试 Redux Slice
-describe('stockSlice', () => {
-  it('should cache event stocks', () => {
-    const state = stockReducer(
-      initialState,
-      fetchEventStocks.fulfilled({ eventId: '123', stocks: [] })
-    );
-
-    expect(state.eventStocksCache['123']).toEqual([]);
-  });
-});
-
-// ✅ 测试组件
-describe('StockTable', () => {
-  it('should render stocks', () => {
-    const { getByText } = render(
-      <StockTable
-        stocks={mockStocks}
-        quotes={mockQuotes}
-        watchlistSet={new Set()}
-      />
-    );
-
-    expect(getByText('600000.SH')).toBeInTheDocument();
-  });
-});
-
-// ✅ 测试工具函数
-describe('klineDataCache', () => {
-  it('should return cached data', () => {
-    const key = getCacheKey('600000.SH', '2024-10-30');
-    klineDataCache.set(key, mockData);
-
-    const result = fetchKlineData('600000.SH', '2024-10-30');
-    expect(result).toBe(mockData);
-  });
-});
-```
-
----
-
-## ⚡ 性能优化对比
-
-### 重构前
-
-| 场景 | 行为 | 性能问题 |
-|------|------|---------|
-| 切换 Tab | 无缓存，重新请求 | ❌ 网络开销大 |
-| 多次点击同一股票 | 重复请求 K 线数据 | ❌ 重复请求 |
-| 实时监控 | 定时器可能未清理 | ❌ 内存泄漏 |
-| 组件卸载 | 可能遗留副作用 | ❌ 内存泄漏 |
-
-### 重构后
-
-| 场景 | 行为 | 性能优化 |
-|------|------|---------|
-| 切换 Tab | Redux + LocalStorage 缓存 | ✅ 即时响应 |
-| 多次点击同一股票 | pendingRequests 去重 | ✅ 单次请求 |
-| 实时监控 | Hook 自动清理定时器 | ✅ 无泄漏 |
-| 组件卸载 | useEffect 清理函数 | ✅ 完全清理 |
-| K 线缓存 | 智能刷新（交易时段 30s） | ✅ 减少请求 |
-| 行情更新 | 批量请求，单次返回 | ✅ 减少请求次数 |
-
-**性能提升**:
-- 🚀 页面切换速度提升 **80%**（缓存命中）
-- 🚀 API 请求减少 **60%**（缓存 + 去重）
-- 🚀 内存占用降低 **40%**（及时清理）
-
----
-
-## 🛠️ 维护性对比
-
-### 重构前：维护困难
-
-**场景 1: 修改自选股逻辑**
-```javascript
-// 需要在 1067 行中找到相关代码
-// handleWatchlistToggle 函数在 417-467 行
-// 表格列定义在 606-757 行
-// UI 渲染在 741-752 行
-// 分散在 3 个位置，容易遗漏
-```
-
-**场景 2: 添加新功能**
-```javascript
-// 需要在庞大的组件中添加代码
-// 容易破坏现有逻辑
-// Git 冲突概率高
-```
-
-**场景 3: 代码审查**
-```javascript
-// Pull Request 显示 1067 行 diff
-// 审查者难以理解上下文
-// 容易遗漏问题
-```
-
-### 重构后：易于维护
-
-**场景 1: 修改自选股逻辑**
-```javascript
-// 直接打开 hooks/useWatchlist.js (110 行)
-// 所有自选股逻辑集中在此文件
-// 修改后只需测试这一个 Hook
-```
-
-**场景 2: 添加新功能**
-```javascript
-// 创建新的 Hook 或组件
-// 在主组件中引入即可
-// 不影响现有代码
-```
-
-**场景 3: 代码审查**
-```javascript
-// Pull Request 每个文件独立 diff
-// components/NewFeature.js (+150 行)
-// 审查者可专注单一功能
-// 容易发现问题
-```
-
----
-
-## 📋 代码质量对比
-
-### 代码行数分布
-
-| 文件类型 | 重构前 | 重构后 | 说明 |
-|---------|--------|--------|------|
-| **主组件** | 1067 行 | 347 行 | 67.5% 减少 |
-| **Redux Slice** | 0 行 | 450 行 | 状态管理层 |
-| **Custom Hooks** | 0 行 | 390 行 | 业务逻辑层 |
-| **UI 组件** | 0 行 | 615 行 | 可复用组件 |
-| **工具模块** | 0 行 | 160 行 | 缓存工具 |
-| **总计** | 1067 行 | 1962 行 | +895 行（但模块化） |
-
-**说明**: 虽然总行数增加，但代码质量显著提升：
-- ✅ 每个文件职责单一
-- ✅ 可读性大幅提高
-- ✅ 可维护性显著增强
-- ✅ 可复用性从 0 到 100%
-
-### ESLint / 代码规范
-
-| 指标 | 重构前 | 重构后 |
-|------|--------|--------|
-| **函数平均行数** | ~50 行 | ~15 行 |
-| **最大函数行数** | 200+ 行 | 60 行 |
-| **嵌套层级** | 最深 6 层 | 最深 3 层 |
-| **循环复杂度** | 高 | 低 |
-
----
-
-## ✅ 业务逻辑保留验证
-
-### 权限控制 ✅ 完全保留
-
-| 功能 | 重构前 | 重构后 | 状态 |
-|------|--------|--------|------|
-| `hasFeatureAccess` 检查 | ✅ | ✅ | 保留 |
-| `getUpgradeRecommendation` | ✅ | ✅ | 保留 |
-| Tab 锁定图标显示 | ✅ | ✅ | 保留 |
-| LockedContent UI | ✅ | ✅ | 提取为组件 |
-| SubscriptionUpgradeModal | ✅ | ✅ | 保留 |
-
-### 数据加载 ✅ 完全保留
-
-| API 调用 | 重构前 | 重构后 | 状态 |
-|---------|--------|--------|------|
-| getRelatedStocks | ✅ | ✅ | 移至 Redux |
-| getStockQuotes | ✅ | ✅ | 移至 Redux |
-| getEventDetail | ✅ | ✅ | 移至 Redux |
-| getHistoricalEvents | ✅ | ✅ | 移至 Redux |
-| getTransmissionChainAnalysis | ✅ | ✅ | 移至 Redux |
-| getExpectationScore | ✅ | ✅ | 移至 Redux |
-
-### K 线缓存 ✅ 完全保留
-
-| 功能 | 重构前 | 重构后 | 状态 |
-|------|--------|--------|------|
-| klineDataCache Map | ✅ | ✅ | 移至 utils/ |
-| pendingRequests 去重 | ✅ | ✅ | 移至 utils/ |
-| 智能刷新策略 | ✅ | ✅ | 移至 utils/ |
-| 交易时段检测 | ✅ | ✅ | 移至 utils/ |
-
-### 自选股管理 ✅ 完全保留
-
-| 功能 | 重构前 | 重构后 | 状态 |
-|------|--------|--------|------|
-| loadWatchlist | ✅ | ✅ | 移至 Hook |
-| handleWatchlistToggle | ✅ | ✅ | 移至 Hook |
-| API: GET /watchlist | ✅ | ✅ | 保留 |
-| API: POST /watchlist | ✅ | ✅ | 保留 |
-| API: DELETE /watchlist/:code | ✅ | ✅ | 保留 |
-| credentials: 'include' | ✅ | ✅ | 保留 |
-
-### 实时监控 ✅ 完全保留
-
-| 功能 | 重构前 | 重构后 | 状态 |
-|------|--------|--------|------|
-| 5 秒定时刷新 | ✅ | ✅ | 移至 Hook |
-| 定时器清理 | ✅ | ✅ | Hook 自动清理 |
-| 监控开关 | ✅ | ✅ | 保留 |
-| 立即执行一次 | ✅ | ✅ | 保留 |
-
-### UI 交互 ✅ 完全保留
-
-| 功能 | 重构前 | 重构后 | 状态 |
-|------|--------|--------|------|
-| Tab 切换 | ✅ | ✅ | 保留 |
-| 搜索过滤 | ✅ | ✅ | 保留 |
-| 行点击固定图表 | ✅ | ✅ | 保留 |
-| 关联描述展开/收起 | ✅ | ✅ | 移至 StockTable |
-| 讨论模态框 | ✅ | ✅ | 保留 |
-| 升级模态框 | ✅ | ✅ | 保留 |
-
----
-
-## 🎯 重构收益总结
-
-### 技术收益
-
-| 维度 | 收益 | 量化指标 |
-|------|------|---------|
-| **代码质量** | 显著提升 | 主文件行数 ⬇️ 67.5% |
-| **可维护性** | 显著提升 | 模块化，单一职责 |
-| **可测试性** | 从困难到容易 | 可独立测试每个模块 |
-| **可复用性** | 从 0 到 100% | 5 个可复用组件 |
-| **性能** | 提升 60-80% | 缓存命中率高 |
-| **开发效率** | 提升 40% | 并行开发，减少冲突 |
-
-### 业务收益
-
-| 维度 | 收益 |
-|------|------|
-| **功能完整性** | ✅ 100% 保留原有功能 |
-| **用户体验** | ✅ 页面响应速度提升 |
-| **稳定性** | ✅ 减少内存泄漏风险 |
-| **扩展性** | ✅ 易于添加新功能 |
-
-### 团队收益
-
-| 维度 | 收益 |
-|------|------|
-| **协作效率** | ✅ 减少代码冲突 |
-| **代码审查** | ✅ 更容易 review |
-| **知识传递** | ✅ 新人易于理解 |
-| **长期维护** | ✅ 降低维护成本 |
-
----
-
-## 📝 重构最佳实践总结
-
-本次重构遵循的原则：
-
-### 1. **关注点分离** (Separation of Concerns)
-- ✅ UI 组件只负责渲染
-- ✅ Custom Hooks 负责业务逻辑
-- ✅ Redux 负责状态管理
-- ✅ Utils 负责工具函数
-
-### 2. **单一职责** (Single Responsibility)
-- ✅ 每个文件只做一件事
-- ✅ 每个函数只有一个职责
-- ✅ 组件职责清晰
-
-### 3. **开闭原则** (Open-Closed)
-- ✅ 对扩展开放：易于添加新功能
-- ✅ 对修改封闭：不破坏现有功能
-
-### 4. **DRY 原则** (Don't Repeat Yourself)
-- ✅ 提取可复用组件
-- ✅ 封装通用逻辑
-- ✅ 避免代码重复
-
-### 5. **可测试性优先**
-- ✅ 每个模块独立可测
-- ✅ 纯函数易于测试
-- ✅ Mock 依赖简单
-
----
-
-## 🚀 后续优化建议
-
-虽然本次重构已大幅改善代码质量，但仍有优化空间：
-
-### 短期优化 (1-2 周)
-
-1. **添加单元测试**
-   - [ ] useEventStocks 测试覆盖率 > 80%
-   - [ ] stockSlice 测试覆盖率 > 90%
-   - [ ] 组件快照测试
-
-2. **性能监控**
-   - [ ] 添加 React.memo 优化渲染
-   - [ ] 监控 API 调用次数
-   - [ ] 监控缓存命中率
-
-3. **文档完善**
-   - [ ] 组件 API 文档
-   - [ ] Hook 使用指南
-   - [ ] Storybook 示例
-
-### 中期优化 (1-2 月)
-
-1. **TypeScript 迁移**
-   - [ ] 添加类型定义
-   - [ ] 提升类型安全
-
-2. **Error Boundary**
-   - [ ] 添加错误边界
-   - [ ] 优雅降级
-
-3. **国际化支持**
-   - [ ] 提取文案
-   - [ ] 支持多语言
-
-### 长期优化 (3-6 月)
-
-1. **微前端拆分**
-   - [ ] 股票模块独立部署
-   - [ ] 按需加载
-
-2. **性能极致优化**
-   - [ ] 虚拟滚动
-   - [ ] Web Worker 计算
-   - [ ] Service Worker 缓存
-
----
-
-**文档结束**
-
-> 本次重构是一次成功的工程实践，在保持 100% 功能完整性的前提下，实现了代码质量的质的飞跃。

docs/TRACKING_VALIDATION_CHECKLIST.md

@@ -1,484 +0,0 @@
-# PostHog 事件追踪验证清单
-
-## 📋 验证目的
-
-本清单用于验证所有PostHog事件追踪是否正常工作。建议在以下场景使用：
-- ✅ 开发环境集成后的验证
-- ✅ 上线前的最终检查
-- ✅ 定期追踪健康度检查
-- ✅ 新功能上线后的验证
-
----
-
-## 🔧 验证准备
-
-### 1. 环境检查
-- [ ] PostHog已正确配置（检查.env文件）
-- [ ] PostHog控制台可以访问
-- [ ] 开发者工具Network面板可以看到PostHog请求
-- [ ] 浏览器Console没有PostHog相关错误
-
-### 2. 验证工具
-- [ ] 打开浏览器开发者工具（F12）
-- [ ] 切换到Network标签
-- [ ] 过滤器设置为：`posthog` 或 `api/events`
-- [ ] 打开Console标签查看logger.debug输出
-
-### 3. PostHog控制台
-- [ ] 登录 https://app.posthog.com
-- [ ] 进入项目
-- [ ] 打开 "Live events" 视图
-- [ ] 准备监控实时事件
-
----
-
-## ✅ 功能模块验证
-
-### 🔐 认证模块（useAuthEvents）
-
-#### 注册流程
-- [ ] 打开注册页面
-- [ ] 填写手机号和密码
-- [ ] 点击注册按钮
-- [ ] **验证事件**: `USER_SIGNED_UP`
-  - 检查属性：`signup_method`, `user_id`
-
-#### 登录流程
-- [ ] 打开登录页面
-- [ ] 使用密码登录
-- [ ] **验证事件**: `USER_LOGGED_IN`
-  - 检查属性：`login_method: 'password'`
-- [ ] 退出登录
-- [ ] 使用微信登录
-- [ ] **验证事件**: `USER_LOGGED_IN`
-  - 检查属性：`login_method: 'wechat'`
-
-#### 登出
-- [ ] 点击退出登录
-- [ ] **验证事件**: `USER_LOGGED_OUT`
-
----
-
-### 🏠 社区模块（useCommunityEvents）
-
-#### 页面浏览
-- [ ] 访问社区页面 `/community`
-- [ ] **验证事件**: `Community Page Viewed`
-- [ ] **验证事件**: `News List Viewed`
-  - 检查属性：`total_count`, `sort_by`, `importance_filter`
-
-#### 新闻点击
-- [ ] 点击任一新闻事件
-- [ ] **验证事件**: `NEWS_ARTICLE_CLICKED`
-  - 检查属性：`event_id`, `event_title`, `importance`
-
-#### 搜索功能
-- [ ] 在搜索框输入关键词
-- [ ] 点击搜索
-- [ ] **验证事件**: `SEARCH_QUERY_SUBMITTED`
-  - 检查属性：`query`, `result_count`, `context: 'community'`
-
-#### 筛选功能
-- [ ] 切换重要性筛选
-- [ ] **验证事件**: `SEARCH_FILTER_APPLIED`
-  - 检查属性：`filter_type: 'importance'`
-- [ ] 切换排序方式
-- [ ] **验证事件**: `SEARCH_FILTER_APPLIED`
-  - 检查属性：`filter_type: 'sort'`
-
----
-
-### 📰 事件详情模块（useEventDetailEvents）
-
-#### 页面浏览
-- [ ] 点击任一事件进入详情页
-- [ ] **验证事件**: `EVENT_DETAIL_VIEWED`
-  - 检查属性：`event_id`, `event_title`, `importance`
-
-#### 分析查看
-- [ ] 页面加载完成后
-- [ ] **验证事件**: `EVENT_ANALYSIS_VIEWED`
-  - 检查属性：`analysis_type`, `related_stock_count`
-
-#### 标签切换
-- [ ] 点击"相关股票"标签
-- [ ] **验证事件**: `NEWS_TAB_CLICKED`
-  - 检查属性：`tab_name: 'related_stocks'`
-
-#### 相关股票点击
-- [ ] 点击任一相关股票
-- [ ] **验证事件**: `STOCK_CLICKED`
-  - 检查属性：`stock_code`, `source: 'event_detail_related_stocks'`
-
-#### 社交互动
-- [ ] 点击评论点赞按钮
-- [ ] **验证事件**: `Comment Liked` 或 `Comment Unliked`
-  - 检查属性：`comment_id`, `event_id`, `action`
-- [ ] 输入评论内容
-- [ ] 点击发表评论
-- [ ] **验证事件**: `Comment Added`
-  - 检查属性：`comment_id`, `event_id`, `content_length`
-- [ ] 删除自己的评论（如果有）
-- [ ] **验证事件**: `Comment Deleted`
-  - 检查属性：`comment_id`
-
----
-
-### 📊 仪表板模块（useDashboardEvents）
-
-#### 页面浏览
-- [ ] 访问个人中心 `/dashboard/center`
-- [ ] **验证事件**: `DASHBOARD_CENTER_VIEWED`
-  - 检查属性：`page_type: 'center'`
-
-#### 自选股
-- [ ] 查看自选股列表
-- [ ] **验证事件**: `Watchlist Viewed`
-  - 检查属性：`stock_count`, `has_stocks`
-
-#### 关注的事件
-- [ ] 查看关注的事件列表
-- [ ] **验证事件**: `Following Events Viewed`
-  - 检查属性：`event_count`
-
-#### 评论管理
-- [ ] 查看我的评论
-- [ ] **验证事件**: `Comments Viewed`
-  - 检查属性：`comment_count`
-
----
-
-### 💹 模拟盘模块（useTradingSimulationEvents）
-
-#### 进入模拟盘
-- [ ] 访问模拟盘页面 `/trading-simulation`
-- [ ] **验证事件**: `TRADING_SIMULATION_ENTERED`
-  - 检查属性：`total_value`, `available_cash`, `holdings_count`
-
-#### 搜索股票
-- [ ] 在搜索框输入股票代码/名称
-- [ ] **验证事件**: `Simulation Stock Searched`
-  - 检查属性：`query`
-
-#### 下单操作
-- [ ] 选择一只股票
-- [ ] 输入数量和价格
-- [ ] 点击买入/卖出
-- [ ] **验证事件**: `Simulation Order Placed`
-  - 检查属性：`stock_code`, `order_type`, `quantity`, `price`
-
-#### 持仓查看
-- [ ] 切换到持仓标签
-- [ ] **验证事件**: `Simulation Holdings Viewed`
-  - 检查属性：`holdings_count`, `total_value`
-
----
-
-### 🔍 搜索模块（useSearchEvents）
-
-#### 搜索发起
-- [ ] 点击搜索框获得焦点
-- [ ] **验证事件**: `SEARCH_INITIATED`
-  - 检查属性：`context: 'community'`
-
-#### 搜索提交
-- [ ] 输入搜索词
-- [ ] 按回车或点击搜索
-- [ ] **验证事件**: `SEARCH_QUERY_SUBMITTED`
-  - 检查属性：`query`, `result_count`, `has_results`
-
-#### 无结果追踪
-- [ ] 搜索一个不存在的词
-- [ ] **验证事件**: `SEARCH_NO_RESULTS`
-  - 检查属性：`query`, `context`
-
----
-
-### 🧭 导航模块（useNavigationEvents）
-
-#### Logo点击
-- [ ] 点击页面左上角Logo
-- [ ] **验证事件**: `Logo Clicked`
-  - 检查属性：`component: 'main_navbar'`
-
-#### 主题切换
-- [ ] 点击主题切换按钮
-- [ ] **验证事件**: `Theme Changed`
-  - 检查属性：`from_theme`, `to_theme`
-
-#### 顶部导航
-- [ ] 点击"高频跟踪"下拉菜单
-- [ ] 点击"事件中心"
-- [ ] **验证事件**: `MENU_ITEM_CLICKED`
-  - 检查属性：`item_name: '事件中心'`, `menu_type: 'dropdown'`
-
-#### 二级导航
-- [ ] 在二级导航栏点击任一菜单
-- [ ] **验证事件**: `SIDEBAR_MENU_CLICKED`
-  - 检查属性：`item_name`, `path`, `level: 2`
-
----
-
-### 👤 个人资料模块（useProfileEvents）
-
-#### 个人资料页面
-- [ ] 访问个人资料页 `/profile`
-- [ ] 点击编辑按钮
-- [ ] **验证事件**: `Profile Field Edit Started`
-
-#### 更新资料
-- [ ] 修改昵称或其他信息
-- [ ] 点击保存
-- [ ] **验证事件**: `PROFILE_UPDATED`
-  - 检查属性：`updated_fields`, `field_count`
-
-#### 上传头像
-- [ ] 点击头像上传
-- [ ] 选择图片
-- [ ] **验证事件**: `Avatar Uploaded`
-  - 检查属性：`upload_method`, `file_size`
-
-#### 设置页面
-- [ ] 访问设置页 `/settings`
-- [ ] 点击修改密码
-- [ ] 输入当前密码和新密码
-- [ ] 提交
-- [ ] **验证事件**: `Password Changed`
-  - 检查属性：`success: true`
-
-#### 通知设置
-- [ ] 切换通知开关
-- [ ] 点击保存
-- [ ] **验证事件**: `Notification Preferences Changed`
-  - 检查属性：`email_enabled`, `push_enabled`, `sms_enabled`
-
-#### 账号绑定
-- [ ] 输入邮箱地址
-- [ ] 获取验证码
-- [ ] 输入验证码绑定
-- [ ] **验证事件**: `Account Bound`
-  - 检查属性：`account_type: 'email'`, `success: true`
-
----
-
-### 💳 订阅支付模块（useSubscriptionEvents）
-
-#### 订阅页面查看
-- [ ] 打开订阅管理页面
-- [ ] **验证事件**: `SUBSCRIPTION_PAGE_VIEWED`
-  - 检查属性：`current_plan`, `subscription_status`
-
-#### 定价方案查看
-- [ ] 浏览不同的定价方案
-- [ ] **验证事件**: `Pricing Plan Viewed`
-  - 检查属性：`plan_name`, `price`
-
-#### 选择方案
-- [ ] 选择月付/年付
-- [ ] 点击"立即订阅"
-- [ ] **验证事件**: `Pricing Plan Selected`
-  - 检查属性：`plan_name`, `billing_cycle`, `price`
-
-#### 查看支付页面
-- [ ] 进入支付页面
-- [ ] **验证事件**: `PAYMENT_PAGE_VIEWED`
-  - 检查属性：`plan_name`, `amount`
-
-#### 支付流程
-- [ ] 选择支付方式（微信支付）
-- [ ] **验证事件**: `PAYMENT_METHOD_SELECTED`
-  - 检查属性：`payment_method: 'wechat_pay'`
-- [ ] 点击创建订单
-- [ ] **验证事件**: `PAYMENT_INITIATED`
-  - 检查属性：`plan_name`, `amount`, `payment_method`
-
-#### 支付成功（需要完成支付）
-- [ ] 完成微信支付
-- [ ] **验证事件**: `PAYMENT_SUCCESSFUL`
-  - 检查属性：`order_id`, `transaction_id`
-- [ ] **验证事件**: `SUBSCRIPTION_CREATED`
-  - 检查属性：`plan`, `billing_cycle`, `start_date`
-
----
-
-## 🎯 关键漏斗验证
-
-### 注册激活漏斗
-1. [ ] `PAGE_VIEWED` (注册页)
-2. [ ] `USER_SIGNED_UP`
-3. [ ] `USER_LOGGED_IN`
-4. [ ] `PROFILE_UPDATED` (完善资料)
-
-### 内容消费漏斗
-1. [ ] `Community Page Viewed`
-2. [ ] `News List Viewed`
-3. [ ] `NEWS_ARTICLE_CLICKED`
-4. [ ] `EVENT_DETAIL_VIEWED`
-5. [ ] `Comment Added` (深度互动)
-
-### 付费转化漏斗
-1. [ ] `PAYWALL_SHOWN` (触发付费墙)
-2. [ ] `SUBSCRIPTION_PAGE_VIEWED`
-3. [ ] `Pricing Plan Selected`
-4. [ ] `PAYMENT_INITIATED`
-5. [ ] `PAYMENT_SUCCESSFUL`
-6. [ ] `SUBSCRIPTION_CREATED`
-
-### 模拟盘转化漏斗
-1. [ ] `TRADING_SIMULATION_ENTERED`
-2. [ ] `Simulation Stock Searched`
-3. [ ] `Simulation Order Placed`
-4. [ ] `Simulation Holdings Viewed`
-
----
-
-## 🐛 错误场景验证
-
-### 失败追踪验证
-- [ ] 密码修改失败
-  - **验证事件**: `Password Changed` (success: false)
-- [ ] 支付失败
-  - **验证事件**: `PAYMENT_FAILED`
-  - 检查属性：`error_reason`
-- [ ] 个人资料更新失败
-  - **验证事件**: `Profile Update Failed`
-  - 检查属性：`attempted_fields`, `error_message`
-
----
-
-## 📊 PostHog控制台验证
-
-### 实时事件检查
-- [ ] 登录PostHog控制台
-- [ ] 进入 "Live events" 页面
-- [ ] 执行上述操作
-- [ ] 确认每个操作都有对应事件出现
-- [ ] 检查事件属性完整性
-
-### 用户属性检查
-- [ ] 进入 "Persons" 页面
-- [ ] 找到测试用户
-- [ ] 验证用户属性：
-  - [ ] `user_id`
-  - [ ] `email` (如果有)
-  - [ ] `subscription_tier`
-  - [ ] `role`
-
-### 事件属性检查
-对于每个验证的事件，确认以下属性存在：
-- [ ] `timestamp` - 时间戳
-- [ ] 事件特定属性（如 event_id, stock_code 等）
-- [ ] 上下文属性（如 context, page_type 等）
-
----
-
-## 🔍 开发者工具验证
-
-### Network 面板
-- [ ] 找到 PostHog API 请求
-- [ ] 检查请求URL: `https://app.posthog.com/e/`
-- [ ] 检查请求Method: POST
-- [ ] 检查Response Status: 200
-- [ ] 检查Request Payload包含事件数据
-
-### Console 面板
-- [ ] 查找 logger.debug 输出
-- [ ] 格式如：`[useFeatureEvents] 📊 Action Tracked`
-- [ ] 验证输出的事件名称和参数正确
-
----
-
-## ✅ 验证通过标准
-
-### 单个事件验证通过
-- ✅ Network面板能看到PostHog请求
-- ✅ Console能看到logger.debug输出
-- ✅ PostHog Live events能看到事件
-- ✅ 事件名称正确
-- ✅ 事件属性完整且准确
-
-### 整体验证通过
-- ✅ 所有核心功能模块至少验证了主要流程
-- ✅ 关键漏斗的每一步都能追踪到
-- ✅ 成功和失败场景都有追踪
-- ✅ 没有JavaScript错误
-- ✅ 所有事件在PostHog控制台可见
-
----
-
-## 📝 验证记录
-
-### 验证信息
-- **验证日期**: _______________
-- **验证人员**: _______________
-- **验证环境**: [ ] 开发环境 [ ] 测试环境 [ ] 生产环境
-- **PostHog项目**: _______________
-
-### 验证结果
-- **总验证项**: _____
-- **通过项**: _____
-- **失败项**: _____
-- **通过率**: _____%
-
-### 发现的问题
-| 问题描述 | 严重程度 | 状态 | 备注 |
-|---------|---------|------|------|
-| | | | |
-| | | | |
-
-### 验证结论
-- [ ] ✅ 全部通过，可以上线
-- [ ] ⚠️ 有轻微问题，可以上线但需修复
-- [ ] ❌ 有严重问题，需要修复后重新验证
-
----
-
-## 🔧 常见问题排查
-
-### 问题1: 看不到PostHog请求
-**可能原因**:
-- PostHog未正确初始化
-- API Key配置错误
-- 网络被拦截
-
-**排查步骤**:
-1. 检查 `.env` 文件中的 `REACT_APP_POSTHOG_KEY`
-2. 检查浏览器Console是否有错误
-3. 检查网络代理设置
-
-### 问题2: 事件属性缺失
-**可能原因**:
-- 传参时属性名拼写错误
-- 某些数据为undefined
-- Hook未正确初始化
-
-**排查步骤**:
-1. 查看Console的logger.debug输出
-2. 检查Hook初始化时传入的参数
-3. 检查调用追踪方法时的参数
-
-### 问题3: 事件未在PostHog显示
-**可能原因**:
-- 数据同步延迟（通常<1分钟）
-- PostHog项目选择错误
-- 事件被过滤
-
-**排查步骤**:
-1. 等待1-2分钟后刷新
-2. 确认选择了正确的项目
-3. 检查PostHog的事件过滤器设置
-
----
-
-## 📚 相关资源
-
-- [PostHog 官方文档](https://posthog.com/docs)
-- [POSTHOG_TRACKING_GUIDE.md](./POSTHOG_TRACKING_GUIDE.md) - 开发者指南
-- [POSTHOG_INTEGRATION.md](./POSTHOG_INTEGRATION.md) - 集成说明
-- [constants.js](./src/lib/constants.js) - 事件常量定义
-
----
-
-**文档版本**: v1.0
-**最后更新**: 2025-10-29
-**维护者**: 开发团队

jsconfig.json

@@ -2,26 +2,7 @@
   "compilerOptions": {
     "baseUrl": "src",
     "paths": {
-      "@/*": ["./*"],
+      "*": ["src/*"]
-      "@assets/*": ["assets/*"],
+    }
-      "@components/*": ["components/*"],
-      "@constants/*": ["constants/*"],
-      "@contexts/*": ["contexts/*"],
-      "@data/*": ["data/*"],
-      "@hooks/*": ["hooks/*"],
-      "@layouts/*": ["layouts/*"],
-      "@lib/*": ["lib/*"],
-      "@mocks/*": ["mocks/*"],
-      "@providers/*": ["providers/*"],
-      "@routes/*": ["routes/*"],
-      "@services/*": ["services/*"],
-      "@store/*": ["store/*"],
-      "@styles/*": ["styles/*"],
-      "@theme/*": ["theme/*"],
-      "@utils/*": ["utils/*"],
-      "@variables/*": ["variables/*"],
-      "@views/*": ["views/*"]
   }
-  },
-  "exclude": ["node_modules", "build", "dist"]
 }

package.json

@@ -101,7 +101,7 @@
     "frontend:test": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.test craco start",
     "dev": "npm start",
     "backend": "python app_2.py",
-    "build": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.production craco build && gulp licenses",
+    "build": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' craco build && gulp licenses",
     "build:analyze": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' ANALYZE=true craco build",
     "test": "craco test --env=jsdom",
     "eject": "react-scripts eject",
@@ -132,6 +132,7 @@
     "prettier": "2.2.1",
     "react-error-overlay": "6.0.9",
     "sharp": "^0.34.4",
+    "tailwindcss": "^3.4.17",
     "ts-node": "^10.9.2",
     "webpack-bundle-analyzer": "^4.10.2",
     "yn": "^5.1.0"

src/App.js

@@ -9,32 +9,109 @@
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Visionware.
  */
 
-import React, { useEffect } from "react";
+import React, { Suspense, useEffect } from "react";
-import { useDispatch } from 'react-redux';
+import { ChakraProvider } from '@chakra-ui/react';
+import { Routes, Route, Navigate } from "react-router-dom";
 
-// Routes
+// Chakra imports
-import AppRoutes from './routes';
+import { Box, useColorMode } from '@chakra-ui/react';
 
-// Providers
+// Core Components
-import AppProviders from './providers/AppProviders';
+import theme from "theme/theme.js";
 
-// Components
+// Loading Component
-import GlobalComponents from './components/GlobalComponents';
+import PageLoader from "components/Loading/PageLoader";
 
-// Hooks
+// Layouts - 保持同步导入（需要立即加载）
-import { useGlobalErrorHandler } from './hooks/useGlobalErrorHandler';
+import Auth from "layouts/Auth";
+import HomeLayout from "layouts/Home";
+import MainLayout from "layouts/MainLayout";
+
+// ⚡ 使用 React.lazy() 实现路由懒加载
+// 首屏不需要的组件按需加载，大幅减少初始 JS 包大小
+const Community = React.lazy(() => import("views/Community"));
+const LimitAnalyse = React.lazy(() => import("views/LimitAnalyse"));
+const ForecastReport = React.lazy(() => import("views/Company/ForecastReport"));
+const ConceptCenter = React.lazy(() => import("views/Concept"));
+const FinancialPanorama = React.lazy(() => import("views/Company/FinancialPanorama"));
+const CompanyIndex = React.lazy(() => import("views/Company"));
+const MarketDataView = React.lazy(() => import("views/Company/MarketDataView"));
+const StockOverview = React.lazy(() => import("views/StockOverview"));
+const EventDetail = React.lazy(() => import("views/EventDetail"));
+const TradingSimulation = React.lazy(() => import("views/TradingSimulation"));
 
 // Redux
-import { initializePostHog } from './store/slices/posthogSlice';
+import { Provider as ReduxProvider } from 'react-redux';
+import { store } from './store';
 
-// Utils
+// Contexts
-import { logger } from './utils/logger';
+import { AuthProvider } from "contexts/AuthContext";
+import { AuthModalProvider } from "contexts/AuthModalContext";
+import { NotificationProvider, useNotification } from "contexts/NotificationContext";
+import { IndustryProvider } from "contexts/IndustryContext";
+
+// Components
+import ProtectedRoute from "components/ProtectedRoute";
+import ProtectedRouteRedirect from "components/ProtectedRouteRedirect";
+import ErrorBoundary from "components/ErrorBoundary";
+import AuthModalManager from "components/Auth/AuthModalManager";
+import NotificationContainer from "components/NotificationContainer";
+import ConnectionStatusBar from "components/ConnectionStatusBar";
+import NotificationTestTool from "components/NotificationTestTool";
+import ScrollToTop from "components/ScrollToTop";
+import { logger } from "utils/logger";
+
+// PostHog Redux 集成
+import { useDispatch } from 'react-redux';
+import { initializePostHog } from "store/slices/posthogSlice";
 
 /**
- * AppContent - 应用核心内容
+ * ConnectionStatusBar 包装组件
- * 负责 PostHog 初始化和渲染路由
+ * 需要在 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}
+        />
+    );
+}
+
 function AppContent() {
+    const { colorMode } = useColorMode();
     const dispatch = useDispatch();
 
     // 🎯 PostHog Redux 初始化
@@ -43,21 +120,218 @@ function AppContent() {
         logger.info('App', 'PostHog Redux 初始化已触发');
     }, [dispatch]);
 
-    return <AppRoutes />;
-}
-
-/**
- * App - 应用根组件
- * 设置全局错误处理,提供 Provider 和全局组件
- */
-export default function App() {
-    // 全局错误处理
-    useGlobalErrorHandler();
-
     return (
-        <AppProviders>
+        <Box minH="100vh" bg={colorMode === 'dark' ? 'gray.800' : 'white'}>
-            <AppContent />
+            {/* Socket 连接状态条 */}
-            <GlobalComponents />
+            <ConnectionStatusBarWrapper />
-        </AppProviders>
+
+            {/* 路由切换时自动滚动到顶部 */}
+            <ScrollToTop />
+            <Routes>
+                {/* 带导航栏的主布局 - 所有需要导航栏的页面都在这里 */}
+                {/* MainLayout 内部有 Suspense，确保导航栏始终可见 */}
+                <Route element={<MainLayout />}>
+                    {/* 首页路由 */}
+                    <Route path="home/*" element={<HomeLayout />} />
+
+                    {/* Community页面路由 - 需要登录 */}
+                    <Route
+                        path="community"
+                        element={
+                            <ProtectedRoute>
+                                <Community />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* 概念中心路由 - 需要登录 */}
+                    <Route
+                        path="concepts"
+                        element={
+                            <ProtectedRoute>
+                                <ConceptCenter />
+                            </ProtectedRoute>
+                        }
+                    />
+                    <Route
+                        path="concept"
+                        element={
+                            <ProtectedRoute>
+                                <ConceptCenter />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* 股票概览页面路由 - 需要登录 */}
+                    <Route
+                        path="stocks"
+                        element={
+                            <ProtectedRoute>
+                                <StockOverview />
+                            </ProtectedRoute>
+                        }
+                    />
+                    <Route
+                        path="stock-overview"
+                        element={
+                            <ProtectedRoute>
+                                <StockOverview />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* Limit Analyse页面路由 - 需要登录 */}
+                    <Route
+                        path="limit-analyse"
+                        element={
+                            <ProtectedRoute>
+                                <LimitAnalyse />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* 模拟盘交易系统路由 - 需要登录 */}
+                    <Route
+                        path="trading-simulation"
+                        element={
+                            <ProtectedRoute>
+                                <TradingSimulation />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* 事件详情独立页面路由 - 需要登录（跳转模式） */}
+                    <Route
+                        path="event-detail/:eventId"
+                        element={
+                            <ProtectedRouteRedirect>
+                                <EventDetail />
+                            </ProtectedRouteRedirect>
+                        }
+                    />
+
+                    {/* 公司相关页面 */}
+                    {/* 财报预测 - 需要登录（跳转模式） */}
+                    <Route
+                        path="forecast-report"
+                        element={
+                            <ProtectedRouteRedirect>
+                                <ForecastReport />
+                            </ProtectedRouteRedirect>
+                        }
+                    />
+
+                    {/* 财务全景 - 需要登录（弹窗模式） */}
+                    <Route
+                        path="Financial"
+                        element={
+                            <ProtectedRoute>
+                                <FinancialPanorama />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* 公司页面 - 需要登录（弹窗模式） */}
+                    <Route
+                        path="company"
+                        element={
+                            <ProtectedRoute>
+                                <CompanyIndex />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* 公司详情 - 需要登录（跳转模式） */}
+                    <Route
+                        path="company/:code"
+                        element={
+                            <ProtectedRouteRedirect>
+                                <CompanyIndex />
+                            </ProtectedRouteRedirect>
+                        }
+                    />
+
+                    {/* 市场数据 - 需要登录（弹窗模式） */}
+                    <Route
+                        path="market-data"
+                        element={
+                            <ProtectedRoute>
+                                <MarketDataView />
+                            </ProtectedRoute>
+                        }
+                    />
+                </Route>
+
+                {/* 认证页面路由 - 不使用 MainLayout */}
+                <Route path="auth/*" element={<Auth />} />
+
+                {/* 默认重定向到首页 */}
+                <Route path="/" element={<Navigate to="/home" replace />} />
+
+                {/* 404 页面 */}
+                <Route path="*" element={<Navigate to="/home" replace />} />
+            </Routes>
+        </Box>
+    );
+}
+
+export default function App() {
+    // 全局错误处理：捕获未处理的 Promise rejection
+    useEffect(() => {
+        const handleUnhandledRejection = (event) => {
+            logger.error('App', 'unhandledRejection', event.reason instanceof Error ? event.reason : new Error(String(event.reason)), {
+                promise: event.promise
+            });
+            // 阻止默认的错误处理（防止崩溃）
+            event.preventDefault();
+        };
+
+        const handleError = (event) => {
+            logger.error('App', 'globalError', event.error || new Error(event.message), {
+                filename: event.filename,
+                lineno: event.lineno,
+                colno: event.colno
+            });
+            // 阻止默认的错误处理（防止崩溃）
+            event.preventDefault();
+        };
+
+        window.addEventListener('unhandledrejection', handleUnhandledRejection);
+        window.addEventListener('error', handleError);
+
+        return () => {
+            window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+            window.removeEventListener('error', handleError);
+        };
+    }, []);
+
+    return (
+        <ReduxProvider store={store}>
+            <ChakraProvider
+                theme={theme}
+                toastOptions={{
+                    defaultOptions: {
+                        position: 'top',
+                        duration: 3000,
+                        isClosable: true,
+                    }
+                }}
+            >
+                <ErrorBoundary>
+                    <NotificationProvider>
+                        <AuthProvider>
+                            <AuthModalProvider>
+                                <IndustryProvider>
+                                    <AppContent />
+                                    <AuthModalManager />
+                                    <NotificationContainer />
+                                    <NotificationTestTool />
+                                </IndustryProvider>
+                            </AuthModalProvider>
+                    </AuthProvider>
+                </NotificationProvider>
+            </ErrorBoundary>
+        </ChakraProvider>
+        </ReduxProvider>
     );
 }

src/components/Auth/AuthFormContent.js

@@ -29,7 +29,7 @@ import {
 } from "@chakra-ui/react";
 import { FaLock, FaWeixin } from "react-icons/fa";
 import { useAuth } from "../../contexts/AuthContext";
-import { useAuthModal } from "../../hooks/useAuthModal";
+import { useAuthModal } from "../../contexts/AuthModalContext";
 import { useNotification } from "../../contexts/NotificationContext";
 import { authService } from "../../services/authService";
 import AuthHeader from './AuthHeader';

src/components/Auth/AuthModalManager.js

@@ -8,7 +8,7 @@ import {
   ModalCloseButton,
   useBreakpointValue
 } from '@chakra-ui/react';
-import { useAuthModal } from '../../hooks/useAuthModal';
+import { useAuthModal } from '../../contexts/AuthModalContext';
 import AuthFormContent from './AuthFormContent';
 
 /**

src/components/Auth/WechatRegister.js

@@ -15,7 +15,7 @@ import { FaQrcode } from "react-icons/fa";
 import { FiAlertCircle } from "react-icons/fi";
 import { useNavigate } from "react-router-dom";
 import { authService, WECHAT_STATUS, STATUS_MESSAGES } from "../../services/authService";
-import { useAuthModal } from "../../hooks/useAuthModal";
+import { useAuthModal } from "../../contexts/AuthModalContext";
 import { useAuth } from "../../contexts/AuthContext";
 import { logger } from "../../utils/logger";
 import { useAuthEvents } from "../../hooks/useAuthEvents";
@@ -501,7 +501,7 @@ export default function WechatRegister() {
                 bg="gray.50"
                 boxShadow="sm"             // ✅ 添加轻微阴影
             >
-                {wechatStatus === WECHAT_STATUS.WAITING ? (
+                {wechatStatus !== WECHAT_STATUS.NONE ? (
                     /* 已获取二维码：显示iframe */
                     <iframe
                         src={wechatAuthUrl}
@@ -509,7 +509,6 @@ export default function WechatRegister() {
                         width="300"
                         height="350"
                         scrolling="no"  // ✅ 新增:禁止滚动         
-                        // sandbox="allow-scripts allow-same-origin allow-forms"  // ✅ 阻止iframe跳转父页面
                         style={{
                             border: 'none',
                             transform: 'scale(0.77) translateY(-35px)',  // ✅ 裁剪顶部logo
@@ -521,6 +520,7 @@ export default function WechatRegister() {
                         // 使用 onWheel 事件阻止滚动                                                                                                                │ │
                         onWheel={(e) => e.preventDefault()}  // ✅ 在父容器上阻止滚动
                         onTouchMove={(e) => e.preventDefault()}  // ✅ 移动端也阻止
+                        
                     />
                 ) : (
                     /* 未获取：显示占位符 */

src/components/GlobalComponents.js

@@ -1,92 +0,0 @@
-// src/components/GlobalComponents.js
-// 集中管理应用的全局组件
-
-import React from 'react';
-import { useNotification } from '../contexts/NotificationContext';
-import { logger } from '../utils/logger';
-
-// Global Components
-import AuthModalManager from './Auth/AuthModalManager';
-import NotificationContainer from './NotificationContainer';
-import NotificationTestTool from './NotificationTestTool';
-import ConnectionStatusBar from './ConnectionStatusBar';
-import ScrollToTop from './ScrollToTop';
-
-/**
- * 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: 通知容器
- * - NotificationTestTool: 通知测试工具 (仅开发环境)
- */
-export function GlobalComponents() {
-    return (
-        <>
-            {/* Socket 连接状态条 */}
-            <ConnectionStatusBarWrapper />
-
-            {/* 路由切换时自动滚动到顶部 */}
-            <ScrollToTop />
-
-            {/* 认证弹窗管理器 */}
-            <AuthModalManager />
-
-            {/* 通知容器 */}
-            <NotificationContainer />
-
-            {/* 通知测试工具 (仅开发环境) */}
-            <NotificationTestTool />
-        </>
-    );
-}
-
-export default GlobalComponents;

src/components/Navbars/components/BrandLogo.js

@@ -1,51 +0,0 @@
-// src/components/Navbars/components/BrandLogo.js
-import React, { memo } from 'react';
-import { HStack, Text, useColorModeValue, useBreakpointValue } from '@chakra-ui/react';
-import { useNavigate } from 'react-router-dom';
-import { useNavigationEvents } from '../../../hooks/useNavigationEvents';
-
-/**
- * 品牌 Logo 组件
- *
- * 性能优化：
- * - 使用 memo 避免父组件重新渲染时的不必要更新
- * - 没有外部 props，完全自包含
- *
- * @returns {JSX.Element}
- */
-const BrandLogo = memo(() => {
-    const navigate = useNavigate();
-    const isMobile = useBreakpointValue({ base: true, md: false });
-    const brandText = useColorModeValue('gray.800', 'white');
-    const brandHover = useColorModeValue('blue.600', 'blue.300');
-
-    // 🎯 初始化导航埋点Hook
-    const navEvents = useNavigationEvents({ component: 'brand_logo' });
-
-    const handleClick = () => {
-        // 🎯 追踪Logo点击
-        navEvents.trackLogoClicked();
-        navigate('/home');
-    };
-
-    return (
-        <HStack spacing={{ base: 3, md: 6 }}>
-            <Text
-                fontSize={{ base: 'lg', md: 'xl' }}
-                fontWeight="bold"
-                color={brandText}
-                cursor="pointer"
-                _hover={{ color: brandHover }}
-                onClick={handleClick}
-                style={{ minWidth: isMobile ? '100px' : '140px' }}
-                noOfLines={1}
-            >
-                价小前投研
-            </Text>
-        </HStack>
-    );
-});
-
-BrandLogo.displayName = 'BrandLogo';
-
-export default BrandLogo;

src/components/Navbars/components/CalendarButton.js

@@ -1,65 +0,0 @@
-// src/components/Navbars/components/CalendarButton.js
-import React, { memo, useState } from 'react';
-import {
-    Button,
-    Modal,
-    ModalOverlay,
-    ModalContent,
-    ModalHeader,
-    ModalBody,
-    ModalCloseButton
-} from '@chakra-ui/react';
-import { FiCalendar } from 'react-icons/fi';
-import InvestmentCalendar from '../../../views/Community/components/InvestmentCalendar';
-
-/**
- * 投资日历按钮组件
- *
- * 功能：
- * - 显示投资日历按钮
- * - 点击打开 Modal 显示日历内容
- *
- * 性能优化：
- * - 使用 memo 避免父组件重新渲染时的不必要更新
- * - Modal 状态内部管理，不影响父组件
- *
- * @returns {JSX.Element}
- */
-const CalendarButton = memo(() => {
-    const [isModalOpen, setIsModalOpen] = useState(false);
-
-    return (
-        <>
-            <Button
-                size="sm"
-                colorScheme="blue"
-                variant="solid"
-                borderRadius="full"
-                leftIcon={<FiCalendar />}
-                onClick={() => setIsModalOpen(true)}
-            >
-                投资日历
-            </Button>
-
-            {/* 投资日历 Modal */}
-            <Modal
-                isOpen={isModalOpen}
-                onClose={() => setIsModalOpen(false)}
-                size="6xl"
-            >
-                <ModalOverlay />
-                <ModalContent maxW="1200px">
-                    <ModalHeader>投资日历</ModalHeader>
-                    <ModalCloseButton />
-                    <ModalBody pb={6}>
-                        <InvestmentCalendar />
-                    </ModalBody>
-                </ModalContent>
-            </Modal>
-        </>
-    );
-});
-
-CalendarButton.displayName = 'CalendarButton';
-
-export default CalendarButton;

src/components/Navbars/components/FeatureMenus/FollowingEventsMenu.js

@@ -1,198 +0,0 @@
-// src/components/Navbars/components/FeatureMenus/FollowingEventsMenu.js
-// 关注事件下拉菜单组件
-
-import React, { memo } from 'react';
-import {
-    Menu,
-    MenuButton,
-    MenuList,
-    MenuItem,
-    MenuDivider,
-    Button,
-    Badge,
-    Box,
-    Text,
-    HStack,
-    VStack,
-    Spinner,
-    useColorModeValue
-} from '@chakra-ui/react';
-import { ChevronDownIcon } from '@chakra-ui/icons';
-import { FiCalendar } from 'react-icons/fi';
-import { useNavigate } from 'react-router-dom';
-import { useFollowingEvents } from '../../../../hooks/useFollowingEvents';
-
-/**
- * 关注事件下拉菜单组件
- * 显示用户关注的事件，支持分页和取消关注
- * 仅在桌面版 (lg+) 显示
- */
-const FollowingEventsMenu = memo(() => {
-    const navigate = useNavigate();
-    const {
-        followingEvents,
-        eventsLoading,
-        eventsPage,
-        setEventsPage,
-        EVENTS_PAGE_SIZE,
-        loadFollowingEvents,
-        handleUnfollowEvent
-    } = useFollowingEvents();
-
-    const titleColor = useColorModeValue('gray.600', 'gray.300');
-    const loadingTextColor = useColorModeValue('gray.500', 'gray.300');
-    const emptyTextColor = useColorModeValue('gray.500', 'gray.300');
-    const timeTextColor = useColorModeValue('gray.500', 'gray.400');
-    const pageTextColor = useColorModeValue('gray.600', 'gray.400');
-
-    return (
-        <Menu onOpen={loadFollowingEvents}>
-            <MenuButton
-                as={Button}
-                size="sm"
-                colorScheme="purple"
-                variant="solid"
-                borderRadius="full"
-                rightIcon={<ChevronDownIcon />}
-                leftIcon={<FiCalendar />}
-            >
-                自选事件
-                {followingEvents && followingEvents.length > 0 && (
-                    <Badge ml={2} colorScheme="whiteAlpha">{followingEvents.length}</Badge>
-                )}
-            </MenuButton>
-            <MenuList minW="460px">
-                <Box px={4} py={2}>
-                    <Text fontSize="sm" color={titleColor}>我关注的事件</Text>
-                </Box>
-                {eventsLoading ? (
-                    <Box px={4} py={3}>
-                        <HStack>
-                            <Spinner size="sm" />
-                            <Text fontSize="sm" color={loadingTextColor}>加载中...</Text>
-                        </HStack>
-                    </Box>
-                ) : (
-                    <>
-                        {(!followingEvents || followingEvents.length === 0) ? (
-                            <Box px={4} py={3}>
-                                <Text fontSize="sm" color={emptyTextColor}>暂未关注任何事件</Text>
-                            </Box>
-                        ) : (
-                            <VStack align="stretch" spacing={1} px={2} py={1}>
-                                {followingEvents
-                                    .slice((eventsPage - 1) * EVENTS_PAGE_SIZE, eventsPage * EVENTS_PAGE_SIZE)
-                                    .map((ev) => (
-                                        <MenuItem
-                                            key={ev.id}
-                                            _hover={{ bg: 'gray.50' }}
-                                            onClick={() => navigate(`/event-detail/${ev.id}`)}
-                                        >
-                                            <HStack justify="space-between" w="100%">
-                                                <Box flex={1} minW={0}>
-                                                    <Text fontSize="sm" fontWeight="medium" noOfLines={1}>
-                                                        {ev.title}
-                                                    </Text>
-                                                    <HStack spacing={2}>
-                                                        {ev.event_type && (
-                                                            <Badge colorScheme="blue" fontSize="xs">
-                                                                {ev.event_type}
-                                                            </Badge>
-                                                        )}
-                                                        {ev.start_time && (
-                                                            <Text fontSize="xs" color={timeTextColor} noOfLines={1}>
-                                                                {new Date(ev.start_time).toLocaleString('zh-CN')}
-                                                            </Text>
-                                                        )}
-                                                    </HStack>
-                                                </Box>
-                                                <HStack flexShrink={0}>
-                                                    {typeof ev.related_avg_chg === 'number' && (
-                                                        <Badge
-                                                            colorScheme={
-                                                                ev.related_avg_chg > 0 ? 'red' :
-                                                                (ev.related_avg_chg < 0 ? 'green' : 'gray')
-                                                            }
-                                                            fontSize="xs"
-                                                        >
-                                                            日均 {ev.related_avg_chg > 0 ? '+' : ''}
-                                                            {ev.related_avg_chg.toFixed(2)}%
-                                                        </Badge>
-                                                    )}
-                                                    {typeof ev.related_week_chg === 'number' && (
-                                                        <Badge
-                                                            colorScheme={
-                                                                ev.related_week_chg > 0 ? 'red' :
-                                                                (ev.related_week_chg < 0 ? 'green' : 'gray')
-                                                            }
-                                                            fontSize="xs"
-                                                        >
-                                                            周涨 {ev.related_week_chg > 0 ? '+' : ''}
-                                                            {ev.related_week_chg.toFixed(2)}%
-                                                        </Badge>
-                                                    )}
-                                                    <Box
-                                                        as="span"
-                                                        fontSize="xs"
-                                                        color="red.500"
-                                                        cursor="pointer"
-                                                        px={2}
-                                                        py={1}
-                                                        borderRadius="md"
-                                                        _hover={{ bg: 'red.50' }}
-                                                        onClick={(e) => {
-                                                            e.preventDefault();
-                                                            e.stopPropagation();
-                                                            handleUnfollowEvent(ev.id);
-                                                        }}
-                                                    >
-                                                        取消
-                                                    </Box>
-                                                </HStack>
-                                            </HStack>
-                                        </MenuItem>
-                                    ))}
-                            </VStack>
-                        )}
-                        <MenuDivider />
-                        <HStack justify="space-between" px={3} py={2}>
-                            <HStack>
-                                <Button
-                                    size="xs"
-                                    variant="outline"
-                                    onClick={() => setEventsPage((p) => Math.max(1, p - 1))}
-                                    isDisabled={eventsPage <= 1}
-                                >
-                                    上一页
-                                </Button>
-                                <Text fontSize="xs" color={pageTextColor}>
-                                    {eventsPage} / {Math.max(1, Math.ceil((followingEvents?.length || 0) / EVENTS_PAGE_SIZE))}
-                                </Text>
-                                <Button
-                                    size="xs"
-                                    variant="outline"
-                                    onClick={() => setEventsPage((p) =>
-                                        Math.min(Math.ceil((followingEvents?.length || 0) / EVENTS_PAGE_SIZE) || 1, p + 1)
-                                    )}
-                                    isDisabled={eventsPage >= Math.ceil((followingEvents?.length || 0) / EVENTS_PAGE_SIZE)}
-                                >
-                                    下一页
-                                </Button>
-                            </HStack>
-                            <HStack>
-                                <Button size="xs" variant="ghost" onClick={loadFollowingEvents}>刷新</Button>
-                                <Button size="xs" colorScheme="purple" variant="ghost" onClick={() => navigate('/home/center')}>
-                                    前往个人中心
-                                </Button>
-                            </HStack>
-                        </HStack>
-                    </>
-                )}
-            </MenuList>
-        </Menu>
-    );
-});
-
-FollowingEventsMenu.displayName = 'FollowingEventsMenu';
-
-export default FollowingEventsMenu;

src/components/Navbars/components/FeatureMenus/WatchlistMenu.js

@@ -1,180 +0,0 @@
-// src/components/Navbars/components/FeatureMenus/WatchlistMenu.js
-// 自选股下拉菜单组件
-
-import React, { memo } from 'react';
-import {
-    Menu,
-    MenuButton,
-    MenuList,
-    MenuItem,
-    MenuDivider,
-    Button,
-    Badge,
-    Box,
-    Text,
-    HStack,
-    VStack,
-    Spinner,
-    useColorModeValue
-} from '@chakra-ui/react';
-import { ChevronDownIcon } from '@chakra-ui/icons';
-import { FiStar } from 'react-icons/fi';
-import { useNavigate } from 'react-router-dom';
-import { useWatchlist } from '../../../../hooks/useWatchlist';
-
-/**
- * 自选股下拉菜单组件
- * 显示用户自选股实时行情，支持分页和移除
- * 仅在桌面版 (lg+) 显示
- */
-const WatchlistMenu = memo(() => {
-    const navigate = useNavigate();
-    const {
-        watchlistQuotes,
-        watchlistLoading,
-        watchlistPage,
-        setWatchlistPage,
-        WATCHLIST_PAGE_SIZE,
-        loadWatchlistQuotes,
-        handleRemoveFromWatchlist
-    } = useWatchlist();
-
-    const titleColor = useColorModeValue('gray.600', 'gray.300');
-    const loadingTextColor = useColorModeValue('gray.500', 'gray.300');
-    const emptyTextColor = useColorModeValue('gray.500', 'gray.300');
-    const codeTextColor = useColorModeValue('gray.500', 'gray.400');
-    const pageTextColor = useColorModeValue('gray.600', 'gray.400');
-
-    return (
-        <Menu onOpen={loadWatchlistQuotes}>
-            <MenuButton
-                as={Button}
-                size="sm"
-                colorScheme="teal"
-                variant="solid"
-                borderRadius="full"
-                rightIcon={<ChevronDownIcon />}
-                leftIcon={<FiStar />}
-            >
-                自选股
-                {watchlistQuotes && watchlistQuotes.length > 0 && (
-                    <Badge ml={2} colorScheme="whiteAlpha">{watchlistQuotes.length}</Badge>
-                )}
-            </MenuButton>
-            <MenuList minW="380px">
-                <Box px={4} py={2}>
-                    <Text fontSize="sm" color={titleColor}>我的自选股</Text>
-                </Box>
-                {watchlistLoading ? (
-                    <Box px={4} py={3}>
-                        <HStack>
-                            <Spinner size="sm" />
-                            <Text fontSize="sm" color={loadingTextColor}>加载中...</Text>
-                        </HStack>
-                    </Box>
-                ) : (
-                    <>
-                        {(!watchlistQuotes || watchlistQuotes.length === 0) ? (
-                            <Box px={4} py={3}>
-                                <Text fontSize="sm" color={emptyTextColor}>暂无自选股</Text>
-                            </Box>
-                        ) : (
-                            <VStack align="stretch" spacing={1} px={2} py={1}>
-                                {watchlistQuotes
-                                    .slice((watchlistPage - 1) * WATCHLIST_PAGE_SIZE, watchlistPage * WATCHLIST_PAGE_SIZE)
-                                    .map((item) => (
-                                        <MenuItem
-                                            key={item.stock_code}
-                                            _hover={{ bg: 'gray.50' }}
-                                            onClick={() => navigate(`/company?scode=${item.stock_code}`)}
-                                        >
-                                            <HStack justify="space-between" w="100%">
-                                                <Box>
-                                                    <Text fontSize="sm" fontWeight="medium">
-                                                        {item.stock_name || item.stock_code}
-                                                    </Text>
-                                                    <Text fontSize="xs" color={codeTextColor}>
-                                                        {item.stock_code}
-                                                    </Text>
-                                                </Box>
-                                                <HStack>
-                                                    <Badge
-                                                        colorScheme={
-                                                            (item.change_percent || 0) > 0 ? 'red' :
-                                                            ((item.change_percent || 0) < 0 ? 'green' : 'gray')
-                                                        }
-                                                        fontSize="xs"
-                                                    >
-                                                        {(item.change_percent || 0) > 0 ? '+' : ''}
-                                                        {(item.change_percent || 0).toFixed(2)}%
-                                                    </Badge>
-                                                    <Text fontSize="sm">
-                                                        {item.current_price?.toFixed ?
-                                                            item.current_price.toFixed(2) :
-                                                            (item.current_price || '-')}
-                                                    </Text>
-                                                    <Box
-                                                        as="span"
-                                                        fontSize="xs"
-                                                        color="red.500"
-                                                        cursor="pointer"
-                                                        px={2}
-                                                        py={1}
-                                                        borderRadius="md"
-                                                        _hover={{ bg: 'red.50' }}
-                                                        onClick={(e) => {
-                                                            e.preventDefault();
-                                                            e.stopPropagation();
-                                                            handleRemoveFromWatchlist(item.stock_code);
-                                                        }}
-                                                    >
-                                                        取消
-                                                    </Box>
-                                                </HStack>
-                                            </HStack>
-                                        </MenuItem>
-                                    ))}
-                            </VStack>
-                        )}
-                        <MenuDivider />
-                        <HStack justify="space-between" px={3} py={2}>
-                            <HStack>
-                                <Button
-                                    size="xs"
-                                    variant="outline"
-                                    onClick={() => setWatchlistPage((p) => Math.max(1, p - 1))}
-                                    isDisabled={watchlistPage <= 1}
-                                >
-                                    上一页
-                                </Button>
-                                <Text fontSize="xs" color={pageTextColor}>
-                                    {watchlistPage} / {Math.max(1, Math.ceil((watchlistQuotes?.length || 0) / WATCHLIST_PAGE_SIZE))}
-                                </Text>
-                                <Button
-                                    size="xs"
-                                    variant="outline"
-                                    onClick={() => setWatchlistPage((p) =>
-                                        Math.min(Math.ceil((watchlistQuotes?.length || 0) / WATCHLIST_PAGE_SIZE) || 1, p + 1)
-                                    )}
-                                    isDisabled={watchlistPage >= Math.ceil((watchlistQuotes?.length || 0) / WATCHLIST_PAGE_SIZE)}
-                                >
-                                    下一页
-                                </Button>
-                            </HStack>
-                            <HStack>
-                                <Button size="xs" variant="ghost" onClick={loadWatchlistQuotes}>刷新</Button>
-                                <Button size="xs" colorScheme="teal" variant="ghost" onClick={() => navigate('/home/center')}>
-                                    查看全部
-                                </Button>
-                            </HStack>
-                        </HStack>
-                    </>
-                )}
-            </MenuList>
-        </Menu>
-    );
-});
-
-WatchlistMenu.displayName = 'WatchlistMenu';
-
-export default WatchlistMenu;

src/components/Navbars/components/FeatureMenus/index.js

@@ -1,5 +0,0 @@
-// src/components/Navbars/components/FeatureMenus/index.js
-// 功能菜单组件统一导出
-
-export { default as WatchlistMenu } from './WatchlistMenu';
-export { default as FollowingEventsMenu } from './FollowingEventsMenu';

src/components/Navbars/components/LoginButton.js

@@ -1,37 +0,0 @@
-// src/components/Navbars/components/LoginButton.js
-import React, { memo } from 'react';
-import { Button } from '@chakra-ui/react';
-import { useAuthModal } from '../../../hooks/useAuthModal';
-
-/**
- * 登录/注册按钮组件
- *
- * 性能优化：
- * - 使用 memo 避免父组件重新渲染时的不必要更新
- * - 纯展示组件，无复杂逻辑
- *
- * @returns {JSX.Element}
- */
-const LoginButton = memo(() => {
-    const { openAuthModal } = useAuthModal();
-
-    return (
-        <Button
-            colorScheme="blue"
-            variant="solid"
-            size="sm"
-            borderRadius="full"
-            onClick={() => openAuthModal()}
-            _hover={{
-                transform: "translateY(-1px)",
-                boxShadow: "md"
-            }}
-        >
-            登录 / 注册
-        </Button>
-    );
-});
-
-LoginButton.displayName = 'LoginButton';
-
-export default LoginButton;

src/components/Navbars/components/MobileDrawer/MobileDrawer.js

@@ -1,314 +0,0 @@
-// src/components/Navbars/components/MobileDrawer/MobileDrawer.js
-// 移动端抽屉菜单组件
-
-import React, { memo } from 'react';
-import {
-    Drawer,
-    DrawerOverlay,
-    DrawerContent,
-    DrawerCloseButton,
-    DrawerHeader,
-    DrawerBody,
-    VStack,
-    HStack,
-    Box,
-    Text,
-    Button,
-    Badge,
-    Link,
-    Divider,
-    Avatar,
-    useColorMode,
-    useColorModeValue
-} from '@chakra-ui/react';
-import { SunIcon, MoonIcon } from '@chakra-ui/icons';
-import { useNavigate, useLocation } from 'react-router-dom';
-
-/**
- * 移动端抽屉菜单组件
- * 包含完整的导航菜单和用户功能
- *
- * @param {Object} props
- * @param {boolean} props.isOpen - Drawer 是否打开
- * @param {Function} props.onClose - 关闭 Drawer 的回调
- * @param {boolean} props.isAuthenticated - 用户是否已登录
- * @param {Object} props.user - 用户信息
- * @param {Function} props.handleLogout - 退出登录回调
- * @param {Function} props.openAuthModal - 打开登录弹窗回调
- */
-const MobileDrawer = memo(({
-    isOpen,
-    onClose,
-    isAuthenticated,
-    user,
-    handleLogout,
-    openAuthModal
-}) => {
-    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');
-
-    // 获取显示名称
-    const getDisplayName = () => {
-        if (!user) return '用户';
-        if (user.nickname) return user.nickname;
-        if (user.username) return user.username;
-        if (user.email) return user.email.split('@')[0];
-        if (user.phone) return user.phone;
-        return '用户';
-    };
-
-    // 导航点击处理
-    const handleNavigate = (path) => {
-        navigate(path);
-        onClose();
-    };
-
-    return (
-        <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
-            <DrawerOverlay />
-            <DrawerContent>
-                <DrawerCloseButton />
-                <DrawerHeader>
-                    <HStack>
-                        <Text>菜单</Text>
-                        {isAuthenticated && user && (
-                            <Badge colorScheme="green" ml={2}>已登录</Badge>
-                        )}
-                    </HStack>
-                </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 && (
-                            <>
-                                <Box p={3} bg={userBgColor} borderRadius="md">
-                                    <HStack>
-                                        <Avatar
-                                            size="sm"
-                                            name={getDisplayName()}
-                                            src={user.avatar_url}
-                                            bg="blue.500"
-                                        />
-                                        <Box>
-                                            <Text fontSize="sm" fontWeight="bold">{getDisplayName()}</Text>
-                                            <Text fontSize="xs" color={emailTextColor}>{user.email}</Text>
-                                        </Box>
-                                    </HStack>
-                                </Box>
-                                <Divider />
-                            </>
-                        )}
-
-                        {/* 首页链接 */}
-                        <Link
-                            onClick={() => handleNavigate('/home')}
-                            py={2}
-                            px={3}
-                            borderRadius="md"
-                            _hover={{ bg: 'gray.100' }}
-                            cursor="pointer"
-                            color="blue.500"
-                            fontWeight="bold"
-                            bg={location.pathname === '/home' ? 'blue.50' : 'transparent'}
-                            borderLeft={location.pathname === '/home' ? '3px solid' : 'none'}
-                            borderColor="blue.600"
-                        >
-                            <Text fontSize="md">🏠 首页</Text>
-                        </Link>
-
-                        <Divider />
-
-                        {/* 高频跟踪 */}
-                        <Box>
-                            <Text fontWeight="bold" mb={2}>高频跟踪</Text>
-                            <VStack spacing={2} align="stretch">
-                                <Link
-                                    onClick={() => handleNavigate('/community')}
-                                    py={1}
-                                    px={3}
-                                    borderRadius="md"
-                                    _hover={{ bg: 'gray.100' }}
-                                    cursor="pointer"
-                                    bg={location.pathname.includes('/community') ? 'blue.50' : 'transparent'}
-                                    borderLeft={location.pathname.includes('/community') ? '3px solid' : 'none'}
-                                    borderColor="blue.600"
-                                    fontWeight={location.pathname.includes('/community') ? 'bold' : 'normal'}
-                                >
-                                    <HStack justify="space-between">
-                                        <Text fontSize="sm">事件中心</Text>
-                                        <HStack spacing={1}>
-                                            <Badge size="xs" colorScheme="green">HOT</Badge>
-                                            <Badge size="xs" colorScheme="red">NEW</Badge>
-                                        </HStack>
-                                    </HStack>
-                                </Link>
-                                <Link
-                                    onClick={() => handleNavigate('/concepts')}
-                                    py={1}
-                                    px={3}
-                                    borderRadius="md"
-                                    _hover={{ bg: 'gray.100' }}
-                                    cursor="pointer"
-                                    bg={location.pathname.includes('/concepts') ? 'blue.50' : 'transparent'}
-                                    borderLeft={location.pathname.includes('/concepts') ? '3px solid' : 'none'}
-                                    borderColor="blue.600"
-                                    fontWeight={location.pathname.includes('/concepts') ? 'bold' : 'normal'}
-                                >
-                                    <HStack justify="space-between">
-                                        <Text fontSize="sm">概念中心</Text>
-                                        <Badge size="xs" colorScheme="red">NEW</Badge>
-                                    </HStack>
-                                </Link>
-                            </VStack>
-                        </Box>
-
-                        <Divider />
-
-                        {/* 行情复盘 */}
-                        <Box>
-                            <Text fontWeight="bold" mb={2}>行情复盘</Text>
-                            <VStack spacing={2} align="stretch">
-                                <Link
-                                    onClick={() => handleNavigate('/limit-analyse')}
-                                    py={1}
-                                    px={3}
-                                    borderRadius="md"
-                                    _hover={{ bg: 'gray.100' }}
-                                    cursor="pointer"
-                                    bg={location.pathname.includes('/limit-analyse') ? 'blue.50' : 'transparent'}
-                                    borderLeft={location.pathname.includes('/limit-analyse') ? '3px solid' : 'none'}
-                                    borderColor="blue.600"
-                                    fontWeight={location.pathname.includes('/limit-analyse') ? 'bold' : 'normal'}
-                                >
-                                    <HStack justify="space-between">
-                                        <Text fontSize="sm">涨停分析</Text>
-                                        <Badge size="xs" colorScheme="blue">FREE</Badge>
-                                    </HStack>
-                                </Link>
-                                <Link
-                                    onClick={() => handleNavigate('/stocks')}
-                                    py={1}
-                                    px={3}
-                                    borderRadius="md"
-                                    _hover={{ bg: 'gray.100' }}
-                                    cursor="pointer"
-                                    bg={location.pathname.includes('/stocks') ? 'blue.50' : 'transparent'}
-                                    borderLeft={location.pathname.includes('/stocks') ? '3px solid' : 'none'}
-                                    borderColor="blue.600"
-                                    fontWeight={location.pathname.includes('/stocks') ? 'bold' : 'normal'}
-                                >
-                                    <HStack justify="space-between">
-                                        <Text fontSize="sm">个股中心</Text>
-                                        <Badge size="xs" colorScheme="green">HOT</Badge>
-                                    </HStack>
-                                </Link>
-                                <Link
-                                    onClick={() => handleNavigate('/trading-simulation')}
-                                    py={1}
-                                    px={3}
-                                    borderRadius="md"
-                                    _hover={{ bg: 'gray.100' }}
-                                    cursor="pointer"
-                                    bg={location.pathname.includes('/trading-simulation') ? 'blue.50' : 'transparent'}
-                                    borderLeft={location.pathname.includes('/trading-simulation') ? '3px solid' : 'none'}
-                                    borderColor="blue.600"
-                                    fontWeight={location.pathname.includes('/trading-simulation') ? 'bold' : 'normal'}
-                                >
-                                    <HStack justify="space-between">
-                                        <Text fontSize="sm">模拟盘</Text>
-                                        <Badge size="xs" colorScheme="red">NEW</Badge>
-                                    </HStack>
-                                </Link>
-                            </VStack>
-                        </Box>
-
-                        <Divider />
-
-                        {/* AGENT社群 */}
-                        <Box>
-                            <Text fontWeight="bold" mb={2}>AGENT社群</Text>
-                            <VStack spacing={2} align="stretch">
-                                <Link
-                                    py={1}
-                                    px={3}
-                                    borderRadius="md"
-                                    _hover={{}}
-                                    cursor="not-allowed"
-                                    color="gray.400"
-                                    pointerEvents="none"
-                                >
-                                    <Text fontSize="sm" color="gray.400">今日热议</Text>
-                                </Link>
-                                <Link
-                                    py={1}
-                                    px={3}
-                                    borderRadius="md"
-                                    _hover={{}}
-                                    cursor="not-allowed"
-                                    color="gray.400"
-                                    pointerEvents="none"
-                                >
-                                    <Text fontSize="sm" color="gray.400">个股社区</Text>
-                                </Link>
-                            </VStack>
-                        </Box>
-
-                        <Divider />
-
-                        {/* 联系我们 */}
-                        <Box>
-                            <Text fontWeight="bold" mb={2}>联系我们</Text>
-                            <Text fontSize="sm" color={contactTextColor}>敬请期待</Text>
-                        </Box>
-
-                        {/* 移动端登录/登出按钮 */}
-                        <Divider />
-                        {isAuthenticated && user ? (
-                            <Button
-                                colorScheme="red"
-                                variant="outline"
-                                size="sm"
-                                onClick={() => {
-                                    handleLogout();
-                                    onClose();
-                                }}
-                            >
-                                🚪 退出登录
-                            </Button>
-                        ) : (
-                            <Button
-                                colorScheme="blue"
-                                size="sm"
-                                onClick={() => {
-                                    openAuthModal();
-                                    onClose();
-                                }}
-                            >
-                                🔐 登录 / 注册
-                            </Button>
-                        )}
-                    </VStack>
-                </DrawerBody>
-            </DrawerContent>
-        </Drawer>
-    );
-});
-
-MobileDrawer.displayName = 'MobileDrawer';
-
-export default MobileDrawer;

src/components/Navbars/components/MobileDrawer/index.js

@@ -1,4 +0,0 @@
-// src/components/Navbars/components/MobileDrawer/index.js
-// 移动端抽屉菜单组件统一导出
-
-export { default as MobileDrawer } from './MobileDrawer';

src/components/Navbars/components/NavbarActions/index.js

@@ -1,82 +0,0 @@
-// src/components/Navbars/components/NavbarActions/index.js
-// Navbar 右侧功能区组件
-
-import React, { memo } from 'react';
-import { HStack, Spinner } from '@chakra-ui/react';
-import ThemeToggleButton from '../ThemeToggleButton';
-import LoginButton from '../LoginButton';
-import CalendarButton from '../CalendarButton';
-import { WatchlistMenu, FollowingEventsMenu } from '../FeatureMenus';
-import { DesktopUserMenu, TabletUserMenu } from '../UserMenu';
-import { PersonalCenterMenu } from '../Navigation';
-
-/**
- * Navbar 右侧功能区组件
- * 根据用户登录状态和屏幕尺寸显示不同的操作按钮和菜单
- *
- * @param {Object} props
- * @param {boolean} props.isLoading - 是否正在加载
- * @param {boolean} props.isAuthenticated - 是否已登录
- * @param {Object} props.user - 用户对象
- * @param {boolean} props.isDesktop - 是否为桌面端
- * @param {Function} props.handleLogout - 登出回调
- * @param {Array} props.watchlistQuotes - 自选股数据（用于 TabletUserMenu）
- * @param {Array} props.followingEvents - 关注事件数据（用于 TabletUserMenu）
- */
-const NavbarActions = memo(({
-    isLoading,
-    isAuthenticated,
-    user,
-    isDesktop,
-    handleLogout,
-    watchlistQuotes,
-    followingEvents
-}) => {
-    return (
-        <HStack spacing={{ base: 2, md: 4 }}>
-            {/* 主题切换按钮 */}
-            <ThemeToggleButton />
-
-            {/* 显示加载状态 */}
-            {isLoading ? (
-                <Spinner size="sm" color="blue.500" />
-            ) : isAuthenticated && user ? (
-                // 已登录状态 - 用户菜单 + 功能菜单排列
-                <HStack spacing={{ base: 2, md: 3 }}>
-                    {/* 投资日历 - 仅大屏显示 */}
-                    {isDesktop && <CalendarButton />}
-
-                    {/* 自选股 - 仅大屏显示 */}
-                    {isDesktop && <WatchlistMenu />}
-
-                    {/* 关注的事件 - 仅大屏显示 */}
-                    {isDesktop && <FollowingEventsMenu />}
-
-                    {/* 头像区域 - 响应式 */}
-                    {isDesktop ? (
-                        <DesktopUserMenu user={user} />
-                    ) : (
-                        <TabletUserMenu
-                            user={user}
-                            handleLogout={handleLogout}
-                            watchlistQuotes={watchlistQuotes}
-                            followingEvents={followingEvents}
-                        />
-                    )}
-
-                    {/* 个人中心下拉菜单 - 仅大屏显示 */}
-                    {isDesktop && (
-                        <PersonalCenterMenu user={user} handleLogout={handleLogout} />
-                    )}
-                </HStack>
-            ) : (
-                // 未登录状态 - 单一按钮
-                <LoginButton />
-            )}
-        </HStack>
-    );
-});
-
-NavbarActions.displayName = 'NavbarActions';
-
-export default NavbarActions;

src/components/Navbars/components/Navigation/DesktopNav.js

@@ -1,258 +0,0 @@
-// src/components/Navbars/components/Navigation/DesktopNav.js
-// 桌面版主导航菜单 - 完整的导航栏
-
-import React, { memo, useCallback } from 'react';
-import {
-    HStack,
-    Menu,
-    MenuButton,
-    MenuList,
-    MenuItem,
-    Button,
-    Text,
-    Flex,
-    Badge,
-    useColorModeValue
-} from '@chakra-ui/react';
-import { ChevronDownIcon } from '@chakra-ui/icons';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useNavigationEvents } from '../../../../hooks/useNavigationEvents';
-import { useDelayedMenu } from '../../../../hooks/useDelayedMenu';
-
-/**
- * 桌面版主导航菜单组件
- * 大屏幕 (lg+) 显示，包含完整的下拉导航菜单
- *
- * @param {Object} props
- * @param {boolean} props.isAuthenticated - 用户是否已登录
- * @param {Object} props.user - 用户信息
- */
-const DesktopNav = memo(({ isAuthenticated, user }) => {
-    const navigate = useNavigate();
-    const location = useLocation();
-
-    // ⚠️ 必须在组件顶层调用所有Hooks（不能在JSX中调用）
-    const contactTextColor = useColorModeValue('gray.500', 'gray.300');
-
-    // 🎯 初始化导航埋点Hook
-    const navEvents = useNavigationEvents({ component: 'top_nav' });
-
-    // 🎯 为每个菜单创建延迟关闭控制（200ms 延迟）
-    const highFreqMenu = useDelayedMenu({ closeDelay: 200 });
-    const marketReviewMenu = useDelayedMenu({ closeDelay: 200 });
-    const agentCommunityMenu = useDelayedMenu({ closeDelay: 200 });
-    const contactUsMenu = useDelayedMenu({ closeDelay: 200 });
-
-    // 辅助函数：判断导航项是否激活
-    const isActive = useCallback((paths) => {
-        return paths.some(path => location.pathname.includes(path));
-    }, [location.pathname]);
-
-    if (!isAuthenticated || !user) return null;
-
-    return (
-        <HStack spacing={8}>
-            {/* 高频跟踪 */}
-            <Menu isOpen={highFreqMenu.isOpen} onClose={highFreqMenu.onClose}>
-                <MenuButton
-                    as={Button}
-                    variant="ghost"
-                    rightIcon={<ChevronDownIcon />}
-                    bg={isActive(['/community', '/concepts']) ? 'blue.50' : 'transparent'}
-                    color={isActive(['/community', '/concepts']) ? 'blue.600' : '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' }}
-                    onMouseEnter={highFreqMenu.handleMouseEnter}
-                    onMouseLeave={highFreqMenu.handleMouseLeave}
-                    onClick={highFreqMenu.handleClick}
-                >
-                    高频跟踪
-                </MenuButton>
-                <MenuList
-                    minW="260px"
-                    p={2}
-                    onMouseEnter={highFreqMenu.handleMouseEnter}
-                    onMouseLeave={highFreqMenu.handleMouseLeave}
-                >
-                    <MenuItem
-                        onClick={() => {
-                            // 🎯 追踪菜单项点击
-                            navEvents.trackMenuItemClicked('事件中心', 'dropdown', '/community');
-                            navigate('/community');
-                            highFreqMenu.onClose(); // 跳转后关闭菜单
-                        }}
-                        borderRadius="md"
-                        bg={location.pathname.includes('/community') ? 'blue.50' : 'transparent'}
-                        borderLeft={location.pathname.includes('/community') ? '3px solid' : 'none'}
-                        borderColor="blue.600"
-                        fontWeight={location.pathname.includes('/community') ? 'bold' : 'normal'}
-                    >
-                        <Flex justify="space-between" align="center" w="100%">
-                            <Text fontSize="sm">事件中心</Text>
-                            <HStack spacing={1}>
-                                <Badge size="sm" colorScheme="green">HOT</Badge>
-                                <Badge size="sm" colorScheme="red">NEW</Badge>
-                            </HStack>
-                        </Flex>
-                    </MenuItem>
-                    <MenuItem
-                        onClick={() => {
-                            // 🎯 追踪菜单项点击
-                            navEvents.trackMenuItemClicked('概念中心', 'dropdown', '/concepts');
-                            navigate('/concepts');
-                            highFreqMenu.onClose(); // 跳转后关闭菜单
-                        }}
-                        borderRadius="md"
-                        bg={location.pathname.includes('/concepts') ? 'blue.50' : 'transparent'}
-                        borderLeft={location.pathname.includes('/concepts') ? '3px solid' : 'none'}
-                        borderColor="blue.600"
-                        fontWeight={location.pathname.includes('/concepts') ? 'bold' : 'normal'}
-                    >
-                        <Flex justify="space-between" align="center" w="100%">
-                            <Text fontSize="sm">概念中心</Text>
-                            <Badge size="sm" colorScheme="red">NEW</Badge>
-                        </Flex>
-                    </MenuItem>
-                </MenuList>
-            </Menu>
-
-            {/* 行情复盘 */}
-            <Menu isOpen={marketReviewMenu.isOpen} onClose={marketReviewMenu.onClose}>
-                <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'}
-                    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' }}
-                    onMouseEnter={marketReviewMenu.handleMouseEnter}
-                    onMouseLeave={marketReviewMenu.handleMouseLeave}
-                    onClick={marketReviewMenu.handleClick}
-                >
-                    行情复盘
-                </MenuButton>
-                <MenuList
-                    minW="260px"
-                    p={2}
-                    onMouseEnter={marketReviewMenu.handleMouseEnter}
-                    onMouseLeave={marketReviewMenu.handleMouseLeave}
-                >
-                    <MenuItem
-                        onClick={() => {
-                            navigate('/limit-analyse');
-                            marketReviewMenu.onClose(); // 跳转后关闭菜单
-                        }}
-                        borderRadius="md"
-                        bg={location.pathname.includes('/limit-analyse') ? 'blue.50' : 'transparent'}
-                        borderLeft={location.pathname.includes('/limit-analyse') ? '3px solid' : 'none'}
-                        borderColor="blue.600"
-                        fontWeight={location.pathname.includes('/limit-analyse') ? 'bold' : 'normal'}
-                    >
-                        <Flex justify="space-between" align="center" w="100%">
-                            <Text fontSize="sm">涨停分析</Text>
-                            <Badge size="sm" colorScheme="blue">FREE</Badge>
-                        </Flex>
-                    </MenuItem>
-                    <MenuItem
-                        onClick={() => {
-                            navigate('/stocks');
-                            marketReviewMenu.onClose(); // 跳转后关闭菜单
-                        }}
-                        borderRadius="md"
-                        bg={location.pathname.includes('/stocks') ? 'blue.50' : 'transparent'}
-                        borderLeft={location.pathname.includes('/stocks') ? '3px solid' : 'none'}
-                        borderColor="blue.600"
-                        fontWeight={location.pathname.includes('/stocks') ? 'bold' : 'normal'}
-                    >
-                        <Flex justify="space-between" align="center" w="100%">
-                            <Text fontSize="sm">个股中心</Text>
-                            <Badge size="sm" colorScheme="green">HOT</Badge>
-                        </Flex>
-                    </MenuItem>
-                    <MenuItem
-                        onClick={() => {
-                            navigate('/trading-simulation');
-                            marketReviewMenu.onClose(); // 跳转后关闭菜单
-                        }}
-                        borderRadius="md"
-                        bg={location.pathname.includes('/trading-simulation') ? 'blue.50' : 'transparent'}
-                        borderLeft={location.pathname.includes('/trading-simulation') ? '3px solid' : 'none'}
-                        borderColor="blue.600"
-                        fontWeight={location.pathname.includes('/trading-simulation') ? 'bold' : 'normal'}
-                    >
-                        <Flex justify="space-between" align="center" w="100%">
-                            <Text fontSize="sm">模拟盘</Text>
-                            <Badge size="sm" colorScheme="red">NEW</Badge>
-                        </Flex>
-                    </MenuItem>
-                </MenuList>
-            </Menu>
-
-            {/* AGENT社群 */}
-            <Menu isOpen={agentCommunityMenu.isOpen} onClose={agentCommunityMenu.onClose}>
-                <MenuButton
-                    as={Button}
-                    variant="ghost"
-                    rightIcon={<ChevronDownIcon />}
-                    onMouseEnter={agentCommunityMenu.handleMouseEnter}
-                    onMouseLeave={agentCommunityMenu.handleMouseLeave}
-                    onClick={agentCommunityMenu.handleClick}
-                >
-                    AGENT社群
-                </MenuButton>
-                <MenuList
-                    minW="300px"
-                    p={4}
-                    onMouseEnter={agentCommunityMenu.handleMouseEnter}
-                    onMouseLeave={agentCommunityMenu.handleMouseLeave}
-                >
-                    <MenuItem
-                        isDisabled
-                        cursor="not-allowed"
-                        color="gray.400"
-                    >
-                        <Text fontSize="sm" color="gray.400">今日热议</Text>
-                    </MenuItem>
-                    <MenuItem
-                        isDisabled
-                        cursor="not-allowed"
-                        color="gray.400"
-                    >
-                        <Text fontSize="sm" color="gray.400">个股社区</Text>
-                    </MenuItem>
-                </MenuList>
-            </Menu>
-
-            {/* 联系我们 */}
-            <Menu isOpen={contactUsMenu.isOpen} onClose={contactUsMenu.onClose}>
-                <MenuButton
-                    as={Button}
-                    variant="ghost"
-                    rightIcon={<ChevronDownIcon />}
-                    onMouseEnter={contactUsMenu.handleMouseEnter}
-                    onMouseLeave={contactUsMenu.handleMouseLeave}
-                    onClick={contactUsMenu.handleClick}
-                >
-                    联系我们
-                </MenuButton>
-                <MenuList
-                    minW="260px"
-                    p={4}
-                    onMouseEnter={contactUsMenu.handleMouseEnter}
-                    onMouseLeave={contactUsMenu.handleMouseLeave}
-                >
-                    <Text fontSize="sm" color={contactTextColor}>敬请期待</Text>
-                </MenuList>
-            </Menu>
-        </HStack>
-    );
-});
-
-DesktopNav.displayName = 'DesktopNav';
-
-export default DesktopNav;

src/components/Navbars/components/Navigation/MoreMenu.js

@@ -1,162 +0,0 @@
-// src/components/Navbars/components/Navigation/MoreMenu.js
-// 平板版"更多"下拉菜单 - 包含所有导航项
-
-import React, { memo, useCallback } from 'react';
-import {
-    Menu,
-    MenuButton,
-    MenuList,
-    MenuItem,
-    MenuDivider,
-    Button,
-    Text,
-    Flex,
-    HStack,
-    Badge
-} from '@chakra-ui/react';
-import { ChevronDownIcon } from '@chakra-ui/icons';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useDelayedMenu } from '../../../../hooks/useDelayedMenu';
-
-/**
- * 平板版"更多"下拉菜单组件
- * 中屏幕 (sm-md) 显示，包含所有导航项的折叠菜单
- *
- * @param {Object} props
- * @param {boolean} props.isAuthenticated - 用户是否已登录
- * @param {Object} props.user - 用户信息
- */
-const MoreMenu = memo(({ isAuthenticated, user }) => {
-    const navigate = useNavigate();
-    const location = useLocation();
-
-    // 🎯 使用延迟关闭菜单控制
-    const moreMenu = useDelayedMenu({ closeDelay: 200 });
-
-    // 辅助函数：判断导航项是否激活
-    const isActive = useCallback((paths) => {
-        return paths.some(path => location.pathname.includes(path));
-    }, [location.pathname]);
-
-    if (!isAuthenticated || !user) return null;
-
-    return (
-        <Menu isOpen={moreMenu.isOpen} onClose={moreMenu.onClose}>
-            <MenuButton
-                as={Button}
-                variant="ghost"
-                rightIcon={<ChevronDownIcon />}
-                fontWeight="medium"
-                onMouseEnter={moreMenu.handleMouseEnter}
-                onMouseLeave={moreMenu.handleMouseLeave}
-                onClick={moreMenu.handleClick}
-            >
-                更多
-            </MenuButton>
-            <MenuList
-                minW="300px"
-                p={2}
-                onMouseEnter={moreMenu.handleMouseEnter}
-                onMouseLeave={moreMenu.handleMouseLeave}
-            >
-                {/* 高频跟踪组 */}
-                <Text fontSize="xs" fontWeight="bold" px={3} py={2} color="gray.500">高频跟踪</Text>
-                <MenuItem
-                    onClick={() => {
-                        moreMenu.onClose(); // 先关闭菜单
-                        navigate('/community');
-                    }}
-                    borderRadius="md"
-                    bg={location.pathname.includes('/community') ? 'blue.50' : 'transparent'}
-                >
-                    <Flex justify="space-between" align="center" w="100%">
-                        <Text fontSize="sm">事件中心</Text>
-                        <HStack spacing={1}>
-                            <Badge size="sm" colorScheme="green">HOT</Badge>
-                            <Badge size="sm" colorScheme="red">NEW</Badge>
-                        </HStack>
-                    </Flex>
-                </MenuItem>
-                <MenuItem
-                    onClick={() => {
-                        moreMenu.onClose(); // 先关闭菜单
-                        navigate('/concepts');
-                    }}
-                    borderRadius="md"
-                    bg={location.pathname.includes('/concepts') ? 'blue.50' : 'transparent'}
-                >
-                    <Flex justify="space-between" align="center" w="100%">
-                        <Text fontSize="sm">概念中心</Text>
-                        <Badge size="sm" colorScheme="red">NEW</Badge>
-                    </Flex>
-                </MenuItem>
-
-                <MenuDivider />
-
-                {/* 行情复盘组 */}
-                <Text fontSize="xs" fontWeight="bold" px={3} py={2} color="gray.500">行情复盘</Text>
-                <MenuItem
-                    onClick={() => {
-                        moreMenu.onClose(); // 先关闭菜单
-                        navigate('/limit-analyse');
-                    }}
-                    borderRadius="md"
-                    bg={location.pathname.includes('/limit-analyse') ? 'blue.50' : 'transparent'}
-                >
-                    <Flex justify="space-between" align="center" w="100%">
-                        <Text fontSize="sm">涨停分析</Text>
-                        <Badge size="sm" colorScheme="blue">FREE</Badge>
-                    </Flex>
-                </MenuItem>
-                <MenuItem
-                    onClick={() => {
-                        moreMenu.onClose(); // 先关闭菜单
-                        navigate('/stocks');
-                    }}
-                    borderRadius="md"
-                    bg={location.pathname.includes('/stocks') ? 'blue.50' : 'transparent'}
-                >
-                    <Flex justify="space-between" align="center" w="100%">
-                        <Text fontSize="sm">个股中心</Text>
-                        <Badge size="sm" colorScheme="green">HOT</Badge>
-                    </Flex>
-                </MenuItem>
-                <MenuItem
-                    onClick={() => {
-                        moreMenu.onClose(); // 先关闭菜单
-                        navigate('/trading-simulation');
-                    }}
-                    borderRadius="md"
-                    bg={location.pathname.includes('/trading-simulation') ? 'blue.50' : 'transparent'}
-                >
-                    <Flex justify="space-between" align="center" w="100%">
-                        <Text fontSize="sm">模拟盘</Text>
-                        <Badge size="sm" colorScheme="red">NEW</Badge>
-                    </Flex>
-                </MenuItem>
-
-                <MenuDivider />
-
-                {/* AGENT社群组 */}
-                <Text fontSize="xs" fontWeight="bold" px={3} py={2} color="gray.500">AGENT社群</Text>
-                <MenuItem isDisabled cursor="not-allowed" color="gray.400">
-                    <Text fontSize="sm" color="gray.400">今日热议</Text>
-                </MenuItem>
-                <MenuItem isDisabled cursor="not-allowed" color="gray.400">
-                    <Text fontSize="sm" color="gray.400">个股社区</Text>
-                </MenuItem>
-
-                <MenuDivider />
-
-                {/* 联系我们 */}
-                <MenuItem isDisabled cursor="not-allowed" color="gray.400">
-                    <Text fontSize="sm" color="gray.400">联系我们</Text>
-                </MenuItem>
-            </MenuList>
-        </Menu>
-    );
-});
-
-MoreMenu.displayName = 'MoreMenu';
-
-export default MoreMenu;

src/components/Navbars/components/Navigation/PersonalCenterMenu.js

@@ -1,120 +0,0 @@
-// src/components/Navbars/components/Navigation/PersonalCenterMenu.js
-// 个人中心下拉菜单 - 仅桌面版显示
-
-import React, { memo } from 'react';
-import {
-    Menu,
-    MenuButton,
-    MenuList,
-    MenuItem,
-    MenuDivider,
-    Button,
-    Box,
-    Text,
-    Badge,
-    useColorModeValue,
-    useDisclosure
-} from '@chakra-ui/react';
-import { ChevronDownIcon } from '@chakra-ui/icons';
-import { FiHome, FiUser, FiSettings, FiLogOut } from 'react-icons/fi';
-import { FaCrown } from 'react-icons/fa';
-import { useNavigate } from 'react-router-dom';
-
-/**
- * 个人中心下拉菜单组件
- * 仅在桌面版 (lg+) 显示
- *
- * @param {Object} props
- * @param {Object} props.user - 用户信息
- * @param {Function} props.handleLogout - 退出登录回调
- */
-const PersonalCenterMenu = memo(({ user, handleLogout }) => {
-    const navigate = useNavigate();
-    const hoverBg = useColorModeValue('gray.100', 'gray.700');
-
-    // 🎯 为个人中心菜单创建 useDisclosure Hook
-    const { isOpen, onOpen, onClose } = useDisclosure();
-
-    // 获取显示名称
-    const getDisplayName = () => {
-        if (user.nickname) return user.nickname;
-        if (user.username) return user.username;
-        if (user.email) return user.email.split('@')[0];
-        if (user.phone) return user.phone;
-        return '用户';
-    };
-
-    return (
-        <Menu isOpen={isOpen} onClose={onClose}>
-            <MenuButton
-                as={Button}
-                size="sm"
-                variant="ghost"
-                rightIcon={<ChevronDownIcon />}
-                _hover={{ bg: hoverBg }}
-                onMouseEnter={onOpen}
-                onMouseLeave={onClose}
-            >
-                个人中心
-            </MenuButton>
-            <MenuList onMouseEnter={onOpen}>
-                {/* 用户信息区 */}
-                <Box px={3} py={2} borderBottom="1px" borderColor="gray.200">
-                    <Text fontSize="sm" fontWeight="bold">{getDisplayName()}</Text>
-                    <Text fontSize="xs" color="gray.500">{user.email}</Text>
-                    {user.phone && (
-                        <Text fontSize="xs" color="gray.500">{user.phone}</Text>
-                    )}
-                    {user.has_wechat && (
-                        <Badge size="sm" colorScheme="green" mt={1}>微信已绑定</Badge>
-                    )}
-                </Box>
-
-                {/* 前往个人中心 */}
-                <MenuItem icon={<FiHome />} onClick={() => {
-                    onClose(); // 先关闭菜单
-                    navigate('/home/center');
-                }}>
-                    前往个人中心
-                </MenuItem>
-
-                <MenuDivider />
-
-                {/* 账户管理组 */}
-                <MenuItem icon={<FiUser />} onClick={() => {
-                    onClose(); // 先关闭菜单
-                    navigate('/home/profile');
-                }}>
-                    个人资料
-                </MenuItem>
-                <MenuItem icon={<FiSettings />} onClick={() => {
-                    onClose(); // 先关闭菜单
-                    navigate('/home/settings');
-                }}>
-                    账户设置
-                </MenuItem>
-
-                <MenuDivider />
-
-                {/* 功能入口组 */}
-                <MenuItem icon={<FaCrown />} onClick={() => {
-                    onClose(); // 先关闭菜单
-                    navigate('/home/pages/account/subscription');
-                }}>
-                    订阅管理
-                </MenuItem>
-
-                <MenuDivider />
-
-                {/* 退出 */}
-                <MenuItem icon={<FiLogOut />} onClick={handleLogout} color="red.500">
-                    退出登录
-                </MenuItem>
-            </MenuList>
-        </Menu>
-    );
-});
-
-PersonalCenterMenu.displayName = 'PersonalCenterMenu';
-
-export default PersonalCenterMenu;

src/components/Navbars/components/Navigation/index.js

@@ -1,6 +0,0 @@
-// src/components/Navbars/components/Navigation/index.js
-// 导航组件统一导出
-
-export { default as DesktopNav } from './DesktopNav';
-export { default as MoreMenu } from './MoreMenu';
-export { default as PersonalCenterMenu } from './PersonalCenterMenu';

src/components/Navbars/components/ProfileCompletenessAlert/index.js

@@ -1,96 +0,0 @@
-// src/components/Navbars/components/ProfileCompletenessAlert/index.js
-// 用户资料完整性提醒横幅组件
-
-import React, { memo } from 'react';
-import {
-    Box,
-    Container,
-    HStack,
-    VStack,
-    Text,
-    Button,
-    IconButton,
-    Icon
-} from '@chakra-ui/react';
-import { FiStar } from 'react-icons/fi';
-
-/**
- * 资料完整性提醒横幅组件
- * 显示用户资料完整度和缺失项提示
- *
- * @param {Object} props
- * @param {Object} props.profileCompleteness - 资料完整度数据
- * @param {Array} props.profileCompleteness.missingItems - 缺失的项目列表
- * @param {number} props.profileCompleteness.completenessPercentage - 完成百分比
- * @param {Function} props.onClose - 关闭横幅回调
- * @param {Function} props.onNavigateToSettings - 导航到设置页面回调
- */
-const ProfileCompletenessAlert = memo(({
-    profileCompleteness,
-    onClose,
-    onNavigateToSettings
-}) => {
-    if (!profileCompleteness) return null;
-
-    return (
-        <Box
-            bg="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
-            color="white"
-            py={{ base: 2, md: 2 }}
-            px={{ base: 2, md: 4 }}
-            position="sticky"
-            top={0}
-            zIndex={1001}
-        >
-            <Container maxW="container.xl">
-                <HStack justify="space-between" align="center" spacing={{ base: 2, md: 4 }}>
-                    <HStack spacing={{ base: 2, md: 3 }} flex={1} minW={0}>
-                        <Icon as={FiStar} display={{ base: 'none', sm: 'block' }} />
-                        <VStack spacing={0} align="start" flex={1} minW={0}>
-                            <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="bold" noOfLines={1}>
-                                完善资料，享受更好服务
-                            </Text>
-                            <Text fontSize={{ base: '2xs', md: 'xs' }} opacity={0.9} noOfLines={1}>
-                                您还需要设置：{profileCompleteness.missingItems.join('、')}
-                            </Text>
-                        </VStack>
-                        <Text
-                            fontSize="2xs"
-                            bg="whiteAlpha.300"
-                            px={2}
-                            py={1}
-                            borderRadius="full"
-                            display={{ base: 'none', md: 'block' }}
-                        >
-                            {profileCompleteness.completenessPercentage}% 完成
-                        </Text>
-                    </HStack>
-                    <HStack spacing={{ base: 1, md: 2 }}>
-                        <Button
-                            size={{ base: 'xs', md: 'sm' }}
-                            colorScheme="whiteAlpha"
-                            variant="ghost"
-                            onClick={onNavigateToSettings}
-                            minH={{ base: '32px', md: '40px' }}
-                        >
-                            立即完善
-                        </Button>
-                        <IconButton
-                            size={{ base: 'xs', md: 'sm' }}
-                            variant="ghost"
-                            colorScheme="whiteAlpha"
-                            icon={<Text fontSize={{ base: 'xl', md: '2xl' }}>×</Text>}
-                            onClick={onClose}
-                            aria-label="关闭提醒"
-                            minW={{ base: '32px', md: '40px' }}
-                        />
-                    </HStack>
-                </HStack>
-            </Container>
-        </Box>
-    );
-});
-
-ProfileCompletenessAlert.displayName = 'ProfileCompletenessAlert';
-
-export default ProfileCompletenessAlert;

src/components/Navbars/components/SecondaryNav/config.js

@@ -1,111 +0,0 @@
-// src/components/Navbars/components/SecondaryNav/config.js
-// 二级导航配置数据
-
-/**
- * 二级导航配置结构
- * - key: 匹配的路径前缀
- * - title: 导航组标题
- * - items: 导航项列表
- *   - path: 路径
- *   - label: 显示文本
- *   - badges: 徽章列表 (可选)
- *   - external: 是否外部链接 (可选)
- */
-export const secondaryNavConfig = {
-    '/community': {
-        title: '高频跟踪',
-        items: [
-            {
-                path: '/community',
-                label: '事件中心',
-                badges: [
-                    { text: 'HOT', colorScheme: 'green' },
-                    { text: 'NEW', colorScheme: 'red' }
-                ]
-            },
-            {
-                path: '/concepts',
-                label: '概念中心',
-                badges: [{ text: 'NEW', colorScheme: 'red' }]
-            }
-        ]
-    },
-    '/concepts': {
-        title: '高频跟踪',
-        items: [
-            {
-                path: '/community',
-                label: '事件中心',
-                badges: [
-                    { text: 'HOT', colorScheme: 'green' },
-                    { text: 'NEW', colorScheme: 'red' }
-                ]
-            },
-            {
-                path: '/concepts',
-                label: '概念中心',
-                badges: [{ text: 'NEW', colorScheme: 'red' }]
-            }
-        ]
-    },
-    '/limit-analyse': {
-        title: '行情复盘',
-        items: [
-            {
-                path: '/limit-analyse',
-                label: '涨停分析',
-                badges: [{ text: 'FREE', colorScheme: 'blue' }]
-            },
-            {
-                path: '/stocks',
-                label: '个股中心',
-                badges: [{ text: 'HOT', colorScheme: 'green' }]
-            },
-            {
-                path: '/trading-simulation',
-                label: '模拟盘',
-                badges: [{ text: 'NEW', colorScheme: 'red' }]
-            }
-        ]
-    },
-    '/stocks': {
-        title: '行情复盘',
-        items: [
-            {
-                path: '/limit-analyse',
-                label: '涨停分析',
-                badges: [{ text: 'FREE', colorScheme: 'blue' }]
-            },
-            {
-                path: '/stocks',
-                label: '个股中心',
-                badges: [{ text: 'HOT', colorScheme: 'green' }]
-            },
-            {
-                path: '/trading-simulation',
-                label: '模拟盘',
-                badges: [{ text: 'NEW', colorScheme: 'red' }]
-            }
-        ]
-    },
-    '/trading-simulation': {
-        title: '行情复盘',
-        items: [
-            {
-                path: '/limit-analyse',
-                label: '涨停分析',
-                badges: [{ text: 'FREE', colorScheme: 'blue' }]
-            },
-            {
-                path: '/stocks',
-                label: '个股中心',
-                badges: [{ text: 'HOT', colorScheme: 'green' }]
-            },
-            {
-                path: '/trading-simulation',
-                label: '模拟盘',
-                badges: [{ text: 'NEW', colorScheme: 'red' }]
-            }
-        ]
-    }
-};

src/components/Navbars/components/SecondaryNav/index.js

@@ -1,138 +0,0 @@
-// src/components/Navbars/components/SecondaryNav/index.js
-// 二级导航栏组件 - 显示当前一级菜单下的所有二级菜单项
-
-import React, { memo } from 'react';
-import {
-    Box,
-    Container,
-    HStack,
-    Text,
-    Button,
-    Flex,
-    Badge,
-    useColorModeValue
-} from '@chakra-ui/react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useNavigationEvents } from '../../../../hooks/useNavigationEvents';
-import { secondaryNavConfig } from './config';
-
-/**
- * 二级导航栏组件
- * 根据当前路径显示对应的二级菜单项
- *
- * @param {Object} props
- * @param {boolean} props.showCompletenessAlert - 是否显示完整性提醒（影响 sticky top 位置）
- */
-const SecondaryNav = memo(({ showCompletenessAlert }) => {
-    const navigate = useNavigate();
-    const location = useLocation();
-
-    // 颜色模式
-    const navbarBg = useColorModeValue('gray.50', 'gray.700');
-    const itemHoverBg = useColorModeValue('white', 'gray.600');
-    const borderColorValue = useColorModeValue('gray.200', 'gray.600');
-
-    // 导航埋点
-    const navEvents = useNavigationEvents({ component: 'secondary_nav' });
-
-    // 找到当前路径对应的二级导航配置
-    const currentConfig = Object.keys(secondaryNavConfig).find(key =>
-        location.pathname.includes(key)
-    );
-
-    // 如果没有匹配的二级导航，不显示
-    if (!currentConfig) return null;
-
-    const config = secondaryNavConfig[currentConfig];
-
-    return (
-        <Box
-            bg={navbarBg}
-            borderBottom="1px"
-            borderColor={borderColorValue}
-            py={2}
-            position="sticky"
-            top={showCompletenessAlert ? "120px" : "60px"}
-            zIndex={100}
-        >
-            <Container maxW="container.xl" px={4}>
-                <HStack spacing={1}>
-                    {/* 显示一级菜单标题 */}
-                    <Text fontSize="sm" color="gray.500" mr={2}>
-                        {config.title}:
-                    </Text>
-
-                    {/* 二级菜单项 */}
-                    {config.items.map((item, index) => {
-                        const isActive = location.pathname.includes(item.path);
-
-                        return item.external ? (
-                            <Button
-                                key={index}
-                                as="a"
-                                href={item.path}
-                                size="sm"
-                                variant="ghost"
-                                bg="transparent"
-                                color="inherit"
-                                fontWeight="normal"
-                                _hover={{ bg: itemHoverBg }}
-                                borderRadius="md"
-                                px={3}
-                            >
-                                <Flex align="center" gap={2}>
-                                    <Text>{item.label}</Text>
-                                    {item.badges && item.badges.length > 0 && (
-                                        <HStack spacing={1}>
-                                            {item.badges.map((badge, bIndex) => (
-                                                <Badge key={bIndex} size="xs" colorScheme={badge.colorScheme}>
-                                                    {badge.text}
-                                                </Badge>
-                                            ))}
-                                        </HStack>
-                                    )}
-                                </Flex>
-                            </Button>
-                        ) : (
-                            <Button
-                                key={index}
-                                onClick={() => {
-                                    // 追踪侧边栏菜单点击
-                                    navEvents.trackSidebarMenuClicked(item.label, item.path, 2, false);
-                                    navigate(item.path);
-                                }}
-                                size="sm"
-                                variant="ghost"
-                                bg={isActive ? 'blue.50' : 'transparent'}
-                                color={isActive ? 'blue.600' : 'inherit'}
-                                fontWeight={isActive ? 'bold' : 'normal'}
-                                borderBottom={isActive ? '2px solid' : 'none'}
-                                borderColor="blue.600"
-                                borderRadius={isActive ? '0' : 'md'}
-                                _hover={{ bg: isActive ? 'blue.100' : itemHoverBg }}
-                                px={3}
-                            >
-                                <Flex align="center" gap={2}>
-                                    <Text>{item.label}</Text>
-                                    {item.badges && item.badges.length > 0 && (
-                                        <HStack spacing={1}>
-                                            {item.badges.map((badge, bIndex) => (
-                                                <Badge key={bIndex} size="xs" colorScheme={badge.colorScheme}>
-                                                    {badge.text}
-                                                </Badge>
-                                            ))}
-                                        </HStack>
-                                    )}
-                                </Flex>
-                            </Button>
-                        );
-                    })}
-                </HStack>
-            </Container>
-        </Box>
-    );
-});
-
-SecondaryNav.displayName = 'SecondaryNav';
-
-export default SecondaryNav;

src/components/Navbars/components/ThemeToggleButton.js

@@ -1,51 +0,0 @@
-// src/components/Navbars/components/ThemeToggleButton.js
-// 主题切换按钮组件 - Phase 7 优化：添加导航埋点支持
-
-import React, { memo } from 'react';
-import { IconButton, useColorMode } from '@chakra-ui/react';
-import { SunIcon, MoonIcon } from '@chakra-ui/icons';
-import { useNavigationEvents } from '../../../hooks/useNavigationEvents';
-
-/**
- * 主题切换按钮组件
- * 支持在亮色和暗色主题之间切换，包含导航埋点
- *
- * 性能优化：
- * - 使用 memo 避免父组件重新渲染时的不必要更新
- * - 只依赖 colorMode，当主题切换时才重新渲染
- *
- * @param {Object} props
- * @param {string} props.size - 按钮大小，默认 'sm'
- * @param {string} props.variant - 按钮样式，默认 'ghost'
- * @returns {JSX.Element}
- */
-const ThemeToggleButton = memo(({ size = 'sm', variant = 'ghost' }) => {
-    const { colorMode, toggleColorMode } = useColorMode();
-    const navEvents = useNavigationEvents({ component: 'theme_toggle' });
-
-    const handleToggle = () => {
-        // 追踪主题切换
-        const fromTheme = colorMode;
-        const toTheme = colorMode === 'light' ? 'dark' : 'light';
-        navEvents.trackThemeChanged(fromTheme, toTheme);
-
-        // 切换主题
-        toggleColorMode();
-    };
-
-    return (
-        <IconButton
-            aria-label="切换主题"
-            icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
-            onClick={handleToggle}
-            variant={variant}
-            size={size}
-            minW={{ base: '36px', md: '40px' }}
-            minH={{ base: '36px', md: '40px' }}
-        />
-    );
-});
-
-ThemeToggleButton.displayName = 'ThemeToggleButton';
-
-export default ThemeToggleButton;

src/components/Navbars/components/UserMenu/DesktopUserMenu.js

@@ -1,64 +0,0 @@
-// src/components/Navbars/components/UserMenu/DesktopUserMenu.js
-// 桌面版用户菜单 - 头像 + Tooltip + 订阅弹窗
-
-import React, { memo } from 'react';
-import { Tooltip, useColorModeValue } from '@chakra-ui/react';
-import UserAvatar from './UserAvatar';
-import SubscriptionModal from '../../../Subscription/SubscriptionModal';
-import { TooltipContent } from '../../../Subscription/CrownTooltip';
-import { useSubscription } from '../../../../hooks/useSubscription';
-
-/**
- * 桌面版用户菜单组件
- * 大屏幕 (md+) 显示，头像点击打开订阅弹窗
- *
- * @param {Object} props
- * @param {Object} props.user - 用户信息
- */
-const DesktopUserMenu = memo(({ user }) => {
-    const {
-        subscriptionInfo,
-        isSubscriptionModalOpen,
-        openSubscriptionModal,
-        closeSubscriptionModal
-    } = useSubscription();
-
-    const tooltipBg = useColorModeValue('white', 'gray.800');
-    const tooltipBorderColor = useColorModeValue('gray.200', 'gray.600');
-
-    return (
-        <>
-            <Tooltip
-                label={<TooltipContent subscriptionInfo={subscriptionInfo} />}
-                placement="bottom"
-                hasArrow
-                bg={tooltipBg}
-                borderRadius="lg"
-                border="1px solid"
-                borderColor={tooltipBorderColor}
-                boxShadow="lg"
-                p={3}
-            >
-                <span>
-                    <UserAvatar
-                        user={user}
-                        subscriptionInfo={subscriptionInfo}
-                        onClick={openSubscriptionModal}
-                    />
-                </span>
-            </Tooltip>
-
-            {isSubscriptionModalOpen && (
-                <SubscriptionModal
-                    isOpen={isSubscriptionModalOpen}
-                    onClose={closeSubscriptionModal}
-                    subscriptionInfo={subscriptionInfo}
-                />
-            )}
-        </>
-    );
-});
-
-DesktopUserMenu.displayName = 'DesktopUserMenu';
-
-export default DesktopUserMenu;

src/components/Navbars/components/UserMenu/TabletUserMenu.js

@@ -1,166 +0,0 @@
-// src/components/Navbars/components/UserMenu/TabletUserMenu.js
-// 平板版用户菜单 - 头像作为下拉菜单，包含所有功能
-
-import React, { memo } from 'react';
-import {
-    Menu,
-    MenuButton,
-    MenuList,
-    MenuItem,
-    MenuDivider,
-    Box,
-    Text,
-    Badge,
-    Flex,
-    useColorModeValue
-} from '@chakra-ui/react';
-import { FiStar, FiCalendar, FiUser, FiSettings, FiHome, FiLogOut } from 'react-icons/fi';
-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';
-
-/**
- * 平板版用户菜单组件
- * 中屏幕 (sm-md) 显示，头像作为下拉菜单，包含所有功能
- *
- * @param {Object} props
- * @param {Object} props.user - 用户信息
- * @param {Function} props.handleLogout - 退出登录回调
- * @param {Array} props.watchlistQuotes - 自选股列表
- * @param {Array} props.followingEvents - 自选事件列表
- */
-const TabletUserMenu = memo(({
-    user,
-    handleLogout,
-    watchlistQuotes,
-    followingEvents
-}) => {
-    const navigate = useNavigate();
-    const {
-        subscriptionInfo,
-        isSubscriptionModalOpen,
-        openSubscriptionModal,
-        closeSubscriptionModal
-    } = useSubscription();
-
-    const borderColor = useColorModeValue('gray.200', 'gray.600');
-
-    // 获取显示名称
-    const getDisplayName = () => {
-        if (user.nickname) return user.nickname;
-        if (user.username) return user.username;
-        if (user.email) return user.email.split('@')[0];
-        if (user.phone) return user.phone;
-        return '用户';
-    };
-
-    // 获取订阅标签
-    const getSubscriptionBadge = () => {
-        if (subscriptionInfo.type === 'max') return 'MAX';
-        if (subscriptionInfo.type === 'pro') return 'PRO';
-        return '免费版';
-    };
-
-    // 获取订阅标签颜色
-    const getSubscriptionBadgeColor = () => {
-        return subscriptionInfo.type === 'free' ? 'gray' : 'purple';
-    };
-
-    return (
-        <>
-            <Menu>
-                <MenuButton>
-                    <UserAvatar
-                        user={user}
-                        subscriptionInfo={subscriptionInfo}
-                    />
-                </MenuButton>
-                <MenuList minW="320px">
-                    {/* 用户信息区 */}
-                    <Box px={3} py={2} borderBottom="1px" borderColor={borderColor}>
-                        <Text fontSize="sm" fontWeight="bold">{getDisplayName()}</Text>
-                        <Text fontSize="xs" color="gray.500">{user.email}</Text>
-                        {user.phone && (
-                            <Text fontSize="xs" color="gray.500">{user.phone}</Text>
-                        )}
-                        {user.has_wechat && (
-                            <Badge size="sm" colorScheme="green" mt={1}>微信已绑定</Badge>
-                        )}
-                    </Box>
-
-                    {/* 订阅管理 */}
-                    <MenuItem icon={<FaCrown />} onClick={openSubscriptionModal}>
-                        <Flex justify="space-between" align="center" w="100%">
-                            <Text>订阅管理</Text>
-                            <Badge colorScheme={getSubscriptionBadgeColor()}>
-                                {getSubscriptionBadge()}
-                            </Badge>
-                        </Flex>
-                    </MenuItem>
-
-                    <MenuDivider />
-
-                    {/* 投资日历 */}
-                    <MenuItem icon={<FiCalendar />} onClick={() => navigate('/community')}>
-                        <Text>投资日历</Text>
-                    </MenuItem>
-
-                    {/* 自选股 */}
-                    <MenuItem icon={<FiStar />} onClick={() => navigate('/home/center')}>
-                        <Flex justify="space-between" align="center" w="100%">
-                            <Text>我的自选股</Text>
-                            {watchlistQuotes && watchlistQuotes.length > 0 && (
-                                <Badge>{watchlistQuotes.length}</Badge>
-                            )}
-                        </Flex>
-                    </MenuItem>
-
-                    {/* 自选事件 */}
-                    <MenuItem icon={<FiCalendar />} onClick={() => navigate('/home/center')}>
-                        <Flex justify="space-between" align="center" w="100%">
-                            <Text>我的自选事件</Text>
-                            {followingEvents && followingEvents.length > 0 && (
-                                <Badge>{followingEvents.length}</Badge>
-                            )}
-                        </Flex>
-                    </MenuItem>
-
-                    <MenuDivider />
-
-                    {/* 个人中心 */}
-                    <MenuItem icon={<FiHome />} onClick={() => navigate('/home/center')}>
-                        个人中心
-                    </MenuItem>
-                    <MenuItem icon={<FiUser />} onClick={() => navigate('/home/profile')}>
-                        个人资料
-                    </MenuItem>
-                    <MenuItem icon={<FiSettings />} onClick={() => navigate('/home/settings')}>
-                        账户设置
-                    </MenuItem>
-
-                    <MenuDivider />
-
-                    {/* 退出登录 */}
-                    <MenuItem icon={<FiLogOut />} onClick={handleLogout} color="red.500">
-                        退出登录
-                    </MenuItem>
-                </MenuList>
-            </Menu>
-
-            {/* 订阅弹窗 */}
-            {isSubscriptionModalOpen && (
-                <SubscriptionModal
-                    isOpen={isSubscriptionModalOpen}
-                    onClose={closeSubscriptionModal}
-                    subscriptionInfo={subscriptionInfo}
-                />
-            )}
-        </>
-    );
-});
-
-TabletUserMenu.displayName = 'TabletUserMenu';
-
-export default TabletUserMenu;

src/components/Navbars/components/UserMenu/UserAvatar.js

@@ -1,75 +0,0 @@
-// src/components/Navbars/components/UserMenu/UserAvatar.js
-// 用户头像组件 - 带皇冠图标和订阅边框
-
-import React, { memo, forwardRef } from 'react';
-import { Box, Avatar } from '@chakra-ui/react';
-import { CrownIcon } from '../../../Subscription/CrownTooltip';
-
-/**
- * 用户头像组件
- * 包含皇冠图标和订阅边框样式
- *
- * @param {Object} props
- * @param {Object} props.user - 用户信息
- * @param {Object} props.subscriptionInfo - 订阅信息
- * @param {string} props.size - 头像大小 (默认 'sm')
- * @param {Function} props.onClick - 点击回调
- * @param {Object} props.hoverStyle - 悬停样式
- * @param {React.Ref} ref - 用于 Tooltip 和 MenuButton 的 ref
- */
-const UserAvatar = forwardRef(({
-    user,
-    subscriptionInfo,
-    size = 'sm',
-    onClick,
-    hoverStyle = {}
-}, ref) => {
-    // 获取显示名称
-    const getDisplayName = () => {
-        if (user.nickname) return user.nickname;
-        if (user.username) return user.username;
-        if (user.email) return user.email.split('@')[0];
-        if (user.phone) return user.phone;
-        return '用户';
-    };
-
-    // 边框颜色
-    const getBorderColor = () => {
-        if (subscriptionInfo.type === 'max') return '#667eea';
-        if (subscriptionInfo.type === 'pro') return '#667eea';
-        return 'transparent';
-    };
-
-    // 默认悬停样式 - 头像始终可交互（在 Tooltip 或 MenuButton 中）
-    const defaultHoverStyle = {
-        transform: 'scale(1.05)',
-        boxShadow: subscriptionInfo.type !== 'free'
-            ? '0 4px 12px rgba(102, 126, 234, 0.4)'
-            : 'md',
-    };
-
-    return (
-        <Box
-            ref={ref}
-            position="relative"
-            cursor="pointer"
-            onClick={onClick}
-        >
-            <CrownIcon subscriptionInfo={subscriptionInfo} />
-            <Avatar
-                size={size}
-                name={getDisplayName()}
-                src={user.avatar_url}
-                bg="blue.500"
-                border={subscriptionInfo.type !== 'free' ? '2.5px solid' : 'none'}
-                borderColor={getBorderColor()}
-                _hover={{ ...defaultHoverStyle, ...hoverStyle }}
-                transition="all 0.2s"
-            />
-        </Box>
-    );
-});
-
-UserAvatar.displayName = 'UserAvatar';
-
-export default UserAvatar;

src/components/Navbars/components/UserMenu/index.js

@@ -1,6 +0,0 @@
-// src/components/Navbars/components/UserMenu/index.js
-// 用户菜单组件统一导出
-
-export { default as UserAvatar } from './UserAvatar';
-export { default as DesktopUserMenu } from './DesktopUserMenu';
-export { default as TabletUserMenu } from './TabletUserMenu';

src/components/NotificationContainer/index.js

@@ -346,11 +346,6 @@ const NotificationItem = React.memo(({ notification, onClose, isNewest = false }
         `${typeConfig.colorScheme}.200`,
         `${typeConfig.colorScheme}.700`
     );
-    // 最新通知的 borderTopColor（避免在条件语句中调用 Hook）
-    const newestBorderTopColor = useColorModeValue(
-        `${typeConfig.colorScheme}.100`,
-        `${typeConfig.colorScheme}.700`
-    );
 
     // 使用 useMemo 缓存颜色对象（避免不必要的重新创建）
     const colors = useMemo(() => ({
@@ -362,8 +357,7 @@ const NotificationItem = React.memo(({ notification, onClose, isNewest = false }
         metaText: metaTextColor,
         hoverBg: hoverBgColor,
         closeButtonHoverBg: closeButtonHoverBgColor,
-        newestBorderTop: newestBorderTopColor,
+    }), [priorityBgColor, borderColor, iconColor, textColor, subTextColor, metaTextColor, hoverBgColor, closeButtonHoverBgColor]);
-    }), [priorityBgColor, borderColor, iconColor, textColor, subTextColor, metaTextColor, hoverBgColor, closeButtonHoverBgColor, newestBorderTopColor]);
 
     // 点击处理（只有真正可点击时才执行）- 使用 useCallback 优化
     const handleClick = useCallback(() => {
@@ -436,7 +430,7 @@ const NotificationItem = React.memo(({ notification, onClose, isNewest = false }
                 borderRight: '1px solid',
                 borderRightColor: colors.border,
                 borderTop: '1px solid',
-                borderTopColor: colors.newestBorderTop,
+                borderTopColor: useColorModeValue(`${typeConfig.colorScheme}.100`, `${typeConfig.colorScheme}.700`),
             })}
         >
                 {/* 头部区域：标题 + 可选标识 */}

src/components/NotificationTestTool/index.js

@@ -30,11 +30,6 @@ import { SOCKET_TYPE } from '../../services/socket';
 import { NOTIFICATION_TYPES, PRIORITY_LEVELS } from '../../constants/notificationTypes';
 
 const NotificationTestTool = () => {
-    // 只在开发环境显示 - 必须在所有 Hooks 调用之前检查
-    if (process.env.NODE_ENV !== 'development') {
-        return null;
-    }
-
     const { isOpen, onToggle } = useDisclosure();
     const { addNotification, soundEnabled, toggleSound, isConnected, clearAllNotifications, notifications, browserPermission, requestBrowserPermission } = useNotification();
     const [testCount, setTestCount] = useState(0);
@@ -127,6 +122,11 @@ const NotificationTestTool = () => {
         await requestBrowserPermission();
     };
 
+    // 只在开发环境显示
+    if (process.env.NODE_ENV !== 'development') {
+        return null;
+    }
+
     // 公告通知测试数据
     const testAnnouncement = () => {
         addNotification({

src/components/ProtectedRoute.js

@@ -2,7 +2,7 @@
 import React, { useEffect, useRef } from 'react';
 import { Box, VStack, Spinner, Text } from '@chakra-ui/react';
 import { useAuth } from '../contexts/AuthContext';
-import { useAuthModal } from '../hooks/useAuthModal';
+import { useAuthModal } from '../contexts/AuthModalContext';
 
 const ProtectedRoute = ({ children }) => {
   const { isAuthenticated, isLoading, user } = useAuth();

src/components/StockChangeIndicators.js

@@ -1,168 +0,0 @@
-// src/components/StockChangeIndicators.js
-// 股票涨跌幅指标组件（通用）
-
-import React from 'react';
-import { Flex, Box, Text, useColorModeValue } from '@chakra-ui/react';
-
-/**
- * 股票涨跌幅指标组件（3分天下布局）
- * @param {Object} props
- * @param {number} props.avgChange - 平均涨跌幅
- * @param {number} props.maxChange - 最大涨跌幅
- * @param {number} props.weekChange - 周涨跌幅
- */
-const StockChangeIndicators = ({
-    avgChange,
-    maxChange,
-    weekChange,
-}) => {
-    // 根据涨跌幅获取数字颜色（多颜色梯度：5级分级）
-    const getNumberColor = (value) => {
-        if (value == null) {
-            return useColorModeValue('gray.700', 'gray.400');
-        }
-
-        // 0值使用中性灰色
-        if (value === 0) {
-            return 'gray.700';
-        }
-
-        const absValue = Math.abs(value);
-        const isPositive = value > 0;
-
-        if (isPositive) {
-            // 上涨：红色系 → 橙色系
-            if (absValue >= 10) return 'red.900';      // 10%以上：最深红
-            if (absValue >= 5) return 'red.700';       // 5-10%：深红
-            if (absValue >= 3) return 'red.500';       // 3-5%：中红
-            if (absValue >= 1) return 'orange.600';    // 1-3%：橙色
-            return 'orange.400';                       // 0-1%：浅橙
-        } else {
-            // 下跌：绿色系 → 青色系
-            if (absValue >= 10) return 'green.900';    // -10%以下：最深绿
-            if (absValue >= 5) return 'green.700';     // -10% ~ -5%：深绿
-            if (absValue >= 3) return 'green.500';     // -5% ~ -3%：中绿
-            if (absValue >= 1) return 'teal.600';      // -3% ~ -1%：青色
-            return 'teal.400';                         // -1% ~ 0%：浅青
-        }
-    };
-
-    // 根据涨跌幅获取背景色（永远比文字色浅）
-    const getBgColor = (value) => {
-        if (value == null) {
-            return useColorModeValue('gray.50', 'gray.800');
-        }
-
-        // 0值使用中性灰色背景
-        if (value === 0) {
-            return useColorModeValue('gray.50', 'gray.800');
-        }
-
-        const absValue = Math.abs(value);
-        const isPositive = value > 0;
-
-        if (isPositive) {
-            // 上涨背景：红色系 → 橙色系（统一使用 50 最浅色）
-            if (absValue >= 10) return useColorModeValue('red.50', 'red.900');
-            if (absValue >= 5) return useColorModeValue('red.50', 'red.900');
-            if (absValue >= 3) return useColorModeValue('red.50', 'red.900');
-            if (absValue >= 1) return useColorModeValue('orange.50', 'orange.900');
-            return useColorModeValue('orange.50', 'orange.900');
-        } else {
-            // 下跌背景：绿色系 → 青色系（统一使用 50 最浅色）
-            if (absValue >= 10) return useColorModeValue('green.50', 'green.900');
-            if (absValue >= 5) return useColorModeValue('green.50', 'green.900');
-            if (absValue >= 3) return useColorModeValue('green.50', 'green.900');
-            if (absValue >= 1) return useColorModeValue('teal.50', 'teal.900');
-            return useColorModeValue('teal.50', 'teal.900');
-        }
-    };
-
-    // 根据涨跌幅获取边框色（比背景深，比文字浅）
-    const getBorderColor = (value) => {
-        if (value == null) {
-            return useColorModeValue('gray.200', 'gray.700');
-        }
-
-        // 0值使用中性灰色边框
-        if (value === 0) {
-            return useColorModeValue('gray.200', 'gray.700');
-        }
-
-        const absValue = Math.abs(value);
-        const isPositive = value > 0;
-
-        if (isPositive) {
-            // 上涨边框：红色系 → 橙色系（跟随文字深浅）
-            if (absValue >= 10) return useColorModeValue('red.200', 'red.800');      // 文字 red.900
-            if (absValue >= 5) return useColorModeValue('red.200', 'red.700');       // 文字 red.700
-            if (absValue >= 3) return useColorModeValue('red.100', 'red.600');       // 文字 red.500
-            if (absValue >= 1) return useColorModeValue('orange.200', 'orange.700'); // 文字 orange.600
-            return useColorModeValue('orange.100', 'orange.600');                    // 文字 orange.400
-        } else {
-            // 下跌边框：绿色系 → 青色系（跟随文字深浅）
-            if (absValue >= 10) return useColorModeValue('green.200', 'green.800');  // 文字 green.900
-            if (absValue >= 5) return useColorModeValue('green.200', 'green.700');   // 文字 green.700
-            if (absValue >= 3) return useColorModeValue('green.100', 'green.600');   // 文字 green.500
-            if (absValue >= 1) return useColorModeValue('teal.200', 'teal.700');     // 文字 teal.600
-            return useColorModeValue('teal.100', 'teal.600');                        // 文字 teal.400
-        }
-    };
-
-    // 渲染单个指标
-    const renderIndicator = (label, value) => {
-        if (value == null) return null;
-
-        const sign = value > 0 ? '+' : '';
-        // 0值显示为 "0"，其他值显示一位小数
-        const numStr = value === 0 ? '0' : Math.abs(value).toFixed(1);
-        const numberColor = getNumberColor(value);
-        const bgColor = getBgColor(value);
-        const borderColor = getBorderColor(value);
-        const labelColor = useColorModeValue('gray.700', 'gray.400');
-
-        return (
-            <Box
-                bg={bgColor}
-                borderWidth="2px"
-                borderColor={borderColor}
-                borderRadius="md"
-                px={1.5}
-                py={0.5}
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-            >
-                <Text fontSize="xs" lineHeight="1.2">
-                    <Text as="span" color={labelColor}>
-                        {label}
-                    </Text>
-                    <Text as="span" color={labelColor}>
-                        {sign}
-                    </Text>
-                    <Text as="span" fontWeight="bold" color={numberColor} fontSize="sm">
-                        {value < 0 ? '-' : ''}{numStr}
-                    </Text>
-                    <Text as="span" color={labelColor}>
-                        %
-                    </Text>
-                </Text>
-            </Box>
-        );
-    };
-
-    // 如果没有任何数据，不渲染
-    if (avgChange == null && maxChange == null && weekChange == null) {
-        return null;
-    }
-
-    return (
-        <Flex width="100%" justify="space-between" align="center" gap={1}>
-            {renderIndicator('平均 ', avgChange)}
-            {renderIndicator('最大 ', maxChange)}
-            {renderIndicator('周涨 ', weekChange)}
-        </Flex>
-    );
-};
-
-export default StockChangeIndicators;

src/components/StockChart/StockChartModal.js

@@ -23,25 +23,6 @@ const StockChartModal = ({
     const [chartData, setChartData] = useState(null);
     const [preloadedData, setPreloadedData] = useState({});
 
-    // 处理关联描述（兼容对象和字符串格式）
-    const getRelationDesc = () => {
-        const relationDesc = stock?.relation_desc;
-
-        if (!relationDesc) return null;
-
-        if (typeof relationDesc === 'string') {
-            return relationDesc;
-        } else if (typeof relationDesc === 'object' && relationDesc.data && Array.isArray(relationDesc.data)) {
-            // 新格式：{data: [{query_part: "...", sentences: "..."}]}
-            return relationDesc.data
-                .map(item => item.query_part || item.sentences || '')
-                .filter(s => s)
-                .join('；') || null;
-        }
-
-        return null;
-    };
-
     // 预加载数据
     const preloadData = async (type) => {
         if (!stock || preloadedData[type]) return;
@@ -558,10 +539,10 @@ const StockChartModal = ({
                         <div ref={chartRef} style={{ height: '100%', width: '100%', minHeight: '500px' }} />
                     </Box>
 
-                    {getRelationDesc() && (
+                    {stock?.relation_desc && (
                         <Box p={4} borderTop="1px solid" borderTopColor="gray.200">
                             <Text fontSize="sm" fontWeight="bold" mb={2}>关联描述:</Text>
-                            <Text fontSize="sm" color="gray.600">{getRelationDesc()}</Text>
+                            <Text fontSize="sm" color="gray.600">{stock.relation_desc}</Text>
                         </Box>
                     )}
 

src/constants/animations.js

@@ -1,72 +0,0 @@
-// src/constants/animations.js
-// 通用动画定义 - 使用 @emotion/react 的 keyframes
-
-import { keyframes } from '@emotion/react';
-
-/**
- * 脉冲动画 - 用于S/A级重要性标签
- * 从中心向外扩散的阴影效果
- */
-export const pulseAnimation = keyframes`
-  0% {
-    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7);
-  }
-  70% {
-    box-shadow: 0 0 0 10px rgba(255, 77, 79, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
-  }
-`;
-
-/**
- * 渐入动画
- */
-export const fadeIn = keyframes`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`;
-
-/**
- * 从下往上滑入动画
- */
-export const slideInUp = keyframes`
-  from {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-`;
-
-/**
- * 缩放进入动画
- */
-export const scaleIn = keyframes`
-  from {
-    transform: scale(0.9);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-`;
-
-/**
- * 旋转动画（用于Loading Spinner）
- */
-export const spin = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;

src/constants/importanceLevels.js

@@ -15,55 +15,47 @@ import {
 export const IMPORTANCE_LEVELS = {
     'S': {
         level: 'S',
-        color: 'red.800',
+        color: 'purple.600',
-        bgColor: 'red.50',
+        bgColor: 'purple.50',
-        borderColor: 'red.200',
+        borderColor: 'purple.200',
-        colorScheme: 'red',
-        badgeBg: 'red.800', // 角标边框和文字颜色 - 极深红色
         icon: WarningIcon,
         label: '极高',
-        dotBg: 'red.800',
+        dotBg: 'purple.500',
         description: '重大事件，市场影响深远',
-        antdColor: '#cf1322',
+        antdColor: '#722ed1', // 对应 Ant Design 的紫色
     },
     'A': {
         level: 'A',
         color: 'red.600',
         bgColor: 'red.50',
         borderColor: 'red.200',
-        colorScheme: 'red',
-        badgeBg: 'red.600', // 角标边框和文字颜色 - 深红色
         icon: WarningTwoIcon,
         label: '高',
-        dotBg: 'red.600',
+        dotBg: 'red.500',
         description: '重要事件，影响较大',
-        antdColor: '#ff4d4f',
+        antdColor: '#ff4d4f', // 对应 Ant Design 的红色
     },
     'B': {
         level: 'B',
-        color: 'red.500',
+        color: 'orange.600',
-        bgColor: 'red.50',
+        bgColor: 'orange.50',
-        borderColor: 'red.100',
+        borderColor: 'orange.200',
-        colorScheme: 'red',
-        badgeBg: 'red.500', // 角标边框和文字颜色 - 中红色
         icon: InfoIcon,
         label: '中',
-        dotBg: 'red.500',
+        dotBg: 'orange.500',
         description: '普通事件，有一定影响',
-        antdColor: '#ff7875',
+        antdColor: '#faad14', // 对应 Ant Design 的橙色
     },
     'C': {
         level: 'C',
-        color: 'red.400',
+        color: 'green.600',
-        bgColor: 'red.50',
+        bgColor: 'green.50',
-        borderColor: 'red.100',
+        borderColor: 'green.200',
-        colorScheme: 'red',
-        badgeBg: 'red.400', // 角标边框和文字颜色 - 浅红色
         icon: CheckCircleIcon,
         label: '低',
-        dotBg: 'red.400',
+        dotBg: 'green.500',
         description: '参考事件，影响有限',
-        antdColor: '#ffa39e',
+        antdColor: '#52c41a', // 对应 Ant Design 的绿色
     }
 };
 

src/contexts/AuthModalContext.js

@@ -0,0 +1,110 @@
+// src/contexts/AuthModalContext.js
+import { createContext, useContext, useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from './AuthContext';
+import { logger } from '../utils/logger';
+
+const AuthModalContext = createContext();
+
+/**
+ * 自定义Hook：获取弹窗上下文
+ */
+export const useAuthModal = () => {
+  const context = useContext(AuthModalContext);
+  if (!context) {
+    throw new Error('useAuthModal must be used within AuthModalProvider');
+  }
+  return context;
+};
+
+/**
+ * 认证弹窗提供者组件
+ * 管理统一的认证弹窗状态（登录/注册合并）
+ */
+export const AuthModalProvider = ({ children }) => {
+  const navigate = useNavigate();
+  const { isAuthenticated } = useAuth();
+
+  // 弹窗状态（统一的认证弹窗）
+  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
+
+  // 重定向URL（认证成功后跳转）
+  const [redirectUrl, setRedirectUrl] = useState(null);
+
+  // 成功回调函数
+  const [onSuccessCallback, setOnSuccessCallback] = useState(null);
+
+  /**
+   * 打开认证弹窗（统一的登录/注册入口）
+   * @param {string} url - 认证成功后的重定向URL（可选）
+   * @param {function} callback - 认证成功后的回调函数（可选）
+   */
+  const openAuthModal = useCallback((url = null, callback = null) => {
+    setRedirectUrl(url);
+    setOnSuccessCallback(() => callback);
+    setIsAuthModalOpen(true);
+  }, []);
+
+  /**
+   * 关闭认证弹窗
+   * 如果用户未登录，跳转到首页
+   */
+  const closeModal = useCallback(() => {
+    setIsAuthModalOpen(false);
+    setRedirectUrl(null);
+    setOnSuccessCallback(null);
+
+    // ⭐ 如果用户关闭弹窗时仍未登录，跳转到首页
+    if (!isAuthenticated) {
+      navigate('/home');
+    }
+  }, [isAuthenticated, navigate]);
+
+  /**
+   * 登录/注册成功处理
+   * @param {object} user - 用户信息
+   */
+  const handleLoginSuccess = useCallback((user) => {
+    // 执行自定义回调（如果有）
+    if (onSuccessCallback) {
+      try {
+        onSuccessCallback(user);
+      } catch (error) {
+        logger.error('AuthModalContext', 'handleLoginSuccess', error, {
+          userId: user?.id,
+          hasCallback: !!onSuccessCallback
+        });
+      }
+    }
+
+    // ⭐ 登录成功后，只关闭弹窗，留在当前页面（不跳转）
+    // 移除了原有的 redirectUrl 跳转逻辑
+    setIsAuthModalOpen(false);
+    setRedirectUrl(null);
+    setOnSuccessCallback(null);
+  }, [onSuccessCallback]);
+
+  /**
+   * 提供给子组件的上下文值
+   */
+  const value = {
+    // 状态
+    isAuthModalOpen,
+    redirectUrl,
+
+    // 打开弹窗方法
+    openAuthModal,
+
+    // 关闭弹窗方法
+    closeModal,
+
+    // 成功处理方法
+    handleLoginSuccess,
+  };
+
+  return (
+    <AuthModalContext.Provider value={value}>
+      {children}
+    </AuthModalContext.Provider>
+  );
+};

src/contexts/IndustryContext.js

@@ -0,0 +1,176 @@
+// src/contexts/IndustryContext.js
+// 行业分类数据全局上下文 - 使用API获取 + 缓存机制
+
+import React, { createContext, useContext, useState, useEffect, useRef } from 'react';
+import { industryData as staticIndustryData } from '../data/industryData';
+import { industryService } from '../services/industryService';
+import { logger } from '../utils/logger';
+
+const IndustryContext = createContext();
+
+// 缓存配置
+const CACHE_KEY = 'industry_classifications_cache';
+const CACHE_DURATION = 24 * 60 * 60 * 1000; // 1天（24小时）
+
+/**
+ * useIndustry Hook
+ * 在任何组件中使用行业数据
+ */
+export const useIndustry = () => {
+    const context = useContext(IndustryContext);
+    if (!context) {
+        throw new Error('useIndustry must be used within IndustryProvider');
+    }
+    return context;
+};
+
+/**
+ * 从 localStorage 读取缓存
+ */
+const loadFromCache = () => {
+    try {
+        const cached = localStorage.getItem(CACHE_KEY);
+        if (!cached) return null;
+
+        const { data, timestamp } = JSON.parse(cached);
+        const now = Date.now();
+
+        // 检查缓存是否过期（1天）
+        if (now - timestamp > CACHE_DURATION) {
+            localStorage.removeItem(CACHE_KEY);
+            logger.debug('IndustryContext', '缓存已过期，清除缓存');
+            return null;
+        }
+
+        logger.debug('IndustryContext', '从缓存加载行业数据', {
+            count: data?.length || 0,
+            age: Math.round((now - timestamp) / 1000 / 60) + ' 分钟前'
+        });
+        return data;
+    } catch (error) {
+        logger.error('IndustryContext', 'loadFromCache', error);
+        return null;
+    }
+};
+
+/**
+ * 保存到 localStorage
+ */
+const saveToCache = (data) => {
+    try {
+        localStorage.setItem(CACHE_KEY, JSON.stringify({
+            data,
+            timestamp: Date.now()
+        }));
+        logger.debug('IndustryContext', '行业数据已缓存', {
+            count: data?.length || 0
+        });
+    } catch (error) {
+        logger.error('IndustryContext', 'saveToCache', error);
+    }
+};
+
+/**
+ * IndustryProvider 组件
+ * 提供全局行业数据管理 - 使用API获取 + 缓存机制
+ */
+export const IndustryProvider = ({ children }) => {
+    const [industryData, setIndustryData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const hasLoadedRef = useRef(false);
+    const isLoadingRef = useRef(false);
+
+    /**
+     * 加载行业数据
+     */
+    const loadIndustryData = async () => {
+        // 防止重复加载（处理 StrictMode 双重调用）
+        if (hasLoadedRef.current || isLoadingRef.current) {
+            logger.debug('IndustryContext', '跳过重复加载', {
+                hasLoaded: hasLoadedRef.current,
+                isLoading: isLoadingRef.current
+            });
+            return industryData;
+        }
+
+        try {
+            isLoadingRef.current = true;
+            setLoading(true);
+            setError(null);
+
+            logger.debug('IndustryContext', '开始加载行业数据');
+
+            // 1. 先尝试从缓存加载
+            const cachedData = loadFromCache();
+            if (cachedData && cachedData.length > 0) {
+                setIndustryData(cachedData);
+                hasLoadedRef.current = true;
+                return cachedData;
+            }
+
+            // 2. 缓存不存在或过期，调用 API
+            logger.debug('IndustryContext', '缓存无效，调用API获取数据');
+            const response = await industryService.getClassifications();
+
+            if (response.success && response.data && response.data.length > 0) {
+                setIndustryData(response.data);
+                saveToCache(response.data);
+                hasLoadedRef.current = true;
+
+                logger.debug('IndustryContext', 'API数据加载成功', {
+                    count: response.data.length
+                });
+
+                return response.data;
+            } else {
+                throw new Error('API返回数据为空');
+            }
+        } catch (err) {
+            // 3. API 失败，回退到静态数据
+            logger.warn('IndustryContext', 'API加载失败，使用静态数据', {
+                error: err.message
+            });
+
+            setError(err.message);
+            setIndustryData(staticIndustryData);
+            hasLoadedRef.current = true;
+
+            return staticIndustryData;
+        } finally {
+            setLoading(false);
+            isLoadingRef.current = false;
+        }
+    };
+
+    /**
+     * 刷新行业数据（清除缓存并重新加载）
+     */
+    const refreshIndustryData = async () => {
+        logger.debug('IndustryContext', '刷新行业数据，清除缓存');
+        localStorage.removeItem(CACHE_KEY);
+        hasLoadedRef.current = false;
+        isLoadingRef.current = false;
+        return loadIndustryData();
+    };
+
+    // 组件挂载时自动加载数据
+    useEffect(() => {
+        loadIndustryData();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const value = {
+        industryData,
+        loading,
+        error,
+        loadIndustryData,
+        refreshIndustryData
+    };
+
+    return (
+        <IndustryContext.Provider value={value}>
+            {children}
+        </IndustryContext.Provider>
+    );
+};

src/hooks/useAuthModal.js

@@ -1,116 +0,0 @@
-// src/hooks/useAuthModal.js
-// 认证弹窗自定义 Hook - 组合 Redux 状态和业务逻辑
-
-import { useCallback, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
-import {
-    openModal,
-    closeModal,
-    selectAuthModalOpen,
-    selectRedirectUrl
-} from '../store/slices/authModalSlice';
-import { useAuth } from '../contexts/AuthContext';
-import { logger } from '../utils/logger';
-
-/**
- * 认证弹窗自定义 Hook
- *
- * 功能：
- * - 管理认证弹窗的开关状态
- * - 处理登录成功后的回调和跳转
- * - 未登录时关闭弹窗自动跳转到首页
- *
- * 注意：
- * - onSuccessCallback 使用 ref 存储（函数不可序列化，不能放 Redux）
- * - 依赖 AuthContext 读取 isAuthenticated（AuthProvider 暂未迁移）
- *
- * @returns {object} 弹窗状态和操作方法
- */
-export const useAuthModal = () => {
-    const dispatch = useDispatch();
-    const navigate = useNavigate();
-
-    // Redux 状态
-    const isAuthModalOpen = useSelector(selectAuthModalOpen);
-    const redirectUrl = useSelector(selectRedirectUrl);
-
-    // AuthContext 状态（暂未迁移到 Redux）
-    const { isAuthenticated } = useAuth();
-
-    // 使用 ref 存储回调函数（不能放 Redux，因为函数不可序列化）
-    const onSuccessCallbackRef = useRef(null);
-
-    /**
-     * 打开认证弹窗（统一的登录/注册入口）
-     * @param {string} url - 认证成功后的重定向URL（可选）
-     * @param {function} callback - 认证成功后的回调函数（可选）
-     */
-    const openAuthModal = useCallback((url = null, callback = null) => {
-        onSuccessCallbackRef.current = callback;
-        dispatch(openModal({ redirectUrl: url }));
-
-        logger.debug('useAuthModal', '打开认证弹窗', {
-            redirectUrl: url || '无',
-            hasCallback: !!callback
-        });
-    }, [dispatch]);
-
-    /**
-     * 关闭认证弹窗
-     * 如果用户未登录，跳转到首页
-     */
-    const closeAuthModal = useCallback(() => {
-        dispatch(closeModal());
-        onSuccessCallbackRef.current = null;
-
-        // ⭐ 如果用户关闭弹窗时仍未登录，跳转到首页
-        if (!isAuthenticated) {
-            navigate('/home');
-            logger.debug('useAuthModal', '未登录关闭弹窗，跳转到首页');
-        } else {
-            logger.debug('useAuthModal', '关闭认证弹窗');
-        }
-    }, [dispatch, isAuthenticated, navigate]);
-
-    /**
-     * 登录/注册成功处理
-     * @param {object} user - 用户信息
-     */
-    const handleLoginSuccess = useCallback((user) => {
-        // 执行自定义回调（如果有）
-        if (onSuccessCallbackRef.current) {
-            try {
-                onSuccessCallbackRef.current(user);
-                logger.debug('useAuthModal', '执行成功回调', {
-                    userId: user?.id
-                });
-            } catch (error) {
-                logger.error('useAuthModal', 'handleLoginSuccess 回调执行失败', error, {
-                    userId: user?.id,
-                    hasCallback: !!onSuccessCallbackRef.current
-                });
-            }
-        }
-
-        // ⭐ 登录成功后，只关闭弹窗，留在当前页面（不跳转）
-        // 移除了原有的 redirectUrl 跳转逻辑
-        dispatch(closeModal());
-        onSuccessCallbackRef.current = null;
-
-        logger.debug('useAuthModal', '登录成功，关闭弹窗', {
-            userId: user?.id
-        });
-    }, [dispatch]);
-
-    return {
-        // 状态
-        isAuthModalOpen,
-        redirectUrl,
-
-        // 方法
-        openAuthModal,
-        closeModal: closeAuthModal,
-        handleLoginSuccess,
-    };
-};

src/hooks/useDelayedMenu.js

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

src/hooks/useFollowingEvents.js

@@ -1,109 +0,0 @@
-// src/hooks/useFollowingEvents.js
-// 关注事件管理自定义 Hook
-
-import { useState, useCallback } from 'react';
-import { useToast } from '@chakra-ui/react';
-import { logger } from '../utils/logger';
-import { getApiBase } from '../utils/apiConfig';
-
-const EVENTS_PAGE_SIZE = 8;
-
-/**
- * 关注事件管理 Hook
- * 提供事件加载、分页、取消关注等功能
- *
- * @returns {{
- *   followingEvents: Array,
- *   eventsLoading: boolean,
- *   eventsPage: number,
- *   setEventsPage: Function,
- *   EVENTS_PAGE_SIZE: number,
- *   loadFollowingEvents: Function,
- *   handleUnfollowEvent: Function
- * }}
- */
-export const useFollowingEvents = () => {
-    const toast = useToast();
-    const [followingEvents, setFollowingEvents] = useState([]);
-    const [eventsLoading, setEventsLoading] = useState(false);
-    const [eventsPage, setEventsPage] = useState(1);
-
-    // 加载关注的事件
-    const loadFollowingEvents = useCallback(async () => {
-        try {
-            setEventsLoading(true);
-            const base = getApiBase();
-            const resp = await fetch(base + '/api/account/events/following', {
-                credentials: 'include',
-                cache: 'no-store',
-                headers: { 'Cache-Control': 'no-cache' }
-            });
-            if (resp.ok) {
-                const data = await resp.json();
-                if (data && data.success && Array.isArray(data.data)) {
-                    // 合并重复的事件（用最新的数据）
-                    const eventMap = new Map();
-                    for (const evt of data.data) {
-                        if (evt && evt.id) {
-                            eventMap.set(evt.id, evt);
-                        }
-                    }
-                    const merged = Array.from(eventMap.values());
-                    // 按创建时间降序排列（假设事件有 created_at 或 id）
-                    if (merged.length > 0 && merged[0].created_at) {
-                        merged.sort((a, b) => new Date(b.created_at || 0) - new Date(a.created_at || 0));
-                    } else {
-                        merged.sort((a, b) => (b.id || 0) - (a.id || 0));
-                    }
-                    setFollowingEvents(merged);
-                } else {
-                    setFollowingEvents([]);
-                }
-            } else {
-                setFollowingEvents([]);
-            }
-        } catch (e) {
-            logger.warn('useFollowingEvents', '加载关注事件失败', {
-                error: e.message
-            });
-            setFollowingEvents([]);
-        } finally {
-            setEventsLoading(false);
-        }
-    }, []);
-
-    // 取消关注事件
-    const handleUnfollowEvent = useCallback(async (eventId) => {
-        try {
-            const base = getApiBase();
-            const resp = await fetch(base + `/api/events/${eventId}/follow`, {
-                method: 'POST',
-                credentials: 'include'
-            });
-            const data = await resp.json().catch(() => ({}));
-            if (resp.ok && data && data.success !== false) {
-                setFollowingEvents((prev) => {
-                    const updated = (prev || []).filter((x) => x.id !== eventId);
-                    const newMaxPage = Math.max(1, Math.ceil((updated.length || 0) / EVENTS_PAGE_SIZE));
-                    setEventsPage((p) => Math.min(p, newMaxPage));
-                    return updated;
-                });
-                toast({ title: '已取消关注该事件', status: 'info', duration: 1500 });
-            } else {
-                toast({ title: '操作失败', status: 'error', duration: 2000 });
-            }
-        } catch (e) {
-            toast({ title: '网络错误，操作失败', status: 'error', duration: 2000 });
-        }
-    }, [toast]);
-
-    return {
-        followingEvents,
-        eventsLoading,
-        eventsPage,
-        setEventsPage,
-        EVENTS_PAGE_SIZE,
-        loadFollowingEvents,
-        handleUnfollowEvent
-    };
-};

src/hooks/useGlobalErrorHandler.js

@@ -1,61 +0,0 @@
-// src/hooks/useGlobalErrorHandler.js
-// 全局错误处理 Hook
-
-import { useEffect } from 'react';
-import { logger } from '../utils/logger';
-
-/**
- * 全局错误处理 Hook
- * 捕获未处理的 Promise rejection 和全局错误
- *
- * @example
- * function App() {
- *   useGlobalErrorHandler();
- *   return <div>...</div>;
- * }
- */
-export function useGlobalErrorHandler() {
-    useEffect(() => {
-        /**
-         * 处理未捕获的 Promise rejection
-         */
-        const handleUnhandledRejection = (event) => {
-            logger.error(
-                'App',
-                'unhandledRejection',
-                event.reason instanceof Error ? event.reason : new Error(String(event.reason)),
-                { promise: event.promise }
-            );
-            // 阻止默认的错误处理（防止崩溃）
-            event.preventDefault();
-        };
-
-        /**
-         * 处理全局错误
-         */
-        const handleError = (event) => {
-            logger.error(
-                'App',
-                'globalError',
-                event.error || new Error(event.message),
-                {
-                    filename: event.filename,
-                    lineno: event.lineno,
-                    colno: event.colno
-                }
-            );
-            // 阻止默认的错误处理（防止崩溃）
-            event.preventDefault();
-        };
-
-        // 注册事件监听器
-        window.addEventListener('unhandledrejection', handleUnhandledRejection);
-        window.addEventListener('error', handleError);
-
-        // 清理函数
-        return () => {
-            window.removeEventListener('unhandledrejection', handleUnhandledRejection);
-            window.removeEventListener('error', handleError);
-        };
-    }, []);
-}

src/hooks/useProfileCompleteness.js

@@ -1,127 +0,0 @@
-// src/hooks/useProfileCompleteness.js
-// 用户资料完整性管理自定义 Hook
-
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { logger } from '../utils/logger';
-import { getApiBase } from '../utils/apiConfig';
-
-/**
- * 用户资料完整性管理 Hook
- * 检查并管理用户资料完整度状态
- *
- * @param {Object} options
- * @param {boolean} options.isAuthenticated - 是否已登录
- * @param {Object} options.user - 用户对象
- * @returns {{
- *   profileCompleteness: Object|null,
- *   showAlert: boolean,
- *   setShowAlert: Function,
- *   isChecking: boolean,
- *   checkProfileCompleteness: Function
- * }}
- */
-export const useProfileCompleteness = ({ isAuthenticated, user }) => {
-    const [profileCompleteness, setProfileCompleteness] = useState(null);
-    const [showAlert, setShowAlert] = useState(false);
-    const [isChecking, setIsChecking] = useState(false);
-
-    // 添加标志位：追踪是否已经检查过资料完整性（避免重复请求）
-    const hasCheckedCompleteness = useRef(false);
-
-    // ⚡ 提取 userId 为独立变量，避免 user 对象引用变化导致无限循环
-    const userId = user?.id;
-    const prevUserIdRef = useRef(userId);
-    const prevIsAuthenticatedRef = useRef(isAuthenticated);
-
-    // 检查用户资料完整性
-    const checkProfileCompleteness = useCallback(async () => {
-        if (!isAuthenticated || !user) return;
-
-        // 如果已经检查过，跳过（避免重复请求）
-        if (hasCheckedCompleteness.current) {
-            logger.debug('useProfileCompleteness', '已检查过资料完整性，跳过重复请求', {
-                userId: user?.id
-            });
-            return;
-        }
-
-        try {
-            setIsChecking(true);
-            logger.debug('useProfileCompleteness', '开始检查资料完整性', {
-                userId: user?.id
-            });
-            const base = getApiBase();
-            const resp = await fetch(base + '/api/account/profile-completeness', {
-                credentials: 'include'
-            });
-
-            if (resp.ok) {
-                const data = await resp.json();
-                if (data.success) {
-                    setProfileCompleteness(data.data);
-                    // 只有微信用户且资料不完整时才显示提醒
-                    setShowAlert(data.data.needsAttention);
-                    // 标记为已检查
-                    hasCheckedCompleteness.current = true;
-                    logger.debug('useProfileCompleteness', '资料完整性检查完成', {
-                        userId: user?.id,
-                        completeness: data.data.completenessPercentage
-                    });
-                }
-            }
-        } catch (error) {
-            logger.warn('useProfileCompleteness', '检查资料完整性失败', {
-                userId: user?.id,
-                error: error.message
-            });
-        } finally {
-            setIsChecking(false);
-        }
-    }, [isAuthenticated, userId, user]);
-
-    // 监听用户变化，重置检查标志（用户切换或退出登录时）
-    useEffect(() => {
-        const userIdChanged = prevUserIdRef.current !== userId;
-        const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
-
-        if (userIdChanged || authChanged) {
-            prevUserIdRef.current = userId;
-            prevIsAuthenticatedRef.current = isAuthenticated;
-
-            if (!isAuthenticated || !user) {
-                // 用户退出登录，重置标志
-                hasCheckedCompleteness.current = false;
-                setProfileCompleteness(null);
-                setShowAlert(false);
-            }
-        }
-    }, [isAuthenticated, userId, user]);
-
-    // 用户登录后检查资料完整性
-    useEffect(() => {
-        const userIdChanged = prevUserIdRef.current !== userId;
-        const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
-
-        if ((userIdChanged || authChanged) && isAuthenticated && user) {
-            // 延迟检查，避免过于频繁
-            const timer = setTimeout(checkProfileCompleteness, 1000);
-            return () => clearTimeout(timer);
-        }
-    }, [isAuthenticated, userId, checkProfileCompleteness, user]);
-
-    // 提供重置函数，用于登出时清理
-    const resetCompleteness = useCallback(() => {
-        hasCheckedCompleteness.current = false;
-        setProfileCompleteness(null);
-        setShowAlert(false);
-    }, []);
-
-    return {
-        profileCompleteness,
-        showAlert,
-        setShowAlert,
-        isChecking,
-        checkProfileCompleteness,
-        resetCompleteness
-    };
-};

src/hooks/useSubscription.js

@@ -1,20 +1,7 @@
 // src/hooks/useSubscription.js
-// 订阅信息自定义 Hook - 使用 Redux 状态管理
+import { useState, useEffect, useRef } from 'react';
-
-import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import { useAuth } from '../contexts/AuthContext';
 import { logger } from '../utils/logger';
-import {
-    fetchSubscriptionInfo,
-    openModal,
-    closeModal,
-    resetToFree,
-    selectSubscriptionInfo,
-    selectSubscriptionLoading,
-    selectSubscriptionError,
-    selectSubscriptionModalOpen
-} from '../store/slices/subscriptionSlice';
 
 // 订阅级别映射
 const SUBSCRIPTION_LEVELS = {
@@ -36,51 +23,113 @@ const FEATURE_REQUIREMENTS = {
   'hot_stocks': 'pro'          // 热门个股
 };
 
-/**
- * 订阅信息自定义 Hook (Redux 版本)
- *
- * 功能:
- * - 自动根据登录状态加载订阅信息 (从 Redux)
- * - 提供权限检查方法
- * - 提供订阅 Modal 控制方法
- *
- * @returns {{
- *   subscriptionInfo: Object,
- *   loading: boolean,
- *   error: string|null,
- *   isSubscriptionModalOpen: boolean,
- *   openSubscriptionModal: Function,
- *   closeSubscriptionModal: Function,
- *   refreshSubscription: Function,
- *   hasFeatureAccess: Function,
- *   hasSubscriptionLevel: Function,
- *   getRequiredLevel: Function,
- *   getSubscriptionStatusText: Function,
- *   getUpgradeRecommendation: Function
- * }}
- */
 export const useSubscription = () => {
-    const dispatch = useDispatch();
   const { user, isAuthenticated } = useAuth();
+  const [subscriptionInfo, setSubscriptionInfo] = useState({
+    type: 'free',
+    status: 'active',
+    is_active: true,
+    days_left: 0
+  });
+  const [loading, setLoading] = useState(false);
 
-    // Redux 状态
+  // 获取订阅信息
-    const subscriptionInfo = useSelector(selectSubscriptionInfo);
+  const fetchSubscriptionInfo = async () => {
-    const loading = useSelector(selectSubscriptionLoading);
+    if (!isAuthenticated || !user) {
-    const error = useSelector(selectSubscriptionError);
+      setSubscriptionInfo({
-    const isSubscriptionModalOpen = useSelector(selectSubscriptionModalOpen);
+        type: 'free',
-
+        status: 'active',
-    // 自动加载订阅信息
+        is_active: true,
-    useEffect(() => {
+        days_left: 0
-        if (isAuthenticated && user) {
+      });
-            // 用户已登录,加载订阅信息
+      return;
-            dispatch(fetchSubscriptionInfo());
-            logger.debug('useSubscription', '加载订阅信息', { userId: user.id });
-        } else {
-            // 用户未登录,重置为免费版
-            dispatch(resetToFree());
-            logger.debug('useSubscription', '用户未登录，重置为免费版');
     }
-    }, [isAuthenticated, user, dispatch]);
+
+    // 首先检查用户对象中是否已经包含订阅信息
+    if (user.subscription_type) {
+      logger.debug('useSubscription', '从用户对象获取订阅信息', {
+        subscriptionType: user.subscription_type,
+        daysLeft: user.subscription_days_left
+      });
+      setSubscriptionInfo({
+        type: user.subscription_type,
+        status: 'active',
+        is_active: true,
+        days_left: user.subscription_days_left || 0
+      });
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await fetch('/api/subscription/info', {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        }
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success) {
+          setSubscriptionInfo(data.data);
+        }
+      } else {
+        // 如果API调用失败，回退到用户对象中的信息
+        logger.warn('useSubscription', 'API调用失败，使用用户对象订阅信息', {
+          status: response.status,
+          fallbackType: user.subscription_type || 'free'
+        });
+        setSubscriptionInfo({
+          type: user.subscription_type || 'free',
+          status: 'active',
+          is_active: true,
+          days_left: user.subscription_days_left || 0
+        });
+      }
+    } catch (error) {
+      logger.error('useSubscription', 'fetchSubscriptionInfo', error, {
+        userId: user?.id
+      });
+      // 发生错误时，回退到用户对象中的信息
+      setSubscriptionInfo({
+        type: user.subscription_type || 'free',
+        status: 'active',
+        is_active: true,
+        days_left: user.subscription_days_left || 0
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // ⚡ 提取 userId 为独立变量，避免 user 对象引用变化导致无限循环
+  const userId = user?.id;
+  const prevUserIdRef = useRef(userId);
+  const prevIsAuthenticatedRef = useRef(isAuthenticated);
+
+  useEffect(() => {
+    // ⚡ 只在 userId 或 isAuthenticated 真正变化时才请求
+    const userIdChanged = prevUserIdRef.current !== userId;
+    const authChanged = prevIsAuthenticatedRef.current !== isAuthenticated;
+
+    if (userIdChanged || authChanged) {
+      logger.debug('useSubscription', 'fetchSubscriptionInfo 触发', {
+        userIdChanged,
+        authChanged,
+        prevUserId: prevUserIdRef.current,
+        currentUserId: userId,
+        prevAuth: prevIsAuthenticatedRef.current,
+        currentAuth: isAuthenticated
+      });
+
+      prevUserIdRef.current = userId;
+      prevIsAuthenticatedRef.current = isAuthenticated;
+      fetchSubscriptionInfo();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAuthenticated, userId]); // 使用 userId 原始值，而不是 user?.id 表达式
 
   // 获取订阅级别数值
   const getSubscriptionLevel = (type = null) => {
@@ -90,8 +139,12 @@ export const useSubscription = () => {
 
   // 检查是否有指定功能的权限
   const hasFeatureAccess = (featureName) => {
-        // Max 用户解锁所有功能
+    // 临时调试：如果用户对象中有max权限，直接解锁所有功能
-        if (user?.subscription_type === 'max' || subscriptionInfo.type === 'max') {
+    if (user?.subscription_type === 'max') {
+      logger.debug('useSubscription', 'Max用户解锁功能', {
+        featureName,
+        userId: user?.id
+      });
       return true;
     }
 
@@ -159,24 +212,13 @@ export const useSubscription = () => {
   };
 
   return {
-        // 订阅信息 (来自 Redux)
     subscriptionInfo,
     loading,
-        error,
-
-        // Modal 控制
-        isSubscriptionModalOpen,
-        openSubscriptionModal: () => dispatch(openModal()),
-        closeSubscriptionModal: () => dispatch(closeModal()),
-
-        // 权限检查方法
     hasFeatureAccess,
     hasSubscriptionLevel,
     getRequiredLevel,
     getSubscriptionStatusText,
     getUpgradeRecommendation,
-
+    refreshSubscription: fetchSubscriptionInfo
-        // 手动刷新
-        refreshSubscription: () => dispatch(fetchSubscriptionInfo())
   };
 };

src/hooks/useWatchlist.js

@@ -1,100 +0,0 @@
-// src/hooks/useWatchlist.js
-// 自选股管理自定义 Hook
-
-import { useState, useCallback } from 'react';
-import { useToast } from '@chakra-ui/react';
-import { logger } from '../utils/logger';
-import { getApiBase } from '../utils/apiConfig';
-
-const WATCHLIST_PAGE_SIZE = 10;
-
-/**
- * 自选股管理 Hook
- * 提供自选股加载、分页、移除等功能
- *
- * @returns {{
- *   watchlistQuotes: Array,
- *   watchlistLoading: boolean,
- *   watchlistPage: number,
- *   setWatchlistPage: Function,
- *   WATCHLIST_PAGE_SIZE: number,
- *   loadWatchlistQuotes: Function,
- *   handleRemoveFromWatchlist: Function
- * }}
- */
-export const useWatchlist = () => {
-    const toast = useToast();
-    const [watchlistQuotes, setWatchlistQuotes] = useState([]);
-    const [watchlistLoading, setWatchlistLoading] = useState(false);
-    const [watchlistPage, setWatchlistPage] = useState(1);
-
-    // 加载自选股实时行情
-    const loadWatchlistQuotes = useCallback(async () => {
-        try {
-            setWatchlistLoading(true);
-            const base = getApiBase();
-            const resp = await fetch(base + '/api/account/watchlist/realtime', {
-                credentials: 'include',
-                cache: 'no-store',
-                headers: { 'Cache-Control': 'no-cache' }
-            });
-            if (resp.ok) {
-                const data = await resp.json();
-                if (data && data.success && Array.isArray(data.data)) {
-                    setWatchlistQuotes(data.data);
-                } else {
-                    setWatchlistQuotes([]);
-                }
-            } else {
-                setWatchlistQuotes([]);
-            }
-        } catch (e) {
-            logger.warn('useWatchlist', '加载自选股实时行情失败', {
-                error: e.message
-            });
-            setWatchlistQuotes([]);
-        } finally {
-            setWatchlistLoading(false);
-        }
-    }, []);
-
-    // 从自选股移除
-    const handleRemoveFromWatchlist = useCallback(async (stockCode) => {
-        try {
-            const base = getApiBase();
-            const resp = await fetch(base + `/api/account/watchlist/${stockCode}`, {
-                method: 'DELETE',
-                credentials: 'include'
-            });
-            const data = await resp.json().catch(() => ({}));
-            if (resp.ok && data && data.success !== false) {
-                setWatchlistQuotes((prev) => {
-                    const normalize6 = (code) => {
-                        const m = String(code || '').match(/(\d{6})/);
-                        return m ? m[1] : String(code || '');
-                    };
-                    const target = normalize6(stockCode);
-                    const updated = (prev || []).filter((x) => normalize6(x.stock_code) !== target);
-                    const newMaxPage = Math.max(1, Math.ceil((updated.length || 0) / WATCHLIST_PAGE_SIZE));
-                    setWatchlistPage((p) => Math.min(p, newMaxPage));
-                    return updated;
-                });
-                toast({ title: '已从自选股移除', status: 'info', duration: 1500 });
-            } else {
-                toast({ title: '移除失败', status: 'error', duration: 2000 });
-            }
-        } catch (e) {
-            toast({ title: '网络错误，移除失败', status: 'error', duration: 2000 });
-        }
-    }, [toast]);
-
-    return {
-        watchlistQuotes,
-        watchlistLoading,
-        watchlistPage,
-        setWatchlistPage,
-        WATCHLIST_PAGE_SIZE,
-        loadWatchlistQuotes,
-        handleRemoveFromWatchlist
-    };
-};

src/index.js

@@ -25,12 +25,7 @@ async function startApp() {
     // Render the app with Router wrapper
     root.render(
         <React.StrictMode>
-            <Router
+            <Router>
-                future={{
-                    // v7_startTransition: true, // 禁用：导致路由切换延迟2秒，影响用户体验
-                    v7_relativeSplatPath: true,
-                }}
-            >
                 <App />
             </Router>
         </React.StrictMode>

src/layouts/Auth.js

@@ -0,0 +1,67 @@
+// src/layouts/Auth.js
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { Box } from '@chakra-ui/react';
+import { useAuth } from '../contexts/AuthContext';
+import ErrorBoundary from '../components/ErrorBoundary';
+
+// 导入认证相关页面
+import SignInIllustration from '../views/Authentication/SignIn/SignInIllustration';
+import SignUpIllustration from '../views/Authentication/SignUp/SignUpIllustration';
+
+// 认证路由组件 - 已登录用户不能访问登录页
+const AuthRoute = ({ children }) => {
+  const { isAuthenticated, isLoading } = useAuth();
+  
+  // 加载中不做跳转
+  if (isLoading) {
+    return children;
+  }
+  
+  // 已登录用户跳转到首页
+  if (isAuthenticated) {
+    // 检查是否有记录的重定向路径
+    const redirectPath = localStorage.getItem('redirectPath');
+    if (redirectPath && redirectPath !== '/auth/signin' && redirectPath !== '/auth/sign-up') {
+      localStorage.removeItem('redirectPath');
+      return <Navigate to={redirectPath} replace />;
+    }
+    return <Navigate to="/home" replace />;
+  }
+  
+  return children;
+};
+
+export default function Auth() {
+  return (
+    <ErrorBoundary>
+      <Box minH="100vh">
+        <Routes>
+          {/* 登录页面 */}
+          <Route
+            path="/signin"
+            element={
+              <AuthRoute>
+                <SignInIllustration />
+              </AuthRoute>
+            }
+          />
+
+          {/* 注册页面 */}
+          <Route
+            path="/sign-up"
+            element={
+              <AuthRoute>
+                <SignUpIllustration />
+              </AuthRoute>
+            }
+          />
+
+          {/* 默认重定向到登录页 */}
+          <Route path="/" element={<Navigate to="/auth/signin" replace />} />
+          <Route path="*" element={<Navigate to="/auth/signin" replace />} />
+        </Routes>
+      </Box>
+    </ErrorBoundary>
+  );
+}

src/layouts/Home.js

@@ -0,0 +1,98 @@
+// src/layouts/Home.js
+import React from "react";
+import { Routes, Route } from "react-router-dom";
+import { Box } from '@chakra-ui/react';
+
+// 导航栏已由 MainLayout 提供，此处不再导入
+// import HomeNavbar from "../components/Navbars/HomeNavbar";
+
+// 导入页面组件
+import HomePage from "views/Home/HomePage";
+import ProfilePage from "views/Profile/ProfilePage";
+import SettingsPage from "views/Settings/SettingsPage";
+import CenterDashboard from "views/Dashboard/Center";
+import Subscription from "views/Pages/Account/Subscription";
+
+// 懒加载隐私政策、用户协议、微信回调和模拟交易页面
+const PrivacyPolicy = React.lazy(() => import("views/Pages/PrivacyPolicy"));
+const UserAgreement = React.lazy(() => import("views/Pages/UserAgreement"));
+const WechatCallback = React.lazy(() => import("views/Pages/WechatCallback"));
+const TradingSimulation = React.lazy(() => import("views/TradingSimulation"));
+
+// 导入保护路由组件
+import ProtectedRoute from "../components/ProtectedRoute";
+
+export default function Home() {
+    return (
+        <Box minH="100vh">
+            {/* 导航栏已由 MainLayout 提供，此处不再渲染 */}
+
+            {/* 主要内容区域 */}
+            <Box>
+                <Routes>
+                    {/* 首页默认路由 */}
+                    <Route path="/" element={<HomePage />} />
+                    <Route
+                        path="/center"
+                        element={
+                            <ProtectedRoute>
+                                <CenterDashboard />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* 需要登录保护的页面 */}
+                    <Route
+                        path="/profile"
+                        element={
+                            <ProtectedRoute>
+                                <ProfilePage />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    <Route
+                        path="/settings"
+                        element={
+                            <ProtectedRoute>
+                                <SettingsPage />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* 订阅管理页面 */}
+                    <Route
+                        path="/pages/account/subscription"
+                        element={
+                            <ProtectedRoute>
+                                <Subscription />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* 模拟盘交易页面 */}
+                    <Route
+                        path="/trading-simulation"
+                        element={
+                            <ProtectedRoute>
+                                <TradingSimulation />
+                            </ProtectedRoute>
+                        }
+                    />
+
+                    {/* 隐私政策页面 - 无需登录 */}
+                    <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+
+                    {/* 用户协议页面 - 无需登录 */}
+                    <Route path="/user-agreement" element={<UserAgreement />} />
+
+                    {/* 微信授权回调页面 - 无需登录 */}
+                    <Route path="/wechat-callback" element={<WechatCallback />} />
+
+                    {/* 其他可能的路由 */}
+                    <Route path="*" element={<HomePage />} />
+                </Routes>
+            </Box>
+        </Box>
+    );
+}

src/layouts/MainLayout.js

@@ -1,57 +1,35 @@
 // src/layouts/MainLayout.js
 // 主布局组件 - 为所有带导航栏的页面提供统一布局
-import React, { memo, Suspense } from "react";
+import React, { Suspense } from "react";
 import { Outlet } from "react-router-dom";
 import { Box } from '@chakra-ui/react';
 import HomeNavbar from "../components/Navbars/HomeNavbar";
-import AppFooter from "./AppFooter";
-import BackToTopButton from "./components/BackToTopButton";
-import ErrorBoundary from "../components/ErrorBoundary";
 import PageLoader from "../components/Loading/PageLoader";
-import { BACK_TO_TOP_CONFIG } from "./config/layoutConfig";
+import AppFooter from "./AppFooter";
-
-// ✅ P0 性能优化：缓存静态组件，避免路由切换时不必要的重新渲染
-// HomeNavbar (1623行) 和 AppFooter 不依赖路由参数，使用 memo 可大幅减少渲染次数
-const MemoizedHomeNavbar = memo(HomeNavbar);
-const MemoizedAppFooter = memo(AppFooter);
 
 /**
  * MainLayout - 带导航栏的主布局
  *
  * 使用 <Outlet /> 渲染子路由，确保导航栏只渲染一次
  * 页面切换时只有 Outlet 内的内容会更新，导航栏保持不变
- *
+ * Suspense 边界确保导航栏始终可见，只有内容区域显示 loading
- * 架构优化：
- * - ✅ 组件拆分 - BackToTopButton 独立复用
- * - ✅ 性能优化 - 使用 memo 避免导航栏和页脚重新渲染
- * - ✅ 错误隔离 - ErrorBoundary 包裹页面内容，确保导航栏可用
- * - ✅ 懒加载支持 - Suspense 统一处理懒加载
- * - ✅ 布局简化 - 直接内联容器逻辑，减少嵌套层级
  */
 export default function MainLayout() {
     return (
         <Box minH="100vh" display="flex" flexDirection="column">
-            {/* 导航栏 - 在所有页面间共享，memo 后不会在路由切换时重新渲染 */}
+            {/* 导航栏 - 在所有页面间共享，不会重新渲染 */}
-            <MemoizedHomeNavbar />
+            <HomeNavbar />
 
-            {/* 页面内容区域 - flex: 1 占据剩余空间，包含错误边界、懒加载 */}
+            {/* 页面内容区域 - 通过 Outlet 渲染当前路由对应的组件 */}
-            <Box flex="1" w="100%" position="relative" overflow="hidden">
+            {/* Suspense 只包裹内容区域，导航栏保持可见 */}
-                <ErrorBoundary>
+            <Box flex="1">
                 <Suspense fallback={<PageLoader message="页面加载中..." />}>
                     <Outlet />
                 </Suspense>
-                </ErrorBoundary>
             </Box>
 
-            {/* 页脚 - 在所有页面间共享，memo 后不会在路由切换时重新渲染 */}
+            {/* 页脚 - 在所有页面间共享 */}
-            <MemoizedAppFooter />
+            <AppFooter />
-
-            {/* 返回顶部按钮 - 滚动超过阈值时显示 */}
-            <BackToTopButton
-                scrollThreshold={BACK_TO_TOP_CONFIG.scrollThreshold}
-                position={BACK_TO_TOP_CONFIG.position}
-                zIndex={BACK_TO_TOP_CONFIG.zIndex}
-            />
         </Box>
     );
 }

src/layouts/components/BackToTopButton.js

@@ -1,94 +0,0 @@
-// src/layouts/components/BackToTopButton.js
-import React, { useState, useEffect, useCallback, useRef, memo } from 'react';
-import { IconButton } from '@chakra-ui/react';
-import { FiArrowUp } from 'react-icons/fi';
-
-/**
- * 返回顶部按钮组件
- *
- * 功能：
- * - 滚动超过指定阈值时显示
- * - 点击平滑滚动到顶部
- * - 使用 RAF 节流优化性能
- *
- * 优化：
- * - ✅ 使用 requestAnimationFrame 节流滚动事件
- * - ✅ 使用 useCallback 缓存回调函数
- * - ✅ 使用 passive: true 优化滚动性能
- * - ✅ 响应式设计（移动端/桌面端）
- *
- * @param {number} scrollThreshold - 显示按钮的滚动阈值（默认 300px）
- * @param {object} position - 按钮位置配置
- * @param {number} zIndex - 按钮 z-index
- */
-const BackToTopButton = memo(({
-    scrollThreshold = 300,
-    position = { bottom: '80px', right: { base: '16px', md: '32px' } },
-    zIndex = 1000
-}) => {
-    const [show, setShow] = useState(false);
-    const rafRef = useRef(null);
-    const isScrollingRef = useRef(false);
-
-    useEffect(() => {
-        // 使用 requestAnimationFrame 节流滚动事件
-        // 性能提升约 80%，避免频繁触发状态更新
-        const handleScroll = () => {
-            if (isScrollingRef.current) return;
-
-            isScrollingRef.current = true;
-            rafRef.current = requestAnimationFrame(() => {
-                const shouldShow = window.scrollY > scrollThreshold;
-                setShow(shouldShow);
-                isScrollingRef.current = false;
-            });
-        };
-
-        // 使用 passive: true 优化滚动性能
-        // 告诉浏览器不会调用 preventDefault()，允许浏览器优化滚动
-        window.addEventListener('scroll', handleScroll, { passive: true });
-
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-            if (rafRef.current) {
-                cancelAnimationFrame(rafRef.current);
-            }
-        };
-    }, [scrollThreshold]);
-
-    // 使用 useCallback 缓存回调函数，避免每次渲染创建新函数
-    const scrollToTop = useCallback(() => {
-        window.scrollTo({
-            top: 0,
-            behavior: 'smooth'
-        });
-    }, []);
-
-    // 不显示时返回 null，避免渲染不必要的 DOM
-    if (!show) return null;
-
-    return (
-        <IconButton
-            icon={<FiArrowUp />}
-            position="fixed"
-            bottom={position.bottom}
-            right={position.right}
-            size="lg"
-            colorScheme="blue"
-            borderRadius="full"
-            boxShadow="lg"
-            onClick={scrollToTop}
-            zIndex={zIndex}
-            aria-label="返回顶部"
-            _hover={{
-                transform: 'translateY(-4px)',
-                boxShadow: 'xl'
-            }}
-            transition="all 0.2s"
-        />
-    );
-});
-
-BackToTopButton.displayName = 'BackToTopButton';
-
-export default BackToTopButton;

src/layouts/config/layoutConfig.js

@@ -1,144 +0,0 @@
-// src/layouts/config/layoutConfig.js
-/**
- * 布局配置文件
- * 集中管理所有布局相关的配置常量
- *
- * 优势：
- * - 配置集中，易于维护和调整
- * - 避免魔法数字分散在代码中
- * - 支持主题切换和自定义
- */
-
-/**
- * Z-Index 层级管理
- * 统一管理 z-index，避免层级冲突
- */
-export const Z_INDEX = {
-    BACK_TO_TOP: 1000,      // 返回顶部按钮
-    NAVBAR: 1100,           // 导航栏
-    MODAL: 1200,            // 模态框
-    TOAST: 1300,            // 提示消息
-    TOOLTIP: 1400,          // 工具提示
-};
-
-/**
- * 页面过渡动画配置
- * 控制页面切换时的动画效果
- */
-export const ANIMATION_CONFIG = {
-    // 默认配置：淡入淡出 + 轻微上下移动
-    default: {
-        initial: { opacity: 0, y: 20 },
-        animate: { opacity: 1, y: 0 },
-        exit: { opacity: 0, y: -20 },
-        transition: { duration: 0.2 }
-    },
-
-    // 快速配置：更短的动画时间
-    fast: {
-        initial: { opacity: 0, y: 10 },
-        animate: { opacity: 1, y: 0 },
-        exit: { opacity: 0, y: -10 },
-        transition: { duration: 0.1 }
-    },
-
-    // 慢速配置：更长的动画时间，更柔和
-    slow: {
-        initial: { opacity: 0, y: 30 },
-        animate: { opacity: 1, y: 0 },
-        exit: { opacity: 0, y: -30 },
-        transition: { duration: 0.4 }
-    },
-
-    // 无动画：用于禁用动画的场景
-    none: {
-        initial: { opacity: 1, y: 0 },
-        animate: { opacity: 1, y: 0 },
-        exit: { opacity: 1, y: 0 },
-        transition: { duration: 0 }
-    },
-
-    // 滑动配置：从右侧滑入
-    slideRight: {
-        initial: { opacity: 0, x: 100 },
-        animate: { opacity: 1, x: 0 },
-        exit: { opacity: 0, x: -100 },
-        transition: { duration: 0.3 }
-    }
-};
-
-/**
- * 返回顶部按钮配置
- */
-export const BACK_TO_TOP_CONFIG = {
-    // 显示按钮的滚动阈值（px）
-    scrollThreshold: 300,
-
-    // 按钮位置
-    position: {
-        bottom: '80px',
-        right: {
-            base: '16px',   // 移动端：右边距 16px
-            md: '32px'      // 桌面端：右边距 32px
-        }
-    },
-
-    // 按钮样式
-    style: {
-        size: 'lg',
-        colorScheme: 'blue',
-        borderRadius: 'full',
-        boxShadow: 'lg'
-    },
-
-    // 悬停效果
-    hover: {
-        transform: 'translateY(-4px)',
-        boxShadow: 'xl'
-    },
-
-    // z-index
-    zIndex: Z_INDEX.BACK_TO_TOP,
-
-    // 过渡时间
-    transition: 'all 0.2s'
-};
-
-/**
- * 页面加载器配置
- */
-export const PAGE_LOADER_CONFIG = {
-    defaultMessage: '页面加载中...',
-    minDisplayTime: 300,  // 最小显示时间（ms），避免闪烁
-};
-
-/**
- * 布局尺寸配置
- */
-export const LAYOUT_SIZE = {
-    navbarHeight: '80px',
-    footerHeight: 'auto',
-    contentMinHeight: 'calc(100vh - 80px)',  // 100vh - navbar高度
-};
-
-/**
- * 响应式断点
- * 与 Chakra UI 断点保持一致
- */
-export const BREAKPOINTS = {
-    base: '0px',     // 0-479px
-    sm: '480px',     // 480-767px
-    md: '768px',     // 768-991px
-    lg: '992px',     // 992-1279px
-    xl: '1280px',    // 1280-1535px
-    '2xl': '1536px'  // 1536px+
-};
-
-export default {
-    Z_INDEX,
-    ANIMATION_CONFIG,
-    BACK_TO_TOP_CONFIG,
-    PAGE_LOADER_CONFIG,
-    LAYOUT_SIZE,
-    BREAKPOINTS
-};

src/lib/posthog.js

@@ -1,21 +1,11 @@
 // src/lib/posthog.js
 import posthog from 'posthog-js';
 
-// 初始化状态管理（防止重复初始化）
-let isInitializing = false;
-let isInitialized = false;
-
 /**
  * Initialize PostHog SDK
  * Should be called once when the app starts
  */
 export const initPostHog = () => {
-  // 防止重复初始化
-  if (isInitializing || isInitialized) {
-    console.log('📊 PostHog 已初始化或正在初始化中，跳过重复调用');
-    return;
-  }
-
   // Only run in browser environment
   if (typeof window === 'undefined') return;
 
@@ -27,8 +17,6 @@ export const initPostHog = () => {
     return;
   }
 
-  isInitializing = true;
-
   try {
     posthog.init(apiKey, {
       api_host: apiHost,
@@ -97,17 +85,9 @@ export const initPostHog = () => {
       },
     });
 
-    isInitialized = true;
     console.log('📊 PostHog Analytics initialized');
   } catch (error) {
-    // 忽略 AbortError（通常由热重载或快速导航引起）
-    if (error.name === 'AbortError') {
-      console.log('⚠️ PostHog 初始化请求被中断（可能是热重载），这是正常的');
-      return;
-    }
     console.error('❌ PostHog initialization failed:', error);
-  } finally {
-    isInitializing = false;
   }
 };