From 92e6fb254b1dd1eb2523516035e5c02310ea0a8e Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 23 Dec 2025 14:15:20 +0800
Subject: [PATCH] =?UTF-8?q?feat(GlobalSidebar):=20=E6=94=B6=E8=B5=B7?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=B7=BB=E5=8A=A0=20Popover=20=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 收起状态点击图标显示悬浮弹窗，无需展开侧边栏
- 添加关注股票、关注事件、热门板块三个 Popover 面板
- 展开状态添加独立标题栏 [>] 工具栏
- 移除收起按钮的 Tooltip 提示

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/GlobalSidebar/index.js | 331 +++++++++++++++++++-------
 1 file changed, 240 insertions(+), 91 deletions(-)

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 (
     <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>
+      <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.6)" />
+        <Text fontSize="10px" color="rgba(255, 255, 255, 0.5)">
+          展开
+        </Text>
+      </HStack>
 
-      {/* 关注股票图标 */}
-      <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"
+      {/* 关注股票 - 悬浮弹窗 */}
+      <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="10px" color="rgba(255, 255, 255, 0.6)" 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}
             >
-              {watchlist.length > 99 ? '99+' : watchlist.length}
-            </Badge>
-          )}
-        </Box>
-      </Tooltip>
+              <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}
+              />
+            </PopoverBody>
+          </PopoverContent>
+        </Portal>
+      </Popover>
 
-      {/* 事件动态图标 */}
-      <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"
+      {/* 事件动态 - 悬浮弹窗 */}
+      <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="10px" color="rgba(255, 255, 255, 0.6)" 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}
             >
-              {followingEvents.length > 99 ? '99+' : followingEvents.length}
-            </Badge>
-          )}
-        </Box>
-      </Tooltip>
+              <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}
+              />
+            </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="10px" color="rgba(255, 255, 255, 0.6)" 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>
   );
 };
@@ -132,7 +266,7 @@ const GlobalSidebar = () => {
 
   return (
     <Box
-      w={isOpen ? '300px' : '48px'}
+      w={isOpen ? '300px' : '72px'}
       flexShrink={0}
       transition="width 0.2s ease-in-out"
       display={{ base: 'none', md: 'block' }}
@@ -149,24 +283,30 @@ const GlobalSidebar = () => {
 
       {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>
+        <Box h="100%" display="flex" flexDirection="column">
+          {/* 标题栏 - 收起按钮 + 标题 */}
+          <HStack
+            px={3}
+            py={2}
+            borderBottom="1px solid rgba(255, 255, 255, 0.05)"
+            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 pt={2} px={2}>
+          <Box flex="1" overflowY="auto" pt={2} px={2}>
             <WatchSidebar
               watchlist={watchlist}
               realtimeQuotes={realtimeQuotes}
@@ -183,11 +323,20 @@ const GlobalSidebar = () => {
           </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>