feat: add market dashboard web app

2026-06-23 09:56:20 +08:00
parent 154af21bfb
commit fcc68c9eb8
18 changed files with 2769 additions and 0 deletions
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
--- a/apps/web/next.config.ts
+++ b/apps/web/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;
--- a/apps/web/package-lock.json
+++ b/apps/web/package-lock.json
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "shanghai-housing-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.12",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.561.0",
+    "next": "^16.0.10",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "recharts": "^3.5.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  }
+}
--- a/apps/web/postcss.config.mjs
+++ b/apps/web/postcss.config.mjs
@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -0,0 +1,36 @@
+@import "tailwindcss";
+
+:root {
+  --background: #f6f7f9;
+  --foreground: #172033;
+  --card: #ffffff;
+  --card-foreground: #172033;
+  --muted: #eef1f5;
+  --muted-foreground: #647084;
+  --border: #dbe1ea;
+  --primary: #0f766e;
+  --primary-foreground: #ffffff;
+  --accent: #2563eb;
+  --warning: #b45309;
+  --danger: #be123c;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+  letter-spacing: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -0,0 +1,23 @@
+import type { Metadata } from "next";
+
+import { Providers } from "./providers";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "上海房市投资研究系统",
+  description: "Shanghai housing market investment research workspace",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh-CN">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -0,0 +1,5 @@
+import { MarketDashboard } from "@/components/dashboard/market-dashboard";
+
+export default function Home() {
+  return <MarketDashboard />;
+}
--- a/apps/web/src/app/providers.tsx
+++ b/apps/web/src/app/providers.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+            retry: 1,
+            staleTime: 60_000,
+          },
+        },
+      }),
+  );
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}
--- a/apps/web/src/components/dashboard/market-dashboard.tsx
+++ b/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>
+  );
+}
--- a/apps/web/src/components/ui/badge.tsx
+++ b/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}
+    />
+  );
+}
--- a/apps/web/src/components/ui/button.tsx
+++ b/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}
+    />
+  );
+}
--- a/apps/web/src/components/ui/card.tsx
+++ b/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} />;
+}
--- a/apps/web/src/components/ui/table.tsx
+++ b/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} />;
+}
--- a/apps/web/src/lib/api.ts
+++ b/apps/web/src/lib/api.ts
@@ -0,0 +1,64 @@
+export type AreaScore = {
+  area_id: string;
+  name: string;
+  district: string;
+  segment: string;
+  month: string;
+  investment_score: number;
+  recommendation: string;
+  liquidity_score: number;
+  momentum_score: number;
+  rent_support_score: number;
+  safety_margin_score: number;
+  credit_support_score: number;
+  supply_risk_score: number;
+  valuation_pressure_score: number;
+  transaction_count: number;
+  transaction_price_psm: number;
+  listing_count: number;
+  listing_price_psm: number;
+  rent_price_psm: number;
+  median_days_on_market: number;
+  annual_rent_yield_pct: number;
+  listing_pressure_ratio: number;
+  discount_pct: number;
+  price_momentum_pct: number;
+  volume_momentum_pct: number;
+};
+
+export type AreaScoreSummary = {
+  area_id: string;
+  name: string;
+  district: string;
+  investment_score: number;
+  recommendation: string;
+};
+
+export type MarketOverview = {
+  month: string;
+  area_count: number;
+  average_investment_score: number;
+  average_rent_yield_pct: number;
+  top_area: AreaScoreSummary | null;
+  weakest_area: AreaScoreSummary | null;
+  highest_supply_risk_area: AreaScoreSummary | null;
+};
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL?.replace(/\/$/, "") ?? "http://127.0.0.1:8080";
+
+export async function fetchMarketOverview(month: string): Promise<MarketOverview> {
+  return fetchJson(`/api/v1/market/overview?month=${encodeURIComponent(month)}`);
+}
+
+export async function fetchAreaScores(month: string): Promise<AreaScore[]> {
+  return fetchJson(`/api/v1/areas/scores?month=${encodeURIComponent(month)}`);
+}
+
+async function fetchJson<T>(path: string): Promise<T> {
+  const response = await fetch(`${API_BASE_URL}${path}`);
+  if (!response.ok) {
+    throw new Error(`API request failed with ${response.status}`);
+  }
+  return response.json() as Promise<T>;
+}
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -0,0 +1,19 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatNumber(value: number, digits = 1) {
+  return new Intl.NumberFormat("zh-CN", {
+    maximumFractionDigits: digits,
+    minimumFractionDigits: digits,
+  }).format(value);
+}
+
+export function formatPrice(value: number) {
+  return new Intl.NumberFormat("zh-CN", {
+    maximumFractionDigits: 0,
+  }).format(value);
+}
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}