feat:详情返回筛选错误

Taois · Taois · commit a8f6584bce6d · 2025-10-08T12:13:09.000+08:00
diff --git a/dashboard/src/components/CategoryNavigation.vue b/dashboard/src/components/CategoryNavigation.vue
@@ -58,7 +58,7 @@
 
     <!-- 筛选区域 -->
     <FilterSection
-      v-if="getFiltersForCategory(activeKey) && filterVisible[activeKey]"
+      v-if="getFiltersForCategory(activeKey) && props.filterVisible[activeKey]"
       :filters="getFiltersForCategory(activeKey)"
       :selectedFilters="selectedFilters[activeKey] || {}"
       :visible="true"
@@ -98,6 +98,11 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   },
+  // 筛选展开状态
+  filterVisible: {
+    type: Object,
+    default: () => ({})
+  },
   // 特殊分类状态
   specialCategoryState: {
     type: Object,
@@ -110,7 +115,7 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['tab-change', 'open-category-modal', 'toggle-filter', 'reset-filters', 'close-special-category']);
+const emit = defineEmits(['tab-change', 'open-category-modal', 'toggle-filter', 'reset-filters', 'close-special-category', 'filter-visible-change']);
 
 // 计算默认的activeKey
 const getDefaultActiveKey = () => {
@@ -126,8 +131,8 @@ const getDefaultActiveKey = () => {
 // 响应式数据
 const activeKey = ref(props.activeKey || getDefaultActiveKey());
 const navWrapperRef = ref(null);
-const filterVisible = ref({});
 let wheelHandler = null;
+const isInitialized = ref(false);
 
 // 监听props变化，更新activeKey
 watch(() => [props.hasRecommendVideos, props.classList, props.activeKey], () => {
@@ -141,12 +146,13 @@ watch(() => [props.hasRecommendVideos, props.classList, props.activeKey], () =>
   }
 }, { immediate: true });
 
-// 当分类切换时，隐藏之前分类的筛选条件
+// 当分类切换时，通知父组件隐藏之前分类的筛选条件
+// 注意：不在初始化时触发，避免干扰状态恢复
 watch(activeKey, (newKey, oldKey) => {
-  if (oldKey && filterVisible.value[oldKey]) {
-    filterVisible.value[oldKey] = false;
+  if (isInitialized.value && oldKey && oldKey !== newKey && props.filterVisible[oldKey]) {
+    emit('filter-visible-change', { categoryId: oldKey, visible: false });
   }
-});
+}, { flush: 'post' });
 
 const handleTabChange = (key) => {
   activeKey.value = key;
@@ -156,7 +162,9 @@ const handleTabChange = (key) => {
 // 处理分类点击（显示/隐藏筛选）
 const handleCategoryClick = (categoryId) => {
   if (hasFiltersForCategory(categoryId)) {
-    filterVisible.value[categoryId] = !filterVisible.value[categoryId];
+    const newVisible = !props.filterVisible[categoryId];
+    // 通知父组件筛选展开状态变化
+    emit('filter-visible-change', { categoryId, visible: newVisible });
   }
 };
 
@@ -205,6 +213,11 @@ onMounted(() => {
     }
   };
   list.addEventListener('wheel', wheelHandler, { passive: false });
+  
+  // 设置初始化完成标志，允许后续的筛选状态重置
+  setTimeout(() => {
+    isInitialized.value = true;
+  }, 100);
 });
 
 onBeforeUnmount(() => {
diff --git a/dashboard/src/components/VideoList.vue b/dashboard/src/components/VideoList.vue
@@ -8,11 +8,13 @@
       :activeKey="activeKey"
       :filters="props.classList?.filters || {}"
       :selectedFilters="selectedFilters"
+      :filterVisible="filterVisible"
       :specialCategoryState="props.specialCategoryState"
       @tab-change="handleTabChange"
       @open-category-modal="openCategoryModal"
       @toggle-filter="handleToggleFilter"
       @reset-filters="handleResetFilters"
+      @filter-visible-change="handleFilterVisibleChange"
       @close-special-category="() => emit('close-special-category')"
     />
 
@@ -143,6 +145,7 @@ import { usePaginationStore } from '@/stores/paginationStore';
 import { getCategoryData } from '@/api/modules/module';
 import { processExtendParam } from '@/utils/apiUtils';
 import { encodeFilters } from '@/api/utils';
+import { useRouter } from 'vue-router';
 import CategoryNavigation from './CategoryNavigation.vue';
 import FilterSection from './FilterSection.vue';
 import VideoGrid from './VideoGrid.vue';
@@ -207,6 +210,8 @@ const props = defineProps({
 
 const emit = defineEmits(['activeKeyChange', 'special-action', 'close-special-category', 'folder-navigate']);
 
+const router = useRouter();
+
 // 使用翻页统计store
 const paginationStore = usePaginationStore();
 
@@ -261,6 +266,69 @@ const selectedFilters = reactive({});
 const categoryModalVisible = ref(false);
 const videoGridRef = ref(null);
 
+// 筛选条件和展开状态持久化函数
+const saveFiltersToUrl = () => {
+  const currentQuery = { ...router.currentRoute.value.query };
+  
+  if (Object.keys(selectedFilters).length > 0) {
+    // 将筛选条件编码为JSON字符串保存到URL
+    currentQuery.filters = JSON.stringify(selectedFilters);
+  } else {
+    // 如果没有筛选条件，删除URL中的filters参数
+    delete currentQuery.filters;
+  }
+  
+  // 保存筛选展开状态
+  if (Object.keys(filterVisible).length > 0) {
+    currentQuery.filterVisible = JSON.stringify(filterVisible);
+  } else {
+    delete currentQuery.filterVisible;
+  }
+  
+  // 更新URL，但不触发页面刷新
+  router.replace({
+    query: currentQuery
+  }).catch(() => {
+    // 忽略导航重复错误
+  });
+};
+
+// 从URL恢复筛选条件和展开状态
+const restoreFiltersFromUrl = () => {
+  const urlFilters = router.currentRoute.value.query.filters;
+  const urlFilterVisible = router.currentRoute.value.query.filterVisible;
+  
+  // 恢复筛选条件
+  if (urlFilters) {
+    try {
+      const parsedFilters = JSON.parse(urlFilters);
+      // 清空现有筛选条件
+      Object.keys(selectedFilters).forEach(key => {
+        delete selectedFilters[key];
+      });
+      // 恢复筛选条件
+      Object.assign(selectedFilters, parsedFilters);
+    } catch (error) {
+      console.error('解析URL中的筛选条件失败:', error);
+    }
+  }
+  
+  // 恢复筛选展开状态
+  if (urlFilterVisible) {
+    try {
+      const parsedFilterVisible = JSON.parse(urlFilterVisible);
+      // 清空现有展开状态
+      Object.keys(filterVisible).forEach(key => {
+        delete filterVisible[key];
+      });
+      // 恢复展开状态
+      Object.assign(filterVisible, parsedFilterVisible);
+    } catch (error) {
+      console.error('解析URL中的筛选展开状态失败:', error);
+    }
+  }
+};
+
 // 目录模式翻页状态管理
 const folderPageData = reactive({});
 const folderLoadingMore = reactive({});
@@ -358,6 +426,9 @@ const toggleFilter = (filterKey, filterValue, filterName) => {
     selectedFilters[activeKey.value][filterKey] = filterValue;
   }
   
+  // 保存筛选条件到URL
+  saveFiltersToUrl();
+  
   // 如果在目录模式下，重新获取目录数据
   if (folderIsActive.value && folderCurrentBreadcrumb.value) {
     handleFolderNavigate(folderCurrentBreadcrumb.value);
@@ -370,6 +441,9 @@ const toggleFilter = (filterKey, filterValue, filterName) => {
 const resetFilters = (categoryId) => {
   delete selectedFilters[categoryId];
   
+  // 保存筛选条件到URL
+  saveFiltersToUrl();
+  
   // 如果在目录模式下，重新获取目录数据
   if (folderIsActive.value && folderCurrentBreadcrumb.value) {
     handleFolderNavigate(folderCurrentBreadcrumb.value);
@@ -673,6 +747,13 @@ const handleToggleFilter = (data) => {
   toggleFilter(filterKey, filterValue, filterName);
 };
 
+const handleFilterVisibleChange = (data) => {
+  const { categoryId, visible } = data;
+  filterVisible[categoryId] = visible;
+  // 保存筛选展开状态到URL
+  saveFiltersToUrl();
+};
+
 const handleResetFilters = () => {
   resetFilters(activeKey.value);
 };
@@ -721,6 +802,7 @@ watch(() => props.recommendVideos, (newVideos) => {
 }, { immediate: true });
 
 // 添加classList watch的防护变量
+// 防止递归更新的标志
 let isClassListUpdating = false;
 let lastClassListHash = '';
 
@@ -755,8 +837,13 @@ watch(() => props.classList, (newClassList, oldClassList) => {
   lastClassListHash = newHash;
   
   try {
-    if (newClassList !== oldClassList) {
-      console.log('🗂️ [DEBUG] classList发生变化，清除筛选状态');
+    // 检查URL中是否有筛选参数需要恢复
+    const currentQuery = router.currentRoute.value.query;
+    const hasFiltersInUrl = currentQuery.filters || currentQuery.filterVisible;
+    
+    // 只有在classList真正发生变化且URL中没有筛选参数时才清除筛选状态
+    if (newClassList !== oldClassList && !hasFiltersInUrl) {
+      console.log('🗂️ [DEBUG] classList发生变化且URL中无筛选参数，清除筛选状态');
       // 清除筛选状态
       Object.keys(selectedFilters).forEach(key => {
         delete selectedFilters[key];
@@ -765,6 +852,8 @@ watch(() => props.classList, (newClassList, oldClassList) => {
         delete filterVisible[key];
       });
       console.log('🗂️ [DEBUG] 筛选状态已清除');
+    } else if (hasFiltersInUrl) {
+      console.log('🗂️ [DEBUG] URL中有筛选参数，跳过筛选状态清除');
     }
     
     // 如果当前处于folder模式，不要重置activeKey，避免覆盖folder状态
@@ -811,15 +900,22 @@ watch(() => props.sourceRoute?.query?.activeKey, (newActiveKey) => {
   }
 }, { immediate: true });
 
-onMounted(() => {
+onMounted(async () => {
+  // 从URL恢复筛选条件
+  restoreFiltersFromUrl();
+  
   // 优先使用父组件传递的activeKey，如果没有则使用默认值
   const parentActiveKey = props.sourceRoute?.query?.activeKey;
   const targetActiveKey = parentActiveKey || getDefaultActiveKey();
   
-  console.log('[DEBUG] VideoList onMounted - parentActiveKey:', parentActiveKey, 'targetActiveKey:', targetActiveKey);
-  
+  // 使用nextTick确保筛选状态已经传递给子组件
+  await nextTick();
   activeKey.value = targetActiveKey;
   
+  // 再次使用nextTick确保classList watcher执行完毕后，重新恢复筛选状态
+  await nextTick();
+  restoreFiltersFromUrl();
+  
   // 对于推荐分类，确保loading状态正确
   if (targetActiveKey === "recommendTuijian404") {
     loadingCategory[targetActiveKey] = false;
@@ -828,7 +924,6 @@ onMounted(() => {
       listData[targetActiveKey] = [...props.recommendVideos];
       pageData[targetActiveKey] = { page: 1, hasNext: false };
       loadingMore[targetActiveKey] = false;
-      console.log('[DEBUG] 推荐数据已设置，跳过getListData调用');
     } else {
       // 如果没有推荐数据，才调用getListData
       getListData(activeKey.value);
