更新

src/components/TheMessageDialog/index.module.less

@@ -1,5 +1,5 @@
 .studentRemove {
-  padding: 20px 40px 0;
+  padding: 12px 40px 0;
 
   p {
     font-size: max(18px, 14Px);

src/components/TheTooltip/index.tsx

@@ -1,6 +1,6 @@
-import { NTooltip } from 'naive-ui'
-import { defineComponent, PropType } from 'vue'
-import styles from './index.module.less'
+import { NTooltip } from 'naive-ui';
+import { defineComponent, PropType } from 'vue';
+import styles from './index.module.less';
 
 export default defineComponent({
   name: 'the-tooltip',
@@ -55,14 +55,12 @@ export default defineComponent({
           trigger={props.trigger}
           placement={props.placement}
           showArrow={props.showArrow}
-          delay={500}
-        >
+          delay={500}>
           {{
             trigger: () => (
               <p
                 style={{ maxWidth: props.showContentWidth + 'px' }}
-                class={styles.showContentWidth}
-              >
+                class={styles.showContentWidth}>
                 {props.content}
               </p>
             ),
@@ -70,6 +68,6 @@ export default defineComponent({
           }}
         </NTooltip>
       </>
-    )
+    );
   }
-})
+});

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

@@ -1,5 +1,6 @@
 .cardPreview {
   width: 920px;
+  overflow: hidden;
 
   :global {
     .n-card__content {
@@ -36,4 +37,8 @@
   }
 
   // height: calc(85vh - var(--modal-lesson-tab-height) - 151.171875px - 12px);
+
+  .instrumentGroup {
+    height: 82vh;
+  }
 }

src/components/card-preview/index.tsx

@@ -6,6 +6,8 @@ import MusicModal from './music-modal';
 import SongModal from './song-modal';
 import TheEmpty from '../TheEmpty';
 import RhythmModal from './rhythm-modal';
+import InstruemntDetail from '/src/views/prepare-lessons/model/source-instrument/detail';
+import TheoryDetail from '/src/views/prepare-lessons/model/source-knowledge/detail';
 
 export default defineComponent({
   name: 'card-preview',
@@ -100,10 +102,29 @@ export default defineComponent({
           {item.value.type === 'RHYTHM' && (
             <RhythmModal class={styles.musicPreview} item={item.value} />
           )}
+
+          {item.value.type === 'INSTRUMENT' && (
+            <div class={styles.instrumentGroup}>
+              <InstruemntDetail type="modal" id={item.value.content} />
+            </div>
+          )}
+
+          {item.value.type === 'THEORY' && (
+            <div>
+              <TheoryDetail type="modal" id={item.value.content} />
+            </div>
+          )}
+
           {/* LISTEN:听音,RHYTHM:节奏,THEORY:乐理知识,MUSIC:曲目 INSTRUMENT:乐器 MUSICIAN:音乐家） */}
-          {!['VIDEO', 'MUSIC', 'SONG', 'PPT', 'RHYTHM'].includes(
-            item.value.type
-          ) && <TheEmpty />}
+          {![
+            'VIDEO',
+            'MUSIC',
+            'SONG',
+            'PPT',
+            'RHYTHM',
+            'INSTRUMENT',
+            'THEORY'
+          ].includes(item.value.type) && <TheEmpty />}
         </NModal>
       </>
     );

src/components/card-type/index.module.less

@@ -111,7 +111,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 3px 0;
+    // padding: 3px 0;
   }
 
   .title {
@@ -119,8 +119,8 @@
     align-items: center;
 
     .titleType {
-      width: 12Px;
-      height: 12Px;
+      width: 13Px;
+      height: 13Px;
       margin-top: 1px;
     }
 

src/hooks/use-async.ts

@@ -33,7 +33,7 @@ export const setTabsCaches = (current: any, key = 'current', routes: any) => {
   const searchs = new Searchs(routes.path);
   searchs.update({ [key]: current }, undefined, 'form');
   const active = searchs.get(routes.path);
-  console.log(active, 'setTabsCaches');
+  // console.log(active, 'setTabsCaches');
 };
 
 /**

src/styles/index.less

@@ -403,6 +403,10 @@ body {
   font-size: max(15px, 13Px) !important;
 }
 
+.n-select-menu .n-button {
+  --n-height: 28px !important;
+}
+
 .n-form-item-label__text {
   font-size: max(15px, 13Px);
 }

src/views/attend-class/index.tsx

@@ -82,6 +82,7 @@ import SelectClass from './model/select-class';
 import SourceList from './model/source-list';
 import RhythmModal from './component/rhythm-modal';
 import InstruemntDetail from '/src/views/prepare-lessons/model/source-instrument/detail';
+import TheotyDetail from '/src/views/prepare-lessons/model/source-knowledge/detail';
 
 export type ToolType = 'init' | 'pen' | 'whiteboard' | 'call';
 export type ToolItem = {
@@ -1565,6 +1566,13 @@ export default defineComponent({
                           activeStatus={popupData.activeIndex === mIndex}
                           ref={(el: any) => (m.iframeRef = el)}
                         />
+                      ) : m.type === 'THEORY' ? (
+                        <TheotyDetail
+                          type="preview"
+                          id={m.content}
+                          activeStatus={popupData.activeIndex === mIndex}
+                          ref={(el: any) => (m.iframeRef = el)}
+                        />
                       ) : (
                         <MusicScore
                           activeModel={activeData.model}
@@ -1619,12 +1627,6 @@ export default defineComponent({
                   )
                 }}
               </NTooltip>
-
-              {/* <div class={styles.rightTips}>
-                {index === 0 && data.type === 'preview'
-                  ? item.name2
-                  : item.name}
-              </div> */}
             </div>
           ))}
         </div>

src/views/classList/classDetail.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, onMounted, ref } from 'vue';
 import styles from './index.module.less';
 import { NTabs, NTabPane } from 'naive-ui';
-import { useRoute } from 'vue-router';
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 import CBreadcrumb from '@/components/CBreadcrumb';
 import ClassStudent from './components/classStudent';
 import AfterWork from './components/afterWork';
@@ -45,6 +45,13 @@ export default defineComponent({
         activeTab.value = classDetailTabs;
       }
     });
+
+    onBeforeRouteUpdate(() => {
+      const classDetailTabs = sessionStorage.getItem('classDetailTabs');
+      if (classDetailTabs) {
+        activeTab.value = classDetailTabs;
+      }
+    });
     return () => (
       <div>
         <CBreadcrumb list={routerList.value}></CBreadcrumb>

src/views/home/modals/class-modal/index.tsx

@@ -324,7 +324,8 @@ export default defineComponent({
                       name: forms.classSelect.name,
                       id: forms.classSelect.currentClass,
                       gradeYear: forms.classSelect.gradeYear,
-                      upgradeFlag: forms.classSelect.upgradeFlag ? 1 : 0 // 是否为历史班
+                      upgradeFlag: forms.classSelect.upgradeFlag ? 1 : 0, // 是否为历史班
+                      v: +new Date()
                     }
                   });
                 }}>

src/views/prepare-lessons/components/lesson-main/courseware-presets/index.module.less

@@ -39,12 +39,17 @@
 }
 
 .addBtn {
-  height: max(36px, 32Px) !important;
+  // height: max(36px, 32Px) !important;
   background: #198cfe !important;
   border-radius: 7Px !important;
   padding: 0 20Px !important;
+
+
+  border-radius: 8px;
+  height: 38px;
+  font-size: max(18px, 13Px) !important;
   font-weight: 600 !important;
-  font-size: max(14px, 12Px) !important;
+
 }
 
 
@@ -82,9 +87,9 @@
   }
 
   &.line {
-    margin-top: 15px;
+    margin-top: 25px;
     border-top: 1px solid #F2F2F2;
-    padding-top: 30px;
+    padding-top: 35px;
 
     .more {
       display: flex;

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

@@ -131,9 +131,9 @@ export default defineComponent({
         const result = data.rows || [];
         const tempList: any = [];
         result.forEach((item: any) => {
-          const index = forms.tableList.findIndex(
-            (i: any) => i.fromChapterLessonCoursewareId === item.id
-          );
+          // const index = forms.tableList.findIndex(
+          //   (i: any) => i.fromChapterLessonCoursewareId === item.id
+          // );
           const firstItem: any =
             item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
           tempList.push({
@@ -445,7 +445,7 @@ export default defineComponent({
                 class={styles.addBtnIcon}
                 previewDisabled
                 src={add}></NImage>
-              添加课件
+              创建课件
             </NButton>
           </NSpace>
           <div style={{ overflow: 'hidden' }}>
@@ -528,7 +528,7 @@ export default defineComponent({
                       <NImage
                         class={
                           forms.carouselIndex ==
-                            forms.openTableList.length - 4 && styles.disabled
+                            forms.openTableList.length - 1 && styles.disabled
                         }
                         previewDisabled
                         src={iconSlideRight}
@@ -556,8 +556,11 @@ export default defineComponent({
                           ]}>
                           <div class={styles.itemWrapBox}>
                             <CoursewareType
+                              isShowOpenFlag={false}
                               isShowAdd
+                              isHoverShowAdd={false}
                               item={child}
+                              onClick={() => onPreviewAttend(child.id)}
                               onAdd={() => onAddCourseware(child)}
                             />
                           </div>
@@ -624,7 +627,7 @@ export default defineComponent({
           v-model:show={forms.preRemoveVisiable}
           preset="card"
           class={['modalTitle', styles.removeVisiable1]}
-          title={'保存预设'}>
+          title={'删除课件'}>
           <TheMessageDialog
             content={`<p style="text-align: left;">请确认是否删除【${forms.selectItem.name}】，删除后不可恢复</p>`}
             cancelButtonText="取消"

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

@@ -53,6 +53,14 @@
   }
 
 
+  .btnSubjectList {
+    :global {
+      .n-base-selection-tag-wrapper .n-tag {
+        font-size: max(14px, 12Px);
+      }
+    }
+  }
+
   :global {
 
     .n-input,
@@ -242,7 +250,7 @@
     .n-input,
     .n-base-selection {
       --n-height: max(40px, 36Px) !important;
-      width: 200px !important;
+      width: 250px !important;
       font-size: 15px;
       border-radius: 8px !important;
     }
@@ -265,27 +273,43 @@
   .iconCUp {
     background: url('../../../images/icon-c-up.png') no-repeat center;
     background-size: contain;
+
+    &:hover {
+      background: url('../../../images/icon-c-up-active.png') no-repeat center;
+      background-size: contain;
+    }
   }
 
   .iconCDown {
     background: url('../../../images/icon-c-down.png') no-repeat center;
     background-size: contain;
+
+    &:hover {
+      background: url('../../../images/icon-c-down-active.png') no-repeat center;
+      background-size: contain;
+    }
   }
 
   .iconCRemove {
     background: url('../../../images/icon-c-delete.png') no-repeat center;
     background-size: contain;
+
+    &:hover {
+      background: url('../../../images/icon-c-delete-active.png') no-repeat center;
+      background-size: contain;
+    }
   }
 }
 
 .addKnowledgePoint {
-  margin: 13px;
-  width: calc(100% - 26px) !important;
+  margin: 20px;
+  width: calc(100% - 40px) !important;
   --n-border-radius: 7px !important;
   --n-height: max(40px, 36Px) !important;
   font-weight: 600 !important;
   --n-font-size: max(14px, 12Px) !important;
   color: #0378EC;
+  background-color: #E8F4FF !important;
 
   .iconCAdd {
     width: max(13px, 11Px);
@@ -321,6 +345,14 @@
       width: 100%;
       height: 100%;
       padding: 0 6px;
+
+      &:hover {
+        .itemOperation {
+          transition: all .2s ease;
+          opacity: 1;
+          visibility: visible;
+        }
+      }
     }
 
     .itemOperation {
@@ -329,6 +361,9 @@
       right: 10px;
       z-index: 98;
       cursor: move;
+      opacity: 0;
+      visibility: hidden;
+      transition: all .2s ease;
     }
 
     .iconDelete {
@@ -430,8 +465,8 @@
   // 鼠标经过时样式
   &:hover {
     transform: scale(1.01);
-    transition: all .3s ease-in-out;
-    border: 2px solid rgba(0, 122, 254, 1) !important;
+    transition: all .2s ease-in-out;
+    border: 1px solid rgba(0, 122, 254, 1) !important;
   }
 }
 

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

@@ -36,7 +36,7 @@ import {
   saveCourseware
 } from '../../../api';
 import Draggable from 'vuedraggable';
-import iconDelete from '../../../images/icon-delete.png';
+import iconDelete from '../../../images/icon-delete-default.png';
 import iconAddMusic from '../../../images/icon-add-music.png';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 // import deepClone from '/src/helpers/deep-clone';
@@ -221,7 +221,7 @@ export default defineComponent({
     };
 
     // 操作
-    const onChangePoint = (type: string, index: number) => {
+    const onChangePoint = (type: string, index: number, item?: any) => {
       if (type === 'up') {
         // 向上移动
         if (index === 0) return;
@@ -241,8 +241,9 @@ export default defineComponent({
           contentDirection: 'left',
           title: '删除知识点',
           loading: false,
-          content:
-            '请确认是否删除该知识点，删除知识点后将同步删除知识点下的资源',
+          content: `请确认是否删除${
+            item.name ? '【' + item.name + '】' : '该知识点'
+          }，删除知识点后将同步删除知识点下的资源`,
           cancelButtonText: '取消',
           confirmButtonText: '确认',
           index
@@ -260,6 +261,34 @@ export default defineComponent({
         addCoursewareItem(forms.addCoursewareItem);
       } else if (type === 'save' || type === 'pageLive') {
         if (forms.messageOperation.loading) return;
+        if (!forms.name) {
+          message.error('请输入课件标题');
+          forms.messageOperation.visiable = false;
+          return;
+        }
+        if (forms.subjects.length <= 0) {
+          message.error('请选择声部');
+          forms.messageOperation.visiable = false;
+          return;
+        }
+
+        let isNotAdd = false;
+        for (const item of forms.coursewareList) {
+          if (!item.name) {
+            message.error('请输入知识点名称');
+            forms.messageOperation.visiable = false;
+            return;
+          }
+          if (Array.isArray(item.list) && item.list.length <= 0) {
+            isNotAdd = true;
+          }
+        }
+
+        if (isNotAdd) {
+          message.error('请至少添加一个资源');
+          forms.messageOperation.visiable = false;
+          return;
+        }
         forms.messageOperation.loading = true;
         await onSaveCourseWare();
         forms.messageOperation.loading = false;
@@ -279,9 +308,12 @@ export default defineComponent({
     const addCoursewareItem = (item: any, point?: any) => {
       nextTick(() => {
         if (point) {
-          const dom = document.querySelectorAll('.row-nav');
+          const rowGroupDom = document.querySelectorAll('.row-group');
+          console.log(rowGroupDom, 'row');
+          const dom = rowGroupDom[item.index].querySelectorAll('.row-nav');
+          // const dom = document.querySelectorAll('.row-nav');
           let isAdd = false;
-          dom.forEach((child: any) => {
+          dom.forEach((child: any, index: number) => {
             // console.log(child);
             const status = isPointInsideElement(child, point.x, point.y);
             if (status) {
@@ -289,9 +321,9 @@ export default defineComponent({
                 forms.coursewareList[item.index || 0].list || [];
               const left = isPointOnLeft(child, point.x);
               if (!left) {
-                array.splice(item.index + 1, 0, item);
+                array.splice(index + 1, 0, item);
               } else {
-                array.splice(item.index, 0, item);
+                array.splice(index, 0, item);
               }
               isAdd = true;
               forms.coursewareList[item.index || 0].list = array;
@@ -334,17 +366,10 @@ export default defineComponent({
           message.error('请至少添加一个资源');
           return;
         }
-        forms.messageOperation = {
-          visiable: true,
-          type: 'save',
-          loading: false,
-          contentDirection: 'center',
-          title: '保存课件',
-          content: '当前课件暂未保存，是否保存？',
-          cancelButtonText: '不保存',
-          confirmButtonText: '保存',
-          index: 0
-        };
+        await onSaveCourseWare();
+
+        emit('change', { status: false });
+        eventGlobal.emit('teacher-slideshow', false);
       } catch {
         //
       }
@@ -389,7 +414,6 @@ export default defineComponent({
             chapterKnowledgeMaterialList: tempItem
           });
         });
-        console.log(params.chapterKnowledgeList);
         if (props.groupItem?.id) {
           await api_teacherChapterLessonCoursewareUpdate({
             id: props.groupItem.id,
@@ -430,7 +454,6 @@ export default defineComponent({
 
     // 当页面离开时
     const onPageBeforeLeave = (event: any) => {
-      console.log(event, typeof event);
       forms.messageCallBack = event;
       forms.messageOperation = {
         visiable: true,
@@ -466,6 +489,13 @@ export default defineComponent({
         deep: true
       }
     );
+
+    // 全选
+    const chioseAll = (list: any) => {
+      forms.subjects = list.map((child: any) => {
+        return child.id;
+      }) as any;
+    };
     return () => (
       <div class={styles.coursewareModal}>
         <div class={styles.btnGroup}>
@@ -496,6 +526,19 @@ export default defineComponent({
                 size="small"
                 v-model:value={forms.subjects}
                 clearable
+                v-slots={{
+                  action: () => (
+                    <>
+                      <NButton
+                        text
+                        style=" --n-width: 100% "
+                        size="small"
+                        onClick={() => chioseAll(prepareStore.getSubjectList)}>
+                        全选
+                      </NButton>
+                    </>
+                  )
+                }}
               />
             </div>
             <div class={styles.btnItem}>
@@ -527,12 +570,24 @@ export default defineComponent({
             <NButton
               type="error"
               onClick={() => {
-                emit('change', { status: false });
-                eventGlobal.emit('teacher-slideshow', false);
+                forms.messageOperation = {
+                  visiable: true,
+                  type: 'save',
+                  loading: false,
+                  contentDirection: 'center',
+                  title: '保存课件',
+                  content: '当前课件暂未保存，是否保存？',
+                  cancelButtonText: '不保存',
+                  confirmButtonText: '保存',
+                  index: 0
+                };
               }}>
               取消
             </NButton>
-            <NButton type="primary" onClick={onSubmit}>
+            <NButton
+              type="primary"
+              onClick={onSubmit}
+              disabled={forms.coursewareList.length <= 0}>
               保存课件
             </NButton>
             {/* <NButton
@@ -550,7 +605,7 @@ export default defineComponent({
             <div class={[styles.listSection]}>
               {forms.coursewareList.map((item: any, index: number) => (
                 <div
-                  class={styles.listItems}
+                  class={[styles.listItems, 'row-group']}
                   onDragenter={(e: any) => {
                     e.preventDefault();
                   }}
@@ -603,7 +658,7 @@ export default defineComponent({
 
                   <NSpace class={styles.operationGroup}>
                     {index > 0 && (
-                      <NTooltip>
+                      <NTooltip showArrow={false}>
                         {{
                           trigger: () => (
                             <i
@@ -615,7 +670,7 @@ export default defineComponent({
                       </NTooltip>
                     )}
                     {forms.coursewareList.length > 1 && (
-                      <NTooltip>
+                      <NTooltip showArrow={false}>
                         {{
                           trigger: () => (
                             <i
@@ -626,12 +681,14 @@ export default defineComponent({
                         }}
                       </NTooltip>
                     )}
-                    <NTooltip>
+                    <NTooltip showArrow={false}>
                       {{
                         trigger: () => (
                           <i
                             class={styles.iconCRemove}
-                            onClick={() => onChangePoint('remove', index)}></i>
+                            onClick={() =>
+                              onChangePoint('remove', index, item)
+                            }></i>
                         ),
                         default: () => '删除知识点'
                       }}
@@ -756,13 +813,19 @@ export default defineComponent({
         </NScrollbar>
 
         {/* 弹窗查看 */}
-        <CardPreview v-model:show={forms.show} item={forms.item} />
+        <CardPreview
+          size={
+            ['INSTRUMENT', 'THEORY'].includes(forms.item.type) ? 'large' : ''
+          }
+          v-model:show={forms.show}
+          item={forms.item}
+        />
 
         <NModal
           v-model:show={forms.addCoursewareVisiable}
           preset="card"
           class={['modalTitle', styles.addCourseware]}
-          title={'添加知识点'}>
+          title={'添加到知识点'}>
           <AddItemModel
             coursewareList={forms.coursewareList}
             onClose={() => (forms.addCoursewareVisiable = false)}
@@ -776,6 +839,8 @@ export default defineComponent({
                 });
 
                 forms.addCoursewareVisiable = false;
+              } else {
+                message.error('请选择需要添加的知识点');
               }
             }}
           />
@@ -851,10 +916,10 @@ export default defineComponent({
             onComfirm={item => {
               if (Array.isArray(item)) {
                 item.forEach((child: any) => {
-                  addItem({ ...child, index: forms.addOtherIndex });
+                  addCoursewareItem({ ...child, index: forms.addOtherIndex });
                 });
               } else {
-                addItem({ ...item, index: forms.addOtherIndex });
+                addCoursewareItem({ ...item, index: forms.addOtherIndex });
               }
             }}
           />

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

@@ -63,7 +63,12 @@
   .homerowkTabs {
     :global {
       .n-tabs-tab-pad {
-        width: 13px !important;
+        width: 15px !important;
+      }
+
+      .n-tabs-tab {
+        color: #8B8D98;
+        font-size: max(18px, 13Px);
       }
 
       .v-x-scroll {

src/views/prepare-lessons/model/add-item-model/index.tsx

@@ -23,7 +23,7 @@ export default defineComponent({
     return () => (
       <div class={styles.addCoursewareItem}>
         <NCheckboxGroup v-model:value={selects.value}>
-          <NGrid yGap={12} cols={2}>
+          <NGrid yGap={14} cols={2}>
             {props.coursewareList.map((courseware: any, index: number) => (
               <NGi>
                 <NCheckbox value={index}>{courseware.name}</NCheckbox>

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

@@ -7,16 +7,21 @@
 
   .sourceItem {
     cursor: pointer;
-    transition: all .2s ease;
 
-    &:hover {
-      transform: scale(1.03);
-      transition: all .2s ease;
-    }
 
     .coverImg {
-      width: 133px;
-      height: 133px;
+      width: 127px;
+      height: 127px;
+      transition: all .2s ease;
+      border: 3px solid transparent;
+      border-radius: 17px;
+      box-sizing: content-box;
+
+      &:hover {
+        border: 3px solid #198CFE;
+        transform: scale(1.02);
+        transition: all .2s ease;
+      }
     }
 
     .name {
@@ -50,4 +55,9 @@
       }
     }
   }
+}
+
+.theoryModal {
+  width: 1200px;
+  position: relative;
 }

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

@@ -11,6 +11,7 @@ import icon7 from '../../images/addSource/icon7.png';
 import { useRouter } from 'vue-router';
 import SourceRhythm from '../source-rhythm';
 import SourceInstrument from '../source-instrument';
+import SourceKnowledge from '../source-knowledge';
 
 export default defineComponent({
   name: 'add-other-source',
@@ -34,7 +35,7 @@ export default defineComponent({
         index: 2
       },
       {
-        image: icon4,
+        image: icon6,
         name: '名曲鉴赏',
         index: 3
       },
@@ -44,7 +45,7 @@ export default defineComponent({
         index: 4
       },
       {
-        image: icon6,
+        image: icon4,
         name: '乐理知识',
         index: 5
       },
@@ -62,7 +63,7 @@ export default defineComponent({
       instrumentStatus: false, //
       musicianStatus: false //
     });
-    // LISTEN:听音,RHYTHM：节奏,THEORY：乐理知识,MUSIC:曲目 INSTRUMENT:乐器 MUSICIAN:音乐家）
+    // LISTEN:听音,RHYTHM:节奏,THEORY:乐理知识,MUSIC:曲目 INSTRUMENT:乐器 MUSICIAN:音乐家）
 
     const onDetail = (item: any) => {
       switch (item.index) {
@@ -72,6 +73,9 @@ export default defineComponent({
         case 2:
           state.instrumentStatus = true;
           break;
+        case 5:
+          state.theoryStatus = true;
+          break;
         case 6:
           // 直接跳转到制谱页面 (临时存储数据)
           sessionStorage.setItem('notation-open-create', '1');
@@ -158,11 +162,29 @@ export default defineComponent({
         </NModal>
 
         {/* 乐理知识 */}
-        {/* <NModal
-          v-model:show={state.instrumentStatus}
+        <NModal
+          v-model:show={state.theoryStatus}
           preset="card"
-          class={['modalTitle', styles.instrumentModal]}
-          title={'乐器百科'}></NModal> */}
+          class={['modalTitle', styles.theoryModal]}
+          title={'乐理知识'}>
+          <SourceKnowledge
+            onClose={() => (state.theoryStatus = false)}
+            onConfirm={(val: any) => {
+              state.theoryStatus = false;
+              emit('comfirm', {
+                materialId: val.materialId,
+                coverImg: val.coverImg,
+                dataJson: null,
+                title: val.title,
+                isCollect: false,
+                isSelected: false,
+                content: val.content,
+                type: 'THEORY'
+              });
+              emit('close');
+            }}
+          />
+        </NModal>
       </>
     );
   }

src/views/prepare-lessons/model/courseware-type/index.module.less

@@ -2,13 +2,7 @@
   position: relative;
   background: #F5F6FA;
   border-radius: 13px;
-  padding: 10px;
-  transition: all 0.2s ease;
-
-  &:hover {
-    transform: scale(1.01);
-    transition: all 0.2s ease;
-  }
+  padding: 10px 10px 16px;
 
   &.coursewareTypeHover:hover {
     .addBtn {
@@ -18,9 +12,9 @@
   }
 
   &.coursewareTypeHocoursewareTypeShow {
-    .cover {
-      cursor: default;
-    }
+    // .cover {
+    //   cursor: default;
+    // }
 
     .addBtn {
       opacity: 1;
@@ -42,6 +36,7 @@
 
     z-index: 1;
     --n-border: none !important;
+    font-size: max(16px, 12Px) !important;
   }
 
   :global {
@@ -59,6 +54,19 @@
     overflow: hidden;
     background-color: #fff;
     transition: all .2s ease;
+    transition: all 0.2s ease;
+
+    &:hover {
+      transform: scale(1.01);
+      transition: all 0.2s ease;
+
+      // &::after {
+      //   content: '';
+      //   position: absolute;
+      //   inset: 0;
+      //   background-color: rgba(0, 0, 0, 0.3);
+      // }
+    }
 
     .status {
       position: absolute;
@@ -70,6 +78,7 @@
       font-size: max(12px, 11Px);
       color: #FFFFFF;
       padding: 3px 10px;
+      z-index: 9;
     }
 
     :global {
@@ -81,12 +90,19 @@
 
     img {
       width: 100%;
+      height: fit-content;
     }
 
-    &:hover .preview {
-      opacity: 1;
-      visibility: visible;
-      transition: all .2s ease;
+    &.hideP:hover {
+      &::after {
+        display: none;
+      }
+
+      .preview {
+        opacity: 1;
+        visibility: visible;
+        transition: all .2s ease;
+      }
     }
   }
 
@@ -99,7 +115,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: rgba(0, 0, 0, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -120,7 +136,7 @@
 
     .name {
       font-weight: 600;
-      font-size: max(13px, 12Px);
+      font-size: max(14px, 13Px);
       color: #000000;
       display: flex;
       align-items: center;
@@ -214,10 +230,42 @@
     padding: 5px;
     box-sizing: content-box;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     img {
       width: 20Px;
       height: 20Px;
     }
+
+    .iconEdit,
+    .iconDelete {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+    }
+
+    .iconEdit {
+      background: url('../../images/icon-courseware-edit.png') no-repeat center;
+      background-size: contain;
+    }
+
+    .iconDelete {
+      background: url('../../images/icon-courseware-delete.png') no-repeat center;
+      background-size: contain;
+    }
+
+    &:hover {
+      .iconEdit {
+        background: url('../../images/icon-courseware-edit-active.png') no-repeat center;
+        background-size: contain;
+      }
+
+      .iconDelete {
+        background: url('../../images/icon-courseware-delete-active.png') no-repeat center;
+        background-size: contain;
+      }
+    }
   }
 }

src/views/prepare-lessons/model/courseware-type/index.tsx

@@ -36,6 +36,10 @@ export default defineComponent({
     isShowPreviewBtn: {
       type: Boolean,
       default: false
+    },
+    isShowOpenFlag: {
+      type: Boolean,
+      default: true
     }
   },
   /** add */
@@ -62,8 +66,12 @@ export default defineComponent({
             {props.item.isAdd ? '已添加' : '添加'}
           </NButton>
         )}
-        <div class={styles.cover} onClick={() => emit('click')}>
-          {props.item.openFlag && <span class={styles.status}>公开</span>}
+        <div
+          class={[styles.cover, props.isShowPreviewBtn && styles.hideP]}
+          onClick={() => emit('click')}>
+          {props.item.openFlag && props.isShowOpenFlag && (
+            <span class={styles.status}>公开</span>
+          )}
           <NImage objectFit="cover" previewDisabled src={props.item.coverImg} />
 
           {props.isShowPreviewBtn && (
@@ -88,21 +96,23 @@ export default defineComponent({
               开始上课
             </div>
             <NSpace>
-              <NTooltip>
+              <NTooltip showArrow={false}>
                 {{
                   trigger: () => (
                     <div class={styles.optons} onClick={() => emit('edit')}>
-                      <NImage src={iconEdit} previewDisabled></NImage>
+                      {/* <NImage src={iconEdit} previewDisabled></NImage> */}
+                      <i class={styles.iconEdit}></i>
                     </div>
                   ),
                   default: () => <div>编辑</div>
                 }}
               </NTooltip>
-              <NTooltip>
+              <NTooltip showArrow={false}>
                 {{
                   trigger: () => (
                     <div class={styles.optons} onClick={() => emit('delete')}>
-                      <NImage src={iconDelete} previewDisabled></NImage>
+                      {/* <NImage src={iconDelete} previewDisabled></NImage> */}
+                      <i class={styles.iconDelete}></i>
                     </div>
                   ),
                   default: () => <div>删除</div>

src/views/prepare-lessons/model/related-class/index.tsx

@@ -176,6 +176,7 @@ export default defineComponent({
                       <div class={styles.itemWrapBox}>
                         <CoursewareType
                           isHoverShowAdd={false}
+                          isShowOpenFlag={false}
                           isShowAdd
                           item={item}
                           onAdd={() => {

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

@@ -55,15 +55,16 @@ export default defineComponent({
             </NTabPane>
           )}
           <NTabPane
-            name="myResources"
-            tab={props.from === 'class' ? '我的曲目' : '我的资源'}>
-            <SelectItem type="myResources" from={props.from} />
-          </NTabPane>
-          <NTabPane
             name="shareResources"
             tab={props.from === 'class' ? '共享曲目' : '共享资源'}>
             <SelectItem type="shareResources" from={props.from} />
           </NTabPane>
+          <NTabPane
+            name="myResources"
+            tab={props.from === 'class' ? '我的曲目' : '我的资源'}>
+            <SelectItem type="myResources" from={props.from} />
+          </NTabPane>
+
           <NTabPane name="myCollect" tab="我的收藏">
             <SelectItem type="myCollect" from={props.from} />
           </NTabPane>

src/views/prepare-lessons/model/source-instrument/components/list/index.tsx

@@ -6,6 +6,7 @@ import TheEmpty from '/src/components/TheEmpty';
 import Pagination from '/src/components/pagination';
 import { useRouter } from 'vue-router';
 import { api_knowledgeWiki_page } from '/src/views/content-information/api';
+import CardPreview from '/src/components/card-preview';
 
 export default defineComponent({
   name: 'instrument-list',
@@ -44,8 +45,6 @@ export default defineComponent({
       teachingStatus: false,
       show: false,
       item: {} as any
-
-      // selectIds: [] as any
     });
 
     const getList = async () => {
@@ -110,7 +109,7 @@ export default defineComponent({
         <NScrollbar
           class={styles.listContainer}
           style={{
-            'max-height': `55vh`
+            'max-height': `50vh`
           }}
           onScroll={(e: any) => {
             const clientHeight = e.target?.clientHeight;
@@ -139,10 +138,15 @@ export default defineComponent({
                     //     name: item.name
                     //   }
                     // });
+
+                    state.item = {
+                      content: item.id,
+                      title: item.name,
+                      type: 'INSTRUMENT'
+                    };
+                    state.show = true;
                   }}>
-                  <div
-                    class={styles.itemWrapBox}
-                    onClick={() => onSelect(item)}>
+                  <div class={styles.itemWrapBox}>
                     <div class={styles.itemCard}>
                       <div
                         class={[
@@ -158,7 +162,12 @@ export default defineComponent({
                           previewDisabled
                         />
 
-                        <i class={[styles.iconCheck]}></i>
+                        <i
+                          class={[styles.iconCheck]}
+                          onClick={(e: any) => {
+                            e.stopPropagation();
+                            onSelect(item);
+                          }}></i>
                       </div>
                       <div class={styles.itemTitle}>{item.name}</div>
                     </div>
@@ -175,6 +184,13 @@ export default defineComponent({
             </div>
           </NSpin>
         </NScrollbar>
+
+        {/* 弹窗查看 */}
+        <CardPreview
+          size={'large'}
+          v-model:show={state.show}
+          item={state.item}
+        />
       </div>
     );
   }

src/views/prepare-lessons/model/source-instrument/detail.module.less

@@ -13,6 +13,13 @@
     }
   }
 
+  &.containerModal {
+    .content {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+
 
   &> :global(.n-space) {
     height: 36px;
@@ -27,13 +34,13 @@
 }
 
 .wrap {
-  padding-top: 15px;
+  // padding-top: 15px;
   flex: 1;
   transition: padding .3s;
   overflow: hidden;
 
   &.wrapBottom {
-    padding-bottom: 108px;
+    padding-bottom: 128px;
 
   }
 
@@ -163,7 +170,7 @@
       width: 23px;
       height: 23px;
       margin-right: 8px;
-      background: url('../images/icon-2.png') no-repeat center;
+      background: url('../../../content-information/images/icon-2.png') no-repeat center;
       background-size: contain;
     }
   }
@@ -345,12 +352,12 @@
       width: 23px;
       height: 23px;
       margin-right: 8px;
-      background: url('../images/icon-1.png') no-repeat center;
+      background: url('../../../content-information/images/icon-1.png') no-repeat center;
       background-size: contain;
     }
 
     .icon3 {
-      background: url('../images/icon-3.png') no-repeat center;
+      background: url('../../../content-information/images/icon-3.png') no-repeat center;
       background-size: contain;
     }
   }

src/views/prepare-lessons/model/source-instrument/detail.tsx

@@ -158,7 +158,8 @@ export default defineComponent({
       <div
         class={[
           styles.container,
-          props.type === 'preview' && styles.containerPreview
+          props.type === 'preview' && styles.containerPreview,
+          props.type === 'modal' && styles.containerModal
         ]}>
         <div class={[styles.wrap, data.showPlayer ? styles.wrapBottom : '']}>
           <div class={styles.content}>

src/views/prepare-lessons/model/source-instrument/index.tsx

@@ -69,29 +69,31 @@ export default defineComponent({
             {!state.loading && state.categoryList.length <= 0 && (
               <TheEmpty description="暂无乐器百科" />
             )}
-            <NTabs
-              defaultValue="myResources"
-              paneClass={styles.paneTitle}
-              justifyContent="center"
-              // animated
-              paneWrapperClass={styles.paneWrapperContainer}
-              onUpdate:value={(val: any) => {
-                sessionStorage.setItem('content-instrument-tab', val);
-              }}
-              v-model:value={state.tabValue}>
-              {state.categoryList.map((category: any) => (
-                <NTabPane name={`name-${category.id}`} tab={category.name}>
-                  <List
-                    selectItems={state.selectItems}
-                    categoryId={category.id}
-                    categoryChildList={category.childrenList}
-                    onConfirm={(ids: any) => {
-                      state.selectItems = ids || [];
-                    }}
-                  />
-                </NTabPane>
-              ))}
-            </NTabs>
+            <div style={{ minHeight: '55vh' }}>
+              <NTabs
+                defaultValue="myResources"
+                paneClass={styles.paneTitle}
+                justifyContent="center"
+                // animated
+                paneWrapperClass={styles.paneWrapperContainer}
+                onUpdate:value={(val: any) => {
+                  sessionStorage.setItem('content-instrument-tab', val);
+                }}
+                v-model:value={state.tabValue}>
+                {state.categoryList.map((category: any) => (
+                  <NTabPane name={`name-${category.id}`} tab={category.name}>
+                    <List
+                      selectItems={state.selectItems}
+                      categoryId={category.id}
+                      categoryChildList={category.childrenList}
+                      onConfirm={(ids: any) => {
+                        state.selectItems = ids || [];
+                      }}
+                    />
+                  </NTabPane>
+                ))}
+              </NTabs>
+            </div>
           </div>
         </div>
 

src/views/prepare-lessons/model/source-knowledge/detail.tsx

@@ -0,0 +1,132 @@
+import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  // NBreadcrumb,
+  // NBreadcrumbItem,
+  // NScrollbar,
+  NSlider,
+  NSpace,
+  NSpin
+} from 'naive-ui';
+import iconT from '/src/views/content-information/images/icon-t.png';
+import iconAddT from '/src/views/content-information/images/icon-add-t.png';
+import iconPlusT from '/src/views/content-information/images/icon-plus-t.png';
+import {
+  api_lessonCoursewareDetail_listKnowledge,
+  api_lessonCoursewareKnowledgeDetail
+} from '/src/views/content-information/api';
+import TheEmpty from '/src/components/TheEmpty';
+import { PageEnum } from '/src/enums/pageEnum';
+
+export default defineComponent({
+  name: 'cotnent-knowledge',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    activeStatus: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    const content = ref(false);
+    const musicContentRef = ref();
+    const state = reactive({
+      fontSize: 18,
+      tableList: [] as any,
+      selectKey: null,
+      details: {} as any
+    });
+
+    const getDetail = async () => {
+      content.value = true;
+      try {
+        const { data } = await api_lessonCoursewareKnowledgeDetail({
+          id: props.id
+        });
+
+        state.details = data;
+      } catch {
+        //
+      }
+      content.value = false;
+    };
+
+    onMounted(() => {
+      getDetail();
+    });
+
+    watch(
+      () => props.activeStatus,
+      () => {
+        // if (!props.activeStatus) {
+        //   handleChangeAudio('pause');
+        // }
+      }
+    );
+    return () => (
+      <div
+        class={[
+          styles.containerDetail,
+          props.type === 'preview' && styles.detailPreview
+        ]}>
+        {/* <div class={styles.detail2}> */}
+        <div class={styles.contentWrap}>
+          <div class={styles.musicStaff}>
+            <NSpin
+              show={content.value}
+              ref={musicContentRef}
+              class={
+                !content.value && !state.details?.desc ? styles.empty : ''
+              }>
+              {state.details?.desc ? (
+                <div
+                  class={styles.musicContent}
+                  v-html={state.details?.desc}
+                  style={{ fontSize: state.fontSize + 'px' }}></div>
+              ) : (
+                ''
+              )}
+              {!content.value && !state.details?.desc && <TheEmpty />}
+            </NSpin>
+          </div>
+
+          <div class={styles.changeSizeSection}>
+            <img src={iconT} class={styles.iconT} />
+            <img
+              src={iconAddT}
+              class={styles.iconAddT}
+              onClick={() => {
+                if (state.fontSize >= 32) return;
+                state.fontSize += 1;
+              }}
+            />
+            <NSlider
+              v-model:value={state.fontSize}
+              vertical
+              min={12}
+              max={32}
+            />
+            <img
+              src={iconPlusT}
+              class={styles.iconPlusT}
+              onClick={() => {
+                if (state.fontSize <= 12) return;
+                state.fontSize -= 1;
+              }}
+            />
+          </div>
+        </div>
+        {/* </div> */}
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/source-knowledge/index.module.less

@@ -1,52 +1,50 @@
 .container {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: 650px;
+  background: #F1F5FF;
+  border-radius: 0 0 12Px 12Px;
+  padding-left: 27px;
 
   .iconBack {
     width: 36px;
     height: 36px;
   }
 
-  :global {
-    .n-breadcrumb>ul {
-      display: flex;
-      align-items: center;
-
-      .n-breadcrumb-item {
-        display: flex;
-        align-items: center;
-      }
 
-      .n-breadcrumb-item__separator {
-        display: none;
-      }
+  .separator {
+    width: 9px;
+    height: 15px;
+    margin: 0 16px;
+  }
+}
 
-      .n-breadcrumb-item__link {
-        padding: 5px 18px;
-        background: #FFFFFF;
-        border-radius: 16px;
-        color: #21225D;
-        line-height: 20px;
-      }
-    }
+.containerDetail {
+  display: flex;
+  flex-direction: column;
+  height: 650px;
+  // background: #F1F5FF;
+  border-radius: 0 0 12Px 12Px;
+  padding-left: 27px;
 
-    .n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link {
-      color: #fff;
-      background: var(--product-color);
-    }
+  &.detailPreview {
+    height: 100%;
+    background-color: #fff;
+    // max-width: 1024px;
+    margin: 0 auto;
+    border-radius: 0;
+    padding-left: 0;
 
-  }
 
-  &> :global(.n-space) {
-    height: 36px;
-    flex-shrink: 0;
-  }
+    .contentWrap {
+      width: 80%;
+      margin: 0 auto;
+      position: initial;
+    }
 
-  .separator {
-    width: 9px;
-    height: 15px;
-    margin: 0 16px;
+    .changeSizeSection {
+      right: 85px;
+    }
   }
 }
 
@@ -151,7 +149,7 @@
         display: inline-block;
         width: 16px;
         height: 18px;
-        background: url('../../prepare-lessons/components/directory-main/images/icon-d.png') no-repeat center;
+        background: url('../../../prepare-lessons/components/directory-main/images/icon-d.png') no-repeat center;
         background-size: contain;
         margin-right: 6px;
       }
@@ -161,7 +159,7 @@
         font-weight: bold;
 
         .dir {
-          background: url('../../prepare-lessons/components/directory-main/images/icon-d-active.png') no-repeat center;
+          background: url('../../../prepare-lessons/components/directory-main/images/icon-d-active.png') no-repeat center;
           background-size: contain;
         }
       }
@@ -171,11 +169,11 @@
       display: inline-block;
       width: 14px;
       height: 15px;
-      background: url('../../prepare-lessons/components/directory-main/images/arrow-default.png') no-repeat center;
+      background: url('../../../prepare-lessons/components/directory-main/images/arrow-default.png') no-repeat center;
       background-size: contain;
 
       &.arrowSelect {
-        background: url('../../prepare-lessons/components/directory-main/images/arrow-active.png') no-repeat center;
+        background: url('../../../prepare-lessons/components/directory-main/images/arrow-active.png') no-repeat center;
         background-size: contain;
       }
     }
@@ -310,4 +308,15 @@
     }
 
   }
+}
+
+.btnGroup {
+  padding: 20px 0;
+
+  :global {
+    .n-button {
+      height: 47px;
+      min-width: 156px;
+    }
+  }
 }

src/views/prepare-lessons/model/source-knowledge/index.tsx

@@ -1,30 +1,28 @@
 import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import {
-  NBreadcrumb,
-  NBreadcrumbItem,
+  NButton,
+  // NBreadcrumb,
+  // NBreadcrumbItem,
   // NScrollbar,
   NSlider,
   NSpace,
   NSpin
 } from 'naive-ui';
-import icon_back from '../../xiaoku-music/images/icon_back.png';
-// import icon_default from '../../xiaoku-music/images/icon_default.png';
-// import icon_separator from '../../xiaoku-music/images/icon_separator.png';
-import iconT from '../images/icon-t.png';
-import iconAddT from '../images/icon-add-t.png';
-import iconPlusT from '../images/icon-plus-t.png';
+import iconT from '/src/views/content-information/images/icon-t.png';
+import iconAddT from '/src/views/content-information/images/icon-add-t.png';
+import iconPlusT from '/src/views/content-information/images/icon-plus-t.png';
 import {
   api_lessonCoursewareDetail_listKnowledge,
   api_lessonCoursewareKnowledgeDetail
-} from '../api';
+} from '/src/views/content-information/api';
 import TheEmpty from '/src/components/TheEmpty';
-import { useRouter } from 'vue-router';
+import { PageEnum } from '/src/enums/pageEnum';
 
 export default defineComponent({
   name: 'cotnent-knowledge',
-  setup() {
-    const router = useRouter();
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
     const show = ref(false);
     const content = ref(false);
     const musicContentRef = ref();
@@ -75,30 +73,20 @@ export default defineComponent({
       content.value = false;
     };
 
+    const onSubmit = () => {
+      emit('confirm', {
+        coverImg: PageEnum.THEORY_DEFAULT_COVER,
+        title: state.details.name,
+        materialId: state.selectKey,
+        content: state.selectKey
+      });
+    };
+
     onMounted(() => {
       getDetails();
     });
     return () => (
       <div class={styles.container}>
-        <NSpace align="center" wrapItem={false} size={16}>
-          <img
-            style={{ cursor: 'pointer' }}
-            src={icon_back}
-            class={styles.iconBack}
-            onClick={() => {
-              //
-              router.push('/');
-            }}
-          />
-          <NBreadcrumb separator="">
-            <NBreadcrumbItem
-              onClick={() => {
-                //
-              }}>
-              乐理知识
-            </NBreadcrumbItem>
-          </NBreadcrumb>
-        </NSpace>
         <div class={[styles.wrap]}>
           <div class={styles.content}>
             <div class={styles.contentWrap}>
@@ -230,6 +218,15 @@ export default defineComponent({
             </div>
           </div>
         </div>
+
+        <NSpace class={styles.btnGroup} justify="center">
+          <NButton round onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton round type="primary" onClick={onSubmit}>
+            确认添加
+          </NButton>
+        </NSpace>
       </div>
     );
   }

src/views/xiaoku-music/component/play-item/index.module.less

@@ -16,6 +16,12 @@
     left: 0;
     padding-right: 380px;
   }
+
+  &.containerModal {
+    position: absolute;
+    left: 0;
+
+  }
 }
 
 .hidden {

src/views/xiaoku-music/component/play-item/index.tsx

@@ -92,6 +92,7 @@ export default defineComponent({
         class={[
           styles.container,
           props.type === 'preview' && styles.previewcontainer,
+          props.type === 'modal' && styles.containerModal,
           props.show ? styles.show : styles.hidden
         ]}>
         <div class={[styles.item]}>
@@ -195,7 +196,7 @@ export default defineComponent({
               }}
               onTimeupdate={() => {
                 if (timer) return;
-                audioData.currentTime = audioRef.value.currentTime;
+                audioData.currentTime = audioRef.value?.currentTime;
               }}></audio>
           </div>
         </div>