383 lines
15 KiB
TypeScript
383 lines
15 KiB
TypeScript
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { Search, RefreshCw, Loader2 } from 'lucide-react';
|
||
import { fetchWechatAccountList, transformWechatAccount } from '@/api/wechat-accounts';
|
||
import { useToast } from '@/components/ui/toast';
|
||
import { useWechatAccount } from '@/contexts/WechatAccountContext';
|
||
import PageHeader from '@/components/PageHeader';
|
||
import Layout from '@/components/Layout';
|
||
import '@/components/Layout.css';
|
||
|
||
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() {
|
||
const navigate = useNavigate();
|
||
const { toast } = useToast();
|
||
const { setCurrentAccount } = useWechatAccount();
|
||
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 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 (
|
||
<Layout
|
||
header={
|
||
<PageHeader
|
||
title="微信号"
|
||
defaultBackPath="/"
|
||
/>
|
||
}
|
||
>
|
||
<div className="bg-gray-50">
|
||
<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={() => {
|
||
// 使用Context存储数据，而不是URL参数
|
||
setCurrentAccount({
|
||
id: account.id,
|
||
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}`);
|
||
}}
|
||
>
|
||
<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>
|
||
)}
|
||
</Layout>
|
||
);
|
||
}
|