feat: implement user auth, daily limits, and built-in Vmq payment gateway

.codebuddy/plans/Paper_Trading_项目初始化与开发_57815873.md

@@ -1,219 +0,0 @@
----
-name: Paper_Trading 项目初始化与开发
-overview: 根据 DEVELOPMENT_PLAN.md 文档，初始化并开发一个基于 Web 的A股历史行情回放与模拟交易应用，包含后端（FastAPI + DuckDB）和前端（Next.js + Lightweight Charts）的完整功能。
-design:
-  architecture:
-    framework: react
-    component: tdesign
-  styleKeywords:
-    - Dark Theme
-    - Financial Tech
-    - Data Visualization
-    - Professional Trading
-  fontSystem:
-    fontFamily: Roboto
-    heading:
-      size: 24px
-      weight: 600
-    subheading:
-      size: 16px
-      weight: 500
-    body:
-      size: 14px
-      weight: 400
-  colorSystem:
-    primary:
-      - "#1E88E5"
-      - "#42A5F5"
-    background:
-      - "#0D1421"
-      - "#1A2332"
-      - "#242F3D"
-    text:
-      - "#FFFFFF"
-      - "#B0BEC5"
-      - "#78909C"
-    functional:
-      - "#4CAF50"
-      - "#EF5350"
-      - "#FFC107"
-todos:
-  - id: init-project
-    content: 创建项目目录结构，编写 requirements.txt 和 frontend/package.json
-    status: completed
-  - id: database-module
-    content: 实现 backend/app/database.py，包含 init_db、upload_db 和单例连接
-    status: completed
-    dependencies:
-      - init-project
-  - id: sync-script
-    content: 编写 backend/scripts/sync_data.py，实现 AkShare 数据获取和入库逻辑
-    status: completed
-    dependencies:
-      - database-module
-  - id: backend-api
-    content: 开发 backend/app/main.py、api.py、core.py，实现盲盒选股和 K 线查询 API
-    status: completed
-    dependencies:
-      - sync-script
-  - id: frontend-setup
-    content: 初始化 Next.js 项目，配置 TypeScript、Tailwind CSS 和 next.config.mjs
-    status: completed
-    dependencies:
-      - init-project
-  - id: frontend-components
-    content: 开发 Chart 组件、TradePanel 组件和 Zustand Store
-    status: completed
-    dependencies:
-      - frontend-setup
-  - id: integration-deploy
-    content: 编写 Dockerfile，本地 Docker 构建测试
-    status: completed
-    dependencies:
-      - backend-api
-      - frontend-components
----
-
-## 产品概述
-
-StockReplay-A 是一款基于 Web 的 A 股历史行情回放与模拟交易应用，提供"盲盒式"选股训练，帮助用户在随机历史行情中验证交易策略，部署到 Hugging Face Spaces 实现零成本运行。
-
-## 核心功能
-
-- **盲盒式选股**：随机选择上市满3年的股票，随机起点，保证至少250个交易日数据，脱敏隐藏股票代码直到游戏结束
-- **K线回放**：使用 Lightweight Charts 展示K线图，前端逐根推进，模拟实盘体验
-- **模拟交易**：纯前端计算买卖逻辑，支持买入/卖出/下一根K线操作，记录交易历史和收益率
-- **数据持久化**：DuckDB 嵌入式存储 + Hugging Face Datasets 同步，解决 HF Space 重启数据丢失问题
-
-## 技术栈选型
-
-### 后端技术
-
-- **Python 3.11**：高性能异步支持
-- **FastAPI**：异步 API 框架
-- **DuckDB**：嵌入式 OLAP 数据库，单文件存储
-- **AkShare**：A股开源数据接口
-- **huggingface_hub**：Dataset 同步 SDK
-
-### 前端技术
-
-- **Next.js 14**：App Router 模式
-- **TypeScript**：严格类型检查
-- **Tailwind CSS**：Utility-first CSS
-- **Lightweight Charts**：TradingView 出品的 Canvas 渲染图表库
-- **Zustand**：轻量级状态管理
-
-### 部署架构
-
-- **Docker**：多阶段构建，前端构建静态资源后由 FastAPI 托管
-- **Hugging Face Spaces**：免费容器运行环境
-
-## 实现方案
-
-### 系统架构
-
-采用前后端分离的单体应用架构，通过 Docker 多阶段构建打包：
-
-1. Stage 1：构建 Next.js 静态资源（output: 'export'）
-2. Stage 2：FastAPI 后端 + 托管前端静态文件
-
-### 数据流设计
-
-```
-启动时 → hf_hub_download 下载 DuckDB 文件
-运行时 → FastAPI 读取 DuckDB 返回 K 线数据
-定时任务 → AkShare 增量更新 → upload_file 推送到 Dataset
-```
-
-### 盲盒选股算法
-
-1. 从 stock_list 筛选 list_date 早于3年前的股票
-2. 随机选取一只股票
-3. 随机选择起始点（确保剩余 >= 250 天）
-4. 返回后续 500 条 K 线数据（脱敏处理）
-
-### 模拟交易引擎
-
-纯前端 Zustand Store 管理：
-
-- 买入：计算成本均价、扣减现金、增加持仓
-- 卖出：按当前价结算、增加现金、清空持仓
-- 收益率：(现金 + 持仓市值 - 初始资金) / 初始资金
-
-## 目录结构
-
-```
-c:/python_project/Paper_Trading/
-├── backend/                          # Python 后端
-│   ├── app/
-│   │   ├── main.py                   # [NEW] FastAPI 入口，配置静态文件托管、CORS、生命周期事件
-│   │   ├── api.py                    # [NEW] 路由定义，实现 /api/health、/api/game/start、/api/kline、/api/admin/sync
-│   │   ├── core.py                   # [NEW] 核心业务逻辑，实现盲盒选股算法、K线数据查询
-│   │   └── database.py               # [NEW] DuckDB 管理模块，实现 init_db、upload_db、单例连接池
-│   ├── scripts/
-│   │   └── sync_data.py              # [NEW] 数据同步脚本，AkShare 获取 A 股列表和日线数据
-│   └── requirements.txt              # [NEW] Python 依赖：fastapi, uvicorn, duckdb, pandas, akshare, huggingface_hub
-├── frontend/                         # Next.js 前端
-│   ├── src/
-│   │   ├── app/
-│   │   │   ├── layout.tsx            # [NEW] 根布局，配置 Tailwind 和全局样式
-│   │   │   ├── page.tsx              # [NEW] 主页面，整合 Chart 和 TradePanel
-│   │   │   └── globals.css           # [NEW] 全局 CSS 样式
-│   │   ├── components/
-│   │   │   ├── Chart.tsx             # [NEW] Lightweight Charts 封装，支持 ResizeObserver
-│   │   │   └── TradePanel.tsx        # [NEW] 交易面板组件，买入/卖出/下一根K线交互
-│   │   ├── hooks/
-│   │   │   └── useGame.ts            # [NEW] 游戏逻辑 Hook，封装 startGame、nextCandle 等方法
-│   │   ├── store/
-│   │   │   └── gameStore.ts          # [NEW] Zustand Store，管理 cash、holdings、avgPrice、history 状态
-│   │   └── lib/
-│   │       └── api.ts                # [NEW] API 客户端，封装 fetch 请求
-│   ├── package.json                  # [NEW] 前端依赖配置
-│   ├── tsconfig.json                 # [NEW] TypeScript 配置
-│   ├── tailwind.config.ts            # [NEW] Tailwind CSS 配置
-│   ├── next.config.mjs               # [NEW] Next.js 配置，output: 'export'
-│   └── postcss.config.mjs            # [NEW] PostCSS 配置
-├── Dockerfile                        # [NEW] 多阶段构建配置
-└── README.md                         # [MODIFY] 项目说明文档
-```
-
-## 实现要点
-
-### 数据库持久化
-
-- 启动时检查 `/tmp/stock_data.duckdb` 是否存在，不存在则从 HF Dataset 下载
-- 数据更新后立即调用 `upload_file` 推送到 Dataset Repo
-- 使用环境变量 `HF_TOKEN`、`DATASET_REPO_ID` 配置认证
-
-### 性能优化
-
-- DuckDB 使用列式存储，索引优化查询速度
-- 前端使用 Canvas 渲染（Lightweight Charts），避免 DOM 重绘开销
-- K 线数据分批加载，避免一次性传输大量数据
-
-### 错误处理
-
-- API 返回标准错误格式 `{ "error": "message" }`
-- 前端全局错误边界捕获渲染错误
-- 数据同步失败时记录日志但不中断服务
-
-## 设计风格
-
-采用现代金融科技风格，深色主题为主，强调数据可视化和专业交易体验。使用 React + TypeScript + Tailwind CSS + TDesign 组件库构建。
-
-## 页面规划
-
-### 主页面（游戏页面）
-
-分为四个核心区块：
-
-1. **顶部导航栏**：Logo、游戏状态、收益率显示
-2. **K线图表区**：Lightweight Charts 全屏展示，支持缩放和十字光标
-3. **交易面板区**：资金余额、持仓信息、买入/卖出按钮、数量输入框
-4. **底部控制栏**：下一根K线、重新开始、揭示答案按钮
-
-## 交互设计
-
-- K线推进时有平滑动画效果
-- 交易按钮点击有即时反馈
-- 持仓变化时数字有高亮闪烁效果

backend/app/api.py

@@ -10,6 +10,7 @@ from datetime import datetime, timedelta
 from typing import Optional
 
 from fastapi import APIRouter, HTTPException, Header, Query, Depends, Request
+from fastapi.responses import HTMLResponse
 from pydantic import BaseModel
 from sqlalchemy.orm import Session
 
@@ -27,8 +28,17 @@ from .database_user import (
     get_user_by_token,
     verify_vmq_signature,
     extend_vip_membership,
+    get_daily_usage,
+    increment_daily_usage,
+    FREE_DAILY_LIMIT,
+    create_payment_order,
+    sign_vmq_create_payload,
+    match_pending_payment_order,
+    register_user,
 )
 
+VMQ_GATEWAY_URL = os.getenv("VMQ_GATEWAY_URL", "")
+
 # 导入同步函数
 import sys
 sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
@@ -83,6 +93,32 @@ class VipStatusResponse(BaseModel):
     vip_expire_at: Optional[str]
 
 
+class CreatePaymentRequest(BaseModel):
+    type: int = 2  # 1: 支付宝, 2: 微信 (默认为2)
+
+class CreatePaymentResponse(BaseModel):
+    order_id: str
+    pay_url: str
+    price: float
+    type: int
+    param: str
+    sign: str
+    is_mock: bool
+
+
+class CreatePaymentRequest(BaseModel):
+    type: int = 2  # 1: 支付宝, 2: 微信 (默认为2)
+
+class CreatePaymentResponse(BaseModel):
+    order_id: str
+    pay_url: str
+    price: float
+    type: int
+    param: str
+    sign: str
+    is_mock: bool
+
+
 def _get_token_from_header(authorization: Optional[str]) -> Optional[str]:
     if not authorization:
         return None
@@ -149,10 +185,7 @@ async def register(payload: RegisterRequest, db: Session = Depends(get_user_db))
     if exists:
         raise HTTPException(status_code=400, detail="用户名已存在")
 
-    user = User(username=username, password_hash=hash_password(payload.password))
-    db.add(user)
-    db.commit()
-    db.refresh(user)
+    user = register_user(db, username, hash_password(payload.password))
 
     token = create_session_token()
     session = UserSession(
@@ -201,6 +234,22 @@ async def vip_status(current_user: User = Depends(get_current_user), db: Session
     return VipStatusResponse(is_vip=vip["is_vip"], vip_expire_at=vip["vip_expire_at"])
 
 
+@router.post("/v1/auth/logout")
+async def logout(
+    current_user: User = Depends(get_current_user),
+    authorization: Optional[str] = Header(None, alias="Authorization"),
+    db: Session = Depends(get_user_db),
+):
+    """退出登录 - 删除当前 session token"""
+    token = _get_token_from_header(authorization)
+    if token:
+        session_row = db.get(UserSession, token)
+        if session_row:
+            db.delete(session_row)
+            db.commit()
+    return {"status": "ok"}
+
+
 @router.post("/v1/payment/callback")
 async def payment_callback(request: Request, db: Session = Depends(get_user_db)):
     """
@@ -257,31 +306,259 @@ async def payment_callback(request: Request, db: Session = Depends(get_user_db))
     }
 
 
+@router.post("/v1/payment/create", response_model=CreatePaymentResponse)
+async def create_payment(
+    payload: CreatePaymentRequest,
+    request: Request,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_user_db)
+):
+    """创建支付订单"""
+    # 价格配置 (后续可移至数据库或配置)
+    price = 9.90  
+    
+    # 1. 创建本地订单
+    order_id = create_payment_order(db, current_user.id, price, payload.type)
+    
+    # 2. 构造 V免签参数
+    # standard VMQ params
+    params = {
+        "payId": order_id,
+        "type": payload.type,
+        "price": price,
+        "param": str(current_user.id),
+        "isHtml": 1,
+        "notifyUrl": "", 
+        "returnUrl": "", 
+    }
+    
+    # 3. 签名
+    sign = sign_vmq_create_payload(params)
+    params["sign"] = sign
+    
+    # 4. 构造跳转 URL
+    pay_url = ""
+    is_mock = False
+    
+    from urllib.parse import urlencode
+    query_string = urlencode({k: v for k, v in params.items() if v is not None and str(v) != ""})
+
+    if VMQ_GATEWAY_URL:
+        base_url = VMQ_GATEWAY_URL.rstrip("/")
+        # 假设网关接口为 /createOrder，如果用户配置的 URL 包含路径则直接使用
+        if base_url.endswith("/createOrder") or base_url.endswith(".php") or base_url.endswith("/"):
+             pay_url = f"{base_url}?{query_string}"
+        else:
+             pay_url = f"{base_url}/createOrder?{query_string}"
+    else:
+        # 使用内置网关
+        base_url = str(request.base_url).rstrip("/")
+        pay_url = f"{base_url}/vmq/createOrder?{query_string}"
+        # 注意: 如果用户还是想用最简单的 Mock 模式（不扫码），可以将 is_mock 设为 True
+        # 这里默认进入内置网关流程
+        is_mock = False
+        
+    return CreatePaymentResponse(
+        order_id=order_id,
+        pay_url=pay_url,
+        price=price,
+        type=payload.type,
+        param=params["param"],
+        sign=sign,
+        is_mock=is_mock
+    )
+
+
+# --- Vmq Built-in Gateway Endpoints ---
+
+@router.get("/vmq/addOrder")
+async def vmq_add_order(
+    type: int = Query(...),
+    price: float = Query(...),
+    payId: str = Query(None),
+    sign: str = Query(...),
+    db: Session = Depends(get_user_db)
+):
+    """
+    V免签监控 App 推送接口
+    协议: sign = md5(type + price + payId + key)
+    注意: Vmq App 推送参数格式固定，payId 可能为空
+    """
+    # 1. 签名校验
+    # 注意: price 转字符串可能涉及精度，Vmq 通常保留两位小数
+    price_str = f"{price:.2f}"
+    pay_id_str = payId if payId else ""
+    raw = f"{type}{price_str}{pay_id_str}{VMQ_SECRET}"
+    expected = hashlib.md5(raw.encode("utf-8")).hexdigest()
+    
+    if sign.lower() != expected.lower():
+        logger.warning(f"Vmq App push sign mismatch: {sign} != {expected}")
+        return "error: sign mismatch"
+    
+    # 2. 匹配订单
+    order = None
+    if payId:
+        order = db.query(PaymentOrder).filter(PaymentOrder.order_id == payId).first()
+    else:
+        # App 没传订单号，按金额和类型匹配最近的
+        order = match_pending_payment_order(db, price, type)
+    
+    if not order:
+        logger.warning(f"Vmq App push: order not found for price={price}, type={type}")
+        return "error: order not found"
+        
+    if order.status == "paid":
+        return "success"
+        
+    # 3. 更新订单
+    order.status = "paid"
+    order.paid_at = datetime.utcnow()
+    db.commit()
+    
+    # 4. 延长 VIP (extend_vip_membership 包含数据库同步逻辑)
+    extend_vip_membership(db, order.user_id, days=30)
+    
+    logger.info(f"Vmq App push success: user_id={order.user_id}, amount={price}")
+    return "success"
+
+
+@router.get("/vmq/checkOrder")
+async def vmq_check_order(
+    payId: str = Query(...),
+    db: Session = Depends(get_user_db)
+):
+    """前端轮询订单状态接口"""
+    order = db.query(PaymentOrder).filter(PaymentOrder.order_id == payId).first()
+    if not order:
+        return {"code": -1, "msg": "not found"}
+    
+    status = 1  # 1: 等待支付
+    if order.status == "paid":
+        status = 2  # 2: 支付成功
+    elif order.status == "expired":
+        status = -1  # -1: 订单过期
+        
+    return {
+        "code": 1, 
+        "msg": "ok", 
+        "data": {
+            "status": status,
+            "order_id": order.order_id
+        }
+    }
+
+
+@router.get("/vmq/createOrder", response_class=HTMLResponse)
+async def vmq_create_order_page(
+    payId: str = Query(...),
+    type: int = Query(...),
+    price: float = Query(...),
+    sign: str = Query(...),
+    param: str = Query(""),
+    db: Session = Depends(get_user_db)
+):
+    """内置网关的支付收银台页面"""
+    # 1. 校验签名 (由商户端发往网关端的签名)
+    check_params = {
+        "payId": payId,
+        "type": type,
+        "price": price,
+        "param": param,
+    }
+    expected = sign_vmq_create_payload(check_params)
+    if sign != expected:
+        return "<html><body><h1>签名错误</h1></body></html>"
+    
+    # 2. 这里的二维码应该是用户预先上传的个人收款码
+    # 提示用户将 qrcode_alipay.png / qrcode_wechat.png 放在 backend/static/images/ 下
+    qr_image = "/static/images/qrcode_alipay.png" if type == 1 else "/static/images/qrcode_wechat.png"
+    
+    return f"""
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>扫码支付</title>
+        <style>
+            body {{ font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto; background: #f5f5f5; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }}
+            .card {{ background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: center; max-width: 320px; width: 90%; }}
+            .price {{ font-size: 36px; font-weight: bold; color: #333; margin: 20px 0; }}
+            .price span {{ font-size: 18px; }}
+            .qr-box {{ background: #fff; padding: 10px; border: 1px solid #eee; border-radius: 12px; margin: 20px 0; }}
+            .qr-box img {{ width: 100%; display: block; }}
+            .hint {{ color: #666; font-size: 14px; line-height: 1.6; }}
+            .footer {{ margin-top: 20px; font-size: 12px; color: #999; }}
+            .type-badge {{ display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; color: white; }}
+            .alipay {{ background: #1677FF; }}
+            .wechat {{ background: #07C160; }}
+        </style>
+    </head>
+    <body>
+        <div class="card">
+            <div class="type-badge {'alipay' if type==1 else 'wechat'}">
+                {'支付宝' if type==1 else '微信支付'}
+            </div>
+            <div class="price"><span>￥</span>{price:.2f}</div>
+            <div class="qr-box">
+                <img src="{qr_image}" alt="请上传收款码到指定目录">
+            </div>
+            <div class="hint">
+                请保��二维码或直接扫码支付<br>
+                <strong>支付金额必须完全一致</strong>
+            </div>
+            <div class="footer">
+                订单号: {payId}<br>
+                支付后请返回原页面查看状态
+            </div>
+        </div>
+        <script>
+            // 如果是在 Modal 中内嵌，可以定时检查状态跳转，但目前由前端 Modal 自己轮询
+        </script>
+    </body>
+    </html>
+    """
+
+
 @router.get("/game/start", response_model=GameStartResponse)
 async def game_start(
     mode: str = Query(default="random", description="游戏模式"),
     market: Optional[str] = Query(default=None, description="板块类型"),
-    authorization: Optional[str] = Header(None, alias="Authorization"),
-    db: Session = Depends(get_user_db)
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_user_db),
 ):
     """
     开始游戏 - 获取盲盒数据
+    - 必须登录（未登录返回 401）
+    - 非 VIP 每天限 FREE_DAILY_LIMIT 次
+    - VIP 无限制
     """
-    # 校验 VIP 权限（可选：针对特定市场如 '科创板' 要求 VIP）
-    is_vip = False
-    token = _get_token_from_header(authorization)
-    if token:
-        user = get_user_by_token(db, token)
-        if user:
-            vip_info = check_vip_status(user.id, db)
-            is_vip = vip_info["is_vip"]
-
-    # 如果不是 VIP 且选择了受限板块（示例逻辑）
+    vip_info = check_vip_status(current_user.id, db)
+    is_vip = vip_info["is_vip"]
+
+    # 非 VIP：检查每日次数
+    if not is_vip:
+        used_today = get_daily_usage(db, current_user.id)
+        if used_today >= FREE_DAILY_LIMIT:
+            raise HTTPException(
+                status_code=403,
+                detail={
+                    "code": "DAILY_LIMIT_EXCEEDED",
+                    "message": f"今日免费次数（{FREE_DAILY_LIMIT}次）已用完，开通会员可无限使用",
+                    "used": used_today,
+                    "limit": FREE_DAILY_LIMIT,
+                }
+            )
+
+    # VIP 受限板块校验
     if not is_vip and market in ['科创板', '北交所', '可转债']:
-         raise HTTPException(status_code=403, detail="该板块仅限 VIP 会员使用")
+        raise HTTPException(status_code=403, detail="该板块仅限 VIP 会员使用")
 
     try:
         result = start_game(mode=mode, mask=True, market_type=market)
+        # 成功后记录使用次数（VIP 不计）
+        if not is_vip:
+            increment_daily_usage(db, current_user.id)
         return result
     except ValueError as e:
         raise HTTPException(status_code=400, detail=str(e))
@@ -290,6 +567,25 @@ async def game_start(
         raise HTTPException(status_code=500, detail="Internal server error")
 
 
+@router.get("/v1/usage/today")
+async def get_usage_today(
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_user_db),
+):
+    """获取今日使用情况"""
+    vip_info = check_vip_status(current_user.id, db)
+    is_vip = vip_info["is_vip"]
+    used = get_daily_usage(db, current_user.id)
+    return {
+        "used": used,
+        "limit": None if is_vip else FREE_DAILY_LIMIT,
+        "remaining": None if is_vip else max(0, FREE_DAILY_LIMIT - used),
+        "is_vip": is_vip,
+    }
+
+
+
+
 @router.get("/kline", response_model=list[KLineData])
 async def get_kline(
     code: str = Query(..., description="股票代码"),

backend/app/database_user.py

@@ -25,6 +25,7 @@ from sqlalchemy import (
     Float,
     ForeignKey,
     Text,
+    Date,
 )
 from sqlalchemy.orm import DeclarativeBase, Mapped, mapped_column, sessionmaker, Session
 from huggingface_hub import hf_hub_download, upload_file
@@ -68,7 +69,8 @@ class PaymentOrder(Base):
     order_id: Mapped[str] = mapped_column(String(128), unique=True, nullable=False, index=True)
     user_id: Mapped[int] = mapped_column(Integer, ForeignKey("users.id"), nullable=False)
     amount: Mapped[float] = mapped_column(Float, nullable=False)
-    status: Mapped[str] = mapped_column(String(32), default="pending", index=True)
+    pay_type: Mapped[int] = mapped_column(Integer, default=1)  # 1: 支付宝, 2: 微信
+    status: Mapped[str] = mapped_column(String(32), default="pending", index=True)  # pending, paid, expired
     created_at: Mapped[datetime] = mapped_column(DateTime, default=datetime.utcnow)
     paid_at: Mapped[Optional[datetime]] = mapped_column(DateTime, nullable=True)
     raw_payload: Mapped[Optional[str]] = mapped_column(Text, nullable=True)
@@ -83,6 +85,15 @@ class UserSession(Base):
     created_at: Mapped[datetime] = mapped_column(DateTime, default=datetime.utcnow)
 
 
+class DailyUsage(Base):
+    """每日使用次数记录"""
+    __tablename__ = "daily_usage"
+
+    user_id: Mapped[int] = mapped_column(Integer, ForeignKey("users.id"), primary_key=True)
+    use_date: Mapped[datetime] = mapped_column(Date, primary_key=True)
+    count: Mapped[int] = mapped_column(Integer, default=0, nullable=False)
+
+
 def _ensure_db_dir() -> None:
     Path(USER_DB_PATH).parent.mkdir(parents=True, exist_ok=True)
 
@@ -165,6 +176,15 @@ def sync_user_db_after_update(func: Callable[..., Any]) -> Callable[..., Any]:
     return wrapper
 
 
+@sync_user_db_after_update
+def register_user(db: Session, username: str, password_hash: str) -> User:
+    user = User(username=username, password_hash=password_hash)
+    db.add(user)
+    db.commit()
+    db.refresh(user)
+    return user
+
+
 def hash_password(password: str) -> str:
     salt = secrets.token_hex(16)
     digest = hashlib.sha256(f"{salt}:{password}".encode("utf-8")).hexdigest()
@@ -189,11 +209,59 @@ def verify_vmq_signature(payload: dict[str, Any], sign: str) -> bool:
         return False
 
     sign_data = payload.copy()
-    sign_data.pop("sign", None)
+    if "sign" in sign_data:
+        sign_data.pop("sign")
+    # 过滤空值
+    sign_data = {k: v for k, v in sign_data.items() if v is not None and str(v) != ""}
+    
     keys = sorted(sign_data.keys())
     raw = "&".join([f"{k}={sign_data[k]}" for k in keys]) + VMQ_SECRET
     expected = hashlib.md5(raw.encode("utf-8")).hexdigest()
-    return hmac.compare_digest(expected, sign)
+    return expected == sign  # V免签有时返回小写有时大写，建议对比时统一但是 verify_vmq_signature 里 hmac.compare_digest 是安全的
+
+
+def sign_vmq_create_payload(payload: dict[str, Any]) -> str:
+    """生成创建订单时的签名"""
+    if not VMQ_SECRET:
+        return ""
+    sign_data = {k: v for k, v in payload.items() if v is not None and str(v) != "" and k != "sign"}
+    keys = sorted(sign_data.keys())
+    raw = "&".join([f"{k}={sign_data[k]}" for k in keys]) + VMQ_SECRET
+    return hashlib.md5(raw.encode("utf-8")).hexdigest()
+
+
+@sync_user_db_after_update
+def create_payment_order(db: Session, user_id: int, amount: float, pay_type: int = 1) -> str:
+    """创建待支付订单"""
+    # 生成订单号: YYYYMMDDHHMMSS + 6位随机
+    order_id = datetime.utcnow().strftime("%Y%m%d%H%M%S") + secrets.token_hex(3)
+    
+    order = PaymentOrder(
+        order_id=order_id,
+        user_id=user_id,
+        amount=amount,
+        pay_type=pay_type,
+        status="pending",
+        raw_payload="",
+    )
+    db.add(order)
+    db.commit()
+    return order_id
+
+
+def match_pending_payment_order(db: Session, amount: float, pay_type: int) -> Optional[PaymentOrder]:
+    """
+    匹配最近的待支付订单
+    逻辑: 在过去 1 小时内，查找状态为 pending 且金额和类型匹配的最新一个订单
+    """
+    one_hour_ago = datetime.utcnow() - timedelta(hours=1)
+    
+    return db.query(PaymentOrder).filter(
+        PaymentOrder.status == "pending",
+        PaymentOrder.amount == amount,
+        PaymentOrder.pay_type == pay_type,
+        PaymentOrder.created_at >= one_hour_ago
+    ).order_by(PaymentOrder.created_at.desc()).first()
 
 
 @sync_user_db_after_update
@@ -222,3 +290,28 @@ def get_user_by_token(db: Session, token: str) -> Optional[User]:
         db.commit()
         return None
     return db.get(User, session_row.user_id)
+
+
+FREE_DAILY_LIMIT = int(os.getenv("FREE_DAILY_LIMIT", "3"))
+
+
+def get_daily_usage(db: Session, user_id: int) -> int:
+    """获取今日已使用次数（UTC 日期）"""
+    today = datetime.utcnow().date()
+    row = db.get(DailyUsage, {"user_id": user_id, "use_date": today})
+    return row.count if row else 0
+
+
+@sync_user_db_after_update
+def increment_daily_usage(db: Session, user_id: int) -> int:
+    """今日��用次数 +1，返回更新后的次数"""
+    today = datetime.utcnow().date()
+    row = db.get(DailyUsage, {"user_id": user_id, "use_date": today})
+    if row is None:
+        row = DailyUsage(user_id=user_id, use_date=today, count=1)
+        db.add(row)
+    else:
+        row.count += 1
+    db.commit()
+    db.refresh(row)
+    return row.count

backend/app/main.py

@@ -11,9 +11,8 @@ from fastapi import FastAPI
 from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 
-from .api import router
 from .database import get_db
-from .database_user import init_user_db
+from .database_user import init_user_db, upload_user_db_to_hf
 from scripts.sync_data import main as run_sync_task
 from apscheduler.schedulers.background import BackgroundScheduler
 from pytz import timezone
@@ -57,6 +56,14 @@ async def lifespan(app: FastAPI):
     
     # 关闭时
     logger.info("Application shutting down...")
+    
+    # 停机前最后一次备份用户数据库
+    try:
+        upload_user_db_to_hf()
+        logger.info("Final user db backup completed before shutdown")
+    except Exception as e:
+        logger.error(f"Final user db backup failed: {e}")
+        
     scheduler.shutdown()
     db.close()
     logger.info("Database connection closed")

frontend/src/app/page.tsx

@@ -5,6 +5,7 @@ import dynamic from 'next/dynamic';
 import TradePanel from '@/components/TradePanel';
 import StockHeader from '@/components/StockHeader';
 import ChartControls from '@/components/ChartControls';
+import UserMenu from '@/components/UserMenu';
 import { useGameStore } from '@/store/gameStore';
 import { resample, Period } from '@/lib/resample';
 
@@ -13,24 +14,24 @@ const Chart = dynamic(() => import('@/components/Chart'), { ssr: false });
 
 export default function Home() {
   const { allKlines, currentIndex, isPlaying, initialIndex, history } = useGameStore();
-  
+
   // 指标状态
   const [mainIndicator, setMainIndicator] = useState('MA');
   const [subIndicator1, setSubIndicator1] = useState('VOL');
   const [subIndicator2, setSubIndicator2] = useState('MACD');
   const [period, setPeriod] = useState<Period>('day');
-  
+
   // 光标数据状态
   const [cursorData, setCursorData] = useState<any>(null);
-  
+
   // 计算显示数据 (重采样)
   const { displayKlines, displayIndex, displayInitialIndex } = useMemo(() => {
     if (allKlines.length === 0) return { displayKlines: [], displayIndex: 0, displayInitialIndex: 0 };
-    
+
     const { klines, indexMap } = resample(allKlines, period);
     const idx = indexMap[currentIndex] ?? 0;
     const initIdx = indexMap[initialIndex] ?? 0;
-    
+
     return { displayKlines: klines, displayIndex: idx, displayInitialIndex: initIdx };
   }, [allKlines, currentIndex, initialIndex, period]);
 
@@ -39,11 +40,16 @@ export default function Home() {
       {/* 左侧/上方：行情区域 - 仅在游戏开始后显示 */}
       {isPlaying && (
         <div className="flex-[1.2] lg:flex-1 flex flex-col min-w-0 min-h-0 relative">
-          {/* 顶部行情头 */}
-          <StockHeader cursorData={cursorData} />
-          
+          {/* 顶部行情头 + 用户菜单 */}
+          <div className="relative">
+            <StockHeader cursorData={cursorData} />
+            <div className="absolute right-2 top-1.5 lg:right-4 lg:top-2 z-10">
+              <UserMenu compact />
+            </div>
+          </div>
+
           {/* 指标控制条 */}
-          <ChartControls 
+          <ChartControls
             mainIndicator={mainIndicator}
             setMainIndicator={setMainIndicator}
             subIndicator1={subIndicator1}
@@ -53,12 +59,12 @@ export default function Home() {
             period={period}
             setPeriod={setPeriod}
           />
-          
+
           {/* K 线图表 */}
           <div className="flex-1 relative bg-[#0D1421] min-h-0">
             {displayKlines.length > 0 && (
-              <Chart 
-                data={displayKlines} 
+              <Chart
+                data={displayKlines}
                 currentIndex={displayIndex}
                 className="w-full h-full"
                 mainIndicator={mainIndicator}
@@ -72,13 +78,12 @@ export default function Home() {
           </div>
         </div>
       )}
-      
+
       {/* 右侧/下方：交易面板 */}
-      <div className={`min-h-0 bg-[#1E212B] z-20 shadow-xl transition-all duration-300 ${
-        !isPlaying 
-          ? 'w-full h-full' 
+      <div className={`min-h-0 bg-[#1E212B] z-20 shadow-xl transition-all duration-300 ${!isPlaying
+          ? 'w-full h-full'
           : 'w-full lg:w-[380px] flex-none border-t lg:border-t-0 lg:border-l border-[#2A2D3C] h-auto lg:h-full'
-      }`}>
+        }`}>
         <TradePanel />
       </div>
     </main>

frontend/src/components/AuthModal.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+/**
+ * 登录/注册弹窗组件
+ */
+
+import { useState } from 'react';
+import { X, User, Lock, Eye, EyeOff } from 'lucide-react';
+import { useAuthStore } from '@/store/authStore';
+
+interface AuthModalProps {
+    onClose: () => void;
+    initialMode?: 'login' | 'register';
+}
+
+export default function AuthModal({ onClose, initialMode = 'login' }: AuthModalProps) {
+    const [mode, setMode] = useState<'login' | 'register'>(initialMode);
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [error, setError] = useState('');
+    const { login, register, isLoading } = useAuthStore();
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError('');
+
+        // 前端验证
+        if (username.trim().length < 3) {
+            setError('用户名至少3个字符');
+            return;
+        }
+        if (password.length < 6) {
+            setError('密码至少6位');
+            return;
+        }
+        if (mode === 'register' && password !== confirmPassword) {
+            setError('两次密码输入不一致');
+            return;
+        }
+
+        try {
+            if (mode === 'login') {
+                await login(username.trim(), password);
+            } else {
+                await register(username.trim(), password);
+            }
+            onClose();
+        } catch (err: any) {
+            setError(err.message || (mode === 'login' ? '登录失败' : '注册失败'));
+        }
+    };
+
+    const switchMode = () => {
+        setMode(mode === 'login' ? 'register' : 'login');
+        setError('');
+        setConfirmPassword('');
+    };
+
+    return (
+        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4" onClick={onClose}>
+            <div
+                className="bg-[#1E212B] rounded-2xl w-full max-w-sm shadow-2xl border border-[#2A2D3C] overflow-hidden"
+                onClick={e => e.stopPropagation()}
+            >
+                {/* Header */}
+                <div className="px-5 py-4 border-b border-[#2A2D3C] flex items-center justify-between">
+                    <h3 className="text-lg font-bold text-white">
+                        {mode === 'login' ? '登录' : '注册'}
+                    </h3>
+                    <button
+                        onClick={onClose}
+                        className="w-8 h-8 flex items-center justify-center rounded-lg bg-[#2A2D3C] hover:bg-[#35394B] text-gray-400 hover:text-white transition-colors"
+                    >
+                        <X size={16} />
+                    </button>
+                </div>
+
+                {/* Form */}
+                <form onSubmit={handleSubmit} className="p-5 space-y-4">
+                    {/* Error */}
+                    {error && (
+                        <div className="bg-red-500/10 border border-red-500/30 text-red-400 text-sm px-4 py-2.5 rounded-lg">
+                            {error}
+                        </div>
+                    )}
+
+                    {/* Username */}
+                    <div>
+                        <label className="text-gray-400 text-xs mb-1.5 block">用户名</label>
+                        <div className="relative">
+                            <User size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" />
+                            <input
+                                type="text"
+                                value={username}
+                                onChange={e => setUsername(e.target.value)}
+                                placeholder="请输入用户名（至少3位）"
+                                className="w-full bg-[#12141C] border border-gray-700/50 rounded-xl pl-10 pr-4 py-3 text-white text-sm placeholder-gray-600 focus:outline-none focus:border-blue-500 transition-colors"
+                                autoComplete="username"
+                                autoFocus
+                            />
+                        </div>
+                    </div>
+
+                    {/* Password */}
+                    <div>
+                        <label className="text-gray-400 text-xs mb-1.5 block">密码</label>
+                        <div className="relative">
+                            <Lock size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" />
+                            <input
+                                type={showPassword ? 'text' : 'password'}
+                                value={password}
+                                onChange={e => setPassword(e.target.value)}
+                                placeholder="请输入密码（至少6位）"
+                                className="w-full bg-[#12141C] border border-gray-700/50 rounded-xl pl-10 pr-10 py-3 text-white text-sm placeholder-gray-600 focus:outline-none focus:border-blue-500 transition-colors"
+                                autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
+                            />
+                            <button
+                                type="button"
+                                onClick={() => setShowPassword(!showPassword)}
+                                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
+                            >
+                                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Confirm Password (register only) */}
+                    {mode === 'register' && (
+                        <div>
+                            <label className="text-gray-400 text-xs mb-1.5 block">确认密码</label>
+                            <div className="relative">
+                                <Lock size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" />
+                                <input
+                                    type={showPassword ? 'text' : 'password'}
+                                    value={confirmPassword}
+                                    onChange={e => setConfirmPassword(e.target.value)}
+                                    placeholder="请再次输入密码"
+                                    className="w-full bg-[#12141C] border border-gray-700/50 rounded-xl pl-10 pr-4 py-3 text-white text-sm placeholder-gray-600 focus:outline-none focus:border-blue-500 transition-colors"
+                                    autoComplete="new-password"
+                                />
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Submit */}
+                    <button
+                        type="submit"
+                        disabled={isLoading}
+                        className="w-full bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-500 hover:to-blue-400 text-white font-bold py-3 rounded-xl transition-all duration-200 disabled:opacity-50 shadow-lg text-sm"
+                    >
+                        {isLoading ? '处理中...' : (mode === 'login' ? '登录' : '注册')}
+                    </button>
+
+                    {/* Switch mode */}
+                    <div className="text-center text-sm text-gray-500">
+                        {mode === 'login' ? (
+                            <>还没有账号？<button type="button" onClick={switchMode} className="text-blue-400 hover:text-blue-300 ml-1">立即注册</button></>
+                        ) : (
+                            <>已有账号？<button type="button" onClick={switchMode} className="text-blue-400 hover:text-blue-300 ml-1">立即登录</button></>
+                        )}
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}

frontend/src/components/LoginPage.tsx

@@ -0,0 +1,214 @@
+'use client';
+
+/**
+ * 全屏登录/注册页面
+ * 未登录时显示，替代游戏开始界面
+ */
+
+import { useState } from 'react';
+import { User, Lock, Eye, EyeOff, TrendingUp, BarChart3, Shield } from 'lucide-react';
+import { useAuthStore } from '@/store/authStore';
+
+export default function LoginPage() {
+    const [mode, setMode] = useState<'login' | 'register'>('login');
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [error, setError] = useState('');
+    const { login, register, isLoading } = useAuthStore();
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError('');
+
+        if (username.trim().length < 3) {
+            setError('用户名至少3个字符');
+            return;
+        }
+        if (password.length < 6) {
+            setError('密码至少6位');
+            return;
+        }
+        if (mode === 'register' && password !== confirmPassword) {
+            setError('两次密码输入不一致');
+            return;
+        }
+
+        try {
+            if (mode === 'login') {
+                await login(username.trim(), password);
+            } else {
+                await register(username.trim(), password);
+            }
+        } catch (err: any) {
+            setError(err.message || (mode === 'login' ? '登录失败，请检查用户名和密码' : '注册失败，用户名可能已存在'));
+        }
+    };
+
+    return (
+        <div className="flex h-full bg-[#0D1117] text-white overflow-hidden">
+            {/* 左侧品牌区 - 大屏显示 */}
+            <div className="hidden lg:flex flex-col justify-center items-center flex-1 bg-gradient-to-br from-[#0D1421] to-[#1a1f35] p-12 relative overflow-hidden">
+                {/* 背景装饰 */}
+                <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                    <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-600/5 rounded-full blur-3xl" />
+                    <div className="absolute bottom-1/4 right-1/4 w-48 h-48 bg-purple-600/5 rounded-full blur-3xl" />
+                </div>
+
+                <div className="relative z-10 max-w-sm text-center space-y-8">
+                    {/* Logo */}
+                    <div className="flex items-center justify-center gap-3 mb-2">
+                        <div className="w-14 h-14 bg-blue-600/20 rounded-2xl flex items-center justify-center">
+                            <TrendingUp size={28} className="text-blue-400" />
+                        </div>
+                    </div>
+                    <div>
+                        <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                            StockReplay
+                        </h1>
+                        <p className="text-gray-400 mt-2">A股历史行情复盘训练系统</p>
+                    </div>
+
+                    {/* 特性列表 */}
+                    <div className="space-y-4 text-left">
+                        {[
+                            { icon: BarChart3, title: '盲盒式选股', desc: '随机抽取历史行情，消除幸存者偏差' },
+                            { icon: TrendingUp, title: '模拟交易', desc: '100万初始资金，真实买卖体验' },
+                            { icon: Shield, title: '数据覆盖10年', desc: '全A股历史数据，训练你的盘感' },
+                        ].map(({ icon: Icon, title, desc }) => (
+                            <div key={title} className="flex items-start gap-3">
+                                <div className="w-8 h-8 bg-blue-600/15 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
+                                    <Icon size={15} className="text-blue-400" />
+                                </div>
+                                <div>
+                                    <div className="text-sm font-medium text-gray-200">{title}</div>
+                                    <div className="text-xs text-gray-500 mt-0.5">{desc}</div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* 免费次数说明 */}
+                    <div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 text-sm text-left">
+                        <div className="text-blue-400 font-medium mb-1">免费用户</div>
+                        <div className="text-gray-400 text-xs">每日 3 次免费回测机会，开通 VIP 可无限使用</div>
+                    </div>
+                </div>
+            </div>
+
+            {/* 右侧登录区 */}
+            <div className="flex-1 lg:max-w-md flex flex-col justify-center px-6 py-10 lg:px-12 bg-[#191B28]">
+                {/* 移动端 Logo */}
+                <div className="lg:hidden text-center mb-8">
+                    <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                        StockReplay
+                    </h1>
+                    <p className="text-gray-500 text-sm mt-1">A股历史行情复盘训练</p>
+                </div>
+
+                <div className="w-full max-w-sm mx-auto">
+                    <h2 className="text-2xl font-bold mb-2">
+                        {mode === 'login' ? '欢迎回来' : '创建账号'}
+                    </h2>
+                    <p className="text-gray-500 text-sm mb-8">
+                        {mode === 'login' ? '登录后开始你的复盘训练' : '注册即可获得每日 3 次免费回测'}
+                    </p>
+
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                        {/* 错误提示 */}
+                        {error && (
+                            <div className="bg-red-500/10 border border-red-500/30 text-red-400 text-sm px-4 py-3 rounded-xl">
+                                {error}
+                            </div>
+                        )}
+
+                        {/* 用户名 */}
+                        <div>
+                            <label className="text-gray-400 text-xs mb-1.5 block">用户名</label>
+                            <div className="relative">
+                                <User size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-500" />
+                                <input
+                                    type="text"
+                                    value={username}
+                                    onChange={e => setUsername(e.target.value)}
+                                    placeholder="请输入用户名（至少3位）"
+                                    className="w-full bg-[#12141C] border border-gray-700/50 rounded-xl pl-10 pr-4 py-3.5 text-white text-sm placeholder-gray-600 focus:outline-none focus:border-blue-500 transition-colors"
+                                    autoComplete="username"
+                                    autoFocus
+                                />
+                            </div>
+                        </div>
+
+                        {/* 密码 */}
+                        <div>
+                            <label className="text-gray-400 text-xs mb-1.5 block">密码</label>
+                            <div className="relative">
+                                <Lock size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-500" />
+                                <input
+                                    type={showPassword ? 'text' : 'password'}
+                                    value={password}
+                                    onChange={e => setPassword(e.target.value)}
+                                    placeholder="请输入密码（至少6位）"
+                                    className="w-full bg-[#12141C] border border-gray-700/50 rounded-xl pl-10 pr-11 py-3.5 text-white text-sm placeholder-gray-600 focus:outline-none focus:border-blue-500 transition-colors"
+                                    autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
+                                />
+                                <button
+                                    type="button"
+                                    onClick={() => setShowPassword(!showPassword)}
+                                    className="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
+                                >
+                                    {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* 确认密码（注册） */}
+                        {mode === 'register' && (
+                            <div>
+                                <label className="text-gray-400 text-xs mb-1.5 block">确认密码</label>
+                                <div className="relative">
+                                    <Lock size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-500" />
+                                    <input
+                                        type={showPassword ? 'text' : 'password'}
+                                        value={confirmPassword}
+                                        onChange={e => setConfirmPassword(e.target.value)}
+                                        placeholder="请再次输入密码"
+                                        className="w-full bg-[#12141C] border border-gray-700/50 rounded-xl pl-10 pr-4 py-3.5 text-white text-sm placeholder-gray-600 focus:outline-none focus:border-blue-500 transition-colors"
+                                        autoComplete="new-password"
+                                    />
+                                </div>
+                            </div>
+                        )}
+
+                        {/* 提交按钮 */}
+                        <button
+                            type="submit"
+                            disabled={isLoading}
+                            className="w-full bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-500 hover:to-blue-400 text-white font-bold py-3.5 rounded-xl transition-all duration-200 disabled:opacity-50 shadow-lg mt-2"
+                        >
+                            {isLoading ? '处理中...' : (mode === 'login' ? '登录' : '注册')}
+                        </button>
+                    </form>
+
+                    {/* 切换模式 */}
+                    <div className="text-center mt-6 text-sm text-gray-500">
+                        {mode === 'login' ? (
+                            <>还没有账号？
+                                <button onClick={() => { setMode('register'); setError(''); setConfirmPassword(''); }} className="text-blue-400 hover:text-blue-300 ml-1 font-medium">
+                                    立即注册
+                                </button>
+                            </>
+                        ) : (
+                            <>已有账号？
+                                <button onClick={() => { setMode('login'); setError(''); setConfirmPassword(''); }} className="text-blue-400 hover:text-blue-300 ml-1 font-medium">
+                                    立即登录
+                                </button>
+                            </>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/src/components/PaymentModal.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+/**
+ * 支付弹窗组件
+ * 
+ * 功能：
+ * 1. 展示VIP权益与价格 (￥9.9/30天)
+ * 2. 选择支付方式 (支付宝/微信)
+ * 3. 发起支付请求 (api.createPayment)
+ * 4. 展示支付二维码或跳转链接
+ * 5. 支付结果确认 (mock模式或轮询)
+ */
+
+import { useState, useEffect } from 'react';
+import { X, Check, Loader2, CreditCard, ExternalLink, Zap } from 'lucide-react';
+import { QRCodeSVG } from 'qrcode.react';
+import { useAuthStore } from '@/store/authStore';
+import { api, CreatePaymentResponse } from '@/lib/api';
+
+interface PaymentModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export default function PaymentModal({ isOpen, onClose }: PaymentModalProps) {
+    const [loading, setLoading] = useState(false);
+    const [paymentType, setPaymentType] = useState<1 | 2>(2); // 1: Alipay, 2: WeChat
+    const [paymentData, setPaymentData] = useState<CreatePaymentResponse | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    const { token, fetchUserInfo } = useAuthStore();
+
+    useEffect(() => {
+        if (isOpen) {
+            // 重置状态
+            setPaymentData(null);
+            setError(null);
+            setLoading(false);
+        }
+    }, [isOpen]);
+
+    // 轮询支付状态
+    useEffect(() => {
+        let timer: NodeJS.Timeout;
+        if (paymentData && !paymentData.is_mock) {
+            timer = setInterval(async () => {
+                try {
+                    const res = await api.checkPaymentStatus(paymentData.order_id);
+                    if (res.code === 1 && res.data.status === 2) {
+                        handlePaymentSuccess();
+                        clearInterval(timer);
+                    }
+                } catch (err) {
+                    console.error('Polling payment status failed:', err);
+                }
+            }, 3000); // 3秒轮询一次
+        }
+        return () => {
+            if (timer) clearInterval(timer);
+        };
+    }, [paymentData]);
+
+    if (!isOpen) return null;
+
+    const handleCreatePayment = async () => {
+        if (!token) return;
+        setLoading(true);
+        setError(null);
+
+        try {
+            const res = await api.createPayment(paymentType, token);
+            setPaymentData(res);
+
+            // 如果是 mock 模式，直接完成
+            if (res.is_mock) {
+                // 等待1秒模拟处理
+                setTimeout(() => {
+                    handlePaymentSuccess();
+                }, 1000);
+            }
+        } catch (err: any) {
+            setError(err.message || '创建订单失败，请重试');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handlePaymentSuccess = async () => {
+        setLoading(true);
+        try {
+            // 刷新用户信息以获取最新 VIP 状态
+            await fetchUserInfo();
+            alert('支付成功！VIP权益已生效');
+            onClose();
+        } catch (err) {
+            setError('刷新会员状态失败，请稍后刷新页面');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
+            <div className="bg-[#1E2030] rounded-2xl w-full max-w-md overflow-hidden border border-gray-800 shadow-2xl relative">
+                {/* 关闭按钮 */}
+                <button
+                    onClick={onClose}
+                    className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors z-10"
+                >
+                    <X size={20} />
+                </button>
+
+                {/* 标题 */}
+                <div className="p-6 bg-gradient-to-r from-blue-900/40 to-purple-900/40 border-b border-gray-800">
+                    <div className="flex items-center gap-3 mb-2">
+                        <div className="w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg flex items-center justify-center text-white font-bold shadow-lg">
+                            VIP
+                        </div>
+                        <div>
+                            <h2 className="text-xl font-bold text-white">开通 VIP 会员</h2>
+                            <div className="text-xs text-yellow-500 flex items-center gap-1">
+                                <Zap size={12} fill="currentColor" />
+                                <span>无限畅玩 · 数据解锁 · 专属标志</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* 内容区 */}
+                <div className="p-6">
+                    {paymentData ? (
+                        // 支付展示阶段
+                        <div className="flex flex-col items-center animate-in fade-in slide-in-from-bottom-4 duration-300">
+                            {paymentData.is_mock ? (
+                                <div className="py-8 text-center text-green-400">
+                                    <Check size={48} className="mx-auto mb-4" />
+                                    <div className="text-lg font-bold">模拟支付成功</div>
+                                    <div className="text-sm text-gray-400 mt-2">正在激活权益...</div>
+                                </div>
+                            ) : (
+                                <>
+                                    <div className="mb-6 bg-white p-3 rounded-xl shadow-inner">
+                                        <QRCodeSVG value={paymentData.pay_url} size={180} />
+                                    </div>
+
+                                    <div className="text-center space-y-4 w-full">
+                                        <div>
+                                            <div className="text-sm text-gray-400 mb-1">请使用{paymentType === 1 ? '支付宝' : '微信'}扫码支付</div>
+                                            <div className="text-2xl font-bold text-white">￥{paymentData.price.toFixed(2)}</div>
+                                        </div>
+
+                                        <div className="flex gap-3">
+                                            <a
+                                                href={paymentData.pay_url}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                className="flex-1 bg-gray-700/50 hover:bg-gray-700 text-white py-3 rounded-xl flex items-center justify-center gap-2 transition-colors text-sm font-medium"
+                                            >
+                                                <ExternalLink size={16} />
+                                                打开支付页
+                                            </a>
+                                            <button
+                                                onClick={handlePaymentSuccess}
+                                                className="flex-1 bg-green-600 hover:bg-green-500 text-white py-3 rounded-xl font-bold transition-colors shadow-lg shadow-green-900/20"
+                                            >
+                                                我已支付
+                                            </button>
+                                        </div>
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                    ) : (
+                        // 订单创建阶段
+                        <div className="space-y-6">
+                            {/* 商品卡片 */}
+                            <div className="bg-[#2A2D3C] border border-gray-700/50 rounded-xl p-4 flex justify-between items-center relative overflow-hidden group hover:border-blue-500/50 transition-colors cursor-pointer">
+                                <div className="relative z-10">
+                                    <div className="text-lg font-bold text-white mb-1">30 天会员</div>
+                                    <div className="text-xs text-gray-400">平均仅需 0.33元/天</div>
+                                </div>
+                                <div className="relative z-10 text-right">
+                                    <div className="text-2xl font-bold text-white">
+                                        <span className="text-sm text-gray-400 font-normal mr-1">￥</span>
+                                        9.9
+                                    </div>
+                                    <div className="text-xs text-gray-500 line-through">原价 ￥19.9</div>
+                                </div>
+                                {/* 选中效果 */}
+                                <div className="absolute inset-0 bg-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+                            </div>
+
+                            {/* 支付方式 */}
+                            <div>
+                                <div className="text-xs text-gray-500 mb-3 uppercase tracking-wider font-medium">选择支付方式</div>
+                                <div className="grid grid-cols-2 gap-3">
+                                    <button
+                                        onClick={() => setPaymentType(2)}
+                                        className={`flex items-center justify-center gap-2 p-3 rounded-xl border transition-all ${paymentType === 2
+                                            ? 'bg-[#00C250]/10 border-[#00C250] text-[#00C250]'
+                                            : 'bg-[#2A2D3C] border-gray-700/50 text-gray-400 hover:bg-[#2A2D3C]/80'
+                                            }`}
+                                    >
+                                        <div className="w-5 h-5 rounded-full bg-current flex items-center justify-center text-[10px] text-black font-bold">W</div>
+                                        <span className="font-medium">微信支付</span>
+                                    </button>
+                                    <button
+                                        onClick={() => setPaymentType(1)}
+                                        className={`flex items-center justify-center gap-2 p-3 rounded-xl border transition-all ${paymentType === 1
+                                            ? 'bg-[#1677FF]/10 border-[#1677FF] text-[#1677FF]'
+                                            : 'bg-[#2A2D3C] border-gray-700/50 text-gray-400 hover:bg-[#2A2D3C]/80'
+                                            }`}
+                                    >
+                                        <div className="w-5 h-5 rounded-full bg-current flex items-center justify-center text-[10px] text-white font-bold">支</div>
+                                        <span className="font-medium">支付宝</span>
+                                    </button>
+                                </div>
+                            </div>
+
+                            {/* 错误显示 */}
+                            {error && (
+                                <div className="text-red-400 text-sm bg-red-500/10 p-3 rounded-lg flex items-center gap-2">
+                                    <div className="w-1 h-4 bg-red-400 rounded-full" />
+                                    {error}
+                                </div>
+                            )}
+
+                            {/* 支付按钮 */}
+                            <button
+                                onClick={handleCreatePayment}
+                                disabled={loading}
+                                className="w-full bg-gradient-to-r from-yellow-500 to-orange-600 hover:from-yellow-400 hover:to-orange-500 text-white font-bold py-4 rounded-xl shadow-lg shadow-orange-900/20 disabled:opacity-50 disabled:cursor-not-allowed transition-all transform active:scale-[0.98] flex items-center justify-center gap-2"
+                            >
+                                {loading ? (
+                                    <>
+                                        <Loader2 size={20} className="animate-spin" />
+                                        <span>处理中...</span>
+                                    </>
+                                ) : (
+                                    <>
+                                        <span>立即支付 ￥9.9</span>
+                                        <CreditCard size={18} className="opacity-80" />
+                                    </>
+                                )}
+                            </button>
+
+                            <div className="text-center text-xs text-gray-500">
+                                支付即代表同意《会员服务协议》
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/src/components/TradePanel.tsx

@@ -8,7 +8,11 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { TrendingUp, TrendingDown, Wallet, Package, RotateCcw, Eye, ChevronRight, Play, Pause, BarChart3, Trophy, X, TrendingUpIcon, Share2 } from 'lucide-react';
 import { useGameStore, calculateReturnRate, calculateTotalAsset } from '@/store/gameStore';
+import { useAuthStore } from '@/store/authStore';
 import { api } from '@/lib/api';
+import UserMenu from './UserMenu';
+import LoginPage from './LoginPage';
+import PaymentModal from './PaymentModal';
 import { createChart, ColorType, LineData, Time, LineStyle } from 'lightweight-charts';
 import html2canvas from 'html2canvas';
 import { QRCodeSVG } from 'qrcode.react';
@@ -19,11 +23,11 @@ export default function TradePanel() {
   const [showReturnChart, setShowReturnChart] = useState(false);
   const [autoPlay, setAutoPlay] = useState(false);
   const [selectedMarket, setSelectedMarket] = useState('全部');
-  const [vipExpireAt, setVipExpireAt] = useState<string | null>(null);
-  const [isVip, setIsVip] = useState(false);
-  
+  const [showPayment, setShowPayment] = useState(false);
+  const { token, isVip, vipExpireAt, username, isInitialized, dailyUsed, dailyRemaining, dailyLimit } = useAuthStore();
+
   const markets = ['全部', '全A股', '主板', '创业板', '科创板', '北交所', 'ETF', 'LOF', '可转债', 'REITs'];
-  
+
   const {
     isPlaying,
     isRevealed,
@@ -44,20 +48,20 @@ export default function TradePanel() {
     finish,
     reset,
   } = useGameStore();
-  
+
   const currentPrice = allKlines[currentIndex]?.close || 0;
   const returnRate = calculateReturnRate(useGameStore.getState());
   const totalAsset = calculateTotalAsset(useGameStore.getState());
   const profit = totalAsset - initialCapital;
   const isProfit = profit >= 0;
-  
+
   const canFinish = isRevealed || currentIndex >= allKlines.length - 1;
   const tradingDays = currentIndex - initialIndex + 1;
-  
+
   // 计算收益统计
   const stats = useMemo(() => {
     if (!isFinished) return null;
-    
+
     let maxValue = initialCapital;
     let maxDrawdown = 0;
     let totalProfit = 0;
@@ -66,17 +70,17 @@ export default function TradePanel() {
     let currentCost = 0;
     let winCount = 0;
     let sellCount = 0;
-    
+
     // 模拟交易流来计算最大回撤和每笔卖出的盈亏
     // 我们需要遍历从开始到结束的每一天来计算资产曲线
     let tempCash = initialCapital;
     let tempHoldings = 0;
     let tempCost = 0;
-    
+
     for (let i = initialIndex; i <= currentIndex; i++) {
       const kline = allKlines[i];
       if (!kline) continue;
-      
+
       // 处理当天的交易
       const tradesAtPoint = history.filter(t => t.date === kline.date);
       tradesAtPoint.forEach(trade => {
@@ -88,38 +92,38 @@ export default function TradePanel() {
           const pnl = (trade.price - tempCost) * trade.volume;
           if (pnl > 0) winCount++;
           sellCount++;
-          
+
           if (pnl > 0) totalProfit += pnl;
           else totalLoss += Math.abs(pnl);
-          
+
           tempCash += trade.totalCost;
           tempHoldings -= trade.volume;
           if (tempHoldings === 0) tempCost = 0;
         }
       });
-      
+
       // 计算当日总资产
       const currentAsset = tempCash + tempHoldings * kline.close;
-      
+
       // 更新最大回撤逻辑
       if (currentAsset > maxValue) maxValue = currentAsset;
       const drawdown = (maxValue - currentAsset) / maxValue;
       if (drawdown > maxDrawdown) maxDrawdown = drawdown;
     }
-    
+
     const winRate = sellCount > 0 ? winCount / sellCount : 0;
-    
+
     // 优化盈亏比计算：平均每笔盈利 / 平均每笔亏损
     const avgProfit = winCount > 0 ? totalProfit / winCount : 0;
     const lossCount = sellCount - winCount;
     const avgLoss = lossCount > 0 ? totalLoss / lossCount : 0;
     const profitLossRatio = avgLoss > 0 ? avgProfit / avgLoss : (avgProfit > 0 ? 999 : 0);
-    
+
     // 计算年化收益率 (平滑处理，至少按 1 个月计)
     const effectiveDays = Math.max(20, tradingDays);
     const years = effectiveDays / 250;
     const annualReturn = Math.pow(totalAsset / initialCapital, 1 / years) - 1;
-    
+
     return {
       totalReturn: returnRate,
       annualReturn,
@@ -143,19 +147,35 @@ export default function TradePanel() {
     return () => clearInterval(interval);
   }, [autoPlay, isPlaying, currentIndex, allKlines.length, nextCandle]);
 
+  // 初始化认证状态 - 解决 UserMenu 被 loading 阻塞导致无法初始化的问题
+  useEffect(() => {
+    const { isInitialized, initialize } = useAuthStore.getState();
+    if (!isInitialized) {
+      initialize();
+    }
+  }, []);
+
   const handleStartGame = async () => {
     setIsLoading(true);
     try {
-      const token = typeof window !== 'undefined' ? localStorage.getItem('auth_token') : null;
       const data = await api.startGame('random', selectedMarket, token || undefined);
       startGame(data);
+      // 刷新今日使用次数
+      useAuthStore.getState().fetchUsage();
     } catch (error: any) {
-      alert(error.message || '启动游戏失败，请检查后端服务');
+      // 检查 ApiError 结构: error.data.detail.code
+      const detail = error.data?.detail;
+      if (detail && detail.code === 'DAILY_LIMIT_EXCEEDED') {
+        // 已经在 UI 中处理了显示，这里强制刷新一下 usage
+        useAuthStore.getState().fetchUsage();
+      } else {
+        alert(error.message || '启动游戏失败，请检查后端服务');
+      }
     } finally {
       setIsLoading(false);
     }
   };
-  
+
   const handleBuy = () => {
     if (volume > 0 && currentPrice > 0) {
       const success = buy(volume);
@@ -169,7 +189,7 @@ export default function TradePanel() {
       if (!success) alert('持仓不足');
     }
   };
-  
+
   const setBuyPosition = (ratio: number) => {
     const maxBuy = Math.floor(cash / currentPrice / 100) * 100;
     setVolume(Math.max(100, Math.floor(maxBuy * ratio / 100) * 100));
@@ -181,43 +201,106 @@ export default function TradePanel() {
 
   // 未开始游戏界面
   if (!isPlaying) {
+    // 未初始化（加载中）
+    if (!isInitialized) {
+      return (
+        <div className="flex items-center justify-center h-full bg-[#191B28]">
+          <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+        </div>
+      );
+    }
+
+    // ===== 未登录：显示全屏登录/注册页 =====
+    if (!username) {
+      return <LoginPage />;
+    }
+
+    // ===== 已登录：显示游戏开始界面 =====
+    const limitExceeded = !isVip && dailyLimit !== null && dailyUsed >= dailyLimit;
+
     return (
-      <div className="flex flex-col items-center justify-center h-full gap-6 lg:gap-8 p-4 lg:p-8 bg-[#191B28] text-white">
+      <div className="flex flex-col items-center justify-center h-full gap-6 lg:gap-8 p-4 lg:p-8 bg-[#191B28] text-white relative">
+        {/* 用户菜单 - 右上角 */}
+        <div className="absolute top-4 right-4">
+          <UserMenu />
+        </div>
+
         <div className="text-center space-y-2">
           <h1 className="text-4xl lg:text-5xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">StockReplay</h1>
           <p className="text-gray-400 text-base lg:text-lg">A股历史行情复盘训练系统</p>
+          {isVip && vipExpireAt && (
+            <div className="flex items-center justify-center gap-1 text-yellow-500 text-xs">
+              <span>⭐ VIP 会员</span>
+              <span className="text-gray-500">· 到期: {vipExpireAt.split(' ')[0]}</span>
+            </div>
+          )}
         </div>
-        
+
         <div className="bg-[#2A2D3C] rounded-2xl p-6 lg:p-8 max-w-md w-full shadow-2xl border border-gray-800">
           <div className="flex items-center justify-center mb-6 lg:mb-8">
             <div className="w-12 h-12 lg:w-16 lg:h-16 bg-blue-500/20 rounded-full flex items-center justify-center text-blue-400">
               <TrendingUp size={28} />
             </div>
           </div>
-          
+
           <h2 className="text-xl lg:text-2xl font-bold mb-3 lg:mb-4 text-center">盲盒挑战</h2>
           <p className="text-gray-400 mb-6 lg:mb-8 text-center text-sm lg:text-base leading-relaxed">
             系统将随机抽取一只A股的历史行情，你需要根据K线走势进行模拟交易，验证你的盘感与策略。
           </p>
-          
-          <button 
-            onClick={handleStartGame} 
-            disabled={isLoading} 
-            className="w-full bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-500 hover:to-blue-400 text-white font-bold py-3.5 lg:py-4 px-8 rounded-xl transition-all duration-200 disabled:opacity-50 shadow-lg transform hover:scale-[1.02] active:scale-[0.98]"
-          >
-            {isLoading ? '加载数据中...' : '开始挑战'}
-          </button>
+
+          {/* 每日次数提示 */}
+          {!isVip && dailyLimit !== null && (
+            <div className={`mb-4 rounded-xl px-4 py-3 text-sm flex items-center justify-between ${limitExceeded
+              ? 'bg-red-500/10 border border-red-500/30 text-red-400'
+              : dailyUsed >= dailyLimit - 1
+                ? 'bg-yellow-500/10 border border-yellow-500/30 text-yellow-400'
+                : 'bg-blue-500/10 border border-blue-500/30 text-blue-400'
+              }`}>
+              <span>
+                {limitExceeded
+                  ? '今日免费次数已用完'
+                  : `今日剩余次数：${dailyLimit - dailyUsed} / ${dailyLimit}`}
+              </span>
+              {limitExceeded && (
+                <span className="text-xs text-gray-500">明日重置</span>
+              )}
+            </div>
+          )}
+
+          {/* 次数用完时的 VIP 引导 */}
+          {limitExceeded ? (
+            <div className="space-y-3">
+              <div className="bg-gradient-to-r from-yellow-500/10 to-orange-500/10 border border-yellow-500/30 rounded-xl p-4 text-center">
+                <div className="text-yellow-400 font-bold mb-1">⭐ 开通 VIP 会员</div>
+                <div className="text-gray-400 text-xs">无限次回测 · 解锁科创板/北交所等特色板块</div>
+              </div>
+              <button
+                onClick={() => setShowPayment(true)}
+                className="w-full bg-gradient-to-r from-yellow-600 to-orange-600 hover:from-yellow-500 hover:to-orange-500 text-white font-bold py-3.5 lg:py-4 px-8 rounded-xl shadow-lg transition-all transform hover:scale-[1.02] active:scale-[0.98]"
+              >
+                立即开通 VIP (￥9.9/月)
+              </button>
+            </div>
+          ) : (
+            <button
+              onClick={handleStartGame}
+              disabled={isLoading}
+              className="w-full bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-500 hover:to-blue-400 text-white font-bold py-3.5 lg:py-4 px-8 rounded-xl transition-all duration-200 disabled:opacity-50 shadow-lg transform hover:scale-[1.02] active:scale-[0.98]"
+            >
+              {isLoading ? '加载数据中...' : '开始挑战'}
+            </button>
+          )}
         </div>
-        
+
         <div className="grid grid-cols-3 gap-3 lg:gap-6 w-full max-w-md text-center">
           <div className="bg-[#2A2D3C] p-3 lg:p-4 rounded-xl border border-gray-800 flex flex-col justify-center">
             <div className="text-gray-500 text-[10px] lg:text-xs mb-1">初始资金</div>
             <div className="text-sm lg:text-xl font-bold text-white whitespace-nowrap">100万</div>
           </div>
-          
+
           <div className="bg-[#2A2D3C] p-3 lg:p-4 rounded-xl border border-gray-800 relative group cursor-pointer">
             <div className="text-gray-500 text-[10px] lg:text-xs mb-1">标的范围</div>
-            <select 
+            <select
               value={selectedMarket}
               onChange={(e) => setSelectedMarket(e.target.value)}
               className="bg-transparent text-white font-bold text-sm lg:text-xl outline-none cursor-pointer w-full text-center appearance-none"
@@ -229,16 +312,18 @@ export default function TradePanel() {
               <ChevronRight size={12} className="rotate-90" />
             </div>
           </div>
-          
+
           <div className="bg-[#2A2D3C] p-3 lg:p-4 rounded-xl border border-gray-800 flex flex-col justify-center">
             <div className="text-gray-500 text-[10px] lg:text-xs mb-1">数据周期</div>
             <div className="text-sm lg:text-xl font-bold text-white whitespace-nowrap">10年</div>
           </div>
         </div>
+        <PaymentModal isOpen={showPayment} onClose={() => setShowPayment(false)} />
       </div>
     );
   }
 
+
   // 回测结束界面
   if (isFinished && stats) {
     return (
@@ -252,8 +337,8 @@ export default function TradePanel() {
                 <p className="text-gray-400 text-xs lg:text-sm">{useGameStore.getState().realName} ({useGameStore.getState().realCode})</p>
               </div>
             </div>
-            <button 
-              onClick={() => { setAutoPlay(false); reset(); }} 
+            <button
+              onClick={() => { setAutoPlay(false); reset(); }}
               disabled={isLoading}
               className="bg-gradient-to-r from-[#FD1050] to-[#FF4081] hover:from-[#FF4081] hover:to-[#FD1050] text-white font-bold py-2 px-4 lg:px-6 rounded-lg transition-all shadow-lg text-sm lg:text-base flex items-center gap-2"
             >
@@ -323,7 +408,7 @@ export default function TradePanel() {
             {isProfit ? '+' : ''}{(returnRate * 100).toFixed(2)}%
           </div>
         </div>
-        
+
         <div className="flex justify-between items-center text-[10px] lg:text-sm text-gray-500">
           <div className="flex gap-4">
             <div className="flex items-baseline gap-1">
@@ -345,7 +430,7 @@ export default function TradePanel() {
           )}
         </div>
       </div>
-      
+
       <div className="lg:flex-1 p-2 lg:p-5 flex flex-col gap-2 lg:gap-6 overflow-y-auto overflow-x-hidden w-full box-border scrollbar-thin scrollbar-thumb-gray-700">
         <div className="grid grid-cols-2 gap-2 lg:gap-4">
           {/* 价格 - 手机端标签与输入框同行 */}
@@ -356,7 +441,7 @@ export default function TradePanel() {
               <span className="font-mono text-xs lg:text-xl ml-auto">{currentPrice.toFixed(2)}</span>
             </div>
           </div>
-          
+
           {/* 数量 - 手机端标签与输入框同行 */}
           <div className="flex items-center gap-1 lg:flex-col lg:items-start lg:gap-2 min-w-0">
             <label className="text-[10px] lg:text-sm text-gray-500 shrink-0">数量</label>
@@ -369,30 +454,30 @@ export default function TradePanel() {
             />
           </div>
         </div>
-        
+
         <div className="grid grid-cols-2 gap-2 lg:gap-8 lg:block lg:space-y-4">
           <div className="grid grid-cols-4 gap-1">
-            {[1/4, 1/2, 3/4, 1].map((ratio) => (
+            {[1 / 4, 1 / 2, 3 / 4, 1].map((ratio) => (
               <button key={`buy-${ratio}`} onClick={() => setBuyPosition(ratio)} className="bg-[#2A2D3C] text-gray-400 text-[10px] py-1 rounded">
-                {ratio === 1 ? '全' : `${ratio*4}/4`}
+                {ratio === 1 ? '全' : `${ratio * 4}/4`}
               </button>
             ))}
           </div>
           <div className="grid grid-cols-4 gap-1">
-            {[1/4, 1/2, 3/4, 1].map((ratio) => (
+            {[1 / 4, 1 / 2, 3 / 4, 1].map((ratio) => (
               <button key={`sell-${ratio}`} onClick={() => setSellPosition(ratio)} className="bg-[#2A2D3C] text-gray-400 text-[10px] py-1 rounded">
-                {ratio === 1 ? '全' : `${ratio*4}/4`}
+                {ratio === 1 ? '全' : `${ratio * 4}/4`}
               </button>
             ))}
           </div>
         </div>
-        
+
         <div className="flex gap-2 lg:gap-4">
           <button onClick={handleBuy} className="flex-1 py-2.5 lg:py-5 rounded-xl lg:rounded-2xl font-bold text-sm lg:text-2xl bg-gradient-to-r from-[#FD1050] to-[#FF4081] text-white">买入</button>
           <button onClick={handleSell} className="flex-1 py-2.5 lg:py-5 rounded-xl lg:rounded-2xl font-bold text-sm lg:text-2xl bg-gradient-to-r from-[#00F0F0] to-[#00E5FF] text-[#12141C]">卖出</button>
         </div>
       </div>
-      
+
       <div className="p-1.5 lg:p-4 border-t border-[#2A2D3C] bg-[#191B28]">
         <div className="flex flex-row gap-1 lg:flex-col lg:gap-3">
           <div className="flex-1 flex gap-1 lg:gap-3">
@@ -428,7 +513,7 @@ function ReturnChartModal({ onClose, allKlines, history, initialIndex, currentIn
   const chartContainerRef = useRef<HTMLDivElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
   const chartRef = useRef<any>(null);
-  const [hs300Data, setHS300Data] = useState<{date: string, close: number}[]>([]);
+  const [hs300Data, setHS300Data] = useState<{ date: string, close: number }[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [isSharing, setIsSharing] = useState(false);
 
@@ -497,7 +582,7 @@ function ReturnChartModal({ onClose, allKlines, history, initialIndex, currentIn
     const hs300Map = new Map(hs300Data.map(d => [d.date, d.close]));
     const hs300StartPrice = hs300Data[0]?.close || 4000;
     let currentCost = 0;
-    
+
     for (let i = 0; i < visibleKlines.length; i++) {
       const kline = visibleKlines[i];
       const tradesAtPoint = history.filter(t => t.date === kline.date);
@@ -522,23 +607,23 @@ function ReturnChartModal({ onClose, allKlines, history, initialIndex, currentIn
       }
       if (asset > maxValue) maxValue = asset;
     }
-    
+
     // 计算详细指标
     const finalReturn = (strategy[strategy.length - 1]?.value || 0) / 100;
     const benchmarkReturn = benchmark.length > 0 ? (benchmark[benchmark.length - 1].value || 0) / 100 : 0;
-    
+
     // 1. 计算每日收益率 (用于 Beta, Sharpe, Volatility)
     const strategyDailyReturns = strategy.slice(1).map((s, i) => (s.value - strategy[i].value) / 100);
     const benchmarkDailyReturns = benchmark.slice(1).map((b, i) => (b.value - benchmark[i].value) / 100);
-    
+
     const riskFreeRate = 0.03; // 无风险利率 3%
-    
+
     // 2. 计算贝塔 (Beta)
     let beta = 1.0;
     if (strategyDailyReturns.length > 2 && benchmarkDailyReturns.length > 2) {
       const meanS = strategyDailyReturns.reduce((a, b) => a + b, 0) / strategyDailyReturns.length;
       const meanB = benchmarkDailyReturns.reduce((a, b) => a + b, 0) / benchmarkDailyReturns.length;
-      
+
       let covariance = 0;
       let varianceB = 0;
       for (let i = 0; i < Math.min(strategyDailyReturns.length, benchmarkDailyReturns.length); i++) {
@@ -547,10 +632,10 @@ function ReturnChartModal({ onClose, allKlines, history, initialIndex, currentIn
       }
       if (varianceB > 0) beta = covariance / varianceB;
     }
-    
+
     // 3. 计算阿尔法 (Alpha - 詹森指数)
     const alpha = stats.annualReturn - (riskFreeRate + beta * (benchmarkReturn / (visibleKlines.length / 250) - riskFreeRate));
-    
+
     // 4. 计算夏普比率 (Sharpe Ratio)
     let sharpeRatio = 0;
     if (strategyDailyReturns.length > 2) {
@@ -561,7 +646,7 @@ function ReturnChartModal({ onClose, allKlines, history, initialIndex, currentIn
         sharpeRatio = (stats.annualReturn - riskFreeRate) / annualVol;
       }
     }
-    
+
     return {
       strategyData: strategy,
       benchmarkData: benchmark,
@@ -596,7 +681,7 @@ function ReturnChartModal({ onClose, allKlines, history, initialIndex, currentIn
       grid: { vertLines: { color: '#2A2D3C' }, horzLines: { color: '#2A2D3C' } },
       width: chartContainerRef.current.clientWidth, height: 240,
       crosshair: { mode: 1, vertLine: { color: '#6B7280', width: 1, style: 3 }, horzLine: { color: '#6B7280', width: 1, style: 3 } },
-      rightPriceScale: { 
+      rightPriceScale: {
         borderColor: '#374151', alignLabels: true, autoScale: true,
         scaleMargins: { top: 0.1, bottom: 0.1 }, minimumWidth: 35,
       },

frontend/src/components/UserMenu.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+/**
+ * 用户菜单组件
+ * - 已登录：显示用户名、VIP 徽章、退出按钮
+ * - 未登录：显示登录/注册按钮
+ */
+
+import { useState, useEffect, useRef } from 'react';
+import { User, LogOut, Crown, LogIn } from 'lucide-react';
+import { useAuthStore } from '@/store/authStore';
+import AuthModal from './AuthModal';
+import PaymentModal from './PaymentModal';
+
+interface UserMenuProps {
+    compact?: boolean; // 紧凑模式（游戏进行中）
+}
+
+export default function UserMenu({ compact = false }: UserMenuProps) {
+    const { username, isVip, vipExpireAt, isInitialized, logout, initialize } = useAuthStore();
+    const [showAuthModal, setShowAuthModal] = useState(false);
+    const [showPayment, setShowPayment] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    // 初始化认证状态
+    useEffect(() => {
+        if (!isInitialized) {
+            initialize();
+        }
+    }, [isInitialized, initialize]);
+
+    // 点击外部关闭下拉
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                setShowDropdown(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    const handleLogout = async () => {
+        setShowDropdown(false);
+        await logout();
+    };
+
+    // 格式化 VIP 到期时间
+    const formatExpireDate = (dateStr: string | null) => {
+        if (!dateStr) return '';
+        const date = new Date(dateStr);
+        const now = new Date();
+        const diffDays = Math.ceil((date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+        if (diffDays <= 0) return '已过期';
+        if (diffDays <= 7) return `${diffDays}天后到期`;
+        return dateStr.split(' ')[0]; // 只显示日期部分
+    };
+
+    if (!isInitialized) return null;
+
+    // 未登录状态
+    if (!username) {
+        return (
+            <>
+                <button
+                    onClick={() => setShowAuthModal(true)}
+                    className={`flex items-center gap-1.5 bg-blue-600/20 hover:bg-blue-600/30 text-blue-400 hover:text-blue-300 rounded-lg transition-colors ${compact ? 'px-2 py-1 text-xs' : 'px-3 py-2 text-sm'
+                        }`}
+                >
+                    <LogIn size={compact ? 12 : 14} />
+                    <span>登录</span>
+                </button>
+                {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
+            </>
+        );
+    }
+
+    // 已登录状态
+    return (
+        <>
+            <div className="relative" ref={dropdownRef}>
+                <button
+                    onClick={() => setShowDropdown(!showDropdown)}
+                    className={`flex items-center gap-1.5 bg-[#2A2D3C] hover:bg-[#35394B] rounded-lg transition-colors ${compact ? 'px-2 py-1 text-xs' : 'px-3 py-2 text-sm'
+                        }`}
+                >
+                    <div className="w-5 h-5 bg-blue-600/30 rounded-full flex items-center justify-center">
+                        <User size={12} className="text-blue-400" />
+                    </div>
+                    <span className="text-gray-200 font-medium max-w-[80px] truncate">{username}</span>
+                    {isVip && (
+                        <Crown size={compact ? 10 : 12} className="text-yellow-500" />
+                    )}
+                </button>
+
+                {/* 下拉菜单 */}
+                {showDropdown && (
+                    <div className="absolute right-0 top-full mt-1 w-48 bg-[#2A2D3C] rounded-xl shadow-2xl border border-gray-700/50 z-50 overflow-hidden">
+                        {/* 用户信息 */}
+                        <div className="px-4 py-3 border-b border-gray-700/30">
+                            <div className="text-white text-sm font-medium">{username}</div>
+                            {isVip ? (
+                                <div className="flex items-center gap-1 mt-1">
+                                    <Crown size={11} className="text-yellow-500" />
+                                    <span className="text-yellow-500 text-xs">VIP 会员</span>
+                                    <span className="text-gray-500 text-xs ml-1">
+                                        {formatExpireDate(vipExpireAt)}
+                                    </span>
+                                </div>
+                            ) : (
+                                <div className="text-gray-500 text-xs mt-1">普通用户</div>
+                            )}
+                        </div>
+
+                        {/* 操作 */}
+                        <div className="p-1 space-y-1">
+                            {!isVip && (
+                                <button
+                                    onClick={() => { setShowDropdown(false); setShowPayment(true); }}
+                                    className="w-full flex items-center gap-2 px-3 py-2 text-yellow-500 hover:bg-yellow-500/10 rounded-lg text-sm transition-colors font-medium border border-yellow-500/20"
+                                >
+                                    <Crown size={14} />
+                                    开通会员
+                                </button>
+                            )}
+                            <button
+                                onClick={handleLogout}
+                                className="w-full flex items-center gap-2 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/50 rounded-lg text-sm transition-colors"
+                            >
+                                <LogOut size={14} />
+                                退出登录
+                            </button>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
+            <PaymentModal isOpen={showPayment} onClose={() => setShowPayment(false)} />
+        </>
+    );
+}

frontend/src/lib/api.ts

@@ -34,6 +34,18 @@ export interface HealthResponse {
   stocks_count: number;
 }
 
+export class ApiError extends Error {
+  status: number;
+  data: any;
+
+  constructor(message: string, status: number, data: any) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+    this.data = data;
+  }
+}
+
 async function fetchAPI<T>(path: string, options?: RequestInit): Promise<T> {
   const url = `${API_BASE}${path}`;
   const response = await fetch(url, {
@@ -45,8 +57,18 @@ async function fetchAPI<T>(path: string, options?: RequestInit): Promise<T> {
   });
 
   if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: 'Unknown error' }));
-    throw new Error(error.error || error.detail || 'API request failed');
+    const errorData = await response.json().catch(() => ({ detail: 'Unknown error' }));
+    // 尝试提取错误信息
+    let message = 'API request failed';
+    if (typeof errorData.detail === 'string') {
+      message = errorData.detail;
+    } else if (errorData.detail && errorData.detail.message) {
+      message = errorData.detail.message;
+    } else if (errorData.error) {
+      message = errorData.error;
+    }
+
+    throw new ApiError(message, response.status, errorData);
   }
 
   return response.json();
@@ -75,9 +97,25 @@ export interface VipStatusResponse {
   vip_expire_at: string | null;
 }
 
+export interface VipStatusResponse {
+  is_vip: boolean;
+  vip_expire_at: string | null;
+}
+
+export interface CreatePaymentResponse {
+  order_id: string;
+  pay_url: string;
+  price: number;
+  type: number;
+  param: string;
+  sign: string;
+  is_mock: boolean;
+}
+
+
 export const api = {
   health: () => fetchAPI<HealthResponse>('/api/health'),
-  
+
   startGame: (mode = 'random', market?: string, token?: string) => {
     const params = new URLSearchParams({ mode });
     if (market) params.append('market', market);
@@ -85,14 +123,14 @@ export const api = {
     if (token) headers['Authorization'] = `Bearer ${token}`;
     return fetchAPI<GameStartResponse>(`/api/game/start?${params}`, { headers });
   },
-  
+
   getKline: (code: string, start?: string, end?: string) => {
     const params = new URLSearchParams({ code });
     if (start) params.append('start', start);
     if (end) params.append('end', end);
     return fetchAPI<KLine[]>(`/api/kline?${params}`);
   },
-  
+
   getHS300Index: (start?: string, end?: string) => {
     const params = new URLSearchParams();
     if (start) params.append('start', start);
@@ -121,4 +159,27 @@ export const api = {
     fetchAPI<VipStatusResponse>('/api/v1/vip/status', {
       headers: { Authorization: `Bearer ${token}` },
     }),
+
+  logout: (token: string) =>
+    fetchAPI<{ status: string }>('/api/v1/auth/logout', {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token}` },
+    }),
+
+  getUsageToday: (token: string) =>
+    fetchAPI<{ used: number; limit: number | null; remaining: number | null; is_vip: boolean }>(
+      '/api/v1/usage/today',
+      { headers: { Authorization: `Bearer ${token}` } }
+    ),
+
+  createPayment: (type: number, token: string) =>
+    fetchAPI<CreatePaymentResponse>('/v1/payment/create', {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token}` },
+      body: JSON.stringify({ type }),
+    }),
+
+  async checkPaymentStatus(orderId: string): Promise<{ code: number; data: { status: number } }> {
+    return fetchAPI(`/vmq/checkOrder?payId=${orderId}`);
+  },
 };

frontend/src/store/authStore.ts

@@ -0,0 +1,181 @@
+/**
+ * 用户认证状态管理 Store
+ * 管理 token、用户信息、VIP 状态，持久化到 localStorage
+ */
+
+import { create } from 'zustand';
+import { api } from '@/lib/api';
+
+export interface AuthState {
+  // 状态
+  token: string | null;
+  userId: number | null;
+  username: string | null;
+  isVip: boolean;
+  vipExpireAt: string | null;
+  dailyUsed: number;
+  dailyRemaining: number | null;  // null = VIP 无限制
+  dailyLimit: number | null;
+  isLoading: boolean;
+  isInitialized: boolean;
+
+  // Actions
+  login: (username: string, password: string) => Promise<void>;
+  register: (username: string, password: string) => Promise<void>;
+  logout: () => Promise<void>;
+  fetchUserInfo: () => Promise<void>;
+  fetchUsage: () => Promise<void>;
+  initialize: () => Promise<void>;
+}
+
+const TOKEN_KEY = 'auth_token';
+
+export const useAuthStore = create<AuthState>((set, get) => ({
+  token: null,
+  userId: null,
+  username: null,
+  isVip: false,
+  vipExpireAt: null,
+  dailyUsed: 0,
+  dailyRemaining: null,
+  dailyLimit: null,
+  isLoading: false,
+  isInitialized: false,
+
+  initialize: async () => {
+    if (typeof window === 'undefined') {
+      set({ isInitialized: true });
+      return;
+    }
+
+    const savedToken = localStorage.getItem(TOKEN_KEY);
+    if (!savedToken) {
+      set({ isInitialized: true });
+      return;
+    }
+
+    set({ token: savedToken, isLoading: true });
+
+    try {
+      const userInfo = await api.me(savedToken);
+      set({
+        userId: userInfo.user_id,
+        username: userInfo.username,
+        isVip: userInfo.is_vip,
+        vipExpireAt: userInfo.vip_expire_at,
+        isInitialized: true,
+        isLoading: false,
+      });
+      // 同时获取今日使用量
+      try {
+        const usage = await api.getUsageToday(savedToken);
+        set({ dailyUsed: usage.used, dailyRemaining: usage.remaining, dailyLimit: usage.limit });
+      } catch { /* 静默失败 */ }
+    } catch {
+      // Token 过期或无效，清除
+      localStorage.removeItem(TOKEN_KEY);
+      set({
+        token: null,
+        userId: null,
+        username: null,
+        isVip: false,
+        vipExpireAt: null,
+        isInitialized: true,
+        isLoading: false,
+      });
+    }
+  },
+
+  login: async (username: string, password: string) => {
+    set({ isLoading: true });
+    try {
+      const res = await api.login(username, password);
+      localStorage.setItem(TOKEN_KEY, res.token);
+      set({
+        token: res.token,
+        userId: res.user_id,
+        username: res.username,
+        isLoading: false,
+      });
+      // Fetch VIP info and usage
+      try {
+        const vipInfo = await api.vipStatus(res.token);
+        set({ isVip: vipInfo.is_vip, vipExpireAt: vipInfo.vip_expire_at });
+        const usage = await api.getUsageToday(res.token);
+        set({ dailyUsed: usage.used, dailyRemaining: usage.remaining, dailyLimit: usage.limit });
+      } catch {
+        // VIP/usage 查询失败不影响登录
+      }
+    } catch (error) {
+      set({ isLoading: false });
+      throw error;
+    }
+  },
+
+  register: async (username: string, password: string) => {
+    set({ isLoading: true });
+    try {
+      const res = await api.register(username, password);
+      localStorage.setItem(TOKEN_KEY, res.token);
+      set({
+        token: res.token,
+        userId: res.user_id,
+        username: res.username,
+        isVip: false,
+        vipExpireAt: null,
+        isLoading: false,
+      });
+    } catch (error) {
+      set({ isLoading: false });
+      throw error;
+    }
+  },
+
+  logout: async () => {
+    const { token } = get();
+    if (token) {
+      try {
+        await api.logout(token);
+      } catch {
+        // 忽略登出接口错误
+      }
+    }
+    localStorage.removeItem(TOKEN_KEY);
+    set({
+      token: null,
+      userId: null,
+      username: null,
+      isVip: false,
+      vipExpireAt: null,
+      dailyUsed: 0,
+      dailyRemaining: null,
+      dailyLimit: null,
+    });
+  },
+
+  fetchUsage: async () => {
+    const { token } = get();
+    if (!token) return;
+    try {
+      const usage = await api.getUsageToday(token);
+      set({ dailyUsed: usage.used, dailyRemaining: usage.remaining, dailyLimit: usage.limit });
+    } catch { /* 静默失败 */ }
+  },
+
+  fetchUserInfo: async () => {
+    const { token } = get();
+    if (!token) return;
+
+    try {
+      const userInfo = await api.me(token);
+      set({
+        userId: userInfo.user_id,
+        username: userInfo.username,
+        isVip: userInfo.is_vip,
+        vipExpireAt: userInfo.vip_expire_at,
+      });
+    } catch {
+      // 静默失败
+    }
+  },
+}));

package.json

@@ -1,6 +1,9 @@
 {
+  "scripts": {
+    "sync-users": "python backend/scripts/upload_users.py"
+  },
   "dependencies": {
     "html2canvas": "^1.4.1",
     "qrcode.react": "^4.2.0"
   }
-}
+}

scripts/upload_users.py

@@ -0,0 +1,17 @@
+import os
+import sys
+from pathlib import Path
+
+# 添加项目根目录到路径
+project_root = Path(__file__).parent.parent
+sys.path.insert(0, str(project_root / "backend"))
+
+from dotenv import load_dotenv
+load_dotenv(project_root / ".env")
+
+from app.database_user import upload_user_db_to_hf
+
+if __name__ == "__main__":
+    print("Starting user database upload to HF Dataset...")
+    upload_user_db_to_hf()
+    print("Upload completed!")