From c485c7fd646b8c25c1b6e4f4dbd6d1356d147a70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= <light.zhang@ysinc.com>
Date: Tue, 28 Oct 2025 18:32:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=8F=20=20=E9=AB=98=E5=BA=A6=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BackNavbar/index.scss    | 61 +++++++++++++++++++++++
 src/components/BackNavbar/index.tsx     | 66 +++++++++++++++++++++++++
 src/components/EmptyState/index.scss    |  7 +--
 src/components/index.ts                 |  2 +
 src/other_pages/comment_reply/index.tsx | 16 +++---
 src/other_pages/message/index.scss      | 38 +-------------
 src/other_pages/message/index.tsx       | 18 +------
 src/other_pages/new_follow/index.tsx    | 16 +++---
 8 files changed, 150 insertions(+), 74 deletions(-)
 create mode 100644 src/components/BackNavbar/index.scss
 create mode 100644 src/components/BackNavbar/index.tsx

diff --git a/src/components/BackNavbar/index.scss b/src/components/BackNavbar/index.scss
new file mode 100644
index 0000000..6ca5e0f
--- /dev/null
+++ b/src/components/BackNavbar/index.scss
@@ -0,0 +1,61 @@
+.back-navbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: #ffffff;
+  width: 100%;
+  box-sizing: border-box;
+
+  .navbar-content {
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+    width: 100%;
+    box-sizing: border-box;
+
+    .navbar-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .back-button {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: opacity 0.2s;
+
+        &:active {
+          opacity: 0.6;
+        }
+
+        .back-icon {
+          width: 12px;
+          height: 12px;
+          border-left: 2px solid #000000;
+          border-bottom: 2px solid #000000;
+          transform: rotate(45deg);
+        }
+      }
+
+      .navbar-avatar {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        overflow: hidden;
+        display: block;
+      }
+
+      .navbar-title {
+        font-family: "PingFang SC";
+        font-weight: 600;
+        font-size: 20px;
+        line-height: 1.4;
+        letter-spacing: 0.019em;
+        color: #000000;
+      }
+    }
+  }
+}
diff --git a/src/components/BackNavbar/index.tsx b/src/components/BackNavbar/index.tsx
new file mode 100644
index 0000000..80c7669
--- /dev/null
+++ b/src/components/BackNavbar/index.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { View, Text, Image } from '@tarojs/components';
+import { getNavbarHeight } from '@/utils/getNavbarHeight';
+import { useUserInfo } from '@/store/userStore';
+import Taro from '@tarojs/taro';
+import './index.scss';
+
+interface BackNavbarProps {
+  title?: string;
+  showAvatar?: boolean;
+  showBackButton?: boolean;
+  onBack?: () => void;
+  className?: string;
+}
+
+const BackNavbar: React.FC<BackNavbarProps> = ({
+  title = '消息',
+  showAvatar = true,
+  showBackButton = false,
+  onBack,
+  className = ''
+}) => {
+  const userInfo = useUserInfo();
+  const { statusBarHeight, navBarHeight, totalHeight } = getNavbarHeight();
+
+  const handleBack = () => {
+    if (onBack) {
+      onBack();
+    } else {
+      Taro.navigateBack();
+    }
+  };
+
+  return (
+    <View 
+      className={`back-navbar ${className}`}
+      style={{
+        paddingTop: `${statusBarHeight}px`,
+        height: `${totalHeight}px`
+      }}
+    >
+      <View 
+        className="navbar-content"
+        style={{ height: `${navBarHeight}px` }}
+      >
+        <View className="navbar-left">
+          {showBackButton && (
+            <View className="back-button" onClick={handleBack}>
+              <View className="back-icon"></View>
+            </View>
+          )}
+          {showAvatar && (
+            <Image
+              className="navbar-avatar"
+              src={userInfo?.userInfo?.avatar_url}
+              mode="aspectFill"
+            />
+          )}
+          <Text className="navbar-title">{title}</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default BackNavbar;
diff --git a/src/components/EmptyState/index.scss b/src/components/EmptyState/index.scss
index e516d8f..868d9a9 100644
--- a/src/components/EmptyState/index.scss
+++ b/src/components/EmptyState/index.scss
@@ -2,13 +2,14 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: start;
   padding: 60px 16px;
   min-height: 400px;
+  margin-top: 40px;
 
   .empty-icon {
-    width: 221px;
-    height: 200px;
+    width:132.7px;
+    height: 120px;
     position: relative;
     border-radius: 20px;
     margin-bottom: 12px;
diff --git a/src/components/index.ts b/src/components/index.ts
index 73f42fe..e079f51 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -22,6 +22,7 @@ import GameManagePopup from './GameManagePopup';
 import FollowUserCard from './FollowUserCard/index';
 import Comments from "./Comments";
 import GeneralNavbar from "./GeneralNavbar";
+import BackNavbar from "./BackNavbar";
 import RadarChart from './Radar'
 import EmptyState from './EmptyState';
 import NTRPTestEntryCard from './NTRPTestEntryCard'
@@ -52,6 +53,7 @@ export {
   FollowUserCard,
   Comments,
   GeneralNavbar,
+  BackNavbar,
   RadarChart,
   EmptyState,
   NTRPTestEntryCard,
diff --git a/src/other_pages/comment_reply/index.tsx b/src/other_pages/comment_reply/index.tsx
index 268a46b..a24ed93 100644
--- a/src/other_pages/comment_reply/index.tsx
+++ b/src/other_pages/comment_reply/index.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { View, Text, ScrollView, Image, Input } from "@tarojs/components";
 import { Avatar } from "@nutui/nutui-react-taro";
-import { withAuth, EmptyState } from "@/components";
+import { withAuth, EmptyState, BackNavbar } from "@/components";
 import commentService, { CommentActivity } from "@/services/commentService";
 import { formatShortRelativeTime } from "@/utils/timeUtils";
 import Taro from "@tarojs/taro";
@@ -285,14 +285,12 @@ const CommentReply = () => {
   return (
     <View className="comment-reply-container">
       {/* 顶部导航栏 */}
-      <View className="navbar">
-        <View className="navbar-content">
-          <View className="back-button" onClick={handleBack}>
-            <View className="back-icon"></View>
-          </View>
-          <Text className="navbar-title">收到的评论和回复</Text>
-        </View>
-      </View>
+      <BackNavbar 
+        title="收到的评论和回复" 
+        showBackButton={true}
+        showAvatar={false}
+        onBack={handleBack}
+      />
 
       {/* 评论列表 */}
       <ScrollView
diff --git a/src/other_pages/message/index.scss b/src/other_pages/message/index.scss
index fdc71a9..f91a7a6 100644
--- a/src/other_pages/message/index.scss
+++ b/src/other_pages/message/index.scss
@@ -8,42 +8,6 @@
   flex-direction: column;
   background: #ffffff;
 
-  // 顶部导航栏
-  .navbar {
-    background: #ffffff;
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    // box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06);
-
-    .navbar-content {
-      height: 56px;
-      display: flex;
-      align-items: center;
-      padding: 0 15px;
-      margin-top: 44px;
-
-      .navbar-left {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        .navbar-avatar {
-          width: 28px;
-          height: 28px;
-        }
-
-        .navbar-title {
-          font-family: "PingFang SC";
-          font-weight: 600;
-          font-size: 20px;
-          line-height: 1.4;
-          letter-spacing: 0.019em;
-          color: #000000;
-        }
-      }
-    }
-  }
 
   // 分类标签区
   .category-tabs {
@@ -134,7 +98,7 @@
       background: #ffffff;
       border: 0.5px solid rgba(0, 0, 0, 0.08);
       border-radius: 20px;
-      box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
+      // box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
       padding: 0 0 12px;
       transition: all 0.2s;
 
diff --git a/src/other_pages/message/index.tsx b/src/other_pages/message/index.tsx
index 00b704e..4401626 100644
--- a/src/other_pages/message/index.tsx
+++ b/src/other_pages/message/index.tsx
@@ -1,10 +1,8 @@
 import { useState, useEffect } from "react";
 import { View, Text, Image, ScrollView } from "@tarojs/components";
-import { Avatar } from "@nutui/nutui-react-taro";
 import GuideBar from "@/components/GuideBar";
-import { withAuth, EmptyState } from "@/components";
+import { withAuth, EmptyState, BackNavbar } from "@/components";
 import noticeService from "@/services/noticeService";
-import { useUserInfo } from "@/store/userStore";
 import { formatRelativeTime } from "@/utils/timeUtils";
 import Taro from "@tarojs/taro";
 import "./index.scss";
@@ -27,7 +25,6 @@ interface MessageItem {
 type MessageCategory = "comment" | "follow";
 
 const Message = () => {
-  const userInfo = useUserInfo() as any;
   const [activeTab, setActiveTab] = useState<MessageCategory | null>(null);
   const [messageList, setMessageList] = useState<MessageItem[]>([]);
   const [loading, setLoading] = useState(false);
@@ -135,18 +132,7 @@ const Message = () => {
   return (
     <View className="message-container">
       {/* 顶部导航栏 */}
-      <View className="navbar">
-        <View className="navbar-content">
-          <View className="navbar-left">
-            <Avatar
-              className="navbar-avatar"
-              src={userInfo?.avatar_url}
-              size="28px"
-            />
-            <Text className="navbar-title">消息</Text>
-          </View>
-        </View>
-      </View>
+      <BackNavbar title="消息" />
 
       {/* 分类标签 */}
       <View className="category-tabs">
diff --git a/src/other_pages/new_follow/index.tsx b/src/other_pages/new_follow/index.tsx
index a86ea5a..c48f94f 100644
--- a/src/other_pages/new_follow/index.tsx
+++ b/src/other_pages/new_follow/index.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { View, Text, ScrollView } from "@tarojs/components";
 import { Avatar } from "@nutui/nutui-react-taro";
-import { withAuth, EmptyState } from "@/components";
+import { withAuth, EmptyState, BackNavbar } from "@/components";
 import FollowService from "@/services/followService";
 import { formatShortRelativeTime } from "@/utils/timeUtils";
 import Taro from "@tarojs/taro";
@@ -195,14 +195,12 @@ const NewFollow = () => {
   return (
     <View className="new-follow-container">
       {/* 顶部导航栏 */}
-      <View className="navbar">
-        <View className="navbar-content">
-          <View className="back-button" onClick={handleBack}>
-            <View className="back-icon"></View>
-          </View>
-          <Text className="navbar-title">新增关注</Text>
-        </View>
-      </View>
+      <BackNavbar 
+        title="新增关注" 
+        showBackButton={true}
+        showAvatar={false}
+        onBack={handleBack}
+      />
 
       {/* 关注列表 */}
       <ScrollView