update pay ui

src/views/StockOverview/index.js

@@ -50,7 +50,7 @@ import {
   SkeletonText,
 } from '@chakra-ui/react';
 import { SearchIcon, CloseIcon, ArrowForwardIcon, TrendingUpIcon, InfoIcon, ChevronRightIcon, CalendarIcon } from '@chakra-ui/icons';
-import { FaChartLine, FaFire, FaRocket, FaBrain, FaCalendarAlt, FaChevronRight, FaArrowUp, FaArrowDown, FaChartBar } from 'react-icons/fa';
+import { FaChartLine, FaFire, FaRocket, FaBrain, FaCalendarAlt, FaChevronRight, FaArrowUp, FaArrowDown, FaChartBar, FaTag, FaLayerGroup, FaBolt } from 'react-icons/fa';
 import ConceptStocksModal from '@components/ConceptStocksModal';
 import TradeDatePicker from '@components/TradeDatePicker';
 import { BsGraphUp, BsLightningFill } from 'react-icons/bs';
@@ -927,16 +927,65 @@ const StockOverview = () => {
 
                     <CardBody pt={12}>
                       <VStack align="start" spacing={3}>
+                        {/* 概念名称 */}
                         <Heading size="md" noOfLines={1} color={textColor}>
                           {concept.concept_name}
                         </Heading>
 
+                        {/* 层级信息 */}
+                        {concept.hierarchy && (
+                          <HStack spacing={1} flexWrap="wrap">
+                            <Icon as={FaLayerGroup} boxSize={3} color="gray.400" />
+                            <Text fontSize="xs" color="gray.500">
+                              {[concept.hierarchy.lv1, concept.hierarchy.lv2, concept.hierarchy.lv3]
+                                .filter(Boolean)
+                                .join(' > ')}
+                            </Text>
+                          </HStack>
+                        )}
+
+                        {/* 描述 */}
                         <Text fontSize="sm" color={subTextColor} noOfLines={2}>
                           {concept.description || '暂无描述'}
                         </Text>
 
+                        {/* 标签 */}
+                        {concept.tags && concept.tags.length > 0 && (
+                          <Flex flexWrap="wrap" gap={1}>
+                            {concept.tags.slice(0, 4).map((tag, idx) => (
+                              <Tag
+                                key={idx}
+                                size="sm"
+                                variant="outline"
+                                colorScheme="blue"
+                                borderRadius="full"
+                              >
+                                <Icon as={FaTag} boxSize={2} mr={1} />
+                                <TagLabel fontSize="xs">{tag}</TagLabel>
+                              </Tag>
+                            ))}
+                            {concept.tags.length > 4 && (
+                              <Tag size="sm" variant="ghost" colorScheme="gray">
+                                <TagLabel fontSize="xs">+{concept.tags.length - 4}</TagLabel>
+                              </Tag>
+                            )}
+                          </Flex>
+                        )}
+
+                        {/* 爆发日期 */}
+                        {concept.outbreak_dates && concept.outbreak_dates.length > 0 && (
+                          <HStack spacing={2} fontSize="xs" color="orange.500">
+                            <Icon as={FaBolt} />
+                            <Text>
+                              近期爆发: {concept.outbreak_dates.slice(0, 2).join(', ')}
+                              {concept.outbreak_dates.length > 2 && ` 等${concept.outbreak_dates.length}次`}
+                            </Text>
+                          </HStack>
+                        )}
+
                         <Divider />
 
+                        {/* 相关股票 */}
                         <Box
                           w="100%"
                           cursor="pointer"
@@ -957,7 +1006,7 @@ const StockOverview = () => {
                               overflow="hidden"
                               maxH="24px"
                             >
-                              {concept.stocks.map((stock, idx) => (
+                              {concept.stocks.slice(0, 5).map((stock, idx) => (
                                 <Tag
                                   key={idx}
                                   size="sm"
@@ -965,9 +1014,14 @@ const StockOverview = () => {
                                   variant="subtle"
                                   flexShrink={0}
                                 >
-                                  <TagLabel>{stock.stock_name}</TagLabel>
+                                  <TagLabel>{stock.stock_name || stock.name}</TagLabel>
                                 </Tag>
                               ))}
+                              {concept.stocks.length > 5 && (
+                                <Tag size="sm" variant="ghost" colorScheme="gray" flexShrink={0}>
+                                  <TagLabel>+{concept.stocks.length - 5}</TagLabel>
+                                </Tag>
+                              )}
                             </Flex>
                           )}
                         </Box>