【操盘手】 流量分发页面整体优化

Cunkebao/app/workspace/traffic-distribution/page.tsx

@@ -5,24 +5,23 @@ import { useRouter } from "next/navigation"
 import {
   ChevronLeft,
   Plus,
-  Filter,
-  Search,
-  RefreshCw,
-  MoreVertical,
-  Clock,
+  MoreHorizontal,
+  Play,
+  Pause,
+  Edit,
+  Trash2,
+  Eye,
   TrendingUp,
   Users,
-  Trash2,
+  Database,
+  Clock,
 } from "lucide-react"
 import { Card } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-import { Switch } from "@/components/ui/switch"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import Link from "next/link"
+import BottomNav from "@/app/components/BottomNav"
 
 interface DistributionPlan {
   id: string
@@ -33,6 +32,8 @@ interface DistributionPlan {
   targetGroups: string[]
   totalUsers: number
   dailyAverage: number
+  deviceCount: number
+  poolCount: number
   lastUpdated: string
   createTime: string
   creator: string
@@ -40,9 +41,6 @@ interface DistributionPlan {
 
 export default function TrafficDistributionPage() {
   const router = useRouter()
-  const [showFilterDialog, setShowFilterDialog] = useState(false)
-  const [searchQuery, setSearchQuery] = useState("")
-  const [sourceFilter, setSourceFilter] = useState("all")
   const [plans, setPlans] = useState<DistributionPlan[]>([
     {
       id: "1",
@@ -53,6 +51,8 @@ export default function TrafficDistributionPage() {
       targetGroups: ["新客户", "潜在客户"],
       totalUsers: 1250,
       dailyAverage: 85,
+      deviceCount: 3,
+      poolCount: 2,
       lastUpdated: "2024-03-18 10:30:00",
       createTime: "2024-03-10 08:30:00",
       creator: "admin",
@@ -66,6 +66,8 @@ export default function TrafficDistributionPage() {
       targetGroups: ["女性用户", "美妆爱好者"],
       totalUsers: 980,
       dailyAverage: 65,
+      deviceCount: 2,
+      poolCount: 1,
       lastUpdated: "2024-03-17 14:20:00",
       createTime: "2024-03-12 09:15:00",
       creator: "marketing",
@@ -79,16 +81,16 @@ export default function TrafficDistributionPage() {
       targetGroups: ["老客户", "会员"],
       totalUsers: 2340,
       dailyAverage: 0,
+      deviceCount: 5,
+      poolCount: 3,
       lastUpdated: "2024-03-15 09:45:00",
       createTime: "2024-02-28 11:20:00",
       creator: "social",
     },
   ])
 
-  // 根据筛选条件过滤计划
-  const filteredPlans = plans
-    .filter((plan) => searchQuery === "" || plan.name.toLowerCase().includes(searchQuery.toLowerCase()))
-    .filter((plan) => sourceFilter === "all" || plan.source === sourceFilter)
+  // 直接使用plans而不是filteredPlans
+  const plansList = plans
 
   const handleDelete = (planId: string) => {
     setPlans(plans.filter((plan) => plan.id !== planId))
@@ -111,7 +113,7 @@ export default function TrafficDistributionPage() {
   }
 
   return (
-    <div className="flex-1 bg-gray-50 min-h-screen">
+    <div className="flex-1 bg-gray-50 min-h-screen pb-16">
       <header className="sticky top-0 z-10 bg-white border-b">
         <div className="flex items-center justify-between p-4">
           <div className="flex items-center space-x-3">
@@ -130,136 +132,120 @@ export default function TrafficDistributionPage() {
       </header>
 
       <div className="p-4">
-        <Card className="p-4 mb-4">
-          <div className="flex items-center space-x-2">
-            <div className="relative flex-1">
-              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
-              <Input
-                placeholder="搜索分发计划"
-                className="pl-9"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-              />
-            </div>
-            <Button variant="outline" size="icon" onClick={() => setShowFilterDialog(true)}>
-              <Filter className="h-4 w-4" />
-            </Button>
-            <Button variant="outline" size="icon">
-              <RefreshCw className="h-4 w-4" />
+        {plansList.length === 0 ? (
+          <div className="text-center py-12 bg-white rounded-lg border mt-4">
+            <div className="text-gray-500">暂无数据</div>
+            <Button
+              variant="outline"
+              className="mt-4"
+              onClick={() => router.push("/workspace/traffic-distribution/new")}
+            >
+              创建分发计划
             </Button>
           </div>
-        </Card>
-
-        <div className="space-y-4">
-          {filteredPlans.length === 0 ? (
-            <div className="text-center py-12 bg-white rounded-lg border">
-              <div className="text-gray-500">暂无数据</div>
-              <Button
-                variant="outline"
-                className="mt-4"
-                onClick={() => router.push("/workspace/traffic-distribution/new")}
-              >
-                创建分发计划
-              </Button>
-            </div>
-          ) : (
-            filteredPlans.map((plan) => (
-              <Card key={plan.id} 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">{plan.sourceIcon}</span>
-                    <h3 className="font-medium">{plan.name}</h3>
-                    <Badge variant={plan.status === "active" ? "success" : "secondary"}>
-                      {plan.status === "active" ? "进行中" : "已暂停"}
-                    </Badge>
+        ) : (
+          <div className="space-y-4 mt-2">
+            {plansList.map((plan) => (
+              <Card key={plan.id} className="overflow-hidden">
+                {/* 卡片头部 */}
+                <div className="p-4 bg-white border-b flex items-center justify-between">
+                  <div className="flex items-center space-x-3">
+                    <div className="text-2xl">{plan.sourceIcon}</div>
+                    <div>
+                      <h3 className="font-medium text-lg">{plan.name}</h3>
+                      <div className="flex items-center space-x-2 mt-1">
+                        <Badge variant={plan.status === "active" ? "success" : "secondary"}>
+                          {plan.status === "active" ? "进行中" : "已暂停"}
+                        </Badge>
+                        {plan.targetGroups.map((group, index) => (
+                          <Badge key={index} variant="outline">
+                            {group}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
                   </div>
-                  <div className="flex items-center space-x-2">
-                    <Switch checked={plan.status === "active"} onCheckedChange={() => togglePlanStatus(plan.id)} />
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="sm">
-                          <MoreVertical className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent>
-                        <DropdownMenuItem onClick={() => handleView(plan.id)}>
-                          <Users className="h-4 w-4 mr-2" />
-                          查看
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => handleEdit(plan.id)}>
-                          <TrendingUp className="h-4 w-4 mr-2" />
-                          编辑
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => handleDelete(plan.id)}>
-                          <Trash2 className="h-4 w-4 mr-2" />
-                          删除
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
+
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={() => handleView(plan.id)}>
+                        <Eye className="mr-2 h-4 w-4" />
+                        查看详情
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => handleEdit(plan.id)}>
+                        <Edit className="mr-2 h-4 w-4" />
+                        编辑计划
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => togglePlanStatus(plan.id)}>
+                        {plan.status === "active" ? (
+                          <>
+                            <Pause className="mr-2 h-4 w-4" />
+                            暂停计划
+                          </>
+                        ) : (
+                          <>
+                            <Play className="mr-2 h-4 w-4" />
+                            启动计划
+                          </>
+                        )}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => handleDelete(plan.id)} className="text-red-600">
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        删除计划
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+
+                {/* 卡片内容 - 上3下2布局，图标在文字左侧 */}
+                <div className="bg-white">
+                  <div className="grid grid-cols-3">
+                    <div className="p-3 text-center border-r border-gray-200">
+                      <div className="text-lg font-semibold">{plan.dailyAverage}</div>
+                      <div className="text-xs text-gray-500 mt-1">日均分发人数</div>
+                    </div>
+                    <div className="p-3 text-center border-r border-gray-200">
+                      <div className="text-lg font-semibold">{plan.deviceCount}</div>
+                      <div className="text-xs text-gray-500 mt-1">分发设备</div>
+                    </div>
+                    <div className="p-3 text-center">
+                      <div className="text-lg font-semibold">{plan.poolCount}</div>
+                      <div className="text-xs text-gray-500 mt-1">流量池</div>
+                    </div>
+                  </div>
+                  {/* 横向分隔线 */}
+                  <div className="border-t border-gray-200 mx-auto w-full" style={{height: 0}} />
+                  <div className="grid grid-cols-2">
+                    <div className="p-3 text-center border-r border-gray-200">
+                      <div className="text-lg font-semibold">{plan.dailyAverage}</div>
+                      <div className="text-xs text-gray-500 mt-1">日均分发量</div>
+                    </div>
+                    <div className="p-3 text-center">
+                      <div className="text-lg font-semibold">{plan.totalUsers}</div>
+                      <div className="text-xs text-gray-500 mt-1">总流量池数量</div>
+                    </div>
                   </div>
                 </div>
 
-                <div className="grid grid-cols-2 gap-4 mb-4">
-                  <div className="text-sm text-gray-500">
-                    <div>目标人群：{plan.targetGroups.join(", ")}</div>
-                    <div>总流量：{plan.totalUsers} 人</div>
-                  </div>
-                  <div className="text-sm text-gray-500">
-                    <div>日均获取：{plan.dailyAverage} 人</div>
-                    <div>创建人：{plan.creator}</div>
-                  </div>
-                </div>
-
-                <div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
+                {/* 底部信息 */}
+                <div className="p-3 bg-gray-50 text-sm text-gray-500 flex items-center justify-between">
                   <div className="flex items-center">
-                    <Clock className="w-4 h-4 mr-1" />
-                    上次更新：{plan.lastUpdated}
+                    <Clock className="h-4 w-4 mr-1" />
+                    <span>上次执行: {plan.lastUpdated.split(" ")[0]}</span>
                   </div>
-                  <div>创建时间：{plan.createTime}</div>
+                  <div>创建人: {plan.creator}</div>
                 </div>
               </Card>
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* 筛选弹窗 */}
-      <Dialog open={showFilterDialog} onOpenChange={setShowFilterDialog}>
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>筛选分发计划</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4 py-2">
-            <div className="space-y-2">
-              <label className="text-sm font-medium">流量来源</label>
-              <Select value={sourceFilter} onValueChange={setSourceFilter}>
-                <SelectTrigger>
-                  <SelectValue placeholder="选择流量来源" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">全部来源</SelectItem>
-                  <SelectItem value="douyin">抖音</SelectItem>
-                  <SelectItem value="xiaohongshu">小红书</SelectItem>
-                  <SelectItem value="wechat">微信</SelectItem>
-                  <SelectItem value="weibo">微博</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex justify-end space-x-2 pt-2">
-              <Button
-                variant="outline"
-                onClick={() => {
-                  setSourceFilter("all")
-                }}
-              >
-                重置
-              </Button>
-              <Button onClick={() => setShowFilterDialog(false)}>应用筛选</Button>
-            </div>
+            ))}
           </div>
-        </DialogContent>
-      </Dialog>
+        )}
+      </div>
+      <BottomNav />
     </div>
   )
 }