89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
import Link from "next/link";
|
|
import { ActionSuggestion } from "@/types/dashboard-health";
|
|
|
|
interface ActionSuggestionsProps {
|
|
suggestions: ActionSuggestion[];
|
|
className?: string;
|
|
}
|
|
|
|
export function ActionSuggestions({ suggestions, className }: ActionSuggestionsProps) {
|
|
return (
|
|
<Card className={className}>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
|
<span>🎯</span>
|
|
<span>为您推荐的下一步行动</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{suggestions.length === 0 ? (
|
|
<div className="flex h-[100px] flex-col items-center justify-center text-muted-foreground">
|
|
<p>暂无行动建议</p>
|
|
</div>
|
|
) : (
|
|
suggestions.map((suggestion) => (
|
|
<ActionItem key={suggestion.id} suggestion={suggestion} />
|
|
))
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
interface ActionItemProps {
|
|
suggestion: ActionSuggestion;
|
|
}
|
|
|
|
function ActionItem({ suggestion }: ActionItemProps) {
|
|
const priorityConfig = {
|
|
primary: {
|
|
bg: "bg-amber-50 border-amber-200",
|
|
icon: suggestion.icon,
|
|
badge: "bg-amber-100 text-amber-700",
|
|
badgeText: "主要",
|
|
},
|
|
secondary: {
|
|
bg: "bg-blue-50 border-blue-200",
|
|
icon: suggestion.icon,
|
|
badge: "bg-blue-100 text-blue-700",
|
|
badgeText: "次要",
|
|
},
|
|
optional: {
|
|
bg: "bg-gray-50 border-gray-200",
|
|
icon: suggestion.icon,
|
|
badge: "bg-gray-100 text-gray-600",
|
|
badgeText: "可选",
|
|
},
|
|
}[suggestion.type];
|
|
|
|
return (
|
|
<div className={cn("rounded-lg border p-4 transition-colors hover:bg-gray-50/50", priorityConfig.bg)}>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex items-start gap-3">
|
|
<span className="text-2xl">{priorityConfig.icon}</span>
|
|
<div className="flex flex-col gap-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className={cn("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium", priorityConfig.badge)}>
|
|
{priorityConfig.badgeText}
|
|
</span>
|
|
</div>
|
|
<h4 className="font-medium">{suggestion.title}</h4>
|
|
<p className="text-sm text-muted-foreground">{suggestion.description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Link href={suggestion.href}>
|
|
<Button variant="outline" size="sm" className="shrink-0">
|
|
查看
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|