refactor(TransmitModal): 重构转发模态框组件并集成到消息记录

- 删除旧版转发模态框组件及相关文件
- 实现新版转发模态框组件，支持联系人搜索和多选
- 集成转发功能到消息记录组件
- 更新状态管理以支持转发功能
- 优化样式和响应式设计

Touchkebao/src/store/module/weChat/weChat.data.ts

@@ -4,64 +4,104 @@ import {
   likeListItem,
   FriendsCircleItem,
 } from "@/pages/pc/ckbox/weChat/components/SidebarMenu/FriendsCicle/index.data";
-// 微信聊天相关的类型定义
-export interface WeChatState {
-  //选择聊天记录
-  selectedMessage: ChatRecord[];
-  updateSelectedMessage: (message: ChatRecord[]) => void;
-  //选择用户或群
-  selectedContact: ContractData[] | weChatGroup[];
-  updateSelectedContact: (contact: ContractData[] | weChatGroup[]) => void;
 
+/**
+ * 微信聊天状态管理接口定义
+ * 包含聊天消息、联系人管理、朋友圈等功能的状态和方法
+ */
+export interface WeChatState {
+  // ==================== Transmit Module =========Start===========
+  /** 选中的聊天记录列表 */
+  selectedChatRecords: ChatRecord[];
+  /** 更新选中的聊天记录 */
+  updateSelectedChatRecords: (message: ChatRecord[]) => void;
+
+  /** 选中的联系人或群组列表 */
+  selectedTransmitContact: ContractData[] | weChatGroup[];
+  /** 更新选中的联系人或群组 */
+  updateSelectedTransmitContact: (
+    contact: ContractData[] | weChatGroup[],
+  ) => void;
+
+  /** 转发弹窗开启状态 */
   openTransmitModal: boolean;
+  /** 更新转发弹窗状态 */
   updateTransmitModal: (open: boolean) => void;
-  // 当前选中的联系人/群组
+  // ==================== Transmit Module =========END===========
+
+  // ==================== 当前联系人管理 ====================
+  /** 当前选中的联系人/群组 */
   currentContract: ContractData | weChatGroup | null;
-  // CurrentContact 相关方法
+  /** 清空当前联系人 */
   clearCurrentContact: () => void;
+  /** 设置当前联系人 */
   setCurrentContact: (
     contract: ContractData | weChatGroup,
     isExist?: boolean,
   ) => void;
 
-  // 当前聊天用户的消息列表（只存储当前聊天用户的消息）
+  // ==================== 聊天消息管理 ====================
+  /** 当前聊天的消息列表 */
   currentMessages: ChatRecord[];
-  // 添加消息
+  /** 添加新消息 */
   addMessage: (message: ChatRecord) => void;
-  // 替换消息
+  /** 更新指定消息 */
   updateMessage: (messageId: number, updates: Partial<ChatRecord>) => void;
-  // 撤回消息
+  /** 撤回指定消息 */
   recallMessage: (messageId: number) => void;
-  // 消息加载状态
+  /** 消息加载状态 */
   messagesLoading: boolean;
+  /** 数据初始化加载状态 */
   isLoadingData: boolean;
+  /** 当前群组成员列表 */
   currentGroupMembers: any[];
-  showCheckbox: boolean;
-  updateShowCheckbox: (show: boolean) => void;
-  EnterModule: string;
-  // EnterModule 相关方法
-  updateEnterModule: (module: string) => void;
-  MomentCommon: FriendsCircleItem[];
-  // MomentCommon 相关方法
-  clearMomentCommon: () => void;
-  addMomentCommon: (moment: FriendsCircleItem[]) => void;
-  updateMomentCommon: (moments: FriendsCircleItem[]) => void;
 
+  // ==================== 界面状态管理 ====================
+  /** 是否显示复选框 */
+  showCheckbox: boolean;
+  /** 更新复选框显示状态 */
+  updateShowCheckbox: (show: boolean) => void;
+  /** 进入模块类型 (common | multipleForwarding) */
+  EnterModule: string;
+  /** 更新进入模块类型 */
+  updateEnterModule: (module: string) => void;
+
+  // ==================== 朋友圈相关 ====================
+  /** 朋友圈数据列表 */
+  MomentCommon: FriendsCircleItem[];
+  /** 朋友圈数据加载状态 */
   MomentCommonLoading: boolean;
-  // MomentCommon 相关方法
+  /** 清空朋友圈数据 */
+  clearMomentCommon: () => void;
+  /** 添加朋友圈数据 */
+  addMomentCommon: (moment: FriendsCircleItem[]) => void;
+  /** 更新朋友圈数据 */
+  updateMomentCommon: (moments: FriendsCircleItem[]) => void;
+  /** 更新朋友圈加载状态 */
   updateMomentCommonLoading: (loading: boolean) => void;
+  /** 更新朋友圈点赞 */
   updateLikeMoment: (snsId: string, likeList: likeListItem[]) => void;
+  /** 更新朋友圈评论 */
   updateComment: (snsId: string, commentList: CommentItem[]) => void;
 
+  // ==================== 消息加载方法 ====================
+  /** 加载聊天消息 */
   loadChatMessages: (Init: boolean, To?: number) => Promise<void>;
+  /** 搜索消息 */
   SearchMessage: (params: {
     From: number;
     To: number;
     keyword: string;
     Count?: number;
   }) => Promise<void>;
-  // 视频消息处理方法
+
+  // ==================== 视频消息处理 ====================
+  /** 设置视频消息加载状态 */
   setVideoLoading: (messageId: number, isLoading: boolean) => void;
+  /** 设置视频消息URL */
   setVideoUrl: (messageId: number, videoUrl: string) => void;
+
+  // ==================== 消息接收处理 ====================
+  /** 接收新消息处理 */
   receivedMsg: (message: ChatRecord) => void;
 }

Touchkebao/src/store/module/weChat/weChat.ts

@@ -20,36 +20,52 @@ import {
   useCkChatStore,
 } from "@/store/module/ckchat/ckchat";
 
+/**
+ * 微信聊天状态管理 Store
+ * 使用 Zustand 管理微信聊天相关的状态和操作
+ */
 export const useWeChatStore = create<WeChatState>()(
   persist(
     (set, get) => ({
-      //选择聊天记录
-      selectedMessage: [],
-      updateSelectedMessage: (message: ChatRecord[]) => {
-        set({ selectedMessage: message });
+      // ==================== Transmit Module =========Start===========
+      /** 选中的聊天记录列表 */
+      selectedChatRecords: [],
+      /** 更新选中的聊天记录 */
+      updateSelectedChatRecords: (message: ChatRecord[]) => {
+        set({ selectedChatRecords: message });
       },
-      //选择用户或群
-      selectedContact: [],
-      updateSelectedContact: (contact: ContractData[] | weChatGroup[]) => {
-        set({ selectedContact: contact });
-      },
-      //打开转发弹窗
-      openTransmitModal: false,
 
+      /** 选中的联系人或群组列表 */
+      selectedTransmitContact: [],
+      /** 更新选中的联系人或群组 */
+      updateSelectedTransmitContact: (
+        contact: ContractData[] | weChatGroup[],
+      ) => {
+        set({ selectedTransmitContact: contact });
+      },
+
+      /** 转发弹窗开启状态 */
+      openTransmitModal: false,
+      /** 更新转发弹窗状态 */
       updateTransmitModal: (open: boolean) => {
         set({ openTransmitModal: open });
       },
+      // ==================== Transmit Module =========END===========
 
-      // 初始状态
+      // ==================== 当前联系人管理状态 ====================
+      /** 当前选中的联系人/群组 */
       currentContract: null,
+      /** 当前聊天的消息列表 */
       currentMessages: [],
-      //添加消息
+
+      // ==================== 聊天消息管理方法 ====================
+      /** 添加新消息到当前聊天 */
       addMessage: message => {
         set(state => ({
           currentMessages: [...state.currentMessages, message],
         }));
       },
-      //替换消息
+      /** 更新指定消息内容 */
       updateMessage: (messageId, updates) => {
         set(state => ({
           currentMessages: state.currentMessages.map(msg =>
@@ -57,7 +73,7 @@ export const useWeChatStore = create<WeChatState>()(
           ),
         }));
       },
-      //撤回消息
+      /** 撤回指定消息 */
       recallMessage: (messageId: number) => {
         set(state => ({
           currentMessages: state.currentMessages.filter(
@@ -66,31 +82,44 @@ export const useWeChatStore = create<WeChatState>()(
         }));
       },
 
+      // ==================== 加载状态管理 ====================
+      /** 消息加载状态 */
       messagesLoading: false,
+      /** 数据初始化加载状态 */
       isLoadingData: false,
+      /** 当前群组成员列表 */
       currentGroupMembers: [],
+
+      // ==================== 界面状态管理 ====================
+      /** 是否显示复选框 */
       showCheckbox: false,
+      /** 更新复选框显示状态 */
       updateShowCheckbox: (show: boolean) => {
         set({ showCheckbox: show });
       },
-      EnterModule: "common", //common | multipleForwarding
+      /** 进入模块类型 (common | multipleForwarding) */
+      EnterModule: "common",
+      /** 更新进入模块类型 */
       updateEnterModule: (module: string) => {
         set({ EnterModule: module });
       },
-      MomentCommon: [], //朋友圈数据
-      MomentCommonLoading: false, //朋友圈数据是否正在加载
 
-      // MomentCommon 相关方法
+      // ==================== 朋友圈相关状态 ====================
+      /** 朋友圈数据列表 */
+      MomentCommon: [],
+      /** 朋友圈数据加载状态 */
+      MomentCommonLoading: false,
+      /** 更新朋友圈加载状态 */
       updateMomentCommonLoading: (loading: boolean) => {
         set({ MomentCommonLoading: loading });
       },
-      //============方法列表============
 
-      //清空当前联系人
+      // ==================== 当前联系人管理方法 ====================
+      /** 清空当前联系人和消息 */
       clearCurrentContact: () => {
         set({ currentContract: null, currentMessages: [] });
       },
-      // Actions
+      /** 设置当前联系人并加载相关数据 */
       setCurrentContact: (
         contract: ContractData | weChatGroup,
         isExist?: boolean,
@@ -112,6 +141,9 @@ export const useWeChatStore = create<WeChatState>()(
           state.loadChatMessages(true, 4704624000000);
         });
       },
+
+      // ==================== 消息加载方法 ====================
+      /** 加载聊天消息 */
       loadChatMessages: async (Init: boolean, To?: number) => {
         const state = useWeChatStore.getState();
         const contact = state.currentContract;
@@ -127,6 +159,7 @@ export const useWeChatStore = create<WeChatState>()(
           };
 
           if ("chatroomId" in contact && contact.chatroomId) {
+            // 群聊消息加载
             params.wechatChatroomId = contact.id;
             const messages = await getChatroomMessages(params);
             const currentGroupMembers = await getGroupMembers({
@@ -143,6 +176,7 @@ export const useWeChatStore = create<WeChatState>()(
               });
             }
           } else {
+            // 私聊消息加载
             params.wechatFriendId = contact.id;
             const messages = await getChatMessages(params);
             if (Init) {
@@ -163,6 +197,8 @@ export const useWeChatStore = create<WeChatState>()(
           set({ messagesLoading: false });
         }
       },
+
+      /** 搜索消息 */
       SearchMessage: async ({
         From = 1,
         To = 4704624000000,
@@ -189,6 +225,7 @@ export const useWeChatStore = create<WeChatState>()(
           };
 
           if ("chatroomId" in contact && contact.chatroomId) {
+            // 群聊消息搜索
             params.wechatChatroomId = contact.id;
             const messages = await getChatroomMessages(params);
             const currentGroupMembers = await getGroupMembers({
@@ -196,6 +233,7 @@ export const useWeChatStore = create<WeChatState>()(
             });
             set({ currentMessages: messages || [], currentGroupMembers });
           } else {
+            // 私聊消息搜索
             params.wechatFriendId = contact.id;
             const messages = await getChatMessages(params);
             set({ currentMessages: messages || [] });
@@ -208,29 +246,34 @@ export const useWeChatStore = create<WeChatState>()(
         }
       },
 
+      /** 设置消息加载状态 */
       setMessageLoading: loading => {
         set({ messagesLoading: Boolean(loading) });
       },
 
+      // ==================== 消息接收处理 ====================
+      /** 接收新消息处理 */
       receivedMsg: async message => {
         const currentContract = useWeChatStore.getState().currentContract;
-        //判断群还是好友
+        // 判断是群聊还是私聊
         const getMessageId =
           message?.wechatChatroomId || message.wechatFriendId;
         const isWechatGroup = message?.wechatChatroomId;
-        //当前选中聊天的群或好友
+
+        // 如果是当前选中的聊天，直接添加到消息列表
         if (currentContract && currentContract.id == getMessageId) {
           set(state => ({
             currentMessages: [...state.currentMessages, message],
           }));
         } else {
-          //更新消息列表unread数值，根据接收的++1 这样
+          // 更新其他聊天的未读消息数
           const chatSessions = useCkChatStore.getState().chatSessions;
           const session = chatSessions.find(item => item.id == getMessageId);
           if (session) {
             session.unreadCount = Number(session.unreadCount) + 1;
             updateChatSession(session);
           } else {
+            // 如果会话不存在，创建新会话
             if (isWechatGroup) {
               const [group] = await weChatGroupService.findByIds(getMessageId);
               if (group) {
@@ -250,12 +293,16 @@ export const useWeChatStore = create<WeChatState>()(
         }
       },
 
-      // 便捷选择器
+      // ==================== 便捷选择器方法 ====================
+      /** 获取当前联系人 */
       getCurrentContact: () => get().currentContract,
+      /** 获取当前消息列表 */
       getCurrentMessages: () => get().currentMessages,
+      /** 获取消息加载状态 */
       getMessagesLoading: () => get().messagesLoading,
 
-      // 视频消息处理方法
+      // ==================== 视频消息处理方法 ====================
+      /** 设置视频消息加载状态 */
       setVideoLoading: (messageId: number, isLoading: boolean) => {
         set(state => ({
           currentMessages: state.currentMessages.map(msg => {
@@ -278,6 +325,7 @@ export const useWeChatStore = create<WeChatState>()(
         }));
       },
 
+      /** 设置视频消息URL */
       setVideoUrl: (messageId: number, videoUrl: string) => {
         set(state => ({
           currentMessages: state.currentMessages.map(msg => {
@@ -309,6 +357,9 @@ export const useWeChatStore = create<WeChatState>()(
           }),
         }));
       },
+
+      // ==================== 数据清理方法 ====================
+      /** 清空所有数据 */
       clearAllData: () => {
         set({
           currentContract: null,
@@ -317,21 +368,25 @@ export const useWeChatStore = create<WeChatState>()(
         });
       },
 
-      // MomentCommon 相关方法
+      // ==================== 朋友圈管理方法 ====================
+      /** 清空朋友圈数据 */
       clearMomentCommon: () => {
         set({ MomentCommon: [] });
       },
 
+      /** 添加朋友圈数据 */
       addMomentCommon: moment => {
         set(state => ({
           MomentCommon: [...state.MomentCommon, ...moment],
         }));
       },
 
+      /** 更新朋友圈数据 */
       updateMomentCommon: moments => {
         set({ MomentCommon: moments });
       },
 
+      /** 更新朋友圈点赞 */
       updateLikeMoment: (snsId: string, likeList: likeListItem[]) => {
         set(state => ({
           MomentCommon: state.MomentCommon.map(moment =>
@@ -340,6 +395,7 @@ export const useWeChatStore = create<WeChatState>()(
         }));
       },
 
+      /** 更新朋友圈评论 */
       updateComment: (snsId: string, commentList: CommentItem[]) => {
         set(state => ({
           MomentCommon: state.MomentCommon.map(moment =>
@@ -357,12 +413,16 @@ export const useWeChatStore = create<WeChatState>()(
   ),
 );
 
-// 导出便捷的选择器函数
+// ==================== 便捷选择器导出 ====================
+/** 获取当前联系人的 Hook */
 export const useCurrentContact = () =>
   useWeChatStore(state => state.currentContract);
+/** 获取当前消息列表的 Hook */
 export const useCurrentMessages = () =>
   useWeChatStore(state => state.currentMessages);
+/** 获取消息加载状态的 Hook */
 export const useMessagesLoading = () =>
   useWeChatStore(state => state.messagesLoading);
+/** 获取复选框显示状态的 Hook */
 export const useShowCheckbox = () =>
   useWeChatStore(state => state.showCheckbox);