feat: 新增DragPanel component

src/components/DragPanel.vue

+<script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+
+const emit = defineEmits<{
+  (e: 'resize'): void
+}>()
+
+const leftPanelVisible = $ref<boolean>(true)
+const leftPanelWidth = useStorage('leftPanelWidth', 400)
+const leftPanelWidthText = $computed(() => {
+  return `${leftPanelWidth.value}px`
+})
+
+// 拖拽改变左侧宽度
+// 因为鼠标移动文档和iframe影响不能move
+let dragFlag = $ref(false)
+function useDrag() {
+  const dragDom = document.getElementById('panel-resize')
+  if (dragDom) {
+    dragDom.addEventListener('mousedown', e => {
+      e.preventDefault()
+      dragFlag = true
+      document.onmousemove = e => {
+        leftPanelWidth.value = e.clientX
+      }
+      document.onmouseup = () => {
+        document.onmousemove = null
+        document.onmouseup = null
+        dragFlag = false
+        emit('resize')
+      }
+    })
+  }
+}
+
+onMounted(() => {
+  useDrag()
+})
+</script>
+
+<template>
+  <section class="drag-panel">
+    <div class="drag-panel-left" :class="{ 'is-hidden': !leftPanelVisible }">
+      <div class="drag-cover" v-if="dragFlag"></div>
+      <slot name="left"></slot>
+      <div class="panel-resize" id="panel-resize"></div>
+      <div class="panel-icon" @click="leftPanelVisible = !leftPanelVisible">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 86" aria-hidden="true" width="16" height="86">
+          <g fill="none" fill-rule="evenodd">
+            <path
+              class="path-wapper"
+              d="M0 0l14.12 8.825A4 4 0 0116 12.217v61.566a4 4 0 01-1.88 3.392L0 86V0z"
+              fill="#e1e4eb"></path>
+            <path
+              class="path-arrow"
+              d="M10.758 48.766a.778.778 0 000-1.127L6.996 43l3.762-4.639a.778.778 0 000-1.127.85.85 0 00-1.172 0l-4.344 5.202a.78.78 0 000 1.128l4.344 5.202a.85.85 0 001.172 0z"
+              fill="#8D9EA7"
+              fill-rule="nonzero"></path>
+          </g>
+        </svg>
+      </div>
+    </div>
+    <div class="drag-panel-right">
+      <div class="drag-cover" v-if="dragFlag"></div>
+      <slot name="right"></slot>
+    </div>
+  </section>
+</template>
+
+<style lang="scss">
+.drag-panel {
+  display: flex;
+  height: calc(100vh - 110px);
+}
+.drag-panel-left {
+  position: relative;
+  width: v-bind(leftPanelWidthText);
+  padding: 20px;
+  background-color: #e1e4eb;
+  border-radius: 6px;
+  box-sizing: border-box;
+  transition: all 0.1s;
+  &.is-hidden {
+    width: 0 !important;
+    padding: 0;
+    .panel-resize {
+      display: none;
+    }
+    .panel-icon {
+      left: -20px;
+      right: 0;
+    }
+    .path-arrow {
+      transform-origin: center center;
+      transform: rotate(180deg);
+    }
+  }
+  .panel-resize {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 20px;
+    cursor: col-resize;
+    z-index: 9999;
+  }
+  .panel-icon {
+    position: absolute;
+    top: 50%;
+    right: -16px;
+    width: 16px;
+    height: 86px;
+    transform: translateY(-50%);
+    z-index: 100;
+    cursor: pointer;
+  }
+}
+.drag-panel-right {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin-left: 20px;
+}
+.drag-cover {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  opacity: 0;
+}
+</style>

src/modules/admin/contest/check/views/Detail.vue

 <script setup lang="ts">
 import Preview from '@/components/Preview.vue'
+import DragPanel from '@/components/DragPanel.vue'
 import { getCheckView } from '../api'
-import { useStorage } from '@vueuse/core'
 
 const ScoreDialog = defineAsyncComponent(() => import('../components/ScoreDialog.vue'))
 
@@ -11,12 +11,6 @@ interface Props {
 const props = defineProps<Props>()
 
 // 左侧
-const leftPanelVisible = $ref<boolean>(true)
-const leftPanelWidth = useStorage('leftPanelWidth', 400)
-const leftPanelWidthText = $computed(() => {
-  return `${leftPanelWidth.value}px`
-})
-
 let detail = $ref<any>()
 provide('detail', $$(detail))
 
@@ -36,66 +30,24 @@ watchEffect(() => {
 // 评分
 const dialogVisible = $ref(false)
 
-// 拖拽改变左侧宽度
-// 因为鼠标移动文档和iframe影响不能move
-let dragFlag = $ref(false)
-let bookKey = $ref(0)
-watchEffect(() => {
-  if (!dragFlag) {
-    bookKey = Date.now()
-  }
-})
-function dragControllerDiv() {
-  const dragDom = document.getElementById('panel-resize')
-  if (dragDom) {
-    dragDom.addEventListener('mousedown', e => {
-      e.preventDefault()
-      dragFlag = true
-      document.onmousemove = e => {
-        leftPanelWidth.value = e.clientX
-      }
-      document.onmouseup = () => {
-        document.onmousemove = null
-        document.onmouseup = null
-        dragFlag = false
-      }
-    })
-  }
+let resizeKey = $ref(0)
+function handleResize() {
+  resizeKey = Date.now()
 }
-onMounted(() => {
-  dragControllerDiv()
-})
 </script>
 
 <template>
-  <section class="lab">
-    <div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }">
-      <div class="lab-left__inner">
+  <DragPanel @resize="handleResize">
+    <template #left>
+      <div class="lab-left">
         <el-tabs type="border-card">
           <el-tab-pane label="评分规则" lazy>
-            <div class="pop" v-if="dragFlag"></div>
-            <Preview :url="file.url" :key="bookKey"></Preview>
+            <Preview :url="file.url" :key="resizeKey"></Preview>
           </el-tab-pane>
         </el-tabs>
       </div>
-      <div class="panel-resize" id="panel-resize"></div>
-      <div class="panel-icon" @click="leftPanelVisible = !leftPanelVisible">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 86" aria-hidden="true" width="16" height="86">
-          <g fill="none" fill-rule="evenodd">
-            <path
-              class="path-wapper"
-              d="M0 0l14.12 8.825A4 4 0 0116 12.217v61.566a4 4 0 01-1.88 3.392L0 86V0z"
-              fill="#e1e4eb"></path>
-            <path
-              class="path-arrow"
-              d="M10.758 48.766a.778.778 0 000-1.127L6.996 43l3.762-4.639a.778.778 0 000-1.127.85.85 0 00-1.172 0l-4.344 5.202a.78.78 0 000 1.128l4.344 5.202a.85.85 0 001.172 0z"
-              fill="#8D9EA7"
-              fill-rule="nonzero"></path>
-          </g>
-        </svg>
-      </div>
-    </div>
-    <div class="lab-right" v-if="detail">
+    </template>
+    <template #right v-if="detail">
       <AppCard>
         <el-row justify="space-between">
           <div class="info">
@@ -117,49 +69,20 @@ onMounted(() => {
         </el-row>
       </AppCard>
       <div class="lab-box">
-        <div class="pop" v-if="dragFlag"></div>
         <iframe :src="detail.competition_uri" frameborder="0" class="iframe" ref="iframeRef"></iframe>
       </div>
-    </div>
-  </section>
+    </template>
+  </DragPanel>
   <ScoreDialog v-model="dialogVisible"></ScoreDialog>
 </template>
 
 <style lang="scss" scoped>
-.lab {
-  display: flex;
-  height: calc(100vh - 110px);
-}
 .lab-left {
-  position: relative;
-  width: v-bind(leftPanelWidthText);
-  padding: 20px;
-  background-color: #e1e4eb;
-  border-radius: 6px;
-  box-sizing: border-box;
-  transition: all 0.1s;
-  &.is-hidden {
-    width: 0;
-    padding: 0;
-    .panel-resize {
-      display: none;
-    }
-    .panel-icon {
-      left: -20px;
-      right: 0;
-    }
-    .path-arrow {
-      transform-origin: center center;
-      transform: rotate(180deg);
-    }
-  }
-  .lab-left__inner {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
   .el-tabs {
     flex: 1;
     border: 0;
@@ -183,32 +106,6 @@ onMounted(() => {
   }
 }
 
-.panel-resize {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 20px;
-  cursor: col-resize;
-  z-index: 100;
-}
-.panel-icon {
-  position: absolute;
-  top: 50%;
-  right: -16px;
-  width: 16px;
-  height: 86px;
-  transform: translateY(-50%);
-  z-index: 100;
-  cursor: pointer;
-}
-.lab-right {
-  margin-left: 20px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
 .lab-box {
   position: relative;
   flex: 1;
@@ -230,13 +127,4 @@ onMounted(() => {
     margin-left: 40px;
   }
 }
-.pop {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 999999;
-  opacity: 0;
-}
 </style>

src/modules/student/contest/views/Lab.vue

@@ -2,10 +2,10 @@
 import type { ExperimentRecord, Contest } from '../types'
 import { HomeFilled } from '@element-plus/icons-vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
+import DragPanel from '@/components/DragPanel.vue'
 import { upload } from '@/utils/upload'
 import { getContest, getExperimentRecord, uploadExperimentPicture } from '../api'
 import dayjs from 'dayjs'
-import { useStorage } from '@vueuse/core'
 
 const Book = defineAsyncComponent(() => import('../components/Book.vue'))
 const Video = defineAsyncComponent(() => import('../components/Video.vue'))
@@ -29,12 +29,6 @@ onMounted(() => {
 })
 
 // 左侧
-const leftPanelVisible = $ref<boolean>(true)
-const leftPanelWidth = useStorage('leftPanelWidth', 400)
-const leftPanelWidthText = $computed(() => {
-  return `${leftPanelWidth.value}px`
-})
-
 let detail = $ref<ExperimentRecord>()
 provide('detail', $$(detail))
 
@@ -94,7 +88,6 @@ function handleCaptureCallback(event: MessageEvent) {
 }
 onMounted(() => {
   window.addEventListener('message', handleCaptureCallback, false)
-  dragControllerDiv()
 })
 onUnmounted(() => {
   window.removeEventListener('message', handleCaptureCallback, false)
@@ -109,44 +102,20 @@ function uploadPicture(url: string) {
     screenshotLoading = false
   })
 }
-
-// 拖拽改变左侧宽度
-// 因为鼠标移动文档和iframe影响不能move
-let dragFlag = $ref(false)
-let bookKey = $ref(0)
-watchEffect(() => {
-  if (!dragFlag) {
-    bookKey = Date.now()
-  }
-})
-function dragControllerDiv() {
-  const dragDom = document.getElementById('panel-resize')
-  if (dragDom) {
-    dragDom.addEventListener('mousedown', e => {
-      e.preventDefault()
-      dragFlag = true
-      document.onmousemove = e => {
-        leftPanelWidth.value = e.clientX
-      }
-      document.onmouseup = () => {
-        document.onmousemove = null
-        document.onmouseup = null
-        dragFlag = false
-      }
-    })
-  }
+let resizeKey = $ref(0)
+function handleResize() {
+  resizeKey = Date.now()
 }
 </script>
 
 <template>
-  <section class="lab">
-    <div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }">
-      <div class="lab-left__inner">
+  <DragPanel @resize="handleResize">
+    <template #left>
+      <div class="lab-left">
         <h1>{{ competition?.name }}</h1>
         <el-tabs type="border-card">
           <el-tab-pane label="实训指导" lazy>
-            <div class="pop" v-if="dragFlag"></div>
-            <Book :competition_id="id" :key="bookKey"></Book>
+            <Book :competition_id="id" :key="resizeKey"></Book>
           </el-tab-pane>
           <el-tab-pane label="操作视频" lazy>
             <Video :competition_id="id"></Video>
@@ -159,24 +128,8 @@ function dragControllerDiv() {
           </el-tab-pane>
         </el-tabs>
       </div>
-      <div class="panel-resize" id="panel-resize"></div>
-      <div class="panel-icon" @click="leftPanelVisible = !leftPanelVisible">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 86" aria-hidden="true" width="16" height="86">
-          <g fill="none" fill-rule="evenodd">
-            <path
-              class="path-wapper"
-              d="M0 0l14.12 8.825A4 4 0 0116 12.217v61.566a4 4 0 01-1.88 3.392L0 86V0z"
-              fill="#e1e4eb"></path>
-            <path
-              class="path-arrow"
-              d="M10.758 48.766a.778.778 0 000-1.127L6.996 43l3.762-4.639a.778.778 0 000-1.127.85.85 0 00-1.172 0l-4.344 5.202a.78.78 0 000 1.128l4.344 5.202a.85.85 0 001.172 0z"
-              fill="#8D9EA7"
-              fill-rule="nonzero"></path>
-          </g>
-        </svg>
-      </div>
-    </div>
-    <div class="lab-right">
+    </template>
+    <template #right>
       <AppCard>
         <el-row justify="space-between">
           <el-button type="primary" :icon="HomeFilled" @click="handleBackHome">返回首页</el-button>
@@ -186,7 +139,6 @@ function dragControllerDiv() {
         </el-row>
       </AppCard>
       <div class="lab-box">
-        <div class="pop" v-if="dragFlag"></div>
         <iframe
           :src="competition?.train_platform_uri"
           :key="iframeKey"
@@ -194,47 +146,19 @@ function dragControllerDiv() {
           class="iframe"
           ref="iframeRef"></iframe>
       </div>
-    </div>
-  </section>
+    </template>
+  </DragPanel>
 </template>
 
 <style lang="scss" scoped>
-.lab {
-  display: flex;
-  height: calc(100vh - 110px);
-}
 .lab-left {
-  position: relative;
-  width: v-bind(leftPanelWidthText);
-  padding: 20px;
-  background-color: #e1e4eb;
-  border-radius: 6px;
-  box-sizing: border-box;
-  transition: all 0.1s;
-  &.is-hidden {
-    width: 0 !important;
-    padding: 0;
-    .panel-resize {
-      display: none;
-    }
-    .panel-icon {
-      left: -20px;
-      right: 0;
-    }
-    .path-arrow {
-      transform-origin: center center;
-      transform: rotate(180deg);
-    }
-  }
-  .lab-left__inner {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    h1 {
-      margin-bottom: 20px;
-    }
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  h1 {
+    margin-bottom: 20px;
   }
   .el-tabs {
     flex: 1;
@@ -258,32 +182,6 @@ function dragControllerDiv() {
     overflow-y: auto;
   }
 }
-.panel-resize {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 20px;
-  cursor: col-resize;
-  z-index: 100;
-}
-.panel-icon {
-  position: absolute;
-  top: 50%;
-  right: -16px;
-  width: 16px;
-  height: 86px;
-  transform: translateY(-50%);
-  z-index: 100;
-  cursor: pointer;
-}
-.lab-right {
-  margin-left: 20px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
 .lab-box {
   position: relative;
   flex: 1;
@@ -294,13 +192,4 @@ function dragControllerDiv() {
   width: 100%;
   height: 100%;
 }
-.pop {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 999999;
-  opacity: 0;
-}
 </style>

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

@@ -2,11 +2,11 @@
 import type { CourseType, ExperimentRecord } from '../types'
 import { HomeFilled } from '@element-plus/icons-vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
+import DragPanel from '@/components/DragPanel.vue'
 import { useGetCourseList } from '../composables/useGetCourseList'
 import { upload } from '@/utils/upload'
 import { getExperimentRecord, uploadExperimentPicture, submitExperimentRecord } from '../api'
 import dayjs from 'dayjs'
-import { useStorage } from '@vueuse/core'
 
 const Book = defineAsyncComponent(() => import('../components/Book.vue'))
 const Video = defineAsyncComponent(() => import('../components/Video.vue'))
@@ -17,11 +17,6 @@ const ReportDialog = defineAsyncComponent(() => import('../components/ReportDial
 const route = useRoute()
 
 // 左侧
-const leftPanelVisible = $ref<boolean>(true)
-const leftPanelWidth = useStorage('leftPanelWidth', 400)
-const leftPanelWidthText = $computed(() => {
-  return `${leftPanelWidth.value}px`
-})
 const form = reactive<{ course_id: string; experiment_id: string }>({
   course_id: (route.query.course_id as string) || '',
   experiment_id: (route.query.experiment_id as string) || ''
@@ -121,7 +116,6 @@ function handleCaptureCallback(event: MessageEvent) {
 }
 onMounted(() => {
   window.addEventListener('message', handleCaptureCallback, false)
-  dragControllerDiv()
 })
 onUnmounted(() => {
   window.removeEventListener('message', handleCaptureCallback, false)
@@ -147,39 +141,16 @@ function handleSubmit() {
     }
   )
 }
-
-// 拖拽改变左侧宽度
-// 因为鼠标移动文档和iframe影响不能move
-let dragFlag = $ref(false)
-let bookKey = $ref(0)
-watchEffect(() => {
-  if (!dragFlag) {
-    bookKey = Date.now()
-  }
-})
-function dragControllerDiv() {
-  const dragDom = document.getElementById('panel-resize')
-  if (dragDom) {
-    dragDom.addEventListener('mousedown', e => {
-      e.preventDefault()
-      dragFlag = true
-      document.onmousemove = e => {
-        leftPanelWidth.value = e.clientX
-      }
-      document.onmouseup = () => {
-        document.onmousemove = null
-        document.onmouseup = null
-        dragFlag = false
-      }
-    })
-  }
+let resizeKey = $ref(0)
+function handleResize() {
+  resizeKey = Date.now()
 }
 </script>
 
 <template>
-  <section class="lab">
-    <div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }">
-      <div class="lab-left__inner">
+  <DragPanel @resize="handleResize">
+    <template #left>
+      <div class="lab-left">
         <el-form :model="form" label-suffix=":" hide-required-asterisk>
           <el-form-item label="请选择课程">
             <el-select :model-value="form.course_id" @change="handleCourseChange" style="width: 100%">
@@ -194,8 +165,7 @@ function dragControllerDiv() {
         </el-form>
         <el-tabs type="border-card">
           <el-tab-pane label="实训指导" lazy>
-            <div class="pop" v-if="dragFlag"></div>
-            <Book :course_id="form.course_id" :experiment_id="form.experiment_id" :key="bookKey"></Book>
+            <Book :course_id="form.course_id" :experiment_id="form.experiment_id" :key="resizeKey"></Book>
           </el-tab-pane>
           <el-tab-pane label="操作视频" lazy>
             <Video :course_id="form.course_id" :experiment_id="form.experiment_id"></Video>
@@ -208,24 +178,8 @@ function dragControllerDiv() {
           </el-tab-pane>
         </el-tabs>
       </div>
-      <div class="panel-resize" id="panel-resize"></div>
-      <div class="panel-icon" @click="leftPanelVisible = !leftPanelVisible">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 86" aria-hidden="true" width="16" height="86">
-          <g fill="none" fill-rule="evenodd">
-            <path
-              class="path-wapper"
-              d="M0 0l14.12 8.825A4 4 0 0116 12.217v61.566a4 4 0 01-1.88 3.392L0 86V0z"
-              fill="#e1e4eb"></path>
-            <path
-              class="path-arrow"
-              d="M10.758 48.766a.778.778 0 000-1.127L6.996 43l3.762-4.639a.778.778 0 000-1.127.85.85 0 00-1.172 0l-4.344 5.202a.78.78 0 000 1.128l4.344 5.202a.85.85 0 001.172 0z"
-              fill="#8D9EA7"
-              fill-rule="nonzero"></path>
-          </g>
-        </svg>
-      </div>
-    </div>
-    <div class="lab-right">
+    </template>
+    <template #right>
       <AppCard>
         <el-row justify="space-between">
           <el-button type="primary" :icon="HomeFilled" :disabled="submitted" @click="handleBackHome"
@@ -241,12 +195,12 @@ function dragControllerDiv() {
         </el-row>
       </AppCard>
       <div class="lab-box">
-        <div class="pop" v-if="dragFlag"></div>
         <el-empty description="您已经提交该实验，不能再进行操作，切换其他实验再做操作吧。" v-if="submitted" />
         <iframe :src="LAB_URL" :key="iframeKey" frameborder="0" class="iframe" ref="iframeRef" v-else></iframe>
       </div>
-    </div>
-  </section>
+    </template>
+  </DragPanel>
+
   <!-- 上传报告 -->
   <ReportDialog
     v-model="reportDialogVisible"
@@ -256,40 +210,12 @@ function dragControllerDiv() {
 </template>
 
 <style lang="scss" scoped>
-.lab {
-  display: flex;
-  height: calc(100vh - 110px);
-}
 .lab-left {
-  position: relative;
-  width: v-bind(leftPanelWidthText);
-  padding: 20px;
-  background-color: #e1e4eb;
-  border-radius: 6px;
-  box-sizing: border-box;
-  transition: all 0.1s;
-  &.is-hidden {
-    width: 0 !important;
-    padding: 0;
-    .panel-resize {
-      display: none;
-    }
-    .panel-icon {
-      left: -20px;
-      right: 0;
-    }
-    .path-arrow {
-      transform-origin: center center;
-      transform: rotate(180deg);
-    }
-  }
-  .lab-left__inner {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
   .el-tabs {
     flex: 1;
     border: 0;
@@ -312,32 +238,6 @@ function dragControllerDiv() {
     overflow-y: auto;
   }
 }
-.panel-resize {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 20px;
-  cursor: col-resize;
-  z-index: 100;
-}
-.panel-icon {
-  position: absolute;
-  top: 50%;
-  right: -16px;
-  width: 16px;
-  height: 86px;
-  transform: translateY(-50%);
-  z-index: 100;
-  cursor: pointer;
-}
-.lab-right {
-  margin-left: 20px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
 .lab-box {
   position: relative;
   flex: 1;
@@ -348,13 +248,4 @@ function dragControllerDiv() {
   width: 100%;
   height: 100%;
 }
-.pop {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 999999;
-  opacity: 0;
-}
 </style>