diff --git a/Cunkebao/api/wechat-accounts.ts b/Cunkebao/api/wechat-accounts.ts
index 1cc6cf9e..3097b1eb 100644
--- a/Cunkebao/api/wechat-accounts.ts
+++ b/Cunkebao/api/wechat-accounts.ts
@@ -88,4 +88,120 @@ export const transformWechatAccount = (serverAccount: any): import("@/types/wech
     status: serverAccount.wechatAlive === 1 ? "normal" : "abnormal" as "normal" | "abnormal",
     lastActive: new Date().toLocaleString() // 服务端未提供，使用当前时间
   };
+};
+
+/**
+ * 将服务端的微信账号详情转换为前端详情页面所需的格式
+ * @param detailResponse 服务端微信账号详情响应
+ * @returns 前端页面所需的微信账号详情格式
+ */
+export const transformWechatAccountDetail = (detailResponse: WechatAccountDetailResponse): any => {
+  if (!detailResponse || !detailResponse.data) {
+    return null;
+  }
+
+  const { basicInfo, statistics, accountInfo, restrictions, friends } = detailResponse.data;
+  
+  // 设备信息处理
+  let deviceId = '';
+  let deviceName = '';
+  
+  if (basicInfo.deviceInfo) {
+    const deviceInfoParts = basicInfo.deviceInfo.split(' ');
+    deviceId = deviceInfoParts[0] || '';
+    deviceName = deviceInfoParts[1] ? deviceInfoParts[1].replace(/[()]/g, '') : '';
+  }
+  
+  // 账号年龄计算
+  let accountAgeYears = 0;
+  let accountAgeMonths = 0;
+  
+  if (accountInfo.createTime) {
+    const createDate = new Date(accountInfo.createTime);
+    const currentDate = new Date();
+    const diffInMonths = (currentDate.getFullYear() - createDate.getFullYear()) * 12 + 
+                          (currentDate.getMonth() - createDate.getMonth());
+    
+    accountAgeYears = Math.floor(diffInMonths / 12);
+    accountAgeMonths = diffInMonths % 12;
+  }
+  
+  // 转换限制记录
+  const restrictionRecords = restrictions?.map((restriction, index) => ({
+    id: `${index}`,
+    date: restriction.startTime,
+    reason: restriction.reason,
+    recoveryTime: restriction.endTime,
+    type: mapRestrictionType(restriction.type)
+  })) || [];
+  
+  // 转换好友数据
+  const transformedFriends = friends?.map(friend => ({
+    id: friend.id.toString(),
+    avatar: friend.avatar || `/placeholder.svg?height=40&width=40&text=${friend.nickname?.[0] || ''}`,
+    nickname: friend.nickname,
+    wechatId: friend.wechatId,
+    remark: '', // 服务端未提供
+    addTime: friend.createTime,
+    lastInteraction: '', // 服务端未提供
+    tags: [], // 服务端未提供
+    region: friend.region || '',
+    source: '', // 服务端未提供
+    notes: '', // 服务端未提供
+  })) || [];
+  
+  // 创建每周统计数据（模拟数据，服务端未提供）
+  const weeklyStats = Array.from({ length: 7 }, (_, i) => ({
+    date: `Day ${i + 1}`,
+    friends: Math.floor(Math.random() * 50) + 50,
+    messages: Math.floor(Math.random() * 100) + 100,
+  }));
+  
+  return {
+    id: basicInfo.id.toString(),
+    avatar: basicInfo.avatar || '',
+    nickname: basicInfo.nickname || '',
+    wechatId: basicInfo.wechatId || '',
+    deviceId,
+    deviceName,
+    friendCount: statistics.totalFriend || 0,
+    todayAdded: 0, // 服务端未提供，默认为0
+    status: basicInfo.status === '在线' ? 'normal' : 'abnormal',
+    lastActive: accountInfo.lastUpdateTime || new Date().toLocaleString(),
+    messageCount: statistics.thirtyDayMsgCount || 0,
+    activeRate: 0, // 服务端未提供，默认为0
+    accountAge: {
+      years: accountAgeYears,
+      months: accountAgeMonths,
+    },
+    totalChats: statistics.sevenDayMsgCount + statistics.yesterdayMsgCount || 0,
+    chatFrequency: Math.floor((statistics.sevenDayMsgCount || 0) / 7), // 每日平均聊天次数
+    restrictionRecords,
+    isVerified: true, // 服务端未提供，默认为true
+    firstMomentDate: accountInfo.createTime || '',
+    accountWeight: accountInfo.weight || 50,
+    weightFactors: {
+      restrictionFactor: restrictionRecords.length > 0 ? 0.8 : 1.0,
+      verificationFactor: 1.0,
+      ageFactor: Math.min(1.0, accountAgeYears * 0.1 + 0.5),
+      activityFactor: statistics.totalFriend > 0 ? 0.9 : 0.7,
+    },
+    weeklyStats,
+    friends: transformedFriends,
+  };
+};
+
+/**
+ * 将服务端的限制类型映射为前端类型
+ * @param type 服务端限制类型
+ * @returns 前端限制类型
+ */
+const mapRestrictionType = (type: string): "friend_limit" | "marketing" | "spam" | "other" => {
+  const typeMap: Record<string, "friend_limit" | "marketing" | "spam" | "other"> = {
+    'friend': 'friend_limit',
+    'marketing': 'marketing',
+    'spam': 'spam'
+  };
+  
+  return typeMap[type] || 'other';
 }; 
\ No newline at end of file
diff --git a/Cunkebao/app/wechat-accounts/[id]/page.tsx b/Cunkebao/app/wechat-accounts/[id]/page.tsx
index e238b2e0..c113e604 100644
--- a/Cunkebao/app/wechat-accounts/[id]/page.tsx
+++ b/Cunkebao/app/wechat-accounts/[id]/page.tsx
@@ -18,6 +18,7 @@ import {
   Filter,
   Tag,
   ChevronRight,
+  Loader2,
 } from "lucide-react"
 import { Badge } from "@/components/ui/badge"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
@@ -42,6 +43,8 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "@/components/ui/pagination"
+import { toast } from "@/components/ui/use-toast"
+import { fetchWechatAccountDetail, transformWechatAccountDetail } from "@/api/wechat-accounts"
 
 interface RestrictionRecord {
   id: string
@@ -120,137 +123,42 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
   const [currentPage, setCurrentPage] = useState(1)
   const [activeTab, setActiveTab] = useState("overview")
   const friendsPerPage = 10
+  const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
     // 模拟API调用获取账号详情
     const fetchAccount = async () => {
-      // 生成随机标签
-      const generateRandomTags = (count: number) => {
-        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 }, () => {
-          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,
-          }
+      try {
+        setIsLoading(true)
+        
+        // 调用API获取微信账号详情
+        const response = await fetchWechatAccountDetail(params.id)
+        
+        if (response && response.code === 200) {
+          // 转换数据格式
+          const transformedAccount = transformWechatAccountDetail(response)
+          setAccount(transformedAccount)
+        } else {
+          toast({
+            title: "获取微信账号详情失败",
+            description: response?.msg || "请稍后再试",
+            variant: "destructive"
+          })
+          // 获取失败时使用模拟数据
+          setAccount(generateMockAccountData())
+        }
+      } catch (error) {
+        console.error("获取微信账号详情失败:", error)
+        toast({
+          title: "获取微信账号详情失败",
+          description: "请检查网络连接或稍后再试",
+          variant: "destructive"
         })
+        // 请求出错时使用模拟数据
+        setAccount(generateMockAccountData())
+      } finally {
+        setIsLoading(false)
       }
-
-      // 生成随机好友
-      const friendCount = Math.floor(Math.random() * (300 - 150)) + 150
-      const generateFriends = (count: number) => {
-        return Array.from({ length: count }, (_, i) => {
-          const firstName = ["张", "王", "李", "赵", "陈", "刘", "杨", "黄", "周", "吴"][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年内）
-          const addDate = new Date()
-          addDate.setDate(addDate.getDate() - Math.floor(Math.random() * 365))
-
-          // 生成随机的最后互动时间（过去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)
-                  ]
-                : "",
-          }
-        })
-      }
-
-      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",
-          },
-          {
-            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,
-        },
-        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,
-      }
-      setAccount(mockAccount)
     }
 
     fetchAccount()
@@ -328,439 +236,580 @@ export default function WechatAccountDetailPage({ params }: { params: { id: stri
   const totalPages = Math.ceil(filteredFriends.length / friendsPerPage)
   const paginatedFriends = filteredFriends.slice((currentPage - 1) * friendsPerPage, currentPage * friendsPerPage)
 
+  // 生成模拟账号数据（作为备用，服务器请求失败时使用）
+  const generateMockAccountData = () => {
+    // 生成随机标签
+    const generateRandomTags = (count: number) => {
+      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 }, () => {
+        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,
+        }
+      })
+    }
+
+    // 生成随机好友
+    const friendCount = Math.floor(Math.random() * (300 - 150)) + 150
+    const generateFriends = (count: number) => {
+      return Array.from({ length: count }, (_, i) => {
+        const firstName = ["张", "王", "李", "赵", "陈", "刘", "杨", "黄", "周", "吴"][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年内）
+        const addDate = new Date()
+        addDate.setDate(addDate.getDate() - Math.floor(Math.random() * 365))
+
+        // 生成随机的最后互动时间（过去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)
+                ]
+              : "",
+        }
+      })
+    }
+
+    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",
+        },
+        {
+          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,
+      },
+      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
+  }
+
   return (
     <TooltipProvider>
-      <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen pb-16">
-        <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 && (
-                  <Badge variant="success" 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">
-                  <h2 className="text-xl font-semibold">{account.nickname}</h2>
-                  <Badge variant={account.status === "normal" ? "success" : "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>
-              </div>
+      {isLoading ? (
+        <div className="flex justify-center items-center py-20">
+          <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">
+          <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>
-          </Card>
+          </header>
 
-          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-            <TabsList className="grid w-full grid-cols-2">
-              <TabsTrigger value="overview">账号概览</TabsTrigger>
-              <TabsTrigger value="friends">好友列表 ({account.friendCount})</TabsTrigger>
-            </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>
-
-              {/* 账号权重评估 */}
-              <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>账号年龄</span>
-                    <Progress value={account.weightFactors.ageFactor * 100} className="w-32" />
-                    <span>{(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>
-                  </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>
-                  </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>
-                  </div>
-                </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>
-                </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>
-                    <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>
-                    </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)}
-                        className="pl-9"
-                      />
-                    </div>
-                    <Button variant="outline" size="icon">
-                      <Filter className="h-4 w-4" />
-                    </Button>
-                  </div>
-
-                  {/* 好友列表 */}
-                  <div className="space-y-2">
-                    {paginatedFriends.length === 0 ? (
-                      <div className="text-center py-8 text-gray-500">未找到匹配的好友</div>
-                    ) : (
-                      paginatedFriends.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} />
-                            <AvatarFallback>{friend.nickname[0]}</AvatarFallback>
-                          </Avatar>
-                          <div className="flex-1 min-w-0">
-                            <div className="flex items-center justify-between">
-                              <div className="font-medium truncate">
-                                {friend.nickname}
-                                {friend.remark && <span className="text-gray-500 ml-1">({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) => (
-                                <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>
-                      ))
-                    )}
-                  </div>
-
-                  {/* 分页 */}
-                  {totalPages > 1 && (
-                    <Pagination>
-                      <PaginationContent>
-                        <PaginationItem>
-                          <PaginationPrevious
-                            href="#"
-                            onClick={(e) => {
-                              e.preventDefault()
-                              setCurrentPage((prev) => Math.max(1, prev - 1))
-                            }}
-                          />
-                        </PaginationItem>
-                        {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
-                          let pageNumber
-                          if (totalPages <= 5) {
-                            pageNumber = i + 1
-                          } else if (currentPage <= 3) {
-                            pageNumber = i + 1
-                          } else if (currentPage >= totalPages - 2) {
-                            pageNumber = totalPages - 4 + i
-                          } else {
-                            pageNumber = currentPage - 2 + i
-                          }
-                          return (
-                            <PaginationItem key={pageNumber}>
-                              <PaginationLink
-                                href="#"
-                                isActive={currentPage === pageNumber}
-                                onClick={(e) => {
-                                  e.preventDefault()
-                                  setCurrentPage(pageNumber)
-                                }}
-                              >
-                                {pageNumber}
-                              </PaginationLink>
-                            </PaginationItem>
-                          )
-                        })}
-                        <PaginationItem>
-                          <PaginationNext
-                            href="#"
-                            onClick={(e) => {
-                              e.preventDefault()
-                              setCurrentPage((prev) => Math.min(totalPages, prev + 1))
-                            }}
-                          />
-                        </PaginationItem>
-                      </PaginationContent>
-                    </Pagination>
-                  )}
-                </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>
-                    </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">
+          <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>
-                  <div>
-                    <div className="font-medium">{account.nickname}</div>
-                    <div className="text-sm text-gray-500">{account.wechatId}</div>
-                  </div>
+                  {account.isVerified && (
+                    <Badge variant="outline" className="absolute -top-2 -right-2 px-2 py-0.5 text-xs">
+                      已认证
+                    </Badge>
+                  )}
                 </div>
-                <div className="mt-4 text-sm text-gray-500">
-                  <p>• 将导出该账号下的所有好友信息</p>
-                  <p>• 好友信息将用于创建新的订单获客计划</p>
-                  <p>• 导出过程中请勿关闭页面</p>
+                <div className="flex-1">
+                  <div className="flex items-center space-x-2">
+                    <h2 className="text-xl font-semibold">{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>
                 </div>
               </div>
-              <DialogFooter>
-                <Button variant="outline" onClick={() => setShowTransferConfirm(false)}>
-                  取消
-                </Button>
-                <Button onClick={confirmTransferFriends}>确认转移</Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
+            </Card>
 
-          {/* 好友详情弹窗 */}
-          <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>
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+              <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="overview">账号概览</TabsTrigger>
+                <TabsTrigger value="friends">好友列表 ({account.friendCount})</TabsTrigger>
+              </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>
+
+                {/* 账号权重评估 */}
+                <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>账号年龄</span>
+                      <Progress value={account.weightFactors.ageFactor * 100} className="w-32" />
+                      <span>{(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>
+                    </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>
+                    </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>
+                    </div>
+                  </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>
+                  </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="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 className="flex justify-between text-sm mb-2">
+                        <span className="text-gray-500">添加进度</span>
+                        <span>
+                          {account.todayAdded}/{calculateMaxDailyAdds(account.accountWeight)}
+                        </span>
+                      </div>
+                      <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>
+                      </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)}
+                          className="pl-9"
+                        />
+                      </div>
+                      <Button variant="outline" size="icon">
+                        <Filter className="h-4 w-4" />
+                      </Button>
+                    </div>
+
+                    {/* 好友列表 */}
+                    <div className="space-y-2">
+                      {paginatedFriends.length === 0 ? (
+                        <div className="text-center py-8 text-gray-500">未找到匹配的好友</div>
+                      ) : (
+                        paginatedFriends.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} />
+                              <AvatarFallback>{friend.nickname[0]}</AvatarFallback>
+                            </Avatar>
+                            <div className="flex-1 min-w-0">
+                              <div className="flex items-center justify-between">
+                                <div className="font-medium truncate">
+                                  {friend.nickname}
+                                  {friend.remark && <span className="text-gray-500 ml-1">({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) => (
+                                  <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>
+                        ))
                       )}
                     </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>
+                    {/* 分页 */}
+                    {totalPages > 1 && (
+                      <Pagination>
+                        <PaginationContent>
+                          <PaginationItem>
+                            <PaginationPrevious
+                              href="#"
+                              onClick={(e) => {
+                                e.preventDefault()
+                                setCurrentPage((prev) => Math.max(1, prev - 1))
+                              }}
+                            />
+                          </PaginationItem>
+                          {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                            let pageNumber
+                            if (totalPages <= 5) {
+                              pageNumber = i + 1
+                            } else if (currentPage <= 3) {
+                              pageNumber = i + 1
+                            } else if (currentPage >= totalPages - 2) {
+                              pageNumber = totalPages - 4 + i
+                            } else {
+                              pageNumber = currentPage - 2 + i
+                            }
+                            return (
+                              <PaginationItem key={pageNumber}>
+                                <PaginationLink
+                                  href="#"
+                                  isActive={currentPage === pageNumber}
+                                  onClick={(e) => {
+                                    e.preventDefault()
+                                    setCurrentPage(pageNumber)
+                                  }}
+                                >
+                                  {pageNumber}
+                                </PaginationLink>
+                              </PaginationItem>
+                            )
+                          })}
+                          <PaginationItem>
+                            <PaginationNext
+                              href="#"
+                              onClick={(e) => {
+                                e.preventDefault()
+                                setCurrentPage((prev) => Math.min(totalPages, prev + 1))
+                              }}
+                            />
+                          </PaginationItem>
+                        </PaginationContent>
+                      </Pagination>
+                    )}
+                  </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>
+                      </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>
                   </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) => (
-                        <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 className="mt-4 text-sm text-gray-500">
+                    <p>• 将导出该账号下的所有好友信息</p>
+                    <p>• 好友信息将用于创建新的订单获客计划</p>
+                    <p>• 导出过程中请勿关闭页面</p>
                   </div>
                 </div>
-              )}
-            </DialogContent>
-          </Dialog>
+                <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) => (
+                          <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>
+      ) : (
+        <div className="flex justify-center items-center py-20">
+          <p className="text-gray-500">未找到账号信息</p>
+        </div>
+      )}
     </TooltipProvider>
   )
 }