feat(ckbox): 重构微信联系人分组逻辑并优化数据库操作

- 在ContactGroupByLabel和weChatGroup接口中添加count和labels字段
- 将weChatGroup重命名为weChatGroupServerId以更准确描述用途
- 修改数据库操作，使用service直接处理数据存储
- 重构createContractList函数，根据groupType查询不同服务获取数据
- 移除VerticalUserList中不必要的异步获取逻辑，直接使用store数据

Cunkebao/src/pages/mobile/test/db.tsx

@@ -331,10 +331,10 @@ const DatabaseTestPage: React.FC = () => {
         try {
           await db.transaction(
             "rw",
-            [db.kfUsers, db.groups, db.contracts, db.newContractList],
+            [db.kfUsers, db.weChatGroups, db.contracts, db.newContractList],
             async () => {
               await db.kfUsers.clear();
-              await db.groups.clear();
+              await db.weChatGroups.clear();
               await db.contracts.clear();
               await db.newContractList.clear();
             },

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

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

Cunkebao/src/pages/pc/ckbox/components/VerticalUserList/index.tsx

@@ -14,24 +14,24 @@ const VerticalUserList: React.FC = () => {
   const handleUserSelect = (userId: number) => {
     asyncKfSelected(userId);
   };
-  const getkfUserList = useCkChatStore(state => state.getkfUserList);
+  const kfUserList = useCkChatStore(state => state.kfUserList);
   const kfSelected = useCkChatStore(state => state.kfSelected);
   const [kefuList, setKefuList] = useState([]);
 
-  // 获取客服列表数据
+  // // 获取客服列表数据
-  useEffect(() => {
+  // useEffect(() => {
-    const fetchKfUserList = async () => {
+  //   const fetchKfUserList = async () => {
-      try {
+  //     try {
-        const data = await getkfUserList();
+  //       const data = await getkfUserList();
-        setKefuList(data || []);
+  //       setKefuList(data || []);
-      } catch (error) {
+  //     } catch (error) {
-        console.error("获取客服列表失败:", error);
+  //       console.error("获取客服列表失败:", error);
-        setKefuList([]);
+  //       setKefuList([]);
-      }
+  //     }
-    };
+  //   };
 
-    fetchKfUserList();
+  //   fetchKfUserList();
-  }, [getkfUserList]);
+  // }, [getkfUserList]);
   return (
     <div className={styles.verticalUserList}>
       <div
@@ -42,7 +42,7 @@ const VerticalUserList: React.FC = () => {
         <div className={styles.allFriends}>全部好友</div>
       </div>
       <div className={styles.userList}>
-        {kefuList.map(user => (
+        {kfUserList.map(user => (
           <Tooltip key={user.id} title={user.name} placement="right">
             <div
               className={`${styles.userItem} ${kfSelected === user.id ? styles.active : ""}`}

Cunkebao/src/pages/pc/ckbox/data.ts

@@ -4,6 +4,7 @@ export interface ContactGroupByLabel {
   accountId?: number;
   groupName: string;
   tenantId?: number;
+  count: number;
   [key: string]: any;
 }
 //终端用户数据接口
@@ -63,6 +64,7 @@ export interface weChatGroup {
   config?: {
     chat: boolean;
   };
+  labels: string[];
   unreadCount: number;
   notice: string;
   selfDisplyName: string;

Cunkebao/src/pages/pc/ckbox/main.ts

@@ -3,6 +3,7 @@ import {
   asyncContractList,
   asyncChatSessions,
   asyncNewContractList,
+  asyncWeChatGroup,
 } from "@/store/module/ckchat/ckchat";
 import { useWebSocketStore } from "@/store/module/websocket";
 
@@ -15,6 +16,7 @@ import {
 } from "./api";
 const { sendCommand } = useWebSocketStore.getState();
 import { useUserStore } from "@/store/module/user";
+import { kfUserService, weChatGroupService, contractService } from "@/utils/db";
 import {
   ContractData,
   weChatGroup,
@@ -39,15 +41,17 @@ export const chatInitAPIdata = async () => {
       await getControlTerminalListByWechatAccountIds(uniqueWechatAccountIds);
 
     //获取用户列表
-    asyncKfUserList(kfUserList);
+    await asyncKfUserList(kfUserList);
 
     //获取群列表
     const groupList = await getAllGroupList();
 
+    await asyncWeChatGroup(groupList);
+
     //构建联系人列表标签
     const newContractList = await createContractList();
     // 会话列表分组
-    asyncNewContractList(newContractList);
+    await asyncNewContractList(newContractList);
     //获取消息会话列表并按lastUpdateTime排序
     const filterUserSessions = contractList?.filter(
       v => v?.config && v.config?.chat,
@@ -103,29 +107,47 @@ export const createContractList = async () => {
     ),
   );
   const [friend, group] = LablesRes;
-  const lastIndex = friend.length + group.length + 1;
   const countLables = [
     ...[
       {
         id: 0,
         groupName: "默认群分组",
+        groupType: 2,
       },
     ],
-    ...friend,
     ...group,
+    ...friend,
     ...[
       {
-        id: lastIndex,
+        id: 0,
         groupName: "未分组",
+        groupType: 1,
       },
     ],
   ];
 
-  return countLables;
+  // 根据 groupType 决定查询不同的服务
+  const dataByLabels = [];
+  for (const label of countLables) {
+    let data;
+    if (label.groupType === 1) {
+      // groupType: 1, 查询 contractService
+      data = await contractService.findWhere("groupId", label.id);
+      // console.log(`标签 ${label.groupName} 对应的联系人数据:`, data);
+    } else if (label.groupType === 2) {
+      // groupType: 2, 查询 weChatGroupService
+      data = await weChatGroupService.findWhere("groupId", label.id);
+    } else {
+      console.warn(`未知的 groupType: ${label.groupType}`);
+      data = [];
+    }
+    dataByLabels.push({
+      ...label,
+      contacts: data,
+    });
+  }
 
-  // 根据countLables中的groupName整理contractList数据
+  return dataByLabels;
-  // 返回按标签分组的联系人数组，包括未分组标签（在数组最后）
-  // return organizeContactsByLabels(countLables, contractList, groupList);
 };
 
 /**

Cunkebao/src/store/module/ckchat/ckchat.ts

@@ -7,7 +7,7 @@ import {
   KfUserListData,
   ContactGroupByLabel,
 } from "@/pages/pc/ckbox/data";
-import { kfUserService } from "@/utils/db";
+import { kfUserService, weChatGroupService, contractService } from "@/utils/db";
 export const useCkChatStore = createPersistStore<CkChatState>(
   set => ({
     userInfo: null,
@@ -19,7 +19,8 @@ export const useCkChatStore = createPersistStore<CkChatState>(
     kfSelected: 0,
     //客服列表
     asyncKfUserList: async data => {
-      await kfUserService.createManyWithServerId(data);
+      set({ kfUserList: data });
+      // await kfUserService.createManyWithServerId(data);
     },
     // 获取客服列表
     getkfUserList: async () => {
@@ -41,12 +42,12 @@ export const useCkChatStore = createPersistStore<CkChatState>(
       set({ chatSessions: data });
     },
     // 异步设置联系人列表
-    asyncContractList: data => {
+    asyncContractList: async (data: ContractData[]) => {
-      set({ contractList: data });
+      await contractService.createManyWithServerId(data);
     },
     //异步设置联系人分组
-    asyncWeChatGroup: (data: ContactGroupByLabel[]) => {
+    asyncWeChatGroup: async (data: weChatGroup[]) => {
-      set({ weChatGroup: data });
+      await weChatGroupService.createManyWithServerId(data);
     },
     //获取选中的客服信息
     getgetKfSelectedUser: () => {
@@ -210,3 +211,5 @@ export const asyncNewContractList = (
 ) => useCkChatStore.getState().asyncNewContractList(data);
 export const asyncKfSelected = (data: number) =>
   useCkChatStore.getState().asyncKfSelected(data);
+export const asyncWeChatGroup = (data: weChatGroup[]) =>
+  useCkChatStore.getState().asyncWeChatGroup(data);

Cunkebao/src/utils/db.ts

@@ -38,7 +38,7 @@ export interface KfUserWithServerId extends Omit<KfUserListData, "id"> {
   id?: number; // 接口数据的原始ID字段
 }
 
-export interface GroupWithServerId extends Omit<weChatGroup, "id"> {
+export interface weChatGroupServerId extends Omit<weChatGroup, "id"> {
   serverId: number | string; // 服务器ID作为主键
   id?: number; // 接口数据的原始ID字段
 }
@@ -60,7 +60,7 @@ export interface NewContactListData {
 // 数据库类
 class CunkebaoDatabase extends Dexie {
   kfUsers!: Table<KfUserWithServerId>;
-  weChatGroup!: Table<GroupWithServerId>;
+  weChatGroup!: Table<weChatGroupServerId>;
   contracts!: Table<ContractWithServerId>;
   newContractList!: Table<NewContactListData>;