From 4dc73d42cb9596e78ac2551a8f09e5e6ae3db7b9 Mon Sep 17 00:00:00 2001
From: xiaomai <xsbugh@gmail.com>
Date: Wed, 6 May 2026 17:26:49 +0800
Subject: [PATCH] fix(frontend): await useAsyncData and initialize state in
 detail views

Restore await for useAsyncData to ensure data is fetched during SSR
Assign initial data to local refs to prevent empty states on load
---
 frontend/src/views/HabitatDetail.vue | 7 ++++++-
 frontend/src/views/ItemDetail.vue    | 7 ++++++-
 frontend/src/views/PokemonDetail.vue | 8 +++++++-
 frontend/src/views/RecipeDetail.vue  | 7 ++++++-
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/HabitatDetail.vue b/frontend/src/views/HabitatDetail.vue
index 451881f..2928d28 100644
--- a/frontend/src/views/HabitatDetail.vue
+++ b/frontend/src/views/HabitatDetail.vue
@@ -34,7 +34,7 @@ const detailTabs = computed<TabOption[]>(() => [
   { value: 'history', label: t('history.editHistory') }
 ]);
 
-const { data: initialHabitat } = useAsyncData<HabitatDetail | null>(
+const { data: initialHabitat } = await useAsyncData<HabitatDetail | null>(
   `habitat-detail:${activeHabitatRouteId() ?? 'none'}:${locale.value}`,
   async () => {
     const routeId = activeHabitatRouteId();
@@ -52,6 +52,11 @@ const { data: initialHabitat } = useAsyncData<HabitatDetail | null>(
 );
 
 const initialHabitatLoaded = ref(false);
+if (initialHabitat.value) {
+  habitat.value = initialHabitat.value;
+  initialHabitatLoaded.value = true;
+}
+
 const habitatSeo = computed(() =>
   habitat.value && route.meta.editorModal !== true
     ? resolveSeo({
diff --git a/frontend/src/views/ItemDetail.vue b/frontend/src/views/ItemDetail.vue
index de9dc90..1a8e41e 100644
--- a/frontend/src/views/ItemDetail.vue
+++ b/frontend/src/views/ItemDetail.vue
@@ -73,7 +73,7 @@ const possibleTagEvidenceSections = computed(() => [
   { key: 'neutral', title: t('pages.pokemon.tradingNeutral'), rows: item.value?.possibleTags?.evidence.neutral ?? [] }
 ]);
 
-const { data: initialItem } = useAsyncData<ItemDetail | null>(
+const { data: initialItem } = await useAsyncData<ItemDetail | null>(
   `item-detail:${String(route.name)}:${activeItemRouteId() ?? 'none'}:${locale.value}`,
   async () => {
     const routeId = activeItemRouteId();
@@ -92,6 +92,11 @@ const { data: initialItem } = useAsyncData<ItemDetail | null>(
 );
 
 const initialItemLoaded = ref(false);
+if (initialItem.value) {
+  item.value = initialItem.value;
+  initialItemLoaded.value = true;
+}
+
 const itemSeo = computed(() =>
   item.value && route.meta.editorModal !== true
     ? resolveSeo({
diff --git a/frontend/src/views/PokemonDetail.vue b/frontend/src/views/PokemonDetail.vue
index 4858c3e..500e16a 100644
--- a/frontend/src/views/PokemonDetail.vue
+++ b/frontend/src/views/PokemonDetail.vue
@@ -41,7 +41,7 @@ const weathers = ['晴天', '阴天', '雨天'];
 const relatedPokemonLimit = 6;
 const pokemonDetailRouteNames = new Set(['pokemon-detail', 'pokemon-edit']);
 
-const { data: initialPokemon } = useAsyncData<PokemonDetail | null>(
+const { data: initialPokemon } = await useAsyncData<PokemonDetail | null>(
   `pokemon-detail:${activePokemonRouteId() ?? 'none'}:${locale.value}`,
   async () => {
     const routeId = activePokemonRouteId();
@@ -59,6 +59,12 @@ const { data: initialPokemon } = useAsyncData<PokemonDetail | null>(
 );
 
 const initialPokemonLoaded = ref(false);
+if (initialPokemon.value) {
+  pokemon.value = initialPokemon.value;
+  relatedHabitatTab.value = habitatTabValue(initialPokemon.value.environment.id);
+  initialPokemonLoaded.value = true;
+}
+
 const pokemonSeo = computed(() =>
   pokemon.value && route.meta.editorModal !== true
     ? resolveSeo({
diff --git a/frontend/src/views/RecipeDetail.vue b/frontend/src/views/RecipeDetail.vue
index ad1c771..93d5504 100644
--- a/frontend/src/views/RecipeDetail.vue
+++ b/frontend/src/views/RecipeDetail.vue
@@ -42,7 +42,7 @@ const recipeSubtitle = computed(() => {
   return categoryName ?? t('pages.recipes.detailSubtitle');
 });
 
-const { data: initialRecipe } = useAsyncData<RecipeDetail | null>(
+const { data: initialRecipe } = await useAsyncData<RecipeDetail | null>(
   `recipe-detail:${String(route.params.id)}:${locale.value}`,
   async () => {
     try {
@@ -55,6 +55,11 @@ const { data: initialRecipe } = useAsyncData<RecipeDetail | null>(
 );
 
 const initialRecipeLoaded = ref(false);
+if (initialRecipe.value) {
+  recipe.value = initialRecipe.value;
+  initialRecipeLoaded.value = true;
+}
+
 const recipeSeo = computed(() =>
   recipe.value && route.meta.editorModal !== true
     ? resolveSeo({