Logan.Li
b0d0e3a5f3
- Extend AppLanguage to 7 locales: zh-CN, zh-TW, en, ja, ko, vi, ru - Auto-detect system language via navigator.languages; fallback to English - Add BCP47 locale mapping for date formatting and sorting - Create 50 translation JSON files (5 languages × 10 namespaces, 1137 keys each) - Update language selector with native language names - Extend locale key parity test to cover all 7 languages (70 assertions) - Add VNC/RDP desktop, serial terminal, AI agent, port forwarding, and SFTP features - Add credential encryption, host metrics, session backup crypto, and zmodem bridge - Update Rust backend: desktop services, host metrics, SSH/SFTP enhancements
57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import { handleError } from '../../utils/error-handler'
|
|
|
|
interface DefaultFallbackProps {
|
|
error: Error
|
|
onReset: () => void
|
|
}
|
|
|
|
export default function DefaultFallback({ error, onReset }: DefaultFallbackProps) {
|
|
const { t } = useTranslation('common')
|
|
const appError = handleError(error)
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-dark-900 p-4">
|
|
<div className="max-w-md w-full bg-dark-800 rounded-xl p-6 border border-dark-700">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-content-primary">{t('error.title')}</h2>
|
|
<p className="text-sm text-txt-muted">{t('error.body')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-dark-900 rounded-lg p-4 mb-4">
|
|
<p className="text-sm text-content-secondary mb-2">{appError.message}</p>
|
|
{appError.recoverable && (
|
|
<p className="text-xs text-green-400">{t('error.recoverable')}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={onReset}
|
|
className="flex-1 px-4 py-2 bg-accent-blue hover:bg-blue-600 text-content-primary rounded-lg transition-colors text-sm font-medium"
|
|
>
|
|
{t('error.refreshPage')}
|
|
</button>
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
className="px-4 py-2 bg-dark-700 hover:bg-dark-600 text-content-secondary rounded-lg transition-colors text-sm"
|
|
>
|
|
{t('error.restartApp')}
|
|
</button>
|
|
</div>
|
|
|
|
<p className="mt-4 text-xs text-txt-faint text-center">
|
|
{t('error.supportHint')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|