修复分类下拉框服务端渲染兼容性问题

components/kl-wallpaper-category/index.vue

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