1

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) {
@@ -45,31 +53,46 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
     if (!showLeft) {
       return null
     }
-    
+
     if (leftContent) {
       return leftContent
     }
-    
+
+    const content = []
+
     if (showBack) {
-      return (
-        <Image 
-          src={img.ICON_LIST_SEARCH_BACK} 
-          className={styles.backIcon} 
+      content.push(
+        <Image
+          key="back"
+          src={img.ICON_LIST_SEARCH_BACK}
+          className={styles.backIcon}
           onClick={handleBack}
         />
       )
     }
-    
-    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 = () => {
     if (!title) {
       return null
     }
-    
+
     return (
-      <Text 
+      <Text
         className={`${styles.title} ${titleClassName}`}
         style={titleStyle}
       >
@@ -81,8 +104,8 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
   return (
     <View
       className={`${styles.customNavbar} ${className}`}
-      style={{ 
-        height: `${totalHeight}px`, 
+      style={{
+        height: `${totalHeight}px`,
         paddingTop: `${statusBarHeight}px`,
         backgroundColor: backgroundColor || 'transparent'
       }}
@@ -92,15 +115,15 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
           {renderLeftContent()}
           {titlePosition === 'left' && renderTitle()}
         </View>
-        
+
         {titlePosition === 'center' && (
           <View className={styles.centerSection}>
             {renderTitle()}
           </View>
         )}
-        
+
         <View className={styles.rightSection}>
-          {/* 右侧占位 */}
+          {rightContent}
         </View>
       </View>
     </View>