diff --git a/src/components/BackNavbar/index.scss b/src/components/BackNavbar/index.scss deleted file mode 100644 index 040c680..0000000 --- a/src/components/BackNavbar/index.scss +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/components/BackNavbar/index.tsx b/src/components/BackNavbar/index.tsx deleted file mode 100644 index 9e7c723..0000000 --- a/src/components/BackNavbar/index.tsx +++ /dev/null @@ -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 = ({ - 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 ( - - - - {showBackButton && ( - - - - )} - {showAvatar && ( - - )} - {title} - - - - ); -}; - -export default BackNavbar; diff --git a/src/components/CustomNavbar/index.tsx b/src/components/CustomNavbar/index.tsx index 02669d4..0821054 100644 --- a/src/components/CustomNavbar/index.tsx +++ b/src/components/CustomNavbar/index.tsx @@ -15,9 +15,8 @@ const CustomNavbar = (props: IProps) => { return ( diff --git a/src/components/CustomerNavbarBack/index.module.scss b/src/components/CustomerNavbarBack/index.module.scss deleted file mode 100644 index bc09a72..0000000 --- a/src/components/CustomerNavbarBack/index.module.scss +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/src/components/CustomerNavbarBack/index.tsx b/src/components/CustomerNavbarBack/index.tsx deleted file mode 100644 index 7a712ba..0000000 --- a/src/components/CustomerNavbarBack/index.tsx +++ /dev/null @@ -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 ( - - - {/* back */} - - - - ); -}; -export default ListHeader; diff --git a/src/components/GeneralNavbar/index.module.scss b/src/components/GeneralNavbar/index.module.scss index 9b4aebc..fd9ec59 100644 --- 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; +} diff --git a/src/components/GeneralNavbar/index.tsx b/src/components/GeneralNavbar/index.tsx index bd078c9..2a93272 100644 --- 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 = ({ 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 = ({ if (!showLeft) { return null } - + if (leftContent) { return leftContent } - + + const content = [] + if (showBack) { - return ( - ) } - - return null + + if (showAvatar) { + const avatar = avatarUrl || userInfo?.avatar_url || require('@/static/userInfo/default_avatar.svg') + content.push( + + ) + } + + return content } const renderTitle = () => { if (!title) { return null } - + return ( - @@ -81,8 +104,8 @@ const GeneralNavbar: React.FC = ({ return ( = ({ {renderLeftContent()} {titlePosition === 'left' && renderTitle()} - + {titlePosition === 'center' && ( {renderTitle()} )} - + - {/* 右侧占位 */} + {rightContent} diff --git a/src/components/index.ts b/src/components/index.ts index e079f51..73f42fe 100644 --- 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, diff --git a/src/container/inputCustomerNavbar/index.scss b/src/container/inputCustomerNavbar/index.scss deleted file mode 100644 index 23006f3..0000000 --- a/src/container/inputCustomerNavbar/index.scss +++ /dev/null @@ -1,48 +0,0 @@ - .inputCustomerNavbarContainer { - display: flex; - align-items: center; - gap: 8px; - - - .logo { - width: 28px; - height: 16px; - } - - .icon16 { - width: 16px; - height: 16px; - } - - .navContent { - padding-left: 17px; - display: flex; - align-items: center; - gap: 4px; - width: 73%; - height: max-content; - padding-top: 5px; - } - - .searchContainer { - width: 100%; - display: flex; - align-items: center; - gap: 5.85px; - padding: 7.8px; - border-radius: 30px; - border: 0.488px solid rgba(0, 0, 0, 0.06); - box-shadow: 0 3.902px 46.829px 0 rgba(0, 0, 0, 0.08); - height: 30px; - box-sizing: border-box; - font-size: 13.659px; - font-style: normal; - font-weight: 400; - line-height: 17.561px; - flex: 1; - - .nut-input { - padding: 0; - } - } - } \ No newline at end of file diff --git a/src/container/inputCustomerNavbar/index.tsx b/src/container/inputCustomerNavbar/index.tsx deleted file mode 100644 index ecf8118..0000000 --- a/src/container/inputCustomerNavbar/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { View, Image } from "@tarojs/components"; -import img from "@/config/images"; -import "./index.scss"; -import { useGlobalState } from "@/store/global"; -import { useListState } from "@/store/listStore"; -import CustomNavbar from "@/components/CustomNavbar"; -import { Input } from "@nutui/nutui-react-taro"; -import Taro from "@tarojs/taro"; - -interface IProps { - icon: string; -} - -const ListHeader = (props: IProps) => { - const { icon } = props; - const { statusNavbarHeightInfo } = useGlobalState(); - const { searchValue } = useListState(); - const { statusBarHeight, navBarHeight } = statusNavbarHeightInfo; - - const handleInputClick = () => { - Taro.navigateTo({ - url: "/game_pages/search/index", - }); - } - - return ( - - - - {/* logo */} - - {/* 搜索框 */} - - - - - - - - ); -}; -export default ListHeader; diff --git a/src/other_pages/comment_reply/index.tsx b/src/other_pages/comment_reply/index.tsx index 25f3303..a232c57 100644 --- a/src/other_pages/comment_reply/index.tsx +++ b/src/other_pages/comment_reply/index.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from "react"; import { View, Text, ScrollView, Image, Input } from "@tarojs/components"; -import { withAuth, EmptyState, BackNavbar } from "@/components"; +import { withAuth, EmptyState, GeneralNavbar } from "@/components"; import commentService, { CommentActivity } from "@/services/commentService"; import { formatShortRelativeTime } from "@/utils/timeUtils"; import Taro from "@tarojs/taro"; @@ -284,9 +284,9 @@ const CommentReply = () => { return ( {/* 顶部导航栏 */} - diff --git a/src/other_pages/message/index.tsx b/src/other_pages/message/index.tsx index 3e6ffe0..db5e9bc 100644 --- a/src/other_pages/message/index.tsx +++ b/src/other_pages/message/index.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import { View, Text, Image, ScrollView } from "@tarojs/components"; import GuideBar from "@/components/GuideBar"; -import { withAuth, EmptyState, BackNavbar } from "@/components"; +import { withAuth, EmptyState, GeneralNavbar } from "@/components"; import noticeService from "@/services/noticeService"; import { formatRelativeTime } from "@/utils/timeUtils"; import Taro from "@tarojs/taro"; @@ -132,7 +132,7 @@ const Message = () => { return ( {/* 顶部导航栏 */} - + {/* 分类标签 */} diff --git a/src/other_pages/new_follow/index.tsx b/src/other_pages/new_follow/index.tsx index 4de047b..0460889 100644 --- a/src/other_pages/new_follow/index.tsx +++ b/src/other_pages/new_follow/index.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from "react"; import { View, Text, ScrollView, Image } from "@tarojs/components"; -import { withAuth, EmptyState, BackNavbar } from "@/components"; +import { withAuth, EmptyState, GeneralNavbar } from "@/components"; import FollowService from "@/services/followService"; import { formatShortRelativeTime } from "@/utils/timeUtils"; import Taro from "@tarojs/taro"; @@ -200,9 +200,9 @@ const NewFollow = () => { return ( {/* 顶部导航栏 */} - diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx index 40e41b6..c44b7b4 100644 --- a/src/pages/main/index.tsx +++ b/src/pages/main/index.tsx @@ -4,7 +4,7 @@ import Taro from "@tarojs/taro"; import { check_login_status } from "@/services/loginService"; import { useUserActions } from "@/store/userStore"; import GuideBar from "@/components/GuideBar"; -import { withAuth, BackNavbar } from "@/components"; +import { withAuth, GeneralNavbar } from "@/components"; import CustomerNavBar from "@/container/listCustomNavbar"; import ListPageContent from "./components/ListPageContent"; import MessagePageContent from "./components/MessagePageContent"; @@ -127,9 +127,9 @@ const MainPage: React.FC = () => { /> ); } else if (currentTab === "message") { - // 消息页:使用 BackNavbar(与原始消息页一致,只传递 title) + // 消息页:使用 GeneralNavbar(与原始消息页一致,只传递 title) return ( - + ); } else if (currentTab === "personal") { // 我的页:使用 CustomerNavBar 显示标题 diff --git a/src/user_pages/billDetail/index.tsx b/src/user_pages/billDetail/index.tsx index 371c70a..cf63674 100644 --- a/src/user_pages/billDetail/index.tsx +++ b/src/user_pages/billDetail/index.tsx @@ -8,7 +8,7 @@ import httpService from "@/services/httpService"; import { TransactionType, TransactionSubType } from "@/user_pages/wallet/index"; import "./index.scss"; import img from "@/config/images"; -import { BackNavbar } from "@/components" +import { GeneralNavbar } from "@/components" enum FreezeActions { Unfreeze = "unfreeze", @@ -93,9 +93,9 @@ const BillDetail: React.FC = () => { */} {/* 顶部导航栏 */} - { Taro.navigateBack(); diff --git a/src/user_pages/downloadBill/index.tsx b/src/user_pages/downloadBill/index.tsx index aed74b4..4ff6e15 100644 --- a/src/user_pages/downloadBill/index.tsx +++ b/src/user_pages/downloadBill/index.tsx @@ -6,7 +6,7 @@ import dayjs from "dayjs"; import "./index.scss"; import { DialogCalendarCard } from "@/components/index"; // import { CalendarUI } from "@/components"; -import { CommonPopup, BackNavbar } from "@/components"; +import { CommonPopup, GeneralNavbar } from "@/components"; import httpService from "@/services/httpService"; import img from "@/config/images"; @@ -263,9 +263,9 @@ const DownloadBill: React.FC = () => { */} {/* 顶部导航栏 */} - { Taro.navigateBack(); diff --git a/src/user_pages/downloadBillRecords/index.tsx b/src/user_pages/downloadBillRecords/index.tsx index fdd6aa7..0668a5d 100644 --- a/src/user_pages/downloadBillRecords/index.tsx +++ b/src/user_pages/downloadBillRecords/index.tsx @@ -5,7 +5,7 @@ import "./index.scss"; import httpService from "@/services/httpService"; import Taro, { useReachBottom } from "@tarojs/taro"; import img from "@/config/images"; -import { EmptyState, BackNavbar } from "@/components"; +import { EmptyState, GeneralNavbar } from "@/components"; interface BillRecord { id: number; @@ -82,9 +82,9 @@ const DownloadBillRecords: React.FC = () => { */} {/* 顶部导航栏 */} - { Taro.navigateBack(); diff --git a/src/user_pages/edit/index.tsx b/src/user_pages/edit/index.tsx index bc86a2c..8c3cac8 100644 --- a/src/user_pages/edit/index.tsx +++ b/src/user_pages/edit/index.tsx @@ -6,7 +6,7 @@ import "./index.scss"; import { UserService, PickerOption } from "@/services/userService"; import { clear_login_state } from "@/services/loginService"; import { convert_db_gender_to_display } from "@/utils/genderUtils"; -import { EditModal, BackNavbar } from "@/components"; +import { EditModal, GeneralNavbar } from "@/components"; import img from "@/config/images"; import CommonDialog from "@/components/CommonDialog"; import { useUserActions, useUserInfo } from "@/store/userStore"; @@ -366,11 +366,11 @@ const EditProfilePage: React.FC = () => { */} {/* 顶部导航栏 */} - { Taro.navigateBack(); }} diff --git a/src/user_pages/other/index.tsx b/src/user_pages/other/index.tsx index 2305625..a58590b 100644 --- a/src/user_pages/other/index.tsx +++ b/src/user_pages/other/index.tsx @@ -16,7 +16,7 @@ import { UserService, UserInfoType } from "@/services/userService"; import * as LoginService from "@/services/loginService"; import CustomNavbar from "@/components/CustomNavbar"; import { useGlobalState } from "@/store/global"; -import { BackNavbar } from "@/components"; +import { GeneralNavbar } from "@/components"; const OtherUserPage: React.FC = () => { // 获取页面参数 @@ -229,11 +229,11 @@ const OtherUserPage: React.FC = () => { */} {/* 顶部导航栏 */} - { Taro.navigateBack(); }} diff --git a/src/user_pages/queryTransactions/index.tsx b/src/user_pages/queryTransactions/index.tsx index d91c09f..7bdc093 100644 --- a/src/user_pages/queryTransactions/index.tsx +++ b/src/user_pages/queryTransactions/index.tsx @@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react"; import { View, Image, Text } from "@tarojs/components"; import { Input } from "@nutui/nutui-react-taro"; import img from "@/config/images"; -import { withAuth, BackNavbar } from "@/components"; +import { withAuth, GeneralNavbar } from "@/components"; import "./index.scss"; import httpService from "@/services/httpService"; import Taro, { useReachBottom } from "@tarojs/taro"; @@ -262,9 +262,9 @@ const QueryTransactions = () => { */} {/* 顶部导航栏 */} - { Taro.navigateBack(); diff --git a/src/user_pages/setTransactionPassword/index.tsx b/src/user_pages/setTransactionPassword/index.tsx index e4c3710..c981974 100644 --- a/src/user_pages/setTransactionPassword/index.tsx +++ b/src/user_pages/setTransactionPassword/index.tsx @@ -6,7 +6,7 @@ import "./index.scss"; import httpService from "@/services/httpService"; import { useKeyboardHeight } from "@/store/keyboardStore"; import img from "@/config/images"; -import { BackNavbar } from "@/components"; +import { GeneralNavbar } from "@/components"; interface FormFields { new_password: string; @@ -154,9 +154,9 @@ const SetTransactionPassword: React.FC = () => { */} {/* 顶部导航栏 */} - { Taro.navigateBack(); diff --git a/src/user_pages/validPhone/index.tsx b/src/user_pages/validPhone/index.tsx index 9fdd9f5..16199fb 100644 --- a/src/user_pages/validPhone/index.tsx +++ b/src/user_pages/validPhone/index.tsx @@ -7,7 +7,7 @@ import httpService from "@/services/httpService"; import { useUserInfo } from "@/store/userStore"; import { useKeyboardHeight } from "@/store/keyboardStore"; import img from "@/config/images"; -import { BackNavbar } from "@/components"; +import { GeneralNavbar } from "@/components"; interface FormFields { phone?: string; @@ -127,9 +127,9 @@ const ValidPhone: React.FC = () => { */} {/* 顶部导航栏 */} - { Taro.navigateBack(); diff --git a/src/user_pages/wallet/index.tsx b/src/user_pages/wallet/index.tsx index 21814f2..98c61bf 100644 --- a/src/user_pages/wallet/index.tsx +++ b/src/user_pages/wallet/index.tsx @@ -4,7 +4,7 @@ import Taro, { useDidShow, useReachBottom } from "@tarojs/taro"; import "./index.scss"; import { CommonPopup, EmptyState } from "@/components"; import httpService from "@/services/httpService"; -import { withAuth, BackNavbar } from "@/components"; +import { withAuth, GeneralNavbar } from "@/components"; import { PopupPicker } from "@/components/Picker/index"; import { handleCustomerService } from "@/services/userService"; import img from "@/config/images"; @@ -475,9 +475,9 @@ const WalletPage: React.FC = () => { */} {/* 顶部导航栏 */} - { Taro.navigateBack(); diff --git a/src/user_pages/withdrawal/index.tsx b/src/user_pages/withdrawal/index.tsx index b43ef01..c3a6f8b 100644 --- a/src/user_pages/withdrawal/index.tsx +++ b/src/user_pages/withdrawal/index.tsx @@ -4,7 +4,7 @@ import Taro, { useDidShow } from "@tarojs/taro"; import httpService from "@/services/httpService"; import "./index.scss"; -import { CommonPopup, BackNavbar } from "@/components"; +import { CommonPopup, GeneralNavbar } from "@/components"; import { useKeyboardHeight } from "@/store/keyboardStore"; import img from "@/config/images"; @@ -298,9 +298,9 @@ const Withdrawal: React.FC = () => { */} {/* 顶部导航栏 */} - { const pages = Taro.getCurrentPages()