Merge branch 'yongpxu-dev' into yongpxu-dev4

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

@@ -1,43 +1,355 @@
 .container {
   padding: 24px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
-
-.header {
-  margin-bottom: 24px;
-  
-  h1 {
-    font-size: 24px;
-    font-weight: 600;
-    color: #262626;
-    margin: 0 0 8px 0;
-  }
-  
-  p {
-    font-size: 14px;
-    color: #8c8c8c;
-    margin: 0;
-  }
+.searchBar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 0 8px 0;
 }
 
 .content {
   min-height: 400px;
 }
 
-.placeholder {
+// 页面头部
+.header {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 300px;
-  background: #fafafa;
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  
-  p {
-    font-size: 16px;
-    color: #8c8c8c;
-    margin: 0;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
+
+  .headerLeft {
+    .title {
+      font-size: 24px;
+      font-weight: 600;
+      color: #262626;
+      margin: 0 0 8px 0;
+    }
+
+    .subtitle {
+      font-size: 14px;
+      color: #8c8c8c;
+      margin: 0;
+    }
   }
-}
+
+  .headerRight {
+    .addButton {
+      background: #1890ff;
+      color: white;
+      border: none;
+      border-radius: 6px;
+      padding: 8px 16px;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background: #40a9ff;
+      }
+    }
+  }
+}
+
+// 搜索和筛选区域
+.searchSection {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 24px;
+
+  .searchBox {
+    flex: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .searchIcon {
+      position: absolute;
+      left: 12px;
+      color: #8c8c8c;
+      font-size: 16px;
+    }
+
+    .searchInput {
+      width: 100%;
+      height: 40px;
+      padding: 0 12px 0 40px;
+      border: 1px solid #d9d9d9;
+      border-radius: 6px;
+      font-size: 14px;
+      outline: none;
+      transition: border-color 0.3s;
+
+      &:focus {
+        border-color: #1890ff;
+      }
+
+      &::placeholder {
+        color: #8c8c8c;
+      }
+    }
+  }
+
+  .filterButton {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 40px;
+    padding: 0 16px;
+    background: white;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    font-size: 14px;
+    color: #262626;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: #1890ff;
+      color: #1890ff;
+    }
+  }
+}
+
+// 标签页
+.tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid #f0f0f0;
+
+  .tab {
+    padding: 12px 24px;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    font-size: 14px;
+    color: #8c8c8c;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      color: #1890ff;
+    }
+
+    &.activeTab {
+      color: #1890ff;
+      border-bottom-color: #1890ff;
+    }
+  }
+}
+
+// 联系人列表
+.contactsList {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 20px;
+}
+
+// 联系人卡片
+.contactCard {
+  background: white;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  padding: 20px;
+  transition: all 0.3s;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    border-color: #d9d9d9;
+  }
+
+  .cardHeader {
+    margin-bottom: 16px;
+
+    .contactInfo {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+    }
+
+    .nameSection {
+      flex: 1;
+
+      .contactName {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        color: #262626;
+        margin: 0 0 4px 0;
+
+        .starIcon {
+          color: #faad14;
+          font-size: 14px;
+        }
+      }
+
+      .roleCompany {
+        font-size: 14px;
+        color: #8c8c8c;
+        margin: 0;
+      }
+    }
+  }
+
+  // 头像样式
+  .avatar {
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid #f0f0f0;
+  }
+
+  .avatarPlaceholder {
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: 600;
+    border: 2px solid #f0f0f0;
+  }
+
+  .contactDetails {
+    margin-bottom: 16px;
+    flex: 1;
+
+    .contactItem {
+      display: flex;
+      margin: 0 0 8px 0;
+      font-size: 14px;
+
+      .label {
+        color: #8c8c8c;
+        margin-right: 8px;
+        min-width: 40px;
+      }
+    }
+  }
+
+  .tagsSection {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+
+    .tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+
+      .tag {
+        background: #f5f5f5;
+        color: #595959;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+      }
+    }
+
+    .source {
+      font-size: 12px;
+      color: #8c8c8c;
+    }
+  }
+
+  .lastContact {
+    font-size: 12px;
+    color: #8c8c8c;
+    margin-bottom: 12px;
+  }
+
+  .notes {
+    background: #f9f9f9;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #595959;
+    margin-bottom: 16px;
+    line-height: 1.4;
+  }
+
+  .actions {
+    display: flex;
+    gap: 12px;
+    margin-top: auto;
+
+    .actionButton {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      height: 32px;
+      background: white;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      font-size: 12px;
+      color: #595959;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        border-color: #1890ff;
+        color: #1890ff;
+      }
+
+      &:first-child:hover {
+        background: #e6f7ff;
+      }
+
+      &:last-child:hover {
+        background: #f6ffed;
+        border-color: #52c41a;
+        color: #52c41a;
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .contactsList {
+    grid-template-columns: 1fr;
+  }
+
+  .contactCard {
+    min-height: 175px;
+  }
+
+  .header {
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+
+    .headerRight {
+      width: 100%;
+
+      .addButton {
+        width: 100%;
+      }
+    }
+  }
+
+  .searchSection {
+    flex-direction: column;
+
+    .filterButton {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+
+  .tabs {
+    overflow-x: auto;
+    white-space: nowrap;
+
+    .tab {
+      flex-shrink: 0;
+    }
+  }
+}

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

@@ -1,24 +1,338 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import PowerNavigation from "@/components/PowerNavtion";
+import {
+  SearchOutlined,
+  FilterOutlined,
+  MessageOutlined,
+  PhoneOutlined,
+} from "@ant-design/icons";
 import styles from "./index.module.scss";
+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";
+import Layout from "@/components/Layout/LayoutFiexd";
+// 头像组件
+const Avatar: React.FC<{ name: string; avatar?: string; size?: number }> = ({
+  name,
+  avatar,
+  size = 40,
+}) => {
+  const getInitials = (name: string) => {
+    return name.charAt(0).toUpperCase();
+  };
 
-const CustomerManagement: React.FC = () => {
-  return (
-    <div className={styles.container}>
-      <PowerNavigation
-        title="客户好友管理"
-        subtitle="统一管理客户信息和好友关系，提升服务效率"
-        showBackButton={true}
-        backButtonText="返回功能中心"
+  const getAvatarColor = (name: string) => {
+    const colors = [
+      "#1890ff",
+      "#52c41a",
+      "#faad14",
+      "#f5222d",
+      "#722ed1",
+      "#13c2c2",
+      "#eb2f96",
+      "#fa8c16",
+    ];
+    const index = name.charCodeAt(0) % colors.length;
+    return colors[index];
+  };
+
+  if (avatar) {
+    return (
+      <img
+        src={avatar}
+        alt={name}
+        className={styles.avatar}
+        style={{ width: size, height: size }}
       />
-      <div className={styles.content}>
-        {/* 功能内容待开发 */}
-        <div className={styles.placeholder}>
-          <p>客户好友管理功能正在开发中...</p>
-        </div>
-      </div>
+    );
+  }
+
+  return (
+    <div
+      className={styles.avatarPlaceholder}
+      style={{
+        width: size,
+        height: size,
+        backgroundColor: getAvatarColor(name),
+        fontSize: size * 0.4,
+      }}
+    >
+      {getInitials(name)}
     </div>
   );
 };
 
+const CustomerManagement: React.FC = () => {
+  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 [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 loadContacts = async (page: number = 1, pageSize: number = 12) => {
+    try {
+      setLoading(true);
+
+      // 构建请求参数
+      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]);
+
+  const filteredContacts = contacts;
+
+  return (
+    <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>
+            {/* 标签页 */}
+            <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>
+
+                        {contact.signature && (
+                          <div className={styles.notes}>
+                            {contact.signature}
+                          </div>
+                        )}
+
+                        <div className={styles.actions}>
+                          <Button type="primary" block>
+                            <MessageOutlined />
+                            聊天
+                          </Button>
+                        </div>
+                      </div>
+                    </Col>
+                  ))}
+                </Row>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
 export default CustomerManagement;

Touchkebao/src/pages/pc/ckbox/weChat/api.ts

@@ -37,6 +37,11 @@ export function getContactList(params) {
 export function getGroupList(params) {
   return request("/v1/kefu/wechatChatroom/list", params, "GET");
 }
+// 分组列表
+export function getLabelsListByGroup(params) {
+  return request("/v1/kefu/wechatGroup/list", params, "GET");
+}
+
 //==============-原接口=================
 // 获取联系人列表
 // export const getContactList = (params: { prevId: number; count: number }) => {

Touchkebao/src/pages/pc/ckbox/weChat/main.ts

@@ -14,6 +14,7 @@ import {
   getContactList,
   getGroupList,
   getAgentList,
+  getLabelsListByGroup,
 } from "./api";
 
 import { useUserStore } from "@/store/module/user";
@@ -41,10 +42,10 @@ export const chatInitAPIdata = async () => {
     await asyncWeChatGroup(groupList);
 
     // 提取不重复的wechatAccountId组
-    const uniqueWechatAccountIds: number[] = getUniqueWechatAccountIds(
-      contractList,
-      groupList,
-    );
+    // const uniqueWechatAccountIds: number[] = getUniqueWechatAccountIds(
+    //   contractList,
+    //   groupList,
+    // );
 
     //获取控制终端列表
     const kfUserList: KfUserListData[] = await getAgentList();
@@ -53,8 +54,8 @@ export const chatInitAPIdata = async () => {
     await asyncKfUserList(kfUserList);
 
     //获取标签列表
-    // const countLables = await getCountLables();
-    // await asyncCountLables(countLables);
+    const countLables = await getCountLables();
+    await asyncCountLables(countLables);
 
     //获取消息会话列表并按lastUpdateTime排序
     const filterUserSessions = contractList?.filter(
@@ -121,15 +122,9 @@ export const initSocket = () => {
 };
 
 export const getCountLables = async () => {
-  const LablesRes = await Promise.all(
-    [1, 2].map(item =>
-      WechatGroup({
-        groupType: item,
-      }),
-    ),
-  );
-  const [friend, group] = LablesRes;
-  const countLables = [
+  const Result = await getLabelsListByGroup({});
+  const LablesRes = Result.list;
+  return [
     ...[
       {
         id: 0,
@@ -137,8 +132,7 @@ export const getCountLables = async () => {
         groupType: 2,
       },
     ],
-    ...group,
-    ...friend,
+    ...LablesRes,
     ...[
       {
         id: 0,
@@ -147,8 +141,6 @@ export const getCountLables = async () => {
       },
     ],
   ];
-
-  return countLables;
 };
 /**
  * 根据标签组织联系人

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;
+}