chore: 学生端实训指导修改为展示多条数据

src/modules/student/lab/api.ts

@@ -16,8 +16,8 @@ export function getExperimentCase(params: { experiment_id: string }) {
 }
 
 // 获取实验指导书
-export function getExperimentBook(params: { experiment_id: string }) {
-  return httpRequest.get('/api/lab/v1/student/experiment-book/detail', { params })
+export function getExperimentBookList(params: { experiment_id: string }) {
+  return httpRequest.get('/api/lab/v1/student/experiment-book/list', { params })
 }
 
 // 获取实验视频

src/modules/student/lab/components/Book.vue

 <script setup lang="ts">
 import type { ExperimentBookType } from '../types'
+import { Document, CloseBold } from '@element-plus/icons-vue'
 import Preview from '@/components/Preview.vue'
-import { getExperimentBook } from '../api'
+import { getExperimentBookList } from '../api'
 
 import { useLog } from '@/composables/useLog'
 const log = useLog()
@@ -12,29 +13,82 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-let detail = $ref<ExperimentBookType>()
+let list = $ref<ExperimentBookType[]>([])
 function fetchInfo() {
   if (!props.experiment_id) return
-  getExperimentBook({ experiment_id: props.experiment_id }).then(res => {
-    detail = res.data.detail
+  getExperimentBookList({ experiment_id: props.experiment_id }).then(res => {
+    list = res.data.items
+  })
+}
+watchEffect(() => {
+  fetchInfo()
+})
+
+let currentRaw = $ref<ExperimentBookType | undefined>()
+let show = $ref(false)
+// 预览
+function handleView(row: ExperimentBookType) {
+  currentRaw = row
+  show = true
   // 日志上送
   log.upload({
     event: 'file_event',
     action: 'experiment_book_stu_watch_action',
-      data: {
-        experiment_id: props.experiment_id,
-        course_id: props.course_id,
-        book_id: detail?.id
-      }
-    })
+    data: { experiment_id: props.experiment_id, course_id: props.course_id, book_id: row.id }
   })
 }
-watchEffect(() => {
-  fetchInfo()
-})
+// 关闭
+function handleClose() {
+  show = false
+}
 </script>
 
 <template>
-  <Preview :url="detail.url" v-if="props.experiment_id && detail?.id"></Preview>
+  <div v-if="props.experiment_id && list.length">
+    <ul class="book-list">
+      <li v-for="item in list" :key="item.id" @click="handleView(item)">
+        <el-icon><Document /></el-icon>
+        <p>{{ item.name }}</p>
+      </li>
+    </ul>
+  </div>
   <el-empty description="暂无数据" v-else />
+  <!-- 预览 -->
+  <div class="book-preview" v-if="show && currentRaw">
+    <div class="book-preview__close" @click="handleClose">
+      <el-button type="info" circle :icon="CloseBold" />
+    </div>
+    <Preview :url="currentRaw.url"></Preview>
+  </div>
 </template>
+
+<style lang="scss">
+.book-list {
+  li {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    font-size: 14px;
+    cursor: pointer;
+    .el-icon {
+      margin-right: 5px;
+    }
+  }
+}
+.book-preview {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  right: 15px;
+  bottom: 15px;
+  background-color: #fff;
+}
+.book-preview__close {
+  position: absolute;
+  right: -12px;
+  top: -12px;
+  font-size: 20px;
+  color: #fff;
+  cursor: pointer;
+}
+</style>