fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

私域操盘手 - 修复流量池页面点击”全部来源“和全部状态的select框，页面被压缩的问题

Browse Source
This commit is contained in:
柳清爽
2025-05-13 11:15:34 +08:00
parent 2da11bbbc9
commit 05c5f6c8e3
2 changed files with 234 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

356
Cunkebao/app/traffic-pool/page.tsx
View File

@@ -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>
{/* 用户详情弹窗 */}

109
Cunkebao/app/wechat-accounts/[id]/page.tsx
View File

@@ -398,17 +398,17 @@ export default function WechatAccountDetailPage() {
setIsFetchingFriends(true);
setHasFriendLoadError(false);
const response = await api.get<ApiResponse<FriendsResponse>>(`/v1/wechats/${id}/friends?page=${page}&limit=30${searchQuery ? `&search=${encodeURIComponent(searchQuery)}` : ''}`, true);
const data = await api.get<ApiResponse<FriendsResponse>>(`/v1/wechats/${id}/friends?page=${page}&limit=30`, true);
if (response && response.code === 200 && response.data) {
if (data && data.code === 200) {
// 更新总数计数
if (isNewSearch || friendsTotal === 0) {
setFriendsTotal(response.data.total || 0);
setFriendsTotal(data.data.total || 0);
}
const newFriends = response.data.list.map((friend) => ({
const newFriends = data.data.list.map((friend) => ({
id: friend.id.toString(),
avatar: friend.avatar || '/placeholder.svg',
avatar: friend.avatar,
nickname: friend.nickname,
wechatId: friend.wechatId,
remark: friend.memo || '',
@@ -433,12 +433,13 @@ export default function WechatAccountDetailPage() {
setFriendsPage(page);
// 判断是否还有更多数据
setHasMoreFriends(page * 30 < response.data.total);
setHasMoreFriends(page * 30 < data.data.total);
} else {
setHasFriendLoadError(true);
toast({
title: "获取好友列表失败",
description: response?.msg || "请稍后再试",
description: data?.msg || "请稍后再试",
variant: "destructive"
});
}
@@ -453,7 +454,7 @@ export default function WechatAccountDetailPage() {
} finally {
setIsFetchingFriends(false);
}
}, [account, id, friendsTotal, searchQuery]);
}, [account, id, friendsTotal]);
// 处理搜索
const handleSearch = useCallback(() => {
@@ -528,21 +529,21 @@ export default function WechatAccountDetailPage() {
const response = await fetchWechatAccountSummary(id);
if (response.code === 200) {
setAccountSummary(response.data);
} else {
toast({
} else {
toast({
title: "获取账号概览失败",
description: response.msg || "请稍后再试",
variant: "destructive"
variant: "destructive"
});
}
} catch (error) {
}
} catch (error) {
console.error("获取账号概览失败:", error);
toast({
toast({
title: "获取账号概览失败",
description: "请检查网络连接或稍后再试",
variant: "destructive"
description: "请检查网络连接或稍后再试",
variant: "destructive"
});
} finally {
} finally {
setIsLoading(false);
}
}, [id]);
@@ -726,9 +727,9 @@ export default function WechatAccountDetailPage() {
<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="overview">账号概览</TabsTrigger>
<TabsTrigger value="friends">
<TabsTrigger value="friends">
好友列表{activeTab === "friends" && friendsTotal > 0 ? ` (${friendsTotal})` : ''}
</TabsTrigger>
</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="space-y-4 mt-4">
@@ -775,33 +776,33 @@ export default function WechatAccountDetailPage() {
{accountSummary && (
<div className={`flex items-center space-x-2 ${getWeightColor(accountSummary.accountWeight.scope)}`}>
<span className="text-2xl font-bold">{accountSummary.accountWeight.scope}</span>
<span className="text-sm">分</span>
</div>
<span className="text-sm">分</span>
</div>
)}
</div>
{accountSummary && (
<>
<p className="text-sm text-gray-500 mb-4">{getWeightDescription(accountSummary.accountWeight.scope)}</p>
<div className="space-y-3">
<div className="space-y-3">
<div className="flex items-center">
<span className="flex-shrink-0 w-16 text-sm">账号年龄</span>
<div className="flex-1 mx-4">
<Progress value={accountSummary.accountWeight.ageWeight} className="h-2" />
</div>
</div>
<span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.ageWeight}%</span>
</div>
</div>
<div className="flex items-center">
<span className="flex-shrink-0 w-16 text-sm">活跃度</span>
<div className="flex-1 mx-4">
<Progress value={accountSummary.accountWeight.activityWeigth} className="h-2" />
</div>
</div>
<span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.activityWeigth}%</span>
</div>
</div>
<div className="flex items-center">
<span className="flex-shrink-0 w-16 text-sm">限制影响</span>
<div className="flex-1 mx-4">
<Progress value={accountSummary.accountWeight.restrictWeight} className="h-2" />
</div>
</div>
<span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.restrictWeight}%</span>
</div>
<div className="flex items-center">
@@ -833,29 +834,29 @@ export default function WechatAccountDetailPage() {
</UITooltip>
</div>
{accountSummary && (
<div className="space-y-4">
<div className="flex items-center justify-between">
<span className="text-sm text-gray-500">今日已添加</span>
<div className="space-y-4">
<div className="flex items-center justify-between">
<span className="text-sm text-gray-500">今日已添加</span>
<span className="text-xl font-bold text-blue-600">{accountSummary.statistics.todayAdded}</span>
</div>
<div>
<div className="flex justify-between text-sm mb-2">
<span className="text-gray-500">添加进度</span>
<span>
</div>
<div>
<div className="flex justify-between text-sm mb-2">
<span className="text-gray-500">添加进度</span>
<span>
{accountSummary.statistics.todayAdded}/{accountSummary.statistics.addLimit}
</span>
</div>
<Progress
value={(accountSummary.statistics.todayAdded / accountSummary.statistics.addLimit) * 100}
className="h-2"
/>
</span>
</div>
<div className="text-sm text-gray-500">
<Progress
value={(accountSummary.statistics.todayAdded / accountSummary.statistics.addLimit) * 100}
className="h-2"
/>
</div>
<div className="text-sm text-gray-500">
根据当前账号权重({accountSummary.accountWeight.scope}分)，每日最多可添加{" "}
<span className="font-medium text-blue-600">{accountSummary.statistics.addLimit}</span>{" "}
个好友
</div>
个好友
</div>
</div>
)}
</Card>
@@ -867,24 +868,24 @@ export default function WechatAccountDetailPage() {
<span className="font-medium">限制记录</span>
</div>
{accountSummary && (
<Badge variant="outline" className="cursor-pointer" onClick={() => setShowRestrictions(true)}>
<Badge variant="outline" className="cursor-pointer" onClick={() => setShowRestrictions(true)}>
共 {accountSummary.restrictions.length} 次
</Badge>
</Badge>
)}
</div>
{accountSummary && (
<div className="space-y-2">
<div className="space-y-2">
{accountSummary.restrictions.slice(0, 2).map((record) => (
<div key={record.id} className="text-sm">
<div className="flex items-center justify-between">
<div key={record.id} className="text-sm">
<div className="flex items-center justify-between">
<span className={`${getRestrictionLevelColor(record.level)}`}>
{record.reason}
</span>
<span className="text-gray-500">{formatDateTime(record.date)}</span>
</div>
</div>
))}
</div>
</div>
))}
</div>
)}
</Card>
</TabsContent>
@@ -1010,7 +1011,7 @@ export default function WechatAccountDetailPage() {
<div className="flex justify-between items-start">
<div className={`text-sm ${getRestrictionLevelColor(record.level)}`}>
{record.reason}
</div>
</div>
<Badge variant="outline">{formatDateTime(record.date)}</Badge>
</div>
<div className="text-sm text-gray-500 mt-1">恢复时间：{formatDateTime(record.date)}</div>
@@ -1186,7 +1187,7 @@ export default function WechatAccountDetailPage() {
标签
</div>
<div className="flex flex-wrap gap-2">
{selectedFriend.tags.map((tag: FriendTag) => (
{selectedFriend.tags.map((tag: FriendTag) => (
<span key={tag.id} className={`text-sm px-2 py-1 rounded-full ${tag.color}`}>
{tag.name}
</span>