feat：样式还是有问题，先这样。
This commit is contained in:
许永平
@@ -11,6 +11,7 @@ import {
|
||||
Info,
|
||||
UserPlus,
|
||||
Search,
|
||||
Filter,
|
||||
Tag,
|
||||
ChevronRight,
|
||||
Loader2,
|
||||
@@ -102,6 +103,7 @@ export default function WechatAccountDetail() {
|
||||
const [isFetchingFriends, setIsFetchingFriends] = useState(false);
|
||||
const friendsObserver = useRef<IntersectionObserver | null>(null);
|
||||
const friendsLoadingRef = useRef<HTMLDivElement | null>(null);
|
||||
const friendsContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// 如果没有账号数据，返回上一页
|
||||
useEffect(() => {
|
||||
@@ -323,14 +325,35 @@ export default function WechatAccountDetail() {
|
||||
const getRestrictionLevelColor = (level: string) => {
|
||||
switch (level) {
|
||||
case "high":
|
||||
return "bg-red-100 text-red-700";
|
||||
return "text-red-600";
|
||||
case "medium":
|
||||
return "bg-yellow-100 text-yellow-700";
|
||||
return "text-yellow-600";
|
||||
default:
|
||||
return "bg-gray-100 text-gray-700";
|
||||
return "text-gray-600";
|
||||
}
|
||||
};
|
||||
|
||||
const formatDateTime = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false
|
||||
}).replace(/\//g, '-');
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
fetchFriends(1, true);
|
||||
};
|
||||
|
||||
const handleTabChange = (value: string) => {
|
||||
setActiveTab(value);
|
||||
};
|
||||
|
||||
if (!currentAccount) {
|
||||
return (
|
||||
<div className="flex justify-center items-center py-20">
|
||||
@@ -340,355 +363,400 @@ export default function WechatAccountDetail() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen overflow-x-hidden">
|
||||
{/* 固定header */}
|
||||
<header className="fixed top-0 left-0 right-0 z-20 bg-white border-b border-gray-200">
|
||||
<div className="flex items-center px-4 py-3">
|
||||
<header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
|
||||
<div className="flex items-center p-4">
|
||||
<button
|
||||
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
onClick={handleBack}
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</button>
|
||||
<h1 className="ml-2 text-lg font-semibold">账号详情</h1>
|
||||
<h1 className="ml-2 text-lg font-medium">账号详情</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<div className="pt-16 pb-20">
|
||||
<div className="p-4 space-y-4">
|
||||
{/* 账号基本信息卡片 */}
|
||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="relative">
|
||||
<img
|
||||
src={currentAccount.avatar || "/placeholder.svg"}
|
||||
alt={currentAccount.nickname}
|
||||
className="w-16 h-16 rounded-full ring-4 ring-offset-2 ring-blue-500/20"
|
||||
/>
|
||||
<div className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white ${
|
||||
currentAccount.status === "normal" ? "bg-green-500" : "bg-red-500"
|
||||
}`}></div>
|
||||
<div className="p-4 space-y-4">
|
||||
{/* 账号基本信息卡片 */}
|
||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="relative">
|
||||
<img
|
||||
src={currentAccount.avatar || "/placeholder.svg"}
|
||||
alt={currentAccount.nickname}
|
||||
className="w-16 h-16 rounded-full ring-4 ring-offset-2 ring-blue-500/20"
|
||||
/>
|
||||
<div className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white ${
|
||||
currentAccount.status === "normal" ? "bg-green-500" : "bg-red-500"
|
||||
}`}></div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<h2 className="text-xl font-semibold truncate max-w-[200px]">{currentAccount.nickname}</h2>
|
||||
<span className={`px-2 py-1 text-xs rounded-full ${
|
||||
currentAccount.status === "normal"
|
||||
? "bg-green-500 text-white"
|
||||
: "bg-red-500 text-white"
|
||||
}`}>
|
||||
{currentAccount.status === "normal" ? "正常" : "异常"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<h2 className="text-xl font-semibold truncate max-w-[200px]">{currentAccount.nickname}</h2>
|
||||
<span className={`px-2 py-1 text-xs rounded-full ${
|
||||
currentAccount.status === "normal"
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-red-100 text-red-700"
|
||||
}`}>
|
||||
{currentAccount.status === "normal" ? "正常" : "异常"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-1">微信号：{currentAccount.wechatAccount}</p>
|
||||
<div className="flex gap-2 mt-2">
|
||||
<button
|
||||
className="px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-sm flex items-center"
|
||||
onClick={() => navigate(`/devices/${currentAccount.deviceId}`)}
|
||||
>
|
||||
<Smartphone className="w-4 h-4 mr-1" />
|
||||
{currentAccount.deviceName || '未命名设备'}
|
||||
</button>
|
||||
<button
|
||||
className="px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-sm flex items-center"
|
||||
onClick={handleTransferFriends}
|
||||
>
|
||||
<UserPlus className="w-4 h-4 mr-1" />
|
||||
好友转移
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-1">微信号：{currentAccount.wechatAccount}</p>
|
||||
<div className="flex gap-2 mt-2">
|
||||
<button
|
||||
className="px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-sm flex items-center"
|
||||
onClick={() => navigate(`/devices/${currentAccount.deviceId}`)}
|
||||
>
|
||||
<Smartphone className="w-4 h-4 mr-2" />
|
||||
{currentAccount.deviceName || '未命名设备'}
|
||||
</button>
|
||||
<button
|
||||
className="px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-sm flex items-center"
|
||||
onClick={handleTransferFriends}
|
||||
>
|
||||
<UserPlus className="w-4 h-4 mr-2" />
|
||||
好友转移
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 标签页 */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100">
|
||||
<div className="flex border-b border-gray-200">
|
||||
<button
|
||||
className={`flex-1 py-3 px-4 text-sm font-medium transition-colors ${
|
||||
activeTab === "overview"
|
||||
? "text-blue-600 border-b-2 border-blue-600"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
onClick={() => setActiveTab("overview")}
|
||||
>
|
||||
账号概览
|
||||
</button>
|
||||
<button
|
||||
className={`flex-1 py-3 px-4 text-sm font-medium transition-colors ${
|
||||
activeTab === "friends"
|
||||
? "text-blue-600 border-b-2 border-blue-600"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
onClick={() => setActiveTab("friends")}
|
||||
>
|
||||
好友列表{activeTab === "friends" && friendsTotal > 0 ? ` (${friendsTotal.toLocaleString()})` : ''}
|
||||
</button>
|
||||
</div>
|
||||
{/* 标签页 */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100">
|
||||
<div className="flex border-b border-gray-200">
|
||||
<button
|
||||
className={`flex-1 py-3 px-4 text-sm font-medium transition-colors ${
|
||||
activeTab === "overview"
|
||||
? "text-blue-600 border-b-2 border-blue-600"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
onClick={() => handleTabChange("overview")}
|
||||
>
|
||||
账号概览
|
||||
</button>
|
||||
<button
|
||||
className={`flex-1 py-3 px-4 text-sm font-medium transition-colors ${
|
||||
activeTab === "friends"
|
||||
? "text-blue-600 border-b-2 border-blue-600"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
onClick={() => handleTabChange("friends")}
|
||||
>
|
||||
好友列表{activeTab === "friends" && friendsTotal > 0 ? ` (${friendsTotal.toLocaleString()})` : ''}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
{activeTab === "overview" ? (
|
||||
<div className="space-y-4">
|
||||
{/* 账号基础信息 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<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>
|
||||
{accountSummary && (
|
||||
<>
|
||||
<div className="text-2xl font-bold text-blue-600">
|
||||
{formatAccountAge(calculateAccountAge(accountSummary.accountAge))}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
注册时间：{new Date(accountSummary.accountAge).toLocaleDateString()}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<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>
|
||||
{accountSummary && (
|
||||
<>
|
||||
<div className="text-2xl font-bold text-blue-600">{accountSummary.activityLevel.dayTimes.toLocaleString()}次/天</div>
|
||||
<div className="text-sm text-gray-500 mt-1">总聊天数：{accountSummary.activityLevel.allTimes.toLocaleString()}</div>
|
||||
</>
|
||||
)}
|
||||
<div className="p-4">
|
||||
{activeTab === "overview" ? (
|
||||
<div className="space-y-4">
|
||||
{/* 账号基础信息 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<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>
|
||||
{accountSummary && (
|
||||
<>
|
||||
<div className="text-2xl font-bold text-blue-600">
|
||||
{formatAccountAge(calculateAccountAge(accountSummary.accountAge))}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
注册时间：{new Date(accountSummary.accountAge).toLocaleDateString()}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 账号权重评估 */}
|
||||
{accountSummary && (
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<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(accountSummary.accountWeight.scope)}`}>
|
||||
<span className="text-2xl font-bold">{accountSummary.accountWeight.scope}</span>
|
||||
<span className="text-sm">分</span>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<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>
|
||||
{accountSummary && (
|
||||
<>
|
||||
<div className="text-2xl font-bold text-blue-600">{accountSummary.activityLevel.dayTimes.toLocaleString()}次/天</div>
|
||||
<div className="text-sm text-gray-500 mt-1">总聊天数：{accountSummary.activityLevel.allTimes.toLocaleString()}</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 账号权重评估 */}
|
||||
{accountSummary && (
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<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>
|
||||
<p className="text-sm text-gray-500 mb-4">{getWeightDescription(accountSummary.accountWeight.scope)}</p>
|
||||
<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 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${accountSummary.accountWeight.ageWeight}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.ageWeight}%</span>
|
||||
<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>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mb-4">{getWeightDescription(accountSummary.accountWeight.scope)}</p>
|
||||
<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 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${accountSummary.accountWeight.ageWeight}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="flex-shrink-0 w-16 text-sm">活跃度</span>
|
||||
<div className="flex-1 mx-4 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${accountSummary.accountWeight.activityWeigth}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.activityWeigth}%</span>
|
||||
<span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.ageWeight}%</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="flex-shrink-0 w-16 text-sm">活跃度</span>
|
||||
<div className="flex-1 mx-4 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${accountSummary.accountWeight.activityWeigth}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="flex-shrink-0 w-16 text-sm">限制影响</span>
|
||||
<div className="flex-1 mx-4 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${accountSummary.accountWeight.restrictWeight}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.restrictWeight}%</span>
|
||||
<span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.activityWeigth}%</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="flex-shrink-0 w-16 text-sm">限制影响</span>
|
||||
<div className="flex-1 mx-4 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${accountSummary.accountWeight.restrictWeight}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="flex-shrink-0 w-16 text-sm">实名认证</span>
|
||||
<div className="flex-1 mx-4 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${accountSummary.accountWeight.realNameWeight}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.realNameWeight}%</span>
|
||||
<span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.restrictWeight}%</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="flex-shrink-0 w-16 text-sm">实名认证</span>
|
||||
<div className="flex-1 mx-4 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${accountSummary.accountWeight.realNameWeight}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.realNameWeight}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 添加好友统计 */}
|
||||
{accountSummary && (
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<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="relative group">
|
||||
<Info className="w-4 h-4 text-gray-400" />
|
||||
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs bg-gray-800 text-white rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
|
||||
根据账号权重计算每日可添加好友数量
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 添加好友统计 */}
|
||||
{accountSummary && (
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<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 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>
|
||||
{accountSummary.statistics.todayAdded}/{accountSummary.statistics.addLimit}
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative group">
|
||||
<Info className="w-4 h-4 text-gray-400" />
|
||||
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs bg-gray-800 text-white rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
|
||||
根据账号权重计算每日可添加好友数量
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${(accountSummary.statistics.todayAdded / accountSummary.statistics.addLimit) * 100}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</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">{accountSummary.statistics.todayAdded}</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>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${(accountSummary.statistics.todayAdded / accountSummary.statistics.addLimit) * 100}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
根据当前账号权重({accountSummary.accountWeight.scope}分)，每日最多可添加{" "}
|
||||
<span className="font-medium text-blue-600">{accountSummary.statistics.addLimit.toLocaleString()}</span>{" "}
|
||||
个好友
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 限制记录 */}
|
||||
{accountSummary && accountSummary.restrictions.length > 0 && (
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
{/* 限制记录 */}
|
||||
{accountSummary && accountSummary.restrictions.length > 0 && (
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<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>
|
||||
<div className="space-y-2">
|
||||
{accountSummary.restrictions.map((restriction) => (
|
||||
<div key={restriction.id} className="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-sm font-medium">{restriction.reason}</span>
|
||||
<span className={`px-2 py-0.5 text-xs rounded-full ${getRestrictionLevelColor(restriction.level)}`}>
|
||||
{restriction.level === "high" ? "严重" :
|
||||
restriction.level === "medium" ? "中等" : "轻微"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">{restriction.date}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* 搜索栏 */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="relative flex-1">
|
||||
<Search className="w-4 h-4 absolute left-3 top-3 text-gray-400" />
|
||||
<input
|
||||
className="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="搜索好友昵称/备注"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyPress={(e) => e.key === 'Enter' && fetchFriends(1, true)}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
|
||||
onClick={() => fetchFriends(1, true)}
|
||||
>
|
||||
搜索
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 好友列表 */}
|
||||
<div className="space-y-3">
|
||||
{friends.map((friend) => (
|
||||
<div
|
||||
key={friend.id}
|
||||
className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
|
||||
onClick={() => handleFriendClick(friend)}
|
||||
<button
|
||||
className="px-2 py-1 border border-gray-200 rounded text-xs cursor-pointer hover:bg-gray-50"
|
||||
onClick={() => setShowRestrictions(true)}
|
||||
>
|
||||
<img
|
||||
src={friend.avatar}
|
||||
alt={friend.nickname}
|
||||
className="w-10 h-10 rounded-full"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center space-x-2">
|
||||
<h4 className="font-medium truncate">{friend.nickname}</h4>
|
||||
{friend.tags.length > 0 && (
|
||||
<div className="flex space-x-1">
|
||||
{friend.tags.slice(0, 2).map((tag) => (
|
||||
<span
|
||||
key={tag.id}
|
||||
className={`px-2 py-0.5 text-xs rounded-full ${tag.color}`}
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
{friend.tags.length > 2 && (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600">
|
||||
+{friend.tags.length - 2}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
共 {accountSummary.restrictions.length} 次
|
||||
</button>
|
||||
</div>
|
||||
<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">
|
||||
<span className={`${getRestrictionLevelColor(record.level)}`}>
|
||||
{record.reason}
|
||||
</span>
|
||||
<span className="text-gray-500">{formatDateTime(record.date)}</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 space-y-1">
|
||||
<div className="truncate">备注：{friend.remark || "无"}</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span>地区：{friend.region}</span>
|
||||
<span>来源：{friend.source}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* 搜索栏 */}
|
||||
<div className="flex items-center space-x-2 bg-white p-4 rounded-lg shadow-sm">
|
||||
<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="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="p-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors bg-white"
|
||||
onClick={handleSearch}
|
||||
>
|
||||
<Filter className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 好友列表 */}
|
||||
<div className="space-y-2 min-h-[200px]">
|
||||
{isFetchingFriends && friends.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
|
||||
</div>
|
||||
) : friends.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500">未找到匹配的好友</div>
|
||||
) : (
|
||||
<>
|
||||
{friends.map((friend) => (
|
||||
<div
|
||||
key={friend.id}
|
||||
className="flex items-center p-3 bg-white border rounded-lg hover:bg-gray-50 cursor-pointer transition-colors duration-200"
|
||||
onClick={() => handleFriendClick(friend)}
|
||||
>
|
||||
<img
|
||||
src={friend.avatar}
|
||||
alt={friend.nickname}
|
||||
className="w-10 h-10 rounded-full mr-3"
|
||||
/>
|
||||
<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.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?.map((tag, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-blue-100 text-blue-800"
|
||||
>
|
||||
{typeof tag === 'string' ? tag : tag.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="w-4 h-4 text-gray-400" />
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
{hasMoreFriends && (
|
||||
<div ref={friendsLoadingRef} className="flex justify-center py-4">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-blue-500" />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 加载更多 */}
|
||||
{hasMoreFriends && (
|
||||
<div ref={friendsLoadingRef} className="py-4 flex items-center justify-center">
|
||||
{isFetchingFriends && <Loader2 className="h-6 w-6 animate-spin text-blue-500" />}
|
||||
{/* 限制记录详情弹窗 */}
|
||||
{showRestrictions && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-xl p-6 max-w-md w-full max-h-[80vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold">限制记录详情</h3>
|
||||
<button
|
||||
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
onClick={() => setShowRestrictions(false)}
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mb-4">每次限制恢复时间为24小时</p>
|
||||
<div className="space-y-4">
|
||||
{(accountSummary?.restrictions && accountSummary.restrictions.length > 0) ? (
|
||||
accountSummary.restrictions.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 ${getRestrictionLevelColor(record.level)}`}>
|
||||
{record.reason}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!hasMoreFriends && friends.length > 0 && (
|
||||
<div className="text-center py-4 text-sm text-gray-500">
|
||||
没有更多好友了
|
||||
</div>
|
||||
)}
|
||||
|
||||
{friends.length === 0 && !isFetchingFriends && (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<Users className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
||||
<p>暂无好友数据</p>
|
||||
</div>
|
||||
)}
|
||||
<span className="px-2 py-1 border border-gray-200 rounded text-xs">{formatDateTime(record.date)}</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-1">恢复时间：{formatDateTime(record.date)}</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-8 text-green-500">
|
||||
暂无风险记录，请继续保持
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 好友转移确认对话框 */}
|
||||
{showTransferConfirm && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-xl p-6 max-w-md w-full">
|
||||
<h3 className="text-lg font-semibold mb-4">好友转移确认</h3>
|
||||
<p className="text-sm text-gray-500 mb-6">
|
||||
确认要将 {currentAccount.nickname} 的好友转移到场景获客吗？系统将自动创建一个获客计划。
|
||||
</p>
|
||||
<h3 className="text-lg font-semibold mb-2">好友转移确认</h3>
|
||||
<p className="text-sm text-gray-500 mb-4">即将导出该微信号的好友列表，用于创建新的获客计划</p>
|
||||
<div className="py-4">
|
||||
<div className="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
|
||||
<img
|
||||
src={currentAccount.avatar}
|
||||
alt={currentAccount.nickname}
|
||||
className="w-10 h-10 rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<div className="font-medium">{currentAccount.nickname}</div>
|
||||
<div className="text-sm text-gray-500">{currentAccount.wechatId}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 text-sm text-gray-500">
|
||||
<p>• 将导出该账号下的所有好友信息</p>
|
||||
<p>• 好友信息将用于创建新的订单获客计划</p>
|
||||
<p>• 导出过程中请勿关闭页面</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-3">
|
||||
<button
|
||||
className="flex-1 px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
@@ -722,13 +790,18 @@ export default function WechatAccountDetail() {
|
||||
</div>
|
||||
|
||||
{isLoadingFriendDetail ? (
|
||||
<div className="flex justify-center items-center py-8">
|
||||
<div className="flex justify-center items-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
|
||||
</div>
|
||||
) : friendDetailError ? (
|
||||
<div className="text-center py-8 text-red-500">
|
||||
<AlertCircle className="h-8 w-8 mx-auto mb-2" />
|
||||
<p>{friendDetailError}</p>
|
||||
<button
|
||||
className="mt-4 px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-sm"
|
||||
onClick={() => handleFriendClick(selectedFriend!)}
|
||||
>
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
) : friendDetail && selectedFriend ? (
|
||||
<div className="space-y-4">
|
||||
|
||||
Reference in New Issue
Block a user