Merge branch 'yongpxu-dev4' into yongpxu-dev

This commit is contained in:
笔记本里的永平
2025-07-23 17:38:45 +08:00
5 changed files with 49 additions and 434 deletions

View File

@@ -46,81 +46,11 @@ const Home: React.FC = () => {
const [dashboard, setDashboard] = useState<DashboardData>({}); const [dashboard, setDashboard] = useState<DashboardData>({});
const [sevenDayStats, setSevenDayStats] = useState<SevenDayStatsData>({}); const [sevenDayStats, setSevenDayStats] = useState<SevenDayStatsData>({});
const [isLoading, setIsLoading] = useState(true); 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(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
setApiError("");
// 并行请求多个接口 // 并行请求多个接口
const [dashboardResult, planStatsResult, sevenDayResult, todayResult] = const [dashboardResult, planStatsResult, sevenDayResult, todayResult] =
@@ -136,7 +66,6 @@ const Home: React.FC = () => {
setDashboard(dashboardResult.value); setDashboard(dashboardResult.value);
} else { } else {
console.warn("仪表板API失败:", dashboardResult.reason); console.warn("仪表板API失败:", dashboardResult.reason);
setApiError("API连接异常显示默认数据");
} }
// 处理计划统计数据 // 处理计划统计数据
@@ -163,18 +92,21 @@ const Home: React.FC = () => {
<MessageOutlined style={{ fontSize: 16, color: "#8b5cf6" }} /> <MessageOutlined style={{ fontSize: 16, color: "#8b5cf6" }} />
), ),
color: "#8b5cf6", color: "#8b5cf6",
path: "/workspace/moments-sync",
}, },
{ {
label: "群发任务", label: "群发任务",
value: todayResult.value?.groupPushNum || 0, value: todayResult.value?.groupPushNum || 0,
icon: <TeamOutlined style={{ fontSize: 16, color: "#f97316" }} />, icon: <TeamOutlined style={{ fontSize: 16, color: "#f97316" }} />,
color: "#f97316", color: "#f97316",
path: "/workspace/group-push",
}, },
{ {
label: "获客转化率", label: "获客转化率",
value: todayResult.value?.passRate || "0%", value: todayResult.value?.passRate || "0%",
icon: <RiseOutlined style={{ fontSize: 16, color: "#22c55e" }} />, icon: <RiseOutlined style={{ fontSize: 16, color: "#22c55e" }} />,
color: "#22c55e", color: "#22c55e",
path: "/scenarios",
}, },
{ {
label: "系统活跃度", label: "系统活跃度",
@@ -183,6 +115,7 @@ const Home: React.FC = () => {
<LineChartOutlined style={{ fontSize: 16, color: "#3b82f6" }} /> <LineChartOutlined style={{ fontSize: 16, color: "#3b82f6" }} />
), ),
color: "#3b82f6", color: "#3b82f6",
path: "/workspace",
}, },
]; ];
setTodayStats(todayStatsData); setTodayStats(todayStatsData);
@@ -191,7 +124,6 @@ const Home: React.FC = () => {
} }
} catch (error) { } catch (error) {
console.error("获取数据失败:", error); console.error("获取数据失败:", error);
setApiError(error instanceof Error ? error.message : "数据加载失败");
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
@@ -208,7 +140,6 @@ const Home: React.FC = () => {
navigate("/wechat-accounts"); navigate("/wechat-accounts");
}; };
if (isLoading) {
return ( return (
<Layout <Layout
header={ header={
@@ -218,38 +149,8 @@ const Home: React.FC = () => {
</div> </div>
</NavBar> </NavBar>
} }
footer={<MeauMobile />} footer={<MeauMobile activeKey="home" />}
loading={true} loading={isLoading}
>
<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={
<NavBar back={null} style={{ background: "#fff" }}>
<div className={style["nav-title"]}>
<span className={style["nav-text"]}></span>
</div>
</NavBar>
}
footer={<MeauMobile />}
> >
<div className={style["home-page"]}> <div className={style["home-page"]}>
<div className={style["content-wrapper"]}> <div className={style["content-wrapper"]}>
@@ -298,10 +199,7 @@ const Home: React.FC = () => {
<h2 className={style["section-title"]}></h2> <h2 className={style["section-title"]}></h2>
</div> </div>
<div className={style["scene-grid"]}> <div className={style["scene-grid"]}>
{scenarioFeatures {sceneStats.map((scenario) => (
.sort((a, b) => b.value - a.value)
.slice(0, 4) // 只显示前4个
.map((scenario) => (
<div <div
key={scenario.id} key={scenario.id}
className={style["scene-item"]} className={style["scene-item"]}
@@ -315,12 +213,12 @@ const Home: React.FC = () => {
> >
<div className={style["scene-icon"]}> <div className={style["scene-icon"]}>
<img <img
src={scenario.icon || "/placeholder.svg"} src={scenario.image || "/placeholder.svg"}
alt={scenario.name} alt={scenario.name}
className={style["scene-image"]} className={style["scene-image"]}
/> />
</div> </div>
<div className={style["scene-value"]}>{scenario.value}</div> <div className={style["scene-value"]}>{scenario.allNum}</div>
<div className={style["scene-label"]}>{scenario.name}</div> <div className={style["scene-label"]}>{scenario.name}</div>
</div> </div>
))} ))}
@@ -333,7 +231,7 @@ const Home: React.FC = () => {
<h2 className={style["section-title"]}></h2> <h2 className={style["section-title"]}></h2>
</div> </div>
<div className={style["today-grid"]}> <div className={style["today-grid"]}>
{todayStatsData.map((stat, index) => ( {todayStats.map((stat, index) => (
<div <div
key={index} key={index}
className={style["today-item"]} className={style["today-item"]}
@@ -342,7 +240,7 @@ const Home: React.FC = () => {
<div className={style["today-icon"]}>{stat.icon}</div> <div className={style["today-icon"]}>{stat.icon}</div>
<div> <div>
<div className={style["today-value"]}>{stat.value}</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>
</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

@@ -1,14 +1,5 @@
import request from '@/api/request'; import request from "@/api/request";
// 首页仪表盘总览
// 设备统计 export function getDashboard() {
export function getDeviceStats() { return request("/v1/dashboard", {}, "GET");
return request('/v1/dashboard/device-stats', {}, 'GET');
} }
// 微信号统计
export function getWechatStats() {
return request('/v1/dashboard/wechat-stats', {}, 'GET');
}
// 你可以根据需要继续添加其他接口
// 例如:场景获客统计、今日数据统计等

View File

@@ -40,7 +40,6 @@
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin-bottom: 4px;
} }
.user-level { .user-level {

View File

@@ -13,10 +13,11 @@ import {
import MeauMobile from "@/components/MeauMobile/MeauMoible"; import MeauMobile from "@/components/MeauMobile/MeauMoible";
import Layout from "@/components/Layout/Layout"; import Layout from "@/components/Layout/Layout";
import style from "./index.module.scss"; import style from "./index.module.scss";
import { useUserStore } from "@/store/module/user";
import { getDashboard } from "./api";
const Mine: React.FC = () => { const Mine: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [userInfo, setUserInfo] = useState<any>(null); const { user } = useUserStore();
const [stats, setStats] = useState({ const [stats, setStats] = useState({
devices: 12, devices: 12,
wechat: 25, wechat: 25,
@@ -25,21 +26,15 @@ const Mine: React.FC = () => {
}); });
const [showLogoutDialog, setShowLogoutDialog] = useState(false); const [showLogoutDialog, setShowLogoutDialog] = useState(false);
// 从localStorage获取用户信息
useEffect(() => {
const userInfoStr = localStorage.getItem("userInfo");
if (userInfoStr) {
setUserInfo(JSON.parse(userInfoStr));
}
}, []);
// 用户信息 // 用户信息
const currentUserInfo = { const currentUserInfo = {
name: userInfo?.username || "售前", name: user?.username || "-",
email: userInfo?.email || "zhangsan@example.com", email: user?.account || "-",
role: "管理员", role: user?.isAdmin === 1 ? "管理员" : "普通用户",
lastLogin: "2024-01-20 14:30", lastLogin: user?.lastLoginTime
avatar: userInfo?.avatar || "", ? new Date(user.lastLoginTime * 1000).toLocaleString()
: "-",
avatar: user?.avatar || "",
}; };
// 功能模块数据 // 功能模块数据
@@ -89,20 +84,12 @@ const Mine: React.FC = () => {
// 加载统计数据 // 加载统计数据
const loadStats = async () => { const loadStats = async () => {
try { try {
// 这里可以调用实际的API const res = await getDashboard();
// const [deviceStats, wechatStats, trafficStats, contentStats] = await Promise.allSettled([
// getDeviceStats(),
// getWechatStats(),
// getTrafficStats(),
// getContentStats(),
// ]);
// 暂时使用模拟数据
setStats({ setStats({
devices: 12, devices: res.deviceNum,
wechat: 25, wechat: res.wechatNum,
traffic: 8, traffic: 999,
content: 156, content: 999,
}); });
} catch (error) { } catch (error) {
console.error("加载统计数据失败:", error); console.error("加载统计数据失败:", error);
@@ -196,7 +183,6 @@ const Mine: React.FC = () => {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: "8px", gap: "8px",
marginBottom: "4px",
}} }}
> >
<div className={style["user-name"]}>{currentUserInfo.name}</div> <div className={style["user-name"]}>{currentUserInfo.name}</div>
@@ -225,7 +211,6 @@ const Mine: React.FC = () => {
<div <div
style={{ display: "flex", flexDirection: "column", gap: "8px" }} style={{ display: "flex", flexDirection: "column", gap: "8px" }}
> >
<BellOutlined style={{ fontSize: "20px", color: "#666" }} />
<SettingOutlined style={{ fontSize: "20px", color: "#666" }} /> <SettingOutlined style={{ fontSize: "20px", color: "#666" }} />
</div> </div>
</div> </div>