From a900399dd0010b272536792a2a6642c432de7847 Mon Sep 17 00:00:00 2001
From: wangqiao <wangqiao@kailinjt.com>
Date: Tue, 2 Sep 2025 17:44:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=86=E7=B1=BB=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E6=A1=86=E6=9C=8D=E5=8A=A1=E7=AB=AF=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E5=85=BC=E5=AE=B9=E6=80=A7=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/kl-wallpaper-category/index.vue | 48 ++++++++++++++--------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/components/kl-wallpaper-category/index.vue b/components/kl-wallpaper-category/index.vue
index 582565d..665c120 100644
--- a/components/kl-wallpaper-category/index.vue
+++ b/components/kl-wallpaper-category/index.vue
@@ -133,27 +133,43 @@
   // }
   // getEditionsList()
 
-  /**获取分类下拉框 */
-  const { data: projectTypeList } = await useAsyncData(
-    `projectType-draw-${props.type}-${query.value.projectType}`,
-    async () => {
-      let parentId: any = '0'
-      if (breadList?.value && breadList?.value.length > 1) {
-        if (breadList.value.length > 2) {
-          const length = breadList.value?.length
-          parentId = breadList?.value[length - 2].id
-        } else {
-          const length = breadList.value?.length
-          parentId = breadList?.value[length - 1].id
-        }
+  console.log('breadList.value.length----', breadList.value?.length);
+
+  // 服务端渲染兼容方案：顺序执行异步操作
+  // 1. 先获取面包屑数据（已在上面通过useAsyncData获取）
+  
+  // 2. 顺序获取分类下拉框数据
+  // 创建一个函数来获取分类数据，确保服务端渲染时能获取到数据
+  const getProjectTypeList = async () => {
+    let parentId: any = '0'
+    
+    // 计算parentId的逻辑
+    if (breadList?.value && breadList?.value.length > 1) {
+      if (breadList.value.length > 2) {
+        const length = breadList.value?.length
+        parentId = breadList?.value[length - 2].id
+      } else {
+        const length = breadList.value?.length
+        parentId = breadList?.value[length - 1].id
       }
+    }
+    
+    try {
+      // 获取分类数据
       const res = await parent({ type: 1, parentId: parentId })
       const all = [{ id: parentId === '0' ? '-1' : parentId, name: '全部' }]
       return [...all, ...res.data]
-    },
-    {
-      immediate: true,
+    } catch (error) {
+      console.error('获取分类数据失败:', error)
+      return []
     }
+  }
+  
+  // 使用useAsyncData获取分类列表，确保服务端渲染兼容性
+  const { data: projectTypeList } = await useAsyncData(
+    `projectType-draw-${props.type}-${query.value.projectType}-${Date.now()}`,
+    getProjectTypeList,
+    { server: true } // 确保在服务端执行
   )
 
   /** 版本 */