pref: ErrorPage 功能增强

ErrorPage 新增功能:
 - 浮动动画效果 (keyframes)
 - 可配置错误原因列表 (reasons prop)
 - 技术详情折叠面板 (techDetails prop)
 - 可选搜索功能 (search prop)
 - 更丰富的导航选项

src/components/ErrorPage/index.tsx

@@ -1,59 +1,270 @@
 /**
  * ErrorPage - 通用错误页面组件
- * 用于显示加载失败、网络错误等异常状态
+ * 用于显示加载失败、网络错误、404等异常状态
  * 设计风格：黑色背景 + 金色边框
  */
 
 import React from 'react';
 import {
   Box,
-  Center,
-  Circle,
   Text,
   Button,
   VStack,
   HStack,
-  Icon,
+  Collapse,
+  useDisclosure,
 } from '@chakra-ui/react';
-import { WarningIcon } from '@chakra-ui/icons';
+import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import { trackEventAsync } from '@/lib/posthog';
 
-// 主题色
+// 主题色（保持原来的配色）
 const GOLD_COLOR = '#D4A574';
-const BG_COLOR = '#1A202C';  // 与页面背景一致
+const BG_COLOR = '#1A202C';
 
-interface ErrorPageProps {
-  /** 错误标题，默认"加载失败" */
+// 错误原因项配置
+export interface ErrorReasonItem {
+  /** 图标（emoji 或自定义组件） */
+  icon: string | React.ReactNode;
+  /** 原因标题 */
+  title: string;
+  /** 原因描述 */
+  description: string;
+}
+
+// 操作按钮配置
+export interface ActionButton {
+  /** 按钮文本 */
+  label: string;
+  /** 按钮图标（可选，放在文本前） */
+  icon?: string;
+  /** 按钮类型：primary（主要）、secondary（次要）、outline（轮廓） */
+  variant?: 'primary' | 'secondary' | 'outline';
+  /** 点击回调 */
+  onClick?: () => void;
+  /** 跳转链接（与 onClick 二选一） */
+  href?: string;
+}
+
+// 技术详情配置
+export interface TechDetails {
+  /** 请求 URL */
+  requestUrl?: string;
+  /** 错误类型 */
+  errorType?: string;
+  /** 错误信息 */
+  errorMessage?: string;
+  /** 时间戳 */
+  timestamp?: string;
+  /** 相关 ID */
+  relatedId?: string;
+  /** 自定义字段 */
+  customFields?: Record<string, string>;
+}
+
+// 完整的 ErrorPage 配置
+export interface ErrorPageProps {
+  // ===== 基础配置 =====
+  /** 错误标题 */
   title?: string;
+  /** 错误副标题（如显示错误 ID） */
+  subtitle?: string;
   /** 错误描述信息 */
   description?: string;
-  /** 详细信息（如事件ID、订单号等） */
+
+  // ===== 详细信息 =====
+  /** 详细信息值 */
   detail?: string;
-  /** 详细信息标签，默认"ID" */
+  /** 详细信息标签 */
   detailLabel?: string;
-  /** 是否显示重试按钮 */
+
+  // ===== 错误原因列表 =====
+  /** 错误原因列表 */
+  reasons?: ErrorReasonItem[];
+
+  // ===== 技术详情 =====
+  /** 技术详情（可展开查看） */
+  techDetails?: TechDetails;
+
+  // ===== 操作按钮 =====
+  /** 自定义操作按钮列表 */
+  actions?: ActionButton[];
+  /** 快捷配置：是否显示重试按钮 */
   showRetry?: boolean;
-  /** 重试回调函数 */
+  /** 重试回调 */
   onRetry?: () => void;
-  /** 是否显示返回按钮 */
+  /** 快捷配置：是否显示返回按钮 */
   showBack?: boolean;
-  /** 返回回调函数 */
+  /** 返回回调 */
   onBack?: () => void;
-  /** 是否全屏显示，默认 true */
+  /** 快捷配置：是否显示返回首页按钮 */
+  showHome?: boolean;
+  /** 首页路径 */
+  homePath?: string;
+
+  // ===== 布局配置 =====
+  /** 是否全屏显示 */
   fullScreen?: boolean;
+  /** 最大宽度 */
+  maxWidth?: string;
+
+  // ===== 网络状态 =====
+  /** 是否检查网络状态并显示离线提示 */
+  checkOffline?: boolean;
+
+  // ===== 错误上报 =====
+  /** 是否启用内置 PostHog 错误上报（默认 true） */
+  enableBuiltInReport?: boolean;
+  /** 自定义错误上报回调（可选，与内置上报同时生效） */
+  onErrorReport?: (errorInfo: Record<string, unknown>) => void;
 }
 
+// 默认错误原因
+const DEFAULT_REASONS: ErrorReasonItem[] = [
+  {
+    icon: '🔍',
+    title: 'ID 可能输入错误',
+    description: '请检查 URL 中的 ID 是否正确',
+  },
+  {
+    icon: '🗑️',
+    title: '内容可能已被删除',
+    description: '该内容可能因过期或调整而被下架',
+  },
+  {
+    icon: '🔄',
+    title: '系统暂时无法访问',
+    description: '请稍后重试或联系技术支持',
+  },
+];
+
 const ErrorPage: React.FC<ErrorPageProps> = ({
   title = '加载失败',
-  description,
+  subtitle,
+  description = '我们无法找到您请求的内容，这可能是因为：',
   detail,
   detailLabel = 'ID',
+  reasons = DEFAULT_REASONS,
+  techDetails,
+  actions,
   showRetry = false,
   onRetry,
   showBack = false,
   onBack,
+  showHome = false,
+  homePath = '/',
   fullScreen = true,
+  maxWidth = '500px',
+  checkOffline = true,
+  enableBuiltInReport = true,
+  onErrorReport,
 }) => {
-  const hasButtons = (showRetry && onRetry) || (showBack && onBack);
+  const navigate = useNavigate();
+  const { isOpen: isTechOpen, onToggle: onTechToggle } = useDisclosure();
+  const [isOffline, setIsOffline] = React.useState(!navigator.onLine);
+
+  // 监听网络状态
+  React.useEffect(() => {
+    if (!checkOffline) return;
+
+    const handleOnline = () => setIsOffline(false);
+    const handleOffline = () => setIsOffline(true);
+
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, [checkOffline]);
+
+  // 错误上报
+  React.useEffect(() => {
+    const errorInfo = {
+      error_title: title,
+      error_detail: detail,
+      error_type: techDetails?.errorType,
+      error_message: techDetails?.errorMessage,
+      page_url: window.location.href,
+      referrer: document.referrer,
+      user_agent: navigator.userAgent,
+      event_id: techDetails?.relatedId,
+    };
+
+    // 内置 PostHog 上报（异步，不阻塞渲染）
+    if (enableBuiltInReport) {
+      trackEventAsync('error_page_view', errorInfo);
+    }
+
+    // 自定义上报回调（保持兼容）
+    if (onErrorReport) {
+      onErrorReport({
+        ...errorInfo,
+        timestamp: new Date().toISOString(),
+        ...techDetails,
+      });
+    }
+  }, [enableBuiltInReport, onErrorReport, title, detail, techDetails]);
+
+  // 构建操作按钮列表
+  const buildActionButtons = (): ActionButton[] => {
+    if (actions) return actions;
+
+    const buttons: ActionButton[] = [];
+
+    if (showBack) {
+      buttons.push({
+        label: '返回',
+        variant: 'outline',
+        onClick: onBack || (() => window.history.back()),
+      });
+    }
+
+    if (showRetry && onRetry) {
+      buttons.push({
+        label: '重试',
+        variant: 'primary',
+        onClick: onRetry,
+      });
+    }
+
+    if (showHome) {
+      buttons.push({
+        label: '返回首页',
+        variant: 'outline',
+        onClick: () => navigate(homePath),
+      });
+    }
+
+    return buttons;
+  };
+
+  // 获取按钮样式（保持原来的金色风格）
+  const getButtonStyle = (variant: ActionButton['variant']) => {
+    switch (variant) {
+      case 'primary':
+        return {
+          bg: GOLD_COLOR,
+          color: BG_COLOR,
+          border: '1px solid',
+          borderColor: GOLD_COLOR,
+          _hover: { bg: '#C49A6C' },
+        };
+      case 'outline':
+      default:
+        return {
+          variant: 'outline' as const,
+          borderColor: GOLD_COLOR,
+          color: GOLD_COLOR,
+          _hover: { bg: GOLD_COLOR, color: 'black' },
+        };
+    }
+  };
+
+  const actionButtons = buildActionButtons();
+  const hasButtons = actionButtons.length > 0;
 
   return (
     <Box
@@ -63,74 +274,165 @@ const ErrorPage: React.FC<ErrorPageProps> = ({
       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>
+      <Box
+        bg={BG_COLOR}
+        border="1px solid"
+        borderColor={GOLD_COLOR}
+        borderRadius="lg"
+        p={8}
+        maxW={maxWidth}
+        w="90%"
+        textAlign="center"
+      >
+        {/* 金色圆形感叹号图标 */}
+        <Box mx="auto" mb={4}>
+          <ExclamationCircleOutlined style={{ fontSize: '40px', color: GOLD_COLOR }} />
+        </Box>
 
-          {/* 金色标题 */}
-          <Text color={GOLD_COLOR} fontSize="lg" fontWeight="medium" mb={2}>
-            {title}
+        {/* 金色标题 */}
+        <Text color={GOLD_COLOR} fontSize="lg" fontWeight="medium" mb={2}>
+          {title}
+        </Text>
+
+        {/* 副标题（ID 显示） */}
+        {(subtitle || detail) && (
+          <Text
+            color="gray.400"
+            fontSize="sm"
+            fontFamily="monospace"
+            mb={2}
+          >
+            {subtitle || `${detailLabel}: ${detail}`}
           </Text>
+        )}
 
-          {/* 描述信息 */}
-          {description && (
-            <Text color="gray.400" fontSize="sm" mb={2}>
+        {/* 离线提示 */}
+        {checkOffline && isOffline && (
+          <Box
+            bg="orange.900"
+            border="1px solid"
+            borderColor="orange.600"
+            borderRadius="md"
+            p={2}
+            mb={4}
+          >
+            <Text color="orange.300" fontSize="sm">
+              当前处于离线状态，请检查网络连接
+            </Text>
+          </Box>
+        )}
+
+        {/* 错误原因列表 */}
+        {reasons.length > 0 && (
+          <Box
+            bg="gray.800"
+            borderRadius="md"
+            p={4}
+            mb={4}
+            textAlign="left"
+          >
+            <Text color="gray.400" fontSize="sm" mb={3}>
               {description}
             </Text>
-          )}
 
-          {/* 详情 */}
-          {detail && (
-            <Text color="gray.500" fontSize="sm" mb={4}>
-              {detailLabel}: {detail}
-            </Text>
-          )}
+            <VStack spacing={3} align="stretch">
+              {reasons.map((reason, index) => (
+                <HStack key={index} spacing={3} align="flex-start">
+                  <Text fontSize="lg" flexShrink={0}>
+                    {typeof reason.icon === 'string' ? reason.icon : reason.icon}
+                  </Text>
+                  <Box>
+                    <Text fontWeight="500" color="gray.300" fontSize="sm">
+                      {reason.title}
+                    </Text>
+                    <Text fontSize="xs" color="gray.500">
+                      {reason.description}
+                    </Text>
+                  </Box>
+                </HStack>
+              ))}
+            </VStack>
+          </Box>
+        )}
 
-          {/* 按钮组 */}
-          {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>
+        {/* 技术详情（可展开） */}
+        {techDetails && (
+          <Box mb={4}>
+            <Button
+              variant="ghost"
+              size="sm"
+              color="gray.500"
+              rightIcon={isTechOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+              onClick={onTechToggle}
+              _hover={{ bg: 'transparent', color: 'gray.400' }}
+            >
+              查看技术信息
+            </Button>
+            <Collapse in={isTechOpen}>
+              <Box
+                mt={2}
+                p={3}
+                bg="gray.800"
+                borderRadius="md"
+                fontFamily="monospace"
+                fontSize="xs"
+                color="gray.500"
+                textAlign="left"
+                overflowX="auto"
+              >
+                {techDetails.requestUrl && (
+                  <Text>请求URL: {techDetails.requestUrl}</Text>
+                )}
+                {techDetails.errorType && (
+                  <Text>错误类型: {techDetails.errorType}</Text>
+                )}
+                {techDetails.errorMessage && (
+                  <Text>错误信息: {techDetails.errorMessage}</Text>
+                )}
+                {techDetails.timestamp && (
+                  <Text>时间戳: {techDetails.timestamp}</Text>
+                )}
+                {techDetails.relatedId && (
+                  <Text>相关ID: {techDetails.relatedId}</Text>
+                )}
+                {techDetails.customFields &&
+                  Object.entries(techDetails.customFields).map(([key, value]) => (
+                    <Text key={key}>
+                      {key}: {value}
+                    </Text>
+                  ))}
+              </Box>
+            </Collapse>
+          </Box>
+        )}
+
+        {/* 按钮组 */}
+        {hasButtons && (
+          <HStack justify="center" spacing={3} mt={4}>
+            {actionButtons.map((btn, index) => (
+              <Button
+                key={index}
+                size="sm"
+                px={6}
+                fontWeight="medium"
+                {...getButtonStyle(btn.variant)}
+                onClick={btn.href ? () => navigate(btn.href!) : btn.onClick}
+              >
+                {btn.icon && <Text as="span" mr={2}>{btn.icon}</Text>}
+                {btn.label}
+              </Button>
+            ))}
+          </HStack>
+        )}
+
+        {/* 底部帮助提示 */}
+        <Text fontSize="xs" color="gray.500" mt={6}>
+          点击右下角
+          <Text as="span" color={GOLD_COLOR} fontWeight="medium">
+            联系客服
+          </Text>
+        </Text>
+      </Box>
     </Box>
   );
 };