496 lines
17 KiB
TypeScript
496 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useSession } from "next-auth/react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import {
|
|
Loader2,
|
|
Activity,
|
|
TrendingUp,
|
|
TrendingDown,
|
|
Minus,
|
|
ArrowRight,
|
|
ArrowLeft,
|
|
BarChart3,
|
|
Trophy,
|
|
AlertTriangle,
|
|
Lock,
|
|
} from "lucide-react";
|
|
import { api } from "@/lib/api";
|
|
import { PLATFORM_MAP } from "@/lib/platforms";
|
|
import {
|
|
getHealthLevel,
|
|
HEALTH_LEVELS,
|
|
type BrandHealthReport,
|
|
} from "@/types/onboarding";
|
|
import { UpgradePrompt } from "@/components/subscription/UpgradePrompt";
|
|
import {
|
|
round,
|
|
getStatusColor,
|
|
getProgressBg,
|
|
DIMENSION_ICONS,
|
|
} from "@/lib/utils/health-score";
|
|
|
|
interface HealthDimension {
|
|
name: string;
|
|
score: number;
|
|
max_score: number;
|
|
percentage: number;
|
|
status: string;
|
|
}
|
|
|
|
interface HealthRecommendation {
|
|
priority: string;
|
|
dimension: string;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
interface Step4HealthReportProps {
|
|
brandId: string;
|
|
brandName: string;
|
|
competitors: string[];
|
|
platforms: string[];
|
|
onNext: (report: BrandHealthReport) => void;
|
|
onBack: () => void;
|
|
}
|
|
|
|
const LOCKED_DIMENSIONS = ["结构化数据", "语义一致性", "技术可访问性"];
|
|
|
|
export function Step4HealthReport({
|
|
brandId,
|
|
brandName,
|
|
competitors: _competitors,
|
|
platforms,
|
|
onNext,
|
|
onBack,
|
|
}: Step4HealthReportProps) {
|
|
const { data: session } = useSession();
|
|
const [report, setReport] = useState<BrandHealthReport | null>(null);
|
|
const [dimensions, setDimensions] = useState<HealthDimension[]>([]);
|
|
const [recommendations, setRecommendations] = useState<
|
|
HealthRecommendation[]
|
|
>([]);
|
|
const [isFullReport, setIsFullReport] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const fetchReport = async () => {
|
|
if (!session?.accessToken) return;
|
|
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
const data = (await api.onboarding.getHealthReport(
|
|
session.accessToken,
|
|
brandId,
|
|
)) as BrandHealthReport & {
|
|
dimensions?: HealthDimension[];
|
|
recommendations?: HealthRecommendation[];
|
|
is_full_report?: boolean;
|
|
health_level?: string;
|
|
health_level_label?: string;
|
|
};
|
|
setReport(data);
|
|
setDimensions(data.dimensions || []);
|
|
setRecommendations(data.recommendations || []);
|
|
setIsFullReport(data.is_full_report || false);
|
|
} catch (err) {
|
|
setError("获取健康报告失败，请重试");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchReport();
|
|
}, [session?.accessToken, brandId]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-8">
|
|
<div className="mb-6 text-center">
|
|
<div className="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
|
|
<Activity className="h-8 w-8 text-primary animate-pulse" />
|
|
</div>
|
|
<h2 className="mb-2 text-2xl font-bold">正在生成健康报告...</h2>
|
|
<p className="text-muted-foreground">
|
|
系统正在分析您的品牌在AI搜索中的表现
|
|
</p>
|
|
</div>
|
|
|
|
<Card className="w-full max-w-2xl">
|
|
<CardContent className="pt-6 space-y-4">
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
</div>
|
|
<Skeleton className="h-32 w-full" />
|
|
<Skeleton className="h-24 w-full" />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || (!loading && !report)) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-8">
|
|
<div className="mb-6 text-center">
|
|
<div className="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-red-50">
|
|
<AlertTriangle className="h-8 w-8 text-red-600" />
|
|
</div>
|
|
<h2 className="mb-2 text-2xl font-bold">生成报告失败</h2>
|
|
<p className="text-muted-foreground">
|
|
{error || "无法生成健康报告，请稍后重试"}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<Button variant="outline" onClick={onBack}>
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
上一步
|
|
</Button>
|
|
<Button variant="outline" onClick={fetchReport}>
|
|
重试
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() =>
|
|
onNext({
|
|
brand_id: brandId,
|
|
brand_name: brandName,
|
|
overall_score: 0,
|
|
platform_scores: {},
|
|
competitor_scores: [],
|
|
strengths: [],
|
|
weaknesses: [],
|
|
})
|
|
}
|
|
>
|
|
跳过此步骤
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!report) return null;
|
|
|
|
const healthLevel = getHealthLevel(report.overall_score);
|
|
const healthConfig = HEALTH_LEVELS[healthLevel];
|
|
|
|
const leadingCount = report.competitor_scores.filter(
|
|
(c) => c.is_leading,
|
|
).length;
|
|
const laggingCount = report.competitor_scores.length - leadingCount;
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-8">
|
|
<div className="mb-6 text-center">
|
|
<div className="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
|
|
<Activity className="h-8 w-8 text-primary" />
|
|
</div>
|
|
<h2 className="mb-2 text-2xl font-bold">
|
|
<span className="font-semibold">{brandName}</span> 健康报告
|
|
</h2>
|
|
<p className="text-muted-foreground">
|
|
以下是您的品牌在AI搜索中的综合表现
|
|
</p>
|
|
</div>
|
|
|
|
<Card className={`w-full max-w-md ${healthConfig.color.border} border-2`}>
|
|
<CardContent className="pt-6">
|
|
<div className="flex flex-col items-center">
|
|
<div className="relative mb-4">
|
|
<span className="text-7xl font-bold">{report.overall_score}</span>
|
|
<span className="absolute top-2 text-2xl text-muted-foreground">
|
|
/100
|
|
</span>
|
|
</div>
|
|
|
|
<Badge
|
|
variant="secondary"
|
|
className={`${healthConfig.color.bg} ${healthConfig.color.text} border ${healthConfig.color.border} text-base px-4 py-1 mb-4`}
|
|
>
|
|
{healthConfig.label}
|
|
</Badge>
|
|
|
|
{report.competitor_scores.length > 0 && (
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<TrendingUp className="h-4 w-4 text-emerald-600" />
|
|
<span className="text-emerald-600">
|
|
领先 {leadingCount} 个竞品
|
|
</span>
|
|
<span className="mx-1 text-muted-foreground">|</span>
|
|
<TrendingDown className="h-4 w-4 text-red-600" />
|
|
<span className="text-red-600">落后 {laggingCount} 个竞品</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{dimensions.length > 0 && (
|
|
<Card className="mt-4 w-full max-w-2xl">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2 text-lg">
|
|
<BarChart3 className="h-5 w-5" />
|
|
维度评分
|
|
</CardTitle>
|
|
{!isFullReport && (
|
|
<UpgradePrompt variant="badge" feature="完整6维度诊断" />
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{dimensions.map((dim) => {
|
|
const Icon = DIMENSION_ICONS[dim.name] || Activity;
|
|
return (
|
|
<div key={dim.name} className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Icon className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm font-medium">{dim.name}</span>
|
|
</div>
|
|
<span
|
|
className={`text-sm font-semibold ${getStatusColor(dim.percentage)}`}
|
|
>
|
|
{round(dim.percentage, 1)}%
|
|
</span>
|
|
</div>
|
|
<div className="h-2 w-full overflow-hidden rounded-full bg-gray-100">
|
|
<div
|
|
className={`h-full rounded-full transition-all ${getProgressBg(dim.percentage)}`}
|
|
style={{ width: `${Math.max(dim.percentage, 2)}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{!isFullReport && (
|
|
<>
|
|
{LOCKED_DIMENSIONS.map((dimName) => (
|
|
<div key={dimName} className="space-y-2 opacity-50">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Lock className="h-4 w-4 text-amber-500" />
|
|
<span className="text-sm font-medium">{dimName}</span>
|
|
</div>
|
|
<Badge
|
|
variant="outline"
|
|
className="border-amber-300 bg-amber-50 text-amber-700 text-xs"
|
|
>
|
|
Pro
|
|
</Badge>
|
|
</div>
|
|
<div className="h-2 w-full overflow-hidden rounded-full bg-gray-100">
|
|
<div
|
|
className="h-full rounded-full bg-gray-300"
|
|
style={{ width: "0%" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{recommendations.length > 0 && (
|
|
<Card className="mt-4 w-full max-w-2xl">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-lg">关键问题</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2">
|
|
{recommendations.map((rec, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-start gap-2 rounded-lg border p-3"
|
|
>
|
|
<span className="mt-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500" />
|
|
<div>
|
|
<p className="text-sm font-medium">{rec.title}</p>
|
|
<p className="text-xs text-muted-foreground mt-0.5">
|
|
{rec.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{Object.keys(report.platform_scores).length > 0 && (
|
|
<Card className="mt-4 w-full max-w-2xl">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="flex items-center gap-2 text-lg">
|
|
<BarChart3 className="h-5 w-5" />
|
|
各平台评分
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{Object.entries(report.platform_scores)
|
|
.filter(([key]) => platforms.includes(key))
|
|
.map(([platform, score]) => {
|
|
const level = getHealthLevel(score);
|
|
const config = HEALTH_LEVELS[level];
|
|
const platformName = PLATFORM_MAP[platform] || platform;
|
|
|
|
return (
|
|
<div key={platform} className="flex items-center gap-3">
|
|
<span className="w-24 text-sm truncate">
|
|
{platformName}
|
|
</span>
|
|
<div className="flex-1">
|
|
<div className="h-2 w-full overflow-hidden rounded-full bg-gray-100">
|
|
<div
|
|
className={`h-full rounded-full ${config.color.bg.replace("50", "500")}`}
|
|
style={{ width: `${score}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<span
|
|
className={`w-12 text-right font-semibold ${config.color.text}`}
|
|
>
|
|
{score}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{report.competitor_scores.length > 0 && (
|
|
<Card className="mt-4 w-full max-w-2xl">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="flex items-center gap-2 text-lg">
|
|
<Trophy className="h-5 w-5 text-amber-500" />
|
|
竞品对比
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{report.competitor_scores.map((competitor, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center justify-between rounded-lg border p-3"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className={`flex h-8 w-8 items-center justify-center rounded-full ${
|
|
competitor.is_leading
|
|
? "bg-emerald-100 text-emerald-600"
|
|
: "bg-gray-100 text-gray-600"
|
|
}`}
|
|
>
|
|
{competitor.is_leading ? (
|
|
<TrendingUp className="h-4 w-4" />
|
|
) : (
|
|
<Minus className="h-4 w-4" />
|
|
)}
|
|
</div>
|
|
<span className="font-medium">{competitor.name}</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span
|
|
className={`font-semibold ${
|
|
competitor.score >= 70
|
|
? "text-emerald-600"
|
|
: competitor.score >= 40
|
|
? "text-amber-600"
|
|
: "text-red-600"
|
|
}`}
|
|
>
|
|
{competitor.score}分
|
|
</span>
|
|
{competitor.is_leading && (
|
|
<Badge variant="default" className="bg-emerald-600">
|
|
领先
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<Card className="mt-4 w-full max-w-2xl">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-lg">优劣势分析</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<h4 className="font-medium text-emerald-600 mb-2 flex items-center gap-1">
|
|
<TrendingUp className="h-4 w-4" />
|
|
优势
|
|
</h4>
|
|
<ul className="space-y-1 text-sm text-muted-foreground">
|
|
{report.strengths.map((strength, index) => (
|
|
<li key={index} className="flex items-start gap-2">
|
|
<span className="text-emerald-500">+</span>
|
|
{strength}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-amber-600 mb-2 flex items-center gap-1">
|
|
<TrendingDown className="h-4 w-4" />
|
|
劣势
|
|
</h4>
|
|
<ul className="space-y-1 text-sm text-muted-foreground">
|
|
{report.weaknesses.map((weakness, index) => (
|
|
<li key={index} className="flex items-start gap-2">
|
|
<span className="text-amber-500">-</span>
|
|
{weakness}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{!isFullReport && (
|
|
<div className="mt-4 w-full max-w-2xl">
|
|
<UpgradePrompt
|
|
variant="inline"
|
|
feature="完整6维度诊断报告"
|
|
description="免费版仅展示3个核心维度。升级Pro可查看完整6维度诊断、深度竞品分析和AI优化方案。"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-6 flex flex-col gap-3 sm:flex-row">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={onBack}
|
|
className="flex-1"
|
|
>
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
上一步
|
|
</Button>
|
|
<Button type="button" onClick={() => onNext(report)} className="flex-1">
|
|
查看行动建议
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|