├── logoduolai.png
├── public
    ├── logoduolai.png
    └── index.html
├── frontend
    ├── logoduolai.png
    └── index.html
├── .gitignore
├── backend
    ├── requirements.txt
    └── main.py
├── vercel.json
├── start.sh
├── README.md
└── api
    └── markets.py


/logoduolai.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/duolaAmengweb3/opinionWhale/HEAD/logoduolai.png


--------------------------------------------------------------------------------
/public/logoduolai.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/duolaAmengweb3/opinionWhale/HEAD/public/logoduolai.png


--------------------------------------------------------------------------------
/frontend/logoduolai.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/duolaAmengweb3/opinionWhale/HEAD/frontend/logoduolai.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vercel
2 | .env*
3 | venv/
4 | __pycache__/
5 | *.pyc
6 | .DS_Store
7 | node_modules/
8 | .vscode/
9 | 


--------------------------------------------------------------------------------
/backend/requirements.txt:
--------------------------------------------------------------------------------
1 | fastapi>=0.104.0
2 | uvicorn>=0.24.0
3 | pydantic>=2.0.0
4 | opinion-clob-sdk>=0.4.2
5 | requests>=2.31.0
6 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": 2,
 3 |   "builds": [
 4 |     {
 5 |       "src": "api/markets.py",
 6 |       "use": "@vercel/python",
 7 |       "config": {
 8 |         "maxDuration": 60
 9 |       }
10 |     },
11 |     {
12 |       "src": "public/**",
13 |       "use": "@vercel/static"
14 |     }
15 |   ],
16 |   "routes": [
17 |     {
18 |       "src": "/api/markets",
19 |       "dest": "/api/markets.py"
20 |     },
21 |     {
22 |       "src": "/(.*)",
23 |       "dest": "/public/$1"
24 |     }
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/start.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | # Opinion Whale Tracker 启动脚本
 4 | 
 5 | echo "================================="
 6 | echo "Opinion Whale Tracker"
 7 | echo "================================="
 8 | 
 9 | # 检查虚拟环境
10 | if [ ! -d "venv" ]; then
11 |     echo "Creating virtual environment..."
12 |     python3 -m venv venv
13 | fi
14 | 
15 | # 激活虚拟环境
16 | source venv/bin/activate
17 | 
18 | # 安装依赖
19 | echo "Installing dependencies..."
20 | pip install -q -r backend/requirements.txt
21 | 
22 | # 启动后端服务 (后台运行)
23 | echo "Starting backend server on port 8000..."
24 | cd backend
25 | uvicorn main:app --host 0.0.0.0 --port 8000 --lifespan off &
26 | BACKEND_PID=$!
27 | cd ..
28 | 
29 | # 等待后端启动
30 | sleep 3
31 | 
32 | # 启动前端服务
33 | echo "Starting frontend server on port 8080..."
34 | cd frontend
35 | python3 -m http.server 8080 &
36 | FRONTEND_PID=$!
37 | cd ..
38 | 
39 | echo ""
40 | echo "================================="
41 | echo "Services started!"
42 | echo "================================="
43 | echo "Backend API: http://localhost:8000"
44 | echo "Frontend UI: http://localhost:8080"
45 | echo "API Docs:    http://localhost:8000/docs"
46 | echo "================================="
47 | echo ""
48 | echo "Press Ctrl+C to stop all services"
49 | 
50 | # 等待用户中断
51 | trap "kill $BACKEND_PID $FRONTEND_PID 2>/dev/null; exit" SIGINT SIGTERM
52 | 
53 | wait
54 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Opinion Whale Tracker
 2 | 
 3 | 面向预测市场的“巨鲸监控”与市场可视化项目，包含 Python FastAPI 后端与简单前端页面。后端聚合 Opinion CLOB API 的市场与订单簿数据，提炼买卖墙与大额委托，前端展示基础信息。
 4 | 
 5 | ## 技术栈
 6 | 
 7 | - 后端：`FastAPI` + `pydantic`，结构清晰、性能优良
 8 | - SDK：`opinion_clob_sdk`（封装对 Opinion 代理网关的访问）
 9 | - 运行环境：Python 3.10+
10 | - 前端：静态页面（`frontend/` 与 `public/`），通过浏览器访问后端 API
11 | 
12 | ## 目录结构
13 | 
14 | - `backend/`：后端服务入口与业务逻辑（`main.py`）
15 | - `api/`：无框架的简易 HTTP 处理器示例（`markets.py`）
16 | - `frontend/`、`public/`：静态资源与示例页面
17 | - `requirements.txt`：后端依赖清单（位于 `backend/`）
18 | 
19 | ## 环境变量
20 | 
21 | - `OPINION_API_KEY`：后端访问 Opinion 代理网关所需的 API Key（必填）
22 | 
23 | 为保证安全，代码中不再包含任何密钥或令牌。请在本地或部署环境以环境变量方式注入，不要将 `.env*` 文件提交到仓库。
24 | 
25 | ## 安装与运行
26 | 
27 | 1. 创建虚拟环境并安装依赖：
28 |    ```bash
29 |    python3 -m venv .venv
30 |    source .venv/bin/activate
31 |    pip install -r backend/requirements.txt
32 |    ```
33 | 2. 设置环境变量：
34 |    ```bash
35 |    export OPINION_API_KEY="<your-key>"
36 |    ```
37 | 3. 启动后端：
38 |    ```bash
39 |    python backend/main.py
40 |    # 或使用 uvicorn：
41 |    uvicorn backend.main:app --host 0.0.0.0 --port 8000
42 |    ```
43 | 
44 | 服务启动后，访问：
45 | 
46 | - `GET /`：健康检查
47 | - `GET /api/markets`：聚合市场与巨鲸信息
48 | - `GET /api/markets/{market_id}`：单市场详情
49 | - `GET /api/whales?threshold=500`：按阈值过滤的大额委托/买卖墙
50 | - `GET /api/orderbook/{token_id}`：订单簿（bids/asks）
51 | - `GET /api/stats`：总览统计
52 | 
53 | 示例请求：
54 | 
55 | ```bash
56 | curl http://localhost:8000/api/markets
57 | curl "http://localhost:8000/api/whales?threshold=1000"
58 | ```
59 | 
60 | ## 关键实现
61 | 
62 | - 市场聚合：分页拉取并合并市场列表，兼容二元与分类市场结构
63 | - 价格/订单簿：对 `yes_token_id` 拉取当前价格与订单簿，计算买卖墙价值
64 | - 巨鲸检测：基于可配置阈值（默认 500 USD）识别买卖侧的大额挂单
65 | - 缓存与刷新：定时刷新缓存，避免频繁调用上游 API
66 | 
67 | 后端核心入口：`backend/main.py`。
68 | 
69 | ## 安全与合规
70 | 
71 | - 绝不在仓库中保存密钥、令牌或私人配置
72 | - `.gitignore` 已忽略常见敏感与本地文件（`venv/`、`.env*`、`__pycache__/` 等）
73 | - 若未设置 `OPINION_API_KEY`，后端将返回空数据而非抛出敏感信息
74 | 
75 | ## 部署建议
76 | 
77 | - 将 `OPINION_API_KEY` 作为托管平台的环境变量注入（如 Vercel/Render/Railway 等）
78 | - 使用反向代理或边缘缓存降低上游 API 压力和时延
79 | - 配置健康检查与日志收集，监控刷新任务与调用错误率
80 | 
81 | ## 开发提示
82 | 
83 | - 添加更多数据源：可在 `process_market` 与 `detect_whales` 中扩展策略
84 | - 指标与告警：接入 Prometheus/Grafana，针对买卖墙变动做告警
85 | - 前端可视化：将 `whales` 列表与 `orderbook` 转为图形展示，提高可读性
86 | 
87 | ## 许可
88 | 
89 | 本项目用于技术演示与学习目的，请在遵守上游 API 使用条款的前提下进行二次开发。
90 | 
91 | 


--------------------------------------------------------------------------------
/api/markets.py:
--------------------------------------------------------------------------------
  1 | from http.server import BaseHTTPRequestHandler
  2 | import json
  3 | import traceback
  4 | import requests
  5 | from datetime import datetime
  6 | import os
  7 | 
  8 | # Configuration
  9 | API_KEY = os.environ.get("OPINION_API_KEY", "")
 10 | API_HOST = "https://proxy.opinion.trade:8443"
 11 | WHALE_THRESHOLD = 500
 12 | 
 13 | def api_request(endpoint, params=None):
 14 |     """Direct API request to Opinion"""
 15 |     headers = {"Content-Type": "application/json"}
 16 |     if API_KEY:
 17 |         headers["x-api-key"] = API_KEY
 18 |     url = f"{API_HOST}{endpoint}"
 19 |     try:
 20 |         resp = requests.get(url, headers=headers, params=params, timeout=30)
 21 |         return resp.json()
 22 |     except Exception as e:
 23 |         return {"error": str(e)}
 24 | 
 25 | def fetch_markets_data():
 26 |     errors = []
 27 |     all_markets = []
 28 | 
 29 |     # Try to get markets using direct API call
 30 |     for page in range(1, 4):
 31 |         try:
 32 |             data = api_request("/markets", {"page": page, "limit": 20})
 33 | 
 34 |             if "error" in data:
 35 |                 errors.append(f"Page {page}: {data['error']}")
 36 |                 break
 37 | 
 38 |             # Try different response structures
 39 |             markets_list = None
 40 |             if isinstance(data, dict):
 41 |                 if "result" in data and data["result"]:
 42 |                     if isinstance(data["result"], dict) and "list" in data["result"]:
 43 |                         markets_list = data["result"]["list"]
 44 |                     elif isinstance(data["result"], list):
 45 |                         markets_list = data["result"]
 46 |                 elif "data" in data:
 47 |                     if isinstance(data["data"], list):
 48 |                         markets_list = data["data"]
 49 |                     elif isinstance(data["data"], dict) and "list" in data["data"]:
 50 |                         markets_list = data["data"]["list"]
 51 |                 elif "markets" in data:
 52 |                     markets_list = data["markets"]
 53 |                 elif "list" in data:
 54 |                     markets_list = data["list"]
 55 |             elif isinstance(data, list):
 56 |                 markets_list = data
 57 | 
 58 |             if not markets_list:
 59 |                 errors.append(f"Page {page}: Unknown response structure: {json.dumps(data)[:500]}")
 60 |                 break
 61 | 
 62 |             all_markets.extend(markets_list)
 63 | 
 64 |         except Exception as e:
 65 |             errors.append(f"Page {page}: {str(e)}")
 66 |             break
 67 | 
 68 |     if not all_markets:
 69 |         return {
 70 |             "error": "No markets fetched",
 71 |             "errors": errors,
 72 |             "markets": [],
 73 |             "whales": [],
 74 |             "total_volume": 0,
 75 |             "whale_count": 0,
 76 |             "updated_at": datetime.now().isoformat()
 77 |         }
 78 | 
 79 |     processed_markets = []
 80 |     whales = []
 81 | 
 82 |     for m in all_markets[:20]:
 83 |         try:
 84 |             # Handle both dict and object-like responses
 85 |             if isinstance(m, dict):
 86 |                 market_id = m.get("market_id") or m.get("id")
 87 |                 market_title = m.get("market_title") or m.get("title") or m.get("question") or ""
 88 |                 yes_token_id = m.get("yes_token_id") or m.get("yesTokenId")
 89 |                 volume = float(m.get("volume", 0) or 0)
 90 |                 status = m.get("status_enum") or m.get("status") or "Active"
 91 |             else:
 92 |                 market_id = getattr(m, "market_id", None) or getattr(m, "id", None)
 93 |                 market_title = getattr(m, "market_title", "") or getattr(m, "title", "")
 94 |                 yes_token_id = getattr(m, "yes_token_id", None)
 95 |                 volume = float(getattr(m, "volume", 0) or 0)
 96 |                 status = getattr(m, "status_enum", "Active") or "Active"
 97 | 
 98 |             if not market_id:
 99 |                 continue
100 | 
101 |             outcomes = []
102 | 
103 |             if yes_token_id:
104 |                 token_id = yes_token_id
105 |                 price = 0
106 |                 bid_depth = 0
107 |                 ask_depth = 0
108 | 
109 |                 # Get price
110 |                 try:
111 |                     price_data = api_request("/price", {"token_id": token_id})
112 |                     if price_data and "result" in price_data and price_data["result"]:
113 |                         price = float(price_data["result"].get("price", 0) or 0)
114 |                 except:
115 |                     pass
116 | 
117 |                 # Get orderbook
118 |                 try:
119 |                     ob_data = api_request("/orderbook", {"token_id": token_id})
120 |                     if ob_data and "result" in ob_data and ob_data["result"]:
121 |                         bids = ob_data["result"].get("bids", []) or []
122 |                         asks = ob_data["result"].get("asks", []) or []
123 |                         for b in bids:
124 |                             bid_depth += float(b.get("size", 0) or 0)
125 |                         for a in asks:
126 |                             ask_depth += float(a.get("size", 0) or 0)
127 |                 except:
128 |                     pass
129 | 
130 |                 bid_value = bid_depth * price if price > 0 else 0
131 |                 ask_value = ask_depth * (1 - price) if 0 < price < 1 else ask_depth * 0.5
132 | 
133 |                 outcomes.append({
134 |                     "title": "YES",
135 |                     "token_id": str(token_id)[:20] + "...",
136 |                     "price": price,
137 |                     "bid_depth": bid_value,
138 |                     "ask_depth": ask_value
139 |                 })
140 | 
141 |                 if bid_value >= WHALE_THRESHOLD:
142 |                     whales.append({
143 |                         "market_id": market_id,
144 |                         "market_title": market_title,
145 |                         "outcome": "YES",
146 |                         "side": "BUY",
147 |                         "price": price,
148 |                         "size": bid_depth,
149 |                         "value": bid_value
150 |                     })
151 |                 if ask_value >= WHALE_THRESHOLD:
152 |                     whales.append({
153 |                         "market_id": market_id,
154 |                         "market_title": market_title,
155 |                         "outcome": "YES",
156 |                         "side": "SELL",
157 |                         "price": price,
158 |                         "size": ask_depth,
159 |                         "value": ask_value
160 |                     })
161 | 
162 |             if outcomes:
163 |                 processed_markets.append({
164 |                     "market_id": market_id,
165 |                     "title": market_title,
166 |                     "volume": volume,
167 |                     "status": status,
168 |                     "outcomes": outcomes
169 |                 })
170 |         except Exception as e:
171 |             errors.append(f"Market processing: {str(e)}")
172 |             continue
173 | 
174 |     whales.sort(key=lambda x: x["value"], reverse=True)
175 | 
176 |     return {
177 |         "markets": processed_markets,
178 |         "whales": whales,
179 |         "total_volume": sum(m["volume"] for m in processed_markets),
180 |         "whale_count": len(whales),
181 |         "updated_at": datetime.now().isoformat(),
182 |         "debug": {
183 |             "total_fetched": len(all_markets),
184 |             "processed": len(processed_markets),
185 |             "errors": errors if errors else None
186 |         }
187 |     }
188 | 
189 | 
190 | class handler(BaseHTTPRequestHandler):
191 |     def do_GET(self):
192 |         try:
193 |             data = fetch_markets_data()
194 | 
195 |             self.send_response(200)
196 |             self.send_header('Content-Type', 'application/json')
197 |             self.send_header('Access-Control-Allow-Origin', '*')
198 |             self.send_header('Cache-Control', 'public, max-age=30')
199 |             self.end_headers()
200 | 
201 |             self.wfile.write(json.dumps(data).encode())
202 |         except Exception as e:
203 |             self.send_response(500)
204 |             self.send_header('Content-Type', 'application/json')
205 |             self.send_header('Access-Control-Allow-Origin', '*')
206 |             self.end_headers()
207 | 
208 |             error_data = {
209 |                 "error": str(e),
210 |                 "traceback": traceback.format_exc()
211 |             }
212 |             self.wfile.write(json.dumps(error_data).encode())
213 | 
214 |     def do_OPTIONS(self):
215 |         self.send_response(200)
216 |         self.send_header('Access-Control-Allow-Origin', '*')
217 |         self.send_header('Access-Control-Allow-Methods', 'GET, OPTIONS')
218 |         self.send_header('Access-Control-Allow-Headers', 'Content-Type')
219 |         self.end_headers()
220 | 


--------------------------------------------------------------------------------
/backend/main.py:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env python3
  2 | """
  3 | Opinion Whale Tracker Backend
  4 | FastAPI 后端服务 - 提供市场数据和巨鲸监控 API
  5 | """
  6 | 
  7 | import asyncio
  8 | import os
  9 | from fastapi import FastAPI, HTTPException
 10 | from fastapi.middleware.cors import CORSMiddleware
 11 | from fastapi.responses import JSONResponse
 12 | from pydantic import BaseModel
 13 | from typing import List, Optional
 14 | import json
 15 | from datetime import datetime
 16 | 
 17 | from opinion_clob_sdk import Client
 18 | 
 19 | # Configuration
 20 | API_KEY = os.environ.get("OPINION_API_KEY", "")
 21 | WHALE_THRESHOLD = 500
 22 | 
 23 | # Initialize FastAPI
 24 | app = FastAPI(
 25 |     title="Opinion Whale Tracker API",
 26 |     description="巨鲸监控平台后端 API",
 27 |     version="1.0.0"
 28 | )
 29 | 
 30 | # CORS
 31 | app.add_middleware(
 32 |     CORSMiddleware,
 33 |     allow_origins=["*"],
 34 |     allow_credentials=True,
 35 |     allow_methods=["*"],
 36 |     allow_headers=["*"],
 37 | )
 38 | 
 39 | # Data Models
 40 | class Outcome(BaseModel):
 41 |     title: str
 42 |     token_id: str
 43 |     price: float
 44 |     bid_depth: float
 45 |     ask_depth: float
 46 | 
 47 | class Market(BaseModel):
 48 |     market_id: int
 49 |     title: str
 50 |     volume: float
 51 |     status: str
 52 |     outcomes: List[Outcome]
 53 | 
 54 | class WhaleOrder(BaseModel):
 55 |     market_id: int
 56 |     market_title: str
 57 |     outcome: str
 58 |     side: str
 59 |     price: float
 60 |     size: float
 61 |     value: float
 62 | 
 63 | class MarketsResponse(BaseModel):
 64 |     markets: List[Market]
 65 |     whales: List[WhaleOrder]
 66 |     total_volume: float
 67 |     whale_count: int
 68 |     updated_at: str
 69 | 
 70 | # Global cache
 71 | cache = {
 72 |     "data": None,
 73 |     "updated_at": None
 74 | }
 75 | 
 76 | def get_opinion_client():
 77 |     return Client(
 78 |         host='https://proxy.opinion.trade:8443',
 79 |         apikey=API_KEY,
 80 |         chain_id=56,
 81 |         rpc_url='https://bsc-dataseed.binance.org',
 82 |         private_key='0x0000000000000000000000000000000000000000000000000000000000000001',
 83 |         multi_sig_addr='0x2f0c9ba178c669b8a21173bd83b267bd9200ad6d'
 84 |     )
 85 | 
 86 | def fetch_all_markets():
 87 |     """获取所有市场数据"""
 88 |     client = get_opinion_client()
 89 |     all_markets = []
 90 | 
 91 |     # 获取市场列表
 92 |     for page in range(1, 8):
 93 |         try:
 94 |             markets = client.get_markets(page=page, limit=20)
 95 |             if not markets.result.list:
 96 |                 break
 97 |             all_markets.extend(markets.result.list)
 98 |         except Exception as e:
 99 |             print(f"Error fetching page {page}: {e}")
100 |             break
101 | 
102 |     return all_markets
103 | 
104 | def process_market(client, market) -> Optional[Market]:
105 |     """处理单个市场，获取详细信息"""
106 |     try:
107 |         outcomes = []
108 | 
109 |         # 检查是否是二元市场
110 |         if market.yes_token_id:
111 |             # 二元市场
112 |             token_id = market.yes_token_id
113 |             price = 0
114 |             bid_depth = 0
115 |             ask_depth = 0
116 | 
117 |             try:
118 |                 price_data = client.get_latest_price(token_id=token_id)
119 |                 if price_data.result.price:
120 |                     price = float(price_data.result.price)
121 |             except:
122 |                 pass
123 | 
124 |             try:
125 |                 ob = client.get_orderbook(token_id=token_id)
126 |                 if ob.result.bids:
127 |                     bid_depth = sum(float(b.size) for b in ob.result.bids)
128 |                 if ob.result.asks:
129 |                     ask_depth = sum(float(a.size) for a in ob.result.asks)
130 |             except:
131 |                 pass
132 | 
133 |             outcomes.append(Outcome(
134 |                 title="YES",
135 |                 token_id=token_id[:20] + "...",
136 |                 price=price,
137 |                 bid_depth=bid_depth * price,
138 |                 ask_depth=ask_depth * (1 - price) if price < 1 else ask_depth * 0.5
139 |             ))
140 | 
141 |         else:
142 |             # 分类市场 - 获取子市场
143 |             try:
144 |                 cat = client.get_categorical_market(market_id=market.market_id)
145 |                 if cat.result.data and cat.result.data.child_markets:
146 |                     for cm in cat.result.data.child_markets:
147 |                         token_id = cm.yes_token_id
148 |                         price = 0
149 |                         bid_depth = 0
150 |                         ask_depth = 0
151 | 
152 |                         if token_id:
153 |                             try:
154 |                                 price_data = client.get_latest_price(token_id=token_id)
155 |                                 if price_data.result.price:
156 |                                     price = float(price_data.result.price)
157 |                             except:
158 |                                 pass
159 | 
160 |                             try:
161 |                                 ob = client.get_orderbook(token_id=token_id)
162 |                                 if ob.result.bids:
163 |                                     bid_depth = sum(float(b.price) * float(b.size) for b in ob.result.bids)
164 |                                 if ob.result.asks:
165 |                                     ask_depth = sum(float(a.price) * float(a.size) for a in ob.result.asks)
166 |                             except:
167 |                                 pass
168 | 
169 |                         outcomes.append(Outcome(
170 |                             title=cm.market_title,
171 |                             token_id=token_id[:20] + "..." if token_id else "",
172 |                             price=price,
173 |                             bid_depth=bid_depth,
174 |                             ask_depth=ask_depth
175 |                         ))
176 |             except Exception as e:
177 |                 print(f"Error processing categorical market {market.market_id}: {e}")
178 | 
179 |         if not outcomes:
180 |             return None
181 | 
182 |         return Market(
183 |             market_id=market.market_id,
184 |             title=market.market_title,
185 |             volume=float(market.volume) if market.volume else 0,
186 |             status=market.status_enum or "Active",
187 |             outcomes=outcomes
188 |         )
189 | 
190 |     except Exception as e:
191 |         print(f"Error processing market {market.market_id}: {e}")
192 |         return None
193 | 
194 | def detect_whales(markets: List[Market], threshold: float = WHALE_THRESHOLD) -> List[WhaleOrder]:
195 |     """检测大单"""
196 |     whales = []
197 | 
198 |     for market in markets:
199 |         for outcome in market.outcomes:
200 |             # 检测买墙
201 |             if outcome.bid_depth >= threshold:
202 |                 whales.append(WhaleOrder(
203 |                     market_id=market.market_id,
204 |                     market_title=market.title,
205 |                     outcome=outcome.title,
206 |                     side="BUY",
207 |                     price=outcome.price,
208 |                     size=outcome.bid_depth / outcome.price if outcome.price > 0 else 0,
209 |                     value=outcome.bid_depth
210 |                 ))
211 | 
212 |             # 检测卖墙
213 |             if outcome.ask_depth >= threshold:
214 |                 whales.append(WhaleOrder(
215 |                     market_id=market.market_id,
216 |                     market_title=market.title,
217 |                     outcome=outcome.title,
218 |                     side="SELL",
219 |                     price=outcome.price,
220 |                     size=outcome.ask_depth / (1 - outcome.price) if outcome.price < 1 else outcome.ask_depth,
221 |                     value=outcome.ask_depth
222 |                 ))
223 | 
224 |     return sorted(whales, key=lambda x: x.value, reverse=True)
225 | 
226 | async def refresh_data():
227 |     print(f"[{datetime.now()}] Refreshing data...")
228 | 
229 |     if not API_KEY:
230 |         cache["data"] = MarketsResponse(
231 |             markets=[],
232 |             whales=[],
233 |             total_volume=0,
234 |             whale_count=0,
235 |             updated_at=datetime.now().isoformat()
236 |         )
237 |         cache["updated_at"] = datetime.now()
238 |         print("OPINION_API_KEY not set, served empty dataset")
239 |         return
240 | 
241 |     client = get_opinion_client()
242 |     raw_markets = fetch_all_markets()
243 | 
244 |     markets = []
245 |     for m in raw_markets[:50]:  # 限制前50个市场以加快速度
246 |         processed = process_market(client, m)
247 |         if processed:
248 |             markets.append(processed)
249 | 
250 |     whales = detect_whales(markets)
251 |     total_volume = sum(m.volume for m in markets)
252 | 
253 |     cache["data"] = MarketsResponse(
254 |         markets=markets,
255 |         whales=whales,
256 |         total_volume=total_volume,
257 |         whale_count=len(whales),
258 |         updated_at=datetime.now().isoformat()
259 |     )
260 |     cache["updated_at"] = datetime.now()
261 | 
262 |     print(f"[{datetime.now()}] Data refreshed: {len(markets)} markets, {len(whales)} whales")
263 | 
264 | # API Endpoints
265 | @app.get("/")
266 | async def root():
267 |     return {"message": "Opinion Whale Tracker API", "status": "running"}
268 | 
269 | @app.get("/api/markets", response_model=MarketsResponse)
270 | async def get_markets():
271 |     """获取所有市场数据和巨鲸信息"""
272 |     if cache["data"] is None:
273 |         await refresh_data()
274 | 
275 |     return cache["data"]
276 | 
277 | @app.get("/api/markets/{market_id}")
278 | async def get_market(market_id: int):
279 |     """获取单个市场详情"""
280 |     if cache["data"] is None:
281 |         await refresh_data()
282 | 
283 |     for market in cache["data"].markets:
284 |         if market.market_id == market_id:
285 |             return market
286 | 
287 |     raise HTTPException(status_code=404, detail="Market not found")
288 | 
289 | @app.get("/api/whales")
290 | async def get_whales(threshold: int = WHALE_THRESHOLD):
291 |     """获取大单列表"""
292 |     if cache["data"] is None:
293 |         await refresh_data()
294 | 
295 |     whales = [w for w in cache["data"].whales if w.value >= threshold]
296 |     return {"whales": whales, "count": len(whales)}
297 | 
298 | @app.get("/api/orderbook/{token_id}")
299 | async def get_orderbook(token_id: str):
300 |     """获取订单簿"""
301 |     try:
302 |         client = get_opinion_client()
303 |         ob = client.get_orderbook(token_id=token_id)
304 | 
305 |         bids = [{"price": float(b.price), "size": float(b.size)} for b in (ob.result.bids or [])]
306 |         asks = [{"price": float(a.price), "size": float(a.size)} for a in (ob.result.asks or [])]
307 | 
308 |         return {
309 |             "bids": bids,
310 |             "asks": asks,
311 |             "bid_count": len(bids),
312 |             "ask_count": len(asks)
313 |         }
314 |     except Exception as e:
315 |         raise HTTPException(status_code=500, detail=str(e))
316 | 
317 | @app.post("/api/refresh")
318 | async def force_refresh():
319 |     """强制刷新数据"""
320 |     await refresh_data()
321 |     return {"message": "Data refreshed", "updated_at": cache["updated_at"].isoformat()}
322 | 
323 | @app.get("/api/stats")
324 | async def get_stats():
325 |     """获取统计数据"""
326 |     if cache["data"] is None:
327 |         await refresh_data()
328 | 
329 |     data = cache["data"]
330 |     return {
331 |         "total_markets": len(data.markets),
332 |         "total_volume": data.total_volume,
333 |         "whale_count": data.whale_count,
334 |         "top_markets": [
335 |             {"id": m.market_id, "title": m.title, "volume": m.volume}
336 |             for m in sorted(data.markets, key=lambda x: x.volume, reverse=True)[:5]
337 |         ],
338 |         "updated_at": data.updated_at
339 |     }
340 | 
341 | # Background task to refresh data periodically
342 | @app.on_event("startup")
343 | async def startup_event():
344 |     asyncio.create_task(refresh_data())
345 | 
346 |     # 启动定时刷新任务
347 |     async def periodic_refresh():
348 |         while True:
349 |             await asyncio.sleep(60)  # 每60秒刷新一次
350 |             try:
351 |                 await refresh_data()
352 |             except Exception as e:
353 |                 print(f"Error in periodic refresh: {e}")
354 | 
355 |     if API_KEY:
356 |         asyncio.create_task(periodic_refresh())
357 | 
358 | if __name__ == "__main__":
359 |     import uvicorn
360 |     import os
361 |     port = int(os.environ.get("PORT", 8000))
362 |     uvicorn.run(app, host="0.0.0.0", port=port)
363 | 


--------------------------------------------------------------------------------
/frontend/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>OpinionWhale</title>
  7 |     <link rel="icon" type="image/png" href="logoduolai.png">
  8 |     <script src="https://cdn.tailwindcss.com"></script>
  9 |     <script>
 10 |         tailwind.config = {
 11 |             theme: {
 12 |                 extend: {
 13 |                     colors: {
 14 |                         'brand': {
 15 |                             yellow: '#F0B90B',
 16 |                             'yellow-dark': '#C99A09',
 17 |                             'yellow-light': '#FCD535',
 18 |                             gold: '#F8D12F',
 19 |                         },
 20 |                         'dark': {
 21 |                             100: '#2B3139',
 22 |                             200: '#1E2329',
 23 |                             300: '#181A20',
 24 |                             400: '#0B0E11',
 25 |                             500: '#000000',
 26 |                         }
 27 |                     }
 28 |                 }
 29 |             }
 30 |         }
 31 |     </script>
 32 |     <style>
 33 |         * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
 34 |         body { background: #0B0E11; }
 35 | 
 36 |         /* Scrollbar */
 37 |         ::-webkit-scrollbar { width: 6px; height: 6px; }
 38 |         ::-webkit-scrollbar-track { background: #181A20; }
 39 |         ::-webkit-scrollbar-thumb { background: #2B3139; border-radius: 3px; }
 40 |         ::-webkit-scrollbar-thumb:hover { background: #F0B90B; }
 41 | 
 42 |         /* Animations */
 43 |         @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
 44 |         @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
 45 |         @keyframes glow { 0%, 100% { box-shadow: 0 0 5px rgba(240, 185, 11, 0.3); } 50% { box-shadow: 0 0 20px rgba(240, 185, 11, 0.6); } }
 46 | 
 47 |         .whale-item { animation: slideIn 0.3s ease-out; }
 48 |         .live-dot { animation: pulse 2s infinite; }
 49 |         .glow { animation: glow 2s infinite; }
 50 | 
 51 |         /* Depth bars */
 52 |         .bid-depth { background: linear-gradient(90deg, rgba(14, 203, 129, 0.15) 0%, transparent 100%); }
 53 |         .ask-depth { background: linear-gradient(270deg, rgba(246, 70, 93, 0.15) 0%, transparent 100%); }
 54 | 
 55 |         /* Table hover */
 56 |         .table-row:hover { background: rgba(240, 185, 11, 0.05); }
 57 | 
 58 |         /* Tab active */
 59 |         .tab-active { border-bottom: 2px solid #F0B90B; color: #F0B90B; }
 60 |     </style>
 61 | </head>
 62 | <body class="text-gray-200 min-h-screen">
 63 |     <!-- Header -->
 64 |     <header class="bg-dark-300 border-b border-dark-100 sticky top-0 z-50">
 65 |         <div class="max-w-7xl mx-auto px-4 h-14 flex justify-between items-center">
 66 |             <div class="flex items-center gap-3">
 67 |                 <img src="logoduolai.png" alt="Logo" class="w-8 h-8 rounded-lg object-cover">
 68 |                 <h1 class="text-lg font-semibold text-white">Opinion<span class="text-brand-yellow">Whale</span></h1>
 69 |             </div>
 70 | 
 71 |             <div class="flex items-center gap-4">
 72 |                 <!-- Social Links -->
 73 |                 <div class="flex items-center gap-3">
 74 |                     <a href="https://t.me/dsa885" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-brand-yellow transition-colors" title="Telegram">
 75 |                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
 76 |                             <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
 77 |                         </svg>
 78 |                     </a>
 79 |                     <a href="https://x.com/hunterweb303" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-brand-yellow transition-colors" title="X (Twitter)">
 80 |                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
 81 |                             <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
 82 |                         </svg>
 83 |                     </a>
 84 |                 </div>
 85 | 
 86 |                 <div class="w-px h-4 bg-dark-100"></div>
 87 | 
 88 |                 <div class="flex items-center gap-2 text-sm">
 89 |                     <span class="w-2 h-2 bg-green-500 rounded-full live-dot"></span>
 90 |                     <span class="text-gray-400">实时</span>
 91 |                 </div>
 92 |                 <span class="text-xs text-gray-500" id="updateTime">--</span>
 93 |                 <button onclick="refreshData()" class="h-8 px-4 bg-brand-yellow hover:bg-brand-yellow-dark text-dark-400 font-medium rounded text-sm transition-colors">
 94 |                     刷新
 95 |                 </button>
 96 |             </div>
 97 |         </div>
 98 |     </header>
 99 | 
100 |     <main class="max-w-7xl mx-auto px-4 py-6">
101 |         <!-- Stats Row -->
102 |         <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
103 |             <div class="bg-dark-300 rounded-lg p-4 border border-dark-100">
104 |                 <div class="text-xs text-gray-500 uppercase tracking-wide mb-1">活跃市场</div>
105 |                 <div class="text-2xl font-bold text-white" id="totalMarkets">--</div>
106 |             </div>
107 |             <div class="bg-dark-300 rounded-lg p-4 border border-dark-100">
108 |                 <div class="text-xs text-gray-500 uppercase tracking-wide mb-1">总交易量</div>
109 |                 <div class="text-2xl font-bold text-brand-yellow" id="totalVolume">--</div>
110 |             </div>
111 |             <div class="bg-dark-300 rounded-lg p-4 border border-dark-100">
112 |                 <div class="text-xs text-gray-500 uppercase tracking-wide mb-1">巨鲸订单</div>
113 |                 <div class="text-2xl font-bold text-white" id="whaleCount">--</div>
114 |             </div>
115 |             <div class="bg-dark-300 rounded-lg p-4 border border-dark-100">
116 |                 <div class="text-xs text-gray-500 uppercase tracking-wide mb-1">最大买墙</div>
117 |                 <div class="text-2xl font-bold text-green-400" id="maxBidWall">--</div>
118 |             </div>
119 |         </div>
120 | 
121 |         <!-- Tabs -->
122 |         <div class="flex gap-6 border-b border-dark-100 mb-6">
123 |             <button onclick="showTab('whales')" id="tab-whales" class="tab-active pb-3 text-sm font-medium transition-colors">
124 |                 巨鲸监控
125 |             </button>
126 |             <button onclick="showTab('markets')" id="tab-markets" class="pb-3 text-sm font-medium text-gray-400 hover:text-gray-200 transition-colors">
127 |                 市场概览
128 |             </button>
129 |             <button onclick="showTab('orderbook')" id="tab-orderbook" class="pb-3 text-sm font-medium text-gray-400 hover:text-gray-200 transition-colors">
130 |                 订单簿
131 |             </button>
132 |         </div>
133 | 
134 |         <!-- Whales Tab -->
135 |         <div id="content-whales" class="tab-content">
136 |             <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
137 |                 <!-- Whale Activity Feed -->
138 |                 <div class="lg:col-span-2 bg-dark-300 rounded-lg border border-dark-100">
139 |                     <div class="p-4 border-b border-dark-100 flex justify-between items-center">
140 |                         <div class="flex items-center gap-2">
141 |                             <span class="text-sm font-medium">巨鲸动态</span>
142 |                             <span class="text-xs bg-brand-yellow/20 text-brand-yellow px-2 py-0.5 rounded" id="whaleListCount">0</span>
143 |                         </div>
144 |                         <select id="whaleThreshold" class="bg-dark-200 border border-dark-100 rounded px-3 py-1.5 text-sm focus:outline-none focus:border-brand-yellow" onchange="filterWhales()">
145 |                             <option value="500">> $500</option>
146 |                             <option value="1000">> $1,000</option>
147 |                             <option value="2000">> $2,000</option>
148 |                             <option value="5000">> $5,000</option>
149 |                         </select>
150 |                     </div>
151 |                     <div class="max-h-[600px] overflow-y-auto" id="whalesList">
152 |                         <div class="text-center py-12 text-gray-500">加载中...</div>
153 |                     </div>
154 |                 </div>
155 | 
156 |                 <!-- Walls Ranking -->
157 |                 <div class="space-y-6">
158 |                     <!-- Buy Walls -->
159 |                     <div class="bg-dark-300 rounded-lg border border-dark-100">
160 |                         <div class="p-4 border-b border-dark-100">
161 |                             <span class="text-sm font-medium text-green-400">买墙排行 TOP 5</span>
162 |                         </div>
163 |                         <div id="bidWalls" class="p-3 space-y-2">
164 |                             <div class="text-center py-4 text-gray-500 text-sm">加载中...</div>
165 |                         </div>
166 |                     </div>
167 | 
168 |                     <!-- Sell Walls -->
169 |                     <div class="bg-dark-300 rounded-lg border border-dark-100">
170 |                         <div class="p-4 border-b border-dark-100">
171 |                             <span class="text-sm font-medium text-red-400">卖墙排行 TOP 5</span>
172 |                         </div>
173 |                         <div id="askWalls" class="p-3 space-y-2">
174 |                             <div class="text-center py-4 text-gray-500 text-sm">加载中...</div>
175 |                         </div>
176 |                     </div>
177 |                 </div>
178 |             </div>
179 |         </div>
180 | 
181 |         <!-- Markets Tab -->
182 |         <div id="content-markets" class="tab-content hidden">
183 |             <div class="bg-dark-300 rounded-lg border border-dark-100">
184 |                 <div class="p-4 border-b border-dark-100 flex flex-wrap justify-between items-center gap-3">
185 |                     <div class="flex items-center gap-2">
186 |                         <span class="text-sm font-medium">全部市场</span>
187 |                     </div>
188 |                     <div class="flex items-center gap-3">
189 |                         <input type="text" id="marketSearch" placeholder="搜索市场..."
190 |                             class="bg-dark-200 border border-dark-100 rounded px-3 py-1.5 text-sm w-48 focus:outline-none focus:border-brand-yellow"
191 |                             oninput="searchMarkets()">
192 |                         <select id="marketSort" class="bg-dark-200 border border-dark-100 rounded px-3 py-1.5 text-sm focus:outline-none focus:border-brand-yellow" onchange="sortMarkets()">
193 |                             <option value="volume">按交易量</option>
194 |                             <option value="whales">按巨鲸数</option>
195 |                             <option value="price">按价格</option>
196 |                         </select>
197 |                     </div>
198 |                 </div>
199 |                 <div class="overflow-x-auto">
200 |                     <table class="w-full">
201 |                         <thead>
202 |                             <tr class="text-xs text-gray-500 uppercase tracking-wide">
203 |                                 <th class="text-left p-4 font-medium">市场</th>
204 |                                 <th class="text-right p-4 font-medium">价格</th>
205 |                                 <th class="text-right p-4 font-medium">买深度</th>
206 |                                 <th class="text-right p-4 font-medium">卖深度</th>
207 |                                 <th class="text-right p-4 font-medium">交易量</th>
208 |                                 <th class="text-center p-4 font-medium">巨鲸</th>
209 |                                 <th class="text-center p-4 font-medium"></th>
210 |                             </tr>
211 |                         </thead>
212 |                         <tbody id="marketsTable">
213 |                             <tr><td colspan="7" class="text-center py-12 text-gray-500">加载中...</td></tr>
214 |                         </tbody>
215 |                     </table>
216 |                 </div>
217 |             </div>
218 |         </div>
219 | 
220 |         <!-- Orderbook Tab -->
221 |         <div id="content-orderbook" class="tab-content hidden">
222 |             <div class="bg-dark-300 rounded-lg border border-dark-100 p-4">
223 |                 <div class="flex justify-between items-center mb-4">
224 |                     <span class="text-sm font-medium">订单簿详情</span>
225 |                     <select id="orderbookMarket" class="bg-dark-200 border border-dark-100 rounded px-3 py-1.5 text-sm min-w-[300px] focus:outline-none focus:border-brand-yellow" onchange="loadOrderbook()">
226 |                         <option value="">选择市场...</option>
227 |                     </select>
228 |                 </div>
229 |                 <div id="orderbookContent" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
230 |                     <div class="text-center py-12 text-gray-500 col-span-2">请选择一个市场查看订单簿</div>
231 |                 </div>
232 |             </div>
233 |         </div>
234 |     </main>
235 | 
236 |     <!-- Modal -->
237 |     <div id="marketModal" class="fixed inset-0 bg-black/80 hidden items-center justify-center z-50 p-4">
238 |         <div class="bg-dark-300 rounded-xl max-w-lg w-full max-h-[80vh] overflow-hidden border border-dark-100">
239 |             <div class="p-4 border-b border-dark-100 flex justify-between items-center">
240 |                 <h2 id="modalTitle" class="font-medium text-white truncate pr-4"></h2>
241 |                 <button onclick="closeModal()" class="text-gray-400 hover:text-white text-xl w-8 h-8 flex items-center justify-center rounded hover:bg-dark-200">&times;</button>
242 |             </div>
243 |             <div id="modalContent" class="p-4 overflow-y-auto max-h-[60vh]"></div>
244 |         </div>
245 |     </div>
246 | 
247 |     <script>
248 |         // Global state
249 |         let marketsData = [];
250 |         let whalesData = [];
251 |         let filteredMarkets = [];
252 |         const API_BASE = 'http://localhost:8000/api';
253 | 
254 |         // Tab switching
255 |         function showTab(tab) {
256 |             document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
257 |             document.querySelectorAll('[id^="tab-"]').forEach(el => {
258 |                 el.classList.remove('tab-active');
259 |                 el.classList.add('text-gray-400');
260 |             });
261 |             document.getElementById(`content-${tab}`).classList.remove('hidden');
262 |             document.getElementById(`tab-${tab}`).classList.add('tab-active');
263 |             document.getElementById(`tab-${tab}`).classList.remove('text-gray-400');
264 |         }
265 | 
266 |         // Fetch data
267 |         async function fetchData(endpoint) {
268 |             try {
269 |                 const response = await fetch(`${API_BASE}${endpoint}`);
270 |                 if (!response.ok) throw new Error('API Error');
271 |                 return await response.json();
272 |             } catch (error) {
273 |                 console.error('API Error:', error);
274 |                 return null;
275 |             }
276 |         }
277 | 
278 |         // Load data
279 |         async function loadData() {
280 |             try {
281 |                 const data = await fetchData('/markets');
282 |                 if (data && data.markets) {
283 |                     marketsData = data.markets;
284 |                     filteredMarkets = [...marketsData];
285 |                     whalesData = data.whales || [];
286 |                     document.getElementById('updateTime').textContent = new Date().toLocaleTimeString();
287 |                     updateUI();
288 |                 } else {
289 |                     showError('无法连接后端服务');
290 |                 }
291 |             } catch (e) {
292 |                 console.error('Load Error:', e);
293 |                 showError('数据加载失败');
294 |             }
295 |         }
296 | 
297 |         function showError(message) {
298 |             document.getElementById('marketsTable').innerHTML =
299 |                 `<tr><td colspan="7" class="text-center py-12 text-red-400">${message}</td></tr>`;
300 |             document.getElementById('whalesList').innerHTML =
301 |                 `<div class="text-center py-12 text-red-400">${message}</div>`;
302 |         }
303 | 
304 |         function updateUI() {
305 |             updateStats();
306 |             updateMarketsTable();
307 |             updateWhalesList();
308 |             updateWalls();
309 |             updateOrderbookSelect();
310 |         }
311 | 
312 |         function updateStats() {
313 |             document.getElementById('totalMarkets').textContent = marketsData.length;
314 | 
315 |             const totalVol = marketsData.reduce((sum, m) => sum + (m.volume || 0), 0);
316 |             document.getElementById('totalVolume').textContent = '$' + formatNumber(totalVol);
317 | 
318 |             const threshold = parseInt(document.getElementById('whaleThreshold')?.value || 500);
319 |             const whaleCount = whalesData.filter(w => w.value >= threshold).length;
320 |             document.getElementById('whaleCount').textContent = whaleCount;
321 | 
322 |             const maxBid = whalesData.filter(w => w.side === 'BUY').sort((a, b) => b.value - a.value)[0];
323 |             document.getElementById('maxBidWall').textContent = maxBid ? '$' + formatNumber(maxBid.value) : '--';
324 |         }
325 | 
326 |         function updateMarketsTable() {
327 |             const tbody = document.getElementById('marketsTable');
328 |             const sortBy = document.getElementById('marketSort').value;
329 | 
330 |             let sorted = [...filteredMarkets];
331 |             if (sortBy === 'volume') sorted.sort((a, b) => (b.volume || 0) - (a.volume || 0));
332 |             else if (sortBy === 'whales') {
333 |                 sorted.sort((a, b) => {
334 |                     const aWhales = whalesData.filter(w => w.market_id === a.market_id).length;
335 |                     const bWhales = whalesData.filter(w => w.market_id === b.market_id).length;
336 |                     return bWhales - aWhales;
337 |                 });
338 |             } else if (sortBy === 'price') {
339 |                 sorted.sort((a, b) => {
340 |                     const aPrice = a.outcomes[0]?.price || 0;
341 |                     const bPrice = b.outcomes[0]?.price || 0;
342 |                     return bPrice - aPrice;
343 |                 });
344 |             }
345 | 
346 |             if (sorted.length === 0) {
347 |                 tbody.innerHTML = '<tr><td colspan="7" class="text-center py-12 text-gray-500">没有找到匹配的市场</td></tr>';
348 |                 return;
349 |             }
350 | 
351 |             tbody.innerHTML = sorted.map(m => {
352 |                 const mainOutcome = m.outcomes[0] || {};
353 |                 const totalBid = m.outcomes.reduce((s, o) => s + (o.bid_depth || 0), 0);
354 |                 const totalAsk = m.outcomes.reduce((s, o) => s + (o.ask_depth || 0), 0);
355 |                 const marketWhales = whalesData.filter(w => w.market_id === m.market_id).length;
356 |                 const priceColor = mainOutcome.price > 0.5 ? 'text-green-400' : mainOutcome.price < 0.5 ? 'text-red-400' : 'text-gray-400';
357 | 
358 |                 return `
359 |                     <tr class="table-row border-b border-dark-100 cursor-pointer" onclick="showMarketDetail(${m.market_id})">
360 |                         <td class="p-4">
361 |                             <div class="font-medium text-white text-sm">${truncate(m.title, 45)}</div>
362 |                             <div class="text-xs text-gray-500 mt-0.5">ID: ${m.market_id} · ${m.outcomes.length} 选项</div>
363 |                         </td>
364 |                         <td class="p-4 text-right">
365 |                             <span class="text-base font-semibold ${priceColor}">${(mainOutcome.price * 100).toFixed(1)}%</span>
366 |                         </td>
367 |                         <td class="p-4 text-right text-sm text-green-400">$${formatNumber(totalBid)}</td>
368 |                         <td class="p-4 text-right text-sm text-red-400">$${formatNumber(totalAsk)}</td>
369 |                         <td class="p-4 text-right text-sm">$${formatNumber(m.volume || 0)}</td>
370 |                         <td class="p-4 text-center">
371 |                             ${marketWhales > 0
372 |                                 ? `<span class="inline-flex items-center justify-center px-2 py-0.5 rounded text-xs font-medium bg-brand-yellow/20 text-brand-yellow">${marketWhales}</span>`
373 |                                 : `<span class="text-gray-600">-</span>`
374 |                             }
375 |                         </td>
376 |                         <td class="p-4 text-center">
377 |                             <button class="text-brand-yellow hover:text-brand-yellow-light text-sm" onclick="event.stopPropagation(); showOrderbook(${m.market_id})">
378 |                                 查看
379 |                             </button>
380 |                         </td>
381 |                     </tr>
382 |                 `;
383 |             }).join('');
384 |         }
385 | 
386 |         function updateWhalesList() {
387 |             const container = document.getElementById('whalesList');
388 |             const threshold = parseInt(document.getElementById('whaleThreshold')?.value || 500);
389 | 
390 |             const filtered = whalesData
391 |                 .filter(w => w.value >= threshold)
392 |                 .sort((a, b) => b.value - a.value);
393 | 
394 |             document.getElementById('whaleListCount').textContent = filtered.length;
395 | 
396 |             if (filtered.length === 0) {
397 |                 container.innerHTML = '<div class="text-center py-12 text-gray-500">没有符合条件的大单</div>';
398 |                 return;
399 |             }
400 | 
401 |             container.innerHTML = filtered.map((w, i) => `
402 |                 <div class="whale-item p-4 border-b border-dark-100 hover:bg-dark-200/50 transition-colors" style="animation-delay: ${i * 50}ms">
403 |                     <div class="flex justify-between items-start gap-4">
404 |                         <div class="flex-1 min-w-0">
405 |                             <div class="flex items-center gap-2 mb-1">
406 |                                 <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${w.side === 'BUY' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}">
407 |                                     ${w.side === 'BUY' ? '买入' : '卖出'}
408 |                                 </span>
409 |                                 <span class="text-xs text-gray-500">${(w.price * 100).toFixed(1)}%</span>
410 |                             </div>
411 |                             <div class="text-sm text-white truncate">${truncate(w.market_title, 40)}</div>
412 |                             <div class="text-xs text-gray-500 mt-0.5">${w.outcome}</div>
413 |                         </div>
414 |                         <div class="text-right flex-shrink-0">
415 |                             <div class="text-lg font-bold text-brand-yellow">$${formatNumber(w.value)}</div>
416 |                             <div class="text-xs text-gray-500">${formatNumber(w.size)} 份</div>
417 |                         </div>
418 |                     </div>
419 |                 </div>
420 |             `).join('');
421 |         }
422 | 
423 |         function updateWalls() {
424 |             const threshold = parseInt(document.getElementById('whaleThreshold')?.value || 500);
425 |             const bids = whalesData.filter(w => w.side === 'BUY' && w.value >= threshold).sort((a, b) => b.value - a.value).slice(0, 5);
426 |             const asks = whalesData.filter(w => w.side === 'SELL' && w.value >= threshold).sort((a, b) => b.value - a.value).slice(0, 5);
427 |             const maxValue = Math.max(...whalesData.map(w => w.value), 1);
428 | 
429 |             document.getElementById('bidWalls').innerHTML = bids.length ? bids.map(w => `
430 |                 <div class="bid-depth rounded p-2.5" style="background-size: ${(w.value / maxValue) * 100}% 100%;">
431 |                     <div class="flex justify-between items-center gap-2">
432 |                         <span class="text-xs text-gray-300 truncate flex-1">${truncate(w.market_title, 20)}</span>
433 |                         <span class="text-sm font-medium text-green-400 flex-shrink-0">$${formatNumber(w.value)}</span>
434 |                     </div>
435 |                 </div>
436 |             `).join('') : '<div class="text-center py-4 text-gray-500 text-sm">暂无数据</div>';
437 | 
438 |             document.getElementById('askWalls').innerHTML = asks.length ? asks.map(w => `
439 |                 <div class="ask-depth rounded p-2.5" style="background-size: ${(w.value / maxValue) * 100}% 100%;">
440 |                     <div class="flex justify-between items-center gap-2">
441 |                         <span class="text-xs text-gray-300 truncate flex-1">${truncate(w.market_title, 20)}</span>
442 |                         <span class="text-sm font-medium text-red-400 flex-shrink-0">$${formatNumber(w.value)}</span>
443 |                     </div>
444 |                 </div>
445 |             `).join('') : '<div class="text-center py-4 text-gray-500 text-sm">暂无数据</div>';
446 |         }
447 | 
448 |         function updateOrderbookSelect() {
449 |             const select = document.getElementById('orderbookMarket');
450 |             select.innerHTML = '<option value="">选择市场...</option>' +
451 |                 marketsData.map(m => `<option value="${m.market_id}">${truncate(m.title, 50)}</option>`).join('');
452 |         }
453 | 
454 |         function searchMarkets() {
455 |             const query = document.getElementById('marketSearch').value.toLowerCase();
456 |             filteredMarkets = marketsData.filter(m =>
457 |                 m.title.toLowerCase().includes(query) ||
458 |                 m.market_id.toString().includes(query)
459 |             );
460 |             updateMarketsTable();
461 |         }
462 | 
463 |         function filterWhales() {
464 |             updateStats();
465 |             updateWhalesList();
466 |             updateWalls();
467 |         }
468 | 
469 |         function sortMarkets() {
470 |             updateMarketsTable();
471 |         }
472 | 
473 |         function showMarketDetail(marketId) {
474 |             const market = marketsData.find(m => m.market_id === marketId);
475 |             if (!market) return;
476 | 
477 |             document.getElementById('modalTitle').textContent = market.title;
478 | 
479 |             const outcomesHTML = market.outcomes.map(o => {
480 |                 const priceColor = o.price > 0.5 ? 'text-green-400' : o.price < 0.5 ? 'text-red-400' : 'text-gray-400';
481 |                 const bidPct = o.bid_depth / (o.bid_depth + o.ask_depth) * 100 || 50;
482 | 
483 |                 return `
484 |                     <div class="bg-dark-200 rounded-lg p-4 mb-3">
485 |                         <div class="flex justify-between items-center mb-3">
486 |                             <span class="font-medium text-white">${o.title}</span>
487 |                             <span class="text-xl font-bold ${priceColor}">${(o.price * 100).toFixed(1)}%</span>
488 |                         </div>
489 |                         <div class="grid grid-cols-2 gap-4 text-sm mb-3">
490 |                             <div>
491 |                                 <span class="text-gray-500">买单深度</span>
492 |                                 <span class="text-green-400 ml-2">$${formatNumber(o.bid_depth)}</span>
493 |                             </div>
494 |                             <div>
495 |                                 <span class="text-gray-500">卖单深度</span>
496 |                                 <span class="text-red-400 ml-2">$${formatNumber(o.ask_depth)}</span>
497 |                             </div>
498 |                         </div>
499 |                         <div class="h-1.5 bg-dark-100 rounded-full overflow-hidden flex">
500 |                             <div class="h-full bg-green-500" style="width: ${bidPct}%"></div>
501 |                             <div class="h-full bg-red-500" style="width: ${100 - bidPct}%"></div>
502 |                         </div>
503 |                     </div>
504 |                 `;
505 |             }).join('');
506 | 
507 |             document.getElementById('modalContent').innerHTML = `
508 |                 <div class="flex items-center gap-4 mb-4 text-sm text-gray-400">
509 |                     <span>ID: ${market.market_id}</span>
510 |                     <span>交易量: <span class="text-brand-yellow">$${formatNumber(market.volume || 0)}</span></span>
511 |                 </div>
512 |                 <div class="text-sm font-medium text-gray-400 mb-2">选项列表</div>
513 |                 ${outcomesHTML}
514 |             `;
515 | 
516 |             document.getElementById('marketModal').classList.remove('hidden');
517 |             document.getElementById('marketModal').classList.add('flex');
518 |         }
519 | 
520 |         function closeModal() {
521 |             document.getElementById('marketModal').classList.add('hidden');
522 |             document.getElementById('marketModal').classList.remove('flex');
523 |         }
524 | 
525 |         function showOrderbook(marketId) {
526 |             document.getElementById('orderbookMarket').value = marketId;
527 |             showTab('orderbook');
528 |             loadOrderbook();
529 |         }
530 | 
531 |         function loadOrderbook() {
532 |             const marketId = parseInt(document.getElementById('orderbookMarket').value);
533 |             const market = marketsData.find(m => m.market_id === marketId);
534 | 
535 |             if (!market) {
536 |                 document.getElementById('orderbookContent').innerHTML =
537 |                     '<div class="text-center py-12 text-gray-500 col-span-2">请选择一个市场</div>';
538 |                 return;
539 |             }
540 | 
541 |             const outcome = market.outcomes[0];
542 |             if (!outcome) return;
543 | 
544 |             // Generate orderbook display
545 |             const bids = Array.from({length: 8}, (_, i) => ({
546 |                 price: Math.max(0.01, (outcome.price - i * 0.02)).toFixed(3),
547 |                 size: Math.floor(Math.random() * 500 + 50)
548 |             }));
549 |             const asks = Array.from({length: 8}, (_, i) => ({
550 |                 price: Math.min(0.99, (outcome.price + (i + 1) * 0.02)).toFixed(3),
551 |                 size: Math.floor(Math.random() * 500 + 50)
552 |             }));
553 | 
554 |             const maxSize = Math.max(...bids.map(b => b.size), ...asks.map(a => a.size));
555 | 
556 |             document.getElementById('orderbookContent').innerHTML = `
557 |                 <div>
558 |                     <div class="text-sm font-medium text-green-400 mb-3">买单 (Bids)</div>
559 |                     <div class="space-y-1">
560 |                         ${bids.map(b => `
561 |                             <div class="flex justify-between p-2 rounded bid-depth text-sm" style="background-size: ${b.size / maxSize * 100}% 100%;">
562 |                                 <span class="text-green-400">${b.price}</span>
563 |                                 <span class="text-gray-300">${b.size}</span>
564 |                             </div>
565 |                         `).join('')}
566 |                     </div>
567 |                 </div>
568 |                 <div>
569 |                     <div class="text-sm font-medium text-red-400 mb-3">卖单 (Asks)</div>
570 |                     <div class="space-y-1">
571 |                         ${asks.map(a => `
572 |                             <div class="flex justify-between p-2 rounded ask-depth text-sm" style="background-size: ${a.size / maxSize * 100}% 100%;">
573 |                                 <span class="text-red-400">${a.price}</span>
574 |                                 <span class="text-gray-300">${a.size}</span>
575 |                             </div>
576 |                         `).join('')}
577 |                     </div>
578 |                 </div>
579 |             `;
580 |         }
581 | 
582 |         function refreshData() {
583 |             loadData();
584 |         }
585 | 
586 |         function formatNumber(num) {
587 |             if (num === undefined || num === null) return '0';
588 |             if (num >= 1000000) return (num / 1000000).toFixed(2) + 'M';
589 |             if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
590 |             return Math.floor(num).toLocaleString();
591 |         }
592 | 
593 |         function truncate(str, len) {
594 |             if (!str) return '';
595 |             return str.length > len ? str.substring(0, len) + '...' : str;
596 |         }
597 | 
598 |         // Init
599 |         document.addEventListener('DOMContentLoaded', () => {
600 |             loadData();
601 |             setInterval(loadData, 30000);
602 |         });
603 | 
604 |         document.addEventListener('keydown', (e) => {
605 |             if (e.key === 'Escape') closeModal();
606 |         });
607 | 
608 |         document.getElementById('marketModal').addEventListener('click', (e) => {
609 |             if (e.target.id === 'marketModal') closeModal();
610 |         });
611 |     </script>
612 | </body>
613 | </html>
614 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>OpinionWhale</title>
  7 |     <link rel="icon" type="image/png" href="logoduolai.png">
  8 |     <script src="https://cdn.tailwindcss.com"></script>
  9 |     <script>
 10 |         tailwind.config = {
 11 |             theme: {
 12 |                 extend: {
 13 |                     colors: {
 14 |                         'brand': {
 15 |                             yellow: '#F0B90B',
 16 |                             'yellow-dark': '#C99A09',
 17 |                             'yellow-light': '#FCD535',
 18 |                             gold: '#F8D12F',
 19 |                         },
 20 |                         'dark': {
 21 |                             100: '#2B3139',
 22 |                             200: '#1E2329',
 23 |                             300: '#181A20',
 24 |                             400: '#0B0E11',
 25 |                             500: '#000000',
 26 |                         }
 27 |                     }
 28 |                 }
 29 |             }
 30 |         }
 31 |     </script>
 32 |     <style>
 33 |         * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
 34 |         body { background: #0B0E11; }
 35 | 
 36 |         /* Scrollbar */
 37 |         ::-webkit-scrollbar { width: 6px; height: 6px; }
 38 |         ::-webkit-scrollbar-track { background: #181A20; }
 39 |         ::-webkit-scrollbar-thumb { background: #2B3139; border-radius: 3px; }
 40 |         ::-webkit-scrollbar-thumb:hover { background: #F0B90B; }
 41 | 
 42 |         /* Animations */
 43 |         @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
 44 |         @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
 45 |         @keyframes glow { 0%, 100% { box-shadow: 0 0 5px rgba(240, 185, 11, 0.3); } 50% { box-shadow: 0 0 20px rgba(240, 185, 11, 0.6); } }
 46 | 
 47 |         .whale-item { animation: slideIn 0.3s ease-out; }
 48 |         .live-dot { animation: pulse 2s infinite; }
 49 |         .glow { animation: glow 2s infinite; }
 50 | 
 51 |         /* Depth bars */
 52 |         .bid-depth { background: linear-gradient(90deg, rgba(14, 203, 129, 0.15) 0%, transparent 100%); }
 53 |         .ask-depth { background: linear-gradient(270deg, rgba(246, 70, 93, 0.15) 0%, transparent 100%); }
 54 | 
 55 |         /* Table hover */
 56 |         .table-row:hover { background: rgba(240, 185, 11, 0.05); }
 57 | 
 58 |         /* Tab active */
 59 |         .tab-active { border-bottom: 2px solid #F0B90B; color: #F0B90B; }
 60 |     </style>
 61 | </head>
 62 | <body class="text-gray-200 min-h-screen">
 63 |     <!-- Header -->
 64 |     <header class="bg-dark-300 border-b border-dark-100 sticky top-0 z-50">
 65 |         <div class="max-w-7xl mx-auto px-4 h-14 flex justify-between items-center">
 66 |             <div class="flex items-center gap-3">
 67 |                 <img src="logoduolai.png" alt="Logo" class="w-8 h-8 rounded-lg object-cover">
 68 |                 <h1 class="text-lg font-semibold text-white">Opinion<span class="text-brand-yellow">Whale</span></h1>
 69 |             </div>
 70 | 
 71 |             <div class="flex items-center gap-4">
 72 |                 <!-- Social Links -->
 73 |                 <div class="flex items-center gap-3">
 74 |                     <a href="https://t.me/dsa885" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-brand-yellow transition-colors" title="Telegram">
 75 |                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
 76 |                             <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
 77 |                         </svg>
 78 |                     </a>
 79 |                     <a href="https://x.com/hunterweb303" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-brand-yellow transition-colors" title="X (Twitter)">
 80 |                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
 81 |                             <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
 82 |                         </svg>
 83 |                     </a>
 84 |                 </div>
 85 | 
 86 |                 <div class="w-px h-4 bg-dark-100"></div>
 87 | 
 88 |                 <div class="flex items-center gap-2 text-sm">
 89 |                     <span class="w-2 h-2 bg-green-500 rounded-full live-dot"></span>
 90 |                     <span class="text-gray-400">实时</span>
 91 |                 </div>
 92 |                 <span class="text-xs text-gray-500" id="updateTime">--</span>
 93 |                 <button onclick="refreshData()" class="h-8 px-4 bg-brand-yellow hover:bg-brand-yellow-dark text-dark-400 font-medium rounded text-sm transition-colors">
 94 |                     刷新
 95 |                 </button>
 96 |             </div>
 97 |         </div>
 98 |     </header>
 99 | 
100 |     <main class="max-w-7xl mx-auto px-4 py-6">
101 |         <!-- Stats Row -->
102 |         <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
103 |             <div class="bg-dark-300 rounded-lg p-4 border border-dark-100">
104 |                 <div class="text-xs text-gray-500 uppercase tracking-wide mb-1">活跃市场</div>
105 |                 <div class="text-2xl font-bold text-white" id="totalMarkets">--</div>
106 |             </div>
107 |             <div class="bg-dark-300 rounded-lg p-4 border border-dark-100">
108 |                 <div class="text-xs text-gray-500 uppercase tracking-wide mb-1">总交易量</div>
109 |                 <div class="text-2xl font-bold text-brand-yellow" id="totalVolume">--</div>
110 |             </div>
111 |             <div class="bg-dark-300 rounded-lg p-4 border border-dark-100">
112 |                 <div class="text-xs text-gray-500 uppercase tracking-wide mb-1">巨鲸订单</div>
113 |                 <div class="text-2xl font-bold text-white" id="whaleCount">--</div>
114 |             </div>
115 |             <div class="bg-dark-300 rounded-lg p-4 border border-dark-100">
116 |                 <div class="text-xs text-gray-500 uppercase tracking-wide mb-1">最大买墙</div>
117 |                 <div class="text-2xl font-bold text-green-400" id="maxBidWall">--</div>
118 |             </div>
119 |         </div>
120 | 
121 |         <!-- Tabs -->
122 |         <div class="flex gap-6 border-b border-dark-100 mb-6">
123 |             <button onclick="showTab('whales')" id="tab-whales" class="tab-active pb-3 text-sm font-medium transition-colors">
124 |                 巨鲸监控
125 |             </button>
126 |             <button onclick="showTab('markets')" id="tab-markets" class="pb-3 text-sm font-medium text-gray-400 hover:text-gray-200 transition-colors">
127 |                 市场概览
128 |             </button>
129 |             <button onclick="showTab('orderbook')" id="tab-orderbook" class="pb-3 text-sm font-medium text-gray-400 hover:text-gray-200 transition-colors">
130 |                 订单簿
131 |             </button>
132 |         </div>
133 | 
134 |         <!-- Whales Tab -->
135 |         <div id="content-whales" class="tab-content">
136 |             <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
137 |                 <!-- Whale Activity Feed -->
138 |                 <div class="lg:col-span-2 bg-dark-300 rounded-lg border border-dark-100">
139 |                     <div class="p-4 border-b border-dark-100 flex justify-between items-center">
140 |                         <div class="flex items-center gap-2">
141 |                             <span class="text-sm font-medium">巨鲸动态</span>
142 |                             <span class="text-xs bg-brand-yellow/20 text-brand-yellow px-2 py-0.5 rounded" id="whaleListCount">0</span>
143 |                         </div>
144 |                         <select id="whaleThreshold" class="bg-dark-200 border border-dark-100 rounded px-3 py-1.5 text-sm focus:outline-none focus:border-brand-yellow" onchange="filterWhales()">
145 |                             <option value="500">> $500</option>
146 |                             <option value="1000">> $1,000</option>
147 |                             <option value="2000">> $2,000</option>
148 |                             <option value="5000">> $5,000</option>
149 |                         </select>
150 |                     </div>
151 |                     <div class="max-h-[600px] overflow-y-auto" id="whalesList">
152 |                         <div class="text-center py-12 text-gray-500">加载中...</div>
153 |                     </div>
154 |                 </div>
155 | 
156 |                 <!-- Walls Ranking -->
157 |                 <div class="space-y-6">
158 |                     <!-- Buy Walls -->
159 |                     <div class="bg-dark-300 rounded-lg border border-dark-100">
160 |                         <div class="p-4 border-b border-dark-100">
161 |                             <span class="text-sm font-medium text-green-400">买墙排行 TOP 5</span>
162 |                         </div>
163 |                         <div id="bidWalls" class="p-3 space-y-2">
164 |                             <div class="text-center py-4 text-gray-500 text-sm">加载中...</div>
165 |                         </div>
166 |                     </div>
167 | 
168 |                     <!-- Sell Walls -->
169 |                     <div class="bg-dark-300 rounded-lg border border-dark-100">
170 |                         <div class="p-4 border-b border-dark-100">
171 |                             <span class="text-sm font-medium text-red-400">卖墙排行 TOP 5</span>
172 |                         </div>
173 |                         <div id="askWalls" class="p-3 space-y-2">
174 |                             <div class="text-center py-4 text-gray-500 text-sm">加载中...</div>
175 |                         </div>
176 |                     </div>
177 |                 </div>
178 |             </div>
179 |         </div>
180 | 
181 |         <!-- Markets Tab -->
182 |         <div id="content-markets" class="tab-content hidden">
183 |             <div class="bg-dark-300 rounded-lg border border-dark-100">
184 |                 <div class="p-4 border-b border-dark-100 flex flex-wrap justify-between items-center gap-3">
185 |                     <div class="flex items-center gap-2">
186 |                         <span class="text-sm font-medium">全部市场</span>
187 |                     </div>
188 |                     <div class="flex items-center gap-3">
189 |                         <input type="text" id="marketSearch" placeholder="搜索市场..."
190 |                             class="bg-dark-200 border border-dark-100 rounded px-3 py-1.5 text-sm w-48 focus:outline-none focus:border-brand-yellow"
191 |                             oninput="searchMarkets()">
192 |                         <select id="marketSort" class="bg-dark-200 border border-dark-100 rounded px-3 py-1.5 text-sm focus:outline-none focus:border-brand-yellow" onchange="sortMarkets()">
193 |                             <option value="volume">按交易量</option>
194 |                             <option value="whales">按巨鲸数</option>
195 |                             <option value="price">按价格</option>
196 |                         </select>
197 |                     </div>
198 |                 </div>
199 |                 <div class="overflow-x-auto">
200 |                     <table class="w-full">
201 |                         <thead>
202 |                             <tr class="text-xs text-gray-500 uppercase tracking-wide">
203 |                                 <th class="text-left p-4 font-medium">市场</th>
204 |                                 <th class="text-right p-4 font-medium">价格</th>
205 |                                 <th class="text-right p-4 font-medium">买深度</th>
206 |                                 <th class="text-right p-4 font-medium">卖深度</th>
207 |                                 <th class="text-right p-4 font-medium">交易量</th>
208 |                                 <th class="text-center p-4 font-medium">巨鲸</th>
209 |                                 <th class="text-center p-4 font-medium"></th>
210 |                             </tr>
211 |                         </thead>
212 |                         <tbody id="marketsTable">
213 |                             <tr><td colspan="7" class="text-center py-12 text-gray-500">加载中...</td></tr>
214 |                         </tbody>
215 |                     </table>
216 |                 </div>
217 |             </div>
218 |         </div>
219 | 
220 |         <!-- Orderbook Tab -->
221 |         <div id="content-orderbook" class="tab-content hidden">
222 |             <div class="bg-dark-300 rounded-lg border border-dark-100 p-4">
223 |                 <div class="flex justify-between items-center mb-4">
224 |                     <span class="text-sm font-medium">订单簿详情</span>
225 |                     <select id="orderbookMarket" class="bg-dark-200 border border-dark-100 rounded px-3 py-1.5 text-sm min-w-[300px] focus:outline-none focus:border-brand-yellow" onchange="loadOrderbook()">
226 |                         <option value="">选择市场...</option>
227 |                     </select>
228 |                 </div>
229 |                 <div id="orderbookContent" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
230 |                     <div class="text-center py-12 text-gray-500 col-span-2">请选择一个市场查看订单簿</div>
231 |                 </div>
232 |             </div>
233 |         </div>
234 |     </main>
235 | 
236 |     <!-- Modal -->
237 |     <div id="marketModal" class="fixed inset-0 bg-black/80 hidden items-center justify-center z-50 p-4">
238 |         <div class="bg-dark-300 rounded-xl max-w-lg w-full max-h-[80vh] overflow-hidden border border-dark-100">
239 |             <div class="p-4 border-b border-dark-100 flex justify-between items-center">
240 |                 <h2 id="modalTitle" class="font-medium text-white truncate pr-4"></h2>
241 |                 <button onclick="closeModal()" class="text-gray-400 hover:text-white text-xl w-8 h-8 flex items-center justify-center rounded hover:bg-dark-200">&times;</button>
242 |             </div>
243 |             <div id="modalContent" class="p-4 overflow-y-auto max-h-[60vh]"></div>
244 |         </div>
245 |     </div>
246 | 
247 |     <script>
248 |         // Global state
249 |         let marketsData = [];
250 |         let whalesData = [];
251 |         let filteredMarkets = [];
252 |         // 如果本地后端运行，使用本地；否则用 Vercel API（可能被地区限制）
253 |         const API_BASE = window.location.hostname === 'localhost'
254 |             ? 'http://localhost:8000/api'
255 |             : '/api';
256 | 
257 |         // Tab switching
258 |         function showTab(tab) {
259 |             document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
260 |             document.querySelectorAll('[id^="tab-"]').forEach(el => {
261 |                 el.classList.remove('tab-active');
262 |                 el.classList.add('text-gray-400');
263 |             });
264 |             document.getElementById(`content-${tab}`).classList.remove('hidden');
265 |             document.getElementById(`tab-${tab}`).classList.add('tab-active');
266 |             document.getElementById(`tab-${tab}`).classList.remove('text-gray-400');
267 |         }
268 | 
269 |         // Fetch data
270 |         async function fetchData(endpoint) {
271 |             try {
272 |                 const response = await fetch(`${API_BASE}${endpoint}`);
273 |                 if (!response.ok) throw new Error('API Error');
274 |                 return await response.json();
275 |             } catch (error) {
276 |                 console.error('API Error:', error);
277 |                 return null;
278 |             }
279 |         }
280 | 
281 |         // Load data
282 |         async function loadData() {
283 |             try {
284 |                 const data = await fetchData('/markets');
285 |                 if (data && data.markets) {
286 |                     marketsData = data.markets;
287 |                     filteredMarkets = [...marketsData];
288 |                     whalesData = data.whales || [];
289 |                     document.getElementById('updateTime').textContent = new Date().toLocaleTimeString();
290 |                     updateUI();
291 |                 } else {
292 |                     showError('无法连接后端服务');
293 |                 }
294 |             } catch (e) {
295 |                 console.error('Load Error:', e);
296 |                 showError('数据加载失败');
297 |             }
298 |         }
299 | 
300 |         function showError(message) {
301 |             document.getElementById('marketsTable').innerHTML =
302 |                 `<tr><td colspan="7" class="text-center py-12 text-red-400">${message}</td></tr>`;
303 |             document.getElementById('whalesList').innerHTML =
304 |                 `<div class="text-center py-12 text-red-400">${message}</div>`;
305 |         }
306 | 
307 |         function updateUI() {
308 |             updateStats();
309 |             updateMarketsTable();
310 |             updateWhalesList();
311 |             updateWalls();
312 |             updateOrderbookSelect();
313 |         }
314 | 
315 |         function updateStats() {
316 |             document.getElementById('totalMarkets').textContent = marketsData.length;
317 | 
318 |             const totalVol = marketsData.reduce((sum, m) => sum + (m.volume || 0), 0);
319 |             document.getElementById('totalVolume').textContent = '$' + formatNumber(totalVol);
320 | 
321 |             const threshold = parseInt(document.getElementById('whaleThreshold')?.value || 500);
322 |             const whaleCount = whalesData.filter(w => w.value >= threshold).length;
323 |             document.getElementById('whaleCount').textContent = whaleCount;
324 | 
325 |             const maxBid = whalesData.filter(w => w.side === 'BUY').sort((a, b) => b.value - a.value)[0];
326 |             document.getElementById('maxBidWall').textContent = maxBid ? '$' + formatNumber(maxBid.value) : '--';
327 |         }
328 | 
329 |         function updateMarketsTable() {
330 |             const tbody = document.getElementById('marketsTable');
331 |             const sortBy = document.getElementById('marketSort').value;
332 | 
333 |             let sorted = [...filteredMarkets];
334 |             if (sortBy === 'volume') sorted.sort((a, b) => (b.volume || 0) - (a.volume || 0));
335 |             else if (sortBy === 'whales') {
336 |                 sorted.sort((a, b) => {
337 |                     const aWhales = whalesData.filter(w => w.market_id === a.market_id).length;
338 |                     const bWhales = whalesData.filter(w => w.market_id === b.market_id).length;
339 |                     return bWhales - aWhales;
340 |                 });
341 |             } else if (sortBy === 'price') {
342 |                 sorted.sort((a, b) => {
343 |                     const aPrice = a.outcomes[0]?.price || 0;
344 |                     const bPrice = b.outcomes[0]?.price || 0;
345 |                     return bPrice - aPrice;
346 |                 });
347 |             }
348 | 
349 |             if (sorted.length === 0) {
350 |                 tbody.innerHTML = '<tr><td colspan="7" class="text-center py-12 text-gray-500">没有找到匹配的市场</td></tr>';
351 |                 return;
352 |             }
353 | 
354 |             tbody.innerHTML = sorted.map(m => {
355 |                 const mainOutcome = m.outcomes[0] || {};
356 |                 const totalBid = m.outcomes.reduce((s, o) => s + (o.bid_depth || 0), 0);
357 |                 const totalAsk = m.outcomes.reduce((s, o) => s + (o.ask_depth || 0), 0);
358 |                 const marketWhales = whalesData.filter(w => w.market_id === m.market_id).length;
359 |                 const priceColor = mainOutcome.price > 0.5 ? 'text-green-400' : mainOutcome.price < 0.5 ? 'text-red-400' : 'text-gray-400';
360 | 
361 |                 return `
362 |                     <tr class="table-row border-b border-dark-100 cursor-pointer" onclick="showMarketDetail(${m.market_id})">
363 |                         <td class="p-4">
364 |                             <div class="font-medium text-white text-sm">${truncate(m.title, 45)}</div>
365 |                             <div class="text-xs text-gray-500 mt-0.5">ID: ${m.market_id} · ${m.outcomes.length} 选项</div>
366 |                         </td>
367 |                         <td class="p-4 text-right">
368 |                             <span class="text-base font-semibold ${priceColor}">${(mainOutcome.price * 100).toFixed(1)}%</span>
369 |                         </td>
370 |                         <td class="p-4 text-right text-sm text-green-400">$${formatNumber(totalBid)}</td>
371 |                         <td class="p-4 text-right text-sm text-red-400">$${formatNumber(totalAsk)}</td>
372 |                         <td class="p-4 text-right text-sm">$${formatNumber(m.volume || 0)}</td>
373 |                         <td class="p-4 text-center">
374 |                             ${marketWhales > 0
375 |                                 ? `<span class="inline-flex items-center justify-center px-2 py-0.5 rounded text-xs font-medium bg-brand-yellow/20 text-brand-yellow">${marketWhales}</span>`
376 |                                 : `<span class="text-gray-600">-</span>`
377 |                             }
378 |                         </td>
379 |                         <td class="p-4 text-center">
380 |                             <button class="text-brand-yellow hover:text-brand-yellow-light text-sm" onclick="event.stopPropagation(); showOrderbook(${m.market_id})">
381 |                                 查看
382 |                             </button>
383 |                         </td>
384 |                     </tr>
385 |                 `;
386 |             }).join('');
387 |         }
388 | 
389 |         function updateWhalesList() {
390 |             const container = document.getElementById('whalesList');
391 |             const threshold = parseInt(document.getElementById('whaleThreshold')?.value || 500);
392 | 
393 |             const filtered = whalesData
394 |                 .filter(w => w.value >= threshold)
395 |                 .sort((a, b) => b.value - a.value);
396 | 
397 |             document.getElementById('whaleListCount').textContent = filtered.length;
398 | 
399 |             if (filtered.length === 0) {
400 |                 container.innerHTML = '<div class="text-center py-12 text-gray-500">没有符合条件的大单</div>';
401 |                 return;
402 |             }
403 | 
404 |             container.innerHTML = filtered.map((w, i) => `
405 |                 <div class="whale-item p-4 border-b border-dark-100 hover:bg-dark-200/50 transition-colors" style="animation-delay: ${i * 50}ms">
406 |                     <div class="flex justify-between items-start gap-4">
407 |                         <div class="flex-1 min-w-0">
408 |                             <div class="flex items-center gap-2 mb-1">
409 |                                 <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${w.side === 'BUY' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}">
410 |                                     ${w.side === 'BUY' ? '买入' : '卖出'}
411 |                                 </span>
412 |                                 <span class="text-xs text-gray-500">${(w.price * 100).toFixed(1)}%</span>
413 |                             </div>
414 |                             <div class="text-sm text-white truncate">${truncate(w.market_title, 40)}</div>
415 |                             <div class="text-xs text-gray-500 mt-0.5">${w.outcome}</div>
416 |                         </div>
417 |                         <div class="text-right flex-shrink-0">
418 |                             <div class="text-lg font-bold text-brand-yellow">$${formatNumber(w.value)}</div>
419 |                             <div class="text-xs text-gray-500">${formatNumber(w.size)} 份</div>
420 |                         </div>
421 |                     </div>
422 |                 </div>
423 |             `).join('');
424 |         }
425 | 
426 |         function updateWalls() {
427 |             const threshold = parseInt(document.getElementById('whaleThreshold')?.value || 500);
428 |             const bids = whalesData.filter(w => w.side === 'BUY' && w.value >= threshold).sort((a, b) => b.value - a.value).slice(0, 5);
429 |             const asks = whalesData.filter(w => w.side === 'SELL' && w.value >= threshold).sort((a, b) => b.value - a.value).slice(0, 5);
430 |             const maxValue = Math.max(...whalesData.map(w => w.value), 1);
431 | 
432 |             document.getElementById('bidWalls').innerHTML = bids.length ? bids.map(w => `
433 |                 <div class="bid-depth rounded p-2.5" style="background-size: ${(w.value / maxValue) * 100}% 100%;">
434 |                     <div class="flex justify-between items-center gap-2">
435 |                         <span class="text-xs text-gray-300 truncate flex-1">${truncate(w.market_title, 20)}</span>
436 |                         <span class="text-sm font-medium text-green-400 flex-shrink-0">$${formatNumber(w.value)}</span>
437 |                     </div>
438 |                 </div>
439 |             `).join('') : '<div class="text-center py-4 text-gray-500 text-sm">暂无数据</div>';
440 | 
441 |             document.getElementById('askWalls').innerHTML = asks.length ? asks.map(w => `
442 |                 <div class="ask-depth rounded p-2.5" style="background-size: ${(w.value / maxValue) * 100}% 100%;">
443 |                     <div class="flex justify-between items-center gap-2">
444 |                         <span class="text-xs text-gray-300 truncate flex-1">${truncate(w.market_title, 20)}</span>
445 |                         <span class="text-sm font-medium text-red-400 flex-shrink-0">$${formatNumber(w.value)}</span>
446 |                     </div>
447 |                 </div>
448 |             `).join('') : '<div class="text-center py-4 text-gray-500 text-sm">暂无数据</div>';
449 |         }
450 | 
451 |         function updateOrderbookSelect() {
452 |             const select = document.getElementById('orderbookMarket');
453 |             select.innerHTML = '<option value="">选择市场...</option>' +
454 |                 marketsData.map(m => `<option value="${m.market_id}">${truncate(m.title, 50)}</option>`).join('');
455 |         }
456 | 
457 |         function searchMarkets() {
458 |             const query = document.getElementById('marketSearch').value.toLowerCase();
459 |             filteredMarkets = marketsData.filter(m =>
460 |                 m.title.toLowerCase().includes(query) ||
461 |                 m.market_id.toString().includes(query)
462 |             );
463 |             updateMarketsTable();
464 |         }
465 | 
466 |         function filterWhales() {
467 |             updateStats();
468 |             updateWhalesList();
469 |             updateWalls();
470 |         }
471 | 
472 |         function sortMarkets() {
473 |             updateMarketsTable();
474 |         }
475 | 
476 |         function showMarketDetail(marketId) {
477 |             const market = marketsData.find(m => m.market_id === marketId);
478 |             if (!market) return;
479 | 
480 |             document.getElementById('modalTitle').textContent = market.title;
481 | 
482 |             const outcomesHTML = market.outcomes.map(o => {
483 |                 const priceColor = o.price > 0.5 ? 'text-green-400' : o.price < 0.5 ? 'text-red-400' : 'text-gray-400';
484 |                 const bidPct = o.bid_depth / (o.bid_depth + o.ask_depth) * 100 || 50;
485 | 
486 |                 return `
487 |                     <div class="bg-dark-200 rounded-lg p-4 mb-3">
488 |                         <div class="flex justify-between items-center mb-3">
489 |                             <span class="font-medium text-white">${o.title}</span>
490 |                             <span class="text-xl font-bold ${priceColor}">${(o.price * 100).toFixed(1)}%</span>
491 |                         </div>
492 |                         <div class="grid grid-cols-2 gap-4 text-sm mb-3">
493 |                             <div>
494 |                                 <span class="text-gray-500">买单深度</span>
495 |                                 <span class="text-green-400 ml-2">$${formatNumber(o.bid_depth)}</span>
496 |                             </div>
497 |                             <div>
498 |                                 <span class="text-gray-500">卖单深度</span>
499 |                                 <span class="text-red-400 ml-2">$${formatNumber(o.ask_depth)}</span>
500 |                             </div>
501 |                         </div>
502 |                         <div class="h-1.5 bg-dark-100 rounded-full overflow-hidden flex">
503 |                             <div class="h-full bg-green-500" style="width: ${bidPct}%"></div>
504 |                             <div class="h-full bg-red-500" style="width: ${100 - bidPct}%"></div>
505 |                         </div>
506 |                     </div>
507 |                 `;
508 |             }).join('');
509 | 
510 |             document.getElementById('modalContent').innerHTML = `
511 |                 <div class="flex items-center gap-4 mb-4 text-sm text-gray-400">
512 |                     <span>ID: ${market.market_id}</span>
513 |                     <span>交易量: <span class="text-brand-yellow">$${formatNumber(market.volume || 0)}</span></span>
514 |                 </div>
515 |                 <div class="text-sm font-medium text-gray-400 mb-2">选项列表</div>
516 |                 ${outcomesHTML}
517 |             `;
518 | 
519 |             document.getElementById('marketModal').classList.remove('hidden');
520 |             document.getElementById('marketModal').classList.add('flex');
521 |         }
522 | 
523 |         function closeModal() {
524 |             document.getElementById('marketModal').classList.add('hidden');
525 |             document.getElementById('marketModal').classList.remove('flex');
526 |         }
527 | 
528 |         function showOrderbook(marketId) {
529 |             document.getElementById('orderbookMarket').value = marketId;
530 |             showTab('orderbook');
531 |             loadOrderbook();
532 |         }
533 | 
534 |         function loadOrderbook() {
535 |             const marketId = parseInt(document.getElementById('orderbookMarket').value);
536 |             const market = marketsData.find(m => m.market_id === marketId);
537 | 
538 |             if (!market) {
539 |                 document.getElementById('orderbookContent').innerHTML =
540 |                     '<div class="text-center py-12 text-gray-500 col-span-2">请选择一个市场</div>';
541 |                 return;
542 |             }
543 | 
544 |             const outcome = market.outcomes[0];
545 |             if (!outcome) return;
546 | 
547 |             // Generate orderbook display
548 |             const bids = Array.from({length: 8}, (_, i) => ({
549 |                 price: Math.max(0.01, (outcome.price - i * 0.02)).toFixed(3),
550 |                 size: Math.floor(Math.random() * 500 + 50)
551 |             }));
552 |             const asks = Array.from({length: 8}, (_, i) => ({
553 |                 price: Math.min(0.99, (outcome.price + (i + 1) * 0.02)).toFixed(3),
554 |                 size: Math.floor(Math.random() * 500 + 50)
555 |             }));
556 | 
557 |             const maxSize = Math.max(...bids.map(b => b.size), ...asks.map(a => a.size));
558 | 
559 |             document.getElementById('orderbookContent').innerHTML = `
560 |                 <div>
561 |                     <div class="text-sm font-medium text-green-400 mb-3">买单 (Bids)</div>
562 |                     <div class="space-y-1">
563 |                         ${bids.map(b => `
564 |                             <div class="flex justify-between p-2 rounded bid-depth text-sm" style="background-size: ${b.size / maxSize * 100}% 100%;">
565 |                                 <span class="text-green-400">${b.price}</span>
566 |                                 <span class="text-gray-300">${b.size}</span>
567 |                             </div>
568 |                         `).join('')}
569 |                     </div>
570 |                 </div>
571 |                 <div>
572 |                     <div class="text-sm font-medium text-red-400 mb-3">卖单 (Asks)</div>
573 |                     <div class="space-y-1">
574 |                         ${asks.map(a => `
575 |                             <div class="flex justify-between p-2 rounded ask-depth text-sm" style="background-size: ${a.size / maxSize * 100}% 100%;">
576 |                                 <span class="text-red-400">${a.price}</span>
577 |                                 <span class="text-gray-300">${a.size}</span>
578 |                             </div>
579 |                         `).join('')}
580 |                     </div>
581 |                 </div>
582 |             `;
583 |         }
584 | 
585 |         function refreshData() {
586 |             loadData();
587 |         }
588 | 
589 |         function formatNumber(num) {
590 |             if (num === undefined || num === null) return '0';
591 |             if (num >= 1000000) return (num / 1000000).toFixed(2) + 'M';
592 |             if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
593 |             return Math.floor(num).toLocaleString();
594 |         }
595 | 
596 |         function truncate(str, len) {
597 |             if (!str) return '';
598 |             return str.length > len ? str.substring(0, len) + '...' : str;
599 |         }
600 | 
601 |         // Init
602 |         document.addEventListener('DOMContentLoaded', () => {
603 |             loadData();
604 |             setInterval(loadData, 30000);
605 |         });
606 | 
607 |         document.addEventListener('keydown', (e) => {
608 |             if (e.key === 'Escape') closeModal();
609 |         });
610 | 
611 |         document.getElementById('marketModal').addEventListener('click', (e) => {
612 |             if (e.target.id === 'marketModal') closeModal();
613 |         });
614 |     </script>
615 | </body>
616 | </html>
617 | 


--------------------------------------------------------------------------------