first commit

app/(shell)/dashboard/page.tsx

@@ -0,0 +1,31 @@
+export default function DashboardPage() {
+  return (
+    <div className="space-y-4">
+      <h1 className="text-xl font-semibold">Dashboard</h1>
+      <p className="text-sm text-black/60 dark:text-white/60">
+        这里会展示：今日推荐（集合竞价/午盘/盘后）、自选股摘要、模拟盘摘要。
+      </p>
+
+      <div className="grid gap-3 md:grid-cols-3">
+        <div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
+          <div className="text-sm font-medium">集合竞价</div>
+          <div className="mt-1 text-xs text-black/60 dark:text-white/60">
+            今日盘前关注
+          </div>
+        </div>
+        <div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
+          <div className="text-sm font-medium">午盘精选</div>
+          <div className="mt-1 text-xs text-black/60 dark:text-white/60">
+            盘中确认机会
+          </div>
+        </div>
+        <div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
+          <div className="text-sm font-medium">盘后分析</div>
+          <div className="mt-1 text-xs text-black/60 dark:text-white/60">
+            复盘与次日预案
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(shell)/layout.tsx

@@ -0,0 +1,61 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+const navItems = [
+  { href: "/dashboard", label: "Dashboard" },
+  { href: "/watchlist", label: "自选股" },
+  { href: "/recommendations", label: "每日推荐" },
+  { href: "/trading", label: "模拟盘" },
+  { href: "/settings", label: "设置" },
+];
+
+const quickLinks = [
+  { href: "/stocks/600519", label: "600519" },
+];
+
+export default function ShellLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-dvh bg-background text-foreground">
+      <div className="mx-auto flex w-full max-w-6xl gap-6 px-4 py-6">
+        <aside className="hidden w-56 shrink-0 md:block">
+          <div className="rounded-xl border border-black/10 bg-white/70 p-4 dark:border-white/10 dark:bg-black/30">
+            <div className="text-sm font-semibold">Stock Web</div>
+            <div className="mt-1 text-xs text-black/60 dark:text-white/60">
+              选股系统（MVP）
+            </div>
+            <nav className="mt-4 flex flex-col gap-1">
+              {navItems.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="rounded-lg px-3 py-2 text-sm transition-colors hover:bg-black/[.04] dark:hover:bg-white/[.06]"
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </nav>
+
+            <div className="mt-6 text-xs font-medium text-black/60 dark:text-white/60">
+              快速打开
+            </div>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {quickLinks.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="rounded-md border border-black/10 px-2 py-1 text-xs hover:bg-black/[.04] dark:border-white/10 dark:hover:bg-white/[.06]"
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        </aside>
+
+        <main className="min-w-0 flex-1 rounded-xl border border-black/10 bg-white/70 p-5 dark:border-white/10 dark:bg-black/30">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

app/(shell)/recommendations/page.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useEffect, useMemo } from "react";
+
+import type { RecommendationSegment } from "@/src/recommendations/types";
+import { useImportedPoolStore } from "@/src/stores/importedPoolStore";
+import { useRecommendationsStore } from "@/src/stores/recommendationsStore";
+
+const segmentOptions: { value: RecommendationSegment; label: string }[] = [
+  { value: "OPEN_AUCTION", label: "集合竞价" },
+  { value: "MIDDAY", label: "午盘精选" },
+  { value: "AFTER_HOURS", label: "盘后分析" },
+];
+
+export default function RecommendationsPage() {
+  const codesText = useImportedPoolStore((s) => s.codesText);
+  const poolLoading = useImportedPoolStore((s) => s.loading);
+  const poolError = useImportedPoolStore((s) => s.error);
+  const loadPool = useImportedPoolStore((s) => s.load);
+  const savePool = useImportedPoolStore((s) => s.save);
+  const setPoolDraft = useImportedPoolStore((s) => s.setDraft);
+
+  const date = useRecommendationsStore((s) => s.date);
+  const segment = useRecommendationsStore((s) => s.segment);
+  const recLoading = useRecommendationsStore((s) => s.loading);
+  const recError = useRecommendationsStore((s) => s.error);
+  const snapshot = useRecommendationsStore((s) => s.snapshot);
+  const setDate = useRecommendationsStore((s) => s.setDate);
+  const setSegment = useRecommendationsStore((s) => s.setSegment);
+  const loadRec = useRecommendationsStore((s) => s.load);
+  const generate = useRecommendationsStore((s) => s.generate);
+
+  useEffect(() => {
+    void loadPool();
+  }, [loadPool]);
+
+  useEffect(() => {
+    void loadRec();
+  }, [date, segment, loadRec]);
+
+  const selectedSegmentLabel = useMemo(() => {
+    return segmentOptions.find((x) => x.value === segment)?.label ?? segment;
+  }, [segment]);
+
+  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：自选股 + 导入池 作为 Universe，规则 v0.1（突破+均线趋势），每段 Top 10。
+        </p>
+      </div>
+
+      <section className="rounded-xl border border-black/10 p-4 dark:border-white/10">
+        <div className="grid gap-3 md:grid-cols-12">
+          <label className="md:col-span-3">
+            <div className="text-xs text-black/60 dark:text-white/60">日期</div>
+            <input
+              type="date"
+              value={date}
+              onChange={(e) => setDate(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>
+
+          <label className="md:col-span-3">
+            <div className="text-xs text-black/60 dark:text-white/60">时段</div>
+            <select
+              value={segment}
+              onChange={(e) => setSegment(e.target.value as RecommendationSegment)}
+              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"
+            >
+              {segmentOptions.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <div className="flex items-end md:col-span-3">
+            <button
+              type="button"
+              disabled={recLoading}
+              onClick={() => void loadRec()}
+              className="w-full rounded-lg border border-black/10 px-3 py-2 text-sm transition-colors hover:bg-black/[.04] disabled:opacity-50 dark:border-white/10 dark:hover:bg-white/[.06]"
+            >
+              读取快照
+            </button>
+          </div>
+
+          <div className="flex items-end md:col-span-3">
+            <button
+              type="button"
+              disabled={recLoading}
+              onClick={async () => {
+                // save pool first (so generated snapshot is reproducible)
+                await savePool();
+                await generate(codesText);
+              }}
+              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"
+            >
+              生成 {selectedSegmentLabel}
+            </button>
+          </div>
+        </div>
+
+        {(poolError || recError) ? (
+          <div className="mt-3 text-sm text-red-600 dark:text-red-400">
+            {poolError ?? recError}
+          </div>
+        ) : null}
+
+        {(poolLoading || recLoading) ? (
+          <div className="mt-3 text-xs text-black/60 dark:text-white/60">加载中…</div>
+        ) : null}
+      </section>
+
+      <section className="rounded-xl border border-black/10 p-4 dark:border-white/10">
+        <div className="text-sm font-medium">导入池（Universe 扩展）</div>
+        <p className="mt-1 text-xs text-black/60 dark:text-white/60">
+          每行一个代码：支持 600519 或 SH:600519 / SZ:000001 / BJ:8xxxxx。空行会忽略。
+        </p>
+
+        <textarea
+          value={codesText}
+          onChange={(e) => setPoolDraft(e.target.value)}
+          rows={6}
+          className="mt-3 w-full rounded-lg border border-black/10 bg-white px-3 py-2 font-mono text-xs outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
+        />
+
+        <div className="mt-3 flex justify-end">
+          <button
+            type="button"
+            disabled={poolLoading}
+            onClick={() => void savePool()}
+            className="rounded-lg border border-black/10 px-3 py-2 text-xs transition-colors hover:bg-black/[.04] disabled:opacity-50 dark:border-white/10 dark:hover:bg-white/[.06]"
+          >
+            保存导入池
+          </button>
+        </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>
+          <div className="text-xs text-black/60 dark:text-white/60">
+            {snapshot ? `版本 ${snapshot.screeningVersion} · ${snapshot.generatedAt}` : "（暂无快照）"}
+          </div>
+        </div>
+
+        {snapshot ? (
+          <div className="mt-3 space-y-3">
+            <div className="text-xs text-black/60 dark:text-white/60">
+              Universe：自选股 {snapshot.universe.watchlistCount} · 导入池 {snapshot.universe.importedPoolCount} · 合计 {snapshot.universe.totalCount}
+            </div>
+
+            <div className="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">Score</th>
+                    <th className="py-2">理由</th>
+                    <th className="py-2">风险</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {snapshot.items.map((it) => (
+                    <tr
+                      key={`${it.market}:${it.code}`}
+                      className="border-t border-black/5 dark:border-white/10"
+                    >
+                      <td className="py-2 text-xs text-black/60 dark:text-white/60">
+                        {it.rank}
+                      </td>
+                      <td className="py-2 font-mono">{it.code}</td>
+                      <td className="py-2">{it.market}</td>
+                      <td className="py-2">{it.score.toFixed(2)}</td>
+                      <td className="py-2 text-xs">
+                        <ul className="list-disc pl-4">
+                          {it.reasons.map((r, idx) => (
+                            <li key={idx}>{r}</li>
+                          ))}
+                        </ul>
+                      </td>
+                      <td className="py-2 text-xs">
+                        {it.risks.length === 0 ? (
+                          <span className="text-black/60 dark:text-white/60">-</span>
+                        ) : (
+                          <ul className="list-disc pl-4">
+                            {it.risks.map((r, idx) => (
+                              <li key={idx}>{r}</li>
+                            ))}
+                          </ul>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        ) : (
+          <div className="mt-3 text-sm text-black/60 dark:text-white/60">
+            还没有快照。点击右上角“生成”。
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

app/(shell)/settings/page.tsx

@@ -0,0 +1,10 @@
+export default function SettingsPage() {
+  return (
+    <div className="space-y-2">
+      <h1 className="text-xl font-semibold">设置</h1>
+      <p className="text-sm text-black/60 dark:text-white/60">
+        MVP：数据源/LLM 模式（Ollama/云端）与导入导出入口。
+      </p>
+    </div>
+  );
+}

app/(shell)/stocks/[code]/page.tsx

@@ -0,0 +1,62 @@
+import Link from "next/link";
+
+import { CandlesChart } from "@/src/components/charts/CandlesChart";
+import { mockGetDailyOhlcv, mockGetQuote } from "@/src/market/providers/mockProvider";
+
+export default async function StockPage({
+  params,
+}: {
+  params: Promise<{ code: string }>;
+}) {
+  const { code } = await params;
+
+  const bars = mockGetDailyOhlcv(code, 200);
+  const quote = mockGetQuote(code);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <div className="text-xs text-black/60 dark:text-white/60">个股</div>
+          <h1 className="text-xl font-semibold">
+            <span className="font-mono">{code}</span>
+          </h1>
+        </div>
+        <Link
+          href="/watchlist"
+          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]"
+        >
+          返回自选股
+        </Link>
+      </div>
+
+      <div className="grid gap-3 md:grid-cols-3">
+        <div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
+          <div className="text-xs text-black/60 dark:text-white/60">最新价</div>
+          <div className="mt-1 text-lg font-semibold">{quote.price.toFixed(2)}</div>
+        </div>
+        <div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
+          <div className="text-xs text-black/60 dark:text-white/60">涨跌幅</div>
+          <div className="mt-1 text-lg font-semibold">
+            {quote.changePct != null ? `${quote.changePct.toFixed(2)}%` : "-"}
+          </div>
+        </div>
+        <div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
+          <div className="text-xs text-black/60 dark:text-white/60">更新时间</div>
+          <div className="mt-1 text-sm">{new Date(quote.asOf).toLocaleString()}</div>
+        </div>
+      </div>
+
+      <div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
+        <div className="text-sm font-medium">日线K线（Mock 数据）</div>
+        <div className="mt-3">
+          <CandlesChart bars={bars} />
+        </div>
+      </div>
+
+      <div className="text-xs text-black/60 dark:text-white/60">
+        注：当前为 Mock 行情。后续 M2 会替换为真实数据源（Next Route Handler 代理）。
+      </div>
+    </div>
+  );
+}

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>
+  );
+}

app/(shell)/watchlist/page.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import type { Market } from "@/src/domain/types";
+import { useWatchlistStore } from "@/src/stores/watchlistStore";
+
+function normalizeCode(raw: string) {
+  return raw.trim();
+}
+
+export default function WatchlistPage() {
+  const { items, loading, error, refresh, add, update, remove } =
+    useWatchlistStore();
+
+  const [code, setCode] = useState("");
+  const [market, setMarket] = useState<Market>("SZ");
+  const [notes, setNotes] = useState("");
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const canSubmit = useMemo(() => {
+    return normalizeCode(code).length > 0;
+  }, [code]);
+
+  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：添加/删除、备注、置顶（本地 IndexedDB 持久化，userId=anon）。
+        </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-6"
+          onSubmit={async (e) => {
+            e.preventDefault();
+            if (!canSubmit) return;
+
+            await add({
+              code: normalizeCode(code),
+              market,
+              notes: notes.trim() || undefined,
+            });
+
+            setCode("");
+            setNotes("");
+          }}
+        >
+          <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-2">
+            <div className="text-xs text-black/60 dark:text-white/60">备注</div>
+            <input
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+              placeholder="可选"
+              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-1">
+            <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="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>
+              </tr>
+            </thead>
+            <tbody className="align-top">
+              {items.length === 0 ? (
+                <tr>
+                  <td
+                    className="py-6 text-xs text-black/60 dark:text-white/60"
+                    colSpan={6}
+                  >
+                    暂无自选股
+                  </td>
+                </tr>
+              ) : null}
+
+              {items.map((item) => (
+                <tr
+                  key={item.id}
+                  className="border-t border-black/5 dark:border-white/10"
+                >
+                  <td className="py-2">
+                    <button
+                      type="button"
+                      className="rounded-md border border-black/10 px-2 py-1 text-xs dark:border-white/10"
+                      onClick={() =>
+                        void update(item.code, item.market, {
+                          pinned: !item.pinned,
+                        })
+                      }
+                      title="置顶"
+                    >
+                      {item.pinned ? "是" : "否"}
+                    </button>
+                  </td>
+                  <td className="py-2 font-mono">{item.code}</td>
+                  <td className="py-2">{item.market}</td>
+                  <td className="py-2">
+                    <input
+                      defaultValue={item.notes ?? ""}
+                      placeholder="（空）"
+                      className="w-full rounded-md border border-black/10 bg-transparent px-2 py-1 text-xs outline-none focus:border-black/30 dark:border-white/10 dark:focus:border-white/30"
+                      onBlur={(e) => {
+                        const v = e.target.value.trim();
+                        if ((item.notes ?? "") !== v) {
+                          void update(item.code, item.market, {
+                            notes: v || undefined,
+                          });
+                        }
+                      }}
+                    />
+                  </td>
+                  <td className="py-2 text-xs text-black/60 dark:text-white/60">
+                    {new Date(item.createdAt).toLocaleString()}
+                  </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(item.code, item.market)}
+                    >
+                      删除
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {loading ? (
+          <div className="mt-3 text-xs text-black/60 dark:text-white/60">
+            加载中…
+          </div>
+        ) : null}
+      </section>
+    </div>
+  );
+}