添加作业

public/version.json

@@ -1 +1 @@
-{"version":1710759394958}
+{"version":1710833530438}

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

@@ -1,5 +1,24 @@
 .coursewarePresetsContainer {
-  padding-bottom: 20px;
+  // padding-bottom: 20px;
+  height: 100%;
+  display: flex;
+  // position: relative;
+  // overflow: hidden;
+
+  &.rightLineShow {
+    .presetsRight {
+      transition: all .1s ease;
+      opacity: 1;
+      position: relative;
+      transform: none;
+    }
+
+    .list {
+      .itemWrap {
+        width: calc(100% / 3);
+      }
+    }
+  }
 
   :global {
     .n-base-selection {
@@ -12,6 +31,64 @@
     .n-base-selection-input__content {
       font-size: max(15px, 13Px);
     }
+
+    .n-tabs-tab-pad {
+      width: 33px !important;
+    }
+
+    .n-tabs-nav {
+      padding-top: 20px;
+      padding-bottom: 20px;
+    }
+  }
+
+  .presetsLeft {
+    flex: 1;
+    transition: all .1s ease;
+  }
+
+  .presetsRight {
+    position: relative;
+    background: #FFFFFF;
+    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 0px 17px 17px 0px;
+    flex: 0 0 320px;
+
+    transition: all .1s ease;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    transform: translateX(100%);
+
+
+    .presetsArrar {
+      position: absolute;
+      left: -23px;
+      top: 50%;
+      margin-top: -25px;
+      display: inline-block;
+      width: 23px;
+      height: 50px;
+      background: url('../../../images/default-arrow.png') no-repeat center;
+      background-size: contain;
+      cursor: pointer;
+
+      &:hover {
+        background: url('../../../images/active-arrow.png') no-repeat center;
+        background-size: contain;
+        transform: rotate(180deg);
+      }
+
+      &.presetsArrarActive {
+        transform: rotate(180deg);
+
+        &:hover {
+          background-size: contain;
+          transform: rotate(0deg);
+        }
+      }
+    }
   }
 }
 
@@ -40,16 +117,28 @@
 
 .addBtn {
   // height: max(36px, 32Px) !important;
-  background: #198cfe !important;
+  background: linear-gradient(312deg, #1B7AF8 0%, #3CBBFF 100%) !important;
   border-radius: 7Px !important;
-  padding: 0 20Px !important;
-
-
+  padding: 0 16Px !important;
   border-radius: 8px;
   height: 38px;
-  font-size: max(18px, 13Px) !important;
+  font-size: max(15px, 12Px) !important;
   font-weight: 600 !important;
-
+  position: relative;
+  z-index: 9;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 10%;
+    bottom: -1px;
+    display: inline-block;
+    width: 80%;
+    height: 8px;
+    background: linear-gradient(136deg, #31ABFF 0%, #1A7BF8 100%);
+    opacity: 0.6;
+    filter: blur(7px);
+  }
 }
 
 
@@ -146,9 +235,9 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  padding: 12px 0 12px;
+  padding: 0 0 12px;
   gap: 20px 0;
-  margin: 10px -10px 0;
+  margin: 0 -10px 0;
   min-height: 313px;
   // height: 313px;
 

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

@@ -2,6 +2,7 @@ import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
 import styles from './index.module.less';
 import {
   NButton,
+  NTooltip,
   NCarousel,
   NIcon,
   NImage,
@@ -11,6 +12,8 @@ import {
   NSelect,
   NSpace,
   NSpin,
+  NTabPane,
+  NTabs,
   useMessage
 } from 'naive-ui';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
@@ -34,6 +37,7 @@ import { useRoute, useRouter } from 'vue-router';
 import TheMessageDialog from '/src/components/TheMessageDialog';
 import { eventGlobal, fscreen } from '/src/utils';
 import PreviewWindow from '/src/views/preview-window';
+import Related from './related';
 
 export default defineComponent({
   name: 'courseware-presets',
@@ -49,6 +53,8 @@ export default defineComponent({
 
     const forms = reactive({
       // 选取参数带的，后取缓存
+      leftWidth: '100%',
+      rightWidth: '0',
       messageLoading: false,
       subjectId: route.query.subjectId
         ? Number(route.query.subjectId)
@@ -63,6 +69,7 @@ export default defineComponent({
       openLoading: false,
       showRelatedClass: false,
       tableList: [] as any,
+      openTableShow: true, // 是否显示
       openTableList: [] as any,
       selectItem: {} as any,
       editTitleVisiable: false,
@@ -149,20 +156,20 @@ export default defineComponent({
           });
         });
 
-        forms.openTableList = chunkArray(tempList, 4);
+        forms.openTableList = tempList || [];
       } catch {
         //
       }
       forms.openLoading = false;
     };
 
-    const chunkArray = (array: any, size: number) => {
-      const result = [];
-      for (let i = 0; i < array.length; i += size) {
-        result.push(array.slice(i, i + size));
-      }
-      return result;
-    };
+    // const chunkArray = (array: any, size: number) => {
+    //   const result = [];
+    //   for (let i = 0; i < array.length; i += size) {
+    //     result.push(array.slice(i, i + size));
+    //   }
+    //   return result;
+    // };
 
     // 监听选择的key 左侧选择了其它的课
     watch(
@@ -248,6 +255,23 @@ export default defineComponent({
     };
 
     onMounted(async () => {
+      useResizeObserver(
+        document.querySelector('#presetsLeftRef') as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { width } = entry.contentRect;
+          forms.leftWidth = width + 'px';
+        }
+      );
+      useResizeObserver(
+        document.querySelector('#presetsRightRef') as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { width } = entry.contentRect;
+          forms.rightWidth = width + 'px';
+        }
+      );
+
       prepareStore.setClassGroupId(route.query.classGroupId as any);
       if (!prepareStore.getSubjectId) {
         // 获取教材分类列表
@@ -407,16 +431,73 @@ export default defineComponent({
       }
     };
     return () => (
-      <div class={styles.coursewarePresetsContainer}>
-        <NScrollbar class={styles.coursewarePresets}>
-          <div class={styles.title} id="coursewarePresets">
+      <div
+        class={[
+          styles.coursewarePresetsContainer,
+          forms.openTableShow && styles.rightLineShow
+        ]}>
+        <div
+          class={styles.presetsLeft}
+          id="presetsLeftRef"
+          style={{ width: `calc(${forms.leftWidth} - ${forms.rightWidth})` }}>
+          <NTabs
+            // ref={lessonMainRef}
+            defaultValue="subject"
+            paneClass={styles.paneTitle}
+            justifyContent="start"
+            paneWrapperClass={styles.paneWrapperContainer}
+            value={prepareStore.getSubjectId?.toString()}
+            onUpdate:value={val => {
+              prepareStore.setSubjectId(val);
+              // 保存
+              forms.subjectId = val;
+
+              if (!val) {
+                sessionStorage.setItem(
+                  'prepareLessonCourseWareSubjectIsNull',
+                  val ? 'false' : 'true'
+                );
+              }
+            }}
+            v-slots={{
+              suffix: () => (
+                <NButton
+                  class={styles.addBtn}
+                  type="primary"
+                  bordered={false}
+                  onClick={() => {
+                    eventGlobal.emit('teacher-slideshow', true);
+                    emit('change', {
+                      status: true,
+                      type: 'create'
+                    });
+                  }}>
+                  <NImage
+                    class={styles.addBtnIcon}
+                    previewDisabled
+                    src={add}></NImage>
+                  创建课件
+                </NButton>
+              )
+            }}>
+            {[{ name: '全部声部', id: '' }, ...prepareStore.getSubjectList].map(
+              (item: any) => (
+                <NTabPane
+                  name={`${item.id}`}
+                  tab={item.name}
+                  displayDirective="if"></NTabPane>
+              )
+            )}
+          </NTabs>
+          <NScrollbar class={styles.coursewarePresets}>
+            {/* <div class={styles.title} id="coursewarePresets">
             <div class={styles.titleLeft}>
               <i class={[styles.icon, styles.iconWork]}></i>
               我的课件
             </div>
-          </div>
+          </div> */}
 
-          <NSpace>
+            {/* <NSpace>
             <NSelect
               placeholder="选择声部"
               class={styles.btnSubjectList}
@@ -435,72 +516,56 @@ export default defineComponent({
                 if (!val) {
                   sessionStorage.setItem(
                     'prepareLessonCourseWareSubjectIsNull',
-                    val ? false : true
+                    val ? 'false' : 'true'
                   );
                 }
               }}
             />
-            <NButton
-              class={styles.addBtn}
-              type="primary"
-              onClick={() => {
-                eventGlobal.emit('teacher-slideshow', true);
-                emit('change', {
-                  status: true,
-                  type: 'create'
-                });
-              }}>
-              <NImage
-                class={styles.addBtnIcon}
-                previewDisabled
-                src={add}></NImage>
-              创建课件
-            </NButton>
-          </NSpace>
-          <div style={{ overflow: 'hidden' }}>
-            <NSpin show={forms.loading}>
-              <div class={styles.list}>
-                {forms.tableList.map((item: any) => (
-                  <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
-                    <div class={styles.itemWrapBox}>
-                      <CoursewareType
-                        operate
-                        isEditName
-                        item={item}
-                        onClick={() => onPreviewAttend(item.id)}
-                        onEditName={() => {
-                          forms.selectItem = item;
-                          forms.editTitle = item.name;
-                          forms.editTitleVisiable = true;
-                        }}
-                        onEdit={() => {
-                          //
-                          eventGlobal.emit('teacher-slideshow', true);
-                          emit('change', {
-                            status: true,
-                            type: 'update',
-                            groupItem: { id: item.id }
-                          });
-                        }}
-                        onStartClass={() =>
-                          onStartClass(item, forms.classGroupId)
-                        }
-                        onDelete={() => {
-                          forms.selectItem = item;
-                          forms.preRemoveVisiable = true;
-                        }}
-                      />
+          </NSpace> */}
+            <div style={{ overflow: 'hidden' }}>
+              <NSpin show={forms.loading}>
+                <div class={styles.list}>
+                  {forms.tableList.map((item: any) => (
+                    <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
+                      <div class={styles.itemWrapBox}>
+                        <CoursewareType
+                          operate
+                          isEditName
+                          item={item}
+                          onClick={() => onPreviewAttend(item.id)}
+                          onEditName={() => {
+                            forms.selectItem = item;
+                            forms.editTitle = item.name;
+                            forms.editTitleVisiable = true;
+                          }}
+                          onEdit={() => {
+                            //
+                            eventGlobal.emit('teacher-slideshow', true);
+                            emit('change', {
+                              status: true,
+                              type: 'update',
+                              groupItem: { id: item.id }
+                            });
+                          }}
+                          onStartClass={() =>
+                            onStartClass(item, forms.classGroupId)
+                          }
+                          onDelete={() => {
+                            forms.selectItem = item;
+                            forms.preRemoveVisiable = true;
+                          }}
+                        />
+                      </div>
                     </div>
-                  </div>
-                ))}
-                {!forms.loading && forms.tableList.length <= 0 && (
-                  <TheEmpty class={styles.empty1} description="暂无课件" />
-                )}
-              </div>
-            </NSpin>
-          </div>
+                  ))}
+                  {!forms.loading && forms.tableList.length <= 0 && (
+                    <TheEmpty class={styles.empty1} description="暂无课件" />
+                  )}
+                </div>
+              </NSpin>
+            </div>
 
-          {forms.openTableList.length > 0 && (
+            {/* {forms.openTableList.length > 0 && (
             <>
               <div class={[styles.title, styles.line]}>
                 <div class={styles.titleLeft}>
@@ -511,15 +576,6 @@ export default defineComponent({
                       class={styles.more}
                       onClick={() => (forms.showRelatedClass = true)}>
                       查看更多
-                      {/* <NIcon size={15}>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24">
-                          <path
-                            d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.41z"
-                            fill="currentColor"></path>
-                        </svg>
-                      </NIcon> */}
                       <i class={styles.iconP}></i>
                     </span>
                   )}
@@ -584,8 +640,31 @@ export default defineComponent({
                 </NCarousel>
               </NSpin>
             </>
-          )}
-        </NScrollbar>
+          )} */}
+          </NScrollbar>
+        </div>
+
+        {/* {forms.openTableList.length > 0 && ( */}
+        <div class={styles.presetsRight} id="presetsRightRef">
+          <NTooltip showArrow={false}>
+            {{
+              trigger: () => (
+                <i
+                  class={[
+                    styles.presetsArrar,
+                    !forms.openTableShow && styles.presetsArrarActive
+                  ]}
+                  onClick={() =>
+                    (forms.openTableShow = !forms.openTableShow)
+                  }></i>
+              ),
+              default: () => <div>{forms.openTableShow ? '收起' : '展开'}</div>
+            }}
+          </NTooltip>
+
+          <Related />
+        </div>
+        {/* )} */}
 
         <NModal
           v-model:show={forms.showRelatedClass}

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

@@ -0,0 +1,80 @@
+.related {
+  height: 100%;
+
+  :global {
+    .n-tabs-tab-pad {
+      width: 24px !important;
+    }
+
+    .n-tabs-nav {
+      padding: 12px 20px 24px;
+      position: relative;
+    }
+
+    .n-tabs-tab {
+      color: #8B8D98;
+      font-size: max(18px, 13Px);
+      padding-top: 12px;
+      padding-bottom: 6px;
+      line-height: 22px;
+
+      &.n-tabs-tab--active {
+        font-weight: 600 !important;
+        color: #131415 !important;
+      }
+    }
+
+    .n-tabs-tab__label {
+      z-index: 10;
+    }
+
+    .n-tabs-bar {
+      height: 10px;
+      background: linear-gradient(90deg, #77BBFF 0%, rgba(163, 231, 255, 0.22) 100%);
+      z-index: 0;
+      bottom: 6px;
+    }
+
+    .n-tab-pane {
+      padding-top: 0 !important;
+    }
+
+    .n-tabs-nav__suffix {
+      padding-left: 0 !important;
+    }
+
+    .n-tabs.n-tabs--top .n-tabs-nav-scroll-wrapper::after {
+      box-shadow: none !important;
+    }
+  }
+
+  .iconScreen {
+    margin-top: 6px;
+    position: absolute;
+    right: 20px;
+    font-size: 18px;
+    color: var(--n-color);
+    font-weight: bold;
+    width: 22px;
+    height: 22px;
+    cursor: pointer;
+  }
+
+  .homerowkTabs {
+    :global {
+      .n-tabs-tab-pad {
+        width: 15px !important;
+      }
+
+      .n-tabs-tab {
+        color: #8B8D98;
+        font-size: max(18px, 13Px);
+      }
+
+      .v-x-scroll {
+        padding-right: 40px;
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,50 @@
+import { defineComponent } from 'vue';
+import styles from './related.module.less';
+import { NTabPane, NTabs } from 'naive-ui';
+import SelectRelated from './select-related';
+
+export default defineComponent({
+  name: 'related-modal',
+  setup() {
+    return () => (
+      <div class={styles.related}>
+        <NTabs
+          animated
+          // value={forms.tabWorkType}
+          paneClass={styles.paneTitle}
+          paneWrapperClass={styles.paneWrapperContainer}
+          justifyContent="center"
+          onUpdate:value={(val: string) => {
+            // forms.tabWorkType = val;
+          }}>
+          {{
+            suffix: () => (
+              <div
+                class={styles.iconScreen}
+                onClick={() => {
+                  // forms.selectMusicStatus = true;
+                  // prepareStore.setSelectMusicStatus(true);
+                }}>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <g fill="none">
+                    <path
+                      d="M5 6a1 1 0 0 1 1-1h2a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v2a1 1 0 0 0 2 0V6zm0 12a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3v-2a1 1 0 1 1 2 0v2zM18 5a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3h-2a1 1 0 1 0 0 2h2zm1 13a1 1 0 0 1-1 1h-2a1 1 0 1 0 0 2h2a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2z"
+                      fill="#198CFE"></path>
+                  </g>
+                </svg>
+              </div>
+            ),
+            default: () => (
+              <>
+                <NTabPane name="myMusic" tab="相关课件">
+                  {/* <SelectMusic cardType={props.cardType} type="myMusic" /> */}
+                  <SelectRelated />
+                </NTabPane>
+              </>
+            )
+          }}
+        </NTabs>
+      </div>
+    );
+  }
+});

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

@@ -0,0 +1,56 @@
+.listContainer {
+  margin: 10px 0;
+  max-height: calc(var(--window-page-lesson-height) - 204px);
+  // overflow-x: auto;
+
+  &.listNoMusic {
+    max-height: calc(var(--window-page-lesson-height) - 150px);
+
+    .listSection {
+      min-height: calc(var(--window-page-lesson-height) - 150px);
+    }
+  }
+
+  .listSection {
+    min-height: calc(var(--window-page-lesson-height) - 204px);
+  }
+
+
+
+  .emptySection {
+    display: flex;
+    align-items: center;
+  }
+
+  .list {
+    padding: 10px 0;
+    text-align: center;
+
+    &>div {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.trainEditModal {
+  width: 494px;
+}
+
+.itemModal {
+  display: flex;
+  align-content: center;
+
+  .itemCover {
+    width: 111px;
+    height: 63px;
+    margin-right: 10px;
+  }
+
+  .itemContent {
+    max-width: 128px;
+  }
+}

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

@@ -0,0 +1,210 @@
+import { PropType, defineComponent, onMounted, reactive, watch } from 'vue';
+import ResourceSearchGroup from './resource-search-group';
+import { NModal, NScrollbar, NSpin } from 'naive-ui';
+import styles from './index.module.less';
+import CardType from '/src/components/card-type';
+import TheEmpty from '/src/components/TheEmpty';
+import { useThrottleFn } from '@vueuse/core';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import {
+  api_queryOpenCoursewareByPage,
+  musicSheetPage
+} from '/src/views/prepare-lessons/api';
+import TrainUpdate from '/src/views/attend-class/model/train-update';
+import requestOrigin from 'umi-request';
+import CardPreview from '/src/components/card-preview';
+import { evaluateDifficult } from '/src/utils/contants';
+import { eventGlobal } from '/src/utils';
+import { favorite, materialQueryPage } from '/src/views/natural-resources/api';
+import Item from './item';
+
+const formatType = (type: string) => {
+  if (type === 'sahreMusic') {
+    return 2;
+  } else if (type === 'myMusic') {
+    return 3;
+  } else if (type === 'collectMusic') {
+    return 4;
+  }
+};
+
+export const typeFormat = (trainingType: string, configJson: any) => {
+  let tList: string[] = [];
+
+  if (trainingType === 'EVALUATION') {
+    tList = [
+      `${evaluateDifficult[configJson.evaluateDifficult]}`,
+      configJson.practiceChapterBegin || configJson.practiceChapterEnd
+        ? `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`
+        : '全部小节',
+      // `速度${configJson.evaluateSpeed}`,
+      `${configJson.trainingTimes}分合格`
+    ];
+  } else {
+    tList = [
+      `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
+      `速度${configJson.practiceSpeed}`,
+      `${configJson.trainingTimes}分钟`
+    ];
+  }
+  return tList;
+};
+
+export default defineComponent({
+  name: 'share-resources',
+  setup(props) {
+    const prepareStore = usePrepareStore();
+    const state = reactive({
+      loading: false,
+      finshed: false, // 是否加载完
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        name: ''
+      },
+      tableList: [] as any,
+      editStatus: false,
+      editItem: {} as any,
+      show: false,
+      item: {} as any
+    });
+    const getList = async () => {
+      // try {
+      //   if (state.pagination.page === 1) {
+      //     state.loading = true;
+      //   }
+      //   const { data } = await materialQueryPage({
+      //     ...state.searchGroup,
+      //     ...state.pagination
+      //     // subjectId: prepareStore.getSubjectId
+      //   });
+      //   state.loading = false;
+      //   const tempRows = data.rows || [];
+      //   const temp: any = [];
+
+      //   tempRows.forEach((row: any) => {
+      //     const index = prepareStore.getTrainList.findIndex(
+      //       (course: any) => course.musicId === row.id
+      //     );
+      //     temp.push({
+      //       id: row.id,
+      //       coverImg: row.coverImg || row.musicSvg,
+      //       type: 'MUSIC',
+      //       title: row.name,
+      //       isCollect: !!row.favoriteFlag,
+      //       isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+      //       content: row.id,
+      //       xmlFileUrl: row.xmlFileUrl,
+      //       exist: index !== -1 ? true : false // 是否存在
+      //     });
+      //   });
+      //   state.tableList.push(...temp);
+      //   state.finshed = data.pages <= data.current ? true : false;
+      // } catch {
+      //   state.loading = false;
+      // }
+      try {
+        if (state.pagination.page === 1) {
+          state.loading = true;
+        }
+        // 查询公开课件列表
+        const { data } = await api_queryOpenCoursewareByPage({
+          subjectId: prepareStore.getSubjectId,
+          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        const result = data.rows || [];
+        const tempList: any = [];
+        result.forEach((item: any) => {
+          // const index = forms.tableList.findIndex(
+          //   (i: any) => i.fromChapterLessonCoursewareId === item.id
+          // );
+          const firstItem: any =
+            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
+          tempList.push({
+            id: item.id,
+            openFlag: item.openFlag,
+            openFlagEnable: item.openFlagEnable,
+            subjectNames: item.subjectNames,
+            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
+            name: item.name,
+            coverImg: firstItem?.bizInfo.coverImg,
+            type: firstItem?.bizInfo.type,
+            isAdd: item.addFlag
+          });
+        });
+
+        state.loading = false;
+        state.tableList.push(...tempList);
+
+        state.finshed = data.pages <= data.current ? true : false;
+      } catch {
+        state.loading = false;
+      }
+    };
+
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      state.tableList = [];
+      state.searchGroup = Object.assign(state.searchGroup, item);
+      getList();
+    };
+
+    // 声部变化时
+    watch(
+      () => prepareStore.getSubjectId,
+      () => {
+        onSearch(state.searchGroup);
+      }
+    );
+
+    const throttledFn = useThrottleFn(() => {
+      state.pagination.page = state.pagination.page + 1;
+      getList();
+    }, 500);
+
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <div>
+        <ResourceSearchGroup onSearch={(item: any) => onSearch(item)} />
+        <NScrollbar
+          class={[styles.listContainer, styles.listNoMusic]}
+          onScroll={(e: any) => {
+            const clientHeight = e.target?.clientHeight;
+            const scrollTop = e.target?.scrollTop;
+            const scrollHeight = e.target?.scrollHeight;
+            // 是否到底，是否加载完
+            if (
+              clientHeight + scrollTop + 20 >= scrollHeight &&
+              !state.finshed &&
+              !state.loading
+            ) {
+              throttledFn();
+            }
+          }}>
+          <NSpin show={state.loading} size={'small'}>
+            <div
+              class={[
+                styles.listSection,
+                !state.loading && state.tableList.length <= 0
+                  ? styles.emptySection
+                  : ''
+              ]}>
+              {state.tableList.length > 0 && (
+                <div class={styles.list}>
+                  <Item />
+                </div>
+              )}
+              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
+            </div>
+          </NSpin>
+        </NScrollbar>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/components/lesson-main/courseware-presets/select-related/item.tsx

@@ -0,0 +1,25 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import { NImage } from 'naive-ui';
+import TheNoticeBar from '/src/components/TheNoticeBar';
+
+export default defineComponent({
+  name: 'item-modal',
+  setup() {
+    return () => (
+      <div class={styles.itemModal}>
+        <div class={styles.itemCover}>
+          <NImage />
+        </div>
+
+        <div class={styles.itemContent}>
+          <p class={styles.itemTitle}>
+            <TheNoticeBar text="三年级二班的哈哈其多三年级二班的哈哈其多" />
+          </p>
+
+          <div class={styles.itemSubject}>竖笛、葫芦丝、排箫</div>
+        </div>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/components/lesson-main/courseware-presets/select-related/resource-search-group/index.module.less

@@ -0,0 +1,56 @@
+.searchGroup {
+  padding: 0 20px;
+
+  .searchSelect {
+    padding: 0 0 20px;
+    display: flex;
+    justify-content: flex-start;
+    gap: 0px 16px;
+  }
+
+  :global {
+
+    .n-base-selection,
+    .n-input {
+      border-radius: 8px;
+      min-height: 40px;
+      height: 40px;
+      font-size: max(15px, 12Px);
+      --n-height: 40px !important;
+    }
+  }
+}
+
+.inputSearch {
+  :global {
+    .n-input-wrapper {
+      padding-left: 12px;
+      padding-right: 4px;
+    }
+  }
+
+  .searchBtn {
+    height: 34px;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 500;
+  }
+}
+
+.btnType {
+  gap: 0px 6px !important;
+
+  :global {
+    .n-button {
+      height: 28px;
+      padding: 0 13px;
+      font-size: 15px;
+      color: rgba(0, 0, 0, .6);
+
+      &.n-button--primary-type {
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+  }
+}

src/views/prepare-lessons/components/lesson-main/courseware-presets/select-related/resource-search-group/index.tsx

@@ -0,0 +1,53 @@
+import { PropType, defineComponent, onMounted, reactive } from 'vue';
+import styles from './index.module.less';
+import { NButton, NInput, NSelect, NSpace } from 'naive-ui';
+import { useCatchStore } from '/src/store/modules/catchData';
+import { useThrottleFn } from '@vueuse/core';
+
+export default defineComponent({
+  name: 'resource-search-group',
+  emits: ['search'],
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const forms = reactive({
+      name: ''
+    });
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const throttledFn = useThrottleFn(() => onSearch(), 500);
+
+    // onMounted(async () => {});
+    return () => (
+      <>
+        <div class={styles.searchGroup}>
+          <NInput
+            type="text"
+            placeholder="请输入课件标题关键词"
+            clearable
+            v-model:value={forms.name}
+            class={styles.inputSearch}
+            onKeyup={(e: KeyboardEvent) => {
+              if (e.code === 'Enter') {
+                throttledFn();
+              }
+            }}
+            onClear={() => {
+              forms.name = '';
+              throttledFn();
+            }}>
+            {{
+              prefix: () => (
+                <span
+                  class={'icon-search-input'}
+                  onClick={() => throttledFn()}></span>
+              )
+            }}
+          </NInput>
+        </div>
+      </>
+    );
+  }
+});

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

@@ -1,4 +1,6 @@
 .lesson-main {
+  height: 100%;
+
   :global {
     .n-tabs-tab-pad {
       width: 64px !important;

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

@@ -32,36 +32,36 @@ export default defineComponent({
 
     return () => (
       <div class={styles['lesson-main']}>
-        <NTabs
-          ref={lessonMainRef}
-          defaultValue="courseware"
-          paneClass={styles.paneTitle}
-          justifyContent="center"
-          paneWrapperClass={styles.paneWrapperContainer}
-          value={prepareStore.getTabType}
-          onUpdate:value={(val: string) => {
-            prepareStore.setTabType(val);
-            // 重置编辑状态
-            prepareStore.setIsEditResource(false);
-            prepareStore.setIsEditTrain(false);
+        {state.editCoursewareShow ? (
+          <NTabs
+            ref={lessonMainRef}
+            defaultValue="courseware"
+            paneClass={styles.paneTitle}
+            justifyContent="center"
+            paneWrapperClass={styles.paneWrapperContainer}
+            value={prepareStore.getTabType}
+            onUpdate:value={(val: string) => {
+              prepareStore.setTabType(val);
+              // 重置编辑状态
+              prepareStore.setIsEditResource(false);
+              prepareStore.setIsEditTrain(false);
 
-            eventGlobal.emit('teacher-slideshow', false);
-            if (val !== 'train') {
-              state.editWorkShow = false;
-            }
-          }}>
-          {!state.editWorkShow && (
-            <NTabPane
-              name="courseware"
-              tab={
-                state.editCoursewareShow
-                  ? state.coursewareType === 'create'
-                    ? '创建课件'
-                    : '编辑课件'
-                  : '课件'
+              eventGlobal.emit('teacher-slideshow', false);
+              if (val !== 'train') {
+                state.editWorkShow = false;
               }
-              displayDirective="if">
-              {state.editCoursewareShow ? (
+            }}>
+            {!state.editWorkShow && (
+              <NTabPane
+                name="courseware"
+                tab={
+                  state.editCoursewareShow
+                    ? state.coursewareType === 'create'
+                      ? '创建课件'
+                      : '编辑课件'
+                    : '课件'
+                }
+                displayDirective="if">
                 <Courseware
                   groupItem={state.editCourseware}
                   onChange={(val: any) => {
@@ -72,64 +72,54 @@ export default defineComponent({
                     }
                   }}
                 />
+              </NTabPane>
+            )}
+          </NTabs>
+        ) : (
+          <CoursewarePresets
+            onChange={(val: any) => {
+              state.coursewareType = val.type;
+              state.editCoursewareShow = val.status;
+              prepareStore.setIsEditResource(val.status);
+              state.editCourseware = val.groupItem;
+            }}
+          />
+        )}
+
+        {/* {!state.editCoursewareShow && (
+          <NTabPane
+            name="train"
+            // tab="作业"
+            tab={state.editWorkShow ? '编辑作业' : '作业'}
+            displayDirective="if">
+            <div>
+              {state.editWorkShow ? (
+                <Train
+                  lessonPreTraining={state.editWork}
+                  onChange={(val: any) => {
+                    state.editWorkShow = val.status;
+
+                    if (!val.status) {
+                      eventGlobal.emit('teacher-slideshow', false);
+                    }
+                  }}
+                />
               ) : (
-                <CoursewarePresets
+                <TrainPresets
                   onChange={(val: any) => {
-                    state.coursewareType = val.type;
-                    state.editCoursewareShow = val.status;
-                    prepareStore.setIsEditResource(val.status);
-                    state.editCourseware = val.groupItem;
+                    state.editWorkShow = val.status;
+                    state.editWork = {
+                      ...val.lessonPreTraining,
+                      title:
+                        val.lessonPreTraining?.title ||
+                        prepareStore.getSelectName + '课后作业'
+                    };
                   }}
                 />
               )}
-            </NTabPane>
-          )}
-
-          {!state.editCoursewareShow && (
-            <NTabPane
-              name="train"
-              // tab="作业"
-              tab={state.editWorkShow ? '编辑作业' : '作业'}
-              displayDirective="if"
-              // v-slots={{
-              //   tab: () =>
-              //     state.editWorkShow ? (
-              //       <span id="lessons-4">编辑作业</span>
-              //     ) : (
-              //       <span id="lessons-4">作业</span>
-              //     )
-              // }}
-              // {...{ id: 'lessons-4' }}
-            >
-              <div>
-                {state.editWorkShow ? (
-                  <Train
-                    lessonPreTraining={state.editWork}
-                    onChange={(val: any) => {
-                      state.editWorkShow = val.status;
-
-                      if (!val.status) {
-                        eventGlobal.emit('teacher-slideshow', false);
-                      }
-                    }}
-                  />
-                ) : (
-                  <TrainPresets
-                    onChange={(val: any) => {
-                      state.editWorkShow = val.status;
-                      state.editWork = {
-                        ...val.lessonPreTraining,
-                        title:
-                          val.lessonPreTraining?.title ||
-                          prepareStore.getSelectName + '课后作业'
-                      };
-                    }}
-                  />
-                )}
-              </div>
-            </NTabPane>
-          )}
-        </NTabs>
+            </div>
+          </NTabPane>
+        )} */}
       </div>
     );
   }

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

@@ -83,18 +83,18 @@ export default defineComponent({
     };
 
     // 检测数据是否存在
-    watch(
-      () => props.tableList,
-      () => {
-        // fromChapterLessonCoursewareId;
-        forms.tableList.forEach((item: any) => {
-          const index = props.tableList.findIndex(
-            (i: any) => i.fromChapterLessonCoursewareId === item.id
-          );
-          item.isAdd = index !== -1 ? true : false;
-        });
-      }
-    );
+    // watch(
+    //   () => props.tableList,
+    //   () => {
+    //     // fromChapterLessonCoursewareId;
+    //     forms.tableList.forEach((item: any) => {
+    //       const index = props.tableList.findIndex(
+    //         (i: any) => i.fromChapterLessonCoursewareId === item.id
+    //       );
+    //       item.isAdd = index !== -1 ? true : false;
+    //     });
+    //   }
+    // );
 
     const throttleFn = useThrottleFn(() => {
       forms.tableList = [];