优化音频宽度显示和跳转

src/components/CommonPreview.vue

@@ -74,11 +74,11 @@
               v-for="(item, index) in file_list"
               :key="index"
               class="list-item"
-              @click="handleFileClick(item?.component_id)"
+              @click="handleFileClick(item?.courseware_id, item?.component_id)"
             >
               <template v-if="parseInt(drawerType) === 0">
                 <el-image :src="item.file_url" fit="contain" />
-                <span>{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span>
+                <span class="text-box">{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span>
               </template>
               <template v-else-if="parseInt(drawerType) === 1">
                 <AudioPlay
@@ -91,7 +91,7 @@
               </template>
               <template v-else-if="parseInt(drawerType) === 2">
                 <VideoPlay view-size="big" :file-id="item.file_id" :video-index="index" />
-                <span>{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span>
+                <span class="text-box">{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span>
               </template>
             </li>
           </ul>
@@ -510,7 +510,8 @@ export default {
           this.loading = false;
         });
     },
-    async handleFileClick(component_id) {
+    async handleFileClick(courseware_id, component_id) {
+      if (courseware_id) this.selectNode(courseware_id);
       if (component_id) {
         let node = await this.$refs.courserware.findChildComponentByKey(component_id);
         if (node) {
@@ -724,7 +725,7 @@ export default {
           }
 
           :deep .audio-middle {
-            width: 100%;
+            width: calc(25vw - 40px);
             border: none;
             border-radius: 8px;
           }
@@ -732,6 +733,7 @@ export default {
           .el-image {
             display: flex;
             width: 30%;
+            min-width: 30%;
             height: 90px;
             margin: 6px;
             background-color: #ccc;
@@ -740,8 +742,13 @@ export default {
 
           .video-play {
             width: 30%;
+            min-width: 30%;
             margin: 6px;
           }
+
+          .text-box {
+            word-break: break-word;
+          }
         }
       }