feat: 导航UI调整
This commit is contained in:
zdl
@@ -31,6 +31,7 @@ import {
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
useToast,
|
||||
Tooltip,
|
||||
} from '@chakra-ui/react';
|
||||
import { ChevronDownIcon, HamburgerIcon, SunIcon, MoonIcon } from '@chakra-ui/icons';
|
||||
import { FiStar, FiCalendar, FiUser, FiSettings, FiHome, FiLogOut } from 'react-icons/fi';
|
||||
@@ -42,6 +43,7 @@ import { logger } from '../../utils/logger';
|
||||
import { getApiBase } from '../../utils/apiConfig';
|
||||
import SubscriptionButton from '../Subscription/SubscriptionButton';
|
||||
import SubscriptionModal from '../Subscription/SubscriptionModal';
|
||||
import CrownTooltip, { TooltipContent } from '../Subscription/CrownTooltip';
|
||||
|
||||
/** 二级导航栏组件 - 显示当前一级菜单下的所有二级菜单项 */
|
||||
const SecondaryNav = ({ showCompletenessAlert }) => {
|
||||
@@ -669,44 +671,46 @@ export default function HomeNavbar() {
|
||||
<Box
|
||||
bg="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
|
||||
color="white"
|
||||
py={2}
|
||||
px={4}
|
||||
py={{ base: 2, md: 2 }}
|
||||
px={{ base: 2, md: 4 }}
|
||||
position="sticky"
|
||||
top={0}
|
||||
zIndex={1001}
|
||||
>
|
||||
<Container maxW="container.xl">
|
||||
<HStack justify="space-between" align="center">
|
||||
<HStack spacing={3}>
|
||||
<Icon as={FiStar} />
|
||||
<VStack spacing={0} align="start">
|
||||
<Text fontSize="sm" fontWeight="bold">
|
||||
<HStack justify="space-between" align="center" spacing={{ base: 2, md: 4 }}>
|
||||
<HStack spacing={{ base: 2, md: 3 }} flex={1} minW={0}>
|
||||
<Icon as={FiStar} display={{ base: 'none', sm: 'block' }} />
|
||||
<VStack spacing={0} align="start" flex={1} minW={0}>
|
||||
<Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="bold" noOfLines={1}>
|
||||
完善资料，享受更好服务
|
||||
</Text>
|
||||
<Text fontSize="xs" opacity={0.9}>
|
||||
<Text fontSize={{ base: '2xs', md: 'xs' }} opacity={0.9} noOfLines={1}>
|
||||
您还需要设置：{profileCompleteness.missingItems.join('、')}
|
||||
</Text>
|
||||
</VStack>
|
||||
<Text fontSize="xs" bg="whiteAlpha.300" px={2} py={1} borderRadius="full">
|
||||
<Text fontSize="2xs" bg="whiteAlpha.300" px={2} py={1} borderRadius="full" display={{ base: 'none', md: 'block' }}>
|
||||
{profileCompleteness.completenessPercentage}% 完成
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={2}>
|
||||
<HStack spacing={{ base: 1, md: 2 }}>
|
||||
<Button
|
||||
size="sm"
|
||||
size={{ base: 'xs', md: 'sm' }}
|
||||
colorScheme="whiteAlpha"
|
||||
variant="ghost"
|
||||
onClick={() => navigate('/home/settings')}
|
||||
minH={{ base: '32px', md: '40px' }}
|
||||
>
|
||||
立即完善
|
||||
</Button>
|
||||
<IconButton
|
||||
size="sm"
|
||||
size={{ base: 'xs', md: 'sm' }}
|
||||
variant="ghost"
|
||||
colorScheme="whiteAlpha"
|
||||
icon={<Text>×</Text>}
|
||||
icon={<Text fontSize={{ base: 'xl', md: '2xl' }}>×</Text>}
|
||||
onClick={() => setShowCompletenessAlert(false)}
|
||||
aria-label="关闭提醒"
|
||||
minW={{ base: '32px', md: '40px' }}
|
||||
/>
|
||||
</HStack>
|
||||
</HStack>
|
||||
@@ -722,20 +726,21 @@ export default function HomeNavbar() {
|
||||
backdropFilter="blur(10px)"
|
||||
borderBottom="1px"
|
||||
borderColor={navbarBorder}
|
||||
py={3}
|
||||
py={{ base: 2, md: 3 }}
|
||||
>
|
||||
<Container maxW="container.xl" px={4}>
|
||||
<Container maxW="container.xl" px={{ base: 3, md: 4 }}>
|
||||
<Flex justify="space-between" align="center">
|
||||
{/* Logo - 价小前投研 */}
|
||||
<HStack spacing={6}>
|
||||
<HStack spacing={{ base: 3, md: 6 }}>
|
||||
<Text
|
||||
fontSize="xl"
|
||||
fontSize={{ base: 'lg', md: 'xl' }}
|
||||
fontWeight="bold"
|
||||
color={brandText}
|
||||
cursor="pointer"
|
||||
_hover={{ color: brandHover }}
|
||||
onClick={() => navigate('/home')}
|
||||
style={{ minWidth: '140px' }}
|
||||
style={{ minWidth: isMobile ? '100px' : '140px' }}
|
||||
noOfLines={1}
|
||||
>
|
||||
价小前投研
|
||||
</Text>
|
||||
@@ -752,13 +757,15 @@ export default function HomeNavbar() {
|
||||
) : <NavItems isAuthenticated={isAuthenticated} user={user} />}
|
||||
|
||||
{/* 右侧：日夜模式切换 + 登录/用户区 */}
|
||||
<HStack spacing={4}>
|
||||
<HStack spacing={{ base: 2, md: 4 }}>
|
||||
<IconButton
|
||||
aria-label="切换主题"
|
||||
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
|
||||
onClick={toggleColorMode}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
minW={{ base: '36px', md: '40px' }}
|
||||
minH={{ base: '36px', md: '40px' }}
|
||||
/>
|
||||
|
||||
{/* 显示加载状态 */}
|
||||
@@ -766,95 +773,9 @@ export default function HomeNavbar() {
|
||||
<Spinner size="sm" color="blue.500" />
|
||||
) : isAuthenticated && user ? (
|
||||
// 已登录状态 - 用户菜单 + 功能菜单排列
|
||||
<HStack spacing={3}>
|
||||
{/* 用户头像+订阅徽章组合 */}
|
||||
<HStack spacing={2} align="center">
|
||||
{/* 用户头像菜单 */}
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={IconButton}
|
||||
icon={
|
||||
<Avatar
|
||||
size="sm"
|
||||
name={getDisplayName()}
|
||||
src={user.avatar_url}
|
||||
bg="blue.500"
|
||||
border={subscriptionInfo.type !== 'free' ? '2px solid' : 'none'}
|
||||
borderColor={
|
||||
subscriptionInfo.type === 'max'
|
||||
? 'purple.500'
|
||||
: subscriptionInfo.type === 'pro'
|
||||
? 'blue.500'
|
||||
: 'transparent'
|
||||
}
|
||||
/>
|
||||
}
|
||||
bg="transparent"
|
||||
_hover={{ bg: useColorModeValue('gray.100', 'gray.700') }}
|
||||
borderRadius="full"
|
||||
position="relative"
|
||||
aria-label="用户菜单"
|
||||
>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<Box px={3} py={2} borderBottom="1px" borderColor="gray.200">
|
||||
<Text fontSize="sm" fontWeight="bold">{getDisplayName()}</Text>
|
||||
<Text fontSize="xs" color="gray.500">{user.email}</Text>
|
||||
{user.phone && (
|
||||
<Text fontSize="xs" color="gray.500">{user.phone}</Text>
|
||||
)}
|
||||
{user.has_wechat && (
|
||||
<Badge size="sm" colorScheme="green" mt={1}>微信已绑定</Badge>
|
||||
)}
|
||||
</Box>
|
||||
{/* 账户管理组 */}
|
||||
<MenuItem icon={<FiUser />} onClick={() => navigate('/home/profile')}>
|
||||
个人资料
|
||||
</MenuItem>
|
||||
<MenuItem icon={<FiSettings />} onClick={() => navigate('/home/settings')}>
|
||||
账户设置
|
||||
</MenuItem>
|
||||
<MenuDivider />
|
||||
{/* 功能入口组 */}
|
||||
<MenuItem icon={<FaCrown />} onClick={() => navigate('/home/pages/account/subscription')}>
|
||||
订阅管理
|
||||
</MenuItem>
|
||||
<MenuDivider />
|
||||
{/* 退出 */}
|
||||
<MenuItem icon={<FiLogOut />} onClick={handleLogout} color="red.500">
|
||||
退出登录
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
|
||||
{/* 订阅徽章按钮 - 点击打开订阅弹窗 */}
|
||||
<SubscriptionButton
|
||||
subscriptionInfo={subscriptionInfo}
|
||||
onClick={() => setIsSubscriptionModalOpen(true)}
|
||||
/>
|
||||
|
||||
{/* 订阅管理弹窗 - 只在打开时渲染 */}
|
||||
{isSubscriptionModalOpen && (
|
||||
<SubscriptionModal
|
||||
isOpen={isSubscriptionModalOpen}
|
||||
onClose={() => setIsSubscriptionModalOpen(false)}
|
||||
subscriptionInfo={subscriptionInfo}
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
{/* 个人中心快捷按钮 */}
|
||||
<IconButton
|
||||
icon={<FiHome />}
|
||||
size="sm"
|
||||
colorScheme="gray"
|
||||
variant="ghost"
|
||||
onClick={() => navigate('/home/center')}
|
||||
aria-label="个人中心"
|
||||
_hover={{ bg: 'gray.700' }}
|
||||
/>
|
||||
|
||||
{/* 自选股 - 头像右侧 */}
|
||||
<HStack spacing={{ base: 2, md: 3 }}>
|
||||
{/* 自选股 - 移动端隐藏 */}
|
||||
{!isMobile && (
|
||||
<Menu onOpen={loadWatchlistQuotes}>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
@@ -929,8 +850,10 @@ export default function HomeNavbar() {
|
||||
)}
|
||||
</MenuList>
|
||||
</Menu>
|
||||
)}
|
||||
|
||||
{/* 关注的事件 - 头像右侧 */}
|
||||
{/* 关注的事件 - 头像右侧 - 移动端隐藏 */}
|
||||
{!isMobile && (
|
||||
<Menu onOpen={loadFollowingEvents}>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
@@ -1011,6 +934,105 @@ export default function HomeNavbar() {
|
||||
)}
|
||||
</MenuList>
|
||||
</Menu>
|
||||
)}
|
||||
|
||||
{/* 带会员标识的头像 - 点击打开订阅弹窗 */}
|
||||
<Box
|
||||
position="relative"
|
||||
cursor="pointer"
|
||||
onClick={() => setIsSubscriptionModalOpen(true)}
|
||||
>
|
||||
{/* 会员图标徽章 - 使用独立的 CrownTooltip 组件 */}
|
||||
<CrownTooltip subscriptionInfo={subscriptionInfo} />
|
||||
|
||||
{/* 头像 - 带会员等级边框和详细信息 Tooltip */}
|
||||
<Tooltip
|
||||
label={<TooltipContent subscriptionInfo={subscriptionInfo} />}
|
||||
placement="bottom"
|
||||
hasArrow
|
||||
bg={useColorModeValue('white', 'gray.800')}
|
||||
borderRadius="lg"
|
||||
border="1px solid"
|
||||
borderColor={useColorModeValue('gray.200', 'gray.600')}
|
||||
boxShadow="lg"
|
||||
p={3}
|
||||
>
|
||||
<Avatar
|
||||
size="sm"
|
||||
name={getDisplayName()}
|
||||
src={user.avatar_url}
|
||||
bg="blue.500"
|
||||
border={subscriptionInfo.type !== 'free' ? '2.5px solid' : 'none'}
|
||||
borderColor={
|
||||
subscriptionInfo.type === 'max' ? '#667eea' :
|
||||
subscriptionInfo.type === 'pro' ? '#667eea' : 'transparent'
|
||||
}
|
||||
_hover={{
|
||||
transform: 'scale(1.05)',
|
||||
boxShadow: subscriptionInfo.type !== 'free'
|
||||
? '0 4px 12px rgba(102, 126, 234, 0.4)'
|
||||
: 'md',
|
||||
}}
|
||||
transition="all 0.2s"
|
||||
/>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
|
||||
{/* 订阅管理弹窗 - 只在打开时渲染 */}
|
||||
{isSubscriptionModalOpen && (
|
||||
<SubscriptionModal
|
||||
isOpen={isSubscriptionModalOpen}
|
||||
onClose={() => setIsSubscriptionModalOpen(false)}
|
||||
subscriptionInfo={subscriptionInfo}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 个人中心下拉菜单 */}
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
_hover={{ bg: useColorModeValue('gray.100', 'gray.700') }}
|
||||
>
|
||||
个人中心
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<Box px={3} py={2} borderBottom="1px" borderColor="gray.200">
|
||||
<Text fontSize="sm" fontWeight="bold">{getDisplayName()}</Text>
|
||||
<Text fontSize="xs" color="gray.500">{user.email}</Text>
|
||||
{user.phone && (
|
||||
<Text fontSize="xs" color="gray.500">{user.phone}</Text>
|
||||
)}
|
||||
{user.has_wechat && (
|
||||
<Badge size="sm" colorScheme="green" mt={1}>微信已绑定</Badge>
|
||||
)}
|
||||
</Box>
|
||||
{/* 前往个人中心 */}
|
||||
<MenuItem icon={<FiHome />} onClick={() => navigate('/home/center')}>
|
||||
前往个人中心
|
||||
</MenuItem>
|
||||
<MenuDivider />
|
||||
{/* 账户管理组 */}
|
||||
<MenuItem icon={<FiUser />} onClick={() => navigate('/home/profile')}>
|
||||
个人资料
|
||||
</MenuItem>
|
||||
<MenuItem icon={<FiSettings />} onClick={() => navigate('/home/settings')}>
|
||||
账户设置
|
||||
</MenuItem>
|
||||
<MenuDivider />
|
||||
{/* 功能入口组 */}
|
||||
<MenuItem icon={<FaCrown />} onClick={() => navigate('/home/pages/account/subscription')}>
|
||||
订阅管理
|
||||
</MenuItem>
|
||||
<MenuDivider />
|
||||
{/* 退出 */}
|
||||
<MenuItem icon={<FiLogOut />} onClick={handleLogout} color="red.500">
|
||||
退出登录
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</HStack>
|
||||
) : (
|
||||
// 未登录状态 - 单一按钮
|
||||
|
||||
Reference in New Issue
Block a user