更新功能中心模块：重构KPI统计区域，优化数据展示和样式，提升用户体验和代码可读性。

Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx

@@ -92,21 +92,12 @@ export const kpiData: KPIData[] = [
     },
   },
   {
-    id: "ai-messages",
+    id: "assigned-users",
-    value: "3,542",
+    value: "342",
-    label: "AI处理消息",
+    label: "当前客服分配用户数",
     trend: {
       icon: "",
-      text: "今日",
+      text: "当前登录客服",
-    },
-  },
-  {
-    id: "satisfaction",
-    value: "98%",
-    label: "客户满意度",
-    trend: {
-      icon: "↑",
-      text: "2% 本月",
     },
   },
 ];

Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx

@@ -3,9 +3,19 @@ import { useNavigate } from "react-router-dom";
 import styles from "./index.module.scss";
 import { FeatureCard, featureCategories, kpiData } from "./index.data";
 import { Col, Row } from "antd";
+import {
+  UserOutlined,
+  TeamOutlined,
+  UsergroupAddOutlined,
+} from "@ant-design/icons";
 
 const PowerCenter: React.FC = () => {
   const navigate = useNavigate();
+  const getKpiBg = (id: string) => {
+    if (id === "total-customers") return "#1890ff";
+    if (id === "active-customers") return "#52c41a";
+    return "#722ed1";
+  };
 
   const handleCardClick = (card: FeatureCard) => {
     if (card.path) {
@@ -28,6 +38,78 @@ const PowerCenter: React.FC = () => {
         </div>
       </div>
 
+      {/* KPI统计区域（置顶，按图展示） */}
+      <div className={styles.kpiSection}>
+        <Row gutter={16}>
+          {kpiData.map(kpi => (
+            <Col span={8} key={kpi.id}>
+              <div className={styles.kpiCard}>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                  }}
+                >
+                  <div>
+                    <div
+                      className={styles.kpiLabel}
+                      style={{ textAlign: "left", marginBottom: 6 }}
+                    >
+                      {kpi.label}
+                    </div>
+                    <div
+                      className={styles.kpiValue}
+                      style={{ textAlign: "left", marginBottom: 6 }}
+                    >
+                      {kpi.value}
+                    </div>
+                    {kpi.trend && (
+                      <div
+                        className={styles.kpiTrend}
+                        style={{ justifyContent: "flex-start" }}
+                      >
+                        <span className={styles.trendIcon}>
+                          {kpi.trend.icon}
+                        </span>
+                        <span className={styles.trendText}>
+                          {kpi.trend.text}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                  <div
+                    aria-hidden
+                    style={{
+                      width: 56,
+                      height: 56,
+                      borderRadius: 12,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      background: getKpiBg(kpi.id),
+                      color: "#fff",
+                      boxShadow: "0 6px 14px rgba(0,0,0,0.18)",
+                    }}
+                  >
+                    {kpi.id === "total-customers" && (
+                      <UserOutlined style={{ fontSize: 22 }} />
+                    )}
+                    {kpi.id === "active-customers" && (
+                      <TeamOutlined style={{ fontSize: 22 }} />
+                    )}
+                    {kpi.id !== "total-customers" &&
+                      kpi.id !== "active-customers" && (
+                        <UsergroupAddOutlined style={{ fontSize: 22 }} />
+                      )}
+                  </div>
+                </div>
+              </div>
+            </Col>
+          ))}
+        </Row>
+      </div>
+
       {/* 核心功能模块 */}
       <div className={styles.coreFeatures}>
         <Row gutter={24}>
@@ -64,25 +146,9 @@ const PowerCenter: React.FC = () => {
           ))}
         </Row>
       </div>
-
+      {/* 页面底部 */}
-      {/* KPI统计区域 */}
+      <div className={styles.footer}>
-      <div className={styles.kpiSection}>
+        <p>触客宝 AI私域营销系统 - 让每一次沟通都更有价值</p>
-        <Row gutter={16}>
-          {kpiData.map(kpi => (
-            <Col span={6} key={kpi.id}>
-              <div className={styles.kpiCard}>
-                <div className={styles.kpiValue}>{kpi.value}</div>
-                <div className={styles.kpiLabel}>{kpi.label}</div>
-                {kpi.trend && (
-                  <div className={styles.kpiTrend}>
-                    <span className={styles.trendIcon}>{kpi.trend.icon}</span>
-                    <span className={styles.trendText}>{kpi.trend.text}</span>
-                  </div>
-                )}
-              </div>
-            </Col>
-          ))}
-        </Row>
       </div>
     </div>
   );