vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: vf:origin_production/fixed_1107
Branches Tags
vf:main vf:feature_bugfix/251217_stock vf:feature_2025/251209_stock_pref vf:feature_bugfix/251201_py_h5_ui vf:feature_bugfix/251201_vf_h5_ui vf:feature_2025/251201_log vf:feature_2025/251117_pref vf:origin_production/1201_statel_h5_ui vf:feature_2025/251121_h5UI vf:feature_2025/251118_log vf:feature_bugfix/251113_ui vf:origin_production/251118_stable_ui vf:feature_bugfix/251113_bugfix vf:origin_production/251113_stable_event_customer vf:feature_bugfix/251112_app vf:feature_bugfix/251110_event vf:feature_bugfix/251111_event vf:feature_2025/251111_addlog vf:origin_production/251111_stable_notice vf:feature_bugfix/251104_event vf:origin_production/fixed_1107 vf:origin_production/fixed_1105 vf:feature_2025/1028_event vf:feature vf:develop vf:feature_2025/251029_legal_notice vf:feature_2025/1028_bugfix vf:feature_2025/1028_log vf:feature_log/251029_serve_config
vf:before-recovery-20251125
..
compare: vf:feature_2025/1028_bugfix
Branches Tags
vf:feature_bugfix/251217_stock vf:feature_2025/251209_stock_pref vf:feature_bugfix/251201_py_h5_ui vf:feature_bugfix/251201_vf_h5_ui vf:feature_2025/251201_log vf:feature_2025/251117_pref vf:origin_production/1201_statel_h5_ui vf:feature_2025/251121_h5UI vf:feature_2025/251118_log vf:feature_bugfix/251113_ui vf:origin_production/251118_stable_ui vf:feature_bugfix/251113_bugfix vf:origin_production/251113_stable_event_customer vf:feature_bugfix/251112_app vf:feature_bugfix/251110_event vf:feature_bugfix/251111_event vf:feature_2025/251111_addlog vf:origin_production/251111_stable_notice vf:feature_bugfix/251104_event vf:origin_production/fixed_1107 vf:origin_production/fixed_1105 vf:feature_2025/1028_event vf:feature vf:develop vf:feature_2025/251029_legal_notice vf:feature_2025/1028_bugfix vf:feature_2025/1028_log vf:feature_log/251029_serve_config vf:main
vf:before-recovery-20251125

1 Commits
origin_pro ... feature_20

Author SHA1 Message Date
zdl
b2380c420c Merge branch '1028_bugfix' into feature_2025/1028_bugfix 
* 1028_bugfix:
  手机号格式适配-前端修改
  添加微信扫码的几种其他状态
  整合register端口进入login端口
 2025-10-29 16:26:02 +08:00
275 changed files with 9105 additions and 34473 deletions
Expand all files Collapse all files

19
.claude/settings.local.json Normal file
View File

@@ -0,0 +1,19 @@
{
"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:*)"
],
"deny": [],
"ask": []
}
}

9
.env.development
View File

@@ -1,5 +1,5 @@
# 开发环境配置（连接真实后端）
# 使用方式: npm run start:dev
# 使用方式: npm start
# React 构建优化配置
GENERATE_SOURCEMAP=false
@@ -18,10 +18,3 @@ REACT_APP_ENABLE_MOCK=false
# 开发环境标识
REACT_APP_ENV=development
# PostHog 配置（开发环境）
# 留空 = 仅控制台 debug
# 填入 Key = 控制台 + PostHog Cloud 双模式
REACT_APP_POSTHOG_KEY=
REACT_APP_POSTHOG_HOST=https://app.posthog.com
REACT_APP_ENABLE_SESSION_RECORDING=false

11
.env.mock
View File

@@ -35,14 +35,3 @@ REACT_APP_ENABLE_MOCK=true
# Mock 环境标识
REACT_APP_ENV=mock
# PostHog 配置（Mock 环境）
# 留空 = 仅控制台 debug
# 填入 Key = 控制台 + PostHog Cloud 双模式
REACT_APP_POSTHOG_KEY=phc_xKlRyG69Bx7hgOdFeCeLUvQWvSjw18ZKFgCwCeYezWF
REACT_APP_POSTHOG_HOST=https://app.posthog.com
REACT_APP_ENABLE_SESSION_RECORDING=false
# PostHog Debug 模式（Mock 环境永久启用）
# 在浏览器 Console 中打印详细的事件追踪日志
REACT_APP_POSTHOG_DEBUG=true

42
.env.production
View File

@@ -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

42
.env.test
View File

@@ -1,42 +0,0 @@
# ========================================
# 本地测试环境（前后端都在本地）
# ========================================
# 使用方式: npm run start:test
#
# 工作原理：
# 1. concurrently 同时启动前端和后端
# 2. 前端: localhost:3000
# 3. 后端: localhost:5001 (python app_2.py)
# 4. 数据: 本地数据库
#
# 适用场景：
# - 调试后端代码
# - 性能测试
# - 离线开发
# - 数据库调试
# ========================================
# 环境标识
REACT_APP_ENV=test
NODE_ENV=development
# Mock 配置（关闭 MSW）
REACT_APP_ENABLE_MOCK=false
# 后端 API 地址（本地后端）
REACT_APP_API_URL=http://localhost:5001
# PostHog 配置（测试环境）
# 留空 = 仅控制台 debug
# 填入 Key = 控制台 + PostHog Cloud 双模式
REACT_APP_POSTHOG_KEY=
REACT_APP_POSTHOG_HOST=https://app.posthog.com
REACT_APP_ENABLE_SESSION_RECORDING=false
# React 构建优化配置
GENERATE_SOURCEMAP=true # 测试环境保留 sourcemap 便于调试
SKIP_PREFLIGHT_CHECK=true
DISABLE_ESLINT_PLUGIN=false # 测试环境开启 ESLint
TSC_COMPILE_ON_ERROR=true
IMAGE_INLINE_SIZE_LIMIT=10000
NODE_OPTIONS=--max_old_space_size=4096

4
.gitignore vendored
View File

@@ -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/

0
docs/API_DOCS_profile_completeness.md → API_DOCS_profile_completeness.md
View File

0
docs/API_ENDPOINTS.md → API_ENDPOINTS.md
View File

0
docs/AUTHENTICATION_SYSTEM_GUIDE.md → AUTHENTICATION_SYSTEM_GUIDE.md
View File

0
docs/AUTH_LOGIC_ANALYSIS.md → AUTH_LOGIC_ANALYSIS.md
View File

0
docs/BUILD_OPTIMIZATION.md → BUILD_OPTIMIZATION.md
View File

0
docs/CENTER_PAGE_FLOW_ANALYSIS.md → CENTER_PAGE_FLOW_ANALYSIS.md
View File

329
CLAUDE.md
View File

@@ -4,307 +4,88 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
## Project Overview
Hybrid React dashboard for financial/trading analysis with Flask backend. Built on Argon Dashboard Chakra PRO template.
This is a hybrid React dashboard application with a Flask/Python backend. The project is built on the Argon Dashboard Chakra PRO template and includes financial/trading analysis features.
### Tech Stack
### Frontend (React + Chakra UI)
- **Framework**: React 18.3.1 with Chakra UI 2.8.2
- **Styling**: Tailwind CSS + custom Chakra theme
- **Build Tool**: React Scripts with custom Gulp tasks
- **Charts**: ApexCharts, ECharts, and custom visualization components
**Frontend**
- React 18.3.1 + Chakra UI 2.8.2 + Ant Design
- Redux Toolkit for state management
- React Router v6 with React.lazy() code splitting
- CRACO build system with aggressive webpack optimization
- Charts: ApexCharts, ECharts, Recharts, D3
- Additional: Three.js, FullCalendar, Leaflet maps
**Backend**
- Flask + SQLAlchemy ORM
- ClickHouse (analytics) + MySQL/PostgreSQL (transactional)
- Flask-SocketIO for WebSocket real-time updates
- Celery + Redis for background jobs
- Tencent Cloud SMS + WeChat Pay integration
### Backend (Flask/Python)
- **Framework**: Flask with SQLAlchemy ORM
- **Database**: ClickHouse for analytics + MySQL/PostgreSQL
- **Features**: Real-time data processing, trading analysis, user authentication
- **Task Queue**: Celery for background processing
## Development Commands
### Frontend Development
```bash
npm start # Start with mock data (.env.mock), proxies to localhost:5001
npm run start:real # Start with real backend (.env.local)
npm run start:dev # Start with development config (.env.development)
npm run start:test # Starts both backend (app_2.py) and frontend (.env.test) concurrently
npm run dev # Alias for 'npm start'
npm run backend # Start Flask server only (python app_2.py)
npm run build # Production build with Gulp license headers
npm run build:analyze # Build with webpack bundle analyzer
npm test # Run React test suite with CRACO
npm run lint:check # Check ESLint rules (exits 0)
npm run lint:fix # Auto-fix ESLint issues
npm run clean # Remove node_modules and package-lock.json
npm run reinstall # Clean install (runs clean + install)
npm start # Start development server (port 3000, proxies to localhost:5001)
npm run build # Production build with license headers
npm test # Run React test suite
npm run lint:check # Check ESLint rules
npm run lint:fix # Auto-fix ESLint issues
npm run install:clean # Clean install (removes node_modules and package-lock)
```
### Backend Development
```bash
python app.py # Main Flask server
python simulation_background_processor.py # Background task processor for trading simulations
pip install -r requirements.txt # Install Python dependencies
python app_2.py # Start Flask server (main backend)
python simulation_background_processor.py # Background data processor
```
### Deployment
### Python Dependencies
Install from requirements.txt:
```bash
npm run deploy # Deploy from local (scripts/deploy-from-local.sh)
npm run rollback # Rollback to previous version
pip install -r requirements.txt
```
## Architecture
### Application Entry Flow
```
src/index.js
└── src/App.js (root component)
├── AppProviders (src/providers/AppProviders.js)
│ ├── ReduxProvider (store from src/store/)
│ ├── ChakraProvider (theme from src/theme/)
│ ├── NotificationProvider (src/contexts/NotificationContext.js)
│ └── AuthProvider (src/contexts/AuthContext.js)
├── AppRoutes (src/routes/index.js)
│ ├── MainLayout routes (with navbar/footer)
│ └── Standalone routes (auth pages, fullscreen views)
└── GlobalComponents (modal overlays, global UI)
```
### Routing Architecture (Modular Design)
Routing is **declarative** and split across multiple files in `src/routes/`:
- **index.js** - Main router (combines config + renders routes)
- **routeConfig.js** - Route definitions (path, component, protection, layout, children)
- **lazy-components.js** - React.lazy() imports for code splitting
- **homeRoutes.js** - Nested home page routes
- **constants/** - Protection modes, layout mappings
- **utils/** - Route rendering logic (wrapWithProtection, renderRoute)
Route protection modes (PROTECTION_MODES):
- `PUBLIC` - No authentication required
- `MODAL` - Shows auth modal if not logged in
- `REDIRECT` - Redirects to /auth/sign-in if not logged in
### Frontend Directory Structure
```
src/
├── App.js - Root component (providers + routing)
├── providers/ - Provider composition (AppProviders.js)
├── routes/ - Modular routing system (see above)
├── layouts/ - Page layouts (MainLayout, Auth)
├── views/ - Page components (Community, TradingSimulation, etc.)
├── components/ - Reusable UI components
├── contexts/ - React contexts (Auth, Notification, Sidebar)
├── store/ - Redux store + slices (auth, posthog, stock, industry, etc.)
├── services/ - API layer (axios wrappers)
├── utils/ - Utility functions (apiConfig, priceFormatters, logger)
├── constants/ - App constants (animations, etc.)
├── hooks/ - Custom React hooks
├── theme/ - Chakra UI theme customization
└── mocks/ - MSW handlers for development
├── handlers/ - Request handlers by domain (auth, stock, company, etc.)
├── data/ - Mock data files
└── browser.js - MSW setup (starts when REACT_APP_ENABLE_MOCK=true)
```
### Frontend Structure
- `src/layouts/` - Main layout components (Admin, Auth, Home)
- `src/views/` - Page components organized by feature (Dashboard, Company, Community, etc.)
- `src/components/` - Reusable UI components (Charts, Cards, Buttons, etc.)
- `src/theme/` - Chakra UI theme customization
- `src/routes.js` - Application routing configuration
- `src/contexts/` - React context providers
- `src/services/` - API service layer
### Backend Structure
```
app.py - Flask server (routes, auth, business logic)
simulation_background_processor.py - Celery worker for trading simulations
concept_api.py - Concept/industry analysis API
wechat_pay.py / wechat_pay_config.py - WeChat payment integration
tdays.csv - Trading days calendar (loaded at startup)
requirements.txt - Python dependencies
```
- `app_2.py` - Main Flask application with routes and business logic
- `simulation_background_processor.py` - Background data processing service
- `wechat_pay.py` / `wechat_pay_config.py` - Payment integration
- `tdays.csv` - Trading days data
### State Management Strategy
- **Redux Toolkit**: Global state (auth modal, posthog, stock data, industry data, subscriptions, community data)
- **React Context**: Cross-cutting concerns (AuthContext, NotificationContext, SidebarContext)
- **Component State**: Local UI state (forms, toggles, etc.)
### Real-time Updates
- Flask-SocketIO for WebSocket connections
- Example: Community event notifications push via WebSocket
- Client: `socket.io-client` library
### Key Integrations
- ClickHouse for high-performance analytics queries
- Celery + Redis for background task processing
- Flask-SocketIO for real-time data updates
- Tencent Cloud services (SMS, etc.)
- WeChat Pay integration
## Configuration
### Proxy Setup
The React dev server proxies API calls to `http://localhost:5001` (see package.json).
### Environment Files
```
.env.mock - Mock mode (default): MSW intercepts all API calls, no backend needed
.env.development - Dev mode: Connects to dev backend
.env.test - Test mode: Used by 'npm run start:test' (backend + frontend together)
.env.production - Production build config
```
**Key environment variables:**
- `REACT_APP_ENABLE_MOCK=true` - Enable MSW mocking
- `REACT_APP_API_URL` - Backend URL (empty string = use relative paths or MSW)
### MSW (Mock Service Worker) Setup
MSW is used for API mocking during development:
1. **Activation**: Set `REACT_APP_ENABLE_MOCK=true` in env file
2. **Worker file**: `public/mockServiceWorker.js` (auto-generated)
3. **Handlers**: `src/mocks/handlers/` (organized by domain: auth, stock, company, etc.)
4. **Mode**: `onUnhandledRequest: 'warn'` - unhandled requests pass through to backend
When MSW is active, the dev server proxy is disabled (MSW intercepts first).
### Path Aliases (craco.config.js)
All aliases resolve to `src/` subdirectories:
```
@/ → src/
@components/ → src/components/
@views/ → src/views/
@assets/ → src/assets/
@contexts/ → src/contexts/
@layouts/ → src/layouts/
@services/ → src/services/
@store/ → src/store/
@utils/ → src/utils/
@hooks/ → src/hooks/
@theme/ → src/theme/
@mocks/ → src/mocks/
@constants/ → src/constants/
```
### Webpack Optimizations (craco.config.js)
**Performance features:**
- Filesystem cache (50-80% rebuild speedup)
- Aggressive code splitting by library:
- `react-vendor` - React core (priority 30)
- `charts-lib` - echarts, d3, apexcharts, recharts (priority 25)
- `chakra-ui` - Chakra UI + Emotion (priority 23)
- `antd-lib` - Ant Design (priority 22)
- `three-lib` - Three.js (priority 20)
- `calendar-lib` - moment, date-fns, FullCalendar (priority 18)
- ESLint plugin removed from build (20-30% speedup)
- Babel caching enabled
- moment locale stripping (IgnorePlugin)
- Source maps: disabled in production, `eval-cheap-module-source-map` in dev
**Dev server:**
- Port 3000 (kills existing process on prestart)
- Proxy (when MSW disabled): `/api` → `http://49.232.185.254:5001`
- Bundle analyzer: `ANALYZE=true npm run build:analyze`
- `.env` - Environment variables for both frontend and backend
### Build Process
1. `npm run build` compiles with CRACO + webpack optimizations
2. Gulp task (`gulp licenses`) adds Creative Tim license headers to JS/HTML
3. Output: `build/` directory
The build process includes custom Gulp tasks that add Creative Tim license headers to JS, CSS, and HTML files.
**Node compatibility:**
```bash
NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096'
```
### Styling Architecture
- Tailwind CSS for utility classes
- Custom Chakra UI theme with extended color palette
- Component-specific SCSS files in `src/assets/scss/`
## Development Workflow
## Testing
- React Testing Library setup for frontend components
- Test command: `npm test`
### Working with Routes
To add a new route:
1. Add lazy import in `src/routes/lazy-components.js`
2. Add route config in `src/routes/routeConfig.js` with:
- `path` - URL path
- `component` - From lazyComponents
- `protection` - MODAL/REDIRECT/PUBLIC
- `layout` - 'main' (with nav) or 'none' (fullscreen)
3. Routes automatically render with Suspense + ErrorBoundary (handled by PageTransitionWrapper)
### Component Organization Patterns
Based on recent refactoring (see README.md for details):
**Atomic Design Pattern:**
- **Atoms** - Basic UI elements (buttons, badges, inputs)
- **Molecules** - Combinations of atoms (cards, forms)
- **Organisms** - Complex components (lists, panels)
**Example structure for large components (1000+ lines):**
```
src/views/Community/components/
├── EventCard/
│ ├── index.js - Smart wrapper (routes compact vs detailed)
│ ├── CompactEventCard.js - Compact view
│ ├── DetailedEventCard.js - Detailed view
│ ├── EventTimeline.js - Atomic component
│ ├── EventImportanceBadge.js - Atomic component
│ └── ...
```
**Utility extraction:**
- Extract reusable logic to `src/utils/` (e.g., `priceFormatters.js`)
- Extract shared constants to `src/constants/` (e.g., `animations.js`)
### API Integration
**Service layer** (`src/services/`):
- Use `getApiBase()` from `src/utils/apiConfig.js` for base URL
- Example: `${getApiBase()}/api/endpoint`
- In mock mode, MSW intercepts; in dev/prod, hits backend
**Adding new API endpoints:**
1. Add service function in `src/services/` (or inline in component)
2. If using MSW: Add handler in `src/mocks/handlers/{domain}.js`
3. Import handler in `src/mocks/handlers/index.js`
### Redux State Management
**Existing slices** (`src/store/slices/`):
- `authModalSlice` - Auth modal state
- `posthogSlice` - PostHog analytics
- `stockSlice` - Stock data
- `industrySlice` - Industry/concept data
- `subscriptionSlice` - User subscriptions
- `communityDataSlice` - Community content
**Adding new slice:**
1. Create `src/store/slices/yourSlice.js`
2. Import and add to `src/store/index.js`
3. Access via `useSelector`, dispatch via `useDispatch`
## Backend Architecture
### Flask Application (app.py)
- **Authentication**: Flask-Login + session management
- **Database**: SQLAlchemy models + ClickHouse client
- **Background jobs**: Celery tasks for async processing
- **Real-time**: Flask-SocketIO for WebSocket events
- **Trading days**: `tdays.csv` loaded into memory at startup (global `trading_days` variable)
### Key Backend Patterns
- **ClickHouse**: Used for high-volume analytics queries (stock data, time series)
- **MySQL/PostgreSQL**: Used for transactional data (users, orders, subscriptions)
- **Celery**: Background processor runs in separate process (`simulation_background_processor.py`)
- **CORS**: Enabled for frontend communication
### API Proxy Configuration
When not in mock mode, frontend proxies to backend:
- `/api` → `http://49.232.185.254:5001` (main API)
- `/concept-api` → `http://49.232.185.254:6801` (concept analysis API)
## Important Notes
### Code Splitting Strategy
Heavy pages are lazy-loaded to reduce initial bundle size:
- Community, TradingSimulation, Company pages use `React.lazy()`
- Webpack splits large libraries into separate chunks
- Check bundle size with `npm run build:analyze`
### Error Boundaries
- **Layout-level**: Each layout (MainLayout, Auth) has its own ErrorBoundary
- **Page-level**: PageTransitionWrapper wraps each route with ErrorBoundary
- **Strategy**: Errors are isolated to prevent entire app crashes
### PostHog Analytics
- Initialized in Redux (`posthogSlice`)
- Configured during app startup in `App.js`
- Used for user behavior tracking
### Performance Considerations
- **Large components**: If component exceeds ~500 lines, consider refactoring (see README.md)
- **Re-renders**: Use `React.memo`, `useMemo`, `useCallback` for expensive operations
- **Bundle size**: Monitor with webpack-bundle-analyzer
- **Caching**: Webpack filesystem cache speeds up rebuilds significantly
## Deployment
- Build: `npm run build`
- Deploy: `npm run deploy` (builds the project)

0
docs/CRASH_FIX_REPORT.md → CRASH_FIX_REPORT.md
View File

0
docs/DARK_MODE_TEST.md → DARK_MODE_TEST.md
View File

0
docs/ENHANCED_FEATURES_GUIDE.md → ENHANCED_FEATURES_GUIDE.md
View File

0
docs/ERROR_FIX_REPORT.md → ERROR_FIX_REPORT.md
View File

0
docs/FIX_SUMMARY.md → FIX_SUMMARY.md
View File

0
docs/HOMEPAGE_FIX.md → HOMEPAGE_FIX.md
View File

0
docs/IMAGE_OPTIMIZATION_REPORT.md → IMAGE_OPTIMIZATION_REPORT.md
View File

0
docs/LOGIN_MODAL_REFACTOR_PLAN.md → LOGIN_MODAL_REFACTOR_PLAN.md
View File

0
docs/LOGIN_MODAL_REFACTOR_SUMMARY.md → LOGIN_MODAL_REFACTOR_SUMMARY.md
View File

0
docs/MESSAGE_PUSH_INTEGRATION_TEST.md → MESSAGE_PUSH_INTEGRATION_TEST.md
View File

0
docs/MOCK_DATA_CENTER_SUPPLEMENT.md → MOCK_DATA_CENTER_SUPPLEMENT.md
View File

0
docs/MOCK_GUIDE.md → MOCK_GUIDE.md
View File

0
docs/NOTIFICATION_OPTIMIZATION_SUMMARY.md → NOTIFICATION_OPTIMIZATION_SUMMARY.md
View File

0
docs/NOTIFICATION_SYSTEM.md → NOTIFICATION_SYSTEM.md
View File

0
docs/OPTIMIZATION_RESULTS.md → OPTIMIZATION_RESULTS.md
View File

0
docs/PERFORMANCE_ANALYSIS.md → PERFORMANCE_ANALYSIS.md
View File

0
docs/PERFORMANCE_TEST_RESULTS.md → PERFORMANCE_TEST_RESULTS.md
View File

197
README.md
View File

@@ -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): 使用组件化架构替换内联渲染函数`
---
前端

0
docs/TEST_GUIDE.md → TEST_GUIDE.md
View File

0
docs/TEST_RESULTS.md → TEST_RESULTS.md
View File

0
docs/WEBSOCKET_INTEGRATION_GUIDE.md → WEBSOCKET_INTEGRATION_GUIDE.md
View File

BIN
__pycache__/app.cpython-310.pyc
View File

Binary file not shown.

547
app.py
View File

@@ -706,38 +706,11 @@ class SubscriptionPlan(db.Model):
monthly_price = db.Column(db.Numeric(10, 2), nullable=False)
yearly_price = db.Column(db.Numeric(10, 2), nullable=False)
features = db.Column(db.Text, nullable=True)
pricing_options = db.Column(db.Text, nullable=True) # JSON格式：[{"months": 1, "price": 99}, {"months": 12, "price": 999}]
is_active = db.Column(db.Boolean, default=True)
sort_order = db.Column(db.Integer, default=0)
created_at = db.Column(db.DateTime, default=beijing_now)
def to_dict(self):
# 解析pricing_options（如果存在）
pricing_opts = None
if self.pricing_options:
try:
pricing_opts = json.loads(self.pricing_options)
except:
pricing_opts = None
# 如果没有pricing_options，则从monthly_price和yearly_price生成默认选项
if not pricing_opts:
pricing_opts = [
{
'months': 1,
'price': float(self.monthly_price) if self.monthly_price else 0,
'label': '月付',
'cycle_key': 'monthly'
},
{
'months': 12,
'price': float(self.yearly_price) if self.yearly_price else 0,
'label': '年付',
'cycle_key': 'yearly',
'discount_percent': 20 # 年付默认20%折扣
}
]
return {
'id': self.id,
'name': self.name,
@@ -745,7 +718,6 @@ class SubscriptionPlan(db.Model):
'description': self.description,
'monthly_price': float(self.monthly_price) if self.monthly_price else 0,
'yearly_price': float(self.yearly_price) if self.yearly_price else 0,
'pricing_options': pricing_opts, # 新增：灵活计费周期选项
'features': json.loads(self.features) if self.features else [],
'is_active': self.is_active,
'sort_order': self.sort_order
@@ -804,10 +776,6 @@ class PaymentOrder(db.Model):
'plan_name': self.plan_name,
'billing_cycle': self.billing_cycle,
'amount': float(self.amount) if self.amount else 0,
'original_amount': float(self.original_amount) if hasattr(self, 'original_amount') and self.original_amount else None,
'discount_amount': float(self.discount_amount) if hasattr(self, 'discount_amount') and self.discount_amount else 0,
'promo_code': self.promo_code.code if hasattr(self, 'promo_code') and self.promo_code else None,
'is_upgrade': self.is_upgrade if hasattr(self, 'is_upgrade') else False,
'qr_code_url': self.qr_code_url,
'status': self.status,
'is_expired': self.is_expired(),
@@ -818,107 +786,6 @@ class PaymentOrder(db.Model):
}
class PromoCode(db.Model):
"""优惠码表"""
__tablename__ = 'promo_codes'
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
code = db.Column(db.String(50), unique=True, nullable=False, index=True)
description = db.Column(db.String(200), nullable=True)
# 折扣类型和值
discount_type = db.Column(db.String(20), nullable=False) # 'percentage' 或 'fixed_amount'
discount_value = db.Column(db.Numeric(10, 2), nullable=False)
# 适用范围
applicable_plans = db.Column(db.String(200), nullable=True) # JSON格式
applicable_cycles = db.Column(db.String(50), nullable=True) # JSON格式
min_amount = db.Column(db.Numeric(10, 2), nullable=True)
# 使用限制
max_uses = db.Column(db.Integer, nullable=True)
max_uses_per_user = db.Column(db.Integer, default=1)
current_uses = db.Column(db.Integer, default=0)
# 有效期
valid_from = db.Column(db.DateTime, nullable=False)
valid_until = db.Column(db.DateTime, nullable=False)
# 状态
is_active = db.Column(db.Boolean, default=True)
created_by = db.Column(db.Integer, nullable=True)
created_at = db.Column(db.DateTime, default=beijing_now)
updated_at = db.Column(db.DateTime, default=beijing_now, onupdate=beijing_now)
def to_dict(self):
return {
'id': self.id,
'code': self.code,
'description': self.description,
'discount_type': self.discount_type,
'discount_value': float(self.discount_value) if self.discount_value else 0,
'applicable_plans': json.loads(self.applicable_plans) if self.applicable_plans else None,
'applicable_cycles': json.loads(self.applicable_cycles) if self.applicable_cycles else None,
'min_amount': float(self.min_amount) if self.min_amount else None,
'max_uses': self.max_uses,
'max_uses_per_user': self.max_uses_per_user,
'current_uses': self.current_uses,
'valid_from': self.valid_from.isoformat() if self.valid_from else None,
'valid_until': self.valid_until.isoformat() if self.valid_until else None,
'is_active': self.is_active
}
class PromoCodeUsage(db.Model):
"""优惠码使用记录表"""
__tablename__ = 'promo_code_usage'
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
promo_code_id = db.Column(db.Integer, db.ForeignKey('promo_codes.id'), nullable=False)
user_id = db.Column(db.Integer, nullable=False, index=True)
order_id = db.Column(db.Integer, db.ForeignKey('payment_orders.id'), nullable=False)
original_amount = db.Column(db.Numeric(10, 2), nullable=False)
discount_amount = db.Column(db.Numeric(10, 2), nullable=False)
final_amount = db.Column(db.Numeric(10, 2), nullable=False)
used_at = db.Column(db.DateTime, default=beijing_now)
# 关系
promo_code = db.relationship('PromoCode', backref='usages')
order = db.relationship('PaymentOrder', backref='promo_usage')
class SubscriptionUpgrade(db.Model):
"""订阅升级/降级记录表"""
__tablename__ = 'subscription_upgrades'
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
user_id = db.Column(db.Integer, nullable=False, index=True)
order_id = db.Column(db.Integer, db.ForeignKey('payment_orders.id'), nullable=False)
# 原订阅信息
from_plan = db.Column(db.String(20), nullable=False)
from_cycle = db.Column(db.String(10), nullable=False)
from_end_date = db.Column(db.DateTime, nullable=True)
# 新订阅信息
to_plan = db.Column(db.String(20), nullable=False)
to_cycle = db.Column(db.String(10), nullable=False)
to_end_date = db.Column(db.DateTime, nullable=False)
# 价格计算
remaining_value = db.Column(db.Numeric(10, 2), nullable=False)
upgrade_amount = db.Column(db.Numeric(10, 2), nullable=False)
actual_amount = db.Column(db.Numeric(10, 2), nullable=False)
upgrade_type = db.Column(db.String(20), nullable=False) # 'plan_upgrade', 'cycle_change', 'both'
created_at = db.Column(db.DateTime, default=beijing_now)
# 关系
order = db.relationship('PaymentOrder', backref='upgrade_record')
# ============================================
# 模拟盘相关模型
# ============================================
@@ -1115,15 +982,8 @@ def get_user_subscription_safe(user_id):
return DefaultSub()
def activate_user_subscription(user_id, plan_type, billing_cycle, extend_from_now=False):
"""激活用户订阅
Args:
user_id: 用户ID
plan_type: 套餐类型
billing_cycle: 计费周期
extend_from_now: 是否从当前时间开始延长（用于升级场景）
"""
def activate_user_subscription(user_id, plan_type, billing_cycle):
"""激活用户订阅"""
try:
subscription = UserSubscription.query.filter_by(user_id=user_id).first()
if not subscription:
@@ -1133,9 +993,7 @@ def activate_user_subscription(user_id, plan_type, billing_cycle, extend_from_no
subscription.subscription_type = plan_type
subscription.subscription_status = 'active'
subscription.billing_cycle = billing_cycle
if not extend_from_now or not subscription.start_date:
subscription.start_date = beijing_now()
subscription.start_date = beijing_now()
if billing_cycle == 'monthly':
subscription.end_date = beijing_now() + timedelta(days=30)
@@ -1149,195 +1007,6 @@ def activate_user_subscription(user_id, plan_type, billing_cycle, extend_from_no
return None
def validate_promo_code(code, plan_name, billing_cycle, amount, user_id):
"""验证优惠码
Returns:
tuple: (promo_code_obj, error_message)
"""
try:
promo = PromoCode.query.filter_by(code=code.upper(), is_active=True).first()
if not promo:
return None, "优惠码不存在或已失效"
# 检查有效期
now = beijing_now()
if now < promo.valid_from:
return None, "优惠码尚未生效"
if now > promo.valid_until:
return None, "优惠码已过期"
# 检查使用次数
if promo.max_uses and promo.current_uses >= promo.max_uses:
return None, "优惠码已被使用完"
# 检查每用户使用次数
if promo.max_uses_per_user:
user_usage_count = PromoCodeUsage.query.filter_by(
promo_code_id=promo.id,
user_id=user_id
).count()
if user_usage_count >= promo.max_uses_per_user:
return None, f"您已使用过此优惠码（限用{promo.max_uses_per_user}次）"
# 检查适用套餐
if promo.applicable_plans:
try:
applicable = json.loads(promo.applicable_plans)
if plan_name not in applicable:
return None, "该优惠码不适用于此套餐"
except:
pass
# 检查适用周期
if promo.applicable_cycles:
try:
applicable = json.loads(promo.applicable_cycles)
if billing_cycle not in applicable:
return None, "该优惠码不适用于此计费周期"
except:
pass
# 检查最低消费
if promo.min_amount and amount < float(promo.min_amount):
return None, f"需满{float(promo.min_amount):.2f}元才可使用此优惠码"
return promo, None
except Exception as e:
return None, f"验证优惠码时出错: {str(e)}"
def calculate_discount(promo_code, amount):
"""计算优惠金额"""
try:
if promo_code.discount_type == 'percentage':
discount = amount * (float(promo_code.discount_value) / 100)
else: # fixed_amount
discount = float(promo_code.discount_value)
# 确保折扣不超过总金额
return min(discount, amount)
except:
return 0
def calculate_remaining_value(subscription, current_plan):
"""计算当前订阅的剩余价值"""
try:
if not subscription or not subscription.end_date:
return 0
now = beijing_now()
if subscription.end_date <= now:
return 0
days_left = (subscription.end_date - now).days
if subscription.billing_cycle == 'monthly':
daily_value = float(current_plan.monthly_price) / 30
else: # yearly
daily_value = float(current_plan.yearly_price) / 365
return daily_value * days_left
except:
return 0
def calculate_upgrade_price(user_id, to_plan_name, to_cycle, promo_code=None):
"""计算升级所需价格
Returns:
dict: 包含价格计算结果的字典
"""
try:
# 1. 获取当前订阅
current_sub = UserSubscription.query.filter_by(user_id=user_id).first()
# 2. 获取目标套餐
to_plan = SubscriptionPlan.query.filter_by(name=to_plan_name, is_active=True).first()
if not to_plan:
return {'error': '目标套餐不存在'}
# 3. 计算目标套餐价格
new_price = float(to_plan.yearly_price if to_cycle == 'yearly' else to_plan.monthly_price)
# 4. 如果是新订阅（非升级）
if not current_sub or current_sub.subscription_type == 'free':
result = {
'is_upgrade': False,
'new_plan_price': new_price,
'remaining_value': 0,
'upgrade_amount': new_price,
'original_amount': new_price,
'discount_amount': 0,
'final_amount': new_price,
'promo_code': None
}
# 应用优惠码
if promo_code:
promo, error = validate_promo_code(promo_code, to_plan_name, to_cycle, new_price, user_id)
if promo:
discount = calculate_discount(promo, new_price)
result['discount_amount'] = discount
result['final_amount'] = new_price - discount
result['promo_code'] = promo.code
elif error:
result['promo_error'] = error
return result
# 5. 升级场景：计算剩余价值
current_plan = SubscriptionPlan.query.filter_by(name=current_sub.subscription_type, is_active=True).first()
if not current_plan:
return {'error': '当前套餐信息不存在'}
remaining_value = calculate_remaining_value(current_sub, current_plan)
# 6. 计算升级差价
upgrade_amount = max(0, new_price - remaining_value)
# 7. 判断升级类型
upgrade_type = 'new'
if current_sub.subscription_type != to_plan_name and current_sub.billing_cycle != to_cycle:
upgrade_type = 'both'
elif current_sub.subscription_type != to_plan_name:
upgrade_type = 'plan_upgrade'
elif current_sub.billing_cycle != to_cycle:
upgrade_type = 'cycle_change'
result = {
'is_upgrade': True,
'upgrade_type': upgrade_type,
'current_plan': current_sub.subscription_type,
'current_cycle': current_sub.billing_cycle,
'current_end_date': current_sub.end_date.isoformat() if current_sub.end_date else None,
'new_plan_price': new_price,
'remaining_value': remaining_value,
'upgrade_amount': upgrade_amount,
'original_amount': upgrade_amount,
'discount_amount': 0,
'final_amount': upgrade_amount,
'promo_code': None
}
# 8. 应用优惠码
if promo_code and upgrade_amount > 0:
promo, error = validate_promo_code(promo_code, to_plan_name, to_cycle, upgrade_amount, user_id)
if promo:
discount = calculate_discount(promo, upgrade_amount)
result['discount_amount'] = discount
result['final_amount'] = upgrade_amount - discount
result['promo_code'] = promo.code
elif error:
result['promo_error'] = error
return result
except Exception as e:
return {'error': str(e)}
def initialize_subscription_plans_safe():
"""安全地初始化订阅套餐"""
try:
@@ -1443,24 +1112,16 @@ def get_subscription_plans():
'data': [plan.to_dict() for plan in plans]
})
except Exception as e:
# 返回默认套餐（包含pricing_options以兼容新前端）
# 返回默认套餐
default_plans = [
{
'id': 1,
'name': 'pro',
'display_name': 'Pro版本',
'description': '适合个人投资者的基础功能套餐',
'monthly_price': 198,
'yearly_price': 2000,
'pricing_options': [
{'months': 1, 'price': 198, 'label': '月付', 'cycle_key': 'monthly'},
{'months': 3, 'price': 534, 'label': '3个月', 'cycle_key': '3months', 'discount_percent': 10},
{'months': 6, 'price': 950, 'label': '半年', 'cycle_key': '6months', 'discount_percent': 20},
{'months': 12, 'price': 2000, 'label': '1年', 'cycle_key': 'yearly', 'discount_percent': 16},
{'months': 24, 'price': 3600, 'label': '2年', 'cycle_key': '2years', 'discount_percent': 24},
{'months': 36, 'price': 5040, 'label': '3年', 'cycle_key': '3years', 'discount_percent': 29}
],
'features': ['基础股票分析工具', '历史数据查询', '基础财务报表', '简单投资计划记录', '标准客服支持'],
'monthly_price': 0.01,
'yearly_price': 0.08,
'features': ['基础股票分析工具', '历史数据查询', '基础财务报表'],
'is_active': True,
'sort_order': 1
},
@@ -1469,17 +1130,9 @@ def get_subscription_plans():
'name': 'max',
'display_name': 'Max版本',
'description': '适合专业投资者的全功能套餐',
'monthly_price': 998,
'yearly_price': 10000,
'pricing_options': [
{'months': 1, 'price': 998, 'label': '月付', 'cycle_key': 'monthly'},
{'months': 3, 'price': 2695, 'label': '3个月', 'cycle_key': '3months', 'discount_percent': 10},
{'months': 6, 'price': 4790, 'label': '半年', 'cycle_key': '6months', 'discount_percent': 20},
{'months': 12, 'price': 10000, 'label': '1年', 'cycle_key': 'yearly', 'discount_percent': 17},
{'months': 24, 'price': 18000, 'label': '2年', 'cycle_key': '2years', 'discount_percent': 25},
{'months': 36, 'price': 25200, 'label': '3年', 'cycle_key': '3years', 'discount_percent': 30}
],
'features': ['全部Pro版本功能', '高级分析工具', '实时数据推送', 'API访问', '优先客服支持'],
'monthly_price': 0.1,
'yearly_price': 0.8,
'features': ['全部Pro版本功能', '高级分析工具', '实时数据推送'],
'is_active': True,
'sort_order': 2
}
@@ -1536,90 +1189,9 @@ def get_subscription_info():
})
@app.route('/api/promo-code/validate', methods=['POST'])
def validate_promo_code_api():
"""验证优惠码"""
try:
if 'user_id' not in session:
return jsonify({'success': False, 'error': '未登录'}), 401
data = request.get_json()
code = data.get('code', '').strip()
plan_name = data.get('plan_name')
billing_cycle = data.get('billing_cycle')
amount = data.get('amount', 0)
if not code or not plan_name or not billing_cycle:
return jsonify({'success': False, 'error': '参数不完整'}), 400
# 验证优惠码
promo, error = validate_promo_code(code, plan_name, billing_cycle, amount, session['user_id'])
if error:
return jsonify({
'success': False,
'valid': False,
'error': error
})
# 计算折扣
discount_amount = calculate_discount(promo, amount)
final_amount = amount - discount_amount
return jsonify({
'success': True,
'valid': True,
'promo_code': promo.to_dict(),
'discount_amount': discount_amount,
'final_amount': final_amount
})
except Exception as e:
return jsonify({
'success': False,
'error': f'验证失败: {str(e)}'
}), 500
@app.route('/api/subscription/calculate-price', methods=['POST'])
def calculate_subscription_price():
"""计算订阅价格（支持升级和优惠码）"""
try:
if 'user_id' not in session:
return jsonify({'success': False, 'error': '未登录'}), 401
data = request.get_json()
to_plan = data.get('to_plan')
to_cycle = data.get('to_cycle')
promo_code = data.get('promo_code', '').strip() or None
if not to_plan or not to_cycle:
return jsonify({'success': False, 'error': '参数不完整'}), 400
# 计算价格
result = calculate_upgrade_price(session['user_id'], to_plan, to_cycle, promo_code)
if 'error' in result:
return jsonify({
'success': False,
'error': result['error']
}), 400
return jsonify({
'success': True,
'data': result
})
except Exception as e:
return jsonify({
'success': False,
'error': f'计算失败: {str(e)}'
}), 500
@app.route('/api/payment/create-order', methods=['POST'])
def create_payment_order():
"""创建支付订单（支持升级和优惠码）"""
"""创建支付订单"""
try:
if 'user_id' not in session:
return jsonify({'success': False, 'error': '未登录'}), 401
@@ -1627,21 +1199,23 @@ def create_payment_order():
data = request.get_json()
plan_name = data.get('plan_name')
billing_cycle = data.get('billing_cycle')
promo_code = data.get('promo_code', '').strip() or None
if not plan_name or not billing_cycle:
return jsonify({'success': False, 'error': '参数不完整'}), 400
# 计算价格（包括升级和优惠码）
price_result = calculate_upgrade_price(session['user_id'], plan_name, billing_cycle, promo_code)
if 'error' in price_result:
return jsonify({'success': False, 'error': price_result['error']}), 400
amount = price_result['final_amount']
original_amount = price_result['original_amount']
discount_amount = price_result['discount_amount']
is_upgrade = price_result.get('is_upgrade', False)
# 获取套餐信息
try:
plan = SubscriptionPlan.query.filter_by(name=plan_name, is_active=True).first()
if not plan:
# 如果表不存在，使用默认价格
prices = {'pro': {'monthly': 0.01, 'yearly': 0.08}, 'max': {'monthly': 0.1, 'yearly': 0.8}}
amount = prices.get(plan_name, {}).get(billing_cycle, 0.01)
else:
amount = plan.monthly_price if billing_cycle == 'monthly' else plan.yearly_price
except:
# 默认价格
prices = {'pro': {'monthly': 0.01, 'yearly': 0.08}, 'max': {'monthly': 0.1, 'yearly': 0.8}}
amount = prices.get(plan_name, {}).get(billing_cycle, 0.01)
# 创建订单
try:
@@ -1651,52 +1225,10 @@ def create_payment_order():
billing_cycle=billing_cycle,
amount=amount
)
# 添加扩展字段（使用动态属性）
if hasattr(order, 'original_amount') or True: # 兼容性检查
order.original_amount = original_amount
order.discount_amount = discount_amount
order.is_upgrade = is_upgrade
# 如果使用了优惠码，关联优惠码
if promo_code and price_result.get('promo_code'):
promo_obj = PromoCode.query.filter_by(code=promo_code.upper()).first()
if promo_obj:
order.promo_code_id = promo_obj.id
# 如果是升级，记录原套餐信息
if is_upgrade:
order.upgrade_from_plan = price_result.get('current_plan')
db.session.add(order)
db.session.commit()
# 如果是升级订单，创建升级记录
if is_upgrade and price_result.get('upgrade_type'):
try:
upgrade_record = SubscriptionUpgrade(
user_id=session['user_id'],
order_id=order.id,
from_plan=price_result['current_plan'],
from_cycle=price_result['current_cycle'],
from_end_date=datetime.fromisoformat(price_result['current_end_date']) if price_result.get('current_end_date') else None,
to_plan=plan_name,
to_cycle=billing_cycle,
to_end_date=beijing_now() + timedelta(days=365 if billing_cycle == 'yearly' else 30),
remaining_value=price_result['remaining_value'],
upgrade_amount=price_result['upgrade_amount'],
actual_amount=amount,
upgrade_type=price_result['upgrade_type']
)
db.session.add(upgrade_record)
db.session.commit()
except Exception as e:
print(f"创建升级记录失败: {e}")
# 不影响主流程
except Exception as e:
db.session.rollback()
return jsonify({'success': False, 'error': f'订单创建失败: {str(e)}'}), 500
return jsonify({'success': False, 'error': '订单创建失败'}), 500
# 尝试调用真实的微信支付API
try:
@@ -1888,26 +1420,6 @@ def force_update_order_status(order_id):
# 激活用户订阅
activate_user_subscription(order.user_id, order.plan_name, order.billing_cycle)
# 记录优惠码使用（如果使用了优惠码）
if hasattr(order, 'promo_code_id') and order.promo_code_id:
try:
promo_usage = PromoCodeUsage(
promo_code_id=order.promo_code_id,
user_id=order.user_id,
order_id=order.id,
original_amount=order.original_amount if hasattr(order, 'original_amount') else order.amount,
discount_amount=order.discount_amount if hasattr(order, 'discount_amount') else 0,
final_amount=order.amount
)
db.session.add(promo_usage)
# 更新优惠码使用次数
promo = PromoCode.query.get(order.promo_code_id)
if promo:
promo.current_uses = (promo.current_uses or 0) + 1
except Exception as e:
print(f"记录优惠码使用失败: {e}")
db.session.commit()
print(f"✅ 订单状态强制更新成功: {old_status} -> paid")
@@ -7087,15 +6599,8 @@ 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)
query = query.filter_by(importance=importance)
if creator_id:
query = query.filter_by(creator_id=creator_id)
# 新增：行业代码过滤（申银万国行业分类）

59
craco.config.js
View File

@@ -2,9 +2,6 @@ const path = require('path');
const webpack = require('webpack');
const { BundleAnalyzerPlugin } = process.env.ANALYZE ? require('webpack-bundle-analyzer') : { BundleAnalyzerPlugin: null };
// 检查是否为 Mock 模式（与 src/utils/apiConfig.js 保持一致）
const isMockMode = () => process.env.REACT_APP_ENABLE_MOCK === 'true';
module.exports = {
webpack: {
configure: (webpackConfig, { env, paths }) => {
@@ -30,7 +27,7 @@ module.exports = {
chunks: 'all',
maxInitialRequests: 30,
minSize: 20000,
maxSize: 512000, // 限制单个 chunk 最大大小（512KB，与 performance.maxAssetSize 一致）
maxSize: 244000, // 限制单个 chunk 最大大小（约 244KB）
cacheGroups: {
// React 核心库单独分离
react: {
@@ -50,7 +47,7 @@ module.exports = {
chakraUI: {
test: /[\\/]node_modules[\\/](@chakra-ui|@emotion)[\\/]/,
name: 'chakra-ui',
priority: 23, // 从 22 改为 23，避免与 antd 优先级冲突
priority: 22,
reuseExistingChunk: true,
},
// Ant Design
@@ -110,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'],
@@ -239,31 +219,14 @@ module.exports = {
devMiddleware: {
writeToDisk: false,
},
// 调试日志
onListening: (devServer) => {
console.log(`[CRACO] Mock Mode: ${isMockMode() ? 'Enabled ✅' : 'Disabled ❌'}`);
console.log(`[CRACO] Proxy: ${isMockMode() ? 'Disabled (MSW intercepts)' : 'Enabled (forwarding to backend)'}`);
},
// 代理配置：将 /api 请求代理到后端服务器
// 注意：Mock 模式下禁用 proxy，让 MSW 拦截请求
...(isMockMode() ? {} : {
proxy: {
'/api': {
target: 'http://49.232.185.254:5001',
changeOrigin: true,
secure: false,
logLevel: 'debug',
},
'/concept-api': {
target: 'http://49.232.185.254:6801',
changeOrigin: true,
secure: false,
logLevel: 'debug',
pathRewrite: { '^/concept-api': '' },
},
proxy: {
'/api': {
target: 'http://49.232.185.254:5001',
changeOrigin: true,
secure: false,
logLevel: 'debug',
},
}),
},
},
};

59
database_migration_add_pricing_options.sql
View File

@@ -1,59 +0,0 @@
-- 数据库迁移：添加 pricing_options 字段，支持灵活的计费周期
-- 执行时间：2025-01-XX
-- 说明：支持用户选择"包N个月"或"包N年"的套餐
-- 1. 添加 pricing_options 字段
ALTER TABLE subscription_plans
ADD COLUMN pricing_options TEXT NULL COMMENT 'JSON格式的计费周期选项';
-- 2. 为Pro套餐配置多种计费周期（基于现有价格：198元/月，2000元/年）
UPDATE subscription_plans
SET pricing_options = '[
{"months": 1, "price": 198, "label": "月付", "cycle_key": "monthly"},
{"months": 3, "price": 534, "label": "3个月", "cycle_key": "3months", "discount_percent": 10},
{"months": 6, "price": 950, "label": "半年", "cycle_key": "6months", "discount_percent": 20},
{"months": 12, "price": 2000, "label": "1年", "cycle_key": "yearly", "discount_percent": 16},
{"months": 24, "price": 3600, "label": "2年", "cycle_key": "2years", "discount_percent": 24},
{"months": 36, "price": 5040, "label": "3年", "cycle_key": "3years", "discount_percent": 29}
]'
WHERE name = 'pro';
-- 3. 为Max套餐配置多种计费周期（基于现有价格：998元/月，10000元/年）
UPDATE subscription_plans
SET pricing_options = '[
{"months": 1, "price": 998, "label": "月付", "cycle_key": "monthly"},
{"months": 3, "price": 2695, "label": "3个月", "cycle_key": "3months", "discount_percent": 10},
{"months": 6, "price": 4790, "label": "半年", "cycle_key": "6months", "discount_percent": 20},
{"months": 12, "price": 10000, "label": "1年", "cycle_key": "yearly", "discount_percent": 17},
{"months": 24, "price": 18000, "label": "2年", "cycle_key": "2years", "discount_percent": 25},
{"months": 36, "price": 25200, "label": "3年", "cycle_key": "3years", "discount_percent": 30}
]'
WHERE name = 'max';
-- ========================================
-- 价格计算说明
-- ========================================
-- Pro版（198元/月，2000元/年）：
-- - 月付：198元
-- - 3个月：198×3×0.9 = 534元（打9折，省10%）
-- - 半年：198×6×0.8 = 950元（打8折，省20%）
-- - 1年：2000元（已有年付价格，约省16%）
-- - 2年：198×24×0.76 = 3600元（省24%）
-- - 3年：198×36×0.7 = 5040元（省30%）
-- Max版（998元/月，10000元/年）：
-- - 月付：998元
-- - 3个月：998×3×0.9 = 2695元（打9折，省10%）
-- - 半年：998×6×0.8 = 4790元（打8折，省20%）
-- - 1年：10000元（已有年付价格，约省17%）
-- - 2年：998×24×0.75 = 18000元（省25%）
-- - 3年：998×36×0.7 = 25200元（省30%）
-- ========================================
-- 注意事项
-- ========================================
-- 1. 上述价格仅为示例，请根据实际营销策略调整
-- 2. 折扣力度建议：时间越长，优惠越大
-- 3. 如果不想提供某个周期，直接从数组中删除即可
-- 4. 前端会自动渲染所有可用的计费周期选项
-- 5. 用户可以通过优惠码获得额外折扣

648
docs/DEPLOYMENT.md
View File

@@ -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。
---
**祝部署顺利！** 🎉

70
docs/DEPLOYMENT_QUICKSTART.md
View File

@@ -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)
---
**就这么简单！** ✨

376
docs/ENVIRONMENT_SETUP.md
View File

@@ -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
**维护者：** 前端团队

322
docs/MOCK_API_DOCS.md
View File

@@ -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

614
docs/POSTHOG_DASHBOARD_GUIDE.md
View File

@@ -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
**维护者**: 数据分析团队

841
docs/POSTHOG_EVENT_TRACKING.md
View File

@@ -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个核心页面**。

255
docs/POSTHOG_INTEGRATION.md
View File

@@ -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 官方文档或联系技术支持。

439
docs/POSTHOG_REDUX_INTEGRATION.md
View File

@@ -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! 🚀

476
docs/POSTHOG_TESTING_GUIDE.md
View File

@@ -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)

561
docs/POSTHOG_TRACKING_GUIDE.md
View File

@@ -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

149
docs/QUICK_TEST_CHECKLIST.md
View File

@@ -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
- 验证数据完整性
---
**测试日期：** _________
**测试人：** _________
**环境：** 本地开发（控制台模式）

825
docs/StockDetailPanel_BUSINESS_LOGIC.md
View File

@@ -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 的完整业务逻辑，可作为重构验证的参考基准。

740
docs/StockDetailPanel_REFACTORING_COMPARISON.md
View File

@@ -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% 功能完整性的前提下，实现了代码质量的质的飞跃。

1705
docs/StockDetailPanel_USER_FLOW_COMPARISON.md
View File

File diff suppressed because it is too large Load Diff

484
docs/TRACKING_VALIDATION_CHECKLIST.md
View File

@@ -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
**维护者**: 开发团队

0
docs/final_trading_simulation_fixes.md → final_trading_simulation_fixes.md
View File

23
jsconfig.json
View File

@@ -2,26 +2,7 @@
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["./*"],
"@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/*"]
"*": ["src/*"]
}
},
"exclude": ["node_modules", "build", "dist"]
}
}

134
migrations/add_promo_code_tables.sql
View File

@@ -1,134 +0,0 @@
-- 数据库迁移脚本：添加优惠码和订阅升级相关表
-- 执行时间：2025-xx-xx
-- 作者：Claude Code
-- 说明：此脚本添加了优惠码、优惠码使用记录和订阅升级记录三张新表，并扩展了 payment_orders 表
-- ============================================
-- 1. 创建优惠码表
-- ============================================
CREATE TABLE IF NOT EXISTS `promo_codes` (
`id` INT PRIMARY KEY AUTO_INCREMENT,
`code` VARCHAR(50) UNIQUE NOT NULL COMMENT '优惠码（唯一）',
`description` VARCHAR(200) DEFAULT NULL COMMENT '优惠码描述',
-- 折扣类型和值
`discount_type` VARCHAR(20) NOT NULL COMMENT '折扣类型: percentage（百分比） 或 fixed_amount（固定金额）',
`discount_value` DECIMAL(10, 2) NOT NULL COMMENT '折扣值',
-- 适用范围
`applicable_plans` VARCHAR(200) DEFAULT NULL COMMENT '适用套餐（JSON格式），如 ["pro", "max"]，null表示全部适用',
`applicable_cycles` VARCHAR(50) DEFAULT NULL COMMENT '适用周期（JSON格式），如 ["monthly", "yearly"]，null表示全部适用',
`min_amount` DECIMAL(10, 2) DEFAULT NULL COMMENT '最低消费金额',
-- 使用限制
`max_uses` INT DEFAULT NULL COMMENT '最大使用次数，null表示无限制',
`max_uses_per_user` INT DEFAULT 1 COMMENT '每个用户最多使用次数',
`current_uses` INT DEFAULT 0 COMMENT '当前已使用次数',
-- 有效期
`valid_from` DATETIME NOT NULL COMMENT '生效时间',
`valid_until` DATETIME NOT NULL COMMENT '失效时间',
-- 状态
`is_active` BOOLEAN DEFAULT TRUE COMMENT '是否启用',
`created_by` INT DEFAULT NULL COMMENT '创建人（管理员ID）',
`created_at` DATETIME DEFAULT CURRENT_TIMESTAMP,
`updated_at` DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
INDEX idx_code (`code`),
INDEX idx_valid_dates (`valid_from`, `valid_until`),
INDEX idx_is_active (`is_active`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='优惠码表';
-- ============================================
-- 2. 创建优惠码使用记录表
-- ============================================
CREATE TABLE IF NOT EXISTS `promo_code_usage` (
`id` INT PRIMARY KEY AUTO_INCREMENT,
`promo_code_id` INT NOT NULL COMMENT '优惠码ID',
`user_id` INT NOT NULL COMMENT '用户ID',
`order_id` INT NOT NULL COMMENT '订单ID',
`original_amount` DECIMAL(10, 2) NOT NULL COMMENT '原价',
`discount_amount` DECIMAL(10, 2) NOT NULL COMMENT '优惠金额',
`final_amount` DECIMAL(10, 2) NOT NULL COMMENT '实付金额',
`used_at` DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '使用时间',
FOREIGN KEY (`promo_code_id`) REFERENCES `promo_codes`(`id`) ON DELETE CASCADE,
FOREIGN KEY (`order_id`) REFERENCES `payment_orders`(`id`) ON DELETE CASCADE,
INDEX idx_user_id (`user_id`),
INDEX idx_promo_code_id (`promo_code_id`),
INDEX idx_order_id (`order_id`),
INDEX idx_used_at (`used_at`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='优惠码使用记录表';
-- ============================================
-- 3. 创建订阅升级记录表
-- ============================================
CREATE TABLE IF NOT EXISTS `subscription_upgrades` (
`id` INT PRIMARY KEY AUTO_INCREMENT,
`user_id` INT NOT NULL COMMENT '用户ID',
`order_id` INT NOT NULL COMMENT '订单ID',
-- 原订阅信息
`from_plan` VARCHAR(20) NOT NULL COMMENT '原套餐',
`from_cycle` VARCHAR(10) NOT NULL COMMENT '原周期',
`from_end_date` DATETIME DEFAULT NULL COMMENT '原到期日',
-- 新订阅信息
`to_plan` VARCHAR(20) NOT NULL COMMENT '新套餐',
`to_cycle` VARCHAR(10) NOT NULL COMMENT '新周期',
`to_end_date` DATETIME NOT NULL COMMENT '新到期日',
-- 价格计算
`remaining_value` DECIMAL(10, 2) NOT NULL COMMENT '剩余价值',
`upgrade_amount` DECIMAL(10, 2) NOT NULL COMMENT '升级应付金额',
`actual_amount` DECIMAL(10, 2) NOT NULL COMMENT '实际支付金额',
`upgrade_type` VARCHAR(20) NOT NULL COMMENT '升级类型: plan_upgrade（套餐升级）, cycle_change（周期变更）, both（都变更）',
`created_at` DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (`order_id`) REFERENCES `payment_orders`(`id`) ON DELETE CASCADE,
INDEX idx_user_id (`user_id`),
INDEX idx_order_id (`order_id`),
INDEX idx_created_at (`created_at`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='订阅升级/降级记录表';
-- ============================================
-- 4. 扩展 payment_orders 表（添加新字段）
-- ============================================
-- 注意：这些字段是可选的扩展，用于记录优惠码和升级信息
-- 如果字段已存在会报错，可以忽略
ALTER TABLE `payment_orders`
ADD COLUMN `promo_code_id` INT DEFAULT NULL COMMENT '使用的优惠码ID' AFTER `remark`,
ADD COLUMN `original_amount` DECIMAL(10, 2) DEFAULT NULL COMMENT '原价（使用优惠码前）' AFTER `promo_code_id`,
ADD COLUMN `discount_amount` DECIMAL(10, 2) DEFAULT 0 COMMENT '优惠金额' AFTER `original_amount`,
ADD COLUMN `is_upgrade` BOOLEAN DEFAULT FALSE COMMENT '是否为升级订单' AFTER `discount_amount`,
ADD COLUMN `upgrade_from_plan` VARCHAR(20) DEFAULT NULL COMMENT '从哪个套餐升级' AFTER `is_upgrade`;
-- 添加外键约束
ALTER TABLE `payment_orders`
ADD CONSTRAINT `fk_payment_orders_promo_code`
FOREIGN KEY (`promo_code_id`) REFERENCES `promo_codes`(`id`) ON DELETE SET NULL;
-- ============================================
-- 5. 插入示例优惠码（供测试使用）
-- ============================================
-- 10% 折扣优惠码，适用所有套餐和周期
INSERT INTO `promo_codes`
(`code`, `description`, `discount_type`, `discount_value`, `applicable_plans`, `applicable_cycles`, `min_amount`, `max_uses`, `max_uses_per_user`, `valid_from`, `valid_until`, `is_active`)
VALUES
('WELCOME10', '新用户欢迎优惠 - 10%折扣', 'percentage', 10.00, NULL, NULL, NULL, NULL, 1, NOW(), DATE_ADD(NOW(), INTERVAL 1 YEAR), TRUE),
('ANNUAL20', '年付专享 - 20%折扣', 'percentage', 20.00, NULL, '["yearly"]', NULL, 100, 1, NOW(), DATE_ADD(NOW(), INTERVAL 1 YEAR), TRUE),
('SUMMER50', '夏季促销 - 减免50元', 'fixed_amount', 50.00, '["max"]', NULL, 100.00, 50, 1, NOW(), DATE_ADD(NOW(), INTERVAL 3 MONTH), TRUE);
-- 完成
SELECT 'Migration completed successfully!' AS status;

19
package.json
View File

@@ -22,7 +22,6 @@
"@react-three/fiber": "^8.0.27",
"@reduxjs/toolkit": "^2.9.2",
"@splidejs/react-splide": "^0.7.12",
"@tanstack/react-virtual": "^3.13.12",
"@tippyjs/react": "^4.2.6",
"@visx/visx": "^3.12.0",
"antd": "^5.27.4",
@@ -44,7 +43,6 @@
"match-sorter": "6.3.0",
"moment": "^2.29.1",
"nouislider": "15.0.0",
"posthog-js": "^1.281.0",
"react": "18.3.1",
"react-apexcharts": "^1.3.9",
"react-big-calendar": "^0.33.2",
@@ -94,15 +92,10 @@
"uuid": "^9.0.1"
},
"scripts": {
"prestart": "kill-port 3000",
"start": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.mock craco start",
"start:real": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.local craco start",
"start": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' craco start",
"start:mock": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.mock craco start",
"start:dev": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.development craco start",
"start:test": "concurrently \"python app_2.py\" \"npm run frontend:test\" --names \"backend,frontend\" --prefix-colors \"blue,green\"",
"frontend:test": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' env-cmd -f .env.test craco start",
"dev": "npm start",
"backend": "python app_2.py",
"build": "NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' 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",
@@ -111,14 +104,12 @@
"rollback": "bash scripts/rollback-from-local.sh",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"clean": "rm -rf node_modules/ package-lock.json",
"reinstall": "npm run clean && npm install"
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
},
"devDependencies": {
"@craco/craco": "^7.1.0",
"ajv": "^8.17.1",
"autoprefixer": "^10.4.21",
"concurrently": "^8.2.2",
"env-cmd": "^11.0.0",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-prettier": "3.4.0",
@@ -127,12 +118,12 @@
"imagemin": "^9.0.1",
"imagemin-mozjpeg": "^10.0.0",
"imagemin-pngquant": "^10.0.0",
"kill-port": "^2.0.1",
"msw": "^2.11.5",
"postcss": "^8.5.6",
"prettier": "2.2.1",
"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"

BIN
public/badge.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.7 KiB

BIN
public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

20
public/manifest.json
View File

@@ -4,24 +4,8 @@
"icons": [
{
"src": "favicon.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "badge.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "badge"
},
{
"src": "logo192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "apple-icon.png",
"sizes": "32x32",
"type": "image/png"
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": "./index.html",

2
public/mockServiceWorker.js
View File

@@ -7,7 +7,7 @@
* - Please do NOT modify this file.
*/
const PACKAGE_VERSION = '2.12.0'
const PACKAGE_VERSION = '2.11.6'
const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
const activeClientIds = new Set()

92
public/service-worker.js
View File

@@ -1,92 +0,0 @@
// public/service-worker.js
/**
* Service Worker for Browser Notifications
* 主要功能：支持浏览器通知的稳定运行
*/
const CACHE_NAME = 'valuefrontier-v1';
// Service Worker 安装事件
self.addEventListener('install', (event) => {
console.log('[Service Worker] Installing...');
// 跳过等待，立即激活
self.skipWaiting();
});
// Service Worker 激活事件
self.addEventListener('activate', (event) => {
console.log('[Service Worker] Activating...');
// 立即接管所有页面
event.waitUntil(self.clients.claim());
});
// 通知点击事件
self.addEventListener('notificationclick', (event) => {
console.log('[Service Worker] Notification clicked:', event.notification.tag);
event.notification.close();
// 获取通知数据中的链接
const urlToOpen = event.notification.data?.link;
if (urlToOpen) {
event.waitUntil(
clients.matchAll({ type: 'window', includeUncontrolled: true })
.then((windowClients) => {
// 查找是否已有打开的窗口
for (let client of windowClients) {
if (client.url.includes(window.location.origin) && 'focus' in client) {
// 聚焦现有窗口并导航到目标页面
return client.focus().then(client => {
return client.navigate(urlToOpen);
});
}
}
// 如果没有打开的窗口，打开新窗口
if (clients.openWindow) {
return clients.openWindow(urlToOpen);
}
})
);
}
});
// 通知关闭事件
self.addEventListener('notificationclose', (event) => {
console.log('[Service Worker] Notification closed:', event.notification.tag);
});
// Fetch 事件 - 基础的网络优先策略
self.addEventListener('fetch', (event) => {
// 对于通知相关的资源，使用网络优先策略
event.respondWith(
fetch(event.request)
.catch(() => {
// 网络失败时，尝试从缓存获取
return caches.match(event.request);
})
);
});
// 推送消息事件（预留，用于未来的 Push API 集成）
self.addEventListener('push', (event) => {
console.log('[Service Worker] Push message received:', event);
if (event.data) {
const data = event.data.json();
const options = {
body: data.body || '您有新消息',
icon: data.icon || '/favicon.png',
badge: '/favicon.png',
data: data.data || {},
requireInteraction: data.requireInteraction || false,
tag: data.tag || `notification_${Date.now()}`,
};
event.waitUntil(
self.registration.showNotification(data.title || '价值前沿', options)
);
}
});
console.log('[Service Worker] Loaded successfully');

333
src/App.js
View File

@@ -9,55 +9,318 @@
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 { useDispatch } from 'react-redux';
import React, { Suspense, useEffect } from "react";
import { ChakraProvider } from '@chakra-ui/react';
import { Routes, Route, Navigate } from "react-router-dom";
// Routes
import AppRoutes from './routes';
// Chakra imports
import { Box, useColorMode } from '@chakra-ui/react';
// Providers
import AppProviders from './providers/AppProviders';
// Core Components
import theme from "theme/theme.js";
// Components
import GlobalComponents from './components/GlobalComponents';
// Loading Component
import PageLoader from "components/Loading/PageLoader";
// Hooks
import { useGlobalErrorHandler } from './hooks/useGlobalErrorHandler';
// Layouts - 保持同步导入（需要立即加载）
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
import { logger } from './utils/logger';
// Contexts
import { AuthProvider } from "contexts/AuthContext";
import { AuthModalProvider } from "contexts/AuthModalContext";
import { NotificationProvider, useNotification } from "contexts/NotificationContext";
import { IndustryProvider } from "contexts/IndustryContext";
// Components
import ProtectedRoute from "components/ProtectedRoute";
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";
/**
* AppContent - 应用核心内容
* 负责 PostHog 初始化和渲染路由
* ConnectionStatusBar 包装组件
* 需要在 NotificationProvider 内部使用，所以单独提取
*/
function AppContent() {
const dispatch = useDispatch();
function ConnectionStatusBarWrapper() {
const { connectionStatus, reconnectAttempt, maxReconnectAttempts, retryConnection } = useNotification();
const [isDismissed, setIsDismissed] = React.useState(false);
// 🎯 PostHog Redux 初始化
useEffect(() => {
dispatch(initializePostHog());
logger.info('App', 'PostHog Redux 初始化已触发');
}, [dispatch]);
// 监听连接状态变化
React.useEffect(() => {
// 重连成功后，清除 dismissed 状态
if (connectionStatus === 'connected' && isDismissed) {
setIsDismissed(false);
// 从 localStorage 清除 dismissed 标记
localStorage.removeItem('connection_status_dismissed');
}
return <AppRoutes />;
}
// 从 localStorage 恢复 dismissed 状态
if (connectionStatus !== 'connected' && !isDismissed) {
const dismissed = localStorage.getItem('connection_status_dismissed');
if (dismissed === 'true') {
setIsDismissed(true);
}
}
}, [connectionStatus, isDismissed]);
/**
* App - 应用根组件
* 设置全局错误处理,提供 Provider 和全局组件
*/
export default function App() {
// 全局错误处理
useGlobalErrorHandler();
const handleClose = () => {
// 用户手动关闭，保存到 localStorage
setIsDismissed(true);
localStorage.setItem('connection_status_dismissed', 'true');
logger.info('App', 'Connection status bar dismissed by user');
};
return (
<AppProviders>
<AppContent />
<GlobalComponents />
</AppProviders>
<ConnectionStatusBar
status={connectionStatus}
reconnectAttempt={reconnectAttempt}
maxReconnectAttempts={maxReconnectAttempts}
onRetry={retryConnection}
onClose={handleClose}
isDismissed={isDismissed}
/>
);
}
function AppContent() {
const { colorMode } = useColorMode();
return (
<Box minH="100vh" bg={colorMode === 'dark' ? 'gray.800' : 'white'}>
{/* Socket 连接状态条 */}
<ConnectionStatusBarWrapper />
{/* 路由切换时自动滚动到顶部 */}
<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>
);
}

102
src/components/Auth/AuthFormContent.js
View File

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

2
src/components/Auth/AuthModalManager.js
View File

@@ -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';
/**

80
src/components/Auth/WechatRegister.js
View File

@@ -15,10 +15,9 @@ 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";
// 配置常量
const POLL_INTERVAL = 2000; // 轮询间隔：2秒
@@ -54,12 +53,6 @@ export default function WechatRegister() {
const { closeModal } = useAuthModal();
const { refreshSession } = useAuth();
// 事件追踪
const authEvents = useAuthEvents({
component: 'WechatRegister',
isMobile: false // WechatRegister 只在桌面端显示
});
// 状态管理
const [wechatAuthUrl, setWechatAuthUrl] = useState("");
const [wechatSessionId, setWechatSessionId] = useState("");
@@ -128,20 +121,9 @@ export default function WechatRegister() {
*/
const handleLoginSuccess = useCallback(async (sessionId, status) => {
try {
logger.info('WechatRegister', '开始调用登录接口', { sessionId: sessionId.substring(0, 8) + '...', status });
const response = await authService.loginWithWechat(sessionId);
logger.info('WechatRegister', '登录接口返回', { success: response?.success, hasUser: !!response?.user });
if (response?.success) {
// 追踪微信登录成功
authEvents.trackLoginSuccess(
response.user,
'wechat',
response.isNewUser || false
);
// Session cookie 会自动管理，不需要手动存储
// 如果后端返回了 token，可以选择性存储（兼容旧方式）
if (response.token) {
@@ -164,16 +146,10 @@ export default function WechatRegister() {
throw new Error(response?.error || '登录失败');
}
} catch (error) {
// 追踪微信登录失败
authEvents.trackLoginFailed('wechat', 'api', error.message || '登录失败', {
session_id: sessionId?.substring(0, 8) + '...',
status: status
});
logger.error('WechatRegister', 'handleLoginSuccess', error, { sessionId });
showError("登录失败", error.message || "请重试");
}
}, [showSuccess, showError, closeModal, refreshSession, authEvents]);
}, [showSuccess, showError, closeModal, refreshSession]);
/**
* 检查微信扫码状态
@@ -204,30 +180,13 @@ export default function WechatRegister() {
const { status } = response;
logger.debug('WechatRegister', '微信状态', { status });
logger.debug('WechatRegister', '检测到微信状态', {
sessionId: wechatSessionId.substring(0, 8) + '...',
status,
userInfo: response.user_info
});
// 组件卸载后不再更新状态
if (!isMountedRef.current) return;
// 追踪状态变化
if (wechatStatus !== status) {
authEvents.trackWechatStatusChanged(currentSessionId, wechatStatus, status);
// 特别追踪扫码事件
if (status === WECHAT_STATUS.SCANNED) {
authEvents.trackWechatQRScanned(currentSessionId);
}
}
setWechatStatus(status);
// 处理成功状态
if (status === WECHAT_STATUS.LOGIN_SUCCESS || status === WECHAT_STATUS.REGISTER_SUCCESS) {
logger.info('WechatRegister', '检测到登录成功状态，停止轮询', { status });
clearTimers(); // 停止轮询
sessionIdRef.current = null; // 清理 sessionId
@@ -235,9 +194,6 @@ export default function WechatRegister() {
}
// 处理过期状态
else if (status === WECHAT_STATUS.EXPIRED) {
// 追踪二维码过期
authEvents.trackWechatQRExpired(currentSessionId, QR_CODE_TIMEOUT / 1000);
clearTimers();
sessionIdRef.current = null; // 清理 sessionId
if (isMountedRef.current) {
@@ -330,16 +286,6 @@ export default function WechatRegister() {
try {
setIsLoading(true);
// 追踪用户选择微信登录(首次或刷新)
const isRefresh = Boolean(wechatSessionId);
if (isRefresh) {
const oldSessionId = wechatSessionId;
authEvents.trackWechatLoginInitiated('qr_refresh');
// 稍后会在成功时追踪刷新事件
} else {
authEvents.trackWechatLoginInitiated('qr_area');
}
// 生产环境：调用真实 API
const response = await authService.getWechatQRCode();
@@ -355,13 +301,6 @@ export default function WechatRegister() {
throw new Error(response.message || '获取二维码失败');
}
// 追踪二维码显示 (首次或刷新)
if (isRefresh) {
authEvents.trackWechatQRRefreshed(wechatSessionId, response.data.session_id);
} else {
authEvents.trackWechatQRDisplayed(response.data.session_id, response.data.auth_url);
}
// 同时更新 ref 和 state，确保轮询能立即读取到最新值
sessionIdRef.current = response.data.session_id;
setWechatAuthUrl(response.data.auth_url);
@@ -376,11 +315,6 @@ export default function WechatRegister() {
// 启动轮询检查扫码状态
startPolling();
} catch (error) {
// 追踪获取二维码失败
authEvents.trackError('api', error.message || '获取二维码失败', {
context: 'get_wechat_qrcode'
});
logger.error('WechatRegister', 'getWechatQRCode', error);
if (isMountedRef.current) {
showError("获取微信授权失败", error.message || "请稍后重试");
@@ -390,7 +324,7 @@ export default function WechatRegister() {
setIsLoading(false);
}
}
}, [startPolling, showError, wechatSessionId, authEvents]);
}, [startPolling, showError]);
/**
* 安全的按钮点击处理，确保所有错误都被捕获，防止被 ErrorBoundary 捕获
@@ -501,26 +435,26 @@ export default function WechatRegister() {
bg="gray.50"
boxShadow="sm" // ✅ 添加轻微阴影
>
{wechatStatus === WECHAT_STATUS.WAITING ? (
{wechatStatus !== WECHAT_STATUS.NONE ? (
/* 已获取二维码：显示iframe */
<iframe
src={wechatAuthUrl}
title="微信扫码登录"
width="300"
height="350"
scrolling="no" // ✅ 新增:禁止滚动
// sandbox="allow-scripts allow-same-origin allow-forms" // ✅ 阻止iframe跳转父页面
scrolling="no" // ✅ 新增:禁止滚动
style={{
border: 'none',
transform: 'scale(0.77) translateY(-35px)', // ✅ 裁剪顶部logo
transformOrigin: 'top left',
marginLeft: '-5px',
pointerEvents: 'auto', // 允许点击 │ │
overflow: 'hidden', // 尝试隐藏滚动条（可能不起作用）
overflow: 'hidden', // 尝试隐藏滚动条（可能不起作用）
}}
// 使用 onWheel 事件阻止滚动 │ │
onWheel={(e) => e.preventDefault()} // ✅ 在父容器上阻止滚动
onTouchMove={(e) => e.preventDefault()} // ✅ 移动端也阻止
/>
) : (
/* 未获取：显示占位符 */

92
src/components/GlobalComponents.js
View File

@@ -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;

1558
src/components/Navbars/HomeNavbar.js
View File

File diff suppressed because it is too large Load Diff

51
src/components/Navbars/components/BrandLogo.js
View File

@@ -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;

65
src/components/Navbars/components/CalendarButton.js
View File

@@ -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;

222
src/components/Navbars/components/FeatureMenus/FollowingEventsMenu.js
View File

@@ -1,222 +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} spacing={1}>
{/* 热度 */}
{typeof ev.hot_score === 'number' && (
<Badge
colorScheme={
ev.hot_score >= 80 ? 'red' :
(ev.hot_score >= 60 ? 'orange' : 'gray')
}
fontSize="xs"
>
🔥 {ev.hot_score}
</Badge>
)}
{/* 关注数 */}
{typeof ev.follower_count === 'number' && ev.follower_count > 0 && (
<Badge
colorScheme="purple"
fontSize="xs"
>
👥 {ev.follower_count}
</Badge>
)}
{/* 日均涨跌幅 */}
{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;

180
src/components/Navbars/components/FeatureMenus/WatchlistMenu.js
View File

@@ -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;

5
src/components/Navbars/components/FeatureMenus/index.js
View File

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

37
src/components/Navbars/components/LoginButton.js
View File

@@ -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;

314
src/components/Navbars/components/MobileDrawer/MobileDrawer.js
View File

@@ -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;

4
src/components/Navbars/components/MobileDrawer/index.js
View File

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

82
src/components/Navbars/components/NavbarActions/index.js
View File

@@ -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;

258
src/components/Navbars/components/Navigation/DesktopNav.js
View File

@@ -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;

162
src/components/Navbars/components/Navigation/MoreMenu.js
View File

@@ -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;

120
src/components/Navbars/components/Navigation/PersonalCenterMenu.js
View File

@@ -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;

6
src/components/Navbars/components/Navigation/index.js
View File

@@ -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';

96
src/components/Navbars/components/ProfileCompletenessAlert/index.js
View File

@@ -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;

111
src/components/Navbars/components/SecondaryNav/config.js
View File

@@ -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' }]
}
]
}
};

138
src/components/Navbars/components/SecondaryNav/index.js
View File

@@ -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;

51
src/components/Navbars/components/ThemeToggleButton.js
View File

@@ -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;

64
src/components/Navbars/components/UserMenu/DesktopUserMenu.js
View File

@@ -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;

166
src/components/Navbars/components/UserMenu/TabletUserMenu.js
View File

@@ -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;

75
src/components/Navbars/components/UserMenu/UserAvatar.js
View File

@@ -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;

6
src/components/Navbars/components/UserMenu/index.js
View File

@@ -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';

10
src/components/NotificationContainer/index.js
View File

@@ -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, newestBorderTopColor]);
}), [priorityBgColor, borderColor, iconColor, textColor, subTextColor, metaTextColor, hoverBgColor, closeButtonHoverBgColor]);
// 点击处理（只有真正可点击时才执行）- 使用 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`),
})}
>
{/* 头部区域：标题 + 可选标识 */}

10
src/components/NotificationTestTool/index.js
View File

@@ -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({

83
src/components/PostHogProvider.js
View File

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

277
src/components/PrivacyPolicyModal.js Normal file
View File

@@ -0,0 +1,277 @@
import React from "react";
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
ModalCloseButton,
Text,
Box,
VStack,
Divider,
useColorModeValue
} from "@chakra-ui/react";
const PrivacyPolicyModal = ({ isOpen, onClose }) => {
const modalBg = useColorModeValue("white", "gray.800");
const headingColor = useColorModeValue("gray.800", "white");
const textColor = useColorModeValue("gray.600", "gray.300");
// Conditional rendering: only render Modal when open
if (!isOpen) {
return null;
}
return (
<Modal
isOpen={isOpen}
onClose={onClose}
size="full"
scrollBehavior="inside"
isCentered
>
<ModalOverlay bg="blackAlpha.600" />
<ModalContent
maxW="95vw"
maxH="95vh"
bg={modalBg}
borderRadius="xl"
boxShadow="2xl"
mx={4}
>
<ModalHeader
fontSize="2xl"
fontWeight="bold"
color={headingColor}
borderBottom="1px solid"
borderColor="gray.200"
borderRadius="xl xl 0 0"
py={6}
>
隐私政策
</ModalHeader>
<ModalCloseButton
size="lg"
_hover={{ bg: "gray.100" }}
/>
<ModalBody py={8} px={8}>
<VStack spacing={6} align="stretch">
<Box bg="blue.50" p={4} borderRadius="md" border="1px solid" borderColor="blue.100">
<Text fontSize="md" color="blue.600" mb={2} fontWeight="semibold">
生效日期：2025年1月20日
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.8" mb={4}>
【北京价值前沿科技有限公司】（以下简称"我们"）深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。我们致力于维持您对我们的信任，恪守以下原则，保护您的个人信息：权责一致原则、目的明确原则、选择同意原则、最少够用原则、确保安全原则、主体参与原则、公开透明原则等。同时，我们承诺，我们将按业界成熟的安全标准，采取相应的安全保护措施来保护您的个人信息。
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.8" fontWeight="medium">
请在使用我们的产品（或服务）前，仔细阅读并了解本《隐私政策》。
</Text>
</Box>
<Divider />
<Box>
<Text fontSize="xl" fontWeight="bold" color={headingColor} mb={4}>
一、我们如何收集和使用您的个人信息
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
根据《信息安全技术个人信息安全规范》（GB/T 35273—2020），个人信息是指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息。本隐私政策中涉及的个人信息包括：基本信息（包括性别、地址、地区、个人电话号码、电子邮箱）；个人身份信息（包括身份证、护照、相关身份证明等）；网络身份标识信息（包括系统账号、IP地址、口令）；个人上网记录（包括登录记录、浏览记录）；个人常用设备信息（包括硬件型号、操作系统类型、应用安装列表、运行中进程信息、设备MAC地址、软件列表设备识别码如IMEI/android ID/IDFA/IMSI 在内的描述个人常用设备基本情况的信息）；个人位置信息（包括精准定位信息、经纬度等）；
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
个人敏感信息是指一旦泄露、非法提供或滥用可能危害人身和财产安全，极易导致个人名誉、身心健康受到损害或歧视性待遇等的个人信息，本隐私政策中涉及的个人敏感信息包括：个人身份信息（包括身份证、护照、相关身份证明等）；网络身份识别信息（包括账户名、账户昵称、用户头像、与前述有关的密码）；其他信息（包括个人电话号码、浏览记录、精准定位信息）。对于个人敏感信息，我们将在本政策中进行显著标识，请您仔细阅读。
</Text>
</Box>
<Box pl={4} borderLeft="3px solid" borderColor="green.300" bg="green.50" p={4} borderRadius="md">
<Text fontSize="xl" fontWeight="semibold" color="green.700" mb={2}>
（一）手机号注册/登录
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.8" mb={4}>
当您使用手机号注册/登录服务时，我们会收集您的手机号码、验证码匹配结果、手机系统平台等信息，用于保存您的登录信息，使您在使用不同设备登录时能够同步您的数据。
</Text>
</Box>
<Box pl={4} borderLeft="3px solid" borderColor="purple.300" bg="purple.50" p={4} borderRadius="md">
<Text fontSize="xl" fontWeight="semibold" color="purple.700" mb={2}>
（二）第三方登录
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.8" mb={4}>
当您使用微信/QQ等第三方登录时，我们会收集您第三方的唯一标识、头像、昵称，用于保存您的登录信息，使您在使用不同设备登录时能够同步您的数据。
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.8" mb={4}>
当您使用微信,微博，QQ 进行三方分享的时候，我们的产品可能会集成第三方的SDK或其他类似的应用程序，用于三方登录以及分享内容到三方平台。您可以登陆以下网址了解相关隐私政策：
</Text>
<VStack align="start" spacing={2} pl={4}>
<Text fontSize="md" color="blue.600" lineHeight="1.6">
【新浪微博】微博个人信息保护政策：https://m.weibo.cn/c/privacy
</Text>
<Text fontSize="md" color="blue.600" lineHeight="1.6">
【微信】微信开放平台开发者服务协议：https://open.weixin.qq.com/cgi-bin/frame?t=news/protocol_developer_tmpl
</Text>
<Text fontSize="md" color="blue.600" lineHeight="1.6">
【QQ】QQ互联SDK隐私保护声明：https://wiki.connect.qq.com/qq互联sdk隐私保护声明
</Text>
</VStack>
</Box>
<Box pl={4} borderLeft="3px solid" borderColor="orange.300" bg="orange.50" p={4} borderRadius="md">
<Text fontSize="xl" fontWeight="semibold" color="orange.700" mb={2}>
（三）第三方支付
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.8" mb={4}>
当您使用 微信 支付宝 华为 进行三方支付的时候，我们的产品可能会集成第三方的SDK或其他类似的应用程序，帮助用户在应用内使用三方支付：
</Text>
<VStack align="start" spacing={2} pl={4}>
<Text fontSize="md" color="blue.600" lineHeight="1.6">
【支付宝】客户端 SDK 隐私说明：https://opendocs.alipay.com/open/01g6qm
</Text>
<Text fontSize="md" color="blue.600" lineHeight="1.6">
【微信支付】微信支付服务协议：https://pay.weixin.qq.com/index.php/public/apply_sign/protocol_v2
</Text>
<Text fontSize="md" color="blue.600" lineHeight="1.6">
【华为支付】SDK数据安全说明：https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides/sdk-data-security-0000001050044906
</Text>
</VStack>
</Box>
<Divider />
<Box>
<Text fontSize="xl" fontWeight="bold" color={headingColor} mb={4}>
二、我们如何使用 Cookie 和同类技术
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
为确保网站正常运转，我们会在您的计算机或移动设备上存储名为 Cookie 的小数据文件。Cookie 通常包含标识符、站点名称以及一些号码和字符。借助于 Cookie，网站能够存储您的偏好或购物篮内的商品等数据。
</Text>
</Box>
<Divider />
<Box>
<Text fontSize="xl" fontWeight="bold" color={headingColor} mb={4}>
三、我们如何共享、转让、公开披露您的个人信息
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
我们不会向其他任何公司、组织和个人分享您的个人信息，但以下情况除外：
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={2}>
1、在获取明确同意的情况下共享：获得您的明确同意后，我们会与其他方共享您的个人信息。
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={2}>
2、我们可能会根据法律法规规定，或按政府主管部门的强制性要求，对外共享您的个人信息。
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
3、与我们的关联公司共享：您的个人信息可能会与我们关联公司共享。我们只会共享必要的个人信息，且受本隐私政策中所声明目的的约束。关联公司如要改变个人信息的处理目的，将再次征求您的授权同意。
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
我们的关联公司包括：北京价值经纬咨询有限责任公司等。
</Text>
</Box>
<Divider />
<Box>
<Text fontSize="xl" fontWeight="bold" color={headingColor} mb={4}>
四、我们如何保护您的个人信息
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
我们已使用符合业界标准的安全防护措施保护您提供的个人信息，防止数据遭到未经授权访问、公开披露、使用、修改、损坏或丢失。我们会采取一切合理可行的措施，保护您的个人信息。例如，在您的浏览器与"服务"之间交换数据（如信用卡信息）时受 SSL 加密保护；我们同时对我们网站提供 https 安全浏览方式；我们会使用加密技术确保数据的保密性；我们会使用受信赖的保护机制防止数据遭到恶意攻击；我们会部署访问控制机制，确保只有授权人员才可访问个人信息；以及我们会举办安全和隐私保护培训课程，加强员工对于保护个人信息重要性的认识。
</Text>
</Box>
<Divider />
<Box>
<Text fontSize="xl" fontWeight="bold" color={headingColor} mb={4}>
五、您的权利
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
按照中国相关的法律、法规、标准，以及其他国家、地区的通行做法，我们保障您对自己的个人信息行使以下权利：
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={2}>
（一）访问您的个人信息
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={2}>
（二）更正您的个人信息
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={2}>
（三）删除您的个人信息
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
（四）约束信息系统自动决策
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
如果您无法通过上述链接更正这些个人信息，您可以随时使用我们的 Web 表单联系，或发送电子邮件至admin@valuefrontier.cn。我们将在30天内回复您的更正请求。
</Text>
</Box>
<Divider />
<Box>
<Text fontSize="xl" fontWeight="bold" color={headingColor} mb={4}>
六、我们如何处理儿童的个人信息
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
我们的产品、网站和服务主要面向成人。如果没有父母或监护人的同意，儿童不得创建自己的用户账户。
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
对于经父母同意而收集儿童个人信息的情况，我们只会在受到法律允许、父母或监护人明确同意或者保护儿童所必要的情况下使用或公开披露此信息。
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
尽管当地法律和习俗对儿童的定义不同，但我们将不满 14 周岁的任何人均视为儿童。
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
如果我们发现自己在未事先获得可证实的父母同意的情况下收集了儿童的个人信息，则会设法尽快删除相关数据。
</Text>
</Box>
<Divider />
<Box>
<Text fontSize="xl" fontWeight="bold" color={headingColor} mb={4}>
七、本隐私政策如何更新
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
我们可能适时会对本隐私政策进行调整或变更，本隐私政策的任何更新将在用户启动应用时以弹窗形式提醒用户更新内容并提示查看最新的隐私政策，提醒用户重新确认是否同意隐私政策条款，除法律法规或监管规定另有强制性规定外，经调整或变更的内容一经用户确认后将即时生效。
</Text>
</Box>
<Divider />
<Box>
<Text fontSize="xl" fontWeight="bold" color={headingColor} mb={4}>
八、如何联系我们
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
如果您对本隐私政策有任何疑问、意见或建议，通过以下方式与我们联系：
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
邮箱：admin@valuefrontier.cn
</Text>
</Box>
<Divider />
<Box>
<Text fontSize="xl" fontWeight="bold" color={headingColor} mb={4}>
九、未成年人保护方面
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
1、若您是未满18周岁的未成年人，您应在您的监护人监护、指导下并获得监护人同意的情况下，认真阅读并同意本协议后，方可使用价值前沿app及相关服务。若您未取得监护人的同意，监护人可以通过联系价值前沿官方公布的客服联系方式通知价值前沿处理相关账号，价值前沿有权对相关账号的功能、使用进行限制，包括但不限于浏览、发布信息、互动交流等功能。
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
2、价值前沿重视对未成年人个人信息的保护，未成年用户在填写个人信息时，请加强个人保护意识并谨慎对待，并应在取得监护人的同意以及在监护人指导下正确使用价值前沿app及相关服务。
</Text>
<Text fontSize="xl" color={textColor} lineHeight="1.6" mb={4}>
3、未成年人用户及其监护人理解并确认，如您违反法律法规、本协议内容，则您及您的监护人应依照法律规定承担因此而可能导致的全部法律责任。
</Text>
</Box>
</VStack>
</ModalBody>
</ModalContent>
</Modal>
);
};
export default PrivacyPolicyModal;

2
src/components/ProtectedRoute.js
View File

@@ -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();

60
src/components/RiskDisclaimer/RiskDisclaimer.js
View File

@@ -1,60 +0,0 @@
// src/components/RiskDisclaimer/RiskDisclaimer.js
import React from 'react';
import { Box, Text, HStack, Icon, useColorModeValue } from '@chakra-ui/react';
/**
* 风险提示组件
*
* @param {Object} props
* @param {string} props.text - 风险提示文本内容
* @param {string} props.variant - 文本变体类型 ('default', 'homepage', 'section')
* @param {Object} props.sx - 额外的样式对象
*/
const RiskDisclaimer = ({
text,
variant = 'default',
sx = {},
mt = 0,
mb = 0,
...rest
}) => {
// 极简风格 - 透明背景，固定灰色文字
const textColor = '#999999'; // 固定中性灰，不受主题影响
// 预定义的文本变体
const textVariants = {
homepage: '风险提示：解析内容由价值前沿人工采集整理自新闻、公告、研报等公开信息，团队辛苦编写，未经许可严禁转载。站内所有文章均不构成投资建议，请投资者注意风险，独立审慎决策。',
default: '风险提示：解析内容由价值前沿人工采集整理自新闻、公告、研报等公开信息，团队辛苦编写，未经许可严禁转载。本产品内容均不构成投资建议，请投资者注意风险，独立审慎决策。',
section: '风险提示：解析内容由价值前沿人工采集整理自新闻、公告、研报等公开信息，团队辛苦编写，未经许可严禁转载。本部分产品内容均不构成投资建议，请投资者注意风险，独立审慎决策。'
};
// 使用传入的text或预定义的variant
const displayText = text || textVariants[variant] || textVariants.default;
return (
<Box
bg="transparent"
p={0}
mt={mt}
mb={mb}
width="100%"
sx={sx}
{...rest}
>
<HStack spacing={0} align="flex-start">
<Text
fontSize="xs"
color={textColor}
lineHeight="1.6"
fontWeight="normal"
textAlign="center"
width="100%"
>
{displayText}
</Text>
</HStack>
</Box>
);
};
export default RiskDisclaimer;

2
src/components/RiskDisclaimer/index.js
View File

@@ -1,2 +0,0 @@
// src/components/RiskDisclaimer/index.js
export { default } from './RiskDisclaimer';

167
src/components/StockChangeIndicators.js
View File

@@ -1,167 +0,0 @@
// src/components/StockChangeIndicators.js
// 股票涨跌幅指标组件（通用）
import React from 'react';
import { Flex, Box, Text, useColorModeValue } from '@chakra-ui/react';
import { TriangleUpIcon, TriangleDownIcon } from '@chakra-ui/icons';
/**
* 股票涨跌幅指标组件（3分天下布局）
* @param {Object} props
* @param {number} props.avgChange - 平均涨跌幅
* @param {number} props.maxChange - 最大涨跌幅
* @param {number} props.weekChange - 周涨跌幅
* @param {'default'|'comfortable'|'large'} props.size - 尺寸模式：default=紧凑，comfortable=舒适（事件列表），large=大卡片（详情面板）
*/
const StockChangeIndicators = ({
avgChange,
maxChange,
weekChange,
size = 'default',
}) => {
const isLarge = size === 'large';
const isComfortable = size === 'comfortable';
const isDefault = size === 'default';
// 根据涨跌幅获取数字颜色（统一颜色，不分级）
const getNumberColor = (value) => {
if (value == null) {
return useColorModeValue('gray.700', 'gray.400');
}
// 0值使用中性灰色
if (value === 0) {
return 'gray.700';
}
// 统一颜色：上涨红色，下跌绿色
return value > 0 ? 'red.500' : 'green.500';
};
// 根据涨跌幅获取背景色（永远比文字色浅）
const getBgColor = (value) => {
if (value == null) {
return useColorModeValue('gray.50', 'gray.800');
}
// 0值使用中性灰色背景
if (value === 0) {
return useColorModeValue('gray.50', 'gray.800');
}
// 统一背景色：上涨红色系，下跌绿色系
return value > 0
? useColorModeValue('red.50', 'red.900')
: useColorModeValue('green.50', 'green.900');
};
// 根据涨跌幅获取边框色（比背景深，比文字浅）
const getBorderColor = (value) => {
if (value == null) {
return useColorModeValue('gray.200', 'gray.700');
}
// 0值使用中性灰色边框
if (value === 0) {
return useColorModeValue('gray.200', 'gray.700');
}
// 统一边框色：上涨红色系，下跌绿色系
return value > 0
? useColorModeValue('red.200', 'red.700')
: useColorModeValue('green.200', 'green.700');
};
// 渲染单个指标
const renderIndicator = (label, value) => {
if (value == null) return null;
const sign = value > 0 ? '+' : '-';
// 0值显示为 "0"，其他值显示两位小数
const numStr = value === 0 ? '0' : Math.abs(value).toFixed(2);
const numberColor = getNumberColor(value);
const bgColor = getBgColor(value);
const borderColor = getBorderColor(value);
const labelColor = useColorModeValue('gray.600', 'gray.400');
return (
<Box
bg={bgColor}
borderWidth={isLarge ? "2px" : "1px"}
borderColor={borderColor}
borderRadius="md"
px={isLarge ? 4 : (isDefault ? 1.5 : (isComfortable ? 3 : 2))}
py={isLarge ? 3 : (isDefault ? 1.5 : (isComfortable ? 2 : 1))}
display="flex"
flexDirection={(isLarge || isDefault) ? "column" : "row"}
alignItems={(isLarge || isDefault) ? "flex-start" : "center"}
gap={(isLarge || isDefault) ? (isLarge ? 2 : 1) : 1}
maxW={isLarge ? "200px" : "none"}
flex="0 1 auto"
minW="0"
>
{/* Large 和 Default 模式：标签单独一行 */}
{(isLarge || isDefault) && (
<Text fontSize={isLarge ? "sm" : "xs"} color={labelColor} fontWeight="medium">
{label.trim()}
</Text>
)}
{/* 数值 + 图标 */}
<Flex align="center" gap={isLarge ? 2 : (isDefault ? 1 : 1)}>
{/* 三角形图标 */}
{value !== 0 && (
value > 0 ? (
<TriangleUpIcon
w={2}
h={2}
color={numberColor}
/>
) : (
<TriangleDownIcon
w={2}
h={2}
color={numberColor}
/>
)
)}
{/* 数字 */}
<Text
fontSize={isLarge ? "2xl" : (isDefault ? "md" : "lg")}
fontWeight="bold"
color={numberColor}
lineHeight="1.2"
whiteSpace="nowrap"
overflow="hidden"
textOverflow="ellipsis"
>
{/* Comfortable 模式：标签和数字在同一行 */}
{!isLarge && !isDefault && (
<Text as="span" color={labelColor} fontWeight="medium" fontSize="sm">
{label}
</Text>
)}
{sign}{numStr}
<Text as="span" fontWeight="medium" fontSize="sm">%</Text>
</Text>
</Flex>
</Box>
);
};
// 如果没有任何数据，不渲染
if (avgChange == null && maxChange == null && weekChange == null) {
return null;
}
return (
<Flex width="100%" justify="flex-start" align="center" gap={isLarge ? 4 : (isDefault ? 2 : 1)}>
{renderIndicator('平均涨幅', avgChange)}
{renderIndicator('最大涨幅', maxChange)}
{renderIndicator('周涨幅', weekChange)}
</Flex>
);
};
export default StockChangeIndicators;

16
src/components/StockChart/StockChartAntdModal.js
View File

@@ -7,7 +7,6 @@ import moment from 'moment';
import { stockService } from '../../services/eventService';
import CitedContent from '../Citation/CitedContent';
import { logger } from '../../utils/logger';
import RiskDisclaimer from '../RiskDisclaimer';
const { Text } = Typography;
@@ -564,8 +563,19 @@ const StockChartAntdModal = ({
</div>
) : null}
{/* 风险提示 */}
<RiskDisclaimer variant="default" />
{/* 调试信息 */}
{process.env.NODE_ENV === 'development' && chartData && (
<div style={{ marginTop: 16, padding: 12, backgroundColor: '#f0f0f0', borderRadius: 6, fontSize: '12px' }}>
<Text strong style={{ display: 'block', marginBottom: 4 }}>调试信息:</Text>
<Text>数据条数: {chartData.data ? chartData.data.length : 0}</Text>
<br />
<Text>交易日期: {chartData.trade_date}</Text>
<br />
<Text>图表类型: {activeChartType}</Text>
<br />
<Text>原始事件时间: {eventTime}</Text>
</div>
)}
</div>
</Modal>
);

29
src/components/StockChart/StockChartModal.js
View File

@@ -6,7 +6,6 @@ import * as echarts from 'echarts';
import moment from 'moment';
import { stockService } from '../../services/eventService';
import { logger } from '../../utils/logger';
import RiskDisclaimer from '../RiskDisclaimer';
const StockChartModal = ({
isOpen,
@@ -23,25 +22,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,18 +538,13 @@ 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>
)}
{/* 风险提示 */}
<Box px={4} pb={4}>
<RiskDisclaimer variant="default" />
</Box>
{process.env.NODE_ENV === 'development' && chartData && (
<Box p={4} bg="gray.50" fontSize="xs" color="gray.600">
<Text fontWeight="bold">调试信息:</Text>

660
src/components/Subscription/SubscriptionContent.js
View File

@@ -29,14 +29,10 @@ import {
Td,
Heading,
Collapse,
Input,
InputGroup,
InputRightElement,
} from '@chakra-ui/react';
import React, { useState, useEffect } from 'react';
import { logger } from '../../utils/logger';
import { useAuth } from '../../contexts/AuthContext';
import { useSubscriptionEvents } from '../../hooks/useSubscriptionEvents';
// Icons
import {
@@ -58,14 +54,6 @@ export default function SubscriptionContent() {
// Auth context
const { user } = useAuth();
// 🎯 初始化订阅埋点Hook（传入当前订阅信息）
const subscriptionEvents = useSubscriptionEvents({
currentSubscription: {
plan: user?.subscription_plan || 'free',
status: user?.subscription_status || 'none'
}
});
// Chakra color mode
const textColor = useColorModeValue('gray.700', 'white');
const borderColor = useColorModeValue('gray.200', 'gray.600');
@@ -79,8 +67,7 @@ export default function SubscriptionContent() {
// State
const [subscriptionPlans, setSubscriptionPlans] = useState([]);
const [selectedPlan, setSelectedPlan] = useState(null);
const [selectedCycle, setSelectedCycle] = useState('monthly'); // 保持向后兼容，默认月付
const [selectedCycleOption, setSelectedCycleOption] = useState(null); // 当前选中的pricing_option对象
const [selectedCycle, setSelectedCycle] = useState('monthly');
const [paymentOrder, setPaymentOrder] = useState(null);
const [loading, setLoading] = useState(false);
const [paymentCountdown, setPaymentCountdown] = useState(0);
@@ -89,13 +76,6 @@ export default function SubscriptionContent() {
const [forceUpdating, setForceUpdating] = useState(false);
const [openFaqIndex, setOpenFaqIndex] = useState(null);
// 优惠码相关state
const [promoCode, setPromoCode] = useState('');
const [promoCodeApplied, setPromoCodeApplied] = useState(false);
const [promoCodeError, setPromoCodeError] = useState('');
const [validatingPromo, setValidatingPromo] = useState(false);
const [priceInfo, setPriceInfo] = useState(null); // 价格信息（包含升级计算）
// 加载订阅套餐数据
useEffect(() => {
fetchSubscriptionPlans();
@@ -160,102 +140,7 @@ export default function SubscriptionContent() {
}
};
// 计算价格（包含升级和优惠码）
const calculatePrice = async (plan, cycle, promoCodeValue = null) => {
try {
// 确保优惠码值正确：只接受非空字符串，其他情况传null
const validPromoCode = promoCodeValue && typeof promoCodeValue === 'string' && promoCodeValue.trim()
? promoCodeValue.trim()
: null;
logger.debug('SubscriptionContent', '计算价格', {
plan: plan.name,
cycle,
promoCodeValue,
validPromoCode
});
const response = await fetch('/api/subscription/calculate-price', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
credentials: 'include',
body: JSON.stringify({
to_plan: plan.name,
to_cycle: cycle,
promo_code: validPromoCode
})
});
if (response.ok) {
const data = await response.json();
if (data.success) {
setPriceInfo(data.data);
return data.data;
}
}
return null;
} catch (error) {
logger.error('SubscriptionContent', 'calculatePrice', error);
return null;
}
};
// 验证优惠码
const handleValidatePromoCode = async () => {
const trimmedCode = promoCode.trim();
if (!trimmedCode) {
setPromoCodeError('请输入优惠码');
return;
}
if (!selectedPlan) {
setPromoCodeError('请先选择套餐');
return;
}
setValidatingPromo(true);
setPromoCodeError('');
try {
// 重新计算价格，包含优惠码（使用去除空格后的值）
const result = await calculatePrice(selectedPlan, selectedCycle, trimmedCode);
if (result && !result.promo_error) {
setPromoCodeApplied(true);
toast({
title: '优惠码已应用',
description: `节省 ¥${result.discount_amount.toFixed(2)}`,
status: 'success',
duration: 3000,
isClosable: true,
});
} else {
setPromoCodeError(result?.promo_error || '优惠码无效');
setPromoCodeApplied(false);
}
} catch (error) {
setPromoCodeError('验证失败，请重试');
setPromoCodeApplied(false);
} finally {
setValidatingPromo(false);
}
};
// 移除优惠码
const handleRemovePromoCode = async () => {
setPromoCode('');
setPromoCodeApplied(false);
setPromoCodeError('');
// 重新计算价格（不含优惠码）
if (selectedPlan) {
await calculatePrice(selectedPlan, selectedCycle, null);
}
};
const handleSubscribe = async (plan) => {
const handleSubscribe = (plan) => {
if (!user) {
toast({
title: '请先登录',
@@ -276,18 +161,7 @@ export default function SubscriptionContent() {
return;
}
// 🎯 追踪定价方案选择
subscriptionEvents.trackPricingPlanSelected(
plan.name,
selectedCycle,
selectedCycle === 'monthly' ? plan.monthly_price : plan.yearly_price
);
setSelectedPlan(plan);
// 计算价格（包含升级判断）
await calculatePrice(plan, selectedCycle, promoCodeApplied ? promoCode : null);
onPaymentModalOpen();
};
@@ -296,17 +170,6 @@ export default function SubscriptionContent() {
setLoading(true);
try {
const price = priceInfo?.final_amount || (selectedCycle === 'monthly' ? selectedPlan.monthly_price : selectedPlan.yearly_price);
// 🎯 追踪支付发起
subscriptionEvents.trackPaymentInitiated({
planName: selectedPlan.name,
paymentMethod: 'wechat_pay',
amount: price,
billingCycle: selectedCycle,
orderId: null // Will be set after order creation
});
const response = await fetch('/api/payment/create-order', {
method: 'POST',
headers: {
@@ -315,8 +178,7 @@ export default function SubscriptionContent() {
credentials: 'include',
body: JSON.stringify({
plan_name: selectedPlan.name,
billing_cycle: selectedCycle,
promo_code: promoCodeApplied ? promoCode : null
billing_cycle: selectedCycle
})
});
@@ -342,13 +204,6 @@ export default function SubscriptionContent() {
throw new Error('网络错误');
}
} catch (error) {
// 🎯 追踪支付失败
subscriptionEvents.trackPaymentFailed({
planName: selectedPlan.name,
paymentMethod: 'wechat_pay',
amount: selectedCycle === 'monthly' ? selectedPlan.monthly_price : selectedPlan.yearly_price
}, error.message);
toast({
title: '创建订单失败',
description: error.message,
@@ -396,26 +251,6 @@ export default function SubscriptionContent() {
setAutoCheckInterval(null);
logger.info('SubscriptionContent', '自动检测到支付成功', { orderId });
// 🎯 追踪支付成功
subscriptionEvents.trackPaymentSuccessful({
planName: selectedPlan?.name,
paymentMethod: 'wechat_pay',
amount: paymentOrder?.amount,
billingCycle: selectedCycle,
orderId: orderId,
transactionId: data.transaction_id
});
// 🎯 追踪订阅创建
subscriptionEvents.trackSubscriptionCreated({
plan: selectedPlan?.name,
billingCycle: selectedCycle,
amount: paymentOrder?.amount,
startDate: new Date().toISOString(),
endDate: null // Will be calculated by backend
});
toast({
title: '支付成功！',
description: '订阅已激活，正在跳转...',
@@ -588,83 +423,15 @@ export default function SubscriptionContent() {
const getCurrentPrice = (plan) => {
if (!plan) return 0;
// 如果有pricing_options，使用它
if (plan.pricing_options && plan.pricing_options.length > 0) {
// 查找当前选中的周期选项
const option = plan.pricing_options.find(opt =>
opt.cycle_key === selectedCycle ||
(selectedCycle === 'monthly' && opt.months === 1) ||
(selectedCycle === 'yearly' && opt.months === 12)
);
return option ? option.price : plan.monthly_price;
}
// 向后兼容：回退到monthly_price/yearly_price
return selectedCycle === 'monthly' ? plan.monthly_price : plan.yearly_price;
};
const getSavingsText = (plan) => {
if (!plan) return null;
// 如果有pricing_options，从中查找discount_percent
if (plan.pricing_options && plan.pricing_options.length > 0) {
const currentOption = plan.pricing_options.find(opt =>
opt.cycle_key === selectedCycle ||
(selectedCycle === 'monthly' && opt.months === 1) ||
(selectedCycle === 'yearly' && opt.months === 12)
);
if (currentOption && currentOption.discount_percent) {
return `立减 ${currentOption.discount_percent}%`;
}
// 如果没有discount_percent，尝试计算节省金额
if (currentOption && currentOption.months > 1) {
const monthlyOption = plan.pricing_options.find(opt => opt.months === 1);
if (monthlyOption) {
const expectedTotal = monthlyOption.price * currentOption.months;
const savings = expectedTotal - currentOption.price;
if (savings > 0) {
const percentage = Math.round((savings / expectedTotal) * 100);
return `${currentOption.label || `${currentOption.months}个月`}节省 ${percentage}%`;
}
}
}
}
// 向后兼容：计算年付节省
if (selectedCycle === 'yearly') {
const yearlyTotal = plan.monthly_price * 12;
const savings = yearlyTotal - plan.yearly_price;
if (savings > 0) {
const percentage = Math.round((savings / yearlyTotal) * 100);
return `年付节省 ${percentage}%`;
}
}
return null;
};
// 获取按钮文字（根据用户当前订阅判断是升级还是新订阅）
const getButtonText = (plan, user) => {
if (!user || user.subscription_type === 'free') {
return `选择 ${plan.display_name}`;
}
// 判断是否为升级
const planLevels = { 'free': 0, 'pro': 1, 'max': 2 };
const currentLevel = planLevels[user.subscription_type] || 0;
const targetLevel = planLevels[plan.name] || 0;
if (targetLevel > currentLevel) {
return `升级至 ${plan.display_name}`;
} else if (targetLevel < currentLevel) {
return `切换至 ${plan.display_name}`;
} else {
// 同级别，可能是切换周期
return `切换至 ${plan.display_name}`;
}
if (!plan || selectedCycle !== 'yearly') return null;
const yearlyTotal = plan.monthly_price * 12;
const savings = yearlyTotal - plan.yearly_price;
const percentage = Math.round((savings / yearlyTotal) * 100);
return `年付节省 ${percentage}%`;
};
// 统一的功能列表定义 - 基于商业定价(10月15日)文档
@@ -757,107 +524,36 @@ export default function SubscriptionContent() {
)}
{/* 计费周期选择 */}
<Box>
<Text textAlign="center" fontSize="sm" color={secondaryText} mb={3}>
选择计费周期 · 时长越长优惠越大
</Text>
<Flex justify="center" mb={2}>
<HStack
spacing={2}
bg={bgAccent}
borderRadius="xl"
p={2}
border="1px solid"
borderColor={borderColor}
flexWrap="wrap"
justify="center"
<Flex justify="center">
<HStack
spacing={0}
bg={bgAccent}
borderRadius="lg"
p={1}
border="1px solid"
borderColor={borderColor}
>
<Button
variant={selectedCycle === 'monthly' ? 'solid' : 'ghost'}
colorScheme={selectedCycle === 'monthly' ? 'blue' : 'gray'}
size="md"
onClick={() => setSelectedCycle('monthly')}
borderRadius="md"
>
{(() => {
// 获取第一个套餐的pricing_options作为周期选项（假设所有套餐都有相同的周期）
const firstPlan = subscriptionPlans.find(plan => plan.pricing_options);
const cycleOptions = firstPlan?.pricing_options || [
{ cycle_key: 'monthly', label: '月付', months: 1 },
{ cycle_key: 'yearly', label: '年付', months: 12, discount_percent: 20 }
];
return cycleOptions.map((option, index) => {
const cycleKey = option.cycle_key || (option.months === 1 ? 'monthly' : option.months === 12 ? 'yearly' : `${option.months}months`);
const isSelected = selectedCycle === cycleKey;
const hasDiscount = option.discount_percent && option.discount_percent > 0;
return (
<VStack
key={index}
spacing={0}
position="relative"
>
{/* 折扣标签 */}
{hasDiscount && (
<Badge
position="absolute"
top="-8px"
colorScheme="red"
fontSize="xs"
px={2}
borderRadius="full"
fontWeight="bold"
>
省{option.discount_percent}%
</Badge>
)}
<Button
variant={isSelected ? 'solid' : 'outline'}
colorScheme={isSelected ? 'blue' : 'gray'}
size="md"
onClick={() => setSelectedCycle(cycleKey)}
borderRadius="lg"
minW="80px"
h="50px"
position="relative"
_hover={{
transform: 'translateY(-2px)',
shadow: 'md'
}}
transition="all 0.2s"
>
<VStack spacing={0}>
<Text fontSize="md" fontWeight="bold">
{option.label || `${option.months}个月`}
</Text>
{hasDiscount && (
<Text fontSize="xs" color={isSelected ? 'white' : 'gray.500'}>
更优惠
</Text>
)}
</VStack>
</Button>
</VStack>
);
});
})()}
</HStack>
</Flex>
{/* 提示文字 */}
{(() => {
const firstPlan = subscriptionPlans.find(plan => plan.pricing_options);
const cycleOptions = firstPlan?.pricing_options || [];
const currentOption = cycleOptions.find(opt =>
opt.cycle_key === selectedCycle ||
(selectedCycle === 'monthly' && opt.months === 1) ||
(selectedCycle === 'yearly' && opt.months === 12)
);
if (currentOption && currentOption.discount_percent > 0) {
return (
<Text textAlign="center" fontSize="sm" color="green.600" fontWeight="medium">
🎉 当前选择可节省 {currentOption.discount_percent}% 的费用
</Text>
);
}
return null;
})()}
</Box>
按月付费
</Button>
<Button
variant={selectedCycle === 'yearly' ? 'solid' : 'ghost'}
colorScheme={selectedCycle === 'yearly' ? 'blue' : 'gray'}
size="md"
onClick={() => setSelectedCycle('yearly')}
borderRadius="md"
>
按年付费
<Badge ml={2} colorScheme="red" fontSize="xs">省20%</Badge>
</Button>
</HStack>
</Flex>
{/* 订阅套餐 */}
<Grid
@@ -1030,69 +726,19 @@ export default function SubscriptionContent() {
{getCurrentPrice(plan).toFixed(0)}
</Text>
<Text fontSize="sm" color={secondaryText}>
{(() => {
if (plan.pricing_options) {
const option = plan.pricing_options.find(opt =>
opt.cycle_key === selectedCycle ||
(selectedCycle === 'monthly' && opt.months === 1) ||
(selectedCycle === 'yearly' && opt.months === 12)
);
if (option) {
// 如果months是1，显示"/月"；如果是12，显示"/年"；否则显示周期label
if (option.months === 1) return '/月';
if (option.months === 12) return '/年';
return `/${option.months}个月`;
}
}
return selectedCycle === 'monthly' ? '/月' : '/年';
})()}
/{selectedCycle === 'monthly' ? '月' : '年'}
</Text>
</HStack>
</Flex>
<Flex justify="space-between" align="center" flexWrap="wrap" gap={2}>
<Text fontSize="xs" color={secondaryText} pl={11} flex={1}>
<Flex justify="space-between" align="center">
<Text fontSize="xs" color={secondaryText} pl={11}>
{plan.description}
</Text>
{(() => {
// 获取当前选中的周期信息
if (plan.pricing_options) {
const currentOption = plan.pricing_options.find(opt =>
opt.cycle_key === selectedCycle ||
(selectedCycle === 'monthly' && opt.months === 1) ||
(selectedCycle === 'yearly' && opt.months === 12)
);
if (currentOption && currentOption.discount_percent > 0) {
// 计算原价和节省金额
const monthlyOption = plan.pricing_options.find(opt => opt.months === 1);
if (monthlyOption) {
const originalPrice = monthlyOption.price * currentOption.months;
const savedAmount = originalPrice - currentOption.price;
return (
<VStack spacing={0} align="flex-end">
<Badge colorScheme="red" fontSize="xs" px={3} py={1} borderRadius="full">
立省 {currentOption.discount_percent}%
</Badge>
<Text fontSize="xs" color="gray.500" textDecoration="line-through">
原价¥{originalPrice.toFixed(0)}
</Text>
<Text fontSize="xs" color="green.600" fontWeight="bold">
省¥{savedAmount.toFixed(0)}
</Text>
</VStack>
);
}
return (
<Badge colorScheme="green" fontSize="xs" px={3} py={1} borderRadius="full">
{getSavingsText(plan)}
</Badge>
);
}
}
return null;
})()}
{getSavingsText(plan) && (
<Badge colorScheme="green" fontSize="xs" px={2} py={1}>
{getSavingsText(plan)}
</Badge>
)}
</Flex>
</VStack>
@@ -1138,8 +784,7 @@ export default function SubscriptionContent() {
onClick={() => handleSubscribe(plan)}
isDisabled={
user?.subscription_type === plan.name &&
user?.subscription_status === 'active' &&
user?.billing_cycle === selectedCycle
user?.subscription_status === 'active'
}
_hover={{
transform: 'scale(1.02)',
@@ -1147,10 +792,9 @@ export default function SubscriptionContent() {
transition="all 0.2s"
>
{user?.subscription_type === plan.name &&
user?.subscription_status === 'active' &&
user?.billing_cycle === selectedCycle
? '✓ 当前套餐'
: getButtonText(plan, user)
user?.subscription_status === 'active'
? '✓ 已订阅'
: `选择 ${plan.display_name}`
}
</Button>
</VStack>
@@ -1260,7 +904,7 @@ export default function SubscriptionContent() {
align="center"
>
<Text fontWeight="semibold" color={textColor}>
升级或切换套餐时，原套餐的费用怎么办？
可以在月付和年付之间切换吗？
</Text>
<Icon
as={openFaqIndex === 2 ? FaChevronUp : FaChevronDown}
@@ -1269,28 +913,14 @@ export default function SubscriptionContent() {
</Flex>
<Collapse in={openFaqIndex === 2}>
<Box p={4} pt={0} color={secondaryText}>
<VStack spacing={2} align="stretch">
<Text>
当您升级套餐或切换计费周期时，系统会自动计算您当前订阅的剩余价值并用于抵扣新套餐的费用。
</Text>
<Text fontWeight="medium" fontSize="sm">
计算方式：
</Text>
<Text fontSize="sm" pl={3}>
• <strong>剩余价值</strong> = 原套餐价格 × (剩余天数 / 总天数)
</Text>
<Text fontSize="sm" pl={3}>
• <strong>实付金额</strong> = 新套餐价格 - 剩余价值 - 优惠码折扣
</Text>
<Text fontSize="sm" color="blue.600" mt={2}>
例如：您购买了年付Pro版（¥999），使用了180天后升级到Max版（¥1999/年），剩余价值约¥500将自动抵扣，实付约¥1499。
</Text>
</VStack>
<Text>
可以。您可以随时更改计费周期。如果从月付切换到年付，系统会计算剩余价值并应用到新的订阅中。年付用户可享受20%的折扣优惠。
</Text>
</Box>
</Collapse>
</Box>
{/* FAQ 4 - 原FAQ 3 */}
{/* FAQ 4 */}
<Box
border="1px solid"
borderColor={borderColor}
@@ -1308,7 +938,7 @@ export default function SubscriptionContent() {
align="center"
>
<Text fontWeight="semibold" color={textColor}>
可以在月付和年付之间切换吗？
是否提供退款？
</Text>
<Icon
as={openFaqIndex === 3 ? FaChevronUp : FaChevronDown}
@@ -1318,13 +948,13 @@ export default function SubscriptionContent() {
<Collapse in={openFaqIndex === 3}>
<Box p={4} pt={0} color={secondaryText}>
<Text>
可以。您可以随时更改计费周期。如果从月付切换到年付，系统会计算剩余价值并应用到新的订阅中。年付用户可享受20%的折扣优惠。
我们提供7天无理由退款保证。如果您在订阅后7天内对服务不满意，可以申请全额退款。超过7天后，我们将根据实际使用情况进行评估。
</Text>
</Box>
</Collapse>
</Box>
{/* FAQ 5 - 原FAQ 4 */}
{/* FAQ 5 */}
<Box
border="1px solid"
borderColor={borderColor}
@@ -1342,7 +972,7 @@ export default function SubscriptionContent() {
align="center"
>
<Text fontWeight="semibold" color={textColor}>
是否支持退款？
Pro版和Max版有什么区别？
</Text>
<Icon
as={openFaqIndex === 4 ? FaChevronUp : FaChevronDown}
@@ -1350,60 +980,6 @@ export default function SubscriptionContent() {
/>
</Flex>
<Collapse in={openFaqIndex === 4}>
<Box p={4} pt={0} color={secondaryText}>
<VStack spacing={2} align="stretch">
<Text>
为了保障服务质量和维护公平的商业环境，我们<strong>不支持退款</strong>。
</Text>
<Text fontSize="sm">
建议您在订阅前：
</Text>
<Text fontSize="sm" pl={3}>
• 充分了解各套餐的功能差异
</Text>
<Text fontSize="sm" pl={3}>
• 使用免费版体验基础功能
</Text>
<Text fontSize="sm" pl={3}>
• 根据实际需求选择合适的计费周期
</Text>
<Text fontSize="sm" pl={3}>
• 如有疑问可联系客服咨询
</Text>
<Text fontSize="sm" color="blue.600" mt={2}>
提示：选择长期套餐（如半年付、年付）可享受更大折扣，性价比更高。
</Text>
</VStack>
</Box>
</Collapse>
</Box>
{/* FAQ 6 - 原FAQ 5 */}
<Box
border="1px solid"
borderColor={borderColor}
borderRadius="lg"
overflow="hidden"
>
<Flex
p={4}
cursor="pointer"
onClick={() => setOpenFaqIndex(openFaqIndex === 5 ? null : 5)}
bg={openFaqIndex === 5 ? bgAccent : 'transparent'}
_hover={{ bg: bgAccent }}
transition="all 0.2s"
justify="space-between"
align="center"
>
<Text fontWeight="semibold" color={textColor}>
Pro版和Max版有什么区别？
</Text>
<Icon
as={openFaqIndex === 5 ? FaChevronUp : FaChevronDown}
color={textColor}
/>
</Flex>
<Collapse in={openFaqIndex === 5}>
<Box p={4} pt={0} color={secondaryText}>
<Text>
Pro版适合个人专业用户，提供高级图表、历史数据分析等功能。Max版则是为团队和企业设计，额外提供实时数据推送、API访问、无限制的数据存储和团队协作功能，并享有优先技术支持。
@@ -1422,11 +998,6 @@ export default function SubscriptionContent() {
stopAutoPaymentCheck();
setPaymentOrder(null);
setPaymentCountdown(0);
// 清空优惠码状态
setPromoCode('');
setPromoCodeApplied(false);
setPromoCodeError('');
setPriceInfo(null);
onPaymentModalClose();
}}
size="lg"
@@ -1457,76 +1028,16 @@ export default function SubscriptionContent() {
</Flex>
<Flex justify="space-between">
<Text color={secondaryText}>计费周期:</Text>
<Text>
{(() => {
if (selectedPlan?.pricing_options) {
const option = selectedPlan.pricing_options.find(opt =>
opt.cycle_key === selectedCycle ||
(selectedCycle === 'monthly' && opt.months === 1) ||
(selectedCycle === 'yearly' && opt.months === 12)
);
return option?.label || (selectedCycle === 'monthly' ? '按月付费' : '按年付费');
}
return selectedCycle === 'monthly' ? '按月付费' : '按年付费';
})()}
</Text>
<Text>{selectedCycle === 'monthly' ? '按月付费' : '按年付费'}</Text>
</Flex>
{/* 价格明细 */}
<Divider my={2} />
{priceInfo && priceInfo.is_upgrade && (
<Box bg="blue.50" p={3} borderRadius="md" mb={2}>
<HStack spacing={2} mb={2}>
<Icon as={FaCheck} color="blue.500" boxSize={4} />
<Text fontSize="sm" fontWeight="bold" color="blue.700">
{priceInfo.upgrade_type === 'plan_upgrade' ? '套餐升级' :
priceInfo.upgrade_type === 'cycle_change' ? '周期变更' : '套餐和周期调整'}
</Text>
</HStack>
<VStack spacing={1} align="stretch" fontSize="xs">
<Flex justify="space-between" color="gray.600">
<Text>当前订阅: {priceInfo.current_plan === 'pro' ? 'Pro版' : 'Max版'} ({priceInfo.current_cycle === 'monthly' ? '月付' : '年付'})</Text>
</Flex>
<Flex justify="space-between" color="gray.600">
<Text>剩余价值:</Text>
<Text>¥{priceInfo.remaining_value.toFixed(2)}</Text>
</Flex>
</VStack>
</Box>
)}
<Flex justify="space-between">
<Text color={secondaryText}>
{priceInfo && priceInfo.is_upgrade ? '新套餐价格:' : '套餐价格:'}
</Text>
<Text fontWeight="medium">
¥{priceInfo ? priceInfo.new_plan_price.toFixed(2) : getCurrentPrice(selectedPlan).toFixed(2)}
</Text>
</Flex>
{priceInfo && priceInfo.is_upgrade && priceInfo.remaining_value > 0 && (
<Flex justify="space-between" color="blue.600">
<Text>已付剩余抵扣:</Text>
<Text>-¥{priceInfo.remaining_value.toFixed(2)}</Text>
</Flex>
)}
{priceInfo && priceInfo.discount_amount > 0 && (
<Flex justify="space-between" color="green.600">
<Text>优惠码折扣:</Text>
<Text>-¥{priceInfo.discount_amount.toFixed(2)}</Text>
</Flex>
)}
<Divider />
<Flex justify="space-between" align="baseline">
<Text fontSize="lg" fontWeight="bold">实付金额:</Text>
<Text color={secondaryText}>应付金额:</Text>
<Text fontSize="2xl" fontWeight="bold" color="blue.500">
¥{priceInfo ? priceInfo.final_amount.toFixed(2) : getCurrentPrice(selectedPlan).toFixed(2)}
¥{getCurrentPrice(selectedPlan).toFixed(2)}
</Text>
</Flex>
{getSavingsText(selectedPlan) && !priceInfo?.is_upgrade && (
{getSavingsText(selectedPlan) && (
<Badge colorScheme="green" alignSelf="flex-end" fontSize="xs">
{getSavingsText(selectedPlan)}
</Badge>
@@ -1539,53 +1050,6 @@ export default function SubscriptionContent() {
</Box>
)}
{/* 优惠码输入 */}
{selectedPlan && (
<Box>
<HStack spacing={2}>
<Input
placeholder="输入优惠码（可选）"
value={promoCode}
onChange={(e) => {
setPromoCode(e.target.value.toUpperCase());
setPromoCodeError('');
}}
size="md"
isDisabled={promoCodeApplied}
/>
<Button
colorScheme="purple"
onClick={handleValidatePromoCode}
isLoading={validatingPromo}
isDisabled={!promoCode || promoCodeApplied}
minW="80px"
>
应用
</Button>
</HStack>
{promoCodeError && (
<Text color="red.500" fontSize="sm" mt={2}>
{promoCodeError}
</Text>
)}
{promoCodeApplied && priceInfo && (
<HStack mt={2} p={2} bg="green.50" borderRadius="md">
<Icon as={FaCheck} color="green.500" />
<Text color="green.700" fontSize="sm" fontWeight="medium" flex={1}>
优惠码已应用！节省 ¥{priceInfo.discount_amount.toFixed(2)}
</Text>
<Icon
as={FaTimes}
color="gray.500"
cursor="pointer"
onClick={handleRemovePromoCode}
_hover={{ color: 'red.500' }}
/>
</HStack>
)}
</Box>
)}
<Button
colorScheme="green"
size="lg"

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