From 28059d7e2b359c26b7a8e008e77123fb9ef78796 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=87=8C=E7=9A=84=E6=B0=B8?=
 =?UTF-8?q?=E5=B9=B3?= <fsmecx@gmail.com>
Date: Tue, 22 Jul 2025 12:07:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=86=85=E5=AE=B9=E5=A6=82=E4=B8=8B=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nkebao/src/pages/home/index.module.scss       |  4 +-
 .../pages/workspace/auto-group/form/index.tsx | 26 +++---
 .../auto-group/list/index.module.scss         | 32 +-------
 .../pages/workspace/auto-group/list/index.tsx | 80 ++++++++++++-------
 .../auto-like/list/index.module.scss          | 61 --------------
 .../pages/workspace/auto-like/list/index.tsx  | 19 +----
 .../pages/workspace/auto-like/new/index.tsx   | 65 ++++++++-------
 .../workspace/moments-sync/MomentsSync.tsx    | 70 +++++++++-------
 .../workspace/moments-sync/index.module.scss  | 27 +------
 nkebao/src/styles/global.scss                 | 35 ++++++++
 10 files changed, 189 insertions(+), 230 deletions(-)

diff --git a/nkebao/src/pages/home/index.module.scss b/nkebao/src/pages/home/index.module.scss
index bd72ec6a..5ddda9a0 100644
--- a/nkebao/src/pages/home/index.module.scss
+++ b/nkebao/src/pages/home/index.module.scss
@@ -79,8 +79,8 @@
 }
 
 .stat-label {
-  font-size: 16px;
-  color: #666;
+  font-size: 14px;
+  color: #333;
   line-height: 1.2;
   font-weight: bold;
 }
diff --git a/nkebao/src/pages/workspace/auto-group/form/index.tsx b/nkebao/src/pages/workspace/auto-group/form/index.tsx
index dfb5a27e..fd00746f 100644
--- a/nkebao/src/pages/workspace/auto-group/form/index.tsx
+++ b/nkebao/src/pages/workspace/auto-group/form/index.tsx
@@ -8,10 +8,10 @@ import {
   Switch,
   Selector,
   TextArea,
+  NavBar,
 } from "antd-mobile";
-import { LeftOutline } from "antd-mobile-icons";
+import { ArrowLeftOutlined } from "@ant-design/icons";
 import Layout from "@/components/Layout/Layout";
-import MeauMobile from "@/components/MeauMobile/MeauMoible";
 import style from "./index.module.scss";
 import { createAutoGroup, updateAutoGroup } from "./api";
 
@@ -82,14 +82,22 @@ const AutoGroupForm: React.FC = () => {
   return (
     <Layout
       header={
-        <div className={style.headerBar}>
-          <Button fill="none" size="small" onClick={() => navigate(-1)}>
-            <LeftOutline />
-          </Button>
-          <div className={style.title}>
+        <NavBar
+          back={null}
+          style={{ background: "#fff" }}
+          left={
+            <div className="nav-title">
+              <ArrowLeftOutlined
+                twoToneColor="#1677ff"
+                onClick={() => navigate(-1)}
+              />
+            </div>
+          }
+        >
+          <span className="nav-title">
             {isEdit ? "编辑建群任务" : "新建建群任务"}
-          </div>
-        </div>
+          </span>
+        </NavBar>
       }
     >
       <div className={style.autoGroupForm}>
diff --git a/nkebao/src/pages/workspace/auto-group/list/index.module.scss b/nkebao/src/pages/workspace/auto-group/list/index.module.scss
index dc17e655..d4da9d4b 100644
--- a/nkebao/src/pages/workspace/auto-group/list/index.module.scss
+++ b/nkebao/src/pages/workspace/auto-group/list/index.module.scss
@@ -1,38 +1,8 @@
 .autoGroupList {
-  padding: 16px 0 80px 0;
-  background: #f7f8fa;
-  min-height: 100vh;
-}
-
-.headerBar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-  height: 48px;
-  background: #fff;
-  border-bottom: 1px solid #f0f0f0;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.title {
-  font-size: 18px;
-  font-weight: 600;
-  color: #222;
-}
-
-.searchBar {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px 0 16px;
-  background: #fff;
-  gap: 8px;
+  padding: 0 12px;
 }
 
 .taskList {
-  margin-top: 16px;
-  padding: 0 8px;
 }
 
 .taskCard {
diff --git a/nkebao/src/pages/workspace/auto-group/list/index.tsx b/nkebao/src/pages/workspace/auto-group/list/index.tsx
index e40135b4..8b607a79 100644
--- a/nkebao/src/pages/workspace/auto-group/list/index.tsx
+++ b/nkebao/src/pages/workspace/auto-group/list/index.tsx
@@ -3,27 +3,31 @@ import { useNavigate } from "react-router-dom";
 import {
   Button,
   Card,
-  Input,
   Switch,
   ProgressBar,
   Popover,
   Toast,
+  NavBar,
 } from "antd-mobile";
+import { Input } from "antd";
 import {
   MoreOutline,
   AddCircleOutline,
-  SearchOutline,
-  FilterOutline,
   UserAddOutline,
   ClockCircleOutline,
   TeamOutline,
   CalendarOutline,
 } from "antd-mobile-icons";
 
-import { ReloadOutlined, SettingOutlined } from "@ant-design/icons";
+import {
+  ReloadOutlined,
+  SettingOutlined,
+  PlusOutlined,
+  ArrowLeftOutlined,
+  SearchOutlined,
+} from "@ant-design/icons";
 
 import Layout from "@/components/Layout/Layout";
-import MeauMobile from "@/components/MeauMobile/MeauMoible";
 import style from "./index.module.scss";
 
 interface GroupTask {
@@ -175,35 +179,51 @@ const AutoGroupList: React.FC = () => {
   return (
     <Layout
       header={
-        <div className={style.headerBar}>
-          <div className={style.title}>自动建群</div>
-          <Button
-            color="primary"
-            fill="solid"
-            size="small"
-            onClick={handleCreateNew}
+        <>
+          <NavBar
+            back={null}
+            style={{ background: "#fff" }}
+            left={
+              <div className="nav-title">
+                <ArrowLeftOutlined
+                  twoToneColor="#1677ff"
+                  onClick={() => navigate(-1)}
+                />
+              </div>
+            }
+            right={
+              <Button size="small" color="primary" onClick={handleCreateNew}>
+                <PlusOutlined /> 新建任务
+              </Button>
+            }
           >
-            <AddCircleOutline /> 新建任务
-          </Button>
-        </div>
+            <span className="nav-title">自动建群</span>
+          </NavBar>
+          {/* 搜索栏 */}
+          <div className="search-bar">
+            <div className="search-input-wrapper">
+              <Input
+                placeholder="搜索计划名称"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                prefix={<SearchOutlined />}
+                allowClear
+                size="large"
+              />
+            </div>
+            <Button
+              size="small"
+              onClick={() => {}}
+              loading={false}
+              className="refresh-btn"
+            >
+              <ReloadOutlined />
+            </Button>
+          </div>
+        </>
       }
-      footer={<MeauMobile />}
     >
       <div className={style.autoGroupList}>
-        <div className={style.searchBar}>
-          <Input
-            placeholder="搜索任务名称"
-            value={searchTerm}
-            onChange={(val) => setSearchTerm(val)}
-            clearable
-          />
-          <Button size="small" fill="outline" style={{ marginLeft: 8 }}>
-            <FilterOutline />
-          </Button>
-          <Button size="small" fill="outline" style={{ marginLeft: 8 }}>
-            <ReloadOutlined />
-          </Button>
-        </div>
         <div className={style.taskList}>
           {filteredTasks.length === 0 ? (
             <Card className={style.emptyCard}>
diff --git a/nkebao/src/pages/workspace/auto-like/list/index.module.scss b/nkebao/src/pages/workspace/auto-like/list/index.module.scss
index d70e7a45..40ba90bb 100644
--- a/nkebao/src/pages/workspace/auto-like/list/index.module.scss
+++ b/nkebao/src/pages/workspace/auto-like/list/index.module.scss
@@ -1,64 +1,3 @@
-.header {
-  background: white;
-  border-bottom: 1px solid #e5e5e5;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.header-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-
-.search-bar {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  padding: 16px;
-}
-
-.search-input-wrapper {
-  position: relative;
-  flex: 1;
-
-  .ant-input {
-    border-radius: 8px;
-    height: 40px;
-  }
-}
-.refresh-btn {
-  height: 40px;
-  width: 40px;
-  padding: 0;
-  border-radius: 8px;
-}
-
-.new-task-btn {
-  height: 32px;
-  padding: 0 12px;
-  border-radius: 6px;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-
 .task-list {
   padding: 0 16px;
   display: flex;
diff --git a/nkebao/src/pages/workspace/auto-like/list/index.tsx b/nkebao/src/pages/workspace/auto-like/list/index.tsx
index 59b50047..b3244fab 100644
--- a/nkebao/src/pages/workspace/auto-like/list/index.tsx
+++ b/nkebao/src/pages/workspace/auto-like/list/index.tsx
@@ -1,28 +1,17 @@
 import React, { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
-import {
-  NavBar,
-  Button,
-  Toast,
-  SpinLoading,
-  Dialog,
-  Popup,
-  Card,
-  Tag,
-} from "antd-mobile";
+import { NavBar, Button, Toast, SpinLoading, Dialog, Card } from "antd-mobile";
 import { Input } from "antd";
 import {
   PlusOutlined,
   CopyOutlined,
   DeleteOutlined,
-  SettingOutlined,
   SearchOutlined,
   ReloadOutlined,
   EyeOutlined,
   EditOutlined,
   MoreOutlined,
   LikeOutlined,
-  ClockCircleOutlined,
 } from "@ant-design/icons";
 import { ArrowLeftOutlined } from "@ant-design/icons";
 
@@ -262,8 +251,8 @@ const AutoLike: React.FC = () => {
           </NavBar>
 
           {/* 搜索栏 */}
-          <div className={style["search-bar"]}>
-            <div className={style["search-input-wrapper"]}>
+          <div className="search-bar">
+            <div className="search-input-wrapper">
               <Input
                 placeholder="搜索计划名称"
                 value={searchTerm}
@@ -277,7 +266,7 @@ const AutoLike: React.FC = () => {
               size="small"
               onClick={fetchTasks}
               loading={loading}
-              className={style["refresh-btn"]}
+              className="refresh-btn"
             >
               <ReloadOutlined />
             </Button>
diff --git a/nkebao/src/pages/workspace/auto-like/new/index.tsx b/nkebao/src/pages/workspace/auto-like/new/index.tsx
index 24fa60e1..b0a13181 100644
--- a/nkebao/src/pages/workspace/auto-like/new/index.tsx
+++ b/nkebao/src/pages/workspace/auto-like/new/index.tsx
@@ -6,6 +6,8 @@ import {
   ArrowLeftOutlined,
 } from "@ant-design/icons";
 import { Button, Input, Switch, message, Spin } from "antd";
+import { NavBar } from "antd-mobile";
+import Layout from "@/components/Layout/Layout";
 import {
   createAutoLikeTask,
   updateAutoLikeTask,
@@ -120,21 +122,6 @@ const NewAutoLike: React.FC = () => {
     }
   };
 
-  // 顶部导航栏
-  const renderNavBar = () => (
-    <div className={style["nav-bar"]}>
-      <Button
-        type="text"
-        icon={<ArrowLeftOutlined />}
-        className={style["nav-back-btn"]}
-        onClick={() => navigate(-1)}
-      />
-      <span className={style["nav-title"]}>
-        {isEditMode ? "编辑自动点赞" : "新建自动点赞"}
-      </span>
-    </div>
-  );
-
   // 步骤1：基础设置
   const renderBasicSettings = () => (
     <div className={style["form-section"]}>
@@ -314,23 +301,43 @@ const NewAutoLike: React.FC = () => {
   );
 
   return (
-    <div className={style["new-page-bg"]}>
-      {renderNavBar()}
-      <div className={style["new-page-center"]}>
-        {/* 步骤器保留新项目的 */}
-        {/* 你可以在这里插入新项目的步骤器组件 */}
-        <div className={style["form-card"]}>
-          {currentStep === 1 && renderBasicSettings()}
-          {currentStep === 2 && renderDeviceSelection()}
-          {currentStep === 3 && renderFriendSettings()}
-          {isLoading && (
-            <div className={style["loading"]}>
-              <Spin />
+    <Layout
+      header={
+        <NavBar
+          back={null}
+          style={{ background: "#fff" }}
+          left={
+            <div className="nav-title">
+              <ArrowLeftOutlined
+                twoToneColor="#1677ff"
+                onClick={() => navigate(-1)}
+              />
             </div>
-          )}
+          }
+        >
+          <span className="nav-title">
+            {isEditMode ? "编辑自动点赞" : "新建自动点赞"}
+          </span>
+        </NavBar>
+      }
+    >
+      <div className={style["new-page-bg"]}>
+        <div className={style["new-page-center"]}>
+          {/* 步骤器保留新项目的 */}
+          {/* 你可以在这里插入新项目的步骤器组件 */}
+          <div className={style["form-card"]}>
+            {currentStep === 1 && renderBasicSettings()}
+            {currentStep === 2 && renderDeviceSelection()}
+            {currentStep === 3 && renderFriendSettings()}
+            {isLoading && (
+              <div className={style["loading"]}>
+                <Spin />
+              </div>
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </Layout>
   );
 };
 
diff --git a/nkebao/src/pages/workspace/moments-sync/MomentsSync.tsx b/nkebao/src/pages/workspace/moments-sync/MomentsSync.tsx
index ed9c899e..c7d1fb1f 100644
--- a/nkebao/src/pages/workspace/moments-sync/MomentsSync.tsx
+++ b/nkebao/src/pages/workspace/moments-sync/MomentsSync.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Button, Switch, Input, message, Badge, Dropdown, Menu } from "antd";
+import { Switch, Input, message, Dropdown, Menu } from "antd";
+import { NavBar, Button } from "antd-mobile";
 import {
   PlusOutlined,
   SearchOutlined,
@@ -148,37 +149,48 @@ const MomentsSync: React.FC = () => {
     <Layout
       header={
         <>
-          <div className={style.headerBar}>
+          <NavBar
+            back={null}
+            style={{ background: "#fff" }}
+            left={
+              <div className="nav-title">
+                <ArrowLeftOutlined
+                  twoToneColor="#1677ff"
+                  onClick={() => navigate("/workspace")}
+                />
+              </div>
+            }
+            right={
+              <Button
+                size="small"
+                color="primary"
+                onClick={() => navigate("/workspace/moments-sync/new")}
+              >
+                <PlusOutlined /> 新建任务
+              </Button>
+            }
+          >
+            <span className="nav-title">朋友圈同步</span>
+          </NavBar>
+          <div className="search-bar">
+            <div className="search-input-wrapper">
+              <Input
+                placeholder="搜索任务名称"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                prefix={<SearchOutlined />}
+                allowClear
+                size="large"
+              />
+            </div>
             <Button
-              type="text"
-              icon={<ArrowLeftOutlined />}
-              onClick={() => navigate("/workspace")}
-              className={style.backBtn}
-            />
-            <span className={style.title}>朋友圈同步</span>
-            <Button
-              type="primary"
-              icon={<PlusOutlined />}
-              onClick={() => navigate("/workspace/moments-sync/new")}
-              className={style.addBtn}
-            >
-              新建任务
-            </Button>
-          </div>
-          <div className={style.searchBar}>
-            <Input
-              placeholder="搜索任务名称"
-              prefix={<SearchOutlined />}
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              onPressEnter={fetchTasks}
-              className={style.searchInput}
-            />
-            <Button
-              icon={<ReloadOutlined />}
+              size="small"
               onClick={fetchTasks}
               loading={loading}
-            />
+              className="refresh-btn"
+            >
+              <ReloadOutlined />
+            </Button>
           </div>
         </>
       }
diff --git a/nkebao/src/pages/workspace/moments-sync/index.module.scss b/nkebao/src/pages/workspace/moments-sync/index.module.scss
index a1993498..619dc663 100644
--- a/nkebao/src/pages/workspace/moments-sync/index.module.scss
+++ b/nkebao/src/pages/workspace/moments-sync/index.module.scss
@@ -1,17 +1,8 @@
 .pageBg {
-  background: #f8f6f3;
-  padding-bottom: 24px;
+  
 }
 
-.headerBar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #fff;
-  border-bottom: 1px solid #f0f0f0;
-  padding: 0 16px;
-  height: 56px;
-}
+
 
 .title {
   font-size: 18px;
@@ -32,21 +23,9 @@
   margin-left: 8px;
 }
 
-.searchBar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 16px 16px 0 16px;
-  background: #f8f6f3;
-}
-
-.searchInput {
-  flex: 1;
-  min-width: 0;
-}
 
 .taskList {
-  padding: 16px;
+  padding:0 16px;
 }
 
 .taskCard {
diff --git a/nkebao/src/styles/global.scss b/nkebao/src/styles/global.scss
index 5348f05b..c3838c08 100644
--- a/nkebao/src/styles/global.scss
+++ b/nkebao/src/styles/global.scss
@@ -123,9 +123,44 @@ input, textarea {
 body, input, textarea, select, button {
   touch-action: manipulation;
 } 
+
 // 导航栏样式
 .nav-title {
   font-size: 18px;
   font-weight: 600;
   color: var(--primary-color);
 }
+
+// 搜索相关样式
+.search-bar {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+}
+
+.search-input-wrapper {
+  position: relative;
+  flex: 1;
+
+  .ant-input {
+    border-radius: 8px;
+  }
+}
+
+.refresh-btn {
+  height: 40px;
+  width: 40px;
+  padding: 0;
+  border-radius: 8px;
+}
+
+.new-task-btn {
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}