更新优化弹窗，资源加载逻辑

src/components/upload-file/index.tsx

@@ -124,7 +124,6 @@ export default defineComponent({
     const fileListRef = ref<UploadFileInfo[]>([]);
     const initFileList = () => {
       if (props.fileList) {
-        console.log('downloadUrl', props.fileList);
         const splitName = props.fileList.split('/');
         fileListRef.value = [
           {

src/store/modules/prepareLessons.ts

@@ -9,8 +9,9 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     lessonCoursewareDetailId: '', // 哪个教材详情
     treeList: [] as any[], // 左边教学课件列表
     coursewareList: [] as any[], // 课件信息
-    tabType: '', // 备课 - 课件 | 训练 类型切换
-    coursewareFullScreen: false as boolean // 课件资源是否全屏
+    tabType: 'courseware', // 备课 - 课件 | 训练 类型切换 'courseware' | 'train'
+    selectMusicStatus: false, // 乐谱状态
+    selectResourceStatus: false // 资源状态
   }),
   getters: {
     /** 获取基础教学课件 */
@@ -37,9 +38,17 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     getCoursewareList(): any[] {
       return this.coursewareList;
     },
-    /** 获取课件是否全屏 */
-    getCoursewareFullScreen(): boolean {
-      return this.coursewareFullScreen;
+    /** 获取课件类型 */
+    getTabType(): string {
+      return this.tabType;
+    },
+    /** 获取乐谱状态 */
+    getSelectMusicStatus(): boolean {
+      return this.selectMusicStatus;
+    },
+    /** 获取资源状态 */
+    getSelectResourceStatus(): boolean {
+      return this.selectResourceStatus;
     }
   },
   actions: {
@@ -67,9 +76,17 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     setCoursewareList(list: any[]) {
       this.coursewareList = list;
     },
-    /** 设置课件是否全屏 */
-    setCoursewareFullScreen(status: boolean) {
-      this.coursewareFullScreen = status;
+    /** 设置课件类型 */
+    setTabType(type: string) {
+      this.tabType = type;
+    },
+    /** 设置乐谱状态 */
+    setSelectMusicStatus(status: boolean) {
+      this.selectMusicStatus = status;
+    },
+    /** 设置资源状态 */
+    setSelectResourceStatus(status: boolean) {
+      this.selectResourceStatus = status;
     }
   }
 });

src/store/modules/users.ts

@@ -57,7 +57,6 @@ export const useUserStore = defineStore('user-store', {
     async login(userInfo: any) {
       try {
         const { data } = await userLogin(userInfo);
-        console.log(data, 'data');
         const userToken = data.token_type + ' ' + data.access_token;
         const ex = 7 * 24 * 60 * 60 * 1000;
         storage.set(ACCESS_TOKEN, userToken, ex);

src/views/login/components/pwdLogin.tsx

@@ -41,8 +41,8 @@ export default defineComponent({
     const showPwd = ref(false);
     const userStore = useUserStore();
     const formInline = reactive({
-      username: '15907121013',
-      password: 'ktyq1013',
+      username: '',
+      password: '',
       isCaptcha: true
     });
 

src/views/prepare-lessons/components/directory-main/select-lessonware/index.tsx

@@ -40,7 +40,6 @@ export default defineComponent({
           enableFlag: 1
         });
 
-        console.log(data.rows, 'data');
         forms.list = data.rows;
       } catch {
         //

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

@@ -3,10 +3,12 @@ import styles from './index.module.less';
 import { NTabPane, NTabs } from 'naive-ui';
 import Courseware from './courseware';
 import Train from './train';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
 
 export default defineComponent({
   name: 'lesson-main',
   setup() {
+    const prepareStore = usePrepareStore();
     return () => (
       <div class={styles['lesson-main']}>
         <NTabs
@@ -14,7 +16,10 @@ export default defineComponent({
           defaultValue="courseware"
           paneClass={styles.paneTitle}
           justifyContent="center"
-          paneWrapperClass={styles.paneWrapperContainer}>
+          paneWrapperClass={styles.paneWrapperContainer}
+          onUpdate:value={(val: string) => {
+            prepareStore.setTabType(val);
+          }}>
           <NTabPane name="courseware" tab="课件">
             <Courseware />
           </NTabPane>

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

@@ -2,6 +2,15 @@
   margin: 10px 0;
   max-height: calc(var(--window-page-lesson-height) - 224px - 20px);
 
+  .listSection {
+    min-height: calc(var(--window-page-lesson-height) - 224px - 20px);
+  }
+
+  .emptySection {
+    display: flex;
+    align-items: center;
+  }
+
   .list {
     padding: 10px 0;
     text-align: center;

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

@@ -8,11 +8,8 @@ import TheEmpty from '/src/components/TheEmpty';
 export default defineComponent({
   name: 'share-resources',
   setup() {
-    const scrollContentRef = ref();
     const state = reactive({
-      searchWord: '',
       loading: false,
-      pageTotal: 0,
       finshed: false, // 是否加载完
       pagination: {
         page: 1,
@@ -25,14 +22,13 @@ export default defineComponent({
         subjectId: null,
         sourceType: 4
       },
-      tableList: [] as any,
-      teachingStatus: false,
-      show: false,
-      item: {} as any
+      tableList: [] as any
     });
     const getList = async () => {
       try {
-        state.loading = true;
+        if (state.pagination.page === 1) {
+          state.loading = true;
+        }
         const { data } = await materialQueryPage({
           ...state.searchGroup,
           ...state.pagination
@@ -81,24 +77,31 @@ export default defineComponent({
             // 是否到底，是否加载完
             if (
               clientHeight + scrollTop + 20 >= scrollHeight &&
-              !state.finshed
+              !state.finshed &&
+              !state.loading
             ) {
               state.pagination.page = state.pagination.page + 1;
               getList();
             }
           }}>
-          <div class={styles.list} ref={scrollContentRef}>
-            {state.tableList.map((item: any) => (
-              <CardType isShowAdd item={item} />
-            ))}
-          </div>
-
-          <NSpin
-            show={state.loading}
-            style={{ display: 'flex' }}
-            size={'small'}></NSpin>
-
-          {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
+          <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}>
+                  {state.tableList.map((item: any) => (
+                    <CardType isShowAdd item={item} />
+                  ))}
+                </div>
+              )}
+              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
+            </div>
+          </NSpin>
         </NScrollbar>
       </div>
     );

src/views/prepare-lessons/components/resource-main/components/my-collect/resource-search-group/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.less';
 import { NButton, NInput, NSelect, NSpace } from 'naive-ui';
 import { resourceTypeArray } from '/src/utils/searchArray';
 import { useCatchStore } from '/src/store/modules/catchData';
-import { useDebounceFn } from '@vueuse/core';
+import { useThrottleFn } from '@vueuse/core';
 
 export default defineComponent({
   name: 'resource-search-group',
@@ -22,7 +22,7 @@ export default defineComponent({
       emit('search', forms);
     };
 
-    const debouncedRequest = useDebounceFn(() => onSearch(), 500);
+    const debouncedRequest = useThrottleFn(() => onSearch(), 500);
 
     onMounted(async () => {
       resourceList.value = [

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

@@ -2,6 +2,15 @@
   margin: 10px 0;
   max-height: calc(var(--window-page-lesson-height) - 224px - 20px);
 
+  .listSection {
+    min-height: calc(var(--window-page-lesson-height) - 224px - 20px);
+  }
+
+  .emptySection {
+    display: flex;
+    align-items: center;
+  }
+
   .list {
     padding: 10px 0;
     text-align: center;

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

@@ -32,7 +32,9 @@ export default defineComponent({
     });
     const getList = async () => {
       try {
-        state.loading = true;
+        if (state.pagination.page === 1) {
+          state.loading = true;
+        }
         const { data } = await materialQueryPage({
           ...state.searchGroup,
           ...state.pagination
@@ -87,18 +89,24 @@ export default defineComponent({
               getList();
             }
           }}>
-          <div class={styles.list} ref={scrollContentRef}>
-            {state.tableList.map((item: any) => (
-              <CardType isShowAdd item={item} />
-            ))}
-          </div>
-
-          <NSpin
-            show={state.loading}
-            style={{ display: 'flex' }}
-            size={'small'}></NSpin>
-
-          {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
+          <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}>
+                  {state.tableList.map((item: any) => (
+                    <CardType isShowAdd item={item} />
+                  ))}
+                </div>
+              )}
+              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
+            </div>
+          </NSpin>
         </NScrollbar>
       </div>
     );

src/views/prepare-lessons/components/resource-main/components/my-resources/resource-search-group/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.less';
 import { NButton, NInput, NSelect, NSpace } from 'naive-ui';
 import { resourceTypeArray } from '/src/utils/searchArray';
 import { useCatchStore } from '/src/store/modules/catchData';
-import { useDebounceFn } from '@vueuse/core';
+import { useThrottleFn } from '@vueuse/core';
 
 export default defineComponent({
   name: 'resource-search-group',
@@ -22,7 +22,7 @@ export default defineComponent({
       emit('search', forms);
     };
 
-    const debouncedRequest = useDebounceFn(() => onSearch(), 500);
+    const debouncedRequest = useThrottleFn(() => onSearch(), 500);
 
     onMounted(async () => {
       resourceList.value = [

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

@@ -0,0 +1,27 @@
+.listContainer {
+  margin: 10px 0;
+  max-height: calc(var(--window-page-lesson-height) - 204px);
+  // overflow-x: auto;
+
+  .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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,120 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import ResourceSearchGroup from './resource-search-group';
+import { NScrollbar, NSpin } from 'naive-ui';
+import styles from './index.module.less';
+import CardType from '/src/components/card-type';
+import { materialQueryPage } from '/src/views/natural-resources/api';
+import TheEmpty from '/src/components/TheEmpty';
+import { useThrottleFn } from '@vueuse/core';
+export default defineComponent({
+  name: 'share-resources',
+  setup() {
+    const scrollContentRef = ref();
+    const state = reactive({
+      searchWord: '',
+      loading: false,
+      pageTotal: 0,
+      finshed: false, // 是否加载完
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: 'MUSIC', //
+        keyword: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: 2
+      },
+      tableList: [] as any,
+      teachingStatus: false,
+      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
+        });
+        state.loading = false;
+        const tempRows = data.rows || [];
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          temp.push({
+            id: row.id,
+            coverImg: row.coverImg,
+            type: row.type,
+            title: row.name,
+            isCollect: !!row.favoriteFlag,
+            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            content: row.content
+          });
+        });
+        state.tableList.push(...temp);
+
+        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();
+    };
+
+    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}
+          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} ref={scrollContentRef}>
+                  {state.tableList.map((item: any) => (
+                    <CardType isShowAdd item={item} />
+                  ))}
+                </div>
+              )}
+              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
+            </div>
+          </NSpin>
+        </NScrollbar>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/components/resource-main/components/select-music/resource-search-group/index.module.less

@@ -0,0 +1,59 @@
+.searchGroup {
+  padding: 0 20px;
+
+  .searchSelect {
+    padding: 0 0 20px;
+    display: flex;
+    justify-content: flex-start;
+    gap: 0px 16px;
+  }
+
+  :global {
+    .n-select {
+      max-width: 152px;
+    }
+
+    .n-base-selection,
+    .n-input {
+      border-radius: 8px;
+      min-height: 40px;
+      height: 40px;
+      font-size: 15px;
+      --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/resource-main/components/select-music/resource-search-group/index.tsx

@@ -0,0 +1,86 @@
+import { 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({
+      type: 'MUSIC', //
+      keyword: '',
+      bookVersionId: null,
+      subjectId: null
+    });
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const throttledFn = useThrottleFn(() => onSearch(), 500);
+
+    onMounted(async () => {
+      // 获取教材分类列表
+      await catchStore.getMusicSheetCategory();
+      // 获取声部列表
+      await catchStore.getSubjects();
+    });
+    return () => (
+      <>
+        <div class={styles.searchGroup}>
+          <div class={styles.searchSelect}>
+            <NSelect
+              placeholder="教材"
+              options={catchStore.getMusicCategories}
+              clearable
+              labelField="name"
+              valueField="id"
+              v-model:value={forms.bookVersionId}
+              onUpdate:value={() => {
+                onSearch();
+              }}
+            />
+            <NSelect
+              placeholder="乐器"
+              options={catchStore.getSubjectList}
+              clearable
+              labelField="name"
+              valueField="id"
+              v-model:value={forms.subjectId}
+              onUpdate:value={() => {
+                onSearch();
+              }}
+            />
+          </div>
+
+          <NInput
+            type="text"
+            placeholder="请输入搜索关键词"
+            clearable
+            v-model:value={forms.keyword}
+            class={styles.inputSearch}
+            onKeyup={(e: KeyboardEvent) => {
+              if (e.code === 'Enter') {
+                throttledFn();
+              }
+            }}
+            onClear={() => {
+              forms.keyword = '';
+              throttledFn();
+            }}>
+            {{
+              prefix: () => (
+                <span
+                  class={'icon-search-input'}
+                  onClick={() => throttledFn()}></span>
+              )
+            }}
+          </NInput>
+        </div>
+      </>
+    );
+  }
+});

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

@@ -3,6 +3,15 @@
   max-height: calc(var(--window-page-lesson-height) - 224px - 20px);
   // overflow-x: auto;
 
+  .listSection {
+    min-height: calc(var(--window-page-lesson-height) - 224px - 20px);
+  }
+
+  .emptySection {
+    display: flex;
+    align-items: center;
+  }
+
   .list {
     padding: 10px 0;
     text-align: center;

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

@@ -8,11 +8,8 @@ import TheEmpty from '/src/components/TheEmpty';
 export default defineComponent({
   name: 'share-resources',
   setup() {
-    const scrollContentRef = ref();
     const state = reactive({
-      searchWord: '',
       loading: false,
-      pageTotal: 0,
       finshed: false, // 是否加载完
       pagination: {
         page: 1,
@@ -25,14 +22,13 @@ export default defineComponent({
         subjectId: null,
         sourceType: 2
       },
-      tableList: [] as any,
-      teachingStatus: false,
-      show: false,
-      item: {} as any
+      tableList: [] as any
     });
     const getList = async () => {
       try {
-        state.loading = true;
+        if (state.pagination.page === 1) {
+          state.loading = true;
+        }
         const { data } = await materialQueryPage({
           ...state.searchGroup,
           ...state.pagination
@@ -81,23 +77,31 @@ export default defineComponent({
             // 是否到底，是否加载完
             if (
               clientHeight + scrollTop + 20 >= scrollHeight &&
-              !state.finshed
+              !state.finshed &&
+              !state.loading
             ) {
               state.pagination.page = state.pagination.page + 1;
               getList();
             }
           }}>
-          <div class={styles.list} ref={scrollContentRef}>
-            {state.tableList.map((item: any) => (
-              <CardType isShowAdd item={item} />
-            ))}
-          </div>
-          <NSpin
-            show={state.loading}
-            style={{ display: 'flex' }}
-            size={'small'}></NSpin>
-
-          {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
+          <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}>
+                  {state.tableList.map((item: any) => (
+                    <CardType isShowAdd item={item} />
+                  ))}
+                </div>
+              )}
+              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
+            </div>
+          </NSpin>
         </NScrollbar>
       </div>
     );

src/views/prepare-lessons/components/resource-main/components/share-resources/resource-search-group/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.less';
 import { NButton, NInput, NSelect, NSpace } from 'naive-ui';
 import { resourceTypeArray } from '/src/utils/searchArray';
 import { useCatchStore } from '/src/store/modules/catchData';
-import { useDebounceFn } from '@vueuse/core';
+import { useThrottleFn } from '@vueuse/core';
 
 export default defineComponent({
   name: 'resource-search-group',
@@ -21,7 +21,7 @@ export default defineComponent({
       emit('search', forms);
     };
 
-    const debouncedRequest = useDebounceFn(() => onSearch(), 500);
+    const debouncedRequest = useThrottleFn(() => onSearch(), 500);
 
     onMounted(async () => {
       // 获取教材分类列表

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

@@ -47,6 +47,8 @@
     height: 18px;
     cursor: pointer;
   }
+
+
 }
 
 .selectMusicModal {

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

@@ -4,68 +4,131 @@ import { NTabs, NTabPane, NModal } from 'naive-ui';
 import ShareResources from './components/share-resources';
 import MyResources from './components/my-resources';
 import MyCollect from './components/my-collect';
+import SelectMusicModal from '../../model/select-music';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import SelectMusic from '../../model/select-music';
+import SelectResources from '../../model/select-resources';
+import SelectMusic from './components/select-music';
 
 export default defineComponent({
   name: 'resource-main',
   setup() {
-    const prePareStore = usePrepareStore();
+    const prepareStore = usePrepareStore();
     const forms = reactive({
-      selectMusicStatus: false
+      selectMusicStatus: false,
+      selectResourceStatus: false
     });
     return () => (
-      <div class={styles['resource-main']}>
-        <NTabs
-          animated
-          defaultValue="shareResources"
-          paneClass={styles.paneTitle}
-          paneWrapperClass={styles.paneWrapperContainer}>
-          {{
-            suffix: () => (
-              <div
-                class={styles.iconScreen}
-                onClick={() => (prePareStore.coursewareFullScreen = 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="shareResources"
-                  tab="共享资源"
-                  displayDirective="show:lazy">
-                  <ShareResources />
+      <div
+        class={[
+          styles['resource-main'],
+          forms.selectMusicStatus || forms.selectResourceStatus
+            ? styles.resourceClose
+            : ''
+        ]}>
+        {prepareStore.getTabType === 'courseware' ? (
+          <NTabs
+            animated
+            value="shareResources"
+            paneClass={styles.paneTitle}
+            paneWrapperClass={styles.paneWrapperContainer}>
+            {{
+              suffix: () => (
+                <div
+                  class={styles.iconScreen}
+                  onClick={() => {
+                    forms.selectResourceStatus = true;
+                    prepareStore.setSelectResourceStatus(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="shareResources"
+                    tab="共享资源"
+                    displayDirective="show:lazy">
+                    <ShareResources />
+                  </NTabPane>
+                  <NTabPane
+                    name="myResources"
+                    tab="我的资源"
+                    displayDirective="show:lazy">
+                    <MyResources />
+                  </NTabPane>
+                  <NTabPane
+                    name="myCollect"
+                    tab="我的收藏"
+                    displayDirective="show:lazy">
+                    <MyCollect />
+                  </NTabPane>
+                </>
+              )
+            }}
+          </NTabs>
+        ) : (
+          <NTabs
+            animated
+            value="selectMusic"
+            paneClass={styles.paneTitle}
+            justifyContent="center"
+            paneWrapperClass={styles.paneWrapperContainer}>
+            {{
+              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="selectMusic" tab="选择曲目">
+                  <SelectMusic />
                 </NTabPane>
-                <NTabPane
-                  name="myResources"
-                  tab="我的资源"
-                  displayDirective="show:lazy">
-                  <MyResources />
-                </NTabPane>
-                <NTabPane
-                  name="myCollect"
-                  tab="我的收藏"
-                  displayDirective="show:lazy">
-                  <MyCollect />
-                </NTabPane>
-              </>
-            )
-          }}
-        </NTabs>
+              )
+            }}
+          </NTabs>
+        )}
 
         <NModal
           v-model:show={forms.selectMusicStatus}
+          onUpdate:show={(val: any) => {
+            if (!val) {
+              prepareStore.setSelectMusicStatus(val);
+            }
+          }}
           class={['modalTitle', styles.selectMusicModal]}
           preset="card"
           title={'选择曲目'}>
-          <SelectMusic />
+          <SelectMusicModal />
+        </NModal>
+
+        <NModal
+          v-model:show={forms.selectResourceStatus}
+          onUpdate:show={(val: any) => {
+            if (!val) {
+              prepareStore.setSelectResourceStatus(val);
+            }
+          }}
+          class={['modalTitle', styles.selectMusicModal]}
+          preset="card"
+          title={'选择资源'}>
+          <SelectResources />
         </NModal>
       </div>
     );

src/views/prepare-lessons/index.module.less

@@ -18,4 +18,15 @@
     background-color: #fff;
     border-radius: 20px;
   }
+
+  .resourceMain {
+    transition: all .2s ease-in-out;
+
+    &.resourceClose {
+      transition: all .2s ease-in-out;
+      width: 0;
+      transform: translateX(100%);
+      opacity: 0;
+    }
+  }
 }

src/views/prepare-lessons/index.tsx

@@ -4,10 +4,12 @@ import DirectoryList from './components/directory-main';
 import LessonMain from './components/lesson-main';
 import ResourceMain from './components/resource-main';
 import { useResizeObserver } from '@vueuse/core';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
 
 export default defineComponent({
   name: 'prepare-lessons',
   setup() {
+    const prepareStore = usePrepareStore();
     const directroyRef = ref();
     onMounted(() => {
       useResizeObserver(
@@ -33,7 +35,15 @@ export default defineComponent({
           <LessonMain />
         </div>
         {/* 资源 */}
-        <div class={styles.resourceMain} id="resourceRef">
+        <div
+          class={[
+            styles.resourceMain
+            // prepareStore.getSelectMusicStatus ||
+            // prepareStore.getSelectResourceStatus
+            //   ? styles.resourceClose
+            //   : ''
+          ]}
+          id="resourceRef">
           <ResourceMain />
         </div>
       </div>

src/views/prepare-lessons/model/select-music/index.module.less

@@ -52,6 +52,16 @@
 .listContainer {
   margin-bottom: 20px;
   max-height: 50vh;
+  min-height: 50vh;
+
+  .listSection {
+    min-height: 50vh;
+  }
+
+  .emptySection {
+    display: flex;
+    align-items: center;
+  }
 }
 
 .list {
@@ -69,14 +79,14 @@
   padding: 0 40px;
 
   :global {
-    .n-form {
-      .n-form-item .n-form-item-label {
-        font-size: 17px;
-        font-weight: 600;
-        color: #131415;
-        line-height: 24px;
-      }
+    .n-form-item .n-form-item-label {
+      font-size: 17px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 24px;
+    }
 
+    .n-form-item {
       .n-button {
         height: 32px;
         font-size: 17px;
@@ -87,39 +97,42 @@
       .n-button--primary-type {
         color: #131415;
       }
+    }
 
-      .n-form-item-feedback-wrapper {
-        min-height: 14px;
-      }
+    .n-form-item-feedback-wrapper {
+      min-height: 14px;
     }
   }
+}
 
-  .inputSearch {
-    position: absolute;
-    top: 4px;
-    right: 40px;
-    width: 360px;
-    height: 42px;
-    font-size: 16px;
-
-    img {
-      width: 18px;
-      height: 18px;
-    }
 
-    :global {
-      .n-input-wrapper {
-        padding-left: 12px;
-        padding-right: 4px;
-        height: 42px !important;
-      }
+.inputSearch {
+  position: absolute;
+  top: 4px;
+  right: 40px;
+  width: 360px !important;
+  height: 42px !important;
+  font-size: 16px;
 
-      .n-button {
-        height: 34px;
-        font-size: 15px;
-        font-weight: 500;
-        width: auto;
-      }
+  :global {
+    .n-input-wrapper {
+      padding-left: 12px;
+      padding-right: 4px;
     }
   }
+
+  .searchBtn {
+    height: 34px;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 500;
+  }
+}
+
+.spaceSection {
+  width: 76%;
+
+  &>div {
+    line-height: var(--n-blank-height);
+  }
 }

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

@@ -1,40 +1,77 @@
-import { NButton, NIcon, NScrollbar, NTabPane, NTabs } from 'naive-ui';
-import { defineComponent, reactive } from 'vue';
+import { NScrollbar, NSpin, NTabPane, NTabs } from 'naive-ui';
+import { defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
 import CardType from '@/components/card-type';
 import SearchGroup from './search-group';
-import listData from '@views/xiaoku-music/data.json';
+import { materialQueryPage } from '/src/views/natural-resources/api';
+import TheEmpty from '/src/components/TheEmpty';
+import { useThrottleFn } from '@vueuse/core';
 
 export default defineComponent({
   name: 'select-music',
   emits: ['select'],
   setup(props, { emit }) {
-    const forms = reactive({
-      list: [],
-      height: '100%' as any
+    const state = reactive({
+      loading: false,
+      finshed: false, // 是否加载完
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: 'MUSIC', //
+        keyword: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: 2
+      },
+      tableList: [] as any
     });
-
-    const formatData = () => {
-      const rows = listData.rows || [];
-      console.log(rows);
-      const tempList: any = [];
-      rows.forEach((row: any, i: number) => {
-        if (i <= 10) {
-          tempList.push({
+    const getList = async () => {
+      try {
+        if (state.pagination.page === 1) {
+          state.loading = true;
+        }
+        const { data } = await materialQueryPage({
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        state.loading = false;
+        const tempRows = data.rows || [];
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          temp.push({
             id: row.id,
-            type: 'MUSIC',
-            title: row.musicSheetName,
-            url: row.fixedTone ? row.fixedTone.split(',')[0] : '',
-            isCollect: i % 3 ? false : true,
-            isSelected: i % 4 ? false : true
+            coverImg: row.coverImg,
+            type: row.type,
+            title: row.name,
+            isCollect: !!row.favoriteFlag,
+            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            content: row.content
           });
-        }
-      });
+        });
+        state.tableList.push(...temp);
+        state.finshed = data.pages <= data.current ? true : false;
+      } catch {
+        state.loading = false;
+      }
+    };
 
-      forms.list = tempList || [];
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      state.tableList = [];
+      state.searchGroup = Object.assign(state.searchGroup, item);
+      getList();
     };
 
-    formatData();
+    const throttledFn = useThrottleFn(() => {
+      state.pagination.page = state.pagination.page + 1;
+      getList();
+    }, 500);
+
+    onMounted(() => {
+      getList();
+    });
     return () => (
       <div class={styles.selectMusic}>
         <NTabs
@@ -44,17 +81,42 @@ export default defineComponent({
           justifyContent="center"
           paneWrapperClass={styles.paneWrapperContainer}>
           <NTabPane name="shareResources" tab="选择曲目">
-            <SearchGroup />
-            <NScrollbar class={styles.listContainer}>
-              <div class={styles.list}>
-                {forms.list.map((item: any) => (
-                  <CardType
-                    isShowAdd
-                    item={item}
-                    onAdd={(i: any) => emit('select', i)}
-                  />
-                ))}
-              </div>
+            <SearchGroup onSearch={(item: any) => onSearch(item)} />
+            <NScrollbar
+              class={styles.listContainer}
+              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}>
+                      {state.tableList.map((item: any) => (
+                        <CardType isShowAdd item={item} />
+                      ))}
+                    </div>
+                  )}
+                  {!state.loading && state.tableList.length <= 0 && (
+                    <TheEmpty />
+                  )}
+                </div>
+              </NSpin>
             </NScrollbar>
           </NTabPane>
         </NTabs>

src/views/prepare-lessons/model/select-music/search-group.tsx

@@ -1,61 +1,90 @@
-import { defineComponent, reactive, ref } from 'vue';
+import { defineComponent, reactive, onMounted } from 'vue';
 import styles from './index.module.less';
-import { NButton, NForm, NFormItem, NInput, NSpace } from 'naive-ui';
+import { NButton, NForm, NFormItem, NSpace } from 'naive-ui';
 import TheSearch from '/src/components/TheSearch';
+import { useCatchStore } from '/src/store/modules/catchData';
+import { useThrottleFn } from '@vueuse/core';
 
 export default defineComponent({
   name: 'search-group',
-  setup() {
-    const isFocus = ref(false);
+  emits: ['search', 'add'],
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
     const forms = reactive({
-      search: ''
+      type: 'MUSIC', //
+      keyword: '',
+      bookVersionId: null,
+      subjectId: null
+    });
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const throttledFn = useThrottleFn(() => {
+      onSearch();
+    }, 500);
+
+    onMounted(async () => {
+      // 获取教材分类列表
+      await catchStore.getMusicSheetCategory();
+      // 获取声部列表
+      await catchStore.getSubjects();
     });
     return () => (
       <div class={styles.searchGroup}>
         <NForm labelAlign="left" labelPlacement="left">
-          <NFormItem label="教材：">
-            <NSpace>
-              <NButton secondary strong type="primary" focusable={false}>
-                全部
-              </NButton>
-              <NButton quaternary focusable={false}>
-                人教版
-              </NButton>
-              <NButton quaternary focusable={false}>
-                声部训练
-              </NButton>
-              <NButton quaternary focusable={false}>
-                小曲目
-              </NButton>
-              <NButton quaternary focusable={false}>
-                考级曲目
-              </NButton>
-            </NSpace>
-          </NFormItem>
+          {forms.type === 'MUSIC' && (
+            <NFormItem label="教材：">
+              <NSpace class={styles.spaceSection}>
+                {catchStore.getAllMusicCategories.map((music: any) => (
+                  <NButton
+                    secondary={forms.bookVersionId === music.id}
+                    quaternary={forms.bookVersionId !== music.id}
+                    strong
+                    focusable={false}
+                    type={
+                      forms.bookVersionId === music.id ? 'primary' : 'default'
+                    }
+                    onClick={() => {
+                      forms.bookVersionId = music.id;
+                      throttledFn();
+                    }}>
+                    {music.name}
+                  </NButton>
+                ))}
+              </NSpace>
+            </NFormItem>
+          )}
+
           <NFormItem label="乐器：">
-            <NSpace>
-              <NButton secondary strong type="primary">
-                全部
-              </NButton>
-              <NButton quaternary focusable={false} type="default">
-                竖笛
-              </NButton>
-              <NButton quaternary focusable={false} type="default">
-                排萧
-              </NButton>
-              <NButton quaternary focusable={false} type="default">
-                口风琴
-              </NButton>
-              <NButton quaternary focusable={false} type="default">
-                陶笛
-              </NButton>
-              <NButton quaternary focusable={false} type="default">
-                葫芦丝
-              </NButton>
+            <NSpace class={styles.spaceSection}>
+              {catchStore.getSubjectAllList.map((subject: any) => (
+                <NButton
+                  secondary={forms.subjectId === subject.id}
+                  quaternary={forms.subjectId !== subject.id}
+                  strong
+                  focusable={false}
+                  type={forms.subjectId === subject.id ? 'primary' : 'default'}
+                  onClick={() => {
+                    forms.subjectId = subject.id;
+                    throttledFn();
+                  }}>
+                  {subject.name}
+                </NButton>
+              ))}
             </NSpace>
           </NFormItem>
+
+          <TheSearch
+            class={styles.inputSearch}
+            round
+            onSearch={(val: string) => {
+              forms.keyword = val;
+              throttledFn();
+            }}
+          />
         </NForm>
-        <TheSearch class={styles.inputSearch} round />
       </div>
     );
   }

src/views/prepare-lessons/model/select-resources/index.module.less

@@ -0,0 +1,125 @@
+.selectMusic {
+  :global {
+    .n-tabs-tab-pad {
+      width: 80px !important;
+    }
+
+    .n-tabs-nav {
+      padding: 12px 20px 24px;
+    }
+
+    .n-tabs-tab {
+      color: #8B8D98;
+      font-size: 22px;
+      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: 2px;
+    }
+
+    .n-tab-pane {
+      padding-top: 0 !important;
+    }
+  }
+
+  .close {
+    padding: 0;
+
+    :global {
+      .n-icon {
+        font-size: var(--n-close-size);
+        color: var(--n-close-icon-color);
+      }
+    }
+  }
+}
+
+.listContainer {
+  margin-bottom: 20px;
+  max-height: 50vh;
+}
+
+.list {
+  margin-top: 10px;
+  padding: 0 40px 0;
+  margin-bottom: 12px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 22px;
+}
+
+.searchGroup {
+  position: relative;
+  padding: 0 40px;
+
+  :global {
+    .n-form {
+      .n-form-item .n-form-item-label {
+        font-size: 17px;
+        font-weight: 600;
+        color: #131415;
+        line-height: 24px;
+      }
+
+      .n-button {
+        height: 32px;
+        font-size: 17px;
+        border-radius: 8px;
+        color: rgba(0, 0, 0, 0.6);
+      }
+
+      .n-button--primary-type {
+        color: #131415;
+      }
+
+      .n-form-item-feedback-wrapper {
+        min-height: 14px;
+      }
+    }
+  }
+
+  .inputSearch {
+    position: absolute;
+    top: 4px;
+    right: 40px;
+    width: 360px;
+    height: 42px;
+    font-size: 16px;
+
+    img {
+      width: 18px;
+      height: 18px;
+    }
+
+    :global {
+      .n-input-wrapper {
+        padding-left: 12px;
+        padding-right: 4px;
+        height: 42px !important;
+      }
+
+      .n-button {
+        height: 34px;
+        font-size: 15px;
+        font-weight: 500;
+        width: auto;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,70 @@
+import { NButton, NIcon, NScrollbar, NTabPane, NTabs } from 'naive-ui';
+import { defineComponent, reactive } from 'vue';
+import styles from './index.module.less';
+import CardType from '@/components/card-type';
+import SearchGroup from './search-group';
+import listData from '@views/xiaoku-music/data.json';
+import ShareResources from '../../components/resource-main/components/share-resources';
+import MyResources from '../../components/resource-main/components/my-resources';
+import MyCollect from '../../components/resource-main/components/my-collect';
+
+export default defineComponent({
+  name: 'select-music',
+  emits: ['select'],
+  setup(props, { emit }) {
+    const forms = reactive({
+      list: [],
+      height: '100%' as any
+    });
+
+    const formatData = () => {
+      const rows = listData.rows || [];
+      const tempList: any = [];
+      rows.forEach((row: any, i: number) => {
+        if (i <= 10) {
+          tempList.push({
+            id: row.id,
+            type: 'MUSIC',
+            title: row.musicSheetName,
+            url: row.fixedTone ? row.fixedTone.split(',')[0] : '',
+            isCollect: i % 3 ? false : true,
+            isSelected: i % 4 ? false : true
+          });
+        }
+      });
+
+      forms.list = tempList || [];
+    };
+
+    formatData();
+    return () => (
+      <div class={styles.selectMusic}>
+        <NTabs
+          animated
+          defaultValue="shareResources"
+          paneClass={styles.paneTitle}
+          justifyContent="center"
+          paneWrapperClass={styles.paneWrapperContainer}>
+          <NTabPane
+            name="shareResources"
+            tab="共享资源"
+            displayDirective="show:lazy">
+            <ShareResources />
+          </NTabPane>
+          <NTabPane
+            name="myResources"
+            tab="我的资源"
+            displayDirective="show:lazy">
+            <MyResources />
+          </NTabPane>
+          <NTabPane
+            name="myCollect"
+            tab="我的收藏"
+            displayDirective="show:lazy">
+            <MyCollect />
+          </NTabPane>
+        </NTabs>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/select-resources/search-group.tsx

@@ -0,0 +1,62 @@
+import { defineComponent, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { NButton, NForm, NFormItem, NInput, NSpace } from 'naive-ui';
+import TheSearch from '/src/components/TheSearch';
+
+export default defineComponent({
+  name: 'search-group',
+  setup() {
+    const isFocus = ref(false);
+    const forms = reactive({
+      search: ''
+    });
+    return () => (
+      <div class={styles.searchGroup}>
+        <NForm labelAlign="left" labelPlacement="left">
+          <NFormItem label="教材：">
+            <NSpace>
+              <NButton secondary strong type="primary" focusable={false}>
+                全部
+              </NButton>
+              <NButton quaternary focusable={false}>
+                人教版
+              </NButton>
+              <NButton quaternary focusable={false}>
+                声部训练
+              </NButton>
+              <NButton quaternary focusable={false}>
+                小曲目
+              </NButton>
+              <NButton quaternary focusable={false}>
+                考级曲目
+              </NButton>
+            </NSpace>
+          </NFormItem>
+          <NFormItem label="乐器：">
+            <NSpace>
+              <NButton secondary strong type="primary">
+                全部
+              </NButton>
+              <NButton quaternary focusable={false} type="default">
+                竖笛
+              </NButton>
+              <NButton quaternary focusable={false} type="default">
+                排萧
+              </NButton>
+              <NButton quaternary focusable={false} type="default">
+                口风琴
+              </NButton>
+              <NButton quaternary focusable={false} type="default">
+                陶笛
+              </NButton>
+              <NButton quaternary focusable={false} type="default">
+                葫芦丝
+              </NButton>
+            </NSpace>
+          </NFormItem>
+        </NForm>
+        <TheSearch class={styles.inputSearch} round />
+      </div>
+    );
+  }
+});