优化

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

@@ -28,7 +28,7 @@ onMounted(() => {
 })
 
 // 左侧
-const leftPanelVisible = $ref<boolean>(true)
+let leftPanelVisible = $ref<boolean>(true)
 
 let detail = $ref<ExperimentRecord>()
 provide('detail', $$(detail))
@@ -89,6 +89,7 @@ function handleCaptureCallback(event: MessageEvent) {
 }
 onMounted(() => {
   window.addEventListener('message', handleCaptureCallback, false)
+  dragControllerDiv()
 })
 onUnmounted(() => {
   window.removeEventListener('message', handleCaptureCallback, false)
@@ -103,15 +104,45 @@ function uploadPicture(url: string) {
     screenshotLoading = false
   })
 }
+
+// 拖拽改变左侧宽度
+// 因为鼠标移动文档和iframe影响不能move
+const dragFlag = ref(true)
+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`
+      }
+      document.onmouseup = function () {
+        document.onmousemove = null
+        document.onmouseup = null
+        dragFlag.value = true
+        if (clickFlag) {
+          labLeftDom.style.width = '400px'
+          leftPanelVisible = !leftPanelVisible
+        }
+      }
+      return false
+    }
+  }
+}
 </script>
 
 <template>
   <section class="lab">
-    <div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }">
+    <div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }" id="lab-left">
       <div class="lab-left__inner">
         <h1>{{ competition?.name }}</h1>
         <el-tabs type="border-card" stretch>
           <el-tab-pane label="实训指导" lazy>
+            <div class="pop" v-if="!dragFlag"></div>
             <Book :competition_id="id"></Book>
           </el-tab-pane>
           <el-tab-pane label="操作视频" lazy>
@@ -125,18 +156,20 @@ function uploadPicture(url: string) {
           </el-tab-pane>
         </el-tabs>
       </div>
-      <div class="panel-icon" @click="leftPanelVisible = !leftPanelVisible">
+      <div class="panel-icon" id="panel-icon">
         <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>
@@ -151,12 +184,14 @@ function uploadPicture(url: string) {
         </el-row>
       </AppCard>
       <div class="lab-box">
+        <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>
@@ -176,7 +211,7 @@ function uploadPicture(url: string) {
   box-sizing: border-box;
   transition: all 0.1s;
   &.is-hidden {
-    width: 0;
+    width: 0 !important;
     padding: 0;
     .panel-icon {
       left: -20px;
@@ -237,6 +272,7 @@ function uploadPicture(url: string) {
   height: 100%;
 }
 .lab-box {
+  position: relative;
   flex: 1;
   width: 100%;
   margin-top: 20px;
@@ -245,4 +281,13 @@ function uploadPicture(url: string) {
   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/components/DiscussCommentPublish.vue

@@ -45,7 +45,7 @@ function handleAdd() {
       <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-button type="primary" @click="handleSubmit">发表评论</el-button>
     </el-row>
   </el-form>
 </template>