feat: T1.4 健康度仪表盘 — 后端聚合 API + 前端驾驶舱
- 后端:dashboard 路由(summary 聚合 + scores 列表) - 前端:驾驶舱首页(KPI 卡片 + 健康度概览) - 测试:4 个仪表盘测试(总计 37 tests passed) - 前端构建 12 路由成功
This commit is contained in:
@@ -1,15 +1,155 @@
|
||||
/** 投资人端驾驶舱首页 — 占位页面。 */
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Building2, Heart, AlertTriangle, FileText, TrendingUp, TrendingDown, Minus } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { getDashboardSummary, type DashboardSummary } from "@/lib/dashboard";
|
||||
import { LoadingSpinner } from "@/components/shared/LoadingSpinner";
|
||||
import { EmptyState } from "@/components/shared/EmptyState";
|
||||
import { HealthScoreBadge } from "@/components/shared/HealthScoreBadge";
|
||||
|
||||
/**
|
||||
* 投资人端 — 驾驶舱首页。
|
||||
*/
|
||||
export default function InvestorDashboardPage() {
|
||||
const [summary, setSummary] = useState<DashboardSummary | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
async function load() {
|
||||
try {
|
||||
const resp = await getDashboardSummary();
|
||||
if (resp.data) setSummary(resp.data);
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
load();
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold text-foreground">投资机构驾驶舱</h1>
|
||||
<div className="flex justify-center py-20">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const kpis = [
|
||||
{
|
||||
label: "被投企业",
|
||||
value: summary?.total_companies ?? 0,
|
||||
icon: Building2,
|
||||
href: "/companies",
|
||||
color: "text-[var(--investor-primary)]",
|
||||
bg: "bg-[var(--investor-primary)]/10",
|
||||
},
|
||||
{
|
||||
label: "平均健康度",
|
||||
value: summary?.avg_health_score?.toFixed(1) ?? "0.0",
|
||||
icon: Heart,
|
||||
href: "/companies",
|
||||
color: "text-emerald-600",
|
||||
bg: "bg-emerald-50",
|
||||
},
|
||||
{
|
||||
label: "高风险事件",
|
||||
value: summary?.high_risk_count ?? 0,
|
||||
icon: AlertTriangle,
|
||||
href: "/risks",
|
||||
color: "text-amber-600",
|
||||
bg: "bg-amber-50",
|
||||
},
|
||||
{
|
||||
label: "待审月报",
|
||||
value: summary?.pending_reports ?? 0,
|
||||
icon: FileText,
|
||||
href: "/reports",
|
||||
color: "text-blue-600",
|
||||
bg: "bg-blue-50",
|
||||
},
|
||||
];
|
||||
|
||||
export default function InvestorHomePage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">投资机构驾驶舱</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">Portfolio 全局健康度与风险概览</p>
|
||||
</div>
|
||||
<LoadingSpinner className="py-20" size={32} />
|
||||
|
||||
{/* KPI 卡片 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{kpis.map((kpi) => (
|
||||
<Link
|
||||
key={kpi.label}
|
||||
href={kpi.href}
|
||||
className="rounded-lg border bg-white p-5 shadow-sm transition-all hover:shadow-md"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">{kpi.label}</p>
|
||||
<p className="mt-1 text-2xl font-bold text-foreground">{kpi.value}</p>
|
||||
</div>
|
||||
<div className={`flex h-12 w-12 items-center justify-center rounded-lg ${kpi.bg}`}>
|
||||
<kpi.icon className={kpi.color} size={24} aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 健康度概览 */}
|
||||
<div className="rounded-lg border bg-white p-5 shadow-sm">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">健康度概览</h2>
|
||||
<Link href="/companies" className="text-sm text-[var(--investor-primary)] hover:underline">
|
||||
查看全部 →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{summary && summary.recent_scores.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{summary.recent_scores.map((score) => (
|
||||
<div key={score.id} className="flex items-center justify-between border-b pb-3 last:border-0 last:pb-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<HealthScoreBadge score={Math.round(score.total_score)} />
|
||||
<div>
|
||||
<p className="text-sm font-medium">企业 ID: {score.company_id.slice(0, 8)}...</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{new Date(score.calculated_at).toLocaleDateString("zh-CN")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
{score.financial_score !== null && (
|
||||
<span className="text-muted-foreground">财务: {score.financial_score.toFixed(0)}</span>
|
||||
)}
|
||||
{score.operational_score !== null && (
|
||||
<span className="text-muted-foreground">经营: {score.operational_score.toFixed(0)}</span>
|
||||
)}
|
||||
{score.trend && (
|
||||
<span className={`flex items-center gap-1 ${
|
||||
score.trend === "up" ? "text-emerald-600" :
|
||||
score.trend === "down" ? "text-rose-600" : "text-muted-foreground"
|
||||
}`}>
|
||||
{score.trend === "up" && <TrendingUp size={14} aria-hidden="true" />}
|
||||
{score.trend === "down" && <TrendingDown size={14} aria-hidden="true" />}
|
||||
{score.trend === "stable" && <Minus size={14} aria-hidden="true" />}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState title="暂无评分数据" description="健康度评分将在月报提交后自动计算" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
/** 仪表盘相关类型和 API 函数。 */
|
||||
|
||||
import { apiFetch, type ApiResponse } from "./api";
|
||||
|
||||
/** 健康度评分。 */
|
||||
export interface HealthScore {
|
||||
id: string;
|
||||
company_id: string;
|
||||
total_score: number;
|
||||
financial_score: number | null;
|
||||
operational_score: number | null;
|
||||
ai_commercial_score: number | null;
|
||||
ai_cost_score: number | null;
|
||||
trend: string | null;
|
||||
evidence_json: Record<string, unknown> | null;
|
||||
recommendations_json: Record<string, unknown> | null;
|
||||
calculated_at: string;
|
||||
}
|
||||
|
||||
/** 仪表盘汇总数据。 */
|
||||
export interface DashboardSummary {
|
||||
total_companies: number;
|
||||
avg_health_score: number;
|
||||
high_risk_count: number;
|
||||
pending_reports: number;
|
||||
recent_scores: HealthScore[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取仪表盘汇总。
|
||||
*/
|
||||
export async function getDashboardSummary(): Promise<ApiResponse<DashboardSummary>> {
|
||||
return apiFetch<DashboardSummary>("/dashboard/summary");
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取健康度评分列表。
|
||||
*/
|
||||
export async function listHealthScores(companyId?: string): Promise<ApiResponse<HealthScore[]>> {
|
||||
const query = companyId ? `?company_id=${companyId}` : "";
|
||||
return apiFetch<HealthScore[]>(`/dashboard/scores${query}`);
|
||||
}
|
||||
Reference in New Issue
Block a user