refactor: 移除 PageSkeleton 组件及相关测试,更新 RouterContainer 以简化加载逻辑
This commit is contained in:
@@ -1,41 +0,0 @@
|
|||||||
/**
|
|
||||||
* PageSkeleton 组件 - 页面加载骨架屏
|
|
||||||
*
|
|
||||||
* 用于 Suspense fallback 和初始加载状态,提供平滑的视觉过渡
|
|
||||||
* 避免白屏闪烁,减少布局偏移
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 工具页面骨架屏
|
|
||||||
*/
|
|
||||||
function ToolPageSkeleton() {
|
|
||||||
return (
|
|
||||||
<div className="p-5">
|
|
||||||
{/* 标题区域 */}
|
|
||||||
<div className="w-44 h-7 bg-muted rounded animate-pulse mb-4" />
|
|
||||||
|
|
||||||
{/* 输入区域 */}
|
|
||||||
<div className="w-full h-[120px] bg-muted rounded-xl animate-pulse mb-4" />
|
|
||||||
|
|
||||||
{/* 控制栏 */}
|
|
||||||
<div className="flex gap-2 mb-4">
|
|
||||||
<div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
|
|
||||||
<div className="w-20 h-9 bg-muted rounded-lg animate-pulse" />
|
|
||||||
<div className="flex-1" />
|
|
||||||
<div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 结果区域 */}
|
|
||||||
<div className="w-full h-[160px] bg-muted rounded-xl animate-pulse" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页面加载骨架屏
|
|
||||||
*/
|
|
||||||
export default function PageSkeleton() {
|
|
||||||
return <ToolPageSkeleton />;
|
|
||||||
}
|
|
||||||
|
|
||||||
PageSkeleton.displayName = 'PageSkeleton';
|
|
||||||
@@ -5,8 +5,8 @@
|
|||||||
## 组件列表
|
## 组件列表
|
||||||
|
|
||||||
| 组件 | 用途 |
|
| 组件 | 用途 |
|
||||||
| ----------------------- | ------------------------------------------------------------------------------ |
|
| ----------------------- | ------------------------------------------------------------------------------------------------------ |
|
||||||
| `RouterContainer.tsx` | 路由容器,根据当前路由动态渲染对应页面组件,集成错误边界和骨架屏 |
|
| `RouterContainer.tsx` | 路由容器,根据当前路由动态渲染对应页面组件,集成错误边界 |
|
||||||
| `SwitchButtonGroup.tsx` | 通用切换按钮组,支持 `small/medium/large` 三种尺寸,用于页面子模式切换 |
|
| `SwitchButtonGroup.tsx` | 通用切换按钮组,支持 `small/medium/large` 三种尺寸,用于页面子模式切换 |
|
||||||
| `EmptyPlaceholder.tsx` | 虚线边框空状态占位,统一工具页「暂无结果」提示样式 |
|
| `EmptyPlaceholder.tsx` | 虚线边框空状态占位,统一工具页「暂无结果」提示样式 |
|
||||||
| `TextInputArea.tsx` | 增强文本输入区域,支持校验规则、工具栏操作、字符计数、清空 |
|
| `TextInputArea.tsx` | 增强文本输入区域,支持校验规则、工具栏操作、字符计数、清空 |
|
||||||
@@ -17,7 +17,6 @@
|
|||||||
| `GlobalSnackbar.tsx` | 全局消息提示组件 + Context Provider,支持受控/Hook/全局单例三种使用方式 |
|
| `GlobalSnackbar.tsx` | 全局消息提示组件 + Context Provider,支持受控/Hook/全局单例三种使用方式 |
|
||||||
| `ErrorBoundary.tsx` | 全局错误边界(类组件),捕获子组件树 JS 错误并展示友好错误页面 |
|
| `ErrorBoundary.tsx` | 全局错误边界(类组件),捕获子组件树 JS 错误并展示友好错误页面 |
|
||||||
| `PageErrorBoundary.tsx` | 页面级错误边界,适配 shadcn 暗黑模式,支持 `resetKey` 自动恢复 |
|
| `PageErrorBoundary.tsx` | 页面级错误边界,适配 shadcn 暗黑模式,支持 `resetKey` 自动恢复 |
|
||||||
| `PageSkeleton.tsx` | 页面骨架屏,提供 `dashboard` 和 `tool` 两种变体,用于 Suspense fallback |
|
|
||||||
|
|
||||||
## 使用约定
|
## 使用约定
|
||||||
|
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import { useRouter } from '@/providers/RouterProvider';
|
|||||||
import type { PageType } from '@/types/storage';
|
import type { PageType } from '@/types/storage';
|
||||||
import { type ComponentType, useEffect, useState } from 'react';
|
import { type ComponentType, useEffect, useState } from 'react';
|
||||||
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
||||||
import PageSkeleton from '@/components/PageSkeleton';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { AlertTriangle } from 'lucide-react';
|
import { AlertTriangle } from 'lucide-react';
|
||||||
|
|
||||||
@@ -30,7 +29,7 @@ function LoadedPage({ pageKey }: { pageKey: PageType }) {
|
|||||||
}, [pageKey]);
|
}, [pageKey]);
|
||||||
|
|
||||||
if (!Page) {
|
if (!Page) {
|
||||||
return <PageSkeleton />;
|
return <div className="flex-1" aria-hidden="true" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return <Page />;
|
return <Page />;
|
||||||
|
|||||||
@@ -1,32 +0,0 @@
|
|||||||
import { describe, expect, it } from 'vitest';
|
|
||||||
import { render } from '@testing-library/react';
|
|
||||||
import PageSkeleton from '@/components/PageSkeleton';
|
|
||||||
|
|
||||||
describe('PageSkeleton 组件', () => {
|
|
||||||
describe('渲染测试', () => {
|
|
||||||
it('应渲染工具页面骨架', () => {
|
|
||||||
const { container } = render(<PageSkeleton />);
|
|
||||||
|
|
||||||
const skeletons = container.querySelectorAll('.animate-pulse');
|
|
||||||
expect(skeletons.length).toBeGreaterThan(0);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('布局结构测试', () => {
|
|
||||||
it('工具骨架屏应有内边距', () => {
|
|
||||||
const { container } = render(<PageSkeleton />);
|
|
||||||
const toolContainer = container.firstChild as HTMLElement;
|
|
||||||
|
|
||||||
expect(toolContainer).toHaveClass('p-5');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('骨架屏元素测试', () => {
|
|
||||||
it('工具骨架屏应包含动画脉冲效果', () => {
|
|
||||||
const { container } = render(<PageSkeleton />);
|
|
||||||
|
|
||||||
const skeletons = container.querySelectorAll('.animate-pulse');
|
|
||||||
expect(skeletons.length).toBeGreaterThan(0);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -11,7 +11,6 @@ export default {
|
|||||||
'./src/components/ErrorBoundary.tsx',
|
'./src/components/ErrorBoundary.tsx',
|
||||||
'./src/components/ErrorFallback.tsx',
|
'./src/components/ErrorFallback.tsx',
|
||||||
'./src/components/PageErrorBoundary.tsx',
|
'./src/components/PageErrorBoundary.tsx',
|
||||||
'./src/components/PageSkeleton.tsx',
|
|
||||||
'./src/components/ui/button.tsx',
|
'./src/components/ui/button.tsx',
|
||||||
'./src/components/ui/input.tsx',
|
'./src/components/ui/input.tsx',
|
||||||
'./src/components/ui/sonner.tsx',
|
'./src/components/ui/sonner.tsx',
|
||||||
|
|||||||
Reference in New Issue
Block a user