feat：微信详情进度保存一下

nkebao/src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { AuthProvider } from './contexts/AuthContext';
+import { WechatAccountProvider } from './contexts/WechatAccountContext';
 import { ToastProvider } from './components/ui/toast';
 import ProtectedRoute from './components/ProtectedRoute';
 import LayoutWrapper from './components/LayoutWrapper';
@@ -38,37 +39,39 @@ function App() {
   return (
     <BrowserRouter>
       <AuthProvider>
-        <ToastProvider>
-          <ProtectedRoute>
-            <LayoutWrapper>
-              <Routes>
-                <Route path="/" element={<Home />} />
-                <Route path="/login" element={<Login />} />
-                <Route path="/devices" element={<Devices />} />
-                <Route path="/devices/:id" element={<DeviceDetail />} />
-                <Route path="/wechat-accounts" element={<WechatAccounts />} />
-                <Route path="/wechat-accounts/:id" element={<WechatAccountDetail />} />
-                <Route path="/workspace" element={<Workspace />} />
-                <Route path="/workspace/auto-group/:id" element={<AutoGroupDetail />} />
-                <Route path="/workspace/moments-sync" element={<MomentsSync />} />
-                <Route path="/workspace/moments-sync/:id" element={<MomentsSyncDetail />} />
-                <Route path="/workspace/traffic-distribution" element={<TrafficDistribution />} />
-                <Route path="/workspace/traffic-distribution/:id" element={<TrafficDistributionDetail />} />
-                <Route path="/scenarios" element={<Scenarios />} />
-                <Route path="/scenarios/new" element={<NewPlan />} />
-                <Route path="/scenarios/:scenarioId" element={<ScenarioDetail />} />
-                <Route path="/profile" element={<Profile />} />
-                <Route path="/plans" element={<Plans />} />
-                <Route path="/plans/:planId" element={<PlanDetail />} />
-                <Route path="/orders" element={<Orders />} />
-                <Route path="/traffic-pool" element={<TrafficPool />} />
-                <Route path="/contact-import" element={<ContactImport />} />
-                <Route path="/content" element={<Content />} />
-                {/* 你可以继续添加更多路由 */}
-              </Routes>
-            </LayoutWrapper>
-          </ProtectedRoute>
-        </ToastProvider>
+        <WechatAccountProvider>
+          <ToastProvider>
+            <ProtectedRoute>
+              <LayoutWrapper>
+                <Routes>
+                  <Route path="/" element={<Home />} />
+                  <Route path="/login" element={<Login />} />
+                  <Route path="/devices" element={<Devices />} />
+                  <Route path="/devices/:id" element={<DeviceDetail />} />
+                  <Route path="/wechat-accounts" element={<WechatAccounts />} />
+                  <Route path="/wechat-accounts/:id" element={<WechatAccountDetail />} />
+                  <Route path="/workspace" element={<Workspace />} />
+                  <Route path="/workspace/auto-group/:id" element={<AutoGroupDetail />} />
+                  <Route path="/workspace/moments-sync" element={<MomentsSync />} />
+                  <Route path="/workspace/moments-sync/:id" element={<MomentsSyncDetail />} />
+                  <Route path="/workspace/traffic-distribution" element={<TrafficDistribution />} />
+                  <Route path="/workspace/traffic-distribution/:id" element={<TrafficDistributionDetail />} />
+                  <Route path="/scenarios" element={<Scenarios />} />
+                  <Route path="/scenarios/new" element={<NewPlan />} />
+                  <Route path="/scenarios/:scenarioId" element={<ScenarioDetail />} />
+                  <Route path="/profile" element={<Profile />} />
+                  <Route path="/plans" element={<Plans />} />
+                  <Route path="/plans/:planId" element={<PlanDetail />} />
+                  <Route path="/orders" element={<Orders />} />
+                  <Route path="/traffic-pool" element={<TrafficPool />} />
+                  <Route path="/contact-import" element={<ContactImport />} />
+                  <Route path="/content" element={<Content />} />
+                  {/* 你可以继续添加更多路由 */}
+                </Routes>
+              </LayoutWrapper>
+            </ProtectedRoute>
+          </ToastProvider>
+        </WechatAccountProvider>
       </AuthProvider>
     </BrowserRouter>
   );

nkebao/src/contexts/WechatAccountContext.tsx

@@ -0,0 +1,54 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+export interface WechatAccountData {
+  id: string;
+  avatar: string;
+  nickname: string;
+  status: "normal" | "abnormal";
+  wechatId: string;
+  wechatAccount: string;
+  deviceName: string;
+  deviceId: string;
+}
+
+interface WechatAccountContextType {
+  currentAccount: WechatAccountData | null;
+  setCurrentAccount: (account: WechatAccountData) => void;
+  clearCurrentAccount: () => void;
+}
+
+const WechatAccountContext = createContext<WechatAccountContextType>({
+  currentAccount: null,
+  setCurrentAccount: () => {},
+  clearCurrentAccount: () => {},
+});
+
+export const useWechatAccount = () => useContext(WechatAccountContext);
+
+interface WechatAccountProviderProps {
+  children: ReactNode;
+}
+
+export function WechatAccountProvider({ children }: WechatAccountProviderProps) {
+  const [currentAccount, setCurrentAccountState] = useState<WechatAccountData | null>(null);
+
+  const setCurrentAccount = (account: WechatAccountData) => {
+    setCurrentAccountState(account);
+  };
+
+  const clearCurrentAccount = () => {
+    setCurrentAccountState(null);
+  };
+
+  return (
+    <WechatAccountContext.Provider
+      value={{
+        currentAccount,
+        setCurrentAccount,
+        clearCurrentAccount,
+      }}
+    >
+      {children}
+    </WechatAccountContext.Provider>
+  );
+} 

nkebao/src/pages/wechat-accounts/WechatAccountDetail.tsx

@@ -1,7 +1,789 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { 
+  ChevronLeft, 
+  Smartphone, 
+  Users, 
+  Star, 
+  Clock, 
+  MessageSquare, 
+  Shield, 
+  Info, 
+  UserPlus, 
+  Search, 
+  Tag, 
+  ChevronRight, 
+  Loader2,
+  AlertCircle,
+  ArrowRightLeft
+} from 'lucide-react';
+import { useWechatAccount } from '../../contexts/WechatAccountContext';
+import { fetchWechatAccountSummary, fetchWechatFriends, fetchWechatFriendDetail } from '../../api/wechat-accounts';
+import { useToast } from '../../components/ui/toast';
+
+interface WechatAccountSummary {
+  accountAge: string;
+  activityLevel: {
+    allTimes: number;
+    dayTimes: number;
+  };
+  accountWeight: {
+    scope: number;
+    ageWeight: number;
+    activityWeigth: number;
+    restrictWeight: number;
+    realNameWeight: number;
+  };
+  statistics: {
+    todayAdded: number;
+    addLimit: number;
+  };
+  restrictions: {
+    id: number;
+    level: string;
+    reason: string;
+    date: string;
+  }[];
+}
+
+interface Friend {
+  id: string;
+  avatar: string;
+  nickname: string;
+  wechatId: string;
+  remark: string;
+  addTime: string;
+  lastInteraction: string;
+  tags: Array<{
+    id: string;
+    name: string;
+    color: string;
+  }>;
+  region: string;
+  source: string;
+  notes: string;
+}
+
+interface WechatFriendDetail {
+  id: number;
+  avatar: string;
+  nickname: string;
+  region: string;
+  wechatId: string;
+  addDate: string;
+  tags: string[];
+  memo: string;
+  source: string;
+}
 
 export default function WechatAccountDetail() {
-  const { id } = useParams();
-  return <div>微信号详情页，当前ID: {id}</div>;
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const { currentAccount, clearCurrentAccount } = useWechatAccount();
+  
+  const [accountSummary, setAccountSummary] = useState<WechatAccountSummary | null>(null);
+  const [showRestrictions, setShowRestrictions] = useState(false);
+  const [showTransferConfirm, setShowTransferConfirm] = useState(false);
+  const [showFriendDetail, setShowFriendDetail] = useState(false);
+  const [selectedFriend, setSelectedFriend] = useState<Friend | null>(null);
+  const [friendDetail, setFriendDetail] = useState<WechatFriendDetail | null>(null);
+  const [isLoadingFriendDetail, setIsLoadingFriendDetail] = useState(false);
+  const [friendDetailError, setFriendDetailError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeTab, setActiveTab] = useState("overview");
+  const [isLoading, setIsLoading] = useState(false);
+
+  // 好友列表相关状态
+  const [friends, setFriends] = useState<Friend[]>([]);
+  const [friendsPage, setFriendsPage] = useState(1);
+  const [friendsTotal, setFriendsTotal] = useState(0);
+  const [hasMoreFriends, setHasMoreFriends] = useState(true);
+  const [isFetchingFriends, setIsFetchingFriends] = useState(false);
+  const friendsObserver = useRef<IntersectionObserver | null>(null);
+  const friendsLoadingRef = useRef<HTMLDivElement | null>(null);
+
+  // 如果没有账号数据，返回上一页
+  useEffect(() => {
+    if (!currentAccount) {
+      toast({
+        title: "数据错误",
+        description: "未找到账号信息，请重新选择",
+        variant: "destructive"
+      });
+      navigate('/wechat-accounts');
+      return;
+    }
+  }, [currentAccount, navigate, toast]);
+
+  // 获取账号概览信息
+  const fetchAccountSummary = useCallback(async () => {
+    if (!id) return;
+    
+    try {
+      setIsLoading(true);
+      const response = await fetchWechatAccountSummary(id);
+      
+      if (response && response.code === 200 && response.data) {
+        setAccountSummary(response.data);
+      } else {
+        toast({
+          title: "获取账号概览失败",
+          description: response?.message || "请稍后重试",
+          variant: "destructive"
+        });
+      }
+    } catch (error) {
+      console.error("获取账号概览失败:", error);
+      toast({
+        title: "获取账号概览失败",
+        description: "请检查网络连接后重试",
+        variant: "destructive"
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [id, toast]);
+
+  // 获取好友列表
+  const fetchFriends = useCallback(async (page: number = 1, isNewSearch: boolean = false) => {
+    if (!id || isFetchingFriends) return;
+    
+    try {
+      setIsFetchingFriends(true);
+      const response = await fetchWechatFriends(id, page, 20, searchQuery);
+      
+      if (response && response.code === 200 && response.data) {
+        const newFriends = response.data.list.map((friend: any) => ({
+          id: friend.id.toString(),
+          avatar: friend.avatar || "/placeholder.svg",
+          nickname: friend.nickname || "未知用户",
+          wechatId: friend.wechatId || "",
+          remark: friend.memo || "",
+          addTime: friend.createTime || new Date().toISOString().split('T')[0],
+          lastInteraction: friend.lastInteraction || new Date().toISOString().split('T')[0],
+          tags: friend.tags ? friend.tags.map((tag: string, index: number) => ({
+            id: `tag-${index}`,
+            name: tag,
+            color: getRandomTagColor()
+          })) : [],
+          region: friend.region || "未知",
+          source: friend.source || "未知",
+          notes: friend.notes || ""
+        }));
+
+        if (isNewSearch) {
+          setFriends(newFriends);
+        } else {
+          setFriends(prev => [...prev, ...newFriends]);
+        }
+        
+        setFriendsTotal(response.data.total);
+        setHasMoreFriends(newFriends.length === 20);
+        setFriendsPage(page);
+      } else {
+        toast({
+          title: "获取好友列表失败",
+          description: response?.message || "请稍后重试",
+          variant: "destructive"
+        });
+      }
+    } catch (error) {
+      console.error("获取好友列表失败:", error);
+      toast({
+        title: "获取好友列表失败",
+        description: "请检查网络连接后重试",
+        variant: "destructive"
+      });
+    } finally {
+      setIsFetchingFriends(false);
+    }
+  }, [id, searchQuery, isFetchingFriends, toast]);
+
+  // 初始化数据
+  useEffect(() => {
+    if (id) {
+      fetchAccountSummary();
+      if (activeTab === "friends") {
+        fetchFriends(1, true);
+      }
+    }
+  }, [id, fetchAccountSummary]);
+
+  // 监听标签切换
+  useEffect(() => {
+    if (activeTab === "friends" && id) {
+      fetchFriends(1, true);
+    }
+  }, [activeTab, id, fetchFriends]);
+
+  // 无限滚动加载好友
+  useEffect(() => {
+    if (!friendsLoadingRef.current || !hasMoreFriends || isFetchingFriends) return;
+
+    friendsObserver.current = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMoreFriends && !isFetchingFriends) {
+          fetchFriends(friendsPage + 1, false);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    friendsObserver.current.observe(friendsLoadingRef.current);
+
+    return () => {
+      if (friendsObserver.current) {
+        friendsObserver.current.disconnect();
+      }
+    };
+  }, [hasMoreFriends, isFetchingFriends, friendsPage, fetchFriends]);
+
+  // 工具函数
+  const getRandomTagColor = (): string => {
+    const colors = [
+      "bg-blue-100 text-blue-800",
+      "bg-green-100 text-green-800",
+      "bg-red-100 text-red-800",
+      "bg-pink-100 text-pink-800",
+      "bg-emerald-100 text-emerald-800",
+      "bg-amber-100 text-amber-800",
+    ];
+    return colors[Math.floor(Math.random() * colors.length)];
+  };
+
+  const calculateAccountAge = (registerTime: string) => {
+    const registerDate = new Date(registerTime);
+    const now = new Date();
+    const diffTime = Math.abs(now.getTime() - registerDate.getTime());
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    const years = Math.floor(diffDays / 365);
+    const months = Math.floor((diffDays % 365) / 30);
+    return { years, months };
+  };
+
+  const formatAccountAge = (age: { years: number; months: number }) => {
+    if (age.years > 0) {
+      return `${age.years}年${age.months}个月`;
+    }
+    return `${age.months}个月`;
+  };
+
+  const getWeightColor = (weight: number) => {
+    if (weight >= 80) return "text-green-600";
+    if (weight >= 60) return "text-yellow-600";
+    return "text-red-600";
+  };
+
+  const getWeightDescription = (weight: number) => {
+    if (weight >= 80) return "账号质量优秀，可以正常使用";
+    if (weight >= 60) return "账号质量良好，需要注意使用频率";
+    return "账号质量较差，建议谨慎使用";
+  };
+
+  const handleTransferFriends = () => {
+    setShowTransferConfirm(true);
+  };
+
+  const confirmTransferFriends = () => {
+    toast({
+      title: "好友转移计划已创建",
+      description: "请在场景获客中查看详情",
+    });
+    setShowTransferConfirm(false);
+    navigate("/scenarios");
+  };
+
+  const handleBack = () => {
+    clearCurrentAccount();
+    navigate('/wechat-accounts');
+  };
+
+  const handleFriendClick = async (friend: Friend) => {
+    setSelectedFriend(friend);
+    setShowFriendDetail(true);
+    setIsLoadingFriendDetail(true);
+    setFriendDetailError(null);
+
+    try {
+      const response = await fetchWechatFriendDetail(friend.id);
+      if (response && response.code === 200 && response.data) {
+        setFriendDetail(response.data);
+      } else {
+        setFriendDetailError(response?.message || "获取好友详情失败");
+      }
+    } catch (error) {
+      console.error("获取好友详情失败:", error);
+      setFriendDetailError("网络错误，请稍后重试");
+    } finally {
+      setIsLoadingFriendDetail(false);
+    }
+  };
+
+  const getRestrictionLevelColor = (level: string) => {
+    switch (level) {
+      case "high":
+        return "bg-red-100 text-red-700";
+      case "medium":
+        return "bg-yellow-100 text-yellow-700";
+      default:
+        return "bg-gray-100 text-gray-700";
+    }
+  };
+
+  if (!currentAccount) {
+    return (
+      <div className="flex justify-center items-center py-20">
+        <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* 固定header */}
+      <header className="fixed top-0 left-0 right-0 z-20 bg-white border-b border-gray-200">
+        <div className="flex items-center px-4 py-3">
+          <button 
+            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+            onClick={handleBack}
+          >
+            <ChevronLeft className="h-5 w-5" />
+          </button>
+          <h1 className="ml-2 text-lg font-semibold">账号详情</h1>
+        </div>
+      </header>
+
+      {/* 内容区域 */}
+      <div className="pt-16 pb-20">
+        <div className="p-4 space-y-4">
+          {/* 账号基本信息卡片 */}
+          <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+            <div className="flex items-center space-x-4">
+              <div className="relative">
+                <img
+                  src={currentAccount.avatar || "/placeholder.svg"}
+                  alt={currentAccount.nickname}
+                  className="w-16 h-16 rounded-full ring-4 ring-offset-2 ring-blue-500/20"
+                />
+                <div className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white ${
+                  currentAccount.status === "normal" ? "bg-green-500" : "bg-red-500"
+                }`}></div>
+              </div>
+              <div className="flex-1">
+                <div className="flex items-center space-x-2">
+                  <h2 className="text-xl font-semibold truncate max-w-[200px]">{currentAccount.nickname}</h2>
+                  <span className={`px-2 py-1 text-xs rounded-full ${
+                    currentAccount.status === "normal" 
+                      ? "bg-green-100 text-green-700" 
+                      : "bg-red-100 text-red-700"
+                  }`}>
+                    {currentAccount.status === "normal" ? "正常" : "异常"}
+                  </span>
+                </div>
+                <p className="text-sm text-gray-500 mt-1">微信号：{currentAccount.wechatAccount}</p>
+                <div className="flex gap-2 mt-2">
+                  <button 
+                    className="px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-sm flex items-center"
+                    onClick={() => navigate(`/devices/${currentAccount.deviceId}`)}
+                  >
+                    <Smartphone className="w-4 h-4 mr-1" />
+                    {currentAccount.deviceName || '未命名设备'}
+                  </button>
+                  <button 
+                    className="px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-sm flex items-center"
+                    onClick={handleTransferFriends}
+                  >
+                    <UserPlus className="w-4 h-4 mr-1" />
+                    好友转移
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 标签页 */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-100">
+            <div className="flex border-b border-gray-200">
+              <button
+                className={`flex-1 py-3 px-4 text-sm font-medium transition-colors ${
+                  activeTab === "overview" 
+                    ? "text-blue-600 border-b-2 border-blue-600" 
+                    : "text-gray-500 hover:text-gray-700"
+                }`}
+                onClick={() => setActiveTab("overview")}
+              >
+                账号概览
+              </button>
+              <button
+                className={`flex-1 py-3 px-4 text-sm font-medium transition-colors ${
+                  activeTab === "friends" 
+                    ? "text-blue-600 border-b-2 border-blue-600" 
+                    : "text-gray-500 hover:text-gray-700"
+                }`}
+                onClick={() => setActiveTab("friends")}
+              >
+                好友列表{activeTab === "friends" && friendsTotal > 0 ? ` (${friendsTotal.toLocaleString()})` : ''}
+              </button>
+            </div>
+
+            <div className="p-4">
+              {activeTab === "overview" ? (
+                <div className="space-y-4">
+                  {/* 账号基础信息 */}
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="bg-gray-50 p-4 rounded-lg">
+                      <div className="flex items-center space-x-2 text-gray-500 mb-2">
+                        <Clock className="w-4 h-4" />
+                        <span className="text-sm">账号年龄</span>
+                      </div>
+                      {accountSummary && (
+                        <>
+                          <div className="text-2xl font-bold text-blue-600">
+                            {formatAccountAge(calculateAccountAge(accountSummary.accountAge))}
+                          </div>
+                          <div className="text-sm text-gray-500 mt-1">
+                            注册时间：{new Date(accountSummary.accountAge).toLocaleDateString()}
+                          </div>
+                        </>
+                      )}
+                    </div>
+
+                    <div className="bg-gray-50 p-4 rounded-lg">
+                      <div className="flex items-center space-x-2 text-gray-500 mb-2">
+                        <MessageSquare className="w-4 h-4" />
+                        <span className="text-sm">活跃程度</span>
+                      </div>
+                      {accountSummary && (
+                        <>
+                          <div className="text-2xl font-bold text-blue-600">{accountSummary.activityLevel.dayTimes.toLocaleString()}次/天</div>
+                          <div className="text-sm text-gray-500 mt-1">总聊天数：{accountSummary.activityLevel.allTimes.toLocaleString()}</div>
+                        </>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* 账号权重评估 */}
+                  {accountSummary && (
+                    <div className="bg-gray-50 p-4 rounded-lg">
+                      <div className="flex items-center justify-between mb-4">
+                        <div className="flex items-center space-x-2">
+                          <Star className="w-4 h-4 text-yellow-500" />
+                          <span className="font-medium">账号权重评估</span>
+                        </div>
+                        <div className={`flex items-center space-x-2 ${getWeightColor(accountSummary.accountWeight.scope)}`}>
+                          <span className="text-2xl font-bold">{accountSummary.accountWeight.scope}</span>
+                          <span className="text-sm">分</span>
+                        </div>
+                      </div>
+                      <p className="text-sm text-gray-500 mb-4">{getWeightDescription(accountSummary.accountWeight.scope)}</p>
+                      <div className="space-y-3">
+                        <div className="flex items-center">
+                          <span className="flex-shrink-0 w-16 text-sm">账号年龄</span>
+                          <div className="flex-1 mx-4 bg-gray-200 rounded-full h-2">
+                            <div 
+                              className="bg-blue-600 h-2 rounded-full transition-all" 
+                              style={{ width: `${accountSummary.accountWeight.ageWeight}%` }}
+                            ></div>
+                          </div>
+                          <span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.ageWeight}%</span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="flex-shrink-0 w-16 text-sm">活跃度</span>
+                          <div className="flex-1 mx-4 bg-gray-200 rounded-full h-2">
+                            <div 
+                              className="bg-blue-600 h-2 rounded-full transition-all" 
+                              style={{ width: `${accountSummary.accountWeight.activityWeigth}%` }}
+                            ></div>
+                          </div>
+                          <span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.activityWeigth}%</span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="flex-shrink-0 w-16 text-sm">限制影响</span>
+                          <div className="flex-1 mx-4 bg-gray-200 rounded-full h-2">
+                            <div 
+                              className="bg-blue-600 h-2 rounded-full transition-all" 
+                              style={{ width: `${accountSummary.accountWeight.restrictWeight}%` }}
+                            ></div>
+                          </div>
+                          <span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.restrictWeight}%</span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="flex-shrink-0 w-16 text-sm">实名认证</span>
+                          <div className="flex-1 mx-4 bg-gray-200 rounded-full h-2">
+                            <div 
+                              className="bg-blue-600 h-2 rounded-full transition-all" 
+                              style={{ width: `${accountSummary.accountWeight.realNameWeight}%` }}
+                            ></div>
+                          </div>
+                          <span className="flex-shrink-0 w-12 text-sm text-right">{accountSummary.accountWeight.realNameWeight}%</span>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* 添加好友统计 */}
+                  {accountSummary && (
+                    <div className="bg-gray-50 p-4 rounded-lg">
+                      <div className="flex items-center justify-between mb-4">
+                        <div className="flex items-center space-x-2">
+                          <Users className="w-4 h-4 text-blue-500" />
+                          <span className="font-medium">添加好友统计</span>
+                        </div>
+                        <div className="relative group">
+                          <Info className="w-4 h-4 text-gray-400" />
+                          <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs bg-gray-800 text-white rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
+                            根据账号权重计算每日可添加好友数量
+                          </div>
+                        </div>
+                      </div>
+                      <div className="space-y-4">
+                        <div className="flex items-center justify-between">
+                          <span className="text-sm text-gray-500">今日已添加</span>
+                          <span className="text-xl font-bold text-blue-600">{accountSummary.statistics.todayAdded}</span>
+                        </div>
+                        <div>
+                          <div className="flex justify-between text-sm mb-2">
+                            <span className="text-gray-500">添加进度</span>
+                            <span>
+                              {accountSummary.statistics.todayAdded}/{accountSummary.statistics.addLimit}
+                            </span>
+                          </div>
+                          <div className="w-full bg-gray-200 rounded-full h-2">
+                            <div 
+                              className="bg-blue-600 h-2 rounded-full transition-all" 
+                              style={{ width: `${(accountSummary.statistics.todayAdded / accountSummary.statistics.addLimit) * 100}%` }}
+                            ></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* 限制记录 */}
+                  {accountSummary && accountSummary.restrictions.length > 0 && (
+                    <div className="bg-gray-50 p-4 rounded-lg">
+                      <div className="flex items-center space-x-2 mb-4">
+                        <Shield className="w-4 h-4 text-red-500" />
+                        <span className="font-medium">限制记录</span>
+                      </div>
+                      <div className="space-y-2">
+                        {accountSummary.restrictions.map((restriction) => (
+                          <div key={restriction.id} className="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200">
+                            <div className="flex-1">
+                              <div className="flex items-center space-x-2">
+                                <span className="text-sm font-medium">{restriction.reason}</span>
+                                <span className={`px-2 py-0.5 text-xs rounded-full ${getRestrictionLevelColor(restriction.level)}`}>
+                                  {restriction.level === "high" ? "严重" : 
+                                   restriction.level === "medium" ? "中等" : "轻微"}
+                                </span>
+                              </div>
+                              <div className="text-xs text-gray-500 mt-1">{restriction.date}</div>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  {/* 搜索栏 */}
+                  <div className="flex items-center space-x-3">
+                    <div className="relative flex-1">
+                      <Search className="w-4 h-4 absolute left-3 top-3 text-gray-400" />
+                      <input
+                        className="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        placeholder="搜索好友昵称/备注"
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        onKeyPress={(e) => e.key === 'Enter' && fetchFriends(1, true)}
+                      />
+                    </div>
+                    <button 
+                      className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+                      onClick={() => fetchFriends(1, true)}
+                    >
+                      搜索
+                    </button>
+                  </div>
+
+                  {/* 好友列表 */}
+                  <div className="space-y-3">
+                    {friends.map((friend) => (
+                      <div
+                        key={friend.id}
+                        className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
+                        onClick={() => handleFriendClick(friend)}
+                      >
+                        <img
+                          src={friend.avatar}
+                          alt={friend.nickname}
+                          className="w-10 h-10 rounded-full"
+                        />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center space-x-2">
+                            <h4 className="font-medium truncate">{friend.nickname}</h4>
+                            {friend.tags.length > 0 && (
+                              <div className="flex space-x-1">
+                                {friend.tags.slice(0, 2).map((tag) => (
+                                  <span
+                                    key={tag.id}
+                                    className={`px-2 py-0.5 text-xs rounded-full ${tag.color}`}
+                                  >
+                                    {tag.name}
+                                  </span>
+                                ))}
+                                {friend.tags.length > 2 && (
+                                  <span className="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600">
+                                    +{friend.tags.length - 2}
+                                  </span>
+                                )}
+                              </div>
+                            )}
+                          </div>
+                          <div className="text-sm text-gray-500 space-y-1">
+                            <div className="truncate">备注：{friend.remark || "无"}</div>
+                            <div className="flex items-center justify-between text-xs">
+                              <span>地区：{friend.region}</span>
+                              <span>来源：{friend.source}</span>
+                            </div>
+                          </div>
+                        </div>
+                        <ChevronRight className="w-4 h-4 text-gray-400" />
+                      </div>
+                    ))}
+
+                    {/* 加载更多 */}
+                    {hasMoreFriends && (
+                      <div ref={friendsLoadingRef} className="py-4 flex items-center justify-center">
+                        {isFetchingFriends && <Loader2 className="h-6 w-6 animate-spin text-blue-500" />}
+                      </div>
+                    )}
+
+                    {!hasMoreFriends && friends.length > 0 && (
+                      <div className="text-center py-4 text-sm text-gray-500">
+                        没有更多好友了
+                      </div>
+                    )}
+
+                    {friends.length === 0 && !isFetchingFriends && (
+                      <div className="text-center py-8 text-gray-500">
+                        <Users className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                        <p>暂无好友数据</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 好友转移确认对话框 */}
+      {showTransferConfirm && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl p-6 max-w-md w-full">
+            <h3 className="text-lg font-semibold mb-4">好友转移确认</h3>
+            <p className="text-sm text-gray-500 mb-6">
+              确认要将 {currentAccount.nickname} 的好友转移到场景获客吗？系统将自动创建一个获客计划。
+            </p>
+            <div className="flex space-x-3">
+              <button
+                className="flex-1 px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+                onClick={() => setShowTransferConfirm(false)}
+              >
+                取消
+              </button>
+              <button
+                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                onClick={confirmTransferFriends}
+              >
+                确认转移
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 好友详情对话框 */}
+      {showFriendDetail && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl p-6 max-w-md w-full max-h-[80vh] overflow-y-auto">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold">好友详情</h3>
+              <button
+                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                onClick={() => setShowFriendDetail(false)}
+              >
+                <ChevronLeft className="h-5 w-5" />
+              </button>
+            </div>
+            
+            {isLoadingFriendDetail ? (
+              <div className="flex justify-center items-center py-8">
+                <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
+              </div>
+            ) : friendDetailError ? (
+              <div className="text-center py-8 text-red-500">
+                <AlertCircle className="h-8 w-8 mx-auto mb-2" />
+                <p>{friendDetailError}</p>
+              </div>
+            ) : friendDetail && selectedFriend ? (
+              <div className="space-y-4">
+                <div className="flex items-center space-x-3">
+                  <img
+                    src={selectedFriend.avatar}
+                    alt={selectedFriend.nickname}
+                    className="w-12 h-12 rounded-full"
+                  />
+                  <div>
+                    <h4 className="font-medium">{selectedFriend.nickname}</h4>
+                    <p className="text-sm text-gray-500">微信号：{selectedFriend.wechatId}</p>
+                  </div>
+                </div>
+                
+                <div className="space-y-3">
+                  <div className="flex justify-between">
+                    <span className="text-sm text-gray-500">地区</span>
+                    <span className="text-sm">{friendDetail.region || "未知"}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-gray-500">添加时间</span>
+                    <span className="text-sm">{friendDetail.addDate}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-gray-500">来源</span>
+                    <span className="text-sm">{friendDetail.source || "未知"}</span>
+                  </div>
+                  {friendDetail.memo && (
+                    <div className="flex justify-between">
+                      <span className="text-sm text-gray-500">备注</span>
+                      <span className="text-sm">{friendDetail.memo}</span>
+                    </div>
+                  )}
+                  {friendDetail.tags && friendDetail.tags.length > 0 && (
+                    <div>
+                      <span className="text-sm text-gray-500 block mb-2">标签</span>
+                      <div className="flex flex-wrap gap-1">
+                        {friendDetail.tags.map((tag, index) => (
+                          <span
+                            key={index}
+                            className="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800"
+                          >
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      )}
+    </div>
+  );
 } 

nkebao/src/pages/wechat-accounts/WechatAccounts.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { ChevronLeft, Search, RefreshCw, ArrowRightLeft, AlertCircle, Loader2 } from 'lucide-react';
 import { fetchWechatAccountList, transformWechatAccount } from '../../api/wechat-accounts';
 import { useToast } from '../../components/ui/toast';
+import { useWechatAccount } from '../../contexts/WechatAccountContext';
 
 interface WechatAccount {
   id: string;
@@ -23,6 +24,7 @@ interface WechatAccount {
 export default function WechatAccounts() {
   const navigate = useNavigate();
   const { toast } = useToast();
+  const { setCurrentAccount } = useWechatAccount();
   const [accounts, setAccounts] = useState<WechatAccount[]>([]);
   const [searchQuery, setSearchQuery] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
@@ -220,8 +222,9 @@ export default function WechatAccounts() {
                   key={account.id}
                   className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 hover:shadow-lg transition-all cursor-pointer"
                   onClick={() => {
-                    // 将需要的数据编码为 URL 安全的字符串
-                    const accountData = encodeURIComponent(JSON.stringify({
+                    // 使用Context存储数据，而不是URL参数
+                    setCurrentAccount({
+                      id: account.id,
                       avatar: account.avatar,
                       nickname: account.nickname,
                       status: account.status,
@@ -229,8 +232,8 @@ export default function WechatAccounts() {
                       wechatAccount: account.wechatAccount,
                       deviceName: account.deviceName,
                       deviceId: account.deviceId,
-                    }));
-                    navigate(`/wechat-accounts/${account.id}?data=${accountData}`);
+                    });
+                    navigate(`/wechat-accounts/${account.id}`);
                   }}
                 >
                   <div className="flex items-start space-x-4">