refactor(WatchSidebar): 优化三个子组件

- FollowingEventsPanel: 添加滚动区域容器，移除数量限制
- MyCommentsTab: 添加滚动区域，移除 maxDisplay 限制
- WatchlistPanel: 优化滚动区域样式和布局

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/views/Profile/components/WatchSidebar/components/FollowingEventsPanel.js

@@ -112,8 +112,21 @@ const EventsTabContent = ({ events, onEventClick, onAddEvent }) => {
   }
 
   return (
+    <Box
+      maxH="280px"
+      overflowY="auto"
+      css={{
+        '&::-webkit-scrollbar': { width: '0px' },
+        '&:hover::-webkit-scrollbar': { width: '4px' },
+        '&::-webkit-scrollbar-track': { background: 'transparent' },
+        '&::-webkit-scrollbar-thumb': {
+          background: 'rgba(255, 255, 255, 0.2)',
+          borderRadius: '2px',
+        },
+      }}
+    >
       <VStack spacing={1.5} align="stretch">
-      {events.slice(0, 6).map((event) => {
+        {events.map((event) => {
           const avgChg = event.related_avg_chg;
           const isUp = avgChg > 0;
           const changeColor = isUp ? '#EF4444' : avgChg < 0 ? '#22C55E' : 'rgba(255, 255, 255, 0.6)';
@@ -153,20 +166,8 @@ const EventsTabContent = ({ events, onEventClick, onAddEvent }) => {
             </Box>
           );
         })}
-      {events.length > 6 && (
-        <Text
-          fontSize="xs"
-          color="rgba(212, 175, 55, 0.7)"
-          textAlign="center"
-          cursor="pointer"
-          py={1}
-          _hover={{ color: 'rgba(212, 175, 55, 0.9)' }}
-          onClick={onAddEvent}
-        >
-          查看全部 ({events.length})
-        </Text>
-      )}
       </VStack>
+    </Box>
   );
 };
 

src/views/Profile/components/WatchSidebar/components/MyCommentsTab.js

@@ -33,10 +33,7 @@ const truncateText = (text, maxLength = 50) => {
 const MyCommentsTab = ({
   comments = [],
   onCommentClick,
-  maxDisplay = 5,
 }) => {
-  const displayComments = comments.slice(0, maxDisplay);
-
   if (comments.length === 0) {
     return (
       <Box py={4} textAlign="center">
@@ -49,8 +46,21 @@ const MyCommentsTab = ({
   }
 
   return (
+    <Box
+      maxH="280px"
+      overflowY="auto"
+      css={{
+        '&::-webkit-scrollbar': { width: '0px' },
+        '&:hover::-webkit-scrollbar': { width: '4px' },
+        '&::-webkit-scrollbar-track': { background: 'transparent' },
+        '&::-webkit-scrollbar-thumb': {
+          background: 'rgba(255, 255, 255, 0.2)',
+          borderRadius: '2px',
+        },
+      }}
+    >
       <VStack spacing={1.5} align="stretch">
-      {displayComments.map((comment) => (
+        {comments.map((comment) => (
           <Box
             key={comment.id}
             py={2}
@@ -100,21 +110,8 @@ const MyCommentsTab = ({
             </HStack>
           </Box>
         ))}
-
-      {/* 查看更多 */}
-      {comments.length > maxDisplay && (
-        <Text
-          fontSize="xs"
-          color="rgba(212, 175, 55, 0.7)"
-          textAlign="center"
-          cursor="pointer"
-          py={1}
-          _hover={{ color: 'rgba(212, 175, 55, 0.9)' }}
-        >
-          查看全部 ({comments.length})
-        </Text>
-      )}
       </VStack>
+    </Box>
   );
 };
 

src/views/Profile/components/WatchSidebar/components/WatchlistPanel.js

@@ -32,8 +32,7 @@ const WatchlistPanel = ({
         />
       </HStack>
 
-      {/* 股票列表 */}
-      <VStack spacing={1} align="stretch">
+      {/* 股票列表 - 固定高度可滚动 */}
       {watchlist.length === 0 ? (
         <Box
           py={4}
@@ -49,7 +48,21 @@ const WatchlistPanel = ({
           </Text>
         </Box>
       ) : (
-          watchlist.slice(0, 8).map((stock) => {
+        <Box
+          maxH="240px"
+          overflowY="auto"
+          css={{
+            '&::-webkit-scrollbar': { width: '0px' },
+            '&:hover::-webkit-scrollbar': { width: '4px' },
+            '&::-webkit-scrollbar-track': { background: 'transparent' },
+            '&::-webkit-scrollbar-thumb': {
+              background: 'rgba(255, 255, 255, 0.2)',
+              borderRadius: '2px',
+            },
+          }}
+        >
+          <VStack spacing={1} align="stretch">
+            {watchlist.map((stock) => {
               const quote = realtimeQuotes[stock.stock_code];
               const changePercent = quote?.change_percent ?? stock.change_percent;
               const isUp = changePercent > 0;
@@ -91,23 +104,11 @@ const WatchlistPanel = ({
                   </VStack>
                 </HStack>
               );
-          })
-        )}
-        {watchlist.length > 8 && (
-          <Text
-            fontSize="xs"
-            color="rgba(212, 175, 55, 0.7)"
-            textAlign="center"
-            cursor="pointer"
-            py={1}
-            _hover={{ color: 'rgba(212, 175, 55, 0.9)' }}
-            onClick={onAddStock}
-          >
-            查看全部 ({watchlist.length})
-          </Text>
-        )}
+            })}
           </VStack>
         </Box>
+      )}
+    </Box>
   );
 };