refactor: remove unnecessary dashboard reveal state and simplify reveal logic

This commit is contained in:
jxxghp
2026-06-12 14:19:59 +08:00
parent 0594d1d5b2
commit 68b0071009
+3 -28
View File
@@ -66,9 +66,6 @@ const dashboardGrid = shallowRef<GridStack | null>(null)
// 仪表板配置是否已完成首次加载,包含插件仪表板配置。 // 仪表板配置是否已完成首次加载,包含插件仪表板配置。
const isDashboardConfigLoaded = ref(false) const isDashboardConfigLoaded = ref(false)
// 仪表板是否已完成首次整体渐现。
const isDashboardRevealed = ref(false)
// 已完成组件模块加载的仪表板项目 ID。 // 已完成组件模块加载的仪表板项目 ID。
const loadedDashboardGridItemIds = ref<Set<string>>(new Set()) const loadedDashboardGridItemIds = ref<Set<string>>(new Set())
@@ -267,7 +264,6 @@ function isDashboardGridReadyForReveal() {
// 在配置、组件和 GridStack 都就绪后安排仪表板整体渐现。 // 在配置、组件和 GridStack 都就绪后安排仪表板整体渐现。
function scheduleDashboardReveal() { function scheduleDashboardReveal() {
if ( if (
isDashboardRevealed.value ||
isDashboardRevealPending || isDashboardRevealPending ||
dashboardRevealFrame !== null || dashboardRevealFrame !== null ||
!isDashboardConfigLoaded.value || !isDashboardConfigLoaded.value ||
@@ -280,25 +276,18 @@ function scheduleDashboardReveal() {
isDashboardRevealPending = true isDashboardRevealPending = true
void nextTick(() => { void nextTick(() => {
isDashboardRevealPending = false isDashboardRevealPending = false
if ( if (!isDashboardConfigLoaded.value || !isDashboardGridReadyForReveal() || !areDashboardGridItemsLoaded()) {
isDashboardRevealed.value ||
!isDashboardConfigLoaded.value ||
!isDashboardGridReadyForReveal() ||
!areDashboardGridItemsLoaded()
) {
return return
} }
resizeAutoDashboardItemsToContent() resizeAutoDashboardItemsToContent()
if (typeof window === 'undefined') { if (typeof window === 'undefined') {
isDashboardRevealed.value = true
return return
} }
dashboardRevealFrame = window.requestAnimationFrame(() => { dashboardRevealFrame = window.requestAnimationFrame(() => {
dashboardRevealFrame = null dashboardRevealFrame = null
isDashboardRevealed.value = true
notifyDashboardContentResize() notifyDashboardContentResize()
}) })
}) })
@@ -1010,14 +999,8 @@ onBeforeUnmount(() => {
</script> </script>
<template> <template>
<LoadingBanner v-if="!isDashboardRevealed" class="mt-12" />
<!-- 仪表板 --> <!-- 仪表板 -->
<div <div ref="dashboardGridRef" class="grid-stack dashboard-grid" :class="{ 'is-editing': isLayoutEditing }">
ref="dashboardGridRef"
class="grid-stack dashboard-grid"
:class="{ 'is-editing': isLayoutEditing, 'is-ready': isDashboardRevealed }"
>
<div <div
v-for="gridItem in dashboardGridItems" v-for="gridItem in dashboardGridItems"
:key="gridItem.id" :key="gridItem.id"
@@ -1084,21 +1067,13 @@ onBeforeUnmount(() => {
/* stylelint-disable selector-pseudo-class-no-unknown */ /* stylelint-disable selector-pseudo-class-no-unknown */
.dashboard-grid { .dashboard-grid {
opacity: 0; pointer-events: auto;
pointer-events: none;
transform: translateY(8px);
transition: transition:
opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1),
transform 0.45s cubic-bezier(0.25, 1, 0.5, 1); transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
will-change: opacity, transform; will-change: opacity, transform;
} }
.dashboard-grid.is-ready {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.dashboard-grid-item.is-manual-height :deep(.v-card) { .dashboard-grid-item.is-manual-height :deep(.v-card) {
block-size: 100%; block-size: 100%;
} }