feat(功能中心): 新增功能中心相关页面和路由配置

添加SOP群发、AI模型训练、自动打招呼等9个功能页面的基础结构和样式
配置功能中心相关路由
调整消息通知按钮的Badge组件位置

Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx

@@ -180,14 +180,11 @@ const NavCommon: React.FC<NavCommonProps> = ({
                 />
               </div>
             </Dropdown>
-            <Badge count={messageCount} size="small">
-              <div
-                className={styles.messageButton}
-                onClick={handleMessageClick}
-              >
-                <BellOutlined style={{ fontSize: 18 }} />
-              </div>
-            </Badge>
+            <div className={styles.messageButton} onClick={handleMessageClick}>
+              <Badge count={messageCount} size="small">
+                <BellOutlined style={{ fontSize: 20 }} />
+              </Badge>
+            </div>
           </Space>
         </div>
       </Header>

Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.module.scss

@@ -0,0 +1,43 @@
+.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;
+  }
+}
+
+.content {
+  min-height: 400px;
+}
+
+.placeholder {
+  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;
+  }
+}

Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./index.module.scss";
+
+const AiTraining: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1>AI模型训练</h1>
+        <p>自定义AI模型训练，打造专属智能客服助手</p>
+      </div>
+      <div className={styles.content}>
+        {/* 功能内容待开发 */}
+        <div className={styles.placeholder}>
+          <p>AI模型训练功能正在开发中...</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AiTraining;

Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss

@@ -0,0 +1,43 @@
+.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;
+  }
+}
+
+.content {
+  min-height: 400px;
+}
+
+.placeholder {
+  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;
+  }
+}

Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./index.module.scss";
+
+const AutoGreeting: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1>自动打招呼</h1>
+        <p>智能识别新好友，自动发送个性化欢迎消息</p>
+      </div>
+      <div className={styles.content}>
+        {/* 功能内容待开发 */}
+        <div className={styles.placeholder}>
+          <p>自动打招呼功能正在开发中...</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AutoGreeting;

Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.module.scss

@@ -0,0 +1,43 @@
+.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;
+  }
+}
+
+.content {
+  min-height: 400px;
+}
+
+.placeholder {
+  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;
+  }
+}

Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./index.module.scss";
+
+const CommunicationRecord: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1>沟通记录</h1>
+        <p>完整记录客户沟通历史，支持多维度查询分析</p>
+      </div>
+      <div className={styles.content}>
+        {/* 功能内容待开发 */}
+        <div className={styles.placeholder}>
+          <p>沟通记录功能正在开发中...</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CommunicationRecord;

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

@@ -0,0 +1,43 @@
+.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;
+  }
+}
+
+.content {
+  min-height: 400px;
+}
+
+.placeholder {
+  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;
+  }
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./index.module.scss";
+
+const ContentManagement: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1>内容管理</h1>
+        <p>素材管理、数据词汇库、关键词自动回复</p>
+      </div>
+      <div className={styles.content}>
+        {/* 功能内容待开发 */}
+        <div className={styles.placeholder}>
+          <p>内容管理功能正在开发中...</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContentManagement;

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

@@ -0,0 +1,43 @@
+.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;
+  }
+}
+
+.content {
+  min-height: 400px;
+}
+
+.placeholder {
+  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;
+  }
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./index.module.scss";
+
+const CustomerManagement: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1>客户好友管理</h1>
+        <p>统一管理客户信息和好友关系，提升服务效率</p>
+      </div>
+      <div className={styles.content}>
+        {/* 功能内容待开发 */}
+        <div className={styles.placeholder}>
+          <p>客户好友管理功能正在开发中...</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomerManagement;

Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.module.scss

@@ -0,0 +1,43 @@
+.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;
+  }
+}
+
+.content {
+  min-height: 400px;
+}
+
+.placeholder {
+  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;
+  }
+}

Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./index.module.scss";
+
+const MomentsMarketing: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1>朋友圈营销</h1>
+        <p>AI智能生成朋友圈内容，提升品牌曝光度</p>
+      </div>
+      <div className={styles.content}>
+        {/* 功能内容待开发 */}
+        <div className={styles.placeholder}>
+          <p>朋友圈营销功能正在开发中...</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MomentsMarketing;

Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.module.scss

@@ -0,0 +1,43 @@
+.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;
+  }
+}
+
+.content {
+  min-height: 400px;
+}
+
+.placeholder {
+  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;
+  }
+}

Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./index.module.scss";
+
+const PrecisionSend: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1>精准群发</h1>
+        <p>基于客户标签和行为数据进行精准群发</p>
+      </div>
+      <div className={styles.content}>
+        {/* 功能内容待开发 */}
+        <div className={styles.placeholder}>
+          <p>精准群发功能正在开发中...</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PrecisionSend;

Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.module.scss

@@ -0,0 +1,43 @@
+.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;
+  }
+}
+
+.content {
+  min-height: 400px;
+}
+
+.placeholder {
+  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;
+  }
+}

Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./index.module.scss";
+
+const SopSend: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1>SOP群发</h1>
+        <p>使用触客宝SOP标准化流程进行批量消息发送</p>
+      </div>
+      <div className={styles.content}>
+        {/* 功能内容待开发 */}
+        <div className={styles.placeholder}>
+          <p>SOP群发功能正在开发中...</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SopSend;

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

@@ -0,0 +1,43 @@
+.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;
+  }
+}
+
+.content {
+  min-height: 400px;
+}
+
+.placeholder {
+  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;
+  }
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./index.module.scss";
+
+const TagManagement: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1>标签管理</h1>
+        <p>智能客户标签分类，精准用户画像分析</p>
+      </div>
+      <div className={styles.content}>
+        {/* 功能内容待开发 */}
+        <div className={styles.placeholder}>
+          <p>标签管理功能正在开发中...</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TagManagement;

Touchkebao/src/router/module/pc.tsx

@@ -2,6 +2,15 @@ import CkboxPage from "@/pages/pc/ckbox";
 import WeChatPage from "@/pages/pc/ckbox/weChat";
 import Dashboard from "@/pages/pc/ckbox/dashboard";
 import PowerCenter from "@/pages/pc/ckbox/powerCenter";
+import PrecisionSend from "@/pages/pc/ckbox/powerCenter/precision-send";
+import SopSend from "@/pages/pc/ckbox/powerCenter/sop-send";
+import MomentsMarketing from "@/pages/pc/ckbox/powerCenter/moments-marketing";
+import TagManagement from "@/pages/pc/ckbox/powerCenter/tag-management";
+import CustomerManagement from "@/pages/pc/ckbox/powerCenter/customer-management";
+import CommunicationRecord from "@/pages/pc/ckbox/powerCenter/communication-record";
+import ContentManagement from "@/pages/pc/ckbox/powerCenter/content-management";
+import AiTraining from "@/pages/pc/ckbox/powerCenter/ai-training";
+import AutoGreeting from "@/pages/pc/ckbox/powerCenter/auto-greeting";
 const ckboxRoutes = [
   {
     path: "/pc",
@@ -20,6 +29,42 @@ const ckboxRoutes = [
         path: "powerCenter",
         element: <PowerCenter />,
       },
+      {
+        path: "powerCenter/precision-send",
+        element: <PrecisionSend />,
+      },
+      {
+        path: "powerCenter/sop-send",
+        element: <SopSend />,
+      },
+      {
+        path: "powerCenter/moments-marketing",
+        element: <MomentsMarketing />,
+      },
+      {
+        path: "powerCenter/tag-management",
+        element: <TagManagement />,
+      },
+      {
+        path: "powerCenter/customer-management",
+        element: <CustomerManagement />,
+      },
+      {
+        path: "powerCenter/communication-record",
+        element: <CommunicationRecord />,
+      },
+      {
+        path: "powerCenter/content-management",
+        element: <ContentManagement />,
+      },
+      {
+        path: "powerCenter/ai-training",
+        element: <AiTraining />,
+      },
+      {
+        path: "powerCenter/auto-greeting",
+        element: <AutoGreeting />,
+      },
     ],
   },
 ];