first commit

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