chore: update

src/components/ImageViewer.vue

 <script setup lang="ts">
 import { Close } from '@element-plus/icons-vue'
+import { onKeyStroke } from '@vueuse/core'
 
 interface FileItem {
   name: string
@@ -15,6 +16,14 @@ withDefaults(defineProps<Props>(), {
   modelValue: false,
   index: 0
 })
+const emit = defineEmits<{
+  (e: 'update:modelValue', visible: boolean): void
+}>()
+
+// esc 关闭
+onKeyStroke('Escape', () => {
+  emit('update:modelValue', false)
+})
 </script>
 
 <template>

src/modules/admin/lab/discuss/components/DiscussItem.vue

@@ -16,28 +16,29 @@ defineEmits<{
   <div class="discuss-item">
     <div class="discuss-box">
       <div class="discuss-box-user">
-        <img :src="info.created_operator_avatar" />
-        <p>{{ info.student_id_name }}</p>
+        <div class="discuss-box-user__avatar"><img :src="info.created_operator_avatar" /></div>
+        <div class="discuss-box-user__content">
+          <h3>{{ info.student_id_name }}</h3>
+          <p>{{ info.created_time }}</p>
+        </div>
+        <div class="button-comment">
+          <el-icon><ChatLineRound></ChatLineRound></el-icon>{{ info.replies_num }}
+        </div>
       </div>
       <div class="discuss-box-main">
-        <div class="discuss-box-header">
-          <p class="discuss-box-time">{{ info.created_time }}</p>
-          <div class="tools">
-            <el-icon><ChatLineRound></ChatLineRound></el-icon>{{ info.replies_num }}
-          </div>
-        </div>
         <h3>{{ info.title }}</h3>
         <div class="discuss-box-content" v-html="info.content"></div>
       </div>
     </div>
-    <div class="discuss-box discuss-comment" v-for="item in list" :key="item.id">
-      <div class="discuss-box-user">
+    <div class="discuss-comment" v-for="item in list" :key="item.id">
+      <div class="discuss-comment__avatar">
         <img :src="item.sso_id_avatar" />
-        <p>{{ item.sso_id_name }}</p>
       </div>
-      <div class="discuss-box-main">
-        <p class="discuss-box-time">{{ item.created_time }}</p>
-        <div class="discuss-box-content" v-html="item.content"></div>
+      <div class="discuss-comment-content">
+        <span class="discuss-comment__username">{{ item.sso_id_name }}</span
+        >：
+        <span v-html="item.content"></span>
+        <p class="discuss-comment-time">{{ item.created_time }}</p>
       </div>
     </div>
   </div>
@@ -45,56 +46,104 @@ defineEmits<{
 
 <style lang="scss" scoped>
 .discuss-box {
+  padding-bottom: 20px;
+  border-bottom: 1px solid #e6e6e6;
+}
+.discuss-box-user {
   display: flex;
-  margin: 10px 0;
-  padding: 10px;
-  font-size: 12px;
-  color: var(--main-color);
-  border-radius: 10px;
-  border: 1px solid var(--main-color);
-  &.discuss-comment {
-    margin-left: 40px;
-    color: #016fa0;
-    border: 1px solid #016fa0;
+  align-items: center;
+  .button-comment {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #333333;
+    cursor: pointer;
+    &.is-active {
+      color: var(--main-color);
+    }
+  }
+  .el-icon {
+    font-size: 16px;
+    margin-left: 10px;
+    margin-right: 5px;
   }
 }
-.discuss-box-user {
+.discuss-box-user__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
   img {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    overflow: hidden;
+    width: 100%;
+    height: 100%;
     object-fit: cover;
   }
+}
+.discuss-box-user__content {
+  flex: 1;
+  margin-left: 10px;
+  overflow: hidden;
+  h3 {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 20px;
+    color: #333333;
+  }
   p {
-    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #999999;
   }
 }
 .discuss-box-main {
-  flex: 1;
-  padding-left: 10px;
+  margin-left: 50px;
   h3 {
-    font-size: 14px;
+    padding: 16px 0;
+    font-size: 16px;
     font-weight: 500;
+    line-height: 20px;
+    color: #333333;
   }
 }
 .discuss-box-content {
-  padding: 5px 0;
-  color: #555;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: #333333;
 }
-.discuss-box-header {
+
+.discuss-comment {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .tools {
-    display: flex;
-    align-items: center;
-    .el-icon {
-      font-size: 16px;
-      margin-left: 10px;
-      margin-right: 5px;
-      color: #333333;
-    }
+  margin-top: 20px;
+}
+.discuss-comment__avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
 }
+.discuss-comment-content {
+  flex: 1;
+  margin-left: 10px;
+  color: #333;
+  overflow: hidden;
+}
+.discuss-comment__username {
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--main-color);
+}
+.discuss-comment-time {
+  margin-top: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #999999;
+  text-align: right;
+}
 </style>

src/modules/admin/lab/record/components/ScoreDialog.vue

@@ -78,8 +78,14 @@ function handleSubmit() {
 <template>
   <el-dialog title="学生实验评分" :close-on-click-modal="false" @update:modelValue="$emit('update:modelValue')">
     <el-form :rules="rules" label-width="120px" label-suffix="：" v-if="detail">
-      <el-form-item label="实验名称">{{ detail.experiment_name }}</el-form-item>
-      <el-form-item label="实验课程名称">{{ detail.course_name }}</el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="实验名称">{{ detail.experiment_name }}</el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="实验课程名称">{{ detail.course_name }}</el-form-item>
+        </el-col>
+      </el-row>
       <el-row>
         <el-col :span="12">
           <el-form-item label="学生姓名">{{ detail.student_name }}</el-form-item>
@@ -96,24 +102,8 @@ function handleSubmit() {
           <el-form-item label="所属班级">{{ detail.class_name }}</el-form-item>
         </el-col>
       </el-row>
-      <el-form-item label="实验报告文件">
-        <p v-if="file">
-          <a :href="file.url" target="_blank">
-            <el-icon><Document /></el-icon>{{ file.name }}
-          </a>
-        </p>
-      </el-form-item>
-      <el-form-item label="实验过程截图">
-        <ul class="picture-list">
-          <li v-for="item in pictures" :key="item.url">
-            <p class="t1">
-              <a :href="item.url" target="_blank">{{ item.name }}</a>
-            </p>
-            <p class="t2">截图时间：{{ item.upload_time }}</p>
-          </li>
-        </ul>
-      </el-form-item>
-      <el-form-item label="实验成绩">
+
+      <el-form-item label="实验成绩" class="form-item-score">
         <el-form
           ref="formRef"
           :model="form"
@@ -137,6 +127,23 @@ function handleSubmit() {
           </el-form-item>
         </el-form>
       </el-form-item>
+      <el-form-item label="实验报告文件">
+        <div v-if="file">
+          <a :href="file.url" target="_blank" class="file-item">
+            <el-icon><Document /></el-icon>{{ file.name }}
+          </a>
+        </div>
+      </el-form-item>
+      <el-form-item label="实验过程截图">
+        <ul class="picture-list">
+          <li v-for="item in pictures" :key="item.url">
+            <p class="t1">
+              <a :href="item.url" target="_blank">{{ item.name }}</a>
+            </p>
+            <p class="t2">截图时间：{{ item.upload_time }}</p>
+          </li>
+        </ul>
+      </el-form-item>
       <el-row justify="center">
         <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
         <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
@@ -146,6 +153,14 @@ function handleSubmit() {
 </template>
 
 <style lang="scss" scoped>
+.file-item {
+  display: flex;
+  align-items: center;
+  color: var(--main-color);
+  .el-icon {
+    margin-right: 5px;
+  }
+}
 .picture-list {
   width: 100%;
   li {
@@ -153,7 +168,7 @@ function handleSubmit() {
     justify-content: space-between;
   }
   a {
-    color: blue;
+    color: var(--main-color);
   }
   .t1 {
     flex: 1;
@@ -161,8 +176,16 @@ function handleSubmit() {
     text-overflow: ellipsis;
     overflow: hidden;
   }
-  .t2 {
-    flex: 1;
+}
+.form-item-score {
+  padding-top: 10px;
+  background-color: #f8f9fb;
+  border-radius: 16px;
+  :deep(.el-form-item__label) {
+    text-align: center;
+  }
+  .el-input-number {
+    width: 100px;
   }
 }
 </style>

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

@@ -5,7 +5,7 @@ import { useInfiniteScroll } from '@vueuse/core'
 import DiscussItem from './DiscussItem.vue'
 import { getExperimentDiscussList } from '../api'
 
-const DiscussAddDialog = defineAsyncComponent(() => import('./DiscussAddDialog.vue'))
+const DiscussPublish = defineAsyncComponent(() => import('./DiscussPublish.vue'))
 interface Props {
   experiment_id?: string
 }
@@ -41,8 +41,6 @@ const isEmpty = $computed(() => {
   return !props.experiment_id || !list.length
 })
 
-const dialogVisible = $ref(false)
-
 // 滚动加载
 const scrollRef = ref<HTMLElement>()
 useInfiniteScroll(
@@ -64,9 +62,8 @@ useInfiniteScroll(
       <el-radio :label="3">我的小组</el-radio>
       <el-radio :label="4">我的班级</el-radio>
     </el-radio-group>
-    <el-row justify="end">
-      <el-button round type="primary" @click="dialogVisible = true">发表新话题</el-button>
-    </el-row>
+    <!-- 发表新话题 -->
+    <DiscussPublish :experiment_id="experiment_id" @update="fetchInfo(true)" v-if="experiment_id"></DiscussPublish>
     <el-empty description="暂无数据" v-if="isEmpty" />
     <template v-else>
       <div class="discuss-scroll" ref="scrollRef">
@@ -81,13 +78,6 @@ useInfiniteScroll(
       </div>
     </template>
   </div>
-  <!-- 发表新话题 -->
-  <DiscussAddDialog
-    v-model="dialogVisible"
-    :experiment_id="experiment_id"
-    @update="fetchInfo(true)"
-    v-if="dialogVisible && experiment_id"
-  ></DiscussAddDialog>
 </template>
 
 <style lang="scss" scoped>

src/modules/student/lab/components/DiscussCommentAddDialog.vue → src/modules/student/lab/components/DiscussCommentPublish.vue

@@ -11,7 +11,6 @@ const props = defineProps<Props>()
 
 const emit = defineEmits<{
   (e: 'update'): void
-  (e: 'update:modelValue', visible: boolean): void
 }>()
 
 const formRef = $ref<FormInstance>()
@@ -30,26 +29,23 @@ function handleAdd() {
   addExperimentDiscussComment(params).then(() => {
     ElMessage({ message: '评论成功', type: 'success' })
     emit('update')
-    emit('update:modelValue', false)
+    formRef?.resetFields()
   })
 }
 </script>
 
 <template>
-  <el-dialog
-    title="话题评论"
-    :close-on-click-modal="false"
-    width="600px"
-    @update:modelValue="$emit('update:modelValue')"
+  <el-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    style="border-top: 1px dashed #e6e6e6; border-bottom: 1px dashed #e6e6e6; padding: 20px 0"
   >
-    <el-form ref="formRef" :model="form" :rules="rules">
-      <el-form-item prop="content">
-        <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" />
-      </el-form-item>
-      <el-row justify="center">
-        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
-        <el-button type="primary" round auto-insert-space @click="handleSubmit">评论</el-button>
-      </el-row>
-    </el-form>
-  </el-dialog>
+    <el-form-item prop="content">
+      <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" />
+    </el-form-item>
+    <el-row justify="end">
+      <el-button type="primary" @click="handleSubmit">评论</el-button>
+    </el-row>
+  </el-form>
 </template>

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

@@ -2,7 +2,7 @@
 import type { ExperimentDiscussType } from '../types'
 import { ChatLineRound } from '@element-plus/icons-vue'
 
-const DiscussCommentAddDialog = defineAsyncComponent(() => import('./DiscussCommentAddDialog.vue'))
+const DiscussCommentPublish = defineAsyncComponent(() => import('./DiscussCommentPublish.vue'))
 
 interface Props {
   data: ExperimentDiscussType
@@ -13,113 +13,156 @@ defineEmits<{
   (e: 'update'): void
 }>()
 
-const commentDialogVisible = $ref(false)
 const commentVisible = $ref(false)
-const commentButtonText = $computed(() => (commentVisible ? '收起' : '展开'))
 </script>
 <template>
   <div class="discuss-item">
     <div class="discuss-box">
       <div class="discuss-box-user">
-        <img :src="data.sso_user.avatar" />
-        <p>{{ data.sso_user.real_name || data.sso_user.nickname || data.sso_user.username }}</p>
+        <div class="discuss-box-user__avatar"><img :src="data.sso_user.avatar" /></div>
+        <div class="discuss-box-user__content">
+          <h3>{{ data.sso_user.real_name || data.sso_user.nickname || data.sso_user.username }}</h3>
+          <p>{{ data.created_time }}</p>
+        </div>
       </div>
       <div class="discuss-box-main">
-        <div class="discuss-box-header">
-          <p class="discuss-box-time">{{ data.created_time }}</p>
-          <div class="tools">
-            <el-button size="small" type="primary" plain round @click="commentVisible = !commentVisible">
-              {{ commentButtonText }}
-            </el-button>
-            <el-icon><ChatLineRound></ChatLineRound></el-icon>{{ data.reply_count }}
-          </div>
-        </div>
         <h3>{{ data.title }}</h3>
         <div class="discuss-box-content" v-html="data.content"></div>
       </div>
+      <div class="discuss-box-footer">
+        <div class="button-comment" :class="{ 'is-active': commentVisible }" @click="commentVisible = !commentVisible">
+          <el-icon><ChatLineRound></ChatLineRound></el-icon>{{ data.reply_count }}
+        </div>
+      </div>
     </div>
     <template v-if="commentVisible">
-      <div class="discuss-box discuss-comment" v-for="item in data.replies" :key="item.id">
-        <div class="discuss-box-user">
+      <!-- 我要评论 -->
+      <DiscussCommentPublish :data="data" @update="$emit('update')"></DiscussCommentPublish>
+      <div class="discuss-comment" v-for="item in data.replies" :key="item.id">
+        <div class="discuss-comment__avatar">
           <img :src="item.sso_user.avatar" />
-          <p>{{ item.sso_user.real_name || item.sso_user.nickname || item.sso_user.username }}</p>
         </div>
-        <div class="discuss-box-main">
-          <p class="discuss-box-time">{{ item.created_time }}</p>
-          <div class="discuss-box-content" v-html="item.content"></div>
+        <div class="discuss-comment-content">
+          <span class="discuss-comment__username">{{
+            item.sso_user.real_name || item.sso_user.nickname || item.sso_user.username
+          }}</span
+          >：
+          <span v-html="item.content"></span>
+          <p class="discuss-comment-time">{{ item.created_time }}</p>
         </div>
       </div>
     </template>
-    <el-row justify="end" style="margin-top: 10px">
-      <el-button round type="primary" size="small" @click="commentDialogVisible = true">我要评论</el-button>
-    </el-row>
   </div>
-  <!-- 我要评论 -->
-  <DiscussCommentAddDialog
-    :data="data"
-    v-model="commentDialogVisible"
-    @update="$emit('update')"
-    v-if="commentDialogVisible"
-  ></DiscussCommentAddDialog>
 </template>
 
 <style lang="scss" scoped>
 .discuss-item {
   margin-top: 10px;
-  padding: 10px 0;
-  border-top: 1px dashed #ccc;
+  border-top: 1px solid #e6e6e6;
 }
 .discuss-box {
-  display: flex;
-  margin: 10px 0;
-  padding: 10px;
-  font-size: 12px;
-  color: var(--main-color);
-  border-radius: 10px;
-  border: 1px solid var(--main-color);
-  &.discuss-comment {
-    margin-left: 40px;
-    color: #016fa0;
-    border: 1px solid #016fa0;
-  }
+  padding: 20px 0 10px;
 }
 .discuss-box-user {
+  display: flex;
+  align-items: center;
+}
+.discuss-box-user__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
   img {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    overflow: hidden;
+    width: 100%;
+    height: 100%;
     object-fit: cover;
   }
+}
+.discuss-box-user__content {
+  flex: 1;
+  margin-left: 10px;
+  overflow: hidden;
+  h3 {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 20px;
+    color: #333333;
+  }
   p {
-    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #999999;
   }
 }
 .discuss-box-main {
-  flex: 1;
-  padding-left: 10px;
+  margin-left: 50px;
   h3 {
-    font-size: 14px;
+    padding: 16px 0;
+    font-size: 16px;
     font-weight: 500;
+    line-height: 20px;
+    color: #333333;
   }
 }
 .discuss-box-content {
-  padding: 5px 0;
-  color: #555;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: #333333;
 }
-.discuss-box-header {
+.discuss-box-footer {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  .tools {
+  justify-content: flex-end;
+  margin-top: 10px;
+  .button-comment {
     display: flex;
     align-items: center;
-    .el-icon {
-      font-size: 16px;
-      margin-left: 10px;
-      margin-right: 5px;
-      color: #333333;
+    justify-content: center;
+    color: #333333;
+    cursor: pointer;
+    &.is-active {
+      color: var(--main-color);
     }
   }
+  .el-icon {
+    font-size: 16px;
+    margin-left: 10px;
+    margin-right: 5px;
+  }
+}
+.discuss-comment {
+  display: flex;
+  margin-top: 20px;
+}
+.discuss-comment__avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.discuss-comment-content {
+  flex: 1;
+  margin-left: 10px;
+  color: #333;
+  overflow: hidden;
+}
+.discuss-comment__username {
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--main-color);
+}
+.discuss-comment-time {
+  margin-top: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #999999;
+  text-align: right;
 }
 </style>

src/modules/student/lab/components/DiscussAddDialog.vue → src/modules/student/lab/components/DiscussPublish.vue

@@ -10,14 +10,13 @@ const props = defineProps<Props>()
 
 const emit = defineEmits<{
   (e: 'update'): void
-  (e: 'update:modelValue', visible: boolean): void
 }>()
 
 const formRef = $ref<FormInstance>()
 const form = reactive({ title: '', content: '' })
 const rules = ref<FormRules>({
-  title: [{ required: true, message: '请输入话题标题', trigger: 'blur' }],
-  content: [{ required: true, message: '请输入话题描述', trigger: 'blur' }]
+  title: [{ required: true, message: '请输入话题标题' }],
+  content: [{ required: true, message: '请输入话题描述' }]
 })
 
 // 提交
@@ -30,29 +29,21 @@ function handleAdd() {
   addExperimentDiscuss(params).then(() => {
     ElMessage({ message: '发表成功', type: 'success' })
     emit('update')
-    emit('update:modelValue', false)
+    formRef?.resetFields()
   })
 }
 </script>
 
 <template>
-  <el-dialog
-    title="发表新话题"
-    :close-on-click-modal="false"
-    width="600px"
-    @update:modelValue="$emit('update:modelValue')"
-  >
-    <el-form ref="formRef" :model="form" :rules="rules">
-      <el-form-item label="话题标题" prop="title">
-        <el-input v-model="form.title"></el-input>
-      </el-form-item>
-      <el-form-item label="话题描述" prop="content">
-        <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" />
-      </el-form-item>
-      <el-row justify="center">
-        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
-        <el-button type="primary" round auto-insert-space @click="handleSubmit">发布</el-button>
-      </el-row>
-    </el-form>
-  </el-dialog>
+  <el-form ref="formRef" :model="form" :rules="rules" style="padding: 20px 0 10px">
+    <el-form-item prop="title">
+      <el-input v-model="form.title" placeholder="话题标题"></el-input>
+    </el-form-item>
+    <el-form-item prop="content">
+      <el-input type="textarea" v-model="form.content" placeholder="话题描述" :autosize="{ minRows: 4, maxRows: 6 }" />
+    </el-form-item>
+    <el-row justify="end">
+      <el-button type="primary" @click="handleSubmit">发表</el-button>
+    </el-row>
+  </el-form>
 </template>

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

@@ -23,11 +23,12 @@ onMounted(() => {
   <div class="video-item">
     <h2>{{ data.name }}</h2>
     <!-- <img :src="data.cover" /> -->
-    <AppVideoPlayer
-      :options="{ sources: [{ src: playUrl, type: 'application/x-mpegURL' }] }"
-      style="width: 100%"
-      v-if="playUrl"
-    ></AppVideoPlayer>
+    <div style="height: 200px" v-if="playUrl">
+      <AppVideoPlayer
+        :options="{ sources: [{ src: playUrl, type: 'application/x-mpegURL' }] }"
+        style="width: 100%; height: 100%"
+      ></AppVideoPlayer>
+    </div>
   </div>
 </template>
 

src/modules/student/lab/views/Index.vue

@@ -88,7 +88,7 @@ onUnmounted(() => {
 // 上传截图
 function uploadPicture(url: string) {
   const pictures = detail?.pictures || []
-  pictures.unshift({ url, name: 'screenshot.png', upload_time: dayjs().format('YYYY-MM-DD HH:mm:ss') })
+  pictures.unshift({ url, name: Date.now() + '.png', upload_time: dayjs().format('YYYY-MM-DD HH:mm:ss') })
   uploadExperimentPicture({ experiment_id: form.experiment_id, pictures: JSON.stringify(pictures) }).then(() => {
     fetchInfo()
     screenshotLoading = false