chore: update

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

@@ -15,6 +15,7 @@ const ReportDialog = defineAsyncComponent(() => import('../components/ReportDial
 const route = useRoute()
 
 // 左侧
+let leftPanelVisible = $ref<boolean>(true)
 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) || ''
@@ -104,33 +105,52 @@ function handleSubmit() {
 
 <template>
   <section class="lab">
-    <div class="lab-left">
-      <el-form :model="form" label-suffix=":" hide-required-asterisk>
-        <el-form-item label="请选择课程">
-          <el-select v-model="form.course_id" style="width: 100%">
-            <el-option v-for="item in courses" :key="item.id" :label="item.name" :value="item.id"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="请选择实验" prop="experiment_id">
-          <el-select v-model="form.experiment_id" style="width: 100%">
-            <el-option v-for="item in experimentList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <el-tabs type="border-card" stretch>
-        <el-tab-pane label="实训指导" lazy>
-          <Book :experiment_id="form.experiment_id"></Book>
-        </el-tab-pane>
-        <el-tab-pane label="操作视频" lazy>
-          <Video :experiment_id="form.experiment_id"></Video>
-        </el-tab-pane>
-        <el-tab-pane label="讨论交流" lazy>
-          <Discuss :experiment_id="form.experiment_id"></Discuss>
-        </el-tab-pane>
-        <el-tab-pane label="过程与结果" lazy>
-          <Result :experiment_id="form.experiment_id" @update="fetchInfo"></Result>
-        </el-tab-pane>
-      </el-tabs>
+    <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="请选择课程">
+            <el-select v-model="form.course_id" style="width: 100%">
+              <el-option v-for="item in courses" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="请选择实验" prop="experiment_id">
+            <el-select v-model="form.experiment_id" style="width: 100%">
+              <el-option v-for="item in experimentList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <el-tabs type="border-card" stretch>
+          <el-tab-pane label="实训指导" lazy>
+            <Book :experiment_id="form.experiment_id"></Book>
+          </el-tab-pane>
+          <el-tab-pane label="操作视频" lazy>
+            <Video :experiment_id="form.experiment_id"></Video>
+          </el-tab-pane>
+          <el-tab-pane label="讨论交流" lazy>
+            <Discuss :experiment_id="form.experiment_id"></Discuss>
+          </el-tab-pane>
+          <el-tab-pane label="过程与结果" lazy>
+            <Result :experiment_id="form.experiment_id" @update="fetchInfo"></Result>
+          </el-tab-pane>
+        </el-tabs>
+      </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">
       <AppCard>
@@ -168,13 +188,32 @@ function handleSubmit() {
   height: calc(100vh - 110px);
 }
 .lab-left {
-  display: flex;
-  flex-direction: column;
+  position: relative;
   width: 400px;
   padding: 20px;
   background-color: #e1e4eb;
   border-radius: 6px;
   box-sizing: border-box;
+  transition: all 0.1s;
+  &.is-hidden {
+    width: 0;
+    padding: 0;
+    .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;
+  }
   .el-tabs {
     flex: 1;
     border: 0;
@@ -197,6 +236,16 @@ function handleSubmit() {
     overflow-y: auto;
   }
 }
+.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;