first commit

app/(shell)/trading/page.tsx

@@ -0,0 +1,294 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import type { Market } from "@/src/domain/types";
+import type { Trade } from "@/src/trading/types";
+import { computePositions } from "@/src/services/paperTrading";
+import { toTrade } from "@/src/repositories/tradeRepo";
+import { useTradingStore } from "@/src/stores/tradingStore";
+
+function normalizeCode(raw: string) {
+  return raw.trim();
+}
+
+function toNumber(v: string) {
+  const n = Number(v);
+  return Number.isFinite(n) ? n : NaN;
+}
+
+export default function TradingPage() {
+  const { trades, loading, error, refresh, add, remove } = useTradingStore();
+
+  const [code, setCode] = useState("");
+  const [market, setMarket] = useState<Market>("SZ");
+  const [side, setSide] = useState<"BUY" | "SELL">("BUY");
+  const [quantity, setQuantity] = useState("100");
+  const [price, setPrice] = useState("10");
+  const [fees, setFees] = useState("0");
+  const [note, setNote] = useState("");
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const tradesParsed: Trade[] = useMemo(() => {
+    return trades.map(toTrade);
+  }, [trades]);
+
+  const positions = useMemo(() => computePositions(tradesParsed), [tradesParsed]);
+
+  const qtyNum = useMemo(() => toNumber(quantity), [quantity]);
+  const priceNum = useMemo(() => toNumber(price), [price]);
+
+  const canSubmit = useMemo(() => {
+    return (
+      normalizeCode(code).length > 0 &&
+      qtyNum > 0 &&
+      priceNum > 0 &&
+      !Number.isNaN(qtyNum) &&
+      !Number.isNaN(priceNum)
+    );
+  }, [code, qtyNum, priceNum]);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-xl font-semibold">模拟盘</h1>
+        <p className="mt-1 text-sm text-black/60 dark:text-white/60">
+          MVP：手动录入成交（买/卖），以平均成本计算持仓与已实现盈亏。
+        </p>
+      </div>
+
+      <section className="rounded-xl border border-black/10 p-4 dark:border-white/10">
+        <div className="text-sm font-medium">新增成交</div>
+
+        <form
+          className="mt-3 grid gap-3 md:grid-cols-10"
+          onSubmit={async (e) => {
+            e.preventDefault();
+            if (!canSubmit) return;
+
+            await add({
+              code: normalizeCode(code),
+              market,
+              side,
+              quantity: qtyNum,
+              price: priceNum,
+              fees: fees.trim() ? toNumber(fees) : undefined,
+              tradeAt: new Date().toISOString(),
+              note: note.trim() || undefined,
+            });
+
+            setNote("");
+          }}
+        >
+          <label className="md:col-span-2">
+            <div className="text-xs text-black/60 dark:text-white/60">代码</div>
+            <input
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              placeholder="例如：600519"
+              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
+            />
+          </label>
+
+          <label className="md:col-span-1">
+            <div className="text-xs text-black/60 dark:text-white/60">市场</div>
+            <select
+              value={market}
+              onChange={(e) => setMarket(e.target.value as Market)}
+              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
+            >
+              <option value="SZ">SZ</option>
+              <option value="SH">SH</option>
+              <option value="BJ">BJ</option>
+            </select>
+          </label>
+
+          <label className="md:col-span-1">
+            <div className="text-xs text-black/60 dark:text-white/60">方向</div>
+            <select
+              value={side}
+              onChange={(e) => setSide(e.target.value as "BUY" | "SELL")}
+              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
+            >
+              <option value="BUY">买入</option>
+              <option value="SELL">卖出</option>
+            </select>
+          </label>
+
+          <label className="md:col-span-2">
+            <div className="text-xs text-black/60 dark:text-white/60">数量</div>
+            <input
+              value={quantity}
+              onChange={(e) => setQuantity(e.target.value)}
+              inputMode="numeric"
+              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
+            />
+          </label>
+
+          <label className="md:col-span-2">
+            <div className="text-xs text-black/60 dark:text-white/60">价格</div>
+            <input
+              value={price}
+              onChange={(e) => setPrice(e.target.value)}
+              inputMode="decimal"
+              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
+            />
+          </label>
+
+          <label className="md:col-span-2">
+            <div className="text-xs text-black/60 dark:text-white/60">费用(可选)</div>
+            <input
+              value={fees}
+              onChange={(e) => setFees(e.target.value)}
+              inputMode="decimal"
+              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
+            />
+          </label>
+
+          <label className="md:col-span-8">
+            <div className="text-xs text-black/60 dark:text-white/60">备注(可选)</div>
+            <input
+              value={note}
+              onChange={(e) => setNote(e.target.value)}
+              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
+            />
+          </label>
+
+          <div className="flex items-end md:col-span-2">
+            <button
+              type="submit"
+              disabled={!canSubmit || loading}
+              className="w-full rounded-lg bg-black px-3 py-2 text-sm font-medium text-white transition-opacity disabled:opacity-50 dark:bg-white dark:text-black"
+            >
+              记录成交
+            </button>
+          </div>
+        </form>
+
+        {error ? (
+          <div className="mt-3 text-sm text-red-600 dark:text-red-400">
+            {error}
+          </div>
+        ) : null}
+      </section>
+
+      <section className="rounded-xl border border-black/10 p-4 dark:border-white/10">
+        <div className="text-sm font-medium">持仓</div>
+        <div className="mt-3 overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead className="text-left text-xs text-black/60 dark:text-white/60">
+              <tr>
+                <th className="py-2">代码</th>
+                <th className="py-2">市场</th>
+                <th className="py-2">数量</th>
+                <th className="py-2">均价</th>
+                <th className="py-2">已实现盈亏</th>
+              </tr>
+            </thead>
+            <tbody>
+              {positions.length === 0 ? (
+                <tr>
+                  <td
+                    className="py-6 text-xs text-black/60 dark:text-white/60"
+                    colSpan={5}
+                  >
+                    暂无持仓
+                  </td>
+                </tr>
+              ) : null}
+
+              {positions.map((p) => (
+                <tr
+                  key={`${p.market}:${p.code}`}
+                  className="border-t border-black/5 dark:border-white/10"
+                >
+                  <td className="py-2 font-mono">{p.code}</td>
+                  <td className="py-2">{p.market}</td>
+                  <td className="py-2">{p.quantity}</td>
+                  <td className="py-2">{p.avgCost.toFixed(3)}</td>
+                  <td className="py-2">{p.realizedPnl.toFixed(2)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section className="rounded-xl border border-black/10 p-4 dark:border-white/10">
+        <div className="flex items-center justify-between gap-3">
+          <div className="text-sm font-medium">交易流水</div>
+          <button
+            type="button"
+            onClick={() => void refresh()}
+            className="rounded-lg border border-black/10 px-3 py-2 text-xs transition-colors hover:bg-black/[.04] dark:border-white/10 dark:hover:bg-white/[.06]"
+          >
+            刷新
+          </button>
+        </div>
+
+        <div className="mt-3 overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead className="text-left text-xs text-black/60 dark:text-white/60">
+              <tr>
+                <th className="py-2">时间</th>
+                <th className="py-2">代码</th>
+                <th className="py-2">市场</th>
+                <th className="py-2">方向</th>
+                <th className="py-2">数量</th>
+                <th className="py-2">价格</th>
+                <th className="py-2">费用</th>
+                <th className="py-2">备注</th>
+                <th className="py-2">操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              {trades.length === 0 ? (
+                <tr>
+                  <td
+                    className="py-6 text-xs text-black/60 dark:text-white/60"
+                    colSpan={9}
+                  >
+                    暂无交易
+                  </td>
+                </tr>
+              ) : null}
+
+              {trades.map((t) => (
+                <tr key={t.tradeId} className="border-t border-black/5 dark:border-white/10">
+                  <td className="py-2 text-xs text-black/60 dark:text-white/60">
+                    {new Date(t.tradeAt).toLocaleString()}
+                  </td>
+                  <td className="py-2 font-mono">{t.code}</td>
+                  <td className="py-2">{t.market}</td>
+                  <td className="py-2">{t.side === "BUY" ? "买" : "卖"}</td>
+                  <td className="py-2">{t.quantity}</td>
+                  <td className="py-2">{t.price}</td>
+                  <td className="py-2">{t.fees ?? 0}</td>
+                  <td className="py-2 text-xs">{t.note ?? ""}</td>
+                  <td className="py-2">
+                    <button
+                      type="button"
+                      className="rounded-md border border-black/10 px-2 py-1 text-xs transition-colors hover:bg-black/[.04] dark:border-white/10 dark:hover:bg-white/[.06]"
+                      onClick={() => void remove(t.tradeId)}
+                    >
+                      删除
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {loading ? (
+          <div className="mt-3 text-xs text-black/60 dark:text-white/60">
+            加载中…
+          </div>
+        ) : null}
+      </section>
+    </div>
+  );
+}