UI: centered nav title, settings tabs, running status, manual buttons.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-24 17:17:44 +08:00
parent 8ea05e7064
commit b6d9877538
7 changed files with 236 additions and 145 deletions
@@ -40,6 +40,11 @@ class StrategyEngine:
        rest_left = 0
        if rest_until:
            rest_left = max(0, int((int(rest_until) - time.time() * 1000) / 1000))
+        last_error = row["last_error"]
+        # 清掉已修复的旧序列化错误残留
+        if last_error and "PriceResult" in str(last_error) and "__dict__" in str(last_error):
+            self._set_state(last_error=None)
+            last_error = None
        return {
            "running": bool(row["running"]),
            "phase": row["phase"],
@@ -51,7 +56,7 @@ class StrategyEngine:
            "rest_seconds": rest_sec,
            "exit_move_points": exit_pts,
            "can_open": can_open_new(open_hhmm=s.open_hhmm, stop_hhmm=s.stop_open_hhmm),
-            "last_error": row["last_error"],
+            "last_error": last_error,
            "position": upl,
            "ledger": self.ledger.snapshot(),
        }
@@ -67,16 +72,16 @@ class StrategyEngine:
        sql = f"UPDATE strategy_state SET {', '.join(cols)} WHERE id=1"
        self.db.execute(sql, tuple(vals))

+    async def pause(self) -> dict[str, Any]:
+        self._set_state(running=0, phase="paused", last_error=None)
+        return self.state()
+
    async def start(self) -> dict[str, Any]:
        self._set_state(running=1, last_error=None, phase="idle")
        if self._task is None or self._task.done():
            self._task = asyncio.create_task(self._loop(), name="strategy-engine")
        return self.state()

-    async def pause(self) -> dict[str, Any]:
-        self._set_state(running=0, phase="paused")
-        return self.state()
-
    async def emergency_close(self) -> dict[str, Any]:
        async with self._lock:
            r = self.matcher.close_group(reason="emergency")
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>eth_hedge_sim</title>
+    <title>OKX 自动化对冲系统</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
@@ -11,33 +11,38 @@ function Shell({ children }: { children: ReactNode }) {
  const user = getUsername();
  return (
    <div className="app-shell">
-      <nav className="topnav">
-        <div className="brand">eth_hedge_sim</div>
-        <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>
-        <div className="spacer" />
-        <span className="meta mono">{user}</span>
-        <button
-          className="btn ghost"
-          type="button"
-          onClick={() => {
-            clearSession();
-            window.location.href = "/login";
-          }}
-        >
-          退出
-        </button>
-      </nav>
+      <header className="topnav">
+        <div className="topnav-side left">
+          <div className="brand">OKX 自动化对冲系统</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>
+        <div className="topnav-side right">
+          <span className="meta mono">{user}</span>
+          <button
+            className="btn ghost"
+            type="button"
+            onClick={() => {
+              clearSession();
+              window.location.href = "/login";
+            }}
+          >
+            退出
+          </button>
+        </div>
+      </header>
      <main className="page">{children}</main>
    </div>
  );
@@ -27,7 +27,7 @@ export default function LoginPage() {
  return (
    <div className="login-wrap">
      <form className="login-box" onSubmit={onSubmit}>
-        <h1>eth_hedge_sim</h1>
+        <h1>OKX 自动化对冲系统</h1>
        <p>模拟盘登录</p>
        {err ? <div className="err">{err}</div> : null}
        <div className="field">
@@ -90,7 +90,7 @@ export default function PlanPage() {
          disabled={!!busy}
          onClick={() => act("/api/sim/open-group", "open")}
        >
-          模拟开一组
+          手动开一组
        </button>
        <button
          className="btn ghost"
@@ -98,7 +98,7 @@ export default function PlanPage() {
          disabled={!!busy}
          onClick={() => act("/api/sim/close-group", "close")}
        >
-          模拟全平
+          手动全平
        </button>
        <button
          className="btn ghost"
@@ -115,8 +115,12 @@ export default function PlanPage() {
        <div className="kv">
          <span>策略</span>
          <span className="mono">
-            {plan?.running ? "运行中" : "已停"} · {plan?.phase || "—"} · 轮次{" "}
-            {plan?.rounds_done ?? 0}/{plan?.max_rounds ?? 3}
+            {plan?.running ? (
+              <span className="status-running">启动中</span>
+            ) : (
+              <span className="status-stopped">已停</span>
+            )}{" "}
+            · {plan?.phase || "—"} · 轮次 {plan?.rounds_done ?? 0}/{plan?.max_rounds ?? 3}
          </span>
        </div>
        <div className="kv">
@@ -7,7 +7,11 @@ import {
  StrategySettings,
 } from "../api/client";

+type Tab = "strategy" | "account";
+
 export default function SettingsPage() {
+  const [tab, setTab] = useState<Tab>("strategy");
+
  const [newUsername, setNewUsername] = useState(getUsername() || "admin");
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
@@ -85,113 +89,132 @@ export default function SettingsPage() {
  }

  return (
-    <div style={{ display: "grid", gap: 16, maxWidth: 560 }}>
-      <div className="card">
-        <h2 style={{ marginTop: 0 }}>策略设置</h2>
-        <p style={{ color: "var(--muted)" }}>
-          标的波动 N 点全平、轮次休息、费率（滑点=1×费率）。
-        </p>
-        {stratOk ? <div style={{ color: "var(--up)", marginBottom: 12 }}>{stratOk}</div> : null}
-        <form onSubmit={onSaveStrategy}>
-          <div className="field">
-            <label htmlFor="exit">EXIT_MOVE_POINTS（标的波动点数）</label>
-            <input
-              id="exit"
-              className="mono"
-              type="number"
-              step="1"
-              value={exitPts}
-              onChange={(e) => setExitPts(Number(e.target.value))}
-            />
-          </div>
-          <div className="field">
-            <label htmlFor="rest">REST_SECONDS（轮间休息秒）</label>
-            <input
-              id="rest"
-              className="mono"
-              type="number"
-              step="1"
-              value={rest}
-              onChange={(e) => setRest(Number(e.target.value))}
-            />
-          </div>
-          <div className="field">
-            <label htmlFor="rounds">MAX_ROUNDS</label>
-            <input
-              id="rounds"
-              className="mono"
-              type="number"
-              step="1"
-              value={maxRounds}
-              onChange={(e) => setMaxRounds(Number(e.target.value))}
-            />
-          </div>
-          <div className="field">
-            <label htmlFor="fee">FEE_RATE</label>
-            <input
-              id="fee"
-              className="mono"
-              type="number"
-              step="0.0001"
-              value={fee}
-              onChange={(e) => setFee(Number(e.target.value))}
-            />
-          </div>
-          <button className="btn" type="submit">
-            保存策略
-          </button>
-        </form>
+    <div style={{ maxWidth: 560 }}>
+      <h2 style={{ marginTop: 0 }}>系统设置</h2>
+      <div className="tabs">
+        <button
+          type="button"
+          className={tab === "strategy" ? "tab active" : "tab"}
+          onClick={() => setTab("strategy")}
+        >
+          策略设置
+        </button>
+        <button
+          type="button"
+          className={tab === "account" ? "tab active" : "tab"}
+          onClick={() => setTab("account")}
+        >
+          登录账户
+        </button>
      </div>

-      <div className="card">
-        <h2 style={{ marginTop: 0 }}>登录账号</h2>
-        {err ? <div className="err">{err}</div> : null}
-        {ok ? <div style={{ color: "var(--up)", marginBottom: 12 }}>{ok}</div> : null}
-        <form onSubmit={onSaveCreds}>
-          <div className="field">
-            <label htmlFor="user">新用户名</label>
-            <input
-              id="user"
-              value={newUsername}
-              onChange={(e) => setNewUsername(e.target.value)}
-              required
-            />
-          </div>
-          <div className="field">
-            <label htmlFor="cur">当前密码</label>
-            <input
-              id="cur"
-              type="password"
-              value={currentPassword}
-              onChange={(e) => setCurrentPassword(e.target.value)}
-              required
-            />
-          </div>
-          <div className="field">
-            <label htmlFor="np">新密码</label>
-            <input
-              id="np"
-              type="password"
-              value={newPassword}
-              onChange={(e) => setNewPassword(e.target.value)}
-              required
-            />
-          </div>
-          <div className="field">
-            <label htmlFor="cp">确认新密码</label>
-            <input
-              id="cp"
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              required
-            />
-          </div>
-          <button className="btn" type="submit" disabled={loading}>
-            {loading ? "保存中…" : "保存账号"}
-          </button>
-        </form>
-      </div>
+      {tab === "strategy" ? (
+        <div className="card">
+          <p style={{ color: "var(--muted)", marginTop: 0 }}>
+            标的波动 N 点全平、轮次休息、费率（滑点=1×费率）。
+          </p>
+          {stratOk ? <div style={{ color: "var(--up)", marginBottom: 12 }}>{stratOk}</div> : null}
+          {err && tab === "strategy" ? <div className="err">{err}</div> : null}
+          <form onSubmit={onSaveStrategy}>
+            <div className="field">
+              <label htmlFor="exit">EXIT_MOVE_POINTS（标的波动点数）</label>
+              <input
+                id="exit"
+                className="mono"
+                type="number"
+                step="1"
+                value={exitPts}
+                onChange={(e) => setExitPts(Number(e.target.value))}
+              />
+            </div>
+            <div className="field">
+              <label htmlFor="rest">REST_SECONDS（轮间休息秒）</label>
+              <input
+                id="rest"
+                className="mono"
+                type="number"
+                step="1"
+                value={rest}
+                onChange={(e) => setRest(Number(e.target.value))}
+              />
+            </div>
+            <div className="field">
+              <label htmlFor="rounds">MAX_ROUNDS</label>
+              <input
+                id="rounds"
+                className="mono"
+                type="number"
+                step="1"
+                value={maxRounds}
+                onChange={(e) => setMaxRounds(Number(e.target.value))}
+              />
+            </div>
+            <div className="field">
+              <label htmlFor="fee">FEE_RATE</label>
+              <input
+                id="fee"
+                className="mono"
+                type="number"
+                step="0.0001"
+                value={fee}
+                onChange={(e) => setFee(Number(e.target.value))}
+              />
+            </div>
+            <button className="btn" type="submit">
+              保存策略
+            </button>
+          </form>
+        </div>
+      ) : (
+        <div className="card">
+          {err ? <div className="err">{err}</div> : null}
+          {ok ? <div style={{ color: "var(--up)", marginBottom: 12 }}>{ok}</div> : null}
+          <form onSubmit={onSaveCreds}>
+            <div className="field">
+              <label htmlFor="user">新用户名</label>
+              <input
+                id="user"
+                value={newUsername}
+                onChange={(e) => setNewUsername(e.target.value)}
+                required
+              />
+            </div>
+            <div className="field">
+              <label htmlFor="cur">当前密码</label>
+              <input
+                id="cur"
+                type="password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                required
+              />
+            </div>
+            <div className="field">
+              <label htmlFor="np">新密码</label>
+              <input
+                id="np"
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                required
+              />
+            </div>
+            <div className="field">
+              <label htmlFor="cp">确认新密码</label>
+              <input
+                id="cp"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+              />
+            </div>
+            <button className="btn" type="submit" disabled={loading}>
+              {loading ? "保存中…" : "保存账号"}
+            </button>
+          </form>
+        </div>
+      )}
    </div>
  );
 }
@@ -49,7 +49,8 @@ input {
 }

 .topnav {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
@@ -61,11 +62,31 @@ input {
  z-index: 10;
 }

+.topnav-side {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.topnav-side.right {
+  justify-content: flex-end;
+}
+
+.topnav-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
 .brand {
  font-weight: 700;
  letter-spacing: 0.02em;
-  margin-right: 12px;
  color: var(--accent);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .topnav a {
@@ -73,6 +94,7 @@ input {
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
+  white-space: nowrap;
 }

 .topnav a.active {
@@ -80,6 +102,38 @@ input {
  background: var(--bg-panel);
 }

+.tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--line);
+  padding-bottom: 0;
+}
+
+.tab {
+  background: transparent;
+  border: 0;
+  color: var(--muted);
+  padding: 10px 14px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+
+.tab.active {
+  color: var(--text);
+  border-bottom-color: var(--accent);
+}
+
+.status-running {
+  color: var(--up);
+  font-weight: 600;
+}
+
+.status-stopped {
+  color: var(--muted);
+}
+
 .topnav .spacer {
  flex: 1;
 }