feat(ckbox): 重构联系人列表获取逻辑并优化登录流程

- 将联系人列表从模拟数据改为从API获取 - 优化登录处理流程，分离存客宝和触客宝的token获取 - 添加messageApi统一处理消息提示 - 修复路径引用问题并移除未使用的导入
2025-08-20 17:38:59 +08:00
parent d2560784a2
commit ad5fc0bb52
8 changed files with 70 additions and 114 deletions
--- a/Cunkebao/src/api/request2.ts
+++ b/Cunkebao/src/api/request2.ts
@@ -28,7 +28,6 @@ const instance: AxiosInstance = axios.create({
 instance.interceptors.request.use((config: any) => {
  // 在每次请求时动态获取最新的 token2
  const { token2 } = useUserStore.getState();
-
  if (token2) {
    config.headers = config.headers || {};
    config.headers["Authorization"] = `bearer ${token2}`;
--- a/Cunkebao/src/pages/login/Login.tsx
+++ b/Cunkebao/src/pages/login/Login.tsx
@@ -69,32 +69,6 @@ const Login: React.FC = () => {
    }
  };

-  // 登录处理
-  const handleLogin = async (values: any) => {
-    if (!agreeToTerms) {
-      Toast.show({ content: "请同意用户协议和隐私政策", position: "top" });
-      return;
-    }
-    getToken(values).then(() => {
-      getChuKeBaoUserInfo().then(res => {
-        setUserInfo(res);
-        getToken2().then(Token => {
-          // // 使用WebSocket store连接
-          // const { connect } = useWebSocketStore.getState();
-          // connect({
-          //   accessToken: Token,
-          //   accountId: getAccountId()?.toString() || "",
-          //   client: "kefu-client",
-          //   autoReconnect: true,
-          //   reconnectInterval: 3000,
-          //   maxReconnectAttempts: 5,
-          // });
-        });
-      });
-      setLoading(false);
-    });
-  };
-
  const getToken = (values: any) => {
    return new Promise((resolve, reject) => {
      // 添加typeId参数
@@ -130,13 +104,34 @@ const Login: React.FC = () => {
        password: "kr123456",
        username: "kr_xf3",
      };
-      const response = loginWithToken(params);
-      response.then(res => {
-        login2(res.access_token);
-        resolve(res.access_token);
+      loginWithToken(params)
+        .then(res => {
+          login2(res.access_token);
+          resolve(res.access_token);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  };
+
+  // 登录处理
+  const handleLogin = async (values: any) => {
+    if (!agreeToTerms) {
+      Toast.show({ content: "请同意用户协议和隐私政策", position: "top" });
+      return;
+    }
+    //获取存客宝
+    getToken(values)
+      .then(() => {})
+      .finally(() => {
+        setLoading(false);
      });
-      response.catch(err => {
-        reject(err);
+
+    //获取触客宝
+    getToken2().then(() => {
+      getChuKeBaoUserInfo().then(res => {
+        setUserInfo(res);
      });
    });
  };
--- a/Cunkebao/src/pages/pc/ckbox/api.ts
+++ b/Cunkebao/src/pages/pc/ckbox/api.ts
@@ -1,11 +1,9 @@
-import request from "@/api/request";
+import request from "@/api/request2";
 import {
  ContactData,
-  ContactListResponse,
  ChatSession,
  MessageData,
  ChatHistoryResponse,
-  SendMessageRequest,
  MessageType,
  GroupData,
  OnlineStatus,
@@ -17,8 +15,8 @@ import {
 } from "./data";

 // 获取联系人列表
-export const getContactList = (): Promise<ContactData[]> => {
-  return request("/v1/contacts", {}, "GET");
+export const getContactList = (params: { prevId: number; count: number }) => {
+  return request("/api/wechatFriend/list", params, "GET");
 };

 // 搜索联系人
--- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx
+++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx
@@ -60,6 +60,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
  showProfile = true,
  onToggleProfile,
 }) => {
+  const [messageApi, contextHolder] = message.useMessage();
  const [messages, setMessages] = useState<MessageData[]>([]);
  const [inputValue, setInputValue] = useState("");
  const [loading, setLoading] = useState(false);
@@ -109,7 +110,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
      ];
      setMessages(mockMessages);
    } catch (error) {
-      message.error("获取聊天记录失败");
+      messageApi.error("获取聊天记录失败");
    } finally {
      setLoading(false);
    }
@@ -137,7 +138,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
      onSendMessage(inputValue);
      setInputValue("");
    } catch (error) {
-      message.error("发送失败");
+      messageApi.error("发送失败");
    }
  };

@@ -259,6 +260,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({

  return (
    <Layout className={styles.chatWindow}>
+      {contextHolder}
      {/* 聊天主体区域 */}
      <Layout className={styles.chatMain}>
        {/* 聊天头部 */}
--- a/Cunkebao/src/pages/pc/ckbox/components/MessageList/api.ts
+++ b/Cunkebao/src/pages/pc/ckbox/components/MessageList/api.ts
@@ -0,0 +1,6 @@
+import request from "@/api/request";
+
+// 获取联系人列表
+export const getContactList = (params: { prevId: string; count: number }) => {
+  return request("/api/wechatFriend/list", params, "GET");
+};
--- a/Cunkebao/src/pages/pc/ckbox/components/MessageList/index.tsx
+++ b/Cunkebao/src/pages/pc/ckbox/components/MessageList/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { List, Avatar, Badge } from "antd";
 import { UserOutlined, TeamOutlined } from "@ant-design/icons";
 import dayjs from "dayjs";
-import { ChatSession } from "../data";
+import { ChatSession } from "@/pages/pc/ckbox/data";
 import styles from "./MessageList.module.scss";

 interface MessageListProps {
--- a/Cunkebao/src/pages/pc/ckbox/index.tsx
+++ b/Cunkebao/src/pages/pc/ckbox/index.tsx
@@ -1,33 +1,10 @@
 import React, { useState, useEffect, useRef } from "react";
-import {
-  Layout,
-  Input,
-  Button,
-  Avatar,
-  List,
-  Badge,
-  Tabs,
-  Space,
-  Dropdown,
-  Menu,
-  message,
-  Popover,
-  Tooltip,
-  Divider,
-} from "antd";
+import { Layout, Input, Button, Tabs, Space, message, Tooltip } from "antd";
 import {
  SearchOutlined,
-  PlusOutlined,
-  MoreOutlined,
-  SendOutlined,
-  SmileOutlined,
-  PaperClipOutlined,
-  PhoneOutlined,
-  VideoCameraOutlined,
  UserOutlined,
  TeamOutlined,
  MessageOutlined,
-  SettingOutlined,
  InfoCircleOutlined,
 } from "@ant-design/icons";
 import dayjs from "dayjs";
@@ -36,11 +13,12 @@ import ChatWindow from "./components/ChatWindow/index";
 import ContactList from "./components/ContactList/index";
 import MessageList from "./components/MessageList/index";
 import styles from "./index.module.scss";
-
+import { getContactList } from "./api";
 const { Sider, Content } = Layout;
 const { TabPane } = Tabs;

 const CkboxPage: React.FC = () => {
+  const [messageApi, contextHolder] = message.useMessage();
  const [contacts, setContacts] = useState<ContactData[]>([]);
  const [chatSessions, setChatSessions] = useState<ChatSession[]>([]);
  const [currentChat, setCurrentChat] = useState<ChatSession | null>(null);
@@ -57,52 +35,27 @@ const CkboxPage: React.FC = () => {
  const fetchContacts = async () => {
    try {
      setLoading(true);
-      // 模拟联系人数据
-      const mockContacts: ContactData[] = [
-        {
-          id: "1",
-          name: "张三",
-          phone: "13800138001",
-          avatar: "",
-          online: true,
-          status: "在线",
-          department: "技术部",
-          position: "前端工程师",
-        },
-        {
-          id: "2",
-          name: "李四",
-          phone: "13800138002",
-          avatar: "",
-          online: false,
-          status: "忙碌中",
-          department: "产品部",
-          position: "产品经理",
-        },
-        {
-          id: "3",
-          name: "王五",
-          phone: "13800138003",
-          avatar: "",
-          online: true,
-          status: "在线",
-          department: "设计部",
-          position: "UI设计师",
-        },
-        {
-          id: "4",
-          name: "赵六",
-          phone: "13800138004",
-          avatar: "",
-          online: false,
-          status: "离线",
-          department: "运营部",
-          position: "运营专员",
-        },
-      ];
-      setContacts(mockContacts);
+      // 使用API获取联系人数据
+      const response = await getContactList({ prevId: 0, count: 500 });
+      console.log(response);
+
+      if (response && response.data) {
+        // 转换API返回的数据结构为组件所需的ContactData结构
+        const contactList: ContactData[] = response.data.map((item: any) => ({
+          id: item.id.toString(),
+          name: item.nickname || item.conRemark || item.alias || "",
+          phone: item.phone || "",
+          avatar: item.avatar || "",
+          online: true, // 假设所有联系人都在线，实际应根据API返回数据调整
+          status: "在线", // 假设状态，实际应根据API返回数据调整
+          department: "", // API中没有对应字段，可以根据需要添加
+          position: "", // API中没有对应字段，可以根据需要添加
+        }));
+        setContacts(contactList);
+      }
    } catch (error) {
-      message.error("获取联系人失败");
+      messageApi.error("获取联系人失败");
+      console.error("获取联系人失败:", error);
    } finally {
      setLoading(false);
    }
@@ -145,7 +98,7 @@ const CkboxPage: React.FC = () => {
      ];
      setChatSessions(sessions);
    } catch (error) {
-      message.error("获取聊天记录失败");
+      messageApi.error("获取聊天记录失败");
    }
  };

@@ -195,9 +148,9 @@ const CkboxPage: React.FC = () => {
      );
      setCurrentChat(updatedSession);

-      message.success("消息发送成功");
+      messageApi.success("消息发送成功");
    } catch (error) {
-      message.error("消息发送失败");
+      messageApi.error("消息发送失败");
    }
  };

@@ -223,6 +176,7 @@ const CkboxPage: React.FC = () => {

  return (
    <Layout className={styles.ckboxLayout}>
+      {contextHolder}
      {/* 左侧边栏 */}
      <Sider width={300} className={styles.sidebar}>
        {/* 搜索栏 */}
--- a/Cunkebao/src/store/module/user.ts
+++ b/Cunkebao/src/store/module/user.ts
@@ -80,6 +80,8 @@ export const useUserStore = createPersistStore<UserState>(
    },
    login2: token2 => {
      localStorage.setItem("token2", token2);
+      console.log(token2);
+
      set({ token2, isLoggedIn: true });
    },
    logout: () => {