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 { useCkChatStore } from "@/store/module/ckchat/ckchat";
+import { Button, Input, Row, Col, Pagination, Spin, message } from "antd";
+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,187 +63,288 @@ 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 contacts: ContractData[] = getContractList();
-  console.log(contacts, "contacts");
-
-  // 动态计算各分类的联系人数量
-  const tabCounts = useMemo(() => {
-    return {
-      customer: contacts.filter(c => c.isPassed).length,
-      potential: contacts.filter(c => !c.isPassed).length,
-      partner: 0, // 可以根据业务逻辑调整
-      friend: 0, // 可以根据业务逻辑调整
-    };
-  }, [contacts]);
+  // 获取各分类的总数
+  const [tabCounts, setTabCounts] = useState({
+    all: 0,
+    customer: 0,
+    potential: 0,
+    partner: 0,
+    friend: 0,
+  });
 
   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 =
-  //     (activeTab === "customer" && contact.isPassed) ||
-  //     (activeTab === "potential" && !contact.isPassed) ||
-  //     activeTab === "partner" ||
-  //     activeTab === "friend";
+  // 加载联系人数据
+  const loadContacts = async (page: number = 1, pageSize: number = 12) => {
+    try {
+      setLoading(true);
 
-  //   const isSearchMatch =
-  //     searchValue === "" ||
-  //     contact.nickname?.includes(searchValue) ||
-  //     contact.conRemark?.includes(searchValue) ||
-  //     contact.alias?.includes(searchValue) ||
-  //     contact.desc?.includes(searchValue) ||
-  //     contact.labels?.some(tag => tag.includes(searchValue));
+      // 构建请求参数
+      const params: any = {
+        page,
+        limit: pageSize,
+      };
+
+      // 添加搜索条件
+      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}>
-      <PowerNavigation
-        title="客户好友管理"
-        subtitle="管理客户关系,维护好友信息"
-        showBackButton={true}
-        backButtonText="返回功能中心"
-        rightContent={<Button>添加好友</Button>}
-      />
-
-      <div className={styles.content}>
-        {/* 搜索和筛选 */}
-        <div className={styles.searchBar}>
-          <Input
-            placeholder="搜索好友姓名、公司或标签..."
-            value={searchValue}
-            onChange={e => setSearchValue(e.target.value)}
-            prefix={<SearchOutlined />}
-            allowClear
-            size="large"
-          />
-          <Button
-            onClick={() => {}}
-            size="large"
-            className={styles["refresh-btn"]}
-          >
-            <FilterOutlined />
-            筛选
-          </Button>
-        </div>
-        {/* 标签页 */}
-        <div className={styles.tabs}>
-          {tabs.map(tab => (
-            <button
-              key={tab.key}
-              className={`${styles.tab} ${activeTab === tab.key ? styles.activeTab : ""}`}
-              onClick={() => setActiveTab(tab.key)}
-            >
-              {tab.label} ({tab.count})
-            </button>
-          ))}
-        </div>
-
-        {/* 联系人卡片列表 */}
-        <div className={styles.contactsList}>
-          {filteredContacts.length === 0 ? (
-            <div style={{ textAlign: "center", padding: "50px" }}>
-              <p style={{ color: "#999" }}>暂无联系人数据</p>
+    <Layout
+      header={
+        <>
+          <div style={{ padding: "20px" }}>
+            <PowerNavigation
+              title="客户好友管理"
+              subtitle="管理客户关系,维护好友信息"
+              showBackButton={true}
+              backButtonText="返回功能中心"
+              rightContent={<Button>添加好友</Button>}
+            />
+            {/* 搜索和筛选 */}
+            <div className={styles.searchBar}>
+              <Input
+                placeholder="搜索好友姓名、公司或标签..."
+                value={searchValue}
+                onChange={e => setSearchValue(e.target.value)}
+                prefix={<SearchOutlined />}
+                allowClear
+                size="large"
+              />
+              <Button
+                onClick={() => loadContacts(1, pagination.pageSize)}
+                size="large"
+                className={styles["refresh-btn"]}
+                loading={loading}
+              >
+                <FilterOutlined />
+                刷新
+              </Button>
             </div>
-          ) : (
-            <Row gutter={16}>
-              {filteredContacts.map(contact => (
-                <Col span={8} key={contact.id || contact.serverId}>
-                  <div className={styles.contactCard}>
-                    <div className={styles.cardHeader}>
-                      <div className={styles.contactInfo}>
-                        <Avatar
-                          name={
-                            contact.conRemark ||
-                            contact.nickname ||
-                            contact.alias ||
-                            "未知用户"
-                          }
-                          avatar={contact.avatar}
-                          size={48}
-                        />
-                        <div className={styles.nameSection}>
-                          <h3 className={styles.contactName}>
-                            {contact.conRemark ||
-                              contact.nickname ||
-                              contact.alias ||
-                              "未知用户"}
-                          </h3>
-                          <p className={styles.roleCompany}>
-                            客户 {"·"} {contact.desc || "未设置公司"}
-                          </p>
+            {/* 标签页 */}
+            <div className={styles.tabs}>
+              {tabs.map(tab => (
+                <button
+                  key={tab.key}
+                  className={`${styles.tab} ${activeTab === tab.key ? styles.activeTab : ""}`}
+                  onClick={() => setActiveTab(tab.key)}
+                >
+                  {tab.label} ({tab.count})
+                </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}>
+            {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, 16]}>
+                  {filteredContacts.map(contact => (
+                    <Col span={8} key={contact.id || contact.serverId}>
+                      <div className={styles.contactCard}>
+                        <div className={styles.cardHeader}>
+                          <div className={styles.contactInfo}>
+                            <Avatar
+                              name={
+                                contact.conRemark ||
+                                contact.nickname ||
+                                contact.alias ||
+                                "未知用户"
+                              }
+                              avatar={contact.avatar}
+                              size={48}
+                            />
+                            <div className={styles.nameSection}>
+                              <h3 className={styles.contactName}>
+                                {contact.conRemark ||
+                                  contact.nickname ||
+                                  contact.alias ||
+                                  "未知用户"}
+                              </h3>
+                              <p className={styles.roleCompany}>
+                                客户 {"·"} {contact.desc || "未设置公司"}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+
+                        <div className={styles.contactDetails}>
+                          <div className={styles.contactInfo}>
+                            <p className={styles.contactItem}>
+                              <span className={styles.label}>电话:</span>{" "}
+                              {contact.phone || "未设置电话"}
+                            </p>
+                            <p className={styles.contactItem}>
+                              <span className={styles.label}>地区:</span>{" "}
+                              {contact.region || contact.city || "未设置地区"}
+                            </p>
+                            <p className={styles.contactItem}>
+                              <span className={styles.label}>微信ID:</span>{" "}
+                              {contact.wechatId}
+                            </p>
+                          </div>
+                        </div>
+
+                        <div className={styles.tagsSection}>
+                          <div className={styles.tags}>
+                            {contact?.labels?.map(
+                              (tag: string, index: number) => (
+                                <span key={index} className={styles.tag}>
+                                  {tag}
+                                </span>
+                              ),
+                            )}
+                          </div>
+                          <span className={styles.source}>微信好友</span>
+                        </div>
+
+                        <div className={styles.lastContact}>
+                          最后联系:{" "}
+                          {contact.lastMessageTime
+                            ? new Date(
+                                contact.lastMessageTime,
+                              ).toLocaleDateString()
+                            : "未联系"}
+                        </div>
+
+                        {contact.signature && (
+                          <div className={styles.notes}>
+                            {contact.signature}
+                          </div>
+                        )}
+
+                        <div className={styles.actions}>
+                          <button className={styles.actionButton}>
+                            <MessageOutlined />
+                            聊天
+                          </button>
+                          <button className={styles.actionButton}>
+                            <PhoneOutlined />
+                            通话
+                          </button>
                         </div>
                       </div>
-                    </div>
-
-                    <div className={styles.contactDetails}>
-                      <div className={styles.contactInfo}>
-                        <p className={styles.contactItem}>
-                          <span className={styles.label}>电话:</span>{" "}
-                          {contact.phone || "未设置电话"}
-                        </p>
-                        <p className={styles.contactItem}>
-                          <span className={styles.label}>地区:</span>{" "}
-                          {contact.region || contact.city || "未设置地区"}
-                        </p>
-                        <p className={styles.contactItem}>
-                          <span className={styles.label}>微信ID:</span>{" "}
-                          {contact.wechatId}
-                        </p>
-                      </div>
-                    </div>
-
-                    <div className={styles.tagsSection}>
-                      <div className={styles.tags}>
-                        {contact?.labels?.map((tag: string, index: number) => (
-                          <span key={index} className={styles.tag}>
-                            {tag}
-                          </span>
-                        ))}
-                      </div>
-                      <span className={styles.source}>微信好友</span>
-                    </div>
-
-                    <div className={styles.lastContact}>
-                      最后联系:{" "}
-                      {contact.lastMessageTime
-                        ? new Date(contact.lastMessageTime).toLocaleDateString()
-                        : "未联系"}
-                    </div>
-
-                    {contact.signature && (
-                      <div className={styles.notes}>{contact.signature}</div>
-                    )}
-
-                    <div className={styles.actions}>
-                      <button className={styles.actionButton}>
-                        <MessageOutlined />
-                        聊天
-                      </button>
-                      <button className={styles.actionButton}>
-                        <PhoneOutlined />
-                        通话
-                      </button>
-                    </div>
-                  </div>
-                </Col>
-              ))}
-            </Row>
-          )}
+                    </Col>
+                  ))}
+                </Row>
+              </>
+            )}
+          </div>
         </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;
+}