diff --git a/src/components/GlobalSidebar/index.js b/src/components/GlobalSidebar/index.js
index 6ea5e5bc..f0d09610 100644
--- a/src/components/GlobalSidebar/index.js
+++ b/src/components/GlobalSidebar/index.js
@@ -2,6 +2,7 @@
* GlobalSidebar - 全局右侧工具栏
*
* 可收起/展开的侧边栏，包含关注股票和事件动态
+ * 收起时点击图标显示悬浮弹窗
*/
import React from 'react';
@@ -10,98 +11,231 @@ import {
VStack,
Icon,
IconButton,
- Tooltip,
Badge,
Spinner,
Center,
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
+ PopoverBody,
+ PopoverHeader,
+ PopoverCloseButton,
+ Text,
+ HStack,
+ Portal,
} from '@chakra-ui/react';
-import { ChevronLeft, ChevronRight, BarChart2, Star } from 'lucide-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 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, followingEvents, onToggle }) => {
+const CollapsedMenu = ({
+ watchlist,
+ realtimeQuotes,
+ followingEvents,
+ eventComments,
+ onToggle,
+ onStockClick,
+ onEventClick,
+ onCommentClick,
+ onAddStock,
+ onAddEvent,
+ onUnwatch,
+ onUnfollow,
+}) => {
return (
{/* 展开按钮 */}
-
- }
- 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="展开工具栏"
- />
-
+
+
+
+ 展开
+
+
- {/* 关注股票图标 */}
-
-
-
- {watchlist.length > 0 && (
-
+
+
+
+
+ {watchlist.length > 0 && (
+
+ {watchlist.length > 99 ? '99+' : watchlist.length}
+
+ )}
+
+
+ 关注股票
+
+
+
+
+
+
- {watchlist.length > 99 ? '99+' : watchlist.length}
-
- )}
-
-
+
+
+
+ 关注股票 ({watchlist.length})
+
+
+
+
+
+
+
+
+
+
- {/* 事件动态图标 */}
-
-
-
- {followingEvents.length > 0 && (
-
+
+
+
+
+ {followingEvents.length > 0 && (
+
+ {followingEvents.length > 99 ? '99+' : followingEvents.length}
+
+ )}
+
+
+ 关注事件
+
+
+
+
+
+
- {followingEvents.length > 99 ? '99+' : followingEvents.length}
-
- )}
-
-
+
+
+
+ 事件动态
+
+
+
+
+
+
+
+
+
+
+
+ {/* 热门板块 - 悬浮弹窗 */}
+
+
+
+
+
+ 热门板块
+
+
+
+
+
+
+
+
+
+
+
+
);
};
@@ -132,7 +266,7 @@ const GlobalSidebar = () => {
return (
{
{isOpen ? (
/* 展开状态 */
-
- {/* 收起按钮 */}
-
-
- }
- 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="收起工具栏"
- />
-
-
+
+ {/* 标题栏 - 收起按钮 + 标题 */}
+
+ }
+ 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="收起工具栏"
+ />
+
+ 工具栏
+
+
{/* WatchSidebar 内容 */}
-
+
{
) : (
- /* 收起状态 */
+ /* 收起状态 - 点击图标显示悬浮弹窗 */
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}
/>
)}