fix(study-detail): 修复学习详情页标签指示条定位错误问题

修复首次进入且存在“打卡互动”时底部绿色指示条定位错误的问题新增标签容器ref与ResizeObserver，按栏目数量对容器进行等分指示条宽度与位移按分段和索引计算，异步加载第三个栏目时不再错位同时优化打卡互动标签的显示条件，仅在存在任务时显示

fix(study-detail): 修复学习详情页标签指示条定位错误问题
修复首次进入且存在“打卡互动”时底部绿色指示条定位错误的问题新增标签容器ref与ResizeObserver，按栏目数量对容器进行等分指示条宽度与位移按分段和索引计算，异步加载第三个栏目时不再错位同时优化打卡互动标签的显示条件，仅在存在任务时显示
hookehuyr
Commit 9369a0117506b94ebff973df247a44337355f5a0 9369a011 1 parent e3af384a
Showing 4 changed files with 128 additions and 23 deletions
README.md
src/views/courses/CourseDetailPage.vue
src/views/profile/StudyCoursePage.vue
src/views/study/StudyDetailPage.vue
--- a/README.md
View file @9369a01
+++ b/README.md
View file @9369a01
@@ -2,7 +2,7 @@
 测试环境网站
 https://oa-dev.onwall.cn/f/mlaj
- 
+
  功能更新记录
  - 教师端新增作业管理页面：路径 `/teacher/tasks`，标题“作业管理”。
    - 列表展示：作业名称、开始时间、截止时间。
@@ -16,3 +16,6 @@ https://oa-dev.onwall.cn/f/mlaj
     - 在作业主页的学生列表点击卡片可跳转至该页面（当前版本为固定示例页面）。
     - 列表展示：作业帖子、图片/视频/音频、点赞与点评弹窗（与 `studentPage.vue` 的作业记录样式一致）。
     - 接口参数固定：`user_id=817017`，`group_id=816653`（后续可替换为动态参数）。
+  - 学习详情页标签指示条修复：`/src/views/profile/StudyCoursePage.vue`
+    - 现象：首次进入且存在“打卡互动”时，底部绿色指示条定位错误。
+    - 修复：新增标签容器 `ref` 与 `ResizeObserver`，按栏目数量对容器进行等分，指示条宽度与位移按分段和索引计算，异步加载第三个栏目时不再错位。
--- a/src/views/courses/CourseDetailPage.vue
View file @9369a01
+++ b/src/views/courses/CourseDetailPage.vue
View file @9369a01
@@ -104,7 +104,7 @@
               </div>
             </div>
-            <div v-if="activeTab === '打卡互动'">
+            <div v-if="activeTab === '打卡互动' && task_list.length > 0">
               <!-- 打卡区域 -->
               <div class="py-4">
                 <div class="bg-white rounded-lg p-4 mb-4 cursor-pointer">
@@ -428,7 +428,7 @@ const curriculumItems = computed(() => {
     { title: '课程大纲', active: activeTab.value === '课程大纲', show: !!(course.value.schedule && course.value.schedule.length > 0) },
     // { title: '课程亮点', active: activeTab.value === '课程亮点', show: !!course.value.highlights },
     // { title: '学习目标', active: activeTab.value === '学习目标', show: !!course.value.learning_goal },
-    { title: '打卡互动', active: activeTab.value === '打卡互动', show: !!course.value.is_buy },
+    { title: '打卡互动', active: activeTab.value === '打卡互动', show: !!course.value.is_buy && task_list.value.length > 0 },
   ].filter(item => item.show);
 });
--- a/src/views/profile/StudyCoursePage.vue
View file @9369a01
+++ b/src/views/profile/StudyCoursePage.vue
View file @9369a01
@@ -28,23 +28,20 @@
                 <!-- 标签页区域 -->
                 <div class="py-3 bg-white transition-all duration-300" :class="{'fixed top-0 left-0 right-0 z-10': isTabFixed}" :style="isTabFixed ? { transform: `translateY(0)` } : {}">
-                    <div class="flex justify-around items-center relative">
+                    <div class="flex justify-around items-center relative" ref="tabs_container_ref">
+                        <!-- 动态标签：详情、目录，任务存在时显示打卡互动 -->
                         <div
-                            v-for="(tab, index) in [{title: '详情', name: 'detail'}, {title: '目录', name: 'catalog'}, {title: '课程互动', name: 'interaction'}]"
+                            v-for="(tab, index) in tabs"
                             :key="tab.name"
                             :class="['px-4 py-2 cursor-pointer transition-colors relative', activeTab === tab.name ? 'text-green-600 font-medium' : 'text-gray-600']"
                             @click="handleTabChange(tab.name)"
-                            ref="tabRefs"
+                            :ref="el => setTabRef(tab.name, el)"
                         >
                             {{ tab.title }}
                         </div>
                         <div
                             class="absolute bottom-0 left-0 bg-green-600 transition-all duration-300 z-20"
-                            :style="{
+                            :style="indicatorStyle"
-                                width: tabRefs && tabRefs[activeTab === 'detail' ? 0 : activeTab === 'catalog' ? 1 : 2]?.offsetWidth + 'px',
-                                transform: `translateX(${tabRefs && tabRefs[activeTab === 'detail' ? 0 : activeTab === 'catalog' ? 1 : 2]?.offsetLeft}px)`,
-                                height: '2px',
-                            }"
                         ></div>
                     </div>
                 </div>
@@ -102,7 +99,7 @@
                 <div class="h-2 bg-gray-100"></div>
                 <!-- 互动区域 -->
-                <div id="interaction" class="py-4 px-4">
+                <div id="interaction" class="py-4 px-4" v-if="task_list.length > 0">
                     <div class="bg-white rounded-lg p-4 mb-4 cursor-pointer">
                         <div class="flex items-center justify-between" @click="goToCheckin()">
                             <div class="flex items-center gap-3">
@@ -190,7 +187,7 @@
 </template>
 <script setup>
-import { ref, onMounted, nextTick, onUnmounted } from 'vue';
+import { ref, onMounted, nextTick, onUnmounted, computed } from 'vue';
 import { useTitle } from '@vueuse/core';
 import { useRouter } from "vue-router";
 import dayjs from 'dayjs';
@@ -210,7 +207,101 @@ useTitle('课程详情');
 const activeTab = ref('detail');
 const topWrapperHeight = ref(0);
 const resizeObserver = ref(null);
+// tabs DOM映射
 const tabRefs = ref([]);
+const tabElMap = ref({});
+
+/**
+ * 设置标签引用映射
+ * @param {string} name - 标签名称
+ * @param {HTMLElement} el - 对应的元素
+ * 注释：用于根据激活标签定位指示条位置
+ */
+const setTabRef = (name, el) => {
+    if (el) {
+        tabElMap.value[name] = el;
+    }
+};
+
+/**
+ * 计算标签配置
+ * @returns {Array<{title:string,name:string}>} 标签数组（含条件展示的打卡互动）
+ * 注释：当存在打卡任务时，追加“打卡互动”标签
+ */
+const tabs = computed(() => {
+    const base = [
+        { title: '课程详情', name: 'detail' },
+        { title: '课程目录', name: 'catalog' },
+    ];
+    if (task_list.value && task_list.value.length > 0) {
+        base.push({ title: '打卡互动', name: 'interaction' });
+    }
+    return base;
+});
+
+/**
+ * 当前激活标签的索引
+ * @returns {number} 当前标签在 tabs 中的索引
+ * 注释：用于计算底部指示条的宽度和位置
+ */
+const currentTabIndex = computed(() => {
+    return tabs.value.findIndex((t) => t.name === activeTab.value);
+});
+
+// 标签容器引用与尺寸
+const tabs_container_ref = ref(null);
+const tabs_container_width = ref(0);
+const tabs_resize_observer = ref(null);
+
+/**
+ * 初始化并监听标签容器宽度
+ * @returns {void}
+ * 注释：确保在首次渲染和尺寸变化时能正确计算分段宽度
+ */
+const initTabsContainerWidth = () => {
+    nextTick(() => {
+        const el = tabs_container_ref.value;
+        if (!el) return;
+        tabs_container_width.value = el.clientWidth;
+        if (tabs_resize_observer.value) {
+            tabs_resize_observer.value.disconnect();
+        }
+        tabs_resize_observer.value = new ResizeObserver(() => {
+            tabs_container_width.value = el.clientWidth;
+        });
+        tabs_resize_observer.value.observe(el);
+    });
+};
+
+/**
+ * 指示条样式计算
+ * @returns {{width:string, transform:string, height:string}} 指示条宽度与位置样式
+ * 注释：优先按栏目数量进行分段计算，缺省时回退到DOM测量
+ */
+const indicatorStyle = computed(() => {
+    const count = tabs.value.length || 1;
+    const index = currentTabIndex.value >= 0 ? currentTabIndex.value : 0;
+
+    // 优先使用容器分段宽度进行计算
+    if (tabs_container_width.value > 0 && count > 0) {
+        const segment = tabs_container_width.value / count;
+        return {
+            width: segment + 'px',
+            transform: `translateX(${segment * index}px)`,
+            height: '2px',
+        };
+    }
+
+    // 回退：使用激活标签的实际尺寸
+    const el = tabElMap.value[activeTab.value];
+    const width = el ? el.offsetWidth : 0;
+    const left = el ? el.offsetLeft : 0;
+    return {
+        width: width + 'px',
+        transform: `translateX(${left}px)`,
+        height: '2px',
+    };
+});
 // 计算topWrapperHeight的函数
 const updateTopWrapperHeight = () => {
@@ -259,7 +350,7 @@ onMounted(async () => {
         course.value = data;
         task_list.value = [];
         timeout_task_list.value = [];
-        
+
         // 处理task_list数据格式
         if (data.task_list) {
             data.task_list.forEach(item => {
@@ -271,7 +362,7 @@ onMounted(async () => {
                 });
             });
         }
-        
+
         // 处理timeout_task_list数据格式
         if (data.timeout_task_list) {
             data.timeout_task_list.forEach(item => {
@@ -283,7 +374,7 @@ onMounted(async () => {
                 });
             });
         }
-        
+
         course_lessons.value = data.schedule || [];
         default_list.value = task_list.value;
         showTaskList.value = true;
@@ -297,6 +388,8 @@ onMounted(async () => {
     window.addEventListener('resize', updateTopWrapperHeight);
     // 确保在组件挂载后计算高度
     updateTopWrapperHeight();
+    // 初始化标签容器宽度监听
+    initTabsContainerWidth();
 });
 // 在组件卸载时移除监听器
@@ -308,6 +401,11 @@ onUnmounted(() => {
         resizeObserver.value.disconnect();
         resizeObserver.value = null;
     }
+    // 取消标签容器监听
+    if (tabs_resize_observer.value) {
+        tabs_resize_observer.value.disconnect();
+        tabs_resize_observer.value = null;
+    }
 });
 // 处理滚动事件
@@ -339,12 +437,16 @@ const debounce = (fn, delay) => {
 };
 // 修改handleScroll函数
+/**
+ * 处理滚动联动，更新标签激活态
+ * 注释：当互动区域不存在时，仅在详情与目录之间联动
+ */
 const handleScroll = debounce(() => {
     const detailElement = document.getElementById('detail');
     const catalogElement = document.getElementById('catalog');
     const interactionElement = document.getElementById('interaction');
     const tabElement = document.querySelector('.py-3.bg-white');
-    if (!detailElement || !catalogElement || !interactionElement || !tabElement) return;
+    if (!detailElement || !catalogElement || !tabElement) return;
     const currentScrollY = window.scrollY;
     isTabFixed.value = currentScrollY >= tabOriginalTop.value;
@@ -353,20 +455,20 @@ const handleScroll = debounce(() => {
     const tabHeight = tabElement.offsetHeight;
     const buffer = 50; // 缓冲区域
-    // 计算每个区域的位置，考虑固定标签页的高度
+    // 计算各区域顶部位置（互动不存在则设为无穷大）
     const detailTop = detailElement.offsetTop - tabHeight - buffer;
     const catalogTop = catalogElement.offsetTop - tabHeight - buffer;
-    const interactionTop = interactionElement.offsetTop - tabHeight - buffer;
+    const interactionTop = interactionElement ? (interactionElement.offsetTop - tabHeight - buffer) : Infinity;
-    // 获取页面总高度和视口高度
+    // 页面高度与底部判断
     const scrollHeight = document.documentElement.scrollHeight;
     const clientHeight = document.documentElement.clientHeight;
     const isAtBottom = scrollTop + clientHeight >= scrollHeight - buffer;
-    // 判断当前滚动位置所在区域
+    // 联动判断
     if (scrollTop <= detailTop) {
         activeTab.value = 'detail';
-    } else if (isAtBottom || scrollTop >= interactionTop) {
+    } else if (interactionElement && (isAtBottom || scrollTop >= interactionTop)) {
         activeTab.value = 'interaction';
     } else if (scrollTop >= catalogTop && scrollTop < interactionTop) {
         activeTab.value = 'catalog';
--- a/src/views/study/StudyDetailPage.vue
View file @9369a01
+++ b/src/views/study/StudyDetailPage.vue
View file @9369a01
@@ -81,7 +81,7 @@
                             <template #title>评论({{ commentCount }})</template>
                         </van-tab>
                     </van-tabs>
-                    <div @click="goToCheckin" style="position: absolute; right: 1rem; top: 1.5rem; font-size: 0.875rem; color: #666;">课程互动</div>
+                    <div v-if="task_list.length > 0" @click="goToCheckin" style="position: absolute; right: 1rem; top: 1.5rem; font-size: 0.875rem; color: #666;">打卡互动</div>
                 </div>
             </div>