diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss
index bf1ac1e6..921a5a78 100644
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss
@@ -3,41 +3,268 @@
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  min-height: 100vh;
 }
 
+// 头部区域样式
 .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;
-  }
-}
-
-.content {
-  min-height: 400px;
-}
-
-.placeholder {
   display: flex;
+  justify-content: space-between;
   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;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+
+  .headerLeft {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    .backButton {
+      color: #666;
+      font-size: 14px;
+
+      &:hover {
+        color: #1890ff;
+      }
+    }
+
+    .titleSection {
+      h1 {
+        font-size: 24px;
+        font-weight: 600;
+        color: #262626;
+        margin: 0 0 4px 0;
+      }
+
+      p {
+        font-size: 14px;
+        color: #8c8c8c;
+        margin: 0;
+      }
+    }
   }
-}
\ No newline at end of file
+
+  .headerRight {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    .activeRules {
+      font-size: 14px;
+      color: #666;
+    }
+  }
+}
+
+// 子导航栏样式
+.subNav {
+  margin-bottom: 24px;
+
+  :global(.ant-tabs-nav) {
+    margin-bottom: 0;
+  }
+
+  :global(.ant-tabs-tab) {
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+
+// 主要内容区域
+.mainContent {
+  min-height: 600px;
+}
+
+// 问候规则内容
+.rulesContent {
+  display: flex;
+  gap: 24px;
+  min-height: 600px;
+
+  .leftPanel {
+    flex: 0 0 400px;
+
+    .createCard {
+      height: fit-content;
+
+      :global(.ant-card-head) {
+        border-bottom: 1px solid #f0f0f0;
+      }
+
+      :global(.ant-card-head-title) {
+        font-size: 16px;
+        font-weight: 600;
+        color: #262626;
+      }
+
+      .cardSubtitle {
+        font-size: 14px;
+        color: #8c8c8c;
+        margin: 0 0 20px 0;
+      }
+
+      .createForm {
+        :global(.ant-form-item) {
+          margin-bottom: 20px;
+        }
+
+        :global(.ant-form-item-label) {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .rightPanel {
+    flex: 1;
+
+    .listCard {
+      height: fit-content;
+
+      :global(.ant-card-head) {
+        border-bottom: 1px solid #f0f0f0;
+      }
+
+      :global(.ant-card-head-title) {
+        font-size: 16px;
+        font-weight: 600;
+        color: #262626;
+      }
+
+      .listHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+        font-size: 14px;
+        color: #666;
+      }
+
+      .ruleList {
+        .ruleItem {
+          border: 1px solid #f0f0f0;
+          border-radius: 8px;
+          padding: 16px;
+          margin-bottom: 16px;
+          background: #fafafa;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .ruleHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 12px;
+
+            .ruleTitle {
+              flex: 1;
+
+              h4 {
+                font-size: 16px;
+                font-weight: 600;
+                color: #262626;
+                margin: 0 0 8px 0;
+              }
+
+              .ruleTags {
+                display: flex;
+                gap: 8px;
+                flex-wrap: wrap;
+              }
+            }
+
+            .ruleActions {
+              display: flex;
+              align-items: center;
+              gap: 8px;
+              margin-left: 16px;
+
+              :global(.ant-btn) {
+                padding: 4px 8px;
+                height: auto;
+              }
+            }
+          }
+
+          .ruleContent {
+            .ruleDescription {
+              font-size: 14px;
+              color: #666;
+              margin: 0 0 8px 0;
+              font-weight: 500;
+            }
+
+            .ruleText {
+              font-size: 14px;
+              color: #262626;
+              line-height: 1.6;
+              margin: 0 0 12px 0;
+              background: #fff;
+              padding: 12px;
+              border-radius: 6px;
+              border: 1px solid #e8e8e8;
+            }
+
+            .ruleFooter {
+              display: flex;
+              justify-content: space-between;
+              font-size: 12px;
+              color: #8c8c8c;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 其他标签页内容
+.templatesContent,
+.statisticsContent {
+  padding: 24px;
+  text-align: center;
+  color: #8c8c8c;
+}
+
+// 响应式设计
+@media (max-width: 1200px) {
+  .rulesContent {
+    flex-direction: column;
+
+    .leftPanel {
+      flex: none;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 16px;
+  }
+
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+
+    .headerRight {
+      width: 100%;
+      justify-content: space-between;
+    }
+  }
+
+  .rulesContent {
+    .leftPanel,
+    .rightPanel {
+      .createCard,
+      .listCard {
+        :global(.ant-card-body) {
+          padding: 16px;
+        }
+      }
+    }
+  }
+}
diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx
index 7a992c2d..239bb790 100644
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx
@@ -1,21 +1,344 @@
-import React from "react";
-import PowerNavigation from "@/components/PowerNavtion";
+import React, { useState } from "react";
+import {
+  Button,
+  Card,
+  Form,
+  Input,
+  Select,
+  Switch,
+  Tabs,
+  Tag,
+  Space,
+  Popconfirm,
+  message,
+} from "antd";
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  ArrowLeftOutlined,
+} from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
 import styles from "./index.module.scss";
 
+const { TextArea } = Input;
+const { Option } = Select;
+
+// 问候规则数据类型
+interface GreetingRule {
+  id: string;
+  name: string;
+  triggerType: string;
+  triggerCondition: string;
+  content: string;
+  priority: number;
+  isActive: boolean;
+  usageCount: number;
+  createTime: string;
+  tags: string[];
+}
+
 const AutoGreeting: React.FC = () => {
+  const navigate = useNavigate();
+  const [form] = Form.useForm();
+  const [activeTab, setActiveTab] = useState("rules");
+  const [rules, setRules] = useState<GreetingRule[]>([
+    {
+      id: "1",
+      name: "产品咨询自动回复",
+      triggerType: "关键词",
+      triggerCondition: "包含:产品、价格、功能",
+      content:
+        "感谢您对我们产品的关注!我们的AI营销系统具有智能客服、精准营销、自动化运营等核心功能。详细资料我稍后发送给您,请稍等。",
+      priority: 3,
+      isActive: false,
+      usageCount: 234,
+      createTime: "2024/3/3",
+      tags: ["关键词", "优先级3"],
+    },
+    {
+      id: "2",
+      name: "新好友欢迎",
+      triggerType: "新好友",
+      triggerCondition: "添加好友后",
+      content:
+        "您好!欢迎添加我为好友,我是触客宝AI助手,很高兴为您服务!如有任何问题,随时可以咨询我。",
+      priority: 1,
+      isActive: true,
+      usageCount: 156,
+      createTime: "2024/3/1",
+      tags: ["新好友", "优先级1"],
+    },
+    {
+      id: "3",
+      name: "工作时间问候",
+      triggerType: "时间触发",
+      triggerCondition: "工作日 9:00-18:00",
+      content: "您好!现在是工作时间,我是触客宝AI助手,很高兴为您服务!",
+      priority: 2,
+      isActive: true,
+      usageCount: 89,
+      createTime: "2024/2/28",
+      tags: ["时间触发", "优先级2"],
+    },
+  ]);
+
+  // 计算活跃规则数量
+  const activeRulesCount = rules.filter(rule => rule.isActive).length;
+
+  // 处理表单提交
+  const handleSubmit = (values: any) => {
+    const newRule: GreetingRule = {
+      id: Date.now().toString(),
+      name: values.name,
+      triggerType: values.triggerType,
+      triggerCondition: values.triggerCondition,
+      content: values.content,
+      priority: values.priority,
+      isActive: true,
+      usageCount: 0,
+      createTime: new Date().toLocaleDateString(),
+      tags: [values.triggerType, `优先级${values.priority}`],
+    };
+
+    setRules([...rules, newRule]);
+    form.resetFields();
+    message.success("规则创建成功！");
+  };
+
+  // 切换规则状态
+  const toggleRuleStatus = (id: string) => {
+    setRules(
+      rules.map(rule =>
+        rule.id === id ? { ...rule, isActive: !rule.isActive } : rule,
+      ),
+    );
+  };
+
+  // 删除规则
+  const deleteRule = (id: string) => {
+    setRules(rules.filter(rule => rule.id !== id));
+    message.success("规则删除成功！");
+  };
+
+  // 编辑规则
+  const editRule = (rule: GreetingRule) => {
+    form.setFieldsValue({
+      name: rule.name,
+      triggerType: rule.triggerType,
+      triggerCondition: rule.triggerCondition,
+      content: rule.content,
+      priority: rule.priority,
+    });
+    message.info("规则已加载到编辑表单");
+  };
+
   return (
     <div className={styles.container}>
-      <PowerNavigation
-        title="自动打招呼"
-        subtitle="智能识别新好友，自动发送个性化欢迎消息"
-        showBackButton={true}
-        backButtonText="返回功能中心"
-      />
-      <div className={styles.content}>
-        {/* 功能内容待开发 */}
-        <div className={styles.placeholder}>
-          <p>自动打招呼功能正在开发中...</p>
+      {/* 头部区域 */}
+      <div className={styles.header}>
+        <div className={styles.headerLeft}>
+          <Button
+            type="text"
+            size="large"
+            icon={<ArrowLeftOutlined />}
+            onClick={() => navigate(-1)}
+            className={styles.backButton}
+          >
+            返回功能中心
+          </Button>
+          <div className={styles.titleSection}>
+            <h1>自动问候</h1>
+            <p>设置智能问候规则,提升客户体验</p>
+          </div>
         </div>
+        <div className={styles.headerRight}>
+          <div className={styles.activeRules}>
+            活跃规则: {activeRulesCount}/{rules.length}
+          </div>
+          <Button type="primary" icon={<PlusOutlined />}>
+            + 新建规则
+          </Button>
+        </div>
+      </div>
+
+      {/* 子导航栏 */}
+      <div className={styles.subNav}>
+        <Tabs
+          activeKey={activeTab}
+          onChange={setActiveTab}
+          items={[
+            {
+              key: "rules",
+              label: "问候规则",
+            },
+            {
+              key: "templates",
+              label: "话术模板",
+            },
+            {
+              key: "statistics",
+              label: "使用统计",
+            },
+          ]}
+        />
+      </div>
+
+      {/* 主要内容区域 */}
+      <div className={styles.mainContent}>
+        {activeTab === "rules" && (
+          <div className={styles.rulesContent}>
+            {/* 左侧创建规则表单 */}
+            <div className={styles.leftPanel}>
+              <Card title="+ 创建问候规则" className={styles.createCard}>
+                <p className={styles.cardSubtitle}>
+                  设置自动问候的触发条件和回复内容
+                </p>
+                <Form
+                  form={form}
+                  layout="vertical"
+                  onFinish={handleSubmit}
+                  className={styles.createForm}
+                >
+                  <Form.Item
+                    name="name"
+                    label="规则名称"
+                    rules={[{ required: true, message: "请输入规则名称" }]}
+                  >
+                    <Input placeholder="输入规则名称..." />
+                  </Form.Item>
+
+                  <Form.Item
+                    name="triggerType"
+                    label="触发条件"
+                    rules={[{ required: true, message: "请选择触发条件" }]}
+                  >
+                    <Select placeholder="选择触发条件">
+                      <Option value="新好友添加">新好友添加</Option>
+                      <Option value="关键词">关键词</Option>
+                      <Option value="时间触发">时间触发</Option>
+                      <Option value="群聊">群聊</Option>
+                    </Select>
+                  </Form.Item>
+
+                  <Form.Item
+                    name="triggerCondition"
+                    label="具体条件"
+                    rules={[{ required: true, message: "请输入具体条件" }]}
+                  >
+                    <Input placeholder="如:工作日 9:00-18:00 或包含关键词" />
+                  </Form.Item>
+
+                  <Form.Item
+                    name="content"
+                    label="问候内容"
+                    rules={[{ required: true, message: "请输入问候内容" }]}
+                  >
+                    <TextArea rows={4} placeholder="输入自动问候的内容..." />
+                  </Form.Item>
+
+                  <Form.Item
+                    name="priority"
+                    label="优先级"
+                    rules={[{ required: true, message: "请选择优先级" }]}
+                  >
+                    <Select placeholder="选择优先级">
+                      <Option value={1}>高优先级</Option>
+                      <Option value={2}>中优先级</Option>
+                      <Option value={3}>低优先级</Option>
+                    </Select>
+                  </Form.Item>
+
+                  <Form.Item>
+                    <Button type="primary" htmlType="submit" block>
+                      保存规则
+                    </Button>
+                  </Form.Item>
+                </Form>
+              </Card>
+            </div>
+
+            {/* 右侧规则列表 */}
+            <div className={styles.rightPanel}>
+              <Card title="问候规则列表" className={styles.listCard}>
+                <div className={styles.listHeader}>
+                  <span>{rules.length}条规则</span>
+                </div>
+                <div className={styles.ruleList}>
+                  {rules.map(rule => (
+                    <div key={rule.id} className={styles.ruleItem}>
+                      <div className={styles.ruleHeader}>
+                        <div className={styles.ruleTitle}>
+                          <h4>{rule.name}</h4>
+                          <div className={styles.ruleTags}>
+                            {rule.tags.map((tag, index) => (
+                              <Tag
+                                key={index}
+                                color={index === 0 ? "blue" : "default"}
+                              >
+                                {tag}
+                              </Tag>
+                            ))}
+                          </div>
+                        </div>
+                        <div className={styles.ruleActions}>
+                          <Switch
+                            checked={rule.isActive}
+                            onChange={() => toggleRuleStatus(rule.id)}
+                            size="small"
+                          />
+                          <Button
+                            type="text"
+                            icon={<EditOutlined />}
+                            onClick={() => editRule(rule)}
+                          />
+                          <Popconfirm
+                            title="确定要删除这个规则吗？"
+                            onConfirm={() => deleteRule(rule.id)}
+                            okText="确定"
+                            cancelText="取消"
+                          >
+                            <Button
+                              type="text"
+                              icon={<DeleteOutlined />}
+                              danger
+                            />
+                          </Popconfirm>
+                        </div>
+                      </div>
+                      <div className={styles.ruleContent}>
+                        <p className={styles.ruleDescription}>
+                          {rule.triggerCondition}
+                        </p>
+                        <p className={styles.ruleText}>{rule.content}</p>
+                        <div className={styles.ruleFooter}>
+                          <span>使用次数:{rule.usageCount}</span>
+                          <span>创建时间:{rule.createTime}</span>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </div>
+          </div>
+        )}
+
+        {activeTab === "templates" && (
+          <div className={styles.templatesContent}>
+            <Card>
+              <p>话术模板功能开发中...</p>
+            </Card>
+          </div>
+        )}
+
+        {activeTab === "statistics" && (
+          <div className={styles.statisticsContent}>
+            <Card>
+              <p>使用统计功能开发中...</p>
+            </Card>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss
index bf1ac1e6..2eb4278c 100644
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss
+++ b/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;
+    }
   }
-}
\ No newline at end of file
+
+  .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;
+    }
+  }
+}
diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx
index 5ac24b2f..07a71c7f 100644
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx
@@ -1,24 +1,331 @@
-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>
+                        </div>
+
+                        <div className={styles.actions}>
+                          <Button type="primary" block>
+                            <MessageOutlined />
+                            聊天
+                          </Button>
+                        </div>
+                      </div>
+                    </Col>
+                  ))}
+                </Row>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
 export default CustomerManagement;
diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/api.ts b/Touchkebao/src/pages/pc/ckbox/weChat/api.ts
index 74b84462..4bdac18d 100644
--- a/Touchkebao/src/pages/pc/ckbox/weChat/api.ts
+++ b/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 }) => {
diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/main.ts b/Touchkebao/src/pages/pc/ckbox/weChat/main.ts
index 08f91c03..3dee0af5 100644
--- a/Touchkebao/src/pages/pc/ckbox/weChat/main.ts
+++ b/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;
 };
 /**
  * 根据标签组织联系人
diff --git a/Touchkebao/src/styles/global.scss b/Touchkebao/src/styles/global.scss
index 0b681cc6..16c25c87 100644
--- a/Touchkebao/src/styles/global.scss
+++ b/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;
+}