This commit is contained in:
张成
2025-11-14 23:14:18 +08:00
parent 0adab95d34
commit 1226350099
24 changed files with 95 additions and 386 deletions

View File

@@ -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;
}
}
}
}

View File

@@ -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;

View File

@@ -17,7 +17,6 @@ const CustomNavbar = (props: IProps) => {
className={styles.customerNavbar}
style={{
height: `${statusBarHeight + navBarHeight}px`,
paddingTop: `${statusBarHeight}px`,
backgroundColor: backgroundColor || 'transparent'
}}
>

View File

@@ -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;
}
}

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -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) {
@@ -50,9 +58,12 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
return leftContent
}
const content = []
if (showBack) {
return (
content.push(
<Image
key="back"
src={img.ICON_LIST_SEARCH_BACK}
className={styles.backIcon}
onClick={handleBack}
@@ -60,7 +71,19 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
)
}
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 = () => {
@@ -100,7 +123,7 @@ const GeneralNavbar: React.FC<GeneralNavbarProps> = ({
)}
<View className={styles.rightSection}>
{/* 右侧占位 */}
{rightContent}
</View>
</View>
</View>

View File

@@ -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,

View File

@@ -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;
}
}
}

View File

@@ -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 (
<CustomNavbar>
<View
className="inputCustomerNavbarContainer"
style={{
height: `${navBarHeight}px`,
paddingTop: `${statusBarHeight}px`,
}}
>
<View className="navContent">
{/* logo */}
<Image src={icon} className="logo" />
{/* 搜索框 */}
<View className="searchContainer">
<Image
className="searchIcon icon16"
src={img.ICON_LIST_SEARCH_SEARCH}
/>
<Input
placeholder="搜索上海的球局和场地"
clearable={false}
value={searchValue}
onClick={handleInputClick}
/>
</View>
</View>
</View>
</CustomNavbar>
);
};
export default ListHeader;

View File

@@ -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 (
<View className="comment-reply-container">
{/* 顶部导航栏 */}
<BackNavbar
<GeneralNavbar
title="收到的评论和回复"
showBackButton={true}
showBack={true}
showAvatar={false}
onBack={handleBack}
/>

View File

@@ -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 (
<View className="message-container">
{/* 顶部导航栏 */}
<BackNavbar title="消息" />
<GeneralNavbar title="消息" showBack={false} showAvatar={true} />
{/* 分类标签 */}
<View className="category-tabs">

View File

@@ -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 (
<View className="new-follow-container">
{/* 顶部导航栏 */}
<BackNavbar
<GeneralNavbar
title="新增关注"
showBackButton={true}
showBack={true}
showAvatar={false}
onBack={handleBack}
/>

View File

@@ -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 (
<BackNavbar title="消息" />
<GeneralNavbar title="消息" />
);
} else if (currentTab === "personal") {
// 我的页:使用 CustomerNavBar 显示标题

View File

@@ -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 = () => {
</View>
</View> */}
{/* 顶部导航栏 */}
<BackNavbar
<GeneralNavbar
title={pageTitle}
showBackButton={true}
showBack={true}
showAvatar={false}
onBack={() => {
Taro.navigateBack();

View File

@@ -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 = () => {
</View>
</View> */}
{/* 顶部导航栏 */}
<BackNavbar
<GeneralNavbar
title={pageTitle}
showBackButton={true}
showBack={true}
showAvatar={false}
onBack={() => {
Taro.navigateBack();

View File

@@ -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 = () => {
</View>
</View> */}
{/* 顶部导航栏 */}
<BackNavbar
<GeneralNavbar
title={pageTitle}
showBackButton={true}
showBack={true}
showAvatar={false}
onBack={() => {
Taro.navigateBack();

View File

@@ -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 = () => {
</View>
</View> */}
{/* 顶部导航栏 */}
<BackNavbar
<GeneralNavbar
title=""
showBackButton={true}
showBack={true}
showAvatar={false}
backgroundColor="unset"
backgroundColor="transparent"
onBack={() => {
Taro.navigateBack();
}}

View File

@@ -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 = () => {
</View>
</CustomNavbar> */}
{/* 顶部导航栏 */}
<BackNavbar
<GeneralNavbar
title=""
showBackButton={true}
showBack={true}
showAvatar={false}
backgroundColor="unset"
backgroundColor="transparent"
onBack={() => {
Taro.navigateBack();
}}

View File

@@ -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 = () => {
</View>
</View> */}
{/* 顶部导航栏 */}
<BackNavbar
<GeneralNavbar
title={pageTitle}
showBackButton={true}
showBack={true}
showAvatar={false}
onBack={() => {
Taro.navigateBack();

View File

@@ -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 = () => {
</View>
</View> */}
{/* 顶部导航栏 */}
<BackNavbar
<GeneralNavbar
title={pageTitle}
showBackButton={true}
showBack={true}
showAvatar={false}
onBack={() => {
Taro.navigateBack();

View File

@@ -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 = () => {
</View>
</View> */}
{/* 顶部导航栏 */}
<BackNavbar
<GeneralNavbar
title={pageTitle}
showBackButton={true}
showBack={true}
showAvatar={false}
onBack={() => {
Taro.navigateBack();

View File

@@ -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 = () => {
</View>
</View> */}
{/* 顶部导航栏 */}
<BackNavbar
<GeneralNavbar
title={pageTitle}
showBackButton={true}
showBack={true}
showAvatar={false}
onBack={() => {
Taro.navigateBack();

View File

@@ -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 = () => {
</View>
</View> */}
{/* 顶部导航栏 */}
<BackNavbar
<GeneralNavbar
title={pageTitle}
showBackButton={true}
showBack={true}
showAvatar={false}
onBack={() => {
const pages = Taro.getCurrentPages()