feat(components): 新增 GlobalSidebar 全局右侧工具栏
- 可收起/展开的侧边栏设计 - 收起状态显示图标菜单（股票数量、事件数量 Badge） - 展开状态复用 WatchSidebar 组件 - 支持未登录状态提示 - 毛玻璃背景 + 金色主题装饰 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
197
src/components/GlobalSidebar/index.js
Normal file
197
src/components/GlobalSidebar/index.js
Normal file
@@ -0,0 +1,197 @@
|
||||
/**
|
||||
* GlobalSidebar - 全局右侧工具栏
|
||||
*
|
||||
* 可收起/展开的侧边栏，包含关注股票和事件动态
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
Icon,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Badge,
|
||||
Spinner,
|
||||
Center,
|
||||
} from '@chakra-ui/react';
|
||||
import { ChevronLeft, ChevronRight, BarChart2, Star } 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 WatchSidebar from '@views/Profile/components/WatchSidebar';
|
||||
|
||||
/**
|
||||
* 收起状态下的图标菜单
|
||||
*/
|
||||
const CollapsedMenu = ({ watchlist, followingEvents, onToggle }) => {
|
||||
return (
|
||||
<VStack spacing={4} py={4} align="center">
|
||||
{/* 展开按钮 */}
|
||||
<Tooltip label="展开工具栏" placement="left">
|
||||
<IconButton
|
||||
icon={<Icon as={ChevronLeft} />}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="rgba(255, 255, 255, 0.6)"
|
||||
_hover={{ color: 'rgba(212, 175, 55, 0.9)', bg: 'rgba(255, 255, 255, 0.05)' }}
|
||||
onClick={onToggle}
|
||||
aria-label="展开工具栏"
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
{/* 关注股票图标 */}
|
||||
<Tooltip label={`关注股票 (${watchlist.length})`} placement="left">
|
||||
<Box
|
||||
position="relative"
|
||||
cursor="pointer"
|
||||
p={2}
|
||||
borderRadius="md"
|
||||
_hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
|
||||
onClick={onToggle}
|
||||
>
|
||||
<Icon as={BarChart2} boxSize={5} color="rgba(59, 130, 246, 0.9)" />
|
||||
{watchlist.length > 0 && (
|
||||
<Badge
|
||||
position="absolute"
|
||||
top="-2px"
|
||||
right="-2px"
|
||||
colorScheme="red"
|
||||
fontSize="9px"
|
||||
minW="16px"
|
||||
h="16px"
|
||||
borderRadius="full"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
{watchlist.length > 99 ? '99+' : watchlist.length}
|
||||
</Badge>
|
||||
)}
|
||||
</Box>
|
||||
</Tooltip>
|
||||
|
||||
{/* 事件动态图标 */}
|
||||
<Tooltip label={`事件动态 (${followingEvents.length})`} placement="left">
|
||||
<Box
|
||||
position="relative"
|
||||
cursor="pointer"
|
||||
p={2}
|
||||
borderRadius="md"
|
||||
_hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
|
||||
onClick={onToggle}
|
||||
>
|
||||
<Icon as={Star} boxSize={5} color="rgba(234, 179, 8, 0.9)" />
|
||||
{followingEvents.length > 0 && (
|
||||
<Badge
|
||||
position="absolute"
|
||||
top="-2px"
|
||||
right="-2px"
|
||||
colorScheme="yellow"
|
||||
fontSize="9px"
|
||||
minW="16px"
|
||||
h="16px"
|
||||
borderRadius="full"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
{followingEvents.length > 99 ? '99+' : followingEvents.length}
|
||||
</Badge>
|
||||
)}
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</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' : '48px'}
|
||||
flexShrink={0}
|
||||
transition="width 0.2s ease-in-out"
|
||||
display={{ base: 'none', md: 'block' }}
|
||||
bg="rgba(26, 32, 44, 0.6)"
|
||||
borderLeft="1px solid rgba(255, 255, 255, 0.05)"
|
||||
position="relative"
|
||||
>
|
||||
{/* 加载状态 */}
|
||||
{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%" overflowY="auto" position="relative">
|
||||
{/* 收起按钮 */}
|
||||
<Box position="absolute" top={2} left={2} zIndex={2}>
|
||||
<Tooltip label="收起工具栏" placement="right">
|
||||
<IconButton
|
||||
icon={<Icon as={ChevronRight} />}
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
color="rgba(255, 255, 255, 0.4)"
|
||||
_hover={{ color: 'rgba(212, 175, 55, 0.9)', bg: 'rgba(255, 255, 255, 0.05)' }}
|
||||
onClick={toggle}
|
||||
aria-label="收起工具栏"
|
||||
/>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
|
||||
{/* WatchSidebar 内容 */}
|
||||
<Box 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}
|
||||
followingEvents={followingEvents}
|
||||
onToggle={toggle}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default GlobalSidebar;
|
||||
Reference in New Issue
Block a user