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

components/kl-wallpaper-category/index.vue

@@ -133,11 +133,17 @@
   // }
   // getEditionsList()
 
-  /**获取分类下拉框 */
+  console.log('breadList.value.length----', breadList.value?.length);
-  const { data: projectTypeList } = await useAsyncData(
+
-    `projectType-draw-${props.type}-${query.value.projectType}`,
+  // 服务端渲染兼容方案：顺序执行异步操作
-    async () => {
+  // 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
@@ -147,13 +153,23 @@
         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 } // 确保在服务端执行
   )
 
   /** 版本 */