feat(TransmitModal): 添加分页功能并优化联系人显示

在转发模态框中实现了联系人列表的分页功能，提升了用户体验。同时，优化了联系人信息的显示方式，增加了备注信息的样式支持。

Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransmitModal/TransmitModal.module.scss

@@ -73,7 +73,9 @@
     margin-bottom: 0;
   }
 }
-
+.paginationContainer {
+  padding: 20px;
+}
 .selectedItem {
   justify-content: space-between;
 }
@@ -93,6 +95,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.conRemark {
+  font-size: 12px;
+  color: #8c8c8c;
+}
 
 .groupIcon {
   color: #1890ff;

Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransmitModal/index.tsx

@@ -8,6 +8,7 @@ import {
   Empty,
   Spin,
   message,
+  Pagination,
 } from "antd";
 import {
   SearchOutlined,
@@ -33,6 +34,8 @@ const TransmitModal: React.FC<TransmitModalProps> = ({ onConfirm }) => {
     (ContractData | weChatGroup)[]
   >([]);
   const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const pageSize = 20;
 
   // 从 Zustand store 获取更新方法
   const openTransmitModal = useWeChatStore(state => state.openTransmitModal);
@@ -65,6 +68,7 @@ const TransmitModal: React.FC<TransmitModalProps> = ({ onConfirm }) => {
     if (openTransmitModal) {
       setSearchValue("");
       setSelectedWechatFriend([]);
+      setPage(1);
       loadContacts();
     }
   }, [openTransmitModal]);
@@ -74,18 +78,29 @@ const TransmitModal: React.FC<TransmitModalProps> = ({ onConfirm }) => {
     if (!searchValue.trim()) return allContacts;
 
     const keyword = searchValue.toLowerCase();
-    return allContacts.filter(
-      contact =>
-        contact.nickname.toLowerCase().includes(keyword) ||
-        contact.pinyin?.toLowerCase().includes(keyword),
-    );
+    return allContacts.filter(contact => {
+      const name = (contact.nickname || "").toLowerCase();
+      const quanPin = (contact as any).quanPin?.toLowerCase?.() || "";
+      const pinyin = (contact as any).pinyin?.toLowerCase?.() || "";
+      return (
+        name.includes(keyword) ||
+        quanPin.includes(keyword) ||
+        pinyin.includes(keyword)
+      );
+    });
   }, [allContacts, searchValue]);
 
+  const paginatedContacts = useMemo(() => {
+    const start = (page - 1) * pageSize;
+    const end = start + pageSize;
+    return filteredContacts.slice(start, end);
+  }, [filteredContacts, page]);
+
   // 处理联系人选择
   const handleContactSelect = (contact: ContractData | weChatGroup) => {
     setSelectedWechatFriend(prev => {
       if (isContactSelected(contact.id)) {
-        return prev.filter(contact => contact.id !== contact.id);
+        return prev.filter(item => item.id !== contact.id);
       }
       return [...prev, contact];
     });
@@ -160,15 +175,11 @@ const TransmitModal: React.FC<TransmitModalProps> = ({ onConfirm }) => {
                   <span>加载联系人中...</span>
                 </div>
               ) : filteredContacts.length > 0 ? (
-                filteredContacts.map(contact => (
-                  <div
-                    key={contact.id}
-                    className={styles.contactItem}
-                    onChange={() => handleContactSelect(contact)}
-                  >
+                paginatedContacts.map(contact => (
+                  <div key={contact.id} className={styles.contactItem}>
                     <Checkbox
                       checked={isContactSelected(contact.id)}
-                      disabled={isContactSelected(contact.id)}
+                      onChange={() => handleContactSelect(contact)}
                     >
                       <div className={styles.contactInfo}>
                         <Avatar
@@ -182,10 +193,14 @@ const TransmitModal: React.FC<TransmitModalProps> = ({ onConfirm }) => {
                             )
                           }
                         />
-                        <span className={styles.contactName}>
-                          {contact.nickname}
-                          {contact.conRemark && `-(${contact.conRemark})`}
-                        </span>
+                        <div className={styles.contactName}>
+                          <div>{contact.nickname}</div>
+                          {contact.conRemark && (
+                            <div className={styles.conRemark}>
+                              {contact.conRemark}
+                            </div>
+                          )}
+                        </div>
                         {contact.type === "group" && (
                           <TeamOutlined className={styles.groupIcon} />
                         )}
@@ -202,6 +217,18 @@ const TransmitModal: React.FC<TransmitModalProps> = ({ onConfirm }) => {
                 />
               )}
             </div>
+            {filteredContacts.length > 0 && (
+              <div className={styles.paginationContainer}>
+                <Pagination
+                  size="small"
+                  current={page}
+                  pageSize={pageSize}
+                  total={filteredContacts.length}
+                  onChange={p => setPage(p)}
+                  showSizeChanger={false}
+                />
+              </div>
+            )}
           </div>
 
           {/* 右侧已选择列表 */}
@@ -225,10 +252,14 @@ const TransmitModal: React.FC<TransmitModalProps> = ({ onConfirm }) => {
                           )
                         }
                       />
-                      <span className={styles.contactName}>
-                        {contact.nickname}
-                        {contact.conRemark && `-(${contact.conRemark})`}
-                      </span>
+                      <div className={styles.contactName}>
+                        <div>{contact.nickname}</div>
+                        {contact.conRemark && (
+                          <div className={styles.conRemark}>
+                            {contact.conRemark}
+                          </div>
+                        )}
+                      </div>
                       {contact.type === "group" && (
                         <TeamOutlined className={styles.groupIcon} />
                       )}