修改导航

This commit is contained in:
筱野
2025-09-21 22:00:30 +08:00
parent b42a5d610c
commit 64aa4ab2e3
10 changed files with 263 additions and 40 deletions

View File

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

View File

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

View File

@@ -44,14 +44,7 @@ const PublishMenu: React.FC<PublishMenuProps> = () => {
})
}
const handlePasteAndRecognize = (text: string) => {
console.log('识别的文本:', text)
// TODO: 实现文本识别逻辑
Taro.showToast({
title: '文本识别功能开发中',
icon: 'none'
})
}
return (
<View className={styles.publishMenu}>
@@ -129,7 +122,6 @@ const PublishMenu: React.FC<PublishMenuProps> = () => {
visible={aiImportVisible}
onClose={handleAiImportClose}
onManualPublish={handleManualPublish}
onPasteAndRecognize={handlePasteAndRecognize}
/>
</View>
)

View File

@@ -66,8 +66,11 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
<View className='time-content' onClick={() => openPicker('start')}>
<Text className='time-label'></Text>
<view className='time-text-wrapper'>
<Text className='time-text'>{getDate(value.start_time)}</Text>
{value.start_time && (<>
<Text className='time-text'>{getDate(value.start_time)}</Text>
<Text className='time-text time-am'>{getTime(value.start_time)}</Text>
</>)}
{!value.start_time && (<Text className='time-text'></Text>)}
</view>
</View>
</View>
@@ -80,8 +83,9 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
<View className='time-content' onClick={() => openPicker('end')}>
<Text className='time-label'></Text>
<view className='time-text-wrapper'>
{showEndTime && (<Text className='time-text'>{getDate(value.end_time)}</Text>)}
<Text className='time-text time-am'>{getTime(value.end_time)}</Text>
{value.end_time && (<>{showEndTime && (<Text className='time-text'>{getDate(value.end_time)}</Text>)}
<Text className='time-text time-am'>{getTime(value.end_time)}</Text></>)}
{!value.end_time && (<Text className='time-text'></Text>)}
</view>
</View>
</View>

View File

@@ -20,6 +20,7 @@ import RefundPopup from "./refundPopup";
import GameManagePopup from './GameManagePopup';
import FollowUserCard from './FollowUserCard/index';
import Comments from "./Comments";
import GeneralNavbar from "./GeneralNavbar";
export {
ActivityTypeSwitch,
@@ -45,4 +46,5 @@ export {
GameManagePopup,
FollowUserCard,
Comments,
GeneralNavbar,
};