130 lines
3.0 KiB
TypeScript
130 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import type { ColumnDef } from "@tanstack/react-table"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Switch } from "@/components/ui/switch"
|
|
import { Eye, Edit, Trash } from "lucide-react"
|
|
|
|
export type Plan = {
|
|
id: string
|
|
name: string
|
|
groupCount: number
|
|
groupSize: number
|
|
totalFriends: number
|
|
tags: string[]
|
|
deviceId: string
|
|
operator: string
|
|
timeRange: string
|
|
contacts: string[]
|
|
status: "running" | "paused" | "completed"
|
|
}
|
|
|
|
export const columns: ColumnDef<Plan>[] = [
|
|
{
|
|
accessorKey: "id",
|
|
header: "序号",
|
|
cell: ({ row }) => row.index + 1,
|
|
},
|
|
{
|
|
accessorKey: "name",
|
|
header: "计划名称",
|
|
},
|
|
{
|
|
accessorKey: "groupCount",
|
|
header: "已建群数量",
|
|
},
|
|
{
|
|
accessorKey: "groupSize",
|
|
header: "建群人数标准",
|
|
cell: ({ row }) => `${row.original.groupSize}/群`,
|
|
},
|
|
{
|
|
accessorKey: "totalFriends",
|
|
header: "微信客户数量",
|
|
},
|
|
{
|
|
accessorKey: "tags",
|
|
header: "群标签",
|
|
cell: ({ row }) => (
|
|
<div className="flex gap-1">
|
|
{row.original.tags.map((tag) => (
|
|
<Badge key={tag} variant="secondary">
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "deviceId",
|
|
header: "执行设备ID",
|
|
},
|
|
{
|
|
accessorKey: "operator",
|
|
header: "执行客服号",
|
|
},
|
|
{
|
|
accessorKey: "timeRange",
|
|
header: "执行时间",
|
|
},
|
|
{
|
|
accessorKey: "contacts",
|
|
header: "关联微信",
|
|
cell: ({ row }) => (
|
|
<div className="flex gap-1">
|
|
{row.original.contacts.map((contact) => (
|
|
<Badge key={contact} variant="outline">
|
|
{contact}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "status",
|
|
header: "状态",
|
|
cell: ({ row }) => {
|
|
const status = row.original.status
|
|
const statusMap = {
|
|
running: { label: "执行中", color: "bg-green-500" },
|
|
paused: { label: "已暂停", color: "bg-yellow-500" },
|
|
completed: { label: "已完成", color: "bg-gray-500" },
|
|
}
|
|
return (
|
|
<div className="flex items-center">
|
|
<div className={`w-2 h-2 rounded-full mr-2 ${statusMap[status].color}`} />
|
|
{statusMap[status].label}
|
|
</div>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
id: "actions",
|
|
header: "操作",
|
|
cell: ({ row }) => {
|
|
const plan = row.original
|
|
return (
|
|
<div className="flex items-center space-x-2">
|
|
<Button variant="ghost" size="icon">
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon">
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" className="text-red-500 hover:text-red-600">
|
|
<Trash className="h-4 w-4" />
|
|
</Button>
|
|
<Switch
|
|
checked={plan.status === "running"}
|
|
onCheckedChange={() => {
|
|
// TODO: 更新计划状态
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
},
|
|
},
|
|
]
|
|
|