feat(frontend): add frontend-v2 modular architecture (Task 17)
- React 19 + TypeScript + Vite - Module registration mechanism with dynamic loading - Permission management system (basic/advanced/premium) - Route guards for access control - Error boundaries for module isolation - 6 business module placeholders (AIA/ASL/PKB/DC/SSA/ST) - Top navigation layout - Tailwind CSS 3 + Ant Design 5
This commit is contained in:
215
frontend-v2/src/framework/modules/ModuleErrorFallback.tsx
Normal file
215
frontend-v2/src/framework/modules/ModuleErrorFallback.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import { ErrorInfo } from 'react'
|
||||
import { Result, Button, Collapse, Typography } from 'antd'
|
||||
import { BugOutlined, ReloadOutlined, HomeOutlined } from '@ant-design/icons'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
|
||||
/**
|
||||
* 模块错误提示组件
|
||||
*
|
||||
* @description
|
||||
* 当模块加载或运行出错时显示的友好错误页面
|
||||
* 提供重试和返回首页的操作
|
||||
*
|
||||
* @version Week 2 Day 7 - 任务17
|
||||
*/
|
||||
|
||||
const { Paragraph, Text } = Typography
|
||||
|
||||
interface ModuleErrorFallbackProps {
|
||||
/** 错误对象 */
|
||||
error: Error | null
|
||||
/** 错误详细信息 */
|
||||
errorInfo?: ErrorInfo | null
|
||||
/** 重置错误状态的回调 */
|
||||
onReset?: () => void
|
||||
/** 模块名称 */
|
||||
moduleName?: string
|
||||
}
|
||||
|
||||
const ModuleErrorFallback = ({
|
||||
error,
|
||||
errorInfo,
|
||||
onReset,
|
||||
moduleName,
|
||||
}: ModuleErrorFallbackProps) => {
|
||||
const navigate = useNavigate()
|
||||
|
||||
// 是否显示详细错误信息（开发环境显示，生产环境隐藏）
|
||||
const isDevelopment = import.meta.env?.DEV ?? false
|
||||
|
||||
/**
|
||||
* 处理重试
|
||||
*/
|
||||
const handleRetry = () => {
|
||||
if (onReset) {
|
||||
onReset()
|
||||
} else {
|
||||
// 如果没有提供onReset，刷新页面
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 返回首页
|
||||
*/
|
||||
const handleGoHome = () => {
|
||||
navigate('/')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex items-center justify-center bg-gray-50 p-8">
|
||||
<div className="max-w-2xl w-full">
|
||||
<Result
|
||||
status="error"
|
||||
icon={<BugOutlined style={{ fontSize: 72, color: '#ff4d4f' }} />}
|
||||
title={
|
||||
<span className="text-2xl">
|
||||
{moduleName ? `${moduleName}模块` : '页面'}加载失败
|
||||
</span>
|
||||
}
|
||||
subTitle={
|
||||
<div className="space-y-3 mt-4">
|
||||
<Paragraph className="text-gray-600">
|
||||
抱歉，模块加载时遇到了一些问题。这可能是由于网络问题或代码错误导致的。
|
||||
</Paragraph>
|
||||
<Paragraph className="text-gray-500 text-sm">
|
||||
您可以尝试重新加载，或者返回首页。如果问题持续存在，请联系技术支持。
|
||||
</Paragraph>
|
||||
</div>
|
||||
}
|
||||
extra={
|
||||
<div className="flex gap-3 justify-center">
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={handleRetry}
|
||||
size="large"
|
||||
>
|
||||
重新加载
|
||||
</Button>
|
||||
<Button
|
||||
icon={<HomeOutlined />}
|
||||
onClick={handleGoHome}
|
||||
size="large"
|
||||
>
|
||||
返回首页
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 开发环境：显示详细错误信息 */}
|
||||
{isDevelopment && error && (
|
||||
<div className="mt-8">
|
||||
<Collapse
|
||||
ghost
|
||||
items={[
|
||||
{
|
||||
key: 'error-details',
|
||||
label: (
|
||||
<Text type="secondary" className="text-sm">
|
||||
🔧 开发模式：查看错误详情
|
||||
</Text>
|
||||
),
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
{/* 错误消息 */}
|
||||
<div>
|
||||
<Text strong className="text-red-600">错误消息：</Text>
|
||||
<Paragraph
|
||||
code
|
||||
copyable
|
||||
className="mt-2 bg-red-50 p-3 rounded"
|
||||
>
|
||||
{error.toString()}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* 错误堆栈 */}
|
||||
{error.stack && (
|
||||
<div>
|
||||
<Text strong className="text-red-600">错误堆栈：</Text>
|
||||
<Paragraph
|
||||
code
|
||||
copyable
|
||||
className="mt-2 bg-gray-50 p-3 rounded text-xs overflow-x-auto"
|
||||
style={{ whiteSpace: 'pre-wrap' }}
|
||||
>
|
||||
{error.stack}
|
||||
</Paragraph>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 组件堆栈 */}
|
||||
{errorInfo?.componentStack && (
|
||||
<div>
|
||||
<Text strong className="text-red-600">组件堆栈：</Text>
|
||||
<Paragraph
|
||||
code
|
||||
copyable
|
||||
className="mt-2 bg-gray-50 p-3 rounded text-xs overflow-x-auto"
|
||||
style={{ whiteSpace: 'pre-wrap' }}
|
||||
>
|
||||
{errorInfo.componentStack}
|
||||
</Paragraph>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 时间戳 */}
|
||||
<div>
|
||||
<Text type="secondary" className="text-xs">
|
||||
错误时间：{new Date().toLocaleString('zh-CN')}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生产环境：错误ID提示 */}
|
||||
{!isDevelopment && (
|
||||
<div className="mt-6 text-center">
|
||||
<Text type="secondary" className="text-xs">
|
||||
错误ID: {Date.now().toString(36)}
|
||||
</Text>
|
||||
<br />
|
||||
<Text type="secondary" className="text-xs">
|
||||
如需技术支持，请提供此错误ID
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ModuleErrorFallback
|
||||
|
||||
/**
|
||||
* 🎨 设计说明：
|
||||
*
|
||||
* 1. 用户体验：
|
||||
* - ✅ 友好的错误提示（不显示技术术语）
|
||||
* - ✅ 明确的操作指引（重试/返回首页）
|
||||
* - ✅ 视觉上与整体风格一致（Ant Design Result）
|
||||
*
|
||||
* 2. 开发体验：
|
||||
* - ✅ 开发环境显示详细错误（方便调试）
|
||||
* - ✅ 错误信息可复制（方便分享给团队）
|
||||
* - ✅ 显示完整堆栈（快速定位问题）
|
||||
*
|
||||
* 3. 生产环境：
|
||||
* - ✅ 隐藏技术细节（安全性）
|
||||
* - ✅ 提供错误ID（方便追踪）
|
||||
* - ✅ 引导用户联系支持
|
||||
*
|
||||
* 4. 后续优化：
|
||||
* - [ ] 添加"反馈问题"按钮
|
||||
* - [ ] 集成错误报告系统
|
||||
* - [ ] 记录用户操作路径
|
||||
* - [ ] 自动重试机制（网络错误）
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user