From 06a37a541a526bafd7e23c8ac6ec0f42eca2ac17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=87=8C=E7=9A=84=E6=B0=B8?= =?UTF-8?q?=E5=B9=B3?= Date: Tue, 22 Jul 2025 13:47:05 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=86=85=E5=AE=B9=E5=A6=82=E4=B8=8B=20?= =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2=E6=9E=84?= =?UTF-8?q?=E5=BB=BA=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nkebao/src/pages/mine/Profile.tsx | 258 ++++++++++++++++++ nkebao/src/pages/mine/index.module.scss | 35 ++- nkebao/src/pages/mine/index.tsx | 335 +++++++++++++++++------- 3 files changed, 521 insertions(+), 107 deletions(-) create mode 100644 nkebao/src/pages/mine/Profile.tsx diff --git a/nkebao/src/pages/mine/Profile.tsx b/nkebao/src/pages/mine/Profile.tsx new file mode 100644 index 00000000..bb302b3b --- /dev/null +++ b/nkebao/src/pages/mine/Profile.tsx @@ -0,0 +1,258 @@ +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(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: , + count: stats.devices, + path: "/devices", + bgColor: "bg-blue-50", + }, + { + id: "wechat", + title: "微信号管理", + description: "管理微信账号和好友", + icon: , + count: stats.wechat, + path: "/wechat-accounts", + bgColor: "bg-green-50", + }, + { + id: "traffic", + title: "流量池", + description: "管理用户流量池和分组", + icon: , + count: stats.traffic, + path: "/traffic-pool", + bgColor: "bg-purple-50", + }, + { + id: "content", + title: "内容库", + description: "管理营销内容和素材", + icon: , + 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 ( +
+
请先登录
+
+ ); + } + + return ( + console.log('Notifications'), + }, + { + type: 'icon', + icon: Settings, + onClick: () => console.log('Settings'), + }, + ]} + /> + } + footer={} + > +
+
+ {/* 用户信息卡片 */} + + +
+ + + + {currentUserInfo.name.charAt(0)} + + +
+
+

{currentUserInfo.name}

+ + {currentUserInfo.role} + +
+

{currentUserInfo.email}

+
+
最近登录: {currentUserInfo.lastLogin}
+
+
+
+ + +
+
+ + + + {/* 我的功能 */} + + +
+ {functionModules.map((module) => ( +
handleFunctionClick(module.path)} + > +
{module.icon}
+
+
{module.title}
+
{module.description}
+
+
+ + {module.count} + + +
+
+ ))} +
+ + + + {/* 退出登录 */} + +
+
+ + {/* 退出登录确认对话框 */} + + + + 确认退出登录 + + 您确定要退出登录吗？退出后需要重新登录才能使用完整功能。 + + +
+ + +
+ + + + ); +} \ No newline at end of file diff --git a/nkebao/src/pages/mine/index.module.scss b/nkebao/src/pages/mine/index.module.scss index 98aa403b..fc1d92c7 100644 --- a/nkebao/src/pages/mine/index.module.scss +++ b/nkebao/src/pages/mine/index.module.scss @@ -1,7 +1,5 @@ .mine-page { - padding: 16px; - background-color: #f5f5f5; - min-height: 100vh; + padding: 12px; } .user-card { @@ -59,22 +57,24 @@ .menu-card { margin-bottom: 16px; border-radius: 12px; - overflow: hidden; - - :global(.adm-card-body) { - padding: 0; + + :global(.adm-list-body) { + border: none; + } + + :global(.adm-card-body) { + padding: 14px 0 0 0; + } + :global(.adm-list-body-inner) { + margin-top: 0px; } - :global(.adm-list-item) { - padding: 16px; - border-bottom: 1px solid #f0f0f0; - - &:last-child { - border-bottom: none; - } - + padding: 0px; :global(.adm-list-item-content) { - padding: 0; + border: 1px solid #f0f0f0; + margin-bottom: 12px; + padding: 0 12px; + border-radius: 12px; } :global(.adm-list-item-content-prefix) { @@ -104,9 +104,6 @@ } } -.logout-section { - padding: 0 16px; -} .logout-btn { border-radius: 8px; diff --git a/nkebao/src/pages/mine/index.tsx b/nkebao/src/pages/mine/index.tsx index 12d1e55c..b6298f52 100644 --- a/nkebao/src/pages/mine/index.tsx +++ b/nkebao/src/pages/mine/index.tsx @@ -1,78 +1,179 @@ -import React from "react"; -import { Card, NavBar, List, Button } from "antd-mobile"; +import React, { useState, useEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import { Card, NavBar, List, Button, Dialog, Toast } from "antd-mobile"; import { - UserOutline, - AppOutline, - BellOutline, - HeartOutline, - StarOutline, - MessageOutline, - SendOutline, - MailOutline, -} from "antd-mobile-icons"; + LogoutOutlined, + PhoneOutlined, + MessageOutlined, + DatabaseOutlined, + FolderOpenOutlined, + BellOutlined, + SettingOutlined, +} from "@ant-design/icons"; import MeauMobile from "@/components/MeauMobile/MeauMoible"; import Layout from "@/components/Layout/Layout"; import style from "./index.module.scss"; const Mine: React.FC = () => { - const userInfo = { - name: "张三", - avatar: "https://via.placeholder.com/60", - level: "VIP会员", - points: 1280, + const navigate = useNavigate(); + const [userInfo, setUserInfo] = useState(null); + const [stats, setStats] = useState({ + devices: 12, + wechat: 25, + traffic: 8, + content: 156, + }); + const [showLogoutDialog, setShowLogoutDialog] = useState(false); + + // 从localStorage获取用户信息 + useEffect(() => { + const userInfoStr = localStorage.getItem("userInfo"); + if (userInfoStr) { + setUserInfo(JSON.parse(userInfoStr)); + } + }, []); + + // 用户信息 + const currentUserInfo = { + name: userInfo?.username || "售前", + email: userInfo?.email || "zhangsan@example.com", + role: "管理员", + lastLogin: "2024-01-20 14:30", + avatar: userInfo?.avatar || "", }; - const menuItems = [ + // 功能模块数据 + const functionModules = [ { - icon: , - title: "个人资料", - subtitle: "修改个人信息", - path: "/profile", + id: "devices", + title: "设备管理", + description: "管理您的设备和微信账号", + icon: , + count: stats.devices, + path: "/devices", + bgColor: "#e6f7ff", + iconColor: "#1890ff", }, { - icon: , - title: "系统设置", - subtitle: "应用设置与偏好", - path: "/settings", + id: "wechat", + title: "微信号管理", + description: "管理微信账号和好友", + icon: , + count: stats.wechat, + path: "/wechat-accounts", + bgColor: "#f6ffed", + iconColor: "#52c41a", }, { - icon: , - title: "消息通知", - subtitle: "通知设置", - path: "/notifications", + id: "traffic", + title: "流量池", + description: "管理用户流量池和分组", + icon: , + count: stats.traffic, + path: "/traffic-pool", + bgColor: "#f9f0ff", + iconColor: "#722ed1", }, { - icon: , - title: "我的收藏", - subtitle: "收藏的内容", - path: "/favorites", - }, - { - icon: , - title: "我的评价", - subtitle: "查看评价记录", - path: "/reviews", - }, - { - icon: , - title: "意见反馈", - subtitle: "问题反馈与建议", - path: "/feedback", - }, - { - icon: , - title: "联系客服", - subtitle: "在线客服", - path: "/customer-service", - }, - { - icon: , - title: "关于我们", - subtitle: "版本信息", - path: "/about", + id: "content", + title: "内容库", + description: "管理营销内容和素材", + icon: , + count: stats.content, + path: "/content", + bgColor: "#fff7e6", + iconColor: "#fa8c16", }, ]; + // 加载统计数据 + 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); + navigate("/login"); + Toast.show({ + content: "退出成功", + position: "top", + }); + }; + + const handleFunctionClick = (path: string) => { + navigate(path); + }; + + // 渲染用户头像 + const renderUserAvatar = () => { + if (currentUserInfo.avatar) { + return 头像; + } + return ( +
+ 售 +
+ ); + }; + + // 渲染功能模块图标 + const renderModuleIcon = (module: any) => ( +
+ {module.icon} +
+ ); + return ( { {/* 用户信息卡片 */}
-
- 头像 -
+
{renderUserAvatar()}
-
{userInfo.name}
-
{userInfo.level}
-
- 积分: {userInfo.points} +
+
{currentUserInfo.name}
+ + {currentUserInfo.role} +
+
+ {currentUserInfo.email} +
+
+ 最近登录: {currentUserInfo.lastLogin} +
+
+
+ +
- {/* 菜单列表 */} + {/* 我的功能 */} - {menuItems.map((item, index) => ( + {functionModules.map((module) => ( + {module.count} + + } arrow - onClick={() => { - // 这里可以添加导航逻辑 - console.log(`点击了: ${item.title}`); - }} + onClick={() => handleFunctionClick(module.path)} /> ))} {/* 退出登录按钮 */} -
- -
+
+ + {/* 退出登录确认对话框 */} + setShowLogoutDialog(false)} + /> ); };