plan pages

Cunkebao/app/components/ui-templates/cards.tsx

@@ -0,0 +1,138 @@
+"use client"
+import { Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Clock, TrendingUp, Users } from "lucide-react"
+
+interface StatsCardProps {
+  title: string
+  value: string | number
+  description?: string
+  trend?: number
+  trendLabel?: string
+  className?: string
+  valueClassName?: string
+}
+
+/**
+ * 统计数据卡片
+ * 用于展示关键指标数据
+ */
+export function StatsCard({
+  title,
+  value,
+  description,
+  trend,
+  trendLabel,
+  className = "",
+  valueClassName = "text-xl font-bold text-blue-600",
+}: StatsCardProps) {
+  return (
+    <Card className={`p-3 ${className}`}>
+      <div className="text-sm text-gray-500">{title}</div>
+      <div className={valueClassName}>{value}</div>
+      {description && <div className="text-xs text-gray-500 mt-1">{description}</div>}
+      {trend !== undefined && (
+        <div className={`flex items-center text-xs mt-1 ${trend >= 0 ? "text-green-600" : "text-red-600"}`}>
+          {trend >= 0 ? "↑" : "↓"} {Math.abs(trend)}% {trendLabel || ""}
+        </div>
+      )}
+    </Card>
+  )
+}
+
+interface DistributionPlanCardProps {
+  id: string
+  name: string
+  status: "active" | "paused" | "completed"
+  source: string
+  sourceIcon: string
+  targetGroups: string[]
+  totalUsers: number
+  dailyAverage: number
+  lastUpdated: string
+  createTime: string
+  creator: string
+  onView?: (id: string) => void
+  onEdit?: (id: string) => void
+  onDelete?: (id: string) => void
+  onToggleStatus?: (id: string, status: "active" | "paused") => void
+}
+
+/**
+ * 流量分发计划卡片
+ * 用于展示流量分发计划信息
+ */
+export function DistributionPlanCard({
+  id,
+  name,
+  status,
+  source,
+  sourceIcon,
+  targetGroups,
+  totalUsers,
+  dailyAverage,
+  lastUpdated,
+  createTime,
+  creator,
+  onView,
+  onEdit,
+  onDelete,
+  onToggleStatus,
+}: DistributionPlanCardProps) {
+  return (
+    <Card className="p-4">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center space-x-2">
+          <span className="text-xl mr-1">{sourceIcon}</span>
+          <h3 className="font-medium">{name}</h3>
+          <Badge variant={status === "active" ? "success" : status === "completed" ? "outline" : "secondary"}>
+            {status === "active" ? "进行中" : status === "completed" ? "已完成" : "已暂停"}
+          </Badge>
+        </div>
+        <div className="flex items-center space-x-2">
+          {onToggleStatus && status !== "completed" && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onToggleStatus(id, status === "active" ? "paused" : "active")}
+            >
+              {status === "active" ? "暂停" : "启动"}
+            </Button>
+          )}
+          {onView && (
+            <Button variant="ghost" size="sm" onClick={() => onView(id)}>
+              <Users className="h-4 w-4 mr-1" />
+              查看
+            </Button>
+          )}
+          {onEdit && (
+            <Button variant="ghost" size="sm" onClick={() => onEdit(id)}>
+              <TrendingUp className="h-4 w-4 mr-1" />
+              编辑
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        <div className="text-sm text-gray-500">
+          <div>目标人群：{targetGroups.join(", ")}</div>
+          <div>总流量：{totalUsers} 人</div>
+        </div>
+        <div className="text-sm text-gray-500">
+          <div>日均获取：{dailyAverage} 人</div>
+          <div>创建人：{creator}</div>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
+        <div className="flex items-center">
+          <Clock className="w-4 h-4 mr-1" />
+          上次更新：{lastUpdated}
+        </div>
+        <div>创建时间：{createTime}</div>
+      </div>
+    </Card>
+  )
+}