fix: 事件详情唔错页面UI调整

2025-12-04 19:45:21 +08:00
parent 1d5d06c567
commit 7c1fe55a5f
2 changed files with 148 additions and 34 deletions
--- a/src/components/ErrorPage/index.tsx
+++ b/src/components/ErrorPage/index.tsx
@@ -0,0 +1,138 @@
+/**
+ * ErrorPage - 通用错误页面组件
+ * 用于显示加载失败、网络错误等异常状态
+ * 设计风格：黑色背景 + 金色边框
+ */
+
+import React from 'react';
+import {
+  Box,
+  Center,
+  Circle,
+  Text,
+  Button,
+  VStack,
+  HStack,
+  Icon,
+} from '@chakra-ui/react';
+import { WarningIcon } from '@chakra-ui/icons';
+
+// 主题色
+const GOLD_COLOR = '#D4A574';
+const BG_COLOR = '#1A202C';  // 与页面背景一致
+
+interface ErrorPageProps {
+  /** 错误标题，默认"加载失败" */
+  title?: string;
+  /** 错误描述信息 */
+  description?: string;
+  /** 详细信息（如事件ID、订单号等） */
+  detail?: string;
+  /** 详细信息标签，默认"ID" */
+  detailLabel?: string;
+  /** 是否显示重试按钮 */
+  showRetry?: boolean;
+  /** 重试回调函数 */
+  onRetry?: () => void;
+  /** 是否显示返回按钮 */
+  showBack?: boolean;
+  /** 返回回调函数 */
+  onBack?: () => void;
+  /** 是否全屏显示，默认 true */
+  fullScreen?: boolean;
+}
+
+const ErrorPage: React.FC<ErrorPageProps> = ({
+  title = '加载失败',
+  description,
+  detail,
+  detailLabel = 'ID',
+  showRetry = false,
+  onRetry,
+  showBack = false,
+  onBack,
+  fullScreen = true,
+}) => {
+  const hasButtons = (showRetry && onRetry) || (showBack && onBack);
+
+  return (
+    <Box
+      h={fullScreen ? '100vh' : '60vh'}
+      w="100%"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+        <Box
+          bg={BG_COLOR}
+          border="1px solid"
+          borderColor={GOLD_COLOR}
+          borderRadius="lg"
+          p={8}
+          maxW="400px"
+          w="90%"
+          textAlign="center"
+        >
+          {/* 金色圆形图标 + 黑色感叹号 */}
+          <Circle size="50px" bg={GOLD_COLOR} mx="auto" mb={4}>
+            <Icon as={WarningIcon} color={BG_COLOR} boxSize={5} />
+          </Circle>
+
+          {/* 金色标题 */}
+          <Text color={GOLD_COLOR} fontSize="lg" fontWeight="medium" mb={2}>
+            {title}
+          </Text>
+
+          {/* 描述信息 */}
+          {description && (
+            <Text color="gray.400" fontSize="sm" mb={2}>
+              {description}
+            </Text>
+          )}
+
+          {/* 详情 */}
+          {detail && (
+            <Text color="gray.500" fontSize="sm" mb={4}>
+              {detailLabel}: {detail}
+            </Text>
+          )}
+
+          {/* 按钮组 */}
+          {hasButtons && (
+            <HStack justify="center" spacing={3} mt={4}>
+              {showBack && onBack && (
+                <Button
+                  variant="outline"
+                  borderColor={GOLD_COLOR}
+                  color={GOLD_COLOR}
+                  size="sm"
+                  px={6}
+                  _hover={{ bg: GOLD_COLOR, color: 'black' }}
+                  onClick={onBack}
+                >
+                  返回
+                </Button>
+              )}
+              {showRetry && onRetry && (
+                <Button
+                  bg={GOLD_COLOR}
+                  color={BG_COLOR}
+                  borderColor={GOLD_COLOR}
+                  border="1px solid"
+                  size="sm"
+                  px={6}
+                  fontWeight="medium"
+                  _hover={{ bg: '#C49A6C' }}
+                  onClick={onRetry}
+                >
+                  重试
+                </Button>
+              )}
+            </HStack>
+          )}
+        </Box>
+    </Box>
+  );
+};
+
+export default ErrorPage;