Tolan/frontend/src/pages/ErrorPage.tsx

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { px2vw, px2vh, px2fluidFontSize } from '@/utils/viewport';
import lumiImage from '@/assets/Lumi-image.png';
import './WelcomePage.css';

/**
 * 错误页面组件
 * 显示友好的错误信息，并提供返回选项
 */
export const ErrorPage: React.FC = () => {
  const navigate = useNavigate();
  
  // 跳转到欢迎页面
  const handleRefresh = () => {
    navigate('/welcome');
  };

  return (
    <div className="mobile-container fixed top-0 left-0 animate-fade-in">
      <div className="content-card safe-area-inset relative flex flex-col h-screen overflow-hidden">
        {/* 内容容器 - 与 WelcomePage 的 welcome-content 类似 */}
        <div className="welcome-content" style={{ position: 'relative', width: '100%', minHeight: 'calc(var(--vh, 1vh) * 100)' }}>
          {/* 错误文字和按钮容器 - 位置与 hello 图片一致 */}
          <div
            style={{
              position: 'absolute',
              top: '19%',
              left: '12%',
              width: '65.33%',
            }}
          >
            {/* 错误文字 */}
            <h1
              className="font-medium text-white"
              style={{
                fontSize: px2fluidFontSize(31),
                lineHeight: px2vh(50),
                whiteSpace: 'normal',
                wordBreak: 'keep-all',
                margin: 0,
                marginBottom: px2vh(20),
              }}
            >
              出错啦，请刷新尝试
            </h1>

            {/* 刷新尝试按钮 - 在文字下方 */}
            <button
              type="button"
              onClick={handleRefresh}
              className="relative text-white font-semibold tracking-[0.5px] transition-all touch-manipulation"
              style={{
                width: px2vw(163),
                height: px2vh(56),
                borderRadius: px2vw(100),
                backgroundColor: 'transparent',
                border: 'none',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginTop: px2vh(20),
              }}
              aria-label="点击刷新尝试"
            >
              → 点击刷新尝试
            </button>
          </div>
        </div>
        
        {/* Lumi 图片 - 左下角，与 WelcomePage 样式一致 */}
        <img 
          src={lumiImage} 
          alt="Lumi"
          className="welcome-lumi"
        />
      </div>
    </div>
  );
};