// RegisterPage.jsx — Redesigned registration page matching the docs aesthetic. // Keeps the Chinese-language UI (target audience) but restyles into the // warm-paper + Instrument Serif + IBM Plex Mono system. Drops the dark theme. const { useState: useRegState } = React; function RegisterTopbar() { return (
Public Docs Site
Proxy API WS usage
已有账号 · 生成 Token →
); } // Single source of truth for tier display. // Numbers (wsSymbols, restPerMin) must match cloud-proxy RateLimiter and docs Tiers table. const ALL_CHANNELS = ["stocks", "options", "boats", "overnight", "crypto", "news"]; const TIERS = [ { id: "trial", name: "Trial", price: "$30", period: "/ 3 days", tagline: "短期体验", desc: "3 天试用 · 全部 WS 通道 · 不可续期", channels: ALL_CHANNELS, wsSymbols: 50, restPerMin: 60, restParallel: 5, wsConns: 3, validity: "3 days", rest: "stocks + options history", restOnly: false, badge: null, }, { id: "basic", name: "Basic", price: "$40", period: "/ month", tagline: "仅 REST · 批量下载", desc: "无实时 WebSocket · 仅历史数据与批量下载接口", channels: [], wsSymbols: 0, restPerMin: 10, restParallel: 2, wsConns: 1, validity: "30 days", rest: "stocks + options history", restOnly: true, badge: null, }, { id: "value", name: "Value", price: "$50", period: "/ month", tagline: "REST 二选一 · 限速", desc: "全部 WS 通道 + REST 股票或期权二选一 · 限速 30 req/min", channels: ALL_CHANNELS, wsSymbols: 30, restPerMin: 30, restParallel: 3, wsConns: 2, validity: "30 days", rest: "stocks history 或 options chains", restOnly: false, badge: null, hasMode: true, modes: [ { id: "stocks", label: "股票方向", desc: "全部 WS + REST 仅股票历史" }, { id: "options", label: "期权方向", desc: "全部 WS + REST 仅期权历史" }, ], }, { id: "standard", name: "Standard", price: "$80", period: "/ month", tagline: "主流套餐", desc: "全部 WS 通道 · 50 symbols · stocks + options 历史", channels: ALL_CHANNELS, wsSymbols: 50, restPerMin: 60, restParallel: 5, wsConns: 3, validity: "30 days", rest: "stocks + options history", restOnly: false, badge: "POPULAR", }, { id: "premium", name: "Premium", price: "$130", period: "/ month", tagline: "完整接入", desc: "全部 WS 通道 · 500 symbols · 全部 REST 含 crypto", channels: ALL_CHANNELS, wsSymbols: 500, restPerMin: 300, restParallel: 10, wsConns: "∞", validity: "30 days", rest: "全部 · 含 crypto orderbooks", restOnly: false, badge: null, }, ]; const COMPARISON_ROWS = [ { label: "Realtime WebSocket", get: t => t.channels.length > 0 }, { label: "WS channels", get: t => t.channels.length === 0 ? "—" : `${t.channels.length} channels`, raw: true }, { label: "REST data scope", get: t => t.id === "premium" ? "all" : t.id === "value" ? "mode" : t.restOnly ? "stocks+options" : "stocks+options", raw: true }, { label: "REST req/min", get: t => `${t.restPerMin}/min`, raw: true }, { label: "REST parallel", get: t => `${t.restParallel}`, raw: true }, { label: "WS symbols", get: t => t.wsSymbols === 0 ? "—" : `${t.wsSymbols}`, raw: true }, { label: "WS connections", get: t => t.channels.length === 0 ? "—" : `${t.wsConns}`, raw: true }, { label: "Token validity", get: t => t.validity, raw: true }, ]; function RegisterPage() { const [tier, setTier] = useRegState("standard"); const [mode, setMode] = useRegState(""); // "stocks" or "options" for value tier // Registration Form State const [regUsername, setRegUsername] = useRegState(""); const [regPhone, setRegPhone] = useRegState(""); const [regMsg, setRegMsg] = useRegState(""); const [regStatus, setRegStatus] = useRegState(""); // "success", "error" const [regLoading, setRegLoading] = useRegState(false); // Status Query Form State const [checkUsername, setCheckUsername] = useRegState(""); const [checkPhone, setCheckPhone] = useRegState(""); const [checkMsg, setCheckMsg] = useRegState(""); const [checkStatus, setCheckStatus] = useRegState(""); // "approved", "rejected", "pending", "not_found", "error" const [checkTokenInfo, setCheckTokenInfo] = useRegState(null); // { token, expiry, role } const [checkLoading, setCheckLoading] = useRegState(false); // Handle Registration Submit const handleRegisterSubmit = async (e) => { e.preventDefault(); if (!regUsername.trim() || !regPhone.trim()) { setRegMsg("请填写用户名和手机号。"); setRegStatus("error"); return; } if (tier === "value" && !mode) { setRegMsg("Value 套餐请先选择 REST 数据方向（股票 或 期权）。"); setRegStatus("error"); return; } setRegLoading(true); setRegMsg(""); setRegStatus(""); try { const resp = await fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: regUsername.trim(), phone: regPhone.trim(), tier, ...(tier === "value" && mode && { mode }) }) }); const data = await resp.json(); if (resp.ok && data.success) { setRegMsg(data.message || "注册提交成功，等待审核。"); setRegStatus("success"); setRegUsername(""); setRegPhone(""); } else { setRegMsg(data.message || "注册失败，请检查输入。"); setRegStatus("error"); } } catch (err) { setRegMsg("网络错误，请稍后再试。"); setRegStatus("error"); } finally { setRegLoading(false); } }; // Handle Check Status const handleCheckStatus = async (e) => { e.preventDefault(); if (!checkUsername.trim() || !checkPhone.trim()) { setCheckMsg("请填写用户名和手机号。"); setCheckStatus("error"); return; } setCheckLoading(true); setCheckMsg(""); setCheckStatus(""); setCheckTokenInfo(null); try { const resp = await fetch('/api/check-status', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: checkUsername.trim(), phone: checkPhone.trim() }) }); const data = await resp.json(); if (resp.ok && data.success) { setCheckMsg(data.message); setCheckStatus(data.status); if (data.status === 'approved' && data.token) { setCheckTokenInfo({ token: data.token, expiry: data.expiry, role: data.role }); } } else { setCheckMsg(data.message || "查询失败。"); setCheckStatus("error"); } } catch (err) { setCheckMsg("网络错误，请稍后再试。"); setCheckStatus("error"); } finally { setCheckLoading(false); } }; return (
{/* Hero */}
注册 · 待审核

新用户 注册

选择套餐并填写信息，管理员确认订单后可自助生成 Token。 注册不会立即开通 — 通常 1 个工作日内完成审核。

{/* Layout: form + status side by side */}
{/* Left: tiers + form */}
{/* Tier cards */}
1 · 选择服务等级
5 plans · USD · subscription
{TIERS.map(t => { const selected = tier === t.id; return ( ); })}
{/* Value mode selector — shown only when value tier is selected */} {tier === "value" && (() => { const vt = TIERS.find(t => t.id === "value"); return (
选择 REST 数据方向
pick one · WS 不受限
{vt.modes.map(m => { const active = mode === m.id; return ( ); })}
); })()} {/* Feature comparison strip — data-driven from TIERS */}
{TIERS.map(t => )} {COMPARISON_ROWS.map(row => ( {TIERS.map(t => { const v = row.get(t); if (row.raw) { return ; } return v ? : ; })} ))}
Feature{t.name}
{row.label}{v}✓—
{/* Form fields */}
2 · 账户信息
setRegUsername(e.target.value)} required />
注册成功后无法修改。
setRegPhone(e.target.value)} required />
用于匹配卖家订单记录。
您选择的套餐： {TIERS.find(t => t.id === tier).name} {TIERS.find(t => t.id === tier).price}{TIERS.find(t => t.id === tier).period} · 提交后会进入待审核队列
{regMsg && (
{regMsg}
)}
{/* Right: status-check card */}
); } window.RegisterPage = RegisterPage;