feat: 删除不需要的组件

问题描述：
- 用户选择所有筛选条件后，点击"重置"按钮无反应
- 筛选条件未被清空，事件列表未重新加载

根本原因：
- 当筛选条件从"有值"重置为"空值"或从"空值"重置为"空值"时
- 如果 filters 对象的字段值没有实质变化
- DynamicNewsCard 的 useEffect 依赖项检测不到变化，不会触发重新加载

解决方案：
1. UnifiedSearchBox.handleReset() 添加 _forceRefresh 时间戳标志
   - 每次重置都生成唯一的 Date.now() 时间戳
   - 确保 filters 对象每次重置都不同

2. DynamicNewsCard 筛选 useEffect 依赖数组添加 filters._forceRefresh
   - 监听强制刷新标志的变化
   - 即使其他筛选条件未变，也能触发重新加载

3. 增强调试日志
   - 添加完整的重置流程日志输出
   - 便于排查后续问题

修改文件：
- src/views/Community/components/UnifiedSearchBox.js (Line 505-536)
- src/views/Community/components/DynamicNewsCard.js (Line 264)

测试场景：
✅ 选择所有筛选条件后点击重置 - 清空并重新加载
✅ 未选择筛选条件时点击重置 - 强制刷新第1页
✅ 重置后 Redux 缓存被清空 (clearCache: true)

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

Co-Authored-By: Claude <noreply@anthropic.com>

CLAUDE.md

@@ -4,24 +4,24 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-This is a hybrid React dashboard application with a Flask/Python backend for financial/trading analysis. Built on the Argon Dashboard Chakra PRO template with extensive customization.
+Hybrid React dashboard for financial/trading analysis with Flask backend. Built on Argon Dashboard Chakra PRO template.
 
-### Frontend (React + Chakra UI)
-- **Framework**: React 18.3.1 with Chakra UI 2.8.2
-- **State Management**: Redux Toolkit (@reduxjs/toolkit)
-- **Routing**: React Router DOM v6 with lazy loading for code splitting
-- **Styling**: Tailwind CSS + custom Chakra theme
-- **Build Tool**: CRACO (Create React App Configuration Override) with custom webpack optimizations
-- **Charts**: ApexCharts, ECharts, Recharts, D3
-- **UI Components**: Ant Design (antd) alongside Chakra UI
-- **Other Libraries**: Three.js (@react-three), FullCalendar, Leaflet maps
+### Tech Stack
 
-### Backend (Flask/Python)
-- **Framework**: Flask with SQLAlchemy ORM
-- **Database**: ClickHouse for analytics queries + MySQL/PostgreSQL
-- **Real-time**: Flask-SocketIO for WebSocket connections
-- **Task Queue**: Celery with Redis for background processing
-- **External APIs**: Tencent Cloud SMS, WeChat Pay integration
+**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
 
 ## Development Commands
 
@@ -46,89 +46,265 @@ npm run reinstall            # Clean install (runs clean + install)
 
 ### Backend Development
 ```bash
-python app.py              # Main Flask server (newer version)
-python app_2.py            # Flask server (appears to be current main)
-python simulation_background_processor.py  # Background data processor for simulations
+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
 ```
 
 ### Deployment
 ```bash
-npm run deploy               # Executes scripts/deploy-from-local.sh
-npm run deploy:setup         # Setup deployment (scripts/setup-deployment.sh)
-npm run rollback             # Rollback deployment (scripts/rollback-from-local.sh)
-```
-
-### Python Dependencies
-```bash
-pip install -r requirements.txt
+npm run deploy        # Deploy from local (scripts/deploy-from-local.sh)
+npm run rollback      # Rollback to previous version
 ```
 
 ## Architecture
 
-### Frontend Structure
-- **src/App.js** - Main application entry with route definitions (routing moved from src/routes.js)
-- **src/layouts/** - Layout wrappers (Auth, Home, MainLayout)
-- **src/views/** - Page components (Community, Company, TradingSimulation, etc.)
-- **src/components/** - Reusable UI components
-- **src/contexts/** - React contexts (AuthContext, NotificationContext, IndustryContext)
-- **src/store/** - Redux store with slices (posthogSlice, etc.)
-- **src/services/** - API service layer
-- **src/theme/** - Chakra UI theme customization
-- **src/mocks/** - MSW (Mock Service Worker) handlers for development
-  - src/mocks/handlers/ - Request handlers by domain
-  - src/mocks/data/ - Mock data files
-  - src/mocks/browser.js - MSW browser setup
+### 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)
+```
 
 ### Backend Structure
-- **app.py / app_2.py** - Main Flask application with routes, authentication, and business logic
-- **simulation_background_processor.py** - Background processor for trading simulations
-- **wechat_pay.py / wechat_pay_config.py** - WeChat payment integration
-- **concept_api.py** - API for concept/industry analysis
-- **tdays.csv** - Trading days calendar data (loaded into memory at startup)
+```
+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
+```
 
-### Key Integrations
-- **ClickHouse** - High-performance analytics queries
-- **Celery + Redis** - Background task processing
-- **Flask-SocketIO** - Real-time data updates via WebSocket
-- **Tencent Cloud** - SMS services
-- **WeChat Pay** - Payment processing
-- **PostHog** - Analytics (initialized in Redux)
-- **MSW** - API mocking for development/testing
+### 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.)
 
-### Routing & Code Splitting
-- Routing is defined in **src/App.js** (not src/routes.js - that file is deprecated)
-- Heavy components use React.lazy() for code splitting (Community, TradingSimulation, etc.)
-- Protected routes use ProtectedRoute and ProtectedRouteRedirect components
+### Real-time Updates
+- Flask-SocketIO for WebSocket connections
+- Example: Community event notifications push via WebSocket
+- Client: `socket.io-client` library
 
 ## Configuration
 
 ### Environment Files
-Multiple environment configurations available:
-- **.env.mock** - Mock data mode (default for `npm start`)
-- **.env.local** - Real backend connection
-- **.env.development** - Development environment
-- **.env.test** - Test environment
+```
+.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
+```
 
-### Build Configuration (craco.config.js)
-- **Webpack caching**: Filesystem cache for faster rebuilds (50-80% improvement)
-- **Code splitting**: Aggressive chunk splitting by library (react-vendor, charts-lib, chakra-ui, antd-lib, three-lib, etc.)
-- **Path aliases**: `@` → src/, `@components` → src/components/, `@views` → src/views/, `@assets` → src/assets/, `@contexts` → src/contexts/
-- **Optimizations**: ESLint plugin removed from build for speed, Babel caching enabled, moment locale stripping
-- **Source maps**: Disabled in production, eval-cheap-module-source-map in development
-- **Dev server proxy**: `/api` requests proxy to http://49.232.185.254:5001
+**Key environment variables:**
+- `REACT_APP_ENABLE_MOCK=true` - Enable MSW mocking
+- `REACT_APP_API_URL` - Backend URL (empty string = use relative paths or MSW)
 
-### Important Build Notes
-- Uses NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096' for Node compatibility
-- Gulp task adds Creative Tim license headers post-build
-- Bundle analyzer available via `ANALYZE=true npm run build:analyze`
-- Pre-build: kills any process on port 3000
+### MSW (Mock Service Worker) Setup
+MSW is used for API mocking during development:
 
-## Testing
-- **React Testing Library** for component tests
-- **MSW** (Mock Service Worker) for API mocking during tests
-- Run tests: `npm test`
+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
 
-## Deployment
-- Deployment scripts in **scripts/** directory
-- Build output processed by Gulp for licensing
-- Supports rollback via scripts/rollback-from-local.sh
+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`
+
+### 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
+
+**Node compatibility:**
+```bash
+NODE_OPTIONS='--openssl-legacy-provider --max_old_space_size=4096'
+```
+
+## Development Workflow
+
+### 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

app.py

@@ -706,11 +706,38 @@ 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,
@@ -718,6 +745,7 @@ 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
@@ -776,6 +804,10 @@ 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(),
@@ -786,6 +818,107 @@ 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')
+
+
 # ============================================
 # 模拟盘相关模型
 # ============================================
@@ -982,8 +1115,15 @@ def get_user_subscription_safe(user_id):
         return DefaultSub()
 
 
-def activate_user_subscription(user_id, plan_type, billing_cycle):
-    """激活用户订阅"""
+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: 是否从当前时间开始延长（用于升级场景）
+    """
     try:
         subscription = UserSubscription.query.filter_by(user_id=user_id).first()
         if not subscription:
@@ -993,7 +1133,9 @@ def activate_user_subscription(user_id, plan_type, billing_cycle):
         subscription.subscription_type = plan_type
         subscription.subscription_status = 'active'
         subscription.billing_cycle = billing_cycle
-        subscription.start_date = beijing_now()
+
+        if not extend_from_now or not subscription.start_date:
+            subscription.start_date = beijing_now()
 
         if billing_cycle == 'monthly':
             subscription.end_date = beijing_now() + timedelta(days=30)
@@ -1007,6 +1149,195 @@ def activate_user_subscription(user_id, plan_type, billing_cycle):
         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:
@@ -1112,16 +1443,24 @@ 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': 0.01,
-                'yearly_price': 0.08,
-                'features': ['基础股票分析工具', '历史数据查询', '基础财务报表'],
+                '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': ['基础股票分析工具', '历史数据查询', '基础财务报表', '简单投资计划记录', '标准客服支持'],
                 'is_active': True,
                 'sort_order': 1
             },
@@ -1130,9 +1469,17 @@ def get_subscription_plans():
                 'name': 'max',
                 'display_name': 'Max版本',
                 'description': '适合专业投资者的全功能套餐',
-                'monthly_price': 0.1,
-                'yearly_price': 0.8,
-                'features': ['全部Pro版本功能', '高级分析工具', '实时数据推送'],
+                '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访问', '优先客服支持'],
                 'is_active': True,
                 'sort_order': 2
             }
@@ -1189,9 +1536,90 @@ 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
@@ -1199,23 +1627,21 @@ 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
 
-        # 获取套餐信息
-        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)
+        # 计算价格（包括升级和优惠码）
+        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:
@@ -1225,10 +1651,52 @@ 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:
-            return jsonify({'success': False, 'error': '订单创建失败'}), 500
+            db.session.rollback()
+            return jsonify({'success': False, 'error': f'订单创建失败: {str(e)}'}), 500
 
         # 尝试调用真实的微信支付API
         try:
@@ -1420,6 +1888,26 @@ 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")

craco.config.js

@@ -2,6 +2,9 @@ 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 }) => {
@@ -27,7 +30,7 @@ module.exports = {
             chunks: 'all',
             maxInitialRequests: 30,
             minSize: 20000,
-            maxSize: 244000, // 限制单个 chunk 最大大小（约 244KB）
+            maxSize: 512000, // 限制单个 chunk 最大大小（512KB，与 performance.maxAssetSize 一致）
             cacheGroups: {
               // React 核心库单独分离
               react: {
@@ -47,7 +50,7 @@ module.exports = {
               chakraUI: {
                 test: /[\\/]node_modules[\\/](@chakra-ui|@emotion)[\\/]/,
                 name: 'chakra-ui',
-                priority: 22,
+                priority: 23, // 从 22 改为 23，避免与 antd 优先级冲突
                 reuseExistingChunk: true,
               },
               // Ant Design
@@ -236,21 +239,31 @@ module.exports = {
     devMiddleware: {
       writeToDisk: false,
     },
-    // 代理配置：将 /api 请求代理到后端服务器
-    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': '' },
-      },
+
+    // 调试日志
+    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': '' },
+        },
+      },
+    }),
   },
 };

database_migration_add_pricing_options.sql

@@ -0,0 +1,59 @@
+-- 数据库迁移：添加 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. 用户可以通过优惠码获得额外折扣

migrations/add_promo_code_tables.sql

@@ -0,0 +1,134 @@
+-- 数据库迁移脚本：添加优惠码和订阅升级相关表
+-- 执行时间：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;

package.json

@@ -22,6 +22,7 @@
     "@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",

public/manifest.json

@@ -4,8 +4,24 @@
   "icons": [
     {
       "src": "favicon.png",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "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"
     }
   ],
   "start_url": "./index.html",

public/mockServiceWorker.js

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

public/service-worker.js

@@ -0,0 +1,92 @@
+// 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');

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

@@ -106,7 +106,29 @@ const FollowingEventsMenu = memo(() => {
                                                         )}
                                                     </HStack>
                                                 </Box>
-                                                <HStack flexShrink={0}>
+                                                <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={
@@ -119,6 +141,7 @@ const FollowingEventsMenu = memo(() => {
                                                             {ev.related_avg_chg.toFixed(2)}%
                                                         </Badge>
                                                     )}
+                                                    {/* 周涨跌幅 */}
                                                     {typeof ev.related_week_chg === 'number' && (
                                                         <Badge
                                                             colorScheme={
@@ -131,6 +154,7 @@ const FollowingEventsMenu = memo(() => {
                                                             {ev.related_week_chg.toFixed(2)}%
                                                         </Badge>
                                                     )}
+                                                    {/* 取消关注按钮 */}
                                                     <Box
                                                         as="span"
                                                         fontSize="xs"

src/components/PrivacyPolicyModal.js

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

src/components/StockChangeIndicators.js

@@ -3,6 +3,7 @@
 
 import React from 'react';
 import { Flex, Box, Text, useColorModeValue } from '@chakra-ui/react';
+import { TriangleUpIcon, TriangleDownIcon } from '@chakra-ui/icons';
 
 /**
  * 股票涨跌幅指标组件（3分天下布局）
@@ -10,13 +11,19 @@ import { Flex, Box, Text, useColorModeValue } from '@chakra-ui/react';
  * @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',
 }) => {
-    // 根据涨跌幅获取数字颜色（多颜色梯度：5级分级）
+    const isLarge = size === 'large';
+    const isComfortable = size === 'comfortable';
+    const isDefault = size === 'default';
+
+    // 根据涨跌幅获取数字颜色（统一颜色，不分级）
     const getNumberColor = (value) => {
         if (value == null) {
             return useColorModeValue('gray.700', 'gray.400');
@@ -27,24 +34,8 @@ const StockChangeIndicators = ({
             return 'gray.700';
         }
 
-        const absValue = Math.abs(value);
-        const isPositive = value > 0;
-
-        if (isPositive) {
-            // 上涨：红色系 → 橙色系
-            if (absValue >= 10) return 'red.900';      // 10%以上：最深红
-            if (absValue >= 5) return 'red.700';       // 5-10%：深红
-            if (absValue >= 3) return 'red.500';       // 3-5%：中红
-            if (absValue >= 1) return 'orange.600';    // 1-3%：橙色
-            return 'orange.400';                       // 0-1%：浅橙
-        } else {
-            // 下跌：绿色系 → 青色系
-            if (absValue >= 10) return 'green.900';    // -10%以下：最深绿
-            if (absValue >= 5) return 'green.700';     // -10% ~ -5%：深绿
-            if (absValue >= 3) return 'green.500';     // -5% ~ -3%：中绿
-            if (absValue >= 1) return 'teal.600';      // -3% ~ -1%：青色
-            return 'teal.400';                         // -1% ~ 0%：浅青
-        }
+        // 统一颜色：上涨红色，下跌绿色
+        return value > 0 ? 'red.500' : 'green.500';
     };
 
     // 根据涨跌幅获取背景色（永远比文字色浅）
@@ -58,24 +49,10 @@ const StockChangeIndicators = ({
             return useColorModeValue('gray.50', 'gray.800');
         }
 
-        const absValue = Math.abs(value);
-        const isPositive = value > 0;
-
-        if (isPositive) {
-            // 上涨背景：红色系 → 橙色系（统一使用 50 最浅色）
-            if (absValue >= 10) return useColorModeValue('red.50', 'red.900');
-            if (absValue >= 5) return useColorModeValue('red.50', 'red.900');
-            if (absValue >= 3) return useColorModeValue('red.50', 'red.900');
-            if (absValue >= 1) return useColorModeValue('orange.50', 'orange.900');
-            return useColorModeValue('orange.50', 'orange.900');
-        } else {
-            // 下跌背景：绿色系 → 青色系（统一使用 50 最浅色）
-            if (absValue >= 10) return useColorModeValue('green.50', 'green.900');
-            if (absValue >= 5) return useColorModeValue('green.50', 'green.900');
-            if (absValue >= 3) return useColorModeValue('green.50', 'green.900');
-            if (absValue >= 1) return useColorModeValue('teal.50', 'teal.900');
-            return useColorModeValue('teal.50', 'teal.900');
-        }
+        // 统一背景色：上涨红色系，下跌绿色系
+        return value > 0
+            ? useColorModeValue('red.50', 'red.900')
+            : useColorModeValue('green.50', 'green.900');
     };
 
     // 根据涨跌幅获取边框色（比背景深，比文字浅）
@@ -89,64 +66,86 @@ const StockChangeIndicators = ({
             return useColorModeValue('gray.200', 'gray.700');
         }
 
-        const absValue = Math.abs(value);
-        const isPositive = value > 0;
-
-        if (isPositive) {
-            // 上涨边框：红色系 → 橙色系（跟随文字深浅）
-            if (absValue >= 10) return useColorModeValue('red.200', 'red.800');      // 文字 red.900
-            if (absValue >= 5) return useColorModeValue('red.200', 'red.700');       // 文字 red.700
-            if (absValue >= 3) return useColorModeValue('red.100', 'red.600');       // 文字 red.500
-            if (absValue >= 1) return useColorModeValue('orange.200', 'orange.700'); // 文字 orange.600
-            return useColorModeValue('orange.100', 'orange.600');                    // 文字 orange.400
-        } else {
-            // 下跌边框：绿色系 → 青色系（跟随文字深浅）
-            if (absValue >= 10) return useColorModeValue('green.200', 'green.800');  // 文字 green.900
-            if (absValue >= 5) return useColorModeValue('green.200', 'green.700');   // 文字 green.700
-            if (absValue >= 3) return useColorModeValue('green.100', 'green.600');   // 文字 green.500
-            if (absValue >= 1) return useColorModeValue('teal.200', 'teal.700');     // 文字 teal.600
-            return useColorModeValue('teal.100', 'teal.600');                        // 文字 teal.400
-        }
+        // 统一边框色：上涨红色系，下跌绿色系
+        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(1);
+        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.700', 'gray.400');
+        const labelColor = useColorModeValue('gray.600', 'gray.400');
 
         return (
             <Box
                 bg={bgColor}
-                borderWidth="2px"
+                borderWidth={isLarge ? "2px" : "1px"}
                 borderColor={borderColor}
                 borderRadius="md"
-                px={1.5}
-                py={0.5}
+                px={isLarge ? 4 : (isDefault ? 1.5 : (isComfortable ? 3 : 2))}
+                py={isLarge ? 3 : (isDefault ? 1.5 : (isComfortable ? 2 : 1))}
                 display="flex"
-                alignItems="center"
-                justifyContent="center"
+                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"
             >
-                <Text fontSize="xs" lineHeight="1.2">
-                    <Text as="span" color={labelColor}>
-                        {label}
+                {/* Large 和 Default 模式：标签单独一行 */}
+                {(isLarge || isDefault) && (
+                    <Text fontSize={isLarge ? "sm" : "xs"} color={labelColor} fontWeight="medium">
+                        {label.trim()}
                     </Text>
-                    <Text as="span" color={labelColor}>
-                        {sign}
+                )}
+
+                {/* 数值 + 图标 */}
+                <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>
-                    <Text as="span" fontWeight="bold" color={numberColor} fontSize="sm">
-                        {value < 0 ? '-' : ''}{numStr}
-                    </Text>
-                    <Text as="span" color={labelColor}>
-                        %
-                    </Text>
-                </Text>
+                </Flex>
             </Box>
         );
     };
@@ -157,10 +156,10 @@ const StockChangeIndicators = ({
     }
 
     return (
-        <Flex width="100%" justify="space-between" align="center" gap={1}>
-            {renderIndicator('平均 ', avgChange)}
-            {renderIndicator('最大 ', maxChange)}
-            {renderIndicator('周涨 ', weekChange)}
+        <Flex width="100%" justify="flex-start" align="center" gap={isLarge ? 4 : (isDefault ? 2 : 1)}>
+            {renderIndicator('平均涨幅', avgChange)}
+            {renderIndicator('最大涨幅', maxChange)}
+            {renderIndicator('周涨幅', weekChange)}
         </Flex>
     );
 };

src/components/Subscription/SubscriptionContent.js

@@ -29,6 +29,9 @@ import {
   Td,
   Heading,
   Collapse,
+  Input,
+  InputGroup,
+  InputRightElement,
 } from '@chakra-ui/react';
 import React, { useState, useEffect } from 'react';
 import { logger } from '../../utils/logger';
@@ -76,7 +79,8 @@ export default function SubscriptionContent() {
   // State
   const [subscriptionPlans, setSubscriptionPlans] = useState([]);
   const [selectedPlan, setSelectedPlan] = useState(null);
-  const [selectedCycle, setSelectedCycle] = useState('monthly');
+  const [selectedCycle, setSelectedCycle] = useState('monthly'); // 保持向后兼容，默认月付
+  const [selectedCycleOption, setSelectedCycleOption] = useState(null); // 当前选中的pricing_option对象
   const [paymentOrder, setPaymentOrder] = useState(null);
   const [loading, setLoading] = useState(false);
   const [paymentCountdown, setPaymentCountdown] = useState(0);
@@ -85,6 +89,13 @@ 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();
@@ -149,7 +160,102 @@ export default function SubscriptionContent() {
     }
   };
 
-  const handleSubscribe = (plan) => {
+  // 计算价格（包含升级和优惠码）
+  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) => {
     if (!user) {
       toast({
         title: '请先登录',
@@ -178,6 +284,10 @@ export default function SubscriptionContent() {
     );
 
     setSelectedPlan(plan);
+
+    // 计算价格（包含升级判断）
+    await calculatePrice(plan, selectedCycle, promoCodeApplied ? promoCode : null);
+
     onPaymentModalOpen();
   };
 
@@ -186,7 +296,7 @@ export default function SubscriptionContent() {
 
     setLoading(true);
     try {
-      const price = selectedCycle === 'monthly' ? selectedPlan.monthly_price : selectedPlan.yearly_price;
+      const price = priceInfo?.final_amount || (selectedCycle === 'monthly' ? selectedPlan.monthly_price : selectedPlan.yearly_price);
 
       // 🎯 追踪支付发起
       subscriptionEvents.trackPaymentInitiated({
@@ -205,7 +315,8 @@ export default function SubscriptionContent() {
         credentials: 'include',
         body: JSON.stringify({
           plan_name: selectedPlan.name,
-          billing_cycle: selectedCycle
+          billing_cycle: selectedCycle,
+          promo_code: promoCodeApplied ? promoCode : null
         })
       });
 
@@ -477,15 +588,83 @@ 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 || 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}%`;
+    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}`;
+    }
   };
 
   // 统一的功能列表定义 - 基于商业定价(10月15日)文档
@@ -578,36 +757,107 @@ export default function SubscriptionContent() {
       )}
 
       {/* 计费周期选择 */}
-      <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"
+      <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"
           >
-            按月付费
-          </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>
+            {(() => {
+              // 获取第一个套餐的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>
 
       {/* 订阅套餐 */}
       <Grid
@@ -780,19 +1030,69 @@ export default function SubscriptionContent() {
                       {getCurrentPrice(plan).toFixed(0)}
                     </Text>
                     <Text fontSize="sm" color={secondaryText}>
-                      /{selectedCycle === 'monthly' ? '月' : '年'}
+                      {(() => {
+                        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' ? '/月' : '/年';
+                      })()}
                     </Text>
                   </HStack>
                 </Flex>
-                <Flex justify="space-between" align="center">
-                  <Text fontSize="xs" color={secondaryText} pl={11}>
+                <Flex justify="space-between" align="center" flexWrap="wrap" gap={2}>
+                  <Text fontSize="xs" color={secondaryText} pl={11} flex={1}>
                     {plan.description}
                   </Text>
-                  {getSavingsText(plan) && (
-                    <Badge colorScheme="green" fontSize="xs" px={2} py={1}>
-                      {getSavingsText(plan)}
-                    </Badge>
-                  )}
+                  {(() => {
+                    // 获取当前选中的周期信息
+                    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;
+                  })()}
                 </Flex>
               </VStack>
 
@@ -838,7 +1138,8 @@ export default function SubscriptionContent() {
                 onClick={() => handleSubscribe(plan)}
                 isDisabled={
                   user?.subscription_type === plan.name &&
-                  user?.subscription_status === 'active'
+                  user?.subscription_status === 'active' &&
+                  user?.billing_cycle === selectedCycle
                 }
                 _hover={{
                   transform: 'scale(1.02)',
@@ -846,9 +1147,10 @@ export default function SubscriptionContent() {
                 transition="all 0.2s"
               >
                 {user?.subscription_type === plan.name &&
-                 user?.subscription_status === 'active'
-                  ? '✓ 已订阅'
-                  : `选择 ${plan.display_name}`
+                 user?.subscription_status === 'active' &&
+                 user?.billing_cycle === selectedCycle
+                  ? '✓ 当前套餐'
+                  : getButtonText(plan, user)
                 }
               </Button>
             </VStack>
@@ -958,7 +1260,7 @@ export default function SubscriptionContent() {
               align="center"
             >
               <Text fontWeight="semibold" color={textColor}>
-                可以在月付和年付之间切换吗？
+                升级或切换套餐时，原套餐的费用怎么办？
               </Text>
               <Icon
                 as={openFaqIndex === 2 ? FaChevronUp : FaChevronDown}
@@ -967,14 +1269,28 @@ export default function SubscriptionContent() {
             </Flex>
             <Collapse in={openFaqIndex === 2}>
               <Box p={4} pt={0} color={secondaryText}>
-                <Text>
-                  可以。您可以随时更改计费周期。如果从月付切换到年付，系统会计算剩余价值并应用到新的订阅中。年付用户可享受20%的折扣优惠。
-                </Text>
+                <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>
               </Box>
             </Collapse>
           </Box>
 
-          {/* FAQ 4 */}
+          {/* FAQ 4 - 原FAQ 3 */}
           <Box
             border="1px solid"
             borderColor={borderColor}
@@ -992,7 +1308,7 @@ export default function SubscriptionContent() {
               align="center"
             >
               <Text fontWeight="semibold" color={textColor}>
-                是否提供退款？
+                可以在月付和年付之间切换吗？
               </Text>
               <Icon
                 as={openFaqIndex === 3 ? FaChevronUp : FaChevronDown}
@@ -1002,13 +1318,13 @@ export default function SubscriptionContent() {
             <Collapse in={openFaqIndex === 3}>
               <Box p={4} pt={0} color={secondaryText}>
                 <Text>
-                  我们提供7天无理由退款保证。如果您在订阅后7天内对服务不满意，可以申请全额退款。超过7天后，我们将根据实际使用情况进行评估。
+                  可以。您可以随时更改计费周期。如果从月付切换到年付，系统会计算剩余价值并应用到新的订阅中。年付用户可享受20%的折扣优惠。
                 </Text>
               </Box>
             </Collapse>
           </Box>
 
-          {/* FAQ 5 */}
+          {/* FAQ 5 - 原FAQ 4 */}
           <Box
             border="1px solid"
             borderColor={borderColor}
@@ -1026,7 +1342,7 @@ export default function SubscriptionContent() {
               align="center"
             >
               <Text fontWeight="semibold" color={textColor}>
-                Pro版和Max版有什么区别？
+                是否支持退款？
               </Text>
               <Icon
                 as={openFaqIndex === 4 ? FaChevronUp : FaChevronDown}
@@ -1034,6 +1350,60 @@ 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访问、无限制的数据存储和团队协作功能，并享有优先技术支持。
@@ -1052,6 +1422,11 @@ export default function SubscriptionContent() {
             stopAutoPaymentCheck();
             setPaymentOrder(null);
             setPaymentCountdown(0);
+            // 清空优惠码状态
+            setPromoCode('');
+            setPromoCodeApplied(false);
+            setPromoCodeError('');
+            setPriceInfo(null);
             onPaymentModalClose();
           }}
           size="lg"
@@ -1082,16 +1457,76 @@ export default function SubscriptionContent() {
                       </Flex>
                       <Flex justify="space-between">
                         <Text color={secondaryText}>计费周期:</Text>
-                        <Text>{selectedCycle === 'monthly' ? '按月付费' : '按年付费'}</Text>
-                      </Flex>
-                      <Divider />
-                      <Flex justify="space-between" align="baseline">
-                        <Text color={secondaryText}>应付金额:</Text>
-                        <Text fontSize="2xl" fontWeight="bold" color="blue.500">
-                          ¥{getCurrentPrice(selectedPlan).toFixed(2)}
+                        <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>
                       </Flex>
-                      {getSavingsText(selectedPlan) && (
+
+                      {/* 价格明细 */}
+                      <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 fontSize="2xl" fontWeight="bold" color="blue.500">
+                          ¥{priceInfo ? priceInfo.final_amount.toFixed(2) : getCurrentPrice(selectedPlan).toFixed(2)}
+                        </Text>
+                      </Flex>
+                      {getSavingsText(selectedPlan) && !priceInfo?.is_upgrade && (
                         <Badge colorScheme="green" alignSelf="flex-end" fontSize="xs">
                           {getSavingsText(selectedPlan)}
                         </Badge>
@@ -1104,6 +1539,53 @@ 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"

src/components/SubscriptionBadge.js

@@ -0,0 +1,83 @@
+// src/components/SubscriptionBadge.js
+// 会员专享标签组件
+
+import React from 'react';
+import {
+  Badge,
+  HStack,
+  Icon,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { FaStar, FaCrown } from 'react-icons/fa';
+import { logger } from '../utils/logger';
+
+/**
+ * 会员专享标签组件
+ * @param {Object} props
+ * @param {'pro' | 'max'} props.tier - 会员等级：pro 或 max
+ * @param {'sm' | 'md'} props.size - 标签尺寸
+ */
+const SubscriptionBadge = ({ tier = 'pro', size = 'sm' }) => {
+  // PRO 和 MAX 配置
+  const config = {
+    pro: {
+      label: 'PRO专享',
+      icon: FaStar,
+      bgGradient: 'linear(to-r, blue.400, purple.500)',
+      color: 'white',
+    },
+    max: {
+      label: 'MAX专享',
+      icon: FaCrown,
+      bgGradient: 'linear(to-r, pink.400, red.500)',
+      color: 'white',
+    },
+  };
+
+  const tierConfig = config[tier] || config.pro;
+
+  // 尺寸配置
+  const sizeConfig = {
+    sm: {
+      fontSize: 'xs',
+      iconSize: 2.5,
+      px: 2,
+      py: 0.5,
+    },
+    md: {
+      fontSize: 'sm',
+      iconSize: 3,
+      px: 3,
+      py: 1,
+    },
+  };
+
+  const currentSize = sizeConfig[size] || sizeConfig.sm;
+
+  return (
+    <Badge
+      bgGradient={tierConfig.bgGradient}
+      color={tierConfig.color}
+      borderRadius="full"
+      px={currentSize.px}
+      py={currentSize.py}
+      fontSize={currentSize.fontSize}
+      fontWeight="bold"
+      boxShadow="sm"
+      display="inline-flex"
+      alignItems="center"
+      gap={1}
+      transition="all 0.2s"
+      _hover={{
+        transform: 'scale(1.05)',
+        boxShadow: 'md',
+      }}
+    >
+      <Icon as={tierConfig.icon} boxSize={currentSize.iconSize} />
+      <Text>{tierConfig.label}</Text>
+    </Badge>
+  );
+};
+
+export default SubscriptionBadge;

src/components/UserAgreementModal.js

@@ -1,275 +0,0 @@
-import React from "react";
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalCloseButton,
-  Text,
-  Box,
-  VStack,
-  Divider,
-  useColorModeValue
-} from "@chakra-ui/react";
-
-const UserAgreementModal = ({ 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="orange.50" p={6} borderRadius="lg" border="1px solid" borderColor="orange.100">
-              <Text fontSize="xl" fontWeight="bold" color="orange.700" mb={6}>
-                欢迎你使用价值前沿及服务！
-              </Text>
-              <Text fontSize="lg" color={textColor} lineHeight="1.8" mb={5}>
-                为使用价值前沿（以下简称"本软件"）及服务，你应当阅读并遵守《价值前沿用户协议》（以下简称"本协议"）。请你务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的单独协议，并选择接受或不接受。限制、免责条款可能以加粗形式提示你注意。
-              </Text>
-              <Text fontSize="lg" color={textColor} lineHeight="1.8" mb={5}>
-                除非你已阅读并接受本协议所有条款，否则你无权下载、安装或使用本软件及相关服务。你的下载、安装、使用、获取价值前沿帐号、登录等行为即视为你已阅读并同意上述协议的约束。
-              </Text>
-              <Text fontSize="lg" color={textColor} lineHeight="1.8" fontWeight="medium">
-                如果你未满18周岁，请在法定监护人的陪同下阅读本协议及其他上述协议，并特别注意未成年人使用条款。
-              </Text>
-            </Box>
-
-            <Divider />
-
-            <Box>
-              <Text fontSize="xl" fontWeight="bold" color={headingColor} mb={6}>
-                一、协议的范围
-              </Text>
-              
-              <Box pl={4} borderLeft="3px solid" borderColor="blue.300" bg="blue.50" p={4} borderRadius="md" mb={4}>
-                <Text fontSize="lg" fontWeight="semibold" color="blue.700" mb={2}>
-                  1.1 协议适用主体范围
-                </Text>
-                <Text fontSize="lg" color={textColor} lineHeight="1.8">
-                  本协议是你与北京价值前沿科技有限公司之间关于你下载、安装、使用、复制本软件，以及使用价值前沿相关服务所订立的协议。
-                </Text>
-              </Box>
-
-              <Box pl={4} borderLeft="3px solid" borderColor="green.300" bg="green.50" p={4} borderRadius="md" mb={4}>
-                <Text fontSize="lg" fontWeight="semibold" color="green.700" mb={2}>
-                  1.2 协议关系及冲突条款
-                </Text>
-                <Text fontSize="lg" color={textColor} lineHeight="1.8">
-                  本协议内容同时包括北京价值前沿科技有限公司可能不断发布的关于本服务的相关协议、业务规则等内容。上述内容一经正式发布，即为本协议不可分割的组成部分，你同样应当遵守。
-                </Text>
-              </Box>
-
-              <Box pl={4} borderLeft="3px solid" borderColor="purple.300" bg="purple.50" p={4} borderRadius="md" mb={4}>
-                <Text fontSize="lg" fontWeight="semibold" color="purple.700" mb={2}>
-                  1.3 许可范围
-                </Text>
-                <Text fontSize="lg" color={textColor} lineHeight="1.8">
-                  明确标识免费产品的，用户可以进行自用的、非商业性、无限制数量地下载、安装及使用，但不得复制、分发。其他收费类产品或者信息，除遵守本协议规定之外，还须遵守专门协议的规定。
-                </Text>
-              </Box>
-
-              <Box pl={4} borderLeft="3px solid" borderColor="red.300" bg="red.50" p={4} borderRadius="md">
-                <Text fontSize="lg" fontWeight="semibold" color="red.700" mb={2}>
-                  1.4 权利限制
-                </Text>
-                <Text fontSize="lg" color={textColor} lineHeight="1.8">
-                  禁止反向工程、反向编译和反向汇编：用户不得对价值前沿软件类产品进行反向工程、反向编译或反向汇编，同时不得改动编译程序文件内部的任何资源。除法律、法规明文规定允许上述活动外，用户必须遵守此协议限制。
-                </Text>
-              </Box>
-            </Box>
-
-            <Divider />
-
-            <Box>
-              <Text fontSize="lg" fontWeight="bold" color={headingColor} mb={4}>
-                二、关于本服务
-              </Text>
-              
-              <Text fontSize="lg" color={textColor} lineHeight="1.8" mb={4}>
-                本服务内容是指北京价值前沿科技有限公司向用户提供的跨平台的社交资讯工具（以下简称"价值前沿"），支持单人、多人参与，在发布图片和文字等内容服务的基础上，同时为用户提供包括但不限于社交关系拓展、便捷工具等功能或内容的软件服务（以下简称"本服务"）。
-              </Text>
-            </Box>
-
-            <Divider />
-
-            <Box>
-              <Text fontSize="lg" fontWeight="bold" color={headingColor} mb={4}>
-                三、免责条款
-              </Text>
-              
-              <Text fontSize="lg" color={textColor} lineHeight="1.8" mb={4}>
-                北京价值前沿科技有限公司作为面向全球投资人提供信息和服务的商家，对以下情况不承担相关责任：
-              </Text>
-
-              <VStack align="stretch" spacing={3}>
-                <Box pl={4} borderLeft="3px solid" borderColor="yellow.400" bg="yellow.50" p={3} borderRadius="md">
-                  <Text fontSize="lg" fontWeight="semibold" color="yellow.700" mb={2}>
-                    1）不可抗力
-                  </Text>
-                  <Text fontSize="md" color={textColor} lineHeight="1.6">
-                    如因发生自然灾害、战争、第三方侵害等不可控因素而发生的信息、服务中断，价值前沿不承担相应责任。
-                  </Text>
-                </Box>
-
-                <Box pl={4} borderLeft="3px solid" borderColor="yellow.400" bg="yellow.50" p={3} borderRadius="md">
-                  <Text fontSize="lg" fontWeight="semibold" color="yellow.700" mb={2}>
-                    2）信息网络传播
-                  </Text>
-                  <Text fontSize="md" color={textColor} lineHeight="1.6">
-                    如因信息网络传播中的拥塞、断续、病毒木马、黑客窃取侦听等网络通道上的因素，而造成信息缺失、丢失、延迟、被篡改等，价值前沿不对此承担相应责任。
-                  </Text>
-                </Box>
-
-                <Box pl={4} borderLeft="3px solid" borderColor="yellow.400" bg="yellow.50" p={3} borderRadius="md">
-                  <Text fontSize="lg" fontWeight="semibold" color="yellow.700" mb={2}>
-                    3）第三方信息的收集整理
-                  </Text>
-                  <Text fontSize="md" color={textColor} lineHeight="1.6">
-                    价值前沿为了更好地服务投资者，便于用户分析研判投资环境，尽可能多地收集整理来自第三方的所有信息，分门别类地提供给用户参考，并明确标识为来自第三方的信息，而对内容的真实性、合理性、完整性、合法性等并不承担判断责任，也不承担用户因信息而造成的损失责任。
-                  </Text>
-                </Box>
-
-                <Box pl={4} borderLeft="3px solid" borderColor="yellow.400" bg="yellow.50" p={3} borderRadius="md">
-                  <Text fontSize="lg" fontWeight="semibold" color="yellow.700" mb={2}>
-                    4）证券信息汇总
-                  </Text>
-                  <Text fontSize="md" color={textColor} lineHeight="1.6">
-                    价值前沿仅提供证券信息汇总及证券投资品种历史数据统计功能，不针对用户提供任何情况判断、投资参考、品种操作建议等等，不属于荐股软件。用户按照自身对于市场环境的分析研判而做出的评论参考，用户可以结合自身需求予以借鉴，并自行作出判断，风险和收益都由用户自行承担。
-                  </Text>
-                </Box>
-
-                <Box pl={4} borderLeft="3px solid" borderColor="yellow.400" bg="yellow.50" p={3} borderRadius="md">
-                  <Text fontSize="lg" fontWeight="semibold" color="yellow.700" mb={2}>
-                    5）信息储存
-                  </Text>
-                  <Text fontSize="md" color={textColor} lineHeight="1.6">
-                    用户在使用价值前沿系统时，会因信息注册、产品购买、软件使用过程中的某些需求，而留存于系统中的账户、密码、真实身份、联系方式、用户网络信息等个人信息，价值前沿将按照国家相关规定进行必要的保护。
-                  </Text>
-                </Box>
-              </VStack>
-            </Box>
-
-            <Divider />
-
-            <Box>
-              <Text fontSize="lg" fontWeight="bold" color={headingColor} mb={4}>
-                四、用户个人信息保护
-              </Text>
-              
-              <Text fontSize="lg" color={textColor} lineHeight="1.8" mb={4}>
-                保护用户个人信息是北京价值前沿科技有限公司的一项基本原则，北京价值前沿科技有限公司将会采取合理的措施保护用户的个人信息。除法律法规规定的情形外，未经用户许可北京价值前沿科技有限公司不会向第三方公开、透露用户个人信息。
-              </Text>
-              
-              <Text fontSize="lg" color={textColor} lineHeight="1.8" mb={4}>
-                你在注册帐号或使用本服务的过程中，需要提供一些必要的信息，例如：为向你提供帐号注册服务或进行用户身份识别，需要你填写手机号码；手机通讯录匹配功能需要你授权访问手机通讯录等。若国家法律法规或政策有特殊规定的，你需要提供真实的身份信息。
-              </Text>
-            </Box>
-
-            <Divider />
-
-            <Box>
-              <Text fontSize="lg" fontWeight="bold" color={headingColor} mb={4}>
-                五、用户行为规范
-              </Text>
-              
-              <Text fontSize="lg" color={textColor} lineHeight="1.8" mb={4}>
-                你理解并同意，价值前沿一直致力于为用户提供文明健康、规范有序的网络环境，你不得利用价值前沿帐号或本软件及服务制作、复制、发布、传播干扰正常运营，以及侵犯其他用户或第三方合法权益的内容。
-              </Text>
-
-              <Box pl={4} borderLeft="3px solid" borderColor="red.400" bg="red.50" p={4} borderRadius="md">
-                <Text fontSize="lg" fontWeight="semibold" color="red.700" mb={2}>
-                  禁止内容包括但不限于：
-                </Text>
-                <VStack align="start" spacing={1} pl={4}>
-                  <Text fontSize="md" color={textColor}>• 违反宪法确定的基本原则的内容</Text>
-                  <Text fontSize="md" color={textColor}>• 危害国家安全，泄露国家秘密的内容</Text>
-                  <Text fontSize="md" color={textColor}>• 损害国家荣誉和利益的内容</Text>
-                  <Text fontSize="md" color={textColor}>• 散布谣言，扰乱社会秩序的内容</Text>
-                  <Text fontSize="md" color={textColor}>• 散布淫秽、色情、赌博、暴力、恐怖的内容</Text>
-                  <Text fontSize="md" color={textColor}>• 侮辱或者诽谤他人，侵害他人合法权益的内容</Text>
-                  <Text fontSize="md" color={textColor}>• 其他违反法律法规的内容</Text>
-                </VStack>
-              </Box>
-            </Box>
-
-            <Divider />
-
-            <Box>
-              <Text fontSize="lg" fontWeight="bold" color={headingColor} mb={4}>
-                六、知识产权声明
-              </Text>
-              
-              <Text fontSize="lg" color={textColor} lineHeight="1.8" mb={4}>
-                北京价值前沿科技有限公司是本软件的知识产权权利人。本软件的一切著作权、商标权、专利权、商业秘密等知识产权，以及与本软件相关的所有信息内容（包括但不限于文字、图片、音频、视频、图表、界面设计、版面框架、有关数据或电子文档等）均受中华人民共和国法律法规和相应的国际条约保护。
-              </Text>
-              
-              <Text fontSize="lg" color={textColor} lineHeight="1.8" mb={4}>
-                未经北京价值前沿科技有限公司或相关权利人书面同意，你不得为任何商业或非商业目的自行或许可任何第三方实施、利用、转让上述知识产权。
-              </Text>
-            </Box>
-
-            <Divider />
-
-            <Box>
-              <Text fontSize="lg" fontWeight="bold" color={headingColor} mb={4}>
-                七、其他条款
-              </Text>
-              
-              <Text fontSize="lg" color={textColor} lineHeight="1.8" mb={4}>
-                你使用本软件即视为你已阅读并同意受本协议的约束。北京价值前沿科技有限公司有权在必要时修改本协议条款。你可以在本软件的最新版本中查阅相关协议条款。
-              </Text>
-              
-              <Text fontSize="lg" color={textColor} lineHeight="1.8" mb={4}>
-                本协议签订地为中华人民共和国北京市海淀区。本协议的成立、生效、履行、解释及纠纷解决，适用中华人民共和国大陆地区法律（不包括冲突法）。
-              </Text>
-              
-              <Text fontSize="lg" color={textColor} lineHeight="1.8">
-                若你和北京价值前沿科技有限公司之间发生任何纠纷或争议，首先应友好协商解决；协商不成的，你同意将纠纷或争议提交本协议签订地有管辖权的人民法院管辖。
-              </Text>
-            </Box>
-          </VStack>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  );
-};
-
-export default UserAgreementModal;

src/constants/importanceLevels.js

@@ -19,7 +19,8 @@ export const IMPORTANCE_LEVELS = {
         bgColor: 'red.50',
         borderColor: 'red.200',
         colorScheme: 'red',
-        badgeBg: 'red.800', // 角标边框和文字颜色 - 极深红色
+        badgeBg: '#dc2626', // 圆形徽章背景色 - 红色
+        badgeColor: 'white', // 圆形徽章文字颜色 - 白色
         icon: WarningIcon,
         label: '极高',
         dotBg: 'red.800',
@@ -32,7 +33,8 @@ export const IMPORTANCE_LEVELS = {
         bgColor: 'red.50',
         borderColor: 'red.200',
         colorScheme: 'red',
-        badgeBg: 'red.600', // 角标边框和文字颜色 - 深红色
+        badgeBg: '#ea580c', // 圆形徽章背景色 - 橙色
+        badgeColor: 'white', // 圆形徽章文字颜色 - 白色
         icon: WarningTwoIcon,
         label: '高',
         dotBg: 'red.600',
@@ -45,7 +47,8 @@ export const IMPORTANCE_LEVELS = {
         bgColor: 'red.50',
         borderColor: 'red.100',
         colorScheme: 'red',
-        badgeBg: 'red.500', // 角标边框和文字颜色 - 中红色
+        badgeBg: '#2563eb', // 圆形徽章背景色 - 蓝色
+        badgeColor: 'white', // 圆形徽章文字颜色 - 白色
         icon: InfoIcon,
         label: '中',
         dotBg: 'red.500',
@@ -58,7 +61,8 @@ export const IMPORTANCE_LEVELS = {
         bgColor: 'red.50',
         borderColor: 'red.100',
         colorScheme: 'red',
-        badgeBg: 'red.400', // 角标边框和文字颜色 - 浅红色
+        badgeBg: '#6b7280', // 圆形徽章背景色 - 灰色
+        badgeColor: 'white', // 圆形徽章文字颜色 - 白色
         icon: CheckCircleIcon,
         label: '低',
         dotBg: 'red.400',

src/index.js

@@ -11,6 +11,49 @@ import './styles/brainwave-colors.css';
 // Import the main App component
 import App from './App';
 
+// 注册 Service Worker（用于支持浏览器通知）
+function registerServiceWorker() {
+    // ⚠️ Mock 模式下跳过 Service Worker 注册（避免与 MSW 冲突）
+    if (process.env.REACT_APP_ENABLE_MOCK === 'true') {
+        console.log(
+            '%c[App] Mock 模式已启用，跳过通知 Service Worker 注册（避免与 MSW 冲突）',
+            'color: #FF9800; font-weight: bold;'
+        );
+        return;
+    }
+
+    // 仅在支持 Service Worker 的浏览器中注册
+    if ('serviceWorker' in navigator) {
+        // 在页面加载完成后注册
+        window.addEventListener('load', () => {
+            navigator.serviceWorker
+                .register('/service-worker.js')
+                .then((registration) => {
+                    console.log('[App] Service Worker registered successfully:', registration.scope);
+
+                    // 监听更新
+                    registration.addEventListener('updatefound', () => {
+                        const newWorker = registration.installing;
+                        console.log('[App] Service Worker update found');
+
+                        if (newWorker) {
+                            newWorker.addEventListener('statechange', () => {
+                                if (newWorker.state === 'activated') {
+                                    console.log('[App] Service Worker activated');
+                                }
+                            });
+                        }
+                    });
+                })
+                .catch((error) => {
+                    console.error('[App] Service Worker registration failed:', error);
+                });
+        });
+    } else {
+        console.warn('[App] Service Worker is not supported in this browser');
+    }
+}
+
 // 启动 Mock Service Worker（如果启用）
 async function startApp() {
     // 只在开发环境启动 MSW
@@ -35,6 +78,9 @@ async function startApp() {
             </Router>
         </React.StrictMode>
     );
+
+    // 注册 Service Worker
+    registerServiceWorker();
 }
 
 // 启动应用

src/lib/posthog.js

@@ -92,7 +92,7 @@ export const initPostHog = () => {
       loaded: (posthogInstance) => {
         if (process.env.NODE_ENV === 'development') {
           console.log('✅ PostHog initialized successfully');
-          posthogInstance.debug(); // Enable debug mode in development
+          // posthogInstance.debug(); // 已关闭：减少控制台日志噪音
         }
       },
     });
@@ -143,7 +143,7 @@ export const identifyUser = (userId, userProperties = {}) => {
       ...userProperties,
     });
 
-    console.log('👤 User identified:', userId);
+    // console.log('👤 User identified:', userId); // 已关闭：减少日志
   } catch (error) {
     console.error('❌ User identification failed:', error);
   }
@@ -158,7 +158,7 @@ export const identifyUser = (userId, userProperties = {}) => {
 export const setUserProperties = (properties) => {
   try {
     posthog.people.set(properties);
-    console.log('📝 User properties updated');
+    // console.log('📝 User properties updated'); // 已关闭：减少日志
   } catch (error) {
     console.error('❌ Failed to update user properties:', error);
   }
@@ -177,9 +177,9 @@ export const trackEvent = (eventName, properties = {}) => {
       timestamp: new Date().toISOString(),
     });
 
-    if (process.env.NODE_ENV === 'development') {
-      console.log('📍 Event tracked:', eventName, properties);
-    }
+    // if (process.env.NODE_ENV === 'development') {
+    //   console.log('📍 Event tracked:', eventName, properties);
+    // } // 已关闭：减少日志
   } catch (error) {
     console.error('❌ Event tracking failed:', error);
   }
@@ -201,9 +201,9 @@ export const trackPageView = (pagePath, properties = {}) => {
       ...properties,
     });
 
-    if (process.env.NODE_ENV === 'development') {
-      console.log('📄 Page view tracked:', pagePath);
-    }
+    // if (process.env.NODE_ENV === 'development') {
+    //   console.log('📄 Page view tracked:', pagePath);
+    // } // 已关闭：减少日志
   } catch (error) {
     console.error('❌ Page view tracking failed:', error);
   }
@@ -216,7 +216,7 @@ export const trackPageView = (pagePath, properties = {}) => {
 export const resetUser = () => {
   try {
     posthog.reset();
-    console.log('🔄 User session reset');
+    // console.log('🔄 User session reset'); // 已关闭：减少日志
   } catch (error) {
     console.error('❌ Session reset failed:', error);
   }
@@ -228,7 +228,7 @@ export const resetUser = () => {
 export const optOut = () => {
   try {
     posthog.opt_out_capturing();
-    console.log('🚫 User opted out of tracking');
+    // console.log('🚫 User opted out of tracking'); // 已关闭：减少日志
   } catch (error) {
     console.error('❌ Opt-out failed:', error);
   }
@@ -240,7 +240,7 @@ export const optOut = () => {
 export const optIn = () => {
   try {
     posthog.opt_in_capturing();
-    console.log('✅ User opted in to tracking');
+    // console.log('✅ User opted in to tracking'); // 已关闭：减少日志
   } catch (error) {
     console.error('❌ Opt-in failed:', error);
   }

src/mocks/browser.js

@@ -31,11 +31,11 @@ export async function startMockServiceWorker() {
 
     try {
         await worker.start({
-            // 🎯 智能穿透模式（关键配置）
+            // 🎯 警告模式（关键配置）
             // 'bypass': 未定义 Mock 的请求自动转发到真实后端
-            // 'warn': 未定义的请求会显示警告（调试用）
-            // 'error': 未定义的请求会抛出错误（严格模式）
-            onUnhandledRequest: 'bypass',
+            // 'warn': 未定义的请求会显示警告（调试用）✅ 当前使用（允许 passthrough）
+            // 'error': 未定义的请求会抛出错误（严格模式，不允许 passthrough）
+            onUnhandledRequest: 'warn',
 
             // 自定义 Service Worker URL（如果需要）
             serviceWorker: {
@@ -48,12 +48,12 @@ export async function startMockServiceWorker() {
 
         isStarted = true;
         console.log(
-            '%c[MSW] Mock Service Worker 已启动 🎭',
+            '%c[MSW] Mock Service Worker 已启动 🎭 （警告模式）',
             'color: #4CAF50; font-weight: bold; font-size: 14px;'
         );
         console.log(
-            '%c智能穿透模式：已定义 Mock → 返回假数据 | 未定义 Mock → 转发到 ' + (process.env.REACT_APP_API_URL || '真实后端'),
-            'color: #FF9800; font-size: 12px;'
+            '%c警告模式：已定义 Mock → 返回假数据 | 未定义 Mock → 显示警告 ⚠️ | 允许 passthrough',
+            'color: #FF9800; font-weight: bold; font-size: 12px;'
         );
         console.log(
             '%c查看 src/mocks/handlers/ 目录管理 Mock 接口',

src/mocks/data/account.js

@@ -138,6 +138,9 @@ export const mockFollowingEvents = [
     upvote_count: 489,
     heat_score: 95,
     exceed_expectation_score: 85,
+    related_avg_chg: 1.25,
+    related_max_chg: 3.15,
+    related_week_chg: 2.80,
     creator: {
       id: 1001,
       username: '财经分析师',
@@ -155,6 +158,9 @@ export const mockFollowingEvents = [
     upvote_count: 567,
     heat_score: 88,
     exceed_expectation_score: 78,
+    related_avg_chg: 5.60,
+    related_max_chg: 12.50,
+    related_week_chg: 8.90,
     creator: {
       id: 1002,
       username: '科技观察者',
@@ -172,6 +178,9 @@ export const mockFollowingEvents = [
     upvote_count: 345,
     heat_score: 72,
     exceed_expectation_score: 68,
+    related_avg_chg: 2.35,
+    related_max_chg: 6.80,
+    related_week_chg: 4.20,
     creator: {
       id: 1003,
       username: '产业研究员',
@@ -189,6 +198,9 @@ export const mockFollowingEvents = [
     upvote_count: 432,
     heat_score: 80,
     exceed_expectation_score: 72,
+    related_avg_chg: 3.80,
+    related_max_chg: 9.20,
+    related_week_chg: 6.50,
     creator: {
       id: 1004,
       username: '半导体观察',
@@ -206,6 +218,9 @@ export const mockFollowingEvents = [
     upvote_count: 234,
     heat_score: 65,
     exceed_expectation_score: null,
+    related_avg_chg: -0.80,
+    related_max_chg: 2.50,
+    related_week_chg: 1.20,
     creator: {
       id: 1005,
       username: '医药行业专家',

src/mocks/data/events.js

@@ -556,7 +556,7 @@ const industries = ['半导体', '新能源', '人工智能', '医药', '消费'
 
 // 事件标题模板
 const eventTitleTemplates = [
-    '{industry}行业迎来重大政策利好',
+    '{industry}行业迎来重大政策利好中国物流与采购联合会发布《国有企业采购业务监督指南》团体标准',
     '{company}发布{quarter}财报，业绩超预期',
     '{industry}板块集体大涨，{company}涨停',
     '央行宣布{policy}，影响{industry}行业',
@@ -928,13 +928,16 @@ export function generateMockEvents(params = {}) {
     const end = start + per_page;
     const paginatedEvents = filteredEvents.slice(start, end);
 
+    const totalPages = Math.ceil(filteredEvents.length / per_page);
     return {
         events: paginatedEvents,
         pagination: {
             page: page,
             per_page: per_page,
             total: filteredEvents.length,
-            total_pages: Math.ceil(filteredEvents.length / per_page),
+            pages: totalPages,              // ← 对齐后端字段名 (was: total_pages)
+            has_prev: page > 1,             // ← 对齐后端：是否有上一页
+            has_next: page < totalPages     // ← 对齐后端：是否有下一页
         },
     };
 }

src/mocks/data/users.js

@@ -112,20 +112,20 @@ export function getCurrentUser() {
         const stored = localStorage.getItem('mock_current_user');
         if (stored) {
             const user = JSON.parse(stored);
-            console.log('[Mock State] 获取当前登录用户:', {
-                id: user.id,
-                phone: user.phone,
-                nickname: user.nickname,
-                subscription_type: user.subscription_type,
-                subscription_status: user.subscription_status,
-                subscription_days_left: user.subscription_days_left
-            });
+            // console.log('[Mock State] 获取当前登录用户:', { // 已关闭：减少日志
+            //     id: user.id,
+            //     phone: user.phone,
+            //     nickname: user.nickname,
+            //     subscription_type: user.subscription_type,
+            //     subscription_status: user.subscription_status,
+            //     subscription_days_left: user.subscription_days_left
+            // });
             return user;
         }
     } catch (error) {
         console.error('[Mock State] 解析用户数据失败:', error);
     }
-    console.log('[Mock State] 未找到当前登录用户');
+    // console.log('[Mock State] 未找到当前登录用户'); // 已关闭：减少日志
     return null;
 }
 

src/mocks/handlers/account.js

@@ -130,7 +130,7 @@ export const accountHandlers = [
       );
     }
 
-    console.log('[Mock] 获取自选股列表');
+    // console.log('[Mock] 获取自选股列表'); // 已关闭：减少日志
 
     return HttpResponse.json({
       success: true,

src/mocks/handlers/auth.js

@@ -24,8 +24,6 @@ export const authHandlers = [
         const body = await request.json();
         const { credential, type, purpose } = body;
 
-        console.log('[Mock] 发送验证码:', { credential, type, purpose });
-
         // 生成验证码
         const code = generateVerificationCode();
         mockVerificationCodes.set(credential, {
@@ -33,7 +31,20 @@ export const authHandlers = [
             expiresAt: Date.now() + 5 * 60 * 1000 // 5分钟后过期
         });
 
-        console.log(`[Mock] 验证码已生成: ${credential} -> ${code}`);
+        // 超醒目的验证码提示 - 方便开发调试
+        console.log(
+            `%c\n` +
+            `╔════════════════════════════════════════════╗\n` +
+            `║     验证码: ${code.padEnd(22)}║\n` +
+            `╚════════════════════════════════════════════╝\n`,
+            'color: #ffffff; background: #16a34a; font-weight: bold; font-size: 16px; padding: 20px; line-height: 1.8;'
+        );
+
+        // 额外的高亮提示
+        console.log(
+            `%c 验证码: ${code} `,
+            'color: #ffffff; background: #dc2626; font-weight: bold; font-size: 24px; padding: 15px 30px; border-radius: 8px; margin: 10px 0;'
+        );
 
         return HttpResponse.json({
             success: true,
@@ -43,6 +54,86 @@ export const authHandlers = [
         });
     }),
 
+    // 1.1 发送手机验证码（前端实际调用的接口）
+    http.post('/api/auth/send-sms-code', async ({ request }) => {
+        await delay(NETWORK_DELAY);
+
+        const body = await request.json();
+        const { phone } = body;
+
+        console.log('[Mock] 发送手机验证码请求:', { phone });
+
+        // 生成验证码
+        const code = generateVerificationCode();
+        mockVerificationCodes.set(phone, {
+            code,
+            expiresAt: Date.now() + 5 * 60 * 1000 // 5分钟后过期
+        });
+
+        // 超醒目的验证码提示 - 方便开发调试
+        console.log(
+            `%c\n` +
+            `╔════════════════════════════════════════════╗\n` +
+            `║   📱 手机验证码: ${code.padEnd(19)}║\n` +
+            `║   📞 手机号: ${phone.padEnd(23)}║\n` +
+            `╚════════════════════════════════════════════╝\n`,
+            'color: #ffffff; background: #16a34a; font-weight: bold; font-size: 16px; padding: 20px; line-height: 1.8;'
+        );
+
+        // 额外的高亮提示
+        console.log(
+            `%c 📱 验证码: ${code} `,
+            'color: #ffffff; background: #dc2626; font-weight: bold; font-size: 24px; padding: 15px 30px; border-radius: 8px; margin: 10px 0;'
+        );
+
+        return HttpResponse.json({
+            success: true,
+            message: `验证码已发送到 ${phone}（Mock: ${code}）`,
+            // 开发环境下返回验证码，方便测试
+            dev_code: code
+        });
+    }),
+
+    // 1.2 发送邮箱验证码（前端实际调用的接口）
+    http.post('/api/auth/send-email-code', async ({ request }) => {
+        await delay(NETWORK_DELAY);
+
+        const body = await request.json();
+        const { email } = body;
+
+        console.log('[Mock] 发送邮箱验证码请求:', { email });
+
+        // 生成验证码
+        const code = generateVerificationCode();
+        mockVerificationCodes.set(email, {
+            code,
+            expiresAt: Date.now() + 5 * 60 * 1000 // 5分钟后过期
+        });
+
+        // 超醒目的验证码提示 - 方便开发调试
+        console.log(
+            `%c\n` +
+            `╔════════════════════════════════════════════╗\n` +
+            `║   📧 邮箱验证码: ${code.padEnd(19)}║\n` +
+            `║   📮 邮箱: ${email.padEnd(27)}║\n` +
+            `╚════════════════════════════════════════════╝\n`,
+            'color: #ffffff; background: #2563eb; font-weight: bold; font-size: 16px; padding: 20px; line-height: 1.8;'
+        );
+
+        // 额外的高亮提示
+        console.log(
+            `%c 📧 验证码: ${code} `,
+            'color: #ffffff; background: #dc2626; font-weight: bold; font-size: 24px; padding: 15px 30px; border-radius: 8px; margin: 10px 0;'
+        );
+
+        return HttpResponse.json({
+            success: true,
+            message: `验证码已发送到 ${email}（Mock: ${code}）`,
+            // 开发环境下返回验证码，方便测试
+            dev_code: code
+        });
+    }),
+
     // 2. 验证码登录
     http.post('/api/auth/login-with-code', async ({ request }) => {
         await delay(NETWORK_DELAY);

src/mocks/handlers/event.js

@@ -13,7 +13,7 @@ export const eventHandlers = [
     // ==================== 事件列表相关 ====================
 
     // 获取事件列表
-    http.get('/api/events/', async ({ request }) => {
+    http.get('/api/events', async ({ request }) => {
         await delay(500);
 
         const url = new URL(request.url);
@@ -41,11 +41,26 @@ export const eventHandlers = [
             });
         } catch (error) {
             console.error('[Mock] 获取事件列表失败:', error);
+            console.error('[Mock] Error details:', {
+                message: error.message,
+                stack: error.stack,
+                params: params
+            });
             return HttpResponse.json(
                 {
                     success: false,
                     error: '获取事件列表失败',
-                    data: { events: [], pagination: {} }
+                    data: {
+                        events: [],
+                        pagination: {
+                            page: 1,
+                            per_page: 10,
+                            total: 0,
+                            pages: 0,              // ← 对齐后端字段名
+                            has_prev: false,       // ← 对齐后端
+                            has_next: false        // ← 对齐后端
+                        }
+                    }
                 },
                 { status: 500 }
             );

src/mocks/handlers/external.js

@@ -0,0 +1,25 @@
+// src/mocks/handlers/external.js
+// 外部服务 Mock Handler（允许通过）
+
+import { http, passthrough } from 'msw';
+
+/**
+ * 外部服务处理器
+ * 对于外部服务（如头像、CDN等），使用 passthrough 让请求正常发送到真实服务器
+ */
+export const externalHandlers = [
+  // Pravatar 头像服务 - 允许通过到真实服务
+  http.get('https://i.pravatar.cc/*', async () => {
+    return passthrough();
+  }),
+
+  // 如果需要 mock 头像，也可以返回一个占位图片
+  // http.get('https://i.pravatar.cc/*', async () => {
+  //   return HttpResponse.text(
+  //     '<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg"><rect width="150" height="150" fill="#ddd"/><text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#999">Avatar</text></svg>',
+  //     {
+  //       headers: { 'Content-Type': 'image/svg+xml' }
+  //     }
+  //   );
+  // }),
+];

src/mocks/handlers/index.js

@@ -13,6 +13,8 @@ import { companyHandlers } from './company';
 import { marketHandlers } from './market';
 import { financialHandlers } from './financial';
 import { limitAnalyseHandlers } from './limitAnalyse';
+import { posthogHandlers } from './posthog';
+import { externalHandlers } from './external';
 
 // 可以在这里添加更多的 handlers
 // import { userHandlers } from './user';
@@ -30,5 +32,7 @@ export const handlers = [
     ...marketHandlers,
     ...financialHandlers,
     ...limitAnalyseHandlers,
+    ...posthogHandlers,
+    ...externalHandlers,
     // ...userHandlers,
 ];

src/mocks/handlers/posthog.js

@@ -0,0 +1,132 @@
+// src/mocks/handlers/posthog.js
+// PostHog 埋点请求 Mock Handler
+
+import { http, HttpResponse } from 'msw';
+
+/**
+ * PostHog 埋点 Mock Handler
+ * 拦截所有发往 PostHog 的埋点请求，避免在 Mock 模式下产生 500 错误
+ */
+export const posthogHandlers = [
+  // PostHog 事件追踪接口
+  http.post('https://us.i.posthog.com/e/', async ({ request }) => {
+    try {
+      // 读取埋点数据（可选，用于调试）
+      const body = await request.text();
+
+      // 开发环境输出埋点日志（可选，方便调试）
+      if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_LOG_POSTHOG === 'true') {
+        console.log('[Mock] PostHog 埋点请求:', {
+          url: request.url,
+          bodyPreview: body.substring(0, 150) + (body.length > 150 ? '...' : ''),
+        });
+      }
+
+      // 返回成功响应（模拟 PostHog 服务器响应）
+      return HttpResponse.json(
+        { status: 1 },
+        { status: 200 }
+      );
+    } catch (error) {
+      console.error('[Mock] PostHog handler error:', error);
+      return HttpResponse.json(
+        { status: 0, error: 'Mock handler error' },
+        { status: 500 }
+      );
+    }
+  }),
+
+  // PostHog batch 批量事件追踪接口（可选）
+  http.post('https://us.i.posthog.com/batch/', async ({ request }) => {
+    try {
+      const body = await request.text();
+
+      if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_LOG_POSTHOG === 'true') {
+        console.log('[Mock] PostHog 批量埋点请求:', {
+          url: request.url,
+          bodyPreview: body.substring(0, 150) + (body.length > 150 ? '...' : ''),
+        });
+      }
+
+      return HttpResponse.json(
+        { status: 1 },
+        { status: 200 }
+      );
+    } catch (error) {
+      console.error('[Mock] PostHog batch handler error:', error);
+      return HttpResponse.json(
+        { status: 0, error: 'Mock handler error' },
+        { status: 500 }
+      );
+    }
+  }),
+
+  // PostHog decide 接口（功能开关、特性标志）
+  http.post('https://us.i.posthog.com/decide/', async ({ request }) => {
+    try {
+      if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_LOG_POSTHOG === 'true') {
+        const body = await request.json();
+        console.log('[Mock] PostHog decide 请求:', body);
+      }
+
+      // 返回空的特性标志配置
+      return HttpResponse.json({
+        featureFlags: {},
+        sessionRecording: false,
+      });
+    } catch (error) {
+      console.error('[Mock] PostHog decide handler error:', error);
+      return HttpResponse.json(
+        { featureFlags: {}, sessionRecording: false },
+        { status: 200 }
+      );
+    }
+  }),
+
+  // PostHog session recording 接口（会话录制）
+  http.post('https://us.i.posthog.com/s/', async ({ request }) => {
+    try {
+      const body = await request.text();
+
+      if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_LOG_POSTHOG === 'true') {
+        console.log('[Mock] PostHog session recording 请求:', {
+          url: request.url,
+          bodyPreview: body.substring(0, 100) + (body.length > 100 ? '...' : ''),
+        });
+      }
+
+      // 返回成功响应
+      return HttpResponse.json(
+        { status: 1 },
+        { status: 200 }
+      );
+    } catch (error) {
+      console.error('[Mock] PostHog session recording handler error:', error);
+      return HttpResponse.json(
+        { status: 0, error: 'Mock handler error' },
+        { status: 500 }
+      );
+    }
+  }),
+
+  // PostHog feature flags 接口（特性标志查询）
+  http.post('https://us.i.posthog.com/flags/', async ({ request }) => {
+    try {
+      if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_LOG_POSTHOG === 'true') {
+        console.log('[Mock] PostHog feature flags 请求:', request.url);
+      }
+
+      // 返回空的特性标志
+      return HttpResponse.json({
+        featureFlags: {},
+        featureFlagPayloads: {},
+      });
+    } catch (error) {
+      console.error('[Mock] PostHog flags handler error:', error);
+      return HttpResponse.json(
+        { featureFlags: {}, featureFlagPayloads: {} },
+        { status: 200 }
+      );
+    }
+  }),
+];

src/mocks/handlers/stock.js

@@ -130,7 +130,7 @@ export const stockHandlers = [
         try {
             const stocks = generateStockList();
 
-            console.log('[Mock Stock] 获取股票列表成功:', { count: stocks.length });
+            // console.log('[Mock Stock] 获取股票列表成功:', { count: stocks.length }); // 已关闭：减少日志
 
             return HttpResponse.json(stocks);
         } catch (error) {

src/services/eventService.js

@@ -37,10 +37,12 @@ const apiRequest = async (url, options = {}) => {
 
 export const eventService = {
     getEvents: (params = {}) => {
-        // Filter out empty params
-        const cleanParams = Object.fromEntries(Object.entries(params).filter(([_, v]) => v != null && v !== ''));
+        // Filter out null, undefined, and empty strings (but keep 0 and false)
+        const cleanParams = Object.fromEntries(
+            Object.entries(params).filter(([_, v]) => v !== null && v !== undefined && v !== '')
+        );
         const query = new URLSearchParams(cleanParams).toString();
-        return apiRequest(`/api/events/?${query}`);
+        return apiRequest(`/api/events?${query}`);
     },
     getHotEvents: (params = {}) => {
         const query = new URLSearchParams(params).toString();

src/store/api/eventsApi.js

@@ -0,0 +1,144 @@
+// src/store/api/eventsApi.js
+// RTK Query API for Events - 事件数据获取 API
+
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { logger } from '../../utils/logger';
+
+/**
+ * Events API Slice - 使用 RTK Query 管理事件数据
+ *
+ * 特性：
+ * - ✅ 自动缓存管理（按 queryKey 缓存）
+ * - ✅ 自动去重请求
+ * - ✅ 返回第一页刷新数据（invalidateTags）
+ * - ✅ 预加载支持（prefetch）
+ * - ✅ 统一在 Redux DevTools 中调试
+ * - ✅ 无需额外 Provider
+ */
+export const eventsApi = createApi({
+  reducerPath: 'eventsApi',
+
+  // 基础查询配置
+  baseQuery: fetchBaseQuery({
+    baseUrl: '/api',
+    prepareHeaders: (headers) => {
+      // 可以在这里添加认证 token
+      // const token = localStorage.getItem('token');
+      // if (token) {
+      //   headers.set('Authorization', `Bearer ${token}`);
+      // }
+      return headers;
+    },
+  }),
+
+  // 标签类型定义（用于缓存失效）
+  tagTypes: ['Events'],
+
+  // API 端点定义
+  endpoints: (builder) => ({
+    /**
+     * 获取分页事件列表
+     *
+     * @param {Object} params
+     * @param {number} params.page - 页码
+     * @param {number} params.per_page - 每页数量
+     * @param {string} params.mode - 显示模式（vertical / four-row）
+     * @param {string} params.sort - 排序方式
+     * @param {string} params.importance - 重要性筛选
+     * @param {string} params.q - 搜索关键词
+     * @param {string} params.date_range - 日期范围
+     * @param {string} params.industry_code - 行业代码
+     *
+     * @returns {Object} { events: Array, pagination: Object }
+     */
+    getEvents: builder.query({
+      query: ({ page = 1, per_page = 5, mode = 'vertical', ...filters }) => {
+        logger.debug('eventsApi', 'getEvents 请求', {
+          page,
+          per_page,
+          mode,
+          filters,
+        });
+
+        return {
+          url: '/events',
+          params: {
+            page,
+            per_page,
+            ...filters,
+          },
+        };
+      },
+
+      // 🔥 缓存标签：用于缓存失效
+      providesTags: (result, error, { page, mode }) => {
+        if (error) return [];
+
+        return [
+          { type: 'Events', id: `${mode}-${page}` }, // 具体页面的标签
+          { type: 'Events', id: `${mode}-LIST` },    // 模式的总标签
+        ];
+      },
+
+      // 转换响应数据
+      transformResponse: (response) => {
+        logger.debug('eventsApi', 'getEvents 响应', {
+          eventsCount: response.data?.events?.length,
+          total: response.data?.pagination?.total,
+        });
+
+        if (!response.success || !response.data?.events) {
+          throw new Error('数据格式错误');
+        }
+
+        return {
+          events: response.data.events,
+          pagination: response.data.pagination || {},
+        };
+      },
+
+      // 错误处理
+      transformErrorResponse: (response) => {
+        logger.error('eventsApi', 'getEvents 失败', new Error(response.status));
+        return {
+          status: response.status,
+          message: response.data?.message || '获取事件数据失败',
+        };
+      },
+
+      // 🔥 keepUnusedDataFor: 缓存保留时间（秒）
+      keepUnusedDataFor: 600, // 10分钟
+
+      // 🔥 合并查询结果（用于无限滚动）
+      // serializeQueryArgs: ({ endpointName, queryArgs }) => {
+      //   const { mode, ...filters } = queryArgs;
+      //   return `${endpointName}(${mode})`;
+      // },
+      // merge: (currentCache, newItems) => {
+      //   currentCache.events.push(...newItems.events);
+      // },
+      // forceRefetch: ({ currentArg, previousArg }) => {
+      //   return currentArg.page !== previousArg?.page;
+      // },
+    }),
+
+    /**
+     * 预加载下一页（性能优化）
+     *
+     * 用法：
+     * dispatch(eventsApi.util.prefetch('getEvents', { page: 2, ... }))
+     */
+  }),
+});
+
+// 导出自动生成的 Hooks
+export const {
+  useGetEventsQuery,
+  useLazyGetEventsQuery,   // 手动触发的版本
+  usePrefetch,             // 预加载 Hook
+} = eventsApi;
+
+// 导出工具方法
+export const {
+  util: { invalidateTags, prefetch },
+} = eventsApi;

src/store/index.js

@@ -7,6 +7,7 @@ import stockReducer from './slices/stockSlice';
 import authModalReducer from './slices/authModalSlice';
 import subscriptionReducer from './slices/subscriptionSlice';
 import posthogMiddleware from './middleware/posthogMiddleware';
+import { eventsApi } from './api/eventsApi'; // ✅ RTK Query API
 
 export const store = configureStore({
   reducer: {
@@ -16,6 +17,7 @@ export const store = configureStore({
     stock: stockReducer, // ✅ 股票和事件数据管理
     authModal: authModalReducer, // ✅ 认证弹窗状态管理
     subscription: subscriptionReducer, // ✅ 订阅信息状态管理
+    [eventsApi.reducerPath]: eventsApi.reducer, // ✅ RTK Query 事件 API
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
@@ -29,7 +31,9 @@ export const store = configureStore({
           'stock/fetchStockQuotes/fulfilled',
         ],
       },
-    }).concat(posthogMiddleware), // ✅ PostHog 自动追踪中间件
+    })
+      .concat(posthogMiddleware) // ✅ PostHog 自动追踪中间件
+      .concat(eventsApi.middleware), // ✅ RTK Query 中间件（自动缓存、去重、重试）
 });
 
 export default store;

src/store/slices/communityDataSlice.js

@@ -103,7 +103,6 @@ const createDataReducers = (builder, asyncThunk, dataKey) => {
     .addCase(asyncThunk.fulfilled, (state, action) => {
       state.loading[dataKey] = false;
       state[dataKey] = action.payload;
-      state.lastUpdated[dataKey] = new Date().toISOString();
     })
     .addCase(asyncThunk.rejected, (state, action) => {
       state.loading[dataKey] = false;
@@ -157,63 +156,114 @@ export const fetchHotEvents = createAsyncThunk(
 );
 
 /**
- * 获取动态新闻（客户端缓存 + 智能请求）
+ * 获取动态新闻（客户端缓存 + 虚拟滚动）
  * 用于 DynamicNewsCard 组件
  * @param {Object} params - 请求参数
+ * @param {string} params.mode - 显示模式（'vertical' | 'four-row'）
  * @param {number} params.page - 页码
- * @param {number} params.per_page - 每页数量
+ * @param {number} params.per_page - 每页数量（可选，不提供时自动根据 mode 计算）
  * @param {boolean} params.clearCache - 是否清空缓存（默认 false）
  * @param {boolean} params.prependMode - 是否追加到头部（用于定时刷新，默认 false）
+ * @param {string} params.sort - 排序方式（new/hot）
+ * @param {string} params.importance - 重要性筛选（all/1/2/3/4/5）
+ * @param {string} params.q - 搜索关键词
+ * @param {string} params.date_range - 时间范围
+ * @param {string} params.industry_code - 行业代码
  */
 export const fetchDynamicNews = createAsyncThunk(
   'communityData/fetchDynamicNews',
   async ({
+    mode = 'vertical',
     page = 1,
-    per_page = 5,
-    pageSize = 5,  // 每页实际显示的数据量（用于计算索引）
+    per_page,  // 移除默认值，下面动态计算
+    pageSize,  // 向后兼容（已废弃，使用 per_page）
     clearCache = false,
-    prependMode = false
+    prependMode = false,
+    sort = 'new',
+    importance,
+    q,
+    date_range,        // 兼容旧格式（已废弃）
+    industry_code,
+    // 时间筛选参数（从 TradingTimeFilter 传递）
+    start_date,
+    end_date,
+    recent_days
   } = {}, { rejectWithValue }) => {
     try {
+      // 【动态计算 per_page】根据 mode 自动选择合适的每页大小
+      // - 平铺模式 (four-row): 30 条（7.5行 × 4列，提供充足的缓冲数据）
+      // - 纵向模式 (vertical): 10 条（传统分页）
+      // 优先使用传入的 per_page，其次使用 pageSize（向后兼容），最后根据 mode 计算
+      const finalPerPage = per_page || pageSize || (mode === 'four-row' ? 30 : 10);
+
+      // 构建筛选参数
+      const filters = {};
+      if (sort) filters.sort = sort;
+      if (importance && importance !== 'all') filters.importance = importance;
+      if (q) filters.q = q;
+      if (date_range) filters.date_range = date_range;  // 兼容旧格式
+      if (industry_code) filters.industry_code = industry_code;
+      // 时间筛选参数
+      if (start_date) filters.start_date = start_date;
+      if (end_date) filters.end_date = end_date;
+      if (recent_days) filters.recent_days = recent_days;
+
       logger.debug('CommunityData', '开始获取动态新闻', {
+        mode,
         page,
-        per_page,
+        per_page: finalPerPage,
         clearCache,
-        prependMode
+        prependMode,
+        filters
       });
 
       const response = await eventService.getEvents({
         page,
-        per_page,
-        sort: 'new'
+        per_page: finalPerPage,
+        ...filters
       });
 
       if (response.success && response.data?.events) {
         logger.info('CommunityData', '动态新闻加载成功', {
           count: response.data.events.length,
           page: response.data.pagination?.page || page,
-          total: response.data.pagination?.total || 0
-        });
-        return {
-          events: response.data.events,
           total: response.data.pagination?.total || 0,
+          per_page: finalPerPage
+        });
+        // 【兜底处理】支持多种 pagination 字段名：pages (后端) / total_pages (旧Mock) / totalPages
+        const paginationData = response.data.pagination || {};
+        const calculatedTotalPages = paginationData.pages            // ← 后端格式 (优先)
+                                  || paginationData.total_pages      // ← Mock 旧格式 (兼容)
+                                  || paginationData.totalPages       // ← 其他可能格式
+                                  || Math.ceil((paginationData.total || 0) / finalPerPage);  // ← 兜底计算
+
+        return {
+          mode,
+          events: response.data.events,
+          total: paginationData.total || 0,
+          totalPages: calculatedTotalPages,
           page,
-          per_page,
-          pageSize,  // 返回 pageSize 用于索引计算
+          per_page: finalPerPage,
           clearCache,
           prependMode
         };
       }
 
       logger.warn('CommunityData', '动态新闻返回数据为空', response);
+      // 【兜底处理】空数据情况也尝试读取 pagination
+      const emptyPaginationData = response.data?.pagination || {};
+      const emptyTotalPages = emptyPaginationData.pages || emptyPaginationData.total_pages || 0;
+
       return {
+        mode,
         events: [],
         total: 0,
+        totalPages: emptyTotalPages,
         page,
-        per_page,
-        pageSize,  // 返回 pageSize 用于索引计算
+        per_page: finalPerPage,
         clearCache,
-        prependMode
+        prependMode,
+        isEmpty: true  // 标记为空数据，用于边界条件处理
       };
     } catch (error) {
       logger.error('CommunityData', '获取动态新闻失败', error);
@@ -269,42 +319,75 @@ export const toggleEventFollow = createAsyncThunk(
 
 // ==================== Slice 定义 ====================
 
+/**
+ * 【Redux State 架构设计】
+ *
+ * 核心原则：
+ * 1. **模式独立存储**: verticalEvents 和 fourRowEvents 完全独立
+ *    - 原因：两种模式使用不同的 pageSize (10 vs 30)，共享缓存会导致分页混乱
+ *    - 代价：~50% 内存冗余（同一事件可能存在于两个数组）
+ *    - 权衡：简化逻辑复杂度，避免 pageSize 切换时的边界计算问题
+ *
+ * 2. **数据去重**: 使用 Set 去重，防止重复事件
+ *    - 场景1：网络请求乱序（慢请求后返回）
+ *    - 场景2：定时刷新 + prepend 模式（新事件插入头部）
+ *    - 场景3：后端分页漂移（新数据导致页码偏移）
+ *
+ * 3. **追加模式 (append)**: 虚拟滚动必须使用累积数组
+ *    - 原因：虚拟滚动需要完整数据计算 totalHeight
+ *    - 对比：传统分页每次替换数据（page mode）
+ *
+ * 4. **加载状态管理**: 分模式独立管理 loading/error
+ *    - 避免模式切换时的加载状态冲突
+ */
 const communityDataSlice = createSlice({
   name: 'communityData',
   initialState: {
     // 数据
     popularKeywords: [],
     hotEvents: [],
-    dynamicNews: [], // 动态新闻完整缓存列表
-    dynamicNewsTotal: 0, // 服务端总数量
-    eventFollowStatus: {}, // 事件关注状态 { [eventId]: { isFollowing: boolean, followerCount: number } }
 
-    // 加载状态
+    // 【纵向模式】独立存储（传统分页 + 每页10条）
+    verticalEventsByPage: {}, // 页码映射存储 { 1: [10条], 2: [8条], 3: [10条] }
+    verticalPagination: {     // 分页元数据
+      total: 0,               // 总记录数
+      total_pages: 0,         // 总页数
+      current_page: 1,        // 当前页码
+      per_page: 10            // 每页大小
+    },
+
+    // 【平铺模式】独立存储（虚拟滚动 + 每页30条）
+    fourRowEvents: [],        // 完整缓存列表（虚拟滚动的数据源）
+    fourRowPagination: {      // 分页元数据
+      total: 0,               // 总记录数
+      total_pages: 0,         // 总页数
+      current_page: 1,        // 当前页码
+      per_page: 30            // 每页大小
+    },
+
+    eventFollowStatus: {},    // 事件关注状态（全局共享）{ [eventId]: { isFollowing: boolean, followerCount: number } }
+
+    // 加载状态（分模式管理）
     loading: {
       popularKeywords: false,
       hotEvents: false,
-      dynamicNews: false
+      verticalEvents: false,
+      fourRowEvents: false
     },
 
-    // 错误信息
+    // 错误信息（分模式管理）
     error: {
       popularKeywords: null,
       hotEvents: null,
-      dynamicNews: null
-    },
-
-    // 最后更新时间
-    lastUpdated: {
-      popularKeywords: null,
-      hotEvents: null,
-      dynamicNews: null
+      verticalEvents: null,
+      fourRowEvents: null
     }
   },
 
   reducers: {
     /**
      * 清除所有缓存（Redux + localStorage）
-     * 注意：dynamicNews 不使用 localStorage 缓存
+     * 注意：verticalEvents 和 fourRowEvents 不使用 localStorage 缓存
      */
     clearCache: (state) => {
       // 清除 localStorage
@@ -313,17 +396,19 @@ const communityDataSlice = createSlice({
       // 清除 Redux 状态
       state.popularKeywords = [];
       state.hotEvents = [];
-      state.dynamicNews = []; // 动态新闻也清除
-      state.lastUpdated.popularKeywords = null;
-      state.lastUpdated.hotEvents = null;
-      state.lastUpdated.dynamicNews = null;
+
+      // 清除动态新闻数据（两个模式）
+      state.verticalEventsByPage = {};
+      state.fourRowEvents = [];
+      state.verticalPagination = { total: 0, total_pages: 0, current_page: 1, per_page: 10 };
+      state.fourRowPagination = { total: 0, total_pages: 0, current_page: 1, per_page: 30 };
 
       logger.info('CommunityData', '所有缓存已清除');
     },
 
     /**
      * 清除指定类型的缓存
-     * @param {string} payload - 缓存类型 ('popularKeywords' | 'hotEvents' | 'dynamicNews')
+     * @param {string} payload - 缓存类型 ('popularKeywords' | 'hotEvents' | 'verticalEvents' | 'fourRowEvents')
      */
     clearSpecificCache: (state, action) => {
       const type = action.payload;
@@ -331,18 +416,21 @@ const communityDataSlice = createSlice({
       if (type === 'popularKeywords') {
         localCacheManager.remove(CACHE_KEYS.POPULAR_KEYWORDS);
         state.popularKeywords = [];
-        state.lastUpdated.popularKeywords = null;
         logger.info('CommunityData', '热门关键词缓存已清除');
       } else if (type === 'hotEvents') {
         localCacheManager.remove(CACHE_KEYS.HOT_EVENTS);
         state.hotEvents = [];
-        state.lastUpdated.hotEvents = null;
         logger.info('CommunityData', '热点事件缓存已清除');
-      } else if (type === 'dynamicNews') {
-        // dynamicNews 不使用 localStorage，只清除 Redux state
-        state.dynamicNews = [];
-        state.lastUpdated.dynamicNews = null;
-        logger.info('CommunityData', '动态新闻数据已清除');
+      } else if (type === 'verticalEvents') {
+        // verticalEvents 不使用 localStorage，只清除 Redux state
+        state.verticalEventsByPage = {};
+        state.verticalPagination = { total: 0, total_pages: 0, current_page: 1, per_page: 10 };
+        logger.info('CommunityData', '纵向模式事件数据已清除');
+      } else if (type === 'fourRowEvents') {
+        // fourRowEvents 不使用 localStorage，只清除 Redux state
+        state.fourRowEvents = [];
+        state.fourRowPagination = { total: 0, total_pages: 0, current_page: 1, per_page: 30 };
+        logger.info('CommunityData', '平铺模式事件数据已清除');
       }
     },
 
@@ -350,7 +438,7 @@ const communityDataSlice = createSlice({
      * 预加载数据（用于应用启动时）
      * 注意：这不是异步 action，只是触发标记
      */
-    preloadData: (state) => {
+    preloadData: (_state) => {
       logger.info('CommunityData', '准备预加载数据');
       // 实际的预加载逻辑在组件中调用 dispatch(fetchPopularKeywords()) 等
     },
@@ -363,6 +451,17 @@ const communityDataSlice = createSlice({
       const { eventId, isFollowing, followerCount } = action.payload;
       state.eventFollowStatus[eventId] = { isFollowing, followerCount };
       logger.debug('CommunityData', '设置事件关注状态', { eventId, isFollowing, followerCount });
+    },
+
+    /**
+     * 更新分页页码（用于缓存场景，无需 API 请求）
+     * @param {Object} action.payload - { mode, page }
+     */
+    updatePaginationPage: (state, action) => {
+      const { mode, page } = action.payload;
+      const paginationKey = mode === 'four-row' ? 'fourRowPagination' : 'verticalPagination';
+      state[paginationKey].current_page = page;
+      logger.debug('CommunityData', '同步更新分页页码（缓存场景）', { mode, page });
     }
   },
 
@@ -372,101 +471,142 @@ const communityDataSlice = createSlice({
     createDataReducers(builder, fetchHotEvents, 'hotEvents');
 
     // dynamicNews 需要特殊处理（缓存 + 追加模式）
+    // 根据 mode 更新不同的 state（verticalEvents 或 fourRowEvents）
     builder
-      .addCase(fetchDynamicNews.pending, (state) => {
-        state.loading.dynamicNews = true;
-        state.error.dynamicNews = null;
+      .addCase(fetchDynamicNews.pending, (state, action) => {
+        const mode = action.meta.arg.mode || 'vertical';
+        const stateKey = mode === 'four-row' ? 'fourRowEvents' : 'verticalEvents';
+        state.loading[stateKey] = true;
+        state.error[stateKey] = null;
       })
       .addCase(fetchDynamicNews.fulfilled, (state, action) => {
-        const { events, total, page, per_page, pageSize, clearCache, prependMode } = action.payload;
+        const { mode, events, total, page, per_page, clearCache, prependMode, isEmpty } = action.payload;
+        const stateKey = mode === 'four-row' ? 'fourRowEvents' : 'verticalEvents';
+        const totalKey = mode === 'four-row' ? 'fourRowTotal' : 'verticalTotal';
 
-        if (clearCache) {
-          // 清空缓存模式：直接替换
-          state.dynamicNews = events;
-          logger.debug('CommunityData', '清空缓存并加载新数据', {
-            count: events.length
-          });
-        } else if (prependMode) {
-          // 追加到头部模式（用于定时刷新）：去重后插入头部
-          const existingIds = new Set(state.dynamicNews.map(e => e.id));
-          const newEvents = events.filter(e => !existingIds.has(e.id));
-          state.dynamicNews = [...newEvents, ...state.dynamicNews];
-          logger.debug('CommunityData', '追加新数据到头部', {
-            newCount: newEvents.length,
-            totalCount: state.dynamicNews.length
-          });
-        } else {
-          // 智能插入模式：根据页码计算正确的插入位置
-          // 使用 pageSize（每页显示量）而不是 per_page（请求数量）
-          const startIndex = (page - 1) * (pageSize || per_page);
+        // 边界条件：空数据只记录日志，不更新 state（保留现有数据）
+        if (isEmpty || (events.length === 0 && !clearCache)) {
+          logger.info('CommunityData', `${mode} 模式返回空数据，跳过更新`);
+          state.loading[stateKey] = false;
+          state.error[stateKey] = '暂无更多数据';  // 设置提示信息供组件显示 toast
+          return;  // 提前返回，不更新数据
+        }
 
-          // 判断插入模式
-          const isAppend = startIndex === state.dynamicNews.length;
-          const isReplace = startIndex < state.dynamicNews.length;
-          const isJump = startIndex > state.dynamicNews.length;
+        // 🔍 调试：收到数据
+        console.log('%c[Redux] fetchDynamicNews.fulfilled 收到数据', 'color: #10B981; font-weight: bold;', {
+          mode,
+          stateKey,
+          eventsCount: events.length,
+          total,
+          page,
+          clearCache,
+          prependMode,
+          'state[stateKey] 类型': Array.isArray(state[stateKey]) ? 'Array' : 'Object',
+          'state[stateKey] 之前': Array.isArray(state[stateKey])
+            ? `数组长度: ${state[stateKey].length}`
+            : `对象页数: ${Object.keys(state[stateKey] || {}).length}`,
+        });
 
-          // 只在 append 模式下去重（避免定时刷新重复）
-          // 替换和跳页模式直接使用原始数据（避免因去重导致数据丢失）
-          if (isAppend) {
-            // Append 模式：连续加载，需要去重
-            const existingIds = new Set(
-              state.dynamicNews
-                .filter(e => e !== null)
-                .map(e => e.id)
-            );
-            const newEvents = events.filter(e => !existingIds.has(e.id));
-            state.dynamicNews = [...state.dynamicNews, ...newEvents];
-
-            logger.debug('CommunityData', '连续追加数据（去重）', {
+        /**
+         * 【数据存储逻辑】根据模式选择不同的存储策略
+         *
+         * 纵向模式（vertical）：页码映射存储
+         * - clearCache=true: 清空所有页，存储新页（第1页专用）
+         * - clearCache=false: 存储到对应页码（第2、3、4...页）
+         * - 优点：每页独立，不受去重影响，支持缓存
+         *
+         * 平铺模式（four-row）：去重追加存储
+         * - clearCache=true: 直接替换（用于刷新）
+         * - prependMode=true: 去重后插入头部（定时刷新）
+         * - 默认：去重后追加到末尾（无限滚动）
+         * - 优点：累积显示，支持虚拟滚动
+         */
+        if (mode === 'vertical') {
+          // 【纵向模式】页码映射存储
+          if (clearCache) {
+            // 第1页：清空所有页，只保留新页
+            state.verticalEventsByPage = { [page]: events };
+            logger.debug('CommunityData', `清空缓存并加载第${page}页 (纵向模式)`, {
+              count: events.length
+            });
+            console.log('%c[Redux] 纵向模式 clearCache，清空所有页', 'color: #10B981; font-weight: bold;', {
+              page,
+              eventsCount: events.length
+            });
+          } else {
+            // 其他页：存储到对应页码
+            state.verticalEventsByPage = state.verticalEventsByPage || {};
+            state.verticalEventsByPage[page] = events;
+            logger.debug('CommunityData', `存储第${page}页数据 (纵向模式)`, {
+              page,
+              count: events.length,
+              totalPages: Object.keys(state.verticalEventsByPage || {}).length
+            });
+            console.log('%c[Redux] 纵向模式追加页面', 'color: #10B981; font-weight: bold;', {
+              page,
+              eventsCount: events.length,
+              cachedPages: Object.keys(state.verticalEventsByPage || {})
+            });
+          }
+        } else if (mode === 'four-row') {
+          // 【平铺模式】去重追加存储
+          if (clearCache) {
+            // 清空缓存模式：直接替换
+            state.fourRowEvents = events;
+            logger.debug('CommunityData', `清空缓存并加载新数据 (平铺模式)`, {
+              count: events.length
+            });
+            console.log('%c[Redux] 平铺模式 clearCache，直接替换数据', 'color: #10B981; font-weight: bold;', {
+              eventsCount: events.length
+            });
+          } else if (prependMode) {
+            // 追加到头部模式（用于定时刷新）：去重后插入头部
+            const existingIds = new Set((state.fourRowEvents || []).map(e => e.id));
+            const newEvents = events.filter(e => !existingIds.has(e.id));
+            state.fourRowEvents = [...newEvents, ...(state.fourRowEvents || [])];
+            logger.debug('CommunityData', `追加新数据到头部 (平铺模式)`, {
+              newCount: newEvents.length,
+              totalCount: state.fourRowEvents.length
+            });
+          } else {
+            // 默认追加模式：去重后追加到末尾（用于虚拟滚动加载下一页）
+            const existingIds = new Set((state.fourRowEvents || []).map(e => e.id));
+            const newEvents = events.filter(e => !existingIds.has(e.id));
+            state.fourRowEvents = [...(state.fourRowEvents || []), ...newEvents];
+
+            logger.debug('CommunityData', `追加新数据（去重，平铺模式）`, {
               page,
-              startIndex,
-              endIndex: startIndex + newEvents.length,
               originalEventsCount: events.length,
               newEventsCount: newEvents.length,
               filteredCount: events.length - newEvents.length,
-              totalCount: state.dynamicNews.length
-            });
-          } else if (isReplace) {
-            // 替换模式：直接覆盖，不去重
-            const endIndex = startIndex + events.length;
-            const before = state.dynamicNews.slice(0, startIndex);
-            const after = state.dynamicNews.slice(endIndex);
-            state.dynamicNews = [...before, ...events, ...after];
-
-            logger.debug('CommunityData', '替换重叠数据（不去重）', {
-              page,
-              startIndex,
-              endIndex,
-              eventsCount: events.length,
-              beforeLength: before.length,
-              afterLength: after.length,
-              totalCount: state.dynamicNews.length
-            });
-          } else {
-            // 跳页模式：填充间隔，不去重
-            const gap = startIndex - state.dynamicNews.length;
-            const fillers = Array(gap).fill(null);
-            state.dynamicNews = [...state.dynamicNews, ...fillers, ...events];
-
-            logger.debug('CommunityData', '跳页加载，填充间隔（不去重）', {
-              page,
-              startIndex,
-              endIndex: startIndex + events.length,
-              gap,
-              eventsCount: events.length,
-              totalCount: state.dynamicNews.length
+              totalCount: state.fourRowEvents.length
             });
           }
         }
 
-        state.dynamicNewsTotal = total;
-        state.loading.dynamicNews = false;
-        state.lastUpdated.dynamicNews = new Date().toISOString();
+        // 【元数据存储】存储完整的 pagination 对象
+        const paginationKey = mode === 'four-row' ? 'fourRowPagination' : 'verticalPagination';
+        const finalPerPage = per_page || (mode === 'four-row' ? 30 : 10); // 兜底默认值
+        state[paginationKey] = {
+          total: total,
+          total_pages: action.payload.totalPages || Math.ceil(total / finalPerPage),
+          current_page: page,
+          per_page: finalPerPage
+        };
+
+        console.log('%c[Redux] 更新分页元数据', 'color: #8B5CF6; font-weight: bold;', {
+          mode,
+          pagination: state[paginationKey]
+        });
+
+        state.loading[stateKey] = false;
       })
       .addCase(fetchDynamicNews.rejected, (state, action) => {
-        state.loading.dynamicNews = false;
-        state.error.dynamicNews = action.payload;
-        logger.error('CommunityData', 'dynamicNews 加载失败', new Error(action.payload));
+        const mode = action.meta.arg.mode || 'vertical';
+        const stateKey = mode === 'four-row' ? 'fourRowEvents' : 'verticalEvents';
+        state.loading[stateKey] = false;
+        state.error[stateKey] = action.payload;
+        logger.error('CommunityData', `${stateKey} 加载失败`, new Error(action.payload));
       })
       // toggleEventFollow
       .addCase(toggleEventFollow.fulfilled, (state, action) => {
@@ -474,7 +614,7 @@ const communityDataSlice = createSlice({
         state.eventFollowStatus[eventId] = { isFollowing, followerCount };
         logger.debug('CommunityData', 'toggleEventFollow fulfilled', { eventId, isFollowing, followerCount });
       })
-      .addCase(toggleEventFollow.rejected, (state, action) => {
+      .addCase(toggleEventFollow.rejected, (_state, action) => {
         logger.error('CommunityData', 'toggleEventFollow rejected', action.payload);
       });
   }
@@ -482,46 +622,60 @@ const communityDataSlice = createSlice({
 
 // ==================== 导出 ====================
 
-export const { clearCache, clearSpecificCache, preloadData, setEventFollowStatus } = communityDataSlice.actions;
+export const { clearCache, clearSpecificCache, preloadData, setEventFollowStatus, updatePaginationPage } = communityDataSlice.actions;
 
 // 基础选择器（Selectors）
 export const selectPopularKeywords = (state) => state.communityData.popularKeywords;
 export const selectHotEvents = (state) => state.communityData.hotEvents;
-export const selectDynamicNews = (state) => state.communityData.dynamicNews;
 export const selectEventFollowStatus = (state) => state.communityData.eventFollowStatus;
 export const selectLoading = (state) => state.communityData.loading;
 export const selectError = (state) => state.communityData.error;
-export const selectLastUpdated = (state) => state.communityData.lastUpdated;
+
+// 纵向模式数据选择器
+export const selectVerticalEventsByPage = (state) => state.communityData.verticalEventsByPage;
+export const selectVerticalPagination = (state) => state.communityData.verticalPagination;
+export const selectVerticalCachedPageCount = (state) => Object.keys(state.communityData.verticalEventsByPage || {}).length;
+
+// 平铺模式数据选择器
+export const selectFourRowEvents = (state) => state.communityData.fourRowEvents;
+export const selectFourRowPagination = (state) => state.communityData.fourRowPagination;
+export const selectFourRowCachedCount = (state) => (state.communityData.fourRowEvents || []).length;
+
+// 向后兼容的选择器（已废弃，建议使用 selectVerticalPagination.total）
+export const selectVerticalTotal = (state) => state.communityData.verticalPagination?.total || 0;
+export const selectFourRowTotal = (state) => state.communityData.fourRowPagination?.total || 0;
 
 // 组合选择器
 export const selectPopularKeywordsWithLoading = (state) => ({
   data: state.communityData.popularKeywords,
   loading: state.communityData.loading.popularKeywords,
-  error: state.communityData.error.popularKeywords,
-  lastUpdated: state.communityData.lastUpdated.popularKeywords
+  error: state.communityData.error.popularKeywords
 });
 
 export const selectHotEventsWithLoading = (state) => ({
   data: state.communityData.hotEvents,
   loading: state.communityData.loading.hotEvents,
-  error: state.communityData.error.hotEvents,
-  lastUpdated: state.communityData.lastUpdated.hotEvents
+  error: state.communityData.error.hotEvents
 });
 
-export const selectDynamicNewsWithLoading = (state) => ({
-  data: state.communityData.dynamicNews,              // 完整缓存列表（可能包含 null 占位符）
-  loading: state.communityData.loading.dynamicNews,
-  error: state.communityData.error.dynamicNews,
-  total: state.communityData.dynamicNewsTotal,        // 服务端总数量
-  cachedCount: state.communityData.dynamicNews.filter(e => e !== null).length, // 已缓存有效数量（排除 null）
-  lastUpdated: state.communityData.lastUpdated.dynamicNews
+// 纵向模式数据 + 加载状态选择器
+export const selectVerticalEventsWithLoading = (state) => ({
+  data: state.communityData.verticalEventsByPage,        // 页码映射 { 1: [...], 2: [...] }
+  loading: state.communityData.loading.verticalEvents,
+  error: state.communityData.error.verticalEvents,
+  pagination: state.communityData.verticalPagination,    // 完整分页元数据 { total, total_pages, current_page, per_page }
+  total: state.communityData.verticalPagination?.total || 0,   // 向后兼容：服务端总数量
+  cachedPageCount: Object.keys(state.communityData.verticalEventsByPage || {}).length // 已缓存页数
 });
 
-// 工具函数：检查数据是否需要刷新（超过指定时间）
-export const shouldRefresh = (lastUpdated, thresholdMinutes = 30) => {
-  if (!lastUpdated) return true;
-  const elapsed = Date.now() - new Date(lastUpdated).getTime();
-  return elapsed > thresholdMinutes * 60 * 1000;
-};
+// 平铺模式数据 + 加载状态选择器
+export const selectFourRowEventsWithLoading = (state) => ({
+  data: state.communityData.fourRowEvents,               // 完整缓存列表
+  loading: state.communityData.loading.fourRowEvents,
+  error: state.communityData.error.fourRowEvents,
+  pagination: state.communityData.fourRowPagination,     // 完整分页元数据 { total, total_pages, current_page, per_page }
+  total: state.communityData.fourRowPagination?.total || 0,    // 向后兼容：服务端总数量
+  cachedCount: (state.communityData.fourRowEvents || []).length  // 已缓存有效数量
+});
 
 export default communityDataSlice.reducer;

src/views/Community/components/DynamicNewsCard.js

@@ -1,7 +1,7 @@
 // src/views/Community/components/DynamicNewsCard.js
 // 横向滚动事件卡片组件（实时要闻·动态追踪）
 
-import React, { forwardRef, useState, useEffect, useMemo, useCallback } from 'react';
+import React, { forwardRef, useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   Card,
@@ -16,21 +16,37 @@ import {
   Badge,
   Center,
   Spinner,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
   useColorModeValue,
-  useToast
+  useToast,
+  useDisclosure,
 } from '@chakra-ui/react';
 import { TimeIcon } from '@chakra-ui/icons';
 import EventScrollList from './DynamicNewsCard/EventScrollList';
+import ModeToggleButtons from './DynamicNewsCard/ModeToggleButtons';
+import PaginationControl from './DynamicNewsCard/PaginationControl';
 import DynamicNewsDetailPanel from './DynamicNewsDetail';
 import UnifiedSearchBox from './UnifiedSearchBox';
-import { fetchDynamicNews, toggleEventFollow, selectEventFollowStatus } from '../../../store/slices/communityDataSlice';
+import {
+  fetchDynamicNews,
+  toggleEventFollow,
+  selectEventFollowStatus,
+  selectVerticalEventsWithLoading,
+  selectFourRowEventsWithLoading
+} from '../../../store/slices/communityDataSlice';
+import { usePagination } from './DynamicNewsCard/hooks/usePagination';
+import { PAGINATION_CONFIG, DISPLAY_MODES } from './DynamicNewsCard/constants';
+
+// 🔍 调试：渲染计数器
+let dynamicNewsCardRenderCount = 0;
 
 /**
  * 实时要闻·动态追踪 - 事件展示卡片组件
- * @param {Array} allCachedEvents - 完整缓存事件列表（从 Redux 传入）
- * @param {boolean} loading - 加载状态
- * @param {number} total - 服务端总数量
- * @param {number} cachedCount - 已缓存数量
  * @param {Object} filters - 筛选条件
  * @param {Array} popularKeywords - 热门关键词
  * @param {Date} lastUpdateTime - 最后更新时间
@@ -41,10 +57,6 @@ import { fetchDynamicNews, toggleEventFollow, selectEventFollowStatus } from '..
  * @param {Object} ref - 用于滚动的ref
  */
 const DynamicNewsCard = forwardRef(({
-  allCachedEvents = [],
-  loading,
-  total = 0,
-  cachedCount = 0,
   filters = {},
   popularKeywords = [],
   lastUpdateTime,
@@ -59,9 +71,74 @@ const DynamicNewsCard = forwardRef(({
   const cardBg = useColorModeValue('white', 'gray.800');
   const borderColor = useColorModeValue('gray.200', 'gray.700');
 
+  // 固定模式状态
+  const [isFixedMode, setIsFixedMode] = useState(false);
+  const [headerHeight, setHeaderHeight] = useState(0);
+  const cardHeaderRef = useRef(null);
+  const cardBodyRef = useRef(null);
+
+  // 导航栏和页脚固定高度
+  const NAVBAR_HEIGHT = 64;  // 主导航高度
+  const SECONDARY_NAV_HEIGHT = 44;  // 二级导航高度
+  const FOOTER_HEIGHT = 120;  // 页脚高度（预留）
+  const TOTAL_NAV_HEIGHT = NAVBAR_HEIGHT + SECONDARY_NAV_HEIGHT;  // 总导航高度 128px
+
   // 从 Redux 读取关注状态
   const eventFollowStatus = useSelector(selectEventFollowStatus);
 
+// 本地状态：模式（先初始化，后面会被 usePagination 更新）
+const [currentMode, setCurrentMode] = useState('vertical');
+
+  // 根据当前模式从 Redux 读取对应的数据（添加默认值避免 undefined）
+  const verticalData = useSelector(selectVerticalEventsWithLoading) || {};
+  const fourRowData = useSelector(selectFourRowEventsWithLoading) || {};
+
+  // 🔍 调试：从 Redux 读取数据
+  console.log('%c[DynamicNewsCard] 从 Redux 读取数据', 'color: #3B82F6; font-weight: bold;', {
+    currentMode,
+    'verticalData.data type': typeof verticalData.data,
+    'verticalData.data keys': verticalData.data ? Object.keys(verticalData.data) : [],
+    'verticalData.total': verticalData.total,
+    'verticalData.cachedPageCount': verticalData.cachedPageCount,
+    'verticalData.loading': verticalData.loading,
+    'fourRowData.data?.length': fourRowData.data?.length || 0,
+    'fourRowData.total': fourRowData.total,
+  });
+
+  // 根据模式选择数据源
+  // 纵向模式：data 是页码映射 { 1: [...], 2: [...] }
+  // 平铺模式：data 是数组 [...]
+  const modeData = currentMode === 'four-row' ? fourRowData : verticalData;
+  const {
+    data = currentMode === 'vertical' ? {} : [],  // 纵向是对象，平铺是数组
+    loading = false,
+    error = null,
+    pagination,                                     // 分页元数据
+    total = 0,                                      // 向后兼容
+    cachedCount = 0,
+    cachedPageCount = 0
+  } = modeData;
+
+  // 传递给 usePagination 的数据
+  const allCachedEventsByPage = currentMode === 'vertical' ? data : undefined;
+  const allCachedEvents = currentMode === 'four-row' ? data : undefined;
+
+  // 🔍 调试：选择的数据源
+  console.log('%c[DynamicNewsCard] 选择的数据源', 'color: #3B82F6; font-weight: bold;', {
+    mode: currentMode,
+    'allCachedEventsByPage': allCachedEventsByPage ? Object.keys(allCachedEventsByPage) : 'undefined',
+    'allCachedEvents?.length': allCachedEvents?.length,
+    total,
+    cachedCount,
+    cachedPageCount,
+    loading,
+    error
+  });
+
+  // 🔍 调试：记录每次渲染
+  dynamicNewsCardRenderCount++;
+  console.log(`%c🔍 [DynamicNewsCard] 渲染 #${dynamicNewsCardRenderCount} - mode=${currentMode}, allCachedEvents.length=${allCachedEvents?.length || 0}, total=${total}`, 'color: #FF9800; font-weight: bold; font-size: 14px;');
+
   // 关注按钮点击处理
   const handleToggleFollow = useCallback((eventId) => {
     dispatch(toggleEventFollow(eventId));
@@ -69,295 +146,322 @@ const DynamicNewsCard = forwardRef(({
 
   // 本地状态
   const [selectedEvent, setSelectedEvent] = useState(null);
-  const [mode, setMode] = useState('carousel'); // 'carousel' 或 'grid'，默认单排
-  const [currentPage, setCurrentPage] = useState(1); // 当前页码
-  const [loadingPage, setLoadingPage] = useState(null); // 正在加载的目标页码（用于 UX 提示）
 
-  // 根据模式决定每页显示数量
-  const pageSize = mode === 'carousel' ? 5 : 10;
+  // 弹窗状态（用于四排模式）
+  const { isOpen: isModalOpen, onOpen: onModalOpen, onClose: onModalClose } = useDisclosure();
+  const [modalEvent, setModalEvent] = useState(null);
 
-  // 计算总页数（基于服务端总数据量）
-  const totalPages = Math.ceil(total / pageSize) || 1;
+  // 初始化标记 - 确保初始加载只执行一次
+  const hasInitialized = useRef(false);
+  // 追踪是否已自动选中过首个事件
+  const hasAutoSelectedFirstEvent = useRef(false);
+  // 追踪筛选条件 useEffect 是否是第一次渲染（避免初始加载时重复请求）
+  const isFirstRenderForFilters = useRef(true);
 
-  // 检查是否还有更多数据
-  const hasMore = cachedCount < total;
+  // 使用分页 Hook
+  const {
+    currentPage,
+    mode,
+    loadingPage,
+    pageSize,
+    totalPages,
+    hasMore,
+    currentPageEvents,
+    displayEvents,        // 当前显示的事件列表
+    handlePageChange,
+    handleModeToggle,
+    loadNextPage,         // 加载下一页
+    loadPrevPage          // 加载上一页
+  } = usePagination({
+    allCachedEventsByPage,  // 纵向模式：页码映射
+    allCachedEvents,         // 平铺模式：数组
+    pagination,              // 分页元数据对象
+    total,                   // 向后兼容
+    cachedCount,
+    dispatch,
+    toast,
+    filters,              // 传递筛选条件
+    initialMode: currentMode  // 传递当前显示模式
+  });
 
-  // 从缓存中切片获取当前页数据（过滤 null 占位符）
-  const currentPageEvents = useMemo(() => {
-    const startIndex = (currentPage - 1) * pageSize;
-    const endIndex = startIndex + pageSize;
-    return allCachedEvents.slice(startIndex, endIndex).filter(event => event !== null);
-  }, [allCachedEvents, currentPage, pageSize]);
-
-  // 翻页处理（智能预加载）
-  const handlePageChange = useCallback(async (newPage) => {
-    // 🔍 诊断日志 - 记录翻页开始状态
-    console.log('[handlePageChange] 开始翻页', {
-      currentPage,
-      newPage,
-      pageSize,
-      totalPages,
-      hasMore,
-      total,
-      allCachedEventsLength: allCachedEvents.length,
-      cachedCount
-    });
-
-    // 0. 首先检查目标页数据是否已完整缓存
-    const targetPageStartIndex = (newPage - 1) * pageSize;
-    const targetPageEndIndex = targetPageStartIndex + pageSize;
-    const targetPageData = allCachedEvents.slice(targetPageStartIndex, targetPageEndIndex);
-    const validTargetData = targetPageData.filter(e => e !== null);
-    const expectedCount = Math.min(pageSize, total - targetPageStartIndex);
-    const isTargetPageCached = validTargetData.length >= expectedCount;
-
-    console.log('[handlePageChange] 目标页缓存检查', {
-      newPage,
-      targetPageStartIndex,
-      targetPageEndIndex,
-      targetPageDataLength: targetPageData.length,
-      validTargetDataLength: validTargetData.length,
-      expectedCount,
-      isTargetPageCached
-    });
-
-    // 1. 判断翻页类型：连续翻页（上一页/下一页）还是跳转翻页（点击页码/输入跳转）
-    const isSequentialNavigation = Math.abs(newPage - currentPage) === 1;
-
-    // 2. 计算预加载范围
-    let preloadRange;
-    if (isSequentialNavigation) {
-      // 连续翻页：前后各2页（共5页）
-      const start = Math.max(1, newPage - 2);
-      const end = Math.min(totalPages, newPage + 2);
-      preloadRange = Array.from(
-        { length: end - start + 1 },
-        (_, i) => start + i
-      );
-    } else {
-      // 跳转翻页：只加载当前页
-      preloadRange = [newPage];
-    }
-
-    // 3. 检查哪些页面的数据还未缓存（检查是否包含 null 或超出数组长度）
-    const missingPages = preloadRange.filter(page => {
-      const pageStartIndex = (page - 1) * pageSize;
-      const pageEndIndex = pageStartIndex + pageSize;
-
-      // 如果该页超出数组范围，说明未缓存
-      if (pageEndIndex > allCachedEvents.length) {
-        console.log(`[missingPages] 页面${page}超出数组范围`, {
-          pageStartIndex,
-          pageEndIndex,
-          allCachedEventsLength: allCachedEvents.length
-        });
-        return true;
-      }
-
-      // 检查该页的数据是否包含 null 占位符或数据不足
-      const pageData = allCachedEvents.slice(pageStartIndex, pageEndIndex);
-      const validData = pageData.filter(e => e !== null);
-      const expectedCount = Math.min(pageSize, total - pageStartIndex);
-      const hasNullOrIncomplete = validData.length < expectedCount;
-
-      console.log(`[missingPages] 页面${page}检查`, {
-        pageStartIndex,
-        pageEndIndex,
-        pageDataLength: pageData.length,
-        validDataLength: validData.length,
-        expectedCount,
-        hasNullOrIncomplete
-      });
-
-      return hasNullOrIncomplete;
-    });
-
-    console.log('[handlePageChange] 缺失页面检测完成', {
-      preloadRange,
-      missingPages,
-      missingPagesCount: missingPages.length
-    });
-
-    // 4. 如果目标页已缓存，立即切换页码，然后在后台静默预加载其他页
-    if (isTargetPageCached && missingPages.length > 0 && hasMore) {
-      console.log('[DynamicNewsCard] 目标页已缓存，立即切换', {
-        currentPage,
-        newPage,
-        缺失页面: missingPages,
-        目标页已缓存: true
-      });
-
-      // 立即切换页码（用户无感知延迟）
-      setCurrentPage(newPage);
-
-      // 在后台静默预加载其他缺失页面（拆分为单页请求）
-      try {
-        console.log('[DynamicNewsCard] 开始后台预加载', {
-          缺失页面: missingPages,
-          每页数量: pageSize
-        });
-
-        // 拆分为单页请求，避免 per_page 动态值导致后端返回空数据
-        for (const page of missingPages) {
-          await dispatch(fetchDynamicNews({
-            page: page,
-            per_page: pageSize,  // 固定值（5或10），不使用动态计算
-            pageSize: pageSize,
-            clearCache: false
-          })).unwrap();
-
-          console.log(`[DynamicNewsCard] 后台预加载第 ${page} 页完成`);
-        }
-
-        console.log('[DynamicNewsCard] 后台预加载全部完成', {
-          预加载页面: missingPages
-        });
-      } catch (error) {
-        console.error('[DynamicNewsCard] 后台预加载失败', error);
-        // 静默失败，不影响用户体验
-      }
-
-      return; // 提前返回，不执行下面的加载逻辑
-    }
-
-    // 5. 如果目标页未缓存，显示 loading 并等待加载完成
-    if (missingPages.length > 0 && hasMore) {
-      console.log('[DynamicNewsCard] 目标页未缓存，显示loading', {
-        currentPage,
-        newPage,
-        翻页类型: isSequentialNavigation ? '连续翻页' : '跳转翻页',
-        预加载范围: preloadRange,
-        缺失页面: missingPages,
-        每页数量: pageSize,
-        目标页已缓存: false
-      });
-
-      try {
-        // 设置加载状态（显示"正在加载第X页..."）
-        setLoadingPage(newPage);
-
-        // 拆分为单页请求，避免 per_page 动态值导致后端返回空数据
-        for (const page of missingPages) {
-          console.log(`[DynamicNewsCard] 开始加载第 ${page} 页`);
-
-          await dispatch(fetchDynamicNews({
-            page: page,
-            per_page: pageSize,  // 固定值（5或10），不使用动态计算
-            pageSize: pageSize,  // 传递原始 pageSize，用于正确计算索引
-            clearCache: false
-          })).unwrap();
-
-          console.log(`[DynamicNewsCard] 第 ${page} 页加载完成`);
-        }
-
-        console.log('[DynamicNewsCard] 所有缺失页面加载完成', {
-          缺失页面: missingPages
-        });
-
-        // 数据加载成功后才更新当前页码
-        setCurrentPage(newPage);
-      } catch (error) {
-        console.error('[DynamicNewsCard] 翻页加载失败', error);
-
-        // 显示错误提示
-        toast({
-          title: '加载失败',
-          description: `无法加载第 ${newPage} 页数据，请稍后重试`,
-          status: 'error',
-          duration: 3000,
-          isClosable: true,
-          position: 'top'
-        });
-
-        // 加载失败时不更新页码，保持在当前页
-      } finally {
-        // 清除加载状态
-        setLoadingPage(null);
-      }
-    } else if (missingPages.length === 0) {
-      // 只有在确实不需要加载时才直接切换
-      console.log('[handlePageChange] 无需加载，直接切换', {
-        currentPage,
-        newPage,
-        preloadRange,
-        missingPages,
-        reason: '所有页面均已缓存'
-      });
-      setCurrentPage(newPage);
-    } else {
-      // 理论上不应该到这里（missingPages.length > 0 但 hasMore=false）
-      console.warn('[handlePageChange] 意外分支：有缺失页面但无法加载', {
-        missingPages,
-        hasMore,
-        currentPage,
-        newPage,
-        total,
-        cachedCount
-      });
-
-      // 尝试切换页码，但可能会显示空数据
-      setCurrentPage(newPage);
+  // 同步 mode 到 currentMode
+  useEffect(() => {
+    setCurrentMode(mode);
+  }, [mode]);
 
+  // 监听 error 状态，显示空数据提示
+  useEffect(() => {
+    if (error && error.includes('暂无更多数据')) {
       toast({
-        title: '数据不完整',
-        description: `第 ${newPage} 页数据可能不完整`,
-        status: 'warning',
+        title: '提示',
+        description: error,
+        status: 'info',
         duration: 2000,
         isClosable: true,
-        position: 'top'
       });
     }
-  }, [currentPage, allCachedEvents, pageSize, totalPages, hasMore, dispatch, total, toast, cachedCount]);
+  }, [error, toast]);
 
-  // 模式切换处理
-  const handleModeToggle = useCallback((newMode) => {
-    if (newMode === mode) return;
+  // 四排模式的事件点击处理（打开弹窗）
+  const handleFourRowEventClick = useCallback((event) => {
+    console.log('%c🔲 [四排模式] 点击事件，打开详情弹窗', 'color: #8B5CF6; font-weight: bold;', { eventId: event.id, title: event.title });
+    setModalEvent(event);
+    onModalOpen();
+  }, [onModalOpen]);
 
-    setMode(newMode);
-    setCurrentPage(1);
+  // 初始加载 - 只在组件首次挂载且对应模式数据为空时执行
+  useEffect(() => {
+    // 添加防抖：如果已经初始化，不再执行
+    if (hasInitialized.current) return;
 
-    const newPageSize = newMode === 'carousel' ? 5 : 10;
+    const isDataEmpty = currentMode === 'vertical'
+      ? Object.keys(allCachedEventsByPage || {}).length === 0
+      : (allCachedEvents?.length || 0) === 0;
 
-    // 检查第1页的数据是否完整（排除 null）
-    const firstPageData = allCachedEvents.slice(0, newPageSize);
-    const validFirstPageCount = firstPageData.filter(e => e !== null).length;
-    const needsRefetch = validFirstPageCount < Math.min(newPageSize, total);
-
-    if (needsRefetch) {
-      // 第1页数据不完整，清空缓存重新请求
+    if (isDataEmpty) {
+      hasInitialized.current = true;
       dispatch(fetchDynamicNews({
-        page: 1,
-        per_page: newPageSize,
-        pageSize: newPageSize,  // 传递 pageSize 确保索引计算一致
-        clearCache: true
+        mode: mode,  // 传递当前模式
+        per_page: pageSize,
+        pageSize: pageSize,  // 传递 pageSize 确保索引计算一致
+        clearCache: true,
+        ...filters,  // 先展开筛选条件
+        page: PAGINATION_CONFIG.INITIAL_PAGE,  // 然后覆盖 page 参数
       }));
     }
-    // 如果第1页数据完整，不发起请求，直接切换
-  }, [mode, allCachedEvents, total, dispatch]);
+  }, [dispatch, currentMode, mode, pageSize]);  // 移除 allCachedEventsByPage, allCachedEvents 依赖，避免数据更新触发重复请求
 
-  // 初始加载
+  // 监听筛选条件变化 - 清空缓存并重新请求数据
   useEffect(() => {
-    if (allCachedEvents.length === 0) {
+    // 跳过初始加载（由上面的 useEffect 处理）
+    if (!hasInitialized.current) return;
+
+    // 跳过第一次渲染（避免与初始加载 useEffect 重复）
+    if (isFirstRenderForFilters.current) {
+      isFirstRenderForFilters.current = false;
+      return;
+    }
+
+    console.log('%c🔍 [筛选] 筛选条件改变，重新请求数据', 'color: #8B5CF6; font-weight: bold;', filters);
+
+    // 筛选条件改变时，清空对应模式的缓存并从第1页开始加载
+    dispatch(fetchDynamicNews({
+      mode: mode,  // 传递当前模式
+      per_page: pageSize,
+      pageSize: pageSize,
+      clearCache: true,  // 清空缓存
+      ...filters,  // 先展开筛选条件
+      page: PAGINATION_CONFIG.INITIAL_PAGE,  // 然后覆盖 page 参数
+    }));
+  }, [
+    filters.sort,
+    filters.importance,
+    filters.q,
+    filters.start_date,      // 时间筛选参数：开始时间
+    filters.end_date,        // 时间筛选参数：结束时间
+    filters.recent_days,     // 时间筛选参数：近N天
+    filters.industry_code,
+    filters._forceRefresh,   // 强制刷新标志（用于重置按钮）
+    mode,  // 添加 mode 到依赖
+    pageSize,  // 添加 pageSize 到依赖
+    dispatch
+  ]);  // 只监听筛选参数的变化，不监听 page
+
+  // 监听模式切换 - 如果新模式数据为空，请求数据
+  useEffect(() => {
+    const isDataEmpty = currentMode === 'vertical'
+      ? Object.keys(allCachedEventsByPage || {}).length === 0
+      : (allCachedEvents?.length || 0) === 0;
+
+    if (hasInitialized.current && isDataEmpty) {
+      console.log(`%c🔄 [模式切换] ${mode} 模式数据为空，开始加载`, 'color: #8B5CF6; font-weight: bold;');
+
+      // 🔧 根据 mode 直接计算 per_page，避免使用可能过时的 pageSize prop
+      const modePageSize = mode === DISPLAY_MODES.FOUR_ROW
+        ? PAGINATION_CONFIG.FOUR_ROW_PAGE_SIZE  // 30
+        : PAGINATION_CONFIG.VERTICAL_PAGE_SIZE;  // 10
+
+      console.log(`%c   计算的 per_page: ${modePageSize} (mode: ${mode})`, 'color: #8B5CF6;');
+
       dispatch(fetchDynamicNews({
-        page: 1,
-        per_page: 5,
-        pageSize: 5,  // 传递 pageSize 确保索引计算一致
-        clearCache: true
+        mode: mode,
+        per_page: modePageSize,  // 使用计算的值，不是 pageSize prop
+        pageSize: modePageSize,
+        clearCache: true,
+        ...filters,  // 先展开筛选条件
+        page: PAGINATION_CONFIG.INITIAL_PAGE,  // 然后覆盖 page 参数
       }));
     }
-  }, [dispatch, allCachedEvents.length]);
+  }, [mode, currentMode, allCachedEventsByPage, allCachedEvents, dispatch]);  // 移除 filters 依赖，避免与筛选 useEffect 循环触发  // 添加所有依赖
 
-  // 默认选中第一个事件
+  // 自动选中逻辑 - 只在首次加载时自动选中第一个事件，翻页时不自动选中
   useEffect(() => {
-    if (currentPageEvents.length > 0 && !selectedEvent) {
-      setSelectedEvent(currentPageEvents[0]);
+    if (currentPageEvents.length > 0) {
+      // 情况1: 首次加载 - 自动选中第一个事件并触发详情加载
+      if (!hasAutoSelectedFirstEvent.current && !selectedEvent) {
+        console.log('%c🎯 [首次加载] 自动选中第一个事件', 'color: #10B981; font-weight: bold;');
+        hasAutoSelectedFirstEvent.current = true;
+        setSelectedEvent(currentPageEvents[0]);
+        return;
+      }
+
+      // 情况2: 翻页 - 如果选中的事件不在当前页，根据模式决定处理方式
+      const selectedEventInCurrentPage = currentPageEvents.find(
+        e => e.id === selectedEvent?.id
+      );
     }
-  }, [currentPageEvents, selectedEvent]);
+  }, [currentPageEvents, selectedEvent?.id, mode]);
+
+  // 组件卸载时清理选中状态
+  useEffect(() => {
+    return () => {
+      setSelectedEvent(null);
+    };
+  }, []);
+
+  // 页码切换时滚动到顶部
+  const handlePageChangeWithScroll = useCallback((page) => {
+    // 先切换页码
+    handlePageChange(page);
+
+    // 延迟一帧，确保DOM更新完成后再滚动
+    requestAnimationFrame(() => {
+      // 查找所有标记为滚动容器的元素
+      const containers = document.querySelectorAll('[data-scroll-container]');
+      containers.forEach(container => {
+        container.scrollTo({ top: 0, behavior: 'smooth' });
+      });
+      console.log('📜 页码切换，滚动到顶部', { containersFound: containers.length });
+    });
+  }, [handlePageChange]);
+
+  // 测量 CardHeader 高度
+  useEffect(() => {
+    const cardHeaderElement = cardHeaderRef.current;
+    if (!cardHeaderElement) return;
+
+    // 测量并更新高度
+    const updateHeaderHeight = () => {
+      const height = cardHeaderElement.offsetHeight;
+      setHeaderHeight(height);
+    };
+
+    // 初始测量
+    updateHeaderHeight();
+
+    // 监听窗口大小变化（响应式调整）
+    window.addEventListener('resize', updateHeaderHeight);
+
+    return () => {
+      window.removeEventListener('resize', updateHeaderHeight);
+    };
+  }, []);
+
+  // 监听 CardHeader 是否到达触发点，动态切换固定模式
+  useEffect(() => {
+    const cardHeaderElement = cardHeaderRef.current;
+    const cardBodyElement = cardBodyRef.current;
+    if (!cardHeaderElement || !cardBodyElement) return;
+
+    let ticking = false;
+    const TRIGGER_OFFSET = 100; // 提前 100px 触发
+
+    // 外部滚动监听：触发固定模式
+    const handleExternalScroll = () => {
+      // 只在非固定模式下监听外部滚动
+      if (!isFixedMode && !ticking) {
+        window.requestAnimationFrame(() => {
+          // 获取 CardHeader 相对视口的位置
+          const rect = cardHeaderElement.getBoundingClientRect();
+          const elementTop = rect.top;
+
+          // 计算触发点：总导航高度 + 100px 偏移量
+          const triggerPoint = TOTAL_NAV_HEIGHT + TRIGGER_OFFSET;
+
+          // 向上滑动：元素顶部到达触发点 → 激活固定模式
+          if (elementTop <= triggerPoint) {
+            setIsFixedMode(true);
+            console.log('🔒 切换为固定全屏模式', {
+              elementTop,
+              triggerPoint,
+              offset: TRIGGER_OFFSET
+            });
+          }
+
+          ticking = false;
+        });
+
+        ticking = true;
+      }
+    };
+
+    // 内部滚动监听：退出固定模式
+    const handleWheel = (e) => {
+      // 只在固定模式下监听内部滚动
+      if (!isFixedMode) return;
+
+      // 检测向上滚动（deltaY < 0）
+      if (e.deltaY < 0) {
+        // 查找所有滚动容器
+        const scrollContainers = cardBodyElement.querySelectorAll('[data-scroll-container]');
+
+        if (scrollContainers.length === 0) {
+          // 如果没有找到标记的容器，查找所有可滚动元素
+          const allScrollable = cardBodyElement.querySelectorAll('[style*="overflow"]');
+          scrollContainers = allScrollable;
+        }
+
+        // 检查是否所有滚动容器都在顶部
+        const allAtTop = scrollContainers.length === 0 ||
+                        Array.from(scrollContainers).every(
+                          container => container.scrollTop === 0
+                        );
+
+        if (allAtTop) {
+          setIsFixedMode(false);
+          console.log('🔓 恢复正常文档流模式（内部滚动到顶部）');
+        }
+      }
+    };
+
+    // 监听外部滚动
+    window.addEventListener('scroll', handleExternalScroll, { passive: true });
+
+    // 监听内部滚轮事件（固定模式下）
+    if (isFixedMode) {
+      cardBodyElement.addEventListener('wheel', handleWheel, { passive: true });
+    }
+
+    // 初次检查位置
+    handleExternalScroll();
+
+    return () => {
+      window.removeEventListener('scroll', handleExternalScroll);
+      cardBodyElement.removeEventListener('wheel', handleWheel);
+    };
+  }, [isFixedMode]);
 
   return (
-    <Card ref={ref} {...rest} bg={cardBg} borderColor={borderColor} mb={4}>
+    <Card
+      ref={ref}
+      {...rest}
+      bg={cardBg}
+      borderColor={borderColor}
+      mb={4}
+    >
       {/* 标题部分 */}
-      <CardHeader>
+      <CardHeader
+        ref={cardHeaderRef}
+        position={isFixedMode ? 'fixed' : 'relative'}
+        top={isFixedMode ? `${TOTAL_NAV_HEIGHT}px` : 'auto'}
+        left={isFixedMode ? 0 : 'auto'}
+        right={isFixedMode ? 0 : 'auto'}
+        maxW={isFixedMode ? '1600px' : '100%'}
+        mx={isFixedMode ? 'auto' : 0}
+        px={isFixedMode ? { base: 3, md: 4 } : undefined}
+        zIndex={isFixedMode ? 999 : 1}
+        bg={cardBg}
+      >
         <Flex justify="space-between" align="center">
           <VStack align="start" spacing={1}>
             <Heading size="md">
@@ -384,54 +488,110 @@ const DynamicNewsCard = forwardRef(({
             onSearchFocus={onSearchFocus}
             popularKeywords={popularKeywords}
             filters={filters}
+            mode={mode}
+            pageSize={pageSize}
           />
         </Box>
       </CardHeader>
 
       {/* 主体内容 */}
-      <CardBody position="relative" pt={0}>
-        {/* 横向滚动事件列表 - 始终渲染（除非为空） */}
-        {currentPageEvents && currentPageEvents.length > 0 ? (
+      <CardBody
+        ref={cardBodyRef}
+        position={isFixedMode ? 'fixed' : 'relative'}
+        top={isFixedMode ? `${TOTAL_NAV_HEIGHT + headerHeight}px` : 'auto'}
+        left={isFixedMode ? 0 : 'auto'}
+        right={isFixedMode ? 0 : 'auto'}
+        bottom={isFixedMode ? `${FOOTER_HEIGHT}px` : 'auto'}
+        maxW={isFixedMode ? '1600px' : '100%'}
+        mx={isFixedMode ? 'auto' : 0}
+        h={isFixedMode ? `calc(100vh - ${TOTAL_NAV_HEIGHT + headerHeight + FOOTER_HEIGHT}px)` : 'auto'}
+        px={isFixedMode ? { base: 3, md: 4 } : undefined}
+        pt={4}
+        display="flex"
+        flexDirection="column"
+        overflow="hidden"
+        zIndex={isFixedMode ? 1000 : 1}
+        bg={cardBg}
+      >
+        {/* 顶部控制栏：模式切换按钮 + 筛选按钮 + 分页控制器（固定不滚动） */}
+        <Flex justify="space-between" align="center" mb={2} flexShrink={0}>
+          {/* 左侧：模式切换按钮 + 筛选按钮 */}
+          <ModeToggleButtons mode={mode} onModeChange={handleModeToggle} />
+
+          {/* 右侧：分页控制器（仅在纵向模式显示） */}
+          {mode === 'vertical' && totalPages > 1 && (
+            <PaginationControl
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={handlePageChangeWithScroll}
+            />
+          )}
+        </Flex>
+
+        {/* 内容区域 - 撑满剩余高度 */}
+        <Box flex="1" minH={0} position="relative">
+          {/* Loading 蒙层 - 数据请求时显示 */}
+          {loading && (
+            <Box
+              position="absolute"
+              top={0}
+              left={0}
+              right={0}
+              bottom={0}
+              bg={useColorModeValue('rgba(255, 255, 255, 0.85)', 'rgba(26, 32, 44, 0.85)')}
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+              zIndex={10}
+              borderRadius="md"
+            >
+              <VStack spacing={3}>
+                <Spinner size="xl" color="blue.500" thickness="4px" />
+                <Text color={useColorModeValue('gray.600', 'gray.300')} fontWeight="medium">
+                  正在加载最新事件...
+                </Text>
+              </VStack>
+            </Box>
+          )}
+
+          {/* 列表内容 - 始终渲染 */}
           <EventScrollList
             events={currentPageEvents}
+            displayEvents={displayEvents}              // 累积显示的事件列表（平铺模式）
+            loadNextPage={loadNextPage}                // 加载下一页
+            loadPrevPage={loadPrevPage}                // 加载上一页
+            onFourRowEventClick={handleFourRowEventClick}  // 四排模式事件点击
             selectedEvent={selectedEvent}
             onEventSelect={setSelectedEvent}
             borderColor={borderColor}
             currentPage={currentPage}
             totalPages={totalPages}
-            onPageChange={handlePageChange}
+            onPageChange={handlePageChangeWithScroll}
             loading={loadingPage !== null}
-            loadingPage={loadingPage}
+            error={error}
             mode={mode}
-            onModeChange={handleModeToggle}
             eventFollowStatus={eventFollowStatus}
             onToggleFollow={handleToggleFollow}
             hasMore={hasMore}
           />
-        ) : !loading ? (
-          /* Empty 状态 - 只在非加载且无数据时显示 */
-          <Center py={10}>
-            <VStack>
-              <Text fontSize="lg" color="gray.500">暂无事件数据</Text>
-            </VStack>
-          </Center>
-        ) : (
-          /* 首次加载状态 */
-          <Center py={10}>
-            <VStack>
-              <Spinner size="xl" color="blue.500" thickness="4px" />
-              <Text color="gray.500">正在加载最新事件...</Text>
-            </VStack>
-          </Center>
-        )}
-
-        {/* 详情面板 - 始终显示（如果有选中事件） */}
-        {currentPageEvents && currentPageEvents.length > 0 && selectedEvent && (
-          <Box mt={6}>
-            <DynamicNewsDetailPanel event={selectedEvent} />
-          </Box>
-        )}
+        </Box>
       </CardBody>
+
+      {/* 四排模式详情弹窗 - 未打开时不渲染 */}
+      {isModalOpen && (
+        <Modal isOpen={isModalOpen} onClose={onModalClose} size="full" scrollBehavior="inside">
+          <ModalOverlay />
+          <ModalContent maxW="1600px" mx="auto" my={8}>
+            <ModalHeader>
+              {modalEvent?.title || '事件详情'}
+            </ModalHeader>
+            <ModalCloseButton />
+            <ModalBody pb={6}>
+              {modalEvent && <DynamicNewsDetailPanel event={modalEvent} />}
+            </ModalBody>
+          </ModalContent>
+        </Modal>
+      )}
     </Card>
   );
 });

src/views/Community/components/DynamicNewsCard/EventDetailScrollPanel.js

@@ -0,0 +1,62 @@
+// src/views/Community/components/DynamicNewsCard/EventDetailScrollPanel.js
+// 事件详情滚动面板组件
+
+import React from 'react';
+import { Box, Center, VStack, Text } from '@chakra-ui/react';
+import DynamicNewsDetailPanel from '../DynamicNewsDetail';
+
+/**
+ * 事件详情滚动面板
+ * 带自定义滚动条样式的事件详情容器
+ *
+ * @param {Object} selectedEvent - 当前选中的事件
+ * @param {string} scrollbarTrackBg - 滚动条轨道背景色
+ * @param {string} scrollbarThumbBg - 滚动条滑块背景色
+ * @param {string} scrollbarThumbHoverBg - 滚动条滑块悬浮背景色
+ */
+const EventDetailScrollPanel = ({
+  selectedEvent,
+  scrollbarTrackBg,
+  scrollbarThumbBg,
+  scrollbarThumbHoverBg,
+}) => {
+  return (
+    <Box
+      pl={2}
+      position="relative"
+      sx={{
+        height: '100%',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        '&::-webkit-scrollbar': {
+          width: '3px',
+        },
+        '&::-webkit-scrollbar-track': {
+          background: scrollbarTrackBg,
+          borderRadius: '10px',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          background: scrollbarThumbBg,
+          borderRadius: '10px',
+        },
+        '&::-webkit-scrollbar-thumb:hover': {
+          background: scrollbarThumbHoverBg,
+        },
+      }}
+    >
+      {selectedEvent ? (
+        <DynamicNewsDetailPanel event={selectedEvent} />
+      ) : (
+        <Center h="100%" minH="400px">
+          <VStack spacing={4}>
+            <Text fontSize="lg" color="gray.500">
+              请选择左侧事件查看详情
+            </Text>
+          </VStack>
+        </Center>
+      )}
+    </Box>
+  );
+};
+
+export default EventDetailScrollPanel;

src/views/Community/components/DynamicNewsCard/EventScrollList.js

@@ -1,28 +1,21 @@
 // src/views/Community/components/DynamicNewsCard/EventScrollList.js
 // 横向滚动事件列表组件
 
-import React, { useRef } from 'react';
+import React, { useRef, useCallback } from 'react';
 import {
   Box,
-  Flex,
-  Grid,
-  IconButton,
-  Button,
-  ButtonGroup,
-  Center,
-  VStack,
-  HStack,
-  Spinner,
-  Text,
   useColorModeValue
 } from '@chakra-ui/react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
-import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
-import PaginationControl from './PaginationControl';
+import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
+import VerticalModeLayout from './VerticalModeLayout';
 
 /**
- * 事件列表组件 - 支持两种展示模式
+ * 事件列表组件 - 支持纵向和平铺两种展示模式
  * @param {Array} events - 当前页的事件列表（服务端已分页）
+ * @param {Array} displayEvents - 累积显示的事件列表（平铺模式用）
+ * @param {Function} loadNextPage - 加载下一页（无限滚动）
+ * @param {Function} loadPrevPage - 加载上一页（双向无限滚动）
+ * @param {Function} onFourRowEventClick - 平铺模式事件点击回调（打开弹窗）
  * @param {Object} selectedEvent - 当前选中的事件
  * @param {Function} onEventSelect - 事件选择回调
  * @param {string} borderColor - 边框颜色
@@ -30,15 +23,18 @@ import PaginationControl from './PaginationControl';
  * @param {number} totalPages - 总页数（由服务端返回）
  * @param {Function} onPageChange - 页码改变回调
  * @param {boolean} loading - 全局加载状态
- * @param {number|null} loadingPage - 正在加载的目标页码（用于显示"正在加载第X页..."）
- * @param {string} mode - 展示模式：'carousel'（单排轮播）| 'grid'（双排网格）
- * @param {Function} onModeChange - 模式切换回调
+ * @param {Object} error - 错误状态
+ * @param {string} mode - 展示模式：'vertical'（纵向分栏）| 'four-row'（平铺网格）
  * @param {boolean} hasMore - 是否还有更多数据
  * @param {Object} eventFollowStatus - 事件关注状态 { [eventId]: { isFollowing, followerCount } }
  * @param {Function} onToggleFollow - 关注按钮回调
  */
 const EventScrollList = ({
   events,
+  displayEvents,
+  loadNextPage,
+  loadPrevPage,
+  onFourRowEventClick,
   selectedEvent,
   onEventSelect,
   borderColor,
@@ -46,8 +42,8 @@ const EventScrollList = ({
   totalPages,
   onPageChange,
   loading = false,
-  mode = 'carousel',
-  onModeChange,
+  error,
+  mode = 'vertical',
   hasMore = true,
   eventFollowStatus = {},
   onToggleFollow
@@ -59,19 +55,11 @@ const EventScrollList = ({
   const timelineBorderColor = useColorModeValue('gray.400', 'gray.500');
   const timelineTextColor = useColorModeValue('blue.600', 'blue.400');
 
-  // 翻页按钮颜色
-  const arrowBtnBg = useColorModeValue('rgba(255, 255, 255, 0.9)', 'rgba(0, 0, 0, 0.6)');
-  const arrowBtnHoverBg = useColorModeValue('rgba(255, 255, 255, 1)', 'rgba(0, 0, 0, 0.8)');
-
   // 滚动条颜色
   const scrollbarTrackBg = useColorModeValue('#f1f1f1', '#2D3748');
   const scrollbarThumbBg = useColorModeValue('#888', '#4A5568');
   const scrollbarThumbHoverBg = useColorModeValue('#555', '#718096');
 
-  // 加载遮罩颜色
-  const loadingOverlayBg = useColorModeValue('whiteAlpha.800', 'blackAlpha.700');
-  const loadingTextColor = useColorModeValue('gray.600', 'gray.300');
-
   const getTimelineBoxStyle = () => {
     return {
       bg: timelineBg,
@@ -82,215 +70,75 @@ const EventScrollList = ({
     };
   };
 
+  // 重试函数
+  const handleRetry = useCallback(() => {
+    if (onPageChange) {
+      onPageChange(currentPage);
+    }
+  }, [onPageChange, currentPage]);
+
+  {/* 事件卡片容器 */}
   return (
-    <Box>
-      {/* 顶部控制栏：模式切换按钮（左）+ 分页控制器 + 加载提示（右） */}
-      <Flex justify="space-between" align="center" mb={2}>
-        {/* 模式切换按钮 */}
-        <ButtonGroup size="sm" isAttached>
-          <Button
-            onClick={() => onModeChange('carousel')}
-            colorScheme="blue"
-            variant={mode === 'carousel' ? 'solid' : 'outline'}
-          >
-            单排
-          </Button>
-          <Button
-            onClick={() => onModeChange('grid')}
-            colorScheme="blue"
-            variant={mode === 'grid' ? 'solid' : 'outline'}
-          >
-            双排
-          </Button>
-        </ButtonGroup>
+    <Box
+      ref={scrollContainerRef}
+      overflowX="hidden"
+      h="100%"
+      pt={0}
+      pb={4}
+      px={mode === 'four-row' ? 0 : 2}
+      position="relative"
+      data-scroll-container="true"
+      css={{
+        // 统一滚动条样式（支持横向和纵向）
+        '&::-webkit-scrollbar': {
+          width: '1px',
+          height: '1px',
+        },
+        '&::-webkit-scrollbar-track': {
+          background: scrollbarTrackBg,
+          borderRadius: '10px',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          background: scrollbarThumbBg,
+          borderRadius: '10px',
+        },
+        '&::-webkit-scrollbar-thumb:hover': {
+          background: scrollbarThumbHoverBg,
+        },
+        scrollBehavior: 'smooth',
+        WebkitOverflowScrolling: 'touch',
+      }}
+    >
+      {/* 平铺网格模式 - 使用虚拟滚动 + 双向无限滚动 */}
+      <VirtualizedFourRowGrid
+        display={mode === 'four-row' ? 'block' : 'none'}
+        columnsPerRow={4}                // 每行显示4列
+        events={displayEvents || events}  // 使用累积列表（如果有）
+        selectedEvent={selectedEvent}
+        onEventSelect={onFourRowEventClick}  // 四排模式点击打开弹窗
+        eventFollowStatus={eventFollowStatus}
+        onToggleFollow={onToggleFollow}
+        getTimelineBoxStyle={getTimelineBoxStyle}
+        borderColor={borderColor}
+        loadNextPage={loadNextPage}      // 加载下一页
+        loadPrevPage={loadPrevPage}      // 加载上一页（双向滚动）
+        hasMore={hasMore}                // 是否还有更多数据
+        loading={loading}                // 加载状态
+        error={error}                    // 错误状态
+        onRetry={handleRetry}            // 重试回调
+      />
 
-        {/* 分页控制器 */}
-        {totalPages > 1 && (
-            <PaginationControl
-              currentPage={currentPage}
-              totalPages={totalPages}
-              onPageChange={onPageChange}
-            />
-        )}
-      </Flex>
-
-      {/* 横向滚动区域 */}
-      <Box position="relative">
-
-        {/* 左侧翻页按钮 - 上一页 */}
-      {currentPage > 1 && (
-        <IconButton
-          icon={<ChevronLeftIcon boxSize={6} color="blue.500" />}
-          position="absolute"
-          left="0"
-          top="50%"
-          transform="translateY(-50%)"
-          zIndex={2}
-          onClick={() => onPageChange(currentPage - 1)}
-          variant="ghost"
-          size="md"
-          w="40px"
-          h="40px"
-          minW="40px"
-          borderRadius="full"
-          bg={arrowBtnBg}
-          boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)"
-          _hover={{
-            bg: arrowBtnHoverBg,
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
-            transform: 'translateY(-50%) scale(1.05)'
-          }}
-          aria-label="上一页"
-          title="上一页"
-        />
-      )}
-
-      {/* 右侧翻页按钮 - 下一页 */}
-      {currentPage < totalPages && hasMore && (
-        <IconButton
-          icon={<ChevronRightIcon boxSize={6} color="blue.500" />}
-          position="absolute"
-          right="0"
-          top="50%"
-          transform="translateY(-50%)"
-          zIndex={2}
-          onClick={() => onPageChange(currentPage + 1)}
-          variant="ghost"
-          size="md"
-          w="40px"
-          h="40px"
-          minW="40px"
-          borderRadius="full"
-          bg={arrowBtnBg}
-          boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)"
-          _hover={{
-            bg: arrowBtnHoverBg,
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
-            transform: 'translateY(-50%) scale(1.05)'
-          }}
-          isDisabled={currentPage >= totalPages && !hasMore}
-          aria-label="下一页"
-          title="下一页"
-        />
-      )}
-
-      {/* 事件卡片容器 */}
-      <Box
-        ref={scrollContainerRef}
-        overflowX={mode === 'carousel' ? 'auto' : 'hidden'}
-        overflowY="hidden"
-        pt={0}
-        pb={4}
-        px={2}
-        position="relative"
-        css={mode === 'carousel' ? {
-          '&::-webkit-scrollbar': {
-            height: '8px',
-          },
-          '&::-webkit-scrollbar-track': {
-            background: scrollbarTrackBg,
-            borderRadius: '10px',
-          },
-          '&::-webkit-scrollbar-thumb': {
-            background: scrollbarThumbBg,
-            borderRadius: '10px',
-          },
-          '&::-webkit-scrollbar-thumb:hover': {
-            background: scrollbarThumbHoverBg,
-          },
-          scrollBehavior: 'smooth',
-          WebkitOverflowScrolling: 'touch',
-        } : {}}
-      >
-        {/* 加载遮罩 */}
-        {loading && (
-          <Center
-            position="absolute"
-            top={0}
-            left={0}
-            right={0}
-            bottom={0}
-            bg={loadingOverlayBg}
-            backdropFilter="blur(2px)"
-            zIndex={10}
-            borderRadius="md"
-          >
-            <VStack>
-              <Spinner size="lg" color="blue.500" thickness="3px" />
-              <Text fontSize="sm" color={loadingTextColor}>
-                加载中...
-              </Text>
-            </VStack>
-          </Center>
-        )}
-
-        {/* 模式1: 单排轮播模式 */}
-        {mode === 'carousel' && (
-          <Flex gap={4}>
-            {events.map((event, index) => (
-              <Box
-                key={event.id}
-                minW="calc((100% - 64px) / 5)"
-                maxW="calc((100% - 64px) / 5)"
-                flexShrink={0}
-              >
-                <DynamicNewsEventCard
-                  event={event}
-                  index={index}
-                  isFollowing={eventFollowStatus[event.id]?.isFollowing || false}
-                  followerCount={eventFollowStatus[event.id]?.followerCount || event.follower_count || 0}
-                  isSelected={selectedEvent?.id === event.id}
-                  onEventClick={(clickedEvent) => {
-                    onEventSelect(clickedEvent);
-                  }}
-                  onTitleClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onEventSelect(event);
-                  }}
-                  onToggleFollow={() => onToggleFollow?.(event.id)}
-                  timelineStyle={getTimelineBoxStyle()}
-                  borderColor={borderColor}
-                />
-              </Box>
-            ))}
-          </Flex>
-        )}
-
-        {/* 模式2: 双排网格模式 */}
-        {mode === 'grid' && (
-          <Grid
-            templateRows="repeat(2, 1fr)"
-            templateColumns="repeat(5, 1fr)"
-            gap={4}
-            autoFlow="column"
-          >
-            {events.map((event, index) => (
-              <Box key={event.id}>
-                <DynamicNewsEventCard
-                  event={event}
-                  index={index}
-                  isFollowing={eventFollowStatus[event.id]?.isFollowing || false}
-                  followerCount={eventFollowStatus[event.id]?.followerCount || event.follower_count || 0}
-                  isSelected={selectedEvent?.id === event.id}
-                  onEventClick={(clickedEvent) => {
-                    onEventSelect(clickedEvent);
-                  }}
-                  onTitleClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onEventSelect(event);
-                  }}
-                  onToggleFollow={() => onToggleFollow?.(event.id)}
-                  timelineStyle={getTimelineBoxStyle()}
-                  borderColor={borderColor}
-                />
-              </Box>
-            ))}
-          </Grid>
-        )}
-      </Box>
-      </Box>
+      {/* 纵向分栏模式 */}
+      <VerticalModeLayout
+        display={mode === 'vertical' ? 'flex' : 'none'}
+        events={events}
+        selectedEvent={selectedEvent}
+        onEventSelect={onEventSelect}
+        eventFollowStatus={eventFollowStatus}
+        onToggleFollow={onToggleFollow}
+        getTimelineBoxStyle={getTimelineBoxStyle}
+        borderColor={borderColor}
+      />
     </Box>
   );
 };

src/views/Community/components/DynamicNewsCard/ModeToggleButtons.js

@@ -0,0 +1,33 @@
+// src/views/Community/components/DynamicNewsCard/ModeToggleButtons.js
+// 事件列表模式切换按钮组
+
+import React from 'react';
+import { Button, ButtonGroup } from '@chakra-ui/react';
+
+/**
+ * 事件列表模式切换按钮组
+ * @param {string} mode - 当前模式 'vertical' | 'four-row'
+ * @param {Function} onModeChange - 模式切换回调
+ */
+const ModeToggleButtons = ({ mode, onModeChange }) => {
+  return (
+    <ButtonGroup size="sm" isAttached>
+      <Button
+        onClick={() => onModeChange('vertical')}
+        colorScheme="blue"
+        variant={mode === 'vertical' ? 'solid' : 'outline'}
+      >
+        纵向
+      </Button>
+      <Button
+        onClick={() => onModeChange('four-row')}
+        colorScheme="blue"
+        variant={mode === 'four-row' ? 'solid' : 'outline'}
+      >
+        平铺
+      </Button>
+    </ButtonGroup>
+  );
+};
+
+export default ModeToggleButtons;

src/views/Community/components/DynamicNewsCard/PageNavigationButton.js

@@ -0,0 +1,83 @@
+// src/views/Community/components/DynamicNewsCard/PageNavigationButton.js
+// 翻页导航按钮组件
+
+import React from 'react';
+import { IconButton, useColorModeValue } from '@chakra-ui/react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
+
+/**
+ * 翻页导航按钮组件
+ * @param {Object} props
+ * @param {'prev'|'next'} props.direction - 按钮方向（prev=上一页，next=下一页）
+ * @param {number} props.currentPage - 当前页码
+ * @param {number} props.totalPages - 总页数
+ * @param {Function} props.onPageChange - 翻页回调
+ * @param {string} props.mode - 显示模式（只在carousel/grid模式下显示）
+ */
+const PageNavigationButton = ({
+  direction,
+  currentPage,
+  totalPages,
+  onPageChange,
+  mode
+}) => {
+  // 主题适配
+  const arrowBtnBg = useColorModeValue('rgba(255, 255, 255, 0.9)', 'rgba(0, 0, 0, 0.6)');
+  const arrowBtnHoverBg = useColorModeValue('rgba(255, 255, 255, 1)', 'rgba(0, 0, 0, 0.8)');
+
+  // 根据方向计算配置
+  const isPrev = direction === 'prev';
+  const isNext = direction === 'next';
+
+  const Icon = isPrev ? ChevronLeftIcon : ChevronRightIcon;
+  const position = isPrev ? 'left' : 'right';
+  const label = isPrev ? '上一页' : '下一页';
+  const targetPage = isPrev ? currentPage - 1 : currentPage + 1;
+  const shouldShow = isPrev
+    ? currentPage > 1
+    : currentPage < totalPages;
+  const isDisabled = isNext ? currentPage >= totalPages : false;
+
+  // 判断是否显示（只在单排/双排模式显示）
+  const shouldRender = shouldShow && (mode === 'carousel' || mode === 'grid');
+
+  if (!shouldRender) return null;
+
+  const handleClick = () => {
+    console.log(
+      `%c🔵 [翻页] 点击${label}: 当前页${currentPage} → 目标页${targetPage} (共${totalPages}页)`,
+      'color: #3B82F6; font-weight: bold;'
+    );
+    onPageChange(targetPage);
+  };
+
+  return (
+    <IconButton
+      icon={<Icon boxSize={6} color="blue.500" />}
+      position="absolute"
+      {...{ [position]: 0 }}
+      top="50%"
+      transform="translateY(-50%)"
+      zIndex={2}
+      onClick={handleClick}
+      variant="ghost"
+      size="md"
+      w="40px"
+      h="40px"
+      minW="40px"
+      borderRadius="full"
+      bg={arrowBtnBg}
+      boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)"
+      _hover={{
+        bg: arrowBtnHoverBg,
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
+        transform: 'translateY(-50%) scale(1.05)'
+      }}
+      isDisabled={isDisabled}
+      aria-label={label}
+      title={label}
+    />
+  );
+};
+
+export default PageNavigationButton;

src/views/Community/components/DynamicNewsCard/PaginationControl.js

@@ -18,12 +18,12 @@ import {
 } from '@chakra-ui/icons';
 
 /**
- * 分页控制器组件
+ * 分页控制器组件（使用 React.memo 优化，避免不必要的重新渲染）
  * @param {number} currentPage - 当前页码
  * @param {number} totalPages - 总页数
  * @param {Function} onPageChange - 页码改变回调
  */
-const PaginationControl = ({ currentPage, totalPages, onPageChange }) => {
+const PaginationControl = React.memo(({ currentPage, totalPages, onPageChange }) => {
   const [jumpPage, setJumpPage] = useState('');
   const toast = useToast();
 
@@ -206,6 +206,10 @@ const PaginationControl = ({ currentPage, totalPages, onPageChange }) => {
       </HStack>
     </Box>
   );
-};
+}, (prevProps, nextProps) => {
+  // 自定义比较函数：只有当 currentPage 或 totalPages 变化时才重新渲染
+  return prevProps.currentPage === nextProps.currentPage &&
+         prevProps.totalPages === nextProps.totalPages;
+});
 
 export default PaginationControl;

src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js

@@ -0,0 +1,171 @@
+// src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
+// 纵向分栏模式布局组件
+
+import React, { useState, useEffect } from 'react';
+import { Box, IconButton, Tooltip, VStack, Flex, Center, Text } from '@chakra-ui/react';
+import { ViewIcon, ViewOffIcon, InfoIcon } from '@chakra-ui/icons';
+import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
+import EventDetailScrollPanel from './EventDetailScrollPanel';
+
+/**
+ * 纵向分栏模式布局
+ * 支持两种展示模式：
+ * - detail（默认）：左侧事件列表 1fr | 右侧详情 2fr
+ * - list：左侧事件列表 7fr | 右侧详情 300px
+ *
+ * @param {string} display - CSS display 属性（用于显示/隐藏组件）
+ * @param {Array} events - 当前页的事件列表（分页数据）
+ * @param {Object} selectedEvent - 当前选中的事件
+ * @param {Function} onEventSelect - 事件选择回调
+ * @param {Object} eventFollowStatus - 事件关注状态
+ * @param {Function} onToggleFollow - 关注按钮回调
+ * @param {Function} getTimelineBoxStyle - 时间线样式获取函数
+ * @param {string} borderColor - 边框颜色
+ */
+const VerticalModeLayout = ({
+  display = 'flex',
+  events,
+  selectedEvent,
+  onEventSelect,
+  eventFollowStatus,
+  onToggleFollow,
+  getTimelineBoxStyle,
+  borderColor,
+}) => {
+  // 布局模式状态：'detail' = 聚焦详情（默认），'list' = 聚焦列表
+  const [layoutMode, setLayoutMode] = useState('list');
+
+  // 详情面板重置 key（切换到 list 模式时改变，强制重新渲染）
+  const [detailPanelKey, setDetailPanelKey] = useState(0);
+
+  // 监听事件选择 - 自动切换到详情模式
+  useEffect(() => {
+    if (selectedEvent) {
+      setLayoutMode('detail');
+    }
+  }, [selectedEvent]);
+
+  // 切换布局模式
+  const toggleLayoutMode = () => {
+    const newMode = layoutMode === 'detail' ? 'list' : 'detail';
+    setLayoutMode(newMode);
+
+    // 如果切换到 list 模式，重置详情面板（收起所有 CollapsibleSection）
+    if (newMode === 'list') {
+      setDetailPanelKey(prev => prev + 1);  // 改变 key，强制重新渲染
+    }
+  };
+
+  // 根据模式计算 flex 比例
+  const leftFlex = layoutMode === 'detail' ? '4' : '6';
+  const rightFlex = layoutMode === 'detail' ? '6' : '4';
+
+  return (
+    <Flex
+      display={display}
+      gap={6}
+      position="relative"
+      transition="all 0.3s ease-in-out"
+      h="100%"
+      overflow="hidden"
+    >
+      {/* 左侧：事件列表 - 独立滚动 */}
+      <Box
+        flex={leftFlex}
+        minWidth={0}
+        overflowY="auto"
+        h="100%"
+        data-scroll-container="true"
+        css={{
+          overscrollBehavior: 'contain',
+          '&::-webkit-scrollbar': {
+            width: '6px',
+          },
+          '&::-webkit-scrollbar-track': {
+            background: '#f1f1f1',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            background: '#888',
+            borderRadius: '3px',
+          },
+          '&::-webkit-scrollbar-thumb:hover': {
+            background: '#555',
+          },
+        }}
+      >
+        {/* 事件列表 */}
+        {events && events.length > 0 ? (
+          <VStack
+            spacing={2}
+            align="stretch"
+            p={2}
+          >
+              {events.map((event) => (
+                <HorizontalDynamicNewsEventCard
+                  key={event.id}
+                  event={event}
+                  isSelected={selectedEvent?.id === event.id}
+                  onEventClick={() => onEventSelect(event)}
+                  isFollowing={eventFollowStatus[event.id]?.isFollowing}
+                  followerCount={eventFollowStatus[event.id]?.followerCount}
+                  onToggleFollow={onToggleFollow}
+                  timelineStyle={getTimelineBoxStyle()}
+                  borderColor={borderColor}
+                  indicatorSize={layoutMode === 'detail' ? 'default' : 'comfortable'}
+                />
+              ))}
+          </VStack>
+        ) : (
+          /* 空状态 */
+          <Center h="100%" minH="400px">
+            <VStack spacing={4}>
+              <InfoIcon w={12} h={12} color="gray.400" />
+              <Text fontSize="lg" color="gray.500" textAlign="center">
+                当前筛选条件下暂无数据
+              </Text>
+              <Text fontSize="sm" color="gray.400" textAlign="center">
+                请尝试调整筛选条件
+              </Text>
+            </VStack>
+          </Center>
+        )}
+      </Box>
+
+      {/* 右侧：事件详情 - 独立滚动 */}
+      <Box
+        flex={rightFlex}
+        minHeight={0}
+        position="relative"
+        overflow="hidden"
+        h="100%"
+      >
+        {/* 布局切换按钮 */}
+        <Tooltip
+          label={layoutMode === 'detail' ? '展开事件列表' : '展开详情面板'}
+          placement="left"
+        >
+          <IconButton
+            position="absolute"
+            top={2}
+            right={2}
+            zIndex={9999}
+            size="md"
+            icon={layoutMode === 'detail' ? <ViewOffIcon /> : <ViewIcon />}
+            onClick={toggleLayoutMode}
+            aria-label="切换布局模式"
+            colorScheme="blue"
+            variant="solid"
+          />
+        </Tooltip>
+
+        {/* 详情面板 */}
+        <EventDetailScrollPanel
+          key={detailPanelKey}
+          selectedEvent={selectedEvent}
+        />
+      </Box>
+    </Flex>
+  );
+};
+
+export default VerticalModeLayout;

src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js

@@ -0,0 +1,353 @@
+// src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js
+// 虚拟化网格组件（支持多列布局 + 纵向滚动 + 无限滚动）
+
+import React, { useRef, useMemo, useEffect } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Box, Grid, Spinner, Text, VStack, Center, HStack, IconButton } from '@chakra-ui/react';
+import { RepeatIcon } from '@chakra-ui/icons';
+import { useColorModeValue } from '@chakra-ui/react';
+import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
+
+/**
+ * 虚拟化网格组件（支持多列布局 + 无限滚动）
+ * @param {Object} props
+ * @param {string} props.display - CSS display 属性（用于显示/隐藏组件）
+ * @param {Array} props.events - 事件列表（累积显示）
+ * @param {number} props.columnsPerRow - 每行列数（默认 4，单列模式传 1）
+ * @param {React.Component} props.CardComponent - 卡片组件（默认 DynamicNewsEventCard）
+ * @param {Object} props.selectedEvent - 当前选中的事件
+ * @param {Function} props.onEventSelect - 事件选择回调
+ * @param {Object} props.eventFollowStatus - 事件关注状态
+ * @param {Function} props.onToggleFollow - 关注切换回调
+ * @param {Function} props.getTimelineBoxStyle - 时间轴样式获取函数
+ * @param {string} props.borderColor - 边框颜色
+ * @param {Function} props.loadNextPage - 加载下一页（无限滚动）
+ * @param {boolean} props.hasMore - 是否还有更多数据
+ * @param {boolean} props.loading - 加载状态
+ */
+const VirtualizedFourRowGrid = ({
+  display = 'block',
+  events,
+  columnsPerRow = 4,
+  CardComponent = DynamicNewsEventCard,
+  selectedEvent,
+  onEventSelect,
+  eventFollowStatus,
+  onToggleFollow,
+  getTimelineBoxStyle,
+  borderColor,
+  loadNextPage,
+  onRefreshFirstPage,  // 修改：顶部刷新回调（替代 loadPrevPage）
+  hasMore,
+  loading,
+  error,         // 新增：错误状态
+  onRetry,       // 新增：重试回调
+}) => {
+  const parentRef = useRef(null);
+  const isLoadingMore = useRef(false);  // 防止重复加载
+  const lastRefreshTime = useRef(0);    // 记录上次刷新时间（用于30秒防抖）
+
+  // 滚动条颜色（主题适配）
+  const scrollbarTrackBg = useColorModeValue('#f1f1f1', '#2D3748');
+  const scrollbarThumbBg = useColorModeValue('#888', '#4A5568');
+  const scrollbarThumbHoverBg = useColorModeValue('#555', '#718096');
+
+  // 将事件按 columnsPerRow 个一组分成行
+  const rows = useMemo(() => {
+    const r = [];
+    for (let i = 0; i < events.length; i += columnsPerRow) {
+      r.push(events.slice(i, i + columnsPerRow));
+    }
+    return r;
+  }, [events, columnsPerRow]);
+
+  // 配置虚拟滚动器（纵向滚动 + 动态高度测量）
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 250, // 提供初始估算值，库会自动测量实际高度
+    overscan: 2,             // 预加载2行（上下各1行）
+  });
+
+  /**
+   * 【核心逻辑1】无限滚动 + 顶部刷新 - 监听滚动事件，根据滚动位置自动加载数据或刷新
+   *
+   * 工作原理：
+   * 1. 向下滚动到 60% 位置时，触发 loadNextPage()
+   *    - 调用 usePagination.loadNextPage()
+   *    - 内部执行 handlePageChange(currentPage + 1)
+   *    - dispatch(fetchDynamicNews({ page: nextPage }))
+   *    - 后端返回下一页数据（30条）
+   *    - Redux 去重后追加到 fourRowEvents 数组
+   *    - events prop 更新，虚拟滚动自动渲染新内容
+   *
+   * 2. 向上滚动到顶部 10% 以内时，触发 onRefreshFirstPage()
+   *    - 清空缓存 + 重新加载第一页（获取最新数据）
+   *    - 30秒防抖：避免频繁刷新
+   *    - 与5分钟定时刷新协同工作
+   *
+   * 设计要点：
+   * - 60% 触发点：提前加载，避免滚动到底部时才出现加载状态
+   * - 防抖机制：isLoadingMore.current 防止重复触发
+   * - 两层缓存：
+   *   - Redux 缓存（HTTP层）：fourRowEvents 数组存储已加载数据，避免重复请求
+   *   - 虚拟滚动缓存（渲染层）：@tanstack/react-virtual 只渲染可见行，复用 DOM 节点
+   */
+  useEffect(() => {
+    // 如果组件被隐藏，不执行滚动监听
+    if (display === 'none') return;
+
+    const scrollElement = parentRef.current;
+    if (!scrollElement) return;
+
+    const handleScroll = async () => {
+      // 防止重复触发
+      if (isLoadingMore.current || loading) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = scrollElement;
+      const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
+
+      // 向下滚动：滚动到 60% 时开始加载下一页
+      if (loadNextPage && hasMore && scrollPercentage > 0.6) {
+        console.log('%c📜 [无限滚动] 到达底部，加载下一页', 'color: #8B5CF6; font-weight: bold;');
+        isLoadingMore.current = true;
+        await loadNextPage();
+        isLoadingMore.current = false;
+      }
+
+      // 向上滚动到顶部：触发刷新（30秒防抖）
+      if (onRefreshFirstPage && scrollTop < clientHeight * 0.1) {
+        const now = Date.now();
+        const timeSinceLastRefresh = now - lastRefreshTime.current;
+
+        // 30秒防抖：避免频繁刷新
+        if (timeSinceLastRefresh >= 30000) {
+          console.log('%c🔄 [顶部刷新] 滚动到顶部，清空缓存并重新加载第一页', 'color: #10B981; font-weight: bold;', {
+            timeSinceLastRefresh: `${(timeSinceLastRefresh / 1000).toFixed(1)}秒`
+          });
+          isLoadingMore.current = true;
+          lastRefreshTime.current = now;
+
+          await onRefreshFirstPage();
+          isLoadingMore.current = false;
+        } else {
+          const remainingTime = Math.ceil((30000 - timeSinceLastRefresh) / 1000);
+          console.log('%c🔄 [顶部刷新] 防抖中，请等待', 'color: #EAB308; font-weight: bold;', {
+            remainingTime: `${remainingTime}秒`
+          });
+        }
+      }
+    };
+
+    scrollElement.addEventListener('scroll', handleScroll);
+    return () => scrollElement.removeEventListener('scroll', handleScroll);
+  }, [display, loadNextPage, onRefreshFirstPage, hasMore, loading]);
+
+  /**
+   * 【核心逻辑2】主动检测内容高度 - 确保内容始终填满容器
+   *
+   * 场景：
+   * - 初次加载时，如果 30 条数据不足以填满 800px 容器（例如显示器很大）
+   * - 用户无法滚动，也就无法触发上面的滚动监听逻辑
+   *
+   * 解决方案：
+   * - 定时检查 scrollHeight 是否小于等于 clientHeight
+   * - 如果内容不足，主动调用 loadNextPage() 加载更多数据
+   * - 递归触发，直到内容高度超过容器高度（出现滚动条）
+   *
+   * 优化：
+   * - 500ms 延迟：确保虚拟滚动已完成首次渲染和高度测量
+   * - 监听 events.length 变化：新数据加载后重新检查
+   */
+  useEffect(() => {
+    // 如果组件被隐藏，不执行高度检测
+    if (display === 'none') return;
+
+    const scrollElement = parentRef.current;
+    if (!scrollElement || !loadNextPage) return;
+
+    // 延迟检查，确保虚拟滚动已渲染
+    const timer = setTimeout(() => {
+      // 防止重复触发
+      if (isLoadingMore.current || !hasMore || loading) return;
+
+      const { scrollHeight, clientHeight } = scrollElement;
+
+      // 如果内容高度不足以填满容器（没有滚动条），主动加载下一页
+      if (scrollHeight <= clientHeight) {
+        console.log('%c📜 [无限滚动] 内容不足以填满容器，主动加载下一页', 'color: #8B5CF6; font-weight: bold;', {
+          scrollHeight,
+          clientHeight,
+          eventsCount: events.length
+        });
+        isLoadingMore.current = true;
+        loadNextPage().finally(() => {
+          isLoadingMore.current = false;
+        });
+      }
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [display, events.length, hasMore, loading, loadNextPage]);
+
+  // 错误指示器（同行显示）
+  const renderErrorIndicator = () => {
+    if (!error) return null;
+
+    return (
+      <Center py={6}>
+        <HStack spacing={2}>
+          <Text color="gray.500" fontSize="sm">
+            数据加载失败，
+          </Text>
+          <IconButton
+            icon={<RepeatIcon />}
+            size="sm"
+            colorScheme="blue"
+            variant="ghost"
+            onClick={onRetry}
+            aria-label="刷新"
+          />
+          <Text
+            color="blue.500"
+            fontSize="sm"
+            fontWeight="medium"
+            cursor="pointer"
+            onClick={onRetry}
+            _hover={{ textDecoration: 'underline' }}
+          >
+            刷新
+          </Text>
+        </HStack>
+      </Center>
+    );
+  };
+
+  // 底部加载指示器
+  const renderLoadingIndicator = () => {
+    if (!hasMore) {
+      return (
+        <Center py={6}>
+          <Text color="gray.500" fontSize="sm">
+            已加载全部内容
+          </Text>
+        </Center>
+      );
+    }
+    if (loading) {
+      return (
+        <Center py={6}>
+          <VStack spacing={2}>
+            <Spinner size="md" color="blue.500" thickness="3px" />
+            <Text color="gray.500" fontSize="sm">
+              加载中...
+            </Text>
+          </VStack>
+        </Center>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <Box
+      ref={parentRef}
+      display={display}
+      overflowY="auto"
+      overflowX="hidden"
+      minH="800px"
+      maxH="800px"
+      w="100%"
+      position="relative"
+      css={{
+        // 滚动条样式
+        '&::-webkit-scrollbar': {
+          width: '4px',
+        },
+        '&::-webkit-scrollbar-track': {
+          background: scrollbarTrackBg,
+          borderRadius: '10px',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          background: scrollbarThumbBg,
+          borderRadius: '10px',
+        },
+        '&::-webkit-scrollbar-thumb:hover': {
+          background: scrollbarThumbHoverBg,
+        },
+        scrollBehavior: 'smooth',
+        WebkitOverflowScrolling: 'touch',
+      }}
+    >
+      {/* 虚拟滚动容器 + 底部加载指示器 */}
+      <Box position="relative" w="100%">
+        {/* 虚拟滚动内容 */}
+        <Box
+          position="relative"
+          w="100%"
+          h={`${rowVirtualizer.getTotalSize()}px`}
+        >
+          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+            const rowEvents = rows[virtualRow.index];
+
+            return (
+              <Box
+                key={virtualRow.key}
+                data-index={virtualRow.index}
+                ref={rowVirtualizer.measureElement}
+                position="absolute"
+                top={0}
+                left={0}
+                w="100%"
+                transform={`translateY(${virtualRow.start}px)`}
+              >
+                {/* 使用 Grid 横向排列卡片（列数由 columnsPerRow 决定） */}
+                <Grid
+                  templateColumns={`repeat(${columnsPerRow}, 1fr)`}
+                  gap={columnsPerRow === 1 ? 3 : 4}
+                  w="100%"
+                >
+                  {rowEvents.map((event, colIndex) => (
+                    <Box key={event.id} w="100%" minW={0}>
+                      <CardComponent
+                        event={event}
+                        index={virtualRow.index * columnsPerRow + colIndex}
+                        isFollowing={eventFollowStatus[event.id]?.isFollowing || false}
+                        followerCount={eventFollowStatus[event.id]?.followerCount || event.follower_count || 0}
+                        isSelected={selectedEvent?.id === event.id}
+                        onEventClick={(clickedEvent) => {
+                          onEventSelect(clickedEvent);
+                        }}
+                        onTitleClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          onEventSelect(event);
+                        }}
+                        onToggleFollow={() => onToggleFollow?.(event.id)}
+                        timelineStyle={getTimelineBoxStyle?.()}
+                        borderColor={borderColor}
+                      />
+                    </Box>
+                  ))}
+                </Grid>
+              </Box>
+            );
+          })}
+        </Box>
+
+        {/* 底部加载指示器 - 绝对定位在虚拟内容底部 */}
+        <Box
+          position="absolute"
+          top={`${rowVirtualizer.getTotalSize()}px`}
+          left={0}
+          right={0}
+          w="100%"
+        >
+          {error ? renderErrorIndicator() : renderLoadingIndicator()}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default VirtualizedFourRowGrid;

src/views/Community/components/DynamicNewsCard/constants.js

@@ -0,0 +1,40 @@
+// src/views/Community/components/DynamicNewsCard/constants.js
+// 动态新闻卡片组件 - 常量配置
+
+// ========== 分页配置常量 ==========
+/**
+ * 分页大小计算依据：
+ *
+ * 【四排模式 (FOUR_ROW_PAGE_SIZE)】
+ * - 容器高度: 800px (VirtualizedFourRowGrid)
+ * - 单行高度: ~250px (包含卡片 + 间距)
+ * - 每行显示: 4 列
+ * - 可视区域: 800px / 250px ≈ 3.2 行
+ * - overscan 缓冲: 2 行 (上下各预渲染1行)
+ * - 实际渲染区域: 3.2 + 2 = 5.2 行
+ * - 单次加载数据量: 7.5 行 × 4 列 = 30 个
+ * - 设计目标: 提供充足的缓冲数据，确保快速滚动时不出现空白
+ *
+ * 【纵向模式 (VERTICAL_PAGE_SIZE)】
+ * - 每页显示 10 条数据
+ * - 使用传统分页器，用户手动翻页
+ */
+export const PAGINATION_CONFIG = {
+  FOUR_ROW_PAGE_SIZE: 30,     // 平铺模式每页数量 (7.5行 × 4列，包含缓冲)
+  VERTICAL_PAGE_SIZE: 10,     // 纵向模式每页数量 (传统分页)
+  INITIAL_PAGE: 1,            // 初始页码
+};
+
+// ========== 显示模式常量 ==========
+export const DISPLAY_MODES = {
+  FOUR_ROW: 'four-row',      // 平铺网格模式
+  VERTICAL: 'vertical',      // 纵向分栏模式
+};
+
+export const DEFAULT_MODE = DISPLAY_MODES.VERTICAL;
+
+// ========== Toast 提示配置 ==========
+export const TOAST_CONFIG = {
+  DURATION_ERROR: 3000,       // 错误提示持续时间（毫秒）
+  DURATION_WARNING: 2000,     // 警告提示持续时间（毫秒）
+};

src/views/Community/components/DynamicNewsCard/hooks/useInfiniteScroll.js

@@ -0,0 +1,88 @@
+// src/views/Community/components/DynamicNewsCard/hooks/useInfiniteScroll.js
+// 无限滚动 Hook
+
+import { useEffect, useRef, useCallback } from 'react';
+
+/**
+ * 无限滚动 Hook
+ * 监听容器滚动事件，当滚动到底部附近时触发加载更多数据
+ *
+ * @param {Object} options - 配置选项
+ * @param {Function} options.onLoadMore - 加载更多回调函数（返回 Promise）
+ * @param {boolean} options.hasMore - 是否还有更多数据
+ * @param {boolean} options.isLoading - 是否正在加载
+ * @param {number} options.threshold - 触发阈值（距离底部多少像素时触发，默认200px）
+ * @returns {Object} { containerRef } - 容器引用
+ */
+export const useInfiniteScroll = ({
+  onLoadMore,
+  hasMore = true,
+  isLoading = false,
+  threshold = 200
+}) => {
+  const containerRef = useRef(null);
+  const isLoadingRef = useRef(false);
+
+  // 滚动处理函数
+  const handleScroll = useCallback(() => {
+    const container = containerRef.current;
+
+    // 检查条件：容器存在、未加载中、还有更多数据
+    if (!container || isLoadingRef.current || !hasMore) {
+      return;
+    }
+
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const distanceToBottom = scrollHeight - scrollTop - clientHeight;
+
+    // 距离底部小于阈值时触发加载
+    if (distanceToBottom < threshold) {
+      console.log(
+        '%c⬇️ [懒加载] 触发加载下一页',
+        'color: #8B5CF6; font-weight: bold;',
+        {
+          scrollTop,
+          scrollHeight,
+          clientHeight,
+          distanceToBottom,
+          threshold
+        }
+      );
+
+      isLoadingRef.current = true;
+
+      // 调用加载函数并更新状态
+      onLoadMore()
+        .then(() => {
+          console.log('%c✅ [懒加载] 加载完成', 'color: #10B981; font-weight: bold;');
+        })
+        .catch((error) => {
+          console.error('%c❌ [懒加载] 加载失败', 'color: #DC2626; font-weight: bold;', error);
+        })
+        .finally(() => {
+          isLoadingRef.current = false;
+        });
+    }
+  }, [onLoadMore, hasMore, threshold]);
+
+  // 绑定滚动事件
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    // 添加滚动监听
+    container.addEventListener('scroll', handleScroll, { passive: true });
+
+    // 清理函数
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll]);
+
+  // 更新 loading 状态的 ref
+  useEffect(() => {
+    isLoadingRef.current = isLoading;
+  }, [isLoading]);
+
+  return { containerRef };
+};

src/views/Community/components/DynamicNewsCard/hooks/usePagination.js

@@ -0,0 +1,304 @@
+// src/views/Community/components/DynamicNewsCard/hooks/usePagination.js
+// 分页逻辑自定义 Hook
+
+import { useState, useMemo, useCallback, useRef } from 'react';
+import { fetchDynamicNews, updatePaginationPage } from '../../../../../store/slices/communityDataSlice';
+import { logger } from '../../../../../utils/logger';
+import {
+  PAGINATION_CONFIG,
+  DISPLAY_MODES,
+  DEFAULT_MODE,
+  TOAST_CONFIG
+} from '../constants';
+
+/**
+ * 分页逻辑自定义 Hook
+ * @param {Object} options - Hook 配置选项
+ * @param {Object} options.allCachedEventsByPage - 纵向模式页码映射 { 1: [...], 2: [...] }
+ * @param {Array} options.allCachedEvents - 平铺模式数组 [...]
+ * @param {Object} options.pagination - 分页元数据 { total, total_pages, current_page, per_page, page }
+ * @param {number} options.total - 【废弃】服务端总数量（向后兼容，建议使用 pagination.total）
+ * @param {number} options.cachedCount - 已缓存数量
+ * @param {Function} options.dispatch - Redux dispatch 函数
+ * @param {Function} options.toast - Toast 通知函数
+ * @param {Object} options.filters - 筛选条件
+ * @param {string} options.initialMode - 初始显示模式（可选）
+ * @returns {Object} 分页状态和方法
+ */
+export const usePagination = ({
+  allCachedEventsByPage,  // 纵向模式：页码映射
+  allCachedEvents,         // 平铺模式：数组
+  pagination,              // 分页元数据对象
+  total,                   // 向后兼容
+  cachedCount,
+  dispatch,
+  toast,
+  filters = {},
+  initialMode              // 初始显示模式
+}) => {
+  // 本地状态
+  const [loadingPage, setLoadingPage] = useState(null);
+  const [mode, setMode] = useState(initialMode || DEFAULT_MODE);
+
+  // 【核心改动】从 Redux pagination 派生 currentPage，不再使用本地状态
+  const currentPage = pagination?.current_page || PAGINATION_CONFIG.INITIAL_PAGE;
+
+  // 使用 ref 存储最新的 filters，避免 useCallback 闭包问题
+  // 当 filters 对象引用不变但内容改变时，闭包中的 filters 是旧值
+  const filtersRef = useRef(filters);
+  filtersRef.current = filters;
+
+  // 根据模式决定每页显示数量
+  const pageSize = (() => {
+    switch (mode) {
+      case DISPLAY_MODES.FOUR_ROW:
+        return PAGINATION_CONFIG.FOUR_ROW_PAGE_SIZE;
+      case DISPLAY_MODES.VERTICAL:
+        return PAGINATION_CONFIG.VERTICAL_PAGE_SIZE;
+      default:
+        return PAGINATION_CONFIG.VERTICAL_PAGE_SIZE;
+    }
+  })();
+
+  // 【优化】优先使用后端返回的 total_pages，避免前端重复计算
+  // 向后兼容：如果没有 pagination 对象，则使用 total 计算
+  const totalPages = pagination?.total_pages || Math.ceil((pagination?.total || total || 0) / pageSize) || 1;
+
+  // 检查是否还有更多数据（使用页码判断，不受去重影响）
+  const hasMore = currentPage < totalPages;
+
+  // 从页码映射或数组获取当前页数据
+  const currentPageEvents = useMemo(() => {
+    if (mode === DISPLAY_MODES.VERTICAL) {
+      // 纵向模式：从页码映射获取当前页
+      return allCachedEventsByPage?.[currentPage] || [];
+    } else {
+      // 平铺模式：返回全部累积数据
+      return allCachedEvents || [];
+    }
+  }, [mode, allCachedEventsByPage, allCachedEvents, currentPage]);
+
+  // 当前显示的事件列表
+  const displayEvents = useMemo(() => {
+    if (mode === DISPLAY_MODES.FOUR_ROW) {
+      // 平铺模式：返回全部累积数据
+      return allCachedEvents || [];
+    } else {
+      // 纵向模式：返回当前页数据
+      return currentPageEvents;
+    }
+  }, [mode, allCachedEvents, currentPageEvents]);
+
+  /**
+   * 加载单个页面数据
+   * @param {number} targetPage - 目标页码
+   * @param {boolean} clearCache - 是否清空缓存（第1页专用）
+   * @returns {Promise<boolean>} 是否加载成功
+   */
+  const loadPage = useCallback(async (targetPage, clearCache = false) => {
+    // 显示 loading 状态
+    setLoadingPage(targetPage);
+
+    try {
+      console.log(`%c🟢 [API请求] 开始加载第${targetPage}页数据`, 'color: #16A34A; font-weight: bold;');
+      console.log(`%c   请求参数: page=${targetPage}, per_page=${pageSize}, mode=${mode}, clearCache=${clearCache}`, 'color: #16A34A;');
+      console.log(`%c   筛选条件:`, 'color: #16A34A;', filtersRef.current);
+
+      logger.debug('DynamicNewsCard', '开始加载页面数据', {
+        targetPage,
+        pageSize,
+        mode,
+        clearCache,
+        filters: filtersRef.current
+      });
+
+      // 🔍 调试：dispatch 前
+      console.log(`%c🔵 [dispatch] 准备调用 fetchDynamicNews`, 'color: #3B82F6; font-weight: bold;', {
+        mode,
+        page: targetPage,
+        per_page: pageSize,
+        pageSize,
+        clearCache,
+        filters: filtersRef.current
+      });
+
+      const result = await dispatch(fetchDynamicNews({
+        mode: mode,  // 传递 mode 参数
+        per_page: pageSize,
+        pageSize: pageSize,
+        clearCache: clearCache,  // 传递 clearCache 参数
+        ...filtersRef.current,  // 从 ref 读取最新筛选条件
+        page: targetPage,  // 然后覆盖 page 参数（避免被 filters.page 覆盖）
+      })).unwrap();
+
+      // 🔍 调试：dispatch 后
+      console.log(`%c🔵 [dispatch] fetchDynamicNews 返回结果`, 'color: #3B82F6; font-weight: bold;', result);
+      console.log(`%c🟢 [API请求] 第${targetPage}页加载完成`, 'color: #16A34A; font-weight: bold;');
+      logger.debug('DynamicNewsCard', `第 ${targetPage} 页加载完成`);
+
+      return true;
+    } catch (error) {
+      logger.error('DynamicNewsCard', 'loadPage', error, {
+        targetPage
+      });
+
+      toast({
+        title: '加载失败',
+        description: `无法加载第 ${targetPage} 页数据，请稍后重试`,
+        status: 'error',
+        duration: TOAST_CONFIG.DURATION_ERROR,
+        isClosable: true,
+        position: 'top'
+      });
+
+      return false;
+    } finally {
+      setLoadingPage(null);
+    }
+  }, [dispatch, pageSize, toast, mode]);  // 移除 filters 依赖，使用 filtersRef 读取最新值
+
+  // 翻页处理（第1页强制刷新 + 其他页缓存）
+  const handlePageChange = useCallback(async (newPage) => {
+    // 边界检查 1: 检查页码范围
+    if (newPage < 1 || newPage > totalPages) {
+      console.log(`%c⚠️ [翻页] 页码超出范围: ${newPage}`, 'color: #DC2626; font-weight: bold;');
+      logger.warn('usePagination', '页码超出范围', { newPage, totalPages });
+      return;
+    }
+
+    // 边界检查 2: 检查是否重复点击
+    if (newPage === currentPage) {
+      console.log(`%c⚠️ [翻页] 重复点击当前页: ${newPage}`, 'color: #EAB308; font-weight: bold;');
+      logger.debug('usePagination', '页码未改变', { newPage });
+      return;
+    }
+
+    // 边界检查 3: 防止竞态条件 - 只拦截相同页面的重复请求
+    if (loadingPage === newPage) {
+      console.log(`%c⚠️ [翻页] 第${newPage}页正在加载中，忽略重复请求`, 'color: #EAB308; font-weight: bold;');
+      logger.warn('usePagination', '竞态条件：相同页面正在加载', { loadingPage, newPage });
+      return;
+    }
+
+    // 如果正在加载其他页面，允许切换（会取消当前加载状态，开始新的加载）
+    if (loadingPage !== null && loadingPage !== newPage) {
+      console.log(`%c🔄 [翻页] 正在加载第${loadingPage}页，用户切换到第${newPage}页`, 'color: #8B5CF6; font-weight: bold;');
+      logger.info('usePagination', '用户切换页面，继续处理新请求', { loadingPage, newPage });
+      // 继续执行，loadPage 会覆盖 loadingPage 状态
+    }
+
+    console.log(`%c🔵 [翻页逻辑] handlePageChange 开始`, 'color: #3B82F6; font-weight: bold;');
+    console.log(`%c   当前页: ${currentPage}, 目标页: ${newPage}, 模式: ${mode}`, 'color: #3B82F6;');
+
+    // 【核心逻辑】第1页特殊处理：强制清空缓存并重新加载
+    if (newPage === 1) {
+      console.log(`%c🔄 [第1页] 清空缓存并重新加载`, 'color: #8B5CF6; font-weight: bold;');
+      logger.info('usePagination', '第1页：强制刷新', { mode });
+
+      // clearCache = true：API 会更新 Redux pagination.current_page
+      await loadPage(newPage, true);
+      return;
+    }
+
+    // 【其他页】检查缓存
+    if (mode === DISPLAY_MODES.VERTICAL) {
+      // 纵向模式：检查页码映射中是否有缓存
+      const isPageCached = allCachedEventsByPage?.[newPage]?.length > 0;
+
+      console.log(`%c🟡 [缓存检查] 第${newPage}页缓存状态`, 'color: #EAB308; font-weight: bold;');
+      console.log(`%c   是否已缓存: ${isPageCached ? '✅ 是' : '❌ 否'}`, `color: ${isPageCached ? '#16A34A' : '#DC2626'};`);
+
+      if (isPageCached) {
+        console.log(`%c✅ [缓存] 第${newPage}页已缓存，直接切换`, 'color: #16A34A; font-weight: bold;');
+        // 使用缓存数据，同步更新 Redux pagination.current_page
+        dispatch(updatePaginationPage({ mode, page: newPage }));
+      } else {
+        console.log(`%c❌ [缓存] 第${newPage}页未缓存，加载数据`, 'color: #DC2626; font-weight: bold;');
+        // clearCache = false：API 会更新 Redux pagination.current_page
+        await loadPage(newPage, false);
+      }
+    } else {
+      // 平铺模式：直接加载新页（追加模式，clearCache=false）
+      console.log(`%c🟡 [平铺模式] 加载第${newPage}页`, 'color: #EAB308; font-weight: bold;');
+      // clearCache = false：API 会更新 Redux pagination.current_page
+      await loadPage(newPage, false);
+    }
+  }, [mode, currentPage, totalPages, loadingPage, allCachedEventsByPage, loadPage]);
+
+
+  // 加载下一页（用于无限滚动）
+  const loadNextPage = useCallback(async () => {
+    // 使用 hasMore 判断（基于 currentPage < totalPages）
+    if (!hasMore || loadingPage !== null) {
+      logger.debug('DynamicNewsCard', '无法加载下一页', {
+        currentPage,
+        totalPages,
+        hasMore,
+        loadingPage,
+        reason: !hasMore ? '已加载全部数据 (currentPage >= totalPages)' : '正在加载中'
+      });
+      return Promise.resolve(false); // 没有更多数据或正在加载
+    }
+
+    const nextPage = currentPage + 1;
+    logger.debug('DynamicNewsCard', '懒加载：加载下一页', { currentPage, nextPage, hasMore, totalPages });
+
+    try {
+      await handlePageChange(nextPage);
+      return true;
+    } catch (error) {
+      logger.error('DynamicNewsCard', '懒加载失败', error, { nextPage });
+      return false;
+    }
+  }, [currentPage, totalPages, hasMore, loadingPage, handlePageChange]);
+
+  // 加载上一页（用于双向无限滚动）
+  const loadPrevPage = useCallback(async () => {
+    if (currentPage <= 1 || loadingPage !== null) {
+      logger.debug('DynamicNewsCard', '无法加载上一页', {
+        currentPage,
+        loadingPage,
+        reason: currentPage <= 1 ? '已是第一页' : '正在加载中'
+      });
+      return Promise.resolve(false); // 已经是第一页或正在加载
+    }
+
+    const prevPage = currentPage - 1;
+    logger.debug('DynamicNewsCard', '懒加载：加载上一页', { currentPage, prevPage });
+
+    try {
+      await handlePageChange(prevPage);
+      return true;
+    } catch (error) {
+      logger.error('DynamicNewsCard', '懒加载上一页失败', error, { prevPage });
+      return false;
+    }
+  }, [currentPage, loadingPage, handlePageChange]);
+
+  // 模式切换处理（简化版 - 模式切换时始终请求数据，因为两种模式使用独立存储）
+  const handleModeToggle = useCallback((newMode) => {
+    if (newMode === mode) return;
+
+    setMode(newMode);
+    // currentPage 由 Redux pagination.current_page 派生，会在下次请求时自动更新
+    // pageSize 会根据 mode 自动重新计算（第46-56行）
+  }, [mode]);
+
+  return {
+    // 状态
+    currentPage,
+    mode,
+    loadingPage,
+    pageSize,
+    totalPages,
+    hasMore,
+    currentPageEvents,
+    displayEvents,        // 当前显示的事件列表
+
+    // 方法
+    handlePageChange,
+    handleModeToggle,
+    loadNextPage,         // 加载下一页（用于无限滚动）
+    loadPrevPage          // 加载上一页（用于双向无限滚动）
+  };
+};

src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js

@@ -3,6 +3,7 @@
 
 import React from 'react';
 import {
+  Box,
   Flex,
   HStack,
   Heading,
@@ -19,8 +20,9 @@ import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
  * @param {boolean} props.isOpen - 是否展开
  * @param {Function} props.onToggle - 切换展开/收起的回调
  * @param {number} props.count - 可选的数量徽章
+ * @param {React.ReactNode} props.subscriptionBadge - 可选的会员标签组件
  */
-const CollapsibleHeader = ({ title, isOpen, onToggle, count = null }) => {
+const CollapsibleHeader = ({ title, isOpen, onToggle, count = null, subscriptionBadge = null }) => {
   const sectionBg = useColorModeValue('gray.50', 'gray.750');
   const hoverBg = useColorModeValue('gray.100', 'gray.700');
   const headingColor = useColorModeValue('gray.700', 'gray.200');
@@ -41,7 +43,12 @@ const CollapsibleHeader = ({ title, isOpen, onToggle, count = null }) => {
         <Heading size="sm" color={headingColor}>
           {title}
         </Heading>
-        {count !== null && (
+        {subscriptionBadge && (
+          <Box>
+            {subscriptionBadge}
+          </Box>
+        )}
+        {count !== null && count > 0 && (
           <Badge colorScheme="blue" borderRadius="full">
             {count}
           </Badge>

src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js

@@ -16,20 +16,47 @@ import CollapsibleHeader from './CollapsibleHeader';
  * @param {boolean} props.isOpen - 是否展开
  * @param {Function} props.onToggle - 切换展开/收起的回调
  * @param {number} props.count - 可选的数量徽章
+ * @param {React.ReactNode} props.subscriptionBadge - 可选的会员标签组件
+ * @param {boolean} props.isLocked - 是否锁定（不可展开）
+ * @param {Function} props.onLockedClick - 锁定时点击的回调
  * @param {React.ReactNode} props.children - 子内容
  */
-const CollapsibleSection = ({ title, isOpen, onToggle, count = null, children }) => {
+const CollapsibleSection = ({
+  title,
+  isOpen,
+  onToggle,
+  count = null,
+  subscriptionBadge = null,
+  isLocked = false,
+  onLockedClick = null,
+  children
+}) => {
   const sectionBg = useColorModeValue('gray.50', 'gray.750');
 
+  // 处理点击：如果锁定则触发锁定回调，否则触发正常切换
+  const handleToggle = () => {
+    if (isLocked && onLockedClick) {
+      onLockedClick();
+    } else if (!isLocked) {
+      onToggle();
+    }
+  };
+
   return (
     <Box>
       <CollapsibleHeader
         title={title}
         isOpen={isOpen}
-        onToggle={onToggle}
+        onToggle={handleToggle}
         count={count}
+        subscriptionBadge={subscriptionBadge}
       />
-      <Collapse in={isOpen} animateOpacity>
+      <Collapse
+        in={isOpen && !isLocked}
+        animateOpacity
+        unmountOnExit={false}
+        startingHeight={0}
+      >
         <Box mt={2} bg={sectionBg} p={3} borderRadius="md">
           {children}
         </Box>

src/views/Community/components/DynamicNewsDetail/CompactStockItem.js

@@ -0,0 +1,137 @@
+// src/views/Community/components/DynamicNewsDetail/CompactStockItem.js
+// 精简模式股票卡片组件（浮动卡片样式）
+
+import React from 'react';
+import {
+  Box,
+  Text,
+  Tooltip,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+/**
+ * 精简模式股票卡片组件
+ * @param {Object} props
+ * @param {Object} props.stock - 股票对象
+ * @param {Object} props.quote - 股票行情数据（可选）
+ */
+const CompactStockItem = ({ stock, quote = null }) => {
+  const nameColor = useColorModeValue('gray.700', 'gray.300');
+
+  const handleViewDetail = () => {
+    const stockCode = stock.stock_code.split('.')[0];
+    window.open(`https://valuefrontier.cn/company?scode=${stockCode}`, '_blank');
+  };
+
+  // 格式化涨跌幅显示
+  const formatChange = (value) => {
+    if (value === null || value === undefined || isNaN(value)) return '--';
+    const prefix = value > 0 ? '+' : '';
+    return `${prefix}${parseFloat(value).toFixed(2)}%`;
+  };
+
+  // 获取涨跌幅颜色（涨红跌绿）
+  const getChangeColor = (value) => {
+    const num = parseFloat(value);
+    if (isNaN(num) || num === 0) return 'gray.500';
+    return num > 0 ? 'red.500' : 'green.500';
+  };
+
+  // 获取背景渐变色（涨红跌绿）
+  const getBackgroundGradient = (value) => {
+    const num = parseFloat(value);
+    if (isNaN(num) || num === 0) {
+      return 'linear(to-br, gray.50, gray.100)';
+    }
+    return num > 0
+      ? 'linear(to-br, red.50, red.100)'
+      : 'linear(to-br, green.50, green.100)';
+  };
+
+  // 获取边框颜色
+  const getBorderColor = (value) => {
+    const num = parseFloat(value);
+    if (isNaN(num) || num === 0) return 'gray.300';
+    return num > 0 ? 'red.300' : 'green.300';
+  };
+
+  // 获取涨跌幅数据（优先使用 quote，fallback 到 stock）
+  const change = quote?.change ?? stock.daily_change ?? null;
+
+  return (
+    <Tooltip
+      label={`${stock.stock_name} - 点击查看详情`}
+      placement="top"
+      hasArrow
+      bg="gray.700"
+      color="white"
+      fontSize="xs"
+    >
+      <Box
+        bgGradient={getBackgroundGradient(change)}
+        borderWidth="3px"
+        borderColor={getBorderColor(change)}
+        borderRadius="2xl"
+        p={4}
+        onClick={handleViewDetail}
+        cursor="pointer"
+        boxShadow="lg"
+        position="relative"
+        overflow="hidden"
+        _before={{
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: '4px',
+          bg: getBorderColor(change),
+        }}
+        _hover={{
+          boxShadow: '2xl',
+          transform: 'translateY(-4px) scale(1.02)',
+        }}
+        transition="all 0.3s ease-in-out"
+        display="inline-block"
+        minW="150px"
+      >
+        {/* 股票代码 */}
+        <Text
+          fontSize="md"
+          fontWeight="bold"
+          color={getChangeColor(change)}
+          mb={2}
+          textAlign="center"
+        >
+          {stock.stock_code}
+        </Text>
+
+        {/* 涨跌幅 - 超大号显示 */}
+        <Text
+          fontSize="3xl"
+          fontWeight="black"
+          color={getChangeColor(change)}
+          textAlign="center"
+          lineHeight="1"
+          textShadow="0 1px 2px rgba(0,0,0,0.1)"
+        >
+          {formatChange(change)}
+        </Text>
+
+        {/* 股票名称（小字） */}
+        <Text
+          fontSize="xs"
+          color={nameColor}
+          mt={2}
+          textAlign="center"
+          noOfLines={1}
+          fontWeight="medium"
+        >
+          {stock.stock_name}
+        </Text>
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default CompactStockItem;

src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js

@@ -1,7 +1,7 @@
 // src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js
 // 动态新闻详情面板主组件（组装所有子组件）
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   Card,
@@ -17,6 +17,7 @@ import { getImportanceConfig } from '../../../../constants/importanceLevels';
 import { eventService } from '../../../../services/eventService';
 import { useEventStocks } from '../StockDetailPanel/hooks/useEventStocks';
 import { toggleEventFollow, selectEventFollowStatus } from '../../../../store/slices/communityDataSlice';
+import { useAuth } from '../../../../contexts/AuthContext';
 import EventHeaderInfo from './EventHeaderInfo';
 import EventDescriptionSection from './EventDescriptionSection';
 import RelatedConceptsSection from './RelatedConceptsSection';
@@ -24,6 +25,8 @@ import RelatedStocksSection from './RelatedStocksSection';
 import CollapsibleSection from './CollapsibleSection';
 import HistoricalEvents from '../../../EventDetail/components/HistoricalEvents';
 import TransmissionChainAnalysis from '../../../EventDetail/components/TransmissionChainAnalysis';
+import SubscriptionBadge from '../../../../components/SubscriptionBadge';
+import SubscriptionUpgradeModal from '../../../../components/SubscriptionUpgradeModal';
 
 /**
  * 动态新闻详情面板主组件
@@ -32,30 +35,65 @@ import TransmissionChainAnalysis from '../../../EventDetail/components/Transmiss
  */
 const DynamicNewsDetailPanel = ({ event }) => {
   const dispatch = useDispatch();
+  const { user } = useAuth();
   const cardBg = useColorModeValue('white', 'gray.800');
   const borderColor = useColorModeValue('gray.200', 'gray.700');
   const textColor = useColorModeValue('gray.600', 'gray.400');
   const toast = useToast();
 
+  // 获取用户会员等级（修复：字段名从 subscription_tier 改为 subscription_type）
+  const userTier = user?.subscription_type || 'free';
+
   // 从 Redux 读取关注状态
   const eventFollowStatus = useSelector(selectEventFollowStatus);
   const isFollowing = event?.id ? (eventFollowStatus[event.id]?.isFollowing || false) : false;
   const followerCount = event?.id ? (eventFollowStatus[event.id]?.followerCount || event.follower_count || 0) : 0;
 
-  // 使用 Hook 获取实时数据
+  // 权限判断函数
+  const hasAccess = useCallback((requiredTier) => {
+    const tierLevel = { free: 0, pro: 1, max: 2 };
+    const result = tierLevel[userTier] >= tierLevel[requiredTier];
+    return result;
+  }, [userTier]);
+
+  // 升级弹窗状态
+  const [upgradeModal, setUpgradeModal] = useState({
+    isOpen: false,
+    requiredLevel: 'pro',
+    featureName: ''
+  });
+
+  // 使用 Hook 获取实时数据（禁用自动加载，改为手动触发）
   const {
     stocks,
     quotes,
     eventDetail,
     historicalEvents,
     expectationScore,
-    loading
-  } = useEventStocks(event?.id, event?.created_at);
+    loading,
+    loadStocksData,
+    loadHistoricalData,
+    loadChainAnalysis
+  } = useEventStocks(event?.id, event?.created_at, { autoLoad: false });
+
+  // 相关股票、相关概念、历史事件和传导链的权限
+  const canAccessStocks = hasAccess('pro');
+  const canAccessConcepts = hasAccess('pro');
+  const canAccessHistorical = hasAccess('pro');
+  const canAccessTransmission = hasAccess('max');
+
+  // 子区块折叠状态管理 + 加载追踪
+  // PRO 会员的相关股票默认展开
+  const [isStocksOpen, setIsStocksOpen] = useState(canAccessStocks && userTier === 'pro');
+  const [hasLoadedStocks, setHasLoadedStocks] = useState(false);
+
+  const [isConceptsOpen, setIsConceptsOpen] = useState(false);
+
+  const [isHistoricalOpen, setIsHistoricalOpen] = useState(false);
+  const [hasLoadedHistorical, setHasLoadedHistorical] = useState(false);
 
-  // 折叠状态管理
-  const [isStocksOpen, setIsStocksOpen] = useState(true);
-  const [isHistoricalOpen, setIsHistoricalOpen] = useState(true);
   const [isTransmissionOpen, setIsTransmissionOpen] = useState(false);
+  const [hasLoadedTransmission, setHasLoadedTransmission] = useState(false);
 
   // 自选股管理（使用 localStorage）
   const [watchlistSet, setWatchlistSet] = useState(() => {
@@ -67,6 +105,88 @@ const DynamicNewsDetailPanel = ({ event }) => {
     }
   });
 
+  // 锁定点击处理 - 弹出升级弹窗
+  const handleLockedClick = useCallback((featureName, requiredLevel) => {
+    setUpgradeModal({
+      isOpen: true,
+      requiredLevel,
+      featureName
+    });
+  }, []);
+
+  // 关闭升级弹窗
+  const handleCloseUpgradeModal = useCallback(() => {
+    setUpgradeModal({
+      isOpen: false,
+      requiredLevel: 'pro',
+      featureName: ''
+    });
+  }, []);
+
+  // 相关股票 - 展开时加载（需要 PRO 权限）
+  const handleStocksToggle = useCallback(() => {
+    const newState = !isStocksOpen;
+    setIsStocksOpen(newState);
+
+    if (newState && !hasLoadedStocks) {
+      console.log('%c📊 [相关股票] 首次展开，加载股票数据', 'color: #10B981; font-weight: bold;', { eventId: event?.id });
+      loadStocksData();
+      setHasLoadedStocks(true);
+    }
+  }, [isStocksOpen, hasLoadedStocks, loadStocksData, event?.id]);
+
+  // 相关概念 - 展开/收起（无需加载）
+  const handleConceptsToggle = useCallback(() => {
+    setIsConceptsOpen(!isConceptsOpen);
+  }, [isConceptsOpen]);
+
+  // 历史事件对比 - 展开时加载
+  const handleHistoricalToggle = useCallback(() => {
+    const newState = !isHistoricalOpen;
+    setIsHistoricalOpen(newState);
+
+    if (newState && !hasLoadedHistorical) {
+      console.log('%c📜 [历史事件] 首次展开，加载历史事件数据', 'color: #3B82F6; font-weight: bold;', { eventId: event?.id });
+      loadHistoricalData();
+      setHasLoadedHistorical(true);
+    }
+  }, [isHistoricalOpen, hasLoadedHistorical, loadHistoricalData, event?.id]);
+
+  // 传导链分析 - 展开时加载
+  const handleTransmissionToggle = useCallback(() => {
+    const newState = !isTransmissionOpen;
+    setIsTransmissionOpen(newState);
+
+    if (newState && !hasLoadedTransmission) {
+      console.log('%c🔗 [传导链] 首次展开，加载传导链数据', 'color: #8B5CF6; font-weight: bold;', { eventId: event?.id });
+      loadChainAnalysis();
+      setHasLoadedTransmission(true);
+    }
+  }, [isTransmissionOpen, hasLoadedTransmission, loadChainAnalysis, event?.id]);
+
+  // 事件切换时重置所有子模块状态
+  useEffect(() => {
+    console.log('%c🔄 [事件切换] 重置所有子模块状态', 'color: #F59E0B; font-weight: bold;', { eventId: event?.id });
+
+    // PRO 会员的相关股票默认展开，其他情况收起
+    const shouldOpenStocks = canAccessStocks && userTier === 'pro';
+    setIsStocksOpen(shouldOpenStocks);
+    setHasLoadedStocks(false);
+
+    // PRO 会员默认展开时，自动加载股票数据
+    if (shouldOpenStocks) {
+      console.log('%c📊 [PRO会员] 自动加载相关股票数据', 'color: #10B981; font-weight: bold;', { eventId: event?.id });
+      loadStocksData();
+      setHasLoadedStocks(true);
+    }
+
+    setIsConceptsOpen(false);
+    setIsHistoricalOpen(false);
+    setHasLoadedHistorical(false);
+    setIsTransmissionOpen(false);
+    setHasLoadedTransmission(false);
+  }, [event?.id, canAccessStocks, userTier, loadStocksData]);
+
   // 切换关注状态
   const handleToggleFollow = useCallback(async () => {
     if (!event?.id) return;
@@ -141,37 +261,58 @@ const DynamicNewsDetailPanel = ({ event }) => {
           {/* 事件描述 */}
           <EventDescriptionSection description={event.description} />
 
-          {/* 相关概念 */}
+          {/* 相关股票（可折叠） - 懒加载 - 需要 PRO 权限 */}
+          <CollapsibleSection
+            title="相关股票"
+            isOpen={isStocksOpen}
+            onToggle={handleStocksToggle}
+            count={stocks?.length || 0}
+            subscriptionBadge={(() => {
+              if (!canAccessStocks) {
+                return <SubscriptionBadge tier="pro" size="sm" />;
+              }
+              return null;
+            })()}
+            isLocked={!canAccessStocks}
+            onLockedClick={() => handleLockedClick('相关股票', 'pro')}
+          >
+            {loading.stocks || loading.quotes ? (
+              <Center py={4}>
+                <Spinner size="md" color="blue.500" />
+                <Text ml={2} color={textColor}>加载股票数据中...</Text>
+              </Center>
+            ) : (
+              <RelatedStocksSection
+                stocks={stocks}
+                quotes={quotes}
+                eventTime={event.created_at}
+                watchlistSet={watchlistSet}
+                onWatchlistToggle={handleWatchlistToggle}
+              />
+            )}
+          </CollapsibleSection>
+
+          {/* 相关概念（可折叠） - 需要 PRO 权限 */}
           <RelatedConceptsSection
             eventTitle={event.title}
             effectiveTradingDate={event.trading_date || event.created_at}
             eventTime={event.created_at}
+            isOpen={isConceptsOpen}
+            onToggle={handleConceptsToggle}
+            subscriptionBadge={!canAccessConcepts ? <SubscriptionBadge tier="pro" size="sm" /> : null}
+            isLocked={!canAccessConcepts}
+            onLockedClick={() => handleLockedClick('相关概念', 'pro')}
           />
 
-          {/* 相关股票（可折叠） */}
-          {loading.stocks || loading.quotes ? (
-            <Center py={4}>
-              <Spinner size="md" color="blue.500" />
-              <Text ml={2} color={textColor}>加载股票数据中...</Text>
-            </Center>
-          ) : (
-            <RelatedStocksSection
-              stocks={stocks}
-              quotes={quotes}
-              eventTime={event.created_at}
-              watchlistSet={watchlistSet}
-              isOpen={isStocksOpen}
-              onToggle={() => setIsStocksOpen(!isStocksOpen)}
-              onWatchlistToggle={handleWatchlistToggle}
-            />
-          )}
-
-          {/* 历史事件对比（可折叠） */}
+          {/* 历史事件对比（可折叠） - 懒加载 - 需要 PRO 权限 */}
           <CollapsibleSection
             title="历史事件对比"
             isOpen={isHistoricalOpen}
-            onToggle={() => setIsHistoricalOpen(!isHistoricalOpen)}
+            onToggle={handleHistoricalToggle}
             count={historicalEvents?.length || 0}
+            subscriptionBadge={!canAccessHistorical ? <SubscriptionBadge tier="pro" size="sm" /> : null}
+            isLocked={!canAccessHistorical}
+            onLockedClick={() => handleLockedClick('历史事件对比', 'pro')}
           >
             {loading.historicalEvents ? (
               <Center py={4}>
@@ -181,15 +322,19 @@ const DynamicNewsDetailPanel = ({ event }) => {
             ) : (
               <HistoricalEvents
                 events={historicalEvents || []}
+                expectationScore={expectationScore}
               />
             )}
           </CollapsibleSection>
 
-          {/* 传导链分析（可折叠） */}
+          {/* 传导链分析（可折叠） - 懒加载 - 需要 MAX 权限 */}
           <CollapsibleSection
             title="传导链分析"
             isOpen={isTransmissionOpen}
-            onToggle={() => setIsTransmissionOpen(!isTransmissionOpen)}
+            onToggle={handleTransmissionToggle}
+            subscriptionBadge={!canAccessTransmission ? <SubscriptionBadge tier="max" size="sm" /> : null}
+            isLocked={!canAccessTransmission}
+            onLockedClick={() => handleLockedClick('传导链分析', 'max')}
           >
             <TransmissionChainAnalysis
               eventId={event.id}
@@ -198,6 +343,17 @@ const DynamicNewsDetailPanel = ({ event }) => {
           </CollapsibleSection>
         </VStack>
       </CardBody>
+
+      {/* 升级弹窗 */}
+      {upgradeModal.isOpen ? (
+        <SubscriptionUpgradeModal
+          isOpen={upgradeModal.isOpen}
+          onClose={handleCloseUpgradeModal}
+          requiredLevel={upgradeModal.requiredLevel}
+          featureName={upgradeModal.featureName}
+          currentLevel={userTier}
+        />
+      ): null }
     </Card>
   );
 };

src/views/Community/components/DynamicNewsDetail/EventHeaderInfo.js

@@ -8,6 +8,8 @@ import {
   HStack,
   Heading,
   Text,
+  Badge,
+  Icon,
   useColorModeValue,
 } from '@chakra-ui/react';
 import { ViewIcon } from '@chakra-ui/icons';
@@ -100,7 +102,7 @@ const EventHeaderInfo = ({ event, importance, isFollowing, followerCount, onTogg
         </Text>
       </Flex>
 
-      {/* 第三行：涨跌幅指标 + 重要性文本 */}
+      {/* 第三行：涨跌幅指标 + 重要性徽章 */}
       <HStack spacing={3} align="center">
         <Box maxW="500px">
           <StockChangeIndicators
@@ -110,19 +112,28 @@ const EventHeaderInfo = ({ event, importance, isFollowing, followerCount, onTogg
           />
         </Box>
 
-        {/* 重要性文本 */}
-        <Box
-          bg={importance.bgColor}
-          borderWidth="2px"
-          borderColor={importance.badgeBg}
-          px={2}
-          py={1}
-          borderRadius="md"
+        {/* 重要性徽章 - 使用渐变色和图标 */}
+        <Badge
+          px={4}
+          py={2}
+          borderRadius="full"
+          fontSize="md"
+          fontWeight="bold"
+          bgGradient={
+            importance.level === 'S' ? 'linear(to-r, red.500, red.700)' :
+            importance.level === 'A' ? 'linear(to-r, orange.500, orange.700)' :
+            importance.level === 'B' ? 'linear(to-r, blue.500, blue.700)' :
+            'linear(to-r, gray.500, gray.700)'
+          }
+          color="white"
+          boxShadow="lg"
+          display="flex"
+          alignItems="center"
+          gap={2}
         >
-          <Text fontSize="sm" color={importance.badgeBg} whiteSpace="nowrap" fontWeight="medium">
-            重要性：{getImportanceText()}
-          </Text>
-        </Box>
+          <Icon as={importance.icon} boxSize={5} />
+          <Text>重要性：{getImportanceText()}</Text>
+        </Badge>
       </HStack>
     </Box>
   );

src/views/Community/components/DynamicNewsDetail/MiniKLineChart.js

@@ -161,8 +161,8 @@ const MiniKLineChart = React.memo(function MiniKLineChart({ stockCode, eventTime
     return (
         <div
             style={{
-                width: 140,
-                height: 40,
+                width: '100%',
+                height: 30,
                 cursor: onClick ? 'pointer' : 'default'
             }}
             onClick={onClick}

src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/DetailedConceptCard.js

@@ -137,11 +137,48 @@ const DetailedConceptCard = ({ concept, onClick }) => {
                 </Text>
               </HStack>
 
-              <SimpleGrid columns={{ base: 1 }} spacing={2}>
-                {concept.stocks.slice(0, 4).map((stock, idx) => (
-                  <ConceptStockItem key={idx} stock={stock} />
-                ))}
-              </SimpleGrid>
+              {/* 可滚动容器 - 默认显示4条，可滚动查看全部 */}
+              <Box
+                maxH="300px"
+                overflowY="auto"
+                pr={2}
+                onWheel={(e) => {
+                  const element = e.currentTarget;
+                  const scrollTop = element.scrollTop;
+                  const scrollHeight = element.scrollHeight;
+                  const clientHeight = element.clientHeight;
+
+                  // 如果在滚动范围内，阻止事件冒泡到父容器
+                  if (
+                    (e.deltaY < 0 && scrollTop > 0) || // 向上滚动且未到顶部
+                    (e.deltaY > 0 && scrollTop + clientHeight < scrollHeight) // 向下滚动且未到底部
+                  ) {
+                    e.stopPropagation();
+                  }
+                }}
+                css={{
+                  overscrollBehavior: 'contain', // 防止滚动链
+                  '&::-webkit-scrollbar': {
+                    width: '6px',
+                  },
+                  '&::-webkit-scrollbar-track': {
+                    background: '#f1f1f1',
+                  },
+                  '&::-webkit-scrollbar-thumb': {
+                    background: '#888',
+                    borderRadius: '3px',
+                  },
+                  '&::-webkit-scrollbar-thumb:hover': {
+                    background: '#555',
+                  },
+                }}
+              >
+                <SimpleGrid columns={{ base: 1 }} spacing={2}>
+                  {concept.stocks.map((stock, idx) => (
+                    <ConceptStockItem key={idx} stock={stock} />
+                  ))}
+                </SimpleGrid>
+              </Box>
             </Box>
           )}
         </VStack>

src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/SimpleConceptCard.js

@@ -4,8 +4,10 @@
 import React from 'react';
 import {
   Flex,
+  VStack,
   Box,
   Text,
+  Badge,
   useColorModeValue,
 } from '@chakra-ui/react';
 
@@ -27,10 +29,15 @@ const SimpleConceptCard = ({ concept, onClick, getRelevanceColor }) => {
   const relevanceScore = Math.round((concept.score || 0) * 100);
   const relevanceColors = getRelevanceColor(relevanceScore);
 
+  // 涨跌幅数据
+  const changePct = concept.price_info?.avg_change_pct ? parseFloat(concept.price_info.avg_change_pct) : null;
+  const changeColor = changePct !== null ? (changePct > 0 ? 'red' : changePct < 0 ? 'green' : 'gray') : null;
+  const changeSymbol = changePct !== null && changePct > 0 ? '+' : '';
+
   return (
-    <Flex
-      align="center"
-      justify="space-between"
+    <VStack
+      align="stretch"
+      spacing={2}
       bg={cardBg}
       borderWidth="1px"
       borderColor={borderColor}
@@ -46,28 +53,50 @@ const SimpleConceptCard = ({ concept, onClick, getRelevanceColor }) => {
       }}
       onClick={() => onClick(concept)}
     >
-      {/* 左侧：概念名 + 数量 */}
-      <Text fontSize="sm" fontWeight="normal" color={conceptNameColor} mr={3}>
+      {/* 第一行：概念名 + 数量（允许折行） */}
+      <Text
+        fontSize="sm"
+        fontWeight="normal"
+        color={conceptNameColor}
+        wordBreak="break-word"
+        lineHeight="1.4"
+      >
         {concept.concept}{' '}
         <Text as="span" color="gray.500">
           ({concept.stock_count})
         </Text>
       </Text>
 
-      {/* 右侧：相关度标签 */}
-      <Box
-        bg={relevanceColors.bg}
-        color={relevanceColors.color}
-        px={3}
-        py={1}
-        borderRadius="md"
-        flexShrink={0}
-      >
-        <Text fontSize="xs" fontWeight="medium" whiteSpace="nowrap">
-          相关度: {relevanceScore}%
-        </Text>
-      </Box>
-    </Flex>
+      {/* 第二行：相关度 + 涨跌幅 */}
+      <Flex justify="space-between" align="center" gap={2} flexWrap="wrap">
+        {/* 相关度标签 */}
+        <Box
+          bg={relevanceColors.bg}
+          color={relevanceColors.color}
+          px={2}
+          py={0.5}
+          borderRadius="sm"
+          flexShrink={0}
+        >
+          <Text fontSize="xs" fontWeight="medium" whiteSpace="nowrap">
+            相关度: {relevanceScore}%
+          </Text>
+        </Box>
+
+        {/* 涨跌幅数据 */}
+        {changePct !== null && (
+          <Badge
+            colorScheme={changeColor}
+            fontSize="xs"
+            px={2}
+            py={0.5}
+            flexShrink={0}
+          >
+            {changeSymbol}{changePct.toFixed(2)}%
+          </Badge>
+        )}
+      </Flex>
+    </VStack>
   );
 };
 

src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/TradingDateInfo.js

@@ -3,7 +3,6 @@
 
 import React from 'react';
 import {
-  Box,
   HStack,
   Text,
   useColorModeValue,
@@ -18,8 +17,6 @@ import moment from 'moment';
  * @param {string|Object} props.eventTime - 事件发生时间
  */
 const TradingDateInfo = ({ effectiveTradingDate, eventTime }) => {
-  const sectionBg = useColorModeValue('gray.50', 'gray.750');
-  const headingColor = useColorModeValue('gray.700', 'gray.200');
   const stockCountColor = useColorModeValue('gray.500', 'gray.400');
 
   if (!effectiveTradingDate) {
@@ -27,19 +24,17 @@ const TradingDateInfo = ({ effectiveTradingDate, eventTime }) => {
   }
 
   return (
-    <Box mb={4} p={3} bg={sectionBg} borderRadius="md">
-      <HStack spacing={2}>
-        <FaCalendarAlt color="gray" />
-        <Text fontSize="sm" color={headingColor}>
-          涨跌幅数据日期：{effectiveTradingDate}
-          {eventTime && effectiveTradingDate !== moment(eventTime).format('YYYY-MM-DD') && (
-            <Text as="span" ml={2} fontSize="xs" color={stockCountColor}>
-              (事件发生于 {typeof eventTime === 'object' ? moment(eventTime).format('YYYY-MM-DD HH:mm') : moment(eventTime).format('YYYY-MM-DD HH:mm')}，显示下一交易日数据)
-            </Text>
-          )}
-        </Text>
-      </HStack>
-    </Box>
+    <HStack spacing={2}>
+      <FaCalendarAlt color="gray" size={12} />
+      <Text fontSize="xs" color={stockCountColor}>
+        涨跌幅数据：{effectiveTradingDate}
+        {eventTime && effectiveTradingDate !== moment(eventTime).format('YYYY-MM-DD') && (
+          <Text as="span" ml={2} fontSize="xs" color={stockCountColor}>
+            (事件发生于 {typeof eventTime === 'object' ? moment(eventTime).format('YYYY-MM-DD HH:mm') : moment(eventTime).format('YYYY-MM-DD HH:mm')}，显示下一交易日数据)
+          </Text>
+        )}
+      </Text>
+    </HStack>
   );
 };
 

src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/index.js

@@ -28,8 +28,18 @@ import { logger } from '../../../../../utils/logger';
  * @param {string} props.eventTitle - 事件标题（用于搜索概念）
  * @param {string} props.effectiveTradingDate - 有效交易日期（涨跌幅数据日期）
  * @param {string|Object} props.eventTime - 事件发生时间
+ * @param {React.ReactNode} props.subscriptionBadge - 订阅徽章组件（可选）
+ * @param {boolean} props.isLocked - 是否锁定详细模式（需要付费）
+ * @param {Function} props.onLockedClick - 锁定时的点击回调（触发付费弹窗）
  */
-const RelatedConceptsSection = ({ eventTitle, effectiveTradingDate, eventTime }) => {
+const RelatedConceptsSection = ({
+  eventTitle,
+  effectiveTradingDate,
+  eventTime,
+  subscriptionBadge = null,
+  isLocked = false,
+  onLockedClick = null
+}) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [concepts, setConcepts] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -202,21 +212,41 @@ const RelatedConceptsSection = ({ eventTitle, effectiveTradingDate, eventTime })
 
   return (
     <Box bg={sectionBg} p={3} borderRadius="md">
-      {/* 标题栏 */}
-      <Flex justify="space-between" align="center" mb={3}>
-        <Heading size="sm" color={headingColor}>
-          相关概念
-        </Heading>
-        <Button
-          size="sm"
-          variant="ghost"
-          colorScheme="blue"
-          rightIcon={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
-          onClick={() => setIsExpanded(!isExpanded)}
-        >
-          {isExpanded ? '收起' : '查看详细描述'}
-        </Button>
-      </Flex>
+      {/* 标题栏 - 两行布局 */}
+      <Box mb={3}>
+        {/* 第一行：标题 + Badge + 按钮 */}
+        <Flex justify="space-between" align="center" mb={2}>
+          <Flex align="center" gap={2}>
+            <Heading size="sm" color={headingColor}>
+              相关概念
+            </Heading>
+            {/* 订阅徽章 */}
+            {subscriptionBadge}
+          </Flex>
+          <Button
+            size="sm"
+            variant="ghost"
+            colorScheme="blue"
+            rightIcon={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
+            onClick={() => {
+              // 如果被锁定且有回调函数，触发付费弹窗
+              if (isLocked && onLockedClick) {
+                onLockedClick();
+              } else {
+                // 否则正常展开/收起
+                setIsExpanded(!isExpanded);
+              }
+            }}
+          >
+            {isExpanded ? '收起' : '查看详细描述'}
+          </Button>
+        </Flex>
+        {/* 第二行：交易日期信息 */}
+        <TradingDateInfo
+          effectiveTradingDate={effectiveTradingDate}
+          eventTime={eventTime}
+        />
+      </Box>
 
       {/* 简单模式：横向卡片列表（总是显示） */}
       <Flex gap={2} flexWrap="wrap" mb={isExpanded ? 3 : 0}>
@@ -229,12 +259,7 @@ const RelatedConceptsSection = ({ eventTitle, effectiveTradingDate, eventTime })
           />
         ))}
       </Flex>
-
-      {/* 交易日期信息 */}
-      <TradingDateInfo
-        effectiveTradingDate={effectiveTradingDate}
-        eventTime={eventTime}
-      />
+  
 
       {/* 详细模式：卡片网格（可折叠） */}
       <Collapse in={isExpanded} animateOpacity>

src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js

@@ -1,24 +1,26 @@
 // src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
-// 相关股票列表区组件（可折叠，网格布局）
+// 相关股票列表区组件（纯内容，不含标题）
 
-import React from 'react';
+import React, { useState } from 'react';
 import {
-  Box,
-  SimpleGrid,
-  Collapse,
+  VStack,
+  Flex,
+  Button,
+  ButtonGroup,
+  Wrap,
+  WrapItem,
 } from '@chakra-ui/react';
-import CollapsibleHeader from './CollapsibleHeader';
+import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 import StockListItem from './StockListItem';
+import CompactStockItem from './CompactStockItem';
 
 /**
- * 相关股票列表区组件
+ * 相关股票列表区组件（纯内容部分）
  * @param {Object} props
  * @param {Array<Object>} props.stocks - 股票数组
  * @param {Object} props.quotes - 股票行情字典 { [stockCode]: { change: number } }
  * @param {string} props.eventTime - 事件时间
  * @param {Set} props.watchlistSet - 自选股代码集合
- * @param {boolean} props.isOpen - 是否展开
- * @param {Function} props.onToggle - 切换展开/收起的回调
  * @param {Function} props.onWatchlistToggle - 切换自选股回调
  */
 const RelatedStocksSection = ({
@@ -26,40 +28,70 @@ const RelatedStocksSection = ({
   quotes = {},
   eventTime = null,
   watchlistSet = new Set(),
-  isOpen,
-  onToggle,
   onWatchlistToggle
 }) => {
+  // 显示模式：'detail' 详情模式, 'compact' 精简模式
+  const [viewMode, setViewMode] = useState('detail');
+
   // 如果没有股票数据，不渲染
   if (!stocks || stocks.length === 0) {
     return null;
   }
 
   return (
-    <Box>
-      <CollapsibleHeader
-        title="相关股票"
-        isOpen={isOpen}
-        onToggle={onToggle}
-        count={stocks.length}
-      />
-      <Collapse in={isOpen} animateOpacity>
-        <Box mt={3}>
-          <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
-            {stocks.map((stock, index) => (
-              <StockListItem
-                key={index}
+    <VStack align="stretch" spacing={4}>
+      {/* 模式切换按钮 */}
+      <Flex justify="flex-end">
+        <ButtonGroup size="sm" isAttached variant="outline">
+          <Button
+            leftIcon={<ViewIcon />}
+            colorScheme={viewMode === 'detail' ? 'blue' : 'gray'}
+            variant={viewMode === 'detail' ? 'solid' : 'outline'}
+            onClick={() => setViewMode('detail')}
+          >
+            详情模式
+          </Button>
+          <Button
+            leftIcon={<ViewOffIcon />}
+            colorScheme={viewMode === 'compact' ? 'blue' : 'gray'}
+            variant={viewMode === 'compact' ? 'solid' : 'outline'}
+            onClick={() => setViewMode('compact')}
+          >
+            精简模式
+          </Button>
+        </ButtonGroup>
+      </Flex>
+
+      {/* 详情模式 */}
+      {viewMode === 'detail' && (
+        <VStack align="stretch" spacing={3}>
+          {stocks.map((stock, index) => (
+            <StockListItem
+              key={index}
+              stock={stock}
+              quote={quotes[stock.stock_code]}
+              eventTime={eventTime}
+              isInWatchlist={watchlistSet.has(stock.stock_code)}
+              onWatchlistToggle={onWatchlistToggle}
+            />
+          ))}
+        </VStack>
+      )}
+
+      {/* 精简模式 */}
+      {viewMode === 'compact' && (
+        <Wrap spacing={4}>
+          {stocks.map((stock, index) => (
+            <WrapItem key={index}>
+              <CompactStockItem
                 stock={stock}
                 quote={quotes[stock.stock_code]}
-                eventTime={eventTime}
-                isInWatchlist={watchlistSet.has(stock.stock_code)}
-                onWatchlistToggle={onWatchlistToggle}
               />
-            ))}
-          </SimpleGrid>
-        </Box>
-      </Collapse>
-    </Box>
+            </WrapItem>
+          ))}
+        </Wrap>
+      )}
+    </VStack>
   );
 };
 

src/views/Community/components/DynamicNewsDetail/StockListItem.js

@@ -6,11 +6,12 @@ import {
   Box,
   Flex,
   VStack,
-  SimpleGrid,
+  HStack,
   Text,
   Button,
   IconButton,
   Collapse,
+  Tooltip,
   useColorModeValue,
 } from '@chakra-ui/react';
 import { StarIcon } from '@chakra-ui/icons';
@@ -104,142 +105,209 @@ const StockListItem = ({
       bg={cardBg}
       borderWidth="1px"
       borderColor={borderColor}
-      borderRadius="md"
-      p={4}
-      onClick={handleViewDetail}
-      cursor="pointer"
+      borderRadius="lg"
+      p={3}
+      position="relative"
+      overflow="hidden"
+      _before={{
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: '3px',
+        bgGradient: 'linear(to-r, blue.400, purple.500, pink.500)',
+      }}
       _hover={{
-        boxShadow: 'md',
+        boxShadow: 'lg',
         borderColor: 'blue.300',
       }}
       transition="all 0.2s"
     >
-      <VStack align="stretch" spacing={3}>
-        {/* 顶部：股票代码 + 名称 + 操作按钮 */}
-        <Flex justify="space-between" align="center">
-          {/* 左侧：代码 + 名称 */}
-          <Flex align="baseline" gap={2}>
+      {/* 单行紧凑布局：名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
+      <HStack spacing={3} align="stretch">
+        {/* 左侧：股票名称 + 涨跌幅（垂直排列） - 收窄 */}
+        <VStack
+          align="stretch"
+          spacing={1}
+          minW="100px"
+          maxW="120px"
+          justify="center"
+          flexShrink={0}
+        >
+          <Tooltip
+            label="点击查看股票详情"
+            placement="top"
+            hasArrow
+            bg="blue.600"
+            color="white"
+            fontSize="xs"
+          >
             <Text
-              fontSize="md"
+              fontSize="sm"
               fontWeight="bold"
               color={codeColor}
+              noOfLines={1}
               cursor="pointer"
               onClick={handleViewDetail}
               _hover={{ textDecoration: 'underline' }}
             >
-              {stock.stock_code}
-            </Text>
-            <Text fontSize="sm" color={nameColor}>
               {stock.stock_name}
             </Text>
+          </Tooltip>
+          <HStack spacing={1} align="center">
             <Text
-              fontSize="sm"
-              fontWeight="semibold"
+              fontSize="lg"
+              fontWeight="bold"
               color={getChangeColor(change)}
             >
               {formatChange(change)}
             </Text>
-          </Flex>
-
-          {/* 右侧：操作按钮 */}
-          <Flex gap={2}>
             {onWatchlistToggle && (
               <IconButton
-                size="sm"
-                variant={isInWatchlist ? 'solid' : 'outline'}
+                size="xs"
+                variant={isInWatchlist ? 'solid' : 'ghost'}
                 colorScheme={isInWatchlist ? 'yellow' : 'gray'}
                 icon={<StarIcon />}
                 onClick={handleWatchlistClick}
                 aria-label={isInWatchlist ? '已关注' : '加自选'}
-                title={isInWatchlist ? '已关注' : '加自选'}
+                borderRadius="full"
               />
             )}
-            <Button
-              size="sm"
-              colorScheme="blue"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleViewDetail();
-              }}
-            >
-              查看
-            </Button>
-          </Flex>
-        </Flex>
+          </HStack>
+        </VStack>
 
-        {/* 分隔线 */}
-        <Box borderTop="1px solid" borderColor={dividerColor} />
-
-        {/* 分时图 & K线图 - 左右布局 */}
-        <Box>
-          <SimpleGrid columns={2} spacing={3}>
-            {/* 左侧：分时图 */}
-            <Box onClick={(e) => e.stopPropagation()}>
-              <Text fontSize="xs" color={descColor} mb={1} textAlign="center">
-                分时图
-              </Text>
-              <MiniTimelineChart
-                stockCode={stock.stock_code}
-                eventTime={eventTime}
-                onClick={() => setIsModalOpen(true)}
-              />
-            </Box>
-
-            {/* 右侧：K线图 */}
-            <Box onClick={(e) => e.stopPropagation()}>
-              <Text fontSize="xs" color={descColor} mb={1} textAlign="center">
-                日K线
-              </Text>
-              <MiniKLineChart
-                stockCode={stock.stock_code}
-                eventTime={eventTime}
-                onClick={() => setIsModalOpen(true)}
-              />
-            </Box>
-          </SimpleGrid>
+        {/* 分时图 - 固定宽度 */}
+        <Box
+          w="160px"
+          borderWidth="1px"
+          borderColor={useColorModeValue('blue.100', 'blue.700')}
+          borderRadius="md"
+          p={2}
+          bg={useColorModeValue('blue.50', 'blue.900')}
+          onClick={(e) => {
+            e.stopPropagation();
+            setIsModalOpen(true);
+          }}
+          cursor="pointer"
+          flexShrink={0}
+          _hover={{
+            borderColor: useColorModeValue('blue.300', 'blue.500'),
+            boxShadow: 'sm'
+          }}
+          transition="all 0.2s"
+        >
+          <Text
+            fontSize="xs"
+            color={useColorModeValue('blue.700', 'blue.200')}
+            mb={1}
+            fontWeight="semibold"
+          >
+            📈 分时
+          </Text>
+          <MiniTimelineChart
+            stockCode={stock.stock_code}
+            eventTime={eventTime}
+          />
         </Box>
 
-        {/* 分隔线 */}
-        <Box borderTop="1px solid" borderColor={dividerColor} />
+        {/* K线图 - 固定宽度 */}
+        <Box
+          w="160px"
+          borderWidth="1px"
+          borderColor={useColorModeValue('purple.100', 'purple.700')}
+          borderRadius="md"
+          p={2}
+          bg={useColorModeValue('purple.50', 'purple.900')}
+          onClick={(e) => {
+            e.stopPropagation();
+            setIsModalOpen(true);
+          }}
+          cursor="pointer"
+          flexShrink={0}
+          _hover={{
+            borderColor: useColorModeValue('purple.300', 'purple.500'),
+            boxShadow: 'sm'
+          }}
+          transition="all 0.2s"
+        >
+          <Text
+            fontSize="xs"
+            color={useColorModeValue('purple.700', 'purple.200')}
+            mb={1}
+            fontWeight="semibold"
+          >
+            📊 日线
+          </Text>
+          <MiniKLineChart
+            stockCode={stock.stock_code}
+            eventTime={eventTime}
+          />
+        </Box>
 
-        {/* 关联描述 */}
+        {/* 关联描述（单行显示，点击展开）- 占据更多空间 */}
         {relationText && relationText !== '--' && (
-          <Box>
-            <Text fontSize="xs" color={descColor} mb={1}>
-              关联描述：
-            </Text>
-            <Collapse in={isDescExpanded} startingHeight={40}>
-              <Text fontSize="sm" color={nameColor} lineHeight="1.6">
-                {relationText}
-              </Text>
-            </Collapse>
-            {needTruncate && (
-              <Button
-                size="xs"
-                variant="link"
-                colorScheme="blue"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setIsDescExpanded(!isDescExpanded);
-                }}
-                mt={1}
-              >
-                {isDescExpanded ? '收起' : '展开'}
-              </Button>
-            )}
-          </Box>
+          <Tooltip
+            label={isDescExpanded ? "点击收起" : "点击展开完整描述"}
+            placement="top"
+            hasArrow
+            bg="gray.600"
+            color="white"
+            fontSize="xs"
+          >
+            <Box
+              flex={1}
+              minW={0}
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsDescExpanded(!isDescExpanded);
+              }}
+              cursor="pointer"
+              px={3}
+              py={2}
+              bg={useColorModeValue('gray.50', 'gray.700')}
+              borderRadius="md"
+              _hover={{
+                bg: useColorModeValue('gray.100', 'gray.600'),
+              }}
+              transition="background 0.2s"
+            >
+              {/* 去掉"关联描述"标题 */}
+              <Collapse in={isDescExpanded} startingHeight={40}>
+                <Text
+                  fontSize="sm"
+                  color={nameColor}
+                  lineHeight="1.6"
+                >
+                  {relationText}
+                </Text>
+              </Collapse>
+              {isDescExpanded && (
+                <Text
+                  fontSize="xs"
+                  color="gray.500"
+                  mt={2}
+                  fontStyle="italic"
+                >
+                  ⚠️ AI生成，仅供参考
+                </Text>
+              )}
+            </Box>
+          </Tooltip>
         )}
-      </VStack>
+      </HStack>
     </Box>
 
-    {/* 股票详情弹窗 */}
-    <StockChartModal
-      isOpen={isModalOpen}
-      onClose={() => setIsModalOpen(false)}
-      stock={stock}
-      eventTime={eventTime}
-      size="6xl"
-    />
+    {/* 股票详情弹窗 - 未打开时不渲染 */}
+    {isModalOpen && (
+      <StockChartModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        stock={stock}
+        eventTime={eventTime}
+        size="6xl"
+      />
+    )}
     </>
   );
 };

src/views/Community/components/EventCard/DynamicNewsEventCard.js

@@ -8,19 +8,14 @@ import {
     CardBody,
     Box,
     Text,
-    HStack,
-    Popover,
-    PopoverTrigger,
-    PopoverContent,
-    PopoverBody,
-    PopoverArrow,
-    Portal,
+    Tooltip,
     useColorModeValue,
 } from '@chakra-ui/react';
 import moment from 'moment';
-import { getImportanceConfig, getAllImportanceLevels } from '../../../../constants/importanceLevels';
+import { getImportanceConfig } from '../../../../constants/importanceLevels';
 
 // 导入子组件
+import ImportanceBadge from './ImportanceBadge';
 import EventFollowButton from './EventFollowButton';
 import StockChangeIndicators from '../../../../components/StockChangeIndicators';
 
@@ -35,7 +30,6 @@ import StockChangeIndicators from '../../../../components/StockChangeIndicators'
  * @param {Function} props.onEventClick - 卡片点击事件
  * @param {Function} props.onTitleClick - 标题点击事件
  * @param {Function} props.onToggleFollow - 切换关注事件
- * @param {Object} props.timelineStyle - 时间轴样式配置
  * @param {string} props.borderColor - 边框颜色
  */
 const DynamicNewsEventCard = ({
@@ -47,43 +41,172 @@ const DynamicNewsEventCard = ({
     onEventClick,
     onTitleClick,
     onToggleFollow,
-    timelineStyle,
     borderColor,
 }) => {
-    const importance = getImportanceConfig(event.importance);
     const cardBg = useColorModeValue('white', 'gray.800');
     const linkColor = useColorModeValue('blue.600', 'blue.400');
+    const importance = getImportanceConfig(event.importance);
+
+    /**
+     * 判断交易时段（盘前、盘中上午、午休、盘中下午、盘后）
+     * @param {string} timestamp - 事件时间戳
+     * @returns {'pre-market' | 'morning-trading' | 'lunch-break' | 'afternoon-trading' | 'after-market'}
+     */
+    const getTradingPeriod = (timestamp) => {
+        const eventTime = moment(timestamp);
+        const hour = eventTime.hour();
+        const minute = eventTime.minute();
+        const timeInMinutes = hour * 60 + minute;
+
+        // 时间常量
+        const morningStart = 9 * 60 + 30;   // 09:30 = 570分钟
+        const morningEnd = 11 * 60 + 30;    // 11:30 = 690分钟
+        const lunchEnd = 13 * 60;           // 13:00 = 780分钟
+        const afternoonEnd = 15 * 60;       // 15:00 = 900分钟
+
+        // 盘中上午：09:30-11:30
+        if (timeInMinutes >= morningStart && timeInMinutes < morningEnd) {
+            return 'morning-trading';
+        }
+        // 午休：11:30-13:00
+        else if (timeInMinutes >= morningEnd && timeInMinutes < lunchEnd) {
+            return 'lunch-break';
+        }
+        // 盘中下午：13:00-15:00
+        else if (timeInMinutes >= lunchEnd && timeInMinutes < afternoonEnd) {
+            return 'afternoon-trading';
+        }
+        // 盘前：00:00-09:30
+        else if (timeInMinutes < morningStart) {
+            return 'pre-market';
+        }
+        // 盘后：15:00-23:59
+        else {
+            return 'after-market';
+        }
+    };
+
+    /**
+     * 获取时间标签样式（根据交易时段）
+     * @param {string} period - 交易时段
+     * @returns {Object} Chakra UI 样式对象
+     */
+    const getTimeLabelStyle = (period) => {
+        switch (period) {
+            case 'pre-market':
+                // 盘前：粉红色系（浅红）
+                return {
+                    bg: useColorModeValue('pink.50', 'pink.900'),
+                    borderColor: useColorModeValue('pink.300', 'pink.500'),
+                    textColor: useColorModeValue('pink.600', 'pink.300'),
+                };
+            case 'morning-trading':
+            case 'afternoon-trading':
+                // 盘中：红色系（强烈，表示交易活跃）
+                return {
+                    bg: useColorModeValue('red.50', 'red.900'),
+                    borderColor: useColorModeValue('red.400', 'red.500'),
+                    textColor: useColorModeValue('red.700', 'red.300'),
+                };
+            case 'lunch-break':
+                // 午休：灰色系（中性）
+                return {
+                    bg: useColorModeValue('gray.100', 'gray.800'),
+                    borderColor: useColorModeValue('gray.400', 'gray.500'),
+                    textColor: useColorModeValue('gray.600', 'gray.400'),
+                };
+            case 'after-market':
+                // 盘后：橙色系（暖色但区别于盘中红色）
+                return {
+                    bg: useColorModeValue('orange.50', 'orange.900'),
+                    borderColor: useColorModeValue('orange.400', 'orange.500'),
+                    textColor: useColorModeValue('orange.600', 'orange.300'),
+                };
+            default:
+                return {
+                    bg: useColorModeValue('gray.100', 'gray.800'),
+                    borderColor: useColorModeValue('gray.400', 'gray.500'),
+                    textColor: useColorModeValue('gray.600', 'gray.400'),
+                };
+        }
+    };
+
+    /**
+     * 获取交易时段文字标签
+     * @param {string} period - 交易时段
+     * @returns {string} 时段文字标签
+     */
+    const getPeriodLabel = (period) => {
+        switch (period) {
+            case 'pre-market':
+                return '盘前';
+            case 'morning-trading':
+            case 'afternoon-trading':
+                return '盘中';
+            case 'lunch-break':
+                return '午休';
+            case 'after-market':
+                return '盘后';
+            default:
+                return '';
+        }
+    };
+
+    /**
+     * 根据平均涨幅计算背景色（分级策略）
+     * @param {number} avgChange - 平均涨跌幅
+     * @returns {string} Chakra UI 颜色值
+     */
+    const getChangeBasedBgColor = (avgChange) => {
+        // 转换为数字类型（处理可能的字符串类型数据）
+        const numChange = Number(avgChange);
+
+        // 🔍 调试日志：排查背景色计算问题
+        console.log('📊 [背景色计算]', {
+            rawValue: avgChange,
+            numValue: numChange,
+            type: typeof avgChange,
+            isNull: avgChange == null,
+            isNaN: isNaN(numChange),
+            title: event.title.substring(0, 30) + '...'
+        });
+
+        // 如果没有涨跌幅数据或转换失败，使用默认的奇偶行背景
+        if (avgChange == null || isNaN(numChange)) {
+            return index % 2 === 0 ? cardBg : useColorModeValue('gray.50', 'gray.750');
+        }
+
+        // 根据涨跌幅分级返回背景色
+        if (numChange >= 5) {
+            return useColorModeValue('red.100', 'red.900');
+        } else if (numChange >= 3) {
+            return useColorModeValue('red.100', 'red.800');
+        } else if (numChange > 0) {
+            return useColorModeValue('red.50', 'red.700');
+        } else if (numChange > -3) {
+            return useColorModeValue('green.50', 'green.700');
+        } else if (numChange > -5) {
+            return useColorModeValue('green.100', 'green.800');
+        } else {
+            return useColorModeValue('green.100', 'green.900');
+        }
+    };
+
+    // 获取当前事件的交易时段、样式和文字标签
+    const tradingPeriod = getTradingPeriod(event.created_at);
+    const timeLabelStyle = getTimeLabelStyle(tradingPeriod);
+    const periodLabel = getPeriodLabel(tradingPeriod);
 
     return (
-        <VStack align="stretch" spacing={2} w="full">
-            {/* 时间标签 - 在卡片上方 */}
-            <Box
-                {...(timelineStyle.bgGradient ? { bgGradient: timelineStyle.bgGradient } : { bg: timelineStyle.bg })}
-                borderWidth={timelineStyle.borderWidth}
-                borderColor={timelineStyle.borderColor}
-                borderRadius="md"
-                px={3}
-                py={1.5}
-                textAlign="center"
-                boxShadow={timelineStyle.boxShadow}
-                transition="all 0.3s ease"
-            >
-                <Text
-                    fontSize="xs"
-                    fontWeight="bold"
-                    color={timelineStyle.textColor}
-                    lineHeight="1.3"
-                >
-                    {moment(event.created_at).format('YYYY-MM-DD HH:mm')}
-                </Text>
-            </Box>
+        <VStack align="stretch" spacing={2} w="100%" pt={3}>
+            
 
             {/* 事件卡片 */}
             <Card
                 position="relative"
                 bg={isSelected
                     ? useColorModeValue('blue.50', 'blue.900')
-                    : (index % 2 === 0 ? cardBg : useColorModeValue('gray.50', 'gray.750'))
+                    : getChangeBasedBgColor(event.related_avg_chg)
                 }
                 borderWidth={isSelected ? "2px" : "1px"}
                 borderColor={isSelected
@@ -92,7 +215,7 @@ const DynamicNewsEventCard = ({
                 }
                 borderRadius="md"
                 boxShadow={isSelected ? "lg" : "sm"}
-                overflow="hidden"
+                // overflow="hidden"
                 _hover={{
                     boxShadow: 'xl',
                     transform: 'translateY(-2px)',
@@ -103,72 +226,42 @@ const DynamicNewsEventCard = ({
                 onClick={() => onEventClick?.(event)}
             >
                 <CardBody p={3}>
-                    {/* 左上角：重要性矩形角标（镂空边框样式） */}
-                    <Popover trigger="hover" placement="right" isLazy>
-                        <PopoverTrigger>
-                            <Box
-                                position="absolute"
-                                top={0}
-                                left={0}
-                                zIndex={1}
-                                bg="transparent"
-                                color={importance.badgeBg}
-                                borderWidth="2px"
-                                borderColor={importance.badgeBg}
-                                fontSize="11px"
-                                fontWeight="bold"
-                                px={1.5}
-                                py={0.5}
-                                minW="auto"
-                                display="flex"
-                                alignItems="center"
-                                justifyContent="center"
-                                lineHeight="1"
-                                borderBottomRightRadius="md"
-                                cursor="help"
-                            >
-                                {importance.label}
-                            </Box>
-                        </PopoverTrigger>
-                        <Portal>
-                            <PopoverContent width="auto" maxW="350px">
-                                <PopoverArrow />
-                                <PopoverBody p={3}>
-                                    <VStack align="stretch" spacing={2}>
-                                        <Text fontSize="sm" fontWeight="bold" mb={1}>
-                                            重要性等级说明
-                                        </Text>
-                                        {getAllImportanceLevels().map(item => (
-                                            <HStack key={item.level} spacing={2} align="flex-start">
-                                                <Box
-                                                    w="20px"
-                                                    h="20px"
-                                                    borderWidth="2px"
-                                                    borderColor={item.badgeBg}
-                                                    color={item.badgeBg}
-                                                    fontSize="9px"
-                                                    fontWeight="bold"
-                                                    display="flex"
-                                                    alignItems="center"
-                                                    justifyContent="center"
-                                                    borderRadius="sm"
-                                                    flexShrink={0}
-                                                >
-                                                    {item.level}
-                                                </Box>
-                                                <Text fontSize="xs" flex={1}>
-                                                    <Text as="span" fontWeight="bold">
-                                                        {item.label}：
-                                                    </Text>
-                                                    {item.description}
-                                                </Text>
-                                            </HStack>
-                                        ))}
-                                    </VStack>
-                                </PopoverBody>
-                            </PopoverContent>
-                        </Portal>
-                    </Popover>
+                    {/* 左上角：重要性标签 */}
+                    <ImportanceBadge importance={event.importance} position={{ top:-1, left: 0}} />
+
+                    {/* 时间标签 - 在卡片上方，宽度自适应，左对齐 */}
+                    <Box
+                        bg={timeLabelStyle.bg}
+                        borderWidth="2px"
+                        borderColor={timeLabelStyle.borderColor}
+                        borderRadius="md"
+                        px={0.5}
+                        py={0.5}
+                        width="fit-content"
+                        alignSelf="flex-start"
+                        boxShadow="sm"
+                        transition="all 0.3s ease"
+                        position="absolute"
+                        top={-2}
+                        left={8}
+                    >
+                        <Text
+                            fontSize="xs"
+                            fontWeight="bold"
+                            color={timeLabelStyle.textColor}
+                            lineHeight="1.3"
+                        >
+                            {moment(event.created_at).format('YYYY-MM-DD HH:mm')}
+                            {periodLabel && (
+                                <>
+                                    {' • '}
+                                    <Text as="span" fontWeight="extrabold">
+                                        {periodLabel}
+                                    </Text>
+                                </>
+                            )}
+                        </Text>
+                    </Box>
 
                     {/* 右上角：关注按钮 */}
                     <Box position="absolute" top={2} right={2} zIndex={1}>
@@ -182,31 +275,46 @@ const DynamicNewsEventCard = ({
                     </Box>
 
                     <VStack align="stretch" spacing={2}>
-                        {/* 标题 - 最多两行，添加上边距避免与角标重叠 */}
-                        <Box
-                            cursor="pointer"
-                            onClick={(e) => onTitleClick?.(e, event)}
-                            mt={1}
-                            paddingRight="10px"
+                        {/* 标题 - 固定两行高度，保持卡片高度一致 */}
+                        <Tooltip
+                            label={event.title}
+                            placement="top"
+                            hasArrow
+                            bg="gray.700"
+                            color="white"
+                            fontSize="sm"
+                            p={2}
+                            borderRadius="md"
                         >
-                            <Text
-                                fontSize="md"
-                                fontWeight="semibold"
-                                color={linkColor}
-                                lineHeight="1.4"
-                                noOfLines={2}
-                                _hover={{ textDecoration: 'underline' }}
+                            <Box
+                                cursor="pointer"
+                                onClick={(e) => onTitleClick?.(e, event)}
+                                mt={1}
+                                paddingRight="10px"
+                                minHeight="2.8em"
+                                display="flex"
+                                alignItems="center"
                             >
-                                {event.title}
-                            </Text>
+                                <Text
+                                    fontSize="md"
+                                    fontWeight="semibold"
+                                    color={linkColor}
+                                    lineHeight="1.4"
+                                    noOfLines={2}
+                                    _hover={{ textDecoration: 'underline' }}
+                                >
+                                    {event.title}
+                                </Text>
+                            </Box>
+                        </Tooltip>
+                        <Box position='relative'>
+                            {/* 第二行：涨跌幅数据 */}
+                            <StockChangeIndicators
+                                avgChange={event.related_avg_chg}
+                                maxChange={event.related_max_chg}
+                                weekChange={event.related_week_chg}
+                            />
                         </Box>
-
-                        {/* 第二行：涨跌幅数据 */}
-                        <StockChangeIndicators
-                            avgChange={event.related_avg_chg}
-                            maxChange={event.related_max_chg}
-                            weekChange={event.related_week_chg}
-                        />
                     </VStack>
                 </CardBody>
             </Card>

src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js

@@ -0,0 +1,156 @@
+// src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
+// 横向布局的动态新闻事件卡片组件（时间在左，卡片在右）
+
+import React from 'react';
+import {
+    HStack,
+    Card,
+    CardBody,
+    VStack,
+    Box,
+    Text,
+    Tooltip,
+    useColorModeValue,
+} from '@chakra-ui/react';
+import { getImportanceConfig } from '../../../../constants/importanceLevels';
+
+// 导入子组件
+import ImportanceBadge from './ImportanceBadge';
+import EventTimeline from './EventTimeline';
+import EventFollowButton from './EventFollowButton';
+import StockChangeIndicators from '../../../../components/StockChangeIndicators';
+
+/**
+ * 横向布局的动态新闻事件卡片组件
+ * @param {Object} props
+ * @param {Object} props.event - 事件对象
+ * @param {number} props.index - 事件索引
+ * @param {boolean} props.isFollowing - 是否已关注
+ * @param {number} props.followerCount - 关注数
+ * @param {boolean} props.isSelected - 是否被选中
+ * @param {Function} props.onEventClick - 卡片点击事件
+ * @param {Function} props.onTitleClick - 标题点击事件
+ * @param {Function} props.onToggleFollow - 切换关注事件
+ * @param {Object} props.timelineStyle - 时间轴样式配置
+ * @param {string} props.borderColor - 边框颜色
+ * @param {string} props.indicatorSize - 涨幅指标尺寸 ('default' | 'comfortable' | 'large')
+ */
+const HorizontalDynamicNewsEventCard = ({
+    event,
+    index,
+    isFollowing,
+    followerCount,
+    isSelected = false,
+    onEventClick,
+    onTitleClick,
+    onToggleFollow,
+    timelineStyle,
+    borderColor,
+    indicatorSize = 'comfortable',
+}) => {
+    const importance = getImportanceConfig(event.importance);
+
+    // 所有 useColorModeValue 必须在顶层调用
+    const cardBg = useColorModeValue('white', 'gray.800');
+    const cardBgAlt = useColorModeValue('gray.50', 'gray.750');
+    const selectedBg = useColorModeValue('blue.50', 'blue.900');
+    const selectedBorderColor = useColorModeValue('blue.500', 'blue.400');
+    const linkColor = useColorModeValue('blue.600', 'blue.400');
+
+    return (
+        <HStack align="stretch" spacing={3} w="full">
+            {/* 左侧时间轴 */}
+            <EventTimeline
+                createdAt={event.created_at}
+                timelineStyle={timelineStyle}
+                borderColor={borderColor}
+                minHeight="60px"
+            />
+
+            {/* 右侧事件卡片 */}
+            <Card
+                flex="1"
+                position="relative"
+                bg={isSelected
+                    ? selectedBg
+                    : (index % 2 === 0 ? cardBg : cardBgAlt)
+                }
+                borderWidth={isSelected ? "2px" : "1px"}
+                borderColor={isSelected
+                    ? selectedBorderColor
+                    : borderColor
+                }
+                borderRadius="md"
+                boxShadow={isSelected ? "lg" : "sm"}
+                overflow="hidden"
+                _hover={{
+                    boxShadow: 'xl',
+                    transform: 'translateY(-2px)',
+                    borderColor: isSelected ? 'blue.600' : importance.color,
+                }}
+                transition="all 0.3s ease"
+                cursor="pointer"
+                onClick={() => onEventClick?.(event)}
+            >
+                <CardBody p={3} pb={2}>
+                    {/* 左上角：重要性标签 */}
+                    <ImportanceBadge importance={event.importance} />
+
+                    {/* 右上角：关注按钮 */}
+                    <Box position="absolute" top={2} right={2} zIndex={1}>
+                        <EventFollowButton
+                            isFollowing={isFollowing}
+                            followerCount={followerCount}
+                            onToggle={() => onToggleFollow?.(event.id)}
+                            size="xs"
+                            showCount={false}
+                        />
+                    </Box>
+
+                    <VStack align="stretch" spacing={1.5}>
+                        {/* 标题 - 最多两行，hover 显示完整内容 */}
+                        <Tooltip
+                            label={event.title}
+                            placement="top"
+                            hasArrow
+                            bg="gray.700"
+                            color="white"
+                            fontSize="sm"
+                            p={2}
+                            borderRadius="md"
+                            isDisabled={event.title.length < 40}
+                        >
+                            <Box
+                                cursor="pointer"
+                                onClick={(e) => onTitleClick?.(e, event)}
+                                mt={1}
+                                paddingRight="10px"
+                            >
+                                <Text
+                                    fontSize="md"
+                                    fontWeight="semibold"
+                                    color={linkColor}
+                                    lineHeight="1.4"
+                                    noOfLines={2}
+                                    _hover={{ textDecoration: 'underline' }}
+                                >
+                                    {event.title}
+                                </Text>
+                            </Box>
+                        </Tooltip>
+
+                        {/* 第二行：涨跌幅数据 */}
+                        <StockChangeIndicators
+                            avgChange={event.related_avg_chg}
+                            maxChange={event.related_max_chg}
+                            weekChange={event.related_week_chg}
+                            size={indicatorSize}
+                        />
+                    </VStack>
+                </CardBody>
+            </Card>
+        </HStack>
+    );
+};
+
+export default HorizontalDynamicNewsEventCard;

src/views/Community/components/EventCard/ImportanceBadge.js

@@ -0,0 +1,95 @@
+// src/views/Community/components/EventCard/ImportanceBadge.js
+// 重要性标签通用组件
+
+import React from 'react';
+import {
+    Box,
+    Text,
+    HStack,
+    VStack,
+    Popover,
+    PopoverTrigger,
+    PopoverContent,
+    PopoverBody,
+    PopoverArrow,
+    Portal,
+} from '@chakra-ui/react';
+import { getImportanceConfig, getAllImportanceLevels } from '../../../../constants/importanceLevels';
+
+/**
+ * 重要性标签组件（实心样式）
+ * @param {Object} props
+ * @param {string} props.importance - 重要性等级 ('S' | 'A' | 'B' | 'C')
+ * @param {Object} props.position - 定位配置 { top, left, right, bottom }，默认为 { top: 0, left: 0 }
+ */
+const ImportanceBadge = ({ importance, position = { top: 0, left: 0 } }) => {
+    const importanceConfig = getImportanceConfig(importance);
+
+    return (
+        <Popover trigger="hover" placement="right" isLazy>
+            <PopoverTrigger>
+                <Box
+                    position="absolute"
+                    top={position.top}
+                    left={position.left}
+                    right={position.right}
+                    bottom={position.bottom}
+                    zIndex={1}
+                    bg={importanceConfig.badgeBg}
+                    color={importanceConfig.badgeColor || 'white'}
+                    fontSize="11px"
+                    fontWeight="bold"
+                    w="30px"
+                    h="15px"
+                    borderRadius="xl"
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    cursor="help"
+                    boxShadow="sm"
+                >
+                    {importanceConfig.label}
+                </Box>
+            </PopoverTrigger>
+            <Portal>
+                <PopoverContent width="auto" maxW="350px">
+                    <PopoverArrow />
+                    <PopoverBody p={3}>
+                        <VStack align="stretch" spacing={2}>
+                            <Text fontSize="sm" fontWeight="bold" mb={1}>
+                                重要性等级说明
+                            </Text>
+                            {getAllImportanceLevels().map(item => (
+                                <HStack key={item.level} spacing={2} align="center">
+                                    <Box
+                                        w="30px"
+                                        h="15px"
+                                        bg={item.badgeBg}
+                                        color={item.badgeColor || 'white'}
+                                        fontSize="9px"
+                                        fontWeight="bold"
+                                        display="flex"
+                                        alignItems="center"
+                                        justifyContent="center"
+                                        borderRadius="lg"
+                                        flexShrink={0}
+                                    >
+                                        {item.label}
+                                    </Box>
+                                    <Text fontSize="xs" flex={1}>
+                                        <Text as="span" fontWeight="bold">
+                                            {item.label}：
+                                        </Text>
+                                        {item.description}
+                                    </Text>
+                                </HStack>
+                            ))}
+                        </VStack>
+                    </PopoverBody>
+                </PopoverContent>
+            </Portal>
+        </Popover>
+    );
+};
+
+export default ImportanceBadge;

src/views/Community/components/HotEvents.js

@@ -2,10 +2,19 @@
 import React, { useState } from 'react';
 import { Card, Badge, Tag, Empty, Carousel, Tooltip } from 'antd';
 import { ArrowUpOutlined, ArrowDownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { useNavigate } from 'react-router-dom';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure
+} from '@chakra-ui/react';
 import moment from 'moment';
 import './HotEvents.css';
-import defaultEventImage from '../../../assets/img/default-event.jpg'
+import defaultEventImage from '../../../assets/img/default-event.jpg';
+import DynamicNewsDetailPanel from './DynamicNewsDetail';
 
 // 自定义箭头组件
 const CustomArrow = ({ className, style, onClick, direction }) => {
@@ -27,8 +36,9 @@ const CustomArrow = ({ className, style, onClick, direction }) => {
 };
 
 const HotEvents = ({ events, onPageChange }) => {
-    const navigate = useNavigate();
     const [currentSlide, setCurrentSlide] = useState(0);
+    const { isOpen: isModalOpen, onOpen: onModalOpen, onClose: onModalClose } = useDisclosure();
+    const [modalEvent, setModalEvent] = useState(null);
 
     const renderPriceChange = (value) => {
         if (value === null || value === undefined) {
@@ -56,8 +66,9 @@ const HotEvents = ({ events, onPageChange }) => {
         return colors[importance] || 'default';
     };
 
-    const handleCardClick = (eventId) => {
-        navigate(`/event-detail/${eventId}`);
+    const handleCardClick = (event) => {
+        setModalEvent(event);
+        onModalOpen();
     };
 
     // 计算总页数
@@ -117,7 +128,7 @@ const HotEvents = ({ events, onPageChange }) => {
                             <Card
                                 hoverable
                                 className="hot-event-card"
-                                onClick={() => handleCardClick(event.id)}
+                                onClick={() => handleCardClick(event)}
                                 cover={
                                     <div className="event-cover">
                                         <img
@@ -173,6 +184,22 @@ const HotEvents = ({ events, onPageChange }) => {
                     <Empty description="暂无热点信息" />
                 </Card>
             )}
+
+            {/* 事件详情弹窗 - 使用 Chakra UI Modal（与平铺模式一致） */}
+            {isModalOpen ? (
+                <Modal isOpen={isModalOpen} onClose={onModalClose} size="6xl" scrollBehavior="inside">
+                    <ModalOverlay />
+                    <ModalContent>
+                        <ModalHeader>
+                            {modalEvent?.title || '事件详情'}
+                        </ModalHeader>
+                        <ModalCloseButton />
+                        <ModalBody pb={6}>
+                            {modalEvent && <DynamicNewsDetailPanel event={modalEvent} />}
+                        </ModalBody>
+                    </ModalContent>
+                </Modal>
+            ): null}
         </div>
     );
 };

src/views/Community/components/PopularKeywords.js

@@ -122,7 +122,7 @@ const PopularKeywords = ({ onKeywordClick, keywords: propKeywords }) => {
                         wrap
                         style={{
                             alignItems: 'center',
-                            maxHeight: '62px', // 约两行的高度 (每行约28-30px)
+                            maxHeight: '29px', // 约两行的高度 (每行约28-30px)
                             overflow: 'hidden',
                             paddingRight: '90px' // 为右侧按钮留出空间
                         }}
@@ -166,13 +166,13 @@ const PopularKeywords = ({ onKeywordClick, keywords: propKeywords }) => {
                                 }}>
                                     {formatChangePct(item.change_pct)}
                                 </span>
-                                <span style={{
+                                {/* <span style={{
                                     marginLeft: 3,
                                     fontSize: 10,
                                     opacity: 0.75
-                                }}>
-                                    ({item.count}股)
-                                </span>
+                                }}> */}
+                                    {/* ({item.count}股) */}
+                                {/* </span> */}
                             </Tag>
                         ))}
                     </Space>
@@ -184,7 +184,7 @@ const PopularKeywords = ({ onKeywordClick, keywords: propKeywords }) => {
                         onClick={handleMoreClick}
                         style={{
                             position: 'absolute',
-                            bottom: 0,
+                            top: 0,
                             right: 0,
                             fontSize: 12,
                             padding: '0 4px',

src/views/Community/components/StockDetailPanel.js

@@ -63,11 +63,11 @@ function StockDetailPanel({ visible, event, onClose }) {
     refreshQuotes
   } = useEventStocks(event?.id, event?.start_time);
 
-  // 自选股管理
+  // 自选股管理（只在 Drawer 可见时加载）
   const {
     watchlistSet,
     toggleWatchlist
-  } = useWatchlist();
+  } = useWatchlist(visible);
 
   // 实时监控管理
   const {

src/views/Community/components/StockDetailPanel/components/MiniTimelineChart.js

@@ -165,8 +165,8 @@ const MiniTimelineChart = React.memo(function MiniTimelineChart({ stockCode, eve
     return (
         <div
             style={{
-                width: 140,
-                height: 40,
+                width: '100%',
+                height: 30,
                 cursor: onClick ? 'pointer' : 'default'
             }}
             onClick={onClick}

src/views/Community/components/StockDetailPanel/hooks/useEventStocks.js

@@ -17,9 +17,11 @@ import { logger } from '../../../../../utils/logger';
  *
  * @param {string} eventId - 事件ID
  * @param {string} eventTime - 事件时间
+ * @param {Object} options - 配置选项
+ * @param {boolean} options.autoLoad - 是否自动加载数据（默认true）
  * @returns {Object} 事件数据和加载状态
  */
-export const useEventStocks = (eventId, eventTime) => {
+export const useEventStocks = (eventId, eventTime, { autoLoad = true } = {}) => {
   const dispatch = useDispatch();
 
   // 从 Redux 获取数据
@@ -45,22 +47,43 @@ export const useEventStocks = (eventId, eventTime) => {
   // 加载状态
   const loading = useSelector(state => state.stock.loading, shallowEqual);
 
-  // 加载所有数据
+  // 拆分加载函数 - 相关股票数据
+  const loadStocksData = useCallback(() => {
+    if (!eventId) return;
+    logger.debug('useEventStocks', '加载股票数据', { eventId });
+    dispatch(fetchEventStocks({ eventId }));
+  }, [dispatch, eventId]);
+
+  // 拆分加载函数 - 历史事件数据
+  const loadHistoricalData = useCallback(() => {
+    if (!eventId) return;
+    logger.debug('useEventStocks', '加载历史事件数据', { eventId });
+    dispatch(fetchHistoricalEvents({ eventId }));
+    dispatch(fetchExpectationScore({ eventId }));
+  }, [dispatch, eventId]);
+
+  // 拆分加载函数 - 传导链分析数据
+  const loadChainAnalysis = useCallback(() => {
+    if (!eventId) return;
+    logger.debug('useEventStocks', '加载传导链数据', { eventId });
+    dispatch(fetchChainAnalysis({ eventId }));
+  }, [dispatch, eventId]);
+
+  // 加载所有数据（保留用于兼容性）
   const loadAllData = useCallback(() => {
     if (!eventId) {
       logger.warn('useEventStocks', 'eventId 为空，跳过数据加载');
       return;
     }
 
-    logger.debug('useEventStocks', '开始加载事件数据', { eventId });
+    logger.debug('useEventStocks', '开始加载事件所有数据', { eventId });
 
     // 并发加载所有数据
-    dispatch(fetchEventStocks({ eventId }));
     dispatch(fetchEventDetail({ eventId }));
-    dispatch(fetchHistoricalEvents({ eventId }));
-    dispatch(fetchChainAnalysis({ eventId }));
-    dispatch(fetchExpectationScore({ eventId }));
-  }, [dispatch, eventId]);
+    loadStocksData();
+    loadHistoricalData();
+    loadChainAnalysis();
+  }, [dispatch, eventId, loadStocksData, loadHistoricalData, loadChainAnalysis]);
 
   // 强制刷新所有数据
   const refreshAllData = useCallback(() => {
@@ -88,12 +111,16 @@ export const useEventStocks = (eventId, eventTime) => {
     dispatch(fetchStockQuotes({ codes, eventTime }));
   }, [dispatch, stocks, eventTime]);
 
-  // 自动加载事件数据
+  // 自动加载事件数据（可通过 autoLoad 参数控制）
   useEffect(() => {
-    if (eventId) {
+    if (eventId && autoLoad) {
+      logger.debug('useEventStocks', '自动加载已启用，加载所有数据', { eventId, autoLoad });
       loadAllData();
+    } else if (eventId && !autoLoad) {
+      logger.debug('useEventStocks', '自动加载已禁用，等待手动触发', { eventId, autoLoad });
+      // 禁用自动加载时，不加载任何数据
     }
-  }, [eventId]); // 修复：只依赖 eventId，避免无限循环
+  }, [eventId, autoLoad, loadAllData]); // 添加 loadAllData 依赖
 
   // 自动加载行情数据
   useEffect(() => {
@@ -131,6 +158,9 @@ export const useEventStocks = (eventId, eventTime) => {
 
     // 方法
     loadAllData,
+    loadStocksData,        // 新增：加载股票数据
+    loadHistoricalData,    // 新增：加载历史事件数据
+    loadChainAnalysis,     // 新增：加载传导链数据（重命名避免冲突）
     refreshAllData,
     refreshQuotes
   };

src/views/Community/components/StockDetailPanel/hooks/useWatchlist.js

@@ -9,9 +9,10 @@ import { logger } from '../../../../../utils/logger';
  * 自选股管理 Hook
  * 封装自选股的加载、添加、移除逻辑
  *
+ * @param {boolean} shouldLoad - 是否立即加载自选股列表（默认 true）
  * @returns {Object} 自选股数据和操作方法
  */
-export const useWatchlist = () => {
+export const useWatchlist = (shouldLoad = true) => {
   const dispatch = useDispatch();
 
   // 从 Redux 获取自选股列表
@@ -23,10 +24,13 @@ export const useWatchlist = () => {
     return new Set(watchlistArray);
   }, [watchlistArray]);
 
-  // 初始化时加载自选股列表
+  // 初始化时加载自选股列表（只在 shouldLoad 为 true 时）
   useEffect(() => {
-    dispatch(loadWatchlist());
-  }, [dispatch]);
+    if (shouldLoad) {
+      logger.debug('useWatchlist', '条件加载自选股列表', { shouldLoad });
+      dispatch(loadWatchlist());
+    }
+  }, [dispatch, shouldLoad]);
 
   /**
    * 检查股票是否在自选股中

src/views/Community/components/TradingTimeFilter.js

@@ -0,0 +1,362 @@
+// src/views/Community/components/TradingTimeFilter.js
+// 交易时段智能筛选组件
+import React, { useState, useMemo, useEffect } from 'react';
+import { Space, Button, Tag, Tooltip, DatePicker, Popover } from 'antd';
+import { ClockCircleOutlined, CalendarOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+import locale from 'antd/es/date-picker/locale/zh_CN';
+import { logger } from '../../../utils/logger';
+
+const { RangePicker } = DatePicker;
+
+/**
+ * 交易时段筛选组件
+ * @param {string} value - 当前选中的 key（受控）
+ * @param {Function} onChange - 时间范围变化回调 (timeConfig) => void
+ */
+const TradingTimeFilter = ({ value, onChange }) => {
+  const [selectedKey, setSelectedKey] = useState(null);
+  const [customRangeVisible, setCustomRangeVisible] = useState(false);
+  const [customRange, setCustomRange] = useState(null);
+
+  // 监听外部 value 变化，同步内部状态
+  useEffect(() => {
+    if (value === null || value === undefined) {
+      // 外部重置，清空内部状态
+      setSelectedKey(null);
+      setCustomRange(null);
+      logger.debug('TradingTimeFilter', '外部重置，清空选中状态');
+    } else {
+      // 外部选中值变化，同步内部状态
+      setSelectedKey(value);
+      logger.debug('TradingTimeFilter', '外部value变化，同步内部状态', { value });
+    }
+  }, [value]);
+
+  // 获取当前交易时段
+  const getCurrentTradingSession = () => {
+    const now = dayjs();
+    const hour = now.hour();
+    const minute = now.minute();
+    const currentMinutes = hour * 60 + minute;
+
+    // 转换为分钟数便于比较
+    const PRE_MARKET_END = 9 * 60 + 30;      // 09:30
+    const MORNING_END = 11 * 60 + 30;        // 11:30
+    const AFTERNOON_START = 13 * 60;         // 13:00
+    const MARKET_CLOSE = 15 * 60;            // 15:00
+
+    if (currentMinutes < PRE_MARKET_END) {
+      return 'pre-market';  // 盘前
+    } else if (currentMinutes < MORNING_END) {
+      return 'morning';     // 早盘
+    } else if (currentMinutes < AFTERNOON_START) {
+      return 'lunch';       // 午休
+    } else if (currentMinutes < MARKET_CLOSE) {
+      return 'afternoon';   // 午盘
+    } else {
+      return 'after-hours'; // 盘后
+    }
+  };
+
+  // 获取时间范围配置
+  const timeRangeConfig = useMemo(() => {
+    const session = getCurrentTradingSession();
+    const now = dayjs();
+
+    // 今日关键时间点
+    const today0930 = now.hour(9).minute(30).second(0);
+    const today1130 = now.hour(11).minute(30).second(0);
+    const today1300 = now.hour(13).minute(0).second(0);
+    const today1500 = now.hour(15).minute(0).second(0);
+    const todayStart = now.startOf('day');
+    const todayEnd = now.endOf('day');
+
+    // 昨日关键时间点
+    const yesterday1500 = now.subtract(1, 'day').hour(15).minute(0).second(0);
+    const yesterdayStart = now.subtract(1, 'day').startOf('day');
+    const yesterdayEnd = now.subtract(1, 'day').endOf('day');
+
+    // 动态按钮配置（根据时段返回不同按钮数组）
+    const dynamicButtonsMap = {
+      'pre-market': [
+        {
+          key: 'latest',
+          label: '最新',
+          range: [yesterday1500, today0930],
+          tooltip: '盘前资讯',
+          timeHint: `昨日 15:00 - 今日 09:30`,
+          color: 'purple',
+          type: 'precise'
+        }
+      ],
+      'morning': [
+        {
+          key: 'latest',
+          label: '最新',
+          range: [today0930, now],
+          tooltip: '早盘最新',
+          timeHint: `今日 09:30 - ${now.format('HH:mm')}`,
+          color: 'green',
+          type: 'precise'
+        },
+        {
+          key: 'intraday',
+          label: '盘中',
+          range: [today0930, today1500],
+          tooltip: '盘中交易时段',
+          timeHint: '今日 09:30 - 15:00',
+          color: 'blue',
+          type: 'precise'
+        }
+      ],
+      'lunch': [
+        {
+          key: 'latest',
+          label: '最新',
+          range: [today1130, now],
+          tooltip: '午休时段',
+          timeHint: `今日 11:30 - ${now.format('HH:mm')}`,
+          color: 'orange',
+          type: 'precise'
+        }
+      ],
+      'afternoon': [
+        {
+          key: 'latest',
+          label: '最新',
+          range: [today1300, now],
+          tooltip: '午盘最新',
+          timeHint: `今日 13:00 - ${now.format('HH:mm')}`,
+          color: 'green',
+          type: 'precise'
+        },
+        {
+          key: 'intraday',
+          label: '盘中',
+          range: [today0930, today1500],
+          tooltip: '盘中交易时段',
+          timeHint: '今日 09:30 - 15:00',
+          color: 'blue',
+          type: 'precise'
+        },
+        {
+          key: 'afternoon',
+          label: '午盘',
+          range: [today1300, today1500],
+          tooltip: '午盘交易时段',
+          timeHint: '今日 13:00 - 15:00',
+          color: 'cyan',
+          type: 'precise'
+        }
+      ],
+      'after-hours': [
+        {
+          key: 'latest',
+          label: '最新',
+          range: [today1500, now],
+          tooltip: '盘后最新',
+          timeHint: `今日 15:00 - ${now.format('HH:mm')}`,
+          color: 'red',
+          type: 'precise'
+        }
+      ]
+    };
+
+    // 固定按钮配置（始终显示）
+    const fixedButtons = [
+      {
+        key: 'morning-fixed',
+        label: '早盘',
+        range: [today0930, today1130],
+        tooltip: '早盘交易时段',
+        timeHint: '09:30 - 11:30',
+        color: 'geekblue',
+        type: 'precise'
+      },
+      {
+        key: 'today',
+        label: '今日全天',
+        range: [todayStart, todayEnd],
+        tooltip: '今日全天',
+        timeHint: '今日 00:00 - 23:59',
+        color: 'purple',
+        type: 'precise'
+      },
+      {
+        key: 'yesterday',
+        label: '昨日',
+        range: [yesterdayStart, yesterdayEnd],
+        tooltip: '昨日全天',
+        timeHint: '昨日 00:00 - 23:59',
+        color: 'orange',
+        type: 'precise'
+      },
+      {
+        key: 'week',
+        label: '近一周',
+        range: 7,  // 天数
+        tooltip: '过去7个交易日',
+        timeHint: '过去7天',
+        color: 'magenta',
+        type: 'recent_days'
+      },
+      {
+        key: 'month',
+        label: '近一月',
+        range: 30,  // 天数
+        tooltip: '过去30个交易日',
+        timeHint: '过去30天',
+        color: 'volcano',
+        type: 'recent_days'
+      }
+    ];
+
+    return {
+      dynamic: dynamicButtonsMap[session] || [],
+      fixed: fixedButtons
+    };
+  }, []); // 空依赖，首次渲染时计算
+
+  // 按钮点击处理
+  const handleButtonClick = (config) => {
+    logger.debug('TradingTimeFilter', '按钮点击', {
+      config,
+      currentSelectedKey: selectedKey,
+      willToggle: selectedKey === config.key
+    });
+
+    if (selectedKey === config.key) {
+      // 取消选中
+      setSelectedKey(null);
+      onChange(null);
+      logger.debug('TradingTimeFilter', '取消选中', { key: config.key });
+    } else {
+      // 选中
+      setSelectedKey(config.key);
+      const timeConfig = {
+        range: config.range,
+        type: config.type,
+        label: config.label,
+        key: config.key
+      };
+      onChange(timeConfig);
+      logger.debug('TradingTimeFilter', '选中新按钮', { timeConfig });
+    }
+  };
+
+  // 自定义范围确认
+  const handleCustomRangeOk = (dates) => {
+    if (dates && dates.length === 2) {
+      setCustomRange(dates);
+      setSelectedKey('custom');
+      setCustomRangeVisible(false);
+
+      onChange({
+        range: dates,
+        type: 'precise',
+        label: `${dates[0].format('MM-DD HH:mm')} - ${dates[1].format('MM-DD HH:mm')}`,
+        key: 'custom'
+      });
+
+      logger.debug('TradingTimeFilter', '自定义范围', {
+        start: dates[0].format('YYYY-MM-DD HH:mm:ss'),
+        end: dates[1].format('YYYY-MM-DD HH:mm:ss')
+      });
+    }
+  };
+
+  // 渲染按钮
+  const renderButton = (config) => {
+    const isSelected = selectedKey === config.key;
+
+    // 构建完整的 tooltip 提示（文字 + 时间）
+    const fullTooltip = config.timeHint ? `${config.tooltip} · ${config.timeHint}` : config.tooltip;
+
+    if (isSelected) {
+      // 选中状态：只显示 Tag，不显示下方时间
+      return (
+        <Tooltip title={fullTooltip} key={config.key}>
+          <Tag
+            color={config.color}
+            style={{ margin: 0, fontSize: 13, padding: '2px 8px', cursor: 'pointer' }}
+            onClick={() => handleButtonClick(config)}
+          >
+            <ClockCircleOutlined style={{ marginRight: 4 }} />
+            {config.label}
+          </Tag>
+        </Tooltip>
+      );
+    } else {
+      // 未选中状态：普通按钮
+      return (
+        <Tooltip title={fullTooltip} key={config.key}>
+          <Button
+            size="small"
+            onClick={() => handleButtonClick(config)}
+            style={{ fontSize: 12 }}
+          >
+            {config.label}
+          </Button>
+        </Tooltip>
+      );
+    }
+  };
+
+  // "更多时间" 按钮内容
+  const customRangeContent = (
+    <div style={{ padding: 8 }}>
+      <RangePicker
+        showTime={{ format: 'HH:mm' }}
+        format="YYYY-MM-DD HH:mm"
+        locale={locale}
+        placeholder={['开始时间', '结束时间']}
+        onChange={handleCustomRangeOk}
+        value={customRange}
+        style={{ marginBottom: 8 }}
+      />
+      <div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
+        支持精确到分钟的时间范围选择
+      </div>
+    </div>
+  );
+
+  return (
+    <Space wrap size={[8, 8]} style={{ display: 'flex', alignItems: 'flex-start' }}>
+      {/* 动态按钮（根据时段显示多个） */}
+      {timeRangeConfig.dynamic.map(config => renderButton(config))}
+
+      {/* 固定按钮（始终显示） */}
+      {timeRangeConfig.fixed.map(config => renderButton(config))}
+
+      {/* 更多时间 - 自定义范围 */}
+      <Popover
+        content={customRangeContent}
+        title="选择自定义时间范围"
+        trigger="click"
+        open={customRangeVisible}
+        onOpenChange={setCustomRangeVisible}
+        placement="bottomLeft"
+      >
+        {selectedKey === 'custom' ? (
+          <Tooltip
+            title={customRange ? `自定义时间范围 · ${customRange[0].format('MM-DD HH:mm')} - ${customRange[1].format('MM-DD HH:mm')}` : '自定义时间范围'}
+          >
+            <Tag color="gold" style={{ margin: 0, fontSize: 13, padding: '2px 8px', cursor: 'pointer' }}>
+              <CalendarOutlined style={{ marginRight: 4 }} />
+              {customRange ? `${customRange[0].format('MM-DD HH:mm')} - ${customRange[1].format('MM-DD HH:mm')}` : '自定义'}
+            </Tag>
+          </Tooltip>
+        ) : (
+          <Tooltip title="自定义时间范围">
+            <Button size="small" icon={<CalendarOutlined />} style={{ fontSize: 12 }}>
+              更多时间
+            </Button>
+          </Tooltip>
+        )}
+      </Popover>
+    </Space>
+  );
+};
+
+export default TradingTimeFilter;

src/views/Community/components/UnifiedSearchBox.js

@@ -2,29 +2,29 @@
 // 搜索组件：三行布局（主搜索 + 热门概念 + 筛选区）
 import React, { useState, useMemo, useEffect, useCallback, useRef } from 'react';
 import {
-    Card, Input, Cascader, Button, Space, Tag, AutoComplete, DatePicker, Select as AntSelect
+    Card, Input, Cascader, Button, Space, Tag, AutoComplete, Select as AntSelect
 } from 'antd';
 import {
     SearchOutlined, CloseCircleOutlined, StockOutlined
 } from '@ant-design/icons';
-import moment from 'moment';
 import dayjs from 'dayjs';
-import locale from 'antd/es/date-picker/locale/zh_CN';
 import debounce from 'lodash/debounce';
 import { useSelector, useDispatch } from 'react-redux';
 import { fetchIndustryData, selectIndustryData, selectIndustryLoading } from '../../../store/slices/industrySlice';
 import { stockService } from '../../../services/stockService';
 import { logger } from '../../../utils/logger';
 import PopularKeywords from './PopularKeywords';
+import TradingTimeFilter from './TradingTimeFilter';
 
-const { RangePicker } = DatePicker;
 const { Option } = AntSelect;
 
 const UnifiedSearchBox = ({
     onSearch,
     onSearchFocus,
     popularKeywords = [],
-    filters = {}
+    filters = {},
+    mode,          // 显示模式（如：vertical, horizontal 等）
+    pageSize       // 每页显示数量
 }) => {
 
     // 其他状态
@@ -34,8 +34,8 @@ const UnifiedSearchBox = ({
 
     // 筛选条件状态
     const [sort, setSort] = useState('new'); // 排序方式
-    const [importance, setImportance] = useState('all'); // 重要性
-    const [dateRange, setDateRange] = useState(null); // 日期范围
+    const [importance, setImportance] = useState([]); // 重要性（数组，支持多选）
+    const [tradingTimeRange, setTradingTimeRange] = useState(null); // 交易时段筛选
 
     // ✅ 本地输入状态 - 管理用户的实时输入
     const [inputValue, setInputValue] = useState('');
@@ -129,23 +129,26 @@ const UnifiedSearchBox = ({
     useEffect(() => {
         if (!filters) return;
 
-        // 初始化排序和重要性
+        // 初始化排序
         if (filters.sort) setSort(filters.sort);
-        if (filters.importance) setImportance(filters.importance);
 
-        // ✅ 初始化日期范围
-        if (filters.date_range) {
-            const parts = filters.date_range.split(' 至 ');
-            if (parts.length === 2) {
-                setDateRange([dayjs(parts[0]), dayjs(parts[1])]);
-                logger.debug('UnifiedSearchBox', '初始化日期范围', {
-                    date_range: filters.date_range
-                });
-            }
+        // 初始化重要性（字符串解析为数组）
+        if (filters.importance) {
+            const importanceArray = filters.importance === 'all'
+                ? []  // 'all' 对应空数组（不显示任何选中）
+                : filters.importance.split(',').map(v => v.trim()).filter(Boolean);
+            setImportance(importanceArray);
+            logger.debug('UnifiedSearchBox', '初始化重要性', {
+                filters_importance: filters.importance,
+                importanceArray
+            });
+        } else {
+            setImportance([]);
         }
 
         // ✅ 初始化行业分类（需要 industryData 加载完成）
-        if (filters.industry_code && industryData && industryData.length > 0) {
+        // ⚠️ 只在 industryValue 为空时才从 filters 初始化，避免用户选择后被覆盖
+        if (filters.industry_code && industryData && industryData.length > 0 && (!industryValue || industryValue.length === 0)) {
             const path = findIndustryPath(filters.industry_code, industryData);
             if (path) {
                 setIndustryValue(path);
@@ -154,6 +157,10 @@ const UnifiedSearchBox = ({
                     path
                 });
             }
+        } else if (!filters.industry_code && industryValue && industryValue.length > 0) {
+            // 如果 filters 中没有行业代码，但本地有值，清空本地值
+            setIndustryValue([]);
+            logger.debug('UnifiedSearchBox', '清空行业分类（filters中无值）');
         }
 
         // ✅ 同步 filters.q 到输入框显示值
@@ -163,7 +170,54 @@ const UnifiedSearchBox = ({
             // 如果 filters 中没有搜索关键词,清空输入框
             setInputValue('');
         }
-    }, [filters.sort, filters.importance, filters.date_range, filters.industry_code, filters.q, industryData, findIndustryPath]);
+
+        // ✅ 初始化时间筛选（从 filters 中恢复）
+        // ⚠️ 只在 tradingTimeRange 为空时才从 filters 初始化，避免用户选择后被覆盖
+        const hasTimeInFilters = filters.start_date || filters.end_date || filters.recent_days;
+
+        if (hasTimeInFilters && (!tradingTimeRange || !tradingTimeRange.key)) {
+            // 根据参数推断按钮 key
+            let inferredKey = 'custom';
+            let inferredLabel = '';
+
+            if (filters.recent_days) {
+                // 推断是否是预设按钮
+                if (filters.recent_days === '7') {
+                    inferredKey = 'week';
+                    inferredLabel = '近一周';
+                } else if (filters.recent_days === '30') {
+                    inferredKey = 'month';
+                    inferredLabel = '近一月';
+                } else {
+                    inferredLabel = `近${filters.recent_days}天`;
+                }
+            } else if (filters.start_date && filters.end_date) {
+                inferredLabel = `${dayjs(filters.start_date).format('MM-DD HH:mm')} - ${dayjs(filters.end_date).format('MM-DD HH:mm')}`;
+            }
+
+            // 从 filters 重建 tradingTimeRange 状态
+            const timeRange = {
+                start_date: filters.start_date || '',
+                end_date: filters.end_date || '',
+                recent_days: filters.recent_days || '',
+                label: inferredLabel,
+                key: inferredKey
+            };
+            setTradingTimeRange(timeRange);
+            logger.debug('UnifiedSearchBox', '初始化时间筛选', {
+                filters_time: {
+                    start_date: filters.start_date,
+                    end_date: filters.end_date,
+                    recent_days: filters.recent_days
+                },
+                tradingTimeRange: timeRange
+            });
+        } else if (!hasTimeInFilters && tradingTimeRange) {
+            // 如果 filters 中没有时间参数，但本地有值，清空本地值
+            setTradingTimeRange(null);
+            logger.debug('UnifiedSearchBox', '清空时间筛选（filters中无值）');
+        }
+    }, [filters.sort, filters.importance, filters.industry_code, filters.q, filters.start_date, filters.end_date, filters.recent_days, industryData, findIndustryPath, industryValue, tradingTimeRange]);
 
     // AutoComplete 搜索股票（模糊匹配 code 或 name）
     const handleSearch = (value) => {
@@ -218,114 +272,69 @@ const UnifiedSearchBox = ({
         }
     };
 
-    // ✅ 日期范围变化（使用防抖）
-    const handleDateRangeChange = (dates) => {
-        logger.debug('UnifiedSearchBox', '【1/5】日期范围值改变', {
-            oldValue: dateRange,
-            newValue: dates
-        });
-        setDateRange(dates);
-
-        // ⚠️ 注意:setState是异步的,此时dateRange仍是旧值
-        logger.debug('UnifiedSearchBox', '【2/5】调用buildFilterParams前的状态', {
-            dateRange: dateRange, // 旧值
-            sort: sort,
-            importance: importance,
-            industryValue: industryValue
-        });
-
-        // 使用防抖搜索（需要从新值推导参数）
-        const params = {
-            ...buildFilterParams(),
-            date_range: dates ? `${dates[0].format('YYYY-MM-DD')} 至 ${dates[1].format('YYYY-MM-DD')}` : ''
-        };
-        logger.debug('UnifiedSearchBox', '【3/5】buildFilterParams返回的参数', params);
-
-        if (debouncedSearchRef.current) {
-            logger.debug('UnifiedSearchBox', '【4/5】调用防抖函数(300ms延迟)');
-            debouncedSearchRef.current(params);
-        }
-    };
-
-    // ✅ 重要性变化（使用防抖）
+    // ✅ 重要性变化（立即执行）- 支持多选
     const handleImportanceChange = (value) => {
-        logger.debug('UnifiedSearchBox', '【1/5】重要性值改变', {
+        logger.debug('UnifiedSearchBox', '重要性值改变', {
             oldValue: importance,
             newValue: value
         });
+
         setImportance(value);
 
-        // ⚠️ 注意:setState是异步的,此时importance仍是旧值
-        logger.debug('UnifiedSearchBox', '【2/5】调用buildFilterParams前的状态', {
-            importance: importance, // 旧值
-            sort: sort,
-            dateRange: dateRange,
-            industryValue: industryValue
-        });
-
-        // 使用防抖搜索
-        const params = buildFilterParams({ importance: value });
-        logger.debug('UnifiedSearchBox', '【3/5】buildFilterParams返回的参数', params);
-
+        // 取消之前的防抖搜索
         if (debouncedSearchRef.current) {
-            logger.debug('UnifiedSearchBox', '【4/5】调用防抖函数(300ms延迟)');
-            debouncedSearchRef.current(params);
+            debouncedSearchRef.current.cancel();
         }
+
+        // 转换为逗号分隔字符串传给后端（空数组表示"全部"）
+        const importanceStr = value.length === 0 ? 'all' : value.join(',');
+
+        // 立即触发搜索
+        const params = buildFilterParams({ importance: importanceStr });
+        logger.debug('UnifiedSearchBox', '重要性改变，立即触发搜索', params);
+
+        triggerSearch(params);
     };
 
-    // ✅ 排序变化（使用防抖）
+    // ✅ 排序变化（立即触发搜索）
     const handleSortChange = (value) => {
-        logger.debug('UnifiedSearchBox', '【1/5】排序值改变', {
+        logger.debug('UnifiedSearchBox', '排序值改变', {
             oldValue: sort,
             newValue: value
         });
         setSort(value);
 
-        // ⚠️ 注意:setState是异步的,此时sort仍是旧值
-        logger.debug('UnifiedSearchBox', '【2/5】调用buildFilterParams前的状态', {
-            sort: sort, // 旧值
-            importance: importance,
-            dateRange: dateRange,
-            industryValue: industryValue
-        });
-
-        // 使用防抖搜索
-        const params = buildFilterParams({ sort: value });
-        logger.debug('UnifiedSearchBox', '【3/5】buildFilterParams返回的参数', params);
-
+        // 取消之前的防抖搜索
         if (debouncedSearchRef.current) {
-            logger.debug('UnifiedSearchBox', '【4/5】调用防抖函数(300ms延迟)');
-            debouncedSearchRef.current(params);
+            debouncedSearchRef.current.cancel();
         }
+
+        // 立即触发搜索
+        const params = buildFilterParams({ sort: value });
+        logger.debug('UnifiedSearchBox', '排序改变，立即触发搜索', params);
+        triggerSearch(params);
     };
 
-    // ✅ 行业分类变化（使用防抖）
+    // ✅ 行业分类变化（立即触发搜索）
     const handleIndustryChange = (value) => {
-        logger.debug('UnifiedSearchBox', '【1/5】行业分类值改变', {
+        logger.debug('UnifiedSearchBox', '行业分类值改变', {
             oldValue: industryValue,
             newValue: value
         });
         setIndustryValue(value);
 
-        // ⚠️ 注意:setState是异步的,此时industryValue仍是旧值
-        logger.debug('UnifiedSearchBox', '【2/5】调用buildFilterParams前的状态', {
-            industryValue: industryValue, // 旧值
-            sort: sort,
-            importance: importance,
-            dateRange: dateRange
-        });
-
-        // 使用防抖搜索 (需要从新值推导参数)
-        const params = {
-            ...buildFilterParams(),
-            industry_code: value?.[value.length - 1] || ''
-        };
-        logger.debug('UnifiedSearchBox', '【3/5】buildFilterParams返回的参数', params);
-
+        // 取消之前的防抖搜索
         if (debouncedSearchRef.current) {
-            logger.debug('UnifiedSearchBox', '【4/5】调用防抖函数(300ms延迟)');
-            debouncedSearchRef.current(params);
+            debouncedSearchRef.current.cancel();
         }
+
+        // 立即触发搜索
+        const params = buildFilterParams({
+            industry_code: value?.[value.length - 1] || ''
+        });
+        logger.debug('UnifiedSearchBox', '行业改变，立即触发搜索', params);
+
+        triggerSearch(params);
     };
 
     // ✅ 热门概念点击处理（立即搜索，不使用防抖） - 更新输入框并触发搜索
@@ -349,6 +358,46 @@ const UnifiedSearchBox = ({
         triggerSearch(params);
     };
 
+    // ✅ 交易时段筛选变化（立即触发搜索）
+    const handleTradingTimeChange = (timeConfig) => {
+        if (!timeConfig) {
+            // 清空筛选
+            setTradingTimeRange(null);
+            const params = buildFilterParams({
+                start_date: '',
+                end_date: '',
+                recent_days: ''
+            });
+            triggerSearch(params);
+            return;
+        }
+
+        const { range, type, label, key } = timeConfig;
+        let params = {};
+
+        if (type === 'recent_days') {
+            // 近一周/近一月使用 recent_days
+            params.recent_days = range;
+            params.start_date = '';
+            params.end_date = '';
+        } else {
+            // 其他使用 start_date + end_date
+            params.start_date = range[0].format('YYYY-MM-DD HH:mm:ss');
+            params.end_date = range[1].format('YYYY-MM-DD HH:mm:ss');
+            params.recent_days = '';
+        }
+
+        setTradingTimeRange({ ...params, label, key });
+
+        // 立即触发搜索
+        const searchParams = buildFilterParams({ ...params, mode });
+        logger.debug('UnifiedSearchBox', '交易时段筛选变化，立即触发搜索', {
+            timeConfig,
+            params: searchParams
+        });
+        triggerSearch(searchParams);
+    };
+
     // 主搜索（点击搜索按钮或回车）
     const handleMainSearch = () => {
         // 取消之前的防抖
@@ -382,66 +431,108 @@ const UnifiedSearchBox = ({
             currentState: {
                 sort,
                 importance,
-                dateRange,
                 industryValue,
-                'filters.q': filters.q
+                'filters.q': filters.q,
+                mode,
+                pageSize
             }
         });
 
+        // 处理排序参数 - 将 returns_avg/returns_week 转换为 sort=returns + return_type
+        const sortValue = overrides.sort ?? sort;
+        let actualSort = sortValue;
+        let returnType;
+
+        if (sortValue === 'returns_avg') {
+            actualSort = 'returns';
+            returnType = 'avg';
+        } else if (sortValue === 'returns_week') {
+            actualSort = 'returns';
+            returnType = 'week';
+        }
+
+        // 处理重要性参数：数组转换为逗号分隔字符串
+        let importanceValue = overrides.importance ?? importance;
+        if (Array.isArray(importanceValue)) {
+            importanceValue = importanceValue.length === 0
+                ? 'all'
+                : importanceValue.join(',');
+        }
+
         const result = {
             // 基础参数（overrides 优先级高于本地状态）
-            sort: overrides.sort ?? sort,
-            importance: overrides.importance ?? importance,
-            date_range: dateRange ? `${dateRange[0].format('YYYY-MM-DD')} 至 ${dateRange[1].format('YYYY-MM-DD')}` : '',
-            page: 1,
+            sort: actualSort,
+            importance: importanceValue,
+            
 
             // 搜索参数: 统一使用 q 参数进行搜索(话题/股票/关键词)
             q: (overrides.q ?? filters.q) ?? '',
             // 行业代码: 取选中路径的最后一级(最具体的行业代码)
             industry_code: overrides.industry_code ?? (industryValue?.[industryValue.length - 1] || ''),
 
+            // 交易时段筛选参数
+            start_date: overrides.start_date ?? (tradingTimeRange?.start_date || ''),
+            end_date: overrides.end_date ?? (tradingTimeRange?.end_date || ''),
+            recent_days: overrides.recent_days ?? (tradingTimeRange?.recent_days || ''),
+
             // 最终 overrides 具有最高优先级
-            ...overrides
+            ...overrides,
+            page: 1,
+            per_page: overrides.mode === 'four-row' ? 30: 10
         };
 
+        // 删除可能来自 overrides 的旧 per_page 值（将由 pageSize 重新设置）
+        delete result.per_page;
+
+        // 添加 return_type 参数（如果需要）
+        if (returnType) {
+            result.return_type = returnType;
+        }
+
+        // 添加 mode 和 per_page 参数（如果提供了的话）
+        if (mode !== undefined && mode !== null) {
+            result.mode = mode;
+        }
+        if (pageSize !== undefined && pageSize !== null) {
+            result.per_page = pageSize;  // 后端实际使用的参数
+        }
+
         logger.debug('UnifiedSearchBox', '🔧 buildFilterParams - 输出结果', result);
         return result;
-    }, [sort, importance, dateRange, filters.q, industryValue]);
-
-    // ✅ 应用筛选（立即搜索，取消防抖）
-    const handleApplyFilters = () => {
-        // 取消之前的防抖搜索
-        if (debouncedSearchRef.current) {
-            debouncedSearchRef.current.cancel();
-        }
-
-        const params = buildFilterParams();
-        logger.debug('UnifiedSearchBox', '应用筛选,立即触发搜索', params);
-        triggerSearch(params);
-    };
+    }, [sort, importance, filters.q, industryValue, tradingTimeRange, mode, pageSize]);
 
     // ✅ 重置筛选 - 清空所有筛选器并触发搜索
     const handleReset = () => {
+        console.log('%c🔄 [重置] 开始重置筛选条件', 'color: #FF4D4F; font-weight: bold;');
+
         // 重置所有筛选器状态
         setInputValue('');        // 清空输入框
         setStockOptions([]);
         setIndustryValue([]);
         setSort('new');
-        setImportance('all');
-        setDateRange(null);
+        setImportance([]);        // 改为空数组
+        setTradingTimeRange(null); // 清空交易时段筛选
 
         // 输出重置后的完整参数
         const resetParams = {
             q: '',
             industry_code: '',
             sort: 'new',
-            importance: 'all',
-            date_range: '',
-            page: 1
+            importance: 'all',    // 传给后端时转为'all'
+            start_date: '',
+            end_date: '',
+            recent_days: '',
+            page: 1,
+            _forceRefresh: Date.now()  // 添加强制刷新标志，确保每次重置都触发更新
         };
 
+        console.log('%c🔄 [重置] 重置参数', 'color: #FF4D4F;', resetParams);
         logger.debug('UnifiedSearchBox', '重置筛选', resetParams);
+
+        console.log('%c🔄 [重置] 调用 onSearch', 'color: #FF4D4F;', typeof onSearch);
         onSearch(resetParams);
+
+        console.log('%c✅ [重置] 重置完成', 'color: #52C41A; font-weight: bold;');
     };
 
     // 生成已选条件标签（包含所有筛选条件） - 从 filters 和本地状态读取
@@ -454,35 +545,68 @@ const UnifiedSearchBox = ({
         }
 
         // 行业标签
-        if (industryValue && industryValue.length > 0) {
-            const industryLabel = industryValue.slice(1).join(' > ');
-            tags.push({ key: 'industry', label: `行业: ${industryLabel}` });
+        if (industryValue && industryValue.length > 0 && industryData) {
+            // 递归查找每个层级的 label
+            const findLabel = (code, data) => {
+                for (const item of data) {
+                    if (code.startsWith(item.value)) {
+                        if (item.value === code) {
+                            return item.label;
+                        } else {
+                            return findLabel(code, item.children);
+                        }
+                    }
+                }
+                return null;
+            };
+
+            // 只显示最后一级的 label
+            const lastLevelCode = industryValue[industryValue.length - 1];
+            const lastLevelLabel = findLabel(lastLevelCode, industryData);
+
+            tags.push({
+                key: 'industry',
+                label: `行业: ${lastLevelLabel}`
+            });
         }
 
-        // 日期范围标签
-        if (dateRange && dateRange.length === 2) {
-            const dateLabel = `${dateRange[0].format('YYYY-MM-DD')} 至 ${dateRange[1].format('YYYY-MM-DD')}`;
-            tags.push({ key: 'date_range', label: `日期: ${dateLabel}` });
+        // 交易时段筛选标签
+        if (tradingTimeRange?.label) {
+            tags.push({
+                key: 'trading_time',
+                label: `时间: ${tradingTimeRange.label}`
+            });
         }
 
-        // 重要性标签（排除默认值 'all'）
-        if (importance && importance !== 'all') {
-            tags.push({ key: 'importance', label: `重要性: ${importance}级` });
+        // 重要性标签（多选合并显示为单个标签）
+        if (importance && importance.length > 0) {
+            const importanceLabel = importance.map(imp => `${imp}级`).join(', ');
+            tags.push({ key: 'importance', label: `重要性: ${importanceLabel}` });
         }
 
         // 排序标签（排除默认值 'new'）
         if (sort && sort !== 'new') {
-            const sortLabel = sort === 'hot' ? '最热' : sort === 'importance' ? '重要性' : sort;
+            let sortLabel;
+            if (sort === 'hot') sortLabel = '最热';
+            else if (sort === 'importance') sortLabel = '重要性';
+            else if (sort === 'returns_avg') sortLabel = '平均收益率';
+            else if (sort === 'returns_week') sortLabel = '周收益率';
+            else sortLabel = sort;
             tags.push({ key: 'sort', label: `排序: ${sortLabel}` });
         }
 
         return tags;
-    }, [filters.q, industryValue, dateRange, importance, sort]);
+    }, [filters.q, industryValue, importance, sort, tradingTimeRange]);
 
     // ✅ 移除单个标签 - 构建新参数并触发搜索
     const handleRemoveTag = (key) => {
         logger.debug('UnifiedSearchBox', '移除标签', { key });
 
+        // 取消所有待执行的防抖搜索（避免旧的防抖覆盖删除操作）
+        if (debouncedSearchRef.current) {
+            debouncedSearchRef.current.cancel();
+        }
+
         if (key === 'search') {
             // 清除搜索关键词和输入框，立即触发搜索
             setInputValue('');  // 清空输入框
@@ -494,14 +618,18 @@ const UnifiedSearchBox = ({
             setIndustryValue([]);
             const params = buildFilterParams({ industry_code: '' });
             triggerSearch(params);
-        } else if (key === 'date_range') {
-            // 清除日期范围
-            setDateRange(null);
-            const params = buildFilterParams({ date_range: '' });
+        } else if (key === 'trading_time') {
+            // 清除交易时段筛选
+            setTradingTimeRange(null);
+            const params = buildFilterParams({
+                start_date: '',
+                end_date: '',
+                recent_days: ''
+            });
             triggerSearch(params);
         } else if (key === 'importance') {
-            // 重置重要性为默认值
-            setImportance('all');
+            // 重置重要性为空数组（传给后端为'all'）
+            setImportance([]);
             const params = buildFilterParams({ importance: 'all' });
             triggerSearch(params);
         } else if (key === 'sort') {
@@ -513,58 +641,12 @@ const UnifiedSearchBox = ({
     };
 
     return (
-        <Card>
-            {/* 第一行：主搜索框 */}
-            <Space.Compact style={{ width: '100%', marginBottom: 12 }} size="large">
-                <SearchOutlined style={{
-                    fontSize: 20,
-                    padding: '8px 12px',
-                    background: '#f5f5f5',
-                    borderRadius: '6px 0 0 6px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    color: '#666'
-                }} />
-                <AutoComplete
-                    value={inputValue}
-                    onChange={handleInputChange}
-                    onSearch={handleSearch}
-                    onSelect={handleStockSelect}
-                    onFocus={onSearchFocus}
-                    options={stockOptions}
-                    placeholder="请输入股票代码/股票名称/相关话题"
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                            handleMainSearch();
-                        }
-                    }}
-                    style={{ flex: 1 }}
-                    size="large"
-                    notFoundContent={inputValue && stockOptions.length === 0 ? "未找到匹配的股票" : null}
-                />
-                <Button
-                    type="primary"
-                    onClick={handleMainSearch}
-                    size="large"
-                    style={{ minWidth: 80 }}
-                >
-                    搜索
-                </Button>
-            </Space.Compact>
-
-            {/* 第二行：热门概念 */}
-            <div style={{ marginBottom: 12 }}>
-                <PopularKeywords
-                    keywords={popularKeywords}
-                    onKeywordClick={handleKeywordClick}
-                />
-            </div>
-
-            {/* 第三行：筛选器 + 排序 */}
+        <div style={{padding: '8px'}}>
+            {/* 第三行：行业 + 重要性 + 排序 */}
             <Space style={{ width: '100%', justifyContent: 'space-between' }} size="middle">
                 {/* 左侧：筛选器组 */}
-                <Space size="middle" wrap>
-                    <span style={{ fontSize: 14, color: '#666', fontWeight: 'bold' }}>筛选:</span>
+                <Space size="small" wrap>
+                    <span style={{ fontSize: 12, color: '#666', fontWeight: 'bold' }}>筛选:</span>
                     {/* 行业分类 */}
                     <Cascader
                         value={industryValue}
@@ -583,30 +665,22 @@ const UnifiedSearchBox = ({
                         expandTrigger="hover"
                         displayRender={(labels) => labels.join(' > ')}
                         disabled={industryLoading}
-                        style={{ width: 200 }}
-                        size="middle"
-                    />
-
-                    {/* 日期范围 */}
-                    <RangePicker
-                        value={dateRange}
-                        onChange={handleDateRangeChange}
-                        locale={locale}
-                        placeholder={['开始日期', '结束日期']}
-                        style={{ width: 240 }}
-                        size="middle"
+                        style={{ width: 160 }}
+                        size="small"
                     />
 
                     {/* 重要性 */}
                     <Space size="small">
-                        <span style={{ fontSize: 14, color: '#666' }}>重要性:</span>
+                        <span style={{ fontSize: 12, color: '#666' }}>重要性:</span>
                         <AntSelect
+                            mode="multiple"
                             value={importance}
                             onChange={handleImportanceChange}
-                            style={{ width: 100 }}
-                            size="middle"
+                            style={{ width: 120 }}
+                            size="small"
+                            placeholder="全部"
+                            maxTagCount={3}
                         >
-                            <Option value="all">全部</Option>
                             <Option value="S">S级</Option>
                             <Option value="A">A级</Option>
                             <Option value="B">B级</Option>
@@ -614,18 +688,61 @@ const UnifiedSearchBox = ({
                         </AntSelect>
                     </Space>
 
+                    {/* 搜索图标（可点击） + 搜索框 */}
+                    <Space.Compact style={{ flex: 1, minWidth: 250 }}>
+                        <SearchOutlined
+                            onClick={handleMainSearch}
+                            style={{
+                                fontSize: 14,
+                                padding: '5px 8px',
+                                background: '#e6f7ff',
+                                borderRadius: '6px 0 0 6px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                color: '#1890ff',
+                                cursor: 'pointer',
+                                transition: 'all 0.3s'
+                            }}
+                            onMouseEnter={(e) => {
+                                e.currentTarget.style.color = '#096dd9';
+                                e.currentTarget.style.background = '#bae7ff';
+                            }}
+                            onMouseLeave={(e) => {
+                                e.currentTarget.style.color = '#1890ff';
+                                e.currentTarget.style.background = '#e6f7ff';
+                            }}
+                        />
+                        <AutoComplete
+                            value={inputValue}
+                            onChange={handleInputChange}
+                            onSearch={handleSearch}
+                            onSelect={handleStockSelect}
+                            onFocus={onSearchFocus}
+                            options={stockOptions}
+                            placeholder="请输入股票代码/股票名称/相关话题"
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    handleMainSearch();
+                                }
+                            }}
+                            style={{ flex: 1 }}
+                            size="small"
+                            notFoundContent={inputValue && stockOptions.length === 0 ? "未找到匹配的股票" : null}
+                        />
+                    </Space.Compact>
+
                     {/* 重置按钮 - 现代化设计 */}
                     <Button
                         icon={<CloseCircleOutlined />}
                         onClick={handleReset}
-                        size="middle"
+                        size="small"
                         style={{
                             borderRadius: 6,
                             border: '1px solid #d9d9d9',
                             backgroundColor: '#fff',
                             color: '#666',
                             fontWeight: 500,
-                            padding: '4px 12px',
+                            padding: '4px 10px',
                             display: 'flex',
                             alignItems: 'center',
                             gap: 4,
@@ -653,36 +770,41 @@ const UnifiedSearchBox = ({
 
                 {/* 右侧：排序 */}
                 <Space size="small">
-                    <span style={{ fontSize: 14, color: '#666' }}>排序:</span>
+                    <span style={{ fontSize: 12, color: '#666' }}>排序:</span>
                     <AntSelect
                         value={sort}
                         onChange={handleSortChange}
-                        style={{ width: 120 }}
-                        size="middle"
+                        style={{ width: 100 }}
+                        size="small"
                     >
                         <Option value="new">最新</Option>
                         <Option value="hot">最热</Option>
                         <Option value="importance">重要性</Option>
+                        <Option value="returns_avg">平均收益率</Option>
+                        <Option value="returns_week">周收益率</Option>
                     </AntSelect>
                 </Space>
             </Space>
 
-            {/* 已选条件标签 */}
-            {filterTags.length > 0 && (
-                <Space size={[8, 8]} wrap style={{ marginTop: 12 }}>
-                    {filterTags.map(tag => (
-                        <Tag
-                            key={tag.key}
-                            closable
-                            onClose={() => handleRemoveTag(tag.key)}
-                            color="blue"
-                        >
-                            {tag.label}
-                        </Tag>
-                    ))}
-                </Space>
-            )}
-        </Card>
+            {/* 第一行：筛选 + 时间按钮 + 搜索图标 + 搜索框 */}
+            <Space wrap style={{ width: '100%', marginBottom: 4, marginTop: 6 }} size="middle">
+                <span style={{ fontSize: 14, color: '#666', fontWeight: 'bold' }}>时间筛选:</span>
+
+                {/* 交易时段筛选 */}
+                <TradingTimeFilter
+                    value={tradingTimeRange?.key || null}
+                    onChange={handleTradingTimeChange}
+                />
+            </Space>
+
+            {/* 第二行：热门概念 */}
+            <div style={{ marginTop: 2 }}>
+                <PopularKeywords
+                    keywords={popularKeywords}
+                    onKeywordClick={handleKeywordClick}
+                />
+            </div>
+        </div>
     );
 };
 

src/views/Community/hooks/useEventFilters.js

@@ -1,7 +1,7 @@
 // src/views/Community/hooks/useEventFilters.js
 // 事件筛选逻辑 Hook
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { logger } from '../../../utils/logger';
 import { usePostHogTrack } from '../../../hooks/usePostHogRedux';
@@ -24,85 +24,100 @@ export const useEventFilters = ({ navigate, onEventClick, eventTimelineRef } = {
     return {
       sort: searchParams.get('sort') || 'new',
       importance: searchParams.get('importance') || 'all',
-      date_range: searchParams.get('date_range') || '',
       q: searchParams.get('q') || '',
       industry_code: searchParams.get('industry_code') || '',
+      // 时间筛选参数（从 TradingTimeFilter 传递）
+      start_date: searchParams.get('start_date') || '',
+      end_date: searchParams.get('end_date') || '',
+      recent_days: searchParams.get('recent_days') || '',
       page: parseInt(searchParams.get('page') || '1', 10)
     };
   });
 
+  // 🔧 使用 ref 存储最新的 filters，避免 useCallback 依赖 filters 导致重新创建
+  const filtersRef = useRef(filters);
+  useEffect(() => {
+    filtersRef.current = filters;
+  }, [filters]);
+
   // 更新筛选参数 - 直接替换（由 UnifiedSearchBox 输出完整参数）
   const updateFilters = useCallback((newFilters) => {
+    // 🔧 从 ref 读取最新的 filters，避免依赖 filters 状态
+    const currentFilters = filtersRef.current;
+
     logger.debug('useEventFilters', '🔄 【接收到onSearch回调】updateFilters 接收到完整参数', {
       newFilters: newFilters,
-      oldFilters: filters,
+      oldFilters: currentFilters,
       timestamp: new Date().toISOString()
     });
 
     // 🎯 PostHog 追踪：搜索查询
-    if (newFilters.q !== filters.q && newFilters.q) {
+    if (newFilters.q !== currentFilters.q && newFilters.q) {
       track(RETENTION_EVENTS.SEARCH_QUERY_SUBMITTED, {
         query: newFilters.q,
         category: 'news',
-        previous_query: filters.q || null,
+        previous_query: currentFilters.q || null,
       });
     }
 
     // 🎯 PostHog 追踪：排序变化
-    if (newFilters.sort !== filters.sort) {
+    if (newFilters.sort !== currentFilters.sort) {
       track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
         filter_type: 'sort',
         filter_value: newFilters.sort,
-        previous_value: filters.sort,
+        previous_value: currentFilters.sort,
       });
     }
 
     // 🎯 PostHog 追踪：重要性筛选
-    if (newFilters.importance !== filters.importance) {
+    if (newFilters.importance !== currentFilters.importance) {
       track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
         filter_type: 'importance',
         filter_value: newFilters.importance,
-        previous_value: filters.importance,
+        previous_value: currentFilters.importance,
       });
     }
 
     // 🎯 PostHog 追踪：时间范围筛选
-    if (newFilters.date_range !== filters.date_range && newFilters.date_range) {
+    if (newFilters.date_range !== currentFilters.date_range && newFilters.date_range) {
       track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
         filter_type: 'date_range',
         filter_value: newFilters.date_range,
-        previous_value: filters.date_range || null,
+        previous_value: currentFilters.date_range || null,
       });
     }
 
     // 🎯 PostHog 追踪：行业筛选
-    if (newFilters.industry_code !== filters.industry_code && newFilters.industry_code) {
+    if (newFilters.industry_code !== currentFilters.industry_code && newFilters.industry_code) {
       track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
         filter_type: 'industry',
         filter_value: newFilters.industry_code,
-        previous_value: filters.industry_code || null,
+        previous_value: currentFilters.industry_code || null,
       });
     }
 
     setFilters(newFilters);
     logger.debug('useEventFilters', '✅ setFilters 已调用 (React异步更新中...)');
-  }, [filters, track]);
+  }, [track]);  // ✅ 只依赖 track，不依赖 filters
 
   // 处理分页变化
   const handlePageChange = useCallback((page) => {
+    // 🔧 从 ref 读取最新的 filters
+    const currentFilters = filtersRef.current;
+
     // 🎯 PostHog 追踪：翻页
     track(RETENTION_EVENTS.NEWS_LIST_VIEWED, {
       page,
       filters: {
-        sort: filters.sort,
-        importance: filters.importance,
-        has_query: !!filters.q,
+        sort: currentFilters.sort,
+        importance: currentFilters.importance,
+        has_query: !!currentFilters.q,
       },
     });
 
     // 保持现有筛选条件，只更新页码
-    updateFilters({ ...filters, page });
-  }, [filters, updateFilters, track]);
+    updateFilters({ ...currentFilters, page });
+  }, [updateFilters, track]);  // ✅ 移除 filters 依赖
 
   // 处理事件点击
   const handleEventClick = useCallback((event) => {

src/views/Community/index.js

@@ -5,8 +5,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import {
   fetchPopularKeywords,
   fetchHotEvents,
-  fetchDynamicNews,
-  selectDynamicNewsWithLoading
+  fetchDynamicNews
 } from '../../store/slices/communityDataSlice';
 import {
   Box,
@@ -17,7 +16,6 @@ import {
 // 导入组件
 import EventTimelineCard from './components/EventTimelineCard';
 import DynamicNewsCard from './components/DynamicNewsCard';
-import MarketReviewCard from './components/MarketReviewCard';
 import HotEventsSection from './components/HotEventsSection';
 import EventModals from './components/EventModals';
 
@@ -26,13 +24,6 @@ import { useEventData } from './hooks/useEventData';
 import { useEventFilters } from './hooks/useEventFilters';
 import { useCommunityEvents } from './hooks/useCommunityEvents';
 
-// 导入时间工具函数
-import {
-  getCurrentTradingTimeRange,
-  getMarketReviewTimeRange,
-  filterEventsByTimeRange
-} from '../../utils/tradingTimeUtils';
-
 import { logger } from '../../utils/logger';
 import { useNotification } from '../../contexts/NotificationContext';
 import { usePostHogTrack } from '../../hooks/usePostHogRedux';
@@ -47,13 +38,6 @@ const Community = () => {
 
   // Redux状态
   const { popularKeywords, hotEvents } = useSelector(state => state.communityData);
-  const {
-    data: allCachedEvents,
-    loading: dynamicNewsLoading,
-    error: dynamicNewsError,
-    total: dynamicNewsTotal,
-    cachedCount: dynamicNewsCachedCount
-  } = useSelector(selectDynamicNewsWithLoading);
 
   // Chakra UI hooks
   const bgColor = useColorModeValue('gray.50', 'gray.900');
@@ -82,21 +66,6 @@ const Community = () => {
 
   const { events, pagination, loading, lastUpdateTime } = useEventData(filters);
 
-  // 计算市场复盘的时间范围和过滤后的事件
-  const marketReviewData = useMemo(() => {
-    const timeRange = getMarketReviewTimeRange();
-    const filteredEvents = filterEventsByTimeRange(events, timeRange.startTime, timeRange.endTime);
-    logger.debug('Community', '市场复盘时间范围', {
-      description: timeRange.description,
-      rangeType: timeRange.rangeType,
-      eventCount: filteredEvents.length
-    });
-    return {
-      events: filteredEvents,
-      timeRange
-    };
-  }, [events]);
-
   // 加载热门关键词和热点事件（动态新闻由 DynamicNewsCard 内部管理）
   useEffect(() => {
     dispatch(fetchPopularKeywords());
@@ -183,17 +152,13 @@ const Community = () => {
   return (
     <Box minH="100vh" bg={bgColor}>
       {/* 主内容区域 */}
-      <Container ref={containerRef} maxW="container.xl" pt={6} pb={8}>
+      <Container ref={containerRef} maxW="1600px" pt={6} pb={8}>
         {/* 热点事件区域 */}
         <HotEventsSection events={hotEvents} />
 
         {/* 实时要闻·动态追踪 - 横向滚动 */}
         <DynamicNewsCard
           mt={6}
-          allCachedEvents={allCachedEvents}
-          loading={dynamicNewsLoading}
-          total={dynamicNewsTotal}
-          cachedCount={dynamicNewsCachedCount}
           filters={filters}
           popularKeywords={popularKeywords}
           lastUpdateTime={lastUpdateTime}
@@ -203,17 +168,6 @@ const Community = () => {
           onViewDetail={handleViewDetail}
         />
 
-        {/* 市场复盘 - 左右布局 */}
-        {/* <MarketReviewCard
-          mt={6}
-          events={marketReviewData.events}
-          loading={loading}
-          lastUpdateTime={lastUpdateTime}
-          onEventClick={handleEventClick}
-          onViewDetail={handleViewDetail}
-          onToggleFollow={() => {}}
-        /> */}
-
         {/* 实时事件 - 原纵向列表 */}
         {/* <EventTimelineCard
           ref={eventTimelineRef}
@@ -233,7 +187,7 @@ const Community = () => {
       </Container>
 
       {/* 事件弹窗 */}
-      <EventModals
+      {/* <EventModals
         eventModalState={{
           isOpen: !!selectedEvent,
           onClose: () => setSelectedEvent(null),
@@ -245,7 +199,7 @@ const Community = () => {
           event: selectedEventForStock,
           onClose: () => setSelectedEventForStock(null)
         }}
-      />
+      /> */}
     </Box>
   );
 };

src/views/EventDetail/components/HistoricalEvents.js

@@ -282,6 +282,14 @@ const HistoricalEvents = ({
                                             重要性: {event.importance}
                                         </Badge>
                                     )}
+                                    {event.avg_change_pct !== undefined && event.avg_change_pct !== null && (
+                                        <Badge
+                                            colorScheme={event.avg_change_pct > 0 ? 'red' : event.avg_change_pct < 0 ? 'green' : 'gray'}
+                                            size="sm"
+                                        >
+                                            涨幅: {event.avg_change_pct > 0 ? '+' : ''}{event.avg_change_pct.toFixed(2)}%
+                                        </Badge>
+                                    )}
                                 </HStack>
 
                                 {/* 事件描述 */}