修改导航
This commit is contained in:
49
src/components/GeneralNavbar/index.module.scss
Normal file
49
src/components/GeneralNavbar/index.module.scss
Normal 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;
|
||||
}
|
||||
105
src/components/GeneralNavbar/index.tsx
Normal file
105
src/components/GeneralNavbar/index.tsx
Normal 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
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user