From 6b47cb942cfcf46a9177a35c32a7a660ca6d5839 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9F=B3=E6=B8=85=E7=88=BD?= <eison.icu@gmail.com>
Date: Wed, 2 Apr 2025 17:14:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=BE=AE=E4=BF=A1=E5=8F=B7?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20=E5=88=97=E8=A1=A8=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E8=A2=AB=E5=86=85=E5=AE=B9=E6=92=91=E5=A4=A7=E6=BA=A2=E5=87=BA?=
 =?UTF-8?q?=E5=B1=8F=E5=B9=95=E7=85=A7=E6=88=90=E5=B7=A6=E5=8F=B3=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Cunkebao/app/globals.css                   | 17 ++++++++++++
 Cunkebao/app/wechat-accounts/[id]/page.tsx | 32 +++++++++++-----------
 Cunkebao/app/wechat-accounts/page.tsx      | 14 +++++-----
 3 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/Cunkebao/app/globals.css b/Cunkebao/app/globals.css
index 93c2e5e84..78957f6a0 100755
--- a/Cunkebao/app/globals.css
+++ b/Cunkebao/app/globals.css
@@ -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;
+}
+
diff --git a/Cunkebao/app/wechat-accounts/[id]/page.tsx b/Cunkebao/app/wechat-accounts/[id]/page.tsx
index c113e6043..b92968073 100755
--- a/Cunkebao/app/wechat-accounts/[id]/page.tsx
+++ b/Cunkebao/app/wechat-accounts/[id]/page.tsx
@@ -374,7 +374,7 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
           <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
         </div>
       ) : 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">
             <div className="flex items-center p-4">
               <Button variant="ghost" size="icon" onClick={() => router.back()}>
@@ -400,7 +400,7 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
                 </div>
                 <div className="flex-1">
                   <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"}>
                       {account.status === "normal" ? "正常" : "异常"}
                     </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>
                   <div className="space-y-3">
                     <div className="flex items-center justify-between text-sm">
-                      <span>账号年龄</span>
-                      <Progress value={account.weightFactors.ageFactor * 100} className="w-32" />
-                      <span>{(account.weightFactors.ageFactor * 100).toFixed(0)}%</span>
+                      <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">
-                      <span>活跃度</span>
-                      <Progress value={account.weightFactors.activityFactor * 100} className="w-32" />
-                      <span>{(account.weightFactors.activityFactor * 100).toFixed(0)}%</span>
+                      <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">
-                      <span>限制影响</span>
-                      <Progress value={account.weightFactors.restrictionFactor * 100} className="w-32" />
-                      <span>{(account.weightFactors.restrictionFactor * 100).toFixed(0)}%</span>
+                      <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">
-                      <span>实名认证</span>
-                      <Progress value={account.weightFactors.verificationFactor * 100} className="w-32" />
-                      <span>{(account.weightFactors.verificationFactor * 100).toFixed(0)}%</span>
+                      <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>
@@ -586,9 +586,9 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
                             </Avatar>
                             <div className="flex-1 min-w-0">
                               <div className="flex items-center justify-between">
-                                <div className="font-medium truncate">
+                                <div className="font-medium truncate max-w-[180px]">
                                   {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>
                                 <ChevronRight className="h-4 w-4 text-gray-400" />
                               </div>
diff --git a/Cunkebao/app/wechat-accounts/page.tsx b/Cunkebao/app/wechat-accounts/page.tsx
index 3a9b1e918..c831b3837 100755
--- a/Cunkebao/app/wechat-accounts/page.tsx
+++ b/Cunkebao/app/wechat-accounts/page.tsx
@@ -225,7 +225,7 @@ export default function WechatAccountsPage() {
             {accounts.map((account) => (
               <Card
                 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}`)}
               >
                 <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 items-center justify-between">
                       <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"}>
                           {account.status === "normal" ? "正常" : "异常"}
                         </Badge>
@@ -254,8 +254,8 @@ export default function WechatAccountsPage() {
                       </Button>
                     </div>
                     <div className="mt-1 text-sm text-gray-500 space-y-1">
-                      <div>微信号：{account.wechatId}</div>
-                      <div className="flex items-center justify-between">
+                      <div className="truncate">微信号：{account.wechatId}</div>
+                      <div className="flex items-center justify-between flex-wrap gap-1">
                         <div>好友数量：{account.friendCount}</div>
                         <div className="text-green-600">今日新增：+{account.todayAdded}</div>
                       </div>
@@ -281,9 +281,9 @@ export default function WechatAccountsPage() {
                         </div>
                         <Progress value={(account.todayAdded / account.maxDailyAdds) * 100} className="h-2" />
                       </div>
-                      <div className="flex items-center justify-between text-xs text-gray-500 pt-2">
-                        <div>所属设备：{account.deviceName || '未知设备'}</div>
-                        <div>最后活跃：{account.lastActive}</div>
+                      <div className="flex items-center justify-between text-xs text-gray-500 pt-2 flex-wrap gap-1">
+                        <div className="truncate max-w-[150px]">所属设备：{account.deviceName || '未知设备'}</div>
+                        <div className="whitespace-nowrap">最后活跃：{account.lastActive}</div>
                       </div>
                     </div>
                   </div>