fnvtk/ckb-SuperAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复微信号页面 列表项目被内容撑大溢出屏幕照成左右滚动的问题

Browse Source
This commit is contained in:
柳清爽
2025-04-02 17:14:26 +08:00
parent e834e99a6b
commit 6b47cb942c
3 changed files with 40 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
Cunkebao/app/globals.css
View File

@@ -58,3 +58,20 @@
} }
} }
/* 修复微信号页面横向滚动问题 */
body {
overflow-x: hidden;
}
/* 优化微信账号列表项布局 */
.Card[class*="wechat-accounts"] {
max-width: 100%;
overflow-x: hidden;
}
/* 确保进度条组件不会溢出 */
.Progress {
flex-shrink: 1;
min-width: 0;
}

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

@@ -374,7 +374,7 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
<Loader2 className="h-8 w-8 animate-spin text-blue-500" /> <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
</div> </div>
) : account ? ( ) : account ? (
<div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen pb-16"> <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"> <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
<div className="flex items-center p-4"> <div className="flex items-center p-4">
<Button variant="ghost" size="icon" onClick={() => router.back()}> <Button variant="ghost" size="icon" onClick={() => router.back()}>
@@ -400,7 +400,7 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<h2 className="text-xl font-semibold">{account.nickname}</h2> <h2 className="text-xl font-semibold truncate max-w-[200px]">{account.nickname}</h2>
<Badge variant={account.status === "normal" ? "outline" : "destructive"}> <Badge variant={account.status === "normal" ? "outline" : "destructive"}>
{account.status === "normal" ? "正常" : "异常"} {account.status === "normal" ? "正常" : "异常"}
</Badge> </Badge>
@@ -463,24 +463,24 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
<p className="text-sm text-gray-500 mb-4">{getWeightDescription(account.accountWeight)}</p> <p className="text-sm text-gray-500 mb-4">{getWeightDescription(account.accountWeight)}</p>
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center justify-between text-sm"> <div className="flex items-center justify-between text-sm">
<span>账号年龄</span> <span className="flex-shrink-0">账号年龄</span>
<Progress value={account.weightFactors.ageFactor * 100} className="w-32" /> <Progress value={account.weightFactors.ageFactor * 100} className="flex-1 min-w-0 mx-2" />
<span>{(account.weightFactors.ageFactor * 100).toFixed(0)}%</span> <span className="flex-shrink-0">{(account.weightFactors.ageFactor * 100).toFixed(0)}%</span>
</div> </div>
<div className="flex items-center justify-between text-sm"> <div className="flex items-center justify-between text-sm">
<span>活跃度</span> <span className="flex-shrink-0">活跃度</span>
<Progress value={account.weightFactors.activityFactor * 100} className="w-32" /> <Progress value={account.weightFactors.activityFactor * 100} className="flex-1 min-w-0 mx-2" />
<span>{(account.weightFactors.activityFactor * 100).toFixed(0)}%</span> <span className="flex-shrink-0">{(account.weightFactors.activityFactor * 100).toFixed(0)}%</span>
</div> </div>
<div className="flex items-center justify-between text-sm"> <div className="flex items-center justify-between text-sm">
<span>限制影响</span> <span className="flex-shrink-0">限制影响</span>
<Progress value={account.weightFactors.restrictionFactor * 100} className="w-32" /> <Progress value={account.weightFactors.restrictionFactor * 100} className="flex-1 min-w-0 mx-2" />
<span>{(account.weightFactors.restrictionFactor * 100).toFixed(0)}%</span> <span className="flex-shrink-0">{(account.weightFactors.restrictionFactor * 100).toFixed(0)}%</span>
</div> </div>
<div className="flex items-center justify-between text-sm"> <div className="flex items-center justify-between text-sm">
<span>实名认证</span> <span className="flex-shrink-0">实名认证</span>
<Progress value={account.weightFactors.verificationFactor * 100} className="w-32" /> <Progress value={account.weightFactors.verificationFactor * 100} className="flex-1 min-w-0 mx-2" />
<span>{(account.weightFactors.verificationFactor * 100).toFixed(0)}%</span> <span className="flex-shrink-0">{(account.weightFactors.verificationFactor * 100).toFixed(0)}%</span>
</div> </div>
</div> </div>
</Card> </Card>
@@ -586,9 +586,9 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
</Avatar> </Avatar>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="font-medium truncate"> <div className="font-medium truncate max-w-[180px]">
{friend.nickname} {friend.nickname}
{friend.remark && <span className="text-gray-500 ml-1">({friend.remark})</span>} {friend.remark && <span className="text-gray-500 ml-1 truncate">({friend.remark})</span>}
</div> </div>
<ChevronRight className="h-4 w-4 text-gray-400" /> <ChevronRight className="h-4 w-4 text-gray-400" />
</div> </div>

14
Cunkebao/app/wechat-accounts/page.tsx
View File

@@ -225,7 +225,7 @@ export default function WechatAccountsPage() {
{accounts.map((account) => ( {accounts.map((account) => (
<Card <Card
key={account.id} key={account.id}
className="p-4 hover:shadow-lg transition-all cursor-pointer" className="p-4 hover:shadow-lg transition-all cursor-pointer overflow-hidden"
onClick={() => router.push(`/wechat-accounts/${account.id}`)} onClick={() => router.push(`/wechat-accounts/${account.id}`)}
> >
<div className="flex items-start space-x-4"> <div className="flex items-start space-x-4">
@@ -236,7 +236,7 @@ export default function WechatAccountsPage() {
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<h3 className="font-medium truncate">{account.nickname}</h3> <h3 className="font-medium truncate max-w-[180px]">{account.nickname}</h3>
<Badge variant={account.status === "normal" ? "outline" : "destructive"}> <Badge variant={account.status === "normal" ? "outline" : "destructive"}>
{account.status === "normal" ? "正常" : "异常"} {account.status === "normal" ? "正常" : "异常"}
</Badge> </Badge>
@@ -254,8 +254,8 @@ export default function WechatAccountsPage() {
</Button> </Button>
</div> </div>
<div className="mt-1 text-sm text-gray-500 space-y-1"> <div className="mt-1 text-sm text-gray-500 space-y-1">
<div>微信号：{account.wechatId}</div> <div className="truncate">微信号：{account.wechatId}</div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between flex-wrap gap-1">
<div>好友数量：{account.friendCount}</div> <div>好友数量：{account.friendCount}</div>
<div className="text-green-600">今日新增：+{account.todayAdded}</div> <div className="text-green-600">今日新增：+{account.todayAdded}</div>
</div> </div>
@@ -281,9 +281,9 @@ export default function WechatAccountsPage() {
</div> </div>
<Progress value={(account.todayAdded / account.maxDailyAdds) * 100} className="h-2" /> <Progress value={(account.todayAdded / account.maxDailyAdds) * 100} className="h-2" />
</div> </div>
<div className="flex items-center justify-between text-xs text-gray-500 pt-2"> <div className="flex items-center justify-between text-xs text-gray-500 pt-2 flex-wrap gap-1">
<div>所属设备：{account.deviceName || '未知设备'}</div> <div className="truncate max-w-[150px]">所属设备：{account.deviceName || '未知设备'}</div>
<div>最后活跃：{account.lastActive}</div> <div className="whitespace-nowrap">最后活跃：{account.lastActive}</div>
</div> </div>
</div> </div>
</div> </div>