私域操盘手 - 修复流量池页面点击”全部来源“和全部状态的select框，页面被压缩的问题
This commit is contained in:
柳清爽
@@ -85,7 +85,7 @@ export default function TrafficPoolPage() {
|
||||
})
|
||||
|
||||
// 检查是否有来源参数
|
||||
const sourceParam = searchParams.get("source")
|
||||
const sourceParam = searchParams?.get("source")
|
||||
if (sourceParam) {
|
||||
params.append("wechatSource", sourceParam)
|
||||
}
|
||||
@@ -162,7 +162,7 @@ export default function TrafficPoolPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 bg-white min-h-screen">
|
||||
<div className="flex-1 bg-white min-h-screen flex flex-col">
|
||||
<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">
|
||||
@@ -177,195 +177,197 @@ export default function TrafficPoolPage() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-4 space-y-6">
|
||||
{/* 搜索和筛选区域 */}
|
||||
<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="搜索用户"
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value)
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="p-4 space-y-6">
|
||||
{/* 搜索和筛选区域 */}
|
||||
<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="搜索用户"
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value)
|
||||
setCurrentPage(1)
|
||||
}}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="icon">
|
||||
<Filter className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Card className="p-4">
|
||||
<div className="text-sm text-gray-500">流量池总数</div>
|
||||
<div className="text-2xl font-bold text-blue-600">{stats.total}</div>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<div className="text-sm text-gray-500">今日新增</div>
|
||||
<div className="text-2xl font-bold text-green-600">{stats.todayNew}</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 分类标签页 */}
|
||||
<Tabs
|
||||
defaultValue="potential"
|
||||
value={activeCategory}
|
||||
onValueChange={(value) => {
|
||||
setActiveCategory(value)
|
||||
setCurrentPage(1)
|
||||
}}
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="potential">潜在客户</TabsTrigger>
|
||||
<TabsTrigger value="customer">已转化</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
{/* 筛选器 */}
|
||||
<div className="flex space-x-2">
|
||||
<Select
|
||||
value={sourceFilter}
|
||||
onValueChange={(value) => {
|
||||
setSourceFilter(value)
|
||||
setCurrentPage(1)
|
||||
}}
|
||||
className="pl-9"
|
||||
/>
|
||||
>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue placeholder="来源" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部来源</SelectItem>
|
||||
<SelectItem value="抖音直播">抖音直播</SelectItem>
|
||||
<SelectItem value="小红书">小红书</SelectItem>
|
||||
<SelectItem value="微信朋友圈">朋友圈</SelectItem>
|
||||
<SelectItem value="视频号">视频号</SelectItem>
|
||||
<SelectItem value="公众号">公众号</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={statusFilter}
|
||||
onValueChange={(value) => {
|
||||
setStatusFilter(value)
|
||||
setCurrentPage(1)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue placeholder="状态" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部状态</SelectItem>
|
||||
<SelectItem value="pending">待处理</SelectItem>
|
||||
<SelectItem value="added">已添加</SelectItem>
|
||||
<SelectItem value="failed">已失败</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Button variant="outline" size="icon">
|
||||
<Filter className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Card className="p-4">
|
||||
<div className="text-sm text-gray-500">流量池总数</div>
|
||||
<div className="text-2xl font-bold text-blue-600">{stats.total}</div>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<div className="text-sm text-gray-500">今日新增</div>
|
||||
<div className="text-2xl font-bold text-green-600">{stats.todayNew}</div>
|
||||
</Card>
|
||||
</div>
|
||||
{/* 用户列表 */}
|
||||
<div className="space-y-2">
|
||||
{loading ? (
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<RefreshCw className="h-8 w-8 text-blue-500 animate-spin mb-4" />
|
||||
<div className="text-gray-500">加载中...</div>
|
||||
</div>
|
||||
) : users.length === 0 ? (
|
||||
<div className="text-center py-12 bg-gray-50 rounded-lg">
|
||||
<div className="text-gray-500">暂无数据</div>
|
||||
<Button variant="outline" className="mt-4" onClick={fetchUsers}>
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
users.map((user) => (
|
||||
<Card
|
||||
key={user.id}
|
||||
className="p-3 cursor-pointer hover:shadow-md transition-shadow"
|
||||
onClick={() => handleUserClick(user)}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<img src={user.avatar || "/placeholder.svg"} alt="" className="w-10 h-10 rounded-full bg-gray-100" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="font-medium truncate">{user.nickname}</div>
|
||||
<div
|
||||
className={`text-xs px-2 py-1 rounded-full ${
|
||||
user.status === "added"
|
||||
? "bg-green-100 text-green-800"
|
||||
: user.status === "pending"
|
||||
? "bg-yellow-100 text-yellow-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
}`}
|
||||
>
|
||||
{user.status === "added" ? "已添加" : user.status === "pending" ? "待处理" : "已失败"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">微信号: {user.wechatId}</div>
|
||||
<div className="text-sm text-gray-500">来源: {user.source}</div>
|
||||
<div className="text-sm text-gray-500">添加时间: {new Date(user.addTime).toLocaleString()}</div>
|
||||
|
||||
{/* 分类标签页 - 移除了"全部"选项 */}
|
||||
<Tabs
|
||||
defaultValue="potential"
|
||||
value={activeCategory}
|
||||
onValueChange={(value) => {
|
||||
setActiveCategory(value)
|
||||
setCurrentPage(1)
|
||||
}}
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="potential">潜在客户</TabsTrigger>
|
||||
<TabsTrigger value="customer">已转化</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
{/* 筛选器 */}
|
||||
<div className="flex space-x-2">
|
||||
<Select
|
||||
value={sourceFilter}
|
||||
onValueChange={(value) => {
|
||||
setSourceFilter(value)
|
||||
setCurrentPage(1)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue placeholder="来源" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部来源</SelectItem>
|
||||
<SelectItem value="抖音直播">抖音直播</SelectItem>
|
||||
<SelectItem value="小红书">小红书</SelectItem>
|
||||
<SelectItem value="微信朋友圈">朋友圈</SelectItem>
|
||||
<SelectItem value="视频号">视频号</SelectItem>
|
||||
<SelectItem value="公众号">公众号</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={statusFilter}
|
||||
onValueChange={(value) => {
|
||||
setStatusFilter(value)
|
||||
setCurrentPage(1)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue placeholder="状态" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部状态</SelectItem>
|
||||
<SelectItem value="pending">待处理</SelectItem>
|
||||
<SelectItem value="added">已添加</SelectItem>
|
||||
<SelectItem value="failed">已失败</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 用户列表 - 改进加载状态显示 */}
|
||||
<div className="space-y-2">
|
||||
{loading ? (
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<RefreshCw className="h-8 w-8 text-blue-500 animate-spin mb-4" />
|
||||
<div className="text-gray-500">加载中...</div>
|
||||
</div>
|
||||
) : users.length === 0 ? (
|
||||
<div className="text-center py-12 bg-gray-50 rounded-lg">
|
||||
<div className="text-gray-500">暂无数据</div>
|
||||
<Button variant="outline" className="mt-4" onClick={fetchUsers}>
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
users.map((user) => (
|
||||
<Card
|
||||
key={user.id}
|
||||
className="p-3 cursor-pointer hover:shadow-md transition-shadow"
|
||||
onClick={() => handleUserClick(user)}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<img src={user.avatar || "/placeholder.svg"} alt="" className="w-10 h-10 rounded-full bg-gray-100" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="font-medium truncate">{user.nickname}</div>
|
||||
<div
|
||||
className={`text-xs px-2 py-1 rounded-full ${
|
||||
user.status === "added"
|
||||
? "bg-green-100 text-green-800"
|
||||
: user.status === "pending"
|
||||
? "bg-yellow-100 text-yellow-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
}`}
|
||||
>
|
||||
{user.status === "added" ? "已添加" : user.status === "pending" ? "待处理" : "已失败"}
|
||||
{/* 标签展示 */}
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{user.tags.slice(0, 2).map((tag) => (
|
||||
<span key={tag.id} className={`text-xs px-2 py-0.5 rounded-full ${tag.color}`}>
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
{user.tags.length > 2 && (
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-800">
|
||||
+{user.tags.length - 2}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">微信号: {user.wechatId}</div>
|
||||
<div className="text-sm text-gray-500">来源: {user.source}</div>
|
||||
<div className="text-sm text-gray-500">添加时间: {new Date(user.addTime).toLocaleString()}</div>
|
||||
|
||||
{/* 标签展示 */}
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{user.tags.slice(0, 2).map((tag) => (
|
||||
<span key={tag.id} className={`text-xs px-2 py-0.5 rounded-full ${tag.color}`}>
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
{user.tags.length > 2 && (
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-800">
|
||||
+{user.tags.length - 2}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 分页 */}
|
||||
{!loading && users.length > 0 && (
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
setCurrentPage((prev) => Math.max(1, prev - 1))
|
||||
}}
|
||||
/>
|
||||
</PaginationItem>
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
<PaginationItem key={page}>
|
||||
<PaginationLink
|
||||
{/* 分页 */}
|
||||
{!loading && users.length > 0 && (
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
href="#"
|
||||
isActive={currentPage === page}
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
setCurrentPage(page)
|
||||
setCurrentPage((prev) => Math.max(1, prev - 1))
|
||||
}}
|
||||
>
|
||||
{page}
|
||||
</PaginationLink>
|
||||
/>
|
||||
</PaginationItem>
|
||||
))}
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
setCurrentPage((prev) => Math.min(totalPages, prev + 1))
|
||||
}}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
)}
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
<PaginationItem key={page}>
|
||||
<PaginationLink
|
||||
href="#"
|
||||
isActive={currentPage === page}
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
setCurrentPage(page)
|
||||
}}
|
||||
>
|
||||
{page}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
))}
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
setCurrentPage((prev) => Math.min(totalPages, prev + 1))
|
||||
}}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 用户详情弹窗 */}
|
||||
|
||||
Reference in New Issue
Block a user