chore: 优化拖拽

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

@@ -5,6 +5,7 @@ import { ElMessageBox, ElMessage } from 'element-plus'
 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'))
@@ -28,7 +29,11 @@ onMounted(() => {
 })
 
 // 左侧
-let leftPanelVisible = $ref<boolean>(true)
+const leftPanelVisible = $ref<boolean>(true)
+const leftPanelWidth = useStorage('leftPanelWidth', 400)
+const leftPanelWidthText = $computed(() => {
+  return `${leftPanelWidth.value}px`
+})
 
 let detail = $ref<ExperimentRecord>()
 provide('detail', $$(detail))
@@ -107,43 +112,41 @@ function uploadPicture(url: string) {
 
 // 拖拽改变左侧宽度
 // 因为鼠标移动文档和iframe影响不能move
-const dragFlag = ref(true)
+let dragFlag = $ref(false)
+let bookKey = $ref(0)
+watchEffect(() => {
+  if (!dragFlag) {
+    bookKey = Date.now()
+  }
+})
 function dragControllerDiv() {
-  const dragDom = document.getElementById('panel-icon')
-  const labLeftDom = document.getElementById('lab-left')
-  if (dragDom && labLeftDom) {
-    dragDom.onmousedown = function () {
-      // 判断不是拖拽是点击的话就折叠
-      let clickFlag = true
-      document.onmousemove = function (e) {
-        clickFlag = false
-        dragFlag.value = false
-        labLeftDom.style.width = `${e.x}px`
+  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 = function () {
+      document.onmouseup = () => {
         document.onmousemove = null
         document.onmouseup = null
-        dragFlag.value = true
-        if (clickFlag) {
-          labLeftDom.style.width = '400px'
-          leftPanelVisible = !leftPanelVisible
-        }
+        dragFlag = false
       }
-      return false
-    }
+    })
   }
 }
 </script>
 
 <template>
   <section class="lab">
-    <div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }" id="lab-left">
+    <div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }">
       <div class="lab-left__inner">
         <h1>{{ competition?.name }}</h1>
-        <el-tabs type="border-card" stretch>
+        <el-tabs type="border-card">
           <el-tab-pane label="实训指导" lazy>
-            <div class="pop" v-if="!dragFlag"></div>
-            <Book :competition_id="id"></Book>
+            <div class="pop" v-if="dragFlag"></div>
+            <Book :competition_id="id" :key="bookKey"></Book>
           </el-tab-pane>
           <el-tab-pane label="操作视频" lazy>
             <Video :competition_id="id"></Video>
@@ -156,20 +159,19 @@ function dragControllerDiv() {
           </el-tab-pane>
         </el-tabs>
       </div>
-      <div class="panel-icon" id="panel-icon">
+      <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>
+              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>
+              fill-rule="nonzero"></path>
           </g>
         </svg>
       </div>
@@ -184,14 +186,13 @@ function dragControllerDiv() {
         </el-row>
       </AppCard>
       <div class="lab-box">
-        <div class="pop" v-if="!dragFlag"></div>
+        <div class="pop" v-if="dragFlag"></div>
         <iframe
           :src="competition?.train_platform_uri"
           :key="iframeKey"
           frameborder="0"
           class="iframe"
-          ref="iframeRef"
-        ></iframe>
+          ref="iframeRef"></iframe>
       </div>
     </div>
   </section>
@@ -204,7 +205,7 @@ function dragControllerDiv() {
 }
 .lab-left {
   position: relative;
-  width: 400px;
+  width: v-bind(leftPanelWidthText);
   padding: 20px;
   background-color: #e1e4eb;
   border-radius: 6px;
@@ -213,6 +214,9 @@ function dragControllerDiv() {
   &.is-hidden {
     width: 0 !important;
     padding: 0;
+    .panel-resize {
+      display: none;
+    }
     .panel-icon {
       left: -20px;
       right: 0;
@@ -254,6 +258,15 @@ 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%;

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

@@ -6,6 +6,7 @@ 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'))
@@ -16,7 +17,11 @@ const ReportDialog = defineAsyncComponent(() => import('../components/ReportDial
 const route = useRoute()
 
 // 左侧
-let leftPanelVisible = $ref<boolean>(true)
+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) || ''
@@ -144,37 +149,35 @@ function handleSubmit() {
 
 // 拖拽改变左侧宽度
 // 因为鼠标移动文档和iframe影响不能move
-const dragFlag = ref(true)
+let dragFlag = $ref(false)
+let bookKey = $ref(0)
+watchEffect(() => {
+  if (!dragFlag) {
+    bookKey = Date.now()
+  }
+})
 function dragControllerDiv() {
-  const dragDom = document.getElementById('panel-icon')
-  const labLeftDom = document.getElementById('lab-left')
-  if (dragDom && labLeftDom) {
-    dragDom.onmousedown = function () {
-      // 判断不是拖拽是点击的话就折叠
-      let clickFlag = true
-      document.onmousemove = function (e) {
-        clickFlag = false
-        dragFlag.value = false
-        labLeftDom.style.width = `${e.x}px`
+  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 = function () {
+      document.onmouseup = () => {
         document.onmousemove = null
         document.onmouseup = null
-        dragFlag.value = true
-        if (clickFlag) {
-          labLeftDom.style.width = '400px'
-          leftPanelVisible = !leftPanelVisible
-        }
+        dragFlag = false
       }
-      return false
-    }
+    })
   }
 }
 </script>
 
 <template>
   <section class="lab">
-    <div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }" id="lab-left">
+    <div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }">
       <div class="lab-left__inner">
         <el-form :model="form" label-suffix=":" hide-required-asterisk>
           <el-form-item label="请选择课程">
@@ -188,10 +191,10 @@ function dragControllerDiv() {
             </el-select>
           </el-form-item>
         </el-form>
-        <el-tabs type="border-card" stretch>
+        <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"></Book>
+            <div class="pop" v-if="dragFlag"></div>
+            <Book :course_id="form.course_id" :experiment_id="form.experiment_id" :key="bookKey"></Book>
           </el-tab-pane>
           <el-tab-pane label="操作视频" lazy>
             <Video :course_id="form.course_id" :experiment_id="form.experiment_id"></Video>
@@ -204,21 +207,19 @@ function dragControllerDiv() {
           </el-tab-pane>
         </el-tabs>
       </div>
-      <!-- @click="leftPanelVisible = !leftPanelVisible" -->
-      <div class="panel-icon" id="panel-icon">
+      <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>
+              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>
+              fill-rule="nonzero"></path>
           </g>
         </svg>
       </div>
@@ -239,7 +240,7 @@ function dragControllerDiv() {
         </el-row>
       </AppCard>
       <div class="lab-box">
-        <div class="pop" v-if="!dragFlag"></div>
+        <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>
@@ -250,8 +251,7 @@ function dragControllerDiv() {
     v-model="reportDialogVisible"
     :experiment_id="form.experiment_id"
     @update="fetchInfo"
-    v-if="reportDialogVisible && form.experiment_id"
-  ></ReportDialog>
+    v-if="reportDialogVisible && form.experiment_id"></ReportDialog>
 </template>
 
 <style lang="scss" scoped>
@@ -261,7 +261,7 @@ function dragControllerDiv() {
 }
 .lab-left {
   position: relative;
-  width: 400px;
+  width: v-bind(leftPanelWidthText);
   padding: 20px;
   background-color: #e1e4eb;
   border-radius: 6px;
@@ -270,6 +270,9 @@ function dragControllerDiv() {
   &.is-hidden {
     width: 0 !important;
     padding: 0;
+    .panel-resize {
+      display: none;
+    }
     .panel-icon {
       left: -20px;
       right: 0;
@@ -308,6 +311,15 @@ 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%;