Tools/huheng-research
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add market dashboard web app

Browse Source
This commit is contained in:
shay7sev
2026-06-23 09:56:20 +08:00
parent 154af21bfb
commit fcc68c9eb8
18 changed files with 2769 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -1,6 +1,10 @@
.DS_Store .DS_Store
__pycache__/ __pycache__/
*.py[cod] *.py[cod]
node_modules/
.next/
out/
*.tsbuildinfo
.pytest_cache/ .pytest_cache/
.coverage .coverage
.venv/ .venv/

6
apps/web/next-env.d.ts vendored Normal file
View File

@@ -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.

7
apps/web/next.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
reactStrictMode: true,
};
export default nextConfig;

2120
apps/web/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

28
apps/web/package.json Normal file
View File

@@ -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"
}
}

7
apps/web/postcss.config.mjs Normal file
View File

@@ -0,0 +1,7 @@
const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;

36
apps/web/src/app/globals.css Normal file
View File

@@ -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;
}

23
apps/web/src/app/layout.tsx Normal file
View File

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

5
apps/web/src/app/page.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { MarketDashboard } from "@/components/dashboard/market-dashboard";
export default function Home() {
return <MarketDashboard />;
}

21
apps/web/src/app/providers.tsx Normal file
View File

@@ -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>;
}

287
apps/web/src/components/dashboard/market-dashboard.tsx Normal file
View File

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

26
apps/web/src/components/ui/badge.tsx Normal file
View File

@@ -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}
/>
);
}

20
apps/web/src/components/ui/button.tsx Normal file
View File

@@ -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}
/>
);
}

25
apps/web/src/components/ui/card.tsx Normal file
View File

@@ -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} />;
}

30
apps/web/src/components/ui/table.tsx Normal file
View File

@@ -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} />;
}

64
apps/web/src/lib/api.ts Normal file
View File

@@ -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>;
}

19
apps/web/src/lib/utils.ts Normal file
View File

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

41
apps/web/tsconfig.json Normal file
View File

@@ -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"
]
}