feat(PageLoader): 添加 inline 模式支持
- 新增 inline 参数,用于页面内部加载状态 - 保持原有全屏模式用于路由懒加载 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,13 +1,38 @@
|
|||||||
// src/components/Loading/PageLoader.js
|
// src/components/Loading/PageLoader.js
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Box, Spinner, Text, VStack } from '@chakra-ui/react';
|
import { Box, Spinner, Text, VStack, Center } from '@chakra-ui/react';
|
||||||
import { forumColors } from 'theme/forumTheme';
|
import { forumColors } from 'theme/forumTheme';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 页面加载组件 - 用于路由懒加载的 fallback
|
* 页面加载组件 - 用于路由懒加载的 fallback
|
||||||
* 黑金主题:深色背景 + 金色 Spinner
|
* 黑金主题:深色背景 + 金色 Spinner
|
||||||
|
*
|
||||||
|
* @param {string} message - 加载提示文字
|
||||||
|
* @param {boolean} inline - 是否为内联模式(不占满整个视口)
|
||||||
|
* @param {string} py - 内联模式下的垂直内边距
|
||||||
*/
|
*/
|
||||||
export default function PageLoader({ message = '加载中...' }) {
|
export default function PageLoader({ message = '加载中...', inline = false, py = '20' }) {
|
||||||
|
const content = (
|
||||||
|
<VStack spacing={4}>
|
||||||
|
<Spinner
|
||||||
|
thickness="4px"
|
||||||
|
speed="0.65s"
|
||||||
|
emptyColor={forumColors.border.default}
|
||||||
|
color={forumColors.text.gold}
|
||||||
|
size="xl"
|
||||||
|
/>
|
||||||
|
<Text fontSize="md" color={forumColors.text.secondary}>
|
||||||
|
{message}
|
||||||
|
</Text>
|
||||||
|
</VStack>
|
||||||
|
);
|
||||||
|
|
||||||
|
// 内联模式:用于页面内部局部加载
|
||||||
|
if (inline) {
|
||||||
|
return <Center py={py}>{content}</Center>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 全屏模式:用于路由懒加载
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
minH="100vh"
|
minH="100vh"
|
||||||
@@ -16,18 +41,7 @@ export default function PageLoader({ message = '加载中...' }) {
|
|||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
bg={forumColors.background.main}
|
bg={forumColors.background.main}
|
||||||
>
|
>
|
||||||
<VStack spacing={4}>
|
{content}
|
||||||
<Spinner
|
|
||||||
thickness="4px"
|
|
||||||
speed="0.65s"
|
|
||||||
emptyColor={forumColors.border.default}
|
|
||||||
color={forumColors.text.gold}
|
|
||||||
size="xl"
|
|
||||||
/>
|
|
||||||
<Text fontSize="md" color={forumColors.text.secondary}>
|
|
||||||
{message}
|
|
||||||
</Text>
|
|
||||||
</VStack>
|
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user