Merge branch 'iteration-20240520' into jenkins-dev

src/components/card-preview/song-modal/index.module.less

@@ -48,10 +48,9 @@
   backdrop-filter: blur(26px);
   height: 80px;
   padding: 0 26px 0 26px !important;
-  transition: all 0.5s;
+  transition: all 0.3s;
   display: flex;
   align-items: center;
-  transition: all .5s;
 
   .time {
     display: flex;
@@ -150,8 +149,9 @@
 }
 
 .sectionAnimate {
-  opacity: 0;
+  // opacity: 0;
   pointer-events: none;
-  transform: translateY(100%);
-  transition: all .5s;
+  margin-bottom: -80px;
+  // transform: translateY(100%);
+  transition: all .3s;
 }

src/components/card-preview/song-modal/index.tsx

@@ -46,7 +46,8 @@ export default defineComponent({
       durationNum: 0,
       duration: '00:00',
       showBar: true,
-      afterMa3: true
+      afterMa3: true,
+      timer: null as any
     });
     const canvas: any = ref();
     const audio: any = ref();
@@ -59,8 +60,13 @@ export default defineComponent({
         onInit(audio.value, canvas.value);
         audio.value.play();
         audioForms.afterMa3 = false;
+
+        setModelOpen();
       } else {
         audio.value.pause();
+
+        clearTimeout(audioForms.timer);
+        audioForms.showBar = true;
       }
       audioForms.paused = audio.value.paused;
     };
@@ -177,8 +183,25 @@ export default defineComponent({
       }
     };
 
+    /** 延迟收起模态框 */
+    const setModelOpen2 = () => {
+      clearTimeout(audioForms.timer);
+      audioForms.showBar = !audioForms.showBar;
+      audioForms.timer = setTimeout(() => {
+        audioForms.showBar = false;
+      }, 3000);
+    };
+    /** 延迟收起模态框 */
+    const setModelOpen = () => {
+      clearTimeout(audioForms.timer);
+      audioForms.showBar = true;
+      audioForms.timer = setTimeout(() => {
+        audioForms.showBar = false;
+      }, 3000);
+    };
+
     return () => (
-      <div class={styles.audioWrap} id={videoId}>
+      <div class={styles.audioWrap} id={videoId} onClick={setModelOpen2}>
         <div class={styles.audioContainer}>
           <audio
             ref={audio}
@@ -187,6 +210,10 @@ export default defineComponent({
             onEnded={() => {
               audioForms.paused = true;
             }}
+            onPause={() => {
+              clearTimeout(audioForms.timer);
+              audioForms.showBar = true;
+            }}
             onTimeupdate={() => {
               audioForms.currentTime = timeFormat(
                 Math.floor(audio.value?.currentTime || 0)
@@ -217,6 +244,7 @@ export default defineComponent({
           ]}
           onClick={(e: MouseEvent) => {
             e.stopPropagation();
+            setModelOpen();
           }}>
           <div class={styles.actions}>
             <div class={styles.actionWrap}>

src/components/card-preview/video-modal/index.module.less

@@ -1,12 +1,12 @@
 /* 全屏模式下的样式 */
-:fullscreen .videoContent,
-:-webkit-full-screen .videoContent,
-:-moz-full-screen .videoContent,
-:-ms-fullscreen .videoContent {
-  width: 100% !important;
-  height: 100% !important;
+// :fullscreen .videoContent,
+// :-webkit-full-screen .videoContent,
+// :-moz-full-screen .videoContent,
+// :-ms-fullscreen .videoContent {
+//   width: 100% !important;
+//   height: 100% !important;
 
-}
+// }
 
 .videoWrap {
   width: 100%;
@@ -30,6 +30,12 @@
     //   width: 100% !important;
     //   height: 100% !important;
     // }
+
+    :global {
+      .video-js .vjs-tech {
+        object-fit: cover;
+      }
+    }
   }
 
 
@@ -44,10 +50,9 @@
     backdrop-filter: blur(26px);
     height: 80px;
     padding: 0 26px 0 26px !important;
-    transition: all 0.5s;
+    transition: all 0.3s;
     display: flex;
     align-items: center;
-    transition: all .5s;
 
     .time {
       display: flex;
@@ -161,10 +166,11 @@
   }
 
   .sectionAnimate {
-    opacity: 0;
+    // opacity: 0;
     pointer-events: none;
-    transform: translateY(100%);
-    transition: all .5s;
+    // transform: translateY(100%);
+    margin-bottom: -80px;
+    transition: all .3s;
   }
 
 }

src/components/card-preview/video-modal/index.tsx

@@ -58,6 +58,7 @@ export default defineComponent({
       durationNum: 0,
       duration: '00:00',
       showBar: true,
+      timer: null as any,
       speedControl: false,
       speedStyle: {
         left: '1px'
@@ -80,7 +81,7 @@ export default defineComponent({
     };
 
     //
-    const toggleHideControl = (isShow: false) => {
+    const toggleHideControl = (isShow = false) => {
       videoFroms.showBar = isShow;
       videoFroms.speedControl = false;
     };
@@ -123,6 +124,15 @@ export default defineComponent({
         });
     };
 
+    /** 延迟收起模态框 */
+    const setModelOpen = (status = true) => {
+      clearTimeout(videoFroms.timer);
+      toggleHideControl(status);
+      videoFroms.timer = setTimeout(() => {
+        toggleHideControl(false);
+      }, 3000);
+    };
+
     const __init = () => {
       if (videoItem.value) {
         videoItem.value.poster(poster.value); // 封面
@@ -154,6 +164,15 @@ export default defineComponent({
           videoFroms.paused = true;
           emit('ended');
         });
+
+        videoItem.value.on('play', () => {
+          setModelOpen();
+        });
+
+        videoItem.value.on('pause', () => {
+          clearTimeout(videoFroms.timer);
+          videoFroms.showBar = true;
+        });
       }
     };
 
@@ -199,7 +218,10 @@ export default defineComponent({
       toggleHideControl
     });
     return () => (
-      <div class={[styles.videoWrap]} id={videoId}>
+      <div
+        class={[styles.videoWrap]}
+        id={videoId}
+        onClick={() => setModelOpen(!videoFroms.showBar)}>
         <div class={[styles.videoContent]}>
           <video
             style={{ width: '100%', height: '100%' }}
@@ -219,6 +241,7 @@ export default defineComponent({
             onClick={(e: MouseEvent) => {
               e.stopPropagation();
               emit('reset');
+              setModelOpen();
             }}>
             <div class={styles.actions}>
               <div class={styles.actionWrap}>

src/views/attend-class/component/audio-pay.tsx

@@ -1,310 +1,313 @@
-import {
-  defineComponent,
-  reactive,
-  ref,
-  nextTick,
-  onMounted,
-  watch
-} from 'vue';
-import styles from './audio.module.less';
-import iconplay from '../image/icon-pause.png';
-import iconpause from '../image/icon-play.png';
-import iconReplay from '../image/icon-replay.png';
-import { NSlider } from 'naive-ui';
-import Vudio from 'vudio.js';
-import tickMp3 from '../image/tick.mp3';
-
-export default defineComponent({
-  name: 'audio-play',
-  props: {
-    item: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    activeStatus: {
-      type: Boolean,
-      default: false
-    },
-    isEmtry: {
-      type: Boolean,
-      default: false
-    },
-    imagePos: {
-      type: String,
-      default: 'left'
-    }
-  },
-  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset'],
-  setup(props, { emit, expose }) {
-    const audioForms = reactive({
-      paused: true,
-      currentTimeNum: 0,
-      currentTime: '00:00',
-      durationNum: 0,
-      duration: '00:00',
-      showBar: true,
-      afterMa3: true,
-      count: 0
-    });
-    const canvas: any = ref();
-    const audio: any = ref();
-    let vudio: any = null;
-
-    // 切换音频播放
-    const onToggleAudio = (e?: any) => {
-      e?.stopPropagation();
-      // console.log(audio.value.paused, 'audio.value.paused');
-      if (audio.value.paused) {
-        audio.value.play();
-        audioForms.afterMa3 = false;
-      } else {
-        audio.value?.pause();
-      }
-      audioForms.paused = audio.value?.paused;
-      e?.target?.focus();
-      emit('togglePlay', audioForms.paused);
-    };
-
-    const onInit = (audio: undefined, canvas: undefined) => {
-      if (!vudio) {
-        vudio = new Vudio(audio, canvas, {
-          effect: 'waveform',
-          accuracy: 256,
-          width: 1024,
-          height: 600,
-          waveform: {
-            maxHeight: 200,
-            color: [
-              [0, '#44D1FF'],
-              [0.5, '#44D1FF'],
-              [0.5, '#198CFE'],
-              [1, '#198CFE']
-            ],
-            prettify: false
-          }
-        });
-        vudio.dance();
-      }
-    };
-
-    // 对时间进行格式化
-    const timeFormat = (num: number) => {
-      if (num > 0) {
-        const m = Math.floor(num / 60);
-        const s = num % 60;
-        return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
-      } else {
-        return '00:00';
-      }
-    };
-
-    //
-    const toggleHideControl = (isShow: false) => {
-      audioForms.showBar = isShow;
-    };
-
-    const onReplay = () => {
-      if (!audio.value) return;
-      audio.value.currentTime = 0;
-    };
-
-    let vudio1 = null;
-    const canvas1: any = ref();
-    const audio1: any = ref();
-    nextTick(() => {
-      vudio1 = new Vudio(audio1.value, canvas1.value, {
-        effect: 'waveform',
-        accuracy: 256,
-        width: 1024,
-        height: 600,
-        waveform: {
-          maxHeight: 200,
-          color: [
-            [0, '#44D1FF'],
-            [0.5, '#44D1FF'],
-            [0.5, '#198CFE'],
-            [1, '#198CFE']
-          ],
-          prettify: false
-        }
-      });
-      vudio1.dance();
-    });
-
-    watch(
-      () => props.activeStatus,
-      (val: any) => {
-        // console.log(val, 'val');
-        audioForms.count = 0;
-        if (val && props.item.autoPlay) {
-          vudio = null;
-          onToggleAudio();
-        } else {
-          audio.value.pause();
-        }
-      }
-    );
-
-    // onMounted(() => {
-    //   console.log(props.item, 'eeeee');
-    // });
-
-    expose({
-      toggleHideControl
-    });
-
-    return () => (
-      <div class={styles.audioWrap}>
-        <div class={styles.audioContainer}>
-          <audio
-            ref={audio}
-            crossorigin="anonymous"
-            src={props.item.content + '?time=1'}
-            onEnded={() => {
-              audioForms.paused = true;
-              emit('ended');
-            }}
-            onTimeupdate={() => {
-              audioForms.currentTime = timeFormat(
-                Math.round(audio.value?.currentTime || 0)
-              );
-              audioForms.currentTimeNum = audio.value?.currentTime || 0;
-
-              if (audioForms.count <= 1) {
-                audioForms.count += 1;
-                onInit(audio.value, canvas.value);
-              }
-            }}
-            onLoadedmetadata={() => {
-              audioForms.duration = timeFormat(
-                Math.round(audio.value?.duration)
-              );
-              audioForms.durationNum = audio.value?.duration;
-
-              if (props.item.autoPlay && audio.value && props.activeStatus) {
-                // audio.value.play();
-                onToggleAudio();
-              }
-              if (audio.value) {
-                audio.value.stop = () => {
-                  audio.value?.pause();
-                  audioForms.paused = true;
-                  emit('togglePlay', audioForms.paused);
-                };
-                audio.value.onPlay = () => {
-                  audio.value?.play();
-                  audioForms.paused = false;
-                  onInit(audio.value, canvas.value);
-                  emit('togglePlay', audioForms.paused);
-                };
-              }
-
-              emit('loadedmetadata', audio.value);
-            }}></audio>
-
-          <canvas ref={canvas}></canvas>
-
-          {audioForms.afterMa3 && (
-            <div class={styles.tempVudio}>
-              <audio ref={audio1} src={tickMp3} />
-              <canvas ref={canvas1}></canvas>
-            </div>
-          )}
-        </div>
-
-        <div
-          class={[
-            styles.controls,
-            audioForms.showBar ? '' : styles.sectionAnimate
-          ]}
-          onClick={(e: MouseEvent) => {
-            e.stopPropagation();
-            emit('reset');
-          }}>
-          <div class={styles.slider}>
-            <NSlider
-              value={audioForms.currentTimeNum}
-              step={0.01}
-              max={audioForms.durationNum}
-              tooltip={false}
-              onUpdate:value={(val: number) => {
-                audio.value.currentTime = val;
-                audioForms.currentTimeNum = val;
-                audioForms.currentTime = timeFormat(Math.round(val || 0));
-              }}
-            />
-          </div>
-          <div class={styles.tools}>
-            {props.imagePos === 'right' ? (
-              <>
-                <div class={styles.actions}>
-                  <div class={styles.time}>
-                    <div
-                      class="plyr__time plyr__time--current"
-                      aria-label="Current time">
-                      {audioForms.currentTime}
-                    </div>
-                    <span class={styles.line}>/</span>
-                    <div
-                      class="plyr__time plyr__time--duration"
-                      aria-label="Duration">
-                      {audioForms.duration}
-                    </div>
-                  </div>
-                </div>
-                <div class={styles.actions}>
-                  <div class={styles.actionWrap}>
-                    <button class={styles.iconReplay} onClick={onReplay}>
-                      <img src={iconReplay} />
-                    </button>
-                    <div class={styles.actionBtn} onClick={onToggleAudio}>
-                      {audioForms.paused ? (
-                        <img class={styles.playIcon} src={iconplay} />
-                      ) : (
-                        <img class={styles.playIcon} src={iconpause} />
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </>
-            ) : (
-              <>
-                <div class={styles.actions}>
-                  <div class={styles.actionWrap}>
-                    <div class={styles.actionBtn} onClick={onToggleAudio}>
-                      {audioForms.paused ? (
-                        <img class={styles.playIcon} src={iconplay} />
-                      ) : (
-                        <img class={styles.playIcon} src={iconpause} />
-                      )}
-                    </div>
-                    <button class={styles.iconReplay} onClick={onReplay}>
-                      <img src={iconReplay} />
-                    </button>
-                  </div>
-                </div>
-                <div class={styles.actions}>
-                  <div class={styles.time}>
-                    <div
-                      class="plyr__time plyr__time--current"
-                      aria-label="Current time">
-                      {audioForms.currentTime}
-                    </div>
-                    <span class={styles.line}>/</span>
-                    <div
-                      class="plyr__time plyr__time--duration"
-                      aria-label="Duration">
-                      {audioForms.duration}
-                    </div>
-                  </div>
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  }
-});
+import {
+  defineComponent,
+  reactive,
+  ref,
+  nextTick,
+  onMounted,
+  watch
+} from 'vue';
+import styles from './audio.module.less';
+import iconplay from '../image/icon-pause.png';
+import iconpause from '../image/icon-play.png';
+import iconReplay from '../image/icon-replay.png';
+import { NSlider } from 'naive-ui';
+import Vudio from 'vudio.js';
+import tickMp3 from '../image/tick.mp3';
+
+export default defineComponent({
+  name: 'audio-play',
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    activeStatus: {
+      type: Boolean,
+      default: false
+    },
+    isEmtry: {
+      type: Boolean,
+      default: false
+    },
+    imagePos: {
+      type: String,
+      default: 'left'
+    }
+  },
+  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset'],
+  setup(props, { emit, expose }) {
+    const audioForms = reactive({
+      paused: true,
+      currentTimeNum: 0,
+      currentTime: '00:00',
+      durationNum: 0,
+      duration: '00:00',
+      showBar: true,
+      afterMa3: true,
+      count: 0
+    });
+    const canvas: any = ref();
+    const audio: any = ref();
+    let vudio: any = null;
+
+    // 切换音频播放
+    const onToggleAudio = (e?: any) => {
+      e?.stopPropagation();
+      // console.log(audio.value.paused, 'audio.value.paused');
+      if (audio.value.paused) {
+        audio.value.play();
+        audioForms.afterMa3 = false;
+      } else {
+        audio.value?.pause();
+      }
+      audioForms.paused = audio.value?.paused;
+      e?.target?.focus();
+      emit('togglePlay', audioForms.paused);
+    };
+
+    const onInit = (audio: undefined, canvas: undefined) => {
+      if (!vudio) {
+        vudio = new Vudio(audio, canvas, {
+          effect: 'waveform',
+          accuracy: 256,
+          width: 1024,
+          height: 600,
+          waveform: {
+            maxHeight: 200,
+            color: [
+              [0, '#44D1FF'],
+              [0.5, '#44D1FF'],
+              [0.5, '#198CFE'],
+              [1, '#198CFE']
+            ],
+            prettify: false
+          }
+        });
+        vudio.dance();
+      }
+    };
+
+    // 对时间进行格式化
+    const timeFormat = (num: number) => {
+      if (num > 0) {
+        const m = Math.floor(num / 60);
+        const s = num % 60;
+        return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
+      } else {
+        return '00:00';
+      }
+    };
+
+    //
+    const toggleHideControl = (isShow: false) => {
+      audioForms.showBar = isShow;
+    };
+
+    const onReplay = () => {
+      if (!audio.value) return;
+      audio.value.currentTime = 0;
+    };
+
+    let vudio1 = null;
+    const canvas1: any = ref();
+    const audio1: any = ref();
+    nextTick(() => {
+      vudio1 = new Vudio(audio1.value, canvas1.value, {
+        effect: 'waveform',
+        accuracy: 256,
+        width: 1024,
+        height: 600,
+        waveform: {
+          maxHeight: 200,
+          color: [
+            [0, '#44D1FF'],
+            [0.5, '#44D1FF'],
+            [0.5, '#198CFE'],
+            [1, '#198CFE']
+          ],
+          prettify: false
+        }
+      });
+      vudio1.dance();
+    });
+
+    watch(
+      () => props.activeStatus,
+      (val: any) => {
+        // console.log(val, 'val');
+        audioForms.count = 0;
+        if (val && props.item.autoPlay) {
+          vudio = null;
+          onToggleAudio();
+        } else {
+          audio.value.pause();
+        }
+      }
+    );
+
+    // onMounted(() => {
+    //   console.log(props.item, 'eeeee');
+    // });
+
+    expose({
+      toggleHideControl
+    });
+
+    return () => (
+      <div class={styles.audioWrap}>
+        <div class={styles.audioContainer}>
+          <audio
+            ref={audio}
+            crossorigin="anonymous"
+            src={props.item.content + '?time=1'}
+            onEnded={() => {
+              audioForms.paused = true;
+              emit('ended');
+            }}
+            onTimeupdate={() => {
+              audioForms.currentTime = timeFormat(
+                Math.round(audio.value?.currentTime || 0)
+              );
+              audioForms.currentTimeNum = audio.value?.currentTime || 0;
+
+              if (audioForms.count <= 1) {
+                audioForms.count += 1;
+                onInit(audio.value, canvas.value);
+              }
+            }}
+            onLoadedmetadata={() => {
+              audioForms.duration = timeFormat(
+                Math.round(audio.value?.duration)
+              );
+              audioForms.durationNum = audio.value?.duration;
+
+              if (props.item.autoPlay && audio.value && props.activeStatus) {
+                // audio.value.play();
+                onToggleAudio();
+              }
+              if (audio.value) {
+                audio.value.stop = () => {
+                  audio.value?.pause();
+                  audioForms.paused = true;
+                  emit('togglePlay', audioForms.paused);
+                };
+                audio.value.onPlay = () => {
+                  audio.value?.play();
+                  audioForms.paused = false;
+                  onInit(audio.value, canvas.value);
+                  emit('togglePlay', audioForms.paused);
+                };
+              }
+
+              emit('loadedmetadata', audio.value);
+            }}
+            onProgress={(e: any) => {
+              console.log(e, 'loadedmetadata onProgress');
+            }}></audio>
+
+          <canvas ref={canvas}></canvas>
+
+          {audioForms.afterMa3 && (
+            <div class={styles.tempVudio}>
+              <audio ref={audio1} src={tickMp3} />
+              <canvas ref={canvas1}></canvas>
+            </div>
+          )}
+        </div>
+
+        <div
+          class={[
+            styles.controls,
+            audioForms.showBar ? '' : styles.sectionAnimate
+          ]}
+          onClick={(e: MouseEvent) => {
+            e.stopPropagation();
+            emit('reset');
+          }}>
+          <div class={styles.slider}>
+            <NSlider
+              value={audioForms.currentTimeNum}
+              step={0.01}
+              max={audioForms.durationNum}
+              tooltip={false}
+              onUpdate:value={(val: number) => {
+                audio.value.currentTime = val;
+                audioForms.currentTimeNum = val;
+                audioForms.currentTime = timeFormat(Math.round(val || 0));
+              }}
+            />
+          </div>
+          <div class={styles.tools}>
+            {props.imagePos === 'right' ? (
+              <>
+                <div class={styles.actions}>
+                  <div class={styles.time}>
+                    <div
+                      class="plyr__time plyr__time--current"
+                      aria-label="Current time">
+                      {audioForms.currentTime}
+                    </div>
+                    <span class={styles.line}>/</span>
+                    <div
+                      class="plyr__time plyr__time--duration"
+                      aria-label="Duration">
+                      {audioForms.duration}
+                    </div>
+                  </div>
+                </div>
+                <div class={styles.actions}>
+                  <div class={styles.actionWrap}>
+                    <button class={styles.iconReplay} onClick={onReplay}>
+                      <img src={iconReplay} />
+                    </button>
+                    <div class={styles.actionBtn} onClick={onToggleAudio}>
+                      {audioForms.paused ? (
+                        <img class={styles.playIcon} src={iconplay} />
+                      ) : (
+                        <img class={styles.playIcon} src={iconpause} />
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <>
+                <div class={styles.actions}>
+                  <div class={styles.actionWrap}>
+                    <div class={styles.actionBtn} onClick={onToggleAudio}>
+                      {audioForms.paused ? (
+                        <img class={styles.playIcon} src={iconplay} />
+                      ) : (
+                        <img class={styles.playIcon} src={iconpause} />
+                      )}
+                    </div>
+                    <button class={styles.iconReplay} onClick={onReplay}>
+                      <img src={iconReplay} />
+                    </button>
+                  </div>
+                </div>
+                <div class={styles.actions}>
+                  <div class={styles.time}>
+                    <div
+                      class="plyr__time plyr__time--current"
+                      aria-label="Current time">
+                      {audioForms.currentTime}
+                    </div>
+                    <span class={styles.line}>/</span>
+                    <div
+                      class="plyr__time plyr__time--duration"
+                      aria-label="Duration">
+                      {audioForms.duration}
+                    </div>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

src/views/attend-class/model/train-update/index.tsx

@@ -110,22 +110,6 @@ export default defineComponent({
       });
     };
 
-    // 是否可以评测
-    const isDisabledEvaluated = computed(() => {
-      const item = props.item;
-      if (item.background && item.background.length > 0) {
-        let status = false;
-        item.background.forEach((item: any) => {
-          if (!item.audioFileUrl) {
-            status = true;
-          }
-        });
-        return status;
-      } else {
-        return true;
-      }
-    });
-
     onMounted(() => {
       const item = props.item;
       console.log(item, 'item');
@@ -175,7 +159,7 @@ export default defineComponent({
                 练习
               </NButton>
 
-              {isDisabledEvaluated.value ? (
+              {props.item.containAccompaniment ? (
                 <NTooltip showArrow={false}>
                   {{
                     trigger: () => (

src/views/prepare-lessons/components/directory-main/index.module.less

@@ -196,6 +196,7 @@
   cursor: pointer;
   border-radius: 10px;
   font-size: max(17px, 12Px);
+  font-weight: 600;
   margin-bottom: 8px;
 
   &.childItem:hover {

src/views/prepare-lessons/components/lesson-main/courseware/addCourseware.tsx

@@ -791,80 +791,85 @@ export default defineComponent({
                     </NTooltip>
                   </NSpace>
 
-                  {item.list.length > 0 && (
-                    <Draggable
-                      v-model:modelValue={item.list}
-                      itemKey="id"
-                      componentData={{
-                        itemKey: 'id',
-                        tag: 'div',
-                        animation: 200,
-                        group: 'description',
-                        disabled: false
-                      }}
-                      class={styles.list}>
-                      {{
-                        item: (element: any) => {
-                          const item = element.element;
-                          return (
-                            <div
-                              data-id={item.id}
-                              class={[
-                                styles.itemWrap,
-                                styles.itemBlock,
-                                'row-nav'
-                              ]}>
-                              <div class={styles.itemWrapBox}>
-                                <CardType
-                                  class={[styles.itemContent]}
-                                  isShowCollect={false}
-                                  offShelf={item.removeFlag ? true : false}
-                                  // onOffShelf={() => onRemove(item)}
-                                  item={item}
-                                  disabledMouseHover={false}
-                                  onClick={() => {
-                                    if (item.type === 'IMG') return;
-                                    forms.show = true;
-                                    forms.item = item;
+                  {/* {item.list.length > 0 && ( */}
+                  <Draggable
+                    v-model:modelValue={item.list}
+                    itemKey="id"
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    group="description"
+                    componentData={{
+                      itemKey: 'id',
+                      tag: 'div',
+                      animation: 200,
+                      pull: true,
+                      put: true,
+                      group: 'description'
+                      // disabled: false
+                    }}
+                    class={styles.list}>
+                    {{
+                      item: (element: any) => {
+                        const item = element.element;
+                        return (
+                          <div
+                            data-id={item.id}
+                            class={[
+                              styles.itemWrap,
+                              styles.itemBlock,
+                              'row-nav'
+                            ]}>
+                            <div class={styles.itemWrapBox}>
+                              <CardType
+                                class={[styles.itemContent]}
+                                isShowCollect={false}
+                                offShelf={item.removeFlag ? true : false}
+                                // onOffShelf={() => onRemove(item)}
+                                item={item}
+                                disabledMouseHover={false}
+                                onClick={() => {
+                                  if (item.type === 'IMG') return;
+                                  forms.show = true;
+                                  forms.item = item;
+                                }}
+                              />
+                              <div class={styles.itemOperation}>
+                                <img
+                                  src={iconDelete}
+                                  class={styles.iconDelete}
+                                  onClick={(e: MouseEvent) => {
+                                    e.stopPropagation();
+                                    onDelete(element.index, index);
                                   }}
                                 />
-                                <div class={styles.itemOperation}>
-                                  <img
-                                    src={iconDelete}
-                                    class={styles.iconDelete}
-                                    onClick={(e: MouseEvent) => {
-                                      e.stopPropagation();
-                                      onDelete(element.index, index);
-                                    }}
-                                  />
-                                </div>
                               </div>
                             </div>
-                          );
-                        },
-                        footer: () => (
-                          <div class={styles.itemWrap}>
-                            <div class={styles.itemWrapBox}>
-                              <div
-                                class={[
-                                  styles.itemContent,
-                                  styles.addMusicItem,
-                                  'handle'
-                                ]}
-                                onClick={() => {
-                                  forms.addOtherSource = true;
-                                  forms.addOtherIndex = index;
-                                }}>
-                                <img src={iconAddMusic} />
+                          </div>
+                        );
+                      },
+                      footer: () => (
+                        <div class={styles.itemWrap}>
+                          <div class={styles.itemWrapBox}>
+                            <div
+                              class={[
+                                styles.itemContent,
+                                styles.addMusicItem,
+                                'handle'
+                              ]}
+                              onClick={() => {
+                                forms.addOtherSource = true;
+                                forms.addOtherIndex = index;
+                              }}>
+                              <img src={iconAddMusic} />
 
-                                <p class={styles.addMusicName}>添加资源</p>
-                              </div>
+                              <p class={styles.addMusicName}>添加资源</p>
                             </div>
                           </div>
-                        )
-                      }}
-                    </Draggable>
-                  )}
+                        </div>
+                      )
+                    }}
+                  </Draggable>
+                  {/* )}
                   {item.list <= 0 && (
                     <div class={styles.list}>
                       <div class={styles.itemWrap}>
@@ -886,7 +891,7 @@ export default defineComponent({
                         </div>
                       </div>
                     </div>
-                  )}
+                  )} */}
                 </div>
               ))}
 

src/views/prepare-lessons/components/resource-main/components/resource-item/index.tsx

@@ -94,7 +94,7 @@ export default defineComponent({
             isCollect: !!row.favoriteFlag,
             refFlag: row.refFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
-            background: row.background,
+            containAccompaniment: row.containAccompaniment,
             content: row.content
             // exist: index !== -1 ? true : false // 是否存在
           });

src/views/prepare-lessons/components/resource-main/components/select-music/index.tsx

@@ -136,7 +136,7 @@ export default defineComponent({
             refFlag: row.refFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
             content: row.id,
-            background: row.background,
+            containAccompaniment: row.containAccompaniment,
             xmlFileUrl: row.xmlFileUrl
             // exist: index !== -1 ? true : false // 是否存在
           });

src/views/prepare-lessons/model/select-music/select-item/index.tsx

@@ -86,7 +86,7 @@ export default defineComponent({
             refFlag: row.refFlag,
             content: row.id,
             xmlFileUrl: row.xmlFileUrl,
-            background: row.background,
+            containAccompaniment: row.containAccompaniment,
             exist: index !== -1 ? true : false // 是否存在
           });
         });

src/views/prepare-lessons/model/select-resources/select-item/index.tsx

@@ -102,7 +102,7 @@ export default defineComponent({
             isCollect: !!row.favoriteFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
             refFlag: row.refFlag,
-            background: row.background,
+            containAccompaniment: row.containAccompaniment,
             content: row.content
           });
         });