feat: 账户详情构建完毕
This commit is contained in:
许永平
@@ -495,92 +495,117 @@ export default function WechatAccountDetail() {
|
||||
{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 className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-3 rounded-xl border border-blue-100 shadow-sm hover:shadow-md transition-all duration-300">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="p-1.5 bg-blue-100 rounded-lg">
|
||||
<Clock className="w-4 h-4 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs font-medium text-blue-700">账号年龄</div>
|
||||
{accountSummary && (
|
||||
<div className="text-xs text-blue-600">
|
||||
注册于 {new Date(accountSummary.accountAge).toLocaleDateString()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{accountSummary && (
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-blue-800">
|
||||
{formatAccountAge(calculateAccountAge(accountSummary.accountAge))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</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 className="bg-gradient-to-br from-green-50 to-emerald-50 p-3 rounded-xl border border-green-100 shadow-sm hover:shadow-md transition-all duration-300">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="p-1.5 bg-green-100 rounded-lg">
|
||||
<MessageSquare className="w-4 h-4 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs font-medium text-green-700">活跃程度</div>
|
||||
{accountSummary && (
|
||||
<div className="text-xs text-green-600">
|
||||
总聊天 {accountSummary.activityLevel.allTimes.toLocaleString()} 次
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{accountSummary && (
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-green-800">
|
||||
{accountSummary.activityLevel.dayTimes.toLocaleString()}
|
||||
<span className="text-sm text-green-600 ml-1">次/天</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</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="bg-gradient-to-br from-amber-50 to-yellow-50 p-4 rounded-xl border border-amber-100 shadow-sm hover:shadow-md transition-all duration-300">
|
||||
<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 className="p-1.5 bg-amber-100 rounded-lg">
|
||||
<Star className="w-4 h-4 text-amber-600" />
|
||||
</div>
|
||||
<span className="font-semibold text-amber-800 text-base">账号权重评估</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 className={`flex items-center space-x-2 px-3 py-1.5 rounded-full ${getWeightColor(accountSummary.accountWeight.scope).includes('green') ? 'bg-green-100 text-green-700' : getWeightColor(accountSummary.accountWeight.scope).includes('yellow') ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700'}`}>
|
||||
<span className="text-xl font-bold">{accountSummary.accountWeight.scope}</span>
|
||||
<span className="text-xs font-medium">分</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mb-4">{getWeightDescription(accountSummary.accountWeight.scope)}</p>
|
||||
<p className="text-xs text-amber-700 mb-4 bg-amber-100 px-3 py-2 rounded-lg border border-amber-200">
|
||||
{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">
|
||||
<span className="flex-shrink-0 w-16 text-xs font-medium text-amber-700">账号年龄</span>
|
||||
<div className="flex-1 mx-3 bg-amber-200 rounded-full h-2 overflow-hidden">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
className="bg-gradient-to-r from-amber-400 to-amber-600 h-2 rounded-full transition-all duration-500"
|
||||
style={{ width: `${accountSummary.accountWeight.ageWeight}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.ageWeight}%</span>
|
||||
<span className="flex-shrink-0 w-10 text-xs font-medium text-amber-700 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">
|
||||
<span className="flex-shrink-0 w-16 text-xs font-medium text-amber-700">活跃度</span>
|
||||
<div className="flex-1 mx-3 bg-amber-200 rounded-full h-2 overflow-hidden">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
className="bg-gradient-to-r from-amber-400 to-amber-600 h-2 rounded-full transition-all duration-500"
|
||||
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-10 text-xs font-medium text-amber-700 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">
|
||||
<span className="flex-shrink-0 w-16 text-xs font-medium text-amber-700">限制影响</span>
|
||||
<div className="flex-1 mx-3 bg-amber-200 rounded-full h-2 overflow-hidden">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
className="bg-gradient-to-r from-amber-400 to-amber-600 h-2 rounded-full transition-all duration-500"
|
||||
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-10 text-xs font-medium text-amber-700 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">
|
||||
<span className="flex-shrink-0 w-16 text-xs font-medium text-amber-700">实名认证</span>
|
||||
<div className="flex-1 mx-3 bg-amber-200 rounded-full h-2 overflow-hidden">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
className="bg-gradient-to-r from-amber-400 to-amber-600 h-2 rounded-full transition-all duration-500"
|
||||
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-10 text-xs font-medium text-amber-700 text-right">{accountSummary.accountWeight.realNameWeight}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -588,41 +613,46 @@ export default function WechatAccountDetail() {
|
||||
|
||||
{/* 添加好友统计 */}
|
||||
{accountSummary && (
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<div className="bg-gradient-to-br from-purple-50 to-indigo-50 p-4 rounded-xl border border-purple-100 shadow-sm hover:shadow-md transition-all duration-300">
|
||||
<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="p-1.5 bg-purple-100 rounded-lg">
|
||||
<Users className="w-4 h-4 text-purple-600" />
|
||||
</div>
|
||||
<span className="font-semibold text-purple-800 text-base">添加好友统计</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 className="p-1.5 bg-purple-100 rounded-lg cursor-help">
|
||||
<Info className="w-3 h-3 text-purple-600" />
|
||||
</div>
|
||||
<div className="absolute bottom-full right-0 mb-2 px-2 py-1.5 text-xs bg-purple-800 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap shadow-lg z-10">
|
||||
根据账号权重计算每日可添加好友数量
|
||||
<div className="absolute top-full right-4 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-purple-800"></div>
|
||||
</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 className="flex items-center justify-between bg-white p-3 rounded-lg border border-purple-200">
|
||||
<span className="text-xs font-medium text-purple-700">今日已添加</span>
|
||||
<span className="text-xl font-bold text-purple-800">{accountSummary.statistics.todayAdded}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="text-gray-500">添加进度</span>
|
||||
<span>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-xs">
|
||||
<span className="text-purple-700 font-medium">添加进度</span>
|
||||
<span className="text-purple-800 font-semibold">
|
||||
{accountSummary.statistics.todayAdded}/{accountSummary.statistics.addLimit}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div className="w-full bg-purple-200 rounded-full h-2 overflow-hidden">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${(accountSummary.statistics.todayAdded / accountSummary.statistics.addLimit) * 100}%` }}
|
||||
className="bg-gradient-to-r from-purple-400 to-purple-600 h-2 rounded-full transition-all duration-500"
|
||||
style={{ width: `${Math.min((accountSummary.statistics.todayAdded / accountSummary.statistics.addLimit) * 100, 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 className="text-xs text-purple-700 bg-purple-100 px-3 py-2 rounded-lg border border-purple-200">
|
||||
根据当前账号权重 <span className="font-semibold text-purple-800">({accountSummary.accountWeight.scope}分)</span>，每日最多可添加{" "}
|
||||
<span className="font-bold text-purple-800">{accountSummary.statistics.addLimit.toLocaleString()}</span>{" "}
|
||||
个好友
|
||||
</div>
|
||||
</div>
|
||||
@@ -630,32 +660,53 @@ export default function WechatAccountDetail() {
|
||||
)}
|
||||
|
||||
{/* 限制记录 */}
|
||||
{accountSummary && accountSummary.restrictions.length > 0 && (
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
{accountSummary && (
|
||||
<div className="bg-gradient-to-br from-red-50 to-pink-50 p-4 rounded-xl border border-red-100 shadow-sm hover:shadow-md transition-all duration-300">
|
||||
<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>
|
||||
<button
|
||||
className="px-2 py-1 border border-gray-200 rounded text-xs cursor-pointer hover:bg-gray-50"
|
||||
onClick={() => setShowRestrictions(true)}
|
||||
>
|
||||
共 {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="p-1.5 bg-red-100 rounded-lg">
|
||||
<Shield className="w-4 h-4 text-red-600" />
|
||||
</div>
|
||||
))}
|
||||
<span className="font-semibold text-red-800 text-base">限制记录</span>
|
||||
</div>
|
||||
{accountSummary.restrictions.length > 0 && (
|
||||
<button
|
||||
className="px-3 py-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-full text-xs font-medium transition-colors duration-200 border border-red-200"
|
||||
onClick={() => setShowRestrictions(true)}
|
||||
>
|
||||
共 {accountSummary.restrictions.length} 次
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{accountSummary.restrictions.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{accountSummary.restrictions.slice(0, 2).map((record) => (
|
||||
<div key={record.id} className="bg-white p-3 rounded-lg border border-red-200 hover:border-red-300 transition-colors">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className={`text-xs font-medium ${getRestrictionLevelColor(record.level)}`}>
|
||||
{record.reason}
|
||||
</span>
|
||||
<span className="text-xs text-red-600 bg-red-50 px-2 py-0.5 rounded-full">
|
||||
{formatDateTime(record.date)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-red-500">
|
||||
限制时间：{formatDateTime(record.date)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-6">
|
||||
<div className="flex flex-col items-center space-y-2">
|
||||
<div className="p-2 bg-green-100 rounded-full">
|
||||
<Shield className="w-5 h-5 text-green-600" />
|
||||
</div>
|
||||
<div className="text-green-700 font-medium text-sm">暂无风险记录</div>
|
||||
<div className="text-xs text-green-600">请继续保持良好的使用习惯</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user