fix:修复课程页面进入错误刷新的问题

src/components/admin/CourseComponents/CourseCategory.vue

@@ -21,10 +21,7 @@
     <div class="course-container">
       <!-- 加载状态 -->
       <div v-if="loading" class="loading-container">
-        <n-spin size="large">
+        <n-spin size="large" :show="loading">
-          <template #description>
-            正在加载课程数据...
-          </template>
         </n-spin>
       </div>
       
@@ -146,12 +143,11 @@ const loading = ref<boolean>(false);
 const error = ref<string>('');
 
 // 获取课程列表
-const getCourseList = async (forceRefresh: boolean = false, showLoading: boolean = true) => {
+const getCourseList = async (forceRefresh: boolean = false) => {
   try {
-    if (showLoading) {
+    loading.value = true;
-      loading.value = true;
-    }
     error.value = ''; // 清除之前的错误状态
+    courseList.value = [];
     
     const params = {
       keyword: searchValue.value,
@@ -159,45 +155,33 @@ const getCourseList = async (forceRefresh: boolean = false, showLoading: boolean
     };
     
     console.log('🔄 获取课程列表 - Tab:', activeTab.value, 'Status:', params.status, 'Keyword:', params.keyword);
-    
+
     const response = await TeachCourseApi.getTeacherCourseList(params);
+    loading.value = false;
     if (response && response.data) {
-      // 处理API返回的数据
+    const courseData = response.data.result.map((course: TeachCourse): CourseDisplayItem => ({
-      const courseData = response.data.result.map((course: TeachCourse): CourseDisplayItem => ({
+      ...course,
-        ...course,
+      // 映射状态显示文本
-        // 映射状态显示文本
         statusText: getStatusText(course.status),
-        // 确保有默认图片
         image: course.cover || '/images/teacher/fj.png'
       }));
-      
+
       // 如果是强制刷新或者第一次加载，直接设置数据
       if (forceRefresh || originalCourseList.value.length === 0) {
         originalCourseList.value = courseData;
-        courseList.value = courseData; // 直接显示API返回的数据，不需要再过滤
+        courseList.value = courseData;
       } else {
         // 否则进行本地过滤
         originalCourseList.value = courseData;
         filterCourseList();
       }
-      
-      console.log('✅ 课程列表加载成功，共', courseData.length, '门课程');
     }
   } catch (err: any) {
     console.error('获取课程列表失败:', err);
+    loading.value = false;
     
     // 设置错误信息
-    if (err.message?.includes('Network Error') || err.code === 'NETWORK_ERROR') {
+    error.value = err.message || ''
-      error.value = '网络连接失败，请检查网络设置后重试';
-    } else if (err.response?.status === 401) {
-      error.value = '登录已过期，请重新登录';
-    } else if (err.response?.status === 403) {
-      error.value = '暂无权限访问此功能';
-    } else if (err.response?.status >= 500) {
-      error.value = '服务器内部错误，请稍后重试';
-    } else {
-      error.value = err.message || '加载课程数据失败，请稍后重试';
-    }
     
     // 清空课程列表
     originalCourseList.value = [];
@@ -206,9 +190,7 @@ const getCourseList = async (forceRefresh: boolean = false, showLoading: boolean
     // 显示错误提示
     message.error(error.value);
   } finally {
-    if (showLoading) {
       loading.value = false;
-    }
   }
 };
 
@@ -253,21 +235,17 @@ const searchValue = ref<string>('')
 const activeTab = ref<string>('ongoing')
 
 // 监听标签页变化，重新调用接口获取数据
-watch(activeTab, async (newTab, oldTab) => {
+watch(activeTab, async () => {
-  console.log('📋 Tab切换:', oldTab, '->', newTab);
   
-  // 立即清空当前列表，避免显示错误的数据
   courseList.value = [];
   originalCourseList.value = [];
   
-  // 当tab切换时，重新调用接口获取对应状态的数据，但不显示加载状态
+  await getCourseList(true);
-  await getCourseList(true, false);
 });
 
 // 监听搜索值变化，进行本地过滤
 watch(searchValue, () => {
   console.log('🔍 搜索关键词变化:', searchValue.value);
-  // 搜索时不重新调用接口，只进行本地过滤
   filterCourseList();
 });
 
@@ -279,8 +257,8 @@ const navigateToCreateCourse = () => {
 // 处理搜索
 const handleSearch = async () => {
   console.log('🔍 执行搜索:', searchValue.value);
-  // 搜索时重新调用接口，传递关键词参数
+  // 监听搜索值变化，进行本地过滤
-  await getCourseList(true);
+  filterCourseList();
 };
 
 // 获取课程对应的选项列表
@@ -289,19 +267,16 @@ const getOptionsForCourse = (course: CourseDisplayItem) => {
     return [
       { label: '下架', value: 'offline', icon: '/images/teacher/下架.png' },
       { label: '编辑', value: 'edit', icon: '/images/teacher/小编辑.png' },
-      // { label: '移动', value: 'move', icon: '/images/teacher/移动.png' },
       { label: '删除', value: 'delete', icon: '/images/teacher/删除.png' }
     ];
   } else if (course.status === 0) { // 未开始/草稿
     return [
       { label: '发布', value: 'publish', icon: '/images/teacher/加号.png' },
       { label: '编辑', value: 'edit', icon: '/images/teacher/小编辑.png' },
-      // { label: '移动', value: 'move', icon: '/images/teacher/移动.png' },
       { label: '删除', value: 'delete', icon: '/images/teacher/删除.png' }
     ];
   } else if (course.status === 2) { // 已结束
     return [
-      // { label: '查看', value: 'view', icon: '/images/teacher/小编辑.png' },
       { label: '发布', value: 'publish', icon: '/images/teacher/加号.png' },
       { label: '编辑', value: 'edit', icon: '/images/teacher/小编辑.png' },
       { label: '删除', value: 'delete', icon: '/images/teacher/删除.png' }
@@ -358,10 +333,6 @@ const handleOptionSelect = (value: string, course: any) => {
       // 发布逻辑
       handlePublishCourse(course);
       break;
-    // case 'move':
-    //   // 移动逻辑
-    //   handleMoveCourse(course);
-    //   break;
     default:
       break;
   }
@@ -437,7 +408,7 @@ const handleOfflineCourse = (course: CourseDisplayItem) => {
 
         await TeachCourseApi.editCourse(updatedData);
         
-        getCourseList();
+        await getCourseList();
         
         message.success(`课程"${course.name}"已下架，现在可以删除了`);
       } catch (error) {
@@ -470,72 +441,20 @@ const handlePublishCourse = (course: CourseDisplayItem) => {
 
         await TeachCourseApi.editCourse(updatedData);
         
-        getCourseList();
+        await getCourseList();
         
-        message.success(`课程"${course.name}"已下架，现在可以删除了`);
+        message.success(`课程"${course.name}"已发布`);
       } catch (error) {
-        console.error('下架课程失败:', error);
+        console.error('发布课程失败:', error);
-        message.error('下架课程失败，请稍后重试');
+        message.error('发布课程失败，请稍后重试');
       }
     }
   });
 };
 
-// 移动课程
+onMounted(async () => {
-// const handleMoveCourse = (course: any) => {
+  loading.value = true;
-//   const currentIndex = courseList.value.findIndex(c => c.id === course.id);
+  await getCourseList();
-//   const totalCourses = courseList.value.length;
-  
-//   dialog.create({
-//     title: '移动课程位置',
-//     content: () => h('div', [
-//       h('p', `课程"${course.name}"当前位置：第 ${currentIndex + 1} 位`),
-//       h('p', { style: 'margin-top: 10px; margin-bottom: 10px;' }, '移动到位置：'),
-//       h('input', {
-//         type: 'number',
-//         min: 1,
-//         max: totalCourses,
-//         value: currentIndex + 1,
-//         style: 'width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 4px;',
-//         placeholder: `请输入位置 (1-${totalCourses})`,
-//         id: 'movePositionInput'
-//       }),
-//       h('p', { 
-//         style: 'margin-top: 8px; font-size: 12px; color: #666;' 
-//       }, `提示：输入 1-${totalCourses} 之间的数字`)
-//     ]),
-//     positiveText: '确定移动',
-//     negativeText: '取消',
-//     onPositiveClick: () => {
-//       const input = document.getElementById('movePositionInput') as HTMLInputElement;
-//       const newPosition = parseInt(input.value);
-      
-//       if (isNaN(newPosition) || newPosition < 1 || newPosition > totalCourses) {
-//         message.error(`请输入有效的位置 (1-${totalCourses})`);
-//         return false; // 阻止对话框关闭
-//       }
-      
-//       // 执行移动操作
-//       const targetIndex = newPosition - 1;
-//       if (targetIndex !== currentIndex) {
-//         // 移除课程从当前位置
-//         const [movedCourse] = courseList.value.splice(currentIndex, 1);
-//         // 插入到新位置
-//         courseList.value.splice(targetIndex, 0, movedCourse);
-        
-//         message.success(`课程"${course.name}"已移动到第 ${newPosition} 位`);
-//       } else {
-//         message.info('位置未发生变化');
-//       }
-      
-//       return true; // 允许对话框关闭
-//     }
-//   });
-// };
-
-
-onMounted(() => {
-  getCourseList();
 });
 </script>
 
@@ -600,11 +519,7 @@ onMounted(() => {
   }
   
   .loading-container {
-    display: flex;
+    display: contents;
-    justify-content: center;
-    align-items: center;
-    min-height: 400px;
-    width: 100%;
   }
   
   .error-container {