fix: 提升管理端启动与导航稳定性
- 等待初始路由就绪并提供可恢复的启动失败页面 - 收敛失效登录导航并按需加载 SVG 图标资源
This commit is contained in:
45
easyflow-ui-admin/app/src/startup-error.ts
Normal file
45
easyflow-ui-admin/app/src/startup-error.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
interface RenderStartupErrorOptions {
|
||||
reload?: () => void;
|
||||
root?: HTMLElement | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 在 Vue 应用尚未挂载时展示可恢复的启动错误,避免异常后只剩白屏。
|
||||
*/
|
||||
function renderStartupError(options: RenderStartupErrorOptions = {}) {
|
||||
const root = options.root ?? document.querySelector<HTMLElement>('#app');
|
||||
if (!root) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const container = document.createElement('main');
|
||||
container.className = 'startup-error';
|
||||
container.setAttribute('role', 'alert');
|
||||
|
||||
const content = document.createElement('div');
|
||||
content.className = 'startup-error__content';
|
||||
|
||||
const title = document.createElement('h1');
|
||||
title.className = 'startup-error__title';
|
||||
title.textContent = '页面加载失败';
|
||||
|
||||
const description = document.createElement('p');
|
||||
description.className = 'startup-error__description';
|
||||
description.textContent = '请刷新后重试';
|
||||
|
||||
const retryButton = document.createElement('button');
|
||||
retryButton.className = 'startup-error__retry';
|
||||
retryButton.type = 'button';
|
||||
retryButton.textContent = '重新加载';
|
||||
retryButton.addEventListener('click', () => {
|
||||
(options.reload ?? (() => window.location.reload()))();
|
||||
});
|
||||
|
||||
content.append(title, description, retryButton);
|
||||
container.append(content);
|
||||
root.replaceChildren(container);
|
||||
retryButton.focus();
|
||||
return true;
|
||||
}
|
||||
|
||||
export { renderStartupError };
|
||||
Reference in New Issue
Block a user