perf: streamline view data loading

frontend/src/MvpPanel.vue

@@ -20,6 +20,7 @@ const emit = defineEmits<{
 const habits = ref<Habit[]>([])
 const archivedHabits = ref<Habit[]>([])
 const showArchivedHabits = ref(false)
+const archivedHabitsLoaded = ref(false)
 const sessions = ref<Session[]>([])
 const audit = ref<any[]>([])
 const busy = ref(false)
@@ -396,7 +397,7 @@ async function archiveHabit(h: Habit) {
     await request(`/habits/${h.id}`, { method: 'DELETE' })
     selectedHabit.value = null
     await loadHabits()
-    await loadArchivedHabits()
+    if (props.view === 'habits' && showArchivedHabits.value) await loadArchivedHabits()
     emit('notice', '习惯已归档')
   })
 }
@@ -411,10 +412,11 @@ async function deleteHabit(h: Habit) {
 }
 async function loadArchivedHabits() {
   archivedHabits.value = await request('/habits?archived=true') as Habit[]
+  archivedHabitsLoaded.value = true
 }
 async function toggleArchivedHabits() {
   showArchivedHabits.value = !showArchivedHabits.value
-  if (showArchivedHabits.value) await safe(loadArchivedHabits)
+  if (showArchivedHabits.value && !archivedHabitsLoaded.value) await safe(loadArchivedHabits)
 }
 function refreshHabitDay() {
   const next = dateKey(new Date())
@@ -505,7 +507,6 @@ onMounted(() => {
   if (props.view === 'habits' || props.view === 'today-habits') {
     refreshHabitDay()
     void loadHabits()
-    void loadArchivedHabits()
     dayRolloverTimer = setInterval(refreshHabitDay, 60_000)
   } else {
     void loadSettings()
@@ -579,10 +580,10 @@ onBeforeUnmount(() => {
           </div>
         </article>
         <div v-if="!visibleHabits.length && !busy" class="empty-panel">{{ !showCompleted && habits.length ? '已完成的习惯已隐藏。' : '还没有习惯，从一件容易坚持的小事开始。' }}</div>
-        <button class="archived-toggle" type="button" @click="toggleArchivedHabits"><ArchiveRestore/>已归档（{{ archivedHabits.length }}）</button>
+        <button class="archived-toggle" type="button" @click="toggleArchivedHabits"><ArchiveRestore/>{{ archivedHabitsLoaded ? `已归档（${archivedHabits.length}）` : '已归档' }}</button>
         <div v-if="showArchivedHabits" class="archived-habits">
           <button v-for="h in archivedHabits" :key="h.id" type="button" @click="openHabitDetail(h, $event.currentTarget as HTMLElement)"><span>{{ h.name }}</span><small>查看详情</small></button>
-          <p v-if="!archivedHabits.length && !busy" class="empty-panel">暂无已归档习惯。</p>
+          <p v-if="archivedHabitsLoaded && !archivedHabits.length && !busy" class="empty-panel">暂无已归档习惯。</p>
         </div>
       </div>
       <Transition name="countdown-detail">