1

src/components/GeneralNavbar/index.tsx

@@ -28,7 +28,7 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
   titleClassName = '',
   leftContent,
   rightContent,
-  backgroundColor = '#fafafa', // 默认背景色改为 #fafafa
+  backgroundColor = 'transparent', // 默认背景色为透明
   showBack = true,
   showLeft = true,
   showAvatar = false,
@@ -106,11 +106,16 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
       className={`${styles.customNavbar} ${className}`}
       style={{
         height: `${totalHeight}px`,
-        paddingTop: `${statusBarHeight}px`,
         backgroundColor: backgroundColor || 'transparent'
       }}
     >
-      <View className={styles.navbarContent} style={{ height: `${navBarHeight}px` }}>
+      <View
+        className={styles.navbarContent}
+        style={{
+          height: `${navBarHeight}px`,
+          marginTop: `${statusBarHeight}px`
+        }}
+      >
         <View className={styles.leftSection}>
           {renderLeftContent()}
           {titlePosition === 'left' && renderTitle()}

src/components/HomeNavbar/index.tsx

@@ -4,7 +4,6 @@ import img from "@/config/images";
 import { useGlobalState } from "@/store/global";
 import { useUserInfo } from "@/store/userStore";
 import { useListState } from "@/store/listStore";
-import CustomNavbar from "@/components/CustomNavbar";
 import { Input } from "@nutui/nutui-react-taro";
 import Taro from "@tarojs/taro";
 import "./index.scss";
@@ -52,12 +51,19 @@ function CityPicker(props) {
   );
 }
 
-const ListHeader = (props: IProps) => {
+/**
+ * 首页专用导航栏组件
+ * 支持三种模式：
+ * 1. Logo + 城市选择 + 球局数量（默认模式）
+ * 2. 搜索输入框模式（showInput = true）
+ * 3. 标题模式（showTitle = true，用于"我的"页面等）
+ */
+const HomeNavbar = (props: IProps) => {
   const { config, onCityPickerVisibleChange, onScrollToTop } = props;
   const { showInput = false, inputLeftIcon, leftIconClick, title, showTitle = false } = config || {};
   const { getLocationLoading, statusNavbarHeightInfo } = useGlobalState();
-  const { gamesNum, searchValue, cities, area, updateArea, getMatchesData, fetchGetGamesCount, refreshBothLists } = useListState();
-  const { navBarHeight } = statusNavbarHeightInfo;
+  const { gamesNum, searchValue, cities, area, updateArea, fetchGetGamesCount, refreshBothLists } = useListState();
+  const { statusBarHeight = 0, navBarHeight = 44 } = statusNavbarHeightInfo || {};
 
   const [cityPopupVisible, setCityPopupVisible] = useState(false);
   
@@ -80,9 +86,9 @@ const ListHeader = (props: IProps) => {
   const handleInputClick = () => {
     const currentPagePath = getCurrentFullPath();
     if (currentPagePath === "/game_pages/searchResult/index") {
-      Taro.navigateBack();
+      (Taro as any).navigateBack();
     } else {
-      Taro.navigateTo({
+      (Taro as any).navigateTo({
         url: "/game_pages/search/index",
       });
     }
@@ -97,13 +103,13 @@ const ListHeader = (props: IProps) => {
         onScrollToTop();
       } else {
         // 降级方案：使用页面滚动（兼容旧版本）
-        Taro.pageScrollTo({
+        (Taro as any).pageScrollTo({
           scrollTop: 0,
           duration: 300,
         });
       }
     }
-    Taro.redirectTo({
+    (Taro as any).redirectTo({
       url: "game_pages/list/index", // 列表页
     });
   };
@@ -127,7 +133,7 @@ const ListHeader = (props: IProps) => {
   const area_city = area.at(-1);
 
   // 处理城市切换
-  const handleCityChange = async (newArea: any) => {
+  const handleCityChange = async (_newArea: any) => {
     // 切换城市后，同时更新两个列表接口获取数据
     if (refreshBothLists) {
       await refreshBothLists();
@@ -139,7 +145,19 @@ const ListHeader = (props: IProps) => {
   };
 
   return (
-    <CustomNavbar backgroundColor="#fafafa">
+    <View
+      className="homeNavbar"
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: `${statusBarHeight + navBarHeight}px`,
+        paddingTop: `${statusBarHeight}px`,
+        backgroundColor: 'transparent',
+        zIndex: 99,
+      }}
+    >
       <View className="listNavWrapper">
         {/* 标题模式（用于"我的"页面等） */}
         {showTitle && (
@@ -203,7 +221,7 @@ const ListHeader = (props: IProps) => {
                 src={img.ICON_LIST_SEARCH_SEARCH}
               />
               <Input
-                placeholder="搜索上海的球局和场地"
+                placeholder="搜索球局和场地"
                 className="navbarInput"
                 clearable={false}
                 disabled
@@ -225,8 +243,8 @@ const ListHeader = (props: IProps) => {
           onCityChange={handleCityChange}
         />
       )}
-    </CustomNavbar>
+    </View>
   );
 };
 
-export default ListHeader;
+export default HomeNavbar;

src/game_pages/list/index.tsx

@@ -6,7 +6,7 @@ import Taro from "@tarojs/taro";
 import { useListStore } from "@/store/listStore";
 import { useGlobalState } from "@/store/global";
 import { View, Image, Text, ScrollView } from "@tarojs/components";
-import CustomerNavBar from "@/container/listCustomNavbar";
+import HomeNavbar from "@/components/HomeNavbar";
 import GuideBar from "@/components/GuideBar";
 import ListContainer from "@/container/listContainer";
 import DistanceQuickFilter from "@/components/DistanceQuickFilter";
@@ -435,7 +435,7 @@ const ListPage = () => {
     <>
 
       {/* 自定义导航 */}
-      <CustomerNavBar
+      <HomeNavbar
         config={{
           showInput: isShowInputCustomerNavBar,
         }}

src/game_pages/searchResult/index.tsx

@@ -3,7 +3,7 @@ import { useListStore } from "@/store/listStore";
 import { useGlobalState } from "@/store/global";
 import ListContainer from "@/container/listContainer";
 import img from "@/config/images";
-import CustomerNavBar from "@/container/listCustomNavbar";
+import HomeNavbar from "@/components/HomeNavbar";
 import DistanceQuickFilter from "@/components/DistanceQuickFilter";
 import { withAuth } from "@/components";
 import { useEffect } from "react";
@@ -107,7 +107,7 @@ const SearchResult = () => {
   return (
     <>
       {/* 自定义导航 */}
-      <CustomerNavBar
+      <HomeNavbar
         config={{
           showInput: true,
           inputLeftIcon: img.ICON_LIST_SEARCH_BACK,

src/pages/main/index.tsx

@@ -5,7 +5,7 @@ import { check_login_status } from "@/services/loginService";
 import { useUserActions } from "@/store/userStore";
 import GuideBar from "@/components/GuideBar";
 import { withAuth, GeneralNavbar } from "@/components";
-import CustomerNavBar from "@/container/listCustomNavbar";
+import HomeNavbar from "@/components/HomeNavbar";
 import ListPageContent from "./components/ListPageContent";
 import MessagePageContent from "./components/MessagePageContent";
 import MyselfPageContent from "./components/MyselfPageContent";
@@ -113,9 +113,9 @@ const MainPage: React.FC = () => {
   // 渲染自定义导航栏（参考原始页面的实现）
   const renderCustomNavbar = () => {
     if (currentTab === "list") {
-      // 列表页：使用 CustomerNavBar（与原始列表页一致）
+      // 列表页：使用 HomeNavbar（与原始列表页一致）
       return (
-        <CustomerNavBar
+        <HomeNavbar
           config={{
             showInput: isShowInputCustomerNavBar,
           }}
@@ -132,13 +132,12 @@ const MainPage: React.FC = () => {
         <GeneralNavbar title="消息" />
       );
     } else if (currentTab === "personal") {
-      // 我的页：使用 CustomerNavBar 显示标题
+      // 我的页：使用 GeneralNavbar 显示标题
       return (
-        <CustomerNavBar
-          config={{
-            showTitle: true,
-            title: "我的",
-          }}
+        <GeneralNavbar 
+          title=""
+          titlePosition="left"
+          showBack={false}
         />
       );
     }