From d95b2ff313ef255f3eca2210a97d2996b371c95a Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 31 Dec 2025 19:05:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(StockListPanel):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=80=81=E4=B8=BA=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/HotspotOverview/index.js       | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/views/StockOverview/components/HotspotOverview/index.js b/src/views/StockOverview/components/HotspotOverview/index.js
index d8b91d62..b4bae65e 100644
--- a/src/views/StockOverview/components/HotspotOverview/index.js
+++ b/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} />
-          <Text fontSize="sm" color={colors.text.secondary}>加载相关股票...</Text>
+        {/* 骨架屏头部 */}
+        <HStack
+          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}>