From 0adab95d3415d8a9d08ef52b780a613754af6b8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= <light.zhang@ysinc.com>
Date: Fri, 14 Nov 2025 22:54:36 +0800
Subject: [PATCH] 1

---
 src/components/BackNavbar/index.scss          |   5 +-
 src/components/BackNavbar/index.tsx           |   2 +-
 src/components/CustomNavbar/index.module.scss |   2 +-
 src/components/CustomNavbar/index.tsx         |   4 +-
 .../GeneralNavbar/index.module.scss           |  10 +-
 src/components/GeneralNavbar/index.tsx        |  21 ++--
 src/components/GuideBar/index.tsx             |  13 +-
 src/components/ListCard/index.tsx             |   3 +-
 src/components/PublishMenu/PublishMenu.tsx    |  11 +-
 src/order_pages/orderList/index.tsx           |   3 +-
 src/pages/main/components/ListPageContent.tsx |   4 +-
 .../main/components/MessagePageContent.tsx    |   7 +-
 src/pages/main/index.scss                     |  10 +-
 src/user_pages/follow/index.tsx               |   2 +-
 src/utils/index.ts                            |   1 +
 src/utils/navigation.ts                       | 115 ++++++++++++++++++
 16 files changed, 171 insertions(+), 42 deletions(-)
 create mode 100644 src/utils/navigation.ts

diff --git a/src/components/BackNavbar/index.scss b/src/components/BackNavbar/index.scss
index 6ca5e0f..040c680 100644
--- a/src/components/BackNavbar/index.scss
+++ b/src/components/BackNavbar/index.scss
@@ -1,8 +1,9 @@
 .back-navbar {
-  position: sticky;
+  position: fixed;
   top: 0;
+  left: 0;
   z-index: 100;
-  background: #ffffff;
+  background: transparent;
   width: 100%;
   box-sizing: border-box;
 
diff --git a/src/components/BackNavbar/index.tsx b/src/components/BackNavbar/index.tsx
index 5cd55c0..9e7c723 100644
--- a/src/components/BackNavbar/index.tsx
+++ b/src/components/BackNavbar/index.tsx
@@ -40,7 +40,7 @@ const BackNavbar: React.FC<BackNavbarProps> = ({
       style={{
         paddingTop: `${statusBarHeight}px`,
         height: `${totalHeight}px`,
-        backgroundColor: backgroundColor || "#fafafa"
+        backgroundColor: backgroundColor || "transparent"
       }}
     >
       <View 
diff --git a/src/components/CustomNavbar/index.module.scss b/src/components/CustomNavbar/index.module.scss
index a9816cc..68195a6 100644
--- a/src/components/CustomNavbar/index.module.scss
+++ b/src/components/CustomNavbar/index.module.scss
@@ -5,6 +5,6 @@
   overflow: hidden;
   z-index: 99;
   width: 100%;
-  // 背景颜色通过 style 动态设置，默认透明
+  // 背景颜色通过 style 动态设置，默认 #FAFAFA
   box-shadow: none;
 }
diff --git a/src/components/CustomNavbar/index.tsx b/src/components/CustomNavbar/index.tsx
index 1c01f28..02669d4 100644
--- a/src/components/CustomNavbar/index.tsx
+++ b/src/components/CustomNavbar/index.tsx
@@ -16,9 +16,9 @@ const CustomNavbar = (props: IProps) => {
     <View
       className={styles.customerNavbar}
       style={{ 
-        height: `${navBarHeight}px`, 
+        height: `${statusBarHeight + navBarHeight}px`, 
         paddingTop: `${statusBarHeight}px`,
-        backgroundColor: backgroundColor || '#fafafa'
+        backgroundColor: backgroundColor || 'transparent'
       }}
     >
       {children}
diff --git a/src/components/GeneralNavbar/index.module.scss b/src/components/GeneralNavbar/index.module.scss
index f1f1cdb..9b4aebc 100644
--- a/src/components/GeneralNavbar/index.module.scss
+++ b/src/components/GeneralNavbar/index.module.scss
@@ -19,7 +19,8 @@
 .leftSection {
   display: flex;
   align-items: center;
-  min-width: 60px;
+  gap: 8px;
+  flex: 1;
 }
 
 .centerSection {
@@ -27,6 +28,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  pointer-events: none;
 }
 
 .rightSection {
@@ -39,7 +44,8 @@
   font-size: 18px;
   font-weight: 600;
   color: #333;
-  text-align: center;
+  text-align: left;
+  pointer-events: auto;
 }
 
 .backIcon {
diff --git a/src/components/GeneralNavbar/index.tsx b/src/components/GeneralNavbar/index.tsx
index aa58ede..bd078c9 100644
--- a/src/components/GeneralNavbar/index.tsx
+++ b/src/components/GeneralNavbar/index.tsx
@@ -15,6 +15,7 @@ interface GeneralNavbarProps {
   showLeft?: boolean
   onBack?: () => void
   className?: string
+  titlePosition?: 'left' | 'center' // 标题位置：左侧或居中
 }
 
 const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
@@ -22,11 +23,12 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
   titleStyle,
   titleClassName = '',
   leftContent,
-  backgroundColor = '#FAFAFA',
+  backgroundColor = 'transparent',
   showBack = true,
   showLeft = true,
   onBack,
-  className = ''
+  className = '',
+  titlePosition = 'left' // 默认标题在左侧
 }) => {
   const { statusNavbarHeightInfo } = useGlobalState() || {}
   const { statusBarHeight = 0, navBarHeight = 44, totalHeight = 98 } = statusNavbarHeightInfo || {}
@@ -35,7 +37,7 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
     if (onBack) {
       onBack()
     } else {
-      Taro.navigateBack()
+      (Taro as any).navigateBack()
     }
   }
 
@@ -82,20 +84,23 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
       style={{ 
         height: `${totalHeight}px`, 
         paddingTop: `${statusBarHeight}px`,
-        backgroundColor: backgroundColor || '#FAFAFA'
+        backgroundColor: backgroundColor || 'transparent'
       }}
     >
       <View className={styles.navbarContent} style={{ height: `${navBarHeight}px` }}>
         <View className={styles.leftSection}>
           {renderLeftContent()}
+          {titlePosition === 'left' && renderTitle()}
         </View>
         
-        <View className={styles.centerSection}>
-          {renderTitle()}
-        </View>
+        {titlePosition === 'center' && (
+          <View className={styles.centerSection}>
+            {renderTitle()}
+          </View>
+        )}
         
         <View className={styles.rightSection}>
-          {/* 右侧占位，保持标题居中 */}
+          {/* 右侧占位 */}
         </View>
       </View>
     </View>
diff --git a/src/components/GuideBar/index.tsx b/src/components/GuideBar/index.tsx
index 9915f56..f0da1da 100644
--- a/src/components/GuideBar/index.tsx
+++ b/src/components/GuideBar/index.tsx
@@ -1,7 +1,6 @@
-import React, { useState } from "react";
-import { View, Text, Image } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
 import Taro from "@tarojs/taro";
-import img from "@/config/images";
+import { redirectTo } from "@/utils/navigation";
 import "./index.scss";
 import PublishMenu from "../PublishMenu";
 export type currentPageType = "games" | "message" | "personal";
@@ -24,12 +23,6 @@ const GuideBar = (props) => {
     },
   ];
 
-  const handlePublish = () => {
-    Taro.navigateTo({
-      url: "/publish_pages/publishBall/index",
-    });
-  };
-
   const handlePageChange = (code: string) => {
     if (code === currentPage) {
       return;
@@ -52,7 +45,7 @@ const GuideBar = (props) => {
     if (code === "list") {
       url = "/game_pages/list/index"
     }
-    Taro.redirectTo({
+    redirectTo({
       url: url,
     }).then(() => {
       (Taro as any).pageScrollTo({
diff --git a/src/components/ListCard/index.tsx b/src/components/ListCard/index.tsx
index e0a27ac..52c0474 100644
--- a/src/components/ListCard/index.tsx
+++ b/src/components/ListCard/index.tsx
@@ -4,6 +4,7 @@ import { useMemo } from "react";
 import img from "../../config/images";
 import { ListCardProps } from "../../../types/list/types";
 import { formatGameTime, calculateDuration } from "@/utils/timeUtils";
+import { navigateTo } from "@/utils/navigation";
 import images from '@/config/images'
 import "./index.scss";
 
@@ -50,7 +51,7 @@ const ListCard: React.FC<ListCardProps> = ({
   };
 
   const handleViewDetail = () => {
-    Taro.navigateTo({
+    navigateTo({
       url: `/game_pages/detail/index?id=${id || 1}&from=list`,
     });
   };
diff --git a/src/components/PublishMenu/PublishMenu.tsx b/src/components/PublishMenu/PublishMenu.tsx
index 26b44a0..ecddbf7 100644
--- a/src/components/PublishMenu/PublishMenu.tsx
+++ b/src/components/PublishMenu/PublishMenu.tsx
@@ -7,6 +7,7 @@ import {
   EvaluateCallback,
   EvaluateScene,
 } from "@/store/evaluateStore";
+import { navigateTo, redirectTo, navigateBack } from "@/utils/navigation";
 import styles from "./index.module.scss";
 import images from "@/config/images";
 import AiImportPopup from "@/publish_pages/publishBall/components/AiImportPopup";
@@ -46,7 +47,7 @@ const PublishMenu: React.FC<PublishMenuProps> = (props) => {
       setAiImportVisible(true);
       return;
     }
-    Taro.navigateTo({
+    navigateTo({
       url: `/publish_pages/publishBall/index?type=${type}`,
     });
   };
@@ -58,16 +59,16 @@ const PublishMenu: React.FC<PublishMenuProps> = (props) => {
           if (flag) {
             handleMenuClick(type);
           } else if (type === "ai") {
-            Taro.navigateBack();
+            navigateBack();
             setAiImportVisible(true);
           } else {
-            Taro.redirectTo({
+            redirectTo({
               url: `/publish_pages/publishBall/index?type=${type}`,
             });
           }
         },
         onCancel: () => {
-          Taro.navigateBack();
+          navigateBack();
         },
       });
       setIsVisible(false);
@@ -81,7 +82,7 @@ const PublishMenu: React.FC<PublishMenuProps> = (props) => {
   };
 
   const handleManualPublish = () => {
-    Taro.navigateTo({
+    navigateTo({
       url: "/publish_pages/publishBall/index?type=individual",
     });
   };
diff --git a/src/order_pages/orderList/index.tsx b/src/order_pages/orderList/index.tsx
index ba22c7e..652192d 100644
--- a/src/order_pages/orderList/index.tsx
+++ b/src/order_pages/orderList/index.tsx
@@ -267,7 +267,8 @@ const OrderList = () => {
     >
       <GeneralNavbar
         title="订单列表"
-        backgroundColor="transparent"
+        backgroundColor="#FAFAFA"
+        titlePosition="left"
         titleClassName={styles.titleClassName}
         className={styles.navbar}
       />
diff --git a/src/pages/main/components/ListPageContent.tsx b/src/pages/main/components/ListPageContent.tsx
index 34ce5ec..a2827bc 100644
--- a/src/pages/main/components/ListPageContent.tsx
+++ b/src/pages/main/components/ListPageContent.tsx
@@ -11,7 +11,7 @@ import DistanceQuickFilter from "@/components/DistanceQuickFilter";
 import { updateUserLocation } from "@/services/userService";
 import { useUserActions } from "@/store/userStore";
 import { useDictionaryStore } from "@/store/dictionaryStore";
-import { saveImage } from "@/utils";
+import { saveImage, navigateTo } from "@/utils";
 
 export interface ListPageContentProps {
   onNavStateChange?: (state: {
@@ -246,7 +246,7 @@ const ListPageContent: React.FC<ListPageContentProps> = ({
   };
 
   const handleSearchClick = () => {
-    (Taro as any).navigateTo({
+    navigateTo({
       url: "/game_pages/search/index",
     });
   };
diff --git a/src/pages/main/components/MessagePageContent.tsx b/src/pages/main/components/MessagePageContent.tsx
index d4d39f8..3762905 100644
--- a/src/pages/main/components/MessagePageContent.tsx
+++ b/src/pages/main/components/MessagePageContent.tsx
@@ -5,6 +5,7 @@ import noticeService from "@/services/noticeService";
 import { formatRelativeTime } from "@/utils/timeUtils";
 import Taro from "@tarojs/taro";
 import { useGlobalState } from "@/store/global";
+import { navigateTo } from "@/utils/navigation";
 import "@/other_pages/message/index.scss";
 
 interface MessageItem {
@@ -59,14 +60,14 @@ const MessagePageContent = () => {
 
   const handleTabClick = (tab: MessageCategory) => {
     if (tab === "comment") {
-      (Taro as any).navigateTo({
+      navigateTo({
         url: "/other_pages/comment_reply/index",
       });
       return;
     }
 
     if (tab === "follow") {
-      (Taro as any).navigateTo({
+      navigateTo({
         url: "/other_pages/new_follow/index",
       });
       return;
@@ -81,7 +82,7 @@ const MessagePageContent = () => {
       return;
     }
 
-    (Taro as any).navigateTo({
+    navigateTo({
       url: message.jump_url,
     }).catch(() => {
       (Taro as any).showToast({
diff --git a/src/pages/main/index.scss b/src/pages/main/index.scss
index 8699fd2..eb0ad60 100644
--- a/src/pages/main/index.scss
+++ b/src/pages/main/index.scss
@@ -21,15 +21,19 @@
     top: 0;
     left: 0;
     opacity: 0;
-    transform: translateX(100%);
-    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+    transform: scale(0.98);
+    transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
+                transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     pointer-events: none;
+    will-change: opacity, transform;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
 
     &.active {
       opacity: 1;
-      transform: translateX(0);
+      transform: scale(1);
       z-index: 1;
       pointer-events: auto;
     }
diff --git a/src/user_pages/follow/index.tsx b/src/user_pages/follow/index.tsx
index 73860e8..d58d93d 100644
--- a/src/user_pages/follow/index.tsx
+++ b/src/user_pages/follow/index.tsx
@@ -235,7 +235,7 @@ const FollowPage: React.FC = () => {
   return (
     <View className="follow_page">
       {/* 自定义导航栏 */}
-      <CustomNavbar>
+      <CustomNavbar backgroundColor="#FAFAFA">
         <View className="navbar_content">
           <View className="navbar_back" onClick={() => Taro.navigateBack()}>
             <View className="back_icon" />
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 8841d7a..2ad0bec 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -10,3 +10,4 @@ export * from './routeUtil';
 export * from './share'
 export * from './genPoster'
 export * from './wx_helper'
+export * from './navigation';
diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts
new file mode 100644
index 0000000..a489129
--- /dev/null
+++ b/src/utils/navigation.ts
@@ -0,0 +1,115 @@
+import Taro from "@tarojs/taro";
+
+/**
+ * 导航工具函数 - 封装页面跳转，提供流畅的过渡效果
+ */
+
+interface NavigateOptions {
+  url: string;
+  success?: (res: any) => void;
+  fail?: (err: any) => void;
+  complete?: (res: any) => void;
+}
+
+/**
+ * 导航到新页面（带过渡动画）
+ * 使用 Taro.navigateTo，系统会自动提供过渡动画
+ */
+export const navigateTo = (options: NavigateOptions): Promise<TaroGeneral.NavigateToSuccessCallbackResult> => {
+  return new Promise((resolve, reject) => {
+    (Taro as any).navigateTo({
+      ...options,
+      success: (res: any) => {
+        options.success?.(res);
+        resolve(res);
+      },
+      fail: (err: any) => {
+        options.fail?.(err);
+        reject(err);
+      },
+      complete: (res: any) => {
+        options.complete?.(res);
+      },
+    });
+  });
+};
+
+/**
+ * 重定向到新页面（带过渡动画）
+ * 使用 Taro.redirectTo，系统会自动提供过渡动画
+ */
+export const redirectTo = (options: NavigateOptions): Promise<TaroGeneral.NavigateToSuccessCallbackResult> => {
+  return new Promise((resolve, reject) => {
+    (Taro as any).redirectTo({
+      ...options,
+      success: (res: any) => {
+        options.success?.(res);
+        resolve(res);
+      },
+      fail: (err: any) => {
+        options.fail?.(err);
+        reject(err);
+      },
+      complete: (res: any) => {
+        options.complete?.(res);
+      },
+    });
+  });
+};
+
+/**
+ * 返回上一页（带过渡动画）
+ */
+export const navigateBack = (options?: { delta?: number }): Promise<TaroGeneral.NavigateBackSuccessCallbackResult> => {
+  return new Promise((resolve, reject) => {
+    (Taro as any).navigateBack({
+      delta: options?.delta || 1,
+      success: (res: any) => {
+        resolve(res);
+      },
+      fail: (err: any) => {
+        reject(err);
+      },
+    });
+  });
+};
+
+/**
+ * 切换到 tabBar 页面（无过渡动画，这是 tabBar 的特性）
+ */
+export const switchTab = (options: { url: string }): Promise<TaroGeneral.SwitchTabSuccessCallbackResult> => {
+  return new Promise((resolve, reject) => {
+    Taro.switchTab({
+      ...options,
+      success: (res: any) => {
+        resolve(res);
+      },
+      fail: (err: any) => {
+        reject(err);
+      },
+    });
+  });
+};
+
+/**
+ * 重新加载当前页面
+ */
+export const reLaunch = (options: NavigateOptions): Promise<TaroGeneral.ReLaunchSuccessCallbackResult> => {
+  return new Promise((resolve, reject) => {
+    (Taro as any).reLaunch({
+      ...options,
+      success: (res: any) => {
+        options.success?.(res);
+        resolve(res);
+      },
+      fail: (err: any) => {
+        options.fail?.(err);
+        reject(err);
+      },
+      complete: (res: any) => {
+        options.complete?.(res);
+      },
+    });
+  });
+};
+