f02795d960
- 字体大小从 10px 调整为 xs (12px) - 文字亮度从 0.5/0.6 提升到 0.8/0.85 - 添加 fontWeight="medium" 加粗显示 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
354 lines
11 KiB
JavaScript
354 lines
11 KiB
JavaScript
/**
|
|
* GlobalSidebar - 全局右侧工具栏
|
|
*
|
|
* 可收起/展开的侧边栏，包含关注股票和事件动态
|
|
* 收起时点击图标显示悬浮弹窗
|
|
*/
|
|
|
|
import React from 'react';
|
|
import {
|
|
Box,
|
|
VStack,
|
|
Icon,
|
|
IconButton,
|
|
Badge,
|
|
Spinner,
|
|
Center,
|
|
Popover,
|
|
PopoverTrigger,
|
|
PopoverContent,
|
|
PopoverBody,
|
|
PopoverHeader,
|
|
PopoverCloseButton,
|
|
Text,
|
|
HStack,
|
|
Portal,
|
|
} from '@chakra-ui/react';
|
|
import { ChevronLeft, ChevronRight, BarChart2, Star, TrendingUp } from 'lucide-react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useGlobalSidebar } from '@/contexts/GlobalSidebarContext';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { getEventDetailUrl } from '@/utils/idEncoder';
|
|
import { Z_INDEX, LAYOUT_SIZE } from '@/layouts/config/layoutConfig';
|
|
import WatchSidebar from '@views/Profile/components/WatchSidebar';
|
|
import { WatchlistPanel, FollowingEventsPanel } from '@views/Profile/components/WatchSidebar/components';
|
|
import HotSectorsRanking from '@views/Profile/components/MarketDashboard/components/atoms/HotSectorsRanking';
|
|
|
|
/**
|
|
* 收起状态下的图标菜单（带悬浮弹窗）
|
|
*/
|
|
const CollapsedMenu = ({
|
|
watchlist,
|
|
realtimeQuotes,
|
|
followingEvents,
|
|
eventComments,
|
|
onToggle,
|
|
onStockClick,
|
|
onEventClick,
|
|
onCommentClick,
|
|
onAddStock,
|
|
onAddEvent,
|
|
onUnwatch,
|
|
onUnfollow,
|
|
}) => {
|
|
return (
|
|
<VStack spacing={4} py={4} align="center">
|
|
{/* 展开按钮 */}
|
|
<HStack spacing={1} w="100%" justify="center" cursor="pointer" onClick={onToggle} _hover={{ bg: 'rgba(255, 255, 255, 0.05)' }} py={1} borderRadius="md">
|
|
<Icon as={ChevronLeft} boxSize={4} color="rgba(255, 255, 255, 0.8)" />
|
|
<Text fontSize="xs" color="rgba(255, 255, 255, 0.8)" fontWeight="medium">
|
|
展开
|
|
</Text>
|
|
</HStack>
|
|
|
|
{/* 关注股票 - 悬浮弹窗 */}
|
|
<Popover placement="left-start" trigger="click" isLazy>
|
|
<PopoverTrigger>
|
|
<VStack
|
|
spacing={1}
|
|
align="center"
|
|
cursor="pointer"
|
|
p={2}
|
|
borderRadius="md"
|
|
_hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
|
|
position="relative"
|
|
>
|
|
<Box position="relative">
|
|
<Icon as={BarChart2} boxSize={5} color="rgba(59, 130, 246, 0.9)" />
|
|
{watchlist.length > 0 && (
|
|
<Badge
|
|
position="absolute"
|
|
top="-4px"
|
|
right="-8px"
|
|
colorScheme="red"
|
|
fontSize="9px"
|
|
minW="16px"
|
|
h="16px"
|
|
borderRadius="full"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
{watchlist.length > 99 ? '99+' : watchlist.length}
|
|
</Badge>
|
|
)}
|
|
</Box>
|
|
<Text fontSize="xs" color="rgba(255, 255, 255, 0.85)" fontWeight="medium" whiteSpace="nowrap">
|
|
关注股票
|
|
</Text>
|
|
</VStack>
|
|
</PopoverTrigger>
|
|
<Portal>
|
|
<PopoverContent
|
|
w="300px"
|
|
bg="rgba(26, 32, 44, 0.95)"
|
|
borderColor="rgba(255, 255, 255, 0.1)"
|
|
boxShadow="0 8px 32px rgba(0, 0, 0, 0.4)"
|
|
_focus={{ outline: 'none' }}
|
|
>
|
|
<PopoverHeader
|
|
borderBottomColor="rgba(255, 255, 255, 0.1)"
|
|
py={2}
|
|
px={3}
|
|
>
|
|
<HStack spacing={2}>
|
|
<Icon as={BarChart2} boxSize={4} color="rgba(59, 130, 246, 0.9)" />
|
|
<Text fontSize="sm" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
|
|
关注股票 ({watchlist.length})
|
|
</Text>
|
|
</HStack>
|
|
</PopoverHeader>
|
|
<PopoverCloseButton color="rgba(255, 255, 255, 0.5)" />
|
|
<PopoverBody p={2}>
|
|
<WatchlistPanel
|
|
watchlist={watchlist}
|
|
realtimeQuotes={realtimeQuotes}
|
|
onStockClick={onStockClick}
|
|
onAddStock={onAddStock}
|
|
onUnwatch={onUnwatch}
|
|
hideTitle={true}
|
|
/>
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</Portal>
|
|
</Popover>
|
|
|
|
{/* 事件动态 - 悬浮弹窗 */}
|
|
<Popover placement="left-start" trigger="click" isLazy>
|
|
<PopoverTrigger>
|
|
<VStack
|
|
spacing={1}
|
|
align="center"
|
|
cursor="pointer"
|
|
p={2}
|
|
borderRadius="md"
|
|
_hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
|
|
position="relative"
|
|
>
|
|
<Box position="relative">
|
|
<Icon as={Star} boxSize={5} color="rgba(234, 179, 8, 0.9)" />
|
|
{followingEvents.length > 0 && (
|
|
<Badge
|
|
position="absolute"
|
|
top="-4px"
|
|
right="-8px"
|
|
colorScheme="yellow"
|
|
fontSize="9px"
|
|
minW="16px"
|
|
h="16px"
|
|
borderRadius="full"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
{followingEvents.length > 99 ? '99+' : followingEvents.length}
|
|
</Badge>
|
|
)}
|
|
</Box>
|
|
<Text fontSize="xs" color="rgba(255, 255, 255, 0.85)" fontWeight="medium" whiteSpace="nowrap">
|
|
关注事件
|
|
</Text>
|
|
</VStack>
|
|
</PopoverTrigger>
|
|
<Portal>
|
|
<PopoverContent
|
|
w="300px"
|
|
bg="rgba(26, 32, 44, 0.95)"
|
|
borderColor="rgba(255, 255, 255, 0.1)"
|
|
boxShadow="0 8px 32px rgba(0, 0, 0, 0.4)"
|
|
_focus={{ outline: 'none' }}
|
|
>
|
|
<PopoverHeader
|
|
borderBottomColor="rgba(255, 255, 255, 0.1)"
|
|
py={2}
|
|
px={3}
|
|
>
|
|
<HStack spacing={2}>
|
|
<Icon as={Star} boxSize={4} color="rgba(234, 179, 8, 0.9)" />
|
|
<Text fontSize="sm" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
|
|
事件动态
|
|
</Text>
|
|
</HStack>
|
|
</PopoverHeader>
|
|
<PopoverCloseButton color="rgba(255, 255, 255, 0.5)" />
|
|
<PopoverBody p={2}>
|
|
<FollowingEventsPanel
|
|
events={followingEvents}
|
|
eventComments={eventComments}
|
|
onEventClick={onEventClick}
|
|
onCommentClick={onCommentClick}
|
|
onAddEvent={onAddEvent}
|
|
onUnfollow={onUnfollow}
|
|
hideTitle={true}
|
|
/>
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</Portal>
|
|
</Popover>
|
|
|
|
{/* 热门板块 - 悬浮弹窗 */}
|
|
<Popover placement="left-start" trigger="click" isLazy>
|
|
<PopoverTrigger>
|
|
<VStack
|
|
spacing={1}
|
|
align="center"
|
|
cursor="pointer"
|
|
p={2}
|
|
borderRadius="md"
|
|
_hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
|
|
position="relative"
|
|
>
|
|
<Icon as={TrendingUp} boxSize={5} color="rgba(34, 197, 94, 0.9)" />
|
|
<Text fontSize="xs" color="rgba(255, 255, 255, 0.85)" fontWeight="medium" whiteSpace="nowrap">
|
|
热门板块
|
|
</Text>
|
|
</VStack>
|
|
</PopoverTrigger>
|
|
<Portal>
|
|
<PopoverContent
|
|
w="280px"
|
|
bg="rgba(26, 32, 44, 0.95)"
|
|
borderColor="rgba(255, 255, 255, 0.1)"
|
|
boxShadow="0 8px 32px rgba(0, 0, 0, 0.4)"
|
|
_focus={{ outline: 'none' }}
|
|
>
|
|
<PopoverCloseButton color="rgba(255, 255, 255, 0.5)" />
|
|
<PopoverBody p={2}>
|
|
<HotSectorsRanking title="热门板块" />
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</Portal>
|
|
</Popover>
|
|
</VStack>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* GlobalSidebar 主组件
|
|
*/
|
|
const GlobalSidebar = () => {
|
|
const { user } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
const {
|
|
isOpen,
|
|
toggle,
|
|
watchlist,
|
|
realtimeQuotes,
|
|
followingEvents,
|
|
eventComments,
|
|
loading,
|
|
unwatchStock,
|
|
unfollowEvent,
|
|
} = useGlobalSidebar();
|
|
|
|
// 未登录时不显示
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
w={isOpen ? '300px' : '72px'}
|
|
h="100%"
|
|
pt={LAYOUT_SIZE.navbarHeight}
|
|
flexShrink={0}
|
|
transition="width 0.2s ease-in-out"
|
|
display={{ base: 'none', md: 'block' }}
|
|
bg="rgba(26, 32, 44, 0.98)"
|
|
borderLeft="1px solid rgba(255, 255, 255, 0.08)"
|
|
position="relative"
|
|
zIndex={Z_INDEX.SIDEBAR}
|
|
>
|
|
{/* 加载状态 */}
|
|
{loading && (
|
|
<Center position="absolute" top={4} left={0} right={0} zIndex={1}>
|
|
<Spinner size="sm" color="rgba(212, 175, 55, 0.6)" />
|
|
</Center>
|
|
)}
|
|
|
|
{isOpen ? (
|
|
/* 展开状态 */
|
|
<Box h="100%" display="flex" flexDirection="column">
|
|
{/* 标题栏 - 收起按钮 + 标题 */}
|
|
<HStack
|
|
px={3}
|
|
py={3}
|
|
bg="rgba(26, 32, 44, 1)"
|
|
borderBottom="1px solid rgba(255, 255, 255, 0.1)"
|
|
flexShrink={0}
|
|
>
|
|
<IconButton
|
|
icon={<Icon as={ChevronRight} />}
|
|
size="xs"
|
|
variant="ghost"
|
|
color="rgba(255, 255, 255, 0.5)"
|
|
_hover={{ color: 'rgba(212, 175, 55, 0.9)', bg: 'rgba(255, 255, 255, 0.05)' }}
|
|
onClick={toggle}
|
|
aria-label="收起工具栏"
|
|
/>
|
|
<Text fontSize="sm" fontWeight="medium" color="rgba(255, 255, 255, 0.7)">
|
|
工具栏
|
|
</Text>
|
|
</HStack>
|
|
|
|
{/* WatchSidebar 内容 */}
|
|
<Box flex="1" overflowY="auto" pt={2} px={2}>
|
|
<WatchSidebar
|
|
watchlist={watchlist}
|
|
realtimeQuotes={realtimeQuotes}
|
|
followingEvents={followingEvents}
|
|
eventComments={eventComments}
|
|
onStockClick={(stock) => navigate(`/company/${stock.stock_code}`)}
|
|
onEventClick={(event) => navigate(getEventDetailUrl(event.id))}
|
|
onCommentClick={(comment) => navigate(getEventDetailUrl(comment.event_id))}
|
|
onAddStock={() => navigate('/stocks')}
|
|
onAddEvent={() => navigate('/community')}
|
|
onUnwatch={unwatchStock}
|
|
onUnfollow={unfollowEvent}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
) : (
|
|
/* 收起状态 - 点击图标显示悬浮弹窗 */
|
|
<CollapsedMenu
|
|
watchlist={watchlist}
|
|
realtimeQuotes={realtimeQuotes}
|
|
followingEvents={followingEvents}
|
|
eventComments={eventComments}
|
|
onToggle={toggle}
|
|
onStockClick={(stock) => navigate(`/company/${stock.stock_code}`)}
|
|
onEventClick={(event) => navigate(getEventDetailUrl(event.id))}
|
|
onCommentClick={(comment) => navigate(getEventDetailUrl(comment.event_id))}
|
|
onAddStock={() => navigate('/stocks')}
|
|
onAddEvent={() => navigate('/community')}
|
|
onUnwatch={unwatchStock}
|
|
onUnfollow={unfollowEvent}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default GlobalSidebar;
|