修改资源数据

src/components/TheSearch/index.tsx

@@ -1,6 +1,6 @@
 import { PropType, defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
-import { InputProps, NButton, NIcon, NImage, NInput } from 'naive-ui';
+import { InputProps, NButton, NInput } from 'naive-ui';
 import icon_search from '/src/common/images/icon_search.svg';
 import icon_searchActive from '/src/common/images/icon_searchActive.svg';
 
@@ -23,7 +23,17 @@ export default defineComponent({
         class={styles.TheSearch}
         round={props.round}
         placeholder="请输入搜索关键词"
-        v-model:value={searchData.value}>
+        clearable
+        v-model:value={searchData.value}
+        onClear={() =>
+          emit('search', searchData.value ? searchData.value.trim() : '')
+        }
+        onKeyup={(e: KeyboardEvent) => {
+          e.stopPropagation();
+          if (e.code === 'Enter') {
+            emit('search', searchData.value ? searchData.value.trim() : '');
+          }
+        }}>
         {{
           prefix: () => (
             <>

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

@@ -0,0 +1,27 @@
+.listContainer {
+  margin: 10px 0;
+  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;
+
+    &>div {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,126 @@
+import { PropType, 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';
+
+const formatType = (type: string) => {
+  if (type === 'shareResources') {
+    return 2;
+  } else if (type === 'myResources') {
+    return 3;
+  } else if (type === 'myCollect') {
+    return 4;
+  }
+};
+export default defineComponent({
+  name: 'share-resources',
+  props: {
+    type: {
+      type: String as PropType<'shareResources' | 'myResources' | 'myCollect'>,
+      default: 'shareResources'
+    }
+  },
+  setup(props) {
+    const state = reactive({
+      loading: false,
+      finshed: false, // 是否加载完
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: props.type === 'shareResources' ? 'MUSIC' : '', //
+        keyword: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: formatType(props.type),
+        enableFlag: true
+      },
+      tableList: [] 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();
+    };
+
+    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
+            ) {
+              state.pagination.page = state.pagination.page + 1;
+              getList();
+            }
+          }}>
+          <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/resource-item/resource-search-group/index.module.less

@@ -0,0 +1,56 @@
+.searchGroup {
+  padding: 0 20px;
+
+  .searchSelect {
+    padding: 20px 0;
+    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: 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/resource-item/resource-search-group/index.tsx

@@ -0,0 +1,112 @@
+import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
+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 { useThrottleFn } from '@vueuse/core';
+
+export default defineComponent({
+  name: 'resource-search-group',
+  emits: ['search'],
+  props: {
+    type: {
+      type: String as PropType<'shareResources' | 'myResources' | 'myCollect'>,
+      default: 'shareResources'
+    }
+  },
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const forms = reactive({
+      type: 'MUSIC', //
+      keyword: '',
+      bookVersionId: null,
+      subjectId: null
+    });
+    const resourceType = ref([] as any);
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const debouncedRequest = useThrottleFn(() => onSearch(), 500);
+
+    onMounted(async () => {
+      if (props.type === 'myResources' || props.type === 'myCollect') {
+        resourceType.value.push({
+          label: '全部',
+          value: ''
+        });
+        forms.type = ''; // 默认全部
+      }
+      resourceTypeArray.forEach((item: any) => {
+        if (props.type === 'myResources') {
+          item.value !== 'MUSIC' && resourceType.value.push(item);
+        } else {
+          resourceType.value.push(item);
+        }
+      });
+      // 获取教材分类列表
+      await catchStore.getMusicSheetCategory();
+    });
+    return () => (
+      <>
+        <div class={styles.searchGroup}>
+          <NSpace size="small" class={styles.btnType}>
+            {resourceTypeArray.map((item: any) => (
+              <NButton
+                type={forms.type === item.value ? 'primary' : 'default'}
+                secondary={forms.type === item.value ? false : true}
+                round
+                size="small"
+                focusable={false}
+                onClick={() => {
+                  forms.type = item.value;
+                  debouncedRequest();
+                }}>
+                {item.label}
+              </NButton>
+            ))}
+          </NSpace>
+
+          <div class={styles.searchSelect}>
+            <NSelect
+              placeholder="教材"
+              options={catchStore.getMusicCategories}
+              clearable
+              labelField="name"
+              valueField="id"
+              v-model:value={forms.bookVersionId}
+              onUpdate:value={() => {
+                onSearch();
+              }}
+            />
+          </div>
+
+          <NInput
+            type="text"
+            placeholder="请输入搜索关键词"
+            clearable
+            v-model:value={forms.keyword}
+            class={styles.inputSearch}
+            onKeyup={(e: KeyboardEvent) => {
+              if (e.code === 'Enter') {
+                debouncedRequest();
+              }
+            }}
+            onClear={() => {
+              forms.keyword = '';
+              debouncedRequest();
+            }}>
+            {{
+              prefix: () => (
+                <span
+                  class={'icon-search-input'}
+                  onClick={() => debouncedRequest()}></span>
+              )
+            }}
+          </NInput>
+        </div>
+      </>
+    );
+  }
+});

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

@@ -8,6 +8,7 @@ import SelectMusicModal from '../../model/select-music';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import SelectResources from '../../model/select-resources';
 import SelectMusic from './components/select-music';
+import ResourceItem from './components/resource-item';
 
 export default defineComponent({
   name: 'resource-main',
@@ -54,19 +55,19 @@ export default defineComponent({
                     name="shareResources"
                     tab="共享资源"
                     displayDirective="show:lazy">
-                    <ShareResources />
+                    <ResourceItem type="shareResources" />
                   </NTabPane>
                   <NTabPane
                     name="myResources"
                     tab="我的资源"
                     displayDirective="show:lazy">
-                    <MyResources />
+                    <ResourceItem type="myResources" />
                   </NTabPane>
                   <NTabPane
                     name="myCollect"
                     tab="我的收藏"
                     displayDirective="show:lazy">
-                    <MyCollect />
+                    <ResourceItem type="myCollect" />
                   </NTabPane>
                 </>
               )

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

@@ -1,4 +1,6 @@
 .selectMusic {
+  padding-bottom: 10px;
+
   :global {
     .n-tabs-tab-pad {
       width: 80px !important;
@@ -54,72 +56,72 @@
   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;
-      }
-    }
-  }
-}
+// .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

@@ -1,42 +1,12 @@
-import { NButton, NIcon, NScrollbar, NTabPane, NTabs } from 'naive-ui';
-import { defineComponent, reactive } from 'vue';
+import { NTabPane, NTabs } from 'naive-ui';
+import { defineComponent } 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';
+import SelectItem from './select-item';
 
 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
@@ -49,19 +19,19 @@ export default defineComponent({
             name="shareResources"
             tab="共享资源"
             displayDirective="show:lazy">
-            <ShareResources />
+            <SelectItem type="shareResources" />
           </NTabPane>
           <NTabPane
             name="myResources"
             tab="我的资源"
             displayDirective="show:lazy">
-            <MyResources />
+            <SelectItem type="myResources" />
           </NTabPane>
           <NTabPane
             name="myCollect"
             tab="我的收藏"
             displayDirective="show:lazy">
-            <MyCollect />
+            <SelectItem type="myCollect" />
           </NTabPane>
         </NTabs>
       </div>

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

@@ -0,0 +1,36 @@
+.listContainer {
+  margin: 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 {
+    margin-top: 10px;
+    padding: 0 40px 0;
+    margin-bottom: 12px;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    gap: 22px;
+  }
+
+  .list {
+    // padding: 10px 0;
+    // text-align: center;
+
+    &>div {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,132 @@
+import { PropType, 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';
+
+const formatType = (type: string) => {
+  if (type === 'shareResources') {
+    return 2;
+  } else if (type === 'myResources') {
+    return 3;
+  } else if (type === 'myCollect') {
+    return 4;
+  }
+};
+
+export default defineComponent({
+  name: 'share-resources',
+  props: {
+    type: {
+      type: String as PropType<'shareResources' | 'myResources' | 'myCollect'>,
+      default: 'shareResources'
+    }
+  },
+  setup(props) {
+    const state = reactive({
+      loading: false,
+      finshed: false, // 是否加载完
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: props.type === 'shareResources' ? 'MUSIC' : '', //
+        keyword: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: formatType(props.type),
+        enableFlag: true
+      },
+      tableList: [] 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();
+    };
+
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <div>
+        <ResourceSearchGroup
+          type={props.type}
+          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
+            ) {
+              state.pagination.page = state.pagination.page + 1;
+              getList();
+            }
+          }}>
+          <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/model/select-resources/select-item/resource-search-group/index.module.less

@@ -0,0 +1,110 @@
+.searchGroup {
+  position: relative;
+  padding: 0 40px;
+
+
+  .btnType {
+    gap: 0px 24px !important;
+
+    :global {
+      .n-button {
+        height: 37px;
+        padding: 0 24px;
+        font-size: 18px;
+        color: rgba(0, 0, 0, .6);
+
+        &.n-button--primary-type {
+          font-weight: bold;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  :global {
+    .n-form {
+      position: relative;
+    }
+
+    .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 {
+    width: 360px;
+    height: 42px;
+    font-size: 16px;
+    --n-height: 42px !important;
+
+    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;
+      }
+    }
+  }
+
+  .searchCatatory {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #F2F2F2;
+    margin-bottom: 20px;
+
+    .addTrain {
+      height: 37px;
+      border-radius: 8px;
+      font-size: 18px;
+      background-color: #E8F4FF;
+      color: #0378EC;
+
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+.spaceSection {
+  // width: 72%;
+
+  &>div {
+    line-height: var(--n-blank-height);
+  }
+}

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

@@ -0,0 +1,109 @@
+import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { NButton, NForm, NFormItem, NSpace } from 'naive-ui';
+import { resourceTypeArray } from '/src/utils/searchArray';
+import { useCatchStore } from '/src/store/modules/catchData';
+import { useThrottleFn } from '@vueuse/core';
+import TheSearch from '/src/components/TheSearch';
+
+export default defineComponent({
+  name: 'resource-search-group',
+  props: {
+    type: {
+      type: String as PropType<'shareResources' | 'myResources' | 'myCollect'>,
+      default: 'shareResources'
+    }
+  },
+  emits: ['search'],
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const forms = reactive({
+      type: 'MUSIC', //
+      keyword: '',
+      bookVersionId: null,
+      subjectId: null
+    });
+    const resourceType = ref([] as any);
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const throttleFn = useThrottleFn(() => onSearch(), 500);
+
+    onMounted(async () => {
+      if (props.type === 'myResources' || props.type === 'myCollect') {
+        resourceType.value.push({
+          label: '全部',
+          value: ''
+        });
+        forms.type = ''; // 默认全部
+      }
+      resourceTypeArray.forEach((item: any) => {
+        if (props.type === 'myResources') {
+          item.value !== 'MUSIC' && resourceType.value.push(item);
+        } else {
+          resourceType.value.push(item);
+        }
+      });
+
+      // 获取教材分类列表
+      await catchStore.getMusicSheetCategory();
+    });
+    return () => (
+      <div class={styles.searchGroup}>
+        <div class={styles.searchCatatory}>
+          <NSpace size="small" class={styles.btnType}>
+            {resourceType.value.map((item: any) => (
+              <NButton
+                type={forms.type === item.value ? 'primary' : 'default'}
+                secondary={forms.type === item.value ? false : true}
+                round
+                size="small"
+                focusable={false}
+                onClick={() => {
+                  forms.type = item.value;
+                  onSearch();
+                }}>
+                {item.label}
+              </NButton>
+            ))}
+          </NSpace>
+
+          <TheSearch
+            class={styles.inputSearch}
+            round
+            onSearch={(val: string) => {
+              forms.keyword = val;
+              throttleFn();
+            }}
+          />
+        </div>
+        <NForm labelAlign="left" labelPlacement="left">
+          {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.value;
+                      throttleFn();
+                    }}>
+                    {music.name}
+                  </NButton>
+                ))}
+              </NSpace>
+            </NFormItem>
+          )}
+        </NForm>
+      </div>
+    );
+  }
+});