ac7e627b2d
- 创建共享的 LoadingState 组件（黑金主题） - DeepAnalysisTab: 使用统一 LoadingState 替换蓝色 Spinner - FinancialPanorama: 使用 LoadingState 替换 Skeleton - MarketDataView: 使用 LoadingState 替换自定义 Spinner - ForecastReport: 使用 LoadingState 替换 Skeleton 骨架屏 所有一级 Tab 现在使用一致的金色 Spinner + 加载提示文案 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
45 lines
922 B
TypeScript
45 lines
922 B
TypeScript
// src/views/Company/components/LoadingState.tsx
|
|
// 统一的加载状态组件 - 黑金主题
|
|
|
|
import React from "react";
|
|
import { Center, VStack, Spinner, Text } from "@chakra-ui/react";
|
|
|
|
// 黑金主题配置
|
|
const THEME = {
|
|
gold: "#D4AF37",
|
|
textSecondary: "gray.400",
|
|
};
|
|
|
|
interface LoadingStateProps {
|
|
message?: string;
|
|
height?: string;
|
|
}
|
|
|
|
/**
|
|
* 统一的加载状态组件（黑金主题）
|
|
*
|
|
* 用于所有一级 Tab 的 loading 状态展示
|
|
*/
|
|
const LoadingState: React.FC<LoadingStateProps> = ({
|
|
message = "加载中...",
|
|
height = "300px",
|
|
}) => {
|
|
return (
|
|
<Center h={height}>
|
|
<VStack spacing={4}>
|
|
<Spinner
|
|
size="xl"
|
|
color={THEME.gold}
|
|
thickness="4px"
|
|
speed="0.65s"
|
|
/>
|
|
<Text fontSize="sm" color={THEME.textSecondary}>
|
|
{message}
|
|
</Text>
|
|
</VStack>
|
|
</Center>
|
|
);
|
|
};
|
|
|
|
export default LoadingState;
|