Initial commit

src/components/ErrorBoundary.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+    Box,
+    Alert,
+    AlertIcon,
+    AlertTitle,
+    AlertDescription,
+    Button,
+    VStack,
+    Container
+} from '@chakra-ui/react';
+
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null, errorInfo: null };
+    }
+
+    static getDerivedStateFromError(error) {
+        return { hasError: true };
+    }
+
+    componentDidCatch(error, errorInfo) {
+        this.setState({
+            error: error,
+            errorInfo: errorInfo
+        });
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <Container maxW="lg" py={20}>
+                    <VStack spacing={6}>
+                        <Alert status="error" borderRadius="lg" p={6}>
+                            <AlertIcon boxSize="24px" />
+                            <Box>
+                                <AlertTitle fontSize="lg" mb={2}>
+                                    页面出现错误！
+                                </AlertTitle>
+                                <AlertDescription>
+                                    页面加载时发生了未预期的错误，请尝试刷新页面。
+                                </AlertDescription>
+                            </Box>
+                        </Alert>
+
+                        {process.env.NODE_ENV === 'development' && (
+                            <Box
+                                w="100%"
+                                bg="gray.50"
+                                p={4}
+                                borderRadius="lg"
+                                fontSize="sm"
+                                overflow="auto"
+                                maxH="200px"
+                            >
+                                <Box fontWeight="bold" mb={2}>错误详情:</Box>
+                                <Box as="pre" whiteSpace="pre-wrap">
+                                    {this.state.error && this.state.error.toString()}
+                                    {this.state.errorInfo.componentStack}
+                                </Box>
+                            </Box>
+                        )}
+
+                        <Button
+                            colorScheme="blue"
+                            onClick={() => window.location.reload()}
+                        >
+                            重新加载页面
+                        </Button>
+                    </VStack>
+                </Container>
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+export