From 7d859e18ca454e0316ed186642e3fd97847eee68 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 23 Dec 2025 14:57:12 +0800
Subject: [PATCH] =?UTF-8?q?style(HotSectorsRanking):=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E4=B8=8E=E5=85=B3=E6=B3=A8=E8=82=A1=E7=A5=A8=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=20UI=20=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除外层装饰盒子（背景、边框、毛玻璃效果）
- 标题行添加 TrendingUp 图标 + 数量显示
- 列表项添加 hover 效果和 cursor: pointer
- 滚动条样式与 WatchlistPanel 一致
- 涨跌幅统一为 2 位小数
- 新增 onSectorClick 回调支持板块点击

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/atoms/HotSectorsRanking.js     | 147 +++++++++++-------
 1 file changed, 92 insertions(+), 55 deletions(-)

diff --git a/src/views/Profile/components/MarketDashboard/components/atoms/HotSectorsRanking.js b/src/views/Profile/components/MarketDashboard/components/atoms/HotSectorsRanking.js
index d15c44db..2b78f7b0 100644
--- a/src/views/Profile/components/MarketDashboard/components/atoms/HotSectorsRanking.js
+++ b/src/views/Profile/components/MarketDashboard/components/atoms/HotSectorsRanking.js
@@ -1,76 +1,113 @@
-// 热门板块排行组件
+// 热门板块排行组件 - 紧凑版（与 WatchlistPanel 风格保持一致）
 import React from 'react';
-import { Box, Text, VStack, HStack } from '@chakra-ui/react';
+import { Box, Text, VStack, HStack, Icon } from '@chakra-ui/react';
+import { TrendingUp } from 'lucide-react';
 import MiniTrendLine from './MiniTrendLine';
 
-const HotSectorsRanking = ({ sectors = [], title = '热门板块排行' }) => {
+const HotSectorsRanking = ({ sectors = [], title = '热门板块', onSectorClick }) => {
   // 默认数据
   const defaultSectors = [
     { rank: 1, name: '人工智能', change: 3.2, trend: [100, 102, 101, 104, 103, 106] },
     { rank: 2, name: '新能源车', change: 1.8, trend: [100, 99, 101, 102, 101, 103] },
     { rank: 3, name: '生物医药', change: 1.3, trend: [100, 101, 100, 102, 101, 102] },
     { rank: 4, name: '消费科技', change: 1.2, trend: [100, 100, 101, 100, 102, 102] },
-    { rank: 5, name: '其他', change: 0.4, trend: [100, 100, 100, 101, 100, 101] },
+    { rank: 5, name: '芯片半导体', change: 0.4, trend: [100, 100, 100, 101, 100, 101] },
   ];
 
   const data = sectors.length > 0 ? sectors : defaultSectors;
 
   return (
-    <Box
-      bg="rgba(26, 26, 46, 0.7)"
-      borderRadius="lg"
-      p={3}
-      minW="180px"
-      border="1px solid"
-      borderColor="rgba(212, 175, 55, 0.15)"
-      backdropFilter="blur(8px)"
-    >
-      <VStack align="stretch" spacing={2}>
-        <Text fontSize="xs" color="rgba(255, 255, 255, 0.6)" fontWeight="medium">
-          {title}
-        </Text>
+    <Box>
+      {/* 标题 - 与 WatchlistPanel 风格一致 */}
+      <HStack justify="space-between" mb={2}>
+        <HStack spacing={1}>
+          <Icon as={TrendingUp} boxSize={3.5} color="rgba(34, 197, 94, 0.9)" />
+          <Text fontSize="xs" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
+            {title}
+          </Text>
+          <Text fontSize="xs" color="rgba(255, 255, 255, 0.5)">
+            ({data.length})
+          </Text>
+        </HStack>
+      </HStack>
 
-        {/* 排行列表 */}
-        <VStack spacing={1.5} align="stretch">
-          {data.map((sector, index) => (
-            <HStack key={index} justify="space-between" fontSize="xs">
-              {/* 排名 */}
-              <HStack spacing={2} flex={1}>
-                <Text
-                  color={index < 3 ? 'rgba(212, 175, 55, 0.9)' : 'rgba(255, 255, 255, 0.5)'}
-                  fontWeight={index < 3 ? 'bold' : 'normal'}
-                  w="16px"
-                >
-                  {sector.rank}
-                </Text>
-                <Text color="rgba(255, 255, 255, 0.85)" noOfLines={1}>
-                  {sector.name}
-                </Text>
-              </HStack>
+      {/* 板块列表 - 固定高度可滚动 */}
+      <Box
+        maxH="200px"
+        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">
+          {data.map((sector, index) => {
+            const isUp = sector.change >= 0;
+            const changeColor = isUp ? '#EF4444' : '#22C55E';
 
-              {/* 趋势线 */}
-              <Box w="40px">
-                <MiniTrendLine
-                  data={sector.trend}
-                  color={sector.change >= 0 ? 'red' : 'green'}
-                  width={40}
-                  height={14}
-                />
-              </Box>
-
-              {/* 涨跌幅 */}
-              <Text
-                color={sector.change >= 0 ? '#EF4444' : '#22C55E'}
-                fontWeight="medium"
-                w="50px"
-                textAlign="right"
+            return (
+              <HStack
+                key={index}
+                py={1.5}
+                px={2}
+                justify="space-between"
+                cursor="pointer"
+                borderRadius="md"
+                _hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
+                onClick={() => onSectorClick?.(sector)}
               >
-                {sector.change >= 0 ? '+' : ''}{sector.change.toFixed(1)}%
-              </Text>
-            </HStack>
-          ))}
+                {/* 排名 + 名称 */}
+                <HStack spacing={2} flex={1} minW={0}>
+                  <Text
+                    fontSize="xs"
+                    color={index < 3 ? 'rgba(212, 175, 55, 0.9)' : 'rgba(255, 255, 255, 0.4)'}
+                    fontWeight={index < 3 ? 'bold' : 'normal'}
+                    w="14px"
+                    flexShrink={0}
+                  >
+                    {sector.rank || index + 1}
+                  </Text>
+                  <Text
+                    fontSize="xs"
+                    fontWeight="medium"
+                    color="rgba(255, 255, 255, 0.9)"
+                    noOfLines={1}
+                  >
+                    {sector.name}
+                  </Text>
+                </HStack>
+
+                {/* 趋势线 + 涨跌幅 */}
+                <HStack spacing={2}>
+                  <Box w="36px" flexShrink={0}>
+                    <MiniTrendLine
+                      data={sector.trend}
+                      color={isUp ? 'red' : 'green'}
+                      width={36}
+                      height={12}
+                    />
+                  </Box>
+                  <Text
+                    fontSize="xs"
+                    fontWeight="bold"
+                    color={changeColor}
+                    w="48px"
+                    textAlign="right"
+                    flexShrink={0}
+                  >
+                    {isUp ? '+' : ''}{sector.change.toFixed(2)}%
+                  </Text>
+                </HStack>
+              </HStack>
+            );
+          })}
         </VStack>
-      </VStack>
+      </Box>
     </Box>
   );
 };