1

src/components/BackNavbar/index.scss

@@ -1,62 +0,0 @@
-.back-navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-  background: transparent;
-  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

@@ -1,70 +0,0 @@
-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;
-  backgroundColor?: string;
-  onBack?: () => void;
-  className?: string;
-}
-
-const BackNavbar: React.FC<BackNavbarProps> = ({
-  title = '消息',
-  showAvatar = true,
-  showBackButton = false,
-  backgroundColor,
-  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`,
-        backgroundColor: backgroundColor || "transparent"
-      }}
-    >
-      <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?.avatar_url || require('@/static/userInfo/default_avatar.svg')}
-              mode="aspectFill"
-            />
-          )}
-          <Text className="navbar-title">{title}</Text>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-export default BackNavbar;

src/components/CustomNavbar/index.tsx

@@ -17,7 +17,6 @@ const CustomNavbar = (props: IProps) => {
       className={styles.customerNavbar}
       style={{
         height: `${statusBarHeight + navBarHeight}px`,
-        paddingTop: `${statusBarHeight}px`,
         backgroundColor: backgroundColor || 'transparent'
       }}
     >

src/components/CustomerNavbarBack/index.module.scss

@@ -1,50 +0,0 @@
-.customerNavbarBack {
-  position: sticky;
-  top: 0;
-  z-index: 999;
-  background-color: #ffffff;
-
-  .container {
-    padding-left: 17px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .line {
-    width: 1px;
-    height: 25px;
-    background-color: #0000000F;
-  }
-
-  .back {
-    width: 32px;
-    height: 32px;
-  }
-
-  .change {
-    width: 12px;
-    height: 12px;
-  }
-
-  .cityWrapper {
-    line-height: 20px;
-  }
-
-  .city {
-    font-weight: 600;
-    font-size: 13px;
-    line-height: 20px;
-  }
-
-  .infoWrapper {
-    line-height: 12px;
-  }
-
-  .info {
-    font-weight: 400;
-    font-size: 10px;
-    line-height: 12px;
-    color: #3C3C4399;
-  }
-}

src/components/CustomerNavbarBack/index.tsx

@@ -1,32 +0,0 @@
-import { View, Image } from "@tarojs/components";
-import img from "@/config/images";
-import styles from "./index.module.scss";
-import { useGlobalState } from "@/store/global";
-import Taro from "@tarojs/taro";
-
-const ListHeader = () => {
-  const { statusNavbarHeightInfo } = useGlobalState();
-  const { statusBarHeight, navBarHeight, totalHeight } = statusNavbarHeightInfo;
-  const handleBack = () => {
-    Taro.navigateBack();
-  }
-
-  return (
-    <View
-      className={styles.customerNavbarBack}
-      style={{ height: `${totalHeight}px` }}
-    >
-      <View
-        className={styles.container}
-        style={{
-          height: `${navBarHeight}px`,
-          paddingTop: `${statusBarHeight}px`,
-        }}
-      >
-        {/* back */}
-        <Image src={img.ICON_LIST_SEARCH_BACK} className={styles.back} onClick={handleBack} />
-      </View>
-    </View>
-  );
-};
-export default ListHeader;

src/components/GeneralNavbar/index.module.scss

@@ -2,10 +2,10 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 9;
+  z-index: 99;
   width: 100%;
   background-color: #FAFAFA;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: none;
 }
 
 .navbarContent {
@@ -53,3 +53,10 @@
   height: 24px;
   cursor: pointer;
 }
+
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}

src/components/GeneralNavbar/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { View, Text, Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { useGlobalState } from '@/store/global'
+import { useUserInfo } from '@/store/userStore'
 import styles from './index.module.scss'
 import img from '@/config/images'
 
@@ -10,9 +11,12 @@ interface GeneralNavbarProps {
   titleStyle?: React.CSSProperties
   titleClassName?: string
   leftContent?: React.ReactNode
+  rightContent?: React.ReactNode // 右侧自定义内容
   backgroundColor?: string
   showBack?: boolean
   showLeft?: boolean
+  showAvatar?: boolean // 是否显示用户头像
+  avatarUrl?: string // 自定义头像 URL
   onBack?: () => void
   className?: string
   titlePosition?: 'left' | 'center' // 标题位置：左侧或居中
@@ -23,15 +27,19 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
   titleStyle,
   titleClassName = '',
   leftContent,
-  backgroundColor = 'transparent',
+  rightContent,
+  backgroundColor = '#fafafa', // 默认背景色改为 #fafafa
   showBack = true,
   showLeft = true,
+  showAvatar = false,
+  avatarUrl,
   onBack,
   className = '',
   titlePosition = 'left' // 默认标题在左侧
 }) => {
   const { statusNavbarHeightInfo } = useGlobalState() || {}
   const { statusBarHeight = 0, navBarHeight = 44, totalHeight = 98 } = statusNavbarHeightInfo || {}
+  const userInfo = useUserInfo()
 
   const handleBack = () => {
     if (onBack) {
@@ -50,9 +58,12 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
       return leftContent
     }
 
+    const content = []
+
     if (showBack) {
-      return (
+      content.push(
         <Image
+          key="back"
           src={img.ICON_LIST_SEARCH_BACK}
           className={styles.backIcon}
           onClick={handleBack}
@@ -60,7 +71,19 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
       )
     }
 
-    return null
+    if (showAvatar) {
+      const avatar = avatarUrl || userInfo?.avatar_url || require('@/static/userInfo/default_avatar.svg')
+      content.push(
+        <Image
+          key="avatar"
+          className={styles.avatar}
+          src={avatar}
+          mode="aspectFill"
+        />
+      )
+    }
+
+    return content
   }
 
   const renderTitle = () => {
@@ -100,7 +123,7 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
         )}
 
         <View className={styles.rightSection}>
-          {/* 右侧占位 */}
+          {rightContent}
         </View>
       </View>
     </View>

src/components/index.ts

@@ -22,7 +22,6 @@ 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'
@@ -53,7 +52,6 @@ export {
   FollowUserCard,
   Comments,
   GeneralNavbar,
-  BackNavbar,
   RadarChart,
   EmptyState,
   NTRPTestEntryCard,

src/container/inputCustomerNavbar/index.scss

@@ -1,48 +0,0 @@
-  .inputCustomerNavbarContainer {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-
-    .logo {
-      width: 28px;
-      height: 16px;
-    }
-
-    .icon16 {
-      width: 16px;
-      height: 16px;
-    }
-
-    .navContent {
-      padding-left: 17px;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      width: 73%;
-      height: max-content;
-      padding-top: 5px;
-    }
-
-    .searchContainer {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      gap: 5.85px;
-      padding: 7.8px;
-      border-radius: 30px;
-      border: 0.488px solid rgba(0, 0, 0, 0.06);
-      box-shadow: 0 3.902px 46.829px 0 rgba(0, 0, 0, 0.08);
-      height: 30px;
-      box-sizing: border-box;
-      font-size: 13.659px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 17.561px;
-      flex: 1;
-
-      .nut-input {
-        padding: 0;
-      }
-    }
-  }

src/container/inputCustomerNavbar/index.tsx

@@ -1,56 +0,0 @@
-import { View, Image } from "@tarojs/components";
-import img from "@/config/images";
-import "./index.scss";
-import { useGlobalState } from "@/store/global";
-import { useListState } from "@/store/listStore";
-import CustomNavbar from "@/components/CustomNavbar";
-import { Input } from "@nutui/nutui-react-taro";
-import Taro from "@tarojs/taro";
-
-interface IProps {
-  icon: string;
-}
-
-const ListHeader = (props: IProps) => {
-  const { icon } = props;
-  const { statusNavbarHeightInfo } = useGlobalState();
-  const { searchValue } = useListState();
-  const { statusBarHeight, navBarHeight } = statusNavbarHeightInfo;
-
-  const handleInputClick = () => {
-    Taro.navigateTo({
-      url: "/game_pages/search/index",
-    });
-  }
-
-  return (
-    <CustomNavbar>
-      <View
-        className="inputCustomerNavbarContainer"
-        style={{
-          height: `${navBarHeight}px`,
-          paddingTop: `${statusBarHeight}px`,
-        }}
-      >
-        <View className="navContent">
-          {/* logo */}
-          <Image src={icon} className="logo" />
-          {/* 搜索框 */}
-          <View className="searchContainer">
-            <Image
-              className="searchIcon icon16"
-              src={img.ICON_LIST_SEARCH_SEARCH}
-            />
-            <Input
-              placeholder="搜索上海的球局和场地"
-              clearable={false}
-              value={searchValue}
-              onClick={handleInputClick}
-            />
-          </View>
-        </View>
-      </View>
-    </CustomNavbar>
-  );
-};
-export default ListHeader;

src/other_pages/comment_reply/index.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { View, Text, ScrollView, Image, Input } from "@tarojs/components";
-import { withAuth, EmptyState, BackNavbar } from "@/components";
+import { withAuth, EmptyState, GeneralNavbar } from "@/components";
 import commentService, { CommentActivity } from "@/services/commentService";
 import { formatShortRelativeTime } from "@/utils/timeUtils";
 import Taro from "@tarojs/taro";
@@ -284,9 +284,9 @@ const CommentReply = () => {
   return (
     <View className="comment-reply-container">
       {/* 顶部导航栏 */}
-      <BackNavbar 
+      <GeneralNavbar
         title="收到的评论和回复"
-        showBackButton={true}
+        showBack={true}
         showAvatar={false}
         onBack={handleBack}
       />

src/other_pages/message/index.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { View, Text, Image, ScrollView } from "@tarojs/components";
 import GuideBar from "@/components/GuideBar";
-import { withAuth, EmptyState, BackNavbar } from "@/components";
+import { withAuth, EmptyState, GeneralNavbar } from "@/components";
 import noticeService from "@/services/noticeService";
 import { formatRelativeTime } from "@/utils/timeUtils";
 import Taro from "@tarojs/taro";
@@ -132,7 +132,7 @@ const Message = () => {
   return (
     <View className="message-container">
       {/* 顶部导航栏 */}
-      <BackNavbar title="消息" />
+      <GeneralNavbar title="消息" showBack={false} showAvatar={true} />
 
       {/* 分类标签 */}
       <View className="category-tabs">

src/other_pages/new_follow/index.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { View, Text, ScrollView, Image } from "@tarojs/components";
-import { withAuth, EmptyState, BackNavbar } from "@/components";
+import { withAuth, EmptyState, GeneralNavbar } from "@/components";
 import FollowService from "@/services/followService";
 import { formatShortRelativeTime } from "@/utils/timeUtils";
 import Taro from "@tarojs/taro";
@@ -200,9 +200,9 @@ const NewFollow = () => {
   return (
     <View className="new-follow-container">
       {/* 顶部导航栏 */}
-      <BackNavbar 
+      <GeneralNavbar
         title="新增关注"
-        showBackButton={true}
+        showBack={true}
         showAvatar={false}
         onBack={handleBack}
       />

src/pages/main/index.tsx

@@ -4,7 +4,7 @@ import Taro from "@tarojs/taro";
 import { check_login_status } from "@/services/loginService";
 import { useUserActions } from "@/store/userStore";
 import GuideBar from "@/components/GuideBar";
-import { withAuth, BackNavbar } from "@/components";
+import { withAuth, GeneralNavbar } from "@/components";
 import CustomerNavBar from "@/container/listCustomNavbar";
 import ListPageContent from "./components/ListPageContent";
 import MessagePageContent from "./components/MessagePageContent";
@@ -127,9 +127,9 @@ const MainPage: React.FC = () => {
         />
       );
     } else if (currentTab === "message") {
-      // 消息页：使用 BackNavbar（与原始消息页一致，只传递 title）
+      // 消息页：使用 GeneralNavbar（与原始消息页一致，只传递 title）
       return (
-        <BackNavbar title="消息" />
+        <GeneralNavbar title="消息" />
       );
     } else if (currentTab === "personal") {
       // 我的页：使用 CustomerNavBar 显示标题

src/user_pages/billDetail/index.tsx

@@ -8,7 +8,7 @@ import httpService from "@/services/httpService";
 import { TransactionType, TransactionSubType } from "@/user_pages/wallet/index";
 import "./index.scss";
 import img from "@/config/images";
-import { BackNavbar } from "@/components"
+import { GeneralNavbar } from "@/components"
 
 enum FreezeActions {
   Unfreeze = "unfreeze",
@@ -93,9 +93,9 @@ const BillDetail: React.FC = () => {
         </View>
       </View> */}
       {/* 顶部导航栏 */}
-      <BackNavbar
+      <GeneralNavbar
         title={pageTitle}
-        showBackButton={true}
+        showBack={true}
         showAvatar={false}
         onBack={() => {
           Taro.navigateBack();

src/user_pages/downloadBill/index.tsx

@@ -6,7 +6,7 @@ import dayjs from "dayjs";
 import "./index.scss";
 import { DialogCalendarCard } from "@/components/index";
 // import { CalendarUI } from "@/components";
-import { CommonPopup, BackNavbar } from "@/components";
+import { CommonPopup, GeneralNavbar } from "@/components";
 import httpService from "@/services/httpService";
 import img from "@/config/images";
 
@@ -263,9 +263,9 @@ const DownloadBill: React.FC = () => {
         </View>
       </View> */}
       {/* 顶部导航栏 */}
-      <BackNavbar
+      <GeneralNavbar
         title={pageTitle}
-        showBackButton={true}
+        showBack={true}
         showAvatar={false}
         onBack={() => {
           Taro.navigateBack();

src/user_pages/downloadBillRecords/index.tsx

@@ -5,7 +5,7 @@ import "./index.scss";
 import httpService from "@/services/httpService";
 import Taro, { useReachBottom } from "@tarojs/taro";
 import img from "@/config/images";
-import { EmptyState, BackNavbar } from "@/components";
+import { EmptyState, GeneralNavbar } from "@/components";
 
 interface BillRecord {
   id: number;
@@ -82,9 +82,9 @@ const DownloadBillRecords: React.FC = () => {
         </View>
       </View> */}
       {/* 顶部导航栏 */}
-      <BackNavbar
+      <GeneralNavbar
         title={pageTitle}
-        showBackButton={true}
+        showBack={true}
         showAvatar={false}
         onBack={() => {
           Taro.navigateBack();

src/user_pages/edit/index.tsx

@@ -6,7 +6,7 @@ import "./index.scss";
 import { UserService, PickerOption } from "@/services/userService";
 import { clear_login_state } from "@/services/loginService";
 import { convert_db_gender_to_display } from "@/utils/genderUtils";
-import { EditModal, BackNavbar } from "@/components";
+import { EditModal, GeneralNavbar } from "@/components";
 import img from "@/config/images";
 import CommonDialog from "@/components/CommonDialog";
 import { useUserActions, useUserInfo } from "@/store/userStore";
@@ -366,11 +366,11 @@ const EditProfilePage: React.FC = () => {
         </View>
       </View> */}
       {/* 顶部导航栏 */}
-      <BackNavbar
+      <GeneralNavbar
         title=""
-        showBackButton={true}
+        showBack={true}
         showAvatar={false}
-        backgroundColor="unset"
+        backgroundColor="transparent"
         onBack={() => {
           Taro.navigateBack();
         }}

src/user_pages/other/index.tsx

@@ -16,7 +16,7 @@ import { UserService, UserInfoType } from "@/services/userService";
 import * as LoginService from "@/services/loginService";
 import CustomNavbar from "@/components/CustomNavbar";
 import { useGlobalState } from "@/store/global";
-import { BackNavbar } from "@/components";
+import { GeneralNavbar } from "@/components";
 
 const OtherUserPage: React.FC = () => {
   // 获取页面参数
@@ -229,11 +229,11 @@ const OtherUserPage: React.FC = () => {
         </View>
       </CustomNavbar> */}
       {/* 顶部导航栏 */}
-      <BackNavbar
+      <GeneralNavbar
         title=""
-        showBackButton={true}
+        showBack={true}
         showAvatar={false}
-        backgroundColor="unset"
+        backgroundColor="transparent"
         onBack={() => {
           Taro.navigateBack();
         }}

src/user_pages/queryTransactions/index.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import { View, Image, Text } from "@tarojs/components";
 import { Input } from "@nutui/nutui-react-taro";
 import img from "@/config/images";
-import { withAuth, BackNavbar } from "@/components";
+import { withAuth, GeneralNavbar } from "@/components";
 import "./index.scss";
 import httpService from "@/services/httpService";
 import Taro, { useReachBottom } from "@tarojs/taro";
@@ -262,9 +262,9 @@ const QueryTransactions = () => {
           </View>
         </View> */}
         {/* 顶部导航栏 */}
-        <BackNavbar
+        <GeneralNavbar
           title={pageTitle}
-          showBackButton={true}
+          showBack={true}
           showAvatar={false}
           onBack={() => {
             Taro.navigateBack();

src/user_pages/setTransactionPassword/index.tsx

@@ -6,7 +6,7 @@ import "./index.scss";
 import httpService from "@/services/httpService";
 import { useKeyboardHeight } from "@/store/keyboardStore";
 import img from "@/config/images";
-import { BackNavbar } from "@/components";
+import { GeneralNavbar } from "@/components";
 
 interface FormFields {
   new_password: string;
@@ -154,9 +154,9 @@ const SetTransactionPassword: React.FC = () => {
         </View>
       </View> */}
       {/* 顶部导航栏 */}
-      <BackNavbar
+      <GeneralNavbar
         title={pageTitle}
-        showBackButton={true}
+        showBack={true}
         showAvatar={false}
         onBack={() => {
           Taro.navigateBack();

src/user_pages/validPhone/index.tsx

@@ -7,7 +7,7 @@ import httpService from "@/services/httpService";
 import { useUserInfo } from "@/store/userStore";
 import { useKeyboardHeight } from "@/store/keyboardStore";
 import img from "@/config/images";
-import { BackNavbar } from "@/components";
+import { GeneralNavbar } from "@/components";
 
 interface FormFields {
   phone?: string;
@@ -127,9 +127,9 @@ const ValidPhone: React.FC = () => {
         </View>
       </View> */}
       {/* 顶部导航栏 */}
-      <BackNavbar
+      <GeneralNavbar
         title={pageTitle}
-        showBackButton={true}
+        showBack={true}
         showAvatar={false}
         onBack={() => {
           Taro.navigateBack();

src/user_pages/wallet/index.tsx

@@ -4,7 +4,7 @@ import Taro, { useDidShow, useReachBottom } from "@tarojs/taro";
 import "./index.scss";
 import { CommonPopup, EmptyState } from "@/components";
 import httpService from "@/services/httpService";
-import { withAuth, BackNavbar } from "@/components";
+import { withAuth, GeneralNavbar } from "@/components";
 import { PopupPicker } from "@/components/Picker/index";
 import { handleCustomerService } from "@/services/userService";
 import img from "@/config/images";
@@ -475,9 +475,9 @@ const WalletPage: React.FC = () => {
         </View>
       </View> */}
       {/* 顶部导航栏 */}
-      <BackNavbar
+      <GeneralNavbar
         title={pageTitle}
-        showBackButton={true}
+        showBack={true}
         showAvatar={false}
         onBack={() => {
           Taro.navigateBack();

src/user_pages/withdrawal/index.tsx

@@ -4,7 +4,7 @@ import Taro, { useDidShow } from "@tarojs/taro";
 
 import httpService from "@/services/httpService";
 import "./index.scss";
-import { CommonPopup, BackNavbar } from "@/components";
+import { CommonPopup, GeneralNavbar } from "@/components";
 import { useKeyboardHeight } from "@/store/keyboardStore";
 import img from "@/config/images";
 
@@ -298,9 +298,9 @@ const Withdrawal: React.FC = () => {
         </View>
       </View> */}
       {/* 顶部导航栏 */}
-      <BackNavbar
+      <GeneralNavbar
         title={pageTitle}
-        showBackButton={true}
+        showBack={true}
         showAvatar={false}
         onBack={() => {
           const pages = Taro.getCurrentPages()