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 = ({ stockCode, isAc }; if (loading) { - return ; + return ; } 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 = ({ stock const { disclosureSchedule, loading } = useDisclosureData({ stockCode, enabled: isActive }); if (loading) { - return ; + return ; } 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 = ({ +const GridSkeleton: React.FC<{ count: number }> = memo(({ count }) => ( + + {Array.from({ length: count }).map((_, i) => ( + + ))} + +)); + +GridSkeleton.displayName = "GridSkeleton"; + +/** + * 列表骨架屏(用于公告列表等) + */ +const ListSkeleton: React.FC<{ count: number }> = memo(({ count }) => ( + + {Array.from({ length: count }).map((_, i) => ( + + + + + + + + + + + + + ))} + +)); + +ListSkeleton.displayName = "ListSkeleton"; + +/** + * 加载状态组件(黑金主题) + * + * @param variant - "spinner"(默认)或 "skeleton"(骨架屏) + * @param skeletonType - 骨架屏类型:"grid" 或 "list" + */ +const LoadingState: React.FC = memo(({ message = "加载中...", height = "200px", + variant = "spinner", + skeletonType = "list", + skeletonCount = 4, }) => { + if (variant === "skeleton") { + return ( + + {skeletonType === "grid" ? ( + + ) : ( + + )} + + ); + } + return (
@@ -27,6 +115,8 @@ const LoadingState: React.FC = ({
); -}; +}); + +LoadingState.displayName = "LoadingState"; export default LoadingState;