From ad5fc0bb52cb24cad946cc2bf4181fcd5479a44b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Wed, 20 Aug 2025 17:38:59 +0800 Subject: [PATCH] =?UTF-8?q?feat(ckbox):=20=E9=87=8D=E6=9E=84=E8=81=94?= =?UTF-8?q?=E7=B3=BB=E4=BA=BA=E5=88=97=E8=A1=A8=E8=8E=B7=E5=8F=96=E9=80=BB?= =?UTF-8?q?=E8=BE=91=E5=B9=B6=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95=E6=B5=81?= =?UTF-8?q?=E7=A8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将联系人列表从模拟数据改为从API获取 - 优化登录处理流程，分离存客宝和触客宝的token获取 - 添加messageApi统一处理消息提示 - 修复路径引用问题并移除未使用的导入 --- Cunkebao/src/api/request2.ts | 1 - Cunkebao/src/pages/login/Login.tsx | 59 +++++------ Cunkebao/src/pages/pc/ckbox/api.ts | 8 +- .../pc/ckbox/components/ChatWindow/index.tsx | 6 +- .../pc/ckbox/components/MessageList/api.ts | 6 ++ .../pc/ckbox/components/MessageList/index.tsx | 2 +- Cunkebao/src/pages/pc/ckbox/index.tsx | 100 +++++------------- Cunkebao/src/store/module/user.ts | 2 + 8 files changed, 70 insertions(+), 114 deletions(-) create mode 100644 Cunkebao/src/pages/pc/ckbox/components/MessageList/api.ts diff --git a/Cunkebao/src/api/request2.ts b/Cunkebao/src/api/request2.ts index cacbdaf7..fd0e1f19 100644 --- 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}`; diff --git a/Cunkebao/src/pages/login/Login.tsx b/Cunkebao/src/pages/login/Login.tsx index 33f16e5b..621e6bf2 100644 --- 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); }); }); }; diff --git a/Cunkebao/src/pages/pc/ckbox/api.ts b/Cunkebao/src/pages/pc/ckbox/api.ts index 5728fbf3..f71abd9f 100644 --- 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 => { - return request("/v1/contacts", {}, "GET"); +export const getContactList = (params: { prevId: number; count: number }) => { + return request("/api/wechatFriend/list", params, "GET"); }; // 搜索联系人 diff --git a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx index b9e0ff20..f02bee3c 100644 --- 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 = ({ showProfile = true, onToggleProfile, }) => { + const [messageApi, contextHolder] = message.useMessage(); const [messages, setMessages] = useState([]); const [inputValue, setInputValue] = useState(""); const [loading, setLoading] = useState(false); @@ -109,7 +110,7 @@ const ChatWindow: React.FC = ({ ]; setMessages(mockMessages); } catch (error) { - message.error("获取聊天记录失败"); + messageApi.error("获取聊天记录失败"); } finally { setLoading(false); } @@ -137,7 +138,7 @@ const ChatWindow: React.FC = ({ onSendMessage(inputValue); setInputValue(""); } catch (error) { - message.error("发送失败"); + messageApi.error("发送失败"); } }; @@ -259,6 +260,7 @@ const ChatWindow: React.FC = ({ return ( + {contextHolder} {/* 聊天主体区域 */} {/* 聊天头部 */} diff --git a/Cunkebao/src/pages/pc/ckbox/components/MessageList/api.ts b/Cunkebao/src/pages/pc/ckbox/components/MessageList/api.ts new file mode 100644 index 00000000..cbb8c79d --- /dev/null +++ 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"); +}; diff --git a/Cunkebao/src/pages/pc/ckbox/components/MessageList/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/MessageList/index.tsx index d2e9b0c1..fd0e0422 100644 --- 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 { diff --git a/Cunkebao/src/pages/pc/ckbox/index.tsx b/Cunkebao/src/pages/pc/ckbox/index.tsx index 1dfd486f..0722949c 100644 --- 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([]); const [chatSessions, setChatSessions] = useState([]); const [currentChat, setCurrentChat] = useState(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 ( + {contextHolder} {/* 左侧边栏 */} {/* 搜索栏 */} diff --git a/Cunkebao/src/store/module/user.ts b/Cunkebao/src/store/module/user.ts index aeb811a8..070978c1 100644 --- a/Cunkebao/src/store/module/user.ts +++ b/Cunkebao/src/store/module/user.ts @@ -80,6 +80,8 @@ export const useUserStore = createPersistStore( }, login2: token2 => { localStorage.setItem("token2", token2); + console.log(token2); + set({ token2, isLoggedIn: true }); }, logout: () => {