feat(導航組件整合與樣式優化): 將PowerNavigation組件整合至多個頁面，替代冗餘的標題和描述結構，並在樣式上進行優化，提升整體用戶體驗。

2025-09-24 14:23:38 +08:00
parent 7060bcce01
commit fb0cce836d
12 changed files with 111 additions and 91 deletions
--- a/Touchkebao/src/components/PowerNavtion/index.module.scss
+++ b/Touchkebao/src/components/PowerNavtion/index.module.scss
@@ -7,10 +7,10 @@
 .header {
  background: #fff;
  padding: 16px;
-  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  min-height: 64px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .headerLeft {
    display: flex;
--- a/Touchkebao/src/components/PowerNavtion/index.tsx
+++ b/Touchkebao/src/components/PowerNavtion/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Button } from "antd";
 import { ArrowLeftOutlined } from "@ant-design/icons";
 import { useNavigate } from "react-router-dom";
-import styles from "./PowerNavigation.module.scss";
+import styles from "./index.module.scss";

 // 简化的组件属性类型
 export interface PowerNavigationProps {
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.tsx
@@ -1,13 +1,16 @@
 import React from "react";
+import PowerNavigation from "@/components/PowerNavtion";
 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>
+      <PowerNavigation
+        title="AI模型训练"
+        subtitle="自定义AI模型训练，打造专属智能客服助手"
+        showBackButton={true}
+        backButtonText="返回功能中心"
+      />
      <div className={styles.content}>
        {/* 功能内容待开发 */}
        <div className={styles.placeholder}>
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx
@@ -1,13 +1,16 @@
 import React from "react";
+import PowerNavigation from "@/components/PowerNavtion";
 import styles from "./index.module.scss";

 const AutoGreeting: React.FC = () => {
  return (
    <div className={styles.container}>
-      <div className={styles.header}>
-        <h1>自动打招呼</h1>
-        <p>智能识别新好友，自动发送个性化欢迎消息</p>
-      </div>
+      <PowerNavigation
+        title="自动打招呼"
+        subtitle="智能识别新好友，自动发送个性化欢迎消息"
+        showBackButton={true}
+        backButtonText="返回功能中心"
+      />
      <div className={styles.content}>
        {/* 功能内容待开发 */}
        <div className={styles.placeholder}>
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.tsx
@@ -1,13 +1,16 @@
 import React from "react";
+import PowerNavigation from "@/components/PowerNavtion";
 import styles from "./index.module.scss";

 const CommunicationRecord: React.FC = () => {
  return (
    <div className={styles.container}>
-      <div className={styles.header}>
-        <h1>沟通记录</h1>
-        <p>完整记录客户沟通历史，支持多维度查询分析</p>
-      </div>
+      <PowerNavigation
+        title="沟通记录"
+        subtitle="完整记录客户沟通历史，支持多维度查询分析"
+        showBackButton={true}
+        backButtonText="返回功能中心"
+      />
      <div className={styles.content}>
        {/* 功能内容待开发 */}
        <div className={styles.placeholder}>
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.tsx
@@ -1,13 +1,16 @@
 import React from "react";
+import PowerNavigation from "@/components/PowerNavtion";
 import styles from "./index.module.scss";

 const ContentManagement: React.FC = () => {
  return (
    <div className={styles.container}>
-      <div className={styles.header}>
-        <h1>内容管理</h1>
-        <p>素材管理、数据词汇库、关键词自动回复</p>
-      </div>
+      <PowerNavigation
+        title="内容管理"
+        subtitle="素材管理、数据词汇库、关键词自动回复"
+        showBackButton={true}
+        backButtonText="返回功能中心"
+      />
      <div className={styles.content}>
        {/* 功能内容待开发 */}
        <div className={styles.placeholder}>
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx
@@ -1,13 +1,16 @@
 import React from "react";
+import PowerNavigation from "@/components/PowerNavtion";
 import styles from "./index.module.scss";

 const CustomerManagement: React.FC = () => {
  return (
    <div className={styles.container}>
-      <div className={styles.header}>
-        <h1>客户好友管理</h1>
-        <p>统一管理客户信息和好友关系，提升服务效率</p>
-      </div>
+      <PowerNavigation
+        title="客户好友管理"
+        subtitle="统一管理客户信息和好友关系，提升服务效率"
+        showBackButton={true}
+        backButtonText="返回功能中心"
+      />
      <div className={styles.content}>
        {/* 功能内容待开发 */}
        <div className={styles.placeholder}>
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.tsx
@@ -1,13 +1,16 @@
 import React from "react";
+import PowerNavigation from "@/components/PowerNavtion";
 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>
+      <PowerNavigation
+        title="朋友圈营销"
+        subtitle="AI智能生成朋友圈内容，提升品牌曝光度"
+        showBackButton={true}
+        backButtonText="返回功能中心"
+      />
      <div className={styles.content}>
        {/* 功能内容待开发 */}
        <div className={styles.placeholder}>
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.module.scss
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.module.scss
@@ -1,20 +1,13 @@
-.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;
@@ -22,15 +15,10 @@
  }
 }

-.content {
-  min-height: 600px;
-}
-
 .stepsContainer {
-  margin-bottom: 32px;
  padding: 24px;
-  background: #fafafa;
-  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .steps {
@@ -39,21 +27,21 @@
 }

 .stepContent {
-  margin-bottom: 24px;
+  margin: 15px;
 }

 .stepCard {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
-  
+
  :global(.ant-card-head) {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
-    
+
    .ant-card-head-title {
      font-weight: 600;
      color: #495057;
-      
+
      .anticon {
        margin-right: 8px;
        color: #1890ff;
@@ -65,7 +53,7 @@
 .ageRange {
  display: flex;
  align-items: center;
-  
+
  .ant-input-number {
    width: 80px;
  }
@@ -80,16 +68,16 @@
  display: flex;
  align-items: center;
  gap: 8px;
-  
+
  .anticon {
    color: #1890ff;
    font-size: 16px;
  }
-  
+
  span {
    font-size: 14px;
    color: #262626;
-    
+
    strong {
      color: #1890ff;
      font-size: 16px;
@@ -101,11 +89,11 @@
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
-  
+
  .ant-tag {
    margin: 0;
    transition: all 0.2s;
-    
+
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -115,7 +103,7 @@

 .messagePreview {
  margin-top: 24px;
-  
+
  h4 {
    margin-bottom: 12px;
    color: #262626;
@@ -156,12 +144,12 @@
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
-  
+
  .anticon {
    color: #1890ff;
    font-size: 16px;
  }
-  
+
  span {
    font-size: 14px;
    color: #262626;
@@ -172,8 +160,8 @@
  display: flex;
  justify-content: center;
  padding: 24px 0;
-  border-top: 1px solid #f0f0f0;
-  
+  background: #fff;
+
  .ant-btn {
    min-width: 100px;
  }
@@ -184,20 +172,20 @@
  .container {
    padding: 16px;
  }
-  
+
  .stepsContainer {
    padding: 16px;
  }
-  
+
  .summaryGrid {
    grid-template-columns: 1fr;
  }
-  
+
  .ageRange {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
-    
+
    span {
      display: none;
    }
@@ -210,18 +198,18 @@
    font-weight: 500;
    color: #262626;
  }
-  
+
  .ant-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
-  
+
  .ant-upload-list-picture-card .ant-upload-list-item {
    border-radius: 6px;
  }
-  
+
  .ant-steps-item-title {
    font-weight: 500 !important;
  }
-}
+}
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
+import Layout from "@/components/Layout/LayoutFiexd";
 import {
  Card,
  Button,
@@ -29,6 +30,7 @@ import {
 } from "@ant-design/icons";
 import dayjs from "dayjs";
 import type { UploadFile } from "antd";
+import PowerNavigation from "@/components/PowerNavtion";
 import styles from "./index.module.scss";

 const { Step } = Steps;
@@ -649,23 +651,25 @@ 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.stepsContainer}>
-          <Steps current={currentStep} className={styles.steps}>
-            <Step title="客户筛选" icon={<UserOutlined />} />
-            <Step title="消息内容" icon={<MessageOutlined />} />
-            <Step title="发送设置" icon={<SendOutlined />} />
-          </Steps>
-        </div>
-
-        <div className={styles.stepContent}>{renderStepContent()}</div>
-
+    <Layout
+      header={
+        <>
+          <PowerNavigation
+            title="精准群发1"
+            subtitle="基于客户标签和行为数据进行精准群发"
+            showBackButton={true}
+            backButtonText="返回功能中心"
+          />
+          <div className={styles.stepsContainer}>
+            <Steps current={currentStep} className={styles.steps}>
+              <Step title="客户筛选" icon={<UserOutlined />} />
+              <Step title="消息内容" icon={<MessageOutlined />} />
+              <Step title="发送设置" icon={<SendOutlined />} />
+            </Steps>
+          </div>
+        </>
+      }
+      footer={
        <div className={styles.stepActions}>
          <Space>
            {currentStep > 0 && (
@@ -710,8 +714,12 @@ const PrecisionSend: React.FC = () => {
            )}
          </Space>
        </div>
+      }
+    >
+      <div className={styles.container}>
+        <div className={styles.stepContent}>{renderStepContent()}</div>
      </div>
-    </div>
+    </Layout>
  );
 };

--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.tsx
@@ -1,13 +1,16 @@
 import React from "react";
+import PowerNavigation from "@/components/PowerNavtion";
 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>
+      <PowerNavigation
+        title="SOP群发"
+        subtitle="使用触客宝SOP标准化流程进行批量消息发送"
+        showBackButton={true}
+        backButtonText="返回功能中心"
+      />
      <div className={styles.content}>
        {/* 功能内容待开发 */}
        <div className={styles.placeholder}>
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.tsx
@@ -1,13 +1,16 @@
 import React from "react";
+import PowerNavigation from "@/components/PowerNavtion";
 import styles from "./index.module.scss";

 const TagManagement: React.FC = () => {
  return (
    <div className={styles.container}>
-      <div className={styles.header}>
-        <h1>标签管理</h1>
-        <p>智能客户标签分类，精准用户画像分析</p>
-      </div>
+      <PowerNavigation
+        title="标签管理"
+        subtitle="智能客户标签分类，精准用户画像分析"
+        showBackButton={true}
+        backButtonText="返回功能中心"
+      />
      <div className={styles.content}>
        {/* 功能内容待开发 */}
        <div className={styles.placeholder}>