fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ckchat): 重构联系人列表获取逻辑并优化状态管理

Browse Source 
- 将联系人列表获取逻辑从组件移至store
- 新增getNewContractList方法替代直接访问状态
- 移除不再使用的getContractList方法
- 优化缓存处理逻辑
- 修复部分语法错误和格式问题
This commit is contained in:
超级老白兔
2025-09-01 14:44:46 +08:00
parent f05efe464a
commit f77e8709a8
5 changed files with 91 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx
View File

@@ -16,7 +16,7 @@ const ContactListSimple: React.FC<WechatFriendsProps> = ({
onContactClick,
selectedContactId,
}) => {
const newContractList = useCkChatStore(state => state.newContractList);
const newContractList = useCkChatStore(state => state.getNewContractList());
const [activeKey, setActiveKey] = useState<string[]>([]); // 默认展开第一个分组

40
Cunkebao/src/pages/pc/ckbox/main.ts
View File

@@ -2,8 +2,8 @@ import {
asyncKfUserList,
asyncContractList,
asyncChatSessions,
asyncNewContractList,
asyncWeChatGroup,
asyncCountLables,
} from "@/store/module/ckchat/ckchat";
import { useWebSocketStore } from "@/store/module/websocket";
@@ -17,6 +17,8 @@ const { sendCommand } = useWebSocketStore.getState();
import { useUserStore } from "@/store/module/user";
import { KfUserListData } from "@/pages/pc/ckbox/data";
import { WechatGroup } from "./api";
const { login2 } = useUserStore.getState();
//获取触客宝基础信息
export const chatInitAPIdata = async () => {
@@ -43,8 +45,10 @@ export const chatInitAPIdata = async () => {
await asyncWeChatGroup(groupList);
// 会话列表分组
await asyncNewContractList(0);
//获取标签列表
const countLables = await getCountLables();
await asyncCountLables(countLables);
//获取消息会话列表并按lastUpdateTime排序
const filterUserSessions = contractList?.filter(
v => v?.config && v.config?.chat,
@@ -89,6 +93,36 @@ export const chatInitAPIdata = async () => {
}
};
export const getCountLables = async () => {
const LablesRes = await Promise.all(
[1, 2].map(item =>
WechatGroup({
groupType: item,
}),
),
);
const [friend, group] = LablesRes;
const countLables = [
...[
{
id: 0,
groupName: "默认群分组",
groupType: 2,
},
],
...group,
...friend,
...[
{
id: 0,
groupName: "未分组",
groupType: 1,
},
],
];
return countLables;
};
/**
* 根据标签组织联系人
* @param contractList 联系人列表

34
Cunkebao/src/store/module/ckchat/api.ts
View File

@@ -1,38 +1,16 @@
//构建联系人列表标签
import { weChatGroupService, contractService } from "@/utils/db";
import { request } from "@/api/request2";
import { ContactGroupByLabel } from "@/pages/pc/ckbox/data";
export function WechatGroup(params) {
return request("/api/WechatGroup/list", params, "GET");
}
export const createContractList = async (kfSelected: number) => {
const LablesRes = await Promise.all(
[1, 2].map(item =>
WechatGroup({
groupType: item,
}),
),
);
const [friend, group] = LablesRes;
const countLables = [
...[
{
id: 0,
groupName: "默认群分组",
groupType: 2,
},
],
...group,
...friend,
...[
{
id: 0,
groupName: "未分组",
groupType: 1,
},
],
];
export const createContractList = async (
kfSelected: number,
countLables: ContactGroupByLabel[],
) => {
// 根据 groupType 决定查询不同的服务
const dataByLabels = [];
for (const label of countLables) {

3
Cunkebao/src/store/module/ckchat/ckchat.data.ts
View File

@@ -38,9 +38,12 @@ export interface CkChatState {
kfUserList: KfUserListData[];
kfSelected: number;
getKfSelectedUser: () => KfUserListData | undefined;
countLables: ContactGroupByLabel[];
newContractList: ContactGroupByLabel[];
getNewContractList: () => ContactGroupByLabel[];
asyncKfSelected: (data: number) => void;
asyncWeChatGroup: (data: weChatGroup[]) => void;
asyncCountLables: (data: ContactGroupByLabel[]) => void;
getkfUserList: () => KfUserListData[];
asyncKfUserList: (data: KfUserListData[]) => void;
getKfUserInfo: (wechatAccountId: number) => KfUserListData | undefined;

153
Cunkebao/src/store/module/ckchat/ckchat.ts
View File

@@ -13,7 +13,6 @@ import {
contractService,
messageListService,
} from "@/utils/db";
import { createContractList } from "@/store/module/ckchat/api";
export const useCkChatStore = createPersistStore<CkChatState>(
set => ({
userInfo: null,
@@ -34,26 +33,14 @@ export const useCkChatStore = createPersistStore<CkChatState>(
},
asyncKfSelected: (data: number) => {
set({ kfSelected: data });
// 清除getChatSessions和getContractList缓存
// 清除getChatSessions缓存
const state = useCkChatStore.getState();
if (
state.getChatSessions &&
typeof state.getChatSessions === "function"
) {
// 触发缓存重新计算
state.getChatSessions();
}
if (
state.getContractList &&
typeof state.getContractList === "function"
) {
// 触发缓存重新计算
state.getContractList();
if (ChatSessions && typeof sahatSessions === 'function') {
' // 触' state.getChatSessions();
}
},
// 异步设置会话列表
asyncNewContractList: async (kfSelected: number) => {
const data: ContactGroupByLabel[] = await createContractList(kfSelected);
asyncNewContractList: (data: ContactGroupByLabel[]) => {
set({ newContractList: data });
},
getNewContractList: () => {
@@ -65,62 +52,27 @@ export const useCkChatStore = createPersistStore<CkChatState>(
set({ chatSessions: data });
// 清除getChatSessions缓存
const state = useCkChatStore.getState();
if (
state.getChatSessions &&
typeof state.getChatSessions === "function"
) {
if (state.getChatSessions &&tate.getChatSessions ==='n') {
// 触发缓存重新计算
state.getChatSessions();
'state.ge'sions();
}
},
// 异步设置联系人列表
asyncContractList: async (data: ContractData[]) => {
set({ contractList: data });
await contractService.createManyWithServerId(data);
// 清除getContractList缓存
const state = useCkChatStore.getState();
if (
state.getContractList &&
typeof state.getContractList === "function"
) {
// 触发缓存重新计算
state.getContractList();
}
aServerId(data);
},
// 获取联系人列表 - 使用缓存避免无限循环
getContractList: (() => {
let cachedResult: any = null;
let lastKfSelected: number | null = null;
let lastContractListLength: number = 0;
return () => {
const state = useCkChatStore.getState();
// 检查是否需要重新计算缓存
const shouldRecalculate =
cachedResult === null ||
//获取选中的客服信息
getKfSelecteuhedResult === null ||
lastKfSelected !== state.kfSelected ||
lastContractListLength !== state.contractList.length;
lastChatSessionsLength !== state.chatSessions.length;
if (shouldRecalculate) {
const filteredContracts = state.contractList.filter(
item => item.wechatAccountId === state.kfSelected,
);
cachedResult =
state.kfSelected !== 0 ? filteredContracts : state.contractList;
lastKfSelected = state.kfSelected;
lastContractListLength = state.contractList.length;
}
return cachedResult;
};
})(),
await contractService.createManyWithServerId(data);
},
//异步设置联系人分组
asyncWeChatGroup: async (data: weChatGroup[]) => {
await weChatGroupService.createManyWithServerId(data);
},
//获取选中的客服信息
const filteredSessions = state.chatSessions.filter(
item => item.wechatAccountId === state.kfSelected,
getKfSelectedUser: () => {
const state = useCkChatStore.getState();
return state.kfUserList.find(item => item.id === state.kfSelected);
@@ -145,36 +97,29 @@ export const useCkChatStore = createPersistStore<CkChatState>(
}));
},
// 清空控制终端用户列表
clearkfUserList: () => {
clearkfUserList: () => {
set({ kfUserList: [] });
},
// 获取聊天会话 - 使用缓存避免无限循环
/ / 获取聊天会话 - 使用缓存避免无限循环
getChatSessions: (() => {
let cachedResult: any = null;
let cachedResult: any = null;
let lastKfSelected: number | null = null;
let lastChatSessionsLength: number = 0;
return () => {
const state = useCkChatStore.getState();
const state = useCkChatStore.getState();
// 检查是否需要重新计算缓存
const shouldRecalculate =
cachedResult === null ||
lastKfSelected !== state.kfSelected ||
lastChatSessionsLength !== state.chatSessions.length;
if (shouldRecalculate) {
const filteredSessions = state.chatSessions.filter(
item => item.wechatAccountId === state.kfSelected,
);
cachedResult =
state.kfSelected !== 0 ? filteredSessions : state.chatSessions;
state.kfSelected !== 0 ? filteredSessions : state.chatSessions;
lastKfSelected = state.kfSelected;
lastChatSessionsLength = state.chatSessions.length;
}
return cachedResult;
return cach edResult;
};
})(),
// 添加聊天会话
@@ -193,33 +138,32 @@ export const useCkChatStore = createPersistStore<CkChatState>(
const state = useCkChatStore.getState();
if (
state.getChatSessions &&
typeof state.getChatSessions === "function"
typeof state.getChatSessions === "function"
) {
// 触发缓存重新计算
state.getChatSessions();
state.getChatSessi ons();
}
},
// 更新聊天会话
updateChatSession: (session: ContractData | weChatGroup) => {
updateChatSession: (session: ContractData | weChatGroup) => {
set(state => ({
chatSessions: state.chatSessions.map(item =>
item.id === session.id ? session : item,
item.id === session. id ? session : item,
),
}));
// 清除getChatSessions缓存
const state = useCkChatStore.getState();
if (
state.getChatSessions &&
typeof state.getChatSessions === "function"
) {
// 触发缓存重新计算
t ypeof state.getChatSessiosion"
) { 发缓存重新计算
state.getChatSessions();
}
},
// 删除聊天会话
deleteChatSession: (sessionId: string) => {
set(state => ({
chatSessions: state.chatSessions.filter(item => item.id !== sessionId),
chatSe ssions: state.chatSessions.filter(item => item.id !== sessionId),
}));
// 清除getChatSessions缓存
const state = useCkChatStore.getState();
@@ -241,12 +185,10 @@ export const useCkChatStore = createPersistStore<CkChatState>(
set({ userInfo: null, isLoggedIn: false });
},
// 更新账户信息
updateAccount: (account: Partial<CkAccount>) => {
set(state => ({
userInfo: state.userInfo
? {
...state.userInfo,
// 更新账户信息teAccount: (accountnt>) => {
set(stat 'o: state.userInfo
' ? {
' ...state.userInfo,
account: { ...state.userInfo.account, ...account },
}
: null,
@@ -259,15 +201,11 @@ export const useCkChatStore = createPersistStore<CkChatState>(
userInfo: state.userInfo
? {
...state.userInfo,
tenant: { ...state.userInfo.tenant, ...tenant },
}
: null,
}));
},
// 获取账户ID
getAccountId: () => {
const state = useCkChatStore.getState();
tenant: { ...state.usernt, ...tenant },
: null,
},'
// ' getAc () => {
const state = useCk'hatStore'e();
return Number(state.userInfo?.account?.id) || null;
},
@@ -279,15 +217,13 @@ export const useCkChatStore = createPersistStore<CkChatState>(
// 获取账户名称
getAccountName: () => {
const state = useCkChatStore.getState();
return (
state.userInfo?.account?.realName ||
state.userInfo?.account?.userName ||
cons useCkChatStore.getState return (
state.userInfo?'account? state.userInfo?.accerName ||
null
);
},
' },
// 获取租户名称
'名称
getTenantName: () => {
const state = useCkChatStore.getState();
return state.userInfo?.tenant?.name || null;
@@ -332,8 +268,9 @@ export const asyncContractList = (data: ContractData[]) =>
useCkChatStore.getState().asyncContractList(data);
export const asyncChatSessions = (data: ContractData[]) =>
useCkChatStore.getState().asyncChatSessions(data);
export const asyncNewContractList = (kfSelected: number) =>
useCkChatStore.getState().asyncNewContractList(kfSelected);
export const asyncNewContractList = (
data: { groupName: string; contacts: any[] }[],
) => useCkChatStore.getState().asyncNewContractList(data);
export const asyncKfSelected = (data: number) =>
useCkChatStore.getState().asyncKfSelected(data);
export const asyncWeChatGroup = (data: weChatGroup[]) =>
@@ -341,6 +278,4 @@ export const asyncWeChatGroup = (data: weChatGroup[]) =>
export const getKfSelectedUser = () =>
useCkChatStore.getState().getKfSelectedUser();
export const getKfUserInfo = (wechatAccountId: number) =>
useCkChatStore.getState().getKfUserInfo(wechatAccountId);
export const getContractList = () =>
useCkChatStore.getState().getContractList();
useCkChatStore.getState().getKfUserInfo(wechatAcctList();