1

2025-11-14 23:14:18 +08:00
parent 0adab95d34
commit 1226350099
24 changed files with 95 additions and 386 deletions
--- a/src/components/BackNavbar/index.scss
+++ b/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;
-      }
-    }
-  }
-}
--- a/src/components/BackNavbar/index.tsx
+++ b/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;
--- a/src/components/CustomNavbar/index.tsx
+++ b/src/components/CustomNavbar/index.tsx
@@ -15,9 +15,8 @@ const CustomNavbar = (props: IProps) => {
  return (
    <View
      className={styles.customerNavbar}
-      style={{ 
-        height: `${statusBarHeight + navBarHeight}px`, 
-        paddingTop: `${statusBarHeight}px`,
+      style={{
+        height: `${statusBarHeight + navBarHeight}px`,
        backgroundColor: backgroundColor || 'transparent'
      }}
    >
--- a/src/components/CustomerNavbarBack/index.module.scss
+++ b/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;
-  }
-}
--- a/src/components/CustomerNavbarBack/index.tsx
+++ b/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;
--- a/src/components/GeneralNavbar/index.module.scss
+++ b/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;
+}
--- a/src/components/GeneralNavbar/index.tsx
+++ b/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>
--- a/src/components/index.ts
+++ b/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,