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

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;

src/views/EventDetail/index.js

@@ -7,19 +7,14 @@ import React, { useState, useEffect } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 import {
   Box,
-  Container,
   Spinner,
   Center,
-  Alert,
-  AlertIcon,
-  AlertTitle,
-  AlertDescription,
-  Text,
 } from '@chakra-ui/react';
 import { decodeEventId } from '@/utils/idEncoder';
 import { eventService } from '@/services/eventService';
 import { DynamicNewsDetailPanel } from '@/views/Community/components/DynamicNewsDetail';
 import { logger } from '@/utils/logger';
+import ErrorPage from '@/components/ErrorPage';
 
 const EventDetail = () => {
   const { eventId: pathEventId } = useParams();
@@ -71,35 +66,16 @@ const EventDetail = () => {
   }
 
   // 错误状态
-  if (error) {
+  if (!error) {
     return (
-      <Box minH="100vh" w="100%" p={4}>
+      <ErrorPage
-        <Container maxW="7xl" py={8}>
+        title="页面找不到了"
-          <Center minH="60vh">
+        description={error}
-            <Alert
+        detail={eventId}
-              status="error"
+        detailLabel="事件ID"
-              borderRadius="lg"
+        showRetry
-              maxW="md"
+        onRetry={() => window.location.reload()}
-              flexDirection="column"
+      />
-              textAlign="center"
-              p={6}
-            >
-              <AlertIcon boxSize="40px" mr={0} />
-              <AlertTitle mt={4} mb={2} fontSize="lg">
-                加载失败
-              </AlertTitle>
-              <AlertDescription maxWidth="sm">
-                {error}
-                {eventId && (
-                  <Text mt={2} fontSize="sm" color="gray.500">
-                    事件ID: {eventId}
-                  </Text>
-                )}
-              </AlertDescription>
-            </Alert>
-          </Center>
-        </Container>
-      </Box>
     );
   }