feat: 本次提交更新内容如下

首页代码精简
This commit is contained in:
2025-07-23 16:00:56 +08:00
parent a626d42273
commit b986f570de
3 changed files with 34 additions and 394 deletions

View File

@@ -46,81 +46,11 @@ const Home: React.FC = () => {
const [dashboard, setDashboard] = useState<DashboardData>({});
const [sevenDayStats, setSevenDayStats] = useState<SevenDayStatsData>({});
const [isLoading, setIsLoading] = useState(true);
const [apiError, setApiError] = useState("");
// 场景获客数据
const scenarioFeatures = [
{
id: "3",
name: "抖音获客",
icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-QR8ManuDplYTySUJsY4mymiZkDYnQ9.png",
color: "bg-blue-100 text-blue-600",
value: 156,
growth: 12,
},
{
id: "4",
name: "小红书获客",
icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-yvnMxpoBUzcvEkr8DfvHgPHEo1kmQ3.png",
color: "bg-red-100 text-red-600",
value: 89,
growth: 8,
},
{
id: "6",
name: "公众号获客",
icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Gsg0CMf5tsZb41mioszdjqU1WmsRxW.png",
color: "bg-green-100 text-green-600",
value: 234,
growth: 15,
},
{
id: "1",
name: "海报获客",
icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-x92XJgXy4MI7moNYlA1EAes2FqDxMH.png",
color: "bg-orange-100 text-orange-600",
value: 167,
growth: 10,
},
];
// 今日数据统计
const todayStatsData = [
{
title: "朋友圈同步",
value: "12",
icon: <MessageOutlined style={{ fontSize: 16, color: "#8b5cf6" }} />,
color: "text-purple-600",
path: "/workspace/moments-sync",
},
{
title: "群发任务",
value: "8",
icon: <TeamOutlined style={{ fontSize: 16, color: "#f97316" }} />,
color: "text-orange-600",
path: "/workspace/group-push",
},
{
title: "获客转化",
value: "85%",
icon: <RiseOutlined style={{ fontSize: 16, color: "#22c55e" }} />,
color: "text-green-600",
path: "/scenarios",
},
{
title: "系统活跃度",
value: "98%",
icon: <LineChartOutlined style={{ fontSize: 16, color: "#3b82f6" }} />,
color: "text-blue-600",
path: "/workspace",
},
];
useEffect(() => {
const fetchData = async () => {
try {
setIsLoading(true);
setApiError("");
// 并行请求多个接口
const [dashboardResult, planStatsResult, sevenDayResult, todayResult] =
@@ -136,7 +66,6 @@ const Home: React.FC = () => {
setDashboard(dashboardResult.value);
} else {
console.warn("仪表板API失败:", dashboardResult.reason);
setApiError("API连接异常显示默认数据");
}
// 处理计划统计数据
@@ -163,18 +92,21 @@ const Home: React.FC = () => {
<MessageOutlined style={{ fontSize: 16, color: "#8b5cf6" }} />
),
color: "#8b5cf6",
path: "/workspace/moments-sync",
},
{
label: "群发任务",
value: todayResult.value?.groupPushNum || 0,
icon: <TeamOutlined style={{ fontSize: 16, color: "#f97316" }} />,
color: "#f97316",
path: "/workspace/group-push",
},
{
label: "获客转化率",
value: todayResult.value?.passRate || "0%",
icon: <RiseOutlined style={{ fontSize: 16, color: "#22c55e" }} />,
color: "#22c55e",
path: "/scenarios",
},
{
label: "系统活跃度",
@@ -183,6 +115,7 @@ const Home: React.FC = () => {
<LineChartOutlined style={{ fontSize: 16, color: "#3b82f6" }} />
),
color: "#3b82f6",
path: "/workspace",
},
];
setTodayStats(todayStatsData);
@@ -191,7 +124,6 @@ const Home: React.FC = () => {
}
} catch (error) {
console.error("获取数据失败:", error);
setApiError(error instanceof Error ? error.message : "数据加载失败");
} finally {
setIsLoading(false);
}
@@ -208,38 +140,6 @@ const Home: React.FC = () => {
navigate("/wechat-accounts");
};
if (isLoading) {
return (
<Layout
header={
<NavBar back={null} style={{ background: "#fff" }}>
<div className={style["nav-title"]}>
<span className={style["nav-text"]}></span>
</div>
</NavBar>
}
footer={<MeauMobile />}
loading={true}
>
<div className={style["home-page"]}>
<div className={style["content-wrapper"]}>
<div className={style["stats-grid"]}>
{[...Array(3)].map((_, i) => (
<div key={i} className={style["stat-card"]}>
<div className={style["stat-label"]}></div>
<div className={style["stat-value"]}>
<span></span>
<div></div>
</div>
</div>
))}
</div>
</div>
</div>
</Layout>
);
}
return (
<Layout
header={
@@ -249,7 +149,8 @@ const Home: React.FC = () => {
</div>
</NavBar>
}
footer={<MeauMobile />}
footer={<MeauMobile activeKey="home" />}
loading={isLoading}
>
<div className={style["home-page"]}>
<div className={style["content-wrapper"]}>
@@ -298,32 +199,29 @@ const Home: React.FC = () => {
<h2 className={style["section-title"]}></h2>
</div>
<div className={style["scene-grid"]}>
{scenarioFeatures
.sort((a, b) => b.value - a.value)
.slice(0, 4) // 只显示前4个
.map((scenario) => (
<div
key={scenario.id}
className={style["scene-item"]}
onClick={() =>
navigate(
`/scenarios/list/${scenario.id}/${encodeURIComponent(
scenario.name
)}`
)
}
>
<div className={style["scene-icon"]}>
<img
src={scenario.icon || "/placeholder.svg"}
alt={scenario.name}
className={style["scene-image"]}
/>
</div>
<div className={style["scene-value"]}>{scenario.value}</div>
<div className={style["scene-label"]}>{scenario.name}</div>
{sceneStats.map((scenario) => (
<div
key={scenario.id}
className={style["scene-item"]}
onClick={() =>
navigate(
`/scenarios/list/${scenario.id}/${encodeURIComponent(
scenario.name
)}`
)
}
>
<div className={style["scene-icon"]}>
<img
src={scenario.image || "/placeholder.svg"}
alt={scenario.name}
className={style["scene-image"]}
/>
</div>
))}
<div className={style["scene-value"]}>{scenario.allNum}</div>
<div className={style["scene-label"]}>{scenario.name}</div>
</div>
))}
</div>
</div>
@@ -333,7 +231,7 @@ const Home: React.FC = () => {
<h2 className={style["section-title"]}></h2>
</div>
<div className={style["today-grid"]}>
{todayStatsData.map((stat, index) => (
{todayStats.map((stat, index) => (
<div
key={index}
className={style["today-item"]}
@@ -342,7 +240,7 @@ const Home: React.FC = () => {
<div className={style["today-icon"]}>{stat.icon}</div>
<div>
<div className={style["today-value"]}>{stat.value}</div>
<div className={style["today-label"]}>{stat.title}</div>
<div className={style["today-label"]}>{stat.label}</div>
</div>
</div>
))}

View File

@@ -1,258 +0,0 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { ChevronRight, Settings, Bell, LogOut, Smartphone, MessageCircle, Database, FolderOpen } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { useAuth } from '@/contexts/AuthContext';
import { useToast } from '@/components/ui/toast';
import Layout from '@/components/Layout';
import BottomNav from '@/components/BottomNav';
import UnifiedHeader from '@/components/UnifiedHeader';
import '@/components/Layout.css';
export default function Profile() {
const navigate = useNavigate();
const { user, logout, isAuthenticated } = useAuth();
const { toast } = useToast();
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
const [userInfo, setUserInfo] = useState<any>(null);
const [stats, setStats] = useState({
devices: 12,
wechat: 25,
traffic: 8,
content: 156,
});
// 从localStorage获取用户信息
useEffect(() => {
const userInfoStr = localStorage.getItem('userInfo');
if (userInfoStr) {
setUserInfo(JSON.parse(userInfoStr));
}
}, []);
// 用户信息
const currentUserInfo = {
name: userInfo?.username || user?.username || "卡若",
email: userInfo?.email || "zhangsan@example.com",
role: "管理员",
joinDate: "2023-01-15",
lastLogin: "2024-01-20 14:30",
};
// 功能模块数据
const functionModules = [
{
id: "devices",
title: "设备管理",
description: "管理您的设备和微信账号",
icon: <Smartphone className="h-5 w-5 text-blue-500" />,
count: stats.devices,
path: "/devices",
bgColor: "bg-blue-50",
},
{
id: "wechat",
title: "微信号管理",
description: "管理微信账号和好友",
icon: <MessageCircle className="h-5 w-5 text-green-500" />,
count: stats.wechat,
path: "/wechat-accounts",
bgColor: "bg-green-50",
},
{
id: "traffic",
title: "流量池",
description: "管理用户流量池和分组",
icon: <Database className="h-5 w-5 text-purple-500" />,
count: stats.traffic,
path: "/traffic-pool",
bgColor: "bg-purple-50",
},
{
id: "content",
title: "内容库",
description: "管理营销内容和素材",
icon: <FolderOpen className="h-5 w-5 text-orange-500" />,
count: stats.content,
path: "/content",
bgColor: "bg-orange-50",
},
];
// 加载统计数据
const loadStats = async () => {
try {
// 这里可以调用实际的API
// const [deviceStats, wechatStats, trafficStats, contentStats] = await Promise.allSettled([
// getDeviceStats(),
// getWechatStats(),
// getTrafficStats(),
// getContentStats(),
// ]);
// 暂时使用模拟数据
setStats({
devices: 12,
wechat: 25,
traffic: 8,
content: 156,
});
} catch (error) {
console.error("加载统计数据失败:", error);
}
};
useEffect(() => {
loadStats();
}, []);
const handleLogout = () => {
// 清除本地存储的用户信息
localStorage.removeItem('token');
localStorage.removeItem('token_expired');
localStorage.removeItem('s2_accountId');
localStorage.removeItem('userInfo');
setShowLogoutDialog(false);
logout();
navigate('/login');
toast({
title: '退出成功',
description: '您已安全退出系统',
});
};
const handleFunctionClick = (path: string) => {
navigate(path);
};
if (!isAuthenticated) {
return (
<div className="flex h-screen items-center justify-center">
<div className="text-gray-500"></div>
</div>
);
}
return (
<Layout
header={
<UnifiedHeader
title="我的"
showBack={false}
titleColor="blue"
actions={[
{
type: 'icon',
icon: Bell,
onClick: () => console.log('Notifications'),
},
{
type: 'icon',
icon: Settings,
onClick: () => console.log('Settings'),
},
]}
/>
}
footer={<BottomNav />}
>
<div className="bg-gray-50 pb-16">
<div className="p-4 space-y-4">
{/* 用户信息卡片 */}
<Card>
<CardContent className="p-4">
<div className="flex items-center space-x-4">
<Avatar className="h-16 w-16">
<AvatarImage src={userInfo?.avatar || user?.avatar || ''} />
<AvatarFallback className="bg-gray-200 text-gray-600 text-lg font-medium">
{currentUserInfo.name.charAt(0)}
</AvatarFallback>
</Avatar>
<div className="flex-1">
<div className="flex items-center space-x-2 mb-1">
<h2 className="text-lg font-medium">{currentUserInfo.name}</h2>
<span className="px-2 py-1 text-xs bg-gradient-to-r from-orange-400 to-orange-500 text-white rounded-full font-medium shadow-sm">
{currentUserInfo.role}
</span>
</div>
<p className="text-sm text-gray-600 mb-2">{currentUserInfo.email}</p>
<div className="text-xs text-gray-500">
<div>: {currentUserInfo.lastLogin}</div>
</div>
</div>
<div className="flex flex-col space-y-2">
<Button variant="ghost" size="icon">
<Bell className="h-5 w-5" />
</Button>
<Button variant="ghost" size="icon">
<Settings className="h-5 w-5" />
</Button>
</div>
</div>
</CardContent>
</Card>
{/* 我的功能 */}
<Card>
<CardContent className="p-4">
<div className="space-y-2">
{functionModules.map((module) => (
<div
key={module.id}
className="flex items-center p-4 rounded-lg border hover:bg-gray-50 cursor-pointer transition-colors w-full"
onClick={() => handleFunctionClick(module.path)}
>
<div className={`p-2 rounded-lg ${module.bgColor} mr-3`}>{module.icon}</div>
<div className="flex-1">
<div className="font-medium text-sm">{module.title}</div>
<div className="text-xs text-gray-500">{module.description}</div>
</div>
<div className="flex items-center space-x-2">
<span className="px-2 py-1 text-xs bg-gray-50 text-gray-700 rounded-full border border-gray-200 font-medium shadow-sm">
{module.count}
</span>
<ChevronRight className="h-4 w-4 text-gray-400" />
</div>
</div>
))}
</div>
</CardContent>
</Card>
{/* 退出登录 */}
<Button
variant="outline"
className="w-full text-red-600 border-red-200 hover:bg-red-50 bg-transparent"
onClick={() => setShowLogoutDialog(true)}
>
<LogOut className="h-4 w-4 mr-2" />
退
</Button>
</div>
</div>
{/* 退出登录确认对话框 */}
<Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
<DialogContent>
<DialogHeader>
<DialogTitle>退</DialogTitle>
<DialogDescription>
退退使
</DialogDescription>
</DialogHeader>
<div className="flex justify-end space-x-2 mt-4">
<Button variant="outline" onClick={() => setShowLogoutDialog(false)}>
</Button>
<Button variant="destructive" onClick={handleLogout}>
退
</Button>
</div>
</DialogContent>
</Dialog>
</Layout>
);
}

View File

@@ -35,10 +35,10 @@ const Mine: React.FC = () => {
// 用户信息
const currentUserInfo = {
name: userInfo?.username || "售前",
email: userInfo?.email || "zhangsan@example.com",
role: "管理员",
lastLogin: "2024-01-20 14:30",
name: userInfo?.username || "-",
email: userInfo?.email || "-",
role: "-",
lastLogin: "-",
avatar: userInfo?.avatar || "",
};