721 lines
30 KiB
TypeScript
721 lines
30 KiB
TypeScript
import { useState, useEffect } from "react";
|
||
import { useNavigate, useParams } from "react-router";
|
||
import { motion, AnimatePresence } from "motion/react";
|
||
import {
|
||
ChevronLeft,
|
||
Heart,
|
||
TrendingUp,
|
||
AlertCircle,
|
||
CheckCircle2,
|
||
Info,
|
||
Calendar,
|
||
Share2,
|
||
Download,
|
||
Sparkles,
|
||
Activity,
|
||
Baby,
|
||
MessageCircle,
|
||
FileText,
|
||
X,
|
||
Link2,
|
||
Check,
|
||
AlertTriangle,
|
||
ShieldAlert,
|
||
Loader2,
|
||
Image as ImageIcon,
|
||
} from "lucide-react";
|
||
import { Button } from "../components/ui/button";
|
||
import { Card } from "../components/ui/card";
|
||
import { Badge } from "../components/ui/badge";
|
||
import { generateAnalysis, type AnalysisResponse } from "../services/api";
|
||
|
||
export function AIAnalysisPage() {
|
||
const navigate = useNavigate();
|
||
const { reportId } = useParams();
|
||
const [showShareSheet, setShowShareSheet] = useState(false);
|
||
const [linkCopied, setLinkCopied] = useState(false);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [analysisData, setAnalysisData] = useState<AnalysisResponse | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (!reportId) return;
|
||
setLoading(true);
|
||
generateAnalysis(reportId)
|
||
.then((data) => setAnalysisData(data))
|
||
.catch((err) => setError(err instanceof Error ? err.message : "加载失败"))
|
||
.finally(() => setLoading(false));
|
||
}, [reportId]);
|
||
|
||
const handleCopyLink = async () => {
|
||
try {
|
||
const shareUrl = `${window.location.origin}/share/${reportId}`;
|
||
await navigator.clipboard.writeText(shareUrl);
|
||
setLinkCopied(true);
|
||
setTimeout(() => setLinkCopied(false), 2000);
|
||
} catch (error) {
|
||
console.error('复制失败:', error);
|
||
// 降级方案：使用旧的复制方法
|
||
const textArea = document.createElement('textarea');
|
||
textArea.value = `${window.location.origin}/share/${reportId}`;
|
||
textArea.style.position = 'fixed';
|
||
textArea.style.left = '-999999px';
|
||
document.body.appendChild(textArea);
|
||
textArea.select();
|
||
try {
|
||
document.execCommand('copy');
|
||
setLinkCopied(true);
|
||
setTimeout(() => setLinkCopied(false), 2000);
|
||
} catch (err) {
|
||
alert('复制失败，请手动复制链接');
|
||
}
|
||
document.body.removeChild(textArea);
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="min-h-dvh bg-morandi-50 flex items-center justify-center">
|
||
<div className="text-center">
|
||
<Loader2 className="w-12 h-12 text-morandi-400 animate-spin mx-auto mb-4" />
|
||
<p className="text-gray-600 font-medium">AI 正在解读您的报告...</p>
|
||
<p className="text-gray-400 text-sm mt-2">这可能需要几秒钟</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error || !analysisData) {
|
||
return (
|
||
<div className="min-h-dvh bg-morandi-50 flex items-center justify-center">
|
||
<div className="text-center px-8">
|
||
<AlertCircle className="w-12 h-12 text-red-400 mx-auto mb-4" />
|
||
<p className="text-gray-800 font-medium mb-2">解读失败</p>
|
||
<p className="text-gray-500 text-sm mb-4">{error || "未知错误"}</p>
|
||
<Button onClick={() => navigate("/home")} variant="outline">返回首页</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const getStatusColor = (status: string) => {
|
||
switch (status) {
|
||
case "normal":
|
||
return {
|
||
bg: "bg-morandi-sage-100",
|
||
border: "border-morandi-sage-200",
|
||
text: "text-morandi-sage-600",
|
||
badge: "bg-morandi-sage-100 text-morandi-sage-600",
|
||
icon: "text-morandi-sage-400",
|
||
};
|
||
case "attention":
|
||
return {
|
||
bg: "bg-morandi-rose-100",
|
||
border: "border-morandi-200",
|
||
text: "text-morandi-600",
|
||
badge: "bg-morandi-rose-100 text-morandi-600",
|
||
icon: "text-morandi-rose-400",
|
||
};
|
||
case "high":
|
||
return {
|
||
bg: "bg-red-50",
|
||
border: "border-red-200",
|
||
text: "text-red-700",
|
||
badge: "bg-red-100 text-red-700",
|
||
icon: "text-red-500",
|
||
};
|
||
default:
|
||
return {
|
||
bg: "bg-gray-50",
|
||
border: "border-gray-200",
|
||
text: "text-gray-700",
|
||
badge: "bg-gray-100 text-gray-700",
|
||
icon: "text-gray-500",
|
||
};
|
||
}
|
||
};
|
||
|
||
const statusColors = getStatusColor(analysisData.overall_status);
|
||
|
||
// 指标状态颜色（紫色系色温区分：冷调sage→中性purple→暖调rose）
|
||
const getIndicatorColor = (indicatorStatus: string) => {
|
||
switch (indicatorStatus) {
|
||
case "normal":
|
||
return {
|
||
bg: "bg-morandi-sage-100",
|
||
border: "border-morandi-sage-200",
|
||
text: "text-morandi-sage-600",
|
||
badge: "bg-morandi-sage-100 text-morandi-sage-600",
|
||
barBg: "bg-morandi-sage-200",
|
||
barFill: "bg-morandi-sage-400",
|
||
};
|
||
case "borderline":
|
||
return {
|
||
bg: "bg-morandi-100",
|
||
border: "border-morandi-200",
|
||
text: "text-morandi-600",
|
||
badge: "bg-morandi-200 text-morandi-700",
|
||
barBg: "bg-morandi-200",
|
||
barFill: "bg-morandi-400",
|
||
};
|
||
case "abnormal":
|
||
return {
|
||
bg: "bg-morandi-rose-100",
|
||
border: "border-morandi-rose-300",
|
||
text: "text-morandi-700",
|
||
badge: "bg-morandi-rose-100 text-morandi-rose-400",
|
||
barBg: "bg-morandi-rose-100",
|
||
barFill: "bg-morandi-rose-400",
|
||
};
|
||
default:
|
||
return {
|
||
bg: "bg-gray-50",
|
||
border: "border-gray-200",
|
||
text: "text-gray-700",
|
||
badge: "bg-gray-100 text-gray-700",
|
||
barBg: "bg-gray-100",
|
||
barFill: "bg-gray-400",
|
||
};
|
||
}
|
||
};
|
||
|
||
const getRiskLabel = (riskLevel: string) => {
|
||
switch (riskLevel) {
|
||
case "low":
|
||
return { label: "低风险", color: "bg-morandi-100 text-morandi-600" };
|
||
case "medium":
|
||
return { label: "中风险", color: "bg-morandi-rose-100 text-morandi-rose-400" };
|
||
case "high":
|
||
return { label: "高风险", color: "bg-morandi-rose-100 text-morandi-700" };
|
||
default:
|
||
return { label: "", color: "" };
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-dvh bg-morandi-50">
|
||
{/* 顶部导航 */}
|
||
<div className="bg-white border-b border-gray-100 sticky top-0 z-20">
|
||
<div className="mx-auto px-4 py-4 flex items-center justify-between">
|
||
<button
|
||
onClick={() => navigate(-1)}
|
||
className="flex items-center text-gray-600 hover:text-gray-900"
|
||
>
|
||
<ChevronLeft className="w-5 h-5 mr-1" />
|
||
返回
|
||
</button>
|
||
<h1 className="font-semibold text-gray-800">AI 智能解读</h1>
|
||
<button
|
||
onClick={() => setShowShareSheet(true)}
|
||
className="p-2 hover:bg-gray-100 rounded-lg"
|
||
>
|
||
<Share2 className="w-5 h-5 text-gray-600" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mx-auto p-4 space-y-6 pb-20">
|
||
{/* AI 解读标识 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="flex items-center justify-center gap-2 text-morandi-500"
|
||
>
|
||
<Sparkles className="w-5 h-5" />
|
||
<span className="text-sm font-medium">AI 深度解读 · 个性化定制</span>
|
||
</motion.div>
|
||
|
||
{/* 整体评估卡片 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.1 }}
|
||
>
|
||
<Card
|
||
className={`${statusColors.bg} border-2 ${statusColors.border} rounded-3xl p-6 shadow-sm`}
|
||
>
|
||
<div className="flex items-start gap-4 mb-4">
|
||
<div
|
||
className={`w-16 h-16 ${statusColors.badge} rounded-2xl flex items-center justify-center flex-shrink-0`}
|
||
>
|
||
<Baby className={`w-8 h-8 ${statusColors.icon}`} />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<h2 className="text-xl font-semibold text-gray-800">
|
||
整体评估
|
||
</h2>
|
||
<Badge className={statusColors.badge}>
|
||
{analysisData.overall_status === "normal"
|
||
? "一切正常"
|
||
: analysisData.overall_status === "attention"
|
||
? "需要关注"
|
||
: "需要重视"}
|
||
</Badge>
|
||
</div>
|
||
<p className={`text-sm ${statusColors.text} mb-3 leading-relaxed`}>
|
||
{analysisData.emotional_summary || analysisData.overall_summary}
|
||
</p>
|
||
<div className="flex flex-wrap gap-3 text-xs text-gray-600">
|
||
<div className="flex items-center gap-1">
|
||
<Calendar className="w-3 h-3" />
|
||
<span>{new Date(analysisData.created_at).toLocaleDateString("zh-CN")}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 风险等级指示器 */}
|
||
<div className="bg-white/50 backdrop-blur-sm rounded-2xl p-4">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className="text-sm font-medium text-gray-700">
|
||
综合风险评级
|
||
</span>
|
||
<span
|
||
className={`text-sm font-semibold ${
|
||
analysisData.risk_level === "low"
|
||
? "text-morandi-sage-500"
|
||
: analysisData.risk_level === "medium"
|
||
? "text-morandi-600"
|
||
: "text-red-600"
|
||
}`}
|
||
>
|
||
{analysisData.risk_level === "low"
|
||
? "低风险"
|
||
: analysisData.risk_level === "medium"
|
||
? "中风险"
|
||
: "高风险"}
|
||
</span>
|
||
</div>
|
||
<div className="h-2 bg-gray-200 rounded-full overflow-hidden">
|
||
<motion.div
|
||
initial={{ width: 0 }}
|
||
animate={{
|
||
width:
|
||
analysisData.risk_level === "low"
|
||
? "25%"
|
||
: analysisData.risk_level === "medium"
|
||
? "60%"
|
||
: "90%",
|
||
}}
|
||
transition={{ delay: 0.5, duration: 0.8 }}
|
||
className={`h-full rounded-full ${
|
||
analysisData.risk_level === "low"
|
||
? "bg-morandi-sage-400"
|
||
: analysisData.risk_level === "medium"
|
||
? "bg-morandi-rose-400"
|
||
: "bg-red-500"
|
||
}`}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</motion.div>
|
||
|
||
{/* 分类详情 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.2 }}
|
||
>
|
||
<h2 className="text-lg font-semibold text-gray-800 mb-4">详细解读</h2>
|
||
|
||
<div className="space-y-4">
|
||
{analysisData.categories.map((category, index) => {
|
||
const colors = getStatusColor(category.status);
|
||
return (
|
||
<motion.div
|
||
key={category.category}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.3 + index * 0.1 }}
|
||
>
|
||
<Card className="bg-white rounded-3xl shadow-sm overflow-hidden border-0">
|
||
{/* 分类头部 */}
|
||
<div className={`${colors.bg} border-b-2 ${colors.border} p-5`}>
|
||
<div className="flex items-center gap-3 mb-2">
|
||
<div
|
||
className={`w-10 h-10 ${colors.badge} rounded-xl flex items-center justify-center`}
|
||
>
|
||
<Activity className={`w-5 h-5 ${colors.icon}`} />
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="font-semibold text-gray-800">
|
||
{category.category}
|
||
</h3>
|
||
</div>
|
||
<Badge className={colors.badge}>
|
||
{category.status === "normal"
|
||
? "正常"
|
||
: category.status === "attention"
|
||
? "需关注"
|
||
: "异常"}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 指标详情 */}
|
||
<div className="p-5 space-y-4">
|
||
{category.indicators.map((item, itemIdx) => {
|
||
const indicatorStatus = item.status === "normal" ? "normal" : item.status === "low" || item.status === "high" ? "abnormal" : "borderline";
|
||
const indColors = getIndicatorColor(indicatorStatus);
|
||
return (
|
||
<div
|
||
key={itemIdx}
|
||
className={`${indColors.bg} border-2 ${indColors.border} rounded-2xl p-4`}
|
||
>
|
||
{/* 指标名称和数值 */}
|
||
<div className="flex items-start justify-between mb-3">
|
||
<div className="flex-1">
|
||
<h4 className="font-semibold text-gray-800 mb-1">
|
||
{item.name}
|
||
</h4>
|
||
{item.nickname && (
|
||
<p className="text-xs text-gray-500 mb-2">
|
||
{item.nickname}
|
||
</p>
|
||
)}
|
||
<div className="flex items-baseline gap-2">
|
||
<span
|
||
className={`text-2xl font-semibold ${indColors.text}`}
|
||
>
|
||
{item.value}
|
||
</span>
|
||
<span className="text-sm text-gray-500">
|
||
{item.unit}
|
||
</span>
|
||
</div>
|
||
{item.reference_range && (
|
||
<p className="text-xs text-gray-400 mt-1">
|
||
参考范围：{item.reference_range}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<div className="flex flex-col items-end gap-1.5">
|
||
<div
|
||
className={`px-3 py-1 ${indColors.badge} rounded-full flex items-center gap-1`}
|
||
>
|
||
{indicatorStatus === "normal" ? (
|
||
<CheckCircle2 className="w-4 h-4" />
|
||
) : (
|
||
<AlertCircle className="w-4 h-4" />
|
||
)}
|
||
<span className="text-xs font-medium">
|
||
{item.status === "normal" ? "正常" : item.status === "high" ? "偏高" : "偏低"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 状态指示条 */}
|
||
<div className="mb-3">
|
||
<div className={`h-1.5 ${indColors.barBg} rounded-full overflow-hidden`}>
|
||
<div
|
||
className={`h-full ${indColors.barFill} rounded-full transition-all`}
|
||
style={{
|
||
width: indicatorStatus === "normal" ? "100%" : indicatorStatus === "borderline" ? "60%" : "30%",
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 白话解释 */}
|
||
<div className="space-y-3">
|
||
{item.what_is_it && (
|
||
<div className="bg-white/70 rounded-xl p-3">
|
||
<div className="flex items-start gap-2">
|
||
<Info className="w-4 h-4 text-morandi-400 flex-shrink-0 mt-0.5" />
|
||
<div className="flex-1">
|
||
<p className="text-xs font-medium text-gray-700 mb-1">这是什么？</p>
|
||
<p className="text-xs text-gray-600 leading-relaxed">{item.what_is_it}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{item.baby_impact && (
|
||
<div className="bg-white/70 rounded-xl p-3">
|
||
<div className="flex items-start gap-2">
|
||
<Baby className="w-4 h-4 text-morandi-400 flex-shrink-0 mt-0.5" />
|
||
<div className="flex-1">
|
||
<p className="text-xs font-medium text-gray-700 mb-1">对宝宝的影响</p>
|
||
<p className="text-xs text-gray-600 leading-relaxed">{item.baby_impact}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{item.suggestion && (
|
||
<div className="bg-morandi-100/50 rounded-xl p-3">
|
||
<div className="flex items-start gap-2">
|
||
<Heart className="w-4 h-4 text-morandi-400 flex-shrink-0 mt-0.5" />
|
||
<div className="flex-1">
|
||
<p className="text-xs font-medium text-gray-700 mb-1">建议措施</p>
|
||
<p className="text-xs text-gray-600 leading-relaxed">{item.suggestion}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{item.follow_up && (
|
||
<div className="flex items-center gap-2 text-xs text-morandi-500">
|
||
<Calendar className="w-3 h-3" />
|
||
<span>{item.follow_up}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* 行动建议 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.5 }}
|
||
>
|
||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||
接下来该做什么？
|
||
</h2>
|
||
|
||
<div className="space-y-3">
|
||
{analysisData.action_items.map((rec, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: 0.6 + index * 0.1 }}
|
||
>
|
||
<Card
|
||
className={`rounded-2xl p-4 border-2 ${
|
||
rec.priority === "high"
|
||
? "bg-morandi-rose-100 border-morandi-200"
|
||
: rec.priority === "medium"
|
||
? "bg-morandi-50 border-morandi-200"
|
||
: "bg-gray-50 border-gray-200"
|
||
}`}
|
||
>
|
||
<div className="flex items-start gap-3">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<h4 className="font-semibold text-gray-800">
|
||
{rec.title}
|
||
</h4>
|
||
{rec.priority === "high" && (
|
||
<Badge className="bg-morandi-rose-100 text-morandi-600 text-xs">
|
||
重要
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
<p className="text-sm text-gray-600 mb-2">
|
||
{rec.description}
|
||
</p>
|
||
{rec.timeframe && (
|
||
<div className="flex items-center gap-2 text-xs text-gray-500">
|
||
<Calendar className="w-3 h-3" />
|
||
<span>{rec.timeframe}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* 深度服务 - 新增 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.7 }}
|
||
>
|
||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||
🎯 获取更多帮助
|
||
</h2>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<Card
|
||
onClick={() => navigate(`/chat/${reportId}`)}
|
||
className="bg-morandi-100 rounded-2xl p-4 border-0 cursor-pointer hover:scale-105 transition-transform"
|
||
>
|
||
<div className="w-12 h-12 bg-morandi-400 rounded-xl flex items-center justify-center mb-3">
|
||
<MessageCircle className="w-6 h-6 text-white" />
|
||
</div>
|
||
<h3 className="font-semibold text-gray-800 mb-1">AI对话追问</h3>
|
||
<p className="text-xs text-gray-600">针对报告提问</p>
|
||
</Card>
|
||
|
||
<Card
|
||
onClick={() => navigate(`/doctor-questions/${reportId}`)}
|
||
className="bg-gradient-to-br from-morandi-slate-100 to-morandi-slate-50 rounded-2xl p-4 border-0 cursor-pointer hover:scale-105 transition-transform"
|
||
>
|
||
<div className="w-12 h-12 bg-morandi-slate-500 rounded-xl flex items-center justify-center mb-3">
|
||
<FileText className="w-6 h-6 text-white" />
|
||
</div>
|
||
<h3 className="font-semibold text-gray-800 mb-1">问诊清单</h3>
|
||
<p className="text-xs text-gray-600">就医沟通话术</p>
|
||
</Card>
|
||
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* 温馨提示 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.9 }}
|
||
>
|
||
<Card className="bg-morandi-50 border-morandi-200 rounded-2xl p-4">
|
||
<div className="flex items-start gap-3">
|
||
<Heart className="w-5 h-5 text-morandi-400 flex-shrink-0 mt-0.5" />
|
||
<div className="flex-1">
|
||
<h4 className="font-semibold text-gray-800 mb-1">
|
||
温馨提示
|
||
</h4>
|
||
<p className="text-sm text-gray-600 leading-relaxed">
|
||
以上解读仅供参考，不能替代医生的专业诊断。如有任何疑问或不适，请及时就医咨询专业医生。保持好心情，宝宝能感受到妈妈的情绪哦 💕
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* 底部操作栏 */}
|
||
<div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 pb-safe z-10">
|
||
<div className="max-w-md mx-auto flex gap-3">
|
||
<Button
|
||
onClick={() => navigate("/home")}
|
||
variant="outline"
|
||
className="flex-1 h-12 rounded-xl border-2 border-gray-300"
|
||
>
|
||
返回首页
|
||
</Button>
|
||
<Button
|
||
onClick={() => navigate(`/report/${reportId}`)}
|
||
className="flex-1 h-12 rounded-xl bg-gradient-to-r from-morandi-400 to-morandi-500 hover:from-morandi-500 hover:to-morandi-500 text-white"
|
||
>
|
||
查看原始报告
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 分享弹窗 */}
|
||
<AnimatePresence>
|
||
{showShareSheet && (
|
||
<>
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
onClick={() => setShowShareSheet(false)}
|
||
className="fixed inset-0 bg-black/40 z-40"
|
||
/>
|
||
<motion.div
|
||
initial={{ y: "100%" }}
|
||
animate={{ y: 0 }}
|
||
exit={{ y: "100%" }}
|
||
transition={{ type: "spring", damping: 25, stiffness: 300 }}
|
||
className="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl z-50 max-h-[70vh] overflow-y-auto"
|
||
>
|
||
<div className="mx-auto p-5">
|
||
{/* 拖拽指示器 */}
|
||
<div className="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-4" />
|
||
|
||
<div className="flex items-center justify-between mb-5">
|
||
<h3 className="font-semibold text-gray-800 text-lg">分享报告</h3>
|
||
<button
|
||
onClick={() => setShowShareSheet(false)}
|
||
className="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center"
|
||
>
|
||
<X className="w-5 h-5 text-gray-400" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* 分享方式 */}
|
||
<div className="space-y-3 mb-6">
|
||
{/* 生成分享长图 */}
|
||
<button
|
||
onClick={() => {
|
||
setShowShareSheet(false);
|
||
navigate(`/share/${reportId}`);
|
||
}}
|
||
className="w-full flex items-center gap-4 py-4 px-4 bg-gradient-to-r from-morandi-100 to-morandi-50 hover:from-morandi-200 hover:to-morandi-100 rounded-2xl transition-colors"
|
||
>
|
||
<div className="w-12 h-12 bg-gradient-to-br from-morandi-400 to-morandi-500 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
<ImageIcon className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div className="text-left flex-1">
|
||
<div className="font-semibold text-gray-800">
|
||
生成分享长图
|
||
</div>
|
||
<div className="text-xs text-gray-500">
|
||
生成精美报告长图，一键保存到相册
|
||
</div>
|
||
</div>
|
||
<ChevronLeft className="w-5 h-5 text-gray-300 rotate-180" />
|
||
</button>
|
||
|
||
{/* 复制链接 */}
|
||
<button
|
||
onClick={handleCopyLink}
|
||
className="w-full flex items-center gap-4 py-4 px-4 bg-morandi-50 hover:bg-morandi-100 rounded-2xl transition-colors"
|
||
>
|
||
<div className="w-12 h-12 bg-morandi-400 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
{linkCopied ? (
|
||
<Check className="w-6 h-6 text-white" />
|
||
) : (
|
||
<Link2 className="w-6 h-6 text-white" />
|
||
)}
|
||
</div>
|
||
<div className="text-left flex-1">
|
||
<div className="font-semibold text-gray-800">
|
||
{linkCopied ? "链接已复制" : "复制分享链接"}
|
||
</div>
|
||
<div className="text-xs text-gray-500">
|
||
{linkCopied ? "可以分享给家人或医生" : "复制链接发送给家人或医生"}
|
||
</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
|
||
{/* 分享预览卡片 */}
|
||
<Card className="bg-morandi-50 border-morandi-100 rounded-2xl p-4 mb-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-12 h-12 bg-gradient-to-br from-morandi-400 to-morandi-500 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
<FileText className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<h4 className="font-medium text-gray-800 text-sm truncate">
|
||
{analysisData.categories[0]?.category || "检查报告"} · AI解读
|
||
</h4>
|
||
<p className="text-xs text-gray-500 mt-0.5 truncate">
|
||
{analysisData.overall_summary}
|
||
</p>
|
||
<div className="flex items-center gap-2 mt-1">
|
||
<span className="text-xs text-gray-400">{new Date(analysisData.created_at).toLocaleDateString("zh-CN")}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
|
||
{/* 隐私提示 */}
|
||
<div className="flex items-center gap-2 text-xs text-gray-400 mb-2">
|
||
<Info className="w-3.5 h-3.5 flex-shrink-0" />
|
||
<span>分享时将自动隐藏个人敏感信息，保护您的隐私</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
);
|
||
} |