feat: 个股添加个股列表弹窗

src/views/StockOverview/index.js

@@ -56,6 +56,7 @@ import {
 } from '@chakra-ui/react';
 import { SearchIcon, CloseIcon, ArrowForwardIcon, TrendingUpIcon, InfoIcon, ChevronRightIcon, MoonIcon, SunIcon, CalendarIcon } from '@chakra-ui/icons';
 import { FaChartLine, FaFire, FaRocket, FaBrain, FaCalendarAlt, FaChevronRight, FaArrowUp, FaArrowDown, FaChartBar } from 'react-icons/fa';
+import ConceptStocksModal from './components/ConceptStocksModal';
 import { BsGraphUp, BsLightningFill } from 'react-icons/bs';
 import * as echarts from 'echarts';
 import { logger } from '../../utils/logger';
@@ -102,6 +103,10 @@ const StockOverview = () => {
   const [availableDates, setAvailableDates] = useState([]);
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
 
+  // 个股列表弹窗状态
+  const [isStockModalOpen, setIsStockModalOpen] = useState(false);
+  const [selectedConcept, setSelectedConcept] = useState(null);
+
   // 专业的颜色主题
   const bgColor = useColorModeValue('white', '#0a0a0a');
   const cardBg = useColorModeValue('white', '#1a1a1a');
@@ -114,6 +119,13 @@ const StockOverview = () => {
   const accentColor = useColorModeValue('purple.600', goldColor);
   const heroBg = useColorModeValue('linear(to-br, purple.600, pink.500)', 'linear(to-br, #0a0a0a, #1a1a1a)');
 
+  // 打开个股列表弹窗
+  const handleViewStocks = useCallback((e, concept) => {
+    e.stopPropagation();
+    setSelectedConcept(concept);
+    setIsStockModalOpen(true);
+  }, []);
+
   // 防抖搜索
   const debounceSearch = useCallback(
     (() => {
@@ -996,37 +1008,39 @@ const StockOverview = () => {
 
                         <Divider />
 
-                        <Box w="100%">
-                            <Text fontSize="xs" color="gray.500" mb={2}>
-                              包含 {concept.stock_count} 只个股
-                            </Text>
+                        <Box
+                          w="100%"
+                          cursor="pointer"
+                          onClick={(e) => handleViewStocks(e, concept)}
+                          _hover={{ bg: hoverBg }}
+                          p={2}
+                          borderRadius="md"
+                          transition="background 0.2s"
+                        >
+                          <Text fontSize="xs" color="gray.500" mb={2}>
+                            包含 {concept.stock_count} 只个股
+                          </Text>
 
-                            {concept.stocks && concept.stocks.length > 0 && (
-                              <Flex flexWrap="wrap" gap={2}>
-                                {concept.stocks.map((stock, idx) => (
-                                  <Tag
-                                    key={idx}
-                                    size="sm"
-                                    colorScheme="purple"
-                                    variant="subtle"
-                                    cursor="pointer"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-
-                                      // 🎯 追踪概念下的股票标签点击
-                                      trackConceptStockClicked({
-                                        code: stock.stock_code,
-                                        name: stock.stock_name
-                                      }, concept.concept_name);
-
-                                      navigate(`/company?scode=${stock.stock_code}`);
-                                    }}
-                                  >
-                                    <TagLabel>{stock.stock_name}</TagLabel>
-                                  </Tag>
-                                ))}
-                              </Flex>
-                            )}
+                          {concept.stocks && concept.stocks.length > 0 && (
+                            <Flex
+                              flexWrap="nowrap"
+                              gap={2}
+                              overflow="hidden"
+                              maxH="24px"
+                            >
+                              {concept.stocks.map((stock, idx) => (
+                                <Tag
+                                  key={idx}
+                                  size="sm"
+                                  colorScheme="purple"
+                                  variant="subtle"
+                                  flexShrink={0}
+                                >
+                                  <TagLabel>{stock.stock_name}</TagLabel>
+                                </Tag>
+                              ))}
+                            </Flex>
+                          )}
                         </Box>
 
                         <HStack spacing={2} w="100%">
@@ -1120,7 +1134,14 @@ const StockOverview = () => {
           </Card>
         </Box>
         </Container>
-        
+
+        {/* 个股列表弹窗 */}
+        <ConceptStocksModal
+          isOpen={isStockModalOpen}
+          onClose={() => setIsStockModalOpen(false)}
+          concept={selectedConcept}
+        />
+
       </Box>
     );
   };