音频 图片 视频 资源在右侧打开

src/components/CommonPreview.vue

@@ -130,57 +130,58 @@
           <template v-if="curToolbarIcon === 'audit'">
             <AuditRemark :remark-list="remark_list" :is-audit="isShowAudit" @deleteRemarks="deleteRemarks" />
           </template>
+          <el-drawer
+            custom-class="custom-drawer"
+            :visible="drawerType.length > 0"
+            :with-header="false"
+            :modal="false"
+            size="240"
+            direction="ltr"
+            :style="drawerStyle"
+          >
+            <div class="infinite-list-wrapper">
+              <h5>{{ drawerTitle }}</h5>
+              <ul
+                v-infinite-scroll="loadMore"
+                class="scroll-container"
+                infinite-scroll-disabled="disabled"
+                :infinite-scroll-immediate="false"
+              >
+                <li
+                  v-for="(item, index) in file_list"
+                  :key="index"
+                  class="list-item"
+                  @click="handleFileClick(item?.courseware_id, item?.component_id)"
+                >
+                  <template v-if="parseInt(drawerType) === 0">
+                    <el-image :src="item.file_url" fit="contain" />
+                    <!-- <span class="text-box">{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span> -->
+                  </template>
+                  <template v-else-if="parseInt(drawerType) === 1">
+                    <AudioPlay
+                      view-size="middle"
+                      :file-id="item.file_id"
+                      :file-name="item.file_name.slice(0, item.file_name.lastIndexOf('.'))"
+                      :show-slider="true"
+                      :audio-index="index"
+                    />
+                  </template>
+                  <template v-else-if="parseInt(drawerType) === 2">
+                    <VideoPlay view-size="small" :file-id="item.file_id" :video-index="index" />
+                    <!-- <span class="text-box">{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span> -->
+                  </template>
+                </li>
+              </ul>
+              <p v-if="loading">加载中...</p>
+              <p v-if="noMore">没有更多了</p>
+            </div>
+          </el-drawer>
         </div>
 
         <div class="back-top" @click="backTop">
           <img :src="require(`@/assets/icon/back-top.png`)" alt="返回顶部" />
         </div>
       </aside>
-
-      <el-drawer
-        custom-class="custom-drawer"
-        :visible="drawerType.length > 0"
-        :with-header="false"
-        :modal="false"
-        size="25%"
-        :style="drawerStyle"
-      >
-        <div class="infinite-list-wrapper">
-          <ul
-            v-infinite-scroll="loadMore"
-            class="scroll-container"
-            infinite-scroll-disabled="disabled"
-            :infinite-scroll-immediate="false"
-          >
-            <li
-              v-for="(item, index) in file_list"
-              :key="index"
-              class="list-item"
-              @click="handleFileClick(item?.courseware_id, item?.component_id)"
-            >
-              <template v-if="parseInt(drawerType) === 0">
-                <el-image :src="item.file_url" fit="contain" />
-                <span class="text-box">{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span>
-              </template>
-              <template v-else-if="parseInt(drawerType) === 1">
-                <AudioPlay
-                  view-size="middle"
-                  :file-id="item.file_id"
-                  :file-name="item.file_name.slice(0, item.file_name.lastIndexOf('.'))"
-                  :show-slider="true"
-                  :audio-index="index"
-                />
-              </template>
-              <template v-else-if="parseInt(drawerType) === 2">
-                <VideoPlay view-size="big" :file-id="item.file_id" :video-index="index" />
-                <span class="text-box">{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span>
-              </template>
-            </li>
-          </ul>
-          <p v-if="loading">加载中...</p>
-          <p v-if="noMore">没有更多了</p>
-        </div>
-      </el-drawer>
     </div>
 
     <el-dialog
@@ -389,6 +390,14 @@ export default {
       const result = this.file_list.length >= this.total_count;
       return result;
     },
+    drawerTitle() {
+      const titleMap = {
+        0: '图片资源',
+        1: '音频资源',
+        2: '视频资源',
+      };
+      return titleMap[this.drawerType] || '资源列表';
+    },
   },
   watch: {
     isJudgeCorrect(newVal) {
@@ -401,19 +410,6 @@ export default {
       this.simulateAnswer();
     },
   },
-  mounted() {
-    console.log('=== 开始诊断无限滚动问题 ===');
-
-    // 检查Element UI是否正确安装
-    console.log('Element UI无限滚动指令:', this.$options.directives?.infiniteScroll);
-
-    // 检查当前元素上的指令
-    console.log('元素上的vue实例:', this.$el.__vue__);
-    console.log('元素上的指令绑定:', this.$el.__vue__?.$options.directives);
-
-    // 检查disabled状态
-    console.log('当前disabled状态:', this.disabled);
-  },
   created() {
     if (this.id) {
       this.getBookCoursewareInfo(this.id);
@@ -650,7 +646,7 @@ export default {
         this.drawerStyle = {
           top: `${rect.top}px`,
           height: `${rect.height}px`,
-          right: `${window.innerWidth - rect.left + 1}px`,
+          left: `${rect.right - 240}px`,
         };
       }
     },
@@ -672,7 +668,9 @@ export default {
         this.loadMore();
       });
     },
-    openAudit() {},
+    openAudit() {
+      this.drawerType = '';
+    },
     resetLoadState() {
       this.cur_page = 1;
       this.file_list = [];
@@ -1154,6 +1152,70 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
       .content {
         flex: 1;
         background-color: #fff;
+
+        :deep .el-drawer {
+          width: 240px !important;
+          border: 1px solid #e5e5e5;
+          transition: none !important;
+          animation: none !important;
+
+          .el-drawer__body {
+            height: calc(100vh - 200px);
+            overflow-y: auto;
+
+            h5 {
+              padding: 0 5px;
+              margin: 0;
+              font-size: 18px;
+              line-height: 40px;
+              background: #f2f3f5;
+            }
+
+            .scroll-container {
+              display: flex;
+              flex-direction: column;
+              row-gap: 8px;
+              margin: 6px;
+
+              .list-item {
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                border: 1px solid #ccc;
+                border-radius: 8px;
+
+                :deep .el-slider {
+                  .el-slider__runway {
+                    background-color: #eee;
+                  }
+                }
+
+                .el-image {
+                  display: flex;
+                  width: 100%;
+                  min-width: 100%;
+                  height: 90px;
+                  background-color: #ccc;
+                  border-radius: 8px;
+                }
+
+                .video-play {
+                  width: 100%;
+                  min-width: 100%;
+                }
+
+                .text-box {
+                  word-break: break-word;
+                }
+              }
+            }
+          }
+
+          p {
+            color: #999;
+            text-align: center;
+          }
+        }
       }
 
       .back-top {
@@ -1169,62 +1231,20 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
       }
     }
   }
+}
 
-  .el-drawer__body {
-    height: calc(100vh - 200px);
-    overflow-y: auto;
-
-    .scroll-container {
-      display: flex;
-      flex-direction: column;
-      row-gap: 8px;
-      margin: 6px;
-
-      .list-item {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        border: 1px solid #ccc;
-        border-radius: 8px;
-
-        :deep .el-slider {
-          .el-slider__runway {
-            background-color: #eee;
-          }
-        }
-
-        :deep .audio-middle {
-          width: calc(25vw - 110px);
-          border: none;
-          border-radius: 8px;
-        }
-
-        .el-image {
-          display: flex;
-          width: 30%;
-          min-width: 30%;
-          height: 90px;
-          margin: 6px;
-          background-color: #ccc;
-          border-radius: 8px;
-        }
-
-        .video-play {
-          width: 30%;
-          min-width: 30%;
-          margin: 6px;
-        }
+:deep .audio-wrapper .audio-middle {
+  width: 210px !important;
+  padding: 6px 8px !important;
+  border: none;
+  border-radius: 8px;
 
-        .text-box {
-          word-break: break-word;
-        }
-      }
-    }
+  .audio-name {
+    text-align: left;
+  }
 
-    p {
-      color: #999;
-      text-align: center;
-    }
+  .slider-area {
+    column-gap: 8px !important;
   }
 }