feat: add market dashboard web app

apps/web/src/components/dashboard/market-dashboard.tsx

@@ -0,0 +1,287 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { Activity, AlertTriangle, MapPinned, RefreshCw, TrendingUp } from "lucide-react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { fetchAreaScores, fetchMarketOverview } from "@/lib/api";
+import type { AreaScore } from "@/lib/api";
+import { formatNumber, formatPrice } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+const MONTH = "2026-05";
+
+export function MarketDashboard() {
+  const overview = useQuery({
+    queryKey: ["market-overview", MONTH],
+    queryFn: () => fetchMarketOverview(MONTH),
+  });
+  const scores = useQuery({
+    queryKey: ["area-scores", MONTH],
+    queryFn: () => fetchAreaScores(MONTH),
+  });
+
+  const isLoading = overview.isLoading || scores.isLoading;
+  const hasError = overview.isError || scores.isError;
+
+  return (
+    <main className="min-h-screen px-4 py-5 sm:px-6 lg:px-8">
+      <div className="mx-auto flex max-w-7xl flex-col gap-5">
+        <header className="flex flex-col gap-3 border-b border-[var(--border)] pb-4 lg:flex-row lg:items-end lg:justify-between">
+          <div>
+            <p className="text-sm font-medium text-[var(--muted-foreground)]">上海房市投资研究系统</p>
+            <h1 className="mt-1 text-2xl font-semibold tracking-normal text-slate-950">
+              市场总览
+            </h1>
+          </div>
+          <div className="flex items-center gap-2">
+            <Badge variant="muted">{MONTH}</Badge>
+            <Button
+              variant="outline"
+              onClick={() => {
+                void overview.refetch();
+                void scores.refetch();
+              }}
+              disabled={isLoading}
+              aria-label="刷新"
+              title="刷新"
+            >
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          </div>
+        </header>
+
+        {hasError ? <ErrorState /> : null}
+
+        <section className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+          <MetricCard
+            title="样本板块"
+            value={overview.data?.area_count ?? 0}
+            suffix="个"
+            icon={<MapPinned className="h-4 w-4" />}
+            loading={isLoading}
+          />
+          <MetricCard
+            title="平均综合分"
+            value={overview.data?.average_investment_score ?? 0}
+            icon={<Activity className="h-4 w-4" />}
+            loading={isLoading}
+          />
+          <MetricCard
+            title="平均租金收益率"
+            value={overview.data?.average_rent_yield_pct ?? 0}
+            suffix="%"
+            icon={<TrendingUp className="h-4 w-4" />}
+            loading={isLoading}
+          />
+          <MetricCard
+            title="供应压力最高"
+            textValue={overview.data?.highest_supply_risk_area?.name ?? "-"}
+            icon={<AlertTriangle className="h-4 w-4" />}
+            loading={isLoading}
+            tone="warning"
+          />
+        </section>
+
+        <section className="grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1fr)_420px]">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between gap-3">
+              <CardTitle>板块投资观察评分</CardTitle>
+              {overview.data?.top_area ? (
+                <Badge variant="success">首位：{overview.data.top_area.name}</Badge>
+              ) : null}
+            </CardHeader>
+            <CardContent className="h-[340px]">
+              <ScoreChart scores={scores.data ?? []} loading={isLoading} />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>核心结论</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <InsightRow
+                label="最高评分"
+                value={overview.data?.top_area?.name ?? "-"}
+                detail={
+                  overview.data?.top_area
+                    ? `${formatNumber(overview.data.top_area.investment_score)} 分`
+                    : "-"
+                }
+              />
+              <InsightRow
+                label="最低评分"
+                value={overview.data?.weakest_area?.name ?? "-"}
+                detail={
+                  overview.data?.weakest_area
+                    ? `${formatNumber(overview.data.weakest_area.investment_score)} 分`
+                    : "-"
+                }
+              />
+              <InsightRow
+                label="供应压力"
+                value={overview.data?.highest_supply_risk_area?.name ?? "-"}
+                detail={overview.data?.highest_supply_risk_area?.recommendation ?? "-"}
+              />
+            </CardContent>
+          </Card>
+        </section>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>板块明细</CardTitle>
+          </CardHeader>
+          <CardContent className="overflow-x-auto p-0">
+            <AreaScoreTable scores={scores.data ?? []} loading={isLoading} />
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  );
+}
+
+function MetricCard({
+  title,
+  value,
+  textValue,
+  suffix,
+  icon,
+  loading,
+  tone = "default",
+}: {
+  title: string;
+  value?: number;
+  textValue?: string;
+  suffix?: string;
+  icon: React.ReactNode;
+  loading: boolean;
+  tone?: "default" | "warning";
+}) {
+  return (
+    <Card>
+      <CardContent className="flex min-h-28 items-center justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-sm text-[var(--muted-foreground)]">{title}</p>
+          <p className="mt-2 truncate text-2xl font-semibold text-slate-950">
+            {loading ? "-" : textValue ?? `${formatNumber(value ?? 0)}${suffix ?? ""}`}
+          </p>
+        </div>
+        <div
+          className={
+            tone === "warning"
+              ? "flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-amber-50 text-[var(--warning)]"
+              : "flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-teal-50 text-[var(--primary)]"
+          }
+        >
+          {icon}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ScoreChart({ scores, loading }: { scores: AreaScore[]; loading: boolean }) {
+  if (loading) {
+    return <div className="h-full rounded-md bg-[var(--muted)]" />;
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <BarChart data={scores} margin={{ top: 8, right: 12, left: 0, bottom: 4 }}>
+        <CartesianGrid stroke="#e2e8f0" vertical={false} />
+        <XAxis dataKey="name" tickLine={false} axisLine={false} tick={{ fontSize: 12 }} />
+        <YAxis domain={[0, 100]} tickLine={false} axisLine={false} tick={{ fontSize: 12 }} />
+        <Tooltip
+          cursor={{ fill: "#eef2f7" }}
+          formatter={(value) => [`${formatNumber(Number(value))} 分`, "综合分"]}
+          labelStyle={{ color: "#172033" }}
+        />
+        <Bar dataKey="investment_score" fill="#0f766e" radius={[4, 4, 0, 0]} />
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}
+
+function InsightRow({ label, value, detail }: { label: string; value: string; detail: string }) {
+  return (
+    <div className="flex items-center justify-between gap-3 border-b border-[var(--border)] pb-3 last:border-0 last:pb-0">
+      <div className="min-w-0">
+        <p className="text-sm text-[var(--muted-foreground)]">{label}</p>
+        <p className="mt-1 truncate text-base font-semibold text-slate-950">{value}</p>
+      </div>
+      <Badge variant="muted">{detail}</Badge>
+    </div>
+  );
+}
+
+function AreaScoreTable({ scores, loading }: { scores: AreaScore[]; loading: boolean }) {
+  if (loading) {
+    return <div className="h-48 bg-[var(--muted)]" />;
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>板块</TableHead>
+          <TableHead>行政区</TableHead>
+          <TableHead className="text-right">综合分</TableHead>
+          <TableHead>建议</TableHead>
+          <TableHead className="text-right">成交均价/㎡</TableHead>
+          <TableHead className="text-right">成交套数</TableHead>
+          <TableHead className="text-right">租金收益率</TableHead>
+          <TableHead className="text-right">供应风险</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {scores.map((score) => (
+          <TableRow key={score.area_id}>
+            <TableCell className="font-medium">{score.name}</TableCell>
+            <TableCell>{score.district}</TableCell>
+            <TableCell className="text-right font-semibold">
+              {formatNumber(score.investment_score)}
+            </TableCell>
+            <TableCell>
+              <Badge variant={score.recommendation === "观察池" ? "success" : "muted"}>
+                {score.recommendation}
+              </Badge>
+            </TableCell>
+            <TableCell className="text-right">{formatPrice(score.transaction_price_psm)}</TableCell>
+            <TableCell className="text-right">{score.transaction_count}</TableCell>
+            <TableCell className="text-right">
+              {formatNumber(score.annual_rent_yield_pct, 2)}%
+            </TableCell>
+            <TableCell className="text-right">{formatNumber(score.supply_risk_score)}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+function ErrorState() {
+  return (
+    <div className="rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
+      API 暂时不可用
+    </div>
+  );
+}

apps/web/src/components/ui/badge.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils";
+
+type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
+  variant?: "default" | "success" | "warning" | "danger" | "muted";
+};
+
+const variants: Record<NonNullable<BadgeProps["variant"]>, string> = {
+  default: "border-blue-200 bg-blue-50 text-blue-800",
+  success: "border-teal-200 bg-teal-50 text-teal-800",
+  warning: "border-amber-200 bg-amber-50 text-amber-800",
+  danger: "border-rose-200 bg-rose-50 text-rose-800",
+  muted: "border-slate-200 bg-slate-100 text-slate-700",
+};
+
+export function Badge({ className, variant = "default", ...props }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex h-6 items-center rounded-md border px-2 text-xs font-medium",
+        variants[variant],
+        className,
+      )}
+      {...props}
+    />
+  );
+}

apps/web/src/components/ui/button.tsx

@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils";
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: "default" | "outline";
+};
+
+export function Button({ className, variant = "default", ...props }: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        "inline-flex h-9 items-center justify-center gap-2 rounded-md px-3 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+        variant === "default"
+          ? "bg-[var(--primary)] text-[var(--primary-foreground)] hover:bg-teal-800"
+          : "border border-[var(--border)] bg-white text-slate-800 hover:bg-slate-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

apps/web/src/components/ui/card.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@/lib/utils";
+
+export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-[var(--border)] bg-[var(--card)] text-[var(--card-foreground)] shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("border-b border-[var(--border)] p-4", className)} {...props} />;
+}
+
+export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 className={cn("text-sm font-semibold", className)} {...props} />;
+}
+
+export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-4", className)} {...props} />;
+}

apps/web/src/components/ui/table.tsx

@@ -0,0 +1,30 @@
+import { cn } from "@/lib/utils";
+
+export function Table({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>) {
+  return <table className={cn("w-full border-collapse text-sm", className)} {...props} />;
+}
+
+export function TableHeader(props: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return <thead {...props} />;
+}
+
+export function TableBody(props: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return <tbody {...props} />;
+}
+
+export function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) {
+  return <tr className={cn("border-b border-[var(--border)] last:border-0", className)} {...props} />;
+}
+
+export function TableHead({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <th
+      className={cn("h-10 px-3 text-left text-xs font-semibold text-[var(--muted-foreground)]", className)}
+      {...props}
+    />
+  );
+}
+
+export function TableCell({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) {
+  return <td className={cn("px-3 py-3 align-middle", className)} {...props} />;
+}