预览界面初建

src/icons/svg/components/navigation.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H18V2H0V0ZM0 7H12V9H0V7ZM0 14H18V16H0V14Z" fill="white"/>
+</svg>

src/views/book/courseware/preview/index.vue

@@ -8,7 +8,7 @@
             <span class="name">{{ item.name }}</span>
           </div>
           <div v-for="li in item.nodes" :key="li.id">
-            <div :class="['catalogue-item', 'children']">
+            <div :class="['catalogue-item', 'children', curChapterId === li.id ? 'active' : '']">
               <span class="name">{{ li?.name }}</span>
             </div>
           </div>
@@ -17,7 +17,7 @@
     </div>
     <div class="content-area">
       <div class="content-top">
-        <el-button><SvgIcon icon-class="quit" /> 退出预览</el-button>
+        <el-button @click="goBack"><SvgIcon icon-class="quit" size="14" /> 退出预览</el-button>
       </div>
       <div
         class="content"
@@ -33,14 +33,21 @@
           },
         ]"
       >
-        <div></div>
+        <div class="navigation">
+          <span class="navigation-label"> <SvgIcon icon-class="navigation" size="14" />{{ getCatalogueName() }} </span>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { GetCoursewareContent, GetBookChapterStruct, GetCoursewareList_Chapter } from '@/api/book';
+import {
+  GetCoursewareContent,
+  GetBookChapterStruct,
+  GetCoursewareList_Chapter,
+  GetCoursewareComponentContent_View,
+} from '@/api/book';
 
 export default {
   name: 'PreviewPage',
@@ -49,7 +56,7 @@ export default {
     return {
       book_id: this.$route.params.book_id,
       chapter_id,
-      curChaterId: chapter_id,
+      curChapterId: chapter_id,
       data: {
         background_image_url: '',
         background_position: {
@@ -72,8 +79,18 @@ export default {
       this.setCurPosition(this.chapter_id);
     });
     this.getCoursewareList_Chapter(this.chapter_id);
+    this.GetCoursewareComponentContent_View();
   },
   methods: {
+    // 获取课件数据
+    getCoursewareComponentContent_View() {
+      GetCoursewareComponentContent_View({ courseware_id: this.coursewareId, component_id: this.componentId }).then(
+        ({ content }) => {
+          // if (content) this.file_list = JSON.parse(content).file_list;
+        },
+      );
+    },
+
     goBack() {
       this.$router.push(`/chapter?chapter_id=${this.chapter_id}&book_id=${this.book_id}`);
     },
@@ -112,6 +129,16 @@ export default {
         if (content) this.data = JSON.parse(content);
       });
     },
+    getNodeName(index) {
+      let node = this.nodes;
+      for (let i = 0; i <= index; i++) {
+        node = i === 0 ? node[this.curPosition[i]] : node.nodes[this.curPosition[i]];
+      }
+      return node?.name;
+    },
+    getCatalogueName() {
+      return this.curPosition.map((item, index) => this.getNodeName(index)).join(' / ');
+    },
   },
 };
 </script>
@@ -125,7 +152,6 @@ export default {
   .catalogue {
     display: flex;
     flex-direction: column;
-    row-gap: 8px;
     height: 100%;
     padding: 24px;
     background-color: #fff;
@@ -139,7 +165,7 @@ export default {
     &-item {
       display: flex;
       column-gap: 8px;
-      padding: 8px 52px 8px 16px;
+      padding: 8px 32px 8px 16px;
       font-size: 14px;
       border-bottom: 1px solid #ebebeb;
 
@@ -147,6 +173,10 @@ export default {
         background-color: #f3f3f3;
       }
 
+      &.active {
+        background-color: #f3f3f3;
+      }
+
       &.subdirectory {
         .name {
           font-weight: bold;
@@ -183,18 +213,20 @@ export default {
       justify-content: end;
       width: 100%;
       margin-bottom: 18px;
+      font-size: 16px;
     }
 
     .content {
       display: flex;
       flex-direction: column;
       row-gap: 6px;
-      width: 100%;
+      width: 94%;
       min-height: calc(100% - 56px);
       padding: 24px;
       background-color: #fff;
       background-repeat: no-repeat;
-      border-radius: 4px;
+      border: 3px solid #f44444;
+      border-radius: 16px;
 
       .row {
         display: grid;
@@ -205,6 +237,21 @@ export default {
           display: grid;
         }
       }
+
+      .navigation {
+        margin: -10px 0 0 -24px;
+
+        &-label {
+          padding: 18px 24px;
+          color: #fff;
+          background-color: #f44444;
+          border-radius: 16px 0;
+
+          .svg-icon {
+            margin: 0 22px 0 1px;
+          }
+        }
+      }
     }
   }
 }