feat(客戶管理頁面優化): 更新客戶管理頁面，調整聯絡人卡片的最小高度，移除不必要的樣式，並整合聯絡人數據加載邏輯，提升頁面性能與用戶體驗。

Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss

@@ -116,7 +116,6 @@
 .tabs {
   display: flex;
   gap: 0;
-  margin-bottom: 24px;
   border-bottom: 1px solid #f0f0f0;
 
   .tab {
@@ -155,7 +154,6 @@
   padding: 20px;
   transition: all 0.3s;
   height: 100%;
-  min-height: 380px;
   display: flex;
   flex-direction: column;
 
@@ -320,7 +318,7 @@
   }
 
   .contactCard {
-    min-height: 350px;
+    min-height: 175px;
   }
 
   .header {

Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useEffect } from "react";
 import PowerNavigation from "@/components/PowerNavtion";
 import {
   SearchOutlined,
@@ -7,11 +7,10 @@ import {
   PhoneOutlined,
 } from "@ant-design/icons";
 import styles from "./index.module.scss";
-import { Button, Input, Row, Col } from "antd";
+import { Button, Input, Row, Col, Pagination, Spin, message } from "antd";
-import { useCkChatStore } from "@/store/module/ckchat/ckchat";
+import { getContactList } from "@/pages/pc/ckbox/weChat/api";
 import { ContractData } from "@/pages/pc/ckbox/data";
-// 直接使用 ContractData 类型
+import Layout from "@/components/Layout/LayoutFiexd";
-
 // 头像组件
 const Avatar: React.FC<{ name: string; avatar?: string; size?: number }> = ({
   name,
@@ -64,52 +63,112 @@ const Avatar: React.FC<{ name: string; avatar?: string; size?: number }> = ({
 };
 
 const CustomerManagement: React.FC = () => {
-  const [activeTab, setActiveTab] = useState("customer");
+  const [activeTab, setActiveTab] = useState("all");
   const [searchValue, setSearchValue] = useState("");
+  const [contacts, setContacts] = useState<ContractData[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 12,
+    total: 0,
+  });
 
-  // 获取联系人数据
+  // 获取各分类的总数
-  const getContractList = useCkChatStore(state => state.getContractList);
+  const [tabCounts, setTabCounts] = useState({
-  const contacts: ContractData[] = getContractList();
+    all: 0,
-  console.log(contacts, "contacts");
+    customer: 0,
-
+    potential: 0,
-  // 动态计算各分类的联系人数量
+    partner: 0,
-  const tabCounts = useMemo(() => {
+    friend: 0,
-    return {
+  });
-      customer: contacts.filter(c => c.isPassed).length,
-      potential: contacts.filter(c => !c.isPassed).length,
-      partner: 0, // 可以根据业务逻辑调整
-      friend: 0, // 可以根据业务逻辑调整
-    };
-  }, [contacts]);
 
   const tabs = [
+    { key: "all", label: "全部", count: tabCounts.all },
     { key: "customer", label: "客户", count: tabCounts.customer },
     { key: "potential", label: "潜在客户", count: tabCounts.potential },
     { key: "partner", label: "合作伙伴", count: tabCounts.partner },
     { key: "friend", label: "朋友", count: tabCounts.friend },
   ];
 
-  // const filteredContacts = contacts.filter(contact => {
+  // 加载联系人数据
-  //   const isCategoryMatch =
+  const loadContacts = async (page: number = 1, pageSize: number = 12) => {
-  //     (activeTab === "customer" && contact.isPassed) ||
+    try {
-  //     (activeTab === "potential" && !contact.isPassed) ||
+      setLoading(true);
-  //     activeTab === "partner" ||
-  //     activeTab === "friend";
 
-  //   const isSearchMatch =
+      // 构建请求参数
-  //     searchValue === "" ||
+      const params: any = {
-  //     contact.nickname?.includes(searchValue) ||
+        page,
-  //     contact.conRemark?.includes(searchValue) ||
+        limit: pageSize,
-  //     contact.alias?.includes(searchValue) ||
+      };
-  //     contact.desc?.includes(searchValue) ||
+
-  //     contact.labels?.some(tag => tag.includes(searchValue));
+      // 添加搜索条件
+      if (searchValue.trim()) {
+        params.keyword = searchValue;
+      }
+
+      // 添加分类筛选
+      if (activeTab === "customer") {
+        params.isPassed = true;
+      } else if (activeTab === "potential") {
+        params.isPassed = false;
+      }
+      // "全部"、"partner" 和 "friend" 不添加额外筛选条件
+
+      const response = await getContactList(params);
+
+      // 假设接口返回格式为 { data: Contact[], total: number, page: number, limit: number }
+      setContacts(response.data || response.list || []);
+      setPagination(prev => ({
+        ...prev,
+        current: response.page || page,
+        pageSize: response.limit || pageSize,
+        total: response.total || 0,
+      }));
+
+      // 更新分类统计
+      if (page === 1) {
+        // 只在第一页时更新统计，避免重复请求
+        const allResponse = await getContactList({ page: 1, limit: 1 });
+        const customerResponse = await getContactList({
+          page: 1,
+          limit: 1,
+          isPassed: true,
+        });
+        const potentialResponse = await getContactList({
+          page: 1,
+          limit: 1,
+          isPassed: false,
+        });
+
+        setTabCounts({
+          all: allResponse.total || 0,
+          customer: customerResponse.total || 0,
+          potential: potentialResponse.total || 0,
+          partner: 0, // 可以根据业务逻辑调整
+          friend: 0, // 可以根据业务逻辑调整
+        });
+      }
+    } catch (error) {
+      console.error("加载联系人数据失败:", error);
+      message.error("加载联系人数据失败，请稍后重试");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 当分类或搜索条件改变时重新加载数据
+  useEffect(() => {
+    loadContacts(1, pagination.pageSize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeTab, searchValue, pagination.pageSize]);
 
-  //   return isCategoryMatch && isSearchMatch;
-  // });
   const filteredContacts = contacts;
 
   return (
-    <div className={styles.container}>
+    <Layout
+      header={
+        <>
+          <div style={{ padding: "20px" }}>
             <PowerNavigation
               title="客户好友管理"
               subtitle="管理客户关系,维护好友信息"
@@ -117,8 +176,6 @@ const CustomerManagement: React.FC = () => {
               backButtonText="返回功能中心"
               rightContent={<Button>添加好友</Button>}
             />
-
-      <div className={styles.content}>
             {/* 搜索和筛选 */}
             <div className={styles.searchBar}>
               <Input
@@ -130,12 +187,13 @@ const CustomerManagement: React.FC = () => {
                 size="large"
               />
               <Button
-            onClick={() => {}}
+                onClick={() => loadContacts(1, pagination.pageSize)}
                 size="large"
                 className={styles["refresh-btn"]}
+                loading={loading}
               >
                 <FilterOutlined />
-            筛选
+                刷新
               </Button>
             </div>
             {/* 标签页 */}
@@ -150,15 +208,49 @@ const CustomerManagement: React.FC = () => {
                 </button>
               ))}
             </div>
-
+          </div>
+        </>
+      }
+      footer={
+        <div className="pagination-wrapper">
+          <Pagination
+            current={pagination.current}
+            pageSize={pagination.pageSize}
+            total={pagination.total}
+            showSizeChanger
+            showQuickJumper
+            showTotal={(total, range) =>
+              `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
+            }
+            onChange={(page, pageSize) => {
+              loadContacts(page, pageSize || pagination.pageSize);
+            }}
+            onShowSizeChange={(current, size) => {
+              loadContacts(1, size);
+            }}
+            pageSizeOptions={["6", "12", "24", "48"]}
+          />
+        </div>
+      }
+    >
+      <div className={styles.container}>
+        <div className={styles.content}>
           {/* 联系人卡片列表 */}
           <div className={styles.contactsList}>
-          {filteredContacts.length === 0 ? (
+            {loading ? (
+              <div style={{ textAlign: "center", padding: "50px" }}>
+                <Spin size="large" />
+                <p style={{ marginTop: "16px", color: "#666" }}>
+                  正在加载联系人数据...
+                </p>
+              </div>
+            ) : filteredContacts.length === 0 ? (
               <div style={{ textAlign: "center", padding: "50px" }}>
                 <p style={{ color: "#999" }}>暂无联系人数据</p>
               </div>
             ) : (
-            <Row gutter={16}>
+              <>
+                <Row gutter={[16, 16]}>
                   {filteredContacts.map(contact => (
                     <Col span={8} key={contact.id || contact.serverId}>
                       <div className={styles.contactCard}>
@@ -207,11 +299,13 @@ const CustomerManagement: React.FC = () => {
 
                         <div className={styles.tagsSection}>
                           <div className={styles.tags}>
-                        {contact?.labels?.map((tag: string, index: number) => (
+                            {contact?.labels?.map(
+                              (tag: string, index: number) => (
                                 <span key={index} className={styles.tag}>
                                   {tag}
                                 </span>
-                        ))}
+                              ),
+                            )}
                           </div>
                           <span className={styles.source}>微信好友</span>
                         </div>
@@ -219,12 +313,16 @@ const CustomerManagement: React.FC = () => {
                         <div className={styles.lastContact}>
                           最后联系:{" "}
                           {contact.lastMessageTime
-                        ? new Date(contact.lastMessageTime).toLocaleDateString()
+                            ? new Date(
+                                contact.lastMessageTime,
+                              ).toLocaleDateString()
                             : "未联系"}
                         </div>
 
                         {contact.signature && (
-                      <div className={styles.notes}>{contact.signature}</div>
+                          <div className={styles.notes}>
+                            {contact.signature}
+                          </div>
                         )}
 
                         <div className={styles.actions}>
@@ -241,10 +339,12 @@ const CustomerManagement: React.FC = () => {
                     </Col>
                   ))}
                 </Row>
+              </>
             )}
           </div>
         </div>
       </div>
+    </Layout>
   );
 };
 

Touchkebao/src/styles/global.scss

@@ -315,3 +315,11 @@ button {
     flex: 1;
   }
 }
+.pagination-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  background: white;
+  border-top: 1px solid #f0f0f0;
+}