添加下载pwa

src/App.tsx

@@ -1,11 +1,4 @@
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  ref,
-  onBeforeUnmount,
-  onUnmounted
-} from 'vue';
+import { computed, defineComponent, onMounted, ref, onUnmounted } from 'vue';
 import { NConfigProvider, zhCN, dateZhCN, NModal } from 'naive-ui';
 import { AppProvider } from './components/Application';
 import { RouterView, useRouter } from 'vue-router';
@@ -13,9 +6,16 @@ import setting from './settings/designSetting';
 import { lighten } from './utils';
 import RouterError from './components/RouterError';
 import { useRegisterSW } from 'virtual:pwa-register/vue';
-
-import { tryOnUnmounted } from '@vueuse/core';
 import { useUserStore } from './store/modules/users';
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    console.log('unregister - pwa');
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}
+
 export default defineComponent({
   name: 'App',
   setup() {
@@ -143,10 +143,10 @@ export default defineComponent({
         documentDom.exitFullscreen
           ? documentDom.exitFullscreen()
           : documentDom.mozCancelFullScreen
-            ? documentDom.mozCancelFullScreen()
-            : documentDom.webkitExitFullscreen
-              ? documentDom.webkitExitFullscreen()
-              : '';
+          ? documentDom.mozCancelFullScreen()
+          : documentDom.webkitExitFullscreen
+          ? documentDom.webkitExitFullscreen()
+          : '';
         userStore.logout();
         history.go(0);
       }
@@ -170,25 +170,28 @@ export default defineComponent({
           event.preventDefault();
         }
       });
-    });
-    onUnmounted(() => {
-      window.removeEventListener('message', handleOpen);
 
       // const intervalMS = 60 * 60 * 1000;
 
       // console.log(useRegisterSW, '1');
       // const updateServiceWorker =
-      useRegisterSW({
-        onRegistered(r: any) {
-          console.log(r, 'registered');
+      // useRegisterSW({
+      //   onRegistered(r: any) {
+      //     console.log(r, 'registered');
 
-          r &&
-            setInterval(() => {
-              console.log('registered interval:', r);
-              r.update();
-            }, 30000);
-        }
-      });
+      //     r &&
+      //       setInterval(() => {
+      //         console.log('registered interval:', r);
+      //         r.update();
+      //       }, 30000);
+      //   }
+      // });
+
+      // 卸载 pwa
+      unregister();
+    });
+    onUnmounted(() => {
+      window.removeEventListener('message', handleOpen);
     });
 
     return () => (

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

@@ -329,32 +329,39 @@ export default defineComponent({
     };
 
     let timer: any = null;
-    const addCoursewareItem = async (item: any, point?: any) => {
+    const addCoursewareItem = async (
+      item: any,
+      point?: any,
+      insert = false
+    ) => {
       clearTimeout(timer);
       const materialList: any[] = [];
-      try {
-        const { data } = await api_materialDetail(item.materialId);
-        if (Array.isArray(data.materialRefs)) {
-          data.materialRefs.forEach((item: any) => {
-            if (item.refType === 'STRONG') {
-              const relateMaterialInfo = item.relateMaterialInfo || {};
-              materialList.push({
-                content: relateMaterialInfo.content,
-                coverImg: relateMaterialInfo.coverImg,
-                // isCollect: relateMaterialInfo.,
-                isSelected:
-                  relateMaterialInfo.sourceFrom === 'PLATFORM' ? true : false,
-                materialId: relateMaterialInfo.id,
-                // removeFlag: relateMaterialInfo.,
-                title: relateMaterialInfo.name,
-                type: relateMaterialInfo.type
-              });
-            }
-          });
+      if (!insert) {
+        try {
+          const { data } = await api_materialDetail(item.materialId);
+          if (Array.isArray(data.materialRefs)) {
+            data.materialRefs.forEach((item: any) => {
+              if (item.refType === 'STRONG') {
+                const relateMaterialInfo = item.relateMaterialInfo || {};
+                materialList.push({
+                  content: relateMaterialInfo.content,
+                  coverImg: relateMaterialInfo.coverImg,
+                  // isCollect: relateMaterialInfo.,
+                  isSelected:
+                    relateMaterialInfo.sourceFrom === 'PLATFORM' ? true : false,
+                  materialId: relateMaterialInfo.id,
+                  // removeFlag: relateMaterialInfo.,
+                  title: relateMaterialInfo.name,
+                  type: relateMaterialInfo.type
+                });
+              }
+            });
+          }
+        } catch {
+          //
         }
-      } catch {
-        //
       }
+
       nextTick(() => {
         if (point) {
           const rowGroupDom = document.querySelectorAll('.row-group');
@@ -549,7 +556,7 @@ export default defineComponent({
       });
       const baseB = JSON.stringify(forms.baseInfo);
       if (objA === objB && baseA === baseB) {
-        if (typeof event === 'function') {
+        if (typeof event == 'function') {
           event();
 
           emit('change', {
@@ -995,11 +1002,20 @@ export default defineComponent({
             onClose={() => (forms.addOtherSource = false)}
             onComfirm={item => {
               if (Array.isArray(item)) {
-                item.forEach((child: any) => {
-                  addCoursewareItem({ ...child, index: forms.addOtherIndex });
+                console.log(item, 'item - item');
+                item.forEach(async (child: any) => {
+                  await addCoursewareItem(
+                    { ...child, index: forms.addOtherIndex },
+                    null,
+                    true
+                  );
                 });
               } else {
-                addCoursewareItem({ ...item, index: forms.addOtherIndex });
+                addCoursewareItem(
+                  { ...item, index: forms.addOtherIndex },
+                  null,
+                  true
+                );
               }
             }}
           />

src/views/prepare-lessons/model/add-other-source/index.tsx

@@ -1,413 +1,413 @@
-import { defineComponent, reactive, ref } from 'vue';
-import { NImage, NModal } from 'naive-ui';
-import styles from './index.module.less';
-import icon1 from '../../images/addSource/icon1.png';
-import icon2 from '../../images/addSource/icon2.png';
-import icon3 from '../../images/addSource/icon3.png';
-import icon4 from '../../images/addSource/icon4.png';
-import icon5 from '../../images/addSource/icon5.png';
-import icon6 from '../../images/addSource/icon6.png';
-import icon7 from '../../images/addSource/icon7.png';
-import icon8 from '../../images/addSource/icon8.png';
-import { useRouter } from 'vue-router';
-import SourceRhythm from '../source-rhythm';
-import SourceInstrument from '../source-instrument';
-import SourceKnowledge from '../source-knowledge';
-import SourceMusician from '../source-musician';
-import SourceMusic from '../source-music';
-import { eventGlobal } from '/src/utils';
-import SubjectSync from '../subject-sync';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import UploadModal, {
-  formatUrlType
-} from '/src/views/natural-resources/components/my-resources/upload-modal';
-import SaveModal from '/src/views/natural-resources/components/my-resources/save-modal';
-
-export default defineComponent({
-  name: 'add-other-source',
-  emits: ['close', 'comfirm'],
-  setup(props, { emit }) {
-    const prepareStore = usePrepareStore();
-    const router = useRouter();
-    const sourceList = ref([
-      {
-        image: icon8,
-        name: '上传资源',
-        index: 7
-      },
-      {
-        image: icon1,
-        name: '听音练习',
-        index: 0
-      },
-      {
-        image: icon2,
-        name: '节奏练习',
-        index: 1
-      },
-      {
-        image: icon3,
-        name: '乐器百科',
-        index: 2
-      },
-      {
-        image: icon6,
-        name: '名曲鉴赏',
-        index: 3
-      },
-      {
-        image: icon5,
-        name: '音乐家',
-        index: 4
-      },
-      {
-        image: icon4,
-        name: '乐理知识',
-        index: 5
-      }
-
-      // {
-      //   image: icon7,
-      //   name: '制作曲谱',
-      //   index: 6
-      // }
-    ]);
-    const state = reactive({
-      listenStatus: false, // 听音练习
-      rhythmStatus: false, //节奏
-      theoryStatus: false, //
-      musicStatus: false, //
-      instrumentStatus: false, //
-      musicianStatus: false, //
-
-      uploadStatus: false,
-      saveStatus: false,
-      editStatus: false, // 是否编辑
-      editList: [] as any, // TOD
-      editIds: [] as any, // 编辑的
-      editOverIds: [] as any // 确认修改的数据
-    });
-
-    // LISTEN:听音,RHYTHM:节奏,THEORY:乐理知识,MUSIC_WIKI:曲目 INSTRUMENT:乐器 MUSICIAN:音乐家）
-
-    const onDetail = (item: any) => {
-      switch (item.index) {
-        case 0:
-          state.listenStatus = true;
-          break;
-        case 1:
-          state.rhythmStatus = true;
-          break;
-        case 2:
-          state.instrumentStatus = true;
-          break;
-        case 3:
-          state.musicStatus = true;
-          break;
-        case 4:
-          state.musicianStatus = true;
-          break;
-        case 5:
-          state.theoryStatus = true;
-          break;
-        case 6:
-          eventGlobal.emit('pageBeforeLeave', () => {
-            // 直接跳转到制谱页面 (临时存储数据)
-            sessionStorage.setItem('notation-open-create', '1');
-            router.push('/notation');
-          });
-          break;
-        case 7:
-          // eventGlobal.emit('pageBeforeLeave', () => {
-          //   // 直接跳转到制谱页面 (临时存储数据)
-          //   sessionStorage.setItem('notation-open-create', '1');
-          //   router.push('/notation');
-          // });
-          state.saveStatus = true;
-          break;
-        default:
-          break;
-      }
-    };
-    return () => (
-      <>
-        <div class={styles.addOtherSource}>
-          {sourceList.value.map(source => (
-            <div class={styles.sourceItem} onClick={() => onDetail(source)}>
-              <NImage
-                class={styles.coverImg}
-                src={source.image}
-                previewDisabled
-              />
-              <p class={styles.name}>{source.name}</p>
-            </div>
-          ))}
-        </div>
-        {/*
-          百科: https://oss.dayaedu.com/ktqy/17101370093153448b2cd.png
-          jianshang https://oss.dayaedu.com/ktqy/1710137009315eedcdeed.png
-          jiezou https://oss.dayaedu.com/ktqy/171013700931689a322a6.png
-          yinyuejia https://oss.dayaedu.com/ktqy/1710137009316fbd65d39.png
-          yueli https://oss.dayaedu.com/ktqy/17101370093160d479afe.png
-        */}
-        {/* 节奏练习 */}
-        <NModal
-          v-model:show={state.rhythmStatus}
-          preset="card"
-          class={['modalTitle background', styles.addOtherSourceModal]}
-          title={'节奏练习'}>
-          <SourceRhythm
-            onClose={() => (state.rhythmStatus = false)}
-            onConfirm={(item: any) => {
-              state.rhythmStatus = false;
-              emit('comfirm', {
-                materialId: null,
-                coverImg: item.coverImg,
-                dataJson: item.dataJson,
-                title: '节奏练习',
-                isCollect: false,
-                isSelected: false,
-                content: null,
-                type: 'RHYTHM'
-              });
-              emit('close');
-            }}
-          />
-        </NModal>
-
-        {/* 乐器百科 */}
-        <NModal
-          v-model:show={state.instrumentStatus}
-          preset="card"
-          class={['modalTitle', styles.instrumentModal]}
-          title={'乐器百科'}>
-          <SourceInstrument
-            onClose={() => (state.instrumentStatus = false)}
-            onConfirm={(val: any) => {
-              state.instrumentStatus = false;
-              const value = val || [];
-              const temp: any[] = [];
-              value.forEach((item: any) => {
-                temp.push({
-                  materialId: item.materialId,
-                  coverImg: item.coverImg,
-                  dataJson: null,
-                  title: item.title,
-                  isCollect: false,
-                  isSelected: false,
-                  content: item.content,
-                  type: 'INSTRUMENT'
-                });
-              });
-              emit('comfirm', temp);
-              emit('close');
-            }}
-          />
-        </NModal>
-
-        {/* 乐理知识 */}
-        <NModal
-          v-model:show={state.theoryStatus}
-          preset="card"
-          class={['modalTitle', styles.theoryModal]}
-          title={'乐理知识'}>
-          <SourceKnowledge
-            onClose={() => (state.theoryStatus = false)}
-            onConfirm={(val: any) => {
-              state.theoryStatus = false;
-              const value = val || [];
-              const temp: any[] = [];
-              value.forEach((item: any) => {
-                temp.push({
-                  materialId: item.materialId,
-                  coverImg: item.coverImg,
-                  dataJson: null,
-                  title: item.title,
-                  isCollect: false,
-                  isSelected: false,
-                  content: item.content,
-                  type: 'THEORY'
-                });
-              });
-              emit('comfirm', temp);
-              emit('close');
-            }}
-          />
-        </NModal>
-
-        {/* 音乐家 */}
-        <NModal
-          v-model:show={state.musicianStatus}
-          preset="card"
-          class={['modalTitle', styles.instrumentModal]}
-          title={'音乐家'}>
-          <SourceMusician
-            onClose={() => (state.musicianStatus = false)}
-            onConfirm={(val: any) => {
-              state.musicianStatus = false;
-              const value = val || [];
-              const temp: any[] = [];
-              value.forEach((item: any) => {
-                temp.push({
-                  materialId: item.materialId,
-                  coverImg: item.coverImg,
-                  dataJson: null,
-                  title: item.title,
-                  isCollect: false,
-                  isSelected: false,
-                  content: item.content,
-                  type: 'MUSICIAN'
-                });
-              });
-              emit('comfirm', temp);
-              emit('close');
-            }}
-          />
-        </NModal>
-
-        {/* 名曲鉴赏 */}
-        <NModal
-          v-model:show={state.musicStatus}
-          preset="card"
-          class={['modalTitle', styles.musicModal]}
-          title={'名曲鉴赏'}>
-          <SourceMusic
-            onClose={() => (state.musicStatus = false)}
-            onConfirm={(val: any) => {
-              state.musicStatus = false;
-              const value = val || [];
-              const temp: any[] = [];
-              value.forEach((item: any) => {
-                temp.push({
-                  materialId: item.materialId,
-                  coverImg: item.coverImg,
-                  dataJson: null,
-                  title: item.title,
-                  isCollect: false,
-                  isSelected: false,
-                  content: item.content,
-                  type: 'MUSIC_WIKI'
-                });
-              });
-              emit('comfirm', temp);
-              emit('close');
-            }}
-          />
-        </NModal>
-
-        {/* 听音练习 */}
-        <NModal
-          v-model:show={state.listenStatus}
-          preset="card"
-          class={['modalTitle background', styles.subjectSyncModal]}
-          title={'选择乐器'}>
-          <SubjectSync
-            // subjectId={prepareStore.getSubjectId as any}
-            onClose={() => (state.listenStatus = false)}
-            onConfirm={async (item: any) => {
-              //
-              try {
-                state.musicStatus = false;
-                const value = item.subjectCode || [];
-                const temp: any[] = [];
-                value.forEach((item: any) => {
-                  temp.push({
-                    materialId: item.materialId,
-                    coverImg: item.coverImg,
-                    dataJson: null,
-                    title: item.title,
-                    isCollect: false,
-                    isSelected: false,
-                    content: item.content,
-                    type: 'LISTEN'
-                  });
-                });
-                state.listenStatus = false;
-                emit('comfirm', temp);
-                emit('close');
-              } catch {
-                //
-              }
-            }}
-          />
-        </NModal>
-
-        <NModal
-          v-model:show={state.uploadStatus}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.attendClassModal]}
-          title={state.editStatus ? '修改资源' : '上传资源'}
-          blockScroll={false}>
-          <UploadModal
-            editStatus={state.editStatus}
-            onClose={() => {
-              state.uploadStatus = false;
-            }}
-            onConfirm={(item: any) => {
-              state.editIds = [];
-              state.editList = [];
-              state.editOverIds = [];
-              state.saveStatus = false;
-
-              try {
-                state.musicStatus = false;
-                const value = item || [];
-                const temp: any[] = [];
-                value.forEach((item: any) => {
-                  temp.push({
-                    materialId: item.id,
-                    coverImg: item.coverImg,
-                    dataJson: null,
-                    title: item.name,
-                    isCollect: false,
-                    isSelected: false,
-                    content: item.content,
-                    type: item.type
-                  });
-                });
-                // state.listenStatus = false;
-                emit('comfirm', temp);
-                emit('close');
-              } catch {
-                //
-              }
-            }}
-            list={state.editList}
-          />
-        </NModal>
-
-        <NModal
-          v-model:show={state.saveStatus}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.attendClassSaveModal]}
-          title={'上传资源'}
-          blockScroll={false}>
-          <SaveModal
-            onClose={() => (state.saveStatus = false)}
-            onConfrim={(val: any) => {
-              const list = val || [];
-              const temp: any = [];
-              list.forEach((item: any) => {
-                temp.push({
-                  subjectIds: null,
-                  openFlag: false,
-                  coverImg: item.coverImg,
-                  title: item.name || '',
-                  type: formatUrlType(item.content),
-                  enableFlag: 1,
-                  content: item.content,
-                  id: null
-                });
-              });
-              state.editList = temp;
-              state.uploadStatus = true;
-              state.editStatus = false;
-            }}
-          />
-        </NModal>
-      </>
-    );
-  }
-});
+import { defineComponent, reactive, ref } from 'vue';
+import { NImage, NModal } from 'naive-ui';
+import styles from './index.module.less';
+import icon1 from '../../images/addSource/icon1.png';
+import icon2 from '../../images/addSource/icon2.png';
+import icon3 from '../../images/addSource/icon3.png';
+import icon4 from '../../images/addSource/icon4.png';
+import icon5 from '../../images/addSource/icon5.png';
+import icon6 from '../../images/addSource/icon6.png';
+import icon7 from '../../images/addSource/icon7.png';
+import icon8 from '../../images/addSource/icon8.png';
+import { useRouter } from 'vue-router';
+import SourceRhythm from '../source-rhythm';
+import SourceInstrument from '../source-instrument';
+import SourceKnowledge from '../source-knowledge';
+import SourceMusician from '../source-musician';
+import SourceMusic from '../source-music';
+import { eventGlobal } from '/src/utils';
+import SubjectSync from '../subject-sync';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import UploadModal, {
+  formatUrlType
+} from '/src/views/natural-resources/components/my-resources/upload-modal';
+import SaveModal from '/src/views/natural-resources/components/my-resources/save-modal';
+
+export default defineComponent({
+  name: 'add-other-source',
+  emits: ['close', 'comfirm'],
+  setup(props, { emit }) {
+    const prepareStore = usePrepareStore();
+    const router = useRouter();
+    const sourceList = ref([
+      {
+        image: icon8,
+        name: '上传资源',
+        index: 7
+      },
+      {
+        image: icon1,
+        name: '听音练习',
+        index: 0
+      },
+      {
+        image: icon2,
+        name: '节奏练习',
+        index: 1
+      },
+      {
+        image: icon3,
+        name: '乐器百科',
+        index: 2
+      },
+      {
+        image: icon6,
+        name: '名曲鉴赏',
+        index: 3
+      },
+      {
+        image: icon5,
+        name: '音乐家',
+        index: 4
+      },
+      {
+        image: icon4,
+        name: '乐理知识',
+        index: 5
+      }
+
+      // {
+      //   image: icon7,
+      //   name: '制作曲谱',
+      //   index: 6
+      // }
+    ]);
+    const state = reactive({
+      listenStatus: false, // 听音练习
+      rhythmStatus: false, //节奏
+      theoryStatus: false, //
+      musicStatus: false, //
+      instrumentStatus: false, //
+      musicianStatus: false, //
+
+      uploadStatus: false,
+      saveStatus: false,
+      editStatus: false, // 是否编辑
+      editList: [] as any, // TOD
+      editIds: [] as any, // 编辑的
+      editOverIds: [] as any // 确认修改的数据
+    });
+
+    // LISTEN:听音,RHYTHM:节奏,THEORY:乐理知识,MUSIC_WIKI:曲目 INSTRUMENT:乐器 MUSICIAN:音乐家）
+
+    const onDetail = (item: any) => {
+      switch (item.index) {
+        case 0:
+          state.listenStatus = true;
+          break;
+        case 1:
+          state.rhythmStatus = true;
+          break;
+        case 2:
+          state.instrumentStatus = true;
+          break;
+        case 3:
+          state.musicStatus = true;
+          break;
+        case 4:
+          state.musicianStatus = true;
+          break;
+        case 5:
+          state.theoryStatus = true;
+          break;
+        case 6:
+          eventGlobal.emit('pageBeforeLeave', () => {
+            // 直接跳转到制谱页面 (临时存储数据)
+            sessionStorage.setItem('notation-open-create', '1');
+            router.push('/notation');
+          });
+          break;
+        case 7:
+          // eventGlobal.emit('pageBeforeLeave', () => {
+          //   // 直接跳转到制谱页面 (临时存储数据)
+          //   sessionStorage.setItem('notation-open-create', '1');
+          //   router.push('/notation');
+          // });
+          state.saveStatus = true;
+          break;
+        default:
+          break;
+      }
+    };
+    return () => (
+      <>
+        <div class={styles.addOtherSource}>
+          {sourceList.value.map(source => (
+            <div class={styles.sourceItem} onClick={() => onDetail(source)}>
+              <NImage
+                class={styles.coverImg}
+                src={source.image}
+                previewDisabled
+              />
+              <p class={styles.name}>{source.name}</p>
+            </div>
+          ))}
+        </div>
+        {/*
+          百科: https://oss.dayaedu.com/ktqy/17101370093153448b2cd.png
+          jianshang https://oss.dayaedu.com/ktqy/1710137009315eedcdeed.png
+          jiezou https://oss.dayaedu.com/ktqy/171013700931689a322a6.png
+          yinyuejia https://oss.dayaedu.com/ktqy/1710137009316fbd65d39.png
+          yueli https://oss.dayaedu.com/ktqy/17101370093160d479afe.png
+        */}
+        {/* 节奏练习 */}
+        <NModal
+          v-model:show={state.rhythmStatus}
+          preset="card"
+          class={['modalTitle background', styles.addOtherSourceModal]}
+          title={'节奏练习'}>
+          <SourceRhythm
+            onClose={() => (state.rhythmStatus = false)}
+            onConfirm={(item: any) => {
+              state.rhythmStatus = false;
+              emit('comfirm', {
+                materialId: null,
+                coverImg: item.coverImg,
+                dataJson: item.dataJson,
+                title: '节奏练习',
+                isCollect: false,
+                isSelected: false,
+                content: null,
+                type: 'RHYTHM'
+              });
+              emit('close');
+            }}
+          />
+        </NModal>
+
+        {/* 乐器百科 */}
+        <NModal
+          v-model:show={state.instrumentStatus}
+          preset="card"
+          class={['modalTitle', styles.instrumentModal]}
+          title={'乐器百科'}>
+          <SourceInstrument
+            onClose={() => (state.instrumentStatus = false)}
+            onConfirm={(val: any) => {
+              state.instrumentStatus = false;
+              const value = val || [];
+              const temp: any[] = [];
+              value.forEach((item: any) => {
+                temp.push({
+                  materialId: item.materialId,
+                  coverImg: item.coverImg,
+                  dataJson: null,
+                  title: item.title,
+                  isCollect: false,
+                  isSelected: false,
+                  content: item.content,
+                  type: 'INSTRUMENT'
+                });
+              });
+              emit('comfirm', temp);
+              emit('close');
+            }}
+          />
+        </NModal>
+
+        {/* 乐理知识 */}
+        <NModal
+          v-model:show={state.theoryStatus}
+          preset="card"
+          class={['modalTitle', styles.theoryModal]}
+          title={'乐理知识'}>
+          <SourceKnowledge
+            onClose={() => (state.theoryStatus = false)}
+            onConfirm={(val: any) => {
+              state.theoryStatus = false;
+              const value = val || [];
+              const temp: any[] = [];
+              value.forEach((item: any) => {
+                temp.push({
+                  materialId: item.materialId,
+                  coverImg: item.coverImg,
+                  dataJson: null,
+                  title: item.title,
+                  isCollect: false,
+                  isSelected: false,
+                  content: item.content,
+                  type: 'THEORY'
+                });
+              });
+              emit('comfirm', temp);
+              emit('close');
+            }}
+          />
+        </NModal>
+
+        {/* 音乐家 */}
+        <NModal
+          v-model:show={state.musicianStatus}
+          preset="card"
+          class={['modalTitle', styles.instrumentModal]}
+          title={'音乐家'}>
+          <SourceMusician
+            onClose={() => (state.musicianStatus = false)}
+            onConfirm={(val: any) => {
+              state.musicianStatus = false;
+              const value = val || [];
+              const temp: any[] = [];
+              value.forEach((item: any) => {
+                temp.push({
+                  materialId: item.materialId,
+                  coverImg: item.coverImg,
+                  dataJson: null,
+                  title: item.title,
+                  isCollect: false,
+                  isSelected: false,
+                  content: item.content,
+                  type: 'MUSICIAN'
+                });
+              });
+              emit('comfirm', temp);
+              emit('close');
+            }}
+          />
+        </NModal>
+
+        {/* 名曲鉴赏 */}
+        <NModal
+          v-model:show={state.musicStatus}
+          preset="card"
+          class={['modalTitle', styles.musicModal]}
+          title={'名曲鉴赏'}>
+          <SourceMusic
+            onClose={() => (state.musicStatus = false)}
+            onConfirm={(val: any) => {
+              state.musicStatus = false;
+              const value = val || [];
+              const temp: any[] = [];
+              value.forEach((item: any) => {
+                temp.push({
+                  materialId: item.materialId,
+                  coverImg: item.coverImg,
+                  dataJson: null,
+                  title: item.title,
+                  isCollect: false,
+                  isSelected: false,
+                  content: item.content,
+                  type: 'MUSIC_WIKI'
+                });
+              });
+              emit('comfirm', temp);
+              emit('close');
+            }}
+          />
+        </NModal>
+
+        {/* 听音练习 */}
+        <NModal
+          v-model:show={state.listenStatus}
+          preset="card"
+          class={['modalTitle background', styles.subjectSyncModal]}
+          title={'选择乐器'}>
+          <SubjectSync
+            // subjectId={prepareStore.getSubjectId as any}
+            onClose={() => (state.listenStatus = false)}
+            onConfirm={async (item: any) => {
+              //
+              try {
+                state.musicStatus = false;
+                const value = item.subjectCode || [];
+                const temp: any[] = [];
+                value.forEach((item: any) => {
+                  temp.push({
+                    materialId: item.materialId,
+                    coverImg: item.coverImg,
+                    dataJson: null,
+                    title: item.title,
+                    isCollect: false,
+                    isSelected: false,
+                    content: item.content,
+                    type: 'LISTEN'
+                  });
+                });
+                state.listenStatus = false;
+                emit('comfirm', temp);
+                emit('close');
+              } catch {
+                //
+              }
+            }}
+          />
+        </NModal>
+
+        <NModal
+          v-model:show={state.uploadStatus}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.attendClassModal]}
+          title={state.editStatus ? '修改资源' : '上传资源'}
+          blockScroll={false}>
+          <UploadModal
+            editStatus={state.editStatus}
+            onClose={() => {
+              state.uploadStatus = false;
+            }}
+            onConfirm={(item: any) => {
+              state.editIds = [];
+              state.editList = [];
+              state.editOverIds = [];
+              state.saveStatus = false;
+
+              try {
+                state.musicStatus = false;
+                const value = item || [];
+                const temp: any[] = [];
+                value.forEach((item: any) => {
+                  temp.push({
+                    materialId: item.id,
+                    coverImg: item.coverImg,
+                    dataJson: null,
+                    title: item.name,
+                    isCollect: false,
+                    isSelected: false,
+                    content: item.content,
+                    type: item.type
+                  });
+                });
+                // state.listenStatus = false;
+                emit('comfirm', temp);
+                emit('close');
+              } catch {
+                //
+              }
+            }}
+            list={state.editList}
+          />
+        </NModal>
+
+        <NModal
+          v-model:show={state.saveStatus}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.attendClassSaveModal]}
+          title={'上传资源'}
+          blockScroll={false}>
+          <SaveModal
+            onClose={() => (state.saveStatus = false)}
+            onConfrim={(val: any) => {
+              const list = val || [];
+              const temp: any = [];
+              list.forEach((item: any) => {
+                temp.push({
+                  subjectIds: null,
+                  openFlag: false,
+                  coverImg: item.coverImg,
+                  title: item.name || '',
+                  type: formatUrlType(item.content),
+                  enableFlag: 1,
+                  content: item.content,
+                  id: null
+                });
+              });
+              state.editList = temp;
+              state.uploadStatus = true;
+              state.editStatus = false;
+            }}
+          />
+        </NModal>
+      </>
+    );
+  }
+});