From 174fe32850c59dca0314a1de075a0d449fed5b6b Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Mon, 22 Dec 2025 13:02:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(LoadingState):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E9=AA=A8=E6=9E=B6=E5=B1=8F=E5=8F=98=E4=BD=93=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=8A=A0=E8=BD=BD=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- LoadingState: 新增 variant 参数支持 spinner/skeleton 模式
- LoadingState: 新增 skeletonType 参数支持 grid/list 布局
- AnnouncementsPanel: 使用 list 骨架屏替代 spinner
- DisclosureSchedulePanel: 使用 grid 骨架屏替代 spinner

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/AnnouncementsPanel.tsx         |   2 +-
 .../components/DisclosureSchedulePanel.tsx    |   2 +-
 .../BasicInfoTab/components/LoadingState.tsx  | 102 ++++++++++++++++--
 3 files changed, 98 insertions(+), 8 deletions(-)

diff --git a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/AnnouncementsPanel.tsx b/src/views/Company/components/CompanyOverview/BasicInfoTab/components/AnnouncementsPanel.tsx
index 89536abf..f24dce1b 100644
--- a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/AnnouncementsPanel.tsx
+++ b/src/views/Company/components/CompanyOverview/BasicInfoTab/components/AnnouncementsPanel.tsx
@@ -49,7 +49,7 @@ const AnnouncementsPanel: React.FC<AnnouncementsPanelProps> = ({ stockCode, isAc
   };
 
   if (loading) {
-    return <LoadingState message="加载公告数据..." />;
+    return <LoadingState variant="skeleton" skeletonType="list" skeletonCount={5} />;
   }
 
   return (
diff --git a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/DisclosureSchedulePanel.tsx b/src/views/Company/components/CompanyOverview/BasicInfoTab/components/DisclosureSchedulePanel.tsx
index 6b8ef55a..54e2b34c 100644
--- a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/DisclosureSchedulePanel.tsx
+++ b/src/views/Company/components/CompanyOverview/BasicInfoTab/components/DisclosureSchedulePanel.tsx
@@ -27,7 +27,7 @@ const DisclosureSchedulePanel: React.FC<DisclosureSchedulePanelProps> = ({ stock
   const { disclosureSchedule, loading } = useDisclosureData({ stockCode, enabled: isActive });
 
   if (loading) {
-    return <LoadingState message="加载披露日程..." />;
+    return <LoadingState variant="skeleton" skeletonType="grid" skeletonCount={4} />;
   }
 
   if (disclosureSchedule.length === 0) {
diff --git a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/LoadingState.tsx b/src/views/Company/components/CompanyOverview/BasicInfoTab/components/LoadingState.tsx
index 450cefef..042db0fa 100644
--- a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/LoadingState.tsx
+++ b/src/views/Company/components/CompanyOverview/BasicInfoTab/components/LoadingState.tsx
@@ -1,22 +1,110 @@
 // src/views/Company/components/CompanyOverview/BasicInfoTab/components/LoadingState.tsx
-// 复用的加载状态组件
+// 复用的加载状态组件 - 支持骨架屏
 
-import React from "react";
-import { Center, VStack, Spinner, Text } from "@chakra-ui/react";
+import React, { memo } from "react";
+import {
+  Center,
+  VStack,
+  Spinner,
+  Text,
+  Box,
+  Skeleton,
+  SimpleGrid,
+  HStack,
+} from "@chakra-ui/react";
 import { THEME } from "../config";
 
+// 骨架屏颜色配置
+const SKELETON_COLORS = {
+  startColor: "rgba(26, 32, 44, 0.6)",
+  endColor: "rgba(212, 175, 55, 0.2)",
+};
+
 interface LoadingStateProps {
   message?: string;
   height?: string;
+  /** 使用骨架屏模式（更好的视觉体验） */
+  variant?: "spinner" | "skeleton";
+  /** 骨架屏类型：grid（网格布局）或 list（列表布局） */
+  skeletonType?: "grid" | "list";
+  /** 骨架屏项目数量 */
+  skeletonCount?: number;
 }
 
 /**
- * 加载状态组件（黑金主题）
+ * 网格骨架屏（用于披露日程等）
  */
-const LoadingState: React.FC<LoadingStateProps> = ({
+const GridSkeleton: React.FC<{ count: number }> = memo(({ count }) => (
+  <SimpleGrid columns={{ base: 2, md: 4 }} spacing={3}>
+    {Array.from({ length: count }).map((_, i) => (
+      <Skeleton
+        key={i}
+        height="80px"
+        borderRadius="md"
+        {...SKELETON_COLORS}
+      />
+    ))}
+  </SimpleGrid>
+));
+
+GridSkeleton.displayName = "GridSkeleton";
+
+/**
+ * 列表骨架屏（用于公告列表等）
+ */
+const ListSkeleton: React.FC<{ count: number }> = memo(({ count }) => (
+  <VStack spacing={2} align="stretch">
+    {Array.from({ length: count }).map((_, i) => (
+      <Box
+        key={i}
+        p={3}
+        borderRadius="md"
+        bg="rgba(26, 32, 44, 0.4)"
+        border="1px solid"
+        borderColor="rgba(212, 175, 55, 0.2)"
+      >
+        <HStack justify="space-between">
+          <VStack align="start" spacing={2} flex={1}>
+            <HStack>
+              <Skeleton height="20px" width="60px" borderRadius="sm" {...SKELETON_COLORS} />
+              <Skeleton height="16px" width="80px" borderRadius="sm" {...SKELETON_COLORS} />
+            </HStack>
+            <Skeleton height="18px" width="90%" borderRadius="sm" {...SKELETON_COLORS} />
+          </VStack>
+          <Skeleton height="32px" width="32px" borderRadius="md" {...SKELETON_COLORS} />
+        </HStack>
+      </Box>
+    ))}
+  </VStack>
+));
+
+ListSkeleton.displayName = "ListSkeleton";
+
+/**
+ * 加载状态组件（黑金主题）
+ *
+ * @param variant - "spinner"（默认）或 "skeleton"（骨架屏）
+ * @param skeletonType - 骨架屏类型："grid" 或 "list"
+ */
+const LoadingState: React.FC<LoadingStateProps> = memo(({
   message = "加载中...",
   height = "200px",
+  variant = "spinner",
+  skeletonType = "list",
+  skeletonCount = 4,
 }) => {
+  if (variant === "skeleton") {
+    return (
+      <Box minH={height} p={4}>
+        {skeletonType === "grid" ? (
+          <GridSkeleton count={skeletonCount} />
+        ) : (
+          <ListSkeleton count={skeletonCount} />
+        )}
+      </Box>
+    );
+  }
+
   return (
     <Center h={height}>
       <VStack>
@@ -27,6 +115,8 @@ const LoadingState: React.FC<LoadingStateProps> = ({
       </VStack>
     </Center>
   );
-};
+});
+
+LoadingState.displayName = "LoadingState";
 
 export default LoadingState;