修改导航

src/components/GeneralNavbar/index.module.scss

@@ -0,0 +1,49 @@
+.customNavbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  background-color: #FAFAFA;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+.navbarContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 16px;
+}
+
+.leftSection {
+  display: flex;
+  align-items: center;
+  min-width: 60px;
+}
+
+.centerSection {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.rightSection {
+  display: flex;
+  align-items: center;
+  min-width: 60px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+}
+
+.backIcon {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}

src/components/GeneralNavbar/index.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { useGlobalState } from '@/store/global'
+import styles from './index.module.scss'
+import img from '@/config/images'
+
+interface GeneralNavbarProps {
+  title?: string
+  titleStyle?: React.CSSProperties
+  titleClassName?: string
+  leftContent?: React.ReactNode
+  backgroundColor?: string
+  showBack?: boolean
+  showLeft?: boolean
+  onBack?: () => void
+  className?: string
+}
+
+const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
+  title = '',
+  titleStyle,
+  titleClassName = '',
+  leftContent,
+  backgroundColor = '#FAFAFA',
+  showBack = true,
+  showLeft = true,
+  onBack,
+  className = ''
+}) => {
+  const { statusNavbarHeightInfo } = useGlobalState()
+  const { statusBarHeight, navBarHeight } = statusNavbarHeightInfo
+
+  const handleBack = () => {
+    if (onBack) {
+      onBack()
+    } else {
+      Taro.navigateBack()
+    }
+  }
+
+  const renderLeftContent = () => {
+    if (!showLeft) {
+      return null
+    }
+    
+    if (leftContent) {
+      return leftContent
+    }
+    
+    if (showBack) {
+      return (
+        <Image 
+          src={img.ICON_LIST_SEARCH_BACK} 
+          className={styles.backIcon} 
+          onClick={handleBack}
+        />
+      )
+    }
+    
+    return null
+  }
+
+  const renderTitle = () => {
+    if (!title) {
+      return null
+    }
+    
+    return (
+      <Text 
+        className={`${styles.title} ${titleClassName}`}
+        style={titleStyle}
+      >
+        {title}
+      </Text>
+    )
+  }
+
+  return (
+    <View
+      className={`${styles.customNavbar} ${className}`}
+      style={{ 
+        height: `${navBarHeight}px`, 
+        paddingTop: `${statusBarHeight}px`,
+        backgroundColor 
+      }}
+    >
+      <View className={styles.navbarContent}>
+        <View className={styles.leftSection}>
+          {renderLeftContent()}
+        </View>
+        
+        <View className={styles.centerSection}>
+          {renderTitle()}
+        </View>
+        
+        <View className={styles.rightSection}>
+          {/* 右侧占位，保持标题居中 */}
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default GeneralNavbar