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

- 在ContactGroupByLabel和weChatGroup接口中添加count和labels字段 - 将weChatGroup重命名为weChatGroupServerId以更准确描述用途 - 修改数据库操作，使用service直接处理数据存储 - 重构createContractList函数，根据groupType查询不同服务获取数据 - 移除VerticalUserList中不必要的异步获取逻辑，直接使用store数据
2025-08-30 17:02:31 +08:00
parent 14f0a6d7f3
commit 0975995486
7 changed files with 62 additions and 35 deletions
--- a/Cunkebao/src/pages/mobile/test/db.tsx
+++ b/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();
            },
--- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx
+++ b/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[]>([]); // 默认展开第一个分组

  // 分页加载相关状态
--- a/Cunkebao/src/pages/pc/ckbox/components/VerticalUserList/index.tsx
+++ b/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(() => {
-    const fetchKfUserList = async () => {
-      try {
-        const data = await getkfUserList();
-        setKefuList(data || []);
-      } catch (error) {
-        console.error("获取客服列表失败:", error);
-        setKefuList([]);
-      }
-    };
+  // // 获取客服列表数据
+  // useEffect(() => {
+  //   const fetchKfUserList = async () => {
+  //     try {
+  //       const data = await getkfUserList();
+  //       setKefuList(data || []);
+  //     } catch (error) {
+  //       console.error("获取客服列表失败:", error);
+  //       setKefuList([]);
+  //     }
+  //   };

-    fetchKfUserList();
-  }, [getkfUserList]);
+  //   fetchKfUserList();
+  // }, [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 : ""}`}
--- a/Cunkebao/src/pages/pc/ckbox/data.ts
+++ b/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;
--- a/Cunkebao/src/pages/pc/ckbox/main.ts
+++ b/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 organizeContactsByLabels(countLables, contractList, groupList);
+  return dataByLabels;
 };

 /**
--- a/Cunkebao/src/store/module/ckchat/ckchat.ts
+++ b/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 => {
-      set({ contractList: data });
+    asyncContractList: async (data: ContractData[]) => {
+      await contractService.createManyWithServerId(data);
    },
    //异步设置联系人分组
-    asyncWeChatGroup: (data: ContactGroupByLabel[]) => {
-      set({ weChatGroup: data });
+    asyncWeChatGroup: async (data: weChatGroup[]) => {
+      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);
--- a/Cunkebao/src/utils/db.ts
+++ b/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>;