修复 导航栏 高度的问题

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;
+      }
+    }
+  }
+}

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;

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;
+    width:132.7px;
-    height: 200px;
+    height: 120px;
     position: relative;
     border-radius: 20px;
     margin-bottom: 12px;

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,

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">
+      <BackNavbar 
-        <View className="navbar-content">
+        title="收到的评论和回复" 
-          <View className="back-button" onClick={handleBack}>
+        showBackButton={true}
-            <View className="back-icon"></View>
+        showAvatar={false}
-          </View>
+        onBack={handleBack}
-          <Text className="navbar-title">收到的评论和回复</Text>
+      />
-        </View>
-      </View>
 
       {/* 评论列表 */}
       <ScrollView

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;
 

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">
+      <BackNavbar title="消息" />
-        <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>
 
       {/* 分类标签 */}
       <View className="category-tabs">

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">
+      <BackNavbar 
-        <View className="navbar-content">
+        title="新增关注" 
-          <View className="back-button" onClick={handleBack}>
+        showBackButton={true}
-            <View className="back-icon"></View>
+        showAvatar={false}
-          </View>
+        onBack={handleBack}
-          <Text className="navbar-title">新增关注</Text>
+      />
-        </View>
-      </View>
 
       {/* 关注列表 */}
       <ScrollView