hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-25 07:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf(export): phase-load sessions and add strong skeleton states

Browse Source
This commit is contained in:
tisonhuang
2026-03-01 16:11:04 +08:00
parent de7cbdf494
commit b62c18fd84
2 changed files with 211 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/pages/ExportPage.scss
View File

@@ -191,6 +191,14 @@
background: var(--primary-hover);
}
}
&.skeleton-card {
pointer-events: none;
.card-stats {
gap: 10px;
}
}
}
.task-center {
@@ -332,6 +340,19 @@
overflow: hidden;
}
.table-stage-hint {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(var(--primary-rgb), 0.1);
border: 1px solid rgba(var(--primary-rgb), 0.2);
color: var(--primary);
font-size: 12px;
width: fit-content;
}
.table-toolbar {
display: flex;
justify-content: space-between;
@@ -589,6 +610,61 @@
color: var(--text-secondary);
}
.table-skeleton-list {
display: grid;
gap: 8px;
padding: 4px 0;
}
.table-skeleton-item {
display: grid;
grid-template-columns: 20px 36px minmax(160px, 2fr) repeat(3, minmax(80px, 1fr));
align-items: center;
gap: 12px;
padding: 10px 8px;
border-radius: 8px;
background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
}
.skeleton-shimmer {
position: relative;
overflow: hidden;
border-radius: 8px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.35) 50%,
rgba(255, 255, 255, 0.08) 100%
);
background-size: 220% 100%;
animation: exportSkeletonShimmer 1.2s linear infinite;
}
.skeleton-dot {
width: 16px;
height: 16px;
border-radius: 6px;
}
.skeleton-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
}
.skeleton-line {
display: inline-block;
height: 12px;
}
.skeleton-line.w-12 { width: 48%; min-width: 42px; }
.skeleton-line.w-20 { width: 22%; min-width: 36px; }
.skeleton-line.w-30 { width: 32%; min-width: 120px; }
.skeleton-line.w-40 { width: 45%; min-width: 80px; }
.skeleton-line.w-60 { width: 62%; min-width: 110px; }
.skeleton-line.w-100 { width: 100%; }
.skeleton-line.h-32 { height: 32px; border-radius: 10px; }
.export-dialog-overlay {
position: fixed;
inset: 0;
@@ -867,6 +943,15 @@
}
}
@keyframes exportSkeletonShimmer {
0% {
background-position: 220% 0;
}
100% {
background-position: -20% 0;
}
}
@media (max-width: 1360px) {
.export-top-panel {
grid-template-columns: 1fr;