dekun/eth_hedge_sim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add mobile monitor layout with bottom nav and glance card.

Browse Source 
EOF

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-27 06:54:42 +08:00
parent 56a4007130
commit 60112bf8eb
4 changed files with 343 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/更新说明.md
+10
View File
@@ -5,6 +5,16 @@
---
## 2026-07-27 — 手机端监控布局
### 变更
1. **底部导航**：窄屏隐藏顶栏菜单，改用底栏「监控 / 记录 / 统计 / 设置」（含安全区）。
2. **监控首页卡**：一屏看状态（启动/暂停/已停）、盘口、阶段、净盈利 vs 目标、到期倒计时、最近错误。
3. **操作区**：启动 / 暂停 / 紧急全平触摸友好；紧急全平通栏；桌面布局不变。
---
## 2026-07-26 — 企业微信通知 + 暂停盯目标
### 变更
frontend/src/App.tsx
+35 -16
View File
@@ -12,6 +12,13 @@ import TradesPage from "./pages/Trades";
import StatsPage from "./pages/Stats";
import SettingsPage from "./pages/Settings";
const NAV = [
{ to: "/plan", label: "监控", full: "自动对冲计划" },
{ to: "/trades", label: "记录", full: "交易记录" },
{ to: "/stats", label: "统计", full: "统计" },
{ to: "/settings", label: "设置", full: "系统设置" },
] as const;
function Shell({ children }: { children: ReactNode }) {
const user = getUsername();
return (
@@ -26,27 +33,26 @@ function Shell({ children }: { children: ReactNode }) {
width={28}
height={28}
/>
<span>比特骆驼自动化对冲系统</span>
<span className="brand-full">比特骆驼自动化对冲系统</span>
<span className="brand-short">比特骆驼</span>
</div>
</div>
<nav className="topnav-center">
<NavLink to="/plan" className={({ isActive }) => (isActive ? "active" : "")}>
自动对冲计划
</NavLink>
<NavLink to="/trades" className={({ isActive }) => (isActive ? "active" : "")}>
交易记录
</NavLink>
<NavLink to="/stats" className={({ isActive }) => (isActive ? "active" : "")}>
统计
</NavLink>
<NavLink to="/settings" className={({ isActive }) => (isActive ? "active" : "")}>
系统设置
</NavLink>
<nav className="topnav-center" aria-label="主导航">
{NAV.map((item) => (
<NavLink
key={item.to}
to={item.to}
className={({ isActive }) => (isActive ? "active" : "")}
>
<span className="nav-label-full">{item.full}</span>
<span className="nav-label-short">{item.label}</span>
</NavLink>
))}
</nav>
<div className="topnav-side right">
<span className="meta mono">{user}</span>
<span className="meta mono topnav-user">{user}</span>
<button
className="btn ghost"
className="btn ghost topnav-logout"
type="button"
onClick={() => {
clearSession();
@@ -58,6 +64,19 @@ function Shell({ children }: { children: ReactNode }) {
</div>
</header>
<main className="page">{children}</main>
<nav className="bottom-nav" aria-label="手机导航">
{NAV.map((item) => (
<NavLink
key={item.to}
to={item.to}
className={({ isActive }) =>
isActive ? "bottom-nav-item active" : "bottom-nav-item"
}
>
<span className="bottom-nav-label">{item.label}</span>
</NavLink>
))}
</nav>
</div>
);
}
frontend/src/pages/Plan.tsx
+62 -12
View File
@@ -128,21 +128,71 @@ export default function PlanPage() {
const countdownUrgent =
open && expiryMs != null && expiryMs - nowMs > 0 && expiryMs - nowMs < 6 * 3600_000;
const venueShort =
plan?.mode === "LIVE"
? `实盘·${(snap?.exchange || "okx").toUpperCase()}`
: "模拟盘";
return (
<div>
<h2 style={{ marginTop: 0 }}>自动对冲计划</h2>
<p style={{ color: "var(--muted)", marginTop: -8 }}>
{plan?.mode === "LIVE" ? "LIVE 实盘下单" : "SIM 本地撮合"} · 行情{" "}
{(snap?.exchange || "okx").toUpperCase()}
{snap?.perp_inst_id ? ` · ${snap.perp_inst_id}` : ""} ·
目标平仓(双腿/远虚只平永续) · 未达标则到期结算
{plan?.mode === "LIVE" && plan.live_ready === false
? ` · 未就绪: ${plan.live_ready_reason || "请配置 API"}`
: ""}
</p>
<div className="plan-page">
<div className="plan-desktop-head">
<h2 style={{ marginTop: 0 }}>自动对冲计划</h2>
<p style={{ color: "var(--muted)", marginTop: -8 }}>
{plan?.mode === "LIVE" ? "LIVE 实盘下单" : "SIM 本地撮合"} · 行情{" "}
{(snap?.exchange || "okx").toUpperCase()}
{snap?.perp_inst_id ? ` · ${snap.perp_inst_id}` : ""} ·
目标平仓(双腿/远虚只平永续) · 未达标则到期结算
{plan?.mode === "LIVE" && plan.live_ready === false
? ` · 未就绪: ${plan.live_ready_reason || "请配置 API"}`
: ""}
</p>
</div>
{/* 手机端一屏监控卡：状态 / 净利 / 倒计时 */}
<section className="plan-mobile-hero" aria-label="监控摘要">
<div className="plan-mobile-hero-top">
<span
className={
plan?.running
? "plan-pill plan-pill-on"
: plan?.phase === "paused"
? "plan-pill plan-pill-pause"
: "plan-pill plan-pill-off"
}
>
{plan?.running ? "启动中" : plan?.phase === "paused" ? "已暂停" : "已停"}
</span>
<span className="plan-pill plan-pill-muted mono">{venueShort}</span>
<span className="plan-mobile-phase mono">{phaseLabel}</span>
</div>
<div className="plan-mobile-hero-pnl">
<div className="plan-mobile-pnl-block">
<span className="plan-mobile-label">净盈利</span>
<span className={`plan-mobile-pnl-num mono ${pnlClass(open ? netPnl : null)}`}>
{open ? fmt(netPnl) : "—"}
</span>
<span className="plan-mobile-sub mono">目标 {fmt(exitTarget)} U</span>
</div>
<div className="plan-mobile-pnl-block">
<span className="plan-mobile-label">到期</span>
<span
className={`plan-mobile-countdown mono ${countdownUrgent ? "pos-countdown-urgent" : ""}`}
>
{countdown}
</span>
<span className="plan-mobile-sub mono">
{open ? pos?.group_id || "持仓中" : "空仓"}
</span>
</div>
</div>
{plan?.last_error ? (
<div className="plan-mobile-err">{plan.last_error}</div>
) : null}
</section>
{err ? <div className="err">{err}</div> : null}
<div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 12 }}>
<div className="plan-actions">
<button
className={plan?.running ? "btn btn-running" : "btn"}
type="button"
frontend/src/styles/app.css
+236 -15
View File
@@ -183,32 +183,253 @@ input {
}
}
.brand-short {
display: none;
}
.nav-label-short {
display: none;
}
.bottom-nav {
display: none;
}
.plan-mobile-hero {
display: none;
}
.plan-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
@media (max-width: 900px) {
.page {
padding: 12px 14px 24px;
padding: 12px 14px calc(72px + env(safe-area-inset-bottom, 0px));
}
.topnav {
grid-template-columns: 1fr;
gap: 10px;
}
.topnav-side.left,
.topnav-side.right {
justify-content: space-between;
grid-template-columns: 1fr auto;
gap: 8px;
}
.topnav-center {
justify-content: flex-start;
flex-wrap: wrap;
gap: 2px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
display: none;
}
.topnav a {
padding: 8px 10px;
.topnav-side.left {
min-width: 0;
}
.topnav-side.right {
justify-content: flex-end;
}
.brand-full {
display: none;
}
.brand-short {
display: inline;
}
.nav-label-full {
display: none;
}
.nav-label-short {
display: inline;
}
.bottom-nav {
display: grid;
grid-template-columns: repeat(4, 1fr);
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
border-top: 1px solid var(--line);
background: rgba(11, 14, 17, 0.96);
backdrop-filter: blur(10px);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 48px;
text-decoration: none;
color: var(--muted);
font-size: 13px;
font-weight: 600;
border-radius: 8px;
}
.bottom-nav-item.active {
color: var(--accent);
background: rgba(240, 185, 11, 0.08);
}
.plan-desktop-head {
display: none;
}
.plan-mobile-hero {
display: block;
margin: 0 0 12px;
padding: 14px 14px 12px;
border-radius: 12px;
border: 1px solid var(--line);
background:
linear-gradient(160deg, rgba(240, 185, 11, 0.08), transparent 55%),
var(--bg-panel);
}
.plan-mobile-hero-top {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.plan-pill {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
border: 1px solid var(--line);
}
.plan-pill-on {
color: #0ecb81;
border-color: rgba(14, 203, 129, 0.45);
background: rgba(14, 203, 129, 0.12);
}
.plan-pill-off {
color: var(--muted);
}
.plan-pill-pause {
color: #f0b90b;
border-color: rgba(240, 185, 11, 0.45);
background: rgba(240, 185, 11, 0.12);
}
.plan-pill-muted {
color: var(--muted);
font-weight: 600;
}
.plan-mobile-phase {
margin-left: auto;
color: var(--text);
font-size: 13px;
}
.plan-mobile-hero-pnl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.plan-mobile-pnl-block {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.plan-mobile-label {
color: var(--muted);
font-size: 12px;
}
.plan-mobile-pnl-num {
font-size: 28px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
}
.plan-mobile-countdown {
font-size: 18px;
font-weight: 700;
line-height: 1.25;
}
.plan-mobile-sub {
color: var(--muted);
font-size: 12px;
}
.plan-mobile-err {
margin-top: 10px;
font-size: 12px;
color: var(--danger);
line-height: 1.4;
word-break: break-word;
}
.plan-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.plan-actions .btn {
min-height: 44px;
width: 100%;
}
.plan-actions .btn.danger {
grid-column: 1 / -1;
}
.plan-actions .meta {
grid-column: 1 / -1;
}
.topnav-user {
max-width: 6em;
overflow: hidden;
text-overflow: ellipsis;
}
.topnav-logout {
padding: 8px 10px;
min-height: 40px;
}
.tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
}
.tab {
flex: 0 0 auto;
padding: 10px 12px;
min-height: 44px;
}
.settings-subtabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
}
.settings-actions .btn {
min-height: 44px;
}
}