490 lines
16 KiB
TypeScript
490 lines
16 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { Bell, Smartphone, Users, Activity, MessageSquare, TrendingUp } from 'lucide-react';
|
||
import Chart from 'chart.js/auto';
|
||
import Layout from '@/components/Layout';
|
||
import BottomNav from '@/components/BottomNav';
|
||
import UnifiedHeader, { HeaderPresets } from '@/components/UnifiedHeader';
|
||
import { Card } from '@/components/ui/card';
|
||
import { Progress } from '@/components/ui/progress';
|
||
import '@/components/Layout.css';
|
||
|
||
// API接口定义
|
||
const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || "https://ckbapi.quwanzhi.com";
|
||
|
||
// 统一的API请求客户端
|
||
async function apiRequest<T>(url: string): Promise<T> {
|
||
try {
|
||
const token = typeof window !== "undefined" ? localStorage.getItem("token") : null;
|
||
const headers: Record<string, string> = {
|
||
"Content-Type": "application/json",
|
||
Accept: "application/json",
|
||
};
|
||
|
||
if (token) {
|
||
headers["Authorization"] = `Bearer ${token}`;
|
||
}
|
||
|
||
console.log("发送API请求:", url);
|
||
|
||
const response = await fetch(url, {
|
||
method: "GET",
|
||
headers,
|
||
mode: "cors",
|
||
});
|
||
|
||
console.log("API响应状态:", response.status, response.statusText);
|
||
|
||
// 检查响应头的Content-Type
|
||
const contentType = response.headers.get("content-type");
|
||
console.log("响应Content-Type:", contentType);
|
||
|
||
if (!response.ok) {
|
||
// 如果是401未授权，清除本地存储
|
||
if (response.status === 401) {
|
||
if (typeof window !== "undefined") {
|
||
localStorage.removeItem("token");
|
||
localStorage.removeItem("userInfo");
|
||
}
|
||
}
|
||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||
}
|
||
|
||
// 检查是否是JSON响应
|
||
if (!contentType || !contentType.includes("application/json")) {
|
||
const text = await response.text();
|
||
console.log("非JSON响应内容:", text.substring(0, 200));
|
||
throw new Error("服务器返回了非JSON格式的数据，可能是HTML错误页面");
|
||
}
|
||
|
||
const data = await response.json();
|
||
console.log("API响应数据:", data);
|
||
|
||
// 检查业务状态码
|
||
if (data.code && data.code !== 200 && data.code !== 0) {
|
||
throw new Error(data.message || "请求失败");
|
||
}
|
||
|
||
return data.data || data;
|
||
} catch (error) {
|
||
console.error("API请求失败:", error);
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
export default function Home() {
|
||
const navigate = useNavigate();
|
||
const chartRef = useRef<HTMLCanvasElement>(null);
|
||
const chartInstance = useRef<any>(null);
|
||
|
||
// 统一设备数据
|
||
const [stats, setStats] = useState({
|
||
totalDevices: 0,
|
||
onlineDevices: 0,
|
||
totalWechatAccounts: 0,
|
||
onlineWechatAccounts: 0,
|
||
});
|
||
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
const [apiError, setApiError] = useState("");
|
||
|
||
// 场景获客数据
|
||
const scenarioFeatures = [
|
||
{
|
||
id: "douyin",
|
||
name: "抖音获客",
|
||
icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-QR8ManuDplYTySUJsY4mymiZkDYnQ9.png",
|
||
color: "bg-blue-100 text-blue-600",
|
||
value: 156,
|
||
growth: 12,
|
||
},
|
||
{
|
||
id: "xiaohongshu",
|
||
name: "小红书获客",
|
||
icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-yvnMxpoBUzcvEkr8DfvHgPHEo1kmQ3.png",
|
||
color: "bg-red-100 text-red-600",
|
||
value: 89,
|
||
growth: 8,
|
||
},
|
||
{
|
||
id: "gongzhonghao",
|
||
name: "公众号获客",
|
||
icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Gsg0CMf5tsZb41mioszdjqU1WmsRxW.png",
|
||
color: "bg-green-100 text-green-600",
|
||
value: 234,
|
||
growth: 15,
|
||
},
|
||
{
|
||
id: "haibao",
|
||
name: "海报获客",
|
||
icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-x92XJgXy4MI7moNYlA1EAes2FqDxMH.png",
|
||
color: "bg-orange-100 text-orange-600",
|
||
value: 167,
|
||
growth: 10,
|
||
},
|
||
];
|
||
|
||
// 今日数据统计
|
||
const todayStats = [
|
||
{
|
||
title: "朋友圈同步",
|
||
value: "12",
|
||
icon: <MessageSquare className="h-4 w-4" />,
|
||
color: "text-purple-600",
|
||
path: "/workspace/moments-sync",
|
||
},
|
||
{
|
||
title: "群发任务",
|
||
value: "8",
|
||
icon: <Users className="h-4 w-4" />,
|
||
color: "text-orange-600",
|
||
path: "/workspace/group-push",
|
||
},
|
||
{
|
||
title: "获客转化",
|
||
value: "85%",
|
||
icon: <TrendingUp className="h-4 w-4" />,
|
||
color: "text-green-600",
|
||
path: "/scenarios",
|
||
},
|
||
{
|
||
title: "系统活跃度",
|
||
value: "98%",
|
||
icon: <Activity className="h-4 w-4" />,
|
||
color: "text-blue-600",
|
||
path: "/workspace",
|
||
},
|
||
];
|
||
|
||
useEffect(() => {
|
||
// 获取统计数据
|
||
const fetchStats = async () => {
|
||
try {
|
||
setIsLoading(true);
|
||
setApiError("");
|
||
|
||
// 检查是否有token
|
||
const token = localStorage.getItem("token");
|
||
if (!token) {
|
||
console.log("未找到登录token，使用默认数据");
|
||
setStats({
|
||
totalDevices: 42,
|
||
onlineDevices: 35,
|
||
totalWechatAccounts: 42,
|
||
onlineWechatAccounts: 35,
|
||
});
|
||
setIsLoading(false);
|
||
return;
|
||
}
|
||
|
||
// 尝试请求API数据
|
||
try {
|
||
// 并行请求多个接口
|
||
const [deviceStatsResult, wechatStatsResult] = await Promise.allSettled([
|
||
apiRequest(`${API_BASE_URL}/v1/dashboard/device-stats`),
|
||
apiRequest(`${API_BASE_URL}/v1/dashboard/wechat-stats`),
|
||
]);
|
||
|
||
const newStats = {
|
||
totalDevices: 0,
|
||
onlineDevices: 0,
|
||
totalWechatAccounts: 0,
|
||
onlineWechatAccounts: 0,
|
||
};
|
||
|
||
// 处理设备统计数据
|
||
if (deviceStatsResult.status === "fulfilled") {
|
||
const deviceData = deviceStatsResult.value as any;
|
||
newStats.totalDevices = deviceData.total || 0;
|
||
newStats.onlineDevices = deviceData.online || 0;
|
||
} else {
|
||
console.warn("设备统计API失败:", deviceStatsResult.reason);
|
||
}
|
||
|
||
// 处理微信号统计数据
|
||
if (wechatStatsResult.status === "fulfilled") {
|
||
const wechatData = wechatStatsResult.value as any;
|
||
newStats.totalWechatAccounts = wechatData.total || 0;
|
||
newStats.onlineWechatAccounts = wechatData.active || 0;
|
||
} else {
|
||
console.warn("微信号统计API失败:", wechatStatsResult.reason);
|
||
}
|
||
|
||
setStats(newStats);
|
||
} catch (apiError) {
|
||
console.warn("API请求失败，使用默认数据:", apiError);
|
||
setApiError(apiError instanceof Error ? apiError.message : "API连接失败");
|
||
|
||
// 使用默认数据
|
||
setStats({
|
||
totalDevices: 42,
|
||
onlineDevices: 35,
|
||
totalWechatAccounts: 42,
|
||
onlineWechatAccounts: 35,
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error("获取统计数据失败:", error);
|
||
setApiError(error instanceof Error ? error.message : "数据加载失败");
|
||
|
||
// 使用默认数据
|
||
setStats({
|
||
totalDevices: 42,
|
||
onlineDevices: 35,
|
||
totalWechatAccounts: 42,
|
||
onlineWechatAccounts: 35,
|
||
});
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
fetchStats();
|
||
|
||
// 定时刷新数据（每30秒）
|
||
const interval = setInterval(fetchStats, 30000);
|
||
return () => clearInterval(interval);
|
||
}, []); // 移除stats依赖
|
||
|
||
const handleDevicesClick = () => {
|
||
navigate('/profile/devices');
|
||
};
|
||
|
||
const handleWechatClick = () => {
|
||
navigate('/wechat-accounts');
|
||
};
|
||
|
||
// 使用Chart.js创建图表
|
||
useEffect(() => {
|
||
if (chartRef.current && !isLoading) {
|
||
// 如果已经有图表实例，先销毁它
|
||
if (chartInstance.current) {
|
||
chartInstance.current.destroy();
|
||
}
|
||
|
||
const ctx = chartRef.current.getContext("2d");
|
||
|
||
// 添加null检查
|
||
if (!ctx) return;
|
||
|
||
// 创建新的图表实例
|
||
chartInstance.current = new Chart(ctx, {
|
||
type: "line",
|
||
data: {
|
||
labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
||
datasets: [
|
||
{
|
||
label: "获客数量",
|
||
data: [120, 150, 180, 200, 230, 210, 190],
|
||
backgroundColor: "rgba(59, 130, 246, 0.2)",
|
||
borderColor: "rgba(59, 130, 246, 1)",
|
||
borderWidth: 2,
|
||
tension: 0.3,
|
||
pointRadius: 4,
|
||
pointBackgroundColor: "rgba(59, 130, 246, 1)",
|
||
pointHoverRadius: 6,
|
||
},
|
||
],
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
display: false,
|
||
},
|
||
tooltip: {
|
||
backgroundColor: "rgba(255, 255, 255, 0.9)",
|
||
titleColor: "#333",
|
||
bodyColor: "#666",
|
||
borderColor: "#ddd",
|
||
borderWidth: 1,
|
||
padding: 10,
|
||
displayColors: false,
|
||
callbacks: {
|
||
label: (context) => `获客数量: ${context.parsed.y}`,
|
||
},
|
||
},
|
||
},
|
||
scales: {
|
||
x: {
|
||
grid: {
|
||
display: false,
|
||
},
|
||
},
|
||
y: {
|
||
beginAtZero: true,
|
||
grid: {
|
||
color: "rgba(0, 0, 0, 0.05)",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
});
|
||
}
|
||
|
||
// 组件卸载时清理图表实例
|
||
return () => {
|
||
if (chartInstance.current) {
|
||
chartInstance.current.destroy();
|
||
}
|
||
};
|
||
}, [isLoading]);
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<Layout
|
||
header={
|
||
<div className="bg-white border-b">
|
||
<div className="flex justify-between items-center p-4">
|
||
<h1 className="text-xl font-semibold text-blue-600">存客宝</h1>
|
||
</div>
|
||
</div>
|
||
}
|
||
footer={<BottomNav />}
|
||
>
|
||
<div className="bg-gray-50">
|
||
<div className="p-4 space-y-4">
|
||
<div className="grid grid-cols-3 gap-3">
|
||
{[...Array(3)].map((_, i) => (
|
||
<Card key={i} className="p-3 bg-white animate-pulse">
|
||
<div className="h-4 bg-gray-200 rounded mb-2"></div>
|
||
<div className="h-6 bg-gray-200 rounded"></div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Layout
|
||
header={
|
||
<UnifiedHeader
|
||
title="存客宝"
|
||
showBack={false}
|
||
titleColor="blue"
|
||
rightContent={
|
||
<>
|
||
{apiError && (
|
||
<div className="text-xs text-orange-600 bg-orange-50 px-2 py-1 rounded mr-2">
|
||
API连接异常，显示默认数据
|
||
</div>
|
||
)}
|
||
<button className="p-2 hover:bg-gray-100 rounded-full">
|
||
<Bell className="h-5 w-5 text-gray-600" />
|
||
</button>
|
||
</>
|
||
}
|
||
/>
|
||
}
|
||
footer={<BottomNav />}
|
||
>
|
||
<div className="bg-gray-50">
|
||
<div className="p-4 space-y-4">
|
||
{/* 统计卡片 */}
|
||
<div className="grid grid-cols-3 gap-3">
|
||
<div className="cursor-pointer" onClick={handleDevicesClick}>
|
||
<Card className="p-3 bg-white hover:shadow-md transition-all">
|
||
<div className="flex flex-col">
|
||
<span className="text-xs text-gray-500 mb-1">设备数量</span>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-lg font-bold text-blue-600">{stats.totalDevices}</span>
|
||
<Smartphone className="w-5 h-5 text-blue-600" />
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
<div className="cursor-pointer" onClick={handleWechatClick}>
|
||
<Card className="p-3 bg-white hover:shadow-md transition-all">
|
||
<div className="flex flex-col">
|
||
<span className="text-xs text-gray-500 mb-1">微信号数量</span>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-lg font-bold text-blue-600">{stats.totalWechatAccounts}</span>
|
||
<Users className="w-5 h-5 text-blue-600" />
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
<Card className="p-3 bg-white">
|
||
<div className="flex flex-col">
|
||
<span className="text-xs text-gray-500 mb-1">在线微信号</span>
|
||
<div className="flex items-center justify-between mb-1">
|
||
<span className="text-lg font-bold text-blue-600">{stats.onlineWechatAccounts}</span>
|
||
<Activity className="w-5 h-5 text-blue-600" />
|
||
</div>
|
||
<Progress
|
||
value={
|
||
stats.totalWechatAccounts > 0 ? (stats.onlineWechatAccounts / stats.totalWechatAccounts) * 100 : 0
|
||
}
|
||
className="h-1"
|
||
/>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 场景获客统计 */}
|
||
<Card className="p-4 bg-white">
|
||
<div className="flex justify-between items-center mb-3">
|
||
<h2 className="text-base font-semibold">场景获客统计</h2>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
{scenarioFeatures
|
||
.sort((a, b) => b.value - a.value)
|
||
.slice(0, 4) // 只显示前4个
|
||
.map((scenario) => (
|
||
<div
|
||
key={scenario.id}
|
||
className="block flex-1 cursor-pointer"
|
||
onClick={() => navigate(`/scenarios/${scenario.id}?name=${encodeURIComponent(scenario.name)}`)}
|
||
>
|
||
<div className="flex flex-col items-center text-center space-y-1">
|
||
<div className={`w-10 h-10 rounded-full ${scenario.color} flex items-center justify-center`}>
|
||
<img src={scenario.icon || "/placeholder.svg"} alt={scenario.name} className="w-5 h-5" />
|
||
</div>
|
||
<div className="text-sm font-medium">{scenario.value}</div>
|
||
<div className="text-xs text-gray-500 whitespace-nowrap overflow-hidden text-ellipsis w-full">
|
||
{scenario.name}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Card>
|
||
|
||
{/* 今日数据统计 */}
|
||
<Card className="p-4 bg-white">
|
||
<div className="flex justify-between items-center mb-3">
|
||
<h2 className="text-base font-semibold">今日数据</h2>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{todayStats.map((stat, index) => (
|
||
<div
|
||
key={index}
|
||
className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
|
||
onClick={() => stat.path && navigate(stat.path)}
|
||
>
|
||
<div className={`p-2 rounded-full bg-white ${stat.color}`}>{stat.icon}</div>
|
||
<div>
|
||
<div className="text-lg font-semibold">{stat.value}</div>
|
||
<div className="text-xs text-gray-500">{stat.title}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Card>
|
||
|
||
{/* 每日获客趋势 */}
|
||
<Card className="p-4 bg-white">
|
||
<h2 className="text-base font-semibold mb-3">每日获客趋势</h2>
|
||
<div className="w-full h-48 relative">
|
||
<canvas ref={chartRef} />
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|