修复发帖长文布局与手机下拉刷新,发版后自动重载失效 chunk,并整理站务文案。
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
60
frontend/src/components/AppRouteError.tsx
Normal file
60
frontend/src/components/AppRouteError.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { useEffect } from 'react';
|
||||
import { isRouteErrorResponse, useRouteError } from 'react-router-dom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { isChunkLoadError, reloadForStaleChunk } from '../utils/chunkLoad';
|
||||
|
||||
function errorMessage(error: unknown): string {
|
||||
if (isRouteErrorResponse(error)) {
|
||||
if (typeof error.data === 'string' && error.data) return error.data;
|
||||
if (error.data && typeof error.data === 'object' && 'message' in error.data) {
|
||||
const m = (error.data as { message?: unknown }).message;
|
||||
if (typeof m === 'string' && m) return m;
|
||||
}
|
||||
return error.statusText || `错误 ${error.status}`;
|
||||
}
|
||||
if (error instanceof Error) return error.message;
|
||||
return String(error ?? '未知错误');
|
||||
}
|
||||
|
||||
/**
|
||||
* React Router 路由级错误页。
|
||||
* 发版后动态模块 404 时自动刷新;其它错误给出手动刷新入口。
|
||||
*/
|
||||
export default function AppRouteError() {
|
||||
const error = useRouteError();
|
||||
const chunkMiss = isChunkLoadError(error);
|
||||
|
||||
useEffect(() => {
|
||||
if (chunkMiss) reloadForStaleChunk();
|
||||
}, [chunkMiss]);
|
||||
|
||||
if (chunkMiss) {
|
||||
return (
|
||||
<div className="error-page-shell">
|
||||
<div className="error-page">
|
||||
<div className="error-page__code" aria-hidden>…</div>
|
||||
<h1 className="error-page__title">正在更新页面</h1>
|
||||
<p className="error-page__desc">检测到程序已更新,正在自动刷新以加载最新版本…</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="error-page-shell">
|
||||
<div className="error-page">
|
||||
<div className="error-page__code" aria-hidden>500</div>
|
||||
<h1 className="error-page__title">页面加载出错</h1>
|
||||
<p className="error-page__desc">{errorMessage(error)}</p>
|
||||
<div className="error-page__actions">
|
||||
<Button size="sm" onClick={() => window.location.reload()}>
|
||||
刷新页面
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={() => { window.location.href = '/'; }}>
|
||||
返回首页
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user