恢复到没有加载效果的 除了效果别的还都是新的
This commit is contained in:
ylj20011123
parent
b07d192d20
commit
14b175f28c
@ -1,67 +0,0 @@
|
|||||||
// 简化版页面过渡动画
|
|
||||||
.simple-page-transition {
|
|
||||||
// 默认不播放动画，只有带animate类时才播放
|
|
||||||
&.animate {
|
|
||||||
animation: pageEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
// 移除will-change避免HMR时样式冲突
|
|
||||||
// will-change: opacity, transform;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 动画结束后重置will-change，避免持续占用GPU资源
|
|
||||||
&.animate:not(:hover):not(:focus) {
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pageEnter {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(30px) scale(0.96);
|
|
||||||
// filter: blur(4px); // 注释掉filter属性，可能导致HMR问题
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0) scale(1);
|
|
||||||
// filter: blur(0); // 注释掉filter属性
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 复杂版页面过渡动画
|
|
||||||
.page-transition {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.transition-content {
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&.fadeIn {
|
|
||||||
animation: fadeIn 0.3s ease-in-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.fadeOut {
|
|
||||||
animation: fadeOut 0.3s ease-in-out forwards;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeOut {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-10px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import { CSSTransition, TransitionGroup } from 'react-transition-group';
|
|
||||||
import { useLocation } from 'umi';
|
|
||||||
import './index.less';
|
|
||||||
|
|
||||||
export interface PageTransitionProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
type?: 'fade' | 'slide' | 'scale';
|
|
||||||
duration?: number;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const PageTransition: React.FC<PageTransitionProps> = ({
|
|
||||||
children,
|
|
||||||
type = 'fade',
|
|
||||||
duration = 300,
|
|
||||||
className = '',
|
|
||||||
}) => {
|
|
||||||
const location = useLocation();
|
|
||||||
const [displayLocation, setDisplayLocation] = useState(location);
|
|
||||||
const [transitionStage, setTransitionStage] = useState('fadeIn');
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (location !== displayLocation) setTransitionStage('fadeOut');
|
|
||||||
}, [location, displayLocation]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`page-transition ${type}-transition ${className}`}>
|
|
||||||
<div
|
|
||||||
className={`transition-content ${transitionStage}`}
|
|
||||||
onAnimationEnd={() => {
|
|
||||||
if (transitionStage === 'fadeOut') {
|
|
||||||
setDisplayLocation(location);
|
|
||||||
setTransitionStage('fadeIn');
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 简化版本 - 禁用所有动画
|
|
||||||
export const SimplePageTransition: React.FC<{
|
|
||||||
children: React.ReactNode;
|
|
||||||
className?: string;
|
|
||||||
enableAnimation?: boolean;
|
|
||||||
onAnimationEnd?: () => void;
|
|
||||||
}> = ({
|
|
||||||
children,
|
|
||||||
className = '',
|
|
||||||
enableAnimation = false, // 强制禁用动画
|
|
||||||
onAnimationEnd,
|
|
||||||
}) => {
|
|
||||||
// 立即执行回调，不等待动画
|
|
||||||
const handleAnimationEnd = () => {
|
|
||||||
if (onAnimationEnd) {
|
|
||||||
onAnimationEnd();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 立即执行动画结束回调
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (onAnimationEnd) {
|
|
||||||
onAnimationEnd();
|
|
||||||
}
|
|
||||||
}, [onAnimationEnd]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`simple-page-transition ${className}`}>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PageTransition;
|
|
||||||
@ -1,163 +0,0 @@
|
|||||||
.skeleton-page-container {
|
|
||||||
padding: 24px;
|
|
||||||
min-height: 100vh;
|
|
||||||
background: #f5f5f5;
|
|
||||||
|
|
||||||
.skeleton-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
padding: 16px 24px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
||||||
|
|
||||||
.skeleton-header-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-content {
|
|
||||||
.skeleton-filter-bar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding: 16px 24px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-table-card {
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-table-container {
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
.skeleton-table-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 12px 0;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-table-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 12px 0;
|
|
||||||
border-bottom: 1px solid #f9f9f9;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-card-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
||||||
gap: 16px;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
.skeleton-card {
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-form-container {
|
|
||||||
padding: 24px;
|
|
||||||
|
|
||||||
.skeleton-form-title {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
padding-bottom: 16px;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-form-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
.skeleton-form-label {
|
|
||||||
width: 120px;
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-form-control {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-form-actions {
|
|
||||||
margin-top: 32px;
|
|
||||||
padding-top: 16px;
|
|
||||||
border-top: 1px solid #f0f0f0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 骨架屏动画优化
|
|
||||||
.ant-skeleton-element {
|
|
||||||
.ant-skeleton-input {
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-skeleton-button {
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 响应式设计
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.skeleton-page-container {
|
|
||||||
padding: 12px;
|
|
||||||
|
|
||||||
.skeleton-header {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
.skeleton-header-actions {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-content {
|
|
||||||
.skeleton-filter-bar {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
.ant-skeleton-input {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-card-container {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-form-container {
|
|
||||||
padding: 12px;
|
|
||||||
|
|
||||||
.skeleton-form-row {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
.skeleton-form-label {
|
|
||||||
width: 100%;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Skeleton, Card } from 'antd';
|
|
||||||
import './index.less';
|
|
||||||
|
|
||||||
interface SkeletonLoadingProps {
|
|
||||||
type?: 'page' | 'table' | 'card' | 'form';
|
|
||||||
rows?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const SkeletonLoading: React.FC<SkeletonLoadingProps> = ({
|
|
||||||
type = 'page',
|
|
||||||
rows = 3
|
|
||||||
}) => {
|
|
||||||
const renderPageSkeleton = () => (
|
|
||||||
<div className="skeleton-page-container">
|
|
||||||
<div className="skeleton-header">
|
|
||||||
<Skeleton.Input style={{ width: 200, height: 32 }} active />
|
|
||||||
<div className="skeleton-header-actions">
|
|
||||||
<Skeleton.Button style={{ width: 80 }} active />
|
|
||||||
<Skeleton.Button style={{ width: 80 }} active />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="skeleton-content">
|
|
||||||
<div className="skeleton-filter-bar">
|
|
||||||
<Skeleton.Input style={{ width: 150, marginRight: 16 }} active />
|
|
||||||
<Skeleton.Input style={{ width: 150, marginRight: 16 }} active />
|
|
||||||
<Skeleton.Button style={{ width: 60 }} active />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card className="skeleton-table-card">
|
|
||||||
<Skeleton active paragraph={{ rows: 6 }} />
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderTableSkeleton = () => (
|
|
||||||
<div className="skeleton-table-container">
|
|
||||||
<div className="skeleton-table-header">
|
|
||||||
{Array.from({ length: 5 }).map((_, index) => (
|
|
||||||
<Skeleton.Input
|
|
||||||
key={index}
|
|
||||||
style={{ width: `${Math.random() * 50 + 80}px`, marginRight: 16 }}
|
|
||||||
active
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
{Array.from({ length: rows }).map((_, index) => (
|
|
||||||
<div key={index} className="skeleton-table-row">
|
|
||||||
{Array.from({ length: 5 }).map((_, cellIndex) => (
|
|
||||||
<Skeleton.Input
|
|
||||||
key={cellIndex}
|
|
||||||
style={{ width: `${Math.random() * 60 + 60}px`, marginRight: 16 }}
|
|
||||||
active
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderCardSkeleton = () => (
|
|
||||||
<div className="skeleton-card-container">
|
|
||||||
{Array.from({ length: rows }).map((_, index) => (
|
|
||||||
<Card key={index} className="skeleton-card">
|
|
||||||
<Skeleton active avatar paragraph={{ rows: 2 }} />
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderFormSkeleton = () => (
|
|
||||||
<div className="skeleton-form-container">
|
|
||||||
<Card>
|
|
||||||
<div className="skeleton-form-title">
|
|
||||||
<Skeleton.Input style={{ width: 150 }} active />
|
|
||||||
</div>
|
|
||||||
{Array.from({ length: rows }).map((_, index) => (
|
|
||||||
<div key={index} className="skeleton-form-row">
|
|
||||||
<div className="skeleton-form-label">
|
|
||||||
<Skeleton.Input style={{ width: 80 }} active />
|
|
||||||
</div>
|
|
||||||
<div className="skeleton-form-control">
|
|
||||||
<Skeleton.Input style={{ width: '100%' }} active />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<div className="skeleton-form-actions">
|
|
||||||
<Skeleton.Button style={{ width: 80, marginRight: 8 }} active />
|
|
||||||
<Skeleton.Button style={{ width: 80 }} active />
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
switch (type) {
|
|
||||||
case 'table':
|
|
||||||
return renderTableSkeleton();
|
|
||||||
case 'card':
|
|
||||||
return renderCardSkeleton();
|
|
||||||
case 'form':
|
|
||||||
return renderFormSkeleton();
|
|
||||||
case 'page':
|
|
||||||
default:
|
|
||||||
return renderPageSkeleton();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SkeletonLoading;
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import { useLocation } from 'umi';
|
|
||||||
import SkeletonLoading from '../SkeletonLoading';
|
|
||||||
import { routePreloader } from '@/utils/routePreloader';
|
|
||||||
|
|
||||||
interface SmartLoadingProps {
|
|
||||||
fallback?: React.ReactNode;
|
|
||||||
enablePreload?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 智能加载组件
|
|
||||||
* 根据路由类型自动选择合适的骨架屏，并支持路由预加载
|
|
||||||
*/
|
|
||||||
const SmartLoading: React.FC<SmartLoadingProps> = ({
|
|
||||||
fallback,
|
|
||||||
enablePreload = true
|
|
||||||
}) => {
|
|
||||||
const [loadingType, setLoadingType] = useState<'page' | 'table' | 'form' | 'card'>('page');
|
|
||||||
const [shouldShow, setShouldShow] = useState(false);
|
|
||||||
const [location, setLocation] = useState<any>(null);
|
|
||||||
|
|
||||||
// 安全获取location，避免在路由未准备好时出错
|
|
||||||
try {
|
|
||||||
const currentLocation = useLocation();
|
|
||||||
if (!location) {
|
|
||||||
setLocation(currentLocation);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// 如果useLocation失败，使用window.location作为fallback
|
|
||||||
if (!location && typeof window !== 'undefined') {
|
|
||||||
setLocation({ pathname: window.location.pathname });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// 对于页面切换，立即显示骨架屏，但对于初始加载延迟显示
|
|
||||||
const isInitialLoad = !location?.pathname || location.pathname === '/';
|
|
||||||
|
|
||||||
if (isInitialLoad) {
|
|
||||||
// 初始加载时延迟显示，避免刷新时闪烁
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
setShouldShow(true);
|
|
||||||
}, 200);
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
} else {
|
|
||||||
// 页面切换时立即显示，保持骨架屏效果
|
|
||||||
setShouldShow(true);
|
|
||||||
}
|
|
||||||
}, [location?.pathname]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!location?.pathname) return;
|
|
||||||
|
|
||||||
// 根据路径判断页面类型，选择合适的骨架屏
|
|
||||||
const path = location.pathname;
|
|
||||||
|
|
||||||
if (path.includes('list') || path.includes('table')) {
|
|
||||||
setLoadingType('table');
|
|
||||||
} else if (path.includes('form') || path.includes('edit') || path.includes('add')) {
|
|
||||||
setLoadingType('form');
|
|
||||||
} else if (path.includes('card') || path.includes('dashboard')) {
|
|
||||||
setLoadingType('card');
|
|
||||||
} else {
|
|
||||||
setLoadingType('page');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 预加载相关路由（降低优先级，避免影响主流程）
|
|
||||||
if (enablePreload) {
|
|
||||||
setTimeout(() => {
|
|
||||||
routePreloader.preloadBasedOnUserBehavior(path);
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
}, [location?.pathname, enablePreload]);
|
|
||||||
|
|
||||||
// 如果提供了自定义fallback，使用它
|
|
||||||
if (fallback) {
|
|
||||||
return <>{fallback}</>;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 延迟显示，避免闪烁
|
|
||||||
if (!shouldShow) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 根据页面类型返回对应的骨架屏
|
|
||||||
return <SkeletonLoading type={loadingType} rows={getRowsByType(loadingType)} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 根据加载类型获取合适的行数
|
|
||||||
*/
|
|
||||||
function getRowsByType(type: string): number {
|
|
||||||
switch (type) {
|
|
||||||
case 'table':
|
|
||||||
return 8; // 表格通常显示更多行
|
|
||||||
case 'form':
|
|
||||||
return 5; // 表单通常5-6个字段
|
|
||||||
case 'card':
|
|
||||||
return 6; // 卡片网格通常6个
|
|
||||||
case 'page':
|
|
||||||
default:
|
|
||||||
return 4; // 默认4行
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SmartLoading;
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
.tab-virtualizer {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&.loading {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.unloaded {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 400px;
|
|
||||||
background: #fafafa;
|
|
||||||
|
|
||||||
.unloaded-placeholder {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
|
|
||||||
.placeholder-icon {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder-content {
|
|
||||||
h3 {
|
|
||||||
color: #666;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder-desc {
|
|
||||||
color: #999;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.last-access-time {
|
|
||||||
color: #bbb;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reload-btn {
|
|
||||||
min-width: 120px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.loaded {
|
|
||||||
// 正常加载状态的样式
|
|
||||||
animation: fadeIn 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,96 +0,0 @@
|
|||||||
import React, { useEffect, useRef } from 'react';
|
|
||||||
import { Button } from 'antd';
|
|
||||||
import { ReloadOutlined, ClockCircleOutlined } from '@ant-design/icons';
|
|
||||||
import PageLoading from '../PageLoading';
|
|
||||||
import './index.less';
|
|
||||||
|
|
||||||
export interface TabVirtualizerProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
tabKey: string;
|
|
||||||
isActive: boolean;
|
|
||||||
isLoaded: boolean;
|
|
||||||
isLoading: boolean;
|
|
||||||
lastAccessTime?: number;
|
|
||||||
onReload: (tabKey: string) => void;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const TabVirtualizer: React.FC<TabVirtualizerProps> = ({
|
|
||||||
children,
|
|
||||||
tabKey,
|
|
||||||
isActive,
|
|
||||||
isLoaded,
|
|
||||||
isLoading,
|
|
||||||
lastAccessTime,
|
|
||||||
onReload,
|
|
||||||
className = '',
|
|
||||||
}) => {
|
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
// 格式化最后访问时间
|
|
||||||
const formatLastAccessTime = (timestamp?: number) => {
|
|
||||||
if (!timestamp) return '';
|
|
||||||
const now = Date.now();
|
|
||||||
const diff = now - timestamp;
|
|
||||||
const minutes = Math.floor(diff / 60000);
|
|
||||||
const hours = Math.floor(minutes / 60);
|
|
||||||
|
|
||||||
if (hours > 0) {
|
|
||||||
return `${hours}小时前访问`;
|
|
||||||
} else if (minutes > 0) {
|
|
||||||
return `${minutes}分钟前访问`;
|
|
||||||
} else {
|
|
||||||
return '刚刚访问';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 如果正在加载，显示加载状态
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<div className={`tab-virtualizer loading ${className}`} ref={containerRef}>
|
|
||||||
<PageLoading />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果未加载（被卸载），显示占位符
|
|
||||||
if (!isLoaded) {
|
|
||||||
return (
|
|
||||||
<div className={`tab-virtualizer unloaded ${className}`} ref={containerRef}>
|
|
||||||
<div className="unloaded-placeholder">
|
|
||||||
<div className="placeholder-icon">
|
|
||||||
<ClockCircleOutlined style={{ fontSize: 48, color: '#d9d9d9' }} />
|
|
||||||
</div>
|
|
||||||
<div className="placeholder-content">
|
|
||||||
<h3>页面已休眠</h3>
|
|
||||||
<p className="placeholder-desc">
|
|
||||||
为了优化内存使用，此页面内容已被暂时卸载
|
|
||||||
</p>
|
|
||||||
{lastAccessTime && (
|
|
||||||
<p className="last-access-time">
|
|
||||||
{formatLastAccessTime(lastAccessTime)}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
icon={<ReloadOutlined />}
|
|
||||||
onClick={() => onReload(tabKey)}
|
|
||||||
className="reload-btn"
|
|
||||||
>
|
|
||||||
重新加载
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 正常渲染内容
|
|
||||||
return (
|
|
||||||
<div className={`tab-virtualizer loaded ${className}`} ref={containerRef}>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TabVirtualizer;
|
|
||||||
Loading…
x
Reference in New Issue
Block a user