feat(powerCenter): 新增功能中心页面及导航配置

添加功能中心页面，包含9个功能卡片展示和分类筛选更新路由配置和导航菜单数据，移除无用代码和样式
2025-09-12 15:33:54 +08:00
parent caa57b3e8b
commit 9816d7ec18
7 changed files with 436 additions and 46 deletions
--- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.ts
+++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.ts
@@ -8,18 +8,24 @@ export interface MenuItem {

 // 菜单列表数据
 export const menuList: MenuItem[] = [
-  {
-    id: "dashboard",
-    title: "数据面板",
-    icon: "📊",
-    path: "/pc/dashboard",
-  },
  {
    id: "wechat",
    title: "微信管理",
    icon: "💬",
    path: "/pc/weChat",
  },
+  {
+    id: "powerCenter",
+    title: "功能中心",
+    icon: "📊",
+    path: "/pc/powerCenter",
+  },
+  {
+    id: "dashboard",
+    title: "数据面板",
+    icon: "📊",
+    path: "/pc/dashboard",
+  },
 ];

 // 抽屉菜单配置数据
@@ -29,10 +35,6 @@ export const drawerMenuData = {
    appName: "触客宝",
    appDesc: "AI智能营销系统",
  },
-  primaryButton: {
-    title: "AI智能客服",
-    icon: "🔒",
-  },
  footer: {
    balanceIcon: "⚡",
    balanceLabel: "算力余额",
--- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss
+++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss
@@ -142,7 +142,6 @@

 .drawerBody {
  flex: 1;
-  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
--- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx
@@ -22,7 +22,6 @@ const NavCommon: React.FC<NavCommonProps> = ({
  const navigate = useNavigate();
  const { userInfo } = useCkChatStore();
  const { user } = useUserStore();
-  console.log(user);

  // 处理菜单图标点击
  const handleMenuClick = () => {
@@ -54,12 +53,6 @@ const NavCommon: React.FC<NavCommonProps> = ({
        </div>
      </div>
      <div className={styles.drawerBody}>
-        <div className={styles.primaryButton}>
-          <div className={styles.buttonIcon}>
-            {drawerMenuData.primaryButton.icon}
-          </div>
-          <span>{drawerMenuData.primaryButton.title}</span>
-        </div>
        <div className={styles.menuSection}>
          {menuList.map((item, index) => (
            <div
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss
@@ -0,0 +1,238 @@
+.powerCenter {
+  padding: 24px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 32px;
+    background: white;
+    padding: 24px;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+    .headerLeft {
+      .title {
+        font-size: 28px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 8px 0;
+      }
+
+      .subtitle {
+        font-size: 14px;
+        color: #666;
+        margin: 0;
+      }
+    }
+
+    .headerRight {
+      .tabs {
+        .tab {
+          border-radius: 8px;
+          border: 1px solid #e0e0e0;
+          margin-right: 8px;
+          color: #666;
+          
+          &:hover {
+            color: #1890ff;
+            border-color: #1890ff;
+          }
+        }
+
+        .activeTab {
+          border-radius: 8px;
+          background: #1890ff;
+          border-color: #1890ff;
+          box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
+        }
+      }
+    }
+  }
+
+  .cardGrid {
+    .featureCard {
+      border-radius: 16px;
+      border: none;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+      transition: all 0.3s ease;
+      height: 200px;
+      cursor: pointer;
+
+      &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+      }
+
+      .cardContent {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        height: 100%;
+        justify-content: center;
+
+        .iconWrapper {
+          width: 64px;
+          height: 64px;
+          border-radius: 16px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 16px;
+          position: relative;
+
+          .icon {
+            font-size: 28px;
+            color: white;
+          }
+        }
+
+        .cardInfo {
+          .cardTitle {
+            font-size: 16px;
+            font-weight: 600;
+            color: #1a1a1a;
+            margin: 0 0 8px 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+
+            .newBadge {
+              background: linear-gradient(135deg, #ff6b6b, #ee5a24);
+              color: white;
+              font-size: 10px;
+              padding: 2px 6px;
+              border-radius: 8px;
+              font-weight: 500;
+            }
+          }
+
+          .cardDescription {
+            font-size: 12px;
+            color: #666;
+            line-height: 1.4;
+            margin: 0;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 1200px) {
+  .powerCenter {
+    .header {
+      flex-direction: column;
+      gap: 16px;
+      align-items: flex-start;
+
+      .headerRight {
+        width: 100%;
+        
+        .tabs {
+          flex-wrap: wrap;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .powerCenter {
+    padding: 16px;
+
+    .header {
+      padding: 16px;
+      
+      .headerLeft {
+        .title {
+          font-size: 24px;
+        }
+      }
+    }
+
+    .cardGrid {
+      .featureCard {
+        height: 160px;
+        
+        .cardContent {
+          .iconWrapper {
+            width: 48px;
+            height: 48px;
+            
+            .icon {
+              font-size: 20px;
+            }
+          }
+          
+          .cardInfo {
+            .cardTitle {
+              font-size: 14px;
+            }
+            
+            .cardDescription {
+              font-size: 11px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 卡片颜色主题
+.featureCard {
+  // 精准群发 - 橙色
+  &[data-color="#ff6b35"] .iconWrapper {
+    background: linear-gradient(135deg, #ff6b35, #f7931e);
+  }
+  
+  // SOP群发 - 蓝色
+  &[data-color="#4285f4"] .iconWrapper {
+    background: linear-gradient(135deg, #4285f4, #1a73e8);
+  }
+  
+  // 朋友圈营销 - 绿色
+  &[data-color="#34a853"] .iconWrapper {
+    background: linear-gradient(135deg, #34a853, #137333);
+  }
+  
+  // 标签管理 - 紫色
+  &[data-color="#9c27b0"] .iconWrapper {
+    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
+  }
+  
+  // 客户管理 - 靛蓝
+  &[data-color="#6366f1"] .iconWrapper {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+  }
+  
+  // 沟通记录 - 青色
+  &[data-color="#06b6d4"] .iconWrapper {
+    background: linear-gradient(135deg, #06b6d4, #0891b2);
+  }
+  
+  // 内容管理 - 黄色
+  &[data-color="#f59e0b"] .iconWrapper {
+    background: linear-gradient(135deg, #f59e0b, #d97706);
+  }
+  
+  // AI训练 - 粉色
+  &[data-color="#ec4899"] .iconWrapper {
+    background: linear-gradient(135deg, #ec4899, #db2777);
+  }
+  
+  // 自动打招呼 - 翠绿
+  &[data-color="#10b981"] .iconWrapper {
+    background: linear-gradient(135deg, #10b981, #059669);
+  }
+}
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx
@@ -0,0 +1,181 @@
+import React from "react";
+import { Card, Row, Col, Button, Space } from "antd";
+import {
+  AimOutlined,
+  SendOutlined,
+  CalendarOutlined,
+  TagsOutlined,
+  UserOutlined,
+  MessageOutlined,
+  FileTextOutlined,
+  RobotOutlined,
+  UserAddOutlined,
+} from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+import styles from "./index.module.scss";
+
+interface FeatureCard {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  color: string;
+  path?: string;
+  isNew?: boolean;
+}
+
+const PowerCenter: React.FC = () => {
+  const navigate = useNavigate();
+
+  const featureCards: FeatureCard[] = [
+    {
+      id: "precision-send",
+      title: "精准群发",
+      description: "基于客户标签和行为数据进行精准群发",
+      icon: <AimOutlined />,
+      color: "#ff6b35",
+      path: "/pc/ckbox/precision-send",
+    },
+    {
+      id: "sop-send",
+      title: "SOP群发",
+      description: "使用触客宝SOP标准化流程进行批量消息发送",
+      icon: <SendOutlined />,
+      color: "#4285f4",
+      path: "/pc/ckbox/sop-send",
+    },
+    {
+      id: "moments-marketing",
+      title: "朋友圈营销",
+      description: "AI智能生成朋友圈内容，提升品牌曝光度",
+      icon: <CalendarOutlined />,
+      color: "#34a853",
+      path: "/pc/ckbox/moments-marketing",
+    },
+    {
+      id: "tag-management",
+      title: "标签管理",
+      description: "智能客户标签分类，精准用户画像分析",
+      icon: <TagsOutlined />,
+      color: "#9c27b0",
+      path: "/pc/ckbox/tag-management",
+    },
+    {
+      id: "customer-management",
+      title: "客户好友管理",
+      description: "统一管理客户信息和好友关系，提升服务效率",
+      icon: <UserOutlined />,
+      color: "#6366f1",
+      path: "/pc/ckbox/customer-management",
+    },
+    {
+      id: "communication-record",
+      title: "沟通记录",
+      description: "完整记录客户沟通历史，支持多维度查询分析",
+      icon: <MessageOutlined />,
+      color: "#06b6d4",
+      path: "/pc/ckbox/communication-record",
+    },
+    {
+      id: "content-management",
+      title: "内容管理",
+      description: "素材管理、数据词汇库、关键词自动回复",
+      icon: <FileTextOutlined />,
+      color: "#f59e0b",
+      path: "/pc/ckbox/content-management",
+    },
+    {
+      id: "ai-training",
+      title: "AI模型训练",
+      description: "自定义AI模型训练，打造专属智能客服助手",
+      icon: <RobotOutlined />,
+      color: "#ec4899",
+      path: "/pc/ckbox/ai-training",
+      isNew: true,
+    },
+    {
+      id: "auto-greeting",
+      title: "自动打招呼",
+      description: "智能识别新好友，自动发送个性化欢迎消息",
+      icon: <UserAddOutlined />,
+      color: "#10b981",
+      path: "/pc/ckbox/auto-greeting",
+    },
+  ];
+
+  const handleCardClick = (card: FeatureCard) => {
+    if (card.path) {
+      navigate(card.path);
+    }
+  };
+
+  const tabItems = [
+    { key: "all", label: "全部功能", active: true },
+    { key: "marketing", label: "营销推广" },
+    { key: "customer", label: "客户管理" },
+    { key: "ai", label: "AI智能" },
+    { key: "content", label: "内容管理" },
+    { key: "data", label: "数据分析" },
+  ];
+
+  return (
+    <div className={styles.powerCenter}>
+      {/* 页面头部 */}
+      <div className={styles.header}>
+        <div className={styles.headerLeft}>
+          <h1 className={styles.title}>功能中心</h1>
+          <p className={styles.subtitle}>触客宝AI私域营销系统 - 所有功能一览</p>
+        </div>
+        <div className={styles.headerRight}>
+          <Space className={styles.tabs}>
+            {tabItems.map(item => (
+              <Button
+                key={item.key}
+                type={item.active ? "primary" : "text"}
+                className={item.active ? styles.activeTab : styles.tab}
+              >
+                {item.label}
+              </Button>
+            ))}
+          </Space>
+        </div>
+      </div>
+
+      {/* 功能卡片网格 */}
+      <div className={styles.cardGrid}>
+        <Row gutter={[24, 24]}>
+          {featureCards.map(card => (
+            <Col key={card.id} xs={24} sm={12} md={8} lg={6} xl={6}>
+              <Card
+                className={styles.featureCard}
+                hoverable
+                onClick={() => handleCardClick(card)}
+                bodyStyle={{ padding: "24px" }}
+              >
+                <div className={styles.cardContent}>
+                  <div
+                    className={styles.iconWrapper}
+                    style={{ backgroundColor: card.color }}
+                  >
+                    <div className={styles.icon}>{card.icon}</div>
+                  </div>
+                  <div className={styles.cardInfo}>
+                    <h3 className={styles.cardTitle}>
+                      {card.title}
+                      {card.isNew && (
+                        <span className={styles.newBadge}>新功能</span>
+                      )}
+                    </h3>
+                    <p className={styles.cardDescription}>{card.description}</p>
+                  </div>
+                </div>
+              </Card>
+            </Col>
+          ))}
+        </Row>
+      </div>
+    </div>
+  );
+};
+
+export default PowerCenter;
--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/index.tsx
@@ -26,26 +26,6 @@ const ChatWindow: React.FC<ChatWindowProps> = ({ contract }) => {
  const onToggleProfile = () => {
    setShowProfile(!showProfile);
  };
-  const chatMenu = (
-    <Menu>
-      <Menu.Item key="profile" icon={<UserOutlined />}>
-        查看资料
-      </Menu.Item>
-      <Menu.Item key="call" icon={<PhoneOutlined />}>
-        语音通话
-      </Menu.Item>
-      <Menu.Item key="video" icon={<VideoCameraOutlined />}>
-        视频通话
-      </Menu.Item>
-      <Menu.Divider />
-      <Menu.Item key="pin">置顶聊天</Menu.Item>
-      <Menu.Item key="mute">消息免打扰</Menu.Item>
-      <Menu.Divider />
-      <Menu.Item key="clear" danger>
-        清空聊天记录
-      </Menu.Item>
-    </Menu>
-  );

  return (
    <Layout className={styles.chatWindow}>
@@ -76,13 +56,6 @@ const ChatWindow: React.FC<ChatWindowProps> = ({ contract }) => {
                className={styles.headerButton}
              />
            </Tooltip>
-            <Dropdown overlay={chatMenu} trigger={["click"]}>
-              <Button
-                type="text"
-                icon={<MoreOutlined />}
-                className={styles.headerButton}
-              />
-            </Dropdown>
          </Space>
        </Header>