存客宝 React

Cunkebao/app/workspace/pricing/page.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { ChevronLeft, Edit, Trash2, Plus } from "lucide-react"
+import { useRouter } from "next/navigation"
+
+// 模拟定价数据
+const mockPricingData = [
+  {
+    id: "1",
+    name: "普通流量包",
+    price: 0.5,
+    tags: ["新用户", "低活跃度"],
+    region: "全国",
+    deviceAddQuantity: 10,
+  },
+  {
+    id: "2",
+    name: "高质量流量",
+    price: 2.5,
+    tags: ["高消费", "高活跃度"],
+    region: "一线城市",
+    deviceAddQuantity: 25,
+  },
+  {
+    id: "3",
+    name: "精准营销流量",
+    price: 3.8,
+    tags: ["潜在客户", "有购买意向"],
+    region: "华东地区",
+    deviceAddQuantity: 50,
+  },
+  {
+    id: "4",
+    name: "节日促销流量",
+    price: 1.5,
+    tags: ["节日消费", "促销敏感"],
+    region: "全国",
+    deviceAddQuantity: 15,
+  },
+]
+
+export default function PricingPage() {
+  const router = useRouter()
+  const [pricingItems, setPricingItems] = useState(mockPricingData)
+
+  const handleDelete = (id: string) => {
+    setPricingItems(pricingItems.filter((item) => item.id !== id))
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen bg-gray-50">
+      {/* 顶部栏 */}
+      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+          <Button variant="ghost" size="icon" onClick={() => router.push("/workspace")} className="mr-2">
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+
+          <h1 className="text-lg font-medium">流量分发</h1>
+
+          <Button className="flex items-center gap-1" onClick={() => router.push("/workspace/pricing/new")}>
+            <Plus className="h-4 w-4" />
+            <span>新建分发</span>
+          </Button>
+        </div>
+      </header>
+
+      {/* 主内容区 */}
+      <main className="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <div className="grid grid-cols-1 gap-4">
+          {pricingItems.length === 0 ? (
+            <div className="text-center py-12">
+              <p className="text-gray-500">暂无分发规则，请点击右上角新建分发</p>
+            </div>
+          ) : (
+            pricingItems.map((item) => (
+              <Card key={item.id} className="p-4 hover:shadow-md transition-shadow">
+                <div className="flex justify-between items-start">
+                  <div className="space-y-2">
+                    <h3 className="font-medium text-lg">{item.name}</h3>
+                    <div className="flex items-baseline gap-1">
+                      <span className="text-2xl font-bold text-emerald-600">¥{item.price.toFixed(2)}</span>
+                      <span className="text-gray-500 text-sm">/ 流量包</span>
+                    </div>
+                    <div className="text-sm text-gray-500 mt-1">总添加人数: {item.deviceAddQuantity} 人</div>
+                    <div className="flex flex-wrap gap-2 items-center mt-2">
+                      {item.tags.map((tag, index) => (
+                        <Badge key={index} variant="outline" className="bg-blue-50">
+                          {tag}
+                        </Badge>
+                      ))}
+                      <Badge variant="outline" className="bg-amber-50">
+                        {item.region}
+                      </Badge>
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => router.push(`/workspace/pricing/edit/${item.id}`)}
+                    >
+                      <Edit className="h-4 w-4 text-gray-500" />
+                    </Button>
+                    <Button variant="ghost" size="icon" onClick={() => handleDelete(item.id)}>
+                      <Trash2 className="h-4 w-4 text-gray-500" />
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+            ))
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}
+