feat: 10.10线上最新代码提交

src/views/LimitAnalyse/index.js

@@ -21,6 +21,9 @@ import {
     StatNumber,
     StatHelpText,
     StatArrow,
+  Alert,
+  AlertIcon,
+  Link,
 } from '@chakra-ui/react';
 import {
     RepeatIcon,
@@ -32,24 +35,29 @@ import {
 // 这里为了演示，我们假设它们已经被正确导出
 
 // API配置
-const API_URL = process.env.NODE_ENV === 'production' ? '/report-api' : 'http://111.198.58.126:8811';
+const API_URL = process.env.NODE_ENV === 'production' ? '/report-api' : 'http://111.198.58.126:5001';
 
 // 导入的组件（实际使用时应该从独立文件导入）
+// 恢复使用本页自带的轻量日历
 import EnhancedCalendar from './components/EnhancedCalendar';
 import SectorDetails from './components/SectorDetails';
 import { DataAnalysis, StockDetailModal } from './components/DataVisualizationComponents';
 import { AdvancedSearch, SearchResultsModal } from './components/SearchComponents';
 
+// 导入导航栏组件
+import HomeNavbar from '../../components/Navbars/HomeNavbar';
+
+// 导入高位股统计组件
+import HighPositionStocks from './components/HighPositionStocks';
+
 // 主组件
 export default function LimitAnalyse() {
-    const [selectedDate, setSelectedDate] = useState(new Date());
+    const [selectedDate, setSelectedDate] = useState(null);
     const [dateStr, setDateStr] = useState('');
     const [loading, setLoading] = useState(false);
     const [dailyData, setDailyData] = useState(null);
     const [availableDates, setAvailableDates] = useState([]);
-    const [selectedStock, setSelectedStock] = useState(null);
     const [wordCloudData, setWordCloudData] = useState([]);
-    const [isDetailOpen, setIsDetailOpen] = useState(false);
     const [searchResults, setSearchResults] = useState(null);
     const [isSearchOpen, setIsSearchOpen] = useState(false);
 
@@ -64,14 +72,37 @@ export default function LimitAnalyse() {
         fetchAvailableDates();
     }, []);
 
-    // 加载初始数据
+    // 初始进入展示骨架屏，直到选中日期的数据加载完成
     useEffect(() => {
-        const today = new Date();
-        const dateString = formatDateStr(today);
-        setDateStr(dateString);
-        fetchDailyAnalysis(dateString);
+        setLoading(true);
     }, []);
 
+    // 根据可用日期加载最近一个有数据的日期
+    useEffect(() => {
+        if (availableDates && availableDates.length > 0) {
+            // 选择日期字符串最大的那一天（格式为 YYYYMMDD）
+            const latest = availableDates.reduce((max, cur) =>
+                (!max || (cur.date && cur.date > max)) ? cur.date : max
+            , null);
+
+            if (latest) {
+                setDateStr(latest);
+                const year = parseInt(latest.slice(0, 4), 10);
+                const month = parseInt(latest.slice(4, 6), 10) - 1;
+                const day = parseInt(latest.slice(6, 8), 10);
+                setSelectedDate(new Date(year, month, day));
+                fetchDailyAnalysis(latest);
+            }
+        } else {
+            // 如果暂无可用日期，回退到今日，避免页面长时间空白
+            const today = new Date();
+            const dateString = formatDateStr(today);
+            setDateStr(dateString);
+            setSelectedDate(today);
+            fetchDailyAnalysis(dateString);
+        }
+    }, [availableDates]);
+
     // API调用函数
     const fetchAvailableDates = async () => {
         try {
@@ -178,12 +209,6 @@ export default function LimitAnalyse() {
         }
     };
 
-    // 处理股票详情
-    const handleStockDetail = (stock) => {
-        setSelectedStock(stock);
-        setIsDetailOpen(true);
-    };
-
     // 处理板块数据排序
     const getSortedSectorData = () => {
         if (!dailyData?.sector_data) return [];
@@ -261,35 +286,130 @@ export default function LimitAnalyse() {
         </SimpleGrid>
     );
 
+    const formatDisplayDate = (date) => {
+        if (!date) return '';
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        return `${year}年${month}月${day}日`;
+    };
+
+    const getSelectedDateCount = () => {
+        if (!selectedDate || !availableDates?.length) return null;
+        const date = formatDateStr(selectedDate);
+        const found = availableDates.find(d => d.date === date);
+        return found ? found.count : null;
+    };
+
     return (
         <Box minH="100vh" bg={bgColor}>
+            {/* 导航栏 */}
+            <HomeNavbar />
+            
             {/* 顶部Header */}
             <Box bgGradient="linear(to-br, blue.500, purple.600)" color="white" py={8}>
                 <Container maxW="container.xl">
-                    <Flex justify="space-between" align="center" wrap="wrap" gap={6}>
-                        <VStack align="start" spacing={2}>
-                            <HStack>
-                                <Badge colorScheme="whiteAlpha" fontSize="sm" px={2}>
-                                    AI驱动
-                                </Badge>
-                                <Badge colorScheme="yellow" fontSize="sm" px={2}>
-                                    实时更新
-                                </Badge>
-                            </HStack>
-                            <Heading size="xl">涨停板块分析平台</Heading>
-                            <Text fontSize="lg" opacity={0.9}>
-                                智能分析每日涨停板块，精准捕捉市场热点
-                            </Text>
-                        </VStack>
+                    <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={6} alignItems="stretch">
+                        {/* 左侧：标题置顶，注释与图例贴底 */}
+                        <Flex direction="column" minH="420px" justify="space-between">
+                            <VStack align="start" spacing={4}>
+                                <HStack>
+                                    <Badge colorScheme="whiteAlpha" fontSize="sm" px={2}>
+                                        AI驱动
+                                    </Badge>
+                                    <Badge colorScheme="yellow" fontSize="sm" px={2}>
+                                        实时更新
+                                    </Badge>
+                                </HStack>
+                                <Heading
+                                    size="3xl"
+                                    fontWeight="extrabold"
+                                    letterSpacing="-0.5px"
+                                    lineHeight="shorter"
+                                    textShadow="0 6px 24px rgba(0,0,0,0.25)"
+                                >
+                                    涨停板块分析平台
+                                </Heading>
+                                <Text fontSize="xl" opacity={0.98} fontWeight="semibold" textShadow="0 4px 16px rgba(0,0,0,0.2)">
+                                    以大模型辅助整理海量信息，结合领域知识图谱与分析师复核，呈现涨停板块关键线索
+                                </Text>
+                            </VStack>
 
-                        <Box mt={{ base: 4, md: 0 }}>
-                            <EnhancedCalendar
-                                selectedDate={selectedDate}
-                                onDateChange={handleDateChange}
-                                availableDates={availableDates}
-                            />
-                        </Box>
-                    </Flex>
+                            <VStack align="stretch" spacing={3}>
+                                <Alert
+                                    status="info"
+                                    borderRadius="xl"
+                                    bg="whiteAlpha.200"
+                                    color="whiteAlpha.900"
+                                    borderWidth="1px"
+                                    borderColor="whiteAlpha.300"
+                                    backdropFilter="saturate(180%) blur(10px)"
+                                    boxShadow="0 8px 32px rgba(0,0,0,0.2)"
+                                >
+                                    <AlertIcon />
+                                    <Text fontSize="md" fontWeight="medium">
+                                        {selectedDate ? `当前选择：${formatDisplayDate(selectedDate)}` : '当前选择：--'}
+                                        {getSelectedDateCount() != null ? ` - ${getSelectedDateCount()}只涨停` : ''}
+                                    </Text>
+                                </Alert>
+
+                                <Card
+                                    bg="whiteAlpha.200"
+                                    color="whiteAlpha.900"
+                                    borderRadius="xl"
+                                    boxShadow="0 8px 32px rgba(0,0,0,0.2)"
+                                    borderWidth="1px"
+                                    borderColor="whiteAlpha.300"
+                                    backdropFilter="saturate(180%) blur(10px)"
+                                    w="full"
+                                >
+                                    <CardBody>
+                                        <VStack align="stretch" spacing={2}>
+                                            <Heading size="sm" color="whiteAlpha.900">涨停数量图例</Heading>
+                                            <VStack align="stretch" spacing={2}>
+                                                <HStack>
+                                                    <Box w={5} h={5} bg="green.200" borderRadius="md" border="1px solid" borderColor="whiteAlpha.400" />
+                                                    <Text fontSize="sm">少量 (≤50只)</Text>
+                                                </HStack>
+                                                <HStack>
+                                                    <Box w={5} h={5} bg="yellow.200" borderRadius="md" border="1px solid" borderColor="whiteAlpha.400" />
+                                                    <Text fontSize="sm">中等 (51-80只)</Text>
+                                                </HStack>
+                                                <HStack>
+                                                    <Box w={5} h={5} bg="red.200" borderRadius="md" border="1px solid" borderColor="whiteAlpha.400" />
+                                                    <Text fontSize="sm">大量 (&gt;80只)</Text>
+                                                </HStack>
+                                            </VStack>
+                                        </VStack>
+                                    </CardBody>
+                                </Card>
+                            </VStack>
+                        </Flex>
+
+                        {/* 右侧：半屏日历 */}
+                        <Card
+                            bg="whiteAlpha.200"
+                            borderRadius="xl"
+                            boxShadow="0 8px 32px rgba(0,0,0,0.2)"
+                            borderWidth="1px"
+                            borderColor="whiteAlpha.300"
+                            backdropFilter="saturate(180%) blur(10px)"
+                            w="full"
+                            minH="420px"
+                        >
+                            <CardBody p={4}>
+                                <EnhancedCalendar
+                                    selectedDate={selectedDate}
+                                    onDateChange={handleDateChange}
+                                    availableDates={availableDates}
+                                    compact
+                                    hideSelectionInfo
+                                    width="100%"
+                                    cellHeight={10}
+                                />
+                            </CardBody>
+                        </Card>
+                    </SimpleGrid>
                 </Container>
             </Box>
 
@@ -317,11 +437,13 @@ export default function LimitAnalyse() {
                         <SectorDetails
                             sortedSectors={getSortedSectorData()}
                             totalStocks={dailyData?.total_stocks || 0}
-                            onStockClick={handleStockDetail}
                         />
                     </Box>
                 )}
 
+                {/* 高位股统计 */}
+                <HighPositionStocks dateStr={dateStr} />
+
                 {/* 数据分析 */}
                 {loading ? (
                     <Skeleton height="500px" borderRadius="xl" />
@@ -334,17 +456,11 @@ export default function LimitAnalyse() {
             </Container>
 
             {/* 弹窗 */}
-            <StockDetailModal
-                isOpen={isDetailOpen}
-                onClose={() => setIsDetailOpen(false)}
-                selectedStock={selectedStock}
-            />
-
             <SearchResultsModal
                 isOpen={isSearchOpen}
                 onClose={() => setIsSearchOpen(false)}
                 searchResults={searchResults}
-                onStockClick={handleStockDetail}
+                onStockClick={() => {}}
             />
 
             {/* 浮动按钮 */}
@@ -373,6 +489,27 @@ export default function LimitAnalyse() {
                     </Tooltip>
                 </VStack>
             </Box>
+            
+            {/* Footer区域 */}
+            <Box bg={useColorModeValue('gray.100', 'gray.800')} py={6} mt={8}>
+                <Container maxW="7xl">
+                    <VStack spacing={2}>
+                        <Text color="gray.500" fontSize="sm">
+                            © 2024 价值前沿. 保留所有权利.
+                        </Text>
+                        <HStack spacing={4} fontSize="xs" color="gray.400">
+                            <Link
+                                href="https://beian.mps.gov.cn/#/query/webSearch?code=11010802046286"
+                                isExternal
+                                _hover={{ color: 'gray.600' }}
+                            >
+                                京公网安备11010802046286号
+                            </Link>
+                            <Text>京ICP备2025107343号-1</Text>
+                        </HStack>
+                    </VStack>
+                </Container>
+            </Box>
         </Box>
     );
 }