f0a6a364f2
Align Sidebar & BottomNav menus, remove "Search", add user profile mock data, implement /api/users, add FilterDrawer, complete Section, ProfileHeader, MetricsRFM components Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { Progress } from "@/components/ui/progress"
|
|
|
|
export default function MetricsRFM({
|
|
recency,
|
|
frequency,
|
|
monetary,
|
|
rfmScore,
|
|
}: {
|
|
recency: number
|
|
frequency: number
|
|
monetary: number
|
|
rfmScore: number
|
|
}) {
|
|
return (
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<Metric title="R" value={recency} hint="近期互动（天）" />
|
|
<Metric title="F" value={frequency} hint="频次（月）" />
|
|
<Metric title="M" value={monetary} hint="金额（¥）" />
|
|
<div className="col-span-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium">RFM 得分</span>
|
|
<span className="text-sm font-semibold">{rfmScore}</span>
|
|
</div>
|
|
<Progress value={Math.min(100, rfmScore)} className="h-2 mt-2" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Metric({ title, value, hint }: { title: string; value: number; hint: string }) {
|
|
return (
|
|
<div className="rounded-lg border bg-white p-3">
|
|
<div className="text-xs text-muted-foreground">{hint}</div>
|
|
<div className="text-xl font-semibold mt-1">{value}</div>
|
|
<div className="text-xs text-muted-foreground mt-0.5">{title}</div>
|
|
</div>
|
|
)
|
|
}
|