siyu-bank/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

一些提交

Browse Source
This commit is contained in:
柳清爽
2025-04-09 09:29:31 +08:00
parent 3d49092cf7
commit 5fa75efd45
103 changed files with 837 additions and 187176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
Cunkebao/app/plans/new/steps/BasicSettings.tsx
View File

@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { QrCode, X, ChevronDown, Plus, Maximize2, Upload, Download, Settings } from "lucide-react"
import { QrCode, X, ChevronDown, Plus, Maximize2, Upload, Download, Settings, Loader2 } from "lucide-react"
import { TooltipProvider } from "@/components/ui/tooltip"
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
import {
@@ -21,6 +21,7 @@ import {
} from "@/components/ui/dialog"
import { fetchScenes } from "@/api/scenarios"
import type { SceneItem } from "@/api/scenarios"
import { toast } from "react-hot-toast"
// 调整场景顺序，确保API获客在最后，并且前三个是最常用的场景
const scenarios = [
@@ -155,6 +156,9 @@ export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps
questionExtraction: formData.phoneSettings?.questionExtraction ?? true,
})
const [isImporting, setIsImporting] = useState(false)
const [importError, setImportError] = useState<string | null>(null)
// 加载场景列表
useEffect(() => {
const loadScenes = async () => {
@@ -322,6 +326,45 @@ export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps
setIsPhoneSettingsOpen(false)
}
const handleConfirmImport = async () => {
if (importedTags.length === 0) {
setImportError('请先导入数据');
return;
}
setIsImporting(true);
setImportError(null);
try {
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/v1/traffic/pool/import`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`, // 添加认证token
},
body: JSON.stringify({
mobile: importedTags.map(tag => tag.phone),
from: importedTags.map(tag => tag.source),
sceneId: formData.sceneId
}),
});
const result = await response.json();
if (result.code === 200) {
toast.success(`成功导入 ${result.data.success} 条数据`);
setIsImportDialogOpen(false);
} else {
setImportError(result.msg || '导入失败');
}
} catch (error) {
setImportError('导入失败，请稍后重试');
console.error('导入失败:', error);
} finally {
setIsImporting(false);
}
};
return (
<TooltipProvider>
<Card className="p-6">
@@ -752,46 +795,85 @@ export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps
{/* 订单导入对话框 */}
<Dialog open={isImportDialogOpen} onOpenChange={setIsImportDialogOpen}>
<DialogContent className="max-w-3xl">
<DialogContent className="sm:max-w-[600px]">
<DialogHeader>
<DialogTitle>导入订单标签</DialogTitle>
<DialogTitle>导入订单</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div className="flex items-center gap-4">
<Input type="file" accept=".csv" onChange={handleFileImport} className="flex-1" />
<div className="mt-4">
<div className="flex items-center justify-between mb-4">
<div className="flex-1">
<Input
type="file"
accept=".csv,.xlsx,.xls"
onChange={handleFileImport}
className="hidden"
id="file-upload"
/>
<Label
htmlFor="file-upload"
className="cursor-pointer inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
>
<Upload className="h-4 w-4 mr-2" />
选择文件
</Label>
</div>
<Button variant="outline" onClick={handleDownloadTemplate}>
<Download className="h-4 w-4 mr-2" />
下载模板
</Button>
</div>
<div className="max-h-[400px] overflow-auto">
<Table>
<TableHeader>
<TableRow>
<TableHead>电话号码</TableHead>
<TableHead>来源</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{importedTags.map((tag, index) => (
<TableRow key={index}>
<TableCell>{tag.phone}</TableCell>
<TableCell>{tag.source}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
{importedTags.length > 0 && (
<div className="mt-4">
<h4 className="text-sm font-medium mb-2">已导入 {importedTags.length} 条数据</h4>
<div className="max-h-[300px] overflow-auto border rounded-md">
<Table>
<TableHeader>
<TableRow>
<TableHead>电话号码</TableHead>
<TableHead>来源</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{importedTags.slice(0, 5).map((tag, index) => (
<TableRow key={index}>
<TableCell>{tag.phone}</TableCell>
<TableCell>{tag.source}</TableCell>
</TableRow>
))}
{importedTags.length > 5 && (
<TableRow>
<TableCell colSpan={4} className="text-center text-gray-500">
还有 {importedTags.length - 5} 条数据未显示
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
</div>
)}
{importError && (
<div className="mt-4 text-red-500 text-sm">{importError}</div>
)}
<div className="mt-6 flex justify-end gap-2">
<Button variant="outline" onClick={() => setIsImportDialogOpen(false)}>
取消
</Button>
<Button onClick={handleConfirmImport} disabled={isImporting || importedTags.length === 0}>
{isImporting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
导入中...
</>
) : (
'确认导入'
)}
</Button>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setIsImportDialogOpen(false)}>
取消
</Button>
<Button
onClick={() => {
onChange({ ...formData, importedTags })
setIsImportDialogOpen(false)
}}
>
确认导入
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</TooltipProvider>

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

@@ -146,131 +146,131 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
// 生成模拟账号数据（作为备用，服务器请求失败时使用）
const generateMockAccountData = (): WechatAccountDetail => {
// 生成随机标签
// 生成随机标签
const generateRandomTags = (count: number): FriendTag[] => {
const tagPool = [
{ name: "潜在客户", color: "bg-blue-100 text-blue-800" },
{ name: "高意向", color: "bg-green-100 text-green-800" },
{ name: "已成交", color: "bg-purple-100 text-purple-800" },
{ name: "需跟进", color: "bg-yellow-100 text-yellow-800" },
{ name: "活跃用户", color: "bg-indigo-100 text-indigo-800" },
{ name: "沉默用户", color: "bg-gray-100 text-gray-800" },
{ name: "企业客户", color: "bg-red-100 text-red-800" },
{ name: "个人用户", color: "bg-pink-100 text-pink-800" },
{ name: "新增好友", color: "bg-emerald-100 text-emerald-800" },
{ name: "老客户", color: "bg-amber-100 text-amber-800" },
const tagPool = [
{ name: "潜在客户", color: "bg-blue-100 text-blue-800" },
{ name: "高意向", color: "bg-green-100 text-green-800" },
{ name: "已成交", color: "bg-purple-100 text-purple-800" },
{ name: "需跟进", color: "bg-yellow-100 text-yellow-800" },
{ name: "活跃用户", color: "bg-indigo-100 text-indigo-800" },
{ name: "沉默用户", color: "bg-gray-100 text-gray-800" },
{ name: "企业客户", color: "bg-red-100 text-red-800" },
{ name: "个人用户", color: "bg-pink-100 text-pink-800" },
{ name: "新增好友", color: "bg-emerald-100 text-emerald-800" },
{ name: "老客户", color: "bg-amber-100 text-amber-800" },
];
return Array.from({ length: Math.floor(Math.random() * count) + 1 }, () => {
return Array.from({ length: Math.floor(Math.random() * count) + 1 }, () => {
const randomTag = tagPool[Math.floor(Math.random() * tagPool.length)];
return {
id: `tag-${Math.random().toString(36).substring(2, 9)}`,
name: randomTag.name,
color: randomTag.color,
return {
id: `tag-${Math.random().toString(36).substring(2, 9)}`,
name: randomTag.name,
color: randomTag.color,
};
});
};
// 生成随机好友
// 生成随机好友
const friendCount = Math.floor(Math.random() * (300 - 150)) + 150;
const generateFriends = (count: number): WechatFriend[] => {
return Array.from({ length: count }, (_, i) => {
return Array.from({ length: count }, (_, i) => {
const firstName = ["张", "王", "李", "赵", "陈", "刘", "杨", "黄", "周", "吴"][Math.floor(Math.random() * 10)];
const secondName = ["小", "大", "明", "华", "强", "伟", "芳", "娜", "秀", "英"][
Math.floor(Math.random() * 10)
const secondName = ["小", "大", "明", "华", "强", "伟", "芳", "娜", "秀", "英"][
Math.floor(Math.random() * 10)
];
const lastName = ["明", "华", "强", "伟", "芳", "娜", "秀", "英", "军", "杰"][Math.floor(Math.random() * 10)];
const nickname = firstName + secondName + lastName;
// 生成随机的添加时间（过去1年内）
// 生成随机的添加时间（过去1年内）
const addDate = new Date();
addDate.setDate(addDate.getDate() - Math.floor(Math.random() * 365));
// 生成随机的最后互动时间（过去30天内）
// 生成随机的最后互动时间（过去30天内）
const lastDate = new Date();
lastDate.setDate(lastDate.getDate() - Math.floor(Math.random() * 30));
return {
id: `friend-${i}`,
avatar: `/placeholder.svg?height=40&width=40&text=${nickname[0]}`,
nickname,
wechatId: `wxid_${Math.random().toString(36).substring(2, 9)}`,
remark:
Math.random() > 0.5
? `${nickname}（${["同事", "客户", "朋友", "同学"][Math.floor(Math.random() * 4)]}）`
: "",
addTime: addDate.toISOString().split("T")[0],
lastInteraction: lastDate.toISOString().split("T")[0],
tags: generateRandomTags(3),
region: ["广东", "北京", "上海", "浙江", "江苏", "四川", "湖北", "福建", "山东", "河南"][
Math.floor(Math.random() * 10)
],
source: ["抖音", "小红书", "朋友介绍", "搜索添加", "群聊", "附近的人", "名片分享"][
Math.floor(Math.random() * 7)
],
notes:
Math.random() > 0.7
? ["对产品很感兴趣", "需要进一步跟进", "已购买过产品", "价格敏感", "需要更多信息"][
Math.floor(Math.random() * 5)
]
: "",
return {
id: `friend-${i}`,
avatar: `/placeholder.svg?height=40&width=40&text=${nickname[0]}`,
nickname,
wechatId: `wxid_${Math.random().toString(36).substring(2, 9)}`,
remark:
Math.random() > 0.5
? `${nickname}（${["同事", "客户", "朋友", "同学"][Math.floor(Math.random() * 4)]}）`
: "",
addTime: addDate.toISOString().split("T")[0],
lastInteraction: lastDate.toISOString().split("T")[0],
tags: generateRandomTags(3),
region: ["广东", "北京", "上海", "浙江", "江苏", "四川", "湖北", "福建", "山东", "河南"][
Math.floor(Math.random() * 10)
],
source: ["抖音", "小红书", "朋友介绍", "搜索添加", "群聊", "附近的人", "名片分享"][
Math.floor(Math.random() * 7)
],
notes:
Math.random() > 0.7
? ["对产品很感兴趣", "需要进一步跟进", "已购买过产品", "价格敏感", "需要更多信息"][
Math.floor(Math.random() * 5)
]
: "",
};
});
};
const friends = generateFriends(friendCount);
const mockAccount: WechatAccountDetail = {
id: params.id,
avatar:
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jn_e7fcc2a4-3560-478d-911a-4ccd69c6392g.jpg-a8zVtwxMuSrPWN9dfWH93EBY0yM3Dh.jpeg",
nickname: "卡若-25vig",
wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
deviceId: "device-1",
deviceName: "设备1",
friendCount: friends.length,
todayAdded: 12,
status: "normal",
lastActive: new Date().toLocaleString(),
messageCount: 1234,
activeRate: 87,
accountAge: {
years: 2,
months: 8,
},
totalChats: 15234,
chatFrequency: 42,
restrictionRecords: [
{
id: "1",
date: "2024-02-25",
reason: "添加好友过于频繁",
recoveryTime: "2024-02-26",
type: "friend_limit",
const mockAccount: WechatAccountDetail = {
id: params.id,
avatar:
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jn_e7fcc2a4-3560-478d-911a-4ccd69c6392g.jpg-a8zVtwxMuSrPWN9dfWH93EBY0yM3Dh.jpeg",
nickname: "卡若-25vig",
wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
deviceId: "device-1",
deviceName: "设备1",
friendCount: friends.length,
todayAdded: 12,
status: "normal",
lastActive: new Date().toLocaleString(),
messageCount: 1234,
activeRate: 87,
accountAge: {
years: 2,
months: 8,
},
{
id: "2",
date: "2024-01-15",
reason: "营销内容违规",
recoveryTime: "2024-01-16",
type: "marketing",
totalChats: 15234,
chatFrequency: 42,
restrictionRecords: [
{
id: "1",
date: "2024-02-25",
reason: "添加好友过于频繁",
recoveryTime: "2024-02-26",
type: "friend_limit",
},
{
id: "2",
date: "2024-01-15",
reason: "营销内容违规",
recoveryTime: "2024-01-16",
type: "marketing",
},
],
isVerified: true,
firstMomentDate: "2021-06-15",
accountWeight: 85,
weightFactors: {
restrictionFactor: 0.8,
verificationFactor: 1.0,
ageFactor: 0.9,
activityFactor: 0.85,
},
],
isVerified: true,
firstMomentDate: "2021-06-15",
accountWeight: 85,
weightFactors: {
restrictionFactor: 0.8,
verificationFactor: 1.0,
ageFactor: 0.9,
activityFactor: 0.85,
},
weeklyStats: Array.from({ length: 7 }, (_, i) => ({
date: `Day ${i + 1}`,
friends: Math.floor(Math.random() * 50) + 50,
messages: Math.floor(Math.random() * 100) + 100,
})),
friends: friends,
weeklyStats: Array.from({ length: 7 }, (_, i) => ({
date: `Day ${i + 1}`,
friends: Math.floor(Math.random() * 50) + 50,
messages: Math.floor(Math.random() * 100) + 100,
})),
friends: friends,
};
return mockAccount;
};
@@ -516,204 +516,204 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
</div>
) : account ? (
<div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen pb-16 overflow-x-hidden">
<header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
<div className="flex items-center p-4">
<Button variant="ghost" size="icon" onClick={() => router.back()}>
<ChevronLeft className="h-5 w-5" />
</Button>
<h1 className="ml-2 text-lg font-medium">账号详情</h1>
</div>
</header>
<header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
<div className="flex items-center p-4">
<Button variant="ghost" size="icon" onClick={() => router.back()}>
<ChevronLeft className="h-5 w-5" />
</Button>
<h1 className="ml-2 text-lg font-medium">账号详情</h1>
</div>
</header>
<div className="p-4 space-y-4">
<Card className="p-6">
<div className="flex items-center space-x-4">
<div className="relative">
<Avatar className="h-16 w-16 ring-4 ring-offset-2 ring-blue-500/20">
<AvatarImage src={account.avatar} />
<AvatarFallback>{account.nickname[0]}</AvatarFallback>
</Avatar>
{account.isVerified && (
<div className="p-4 space-y-4">
<Card className="p-6">
<div className="flex items-center space-x-4">
<div className="relative">
<Avatar className="h-16 w-16 ring-4 ring-offset-2 ring-blue-500/20">
<AvatarImage src={account.avatar} />
<AvatarFallback>{account.nickname[0]}</AvatarFallback>
</Avatar>
{account.isVerified && (
<Badge variant="outline" className="absolute -top-2 -right-2 px-2 py-0.5 text-xs">
已认证
</Badge>
)}
</div>
<div className="flex-1">
<div className="flex items-center space-x-2">
已认证
</Badge>
)}
</div>
<div className="flex-1">
<div className="flex items-center space-x-2">
<h2 className="text-xl font-semibold truncate max-w-[200px]">{account.nickname}</h2>
<Badge variant={account.status === "normal" ? "outline" : "destructive"}>
{account.status === "normal" ? "正常" : "异常"}
</Badge>
</div>
<p className="text-sm text-gray-500 mt-1">微信号：{account.wechatId}</p>
<div className="flex gap-2 mt-2">
<Button variant="outline" onClick={() => router.push(`/devices/${account.deviceId}`)}>
<Smartphone className="w-4 h-4 mr-2" />
{account.deviceName}
</Button>
<Button variant="outline" onClick={handleTransferFriends}>
<UserPlus className="w-4 h-4 mr-2" />
好友转移
</Button>
</div>
{account.status === "normal" ? "正常" : "异常"}
</Badge>
</div>
<p className="text-sm text-gray-500 mt-1">微信号：{account.wechatId}</p>
<div className="flex gap-2 mt-2">
<Button variant="outline" onClick={() => router.push(`/devices/${account.deviceId}`)}>
<Smartphone className="w-4 h-4 mr-2" />
{account.deviceName}
</Button>
<Button variant="outline" onClick={handleTransferFriends}>
<UserPlus className="w-4 h-4 mr-2" />
好友转移
</Button>
</div>
</div>
</Card>
</div>
</Card>
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="overview">账号概览</TabsTrigger>
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="overview">账号概览</TabsTrigger>
<TabsTrigger value="friends">
好友列表 ({friendsTotal > 0 ? friendsTotal : account.friendCount})
</TabsTrigger>
</TabsList>
</TabsList>
<TabsContent value="overview" className="space-y-4 mt-4">
{/* 账号基础信息 */}
<div className="grid grid-cols-2 gap-4">
<Card className="p-4">
<div className="flex items-center space-x-2 text-gray-500 mb-2">
<Clock className="w-4 h-4" />
<span className="text-sm">账号年龄</span>
</div>
<div className="text-2xl font-bold text-blue-600">{formatAccountAge(account.accountAge)}</div>
<div className="text-sm text-gray-500 mt-1">注册时间：{account.firstMomentDate}</div>
</Card>
<Card className="p-4">
<div className="flex items-center space-x-2 text-gray-500 mb-2">
<MessageSquare className="w-4 h-4" />
<span className="text-sm">活跃程度</span>
</div>
<div className="text-2xl font-bold text-blue-600">{account.chatFrequency}次/天</div>
<div className="text-sm text-gray-500 mt-1">总聊天数：{account.totalChats.toLocaleString()}</div>
</Card>
</div>
{/* 账号权重评估 */}
<TabsContent value="overview" className="space-y-4 mt-4">
{/* 账号基础信息 */}
<div className="grid grid-cols-2 gap-4">
<Card className="p-4">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-2">
<Star className="w-4 h-4 text-yellow-500" />
<span className="font-medium">账号权重评估</span>
</div>
<div className={`flex items-center space-x-2 ${getWeightColor(account.accountWeight)}`}>
<span className="text-2xl font-bold">{account.accountWeight}</span>
<span className="text-sm">分</span>
</div>
<div className="flex items-center space-x-2 text-gray-500 mb-2">
<Clock className="w-4 h-4" />
<span className="text-sm">账号年龄</span>
</div>
<p className="text-sm text-gray-500 mb-4">{getWeightDescription(account.accountWeight)}</p>
<div className="space-y-3">
<div className="flex items-center justify-between text-sm">
<div className="text-2xl font-bold text-blue-600">{formatAccountAge(account.accountAge)}</div>
<div className="text-sm text-gray-500 mt-1">注册时间：{account.firstMomentDate}</div>
</Card>
<Card className="p-4">
<div className="flex items-center space-x-2 text-gray-500 mb-2">
<MessageSquare className="w-4 h-4" />
<span className="text-sm">活跃程度</span>
</div>
<div className="text-2xl font-bold text-blue-600">{account.chatFrequency}次/天</div>
<div className="text-sm text-gray-500 mt-1">总聊天数：{account.totalChats.toLocaleString()}</div>
</Card>
</div>
{/* 账号权重评估 */}
<Card className="p-4">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-2">
<Star className="w-4 h-4 text-yellow-500" />
<span className="font-medium">账号权重评估</span>
</div>
<div className={`flex items-center space-x-2 ${getWeightColor(account.accountWeight)}`}>
<span className="text-2xl font-bold">{account.accountWeight}</span>
<span className="text-sm">分</span>
</div>
</div>
<p className="text-sm text-gray-500 mb-4">{getWeightDescription(account.accountWeight)}</p>
<div className="space-y-3">
<div className="flex items-center justify-between text-sm">
<span className="flex-shrink-0">账号年龄</span>
<Progress value={account.weightFactors.ageFactor * 100} className="flex-1 min-w-0 mx-2" />
<span className="flex-shrink-0">{(account.weightFactors.ageFactor * 100).toFixed(0)}%</span>
</div>
<div className="flex items-center justify-between text-sm">
</div>
<div className="flex items-center justify-between text-sm">
<span className="flex-shrink-0">活跃度</span>
<Progress value={account.weightFactors.activityFactor * 100} className="flex-1 min-w-0 mx-2" />
<span className="flex-shrink-0">{(account.weightFactors.activityFactor * 100).toFixed(0)}%</span>
</div>
<div className="flex items-center justify-between text-sm">
</div>
<div className="flex items-center justify-between text-sm">
<span className="flex-shrink-0">限制影响</span>
<Progress value={account.weightFactors.restrictionFactor * 100} className="flex-1 min-w-0 mx-2" />
<span className="flex-shrink-0">{(account.weightFactors.restrictionFactor * 100).toFixed(0)}%</span>
</div>
<div className="flex items-center justify-between text-sm">
</div>
<div className="flex items-center justify-between text-sm">
<span className="flex-shrink-0">实名认证</span>
<Progress value={account.weightFactors.verificationFactor * 100} className="flex-1 min-w-0 mx-2" />
<span className="flex-shrink-0">{(account.weightFactors.verificationFactor * 100).toFixed(0)}%</span>
</div>
</div>
</Card>
</div>
</Card>
{/* 添加好友统计 */}
<Card className="p-4">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-2">
<Users className="w-4 h-4 text-blue-500" />
<span className="font-medium">添加好友统计</span>
</div>
<UITooltip>
<TooltipTrigger>
<Info className="w-4 h-4 text-gray-400" />
</TooltipTrigger>
<TooltipContent>
<p>根据账号权重计算每日可添加好友数量</p>
</TooltipContent>
</UITooltip>
{/* 添加好友统计 */}
<Card className="p-4">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-2">
<Users className="w-4 h-4 text-blue-500" />
<span className="font-medium">添加好友统计</span>
</div>
<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">{account.todayAdded}</span>
<UITooltip>
<TooltipTrigger>
<Info className="w-4 h-4 text-gray-400" />
</TooltipTrigger>
<TooltipContent>
<p>根据账号权重计算每日可添加好友数量</p>
</TooltipContent>
</UITooltip>
</div>
<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">{account.todayAdded}</span>
</div>
<div>
<div className="flex justify-between text-sm mb-2">
<span className="text-gray-500">添加进度</span>
<span>
{account.todayAdded}/{calculateMaxDailyAdds(account.accountWeight)}
</span>
</div>
<div>
<div className="flex justify-between text-sm mb-2">
<span className="text-gray-500">添加进度</span>
<span>
{account.todayAdded}/{calculateMaxDailyAdds(account.accountWeight)}
</span>
<Progress
value={(account.todayAdded / calculateMaxDailyAdds(account.accountWeight)) * 100}
className="h-2"
/>
</div>
<div className="text-sm text-gray-500">
根据当前账号权重({account.accountWeight}分)，每日最多可添加{" "}
<span className="font-medium text-blue-600">{calculateMaxDailyAdds(account.accountWeight)}</span>{" "}
个好友
</div>
</div>
</Card>
{/* 限制记录 */}
<Card className="p-4">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-2">
<Shield className="w-4 h-4 text-red-500" />
<span className="font-medium">限制记录</span>
</div>
<Badge variant="outline" className="cursor-pointer" onClick={() => setShowRestrictions(true)}>
共 {account.restrictionRecords.length} 次
</Badge>
</div>
<div className="space-y-2">
{account.restrictionRecords.slice(0, 2).map((record) => (
<div key={record.id} className="text-sm">
<div className="flex items-center justify-between">
<span className={getRestrictionTypeColor(record.type)}>{record.reason}</span>
<span className="text-gray-500">{record.date}</span>
</div>
<Progress
value={(account.todayAdded / calculateMaxDailyAdds(account.accountWeight)) * 100}
className="h-2"
</div>
))}
</div>
</Card>
</TabsContent>
<TabsContent value="friends" className="space-y-4 mt-4">
<Card className="p-4">
<div className="space-y-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="搜索好友昵称/微信号/备注/标签"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
className="pl-9"
/>
</div>
<div className="text-sm text-gray-500">
根据当前账号权重({account.accountWeight}分)，每日最多可添加{" "}
<span className="font-medium text-blue-600">{calculateMaxDailyAdds(account.accountWeight)}</span>{" "}
个好友
</div>
</div>
</Card>
{/* 限制记录 */}
<Card className="p-4">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-2">
<Shield className="w-4 h-4 text-red-500" />
<span className="font-medium">限制记录</span>
</div>
<Badge variant="outline" className="cursor-pointer" onClick={() => setShowRestrictions(true)}>
共 {account.restrictionRecords.length} 次
</Badge>
</div>
<div className="space-y-2">
{account.restrictionRecords.slice(0, 2).map((record) => (
<div key={record.id} className="text-sm">
<div className="flex items-center justify-between">
<span className={getRestrictionTypeColor(record.type)}>{record.reason}</span>
<span className="text-gray-500">{record.date}</span>
</div>
</div>
))}
</div>
</Card>
</TabsContent>
<TabsContent value="friends" className="space-y-4 mt-4">
<Card className="p-4">
<div className="space-y-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="搜索好友昵称/微信号/备注/标签"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
className="pl-9"
/>
</div>
<Button variant="outline" size="icon" onClick={handleSearch}>
<Filter className="h-4 w-4" />
</Button>
</div>
<Filter className="h-4 w-4" />
</Button>
</div>
{/* 好友列表 */}
{/* 好友列表 */}
<div
ref={friendsContainerRef}
className="space-y-2 transition-all duration-300"
@@ -735,42 +735,42 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
</Button>
</div>
) : friends.length === 0 ? (
<div className="text-center py-8 text-gray-500">未找到匹配的好友</div>
) : (
<div className="text-center py-8 text-gray-500">未找到匹配的好友</div>
) : (
<>
{friends.map((friend) => (
<div
key={friend.id}
className="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer"
onClick={() => handleFriendClick(friend)}
>
<Avatar className="h-10 w-10 mr-3">
<AvatarImage src={friend.avatar} />
<div
key={friend.id}
className="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer"
onClick={() => handleFriendClick(friend)}
>
<Avatar className="h-10 w-10 mr-3">
<AvatarImage src={friend.avatar} />
<AvatarFallback>{friend.nickname?.[0] || 'U'}</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
</Avatar>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<div className="font-medium truncate max-w-[180px]">
{friend.nickname}
{friend.nickname}
{friend.remark && <span className="text-gray-500 ml-1 truncate">({friend.remark})</span>}
</div>
<ChevronRight className="h-4 w-4 text-gray-400" />
</div>
<div className="text-sm text-gray-500 truncate">{friend.wechatId}</div>
<div className="flex flex-wrap gap-1 mt-1">
{friend.tags.slice(0, 3).map((tag: FriendTag) => (
<span key={tag.id} className={`text-xs px-2 py-0.5 rounded-full ${tag.color}`}>
{tag.name}
</span>
))}
{friend.tags.length > 3 && (
<span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-800">
+{friend.tags.length - 3}
</span>
)}
</div>
</div>
<ChevronRight className="h-4 w-4 text-gray-400" />
</div>
<div className="text-sm text-gray-500 truncate">{friend.wechatId}</div>
<div className="flex flex-wrap gap-1 mt-1">
{friend.tags.slice(0, 3).map((tag: FriendTag) => (
<span key={tag.id} className={`text-xs px-2 py-0.5 rounded-full ${tag.color}`}>
{tag.name}
</span>
))}
{friend.tags.length > 3 && (
<span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-800">
+{friend.tags.length - 3}
</span>
)}
</div>
</div>
</div>
))}
{/* 懒加载指示器 */}
@@ -780,8 +780,8 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
</div>
)}
</>
)}
</div>
)}
</div>
{/* 显示加载状态和总数 */}
<div className="text-sm text-gray-500 text-center">
@@ -795,149 +795,149 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
</span>
) : null}
</div>
</div>
</Card>
</TabsContent>
</Tabs>
</div>
</Card>
</TabsContent>
</Tabs>
{/* 限制记录详情弹窗 */}
<Dialog open={showRestrictions} onOpenChange={setShowRestrictions}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>限制记录详情</DialogTitle>
<DialogDescription>每次限制恢复时间为24小时</DialogDescription>
</DialogHeader>
<ScrollArea className="max-h-[400px]">
<div className="space-y-4">
{account.restrictionRecords.map((record) => (
<div key={record.id} className="border-b pb-4 last:border-0">
<div className="flex justify-between items-start">
<div className={`text-sm ${getRestrictionTypeColor(record.type)}`}>{record.reason}</div>
<Badge variant="outline">{record.date}</Badge>
</div>
<div className="text-sm text-gray-500 mt-1">恢复时间：{record.recoveryTime}</div>
{/* 限制记录详情弹窗 */}
<Dialog open={showRestrictions} onOpenChange={setShowRestrictions}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>限制记录详情</DialogTitle>
<DialogDescription>每次限制恢复时间为24小时</DialogDescription>
</DialogHeader>
<ScrollArea className="max-h-[400px]">
<div className="space-y-4">
{account.restrictionRecords.map((record) => (
<div key={record.id} className="border-b pb-4 last:border-0">
<div className="flex justify-between items-start">
<div className={`text-sm ${getRestrictionTypeColor(record.type)}`}>{record.reason}</div>
<Badge variant="outline">{record.date}</Badge>
</div>
))}
</div>
</ScrollArea>
</DialogContent>
</Dialog>
{/* 好友转移确认弹窗 */}
<Dialog open={showTransferConfirm} onOpenChange={setShowTransferConfirm}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>好友转移确认</DialogTitle>
<DialogDescription>即将导出该微信号的好友列表，用于创建新的获客计划</DialogDescription>
</DialogHeader>
<div className="py-4">
<div className="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
<Avatar className="h-10 w-10">
<AvatarImage src={account.avatar} />
<AvatarFallback>{account.nickname[0]}</AvatarFallback>
</Avatar>
<div>
<div className="font-medium">{account.nickname}</div>
<div className="text-sm text-gray-500">{account.wechatId}</div>
<div className="text-sm text-gray-500 mt-1">恢复时间：{record.recoveryTime}</div>
</div>
</div>
<div className="mt-4 text-sm text-gray-500">
<p>• 将导出该账号下的所有好友信息</p>
<p>• 好友信息将用于创建新的订单获客计划</p>
<p>• 导出过程中请勿关闭页面</p>
))}
</div>
</ScrollArea>
</DialogContent>
</Dialog>
{/* 好友转移确认弹窗 */}
<Dialog open={showTransferConfirm} onOpenChange={setShowTransferConfirm}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>好友转移确认</DialogTitle>
<DialogDescription>即将导出该微信号的好友列表，用于创建新的获客计划</DialogDescription>
</DialogHeader>
<div className="py-4">
<div className="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
<Avatar className="h-10 w-10">
<AvatarImage src={account.avatar} />
<AvatarFallback>{account.nickname[0]}</AvatarFallback>
</Avatar>
<div>
<div className="font-medium">{account.nickname}</div>
<div className="text-sm text-gray-500">{account.wechatId}</div>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setShowTransferConfirm(false)}>
取消
</Button>
<Button onClick={confirmTransferFriends}>确认转移</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<div className="mt-4 text-sm text-gray-500">
<p>• 将导出该账号下的所有好友信息</p>
<p>• 好友信息将用于创建新的订单获客计划</p>
<p>• 导出过程中请勿关闭页面</p>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setShowTransferConfirm(false)}>
取消
</Button>
<Button onClick={confirmTransferFriends}>确认转移</Button>
</DialogFooter>
</DialogContent>
</Dialog>
{/* 好友详情弹窗 */}
<Dialog open={showFriendDetail} onOpenChange={setShowFriendDetail}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>好友详情</DialogTitle>
</DialogHeader>
{selectedFriend && (
<div className="space-y-4">
<div className="flex items-center space-x-3">
<Avatar className="h-16 w-16">
<AvatarImage src={selectedFriend.avatar} />
<AvatarFallback>{selectedFriend.nickname[0]}</AvatarFallback>
</Avatar>
<div>
<div className="text-xl font-medium">{selectedFriend.nickname}</div>
<div className="text-sm text-gray-500">{selectedFriend.wechatId}</div>
{selectedFriend.remark && (
<div className="text-sm text-gray-500">备注: {selectedFriend.remark}</div>
)}
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-1">
<div className="text-sm text-gray-500">添加时间</div>
<div className="font-medium">{selectedFriend.addTime}</div>
</div>
<div className="space-y-1">
<div className="text-sm text-gray-500">最近互动</div>
<div className="font-medium">{selectedFriend.lastInteraction}</div>
</div>
<div className="space-y-1">
<div className="text-sm text-gray-500">地区</div>
<div className="font-medium">{selectedFriend.region}</div>
</div>
<div className="space-y-1">
<div className="text-sm text-gray-500">来源</div>
<div className="font-medium">{selectedFriend.source}</div>
</div>
</div>
<div className="space-y-2">
<div className="text-sm text-gray-500 flex items-center">
<Tag className="h-4 w-4 mr-1" />
标签
</div>
<div className="flex flex-wrap gap-2">
{selectedFriend.tags.map((tag: FriendTag) => (
<span key={tag.id} className={`text-sm px-2 py-1 rounded-full ${tag.color}`}>
{tag.name}
</span>
))}
{selectedFriend.tags.length === 0 && <span className="text-sm text-gray-500">暂无标签</span>}
</div>
</div>
{selectedFriend.notes && (
<div className="space-y-2">
<div className="text-sm text-gray-500">备注信息</div>
<div className="p-3 bg-gray-50 rounded-lg text-sm">{selectedFriend.notes}</div>
</div>
)}
<div className="flex justify-end space-x-2">
<Button variant="outline" onClick={() => setShowFriendDetail(false)}>
关闭
</Button>
<Button
onClick={() => {
setShowFriendDetail(false)
router.push(`/traffic-pool?source=${selectedFriend.wechatId}`)
}}
>
添加到流量池
</Button>
{/* 好友详情弹窗 */}
<Dialog open={showFriendDetail} onOpenChange={setShowFriendDetail}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>好友详情</DialogTitle>
</DialogHeader>
{selectedFriend && (
<div className="space-y-4">
<div className="flex items-center space-x-3">
<Avatar className="h-16 w-16">
<AvatarImage src={selectedFriend.avatar} />
<AvatarFallback>{selectedFriend.nickname[0]}</AvatarFallback>
</Avatar>
<div>
<div className="text-xl font-medium">{selectedFriend.nickname}</div>
<div className="text-sm text-gray-500">{selectedFriend.wechatId}</div>
{selectedFriend.remark && (
<div className="text-sm text-gray-500">备注: {selectedFriend.remark}</div>
)}
</div>
</div>
)}
</DialogContent>
</Dialog>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-1">
<div className="text-sm text-gray-500">添加时间</div>
<div className="font-medium">{selectedFriend.addTime}</div>
</div>
<div className="space-y-1">
<div className="text-sm text-gray-500">最近互动</div>
<div className="font-medium">{selectedFriend.lastInteraction}</div>
</div>
<div className="space-y-1">
<div className="text-sm text-gray-500">地区</div>
<div className="font-medium">{selectedFriend.region}</div>
</div>
<div className="space-y-1">
<div className="text-sm text-gray-500">来源</div>
<div className="font-medium">{selectedFriend.source}</div>
</div>
</div>
<div className="space-y-2">
<div className="text-sm text-gray-500 flex items-center">
<Tag className="h-4 w-4 mr-1" />
标签
</div>
<div className="flex flex-wrap gap-2">
{selectedFriend.tags.map((tag: FriendTag) => (
<span key={tag.id} className={`text-sm px-2 py-1 rounded-full ${tag.color}`}>
{tag.name}
</span>
))}
{selectedFriend.tags.length === 0 && <span className="text-sm text-gray-500">暂无标签</span>}
</div>
</div>
{selectedFriend.notes && (
<div className="space-y-2">
<div className="text-sm text-gray-500">备注信息</div>
<div className="p-3 bg-gray-50 rounded-lg text-sm">{selectedFriend.notes}</div>
</div>
)}
<div className="flex justify-end space-x-2">
<Button variant="outline" onClick={() => setShowFriendDetail(false)}>
关闭
</Button>
<Button
onClick={() => {
setShowFriendDetail(false)
router.push(`/traffic-pool?source=${selectedFriend.wechatId}`)
}}
>
添加到流量池
</Button>
</div>
</div>
)}
</DialogContent>
</Dialog>
</div>
</div>
) : (
<div className="flex justify-center items-center py-20">
<p className="text-gray-500">未找到账号信息</p>