feat(StockListPanel): 优化加载态为骨架屏

- 股票列表加载时显示骨架屏替代 Spinner
- 骨架屏包含头部和5行列表项占位
- 添加"相关股票"标题到列表头部

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

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

src/views/StockOverview/components/HotspotOverview/index.js

@@ -22,6 +22,8 @@ import {
   Tooltip,
   useDisclosure,
   Collapse,
+  Skeleton,
+  SkeletonText,
 } from '@chakra-ui/react';
 import { getApiBase } from '@utils/apiConfig';
 import { keyframes, css } from '@emotion/react';
@@ -295,15 +297,35 @@ const StockListPanel = ({ stocks, loading, alert }) => {
     return (
       <Box
         mt={3}
-        p={4}
         bg={glassEffect.light.bg}
         borderRadius="16px"
         border={glassEffect.light.border}
+        overflow="hidden"
       >
-        <HStack justify="center">
+        {/* 骨架屏头部 */}
-          <Spinner size="sm" color={colors.accent.purple} />
+        <HStack
-          <Text fontSize="sm" color={colors.text.secondary}>加载相关股票...</Text>
+          spacing={4}
+          px={4}
+          py={3}
+          bg="rgba(255, 255, 255, 0.02)"
+          borderBottom="1px solid rgba(255, 255, 255, 0.05)"
+        >
+          <Skeleton height="16px" width="70px" startColor="rgba(255,255,255,0.05)" endColor="rgba(255,255,255,0.1)" />
+          <Skeleton height="14px" width="100px" startColor="rgba(255,255,255,0.05)" endColor="rgba(255,255,255,0.1)" />
+          <Skeleton height="14px" width="80px" startColor="rgba(255,255,255,0.05)" endColor="rgba(255,255,255,0.1)" />
         </HStack>
+        {/* 骨架屏列表 */}
+        <VStack align="stretch" spacing={2} px={3} py={2}>
+          {[1, 2, 3, 4, 5].map((i) => (
+            <HStack key={i} justify="space-between" px={2} py={1.5}>
+              <HStack spacing={3}>
+                <Skeleton height="14px" width="60px" startColor="rgba(255,255,255,0.05)" endColor="rgba(255,255,255,0.1)" />
+                <Skeleton height="12px" width="80px" startColor="rgba(255,255,255,0.05)" endColor="rgba(255,255,255,0.1)" />
+              </HStack>
+              <Skeleton height="14px" width="50px" startColor="rgba(255,255,255,0.05)" endColor="rgba(255,255,255,0.1)" />
+            </HStack>
+          ))}
+        </VStack>
       </Box>
     );
   }
@@ -340,15 +362,16 @@ const StockListPanel = ({ stocks, loading, alert }) => {
       border={glassEffect.light.border}
       overflow="hidden"
     >
-      {/* 统计信息栏 */}
+      {/* 标题 + 统计信息栏 */}
       <HStack
-        spacing={6}
+        spacing={4}
         px={4}
         py={3}
         bg="rgba(255, 255, 255, 0.02)"
         borderBottom="1px solid rgba(255, 255, 255, 0.05)"
         fontSize="xs"
       >
+        <Text color={colors.text.primary} fontWeight="bold" fontSize="sm">相关股票</Text>
         <HStack spacing={2}>
           <Text color={colors.text.muted}>均涨:</Text>
           <Text fontWeight="bold" color={avgChange >= 0 ? colors.market.up : colors.market.down}>