fix -- 关卡太多只展示8个

src/components/PathDetailImage.vue

@@ -25,15 +25,15 @@
 <script setup>
 import {computed, defineProps, ref, watch} from "vue";
 import {ElMessage} from "element-plus";
-import back from '@/assets/image/pathdetails/pathDetailBack.png'
-import nameBack from '@/assets/image/pathdetails/pathDetailImg.png'
-import currentBack from '@/assets/image/pathdetails/pathDetailImgSelect.png'
-import back1 from '@/assets/image/pathdetails/back1.png'
-import nameBack1 from '@/assets/image/pathdetails/nameBack1.png'
-import currentBack1 from '@/assets/image/pathdetails/currentBack1.png'
-import back2 from '@/assets/image/pathdetails/back2.png'
-import nameBack2 from '@/assets/image/pathdetails/nameBack2.png'
-import currentBack2 from '@/assets/image/pathdetails/currentBack2.png'
+import back from "@/assets/image/pathdetails/pathDetailBack.png";
+import nameBack from "@/assets/image/pathdetails/pathDetailImg.png";
+import currentBack from "@/assets/image/pathdetails/pathDetailImgSelect.png";
+import back1 from "@/assets/image/pathdetails/back1.png";
+import nameBack1 from "@/assets/image/pathdetails/nameBack1.png";
+import currentBack1 from "@/assets/image/pathdetails/currentBack1.png";
+import back2 from "@/assets/image/pathdetails/back2.png";
+import nameBack2 from "@/assets/image/pathdetails/nameBack2.png";
+import currentBack2 from "@/assets/image/pathdetails/currentBack2.png";
 import {useRouter} from "vue-router/dist/vue-router";
 
 const props = defineProps({
@@ -43,11 +43,11 @@ const props = defineProps({
     type: Object,
     default: {}
   }
-})
+});
 const router = useRouter();
-const visiable = ref(true)
+const visiable = ref(true);
 const imageAttrs = {
-  '路径图背景': {
+  "路径图背景": {
     width: 1437,
     height: 594,
     cheight: 70,
@@ -55,8 +55,8 @@ const imageAttrs = {
     backurl: back,
     currentBack: currentBack,
     nameBack: nameBack,
-    ccolors: '#FFF',
-    colors: '#FFF',
+    ccolors: "#FFF",
+    colors: "#FFF",
     positions: [
       { left: 50, top: 425 },
       { left: 440, top: 425 },
@@ -68,7 +68,7 @@ const imageAttrs = {
       { left: 1000, top: 25 },
     ]
   },
-  '路径图2': {
+  "路径图2": {
     width: 1437,
     height: 594,
     cheight: 100,
@@ -76,8 +76,8 @@ const imageAttrs = {
     backurl: back2,
     currentBack: currentBack2,
     nameBack: nameBack2,
-    ccolors: '#FFF3E5',
-    colors: '#FFF',
+    ccolors: "#FFF3E5",
+    colors: "#FFF",
     positions: [
       { left: 40, top: 380 },
       { left: 160, top: 290 },
@@ -89,7 +89,7 @@ const imageAttrs = {
       { left: 1060, top: 30 },
     ]
   },
-  '路径图3': {
+  "路径图3": {
     width: 1437,
     height: 594,
     cheight: 70,
@@ -97,8 +97,8 @@ const imageAttrs = {
     backurl: back1,
     currentBack: currentBack1,
     nameBack: nameBack1,
-    ccolors: '#FFF',
-    colors: '#A06438',
+    ccolors: "#FFF",
+    colors: "#A06438",
     positions: [
       { left: 20, top: 390 },
       { left: 210, top: 380 },
@@ -110,17 +110,27 @@ const imageAttrs = {
       { left: 1050, top: 60 },
     ]
   }
-}
+};
 
-const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img&&props.img.includes(e))] || {})
-const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.id === props.detail.currentStageId))
+const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img && props.img.includes(e))] || {});
+const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.id === props.detail.currentStageId));
 //当关卡太多时只显示 当前关卡中间8个
-const currentIndex = computed(() => current.value<3?current.value:props.detail.chapterDtoList.length-current.value<=4?(8-(props.detail.chapterDtoList.length-current.value)):3)
-const startIndex = computed(() => current.value<3?0:props.detail.chapterDtoList.length-current.value<=4?props.detail.chapterDtoList.length-8:current.value-3)
-const showList = computed(() => props.detail.chapterDtoList?.length<=8?props.detail.chapterDtoList:props.detail.chapterDtoList?.slice(startIndex.value,startIndex.value+8))
+const currentIndex = computed(() => {
+  if (props.detail.chapterDtoList?.length <= 8) {
+    return current.value;
+  }
+  return current.value < 3 ? current.value : props.detail.chapterDtoList.length - current.value <= 4 ? (8 - (props.detail.chapterDtoList.length - current.value)) : 3;
+});
+const startIndex = computed(() => {
+  if (props.detail.chapterDtoList?.length <= 8) {
+    return 0;
+  }
+  return current.value < 3 ? 0 : props.detail.chapterDtoList.length - current.value <= 4 ? props.detail.chapterDtoList.length - 8 : current.value - 3;
+});
+const showList = computed(() => props.detail.chapterDtoList?.length <= 8 ? props.detail.chapterDtoList : props.detail.chapterDtoList?.slice(startIndex.value, startIndex.value + 8));
 
 function show() {
-  visiable.value = true
+  visiable.value = true;
 }
 
 function toDetail(i) {
@@ -128,23 +138,23 @@ function toDetail(i) {
   let previewSetting = props.detail.previewSetting;
   let studySetting = props.detail.studySetting;
   let isStudy = false;
-  let chapterId = props.detail.chapterDtoList[i].id
-  console.log(studySetting)
+  let chapterId = props.detail.chapterDtoList[i].id;
+  console.log(studySetting);
   if (previewSetting == null) {
     // 如果未设置预览 则只可以看当前关卡 其余关卡不让点击
     if (current.value !== i) {
       ElMessage.warning("当前关卡不可预览");
-      return
+      return;
     }
     isStudy = true;
   } else {
     if (current.value !== i) {
       let lookArr = [];
-      lookArr = previewSetting.split(',')
+      lookArr = previewSetting.split(",");
       if ((i + 1) >= lookArr[0] && (i + 1) <= lookArr[1]) {
         if (studySetting !== null) {
           let studyArr = [];
-          studyArr = studySetting.split(',')
+          studyArr = studySetting.split(",");
           if ((i + 1) >= studyArr[0] && (i + 1) <= studyArr[1]) {
             isStudy = true;
           } else {
@@ -155,7 +165,7 @@ function toDetail(i) {
         }
       } else {
         ElMessage.warning("当前关卡不可预览");
-        return
+        return;
       }
     } else {
       isStudy = true;
@@ -170,11 +180,11 @@ function toDetail(i) {
       `${window.location.protocol + import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
         `routerId=${props.detail.id}&routerName=${props.detail.name}&chapterId=${chapterId}&isStudy=${isStudy}`
       )}`
-      ,'_top');
+      , "_top");
 }
 
 function close() {
-  visiable.value = false
+  visiable.value = false;
 }
 </script>
 <style lang="scss">
@@ -189,6 +199,7 @@ function close() {
   position: absolute;
   cursor: pointer;
 }
+
 .nameClass {
   overflow: hidden;
   white-space: nowrap;