Merge branch 'yongxu-dev3' into yongpxu-dev

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<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>
+  );
+} 

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;

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<any>(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: <UserOutline />,
-      title: "个人资料",
-      subtitle: "修改个人信息",
-      path: "/profile",
+      id: "devices",
+      title: "设备管理",
+      description: "管理您的设备和微信账号",
+      icon: <PhoneOutlined />,
+      count: stats.devices,
+      path: "/devices",
+      bgColor: "#e6f7ff",
+      iconColor: "#1890ff",
     },
     {
-      icon: <AppOutline />,
-      title: "系统设置",
-      subtitle: "应用设置与偏好",
-      path: "/settings",
+      id: "wechat",
+      title: "微信号管理",
+      description: "管理微信账号和好友",
+      icon: <MessageOutlined />,
+      count: stats.wechat,
+      path: "/wechat-accounts",
+      bgColor: "#f6ffed",
+      iconColor: "#52c41a",
     },
     {
-      icon: <BellOutline />,
-      title: "消息通知",
-      subtitle: "通知设置",
-      path: "/notifications",
+      id: "traffic",
+      title: "流量池",
+      description: "管理用户流量池和分组",
+      icon: <DatabaseOutlined />,
+      count: stats.traffic,
+      path: "/traffic-pool",
+      bgColor: "#f9f0ff",
+      iconColor: "#722ed1",
     },
     {
-      icon: <HeartOutline />,
-      title: "我的收藏",
-      subtitle: "收藏的内容",
-      path: "/favorites",
-    },
-    {
-      icon: <StarOutline />,
-      title: "我的评价",
-      subtitle: "查看评价记录",
-      path: "/reviews",
-    },
-    {
-      icon: <MessageOutline />,
-      title: "意见反馈",
-      subtitle: "问题反馈与建议",
-      path: "/feedback",
-    },
-    {
-      icon: <SendOutline />,
-      title: "联系客服",
-      subtitle: "在线客服",
-      path: "/customer-service",
-    },
-    {
-      icon: <MailOutline />,
-      title: "关于我们",
-      subtitle: "版本信息",
-      path: "/about",
+      id: "content",
+      title: "内容库",
+      description: "管理营销内容和素材",
+      icon: <FolderOpenOutlined />,
+      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 <img src={currentUserInfo.avatar} alt="头像" />;
+    }
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          backgroundColor: "#1890ff",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "white",
+          fontSize: "24px",
+          fontWeight: "bold",
+        }}
+      >
+        售
+      </div>
+    );
+  };
+
+  // 渲染功能模块图标
+  const renderModuleIcon = (module: any) => (
+    <div
+      style={{
+        width: "40px",
+        height: "40px",
+        backgroundColor: module.bgColor,
+        borderRadius: "8px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: module.iconColor,
+        fontSize: "20px",
+      }}
+    >
+      {module.icon}
+    </div>
+  );
+
   return (
     <Layout
       header={
@@ -88,54 +189,112 @@ const Mine: React.FC = () => {
         {/* 用户信息卡片 */}
         <Card className={style["user-card"]}>
           <div className={style["user-info"]}>
-            <div className={style["user-avatar"]}>
-              <img src={userInfo.avatar} alt="头像" />
-            </div>
+            <div className={style["user-avatar"]}>{renderUserAvatar()}</div>
             <div className={style["user-details"]}>
-              <div className={style["user-name"]}>{userInfo.name}</div>
-              <div className={style["user-level"]}>{userInfo.level}</div>
-              <div className={style["user-points"]}>
-                积分: {userInfo.points}
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  marginBottom: "4px",
+                }}
+              >
+                <div className={style["user-name"]}>{currentUserInfo.name}</div>
+                <span
+                  style={{
+                    padding: "2px 8px",
+                    backgroundColor: "#fa8c16",
+                    color: "white",
+                    borderRadius: "12px",
+                    fontSize: "12px",
+                    fontWeight: "500",
+                  }}
+                >
+                  {currentUserInfo.role}
+                </span>
               </div>
+              <div
+                style={{ fontSize: "14px", color: "#666", marginBottom: "4px" }}
+              >
+                {currentUserInfo.email}
+              </div>
+              <div style={{ fontSize: "12px", color: "#666" }}>
+                最近登录: {currentUserInfo.lastLogin}
+              </div>
+            </div>
+            <div
+              style={{ display: "flex", flexDirection: "column", gap: "8px" }}
+            >
+              <BellOutlined style={{ fontSize: "20px", color: "#666" }} />
+              <SettingOutlined style={{ fontSize: "20px", color: "#666" }} />
             </div>
           </div>
         </Card>
 
-        {/* 菜单列表 */}
+        {/* 我的功能 */}
         <Card className={style["menu-card"]}>
           <List>
-            {menuItems.map((item, index) => (
+            {functionModules.map((module) => (
               <List.Item
-                key={index}
-                prefix={item.icon}
-                title={item.title}
-                description={item.subtitle}
+                key={module.id}
+                prefix={renderModuleIcon(module)}
+                title={module.title}
+                description={module.description}
+                extra={
+                  <span
+                    style={{
+                      padding: "2px 8px",
+                      backgroundColor: "#f0f0f0",
+                      borderRadius: "12px",
+                      fontSize: "12px",
+                      color: "#666",
+                    }}
+                  >
+                    {module.count}
+                  </span>
+                }
                 arrow
-                onClick={() => {
-                  // 这里可以添加导航逻辑
-                  console.log(`点击了: ${item.title}`);
-                }}
+                onClick={() => handleFunctionClick(module.path)}
               />
             ))}
           </List>
         </Card>
 
         {/* 退出登录按钮 */}
-        <div className={style["logout-section"]}>
-          <Button
-            block
-            color="danger"
-            fill="outline"
-            className={style["logout-btn"]}
-            onClick={() => {
-              // 这里可以添加退出登录逻辑
-              console.log("退出登录");
-            }}
-          >
-            退出登录
-          </Button>
-        </div>
+        <Button
+          block
+          color="danger"
+          fill="outline"
+          className={style["logout-btn"]}
+          onClick={() => setShowLogoutDialog(true)}
+        >
+          <LogoutOutlined style={{ marginRight: "8px" }} />
+          退出登录
+        </Button>
       </div>
+
+      {/* 退出登录确认对话框 */}
+      <Dialog
+        content="您确定要退出登录吗？退出后需要重新登录才能使用完整功能。"
+        visible={showLogoutDialog}
+        closeOnAction
+        actions={[
+          [
+            {
+              key: "cancel",
+              text: "取消",
+            },
+            {
+              key: "confirm",
+              text: "确认退出",
+              bold: true,
+              danger: true,
+              onClick: handleLogout,
+            },
+          ],
+        ]}
+        onClose={() => setShowLogoutDialog(false)}
+      />
     </Layout>
   );
 };