chore: update

package-lock.json

@@ -17,6 +17,7 @@
         "countup.js": "^2.3.2",
         "dayjs": "^1.11.5",
         "element-plus": "^2.2.15",
+        "file-saver": "^2.0.5",
         "lodash-es": "^4.17.21",
         "pinia": "^2.0.21",
         "qs": "^6.11.0",
@@ -2295,6 +2296,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/file-uri-to-path": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-2.0.0.tgz",
@@ -6423,6 +6429,11 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-2.0.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "countup.js": "^2.3.2",
     "dayjs": "^1.11.5",
     "element-plus": "^2.2.15",
+    "file-saver": "^2.0.5",
     "lodash-es": "^4.17.21",
     "pinia": "^2.0.21",
     "qs": "^6.11.0",

src/components/ImageViewer.vue

 <script setup lang="ts">
-import { Close } from '@element-plus/icons-vue'
+import { Close, Download } from '@element-plus/icons-vue'
 import { onKeyStroke } from '@vueuse/core'
+import { saveAs } from 'file-saver'
 
 interface FileItem {
   name: string
@@ -24,6 +25,10 @@ const emit = defineEmits<{
 onKeyStroke('Escape', () => {
   emit('update:modelValue', false)
 })
+// 下载
+function handleDownload(item: FileItem) {
+  saveAs(item.url, item.name)
+}
 </script>
 
 <template>
@@ -33,7 +38,15 @@ onKeyStroke('Escape', () => {
     </div>
     <el-carousel :autoplay="false" :initial-index="index" arrow="always" height="100vh">
       <el-carousel-item v-for="item in items" :key="item.url">
-        <div class="image-viewer__pic"><img :src="item.url" /></div>
+        <div class="image-viewer__inner">
+          <div class="image-viewer__pic">
+            <div class="image-viewer__pic-header">
+              <h1>{{ item.name }}</h1>
+              <el-button :icon="Download" @click="handleDownload(item)">下载</el-button>
+            </div>
+            <img :src="item.url" />
+          </div>
+        </div>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -47,7 +60,7 @@ onKeyStroke('Escape', () => {
   right: 0;
   bottom: 0;
   z-index: 10000;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.6);
 }
 .image-viewer__close {
   position: absolute;
@@ -69,15 +82,33 @@ onKeyStroke('Escape', () => {
   background-color: var(--el-text-color-regular);
   border-color: #fff;
 }
-.image-viewer__pic {
-  width: 100%;
+.image-viewer__inner {
   height: 100%;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+}
+.image-viewer__pic {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 60px;
+  max-height: calc(100vh - 60px);
   img {
     max-width: 100%;
     max-height: 100%;
   }
 }
+.image-viewer__pic-header {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff;
+}
 </style>

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

 <script setup lang="ts">
 import type { ExperimentRecord } from '../types'
+import { ElMessageBox } from 'element-plus'
 import ImageViewer from '@/components/ImageViewer.vue'
 import { uploadExperimentPicture } from '../api'
 
@@ -28,21 +29,28 @@ function handlePreview(index: number) {
 }
 // 删除
 function handleRemove(index: number) {
+  ElMessageBox.confirm('删除之后无法恢复，确认删除该截图吗？', '提示').then(() => {
     if (!props.experiment_id) return
     const pictures = detail.pictures.filter((item, i) => i !== index)
     uploadExperimentPicture({ experiment_id: props.experiment_id, pictures: JSON.stringify(pictures) }).then(() => {
       emit('update')
     })
+  })
 }
 </script>
 
 <template>
   <el-empty description="暂无数据" v-if="isEmpty" />
   <template v-else>
-    <div class="result-score" v-if="detail.status === 2">
+    <div class="result-score">
       <h2>我的成绩</h2>
+      <template v-if="detail.status === 2">
         <p class="t1">{{ parseFloat(detail.score) }}</p>
         <p class="t2">批改讲师：{{ detail.checker_user.real_name }}</p>
+      </template>
+      <template v-else>
+        <p class="t1">--</p>
+      </template>
     </div>
     <h3>实验过程</h3>
     <ul class="picture-list">