From 0dbaa114aefbae81f50b595ef073d5c2d5d5849b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=B0=B8=E5=B9=B3?= <xuyongping@szwycity.cn>
Date: Sat, 5 Jul 2025 14:49:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BC=93=E5=AD=98=E4=B8=8B=E5=BE=AE?=
 =?UTF-8?q?=E4=BF=A1=20=E8=BF=99=E4=B8=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nkebao/src/api/wechat-accounts.ts             |   2 +-
 nkebao/src/pages/devices/DeviceDetail.tsx     |  16 +-
 nkebao/src/pages/devices/Devices.tsx          |   6 +-
 .../pages/wechat-accounts/WechatAccounts.tsx  | 385 +++++++++++++++++-
 4 files changed, 394 insertions(+), 15 deletions(-)

diff --git a/nkebao/src/api/wechat-accounts.ts b/nkebao/src/api/wechat-accounts.ts
index c5e62463..7527870f 100644
--- a/nkebao/src/api/wechat-accounts.ts
+++ b/nkebao/src/api/wechat-accounts.ts
@@ -141,7 +141,7 @@ export const transformWechatAccount = (serverAccount: any): any => {
     todayAdded,
     remainingAdds: serverAccount.canAddFriendCount || (maxDailyAdds - todayAdded),
     maxDailyAdds,
-    status: serverAccount.wechatAlive === 1 ? "normal" : "abnormal" as "normal" | "abnormal",
+    status: serverAccount.wechatStatus === 1 ? "normal" : "abnormal" as "normal" | "abnormal",
     lastActive: new Date().toLocaleString() // 服务端未提供，使用当前时间
   };
 };
diff --git a/nkebao/src/pages/devices/DeviceDetail.tsx b/nkebao/src/pages/devices/DeviceDetail.tsx
index 1911f9ff..75947165 100644
--- a/nkebao/src/pages/devices/DeviceDetail.tsx
+++ b/nkebao/src/pages/devices/DeviceDetail.tsx
@@ -656,15 +656,15 @@ export default function DeviceDetail() {
                     disabled={accountsLoading}
                   >
                     {accountsLoading ? (
-                      <>
+                      <React.Fragment key="loading">
                         <Loader2 className="h-4 w-4 animate-spin" />
                         刷新中
-                      </>
+                      </React.Fragment>
                     ) : (
-                      <>
+                      <React.Fragment key="refresh">
                         <RefreshCw className="h-4 w-4" />
                         刷新
-                      </>
+                      </React.Fragment>
                     )}
                   </button>
                 </div>
@@ -765,15 +765,15 @@ export default function DeviceDetail() {
                     disabled={logsLoading}
                   >
                     {logsLoading ? (
-                      <>
+                      <React.Fragment key="logs-loading">
                         <Loader2 className="h-4 w-4 animate-spin" />
                         加载中
-                      </>
+                      </React.Fragment>
                     ) : (
-                      <>
+                      <React.Fragment key="logs-refresh">
                         <RefreshCw className="h-4 w-4" />
                         刷新
-                      </>
+                      </React.Fragment>
                     )}
                   </button>
                 </div>
diff --git a/nkebao/src/pages/devices/Devices.tsx b/nkebao/src/pages/devices/Devices.tsx
index 32f65a74..bc0e18c8 100644
--- a/nkebao/src/pages/devices/Devices.tsx
+++ b/nkebao/src/pages/devices/Devices.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ChevronLeft, Plus, Filter, Search, RefreshCw, QrCode, Smartphone, Loader2, AlertTriangle, Trash2, X } from 'lucide-react';
+import { ChevronLeft, Plus, Search, RefreshCw, QrCode, Smartphone, Loader2, AlertTriangle, Trash2, X } from 'lucide-react';
 import { devicesApi } from '../../api';
 import { useToast } from '../../components/ui/toast';
 
@@ -425,9 +425,7 @@ export default function Devices() {
                   className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                 />
               </div>
-              <button className="p-2.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
-                <Filter className="h-4 w-4" />
-              </button>
+
               <button 
                 className="p-2.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
                 onClick={handleRefresh}
diff --git a/nkebao/src/pages/wechat-accounts/WechatAccounts.tsx b/nkebao/src/pages/wechat-accounts/WechatAccounts.tsx
index 99941353..9cee3265 100644
--- a/nkebao/src/pages/wechat-accounts/WechatAccounts.tsx
+++ b/nkebao/src/pages/wechat-accounts/WechatAccounts.tsx
@@ -1,5 +1,386 @@
-import React from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+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';
+
+interface WechatAccount {
+  id: string;
+  wechatId: string;
+  wechatAccount: string;
+  nickname: string;
+  avatar: string;
+  remainingAdds: number;
+  todayAdded: number;
+  status: "normal" | "abnormal";
+  friendCount: number;
+  deviceName: string;
+  lastActive: string;
+  maxDailyAdds: number;
+  deviceId: string;
+}
 
 export default function WechatAccounts() {
-  return <div>微信号列表页</div>;
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const [accounts, setAccounts] = useState<WechatAccount[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [isTransferDialogOpen, setIsTransferDialogOpen] = useState(false);
+  const [selectedAccount, setSelectedAccount] = useState<WechatAccount | null>(null);
+  const [totalAccounts, setTotalAccounts] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const accountsPerPage = 10;
+  const mounted = useRef(false);
+
+  // 获取微信账号列表
+  const fetchAccounts = useCallback(async (page: number = 1, keyword: string = "") => {
+    try {
+      setIsLoading(true);
+      const response = await fetchWechatAccountList({
+        page,
+        limit: accountsPerPage,
+        keyword,
+        sort: 'id',
+        order: 'desc'
+      });
+
+      if (response && response.code === 200 && response.data) {
+        // 转换数据格式
+        const wechatAccounts = response.data.list.map((item: any) => transformWechatAccount(item));
+        setAccounts(wechatAccounts);
+        setTotalAccounts(response.data.total);
+      } else {
+        toast({
+          title: "获取微信账号失败",
+          description: response?.message || "请稍后再试",
+          variant: "destructive"
+        });
+        setAccounts([]);
+        setTotalAccounts(0);
+      }
+    } catch (error) {
+      console.error("获取微信账号列表失败:", error);
+      toast({
+        title: "获取微信账号失败",
+        description: "请检查网络连接或稍后再试",
+        variant: "destructive"
+      });
+      setAccounts([]);
+      setTotalAccounts(0);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [accountsPerPage, toast]);
+
+  // 初始化数据加载
+  useEffect(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      fetchAccounts(currentPage, searchQuery);
+    }
+  }, []);
+
+  // 处理页码和搜索变化
+  useEffect(() => {
+    if (mounted.current) {
+      fetchAccounts(currentPage, searchQuery);
+    }
+  }, [currentPage, searchQuery, fetchAccounts]);
+
+  // 搜索处理
+  const handleSearch = () => {
+    setCurrentPage(1);
+  };
+
+  // 刷新处理
+  const handleRefresh = async () => {
+    try {
+      setIsRefreshing(true);
+      // 重新获取微信账号列表数据
+      await fetchAccounts(currentPage, searchQuery);
+      toast({
+        title: "刷新成功",
+        description: "微信账号列表已更新"
+      });
+    } catch (error) {
+      console.error("刷新微信账号状态失败:", error);
+      toast({
+        title: "刷新失败",
+        description: "请检查网络连接或稍后再试",
+        variant: "destructive"
+      });
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const filteredAccounts = accounts;
+  const totalPages = Math.ceil(totalAccounts / accountsPerPage);
+
+  const handleTransferFriends = (account: WechatAccount) => {
+    setSelectedAccount(account);
+    setIsTransferDialogOpen(true);
+  };
+
+  const handleConfirmTransfer = async () => {
+    if (!selectedAccount) return;
+
+    try {
+      // 实际实现好友转移功能，这里需要另一个账号作为目标
+      // 现在只是模拟效果
+      toast({
+        title: "好友转移计划已创建",
+        description: "请在场景获客中查看详情",
+      });
+      setIsTransferDialogOpen(false);
+      navigate("/scenarios");
+    } catch (error) {
+      console.error("好友转移失败:", error);
+      toast({
+        title: "好友转移失败",
+        description: "请稍后再试",
+        variant: "destructive"
+      });
+    }
+  };
+
+  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={() => navigate(-1)}
+          >
+            <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">
+          {/* 搜索和操作栏 */}
+          <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-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' && handleSearch()}
+                />
+              </div>
+
+              <button 
+                className="p-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+                onClick={handleRefresh}
+                disabled={isRefreshing}
+              >
+                {isRefreshing ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <RefreshCw className="h-4 w-4" />
+                )}
+              </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>
+          ) : accounts.length === 0 ? (
+            <div className="text-center py-20 text-gray-500">
+              <p>暂无微信账号数据</p>
+              <button 
+                className="mt-4 px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+                onClick={handleRefresh}
+                disabled={isRefreshing}
+              >
+                {isRefreshing ? (
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                ) : (
+                  <RefreshCw className="h-4 w-4 mr-2" />
+                )}
+                刷新
+              </button>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {accounts.map((account) => (
+                <div
+                  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({
+                      avatar: account.avatar,
+                      nickname: account.nickname,
+                      status: account.status,
+                      wechatId: account.wechatId,
+                      wechatAccount: account.wechatAccount,
+                      deviceName: account.deviceName,
+                      deviceId: account.deviceId,
+                    }));
+                    navigate(`/wechat-accounts/${account.id}?data=${accountData}`);
+                  }}
+                >
+                  <div className="flex items-start space-x-4">
+                    <div className="relative">
+                      <img
+                        src={account.avatar || "/placeholder.svg"}
+                        alt={account.nickname}
+                        className="w-12 h-12 rounded-full ring-2 ring-offset-2 ring-blue-500/20"
+                      />
+                      <div className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white ${
+                        account.status === "normal" ? "bg-green-500" : "bg-red-500"
+                      }`}></div>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-2">
+                          <h3 className="font-medium truncate max-w-[180px]">{account.nickname}</h3>
+                          <span className={`px-2 py-1 text-xs rounded-full ${
+                            account.status === "normal" 
+                              ? "bg-green-100 text-green-700" 
+                              : "bg-red-100 text-red-700"
+                          }`}>
+                            {account.status === "normal" ? "正常" : "异常"}
+                          </span>
+                        </div>
+                        <button
+                          className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleTransferFriends(account);
+                          }}
+                        >
+                          <ArrowRightLeft className="h-4 w-4" />
+                        </button>
+                      </div>
+                      <div className="mt-2 text-sm text-gray-500 space-y-1">
+                        <div className="truncate">微信号：{account.wechatAccount}</div>
+                        <div className="flex items-center justify-between flex-wrap gap-1">
+                          <div>好友数量：{account.friendCount}</div>
+                          <div className="text-green-600">今日新增：+{account.todayAdded}</div>
+                        </div>
+                        <div className="space-y-1">
+                          <div className="flex items-center justify-between text-sm">
+                            <div className="flex items-center space-x-1">
+                              <span>今日可添加：</span>
+                              <span className="font-medium">{account.remainingAdds}</span>
+                              <div className="relative group">
+                                <AlertCircle className="h-4 w-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">
+                                  每日最多添加 {account.maxDailyAdds} 个好友
+                                </div>
+                              </div>
+                            </div>
+                            <span className="text-sm text-gray-500">
+                              {account.todayAdded}/{account.maxDailyAdds}
+                            </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: `${(account.todayAdded / account.maxDailyAdds) * 100}%` }}
+                            ></div>
+                          </div>
+                        </div>
+                        <div className="flex items-center justify-between text-xs text-gray-500 pt-2 flex-wrap gap-1">
+                          <div className="truncate max-w-[150px]">所属设备：{account.deviceName || '未知设备'}</div>
+                          <div className="whitespace-nowrap">最后活跃：{account.lastActive}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* 分页 */}
+          {!isLoading && accounts.length > 0 && totalPages > 1 && (
+            <div className="mt-6 flex justify-center">
+              <div className="flex items-center space-x-2">
+                <button
+                  className="px-3 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
+                  disabled={currentPage === 1}
+                >
+                  上一页
+                </button>
+                <div className="flex items-center space-x-1">
+                  {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
+                    let pageToShow = i + 1;
+                    if (currentPage > 3 && totalPages > 5) {
+                      pageToShow = Math.min(currentPage - 2 + i, totalPages);
+                      if (pageToShow > totalPages - 4) {
+                        pageToShow = totalPages - 4 + i;
+                      }
+                    }
+                    return (
+                      <button
+                        key={pageToShow}
+                        className={`px-3 py-2 rounded-lg transition-colors ${
+                          currentPage === pageToShow
+                            ? "bg-blue-600 text-white"
+                            : "border border-gray-200 hover:bg-gray-50"
+                        }`}
+                        onClick={() => setCurrentPage(pageToShow)}
+                      >
+                        {pageToShow}
+                      </button>
+                    );
+                  })}
+                </div>
+                <button
+                  className="px-3 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
+                  disabled={currentPage === totalPages}
+                >
+                  下一页
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 好友转移确认对话框 */}
+      {isTransferDialogOpen && (
+        <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">
+              确认要将 {selectedAccount?.nickname} 的 {selectedAccount?.friendCount}{" "}
+              个好友转移到场景获客吗？系统将自动创建一个获客计划。
+            </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={() => setIsTransferDialogOpen(false)}
+              >
+                取消
+              </button>
+              <button
+                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                onClick={handleConfirmTransfer}
+              >
+                确认转移
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
 } 
\ No newline at end of file